/* ============================================================ RESI master brand — design tokens Source of truth: RESI Font Package + Colors spec (Figma Kolor System 7woColnbHO3ZDRQ7ham6DP). Same type family as the report + lab. Type: Crimson Pro (New York stand-in) = Title/H1 only. Plus Jakarta Sans = H2/H3/body/UI/caption/meta. Specials (Glock/Italiana/Questrial) = poster/editorial display only. Sizes below are the spec's size/line-height-% pairs. ============================================================ */ :root { /* ---- Color: ODI-inherited palette ---- */ --paper: #f4f2ee; /* warm paper — page background. The yellow cast pulled back on 2026-08-14: the red-to-blue spread was 10 and is now 6, so it is still warm rather than white, just less golden. */ --paper-2: #ece9e4; /* faint panel fill. Pulled back with it, spread 13 to 8, or the two papers would have drifted apart in temperature. */ --ink: #000000; /* 100% black — display + body text */ --grey: #737376; /* COLOR 01 — muted captions/meta */ --grey-text: #4a4a4d; /* GREY, FOR TYPE. --grey above is the brand swatch and measures 4.19:1 on paper: under the 4.5 needed for small text, and worse than that reads at weight 300. This is the same grey darkened to 7.83:1. Use --grey for a rule or a fill; use this for anything anybody reads. */ --blue-1: #c3e0f2; /* COLOR 02 */ --blue-2: #dcebf2; /* COLOR 03 */ --green-dk: #152621; /* COLOR 04 — dark surface (near-black green) */ --coral: #cb5b58; /* COLOR 05 */ --navy: #1b357d; /* COLOR 06 — ODI parent navy (ticker) [approx; exact hex pending] */ --yellow: #f0cc29; /* COLOR 07 */ --bee: #f2a900; /* bee yellow — the interface accent */ /* 2026-08-18 — DEEPENED FROM #c98a00, which measured 2.64:1 on paper and so failed AA for text at every size. It is the accent on .prose links, on card titles, on the footer and the legal row, and on every hover in the masthead — so hovering a footer link made it HARDER to read, while the same hover at night measured 8.34:1 and read as confident. That asymmetry is what somebody noticed; the number is why. #8f6100 is 4.84:1 on paper: the same gold, deep enough to be text. */ --bee-deep: #8f6100; /* its companion, for the same accent at small sizes: #f2a900 on paper is about 2.3:1, which is a colour you can see and not a colour you can read. */ --accent-sky: #91daff; /* Special Accent — pull quotes, key data, highlights */ --on-dark: #f4f2ee; /* paper-tint text on dark surfaces — follows --paper */ /* ---- A SLAB ---- A section that steps away from the page: the report band on the landing, the ticker, anything that wants to be a different surface rather than a differently-styled part of the same one. It is a ROLE, so the two themes can answer it differently — and they must, because "dark green" is a step DOWN from paper and barely a step at all from a night ground. */ --slab: var(--green-dk); /* #152621 — 14.1:1 away from paper */ --slab-ink: var(--on-dark); /* ---- MARKS ---- An identity is not painted in the page's light. --ink is the moon at night and black on paper; a mark takes the full contrast at both ends instead, and every mark on the site reads these two so none of them can drift from the others. --mark-dark is the filter for supplied artwork that cannot be recoloured — raster-wrapped SVGs and partner logos: forced to black, then inverted, which is plain white with nothing on it. */ --mark-ink: #000000; --mark-dark: brightness(0) invert(1); /* ---- MOONLIGHT: the dark theme's light source ---- Not "the light theme inverted", and deliberately not black. The whole scheme is one lamp, and the lamp is the moon: a blackbody between 7000K and 8500K, which is where moonlight sits once the eye has adapted to it. Those temperatures are computed, not chosen — this is what a body at that heat actually emits, converted to sRGB: 7000K #f3f2ff barely blue, almost a white page 7500K #e6ebff 8000K #dde6ff the default: cold enough to read as night, warm enough to read 8500K #d7e2ff the coldest of the range, and the most obviously blue THE GROUND IS THE SAME COLOUR WITH THE LIGHT TAKEN OUT of it, rather than a neutral black with a blue tint added back. That is why it does not look like a black page: everything in the scheme is on the one hue, so the dark is what the light looks like in the absence of light. Measured on #0e121c: the 8000K light reads 15.87:1, the bee 9.31:1. */ --moon-7000: #f3f2ff; --moon-7500: #e6ebff; --moon-8000: #dde6ff; --moon-8500: #d7e2ff; /* ---- Type families ---- */ --font-display: "Crimson Pro", "Times New Roman", serif; /* Title / H1 */ --font-sans: "Plus Jakarta Sans", system-ui, sans-serif; /* everything else */ --font-editorial: "Italiana", Georgia, serif; /* special display */ --font-geometric: "Questrial", var(--font-sans); /* special display */ --font-poster: "Glock", "Playfair Display", "Italiana", Georgia, serif; /* poster display — Glock when supplied; Playfair (heavy) stand-in */ /* ---- Type roles (size / line-height %, per spec) ---- */ --t-title: clamp(3.25rem, 9vw, 7.5rem); --lh-title: 1.0; /* 120/100 — Hero/Cover */ --t-h1: clamp(2.5rem, 6vw, 4.5rem); --lh-h1: 1.05; /* 72/105 — Section hero */ --t-h2: clamp(1.9rem, 3.6vw, 3rem); --lh-h2: 1.15; /* 48/115 — Section heading (Jakarta Bold) */ --t-h3: 1.75rem; --lh-h3: 1.30; /* 28/130 — Subheading (Jakarta Semibold) */ --t-body: 1rem; --lh-body: 1.60; /* 16/160 — Reading (Jakarta Regular) */ --t-ui: 0.875rem; --lh-ui: 1.50; /* 14/150 — UI / portal copy */ --t-caption: 0.6875rem; --lh-cap: 1.50; /* 11/150 — ALL CAPS, +3% track */ --t-meta: 0.75rem; --lh-meta: 1.50; /* 12/150 — footnotes / dates */ --track-caps: 0.03em; /* ---- Layout / motion ---- */ --gutter: clamp(1.25rem, 4vw, 4rem); /* THE PAGE INSET. One line down the left of the whole site: the masthead's mark, every section's eyebrow, the footer. It matches the cover image's own inset, which is where the alignment was first set. --gutter stays what it was and is now only a GAP, not an edge. */ --page-inset: 2em; --maxw: 84rem; --rule: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.4s; } /* ---- Reset / base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---- Type role classes ---- */ .t-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-title); line-height: var(--lh-title); letter-spacing: -0.01em; } .t-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1); line-height: var(--lh-h1); } .t-h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-h2); } .t-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-h3); } .t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-body); } .t-ui { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-ui); line-height: var(--lh-ui); } .t-caption { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-caption); line-height: var(--lh-cap); letter-spacing: var(--track-caps); text-transform: uppercase; } /* Weight 300, so the tracking opens: a light face closes up as it shrinks and the words start to read as one grey block. Standing rule. */ .t-meta { font-family: var(--font-sans); font-weight: 300; font-size: var(--t-meta); line-height: var(--lh-meta); letter-spacing: 0.015em; } /* shared content shell */ /* margin-inline: 0, not auto. Centring the capped width put a section's edge 110px in on a wide screen while an uncapped section started at 32, so two eyebrows on the same page sat on different lines. The cap still limits how wide the content gets; it just no longer moves where it starts. */ /* ============================================================ DARK — moonlight Set data-theme="dark" on . Nothing below is a new idea: every token here is the same role the light theme names, answered by the moon instead of by paper. Anything that reads --paper or --ink keeps working without being told which theme it is in, which is the whole point of there being tokens at all. ============================================================ */ :root[data-theme="dark"] { --paper: #0e121c; /* the ground: the 8000K light with its light taken out */ --paper-2: #171c28; /* a panel, one step up from the ground */ --ink: var(--moon-8000); /* what was black is now the moon */ /* --on-dark KEEPS ITS MEANING: light text for use ON a dark surface. It was briefly redefined here as the ground — "text on a light surface" — which is the opposite of what its name says, and it turned the report band's copy near-black on near-black. A token's name is a promise about WHERE it goes, not about which theme is running. */ --on-dark: var(--moon-8000); /* The slab steps UP at night. Down is where the page already is: #152621 is only 1.19:1 away from the ground, so the band would have stopped being a band at all. Lifted, it keeps the green — the colour is the brand's, not the theme's — and stands 1.32:1 clear, with the moonlight on it at 11.37:1 and the yellow at 9.03:1. */ --slab: #1a2f28; --slab-ink: var(--ink); /* Grey is a role, not a colour: on paper it is ink lightened, here it is moonlight dimmed. Both are the same distance from the thing they sit on. */ --grey: #6b7488; --grey-text: #aab4c8; /* the readable one — 8.1:1 on the ground */ /* The accents hold. Bee on this ground is 9.31:1, better than it manages on paper, so the small sizes no longer need the deep companion — but it stays, because a token that disappears in one theme is a rule somebody has to remember. */ --bee: #f2a900; --bee-deep: #ffc23d; /* LIGHTER here, not darker: on a dark ground the companion has to move away from the ground, and away is up. 12.3:1. */ --rule: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); /* White, and only white. Not the moonlight the type is set in: a logo carries its own colour and the nearest thing to it here is the full value. */ --mark-ink: #ffffff; } .shell { width: 100%; max-width: var(--maxw); margin-inline: 0; padding-inline: var(--page-inset); }