/* ========================================================================== LIQUID GLASS v2 — LANDING PAGE DESIGN SYSTEM (business-agnostic) Apple Liquid Glass aesthetic: deeply frosted translucent panels over a soft aurora-mesh backdrop, specular rim highlights, glossy pill controls, large continuous radii, system (SF) typography. THEMING: edit the :root tokens only. The whole page recolors from --brand-mid / --accent-a / --accent-b / --accent-glow and the three --aurora-* washes. Nothing below the token block needs touching. ACCESSIBILITY GUARDRAILS • Any glass surface carrying body text uses --glass-strong (≥0.80 white fill) so WCAG AA contrast holds over the busy backdrop. Decorative glass may be lighter — never put body copy on light chips. • Real backdrop blur only where it is perceptible (header pill, hero panels, light cards, sticky bar, lightbox). Near-opaque dark bands and tiny chips use plain fills — same look, far fewer GPU layers. • @supports fallback for browsers without backdrop-filter; print styles; forced-colors support; prefers-reduced-motion and prefers-reduced-transparency both honored. INSERTION POINTS: every [data-slot] element is an injection container — the hosting app replaces ONLY its children. Styling for injected form fields is provided via [data-slot="lead-form"] descendant rules, so the live form inherits the design with no classes required. Class "slots-live" on hides the purple preview tags. SECTIONS: styles are grouped per page section (banner comments). Leaving the CSS of a deleted HTML section in place is harmless. ========================================================================== */ /* ---------- Design tokens ---------- */ :root { /* Accent is the ONLY saturated family on the page: buttons, icons, small highlights. Page base, headings and dark bands stay neutral so the template suits any kind of business. */ --heading: #16201d; /* neutral charcoal for headings on light */ --brand: #0b3d2b; /* deep accent: reserved moments */ --brand-mid: #0e6a49; /* accent: icons, links, highlights (AA on white) */ --accent-a: #12925f; /* CTA gradient start */ --accent-b: #0b6b47; /* CTA gradient end (AA with white text) */ --accent-glow: rgba(21, 160, 107, 0.42); --tint: #f2f4f5; /* neutral page base */ /* Aurora mesh washes — strong enough for the glass blur to visibly refract, still composited to pale neutral washes over the light base */ --aurora-1: rgba(96, 178, 138, 0.46); --aurora-2: rgba(116, 146, 162, 0.42); --aurora-3: rgba(158, 203, 168, 0.42); /* Ink (--muted holds ≥4.5:1 even over the strongest aurora wash) */ --ink: #1c2523; --muted: #4c5751; --on-dark: #f3f6f4; --on-dark-muted: #bcc7c1; /* Glass surfaces */ --glass: rgba(255, 255, 255, 0.52); /* decorative / chips */ --glass-strong: rgba(255, 255, 255, 0.82); /* text-bearing cards */ --glass-border: rgba(22, 32, 28, 0.10); --glass-blur: 24px; --glass-dark: rgba(21, 27, 25, 0.90); /* neutral charcoal band */ --glass-dark-border: rgba(255, 255, 255, 0.16); --hero-panel: rgba(14, 20, 18, 0.69); /* dark glass over the photo. How much photo shows through is capped by whichever hero text colour is weakest, measured against a worst-case pure-white photo behind the weakest part of .hero-scrim, with no credit for the blur. That is now --star-on-dark, at 4.80:1 here; it drops under AA 4.5:1 below 0.68. The white copy has far more room (7.3:1+), so 0.68 is the hard floor and 0.69 is the shipped value — do not go below it, and re-check this if any hero text is ever re-tinted. The no-blur fallbacks below stay heavier (0.88 / 0.92): without backdrop-filter there is no blur averaging down the photo's bright detail. */ /* Specular rim: top highlight + faint inner frost */ --specular: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.28); --specular-dark: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.05); /* Feedback */ --success: #127a4e; --error: #bb3a2b; --star: #7a4300; --star-on-dark: #ffc94d; /* the same glyphs on dark glass — --star measures ~1.5:1 against --hero-panel */ /* Shape & elevation */ --radius-xl: 30px; --radius-card: 22px; --radius-btn: 999px; --shadow-soft: 0 4px 16px rgba(12, 42, 32, 0.07), 0 14px 44px rgba(12, 42, 32, 0.10); --shadow-lifted: 0 10px 30px rgba(12, 42, 32, 0.15), 0 26px 72px rgba(12, 42, 32, 0.18); /* Type — system stack renders SF Pro on Apple devices */ --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Layout */ --container: 73rem; --section-gap: clamp(3.5rem, 6vw, 5.75rem); --header-clear: 94px; /* fixed-header clearance for anchor jumps */ --hero-pad-b: 4.5rem; /* hero bottom padding — single source of truth */ --hero-form-gap: 1.25rem; /* guaranteed beat between hero panel and form card */ } /* Cheaper blur on small screens — imperceptible at 375px, kinder to GPUs */ @media (max-width: 720px) { :root { --glass-blur: 14px; } } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-clear) + 0.75rem); scroll-padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background-color: var(--tint); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } /* Aurora mesh: fixed, behind everything; glass panels refract it */ .aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(44rem 32rem at 12% 6%, var(--aurora-1), transparent 65%), radial-gradient(40rem 30rem at 88% 14%, var(--aurora-2), transparent 65%), radial-gradient(46rem 36rem at 20% 88%, var(--aurora-3), transparent 65%), radial-gradient(38rem 30rem at 78% 70%, var(--aurora-1), transparent 65%), linear-gradient(180deg, #f1f7f2 0%, var(--tint) 48%, #e6f1e9 100%); } img, svg, video { max-width: 100%; height: auto; display: block; } /*