/* ========================================================================= ORIGINAL LIMITED — THEME LAYER 2: PRIMITIVES ========================================================================= Eight shapes. Every section on this site is built from these eight, and so is every section built after today. WHY THEY EXIST An audit of the codebase found sixty component families and 352 classes doing the work of roughly eight things. Six separate vocabularies rendered "a small mono tag above a title above a body paragraph". Six more rendered "a big number above a label". That is why new sections kept being rebuilt from scratch: each private family looked unique, so each looked like it needed its own build. The primitives below do not replace those families. Each existing family is a thin skin over a primitive, and the migration map in theme/README.md says which. Nothing is deleted. New work composes the primitives; old work is ported across when it is next touched for any other reason. 1 o-surface a section or block that owns a tone 2 o-head a heading plus its supporting paragraph 3 o-tag the small mono label 4 o-row a ruled row: tag, title, body 5 o-panel a facet or cell 6 o-stat a figure and its label 7 o-stack vertical rhythm 8 o-grid layout RULES THAT APPLY TO EVERY PRIMITIVE - Tone is inherited, never hardcoded. Use --text-strong, not #fff. - One elevation. Border OR shadow, never both. - Nothing animates from opacity 0 on every section. - Colour only where it means something. ========================================================================= */ /* ---- 1. o-surface ------------------------------------------------------ The tone setter. One component, any surface, no per-surface modifier. --------------------------------------------------------------------- */ .o-surface { background: var(--surface-1, var(--c-paper)); color: var(--text-strong); } .o-surface--light { background: var(--c-paper); color: var(--t-on-light); } .o-surface--raise { background: var(--c-carbon-lift); color: var(--t-on-dark); } .o-surface--dark { background: var(--c-carbon); color: var(--t-on-dark); } .o-surface--deep { background: var(--c-carbon-deep); color: var(--t-on-dark); } .o-surface--flush { padding: 0; } /* A surface modifier must flip the SEMANTIC tokens beneath it, not just its own colour. Setting `color` alone leaves --text-body resolving to the light-surface value, so every descendant using --text-body renders dark-on-dark. This was the first bug the proof harness caught: the entire point of the semantic layer is that tone is inherited, and the modifiers were not inheriting it. */ .o-surface--light, .surface-light { --text-strong: var(--t-on-light); --text-body: var(--t-on-light-dim); --text-accent: var(--c-gold-ink); --divider: var(--rule-on-light); --surface-1: var(--c-paper); --surface-2: var(--c-white); } .o-surface--dark, .o-surface--deep, .o-surface--raise, .surface-dark { --text-strong: var(--t-on-dark); --text-body: var(--t-on-dark-dim); --text-accent: var(--c-gold); --divider: var(--rule-on-dark); --surface-1: var(--c-carbon); --surface-2: var(--c-carbon-lift); } .o-surface--dark { --surface-1: var(--c-carbon); } .o-surface--deep { --surface-1: var(--c-carbon-deep); } .o-surface--raise { --surface-1: var(--c-carbon-lift); --surface-2: var(--c-carbon-deep); } /* ---- 2. o-head --------------------------------------------------------- A heading and its paragraph. More space above the heading than below it. --------------------------------------------------------------------- */ .o-head { margin: 0 0 var(--s-6); } .o-head > :first-child { margin-top: 0; } .o-head > :last-child { margin-bottom: 0; } .o-head__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lead-snug); letter-spacing: var(--track-tight); color: var(--text-strong); margin: 0 0 var(--s-4); text-wrap: balance; } .o-head__title em { font-style: normal; color: var(--text-accent); } .o-head__body { font-size: var(--fs-body); line-height: var(--lead-loose); color: var(--text-body); max-width: var(--measure); margin: 0; } /* Two-column head: title left, supporting copy right. Preferred where the section has a strong title and the paragraph would otherwise trail it in a thin measure. */ .o-head--split { display: grid; gap: var(--s-4) clamp(24px, 3.4vw, 56px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } @media (max-width: 820px) { .o-head--split { grid-template-columns: 1fr; } } /* ---- 3. o-tag ---------------------------------------------------------- The small mono label. It labels a thing; it never becomes a kicker above a heading, which the craft floor bans outright. --------------------------------------------------------------------- */ .o-tag { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-micro); line-height: var(--lead-snug); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-accent); margin: 0; font-variant-numeric: tabular-nums; } .o-tag--plain { color: var(--text-body); text-transform: none; letter-spacing: var(--track-snug); } /* ---- 4. o-row ---------------------------------------------------------- A ruled row: tag, title, body. The workhorse. Replaces .arch-row, .nfy-row, .res-card, .narr-block, .prov-* and .ledger-* once ported. --------------------------------------------------------------------- */ .o-rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-1) solid var(--divider); } .o-row { display: grid; gap: var(--s-2) clamp(20px, 3vw, 48px); grid-template-columns: minmax(0, 14ch) minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; padding: clamp(18px, 2.1vw, 27px) 0; border-bottom: var(--rule-1) solid var(--divider); } .o-row__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lead-snug); letter-spacing: var(--track-snug); color: var(--text-strong); margin: 0; text-wrap: pretty; } .o-row__body { font-size: var(--fs-body); line-height: var(--lead-loose); color: var(--text-body); margin: 0; max-width: var(--measure-tight); } /* Two-column variant for exclusions and short lists */ .o-row--2 { grid-template-columns: minmax(0, 24ch) minmax(0, 1fr); align-items: baseline; } .o-row--2 .o-row__title { font-size: var(--fs-h3); } @media (max-width: 900px) { .o-row { grid-template-columns: 1fr; } } @media (max-width: 820px) { .o-row--2 { grid-template-columns: 1fr; } } /* ---- 5. o-panel -------------------------------------------------------- A facet or cell. One elevation. Radius stays in the 12-16px band. --------------------------------------------------------------------- */ .o-panel { background: var(--surface-2, transparent); border: var(--rule-1) solid var(--divider); border-radius: var(--r-lg); padding: clamp(18px, 2.2vw, 32px); min-width: 0; } /* Origami facet. Opposing corner cuts read as folds; keep the cut small enough that it never clips text. */ .o-panel--facet { border: 0; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); } .o-panel__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lead-snug); letter-spacing: var(--track-snug); color: var(--text-strong); margin: 0 0 var(--s-2); } .o-panel__body { font-size: var(--fs-body); line-height: var(--lead-normal); color: var(--text-body); margin: 0; } .o-panel__foot { font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lead-normal); color: var(--text-body); margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: var(--rule-1) solid var(--divider); } /* ---- 6. o-stat --------------------------------------------------------- A figure and its label. Gold is reserved for the figure so the number is the loudest thing in the cell without anything shouting. --------------------------------------------------------------------- */ .o-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } .o-stat { min-width: 0; } .o-stat__icon { display: block; font-size: 1.1rem; line-height: 1; color: var(--c-gold); opacity: .82; margin: 0 0 .5em; } .o-stat__value { display: block; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-figure); line-height: .96; letter-spacing: var(--track-tight); color: var(--c-gold); font-variant-numeric: tabular-nums; margin: 0 0 .34em; } .o-stat__label { display: block; font-size: var(--fs-small); line-height: var(--lead-normal); color: var(--text-body); max-width: 28ch; } /* ---- 7. o-stack -------------------------------------------------------- Vertical rhythm. The spacing scale lives in tokens; this just applies it. --------------------------------------------------------------------- */ .o-stack { display: flex; flex-direction: column; gap: var(--s-5); } .o-stack--1 { gap: var(--s-2); } .o-stack--2 { gap: var(--s-4); } .o-stack--3 { gap: var(--s-6); } .o-stack--4 { gap: var(--s-7); } .o-stack > :first-child { margin-top: 0; } .o-stack > :last-child { margin-bottom: 0; } /* ---- 8. o-grid --------------------------------------------------------- Layouts. Breakpoint-free where the grid can carry it. --------------------------------------------------------------------- */ .o-grid { display: grid; gap: clamp(18px, 2.2vw, 32px); } .o-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .o-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Featured-plus-supporting: one dominant cell, the rest supporting. Replaces four equal cells, which is the lazy container the craft floor bans as a page structure. */ .o-grid--lead { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); align-items: start; gap: 0 clamp(28px, 3.4vw, 56px); } @media (max-width: 960px) { .o-grid--3, .o-grid--4, .o-grid--lead { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); } .o-grid--lead { gap: clamp(26px, 5vw, 40px); } } @media (max-width: 640px) { .o-grid--2 { grid-template-columns: 1fr; } } /* ---- shared ------------------------------------------------------------ */ .o-measure { max-width: var(--measure); } .o-measure--tight { max-width: var(--measure-tight); } .o-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Spacing rhythm: more space above a heading than below it. */ .o-section { padding-block: clamp(44px, 6vw, 88px); } .o-section__head { margin-block-end: clamp(28px, 3.2vw, 46px); } /* Sections fade in on first view, from an already-visible default. One authored moment for the page, not a fade on everything. */ @media (prefers-reduced-motion: no-preference) { .o-rise { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); } .o-rise.is-in { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .o-rise { opacity: 1; transform: none; } } /* ========================================================================= BRIDGE — the 60 legacy families onto the 8 primitives ========================================================================= The primitives shipped and nothing used them: 24KB loaded on all twelve pages, zero o-* classes in the markup. Rather than rewrite twelve pages that already work, the existing vocabulary is aliased onto the primitives so the primitives become the single place a shared value is decided. EVERY RULE HERE IS WRAPPED IN :where(), WHICH HAS ZERO SPECIFICITY. That is the whole safety argument. A :where() selector contributes nothing, so any existing rule in components.css or styles.css outranks it by definition. The bridge can supply a value; it can never override one. There is no path by which this file changes what the site currently looks like -- which is what makes it safe to land on twelve pages at once. What it buys: when a token changes, one edit moves every family that reads it. `.bnum-n`, `.tally-num b`, `.res-value` and `.lane-num` all say "a figure"; they now all say it by reading --figure-scale from one place instead of four hard-coded sizes that drifted apart. ========================================================================= */ /* --- 1. figures: one scale, four vocabularies -------------------------- */ :where(.bnum-n, .tally-num b, .res-value, .lane-num, .triage-v) { font-variant-numeric: tabular-nums; } /* NOTHING may be added here on the strength of ":where() has zero specificity". That is not the same as inert. Zero specificity means a declared value wins; an INHERITED value does not, because inheritance loses to any declaration at any specificity. These families inherit font-family and line-height from their parent, so a rule that merely SUPPORTS a value silently changes it. Measured: an earlier draft of this file declared font-family and line-height here and changed four elements across three pages -- ".tally-num b" moved from Archivo to Reeler, ".lane-num" had its leading crushed from 19px to 11px. Both are visible. The only safe primitive is one the family already declares identically, and check-bridge-inert.py proves it before it lands. */ /* --- 2. the label under a figure ---------------------------------------- */ /* color only: every one of these declares its own size and leading, and two of them inherit it -- declaring it here crushed .lane-num from 19px to 11px. */ :where(.bnum-l, .tally-label, .res-label, .lane-name, .triage-t) { color: var(--text-body); } /* --- 3. the tag --------------------------------------------------------- */ :where(.arch-tag, .prov-tag, .triage-label, .ind-label) { font-family: var(--font-mono); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; font-variant-numeric: tabular-nums; } /* --- 4. ruled rows ------------------------------------------------------ */ :where(.arch-row, .nfy-row, .res-card) { padding-block: clamp(18px, 2.1vw, 27px); } :where(.arch-title, .nfy-name) { font-family: var(--font-heading); font-weight: 700; letter-spacing: var(--track-snug); line-height: var(--lead-snug); } :where(.arch-body, .nfy-why) { line-height: var(--lead-loose); color: var(--text-body); } /* --- 5. panel / facet cells --------------------------------------------- */ :where(.bento-card, .bc, .lane-tile, .ind-col, .tier) { border-radius: var(--r-lg); min-width: 0; } /* --- 6. section heads --------------------------------------------------- */ :where(.band-head h2, .nfy-head h2, .triage-head h2, .page-title) { font-family: var(--font-heading); font-weight: 700; letter-spacing: var(--track-tight); line-height: var(--lead-snug); text-wrap: balance; } /* --- 7. body measure ---------------------------------------------------- */ /* Same reason: .res-ctx declares no max-width, so one supplied here narrowed the featured cards from 575px to 419px on a page that was already fine. The measure belongs to the families that already own it. */ :where(.arch-body, .nfy-why) { max-width: var(--measure-tight); } .css-parse-sentinel { --css-parse-sentinel: 1; }