/* base.css Reset, design tokens, motion, splash and buttons. Part of the dashboard stylesheet, split by concern. index.html links these in source order; keep that order, the cascade depends on it. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; } :root { color-scheme: light; --bg: #f3f3f7; --bg-2: #ececf1; --surface: #ffffff; --surface-2: #f7f7fa; --label: #17171c; --label-2: #5f5f6b; --label-3: #9a9aa6; --accent: #E03A3E; /* Maryland red */ --accent-hover: #c62f33; --accent-light: rgba(224, 58, 62, 0.10); --gold: #C79200; /* Maryland gold (text-safe) */ --gold-bright: #FFD520; --gold-light: rgba(199, 146, 0, 0.14); --green: #1f9d55; --green-light: rgba(31, 157, 85, 0.13); --amber: #d38a00; --amber-light: rgba(211, 138, 0, 0.14); --red: #e0342a; --red-light: rgba(224, 52, 42, 0.12); --slate: #64748b; --slate-light: rgba(100, 116, 139, 0.14); /* Rankings — the one launcher hue not already spoken for by a status colour (red = injuries, gold = penalties, green = practices, slate = grades). */ --indigo: #5257d6; --indigo-light: rgba(82, 87, 214, 0.12); /* The offensive line is ranked by two position coaches, so its second coach column needs a heading colour of its own beside indigo and red. */ --teal: #0f8f86; --teal-light: rgba(15, 143, 134, 0.13); --border: rgba(20, 20, 35, 0.09); --border-2: rgba(20, 20, 35, 0.06); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; --shadow-sm: 0 1px 2px rgba(15,15,30,0.04), 0 1px 3px rgba(15,15,30,0.05); --shadow-md: 0 4px 16px rgba(15,15,30,0.07), 0 2px 4px rgba(15,15,30,0.04); --shadow-lg: 0 12px 44px rgba(15,15,30,0.12), 0 4px 12px rgba(15,15,30,0.06); --nav-h: 60px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; } /* Dark mode is opt-in via [data-theme="dark"] on , toggled from the nav and persisted to localStorage (see js/theme.js). A tiny inline script in index.html sets the attribute before first paint — falling back to the OS preference on a first visit — so there is no flash of the wrong theme. Brand/status hues (accent, gold, green, amber, red, slate) stay identical across themes; only surface, label and border tokens get dark values, plus the -light tint alphas (bumped up so chip backgrounds stay visible against a dark surface instead of nearly disappearing). */ :root[data-theme="dark"] { color-scheme: dark; --bg: #131318; --bg-2: #18181e; --surface: #1e1e26; --surface-2: #26262f; --label: #f2f2f6; --label-2: #a9a9b4; --label-3: #75757f; --accent-light: rgba(224, 58, 62, 0.18); --gold-light: rgba(199, 146, 0, 0.22); --green-light: rgba(31, 157, 85, 0.20); --amber-light: rgba(211, 138, 0, 0.20); --red-light: rgba(224, 52, 42, 0.20); --slate-light: rgba(100, 116, 139, 0.22); --indigo: #8f93f0; --indigo-light: rgba(143, 147, 240, 0.20); --teal: #3fc4b8; --teal-light: rgba(63, 196, 184, 0.20); --border: rgba(255, 255, 255, 0.11); --border-2: rgba(255, 255, 255, 0.07); --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 12px 44px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } html { font-size: 14px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); color: var(--label); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 40% at 12% -8%, rgba(224,58,62,0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 92% -6%, rgba(199,146,0,0.10) 0%, transparent 58%); } input, select, textarea, button { font-family: var(--font); } /* ── Splash ─────────────────────────────────────────────────────────── */ .splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; } .splash-spinner { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: spin 0.7s linear infinite; } /* ── Buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 550; border: 1px solid transparent; cursor: pointer; white-space: nowrap; user-select: none; transition: background 0.15s, box-shadow 0.15s, transform 0.08s, border-color 0.15s; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-sm); } .btn--secondary { background: var(--surface); color: var(--label); border-color: var(--border); } .btn--secondary:hover { background: var(--surface-2); } .btn--ghost { background: none; color: var(--label-2); } .btn--ghost:hover { background: var(--surface-2); color: var(--label); } .btn--danger { background: var(--red-light); color: var(--red); } .btn--danger:hover { background: var(--red); color: #fff; } .btn--sm { padding: 5px 11px; font-size: 12.5px; border-radius: var(--r-sm); } .btn--full { width: 100%; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: none; border: none; color: var(--label-3); cursor: pointer; transition: background 0.14s, color 0.14s; } .icon-btn svg { width: 15px; height: 15px; } .icon-btn:hover { background: var(--surface-2); color: var(--label); } .icon-btn.danger:hover { background: var(--red-light); color: var(--red); }