/* =========================================================================== THE BEAUTIFUL GAME, visual identity Inspired by NYC Tourism's "Where the World Comes to Play": joyful, nostalgic, vividly hued, editorial. Cream paper, saturated poster colors, and the Echo mark (a soccer ball as a three-step multiple-exposure) as the recurring mark. ========================================================================== */ :root{ --paper:#F4E9CF; /* aged manila, World's-Fair-poster cream */ --paper-2:#E9D9B8; --ink:#16223A; /* civic signage navy */ --ink-soft:#3a4660; /* NYC CIVIC PALETTE, colors lifted from the city's municipal objects, after Arsh Raziuddin's City Hall World Cup campaign. */ --taxi:#FCCC0A; /* taxi-medallion yellow */ --subway:#1A7A3C; /* subway-sign green */ --cup:#1A4FA0; /* Anthora coffee-cup blue */ --ferry:#F26522; /* Staten Island Ferry orange */ --postal:#E4002B; /* "thank you" bag red */ /* legacy aliases → civic palette, so every existing var() re-skins at once */ --red:var(--postal); --blue:var(--cup); --teal:var(--ferry); --gold:var(--taxi); --pink:var(--ferry); --green:var(--subway); --line:#16223A; --shadow: 6px 6px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink); --maxw:1160px; --r:14px; --stack-gap:18px; /* one vertical rhythm between stacked regions (tabs / filter / days) */ /* sticky-layer offsets, recomputed from measured heights by app.js (layoutSticky) */ --stk-tabs:64px; /* under the header */ --stk-bar:120px; /* under header + tab bar (filter bar / category pills) */ --stk-day:168px; /* under header + tabs + filter bar (day headers) */ --stk-nav:168px; /* under header + tabs + category pills (storyline groups) */ /* KIT OF THE DAY: a rotating team-kit palette themes the hero only. Set before paint by the inline script in ; these are the defaults (Brazil Gold). Cream paper, navy ink, and red (live/score/unmissable) stay constant. */ --kit:#FDCC03; /* hero ground */ --kit-lede:#16223A; /* hero body copy */ --kit-accent:#E4002B; /* emphasis inside the lede */ --kit-stat:#1A4EA0; /* big stat numerals */ --kit-statlabel:#16223A; /* stat labels + kit caption */ --kit-cta-bg:#16223A; /* primary CTA fill */ --kit-cta-ink:#F4E9CF; /* primary CTA text */ --kit-cta2:#16223A; /* ghost CTA + shuffle outline/text */ --kit-ball-ink:#16223A; /* hero deco ball panels/stroke */ --kit-ball-face:#FDCC03; /* hero deco ball face (blends into the ground) */ } *{box-sizing:border-box} /* clip the horizontal axis on the ROOT, not : on the root it propagates straight to the viewport and the document stays the scroll container. Putting it on makes WebKit treat as the scroller, so window.scrollY reads 0 and window 'scroll' listeners don't fire (broke back-to-top + spy in Safari). `clip` (not `hidden`) still avoids trapping position:sticky. */ html{scroll-behavior:smooth;overflow-x:clip} body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Libre Franklin",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:17px; line-height:1.6; /* subtle paper grain */ background-image:radial-gradient(rgba(22,34,58,.035) 1px, transparent 1px); background-size:4px 4px; /* horizontal clip lives on (see above) so the document stays the scroll container; keep overflow visible here */ } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} a{color:var(--blue);text-decoration:none} h1,h2,h3{margin:0;line-height:1.02} em{font-style:italic} /* ---- top flag stripe ---- */ .flagstripe{ height:9px; background:linear-gradient(90deg, var(--taxi) 0 20%, var(--subway) 0 40%, var(--cup) 0 60%, var(--ferry) 0 80%, var(--postal) 0 100%); } /* ===================== HEADER ===================== */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(246,238,221,.92); backdrop-filter:blur(8px); border-bottom:3px solid var(--ink); } .header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 22px} .brand{display:flex;align-items:center;gap:11px;color:var(--ink)} .brand-torch{color:var(--red);display:grid;place-items:center;flex:none} /* Echo mark sizing. `color` drives currentColor on the ball panels (primary = ink); --bg-ball-face is the ball face (cream page so white reads as a printed ball). */ .brand-mark{flex:none;display:flex;align-items:center;color:var(--ink)} .brand-mark .echo-mark{width:54px;height:34px;display:block;overflow:visible} .brand-mark .ball-mark{display:none;overflow:visible} /* footer: just the single solid ball, smaller */ .brand-mark--sm .echo-mark{display:none} .brand-mark--sm .ball-mark{display:block;width:22px;height:22px} /* narrow header: the 3-ball echo crowds, so collapse to one solid ball. Scoped to .site-header so it doesn't override the smaller footer ball. */ @media (max-width:460px){ .site-header .brand-mark .echo-mark{display:none} .site-header .brand-mark .ball-mark{display:block;width:30px;height:30px} } .brand-text{display:flex;flex-direction:column;line-height:1} .brand-text strong{font-family:"Anton",sans-serif;letter-spacing:.04em;font-size:20px;font-weight:400} .brand-text em{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);font-style:normal;margin-top:3px} .header-nav{display:flex;align-items:center;gap:22px} .header-nav a{color:var(--ink);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em} .header-nav a:not(.btn-today){padding-bottom:3px;border-bottom:3px solid transparent} /* room for the active underline */ .header-nav a:hover{color:var(--red)} .header-nav a:not(.btn-today).is-active{border-bottom-color:var(--red)} /* "you are here", same signal as the page tabs */ .btn-today{ background:var(--ink);color:var(--paper)!important; padding:9px 15px;border-radius:999px;letter-spacing:.02em; transition:transform .08s ease, box-shadow .08s ease; } .btn-today:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-sm)} .btn-today:active{transform:translate(1px,1px);box-shadow:none} /* ===================== HERO ===================== */ .hero{position:relative;padding:34px 0 0;border-bottom:3px solid var(--ink);overflow:hidden; background:var(--kit);transition:background-color .35s ease} /* Kit-themed Echo ball as the hero decoration (face blends into the kit ground, so only the panels/stroke read). Replaces the old gold radial. */ .hero-deco{position:absolute;z-index:0;right:-46px;top:-44px;width:240px;height:240px; color:var(--kit-ball-ink);opacity:.9;pointer-events:none} .hero-deco svg{width:100%;height:100%;display:block;--bg-ball-face:var(--kit-ball-face);transform-origin:center} /* below ~820px the lede widens to full bleed and would run under the ball, so the deco (a wide-screen flourish) drops out; the kit ground still carries the hero */ @media (max-width:820px){ .hero-deco{display:none} } .hero-inner{position:relative;z-index:1;padding-bottom:26px} .kicker{ display:inline-block;font-weight:800;text-transform:uppercase;letter-spacing:.16em; font-size:13px;color:#fff;background:var(--red);padding:7px 14px;border-radius:40px; box-shadow:var(--shadow-sm);margin:0 0 22px; } .hero-title{ font-family:"Anton",sans-serif;font-weight:400; font-size:clamp(40px,7vw,76px);letter-spacing:.01em; text-transform:uppercase;color:var(--ink);margin:0 0 10px; } .hero-lede{max-width:600px;font-size:18px;color:var(--kit-lede);margin:0 0 20px} .hero-lede strong{color:var(--kit-accent)} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px} .btn{ display:inline-block;font-weight:800;font-size:16px;padding:14px 26px;border-radius:44px; border:3px solid var(--ink);cursor:pointer;transition:transform .08s ease, box-shadow .08s ease; } .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)} .btn:active{transform:translate(2px,2px);box-shadow:none} .btn-primary{background:var(--ink);color:var(--paper)} .btn-ghost{background:var(--paper);color:var(--ink)} .hero-stats{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,54px);padding:0;margin:0 0 22px} .hero-stats li{display:flex;flex-direction:column} .hero-stats b{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(46px,8vw,70px);line-height:.95;color:var(--kit-stat)} .hero-stats span{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;color:var(--kit-statlabel);margin-top:4px} /* hero CTAs + shuffle recolor with the kit (so they stay legible on any kit ground) */ .hero .btn-primary{background:var(--kit-cta-bg);color:var(--kit-cta-ink)} .hero .btn-ghost{background:transparent;color:var(--kit-cta2);border-color:var(--kit-cta2)} /* rides in the CTA row, pushed to the right and bottom-aligned with the CTAs (its bottom edge sits on theirs), so it adds no height to the hero */ .hero-cta .kit-shuffle{margin-left:auto;align-self:flex-end} .kit-shuffle{ display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-weight:800;font-size:11px; text-transform:uppercase;letter-spacing:.06em;padding:7px 13px;border-radius:999px; border:2px solid var(--kit-cta2);background:transparent;color:var(--kit-cta2);cursor:pointer;opacity:.85; transition:transform .1s ease, box-shadow .1s ease, opacity .12s ease; } .kit-shuffle:hover{opacity:1;transform:translate(-1.5px,-1.5px);box-shadow:2.5px 2.5px 0 var(--kit-cta2)} .kit-shuffle:active{transform:translate(1.5px,1.5px);box-shadow:none} .kit-shuffle .ic{font-size:13px;line-height:1} /* mobile: no shuffle button (reload changes the kit instead, handled in the head script) */ @media (max-width:720px){ .kit-shuffle{display:none} } /* scrolling marquee */ .hero-marquee{background:var(--ink);color:var(--paper);overflow:hidden;border-top:3px solid var(--ink)} .marquee-track{display:flex;white-space:nowrap;will-change:transform;animation:marquee 38s linear infinite} .marquee-track > span{padding:13px 0;font-family:"DM Serif Display",serif;font-size:18px;letter-spacing:.01em} .marquee-track > span b{color:var(--gold)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* marquee LIVE state: a clickable in-progress score ticker (reverts to storylines when nothing is live). Band keeps its default ink background + height; the bug is the same .live-pill used on match cards. */ .hero-marquee.is-live:hover .marquee-track{animation-play-state:paused} /* pause so the moving items are clickable */ .mq-seq{display:inline-flex;align-items:center} .mq-live{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:0;background:none; color:var(--paper);font:inherit;line-height:inherit;padding:0 22px;white-space:nowrap} /* line-height:inherit keeps the band the same height as the storyline state */ .mq-live .live-pill{margin:0;font-family:"Libre Franklin",system-ui,-apple-system,Segoe UI,Roboto,sans-serif} /* match the card pill: the body sans, not the inherited marquee serif */ .mq-live:hover .mq-teams{text-decoration:underline;text-underline-offset:4px} .mq-teams{font-family:"DM Serif Display",serif;font-size:18px} .mq-teams .mq-score{color:var(--gold);font-weight:700;padding:0 3px} .mq-status{font-family:"Anton",sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)} /* ===================== SECTIONS ===================== */ .section{padding:72px 0} /* the views section follows the hero/marquee directly (newsroom is hidden when the feed is empty); match its top gap to the hero's bottom gap so the marquee has equal breathing room above and below (52px) */ .section.views{padding-top:49px} .section-head{max-width:680px;margin:0 0 38px} .section-head h2{ font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase; font-size:clamp(30px,5.2vw,52px);letter-spacing:.01em;margin-bottom:14px; } .section-head p{font-size:18px;color:var(--ink-soft);margin:0} .inline-heat{filter:saturate(1.1);font-size:13px;letter-spacing:-2px} /* ---- storylines ---- */ .storylines{background:var(--paper-2);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)} .storyline-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px} .story-card{ background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:24px; box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .1s ease; } .story-card:hover{transform:translate(-3px,-3px)} .story-card .scard-tag{ display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em; color:#fff;padding:5px 11px;border-radius:999px;margin-bottom:14px; } .story-card h3{font-family:"DM Serif Display",serif;font-size:25px;margin-bottom:5px;line-height:1.05} .story-card .scard-who{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 12px} .story-card p{margin:0;font-size:15px;color:var(--ink)} .scard-sources{ margin-top:14px;padding-top:11px;border-top:2px dotted var(--ink-soft); font-size:11px;font-weight:700;color:var(--ink-soft); display:flex;flex-wrap:wrap;align-items:center;gap:8px; } .scard-sources>span{text-transform:uppercase;letter-spacing:.1em;font-size:10px} .scard-sources>span::after{content:"·";margin-left:8px;color:var(--ink-soft)} .scard-sources a{color:var(--cup);font-weight:800;text-decoration:none;border-bottom:1.5px solid var(--cup)} .scard-sources a:hover{background:var(--gold);border-color:var(--ink)} /* ===================== TABBED VIEWS ===================== */ .viewtabs{ display:flex;gap:14px;margin-bottom:var(--stack-gap);border-bottom:3px solid var(--ink); position:sticky;top:var(--stk-tabs);z-index:40; /* full-bleed across the gutter at every width so card shadows/borders scrolling under the bar are masked, not left peeking in the right gutter (mobile + desktop) */ padding:10px 22px 0;margin-inline:-22px; /* match the page's graph-paper texture so the sticky bar isn't a flat solid patch */ background-color:var(--paper);background-image:radial-gradient(rgba(22,34,58,.035) 1px,transparent 1px);background-size:4px 4px; } .vtab{ font-family:"Anton",sans-serif;font-size:clamp(20px,2.8vw,30px);text-transform:uppercase;letter-spacing:.02em; background:none;border:0;border-bottom:5px solid transparent;color:var(--ink-soft);cursor:pointer; padding:2px 4px 10px;margin-bottom:-3px; } .vtab.is-active{color:var(--ink);border-bottom-color:var(--red)} .view-panel.is-hidden{display:none} /* sticky filter bar (schedule): slim toggle + dropdown panel holding the controls */ .filterbar{ position:sticky;top:var(--stk-bar);z-index:35; background-color:var(--paper);background-image:radial-gradient(rgba(22,34,58,.035) 1px,transparent 1px);background-size:4px 4px; display:flex;align-items:center;gap:14px;flex-wrap:wrap; /* full-bleed across the gutter (all widths) so card shadows don't peek beside it */ padding:9px 22px;margin-bottom:18px;margin-inline:-22px;border-bottom:2px dotted var(--ink-soft); } .filterbar-toggle{ display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;font:inherit;font-weight:800; font-size:13.5px;text-transform:uppercase;letter-spacing:.04em; background:var(--ink);color:var(--paper);border:2px solid var(--ink); padding:8px 16px;border-radius:30px;touch-action:manipulation; } .filterbar-toggle:hover,.filterbar-toggle.has-active{background:var(--red);border-color:var(--red)} .filterbar-toggle .fb-state{font-weight:700;font-size:11.5px;text-transform:none;letter-spacing:0;opacity:.9} .fb-caret{font-size:10px;transition:transform .15s ease} .filterbar-toggle[aria-expanded="true"] .fb-caret{transform:rotate(180deg)} .filterbar .result-note{margin:0;min-height:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* in normal flow, full-width on its own line, so opening it pushes the schedule down (below the toggle row) instead of overlaying it or sitting beside the button */ .filter-panel{margin-top:10px;flex-basis:100%;width:100%} .filter-panel[hidden]{display:none} .filter-panel .controls{margin-bottom:0} /* desktop: drop the button and show the controls inline (still sticky); the button + dropdown pattern is mobile-only */ @media (min-width:721px){ /* the sticky bars are full-bled in their base rules (all widths); here we only change the filter bar's desktop LAYOUT: inline controls instead of the button+dropdown, and a 0 bottom-pad so the controls sit flush */ .filterbar{flex-direction:column;align-items:stretch;gap:10px;border-bottom:none; padding:9px 22px 0} .filterbar-toggle{display:none} .filter-panel,.filter-panel[hidden]{display:block;position:static;margin:0;order:-1;flex-basis:auto;width:auto} .filterbar .result-note{order:1;white-space:normal;overflow:visible} } /* themes grid */ /* category jump pills above the grid (color set per pill via --c) */ /* sticky toolbar: country filter + scrollable category pills */ .theme-toolbar{ position:sticky;top:var(--stk-bar);z-index:35; background-color:var(--paper);background-image:radial-gradient(rgba(22,34,58,.035) 1px,transparent 1px);background-size:4px 4px; /* full-bleed across the gutter (all widths) so storyline-card shadows don't peek beside it */ display:flex;align-items:center;gap:12px;padding:10px 22px;margin-block:0 22px;margin-inline:-22px; /* the WHOLE row is the scroller (country dropdown + pills ride together), not just the pills. overflow-x:auto here; children stay flex:none so nothing shrinks and the row scrolls as one unit. 22px inline padding = start + end gutters. */ overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .theme-toolbar::-webkit-scrollbar{display:none} .country-pick{flex:none;display:flex} .country-pick select{ font:inherit;font-weight:700;font-size:13px;color:var(--ink);background:var(--paper); border:2px solid var(--ink);border-radius:30px;padding:7px 14px;cursor:pointer;max-width:46vw; } .theme-nav{ /* just a pill group now; the parent .theme-toolbar owns the horizontal scroll. flex:none so it keeps its natural width and rides inside the toolbar's scroll. */ display:flex;flex-wrap:nowrap;gap:9px;flex:none; } .theme-nav::-webkit-scrollbar{display:none} .theme-nav-pill{ display:inline-flex;align-items:center;gap:7px;flex:none;font-family:inherit;font-weight:800; font-size:13px;text-transform:uppercase;letter-spacing:.04em; color:var(--c);background:transparent;border:2px solid var(--c); padding:7px 15px;border-radius:30px;cursor:pointer;white-space:nowrap; transition:background .12s ease,color .12s ease; } .theme-nav-pill:hover,.theme-nav-pill.is-current{background:var(--c);color:#fff} /* is-current = the section scrolled into view */ .theme-nav-pill span{font-weight:700;font-size:11px;opacity:.6} .theme-nav-pill:hover span,.theme-nav-pill.is-current span{opacity:.85} .theme-group{margin-bottom:34px;scroll-margin-top:var(--stk-nav)} .theme-group-head{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:21px;letter-spacing:.06em;margin:0 0 16px;border-bottom:2px dotted var(--ink-soft);padding-bottom:8px} .theme-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px} .theme-card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)} .theme-card .tcard-tag{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;padding:4px 10px;border-radius:999px;margin-bottom:10px} .theme-card h4{font-family:"DM Serif Display",serif;font-size:21px;line-height:1.08;margin:0 0 3px} .tcard-who{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin:0 0 9px} .tcard-body{font-size:14px;color:var(--ink);margin:0} .theme-card .scard-sources{margin-top:12px} .theme-matches{margin-top:14px;display:flex;flex-direction:column;gap:6px} .tm-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)} .theme-match{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left; background:var(--paper-2);border:2px solid var(--ink);border-radius:9px;padding:7px 10px;cursor:pointer;font:inherit} .theme-match:hover{background:var(--gold)} .tm-teams{font-size:12.5px;font-weight:700} .tm-teams i{color:var(--ink-soft);font-style:normal;font-size:11px;margin:0 2px} .tm-when{font-size:11px;font-weight:800;color:var(--cup);white-space:nowrap} .tm-when.is-live{color:var(--red)} .theme-allmatches{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--ink-soft);font-style:italic} /* match → theme chips */ .match-themes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px;border-top:1px dashed rgba(22,34,58,.22);padding-top:11px} .match-themes>span{flex-basis:100%;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:1px} /* label on its own line; pills wrap beneath */ .mtheme{font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;transition:transform .08s ease, box-shadow .08s ease} .mtheme:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-sm)} .mtheme:active{transform:translate(1px,1px);box-shadow:none} /* cross-link flash highlight */ .flash{animation:flashpulse 1.5s ease} @keyframes flashpulse{0%,100%{box-shadow:var(--shadow-sm)}28%{box-shadow:0 0 0 4px var(--gold)}} /* ===================== CONTROLS ===================== */ .controls{ background:var(--ink);color:var(--paper);border-radius:var(--r);padding:20px 22px; display:flex;flex-wrap:wrap;gap:22px 34px;align-items:flex-start;margin-bottom:18px; } /* one surface, one border: dropped the offset shadow that read as a second outline */ .control-group{display:flex;flex-direction:column;gap:9px} .control-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--gold)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer; background:transparent;color:var(--paper);border:2px solid rgba(246,238,221,.5); padding:7px 14px;border-radius:999px;white-space:nowrap; transition:transform .08s ease, box-shadow .08s ease, border-color .12s ease; } .chip:hover{border-color:var(--paper);transform:translate(-2px,-2px);box-shadow:3px 3px 0 rgba(0,0,0,.35)} .chip:active{transform:translate(1px,1px);box-shadow:none} .chip.is-active{background:var(--gold);color:var(--ink);border-color:var(--gold)} /* selected fills, but keeps border + pointer = still a control */ .control-search{flex:1;min-width:220px} #team-filter,#story-filter{ font-family:inherit;font-weight:700;font-size:14px;padding:8px 14px;border-radius:30px; border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;max-width:100%; } #team-filter:focus,#story-filter:focus{outline:none;border-color:var(--gold)} .result-note{font-weight:700;color:var(--ink-soft);font-size:14px;min-height:20px;margin:0 0 26px} /* ===================== TIMELINE ===================== */ .timeline{display:flex;flex-direction:column;gap:var(--stack-gap)} /* bundled "earlier days", past matches folded behind one bar so today is on top */ .past-toggle{ display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;font:inherit; background:var(--paper-2);border:2px dashed var(--ink-soft);border-radius:var(--r);padding:13px 18px;color:var(--ink-soft); touch-action:manipulation;-webkit-tap-highlight-color:rgba(22,34,58,.15);-webkit-appearance:none;appearance:none; } /* a tap anywhere on the bar registers on the button, never a child span */ .past-toggle > *{pointer-events:none} .past-toggle:hover{border-color:var(--ink);color:var(--ink);border-style:solid} /* open/selected state, solid, inked, filled so it clearly reads as expanded */ .past-wrap:not(.collapsed) .past-toggle{background:var(--ink);border-style:solid;border-color:var(--ink);color:var(--paper)} .past-wrap:not(.collapsed) .past-label{color:var(--paper)} .past-wrap:not(.collapsed) .past-meta{color:var(--gold)} .past-caret{font-size:13px;flex:none;transition:transform .15s ease} .past-wrap:not(.collapsed) .past-caret{transform:rotate(90deg)} .past-label{font-family:"Libre Franklin",system-ui,sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink)} /* eyebrow label, not Anton */ .past-meta{font-size:12.5px;font-weight:700;margin-left:auto} .past-body{margin-top:14px;display:flex;flex-direction:column;gap:14px} .past-wrap.collapsed .past-body{display:none} .day{ border:3px solid var(--ink);border-radius:var(--r);background:var(--paper); overflow:clip;scroll-margin-top:var(--stk-day); /* clip (not hidden) so a sticky .day-head isn't trapped in a scroll container */ } .day.is-today{box-shadow:var(--shadow);border-color:var(--red)} .day-head{ display:flex;align-items:center;gap:16px;scroll-margin-top:var(--stk-day); padding:18px 22px;cursor:pointer;background:var(--paper-2);border-bottom:3px solid var(--ink); touch-action:manipulation;-webkit-tap-highlight-color:rgba(22,34,58,.12); } .day.collapsed .day-head{border-bottom:none} .day-date{display:flex;flex-direction:column;align-items:center;justify-content:center; background:var(--ink);color:var(--paper);border-radius:10px;padding:7px 13px;flex:none;min-width:64px} .day-date .dd{font-family:"Anton",sans-serif;font-size:28px;line-height:.9} .day-date .mo{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em} .day.is-today .day-date{background:var(--red)} /* meta is two rows beside the badge: [phase · TODAY] over [weekday · count · caret] */ .day-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .day-row{display:flex;align-items:center;gap:12px;line-height:1.15} .day-phase{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--red);white-space:nowrap} .day-weekday{font-family:"DM Serif Display",serif;font-size:22px;line-height:1.1} .day-blurb{font-size:14.5px;color:var(--ink-soft);margin-top:2px;max-width:760px} .today-pill{background:var(--red);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase; letter-spacing:.1em;padding:4px 11px;border-radius:30px;flex:none} .day-count{font-size:13px;font-weight:700;color:var(--ink-soft);flex:none;margin-left:auto} .day-toggle{font-family:"Anton",sans-serif;font-size:22px;color:var(--ink);flex:none;transition:transform .15s ease} .day.collapsed .day-toggle{transform:rotate(-90deg)} .day-body{padding:16px 22px 22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px} .day.collapsed .day-body{display:none} /* ---- match card ---- */ .match{ border:2.5px solid var(--ink);border-radius:12px;padding:16px 16px 14px;background:var(--paper); display:flex;flex-direction:column;gap:10px;position:relative;transition:transform .08s ease; scroll-margin-top:var(--stk-day); /* a clicked storyline lands the card below the sticky chrome, not under it */ } .match:hover{transform:translateY(-2px)} .match.heat-5{background:linear-gradient(180deg,#FFF7E6 0,var(--paper) 62%)} /* reduced placeholder card: a knockout slot whose teams aren't decided yet */ .match-tbd{border-style:dashed;border-color:var(--ink-soft);background:transparent;gap:8px} .match-tbd:hover{transform:none} .match-teams--tbd{font-size:16px;color:var(--ink-soft)} .match-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .match-teams{font-weight:800;font-size:18px;line-height:1.25;display:flex;flex-wrap:wrap;align-items:center;gap:6px} .match-teams .vs{color:var(--ink-soft);font-weight:700;font-size:13px;margin:0 2px} .match-teams .team-tbd{color:var(--ink-soft);font-style:italic;font-weight:700;font-size:15px} .flag{font-size:19px;line-height:1} /* word rating badge: top tier red, middle tier gold, bottom tier renders nothing */ .rating{flex:none;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em; padding:4px 10px;border-radius:999px;white-space:nowrap;align-self:flex-start} /* stamp: full-round */ .rating-top{background:var(--red);color:#fff} .rating-mid{background:var(--gold);color:var(--ink)} .match-grp{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--ink-soft);font-weight:700} .tag-grp{background:var(--ink);color:var(--paper);padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} /* group pills, colored, with the full "Group X" written out */ .grp-pill{ display:inline-flex;align-items:center;flex:none; padding:3px 11px;border-radius:999px; font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff; } .grp-pill.lite{color:var(--ink)} /* dark text on taxi yellow */ .grp-A,.grp-G{background:var(--taxi)} .grp-B,.grp-H{background:var(--subway)} .grp-C,.grp-I{background:var(--cup)} .grp-D,.grp-J{background:var(--ferry)} .grp-E,.grp-K{background:var(--postal)} .grp-F,.grp-L{background:var(--ink)} .match-status{font-weight:800} .match-status .score{color:var(--red);font-family:"Anton",sans-serif;font-size:17px;letter-spacing:.02em} .match-status .ko{color:var(--blue)} .match-title{font-family:"DM Serif Display",serif;font-size:19px;line-height:1.12} .match-story{font-size:14px;color:var(--ink);margin:0} .match-venue{font-size:11.5px;color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:5px} .match-venue::before{content:"📍";font-size:11px} /* MatchCard 3-tier layout: eyebrow (metadata) / headline + score anchor / story + storylines */ .match-eyebrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .match-meta{font-family:"Libre Franklin",system-ui,sans-serif;font-size:11.5px;font-weight:600;color:var(--ink-soft)} .match-headline{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .match-headline-text{min-width:0;flex:1} .match-headline .match-teams{margin-bottom:3px} .match-anchor{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1} .match-anchor .match-score{font-family:"Anton",sans-serif;font-size:30px;line-height:.9;color:var(--red);letter-spacing:.01em} .match-anchor .match-clock{font-family:"Libre Franklin",system-ui,sans-serif;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--blue)} .match-anchor.is-live .match-clock{color:var(--red)} .match-anchor.is-live .live-pill{margin:0 0 3px} .mtheme-more{font-size:11px;font-weight:800;color:var(--ink-soft);align-self:center} /* +N overflow count, a fact (not clickable) */ .match-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .mtag{ font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em; padding:3px 9px;border-radius:20px;cursor:pointer;border:2px solid var(--ink);background:var(--paper);color:var(--ink); } .mtag:hover{background:var(--gold)} .match-sources{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:10px;font-weight:700;color:var(--ink-soft)} .match-sources>span{text-transform:uppercase;letter-spacing:.09em;opacity:.8} .match-sources>span::after{content:"·";margin-left:7px} .match-sources a{color:var(--cup);font-weight:800;text-decoration:none;border-bottom:1px solid var(--cup)} .match-sources a:hover{background:var(--gold);border-color:var(--ink)} /* the newsroom, updates feed */ .newsroom .updates-feed{display:flex;flex-direction:column;gap:11px;max-width:760px} .update{ display:flex;gap:14px;align-items:flex-start;background:var(--paper); border:2px solid var(--ink);border-radius:var(--r);padding:13px 16px;box-shadow:var(--shadow-sm); } .update-date{ flex:none;width:48px;text-align:center;background:var(--ink);color:var(--paper); border-radius:9px;padding:6px 0;line-height:1; } .update-date .dd{display:block;font-family:"Anton",sans-serif;font-size:20px} .update-date .mo{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;margin-top:2px;color:var(--gold)} .update-body h3{font-family:"DM Serif Display",serif;font-size:17.5px;margin:0 0 4px;line-height:1.12} .update-body p{margin:0;font-size:14px;color:var(--ink);line-height:1.45} /* one shared row for the storyline link + sources, instead of two stacked rows */ .update-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;margin-top:9px} .update-storyline{ display:inline-flex;align-items:center;cursor:pointer;font:inherit; background:var(--ink);color:var(--paper);border:0;border-radius:20px; font-size:11px;font-weight:800;letter-spacing:.02em;padding:5px 12px; } .update-storyline:hover{background:var(--cup)} .update-cite{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)} .update-cite>span::after{content:"·";margin-left:8px;color:var(--ink-soft)} .update-cite a{color:var(--cup);text-decoration:none;border-bottom:1.5px solid var(--cup)} .update-cite a:hover{background:var(--gold);border-color:var(--ink)} /* live status banner */ .live-banner{ border:2px solid var(--ink);border-radius:var(--r);background:var(--paper-2); padding:11px 16px;margin:0 0 16px;font-size:13.5px;font-weight:700;color:var(--ink-soft); box-shadow:var(--shadow-sm); } .live-banner a{color:var(--blue)} .live-banner.is-live{background:#FFF1E8;border-color:var(--red);color:var(--ink)} .live-banner.is-error{background:#FBE9E6;border-color:var(--red);color:var(--red)} .timeline-loading{font-weight:700;color:var(--ink-soft);padding:18px 2px} /* live-match indicators */ .live-pill{ display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:800; letter-spacing:.06em;padding:3px 9px;border-radius:999px;margin-right:6px;vertical-align:middle; animation:livepulse 1.6s ease-in-out infinite; } @keyframes livepulse{50%{opacity:.45}} .match-status.is-live .ko{color:var(--red)} .match.is-live-match{border-color:var(--red);box-shadow:5px 5px 0 var(--red)} /* knockout day styling */ .day.knockout .day-body{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .day.final .day-head{background:var(--ink);color:var(--paper)} .day.final .day-phase{color:var(--gold)} .day.final .day-blurb,.day.final .day-count{color:rgba(246,238,221,.85)} .day.final .day-toggle{color:var(--paper)} .match.is-final-match{border-width:3px;background:linear-gradient(120deg,#fff4d6,var(--paper))} /* empty state */ .empty{border:3px dashed var(--ink);border-radius:var(--r);padding:40px;text-align:center;color:var(--ink-soft);font-weight:700} /* ===================== FOOTER ===================== */ .site-footer{background:var(--ink);color:var(--paper);border-top:3px solid var(--ink);padding:42px 0} .footer-inner{display:flex;flex-direction:column;gap:14px} .footer-brand{display:flex;align-items:center;gap:10px} .footer-brand .brand-torch{color:var(--gold)} .footer-brand strong{font-family:"Anton",sans-serif;font-weight:400;letter-spacing:.04em;font-size:20px} .footer-note{font-size:13.5px;color:rgba(246,238,221,.8);max-width:780px;margin:0} .footer-note a{color:var(--gold)} .footer-note strong{color:#fff} /* back to top */ .page-lift{ /* plain `bottom` first as a fallback: some WebKit/Safari versions drop the whole declaration when env() is nested in calc(), which would unpin the fixed button and drop it to the end of the document (invisible). The calc() line wins where it parses; the plain value holds where it doesn't. */ position:fixed;right:20px;bottom:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:50%; background:var(--red);color:#fff;border:3px solid var(--ink);font-size:20px;font-weight:800; cursor:pointer;box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60; } .page-lift.show{opacity:1;pointer-events:auto} .page-lift:hover{background:var(--ink)} /* ===================== RESPONSIVE ===================== */ @media (max-width:720px){ body{font-size:16px} .header-nav a:not(.btn-today){display:none} .hero{padding-top:26px} .hero-stats{gap:26px} .hero-stats b{font-size:44px} .day-body{grid-template-columns:1fr} .day-blurb{display:none} .section{padding:52px 0} /* day header pins below the tab bar + filter bar (sticky offset from --stk-day). Compact on mobile: phase row over a weekday row; the red date badge marks today, so the TODAY pill is dropped here. */ .day-head{position:sticky;top:var(--stk-day);z-index:30;padding:8px 13px;gap:11px} .day-date{min-width:44px;padding:4px 7px;border-radius:8px} .day-date .dd{font-size:19px} .day-date .mo{font-size:9px} .day-meta{gap:2px} .day-phase{font-size:10px} .day-weekday{font-size:16px} .today-pill{display:none} /* decluttered on mobile, the red date badge already marks today */ .day-count{font-size:11.5px} .day-toggle{font-size:18px} /* stack the filter groups full-width so a long-named dropdown can't run off-screen */ .controls{flex-direction:column;align-items:stretch;gap:18px} .control-group{min-width:0} #story-filter,#team-filter{width:100%} /* lift the back-to-top button clear of the iOS Safari bottom toolbar / home indicator */ .page-lift{bottom:34px;bottom:calc(34px + env(safe-area-inset-bottom,0px));right:16px;width:50px;height:50px} } @media (max-width:420px){ .brand-text em{display:none} .hero-cta .btn{width:100%;text-align:center} }