/* ============================================================ FANATIK Site v2.2 — header.css ============================================================ PRUNE-5 (strip wave): add brand wordmark to homepage header. Mounted as
at open, before Chyron and
. Fixed top-left position. The Chyron language picker tile sits top-right with its own 24px inset — they coexist. Cascade position: loads BEFORE hero.css so hero rules may offset page content for the header if needed. Header is transparent and floats above b-roll plate; logo is the only visible element. Brand-rules guard: - Never stretch, distort, or recolour. Aspect locked via height:auto. - Logo is already lime (#D3FE4C) inside the SVG — no CSS filter applied. - Minimum clear space respected via inset + padding around the link. ============================================================ */ .site-header { position: fixed; top: env(safe-area-inset-top, 0); left: 0; /* Float on top of b-roll plate but below Chyron drawer (chyron uses ~z 60+) and below any modal/drawer overlays. */ z-index: 50; /* Transparent so b-roll plate / page background shows through */ background: transparent; /* Inset matches Chyron tile (24px desktop, 16px mobile) so the two floating corners feel balanced. Padding handles the visual gutter while keeping the host
hit-target generous. */ padding: 20px 24px; /* No pointer events on the empty header chrome; the child is interactive. This prevents the header from eating clicks on the b-roll plate behind it (outside the logo area). */ pointer-events: none; /* 2026-05-21 CEO fix: smooth scroll-hide transition. Floating wordmark overlapped the app-tour step nav (01 COUNTDOWN / 02 ROOMS / 03 RANKINGS / 04 FRIENDS) at mobile widths. JS toggles .is-scrolled-past-hero when the app-tour section enters viewport; CSS fades + lifts the header out of the way. */ transition: opacity 240ms ease, transform 240ms ease; } /* Scroll-hide state — applied via IntersectionObserver in inline script that watches #appTourStage. Header reasserts visibility if the user scrolls back up into the hero. */ .site-header.is-scrolled-past-hero { opacity: 0; pointer-events: none; transform: translateY(-12px); } .site-header__brand { display: inline-block; /* Re-enable interaction on the link itself */ pointer-events: auto; /* Focus ring for keyboard users — matches FANATIK lime accent without fighting brand palette. */ border-radius: 2px; outline: none; transition: opacity 120ms ease; } .site-header__brand:focus-visible { outline: 2px solid #D3FE4C; outline-offset: 6px; } .site-header__brand:hover { opacity: 0.92; } .brand-mark { display: block; /* FW2 fix #6 (CDO): logo size reduced. Was a fixed 240px which dominated the chyron at 1280-1440w; now fluid clamp(120, 11vw, 160) so it sits as one item in the corner, not the headline of the page. Mobile breakpoints below stay smaller. */ width: clamp(120px, 11vw, 160px); height: auto; /* Lock aspect; never stretch */ object-fit: contain; /* SVG renders crisp; nudge in case browser anti-aliases oddly */ -webkit-user-drag: none; user-select: none; /* 2026-05-14: BUG-003 — explicit transparent override. tokens.css has a global img background rule with a :not(.svg) exclusion, but the cascade isn't reliably winning here (cached tokens.css OR specificity collision). Lock it explicitly so the lime wordmark never paints a black box over the hero photo. */ background: transparent !important; } /* ===== Mobile (≤ 480px viewport) ===== Logo scales down to ~180px so it doesn't collide with the Chyron tile at 375 × 667. Inset tightens to 16px to match Chyron's mobile inset. */ @media (max-width: 480px) { .site-header { padding: 16px; } .brand-mark { width: 180px; } } /* ===== Very narrow phones (≤ 360px) ===== Edge guard so the wordmark never crosses the Chyron tile's hit-zone. */ @media (max-width: 360px) { .brand-mark { width: 160px; } } /* ===== Reduced motion ===== Disable opacity/transform transitions under user preference. Hover flicker on .site-header__brand AND scroll-hide on .site-header itself both respect the preference. State change still happens instantly (no animation), preserving the no-overlap behavior. */ @media (prefers-reduced-motion: reduce) { .site-header, .site-header__brand { transition: none; } } /* ===== Print ===== Hide the floating header on print; the page content is the focus. */ @media print { .site-header { display: none; } }