/* ============================================================================= SQUADRA DESIGN SYSTEM Single source of truth for the platform's look & feel. Loaded after Bootstrap in every base template so it standardises typography, colour, buttons, cards, forms, tables and badges across all apps. White-label aware: every brand token falls back to the Squadra palette but defers to the per-club --club-* variables (set in includes/club_branding.html) when a club is themed, so clubs see their own colours with zero extra work. ============================================================================= */ /* ---- Web font (centralised so any page loading this file gets DM Sans) ---- */ @font-face { font-family: 'DM Sans'; src: url("/static/frontend/font/DMSans-Regular.ttf") format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url("/static/frontend/font/DMSans-Bold.ttf") format('truetype'); font-weight: 700; font-display: swap; } /* ---- Design tokens ---- */ :root { /* Brand palette — defers to club white-label vars, defaults to Squadra. The --club-on-* / --club-surface* tokens are DERIVED server-side by players/branding.py (emitted in includes/club_branding.html), not picked by the club. Each one is guaranteed legible on the surface it names, which is why surfaces and foregrounds are separate tokens here: a single --sq-ink applied to both a white card and a coloured button is what produced white-on-white for dark-themed clubs. Every app consumes these tokens, so they inherit the corrected values with no per-template work. */ --sq-primary: var(--club-primary, #f8fd57); --sq-primary-hover: var(--club-secondary, #e6f245); --sq-bg: var(--club-bg, #f1f1f1); --sq-surface: var(--club-surface, #ffffff); --sq-surface-2: var(--club-surface-2, #f8f9fa); --sq-border: var(--club-border, #cdcac8); --sq-border-soft: var(--club-border, #e7edf3); --sq-muted: var(--club-muted, #6c757d); --sq-font: var(--club-font, 'DM Sans', Arial, sans-serif); /* Foregrounds, one per surface. --sq-ink is text on a CARD (the dominant case, which is why it keeps the historical name); --sq-on-bg is text directly on the page. */ --sq-ink: var(--club-on-surface, #101518); --sq-on-bg: var(--club-on-bg, #101518); --sq-on-primary: var(--club-on-primary, #101518); --sq-on-secondary: var(--club-on-secondary, #101518); /* Inverted fill used by secondary buttons and outline hovers, plus its own foreground. Flips to a light fill on dark themes so it doesn't disappear. */ --sq-ink-fill: var(--club-ink-fill, #101518); --sq-on-ink: var(--club-on-ink, #f8fd57); /* The brand hue made legible as INK. --sq-primary is a fill and has no contrast duty; use --sq-accent for brand-coloured text, icons and active indicators. (Squadra's own yellow is 1.05:1 on its background — great as a button, invisible as an icon.) */ --sq-accent: var(--club-accent, #90953b); --sq-accent-on-surface: var(--club-accent-on-surface, #90953b); /* Border for brand-filled controls: normally the fill itself (so the edge is invisible, as designed), but a perceptible line when the fill can't be told apart from the card behind it. */ --sq-primary-edge: var(--club-primary-edge, #f8fd57); --sq-secondary-edge: var(--club-secondary-edge, #e6f245); /* Campaign / dark-canvas extension (brand layer — see marketing/BRAND_BOOK.md §3.2). Squadra-brand-only marketing surfaces; intentionally NOT white-label aware. */ --sq-ink-950: #0a0d0f; --sq-ink-800: #1a2126; --sq-steel: #8a959c; /* Semantic (kept separate from the brand accent) */ /* Foregrounds are tuned to clear WCAG AA (4.5:1) against their own -bg token, because alert and badge text is body-sized. Same hue, a shade deeper. Never override these with club colours: a brand palette must not be able to make an error look like a success. */ --sq-success: #1c7c52; --sq-success-bg: #e3f3eb; --sq-danger: #be3826; --sq-danger-bg: #f8e3df; --sq-warning: #966008; --sq-warning-bg: #f6edd9; --sq-info: #0c5b62; --sq-info-bg: #e1efee; /* Spacing scale */ --sq-1: 4px; --sq-2: 8px; --sq-3: 12px; --sq-4: 16px; --sq-5: 20px; --sq-6: 24px; --sq-8: 32px; --sq-10: 40px; /* Radius & elevation */ --sq-radius-sm: 0.5rem; --sq-radius: 0.75rem; --sq-radius-lg: 1rem; --sq-radius-pill: 50rem; --sq-shadow: 0 2px 16px rgba(0,0,0,0.07); --sq-shadow-hover: 0 8px 24px rgba(0,0,0,0.12); /* Bridge a few Bootstrap variables to the brand so default components match */ --bs-primary: var(--sq-primary); --bs-link-color: var(--sq-info); --bs-link-hover-color: var(--sq-ink); --bs-border-radius: var(--sq-radius); --bs-body-font-family: var(--sq-font); } /* ---- Base typography ---- Text directly on the page uses --sq-on-bg; text inside a card inherits --sq-ink from the card. Cards set their own colour below, so headings and copy inside them stay legible even when the page ground is dark. */ body { font-family: var(--sq-font); color: var(--sq-on-bg); background-color: var(--sq-bg); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--sq-font); color: inherit; font-weight: 700; line-height: 1.2; } a { color: var(--sq-info); } a:hover { color: inherit; } /* Standard page heading used across screens */ .page-title { color: var(--sq-ink); font-size: 1.5rem; font-weight: 700; margin: 0; } .page-subtitle { color: var(--sq-muted); font-size: 0.95rem; margin: 0.25rem 0 0; } /* Standard page header band: title on the left, actions on the right */ .sq-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sq-4); flex-wrap: wrap; border-radius: var(--sq-radius-lg); box-shadow: var(--sq-shadow); padding: var(--sq-5) var(--sq-6); margin-bottom: var(--sq-6); } .sq-page-header__actions { display: flex; gap: var(--sq-2); flex-wrap: wrap; } /* ---- Page header (legacy class, used by ~26 templates) ---- These templates were written expecting the DS to lay this out, but only .sq-page-header was ever defined — so .page-header fell back to display:block and the block-level

pushed the action buttons onto their own line. Unlike .sq-page-header this is a bare band (no card chrome), which is how the templates already use it. */ .page-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sq-3); margin-bottom: var(--sq-5); } /* Everything after the title is pushed to the trailing edge, so actions sit opposite it. A leading control (a back arrow) stays tucked against the title instead of being flung across the row, which is why this is an auto margin on the title rather than justify-content: space-between. The second selector covers headers that wrap the title with a subtitle or club badge. */ .page-header > .page-title, .page-header > *:has(> .page-title) { margin-right: auto; } .page-header > .page-title { min-width: 0; overflow-wrap: anywhere; } /* ---- Stat tiles ---- An "at a glance" strip for dashboards: the number answers how many, and the tile is a link to the screen that manages them. --attention marks something the operator should act on now (pending requests), so it reads as a task rather than a statistic. */ .sq-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sq-3); margin-bottom: var(--sq-6); } .sq-stat { display: flex; align-items: center; gap: var(--sq-3); padding: var(--sq-4); background: var(--sq-surface); color: var(--sq-ink); border-radius: var(--sq-radius); box-shadow: var(--sq-shadow); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .sq-stat:hover, .sq-stat:focus-visible { color: var(--sq-ink); transform: translateY(-2px); box-shadow: var(--sq-shadow-hover); } .sq-stat__icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--sq-radius-sm); background: var(--sq-surface-2); color: var(--sq-accent); } .sq-stat__body { min-width: 0; } .sq-stat__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; } .sq-stat__label { font-size: 0.75rem; font-weight: 600; color: var(--sq-muted); text-transform: uppercase; letter-spacing: 0.02em; overflow-wrap: anywhere; } .sq-stat--attention { box-shadow: inset 0 0 0 2px var(--sq-warning), var(--sq-shadow); } .sq-stat--attention .sq-stat__icon { background: var(--sq-warning-bg); color: var(--sq-warning); } .sq-stat--attention .sq-stat__value { color: var(--sq-warning); } /* Respect a reduced-motion preference for the lift/hover transforms above. */ @media (prefers-reduced-motion: reduce) { .sq-stat, .sq-card--interactive { transition: none; } .sq-stat:hover, .sq-stat:focus-visible, .sq-card--interactive:hover { transform: none; } } /* ---- Buttons ---- Loaded after Bootstrap, so these win at equal specificity without !important. Primary = the brand action (filled). Secondary/outline = lower emphasis. */ .btn { --bs-btn-border-radius: var(--sq-radius-sm); border-radius: var(--sq-radius-sm); font-weight: 600; padding: 0.55rem 1.15rem; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .btn:active { transform: translateY(0); } .btn-primary, .btn-success { background-color: var(--sq-primary); border-color: var(--sq-primary-edge); color: var(--sq-on-primary); } .btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus { background-color: var(--sq-primary-hover); border-color: var(--sq-secondary-edge); color: var(--sq-on-secondary); transform: translateY(-1px); } .btn-primary:disabled, .btn-success:disabled { background-color: var(--sq-primary); border-color: var(--sq-primary-edge); color: var(--sq-on-primary); opacity: 0.55; } .btn-secondary { background-color: var(--sq-ink-fill); border-color: var(--sq-ink-fill); color: var(--sq-on-ink); } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--sq-ink-fill); border-color: var(--sq-ink-fill); color: var(--sq-on-ink); filter: brightness(0.88); transform: translateY(-1px); } .btn-outline-primary { border: 1.5px solid var(--sq-ink-fill); color: var(--sq-ink); background: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--sq-ink-fill); border-color: var(--sq-ink-fill); color: var(--sq-on-ink); } .btn-danger { background-color: var(--sq-danger); border-color: var(--sq-danger); color: #fff; } .btn-danger:hover, .btn-danger:focus { filter: brightness(0.93); color: #fff; transform: translateY(-1px); } .btn-light, .btn-outline-secondary { border-radius: var(--sq-radius-sm); } /* Accessible focus ring (ink-based — visible on both light and yellow grounds) */ .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem rgba(16, 21, 24, 0.25); } /* ---- Cards & surfaces ---- A card sets BOTH its background and its foreground, so all descendant text inherits the ink that is legible on the card — not the ink for the page ground behind it. This is the single most important rule for white-label safety: it is what stopped dark-theme clubs rendering white-on-white. */ .card, .content-card, .sq-card, .sq-page-header, .modal-content, .dropdown-menu, .list-group-item { background: var(--sq-surface); color: var(--sq-ink); border-color: var(--sq-border); } .card, .content-card, .sq-card { border: none; border-radius: var(--sq-radius-lg); box-shadow: var(--sq-shadow); } .content-card, .sq-card { padding: var(--sq-6); margin-bottom: var(--sq-6); } .card-title, .sq-card__title { color: inherit; font-weight: 700; margin: 0; } /* A card header holds the section title plus its actions. Bootstrap's .card-header is display:block, so the actions dropped to a second line and every card spent ~40px of height on it — the same defect .page-header had. Scoped to .content-card so plain Bootstrap cards elsewhere are untouched. */ .content-card .card-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sq-3); } .content-card .card-header > .card-title, .content-card .card-header > *:has(> .card-title) { margin-right: auto; } .content-card .card-header > .card-title { min-width: 0; overflow-wrap: anywhere; } .sq-card--interactive { transition: transform 0.2s ease, box-shadow 0.2s ease; } .sq-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--sq-shadow-hover); } /* ---- Forms ---- */ .form-control, .form-select { border-radius: var(--sq-radius-sm); border-color: var(--sq-border); background-color: var(--sq-surface); color: var(--sq-ink); } .form-control::placeholder { color: var(--sq-muted); opacity: 1; } .form-control:focus, .form-select:focus { border-color: var(--sq-primary); background-color: var(--sq-surface); color: var(--sq-ink); box-shadow: 0 0 0 0.2rem rgba(16, 21, 24, 0.12); } .input-group-text { background-color: var(--sq-surface-2); border-color: var(--sq-border); color: var(--sq-ink); } .form-label { font-weight: 600; color: inherit; } .form-text, .text-muted { color: var(--sq-muted) !important; } /* ---- Tables ---- Bootstrap's striping uses a fixed dark rgba overlay, which is invisible on a dark card. Drive it from the ink instead so it works either way. */ .table { color: var(--sq-ink); --bs-table-color: var(--sq-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--sq-border); --bs-table-striped-color: var(--sq-ink); --bs-table-hover-color: var(--sq-ink); } .table > thead th { background: var(--sq-surface-2); border-bottom: 1px solid var(--sq-border); font-weight: 600; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--sq-muted); } .table > tbody td { vertical-align: middle; } /* ---- Responsive tables ---- The shell's sidebar is position:fixed, so if a wide table forces the PAGE itself to scroll horizontally (instead of scrolling inside its own wrapper), the part of the table that scrolls into the 0–260px band renders underneath the opaque sidebar and becomes permanently unreachable — that is the mechanism behind "buttons in the last column can't be clicked". The fix has two parts: the body must never be the thing that scrolls, and every ancestor between it and the table wrapper must be allowed to shrink (min-width: 0) instead of growing to the table's content width. */ html, body { overflow-x: hidden; max-width: 100%; } .main-content { min-width: 0; max-width: 100%; } .main-content .container, .main-content .container-fluid, .main-content .card, .main-content .card-body, .main-content .content-card, .main-content .sq-card, .main-content [class*="col-"] { min-width: 0; max-width: 100%; } /* .row is deliberately NOT clamped to 100%: Bootstrap rows are wider than their container by the negative gutter margins, and capping them pulls every column 24px in from the page header, so cards no longer line up with the header above them. Only the shrink fix applies here. */ .main-content .row { min-width: 0; } /* Bootstrap already gives .table-responsive overflow-x: auto; this layers on the touch-scroll momentum and a visible (but subtle) scrollbar so users on desktop — where OS scrollbars are often invisible until hover — get a hint that a table has more columns off-screen. */ .table-responsive { -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; } .table-responsive::-webkit-scrollbar { height: 8px; } .table-responsive::-webkit-scrollbar-track { background: var(--sq-surface-2); border-radius: var(--sq-radius-pill); } .table-responsive::-webkit-scrollbar-thumb { background: var(--sq-border); border-radius: var(--sq-radius-pill); } .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--sq-muted); } /* ---- Badges & status pills ---- */ .badge { border-radius: var(--sq-radius-pill); font-weight: 600; } .badge.bg-primary { background-color: var(--sq-primary) !important; color: var(--sq-on-primary); box-shadow: inset 0 0 0 1px var(--sq-primary-edge); } .sq-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: var(--sq-radius-pill); font-size: 0.78rem; font-weight: 600; line-height: 1.4; } .sq-pill--success { background: var(--sq-success-bg); color: var(--sq-success); } .sq-pill--danger { background: var(--sq-danger-bg); color: var(--sq-danger); } .sq-pill--warning { background: var(--sq-warning-bg); color: var(--sq-warning); } .sq-pill--info { background: var(--sq-info-bg); color: var(--sq-info); } .sq-pill--brand { background: var(--sq-primary); color: var(--sq-on-primary); box-shadow: inset 0 0 0 1px var(--sq-primary-edge); } /* ---- Alerts (brand-consistent) ---- */ .alert { border-radius: var(--sq-radius); border: none; } /* ---- Bootstrap light fills ---- Bootstrap pairs .badge with white text, which works on its dark fills and fails on its light ones: white on .bg-info (#0dcaf0) is 1.96:1 and on .bg-warning (#ffc107) is 1.63:1. These fills are fixed, so their ink is too. */ .badge.bg-info, .badge.bg-warning, .badge.bg-light, .bg-info, .bg-warning, .bg-light { color: #101518; } /* ---- Message region (includes/messages.html) ---- One region per page, at the top of the content area. Messages are the platform's answer to "did that work?", so they sit above the fold and read the same on every screen. Colours come from the semantic tokens rather than the club palette: a club's brand colour must never turn an error green. */ .sq-messages { display: flex; flex-direction: column; gap: var(--sq-2); margin: 0 0 var(--sq-4); } .sq-message { display: flex; align-items: flex-start; gap: var(--sq-3); margin-bottom: 0; padding: var(--sq-3) var(--sq-4); padding-right: var(--sq-10); box-shadow: var(--sq-shadow); } .sq-message__icon { margin-top: .15rem; flex: 0 0 auto; } .sq-message__text { min-width: 0; overflow-wrap: anywhere; } .sq-message .btn-close { padding: var(--sq-3); } /* Bootstrap's own alert palette, restated on the design tokens so alerts match the rest of the platform instead of Bootstrap's defaults. */ .alert-success { background: var(--sq-success-bg); color: var(--sq-success); } .alert-danger { background: var(--sq-danger-bg); color: var(--sq-danger); } .alert-warning { background: var(--sq-warning-bg); color: var(--sq-warning); } .alert-info { background: var(--sq-info-bg); color: var(--sq-info); } @media (prefers-reduced-motion: reduce) { .sq-message { transition: none !important; } } /* ---- Empty states ---- */ /* .empty-state is the older name for this block. Several templates still use it (includes/games_list.html among them) without defining it locally, so their icon fell back to body size and flush-left — noticeably smaller than every other section's. Aliasing the two keeps them identical. Templates that do define .empty-state locally still win, since their