/* theme.css — the look of the site lives here. Most visual choices a theme makes are CSS variables in this file: the type families, the corner-radius scale, the shadow, and the colour roles that every rule in site.css consumes. site.css owns layout and structure and reads these tokens — it should not need editing to restyle the site. The one exception is the site header: because the brand bar carries so much of the site's character, its skin is styled per-theme in the "Header skin" section at the foot of this file, while site.css keeps only the bar's internal layout (.site-header). To author a new theme: copy one [data-theme] block below, rename it, and change the values. A theme normally sets just the colour roles; it may also override --font-sans / --font-mono and the radius scale, and may add a `[data-theme="…"] header` rule to reshape the brand bar (see "sea" and "underwater"). Activate a theme by setting the `site_theme` setting to its name — the shells emit it as . An unset or unknown setting falls back to the :root baseline (dark), so the site is always fully themed. This file evolved from Natural Selection: https://github.com/frontaid/natural-selection */ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Tokens shared by every theme — type families and the corner-radius scale. Themes may override any of these. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ :root { /* Type families. --font-sans is the UI/body face; --font-mono is for code and other monospaced text. */ --font-sans: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Corner-radius scale. --radius is the workhorse (cards, inputs, buttons, tables, blocks); --radius-s rounds small controls; --radius-pill rounds any control into a full pill regardless of its height (the browser clamps it to half the shorter side). */ --radius-s: 0.3rem; --radius: 0.4rem; --radius-pill: 10rem; /* Default theme: DARK. These role variables are the baseline every rule consumes; they are also the fallback when no (or an unknown) data-theme is set, so a complete dark palette is always present. An emitted data-theme="dark" resolves here — there is no separate dark block. */ --page: #021421; --surface: #132c40; --surface-sunken: #01111c; --border: #334d66; --text: #f5f8fa; --text-dim: #cad7e0; /* Label colour for filled buttons (solid accent/tint/destructive fills), where the body --text tone is frequently too low-contrast. In this default (dark) palette it tracks --text; every other theme overrides it to white. */ --button-text: var(--text); --accent: #e66700; --tint: #2475b3; --destructive: #e64839; --destructive-soft: #66120a; --focus-ring: #2475b3; --good: #24b33c; --good-soft: #0a661a; --warn: #e6ac39; --warn-soft: #66470a; --passive: #a1a8b3; --passive-soft: #4c5159; --active: #245db3; --active-soft: #0a2f66; --shadow: 0px 2px 4px 0px #01111c; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Themes — each block is a complete, self-contained palette. Copy one, rename the data-theme value, and recolour. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* Light — neutral near-white ground; hues tuned for WCAG AA contrast. */ [data-theme="light"] { --page: #f5f8fa; --surface: #ffffff; --surface-sunken: #e9eef2; --border: #c8d3dc; --text: #0b1a26; --text-dim: #4c5966; --button-text: #ffffff; --accent: #ad5200; --tint: #2475b3; --destructive: #e64839; --destructive-soft: #f2c9c5; --focus-ring: #2475b3; --good: #1e7a2e; --good-soft: #ddf2e1; --warn: #b5800f; --warn-soft: #fbefd2; --passive: #6b7480; --passive-soft: #e4e8ec; --active: #1e5ba8; --active-soft: #d7e3f2; --shadow: 0px 2px 4px 0px rgba(11, 26, 38, 0.12); } /* Underwater — deep-water dark theme: the view from below the surface. The dominant 60% is a near-black indigo-violet ground (--page, ~238°) reading as deep water, with the scene's raised surfaces built one step lighter in the same indigo family so panels sit as lit shapes in the depth; the secondary 30% is a deep electric-blue tint (--tint, ~234°) analogous to the ground, keeping the cool field in one family; and the cyan accent (~190°) is the rare 10% pop — the bioluminescent glow on links, icons and the waterline. The accent is deepened to #0b809b (rather than a brighter cyan) so a single shared white --button-text clears WCAG AA on the small 11px button labels across the accent, tint and destructive fills alike. Colours only — it inherits the default sans face and corner scale from :root. */ [data-theme="underwater"] { --page: #030a1f; --surface: #20223f; --surface-sunken: #0c0d1c; --border: #363a66; --text: #eceef8; --text-dim: #a6aac8; --button-text: #ffffff; --accent: #16b8d9; --tint: #1424cc; --destructive: #f2555a; --destructive-soft: #4a1419; --focus-ring: #0b809b; --good: #34c76a; --good-soft: #103a22; --warn: #e6b34d; --warn-soft: #3d2e10; --passive: #8a8fa8; --passive-soft: #2c2e48; --active: #3a4ad6; --active-soft: #181c4e; --shadow: 0px 2px 8px 0px rgba(4, 5, 14, 0.55); } /* Sea — teal-dominant dark theme. The neutral ground is built on the tint's hue (~197°), with the background a very dark version of the tint; the vermilion accent sits near-complementary to that ground for a hot pop against the cool field, and the amber seed carries the warning role. Colours only, so it inherits the default type face and corner scale from :root. */ [data-theme="sea"] { --page: #0b1f27; --surface: #123440; --surface-sunken: #05151b; --border: #20505f; --text: #eef5f7; --text-dim: #a6bcc4; --button-text: #ffffff; --accent: #fc4e26; --tint: #3d8199; --destructive: #e23a4a; --destructive-soft: #3a141b; --focus-ring: #4ea3c1; --good: #46b06b; --good-soft: #103320; --warn: #ffba66; --warn-soft: #3d2c12; --passive: #8597a0; --passive-soft: #2a3b42; --active: #2f91b0; --active-soft: #0e2d3a; --shadow: 0px 2px 8px 0px rgba(2, 10, 14, 0.55); } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Header skin — the brand bar's character. This is the one component theme.css styles directly rather than only via tokens: the baseline rule reproduces the default floating, pill-rounded bar, and each theme may reshape it freely below. The bar's internal flex layout (brand left, nav right) stays in site.css on .site-header. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* Baseline (dark and light): a surface-coloured bar inset to 94% of the page, fully pill-rounded and lifted with the theme shadow. */ header { width: 94%; height: 4.44rem; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow); } /* Midnight: square off the corners and stretch the bar across the full page width. box-sizing folds .site-header's side padding and the border into the 100% so the bar never overflows the viewport. */ [data-theme="sea"] header { box-sizing: border-box; } /* Underwater: a "waterline" bar — a pale surface band (#cecfd9) seen from below the dark water, stretched across the full page width with squared corners and no shadow, its lower edge marked by a 2px cyan accent line that reads as the shimmer where light meets the surface. box-sizing folds .site-header's side padding and the border into the 100% so the bar never overflows the viewport. */ [data-theme="underwater"] header { box-sizing: border-box; width: 100%; border: none; border-bottom: 2px solid var(--scene); border-radius: 0; box-shadow: none; background: var(--tint); }