/* ============================================================================
LMU Garage — "Broadcast" design system
Live TV race-control / world-feed aesthetic: void/navy ground, motion-blur
atmosphere, glassy translucent panels, crimson hot accent, kinetic condensed
italic display type, and data-dense timing-tower tables.
Canonical spec: docs/design-language.md
Visual source of truth: docs/design-explorations/broadcast-pages.html
Fonts are loaded via Google Fonts in base.html.twig (Saira Condensed,
Inter, IBM Plex Mono) — no @font-face here.
IMPORTANT: this file restyles the app's EXISTING class names (see the class
list in design-language.md §3). Do not rename classes here without also
updating every template that relies on them.
============================================================================ */
:root {
color-scheme: dark;
/* -- foundations (design-language.md §1.1) -- */
--void: #060B14;
--navy: #0C1728;
--navy-hi: #132038;
--crimson: #E5123B;
--crimson-hi: #FF3355;
--cyan: #22C3FF;
--warn: #FFC21A; /* warning/attention amber — sun-weather glyphs, foreign-round slot markers */
--white: #FFFFFF;
--text: #F2F5FA;
--muted: #9DB0C4;
--faint: #7E93A8;
/* -- data-locked colors (§1.2) — semantic, never repurpose -- */
--gt3: #35C46A;
--gte: #F97316;
--lmp2: #3F7FE0;
--lmp3: #9A67EA;
--hy: #E5484D;
--hy-hi: #FF6E78;
--bronze: #C07D43;
--silver: #9AA6B2;
--gold: #E0A83B;
--plat: #46CFE0;
--best: #C77DFF;
/* -- glass surfaces (§1.1) -- */
--glass-bg: rgba(16, 27, 46, 0.58);
--glass-bg-hi: rgba(20, 32, 54, 0.72);
--glass-border: rgba(255, 255, 255, 0.09);
/* stronger outline for small outlined chips (tyre/nat/sched-time) — needs ≥3:1 non-text contrast */
--chip-border: rgba(255, 255, 255, 0.4);
--glass-blur: blur(18px) saturate(150%);
/* secondary text over photo veils — --muted brightened to hold AA on the lighter veil stops */
--photo-text: #D9E2EC;
/* -- typography (§1.3) — three families, each with a job -- */
--display: 'Saira Condensed', Oswald, 'Arial Narrow', sans-serif;
--body: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
/* -- scale / spacing / shape (§1.4) -- */
--radius: 10px;
--wrap: 1240px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--void); }
html, body { overflow-x: hidden; } /* the page body never scrolls sideways — tables scroll inside .table-wrap */
/* ============================================================================
ATMOSPHERE — signature motif #1 (design-language.md §2.1)
Fixed, layered-gradient backdrop: radial glow + diagonal streaks + a skewed
speed sweep. CSS only, no photography. The static base (radial glow +
vertical gradient) lives on body's own background with
background-attachment:fixed, pinned to the viewport; the two animated
layers (streak drift, speed sweep) live on body::before/::after — so no
extra wrapper element is needed in base.html.twig.
============================================================================ */
body {
margin: 0;
font-family: var(--body);
color: var(--text);
line-height: 1.5;
min-height: 100vh;
display: flex; flex-direction: column; /* main grows so the footer sits at the viewport bottom on short pages */
position: relative;
background-color: var(--void);
background-image:
radial-gradient(ellipse 1300px 700px at 14% -8%, rgba(229, 18, 59, 0.20), transparent 58%),
radial-gradient(ellipse 1000px 620px at 104% 6%, rgba(34, 195, 255, 0.11), transparent 60%),
radial-gradient(ellipse 900px 500px at 50% 115%, rgba(229, 18, 59, 0.10), transparent 62%),
linear-gradient(180deg, #060B14 0%, #0C1728 42%, #0A1422 68%, #060B14 100%);
background-repeat: no-repeat;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; margin: 0; line-height: 1.05; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
/* track/circuit name featured outside a table (e.g. the Current-round panel) —
names are Inter, never condensed (§1.3) */
.track-name { font-family: var(--body); font-weight: 700; font-size: 1.15rem; color: var(--white); }
/* ±1 local-day superscript on time chips — one style everywhere it rides
(sched-grid chips, rundown times). Floored at 12px (§1.4). */
.tz-dayhint {
font-size: max(0.65em, 0.75rem); font-weight: 600; color: var(--cyan);
vertical-align: super; margin-left: 0.12em; text-decoration: none;
}
/* generic glass surface, reused by panels/cards/tables/header */
.glass-surface,
.panel,
.race-card,
.hub-tile,
.table-wrap {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
}
/* ============================================================================
APP SHELL / NAV — .site-header .nav .brand .nav-tabs (§3.1)
============================================================================ */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(6, 11, 20, 0.72);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
background: linear-gradient(90deg, var(--crimson), var(--cyan) 60%, transparent);
opacity: 0.85;
}
.nav {
max-width: var(--wrap); margin: 0 auto;
display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 1.8rem);
padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
flex-wrap: wrap;
}
.brand {
display: inline-flex; align-items: center; gap: 0.3em;
font-family: var(--display); font-weight: 800; font-style: italic;
transform: skewX(-6deg); transform-origin: left;
text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.3rem;
color: var(--white); flex: none;
min-height: 24px;
}
.brand span { color: var(--crimson-hi); }
.nav-tabs { display: flex; gap: clamp(0.9rem, 2.4vw, 1.6rem); margin-left: auto; flex-wrap: wrap; }
.nav-tabs a {
display: inline-flex; align-items: center; min-height: 24px; padding: 0.3rem 0.1rem;
font-family: var(--display); font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; font-size: 0.92rem; color: var(--muted);
position: relative;
}
.nav-tabs a::after {
content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
background: linear-gradient(90deg, var(--crimson), var(--crimson-hi));
transition: right 0.22s ease;
}
.nav-tabs a:hover { color: var(--text); }
.nav-tabs a:hover::after { right: 0; }
.nav-tabs a.active { color: var(--white); }
.nav-tabs a.active::after { right: 0; }
main { flex: 1 0 auto; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 1.7rem clamp(1.25rem, 4vw, 3rem) 4.5rem; position: relative; }
/* ============================================================================
PAGE HEAD & TABS — .page-head, .tabs (§3.2)
============================================================================ */
.page-head { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.3rem 0 1.7rem; }
.page-head h1 {
font-family: var(--display); font-weight: 800; font-style: italic;
text-transform: uppercase; color: var(--white);
font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.02;
transform: skewX(-4deg); transform-origin: left;
text-shadow: 0 0 30px rgba(229, 18, 59, 0.28);
}
.page-head .sub { font-family: var(--body); color: var(--muted); font-size: 1rem; max-width: 56em; }
/* ============================================================================
EVENT HERO — .ov-hero (.oh-crumb .oh-title .oh-sub .oh-chips)
(docs/design-explorations/overview-pages.html §1, adopted 2026-07-18 WITHOUT
the on-air status bug). Replaces .page-head + the chips row on detail pages:
game photo behind the rc-banner veil, breadcrumb chip, identity chips in the
lower third. No image synced → the bare glass surface carries it.
============================================================================ */
.ov-hero {
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; min-height: 236px;
background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius);
margin: 0.3rem 0 1.1rem;
}
.ov-hero:not(:has(.bg)) { min-height: 180px; }
.ov-hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; display: block; }
.ov-hero::before { /* veil weighted to the lower third — the adopted .rc-banner recipe, darkened for the taller hero */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(180deg, rgba(6, 11, 20, 0.34) 0%, rgba(6, 11, 20, 0.56) 34%, rgba(6, 11, 20, 0.92) 100%),
linear-gradient(305deg, rgba(229, 18, 59, 0.12), transparent 44%);
}
.ov-hero .motif { /* hazard-stripe wedge corner, as on hub tiles */
position: absolute; top: 0; right: 0; width: 30px; height: 30px; z-index: 0; pointer-events: none;
background: repeating-linear-gradient(45deg, var(--crimson) 0 6px, #0A1220 6px 12px);
clip-path: polygon(100% 0, 100% 100%, 0 0); opacity: 0.9;
}
.oh-top { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.95rem 1.4rem 1.1rem; }
.oh-crumb { /* glass chip: the veil is lightest up here — bare muted text can't guarantee AA over a bright sky */
display: inline-flex; align-items: center; gap: 0.45em; align-self: flex-start; min-height: 24px;
font-family: var(--display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
font-size: 0.8125rem; color: var(--text);
background: rgba(6, 11, 20, 0.55); padding: 0.22em 0.6em; border-radius: 4px;
}
.oh-crumb:hover { color: var(--cyan); }
.oh-title {
font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase;
transform: skewX(-4deg); transform-origin: left;
font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.02; margin: 0;
color: var(--white); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.75);
}
.oh-sub { font-family: var(--body); color: var(--photo-text); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.oh-chips { margin-top: auto; padding-top: 0.6rem; }
.tabs {
display: flex; gap: 0.2rem; flex-wrap: wrap;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin: 0 0 1.7rem;
}
.tabs a {
display: inline-flex; align-items: center; min-height: 24px;
font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
text-transform: uppercase; font-size: 0.92rem; color: var(--muted);
padding: 0.6rem 0.9rem; margin-bottom: -1px; position: relative;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--white); }
.tabs a.active::after {
content: ""; position: absolute; left: 0.15rem; right: 0.15rem; bottom: -1px; height: 3px;
background: linear-gradient(90deg, var(--crimson), var(--crimson-hi));
border-radius: 2px 2px 0 0;
}
/* ============================================================================
SECTIONS — .section (used to group tiers/status buckets)
============================================================================ */
.section { margin: 2.7rem 0 2.2rem; }
/* section header = kinetic italic title with a crimson underline under the text (matches the
active-tab / leaderboard-header motif) so each section clearly announces itself */
.section > h2 {
display: inline-block;
font-family: var(--display); font-weight: 800; font-style: italic;
transform: skewX(-4deg); transform-origin: left; /* every display heading leans (§1.3) */
text-transform: uppercase; letter-spacing: 0.04em;
font-size: 1.42rem; color: var(--white);
margin: 0 0 1.15rem; padding-bottom: 0.35rem;
border-bottom: 3px solid var(--crimson);
}
/* ============================================================================
BADGES & RATINGS — .badge.badge-class[data-class], .rating[data-rank] (§3.3)
Rectangular, condensed uppercase, solid coded bg + near-black text. Never a
dot, never round. Sized ≥14px since they carry font-weight 700 (no small-bold).
============================================================================ */
.badge {
display: inline-flex; align-items: center; min-height: 24px;
font-family: var(--display); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; font-size: 0.875rem; line-height: 1;
padding: 0.3em 0.55em; border-radius: 4px; white-space: nowrap;
}
.badge-class { background: var(--gt3); color: #06120a; } /* GT3 default */
.badge-class[data-class="GTE"] { background: var(--gte); color: #180a00; }
.badge-class[data-class="LMP2"] { background: var(--lmp2); color: #000000; }
.badge-class[data-class="LMP3"] { background: var(--lmp3); color: #000000; }
.badge-class[data-class="HY"] { background: var(--hy); color: #1a0404; }
.badge-class[data-class="Overall"] { background: rgb(148, 163, 184); color: #0b0e13; }
.rating {
display: inline-flex; align-items: stretch; overflow: hidden; min-height: 24px;
font-family: var(--display); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; font-size: 0.875rem; line-height: 1;
border-radius: 4px; white-space: nowrap;
}
.rating .k { display: inline-flex; align-items: center; background: #2a313c; color: var(--muted); padding: 0.32em 0.42em; }
.rating .v { display: inline-flex; align-items: center; color: #0b0e13; padding: 0.32em 0.46em; background: #3a424e; }
.rating[data-rank="Bronze"] .v { background: var(--bronze); }
.rating[data-rank="Silver"] .v { background: var(--silver); }
.rating[data-rank="Gold"] .v { background: var(--gold); }
.rating[data-rank="Platinum"] .v { background: var(--plat); }
.rating[data-rank=""] .v, .rating:not([data-rank]) .v { background: #3a424e; color: var(--text); }
.chips { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
/* ============================================================================
PILLS — .pill, .pill.live (§3.7)
============================================================================ */
.pill {
display: inline-flex; align-items: center; gap: 0.4em; min-height: 24px;
font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
text-transform: uppercase; font-size: 0.875rem; color: var(--muted);
background: rgba(255, 255, 255, 0.05); border: 1px solid var(--chip-border);
padding: 0.4em 0.8em; border-radius: 999px; white-space: nowrap;
}
/* pills that ARE links carry the cyan action accent statically — an action never
shares the neutral status-chip look (§3.7) */
a.pill { color: var(--cyan); border-color: rgba(34, 195, 255, 0.45); }
a.pill:hover { border-color: rgba(34, 195, 255, 0.75); background: rgba(34, 195, 255, 0.08); }
.pill.live {
color: var(--text); background: rgba(53, 196, 106, 0.14); border-color: rgba(53, 196, 106, 0.55);
}
.pill.live::before {
content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
background: var(--gt3); box-shadow: 0 0 8px 1px rgba(53, 196, 106, 0.7);
animation: pill-blink 1.6s ease-in-out infinite;
}
@keyframes pill-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.natcode {
font-family: var(--body); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.03em;
color: var(--muted); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--chip-border);
padding: 0.18em 0.45em; border-radius: 3px; display: inline-block;
}
.flag { font-size: 1rem; line-height: 1; }
/* ============================================================================
CARD GRIDS & RACE CARDS — .cards(.tri), .race-card, .tier-card, .rc-stats (§3.4)
Cards carry the game-sourced hero/card photo (.bg ![]()
) full-bleed behind a dark
Broadcast veil (see .bg / :has(.bg) rules below); image-less records fall back to
the glass-over-atmosphere surface. (design-language §3.4/§5)
============================================================================ */
/* auto-fit min tuned so the plain card grid (special / championship lists) tops out at 3 columns
on the 1240px wrap, then reflows to 2 / 1 on narrower screens */
.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cards.tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards.tri { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards.tri { grid-template-columns: 1fr; } }
.race-card {
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; gap: 0.85rem;
padding: 1.4rem 1.4rem 1.3rem;
text-decoration: none; color: var(--text);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.race-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6); }
.race-card:focus-visible { outline-offset: -3px; }
/* game-sourced hero/card photo (heroImage/cardImage) — shown full-bleed behind a
dark Broadcast veil + subtle crimson wash so titles/stats stay legible. Cards with
no image fall back to the glass-over-atmosphere surface. */
.race-card .bg, .hub-tile .bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.race-card:has(.bg) { min-height: 210px; }
.race-card:has(.bg)::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
/* shadow concentrated under the text: darkest top-left + down the left, plus a bottom
boost for the stats row; the photo peeks through the open right side */
background:
linear-gradient(118deg, rgba(6,11,20,0.90) 0%, rgba(7,12,22,0.54) 46%, rgba(9,15,26,0.20) 100%),
linear-gradient(to top, rgba(6,11,20,0.52) 0%, transparent 36%),
linear-gradient(305deg, rgba(229,18,59,0.12), transparent 44%);
}
.race-card:has(.bg) .rc-title { text-shadow: 0 1px 16px rgba(0,0,0,0.7); }
.race-card:has(.bg) .rc-track { color: var(--photo-text); }
.race-card .rc-top { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.race-card .rc-body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.race-card .rc-title,
.rc-title {
font-family: var(--display); font-weight: 700; font-style: italic;
transform: skewX(-4deg); transform-origin: left;
text-transform: uppercase; font-size: 1.28rem; color: var(--white); line-height: 1.08;
}
.race-card .rc-track { font-family: var(--body); color: var(--muted); font-size: 0.86rem; letter-spacing: 0.02em; }
.race-card .rc-meta { margin-top: 0.1rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
/* stretched card link — cards are s: the title link's ::after covers the whole
card as the click target while .rc-start .cta sits above it as a second, separate
link (no nested ). Anchored by .race-card's position:relative. */
.race-card .rc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* .rc-start — next-start block pinned to the card bottom: cyan pulse + eyebrow over a big
skewed-italic clock, "Full schedule" CTA bottom-right. Chosen "start block" variant,
docs/design-explorations/card-next-start-variants.html (2026-07-10). */
.rc-start {
margin-top: auto; padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex; align-items: flex-end; justify-content: space-between;
gap: 0.8rem 1rem; flex-wrap: wrap; text-transform: uppercase;
}
.rc-start .rs-when { display: flex; flex-direction: column; gap: 0.3rem; }
.rc-start .lab {
display: flex; align-items: center; gap: 0.5rem;
font-family: var(--display); font-weight: 600; letter-spacing: 0.1em;
font-size: 0.75rem; color: var(--muted);
}
.rc-start .time {
font-family: var(--display); font-weight: 800; font-style: italic;
transform: skewX(-4deg); transform-origin: left;
font-size: 1.45rem; line-height: 1.05; color: var(--white); letter-spacing: 0.01em;
}
.rc-start .cta { position: relative; z-index: 2; margin-left: auto; font-size: 0.8125rem; padding: 0.5em 0.9em; }
/* .rc-stats — reused generic label/value grid (race cards, panels) */
.rc-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 0.8rem 1rem; margin-top: 0.3rem;
border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 0.85rem;
}
.rc-stats > div { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.rc-stats .lab { font-family: var(--display); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; color: var(--muted); }
.rc-stats .val { font-family: var(--display); font-weight: 700; color: var(--text); font-size: 0.98rem; letter-spacing: 0.01em; overflow-wrap: anywhere; }
/* wedge/hazard-stripe corner motif clipped into the card corner — CSS only */
.race-card .motif {
position: absolute; top: 0; right: 0; width: 30px; height: 30px; z-index: 0; pointer-events: none;
background: repeating-linear-gradient(45deg, var(--crimson) 0 6px, #0A1220 6px 12px);
clip-path: polygon(100% 0, 100% 100%, 0 0);
opacity: 0.9;
}
/* Poster-banner cards — daily Next .tier-card ("poster twin",
docs/design-explorations/next-card-banner-variants.html §1, adopted 2026-07-14) and the
championships .champ-card ("clean ledger", champ-card-banner-variants.html §9, adopted
2026-07-17). The photo sits in a full-opacity top banner mirroring the Schedule tab's
.sched-poster: SR chip (plus class badges where the body carries none) up top, title +
track line in the lower third. Bodies differ per card type below; other .race-card
layouts are unaffected. */
.tier-card, .champ-card { padding: 0; gap: 0; }
.tier-card::before, .champ-card::before { content: none; } /* photo + veil live in the banner, not across the card */
:is(.tier-card, .champ-card) .rc-banner {
/* positioned so the photo/veil fill it — but NOT overflow:hidden: the stretched
rc-link::after below must escape it (the card's own overflow crops everything) */
position: relative; isolation: isolate;
display: flex; flex-direction: column;
min-height: 132px; padding: 0.85rem 1.4rem 0.8rem;
}
:is(.tier-card, .champ-card) .rc-banner::before { /* veil weighted to the lower third, where the text sits */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(180deg, rgba(6, 11, 20, 0.28) 0%, rgba(6, 11, 20, 0.52) 30%, rgba(6, 11, 20, 0.9) 100%),
linear-gradient(305deg, rgba(229, 18, 59, 0.10), transparent 44%);
}
:is(.tier-card, .champ-card) .rc-banner .rating { align-self: flex-start; }
:is(.tier-card, .champ-card) .rc-banner .rc-track { font-size: 0.8rem; } /* matches .sched-poster .sp-track */
:is(.tier-card, .champ-card) .rc-foot {
margin-top: auto; padding-top: 1rem;
display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
}
/* The whole card stays the click target: the banner is the title link's containing block,
so the stretched ::after overshoots downward and the card's overflow:hidden crops it. */
:is(.tier-card, .champ-card) .rc-link::after { bottom: -100vh; }
:is(.tier-card, .champ-card) .rc-main {
padding: 0.9rem 1.4rem 1.3rem; flex: 1;
display: flex; flex-direction: column; gap: 0.55rem;
}
/* Championship "clean ledger" standings — position · class badge · name · points on hairline
rows, P1 emphasized, a stronger rule where the next class group starts. Canonical .stand:
shared by the championships-index cards and the champ detail Standings panel; the hub hero's
.pod-band speaks the same ledger language with its own crew-line twist (§ podium band). The
banner's track line announces the next round ("R4 ·