/* ============================================================ X4 Digital — styles.css System: Bold Creative × Friendly Tech Palette: Approved Vision exact values only ============================================================ */ /* ── 1. TOKENS ─────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg-page: #F7F6F2; /* warm parchment — page base */ --bg-alt: #ECEAE4; /* slightly deeper warm — alt sections */ --bg-void: #0C0C0F; /* near-void — dark hero / dark page */ --bg-dark-surface: #16161A; /* elevated surface inside dark */ /* Text */ --text-primary: #141417; /* near-black body */ --text-muted: #5A5A62; /* secondary / captions on light */ --text-on-dark: #EDECF0; /* primary on dark surfaces */ --text-muted-dark: #86868E; /* muted on dark surfaces */ /* Accent — single electric lime, used decisively */ --accent: #E8FF4A; --accent-on: #141417; /* text colour when sitting on accent */ --accent-deep: #D4EB38; /* hover / pressed state */ /* Borders */ --border-light: rgba(20,20,23,0.10); --border-dark: rgba(237,236,240,0.10); /* Typography */ --font-display: 'Syne', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Type scale */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 2rem; /* 32 */ --text-4xl: 2.5rem; /* 40 */ --text-5xl: 3.5rem; /* 56 */ --text-6xl: 4.5rem; /* 72 */ /* Spacing — 4 px grid */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Transitions */ --t-snap: 0.15s ease; --t-reveal: 0.72s cubic-bezier(0.25, 0, 0, 1); } /* ── DARK MODE — class swap on ─────────────────────── */ html.dark { --bg-page: #0C0C0F; --bg-alt: #14141A; --bg-void: #0C0C0F; --bg-dark-surface: #1C1C24; --text-primary: #EDECF0; --text-muted: #86868E; --border-light: rgba(237,236,240,0.10); } /* ── 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); line-height: 1.65; color: var(--text-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.28s ease, color 0.28s ease; } img { max-width: 100%; height: auto; display: block; /* fade-in: .loaded added by JS */ opacity: 0; transition: opacity 0.42s ease; } img.loaded { opacity: 1; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ── 3. LAYOUT ────────────────────────────────────────────── */ .container { max-width: 1160px; margin: 0 auto; padding: 0 clamp(var(--sp-6), 5vw, var(--sp-16)); } .container-narrow { max-width: 740px; margin: 0 auto; padding: 0 clamp(var(--sp-6), 5vw, var(--sp-16)); } .container-wide { max-width: 1360px; margin: 0 auto; padding: 0 clamp(var(--sp-6), 5vw, var(--sp-16)); } /* ── 4. TYPOGRAPHY GLOBALS ────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.0; letter-spacing: -0.035em; color: var(--text-primary); } h2 { font-size: clamp(30px, 4vw, 52px); } h3 { font-size: clamp(20px, 2.5vw, 32px); } h4 { font-size: var(--text-xl); } p { line-height: 1.72; color: var(--text-muted); } /* Eyebrow label */ .label { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-6); } .label-accent { color: var(--accent); } /* Horizontal accent rule */ .rule-accent { display: block; width: 32px; height: 2.5px; background: var(--accent); margin-bottom: var(--sp-6); } /* ── 5. NAVIGATION ─────────────────────────────────────────── */ [data-nav] { position: sticky; top: 0; z-index: 200; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(var(--sp-6), 5vw, var(--sp-12)); background: var(--bg-page); border-bottom: 1px solid transparent; transition: border-color 0.28s ease, background 0.28s ease, backdrop-filter 0.28s ease; } [data-nav].scrolled { border-color: var(--border-light); background: color-mix(in srgb, var(--bg-page) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav-wordmark { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.04em; color: var(--text-primary); text-decoration: none; flex-shrink: 0; transition: color var(--t-snap); } .nav-wordmark:hover { color: var(--accent); } .nav-links { display: flex; gap: var(--sp-8); } .nav-links a { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); transition: color var(--t-snap); } .nav-links a:hover { color: var(--text-primary); } .nav-right { display: flex; align-items: center; gap: var(--sp-3); } /* Theme toggle button */ [data-theme-toggle] { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border-light); background: transparent; color: var(--text-primary); cursor: pointer; flex-shrink: 0; transition: background var(--t-snap), border-color var(--t-snap); } [data-theme-toggle]:hover { background: var(--bg-alt); } [data-theme-toggle] svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Show moon in light, sun in dark */ .icon-sun { display: none; } .icon-moon { display: block; } html.dark .icon-sun { display: block; } html.dark .icon-moon { display: none; } /* Mobile hamburger */ [data-mobile-toggle] { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; background: transparent; border: none; cursor: pointer; flex-shrink: 0; } [data-mobile-toggle] span { display: block; width: 20px; height: 1.5px; background: var(--text-primary); transform-origin: center; transition: transform 0.28s cubic-bezier(0.25,0,0,1), opacity 0.2s ease; } [data-mobile-toggle].open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } [data-mobile-toggle].open span:nth-child(2) { opacity: 0; transform: scaleX(0); } [data-mobile-toggle].open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile drawer */ [data-mobile-nav] { display: none; position: fixed; top: 64px; left: 0; right: 0; background: var(--bg-page); border-bottom: 1px solid var(--border-light); padding: var(--sp-6) clamp(var(--sp-6), 5vw, var(--sp-12)) var(--sp-8); z-index: 199; flex-direction: column; gap: 0; } [data-mobile-nav].open { display: flex; } [data-mobile-nav] a { font-size: var(--text-lg); font-weight: 500; color: var(--text-primary); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-light); transition: color var(--t-snap); } [data-mobile-nav] a:last-of-type { border-bottom: none; } [data-mobile-nav] a:hover { color: var(--accent); } [data-mobile-nav] .btn-pill { margin-top: var(--sp-6); text-align: center; justify-content: center; } /* ── 6. BUTTONS ────────────────────────────────────────────── */ /* Primary pill — electric lime */ .btn-pill { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-on); padding: 15px 34px; border-radius: 999px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; text-decoration: none; min-height: 50px; border: none; cursor: pointer; white-space: nowrap; transition: background var(--t-snap), transform var(--t-snap), box-shadow var(--t-snap); } .btn-pill:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(232,255,74,0.30); } .btn-pill:active { transform: translateY(0); } /* Ghost pill */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-light); padding: 14px 32px; border-radius: 999px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; text-decoration: none; min-height: 50px; cursor: pointer; white-space: nowrap; transition: background var(--t-snap), color var(--t-snap), border-color var(--t-snap); } .btn-ghost:hover { background: var(--text-primary); color: var(--bg-page); border-color: var(--text-primary); } html.dark .btn-ghost { color: var(--text-on-dark); border-color: var(--border-dark); } html.dark .btn-ghost:hover { background: var(--text-on-dark); color: var(--bg-void); } /* Text arrow link */ .btn-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-light); padding-bottom: 1px; line-height: 1; transition: color var(--t-snap), border-color var(--t-snap); } .btn-arrow:hover { color: var(--accent); border-color: var(--accent); } html.dark .btn-arrow { color: var(--text-on-dark); } html.dark .btn-arrow:hover { color: var(--accent); } /* ── 7. HERO ───────────────────────────────────────────────── */ /* Electric shimmer — fires once ~1.5s then settles */ @keyframes headline-charge { 0% { filter: brightness(1) contrast(1); } 10% { filter: brightness(1.7) contrast(1.2); } 18% { filter: brightness(0.85) contrast(1); } 32% { filter: brightness(2.1) contrast(1.35); } 44% { filter: brightness(0.9) contrast(1); } 58% { filter: brightness(1.5) contrast(1.1); } 70% { filter: brightness(1) contrast(1); } 100% { filter: brightness(1) contrast(1); } } @keyframes volt-accent { 0% { filter: brightness(1) saturate(1); } 10% { filter: brightness(1.9) saturate(1.5); } 18% { filter: brightness(0.7) saturate(0.8); } 32% { filter: brightness(2.6) saturate(2.0); } 44% { filter: brightness(0.8) saturate(1); } 58% { filter: brightness(1.7) saturate(1.4); } 72% { filter: brightness(1) saturate(1); } 100% { filter: brightness(1) saturate(1); } } .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: var(--sp-16) 0 var(--sp-20); overflow: hidden; background: var(--bg-page); } /* Full-bleed abstract background image */ .hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; /* overridden in dark mode */ transition: opacity 0.5s ease; } html.dark .hero-bg img { opacity: 0.16; } /* In light mode — very faint grid */ html:not(.dark) .hero-bg img { opacity: 0.04; } .hero-content { position: relative; z-index: 1; width: 100%; } .hero-inner { max-width: 660px; } /* Animated headline */ .hero-headline { font-family: var(--font-display); font-size: clamp(46px, 7.5vw, 88px); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; color: var(--text-primary); margin-bottom: var(--sp-4); animation: headline-charge 1.6s cubic-bezier(0.25,0,0,1) 0.15s both; } .hero-headline .volt { color: var(--accent); animation: volt-accent 1.6s cubic-bezier(0.25,0,0,1) 0.15s both; } /* €1 typographic anchor — the visual statement */ .hero-price { font-family: var(--font-display); font-size: clamp(88px, 13vw, 130px); font-weight: 800; line-height: 0.82; letter-spacing: -0.065em; color: var(--accent); display: block; margin-bottom: var(--sp-8); animation: volt-accent 1.6s cubic-bezier(0.25,0,0,1) 0.25s both; } .hero-sub { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.68; color: var(--text-muted); max-width: 420px; margin-bottom: var(--sp-10); } html.dark .hero-sub { color: var(--text-muted-dark); } .hero-actions { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; } /* ── 8. HOW IT WORKS — numbered typographic flow ─────────── */ /* Intentionally exhales wide: ~140px vertical per side */ .how-it-works { padding: 140px 0; background: var(--bg-page); } .section-header { margin-bottom: var(--sp-16); max-width: 520px; } .section-header h2 { margin-top: var(--sp-4); } .section-header p { margin-top: var(--sp-4); font-size: var(--text-lg); max-width: 460px; } /* Step list border-block */ .step-list { border-top: 1px solid var(--border-light); } .step-row { display: grid; grid-template-columns: clamp(68px,18vw,192px) 1fr; gap: var(--sp-8); align-items: start; padding: var(--sp-10) 0; border-bottom: 1px solid var(--border-light); } /* Oversized numeral — ~20vw visual anchor */ .step-num { font-family: var(--font-display); font-size: clamp(68px,18vw,192px); font-weight: 800; line-height: 0.82; letter-spacing: -0.065em; color: var(--accent); user-select: none; } .step-body { padding-top: clamp(6px,1.5vw,20px); padding-bottom: var(--sp-6); } .step-body h3 { font-size: clamp(22px, 2.8vw, 38px); font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: var(--sp-3); } .step-body p { font-size: var(--text-lg); line-height: 1.7; max-width: 480px; } /* ── 9. SOCIAL PROOF STRIP ─────────────────────────────────── */ .proof-strip { padding: 56px 0; background: var(--bg-alt); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } html.dark .proof-strip { background: var(--bg-dark-surface); } .proof-inner { display: flex; align-items: center; justify-content: center; gap: clamp(var(--sp-10),6vw,var(--sp-24)); flex-wrap: wrap; } .proof-divider { width: 1px; height: 36px; background: var(--border-light); flex-shrink: 0; } html.dark .proof-divider { background: var(--border-dark); } .proof-stat-num { display: block; font-family: var(--font-display); font-size: clamp(28px,3.8vw,44px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--text-primary); } .proof-stat-label { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--sp-1); } /* ── 10. PRODUCT SPLIT SECTION ─────────────────────────────── */ /* Asymmetric — text 55%, image 45% */ .product-split { padding: 112px 0; background: var(--bg-page); } .split-grid { display: grid; grid-template-columns: 55% 1fr; gap: clamp(var(--sp-10),5vw,var(--sp-16)); align-items: center; } .split-grid.flip { grid-template-columns: 1fr 55%; } .split-grid.flip .split-text { order: 2; } .split-grid.flip .split-img { order: 1; } .split-text h2 { margin-bottom: var(--sp-6); } .split-text p { font-size: var(--text-lg); margin-bottom: var(--sp-8); max-width: 480px; } /* Image container — PATTERN A (absolute fill) */ .split-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .split-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Floating offset — image lifts above baseline */ .split-img.float { transform: translateY(-20px); } /* ── 11. BRIDGE CTA BAND ───────────────────────────────────── */ .bridge-cta { padding: 92px 0; background: var(--bg-alt); text-align: center; } html.dark .bridge-cta { background: var(--bg-dark-surface); } .bridge-cta h2 { max-width: 560px; margin: var(--sp-4) auto var(--sp-8); font-size: clamp(26px,3.8vw,46px); } .bridge-cta p { max-width: 400px; margin: 0 auto var(--sp-10); font-size: var(--text-lg); } .bridge-cta-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-6); flex-wrap: wrap; } /* ── 12. PROCESS WALKTHROUGH — alternating rows (deep-dive) ── */ .process-section { padding: 112px 0; background: var(--bg-page); } html.dark .process-section { background: var(--bg-void); } .process-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-10),5vw,var(--sp-16)); align-items: center; padding: var(--sp-16) 0; border-bottom: 1px solid var(--border-light); } html.dark .process-row { border-color: var(--border-dark); } .process-row:first-of-type { border-top: 1px solid var(--border-light); } html.dark .process-row:first-of-type { border-color: var(--border-dark); } /* Alternating flip */ .process-row.flip .process-text { order: 2; } .process-row.flip .process-img { order: 1; } .process-step-num { display: block; font-family: var(--font-display); font-size: clamp(52px,8vw,96px); font-weight: 800; line-height: 0.85; letter-spacing: -0.055em; color: var(--accent); margin-bottom: var(--sp-4); } .process-text { max-width: 460px; } .process-text h3 { font-size: clamp(20px,2.4vw,30px); font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: var(--sp-4); line-height: 1.12; } html.dark .process-text h3 { color: var(--text-on-dark); } .process-text p { font-size: var(--text-base); line-height: 1.75; } /* Process image — PATTERN A */ .process-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .process-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ── 13. FEATURE COMPARISON — editorial two-column ──────────── */ .comparison-section { padding: 112px 0; background: var(--bg-alt); } html.dark .comparison-section { background: var(--bg-dark-surface); } .comparison-grid { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(var(--sp-12),6vw,var(--sp-24)); align-items: start; } .comparison-col h3 { font-size: clamp(18px,2vw,26px); font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); margin-bottom: var(--sp-8); } html.dark .comparison-col h3 { color: var(--text-on-dark); } .comparison-col h3.muted { color: var(--text-muted); } .comparison-list { display: flex; flex-direction: column; } .comparison-item { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-light); font-size: var(--text-base); color: var(--text-primary); } html.dark .comparison-item { border-color: var(--border-dark); color: var(--text-on-dark); } .comparison-item:last-child { border-bottom: none; } .comparison-item.dimmed { color: var(--text-muted); } .check-mark { flex-shrink: 0; width: 18px; height: 18px; background: var(--accent); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .check-mark svg { width: 10px; height: 10px; stroke: #141417; stroke-width: 2.5; fill: none; } .cross-mark { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .cross-mark svg { width: 12px; height: 12px; stroke: var(--text-muted); stroke-width: 2; fill: none; } /* ── 14. PRICING PANEL ─────────────────────────────────────── */ /* Compressed, focused — deliberate negative space */ .pricing-section { padding: 100px 0; background: var(--bg-page); } html.dark .pricing-section { background: var(--bg-void); } .pricing-card { max-width: 480px; margin: 0 auto; background: var(--bg-alt); border: 1px solid var(--border-light); padding: clamp(var(--sp-10),5vw,var(--sp-16)); } html.dark .pricing-card { background: var(--bg-dark-surface); border-color: var(--border-dark); } .pricing-badge { display: inline-block; background: var(--accent); color: var(--accent-on); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 14px; border-radius: 999px; margin-bottom: var(--sp-8); } /* Activation price anchor */ .pricing-activation-price { font-family: var(--font-display); font-size: clamp(52px,8vw,80px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.9; color: var(--accent); display: block; margin-bottom: var(--sp-3); } .pricing-activation-note { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--sp-10); line-height: 1.5; } .pricing-divider { height: 1px; background: var(--border-light); margin-bottom: var(--sp-8); } html.dark .pricing-divider { background: var(--border-dark); } .pricing-plan-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-3); } .pricing-monthly-price { font-family: var(--font-display); font-size: clamp(28px,3.5vw,42px); font-weight: 800; letter-spacing: -0.04em; color: var(--text-primary); margin-bottom: var(--sp-2); } html.dark .pricing-monthly-price { color: var(--text-on-dark); } .pricing-monthly-price span { font-size: var(--text-lg); font-weight: 500; letter-spacing: 0; color: var(--text-muted); } .pricing-after-note { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--sp-10); } .pricing-feature-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-10); } .pricing-feature { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--text-primary); } html.dark .pricing-feature { color: var(--text-on-dark); } .pricing-feature::before { content: ''; display: block; width: 5px; height: 5px; background: var(--accent); flex-shrink: 0; } .pricing-cta { display: block; } /* ── 15. TESTIMONIALS ─────────────────────────────────────── */ .testimonials-section { padding: 100px 0; background: var(--bg-alt); position: relative; overflow: hidden; } html.dark .testimonials-section { background: var(--bg-dark-surface); } /* Background texture (very low opacity) */ .testimonials-texture { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .testimonials-texture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.03; } html.dark .testimonials-texture img { opacity: 0.07; } .testimonials-inner { position: relative; z-index: 1; } .testimonials-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-6); margin-top: var(--sp-12); } .testimonial-card { background: var(--bg-page); border: 1px solid var(--border-light); padding: var(--sp-8); } html.dark .testimonial-card { background: var(--bg-surface, #18181E); border-color: var(--border-dark); } .testimonial-platform { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-4); } .testimonial-stars { display: flex; gap: 3px; margin-bottom: var(--sp-4); } .testimonial-stars i { display: block; width: 11px; height: 11px; background: var(--accent); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); } .testimonial-card blockquote { font-family: var(--font-display); font-size: clamp(15px,1.6vw,19px); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--sp-6); } html.dark .testimonial-card blockquote { color: var(--text-on-dark); } .testimonial-reviewer { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } html.dark .testimonial-reviewer { color: var(--text-on-dark); } .testimonial-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--sp-1); } /* ── 16. FINAL CTA — typographic anchor ──────────────────── */ .final-cta { padding: 96px 0; background: var(--bg-void); text-align: center; overflow: hidden; } /* 'Live.' or '€1' anchor at ~96px */ .cta-anchor { display: block; font-family: var(--font-display); font-size: clamp(72px,11vw,116px); font-weight: 800; line-height: 0.88; letter-spacing: -0.06em; color: var(--accent); margin-bottom: var(--sp-6); } .final-cta h2 { font-size: clamp(26px,3.8vw,46px); color: var(--text-on-dark); max-width: 540px; margin: 0 auto var(--sp-6); } .final-cta p { font-size: var(--text-lg); color: var(--text-muted-dark); max-width: 380px; margin: 0 auto var(--sp-10); line-height: 1.65; } .final-cta-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-6); flex-wrap: wrap; } /* ── 17. FOOTER ────────────────────────────────────────────── */ .footer { padding: var(--sp-12) 0 var(--sp-8); background: var(--bg-void); border-top: 1px solid rgba(237,236,240,0.07); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; } .footer-wordmark { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.04em; color: var(--text-on-dark); text-decoration: none; } .footer-links { display: flex; gap: var(--sp-6); flex-wrap: wrap; } .footer-links a { font-size: var(--text-sm); color: var(--text-muted-dark); text-decoration: none; transition: color var(--t-snap); } .footer-links a:hover { color: var(--text-on-dark); } .footer-copy { font-size: var(--text-xs); color: var(--text-muted-dark); } /* ── 18. SCROLL REVEAL ─────────────────────────────────────── */ /* Convention: class-based — .reveal / .reveal.visible */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--t-reveal), transform var(--t-reveal); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger siblings automatically */ .reveal:nth-child(2) { transition-delay: 0.08s; } .reveal:nth-child(3) { transition-delay: 0.16s; } .reveal:nth-child(4) { transition-delay: 0.24s; } .reveal:nth-child(5) { transition-delay: 0.32s; } .reveal:nth-child(6) { transition-delay: 0.40s; } /* Fade-only variant (no translate) */ .reveal-fade { opacity: 0; transition: opacity var(--t-reveal); } .reveal-fade.visible { opacity: 1; } /* ── 19. SECTION UTILITY ───────────────────────────────────── */ .section-dark-wrap { background: var(--bg-void); color: var(--text-on-dark); } .section-dark-wrap h2, .section-dark-wrap h3, .section-dark-wrap h4 { color: var(--text-on-dark); } .section-dark-wrap p { color: var(--text-muted-dark); } .section-dark-wrap .label { color: var(--text-muted-dark); } .section-rule { height: 1px; background: var(--border-light); border: none; } html.dark .section-rule { background: var(--border-dark); } /* Page intro header (deep-dive) */ .page-intro { padding: var(--sp-16) 0 var(--sp-10); background: var(--bg-page); } html.dark .page-intro { background: var(--bg-void); } .page-intro h1 { font-family: var(--font-display); font-size: clamp(38px,6vw,72px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.96; color: var(--text-primary); max-width: 680px; margin-bottom: var(--sp-6); } html.dark .page-intro h1 { color: var(--text-on-dark); } .page-intro p { font-size: var(--text-lg); max-width: 500px; } /* ── 20. RESPONSIVE ─────────────────────────────────────────── */ /* 768px and below */ @media (max-width: 768px) { /* Nav */ .nav-links { display: none; } [data-mobile-toggle] { display: flex; } /* Hero */ .hero { min-height: 90vh; padding: var(--sp-12) 0 var(--sp-16); align-items: flex-end; } .hero-price { font-size: clamp(72px,16vw,110px); } /* How-it-works */ .how-it-works { padding: 88px 0; } .step-row { grid-template-columns: clamp(52px,14vw,96px) 1fr; gap: var(--sp-6); } /* Splits */ .split-grid, .split-grid.flip { grid-template-columns: 1fr; gap: var(--sp-8); } .split-grid.flip .split-text, .split-grid.flip .split-img { order: unset; } .split-img.float { transform: none; } /* Process */ .process-row, .process-row.flip { grid-template-columns: 1fr; gap: var(--sp-8); } .process-row.flip .process-text, .process-row.flip .process-img { order: unset; } /* Comparison */ .comparison-grid { grid-template-columns: 1fr; gap: var(--sp-10); } /* Testimonials */ .testimonials-grid { grid-template-columns: 1fr; } /* Footer */ .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-6); } } /* 640px and below */ @media (max-width: 640px) { .hero-actions { flex-direction: column; align-items: flex-start; } .bridge-cta-row, .final-cta-row { flex-direction: column; align-items: center; } .proof-divider { display: none; } .proof-inner { gap: var(--sp-8); } .pricing-card { margin: 0 var(--sp-6); } .footer-links { flex-direction: column; gap: var(--sp-4); } } /* 1024px+ */ @media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(2,1fr); } } /* ── 21. ACCESSIBILITY ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .hero-headline, .hero-headline .volt, .hero-price { animation: none; } .reveal, .reveal-fade { opacity: 1; transform: none; transition: none; } } a:focus-visible, button:focus-visible, [data-theme-toggle]:focus-visible, [data-mobile-toggle]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .btn-pill:focus-visible, .btn-ghost:focus-visible { outline-offset: 4px; border-radius: 999px; } /* ── CSS safety-net (injected by proxy-orchestrator) ── Ensures image containers always have resolvable dimensions so imgs with height:100% don't collapse. Scoped to common container class patterns. */ [class*="image-col"], [class*="image-wrap"], [class*="img-wrap"], [class*="img-container"], [class*="image-container"], [class*="photo-wrap"], [class*="photo-container"], .bento-card, .listing-img-wrap, .card-image, .feature-image, .hero-image, .hero-media { min-height: 320px; aspect-ratio: 3 / 2; position: relative; } [class*="image-col"] > img, [class*="image-wrap"] > img, [class*="img-wrap"] > img, [class*="img-container"] > img, [class*="image-container"] > img, [class*="photo-wrap"] > img, [class*="photo-container"] > img, .bento-card > img, .bento-card-image > img, .listing-img-wrap > img, .card-image > img, .feature-image > img, .hero-image > img, .hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 768px) { .hero-image-col, .hero-media, .hero-image { aspect-ratio: auto; min-height: 100vh; } } /* Fallback for any bare img with percentage height */ img[style*="height: 100%"], img[style*="height:100%"] { min-height: 320px; } /* ── end safety-net ── */