/* ============================================================ 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 */ --bee-deep: #c98a00; /* 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); }