/* ========================================================================== STAY FREE ENTERPRISE — home page hero (index.html only) PERF SPLIT: this file now holds ONLY above-the-fold hero rules (LCP- critical, kept render-blocking). Every other home-page beat (Two Paths, Founder strip, Ladder teaser, Proof band, Dust Reformation closing) moved to css/home-below.css, loaded async (preload+swap) since none of it is visible before first paint — see index.html . Consumes tokens.css custom properties only. No raw hexes. ========================================================================== */ /* ---------------------------------------------------------------- hero -- */ .sf-hero__inner { padding-block: var(--sf-space-9) var(--sf-space-8); } .sf-hero__copy { position: relative; z-index: 1; max-width: 40rem; } .sf-hero__sub { font-size: var(--sf-text-md); color: var(--sf-text-secondary); margin-top: var(--sf-space-4); margin-bottom: var(--sf-space-5); max-width: 34rem; } /* explicit stacking: the frond shadow reads ON TOP of the headline (a soft multiply darkening pass), the headline stays fully legible beneath it — this is the intended "sunlight through palm leaves across the hero" beat, not a bug. Declared explicitly rather than relying on DOM-order z-index tie-breaking between the two modules. FIX (QA): pin-drop.css's `.sf-pin-hero > :not(.fx-canvas-abs):not(.sf-pin-hero-static)` rule (specificity 0,3,0) only excludes the GL canvas from being pulled into normal flow — it doesn't know about the light-curtain canvas, which lives on the SAME host element once the two modules are combined on this page. Since light-curtain.js never sets `.style.position` inline, that higher- specificity rule was winning over light-curtain.css's `position:absolute` and putting the canvas back into normal flow. With the canvas in-flow and its JS setting `style.height = host.clientHeight` on every ResizeObserver tick, host height and canvas height fed each other in an unbounded loop (observed growing to millions of px within seconds, tanking layout/paint and hanging screenshot capture). Re-asserting position:absolute + full geometry here, at #hero's higher (1,0,0) specificity, restores the canvas to out-of-flow and breaks the loop without touching either shared module. */ #hero .sf-light-curtain__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } #hero .sf-hero__copy { z-index: 1; } @media (max-width: 560px) { .sf-hero__inner { padding-block: var(--sf-space-8) var(--sf-space-7); } } /* ========================================================================== HERO = the real 3D logo (2026-07-10, procedural WebGL pin retired). Server-rendered .sf-pin-hero-static is now the hero visual on ALL viewports: right-of-center column on desktop, above the copy on mobile. ========================================================================== */ .sf-pin-hero--imghero .sf-pin-hero-static, .sf-pin-hero .sf-pin-hero-static { display: flex; align-items: center; justify-content: center; } @media (min-width: 769px) { .sf-pin-hero .sf-pin-hero-static { position: absolute; inset: 0; justify-content: flex-end; padding-right: 7vw; pointer-events: none; } .sf-pin-hero .sf-pin-hero-static__mark { width: clamp(240px, 26vw, 400px); height: auto; } } /* Mobile / tablet (≤768px): the mark joins NORMAL FLOW above the copy (server-rendered order in index.html: .sf-pin-hero-static precedes .sf-hero__inner, so flow stacking is logo-then-headline for free). FIX (mobile QA 2026-07-11): the base rule above (specificity 0,2,0, no media query) overrode pin-drop.css's mobile `align-items: flex-start` (0,1,0 inside its own @media), which re-centered the absolutely- positioned mark vertically — dead on top of the H1 on phones, and the old 21rem reserved-padding hack could not save a CENTERED overlay. Flow layout deletes the overlay problem class-wide: zero overlap at any phone height, zero padding guesswork, zero CLS (no JS dependency). */ @media (max-width: 768px) { .sf-pin-hero .sf-pin-hero-static { position: static; padding-top: var(--sf-space-6); } .sf-hero__inner { padding-top: var(--sf-space-5); } /* the breathing ground-shadow ellipse is composed for the desktop right-column; in flow it would abs-position against the section and float unanchored. The mark's own drop-shadow filter carries mobile. */ .sf-pin-hero .sf-hero-logo__shadow { display: none; } } .sf-hero-logo__shadow { position: absolute; width: clamp(150px, 15vw, 240px); height: 26px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(138, 128, 116,0.55) 0%, rgba(138, 128, 116,0) 70%); transform-origin: center; align-self: flex-end; margin-bottom: 4vh; z-index: -1; } @media (min-width: 769px) { .sf-hero-logo__shadow { position: absolute; right: calc(7vw + 30px); bottom: 10vh; } } /* pre-paint arming (2026-07-11): the inline script in the hero adds this class before first paint; the mark stays invisible until hero-logo.js drops it in. hero-logo.js removes the class if it cannot animate (reduced motion, no gsap). */ .sf-pin-hero--armed .sf-pin-hero-static__mark { opacity: 0; }