/* ============================================================================
RallyText "Scoreboard" Design System — single source of truth
----------------------------------------------------------------------------
Consolidated token + component layer for every app surface (coach dashboard,
platform admin, finance, auth, utility pages) and the shared marketing chrome.
Usage:
Plus the font in each page (CSP allows fonts.googleapis.com):
Theme: dark is the default (:root). Light is opt-in via html[data-theme="light"].
The theme engine lives in /static/theme.js (localStorage key 'rt-theme').
Conventions:
- All component classes are namespaced `sb-` so they coexist with the
legacy dashboard/admin classes during the incremental migration.
- Numerals, labels, money, counts, dates, phones, table headers use the
mono face (.sb-mono / var(--sb-font-mono)) — the Scoreboard signature.
Decision log: see design/DESIGN_SYSTEM.md
========================================================================== */
/* ----------------------------------------------------------------------------
1. TOKENS — Color (Dark, default)
-------------------------------------------------------------------------- */
:root {
--bg: #0b0e15; /* App background */
--panel: #111521; /* Sidebar, top bar */
--card: #151b2a; /* Cards, tables, inputs */
--card2: #1d2536; /* Subtle fills, avatars, toolbar chips */
--border: #283044; /* Card / structural borders */
--line: #1f2738; /* Row dividers inside cards */
--text: #eef1f7; /* Primary text */
--text2: #aeb7c9; /* Secondary text */
--muted: #717c91; /* Tertiary / captions */
--accent: #ff6a1f; /* RallyText orange — primary actions, active nav */
--accent-soft: rgba(255,106,31,.15); /* Accent tint backgrounds */
--accent-ink: #0b0e15; /* Text/icon ON accent fills */
--good: #34d399; /* Success / verified / going */
--warn: #fbbf3d; /* Pending / attention */
--bad: #f4624a; /* Error / past due / out */
--info: #48a3ff; /* Neutral status / trialing */
--card-shadow: 0 1px 2px rgba(0,0,0,.32);
/* ---- Shape & spacing (theme-independent) ---- */
--r-card: 10px; /* cards, containers */
--r-ctl: 8px; /* inputs, buttons, nav items, small chips */
--r-pill: 6px; /* badges / pills */
--r-bezel: 28px; /* phone bezel */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
--sidebar-w: 240px;
--topbar-h: 58px;
--page-max: 1280px;
/* ---- Type ---- */
--sb-font: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--sb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--ease: cubic-bezier(.4,0,.2,1);
}
/* ----------------------------------------------------------------------------
1b. TOKENS — Color (Light)
-------------------------------------------------------------------------- */
html[data-theme="light"] {
--bg: #f2f5fb;
--panel: #ffffff;
--card: #ffffff;
--card2: #f5f8fd;
--border: #e3e8f1;
--line: #eef1f8;
--text: #131826;
--text2: #4a5366;
--muted: #7a8499;
--accent: #ee5719;
--accent-soft: rgba(238,87,25,.10);
--accent-ink: #ffffff;
--good: #16a34a;
--warn: #b07f18;
--bad: #dc4636;
--info: #2b7fd6;
--card-shadow: 0 1px 2px rgba(20,30,60,.07);
}
/* ----------------------------------------------------------------------------
1c. LEGACY TOKEN BRIDGE
----------------------------------------------------------------------------
The pre-Scoreboard surfaces (dashboard.html, admin.html, admin_finance.html,
profile.html, marketing pages) each declared their own :root palette using
these names, referenced via var(--x) throughout inline styles AND inside
HTML-in-JS render strings. Aliasing them to the new semantic tokens means a
surface can drop its local :root block, link this stylesheet, and instantly
adopt the Scoreboard palette with ZERO var() reference changes. Because each
alias points at a semantic token (not a raw hex), it follows the light/dark
switch for free — no separate light-mode alias block needed.
This is a migration bridge: as each surface is fully reclassed to sb-*, its
reliance on these aliases shrinks; revisit retiring them in the governance
pass once no surface references them.
-------------------------------------------------------------------------- */
:root {
/* accent */
--brand: var(--accent);
--orange: var(--accent);
--orange-hover: var(--accent);
--brand-dim: var(--accent);
--brand-glow: var(--accent-soft);
/* surfaces / elevation */
--surface: var(--card);
--surface2: var(--card2);
--surface3: var(--card2);
--border2: var(--border);
/* status */
--green: var(--good);
--red: var(--bad);
--danger: var(--bad);
--blue: var(--info);
--yellow: var(--warn);
/* NOTE: --bg, --border, --text, --text2, --muted already share names with
the Scoreboard semantic layer, so they need no alias. */
}
/* ----------------------------------------------------------------------------
2. BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
.sb-scope, body.sb {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sb-font);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.sb-mono { font-family: var(--sb-font-mono); }
.sb-muted { color: var(--muted); }
.sb-text2 { color: var(--text2); }
/* Tonal helpers for status-colored values */
.sb-good { color: var(--good); }
.sb-warn { color: var(--warn); }
.sb-bad { color: var(--bad); }
.sb-info { color: var(--info); }
/* ----------------------------------------------------------------------------
3. SHELL — sidebar + topbar + main
-------------------------------------------------------------------------- */
.sb-app { display: flex; min-height: 100vh; }
.sb-sidebar {
width: var(--sidebar-w);
flex: none;
background: var(--panel);
border-right: 1px solid var(--border);
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
padding: 14px 12px;
}
.sb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-topbar {
height: var(--topbar-h);
flex: none;
background: var(--panel);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 14px;
padding: 0 22px;
}
.sb-topbar-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.sb-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sb-topbar-date { font-family: var(--sb-font-mono); font-size: 11.5px; color: var(--muted); }
.sb-body {
flex: 1;
padding: 26px;
max-width: var(--page-max);
width: 100%;
}
/* Logo block */
.sb-logo { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.sb-logo-mark {
width: 33px; height: 33px; border-radius: 9px;
background: var(--accent); color: var(--accent-ink);
display: grid; place-items: center; flex: none;
}
.sb-logo-word { font-size: 15px; font-weight: 700; line-height: 1.1; }
.sb-logo-eyebrow {
font-family: var(--sb-font-mono); font-size: 9px; font-weight: 500;
text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.sb-logo-eyebrow.is-admin { color: var(--accent); }
/* Context chip (e.g. ADMIN) */
.sb-chip {
font-family: var(--sb-font-mono); font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em;
color: var(--accent); background: var(--accent-soft);
border: 1px solid var(--accent); border-radius: var(--r-pill);
padding: 3px 8px;
}
/* ----------------------------------------------------------------------------
4. NAV
-------------------------------------------------------------------------- */
.sb-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.sb-nav-group {
font-family: var(--sb-font-mono); font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
padding: 12px 8px 5px;
}
.sb-nav-item {
display: flex; align-items: center; gap: 11px;
padding: 9px 13px; border-radius: 7px;
border-left: 2px solid transparent;
color: var(--text2); font-size: 13.5px; font-weight: 500;
text-decoration: none; cursor: pointer;
transition: background var(--ease) .12s, color var(--ease) .12s;
}
.sb-nav-item:hover { background: var(--card2); }
.sb-nav-item.active {
color: var(--accent); background: var(--accent-soft);
border-left: 2px solid var(--accent); font-weight: 600;
}
.sb-nav-item svg { width: 17px; height: 17px; flex: none; stroke: currentColor; }
.sb-nav-item .sb-nav-label { flex: 1; min-width: 0; }
/* Nav count/review pills (right-aligned) */
.sb-nav-pill {
margin-left: auto; font-family: var(--sb-font-mono); font-size: 10px; font-weight: 600;
border-radius: var(--r-pill); padding: 2px 7px; line-height: 1.4;
}
.sb-nav-pill.is-count { background: var(--accent); color: var(--accent-ink); } /* e.g. Inbox 3 */
.sb-nav-pill.is-review { background: var(--warn); color: #1a1407; } /* e.g. Verification 7 */
.sb-nav-pill.is-total { background: var(--card2); color: var(--text2); } /* e.g. Teams 312 */
/* Sidebar footer user block */
.sb-user { display: flex; align-items: center; gap: 10px; padding: 12px 8px 2px; border-top: 1px solid var(--border); margin-top: 8px; }
/* ----------------------------------------------------------------------------
5. AVATAR
-------------------------------------------------------------------------- */
.sb-avatar {
width: 30px; height: 30px; border-radius: 50%; flex: none;
background: var(--accent-soft); color: var(--accent);
display: grid; place-items: center;
font-family: var(--sb-font-mono); font-size: 11px; font-weight: 600;
}
/* ----------------------------------------------------------------------------
6. BUTTONS
-------------------------------------------------------------------------- */
.sb-btn {
display: inline-flex; align-items: center; gap: 7px;
border-radius: var(--r-ctl); padding: 9px 16px;
font-family: var(--sb-font); font-size: 13px; font-weight: 600;
cursor: pointer; border: 1px solid transparent; line-height: 1.2;
text-decoration: none;
transition: background var(--ease) .12s, border-color var(--ease) .12s;
}
.sb-btn svg { width: 15px; height: 15px; stroke: currentColor; }
.sb-btn--primary { background: var(--accent); color: var(--accent-ink); }
.sb-btn--primary:hover { filter: brightness(1.05); }
.sb-btn--secondary { background: transparent; color: var(--text); border-color: var(--border); }
.sb-btn--secondary:hover { background: var(--card2); }
.sb-btn--ghost { background: var(--card2); color: var(--text2); border-color: var(--border); }
.sb-btn--ghost:hover { color: var(--text); }
.sb-btn--danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.sb-btn--danger:hover { background: rgba(244,98,74,.10); }
.sb-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Segmented Dark/Light toggle */
.sb-seg {
display: inline-flex; background: var(--card2); border-radius: 9px; padding: 3px; gap: 2px;
}
.sb-seg button {
border: none; background: transparent; color: var(--muted);
font-family: var(--sb-font); font-size: 12px; font-weight: 600;
padding: 5px 11px; border-radius: 6px; cursor: pointer; line-height: 1.2;
}
.sb-seg button.active { background: var(--accent); color: var(--accent-ink); }
/* ----------------------------------------------------------------------------
7. CARDS
-------------------------------------------------------------------------- */
.sb-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r-card); box-shadow: var(--card-shadow);
padding: 16px 18px;
}
.sb-card-head {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 20px; border-bottom: 1px solid var(--line);
}
.sb-card--flush { padding: 0; } /* for tables/lists that manage their own padding */
.sb-eyebrow {
font-family: var(--sb-font-mono); font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .12em; color: var(--text2);
}
.sb-viewall { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
/* Stat card — accent top rule is part of the Scoreboard look */
.sb-stat {
background: var(--card); border: 1px solid var(--border);
border-top: 2px solid var(--accent);
border-radius: var(--r-card); box-shadow: var(--card-shadow);
padding: 16px 18px;
}
.sb-stat-value {
font-family: var(--sb-font-mono); font-weight: 600; font-size: 29px;
letter-spacing: -.01em; color: var(--text); margin-top: 8px;
}
.sb-stat-value.is-good { color: var(--good); }
.sb-stat-value.is-bad { color: var(--bad); }
.sb-stat-value.is-info { color: var(--info); }
.sb-stat-value.is-warn { color: var(--warn); }
.sb-stat-sub { font-size: 11px; color: var(--muted); margin-top: 5px; }
/* Stat grid: 4-up → 2-up → 1-up */
.sb-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* ----------------------------------------------------------------------------
8. BADGES (outline status)
-------------------------------------------------------------------------- */
.sb-badge {
display: inline-flex; align-items: center;
border: 1px solid var(--muted); color: var(--muted);
background: transparent; border-radius: var(--r-pill);
padding: 3px 10px;
font-family: var(--sb-font-mono); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em;
}
.sb-badge--good { border-color: var(--good); color: var(--good); }
.sb-badge--warn { border-color: var(--warn); color: var(--warn); }
.sb-badge--bad { border-color: var(--bad); color: var(--bad); }
.sb-badge--info { border-color: var(--info); color: var(--info); }
/* ----------------------------------------------------------------------------
9. INPUTS
-------------------------------------------------------------------------- */
.sb-field { display: block; }
.sb-label {
display: block;
font-family: var(--sb-font-mono); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .04em; color: var(--text2);
margin-bottom: 6px;
}
.sb-input, .sb-textarea, .sb-select {
width: 100%; background: var(--card); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-ctl);
padding: 10px 13px; font-family: var(--sb-font); font-size: 14px;
outline: none; transition: border-color var(--ease) .12s, box-shadow var(--ease) .12s;
}
.sb-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.sb-input::placeholder, .sb-textarea::placeholder { color: var(--muted); }
.sb-input:focus, .sb-textarea:focus, .sb-select:focus {
border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Input with a leading icon */
.sb-input-wrap { position: relative; }
.sb-input-wrap svg {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; stroke: var(--muted); pointer-events: none;
}
.sb-input-wrap .sb-input { padding-left: 36px; }
/* ----------------------------------------------------------------------------
10. TABLES (CSS grid, not )
-------------------------------------------------------------------------- */
.sb-table { display: flex; flex-direction: column; }
.sb-tr {
display: grid; align-items: center; gap: 12px;
padding: 11px 20px; border-top: 1px solid var(--line);
}
.sb-thead {
border-top: none; border-bottom: 1px solid var(--border);
padding: 10px 20px;
}
.sb-th {
font-family: var(--sb-font-mono); font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: .11em; color: var(--muted);
}
.sb-tr:hover:not(.sb-thead) { background: var(--card2); }
.sb-td-name { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.sb-td-num { font-family: var(--sb-font-mono); }
/* ----------------------------------------------------------------------------
11. SMS BUBBLES
-------------------------------------------------------------------------- */
.sb-bubble-cap {
font-family: var(--sb-font-mono); font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
margin-bottom: 5px;
}
.sb-bubble-cap.is-system { color: var(--good); }
.sb-bubble {
border: 1px solid var(--border); border-radius: var(--r-ctl);
padding: 11px 13px; font-size: 12.5px; line-height: 1.45; max-width: 80%;
}
.sb-bubble--in { background: var(--bg); }
.sb-bubble--out { background: var(--accent-soft); }
/* ----------------------------------------------------------------------------
12. EMPTY STATE
-------------------------------------------------------------------------- */
.sb-empty {
text-align: center; padding: 48px 24px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r-card);
}
.sb-empty-tile {
width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 16px;
background: var(--accent-soft); color: var(--accent);
display: grid; place-items: center;
}
.sb-empty-tile svg { width: 26px; height: 26px; stroke: currentColor; }
.sb-empty h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.sb-empty p { font-size: 13.5px; color: var(--text2); margin: 0; }
/* ----------------------------------------------------------------------------
13. LAYOUT HELPERS
-------------------------------------------------------------------------- */
.sb-two-col { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
.sb-row { display: flex; align-items: center; gap: 12px; }
.sb-progress { height: 8px; background: var(--card2); border-radius: 999px; overflow: hidden; }
.sb-progress > span { display: block; height: 100%; background: var(--accent); }
/* ----------------------------------------------------------------------------
14. MOBILE — bottom tab bar, responsive collapse
-------------------------------------------------------------------------- */
.sb-tabbar { display: none; }
@media (max-width: 1023px) {
.sb-sidebar { display: none; }
.sb-two-col { grid-template-columns: 1fr; }
.sb-stat-grid { grid-template-columns: repeat(2, 1fr); }
.sb-body { padding: 18px 14px 84px; } /* bottom padding clears the tab bar */
.sb-tabbar {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
background: var(--panel); border-top: 1px solid var(--border);
padding: 6px 4px;
}
.sb-tabbar a {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
color: var(--muted); text-decoration: none;
font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
font-family: var(--sb-font-mono);
}
.sb-tabbar a svg { width: 17px; height: 17px; stroke: currentColor; }
.sb-tabbar a.active { color: var(--accent); }
}
@media (max-width: 560px) {
.sb-stat-grid { grid-template-columns: 1fr; }
}