/* ============================================================================ * AW Design System — Token layer * * Single source of truth for colour / type / spacing across all AW sites. * Modelled on family/www/css/ft-theme.css (the mature tokenisation) and * populated with the palette already shared by nh.css + ft26.css + _skel. * * Load BEFORE the site's own .css. To rebrand a site, set * data-brand on and override only what differs. * * @created 2026-08-13 * @updated 2026-08-23 - --aw-read-w reading-column width token * @updated 2026-08-24 - +--aw-cred-* credit-state ramp, +--aw-yt * @updated 2026-08-23 - prose tokens adopted from awDocs; +--aw-font-doc/-code, * --aw-prose-pre-border, --aw-prose-zebra * ============================================================================ */ :root { /* ── Brand ───────────────────────────────────────────────── */ --aw-primary: #1abc9c; /* ft-primary */ --aw-primary-dark: #16a085; /* nh accent, ft-primary-dark */ --aw-primary-light: #48c9b0; /* nh navbar gradient tail */ --aw-accent: #efc050; /* nh gold (legacy w3-theme) */ /* ── Neutrals ────────────────────────────────────────────── */ --aw-dark: #2c3e50; --aw-dark-deep: #1a252f; --aw-bg: #f4f6fa; --aw-card-bg: #ffffff; --aw-text: #222222; --aw-text-light: #333333; --aw-text-muted: #555555; --aw-text-on-dark: #ffffff; --aw-text-on-dark-2: #ecf0f1; --aw-text-inactive: #95a5a6; --aw-link: var(--aw-primary); --aw-border: #eeeeee; --aw-border-mid: #cccccc; --aw-hover-light: rgba(255,255,255,0.08); --aw-hover-dark: rgba(0,0,0,0.15); /* ── Incidental surfaces ─────────────────────────────────── */ --aw-bg-subtle: #f8fafc; /* stat rows, list-row hover */ --aw-hover-subtle: #eef2f3; /* dropdown item hover */ --aw-text-dim: #7f8c8d; /* dimmer than text-inactive */ --aw-text-on-dark-3: #cfd8dc; /* dateline text */ --aw-link-on-dark: #5dade2; /* links on dark footers */ /* ── Prose / rendered Markdown ─────────────────────────────── Shared by the .aw-md-doc block in every site. Kept as one named group so the reading surface stays consistent site to site. Values are awDocs' (awd.c1/view), adopted 2026-08-23: awd renders the same kind of content — English technical Markdown — and had already settled on GitHub's neutral greys. The previous set was tinted pale blue, which reads as decoration on a page whose job is code and tables. --aw-prose-rule is deliberately shared with .aw-page-title so a CMS page heading and a doc's h1 sit on the same rule. */ --aw-prose-pre-bg: #f6f8fa; --aw-prose-pre-border: #e8e8e8; --aw-prose-code-bg: #f0f2f5; --aw-prose-rule: var(--aw-border); --aw-prose-table-border: #dddddd; --aw-prose-th-bg: #f4f6f8; --aw-prose-zebra: #fafbfc; --aw-prose-quote-bg: transparent; --aw-prose-quote-fg: #666666; /* ── Person / gender surfaces ──────────────────────────────── Background tints for a person chip, tag or card, keyed by gender and by living / passed-away. Passed-away is a LIGHTER version of the same gender colour, never grey: greying the dead throws the gender indicator away, and in a family tree gender is the one thing the eye reads first. The mark that goes with these tints is ℗ — see aw-components.css (.aw-p-*) for the classes and the mark's meaning. Sites may re-point these; family/www/css/ft-theme.css keeps its own --ft-*-bg pair for the pedigree cards, tuned to the same rule. */ --aw-person-m-bg: #ddffff; /* w3-pale-blue — living male */ --aw-person-f-bg: #ffdddd; /* w3-pale-red — living female */ --aw-person-u-bg: #f1f1f1; /* w3-light-grey — gender unknown */ --aw-person-m-dead-bg: #eeffff; /* lighter blue — passed away */ --aw-person-f-dead-bg: #ffeeee; /* lighter pink — passed away */ --aw-person-u-dead-bg: #f8f8f8; /* only the genderless fade grey */ /* ── Status ──────────────────────────────────────────────── */ --aw-success: #27ae60; --aw-warning: #f39c12; --aw-error: #e74c3c; --aw-info: #3498db; /* ── Credit / reconciliation state ─────────────────────────────── A reconciliation screen has four states for a fact: bound, available elsewhere, unknown, and unreachable. Deliberately NOT the Status ramp above: those are fills, these carry TEXT on a white card, and --aw-success #27ae60 is only ~2.8:1 there. Each of these clears 4:1. Introduced for aw1's /piz; the concept is not section-specific. */ --aw-cred-ok: #1e8e4f; /* bound to a uwid */ --aw-cred-ok-bg: #e6f4ec; --aw-cred-sync: #2372b5; /* known upstream, uncopied */ --aw-cred-sync-bg: #e4eff9; --aw-cred-gap: #c96a12; /* nobody knows — the work */ --aw-cred-gap-bg: #fdf0e2; /* Brand red, for a YouTube affordance only. Not a status colour. */ --aw-yt: #c4302b; --aw-yt-bg: #fdeaea; /* ── Typography ──────────────────────────────────────────── */ --aw-font: 'Heebo', Arial, Helvetica, sans-serif; --aw-font-heading: heeboBlack, 'Heebo', sans-serif; /* set by aw-rtl.css on h1–h6 */ --aw-font-mono: Consolas, Menlo, 'Courier New', monospace; /* The rendered-Markdown block opts out of Heebo. These are English technical docs; a system UI face renders them at a real regular weight on every platform and matches awd.c1/view. Site chrome keeps --aw-font. */ --aw-font-doc: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --aw-font-code: 'Cascadia Code', 'Fira Code', Consolas, monospace; --aw-font-size: 16px; --aw-line-height: 1.5; /* ── Shape & depth ───────────────────────────────────────── */ --aw-radius: 12px; --aw-radius-sm: 6px; --aw-radius-card: 10px; --aw-shadow-1: 0 1px 4px rgba(0,0,0,.08); /* Viewport rim on .aw-main. A token because .aw-page-flush cancels exactly this amount to put the RCOL against the window edge — two hardcoded 12px that must agree is precisely the pair that drifts. */ --aw-main-pad-x: 12px; /* Reading-column cap for page templates that opt in via .aw-read. No class = the page uses the full width of .aw-main; a template that wants a readable measure adds .aw-read and gets this number, once, from here. */ --aw-read-w: 900px; --aw-shadow-2: 0 2px 8px rgba(0,0,0,.15); --aw-shadow-3: 0 4px 10px rgba(0,0,0,.13); /* ── W3.CSS 5 palette ────────────────────────────────────── */ /* The colours introduced in W3.CSS 5, as tokens, so our components can use them without hardcoding hex and without depending on a `w3-*` class being present. Values copied verbatim from w3css/5/w3.css — keep in sync with that file. RAW PALETTE, deliberately separate from the Status group above: `w3-warning` (#ffb305) is a different colour from `--aw-warning` (#f39c12), and quietly redefining a semantic token would restyle every existing site. Point a semantic token at a palette entry only as a deliberate, per-site decision. The trailing comment on each line is the foreground w3.css pairs with it. */ --aw-paper: #f8f9fa; /* white / cream — on #000 */ --aw-asphalt: #343a40; /* dark grey — on #fff */ --aw-crimson: #a20025; /* reddish — on #fff */ --aw-cobalt: #0050ef; /* blue — on #fff */ --aw-emerald: #008a00; /* green — on #fff */ --aw-olive: #6d8764; /* army — on #fff */ --aw-taupe: #87794e; /* brownish — on #fff */ --aw-sienna: #a0522d; /* rusty — on #fff */ --aw-amber: #ffb305; /* w3-warning — on #000 */ /* ── Chrome ──────────────────────────────────────────────── */ --aw-navbar-bg: var(--aw-dark); --aw-navbar-fg: var(--aw-text-on-dark-2); --aw-navbar-active: var(--aw-primary); --aw-footer-bg: var(--aw-dark); } /* ── Brand skin: nh (teal gradient navbar, gold role accents) ── */ [data-brand="nh"] { --aw-navbar-bg: linear-gradient(135deg, #16a085 0%, #48c9b0 100%); --aw-navbar-fg: #ffffff; --aw-navbar-active: #ffffff; --aw-accent: #efc050; } /* ── Brand skin: ft / family (solid dark navbar, teal underline) ── */ [data-brand="ft"] { --aw-navbar-bg: var(--aw-dark); --aw-navbar-fg: var(--aw-text-on-dark-2); --aw-navbar-active: var(--aw-primary); } /* ════════════════════════════════════════════════════════════════ W3.CSS THEME LADDER Prefer these class names in markup — `w3-theme-l4`, `w3-theme-d1`, `w3-text-theme` — over bespoke per-site classes. nh already uses them 231 times, so this is the established vocabulary. The classes below are defined ONCE and read their colours from the ladder variables, so a brand swap is a single `data-brand` attribute rather than a second copy of the ruleset. Generated with the same lightness profile as the W3Schools colour generator. ════════════════════════════════════════════════════════════════ */ :root { /* teal ladder — generated from --aw-primary #1abc9c */ --aw-theme-l5: #f5fefc; --aw-theme-l5-fg: #000; --aw-theme-l4: #ddfaf5; --aw-theme-l4-fg: #000; --aw-theme-l3: #bdf6eb; --aw-theme-l3-fg: #000; --aw-theme-l2: #9bf1e0; --aw-theme-l2-fg: #000; --aw-theme-l1: #7aedd6; --aw-theme-l1-fg: #000; --aw-theme: #1abc9c; --aw-theme-fg: #fff; --aw-theme-d1: #18ab8d; --aw-theme-d1-fg: #fff; --aw-theme-d2: #15987e; --aw-theme-d2-fg: #fff; --aw-theme-d3: #12856e; --aw-theme-d3-fg: #fff; --aw-theme-d4: #10715e; --aw-theme-d4-fg: #fff; --aw-theme-d5: #0d5f4f; --aw-theme-d5-fg: #fff; } /* nh gold ladder — the exact values already generated into w3-theme-nh.css. Kept byte-identical so nh's 231 existing usages render unchanged when it converts. */ [data-brand="nh"] { --aw-theme-l5: #fefbf5; --aw-theme-l5-fg: #000; --aw-theme-l4: #fcf2dc; --aw-theme-l4-fg: #000; --aw-theme-l3: #f9e6ba; --aw-theme-l3-fg: #000; --aw-theme-l2: #f5d997; --aw-theme-l2-fg: #000; --aw-theme-l1: #f2cd75; --aw-theme-l1-fg: #000; --aw-theme: #efc050; --aw-theme-fg: #000; --aw-theme-d1: #ecb535; --aw-theme-d1-fg: #000; --aw-theme-d2: #e9ab18; --aw-theme-d2-fg: #000; --aw-theme-d3: #ce9613; --aw-theme-d3-fg: #fff; --aw-theme-d4: #b08010; --aw-theme-d4-fg: #fff; --aw-theme-d5: #936b0e; --aw-theme-d5-fg: #fff; } .w3-theme-l5 { color: var(--aw-theme-l5-fg) !important; background-color: var(--aw-theme-l5) !important } .w3-theme-l4 { color: var(--aw-theme-l4-fg) !important; background-color: var(--aw-theme-l4) !important } .w3-theme-l3 { color: var(--aw-theme-l3-fg) !important; background-color: var(--aw-theme-l3) !important } .w3-theme-l2 { color: var(--aw-theme-l2-fg) !important; background-color: var(--aw-theme-l2) !important } .w3-theme-l1 { color: var(--aw-theme-l1-fg) !important; background-color: var(--aw-theme-l1) !important } .w3-theme { color: var(--aw-theme-fg) !important; background-color: var(--aw-theme) !important } .w3-theme-d1 { color: var(--aw-theme-d1-fg) !important; background-color: var(--aw-theme-d1) !important } .w3-theme-d2 { color: var(--aw-theme-d2-fg) !important; background-color: var(--aw-theme-d2) !important } .w3-theme-d3 { color: var(--aw-theme-d3-fg) !important; background-color: var(--aw-theme-d3) !important } .w3-theme-d4 { color: var(--aw-theme-d4-fg) !important; background-color: var(--aw-theme-d4) !important } .w3-theme-d5 { color: var(--aw-theme-d5-fg) !important; background-color: var(--aw-theme-d5) !important } /* Semantic aliases (W3 generator convention) */ .w3-theme-light { color: var(--aw-theme-l5-fg) !important; background-color: var(--aw-theme-l5) !important } .w3-theme-dark { color: var(--aw-theme-d5-fg) !important; background-color: var(--aw-theme-d5) !important } .w3-theme-action { color: var(--aw-theme-d5-fg) !important; background-color: var(--aw-theme-d5) !important } /* Text / border / hover — w3-text-theme is used 45× in nh alone */ .w3-text-theme { color: var(--aw-theme) !important } .w3-border-theme { border-color: var(--aw-theme) !important } .w3-hover-theme:hover { color: var(--aw-theme-fg) !important; background-color: var(--aw-theme) !important } .w3-hover-text-theme:hover { color: var(--aw-theme) !important } .w3-hover-border-theme:hover { border-color: var(--aw-theme) !important } /* Light/dark text shades — nh's w3-theme-nh.css exposes these too */ .w3-text-l5 { color: var(--aw-theme-l5) !important } .w3-text-l4 { color: var(--aw-theme-l4) !important } .w3-text-l3 { color: var(--aw-theme-l3) !important } .w3-text-l2 { color: var(--aw-theme-l2) !important } .w3-text-l1 { color: var(--aw-theme-l1) !important } .w3-text-d1 { color: var(--aw-theme-d1) !important } .w3-text-d2 { color: var(--aw-theme-d2) !important } .w3-text-d3 { color: var(--aw-theme-d3) !important } .w3-text-d4 { color: var(--aw-theme-d4) !important } .w3-text-d5 { color: var(--aw-theme-d5) !important } /* ── Layout & RTL are NOT defined here ────────────────────────── Layout comes from aw-flex.css (aw-row / aw-half / aw-l*-m*-s*), which is RTL-aware through flexbox + dir and deliberately replaced W3.CSS float columns. RTL chrome fixes come from aw-rtl.css. Do not re-add `[dir="rtl"] .w3-col { float:right }` here — aw-rtl.css removed those on purpose and re-introducing them resurrects the float grid. Load order in layout.tpl: w3.css → aw-rtl.css → aw-flex.css → aw-tokens.css → .css ──────────────────────────────────────────────────────────────── */ [v-cloak] { display: none !important; }