*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--accent: #15803d;
--accent-light: #dcfce7;
--text: #1a1816;
--muted: #4b5563;
--card: #fefefb;
--border: #e5e7eb;
--live: #dc2626;
--bg: #fafaf7;
--header-bg: #ffffff;
/* Actual rendered height of .sticky-wrap (header + active chips bar),
kept live by trackStickyHeaderHeight() — see .cal-sticky. 0px until
JS runs is a safe default: the compact date bar stays hidden
(display:none) until it is needed, so there is nothing to misplace
before the real value lands. */
--sticky-header-h: 0px;
--noise: url("data:image/svg+xml;utf8,");
/* ── WTM_RAIL_TOKENS_START ────────────────────────────────────────────────
The canonical horizontal rail for the central schedule column.
`main` is the rail container. Inside it, `.date-group` reserves a left
column for the date label, so a module that carries a date label is
already on the rail, and a module that does not (the calendar's controls
and competition groups, every section heading) is inset by exactly that
same column. Both halves are derived from one pair of numbers here, so
the two can never drift apart the way three hand-copied `calc()`s did.
Everything in the central column resolves to:
left = --rail-pad + --rail-gutter
right = --rail-container - --rail-pad
No module is allowed a max-width of its own. */
--rail-container: 760px; /* main's max-width */
--rail-pad: 2rem; /* main's inline padding */
--rail-date-col: 88px; /* .date-group's date-label column */
--rail-date-gap: 1.25rem; /* .date-group's column gap */
--rail-gutter: calc(var(--rail-date-col) + var(--rail-date-gap));
/* The rail's measure, mirrored about the container's centre line: the width
of a page-centred box whose left edge is the rail's. The header search is
deliberately this much narrower than the rail (see .search-wrap). */
--rail-search-width: calc(var(--rail-container) - 2 * (var(--rail-pad) + var(--rail-gutter)));
/* Homepage proposal: a deliberately wider page-level composition around
the canonical card component. These roles derive from the existing rail
and spacing tokens rather than creating a second spacing system. */
--homepage-main-column: 720px;
--homepage-guide-column: 340px;
--homepage-column-gap: 2rem;
--homepage-shell: calc(var(--homepage-main-column) + var(--homepage-column-gap) + var(--homepage-guide-column));
}
/* Below the date-group breakpoint the date label stacks above its fixtures,
so the gutter closes and the rail becomes the full width minus the mobile
page gutters. One breakpoint, one place. */
@media (max-width: 640px) {
:root { --rail-pad: 1rem; --rail-gutter: 0px; }
}
/* ── WTM_RAIL_TOKENS_END ──────────────────────────────────────────────────── */
body { background-color: var(--bg); background-image: var(--noise); background-repeat: repeat; color: var(--text); font-family: 'DM Sans', sans-serif; line-height: 1.65; min-height: 100vh; min-height: 100dvh; overflow-x: clip; display: flex; flex-direction: column; }
/* ── Global navigation ── */
.global-nav { position:fixed; inset:0 auto 0 0; z-index:110; width:54px; background:#fff; border-right:1px solid var(--border); transition:width .18s ease; overflow:hidden; }
.global-nav.is-open { width:286px; box-shadow:8px 0 24px rgba(26,24,22,.08); }
.global-nav-rail { width:54px; height:100%; display:flex; flex-direction:column; align-items:center; padding:.6rem 0; box-sizing:border-box; }
.global-nav-mark, .global-nav-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--muted); text-decoration:none; cursor:pointer; border-radius:4px; }
.global-nav-mark { font-family:'Syne',sans-serif; font-weight:700; color:var(--accent); font-size:1.1rem; margin-bottom:.8rem; }
.global-nav-icon:hover, .global-nav-icon:focus-visible, .global-nav-mark:hover, .global-nav-mark:focus-visible { color:var(--accent); background:#f4f5f2; outline:2px solid transparent; }
.global-nav-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.global-nav-country-code { margin-top:auto; font-size:.72rem; font-weight:700; letter-spacing:.05em; }
.global-nav-panel { position:absolute; inset:0 0 0 54px; width:232px; display:flex; flex-direction:column; background:#fff; opacity:0; pointer-events:none; transition:opacity .12s ease; }
.global-nav.is-open .global-nav-panel { opacity:1; pointer-events:auto; }
/* Cycle 1I, track C: the close control must be a real target (WCAG 2.2 SC
2.5.8, 24x24). It was being squeezed to 11.7px wide by this flex row, whose
contents (a 226.7px wordmark + the button) do not fit a 232px drawer — so
the row also overflowed its own panel. The button keeps its designed 40px
and the WORDMARK yields instead, ellipsizing inside the row rather than
pushing the close control out of the drawer. */
.global-nav-head { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:0 1rem; border-bottom:1px solid var(--border); }
.global-nav-wordmark { font-family:'Syne',sans-serif; font-weight:800; font-size:.9rem; letter-spacing:-.035em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-nav-close { flex:0 0 auto; width:40px; min-width:40px; height:40px; border:0; background:transparent; cursor:pointer; color:var(--muted); font-size:1.25rem; }
.global-nav-content { flex:1; overflow:auto; padding:1rem; }
/* Cycle 1I, track C: this is text, and at 10.4px it is normal-size text, so
WCAG 2.1 SC 1.4.3 asks for 4.5:1. #7a7f88 on white is 4.02:1 — a genuine AA
failure on every page that loads the shell. #6b7280 is 4.83:1 and is the same
muted grey the match page already uses for control boundaries, so the panel
keeps its quiet register. Raised to 12px in the same pass: 10.4px uppercase
was the smallest meaningful text in the shared shell. */
.global-nav-section-label { margin:1.15rem 0 .35rem; font-size:.75rem; font-weight:700; letter-spacing:.11em; color:#6b7280; text-transform:uppercase; }
.global-nav-row, .global-nav-back { width:100%; min-height:44px; display:flex; align-items:center; gap:.7rem; padding:.55rem .35rem; border:0; border-bottom:1px solid transparent; background:transparent; color:var(--text); text-decoration:none; font:inherit; font-size:.9rem; text-align:left; cursor:pointer; box-sizing:border-box; }
.global-nav-row:hover, .global-nav-row:focus-visible, .global-nav-back:hover, .global-nav-back:focus-visible { color:var(--accent); border-bottom-color:#d9ddd7; outline:0; }
.global-nav-row svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; flex:none; }
.global-nav-chevron { margin-left:auto; color:#8a8f96; }
.global-nav-back { font-size:.8rem; color:var(--muted); margin-bottom:.5rem; }
.global-nav-title { font-family:'Syne',sans-serif; font-size:1.05rem; margin:.3rem 0 1rem; }
.global-nav-search { width:100%; min-height:44px; border:1px solid var(--border); border-radius:4px; padding:.65rem .7rem; font:inherit; font-size:.82rem; box-sizing:border-box; }
.global-nav-search:focus { border-color:var(--accent); outline:2px solid rgba(21,128,61,.15); }
.global-nav-results { margin-top:.6rem; }
.global-nav-result-meta { display:block; color:var(--muted); font-size:.7rem; line-height:1.35; }
.global-nav-empty { color:var(--muted); font-size:.82rem; line-height:1.5; margin:.75rem 0; }
.global-nav-country { border-top:1px solid var(--border); padding:.8rem 1rem 1rem; }
.global-nav-country select { width:100%; min-height:44px; border:1px solid var(--border); background:#fff; border-radius:4px; padding:.55rem; font:inherit; color:var(--text); }
.global-nav-scrim { display:none; position:fixed; inset:0; z-index:105; background:rgba(20,20,18,.28); }
.global-nav-scrim.is-open { display:block; }
.mobile-nav-trigger { display:none; width:44px; height:44px; border:0; background:transparent; color:var(--text); align-items:center; justify-content:center; cursor:pointer; }
.mobile-nav-trigger svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
@media (min-width:769px) {
body { padding-left:54px; }
.sticky-wrap { margin-left:0; }
}
@media (max-width:768px) {
.global-nav { width:min(100%, 340px); transform:translateX(-100%); transition:transform .18s ease; border-right:0; }
.global-nav.is-open { width:min(100%, 340px); transform:translateX(0); box-shadow:8px 0 24px rgba(26,24,22,.12); }
.global-nav-rail { display:none; }
.global-nav-panel { position:relative; inset:auto; width:100%; height:100%; opacity:1; pointer-events:auto; }
.mobile-nav-trigger { display:flex; }
header .header-home-link { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) { .global-nav, .global-nav-panel { transition:none; } }
/* ── Sticky top wrapper (header + chips bar) ── */
.sticky-wrap {
position: sticky; top: 0; z-index: 50;
background: var(--header-bg); flex-shrink: 0;
}
/* ── Header ── */
header {
padding: 0.9rem 2rem;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
background: var(--header-bg);
gap: 0.75rem;
}
/* ── Active chips bar (below header, shown when any chip is visible) ── */
.chips-bar {
display: none;
align-items: center; flex-wrap: wrap; gap: 0.4rem;
padding: 0.45rem 1.5rem;
border-bottom: 1px solid var(--border);
background: var(--header-bg);
}
.chips-bar.has-chips { display: flex; }
.filter-toast {
position: fixed;
top: 4.5rem;
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: var(--card-bg, #f5f2ed);
color: var(--text, #2a2722);
border: 1px solid var(--border, #d6d0c7);
border-radius: 2rem;
padding: 0.4rem 1rem;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
pointer-events: none;
opacity: 0;
z-index: 9999;
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.filter-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.header-left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; overflow: hidden; flex-shrink: 0; position: relative; z-index: 1; }
.logo-icon {
height: clamp(1.4rem, 4.5vw, 2.4rem);
width: auto;
flex-shrink: 0;
/* Recolour to match --accent: #15803d exactly */
filter: brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(600%) hue-rotate(122deg) brightness(93%);
}
/* Cycle 1I, track C: at 390px this link renders 85.9x18.3 — under the 24px
minimum of SC 2.5.8, and the mobile nav trigger sits close enough that the
spacing exception does not rescue it. The box grows; the logo and wordmark
inside it do not. */
.header-home-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; min-height: 24px; }
.header-home-link:hover .logo { text-decoration: underline; }
.logo { font-family: 'Syne', sans-serif; font-size: clamp(1rem, 4.5vw, 2.1rem); font-weight: 800; color: var(--accent); letter-spacing: -0.045em; line-height: .94; white-space: nowrap; }
.logo-abbr { display: none; }
.logo-abbr::after { content: "WTM"; }
/* below 1080px show the 3-letter abbreviation; above shows full wordmark */
@media (max-width: 1079px) { .logo-full { display: none; } .logo-abbr { display: inline; } }
.header-controls { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; position: relative; z-index: 1; }
@media (max-width: 480px) {
header { padding: 0.6rem 0.75rem; gap: 0.4rem; }
.chips-bar { padding: 0.4rem 0.75rem; }
.header-left { gap: 0.4rem; }
.logo-icon { height: clamp(1.2rem, 4vw, 1.6rem); }
.logo { font-size: clamp(1rem, 4.5vw, 1.4rem); }
.filter-btn { width: 44px; padding: 0; justify-content: center; }
.filter-btn > span:not(.filter-badge) { display: none; }
}
@media (max-width: 400px) {
.logo-icon { display: none; }
.logo { font-size: clamp(1.1rem, 5vw, 1.4rem); }
}
/* ── Region dropdown ── */
.region-select-wrap { position: relative; }
.region-select-wrap select {
appearance: none;
-webkit-appearance: none;
background: var(--header-bg);
border: 1px solid var(--border);
border-radius: 100px;
padding: 0.55rem 1.5rem 0.55rem 0.85rem;
font-family: 'DM Sans', sans-serif;
font-size: 0.82rem;
color: var(--text);
cursor: pointer;
outline: none;
transition: border-color 0.15s;
min-width: 0;
width: auto;
min-height: 44px;
}
.region-select-wrap select:hover,
.region-select-wrap select:focus { border-color: var(--accent); }
.region-select-wrap select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.region-select-wrap::after {
content: '';
pointer-events: none;
position: absolute; right: 0.75rem; top: 50%;
transform: translateY(-50%);
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--muted);
}
/* The homepage is territory-led automatically. Keep manual country changes in
the global navigation, but do not spend primary-header space on a second
territory control here. Other page families retain the established pill. */
body.has-homepage-guides .region-select-wrap { display: none; }
/* WTM_TERRITORY_CSS_START */
/* ── Territory picker ──────────────────────────────────────────────────────
Closed: Watching in [territory]
Open: SEARCH, then results only after the visitor types
Desktop: anchored dropdown. Mobile: full-width bottom sheet, because a
251-row anchored list is unusable on a phone. */
.tp { position: relative; }
.tp-btn {
display: flex; align-items: center; gap: 0.4rem;
max-width: min(15rem, 42vw);
padding: 0.55rem 1.6rem 0.55rem 0.85rem;
border: 1px solid var(--border); border-radius: 100px;
background: var(--header-bg); color: var(--text); cursor: pointer;
font-family: 'DM Sans', sans-serif; font-size: 0.82rem;
min-height: 44px; transition: border-color 0.15s;
}
.tp-btn:hover { border-color: var(--accent); }
.tp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-lead { color: var(--muted); white-space: nowrap; }
.tp-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-caret {
position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
width: 0; height: 0; pointer-events: none;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid var(--muted);
}
@media (max-width: 900px) { .tp-lead { display: none; } }
.tp-panel {
position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 200;
width: min(21rem, calc(100vw - 1.5rem));
background: var(--header-bg); border: 1px solid var(--border);
border-radius: 14px; box-shadow: 0 12px 32px rgba(26,24,22,0.16);
display: flex; flex-direction: column; max-height: min(28rem, 70vh);
}
.tp-panel[hidden] { display: none; }
.tp-head { padding: 0.9rem 0.75rem 0; flex-shrink: 0; }
.tp-title { margin: 0 0 0.65rem; font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.tp-section {
margin: 0.5rem 0.25rem 0.3rem;
font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted);
}
.tp-section-list { margin-left: 0.85rem; margin-right: 0.85rem; }
.tp-search {
width: 100%; box-sizing: border-box;
padding: 0.6rem 0.7rem; min-height: 44px;
border: 1px solid var(--border); border-radius: 10px;
background: var(--bg); color: var(--text);
font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
}
.tp-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tp-hint { margin: 0.35rem 0.25rem 0; font-size: 0.7rem; color: var(--muted); }
.tp-list { list-style: none; margin: 0; padding: 0 0.35rem 0.5rem; overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
.tp-row {
display: flex; align-items: center; gap: 0.55rem; width: 100%;
padding: 0.6rem 0.5rem; min-height: 44px;
border: 0; border-radius: 8px; background: none; cursor: pointer;
font-family: 'DM Sans', sans-serif; font-size: 0.88rem; color: var(--text);
text-align: left;
}
.tp-row:hover, .tp-row.is-active { background: var(--chip-bg, rgba(26,24,22,0.06)); }
.tp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tp-row .tp-row-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-row .tp-row-code { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 1.5rem; padding: 0 .35rem; border-radius: 4px; background: var(--chip-bg, rgba(26,24,22,0.06)); font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.tp-empty { margin: 0; padding: 0.75rem 0.9rem 1rem; font-size: 0.85rem; color: var(--muted); }
.tp-backdrop { display: none; }
@media (max-width: 640px) {
.tp-panel {
position: fixed; inset: auto 0 0 0; top: auto; width: 100%;
max-height: 82vh; border-radius: 16px 16px 0 0;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.tp-backdrop {
display: block; position: fixed; inset: 0; z-index: 199;
background: rgba(26,24,22,0.35);
}
.tp-backdrop[hidden] { display: none; }
}
/* ── Competition-level viewing block ──────────────────────────────────────
Shown only for territories whose fixtures carry no broadcaster data. */
.tv-block {
margin: 0.75rem auto 0; max-width: 1200px;
padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 12px;
background: var(--header-bg);
}
.tv-title { margin: 0 0 0.5rem; font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; }
.tv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; }
.tv-item { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.86rem; }
.tv-brand { font-weight: 600; }
.tv-services { color: var(--muted); }
.tv-note { margin: 0.55rem 0 0; font-size: 0.75rem; color: var(--muted); }
.tv-note-standalone { max-width: 1200px; margin: 0.4rem auto 0; padding: 0 1rem; }
.tv-block + .tv-block { margin-top: 0.5rem; }
.tv-flag {
margin-left: 0.3rem;
font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
padding: 0.1rem 0.35rem; border: 1px solid var(--border); border-radius: 4px; color: var(--muted);
}
@media (max-width: 640px) {
.tv-block { margin-left: 0.75rem; margin-right: 0.75rem; }
.tv-list { flex-direction: column; gap: 0.3rem; }
}
/* WTM_TERRITORY_CSS_END */
/* ── Filter button ── */
.filter-btn {
display: flex; align-items: center; gap: 0.45rem;
padding: 0.55rem 0.85rem;
border: 1px solid var(--border); border-radius: 100px;
background: var(--header-bg); cursor: pointer;
font-family: 'DM Sans', sans-serif; font-size: 0.82rem; color: var(--text);
transition: all 0.15s; position: relative; min-height: 44px;
}
.filter-btn:hover { border-color: #aaa49c; }
.filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-btn.has-filter { border-color: #aaa49c; background: #ede9e0; color: var(--text); }
.filter-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.filter-badge {
display: inline-flex; align-items: center; justify-content: center;
background: #2a2722; color: #fff;
width: 16px; height: 16px; border-radius: 50%;
font-size: 0.6rem; font-weight: 600; line-height: 1;
}
/* ── Filter panel overlay ── */
.filter-overlay {
display: none; position: fixed; inset: 0; z-index: 90;
background: rgba(0,0,0,0.18); animation: fpFadeIn 0.2s ease;
}
.filter-overlay.open { display: block; }
@keyframes fpFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ── Filter panel — bottom sheet on mobile, right sidebar on desktop ── */
.filter-panel {
display: none; position: fixed; z-index: 100;
background: var(--card); flex-direction: column; overflow: hidden;
}
.filter-panel.open { display: flex; }
/* Mobile: bottom sheet */
@media (max-width: 767px) {
.filter-panel {
left: 0; right: 0; bottom: 0; height: 82svh;
border-radius: 16px 16px 0 0;
box-shadow: 0 -4px 32px rgba(0,0,0,0.14);
}
.filter-panel.open { animation: fpSlideUp 0.25s cubic-bezier(.16,1,.3,1); }
@keyframes fpSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
}
/* Desktop: full-height right sidebar */
@media (min-width: 768px) {
.filter-panel {
top: 0; right: 0; bottom: 0; width: 360px;
border-left: 1px solid var(--border);
box-shadow: -4px 0 32px rgba(0,0,0,0.1);
}
.filter-panel.open { animation: fpSlideRight 0.22s cubic-bezier(.16,1,.3,1); }
@keyframes fpSlideRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
}
/* Drag handle (mobile only) */
.fp-drag-handle {
display: flex; justify-content: center; padding: 10px 0 4px;
flex-shrink: 0; cursor: grab; touch-action: none;
}
.fp-drag-handle-bar { width: 40px; height: 4px; border-radius: 2px; background: #d0ccc4; }
@media (min-width: 768px) { .fp-drag-handle { display: none; } }
/* Panel header */
.filter-panel-header {
display: flex; align-items: center; gap: 0.35rem;
padding: 0.5rem 0.4rem 0.5rem 1rem;
border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.filter-panel-title { font-weight: 600; font-size: 0.92rem; flex: 1; color: var(--text); }
.fp-count { font-size: 0.78rem; color: var(--muted); font-weight: 400; }
.fp-clear-all {
background: none; border: none; cursor: pointer; padding: 0.2rem 0.4rem;
font-size: 0.73rem; color: var(--muted); text-decoration: underline;
text-underline-offset: 2px; white-space: nowrap; display: none;
font-family: 'DM Sans', sans-serif; border-radius: 4px;
}
.fp-clear-all.visible { display: block; }
.fp-clear-all:hover { color: var(--text); }
.filter-close-btn {
background: none; border: none; cursor: pointer; color: var(--muted);
line-height: 1; padding: 0; width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 4px; transition: color 0.1s; flex-shrink: 0;
}
.filter-close-btn:hover { color: var(--text); }
/* Search within panel */
.fp-search-wrap { padding: 0.55rem 0.9rem 0; flex-shrink: 0; }
.fp-search-input {
width: 100%; box-sizing: border-box; border: 1px solid var(--border);
border-radius: 6px; padding: 0.45rem 0.75rem; background: #f5f3ec;
font-family: 'DM Sans', sans-serif; font-size: 0.82rem; color: var(--text);
outline: none; transition: border-color 0.15s;
}
.fp-search-input:focus { border-color: #aaa49c; }
.fp-search-input::placeholder { color: var(--muted); }
/* Scrollable body */
.fp-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Sections */
.filter-section { padding: 0.75rem 0.9rem 0.65rem; }
.filter-section + .filter-section { border-top: 1px solid var(--border); }
.filter-section-title {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--text); margin-bottom: 0.15rem; font-weight: 700;
display: flex; align-items: center; justify-content: space-between;
}
.fp-section-clear {
background: none; border: none; cursor: pointer; padding: 0;
font-size: 0.68rem; color: var(--muted); text-decoration: underline;
text-underline-offset: 2px; font-family: 'DM Sans', sans-serif;
text-transform: none; letter-spacing: 0; font-weight: 400;
}
.fp-section-clear:hover { color: var(--text); }
.filter-section-desc { font-size: 0.7rem; color: var(--muted); margin-bottom: 0.5rem; line-height: 1.4; }
.filter-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-opt {
padding: 0.4rem 0.7rem; border-radius: 6px; border: none;
background: #f0ede5; font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
color: #2a2722; cursor: pointer; transition: background 0.12s, color 0.12s;
white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center;
}
.filter-opt:hover { background: #e5e0d6; }
.filter-opt.active { background: #2a2722; color: #fff; }
.filter-opt.fp-hidden { display: none !important; }
body:not(.wc-mode) [data-filter="worldcup"] { display: none !important; }
.channels-filter-hint { font-size: 0.68rem; color: var(--muted); margin: -0.2rem 0 0.6rem; }
/* Sticky bottom bar */
.fp-footer {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.65rem 0.9rem; border-top: 1px solid var(--border); flex-shrink: 0;
}
.fp-match-count { font-size: 0.78rem; color: var(--muted); flex: 1; }
.fp-done-btn {
background: #2a2722; color: #fff; border: none; cursor: pointer;
border-radius: 6px; padding: 0.55rem 1.25rem;
font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 600;
min-height: 44px; transition: background 0.12s;
}
.fp-done-btn:hover { background: #3d3630; }
/* Active filter chip in header area */
.active-filter-chip {
display: none; align-items: center; gap: 0.3rem;
padding: 0.5rem 0.6rem 0.5rem 0.75rem;
background: #f0ede5; border: 1px solid #ccc8bf;
border-radius: 100px; font-size: 0.72rem; color: var(--text);
font-weight: 500; cursor: pointer; transition: all 0.15s; min-height: 44px;
}
.active-filter-chip.visible { display: flex; }
.active-filter-chip:hover { background: #e5e0d6; }
.chip-x { font-size: 0.75rem; line-height: 1; }
/* Team filter chip — same style as filter chip */
.team-filter-chip {
display: none;
align-items: center; gap: 0.3rem;
padding: 0.5rem 0.6rem 0.5rem 0.75rem;
background: #eff6ff; border: 1px solid #93c5fd;
border-radius: 100px; font-size: 0.72rem; color: #1d4ed8;
font-weight: 500; cursor: pointer; transition: all 0.15s;
max-width: 160px; min-height: 44px;
}
.team-filter-chip.visible { display: flex; }
.team-filter-chip:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.team-filter-chip span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Clickable team names */
.team-name-btn {
background: none; border: none; padding: 0.3rem 0; margin: 0;
font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -0.015em;
font-family: 'DM Sans', sans-serif; cursor: pointer; text-align: left;
transition: color 0.15s;
min-width: 0; flex-shrink: 1; line-height: 1.2;
white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.team-name-btn:hover { color: var(--accent); }
.fixture-teams.right .team-name-btn { text-align: right; }
/* Responsive team name: full on ≥900px, abbreviated below */
.tn-abbr { display: none; }
@media (max-width: 899px) {
.tn-full { display: none; }
.tn-abbr { display: inline; }
}
/* ── Main content ── */
main { padding: 0.75rem var(--rail-pad) 1.5rem; max-width: var(--rail-container); margin: 0 auto; width: 100%; }
#route-heading-wrap { max-width: var(--rail-container); margin: 0 auto; padding: 0 var(--rail-pad) 0 calc(var(--rail-pad) + var(--rail-gutter)); width: 100%; }
#route-heading-wrap:not(:empty) { padding-top: 1.2rem; }
.route-page-h1 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 4.5vw, 2.2rem); letter-spacing: -0.01em; color: var(--accent); line-height: 1.1; margin: 0 0 0.1rem; }
/* Broadcaster page header logo — injected by scripts/bake-broadcasters.mjs
directly before the page's main heading. Same 40px badge box regardless
of mark shape; pale marks (ITVX) get the neutral logo-well chip so they
stay legible without altering the artwork itself. */
.bc-header-logo { margin: 0.9rem 0 0.5rem; }
.bc-header-logo-img { display: block; width: 40px; height: 40px; object-fit: contain; }
.bc-header-logo--well { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: #1a1a1a; }
.bc-header-logo--well .bc-header-logo-img { width: 34px; height: 34px; }
/* Prominent but proportionate: a bold display headline, not a page-dominating
one. max-width is in em (scales with the headline's own font-size) rather
than ch — Syne's bold glyphs are wide enough that a ch-based budget wraps
far harder than the character count suggests. The clamp's ceiling is an
explicit, deliberately modest cap so the headline can't balloon on very
wide screens. */
.homepage-hero { padding: clamp(.6rem, 1.4vw, .95rem) 0 clamp(.55rem, 1.2vw, .8rem); border-bottom: 1px solid var(--border); }
.homepage-hero-title { max-width: 22em; margin: 0; font-family: 'Syne', sans-serif; font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--text); text-wrap: balance; }
.homepage-hero-subtitle { max-width: 42rem; margin: .5rem 0 0; color: var(--muted); font-size: clamp(.9rem, 1.3vw, .98rem); line-height: 1.4; text-wrap: pretty; }
.route-heading-content { display: flex; align-items: center; gap: 16px; }
.route-heading-logo { display: block; flex-shrink: 0; height: 76px; width: auto; }
@media (max-width: 600px) { .route-heading-logo { height: 56px; } }
@media (max-width: 640px) {
#route-heading-wrap:not(:empty) { padding-top: .7rem; }
.homepage-hero { padding-top: .5rem; }
.homepage-hero-title { max-width: 16em; font-size: clamp(1.5rem, 7vw, 1.9rem); line-height: 1.18; }
.homepage-hero-subtitle { margin-top: .45rem; font-size: .88rem; }
}
/* Every section heading block sits on the rail; --centered then centres the
title over the fixture column rather than over the date gutter. */
.section-header { margin-top: 0; margin-bottom: 24px; padding-left: var(--rail-gutter); }
/* Team-page section headings ("Next Match", "Upcoming … matches") sit above
the gutter-free, recentred .team-fixtures-rail — carrying the usual
gutter offset here would visibly misalign the two. */
/* 40px above every team-page section heading (Next Match / Upcoming /
Results) gives the hero real breathing room before fixtures start,
achieved through spacing alone — no rule/stripe between them. */
.team-section-header { padding-left: 0; margin-top: 40px; }
@media (max-width: 640px) { .team-section-header { margin-top: 28px; } }
.section-header--centered .section-title { justify-content: center; }
.section-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); display: flex; align-items: baseline; gap: 0.5rem; }
.section-title--syne { font-family: 'Syne', sans-serif; font-size: 1.05rem; }
.section-subtitle { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }
/* ── Follow hearts ────────────────────────────────────────────────────────── */
.follow-heart {
background: none; border: none; padding: 0; margin: 0;
min-width: 28px; min-height: 28px;
font-size: 14px; line-height: 1; cursor: pointer;
color: rgba(0,0,0,0.18); transition: color 0.15s, transform 0.1s;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.follow-heart:hover, .follow-heart:focus-visible { color: rgba(0,0,0,0.5); transform: scale(1.15); }
.follow-heart.followed { color: var(--accent); font-size: 16px; }
.follow-heart:focus-visible { outline: 2px solid var(--accent); border-radius: 3px; }
@keyframes heart-pulse {
0% { color: rgba(0,0,0,0.18); transform: scale(1); }
20% { color: var(--accent); transform: scale(1.6); }
55% { color: var(--accent); transform: scale(1.25); }
100% { color: rgba(0,0,0,0.18); transform: scale(1); }
}
.follow-heart.heart-pulse { animation: heart-pulse 2s ease forwards; }
/* Larger heart for team-page header */
.follow-heart--header { font-size: 20px; min-width: 34px; min-height: 34px; vertical-align: middle; }
.section-title .follow-heart--header { display: inline-flex; }
/* Heart in autocomplete search results */
.ac-follow-heart {
background: none; border: none; padding: 0 6px; margin-left: auto;
font-size: 15px; cursor: pointer; color: rgba(0,0,0,0.22);
flex-shrink: 0; line-height: 1; transition: color 0.15s, transform 0.1s;
}
.ac-follow-heart:hover { color: rgba(0,0,0,0.55); transform: scale(1.2); }
.ac-follow-heart.followed { color: var(--accent); }
/* ── Club Entity Header (Phase 10) ────────────────────────────────────────── */
/* Team-accent CSS custom properties (--team-accent / --team-accent-tint) are
set inline per page by scripts/bake-club-header.mjs, sourced from the
explicit mapping in scripts/lib/team-colors.mjs — never sampled from crest
artwork. Used only for the decorative wash/ring below; logo, nav, CTA
semantics and broadcaster pills never read these variables. */
.club-header {
border-bottom: 1px solid var(--border); padding: 1rem 1.25rem .8rem; max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box;
background: linear-gradient(180deg, var(--team-accent-tint, transparent) 0%, transparent 100%);
}
/* Canonical /team/{slug}/ hub only (scripts/bake-club-header.mjs's
isCanonicalTeamPage flag) — the legacy /watch-{slug}/ pages and the
/es//de//fr//pt/ locale club pages share this same markup and keep their
existing, unmodified club-header design. Composed as one deliberate unit
(crest + heading + copy), not a stack of independent pieces — a defined
(not just tinted) crest ring is the one accent carried over from before;
the hero→content transition is spacing-only (.team-section-header's 40px
below), so there is no team-colour rule/stripe under the hero itself. */
.club-header--canonical { padding: 32px; }
.club-header--canonical .club-header-crest-wrap { box-shadow: inset 0 0 0 1px var(--team-accent, transparent); }
.club-header--canonical .club-header-identity { align-items: center; gap: 1.25rem; margin-bottom: .85rem; }
.club-header--canonical .club-header-crest-wrap { width: 100px; height: 100px; }
.club-header--canonical .club-header-crest { width: 80px; height: 80px; }
.club-header--canonical .club-header-h1 {
font-size: clamp(1.875rem, 3.4vw + 1rem, 2.75rem); line-height: 1.08; letter-spacing: -.02em;
}
.club-header--canonical .club-header-purpose {
font-size: 1rem; color: var(--muted); max-width: 46ch;
}
.club-header--canonical .club-header-attrs { gap: .75rem; margin-top: .1rem; }
.club-header--canonical .club-header-attr-chip,
.club-header--canonical .club-header-attr-value {
background: transparent; border: 1px solid var(--border); font-weight: 400; padding: .2rem .55rem;
}
.club-header--canonical a.club-header-attr-chip:hover,
.club-header--canonical a.club-header-attr-value:hover { background: transparent; border-color: var(--accent); }
@media (max-width: 1024px) and (min-width: 641px) {
.club-header--canonical { padding: 28px; }
}
@media (max-width: 640px) {
.club-header--canonical .club-header-h1 { font-size: clamp(1.875rem, 6vw, 2.125rem); }
}
.club-breadcrumb { font-size: .72rem; color: var(--muted); margin-bottom: .65rem; }
.club-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .3rem; align-items: center; }
.club-breadcrumb li + li::before { content: '›'; color: var(--muted); margin-right: .3rem; }
.club-breadcrumb a { color: var(--accent); text-decoration: none; }
.club-breadcrumb a:hover { text-decoration: underline; }
.club-header-identity { display: flex; align-items: center; gap: 1rem; margin-bottom: .65rem; }
/* Crest ring: a refined, low-opacity halo in the team's colour — not an
oversized badge. Purely decorative; the crest itself is unchanged. */
.club-header-crest-wrap {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 68px; height: 68px; border-radius: 50%;
background: var(--team-accent-tint, transparent);
}
.club-header-crest { width: 46px; height: 46px; object-fit: contain; }
.club-header-meta { flex: 1; min-width: 0; }
.club-header-title-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.club-header-h1 { font-family: 'Syne', sans-serif; font-size: clamp(1.3rem, 4vw, 1.9rem); font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--text); line-height: 1.15; }
.club-header-purpose { font-size: .85rem; color: var(--text); margin: .3rem 0 0; line-height: 1.4; }
.club-header--canonical .club-header-purpose { margin-top: .25rem; line-height: 1.5; }
.club-header-attrs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 0; padding: 0; }
.club-header-attr { display: flex; align-items: center; }
.club-header-attr-chip { font-size: .78rem; font-weight: 500; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--chip-bg, #e8e8e8); }
.club-header-attr-chip img { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
a.club-header-attr-chip:hover { background: var(--chip-hover-bg, #d4d4d4); color: var(--accent); }
.club-header-attr-value { font-size: .82rem; font-weight: 500; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--chip-bg, #e8e8e8); }
a.club-header-attr-value:hover { background: var(--chip-hover-bg, #d4d4d4); color: var(--accent); }
.club-header-comp-logo { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; }
/* Follow control now sits inline with the H1 — part of the hero's identity
row rather than a detached control off to the side. CTA colour semantics
(green when followed) are unchanged — never themed by the team accent. */
.club-header-follow { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; background: none; border: 1px solid var(--border); border-radius: 999px; padding: .3rem .7rem; cursor: pointer; color: var(--muted); transition: border-color .15s, color .15s; line-height: 1; flex-shrink: 0; }
.club-header-follow:hover, .club-header-follow:focus-visible { border-color: var(--accent); color: var(--accent); }
.club-header-follow.followed { border-color: var(--accent); color: var(--accent); }
.club-header-follow svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; transition: fill .12s; }
.club-header-follow.followed svg { fill: currentColor; }
.club-header-follow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Suppress duplicate heading injected by SPA when baked header is present */
body.has-club-header #route-heading-wrap { display: none !important; }
@media (max-width: 480px) {
.club-header { padding: .85rem 1rem .65rem; }
.club-header-crest-wrap { width: 52px; height: 52px; }
.club-header-crest { width: 36px; height: 36px; }
.club-header-identity { gap: .65rem; }
.club-header-title-row { gap: .45rem; }
}
/* Re-asserted after the legacy 480px block above (equal specificity, later
in source wins) so the canonical hero keeps its own mobile numbers all
the way down, instead of falling back to the legacy tier under 480px. */
@media (max-width: 640px) {
.club-header--canonical { padding: 20px; }
.club-header--canonical .club-header-crest-wrap { width: 72px; height: 72px; }
.club-header--canonical .club-header-crest { width: 60px; height: 60px; }
.club-header--canonical .club-header-identity { gap: 1rem; }
}
/* ── Player pages (player-hub / player-territory / player-index) ─────────
Shares the club-header design language (breadcrumb, identity row, chip
attributes) and the homepage's .fixture-card component for the next
match — a dedicated visual language for player pages is deliberately
avoided. See scripts/bake-players.mjs. */
.player-hero { border-bottom: 1px solid var(--border); padding: 1.25rem 1.25rem 1.1rem; max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.player-hero-identity { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.player-hero-photo { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex-shrink: 0; border: 1px solid var(--border); background: var(--card); }
.player-hero-photo--crest, .player-hero-photo--initials { display: flex; align-items: center; justify-content: center; }
.player-hero-photo--crest img { width: 58%; height: 58%; object-fit: contain; }
.player-hero-photo--initials { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--accent); background: var(--accent-light); letter-spacing: -.02em; }
.player-hero-meta { flex: 1; min-width: 200px; }
.player-hero-name { font-family: 'Syne', sans-serif; font-size: clamp(1.5rem, 5vw, 2.15rem); font-weight: 700; margin: 0 0 .3rem; letter-spacing: -.01em; color: var(--text); line-height: 1.1; }
.player-hero-club { display: flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 600; margin: 0 0 .3rem; color: var(--text); }
.player-hero-club a { color: var(--accent); text-decoration: none; }
.player-hero-club a:hover { text-decoration: underline; }
.player-hero-club--none { color: var(--muted); font-weight: 500; }
.player-hero-club-crest { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.player-hero-attrs { font-size: .82rem; color: var(--muted); margin: 0 0 .2rem; }
.player-hero-dob { font-size: .78rem; color: var(--muted); margin: 0; }
.player-hero-tagline { font-size: .88rem; color: var(--text); margin: .8rem 0 0; line-height: 1.5; max-width: 62ch; }
.player-section { max-width: 760px; margin: 1.75rem auto 0; padding: 0 1.25rem; }
.player-section + .player-section { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--border); }
.player-section h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text); margin: 0 0 .8rem; }
/* Next match uses the exact same .fixture-card width/geometry as every
card in "Upcoming ... matches" below it (both build on the one shared
renderFixtureCardHtml() — see scripts/bake-players.mjs's
playerFixtureCard()). A player-page-specific max-width constraint used
to live here (pre-dating that shared renderer); it made Next match
visibly narrower than the fixtures under it and has been removed —
"Next match" hierarchy comes entirely from the above the card, not
from a differently-sized card. */
.player-next-match-link { text-align: center; font-size: .82rem; margin-top: .5rem; }
.player-next-match-link a { color: var(--accent); text-decoration: none; font-weight: 600; }
.player-next-match-link a:hover { text-decoration: underline; }
/* Player pages' "Upcoming fixtures" list — the same shared .fixture-card
component (scripts/lib/renderers/fixture-card.mjs) as the next-match
card above it and the homepage/team-page cards, not a separate compact
row design. .player-fixtures-grid only adds the section's own vertical
rhythm; card geometry itself comes entirely from .fixtures-grid/.fixture-card. */
.player-fixtures-grid { gap: .6rem; }
.fixture-watch-tbc { font-size: .76rem; color: var(--muted); font-weight: 500; }
.player-watch-note { font-size: .88rem; color: var(--text); line-height: 1.55; margin: 0 0 .6rem; }
.player-related-links { font-size: .82rem; color: var(--muted); }
.player-related-links a { color: var(--accent); text-decoration: none; }
.player-related-links a:hover { text-decoration: underline; }
.player-territory-picker-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.player-territory-picker-form select { font: inherit; font-size: .85rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.player-territory-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.player-territory-list a { display: inline-block; padding: .32rem .75rem; border-radius: 999px; background: var(--chip-bg, #e8e8e8); color: var(--text); text-decoration: none; font-size: .8rem; font-weight: 500; }
.player-territory-list a:hover { background: var(--chip-hover-bg, #d4d4d4); color: var(--accent); }
.player-about p { font-size: .88rem; line-height: 1.65; color: var(--text); margin: 0; max-width: 68ch; }
.player-empty-note { font-size: .85rem; color: var(--muted); line-height: 1.5; margin: 0; }
@media (max-width: 520px) {
.player-hero { padding: 1rem 1rem .9rem; }
.player-hero-photo { width: 72px; height: 72px; }
.player-hero-photo--initials { font-size: 1.5rem; }
.player-section { padding: 0 1rem; }
}
.cta-action-link {
display: inline-flex; align-items: center; gap: .25em; min-height: 28px;
background: none; border: none; padding: 0 .15rem; margin: 0; font: inherit;
font-size: inherit; color: #2a2722; cursor: pointer;
text-decoration: underline; text-decoration-color: rgba(42,39,34,0.3);
text-underline-offset: 2px;
}
.cta-action-link:hover { text-decoration-color: #2a2722; }
/* My matches section */
.my-matches-title { display: flex; align-items: center; gap: 0.4rem; }
/* Your teams heads its module with an accordion toggle rather than a
.section-header, so it takes the rail explicitly. Its underline then starts
on the same left edge as the fixture cards it opens. Scoped to the homepage
instance — the World Cup pages use the same toggle outside the rail. */
#wc-acc-my-matches > .wc-accordion-toggle { width: calc(100% - var(--rail-gutter)); margin-left: var(--rail-gutter); }
.my-match-date { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); padding: 0.5rem 0 0.15rem; }
.my-matches-see-more-wrap { padding: 0.75rem 0 0 var(--rail-gutter); margin-bottom: 2rem; }
.my-matches-see-more { background: none; border: none; padding: 0; font: 600 0.8rem/1 'DM Sans', sans-serif; color: var(--accent); cursor: pointer; letter-spacing: 0; }
.my-matches-see-more:hover { text-decoration: underline; }
.browse-link {
display: flex; justify-content: center; align-items: baseline;
width: 100%; box-sizing: border-box;
padding: 0 0 0 var(--rail-gutter);
margin: 0.5rem 0 1.5rem;
background: none; border: none; cursor: pointer;
font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700;
letter-spacing: -0.01em; color: var(--text); transition: color 0.15s;
text-decoration: none;
}
.browse-link:hover { color: #1a1816; }
.browse-link:hover .browse-link-arrow { transform: translateX(3px); }
.browse-link-text {
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.browse-link-arrow {
display: inline-block; color: #6b6560;
margin-left: 0.2em; transition: transform 0.18s ease;
}
.live-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
background: #fef2f2; border: 1px solid #fecaca;
color: var(--live); font-size: 0.72rem; letter-spacing: 0.12em;
text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 4px; font-weight: 500;
}
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--live); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.fixtures-grid { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; }
/* Team pages don't use the shared .date-group rail (no left-hand date
gutter — see renderWithDateDividers's teamPage option), so there's no
gutter column pulling the cards over to one side. Recentring at the same
width the gutter would have left keeps cards the existing compact size
instead of stretching to fill the freed-up space. */
.team-fixtures-rail { max-width: calc(var(--rail-container) - 2 * var(--rail-pad) - var(--rail-gutter)); margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .team-fixtures-rail { max-width: none; } }
/* Date group: left-gutter date label layout */
.date-group { display: grid; grid-template-columns: var(--rail-date-col) 1fr; gap: 0 var(--rail-date-gap); align-items: start; padding-top: 40px; }
.fixtures-grid .date-group:first-child { padding-top: 0; }
/* Button: text-block on left, arrow on right, both at top */
.date-divider {
display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end; gap: 3px;
padding: 3px 0 0; cursor: pointer; user-select: none;
background: none; border: none; width: 100%; text-align: right;
}
.date-divider::after { display: none; }
.date-label-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.date-label-day { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); line-height: 1.3; white-space: nowrap; }
.date-label-num { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0; color: #5c5651; line-height: 1; white-space: nowrap; }
.date-label-special { font-family: 'Syne', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5c5651; line-height: 1.2; white-space: nowrap; }
.date-divider-arrow { font-size: 0.5rem; color: var(--muted); transition: transform 0.2s; flex-shrink: 0; margin-top: 4px; }
.date-group.collapsed .date-divider-arrow { transform: rotate(-90deg); }
.date-group-items { display: flex; flex-direction: column; gap: 0.65rem; }
.date-group.collapsed .date-group-items { display: none; }
/* Mobile: revert to full-width stacked date header */
@media (max-width: 640px) {
/* main's padding follows --rail-pad; only the stacking changes here. */
.date-group { grid-template-columns: 1fr; padding-top: 28px; }
.date-divider {
flex-direction: row; align-items: center; gap: 0.55rem;
padding: 0; text-align: left; width: 100%; min-height: 40px;
}
.date-divider::after { display: block; content: ''; flex: 1; height: 1.5px; background: rgba(0,0,0,0.1); }
.date-label-wrap { flex-direction: row; align-items: baseline; gap: 0; }
.date-label-day { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.07em; color: var(--muted); line-height: normal; text-transform: uppercase; }
.date-label-num { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); line-height: normal; }
.date-label-day::after { content: '\00a0·\00a0'; color: var(--muted); font-weight: 400; }
.date-label-special { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
.date-divider-arrow { margin-top: 0; color: var(--muted); font-size: 0.6rem; }
}
.fixture-card {
background-color: var(--card); background-image: var(--noise); background-repeat: repeat;
border: 1px solid rgba(20,20,20,0.08); border-radius: 10px;
/* Bottom padding is 1rem (16px) — the card's visible floor beneath its
last row (broadcaster pills or the Viewing options CTA) never sits
flush against the card edge. */
padding: 0 1.1rem 1rem;
display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
align-items: start; gap: 0.4rem 0.75rem;
transition: border-color 0.15s, box-shadow 0.15s;
position: relative; overflow: hidden;
box-shadow: 0 1px 2px rgba(20,20,20,0.04);
}
.fixture-card:hover { border-color: var(--accent); box-shadow: 0 2px 6px rgba(20,20,20,0.06); }
.fixture-card.live-card { border-color: #fca5a5; }
.fixture-card.unavailable { }
/* ── Canonical /team/{slug}/ fixture rail — the fixture card itself is the
one shared .fixture-card component, unmodified: same padding, crest
size, typography and border as every other fixture surface. "Next
Match" is a section designation (the heading above the card), not a
different component — the card underneath it is byte-for-byte the same
markup/CSS as the cards in "Upcoming {team} matches" below it. Only the
grid's own gap (spacing between cards, not the card itself) is scoped
here. */
.fixtures-grid.team-fixtures-rail { gap: 14px; }
/* Each team-page card carries its own compact date (see matchCard's
options.dateLabel) in place of the shared date-rail divider — a small
secondary line above the score, never competing with the coloured
competition header above it. */
.fixture-date-compact { font-size: 0.68rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; line-height: 1.2; }
@media (max-width: 640px) {
.fixtures-grid.team-fixtures-rail { gap: 12px; }
}
/* Canonical /team/{slug}/ page only (see isCanonicalTeamPage in matchCard):
the team the page belongs to gets weight, not colour — green stays a
brand/action colour there, not a "this is the selected team" marker.
Every other team-filtered context keeps the original green highlight
(applied inline via style="color:var(--accent)"), unchanged. */
.team-name-btn.team-name-selected { font-weight: 800; }
.fixture-teams { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.fixture-teams.right { text-align: right; }
.team-with-badge { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.45rem; min-width: 0; }
.fixture-teams.right .team-with-badge { grid-template-columns: 1fr auto; }
.fixture-teams.right .team-name-btn { text-align: right; }
.team-badge {
width: 30px; height: 30px; object-fit: contain; flex-shrink: 0;
border-radius: 3px; align-self: center;
}
.team-name { font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -0.015em; }
.competition-name { font-size: 0.75rem; color: #374151; text-align: center; }
.fixture-comp-row { display: none; }
.fixture-overline {
grid-column: 1 / -1;
margin: 0 -1.1rem 0.45rem;
padding: 6px 1.1rem 7px;
background: var(--card-comp-bar, #2c3238);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: 12px;
letter-spacing: 0; text-transform: none;
color: var(--card-comp-text, rgba(255,255,255,0.92));
transition: filter 0.12s ease;
}
.fixture-overline:hover { filter: brightness(0.92); }
/* Cards inside a competition-grouped section (the group heading above
already names and badges the competition) still carry this coloured
header for visual structure and at-a-glance competition identity — it
is just left empty of the now-redundant name/logo, so it renders as a
slim accent band rather than a full text row. */
.fixture-overline--accent { padding-top: 5px; padding-bottom: 5px; }
.fixture-card.live-card .fixture-overline { background: var(--live); }
.fixture-overline-inner {
background: none; border: none; padding: 0; cursor: pointer;
font: inherit; color: inherit; text-decoration: none;
display: inline-flex; align-items: center; gap: 0.4em;
}
.fixture-overline-inner:hover { opacity: 0.88; }
.overline-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); }
/* Opt-out for the handful of COMP_LOGO assets whose real mark doesn't read
as a flat white silhouette (fine internal detail/colour-contrast rather
than a bold outline shape) — see COMP_LOGO_OVERLINE_FULL_COLOR below.
Renders the asset's actual colours instead of forcing it to white. */
.overline-logo--full-color { filter: none; }
.fixture-score {
text-align: center; min-width: 72px;
display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
justify-content: flex-start;
}
@media(max-width: 520px) {
.fixture-card { padding: 0 1rem 1rem; gap: 0.3rem 0.5rem; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.fixture-overline { margin: 0 -1rem 0.4rem; padding: 6px 1rem 7px; }
.fixture-score { min-width: 44px; max-width: 60px; }
.team-badge { width: 20px; height: 20px; }
.team-with-badge { gap: 0.3rem; }
.follow-heart { font-size: 11px; min-width: 14px; min-height: 24px; }
.follow-heart.followed { font-size: 12px; }
.team-name-btn { font-size: 0.9rem; }
}
.fixture-channels-row {
grid-column: 1 / -1;
display: flex; justify-content: center;
/* 0.4rem (6.4px) here plus the card's own 0.4rem row-gap keeps at least
12px between the teams/time row and the broadcaster/Viewing-options row. */
padding-top: 0.4rem;
}
.ticket-venue {
font-size: 0.75rem; color: #9ca3af; text-align: center;
display: block; margin-top: 0.15rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
a.ticket-venue { text-decoration: none; color: #9ca3af; }
a.ticket-venue:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.score-main { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--text); line-height: 1; }
.score-time { font-size: 1rem; color: var(--text); font-weight: 600; display: flex; align-items: center; justify-content: center; min-height: 22px; gap: 0.3rem; }
.score-time.live-text { color: var(--live); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.04em; }
a.score-time { text-decoration: none; }
a.score-time:hover { color: var(--accent); }
a.team-name-btn { text-decoration: none; }
.match-date { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 400; letter-spacing: 0.02em; }
.fixture-channels {
display: flex; align-items: center; justify-content: center;
gap: 0.25rem; flex-wrap: wrap;
}
@media (max-width: 520px) {
.fixture-channels-row {
grid-column: 1 / -1;
padding-top: 0.4rem;
}
}
.channel-tag {
font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 8px;
font-weight: 400; letter-spacing: 0; white-space: nowrap;
text-decoration: none; transition: opacity 0.15s;
background: #f0ede5; color: #2a2722; border: none;
display: inline-flex; align-items: center; gap: 0.3rem; min-height: 28px;
}
.channel-tag:hover { opacity: 0.75; }
.channel-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.free-badge {
background: #1a7f37; color: #fff;
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
padding: 0.1rem 0.35rem; border-radius: 4px;
flex-shrink: 0;
}
/* Small leading broadcaster mark inside a .channel-tag pill — server-baked
competition/player pages only (scripts/lib/renderers/fixture-card.mjs);
never rendered by this file's own client-side channelChipHtml(), so
homepage/team-page fixture pills stay text-only. */
.channel-tag-logo { display: block; width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.channel-tag-logo-well { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: #1a1a1a; flex-shrink: 0; }
.channel-tag-logo-well .channel-tag-logo { width: 13px; height: 13px; }
.channel-tbc { font-size: 0.75rem; color: var(--muted); }
.channel-note {
font-size: 0.65rem; opacity: 0.65; margin-left: 0.2em;
pointer-events: none; user-select: none;
}
/* ── Search bar — in-flow grid column, centred with auto margins ──
The search sits in the header's logo | search | controls bar, which has to
hold the wordmark and the territory picker on the page's edges, so it
cannot take the rail as its container the way the schedule modules do. It
takes the rail's measure instead: --rail-search-width is the width of a
page-centred box whose left edge is the rail's left edge, which is the same
480px this control has always been — now a consequence of the rail rather
than a number of its own. It stays centred by auto margins in the bar's
middle column, so it tracks the page's centre line, not the rail's. */
.search-wrap {
width: 100%; max-width: var(--rail-search-width); margin: 0 auto;
padding: 0; box-sizing: border-box; z-index: 2;
}
.search-inner {
display: flex; align-items: center; gap: 0.5rem;
min-width: 0; width: 100%;
background: var(--card); border: 1.5px solid var(--border);
border-radius: 10px; padding: 0.55rem 0.9rem;
transition: border-color 0.15s, box-shadow 0.15s;
}
.search-inner:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(22,163,74,0.1);
}
.search-icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.search-input {
flex: 1; border: none; outline: none; background: none;
font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: var(--text);
/* Cycle 1I, track C: the input is 18px tall inside a 37.6px bordered
container, so the real target was 18px. 24px fits that container exactly as
it is, so the control becomes compliant without moving anything. */
min-height: 24px;
}
.search-input::placeholder { color: var(--muted); }
@media (max-width: 600px) { .search-input::placeholder { color: transparent; } }
.search-clear {
background: none; border: none; cursor: pointer; color: var(--muted);
font-size: 0.8rem; padding: 0 0.5rem; border-radius: 3px;
line-height: 1; transition: color 0.15s;
min-height: 44px; display: inline-flex; align-items: center;
}
.search-clear:hover { color: var(--text); }
/* Search toggle button — icon-only on mobile, hidden on desktop */
.search-toggle-btn {
display: none;
align-items: center; justify-content: center;
background: none; border: none; cursor: pointer;
color: var(--muted); padding: 0.3rem; border-radius: 8px;
transition: color 0.15s, background 0.15s;
width: 36px; height: 36px; flex-shrink: 0;
}
.search-toggle-btn:hover { color: var(--text); background: rgba(0,0,0,0.05); }
.search-toggle-btn svg { width: 20px; height: 20px; }
/* Cancel button inside search-inner — only visible in mobile overlay */
.search-mobile-close {
display: none;
background: none; border: none; cursor: pointer;
color: var(--accent); font-family: 'DM Sans', sans-serif;
font-size: 0.875rem; font-weight: 600; white-space: nowrap;
padding: 0.25rem 0.25rem; border-radius: 6px;
transition: color 0.15s; flex-shrink: 0;
}
.search-mobile-close:hover { color: var(--text); }
/* On mobile: collapse header to single row, hide search wrap */
@media (max-width: 600px) {
header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
}
.header-left { flex-shrink: 0; }
.header-controls { flex-shrink: 0; gap: 0.5rem; }
.search-wrap { display: none; }
.search-toggle-btn { display: inline-flex; }
/* Mobile search overlay */
.search-wrap.mobile-open {
display: flex; flex-direction: column;
position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,0.45);
padding: 0.65rem 0.85rem;
align-items: stretch;
}
.search-wrap.mobile-open .search-inner {
position: relative; flex-shrink: 0;
border-radius: 10px;
}
.search-wrap.mobile-open .ac-dropdown {
position: static; left: auto; right: auto;
border-radius: 0 0 10px 10px; margin-top: -2px;
}
.search-wrap.mobile-open .search-mobile-close {
display: inline-flex; align-items: center;
}
}
.search-active-note { font-size: 0.72rem; color: var(--muted); text-align: center; margin-top: 0.5rem; }
/* Autocomplete dropdown — .search-wrap is already a positioned container (absolute),
so the dropdown positions correctly relative to it. */
.ac-dropdown {
position: absolute; top: calc(100% - 2px); left: 1.5rem; right: 1.5rem;
background: var(--card); border: 1.5px solid var(--accent);
border-top: none; border-radius: 0 0 10px 10px;
box-shadow: 0 8px 28px rgba(0,0,0,0.12); z-index: 300;
max-height: 380px; overflow-y: auto;
}
@media (max-width: 480px) { .ac-dropdown { left: 0.75rem; right: 0.75rem; } }
.ac-group-label {
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted);
padding: 0.5rem 0.9rem 0.2rem; border-top: 1px solid var(--border);
}
.ac-group-label:first-child { border-top: none; }
.ac-item {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.45rem 0.9rem; cursor: pointer;
font-size: 0.85rem; color: var(--text); transition: background 0.1s;
}
.ac-item:hover, .ac-item.ac-active { background: var(--bg); }
.ac-item-name { flex: 1; font-weight: 500; }
.ac-item-name strong { color: var(--accent); font-weight: 700; }
.ac-item-sub { font-size: 0.7rem; color: var(--muted); flex-shrink: 0; }
.ac-item-icon { font-size: 0.8rem; flex-shrink: 0; opacity: 0.6; }
.loading-state { text-align:center; padding:2rem 2rem; color:var(--muted); font-size:0.85rem; }
.loading-spinner { width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 1rem; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-state { text-align:center; padding:3rem 2rem; color:var(--muted); font-size:0.85rem; line-height:1.8; }
.error-state strong { color:var(--live); display:block; margin-bottom:0.5rem; font-size:1rem; }
.retry-btn {
margin-top: 1rem; padding: 0.6rem 1.5rem; background: var(--accent); color: #ffffff;
border: none; border-radius: 6px; font-family: 'DM Sans', sans-serif;
font-weight: 500; font-size: 0.85rem; cursor: pointer;
}
.retry-btn:hover { background: #15803d; }
.empty-state { text-align:center; padding:3rem 2rem; color:var(--muted); font-size:0.85rem; }
/* ── Match Detail Card ── */
/* ── Match detail — ticket stub card ── */
.match-breadcrumb { padding: 0.5rem 0 0.875rem; font-size: 0.875rem; }
.match-breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 500; }
.match-breadcrumb a:hover { text-decoration: underline; }
.ticket-wrap { max-width: 560px; margin: 0 auto; padding-bottom: 2rem; }
.ticket-card {
border-radius: 16px; overflow: hidden;
border-left: 4px solid var(--comp-color, #1a2332);
background: #fff;
box-shadow: 0 4px 28px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.06);
}
/* Banner — competition identity, 48px */
.ticket-banner {
background: var(--comp-color, #1a2332);
padding: 0 1.25rem;
height: 48px;
display: flex; align-items: center; gap: 0.625rem;
}
.ticket-banner-logo {
height: 26px; width: auto; flex-shrink: 0; object-fit: contain; opacity: 0.9;
}
.ticket-banner-comp {
color: #fff; font-size: 0.875rem; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Main zone — crests + hero kickoff time */
.ticket-main {
display: flex; align-items: center; justify-content: space-around;
padding: 1.375rem 1rem 1.25rem;
background: #fff;
gap: 0.5rem;
}
.ticket-team {
display: flex; flex-direction: column; align-items: stretch;
gap: 0.625rem; flex: 1; min-width: 0; text-align: center; overflow: hidden;
}
.ticket-team .ticket-crest,
.ticket-team .ticket-crest-placeholder,
.ticket-team .wc-flag-wrap { align-self: center; }
.ticket-crest { width: 56px; height: 56px; object-fit: contain; }
.ticket-crest-placeholder { width: 56px; height: 56px; border-radius: 50%; background: #f3f4f6; flex-shrink: 0; }
.wc-flag-wrap {
width: 56px; height: 37px;
border-radius: 6px; overflow: hidden; flex-shrink: 0;
border: 1px solid rgba(0,0,0,0.10);
box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
background: #f0f0f0;
display: flex; align-items: center; justify-content: center;
}
.wc-flag-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticket-name { font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: #111; overflow-wrap: anywhere; word-break: normal; hyphens: none; align-self: stretch; text-align: center; display: block; }
.ticket-name-link { font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: #111; overflow-wrap: anywhere; word-break: normal; hyphens: none; text-decoration: none; align-self: stretch; text-align: center; display: block; }
.ticket-name-link:hover, .ticket-name-link:focus { color: var(--accent); text-decoration: underline; }
.ticket-card.is-finished .ticket-name, .ticket-card.is-finished .ticket-name-link { opacity: 0.9; }
/* Centre column — hero time / score + date + meta */
.ticket-centre {
display: flex; flex-direction: column; align-items: center;
gap: 0.15rem; flex-shrink: 0; text-align: center; padding: 0 0.25rem;
}
.ticket-hero-time {
font-size: 1.625rem; font-weight: 700; line-height: 1;
color: #111; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.ticket-hero-time.is-live { color: var(--live, #dc2626); }
.ticket-hero-time.is-finished { color: #374151; }
.ticket-live-badge {
display: inline-flex; align-items: center; gap: 0.3rem;
font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
color: var(--live, #dc2626); text-transform: uppercase; margin-top: 0.05rem;
}
.ticket-live-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: currentColor; animation: pulse 1.5s infinite;
}
.ticket-hero-date { font-size: 1.0625rem; font-weight: 400; color: #6b7280; margin-top: 0.25rem; }
.ticket-hero-meta { font-size: 0.8125rem; color: #9ca3af; font-weight: 400; line-height: 1.4; max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-hero-meta.two-line { display: flex; flex-direction: column; gap: 0.1rem; align-items: center; max-width: 9rem; }
.ticket-hero-meta.two-line span { max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-countdown { font-size: 0.75rem; color: #6b7280; font-weight: 500; }
.ticket-countdown-row { text-align: center; padding: 0.35rem 1rem 0.5rem; border-top: 1px solid #f0f1f3; background: #fafbfc; }
/* ── Broadcaster pills — overrides for match detail ticket context ── */
.ticket-channels .channel-tag {
font-size: 0.8125rem; font-weight: 600; color: #1f2937;
padding: 0.4375rem 0.875rem;
border-radius: 999px;
background: #fff; border: 1.5px solid #d1d5db;
min-height: 0; gap: 0.3rem; line-height: 1;
}
.ticket-channels .channel-tag:hover { opacity: 0.8; }
.ticket-channels .free-badge {
font-size: 0.75rem; padding: 0.2rem 0.5rem;
border-radius: 5px;
}
/* Stub zone — broadcaster + actions in a row */
.ticket-stub {
background: #f5f6f8;
border-top: 2px dashed #d1d5db;
padding: 0.75rem 1.25rem;
}
/* ── Ticket unavailable states ────────────────────────────────────────── */
.ticket-no-broadcast { display:flex; flex-direction:column; gap:0.25rem; }
.ticket-no-broadcast-main { font-size:0.8125rem; color:var(--muted); }
.ticket-no-broadcast-sub { font-size:0.7rem; color:var(--muted); opacity:0.7; line-height:1.4; }
.ticket-unavailable-wrap { display:flex; flex-direction:column; gap:0.35rem; }
.ticket-unavailable-label { font-size:0.8125rem; color:var(--muted); }
.ticket-viewing-options-link { font-size:0.75rem; color:var(--accent); text-decoration:none; opacity:0.85; }
.ticket-viewing-options-link:hover { text-decoration:underline; opacity:1; }
/* ── Viewing options overlay ───────────────────────────────────────────── */
.vo-overlay {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
z-index:200; display:none; align-items:flex-end; justify-content:center;
padding:0;
}
.vo-overlay.open { display:flex; }
@media(min-width:640px){
.vo-overlay { align-items:center; padding:1rem; }
.vo-sheet { border-radius:14px !important; max-height:80vh; }
}
.vo-sheet {
background:var(--surface,#fff); border-radius:16px 16px 0 0; width:100%; max-width:520px;
max-height:88vh; max-height:88dvh; display:flex; flex-direction:column;
overflow:hidden; box-shadow:0 -4px 40px rgba(0,0,0,0.18);
}
.vo-header {
display:flex; align-items:center; justify-content:space-between;
padding:1rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0;
}
.vo-title { font-family:'Syne',sans-serif; font-weight:700; font-size:1.05rem; margin:0; }
.vo-close {
background:none; border:none; cursor:pointer; font-size:1.1rem;
color:var(--muted); padding:0.3rem 0.4rem; line-height:1; border-radius:4px;
}
.vo-close:hover { background:var(--border); }
.vo-body { overflow-y:auto; padding:1.25rem 1.25rem 1.75rem; display:flex; flex-direction:column; gap:1.1rem; }
.vo-intro { font-size:0.9375rem; margin:0; font-weight:500; }
.vo-sub { font-size:0.875rem; color:var(--muted); margin:0; line-height:1.5; }
.vo-divider { border:none; border-top:1px solid var(--border); margin:0; }
.vo-section { display:flex; flex-direction:column; gap:0.55rem; }
.vo-section-title {
font-weight:600; font-size:0.75rem; text-transform:uppercase;
letter-spacing:0.06em; color:var(--muted); margin:0;
}
.vo-region-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.45rem; }
.vo-region-row { display:flex; align-items:baseline; gap:0.5rem; font-size:0.875rem; }
.vo-flag { font-size:1em; }
.vo-region-name { font-weight:500; }
.vo-channels { color:var(--muted); font-size:0.8125rem; }
.vo-travel-explain { font-size:0.875rem; color:var(--muted); line-height:1.5; margin:0; }
.vo-travel-link { font-size:0.875rem; color:var(--accent); text-decoration:none; font-weight:500; display:inline-block; margin-top:0.2rem; }
.vo-travel-link:hover { text-decoration:underline; }
.vo-broadcaster-link { color:inherit; text-decoration:none; border-bottom:1px dotted var(--muted); }
.vo-broadcaster-link:hover { color:var(--accent); border-bottom-color:var(--accent); }
.vo-channel-sep { color:var(--muted); }
.vo-view-all-btn {
background:none; border:1px solid var(--border); border-radius:6px;
padding:0.3rem 0.65rem; font-size:0.8125rem; color:var(--muted); cursor:pointer;
margin-top:0.3rem; display:inline-block;
}
.vo-view-all-btn:hover { border-color:var(--accent); color:var(--accent); }
.ticket-region-label {
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: #9ca3af; margin-bottom: 0.5rem;
}
.ticket-stub-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ticket-channels { display: flex; flex-wrap: wrap; gap: 0.375rem; flex: 1; min-width: 0; }
.ticket-channel-chip {
display: inline-block; font-size: 0.9375rem; font-weight: 600; color: #1f2937;
background: #fff; border: 1px solid #d1d5db; border-radius: 999px;
padding: 0.625rem 1.125rem; white-space: nowrap;
}
.ticket-actions { display: flex; flex-direction: row; gap: 0.375rem; flex-shrink: 0; }
.ticket-action-btn {
width: 30px; height: 30px; border-radius: 7px;
border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #6b7280; transition: background 0.15s, border-color 0.15s, color 0.15s; padding: 0;
}
.ticket-action-btn:hover { background: #f3f4f6; border-color: #9ca3af; color: #111; }
.match-detail-back { color: var(--accent); text-decoration: none; font-size: .875rem; font-weight: 500; }
.match-detail-back:hover { text-decoration: underline; }
/* ── Ticket card — mobile scaling ── */
@media (max-width: 480px) {
.ticket-main { padding: 1rem 0.625rem; }
.ticket-hero-time { font-size: 1.25rem; }
.ticket-hero-date { font-size: 0.875rem; margin-top: 0.125rem; }
.ticket-crest { width: 44px; height: 44px; }
.ticket-crest-placeholder { width: 44px; height: 44px; }
.wc-flag-wrap { width: 44px; height: 29px; }
.ticket-name, .ticket-name-link { font-size: 0.75rem; }
.ticket-hero-meta { font-size: 0.75rem; max-width: 7.5rem; }
.ticket-hero-meta.two-line { max-width: 7.5rem; }
.ticket-hero-meta.two-line span { max-width: 7.5rem; }
}
/* ── SEO broadcaster list (baked match pages) ── */
.seo-broadcaster-list {
list-style: none;
padding: 0;
margin: .75rem 0 0;
display: flex;
flex-direction: column;
gap: .5rem;
font-size: .875rem;
}
.seo-broadcaster-list li { line-height: 1.5; }
.seo-match-crests {
display: flex;
align-items: center;
gap: 1rem;
justify-content: center;
margin: .5rem 0;
}
.seo-match-crest { width: 48px; height: 48px; object-fit: contain; }
.seo-flag-wrap {
width: 96px; height: 64px;
border-radius: 6px; overflow: hidden; flex-shrink: 0;
border: 1px solid rgba(0,0,0,0.10);
box-shadow: 0 1px 6px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
background: #f0f0f0;
}
.seo-flag-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seo-vs-text { font-weight: 700; color: var(--fg-muted, #666); }
@media (max-width: 600px) {
header { padding: 0.8rem 1rem; }
main { padding-left: 1rem; padding-right: 1rem; }
.site-footer { padding-left: 1rem; padding-right: 1rem; }
.seo-section { padding-left: 1rem; padding-right: 1rem; }
#route-heading-wrap { padding-left: 1rem; padding-right: 1rem; }
}
/* ── SEO Articles Accordion ── */
.seo-section {
background: var(--header-bg);
border-top: 2px solid var(--border);
padding: 0 2rem;
}
.seo-section-inner { max-width: 760px; margin: 0 auto; width: 100%; }
.guides-grid {
display: grid; grid-template-columns: 1fr; gap: 12px; padding-bottom: 1.5rem;
}
@media (min-width: 640px) { .guides-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (min-width: 1024px) { .guides-grid { grid-template-columns: 1fr 1fr 1fr; gap: 16px; } }
.guide-card {
position: relative; background: #fefefb; border: 1px solid var(--border);
border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
display: flex; flex-direction: column; cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden;
}
.guide-card:hover { border-color: #a09890; box-shadow: 0 2px 6px rgba(0,0,0,0.09); }
.guide-card-link {
position: absolute; inset: 0; z-index: 1; border-radius: 10px; text-decoration: none;
}
.guide-card-title {
font-family: 'Syne', sans-serif; font-size: 0.875rem; font-weight: 600;
letter-spacing: -0.01em; color: var(--text); margin: 0 0 0.3rem; line-height: 1.25;
}
.guide-card-desc {
font-size: 0.75rem; color: #5c5651; margin: 0 0 0.5rem; line-height: 1.55; flex: 1;
}
.guide-card-cta {
position: relative; z-index: 2;
font-family: 'DM Sans', sans-serif; font-size: 0.72rem; color: #2a2722;
display: inline-flex; align-items: baseline; gap: 0.2em;
}
.guide-card-cta-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.guide-card-cta-arrow { color: #6b6560; transition: transform 0.18s ease; display: inline-block; }
.guide-card:hover .guide-card-cta-arrow { transform: translateX(3px); }
.route-page-subtitle { font-size: 0.82rem; color: var(--muted); margin: 0.1rem 0 0; line-height: 1.45; }
.seo-body {
padding-bottom: 1.75rem; font-size: 0.875rem;
line-height: 1.72; color: #374151;
}
.seo-body p { margin: 0 0 0.75rem; }
.seo-body h3 {
font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.85rem;
letter-spacing: 0.01em; color: var(--text); margin: 1.25rem 0 0.5rem;
}
.seo-body h4 {
font-size: 0.78rem; font-weight: 600; color: var(--text);
margin: 1rem 0 0.35rem; letter-spacing: 0.02em;
}
.seo-body ul { padding-left: 1.25rem; margin: 0 0 0.75rem; }
.seo-body li { margin-bottom: 0.3rem; }
.faq-q { font-weight: 600; color: var(--text); margin: 1rem 0 0.2rem !important; }
.faq-a { margin: 0 0 0.5rem !important; }
.seo-links {
display: flex; flex-wrap: wrap; gap: 0.45rem;
margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.seo-links a {
font-size: 0.77rem; color: var(--accent); text-decoration: none;
background: var(--accent-light); border: 1px solid #bbf7d0;
padding: 0.22rem 0.6rem; border-radius: 4px; transition: background 0.15s;
}
.seo-links a:hover { background: #bbf7d0; }
/* ── Team Hub — persistent section outside mainContent ────────────────────
Shared by two generators: bake-lmx-hubs.mjs (Liga MX club pages, whose
content uses .team-hub-section/-heading/-list below and needs this base
rule's own top border+padding for framing) and bake-teams.mjs (English
/team/ pages, whose content is .seo-section blocks that already carry
their own top border/spacing — see .team-hub--seo-sections further down,
which suppresses the outer rule's so the two don't stack). */
.team-hub {
max-width: 760px; width: 100%; margin: 0 auto;
padding: 2rem 2rem 2rem; display: flex; flex-direction: column; gap: 2rem;
border-top: 1px solid var(--border);
}
@media (max-width: 1024px) and (min-width: 641px) { .team-hub { padding: 28px; } }
@media (max-width: 640px) { .team-hub { padding: 20px; } }
.team-hub-section {}
.team-hub-heading {
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.78rem;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
margin: 0; padding-bottom: 0.35rem;
border-bottom: 1px solid var(--border);
}
.team-hub-list { list-style: none; margin: 0; padding: 0; }
.team-hub-list li { border-bottom: 1px solid var(--border); }
.team-hub-list li a {
display: block; padding: 0.55rem 0; text-decoration: none;
color: var(--text); font-size: 0.875rem; font-weight: 500;
}
.team-hub-list li a:hover { color: var(--accent); }
/* English /team/ pages (scripts/bake-teams.mjs): content is .seo-section
blocks, which already carry their own top border/spacing, so the outer
.team-hub's is suppressed here to avoid a doubled-up divider; the flex
gap is dropped for the same reason (each section spaces itself). */
.team-hub--seo-sections { gap: 0; border-top: none; padding-top: 0; }
.team-hub--seo-sections .seo-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
/* Vertical rhythm between lower team-page modules (players → watch-by-
country → competitions → related teams) — each a genuinely different
content type, so 56px, the "clearly-different" end of the spacing scale.
.team-players-section and .seo-related-links carry no .seo-section
border/box (see §10 — content sits directly on the page canvas for
those two), so they get their own top-spacing rule here instead. */
.team-hub--seo-sections .seo-section,
.team-hub--seo-sections .team-players-section,
.team-hub--seo-sections .seo-related-links {
margin-top: 56px;
}
.team-hub--seo-sections .team-players-section:first-child,
.team-hub--seo-sections .seo-related-links:first-child {
margin-top: 0;
}
.team-hub--seo-sections .seo-section h2,
.team-hub--seo-sections .team-players-section h2,
.team-hub--seo-sections .seo-related-links h2 {
margin-bottom: 20px;
}
/* Every boxed team-hub module gets real padding on its own outer surface —
not just top spacing from the section above it — so the last row of
content (territory cards, player cards, nav rows) never sits flush
against the module's own bottom edge. Symmetric 32/28/20px. */
.team-hub--seo-sections .seo-watch-by-country,
.team-hub--seo-sections .seo-competitions-section,
.team-hub--seo-sections .team-players-section,
.team-hub--seo-sections .seo-related-links {
padding: 32px;
}
@media (max-width: 1024px) and (min-width: 641px) {
.team-hub--seo-sections .seo-section,
.team-hub--seo-sections .team-players-section,
.team-hub--seo-sections .seo-related-links { margin-top: 40px; }
.team-hub--seo-sections .seo-watch-by-country,
.team-hub--seo-sections .seo-competitions-section,
.team-hub--seo-sections .team-players-section,
.team-hub--seo-sections .seo-related-links { padding: 28px; }
}
@media (max-width: 640px) {
.team-hub--seo-sections .seo-section,
.team-hub--seo-sections .team-players-section,
.team-hub--seo-sections .seo-related-links { margin-top: 32px; }
.team-hub--seo-sections .seo-watch-by-country,
.team-hub--seo-sections .seo-competitions-section,
.team-hub--seo-sections .team-players-section,
.team-hub--seo-sections .seo-related-links { padding: 20px; }
}
/* JS elevates the hub to sit right after the fixture list closes (see
applyRoute in the script below) — same visual position as when rendered
inline, so no override is needed beyond a little breathing room above it. */
.team-hub--elevated { margin-top: 0.5rem; }
/* ── Match Discovery Hub (Phase 8) ─────────────────────────────────────── */
.match-hub { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; padding: 0 1rem; }
.match-hub-section {}
.match-hub-heading {
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.78rem;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
margin: 0 0 0; padding-bottom: 0.35rem;
border-bottom: 1px solid var(--border);
}
/* Related Pages */
.match-related { list-style: none; margin: 0; padding: 0; }
.match-related-item { border-bottom: 1px solid var(--border); }
.match-related-item a {
display: flex; align-items: center; gap: 0.55rem;
padding: 0.6rem 0; text-decoration: none; color: var(--text);
font-size: 0.875rem; font-weight: 500; min-height: 2.75rem;
}
.match-related-item a:hover { color: var(--accent); }
.match-related-logo {
width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; border-radius: 2px;
}
/* Compact fixture rows */
.match-fixture-list { list-style: none; margin: 0; padding: 0; }
.match-fixture-item { border-bottom: 1px solid var(--border); }
.match-fixture-item a {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.575rem 0; text-decoration: none; color: var(--text);
font-size: 0.85rem; min-height: 2.6rem;
}
.match-fixture-item a:hover { color: var(--accent); }
.match-fixture-date {
color: var(--muted); font-size: 0.78rem; flex-shrink: 0; min-width: 4.5rem;
font-variant-numeric: tabular-nums;
}
.match-fixture-teams { flex: 1; }
.match-fixture-cta {
display: inline-block; margin-top: 0.6rem;
font-size: 0.82rem; color: var(--accent); text-decoration: none; font-weight: 600;
}
.match-fixture-cta:hover { text-decoration: underline; }
/* Explore Competition */
.match-explore { list-style: none; margin: 0; padding: 0; }
.match-explore-item { border-bottom: 1px solid var(--border); }
.match-explore-item a {
display: flex; align-items: center;
padding: 0.6rem 0; text-decoration: none; color: var(--text);
font-size: 0.875rem; font-weight: 500; min-height: 2.6rem;
}
.match-explore-item a:hover { color: var(--accent); }
/* Stadium venue link in baked chip */
.seo-venue-chip a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); }
.seo-venue-chip a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.seo-body h2 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 1.25rem 0 0.5rem; }
.guide-affiliate-cta {
display: inline-block; background: #16a34a; color: #fff !important;
padding: 0.65rem 1.4rem; border-radius: 6px; font-weight: 600;
font-size: 0.95rem; text-decoration: none; margin: 0.75rem 0 1.25rem;
transition: background 0.15s ease;
}
.guide-affiliate-cta:hover { background: #15803d; }
.site-footer {
background: #f3f0e8; border-top: 1px solid #ded8ce;
padding: 3rem 2rem 1.5rem; color: var(--muted);
flex-shrink: 0; margin-top: auto;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
/* ── Homepage Explore section (Phase 9) ──────────────────────────────── */
#hpExplore { display: block; padding: 2.5rem 0 3rem; border-top: 1px solid #e8e3da; }
/* body.spa-subpage #hpExplore — class never set; rule removed Phase 10 */
/* Team pages (body.has-club-header — set by bake-club-header.mjs for /team/,
/watch-{slug}/ and the localised team hubs; player/competition/homepage
pages never get it) get this same sitewide Explore block too, but the
team content above it should unmistakably read as "finished" first — a
tinted, more clearly bounded zone signals "broader site exploration
starts here" without touching the block's own content, links or the
homepage's presentation of it. */
body.has-club-header #hpExplore {
background: #f5f0e6; border-top: 1px solid #e3ddd0; margin-top: .5rem; padding-top: 2.75rem;
}
/* Canonical /team/{slug}/ pages specifically (body.is-canonical-team-page,
set alongside has-club-header by bake-club-header.mjs — legacy/locale
club pages keep the smaller gap above): a full structural break before
global site discovery starts, so team content unmistakably dominates. */
body.is-canonical-team-page #hpExplore { margin-top: 72px; }
@media (max-width: 640px) { body.is-canonical-team-page #hpExplore { margin-top: 48px; } }
.hp-explore-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.hp-explore-heading {
font-family: 'Syne', sans-serif; font-size: .75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
margin: 0 0 1.75rem;
}
.hp-explore-section {
padding-bottom: 2rem; border-bottom: 1px solid #e8e3da; margin-bottom: 2rem;
}
.hp-explore-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.hp-explore-subheading {
font-family: 'Syne', sans-serif; font-size: .75rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
margin: 0 0 .6rem;
}
.hp-explore-list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2rem;
}
@media (max-width: 500px) { .hp-explore-list { grid-template-columns: 1fr; } }
.hp-explore-row {
display: flex; align-items: center; gap: .6rem;
padding: .5rem 0; border-bottom: 1px solid #f0ebe2;
text-decoration: none; color: var(--text); font-size: .9rem; min-height: 44px;
}
.hp-explore-row:hover { color: var(--accent); }
.hp-explore-crest { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.hp-explore-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.hp-explore-flag { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.hp-explore-all {
display: inline-block; margin-top: .75rem; font-size: .82rem;
color: var(--accent); text-decoration: none; font-weight: 500;
}
.hp-explore-all:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ── Homepage viewing-guide proposal ──────────────────────────────────── */
body:not(.has-homepage-guides) .homepage-guide-rail,
body:not(.has-homepage-guides) .homepage-worldwide { display: none; }
body.has-homepage-guides .homepage-composition {
display: grid;
grid-template-columns: minmax(0, var(--homepage-main-column)) minmax(300px, var(--homepage-guide-column));
grid-template-areas:
"heading heading"
"fixtures guides";
column-gap: var(--homepage-column-gap);
max-width: var(--homepage-shell);
width: 100%;
margin: 0 auto;
}
body.has-homepage-guides #route-heading-wrap { grid-area: heading; }
body.has-homepage-guides .homepage-fixtures-column { grid-area: fixtures; min-width: 0; }
body.has-homepage-guides .homepage-fixtures-column main {
max-width: var(--homepage-main-column);
margin-left: 0;
margin-right: 0;
}
body.has-homepage-guides .homepage-guide-rail {
grid-area: guides;
align-self: start;
min-width: 0;
padding: .75rem 0 1.5rem;
}
.homepage-guide-title,
.homepage-guide-section summary,
.homepage-worldwide h2 {
font-family: 'Syne', sans-serif;
font-weight: 700;
color: var(--text);
}
.homepage-guide-title {
margin: 0 0 .75rem;
font-size: .75rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.homepage-guide-section {
margin: 0 0 .75rem;
padding: .35rem 1rem .55rem;
border: 1px solid var(--border);
border-radius: 10px;
background-color: var(--card);
background-image: var(--noise);
background-repeat: repeat;
box-shadow: 0 1px 2px rgba(20,20,20,.04);
}
.homepage-guide-section summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
list-style: none;
font-size: .78rem;
line-height: 1.35;
letter-spacing: .075em;
text-transform: uppercase;
}
.homepage-guide-section summary::-webkit-details-marker { display: none; }
.homepage-guide-panel { padding-top: 0; border-top: 1px solid var(--border); }
.homepage-guide-list { list-style: none; margin: 0; padding: 0; }
.homepage-guide-list li + li { border-top: 1px solid var(--border); }
.homepage-guide-link {
display: flex;
align-items: center;
gap: .65rem;
min-height: 46px;
padding: .5rem .1rem;
color: var(--text);
text-decoration: none;
font-size: .86rem;
line-height: 1.35;
}
.homepage-guide-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
width: 28px;
height: 28px;
}
.homepage-guide-mark img { display: block; max-width: 24px; max-height: 24px; object-fit: contain; }
.homepage-guide-arrow { margin-left: auto; color: #8a8f96; }
.homepage-guide-link:hover,
.homepage-guide-link:focus-visible,
.homepage-guide-all:hover,
.homepage-guide-all:focus-visible,
.homepage-back-to-matches:hover,
.homepage-back-to-matches:focus-visible { color: var(--accent); }
.homepage-guide-link:focus-visible,
.homepage-guide-all:focus-visible,
.homepage-back-to-matches:focus-visible,
.homepage-guide-all,
.homepage-back-to-matches {
display: inline-flex;
min-height: 40px;
align-items: center;
color: var(--accent);
text-decoration: none;
font-size: .8rem;
font-weight: 500;
}
.homepage-guide-all { gap: .25rem; width: 100%; margin-top: .15rem; border-top: 1px solid var(--border); }
.homepage-back-to-matches { display: none; margin-top: .5rem; }
.homepage-guide-chevron { display: none; }
.homepage-worldwide {
border-top: 1px solid var(--border);
padding: 2.5rem var(--rail-pad) 3rem;
}
.homepage-worldwide-inner { max-width: var(--homepage-shell); margin: 0 auto; }
.homepage-worldwide .homepage-guide-section {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.homepage-worldwide .homepage-guide-section > summary { min-height: auto; }
.homepage-worldwide h2 {
margin: 0;
font-size: 1rem;
letter-spacing: -.01em;
text-transform: none;
}
.homepage-worldwide .homepage-guide-panel { padding-top: 1rem; }
.homepage-worldwide .homepage-guide-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--homepage-column-gap);
}
.homepage-worldwide .homepage-guide-link { border-bottom: 1px solid var(--border); }
@media (min-width: 1280px) {
body.has-homepage-guides #route-heading-wrap {
max-width: none;
margin: 0 0 1rem;
padding: 0;
overflow: hidden;
border: 1px solid rgba(21,128,61,.14);
border-radius: 12px;
background: linear-gradient(120deg, rgba(220,252,231,.62), rgba(250,250,247,.25) 72%);
}
body.has-homepage-guides #route-heading-wrap .homepage-hero {
max-width: var(--homepage-main-column);
padding: 1.35rem var(--rail-pad) 1.25rem;
border-bottom: 0;
}
body.has-homepage-guides .cal-module > .cal-controls,
body.has-homepage-guides .cal-module > .cal-comp-group,
body.has-homepage-guides .cal-module > .fixtures-grid { padding-left: 0; }
body.has-homepage-guides .cal-module > .cal-empty { padding-left: 1rem; }
body.has-homepage-guides .cal-module > .cal-sticky { margin-left: 0; }
body.has-homepage-guides .homepage-guide-section > summary { pointer-events: none; cursor: default; }
}
@media (max-width: 1279px) {
body.has-homepage-guides .homepage-composition { display: block; max-width: none; }
body.has-homepage-guides #route-heading-wrap { max-width: var(--rail-container); }
body.has-homepage-guides .homepage-fixtures-column main {
max-width: var(--rail-container);
margin-left: auto;
margin-right: auto;
}
body.has-homepage-guides .homepage-guide-rail,
body.has-homepage-guides .homepage-worldwide-inner {
max-width: var(--rail-container);
margin-left: auto;
margin-right: auto;
padding-left: var(--rail-pad);
padding-right: var(--rail-pad);
}
body.has-homepage-guides .homepage-guide-rail { padding-top: 2.25rem; padding-bottom: 0; }
.homepage-guide-title { margin-bottom: .5rem; }
.homepage-guide-section {
margin: 0;
padding: .45rem 0;
border: 0;
border-top: 1px solid var(--border);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.homepage-guide-section summary {
min-height: 48px;
cursor: pointer;
}
.homepage-guide-chevron {
display: block;
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform .15s ease;
}
.homepage-guide-section[open] .homepage-guide-chevron { transform: rotate(225deg); }
.homepage-guide-panel { padding: 0 0 .6rem; border-top: 0; }
.homepage-guide-list li + li { border-top: 0; }
.homepage-guide-link { min-height: 48px; border-bottom: 1px solid var(--border); }
.homepage-guide-all { width: auto; border-top: 0; }
.homepage-worldwide { border-top: 0; padding: 0 0 2.5rem; }
.homepage-worldwide .homepage-guide-section { border-top: 1px solid var(--border); padding: .45rem 0; }
.homepage-worldwide .homepage-guide-section > summary { min-height: 48px; }
.homepage-worldwide h2 { font-size: .78rem; letter-spacing: .075em; text-transform: uppercase; }
.homepage-worldwide .homepage-guide-panel { padding-top: 0; }
.homepage-worldwide .homepage-guide-list { display: block; }
.homepage-back-to-matches { display: inline-flex; }
}
.footer-cols {
display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.15fr;
gap: 2rem 3rem; margin-bottom: 2.25rem;
}
.footer-group { min-width: 0; text-align: left; }
.footer-group h2 {
color: #5c5651; font-family: 'Syne', sans-serif; font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.09em; margin: 0 0 0.75rem;
}
.footer-group nav { display: flex; flex-direction: column; }
.footer-group nav a {
display: flex; align-items: center; min-height: 34px; padding: 0.22rem 0;
color: #2a2722; text-decoration: none; font-size: 0.82rem; line-height: 1.35;
}
.footer-group nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.footer-see-all { color: #5c5651 !important; font-size: 0.76rem !important; margin-top: 0.15rem; }
.footer-bottom {
display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem;
border-top: 1px solid #d6d0c7; padding-top: 1.15rem;
}
.footer-more-nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-more-nav a {
display: inline-flex; align-items: center; min-height: 32px;
color: #5c5651; text-decoration: none; font-size: 0.76rem;
}
.footer-more-nav a:hover { color: #2a2722; text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { margin: 0; font-size: 0.72rem; line-height: 1.55; color: #5c5651; text-align: right; }
.footer-tagline { white-space: nowrap; }
#footerFreshness { white-space: nowrap; }
.footer-lang { display:none; justify-content:center; gap:0.1rem; margin-bottom:0.55rem; }
.lang-btn { background:none; border:none; padding:0.15rem 0.4rem; margin:0; cursor:pointer; font-size:0.7rem; font-family:'DM Sans',sans-serif; color:#665f58; letter-spacing:0.04em; border-radius:3px; transition:color 0.12s, background 0.12s; }
.lang-btn:hover { color:#2a2722; background:#ede9e0; }
.lang-btn.lang-active { color:#fff; background:#2a2722; }
@media (max-width: 900px) {
.footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.footer-bottom { flex-direction: column; }
.footer-copy { text-align: left; }
}
@media (max-width: 520px) {
.site-footer { padding: 2.5rem 1.25rem 1.25rem; }
.footer-cols { grid-template-columns: 1fr; gap: 1.65rem; margin-bottom: 2rem; }
.footer-group nav a { min-height: 44px; padding: 0.35rem 0; font-size: 0.88rem; }
.footer-more-nav { gap: 0 1rem; }
.footer-more-nav a { min-height: 44px; }
.footer-tagline, #footerFreshness { white-space: normal; }
}
/* Static pages (About / Contact / Privacy) */
#staticPage {
display: none; width: 100%; max-width: 680px; margin: 2rem auto 3rem; padding: 0 1.5rem; box-sizing: border-box;
font-size: 0.9rem; line-height: 1.7; color: var(--text);
}
#staticPage h1 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.8rem; letter-spacing: -0.01em; color: var(--accent); margin-bottom: 0.5rem; }
#staticPage h2 { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 0.35rem; }
#staticPage p { margin: 0 0 0.75rem; }
#staticPage a { color: var(--accent); }
.static-back { display: inline-block; margin-bottom: 1.25rem; font-size: 0.8rem; color: var(--accent); text-decoration: none; cursor: pointer; }
.static-back:hover { text-decoration: underline; }
body.match-page .chips-bar { display: none !important; }
.guides-teaser-section { padding: 1.5rem 1rem 2rem; }
.guides-teaser-heading {
font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.78rem;
letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
margin: 0 0 1rem;
}
body[data-page="guide"] #mainContent { display: none !important; }
body[data-page="guide"] #staticPage { display: block !important; }
body[data-page="guide"] #route-heading-wrap { display: none; }
@media (max-width: 600px) {
.seo-section { padding: 0 1rem; }
}
/* ── Competition name button ─────────────────────────────────────────────── */
.competition-name-btn {
background: none; border: none; padding: 0; margin: 0;
font: inherit; font-size: 0.75rem; color: #374151;
cursor: pointer; text-align: center;
text-decoration: underline dotted; text-underline-offset: 2px;
transition: color 0.15s;
}
.competition-name-btn:hover { color: var(--accent); }
/* ── Standings modal ─────────────────────────────────────────────────────── */
.standings-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
z-index: 200; display: none; align-items: center; justify-content: center;
padding: max(env(safe-area-inset-top, 0px) + 0.75rem, 1rem)
max(env(safe-area-inset-right, 0px) + 0.75rem, 1rem)
max(env(safe-area-inset-bottom, 0px) + 0.75rem, 1rem)
max(env(safe-area-inset-left, 0px) + 0.75rem, 1rem);
}
.standings-overlay.open { display: flex; }
.standings-modal {
background: #fff; border-radius: 14px; width: 100%; max-width: 660px;
max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
overflow: hidden;
}
.standings-header {
display: flex; align-items: center; gap: 0.75rem;
padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.standings-comp-crest { width: 36px; height: 36px; object-fit: contain; }
.standings-comp-name {
font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.2rem;
letter-spacing: -0.01em; color: var(--text); flex: 1;
}
.standings-matchday { font-size: 0.7rem; color: var(--muted); margin-left: auto; }
.standings-close {
background: none; border: none; cursor: pointer; font-size: 1.1rem;
color: var(--muted); padding: 0.25rem 0.5rem; border-radius: 4px;
transition: background 0.15s;
}
.standings-close:hover { background: var(--border); color: var(--text); }
.standings-body { overflow-y: auto; flex: 1; padding: 0; }
/* Group header for multi-group cups */
.standings-group-label {
font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--muted);
padding: 0.6rem 1.25rem 0.3rem; background: #f9fafb;
border-bottom: 1px solid var(--border);
}
/* Table */
.standings-table {
width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
.standings-table thead th {
padding: 0.45rem 0.6rem; font-size: 0.6rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
text-align: center; border-bottom: 1px solid var(--border);
position: sticky; top: 0; background: #fff; z-index: 1;
}
.standings-table thead th.th-team { text-align: left; padding-left: 1.25rem; }
.standings-table tbody tr { border-bottom: 1px solid #f1f5f9; }
.standings-table tbody tr:last-child { border-bottom: none; }
.standings-table tbody tr:hover { background: #f9fafb; }
.standings-table td { padding: 0.45rem 0.6rem; text-align: center; color: var(--text); }
.standings-table td.td-team {
text-align: left; padding-left: 0;
display: flex; align-items: center; gap: 0.5rem;
}
.standings-table td.td-pos { font-weight: 600; color: var(--muted); width: 28px; padding-left: 0; }
.standings-table td.td-pts { font-weight: 700; color: var(--text); }
.standings-table td.td-gd { color: var(--muted); }
/* Position indicator bar */
.pos-bar {
width: 3px; height: 22px; border-radius: 2px; flex-shrink: 0; margin-left: 1rem;
background: transparent;
}
.pos-cl { background: #16a34a; } /* Champions League */
.pos-el { background: #f97316; } /* Europa League */
.pos-ecl { background: #0ea5e9; } /* Conference League */
.pos-rel { background: #ef4444; } /* Relegation */
.pos-pro { background: #16a34a; } /* Promotion */
.pos-playoff { background: #f97316; } /* Playoff */
.team-row-badge { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.standings-loading { text-align: center; padding: 3rem; color: var(--muted); font-size: 0.85rem; }
.standings-loading .loading-spinner { margin: 0 auto 0.75rem; }
.standings-error { text-align: center; padding: 2rem; color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
/* ── Tab switcher (CUP modal) ─────────────────────────────────────────────── */
.standings-tabs {
display: flex; border-bottom: 1px solid var(--border);
flex-shrink: 0; background: #fff;
}
.standings-tab {
flex: 1; padding: 0.65rem 1rem; font-size: 0.78rem; font-weight: 600;
background: none; border: none; cursor: pointer; color: var(--muted);
border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s; letter-spacing: 0.01em;
}
.standings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.standings-tab:hover:not(.active) { color: var(--text); }
/* ── Knockout bracket ─────────────────────────────────────────────────────── */
.bracket-stage { padding: 1rem 1.25rem 0.5rem; }
.bracket-stage-label {
font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
color: var(--text); margin-bottom: 0.75rem;
}
.bracket-ties { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 540px) { .bracket-ties { grid-template-columns: 1fr; } }
.tie-card {
border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
font-size: 0.75rem;
}
.tie-teams {
padding: 0.5rem 0.65rem; background: #f9fafb; gap: 0.3rem;
}
.tie-team {
display: flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--text);
min-width: 0; overflow: hidden;
}
.tie-team.right { flex-direction: row-reverse; text-align: right; }
.tie-team-badge { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.tie-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; }
.tie-vs { font-size: 0.65rem; color: var(--muted); flex-shrink: 0; font-weight: 400; }
.tie-legs { padding: 0 0.65rem 0.4rem; }
.tie-leg {
padding: 0.3rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.68rem;
color: var(--muted); gap: 0.4rem;
}
.tie-leg:last-child { border-bottom: none; }
.tie-leg-label { font-size: 0.6rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.tie-leg-date { flex: 1; }
.tie-leg-score {
font-weight: 700; color: var(--text); font-size: 0.72rem;
min-width: 36px; text-align: center;
}
.tie-leg-score.tbd { color: var(--muted); font-weight: 400; }
.tie-leg.live-leg .tie-leg-score { color: var(--live); }
.tie-agg {
display: flex; justify-content: center; padding: 0.3rem;
font-size: 0.65rem; color: var(--muted); border-top: 1px solid #f1f5f9;
font-weight: 500;
}
.tie-agg-score { color: var(--text); font-weight: 700; margin: 0 0.25rem; }
.bracket-no-data { padding: 1.5rem 1.25rem; color: var(--muted); font-size: 0.82rem; text-align: center; }
@media (max-width: 520px) {
.standings-modal { max-height: 95vh; max-height: 95dvh; border-radius: 10px; }
.standings-table { font-size: 0.72rem; }
.standings-table td, .standings-table thead th { padding: 0.4rem 0.3rem; }
.td-gd, .td-w, .td-d, .td-l { display: none; }
}
/* ── World Cup Groups View ──────────────────────────────────────────────── */
.wc-groups-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 0 0 32px var(--rail-gutter);
}
.wc-group-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,0.09);
overflow: hidden;
}
.wc-group-title {
color: var(--accent);
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.01em;
padding: 7px 14px;
border-left: 3px solid var(--accent);
border-bottom: 1px solid #f0f0f0;
}
.wc-group-table { width: 100%; border-collapse: collapse; font-size: .77rem; }
.wc-group-table thead th {
color: #999; font-weight: 600; text-align: right;
padding: 5px 4px 3px; border-bottom: 1px solid #f0f0f0;
}
.wc-group-table thead th:nth-child(2) { text-align: left; padding-left: 6px; }
.wc-group-table tbody tr { border-top: 1px solid #f5f5f5; }
.wc-group-table tbody tr.qualifies {
border-left: 3px solid var(--accent);
background: #f2faf4;
}
.wc-group-table td { padding: 5px 4px; text-align: right; color: #333; }
.wc-group-table td:nth-child(1) { color: #bbb; font-size: .7rem; width: 16px; padding-left: 8px; }
.wc-group-table td:nth-child(2) { text-align: left; color: #111; font-weight: 500; padding-left: 6px; padding-right: 6px; }
.wc-team-link { color: inherit; text-decoration: none; }
.wc-team-link:hover { text-decoration: underline; color: var(--accent); }
.wc-group-fixtures { border-top: 1px solid #f0f0f0; padding: 9px 12px 12px; }
.wc-fixture-row {
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
font-size: .76rem; padding: 4px 0;
}
.wc-fixture-row + .wc-fixture-row { border-top: 1px dashed #f0f0f0; }
.wc-fixture-teams { flex: 1 0 auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: #111; }
.wc-fixture-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
@media (max-width: 600px) {
.wc-fixture-meta { flex-basis: 100%; }
}
.wc-fixture-time { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.wc-group-pending { padding: 8px 14px 10px; font-size: .76rem; color: var(--muted); }
.wc-accordion { padding: 0 0 8px; }
.wc-accordion .fixtures-grid { margin-bottom: 0; }
.wc-accordion-toggle {
width: 100%; background: none; border: none; border-bottom: 2px solid #e5e7eb;
padding: 14px 0 10px; cursor: pointer;
font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700;
letter-spacing: -0.01em; color: #111; text-align: left; text-transform: none;
}
.wc-accordion-toggle:hover { color: var(--accent); border-bottom-color: var(--accent); }
.wc-accordion-arrow { font-size: .65rem; transition: transform .2s; }
.wc-accordion-section.collapsed .wc-accordion-arrow { transform: rotate(-90deg); }
.wc-accordion-body { }
.wc-accordion-section.collapsed .wc-accordion-body { display: none; }
.wc-accordion-section + .wc-accordion-section { margin-top: 24px; }
.wc-accordion-note { font-size: .78rem; color: #888; font-family: sans-serif; letter-spacing: 0; }
.wc-browse-btn-wrap { text-align: center; padding: 12px 0 4px; }
.wc-group-table tbody tr.featured {
background: #fffbe6; border-left: 3px solid #f59e0b;
}
/* WC Nation page */
.wc-nation-header {
display: flex; align-items: center; gap: 16px;
max-width: 680px; margin: 0 auto 20px; padding: 0 12px;
}
.wc-nation-flag-img { width: 80px; height: 54px; object-fit: cover; border-radius: 5px; box-shadow: 0 1px 6px rgba(0,0,0,0.18); flex-shrink: 0; }
.flag-img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; vertical-align: middle; flex-shrink: 0; margin-right: 4px; }
.wc-nation-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; color: #111; }
.wc-nation-subtitle { font-size: .78rem; color: #777; margin-top: 2px; }
.wc-fixtures-section { border-top: 1px solid #f0f0f0; padding: 6px 0 4px; }
.wc-fixtures-label { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #aaa; padding: 6px 14px 2px; }
.wc-route-box {
background: #f8fafb; border-radius: 10px; border: 1px solid #eef;
padding: 16px 20px; margin: 14px auto 0; max-width: 680px; margin-left: 0; margin-right: 0;
}
.wc-route-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0; color: var(--accent); margin-bottom: 8px; }
.wc-route-body p { font-size: .82rem; color: #444; margin: 0 0 7px; line-height: 1.5; }
.wc-route-body p:last-child { margin-bottom: 0; }
.wc-nation-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.wc-nation-link { display: inline-block; padding: 6px 14px; background: #f3f4f6; border-radius: 20px; font-size: .78rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.wc-nation-link:hover { background: #e6f4ec; }
.cal-subscribe-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cal-subscribe-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 20px; font-size: .8rem; font-weight: 600; color: #1b5e20; text-decoration: none; transition: background .15s; white-space: nowrap; }
.cal-subscribe-btn:hover { background: #c8e6c9; }
.cal-copy-btn { padding: 6px 12px; background: none; border: 1px solid #ddd; border-radius: 20px; font-size: .75rem; color: #666; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.cal-copy-btn:hover { background: #f3f4f6; color: #111; }
/* Free-to-air / on-tv — neutral dark selected state */
.filter-opt.fta-active { background: #2a2722; color: #fff; }
.filter-opt.on-tv-active { background: #2a2722; color: #fff; }
/* My Channels section — no special background */
.channels-callout-section { }
.channels-callout-label { font-weight: 700; font-size: .72rem; color: var(--text); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .15rem; }
/* Show more competitions toggle */
.more-comps-btn { display: flex; align-items: center; width: 100%; background: none; border: 1px dashed var(--border); border-radius: 6px; padding: .45rem .75rem; font-size: .8rem; color: var(--muted); cursor: pointer; text-align: left; margin: .25rem 0; transition: color .15s, border-color .15s; min-height: 44px; }
.more-comps-btn:hover { color: var(--text); border-color: #aaa49c; }
/* Channels state row + clear button */
.channels-state-row { margin-bottom: .55rem; gap: .5rem; }
.channels-state-text { font-size: .72rem; color: var(--muted); font-style: italic; flex: 1; }
.channels-clear-btn { background: none; border: 1px solid var(--border); border-radius: 5px; font-size: .72rem; color: var(--muted); cursor: pointer; padding: 0 .55rem; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.channels-clear-btn:hover { border-color: #aaa49c; color: var(--text); }
/* First-visit My Channels CTA banner */
.channels-cta-bar { display: flex; align-items: center; gap: .5rem; background: #f5f3ec; border: 1px solid var(--border); border-radius: 8px; padding: .7rem .85rem; margin: .5rem 0 0; }
.channels-cta-text { flex: 1; min-width: 0; }
.channels-cta-title { display: block; font-size: .82rem; font-weight: 600; color: #2a2722; line-height: 1.3; }
.channels-cta-sub { display: block; font-size: .75rem; font-weight: 400; color: #5c5651; line-height: 1.3; margin-top: .15rem; }
.channels-cta-dismiss { flex-shrink: 0; background: none; border: none; font-size: .85rem; color: var(--muted); cursor: pointer; padding: 0 .5rem; line-height: 1; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* How to watch abroad affiliate box */
.watch-abroad-box { border: 1px solid var(--border); border-radius: 8px; background: #f9fafb; padding: .85rem 1rem; margin: 1.2rem 0; }
.watch-abroad-box p { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.6; }
.watch-abroad-box .watch-abroad-title { font-weight: 600; color: var(--text); font-size: .88rem; margin-bottom: .3rem; }
/* Pre-rendered baked fixture section — visible on first paint for early LCP;
JS replaces it with the live interactive version once matches load. */
.seo-baked-h1 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--text); margin-bottom: .4rem; }
.seo-baked-intro { font-size: .9rem; color: var(--muted); margin-bottom: 1.2rem; line-height: 1.6; }
.seo-broadcaster-intro { font-size:.87rem; color:var(--muted); line-height:1.65; margin-bottom:1.1rem; padding:.7rem .9rem; background:#f9fafb; border-left:3px solid #bbf7d0; border-radius:0 6px 6px 0; }
.seo-team-links { margin-top:2rem; padding-top:1.2rem; border-top:1px solid #e5e7eb; }
.seo-team-links h3 { font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.7rem; }
.seo-off-season-broadcaster-list { list-style:none; padding:0; margin:.25rem 0 1.5rem; }
.seo-team-link-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.seo-team-link-list li a { display:inline-block; padding:.28rem .65rem; border:1px solid #e5e7eb; border-radius:20px; font-size:.8rem; color:var(--text); text-decoration:none; transition:border-color .15s,color .15s; }
.seo-team-link-list li a:hover { border-color:#16a34a; color:#16a34a; }
/* Team hub upgrade — rich content sections */
.seo-team-intro { font-size:.88rem; color:var(--muted); line-height:1.65; margin-bottom:1.1rem; }
.seo-section { margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid #e5e7eb; }
.seo-section h2 { font-size:.92rem; font-weight:700; color:var(--text); margin:0 0 .6rem; text-transform:uppercase; letter-spacing:.05em; }
.seo-where-to-watch .seo-broadcaster-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.seo-broadcaster-table th { text-align:left; font-weight:600; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; padding:.3rem .5rem .3rem 0; border-bottom:1px solid #e5e7eb; }
.seo-broadcaster-table td { padding:.35rem .5rem .35rem 0; border-bottom:1px solid #f3f4f6; vertical-align:top; }
.seo-broadcaster-table td.wtw-terr { color:var(--text); font-size:.83rem; min-width:8rem; }
.seo-broadcaster-table td.wtw-bc { color:var(--muted); }
.seo-broadcaster-table a { color:var(--accent,#16a34a); text-decoration:none; }
.seo-broadcaster-table a:hover { text-decoration:underline; }
.seo-competition-section p { font-size:.88rem; color:var(--muted); margin:0; }
.seo-competition-section a { color:var(--accent,#16a34a); }
.seo-watch-by-country p { font-size:.85rem; color:var(--muted); margin:0; line-height:1.6; }
.seo-watch-by-country a { color:var(--accent,#16a34a); text-decoration:none; }
.seo-watch-by-country a:hover { text-decoration:underline; }
.seo-stadium-section p { font-size:.85rem; color:var(--muted); margin:0; }
.seo-related-links h2 { font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.7rem; }
.seo-nav-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.seo-nav-list li a { display:inline-block; padding:.28rem .65rem; border:1px solid #e5e7eb; border-radius:20px; font-size:.8rem; color:var(--text); text-decoration:none; transition:border-color .15s,color .15s; }
.seo-nav-list li a:hover { border-color:#16a34a; color:#16a34a; }
/* Competitions module (scripts/bake-teams.mjs's renderCompetitionsModule) —
compact rows, not the site's generic pill/chip treatment: this is one or
two supporting links, not a feature worth the same visual weight as a
fixture card. */
.cm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-item a {
display: inline-flex; align-items: center; gap: .55rem;
color: var(--text); font-size: .9rem; font-weight: 500; text-decoration: none;
padding: 4px 0; transition: color .15s;
}
.cm-item a:hover { color: var(--accent); }
.cm-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
/* "More {league} teams" (renderRelatedLinks) — deliberately secondary: a
dot-separated line of plain text links rather than the pill grid every
other module on the page uses, so it reads as navigation, not a feature
competing with fixtures/players for attention. */
.rtl-teams { font-size: .88rem; line-height: 1.7; color: var(--text); margin: 0; }
.rtl-teams a { color: var(--text); text-decoration: none; font-weight: 500; }
.rtl-teams a:hover { color: var(--accent); text-decoration: underline; }
.rtl-dot { color: var(--muted); }
.rtl-all { margin: .6rem 0 0; }
.rtl-all a { font-size: .85rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.rtl-all a:hover { text-decoration: underline; }
/* Club article accordion — hide native browser disclosure triangle,
size the custom SVG chevron, and rotate it when open. */
details.seo-article { padding: 0 2rem; max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { details.seo-article { padding: 0 1rem; } }
details.seo-article > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: .6rem 0; gap: .5rem; }
details.seo-article > summary::-webkit-details-marker { display: none; }
details.seo-article > summary::marker { display: none; }
.seo-chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s ease; }
details.seo-article[open] > summary .seo-chevron { transform: rotate(180deg); }
.seo-article-title { font-weight: 600; font-size: .92rem; color: var(--text); }
.seo-date-group { margin-bottom: 1.5rem; }
.seo-date-group h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 8px; }
.seo-match-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .9rem; line-height: 1.5; }
.seo-match-item strong { color: var(--text); }
.seo-match-item small { color: var(--muted); }
/* ── Canonical /team/{slug}/ baked fixtures (scripts/bake-teams.mjs) ──────────
"Next Match"/"Upcoming {team} matches" render the one shared
.fixture-card component (via renderFixtureCardHtml() in
scripts/lib/renderers/fixture-card.mjs) inside a .fixtures-grid.team-
fixtures-rail, same as every other fixture surface — only the section
wrapper's own vertical rhythm is scoped here, never the card itself. */
.team-next-match-section { margin-top: 40px; padding-top: 0; border-top: none; }
@media (max-width: 640px) { .team-next-match-section { margin-top: 28px; } }
.team-upcoming-section { margin-top: 1.5rem; }
/* ── "{Team} players" discovery module (scripts/bake-players.mjs) ─────────
Curated player cards, not a squad-list dump — capped at 6. Fixed-width
flex cards (not a stretched grid) so two players sit naturally at the
left instead of stretching to fill the row or floating in an empty box. */
.team-player-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.team-player-grid li { list-style: none; margin: 0; padding: 0; }
.team-player-card {
display: flex; flex-direction: column; align-items: center; text-align: center;
width: 168px; padding: 16px 14px 14px; gap: .65rem;
border: 1px solid rgba(20,20,20,.08); border-radius: 10px; background: var(--card);
text-decoration: none; transition: border-color .15s;
}
.team-player-card:hover, .team-player-card:focus-visible { border-color: var(--accent); }
.team-player-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpc-photo {
width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; background: #f0ede5;
}
.tpc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.tpc-photo--initials { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--accent); background: #eafaf0; }
.tpc-name { font-size: .95rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.tpc-pos { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 1024px) and (min-width: 641px) {
.team-player-card { width: 145px; }
.tpc-photo { width: 84px; height: 84px; }
}
@media (max-width: 640px) {
.team-player-grid { gap: 12px; }
/* Two per row regardless of exact viewport width, per spec, rather than
a fixed px card width that may or may not fit. */
.team-player-card { width: auto; flex: 0 1 calc(50% - 6px); padding: 14px 10px 12px; }
.tpc-photo { width: 76px; height: 76px; }
}
/* ── "Watch {team} around the world" (Sections D+F merged, bake-teams.mjs) ─
One compact chip grid — territory + (where known) its broadcaster — in
place of the old plain link sentence plus a separate table. `.wtw-row`
carrying `.is-active-territory` (added client-side — see
syncTeamHeroTerritory in the app script below) gets a thin accent rule,
never a filled background, so it reads as "you are here" rather than a
button. */
.wtw-grid {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px;
}
.wtw-row {
display: flex; flex-direction: column; gap: .2rem;
padding: 12px 16px; border: 1px solid rgba(20,20,20,.08); border-radius: 8px;
font-size: .85rem; line-height: 1.4;
}
/* "You are here" — a filled tint plus the accent border, not just the
border alone, so the current territory reads clearly at a glance
against a two-column grid of otherwise-identical rows. */
.wtw-row.is-active-territory {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.wtw-country a { color: var(--text); font-weight: 600; text-decoration: none; }
.wtw-country a:hover { color: var(--accent); text-decoration: underline; }
.wtw-country span { color: var(--text); font-weight: 600; }
.wtw-bc { color: var(--muted); font-size: .78rem; }
.wtw-bc a { color: var(--muted); text-decoration: none; }
.wtw-bc a:hover { color: var(--accent); text-decoration: underline; }
/* Keep the compact prototype typography while giving both links a real touch target. */
.wtw-country a, .wtw-bc a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 640px) {
.wtw-grid { grid-template-columns: 1fr; gap: 10px; }
}
/* Hide CTA bar before JS loads for users who already dismissed it */
html.cta-dismissed #channelsCtaBar { display: none; }
.seo-affiliate-note { font-size: .75rem; color: var(--muted); margin-top: 1rem; }
/* ── Team × Territory (TT) pages ─────────────────────────────────────────── */
.tt-fixture-note { font-size:.78rem; color:var(--muted); margin:.2rem 0 .7rem; }
.tt-fixture-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tt-fixture-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.tt-fixture-table th { text-align:left; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:.35rem .5rem .35rem 0; border-bottom:2px solid var(--border); white-space:nowrap; }
.tt-fixture-table td { padding:1rem .75rem 1rem 0; border-bottom:1px solid #edf1ed; vertical-align:middle; }
.tt-fixture-table tr:last-child td { border-bottom:none; }
.tt-fixture-table td.tt-fixture-match { font-weight:500; }
.tt-fixture-table td.tt-fixture-channel { color:var(--text); font-weight:500; }
.tt-fixture-table td.tt-fixture-date { white-space:nowrap; color:var(--muted); }
.tt-fixture-table td.tt-fixture-time { white-space:nowrap; color:var(--muted); }
.tt-fixture-table td.tt-col-rights { white-space:nowrap; }
.tt-match-link { color:var(--accent); text-decoration:none; }
.tt-match-link:hover { text-decoration:underline; }
.tt-match-name { color:var(--text); }
.tt-tz-label { font-size:.75rem; color:var(--muted); }
.tt-empty-state { font-size:.88rem; color:var(--muted); }
/* Competition coverage section */
.tt-comp-coverage { margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid #e5e7eb; }
.tt-comp-header { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.tt-comp-logo { width:28px; height:28px; object-fit:contain; flex-shrink:0; }
.tt-comp-header h2 { font-size:.92rem; font-weight:700; color:var(--text); margin:0; text-transform:uppercase; letter-spacing:.05em; }
/* Broadcaster cards */
.tt-broadcaster-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.tt-broadcaster-card { border:1px solid #e5e7eb; border-radius:8px; padding:.75rem 1rem; }
.tt-broadcaster-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.25rem; }
.tt-broadcaster-name { font-weight:600; font-size:.9rem; color:var(--accent); text-decoration:none; }
.tt-broadcaster-name:hover { text-decoration:underline; }
.tt-broadcaster-desc { font-size:.82rem; color:var(--muted); margin:.2rem 0 0; line-height:1.55; }
.tt-broadcaster-note { font-size:.78rem; color:var(--muted); margin:.2rem 0 0; font-style:italic; }
.tt-unmapped-note { font-size:.8rem; color:var(--muted); margin-top:.6rem; }
/* Service type badge */
.tt-service-type { display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:.1rem .45rem; border-radius:4px; }
.tt-service-streaming { background:#eff6ff; color:#1d4ed8; }
.tt-service-tv { background:#faf5ff; color:#7e22ce; }
.tt-service-tv-streaming { background:#f0fdf4; color:#15803d; }
/* Rights explanation */
.tt-rights-note { font-size:.8rem; color:var(--muted); margin-top:1rem; line-height:1.55; padding:.6rem .8rem; background:#f9fafb; border-left:3px solid #e5e7eb; border-radius:0 4px 4px 0; }
/* Mobile: hide rights column, keep essentials */
@media (max-width:600px) {
.tt-fixture-table th:last-child, .tt-fixture-table td:last-child { display:none; }
.tt-fixture-table td.tt-fixture-time { display:none; }
.tt-fixture-table { font-size:.82rem; }
.tt-broadcaster-card { padding:.6rem .8rem; }
}
/* Premium Team × Territory layout; fixture broadcaster answers remain renderer data. */
main:has(.tt-page) { max-width:none; }.tt-page { max-width:1240px; margin:36px auto 72px; padding:0 32px; color:#111512; }.tt-page h1,.tt-page h2 { font-family:'Syne',sans-serif; letter-spacing:-.025em; }.tt-page a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }.tt-kicker { margin:0 0 .5rem; color:var(--muted); font-size:.71rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; }.tt-breadcrumb { display:flex; gap:.5rem; margin:0 0 22px; font-size:.82rem; color:var(--muted); }.tt-breadcrumb a { color:var(--muted); text-decoration:none; }.tt-hero,.tt-next-match,.tt-coverage,.tt-services,.tt-related,.tt-rail section { border:1px solid #e2e7e2; border-radius:18px; background:#fff; padding:28px; }.tt-hero { display:flex; gap:24px; align-items:center; background:linear-gradient(135deg,#fff 0%,#f7fbf7 100%); }.tt-crest-holder { width:96px; height:96px; display:grid; place-items:center; border:1px solid #dce8dd; border-radius:18px; background:#fff; flex:none; }.tt-hero-crest { width:80px; height:80px; object-fit:contain; }.tt-hero-copy { min-width:0; flex:1; }.tt-hero-copy h1 { margin:5px 0 9px; font-size:2.7rem; line-height:1.05; }.tt-intro,.tt-hero-copy small { color:var(--muted); line-height:1.55; }.tt-intro { max-width:70ch; }.tt-territory-label { align-self:flex-start; color:var(--muted); white-space:nowrap; }.tt-next-match { margin:24px 0 32px; padding:28px; box-shadow:0 10px 30px rgba(24,57,29,.06); }.tt-next-fixture-grid,.tt-fixture-grid { margin:0; gap:14px; min-width:0; }.tt-layout { display:grid; grid-template-columns:minmax(0,2fr) 340px; gap:32px; align-items:start; }.tt-main,.tt-fixtures { min-width:0; }.tt-main>section { margin-bottom:32px; }.tt-fixtures { padding:0 4px; }.tt-fixtures h2 { font-size:1.65rem; margin-bottom:.25rem; }.tt-coverage-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:16px; align-items:center; }.tt-services>div,.tt-related ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; list-style:none; padding:0; margin:0; }.tt-service-card,.tt-related li a { display:flex; flex-direction:column; gap:6px; border:1px solid #e2e7e2; border-radius:14px; padding:16px; color:var(--text); text-decoration:none; }.tt-service-card span { color:var(--muted); font-size:.78rem; }.tt-service-card em { color:var(--accent); font-style:normal; font-size:.77rem; }.tt-rail { position:sticky; top:100px; }.tt-rail section { padding:24px; }.tt-rail h2 { font-size:1.35rem; }.tt-rail-services { list-style:none; padding:0; }.tt-rail-services a { display:flex; justify-content:space-between; gap:12px; color:var(--text); text-decoration:none; padding:14px 0; border-bottom:1px solid #edf0ed; }
@media (max-width:1199px) { .tt-page { padding:0 24px; }.tt-layout { grid-template-columns:minmax(0,1fr) 320px; gap:28px; } }
@media (max-width:899px) { .tt-layout { grid-template-columns:1fr; }.tt-rail { position:static; }.tt-rail section { max-width:none; } }
.tt-row-crest { width:24px; height:24px; object-fit:contain; vertical-align:middle; margin-right:6px; }
.tt-next-crest { width:64px; height:64px; object-fit:contain; }
@media (max-width:699px) { .tt-page { padding:0 16px; margin:24px auto 48px; }.tt-hero,.tt-next-match,.tt-coverage,.tt-services,.tt-related,.tt-rail section { padding:20px; }.tt-hero { display:block; }.tt-crest-holder { width:76px; height:76px; margin-bottom:16px; }.tt-hero-crest { width:62px; height:62px; }.tt-hero-copy h1 { font-size:1.9rem; }.tt-territory-label { display:block; margin-top:16px; }.tt-services>div,.tt-related ul { grid-template-columns:1fr; }.tt-coverage-row { grid-template-columns:28px 1fr; }.tt-coverage-row>a { grid-column:2; } }
/* ── Match page: broadcast table ── */
.seo-section-h2 { font-family:'Syne',sans-serif; font-weight:700; font-size:0.95rem; letter-spacing:0; color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:4px; margin:1.5rem 0 .6rem; }
/* ── Phase 8 hub discovery sections ────────────────────────── */
.comp-hub, .country-hub, .bc-hub { margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.comp-hub-section, .country-hub-section, .bc-hub-section { margin-bottom:1.5rem; }
.comp-hub-bc-list, .country-hub-bc-list, .bc-hub-terr-list { list-style:none; padding:0; margin:0; }
.comp-hub-bc-row { display:flex; gap:.5rem; flex-wrap:wrap; padding:.3rem 0; font-size:.88rem; border-bottom:1px solid #f3f4f6; }
.comp-hub-bc-row:last-child { border-bottom:none; }
.comp-hub-bc-region { font-weight:600; min-width:130px; }
.comp-hub-bc-channels { color:var(--muted); }
.comp-hub-team-list, .country-hub-club-list, .seo-nav-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.35rem .6rem; }
.comp-hub-team-list li a, .country-hub-club-list li a, .seo-nav-list li a,
.comp-hub-countries .seo-nav-list li a { font-size:.85rem; color:var(--accent); text-decoration:none; padding:.2rem .5rem; border:1px solid #d1fae5; border-radius:4px; display:inline-block; }
.comp-hub-team-list li a:hover, .country-hub-club-list li a:hover, .seo-nav-list li a:hover { background:#f0fdf4; }
.bc-hub-terr-row { padding:.4rem 0; font-size:.88rem; border-bottom:1px solid #f3f4f6; line-height:1.6; }
.bc-hub-terr-row:last-child { border-bottom:none; }
.bc-hub-terr-row strong { color:var(--text); }
.country-hub-bc-list li a { font-size:.85rem; color:var(--accent); text-decoration:none; padding:.2rem .5rem; border:1px solid #d1fae5; border-radius:4px; display:inline-block; }
.country-hub-bc-list li a:hover { background:#f0fdf4; }
.seo-broadcast-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.seo-broadcast-table th { text-align:left; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:.35rem .5rem .35rem 0; border-bottom:2px solid var(--border); }
.seo-broadcast-table td { padding:.4rem .5rem .4rem 0; border-bottom:1px solid #f3f4f6; vertical-align:middle; }
.seo-broadcast-table tr:last-child td { border-bottom:none; }
.seo-broadcast-table td:first-child { font-weight:600; white-space:nowrap; }
/* ── Match page: kickoff chip ── */
.seo-match-scoreline { text-align:center; flex:1; }
.seo-kickoff-chip { font-size:.78rem; color:var(--muted); margin-top:.25rem; }
/* ── Match page: form badges ── */
.match-form { display:flex; gap:.3rem; align-items:center; flex-wrap:wrap; margin-top:.3rem; }
.form-pill { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:4px; font-size:.7rem; font-weight:700; color:#fff; }
.form-pill.W { background:#16a34a; }
.form-pill.D { background:#9ca3af; }
.form-pill.L { background:#ef4444; }
.form-pill.Q { background:#e5e7eb; color:#6b7280; }
/* ── Match page: context grid (form / H2H) ── */
.match-context-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:.5rem 0 1rem; }
.match-context-box { background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:.65rem .8rem; }
.match-context-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.4rem; }
/* ── Match page: H2H bar ── */
.h2h-summary { font-size:.84rem; color:var(--text); margin-bottom:.4rem; }
.h2h-bar { display:flex; gap:2px; height:7px; border-radius:4px; overflow:hidden; margin:.3rem 0 .6rem; }
.h2h-bar-home { background:#16a34a; }
.h2h-bar-draw { background:#d1d5db; }
.h2h-bar-away { background:#ef4444; }
/* ── Fixture cards: clickable ── */
.fixture-card[data-match-href] { cursor:pointer; }
.fixture-card[data-match-href]:hover { box-shadow:0 2px 10px rgba(0,0,0,.08); transform:translateY(-1px); transition:box-shadow .15s,transform .15s; }
/* ── Calendar / date discovery ────────────────────────────────────────────────
Lives in the existing central fixture column and reuses the existing card
geometry — this is an evolution of the fixture list, not a new panel. All
copy comes through t(); nothing here assumes a language or a text direction
beyond the site's own. */
.cal-module { margin-bottom: 2rem; }
/* The calendar's own blocks carry no date label — the date is the module's
subject, not a divider inside it — so they take the rail gutter directly and
land on the same left edge as the Your-teams cards above, which get it
structurally from `.date-group`. The module's `.section-header` and any
`.date-group` inside it already carry the rail, so neither is listed here.
This is the single place the calendar's horizontal alignment is defined. */
.cal-module > .cal-controls,
.cal-module > .cal-comp-group,
.cal-module > .fixtures-grid { padding-left: var(--rail-gutter); }
/* The empty state and the sticky bar keep their own inset content: the first
adds its padding on top of the rail, the second is a bordered pill whose box
edge — not its text — has to start on the rail. */
.cal-module > .cal-empty { padding-left: calc(var(--rail-gutter) + 1rem); }
.cal-module > .cal-sticky { margin-left: var(--rail-gutter); }
.cal-controls { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.cal-rail-row { display:flex; align-items:center; gap:.35rem; }
.cal-rail-nav {
flex:0 0 auto; width:36px; height:44px; display:flex; align-items:center; justify-content:center;
border:1px solid var(--border,#e5e7eb); background:#fff; border-radius:8px; color:var(--muted);
cursor:pointer; font-size:1rem; line-height:1; padding:0;
}
.cal-rail-nav:hover:not(:disabled) { color:var(--accent); border-color:var(--accent); }
.cal-rail-nav:disabled { opacity:.35; cursor:default; }
.cal-rail {
flex:1 1 auto; display:flex; gap:.35rem; overflow-x:auto; scroll-behavior:smooth;
-webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px;
}
.cal-rail::-webkit-scrollbar { display:none; }
.cal-day {
flex:1 0 auto; min-width:62px; min-height:52px; padding:.35rem .5rem;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
border:1px solid var(--border,#e5e7eb); background:#fff; border-radius:8px;
cursor:pointer; color:var(--text); font-family:inherit; line-height:1.15; text-decoration:none;
}
.cal-day:hover { border-color:var(--accent); }
.cal-day-name { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; }
.cal-day-num { font-size:.95rem; font-weight:700; }
.cal-day-dot { width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.55; }
.cal-day-dot.cal-day-dot-empty { background:transparent; }
.cal-day.is-today .cal-day-name { color:var(--accent); }
.cal-day.is-selected { background:var(--accent); border-color:var(--accent); color:#fff; }
.cal-day.is-selected .cal-day-name { color:#fff; }
.cal-day.is-selected .cal-day-dot { background:#fff; }
.cal-picker-btn {
flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
border:1px solid var(--border,#e5e7eb); background:#fff; border-radius:8px; color:var(--muted); cursor:pointer; padding:0;
position:relative;
}
.cal-picker-btn:hover { color:var(--accent); border-color:var(--accent); }
.cal-picker-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cal-picker-input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:0; padding:0; }
.cal-filter-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.cal-comp-btn {
display:inline-flex; align-items:center; gap:.4rem; min-height:38px; padding:.35rem .7rem;
border:1px solid var(--border,#e5e7eb); background:#fff; border-radius:8px; cursor:pointer;
font-family:inherit; font-size:.84rem; font-weight:600; color:var(--text);
}
.cal-comp-btn:hover { border-color:var(--accent); }
.cal-comp-btn.is-active { border-color:var(--accent); color:var(--accent); }
.cal-comp-caret { font-size:.6rem; color:var(--muted); }
/* Competition single-select: popover on desktop, bottom sheet on mobile.
Same markup and same canonical state in both. */
.cal-sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1200; }
.cal-sheet-backdrop[hidden] { display:none; }
.cal-sheet {
position:fixed; z-index:1201; background:#fff; border:1px solid var(--border,#e5e7eb);
border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.18); display:flex; flex-direction:column;
max-height:min(70vh, 520px); width:min(360px, calc(100vw - 32px));
}
.cal-sheet[hidden] { display:none; }
.cal-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.8rem 1rem .5rem; }
.cal-sheet-title { font-family:'Syne', sans-serif; font-weight:700; font-size:.95rem; }
.cal-sheet-close { background:none; border:0; font-size:1rem; color:var(--muted); cursor:pointer; padding:.2rem .4rem; }
.cal-sheet-body { overflow-y:auto; padding:0 .5rem .9rem; -webkit-overflow-scrolling:touch; }
.cal-opt {
display:flex; align-items:center; gap:.6rem; width:100%; min-height:44px; padding:.5rem .6rem;
background:none; border:0; border-radius:8px; cursor:pointer; text-align:left;
font-family:inherit; font-size:.88rem; color:var(--text);
}
.cal-opt:hover { background:#f4f5f2; }
/* A radio marker, not a checkbox: exactly one competition can be chosen. */
.cal-opt-box {
flex:0 0 auto; width:18px; height:18px; border:1.5px solid var(--border,#d1d5db); border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.cal-opt.is-checked .cal-opt-box { border-color:var(--accent); border-width:5px; }
.cal-opt-label { flex:1 1 auto; }
.cal-opt-count { color:var(--muted); font-size:.76rem; }
@media (max-width: 640px) {
.cal-sheet {
left:0; right:0; bottom:0; top:auto; width:auto; max-height:80vh;
border-radius:14px 14px 0 0; border-bottom:0;
}
.cal-day { min-width:56px; }
.cal-rail { padding-bottom:4px; }
}
/* Empty date: the localised statement plus canonical previous/next navigation. */
.cal-empty { padding:1.5rem 1rem; text-align:center; color:var(--muted); font-size:.9rem; }
.cal-empty-nav { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.9rem; }
.cal-empty-nav button {
border:1px solid var(--border,#e5e7eb); background:#fff; border-radius:8px; min-height:40px;
padding:.4rem .8rem; cursor:pointer; font-family:inherit; font-size:.84rem; color:var(--text);
}
.cal-empty-nav button:hover { border-color:var(--accent); color:var(--accent); }
/* Competition grouping inside one date. */
.cal-comp-group { margin-bottom:1.2rem; }
.cal-comp-heading {
font-family:'Syne', sans-serif; font-size:.8rem; font-weight:700; text-transform:uppercase;
letter-spacing:.06em; color:var(--muted); margin:0 0 .5rem; display:flex; align-items:center; gap:.4rem;
}
.cal-comp-heading img { width:16px; height:16px; object-fit:contain; }
/* COMP_LOGO_MONO marks (see JS): white-fill assets with no full-colour
alternative. This heading sits on the plain page background, not the
coloured fixture-overline, so recolour to a visible dark charcoal instead
of leaving them white-on-pale (invisible). */
.cal-comp-logo--mono { filter: brightness(0); opacity: .78; }
/* Compact sticky control, shown once the fixture list scrolls past the rail. */
.cal-sticky {
/* Sticks below .sticky-wrap (the global header + active chips), never at
the literal viewport top — --sticky-header-h is kept in sync with its
actual rendered height by trackStickyHeaderHeight(), so this never
overlaps it even as that height changes (chips shown/hidden, mobile vs
desktop). A flat bottom-border bar, not a shadowed/rounded card, so it
reads as part of the page's fixed chrome rather than a panel floating
over the fixtures beneath it. */
position:sticky; top:var(--sticky-header-h, 0px); z-index:45; display:none; align-items:center; gap:.5rem;
padding:.5rem .6rem; margin:0 0 .6rem; background:var(--header-bg);
border:none; border-bottom:1px solid var(--border,#e5e7eb); border-radius:0; box-shadow:none;
}
.cal-sticky.is-visible { display:flex; }
.cal-sticky-date { flex:1 1 auto; text-align:center; font-weight:700; font-size:.85rem; }
.cal-sticky button { border:0; background:none; cursor:pointer; color:var(--muted); font-family:inherit; padding:.3rem .5rem; min-height:34px; }
.cal-sticky button:hover { color:var(--accent); }
/* Baked (no-JS / crawler) calendar output reuses the existing SEO fixture styles. */
.cal-baked-nav { font-size:.85rem; margin:.6rem 0; }
.cal-baked-nav a { color:var(--accent); }