@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/anton-latin.woff2") format("woff2"); } @font-face { font-family: "Teko"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/teko-latin.woff2") format("woff2"); } /* Brand tokens. --bulma-scheme-h/-s stays neutral (0% saturation) — it feeds the navbar, .box/cards, and every other Bulma surface (they all read --bulma-scheme-main/-bis/-ter, see the `body` rule below for why that's a problem for a *page-background-only* tint), so keeping it at 0% keeps that chrome plain grey. The actual "very subtle hue" lives only on the `body` background (--liga-body-tint-h/-s, applied directly to `body` further down) — everything else stays neutral. Lightness ladder is our own, shifted in from Bulma's defaults in both directions: light backgrounds were near-pure-white (100/98/96), dark backgrounds were near-black (9/11/13) — both pulled a step toward the middle so neither is as harsh. Declared three times on purpose, same values each time: here (the light default), in the dark media query right below (the dark default), and in the explicit [data-theme] overrides further down (which win via attribute specificity once static/theme-toggle.js sets one) — that's how Bulma's own light/dark switching is structured, we're just changing the numbers. */ :root { --bulma-scheme-h: 50; --bulma-scheme-s: 0%; --liga-body-tint-h: 50; --liga-body-tint-s: 16%; --bulma-primary-h: 24deg; --bulma-primary-s: 62%; --bulma-link-h: 24deg; --bulma-link-s: 62%; --bulma-success-h: 148deg; --bulma-success-s: 32%; --bulma-warning-h: 42deg; --bulma-warning-s: 78%; --bulma-danger-h: 350deg; --bulma-danger-s: 52%; --liga-display: "Anton", var(--bulma-family-sans-serif); --liga-condensed: "Teko", var(--bulma-family-sans-serif); --bulma-scheme-main-l: 96%; --bulma-scheme-main-bis-l: 93%; --bulma-scheme-main-ter-l: 90%; --bulma-soft-l: 88%; --bulma-background-l: 91%; --bulma-border-weak-l: 89%; --bulma-border-l: 82%; } @media (prefers-color-scheme: dark) { :root { --bulma-scheme-main-l: 13%; --bulma-scheme-main-bis-l: 16%; --bulma-scheme-main-ter-l: 19%; --bulma-soft-l: 23%; --bulma-background-l: 19%; --bulma-border-weak-l: 25%; --bulma-border-l: 28%; /* Bulma's own dark-mode default is a pure white shadow (0deg 0% 100%) — at low opacity against a dark surface that reads as a faint glow, not a shadow. Reuse the same dark, subtle navy-black Bulma already uses for light mode instead, so cards actually look like they cast a shadow in both themes. */ --bulma-shadow-h: 221deg; --bulma-shadow-s: 14%; --bulma-shadow-l: 4%; } } /* Explicit light/dark override, set as `data-theme` on by static/theme-toggle.js once the user picks a theme (until then, the media query above decides). The attribute selector's higher specificity is what makes it win over the media query in both directions — light must be spelled out too, in case the OS prefers dark but the user picked light. */ :root[data-theme="dark"] { --bulma-scheme-brightness: dark; --bulma-scheme-main-l: 13%; --bulma-scheme-main-bis-l: 16%; --bulma-scheme-main-ter-l: 19%; --bulma-soft-l: 23%; --bulma-bold-l: 90%; --bulma-soft-invert-l: 90%; --bulma-bold-invert-l: 20%; --bulma-background-l: 19%; --bulma-border-weak-l: 25%; --bulma-border-l: 28%; --bulma-shadow-h: 221deg; --bulma-shadow-s: 14%; --bulma-shadow-l: 4%; --bulma-text-weak-l: 53%; --bulma-text-l: 71%; --bulma-text-strong-l: 93%; --bulma-text-title-l: 100%; --bulma-hover-background-l-delta: 5%; --bulma-active-background-l-delta: 10%; --bulma-hover-border-l-delta: 10%; --bulma-active-border-l-delta: 20%; --bulma-hover-color-l-delta: 5%; --bulma-active-color-l-delta: 10%; } :root[data-theme="light"] { --bulma-scheme-brightness: light; --bulma-scheme-main-l: 96%; --bulma-scheme-main-bis-l: 93%; --bulma-scheme-main-ter-l: 90%; --bulma-soft-l: 88%; --bulma-bold-l: 20%; --bulma-soft-invert-l: 20%; --bulma-bold-invert-l: 90%; --bulma-background-l: 91%; --bulma-border-weak-l: 89%; --bulma-border-l: 82%; --bulma-text-weak-l: 48%; --bulma-text-l: 29%; --bulma-text-strong-l: 21%; --bulma-text-title-l: 14%; --bulma-hover-background-l-delta: -5%; --bulma-active-background-l-delta: -10%; --bulma-hover-border-l-delta: -10%; --bulma-active-border-l-delta: -20%; --bulma-hover-color-l-delta: -5%; --bulma-active-color-l-delta: -10%; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* The one place the subtle hue actually shows — navbar, .box/cards, and other surfaces sit on top of this at --bulma-scheme-main-l too (via Bulma's own --bulma-navbar-background-color/--bulma-box-background-color, both `var(--bulma-scheme-main)`) but stay neutral since that variable's hue/saturation are 0% (see the brand tokens above) — only this rule reaches for the tinted hue/saturation pair directly. */ body { font-variant-numeric: tabular-nums; background-color: hsl(var(--liga-body-tint-h), var(--liga-body-tint-s), var(--bulma-scheme-main-l)); } main { display: block; } /* ---------- navbar icon controls ---------- Non-primary navbar actions (theme, admin mode, my team, account, log out) are icon-only buttons with a tooltip/aria-label rather than text, to keep the bar from sprawling as more controls get added. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.6rem; } .icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex-shrink: 0; } /* Sun/moon swap with the active theme — media query mirrors the default (no stored preference yet), the [data-theme] attribute (set by static/theme-toggle.js) overrides it once the user picks one, same precedence as the color tokens above. */ .icon-moon { display: none; } @media (prefers-color-scheme: dark) { .icon-sun { display: none; } .icon-moon { display: inline; } } :root[data-theme="dark"] .icon-sun { display: none; } :root[data-theme="dark"] .icon-moon { display: inline; } :root[data-theme="light"] .icon-sun { display: inline; } :root[data-theme="light"] .icon-moon { display: none; } .brand-wordmark { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--liga-display); font-size: 1.5rem; letter-spacing: 0.04em; color: var(--bulma-primary-on-scheme) !important; } .brand-mark { flex: 0 0 auto; } /* ---------- team logos: an uploaded image, or a colored initials mark (the `background` value — a solid hash-of-name color, or a gradient of the team's own color scheme — is computed server-side and set inline) */ .team-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; color: #fff; font-family: var(--liga-condensed); font-weight: 600; font-size: 1.7rem; letter-spacing: 0.02em; vertical-align: middle; margin-inline: 0.8rem; } .team-badge--sm { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; margin-inline-end: 0.5rem; margin-inline-start: 0; } .team-badge--lg { width: 8rem; height: 8rem; font-size: 3.2rem; margin-inline: 0 1rem; } .matchday-header { background: var(--bulma-scheme-main-bis); border-bottom: 1px solid var(--bulma-border-weak); padding-block: 2rem; } .eyebrow { font-family: var(--liga-condensed); text-transform: uppercase; letter-spacing: 0.12em; color: var(--bulma-text-weak); margin-bottom: 0; font-size: 1.05rem; } .round-number { font-family: var(--liga-display); font-size: clamp(2.1rem, 9vw, 3.4rem); line-height: 1; color: var(--bulma-text-strong); margin: 0.1rem 0 1rem; } .section-heading { display: flex; align-items: center; font-family: var(--liga-condensed); text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.3rem; color: var(--bulma-text-strong); margin-bottom: 1rem; } /* Without `min-width: 0`, a flex item's minimum size defaults to its content's, so a long team name refuses to wrap and instead forces the row wider than its container — the badge (fixed-size, `flex: 0 0 auto`) gets squeezed and the name ends up overflowing above/behind it instead of wrapping onto a second line next to it. */ .section-heading-title { flex: 1 1 auto; min-width: 0; } .team-summary .summary-label { font-family: var(--liga-condensed); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--bulma-text-weak); margin-bottom: 0.1rem; } .team-summary .summary-value { font-family: var(--liga-display); font-size: 1.4rem; color: var(--bulma-text-strong); } .auth-box { max-width: 26rem; margin-inline: auto; } /* ---------- fixture cards ---------- */ .fixture-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1rem; } .fixture-card { margin-bottom: 0; } .fixture-card--active { border: 1px solid var(--bulma-primary); background: color-mix(in srgb, var(--bulma-primary) 6%, var(--bulma-scheme-main)); } /* Each side's own chosen colors (or their name-derived fallback) as a two-tone strip — two independent elements rather than one shared gradient, since a team's own `background` can itself already be a gradient (a 2- or 3-color scheme) and gradients can't nest as a single color stop. Sits between the card's body (teams/score) and its footer (Confirmed/Pending tags), doubling as the separator between them — .fixture-footer has no border of its own because of that. */ .fixture-swatch { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin-block: 0.85rem 0.6rem; } .fixture-swatch-half { flex: 1 1 0; } .fixture-teams { display: flex; align-items: center; gap: 0.75rem; } .fixture-teams .team-name { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 0; min-width: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.25; } .fixture-teams .team-name.has-text-right { text-align: right; justify-content: flex-end; } /* Badge and name were sharing one span's ordinary inline flow (image floats inline, text wraps around it) — fine for a short name, but a longer one could end up overlapping/behind the badge instead of wrapping cleanly beside it. Making `.team-name` itself a flex row and giving the name its own shrinkable/wrappable box (`min-width: 0`, without which a flex item's minimum width defaults to its content's, refusing to wrap) fixes that the same way `.section-heading-title` does for the team page header. */ .team-name-text { flex: 1 1 auto; min-width: 0; } .fixture-score { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; min-width: 5.5rem; } .fixture-score .score-line { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--liga-display); font-size: 1.7rem; color: var(--bulma-text-strong); } .fixture-score .score-sep { color: var(--bulma-text-weak); font-family: var(--liga-display); font-size: 1.4rem; } .fixture-score .score-cas { font-family: var(--liga-condensed); font-size: 0.85rem; letter-spacing: 0.03em; color: var(--bulma-text-weak); text-transform: uppercase; white-space: nowrap; } .score-pending { font-family: var(--liga-condensed); text-transform: uppercase; letter-spacing: 0.1em; color: var(--bulma-text-weak); font-size: 1.1rem; } .report-note { font-size: 0.85rem; color: var(--bulma-text-weak); font-style: italic; margin-top: 0.5rem; } .fixture-footer { display: flex; justify-content: space-between; align-items: center; } .report-form .field.is-grouped { row-gap: 0.5rem; } /* Admin-only inline "settle a match" disclosure on the matches list — a native
element needs no JS to expand/collapse. */ .settle-disclosure { margin-top: 0.6rem; } .settle-summary { display: inline-block; cursor: pointer; font-size: 0.8rem; color: var(--bulma-text-weak); list-style: none; } .settle-summary::-webkit-details-marker { display: none; } .settle-summary::after { content: "\25B8"; margin-inline-start: 0.3rem; } .settle-disclosure[open] .settle-summary::after { content: "\25BE"; } .settle-summary:hover { color: var(--bulma-danger); } /* ---------- TD/CAS picker (see static/stat-picker.js) ---------- Each icon is two layers: `.stat-icon-fill` is the shape that changes color with state (currentColor), `.stat-icon-detail` (the football's laces) is stroked in a fixed color tied to the page background, so detail lines always read as a groove instead of blending into the fill once it goes solid. */ .stat-picker { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; min-height: 2.25rem; } .stat-picker-icons { display: flex; gap: 0.1rem; } .stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0.3rem; border: none; background: none; color: var(--bulma-border); cursor: pointer; } .stat-icon-glyph { width: 100%; height: 100%; } .stat-icon-fill { fill: currentColor; } .stat-icon-detail { fill: none; stroke: var(--bulma-scheme-main); stroke-width: 1.3; stroke-linecap: round; } .stat-picker.is-td .stat-icon.is-on { color: var(--bulma-primary); } .stat-picker.is-cas .stat-icon.is-on { color: var(--bulma-danger); } .stat-picker-add { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px dashed var(--bulma-border); background: none; color: var(--bulma-text-weak); font-size: 1.1rem; line-height: 1; cursor: pointer; } .stat-picker.is-td .stat-picker-add:hover { border-color: var(--bulma-primary); color: var(--bulma-primary); } .stat-picker.is-cas .stat-picker-add:hover { border-color: var(--bulma-danger); color: var(--bulma-danger); } .report-form .control { min-width: 6.5rem; } /* ---------- standings ---------- */ .table-container { overflow-x: auto; } .standings-table th { font-family: var(--liga-condensed); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--bulma-text-weak); white-space: nowrap; } .standings-table td.is-pts { font-weight: 700; } .standings-table tr.is-backup-row { color: var(--bulma-text-weak); font-style: italic; } .standings-table tr.is-backup-row td.is-pts { font-weight: 400; } /* ---------- calendar ---------- */ .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; background: var(--bulma-border-weak); border: 1px solid var(--bulma-border-weak); border-radius: 8px; overflow: hidden; } .calendar-weekday-label { padding: 0.5rem 0.4rem; background: var(--bulma-scheme-main-bis); font-family: var(--liga-condensed); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: var(--bulma-text-weak); text-align: center; } /* Cells are deliberately subtle by default — a plain weekday square barely registers. Weekends nudge one step brighter; a scheduled game is the only thing that should really draw the eye. */ .calendar-cell { min-width: 0; min-height: 4.5rem; padding: 0.35rem; background: var(--bulma-scheme-main-bis); display: flex; flex-direction: column; gap: 0.25rem; overflow: hidden; } .calendar-cell--weekend { background: var(--bulma-scheme-main-ter); } .calendar-cell--pad { background: var(--bulma-scheme-main); opacity: 0.5; } .calendar-cell--has-games { background: var(--bulma-primary-soft, var(--bulma-scheme-main-ter)); background: color-mix(in srgb, var(--bulma-primary) 10%, var(--bulma-scheme-main)); box-shadow: inset 0 0 0 1px var(--bulma-primary); } .calendar-cell--today .calendar-day-number { color: var(--bulma-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; } .calendar-day-number { font-family: var(--liga-condensed); font-size: 0.85rem; color: var(--bulma-text-weak); } .calendar-day-matches { display: flex; flex-direction: column; gap: 0.2rem; list-style: none; } .calendar-match-link { display: block; font-size: 0.72rem; line-height: 1.2; color: var(--bulma-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calendar-match-link.is-confirmed { color: var(--bulma-text-weak); text-decoration: line-through; } .calendar-round-placeholder { display: block; color: var(--bulma-text-weak); font-style: italic; } .calendar-match-link .tag { padding: 0 0.3em; height: auto; font-size: 0.6rem; vertical-align: middle; } .calendar-month-list { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; } .calendar-month-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--bulma-border-weak); } .calendar-month-list li:last-child { border-bottom: none; } .calendar-month-list-date { font-family: var(--liga-condensed); font-size: 0.85rem; color: var(--bulma-text-weak); min-width: 6rem; } .calendar-month-list-link { font-weight: 600; color: var(--bulma-text-strong); } .calendar-month-list-link.is-confirmed { font-weight: 400; color: var(--bulma-text-weak); text-decoration: line-through; } :focus-visible { outline: 2px solid var(--bulma-link); outline-offset: 2px; } /* ---------- smartphone layout ---------- */ @media screen and (max-width: 480px) { .section { padding: 1.75rem 1rem; } .matchday-header { padding-block: 1.5rem; } /* Stack each fixture card top-to-bottom instead of a cramped 3-up row — but keep the same left/right split as desktop (home left, away right, via .has-text-right) rather than centering everything, so it still reads as "these two teams" instead of three centered, disconnected lines. align-items: stretch (overriding the row layout's own `center`) is what lets each team-name's own text-align actually reach the card's full width instead of hugging the middle. */ .fixture-teams { flex-direction: column; align-items: stretch; gap: 0.35rem; } .fixture-score { order: 2; } /* The "vs" placeholder earns its keep in the single-row desktop layout as a visual midpoint; stacked on mobile it's just a lone centered word between two already-legible rows, so it's dropped — an actual score still shows once the match is confirmed. */ .fixture-score .score-pending { display: none; } /* One full-width input per row is far easier to tap than a cramped grid. */ .report-form .field.is-grouped { flex-direction: column; } .report-form .control { min-width: 0; width: 100%; } .standings-table th, .standings-table td { padding: 0.4em 0.5em; font-size: 0.85rem; } .calendar-weekday-label { font-size: 0.65rem; padding: 0.4rem 0.15rem; } .calendar-cell { min-height: 3.5rem; padding: 0.2rem; } .calendar-day-number { font-size: 0.75rem; } .calendar-match-link { font-size: 0.62rem; } }