/* ========================================================================== CX-Grid — custom experience: bright, modern, animated Tailwind used only for layout/sizing; all look & motion here. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); /* ========================================================================== THEME CONFIG — single place for light & dark. Toggle via data-theme on . ========================================================================== */ :root, [data-theme="light"] { /* Surfaces & text */ --color-bg: #f0f4ff; --color-surface: #ffffff; --color-surface-alt: #e8eeff; --color-text: #0f172a; --color-text-muted: #475569; --color-text-soft: #64748b; --color-border: rgba(15, 23, 42, 0.08); --color-border-strong: rgba(15, 23, 42, 0.12); /* Brand (shared across themes) */ --color-primary: #0ea5e9; --color-primary-light: #38bdf8; --color-primary-dark: #0284c7; --color-accent: #6366f1; --color-accent-light: #818cf8; --color-success: #22c55e; /* Vibe palette — extra color for gradients, icons, cards */ --color-vibe-teal: #14b8a6; --color-vibe-teal-light: #2dd4bf; --color-vibe-coral: #f43f5e; --color-vibe-coral-light: #fb7185; --color-vibe-amber: #f59e0b; --color-vibe-amber-light: #fbbf24; --color-vibe-emerald: #10b981; --color-vibe-emerald-light: #34d399; --color-vibe-rose: #ec4899; --color-vibe-rose-light: #f472b6; --color-vibe-violet: #8b5cf6; --color-vibe-violet-light: #a78bfa; /* Panel & nav (theme-specific) */ --color-panel-bg: rgba(255, 255, 255, 0.36); --color-panel-shadow: 0 4px 40px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04); --color-panel-shadow-lg: 0 8px 60px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.05); --color-nav-bg: rgba(255, 255, 255, 0.85); --color-nav-dropdown-bg: #ffffff; /* Footer (theme-specific) */ --color-footer-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); --color-footer-text: rgba(255, 255, 255, 0.75); --color-footer-link: rgba(255, 255, 255, 0.85); --color-footer-logo: #ffffff; /* Gradients (theme-specific) — richer vibe palette */ --gradient-hero: linear-gradient(135deg, rgba(238, 242, 255, 0.72) 0%, rgba(224, 231, 255, 0.7) 25%, rgba(199, 210, 254, 0.68) 40%, rgba(221, 214, 254, 0.7) 50%, rgba(207, 250, 254, 0.68) 60%, rgba(252, 231, 243, 0.7) 75%, rgba(224, 242, 254, 0.72) 100%); --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%); --gradient-glow: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 189, 248, 0.45), rgba(99, 102, 241, 0.25) 25%, rgba(236, 72, 153, 0.12) 45%, rgba(20, 184, 166, 0.1) 60%, transparent 75%); --gradient-highlight: linear-gradient(90deg, rgba(14, 165, 233, 0.12), rgba(99, 102, 241, 0.12)); --gradient-stripe: linear-gradient(105deg, transparent 0%, rgba(14, 165, 233, 0.06) 15%, rgba(99, 102, 241, 0.08) 35%, rgba(236, 72, 153, 0.05) 50%, rgba(20, 184, 166, 0.06) 65%, rgba(14, 165, 233, 0.05) 85%, transparent 100%); --gradient-edge: linear-gradient(90deg, rgba(14, 165, 233, 0.15) 0%, transparent 12%, transparent 88%, rgba(99, 102, 241, 0.12) 100%); --gradient-heading: linear-gradient(135deg, #0f172a 0%, #0ea5e9 35%, #6366f1 65%, #ec4899 85%, #0f172a 100%); --gradient-card-border: linear-gradient(135deg, rgba(14, 165, 233, 0.4), rgba(99, 102, 241, 0.4)); --gradient-section-alt: linear-gradient(180deg, var(--color-surface-alt) 0%, #dfe5ff 35%, #f5f3ff 60%, var(--color-surface-alt) 100%); --gradient-shape: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(99, 102, 241, 0.25), rgba(236, 72, 153, 0.12)); --gradient-contact-glow: radial-gradient(ellipse 80% 100%, rgba(14, 165, 233, 0.12), rgba(99, 102, 241, 0.08), rgba(236, 72, 153, 0.06), transparent 65%); /* Shadows (theme-specific) */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 40px -12px rgba(15, 23, 42, 0.15); --shadow-glow: 0 0 50px -10px rgba(14, 165, 233, 0.55); --shadow-glow-violet: 0 0 40px -8px rgba(99, 102, 241, 0.4); --color-mask: #ffffff; --color-hero-grid: rgba(14, 165, 233, 0.06); --color-hero-cell: rgba(15, 23, 42, 0.1); } [data-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-alt: #334155; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-soft: #64748b; --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.12); --color-panel-bg: rgba(30, 41, 59, 0.45); --color-panel-shadow: 0 4px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06); --color-panel-shadow-lg: 0 8px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08); --color-nav-bg: rgba(15, 23, 42, 0.9); --color-nav-dropdown-bg: #1e293b; --color-footer-bg: linear-gradient(180deg, #020617 0%, #0f172a 100%); --color-footer-text: rgba(255, 255, 255, 0.7); --color-footer-link: rgba(255, 255, 255, 0.9); --color-footer-logo: #ffffff; --gradient-hero: linear-gradient(135deg, rgba(15, 23, 42, 0.78) 0%, rgba(30, 41, 59, 0.75) 30%, rgba(49, 46, 129, 0.72) 50%, rgba(131, 24, 67, 0.7) 70%, rgba(12, 74, 110, 0.72) 90%, rgba(19, 78, 74, 0.75) 100%); --gradient-glow: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 189, 248, 0.22), rgba(99, 102, 241, 0.15) 30%, rgba(236, 72, 153, 0.08) 50%, rgba(20, 184, 166, 0.06) 65%, transparent 80%); --gradient-stripe: linear-gradient(105deg, transparent 0%, rgba(14, 165, 233, 0.05) 20%, rgba(99, 102, 241, 0.06) 40%, rgba(236, 72, 153, 0.04) 55%, rgba(20, 184, 166, 0.04) 70%, transparent 100%); --gradient-edge: linear-gradient(90deg, rgba(14, 165, 233, 0.12) 0%, transparent 12%, transparent 88%, rgba(99, 102, 241, 0.1) 100%); --gradient-heading: linear-gradient(135deg, #f1f5f9 0%, #38bdf8 35%, #818cf8 60%, #f472b6 80%, #f1f5f9 100%); --gradient-card-border: linear-gradient(135deg, rgba(14, 165, 233, 0.5), rgba(99, 102, 241, 0.5)); --gradient-section-alt: linear-gradient(180deg, var(--color-surface-alt) 0%, #1e3a5f 40%, #312e81 60%, var(--color-surface-alt) 100%); --gradient-shape: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.08)); --gradient-contact-glow: radial-gradient(ellipse 80% 100%, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.07), rgba(236, 72, 153, 0.04), transparent 65%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 40px -12px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 50px -10px rgba(14, 165, 233, 0.4); --shadow-glow-violet: 0 0 40px -8px rgba(99, 102, 241, 0.35); --color-mask: #1e293b; --color-hero-grid: rgba(14, 165, 233, 0.1); --color-hero-cell: rgba(255, 255, 255, 0.08); } /* --------------------------------------------------------------------------- Design tokens (motion & radius — same for both themes) --------------------------------------------------------------------------- */ :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 0.2s; --duration-normal: 0.35s; --duration-slow: 0.6s; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-2xl: 1.5rem; } /* --------------------------------------------------------------------------- Base & page --------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body.page { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(14, 165, 233, 0.25); color: var(--color-text); } [data-theme="dark"] ::selection { background: rgba(56, 189, 248, 0.3); } /* --------------------------------------------------------------------------- Floating animated background shapes (concept-inspired) --------------------------------------------------------------------------- */ .floating-shapes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .shape { position: absolute; border-radius: 24px; opacity: 0.5; filter: blur(40px); will-change: transform, opacity; } .shape--diamond { width: 280px; height: 280px; background: var(--gradient-shape); transform: rotate(45deg); } .shape--1 { top: 5%; right: 10%; width: 320px; height: 320px; animation: floatDrift1 18s ease-in-out infinite; } .shape--2 { top: 25%; left: -8%; width: 240px; height: 240px; animation: floatDrift2 22s ease-in-out infinite 1s; } .shape--3 { bottom: 20%; right: 5%; width: 200px; height: 200px; animation: floatDrift3 20s ease-in-out infinite 2s; } .shape--4 { bottom: 35%; left: 15%; width: 260px; height: 260px; animation: floatDrift1 25s ease-in-out infinite 3s; } .shape--5 { top: 50%; right: -5%; width: 180px; height: 180px; animation: floatDrift2 16s ease-in-out infinite 0.5s; } .shape--6 { top: 15%; left: 25%; width: 220px; height: 220px; animation: floatDrift3 19s ease-in-out infinite 2.5s; } .shape--7 { bottom: 10%; left: 40%; width: 300px; height: 300px; animation: floatDrift1 24s ease-in-out infinite 4s; } @keyframes floatDrift1 { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.45; } 25% { transform: rotate(60deg) translate(15px, -20px); opacity: 0.6; } 50% { transform: rotate(30deg) translate(-10px, 15px); opacity: 0.4; } 75% { transform: rotate(50deg) translate(20px, 10px); opacity: 0.55; } } @keyframes floatDrift2 { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; } 33% { transform: rotate(70deg) translate(-25px, -15px); opacity: 0.55; } 66% { transform: rotate(25deg) translate(20px, 25px); opacity: 0.35; } } @keyframes floatDrift3 { 0%, 100% { transform: rotate(45deg) translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: rotate(90deg) translate(10px, -25px) scale(1.05); opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .shape { animation: none; opacity: 0.35; } } /* Phosphor duotone icons – full-page (config: config/flying-icons.json) */ .floating-svg-objects { position: fixed; inset: 0; z-index: 0.5; pointer-events: none; overflow: hidden; } .fly-obj { position: absolute; display: inline-block; width: 1em; height: 1em; opacity: var(--fly-full-opacity, 0.8); will-change: transform; } [data-theme="dark"] .fly-obj { opacity: var(--fly-full-dark-opacity, 0.55); } @media (prefers-reduced-motion: reduce) { .fly-obj { animation: none; opacity: 0.5; } } @keyframes fly1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(20px, -30px) rotate(10deg); } 50% { transform: translate(-15px, 20px) rotate(-8deg); } 75% { transform: translate(25px, 15px) rotate(5deg); } } @keyframes fly2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-25px, -20px) rotate(-12deg); } 66% { transform: translate(18px, 25px) rotate(15deg); } } @keyframes fly3 { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(-20px, -25px) rotate(20deg) scale(1.05); } } @keyframes fly4 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(30px, 10px) rotate(-10deg); } 50% { transform: translate(-10px, -20px) rotate(12deg); } 75% { transform: translate(-25px, 15px) rotate(-5deg); } } /* Flying icons inside page-panel (config: config/flying-icons.json) */ .floating-panel-icons { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; border-radius: inherit; } .fly-panel { position: absolute; display: inline-block; width: 1em; height: 1em; opacity: var(--fly-panel-opacity, 0.5); will-change: transform; } [data-theme="dark"] .fly-panel { opacity: var(--fly-panel-dark-opacity, 0.5); } @media (prefers-reduced-motion: reduce) { .fly-panel { animation: none; opacity: 0.4; } } /* Main content panel (concept-inspired) */ .page-panel { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; margin-top: 0; min-height: 100vh; background: var(--color-panel-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 2rem; box-shadow: var(--color-panel-shadow); overflow: hidden; } @media (min-width: 1024px) { .page-panel { margin-top: 1rem; margin-bottom: 1rem; border-radius: 2.5rem; box-shadow: var(--color-panel-shadow-lg); } } /* --------------------------------------------------------------------------- Typography (custom; sizes from Tailwind scale where useful) --------------------------------------------------------------------------- */ .hero__eyebrow { animation: fadeInUp 0.6s var(--ease-out-expo) both; } .hero__title { font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--color-text); background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary-dark) 45%, var(--color-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: heroTitleReveal 1s var(--ease-out-expo) both; } .hero__subtitle { color: var(--color-text-muted); font-weight: 500; line-height: 1.75; letter-spacing: 0.01em; animation: fadeInUp 0.8s var(--ease-out-expo) 0.15s both; } .hero__meta { letter-spacing: 0.02em; animation: fadeInUp 0.6s var(--ease-out-expo) 0.5s both; } .heading-section { font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); } .heading--gradient { background: var(--gradient-heading); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; display: inline-block; } .heading--gradient::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 56px; height: 4px; border-radius: 2px; background: var(--gradient-primary); } .heading--gradient.text-center::after, .text-center .heading--gradient::after { left: 50%; transform: translateX(-50%); } .heading-card { font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); } .text-body { color: var(--color-text-muted); line-height: 1.65; } .text-muted { color: var(--color-text-soft); } .text-strong { color: var(--color-text); font-weight: 600; } .text-primary { color: var(--color-primary); } /* --------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; border-radius: var(--radius-xl); transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out-expo), background var(--duration-normal) ease, border-color var(--duration-normal) ease; } .btn:active { transform: scale(0.98); } .btn--primary { background: var(--gradient-primary); color: #fff; box-shadow: 0 4px 20px -4px rgba(14, 165, 233, 0.5); } .btn--primary:hover { box-shadow: 0 8px 28px -6px rgba(14, 165, 233, 0.5), 0 0 40px -12px rgba(99, 102, 241, 0.35); transform: translateY(-3px); } .btn--secondary { background: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-border-strong); } .btn--secondary:hover { border-color: var(--color-primary-light); color: var(--color-primary-dark); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12); transform: translateY(-1px); } .btn--ghost { color: var(--color-primary); font-weight: 600; } .btn--ghost:hover { text-decoration: underline; color: var(--color-primary-dark); text-underline-offset: 0.2em; } /* --------------------------------------------------------------------------- Hero --------------------------------------------------------------------------- */ .hero { position: relative; background: var(--gradient-hero); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: var(--gradient-glow); pointer-events: none; opacity: 0.9; animation: heroGlowPulse 10s ease-in-out infinite; } /* Grid background — calmer, larger cells */ .hero-grid { background-image: linear-gradient(var(--color-hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-hero-grid) 1px, transparent 1px); background-size: 56px 56px; animation: gridShift 25s linear infinite; } .hero .btn { animation: fadeInUp 0.6s var(--ease-out-expo) 0.35s both; } .hero .btn + .btn { animation-delay: 0.45s; } .btn--hero-primary { box-shadow: 0 4px 20px -2px rgba(14, 165, 233, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; } .btn--hero-primary:hover { box-shadow: 0 8px 28px -4px rgba(14, 165, 233, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; } /* Hero illustration */ .hero__illustration { position: relative; align-self: center; } .illustration-wrap { filter: drop-shadow(0 24px 48px rgba(14, 165, 233, 0.12)); animation: floatIllus 6s ease-in-out infinite; } .hero-illus { width: 100%; height: auto; max-height: 320px; } /* Hero Lottie animation */ .hero-lottie-wrap { width: 100%; aspect-ratio: 1; max-height: 380px; } .hero-lottie, .hero-lottie-wrap lottie-player { width: 100% !important; height: 100% !important; } /* Section illustrations */ .section-illus svg { display: block; } .section-illus--right { margin-left: auto; } [dir="rtl"] .section-illus--right { margin-left: 0; margin-right: auto; } /* Section Lottie (e.g. What CX-Grid Does) */ .section-lottie-wrap { width: 100%; aspect-ratio: 1; max-height: 280px; } .section-lottie, .section-lottie-wrap lottie-player { width: 100% !important; height: 100% !important; } @keyframes floatIllus { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* --------------------------------------------------------------------------- Sections --------------------------------------------------------------------------- */ .section { position: relative; transition: background var(--duration-slow) ease; } .section--white { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .section--alt { background: var(--gradient-section-alt); } .section--white:first-of-type { border-top: none; } /* Panel content — increased transparency so flying icons show through */ .page-panel .section--white { background: rgba(255, 255, 255, 0.4); } .page-panel .section--alt { background: linear-gradient(180deg, rgba(232, 238, 255, 0.42) 0%, rgba(223, 229, 255, 0.38) 35%, rgba(245, 243, 255, 0.4) 60%, rgba(232, 238, 255, 0.42) 100%); } .page-panel .section--services { background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(232, 238, 255, 0.35) 3%, rgba(255, 255, 255, 0.38) 100%); } .page-panel .card { background: rgba(255, 255, 255, 0.5); } .page-panel .service-card { background: rgba(255, 255, 255, 0.52); } .page-panel .section--contact-glow { background: rgba(255, 255, 255, 0.4); } [data-theme="dark"] .page-panel .section--white { background: rgba(30, 41, 59, 0.45); } [data-theme="dark"] .page-panel .section--alt { background: linear-gradient(180deg, rgba(51, 65, 85, 0.5) 0%, rgba(30, 58, 95, 0.45) 40%, rgba(49, 46, 129, 0.48) 60%, rgba(51, 65, 85, 0.5) 100%); } [data-theme="dark"] .page-panel .section--services { background: linear-gradient(180deg, rgba(30, 41, 59, 0.45) 0%, rgba(51, 65, 85, 0.42) 3%, rgba(30, 41, 59, 0.45) 100%); } [data-theme="dark"] .page-panel .card { background: rgba(30, 41, 59, 0.55); } [data-theme="dark"] .page-panel .service-card { background: rgba(30, 41, 59, 0.55); } [data-theme="dark"] .page-panel .section--contact-glow { background: rgba(30, 41, 59, 0.45); } /* Gradient stripe overlay (alt sections) */ .section--gradient-stripe::before { content: ''; position: absolute; inset: 0; background: var(--gradient-stripe); pointer-events: none; opacity: 0.9; } .section--gradient-stripe > * { position: relative; z-index: 1; } /* Gradient edge highlight (white sections) */ .section--gradient-edge { position: relative; box-shadow: inset 0 0 0 1px transparent; } .section--gradient-edge::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-edge); pointer-events: none; } .section--gradient-edge > * { position: relative; z-index: 1; } /* Contact section glow */ .section--contact-glow { overflow: hidden; } .section--contact-glow::before { content: ''; position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); width: 80%; max-width: 600px; height: 200px; background: var(--gradient-contact-glow); pointer-events: none; z-index: 0; } /* Scroll-triggered reveal (JS adds .in-view) */ .section .animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); } .section.in-view .animate-on-scroll { opacity: 1; transform: translateY(0); } .section.in-view .animate-on-scroll:nth-child(1) { transition-delay: 0s; } .section.in-view .animate-on-scroll:nth-child(2) { transition-delay: 0.06s; } .section.in-view .animate-on-scroll:nth-child(3) { transition-delay: 0.12s; } .section.in-view .animate-on-scroll:nth-child(4) { transition-delay: 0.18s; } .section.in-view .animate-on-scroll:nth-child(5) { transition-delay: 0.24s; } .section.in-view .animate-on-scroll:nth-child(6) { transition-delay: 0.3s; } /* --------------------------------------------------------------------------- Cards (capabilities, industries, about) --------------------------------------------------------------------------- */ .card { background: var(--color-surface); border: 2px solid transparent; border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); background-clip: padding-box; position: relative; transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out-expo); } .card::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: var(--gradient-card-border); -webkit-mask: linear-gradient(var(--color-mask) 0 0) content-box, linear-gradient(var(--color-mask) 0 0); mask: linear-gradient(var(--color-mask) 0 0) content-box, linear-gradient(var(--color-mask) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.4; transition: opacity var(--duration-normal) ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), var(--shadow-glow); } .card:hover::before { opacity: 0.9; } .card__icon { width: 3rem; height: 3rem; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); color: #fff; box-shadow: 0 4px 16px -4px rgba(14, 165, 233, 0.45); transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) ease; } .card:hover .card__icon { transform: scale(1.08); box-shadow: 0 8px 24px -4px rgba(14, 165, 233, 0.5), 0 0 20px -4px rgba(99, 102, 241, 0.35); } /* Staggered card reveal when section is in view */ .section .card { opacity: 0; transform: translateY(20px); transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo), border-color var(--duration-normal) ease, box-shadow var(--duration-normal) var(--ease-out-expo); } .section.in-view .card { opacity: 1; transform: translateY(0); } .section.in-view .card:nth-child(1) { transition-delay: 0s; } .section.in-view .card:nth-child(2) { transition-delay: 0.06s; } .section.in-view .card:nth-child(3) { transition-delay: 0.12s; } .section.in-view .card:nth-child(4) { transition-delay: 0.18s; } .section.in-view .card:nth-child(5) { transition-delay: 0.24s; } .section.in-view .card:nth-child(6) { transition-delay: 0.3s; } /* --------------------------------------------------------------------------- Service section & service cards (redesigned) --------------------------------------------------------------------------- */ .service-block__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--gradient-primary); color: #fff; box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4); } .section--services { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt) 3%, var(--color-surface) 100%); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .services-header .heading--gradient::after { margin-top: 0.75rem; } .services-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .service-card--wide { grid-column: 1 / -1; } } @media (min-width: 1024px) { .service-card--wide { padding: 1.75rem 2rem; } } /* Service card – compact, tag-based */ .service-card { position: relative; padding: 1.5rem 1.375rem; background: var(--color-surface); border-radius: var(--radius-2xl); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease, transform var(--duration-normal) var(--ease-out-expo); } .service-card::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 3px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--gradient-primary); opacity: 0.85; } [dir="rtl"] .service-card::before { inset-inline-start: 0; inset-inline-end: 0; } .service-card--1::before { background: linear-gradient(90deg, #0ea5e9, #6366f1); } .service-card--2::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); } .service-card--3::before { background: linear-gradient(90deg, #14b8a6, #0ea5e9); } .service-card--4::before { background: linear-gradient(90deg, #ec4899, #8b5cf6); } .service-card--5::before { background: linear-gradient(90deg, #10b981, #0ea5e9); } .service-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md), 0 0 0 1px rgba(14, 165, 233, 0.06); } .service-card__icon-wrap { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.875rem; } .service-card__icon { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-primary); color: #fff; font-size: 1.25rem; box-shadow: 0 3px 12px -2px rgba(14, 165, 233, 0.4); transition: transform var(--duration-normal) var(--ease-spring); } .service-card:hover .service-card__icon { transform: scale(1.05); } .service-card__title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); margin: 0; line-height: 1.25; } .service-card__intro { font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-muted); margin: 0 0 1rem; } .service-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .service-card__tag { display: inline-flex; align-items: center; padding: 0.35rem 0.7rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 9999px; transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, color var(--duration-fast) ease; } .service-card__tag:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background: rgba(14, 165, 233, 0.08); } .service-card__tag--lang { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.25); } .service-card__meta, .service-card__closing { margin: 0; line-height: 1.5; color: var(--color-text-muted); } #services .service-card { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo), border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease; } #services.in-view .service-card { opacity: 1; transform: translateY(0); } #services.in-view .service-card:nth-child(1) { transition-delay: 0.05s; } #services.in-view .service-card:nth-child(2) { transition-delay: 0.12s; } #services.in-view .service-card:nth-child(3) { transition-delay: 0.18s; } #services.in-view .service-card:nth-child(4) { transition-delay: 0.24s; } #services.in-view .service-card:nth-child(5) { transition-delay: 0.3s; } .list-check { color: var(--color-success); filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.3)); } /* --------------------------------------------------------------------------- Timeline (How we work) --------------------------------------------------------------------------- */ .timeline__line { background: linear-gradient(180deg, #0ea5e9, #3b82f6 30%, #6366f1 70%, #a78bfa); opacity: 0.7; border-radius: 2px; } .timeline__step { width: 3rem; height: 3rem; border-radius: 50%; background: var(--gradient-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px -4px rgba(14, 165, 233, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.8); transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) ease; } .timeline li:hover .timeline__step { transform: scale(1.12); box-shadow: var(--shadow-glow), var(--shadow-glow-violet), 0 0 0 4px rgba(255, 255, 255, 0.9); } /* --------------------------------------------------------------------------- Contact form --------------------------------------------------------------------------- */ .form-input, .form-textarea { width: 100%; padding: 0.875rem 1.125rem; border: 2px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 1rem; line-height: 1.5; transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease, background-color var(--duration-fast) ease; } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-soft); transition: opacity var(--duration-fast) ease; } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12); } .form-textarea { min-height: 120px; resize: vertical; } .form-label { font-weight: 600; color: var(--color-text); } .contact-link { color: var(--color-primary); font-weight: 500; transition: color var(--duration-fast) ease; } .contact-link:hover { color: var(--color-primary-dark); } /* Contact sidebar — emphasized Phone block */ .contact-visible .contact-visible__label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary-dark); } [data-theme="dark"] .contact-visible .contact-visible__label { color: var(--color-primary-light); } .contact-visible .contact-visible__link { color: var(--color-text); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.02em; } .contact-visible .contact-visible__link:hover { color: var(--color-primary-dark); } [data-theme="dark"] .contact-visible .contact-visible__link:hover { color: var(--color-primary-light); } /* --------------------------------------------------------------------------- Nav (fixed) --------------------------------------------------------------------------- */ .site-nav { background: var(--color-nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-border); transition: background var(--duration-normal) ease, box-shadow var(--duration-normal) ease; } .site-nav.is-scrolled { box-shadow: 0 4px 24px -8px rgba(15, 23, 42, 0.12); } [data-theme="dark"] .site-nav.is-scrolled { box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.4); } .site-nav a:not(.nav-logo) { color: var(--color-text-muted); font-weight: 500; border-radius: var(--radius-md); padding: 0.5rem 0.75rem; transition: color var(--duration-normal) ease, background var(--duration-normal) ease, box-shadow var(--duration-fast) ease; } .site-nav a:hover { color: var(--color-text); background: var(--gradient-highlight); } .site-nav a.active { color: var(--color-primary-dark); font-weight: 600; background: var(--gradient-highlight); box-shadow: inset 0 -2px 0 0 var(--color-primary); } .nav-logo { color: var(--color-text) !important; font-weight: 700; } .nav-logo img { display: block; height: 2rem; width: auto; } .locale-btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 0.875rem; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; } .locale-btn.active { background: var(--color-text); color: var(--color-surface); } .locale-btn:not(.active):hover { background: var(--color-surface-alt); color: var(--color-text); } #nav-toggle { color: var(--color-text-muted); } #nav-toggle:hover { background: var(--color-surface-alt); color: var(--color-text); } .theme-btn { color: var(--color-text-muted); transition: color var(--duration-fast) ease, background var(--duration-fast) ease; } .theme-btn:hover { color: var(--color-text); background: var(--gradient-highlight); } .site-nav #nav-dropdown { background: var(--color-nav-dropdown-bg); border-color: var(--color-border); } .site-nav .border-t, .site-nav .border-l { border-color: var(--color-border); } /* --------------------------------------------------------------------------- Footer --------------------------------------------------------------------------- */ .site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); } .site-footer a { color: var(--color-footer-link); text-underline-offset: 0.2em; transition: color var(--duration-normal) ease, text-decoration-color var(--duration-normal) ease; } .site-footer a:hover { color: var(--color-primary-light); text-decoration: underline; } .site-footer .footer-logo { color: var(--color-footer-logo); font-weight: 700; } .site-footer .footer-logo img { display: block; height: 2rem; width: auto; } /* --------------------------------------------------------------------------- Animations --------------------------------------------------------------------------- */ @keyframes heroTitleReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroGlowPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes gridShift { 0% { background-position: 0 0; } 100% { background-position: 48px 48px; } } @keyframes gridCellPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } @keyframes cellGlow { 0%, 100% { opacity: 1; box-shadow: 0 0 24px -4px rgba(99, 102, 241, 0.4); } 50% { opacity: 0.85; box-shadow: 0 0 32px -4px rgba(99, 102, 241, 0.6); } } /* --------------------------------------------------------------------------- RTL --------------------------------------------------------------------------- */ [dir="rtl"] .rtl\:text-right { text-align: right; } [dir="rtl"] .rtl\:flex-row-reverse { flex-direction: row-reverse; } [dir="rtl"] .rtl\:rotate-180 { transform: rotate(180deg); } [dir="rtl"] .rtl\:left-auto { left: auto; } [dir="rtl"] .rtl\:right-6 { right: 1.5rem; } /* --------------------------------------------------------------------------- Focus (a11y) — visible ring --------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); border-radius: var(--radius-md); } .form-input:focus-visible, .form-textarea:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); } /* In-content links — underline from center */ .page-panel a[href]:not(.btn):not(.nav-logo):not(.locale-btn):not(.theme-btn) { text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease; } .page-panel a[href]:not(.btn):hover { color: var(--color-primary-dark); } /* --------------------------------------------------------------------------- Scroll margin for anchor links --------------------------------------------------------------------------- */ section[id] { scroll-margin-top: 5.5rem; } /* --------------------------------------------------------------------------- Reduced motion --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .btn:hover, .card:hover, .service-card:hover .service-card__icon { transform: none; } #services .service-card { opacity: 1; transform: none; } .hero-grid { animation: none; } .illustration-wrap { animation: none; } .hero::before { animation: none; } }