/* ============================================================================ Previously — SIGNATURE HERO (shared component) The approved "Your blend" (Parallax Depth + Light Sweep) with the scroll bleed, on EVERY front page, phone AND laptop. James 2026-09-27: "Beautiful". Two compositions, one component: data-composition="mobile-blend" (<=600px) — 74svh, bottom title card data-composition="laptop-blend" (>600px) — 92svh, left-anchored cinema The JS picks the composition from the breakpoint and re-keys it live when the viewport crosses 600px. No page reload needed. THE BLEED: a fixed ambient layer (.pv-hero-ambient) carries the current slide's artwork down the page — heavily blurred, darkened, crossfading per slide, drifting at ~0.26x scroll, dissolving into the dark base through a long gradient mask. Below-fold containers go transparent, cards go glass, divider lines are removed, content reveals gently. One continuous visual field — no boxes, no seams. SAFETY: native heroes are hidden ONLY after a successful mount with real feed items (html.pv-hero-on). If the feed never arrives, the page keeps its native hero untouched. The home trailer is stopped via heroTrailerStop before its hero is hidden, so no background audio survives. Motion: transforms + opacity only (60fps). prefers-reduced-motion: static first frame, no autoplay, instant reveals, no ambient drift. NO carousel arrows, NO dots — a 2px progress hairline only. ========================================================================== */ /* ---------- hero shell ---------- */ .pv-hero{ display:block; position:relative; width:100%; margin:0; padding:0; border:0; background:#0e0f12; overflow:hidden; -webkit-tap-highlight-color:transparent; z-index:1; /* above the fixed ambient */ } /* Full-bleed breakout for mount points inside padded wrappers (culture, games, live, coming-soon). Home and sports mount full-width already. overflow-x:clip on the page keeps 390px honest. */ .pv-hero[data-fullbleed="1"]{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } /* Sideways-scroll guard */ html.pv-hero-on, html.pv-hero-on body{ overflow-x:clip; } /* The fixed ambient paints above the background but below the body's own background — the body must go transparent for the bleed to show through (2026-09-27: home's solid body background was hiding the wash entirely). keeps its dark base so there is never a white flash. */ html.pv-hero-on body{ background-color:transparent !important; } /* Native heroes step aside ONLY when the signature hero actually mounted with real feed data. If the feed never arrives, the native hero stays. */ html.pv-hero-on body[data-pv-page="home"] #view-home > section.hero, html.pv-hero-on body[data-pv-page="sports"] #hero, html.pv-hero-on body[data-pv-page="coming-soon"] .nextup{ display:none !important; } /* Coming Soon: the signature hero leads the page — the native standout title (kicker + "Coming soon." + intro copy) steps aside with it. Stats, calendar, grid, following and badges stay in flow below the hero. */ html.pv-hero-on body[data-pv-page="coming-soon"] section.block.hero > .kicker, html.pv-hero-on body[data-pv-page="coming-soon"] section.block.hero > h1, html.pv-hero-on body[data-pv-page="coming-soon"] section.block.hero > p.sub{ display:none !important; } /* ---------- the blend stage ---------- */ .pv-hero-stage{ position:relative; overflow:hidden; background:#0e0f12; touch-action:pan-y; /* vertical scroll passes through; horizontal is ours */ } .pv-hero[data-composition="mobile-blend"] .pv-hero-stage{ height:74svh; min-height:480px; max-height:680px; } .pv-hero[data-composition="laptop-blend"] .pv-hero-stage{ height:92svh; min-height:640px; } .pv-hero-px{ position:absolute; inset:0; } /* parallax layers: blurred backdrop + sharp foreground */ .pv-hero-bg{ position:absolute; inset:-8%; will-change:transform; filter:blur(26px) brightness(.5) saturate(1.15); } .pv-hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; } .pv-hero-fg{ position:absolute; inset:0; will-change:transform; } .pv-hero-fg img{ width:100%; height:100%; object-fit:cover; display:block; } /* breathe sits on an inner wrapper so parallax translate (outer) and breathe scale (inner) compose without fighting */ .pv-hero-breathe{ position:absolute; inset:0; animation:pv-hero-breathe 9s ease-in-out infinite; will-change:transform; } @keyframes pv-hero-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } } /* crossfade between slides */ .pv-hero-fg, .pv-hero-bg{ transition:opacity .9s ease; } /* light sweep */ .pv-hero-beam{ position:absolute; top:-25%; bottom:-25%; left:0; z-index:15; pointer-events:none; background:linear-gradient(100deg,rgba(255,250,238,0) 0%,rgba(255,250,238,.34) 45%,rgba(255,252,244,.6) 50%,rgba(255,250,238,.34) 55%,rgba(255,250,238,0) 100%); mix-blend-mode:soft-light; will-change:transform; } .pv-hero[data-composition="mobile-blend"] .pv-hero-beam{ width:46%; transform:translateX(-160%) skewX(-14deg); animation:pv-hero-beam-m 7.5s ease-in-out infinite; } @keyframes pv-hero-beam-m{ 0%{ transform:translateX(-160%) skewX(-14deg); } 55%{ transform:translateX(340%) skewX(-14deg); } 100%{ transform:translateX(340%) skewX(-14deg); } } .pv-hero[data-composition="laptop-blend"] .pv-hero-beam{ width:34%; transform:translateX(-180%) skewX(-14deg); animation:pv-hero-beam-l 8.5s ease-in-out infinite; } @keyframes pv-hero-beam-l{ 0%{ transform:translateX(-180%) skewX(-14deg); } 55%{ transform:translateX(420%) skewX(-14deg); } 100%{ transform:translateX(420%) skewX(-14deg); } } /* film grain (data-URI: allowed by every page's img-src data:) */ .pv-hero-grain{ position:absolute; inset:0; z-index:16; pointer-events:none; opacity:.09; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); } .pv-hero-grain.pv-hero-g2{ animation:pv-hero-grainflip 1.1s steps(2) infinite; } @keyframes pv-hero-grainflip{ 0%{opacity:.07} 50%{opacity:.11} 100%{opacity:.07} } /* legibility scrims */ .pv-hero-scrim{ position:absolute; inset:0; z-index:17; pointer-events:none; } .pv-hero[data-composition="mobile-blend"] .pv-hero-scrim{ background:linear-gradient(180deg,rgba(5,6,8,.42) 0%,rgba(5,6,8,0) 26%,rgba(5,6,8,0) 52%,rgba(5,6,8,.62) 82%,rgba(8,9,11,.94) 100%); } .pv-hero[data-composition="laptop-blend"] .pv-hero-scrim{ background: linear-gradient(90deg,rgba(5,6,8,.72) 0%,rgba(5,6,8,.38) 26%,rgba(5,6,8,0) 52%), linear-gradient(180deg,rgba(5,6,8,.40) 0%,rgba(5,6,8,0) 24%,rgba(5,6,8,0) 58%,rgba(8,9,11,.96) 100%); } /* ---------- honest fallback plate ---------- */ .pv-hero-plate{ position:absolute; inset:0; z-index:1; display:none; align-items:center; justify-content:center; text-align:center; padding:0 34px; background:radial-gradient(120% 100% at 20% 0%, #3a1420 0%, #1a0e12 45%, #0c0d10 100%); } .pv-hero-stage.pv-hero-showplate .pv-hero-plate{ display:flex; } .pv-hero-plate::before{ /* soft brand bloom — never directional, never arrows */ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(46% 34% at 50% 38%, rgba(232,50,30,.14) 0%, rgba(232,50,30,0) 70%), radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 60%); } .pv-hero-plate > span{ font-family:Didot,"Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif; font-weight:700; font-size:44px; line-height:1.04; letter-spacing:-.01em; color:rgba(248,244,235,.92); text-shadow:0 4px 30px rgba(0,0,0,.7); position:relative; } .pv-hero-plate .pv-hero-initials{ display:block; font-size:15px; letter-spacing:.34em; font-weight:700; font-family:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#E8321E; margin-bottom:14px; } /* ---------- copy ---------- */ /* Explicit layer order (2026-09-27 hardening): copy, index, hint and the progress hairline sit on their own high layers, always above the bg/fg artwork and scrims — no stacking context may bury them. */ .pv-hero-copy{ position:absolute; z-index:30; pointer-events:none; transition:opacity .45s ease, transform .45s ease; } .pv-hero-copy.pv-hero-swap{ opacity:0; transform:translateY(14px); } .pv-hero[data-composition="mobile-blend"] .pv-hero-copy{ left:0; right:0; bottom:0; padding:0 24px 30px; } .pv-hero[data-composition="laptop-blend"] .pv-hero-copy{ left:clamp(24px,4vw,72px); right:clamp(24px,4vw,72px); bottom:9svh; max-width:760px; } .pv-hero-kicker{ font-size:11px; font-weight:700; letter-spacing:.3em; color:#E8321E; margin-bottom:10px; text-transform:uppercase; } .pv-hero[data-composition="laptop-blend"] .pv-hero-kicker{ font-size:12px; letter-spacing:.34em; margin-bottom:16px; } .pv-hero-title{ font-family:Didot,"Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif; font-weight:700; color:#F8F4EB; line-height:.98; letter-spacing:-.01em; text-shadow:0 4px 30px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.8); } .pv-hero[data-composition="mobile-blend"] .pv-hero-title{ font-size:clamp(42px,11.5vw,58px); margin:0 -4px 10px; } .pv-hero[data-composition="mobile-blend"] .pv-hero-title[data-len="long"]{ font-size:clamp(32px,8.6vw,44px); } .pv-hero[data-composition="laptop-blend"] .pv-hero-title{ font-size:clamp(88px,9.2vw,156px); letter-spacing:-.015em; margin:0 0 18px -6px; text-shadow:0 6px 44px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.8); } .pv-hero[data-composition="laptop-blend"] .pv-hero-title[data-len="long"]{ font-size:clamp(56px,6vw,96px); } .pv-hero-title em{ font-style:italic; font-weight:600; } .pv-hero-meta{ color:rgba(237,231,216,.72); line-height:1.55; } .pv-hero[data-composition="mobile-blend"] .pv-hero-meta{ font-size:13.5px; max-width:300px; } .pv-hero[data-composition="laptop-blend"] .pv-hero-meta{ font-size:16.5px; line-height:1.6; max-width:520px; color:rgba(237,231,216,.62); } .pv-hero-meta b{ color:#F8F4EB; font-weight:600; } /* slide index — whisper-quiet, laptop only (not carousel chrome) */ .pv-hero-index{ display:none; } .pv-hero[data-composition="laptop-blend"] .pv-hero-index{ display:block; position:absolute; z-index:30; right:clamp(24px,4vw,72px); bottom:9svh; text-align:right; pointer-events:none; } .pv-hero-index .pv-hero-n{ font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif; font-size:30px; font-style:italic; color:#F8F4EB; } .pv-hero-index .pv-hero-of{ font-size:12px; letter-spacing:.24em; color:rgba(237,231,216,.34); margin-top:2px; } /* hint — laptop only */ .pv-hero-hint{ display:none; } .pv-hero[data-composition="laptop-blend"] .pv-hero-hint{ display:block; position:absolute; z-index:30; left:50%; transform:translateX(-50%); bottom:26px; font-size:11px; letter-spacing:.26em; color:rgba(237,231,216,.34); pointer-events:none; white-space:nowrap; } /* ---------- 2px progress hairline ---------- */ .pv-hero-progress{ position:absolute; bottom:0; height:2px; background:rgba(248,244,235,.18); z-index:31; overflow:hidden; /* separation shadow so the 2px track reads on bright artwork too */ box-shadow:0 1px 10px rgba(0,0,0,.55), 0 -1px 6px rgba(0,0,0,.35); } .pv-hero[data-composition="mobile-blend"] .pv-hero-progress{ left:24px; right:24px; bottom:14px; border-radius:2px; } .pv-hero[data-composition="laptop-blend"] .pv-hero-progress{ left:0; right:0; } .pv-hero-progress i{ display:block; height:100%; width:0; background:#F8F4EB; } .pv-hero[data-composition="mobile-blend"] .pv-hero-progress, .pv-hero[data-composition="mobile-blend"] .pv-hero-progress i{ border-radius:2px; } /* ========================================================================== THE SCROLL BLEED — hero atmosphere flows down the whole page ========================================================================== */ /* Fixed ambient layer: paints above the background but below the body's own background and all page content (z-index:-1), so no stacking changes are needed anywhere. It is a full-viewport wash: the blurred artwork stays behind the page at every scroll depth — one continuous cinematic field, no hard edge, ever. The JS drifts it at ~0.26x scroll (clamped) for parallax continuation and crossfades it on every slide change. The ::after veil keeps text legible over bright art without ever hiding the bleed. */ .pv-hero-ambient{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } .pv-hero-ambient::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(5,5,8,.34) 0%, rgba(5,5,8,.10) 26%, rgba(5,5,8,.30) 58%, rgba(5,5,8,.62) 100%); } .pv-amb-img{ position:absolute; inset:-20%; filter:blur(70px) brightness(.40) saturate(1.25); opacity:0; transition:opacity 1.8s ease; will-change:opacity,transform; } .pv-amb-img.on{ opacity:1; } .pv-amb-img img{ width:100%; height:100%; object-fit:cover; display:block; } /* ---------- glass, not boxes ---------- Below-fold cards go glass so the ambient shows through — one continuous field, no hard seams. Modals, dropdowns, sheets and toasts keep their opaque surfaces for legibility (they are overlays, not page flow). */ html.pv-hero-on body[data-pv-page="home"] #view-home .brand-band{ background:transparent; border-block:0; } html.pv-hero-on body[data-pv-page="home"] #view-home .spotlight, html.pv-hero-on body[data-pv-page="home"] #view-home .timeline-empty, html.pv-hero-on body[data-pv-page="home"] #view-home .event, html.pv-hero-on body[data-pv-page="home"] #view-home .mini, html.pv-hero-on body[data-pv-page="home"] #view-home .poster-card, html.pv-hero-on body[data-pv-page="home"] #view-home .wide-card, html.pv-hero-on body[data-pv-page="sports"] .gcard, html.pv-hero-on body[data-pv-page="culture"] .mcard, html.pv-hero-on body[data-pv-page="games"] #gameGrid .card, html.pv-hero-on body[data-pv-page="live"] .lv-card, html.pv-hero-on body[data-pv-page="coming-soon"] .fcard, html.pv-hero-on body[data-pv-page="coming-soon"] .badge, html.pv-hero-on body[data-pv-page="coming-soon"] #grid .card{ background:rgba(20,21,24,.42); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); border:1px solid rgba(237,231,216,.12); } /* keep the sports LIVE accent readable over glass */ html.pv-hero-on body[data-pv-page="sports"] .gcard.live{ border-color:#5a2023; } /* ---------- gentle reveals (pages without a native reveal system) ---------- */ .pv-rv{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); } .pv-rv.pv-rv-in{ opacity:1; transform:none; } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .pv-hero-breathe, .pv-hero-beam, .pv-hero-grain.pv-hero-g2{ animation:none !important; } .pv-hero-fg, .pv-hero-bg{ transition:none !important; } .pv-hero-copy{ transition:none !important; } .pv-amb-img{ transition:none !important; } .pv-rv{ opacity:1 !important; transform:none !important; transition:none !important; } }