/* ════════════════════════════════════════════════════════════════════ FROST — the single design-token spine + core kit. Two modes: Arclight (dark, default) · Bloom (light). Scoped to html so these tokens WIN over every legacy :root block (higher specificity) without !important. This one file re-themes the whole portal; page-level styles are migrated onto it in later phases. Rulebook: frost portal design rules (2026-07-15). ════════════════════════════════════════════════════════════════════ */ /* ---- font roles (apply the type system everywhere) ---- */ html{ --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; /* The WORDMARK stack, and it is deliberately not --display. Until 2026-08-19 the House of Shishir wordmark asked for `Fraunces, 'Cormorant Garamond', 'EB Garamond', Georgia, serif` — and Frost has no @font-face, no font files and no font CDN, so NONE of the first three has ever existed on any machine that opened Frost. Measured: all three return the identical advance as the generic `serif`, i.e. the mark rendered in the browser's Times. That is the typographic twin of the user-agent-blue bug: an unloaded font is a typeface decision made by the browser. This stack contains ONLY fonts that genuinely ship with macOS and Windows, ordered so the two the founder actually uses land within 1 unit of each other: Iowan Old Style 257.87u, Georgia 258.83u for "HOUSE OF SHISHIR" at 27px. Do not add a font here that is not installed by the OS. */ --display-mark:"Iowan Old Style",Georgia,Palatino,"Palatino Linotype","Times New Roman",serif; --ui:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; --dc-ui:var(--ui); --rm-ui:var(--ui); --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,monospace; /* V14 (21 Oct 2026): ONE font for every figure. The UI sans with tabular numerals — columns of rupees line up digit under digit. Use with font-variant-numeric:tabular-nums (the .num / .v14-num classes do both). */ --num:var(--ui); --radius-1:8px; --radius-2:12px; /* V14 surface — "Modern & minimal" pilot, Family Office expenses page only (scoped by .ui-v14, 2026-10-21). Soft grey canvas, white rounded cards, barely-there shadow, one warm hero gradient. Gradients are dark enough at every stop to carry --c-invert-fg ink at 4.5:1. */ --radius-3:16px; --radius-pill:999px; --v14-canvas:var(--bg); --v14-surface:var(--card); --v14-soft:var(--parchment-2); --v14-line:var(--border); --v14-ink:var(--ink); --v14-muted:var(--muted); --v14-on-ink:var(--parchment); --v14-glass:rgba(244,239,230,.14); --v14-glass-bd:rgba(244,239,230,.28); --v14-on-grad:#F4EFE6; --v14-on-grad-muted:rgba(244,239,230,.82); --v14-track:rgba(244,239,230,.24); --shadow-soft:0 1px 2px rgba(14,17,22,.04),0 4px 16px rgba(14,17,22,.05); --shadow-lift:0 2px 6px rgba(14,17,22,.06),0 14px 32px rgba(14,17,22,.09); /* TACTILE LAYER (22 Oct 2026, founder: "clean, professional, minimal, 3D, button clicking and hovering UI like V14"). Elevation + button depth, ONE place; parchment_theme.css rebinds the colours. Never write a shadow raw. */ --elev-1:0 1px 1px rgba(14,17,22,.05),0 2px 4px rgba(14,17,22,.05),0 8px 20px -8px rgba(14,17,22,.10); --elev-2:0 2px 3px rgba(14,17,22,.06),0 6px 12px rgba(14,17,22,.07),0 18px 36px -12px rgba(14,17,22,.16); --btn-depth:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(14,17,22,.12),0 3px 0 -1px rgba(14,17,22,.10); --btn-raise:inset 0 1px 0 rgba(255,255,255,.65),0 2px 4px rgba(14,17,22,.14),0 8px 16px -6px rgba(14,17,22,.20); --btn-press:inset 0 2px 4px rgba(14,17,22,.22),0 0 0 rgba(14,17,22,0); --focus-ring:0 0 0 2px var(--v14-surface),0 0 0 4px var(--c-gold-solid); --lift-y:-2px; --press-y:1px; --grad-gold:linear-gradient(135deg,var(--c-gold-solid) 0%,#3F3216 55%,var(--ink) 100%); /* ---- SPACING SCALE (founder HARD rule, 2026-08-13) ---------------------- "Keep a standardised spacing between all elements fixed across Frost." Before this there was no scale: department pages used 6, 7, 9, 10, 11, 12, 14, 16, 18, 22, 24 and 26px gaps chosen a page at a time, which is why the Operations overview read as if the blocks had been dropped rather than laid out. Seven steps. Nothing between them. If a gap needs a value that is not on this list, the layout is wrong, not the list. --sp-1 4px inside a control (icon→label) --sp-2 8px inside a block (label→value, chip→chip) --sp-3 12px between rows in a list --sp-4 16px between blocks inside a section --sp-5 24px between sections on a page --sp-6 32px between major regions --sp-7 48px page top/bottom breathing room Use the three SEMANTIC aliases in page CSS, not the raw steps — they say what the gap is for, so a later change stays coherent. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-tight:var(--sp-2); /* within a block */ --sp-block:var(--sp-4); /* block → block */ --sp-section:var(--sp-5); /* section → section */ --pad-card:var(--sp-3) var(--sp-4); /* every card / panel, no exceptions. 12px 16px since 2026-08-18 (founder): it was 14px 16px, and 14 is not on the scale above — Frost's own rule 1 broken by Frost's own token. Snapped DOWN to keep pages short. */ --pad-chip-y:var(--sp-1); /* the two halves of --pad-chip, named so a chip can compensate its own trailing tracking (`calc(var(--pad-chip-x) - var(--track))`) without hard-coding 8px — 2026-08-19. */ --pad-chip-x:var(--sp-2); --pad-chip:var(--pad-chip-y) var(--pad-chip-x); /* 4px 8px — every chip / pill / badge. Added 2026-08-18. Before this, chips invented their own vertical padding 111 times across the console (1px, 2px and 3px), all of it below --sp-1 and none of it on any scale. A chip is a control, so it gets ONE token — same reasoning as --control-h. */ --pad-page:var(--sp-5); /* page gutter */ --control-h:38px; /* every button, select and input target (see the coarse-pointer override below — 38px is a mouse target, 44px is a thumb target) */ /* ---- FIXED-OBJECT CONSTANTS (2026-08-18) ------------------------------- These are NOT spacing choices and the --sp-* scale does not govern them: each one measures a real object that something else must clear. Snapping 58px to 48px does not make a page tidier, it slides content under the mobile tab bar. Named here so the audit can tell a measurement apart from a margin, and so a change to the bar changes every clearance with it. */ --table-max-h:75vh; /* tall tables scroll inside this so their header can stick */ --tabbar-h:58px; /* mobile bottom tab bar (mobile_app.css) */ --tabbar-clear:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); --staffbar-clear:80px; /* staff detail sticky action bar */ /* ── THE PAGE HEADLINE ─────────────────────────────────────────────────── 2026-09-11, founder: *"all of the main headings and announcement pages for every page in family office and overall in Frost has to be reworked, this design and section UI and interface, interactiveness needs to be redone."* `.headline` is the heading block on 208 templates — every page that does not use the department cockpit kit. It had NO base styling anywhere: the only rules touching it were a non-Frost brand override and one mobile font-size. So on 208 pages the eyebrow, the title and the subtitle rendered as three identical paragraphs of body text, and the eyebrow's `← Finance` link came out as default underlined link text. There was nothing to redesign, because nothing had been designed. This is the same defect as the cockpit kit shipping markup without its stylesheet, and it takes the same shape of fix: style the contract here, at zero specificity, so all 208 pages inherit it and none has to be edited. Deliberately matches `_page_hero.html`, which is the same design for the pages that DO use the kit — one heading in Frost, two entry points. ──────────────────────────────────────────────────────────────────────── */ .headline { margin:0 0 var(--sp-section); padding-bottom:var(--sp-block); border-bottom:1px solid var(--border); } .headline__eyebrow { margin:0 0 var(--sp-1); font-size:var(--fs-micro); --track:var(--track-3); letter-spacing:var(--track); text-transform:uppercase; font-weight:650; color:var(--c-gold-fg); } /* The eyebrow is usually a back-link. It is navigation, so it reads as a control — not as underlined prose the size of the body copy. */ .headline__eyebrow a { color:inherit; text-decoration:none; } .headline__eyebrow a:hover { text-decoration:underline; } .headline__text { font-size:var(--fs-display); font-weight:700; line-height:1.1; min-width:0; overflow-wrap:anywhere; } .headline__sub { display:block; margin-top:var(--sp-2); max-width:68ch; font-size:var(--fs-base); color:var(--fg-muted); } /* Actions, where a page has them, are controls with their own box and gap — the defect that put `Home planner →Personal books →` on one unbroken line. */ .headline__actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); } .headline__actions a { display:inline-flex; align-items:center; min-height:var(--control-h); padding:0 var(--sp-3); border:1px solid var(--c-gold-bd); border-radius:999px; background:var(--c-gold-bg); color:var(--c-gold-fg); font-size:var(--fs-small); font-weight:650; text-decoration:none; white-space:nowrap; } .headline__actions a:hover { background:var(--c-gold-solid); color:var(--c-invert-fg); } @media (max-width:52rem){ .headline__text { font-size:var(--fs-xl); } } /* THE BOTTOM-RIGHT LADDER. Three fixed things want that corner — the scroll-to-top button, the realtime toast stack and its mute pill — and each arrived separately, picked its own `bottom`, and won or lost on z-index alone. On 2026-09-11 the toast wrap (z-index 9999) sat exactly over the scroll button (z-index 60) at desktop width, and the mobile tab bar (z-index 80) sat over it at phone width: a control that renders, is the right colour, and cannot be reached. A corner with no owner gets three owners. `--fab-h` is the button; anything stacking ABOVE it starts at `--fab-clear`. Both clear a real object, so the spacing scale does not govern them (CLAUDE.md, 2026-08-18). */ --fab-h:42px; /* #scrollTopBtn, 46px under pointer:coarse */ --fab-clear:calc(var(--sp-4) + var(--fab-h) + var(--sp-3)); --topbar-indent:42px; /* clears the absolutely-placed topbar glyph */ /* ---- TYPE RAMP (founder-approved 2026-08-18) --------------------------- Frost had no type tokens at all. Sizes were chosen a page at a time, which produced SIXTEEN of them in the founder cockpit alone — 13px and 13.5px side by side, which is not a hierarchy, it is the absence of one. Eight steps. Nothing between them. Same law as the spacing scale: if a label needs a size that is not on this list, the hierarchy is wrong, not the list. --fs-micro 10px uppercase letterspaced labels --fs-tiny 11px chips, meta, timestamps --fs-small 12px secondary text --fs-body 13px TABLE BODY — the cockpit's workhorse --fs-base 14px default UI text --fs-lg 16px section heads --fs-xl 20px page titles --fs-display 28px hero numbers Collapsed into it: 9, 9.5, 10.5 → 10 · 11.5 → 11 · 12.5 → 12 · 13.5 → 13 14.5, 15 → 14 · 17, 18 → 16 · 22, 24 → 20 · 30, 32 → 28 */ --fs-micro:10px; --fs-tiny:11px; --fs-small:12px; --fs-body:13px; --fs-base:14px; --fs-lg:16px; --fs-xl:20px; --fs-display:28px; /* ---- TRACKING SCALE + the trailing-space law (2026-08-19, founder) ------ Founder, on the House of Shishir wordmark: *"remove the space after Shishir then fix that space everywhere across Frost."* THE DEFECT, and it is in the CSS spec rather than in any one page: `letter-spacing` inserts its tracking AFTER the last character too. A letterspaced string therefore always carries one tracking-width of DEAD SPACE on its right edge — invisible, but it is part of the box. So: · centred text sits half a tracking LEFT of where it looks like it should (`OPERATIONS` in a centred tab reads off-centre), · text bracketed between two rules has a bigger gap on the right than on the left (exactly what the founder photographed), · and any box sized from a text measurement is one tracking too wide. THE FIX, declared once, here. Write your tracking as `--track` and take `letter-spacing` from it; the net below reclaims the trailing space for you. You do not have to know this rule exists to be protected by it: .thing { --track: var(--track-4); letter-spacing: var(--track); } Enforced by `ops/hig_audit.py::check_letterspacing_trailing` at pre-commit and in the nightly `sentinel.checks.design_rules`. */ --track-1:.02em; /* display type, optical nudge only */ --track-2:.04em; /* chips, pills, tags */ --track-3:.06em; /* small-caps meta, table eyebrows */ --track-4:.10em; /* the wordmark, buttons, tab labels */ --track-5:.14em; /* footer column heads, section eyebrows */ --track-6:.20em; /* the widest tracking Frost uses */ /* deal-flow chip palette (mode-independent constants — moved here from the stray cockpit.css :root so frost.css is the sole token source) */ --chip-operating:#1e88e5; --chip-hyd:#43a047; --chip-fundraise:#8e24aa; --chip-personal:#fb8c00; --chip-unknown:#757575; --chip-stage:#455a64; --bd-yellow:#fff8c4; --bd-yellow-fg:#6e5d00; } /* ════════════════════════════════════════════════════════════════════ THE TRAILING-SPACE NET (2026-08-19). See the tracking scale above. `--track` is registered as a NON-INHERITED property with an initial value of zero. That is what makes the net below safe to point at every text element in Frost: on an element that never opted in, `calc(-1 * var(--track))` resolves to `0em`, which is already every one of these elements' used value. Nothing moves. On an element that DID opt in, the trailing tracking is reclaimed from the layout and the ink lands where the eye expects it. Zero specificity (`:where`), so any real rule still wins — the net is a floor, exactly like the `a` colour rule and the `-btn` anchor rule. `blockquote` and `figure` are deliberately absent: they are the only two elements whose user-agent margin-inline-end is NOT zero (40px), so they are the only two the net could not be inert on. ════════════════════════════════════════════════════════════════════ */ @property --track { syntax: ""; inherits: false; initial-value: 0em; } :where(h1,h2,h3,h4,h5,h6,p,a,span,div,li,dt,dd,td,th,label,button,small, strong,em,b,i,legend,summary,figcaption,caption,abbr,time,output) { margin-inline-end: calc(-1 * var(--track)); } /* ════ ARCLIGHT — dark (default) ════ */ html.theme-dark, :root{ /* grounds & surfaces */ --bg:#0C0F17; --bg2:#0E121C; --bg-elevated:#141926; --bg-elev:#141926; --bg-soft:#10141F; --surface:#141926; --surface-muted:#1C2233; --dc-bg:#0C0F17; --parchment:#141926; --parchment-2:#1C2233; --brand-bg-elev:#141926; /* panels / cards */ --card:#141926; --cardin:#1C2233; --dc-panel:#141926; --panel:#141926; --panel-2:#1C2233; --panel-3:#232B42; --dc-panel-2:#1C2233; --rm-panel:#141926; --rm-panel-2:#1C2233; --rm-ink-soft:#C0CADE; /* text */ --fg:#EBEFF8; --ink:#EBEFF8; --dc-ink:#EBEFF8; --rm-ink:#EBEFF8; --fg-muted:#C0CADE; --ink-soft:#C0CADE; --soft:#C0CADE; --dc-ink-soft:#C0CADE; --ink-dim:#828FA8; --muted:#828FA8; --mut:#828FA8; --dc-muted:#828FA8; --rm-muted:#828FA8; --rm-dim:#828FA8; --faint:#5A6478; /* lines */ --border:rgba(130,160,240,.13); --border-strong:rgba(130,160,240,.24); --brand-border:rgba(130,160,240,.24); --line:rgba(130,160,240,.10); --rule:rgba(130,160,240,.10); --rule-soft:rgba(130,160,240,.06); --bd:rgba(130,160,240,.13); --dc-line:rgba(130,160,240,.10); --rm-line:rgba(130,160,240,.10); /* accent + gold (gold = brand & money only) */ --accent:#5B8DEF; --accent-h:#82A6F6; --accent-p:#3E6BC4; --brand-accent:#5B8DEF; --gold:#D4AF57; --gold-2:#8C7436; --bronze:#D4AF57; --dc-gold:#D4AF57; --rm-gold:#D4AF57; --cyan:#48D6E0; --violet:#A98BF5; /* semantic */ --pos:#46E09A; --success:#46E09A; --dc-green:#46E09A; --rm-green:#46E09A; --warn:#E7AC52; --dc-amber:#E7AC52; --rm-amber:#E7AC52; --danger:#FF6E6E; --neg:#FF6E6E; --crit:#FF6E6E; --dc-red:#FF6E6E; --rm-red:#FF6E6E; --pos-b:rgba(70,224,154,.14); --warn-b:rgba(231,172,82,.15); --crit-b:rgba(255,110,110,.14); --acc-b:rgba(91,141,239,.16); /* effects */ --focus:rgba(91,141,239,.55); --hud-glow:0 0 24px rgba(91,141,239,.28); --shadow:0 1px 0 rgba(255,255,255,.04),0 14px 38px -18px rgba(0,0,0,.7); --shadow-2:0 1px 0 rgba(255,255,255,.04),0 20px 50px -22px rgba(0,0,0,.78); /* ---- SEMANTIC COLOUR ROLES — Arclight (2026-08-18) --------------------- The console page sheets carried ~250 raw hex values between them, and almost none of them matched a token. They were not a palette; they were 250 separate decisions, each one written the day someone needed a tinted block and reached for the colour picker. They collapse into SEVEN families × THREE roles. A block that needs to read as gold takes all three from the same family and stops choosing: --c--bg the tinted ground behind the block --c--bd its border --c--fg text and icons on that ground This is why they live in the theme block rather than next to the scale: a raw #26200E is a dark-mode decision hardcoded into a page, which is the whole reason Bloom looked wrong — every one of those tinted blocks stayed dark when the founder switched to light. Defined per theme, the SAME rule in the SAME page renders correctly in both. */ --c-gold-bg:#26200E; --c-gold-bd:#7A5F1B; --c-gold-fg:#E7C98A; --c-accent-bg:#17203A; --c-accent-bd:#1F3A8A; --c-accent-fg:#6FA0E0; --c-pos-bg:#12301F; --c-pos-bd:#1F6432; --c-pos-fg:#6DD28B; --c-danger-bg:#2A1416; --c-danger-bd:#8A1F1F; --c-danger-fg:#E3A99F; --c-violet-bg:#1E1830; --c-violet-bd:#3A2D5A; --c-violet-fg:#9A8FB0; --c-cyan-bg:#0E2A2E; --c-cyan-bd:#146A7A; --c-cyan-fg:#7FD3DC; --c-neutral-bg:#1C2233; --c-neutral-bd:#3B4250; --c-neutral-fg:#9E9E9E; /* ---- INVERTED SURFACES ------------------------------------------------ A fourth role, and the one that stops this whole migration from breaking things. Not every dark fill in the console is a mistake left over from the dark era: a few components deliberately paint a dark ground and write light ink on it — the nav dropdowns, the done/undo buttons, the trajectory tip, a filled reject button. Repainting those grounds cream while their ink stayed light would have produced cream-on-cream: invisible, and invisible does not look broken in a screenshot, it looks empty. The pair has to move together, so it is one concept with two tokens. --c-invert-bg / --c-invert-fg a deliberately dark surface --c--solid a SATURATED fill that carries invert-fg (a filled danger button, a violet chip) If you paint --c-invert-bg, the ink on it is --c-invert-fg. Never mix one with a family tint. */ --c-invert-bg:#0E1116; --c-invert-fg:#F4EFE6; --c-invert-bd:#2A3038; --c-gold-bright:#D4AF57; --c-accent-bright:#5B8DEF; --c-pos-bright:#46E09A; --c-danger-bright:#FF6E6E; --c-violet-bright:#A98BF5; --c-cyan-bright:#48D6E0; --c-neutral-bright:#828FA8; /* gold ink ON an inverted surface. The parchment gold (#7A5F1B) is 1.6:1 there — gold has to get BRIGHTER on a dark ground, not darker, or the accent disappears. */ --c-gold-solid:#8C7436; --c-accent-solid:#3E6BC4; --c-pos-solid:#1E5233; --c-danger-solid:#8C2C2C; --c-violet-solid:#5F44A8; --c-cyan-solid:#146A7A; --c-neutral-solid:#0E1116; color-scheme:dark; } /* ════ BLOOM — light ════ */ html.theme-light{ --bg:#EEF3F5; --bg2:#F1F5F8; --bg-elevated:#FFFFFF; --bg-elev:#FFFFFF; --bg-soft:#F3F7F9; --surface:#FFFFFF; --surface-muted:#F3F7F9; --dc-bg:#EEF3F5; --parchment:#FFFFFF; --parchment-2:#F3F7F9; --brand-bg-elev:#FFFFFF; --card:#FFFFFF; --cardin:#F3F7F9; --dc-panel:#FFFFFF; --panel:#FFFFFF; --panel-2:#F3F7F9; --panel-3:#E6EEF3; --dc-panel-2:#F3F7F9; --rm-panel:#FFFFFF; --rm-panel-2:#F3F7F9; --rm-ink-soft:#3A505C; --fg:#132029; --ink:#132029; --dc-ink:#132029; --rm-ink:#132029; --fg-muted:#3A505C; --ink-soft:#3A505C; --soft:#3A505C; --dc-ink-soft:#3A505C; /* #68798A measured 4.48:1 on white — AA wants 4.5, so every small label in the department kit (.dc-kpi__lbl, .dc-targets__lbl, .dc-rollup__status) failed by two hundredths. #617283 is the nearest shade on the same hue that clears 4.5 on white AND on both tinted grounds in use: 4.95 on #FFFFFF, 4.54 on #FDF3F1, 4.59 on #F3F7F9. */ --ink-dim:#617283; --muted:#617283; --mut:#617283; --dc-muted:#617283; --rm-muted:#617283; --rm-dim:#617283; --faint:#95A6B2; --border:rgba(20,50,70,.13); --border-strong:rgba(20,50,70,.22); --brand-border:rgba(20,50,70,.22); --line:rgba(20,50,70,.11); --rule:rgba(20,50,70,.11); --rule-soft:rgba(20,50,70,.06); --bd:rgba(20,50,70,.13); --dc-line:rgba(20,50,70,.11); --rm-line:rgba(20,50,70,.11); --accent:#1E86A6; --accent-h:#146A88; --accent-p:#0F5A76; --brand-accent:#1E86A6; /* LINK INK IS NOT THE ACCENT FILL. --accent is a fill, a border and a glow, where 4.5:1 does not apply; as the colour of WORDS it measured 3.84:1 on #FDF3F1 and 3.88 on #F3F7F9, so every inherited link — .dd-row__fix, the act that ends a disruption row — was unreadable. Splitting the two keeps the brand fill untouched and gives prose a shade that clears AA: 6.09 on white, 5.59 and 5.65 on the tints. Each theme rebinds these to its own. */ --link-ink:#146A88; --link-ink-h:#0F5A76; --gold:#9A7A28; --gold-2:#C6A24C; --bronze:#9A7A28; --dc-gold:#9A7A28; --rm-gold:#9A7A28; --cyan:#1596A6; --violet:#7A50C0; --pos:#12915A; --success:#12915A; --dc-green:#12915A; --rm-green:#12915A; --warn:#B0741A; --dc-amber:#B0741A; --rm-amber:#B0741A; --danger:#C8302A; --neg:#C8302A; --crit:#C8302A; --dc-red:#C8302A; --rm-red:#C8302A; --pos-b:rgba(18,145,90,.12); --warn-b:rgba(176,116,26,.13); --crit-b:rgba(200,48,42,.11); --acc-b:rgba(30,134,166,.12); --focus:rgba(30,134,166,.5); --hud-glow:0 0 22px rgba(30,134,166,.18); --shadow:0 1px 2px rgba(20,40,55,.05),0 14px 34px -18px rgba(20,50,70,.24); --shadow-2:0 1px 2px rgba(20,40,55,.06),0 20px 46px -22px rgba(20,50,70,.28); /* ---- SEMANTIC COLOUR ROLES — Bloom (2026-08-18) ------------------------ Same seven families, same three roles, inverted: the ground goes pale, the text goes deep. Every value here was already somewhere in the console — these are the light-mode tints the page sheets were reaching for and could not name. See the Arclight block above for why this is the fix. */ --c-gold-bg:#FBF6E2; --c-gold-bd:#DED3B8; --c-gold-fg:#8A6D12; --c-accent-bg:#EEF5FF; --c-accent-bd:#C6D8EE; --c-accent-fg:#1F4E8A; --c-pos-bg:#E3F1E8; --c-pos-bd:#BFE0BF; --c-pos-fg:#1E5233; --c-danger-bg:#FDF3F1; --c-danger-bd:#E7B9B1; --c-danger-fg:#B3261E; --c-violet-bg:#F6F1FF; --c-violet-bd:#DDD2F0; --c-violet-fg:#5F44A8; --c-cyan-bg:#EEF3F5; --c-cyan-bd:#B8D4DA; --c-cyan-fg:#146A7A; --c-neutral-bg:#F5F5F5; --c-neutral-bd:#DDDDDD; --c-neutral-fg:#6B6B6B; --c-invert-bg:#132029; --c-invert-fg:#FFFFFF; --c-invert-bd:#3B4250; --c-gold-bright:#E5C97A; --c-accent-bright:#4C84C9; --c-pos-bright:#2F8A47; --c-danger-bright:#C8302A; --c-violet-bright:#7A50C0; --c-cyan-bright:#1596A6; --c-neutral-bright:#68798A; --c-gold-solid:#9A7A28; --c-accent-solid:#1F4E8A; --c-pos-solid:#12915A; --c-danger-solid:#C8302A; --c-violet-solid:#7A50C0; --c-cyan-solid:#146A7A; --c-neutral-solid:#132029; color-scheme:light; } /* ════ THE PAGE SHELL — founder, 2026-08-18 ════════════════════════════════ "I want everything designed and spaced like [Influencer & PR] for every page — that follows my keep-it-clean rule." Three pages, three different amounts of breathing room, and the cause was not that anyone chose badly. It was that `main.cockpit` had NO desktop padding at all, so a page was inset only if it happened to define its own wrapper — and exactly two of 442 templates did. Everything else rendered flush to the browser edge. That is the spacing rule one level up from the --sp-* scale. The scale says which VALUES are legal; it never said who owns the page gutter, so nobody did. This block answers it once: · --pad-page gutter on every side, on every page, inherited not remembered · 1600px max-width so a 27" display does not stretch a table to 2000px · centred, so the gutter is equal on both sides A page must not re-declare these. Two did (`.ip-page`, `.oi-wrap`) and have been reduced to what they actually are — a stacking context — because a page that pads itself inside a padded shell is double-padded, which is the same inconsistency in the opposite direction. */ html main.cockpit{ max-width:1600px; margin-inline:auto; padding:var(--pad-page); min-width:0; } /* Deliberately NOT display:flex. The page shell owns the GUTTER; each page's own wrapper owns its internal rhythm. Changing the display mode of every page's parent at once is a blast radius nobody can screenshot. */ /* ---- base ---- */ html body{ background:var(--bg); color:var(--fg); font-family:var(--ui); -webkit-font-smoothing:antialiased; background-image:radial-gradient(1100px 520px at 84% -10%, color-mix(in oklab,var(--accent) 8%,transparent), transparent 60%); background-attachment:fixed; } html h1,html h2,html h3.display, html .display,html .brand-lockup,html .wordmark{font-family:var(--display)} /* `overflow-wrap:normal` is load-bearing, not tidying: rule 5 below sets `break-word` on every cell for the longest thing in a box (a URL, a SKU), and that rule is WRONG for the most precise thing in it. A number broken between digits leaves a first line that is itself a plausible number, so nothing looks broken — it just reads wrong by an order of magnitude. */ html .num,html [class*="__val"],html .amt,html .money{font-variant-numeric:tabular-nums;font-family:var(--mono);overflow-wrap:normal;word-break:normal} /* FOOTER-FLUSH: footer touches the viewport bottom on a short page (founder 2026-10-28). Column body, main grows, footer takes the slack. */ html body{min-height:100dvh;display:flex;flex-direction:column;margin:0} html body>main{flex:1 0 auto;min-width:0;width:100%;box-sizing:border-box} html body>.footer{margin-top:auto;flex:none} @media print{html body{min-height:0;display:block}} /* ---- footer menu (migrated from onehouse.css) ---- */ html .footer{width:100%;margin:var(--sp-7) 0 0;padding:16px 22px 18px;border-top:1px solid var(--border);color:var(--muted);font-size:var(--fs-body);display:flex;flex-direction:column;gap:14px;background:var(--bg-elevated);box-sizing:border-box;box-shadow:0 -1px 0 color-mix(in oklab,var(--gold) 24%,transparent)} html .footer__row{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap} html .footer__menu{display:grid;grid-template-columns:repeat(4,minmax(140px,220px));gap:24px;justify-content:center;margin:0 auto;width:100%;max-width:1280px} html .footer__col{display:flex;flex-direction:column;gap:6px} html .footer__col-head{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:4px} html .footer__col a{color:var(--muted);text-decoration:none;font-size:var(--fs-body);padding:1px 0} html .footer__col a:hover{color:var(--fg);text-decoration:underline} html .footer__row--meta{border-top:1px solid var(--border);padding-top:10px;margin-top:4px;font-size:var(--fs-tiny);color:var(--muted)} @media(max-width:900px){html .footer__menu{grid-template-columns:repeat(2,minmax(140px,1fr))}} /* ---- mode toggle button (top bar) ---- */ html .frost-mode{cursor:pointer;width:34px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-grid;place-items:center;font-size:var(--fs-base);line-height:1;transition:.15s} html .frost-mode:hover{color:var(--fg);border-color:var(--border-strong)} html .frost-mode:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* ---- signature infographic base classes (kit) ---- */ html .fx-glass{background:linear-gradient(160deg,color-mix(in oklab,var(--card) 92%,transparent),var(--card));border:1px solid var(--border-strong);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),var(--shadow)} html .fx-glow{text-shadow:var(--hud-glow)} html .fx-gauge-track{stroke:var(--panel-3);fill:none} html .fx-gauge-val{stroke:var(--accent);fill:none;stroke-linecap:round;filter:drop-shadow(0 0 6px color-mix(in oklab,var(--accent) 60%,transparent))} html .fx-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-tiny);color:var(--muted)} html .fx-live .p{width:7px;height:7px;border-radius:50%;background:var(--pos);animation:fx-pulse 2.4s infinite} @keyframes fx-pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--pos) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} html .fx-grid-bg{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px} @media(prefers-reduced-motion:reduce){html *{animation:none!important;transition:none!important}} /* radial gauge — wrapper + centred readout (SVG uses .fx-gauge-track/-val) */ html .fx-gauge{position:relative;display:inline-grid;place-items:center;line-height:1} html .fx-gauge svg{display:block;transform:rotate(-90deg)} html .fx-gauge__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center} html .fx-gauge__num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--fg);letter-spacing:-.01em} html .fx-gauge__lbl{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:2px} html .fx-gauge-val--gold{stroke:var(--gold);filter:drop-shadow(0 0 6px color-mix(in oklab,var(--gold) 55%,transparent))} html .fx-gauge-val--pos{stroke:var(--pos);filter:drop-shadow(0 0 6px color-mix(in oklab,var(--pos) 55%,transparent))} html .fx-gauge-val--warn{stroke:var(--warn);filter:drop-shadow(0 0 6px color-mix(in oklab,var(--warn) 55%,transparent))} html .fx-gauge-val--crit{stroke:var(--crit);filter:drop-shadow(0 0 6px color-mix(in oklab,var(--crit) 55%,transparent))} @media(prefers-reduced-motion:no-preference){ html .fx-gauge-val{transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)} } /* ════════════════════════════════════════════════════════════════════ COMPONENT KIT — reusable, token-only, ADD-ONLY class names. Everything resolves through the Arclight/Bloom token spine above, so both modes are covered automatically and no legacy page can break. ════════════════════════════════════════════════════════════════════ */ /* ---- buttons ---- */ html .fbtn{ --_bg:var(--card); --_fg:var(--fg); --_bd:var(--border-strong); display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:9px 16px;border-radius:var(--radius-1);border:1px solid var(--_bd); background:var(--_bg);color:var(--_fg);font:600 13px/1 var(--ui); cursor:pointer;text-decoration:none;white-space:nowrap; transition:transform .12s,box-shadow .15s,border-color .15s,background .15s,filter .15s; } html .fbtn:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:var(--shadow)} html .fbtn:active{transform:translateY(0)} /* Not `opacity:.5` — see rule 2e below. Fading a control halves its contrast, so a 5:1 button became a 2.5:1 button the moment it went off. The disabled net paints this from the neutral tint family; all this rule still owns is that a dead button does not respond to a click. */ html .fbtn:disabled,html .fbtn[aria-disabled="true"]{pointer-events:none} html .fbtn--primary{--_bd:transparent;color:#fff; background:linear-gradient(135deg,var(--accent-h),var(--accent) 55%,var(--accent-p)); box-shadow:0 6px 18px -8px color-mix(in oklab,var(--accent) 70%,transparent)} html .fbtn--primary:hover{filter:brightness(1.06);border-color:transparent} /* A GOLD BUTTON PAINTS THE BRIGHT GOLD, NOT THE INK GOLD. `--gold` is the token for gold TEXT on cream and is deliberately dark (#7A5F1B in the parchment theme); used as a FILL it left the button's own dark label at 3.72:1 — measured on /finance/remittance, 2026-09-18. `--c-gold-bright` is the fill rung of the same family and parchment_theme.css already states the pairing: "As a FILL for a primary action: dark ink on it is 8.1:1, which is why the gold button keeps its gold instead of fading to a cream tint." The label takes --ink rather than a near-black literal, so the pair moves together if the palette ever does. */ html .fbtn--gold{--_bd:transparent;color:var(--ink); background:linear-gradient(135deg,color-mix(in oklab,var(--c-gold-bright) 88%,var(--parchment)),var(--c-gold-bright) 60%,var(--gold-2)); box-shadow:0 6px 18px -8px color-mix(in oklab,var(--c-gold-bright) 66%,transparent)} html .fbtn--gold:hover{filter:brightness(1.05);border-color:transparent} html .fbtn--ghost{--_bg:transparent;--_bd:var(--border);color:var(--fg-muted)} html .fbtn--ghost:hover{color:var(--fg);background:color-mix(in oklab,var(--accent) 8%,transparent)} html .fbtn--danger{--_bd:transparent;color:#fff; background:linear-gradient(135deg,color-mix(in oklab,var(--danger) 88%,#fff),var(--danger))} html .fbtn--danger:hover{filter:brightness(1.05);border-color:transparent} html .fbtn--sm{padding:6px 11px;font-size:var(--fs-small);border-radius:7px;gap:5px} /* ---- card ---- */ html .fcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-2); padding:16px 18px;box-shadow:var(--shadow)} html .fcard--pad-lg{padding:22px 24px} html a.fcard,html .fcard--link{text-decoration:none;color:inherit;display:block;transition:border-color .12s,transform .12s} html a.fcard:hover,html .fcard--link:hover{border-color:var(--accent);transform:translateY(-1px)} /* ---- KPI (label + mono value) ---- */ html .fkpi{display:flex;flex-direction:column;gap:5px;min-width:0} html .fkpi__lbl{font:600 10px/1.1 var(--ui);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} html .fkpi__val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700; font-size:clamp(18px,1.9vw,26px);line-height:1.04;color:var(--fg);letter-spacing:-.01em;overflow-wrap:anywhere} html .fkpi__val small{font-size:var(--fs-body);font-weight:600;color:var(--muted)} html .fkpi__sub{font:400 11px/1.25 var(--ui);color:var(--muted)} html .fkpi--pos .fkpi__val{color:var(--pos)} html .fkpi--warn .fkpi__val{color:var(--warn)} html .fkpi--crit .fkpi__val{color:var(--crit)} html .fkpi--gold .fkpi__val{color:var(--gold)} /* ---- pill / status chip ---- */ html .fpill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px; font:600 11px/1.5 var(--ui);border:1px solid var(--border);background:var(--card);color:var(--fg-muted)} html .fpill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} html .fpill--pos{color:var(--pos);background:var(--pos-b);border-color:transparent} html .fpill--warn{color:var(--warn);background:var(--warn-b);border-color:transparent} html .fpill--crit{color:var(--crit);background:var(--crit-b);border-color:transparent} html .fpill--acc{color:var(--accent);background:var(--acc-b);border-color:transparent} html .fpill--plain::before{display:none} /* ---- inputs ---- */ html .finput{width:100%;padding:9px 12px;border-radius:var(--radius-1);border:1px solid var(--border-strong); background:var(--cardin);color:var(--fg);font:400 13px/1.4 var(--ui);transition:border-color .15s,box-shadow .15s} html .finput::placeholder{color:var(--faint)} html .finput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)} html select.finput{appearance:none;cursor:pointer} html textarea.finput{resize:vertical;line-height:1.5} /* ---- table ---- */ html .ftable{width:100%;border-collapse:collapse;font:400 13px/1.5 var(--ui)} html .ftable th{text-align:left;font:600 10px/1.1 var(--ui);text-transform:uppercase;letter-spacing:.07em; color:var(--muted);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-strong);white-space:nowrap} html .ftable td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);color:var(--fg)} html .ftable tbody tr:hover{background:color-mix(in oklab,var(--accent) 6%,transparent)} html .ftable .num,html .ftable td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right} /* ---- tabs ---- */ html .ftabs{display:flex;gap:2px;border-bottom:1px solid var(--border);flex-wrap:wrap} html .ftab{padding:9px 14px;font:600 13px/1 var(--ui);color:var(--muted);text-decoration:none; border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s;cursor:pointer} html .ftab:hover{color:var(--fg)} html .ftab--active,html .ftab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)} /* ---- tap targets on touch devices (Apple HIG 44pt) ------------------------ Found 2026-08-17 by ops/hig_audit.py, which runs the HIG against Frost's own standing rules. Frost had NO rule on hit size, so every control inherited --control-h:38px — fine under a mouse, 6pt short under a thumb, and the founder uses Frost on his phone. Density is deliberate on desktop (frost/CLAUDE.md rule 2), so this does not move the desktop number. It raises the target only where a target is a finger: `pointer:coarse` is true on phones and tablets, false on every trackpad and mouse. Anything with its own hardcoded height gets a min-height floor rather than a rewrite, so no layout is redesigned by this block. */ @media (pointer:coarse){ :root{ --control-h:44px; } html button, html [role="button"]:not(tr):not(td):not(th), html input:not([type="checkbox"]):not([type="radio"]), html select, html textarea, html .btn, html .chip, html .frost-mode{ min-height:44px; } /* A tap target has TWO dimensions. This block set height alone for years, so every icon-width control passed a height check and failed a real thumb: all 46 failures measured on 2026-09-16 were width, not height. Inputs and selects are excluded — they are already full-width or content-sized, and a 44px floor on a narrow numeric field looks broken. */ html button, html [role="button"]:not(tr):not(td):not(th), html .btn, html .chip{ min-width:44px; } /* Checkboxes and radios stay their drawn size; the LABEL carries the target. */ html label:has(> input[type="checkbox"]), html label:has(> input[type="radio"]){ min-height:44px; display:inline-flex; align-items:center; } /* An ANCHOR doing a button's job needs a button's target. The rule above matched `button`, `.btn` and `.chip` and stopped there — the same blind spot the button-parity rule exists for, one property along: Frost's convention is one `*-btn` class worn by a real