/* ============================================================================ THEME — every colour in the app lives here. Change a value, refresh the page. Colours are RGB triplets ("R G B", no commas) so each can be reused at any opacity: rgb(var(--accent)) or rgb(var(--accent) / 0.2). To use a hex colour, convert it: #FFB500 -> 255 181 0. Palette taken from xceedance.com. Roles come after the palette; point a role at a different palette colour (or any colour) to restyle that part of the UI. ============================================================================ */ :root { /* ---- Brand palette (xceedance.com) ---- */ --night: 27 11 16; /* #1B0B10 page background */ --wine: 83 14 35; /* #530E23 */ --crimson: 155 27 52; /* #9B1B34 */ --cream: 255 249 235; /* #FFF9EB */ --amber: 255 181 0; /* #FFB500 */ --glow: 255 226 168; /* #FFE2A8 light gold for glints and sparkles */ --sand: 245 239 230; /* #F5EFE6 page background, as on the admin dashboard */ --orange: 240 124 34; /* #F07C22 */ /* ---- Page: light outside; the cards are dark (see "Inside cards" at the end) ---- */ --page-bg: var(--sand); --page-glow: var(--glow); /* soft light behind the content */ --text: var(--night); /* headings and body text */ --text-muted: var(--night); /* used at reduced opacity: see --muted-a */ --muted-a: 0.7; /* opacity of secondary text */ --faint-a: 0.5; /* opacity of hints and captions */ --accent: var(--crimson); /* eyebrows, counters, ticks, focus rings */ --headline-hi-1: var(--crimson); /* the gradient on highlighted headline words */ --headline-hi-2: var(--orange); /* ---- Cards (question card, sign-in, results panels, dialog) ---- */ --card-bg: var(--wine); /* top of the card's gradient, applied at --card-a */ --card-a: 1; /* solid: a dark card on the light page */ --card-a2: 1; /* opacity of the gradient's bottom colour */ --card-shadow: 83 14 35 / 0.55; /* colour / opacity of the card's drop shadow */ --card-bg-2: var(--night); /* bottom of the card's gradient */ --card-border: var(--cream); /* applied at 0.14 */ --card-title: var(--cream); /* ---- Answer tiles and form fields inside cards ---- */ --field-bg: var(--cream); /* applied at 0.05 */ --field-border: var(--cream); /* applied at 0.16; hover 0.4 */ --selected-bg: var(--cream); /* applied at 0.12 */ --selected-line: var(--cream); /* border of a selected answer */ --selected-mark: var(--cream); /* the filled tick box */ --selected-mark-fg: var(--night); /* the tick inside it */ --selected-glint: var(--amber); /* the light that runs round a selected answer */ /* ---- Buttons on the page (Begin survey, Continue, See my results, Download PDF) ---- */ --btn-primary-bg: var(--wine); --btn-primary-fg: var(--cream); --btn-primary-hover: var(--crimson); --btn-next-bg: 44 12 21; /* #2C0C15 Continue: just below the middle of the card gradient (wine -> night) */ --btn-glass-bg: var(--wine); /* secondary buttons, applied at 0.1 */ --btn-glass-fg: var(--night); --btn-glass-border: var(--wine); /* applied at 0.22 */ /* ---- Messages ---- */ --error: 190 40 30; /* readable on light */ --warn-bg: 228 81 58; /* sync / session warnings, applied at 0.16 */ /* ---- Progress ---- */ --progress-from: var(--crimson); /* bar gradient, start -> end */ --progress-to: var(--amber); --step-done: var(--amber); /* answered step circle */ --step-done-fg: var(--night); --step-current: var(--wine); /* current step circle */ --step-current-fg: var(--cream); /* ---- Results heatmap bands (1 = mature ... 5 = critical), the survey document's colour scale ---- */ --band-1: 46 158 91; /* #2E9E5B Green 1.0–1.9 Mature */ --band-2: 152 203 97; /* #98CB61 Light green 2.0–2.9 Generally healthy */ --band-3: 255 181 0; /* #FFB500 Amber 3.0–3.7 Material constraint */ --band-4: 240 124 34; /* #F07C22 Orange 3.8–4.4 High priority */ --band-5: 222 59 59; /* #DE3B3B Red 4.5–5.0 Critical */ /* ---- Printed PDF (always light paper, whatever the screen theme) ---- */ --print-paper: 255 255 255; --print-ink: var(--night); --print-accent: var(--crimson); /* ---- Effect highlights (confetti, the thanks medal) ---- */ --fx-ember: 214 110 48; --fx-light: 255 236 190; /* ---- Type ---- */ --serif: 'amarelle', 'Crimson Pro', Georgia, serif; --read: Georgia, 'Iowan Old Style', 'Times New Roman', serif; /* survey questions: upright and easy to read */ --sans: 'DM Sans', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } /* ---- Inside cards: the dark theme (question card, sign-in card and badge, results panels, dialog). Keep this list in step with the one at the top of styles.css. ---- */ .sv-card,.lg-card,.lg-mark,.rs-panel,.rs-stat,.dlg-card{ --page-bg: var(--night); --text: var(--cream); --text-muted: var(--cream); --muted-a: 0.72; --accent: var(--amber); --headline-hi-1: var(--amber); --headline-hi-2: var(--glow); --btn-primary-bg: var(--cream); /* Sign in; Start again in the dialog */ --btn-primary-fg: var(--wine); --btn-primary-hover: 255 255 255; --btn-glass-bg: 255 255 255; --btn-glass-fg: var(--cream); --btn-glass-border: var(--cream); --error: 255 164 138; /* #FFA48A readable on dark */ } /* ---- Login, home and thanks: the original dark page with glass cards (app.js sets data-theme per screen) ---- */ :root[data-theme="dark"]{ --page-bg: var(--night); --page-glow: var(--wine); --text: var(--cream); --text-muted: var(--cream); --muted-a: 0.72; --accent: var(--amber); --headline-hi-1: var(--amber); --headline-hi-2: var(--glow); --card-a: 0.38; --card-a2: 0.72; --card-shadow: 0 0 0 / 0.85; --btn-primary-bg: var(--cream); --btn-primary-fg: var(--wine); --btn-primary-hover: 255 255 255; --btn-glass-bg: 255 255 255; --btn-glass-fg: var(--cream); --btn-glass-border: var(--cream); --error: 255 164 138; --step-current: var(--cream); --step-current-fg: var(--wine); }