s once Pts is included -- confirmed live via
mdxRenderStandingsTable()'s (Pos, Team, MP, W, D, L, Pts, GF,
GA, GD, Form). With only 10 tracks defined, grid auto-placement filled
all 10 with the order:0 cells and had nowhere left to put the
order:10 Pts cell, so it wrapped into an implicit new grid row below --
that's the actual "breaking to the next line" bug, and it would have
hit mobile/tablet too even after adding the media wrapper. Fixed by
adding an 11th ~32px track at the end for Pts to land in, matching the
Form column's width. */
@media(max-width:1024px){
/* 2026-09-08 per Corey: found the actual cause of the leftover strip
after PTS (the max-width fix above was real and necessary, but
didn't touch this -- it's a second, separate bug). This grid
template defines 11 column tracks -- one each for Pos, Team, MP, W,
D, L, GF, GA, GD, Pts, and a trailing 32px track sized for Form.
But Form is display:none on mobile (see .form-col rule above), so
it generates no grid item at all, and only 10 real cells ever get
auto-placed into these 11 tracks. CSS Grid doesn't collapse unused
*explicit* tracks just because nothing landed in them -- the 11th
(32px) track is laid out and takes up space regardless, sitting
empty after the last real column (Pts, moved here by order:10
below). That empty reserved track plus its column-gap is exactly
the strip Corey kept seeing after every other fix -- confirmed live
by dropping the track count to 10 and watching Pts's right edge
land exactly on the table's right edge, gap gone. Removing the
trailing track entirely rather than resizing it, since Form never
renders here and never should reserve space. */
.group-table:has(.form-col) thead tr,
.group-table:has(.form-col) tbody tr{
display:grid;
grid-template-columns:22px 1fr 22px 20px 20px 20px 26px 26px 30px 32px;
column-gap:2px;
align-items:center;
}
.group-table:has(.form-col) td.pts,
.group-table:has(.form-col) th:nth-child(7){
order:10;
}
}
/* 2026-09-02 per Corey: drop the qualification-zone color stripe
(border-left, set inline per-row by JS -- e.g. "border-left:4px solid
#2a5cd6") on the Tables page specifically, mobile/tablet only. Needs
!important since an inline style normally beats a stylesheet rule.
Scoped to #tables-page only (not Europe or anywhere else .group-table
is reused) -- he only asked about this one page. */
#tables-page .group-table tbody tr{
border-left:none !important;
}
/* 2026-09-02 per Corey: drop the blue gradient banner behind the "Tables"
heading, back to a plain heading like every non-hub section uses --
matches his reference screenshot (white background, bold navy "Tables"
text, league pills below it, no colored bar). .page-title-bar is
shared across six hub pages (Scores & Fixtures, World Cup, Internationals,
Africa, Europe, Tables) via one class, so this is scoped to
#tables-page only -- the other five keep their blue bar untouched. */
#tables-page .page-title-bar{
background:none; border-bottom:3px solid var(--ink); border-radius:0; padding:0 0 10px;
}
#tables-page .page-title-bar h2{color:var(--navy-text);}
#tables-page .page-title-bar a{color:var(--navy-text);}
#tables-page .page-title-bar a:hover{color:var(--navy-text);}
/* 2026-09-02 per Corey: same treatment as #tables-page above (plain
heading, no blue gradient banner) applied to Scores & Fixtures too --
"remove the blue bar sitting there on the website" / his reference
mockup with a plain white header. Same 6-page-shared .page-title-bar
class, scoped to #scores-page only so the other five hub pages keep
their blue bar untouched. */
#scores-page .page-title-bar{
background:none; border-bottom:3px solid var(--ink); border-radius:0; padding:0 0 10px;
}
#scores-page .page-title-bar h2{color:var(--navy-text);}
#scores-page .page-title-bar a{color:var(--navy-text);}
#scores-page .page-title-bar a:hover{color:var(--navy-text);}
/* ===== pundits ===== */
.pundits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.pundit-card{display:flex; gap:14px; align-items:flex-start;}
.avatar{
width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff;
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex:0 0 auto;
}
.pundit-card .name{font-size:13px; font-weight:700; color:var(--navy-text); margin-bottom:4px;}
.pundit-card h4{font-size:15px; line-height:1.3;}
/* ===== features ===== */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.feature-card h4{font-size:17px; margin-top:10px;}
/* ===== newsletter ===== */
.newsletter{background:var(--navy); padding:32px 0;}
.newsletter-row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.newsletter h3{color:#fff; font-size:20px;}
.newsletter p{color:rgba(255,255,255,0.7); font-size:13px; margin-top:4px;}
.newsletter-form{display:flex; min-width:320px;}
.newsletter-form input{
flex:1; height:44px; border:none; padding:0 14px; font-family:var(--font-sans); font-size:13px;
}
.newsletter-form button{
height:44px; padding:0 20px; background:var(--red); color:#fff; border:none; font-weight:700; font-size:13px; cursor:pointer;
}
/* ===== footer ===== */
footer{background:#0B0C10; color:rgba(255,255,255,0.75); padding:44px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:28px; margin-bottom:32px;}
.footer-col h5{font-size:12px; color:#fff; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px;}
.footer-col a{display:block; font-size:13px; margin-bottom:10px; color:rgba(255,255,255,0.68);}
.footer-col a:hover{color:#fff;}
.footer-brand .logo{color:#fff; margin-bottom:10px;}
.footer-brand p{font-size:13px; color:rgba(255,255,255,0.55); max-width:240px;}
.footer-social{display:flex; gap:12px; margin-top:14px;}
.footer-social a{
width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
display:flex; align-items:center; justify-content:center;
}
.footer-bottom{
display:flex; justify-content:space-between; padding-top:20px; border-top:1px solid rgba(255,255,255,0.15);
font-size:12px; color:rgba(255,255,255,0.5);
}
/* ===== site search (footer) ===== */
.footer-search{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.15);
border-radius:8px;
padding:20px 22px;
margin-bottom:32px;
}
.footer-search h5{font-size:12px; color:#fff; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;}
.footer-search-form{display:flex; gap:10px; position:relative; max-width:560px;}
.footer-search-form input{
flex:1; height:44px; border:1px solid rgba(255,255,255,0.25); border-radius:4px;
background:rgba(255,255,255,0.06); color:#fff; padding:0 14px;
font-family:var(--font-sans); font-size:13px;
}
.footer-search-form input::placeholder{color:rgba(255,255,255,0.45);}
.footer-search-form input:focus{outline:none; border-color:var(--red);}
.footer-search-form button{
height:44px; padding:0 20px; background:var(--red); color:#fff; border:none;
border-radius:4px; font-weight:700; font-size:13px; cursor:pointer; flex-shrink:0;
}
.footer-search-form button:hover{background:#c01523;}
.footer-search-results{
position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border-radius:6px;
box-shadow:0 12px 28px rgba(0,0,0,.35); max-height:360px; overflow-y:auto; z-index:80; display:none;
}
.footer-search-results.open{display:block;}
.search-result-item{
display:block; padding:12px 14px; border-bottom:1px solid var(--border); text-decoration:none;
}
.search-result-item:last-child{border-bottom:none;}
.search-result-item:hover, .search-result-item.active{background:var(--bg-alt);}
.search-result-item strong{display:block; font-size:13px; color:var(--ink); margin-bottom:2px; font-weight:700;}
.search-result-item span{display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.search-no-results{padding:14px; font-size:13px; color:var(--muted);}
.footer-search-count{font-size:11px; color:rgba(255,255,255,0.45); margin-top:10px;}
@media (max-width:620px){
.footer-search-results{right:0; left:0;}
}
@media (max-width:980px){
.header-row{position:relative;}
.mobile-nav-toggle{display:none;}
/* Mobile: the gradient bar stays visible (no hamburger toggle) with the
top-level tabs in one horizontally scrollable row, same as desktop
just swipeable. A dropdown submenu (Int'l Football / Europe / Africa)
can't anchor as a small popover under its tab here — the row's own
horizontal scroll would clip it — so instead it drops down as a
full-width panel under the whole bar, positioned relative to
.header-navbar rather than the individual .nav-dropdown. */
.header-navbar{position:relative;}
.header-navbar .wrap{
/* No -webkit-overflow-scrolling:touch here on purpose: that legacy
property forces this element onto its own compositing layer on
real iOS WebKit (Safari and Chrome-for-iOS both use WebKit), and
a documented WebKit bug then traps any position:fixed descendant
(like .nav-dropdown-menu below) inside THIS box's clipping
bounds instead of letting it escape to the viewport — even
though getBoundingClientRect/getComputedStyle both report
completely correct fixed-to-viewport coordinates, which is why
it was invisible on real phones/desktop Safari despite every
computed style checking out perfectly in diagnostics. Modern iOS
(13+) has momentum scrolling on overflow:auto by default, so
this property was legacy and unnecessary anyway — removing it
is a strict improvement, not a tradeoff. */
overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.header-navbar .wrap::-webkit-scrollbar{display:none;}
nav.main-nav{flex-wrap:nowrap;}
nav.main-nav > a,
nav.main-nav > .nav-dropdown{margin-right:22px;}
nav.main-nav a{padding:13px 0; white-space:nowrap;}
.nav-dropdown{flex-shrink:0;}
/* A compact popup card anchored directly under the tapped tab —
matching the desktop hover popover's own look (rounded corners,
shadow, stacked list) rather than a full-width bar. It uses
position:fixed with its top/left set by JS (measured off the
tapped link's own on-screen position each time it opens) instead
of position:absolute, because .header-navbar .wrap scrolls
horizontally (overflow-x:auto) and an absolutely positioned
descendant still gets clipped by that ancestor's scroll box —
fixed positioning escapes that clipping entirely while still
landing wherever the JS points it. */
.nav-dropdown-menu{
position:fixed;
flex-direction:column; gap:2px;
max-height:70vh; overflow-y:auto;
z-index:500;
}
.nav-dropdown.mobile-expanded .nav-dropdown-menu{display:flex;}
.nav-dropdown.mobile-expanded .nav-dropdown-arrow{transform:rotate(180deg);}
.header-navbar .nav-dropdown-menu a{padding:10px 14px; white-space:nowrap;}
.top-stories-grid{grid-template-columns:1fr;}
.news-grid, .watch-grid{grid-template-columns:repeat(2,1fr);}
.pundits-grid, .features-grid{grid-template-columns:1fr;}
.stats-block{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:620px){
.news-grid, .watch-grid{grid-template-columns:1fr;}
.story-list-item{grid-template-columns:90px 1fr;}
.footer-grid{grid-template-columns:1fr 1fr;}
.newsletter-row{flex-direction:column; align-items:flex-start;}
.newsletter-form{width:100%;}
}
/* ===== custom MatchDayX logo and hero banner ===== */
.site-logo{
height:40px;
width:auto;
max-width:142px;
object-fit:contain;
display:block;
}
.logo{
display:flex;
align-items:center;
}
.hero-banner{
position:relative;
width:100%;
overflow:hidden;
background:#05070d;
}
.hero-banner img{
width:100%;
height:440px;
object-fit:cover;
object-position:center center;
display:block;
}
.hero-caption{
background:var(--navy);
padding:26px clamp(24px, 6vw, 80px) 32px;
border-bottom:4px solid var(--red);
}
.hero-caption .hero-kicker{
display:inline-block;
background:var(--red);
color:#fff;
font-family:var(--font-mono);
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
padding:7px 11px;
margin-bottom:14px;
}
.hero-caption h1{
color:#fff;
font-family:var(--font-hero);
font-size:clamp(34px, 5vw, 58px);
line-height:1.02;
letter-spacing:.01em;
text-transform:uppercase;
margin:0 0 10px;
max-width:820px;
}
.hero-caption p{
color:rgba(255,255,255,.72);
font-size:clamp(15px, 1.6vw, 18px);
font-weight:500;
max-width:640px;
margin:0;
}
@media (max-width:620px){
.header-row{height:64px;}
.site-logo{height:33px; max-width:112px;}
.hero-banner img{height:260px;}
.hero-caption{padding:20px 22px 26px;}
}
.hero-link{
display:block;
position:relative;
color:inherit;
text-decoration:none;
}
.hero-link:hover img{
transform:scale(1.03);
}
.hero-banner img{
transition:transform .45s ease;
}
/* ===== Boxed Sky-Sports-style hero (desktop) =====
Replaces the old full-bleed dark-overlay hero entirely on desktop,
approved 2026-08-18: a bordered white card sitting inside the page
(not full-bleed), photo on the left, plain-text category + headline +
link on the right — no dark gradient, no text-on-photo. Mobile/tablet
(<=1024px, see the media query further below) intentionally does NOT
use this layout — it keeps the separate non-boxed treatment that was
already live before this change, per explicit instruction to leave
mobile/tablet alone this round. */
/* hero-align-wrap: desktop-only inset so the hero card's left/right edges
land exactly where the News grid tiles and heading underline do (both
sit inside .wrap: 1240px max-width, 24px side padding). Deliberately its
OWN class rather than stacking the .wrap class directly on the hero's
outer div — an earlier version did that and tried to cancel .wrap's
padding on mobile with negative margins, which fought .wrap's own
rule at equal specificity and blew the page 24px wider than the
viewport on phones (real horizontal-scroll bug, fixed 2026-08-18).
This version needs no cancellation: mobile gets plain 100% width by
default, full inset only applies at >=1025px. */
.hero-align-wrap{width:100%;}
@media(min-width:1025px){
.hero-align-wrap{max-width:1240px; margin:0 auto; padding:0 24px;}
}
.mdx-hero-wrap{
width:100%;
background:#fff;
border:2px solid var(--border);
border-radius:4px;
box-shadow:0 1px 3px rgba(0,0,0,.06);
overflow:hidden;
}
.mdx-hero{
display:none;
cursor:pointer;
}
/* min/max-height here, NOT aspect-ratio on the image below — putting
aspect-ratio directly on a flex item that's also being stretched to the
row's cross-axis height creates a circular sizing fight (the image's
aspect-ratio tries to derive its width from a stretched height, which
can end up overriding the 58% flex-basis entirely and blow the image up
to ~100% width, shoving the text column half off the card). Confirmed
live 2026-08-18 — the image was eating the whole row and the headline
was getting clipped by the card's overflow:hidden. Fixing it by giving
the ROW an explicit height range instead, and letting the image just
fill 58%-wide x 100%-tall of whatever that row turns out to be via
object-fit:cover (no aspect-ratio needed on the img at all). */
.mdx-hero.active{display:flex; min-height:280px; max-height:520px;}
.mdx-hero img{
flex:0 0 58%;
width:58%;
height:100%;
object-fit:cover;
object-position:center 25%;
display:block;
}
/* No dark gradient overlay anymore — image and text are separate regions
side by side now, not text-on-photo. */
.mdx-hero::after{display:none;}
.mdx-hero-content{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
padding:28px 32px;
max-width:none;
}
.mdx-hero-kicker{
display:inline-block;
background:none;
color:var(--navy-text);
font-family:var(--font-sans);
font-size:12px;
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
padding:0;
margin-bottom:12px;
}
.mdx-hero-content h1{
color:var(--ink);
/* Oswald (tall/condensed/all-caps) -> Poppins (rounder, geometric),
sentence case instead of uppercase — matches Sky Sports' softer
headline treatment, approved 2026-08-18. */
font-family:'Poppins', var(--font-hero);
font-weight:700;
font-size:clamp(22px,2.4vw,30px);
line-height:1.2;
letter-spacing:0;
margin-bottom:12px;
}
.mdx-hero-standfirst{
color:var(--text);
font-family:var(--font-sans);
font-size:14px;
line-height:1.55;
max-width:none;
margin-bottom:14px;
}
.mdx-hero-cta{
display:inline-block;
background:none;
color:var(--navy-text);
font-family:var(--font-sans);
font-size:13.5px;
font-weight:700;
padding:0;
border-radius:0;
text-transform:none;
letter-spacing:normal;
}
.mdx-hero-cta:hover{text-decoration:underline;}
/* Tablet gap: with only the 16:9 base ratio and the phone-only 4:5
override below, a tablet-width hero (roughly 621-1024px) ends up short
in absolute pixel height compared to true desktop (where 16:9 still
works fine because the box is so wide) or phone (which gets the taller
4:5 box). A short-but-wide box gives the ::after gradient less vertical
room to fully darken before a multi-line headline's upper line(s) reach
into the lighter part of the fade — which is what made hero text read
fine on desktop and phone but noticeably weaker on tablets specifically.
4:3 gives tablets a meaningfully taller box than 16:9 without going as
tall/dominant as the phone treatment.
NOTE: this used to be written as `aspect-ratio:4/3` combined with
`max-height`. On a real Samsung Android tablet that combination
disagreed with a since-removed absolutely-positioned dots overlay this
box used to contain (the hero is now a single static story, no
carousel/dots), so it was rewritten with an explicit height (vw-scaled,
capped by max-height) instead of aspect-ratio — plain height/max-height
is old, universally consistent CSS with no such ambiguity. Left as-is
since it's still the more robust choice regardless of the dots. */
/* Mobile/tablet hero: Sky Sports style — image only, no dark overlay or
text-on-photo, headline/standfirst flow as normal page content below the
image instead. Approved 2026-08-18, replaces the old overlay-on-both
treatment (which used to differ between tablet 75vw-height and phone
4:5-aspect boxes — both are gone now in favour of one consistent
below-the-fold layout at this breakpoint). */
@media(max-width:1024px){
/* .hero-align-wrap needs no reset here — it's plain 100% width by default
(see its base rule above) and only gains the .wrap-style inset inside a
min-width:1025px query, so mobile/tablet never had any padding/margin to
cancel in the first place. (An earlier version stacked the .wrap class
directly on this div and fought it with negative margins on mobile,
which pushed the page 24px wider than the viewport and caused a real
horizontal-scroll bug — fixed 2026-08-18 by giving hero-align-wrap its
own non-conflicting rule instead.) */
/* 2026-09-02 per Corey: hero becomes a tile on mobile/tablet too, instead
of the old plain/borderless/full-bleed treatment -- same white-card
language (border, radius, shadow, margin) as the Live Now cards below
it and the News module tiles. Sits on a grey backdrop (.hero-align-wrap
below) so the white card actually reads as a tile instead of blending
into the page background. overflow:hidden (was visible) so the image's
square corners get clipped by the wrap's own rounded corners. */
/* width:auto (not the base rule's width:100%) is deliberate: the base
rule assumes zero side margin, so width:100% + this margin together
would make the box 28px wider than its container and push the right
edge off the screen -- caught in a mockup before shipping. A block
element with no explicit width already fills what's left after its
own margins, so width:auto (the real fix) avoids that entirely. */
.mdx-hero-wrap{position:static; width:auto; aspect-ratio:auto; height:auto; max-height:none; min-height:0; overflow:hidden; background:var(--bg); border:1px solid var(--border); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.08); margin:14px 14px 12px;}
.mdx-hero{position:static; display:none; height:auto; overflow:visible; cursor:default;}
/* Reset the desktop-only min-height/max-height bound (280px-520px, added
for the boxed flex-row layout) — mobile/tablet stacks image-then-text in
normal document flow, so a fixed height range would clip taller combined
content instead of letting it grow naturally. */
.mdx-hero.active{display:block; min-height:0; max-height:none;}
.mdx-hero img{position:relative; aspect-ratio:16/9; width:100%; height:auto; object-position:center 30%;}
.mdx-hero.active img{transform:none;}
.mdx-hero::after{display:none;}
.mdx-hero-content{position:static; z-index:auto; padding:16px 20px 20px; max-width:none;}
.mdx-hero-kicker{background:none; color:var(--navy-text); padding:0; margin-bottom:8px;}
.mdx-hero-content h1{color:var(--ink); font-size:22px; line-height:1.28;}
.mdx-hero-standfirst{color:var(--text); max-width:none;}
.mdx-hero-cta{display:none;}
/* 2026-09-02 per Corey: grey backdrop behind the hero + Live Now tiles,
matching the News module's "tiles on grey" language. Both live inside
their own separate .hero-align-wrap (one per section, not a shared
parent), so each gets the grey background individually; the :has()
rule below removes the second one's own margin-top so the two grey
zones sit flush against each other with no white seam between them. */
.hero-align-wrap{background:var(--bg-alt);}
.hero-align-wrap:has(.livescores-strip){margin-top:0 !important;}
/* Live Now is now a tile too (was borderless/full-bleed before), same
white-card treatment as the hero above it. */
.livescores-strip{border:1px solid var(--border); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.08); background:var(--bg); padding:14px 18px; margin:0 14px 14px;}
/* Restored 2026-09-02 per Corey, same "score in front of the divider"
language as the Scores & Fixtures page restore above -- but note this
card ALREADY built each team on its own row with the score at the end
(.sc-team-row/.sc-num), so no JS change was needed for that part, only
this layout restructure: league name + a divider + time/status move
from sitting ABOVE the two team rows to sitting BESIDE them, matching
the mockup. Scoped to #livescoresStrip only (not the shared .score-card
base class, which Top 5 Leagues/UCL/WAFCON/etc also use) so nothing
outside the homepage widget is affected. */
#livescoresStrip .ls-track{flex-direction:column; overflow-x:visible; gap:10px;}
#livescoresStrip .score-card{
flex:0 0 auto !important;
width:100%;
display:grid;
/* 84px (not 62px) -- tested against all real cards live: two-digit-hour
times ("10:00 AM", "12:30 PM") measured 61px wide at the original
size and were clipping against a 62px column. 84px + the smaller
11px clock font below clears every case with room to spare. */
grid-template-columns:1fr 84px;
grid-template-rows:auto auto auto;
grid-template-areas:"league time" "team1 time" "team2 time";
column-gap:10px;
row-gap:6px;
align-items:center;
}
#livescoresStrip .score-card .sc-comp{display:contents;}
#livescoresStrip .score-card .sc-comp>span:first-child{grid-area:league; font-size:11px;}
#livescoresStrip .score-card .sc-comp .sc-time{
grid-area:time;
align-self:stretch;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
line-height:1.3;
white-space:nowrap;
border-left:1px solid var(--border);
padding-left:10px;
background:none;
}
#livescoresStrip .score-card .sc-team-row:first-of-type{grid-area:team1; margin:0; padding:0;}
#livescoresStrip .score-card .sc-team-row:last-of-type{grid-area:team2; margin:0; padding:0;}
/* Two-line upcoming-kickoff label (short date over time) -- the JS change
(fix76) splits m.kickoffLabel on ", " into these two spans instead of
one long "Kickoff Sep 3, 2:45 PM" string, which was too wide for this
narrow column and wrapped mid-word. Same-day kickoffs have no comma in
kickoffLabel to begin with (formatKickoff drops the date when it's
today), so those still render as a single plain line automatically. */
.sc-time-date{font-size:10px; font-weight:600; text-transform:uppercase; color:var(--muted); letter-spacing:.02em;}
.sc-time-clock{font-size:11px; font-weight:800; color:var(--navy-text);}
}
/* ===== MatchDayX Pro Upgrades ===== */
.breaking-ticker{
background:#0B0C10;
color:#fff;
border-bottom:3px solid var(--red);
overflow:hidden;
}
.breaking-inner{
display:flex;
align-items:center;
min-height:42px;
}
.breaking-label{
background:var(--red);
color:#fff;
font-family:var(--font-mono);
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
padding:8px 12px;
margin-right:16px;
flex:0 0 auto;
}
.breaking-marquee{
overflow:hidden;
white-space:nowrap;
flex:1;
}
.breaking-marquee span{
display:inline-block;
padding-left:100%;
animation:tickerMove 28s linear infinite;
font-size:14px;
font-weight:700;
}
@keyframes tickerMove{
0%{transform:translateX(0);}
100%{transform:translateX(-100%);}
}
.dark-toggle{
border:1px solid var(--border);
background:#fff;
color:var(--ink);
width:34px;
height:34px;
border-radius:50%;
cursor:pointer;
font-weight:800;
}
body.dark-mode{
--bg:#080B12;
--bg-alt:#111827;
--ink:#F8FAFC;
--text:#D6DAE2;
--muted:#9CA3AF;
--border:#263244;
--border-strong:#3B4759;
}
body.dark-mode .site-header,
body.dark-mode .chip,
body.dark-mode .carousel-btn,
body.dark-mode .score-card,
body.dark-mode .mdx-hero-wrap{
background:#0F172A;
}
body.dark-mode .dark-toggle{
background:#0F172A;
color:#F8FAFC;
border-color:var(--border-strong);
}
body.dark-mode .thumb{
background:
linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
repeating-linear-gradient(45deg, #161E2F 0 10px, #101827 10px 20px);
}
/* The X mark is a colored brand logo (not a monochrome wordmark), so dark
mode no longer force-inverts it to white — it stays red against the
header's own gradient background in both modes. */
body.dark-mode{
/* --navy-text drives every navy/blue TEXT color (both in this stylesheet
and inline style="color:var(--navy-text)" attributes) — turns white in
dark mode. --navy itself is left untouched since it's also used for
backgrounds/borders/gradients (theme banners, buttons, badges) that
should keep their navy color in both themes. A few elements print
navy text on a fixed white pill background (.scoreline-big .goals,
.vs-pill, .live-clock .minute, .pitch-avatar) — those intentionally
keep using var(--navy) directly so the text doesn't vanish. */
--navy-text:#fff;
}
.feature-slider{
position:relative;
margin:26px auto 0;
max-width:1240px;
padding:0 24px;
}
.slider-card{
display:none;
min-height:280px;
border-radius:6px;
overflow:hidden;
position:relative;
background:#0b0c10;
color:#fff;
}
.slider-card.active{display:block;}
.slider-card .slider-bg{
position:absolute;
inset:0;
background:linear-gradient(135deg, #002A91, #DF1A19);
opacity:.95;
}
.slider-card .slider-bg::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.22), transparent 28%);
}
.slider-content{
position:relative;
z-index:2;
max-width:720px;
padding:46px;
}
.slider-content .kicker{
color:#FFD86B;
}
.slider-content h2{
color:#fff;
font-size:clamp(32px, 5vw, 58px);
margin:10px 0;
}
.slider-content p{
color:rgba(255,255,255,.86);
font-size:18px;
}
.slider-dots{
display:flex;
gap:8px;
margin-top:12px;
}
.slider-dots button{
width:10px;
height:10px;
border-radius:50%;
border:none;
background:#C9CCD4;
cursor:pointer;
}
.slider-dots button.active{background:var(--red);}
/* .news-ticker/.ticker-* rules removed 2026-08-18 along with the ticker
markup itself — see the comment where the ticker used to sit in the
homepage markup, just above the Live Now strip. */
/* ===== Live Now strip (real live soccer scores via TheSportsDB) =====
Boxed to match the hero card 2026-08-18, approved via mockup: white card,
border, radius, shadow — sits inside the same .wrap inset as the hero and
News grid at every breakpoint (unlike the hero, which stays full-bleed on
mobile on purpose, this stays boxed on mobile too — it's a small widget,
not a photo). The outer .wrap providing the horizontal inset now lives in
the markup around #livescoresStrip; this element is the card itself. */
.livescores-strip{
background:#fff;
border:1px solid var(--border);
border-radius:4px;
box-shadow:0 1px 3px rgba(0,0,0,.06);
padding:14px 18px;
}
/* Individual score-cards get a light fill so they still read as distinct
cards against the new white box background (previously they sat directly
on the strip's own grey background and needed no fill of their own). */
#livescoresStrip .score-card{
background:var(--bg-alt);
}
/* Stacked 2026-08-18, approved via mockup: "Live Now" badge sits on its own
line above the card row instead of sharing a line with it — was a row
flex (badge + track side by side), now a column flex so the track gets
the box's full width to itself. align-items:flex-start keeps the badge
pill at its natural width instead of stretching to fill the column. */
.livescores-inner{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.ls-head{
flex:0 0 auto;
display:flex;
align-items:center;
gap:7px;
font-family:var(--font-mono);
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.05em;
color:#fff;
background:var(--red);
padding:6px 12px;
border-radius:20px;
box-shadow:0 2px 8px rgba(223,26,25,.35);
}
.ls-head .ls-dot{
width:8px; height:8px; border-radius:50%; background:#fff;
animation:pulse 1.3s infinite;
}
.ls-head.upcoming{
font-family:var(--font-sans);
color:var(--muted);
background:var(--bg-alt);
border:1px solid var(--border);
padding:5px 11px;
box-shadow:none;
}
.ls-head.upcoming .ls-dot{ background:var(--muted); animation:none; }
body.dark-mode .ls-head.upcoming{ background:#0F172A; }
.ls-track{
flex:1 1 auto;
/* align-self:stretch + width:100%/min-width:0 (2026-08-18 bug fix): once
.livescores-inner became a column flex (stacking the Live Now badge
above the card row), its align-items:flex-start meant every child sized
to its own content instead of stretching to the container's width —
.ls-track grew as wide as needed to fit every card with no scrolling,
spilling past the box/page edge instead of clipping+scrolling within
it. align-self overrides the parent's align-items for just this child;
min-width:0 stops it from refusing to shrink below its content's
natural width, which is what actually lets overflow-x:auto do its job. */
align-self:stretch;
width:100%;
min-width:0;
display:flex;
gap:10px;
overflow-x:auto;
/* 2026-09-02 per Corey: scrollbar switched from hidden to visible now
that the desktop cap is up to 10 cards (was 4) -- makes it obvious
there's more to scroll to instead of relying on people to guess/swipe.
padding-bottom gives the scrollbar its own room below the cards so it
doesn't sit flush against them; the strip's existing 14px bottom
padding still leaves enough space around it. Thin + neutral so it
reads as a UI affordance, not a loud browser-default bar. */
padding-bottom:8px;
scrollbar-width:thin;
scrollbar-color:var(--border) transparent;
}
.ls-track::-webkit-scrollbar{height:6px;}
.ls-track::-webkit-scrollbar-track{background:transparent;}
.ls-track::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px;}
.ls-track::-webkit-scrollbar-thumb:hover{background:var(--muted);}
/* Live Now cards reuse .score-card (below) so they match the rest of the
site's match coverage instead of a one-off widget style. */
.ls-empty, .ls-error{
font-family:var(--font-sans);
font-size:12.5px;
color:var(--muted);
padding:4px 0;
}
@media (max-width:640px){
.livescores-strip{padding:10px 12px;}
.livescores-inner{gap:10px;}
.ls-head{font-size:10px;}
}
/* ===== Match detail content (lineups / timeline / stats via proxy) =====
Shared by the live-match-page (Top 5 Leagues + homepage Live Now widget);
the floating modal these were originally built for has been retired in
favor of routing everything to a real page, consistent with the rest of
the site's match coverage (WAFCON, World Cup, etc). */
.mm-empty{color:var(--muted); font-size:13.5px; padding:18px 0; text-align:center;}
.mm-lineup-team{margin-bottom:16px;}
.mm-lineup-team h4{font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:8px;}
.mm-player-row{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px;}
.mm-player-num{font-family:var(--font-mono); font-weight:700; color:var(--navy-text); width:22px; text-align:right; flex-shrink:0;}
.mm-player-pos{font-family:var(--font-mono); font-size:10px; color:var(--muted); width:22px; flex-shrink:0;}
.mm-timeline-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px;}
.mm-timeline-row:last-child{border-bottom:none;}
.mm-timeline-min{font-family:var(--font-mono); font-weight:800; color:var(--navy-text); width:34px; flex-shrink:0;}
.mm-timeline-icon{width:18px; text-align:center; flex-shrink:0;}
.mm-stat-row{margin-bottom:12px;}
.mm-stat-labels{display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:4px;}
.mm-stat-bar{display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--bg-alt);}
.mm-stat-bar span{display:block; height:100%;}
.mm-stat-bar .mm-home{background:var(--navy);}
.mm-stat-bar .mm-away{background:var(--red);}
/* ===== Live Blog tab — auto-generated, reverse-chronological entries built
from the same TheSportsDB timeline/goaldetails data the Timeline tab
already fetches (see buildLiveBlogHTML). Not real journalism — no quotes,
no analysis, just a templated sentence per event, newest first — but it
gives the page a "live blog is updating" feel using data already on hand,
no second API required. */
.lmp-blog-list{display:flex; flex-direction:column; gap:10px;}
.lmp-blog-entry{display:flex; gap:12px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--bg);}
.lmp-blog-entry.is-status{background:var(--navy); border-color:var(--navy);}
.lmp-blog-time{font-family:var(--font-mono); font-weight:800; font-size:13px; color:var(--navy-text); width:38px; flex-shrink:0; text-align:center; padding-top:2px;}
.lmp-blog-entry.is-status .lmp-blog-time{color:#fff;}
.lmp-blog-badge{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; background:var(--bg-alt);}
.lmp-blog-badge.is-goal{background:#e8f7ee;}
.lmp-blog-badge.is-card-yellow{background:#fff6e0;}
.lmp-blog-badge.is-card-red{background:#fde8e8;}
.lmp-blog-badge.is-sub{background:#e8f0fe;}
.lmp-blog-badge.is-status{background:rgba(255,255,255,.15);}
.lmp-blog-body{flex:1; min-width:0;}
.lmp-blog-head{font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px; color:var(--navy-text);}
.lmp-blog-head.is-goal{color:#0a7d3a;}
.lmp-blog-head.is-card-yellow{color:#a5730a;}
.lmp-blog-head.is-card-red{color:var(--red);}
.lmp-blog-head.is-sub{color:#1d4fa3;}
.lmp-blog-entry.is-status .lmp-blog-head{color:#fff;}
.lmp-blog-text{font-size:13.5px; line-height:1.5; color:var(--navy-text);}
.lmp-blog-entry.is-status .lmp-blog-text{color:rgba(255,255,255,.88);}
.ucl-upcoming .score-card{
background:linear-gradient(135deg, #0b2a5b, #1d4fa3);
border-color:transparent;
}
.ucl-upcoming .score-card .sc-comp{
color:rgba(255,255,255,.72);
}
.ucl-upcoming .score-card .sc-team-row,
.ucl-upcoming .score-card .fixture-team{
color:#fff;
}
.ucl-upcoming .score-card .sc-num{
color:#fff;
}
.ucl-upcoming .score-card.clickable:hover{
border-color:#fff;
box-shadow:0 2px 12px rgba(11,42,91,.35);
}
.uel-upcoming .score-card{
background:linear-gradient(135deg, #4a1600, #c2530f);
border-color:transparent;
}
.uel-upcoming .score-card .sc-comp{
color:rgba(255,255,255,.72);
}
.uel-upcoming .score-card .sc-team-row,
.uel-upcoming .score-card .fixture-team{
color:#fff;
}
.uel-upcoming .score-card .sc-num{
color:#fff;
}
.uel-upcoming .score-card.clickable:hover{
border-color:#fff;
box-shadow:0 2px 12px rgba(74,22,0,.35);
}
.uecl-upcoming .score-card{
background:linear-gradient(135deg, #01210f, #0d7a3b);
border-color:transparent;
}
.uecl-upcoming .score-card .sc-comp{
color:rgba(255,255,255,.72);
}
.uecl-upcoming .score-card .sc-team-row,
.uecl-upcoming .score-card .fixture-team{
color:#fff;
}
.uecl-upcoming .score-card .sc-num{
color:#fff;
}
.uecl-upcoming .score-card.clickable:hover{
border-color:#fff;
box-shadow:0 2px 12px rgba(1,33,15,.35);
}
.wafcon-scores .score-card{
background:linear-gradient(135deg, #4a0e6b, #7b2ff7);
border-color:transparent;
}
.wafcon-scores .score-card .sc-comp{
color:rgba(255,255,255,.72);
}
.wafcon-scores .score-card .sc-team-row,
.wafcon-scores .score-card .fixture-team{
color:#fff;
}
.wafcon-scores .score-card .sc-num{
color:#fff;
}
.wafcon-scores .score-card.clickable:hover{
border-color:#fff;
box-shadow:0 2px 12px rgba(74,14,107,.35);
}
/* Official UEFA Nations League palette (sampled from the app's own dark
fixture-card UI) rather than the purple/blue gradient treatment used for
the Top 5 Leagues/UCL/UEL/UECL — flat dark-navy card, subtle slate
border, cyan accent on hover/interaction to match the League's own
branding. */
.unl-scores .score-card{
background:#263145;
border-color:#3c4658;
}
.unl-scores .score-card .sc-comp{
color:#9398a2;
}
.unl-scores .score-card .sc-team-row,
.unl-scores .score-card .fixture-team{
color:#fff;
}
.unl-scores .score-card .sc-num{
color:#fff;
}
.unl-scores .score-card.clickable:hover{
border-color:#2cbcf8;
box-shadow:0 2px 12px rgba(44,188,248,.35);
}
.pl-scores .score-card{
background:linear-gradient(135deg, #3d195b, #6f2da8);
border-color:transparent;
}
.pl-scores .score-card .sc-comp{
color:rgba(255,255,255,.72);
}
.pl-scores .score-card .sc-team-row,
.pl-scores .score-card .fixture-team{
color:#fff;
}
.pl-scores .score-card .sc-num{
color:#fff;
}
.pl-scores .score-card.clickable:hover{
border-color:#fff;
box-shadow:0 2px 12px rgba(61,25,91,.35);
}
.laliga-scores .score-card{
background:linear-gradient(135deg, #b32a20, #ff4b44);
border-color:transparent;
}
.laliga-scores .score-card .sc-comp{
color:rgba(255,255,255,.72);
}
.laliga-scores .score-card .sc-team-row,
.laliga-scores .score-card .fixture-team{
color:#fff;
}
.laliga-scores .score-card .sc-num{
color:#fff;
}
.laliga-scores .score-card.clickable:hover{
border-color:#fff;
box-shadow:0 2px 12px rgba(179,42,32,.35);
}
.seriea-scores .score-card{
background:linear-gradient(135deg, #0373ff, #2de2ff);
border-color:transparent;
}
.seriea-scores .score-card .sc-comp{
color:rgba(255,255,255,.8);
}
.seriea-scores .score-card .sc-team-row,
.seriea-scores .score-card .fixture-team{
color:#fff;
}
.seriea-scores .score-card .sc-num{
color:#fff;
}
.seriea-scores .score-card.clickable:hover{
border-color:#fff;
box-shadow:0 2px 12px rgba(3,115,255,.35);
}
.bundesliga-scores .score-card{
background:linear-gradient(135deg, #8a030c, #d20515);
border-color:transparent;
}
.bundesliga-scores .score-card .sc-comp{
color:rgba(255,255,255,.72);
}
.bundesliga-scores .score-card .sc-team-row,
.bundesliga-scores .score-card .fixture-team{
color:#fff;
}
.bundesliga-scores .score-card .sc-num{
color:#fff;
}
.bundesliga-scores .score-card.clickable:hover{
border-color:#fff;
box-shadow:0 2px 12px rgba(138,3,12,.35);
}
.ligue1-scores .score-card{
background:linear-gradient(135deg, #12233f, #1e3d6b);
border-color:transparent;
}
.ligue1-scores .score-card .sc-comp{
color:rgba(255,255,255,.72);
}
.ligue1-scores .score-card .sc-team-row,
.ligue1-scores .score-card .fixture-team{
color:#fff;
}
.ligue1-scores .score-card .sc-num{
color:#fff;
}
.ligue1-scores .score-card.clickable:hover{
border-color:#fff;
box-shadow:0 2px 12px rgba(18,35,63,.35);
}
.ucl-theme-banner{
background:linear-gradient(120deg, #04041e, #0b1f5e 45%, #1d4fa3 85%, #3f7ee0);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.ucl-theme-banner .ucl-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.75); margin-bottom:4px;
}
.ucl-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.ucl-theme-banner .ucl-theme-logo{
height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
.ucl-theme-banner{padding:20px 20px;}
.ucl-theme-banner h2{font-size:22px;}
.ucl-theme-banner .ucl-theme-logo{height:48px;}
}
.pl-theme-banner{
background:linear-gradient(120deg, #360d3a, #3d195b 45%, #6f2da8 80%, #963cff);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.pl-theme-banner .pl-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#e90052; margin-bottom:4px;
}
.pl-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.pl-theme-banner .pl-theme-logo{
height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
.pl-theme-banner{padding:20px 20px;}
.pl-theme-banner h2{font-size:22px;}
.pl-theme-banner .pl-theme-logo{height:48px;}
}
.laliga-theme-banner{
background:linear-gradient(120deg, #5a0f0d, #b32a20 45%, #ff4b44 85%, #ff7a5c);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.laliga-theme-banner .laliga-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#ffd6ac; margin-bottom:4px;
}
.laliga-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.laliga-theme-banner .laliga-theme-logo{
/* 2026-09-06: laliga-logo.png is a colored (red/orange) source file, unlike
ligue1-logo-transparent.png / the PL "no-text-white" file which are
already pre-made white assets -- so on the red gradient banner it just
blended in and looked barely visible (confirmed via canvas pixel
sampling: this file averages RGB 255,75,68, not white). Same fix
already used for serie-a.png (also a colored source file) below --
force it white on render instead of needing a separate white asset. */
height:64px; width:auto; flex-shrink:0; filter:brightness(0) invert(1);
}
@media(max-width:640px){
.laliga-theme-banner .laliga-theme-logo{height:48px;}
}
.seriea-theme-banner{
background:linear-gradient(120deg, #1a1659, #0373ff 45%, #2de2ff 85%, #7eefff);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.seriea-theme-banner .seriea-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#d6f7ff; margin-bottom:4px;
}
.seriea-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.seriea-theme-banner .seriea-theme-logo{
height:64px; width:auto; flex-shrink:0; filter:brightness(0) invert(1);
}
@media(max-width:640px){
.seriea-theme-banner .seriea-theme-logo{height:48px;}
}
.bundesliga-theme-banner{
background:linear-gradient(120deg, #3a0104, #8a030c 45%, #d20515 85%, #ff4a52);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.bundesliga-theme-banner .bundesliga-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#ffd0d3; margin-bottom:4px;
}
.bundesliga-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.bundesliga-theme-banner .bundesliga-theme-logo{
height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
.bundesliga-theme-banner .bundesliga-theme-logo{height:48px;}
}
.ligue1-theme-banner{
background:linear-gradient(120deg, #060e1c, #12233f 45%, #1e3d6b 85%, #3868ad);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.ligue1-theme-banner .ligue1-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#ffce45; margin-bottom:4px;
}
.ligue1-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.ligue1-theme-banner .ligue1-theme-logo{
height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
.laliga-theme-banner, .seriea-theme-banner, .bundesliga-theme-banner, .ligue1-theme-banner{padding:20px 20px;}
.laliga-theme-banner h2, .seriea-theme-banner h2, .bundesliga-theme-banner h2, .ligue1-theme-banner h2{font-size:22px;}
.ligue1-theme-banner .ligue1-theme-logo{height:48px;}
}
.unl-theme-banner{
background:linear-gradient(120deg, #0a1a3d, #0e3a8f 45%, #1f6fe0 85%, #4fa6ff);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.unl-theme-banner .unl-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#bcd9ff; margin-bottom:4px;
}
.unl-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
@media(max-width:640px){
.unl-theme-banner{padding:20px 20px;}
.unl-theme-banner h2{font-size:22px;}
}
.uel-theme-banner{
background:linear-gradient(120deg, #2e0e00, #a6420a 45%, #ff6a00 85%, #ffab5c);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.uel-theme-banner .uel-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#ffe0c2; margin-bottom:4px;
}
.uel-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.uel-theme-banner .uel-theme-logo{
height:64px; width:auto; flex-shrink:0;
}
.uecl-theme-banner{
background:linear-gradient(120deg, #01210f, #0a5c2e 45%, #00c853 85%, #4ee88a);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.uecl-theme-banner .uecl-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#c8ffdd; margin-bottom:4px;
}
.uecl-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.uecl-theme-banner .uecl-theme-logo{
height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
.uel-theme-banner, .uecl-theme-banner{padding:20px 20px;}
.uel-theme-banner h2, .uecl-theme-banner h2{font-size:22px;}
.uel-theme-banner .uel-theme-logo, .uecl-theme-banner .uecl-theme-logo{height:48px;}
}
.wafcon-theme-banner{
background:linear-gradient(120deg, #23073a, #4a0e6b 45%, #7b2ff7 85%, #b98cff);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.wafcon-theme-banner .wafcon-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#e9d6ff; margin-bottom:4px;
}
.wafcon-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.wafcon-theme-banner .wafcon-theme-logo{
height:64px; width:auto; flex-shrink:0;
}
.afcon-theme-banner{
background:linear-gradient(120deg, #0b2e18, #16803c 40%, #e6b800 75%, #c81d1d);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.afcon-theme-banner .afcon-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#ffe9a8; margin-bottom:4px;
}
.afcon-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.afcon-theme-banner .afcon-theme-logo{
height:64px; width:auto; flex-shrink:0;
}
.cafcl-theme-banner{
background:linear-gradient(120deg, #04120c, #0b3d2e 45%, #157a5c 75%, #d4af37);
border-radius:10px;
padding:26px 28px;
margin-bottom:20px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.cafcl-theme-banner .cafcl-theme-kicker{
display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em; color:#ffe9b0; margin-bottom:4px;
}
.cafcl-theme-banner h2{
font-size:28px; color:#fff; margin:0;
}
.cafcl-theme-banner .cafcl-theme-logo{
height:64px; width:auto; flex-shrink:0;
}
@media(max-width:640px){
.wafcon-theme-banner, .afcon-theme-banner, .cafcl-theme-banner{padding:20px 20px;}
.wafcon-theme-banner h2, .afcon-theme-banner h2, .cafcl-theme-banner h2{font-size:22px;}
.wafcon-theme-banner .wafcon-theme-logo, .afcon-theme-banner .afcon-theme-logo, .cafcl-theme-banner .cafcl-theme-logo{height:48px;}
}
.fixture-team{
display:flex;
align-items:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:0;
max-width:100%;
}
.fixture-team img{flex-shrink:0;}
.fixture-team .fixture-team-name{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
min-width:0;
}
.live-widget{
background:var(--bg-alt);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
padding:30px 0;
}
.widget-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
.widget-card{
background:var(--bg);
border:1px solid var(--border);
border-radius:6px;
padding:18px;
}
.widget-card h3{
font-size:18px;
margin-bottom:12px;
}
.mini-standings{
width:100%;
border-collapse:collapse;
font-size:13px;
}
.mini-standings th,
.mini-standings td{
padding:9px 6px;
border-bottom:1px solid var(--border);
text-align:left;
}
.mini-standings th:not(:first-child),
.mini-standings td:not(:first-child){
text-align:center;
font-family:var(--font-mono);
}
.match-list li{
display:flex;
justify-content:space-between;
gap:12px;
border-bottom:1px solid var(--border);
padding:10px 0;
font-size:14px;
}
.match-list strong{color:var(--ink);}
.youtube-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.video-embed{
position:relative;
aspect-ratio:16/9;
background:#000;
border-radius:4px;
overflow:hidden;
}
.video-embed iframe{
width:100%;
height:100%;
border:0;
}
.social-linkedin{background:#0A66C2;}
.social-tiktok{background:#000;}
.social-facebook{background:#1877F2;}
.article-page{
display:none;
padding:42px 0;
}
.article-card{
max-width:820px;
margin:0 auto;
padding:0 24px;
}
.article-card h1{
font-size:clamp(36px,5vw,58px);
margin:10px 0 16px;
}
.article-card p{
font-size:18px;
color:var(--text);
margin:0 0 16px;
}
.category-strip{
max-width:1240px;
margin:0 auto;
padding:22px 24px 0;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}
.category-card{
border:1px solid var(--border);
background:var(--bg);
padding:18px;
border-radius:4px;
transition:transform .2s ease;
}
.category-card:hover{
transform:translateY(-4px);
}
.category-card h4{
font-size:16px;
margin-bottom:6px;
}
.category-card p{
color:var(--muted);
font-size:13px;
}
@media (max-width:860px){
.widget-grid,
.youtube-grid,
.category-strip{
grid-template-columns:1fr;
}
.slider-content{padding:30px;}
}
/* ===== World Cup 2026 Bracket Update ===== */
.bracket-update{
background:linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
padding:44px 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.bracket-header{
display:flex;
justify-content:space-between;
gap:20px;
align-items:flex-end;
margin-bottom:20px;
}
.bracket-header h2{
font-size:32px;
}
.bracket-note{
color:var(--muted);
font-size:14px;
max-width:520px;
}
.bracket-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:18px;
align-items:start;
}
.bracket-round{
background:var(--bg);
border:1px solid var(--border);
border-radius:6px;
padding:14px;
box-shadow:none;
}
.bracket-round h3{
font-size:14px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--navy-text);
border-bottom:2px solid var(--ink);
padding-bottom:8px;
margin-bottom:12px;
}
.bracket-match{
border:1px solid var(--border);
border-radius:4px;
overflow:hidden;
margin-bottom:12px;
background:var(--bg-alt);
}
.match-meta{
display:flex;
justify-content:space-between;
gap:8px;
padding:8px 10px;
font-size:11px;
color:var(--muted);
font-family:var(--font-mono);
text-transform:uppercase;
border-bottom:1px solid var(--border);
}
.match-status{
color:var(--red);
font-weight:800;
}
.team-line{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
padding:9px 10px;
font-size:14px;
font-weight:700;
}
.team-line.winner{
background:rgba(184,134,11,.12);
color:var(--ink);
}
.team-line .score{
font-family:var(--font-mono);
font-weight:800;
}
.team-line.pending{
color:var(--muted);
font-style:italic;
}
.report-card{
margin-top:28px;
display:grid;
grid-template-columns:1fr 1.15fr;
gap:24px;
align-items:stretch;
}
.report-score{
background:linear-gradient(135deg, var(--navy), var(--navy-2));
color:#fff;
border-radius:6px;
padding:26px;
display:flex;
flex-direction:column;
justify-content:center;
min-height:260px;
}
.report-score .kicker{
color:#FFD86B;
}
.report-score h3{
color:#fff;
font-size:42px;
margin:10px 0;
}
.scoreline-big{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-top:14px;
font-size:22px;
font-weight:800;
}
.scoreline-big span{
flex:1;
}
.scoreline-big .goals{
flex:0 0 auto;
background:#fff;
color:var(--navy);
border-radius:999px;
padding:10px 18px;
font-family:var(--font-mono);
}
.report-copy{
background:var(--bg);
border:1px solid var(--border);
border-radius:6px;
padding:26px;
}
.report-copy h3{
font-size:28px;
margin-bottom:12px;
}
.report-copy p{
color:var(--text);
font-size:16px;
margin-bottom:12px;
}
.report-copy .standfirst{
font-weight:800;
color:var(--ink);
font-size:18px;
}
@media (max-width:980px){
.bracket-grid{
grid-template-columns:1fr 1fr;
}
.report-card{
grid-template-columns:1fr;
}
}
@media (max-width:620px){
.bracket-header{
display:block;
}
.bracket-grid{
grid-template-columns:1fr;
}
.report-score h3{
font-size:32px;
}
}
/* ===== Top Story Image + Clickable Live Score Updates ===== */
.story-image{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
object-position:center;
border-radius:4px;
}
.score-card-link{
color:inherit;
text-decoration:none;
display:block;
flex:0 0 220px;
}
.score-card.clickable{
cursor:pointer;
}
.score-card.clickable:hover{
border-color:var(--navy);
box-shadow:0 2px 10px rgba(0,0,0,.08);
transform:translateY(-1px);
}
.score-card{
transition:background .8s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* ===== MatchDayX Clickable CMS Upgrade ===== */
.click-card,
.article-trigger,
.match-trigger,
.team-trigger,
.standing-trigger{
cursor:pointer;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.click-card:hover,
.article-trigger:hover,
.match-trigger:hover,
.team-trigger:hover,
.standing-trigger:hover{
transform:translateY(-2px);
box-shadow:0 4px 14px rgba(0,0,0,.10);
border-color:var(--navy) !important;
}
.story-list-item.article-trigger:hover,
.lead-story.article-trigger:hover{
background:var(--bg-alt);
}
.story-list-item.article-trigger,
.lead-story.article-trigger{
border-radius:4px;
padding:10px;
}
.group-table tr.team-trigger:hover,
.mini-standings tr.team-trigger:hover{
background:rgba(0,28,106,.08) !important;
}
.match-list li.match-trigger:hover{
background:rgba(0,28,106,.08);
padding-left:10px;
border-radius:8px;
}
.mdx-page{
display:none;
animation:pageFade .28s ease;
}
.mdx-page.active{
display:block;
}
/* Anti-flash override for a refreshed live match page — see the tiny
inline script at the very top of . Cleared by showPage() the
moment real page routing takes over, so it never sticks around and
fights a later legitimate navigation back to the homepage. */
html[data-boot-page="live-match-page"] #homePage{
display:none !important;
}
html[data-boot-page="live-match-page"] #live-match-page{
display:block !important;
}
/* General anti-flash for refreshing/deep-linking to ANY other page (e.g.
#tables-page, #transfers, #scores-page) — needs no per-page JS at all.
The browser resolves :target purely from the URL's hash before it even
finishes parsing the rest of the document, so as long as the hash
matches a page's id exactly, the correct page is shown and the
homepage is hidden from the very first paint. showPage()'s own
history.replaceState() keeps this in sync on every later in-page
navigation too. (The live-match-page-12345 case above still needs its
own JS/attribute handling since that hash never literally matches the
#live-match-page id.) */
/* Both rules below are gated behind :not(:has(.mdx-page.active)) — meaning
they only ever apply in the narrow window before the JS router has run
at all (a genuine pre-JS first paint). Once JS assigns .active to any
page (which happens synchronously, moments after load), that becomes
the sole source of truth and these step aside completely.
Without that guard, :target caused a real bug: it doesn't reliably
re-evaluate when the SPA's own router uses history.replaceState() for
normal in-page navigation (replaceState doesn't count as a genuine
browser navigation in this engine's :target tracking) — so landing on
any non-homepage .mdx-page via an actual page load/reload would "stick"
:target there permanently. Every later in-page navigation (including
clicking Home or the logo) would then have its correct, JS-driven
.active state silently overridden: this same club-fixtures-page would
stay force-visible and the homepage would stay force-hidden no matter
what the router actually did, since :target never moved off its first,
real-navigation value. */
html:not(:has(.mdx-page.active)) .mdx-page:target{
display:block !important;
}
html:has(.mdx-page:target):not(:has(#homePage:target)):not(:has(.mdx-page.active)) #homePage{
display:none !important;
}
@keyframes pageFade{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:none;}
}
.page-shell{
max-width:1180px;
margin:0 auto;
padding:42px 24px;
}
.page-back{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid var(--border);
background:var(--bg);
color:var(--navy-text);
font-weight:800;
font-size:13px;
padding:9px 13px;
border-radius:999px;
margin-bottom:24px;
cursor:pointer;
}
.page-back:hover{
background:var(--navy);
color:#fff;
}
.cf-fixture-list{
list-style:none;
padding:0;
margin:22px 0 0;
display:flex;
flex-direction:column;
gap:10px;
}
.cf-fixture-list li{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
border:1px solid var(--border);
border-radius:12px;
background:var(--bg);
}
.cf-fixture-list .cf-mw{
font-size:11px;
font-weight:800;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.03em;
min-width:90px;
max-width:150px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.cf-section-head{
font-size:13px;
font-weight:800;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.04em;
margin:22px 0 10px;
}
.cf-club-header{display:flex; align-items:center; gap:16px; margin-bottom:6px;}
.cf-club-crest{width:60px; height:60px; object-fit:contain; flex-shrink:0;}
.cf-club-header h1{margin:0;}
.cf-cards-list{display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch;}
.cf-fx-card{flex:0 0 250px; max-width:250px;}
.cf-fx-comp{
display:flex; justify-content:space-between; align-items:baseline; gap:8px;
font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px;
}
.cf-fx-comp span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cf-fx-ft{font-weight:800; color:var(--ink); flex-shrink:0;}
.cf-fx-box{
display:flex; align-items:stretch;
border:1px solid var(--border); border-left:3px solid var(--navy);
border-radius:6px; overflow:hidden;
}
.cf-fx-rows{flex:1; display:flex; flex-direction:column; min-width:0;}
.cf-fx-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; background:var(--bg);}
.cf-fx-row-alt{background:var(--bg-alt);}
.cf-fx-team{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.cf-fx-crest{width:22px; height:22px; object-fit:contain; flex-shrink:0;}
.cf-fx-score{font-family:var(--font-mono); font-weight:800; font-size:17px; color:var(--ink); flex-shrink:0;}
.cf-fx-kickoff{
flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:2px; padding:8px 14px; border-left:1px solid var(--border); background:var(--bg-alt);
}
.cf-fx-day{font-size:10px; font-weight:800; color:var(--muted); letter-spacing:.04em;}
.cf-fx-time{font-size:16px; font-weight:800; color:var(--ink); font-family:var(--font-mono);}
.cf-fx-date{font-size:10px; font-weight:700; color:var(--muted);}
.cf-fixture-list .cf-opp{
display:flex;
align-items:center;
gap:8px;
font-family:var(--font-sans);
font-weight:800;
color:var(--ink);
flex:1;
}
.cf-fixture-list .cf-date{
font-size:12px;
color:var(--muted);
font-weight:700;
white-space:nowrap;
}
.cf-badge{
width:20px;
height:20px;
object-fit:contain;
flex-shrink:0;
}
.fixture-strip .score-card{
cursor:pointer;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fixture-strip .score-card:hover{
border-color:var(--navy);
box-shadow:0 4px 14px rgba(0,0,0,.10);
transform:translateY(-2px);
}
.fp-header{
text-align:center;
padding:28px 0 20px;
border-bottom:1px solid var(--border);
margin-bottom:26px;
}
.fp-matchup{
display:flex;
align-items:center;
justify-content:center;
gap:28px;
margin:14px 0;
}
.fp-team{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
min-width:140px;
}
.fp-badge{
width:56px;
height:56px;
object-fit:contain;
}
.fp-team-name{
font-family:var(--font-sans);
font-weight:800;
font-size:16px;
color:var(--ink);
text-align:center;
}
.fp-vs{
font-family:var(--font-mono);
font-size:13px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.05em;
}
.fp-kickoff{
font-size:13px;
color:var(--muted);
font-weight:700;
margin:4px 0 0;
}
.fp-columns{
display:grid;
grid-template-columns:1fr 1fr;
gap:32px;
}
@media (max-width:640px){
.fp-columns{grid-template-columns:1fr;}
.fp-matchup{gap:16px;}
}
.fp-col-title{
font-family:var(--font-sans);
font-size:16px;
font-weight:800;
margin:0 0 10px;
padding-bottom:8px;
border-bottom:2px solid var(--border);
}
.fp-status{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:18px;
}
.fp-status-pill{
font-family:var(--font-mono);
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.03em;
padding:5px 10px;
border-radius:20px;
background:var(--bg-alt);
color:var(--muted);
border:1px solid var(--border);
}
.fp-status-pill.fp-champ{
background:var(--navy);
color:#fff;
border-color:var(--navy);
}
.fp-status-pill.fp-promoted{
background:#E8F5E9;
color:#1B5E20;
border-color:#A5D6A7;
}
.fp-sub-title{
font-family:var(--font-mono);
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.04em;
color:var(--muted);
margin:0 0 10px;
}
body:has(#club-fixtures-page.active) #top-stories,
body:has(#club-fixtures-page.active) #bracket,
body:has(#club-fixtures-page.active) #premier-league,
body:has(#club-fixtures-page.active) #transfers,
body:has(#club-fixtures-page.active) #stats{
display:none;
}
.article-layout{
display:grid;
grid-template-columns:minmax(0, 1fr) 330px;
gap:30px;
align-items:start;
}
.article-main{
background:var(--bg);
border:1px solid var(--border);
border-radius:6px;
overflow:hidden;
}
.article-hero-img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
}
.entry-img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
border-radius:8px;
margin:10px 0;
display:block;
}
.article-body{
padding:30px;
}
.article-body h1{
font-size:clamp(34px, 5vw, 62px);
letter-spacing:-.04em;
margin:8px 0 14px;
}
.article-body .standfirst{
font-size:20px;
font-weight:800;
color:var(--ink);
margin-bottom:18px;
}
.article-body p{
font-size:17px;
color:var(--text);
margin:0 0 15px;
}
.article-sidebar{
position:sticky;
top:96px;
display:grid;
gap:16px;
}
.info-panel{
background:var(--bg);
border:1px solid var(--border);
border-radius:6px;
padding:18px;
}
.info-panel h3{
font-size:18px;
margin-bottom:12px;
}
/* 2026-09-02 per Corey: match page's Overview tab (Key Moments / Lineups /
Match Stats) uses a 2-column CSS grid with each panel's grid-column/
grid-row set inline by buildOverviewGridHTML() in matchdayx-website.html
-- fine on desktop, but on mobile/tablet it squeezed all three panels
into two narrow side-by-side columns instead of stacking full-width.
Inline styles need !important to override here since they can't be
removed without a JS change. Scoped to .mm-overview-grid .info-panel
specifically -- .info-panel alone is also used by the article sidebar
elsewhere on the site and must stay untouched. Same 1024px breakpoint as
the rest of the site's mobile/tablet rules. */
@media(max-width:1024px){
.mm-overview-grid{
grid-template-columns:1fr !important;
}
.mm-overview-grid .info-panel{
grid-column:1 !important;
grid-row:auto !important;
}
}
.quick-list li{
display:flex;
justify-content:space-between;
gap:12px;
border-bottom:1px solid var(--border);
padding:10px 0;
font-size:14px;
}
.quick-list li:last-child{border-bottom:0;}
.match-page-card{
background:linear-gradient(135deg, var(--navy), var(--navy-2));
color:#fff;
border-radius:6px;
padding:30px;
margin-bottom:24px;
}
.match-page-card h1{
color:#fff;
font-size:clamp(34px, 5vw, 58px);
margin:8px 0;
}
/* Stadium/venue line (.tab-placeholder) defaults to a muted grey meant for
light backgrounds — unreadable on this navy gradient box, so force it
white here specifically. */
.match-page-card .tab-placeholder{
color:#fff;
}
.match-versus{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:18px;
margin-top:22px;
}
.team-block{
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.18);
border-radius:4px;
padding:20px;
text-align:center;
}
.team-block h3{
color:#fff;
}
.team-block .flag{
font-size:34px;
margin-bottom:8px;
}
.vs-pill{
background:#fff;
color:var(--navy);
border-radius:999px;
padding:10px 14px;
font-family:var(--font-mono);
font-weight:900;
}
.live-updates{
display:grid;
gap:12px;
}
.update-item{
border-left:4px solid var(--red);
background:var(--bg-alt);
padding:14px;
border-radius:8px;
}
.team-profile-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
}
.team-hero{
border-radius:6px;
background:linear-gradient(135deg, var(--navy), #0B0C10);
color:#fff;
padding:30px;
}
.team-hero h1{color:#fff; font-size:clamp(36px,5vw,60px);}
.route-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}
.route-step{
border:1px solid var(--border);
background:var(--bg);
border-radius:4px;
padding:14px;
}
.route-step span{
display:block;
color:var(--muted);
font-family:var(--font-mono);
font-size:11px;
text-transform:uppercase;
}
.route-step strong{
display:block;
margin-top:6px;
color:var(--ink);
}
.bracket-match{
transition:opacity .45s ease, transform .45s ease, box-shadow .2s ease;
}
.bracket-match.bracket-hidden{
opacity:.18;
transform:scale(.98);
}
.bracket-match.bracket-focus{
opacity:1;
transform:scale(1.02);
box-shadow:0 12px 28px rgba(224,26,43,.18);
border-color:var(--red);
}
.bracket-controls{
display:flex;
gap:10px;
margin:18px 0 0;
flex-wrap:wrap;
}
.bracket-controls button{
border:1px solid var(--border);
background:var(--bg);
color:var(--ink);
font-weight:800;
border-radius:999px;
padding:9px 14px;
cursor:pointer;
}
.bracket-controls button:hover{
background:var(--navy);
color:#fff;
}
.read-more-pill{
display:inline-block;
margin-top:10px;
color:var(--navy-text);
font-weight:900;
font-size:13px;
}
@media (max-width:920px){
.route-grid{
grid-template-columns:1fr 1fr;
}
}
/* Tablet tier: keep the article's main+sidebar columns (and the 2-up
team-profile-grid) side by side for portrait tablets — iPad Mini/iPad/
iPad Air/iPad Pro 11" all land somewhere in 761-920px wide — instead of
fully stacking them like a phone. There's enough width for both
columns, just narrower than the full desktop 330px sidebar. Only
screens at 760px and below (phones, and the odd small Android tablet)
lose the side-by-side layout entirely, in the block below. */
@media (max-width:920px) and (min-width:761px){
.article-layout{
grid-template-columns:minmax(0,1fr) 260px;
gap:20px;
}
.article-body{
padding:24px;
}
}
@media (max-width:760px){
.article-layout,
.team-profile-grid{
grid-template-columns:1fr;
}
.article-sidebar{
position:static;
}
}
@media (max-width:620px){
.match-versus{
grid-template-columns:1fr;
}
.vs-pill{
justify-self:center;
}
.route-grid{
grid-template-columns:1fr;
}
.article-body{padding:22px;}
}
/* ===== MatchDayX full clickable section upgrade ===== */
.news-card, .watch-card, .carousel-card, .feature-card, .pundit-card, .category-card, .widget-card, .story-list-item, .lead-story{
cursor:pointer;
}
.news-card:hover, .watch-card:hover, .carousel-card:hover, .feature-card:hover, .pundit-card:hover, .category-card:hover, .widget-card:hover{
transform:translateY(-2px);
box-shadow:0 4px 14px rgba(0,0,0,.10);
}
/* ===== Updated hero banner image ===== */
.hero,
.hero-banner,
.site-hero,
.main-hero {
position: relative;
overflow: hidden;
background-image:
linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.18) 100%),
url('hero-banner-main.png') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.hero img,
.hero-banner img,
.site-hero img,
.main-hero img {
object-fit: cover;
}
.hero::after,
.hero-banner::after,
.site-hero::after,
.main-hero::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background: radial-gradient(circle at 72% 40%, rgba(255,199,44,.22), transparent 28%);
}
.hero > *,
.hero-banner > *,
.site-hero > *,
.main-hero > * {
position:relative;
z-index:1;
}
.click-card,
[data-page] {
cursor: pointer;
}
.click-card:hover,
[data-page]:hover {
transform: translateY(-2px);
}
/* ===== USA 1–4 Belgium live match page upgrade ===== */
.live-glow,
.glowing-live{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--red);
color:#fff !important;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
border-radius:3px;
padding:8px 14px;
}
.live-glow::before,
.glowing-live::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#fff;
animation:pulse 1.3s infinite;
}
.live-scoreboard{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:18px;
align-items:center;
margin:24px 0;
}
.live-team{
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.18);
border-radius:4px;
padding:22px;
text-align:center;
}
.live-team .flag{
font-size:34px;
margin-bottom:8px;
}
.live-team h3{
color:#fff;
margin:0 0 10px;
}
.live-team .score{
font-size:64px;
line-height:.9;
font-weight:1000;
font-family:var(--font-mono);
}
.live-clock{
display:grid;
gap:10px;
justify-items:center;
}
.live-clock .minute{
background:#fff;
color:var(--navy);
border-radius:4px;
padding:10px 14px;
font-weight:1000;
font-family:var(--font-mono);
}
.gws-card{
background:#202124;
border-radius:14px;
padding:22px 24px 26px;
margin:24px 0;
}
.gws-caption{
font-size:12px;
font-weight:600;
color:#9aa0a6;
margin-bottom:18px;
font-family:var(--font-sans);
}
.gws-row{
display:flex;
align-items:center;
justify-content:center;
gap:36px;
}
.gws-col{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
width:150px;
flex:0 0 150px;
}
/* Home team (first column) reads left-aligned under/beside its logo;
away team (last column) reads right-aligned — instead of both being
centered — so each name visually anchors to its own badge. Applies at
every screen size, not just mobile. */
.gws-col:first-child{align-items:flex-start;}
.gws-col:last-child{align-items:flex-end;}
.gws-team{
display:flex;
align-items:center;
gap:14px;
}
.gws-flag{
font-size:34px;
line-height:1;
}
.gws-score{
font-size:46px;
font-weight:800;
font-family:var(--font-sans);
color:#fff;
line-height:1;
min-width:44px;
display:inline-block;
text-align:center;
}
.gws-name{
font-size:15px;
font-weight:700;
color:#fff;
font-family:var(--font-sans);
max-width:100%;
text-align:center;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.gws-col:first-child .gws-name{text-align:left;}
.gws-col:last-child .gws-name{text-align:right;}
.gws-center{
text-align:center;
min-width:84px;
padding-top:6px;
}
.gws-status{
font-size:14px;
font-weight:600;
color:#e8eaed;
font-family:var(--font-sans);
}
.gws-when{
font-size:13px;
color:#9aa0a6;
margin-top:2px;
font-family:var(--font-sans);
}
@media (max-width:520px){
.gws-card{padding:18px 14px 20px;}
.gws-row{gap:8px;}
.gws-col{width:96px; flex-basis:96px;}
.gws-flag{font-size:24px;}
.gws-score{font-size:28px; min-width:28px;}
.gws-center{min-width:56px;}
.gws-status{font-size:12px;}
.gws-when{font-size:11px;}
/* Long official club names (e.g. "Nott'm Forest", "Vancouver Whitecaps")
must never truncate with "..." on a phone-width scoreboard — shrink
the font and let it wrap to a second line instead of clipping. */
.gws-name{
font-size:11.5px;
line-height:1.2;
white-space:normal;
overflow:visible;
text-overflow:clip;
}
}
.goal-list{
display:grid;
gap:10px;
}
.goal-item{
display:grid;
grid-template-columns:58px 1fr;
gap:12px;
align-items:start;
padding:13px;
border-radius:4px;
background:var(--bg-alt);
border:1px solid var(--border);
}
.goal-minute{
font-family:var(--font-mono);
font-weight:1000;
color:#fff;
background:var(--red);
border-radius:999px;
text-align:center;
padding:6px 8px;
}
.live-update-feed{
display:grid;
gap:10px;
}
.feed-item{
border-left:4px solid var(--red);
background:var(--bg-alt);
border-radius:4px;
padding:13px 14px;
}
.feed-item strong{
color:var(--ink);
}
.transfer-blog{
display:grid;
gap:0;
margin-top:10px;
}
.transfer-entry{
padding:18px 0;
border-top:1px solid var(--border);
}
.transfer-entry:first-child{
border-top:none;
padding-top:0;
}
.transfer-entry .entry-time{
display:block;
font-family:var(--font-mono);
font-size:12px;
font-weight:700;
color:var(--red);
text-transform:uppercase;
letter-spacing:.04em;
margin-bottom:6px;
}
.transfer-entry h3{
margin:0 0 8px;
font-size:19px;
}
.transfer-entry p{
margin:0 0 8px;
}
/* 2026-09-08 -- the sitewide "ul{list-style:none;}" reset (line 29) strips
bullets from every
, not a
.wc-story-card, so it needs its own sizing here rather than inheriting
the story-card rules. */
.mdx-ad-slot{
margin:14px auto;
max-width:1240px;
text-align:center;
}
.mdx-ad-slot img{
max-width:100%;
height:auto;
display:block;
margin:0 auto;
border-radius:6px;
}
#top-stories .wc-story-grid .mdx-ad-infeed{
margin:0;
max-width:none;
min-height:160px;
display:flex;
align-items:center;
justify-content:center;
background:var(--bg-alt);
border-radius:8px;
overflow:hidden;
}
#top-stories .wc-story-grid .mdx-ad-infeed img{
width:100%;
height:100%;
object-fit:cover;
border-radius:8px;
margin:0;
}
@media(max-width:1024px){
#top-stories .wc-story-grid .mdx-ad-infeed{
min-height:0;
aspect-ratio:16/9;
}
}
/* FIX 2026-09-02 (position-based big tile): big-tile status used to be
driven by whether a card happened to contain a .mix-comp-header logo
element (:has(.mix-comp-header)). Per Corey, that's backwards — he wants
big tile to be a fixed POSITION in the homepage News list (every other
card, matching the site's existing pattern), with whichever article
currently sits there automatically getting a club/competition/country
logo if one can be matched from its headline, and losing it the moment a
different article takes that slot. mdxApplyBigTiles() in
matchdayx-website.html now adds/removes a plain .mdx-big-tile class on
the right cards at runtime (recalculated on load and any time the grid's
card order changes, e.g. the Transfer Centre live tile jumping to #2),
and separately injects .mix-comp-header only when a real match is found
— a big-tile slot with no match just renders as a plain full card, no
logo, which is an accepted fallback. .mix-comp-header itself still has
no rule outside this block, same reasoning as before (unstyled crest
PNGs render huge; a CSP-blocked source shows a broken-image box) — it's
simply shown/styled only inside .mdx-big-tile now instead of only
inside :has(.mix-comp-header). Hidden entirely on desktop either way. */
.mix-comp-header{ display:none; }
@media(max-width:1024px){
#top-stories .wc-story-card.mdx-big-tile{
flex-direction:column;
align-items:stretch;
background:var(--bg);
box-shadow:0 1px 3px rgba(0,0,0,.08);
border-radius:6px;
border:1px solid var(--border);
padding:0;
margin:16px 0;
}
/* Adjusted 2026-09-02 per Corey, matching his approved
matchdayx-news-compact-list-mockup-v5.html reference: logo bigger
(20px -> 28px), label text now --font-sans (Inter) — the same family
as the club name / headline — instead of --font-mono, and the photo
shortened a bit (16/9 -> 16/8) so the big tile isn't as tall. */
#top-stories .wc-story-card.mdx-big-tile .mix-comp-header{
display:flex;
align-items:center;
gap:10px;
padding:12px 16px 10px;
font-family:var(--font-sans);
font-size:14px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.02em;
color:var(--navy-text);
}
#top-stories .wc-story-card.mdx-big-tile .mix-comp-header img{
width:28px !important;
height:28px !important;
min-width:0 !important;
margin-right:0 !important;
object-fit:contain;
flex-shrink:0;
border-radius:0;
}
/* Adjusted 2026-09-02 per Corey: top corners of the photo now rounded
(0 -> 6px 6px 0 0) instead of square, and the header above it got
10px of bottom padding so there's breathing room before the photo
instead of the two sitting flush against each other. */
#top-stories .wc-story-card.mdx-big-tile img.story-image{
margin-right:0 !important;
width:100% !important;
min-width:0 !important;
height:auto !important;
aspect-ratio:16/8 !important;
border-radius:6px 6px 0 0 !important;
}
#top-stories .wc-story-card.mdx-big-tile .wc-story-body{
padding:14px 16px 18px;
}
}
/* Live Blog pinned homepage card -- 2026-09-04. Always a large, full-width
tile on tablet+mobile, same treatment .mdx-big-tile gets above, but
independent of it: mdxApplyBigTiles() in matchdayx-website.html now
explicitly skips any card carrying data-liveblog-slug (see its own
comment there), since that function's every-other-card toggle is
position-based and would otherwise fight a card that's meant to stay
pinned at tile #1 the whole time it's featured. New, additive rule --
doesn't touch .mdx-big-tile or any other existing selector above. */
@media(max-width:1024px){
#top-stories .wc-story-card[data-liveblog-slug]{
grid-column:1/-1 !important;
flex-direction:column;
align-items:stretch;
background:var(--bg);
box-shadow:0 1px 3px rgba(0,0,0,.08);
border-radius:6px;
border:1px solid var(--border);
padding:0;
margin:0 0 16px;
}
#top-stories .wc-story-card[data-liveblog-slug] img.story-image{
margin-right:0 !important;
width:100% !important;
min-width:0 !important;
height:auto !important;
aspect-ratio:16/8 !important;
border-radius:6px 6px 0 0 !important;
}
#top-stories .wc-story-card[data-liveblog-slug] .wc-story-body{
padding:14px 16px 18px !important;
}
#top-stories .wc-story-card[data-liveblog-slug] h3{
font-size:19px !important;
line-height:1.3 !important;
}
/* 2026-09-04: the generic mobile/tablet "compact row" treatment above
(img forced down to a small fixed-size thumbnail, every inside a
story card hidden entirely) was built for the OLD plain photo+headline
Live Blog card and has no idea the new editorial-card design
(.mdx-lb-card2) has a full-bleed photo (.mdx-lb-photo) and a
standfirst paragraph (.mdx-lb-standfirst) that are meant to always
show. Confirmed live: without this, the standfirst was computing to
display:none on any screen under 1024px wide (including the
composer's own 340px-wide tile preview), and the photo was being
squashed to a 110-132px thumbnail by the generic img rules further
down this file. This block stays in effect at every width below
1024px too (media queries don't turn off going down, only the more
specific 620px rules layer on top), so one exemption here covers both
the tablet and phone breakpoints. */
#top-stories .wc-story-card.mdx-lb-card2 .mdx-lb-photo{
width:100% !important;
min-width:0 !important;
height:auto !important;
aspect-ratio:16/11 !important;
margin-right:0 !important;
object-position:center !important;
}
#top-stories .wc-story-card.mdx-lb-card2 p{
display:block !important;
}
/* 2026-09-05: missed this one in the first pass -- the competition crest
is ALSO a bare ) into its own separate flex row, which knocks the "X ago" badge onto its own line below the kicker instead of sitting inline next to it. Plain block flow lets .comp-tag (inline-block) and .tile-time-ago (inline-block) share a line naturally, exactly like they already do on desktop and everywhere else time-ago badges appear on the site. */ #top-stories .wc-story-card .wc-story-body{padding:0; flex:1;} #top-stories .wc-story-card h3{font-size:15.5px; font-weight:600; font-family:var(--font-sans); line-height:1.32; margin-bottom:6px;} .wc-story-card .comp-tag{ display:inline; background:none; color:var(--navy-text); padding:0; font-family:var(--font-sans); font-size:12.5px; font-weight:600; text-transform:none; letter-spacing:normal; margin-bottom:0; } /* LIVE tag keeps its full red pill (bg + white text + white blinking dot) on tablet/mobile instead of the plain-text downgrade every other tag gets above — Corey wants it to read as unmistakably live at every size, not just desktop. */ .wc-story-card .comp-tag.tag-live{ display:inline-block; background:var(--red); color:#fff; padding:3px 8px; border-radius:3px; font-family:var(--font-mono); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; } #top-stories .wc-story-card p{display:none;} } @media(max-width:620px){ .wc-story-grid{grid-template-columns:1fr; gap:0;} #archive-page .wc-story-grid{grid-template-columns:1fr; gap:0;} .wc-story-card{ grid-column:auto !important; flex-direction:row; align-items:flex-start; background:transparent; box-shadow:none; border-radius:0; border-bottom:1px solid var(--border,#e2e2e2); padding:16px 0; } .wc-story-card:first-child{padding-top:0;} .wc-story-card img{ /* margin-right instead of a flex `gap` on the parent — see the nav.main-nav comment above for why: gap silently renders as 0 on some Chromium-based tablet WebViews, which left the kicker badge and headline sitting flush against the thumbnail with no breathing room at all. margin-right is universally supported. */ margin-right:14px; width:110px !important; min-width:110px !important; height:82px !important; aspect-ratio:4/3 !important; object-position:center !important; border-radius:6px; } .wc-story-card .wc-story-body{padding:0; flex:1;} .wc-story-card h3{font-size:15px; font-weight:400; font-family:var(--font-sans);} .wc-story-card .comp-tag{font-family:var(--font-sans); text-transform:uppercase;} .wc-story-card p{display:none;} } /* ===== Match page tabs: Overview / Timeline / Lineups / Stats ===== */ .match-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin:26px 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .match-tabs::-webkit-scrollbar{display:none;} .match-tabs button, .match-tabs label{ background:none; border:none; border-bottom:3px solid transparent; padding:12px 18px; font-size:14px; font-weight:700; font-family:var(--font-sans); color:var(--muted); cursor:pointer; white-space:nowrap; display:inline-block; } .match-tabs button:hover, .match-tabs label:hover{color:var(--ink);} .match-tabs button.active{color:var(--navy-text); border-bottom-color:var(--navy);} .match-tab-panel{display:none; padding-top:22px;} .match-tab-panel.active{display:block;} .tab-radio{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;} .tab-radio[value="overview"]:checked ~ .match-tabs label[for$="-overview"], .tab-radio[value="timeline"]:checked ~ .match-tabs label[for$="-timeline"], .tab-radio[value="lineups"]:checked ~ .match-tabs label[for$="-lineups"], .tab-radio[value="stats"]:checked ~ .match-tabs label[for$="-stats"]{ color:var(--navy-text); border-bottom-color:var(--navy); } .tab-radio[value="overview"]:checked ~ .match-tab-panel[data-tab="overview"], .tab-radio[value="timeline"]:checked ~ .match-tab-panel[data-tab="timeline"], .tab-radio[value="lineups"]:checked ~ .match-tab-panel[data-tab="lineups"], .tab-radio[value="stats"]:checked ~ .match-tab-panel[data-tab="stats"]{ display:block; } #europe-tabs-wrap .match-tabs{flex-wrap:nowrap;} #europe-tabs-wrap .tab-radio[value="pl"]:checked ~ .match-tabs label[for="t5-pl"], #europe-tabs-wrap .tab-radio[value="laliga"]:checked ~ .match-tabs label[for="t5-laliga"], #europe-tabs-wrap .tab-radio[value="seriea"]:checked ~ .match-tabs label[for="t5-seriea"], #europe-tabs-wrap .tab-radio[value="bundesliga"]:checked ~ .match-tabs label[for="t5-bundesliga"], #europe-tabs-wrap .tab-radio[value="ligue1"]:checked ~ .match-tabs label[for="t5-ligue1"], #europe-tabs-wrap .tab-radio[value="ucl"]:checked ~ .match-tabs label[for="eu-ucl"], #europe-tabs-wrap .tab-radio[value="uel"]:checked ~ .match-tabs label[for="eu-uel"], #europe-tabs-wrap .tab-radio[value="uecl"]:checked ~ .match-tabs label[for="eu-uecl"]{ color:var(--navy-text); border-bottom-color:var(--navy); } #europe-tabs-wrap .tab-radio[value="pl"]:checked ~ .match-tab-panel[data-tab="pl"], #europe-tabs-wrap .tab-radio[value="laliga"]:checked ~ .match-tab-panel[data-tab="laliga"], #europe-tabs-wrap .tab-radio[value="seriea"]:checked ~ .match-tab-panel[data-tab="seriea"], #europe-tabs-wrap .tab-radio[value="bundesliga"]:checked ~ .match-tab-panel[data-tab="bundesliga"], #europe-tabs-wrap .tab-radio[value="ligue1"]:checked ~ .match-tab-panel[data-tab="ligue1"], #europe-tabs-wrap .tab-radio[value="ucl"]:checked ~ .match-tab-panel[data-tab="ucl"], #europe-tabs-wrap .tab-radio[value="uel"]:checked ~ .match-tab-panel[data-tab="uel"], #europe-tabs-wrap .tab-radio[value="uecl"]:checked ~ .match-tab-panel[data-tab="uecl"]{ display:block; } #africa-tabs-wrap .match-tabs{flex-wrap:wrap;} #africa-tabs-wrap .tab-radio[value="men"]:checked ~ .match-tabs label[for="af-men"], #africa-tabs-wrap .tab-radio[value="women"]:checked ~ .match-tabs label[for="af-women"], #africa-tabs-wrap .tab-radio[value="clubs"]:checked ~ .match-tabs label[for="af-clubs"]{ color:var(--navy-text); border-bottom-color:var(--navy); } #africa-tabs-wrap .tab-radio[value="men"]:checked ~ .match-tab-panel[data-tab="men"], #africa-tabs-wrap .tab-radio[value="women"]:checked ~ .match-tab-panel[data-tab="women"], #africa-tabs-wrap .tab-radio[value="clubs"]:checked ~ .match-tab-panel[data-tab="clubs"]{ display:block; } #tables-tabs-wrap .match-tabs{flex-wrap:nowrap;} #tables-tabs-wrap .tab-radio[value="pl"]:checked ~ .match-tabs label[for="tbl-pl"], #tables-tabs-wrap .tab-radio[value="laliga"]:checked ~ .match-tabs label[for="tbl-laliga"], #tables-tabs-wrap .tab-radio[value="seriea"]:checked ~ .match-tabs label[for="tbl-seriea"], #tables-tabs-wrap .tab-radio[value="bundesliga"]:checked ~ .match-tabs label[for="tbl-bundesliga"], #tables-tabs-wrap .tab-radio[value="ligue1"]:checked ~ .match-tabs label[for="tbl-ligue1"], #tables-tabs-wrap .tab-radio[value="mls"]:checked ~ .match-tabs label[for="tbl-mls"], /* FIX 2026-09-02 per Corey: Champions League/Europa League/Conference League tabs (added to the Tables page markup 2026-08-30, per an earlier session) were never added to this selector list, so their radio inputs could be checked but nothing ever showed — the tab label never picked up the active/underline styling and, worse (see the matching panel-display block right below), the panel itself stayed display:none no matter what. Confirmed live: uel/ueclTableBody were already being fetched and populated with real rows the whole time, just permanently hidden by this gap — not actually "no data", just invisible. Champions League ('ucl') is added here too since it's being wired up to the same live-table mechanism as part of this same fix (see matchdayx-website.html). */ #tables-tabs-wrap .tab-radio[value="ucl"]:checked ~ .match-tabs label[for="tbl-ucl"], #tables-tabs-wrap .tab-radio[value="uel"]:checked ~ .match-tabs label[for="tbl-uel"], #tables-tabs-wrap .tab-radio[value="uecl"]:checked ~ .match-tabs label[for="tbl-uecl"]{ color:var(--navy-text); border-bottom-color:var(--navy); } #tables-tabs-wrap .tab-radio[value="pl"]:checked ~ .match-tab-panel[data-tab="pl"], #tables-tabs-wrap .tab-radio[value="laliga"]:checked ~ .match-tab-panel[data-tab="laliga"], #tables-tabs-wrap .tab-radio[value="seriea"]:checked ~ .match-tab-panel[data-tab="seriea"], #tables-tabs-wrap .tab-radio[value="bundesliga"]:checked ~ .match-tab-panel[data-tab="bundesliga"], #tables-tabs-wrap .tab-radio[value="ligue1"]:checked ~ .match-tab-panel[data-tab="ligue1"], #tables-tabs-wrap .tab-radio[value="mls"]:checked ~ .match-tab-panel[data-tab="mls"], #tables-tabs-wrap .tab-radio[value="ucl"]:checked ~ .match-tab-panel[data-tab="ucl"], #tables-tabs-wrap .tab-radio[value="uel"]:checked ~ .match-tab-panel[data-tab="uel"], #tables-tabs-wrap .tab-radio[value="uecl"]:checked ~ .match-tab-panel[data-tab="uecl"]{ display:block; } .scores-month-heading{text-align:center; font-family:var(--font-sans); font-weight:800; font-size:19px; color:var(--navy-text); padding:16px 0 2px; margin:22px 0 0;} .scores-date-nav{display:flex; align-items:stretch; gap:0; border-bottom:1px solid var(--border); margin:0;} .sdn-arrow{background:none; border:none; cursor:pointer; font-size:26px; font-weight:300; color:var(--muted); padding:0 16px; flex-shrink:0; line-height:1; display:flex; align-items:center;} .sdn-arrow:hover{color:var(--navy-text);} .scores-date-strip{ display:flex; flex:1; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .scores-date-btn{ background:none; border:none; cursor:pointer; font-family:var(--font-sans); color:var(--muted); padding:10px 12px 8px; flex:0 0 auto; min-width:56px; display:flex; flex-direction:column; align-items:center; gap:5px; scroll-snap-align:center; } .scores-date-btn .sdb-day{font-size:12.5px; font-weight:600;} .scores-date-btn .sdb-num{font-size:16px; font-weight:700; color:var(--navy-text); padding-bottom:6px; border-bottom:3px solid transparent; line-height:1;} .scores-date-btn:hover .sdb-day, .scores-date-btn:hover .sdb-num{color:var(--navy-text);} .scores-date-btn.active .sdb-num{border-bottom-color:var(--navy);} .scores-date-btn.is-today .sdb-day{color:var(--red); font-weight:700;} .scores-date-btn.is-today.active .sdb-num{color:var(--red); border-bottom-color:var(--red);} /* Mobile-only full-date heading ("Wednesday, September 2, 2026") sitting below the strip -- markup + comment already existed in the page (see "Mobile-only full-date heading" note above #scoresDateHeading in the HTML) but no CSS had ever been written for it, so it was rendering at the browser's unstyled div default (16px/400) at every width instead of only on mobile/tablet. Base rule hides it on desktop, which keeps using the existing .scores-month-heading ("September 2026") above the strip instead, per that original comment's stated intent. */ .scores-date-heading{display:none;} /* Decorative-but-functional calendar-icon button (Corey's reference mockup) next to the date strip -- opens the device's native date picker via the invisible #scoresCalInput overlaid on top of it (see matching JS patch), and jumps the strip straight to whatever date is picked. Hidden on desktop by default (matches the rest of this ESPN redesign being mobile/tablet-scoped); shown in the media query below. */ .scores-cal-btn{ display:none; flex:none; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; position:relative; } .scores-cal-btn svg{width:19px; height:19px;} .scores-cal-btn:hover{background:var(--bg-alt);} #scoresCalInput{ position:absolute; inset:0; opacity:0; width:100%; height:100%; border:0; cursor:pointer; } /* 2026-09-06 per Corey's reference (a Sky Sports-style desktop calendar): new "Choose a league" filter select added to the Scores & Fixtures title bar (matchdayx-website.html) -- hidden here by default so it has zero effect on mobile/tablet (native |