/* ========================================================================== Vexorao — style.css Dark-luxury design system. All tokens as CSS custom properties. Stack: Plain PHP + HTML + CSS + JS. No frameworks. ========================================================================== */ /* ── Google Fonts are loaded in header.php ─────────────────────── */ /* ========================================================================== 1. CSS CUSTOM PROPERTIES (Design System Tokens) ========================================================================== */ :root { /* ── Backgrounds ───────────────────────────────────────────────────────── */ --color-bg-base: #090D1A; --color-bg-surface: #0F1526; --color-bg-raised: #161D33; /* ── Text ──────────────────────────────────────────────────────────────── */ --color-text-primary: #F0EDE6; --color-text-secondary: #8B8FA8; --color-text-muted: #4E526A; /* ── Accent: Champagne Gold ────────────────────────────────────────────── */ --color-accent: #C8A96E; --color-accent-light: #E2C98A; --color-accent-muted: rgba(200, 169, 110, 0.10); --color-accent-glow: rgba(200, 169, 110, 0.25); /* ── Borders ───────────────────────────────────────────────────────────── */ --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border-default: rgba(255, 255, 255, 0.10); --color-border-accent: rgba(200, 169, 110, 0.20); --color-border-strong: rgba(200, 169, 110, 0.50); /* ── Glass panels ──────────────────────────────────────────────────────── */ --color-glass-bg: rgba(15, 21, 38, 0.65); --color-glass-border: rgba(200, 169, 110, 0.18); /* ── States ────────────────────────────────────────────────────────────── */ --color-focus-ring: rgba(200, 169, 110, 0.60); --color-error: #E57373; --color-success: #81C784; /* ── Gradients ─────────────────────────────────────────────────────────── */ --gradient-hero-glow-a: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(200,169,110,0.25) 0%, transparent 70%); --gradient-hero-glow-b: radial-gradient(ellipse 50% 60% at 70% 40%, rgba(200,169,110,0.15) 0%, transparent 65%); --gradient-section-fade: linear-gradient(180deg, transparent 0%, #090D1A 100%); --gradient-cta-band: linear-gradient(135deg, #0F1526 0%, #161D33 100%); /* ── Typography ────────────────────────────────────────────────────────── */ --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Inter', 'system-ui', '-apple-system', 'Segoe UI', sans-serif; /* ── Type scale ────────────────────────────────────────────────────────── */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px */ --text-6xl: 5rem; /* 80px */ /* ── Font weights ──────────────────────────────────────────────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Line heights ──────────────────────────────────────────────────────── */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.7; /* ── Letter spacing ────────────────────────────────────────────────────── */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.14em; /* ── Spacing ───────────────────────────────────────────────────────────── */ --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-40: 10rem; /* ── Section padding ───────────────────────────────────────────────────── */ --section-py-sm: var(--space-16); --section-py-md: var(--space-24); --section-py-lg: var(--space-32); /* ── Content widths ────────────────────────────────────────────────────── */ --max-w-text: 680px; --max-w-narrow: 900px; --max-w-normal: 1120px; --max-w-wide: 1280px; --max-w-full: 1440px; /* ── Border radius ─────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 100px; --radius-full: 9999px; /* ── Borders ───────────────────────────────────────────────────────────── */ --border-subtle: 1px solid var(--color-border-subtle); --border-default: 1px solid var(--color-border-default); --border-accent: 1px solid var(--color-border-accent); --border-strong: 1px solid var(--color-border-strong); /* ── Shadows ───────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4); --shadow-card: 0 4px 24px rgba(0,0,0,0.5), 0 0 1px rgba(200,169,110,0.10); --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.65), 0 0 24px rgba(200,169,110,0.12); --shadow-glow-sm: 0 0 16px rgba(200,169,110,0.18); --shadow-glow-md: 0 0 32px rgba(200,169,110,0.22); --shadow-focus: 0 0 0 3px rgba(200,169,110,0.40); /* ── Transitions ───────────────────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1); --transition-enter: 500ms cubic-bezier(0.16, 1, 0.3, 1); --transition-drawer: 350ms cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== 2. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--color-text-primary); background-color: var(--color-bg-base); overflow-x: hidden; /* Force dark — no light mode */ color-scheme: dark; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: var(--font-body); } input, select, textarea { font-family: var(--font-body); } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4 { line-height: var(--leading-snug); color: var(--color-text-primary); word-break: break-word; } h1 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); } h3 { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: var(--tracking-wide); } h4 { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-base); letter-spacing: var(--tracking-wide); } p { line-height: var(--leading-relaxed); } @media (min-width: 768px) { h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-3xl); } } @media (min-width: 1024px) { h1 { font-size: var(--text-6xl); } h2 { font-size: var(--text-3xl); } } /* Section micro-label */ .section-label { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); } /* ========================================================================== 4. LAYOUT UTILITIES ========================================================================== */ .container { width: 100%; max-width: var(--max-w-normal); margin-left: auto; margin-right: auto; padding-left: var(--space-6); padding-right: var(--space-6); } .container--narrow { max-width: var(--max-w-narrow); } .container--wide { max-width: var(--max-w-wide); } .container--text { max-width: var(--max-w-text); } .section { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); overflow: hidden; } @media (min-width: 768px) { .container { padding-left: var(--space-10); padding-right: var(--space-10); } .section { padding-top: var(--section-py-md); padding-bottom: var(--section-py-md); } } @media (min-width: 1024px) { .section { padding-top: var(--section-py-lg); padding-bottom: var(--section-py-lg); } } .section-header { text-align: center; max-width: var(--max-w-narrow); margin: 0 auto var(--space-12); } .section-header p { color: var(--color-text-secondary); font-size: var(--text-md); margin-top: var(--space-4); line-height: var(--leading-relaxed); } /* ========================================================================== 5. BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; border-radius: var(--radius-pill); padding: 14px 28px; transition: var(--transition-smooth); cursor: pointer; white-space: nowrap; text-decoration: none; position: relative; overflow: hidden; } .btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; } /* Primary button */ .btn-primary { background-color: var(--color-accent); color: var(--color-bg-base); border: 1px solid var(--color-accent); box-shadow: var(--shadow-glow-sm); } .btn-primary:hover { background-color: var(--color-accent-light); border-color: var(--color-accent-light); box-shadow: var(--shadow-glow-md); transform: scale(1.02); } .btn-primary:active { transform: scale(0.98); box-shadow: none; } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* Ghost button */ .btn-ghost { background-color: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-default); padding: 13px 28px; } .btn-ghost:hover { border-color: var(--color-border-accent); color: var(--color-accent); } .btn-ghost:active { transform: scale(0.98); } /* Text link button */ .btn-text { background: none; border: none; padding: 0; color: var(--color-accent); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; border-radius: 0; box-shadow: none; } .btn-text:hover { color: var(--color-accent-light); } .btn-text .arrow { display: inline-block; transition: transform var(--transition-base); } .btn-text:hover .arrow { transform: translateX(4px); } /* Full-width variant */ .btn-full { width: 100%; } /* ========================================================================== 6. STICKY HEADER ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 100; background-color: rgba(9, 13, 26, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: background-color var(--transition-base), border-color var(--transition-base); } .site-header.scrolled { background-color: rgba(9, 13, 26, 0.92); border-bottom-color: var(--color-border-subtle); } .site-header__inner { max-width: var(--max-w-full); margin: 0 auto; padding: 0 var(--space-6); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } /* Logo */ .site-logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; flex-shrink: 0; } .site-logo__wordmark { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-primary); letter-spacing: -0.01em; } .site-logo__wordmark span { color: var(--color-accent); } /* Primary nav */ .site-nav { display: none; align-items: center; gap: var(--space-8); } @media (min-width: 1024px) { .site-nav { display: flex; } } .site-nav__link { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-secondary); text-decoration: none; transition: color var(--transition-base); white-space: nowrap; } .site-nav__link:hover, .site-nav__link.active { color: var(--color-text-primary); } .site-nav__link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; border-radius: 2px; } /* Services trigger */ .nav-services-trigger { display: flex; align-items: center; gap: 4px; background: none; border: none; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-secondary); cursor: pointer; transition: color var(--transition-base); padding: 0; white-space: nowrap; } .nav-services-trigger:hover, .nav-services-trigger[aria-expanded="true"] { color: var(--color-text-primary); } .nav-services-trigger:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; border-radius: 2px; } .nav-services-trigger .chevron { transition: transform var(--transition-base); flex-shrink: 0; } .nav-services-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); } /* Header right slot */ .site-header__cta { flex-shrink: 0; } /* Hamburger */ .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; gap: 5px; cursor: pointer; background: none; border: none; padding: 0; } .hamburger:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; border-radius: var(--radius-sm); } .hamburger__line { display: block; width: 24px; height: 1.5px; background-color: var(--color-text-primary); transition: var(--transition-base); transform-origin: center; } .hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (min-width: 1024px) { .hamburger { display: none; } } /* ========================================================================== 7. MEGA-MENU ========================================================================== */ .mega-menu { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: 820px; max-width: calc(100vw - var(--space-12)); background-color: var(--color-bg-raised); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--border-default); border-top: 2px solid var(--color-accent); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 200; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms ease-out; pointer-events: none; } .mega-menu.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } .mega-menu__inner { display: grid; grid-template-columns: 1fr 1fr 1fr 260px; padding: var(--space-6); gap: var(--space-4); } .mega-menu__col { padding: var(--space-4); } .mega-menu__col-header { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: var(--border-subtle); } .mega-menu__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; transition: var(--transition-base); border-left: 2px solid transparent; margin-bottom: var(--space-1); } .mega-menu__item:hover { background-color: var(--color-bg-surface); border-left-color: var(--color-accent); } .mega-menu__item:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } .mega-menu__item-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent); margin-top: 2px; } .mega-menu__item:hover .mega-menu__item-icon { color: var(--color-accent-light); } .mega-menu__item-text { flex: 1; min-width: 0; } .mega-menu__item-name { display: block; font-size: 0.875rem; font-weight: var(--weight-medium); color: var(--color-text-primary); line-height: 1.3; margin-bottom: 2px; } .mega-menu__item-desc { display: block; font-size: 0.75rem; font-weight: var(--weight-regular); color: var(--color-text-secondary); line-height: 1.4; } /* Mega-menu featured panel */ .mega-menu__featured { border-left: var(--border-subtle); padding-left: var(--space-6); } .mega-menu__featured-inner { background: var(--color-glass-bg); border-radius: var(--radius-md); padding: var(--space-6); height: 100%; display: flex; flex-direction: column; gap: var(--space-4); } .mega-menu__featured-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); } .mega-menu__featured-body { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); flex: 1; } .mega-menu__featured-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-accent); text-decoration: none; transition: color var(--transition-base); } .mega-menu__featured-link:hover { color: var(--color-accent-light); } .mega-menu__featured-link .arrow { transition: transform var(--transition-base); } .mega-menu__featured-link:hover .arrow { transform: translateX(3px); } /* ========================================================================== 8. MOBILE DRAWER ========================================================================== */ .drawer-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 150; opacity: 0; visibility: hidden; transition: opacity var(--transition-drawer), visibility var(--transition-drawer); } .drawer-overlay.is-open { opacity: 1; visibility: visible; } .mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 380px; background-color: var(--color-bg-base); z-index: 200; transform: translateX(100%); transition: transform var(--transition-drawer); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; } .mobile-drawer.is-open { transform: translateX(0); } .mobile-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6); height: 64px; border-bottom: var(--border-subtle); flex-shrink: 0; } .drawer-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--color-text-primary); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--transition-base); } .drawer-close:hover { color: var(--color-accent); } .drawer-close:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } .mobile-drawer__nav { flex: 1; padding: var(--space-4) 0; } .drawer-nav-item { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6); height: 56px; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-primary); text-decoration: none; border-bottom: var(--border-subtle); transition: color var(--transition-base); } .drawer-nav-item:hover { color: var(--color-accent); } .drawer-nav-item:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; } /* Services accordion in drawer */ .drawer-services-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 var(--space-6); height: 56px; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-primary); background: none; border: none; border-bottom: var(--border-subtle); cursor: pointer; text-align: left; transition: color var(--transition-base); } .drawer-services-trigger:hover { color: var(--color-accent); } .drawer-services-trigger:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; } .drawer-services-trigger .chevron { transition: transform var(--transition-base); } .drawer-services-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); } .drawer-services-panel { display: none; background-color: var(--color-bg-surface); } .drawer-services-panel.is-open { display: block; } .drawer-services-group-label { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); padding: var(--space-4) var(--space-6) var(--space-2); } .drawer-service-link { display: block; padding: var(--space-3) var(--space-6) var(--space-3) var(--space-10); font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; border-bottom: var(--border-subtle); transition: color var(--transition-base); } .drawer-service-link:hover { color: var(--color-accent); } .drawer-service-link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; } .mobile-drawer__footer { padding: var(--space-6); border-top: var(--border-subtle); flex-shrink: 0; } .mobile-drawer__footer .btn { width: 100%; margin-bottom: var(--space-4); } .mobile-drawer__nap { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); text-align: center; } .mobile-drawer__nap a { color: var(--color-text-muted); transition: color var(--transition-base); } .mobile-drawer__nap a:hover { color: var(--color-accent); } /* ========================================================================== 9. HERO SECTION ========================================================================== */ .hero { position: relative; min-height: 100dvh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 120px var(--space-6) var(--space-20); background-color: var(--color-bg-base); } .hero__blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .hero__blob { position: absolute; width: 800px; height: 800px; border-radius: 50%; background: var(--color-accent-glow); filter: blur(120px); pointer-events: none; } .hero__blob--a { top: 50%; left: 30%; transform: translate(-50%, -50%); animation: blob-drift-a 18s ease-in-out infinite alternate; } .hero__blob--b { top: 40%; left: 70%; transform: translate(-50%, -50%); background: rgba(200, 169, 110, 0.15); animation: blob-drift-b 14s ease-in-out infinite alternate; } @keyframes blob-drift-a { 0% { transform: translate(-50%, -50%) translate(0, 0); } 100% { transform: translate(-50%, -50%) translate(30px, -20px); } } @keyframes blob-drift-b { 0% { transform: translate(-50%, -50%) translate(0, 0); } 100% { transform: translate(-50%, -50%) translate(-25px, 15px); } } .hero__grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; } .hero__content { position: relative; z-index: 1; max-width: var(--max-w-narrow); width: 100%; } .hero__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-6); } .hero__h1 { margin-bottom: var(--space-6); } .hero__tagline { font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--color-text-secondary); max-width: 640px; margin: 0 auto var(--space-4); line-height: var(--leading-relaxed); } .hero__support { font-size: var(--text-base); color: var(--color-text-secondary); max-width: 600px; margin: 0 auto var(--space-8); line-height: var(--leading-relaxed); } .hero__ctas { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-bottom: var(--space-12); } @media (min-width: 480px) { .hero__ctas { flex-direction: row; justify-content: center; } } .hero__scroll-indicator { position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; pointer-events: none; } .hero__scroll-line { width: 1px; height: 32px; background: var(--color-text-muted); animation: scroll-pulse 1.5s ease-in-out infinite; } @keyframes scroll-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @media (max-width: 767px) { .hero__scroll-indicator { display: none; } } /* ========================================================================== 10. TRUST BAR ========================================================================== */ .trust-bar { background-color: var(--color-bg-surface); padding: var(--space-10) var(--space-6); text-align: center; border-top: var(--border-subtle); border-bottom: var(--border-subtle); } .trust-bar__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-6); } .trust-bar__lead { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 600px; margin: 0 auto var(--space-6); line-height: var(--leading-normal); } .trust-bar__items { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6) var(--space-10); } .trust-bar__item { display: flex; align-items: center; gap: var(--space-3); } .trust-bar__item-icon { width: 24px; height: 24px; color: var(--color-text-muted); flex-shrink: 0; transition: color var(--transition-base); } .trust-bar__item:hover .trust-bar__item-icon { color: var(--color-text-secondary); } .trust-bar__item-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); line-height: 1.3; text-align: left; } .trust-bar__footnote { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); max-width: 600px; margin-left: auto; margin-right: auto; line-height: var(--leading-normal); } /* ========================================================================== 11. WHY RESEARCH SECTION (two-col type-led) ========================================================================== */ .why-research { background-color: var(--color-bg-base); } .why-research__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: start; } @media (min-width: 1024px) { .why-research__grid { grid-template-columns: 3fr 2fr; gap: var(--space-16); } } .why-research__left .section-label { margin-bottom: var(--space-4); } .why-research__left h2 { margin-bottom: var(--space-6); } .why-research__left p { color: var(--color-text-primary); font-size: var(--text-base); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); } .why-research__left p:last-of-type { margin-bottom: var(--space-6); } .why-research__emphasis { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-primary); border-left: 2px solid var(--color-accent); padding-left: var(--space-4); margin: var(--space-6) 0; font-style: italic; } .why-research__symptoms { display: flex; flex-direction: column; gap: 0; } .why-symptom { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: var(--border-subtle); } .why-symptom:first-child { border-top: var(--border-subtle); } .why-symptom__icon { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; } .why-symptom__content {} .why-symptom__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-1); } .why-symptom__desc { font-size: 0.875rem; color: var(--color-text-secondary); line-height: var(--leading-normal); } /* ========================================================================== 12. SERVICES SECTION (bento-grid) ========================================================================== */ .services { background-color: var(--color-bg-base); } .services-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(6, 1fr); gap: var(--space-4); } /* Row 1: cards 1, 2, 3 — each col-span-2 */ .service-card:nth-child(1), .service-card:nth-child(2), .service-card:nth-child(3) { grid-column: span 2; } /* Row 2: cards 4, 5 — each col-span-3 */ .service-card:nth-child(4), .service-card:nth-child(5) { grid-column: span 3; } /* Row 3: cards 6, 7, 8 — each col-span-2 */ .service-card:nth-child(6), .service-card:nth-child(7), .service-card:nth-child(8) { grid-column: span 2; } /* Row 4: cards 9, 10 — each col-span-3 */ .service-card:nth-child(9), .service-card:nth-child(10) { grid-column: span 3; } } /* Service card */ .service-card { background: var(--color-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-card); transition: var(--transition-smooth); display: flex; flex-direction: column; min-height: 200px; text-decoration: none; color: inherit; position: relative; } .service-card:hover { border-color: var(--color-border-accent); box-shadow: var(--shadow-card-hover); transform: translateY(-4px); } .service-card:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } .service-card__icon-wrap { width: 44px; height: 44px; background: var(--color-accent-muted); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); flex-shrink: 0; transition: var(--transition-base); } .service-card:hover .service-card__icon-wrap { background: rgba(200, 169, 110, 0.18); } .service-card__icon { width: 22px; height: 22px; color: var(--color-accent); transition: color var(--transition-base); } .service-card:hover .service-card__icon { color: var(--color-accent-light); } .service-card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-2); } .service-card__tagline { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); flex: 1; margin-bottom: var(--space-4); } .service-card__link { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-accent); display: inline-flex; align-items: center; gap: 4px; margin-top: auto; transition: color var(--transition-base); } .service-card__link .arrow { transition: transform var(--transition-base); } .service-card:hover .service-card__link { color: var(--color-accent-light); } .service-card:hover .service-card__link .arrow { transform: translateX(4px); } /* Service detail anchors */ .service-anchor { display: block; padding-top: 80px; /* offset for fixed header */ margin-top: -80px; } /* ========================================================================== 13. RESEARCH PROCESS SECTION (numbered-timeline) ========================================================================== */ .process { background-color: var(--color-bg-base); position: relative; overflow: hidden; } .process__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 120px; font-weight: var(--weight-bold); color: var(--color-text-muted); opacity: 0.03; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; letter-spacing: -0.03em; } .process__inner { position: relative; z-index: 1; } .process-timeline { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-12); } @media (min-width: 768px) { .process-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } } @media (min-width: 1024px) { .process-timeline { display: flex; flex-direction: row; align-items: flex-start; gap: 0; justify-content: space-between; } } .process-step { position: relative; flex: 1; padding: var(--space-6); padding-top: var(--space-4); } @media (min-width: 1024px) { .process-step { padding-right: var(--space-6); } .process-step:not(:last-child)::after { content: ''; position: absolute; top: 28px; right: 0; width: 100%; height: 1px; background: repeating-linear-gradient( to right, var(--color-border-subtle) 0px, var(--color-border-subtle) 4px, transparent 4px, transparent 8px ); z-index: -1; } } .process-step__number { font-family: var(--font-display); font-size: 3rem; font-weight: var(--weight-bold); color: var(--color-accent); opacity: 0.30; line-height: 1; margin-bottom: var(--space-2); letter-spacing: var(--tracking-tight); } .process-step__dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-accent); margin-bottom: var(--space-3); } .process-step__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-3); } .process-step__desc { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .process__cta { text-align: center; margin-top: var(--space-12); } /* ========================================================================== 14. WHY VEXORAO SECTION (alternating-blocks) ========================================================================== */ .why-vexorao { background-color: var(--color-bg-base); } .why-vexorao__blocks { margin-top: var(--space-12); } .why-block { display: grid; grid-template-columns: 1fr; gap: var(--space-10); padding: var(--space-10) 0; border-bottom: var(--border-subtle); } .why-block:first-child { border-top: var(--border-subtle); } @media (min-width: 1024px) { .why-block { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-16); } .why-block--odd .why-block__icon { order: 1; } .why-block--odd .why-block__text { order: 2; } .why-block--even .why-block__icon { order: 2; } .why-block--even .why-block__text { order: 1; } } .why-block__icon { display: flex; align-items: center; justify-content: center; padding: var(--space-8); } .why-block__icon svg { width: 80px; height: 80px; color: var(--color-accent); opacity: 0.7; } @media (max-width: 1023px) { .why-block__icon svg { width: 56px; height: 56px; } } .why-block__text .section-label { margin-bottom: var(--space-3); } .why-block__text h3 { font-size: var(--text-2xl); font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-4); line-height: var(--leading-snug); } .why-block__text p { color: var(--color-text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); } .why-block__bullets { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); } .why-block__bullet { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); } .why-block__bullet-icon { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; } /* ========================================================================== 15. CLIENT SCENARIOS (three-wide-cards) ========================================================================== */ .scenarios { background-color: var(--color-bg-base); } .scenarios__disclaimer { font-size: var(--text-sm); color: var(--color-text-muted); max-width: var(--max-w-text); margin: 0 auto var(--space-10); text-align: center; line-height: var(--leading-normal); } .scenarios-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .scenarios-grid { grid-template-columns: 1fr 1fr; } .scenario-card:nth-child(3) { grid-column: 1 / -1; } } @media (min-width: 1024px) { .scenarios-grid { grid-template-columns: repeat(3, 1fr); } .scenario-card:nth-child(3) { grid-column: auto; } } .scenario-card { background: var(--color-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-card); min-height: 280px; display: flex; flex-direction: column; gap: var(--space-4); } .scenario-card__badge { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); padding: 3px 10px; align-self: flex-start; } .scenario-card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-primary); line-height: var(--leading-snug); } .scenario-sub-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-1); } .scenario-card__situation p, .scenario-card__challenge p, .scenario-card__outcome p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .scenario-card__divider { width: 100%; height: 1px; background: var(--color-border-subtle); margin: var(--space-2) 0; } .scenario-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; } .scenario-tag { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-accent); background: var(--color-accent-muted); border-radius: var(--radius-pill); padding: 3px 10px; } /* ========================================================================== 16. PRICING SECTION (five-tier-row) ========================================================================== */ .pricing { background-color: var(--color-bg-base); } .pricing__scroll-hint { display: block; font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-widest); text-transform: uppercase; text-align: center; margin-bottom: var(--space-4); } @media (min-width: 768px) { .pricing__scroll-hint { display: none; } } .pricing-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); align-items: start; } @media (max-width: 767px) { .pricing-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--space-4); padding-bottom: var(--space-4); } .pricing-row::-webkit-scrollbar { display: none; } .pricing-card { min-width: 280px; scroll-snap-align: start; flex-shrink: 0; } } @media (min-width: 768px) and (max-width: 1023px) { .pricing-row { grid-template-columns: repeat(3, 1fr); } } .pricing-card { background: var(--color-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: var(--border-default); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--space-4); position: relative; } .pricing-card--featured { border-color: var(--color-border-strong); background-color: var(--color-bg-surface); box-shadow: var(--shadow-card), var(--shadow-glow-sm); transform: translateY(-8px); } .pricing-card__featured-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background-color: var(--color-accent); color: var(--color-bg-base); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; border-radius: var(--radius-pill); padding: 4px 14px; white-space: nowrap; } .pricing-card__name { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .pricing-card__tagline { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); } .pricing-card__price { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-accent); line-height: 1; } .pricing-card__cadence { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; } .pricing-card__divider { width: 100%; height: 1px; background: var(--color-border-subtle); } .pricing-card__includes { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); } .pricing-card__include-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); } .pricing-card__check { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; margin-top: 1px; } .pricing__note { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); max-width: var(--max-w-text); margin: var(--space-8) auto 0; line-height: var(--leading-normal); } .pricing__closing { text-align: center; margin-top: var(--space-6); } .pricing__closing p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); } /* ========================================================================== 17. FAQ SECTION (faq-accordion) ========================================================================== */ .faq { background-color: var(--color-bg-base); } .faq__framing { text-align: center; font-size: var(--text-md); color: var(--color-text-secondary); margin-bottom: var(--space-10); } .faq-accordion { max-width: var(--max-w-text); margin: 0 auto; } .faq-item { border-bottom: var(--border-subtle); } .faq-item:first-child { border-top: var(--border-subtle); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-primary); transition: color var(--transition-base); } .faq-question:hover { color: var(--color-accent); } .faq-question:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; box-shadow: var(--shadow-focus); } .faq-question__icon { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; transition: transform var(--transition-base); } .faq-question[aria-expanded="true"] .faq-question__icon { transform: rotate(45deg); } .faq-answer { overflow: hidden; max-height: 0; transition: max-height 300ms cubic-bezier(0.16, 1, 0.3, 1); } .faq-answer.is-open { max-height: 500px; } .faq-answer__content { padding-bottom: var(--space-5); font-size: 0.9375rem; color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .faq__bottom-cta { text-align: center; margin-top: var(--space-10); } .faq__bottom-cta p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); } /* ========================================================================== 18. CONTACT SECTION (split-cta) ========================================================================== */ .contact-section { background: var(--gradient-cta-band); border-top: var(--border-subtle); } .contact-section__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: start; } @media (min-width: 1024px) { .contact-section__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); } } .contact-copy .section-label { margin-bottom: var(--space-4); } .contact-copy h2 { margin-bottom: var(--space-6); } .contact-copy__body { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); } .contact-nap { margin-top: var(--space-8); } .contact-nap p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; } .contact-nap a { color: var(--color-text-muted); transition: color var(--transition-base); } .contact-nap a:hover { color: var(--color-accent); } .contact-form-wrap { background: var(--color-bg-raised); border-radius: var(--radius-xl); padding: var(--space-8); border: var(--border-subtle); } /* ========================================================================== 19. CONTACT FORM ========================================================================== */ .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 600px) { .form-row--two-col { grid-template-columns: 1fr 1fr; } } .form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); } .form-group:last-of-type { margin-bottom: 0; } .form-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .form-label .required { color: var(--color-accent); margin-left: 2px; } .form-helper { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .form-input, .form-select, .form-textarea { width: 100%; background-color: var(--color-bg-raised); border: var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--color-text-primary); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); box-sizing: border-box; } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-border-strong); box-shadow: var(--shadow-focus); } .form-input.error, .form-select.error, .form-textarea.error { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(229, 115, 115, 0.20); } .form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B8FA8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } .form-select option { background-color: var(--color-bg-raised); color: var(--color-text-primary); } .form-textarea { min-height: 140px; resize: vertical; } .form-error-msg { font-size: var(--text-xs); color: var(--color-error); margin-top: var(--space-1); display: none; } .form-error-msg.visible { display: block; } .form-submit-wrap { margin-top: var(--space-8); } .form-privacy { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-4); line-height: var(--leading-normal); text-align: center; } /* Honeypot — hidden from all */ .form-honeypot { display: none !important; visibility: hidden; position: absolute; left: -9999px; } /* ========================================================================== 20. FOOTER ========================================================================== */ .site-footer { background-color: var(--color-bg-base); border-top: var(--border-subtle); padding-top: var(--space-16); padding-bottom: 0; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; } } .footer-col__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); } .footer-col__tagline { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-top: var(--space-3); max-width: 260px; } .footer-links { display: flex; flex-direction: column; gap: var(--space-3); } .footer-link { font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; line-height: var(--leading-normal); transition: color var(--transition-base); word-break: break-word; } .footer-link:hover { color: var(--color-text-primary); } .footer-link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 2px; } .footer-contact p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.7; } .footer-contact a { color: var(--color-text-secondary); text-decoration: none; transition: color var(--transition-base); } .footer-contact a:hover { color: var(--color-accent); } .footer-bottom { margin-top: var(--space-12); padding: var(--space-6) 0; border-top: var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-3); text-align: center; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; } } .footer-copyright { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); } .footer-legal-links { display: flex; gap: var(--space-6); } .footer-legal-link { font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-base); } .footer-legal-link:hover { color: var(--color-text-secondary); } .footer-disclaimer { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); } /* ========================================================================== 21. CONTACT PAGE SPECIFIC ========================================================================== */ .contact-page-hero { background-color: var(--color-bg-surface); padding: 140px var(--space-6) var(--space-16); text-align: center; position: relative; overflow: hidden; border-bottom: var(--border-subtle); } .contact-page-hero__grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.3; } .contact-page-hero__inner { position: relative; z-index: 1; max-width: var(--max-w-narrow); margin: 0 auto; } .breadcrumb { margin-bottom: var(--space-6); } .breadcrumb ol { display: flex; align-items: center; gap: var(--space-2); justify-content: center; flex-wrap: wrap; } .breadcrumb li { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; color: var(--color-text-muted); } .breadcrumb li::after { content: '›'; color: var(--color-text-muted); } .breadcrumb li:last-child::after { content: none; } .breadcrumb a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-base); } .breadcrumb a:hover { color: var(--color-accent-light); } .breadcrumb li[aria-current="page"] { color: var(--color-text-secondary); } .contact-page-hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); } .contact-page-hero p { font-size: var(--text-md); color: var(--color-text-secondary); } @media (min-width: 768px) { .contact-page-hero h1 { font-size: var(--text-5xl); } } /* ========================================================================== 22. THANK YOU PAGE ========================================================================== */ .thankyou-section { min-height: 80dvh; display: flex; align-items: center; justify-content: center; padding: 120px var(--space-6) var(--space-16); text-align: center; } .thankyou-inner { max-width: var(--max-w-text); } .thankyou-icon { width: 64px; height: 64px; color: var(--color-accent); margin: 0 auto var(--space-8); animation: check-scale-in 0.4s ease-out both; } @keyframes check-scale-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .thankyou-inner h1 { font-size: var(--text-4xl); margin-bottom: var(--space-6); } @media (min-width: 768px) { .thankyou-inner h1 { font-size: var(--text-5xl); } } .thankyou-inner p { font-size: var(--text-md); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); } .thankyou-inner .closing-line { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-8); } /* ========================================================================== 23. SCROLL REVEAL ========================================================================== */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--transition-enter), transform var(--transition-enter); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal[data-delay="1"] { transition-delay: 0.1s; } .reveal[data-delay="2"] { transition-delay: 0.2s; } .reveal[data-delay="3"] { transition-delay: 0.3s; } .reveal[data-delay="4"] { transition-delay: 0.4s; } .reveal[data-delay="5"] { transition-delay: 0.5s; } /* ========================================================================== 24. UTILITY CLASSES ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .text-accent { color: var(--color-accent); } .text-muted { color: var(--color-text-muted); } .text-center { text-align: center; } .mt-auto { margin-top: auto; } /* ========================================================================== 25. REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; } .hero__blob--a, .hero__blob--b { animation: none; } .hero__scroll-line { animation: none; } .thankyou-icon { animation: none; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 26a. BREADCRUMB NAV (contact.php) ========================================================================== */ .breadcrumb-nav { background-color: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-subtle); padding: var(--space-3) 0; } .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--color-text-muted); } .breadcrumb__item { display: flex; align-items: center; } .breadcrumb__link { color: var(--color-accent); text-decoration: none; transition: color var(--transition-base); } .breadcrumb__link:hover { color: var(--color-accent-light); } .breadcrumb__item--current { color: var(--color-text-secondary); } .breadcrumb__separator { color: var(--color-text-muted); margin: 0 var(--space-1); user-select: none; } /* ========================================================================== 26b. CONTACT PAGE STEPS & TRUST (contact.php body) ========================================================================== */ .contact-steps { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-8); } .contact-step { display: flex; gap: var(--space-5); align-items: flex-start; } .contact-step__num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--color-border-accent); background: var(--color-bg-raised); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent); line-height: 1; margin-top: 2px; } .contact-step__text p { margin: 0; } .contact-step__label { font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2) !important; } .contact-trust { display: flex; flex-direction: column; gap: var(--space-3); } .contact-trust__item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); } .contact-trust__icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-accent); } /* ========================================================================== 26c. THANK YOU PAGE ========================================================================== */ .thank-you-page { min-height: 80dvh; display: flex; align-items: center; justify-content: center; padding: 120px var(--space-6) var(--space-16); text-align: center; } .thank-you__card { max-width: 600px; width: 100%; margin: 0 auto; } .thank-you__icon { width: 72px; height: 72px; margin: 0 auto var(--space-8); animation: check-scale-in 0.45s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes check-scale-in { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .thank-you__heading { font-size: var(--text-4xl); margin-bottom: var(--space-3); color: var(--color-text-primary); } .thank-you__subheading { font-size: var(--text-lg); color: var(--color-accent); font-weight: var(--weight-medium); margin-bottom: var(--space-6); } .thank-you__body { font-size: var(--text-md); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); } .thank-you__body a { color: var(--color-accent); } .thank-you__actions { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); margin-bottom: var(--space-5); } .thank-you__small { font-size: var(--text-sm); color: var(--color-text-muted); } @media (min-width: 768px) { .thank-you__heading { font-size: var(--text-5xl); } } /* ========================================================================== 26. PRINT ========================================================================== */ @media print { .site-header, .hamburger, .mobile-drawer, .drawer-overlay, .mega-menu, .hero__blobs, .hero__scroll-indicator { display: none !important; } body { background: white; color: black; } } /* ════════════════════════════════════════════════════════════════════════ LEGAL PAGES (privacy.php, terms.php) ════════════════════════════════════════════════════════════════════════ */ .legal-page { padding: var(--space-12) 0 var(--space-16); } .legal-page__inner { max-width: 760px; margin: 0 auto; } .legal-page .section-label { margin-bottom: var(--space-3); } .legal-page h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; color: var(--color-text-primary); margin: 0 0 var(--space-3); } .legal-page__updated { color: var(--color-text-muted); font-size: 0.875rem; margin: 0 0 var(--space-8); } .legal-page h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-text-primary); margin: var(--space-10) 0 var(--space-3); } .legal-page p, .legal-page li { color: var(--color-text-secondary); line-height: 1.75; font-size: 1rem; } .legal-page p { margin: 0 0 var(--space-4); } .legal-page ul { margin: 0 0 var(--space-4); padding-left: 1.4em; } .legal-page li { margin-bottom: var(--space-2); } .legal-page a { color: var(--color-accent); } .legal-page a:hover { text-decoration: underline; }