/* ========================================== GEIST — self-hosted, SIL OFL 1.1 Variable files: one request covers 100-900, which matters because this site uses 15 distinct weights including 450, 480, 520, 650, 750 and 850. Italic and mono are declared but only fetched when a rule matches them. ========================================== */ @font-face { font-family: 'Geist'; src: url('../../assets/fonts/Geist-Variable.woff2') format('woff2-variations'), url('../../assets/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../../assets/fonts/Geist-Italic-Variable.woff2') format('woff2-variations'), url('../../assets/fonts/Geist-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../../assets/fonts/GeistMono-Variable.woff2') format('woff2-variations'), url('../../assets/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Consolidated from 10 separate :root blocks. Where a token was defined more than once the LAST value is kept, which is what the cascade already resolved to: --ease-smooth was cubic-bezier(0.25,0.1,0.25,1), dead since five later blocks set cubic-bezier(0.4,0,0.2,1) --sbd-section-padding was 100px 0, overridden to 80px 0 */ --color-primary: #1e4d8c; --color-primary-light: #3b6fc4; --color-primary-dark: #16386a; --color-primary-50: #eef3fb; --color-primary-100: #d4e1f5; --color-primary-200: #a7c0ea; --color-primary-500: #3b6fc4; --color-primary-600: #1e4d8c; --color-primary-700: #1a4179; --color-primary-800: #16386a; --color-primary-900: #0f2750; --color-secondary: #c6930a; --color-secondary-light: #ecc94b; --color-secondary-dark: #975a16; --color-secondary-50: #fffaf0; --color-secondary-100: #feebc8; --color-secondary-200: #fbd38d; --color-secondary-500: #d69e2e; --color-secondary-600: #c6930a; --color-secondary-700: #b7791f; --color-secondary-800: #975a16; --color-secondary-900: #744210; --color-accent: #c6930a; --color-accent-light: #e0b341; --color-accent-dark: #975a16; --color-success: #38a169; --color-success-light: #68d391; --color-warning: #dd6b20; --color-warning-light: #f6ad55; --color-error: #e53e3e; --color-error-light: #fc8181; --color-info: #00b5d8; --color-info-light: #76e4f7; --color-text-primary: #1d1d1f; --color-text-secondary: #515154; --color-text-tertiary: #6e6e73; --color-text-light: #a0aec0; --color-text-muted: #cbd5e0; --color-text-white: #ffffff; --color-text-inverse: #f4f7fc; --color-bg-primary: #ffffff; --color-bg-secondary: #f5f5f7; --color-bg-tertiary: #f5f5f7; --color-bg-dark: #1a202c; --color-bg-darker: #171923; --color-bg-darkest: #0d1117; --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-light: rgba(255, 255, 255, 0.95); --glass-bg-dark: rgba(26, 32, 44, 0.9); --glass-border: rgba(0, 0, 0, 0.06); --glass-border-light: rgba(255, 255, 255, 0.2); --glass-border-gold: rgba(198, 147, 10, 0.12); --glass-shadow: var(--ds-elevation-3); --glass-shadow-gold: 0 4px 6px -1px rgba(198, 147, 10, 0.08), 0 10px 20px -5px rgba(198, 147, 10, 0.12); --gradient-blue: linear-gradient(135deg, #16386a 0%, #2b5aa8 40%, #5c86cc 100%); --gradient-blue-dark: linear-gradient(135deg, #1a4179 0%, #16386a 100%); --gradient-blue-light: linear-gradient(135deg, #5c86cc 0%, #7fa3d8 100%); --gradient-blue-radial: radial-gradient( ellipse at 30% 20%, #5c86cc 0%, #2b5aa8 40%, #16386a 100%); --gradient-gold: linear-gradient(135deg, #975a16 0%, #c6930a 40%, #ecc94b 100%); --gradient-gold-shine: linear-gradient(135deg, #c6930a, #f6e05e); --gradient-gold-subtle: linear-gradient(135deg, rgba(198, 147, 10, 0.1) 0%, rgba(236, 201, 75, 0.05) 100%); --gradient-brand: linear-gradient(135deg, #16386a, #ecc94b); --gradient-brand-subtle: linear-gradient(90deg, rgba(26, 54, 93, 0.05) 0%, rgba(198, 147, 10, 0.03) 50%, rgba(198, 147, 10, 0.05) 100%); --gradient-hero: linear-gradient(135deg, #16386a, #5c86cc); --gradient-marquee: linear-gradient(90deg, #16386a, #16386a); --gradient-bg-blue: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%); --gradient-bg-gold: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%); --gradient-bg-mixed: linear-gradient(135deg, #ffffff 0%, #f5f5f7 50%, #ffffff 100%); --gradient-bg-subtle: linear-gradient(180deg, #f5f5f7 0%, #ffffff 50%, #f5f5f7 100%); --gradient-mesh: radial-gradient(at 20% 20%, rgba(30, 77, 140, 0.05) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(198, 147, 10, 0.04) 0%, transparent 50%), radial-gradient(at 50% 80%, rgba(30, 77, 140, 0.03) 0%, transparent 50%); --space-px: 1px; --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); --space-2xl: var(--space-12); --space-3xl: var(--space-16); --space-4xl: var(--space-20); --space-5xl: var(--space-24); --font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-display: var(--font-family); --font-family-mono: 'Geist Mono', 'SF Mono', Monaco, Consolas, monospace; --font-xs: 0.75rem; --font-sm: 0.875rem; --font-base: 1rem; --font-lg: 1.125rem; --font-xl: 1.25rem; --font-2xl: 1.5rem; --font-3xl: 1.875rem; --font-4xl: 2.25rem; --font-5xl: 3rem; --font-6xl: 3.75rem; --font-7xl: 4.5rem; --font-8xl: 6rem; --font-thin: 100; --font-extralight: 200; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.85; --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.04em; --tracking-widest: 0.08em; --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-4xl: 32px; --radius-full: 9999px; --shadow-xs: var(--ds-elevation-1); --shadow-sm: var(--ds-elevation-1); --shadow-md: var(--ds-elevation-2); --shadow-lg: var(--ds-elevation-3); --shadow-xl: var(--ds-elevation-4); --shadow-2xl: var(--ds-elevation-4); --shadow-blue: var(--ds-elevation-3); --shadow-blue-lg: var(--ds-elevation-3); --shadow-gold: 0 4px 14px rgba(198, 147, 10, 0.2), 0 10px 30px rgba(198, 147, 10, 0.15); --shadow-gold-lg: 0 8px 24px rgba(198, 147, 10, 0.25), 0 20px 50px rgba(198, 147, 10, 0.2); --shadow-purple: 0 4px 14px rgba(198, 147, 10, 0.2), 0 10px 30px rgba(198, 147, 10, 0.15); --glow-blue: 0 0 40px rgba(66, 153, 225, 0.3); --glow-gold: 0 0 40px rgba(198, 147, 10, 0.3); --glow-purple: 0 0 40px rgba(198, 147, 10, 0.3); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-inner-lg: inset 0 4px 8px rgba(0, 0, 0, 0.06); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); --z-behind: -1; --z-base: 1; --z-docked: 10; --z-dropdown: 1000; --z-sticky: 1100; --z-fixed: 1200; --z-overlay: 1300; --z-modal: 1400; --z-popover: 1500; --z-tooltip: 1600; --z-notification: 1700; --z-max: 9999; --container-max-width: 1400px; --container-padding: 24px; --container-padding-sm: 16px; --container-padding-lg: 32px; --container-padding-xl: 48px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; --blur-none: 0; --blur-sm: 4px; --blur-md: 8px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --form-bg: rgba(255, 255, 255, 0.95); --form-bg-focus: rgba(255, 255, 255, 1); --form-border: rgba(100, 116, 139, 0.2); --form-border-focus: #1e4d8c; --form-label: #64748b; --form-label-active: #1e4d8c; --form-text: #1e293b; --form-placeholder: #94a3b8; --form-error: #ef4444; --form-error-bg: rgba(239, 68, 68, 0.08); --form-error-glow: rgba(239, 68, 68, 0.25); --form-success: #10b981; --form-success-bg: rgba(16, 185, 129, 0.08); --form-success-glow: rgba(16, 185, 129, 0.25); --form-warning: #f59e0b; --whatsapp-primary: #25D366; --whatsapp-secondary: #128C7E; --whatsapp-glow: rgba(37, 211, 102, 0.35); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); --shadow-form-subtle: var(--ds-elevation-1); --shadow-form-focus: var(--ds-elevation-2); --shadow-form-error: 0 0 0 4px var(--form-error-glow), 0 4px 16px rgba(239, 68, 68, 0.12); --shadow-form-success: 0 0 0 4px var(--form-success-glow), 0 4px 16px rgba(16, 185, 129, 0.12); --shadow-button-elevated: var(--ds-elevation-2); --menu-bg: #ffffff; --menu-text-primary: #2c3e50; --menu-text-secondary: #7f8c8d; --menu-accent: #1e4d8c; --menu-accent-secondary: #c6930a; --menu-accent-glow: rgba(30, 77, 140, 0.35); --menu-border: rgba(30, 77, 140, 0.12); --menu-hover-bg: rgba(30, 77, 140, 0.06); --pain-slow: #ef4444; --pain-conversion: #10b981; --pain-manage: #5c86cc; --pain-scale: #d97706; --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --shadow-menu-container: var(--ds-elevation-4); --shadow-nav-icon: var(--ds-elevation-2); --shadow-soriva-btn: 0 8px 32px rgba(30, 77, 140, 0.4), 0 4px 14px rgba(198, 147, 10, 0.3); --badge-primary: #FF4757; --badge-secondary: #FF6B7A; --badge-glow: rgba(255, 71, 87, 0.45); --benefit-gradient-start: #1e4d8c; --benefit-gradient-end: #d97706; --benefit-bg: rgba(255, 255, 255, 0.75); --benefit-border: rgba(255, 255, 255, 0.85); --slider-bg: #fafafa; --slider-card-bg: #e5e5e5; --slider-overlay: linear-gradient( to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 30%, transparent 60% ); --testimonial-accent: #1e4d8c; --testimonial-accent-alt: #c6930a; --testimonial-star: #ffd700; --testimonial-bg: rgba(255, 255, 255, 0.75); --ease-netflix: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-3d-rotate: cubic-bezier(0.4, 0, 0.2, 1); --faq-accent: #1e4d8c; --faq-accent-alt: #c6930a; --faq-text-primary: #1a1a1a; --faq-text-secondary: #666666; --faq-text-body: #333333; --faq-bg: rgba(255, 255, 255, 0.75); --faq-bg-active: rgba(255, 255, 255, 0.96); --faq-border: rgba(0, 0, 0, 0.06); --faq-border-active: rgba(138, 43, 226, 0.28); --ai-hero-primary: #1e4d8c; --ai-hero-secondary: #c6930a; --ai-hero-text: #1a1a1a; --ai-hero-text-muted: #555555; --ai-hero-glow: rgba(30, 77, 140, 0.35); --ease-accordion: cubic-bezier(0.4, 0, 0.2, 1); --shadow-faq-card: var(--ds-elevation-3); --shadow-faq-hover: var(--ds-elevation-3); --shadow-faq-active: 0 18px 56px rgba(138, 43, 226, 0.2), 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1); --phil-bg-start: #f5f7fa; --phil-bg-end: #c3cfe2; --phil-text-primary: #1a1a2e; --phil-text-secondary: #4a5568; --phil-accent: #1e4d8c; --phil-accent-alt: #c6930a; --phil-card-bg: rgba(255, 255, 255, 0.88); --phil-card-border: rgba(255, 255, 255, 0.35); --core-gradient-start: #1e4d8c; --core-gradient-end: #c6930a; --core-text: #ffffff; --core-text-muted: rgba(255, 255, 255, 0.88); --core-glass-bg: rgba(255, 255, 255, 0.15); --core-glass-border: rgba(255, 255, 255, 0.32); --ease-orbit: cubic-bezier(0.4, 0, 0.2, 1); --shadow-philosophy-card: var(--ds-elevation-3); --shadow-philosophy-hover: var(--ds-elevation-4); --shadow-core-card: var(--ds-elevation-3); --shadow-core-hover: var(--ds-elevation-4); --sbd-primary: #1e4d8c; --sbd-primary-dark: #5c86cc; --sbd-secondary: #c6930a; --sbd-accent: #c6930a; --sbd-accent-light: #ffd700; --sbd-gradient-primary: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%); --sbd-gradient-secondary: linear-gradient(135deg, #16386a 0%, #2d3748 100%); --sbd-gradient-accent: linear-gradient(135deg, #c6930a 0%, #d4a62a 100%); --sbd-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); --sbd-text-primary: #1a202c; --sbd-text-secondary: #4a5568; --sbd-text-muted: #718096; --sbd-text-light: #a0aec0; --sbd-bg-dark: #0f1419; --sbd-bg-card: rgba(255, 255, 255, 0.98); --sbd-bg-glass: rgba(255, 255, 255, 0.1); --sbd-shadow-sm: var(--ds-elevation-1); --sbd-shadow-md: var(--ds-elevation-2); --sbd-shadow-lg: var(--ds-elevation-3); --sbd-shadow-xl: var(--ds-elevation-4); --sbd-shadow-glow: var(--ds-elevation-3); --sbd-shadow-card: var(--ds-elevation-3); --sbd-radius-sm: 8px; --sbd-radius-md: 12px; --sbd-radius-lg: 16px; --sbd-radius-xl: 24px; --sbd-radius-full: 9999px; --sbd-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --sbd-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --sbd-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); --sbd-section-padding: 100px 0; --sbd-container-width: 1200px; --sbd-container-padding: 0 24px; --swd-gradient-mesh: radial-gradient(at 40% 20%, rgba(255, 255, 255, 0.15) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(255, 255, 255, 0.1) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(255, 255, 255, 0.08) 0px, transparent 50%), radial-gradient(at 80% 50%, rgba(198, 147, 10, 0.12) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(255, 255, 255, 0.1) 0px, transparent 50%); --swd-glass-bg: rgba(255, 255, 255, 0.12); --swd-glass-border: rgba(255, 255, 255, 0.2); --swd-glass-blur: blur(20px); --rt-gradient-hero: linear-gradient(135deg, #f4f7fc, #f4f7fc); --rt-card-bg: rgba(255, 255, 255, 0.95); --rt-card-border: rgba(26, 54, 93, 0.08); --rt-card-shadow: var(--ds-elevation-2); --rt-card-shadow-hover: var(--ds-elevation-4); --rt-transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --rt-transition-fast: all 0.3s ease; /* ========================================== DESIGN SYSTEM — added in P2-3. All names are --ds-* prefixed: six unprefixed names (--radius-sm..3xl, --gradient-brand) were already taken, and redefining them shifted every existing radius up a step. These are the target scales. They are defined here so the values exist in one place; individual rules are migrated onto them in P2-6, where each section is reviewed rather than snapped in bulk. ========================================== */ /* Radius — 7 steps replacing 27 ad-hoc values under 50px, plus pill/circle. Current usage peaks at 12, 14, 16, 20 and 24px; this scale keeps 12/16/20/24 exact and moves nothing by more than 4px. */ --ds-radius-xs: 4px; --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px; --ds-radius-xl: 20px; --ds-radius-2xl: 24px; --ds-radius-3xl: 32px; --ds-radius-pill: 999px; --ds-radius-circle: 50%; /* Elevation — 4 steps replacing 290 distinct box-shadow values. Tuned to navy rather than neutral black so shadows sit in the palette. */ --ds-elevation-1: 0 1px 2px rgba(15, 39, 80, 0.06), 0 1px 3px rgba(15, 39, 80, 0.04); --ds-elevation-2: 0 2px 8px rgba(15, 39, 80, 0.07), 0 1px 3px rgba(15, 39, 80, 0.05); --ds-elevation-3: 0 8px 24px rgba(15, 39, 80, 0.09), 0 2px 6px rgba(15, 39, 80, 0.05); --ds-elevation-4: 0 20px 48px rgba(15, 39, 80, 0.12), 0 4px 12px rgba(15, 39, 80, 0.06); /* Brand ramp — the only two hues on the site. BillFlow's purple folded into this in P2-3; gold stays an accent, never a gradient partner to navy (blue-to-gold goes muddy through the middle). */ --ds-brand-navy-050: #eef3fb; --ds-brand-navy-200: #a7c0ea; --ds-brand-navy-400: #3b6fc4; --ds-brand-navy-600: #1e4d8c; --ds-brand-navy-800: #16386a; --ds-brand-navy-900: #0f2750; --ds-brand-gold-100: #f7f0dc; --ds-brand-gold-400: #e0b341; --ds-brand-gold-600: #c6930a; --ds-brand-gold-800: #8a6708; --ds-gradient-brand: linear-gradient(135deg, var(--ds-brand-navy-400) 0%, var(--ds-brand-navy-600) 100%); } /** * ======================================== * RISENEX - ULTRA POLISHED PREMIUM CSS * Version: 5.0 - Professional Grade * Blue (RISE) + Gold (NEX) Theme * ✨ ULTRA POLISHED BY CLAUDE * ======================================== */ /* ========================================== CSS CUSTOM PROPERTIES (CSS VARIABLES) ========================================== */ /* ========================================== RESET & BASE STYLES - Enhanced ========================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; } body { font-family: var(--font-family); font-size: var(--font-base); font-weight: var(--font-normal); color: var(--color-text-primary); background: var(--color-bg-primary); line-height: var(--leading-normal); padding-top: 120px; overflow-x: hidden; min-height: 100vh; } /* Selection Styling */ ::selection { background: rgba(49, 130, 206, 0.2); color: var(--color-primary); } ::-moz-selection { background: rgba(49, 130, 206, 0.2); color: var(--color-primary); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: color var(--transition-fast); } button { font-family: inherit; cursor: pointer; border: none; background: none; -webkit-tap-highlight-color: transparent; } /* Focus Styles */ :focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; } /* ========================================== CONTAINER - GLOBAL ========================================== */ .container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--container-padding); position: relative; z-index: var(--z-base); } @media (max-width: 768px) { .container { padding: 0 var(--container-padding-sm); } } /* ========================================== PREMIUM GRADIENT MARQUEE BAR - Ultra Polished ========================================== */ @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ========================================== GLASS MORPHISM NAVBAR - Premium ========================================== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease; box-shadow: none; padding: 8px 0; transform: translateY(0); } /* Hide on scroll down (Apple/Samsung style) */ .navbar.nav-hidden { transform: translateY(-120%); } /* When scrolled, add a subtle frosted blur so text stays readable */ .navbar.scrolled { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--ds-elevation-1); } .navbar::before { content: none; } .navbar.scrolled { background: var(--glass-bg-light); box-shadow: var(--glass-shadow); border-color: rgba(26, 54, 93, 0.06); } .nav-wrapper { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-8); padding: 0 var(--space-6); } /* Logo */ .nav-logo { display: flex; align-items: center; z-index: 2; flex-shrink: 0; } .nav-logo img { height: 72px; width: auto; transition: transform var(--transition-base), filter var(--transition-base); } .nav-logo:hover img { transform: scale(1.03); filter: drop-shadow(0 4px 12px rgba(26, 54, 93, 0.15)); } /* Desktop Menu */ .nav-menu { display: flex; align-items: center; gap: var(--space-6); flex: 1; justify-content: center; } .nav-item { position: relative; z-index: 10; } .nav-item::before, .nav-item::after { pointer-events: none !important; } .nav-link { display: flex; align-items: center; gap: var(--space-1); font-size: 15px; font-weight: 500; color: #1d1d1f; padding: 9px 20px; border-radius: var(--ds-radius-pill); transition: background-color var(--transition-fast), color var(--transition-fast), font-weight var(--transition-fast); position: relative; white-space: nowrap; } .nav-link::before, .nav-link::after { pointer-events: none !important; } .nav-link:hover { color: var(--color-primary); background: rgba(0, 0, 0, 0.04); } .nav-link.active { color: var(--color-primary); font-weight: var(--font-semibold); } .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: var(--gradient-brand); border-radius: var(--radius-full); } .dropdown-icon { transition: transform var(--transition-fast); color: var(--color-text-light); width: 14px; height: 14px; } .has-dropdown.is-open .dropdown-icon { transform: rotate(180deg); color: var(--color-primary); } /* ========================================== MEGA DROPDOWN - Premium Slide Animation ========================================== */ .nav-dropdown, .has-dropdown { position: relative; } .mega-dropdown { position: fixed; top: 0; left: 0; right: 0; width: 100vw; max-width: 100%; transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none !important; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, visibility 0.45s; z-index: calc(var(--z-dropdown) - 1); padding-top: 72px; } /* Click-driven only. The hover triggers that used to live here opened a position:fixed, 100vw panel anchored at top:0 — once visible its box covered the whole header, so .mega-dropdown:hover kept it open while the pointer was anywhere near the nav. That is what made it feel twitchy. */ .mega-dropdown.active { opacity: 1; visibility: visible; pointer-events: auto !important; transform: translateY(0); } /* Dropdown Content */ .mega-dropdown-content { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: none; border-radius: 0 0 24px 24px; box-shadow: var(--ds-elevation-3); padding: 96px max(48px, calc((100vw - 1320px) / 2)) 64px; display: grid; grid-template-columns: 220px 1fr 1.3fr; gap: var(--space-10); min-height: 460px; position: relative; overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .mega-dropdown-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.6) 50%, transparent 95%); } /* Left: Logo Section */ .mega-logo-section { display: flex; align-items: center; justify-content: center; padding: var(--space-6); border-radius: var(--radius-xl); background: transparent; } .mega-logo-section img { width: 300px; height: auto; opacity: 1; filter: drop-shadow(0 8px 24px rgba(26, 54, 93, 0.12)); transition: transform var(--transition-medium); } .mega-logo-section:hover img { transform: scale(1.02); } /* Center: Menu Items */ .mega-menu-items { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; } .mega-menu-link { display: flex; align-items: center; gap: var(--space-4); font-size: var(--font-lg); font-weight: var(--font-semibold); color: var(--color-text-primary); padding: var(--space-4) var(--space-6); border-radius: var(--radius-xl); transition: background-color var(--transition-base), transform var(--transition-base), color var(--transition-base); position: relative; overflow: hidden; } .menu-number { font-size: var(--font-xs); font-weight: var(--font-bold); color: var(--color-text-light); background: var(--color-bg-tertiary); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); transition: transform var(--transition-base), opacity var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), filter var(--transition-base), max-height var(--transition-base), width var(--transition-base), height var(--transition-base), top var(--transition-base), left var(--transition-base); flex-shrink: 0; } .mega-menu-link::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gradient-brand); border-radius: 0 4px 4px 0; transform: scaleY(0); transition: transform var(--transition-base) var(--ease-premium); } .mega-menu-link:hover { background: var(--color-bg-secondary); color: var(--color-primary); transform: translateX(6px); } .mega-menu-link:hover::before { transform: scaleY(1); } .mega-menu-link:hover .menu-number { background: var(--gradient-brand); color: white; transform: scale(1.08); box-shadow: var(--shadow-sm); } /* Right: Description */ .mega-description { position: relative; padding: var(--space-8); background: var(--gradient-bg-subtle); border-radius: var(--radius-2xl); min-height: 340px; overflow: hidden; } .mega-description::before { content: ''; position: absolute; top: -100%; right: -100%; width: 300%; height: 300%; background: radial-gradient( circle at center, rgba(49, 130, 206, 0.06) 0%, transparent 60%); animation: gentlePulse 6s ease-in-out infinite; } @keyframes gentlePulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.7; } } .mega-desc-item { position: absolute; top: var(--space-8); left: var(--space-8); right: var(--space-8); opacity: 0; visibility: hidden; transform: translateY(16px); transition: transform 0.35s var(--ease-premium), opacity 0.35s var(--ease-premium); pointer-events: none; z-index: 1; } .mega-desc-item.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; } .desc-header { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); } .desc-icon { flex-shrink: 0; width: 52px; height: 52px; animation: iconFloat 4s ease-in-out infinite; } @keyframes iconFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } .desc-header h3 { font-size: var(--font-2xl); font-weight: var(--font-bold); color: var(--color-text-primary); background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: var(--tracking-tight); } .mega-desc-item p { font-size: var(--font-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); } .desc-features { display: flex; flex-wrap: wrap; gap: var(--space-2); } .feature-tag { display: inline-block; padding: var(--space-2) var(--space-4); background: white; color: var(--color-primary); font-size: var(--font-sm); font-weight: var(--font-medium); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); border: 1px solid var(--glass-border); } .feature-tag:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--gradient-brand); color: white; border-color: transparent; } /* ========================================== MEET SORIVA BUTTON - Premium CTA ========================================== */ .btn-soriva-wrapper { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; } .btn-soriva { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 26px; font-size: var(--font-base); font-weight: var(--font-semibold); color: white; background: #1e4d8c; border-radius: var(--radius-full); box-shadow: var(--ds-elevation-2); transition: transform var(--transition-base), box-shadow var(--transition-base); position: relative; overflow: hidden; z-index: 1; letter-spacing: var(--tracking-wide); } .btn-soriva::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 50%, #975a16 100%); opacity: 0; transition: opacity var(--transition-base); z-index: -1; } .btn-soriva::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: translate(-50%, -50%); transition: width 0.5s var(--ease-premium), height 0.5s var(--ease-premium); } .btn-soriva:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(198, 147, 10, 0.4), 0 4px 8px rgba(198, 147, 10, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-soriva:hover::before { opacity: 1; } .btn-soriva:hover::after { width: 300px; height: 300px; } .btn-soriva:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(198, 147, 10, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .btn-arrow { transition: transform var(--transition-base); width: 16px; height: 16px; } .btn-soriva:hover .btn-arrow { transform: translateX(3px); } .btn-tagline { font-size: 10px; font-weight: var(--font-medium); color: var(--color-text-tertiary); letter-spacing: var(--tracking-wider); text-transform: uppercase; white-space: nowrap; } /* ========================================== RESPONSIVE - Mega Dropdown ========================================== */ @media (max-width: 1024px) { .mega-dropdown { position: relative; top: 0; left: 0; transform: none; width: 100%; max-width: 100%; } .mega-dropdown-content { grid-template-columns: 1fr; padding: var(--space-6); min-height: auto; gap: var(--space-6); } .mega-logo-section { display: none; } .mega-description { min-height: 200px; } } @media (max-width: 768px) { .nav-wrapper { height: 64px; padding: 0 var(--space-4); } .nav-logo img { height: 56px; } .btn-soriva { padding: 10px 20px; font-size: var(--font-sm); } } /* ========================================== UTILITY CLASSES - Brand Colors ========================================== */ /* ========================================== MOBILE TOGGLE ========================================== */ /* ========================================== HERO SECTION - ULTRA PREMIUM ========================================== */ /* ========================================== RISENEX CSS - PART 2 (ULTRA POLISHED) Hero | Vision | Services Sections ========================================== */ /* ========================================== HERO SECTION - PREMIUM ENTRANCE ========================================== */ /* Animated Grid Background */ @keyframes grid-flow { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(60px) translateX(30px); } } /* Top Light Orb */ @keyframes light-pulse { 0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); filter: blur(0px); } 50% { opacity: 0.7; transform: translateX(-50%) scale(1.15); filter: blur(10px); } } /* Reduced Motion Preference */ /* Hero Grid Layout */ /* Hero Title - Premium Typography */ /* Gradient Text Highlight */ @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Hero Subtitle */ /* Hero CTA Buttons */ /* Button Base Styles */ /* Button Shine Effect */ /* Primary Button */ /* Secondary Button */ /* Hero Features Bar */ /* ========================================== HERO RIGHT - VISUAL SHOWCASE ========================================== */ /* Floating Cards - Premium Glass */ /* Card Hover Glow */ /* Card Shine Effect */ /* Card Positions & Animations */ @keyframes float-1 { 0%, 100% { transform: translateY(0px) rotate(-2deg); } 25% { transform: translateY(-15px) rotate(0deg); } 50% { transform: translateY(-28px) rotate(2deg); } 75% { transform: translateY(-12px) rotate(1deg); } } @keyframes float-2 { 0%, 100% { transform: translateY(0px) rotate(2deg); } 25% { transform: translateY(-20px) rotate(0deg); } 50% { transform: translateY(-32px) rotate(-2deg); } 75% { transform: translateY(-10px) rotate(-1deg); } } @keyframes float-3 { 0%, 100% { transform: translateY(0px) rotate(-3deg); } 33% { transform: translateY(-25px) rotate(1deg); } 66% { transform: translateY(-18px) rotate(3deg); } } /* Center Orb - Pulsing Energy */ @keyframes pulse-ring-1 { 0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; border-width: 3px; } 50% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.6; border-width: 1px; } } @keyframes pulse-ring-2 { 0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; border-width: 3px; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.5; border-width: 1px; } } @keyframes pulse-ring-3 { 0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; border-width: 3px; } 50% { transform: translate(-50%, -50%) scale(1.35); opacity: 0.45; border-width: 1px; } } @keyframes glow-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.8; } } /* Gradient Blobs */ @keyframes blob-float { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 25% { transform: translate(50px, -50px) scale(1.1) rotate(5deg); } 50% { transform: translate(-30px, 40px) scale(0.95) rotate(-3deg); } 75% { transform: translate(25px, -25px) scale(1.05) rotate(2deg); } } /* ========================================== VISION SECTION - BRAND STORY ========================================== */ /* Central Orb - Vision */ @keyframes orb-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.3; } } @keyframes orb-glow-rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Spark Lines - Energy Rays */ @keyframes spark-shoot { 0% { height: 0; opacity: 0; } 10% { opacity: 1; } 40% { height: 120px; opacity: 1; } 100% { height: 180px; opacity: 0; } } /* Vision Content */ /* Core Values Grid */ /* Value Card - Premium Glass */ /* Card Gradient Border on Hover */ /* Card Shine */ /* ========================================== SERVICES SECTION - 3D FLIP CARDS ========================================== */ /* Section Header - Universal */ @keyframes shimmer { 100% { left: 100%; } } /* Services Grid */ /* Service Card - 3D Flip Container */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Card Faces */ /* Front Card - Premium Glass */ /* Gradient Border - Front */ /* Back Card - Gradient */ /* Service Icon */ /* Hover Indicator */ @keyframes moveArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } /* Back Card Content */ /* Custom Scrollbar for Description */ /* ========================================== RESPONSIVE - PART 2 ========================================== */ /* ========================================== RISENEX CSS - PART 3 (ULTRA POLISHED) Process | Timeline | Tech Ecosystem ========================================== */ /* ========================================== SHARED COMPONENTS - ENHANCED ========================================== */ /* Custom Scrollbar - Premium Glass */ /* Tech Stack Tags */ /* ========================================== FLOATING BACKGROUND ELEMENTS ========================================== */ @keyframes float-ambient { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 20% { transform: translate(80px, -60px) scale(1.08) rotate(5deg); } 40% { transform: translate(-60px, 80px) scale(0.95) rotate(-3deg); } 60% { transform: translate(40px, 40px) scale(1.05) rotate(2deg); } 80% { transform: translate(-40px, -40px) scale(0.98) rotate(-2deg); } } /* Service Card Glow Effect */ /* ========================================== PROCESS SECTION - PREMIUM WHITE THEME ========================================== */ /* Animated Background Orbs */ @keyframes floatOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(60px, -60px) scale(1.08); } 50% { transform: translate(-40px, 40px) scale(0.95); } 75% { transform: translate(50px, 70px) scale(1.03); } } /* ========================================== WHY CHOOSE US GRID - PREMIUM CARDS ========================================== */ /* Animated Top Border */ @keyframes gradientSlide { 0% { background-position: 0% 0%; } 100% { background-position: 300% 0%; } } /* Glow Effect Behind Card */ @keyframes gradientRotate { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Card Number Watermark */ /* Card Icon */ /* ========================================== TIMELINE WRAPPER - ENHANCED ========================================== */ /* ========================================== PROGRESS BAR - PREMIUM GLASS ========================================== */ /* Animated Progress Fill */ @keyframes progressGlow { 0%, 100% { box-shadow: 0 0 20px rgba(59, 111, 196, 0.5), 0 0 40px rgba(6, 182, 212, 0.3); } 50% { box-shadow: 0 0 30px rgba(59, 111, 196, 0.7), 0 0 60px rgba(6, 182, 212, 0.5); } } /* Progress Dots Container */ /* Individual Progress Dot */ /* Ripple Effect Container */ /* Inner Dot */ /* Active Dot State */ .progress-dot.active { background: #ffffff; border-color: #3b6fc4; transform: scale(1.4); box-shadow: var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 1); } .progress-dot.active::before { opacity: 1; animation: rippleSmooth 2.5s ease-out infinite; } .progress-dot.active::after { transform: translate(-50%, -50%) scale(1); } @keyframes rippleSmooth { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(2.2); opacity: 0.3; } 100% { transform: scale(3); opacity: 0; } } /* Completed Dot State */ /* Hover State */ /* ========================================== TIMELINE DECK - 3D CARD STACK ========================================== */ /* Timeline Card Base */ /* Active Card State */ .timeline-card.active { opacity: 1; pointer-events: auto; z-index: 10; border-color: rgba(59, 111, 196, 0.15); box-shadow: 0 50px 100px rgba(59, 111, 196, 0.12), 0 25px 60px rgba(6, 182, 212, 0.08), 0 12px 30px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1); } /* Card Glow Effect */ .timeline-card.active .card-glow { opacity: 0.7; animation: gradientRotate 10s ease infinite; } /* Card Inner Content */ /* Card Header */ /* Step Badge */ @keyframes badgeGlow { 0%, 100% { box-shadow: var(--ds-elevation-3); } 50% { box-shadow: var(--ds-elevation-3); } } /* Step Icon */ /* Card Title */ /* Card Description */ /* Card Features List */ /* Hover Accent Line */ /* ========================================== NAVIGATION BUTTONS - PREMIUM ========================================== */ /* Gradient Background on Hover */ /* Active Press State */ /* Disabled State */ /* ========================================== TECH ECOSYSTEM SECTION - PREMIUM ========================================== */ /* Animated Background Layers */ @keyframes backgroundPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } /* Floating Grid Pattern */ .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; } /* ========================================== RESPONSIVE DESIGN - PART 3 ========================================== */ @media (max-width: 768px) { .timeline-card.active { transform: translateX(-50%) translateZ(15px) scale(1); } .container { padding: 0 20px; } } @media (max-width: 480px) { .progress-dot.active { transform: scale(1.3); } } /* ========================================== UTILITY CLASSES ========================================== */ .visible { display: block !important; } /* Reduced Motion Preference */ /* ============================================ SECTION HEADER /* ========================================== RISENEX CSS - PART 4 (ULTRA POLISHED) Tech Ecosystem Bento Grid | SORIVA Animation ========================================== */ /* ========================================== SECTION HEADER - UNIVERSAL PREMIUM ========================================== */ /* ========================================== BENTO GRID LAYOUT - PREMIUM 3-ROW ========================================== */ /* Grid Positioning */ /* ========================================== GLASSMORPHISM CARDS - LIQUID GLASS ========================================== */ /* Standard Glass Card */ /* Premium Glass for AI Card */ /* ========================================== GLASS SHINE EFFECT - LIGHTNING SHIMMER ========================================== */ @keyframes shimmerSweep { 0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(25deg); } 15%, 85% { transform: translateX(100%) translateY(100%) rotate(25deg); } } /* Premium Shine - More Intense */ /* ========================================== CARD HOVER EFFECTS - ENHANCED DEPTH ========================================== */ /* ========================================== CARD GLOW EFFECTS - THEMED COLORS ========================================== */ /* Frontend - Blue */ /* Backend - Purple/Pink */ /* Database - Cyan */ /* Cloud - Teal */ /* Security - Orange/Warm */ /* Premium AI Glow */ /* ========================================== CARD CONTENT LAYOUT ========================================== */ /* ========================================== ANIMATED SORIVA LETTERS - CRISP VERSION ========================================== */ /* Individual Letter Animations */ /* Float Animation */ @keyframes letterFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-22px); } } /* Rotate Animation */ @keyframes letterRotate { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } } /* Scale Animation */ @keyframes letterScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } /* Gradient Shift Animation */ @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Faster on Hover */ /* ========================================== CARD ICON AREA ========================================== */ /* SVG Icons */ /* Icon Animations */ @keyframes iconFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes iconPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } } @keyframes stackBounce { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-10px) scale(1.04); } } /* Icon Particles */ @keyframes particleFloat { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(12px, -18px) scale(1.3); opacity: 0.9; } } /* Cloud Dots Animation */ @keyframes cloudDotPulse { 0%, 100% { opacity: 0.5; r: 2.5; } 50% { opacity: 1; r: 3.5; } } /* ========================================== AI BRAIN & NEURAL NETWORK ========================================== */ /* Neural Network Nodes */ @keyframes nodeGlow { 0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 3px rgba(30, 77, 140, 0.5)); } 50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(30, 77, 140, 1)); } } /* Neural Connections */ @keyframes connectionPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.65; } } @keyframes connectionFlow { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } /* AI Pulse Rings */ @keyframes pulseRing { 0% { width: 90px; height: 90px; opacity: 0.8; } 100% { width: 180px; height: 180px; opacity: 0; } } /* ========================================== CARD INFO & CONTENT ========================================== */ /* Card Badge */ /* Premium Badge */ @keyframes badgeIconSpin { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(15deg) scale(1.1); } 50% { transform: rotate(0deg) scale(1); } 75% { transform: rotate(-15deg) scale(1.1); } } /* Card Title */ /* Live Dot Indicator */ @keyframes liveDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.2); } } @keyframes liveDotRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } } /* Card Description */ /* Card Metrics */ /* ========================================== SECURITY CARD - HORIZONTAL LAYOUT ========================================== */ /* Security Features Grid */ /* Security Metrics */ /* ========================================== AI CAPABILITIES ========================================== */ /* ========================================== AI CTA BUTTON - PREMIUM ========================================== */ /* Shine Effect */ /* ========================================== RESPONSIVE DESIGN - PART 4 ========================================== */ /* Large Desktop */ @media (max-width: 1600px) { .container { max-width: 1200px; } } /* Desktop */ /* Laptop */ @media (max-width: 1200px) { .container { padding: 0 30px; } } /* Tablet Large */ /* Tablet */ @media (max-width: 768px) { .container { padding: 0 20px; } } /* Mobile Large */ /* Mobile Small */ /* ========================================== REDUCED MOTION PREFERENCE ========================================== */ /* ============================================ PERFORMANCE OPTIMIZATIONS ============================================ */ /* ========================================== RISENEX CSS - PART 5 (ULTRA POLISHED) Tech Carousel | Footer | Stats Section ========================================== */ /* ========================================== HARDWARE ACCELERATION - GPU OPTIMIZED ========================================== */ .tech-card, .glass-shine, .soriva-letter, .tech-icon, .pulse-ring, .particle, .tech-logo-card, .tech-scroll-track, .scroll-to-top, .stat-card { will-change: transform, opacity; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; perspective: 1000px; } /* Force GPU Layer Promotion */ /* Reduce Motion for Accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.15s !important; scroll-behavior: auto !important; } } /* Print Styles */ @media print { .glass-shine, .card-glow, .ai-pulse-rings, .scroll-to-top, .tech-scroll-track::before, .tech-scroll-track::after { display: none !important; } } /* ========================================== TECHNOLOGY CAROUSEL SECTION - ULTRA PREMIUM ========================================== */ /* Animated Background Orbs */ @keyframes backgroundPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Subtle Grid Overlay */ /* ========================================== CAROUSEL SECTION HEADER ========================================== */ @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ========================================== TECH CATEGORY WITH GLOW ========================================== */ /* Category-specific Ambient Glows */ /* Frontend/Backend - Blue */ /* Database - Amber */ /* DevOps/Cloud - Cyan */ /* Category Title */ @keyframes iconBounce { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-6px) scale(1.05); } } /* ========================================== SCROLL WRAPPER & TRACK ========================================== */ @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* ========================================== TECH LOGO CARDS - ULTRA PREMIUM 3D GLASS ========================================== */ /* Glowing Background Layer */ @keyframes gradientRotate { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Shimmer Effect */ /* Hover State */ /* Logo Image */ /* ========================================== TECH TOOLTIP - PREMIUM GLASS ========================================== */ /* Tooltip Arrow */ /* ========================================== SITE FOOTER - PREMIUM DESIGN ========================================== */ .site-footer { background: radial-gradient(ellipse 50% 30% at 20% 80%, rgba(30, 77, 140, 0.03) 0%, transparent 50%), radial-gradient(ellipse 40% 40% at 80% 20%, rgba(217, 119, 6, 0.02) 0%, transparent 50%), linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%); color: #334155; padding: 110px 0 0 0; position: relative; overflow: hidden; } /* Subtle Background Elements */ .site-footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(30, 77, 140, 0.025) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(217, 119, 6, 0.025) 0%, transparent 40%); pointer-events: none; } /* Top Gradient Border */ .site-footer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, transparent); } .footer-container { max-width: 1440px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; } /* Footer Main Grid */ .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 80px; padding-bottom: 80px; border-bottom: 2px solid rgba(30, 77, 140, 0.08); } /* ========================================== FOOTER BRAND - 5X LOGO ========================================== */ .footer-brand { max-width: 580px; } .footer-logo { margin-bottom: 40px; } .footer-logo img { height: 240px; width: auto; filter: drop-shadow(0 8px 25px rgba(30, 77, 140, 0.15)); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .footer-logo img:hover { transform: translateY(-5px) scale(1.02); filter: drop-shadow(0 12px 35px rgba(30, 77, 140, 0.2)); } .footer-tagline { font-size: 1.15rem; line-height: 1.85; color: #64748b; margin: 0 0 44px 0; font-weight: 480; } /* Social Links */ .footer-social { display: flex; gap: 16px; } .social-link { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(30, 77, 140, 0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(30, 77, 140, 0.12); border-radius: 16px; color: #475569; transition: background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .social-link svg { width: 26px; height: 26px; transition: transform 0.3s ease; } .social-link:hover { background: linear-gradient(135deg, #1e4d8c 0%, #1e4d8c 50%, #d97706 100%); color: white; transform: translateY(-5px) scale(1.05); border-color: transparent; box-shadow: var(--ds-elevation-3); } .social-link:hover svg { transform: scale(1.1); } /* ========================================== FOOTER COLUMNS ========================================== */ .footer-column { display: flex; flex-direction: column; } .footer-heading { font-size: 1.35rem; font-weight: 750; color: #1e293b; margin: 0 0 32px 0; position: relative; padding-bottom: 16px; } .footer-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 55px; height: 4px; background: linear-gradient(90deg, #1e4d8c, #1e4d8c, #d97706); border-radius: 4px; } /* Footer Links */ .footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; } .footer-links li, .footer-contact li { margin-bottom: 18px; } .footer-links a, .footer-contact a { font-size: 1.05rem; color: #64748b; text-decoration: none; transition: transform 0.3s ease, color 0.3s ease; display: inline-block; position: relative; font-weight: 520; } .footer-links a::before { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #1e4d8c, #d97706); transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: 4px; } .footer-links a:hover, .footer-contact a:hover { color: #1e4d8c; transform: translateX(6px); } .footer-links a:hover::before { width: 100%; } /* Contact Items */ .footer-contact li { display: flex; align-items: flex-start; gap: 16px; } .contact-icon { width: 26px; height: 26px; flex-shrink: 0; color: #1e4d8c; margin-top: 2px; transition: transform 0.3s ease; } .footer-contact li:hover .contact-icon { transform: scale(1.15) rotate(-5deg); } .footer-contact span, .footer-contact a { font-size: 1.05rem; line-height: 1.75; } /* ========================================== NEWSLETTER SECTION - PREMIUM ========================================== */ /* Newsletter Form */ /* Subscribe Button */ /* Button Shine */ /* ========================================== FOOTER BOTTOM ========================================== */ .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 44px 0; gap: 28px; } .copyright { font-size: 1rem; color: #64748b; font-weight: 500; } .copyright strong { color: #1e293b; font-weight: 750; } .footer-bottom-links { display: flex; gap: 24px; } .footer-bottom-links a { font-size: 1rem; color: #64748b; text-decoration: none; transition: color 0.3s ease; font-weight: 520; position: relative; } .footer-bottom-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #1e4d8c, #d97706); transition: width 0.3s ease; } .footer-bottom-links a:hover { color: #1e4d8c; } .footer-bottom-links a:hover::after { width: 100%; } .separator { color: #cbd5e1; } /* ========================================== SCROLL TO TOP BUTTON - PREMIUM ANIMATED ========================================== */ .scroll-to-top { position: fixed; bottom: 32px; right: 32px; z-index: 9999; width: 60px; height: 60px; background: linear-gradient(135deg, #1e4d8c 0%, #1e4d8c 50%, #0d9488 100%); background-size: 200% 200%; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; font-weight: normal; line-height: 1; font-family: Arial, sans-serif; padding: 0; margin: 0; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(25px) scale(0.9); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-position 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* Visible State */ .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* Pulse Ring Animation */ .scroll-to-top::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(30, 77, 140, 0.3); opacity: 0; animation: scrollPulse 2s ease-out infinite; } @keyframes scrollPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } } /* Hover State */ .scroll-to-top:hover { background-position: 100% 50%; transform: translateY(-5px) scale(1.08); box-shadow: var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .scroll-to-top:hover::before { animation-duration: 1.5s; } /* Active State */ .scroll-to-top:active { transform: translateY(-2px) scale(1.02); } /* ========================================== STATS SECTION - GLASSMORPHISM 3D ========================================== */ /* Animated Background */ @keyframes statsBackground { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-15px, -15px) rotate(2deg); } 50% { transform: translate(10px, 10px) rotate(-1deg); } 75% { transform: translate(-5px, 5px) rotate(1deg); } } /* Grid Pattern Overlay */ /* Stats Grid */ /* Stat Card - Premium Glass */ /* Card Glow Effect */ /* Card Shine */ /* Stat Icon */ /* Stat Number */ /* Stat Label */ /* ========================================== RESPONSIVE DESIGN - PART 5 ========================================== */ /* Large Desktop */ @media (max-width: 1600px) { .footer-logo img { height: 210px; } } /* Desktop */ @media (max-width: 1400px) { .footer-logo img { height: 190px; } } /* Laptop */ @media (max-width: 1200px) { .footer-main { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 50px; } .footer-logo img { height: 170px; } } /* Tablet Large */ @media (max-width: 1024px) { .footer-main { grid-template-columns: repeat(2, 1fr); } .footer-logo img { height: 155px; } } /* Tablet */ @media (max-width: 768px) { .site-footer { padding: 80px 0 0 0; } .footer-main { grid-template-columns: 1fr; gap: 50px; } .footer-logo img { height: 140px; } .footer-bottom { flex-direction: column; align-items: flex-start; } .scroll-to-top { width: 54px; height: 54px; bottom: 24px; right: 24px; font-size: 1.35rem; } } /* Mobile Large */ @media (max-width: 480px) { .footer-logo img { height: 120px; } .scroll-to-top { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 1.25rem; } } /* Mobile Small */ @media (max-width: 375px) { .footer-logo img { height: 100px; } } /* ========================================== PERFORMANCE OPTIMIZATIONS - FINAL ========================================== */ .tech-scroll-track, .tech-logo-card, .tech-tooltip, .tech-logo-card::before, .tech-logo-card::after, .scroll-to-top, .stat-card, .subscribe-btn { will-change: transform, opacity; transform: translateZ(0); -webkit-transform: translateZ(0); } /* Reduce Motion */ @media (prefers-reduced-motion: reduce) { .tech-scroll-track, .tech-logo-card::before, .category-icon, .scroll-to-top::before, .stats-section::before { animation: none !important; } .tech-logo-card, .scroll-to-top, .stat-card, .social-link, .subscribe-btn { transition-duration: 0.15s !important; } } /* Print Styles */ @media print { .tech-carousel-section, .site-footer, .stats-section { background: white !important; padding: 40px 0 !important; } .tech-tooltip, .tech-logo-card::before, .tech-logo-card::after, .scroll-to-top, .stat-card::before, .stat-card::after { display: none !important; } } /* ============================================ SECTION HEADER ============================================ */ /* ========================================== RISENEX CSS - PART 6 (ULTRA POLISHED) Stats Section | CTA Section | Contact Modal ========================================== */ /* ========================================== STATS HEADER - PREMIUM TYPOGRAPHY ========================================== */ @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ========================================== STATS GRID - PERFECT ALIGNMENT ========================================== */ /* ========================================== STAT CARD - GLASSMORPHISM 3D ULTRA ========================================== */ /* 3D Inner Gradient Overlay */ /* Glass Shine Effect - Top Half */ /* Entrance Animation */ @keyframes statFadeInUp { from { opacity: 0; transform: translateY(50px) translateZ(-60px) scale(0.95); } to { opacity: 1; transform: translateY(0) translateZ(0) scale(1); } } /* ========================================== CIRCULAR PROGRESS - 3D GLASS EFFECT ========================================== */ /* Glass Circle Background */ /* Glass Shine Highlight */ /* SVG Circle */ /* Circle Colors with Enhanced Glow */ /* Animated State */ .stat-card.animated .stat-circle-progress { stroke-dashoffset: 0; } /* ========================================== STAT CONTENT - CENTER DISPLAY ========================================== */ /* Specific fix for larger numbers */ /* ========================================== STAT LABELS - CONSISTENT HEIGHT ========================================== */ /* ========================================== 3D HOVER EFFECTS - PREMIUM GLASS ========================================== */ /* ========================================== CTA SECTION - PREMIUM LIGHT THEME ========================================== */ /* Particle Background */ @keyframes particleFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(25px, -25px) scale(1.03); } 50% { transform: translate(-15px, 15px) scale(0.98); } 75% { transform: translate(10px, -10px) scale(1.02); } } /* ========================================== CTA CARD - ULTRA PREMIUM GLASS ========================================== */ .cta-card.visible { opacity: 1; transform: translateY(0); } /* ========================================== CTA GLOW - ANIMATED AMBIENT ========================================== */ @keyframes glowPulse { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; } 50% { transform: translate(15px, 15px) scale(1.15); opacity: 0.7; } } /* ========================================== CTA CONTENT ========================================== */ /* Badge */ @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } @keyframes dotBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.9); } } /* Title */ @keyframes gradientTextShift { 0%, 100% { background-position: 0% 50%; filter: hue-rotate(0deg); } 50% { background-position: 100% 50%; filter: hue-rotate(10deg); } } /* Description */ /* ========================================== CTA FEATURES ========================================== */ /* ========================================== CTA BUTTONS - PREMIUM ========================================== */ /* Primary Button */ /* Button Shine Effect */ /* Secondary Button */ /* ========================================== TRUST BADGES ========================================== */ /* ========================================== CTA DECORATIVE CIRCLES ========================================== */ @keyframes circleFloat { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(35px, -35px) scale(1.25); opacity: 0.75; } } /* ========================================== CONTACT MODAL - PREMIUM DESIGN ========================================== */ .contact-modal.active { display: flex; opacity: 1; visibility: visible; } /* Modal Overlay */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Modal Wrapper */ /* Modal Content */ @keyframes modalSlideUp { from { opacity: 0; transform: translateY(50px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Custom Scrollbar */ /* ========================================== MODAL CLOSE BUTTON ========================================== */ /* ========================================== MODAL HEADER - CENTERED ========================================== */ /* ========================================== MODAL FORM STYLES ========================================== */ /* Form Submit Button */ /* ========================================== RESPONSIVE DESIGN - PART 6 ========================================== */ /* Large Desktop */ /* ========================================== ACCESSIBILITY & PERFORMANCE ========================================== */ @media (prefers-reduced-motion: reduce) { .cta-card.visible { transform: none; } } /* Print Styles */ /* ==================== CONTACT FORM STYLES ==================== */ /* ============================================================================ RISENEX GLOBAL - PART 7 ULTRA POLISHED CSS Contact Form, Success States, Web Development Hero Premium Glassmorphism | Smooth Animations | Full Accessibility ============================================================================ */ /* ==================== CSS CUSTOM PROPERTIES (Part 7 Specific) ==================== */ /* ==================== CONTACT FORM - BASE ==================== */ @keyframes formFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ==================== FORM ROW - RESPONSIVE GRID ==================== */ /* ==================== FORM GROUP - CONTAINER ==================== */ /* Glassmorphism Background Glow on Focus */ /* ==================== FLOATING LABEL - ENHANCED ==================== */ /* Textarea Label - Initial Hidden State */ /* Textarea Label - Active State */ /* ==================== INPUT, SELECT, TEXTAREA - BASE STYLES ==================== */ /* Textarea Specific */ /* Placeholder Styling */ /* ==================== SELECT DROPDOWN - ENHANCED ==================== */ /* Select Focus Arrow Color Change */ /* ==================== FOCUS STATE - PREMIUM ==================== */ /* ==================== FLOATING LABEL ANIMATION - ACTIVE STATE ==================== */ /* Textarea Without Placeholder */ /* Textarea Label Position */ /* Textarea Active Label */ /* ==================== ERROR STATE - ENHANCED ==================== */ .form-group.error input, .form-group.error select, .form-group.error textarea { border-color: var(--form-error); background: var(--form-error-bg); animation: formShake 0.5s var(--ease-in-out-back); box-shadow: var(--shadow-form-error); } .form-group.error label { color: var(--form-error); } /* Error Glow Effect */ .form-group.error::before { background: linear-gradient( 135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100% ); opacity: 1; } .form-group.error .form-error { display: flex; align-items: center; gap: 6px; animation: errorSlideIn 0.35s var(--ease-out-expo); } @keyframes errorSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ==================== SUCCESS STATE - ENHANCED ==================== */ .form-group.success input, .form-group.success select, .form-group.success textarea { border-color: var(--form-success); background: var(--form-success-bg); box-shadow: var(--shadow-form-success); } .form-group.success label { color: var(--form-success); } /* Success Glow Effect */ .form-group.success::before { background: linear-gradient( 135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100% ); opacity: 1; } /* ==================== WORD COUNTER - ENHANCED ==================== */ .word-counter { display: block; text-align: right; font-size: 0.8rem; color: var(--form-label); margin-top: 8px; font-weight: 500; font-variant-numeric: tabular-nums; transition: color 0.3s var(--ease-smooth); } .word-counter.warning { color: var(--form-warning); animation: counterPulse 1s ease-in-out infinite; } .word-counter.error { color: var(--form-error); font-weight: 600; animation: counterPulse 0.6s ease-in-out infinite; } @keyframes counterPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ==================== FORM BUTTONS - PREMIUM ==================== */ /* Button Shine Effect */ /* ==================== WHATSAPP BUTTON - ENHANCED ==================== */ /* ==================== SUBMIT BUTTON - ENHANCED ==================== */ /* ==================== BUTTON LOADING STATE ==================== */ .btn-whatsapp.loading, .btn-submit.loading { pointer-events: none; opacity: 0.75; cursor: wait; } .btn-whatsapp.loading::after, .btn-submit.loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: white; border-radius: 50%; animation: buttonSpin 0.75s linear infinite; z-index: 3; } .btn-submit.loading::after { border-color: rgba(30, 77, 140, 0.25); border-top-color: #1e4d8c; } @keyframes buttonSpin { to { transform: rotate(360deg); } } /* ==================== SUCCESS MESSAGE - PREMIUM ==================== */ .success-message.show { display: block; } @keyframes successReveal { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Celebration Particles */ @keyframes successParticles { 0% { opacity: 0; transform: scale(0); } 20% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(0) translateY(-30px); } } @keyframes successStroke { 100% { stroke-dashoffset: 0; } } @keyframes successCheckmarkFill { 100% { box-shadow: inset 0 0 0 44px rgba(16, 185, 129, 0.1); } } @keyframes successCheckmarkScale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.12, 1.12, 1); } } /* ==================== FORM NOTE - ENHANCED ==================== */ /* ==================== CHECKBOX STYLING - ENHANCED ==================== */ @keyframes checkboxPop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* ==================== FORM ANIMATIONS ==================== */ @keyframes formShake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-8px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 90% { transform: translateX(2px); } } /* ==================== FORM RESPONSIVE DESIGN ==================== */ /* Touch Device Optimization */ /* ==================== FORM ACCESSIBILITY ==================== */ /* Focus Visible for Keyboard Navigation */ /* High Contrast Mode Support */ /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .contact-form, .modal-overlay, .modal-content, .form-group::before, .form-group input, .form-group select, .form-group textarea, .form-group label, .btn-whatsapp, .btn-submit, .btn-whatsapp::before, .btn-submit::before, .btn-icon, .success-message, .success-checkmark, .success-circle, .success-check, .success-animation::before, .success-animation::after, .btn-close-success, .form-checkbox input[type="checkbox"], .word-counter { animation: none !important; transition: opacity 0.2s ease, color 0.2s ease !important; } .form-group.error input, .form-group.error select, .form-group.error textarea { animation: none !important; } .btn-whatsapp.loading::after, .btn-submit.loading::after { animation: buttonSpin 1.5s linear infinite !important; } } /* ==================== FORM PRINT STYLES ==================== */ /* ============================================================================ WEB DEVELOPMENT PAGE - HERO SECTION - ULTRA POLISHED ============================================================================ */ /* ==================== HERO SECTION - BASE ==================== */ /* Subtle Grid Pattern Overlay */ /* ==================== HERO BACKGROUND EFFECTS ==================== */ @keyframes webdevSlideCode { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Secondary Gradient Orb */ @keyframes webdevGradientPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 0.35; } } /* ==================== HERO CONTAINER LAYOUT ==================== */ .webdev-hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 70px); align-items: center; } /* ==================== HERO BADGE - GLASSMORPHISM ==================== */ @keyframes badgeFadeIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes badgeIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* ==================== HERO TITLE - ENHANCED ==================== */ @keyframes heroTitleReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes gradientTextShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } @keyframes typedCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ==================== HERO SUBTITLE ==================== */ @keyframes heroSubtitleReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ==================== HERO CTA BUTTONS ==================== */ @keyframes heroCTAReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Button Shine Effect */ /* ==================== PRIMARY CTA BUTTON ==================== */ /* ==================== SECONDARY CTA BUTTON ==================== */ /* ==================== HERO TRUST INDICATORS ==================== */ @keyframes heroTrustReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ==================== HERO VISUAL SECTION ==================== */ @keyframes heroVisualReveal { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* ==================== BROWSER MOCKUP - PREMIUM ==================== */ /* Loading Bar Animation */ @keyframes webdevLoadingBar { 0% { width: 0%; opacity: 1; } 45% { width: 100%; opacity: 1; } 50% { width: 100%; opacity: 0; } 100% { width: 100%; opacity: 0; } } /* ==================== BROWSER HEADER ==================== */ @keyframes webdevDotPulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.12); filter: brightness(1.15); } } /* ==================== BROWSER URL BAR ==================== */ /* HTTPS Indicator */ @keyframes webdevNetworkBlink { 0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); } 50% { opacity: 0.5; box-shadow: 0 0 10px rgba(16, 185, 129, 0.7); } } /* ==================== BROWSER CONTENT AREA ==================== */ @keyframes webdevContentScroll { 0%, 12% { transform: translateY(0); } 28%, 38% { transform: translateY(-45px); } 54%, 64% { transform: translateY(-90px); } 80%, 100% { transform: translateY(0); } } @keyframes webdevShimmer { 0% { background-position: 100% 50%; } 100% { background-position: -100% 50%; } } /* ==================== WEB DEV HERO RESPONSIVE ==================== */ @media (max-width: 1024px) { .webdev-hero .container { grid-template-columns: 1fr; gap: 50px; text-align: center; } } /* ==================== WEB DEV HERO ACCESSIBILITY ==================== */ /* Focus Visible States */ /* High Contrast Mode */ /* Reduced Motion */ /* ==================== WEB DEV HERO PRINT STYLES ==================== */ @media print { .webdev-hero .container { display: block; } } /* ============================================================================ END OF PART 7 ULTRA POLISHED CSS ============================================================================ */ /* ============================================================================ RISENEX GLOBAL - PART 8 ULTRA POLISHED CSS Floating Elements, Pain Points, Premium Mobile Menu Premium Glassmorphism | Smooth Animations | Full Accessibility ============================================================================ */ /* ==================== CSS CUSTOM PROPERTIES (Part 8 Specific) ==================== */ /* ============================================================================ BROWSER CONTENT EFFECTS - ENHANCED ============================================================================ */ /* Network Status Indicator */ @keyframes networkStatusPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.3); transform: scale(1); } 50% { opacity: 0.6; box-shadow: 0 0 16px rgba(16, 185, 129, 0.7), 0 0 28px rgba(16, 185, 129, 0.4); transform: scale(1.1); } } /* ==================== FLOATING ELEMENTS - PREMIUM ==================== */ /* Floating Element Positions */ @keyframes floatingElementDance { 0%, 100% { transform: translateY(0) rotate(0deg); } 20% { transform: translateY(-12px) rotate(2deg); } 40% { transform: translateY(-6px) rotate(-1deg); } 60% { transform: translateY(8px) rotate(1.5deg); } 80% { transform: translateY(14px) rotate(-2deg); } } /* ==================== SCROLL INDICATOR - ENHANCED ==================== */ @keyframes scrollIndicatorFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 0.85; transform: translateX(-50%) translateY(0); } } @keyframes scrollWheelBounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; } 50% { transform: translateX(-50%) translateY(12px); opacity: 0.4; } } /* ============================================================================ PAIN POINTS SECTION - PREMIUM ============================================================================ */ /* Subtle Background Pattern */ /* ==================== SECTION HEADER ==================== */ @keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Gradient Text Inside Title */ @keyframes sectionGradientShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* ==================== PAIN GRID ==================== */ /* ==================== PAIN CARD - PREMIUM GLASSMORPHISM ==================== */ /* Top Gradient Bar */ /* Corner Glow Effect */ /* ==================== PAIN ICON - ENHANCED ==================== */ /* Icon Variants with Enhanced Gradients */ /* ==================== PAIN CONTENT ==================== */ /* ==================== PAIN FEATURES LIST ==================== */ /* ==================== PAIN CTA ==================== */ /* ============================================================================ SPACING FIX - Hero to Pain Points ============================================================================ */ /* ============================================================================ MOBILE HAMBURGER MENU - PREMIUM WHITE THEME ============================================================================ */ /* ==================== SITE HEADER - ENHANCED ==================== */ /* Header scrolled state - add via JS */ .site-header.scrolled { background: rgba(255, 255, 255, 0.96); box-shadow: var(--ds-elevation-3); } /* ==================== SITE LOGO ==================== */ .site-logo .logo-text { font-size: 1.7rem; font-weight: 800; background: linear-gradient( 135deg, var(--menu-accent) 0%, var(--menu-accent-secondary) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } /* ==================== DESKTOP NAVIGATION ==================== */ @media (min-width: 1024px) { .desktop-nav .nav-link { color: var(--menu-text-primary); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth); position: relative; padding: 6px 0; } .desktop-nav .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--menu-accent), var(--menu-accent-secondary)); border-radius: 4px; transition: width 0.35s var(--ease-out-expo); } .desktop-nav .nav-link:hover { color: var(--menu-accent); } .desktop-nav .nav-link:hover::after { width: 100%; } } /* ==================== HAMBURGER BUTTON - ENHANCED ==================== */ .hamburger { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; margin: 0; background: rgba(30, 77, 140, 0.08); border: none; border-radius: 12px; cursor: pointer; z-index: 10001; position: relative; transition: background 0.3s var(--ease-smooth), transform 0.3s var(--ease-bounce); -webkit-tap-highlight-color: transparent; } .hamburger:hover { background: rgba(30, 77, 140, 0.14); transform: scale(1.05); } .hamburger:active { transform: scale(0.94); } .hamburger-box { width: 24px; height: 20px; display: block; position: relative; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 24px; height: 2.5px; background-color: var(--menu-accent); border-radius: 4px; position: absolute; transition: transform 0.35s var(--ease-out-expo), opacity 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), background-color 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), color 0.35s var(--ease-out-expo), filter 0.35s var(--ease-out-expo), max-height 0.35s var(--ease-out-expo), width 0.35s var(--ease-out-expo), height 0.35s var(--ease-out-expo), top 0.35s var(--ease-out-expo), left 0.35s var(--ease-out-expo); } .hamburger-inner { display: block; top: 50%; margin-top: -1.25px; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -8px; width: 20px; right: 0; } .hamburger-inner::after { bottom: -8px; width: 16px; right: 0; } /* Hamburger Active State (X) */ .hamburger.is-active { background: rgba(30, 77, 140, 0.12); } .hamburger.is-active .hamburger-inner { transform: rotate(45deg); background-color: var(--menu-accent); } .hamburger.is-active .hamburger-inner::before { top: 0; width: 24px; opacity: 0; transform: translateX(10px); } .hamburger.is-active .hamburger-inner::after { bottom: 0; width: 24px; transform: rotate(-90deg); } @media (min-width: 1024px) { .hamburger { display: none; } } /* ==================== MOBILE MENU OVERLAY ==================== */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 99999; visibility: hidden; opacity: 0; transition: visibility 0.4s, opacity 0.4s var(--ease-smooth); pointer-events: none; } .mobile-menu-overlay.is-active { visibility: visible; opacity: 1; pointer-events: auto; } /* Dark Backdrop */ .mobile-menu-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.4s var(--ease-smooth); } .mobile-menu-overlay.is-active .mobile-menu-backdrop { opacity: 1; } /* ==================== MENU CONTAINER - PREMIUM WHITE ==================== */ .mobile-menu-container { position: fixed; top: 0; right: 0; bottom: 0; width: 88%; max-width: 420px; height: 100vh; height: 100dvh; /* Dynamic viewport height for mobile */ background: var(--menu-bg); box-shadow: var(--shadow-menu-container); transform: translateX(100%); transition: transform 0.5s var(--ease-out-expo); display: flex; flex-direction: column; overflow: hidden; z-index: 100000; } .mobile-menu-overlay.is-active .mobile-menu-container { transform: translateX(0); } /* ==================== MENU HEADER ==================== */ .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--menu-border); background: linear-gradient( 135deg, rgba(30, 77, 140, 0.04) 0%, rgba(198, 147, 10, 0.04) 100% ); flex-shrink: 0; } .menu-logo .logo-text { font-size: 1.55rem; font-weight: 800; background: linear-gradient( 135deg, var(--menu-accent) 0%, var(--menu-accent-secondary) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } .menu-close { width: 42px; height: 42px; min-width: 42px; display: flex; align-items: center; justify-content: center; background: rgba(30, 77, 140, 0.08); border: none; border-radius: 12px; cursor: pointer; color: var(--menu-accent); font-size: 1.7rem; font-weight: 300; line-height: 1; transition: background 0.3s var(--ease-smooth), transform 0.4s var(--ease-bounce); -webkit-tap-highlight-color: transparent; } .menu-close:hover { background: rgba(30, 77, 140, 0.16); transform: rotate(90deg) scale(1.05); } .menu-close:active { transform: rotate(90deg) scale(0.95); } /* ==================== MENU CONTENT ==================== */ .mobile-menu-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1.25rem 0 2rem 0; background: var(--menu-bg); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Custom Scrollbar */ .mobile-menu-content::-webkit-scrollbar { width: 6px; } .mobile-menu-content::-webkit-scrollbar-track { background: transparent; } .mobile-menu-content::-webkit-scrollbar-thumb { background: rgba(30, 77, 140, 0.2); border-radius: 8px; } .mobile-menu-content::-webkit-scrollbar-thumb:hover { background: rgba(30, 77, 140, 0.35); } /* ==================== NAVIGATION LIST ==================== */ .mobile-nav-list { list-style: none; padding: 0; margin: 0; } .mobile-nav-item { opacity: 0; transform: translateX(40px); margin-bottom: 0.3rem; } /* Staggered Animation */ .mobile-menu-overlay.is-active .mobile-nav-item { animation: menuItemSlideIn 0.55s var(--ease-out-expo) forwards; } .mobile-menu-overlay.is-active .mobile-nav-item:nth-child(1) { animation-delay: 0.08s; } .mobile-menu-overlay.is-active .mobile-nav-item:nth-child(2) { animation-delay: 0.14s; } .mobile-menu-overlay.is-active .mobile-nav-item:nth-child(3) { animation-delay: 0.20s; } .mobile-menu-overlay.is-active .mobile-nav-item:nth-child(4) { animation-delay: 0.26s; } .mobile-menu-overlay.is-active .mobile-nav-item:nth-child(5) { animation-delay: 0.32s; } .mobile-menu-overlay.is-active .mobile-nav-item:nth-child(6) { animation-delay: 0.38s; } @keyframes menuItemSlideIn { to { opacity: 1; transform: translateX(0); } } /* ==================== NAVIGATION LINKS ==================== */ .mobile-nav-link { display: flex; align-items: center; gap: 1.15rem; padding: 1.1rem 1.75rem; color: var(--menu-text-primary); text-decoration: none; font-size: 1.05rem; font-weight: 600; background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; position: relative; transition: background 0.3s var(--ease-smooth), padding-left 0.35s var(--ease-out-expo), border-color 0.3s var(--ease-smooth); border-left: 4px solid transparent; -webkit-tap-highlight-color: transparent; } .mobile-nav-link:hover { background: var(--menu-hover-bg); border-left-color: var(--menu-accent); padding-left: 2.1rem; } .mobile-nav-link:active { background: rgba(30, 77, 140, 0.1); } .nav-icon { font-size: 1.7rem; width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient( 135deg, rgba(30, 77, 140, 0.1) 0%, rgba(198, 147, 10, 0.08) 100% ); border-radius: 12px; flex-shrink: 0; transition: background 0.3s var(--ease-smooth), transform 0.35s var(--ease-bounce), box-shadow 0.3s var(--ease-smooth); } .mobile-nav-link:hover .nav-icon { background: linear-gradient( 135deg, rgba(30, 77, 140, 0.18) 0%, rgba(198, 147, 10, 0.15) 100% ); transform: scale(1.08); box-shadow: var(--shadow-nav-icon); } .nav-text { flex: 1; font-weight: 600; letter-spacing: -0.2px; } /* ==================== SUBMENU ==================== */ .submenu-arrow { width: 30px; height: 30px; min-width: 30px; display: flex; align-items: center; justify-content: center; transition: transform 0.4s var(--ease-out-expo), background 0.3s var(--ease-smooth); color: var(--menu-text-secondary); font-size: 0.85rem; background: rgba(30, 77, 140, 0.08); border-radius: 8px; } .has-submenu.is-open .submenu-arrow { transform: rotate(180deg); background: rgba(30, 77, 140, 0.15); color: var(--menu-accent); } .mobile-submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; background: linear-gradient( 135deg, rgba(30, 77, 140, 0.02) 0%, rgba(198, 147, 10, 0.02) 100% ); transition: max-height 0.5s var(--ease-out-expo), padding 0.5s var(--ease-out-expo); } .has-submenu.is-open .mobile-submenu { max-height: 1200px; padding: 0.85rem 0; margin-bottom: 0.6rem; } .mobile-submenu-item { opacity: 0; transform: translateX(24px); transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-out-expo); } .has-submenu.is-open .mobile-submenu-item { opacity: 1; transform: translateX(0); } .has-submenu.is-open .mobile-submenu-item:nth-child(1) { transition-delay: 0.08s; } .has-submenu.is-open .mobile-submenu-item:nth-child(2) { transition-delay: 0.14s; } .has-submenu.is-open .mobile-submenu-item:nth-child(3) { transition-delay: 0.20s; } .has-submenu.is-open .mobile-submenu-item:nth-child(4) { transition-delay: 0.26s; } .has-submenu.is-open .mobile-submenu-item:nth-child(5) { transition-delay: 0.32s; } .mobile-submenu-link { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.75rem 1rem 2.85rem; color: #34495e; text-decoration: none; transition: background 0.3s var(--ease-smooth), padding-left 0.35s var(--ease-out-expo); background: transparent; border-radius: 0 12px 12px 0; margin-right: 0.6rem; -webkit-tap-highlight-color: transparent; } .mobile-submenu-link:hover { background: rgba(30, 77, 140, 0.08); padding-left: 3.15rem; } .mobile-submenu-link:active { background: rgba(30, 77, 140, 0.12); } .submenu-icon { font-size: 1.9rem; width: 54px; height: 54px; min-width: 54px; display: flex; align-items: center; justify-content: center; background: var(--menu-bg); border-radius: 16px; box-shadow: var(--ds-elevation-2); flex-shrink: 0; transition: transform 0.35s var(--ease-bounce), box-shadow 0.35s var(--ease-smooth); } .mobile-submenu-link:hover .submenu-icon { transform: scale(1.1); box-shadow: var(--ds-elevation-2); } .submenu-content { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; } .submenu-title { font-size: 0.98rem; font-weight: 600; color: var(--menu-text-primary); line-height: 1.35; letter-spacing: -0.2px; } .submenu-desc { font-size: 0.82rem; color: var(--menu-text-secondary); line-height: 1.35; } /* ==================== SORIVA CTA - PREMIUM AI BUTTON ==================== */ .mobile-menu-footer { position: relative; padding: 1.35rem 1.6rem 1.6rem; padding-bottom: max(1.6rem, calc(env(safe-area-inset-bottom) + 1.35rem)); border-top: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(248, 249, 250, 0.5) 25%, rgba(255, 255, 255, 1) 100% ); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-shrink: 0; opacity: 0; transform: translateY(24px); transition: opacity 0.55s var(--ease-out-expo) 0.4s, transform 0.55s var(--ease-out-expo) 0.4s; margin-top: auto; } .mobile-menu-overlay.is-active .mobile-menu-footer { opacity: 1; transform: translateY(0); } @keyframes sorivaGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Glass Overlay */ /* Shimmer Effect */ @keyframes sorivaShimmer { 0%, 100% { left: -100%; } 45%, 55% { left: 150%; } } .soriva-icon { width: 62px; height: 62px; min-width: 62px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 16px; font-size: 1.8rem; flex-shrink: 0; position: relative; box-shadow: var(--ds-elevation-2), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; transition: transform 0.45s var(--ease-bounce), border-color 0.35s var(--ease-smooth); } /* Icon Glow */ .soriva-icon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient( circle, rgba(255, 255, 255, 0.35) 0%, transparent 70% ); border-radius: 16px; pointer-events: none; } .soriva-cta:hover .soriva-icon { animation: sorivaIconLaunch 0.65s var(--ease-bounce) forwards; border-color: rgba(255, 255, 255, 0.5); } @keyframes sorivaIconLaunch { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-5px) scale(1.12) rotate(-6deg); } 60% { transform: translateY(-2px) scale(1.08) rotate(4deg); } 100% { transform: translateY(0) scale(1.1) rotate(0deg); } } .soriva-content { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; position: relative; z-index: 1; } .soriva-title { font-size: 1.18rem; font-weight: 800; color: #ffffff; line-height: 1.2; letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); } .soriva-subtitle { font-size: 0.88rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); line-height: 1.25; letter-spacing: 0.4px; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.18); text-transform: uppercase; } .soriva-arrow { font-size: 1.55rem; font-weight: 300; color: #ffffff; min-width: 30px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: transform 0.45s var(--ease-out-expo); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); } .soriva-cta:hover .soriva-arrow { animation: sorivaArrowBounce 0.9s ease-in-out infinite; } @keyframes sorivaArrowBounce { 0%, 100% { transform: translateX(6px) scale(1.1); } 50% { transform: translateX(12px) scale(1.18); } } /* ============================================================================ RESPONSIVE DESIGN ============================================================================ */ @media (max-width: 1024px) { .webdev-hero .container { grid-template-columns: 1fr; gap: 44px; } } @media (max-width: 768px) { .mobile-menu-container { width: 92%; max-width: 380px; } .mobile-nav-link { padding: 1rem 1.5rem; } .nav-icon { width: 44px; height: 44px; min-width: 44px; } .soriva-icon { width: 56px; height: 56px; min-width: 56px; } } @media (max-width: 480px) { .mobile-menu-header { padding: 1.25rem 1.5rem; } .mobile-nav-link { padding: 0.95rem 1.25rem; gap: 1rem; } .nav-icon { width: 42px; height: 42px; min-width: 42px; font-size: 1.5rem; } .mobile-submenu-link { padding-left: 2.5rem; } .submenu-icon { width: 48px; height: 48px; min-width: 48px; } .soriva-icon { width: 52px; height: 52px; min-width: 52px; font-size: 1.6rem; } .soriva-title { font-size: 1.1rem; } .soriva-subtitle { font-size: 0.82rem; } } /* Touch Device Optimization */ @media (hover: none) and (pointer: coarse) { .hamburger { min-height: 48px; min-width: 48px; } .mobile-nav-link { min-height: 56px; } .mobile-submenu-link { min-height: 60px; } .menu-close { min-height: 48px; min-width: 48px; } } /* ============================================================================ ACCESSIBILITY ============================================================================ */ /* Focus Visible States */ .hamburger:focus-visible, .menu-close:focus-visible, .mobile-nav-link:focus-visible, .mobile-submenu-link:focus-visible, .soriva-cta:focus-visible, .webdev-btn-primary:focus-visible, .webdev-btn-secondary:focus-visible { outline: 3px solid var(--menu-accent); outline-offset: 3px; } /* High Contrast Mode */ @media (prefers-contrast: high) { .mobile-menu-container { border-left: 2px solid #333; } .mobile-nav-link, .mobile-submenu-link { border: 1px solid transparent; } .mobile-nav-link:hover, .mobile-submenu-link:hover { border-color: #333; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .webdev-floating-element, .webdev-scroll-indicator, .webdev-scroll-wheel, .webdev-browser-content::before, .webdev-section-badge, .webdev-section-title .webdev-gradient-text, .webdev-pain-card, .webdev-pain-card::before, .webdev-pain-card::after, .webdev-pain-icon, .webdev-pain-icon svg, .webdev-pain-features li, .webdev-pain-features svg, .hamburger, .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after, .mobile-menu-overlay, .mobile-menu-backdrop, .mobile-menu-container, .mobile-nav-item, .mobile-nav-link, .nav-icon, .submenu-arrow, .mobile-submenu, .mobile-submenu-item, .mobile-submenu-link, .submenu-icon, .mobile-menu-footer, .soriva-cta, .soriva-cta::before, .soriva-cta::after, .soriva-icon, .soriva-arrow, .menu-close, .site-header { animation: none !important; transition: opacity 0.2s ease, color 0.2s ease !important; } /* Keep essential transitions for usability */ .mobile-submenu { transition: max-height 0.3s ease !important; } .mobile-menu-container { transition: transform 0.3s ease !important; } .mobile-menu-overlay { transition: opacity 0.2s ease, visibility 0.2s ease !important; } } /* Skip to Content Link (Screen Readers) */ /* ============================================================================ PRINT STYLES ============================================================================ */ @media print { .site-header, .hamburger, .mobile-menu-overlay, .webdev-scroll-indicator, .webdev-floating-element, .soriva-cta, .mobile-menu-footer { display: none !important; } } /* ============================================================================ END OF PART 8 ULTRA POLISHED CSS ============================================================================ */ /* ============================================================================ RISENEX GLOBAL - PART 9 ULTRA POLISHED CSS Soriva Badge, Why Choose Us, Video Slider, Lightbox, 3D Testimonials Premium Glassmorphism | Smooth Animations | Full Accessibility ============================================================================ */ /* ==================== CSS CUSTOM PROPERTIES (Part 9 Specific) ==================== */ /* ============================================================================ SORIVA BADGE - PREMIUM ENHANCED ============================================================================ */ .soriva-badge { position: absolute; top: 4px; right: 10px; z-index: 2; /* Premium Gradient Background */ background: linear-gradient( 135deg, var(--badge-primary) 0%, var(--badge-secondary) 50%, var(--badge-primary) 100% ); background-size: 200% 200%; color: #ffffff; font-size: 0.68rem; font-weight: 800; padding: 0.45rem 0.9rem; border-radius: 16px; line-height: 1; text-transform: uppercase; letter-spacing: 0.9px; /* Multi-layer Shadow */ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 4px 18px var(--badge-glow), 0 2px 8px rgba(255, 71, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); /* Gradient Animation */ animation: badgeGradientPulse 3s ease-in-out infinite; transition: transform 0.35s var(--ease-bounce), box-shadow 0.35s var(--ease-smooth); } @keyframes badgeGradientPulse { 0%, 100% { background-position: 0% 50%; filter: brightness(1); } 50% { background-position: 100% 50%; filter: brightness(1.1); } } .soriva-badge:hover { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45), 0 6px 24px var(--badge-glow), 0 4px 12px rgba(255, 71, 87, 0.4); } /* Shimmer Effect */ .soriva-badge::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100% ); border-radius: inherit; animation: badgeShimmer 3.5s ease-in-out infinite; } @keyframes badgeShimmer { 0%, 100% { left: -100%; } 45%, 55% { left: 100%; } } /* ============================================================================ BODY SCROLL LOCK ============================================================================ */ body.menu-open { overflow: hidden; position: fixed; width: 100%; height: 100vh; height: 100dvh; /* Dynamic viewport for mobile */ touch-action: none; -webkit-overflow-scrolling: none; } /* Prevent content shift when scrollbar disappears */ body.menu-open { padding-right: var(--scrollbar-width, 0); } /* ============================================================================ HIDE ON DESKTOP / MOBILE UTILITIES ============================================================================ */ @media (min-width: 1024px) { .mobile-menu-overlay { display: none !important; visibility: hidden !important; pointer-events: none !important; } } @media (max-width: 1023px) { .btn-soriva-wrapper, .desktop-only { display: none !important; } } /* ============================================================================ WHY CHOOSE US SECTION - PREMIUM GLASSMORPHISM ============================================================================ */ /* Background Decorations - Enhanced */ @keyframes decorOrb1Float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 20px) scale(1.05); } } @keyframes decorOrb2Float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.05); } } /* ==================== SECTION HEADER ==================== */ @keyframes labelFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes gradientTextFlow { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* ==================== BENEFITS GRID ==================== */ /* ==================== BENEFIT CARD - PREMIUM GLASSMORPHISM ==================== */ /* Hover Glow Effect */ /* Corner Shine */ /* ==================== BENEFIT ICON ==================== */ /* ==================== BENEFIT CONTENT ==================== */ /* Checkmark Icon */ /* ==================== WHY CHOOSE CTA BOX ==================== */ /* Animated Gradient Background */ @keyframes ctaRotatingGlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Button Gradient Hover */ /* Button Shine */ /* ============================================================================ VIDEO SLIDER - NETFLIX-STYLE PREMIUM ============================================================================ */ /* Subtle Pattern Overlay */ .video-showcase .container { max-width: 100%; padding: 0 clamp(20px, 5vw, 70px); position: relative; z-index: 1; } /* ==================== VIDEO SLIDER HEADER ==================== */ /* ==================== SLIDER WRAPPER ==================== */ /* ==================== NAVIGATION BUTTONS ==================== */ /* ==================== VIDEO SLIDER TRACK ==================== */ /* Infinite Scroll Animation */ .video-slider.infinite-scroll { /* Distance and duration are set from JS, not from a percentage. translateX(-50%) resolves against the ELEMENT's width, and this flex container was constrained to its parent at 697px while its content ran to 12,609px — so the strip crawled 349px and snapped back instead of scrolling one full set. Sizing the element to its content fixed the percentage but changed how the cards themselves sized, so the distance is now measured and applied directly, at a fixed px-per-second. */ animation: videoInfiniteScroll var(--marquee-duration, 45s) linear infinite; will-change: transform; } @keyframes videoInfiniteScroll { 0% { transform: translateX(0); } 100% { transform: translateX(var(--marquee-distance, -50%)); } } /* Pause on Hover */ /* ==================== VIDEO CARDS ==================== */ /* Focus Ring */ .video-card.lightbox-active { transform: scale(1.08); box-shadow: var(--ds-elevation-3); z-index: 100; } /* ==================== VIDEO PLAYER ==================== */ /* ==================== VIDEO OVERLAY ==================== */ /* ==================== VIDEO INFO ==================== */ /* ============================================================================ VIDEO LIGHTBOX - ELEGANT BLURRED BACKGROUND ============================================================================ */ .video-lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 50px); /* The dim MUST come from a real background colour. Relying on backdrop-filter alone left the overlay almost invisible anywhere the property is unsupported — the panel floated over unblurred, fully readable page content. The blur is now an enhancement on top. */ background: rgba(8, 21, 43, 0.74); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-netflix), visibility 0.4s; } .video-lightbox.active { opacity: 1; visibility: visible; } /* ==================== LIGHTBOX CONTENT ==================== */ .lightbox-content { width: 100%; max-width: 1050px; transform: scale(0.92) translateY(35px); transition: transform 0.5s var(--ease-netflix); } .video-lightbox.active .lightbox-content { transform: scale(1) translateY(0); } /* ==================== LIGHTBOX WRAPPER ==================== */ .lightbox-wrapper { position: relative; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--ds-elevation-4); animation: lightboxReveal 0.45s var(--ease-netflix); } @keyframes lightboxReveal { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } /* ==================== LIGHTBOX VIDEO CONTAINER ==================== */ .lightbox-video-container { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .lightbox-video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ==================== LIGHTBOX INFO ==================== */ .lightbox-info { padding: clamp(20px, 3vw, 28px) clamp(24px, 3vw, 32px); background: linear-gradient( to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75) ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .lightbox-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: #ffffff; margin: 0 0 10px 0; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); letter-spacing: -0.5px; } .lightbox-desc { font-size: clamp(0.95rem, 1.8vw, 1.05rem); color: rgba(255, 255, 255, 0.88); margin: 0; line-height: 1.65; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); } /* ==================== LIGHTBOX CLOSE BUTTON ==================== */ .lightbox-close { position: absolute; top: 18px; right: 18px; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s var(--ease-smooth), transform 0.4s var(--ease-bounce), border-color 0.3s var(--ease-smooth); z-index: 10; -webkit-tap-highlight-color: transparent; } .lightbox-close:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.12) rotate(90deg); border-color: rgba(255, 255, 255, 0.25); } .lightbox-close:active { transform: scale(0.95) rotate(90deg); } .lightbox-close svg { width: 24px; height: 24px; color: white; } /* ============================================================================ TESTIMONIALS SECTION - 3D CAROUSEL ============================================================================ */ /* Subtle Background Pattern */ /* ==================== TESTIMONIALS HEADER ==================== */ /* ==================== 3D CAROUSEL WRAPPER ==================== */ /* ==================== TESTIMONIAL CARDS - 3D POSITIONING ==================== */ /* Active Card (Center) */ /* Side Cards */ .webdev-testimonial-card.webdev-prev { transform: translate(-50%, -50%) translateX(-480px) translateZ(-320px) scale(0.72) rotateY(38deg); opacity: 0.35; z-index: 5; } .webdev-testimonial-card.webdev-next { transform: translate(-50%, -50%) translateX(480px) translateZ(-320px) scale(0.72) rotateY(-38deg); opacity: 0.35; z-index: 5; } .webdev-testimonial-card.webdev-far-prev, .webdev-testimonial-card.webdev-far-next { transform: translate(-50%, -50%) translateX(-650px) translateZ(-550px) scale(0.45); opacity: 0; pointer-events: none; z-index: 1; } /* ==================== GLASSMORPHISM CARD DESIGN ==================== */ /* Shine Effect */ @keyframes testimonialCardShine { 0% { left: -100%; } 45%, 55% { left: 100%; } 100% { left: 100%; } } /* Active Card Enhancement */ /* ==================== CARD HEADER ==================== */ /* Avatar Glow Ring */ @keyframes avatarGlowPulse { 0%, 100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.12); opacity: 0.5; } } /* ==================== STAR RATINGS ==================== */ /* Star Animation on Active Card */ @keyframes starTwinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } /* ==================== TESTIMONIAL TEXT ==================== */ /* Quote Mark */ /* ==================== NAVIGATION BUTTONS ==================== */ /* ==================== CAROUSEL INDICATORS ==================== */ .webdev-indicator.webdev-active { background: linear-gradient( 135deg, var(--testimonial-accent) 0%, var(--testimonial-accent-alt) 100% ); border-color: rgba(30, 77, 140, 0.25); width: 44px; border-radius: 12px; box-shadow: var(--ds-elevation-2); } /* ============================================================================ DARK MODE SUPPORT ============================================================================ */ @media (prefers-color-scheme: dark) { .mobile-menu-footer { background: linear-gradient( 180deg, rgba(20, 20, 30, 0) 0%, rgba(25, 25, 35, 0.55) 30%, rgba(30, 30, 40, 1) 100% ); } } /* ============================================================================ RESPONSIVE DESIGN ============================================================================ */ @media (max-width: 1024px) { .video-showcase .container { padding: 0 44px; } .webdev-testimonial-card.webdev-prev { transform: translate(-50%, -50%) translateX(-420px) translateZ(-270px) scale(0.68) rotateY(38deg); } .webdev-testimonial-card.webdev-next { transform: translate(-50%, -50%) translateX(420px) translateZ(-270px) scale(0.68) rotateY(-38deg); } } @media (max-width: 768px) { .video-showcase .container { padding: 0 22px; } .video-lightbox { padding: 22px; backdrop-filter: blur(18px) brightness(0.55); -webkit-backdrop-filter: blur(18px) brightness(0.55); } .lightbox-content { max-width: 100%; } .lightbox-title { font-size: 1.35rem; } .lightbox-desc { font-size: 0.9rem; } .lightbox-info { padding: 22px; } .lightbox-close { width: 42px; height: 42px; top: 14px; right: 14px; } .lightbox-close svg { width: 20px; height: 20px; } .webdev-testimonial-card.webdev-prev, .webdev-testimonial-card.webdev-next { opacity: 0; pointer-events: none; } .webdev-indicator.webdev-active { width: 34px; } } @media (max-width: 480px) { .soriva-badge { font-size: 0.62rem; padding: 0.38rem 0.75rem; } } @media (max-width: 360px) { .soriva-icon { width: 50px; height: 50px; min-width: 50px; font-size: 1.55rem; } .soriva-badge { font-size: 0.58rem; padding: 0.35rem 0.7rem; } } /* Touch Device Optimization */ @media (hover: none) and (pointer: coarse) { .lightbox-close { min-height: 48px; min-width: 48px; } } /* ============================================================================ ACCESSIBILITY ============================================================================ */ /* Focus Visible States */ .slider-btn:focus-visible, .lightbox-close:focus-visible, .webdev-carousel-nav-btn:focus-visible, .webdev-indicator:focus-visible, .video-card:focus-visible, .benefit-card:focus-visible, .cta-btn:focus-visible { outline: 3px solid var(--testimonial-accent); outline-offset: 3px; } /* High Contrast Mode */ @media (prefers-contrast: high) { .lightbox-wrapper { border: 2px solid white; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .soriva-badge, .soriva-badge::before, .webdev-why-choose::before, .webdev-why-choose::after, .section-label, .gradient-text, .benefit-card, .benefit-card::before, .benefit-card::after, .benefit-icon-bg, .benefit-icon, .benefit-features li, .benefit-features li::before, .why-choose-cta::before, .cta-btn, .cta-btn::before, .cta-btn::after, .cta-btn .btn-icon, .video-slider, .video-slider.infinite-scroll, .video-card, .video-player, .video-overlay, .video-info, .slider-btn, .slider-btn svg, .video-lightbox, .lightbox-content, .lightbox-wrapper, .lightbox-close, .webdev-carousel-3d-track, .webdev-testimonial-card, .webdev-card-glass, .webdev-card-glass::before, .webdev-client-avatar, .webdev-client-avatar::after, .webdev-star, .webdev-testimonial-text, .webdev-carousel-nav-btn, .webdev-carousel-nav-btn svg, .webdev-indicator { animation: none !important; transition: opacity 0.2s ease, color 0.2s ease !important; } .video-slider.infinite-scroll { animation: none !important; } .video-lightbox { transition: opacity 0.2s ease, visibility 0.2s ease !important; } } /* ============================================================================ PRINT STYLES ============================================================================ */ @media print { .webdev-why-choose::before, .webdev-why-choose::after, .why-choose-cta::before, .video-showcase, .video-lightbox, .slider-btn, .webdev-carousel-nav-btn, .webdev-carousel-indicators, .soriva-badge { display: none !important; } } /* ============================================================================ SMOOTH FONT RENDERING ============================================================================ */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================================ END OF PART 9 ULTRA POLISHED CSS ============================================================================ */ /* ================================ */ /* FAQ SECTION - EXCEPTIONAL DESIGN */ /* WHITE THEME WITH GLASSMORPHISM */ /* ================================ */ /* Section Container */ /* ============================================================================ RISENEX GLOBAL - PART 10 ULTRA POLISHED CSS FAQ Accordion Section, AI Hero Section (The Vision) Premium Glassmorphism | Smooth Animations | Full Accessibility ============================================================================ */ /* ==================== CSS CUSTOM PROPERTIES (Part 10 Specific) ==================== */ /* ============================================================================ FAQ SECTION - PREMIUM ACCORDION ============================================================================ */ /* Subtle Background Pattern */ /* Secondary Pattern Layer */ /* ==================== FAQ HEADER ==================== */ /* ==================== FAQ ACCORDION CONTAINER ==================== */ /* ==================== FAQ ITEM - GLASSMORPHISM CARD ==================== */ /* Staggered Animation */ @keyframes faqItemFadeIn { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } } /* Hover State */ /* Active/Open State */ .webdev-faq-item.webdev-active { background: var(--faq-bg-active); border-color: var(--faq-border-active); box-shadow: var(--shadow-faq-active); transform: translateY(-4px); } /* ==================== QUESTION BUTTON ==================== */ /* Hover Gradient Overlay */ /* ==================== QUESTION ICON ==================== */ .webdev-faq-item.webdev-active .webdev-faq-icon { transform: scale(1.12) rotate(6deg); box-shadow: var(--ds-elevation-2); } .webdev-faq-item:hover:not(.webdev-active) .webdev-faq-icon { transform: scale(1.06); box-shadow: var(--ds-elevation-2); } /* ==================== QUESTION TEXT ==================== */ .webdev-faq-item.webdev-active .webdev-faq-question-text { background: linear-gradient( 135deg, var(--faq-accent) 0%, var(--faq-accent-alt) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ==================== ARROW ICON ==================== */ .webdev-faq-item.webdev-active .webdev-faq-arrow { background: linear-gradient( 135deg, var(--faq-accent) 0%, var(--faq-accent-alt) 100% ); color: #ffffff; transform: rotate(180deg); box-shadow: var(--ds-elevation-2); } .webdev-faq-item:hover:not(.webdev-active) .webdev-faq-arrow { background: rgba(30, 77, 140, 0.12); color: var(--faq-accent); } /* ==================== ANSWER SECTION ==================== */ .webdev-faq-item.webdev-active .webdev-faq-answer { max-height: 900px; } .webdev-faq-item.webdev-active .webdev-faq-answer-content { opacity: 1; transform: translateY(0); } /* ==================== ANSWER LIST STYLING ==================== */ /* Arrow Bullet */ /* ============================================================================ AI HERO SECTION - THE VISION ============================================================================ */ /* ==================== BACKGROUND EFFECTS ==================== */ /* Grid Pattern */ /* Animated Gradient Orbs */ @keyframes aiHeroOrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(35px, -35px) scale(1.06); } 50% { transform: translate(-25px, 25px) scale(0.94); } 75% { transform: translate(25px, 35px) scale(1.03); } } /* ==================== HERO CONTAINER ==================== */ /* ==================== HERO CONTENT ==================== */ /* ==================== MAIN HEADLINE ==================== */ @keyframes aiHeroFadeInUp { to { opacity: 1; transform: translateY(0); } } /* ==================== GRADIENT TEXT ==================== */ @keyframes aiHeroGradientFlow { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* Animated Underline */ @keyframes aiHeroUnderlineReveal { to { opacity: 1; transform: scaleX(1); } } /* ==================== SUBHEADLINE ==================== */ @keyframes aiHeroFadeIn { to { opacity: 1; } } /* ==================== PHILOSOPHY PARAGRAPH ==================== */ /* ==================== CTA BUTTONS ==================== */ /* ==================== PRIMARY BUTTON ==================== */ /* Gradient Hover Overlay */ /* Shine Effect */ /* ==================== SECONDARY BUTTON ==================== */ /* ==================== BUTTON CONTENT ==================== */ /* ==================== HERO VISUAL - AI NETWORK ==================== */ @keyframes aiHeroVisualReveal { from { opacity: 0; transform: translateX(40px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } /* ==================== SVG ANIMATION ==================== */ /* ==================== CIRCLES ANIMATION ==================== */ @keyframes aiHeroCirclePulse { 0%, 100% { stroke-opacity: 1; transform: scale(1); } 50% { stroke-opacity: 0.55; transform: scale(1.06); } } /* ==================== NODES ANIMATION ==================== */ @keyframes aiHeroNodeGlow { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(30, 77, 140, 0.65)); } 50% { opacity: 0.65; filter: drop-shadow(0 0 18px rgba(30, 77, 140, 0.95)); } } /* ==================== LINES ANIMATION ==================== */ @keyframes aiHeroLineDraw { 0%, 100% { stroke-dashoffset: 100; } 50% { stroke-dashoffset: 0; } } /* ==================== FLOATING PARTICLES ==================== */ @keyframes aiHeroParticleFloat { 0%, 100% { transform: translate(0, 0); opacity: 0.55; } 50% { transform: translate(25px, -35px); opacity: 0.9; } } /* ==================== SCROLL INDICATOR ==================== */ @keyframes aiHeroScrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } } /* ============================================================================ RESPONSIVE DESIGN ============================================================================ */ /* Touch Device Optimization */ /* ============================================================================ ACCESSIBILITY ============================================================================ */ /* Focus Visible States */ /* High Contrast Mode */ @media (prefers-contrast: high) { .webdev-faq-item.webdev-active { border-color: var(--faq-accent); } } /* Reduced Motion */ /* Scroll Margin for FAQ Items */ /* ============================================================================ PRINT STYLES ============================================================================ */ /* ============================================================================ END OF PART 10 ULTRA POLISHED CSS ============================================================================ *//* ==================================== SECTION 2: PHILOSOPHY - "THE WHY" ==================================== */ /* ============================================================================ RISENEX GLOBAL - PART 11 ULTRA POLISHED CSS AI Philosophy Section, Core Engine Section (How It Works) Premium Glassmorphism | Orbital Animations | Full Accessibility ============================================================================ */ /* ==================== CSS CUSTOM PROPERTIES (Part 11 Specific) ==================== */ /* ============================================================================ AI PHILOSOPHY SECTION ============================================================================ */ /* ==================== BACKGROUND ELEMENTS ==================== */ /* Grid Pattern */ /* Floating Orbs */ @keyframes philOrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(35px, -35px) scale(1.08); } 66% { transform: translate(-25px, 25px) scale(0.92); } } /* ==================== PHILOSOPHY HEADER ==================== */ /* Badge */ @keyframes philBadgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Title */ /* Gradient Text */ @keyframes gradientTextFlow { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* Subtitle */ /* ==================== PHILOSOPHY GRID ==================== */ /* ==================== PHILOSOPHY CARD ==================== */ /* Card Glow Effect */ /* Corner Shine */ /* ==================== CARD ICON ==================== */ /* ==================== CARD CONTENT ==================== */ /* ==================== PHILOSOPHY STATEMENT ==================== */ /* Quote Icon */ /* Quote Text */ /* Author */ /* ==================== CORE PRINCIPLES ==================== */ /* ==================== PRINCIPLE ITEM ==================== */ /* Large Number */ /* ============================================================================ AI CORE ENGINE SECTION - HOW IT WORKS ============================================================================ */ /* ==================== BACKGROUND ELEMENTS ==================== */ /* Grid Pattern */ /* Background Orbs */ @keyframes coreOrbFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(55px, -55px); } } /* ==================== CORE HEADER ==================== */ /* Badge */ @keyframes coreBadgePulse { 0%, 100% { box-shadow: var(--ds-elevation-1); } 50% { box-shadow: var(--ds-elevation-2); } } /* Title */ @keyframes coreGradientShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* Subtitle */ /* ==================== CORE ARCHITECTURE ==================== */ /* ==================== CENTER HUB ==================== */ /* Hub Icon */ @keyframes hubIconRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Hub Text */ /* Hub Pulse Effect */ @keyframes hubPulseExpand { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } } /* ==================== ORBITING COMPONENTS ==================== */ /* Staggered Fade In */ @keyframes orbitItemFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Orbit Positions */ /* ==================== ORBIT CARD ==================== */ /* Orbit Icon */ /* Orbit Text */ /* ==================== CONNECTOR LINES ==================== */ /* Side Connectors */ /* Top Connector (1) */ /* Top-Right Connector (2) */ /* Bottom-Right Connector (3) */ /* Bottom Connector (4) */ /* Bottom-Left Connector (5) */ /* Top-Left Connector (6) */ /* ==================== TECHNOLOGY STACK ==================== */ /* ==================== TECH ITEM ==================== */ /* Tech Icon */ /* Tech Text */ /* ==================== PROCESS FLOW TIMELINE ==================== */ /* ==================== FLOW STEP ==================== */ @keyframes flowStepSlideIn { to { opacity: 1; transform: translateX(0); } } /* Step Number */ /* Step Content */ /* Connecting Line */ /* ============================================================================ RESPONSIVE DESIGN ============================================================================ */ /* Touch Device Optimization */ /* ============================================================================ ACCESSIBILITY ============================================================================ */ /* Focus Visible States */ /* High Contrast Mode */ /* Reduced Motion */ /* ============================================================================ PRINT STYLES ============================================================================ */ /* ==================================== SECTION 4: CAPABILITIES - "IN ACTION" ==================================== */ /* ===================================================== PART 12: AI CAPABILITIES & IMPACT METRICS Ultra-Polished with GPU Acceleration & Premium Effects ===================================================== */ /* ============================================ SECTION: AI CAPABILITIES ============================================ */ /* ============= HEADER ============= */ @keyframes shimmerText { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============= CAPABILITIES GRID ============= */ /* Top gradient bar animation */ /* Subtle inner glow on hover */ @keyframes gradientFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Card Header */ /* Card Content */ /* Features List */ /* Badge Overlay */ /* ============= USE CASES SECTION ============= */ /* ============= BACKGROUND ELEMENTS ============= */ @keyframes floatOrb { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(30px, -30px, 0) scale(1.1); } 66% { transform: translate3d(-20px, 20px, 0) scale(0.95); } } /* ============================================ SECTION: AI IMPACT METRICS ============================================ */ /* Section Header */ /* Stats Grid */ /* Top gradient bar */ /* Radial glow on hover */ /* Impact Categories */ /* Gradient overlay on hover */ /* ROI Calculator Teaser */ /* Decorative gradient orb */ @keyframes roiProgress { from { stroke-dashoffset: 502.4; } to { stroke-dashoffset: 125.6; } } /* Background Elements */ @keyframes floatSlowImpact { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(50px, 50px, 0) scale(1.1); } } /* ============================================ RESPONSIVE DESIGN - AI CAPABILITIES ============================================ */ /* ============================================ RESPONSIVE DESIGN - IMPACT METRICS ============================================ */ /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ /* ============================================ FOCUS STATES FOR ACCESSIBILITY ============================================ */ /* ======================================== SECTION 6: FINAL CTA - LET'S BUILD TOGETHER ======================================== */ /* ===================================================== PART 13: AI CTA FINAL & ERP DEFINITION BANNER Ultra-Polished with GPU Acceleration & Premium Effects ===================================================== */ /* ============================================ SECTION: AI CTA FINAL ============================================ */ /* Content Section */ /* Badge */ @keyframes badgePulseEnhanced { 0%, 100% { box-shadow: var(--ds-elevation-2); } 50% { box-shadow: var(--ds-elevation-2); } } /* Title */ @keyframes shimmerGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Description */ /* CTA Buttons */ /* Trust Indicators */ /* ============================================ VISUAL ELEMENT - FLOATING CARD ============================================ */ @keyframes cardFloatEnhanced { 0%, 100% { transform: translateY(0) rotate(0deg) translateZ(0); } 25% { transform: translateY(-12px) rotate(1deg) translateZ(0); } 50% { transform: translateY(-20px) rotate(2deg) translateZ(0); } 75% { transform: translateY(-8px) rotate(0.5deg) translateZ(0); } } @keyframes glowRotateEnhanced { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Grid Lines */ @keyframes lineFlowEnhanced { 0% { transform: translateY(-100%); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { transform: translateY(100%); opacity: 0; } } /* Stats Display */ @keyframes barGrowEnhanced { from { transform: scaleX(0); opacity: 0.5; } to { transform: scaleX(1); opacity: 1; } } @keyframes barShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Icon Grid */ @keyframes iconPulseEnhanced { 0%, 100% { transform: scale(1) translateZ(0); box-shadow: var(--ds-elevation-2); } 50% { transform: scale(1.08) translateZ(0); box-shadow: var(--ds-elevation-3); } } /* ============================================ BACKGROUND ELEMENTS ============================================ */ @keyframes floatSlowCTA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(50px, 50px, 0) scale(1.1); } } /* Particles */ @keyframes particleFloatEnhanced { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 15% { opacity: 0.9; } 50% { transform: translate3d(60px, -60px, 0) scale(1.5); opacity: 0.7; } 85% { opacity: 0.4; } 100% { transform: translate3d(120px, -120px, 0) scale(0.3); opacity: 0; } } /* ============================================ SECTION: ERP DEFINITION BANNER ============================================ */ /* Main Content Wrapper */ /* ============================================ ERP ABBREVIATION LETTERS ============================================ */ @keyframes erpLetterDropEnhanced { 0% { opacity: 0; transform: translateY(-50px) scale(0.6) rotateX(-20deg) translateZ(0); } 60% { transform: translateY(8px) scale(1.08) rotateX(5deg) translateZ(0); } 80% { transform: translateY(-3px) scale(0.98) rotateX(-2deg) translateZ(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg) translateZ(0); } } /* Shimmer on completed letters */ @keyframes letterShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================ EQUALS SIGN ============================================ */ @keyframes erpEqualsFadeEnhanced { from { opacity: 0; transform: scale(0.4) rotate(-10deg) translateZ(0); } 60% { transform: scale(1.1) rotate(5deg) translateZ(0); } to { opacity: 1; transform: scale(1) rotate(0deg) translateZ(0); } } /* ============================================ FULL FORM TEXT ============================================ */ /* Enterprise - Stagger delays */ /* Resource - Stagger delays */ /* Planning - Stagger delays */ @keyframes erpCharFlowEnhanced { from { opacity: 0; transform: translateX(-35px) scale(0.9) translateZ(0); } 60% { transform: translateX(3px) scale(1.02) translateZ(0); } to { opacity: 1; transform: translateX(0) scale(1) translateZ(0); } } /* ============================================ BOTTOM TAGLINE ============================================ */ @keyframes erpTaglineAppearEnhanced { from { opacity: 0; transform: translateY(25px) scale(0.95) translateZ(0); } 60% { transform: translateY(-3px) scale(1.02) translateZ(0); } to { opacity: 1; transform: translateY(0) scale(1) translateZ(0); } } @keyframes erpLinePulseEnhanced { 0%, 100% { opacity: 0.2; transform: scaleX(0.8); } 50% { opacity: 1; transform: scaleX(1); } } @keyframes taglineShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================ RESPONSIVE DESIGN - AI CTA FINAL ============================================ */ /* ============================================ RESPONSIVE DESIGN - ERP DEFINITION BANNER ============================================ */ /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ /* ============================================ FOCUS STATES FOR ACCESSIBILITY ============================================ */ /* ============================================ PRINT STYLES ============================================ */ /* ===================================================== PART 14: ERP HERO SECTION Ultra-Polished with GPU Acceleration & Premium Effects ===================================================== */ /* ============================================ SECTION: ERP HERO ============================================ */ /* Background Gradient Overlay */ /* Secondary ambient orb */ @keyframes erpHeroFloatEnhanced { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 33% { transform: translate3d(-20px, 20px, 0) rotate(3deg) scale(1.02); } 66% { transform: translate3d(-35px, 35px, 0) rotate(5deg) scale(1.05); } } /* Container */ /* ============================================ LEFT CONTENT ============================================ */ /* Badge */ @keyframes erpBadgeGlowEnhanced { 0%, 100% { box-shadow: var(--ds-elevation-2); } 50% { box-shadow: var(--ds-elevation-3); } } @keyframes erpBadgePulseEnhanced { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.25) rotate(10deg); } } /* Title */ @keyframes erpTitleShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Subtle underline effect */ /* Subtitle */ /* CTA Buttons */ /* Shimmer effect on hover */ /* ============================================ RIGHT VISUAL GRID ============================================ */ /* Module Cards */ .erp-module-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(30, 77, 140, 0.15); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; box-shadow: var(--ds-elevation-3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; transform: translateZ(0); will-change: transform, box-shadow, border-color; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease, border-color 0.4s ease; animation: erpCardFloatEnhanced 4s ease-in-out infinite; } .erp-module-card:hover { transform: translateY(-12px) scale(1.05) translateZ(0); box-shadow: var(--ds-elevation-4), 0 0 0 1px rgba(30, 77, 140, 0.2) inset; border-color: rgba(30, 77, 140, 0.4); animation-play-state: paused; } /* Staggered Animation */ @keyframes erpCardFloatEnhanced { 0%, 100% { transform: translateY(0px) translateZ(0); } 25% { transform: translateY(-8px) translateZ(0); } 50% { transform: translateY(-15px) translateZ(0); } 75% { transform: translateY(-5px) translateZ(0); } } .erp-module-card:hover .erp-card-icon { filter: grayscale(0) saturate(1.2); transform: scale(1.25) rotate(8deg); } .erp-module-card:hover .erp-card-label { color: #1e4d8c; } /* ============================================ CENTRAL HUB ============================================ */ @keyframes erpHubRotateEnhanced { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Multiple pulse rings */ @keyframes erpPulseEnhanced { 0% { transform: scale(1); opacity: 0.8; } 50% { opacity: 0.4; } 100% { transform: scale(2); opacity: 0; } } @keyframes erpHubIconCounterRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* ============================================ CONNECTION LINES (Optional Enhancement) ============================================ */ @keyframes erpConnectionRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* ============================================ SCROLL INDICATOR ============================================ */ @keyframes erpScrollBounceEnhanced { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; } 50% { transform: translateX(-50%) translateY(12px); opacity: 0.5; } } /* Animated flow effect */ @keyframes erpScrollFlow { 0% { top: -100%; } 100% { top: 200%; } } /* ============================================ RESPONSIVE DESIGN ============================================ */ @media (max-width: 1024px) { .erp-module-card:hover { transform: translateY(-8px) scale(1.03) translateZ(0); } } @media (max-width: 768px) { .erp-module-card { padding: 24px; border-radius: 16px; } } @media (max-width: 480px) { .erp-module-card { padding: 18px; border-radius: 16px; gap: 10px; } } /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ @media (prefers-reduced-motion: reduce) { .erp-module-card { animation: none; } .erp-btn, .erp-module-card, .erp-hero-badge { transition-duration: 0.01ms !important; } .erp-btn:hover, .erp-module-card:hover { transform: none; } } /* ============================================ FOCUS STATES FOR ACCESSIBILITY ============================================ */ .erp-module-card:focus-visible { outline: 3px solid rgba(30, 77, 140, 0.5); outline-offset: 4px; } /* ============================================ HIGH CONTRAST MODE ============================================ */ @media (prefers-contrast: high) { .erp-module-card { border-width: 2px; border-color: #1e4d8c; } } /* ============================================ PRINT STYLES ============================================ */ /* ======================================== ERP PROBLEM SECTION ======================================== */ /* ===================================================== PART 15: ERP PROBLEM, MODULES & PROCESS SECTIONS Ultra-Polished with GPU Acceleration & Premium Effects ===================================================== */ /* ============================================ SECTION: ERP PROBLEM ============================================ */ /* Subtle background pattern */ @keyframes erpProblemBgFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(20px, 20px, 0) scale(1.02); } } /* ============================================ SECTION HEADER ============================================ */ @keyframes erpWarningPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2) rotate(10deg); } } @keyframes erpHighlightShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================ VISUAL COMPARISON GRID ============================================ */ /* ============================================ LEFT: SCATTERED SYSTEMS ============================================ */ /* Staggered float animation */ @keyframes erpScatteredFloatEnhanced { 0%, 100% { transform: translateY(0) rotate(0deg) translateZ(0); } 25% { transform: translateY(-6px) rotate(1deg) translateZ(0); } 50% { transform: translateY(-12px) rotate(2deg) translateZ(0); } 75% { transform: translateY(-4px) rotate(0.5deg) translateZ(0); } } /* ============================================ CENTER: VS DIVIDER ============================================ */ @keyframes erpVsPulseEnhanced { 0%, 100% { transform: scale(1) translateZ(0); box-shadow: var(--ds-elevation-3); } 50% { transform: scale(1.12) translateZ(0); box-shadow: var(--ds-elevation-3); } } @keyframes erpLineFlowEnhanced { from { transform: translateY(-60px); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.8; } to { transform: translateY(400px); opacity: 0; } } /* ============================================ RIGHT: UNIFIED SYSTEM ============================================ */ @keyframes erpUnifiedRotateEnhanced { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================ PAIN POINTS GRID ============================================ */ /* ============================================ BOTTOM CTA ============================================ */ /* ============================================ SECTION: ERP MODULES ============================================ */ /* Decorative background elements */ @keyframes erpModuleOrbFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(30px, 30px, 0) scale(1.05); } } /* ============================================ MODULES SECTION HEADER ============================================ */ @keyframes erpBadgeFloatEnhanced { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-6px) translateZ(0); } } /* ============================================ MODULES GRID ============================================ */ /* ============================================ MODULE CARD (Enhanced from Hero) ============================================ */ .erp-module-card { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(30, 77, 140, 0.1); border-radius: 24px; padding: 45px 35px; position: relative; overflow: hidden; box-shadow: var(--ds-elevation-2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; transform: translateZ(0); will-change: transform, box-shadow, border-color; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease, border-color 0.4s ease; transform-style: preserve-3d; } /* Gradient overlay */ .erp-module-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(30, 77, 140, 0.03) 0%, rgba(198, 147, 10, 0.03) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; border-radius: 24px; } .erp-module-card:hover { transform: translateY(-12px) translateZ(0); border-color: rgba(30, 77, 140, 0.35); box-shadow: var(--ds-elevation-4), 0 0 0 1px rgba(30, 77, 140, 0.1) inset; } .erp-module-card:hover::before { opacity: 1; } /* Module Icon */ .erp-module-card:hover .erp-module-icon-wrapper { transform: scale(1.12) rotate(8deg) translateZ(0); background: linear-gradient(135deg, rgba(30, 77, 140, 0.18) 0%, rgba(198, 147, 10, 0.18) 100%); } .erp-module-card:hover .erp-module-icon { transform: scale(1.1); } .erp-module-card:hover .erp-module-glow { opacity: 1; animation: erpGlowPulseEnhanced 2.5s ease-in-out infinite; } @keyframes erpGlowPulseEnhanced { 0%, 100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.3); opacity: 0.6; } } /* Module Name */ .erp-module-card:hover .erp-module-name { color: #1e4d8c; } /* Module Description */ /* ============================================ MODULE FEATURES ============================================ */ .erp-module-card:hover .erp-module-feature { color: #2d3748; transform: translateX(6px) translateZ(0); } .erp-module-card:hover .erp-feature-check { transform: scale(1.15); } /* ============================================ TECH BADGES ============================================ */ .erp-module-card:hover .erp-tech-badge { background: linear-gradient(135deg, rgba(30, 77, 140, 0.15) 0%, rgba(198, 147, 10, 0.15) 100%); border-color: rgba(30, 77, 140, 0.4); transform: scale(1.05) translateZ(0); } /* ============================================ MODULES NOTE ============================================ */ @keyframes erpNoteBounceEnhanced { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-4px) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(0deg); } 75% { transform: translateY(-4px) rotate(3deg); } } /* ============================================ CARD VISIBILITY ANIMATION ============================================ */ .erp-module-card { opacity: 0; transform: translateY(30px) translateZ(0); } .erp-module-card.erp-card-visible { animation: erpCardAppearEnhanced 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes erpCardAppearEnhanced { from { opacity: 0; transform: translateY(35px) scale(0.95) translateZ(0); } to { opacity: 1; transform: translateY(0) scale(1) translateZ(0); } } /* Stagger delays */ .erp-module-card:nth-child(1) { animation-delay: 0s; } .erp-module-card:nth-child(2) { animation-delay: 0.12s; } .erp-module-card:nth-child(3) { animation-delay: 0.24s; } .erp-module-card:nth-child(4) { animation-delay: 0.36s; } .erp-module-card:nth-child(5) { animation-delay: 0.48s; } /* ============================================ SECTION: ERP PROCESS ============================================ */ /* Decorative background gradient */ /* ============================================ PROCESS SECTION HEADER ============================================ */ @keyframes erpRotateBadgeEnhanced { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================ TIMELINE STRUCTURE ============================================ */ /* Central Vertical Line */ /* Animated Progress Line */ @keyframes erpProgressFillEnhanced { to { height: 100%; } } /* ============================================ PROCESS STEPS ============================================ */ .erp-process-step { display: grid; grid-template-columns: 1fr auto 1fr; gap: 45px; align-items: center; margin-bottom: 85px; opacity: 0; transform: translateY(30px) translateZ(0); } .erp-process-step:last-child { margin-bottom: 0; } .erp-process-step.erp-step-visible { animation: erpStepAppearEnhanced 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes erpStepAppearEnhanced { from { opacity: 0; transform: translateY(35px) scale(0.97) translateZ(0); } to { opacity: 1; transform: translateY(0) scale(1) translateZ(0); } } /* Left-aligned steps (odd) */ .erp-process-step:not(.erp-step-reverse) { grid-template-areas: "content number empty"; } .erp-process-step:not(.erp-step-reverse) .erp-step-content { grid-area: content; text-align: right; } .erp-process-step:not(.erp-step-reverse) .erp-step-number { grid-area: number; } /* Right-aligned steps (even) */ .erp-step-reverse { grid-template-areas: "empty number content"; } .erp-step-reverse .erp-step-content { grid-area: content; text-align: left; } .erp-step-reverse .erp-step-number { grid-area: number; } /* ============================================ STEP NUMBER CIRCLE ============================================ */ /* Multiple rings */ @keyframes erpRingPulseEnhanced { 0% { transform: scale(1); opacity: 0.8; } 50% { opacity: 0.4; } 100% { transform: scale(1.6); opacity: 0; } } .erp-process-step:hover .erp-step-number { transform: scale(1.12) rotate(10deg) translateZ(0); box-shadow: var(--ds-elevation-3); } /* ============================================ STEP CONTENT ============================================ */ /* Gradient overlay */ .erp-process-step:hover .erp-step-content { transform: translateY(-8px) translateZ(0); border-color: rgba(30, 77, 140, 0.3); box-shadow: var(--ds-elevation-4); } .erp-process-step:hover .erp-step-content::before { opacity: 1; } /* Step Icon */ .erp-process-step:hover .erp-step-icon { transform: scale(1.2) rotate(10deg); } /* Step Title */ .erp-process-step:hover .erp-step-title { color: #1e4d8c; } /* Step Description */ /* ============================================ STEP DETAILS (Mini Badges) ============================================ */ .erp-step-reverse .erp-step-details { justify-content: flex-start; } .erp-process-step:not(.erp-step-reverse) .erp-step-details { justify-content: flex-end; } /* ============================================ JS-TRIGGERED ANIMATIONS ============================================ */ /* Scroll-in animation */ .erp-animate-in { animation: erpFadeSlideUpEnhanced 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes erpFadeSlideUpEnhanced { from { opacity: 0; transform: translateY(45px) scale(0.97) translateZ(0); } to { opacity: 1; transform: translateY(0) scale(1) translateZ(0); } } /* ============================================ RESPONSIVE DESIGN - ERP PROBLEM ============================================ */ @media (max-width: 968px) { @keyframes erpLineFlowHorizontalEnhanced { from { transform: translateX(-60px); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.8; } to { transform: translateX(calc(100% + 60px)); opacity: 0; } } } /* ============================================ RESPONSIVE DESIGN - ERP MODULES ============================================ */ @media (max-width: 768px) { .erp-module-card { padding: 35px 28px; } .erp-module-card:hover { transform: translateY(-8px) translateZ(0); } } @media (max-width: 480px) { .erp-module-card { padding: 28px 22px; } } /* ============================================ RESPONSIVE DESIGN - ERP PROCESS ============================================ */ @media (max-width: 968px) { .erp-process-step { grid-template-columns: 1fr; gap: 25px; text-align: center; } .erp-process-step:not(.erp-step-reverse), .erp-step-reverse { grid-template-areas: "number" "content"; } .erp-process-step:not(.erp-step-reverse) .erp-step-content, .erp-step-reverse .erp-step-content { text-align: center; } } @media (max-width: 480px) { .erp-process-step { margin-bottom: 50px; } } /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ @media (prefers-reduced-motion: reduce) { .erp-module-card, .erp-process-step { opacity: 1; transform: none; animation: none; } .erp-scattered-systems, .erp-unified-system, .erp-pain-card, .erp-module-card, .erp-step-content, .erp-step-number, .erp-problem-cta-btn { transition-duration: 0.01ms !important; } .erp-scattered-systems:hover, .erp-unified-system:hover, .erp-pain-card:hover, .erp-module-card:hover, .erp-step-content:hover { transform: none; } } /* ============================================ FOCUS STATES FOR ACCESSIBILITY ============================================ */ .erp-scattered-item:focus-visible, .erp-pain-card:focus-visible, .erp-module-card:focus-visible, .erp-step-content:focus-visible { outline: 3px solid rgba(30, 77, 140, 0.5); outline-offset: 4px; } /* ============================================ PRINT STYLES ============================================ */ @media print { .erp-scattered-item, .erp-unified-box, .erp-pain-card, .erp-module-card, .erp-step-content { box-shadow: none !important; border: 1px solid #e2e8f0 !important; } } /* ===================================================== PART 16: ERP PROCESS SUMMARY, DIFFERENTIATORS & INDUSTRIES Ultra-Polished with GPU Acceleration & Premium Effects ===================================================== */ /* ============================================ SECTION: ERP PROCESS SUMMARY ============================================ */ @keyframes summaryShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* SVG Connectors */ .erp-connectors-svg line { transition: stroke 0.4s ease, stroke-width 0.3s ease; } .erp-process-step:hover ~ .erp-connectors-svg line { stroke: rgba(30, 77, 140, 0.6); stroke-width: 3; } /* ============================================ SECTION: ERP DIFFERENTIATORS ============================================ */ /* Decorative background elements */ @keyframes diffOrbFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(30px, 30px, 0) scale(1.05); } } /* ============================================ DIFFERENTIATORS HEADER ============================================ */ @keyframes starTwinkleEnhanced { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 25% { transform: scale(1.15) rotate(90deg); opacity: 0.9; } 50% { transform: scale(1.25) rotate(180deg); opacity: 0.85; } 75% { transform: scale(1.15) rotate(270deg); opacity: 0.9; } } @keyframes diffHighlightShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================ DIFFERENTIATORS GRID ============================================ */ /* ============================================ DIFFERENTIATOR CARD ============================================ */ .erp-diff-card { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(30, 77, 140, 0.1); border-radius: 24px; overflow: hidden; position: relative; box-shadow: var(--ds-elevation-2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; transform: translateZ(0); will-change: transform, box-shadow, border-color; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease, border-color 0.4s ease; transform-style: preserve-3d; } /* Gradient overlay */ .erp-diff-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(30, 77, 140, 0.02) 0%, rgba(198, 147, 10, 0.02) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 1; } .erp-diff-card:hover { transform: translateY(-12px) translateZ(0); border-color: rgba(30, 77, 140, 0.35); box-shadow: var(--ds-elevation-4); } .erp-diff-card:hover::before { opacity: 1; } /* ============================================ CARD VISUAL (TOP SECTION) ============================================ */ /* Animated Background Pattern */ .erp-diff-card:hover .erp-diff-pattern { opacity: 1; } @keyframes patternMoveEnhanced { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(20px, 20px, 0); } } /* Icon Wrapper */ .erp-diff-card:hover .erp-diff-icon-wrapper { transform: scale(1.18) rotate(12deg) translateZ(0); box-shadow: var(--ds-elevation-4); } .erp-diff-card:hover .erp-diff-icon { transform: scale(1.1); } /* ============================================ CARD CONTENT ============================================ */ .erp-diff-card:hover .erp-diff-name { color: #1e4d8c; } /* Highlight Badge */ .erp-diff-card:hover .erp-diff-highlight-badge { background: linear-gradient(135deg, rgba(30, 77, 140, 0.18), rgba(198, 147, 10, 0.18)); border-color: rgba(30, 77, 140, 0.45); transform: translateX(6px) translateZ(0); } /* ============================================ CARD VISIBILITY ANIMATION ============================================ */ .erp-diff-card { opacity: 0; transform: translateY(35px) translateZ(0); } .erp-diff-card.erp-diff-visible { animation: diffCardAppear 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes diffCardAppear { from { opacity: 0; transform: translateY(40px) scale(0.95) translateZ(0); } to { opacity: 1; transform: translateY(0) scale(1) translateZ(0); } } /* Stagger delays */ .erp-diff-card:nth-child(1) { animation-delay: 0s; } .erp-diff-card:nth-child(2) { animation-delay: 0.12s; } .erp-diff-card:nth-child(3) { animation-delay: 0.24s; } .erp-diff-card:nth-child(4) { animation-delay: 0.36s; } .erp-diff-card:nth-child(5) { animation-delay: 0.48s; } .erp-diff-card:nth-child(6) { animation-delay: 0.6s; } /* ============================================ COMPARISON BOX ============================================ */ /* Background pattern */ /* Comparison Sides */ /* Comparison Lists */ /* VS Divider */ @keyframes vsPulseEnhanced { 0%, 100% { transform: scale(1) translateZ(0); } 50% { transform: scale(1.12) translateZ(0); } } /* ============================================ SECTION: ERP INDUSTRIES ============================================ */ /* Decorative background elements */ @keyframes industryOrbFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(25px, 25px, 0) scale(1.05); } } /* ============================================ SECTION HEADER ============================================ */ /* Shimmer effect */ /* Animated underline */ /* ============================================ INDUSTRIES GRID ============================================ */ /* Staggered floating */ @keyframes industryFloat { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-10px) translateZ(0); } } /* Gradient border effect */ /* Animated background gradient on hover */ /* Icon glow effect */ /* ============================================ RESPONSIVE DESIGN - PROCESS SUMMARY ============================================ */ /* ============================================ RESPONSIVE DESIGN - DIFFERENTIATORS ============================================ */ @media (max-width: 768px) { .erp-diff-card:hover { transform: translateY(-8px) translateZ(0); } } /* ============================================ RESPONSIVE DESIGN - INDUSTRIES ============================================ */ /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ @media (prefers-reduced-motion: reduce) { .erp-diff-card { opacity: 1; transform: none; animation: none; } .erp-summary-card, .erp-diff-card, .erp-industry-card, .erp-diff-icon-wrapper, .erp-industry-icon, .erp-diff-highlight-badge { transition-duration: 0.01ms !important; } .erp-summary-card:hover, .erp-diff-card:hover, .erp-industry-card:hover { transform: none; } } /* ============================================ FOCUS STATES FOR ACCESSIBILITY ============================================ */ .erp-summary-card:focus-visible, .erp-diff-card:focus-visible, .erp-industry-card:focus-visible { outline: 3px solid rgba(30, 77, 140, 0.5); outline-offset: 4px; } /* ============================================ PRINT STYLES ============================================ */ @media print { .erp-diff-card, .erp-industry-card, .erp-summary-card, .erp-comparison-box { box-shadow: none !important; border: 1px solid #e2e8f0 !important; } } /* ===== ERP FAQ Section ===== */ .erp-faq-item.active { border-color: #1e4d8c; box-shadow: var(--ds-elevation-3); } .erp-faq-item.active .erp-faq-icon { background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%); transform: scale(1.1); } .erp-faq-item.active .erp-faq-icon svg { color: #ffffff; } .erp-faq-item.active .erp-faq-question-text { color: #1e4d8c; } .erp-faq-item.active .erp-faq-toggle { background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%); transform: rotate(180deg); } .erp-faq-item.active .erp-faq-toggle svg { color: #ffffff; } .erp-faq-item.active .erp-faq-answer { max-height: 1000px; opacity: 1; padding: 0 30px 28px 94px; } /* Responsive */ @media (max-width: 768px) { .erp-faq-item.active .erp-faq-answer { padding: 0 20px 22px 20px; } } /* ===== ERP Waitlist Section ===== */ /* Animated background pattern */ @keyframes bgFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -30px); } } /* Left Side - Content */ /* Right Side - Form */ /* Success Message */ @keyframes successPop { 0% { transform: scale(0); } 100% { transform: scale(1); } } /* Responsive */ /* ============================================ Mobile App Development - Hero Section Complete CSS with all fixes ============================================ */ /* ===================================================== PART 17: MOBILE APP HERO & WHY MOBILE APPS Ultra-Polished with GPU Acceleration & Premium Effects ===================================================== */ /* ============================================ SECTION: MOBILE APP HERO ============================================ */ /* Section Label */ /* Shimmer effect on lines */ @keyframes lineShimmer { 0%, 100% { left: -100%; } 50% { left: 100%; } } /* Content */ @keyframes titleShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Stats */ /* CTA Buttons */ .mob-hero__btn--primary { background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%); color: #ffffff; box-shadow: var(--ds-elevation-3); } .mob-hero__btn--primary:hover { transform: translateY(-4px) scale(1.02) translateZ(0); box-shadow: var(--ds-elevation-3); } .mob-hero__btn--primary:active { transform: translateY(-2px) scale(1.01) translateZ(0); } .mob-hero__btn--primary:hover svg { transform: translateX(5px); } .mob-hero__btn--secondary { background: rgba(255, 255, 255, 0.9); color: #1e4d8c; border: 2px solid rgba(30, 77, 140, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .mob-hero__btn--secondary:hover { background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%); color: #ffffff; border-color: transparent; transform: translateY(-4px) scale(1.02) translateZ(0); box-shadow: var(--ds-elevation-3); } .mob-hero__btn--secondary:hover svg { transform: scale(1.15) rotate(10deg); } /* ============================================ VISUAL SECTION - PHONE MOCKUP ============================================ */ .mob-hero__phone--front { top: 50%; left: 50%; transform: translate(-50%, -50%) rotateY(-15deg) translateZ(0); z-index: 2; animation: floatPhoneEnhanced 6s ease-in-out infinite; } .mob-hero__phone--front:hover { transform: translate(-50%, -50%) rotateY(-5deg) scale(1.05) translateZ(0); animation-play-state: paused; } /* App Preview */ @keyframes pulseCard { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } /* ============================================ FLOATING BADGES ============================================ */ /* Individual badge positions and colors */ /* ============================================ BACKGROUND DECORATION ============================================ */ /* ============================================ ANIMATIONS ============================================ */ @keyframes mobFadeInUp { from { opacity: 0; transform: translateY(35px) scale(0.97) translateZ(0); } to { opacity: 1; transform: translateY(0) scale(1) translateZ(0); } } @keyframes mobFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mobFadeInDown { from { opacity: 0; transform: translateX(-50%) translateY(-25px) translateZ(0); } to { opacity: 1; transform: translateX(-50%) translateY(0) translateZ(0); } } @keyframes floatPhoneEnhanced { 0%, 100% { transform: translate(-50%, -50%) rotateY(-15deg) translateY(0) translateZ(0); } 25% { transform: translate(-50%, -50%) rotateY(-15deg) translateY(-12px) translateZ(0); } 50% { transform: translate(-50%, -50%) rotateY(-15deg) translateY(-22px) translateZ(0); } 75% { transform: translate(-50%, -50%) rotateY(-15deg) translateY(-8px) translateZ(0); } } @keyframes floatBadgeEnhanced { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-18px) translateZ(0); } } @keyframes floatCircle { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(35px, -35px, 0) scale(1.1); } 66% { transform: translate3d(-25px, 25px, 0) scale(0.9); } } @keyframes slideContentEnhanced { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-12px) translateZ(0); } } /* ============================================ SECTION: WHY MOBILE APPS ============================================ */ /* Section Header */ /* Stats Grid */ /* Benefits Grid */ /* CTA Box */ /* Decorative Elements */ /* ============================================ RESPONSIVE DESIGN - MOBILE HERO ============================================ */ /* ============================================ RESPONSIVE DESIGN - WHY MOBILE APPS ============================================ */ /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ /* ============================================ FOCUS STATES FOR ACCESSIBILITY ============================================ */ .mob-hero__btn--primary:focus-visible { outline-color: rgba(255, 255, 255, 0.8); } /* ============================================ PRINT STYLES ============================================ */ /* ============================================ Our Approach Section ============================================ */ /* Section Header */ /* Framework Comparison */ /* Framework Header */ /* Features List */ /* Framework Stats */ /* Brands */ /* VS Badge */ /* Recommendation Section */ /* Expertise Section */ /* Decorative Elements */ /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } } @keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: var(--ds-elevation-3); } 50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: var(--ds-elevation-3); } } /* Responsive Design */ /* ============================================ App Types We Build Section ============================================ */ /* Section Header */ /* App Types Grid */ /* App Type Card */ /* Card Icon */ /* Card Content */ /* Card Features */ /* Card Badge */ /* CTA Section */ /* Background Decoration */ /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ /* ============================================ Development Process Section - IMPROVED VERSION Better Text Visibility & Glass Effect ============================================ */ /* Section Header */ /* Timeline */ /* Step */ /* Step Number - More Prominent */ /* Step Line - More Visible */ /* Step Content - Enhanced Glass Effect */ /* Step Icon - More Vibrant */ /* Step Title - Darker & Bolder */ /* Step Description - Better Contrast */ /* Step List - Improved Visibility */ /* Step Duration - Enhanced */ /* Process Highlights - Better Contrast */ /* Background Decoration */ /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ /* ============================================ Technology Stack Section Enhanced Visibility & Glass Effect ============================================ */ /* Section Header */ /* Categories */ /* Category */ .mob-tech__category { animation: fadeInUp 0.8s ease-out; animation-fill-mode: both; } .mob-tech__category:nth-child(1) { animation-delay: 0.1s; } .mob-tech__category:nth-child(2) { animation-delay: 0.2s; } .mob-tech__category:nth-child(3) { animation-delay: 0.3s; } .mob-tech__category:nth-child(4) { animation-delay: 0.4s; } .mob-tech__category:nth-child(5) { animation-delay: 0.5s; } /* Category Header */ /* Tech Grid */ /* Tech Card */ /* Tech Icon */ /* Tech Icon Colors */ /* Tech Name */ /* Tech Description */ /* Tech Stats */ /* Background Decoration */ /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } } /* Responsive Design */ /* ============================================ SECTION 7: KEY FEATURES WE INTEGRATE ============================================ */ @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, 50px) scale(1.1); } } /* Header Styles */ /* Features Grid */ /* Feature Card */ /* Visible State (animated in by JS) */ .mob-features__card.is-visible { opacity: 1; transform: translateY(0); } /* Icon */ /* Card Title */ /* Card Description */ /* Tech Tags */ /* Staggered Animation */ /* Fade In Up Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ /* ============================================ SECTION 8: FREQUENTLY ASKED QUESTIONS ============================================ */ /* Header Styles */ /* FAQ Grid */ /* FAQ Item */ .mob-faq__item.active { border-color: #1e4d8c; box-shadow: var(--ds-elevation-3); } /* Question Button */ .mob-faq__item.active .mob-faq__icon { transform: rotate(180deg); } /* Answer Content */ .mob-faq__item.active .mob-faq__answer { max-height: 3000px; padding: 0 30px 30px 30px; } /* Table Styles (for comparison) */ /* CTA Section at Bottom */ /* Fade In Up Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 768px) { .mob-faq__item.active .mob-faq__answer { padding: 0 20px 25px 20px; } } /* ======================================== MOBILE CONTACT FORM - COMPLETE CSS All classes prefixed with "mob-contact-" NO CONFLICTS with existing styles ======================================== */ /* ==================== MODAL CONTAINER ==================== */ .mob-contact-modal.active { display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; } /* Overlay */ /* ==================== FORM CONTAINER ==================== */ @keyframes mobSlideUp { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Scrollbar Styling */ /* ==================== CLOSE BUTTON ==================== */ /* ==================== CONTENT ==================== */ /* ==================== HEADER ==================== */ /* ==================== FORM ==================== */ @keyframes mobFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Form Row - 2 Column Layout */ /* Form Field */ /* Label */ /* Input, Select, Textarea */ /* Select Dropdown Arrow */ /* Focus State */ /* Word Counter */ .mob-contact-counter.warning { color: #f59e0b; } .mob-contact-counter.error { color: #ef4444; } /* ==================== CHECKBOX ==================== */ /* ==================== BUTTONS ==================== */ /* WhatsApp Button */ /* Submit Button */ /* Loading State */ .mob-contact-btn.loading { pointer-events: none; opacity: 0.7; } .mob-contact-btn.loading::after { content: ''; position: absolute; width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: mobSpin 0.8s linear infinite; } @keyframes mobSpin { to { transform: rotate(360deg); } } /* ==================== SECURITY NOTE ==================== */ /* ==================== SUCCESS MESSAGE ==================== */ .mob-contact-success.show { display: block; } @keyframes mobScaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes mobPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* ==================== RESPONSIVE ==================== */ /* ==================== ACCESSIBILITY ==================== */ /* Reduce motion for users who prefer it */ /* ========================================== ABOUT US - HERO SECTION CSS Visually Stunning & Animated ========================================== */ /* Hero Container */ /* ==================== BACKGROUND ==================== */ /* Animated Grid */ @keyframes gridMove { 0% { transform: translate(0, 0); } 100% { transform: translate(50px, 50px); } } /* Floating Particles */ @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(50px, -50px) scale(1.1); } 66% { transform: translate(-50px, 50px) scale(0.9); } } /* ==================== CONTENT ==================== */ /* Label */ /* Main Title */ /* Animated Words */ @keyframes wordAppear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Subtitle */ @keyframes lineExpand { to { transform: scaleX(1); } } /* ==================== CTA BUTTONS ==================== */ /* ==================== SCROLL INDICATOR ==================== */ @keyframes scrollDot { 0%, 100% { top: 0; opacity: 1; } 50% { top: 40px; opacity: 0.3; } } /* ==================== DECORATIVE CIRCLES ==================== */ @keyframes circleFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-30px, 30px) rotate(240deg); } } /* ==================== ANIMATIONS ==================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ==================== RESPONSIVE ==================== */ /* ========================================== ABOUT US - MISSION STATEMENT CSS Clean, Elegant, Animated ========================================== */ /* Section Container */ /* ==================== CONTENT SIDE ==================== */ /* Section Label */ /* Main Title */ /* Text Content */ /* Key Points */ /* ==================== VISUAL SIDE ==================== */ /* Illustration Container */ /* Central Circle */ @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: var(--ds-elevation-4); } 50% { transform: scale(1.05); box-shadow: var(--ds-elevation-4); } } /* Orbiting Elements */ @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Connecting Lines */ /* Background Decorations */ @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -30px); } } /* ==================== ANIMATIONS ==================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ==================== RESPONSIVE ==================== */ /* ========================================== ABOUT US - WHAT WE DO (SERVICES) CSS Interactive Flip Cards ========================================== */ /* Section Container */ /* ==================== HEADER ==================== */ /* ==================== SERVICES GRID ==================== */ /* ==================== SERVICE CARD ==================== */ /* Card Front & Back Common Styles */ /* Card Front */ /* Card Back */ /* ==================== TAGLINE CARD ==================== */ /* ==================== RESPONSIVE ==================== */ /* ==================== ANIMATIONS ==================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Stagger animation for cards */ /* ========================================== ABOUT US - PHILOSOPHY SECTION CSS Minimalist, Powerful, Elegant ========================================== */ /* Section Container */ /* ==================== MAIN CONTENT ==================== */ /* ==================== LARGE QUOTE ==================== */ /* ==================== PHILOSOPHY GRID ==================== */ /* Philosophy Item */ /* ==================== PROMISE BOX ==================== */ /* ==================== SIDE VISUAL ==================== */ /* Animated Lines */ @keyframes lineGrow { 0%, 100% { transform: scaleY(0.8); opacity: 0.2; } 50% { transform: scaleY(1); opacity: 0.5; } } /* Central Circle */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ==================== ANIMATIONS ==================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ==================== RESPONSIVE ==================== */ /* ========================================== ABOUT US - SORIVA SHOWCASE CSS LEGENDARY 100/10 VERSION 🔥 PERFECT BALANCE | STUNNING | READABLE ========================================== */ /* Section Container */ /* Layered Background Effect */ /* ==================== ANIMATED BACKGROUND ==================== */ @keyframes gridFlow { 0% { transform: translate(0, 0); } 100% { transform: translate(50px, 50px); } } /* ==================== CONTAINER ==================== */ /* ==================== HEADER ==================== */ @keyframes ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.5); opacity: 0; } } /* ==================== SORIVA LOGO ==================== */ @keyframes pulseGlow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.8; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.5) rotate(-180deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ==================== SOUL STATEMENT ==================== */ @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } @keyframes float { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } } /* ==================== PRODUCTS GRID ==================== */ /* Product Card */ /* ==================== POWERS SECTION ==================== */ /* ==================== VISION STATEMENT ==================== */ /* ==================== BOTTOM STATEMENT ==================== */ /* ==================== DECORATIONS ==================== */ /* ==================== ANIMATIONS ==================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; } } /* ==================== RESPONSIVE ==================== */ /* Smooth Scroll Behavior */ html { scroll-behavior: smooth; } /* Selection Styling */ ::selection { background: rgba(127, 163, 216, 0.3); color: white; } /* ========================================== ABOUT US - CULTURE & VALUES CSS LEGENDARY 100/10 VERSION 🔥 ========================================== */ /* Section Container */ /* ==================== HEADER ==================== */ /* ==================== CORE VALUES ==================== */ /* Value Card */ /* ==================== WORK ENVIRONMENT ==================== */ /* ==================== WHAT MAKES US DIFFERENT ==================== */ /* ==================== BOTTOM QUOTE ==================== */ /* ==================== ANIMATIONS ==================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ==================== RESPONSIVE ==================== */ /* ==================== HOVER EFFECTS ==================== */ /* ==================== PRINT STYLES ==================== */ /* ========================================== ABOUT US - CTA SECTION CSS LEGENDARY 100/10 - FOCUSED VERSION 🔥 ========================================== */ /* Section Container */ /* ==================== BACKGROUND ==================== */ /* ==================== CONTAINER ==================== */ /* ==================== MAIN CONTENT ==================== */ /* Badge */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } /* Title */ /* Description */ /* Primary Button */ /* Sub Text */ /* ==================== TRUST INDICATORS ==================== */ /* ==================== SECONDARY CTA - MEET SORIVA ==================== */ /* ==================== DECORATIONS ==================== */ /* ==================== ANIMATIONS ==================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; } } /* ==================== RESPONSIVE ==================== */ /* ============================================ CONTACT HERO SECTION ============================================ */ /* ===================================================== PART 18: CONTACT PAGE - HERO, QUICK CONNECT & FORM Ultra-Polished with GPU Acceleration & Premium Effects ===================================================== */ /* ============================================ SECTION: CONTACT HERO ============================================ */ .con-hero .container { max-width: 1250px; margin: 0 auto; padding: 0 20px; } /* Hero Text */ /* One inline-block per word. An inline-block is a line-break opportunity, so wrapping WORDS (not characters) is what stops the heading breaking mid-word; the characters inside still animate individually. */ .con-hero-word { display: inline-block; white-space: nowrap; line-height: inherit; } .con-hero-char { display: inline-block; opacity: 0; animation: conCharFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; line-height: inherit; } /* No JS: the heading is plain text in the markup and must stay visible. */ .con-hero-headline:not(:has(.con-hero-char)) { opacity: 1; } @keyframes conCharFadeIn { from { opacity: 0; transform: translateY(22px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* Fade In Up Animation */ @keyframes conFadeInUp { from { opacity: 0; transform: translateY(35px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Hero Visual */ @keyframes conGlowPulseEnhanced { 0%, 100% { transform: scale(1) rotate(0deg) translate3d(0, 0, 0); opacity: 0.5; } 25% { transform: scale(1.05) rotate(5deg) translate3d(10px, -10px, 0); opacity: 0.65; } 50% { transform: scale(1.12) rotate(12deg) translate3d(0, 0, 0); opacity: 0.8; } 75% { transform: scale(1.05) rotate(8deg) translate3d(-10px, 10px, 0); opacity: 0.65; } } /* Staggered animation for icon items */ @keyframes conIconAppear { from { opacity: 0; transform: translateY(20px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Background Gradient */ @keyframes conBgFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-30px, 30px, 0) scale(1.05); } } /* ============================================ SECTION: QUICK CONNECT - PREMIUM VERSION ============================================ */ /* Decorative Elements */ @keyframes conFloatSlow { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(55px, 55px, 0) scale(1.08); } } /* Header */ /* Badge */ @keyframes conBadgeFloat { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-8px) translateZ(0); } } @keyframes conGlowRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Title */ @keyframes conGradientShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Cards Grid */ /* Premium Card */ @keyframes conCardReveal { from { opacity: 0; transform: translateY(50px) scale(0.95) translateZ(0); } to { opacity: 1; transform: translateY(0) scale(1) translateZ(0); } } /* Card Background Gradient */ /* Shine Effect */ /* Featured Card */ /* Icon Wrapper */ @keyframes conIconPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1) translateZ(0); opacity: 0.3; } 50% { transform: translate(-50%, -50%) scale(1.25) translateZ(0); opacity: 0; } } /* Card Content */ /* Card Footer */ /* Hours */ /* ============================================ SECTION: CONTACT FORM ============================================ */ @keyframes conFormBgPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } } /* ============================================ LEFT SIDE - FORM ============================================ */ /* Form Groups */ /* Input Wrapper */ /* Input Styles */ /* Floating Label */ /* Textarea */ /* Select Dropdown */ /* Input Border Animation */ /* Error Message */ .con-form-group.con-error .con-error-message { opacity: 1; transform: translateY(0); } .con-form-group.con-error .con-input, .con-form-group.con-error .con-select { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); } /* Submit Button */ @keyframes conRocketFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(5deg); } } /* Success Message */ .con-success-message.active { display: flex; animation: conSlideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes conSlideDown { from { opacity: 0; transform: translateY(-25px) scale(0.95) translateZ(0); } to { opacity: 1; transform: translateY(0) scale(1) translateZ(0); } } /* ============================================ RESPONSIVE DESIGN - HERO ============================================ */ /* ============================================ RESPONSIVE DESIGN - QUICK CONNECT ============================================ */ /* ============================================ RESPONSIVE DESIGN - FORM ============================================ */ /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ @media (prefers-reduced-motion: reduce) { .con-hero-headline span, .con-hero-char, .con-hero-word, .con-hero-subtitle, .con-hero-tagline, .con-hero-visual, .con-fade-in-up, .con-qc-card, .con-qc-hours-wrapper { animation: none; opacity: 1; transform: none; } } /* ============================================ FOCUS STATES FOR ACCESSIBILITY ============================================ */ /* ============================================ PRINT STYLES ============================================ */ /* ============================================ RIGHT SIDE - TRUST BLOCK ============================================ */ /* ===================================================== PART 18B: CONTACT PAGE - TRUST, TEXTAREA, CTA & MAP Ultra-Polished with GPU Acceleration & Premium Effects ===================================================== */ /* ============================================ SECTION: TRUST CARD (SIDEBAR) ============================================ */ @keyframes conTrustGlowRotate { from { transform: rotate(0deg) translate3d(0, 0, 0); } to { transform: rotate(360deg) translate3d(0, 0, 0); } } /* Trust List */ @keyframes conFadeInLeft { from { opacity: 0; transform: translateX(-25px) scale(0.95) translateZ(0); } to { opacity: 1; transform: translateX(0) scale(1) translateZ(0); } } /* Trust Stats */ /* ============================================ TEXTAREA FOOTER & WORD COUNTER ============================================ */ /* Word Counter Container */ /* Word Count Number */ /* Warning state when approaching limit */ .con-word-counter.warning .con-word-count, .con-word-counter.warning strong { color: #f59e0b; } .con-word-counter.warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); } /* Error state when limit exceeded */ .con-word-counter.error .con-word-count, .con-word-counter.error strong { color: #ef4444; } .con-word-counter.error { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); } /* Error message takes available space */ /* When error is empty */ /* ============================================ SECTION: GLOBAL CTA ============================================ */ /* Decorative Elements */ @keyframes conCtaFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(60px, 60px, 0) scale(1.08); } } /* Content */ /* Badge */ @keyframes conCtaBadgeFloat { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-8px) translateZ(0); } } /* Title */ /* Description */ /* Buttons */ /* Stats */ /* ============================================ SECTION: CONTACT MAP ============================================ */ /* Animated Background Elements */ @keyframes conMapFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(55px, 55px, 0) scale(1.1); } } /* Header Section */ /* Map Container */ /* Google Map Canvas */ /* Map Controls */ /* Location Cards Container */ /* Location Card Base */ /* Primary Location Card */ /* Location Tags */ /* Contact Info Card */ /* Meeting Options Features */ /* ============================================ RESPONSIVE DESIGN - TRUST CARD ============================================ */ /* ============================================ RESPONSIVE DESIGN - GLOBAL CTA ============================================ */ /* ============================================ RESPONSIVE DESIGN - MAP SECTION ============================================ */ /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ /* ============================================ FOCUS STATES FOR ACCESSIBILITY ============================================ */ /* ============================================ PRINT STYLES ============================================ */ /* ======================================== LEAFLET CUSTOM MARKER STYLES ======================================== */ /* Custom Marker Pin */ @keyframes markerDrop { 0% { transform: translateY(-200px); opacity: 0; } 60% { transform: translateY(5px); opacity: 1; } 80% { transform: translateY(-2px); } 100% { transform: translateY(0); } } /* Bounce Animation */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-20px); } 50% { transform: translateY(0); } 75% { transform: translateY(-10px); } } /* Custom Popup Styles */ /* Leaflet Control Attribution - Hide or Style */ /* ======================================== PRIVACY POLICY PAGE STYLES - REDESIGNED Full-Width Layout, Proper Spacing Brand-Aligned with RISENEX Blue-Gold Theme ======================================== */ /* ========================================== PRIVACY HERO SECTION ========================================== */ /* Decorative Background Blurs */ @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.1); } } /* Hero Content */ /* Badge */ /* Title */ /* Subtitle */ /* Intro */ /* Meta */ /* ========================================== PRIVACY CONTENT SECTION ========================================== */ /* ========================================== READING PROGRESS BAR ========================================== */ /* ========================================== PRIVACY SECTIONS ========================================== */ /* Section Header */ /* Section Content */ /* ========================================== SUBSECTIONS ========================================== */ /* ========================================== LISTS ========================================== */ /* ========================================== HIGHLIGHT BOX ========================================== */ /* ========================================== LINKS ========================================== */ /* ========================================== CONTACT SECTION ========================================== */ /* ========================================== BACK TO TOP BUTTON ========================================== */ .privacy-back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } /* ========================================== ANIMATIONS ========================================== */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ========================================== RESPONSIVE DESIGN ========================================== */ /* Large Screens */ /* Tablets */ /* Mobile */ /* Small Mobile */ /* ========================================== PRINT STYLES ========================================== */ /* ======================================== TERMS OF SERVICE PAGE STYLES Full-Width Layout, Proper Spacing Brand-Aligned with RISENEX Blue-Gold Theme ======================================== */ /* ========================================== TERMS HERO SECTION ========================================== */ /* Decorative Background Blurs */ @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.1); } } /* Hero Content */ /* Badge */ /* Title */ /* Subtitle */ /* Intro */ /* Meta */ /* ========================================== TERMS CONTENT SECTION ========================================== */ /* ========================================== READING PROGRESS BAR ========================================== */ /* ========================================== PRIVACY SECTIONS ========================================== */ /* Section Header */ /* Section Content */ /* ========================================== SUBSECTIONS ========================================== */ /* ========================================== LISTS ========================================== */ /* ========================================== HIGHLIGHT BOX ========================================== */ /* ========================================== WARNING BOX (For Terms of Service) ========================================== */ /* ========================================== CLOSING STATEMENT ========================================== */ /* ========================================== LINKS ========================================== */ /* ========================================== CONTACT SECTION ========================================== */ /* ========================================== BACK TO TOP BUTTON ========================================== */ .terms-back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } /* ========================================== ANIMATIONS ========================================== */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ========================================== RESPONSIVE DESIGN ========================================== */ /* Large Screens */ /* Tablets */ /* Mobile */ /* Small Mobile */ /* ========================================== PRINT STYLES ========================================== */ /* ======================================== COOKIE POLICY PAGE STYLES Full-Width Layout, Proper Spacing Brand-Aligned with RISENEX Blue-Gold Theme ======================================== */ /* ========================================== COOKIE HERO SECTION ========================================== */ /* Decorative Background Blurs */ @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.1); } } /* Hero Content */ /* Badge */ /* Title */ /* Subtitle */ /* Intro */ /* Meta */ /* ========================================== COOKIE CONTENT SECTION ========================================== */ /* ========================================== READING PROGRESS BAR ========================================== */ /* ========================================== PRIVACY SECTIONS ========================================== */ /* Section Header */ /* Section Content */ /* ========================================== SUBSECTIONS ========================================== */ /* ========================================== LISTS ========================================== */ /* ========================================== HIGHLIGHT BOX ========================================== */ /* ========================================== WARNING BOX (For Terms of Service) ========================================== */ /* ========================================== CLOSING STATEMENT ========================================== */ /* ========================================== LINKS ========================================== */ /* ========================================== CONTACT SECTION ========================================== */ /* ========================================== BACK TO TOP BUTTON ========================================== */ .cookie-back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } /* ========================================== ANIMATIONS ========================================== */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ========================================== RESPONSIVE DESIGN ========================================== */ /* Large Screens */ /* Tablets */ /* Mobile */ /* Small Mobile */ /* ========================================== PRINT STYLES ========================================== */ /* ========================================== COOKIE-SPECIFIC STYLES ========================================== */ /* Cookie Info Box */ /* Cookie Types */ /* External Link Box */ /* ========================================== MOBILE RESPONSIVE - NAVBAR FIX ========================================== */ @media (max-width: 1024px) { /* Show Hamburger */ .hamburger { display: flex !important; align-items: center; justify-content: center; } /* Hide Desktop Menu */ .nav-menu { display: none !important; } /* Hide Soriva Button (it's in mobile menu) */ .btn-soriva-wrapper { display: none !important; } /* Adjust nav-wrapper */ .nav-wrapper { justify-content: space-between; } } /* ============================================ SBD PAGE STYLES - PART 1 Smart Business Digitization Enterprise Grade CSS ============================================ */ /* -------------------------------------------- CSS CUSTOM PROPERTIES (VARIABLES) -------------------------------------------- */ /* -------------------------------------------- CONTAINER & UTILITIES -------------------------------------------- */ /* -------------------------------------------- SECTION HEADER (REUSABLE) -------------------------------------------- */ /* -------------------------------------------- SECTION 1: HERO -------------------------------------------- */ /* Hero Background */ /* Hero Container */ /* Hero Content */ /* CTA Buttons */ /* Trust Indicators */ /* Hero Visual */ /* Central Hub */ /* Orbiting Cards */ /* Connection Lines */ /* Scroll Indicator */ /* -------------------------------------------- SECTION 2: PROBLEM -------------------------------------------- */ /* VS Divider */ /* -------------------------------------------- SECTION 3: FEATURES -------------------------------------------- */ /* -------------------------------------------- KEYFRAME ANIMATIONS -------------------------------------------- */ @keyframes sbd-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } @keyframes sbd-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } @keyframes sbd-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes sbd-float { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-30px) translateX(15px); } 50% { transform: translateY(0) translateX(30px); } 75% { transform: translateY(30px) translateX(15px); } } @keyframes sbd-hub-pulse { 0%, 100% { box-shadow: var(--sbd-shadow-xl), 0 0 60px rgba(30, 77, 140, 0.3); } 50% { box-shadow: var(--sbd-shadow-xl), 0 0 80px rgba(30, 77, 140, 0.5); } } @keyframes sbd-ring-expand { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } } @keyframes sbd-orbit-float-y { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-18px); } } @keyframes sbd-orbit-float-x { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-18px); } } @keyframes sbd-dash-flow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -200; } } @keyframes sbd-scroll-bounce { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.4; } } /* -------------------------------------------- RESPONSIVE - PART 1 -------------------------------------------- */ /* ============================================ SBD CSS - PART 2 Process, Industries, Why Choose Us ============================================ */ /* -------------------------------------------- SECTION 4: PROCESS / HOW IT WORKS -------------------------------------------- */ /* Vertical Line */ /* Odd Steps - Content Left */ /* Even Steps - Content Right */ /* Step Number */ /* Step Content Card */ /* -------------------------------------------- SECTION 5: INDUSTRIES -------------------------------------------- */ /* -------------------------------------------- SECTION 6: WHY CHOOSE US -------------------------------------------- */ /* -------------------------------------------- RESPONSIVE - PART 2 -------------------------------------------- */ /* ============================================ SBD CSS - PART 3 Contact Form & FAQ FRESH DESIGN - NOT ERP REPLICA ============================================ */ /* -------------------------------------------- SECTION 7: CONTACT - FLOATING CARD DESIGN -------------------------------------------- */ /* Animated Mesh Background */ /* Left Content */ /* Benefits - Horizontal Pills */ /* Right Form */ /* Select Dropdown */ /* Submit Button */ .sbd-submit-text, .sbd-submit-icon { position: relative; z-index: 1; } .sbd-submit-icon { width: 20px; height: 20px; transition: transform var(--sbd-transition-base); } .sbd-form-submit:hover .sbd-submit-icon { transform: translateX(4px); } /* Privacy Note */ /* Success Message */ /* ============================================ SECTION 8: FAQ - PREMIUM REDESIGN Single Column with Decorative Numbers ============================================ */ /* Decorative Background Elements */ /* Individual FAQ Item */ /* Left Gradient Border Indicator */ .sbd-faq-item.active { border-color: rgba(30, 77, 140, 0.25); box-shadow: var(--ds-elevation-3); transform: translateX(6px); } .sbd-faq-item.active::before { background: var(--sbd-gradient-primary); width: 5px; } /* Question Button */ /* Decorative Number */ .sbd-faq-item:hover .sbd-faq-num, .sbd-faq-item.active .sbd-faq-num { background: var(--sbd-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transform: scale(1.1); } /* Question Text */ .sbd-faq-item:hover .sbd-faq-text, .sbd-faq-item.active .sbd-faq-text { color: var(--sbd-primary); } /* Toggle Icon - Plus/Minus Design */ /* Plus Icon using pseudo elements */ .sbd-faq-item.active .sbd-faq-toggle { background: var(--sbd-gradient-primary); transform: rotate(180deg); } .sbd-faq-item.active .sbd-faq-toggle::before, .sbd-faq-item.active .sbd-faq-toggle::after { background: #fff; } .sbd-faq-item.active .sbd-faq-toggle::after { transform: rotate(90deg); opacity: 0; } /* Hide original SVG toggle */ /* Remove original icon wrapper */ /* Answer Section */ .sbd-faq-item.active .sbd-faq-answer { max-height: 400px; } /* Decorative quote line in answer */ /* -------------------------------------------- FAQ RESPONSIVE -------------------------------------------- */ @media (max-width: 768px) { .sbd-faq-item:hover, .sbd-faq-item.active { transform: translateX(4px); } } @media (max-width: 480px) { .sbd-faq-item:hover, .sbd-faq-item.active { transform: translateX(0); } } /* ============================================ SOFTWARE DEVELOPMENT PAGE - CSS Risenex Global Prefix: swd- (Software Development) ============================================ */ /* --- Base Font --- */ body { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* --- CSS Variables Extension --- */ /* ========================================== HERO SECTION ========================================== */ /* Animated Mesh Background */ /* Floating Particles */ /* Morphing Blob */ /* Grid Pattern Overlay */ /* Hero Container */ /* Hero Content */ /* Premium Badge */ /* Hero Title */ /* Hero Subtitle */ /* CTA Buttons */ /* Trust Indicators */ /* ========================================== HERO VISUAL - 3D FLOATING CARDS ========================================== */ /* Central Code Window */ /* Floating Feature Cards */ /* Card Positions with Float Animation */ /* Glow Ring */ /* Scroll Indicator */ /* ========================================== HERO ANIMATIONS ========================================== */ @keyframes swd-mesh-shift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } @keyframes swd-particle-float { 0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.4; } 25% { transform: translateY(-30px) translateX(15px) scale(1.2); opacity: 0.7; } 50% { transform: translateY(-10px) translateX(-10px) scale(0.8); opacity: 0.5; } 75% { transform: translateY(-40px) translateX(20px) scale(1.1); opacity: 0.6; } } @keyframes swd-blob-morph { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translateY(-50%) rotate(0deg); } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translateY(-50%) rotate(10deg); } } @keyframes swd-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } @keyframes swd-gradient-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes swd-float-1 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(2deg); } } @keyframes swd-float-2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(-2deg); } } @keyframes swd-float-3 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1deg); } } @keyframes swd-float-4 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(-1deg); } } @keyframes swd-ring-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.3; } } @keyframes swd-scroll-bounce { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.4; } } /* ========================================== SECTION 2: WHO THIS IS FOR - LIGHT THEME ========================================== */ /* Section Header - Light Theme */ @keyframes swd-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } /* Audience Grid */ /* Audience Card - Light Theme */ /* Glow Effect */ /* Featured Card */ /* Card Content - Light Theme */ /* ========================================== SECTION 3: SERVICES ========================================== */ /* Light Theme Header */ /* Services Grid */ /* Service Card */ /* Service Header */ /* Service Content */ /* Service Tags */ /* ========================================== SECTION 4: HOW WE WORK - PROCESS ========================================== */ /* Process Timeline Container */ /* Connecting Line */ .swd-process-timeline.animated .swd-line-progress { transform: scaleY(1); } /* Process Step */ /* Step Marker */ @keyframes swd-marker-pulse-anim { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } /* Step Content */ /* ========================================== SECTION 5: WHY RISENEX - LIGHT THEME ========================================== */ /* Light Theme Header for Why Section */ /* Why Grid */ /* Why Card - Light Theme */ /* Animated Border */ @keyframes swd-border-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Icon - Light Theme */ /* Content - Light Theme */ /* ========================================== SECTION 6: USE CASES ========================================== */ /* Light Theme Header */ /* Use Cases Grid */ /* Use Case Card */ /* ========================================== SECTION 7: NOT FOR EVERYONE ========================================== */ /* ========================================== SECTION 8: CTA / CONTACT ========================================== */ /* CTA Content */ /* CTA Form */ /* ========================================== SECTION 9: FAQ ========================================== */ /* Light Theme Header */ /* FAQ Container */ /* FAQ Item */ .swd-faq-item.active { border-color: rgba(30, 77, 140, 0.25); box-shadow: var(--ds-elevation-3); transform: translateX(6px); } .swd-faq-item.active::before { background: linear-gradient(180deg, #1e4d8c, #c6930a); width: 5px; } /* Question Button */ .swd-faq-item:hover .swd-faq-num, .swd-faq-item.active .swd-faq-num { background: linear-gradient(135deg, #1e4d8c, #c6930a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transform: scale(1.1); } .swd-faq-item:hover .swd-faq-text, .swd-faq-item.active .swd-faq-text { color: #1e4d8c; } /* Toggle Icon */ .swd-faq-item.active .swd-faq-toggle { background: linear-gradient(135deg, #1e4d8c, #c6930a); transform: rotate(180deg); } .swd-faq-item.active .swd-faq-toggle::before, .swd-faq-item.active .swd-faq-toggle::after { background: #fff; } .swd-faq-item.active .swd-faq-toggle::after { transform: rotate(90deg); opacity: 0; } /* Answer */ .swd-faq-item.active .swd-faq-answer { max-height: 400px; } /* ========================================== RESPONSIVE STYLES ========================================== */ /* Hero Responsive */ @media (max-width: 480px) { .swd-faq-item:hover, .swd-faq-item.active { transform: translateX(0); } } /** * ======================================== * RISENEX TOOLS PAGE - DEDICATED CSS * Prefix: rt- (Risenex Tools) * Version: 1.0 * NO CONFLICTS with main styles.css * ======================================== */ /* ========================================== RT - CSS VARIABLES (Tools Specific) ========================================== */ /* ========================================== RT - HERO SECTION ========================================== */ @keyframes rt-float-slow { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -30px) scale(1.1); } } /* USP Banner */ /* ========================================== RT - TOOLS SECTION ========================================== */ /* ========================================== RT - TOOL CARD ========================================== */ /* ========================================== RT - BUTTONS ========================================== */ /* ========================================== RT - COMPARISON SECTION (REFINED CSS) Premium, Visual, Impactful Design ========================================== */ /* Subtle background pattern */ /* ========================================== Section Header ========================================== */ /* ========================================== Comparison Grid (Side by Side) ========================================== */ /* ========================================== Comparison Box (Common Styles) ========================================== */ /* Others Box (Left) */ /* Risenex Box (Right) */ /* ========================================== Box Header ========================================== */ /* ========================================== Price Block ========================================== */ /* ========================================== Features List ========================================== */ /* ========================================== Total Price ========================================== */ /* ========================================== VS Divider ========================================== */ /* ========================================== Savings Badge ========================================== */ @keyframes rt-shine { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } } /* ========================================== Bottom Stats ========================================== */ /* ========================================== Trust Note ========================================== */ /* ========================================== Responsive ========================================== */ /* ========================================== RT - CTA SECTION ========================================== */ /* Total Breakdown Text */ /* ========================================== RT - RESPONSIVE ========================================== */ /* ========================================== BILLFLOW SECTION — bf- prefix ========================================== */ /* Cards Grid */ /* Base Card */ /* Business Card — Cyan accent */ /* CA Card — Purple accent */ /* Card Tag */ /* Card Icon */ /* Card Title */ /* Tagline */ /* Description */ /* Features List */ /* CTA Buttons */ /* ============================================================ APPLE-EXACT MEGA NAV (v2) — navbar background expands; dropdown flows inside ============================================================ */ /* Navbar is the anchor. When dropdown open, it gets solid white bg that visually extends down behind the dropdown (one continuous surface). */ .navbar.dropdown-open { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; transform: translateY(0) !important; } /* The has-dropdown li must be static so the absolute dropdown anchors to the NAVBAR, not the li */ .nav-item.has-dropdown { position: static; } /* Mega dropdown: absolute, anchored to the navbar's full width, drops below the 72px bar */ .mega-dropdown { position: fixed; top: 88px; left: 0; right: 0; width: 100vw; transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none !important; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.4s; z-index: 1190; /* just below navbar bar (1200) */ padding-top: 0; } /* hover triggers removed — click-driven, see .mega-dropdown.active above */ .mega-dropdown.active { opacity: 1; visibility: visible; pointer-events: auto !important; transform: translateY(0); } /* White content panel: full width of navbar, seamless with the white navbar above it */ .mega-dropdown-content { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0 0 24px 24px; box-shadow: var(--ds-elevation-4); padding: 40px max(48px, calc((100vw - 1280px) / 2)) 56px; display: grid; grid-template-columns: 300px 1fr 1.3fr; gap: var(--space-10); min-height: 440px; position: relative; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.05); } .mega-dropdown-content::before { content: none; } /* Logo: bigger, no grey box */ .mega-logo-section { display: flex; align-items: center; justify-content: center; padding: var(--space-6); border-radius: var(--radius-xl); background: transparent; } .mega-logo-section img { width: 340px; height: auto; } /* Keep the navbar container above the dropdown's shadow line so bar items are crisp */ .navbar .container { position: relative; z-index: 2; } /* ============================================================ PORTFOLIO / CASE STUDIES PAGE (pf-) — TOP-TIER v2 ============================================================ */ /* ---------- HERO with particles + orbs ---------- */ @keyframes pfOrbFloat { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.08); } 66% { transform: translate(-30px,20px) scale(0.95); } } @keyframes pfParticle { 0% { transform: translateY(0) scale(0); opacity: 0; } 10% { opacity: 1; transform: scale(1); } 90% { opacity: 1; } 100% { transform: translateY(-340px) scale(0.4); opacity: 0; } } .pf-hero .container { position: relative; z-index: 2; } @keyframes pfFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ---------- CASES ---------- */ /* Challenge = warm/amber */ /* Built = blue */ /* Result = green */ /* ---------- CTA ---------- */ .pf-cta .container { position: relative; z-index: 1; } /* ---------- Responsive ---------- */ /* Restored: this override lived inside @media (max-width: 768px) before the :root blocks were merged. Hoisting it made 80px apply at every width. */ @media (max-width: 768px) { :root { --sbd-section-padding: 80px 0; } } /* ========================================== ICON SYSTEM — P2-5 Sized in em so each icon inherits whatever font-size its slot already gave the emoji it replaced; no per-slot sizing rules were needed. Stroke is currentColor, so icons take the colour of their context. ========================================== */ .rx-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; /* never squashed inside a flex row */ stroke-width: 1.75; overflow: visible; /* round caps must not clip at the viewBox edge */ } /* Optical correction: at small sizes a 1.75 stroke goes muddy, at large sizes it goes spindly. Two steps keep the weight looking constant. */ .nav-icon .rx-icon, .submenu-icon .rx-icon { stroke-width: 1.9; } .feature-icon .rx-icon, .metric-icon .rx-icon, .bf-feat__icon .rx-icon, .bf-sol-card__icon .rx-icon { stroke-width: 1.6; } /* ========================================== CONTACT HERO REVEAL — P2-6 interaction pass One class on .con-hero drives everything, so timing does not depend on when the script happens to run. Delays come in as --reveal-delay. ========================================== */ /* Masked line rise. The mask is the point: text arriving from behind an edge reads as composed, where a fade just reads as slow. */ .con-line-mask { overflow: hidden; padding-bottom: 0.16em; /* descenders must not clip against the mask */ margin-bottom: -0.16em; /* ...without changing the spacing below */ } .con-line-inner { display: inline-block; transform: translateY(115%); opacity: 0; transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease; transition-delay: var(--reveal-delay, 0ms); will-change: transform; } .con-hero.is-revealed .con-line-inner { transform: translateY(0); opacity: 1; } /* The visual settles a beat later, slightly larger and softer to start. */ .con-hero.is-revealed .con-hero-visual { opacity: 1; transform: none; } /* Icon tiles arrive last, one after another. */ .con-hero.is-revealed .con-icon-item { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { /* Reduce motion, do not remove feedback. Killing the reveal outright made the hero read as completely dead for anyone with the OS setting on — zero pixels changed between 400ms and 2.6s. Movement is removed; a gentle cross-fade stays, which is what the preference actually asks for. */ .con-line-inner, .con-hero .con-hero-visual, .con-hero .con-icon-item { transform: none !important; transition: opacity 0.5s ease; } .con-hero-char { animation: conCharFadeReduced 0.5s ease forwards; filter: none; transform: none; } @keyframes conCharFadeReduced { from { opacity: 0; } to { opacity: 1; } } .con-line-mask { overflow: visible; } } /* ========================================== VIDEO GALLERY — hover preview The card expands in place and its own video plays. There is no lightbox on hover any more: with the strip auto-scrolling, every card that drifted under the cursor used to spawn one. ========================================== */ /* The strip keeps moving on hover, which is how it behaved before: the old JS wrote an inline 'running' on every card mouseleave, and inline style beats a CSS :hover rule, so the pause below never actually took effect. Pausing it for real made it look like it was crawling. The overlay opening is what pauses it now. */ @media (prefers-reduced-motion: reduce) { .video-slider.infinite-scroll { animation: none; } } /* With backdrop-filter available the blur itself supplies most of the separation, so the flat ground can be lighter. */ @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .video-lightbox { background: rgba(8, 21, 43, 0.52); } } /* ============================================================ CASE STUDY TEMPLATE (.cs-*) ------------------------------------------------------------ Shared template for the per-project case study pages (case-unique-computers.html, case-ifw.html, ...). Built on the same idiom as index.html and the portfolio cards: frosted white glass over a navy-tinted ground with drifting orbs, the four --ds-elevation tokens, radii from the scale, navy + gold only. Glass needs something behind it to blur, so the body carries a layered gradient ground rather than flat white — on white, backdrop-filter renders as nothing. Long-form measure: prose runs at 1080px inside a 1280px shell, so the reading column is generous without losing the line length that makes it readable. ============================================================ */ .cs-main { background: #ffffff; } /* ---------- Measure ---------- */ .cs-col { max-width: 1280px; } /* ---------- HERO ---------- */ .cs-hero { position: relative; padding: 172px 0 96px; background: radial-gradient(ellipse 60% 50% at 78% 18%, rgba(59, 111, 196, 0.30) 0%, transparent 62%), radial-gradient(ellipse 55% 55% at 12% 88%, rgba(198, 147, 10, 0.14) 0%, transparent 62%), linear-gradient(135deg, #0b1e3d 0%, #16386a 55%, #1e4d8c 100%); overflow: hidden; } .cs-hero::before { content: ''; position: absolute; width: 680px; height: 680px; top: -280px; right: -180px; border-radius: var(--ds-radius-circle); background: radial-gradient(circle, rgba(198,147,10,0.22) 0%, rgba(198,147,10,0.07) 40%, transparent 70%); filter: blur(40px); animation: csOrbFloat 26s ease-in-out infinite; pointer-events: none; will-change: transform; } .cs-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,147,10,0.55), transparent); } .cs-hero .container { position: relative; z-index: 1; } @keyframes csOrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-40px, 40px) scale(1.06); } 66% { transform: translate(30px, -30px) scale(0.96); } } .cs-back { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.66); text-decoration: none; margin-bottom: 40px; transition: color var(--transition-base), gap var(--transition-base); } .cs-back:hover { color: #ffffff; gap: 13px; } .cs-back svg { width: 15px; height: 15px; flex-shrink: 0; } .cs-eyebrow { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #e0b341; margin-bottom: 22px; } .cs-title { font-size: clamp(46px, 6vw, 76px); font-weight: 800; line-height: 1.03; letter-spacing: -0.03em; color: #ffffff; margin: 0 0 26px; text-wrap: balance; } .cs-pitch { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.6; color: rgba(255,255,255,0.84); max-width: 820px; margin: 0 0 44px; } /* Measured build facts, in glass. Not marketing metrics. */ .cs-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: rgba(255,255,255,0.07); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--ds-radius-2xl); box-shadow: var(--ds-elevation-3), inset 0 1px 0 rgba(255,255,255,0.18); overflow: hidden; margin: 0 0 40px; } .cs-fact { padding: 28px 30px; } .cs-fact + .cs-fact { border-left: 1px solid rgba(255,255,255,0.13); } .cs-fact-num { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: #ffffff; line-height: 1.15; } .cs-fact-label { display: block; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.62); margin-top: 8px; } .cs-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 40px; } .cs-chips li { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.90); background: rgba(255,255,255,0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); padding: 9px 18px; border-radius: var(--ds-radius-pill); } .cs-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .cs-live { display: inline-flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 700; color: #0f2750; background: linear-gradient(135deg, #e0b341, #c6930a); padding: 16px 32px; border-radius: var(--ds-radius-pill); text-decoration: none; white-space: nowrap; box-shadow: var(--ds-elevation-3), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), gap var(--transition-base); } .cs-live:hover { transform: translateY(-3px); gap: 14px; box-shadow: var(--ds-elevation-4), inset 0 1px 0 rgba(255,255,255,0.4); } .cs-live svg { width: 16px; height: 16px; flex-shrink: 0; } /* On the light ground the gold pill loses contrast, so the in-body repeat of the same action inverts to navy. */ .cs-live.is-navy { color: #ffffff; background: linear-gradient(135deg, #1e4d8c, #16386a); } /* ---------- Status pill ---------- For a build with no public URL yet. Deliberately not a link and not button-shaped: it states a fact rather than inviting a click. */ /* On the light body ground the gold-on-navy version loses contrast. */ /* ---------- BODY GROUND ---------- The glass has to sit on something. Layered tints plus two slow orbs give the frosted cards a real backdrop to sample. */ .cs-body { position: relative; padding: 104px 0 120px; background: radial-gradient(ellipse 60% 40% at 82% 12%, rgba(59, 111, 196, 0.07) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 14% 62%, rgba(198, 147, 10, 0.06) 0%, transparent 60%), linear-gradient(180deg, #f4f7fc 0%, #eef3fb 45%, #f4f7fc 100%); overflow: hidden; } .cs-body::before, .cs-body::after { content: ''; position: absolute; border-radius: var(--ds-radius-circle); pointer-events: none; will-change: transform; } .cs-body::before { top: -260px; right: -280px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(59,111,196,0.10) 0%, rgba(59,111,196,0.035) 42%, transparent 70%); animation: csOrbFloat 30s ease-in-out infinite; } .cs-body::after { bottom: -320px; left: -300px; width: 780px; height: 780px; background: radial-gradient(circle, rgba(198,147,10,0.09) 0%, rgba(198,147,10,0.03) 42%, transparent 70%); animation: csOrbFloat 36s ease-in-out infinite reverse; } .cs-body .container { position: relative; z-index: 1; } /* ---------- SECTIONS ---------- */ .cs-section { margin-bottom: 104px; } .cs-section:last-child { margin-bottom: 0; } .cs-kicker { display: flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #1e4d8c; margin: 0 0 18px; } .cs-kicker::before { content: ''; width: 34px; height: 2px; background: linear-gradient(90deg, #c6930a, rgba(198,147,10,0.25)); flex-shrink: 0; } .cs-h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 800; line-height: 1.16; letter-spacing: -0.025em; color: #0b1e3d; margin: 0 0 32px; max-width: 30ch; text-wrap: balance; } .cs-h3 { font-size: 23px; font-weight: 700; line-height: 1.32; color: #0b1e3d; margin: 44px 0 16px; } .cs-section p { font-size: 18.5px; line-height: 1.78; color: #3c4855; margin: 0 0 22px; max-width: 74ch; } .cs-section p:last-child { margin-bottom: 0; } .cs-section strong { color: #16386a; font-weight: 700; } .cs-section a:not(.cs-live):not(.cs-back) { color: #1e4d8c; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(30,77,140,0.35); transition: text-decoration-color var(--transition-base); } .cs-section a:not(.cs-live):not(.cs-back):hover { text-decoration-color: #1e4d8c; } .cs-lead { font-size: 21px !important; line-height: 1.68 !important; color: #2c3947 !important; } /* ---------- Glass panel: the shared surface ---------- */ .cs-facet, .cs-decision, .cs-challenge, .cs-feature, .cs-panel, .cs-note { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.95); } /* ---------- Problem facets ---------- */ .cs-facets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; } .cs-facet { position: relative; border-radius: var(--ds-radius-2xl); padding: 36px 38px; overflow: hidden; } .cs-facet::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1e4d8c, rgba(30,77,140,0)); } .cs-facet.is-tech::before { background: linear-gradient(90deg, #c6930a, rgba(198,147,10,0)); } .cs-facet-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #6e6e73; margin-bottom: 14px; } .cs-facet p { font-size: 17.5px !important; line-height: 1.75 !important; max-width: none; } /* ---------- Decision cards ---------- */ .cs-decision { position: relative; border-radius: var(--ds-radius-2xl); padding: 40px 42px; margin: 26px 0; overflow: hidden; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .cs-decision::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #c6930a, rgba(198,147,10,0.15)); } .cs-decision:hover { transform: translateY(-4px); box-shadow: var(--ds-elevation-4), inset 0 1px 0 rgba(255,255,255,1); } .cs-decision .cs-h3 { margin-top: 0; } .cs-decision p { max-width: 92ch; } .cs-decision-why { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 22px !important; padding-top: 22px; border-top: 1px solid rgba(15,39,80,0.10); font-size: 16.5px !important; line-height: 1.7 !important; color: #515154 !important; } .cs-decision-why b { color: #1e4d8c; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; padding-top: 4px; } /* ---------- Code ---------- */ /* Inline code reads as a token in running prose without shouting. */ .cs-section :not(pre) > code { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.88em; color: #16386a; background: rgba(30, 77, 140, 0.08); border: 1px solid rgba(30, 77, 140, 0.12); border-radius: var(--ds-radius-xs); padding: 2px 7px; white-space: nowrap; } /* ---------- Challenges ---------- */ .cs-challenge { border-radius: var(--ds-radius-3xl); overflow: hidden; margin: 32px 0; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .cs-challenge:hover { transform: translateY(-4px); box-shadow: var(--ds-elevation-4), inset 0 1px 0 rgba(255,255,255,1); } .cs-challenge-head { display: flex; align-items: center; gap: 18px; padding: 28px 40px; background: linear-gradient(135deg, #0b1e3d 0%, #1e4d8c 100%); position: relative; } .cs-challenge-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,147,10,0.5), transparent); } .cs-challenge-n { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-md); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: #e0b341; font-size: 14px; font-weight: 800; } .cs-challenge-head h3 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.32; color: #ffffff; letter-spacing: -0.01em; } .cs-challenge-body { padding: 10px 40px 34px; } .cs-step { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 32px; padding: 30px 0; border-bottom: 1px solid rgba(15,39,80,0.08); } .cs-step:last-child { border-bottom: 0; padding-bottom: 8px; } .cs-step-label { align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; padding: 7px 15px; border-radius: var(--ds-radius-pill); } .cs-step-body { min-width: 0; } .cs-step.is-problem .cs-step-label { color: #b45309; background: rgba(217,119,6,0.10); } .cs-step.is-solution .cs-step-label { color: #1e4d8c; background: rgba(30,77,140,0.10); } .cs-step.is-outcome .cs-step-label { color: #047857; background: rgba(5,150,105,0.10); } .cs-step p { font-size: 18px !important; margin-bottom: 16px !important; max-width: 88ch; } .cs-step p:last-child { margin-bottom: 0 !important; } /* ---------- Figures ---------- */ .cs-figure { margin: 44px 0; } .cs-figure img { display: block; width: 100%; height: auto; border-radius: var(--ds-radius-xl); border: 1px solid rgba(255,255,255,0.9); box-shadow: var(--ds-elevation-4); } .cs-figure figcaption { margin-top: 18px; font-size: 15.5px; line-height: 1.65; color: #6e6e73; text-align: center; max-width: 68ch; margin-left: auto; margin-right: auto; } /* A shot that should not be upscaled past its native width sits inset and centred rather than stretched across the column. */ .cs-figure.is-inset { max-width: 580px; margin-left: auto; margin-right: auto; } /* Same idea, for an inset shot with more native width to spend. */ .cs-figure.is-inset-lg { max-width: 780px; margin-left: auto; margin-right: auto; } /* Paired shots: the before/after of one mechanism. */ /* Inside a challenge card the figure runs edge to edge of the padding. */ .cs-challenge-body .cs-figure { margin: 4px 0 0; } /* ---------- Feature groups ---------- */ .cs-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; margin: 36px 0; } .cs-feature { position: relative; border-radius: var(--ds-radius-2xl); padding: 32px 30px; overflow: hidden; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .cs-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1e4d8c, rgba(198,147,10,0.6)); } .cs-feature:hover { transform: translateY(-5px); box-shadow: var(--ds-elevation-4), inset 0 1px 0 rgba(255,255,255,1); } .cs-feature h4 { margin: 0 0 16px; font-size: 16.5px; font-weight: 800; letter-spacing: 0.02em; color: #0b1e3d; } .cs-feature ul { list-style: none; margin: 0; padding: 0; } .cs-feature li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.62; color: #3c4855; margin-bottom: 12px; } .cs-feature li:last-child { margin-bottom: 0; } .cs-feature li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: var(--ds-radius-circle); background: #c6930a; } /* ---------- Plain glass panel (closing section) ---------- */ .cs-panel { border-radius: var(--ds-radius-2xl); padding: 40px 42px; margin-top: 36px; } .cs-panel p { max-width: 92ch; } /* ---------- Honest-disclosure note ---------- */ .cs-note { display: flex; gap: 20px; border-radius: var(--ds-radius-2xl); padding: 30px 34px; margin: 36px 0 0; border-color: rgba(198,147,10,0.28); background: rgba(255, 250, 240, 0.72); } .cs-note svg { width: 24px; height: 24px; flex-shrink: 0; color: #975a16; margin-top: 3px; } .cs-note p { font-size: 17px !important; line-height: 1.7 !important; color: #744210 !important; margin: 0 !important; } /* ---------- Page nav ---------- */ .cs-pagenav { border-top: 1px solid rgba(15,39,80,0.10); padding: 48px 0 0; margin-top: 104px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .cs-pagenav a { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: #1e4d8c; text-decoration: none; transition: gap var(--transition-base); } .cs-pagenav a:hover { gap: 14px; } .cs-pagenav svg { width: 16px; height: 16px; } .cs-result-action { margin-top: 38px; } /* ---------- CTA ---------- */ .cs-cta { position: relative; padding: 108px 0; text-align: center; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(59, 111, 196, 0.28) 0%, transparent 62%), linear-gradient(135deg, #1e4d8c 0%, #0f2750 100%); } .cs-cta::before { content: ''; position: absolute; width: 560px; height: 560px; top: -230px; right: -110px; border-radius: var(--ds-radius-circle); background: radial-gradient(circle, rgba(198,147,10,0.24), transparent 70%); filter: blur(40px); animation: csOrbFloat 28s ease-in-out infinite; will-change: transform; } .cs-cta .container { position: relative; z-index: 1; } .cs-cta h2 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 800; letter-spacing: -0.025em; color: #ffffff; margin: 0 0 20px; text-wrap: balance; } .cs-cta p { font-size: 19px; line-height: 1.65; color: rgba(255,255,255,0.84); max-width: 660px; margin: 0 auto 40px; } .cs-cta-btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 16.5px; font-weight: 700; color: #0f2750; background: #ffffff; padding: 17px 38px; border-radius: var(--ds-radius-pill); text-decoration: none; box-shadow: var(--ds-elevation-3), inset 0 1px 0 rgba(255,255,255,1); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), gap var(--transition-base); } .cs-cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .cs-cta-btn:hover { transform: translateY(-3px); gap: 14px; box-shadow: var(--ds-elevation-4); } /* ---------- Reveal ---------- */ .cs-reveal { opacity: 0; transform: translateY(26px); } .cs-reveal.cs-in { opacity: 1; transform: none; transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1); } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .cs-facets { grid-template-columns: 1fr; } .cs-facts { grid-template-columns: repeat(2, 1fr); } .cs-fact + .cs-fact { border-left: 1px solid rgba(255,255,255,0.13); } .cs-fact:nth-child(3) { border-left: 0; } .cs-fact:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.13); } } @media (max-width: 768px) { .cs-hero { padding: 132px 0 68px; } .cs-body { padding: 72px 0 84px; } .cs-section { margin-bottom: 72px; } .cs-h2 { max-width: none; } .cs-section p { font-size: 17px; } .cs-fact { padding: 22px 20px; } .cs-fact-num { font-size: 26px; } .cs-facet { padding: 28px 24px; } .cs-decision { padding: 30px 26px; } .cs-challenge-head { padding: 22px 24px; gap: 14px; } .cs-challenge-head h3 { font-size: 19px; } .cs-challenge-body { padding: 6px 24px 26px; } .cs-step { grid-template-columns: 1fr; gap: 12px; } .cs-decision-why { grid-template-columns: 1fr; gap: 8px; } .cs-feature { padding: 26px 24px; } .cs-panel { padding: 30px 26px; } .cs-note { padding: 24px 22px; gap: 14px; } .cs-pagenav { margin-top: 72px; } .cs-cta { padding: 80px 0; } } @media (max-width: 520px) { .cs-facts { grid-template-columns: 1fr; } .cs-fact + .cs-fact { border-left: 0; border-top: 1px solid rgba(255,255,255,0.13); } } /* Frosted glass costs a lot on low-end GPUs and degrades to a flat wash where it is unsupported, so opt in rather than assume. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .cs-facet, .cs-decision, .cs-challenge, .cs-feature { background: rgba(255,255,255,0.94); } .cs-facts { background: rgba(255,255,255,0.12); } } @media (prefers-reduced-motion: reduce) { .cs-reveal { opacity: 1; transform: none; transition: none; } .cs-hero::before, .cs-body::before, .cs-body::after, .cs-cta::before { animation: none; } .cs-live:hover, .cs-cta-btn:hover, .cs-feature:hover, .cs-decision:hover, .cs-challenge:hover { transform: none; } } /* ============================================================ PORTFOLIO GATEWAY (.pw-*) ------------------------------------------------------------ The entry point to the seven case studies. Same glass recipe, ground and tokens as the .cs-* case study template, so the gateway and the pages it opens read as one system. ============================================================ */ /* The first card runs the full width of the grid. */ /* Stretch the one real link over the whole card, so the card is clickable without inventing a second focusable target. */ /* Status flags */