/* ============================================================================ 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 (2026-09-28 rip-out): the old native heroes were REMOVED from the markup entirely — there is nothing to hide and nothing to fall back to. Each page mounts exactly one hero: the signature hero. If a feed yields nothing, the engine mounts an honest branded plate (useFallback) — never a blank hole, never an invented title. pv-hero-on marks a committed signature mount (it hides the .pv-hero-skeleton and enables the theme). 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; } /* (2026-09-28 rip-out: the old native heroes were removed from the markup — there is nothing left to hide. The display:none rules that used to step them aside, and the pv-sig-pending anti-flash veil, are deleted with the markup.) */ /* Signature hero entrance: a short fade so it blooms in instead of popping. */ @keyframes pvHeroIn{ from{ opacity:0; } to{ opacity:1; } } .pv-hero{ animation:pvHeroIn .5s ease both; } @media (prefers-reduced-motion: reduce){ .pv-hero{ animation:none; } } /* ---------- head-to-head matchup (sports): both team logos, never one ------- */ .pv-hero-matchup{ display:none; position:absolute; z-index:20; pointer-events:none; left:0; right:0; top:0; align-items:center; justify-content:center; gap:clamp(20px,5vw,46px); } .pv-hero-stage.pv-hero-matchup-on .pv-hero-matchup{ display:flex; } .pv-hero[data-composition="mobile-blend"] .pv-hero-matchup{ top:4%; bottom:38%; } .pv-hero[data-composition="laptop-blend"] .pv-hero-matchup{ top:6%; bottom:42%; } .pv-hero-matchup::before{ content:""; position:absolute; inset:-14% -22%; pointer-events:none; background:radial-gradient(50% 50% at 50% 55%, rgba(248,244,235,.10), rgba(248,244,235,0) 70%); } .pv-hero-matchup img{ position:relative; width:clamp(104px,30vw,150px); height:auto; aspect-ratio:1/1; object-fit:contain; filter:drop-shadow(0 18px 44px rgba(0,0,0,.62)); animation:pv-hero-float 7s ease-in-out infinite alternate; } .pv-hero[data-composition="laptop-blend"] .pv-hero-matchup img{ width:clamp(150px,15vw,212px); } .pv-hero-matchup img:last-child{ animation-delay:-3.5s; } @keyframes pv-hero-float{ from{ transform:translateY(-7px); } to{ transform:translateY(7px); } } .pv-hero-vs{ align-self:center; font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif; font-style:italic; font-weight:600; font-size:clamp(20px,5vw,34px); letter-spacing:.18em; text-indent:.18em; color:rgba(248,244,235,.52); text-shadow:0 2px 18px rgba(0,0,0,.65); white-space:nowrap; } /* ---------- 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); } } /* ========================================================================== MOBILE SIGNATURE ENTRANCE (2026-09-27) James: on phones the signature moment — the title pop + the wave of light — never read. Two defects: the title's pop fired INSIDE the hero's own fade-in (masked), and the wave was buried under the scrim at soft-light (invisible). Now the entrance is choreographed: the hero blooms, THEN the title pops, THEN a dedicated wave sweeps across — all inside the phone screen, all on the 390px composition. Laptop composition is untouched. The JS adds .pv-hero-enter at mount and removes it after the sequence (~2.7s); the infinite beam loop resumes underneath afterwards. ========================================================================== */ @keyframes pvCopyPopM{ 0%{ opacity:0; transform:translateY(38px); } 55%{ opacity:1; transform:translateY(-5px); } 78%{ transform:translateY(2px); } 100%{ opacity:1; transform:translateY(0); } } @keyframes pvBeamEnterM{ 0%{ transform:translateX(-160%) skewX(-14deg); } 100%{ transform:translateX(340%) skewX(-14deg); } } .pv-hero[data-composition="mobile-blend"].pv-hero-enter .pv-hero-copy{ animation:pvCopyPopM .9s cubic-bezier(.22,.8,.24,1) .55s both; } .pv-hero[data-composition="mobile-blend"].pv-hero-enter .pv-hero-beam{ animation:pvBeamEnterM 1.7s ease-in-out .7s both; } /* The wave must read on phones: it rides ABOVE the scrim (it was buried under it at z-15) with a brighter core — still soft-light, so it glows behind the title instead of washing it out. Copy stays on top at z-30. */ .pv-hero[data-composition="mobile-blend"] .pv-hero-beam{ z-index:18; background:linear-gradient(100deg,rgba(255,250,238,0) 0%,rgba(255,250,238,.42) 42%,rgba(255,252,244,.78) 50%,rgba(255,250,238,.42) 58%,rgba(255,250,238,0) 100%); } /* 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-enter .pv-hero-copy, .pv-hero-enter .pv-hero-beam{ animation:none !important; } .pv-hero{ 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-hero-matchup img{ animation:none !important; } .pv-rv{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ========================================================================== SPORTS TOP-BLEED (staging demo 2026-09-27, James's call): the hero runs under the sticky header to the very top of the viewport; the "Sports HQ" title block is a transparent overlay layered INTO the hero art — no light box, no visual break. Scoped to the sports instance only; every other page is untouched. ========================================================================== */ .pv-hero.pv-sport-topbleed{ margin-top:-68px; } @media (max-width:767px){ .pv-hero.pv-sport-topbleed{ margin-top:-62px; } } /* dark cinematic top scrim — title legibility over any matchup art. Never a white veil: the wash stays deep charcoal throughout. */ .pv-hero-topscrim{ position:absolute; inset:0; z-index:18; pointer-events:none; background:linear-gradient(180deg, rgba(4,5,7,.95) 0%, rgba(4,5,7,.80) 15%, rgba(4,5,7,.42) 30%, rgba(4,5,7,.14) 42%, rgba(4,5,7,0) 56%); } /* the page title, overlaid transparently on the hero art */ .pv-hero .title-hero.pv-title-overlay{ position:absolute; top:0; left:0; right:0; z-index:25; max-width:none; margin:0; padding:88px 24px 0; background:transparent; overflow:hidden; pointer-events:none; } @media (max-width:767px){ .pv-hero .title-hero.pv-title-overlay{ padding:78px 18px 0; } } .pv-hero .title-hero.pv-title-overlay .ghost{ top:66px; left:16px; font-size:clamp(54px,13vw,104px); -webkit-text-stroke:1px rgba(244,242,236,.28); } @media (max-width:767px){ .pv-hero .title-hero.pv-title-overlay .ghost{ top:60px; left:12px; } } .pv-hero .title-hero.pv-title-overlay h1{ font-size:clamp(30px,4.2vw,46px); text-shadow:0 3px 26px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.85); } .pv-hero .title-hero.pv-title-overlay .sub{ color:rgba(237,231,216,.78); text-shadow:0 2px 14px rgba(0,0,0,.8); } .pv-hero .title-hero.pv-title-overlay .fresh{ color:rgba(237,231,216,.6); text-shadow:0 2px 12px rgba(0,0,0,.8); } /* matchup logos drop below the title zone on the top-bleed composition */ .pv-hero.pv-sport-topbleed[data-composition="mobile-blend"] .pv-hero-matchup{ top:40%; bottom:30%; } .pv-hero.pv-sport-topbleed[data-composition="laptop-blend"] .pv-hero-matchup{ top:38%; bottom:30%; } /* ---------- branded skeleton slot (2026-09-28 rip-out) ---------- The old native heroes are gone, so every page renders a branded skeleton in the signature hero's slot from first paint. It shows by DEFAULT (no pending class needed) and hides the moment the signature hero mounts (html.pv-hero-on) — with real feed items OR the honest fallback plate. Never a blank hole, never old-content-first. */ .pv-hero-skeleton{ display:flex; align-items:center; justify-content:center; position:relative; width:100%; background:#0e0f12; overflow:hidden; height:74svh; min-height:480px; max-height:680px; } @media (min-width:601px){ .pv-hero-skeleton{ height:92svh; min-height:640px; max-height:none; } } .pv-hero-skeleton > span{ font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif; font-style:italic; letter-spacing:.28em; text-indent:.28em; font-size:clamp(18px,4.6vw,30px); color:rgba(248,244,235,.34); text-shadow:0 2px 18px rgba(0,0,0,.6); animation:pvSkelPulse 2.2s ease-in-out infinite; } @keyframes pvSkelPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } } @media (prefers-reduced-motion: reduce){ .pv-hero-skeleton > span{ animation:none; opacity:.8; } } html.pv-hero-on .pv-hero-skeleton{ display:none !important; } /* ---------- sports inline league switcher (2026-09-28) ---------- The league pill band is gone (James: "messing up the hero"). League filtering is quiet inline text inside the games-section heading row: no band, no boxes, no outlines, no background. Only leagues with games today (Pacific) are listed; the current league reads as plain text, the others as subtle links. */ .pv-league-inline{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.15em .6em; margin-left:.7em; font-size:.82em; font-weight:400; letter-spacing:.02em; } .pv-league-inline .pv-lg-cur{ color:inherit; opacity:.92; } .pv-league-inline button.pv-lg{ appearance:none; border:0; background:none; padding:0; margin:0; font:inherit; color:inherit; opacity:.55; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(128,128,128,.5); } .pv-league-inline button.pv-lg:hover{ opacity:.9; } .pv-league-inline button.pv-lg:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:2px; } @media (prefers-reduced-motion: reduce){ .pv-league-inline button.pv-lg{ transition:none; } } /* ---------- games quiet page-head (2026-09-28 rip-out) ---------- The old header.hero is gone. The GAMES title + info-only policy copy survive as a quiet page-head: no hero styling, no artwork, no buttons — the signature hero above it is the page's one hero. */ .pv-page-head{ padding:clamp(18px,4vw,34px) clamp(16px,4vw,40px) 0; max-width:1200px; margin:0 auto; } .pv-page-head h1{ font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif; font-size:clamp(30px,6vw,52px); font-weight:400; letter-spacing:.04em; margin:0 0 8px; color:inherit; } .pv-page-head p{ margin:0 0 6px; opacity:.72; font-size:.95em; line-height:1.55; max-width:62ch; }