:root { /* Kept in sync with public.css's palette so the whole site -- public kiosk pages and the login-gated app alike -- reads as one consistent, deliberately designed product rather than two. Azure is the primary interactive color throughout (borders, glow, buttons, focus states). Gold is intentionally rare -- it appears only where something has actually been earned: a ranked recruit's rating pill, the gauge fill, the ranked-this-cycle stat. Nowhere else. See recruitment-planning-notes.md-adjacent design conversation for the reasoning if this ever needs revisiting. */ --blue: #5ec4ff; --blue-dark: #2f6fa8; --blue-light: #8fd4ff; --bg: #070a17; --surface: #141d3a; --surface-hover: #1a2648; --surface-raised: #1e2b52; --border: rgba(255, 255, 255, 0.1); --text: #f3f5fb; --text-muted: #99a2c0; /* --error is deliberately NOT redefined for light mode -- it's the .btn-danger background, and that button's text is the fixed --on-accent dark navy, which needs --error to stay bright enough to read against. --error-text is the separate, theme-varying token for every other spot (form errors, the incomplete-profile flag) where --error is small text sitting directly on the page. */ --error: #ff8080; --error-text: var(--error); --brick: #a8503c; --gold: #c9a24d; --gold-bright: #ffcf6b; --success: #4fae72; --success-dark: #3d9159; /* Fixed regardless of theme -- the text/icon color for anything sitting on top of a saturated blue or gold surface (buttons, badges, the gauge, the avatar initials). Dark navy reads cleanly on both accent colors in both themes, so this deliberately does NOT track --bg the way it used to (that only worked by coincidence while --bg itself was always dark). */ --on-accent: #0b0f1f; /* One typeface, one weight scale, everywhere -- a dashboard tool reads as professional through consistency and restraint, not through a second "brand" font drawing attention to itself. --font-display is kept as a separate token (rather than deleted) purely so every place that referenced it keeps working -- it's intentionally the same value as --font-body now. */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font-body); --radius: 14px; --radius-sm: 10px; --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); /* One shared elevation scale instead of every component hand-rolling its own shadow rgba/blur. Kept deliberately light -- sm is barely there (a resting card should read as flat, bordered, not lifted), md is a mild hover response, lg is reserved for things genuinely floating above the page content (a dialog, a popover). */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px -6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 48px -16px rgba(0, 0, 0, 0.55); } /* Light mode -- opt-in per account via Profile.theme (see profile_edit), applied server-side as data-theme on so there's no flash of the wrong theme on load. Only the tokens that actually need to move are redefined here; anything not listed (--blue, --gold, --brick, --success, --error, --on-accent, radii, fonts) already works on both grounds and is inherited from :root unchanged. --blue-light and --error-text both get darkened specifically because they're used as small text (nav links, badges, form errors) -- the pale dark-mode values that read fine on near-black would be too low-contrast on a light page. */ :root[data-theme="light"] { --bg: #f4f6fb; --surface: #fbfcfe; --surface-hover: #eef1f8; --surface-raised: #ffffff; --border: rgba(15, 23, 42, 0.12); --text: #12172b; --text-muted: #5b6478; --blue-light: #1f6fb8; --error-text: #c23a3a; /* Dark, high-opacity shadows read as heavy smudges on a white page -- lighter and tighter here so elevation still registers without looking like a mistake. */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 12px -6px rgba(15, 23, 42, 0.14); --shadow-lg: 0 18px 40px -14px rgba(15, 23, 42, 0.2); } * { box-sizing: border-box; } /* The HTML `hidden` attribute's default browser rule is `display: none` with no !important, so any element that's both toggled via `hidden` and targeted by an author `display` rule (e.g. `.bulk-actions { display: flex }`) would win the cascade on origin alone and never actually hide -- this file does that combination in several places (quick-text/bulk-text dialog panels, the bulk-actions bar). Force it to always win instead of relying on rule ordering. */ [hidden] { display: none !important; } html, body { margin: 0; min-height: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); } a { color: var(--blue); } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); flex-wrap: wrap; position: relative; z-index: 10; } .topbar .brand { display: flex; align-items: center; gap: 0.7rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; text-decoration: none; color: var(--text); } .topbar nav { display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; } .topbar nav a { text-decoration: none; color: var(--text-muted); } .topbar nav a:hover { color: var(--text); } /* Navigation reads as tabs, not buttons -- flat text + icon, a 2px underline marking "you are here" (see context_processors.site_links's nav_section), nothing else competing for attention in the topbar. No background fill on hover or on the current item; a tab bar earns its "clean" read by staying quiet even when active. The icons alone tell Potential Members and Events apart; they don't need color to do that job too. (.topbar nav a beats a bare class on specificity, hence matching that shape here.) */ .nav-link-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.15rem; border-bottom: 2px solid transparent; font-weight: 600; font-size: 0.88rem; white-space: nowrap; background: transparent; transition: color 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap); } .nav-link-pill svg { width: 16px; height: 16px; flex-shrink: 0; } .topbar nav a.nav-link-pill:hover { color: var(--text); } .topbar nav a.nav-link-pill.nav-link-current { color: var(--blue-light); border-bottom-color: var(--blue); } .topbar nav a.nav-link-pill.nav-link-current:hover { color: var(--blue-light); } .logout-form { /* Transparent to the flex layout so the button inside behaves as a direct flex item of whatever it's dropped into (the confirm dialog's .message-actions row) -- same trick as the purge dialog's forms. */ display: contents; } main { max-width: 960px; margin: 0 auto; padding: 2rem 1.25rem 3rem; } h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: -0.01em; margin: 0 0 1rem; } .page-subtitle { margin: -0.5rem 0 1.25rem; color: var(--text-muted); font-size: 0.95rem; max-width: 60ch; } .roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .bid-slate-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; flex-shrink: 0; } .bid-slate-actions .btn { padding: 0.5rem 1rem; font-size: 0.82rem; } .roster-row { position: relative; display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); transition: background 0.15s var(--ease-snap), border-color 0.15s var(--ease-snap); } .roster-row:hover { background: var(--surface-hover); border-color: rgba(94, 196, 255, 0.3); } /* .roster-row is a
now, not an -- it needs a checkbox/button/ form to sit beside the "go to detail" link without nesting an interactive element inside an interactive element (invalid HTML). roster-row-link is an absolutely-positioned full-card overlay, given z-index:1 so it paints above plain content (name, avatar, badges) -- those stay position:relative with no z-index of their own, so a click anywhere on the visible text/whitespace still reaches the link underneath instead of being silently swallowed by a non-interactive span sitting on top of it (the bug this replaced: every sibling used to get bumped above the link indiscriminately, so only the empty gaps between elements were actually clickable). The row's *real* controls (checkbox, buttons, a form wrapping buttons) get z-index:2 -- one step above the link -- so they stay independently clickable. */ .roster-row-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; } .roster-row > *:not(.roster-row-link) { position: relative; } .roster-row > button, .roster-row > input, .roster-row > select, .roster-row > form, .roster-row > a:not(.roster-row-link) { z-index: 2; } /* Spreadsheet import preview -- reuses .roster-row as its base but each row carries more than a single line (meta + skip flags), so it needs top alignment instead of .roster-row's default vertical centering. */ .import-row { align-items: flex-start; } .import-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .import-row-meta { color: var(--text-muted); font-size: 0.85rem; } .import-row-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: linear-gradient(160deg, var(--blue), var(--blue-dark)); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-display); font-size: 1rem; border: 2px solid var(--border); } .avatar-small { width: 26px; height: 26px; font-size: 0.75rem; border-width: 1px; } .topbar-profile-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text); font-weight: 600; } .topbar-profile-link:hover { color: var(--blue-light); } .roster-name { font-weight: 600; flex: 1; min-width: 0; } .roster-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1rem; font-size: 0.9rem; color: var(--text-muted); } /* Custom checkbox/radio -- the native control's unchecked state ignores accent-color entirely in most browsers and just renders the OS default (a stark white square on this dark UI), which was the one place still reading as un-designed. appearance:none + a hand-drawn checked state fixes both states, board rows and the filters popover alike. */ .row-select, .filter-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s var(--ease-snap), border-color 0.15s var(--ease-snap); } .row-select { width: 20px; height: 20px; } .row-select:checked, .filter-check input[type="checkbox"]:checked { background: var(--blue); border-color: var(--blue); } .row-select:checked::after, .filter-check input[type="checkbox"]:checked::after { content: ""; width: 5px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } .filter-check input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s var(--ease-snap), border-color 0.15s var(--ease-snap); } .filter-check input[type="radio"]:checked { border-color: var(--blue); border-width: 5px; } .row-select:focus-visible, .filter-check input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(94, 196, 255, 0.3); } .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-bottom: 0.75rem; } .bulk-select-all { font-size: 0.9rem; white-space: nowrap; } .bulk-count { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } .bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; } .bulk-actions .field-select { width: auto; min-width: 160px; } .bulk-text-progress { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.75rem; } .board-filters { margin-bottom: 1.25rem; } .board-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; position: relative; } .board-search-row input[type="search"] { flex: 1; min-width: 160px; } .filters-clear { font-size: 0.85rem; color: var(--text-muted); } /* Compound .btn.btn-secondary / .btn.btn-danger (not bare .btn-secondary) on purpose -- these are always applied alongside .btn in the markup (class="btn btn-secondary"), and a bare single-class selector has the exact same specificity as .btn itself, so whichever rule happens to come later in the file silently wins on every shared property. That was this bug for the whole session: .btn is defined further down, so every "secondary"/"danger" button rendered as solid primary blue regardless of intent. The compound selector's higher specificity makes the modifier win unconditionally, independent of source order. */ .btn.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn.btn-secondary:hover { background: var(--surface-hover); border-color: rgba(94, 196, 255, 0.4); } .btn.btn-danger { background: var(--error); border-color: var(--error); color: var(--on-accent); } .btn.btn-danger:hover { background: #ff9d9d; border-color: #ff9d9d; } /* Filters popover -- a
disclosure, same no-JS-required pattern as the topbar menu. Stage and profile-status are real multi-select checkboxes; rating and assignment stay single-choice (a radio group styled the same way) since their options overlap/are mutually exclusive rather than combinable. */ .filters-popover { position: relative; } .filters-popover summary { /* defaults to display:list-item -- list-style:none alone hides the marker glyph but some browsers still reserve its gutter width, shifting "Filters" a few px off-center from the plain