/* ============================================================ BRAND.CSS — the labs' identity, in one place (October 2026: "Istituzionale", in two skins). Loaded by every hosted lab, with app/theme.css and app/themes/.css after it, so the labs cannot drift from the site's pages (public/rr.css wears the same palette and type). Character: an institution's page. Warm paper, deep navy ink, one serif for the headings (Source Serif 4), one sans for everything else (Geist), numbers in Geist Mono. Hairlines, square corners, very little colour. LIGHT is the default; the DARK skin (html[data-skin="dark"], set by public/skin.js from the switch in the lab's bar) is the same design at night. The names are the JOBS, not the hues, so every lab skin written against them follows the palette without naming a colour. Each skin gives the same names its own values: ink the words, and the fill of a "solid" thing #121821 · #EEF1F5 paper the page; text drawn on a strong fill #FBFAF6 · #0D131C white a panel on the page (drawn by its hairline) #FFFFFF · #141C28 paper-2 a well inside a panel, a track, a quiet panel #F3F1EA · #1A2331 slate secondary text (and mist: secondary text on ink) #434B57 · #B4BCC8 edge a control's border (≥3:1) #8A857B · #6B7686 sand hairlines — decoration only #E3DFD5 · #253041 accent the main action, the selected state navy #173A6A (hover #0E2A52) · #9DBCEB (hover #C2D6F4) DATA, the colours: only inside a chart, a graph, a track, a map or a marker — never a word, a button or a tag. oresund the cool voice — up, gains, "them", the first series teal #1F6F6A · #5CC9C0 terracotta the warm voice — down, losses, "you", the highlighted point #A3301C · #FF8B76 Text on a fill uses --rr-paper (paper on navy or ink, night on the clear blue): every pair clears WCAG AA, in both skins (`npm run audit` reads them all). TYPE — three self-hosted faces, the site's own: Source Serif 4 600 the page statement and a panel's title (--rr-h1, --rr-h2), sentence case Geist 400/500/600 body, controls, group titles, labels (600, capitals, tracked) Geist Mono numbers in tables, ticks and cells (tabular) No italics: html sets font-synthesis:none, so nothing is ever slanted or thickened. SHAPE — radius 0 everywhere, 1px hairlines, no shadows, no gradients. Names are prefixed --rr- on purpose: the hosted labs have their own --bg, --ink, --paper… and app/themes/.css maps those onto these. This file lives at the site root, NOT under /fonts/: that folder is cached for a year as immutable (right for font files, wrong for the colours). ============================================================ */ @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4-latin-wght-normal.woff2) format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin-wght-normal.woff2) format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-mono-latin-wght-normal.woff2) format('woff2')} :root{ /* the palette — light skin (the default) */ --rr-ink:#121821; --rr-ink-2:#2A3240; --rr-paper:#FBFAF6; --rr-paper-2:#F3F1EA; --rr-white:#FFFFFF; --rr-accent:#173A6A; --rr-accent-hi:#0E2A52; --rr-accent-lo:#9AAFCB; --rr-terracotta:#A3301C; --rr-terracotta-text:#A3301C; --rr-terracotta-light:#A3301C; --rr-oresund:#1F6F6A; --rr-oresund-light:#1F6F6A; --rr-sand:#E3DFD5; --rr-slate:#434B57; --rr-mist:#CFD5DD; --rr-edge-line:#8A857B; --rr-line-2:#CFCAC0; --rr-scrim:rgba(18,24,33,.45); /* the veil behind a dialog */ /* tints, for fills behind text and chart areas only: ink text on either is 11:1 or better */ --rr-oresund-tint:color-mix(in srgb,var(--rr-oresund) 12%,var(--rr-white)); --rr-terracotta-tint:color-mix(in srgb,var(--rr-terracotta) 10%,var(--rr-white)); /* the jobs the lab skins were written against */ --rr-cream:var(--rr-paper); /* the page */ --rr-surface:var(--rr-white); /* a panel on the page, drawn by its hairline */ --rr-petrol:var(--rr-oresund); /* the cool voice: selected data, up, "them" */ --rr-burgundy:var(--rr-terracotta-text); /* the warm voice: down, careful, "you" */ --rr-petrol-soft:var(--rr-oresund-tint); --rr-burgundy-soft:var(--rr-terracotta-tint); --rr-ochre:var(--rr-terracotta); /* the signal: a fill under paper, or a rule */ --rr-soft:var(--rr-slate); /* secondary text */ --rr-edge:var(--rr-edge-line); /* a control's border (≥3:1) */ --rr-line:var(--rr-sand); /* hairlines — decoration only */ --rr-sunken:var(--rr-paper-2); /* a well inside a panel, a track */ --rr-cream-soft:var(--rr-mist); /* secondary text on an ink fill */ /* DATA SERIES — the same thing is drawn the same way in every chart, on the site and in every lab: the fund (my portfolio) navy the heaviest line, with its area S&P 500 grey (the benchmark) MSCI World slate the thinnest */ --rr-fund:var(--rr-accent); --rr-spx:#8A857B; --rr-msci:var(--rr-slate); --rr-sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --rr-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --rr-face-display:'Source Serif 4',Georgia,'Times New Roman',serif; --rr-read:var(--rr-sans); --rr-serif:var(--rr-face-display); color-scheme:light; } /* the dark skin: night paper, the navy turned to a clear blue */ :root[data-skin="dark"]{ --rr-ink:#EEF1F5; --rr-ink-2:#1A2331; --rr-paper:#0D131C; --rr-paper-2:#1A2331; --rr-white:#141C28; --rr-accent:#9DBCEB; --rr-accent-hi:#C2D6F4; --rr-accent-lo:#3F5A82; --rr-terracotta:#FF8B76; --rr-terracotta-text:#FF8B76; --rr-terracotta-light:#FF8B76; --rr-oresund:#5CC9C0; --rr-oresund-light:#5CC9C0; --rr-sand:#253041; --rr-slate:#B4BCC8; --rr-mist:#434B57; --rr-edge-line:#6B7686; --rr-line-2:#34404F; --rr-spx:#8E98A6; --rr-scrim:rgba(0,0,0,.66); --rr-oresund-tint:color-mix(in srgb,var(--rr-oresund) 14%,var(--rr-white)); --rr-terracotta-tint:color-mix(in srgb,var(--rr-terracotta) 14%,var(--rr-white)); color-scheme:dark; } /* ============================================================ COMPONENTS — one size and one shape for each kind of thing, on the site and in every lab. app/themes/.css maps each app's own classes onto these; `npm run audit` (tools/check/consistency.js) measures every page and fails on anything off this list. control every button, tab, segment and chip: a square-cornered box height --rr-control (44) or, in a dense row, --rr-control-sm (36) text 500 15px Geist (14px when small), sentence case primary navy fill, paper text — hover: the darker navy (the lighter blue at night) secondary no fill or surface, ink text, 1px edge — hover: navy edge selected navy fill, paper text (aria-selected / pressed / current) danger an ink outline and a plain word ("Delete…"): colour is for data quiet no fill, no edge: a link that acts (underlined) choice a button holding more than a line (a card you pick): square, secondary until picked, navy when picked field text, number, date, select: 44 high, square, 1px edge on surface, 400 16px Geist (16px: phones don't zoom) label eyebrows, table headers, captions in capitals: 600 13px Geist, uppercase, tracked (.1em in dense UI, up to .2em as an eyebrow) tag a small box of status or kind: 26 high, 600 13px Geist, uppercase panel square, a 1px hairline on surface — or 1px ink for the one panel that matters most on a screen. No shadows headings three sizes and nothing else: --rr-h1 the page's statement and --rr-h2 a panel or section (Source Serif 4, 600, sentence case), --rr-h3 a group (Geist 600) numbers Geist Mono, tabular figures motion 120–200ms, cubic-bezier(.2,0,0,1); nothing bounces ============================================================ */ :root{ --rr-radius:0; --rr-radius-sm:0; --rr-pill:0; --rr-control:44px; --rr-control-sm:36px; --rr-tag:26px; --rr-hair:1px solid var(--rr-edge); /* a control or a field */ --rr-rule:1px solid var(--rr-line); /* a panel, a divider */ --rr-frame:1px solid var(--rr-ink); /* the one panel that matters most */ --rr-control-font:500 .9375rem/1.1 var(--rr-sans); --rr-control-font-sm:500 .875rem/1.1 var(--rr-sans); --rr-field-font:400 1rem/1.2 var(--rr-sans); --rr-label-font:600 .8125rem/1.25 var(--rr-sans); --rr-label-ls:.1em; --rr-label-ls-wide:.2em; --rr-tag-font:600 .8125rem/1 var(--rr-sans); --rr-tag-ls:.08em; --rr-num-font:500 1rem/1.2 var(--rr-mono); --rr-action-hover:var(--rr-accent-hi); /* the main action goes darker on hover (lighter at night) */ --rr-h1:600 clamp(2rem,1.6vw + 1.4rem,2.75rem)/1.1 var(--rr-face-display); --rr-h1-ls:-.015em; --rr-h2:600 clamp(1.375rem,.6vw + 1.2rem,1.75rem)/1.2 var(--rr-face-display); --rr-h2-ls:-.01em; --rr-h3:600 clamp(1.0625rem,.4vw + .95rem,1.25rem)/1.3 var(--rr-sans); --rr-h3-ls:0em; --rr-reading:400 1.0625rem/1.6 var(--rr-sans); --rr-display:600 clamp(2.5rem,3.4vw + 1.4rem,4.25rem)/1.06 var(--rr-face-display); --rr-display-ls:-.018em; --rr-section:600 clamp(1.85rem,1.6vw + 1.3rem,2.75rem)/1.12 var(--rr-face-display); --rr-section-ls:-.012em; --rr-ease:cubic-bezier(.2,0,0,1); --rr-fast:120ms; --rr-dur:200ms; }