hides its children at the browser level, so CSS
alone cannot re-show them on desktop); an inline script collapses it
under the nav's breakpoint, where the summary becomes the disclosure
button, and re-opens it if the viewport crosses back up (rotation).
No-JS small screens just see it expanded. Desktop hides the summary
and keeps the nav's existing sidebar look via its media queries
(breakpoint 992 for manage). The summary names the CURRENT section;
active items reuse the league's own --accent, so Pro branding
carries through. ── */
.disc-nav > summary {
cursor: pointer; font-family: var(--font-mono); font-size: .72rem;
font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-secondary); padding: .55rem .7rem;
border: 1px solid var(--border-subtle); border-radius: .5rem;
list-style: none;
}
.disc-nav > summary::-webkit-details-marker { display: none; }
.disc-nav > summary::after { content: ' ▾'; opacity: .55; }
.disc-nav[open] > summary::after { content: ' ▴'; }
.lg-controls {
display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.4rem;
padding: .55rem .8rem; margin-bottom: 1.35rem;
background: var(--surface-elevated);
border: 1px solid var(--border-subtle); border-radius: .8rem;
}
/* A league with one season and one championship has nothing to filter —
don't render an empty strip (:empty fails on whitespace, :has doesn't). */
.lg-controls:not(:has(*)) { display: none; }
/* Control clusters wrap as UNITS (sections / season / championships / week)
— no mid-group breaks, no orphaned separators. */
.lg-group {
display: inline-flex; flex-wrap: wrap; align-items: center;
gap: .45rem .55rem;
}
.lg-controls .sep {
width: 1px; height: 1.55rem; background: var(--border-subtle);
margin: 0 .3rem; flex: none;
}
.lg-controls .lb-select { margin: 0; }
.lg-controls .classpill { padding: .34rem .75rem; }
@media (max-width: 575px) { .lg-controls .sep { display: none; } }
/* Section pills: the current page reads like the lit sector on a pit board */
.lg-section-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ── /manage admin-panel chrome: compact breadcrumb header (the hero
stays on the public site — this is a tool), grouped sticky sidebar on
desktop, the same nav folded behind a .disc-nav disclosure on
mobile (pattern comments live with .disc-nav above) ── */
.mg-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: .5rem 1.5rem; flex-wrap: wrap;
padding: .3rem 0 .9rem; margin-bottom: 1.4rem;
border-bottom: 1px solid var(--border-subtle);
}
.mg-head h1 {
font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; margin: 0;
}
.mg-head h1 a { color: var(--text-primary); text-decoration: none; }
.mg-head h1 a:hover { color: var(--accent); }
.mg-head .sep { color: var(--text-tertiary); font-weight: 400; margin: 0 .4rem; }
.mg-head .crumb { color: var(--text-secondary); font-weight: 600; }
.mg-head-meta { font-size: .82rem; color: var(--text-tertiary); }
/* Page title block at the top of each content column (GitHub settings
style): a real heading + at most one short muted line, with room for
the page's ONE primary action on the right (Stripe pattern — rare
actions collapse behind it instead of sitting open on the page). */
.mg-page-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.mg-page-head h2 {
font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: 0;
}
.mg-page-head p {
color: var(--text-tertiary); font-size: .85rem; margin: .3rem 0 0;
}
/* Cards fill the content column, and content fills its card — pages get
width from multi-column card grids or toolbar-row forms, never from a
narrow form floating in a stretched card. */
/* Rules editor: one panel, sections divided by hairlines (GitHub
settings), Form/JSON swap in place via the panel-head toggle */
.mg-rule-sec { padding: 1.5rem 0 1.6rem; border-top: 1px solid var(--border-subtle); }
.mg-rule-sec:first-child { border-top: 0; padding-top: .3rem; }
.mg-rule-sec > .mg-card-h { margin-bottom: .45rem; }
.mg-rule-sec:last-child { padding-bottom: .4rem; }
/* One plain sentence under each section title: what the rule IS */
.mg-sec-desc {
color: var(--text-secondary); font-size: .88rem; line-height: 1.55;
margin: 0 0 1.15rem;
}
/* Editor + sticky live-summary rail (label + compact value pairs,
updating as the form changes). The side CELL must stretch the full
row height — align-items:start would shrink it to the card and leave
the sticky card no room to travel while the page scrolls. */
.mg-edit-layout {
display: grid; grid-template-columns: 1fr; gap: 1.4rem;
}
@media (min-width: 1200px) {
.mg-edit-layout { grid-template-columns: minmax(0, 1fr) 17.5rem; }
.mg-edit-side .card { position: sticky; top: 4.75rem; }
}
.mg-facts-col { flex-direction: column; gap: 1.35rem; }
.mg-facts-col > span { max-width: none; white-space: pre-line; line-height: 1.55; }
/* Section-group eyebrow between card clusters on mixed-topic pages */
.mg-group-h {
font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--text-tertiary); margin: 1.7rem 0 .6rem;
}
.mg-group-h:first-child { margin-top: 0; }
/* Admin tables speak DATA, not the public timing-tower display voice:
one size for cells, names in the body face, quiet mono row actions. */
.mg .timing tbody td { font-size: .85rem; }
.mg .timing .col-driver {
font-family: inherit; font-size: .9rem; font-weight: 600;
letter-spacing: 0;
}
.mg-rowlink {
font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
color: var(--text-secondary); text-decoration: none; white-space: nowrap;
}
.mg-rowlink:hover { color: var(--accent); }
/* Quiet in-row POST actions: link-weight, state color only on hover —
the status badge carries the row's color, not the button */
.mg .btn.mg-act {
background: transparent; border: 0; color: var(--text-secondary);
padding: .2rem .35rem;
}
.mg .btn.mg-act:hover { color: var(--accent); background: transparent; }
.mg .btn.mg-act-danger:hover { color: #ef4444; }
/* Week separators inside the single season-calendar table */
.mg .timing tr.mg-week-row td,
.mg .timing tr.mg-week-row:hover td {
background: transparent; border-color: transparent;
font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--text-tertiary); text-align: left;
padding: .9rem .6rem .15rem 0;
}
.mg .timing tr.mg-week-row:hover { transform: none; }
.mg-layout { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.mg-main { min-width: 0; }
.mg-nav { display: flex; flex-direction: column; gap: .15rem; }
.mg-nav a {
font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
color: var(--text-secondary); text-decoration: none;
padding: .48rem .65rem; border-left: 2px solid transparent;
border-radius: 0 .45rem .45rem 0;
}
.mg-nav a:hover { color: var(--text-primary); }
.mg-nav a.active {
color: var(--text-primary); border-left-color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.mg-nav a.mg-nav-help { color: var(--text-tertiary); margin-top: .5rem; }
.mg-nav a.mg-nav-help:hover { color: var(--text-primary); }
/* Contextual help link in the manage header meta row (never floated:
a float here once wrapped whole dashboards around it). */
.mg-help { color: var(--text-tertiary); text-decoration: none; }
.mg-help:hover { color: var(--accent); }
@media (min-width: 992px) {
.mg-layout { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 2.2rem; }
/* The details wrapper is the grid child now — sticky lives on it */
.mg-disc { position: sticky; top: 4.75rem; align-self: start; }
.mg-disc > summary { display: none; }
}
@media (max-width: 991.98px) {
/* Disclosure list: keep the sidebar's column + left accent bar,
swap the mono eyebrows for readable body-face rows */
.mg-nav { padding: .55rem 0; }
.mg-nav a {
font-family: inherit; font-size: .92rem; font-weight: 500;
letter-spacing: 0; text-transform: none;
color: var(--text-secondary); padding: .5rem .7rem;
}
}
/* Manage stat strip — data readout, not card chrome */
.mg-stats {
display: flex; flex-wrap: wrap; gap: 2.2rem;
font-family: var(--font-mono); margin-bottom: 1.9rem;
}
.mg-stats b { font-size: 1.75rem; font-weight: 700; display: block; line-height: 1.1; }
.mg-stats .mg-stat-label {
font-size: .66rem; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--text-tertiary);
}
.mg-stats a { text-decoration: none; }
.mg-stats a:hover b { color: var(--accent); }
.mg-stats b { color: var(--text-primary); }
/* ── /manage design system: one panel language, site-voice buttons ──
Scoped to .mg so the public site is untouched. */
.mg .card {
background: var(--surface-elevated);
border: 1px solid var(--border-subtle); border-radius: .9rem;
}
.mg .card-body { padding: 1.25rem 1.4rem; }
.mg-panel-head {
display: flex; justify-content: space-between; align-items: center;
gap: 1rem; flex-wrap: wrap; padding: .8rem 1.4rem;
border-bottom: 1px solid var(--border-subtle);
/* One head height whether or not the head carries buttons — a
text-only head (Live summary) must match a buttoned one (Rules) */
min-height: 3.4rem;
}
.mg-panel-head .mg-card-h { margin-bottom: 0; }
.mg-panel-actions { display: flex; gap: .5rem; }
/* Bootstrap's dark-theme .text-muted (rgba(222,226,230,.75)) is nearly
body-bright; side notes in /manage must whisper, not compete with the
heading beside them. !important matches Bootstrap's own. */
.mg .text-muted { color: var(--text-tertiary) !important; }
/* Buttons in the site's own voice (mono pit-board), not stock pills */
.mg .btn {
font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
border-radius: .5rem; padding: .5rem .85rem; line-height: 1.15;
}
.mg .btn-primary { background: var(--accent); border-color: var(--accent); }
.mg .btn-outline-primary {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.mg .btn-outline-primary:hover { background: var(--accent); color: #fff;
border-color: var(--accent); }
.mg .btn-outline-secondary { color: var(--text-secondary);
border-color: var(--border-subtle); background: transparent; }
.mg .btn-outline-secondary:hover { color: var(--accent);
border-color: var(--accent); background: transparent; }
.mg .btn-outline-danger {
color: #ef4444; border-color: color-mix(in srgb, #ef4444 40%, transparent);
}
.mg .btn-outline-danger:hover { background: #ef4444; border-color: #ef4444; }
/* Alerts: quiet bordered notes, not full-color boxes */
.mg .alert {
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--accent);
color: var(--text-secondary); border-radius: .6rem;
}
.mg .alert-danger { border-left-color: #ef4444; }
.mg .alert-warning { border-left-color: #f59e0b; }
.mg .alert-info { border-left-color: var(--accent); }
/* Raw-JSON editor: same dark editor ground as the marketing showcase, in
both themes — syntax-painted on a behind the transparent textarea
(identical metrics, synced scroll), caret and selection stay native. */
/* Selector carries .mg-json-wrap so these beat the generic
.mg .form-control rules declared later in the file — a plain .mg-json
loses font-size/color to them and the paint layer drifts out of sync. */
.mg .mg-json-wrap .mg-json, .mg .mg-json-wrap .mg-json:focus {
background: transparent; color: transparent; caret-color: #e6edf3;
border-color: rgba(255, 255, 255, .12);
font-family: var(--font-mono); font-size: .8rem; line-height: 1.65;
}
.mg .mg-json::selection { background: rgba(56, 139, 253, .45); color: transparent; }
.mg .mg-json-wrap .mg-json:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.mg-json-wrap { position: relative; }
.mg-json-wrap .mg-json { position: relative; z-index: 1; display: block; }
.mg-json-hl {
position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden;
background: #0d1117; color: #9da7b3;
border: 1px solid transparent; border-radius: .55rem;
padding: .55rem .8rem;
font-family: var(--font-mono); font-size: .8rem; line-height: 1.65;
}
.mg-json-hl code {
font-family: inherit; font-size: inherit; color: inherit;
white-space: pre-wrap; word-break: break-word; display: block;
}
.mg-json-hl .jk { color: #7ee787; } /* keys */
.mg-json-hl .js { color: #a5d6ff; } /* string values */
.mg-json-hl .jn { color: #79c0ff; } /* numbers */
.mg-json-hl .jb { color: #ff7b72; } /* true / false / null */
.mg .btn-outline-secondary.active {
color: var(--accent); border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* Flush lp-card variant: header row + padded body (public panels) */
/* .lp-card.lp-card-flush (two classes) so this beats the base .lp-card
padding, which is declared LATER in the file — with a lone .lp-card-flush
selector every flush panel silently gained 1.3rem of dead padding. */
.lp-card.lp-card-flush { padding: 0; overflow: hidden; }
.lp-card-flush .mg-panel-head { background: transparent; }
.lp-card-flush .lp-card-pad { padding: 1rem 1.35rem 1.2rem; }
/* Stats: dense category blocks inside one panel per car class */
.lg-stats-grid {
display: grid; gap: 1.2rem 1.8rem;
/* There are always six record categories: size the tracks so they
pack evenly on desktop instead of orphaning the last one. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.lg-stat-table td { padding: .32rem .5rem; font-size: .8rem; }
.stat-incidents { color: #ef4444; }
/* Record book, multiclass leagues: per-class blocks inside one card.
The class heading keeps the .mg-h eyebrow language but is promoted
(secondary ink + accent class strip, echoing the season pages' class
markers) so it scans apart from the tertiary category labels. */
.lg-class-h {
font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--text-secondary);
border-left: 3px solid var(--accent); padding-left: .55rem;
margin-bottom: .8rem;
}
.lg-class-block + .lg-class-block { margin-top: 1.35rem; }
/* Narrow centered section that KEEPS the section cadence (inline
margin:0 auto would override the margin-top rule — that bug once ate
the space under History import) */
.lp-narrow { max-width: 56rem; margin-inline: auto; }
/* Paddock feature cards: each opens with a mini visual in the timing
language (sparkline, tower, podium, histogram, grid, class strips) */
.pd-card { display: flex; flex-direction: column; }
.pd-card .lp-league-cta { margin-top: auto; padding-top: .6rem; display: inline-block; }
.pd-viz {
height: 122px; margin-bottom: .9rem; padding: .55rem .65rem;
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
border: 1px solid var(--border-subtle); border-radius: .6rem;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.pd-viz canvas { width: 100% !important; height: 100% !important; }
.pd-mini { width: 100%; align-self: flex-start; }
.pd-mini th { font-family: var(--font-mono); font-size: .58rem;
letter-spacing: .1em; color: var(--text-tertiary); text-transform: uppercase;
padding: 0 .4rem .15rem; text-align: right; }
.pd-mini td { padding: .22rem .4rem; font-size: .74rem; }
.pd-drop { text-decoration: line-through; color: var(--text-tertiary); }
.pd-bars { display: flex; align-items: flex-end; gap: .3rem;
width: 100%; height: 100%; }
.pd-bars span { flex: 1; border-radius: .2rem .2rem 0 0;
background: linear-gradient(180deg, var(--accent),
color-mix(in srgb, var(--accent) 45%, transparent)); }
.pd-podium { display: flex; align-items: flex-end; gap: .5rem;
width: 100%; height: 100%; padding: 0 .5rem; }
.pd-step { flex: 1; border-radius: .35rem .35rem 0 0; position: relative;
display: flex; flex-direction: column; align-items: center;
justify-content: flex-start; gap: .3rem; padding-top: .45rem;
background: color-mix(in srgb, var(--text-primary) 7%, transparent);
border: 1px solid var(--border-subtle); border-bottom: none; }
.pd-step b { font-family: var(--font-mono); font-size: 1.1rem; }
.pd-p1 { height: 92%; border-top: 3px solid #d4a017; }
.pd-p1 b { color: #d4a017; }
.pd-p2 { height: 68%; border-top: 3px solid #9ca3af; }
.pd-p2 b { color: #9ca3af; }
.pd-p3 { height: 52%; border-top: 3px solid #b36c33; }
.pd-p3 b { color: #b36c33; }
.pd-classes { display: flex; flex-direction: column; gap: .45rem; width: 100%; }
.pd-class { display: flex; align-items: center; gap: .6rem;
padding: .35rem .6rem; border-radius: .4rem;
border-left: 3px solid var(--cls, var(--border-subtle));
background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.pd-class-name { font-family: var(--font-mono); font-size: .62rem;
letter-spacing: .08em; text-transform: uppercase;
color: var(--text-secondary); min-width: 6.5rem; }
.pd-class-pts { margin-left: auto; font-family: var(--font-mono);
font-size: .78rem; font-weight: 700; }
.pd-split { font-family: var(--font-mono); font-size: .62rem;
border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
color: var(--accent); border-radius: .3rem; padding: .12rem .4rem; }
/* Season Wrapped stat tiles, organized as labeled story rows (the
season / results / rating & strength). Wrapping FLEX, not grid: tile
count varies per driver, so a rigid grid strands orphans — flex lets
each group's tiles grow to fill its row. */
.wr-groups { margin: 1.4rem 0; display: flex; flex-direction: column; gap: 1.05rem; }
.wr-group-label {
font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .14em;
color: var(--text-tertiary); display: block; margin-bottom: .45rem;
}
.wr-grid { display: flex; flex-wrap: wrap; gap: .7rem; }
.wr-grid .wr-stat { flex: 1 1 160px; }
.wr-stat {
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
border-radius: .8rem; padding: 1rem 1.1rem; text-align: center;
display: flex; flex-direction: column; gap: .15rem; justify-content: center;
}
.wr-stat b { font-family: var(--font-mono); font-size: 1.9rem;
font-weight: 700; line-height: 1.1; }
.wr-stat span { color: var(--text-tertiary); font-size: .78rem; }
.wr-big b { font-size: 2.5rem; color: var(--accent); }
/* Wrapped fact tiles: textual facts (home series, track, car, leagues)
in the same tile language as the stat grid, left-aligned with a micro
label, display-face value and muted sub-line. */
.wr-facts { display: grid; gap: .7rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wr-fact {
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
border-radius: .8rem; padding: .85rem 1rem;
display: flex; flex-direction: column; gap: .2rem; min-width: 0;
}
.wr-fact-label { font-family: var(--font-mono); font-size: .62rem;
font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
color: var(--text-tertiary); display: flex; align-items: center; gap: .4rem; }
.wr-fact-label .bi { color: var(--accent); font-size: .8rem; }
.wr-fact-value { font-family: var(--font-display); font-weight: 700;
font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.wr-fact-value a { color: inherit; text-decoration: none; }
.wr-fact-value a:hover { color: var(--accent); }
.wr-fact-sub { font-size: .78rem; color: var(--text-tertiary); }
.wr-fact-sub .wr-rank { font-family: var(--font-mono); font-weight: 700;
color: var(--accent); font-size: .85rem; }
.wr-gold b { color: #d4a017; }
.wr-up b { color: #3fb950; }
.wr-down b { color: #ef4444; }
/* Admin section nav (shared across /admin pages) — same responsive
pattern as the help center nav (.hc-nav): a rendered open,
collapsed by script on small screens where the summary becomes the
disclosure. Desktop hides the summary and shows the usual mono
underline tab row; Tools is a nested (dropdown on desktop,
indented disclosure group on mobile). */
.adm-nav { margin: .35rem 0 1.1rem; }
.adm-nav > summary {
cursor: pointer; font-family: var(--font-mono); font-size: .72rem;
font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-secondary); padding: .5rem .65rem;
border: 1px solid var(--border-subtle); border-radius: .5rem;
list-style: none;
}
.adm-nav > summary::-webkit-details-marker { display: none; }
.adm-nav nav a, .adm-nav-tools > summary {
color: var(--text-tertiary); text-decoration: none; cursor: pointer;
list-style: none;
}
.adm-nav nav a:hover,
.adm-nav-tools > summary:hover { color: var(--text-primary); }
.adm-nav-tools > summary::-webkit-details-marker { display: none; }
.adm-nav-tools > summary::after { content: ' ▾'; opacity: .6; }
@media (min-width: 861px) {
.adm-nav > summary { display: none; }
.adm-nav nav { display: flex; flex-wrap: wrap; gap: .25rem;
border-bottom: 1px solid var(--border-subtle); }
.adm-nav nav a, .adm-nav-tools > summary {
display: block;
font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em;
padding: .45rem .7rem .55rem; border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.adm-nav nav a.active,
.adm-nav-tools > summary.active {
color: var(--accent); border-bottom-color: var(--accent); }
.adm-nav-tools { position: relative; }
.adm-nav-menu {
position: absolute; left: 0; top: 100%; z-index: 40;
min-width: 13rem; padding: .35rem;
display: flex; flex-direction: column;
background: var(--surface-elevated);
border: 1px solid var(--border-subtle); border-radius: .6rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.adm-nav-menu a {
border-bottom: 0; margin-bottom: 0;
padding: .4rem .55rem; border-radius: .4rem;
}
.adm-nav-menu a:hover {
background: color-mix(in srgb, var(--accent) 9%, transparent); }
}
@media (max-width: 860px) {
.adm-nav nav { display: flex; flex-direction: column; gap: .1rem;
padding: .5rem 0; }
.adm-nav nav a, .adm-nav-tools > summary {
font-size: .84rem; color: var(--text-secondary);
padding: .28rem .55rem; border-left: 2px solid transparent;
border-radius: 0 .4rem .4rem 0;
}
.adm-nav nav a.active {
color: var(--text-primary); border-left-color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.adm-nav-tools > summary.active { color: var(--text-primary); }
.adm-nav-menu { display: flex; flex-direction: column; gap: .1rem;
padding-left: .8rem; }
}
/* Shared admin footer: the page close — two labeled groups reusing the
hub's sector-rail headers (.adm-group-h: mono eyebrow + hairline to
the edge) over auto-fit pill grids: the object browser (with
row-estimate badges on the big tables) and the operator tools. */
.adm-foot { margin-top: 3.25rem; }
.adm-foot-group { margin-top: 1.4rem; }
.adm-foot-group:first-child { margin-top: 0; }
.adm-foot-links {
display: grid; gap: .5rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
.adm-foot-pill {
display: flex; align-items: center; gap: .5rem;
min-height: 2.6rem; padding: .45rem .8rem;
font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
letter-spacing: .03em; text-decoration: none;
color: var(--text-secondary);
background: var(--surface-elevated);
border: 1px solid var(--border-subtle); border-radius: .6rem;
}
.adm-foot-pill:hover {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
}
.adm-foot-count {
margin-left: auto; color: var(--text-tertiary);
font-size: .88em; font-weight: 400;
}
/* Pricing page */
.pr-plan { display: flex; flex-direction: column; }
.pr-plan .lp-card-pad { display: flex; flex-direction: column; flex: 1; }
.pr-plan .pr-features { margin-bottom: 1rem; }
.pr-plan .lp-btn { margin-top: auto; align-self: flex-start; }
.pr-price { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 1rem; }
.pr-price b { font-size: 2rem; font-family: var(--font-mono); font-weight: 700;
color: var(--text-primary); }
.pr-save {
font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: #3fb950;
white-space: nowrap; display: inline-block;
border: 1px solid color-mix(in srgb, #3fb950 45%, transparent);
border-radius: 999px; padding: .2rem .55rem; margin-left: .5rem;
vertical-align: middle;
}
.pr-founder {
max-width: 34rem; margin: 1.2rem auto 0; padding: .8rem 1.1rem;
border: 1px dashed color-mix(in srgb, #e8a13a 60%, transparent);
border-radius: .8rem; color: var(--text-secondary); font-size: .95rem;
background: color-mix(in srgb, #e8a13a 7%, transparent);
}
.pr-founder strong { color: var(--text-primary); }
.pr-founder-count {
display: inline-block; font-family: var(--font-mono); font-size: .72rem;
font-weight: 700; color: #e8a13a; white-space: nowrap;
padding: .1rem .45rem; border-radius: .35rem;
background: color-mix(in srgb, #e8a13a 14%, transparent);
}
.pr-founder-badge {
display: inline-block; font-family: var(--font-mono); font-size: .6rem;
font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
padding: .22rem .5rem; border-radius: .35rem; line-height: 1;
color: #1a1205; background: linear-gradient(135deg, #f5c84b, #e8a13a);
margin-right: .5rem; vertical-align: middle;
}
.pr-price s { color: var(--text-tertiary); font-size: 1.1rem;
font-family: var(--font-mono); margin-right: .15rem; }
.pr-save-founder {
color: #e8a13a; border-color: color-mix(in srgb, #e8a13a 50%, transparent);
}
.pr-pro-card { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pr-features { list-style: none; margin: 0 0 .5rem; padding: 0; }
.pr-features li {
color: var(--text-secondary); font-size: .93rem; padding: .3rem 0 .3rem 1.6rem;
position: relative; text-wrap: pretty;
}
.pr-features li::before {
content: '✓'; position: absolute; left: .1rem; color: var(--accent);
font-weight: 700;
}
/* Plan comparison: a spec sheet in the timing voice. Group rows carry the
mono eyebrow, values are real words rather than a checkmark wall, and
the Pro column keeps the pro card's accent tint. */
.pr-compare-scroll { overflow-x: auto; }
.pr-compare { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .93rem; }
.pr-compare th, .pr-compare td { padding: .55rem 1rem; vertical-align: top; }
.pr-compare .pr-col { width: 11.5rem; text-align: center; }
.pr-compare thead th {
font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
padding-top: .95rem; padding-bottom: .75rem;
}
.pr-compare tbody td {
border-bottom: 1px solid var(--border-subtle);
color: var(--text-primary); text-wrap: pretty;
}
.pr-compare tbody td.pr-col {
color: var(--text-secondary); font-size: .88rem;
}
.pr-compare .pr-group td {
font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary);
padding: 1.2rem 1rem .35rem; border-bottom: none;
}
.pr-compare tbody tr:last-child td { border-bottom: none; }
.pr-yes { color: var(--accent); font-size: 1.05rem; line-height: 1; }
.pr-no { color: var(--text-tertiary); }
/* Small screens: no sideways scroll. Each feature stacks full-width with
the two plan values side by side beneath it, labeled inline (the
thead is hidden, so the labels ride on the cells). */
@media (max-width: 620px) {
.pr-compare { min-width: 0; }
.pr-compare thead { display: none; }
.pr-compare tbody tr {
display: grid; grid-template-columns: 1fr 1fr;
padding: .55rem .25rem;
border-bottom: 1px solid var(--border-subtle);
}
.pr-compare tbody tr:last-child { border-bottom: none; }
.pr-compare tbody td, .pr-compare tbody td.pr-col {
display: block; border-bottom: none; padding: .15rem .35rem;
width: auto;
}
.pr-compare tbody td:first-child { grid-column: 1 / -1; }
.pr-compare tbody td.pr-col { text-align: left; }
.pr-compare td.pr-col::before {
content: 'Standard'; display: block;
font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--text-tertiary); margin-bottom: .1rem;
}
.pr-compare td.pr-col:last-child::before { content: 'Pro'; }
.pr-compare .pr-group { border-bottom: none; }
.pr-compare .pr-group td { padding: 1rem .35rem .1rem; }
}
/* Pricing v3: open hero, two clean plan cards with ONE visually primary
plan (Pro: accent border, soft glow, Most popular flag, solid CTA),
huge mono price digits straight on the card, sentence-case microcopy.
Mono caps are reserved for kickers; no nested boxes, no tints. */
.prc-hero { padding: 1.2rem 0 .4rem; }
.prc-hero .lp-sub { font-size: 1.1rem; }
.prc-toggle {
display: inline-flex; margin-top: 1.4rem; padding: .3rem;
border: 1px solid var(--border-subtle); border-radius: 999px;
background: var(--surface-elevated);
}
.prc-toggle-btn {
display: inline-flex; align-items: center; gap: .45rem;
border: 0; background: transparent; color: var(--text-secondary);
font-size: .92rem; font-weight: 600; line-height: 1;
padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer;
transition: color .12s ease;
}
.prc-toggle-btn:hover { color: var(--text-primary); }
.prc-toggle-btn.active { background: var(--accent); color: #fff; }
.prc-toggle-save {
font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
padding: .22rem .5rem; border-radius: 999px;
background: rgba(63, 185, 80, .18); color: #3fb950;
}
.prc-toggle-btn.active .prc-toggle-save { background: rgba(255, 255, 255, .2); color: #fff; }
.prc-plans {
display: grid; grid-template-columns: 1fr; gap: 1.25rem;
max-width: 74rem; margin-inline: auto;
}
@media (min-width: 768px) {
.prc-plans { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
/* All three plans on one row at desktop — a 2-col grid orphaned the
'most popular' Pro card onto its own row below the fold */
@media (min-width: 1100px) {
.prc-plans { grid-template-columns: repeat(3, 1fr); }
}
.prc-plan {
position: relative; display: flex; flex-direction: column;
background: var(--surface-elevated);
border: 1px solid var(--border-subtle); border-radius: 1.1rem;
padding: 2rem 2rem 1.6rem;
}
.prc-featured {
border-color: color-mix(in srgb, var(--accent) 60%, transparent);
box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.prc-flag {
position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
color: #fff; background: var(--accent);
padding: .3rem .8rem; border-radius: 999px;
}
.prc-kicker {
font-family: var(--font-mono); font-size: .64rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--text-tertiary); margin: 0 0 .3rem;
}
.prc-featured .prc-kicker { color: var(--accent); }
.prc-name {
font-family: var(--font-display, inherit); font-weight: 700;
font-size: 1.45rem; margin: 0 0 1.1rem;
}
.prc-price { font-family: var(--font-mono); color: var(--text-secondary); line-height: 1; }
.prc-price b {
font-size: 3.1rem; font-weight: 700; color: var(--text-primary);
letter-spacing: -.03em;
}
.prc-price s { color: var(--text-tertiary); font-size: 1.25rem; margin-right: .4rem; }
.prc-per { font-size: 1rem; margin-left: .3rem; }
.prc-meta { color: var(--text-secondary); font-size: .92rem; margin: .55rem 0 0; }
.prc-who {
color: var(--text-primary); font-weight: 600; font-size: .98rem;
margin: 1.15rem 0 .5rem; padding-top: 1.1rem;
border-top: 1px solid var(--border-subtle);
}
.prc-plan .pr-features { margin-bottom: 1.4rem; }
.prc-plan .pr-features li { font-size: .95rem; padding-top: .38rem; padding-bottom: .38rem; }
.prc-cta {
display: block; width: 100%; text-align: center;
margin-top: auto; padding-top: .85rem; padding-bottom: .85rem;
}
.prc-trust {
margin: .75rem 0 0; text-align: center;
color: var(--text-tertiary); font-size: .82rem;
}
.prc-addon {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem 1.5rem; flex-wrap: wrap; padding: 1.4rem 1.6rem;
}
.prc-addon > div { flex: 1 1 24rem; min-width: 0; }
.prc-addon-price {
font-family: var(--font-mono); color: var(--text-secondary);
white-space: nowrap;
}
.prc-addon-price b {
font-size: 1.9rem; font-weight: 700; color: var(--text-primary);
}
.pr-faq { display: grid; gap: 1.1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pr-faq h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.pr-faq p { color: var(--text-secondary); font-size: .93rem; margin: 0; }
/* ── Account page: the signed-in driver's home base ─────────────────── */
.ac { max-width: 44rem; }
.ac-head {
display: flex; flex-wrap: wrap; justify-content: space-between;
align-items: flex-end; gap: 1rem 1.5rem; margin-bottom: 2rem;
}
.ac-name {
font-family: var(--font-display, inherit); font-weight: 800;
font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.05;
margin: .3rem 0 .45rem;
}
.ac-id {
display: inline-block; font-family: var(--font-mono); font-size: .72rem;
font-weight: 600; letter-spacing: .05em; color: var(--text-tertiary);
border: 1px solid var(--border-subtle); border-radius: .4rem;
padding: .25rem .55rem;
}
.ac-sub { color: var(--text-secondary); margin: -1.2rem 0 1.8rem; }
.ac-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.ac-card {
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
border-radius: .9rem; padding: 1.5rem 1.6rem;
}
.ac-card + .ac-card { margin-top: 1.25rem; }
.ac-card h2 {
font-family: var(--font-display, inherit); font-weight: 700;
font-size: 1.1rem; margin-bottom: 1rem;
}
.ac-card h2 .bi { color: var(--accent); }
.ac-hint { color: var(--text-secondary); font-size: .88rem; }
.ac-status { color: var(--text-secondary); }
.ac-status .bi { color: #3fb950; margin-right: .4rem; }
.ac-chip {
display: inline-block; font-family: var(--font-mono); font-size: .6rem;
font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-secondary); background: var(--surface-subtle);
border: 1px solid var(--border-subtle); border-radius: 999px;
padding: .22rem .55rem; vertical-align: middle;
}
.ac-chip-owner {
color: #1a1205; background: linear-gradient(135deg, #f5c84b, #e8a13a);
border-color: transparent;
}
.ac-choice {
display: flex; gap: .8rem; align-items: flex-start; cursor: pointer;
border: 1px solid var(--border-subtle); border-radius: .7rem;
padding: 1rem 1.1rem; margin-bottom: .8rem; transition: border-color .12s ease;
}
.ac-choice:hover { border-color: var(--text-tertiary); }
.ac-choice:has(input:checked) {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.ac-choice input { margin-top: .2rem; flex-shrink: 0; }
.ac-choice-sub {
display: block; color: var(--text-secondary); font-size: .88rem;
margin-top: .25rem;
}
.ac-leagues { display: flex; flex-direction: column; }
.ac-league-row {
display: flex; justify-content: space-between; align-items: center;
gap: 1rem; padding: .75rem .1rem;
border-bottom: 1px solid var(--border-subtle);
}
.ac-league-row:last-child { border-bottom: 0; padding-bottom: .1rem; }
.ac-league-row:first-child { padding-top: .1rem; }
.ac-league-name a {
font-family: var(--font-display, inherit); font-weight: 600;
font-size: 1.05rem; color: var(--text-primary); text-decoration: none;
margin-right: .5rem;
}
.ac-league-name a:hover { color: var(--accent); }
.ac-btn-sm { padding: .5rem .9rem; font-size: .66rem; }
.ac-email-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.ac-email-row .form-control { max-width: 20rem; }
/* Post-login email ask: the skip action stays deliberately quiet */
.ac-skip {
background: none; border: 0; padding: 0; cursor: pointer;
color: var(--text-tertiary); font-size: .85rem;
text-decoration: underline; text-underline-offset: 3px;
}
.ac-skip:hover { color: var(--text-secondary); }
.ac-discord {
display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
margin-top: 1.25rem; padding-top: 1.25rem;
border-top: 1px solid var(--border-subtle);
}
/* PRO badge: the paid-tier gold, used wherever bespoke work is surfaced */
.mg-pro {
display: inline-block; font-family: var(--font-mono); font-size: .58rem;
font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
padding: .18rem .45rem; border-radius: .35rem; line-height: 1;
color: #1a1205; background: linear-gradient(135deg, #f5c84b, #e8a13a);
vertical-align: middle; margin-left: .35rem;
transform: translateY(-1px);
}
.mg-plugin-link { text-decoration: none; color: var(--text-secondary); }
.mg-plugin-link:hover { color: var(--accent); }
/* Plugin entries share ONE type scale with the card's mg-help intro —
mixing card-title sizes and the public rules-list here read amateur */
.mg-plugin-name {
font-size: .95rem; font-weight: 700; color: var(--text-primary);
line-height: 1.55; margin: 0 0 .35rem;
}
.mg-plugin-name span {
font-weight: 400; font-size: .88rem; color: var(--text-tertiary);
}
.mg-plugin-notes { margin: 0; padding-left: 1.15rem; }
.mg-plugin-notes li {
color: var(--text-secondary); font-size: .9rem; line-height: 1.55;
}
.mg-plugin-notes li + li { margin-top: .3rem; }
.mg-plugin-notes li::marker { color: var(--text-tertiary); }
/* Fact strip: labeled values instead of a dot-separated run-on line */
.mg-facts { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; }
.mg-facts > span {
display: flex; flex-direction: column; gap: .15rem;
font-size: .88rem; color: var(--text-secondary); max-width: 22rem;
}
.mg-facts b {
font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--text-tertiary);
}
/* Seamless title edit: reads as a heading, edits like a field. The save
button only appears while editing. */
.mg-title-form { display: inline-flex; align-items: center; gap: .35rem; }
.mg-title-form input.form-control {
background: transparent; border-color: transparent;
font-weight: 700; font-size: 1.05rem; color: var(--text-primary);
padding: .15rem .45rem .15rem 0; box-shadow: none;
}
.mg-title-form input.form-control:hover {
border-color: var(--border-subtle); padding-left: .45rem;
}
.mg-title-form input.form-control:focus {
background: color-mix(in srgb, var(--text-primary) 5%, transparent);
border-color: var(--accent); padding-left: .45rem;
}
.mg-title-form .btn { visibility: hidden; }
.mg-title-form:focus-within .btn, .mg-title-form:hover .btn { visibility: visible; }
/* Card/section TITLES: real headings. (The mono eyebrow .mg-h below is
for labels above a heading — never for a card's own title.) */
.mg-card-h {
font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em;
color: var(--text-primary); margin-bottom: .65rem;
}
/* Card section headers in /manage: eyebrow style, not bold prose */
.mg-h {
font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: var(--text-tertiary); margin-bottom: .8rem;
}
/* 'Add championship' card: dashed like the other 'add one' tiles */
.mg-add-card {
border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
/* Scoring pages: readable helper text (not Bootstrap 'small' soup) and
mono micro-labels on builder fields, matching the public rules page. */
.mg-help { color: var(--text-secondary); font-size: .9rem; line-height: 1.55; }
#builder .form-label {
font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
letter-spacing: .13em; text-transform: uppercase;
color: var(--text-tertiary); margin-bottom: .3rem;
}
#builder .card-body { padding: 1.1rem 1.4rem 1.3rem; }
.mg-split-head {
display: flex; gap: .5rem; margin-bottom: .35rem;
font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
letter-spacing: .13em; text-transform: uppercase; color: var(--text-tertiary);
}
/* Single-table mode: the split-number column is meaningless — hide it
(input and header cell), leaving "Points from P1 down" as the label. */
#builder[data-pmode="single_table"] .table-row .tkey { display: none; }
#builder[data-pmode="single_table"] .mg-split-head .tkey-head { display: none; }
.mg-tb-ord {
display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
flex: 0 0 auto; font-family: var(--font-mono); font-size: .7rem;
font-weight: 700; color: var(--text-tertiary);
border: 1px solid var(--border-subtle); border-radius: .45rem;
}
/* Collapsed season history on the dashboard */
.mg-seasons-more summary {
font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--text-secondary); cursor: pointer;
padding: .5rem 0;
}
.mg-seasons-more summary:hover { color: var(--accent); }
/* ---- League landing + creation wizard ------------------------- */
.lp { padding: 1.2rem 0 3rem; }
.lp-hero { padding: 3rem 2.2rem 2.6rem; }
.lp-title {
font-family: var(--font-display, inherit); font-weight: 800;
font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.04;
letter-spacing: -.02em; margin: .35rem 0 .8rem;
}
.lp-sub { color: var(--text-secondary); font-size: 1.05rem; max-width: 34rem; }
.lp-tower {
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
border-radius: .9rem; padding: 1rem 1.1rem .7rem;
}
.lp-tower-head {
display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary);
margin-bottom: .55rem;
}
.lp-live { color: var(--accent); font-weight: 700; text-transform: uppercase;
letter-spacing: .14em; display: inline-flex; align-items: center; gap: .35rem; }
.lp-live .dot { width: .5em; height: .5em; border-radius: 50%;
background: currentColor; animation: lp-pulse 2s infinite; }
@keyframes lp-pulse { 50% { opacity: .35; } }
.lp-tower .timing tbody tr {
animation: lp-row .5s both; animation-delay: calc(var(--i) * 90ms);
}
@keyframes lp-row { from { opacity: 0; transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) {
.lp-tower .timing tbody tr { animation: none; }
.lp-live .dot { animation: none; }
}
.lp-tower-caption {
font-family: var(--font-mono); font-size: .68rem;
color: var(--text-tertiary); margin: .6rem 0 0;
}
/* Discord-chat mock for the bot page (/discord): same tower shell,
message rows instead of a timing table */
.dc-msg { display: flex; gap: .65rem; padding: .45rem 0; }
.dc-msg + .dc-msg { border-top: 1px solid var(--border-subtle); }
.dc-avatar {
flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
background: color-mix(in srgb, var(--accent) 18%, var(--surface-elevated));
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem;
}
.dc-body { min-width: 0; flex: 1; }
.dc-author {
font-size: .82rem; font-weight: 700; color: var(--text-primary);
display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
}
.dc-bot {
font-size: .58rem; font-weight: 700; letter-spacing: .06em;
background: var(--accent); color: #fff; border-radius: .25rem;
padding: .05rem .3rem; text-transform: uppercase;
}
.dc-time { font-family: var(--font-mono); font-size: .62rem;
font-weight: 400; color: var(--text-tertiary); }
.dc-embed {
margin-top: .35rem; padding: .55rem .75rem;
border-left: 3px solid var(--accent);
background: color-mix(in srgb, var(--surface-elevated) 55%, transparent);
border-radius: .35rem; font-size: .82rem; color: var(--text-secondary);
}
.dc-embed-title { font-weight: 700; color: var(--text-primary);
margin-bottom: .35rem; }
.dc-line { padding: .12rem 0; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.dc-line code { font-size: .72rem; }
.dc-line .lp-skel { margin-left: .15rem; }
.dc-link { color: var(--accent); text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dc-plain { margin-top: .25rem; font-size: .82rem;
color: var(--text-secondary); }
/* A rendered card image inside a mocked bot embed (Discord shows
attachments with soft corners under the embed text). */
.dc-card { display: block; width: 100%; height: auto;
border-radius: .45rem; margin: .3rem 0 .35rem; }
.dc-embed .dc-card + .dc-line { white-space: normal; }
/* /driver + /compare reply mock: slash-command reference line,
mini stat tiles and the head-to-head grid */
.dc-cmd { font-family: var(--font-mono); font-size: .62rem;
color: var(--text-tertiary); margin-bottom: .12rem; }
.dc-cmd b { color: var(--accent); font-weight: 600; }
.dc-statgrid { display: flex; gap: .45rem; flex-wrap: wrap;
margin: .15rem 0 .35rem; }
.dc-stat { flex: 1 1 0; min-width: 5.4rem; text-align: center;
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 1px solid var(--border-subtle); border-radius: .4rem;
padding: .35rem .3rem; }
.dc-stat b { display: block; font-size: .95rem; letter-spacing: -.01em;
color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dc-stat span { font-family: var(--font-mono); font-size: .58rem;
color: var(--text-tertiary); text-transform: uppercase;
letter-spacing: .08em; }
.dc-vs { display: grid; grid-template-columns: 1fr auto 1fr;
gap: .12rem .7rem; margin: .15rem 0 .35rem;
font-variant-numeric: tabular-nums; font-size: .82rem;
color: var(--text-secondary); }
.dc-vs-label { font-family: var(--font-mono); font-size: .58rem;
color: var(--text-tertiary); text-transform: uppercase;
letter-spacing: .08em; align-self: center; text-align: center; }
.dc-vs-a { text-align: right; }
.dc-vs-b { text-align: left; }
.dc-vs .win { color: var(--text-primary); font-weight: 700; }
/* Bot guide (/discord/guide): command reference rows */
.dg-cmd { display: flex; gap: 1.2rem; padding: .8rem 0; }
.dg-cmd + .dg-cmd { border-top: 1px solid var(--border-subtle); }
.dg-cmd-sig { flex: 0 0 15rem; min-width: 0; }
.dg-cmd-sig code { font-size: .85rem; word-break: break-word; }
.dg-cmd-desc { color: var(--text-secondary); font-size: .92rem; }
.dg-cmd-opts { margin-top: .3rem; display: flex; flex-direction: column;
gap: .15rem; font-size: .8rem; color: var(--text-tertiary); }
.dg-cmd-opts code { font-size: .75rem; }
@media (max-width: 640px) {
.dg-cmd { flex-direction: column; gap: .35rem; }
.dg-cmd-sig { flex-basis: auto; }
}
/* Help center (/help): documentation layout — sidebar of all guides,
article with on-this-page TOC and prev/next pager */
.hc { padding: 1.5rem 0 2rem; }
.hc-head { margin-bottom: 1.6rem; }
.hc-head h1 {
font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800;
letter-spacing: -.02em; margin: .35rem 0;
}
.hc-head p { max-width: 44rem; margin: 0; }
.hc-head .sep { opacity: .4; padding: 0 .25rem; }
.hc-layout {
display: grid; gap: 2.2rem;
grid-template-columns: 15rem minmax(0, 1fr);
align-items: start;
}
@media (max-width: 860px) {
.hc-layout { grid-template-columns: 1fr; gap: 1.2rem; }
}
/* Sidebar: so mobile gets a disclosure; desktop forces open
and hides the summary */
.hc-nav summary {
cursor: pointer; font-family: var(--font-mono); font-size: .72rem;
font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-secondary); padding: .5rem .65rem;
border: 1px solid var(--border-subtle); border-radius: .5rem;
list-style: none;
}
.hc-nav summary::-webkit-details-marker { display: none; }
@media (min-width: 861px) {
.hc-nav summary { display: none; }
.hc-nav { position: sticky; top: 1rem; }
}
.hc-nav nav { display: flex; flex-direction: column; gap: .1rem;
padding: .5rem 0; }
.hc-nav-h {
font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--text-tertiary); margin: .9rem 0 .25rem;
}
.hc-nav nav .hc-nav-h:first-child { margin-top: 0; }
.hc-nav nav a {
font-size: .84rem; color: var(--text-secondary); text-decoration: none;
padding: .28rem .55rem; border-left: 2px solid transparent;
border-radius: 0 .4rem .4rem 0;
}
.hc-nav nav a:hover { color: var(--text-primary); }
.hc-nav nav a.active {
color: var(--text-primary); border-left-color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, transparent);
}
/* Hub: one row per guide */
.hc-hub-group { margin-bottom: 1.8rem; }
.hc-hub-row {
display: block; text-decoration: none; padding: .65rem .8rem;
border: 1px solid var(--border-subtle); border-radius: .6rem;
margin-bottom: .5rem; background: var(--surface-elevated);
}
.hc-hub-row:hover { border-color: var(--accent); }
.hc-hub-title { display: block; font-weight: 700; color: var(--text-primary); }
.hc-hub-desc { display: block; font-size: .85rem; color: var(--text-secondary); }
/* On this page */
.hc-toc {
border: 1px solid var(--border-subtle); border-radius: .6rem;
padding: .8rem 1rem; margin-bottom: 1.2rem;
background: var(--surface-elevated);
}
.hc-toc .hc-nav-h { margin-top: 0; }
.hc-toc ul { list-style: none; margin: 0; padding: 0; }
.hc-toc ul ul { padding-left: .9rem; }
.hc-toc a {
display: block; font-size: .84rem; color: var(--text-secondary);
text-decoration: none; padding: .14rem 0;
}
.hc-toc a:hover { color: var(--accent); }
/* Pager */
.hc-pager {
display: flex; justify-content: space-between; gap: 1rem;
margin-top: 1.6rem;
}
.hc-pager-link {
text-decoration: none; color: var(--text-primary); font-weight: 600;
border: 1px solid var(--border-subtle); border-radius: .6rem;
padding: .6rem .9rem; background: var(--surface-elevated);
}
.hc-pager-link:hover { border-color: var(--accent); color: var(--text-primary); }
.hc-pager-link .hc-nav-h { display: block; margin: 0 0 .1rem; }
.hc-pager-next { text-align: right; margin-left: auto; }
.hc-article {
padding: 1.6rem 1.8rem; background: var(--surface-elevated);
border: 1px solid var(--border-subtle); border-radius: .9rem;
}
.hc-article h2 {
font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
margin: 1.6rem 0 .6rem;
}
.hc-article h2:first-child { margin-top: 0; }
.hc-article h3 { font-size: 1.05rem; font-weight: 700; margin: 1.2rem 0 .5rem; }
.hc-article p, .hc-article li { color: var(--text-secondary); font-size: .97rem; }
.hc-article ul, .hc-article ol { padding-left: 1.3rem; }
.hc-article li { margin-bottom: .35rem; }
.hc-article code {
background: color-mix(in srgb, var(--accent) 9%, transparent);
border-radius: .3rem; padding: .08rem .3rem; font-size: .85em;
}
.hc-article table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.hc-article th, .hc-article td {
border-bottom: 1px solid var(--border-subtle); padding: .45rem .5rem;
text-align: left; font-size: .92rem;
}
/* Platform admin (/admin): the metrics hub. Sector-rail group headers
(mono eyebrow + a hairline running to the edge, like lit sectors on a
pit board) over auto-fit tile bands — each group's tiles share the
row evenly on desktop and reflow to 2-up, then 1-up, on phones. */
.adm-group { margin-top: 2rem; }
.adm-group:first-of-type { margin-top: .4rem; }
.adm-group-head {
display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem;
}
.adm-group-head .adm-group-h { flex: 1; margin-bottom: 0; }
.adm-group-h {
display: flex; align-items: center; gap: .7rem;
font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--text-secondary); margin: 0 0 .55rem;
}
/* The rail: every group heading runs its hairline to the edge. */
.adm-group-h::after {
content: ''; flex: 1; border-top: 1px solid var(--border-subtle); }
.adm-group-link {
font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--text-tertiary); text-decoration: none;
padding: .45rem .5rem; margin: -.45rem -.5rem; /* bigger tap target */
white-space: nowrap;
}
.adm-group-link:hover { color: var(--accent); }
.adm-tiles {
display: grid; gap: .6rem;
/* auto-FILL (not -fit): ghost tracks stay, so a three-tile group keeps
compact uniform tiles on wide screens instead of stretching each
tile across the row. Every group gets the same tile width. */
grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
max-width: 100%;
}
/* Tile anatomy, timing-tower style: mono eyebrow label on top, big
Saira Condensed digits as the message, sparkline tucked along the
floor. DOM stays value-then-label (screen readers hear "1,234
Users"); the eyebrow moves up visually via flex order. */
.adm-tile {
position: relative;
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
border-radius: .6rem; padding: .6rem .8rem .55rem;
display: flex; flex-direction: column; min-width: 0;
}
.adm-tile b {
font-family: var(--font-display); font-weight: 600;
font-size: 2rem; line-height: 1.15;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
.adm-tile span {
order: -1;
font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--text-secondary); margin-bottom: .1rem;
}
/* Each group's first metric is the lead: senior digits plus the accent
sector bar down the left edge — the page's one accent moment. */
.adm-tile-lead b { font-size: 2.7rem; font-weight: 700; line-height: 1.05; }
.adm-tile-lead::before {
content: ''; position: absolute; left: -1px; top: .65rem; bottom: .65rem;
width: 3px; border-radius: 2px; background: var(--accent);
}
a.adm-tile { color: inherit; text-decoration: none; }
a.adm-tile:hover {
border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle)); }
/* The one status accent on the page: billing gone bad while the league
still runs. Amber + icon + label — never color alone. Darker amber on
the light surface so the big digits keep contrast. */
.adm-tile-warn { --adm-warn: #a16207; }
[data-bs-theme="dark"] .adm-tile-warn { --adm-warn: #d4a017; }
.adm-tile-warn,
a.adm-tile-warn:hover {
border-color: color-mix(in srgb, var(--adm-warn) 55%, var(--border-subtle)); }
.adm-tile-warn b, .adm-tile-warn span .bi { color: var(--adm-warn); }
/* Tile sparkline: quiet single-hue bars tucked along the tile floor so
the digits read first; hover a bar for its day's value (native
). margin-top:auto bottom-aligns it across the tile row. */
.adm-spark {
width: 100%; height: 18px; margin-top: auto; padding-top: .45rem;
fill: var(--accent); display: block;
}
.adm-spark rect { opacity: .35; }
.adm-tile:hover .adm-spark rect { opacity: .55; }
.adm-spark rect:hover { opacity: 1; }
/* Tappable admin rows: the whole row opens the object editor. */
tr.adm-row { cursor: pointer; }
tr.adm-row:hover td { background: var(--surface-elevated); }
/* Drill-down tables match the hub's readability treatment (.adm wraps
every admin page; league /manage tables keep their own tuning):
header rows speak the tile eyebrow's mono voice in secondary ink —
no 8px tertiary murk — numerals set tabular so columns land, and
each table's ONE key figure column wears the display face. */
.adm .timing thead th {
font-size: .66rem; letter-spacing: .12em;
color: var(--text-secondary); padding-bottom: .45rem;
}
.adm .timing tbody td { font-variant-numeric: tabular-nums; }
.adm .timing td.adm-key {
font-family: var(--font-display); font-weight: 600;
font-size: 1.12rem; color: var(--text-primary);
}
/* Sector-rail headings that navigate (object browser crumbs) stay in
the rail's ink until hovered. */
.adm-group-h a { color: inherit; text-decoration: none; }
.adm-group-h a:hover { color: var(--accent); }
/* One section cadence for the whole page — no per-section drift */
.lp > section:not(:first-child) { margin-top: 3.25rem; }
.lp-card {
height: 100%; background: var(--surface-elevated);
border: 1px solid var(--border-subtle); border-radius: .9rem;
padding: 1.3rem 1.35rem;
}
.lp-card p { color: var(--text-secondary); margin: 0; font-size: .95rem; }
.lp-card-h {
font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em;
color: var(--text-primary); margin-bottom: .55rem;
}
/* Steps as grid slots: the lamp row fills as the sequence advances
(1 lit -> 2 lit -> 3 lit), echoing the wizard's own lights stepper */
.lp-step-card {
height: 100%; background: var(--surface-elevated);
border: 1px solid var(--border-subtle); border-radius: .9rem;
padding: 1.25rem 1.3rem;
}
.lp-step-card p { color: var(--text-secondary); font-size: .92rem; margin: 0; }
.lp-step-card code { font-size: .85em; }
.lp-step-lamps { margin: 0 0 .85rem; gap: .45rem; }
.lp-step-lamps .wz-light { width: .8rem; height: .8rem; }
/* Final CTA: a contained band that bookends the hero — five lights on */
.lp-cta {
padding: 3rem 2rem 2.8rem;
background-image:
radial-gradient(60% 130% at 50% 0%,
color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%);
transition: background-image .6s ease;
}
.lp-cta-lights { justify-content: center; margin: 0 0 1.1rem; }
.lp-cta-lights .wz-light { width: .85rem; height: .85rem; }
/* Start procedure: when the band scrolls into view the lamps come on one
by one, hold, then go out TOGETHER — lights out on the create button.
JS drives armed -> lit -> go; without JS (or reduced motion) the band
stays in its static all-on state above. */
.lp-cta-armed .wz-light {
background: var(--surface-elevated); border-color: var(--border-subtle);
box-shadow: none;
transition: background .1s ease, border-color .1s ease, box-shadow .1s ease;
}
.lp-cta-lit .wz-light {
background: var(--accent); border-color: var(--accent);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 65%, transparent);
}
.lp-cta-lit .wz-light:nth-child(2) { transition-delay: .45s; }
.lp-cta-lit .wz-light:nth-child(3) { transition-delay: .9s; }
.lp-cta-lit .wz-light:nth-child(4) { transition-delay: 1.35s; }
.lp-cta-lit .wz-light:nth-child(5) { transition-delay: 1.8s; }
.lp-cta-go .wz-light:nth-child(n) {
background: var(--surface-elevated); border-color: var(--border-subtle);
box-shadow: none; transition-delay: 0s;
}
.lp-cta-go {
background-image:
radial-gradient(60% 130% at 50% 0%,
color-mix(in srgb, #22c55e 14%, transparent), transparent 72%);
}
/* Wizard: grid-lights stepper (five lights, fill as steps complete) */
.wz-lights { display: flex; gap: .55rem; margin: .4rem 0 1.6rem; }
.wz-light {
width: 2.4rem; height: .55rem; border-radius: 999px;
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
transition: background .2s ease, border-color .2s ease;
}
.wz-light.on { background: var(--accent); border-color: var(--accent); }
.wz-section { margin-bottom: 1.6rem; }
.wz-slug-status { font-family: var(--font-mono); font-size: .75rem; }
.wz-slots { display: flex; flex-wrap: wrap; gap: .45rem; }
.wz-slot { cursor: pointer; }
.wz-slot small { opacity: .75; margin-left: .35rem; }
.wz-source { display: flex; gap: .45rem; }
.wz-source-pill { cursor: pointer; }
.wz-source-pill input { display: none; }
.wz-source-pill:has(input:checked) {
background: var(--accent); border-color: var(--accent);
color: var(--accent-contrast, #fff);
}
.wz-preset { cursor: pointer; display: block; }
.wz-preset input { display: none; }
.wz-preset .lp-card { border-width: 2px; }
.wz-preset input:checked + .lp-card { border-color: var(--accent); }
/* League forms (wizard .lp + manage .mg): the site's voice, not stock
Bootstrap — mono eyebrow labels, surface-toned fields, accent focus. */
.lp .form-label, .mg .form-label {
font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--text-tertiary); margin-bottom: .45rem;
}
.lp .form-control, .lp .form-select,
.mg .form-control, .mg .form-select {
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
border: 1px solid var(--border-subtle); border-radius: .55rem;
color: var(--text-primary); padding: .55rem .8rem; font-size: .92rem;
transition: border-color .15s ease, box-shadow .15s ease;
}
.lp textarea.form-control, .mg textarea.form-control { line-height: 1.55; }
.lp .form-control:focus, .lp .form-select:focus,
.mg .form-control:focus, .mg .form-select:focus {
background: color-mix(in srgb, var(--text-primary) 6%, transparent);
border-color: var(--accent); color: var(--text-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
outline: none;
}
.lp .form-control::placeholder, .mg .form-control::placeholder {
color: var(--text-tertiary); opacity: .7;
}
/* Data-typed fields read as telemetry */
.mg input[type="number"], .mg input[type="time"] {
font-family: var(--font-mono); font-size: .88rem;
}
.mg .form-check-label { font-size: .9rem; color: var(--text-secondary); }
/* Per-field helper: ONE voice, always directly under its field. (Longer
page/section prose stays .mg-help; parentheticals inside mono labels are
banned — they end up shouting in uppercase.) */
.mg-hint {
color: var(--text-tertiary); font-size: .8rem; line-height: 1.55;
margin: .45rem 0 0;
}
/* The commit line: every form ends the same way — hairline rule, one
pit-board verb, a quiet escape, and the action's consequence stated
right where it's committed. */
.mg-actions {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
margin-top: 1.35rem; padding-top: 1rem;
border-top: 1px solid var(--border-subtle);
}
.mg-actions .mg-hint { margin: 0 0 0 auto; text-align: right; max-width: 24rem; }
@media (max-width: 575px) {
.mg-actions .mg-hint { margin-left: 0; text-align: left; }
}
.mg .alert-success { border-left-color: #3fb950; }
/* Empty states: a contained invitation to act, not a gray alert */
.mg-empty {
border: 1px dashed var(--border-subtle); border-radius: .8rem;
padding: 1.6rem 1.4rem; text-align: center;
color: var(--text-secondary); font-size: .92rem;
background: color-mix(in srgb, var(--text-primary) 2%, transparent);
}
/* Sub-page head (adjustments / edit rules / preview): a mono back link
over a real heading — the scoring drill-down reads as a hierarchy */
.mg-subhead { margin-bottom: .4rem; }
.mg-back {
display: inline-block; font-family: var(--font-mono); font-size: .66rem;
font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
color: var(--text-tertiary); text-decoration: none; margin-bottom: .35rem;
}
.mg-back:hover { color: var(--accent); }
.mg-subhead h2 {
font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: 0;
}
/* 'Make it yours' band on /leagues: three mini site mocks in different
liveries (one light) — the theming pitch shown, not described */
.lp-theme-band {
display: flex; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap;
padding: 1.9rem 1.9rem 1.7rem;
}
.lp-theme-copy { flex: 1 1 20rem; max-width: 34rem; }
.lp-theme-viz {
display: flex; gap: .9rem; flex: 1 1 18rem;
justify-content: flex-end; flex-wrap: wrap;
}
.lp-theme-chip {
width: 8.4rem; padding-bottom: .7rem; overflow: hidden;
border-radius: .6rem; border: 1px solid var(--border-subtle);
background: #10141b; color: #fff;
}
.lp-theme-chip.light {
background: #f6f7f9; border-color: rgba(20, 20, 20, .14); color: #000;
}
.lp-theme-hero {
display: block; height: 2.2rem;
background:
radial-gradient(130% 170% at 100% 0%,
color-mix(in srgb, var(--b) 60%, transparent), transparent 62%),
var(--a);
}
.lp-theme-row {
display: block; height: .45rem; border-radius: 999px;
margin: .55rem .65rem 0;
background: color-mix(in srgb, currentColor 16%, transparent);
}
.lp-theme-chip .lp-theme-row:first-of-type {
background: color-mix(in srgb, var(--a) 75%, currentColor 10%);
}
/* Powered-by upsell band on public league pages: quiet, one line,
hidden for the league's own staff */
.lg-upsell {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem;
padding: .85rem 1.1rem; border: 1px dashed var(--border-subtle);
border-radius: .8rem; background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.lg-upsell-copy { color: var(--text-tertiary); font-size: .85rem; }
.lg-upsell-btn { font-size: .68rem; padding: .55rem .9rem; white-space: nowrap; }
/* League sites: the irstats navbar yields on scroll (slides away going
down, returns on the first scroll up — league/base.html drives it) */
.nav-autohide { transition: transform .25s ease; }
.nav-autohide.nav-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .nav-autohide { transition: none; } }
/* Races page hierarchy: the track is the headline; winners read as
names one step down; dates and counts recede to quiet data */
.lg-races td.col-num { font-size: .82rem; }
.lg-races td.lg-winner-col {
font-family: var(--font-display); font-size: .95rem; font-weight: 600;
letter-spacing: .01em;
}
/* Races calendar: week chips + split sub-rows (one table per season) */
.lg-wk {
display: inline-block; font-family: var(--font-mono); font-size: .68rem;
font-weight: 700; letter-spacing: .04em; padding: .28rem .5rem;
border-radius: .45rem; color: var(--text-secondary);
background: color-mix(in srgb, var(--text-primary) 8%, transparent);
border-left: 2px solid color-mix(in srgb, var(--accent-2, var(--accent)) 65%, transparent);
}
.timing tr.lg-split-row td,
.timing tr.lg-split-row:hover td {
background: transparent; border-color: transparent;
}
.timing tr.lg-split-row:hover { transform: none; }
.lg-split-link {
font-family: var(--font-mono); font-size: .8rem; font-style: italic;
color: var(--text-tertiary) !important; font-weight: 400;
}
.lg-split-link:hover { color: var(--accent) !important; }
.timing .lg-winner-col a { color: var(--text-primary); text-decoration: none; }
.timing .lg-winner-col a:hover { color: var(--accent); }
/* Custom league logo (Pro) beside the hero title */
.lg-logo {
height: 64px; width: auto; max-width: 140px; object-fit: contain;
border-radius: .5rem; flex: 0 0 auto;
}
@media (max-width: 576px) { .lg-logo { height: 44px; } }
/* League outbound links (hero icon row on public league pages) */
.lg-links { display: flex; gap: .8rem; }
.lg-link { color: var(--text-tertiary); font-size: 1.05rem; text-decoration: none; }
.lg-link:hover { color: var(--accent); }
/* Homepage league callout */
.league-callout {
display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem;
margin: 1.1rem 0 0; padding: .8rem 1.1rem;
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
border-radius: .8rem; text-decoration: none; color: var(--text-secondary);
transition: border-color .15s ease;
}
.league-callout:hover { border-color: var(--accent); }
.league-callout-text { font-size: .88rem; }
.league-callout-cta {
font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
color: var(--accent); margin-left: auto; white-space: nowrap;
}
/* Rules & Scoring page */
/* Rules & Scoring: rule groups flow as a readable grid, points get their
own full-width band — a single left-clustered bullet ladder isn't
scannable on a wide page. */
.rl-grid {
display: grid; gap: 1.6rem 3rem;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.rl-h {
font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--text-tertiary); margin-bottom: .7rem;
}
.rl-text { color: var(--text-secondary); font-size: .95rem; line-height: 1.6; }
.rl-text-sub { color: var(--text-tertiary); font-size: .83rem; margin-bottom: .5rem; }
.rl-list { padding-left: 1.25rem; margin: 0; }
.rl-list li {
margin-bottom: .55rem; color: var(--text-secondary);
font-size: .95rem; line-height: 1.6;
}
.rl-list li::marker { color: var(--accent); }
.rl-list-lg li { font-size: 1rem; }
.rl-points-section {
margin-top: 1.8rem; padding-top: 1.4rem;
border-top: 1px solid var(--border-subtle);
}
.rl-points { display: flex; flex-wrap: wrap; gap: .4rem; }
.rl-pt {
font-family: var(--font-mono); font-size: .82rem;
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
border-radius: .5rem; padding: .3rem .6rem; white-space: nowrap;
}
.rl-pt b { color: var(--text-tertiary); font-weight: 600; margin-right: .4rem;
font-size: .68rem; letter-spacing: .04em; }
/* Championship battle chart (standings page) */
.lg-battle {
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
border-radius: .8rem; padding: .8rem .9rem .4rem; height: 248px;
display: flex; flex-direction: column;
}
.lg-battle canvas { width: 100% !important; flex: 1; min-height: 0; }
/* Positions/Points view toggle, shared by the chart card variants */
.lg-battle-toggle { align-self: flex-end; margin-bottom: .35rem; }
.lg-battle-toggle .btn {
font-size: .68rem; padding: .12rem .55rem; letter-spacing: .03em;
}
.mg-panel-head .lg-battle-toggle { align-self: center; margin-bottom: 0; }
/* Points grid heatmap: single-hue ramp, each cell vs its week's best.
Alpha caps at 42% so the numbers stay readable on both themes; the
sweep animation replays the season left to right on load. */
.timing tbody td.pts-heat {
background: color-mix(in srgb, #f59e0b calc(var(--heat, 0) * 42%),
var(--surface-elevated));
}
[data-bs-theme="dark"] .timing tbody td.pts-heat {
background: color-mix(in srgb, #d97706 calc(var(--heat, 0) * 42%),
var(--surface-elevated));
}
@media (prefers-reduced-motion: no-preference) {
.timing tbody td.pts-heat {
animation: pts-heat-in .45s ease-out both;
animation-delay: calc(var(--col, 0) * 55ms);
}
@keyframes pts-heat-in {
from { background-color: var(--surface-elevated); }
}
}
/* Standings table: rank movement chips. Fixed two-slot layout inside
the Pos cell (digits right, chip left) so rank numbers stay aligned
whether or not a row moved this week. */
.col-pos .rk-num {
display: inline-block; min-width: 1.5em; text-align: right;
}
.rk-move {
display: inline-block; width: 2em; text-align: left;
font-size: .62rem; font-weight: 700; letter-spacing: .02em;
margin-left: .25rem; vertical-align: 1px; white-space: nowrap;
}
.rk-up { color: #15803d; }
.rk-dn { color: #b91c1c; }
.rk-new { color: var(--text-tertiary); text-transform: uppercase;
font-size: .58rem; }
[data-bs-theme="dark"] .rk-up { color: #4ade80; }
[data-bs-theme="dark"] .rk-dn { color: #f87171; }
/* League directory cards on /leagues */
.lp-league-card {
display: block; height: 100%; padding: 1.1rem 1.2rem;
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
border-radius: .9rem; color: var(--text-primary); text-decoration: none;
transition: border-color .15s ease, transform .15s ease;
}
.lp-league-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text-primary); }
.lp-league-host {
font-family: var(--font-mono); font-size: .68rem; color: var(--accent);
white-space: nowrap;
}
.lp-league-top3 { margin-bottom: .5rem; }
.lp-league-top3 td { padding: .3rem .45rem; font-size: .78rem; }
.lp-league-cta {
font-family: var(--font-mono); font-size: .74rem; font-weight: 700;
color: var(--accent);
}
/* League browse table (/leagues/directory): a timing table over the
whole grid. The mono voice stays on numbers and hosts; the prose-like
detail cells (series, classes, championships, leaders) read in the
body sans so the rows don't turn into a wall of terminal text. */
.lg-dir .lg-row { cursor: pointer; }
.lg-dir td.col-driver { min-width: 12rem; }
.lg-dir td.col-driver a { color: var(--text-primary); text-decoration: none; }
.lg-dir td.col-driver a:hover { color: var(--accent); }
.lg-dir .lg-host {
display: block; font-family: var(--font-mono); font-size: .68rem;
font-weight: 400; color: var(--accent); letter-spacing: 0;
}
.lg-dir td.col-list {
white-space: normal; text-align: left;
font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: .84rem; color: var(--text-secondary); line-height: 1.5;
min-width: 9rem;
}
.lg-dir td.col-champs { min-width: 11rem; }
.lg-dir td.col-leader { min-width: 11rem; }
.lg-dir .lg-sub {
display: block; font-size: .72rem; color: var(--text-tertiary);
}
.lg-chip {
display: inline-block; font-size: .72rem; line-height: 1.3;
padding: .12rem .55rem; margin: .12rem .25rem .12rem 0;
border: 1px solid var(--border-subtle); border-radius: 999px;
color: var(--text-secondary); white-space: nowrap;
}
.lg-dir .lg-leader {
display: block; font-family: var(--font-display); font-weight: 600;
font-size: .95rem; color: var(--text-primary); line-height: 1.25;
}
.lg-dir .lg-leader .lg-sub {
font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 400;
}
.lg-dir .lg-leader + .lg-leader { margin-top: .45rem; }
/* the three scale columns huddle together instead of scattering */
.lg-dir td.col-num, .lg-dir th.col-num-h { padding-inline: .7rem; }
.lg-dir th.lg-sort { cursor: pointer; user-select: none; }
.lg-dir th.lg-sort:hover { color: var(--text-secondary); }
.lg-dir th.lg-sort[data-dir]::after {
content: ' ▴'; color: var(--accent); font-size: .85em;
}
.lg-dir th.lg-sort[data-dir="desc"]::after { content: ' ▾'; }
/* CTA row: same ghost treatment as the 'Your league' card */
.lg-dir .lg-cta-row td {
border-style: dashed;
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
background-image: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%);
}
.lg-dir .lg-cta-row a { color: var(--accent); font-weight: 700; }
/* Homepage leagues section (above featured series) */
.home-leagues { margin: 2.6rem 0 1rem; }
.home-leagues-title {
font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.9rem);
letter-spacing: -.01em; margin: .25rem 0 .4rem;
}
/* Fixed column grid for stacked per-week tables — every table shares the
same column positions instead of auto-sizing to its own content. */
.timing-fixed { table-layout: fixed; }
.timing-fixed th, .timing-fixed td { overflow: hidden; text-overflow: ellipsis; }
/* Landing CTAs in the site's own voice (mono pit-board), not stock pills */
.lp-btn {
display: inline-block; font-family: var(--font-mono); font-size: .78rem;
font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
padding: .78rem 1.3rem; border-radius: .55rem; text-decoration: none;
border: 1px solid transparent; transition: all .15s ease; line-height: 1;
}
.lp-btn-primary { background: var(--accent); color: #fff; }
.lp-btn-primary:hover { filter: brightness(1.12); color: #fff;
transform: translateY(-1px); }
.lp-btn-ghost { border-color: var(--border-subtle); color: var(--text-primary); }
.lp-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
/* Hero-grade CTA size for the main league entry points */
.lp-btn-lg { font-size: .88rem; padding: 1rem 1.8rem; border-radius: .65rem; }
/* 'Your league' tile: a ghost timing tower — same anatomy as the live
league cards (name row, meta line, top-3 table, CTA) so the grid
aligns, but the standings are placeholders waiting to be earned. */
.lp-league-card-new {
border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
background-image: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%);
}
.lp-league-card-new:hover { border-style: solid; }
.lp-league-card-new .lp-league-host small { color: var(--text-tertiary); }
.lp-ghost td .lp-skel { margin-left: 0; }
.lp-league-card-new .lp-btn {
display: block; text-align: center; margin-top: .15rem;
padding: .7rem 1rem;
}
/* Copy emphasis: bold key phrases pop out of secondary-colored prose */
.lp-card strong, .lp-sub strong, .home-leagues p strong {
color: var(--text-primary); font-weight: 700;
}
/* Wizard grid lights: five round lamps, not skeleton bars */
.wz-lights { gap: .7rem; margin: .6rem 0 1.9rem; }
.wz-light {
width: 1.15rem; height: 1.15rem; border-radius: 50%;
background: var(--surface-elevated); border: 1px solid var(--border-subtle);
}
.wz-light.on {
background: var(--accent); border-color: var(--accent);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 65%, transparent);
}
/* Rules-as-config showcase: an editor panel with real rulebooks.
JSON colors reuse the page's own data palette (accent keys, chart
green strings, chart amber numbers) — a timing screen, not an IDE. */
.lp-rules {
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: 1rem; padding: 1.6rem 1.75rem;
}
.lp-rules-head {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.lp-rules-tabs { display: flex; gap: .45rem; flex-wrap: wrap; }
.lp-rules-tab {
font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
padding: .55rem .95rem; border-radius: .55rem; line-height: 1;
background: transparent; border: 1px solid var(--border-subtle);
color: var(--text-secondary); transition: all .15s ease;
}
.lp-rules-tab:hover { border-color: var(--accent); color: var(--accent); }
.lp-rules-tab.active {
border-color: var(--accent); color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.lp-rules-panel {
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 1.6rem; align-items: stretch;
}
.lp-rules-panel[hidden] { display: none; }
/* The editor is dark in BOTH themes — it's a timing screen, and the
token colors are tuned for a dark ground. Fixed palette on purpose. */
.lp-json-wrap {
background: #0d1117; border: 1px solid rgba(255, 255, 255, .09);
border-radius: .9rem; overflow: hidden;
}
.lp-json-head {
display: flex; justify-content: space-between; gap: 1rem;
font-family: var(--font-mono); font-size: .68rem;
color: #7d8590; padding: .6rem 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.lp-json {
margin: 0; padding: 1rem 1.1rem; overflow: auto; max-height: 460px;
font-family: var(--font-mono); font-size: .8rem; line-height: 1.7;
color: #9da7b3;
}
.lp-json .jk { color: #58a6ff; }
.lp-json .js { color: #3fb950; }
.lp-json .jn { color: #f59e0b; }
.lp-json .jb { color: #a855f7; }
.lp-rules-notes {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; justify-content: space-evenly;
gap: .35rem;
}
.lp-rules-notes li {
color: var(--text-secondary); font-size: .92rem;
padding: .65rem 0 .65rem 1rem; border-left: 2px solid var(--border-subtle);
}
.lp-rules-notes li strong { color: var(--text-primary); }
.lp-rules-notes code {
font-size: .82em; color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-radius: .3rem; padding: .1rem .35rem;
}
/* Championship entry grid: each tile carries its one defining rule —
the row itself demonstrates 'same races, own rulebook'. */
.lp-champs {
margin-top: 1.7rem; padding-top: 1.4rem;
border-top: 1px solid var(--border-subtle);
}
.lp-champs-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 1rem; flex-wrap: wrap;
}
.lp-champs-legend {
font-family: var(--font-mono); font-size: .68rem;
color: var(--text-tertiary); display: inline-flex;
align-items: center; gap: .4rem;
}
.lp-champs-legend .dot {
width: .5em; height: .5em; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 65%, transparent);
}
.lp-champs-grid {
display: grid; gap: .6rem; margin-top: .9rem;
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}
.lp-champ {
border: 1px solid var(--border-subtle); border-radius: .7rem;
padding: .7rem .85rem; display: flex; flex-direction: column;
gap: .2rem; color: var(--text-primary); text-decoration: none;
background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.lp-champ b {
font-size: .92rem; display: inline-flex; align-items: center; gap: .45rem;
}
.lp-champ.live b::before {
content: ''; width: .5em; height: .5em; border-radius: 50%;
background: var(--accent); flex: none;
box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 65%, transparent);
}
.lp-champ span {
font-family: var(--font-mono); font-size: .67rem;
color: var(--text-tertiary); line-height: 1.4;
}
.lp-champ-new {
border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
transition: border-color .15s ease, background .15s ease;
}
.lp-champ-new b { color: var(--accent); }
.lp-champ-new:hover { border-style: solid; border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent); }
@media (max-width: 991px) {
.lp-rules-panel { grid-template-columns: 1fr; }
}
/* Marketing-surface surname redaction: a static block, deliberately
inert (no shimmer — motion reads as 'loading'). */
.lp-skel {
display: inline-block; height: .8em; border-radius: .25em;
vertical-align: baseline; margin-left: .1em;
background: color-mix(in srgb, var(--text-tertiary) 28%, transparent);
}
/* ---- Leagues marketing: graphical pass ------------------------- */
/* Wider canvas for the landing page */
main.lp-wide { max-width: min(1460px, 96%); }
/* Hero: accent wash behind the content + the five-lights motif */
.lp-hero {
background-image:
radial-gradient(55% 90% at 82% 8%,
color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
linear-gradient(115deg,
color-mix(in srgb, var(--accent) 7%, transparent), transparent 45%);
}
.lp-hero-lights { margin: 0 0 1rem; }
.lp-hero-lights .wz-light { width: .85rem; height: .85rem; }
.lp-hero-lights .wz-light:nth-child(1) { animation: lp-light 1s .0s both; }
.lp-hero-lights .wz-light:nth-child(2) { animation: lp-light 1s .18s both; }
.lp-hero-lights .wz-light:nth-child(3) { animation: lp-light 1s .36s both; }
.lp-hero-lights .wz-light:nth-child(4) { animation: lp-light 1s .54s both; }
.lp-hero-lights .wz-light:nth-child(5) { animation: lp-light 1s .72s both; }
@keyframes lp-light { from { background: var(--surface-elevated);
box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
.lp-hero-lights .wz-light { animation: none; } }
/* Steps strip: numbered lamps */
.lp-step b {
display: inline-flex; align-items: center; justify-content: center;
width: 1.5rem; height: 1.5rem; border-radius: 50%;
background: var(--accent); color: #fff; margin-right: .5rem;
}
/* Battle section: panel treatment */
.lp-battle-section {
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: 1rem; padding: 1.6rem 1.75rem;
}
/* Homepage league band: rides the lb-hero chrome (stripes + checkered
corner) so it reads as the site's own ad, not another list section */
.lb-hero.home-leagues .hl-founder {
position: absolute; top: 1.15rem; right: 1.4rem; z-index: 1;
font-size: .62rem; padding: .3rem .6rem;
}
/* When the band also shows the live league card on the right, keep the
absolute founder badge clear of the card's top edge */
.lb-hero.home-leagues:has(.hl-founder) .lp-league-card { margin-top: 1.1rem; }
@media (max-width: 767px) {
.lb-hero.home-leagues .hl-founder { position: static;
display: inline-block; margin-bottom: .5rem; }
}
.lb-hero.home-leagues {
position: relative;
margin: 2.6rem 0 1rem; padding: 1.9rem 1.75rem 1.75rem;
background-image:
radial-gradient(50% 100% at 85% 0%,
color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
}
.lb-hero.home-leagues .lp-league-card { background: color-mix(in srgb, var(--surface-elevated) 70%, transparent); }
/* EEA cookie-consent banner: small fixed card, hidden until the head
script decides the visitor is EU with no stored choice. Both buttons
equal size (accept must not outweigh decline). */
.consent-banner {
position: fixed; z-index: 1080; left: 1rem; bottom: 1rem;
max-width: 21rem; padding: .9rem 1rem;
background: var(--surface-elevated);
border: 1px solid var(--border-subtle); border-radius: .75rem;
box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.consent-banner .consent-text {
font-size: .84rem; color: var(--text-secondary); margin: 0 0 .65rem;
}
.consent-actions { display: flex; gap: .5rem; }
.consent-actions .lp-btn { flex: 1 1 0; }
@media (max-width: 576px) {
.consent-banner { left: .75rem; right: .75rem; max-width: none; }
}
/* Marketing Discord mock: show the top ~75% of the tall driver card,
fading into the card's own background (#0a0c14) so the crop reads as
a preview. Real replies and the bot guide show the full card. */
.dc-card-crop {
position: relative; aspect-ratio: 1200 / 756; overflow: hidden;
border-radius: .45rem; margin: .3rem 0 .35rem;
}
.dc-card-crop .dc-card { margin: 0; border-radius: 0; }
.dc-card-crop::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 3.5rem;
background: linear-gradient(to bottom, rgba(10, 12, 20, 0), #0a0c14);
}