/* * Theme system: three selectable themes, all built on the same set of CSS custom properties, so * every component below stays theme-agnostic (they only ever reference var(--...)). main.js sets * `data-theme="..."` on (see applyThemeAttribute()) based on state.theme, persisted to * localStorage — see renderGlobalControls()'s theme switcher buttons in render.js. * * Contrast was measured (WCAG relative-luminance formula) for the primary text/background pair * and the accent colors in every theme, using the original dark amber theme's measured 14.94:1 as * the reference bar Bill confirmed was "accessible" for this app: * terminal-amber (original): text/bg 14.94:1, accent/bg 8.87:1 * terminal-slate (new dark): text/bg 15.37:1, accent/bg 9.64:1 * daylight (new light): text/bg 14.51:1, accent/bg 7.53:1 * All three clear WCAG AAA (7:1) for primary body text. 2026-07-13 readability pass: every * theme's --accent-amber-dim and --text-dim were brightened/darkened to clear at least WCAG AA * (4.5:1) against --bg-void (daylight's dim accent now clears AAA); per-value before/after * ratios are annotated inline in each theme block below. * * `--pip-text` exists because die-pip badges (Ability/Proficiency dice, see render.js's * dicePoolPipsHtml) put small bold text directly on an accent-colored background. In the dark * themes the accent colors are bright enough that dark (#111) text reads fine; daylight's accent * colors are deliberately darkened (to stay readable as TEXT on a light background), which makes * dark-on-dark pip text fail — so daylight flips this to white instead of trying to find one accent * shade that works as both light-on-dark-bg text AND a legible pip background simultaneously. */ :root, :root[data-theme="terminal-amber"] { --bg-void: #0e0c09; --bg-panel: #1c1811; --bg-panel-raised: #262019; --bg-panel-deep: #16130d; --border-metal: #453a29; --border-metal-light: #6b5c42; --accent-amber: #e2a33d; /* dim tier brightened 2026-07-13 (was #8f6a2a, 3.96:1): 5.01:1 on --bg-void — clears WCAG AA for the small labels/buttons that use it. Same pass raised --text-dim below. */ --accent-amber-dim: #a37a30; --accent-rust: #b8492f; --accent-rust-dim: #6e2d1e; --accent-navy: #445972; --accent-navy-dim: #2b3a4a; --accent-green: #6a9955; --text-parchment: #ece0c8; --text-muted: #a89a80; --text-dim: #8a7f6a; /* was #6b6252 (3.25:1); now 4.95:1 (AA) on --bg-void */ --glow-amber: rgba(226, 163, 61, 0.28); --pip-text: #111111; } /* Slate Terminal — a second dark theme: same "outer-rim terminal" darkness and contrast profile as the original, but a cool blue/cyan accent instead of warm amber/rust, for players who'd prefer that to the amber palette without giving up the dark, high-contrast terminal feel entirely. */ :root[data-theme="terminal-slate"] { --bg-void: #0a0d10; --bg-panel: #131a20; --bg-panel-raised: #1b232b; --bg-panel-deep: #0c1114; --border-metal: #33424f; --border-metal-light: #52697a; --accent-amber: #4fc3f0; --accent-amber-dim: #3f92b3; /* was #2f7691 (3.82:1); now 5.54:1 (AA) on --bg-void */ --accent-rust: #d9704f; --accent-rust-dim: #8a4530; --accent-navy: #8fb4d6; --accent-navy-dim: #4a6c8c; --accent-green: #6fbf73; --text-parchment: #dbe6ee; --text-muted: #93a5b3; --text-dim: #75879a; /* was #5c6c78 (3.59:1); now 5.28:1 (AA) on --bg-void */ --glow-amber: rgba(79, 195, 240, 0.28); --pip-text: #0a0d10; } /* Daylight — a light, high-contrast theme for players who find a dark terminal harder to read in bright rooms, or simply prefer light mode. Every accent color was individually re-picked (not just darkened uniformly) to clear at least WCAG AA against the light background — see the contrast notes above the :root block. */ :root[data-theme="daylight"] { --bg-void: #f4f1ea; --bg-panel: #ffffff; --bg-panel-raised: #f7f4ec; --bg-panel-deep: #ece7da; --border-metal: #c9c0a8; --border-metal-light: #a89a80; --accent-amber: #6e430f; --accent-amber-dim: #6f440c; /* was #8a5410 (5.55:1); now 7.42:1 (AAA) on --bg-void */ --accent-rust: #7a2812; --accent-rust-dim: #a13a22; --accent-navy: #25394f; --accent-navy-dim: #3d5975; --accent-green: #2c5a2c; --text-parchment: #241f16; --text-muted: #55503f; --text-dim: #6d654f; /* was #837a63 (3.78:1); now 5.14:1 (AA) on --bg-void */ --glow-amber: rgba(110, 67, 15, 0.22); --pip-text: #ffffff; } * { box-sizing: border-box; } /* Typography: two-font system. - 'Big Shoulders Stencil Text' (loaded via .stencil, and directly on a handful of h2/h3/button elements below) is the DISPLAY font — big titles, short section headers, button labels. Its stencil/cargo-crate styling is the most visible piece of the "scrappy outer-rim terminal" theme, and it's forgivable there because those are short strings at larger sizes. - 'IBM Plex Mono' is the BODY/DATA font for everything else — paragraphs, talent/skill descriptions, the character sheet, form inputs. It replaced Rajdhani (a geometric sci-fi display font, not actually optimized for extended reading) specifically because talent and skill descriptions are dense, multi-sentence rules text that people have to actually read start to finish. IBM Plex Mono was chosen over other monospace options (JetBrains Mono, Space Mono) because it has a notably open, generously-spaced letterform designed for on-screen legibility at small sizes, while still reading as "terminal readout" text — arguably a better thematic fit for a datapad/terminal UI than Rajdhani ever was, not just a legibility fix. */ body { margin: 0; background: var(--bg-void); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px); color: var(--text-parchment); font-family: 'IBM Plex Mono', monospace; font-size: 15px; line-height: 1.5; min-height: 100vh; } .stencil { font-family: 'Big Shoulders Stencil Text', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; } button { font-family: inherit; } /* ===================================================================================== 2026-07-13 REDESIGN LAYOUT (from the approved mobile/desktop mockups) sticky topbar → step-progress strip → .frame (nav rail | main | dossier) Mobile (<900px): rail hides, bottom tab bar shows; dossier becomes a bottom sheet; the talent inspector becomes a bottom sheet. Same markup, CSS switches presentation. ===================================================================================== */ /* ---- sticky topbar ---- */ .topbar { position: sticky; top: 0; z-index: 30; background: var(--bg-panel-deep); border-bottom: 1px solid var(--border-metal); } .topbar-row { display:flex; align-items:center; gap:14px; padding: 10px 18px 8px; } .topbar .brand { font-size: 10px; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; line-height:1.35; } .topbar .who { min-width: 0; } .topbar .tb-name { font-weight: 700; color: var(--accent-amber); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .tb-sub { font-size: 11px; line-height: 1.4; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-spacer { flex: 1; } /* Topbar chips use their own tb-chip class — NOT .chip, which is the career-card skill label (QA bugfix 2026-07-13: sharing .chip gave career skill labels a 44px min-height and pushed long ones like "Knowledge (Outer Rim)" outside their card). */ .tb-chip { flex-shrink: 0; border: 1px solid var(--border-metal-light); background: var(--bg-panel-raised); padding: 5px 12px; font-size: 12.5px; font-weight: 700; border-radius: 3px; text-align: center; line-height: 1.2; font-family: inherit; cursor: pointer; color: var(--text-parchment); min-height: 44px; } .tb-chip small { display: block; font-size: 9px; font-weight: 400; color: var(--text-muted); letter-spacing: 0.08em; } .chip-xp { color: var(--accent-amber); border-color: var(--accent-amber-dim); } .chip-cr { color: var(--accent-green); } /* Topbar utility buttons/links (account button, HQ's "◂ Character Builder" door). Works for BOTH