/* 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 type scales (size, weight and line-height), 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, the type scales (size, weight and line-height) 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; /* Type-size scale. An absolute rem step ladder, named largest-first (7xl) down to smallest (2xs), with the unsuffixed --font-size as the body/base step. The upper steps (3xl–7xl) carry the heading sizes; each heading climbs one step at the ≥550px breakpoint, so the steps double as both the mobile and desktop heading sizes (see the headings block in site.css). The html element is sized to 62.5% so 1rem = 10px. */ --font-size-7xl: 5rem; --font-size-6xl: 4.2rem; --font-size-5xl: 4rem; --font-size-4xl: 3.6rem; --font-size-3xl: 3rem; --font-size-2xl: 2.4rem; --font-size-xl: 2.2rem; --font-size-l: 1.8rem; --font-size: 1.5rem; --font-size-s: 1.2rem; --font-size-xs: 1rem; --font-size-2xs: 0.8rem; /* Font-weight scale. The five numeric weights the type faces ship, named by the conventional CSS weight keywords so each rule reads at a glance. --font-weight-regular is the body default; --font-weight-bold is the heaviest used (the brand, header links and nav). */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line-height scale. Leading steps named by feel: --line-height-tight and --line-height-snug suit the large headings, --line-height-normal is body copy, and --line-height-relaxed gives airy blocks. Purely geometric line-heights (1 to collapse an inline glyph to its box, a px value matching a control's height) stay literal in site.css — they are layout, not typographic leading. */ --line-height-tight: 1.2; --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.6; /* 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); } /* Med — medical-inspired light theme, clean and clinical. The dominant 60% is a near-white cool ground (--page) with pure-white raised surfaces, reading as paper and panel under clinic light; the secondary 30% is a clinical blue tint (--tint, ~218°) carrying links, focus and the active state; and a warm coral-red (--accent, ~2°) is the rare 10% pop on primary actions and the brand mark. Both brand seeds were deepened from their vivid source values (accent 236 97 91, tint 114 167 248) so a single shared white --button-text and accent-as-text alike clear WCAG AA on the near-white ground. Destructive is pushed to a deeper brick red so the danger role stays visually distinct from the coral accent. Colours only — it inherits the default sans face and corner scale from :root, with a clean clinical header skin defined below. */ [data-theme="med"] { --page: #f6f9fd; --surface: #ffffff; --surface-sunken: #e9f0f8; --border: #d1deeb; --text: #14202e; --text-dim: #4f5e6d; --button-text: #ffffff; --accent: #c63d38; --tint: #2c66d1; --destructive: #9e1f17; --destructive-soft: #f4d5d2; --focus-ring: #2c66d1; --good: #1e7a3a; --good-soft: #d7efe0; --warn: #b5800f; --warn-soft: #f8edcf; --passive: #647280; --passive-soft: #e5ebf1; --active: #2c66d1; --active-soft: #d9e6fa; --shadow: 0px 2px 4px 0px rgba(20, 32, 46, 0.1); } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 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 { margin-top: var(--space-xs); 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); } /* Med: a clean clinical letterhead — a white surface bar stretched across the full page width with squared corners and no shadow, its lower edge marked by a 2px clinical-blue rule (--tint) that reads as the line beneath a clinic header. box-sizing folds .site-header's side padding and the border into the 100% so the bar never overflows the viewport. */ [data-theme="med"] header { box-sizing: border-box; width: 100%; background: var(--surface); border: none; border-bottom: 2px solid var(--tint); border-radius: 0; box-shadow: none; }