/* --------------------------------------------------------------------------- tokens.css — the single source of truth for color in the app. Loaded before every other stylesheet. Rule: no other file defines a raw color. If you need one, add it here. Both themes are defined below. `data-bs-theme` is set on by the no-flash script in layouts/main.handlebars, so these switch together with Bootstrap's own dark mode. --------------------------------------------------------------------------- */ :root, [data-bs-theme='light'] { /* Surfaces, lightest to most raised */ --surface-0: #F4F7F7; /* page background */ --surface-1: #FFFFFF; /* cards, panels */ --surface-2: #E9EFEF; /* hover, striped rows, wells */ /* Text */ /* Measured against --surface-0; all clear 4.5:1 for small text. */ --ink: #16272E; /* body copy — 14.29:1 */ --ink-muted: #4A6068; /* secondary copy — 6.16:1 */ --ink-faint: #5A7178; /* timestamps, hints — 4.79:1 */ /* Lines */ --line: rgba(22, 39, 46, 0.14); --line-strong: rgba(22, 39, 46, 0.26); /* Brand accent — Hila's red. Never used for body copy. */ --accent: #C42B2B; /* 5.23:1 on surface-0 — safe for large text + UI */ --accent-hover: #A31F1F; --accent-contrast: #FFFFFF; /* text on a filled accent surface */ --accent-wash: rgba(196, 43, 43, 0.09); /* Secondary accent, inherited from the portfolio palette */ --sage: #79A8A9; --sage-wash: rgba(121, 168, 169, 0.16); --shadow: 0 1px 2px rgba(22, 39, 46, .06), 0 8px 24px rgba(22, 39, 46, .07); /* The amber flash that marks a newly arrived audition row. */ --highlight-flash: #FFF3CD; --highlight-flash-strong: #FFEAA5; } [data-bs-theme='dark'] { /* Near-black rather than #000: pure black against bright content creates a hard luminance edge that increases perceived glare and halation. #0A0C0D reads as black while staying restful, which is the point of the change. */ --surface-0: #0A0C0D; --surface-1: #141819; --surface-2: #1E2426; /* Measured against --surface-0. */ --ink: #E7EDED; /* 16.55:1 */ --ink-muted: #A3B1B3; /* 8.86:1 */ --ink-faint: #7C8B8E; /* 5.55:1 */ --line: rgba(231, 237, 237, 0.13); --line-strong: rgba(231, 237, 237, 0.26); /* Saturated red on black is the worst case for chromatic aberration — the eye cannot focus red and black in the same plane, so it shimmers. This is lifted and desaturated to stay legible without vibrating. */ --accent: #FF6B6B; /* 7.06:1 on surface-0 */ --accent-hover: #FF8F8F; --accent-contrast: #12080A; --accent-wash: rgba(255, 107, 107, 0.14); --sage: #8FC7C8; /* 10.43:1 on surface-0 */ --sage-wash: rgba(143, 199, 200, 0.14); --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45); /* Same amber cue, held dark enough that the row's text stays readable through the flash instead of inverting for four seconds. */ --highlight-flash: #4A3F14; --highlight-flash-strong: #6B5A1B; } /* --------------------------------------------------------------------------- Hand our tokens to Bootstrap so its components inherit the palette instead of being patched one at a time. --------------------------------------------------------------------------- */ :root, [data-bs-theme='light'], [data-bs-theme='dark'] { --bs-body-bg: var(--surface-0); --bs-body-color: var(--ink); --bs-secondary-color: var(--ink-muted); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--line); --bs-emphasis-color: var(--ink); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-hover); --bs-heading-color: var(--ink); /* Bootstrap builds table stripes/hovers from these */ --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--ink); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--ink); --bs-accordion-bg: var(--surface-1); --bs-accordion-color: var(--ink); --bs-accordion-border-color: var(--line); --bs-accordion-btn-color: var(--ink); --bs-accordion-btn-bg: var(--surface-1); --bs-accordion-active-bg: var(--surface-2); --bs-accordion-active-color: var(--ink); --bs-card-bg: var(--surface-1); --bs-card-color: var(--ink); --bs-card-border-color: var(--line); --bs-modal-bg: var(--surface-1); --bs-modal-color: var(--ink); --bs-modal-border-color: var(--line); --bs-form-control-bg: var(--surface-1); --bs-form-control-color: var(--ink); } body { background-color: var(--surface-0); color: var(--ink); } /* --------------------------------------------------------------------------- Focus. Bootstrap's default focus ring is tinted blue and disappears on a near-black surface — this one is visible in both themes. --------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* --------------------------------------------------------------------------- Admin nav. The action row is a single non-wrapping flex line by default, which pushed Log Out off the right edge of a phone. Below the lg breakpoint the labels are doing little work next to their icons, so the buttons tighten up and the row is allowed to reflow. --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .admin-nav-actions { justify-content: flex-start; row-gap: 8px; } /* Labels off, icons only — five labelled buttons wrap to five full-width rows and push the page content below the fold before it starts. */ .admin-nav-actions .admin-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .admin-nav-actions .btn { display: inline-flex; align-items: center; justify-content: center; /* Square and comfortably past the 44px touch minimum. */ min-width: 46px; min-height: 46px; padding: 0 12px; font-size: 15px; } /* Without this the buttons resolve to the full width of the action row and stack one per line, even with their labels out of flow. Sizing them explicitly from content is what actually keeps them on a single row. */ .admin-nav-actions > .btn { flex: 0 0 auto; width: auto; } } /* --------------------------------------------------------------------------- The public theme toggle. Deliberately quiet: it should be findable without competing with the page it sits on. --------------------------------------------------------------------------- */ .public-theme-toggle { /* Absolute, not fixed. Fixed kept it pinned to the viewport edge, which sits inboard of the content column below ~1150px — so it covered the chevron of whichever credit row was at the top of the screen, for the whole scroll. It now sits with the hero and scrolls away; the theme is a set-once choice, not something worth shadowing 8,000px of content for. */ position: absolute; top: clamp(12px, 2.5vw, 22px); right: clamp(12px, 2.5vw, 22px); z-index: 20; /* 44px square clears the touch minimum on its own. */ width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-1); color: var(--ink-muted); font-size: 15px; cursor: pointer; transition: color .18s ease-out, border-color .18s ease-out, background-color .18s ease-out; } .public-theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); } @media print { .public-theme-toggle { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }