/* app.css — rowOps Race operator theme. * * Layered on top of Bootstrap 5 via the CDN base. Defines three modes: * .theme-light — default operator daytime (Bootstrap defaults + brand tint) * .theme-dark — office / evening (deep slate background) * .theme-sun — race-day high-contrast (pure white-on-black; jet-yellow accents) * * Theme class is applied to BOTH and so Bootstrap chrome, * form controls, and our custom widgets all flip together. ThemeToggle * persists choice to localStorage. * * Brand CSS vars are emitted by Brand::cssBlock() in layout.php BEFORE * this stylesheet so var(--brand-*) references resolve at parse time. */ /* ------------------------------------------------------------------------- Base — applies to every theme ------------------------------------------------------------------------- */ :root { --rowops-surface: var(--brand-bg, #fafaf8); --rowops-surface-2: var(--brand-cream, #f5f1e8); --rowops-surface-3: #ffffff; --rowops-ink: var(--brand-text, #1f2a33); --rowops-ink-muted: rgba(0, 0, 0, 0.6); --rowops-ink-faint: rgba(0, 0, 0, 0.35); --rowops-border: rgba(0, 0, 0, 0.1); --rowops-border-strong: rgba(0, 0, 0, 0.18); --rowops-card: #ffffff; --rowops-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04); --rowops-shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04); --rowops-accent: var(--brand-primary, #b07d33); --rowops-accent-fg: #ffffff; --rowops-accent-tint: rgba(var(--brand-primary-rgb, 176, 125, 51), 0.08); --rowops-good: #157347; --rowops-warn: #ad6a00; --rowops-bad: #b02a37; --rowops-link: var(--rowops-accent); /* Aliases for names already consumed across templates/JS. Until 2026-07-30 these were undefined, so 70+ call sites silently rendered their var() fallbacks — including retired V1 red #AD2F1E. Defining them routes every consumer through the brand system (kit: rowOps_home/rowOps_logo/BRAND-SYSTEM.md). */ --rowops-muted: #6c757d; --rowops-text-muted: var(--rowops-ink-muted); --rowops-primary: var(--rowops-accent); --rowops-success: var(--rowops-good); --rowops-ok: var(--rowops-good); --rowops-danger: var(--rowops-bad); /* UI redesign 2026-05-26 — design tokens for the new shell. Spacing rhythm: 4 / 8 / 12 / 16 / 24 / 32 / 48. Use these instead of ad-hoc px values so a future tweak lands once. */ --space-1: 0.25rem; /* 4 px */ --space-2: 0.5rem; /* 8 px */ --space-3: 0.75rem; /* 12 px */ --space-4: 1rem; /* 16 px */ --space-6: 1.5rem; /* 24 px */ --space-8: 2rem; /* 32 px */ --space-12: 3rem; /* 48 px */ --radius-sm: 0.3rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --top-bar-h: 56px; --rail-w: 240px; --rail-w-compact: 68px; --ease-snappy: cubic-bezier(0.2, 0.7, 0.2, 1); } html, body { background: var(--rowops-surface); color: var(--rowops-ink); } /* Widen the layout container — operator-stated 2026-05-19 night: "both this and the start screen could use more of the available screen space. aiming for 80% width of what is available on any given device. aiming for full page on a standard 15inch laptop (currently being tested on twin 27 inch desk monitors)". Bootstrap's default .container caps at 1320px on xxl — that leaves a 27" 2560-wide monitor with ~50% empty gutter on each side. Strategy: under 1500 viewport (covers laptops up to ~15") use ~95vw so the page is effectively full-bleed; on bigger monitors capped at 80vw / 2200px so two-monitor desktops use the screen without going edge-to-edge. !important needed because Bootstrap defines per-breakpoint .container max-widths inside @media queries that would otherwise win. */ .container { max-width: 95vw !important; } @media (min-width: 1500px) { .container { max-width: min(80vw, 2200px) !important; } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif; font-feature-settings: "kern" 1, "calt" 1; letter-spacing: -0.005em; } h1, h2, h3 { letter-spacing: -0.025em; font-weight: 650; } a { color: var(--rowops-link); text-decoration: none; border-bottom: 1px dotted transparent; transition: border-color 0.15s; } a:hover { color: var(--rowops-accent); border-bottom-color: currentColor; text-decoration: none; } .tabular { font-variant-numeric: tabular-nums; } .numeric-large { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -0.02em; } /* Cards take a soft elevation that holds in dark mode too. */ .card { background: var(--rowops-card); border: 1px solid var(--rowops-border); border-radius: 0.5rem; box-shadow: var(--rowops-shadow); } .card-header { background: var(--rowops-surface-2); border-bottom: 1px solid var(--rowops-border); font-weight: 600; color: var(--rowops-ink); } /* Brand-aware primary buttons. */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--rowops-accent); border-color: var(--rowops-accent); color: var(--rowops-accent-fg); } .btn-outline-primary { color: var(--rowops-accent); border-color: var(--rowops-accent); } .btn-outline-primary:hover { background: var(--rowops-accent); color: var(--rowops-accent-fg); } .badge.bg-brand { background: var(--rowops-accent) !important; color: var(--rowops-accent-fg); } .badge.bg-dark { background: var(--brand-dark, #1f2a33) !important; } /* ────────────────────────────────────────────────────────────────── Semantic badge family — M5b (2026-05-26 dashboard redesign). Replaces the ad-hoc bg-warning / bg-danger / bg-success / bg-info sprawl with five colour roles that mean the same thing on every surface: error / warning / ok / info / neutral. Pairs with the five-colour rule from the design doc (cockpit + dashboard parity). Existing Bootstrap classes still work — these are additive, opt-in per-callsite. Sun-mode + dark-mode parity is enforced below. ────────────────────────────────────────────────────────────────── */ .badge.is-error { background: var(--rowops-bad); color: #fff; } .badge.is-warning { background: var(--rowops-warn); color: #fff; } .badge.is-ok { background: var(--rowops-good); color: #fff; } .badge.is-info { background: var(--rowops-accent); color: var(--rowops-accent-fg); } .badge.is-neutral { background: var(--rowops-surface-2); color: var(--rowops-ink-muted); border: 1px solid var(--rowops-border); } /* Tiny uppercase label utility — replaces the dozen-or-so inline style="font-size:.72rem;letter-spacing:.04em;" attributes scattered across the dashboard. Single class, single source of truth. */ .kpi-label { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--rowops-ink-muted); } .kpi-label-row { /* Small uppercase label inside a card body — matches `.kpi-label` but inherits the surrounding spacing the row context provides. */ font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--rowops-ink-muted); } /* Section header — replaces the repeated

pattern that anchors each phase block on the dashboard. Single utility class so a typography tweak lands in one place. / .section-heading { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rowops-ink-muted); margin-top: 1.5rem; margin-bottom: 0.5rem; } / Control hub glyph — large emoji/icon centred in each surface tile. `line-height: 1` keeps the tile body compact; `display: block` lets the surrounding text rhythm stay predictable. / .control-glyph { font-size: 2.5rem; line-height: 1; display: block; } / Form-control "natural-width" helpers — replaces ad-hoc style="width: auto" / "max-width: 260px" on filter rows. Operator filters across the dashboard now share one footprint. / .form-natural-width { width: auto !important; } .form-search-width { max-width: 260px; } / Control hub surface tile — invites a tap. Hover lifts the card + stronger shadow + brand-red border accent. Race-day operators on a tablet should feel "this is the obvious thing to tap". / .control-tile { transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out; border-width: 2px; cursor: pointer; } .control-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); border-color: var(--rowops-accent); } .control-tile.is-locked { opacity: 0.45; cursor: not-allowed; } .control-tile.is-locked:hover { transform: none; box-shadow: var(--rowops-shadow); border-color: var(--rowops-border); } / Large variant for the regatta-dashboard race-day cockpit (Starter / Finish tile pair). 200px min-height matches the previous inline style; the .cockpit-tile-large class also bumps the glyph one step so the tap target reads at a tablet's distance. / .cockpit-tile-large { min-height: 200px; } .cockpit-tile-large .control-glyph { font-size: 3.5rem; } / Inline brand-accent colour helper for inline counters (e.g. on-water count on the race-day cockpit). / .text-accent { color: var(--rowops-accent) !important; } / Fraction-denominator helper — used next to a tabular count to render the "/ N" denominator at a smaller, muted size. / .fraction-denominator { font-size: 0.7em; font-variant-numeric: tabular-nums; } / Gap-spread chips on /draw-decisions pair tables. tight/slim/ok are the three margin states the analyser computes per race-pair instance; the colour rule follows the brand's five-colour family (bad / warn / good) so an operator's eye reads spread severity at peripheral-vision distance. Sun-mode parity preserved through the existing `html.theme-sun .text-danger` override. / .gap-spread-tight { color: var(--rowops-bad); font-weight: 600; } .gap-spread-slim { color: var(--rowops-warn); font-weight: 600; } .gap-spread-ok { color: var(--rowops-good); font-weight: 600; } / Inline badge sized down to ride next to an H1/H2 without throwing the baseline off — used on /draw-decisions and similar surfaces where a state pill rides inside the page title. / .badge.badge-h1-inline { font-size: 0.55em; font-weight: 600; vertical-align: middle; } / Card with a brand-accent left border bar — used on action / config strips (e.g. /draw-decisions rerun toolbar) to set them apart from informational cards without changing background. / .card.card-accent-bar { border-left: 4px solid var(--rowops-accent); } / Pill-shaped button — race-day cross-surface nav links (Starter ↔ Finish ↔ Settings). Used on control/start.php + control/finish.php header strips for the contextual "go to the other tablet's surface" shortcuts. Pairs with btn-outline-secondary or btn-sm. / .btn.btn-pill { border-radius: 999px; } / Compact form-help text — tighter line-height + smaller size than Bootstrap's default .form-text. Used inline next to inputs where the help fits in a tight vertical band. / .form-help-tight { font-size: 0.72rem; line-height: 1.2; } / Generic display-none helper — for elements toggled by JS (recall form, lane-flag form, cancel button initial state, etc). Single class so a future "show/hide animation" lands here, not in every inline-style site. / .is-hidden { display: none !important; } / Strong warning text — used for camera-state error banners + similar mid-page alerts that need to read at a glance but don't warrant a full alert component. Pairs with the brand's warning colour token so sun-mode parity holds. / .text-warn-strong { color: var(--rowops-warn); font-weight: 600; } / Tablet-friendly board action button — large hit-target buttons on the finish board (camera Start / Record clip). Sized for thumb taps on a propped iPad; the underlying btn-primary / btn-danger colours carry the role-meaning. / .btn.btn-board-action { font-size: 1.05rem; padding: 0.55rem 1.1rem; border-radius: 0.4rem; } / Force-cancel form on /races sits directly under the draw-job banner and needs a slight negative top + reserved bottom spacing to look like a continuation of the banner instead of a separate block. JS toggles is-hidden, this carries the position. / .draw-cancel-form-position { margin-top: -0.5rem; margin-bottom: 1rem; } / ────────────────────────────────────────────────────────────────── Sun-mode + night-mode parity for the new M5 utility classes. Operator-stated 2026-05-24: red text is hard to read in direct sun glare. The existing .text-danger override flips red → jet yellow on white border; new utilities that carry semantic red, amber, or accent colour need the same treatment so an operator on a tablet under the sun reads them at distance. ────────────────────────────────────────────────────────────────── / / SUN MODE — high-contrast outdoor variant / / text-accent (brand-red on white normally) → jet-yellow in sun / html.theme-sun .text-accent, body.theme-sun .text-accent { color: #fde047 !important; } / card-accent-bar — preserve the operator's expected 3px white border on every card edge; substitute jet-yellow for the accent bar so it reads as an action/config marker without competing with the white card border. / html.theme-sun .card.card-accent-bar, body.theme-sun .card.card-accent-bar { border: 3px solid #fff; border-left: 4px solid #fde047; } / Gap-spread chips on /draw-decisions — red/amber/green meanings change to white/yellow/yellow in sun (severity inferred from chip position + count, not colour, when read at distance in glare). / html.theme-sun .gap-spread-tight, body.theme-sun .gap-spread-tight { color: #fde047; font-weight: 800; text-transform: uppercase; } html.theme-sun .gap-spread-slim, body.theme-sun .gap-spread-slim { color: #fde047; font-weight: 700; } html.theme-sun .gap-spread-ok, body.theme-sun .gap-spread-ok { color: #fff; font-weight: 700; } / text-warn-strong — amber/brown unreadable in sun, flip to jet-yellow / html.theme-sun .text-warn-strong, body.theme-sun .text-warn-strong { color: #fde047; font-weight: 800; } / control-tile hover border — operator preference is no red accents in sun (jet-yellow is the action colour). The :hover state still lifts the tile via transform; the border just switches accent colour. / html.theme-sun .control-tile:hover, body.theme-sun .control-tile:hover { border-color: #fde047; } / NIGHT MODE — red text on dark slate is muddy; lift the bad/warn tokens for the same utilities so the cockpit reads clearly when an operator is in low light (early-morning setup, evening wrap-up). / html.theme-dark .text-accent, body.theme-dark .text-accent { color: #ff7a66 !important; } html.theme-dark .gap-spread-tight, body.theme-dark .gap-spread-tight { color: #ff7a66; } html.theme-dark .gap-spread-slim, body.theme-dark .gap-spread-slim { color: #f0c674; } html.theme-dark .gap-spread-ok, body.theme-dark .gap-spread-ok { color: #6ed28b; } html.theme-dark .text-warn-strong, body.theme-dark .text-warn-strong { color: #f0c674; } / ────────────────────────────────────────────────────────────────── Print sheet utilities — M5b slice 7 (2026-05-26) The /print/* templates are A4 sheets distributed to clubs + captains. Inline styles accumulated here for tight per-row margins + small print-text buttons. Centralise so a future typography or spacing tweak on the captain sheets lands in one place. ────────────────────────────────────────────────────────────────── / / Day-block spacing — used inside availability + affected-club sheets to separate per-day rows. Existing .day-block class gains a default 0.25rem margin-bottom; .day-block-tight is for the inner seat-list variant (0.15rem). / .day-block { margin-bottom: 0.25rem; } .day-block-tight { margin-bottom: 0.15rem; } / Small button text — print sheets reduce button text by ~25% so per-club mailer controls don't dominate the A4 layout. / .btn-print-text { font-size: 0.78rem; } / Flush-top heading — print h2/h3 sometimes need the top margin stripped to butt against a preceding rule. Pairs with .border-0 when removing the visual border too. / .print-heading-flush { margin-top: 0; border: 0; } / Captain-mailer controls float to the right of the club row header. Bootstrap's .float-end works fine; this aliases it semantically for the "no-print + mailer" pattern. / .mailer-controls-row { margin-left: auto; } / Club-totals subhead — small muted parenthetical that rides next to the club name h3 ("(8 rowers, 12 races)"). Pairs with the .print-heading-flush h3 above it. / .club-totals-subhead { font-weight: 400; font-size: 0.85rem; } / Tables get a tighter top-padding + uppercase th. / .table th { font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rowops-ink-muted); } .table > :not(caption) > > * { vertical-align: middle; } /* Alerts with a thicker accent border. / .alert { border-radius: 0.5rem; border-left-width: 4px; } .alert-danger { border-left-color: var(--rowops-bad); } .alert-warning { border-left-color: var(--rowops-warn); } .alert-success { border-left-color: var(--rowops-good); } .alert-info { border-left-color: var(--rowops-accent); } code { color: var(--rowops-accent); background: var(--rowops-surface-2); padding: 0.1em 0.35em; border-radius: 3px; } / Navbar branding. / .navbar { background: var(--rowops-surface) !important; border-bottom: 1px solid var(--rowops-border); } .navbar-brand { font-weight: 700; letter-spacing: -0.02em; color: var(--rowops-ink) !important; } .navbar-brand:hover { color: var(--rowops-accent) !important; } .navbar .brand-mark { display: inline-block; width: 28px; height: 28px; margin-right: 8px; background: var(--rowops-accent); border-radius: 4px; vertical-align: -8px; } / Indicator pills (clock-drift + queue-status). / .clock-drift, .queue-status, .theme-pill { font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; } .clock-drift.ok { background: rgba(0, 0, 0, 0.05); color: var(--rowops-ink); } .clock-drift.warn { background: var(--brand-warning, #ffc107); color: #000; } .clock-drift.fail { background: var(--rowops-bad); color: #fff; } .queue-status { background: var(--rowops-surface-2); color: var(--rowops-ink); } .queue-status.queued { background: var(--brand-warning, #ffc107); color: #000; } .queue-status.offline { background: var(--rowops-bad); color: #fff; } / Form controls inherit theme. / .form-control, .form-select { background: var(--rowops-card); color: var(--rowops-ink); border-color: var(--rowops-border); } .form-control::placeholder { color: var(--rowops-ink-muted); opacity: 0.6; } .form-control:focus, .form-select:focus { background: var(--rowops-card); color: var(--rowops-ink); border-color: var(--rowops-accent); box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb, 176, 125, 51), 0.15); } / Race-day specific widgets. / .race-card { background: var(--rowops-card); border: 1px solid var(--rowops-border); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem; transition: transform 0.05s, box-shadow 0.05s; } .race-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } .race-status-on-water { border-left: 4px solid var(--brand-warning, #ffc107); } .race-status-finished { border-left: 4px solid var(--rowops-good); opacity: 0.85; } .race-status-pending { border-left: 4px solid var(--rowops-border); } .lane-grid { display: grid; gap: 0.5rem; } .lane-cell { background: var(--rowops-card); border: 1px solid var(--rowops-border); border-radius: 0.4rem; padding: 0.6rem 0.8rem; display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 0.75rem; align-items: center; } .lane-cell .lane-num { font-size: 1.5rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--rowops-ink-muted); } .lane-cell.finished { opacity: 0.6; } .lane-cell.flagged { background: rgba(176, 42, 55, 0.08); } / --rowops-bad tint — flag is a problem state, not a brand accent / / Big-button race-day controls — sized for tablets at the start tower. / .btn-race-action { min-width: 6rem; padding: 0.6rem 1.2rem; font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; border-radius: 0.4rem; border: 0; } .btn-start { background: var(--brand-warning, #ffc107); color: #000; } .btn-finish { background: var(--rowops-accent); color: var(--rowops-accent-fg); } .btn-go { background: var(--rowops-good); color: #fff; } .btn-flag { background: transparent; color: var(--rowops-ink-muted); border: 1px solid var(--rowops-border); } / ------------------------------------------------------------------------- Dark theme ------------------------------------------------------------------------- / html.theme-dark, body.theme-dark { --rowops-surface: #16202A; --rowops-surface-2: #1f232a; --rowops-ink: #ecedf0; --rowops-ink-muted: rgba(236, 237, 240, 0.6); --rowops-muted: rgba(236, 237, 240, 0.6); / was stuck at light-theme #6c757d via var() fallback / --rowops-border: rgba(255, 255, 255, 0.1); --rowops-card: #1c2026; --rowops-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04); --rowops-link: #ff7a66; } html.theme-dark .badge.bg-light, body.theme-dark .badge.bg-light { background: var(--rowops-surface-2) !important; color: var(--rowops-ink); } html.theme-dark .table-light, body.theme-dark .table-light { --bs-table-bg: var(--rowops-surface-2); } html.theme-dark .table, body.theme-dark .table { --bs-table-bg: var(--rowops-card); color: var(--rowops-ink); } html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > { --bs-table-accent-bg: rgba(255,255,255,0.03); } html.theme-dark .navbar, body.theme-dark .navbar { background: #0e1014 !important; } /* ------------------------------------------------------------------------- Sun mode (race-day high contrast — outdoor / bright) Pure white-on-jet-black; jet-yellow start; accent-red finish. Fatter borders + larger crew names so the start tower can read at distance. ------------------------------------------------------------------------- / html.theme-sun, body.theme-sun { --rowops-surface: #000000; --rowops-surface-2: #000000; / was #0a0a0a — eliminate near-black secondary surface that washed out on screen / --rowops-ink: #ffffff; --rowops-ink-muted: #f0f0f0; / was #cfcfcf — operator-stated 2026-05-23 race day: not enough contrast outdoors / --rowops-muted: #f0f0f0; / track ink-muted in glare — mid-grey #6c757d is illegible outdoors / --rowops-border: #ffffff; --rowops-card: #000000; --rowops-shadow: none; --rowops-link: #fde047; / was #facc15 — slightly brighter yellow for direct-sun visibility / } / Body-wide thicker baseline weight so text reads at distance in glare. Operator-stated 2026-05-24 race day: "make sure all text is bold and strong bold". Bumped 500 → 700 baseline; headings + key controls still reach 800-900 via their own rules below. / html.theme-sun, body.theme-sun { font-weight: 700; } html.theme-sun p, html.theme-sun li, html.theme-sun span, html.theme-sun div, body.theme-sun p, body.theme-sun li, body.theme-sun span, body.theme-sun div { font-weight: inherit; } html.theme-sun strong, html.theme-sun b, html.theme-sun h1, html.theme-sun h2, html.theme-sun h3, body.theme-sun strong, body.theme-sun b, body.theme-sun h1, body.theme-sun h2, body.theme-sun h3 { font-weight: 800; } html.theme-sun .small, html.theme-sun small, body.theme-sun .small, body.theme-sun small { font-weight: 600; } html.theme-sun , body.theme-sun * { text-shadow: none; } html.theme-sun .navbar, body.theme-sun .navbar { background: #000 !important; border-bottom: 3px solid #fff; } html.theme-sun .card, body.theme-sun .card { border: 3px solid #fff; box-shadow: none; } html.theme-sun .card-header, body.theme-sun .card-header { background: #000; color: #fff; border-bottom: 3px solid #fff; font-weight: 700; } html.theme-sun .table, body.theme-sun .table { --bs-table-color: #fff; --bs-table-bg: #000; --bs-table-border-color: #fff; } html.theme-sun .table th, body.theme-sun .table th { color: #fff; border-color: #fff; font-weight: 700; } html.theme-sun .table > :not(caption) > * > * { border-color: #fff; } html.theme-sun .form-control, html.theme-sun .form-select, body.theme-sun .form-control, body.theme-sun .form-select { background: #000; color: #fff; border: 3px solid #fff; font-weight: 600; } html.theme-sun .form-control::placeholder, body.theme-sun .form-control::placeholder { color: #bbb; opacity: 0.85; } html.theme-sun .btn-primary, body.theme-sun .btn-primary { background: #fde047; color: #000; border: 3px solid #fff; font-weight: 800; } html.theme-sun .btn-outline-primary, body.theme-sun .btn-outline-primary { color: #fde047; border: 3px solid #fde047; font-weight: 700; } html.theme-sun .btn-finish, body.theme-sun .btn-finish { background: #fde047; color: #000; font-weight: 800; } html.theme-sun .btn-start, body.theme-sun .btn-start { background: #fde047; color: #000; font-weight: 800; } html.theme-sun .btn-go, body.theme-sun .btn-go { background: #fde047; color: #000; font-weight: 800; } /* Bootstrap utility buttons we surface in race-day controls. / html.theme-sun .btn-secondary, body.theme-sun .btn-secondary, html.theme-sun .btn-outline-secondary, body.theme-sun .btn-outline-secondary { background: #000; color: #fff; border: 3px solid #fff; font-weight: 700; } html.theme-sun .btn-success, body.theme-sun .btn-success { background: #fde047; color: #000; border: 3px solid #fff; font-weight: 800; } / Operator-stated 2026-05-24: red text is hard to read in direct sun ("red writing is not great in the sun mode"). Switched both .btn-danger and .btn-outline-danger to high-contrast yellow on black with a thick white border + 900 weight; the danger semantics are carried by an outer ⚠ glyph and the action copy itself. / html.theme-sun .btn-danger, body.theme-sun .btn-danger { background: #fde047; color: #000; border: 3px solid #fff; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; } html.theme-sun .btn-outline-danger, body.theme-sun .btn-outline-danger { background: #000; color: #fde047; border: 3px solid #fff; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; } html.theme-sun .btn-outline-danger:hover, body.theme-sun .btn-outline-danger:hover { background: #fde047; color: #000; } html.theme-sun .text-danger, body.theme-sun .text-danger { color: #fde047 !important; font-weight: 800; } html.theme-sun .btn-warning, body.theme-sun .btn-warning { background: #fde047; color: #000; border: 3px solid #fff; font-weight: 800; } html.theme-sun .badge, body.theme-sun .badge { border: 2px solid #fff; font-weight: 700; } / Sun-mode parity for the M5 semantic badge tones (2026-06-02 audit). Used on head-mode finish-board state pills + the OTW lane flag chip + erg-finish DNF/DSQ. Default Bootstrap variant colours (muted orange/red on dark) vanish in glare; jet-yellow / pure-red on black reads at distance. / html.theme-sun .badge.is-ok, body.theme-sun .badge.is-ok { background: #fde047; color: #000; border-color: #fff; font-weight: 800; } html.theme-sun .badge.is-info, body.theme-sun .badge.is-info { background: #001a33; color: #fff; border-color: #38f; font-weight: 800; } html.theme-sun .badge.is-warning, body.theme-sun .badge.is-warning { background: #fde047; color: #000; border-color: #fff; font-weight: 800; } html.theme-sun .badge.is-error, body.theme-sun .badge.is-error { background: #ff3030; color: #fff; border-color: #fff; font-weight: 800; } html.theme-sun .badge.is-neutral, body.theme-sun .badge.is-neutral { background: #000; color: #f0f0f0; border-color: #fff; font-weight: 700; } html.theme-sun .lane-cell, body.theme-sun .lane-cell { background: #000; border: 3px solid #fff; padding: 1rem 1.2rem; } html.theme-sun .lane-cell .lane-num, body.theme-sun .lane-cell .lane-num { color: #fde047; font-size: 2.2rem; font-weight: 800; } html.theme-sun .lane-cell .lane-crew, body.theme-sun .lane-cell .lane-crew { color: #fff; font-weight: 700; } html.theme-sun .race-card, body.theme-sun .race-card { background: #000; border: 3px solid #fff; } html.theme-sun a, body.theme-sun a { color: #fde047; text-decoration: underline; font-weight: 700; } html.theme-sun code, body.theme-sun code { background: #000; color: #fde047; border: 1px solid #fff; padding: 0.05rem 0.3rem; font-weight: 700; } html.theme-sun .alert, body.theme-sun .alert { border: 3px solid #fff; background: #000; color: #fff; font-weight: 600; } html.theme-sun .alert-info, body.theme-sun .alert-info { border-color: #38f; } html.theme-sun .alert-warning, body.theme-sun .alert-warning { border-color: #fde047; } html.theme-sun .alert-danger, body.theme-sun .alert-danger { border-color: #ff3030; } html.theme-sun .alert-success, body.theme-sun .alert-success { border-color: #fde047; } html.theme-sun .text-muted, body.theme-sun .text-muted { color: #f0f0f0 !important; } html.theme-sun .navbar-brand, body.theme-sun .navbar-brand { color: #fff !important; font-weight: 800; } html.theme-sun .navbar .brand-mark, body.theme-sun .navbar .brand-mark { background: #fde047; } / Bootstrap small-text utility renders at #666 in default themes — too low contrast on jet black. Operator-facing meta lines use .small a lot. / html.theme-sun .small, body.theme-sun .small, html.theme-sun small, body.theme-sun small { color: #f0f0f0; } / Form-check (checkboxes) — defaults invisible on black. / html.theme-sun .form-check-input, body.theme-sun .form-check-input { background-color: #000; border: 2px solid #fff; } html.theme-sun .form-check-input:checked, body.theme-sun .form-check-input:checked { background-color: #fde047; border-color: #fff; } / ------------------------------------------------------------------------- Breadcrumbs — `.crumbs` (used at the top of every operator page) ------------------------------------------------------------------------- / .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 1.4rem; padding: 0.5rem 0.85rem; background: var(--rowops-surface-2); border-radius: 0.5rem; border-left: 3px solid var(--rowops-accent); box-shadow: 0 1px 0 var(--rowops-border); } .crumbs a { color: var(--rowops-ink-muted); border-bottom: none; transition: color 0.15s; } .crumbs a:hover { color: var(--rowops-accent); } .crumbs .sep { color: var(--rowops-ink-muted); opacity: 0.45; font-weight: 400; } .crumbs .current { color: var(--rowops-ink); font-weight: 700; } html.theme-sun .crumbs, body.theme-sun .crumbs { background: #000; border-left-color: var(--brand-warning, #facc15); box-shadow: 0 1px 0 #fff; } html.theme-sun .crumbs a, body.theme-sun .crumbs a { color: #cfcfcf; } html.theme-sun .crumbs .current, body.theme-sun .crumbs .current { color: #fff; } / Back-compat — existing `nav.small.mb-3` strips that haven't been migrated yet pick up the same look so the page chrome is uniform. / nav.small.mb-3 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rowops-ink-muted); padding-bottom: 0.6rem; border-bottom: 1px solid var(--rowops-border); margin-bottom: 1.25rem !important; } nav.small.mb-3 a { color: var(--rowops-ink-muted); border-bottom: none; } nav.small.mb-3 a:hover { color: var(--rowops-accent); } / ------------------------------------------------------------------------- Theme toggle pill in the navbar ------------------------------------------------------------------------- / .theme-toggle { display: inline-flex; gap: 0.15rem; padding: 0.15rem; background: var(--rowops-surface-2); border-radius: 999px; font-size: 0.8rem; line-height: 1; } .theme-toggle button { background: transparent; border: 0; padding: 0.25rem 0.6rem; border-radius: 999px; color: var(--rowops-ink-muted); cursor: pointer; } .theme-toggle button.active { background: var(--rowops-card); color: var(--rowops-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } html.theme-sun .theme-toggle, body.theme-sun .theme-toggle { background: #111; border: 1px solid #fff; } html.theme-sun .theme-toggle button.active, body.theme-sun .theme-toggle button.active { background: #facc15; color: #000; } / Print: force light theme, hide chrome. / @media print { html, body { background: #fff !important; color: #000 !important; } .navbar, footer, .theme-toggle, .no-print { display: none !important; } .card, .table, .lane-cell { box-shadow: none !important; border-color: #ccc !important; } } / In-page confirmation overlay (RowOps.confirm + data-confirm). Lives in app.css so every theme + page picks up the same shell, and the page-level CSP isn't bypassed by an inline