/* Additions made while porting the design to a production page. Nothing here changes how the design looks at rest: it covers keyboard focus, the skip link, anchor offsets under the sticky nav, and the waitlist form's busy and error states. */ /* skip link, off screen until focused */ .skip{position:absolute;left:12px;top:0;transform:translateY(-120%);z-index:500;background:var(--ink);color:#fff;padding:12px 20px;font-family:var(--disp);font-variation-settings:'wght' 600,'wdth' 100;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase} .skip:focus{transform:translateY(12px);color:#fff} /* a visible keyboard ring: red on white grounds, white on the red and deep grounds */ :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px} .on-red :focus-visible,.g-red :focus-visible,.g-deep :focus-visible,.endflow :focus-visible,.msheet .mcard .btn.red:focus-visible{outline-color:#fff} .btn:focus-visible{outline-offset:2px} /* the terms and news checkboxes are visually replaced by .bx, so the ring goes there */ .lc-cb input:focus-visible+.bx{outline:2px solid #fff;outline-offset:3px} /* in-page anchors land exactly under the sticky nav at every width: the design offset .sec and #stmt by a fixed 76px, which left the top 3px under the 79px desktop nav and missed #top and #finals */ .sec,#stmt,#top,#finals{scroll-margin-top:var(--navh,76px)} /* waitlist form */ .form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #invite .form input[aria-invalid=true]{border-bottom-color:#fff} #inviteForm button[type=submit][aria-busy=true]{opacity:.7;cursor:progress} #inviteForm .thanks:focus{outline:none} /* "How it works" rail at 400px and below: the design's own 400px rule pulls it out by the 16px page gutter, but an earlier !important rule keeps it at 20px, so the rail ran 4px past both screen edges and the page measured wider than the phone. Same card positions and widths, no overflow. */ @media(max-width:400px){#how .hiw-steps{margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important;width:calc(100% + 32px)!important;scroll-padding-left:16px}#how .hiw-steps .hs{scroll-margin-left:16px}} /* Pricing, 900px and below: two cascade collisions in the design export, fixed with the design's own values. 1. The Free / Crew switch carries the class "pro" to slide its pill, so it also picked up the Crew pane's rules (".od>div.pro": grid rows, 22px gaps, full width) and rendered as a 119px black blob. It gets back the switch's own declaration: an inline pill of two buttons, centred, 30px above the plans. 2. A later rule stacked the two plans in separate rows, so the plan switched off still held its 330px of blank space. Both plans share row 2 again, as the design's earlier rule and its switch script intend. */ @media(max-width:900px){ #pricing .od>div.od-seg{display:inline-grid;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:0;grid-row:1;grid-column:1;align-self:start;justify-self:center;width:auto;max-width:none;margin:0 0 30px;padding:3px;border:1px solid var(--line);border-radius:999px} #pricing .od>div.feat,#pricing .od>div.pro:not(.od-seg){grid-row:2} } /* ==== Performance and navigation pass (PORT-NOTES.md, "Performance") ==== */ /* The chrome heights the script keeps in sync (nav + ticker, and the nav alone), set here too so the first paint already uses them and the desktop hero does not change height when the script runs. */ :root{--chrome:114px;--navh:79px} @media(max-width:1199px){:root{--chrome:104px;--navh:69px}} @media(max-width:720px){:root{--chrome:100px;--navh:65px}} /* Hero wordmark. The design ran a one-off chrome sweep from load: on phones the wordmark started grey with a blurred copy of itself glowing over it, and on desktop the blurred band crossed it while the page was still loading. It now paints its settled frame (where that sweep ends) from the first paint. The TM's own looping shimmer is unchanged. */ .hero h1,.hero h1:before{animation:none;background-position:0% 0%} /* Statement. The columns always hold their open size, so nothing reflows when they appear; the script scales the headline and moves the group with transforms (js/app.js). */ #stmt .stmt-cols{max-height:600px;margin-top:clamp(40px,5vw,72px);transition:none} @media(max-width:720px){#stmt .stmt-cols{margin-top:34px;max-height:900px}} #stmt .stmt-h{transform-origin:50% 50%;will-change:transform} #stmtZoom{will-change:transform,opacity} /* Reveals. An element stays visible until the script's first look: on screen it is shown at once, off screen it is armed and keeps the design's reveal (.rv / .rv.in in site.css). */ .rv:not(.rv-armed):not(.in){opacity:1;transform:none;transition:none} .rv.rv-now{transition:none!important} /* ---- the way back to Future of Sports ---- The plain word FSP, linking to /, as the last item in the link row so it reads between "Pricing" and "Reserve your place" (the same entry as the WBL and WPS arenas). Asked for on 25 Sep 2026, replacing the mark that sat beside the lockup earlier that day, and it takes the row's own link styling, so it has no rules of its own. The design's nav was already too wide for its row from 1041 to about 1120px (the CTA ran off the right edge), so the burger still takes over below 1200px instead of 1041px, and below that "Back to Future of Sports" is the drawer's first item. .fsp-mark stays: the drawer entry still draws it. */ .fsp-mark{display:block;flex:none;width:auto;height:15px;fill:currentColor} @media(max-width:1199px){.nav-links,.nav-cta{display:none}.navburger{display:flex}.fsp-mark{height:16px}} .navdrawer a.nd-fsp>span{display:inline-flex;align-items:center;gap:11px} .navdrawer a.nd-fsp .fsp-mark{height:13px} /* Deferred first render. Laying out the whole page on the first render was the page's longest task, and it is spread evenly over every section. The sections below the first screen skip layout until they come near the screen (content-visibility:auto, with sizes close to their real ones so the scrollbar barely moves), and js/app.js lays them out one per idle slot after load and then drops the class, so after the first seconds the page is back to plain layout. A link to an anchor (:target) lays everything out at once, so it lands exactly. */ .cv-defer{content-visibility:auto} html:has(:target) .cv-defer{content-visibility:visible} #names.cv-defer{contain-intrinsic-size:auto 894px} #how.cv-defer{contain-intrinsic-size:auto 863px} #rewards.cv-defer{contain-intrinsic-size:auto 857px} #irl.cv-defer{contain-intrinsic-size:auto 976px} #format.cv-defer{contain-intrinsic-size:auto 1287px} #finals.cv-defer{contain-intrinsic-size:auto 900px} #goldenticket.cv-defer{contain-intrinsic-size:auto 522px} #pricing.cv-defer{contain-intrinsic-size:auto 970px} #invite.cv-defer{contain-intrinsic-size:auto 641px} footer.cv-defer{contain-intrinsic-size:auto 498px} @media(max-width:1100px){ #names.cv-defer{contain-intrinsic-size:auto 670px} #how.cv-defer{contain-intrinsic-size:auto 1000px} #rewards.cv-defer{contain-intrinsic-size:auto 800px} #irl.cv-defer{contain-intrinsic-size:auto 720px} #format.cv-defer{contain-intrinsic-size:auto 1210px} #finals.cv-defer{contain-intrinsic-size:auto 960px} #goldenticket.cv-defer{contain-intrinsic-size:auto 570px} #pricing.cv-defer{contain-intrinsic-size:auto 845px} #invite.cv-defer{contain-intrinsic-size:auto 780px} footer.cv-defer{contain-intrinsic-size:auto 515px} } @media(max-width:720px){ #names.cv-defer{contain-intrinsic-size:auto 862px} #how.cv-defer{contain-intrinsic-size:auto 1024px} #rewards.cv-defer{contain-intrinsic-size:auto 1013px} #irl.cv-defer{contain-intrinsic-size:auto 661px} #format.cv-defer{contain-intrinsic-size:auto 1421px} #finals.cv-defer{contain-intrinsic-size:auto 1015px} #goldenticket.cv-defer{contain-intrinsic-size:auto 638px} #pricing.cv-defer{contain-intrinsic-size:auto 843px} #invite.cv-defer{contain-intrinsic-size:auto 982px} footer.cv-defer{contain-intrinsic-size:auto 505px} } /* Symbol glyphs. The design's arrows and star are not in its font subsets, so the browser searched the system for a font on the first layout, which cost more than laying out a whole section. These faces name the fonts that search found on macOS (Lucida Grande Bold for the arrows, Hiragino Sans W2 for the star), so the glyphs look the same with no search; where those fonts are not installed the browser falls back exactly as before. */ @font-face{font-family:'TLC Arrows';font-style:normal;font-weight:100 900;src:local('LucidaGrande-Bold'),local('Lucida Grande Bold');unicode-range:U+2190,U+2192} @font-face{font-family:'TLC Star';font-style:normal;font-weight:100 900;src:local('HiraginoSans-W2'),local('Hiragino Sans W2');unicode-range:U+2605} :root{--disp:'Archivo','TLC Arrows',sans-serif;--body:'Inter','TLC Star',sans-serif} /* Statement on a scroll timeline (browsers with scroll-driven animations; js/app.js adds .stmt-tl). Progress runs from the stage's top reaching the top of the screen (contain 0%) to its bottom reaching the bottom (contain 100%), the design's own progress. Scale: from .34 (.66 at 720px and below) to 1 by 82%, easing out on a cubic, which is exactly cubic-bezier(1/3,1,2/3,1). Fade: 0 to 1 by 16%, linear. */ @supports (animation-timeline: view()){ #stmt.stmt-tl{view-timeline:--tlc-stmt block} #stmt.stmt-tl .stmt-h{animation:tlc-stmt-scale linear both;animation-timeline:--tlc-stmt;animation-range:contain 0% contain 100%} #stmt.stmt-tl #stmtZoom{animation:tlc-stmt-fade linear both;animation-timeline:--tlc-stmt;animation-range:contain 0% contain 100%} @media(max-width:720px){#stmt.stmt-tl .stmt-h{animation-name:tlc-stmt-scale-m}} } @keyframes tlc-stmt-scale{0%{transform:scale(.34);animation-timing-function:cubic-bezier(.33333,1,.66667,1)}82%,100%{transform:scale(1)}} @keyframes tlc-stmt-scale-m{0%{transform:scale(.66);animation-timing-function:cubic-bezier(.33333,1,.66667,1)}82%,100%{transform:scale(1)}} @keyframes tlc-stmt-fade{0%{opacity:0}16%,100%{opacity:1}} /* ---- phones: the rewards block is one raised card ---- Asked for on 20 Sep 2026: the prize copy, the host and the barrel all sit together on a raised card, so the block reads as one dedicated panel instead of loose rows on the page. The other two arenas use a white card; on The Last Cup's red ground that would fight the page, so the card is the deep red the section already uses further down (--red2 to --red4) with the tier cards' hairline. Nothing here applies above 900px. The barrel inside the card keeps the desktop tumble at every width (asked for the same day): site.css owns its height, fade and type, so this block deliberately leaves the drum alone. */ @media(max-width:900px){ #rewards .lcrw-grid{padding:22px 18px 26px;border-radius:18px;background:linear-gradient(180deg,var(--red2) 0%,var(--red3) 52%,var(--red4) 100%);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 28px -18px rgba(0,0,0,.55),0 44px 62px -42px rgba(0,0,0,.7)} }