/* ========================================================================== JEEVMEDIA — design tokens A black gallery wall now, not a bone-white one — see the note on the inversion just below — but the rule that mattered before still does: almost everything in the building is neutral, and the only colour that isn't comes off the photographs, plus the one accent. Every value the rest of the CSS uses is declared here. ========================================================================== */ :root { /* ---- Colour ------------------------------------------------------------ THE PAGE INVERTED. Everything below used to read as ink on a bone-white gallery wall — the lightest tokens carried the ground, the darkest carried the type. The ground is black now and the type is the light token; the names did not change, only which end of the range each one sits at. `--paper` (still literal white) is what text and light surfaces are drawn in; `--black`, `--bone` and `--bone-deep` are the three dark neutrals a page and its panels are built from. `--bone-deep` used to be the recessed shade, a few percent darker than the page under it; now that the page itself is nearly black there is nowhere further down to recess to, so it is the RAISED shade instead — a panel sitting a few percent lighter than the ground behind it. Same job, same direction of travel (a panel still has to read as a distinct plane), opposite sign. THE ACCENT IS NEVER SMALL TEXT. Not a house-style preference — an arithmetic one. The two grounds it has to sit on, `--bone` and `--black`, are close together now (0.012 and 0.004), so the constraint that used to come from BOTH ends of the page now comes from one: 3:1 against the darker of the two, and white-on-fill at 4.5:1 as the ceiling. A colour that clears both is never going to be legible as small text on either ground regardless — small text needs 4.5:1 on its own account, and nothing this dark against grounds this dark reaches it. The current deep violet sits at 0.139: 3.50:1 on black, 3.06:1 on bone, and white on the fill itself is 5.55:1. Allowed on: hairline rules, fills, pin heads, the drawn thread, display-size figures, and as a GROUND under white. Not allowed on: labels, body copy, micro type, or anything under ~24px. THE VIABLE WINDOW IS 0.136 – 0.183 relative luminance, recomputed for the dark ground: the floor is 3:1 against `--bone` at 0.012 (the brighter of the two dark grounds, so the harder floor to clear); the ceiling is unchanged, since it was always about white sitting on the fill and white is still white. Any hue can sit in it — the constraint is lightness, not colour. Before the page inverted this was steel blue #386982 at 0.126, cobalt before that, oxidised rose before that, petrol and vermilion before that. Since the inversion it has moved three times more, and none of the three moves touched the lightness — every one is 0.139–0.140: #804bcb, hue 265° sat 55% — a bright orchid violet, and (found out later, not planned) an exact match for the live jeevmedia.com site's own brand purple. #8b529e, hue 285° sat 32% — asked for "darker." There was nowhere real to go on lightness (the floor is 0.136, four thousandths under where the violet already sat), so this moved hue and cut saturation instead — a saturated aubergine, delivered as quieter rather than darker. #7b5f81, hue 290° sat 15% — asked for "darker" again, same answer: cut saturation further, to near-grey. THIS ONE UNDOES THE HUE DRIFT ON PURPOSE. Asked for a darker version of the live site's own purple specifically, which is hue 265° — the violet's hue, not the aubergine's or the mauve's. #7b56ae is that hue at 35% saturation instead of 55%: same family as the site's actual brand mark, still clearly a rich violet rather than a muted neutral, and as dark as the lightness floor allows. Solve for the window first, then place the hue; that has not changed and is the only safe way to pick the next one either. */ --accent: #8f41d9; /* #240046 ITSELF, for a surface chosen to be SEEN rather than one that merely sits behind a photograph. Same value as `--bone-deep` and deliberately a separate token: if either job ever has to move it moves without dragging the other. It was #3c096c until the page and the plane swapped; the long note further down says why that purple left the palette entirely. Where it is used, white sits on it at 18.05:1 against the 5.35:1 white gets on `--accent` -- a deep fill is a far better ground for type than a mid-luminance one, and it is why the contact card took this instead of the accent. The trade is that at this depth the fill carries no edge of its own at all: 1.12:1 against the page. The card draws one. */ --accent-deep: #240046; /* ONE ACCENT, WHOLE PAGE. `--accent` above is everything: buttons, eyebrows, the footer wipe, the contact rule, the pinboard's thread and pins, the press rack's filled panels, the campaign panels and their headline figures — whatever hue it currently is. Two things were tried here and taken back out, both worth recording so they are not re-proposed as new ideas: A HUE PER SECTION -- petrol on the pinboard, indigo and aubergine alternating on the campaigns, emerald and violet on the press rack. It gave five sections five identities when the site has one. A TINT PER CLIENT -- each campaign panel in its client's colour, sampled from the logo files (ByteDance hue 220; Higgsfield's lime moved off hue 77 because at this luminance it comes out olive; aubergine chosen for Morphic, whose logo is monochrome). It read as three different brands rather than as one agency's work. The mechanism both relied on still holds if a second colour is ever wanted: the window above constrains LIGHTNESS, not hue, so any hue solved to 0.140 inherits `--accent`'s entire contrast profile unaltered. That is the only safe way to add one. Solve first, then place. What it cannot do is put two of them together. Two colours at the same luminance meet at 1.01:1 -- no value edge at all. It is why the campaign panels still alternate with bone rather than running colour to colour. */ /* The press rack's filled panel lightens on hover rather than deepening — unchanged in direction, but the room above is tighter now that the window's ceiling is the binding constraint on both ends. The fill sits at 0.139; this lands at 0.175 and white on it is 4.66:1, just past the 4.5:1 floor rather than sitting on 5:1 the way earlier hues did. Any future accent that lands near the top of the 0.136–0.183 window has the same narrow headroom for this lift and needs checking, not assuming. */ --accent-lift: #9c47eb; /* THE THREE DARK NEUTRALS. `--black` is the darkest and does not move — it is what a hero panel or a filled campaign panel is made of, video letterboxing rather than page chrome, and stays put whatever the page around it is doing. It used to be the loading bird's ground too; the bird is composited with `mix-blend-mode: screen` now and has no ground at all. `--bone` is the page's own ground, one step up from black. `--bone-deep` is one step up again — see the note above this block for why "deep" now means lighter, not darker. */ /* BLACK IS THE PAGE, #240046 IS THE PLANE ON IT. This is the reverse of what it was a moment ago and the reverse is the point: with #240046 as the ground the whole site read as purple, so the two swapped. Black carries the page and the purple is now the thing that sits ON it — the campaign fill panels, the contact card, the nav drawer, the ground behind photography. #240046 IS THE PURPLE THAT SURVIVED, AND #3c096c IS THE ONE THAT DID NOT. That is arithmetic, not taste. Both are legal as a plane, and #3c096c is the better one on face contrast — 1.39:1 against the page against #240046's 1.12:1. But the accent has to be able to sit ON the purple plane: the campaign figures are accent, the leading-edge line on `.story__inner` is accent, the contact card's CTA is an accent fill. And `--accent` measures 3.37:1 on #240046 and only 2.71:1 on #3c096c, which is under the 3:1 floor. A plane that cannot carry the accent is no use here whatever its face contrast is, so #3c096c left the palette altogether. THE PLANE IS 1.12:1 AGAINST THE PAGE AND THAT IS DELIBERATELY NOT A PROBLEM. It was a fatal problem once — see the history below — because the surface it was applied to had to read as a plane on its own. None of the surfaces it carries now do: `.media`, `.panel` and `.cf__card` are backdrops behind photographs, so the image draws the edge; `.nav__drawer` has a border; `.contact__card` draws an inset `--rule-firm` hairline, which reads at 2.88:1; `.story__inner` draws an accent line along its leading edge. Every one of them has a drawn edge rather than a tonal one, which is why the value step stopped mattering. THE HISTORY, so none of it gets re-proposed as a new idea. The page began bone-white, inverted to near-black, then took #240046 itself. Along the way #240046 was tried AS A PANEL on a near-black page and failed at 1.08:1 — the contact card dissolved into the ground and the change was invisible. The lesson taken then was "#240046 must be the ground". The truer lesson, which is what this arrangement rests on, is "#240046 cannot be a plane that relies on tone" — a different and much less restrictive claim. #10002b, #240046 and #3c096c all sit between 0.002 and 0.022 relative luminance, so no two of them stacked will ever give a value step; the fix is to draw the edge, not to keep reshuffling which one is on top. EVERY COLOUR BELOW IS HUE 271, WHICH IS #240046's OWN. Measured: --black 0.0000 #000000, letterboxing and the press ink rung --bone 0.0023 #0a060e, the page — reads black --bone-deep 0.0082 #240046, the purple plane --graphite 0.0298 solid fills that lighten on hover --rule 0.0603 hairline --rule-firm 0.0998 the firmer hairline --accent 0.1463 hue 271 at 70% sat, inside the window --accent-lift 0.1757 the accent's hover, still under the ceiling THE PAGE IS 10/6/14 AND WAS BRIEFLY 16/0/31, AND THE DIFFERENCE IS NOT LIGHTNESS. Both are near-black by luminance — 0.0023 and 0.0021, which is 1.00:1, indistinguishable on any meter. But 16/0/31 has a CHANNEL SPREAD of 31 and no green at all, and at that spread a near-black stops reading as black and starts reading as a very dark violet. It was set as the page to make the site less purple and did the opposite: it removed the black without adding any lightness back. Spread, not luminance, is what decides whether a dark reads as neutral. The page is 10/6/14 now — spread 8, hue 270, the value `--black` itself has always carried, which is exactly why that token has always read as black rather than as a tint. Anything set as a neutral dark here should be checked on spread first; two colours can sit at the same luminance and one of them be obviously coloured. `--black` went to true 0/0/0 in the same move, so it still has somewhere to be darker than the page. It is 1.06:1 below it, which is not a value step and does not need to be: it is letterboxing inside an image frame and the press rack's ink rung, and that rung is bounded by white slats above and below rather than by its own tone. And the floors, all re-measured for the reversal: accent on the page 3.76:1 (floor 3) accent on the purple 3.37:1 (floor 3) accent on --black 3.93:1 (floor 3) white on the accent fill 5.35:1 (floor 4.5) white on accent-lift 4.65:1 (floor 4.5) white on the page 20.09:1 white on the purple 18.05:1 slate on the page 6.66:1 (floor 4.5) slate on the purple 5.98:1 (floor 4.5, the tighter of the two) slate-dim on the page 7.31:1 slate-dim on the purple 6.56:1 --rule-firm on the page 2.87:1 (a 1px line, no text floor applies) Every floor has more room than it did with the purple page, because the ground moved away from the type rather than towards it. THE ACCENT KEPT ITS LUMINANCE ON PURPOSE. It moved from #7b56ae at 0.139 to #8f41d9 at 0.146 -- a hue and saturation change, not a lightness one, which is what the note at the top of this file says is the only safe way to move it: any hue solved into the window inherits the whole contrast profile unaltered. Saturation went from 35% to 70%, because a saturated ground asks for an accent that answers it. */ --black: #000000; --bone: #0a060e; --bone-deep: #240046; --paper: #ffffff; /* A short hop up from `--black`, for the handful of things that are themselves a solid dark fill and need to lighten slightly on hover or focus rather than invert outright — the nav CTA before it is stuck, the ink rung of the press rack. Not a text colour; nothing is set in it. */ --graphite: #3c274f; /* SOLVED, NOT GUESSED, AND THE BINDING CONSTRAINT IS THE CARD RATHER THAN THE PAGE. Body-weight grey text needs 4.5:1 on both grounds it appears on. Against the page (`--bone`, 0.0023) that is (L+0.05)/(0.0523) ≥ 4.5 → L ≥ 0.185; against a purple plane (`--bone-deep`, 0.0082) it is L ≥ 0.212. This lands at 0.298 — chosen for the second number, not the first, which is why it looks lighter than the page alone would need. Measured: 6.66:1 on the page, 5.98:1 on the purple. Both have real room now; when the purple WAS the page the second figure was 4.81:1 with about a third of a point in hand, so this token got safer in the reversal rather than tighter. */ --slate: #9e8eb1; /* Only a little lighter than --slate, deliberately. The mono uppercase treatment already separates these labels from body copy, so the tone does not also have to — and at ~10px they need a full 4.5:1 to stay readable. */ --slate-dim: #a596b6; /* Hairlines carry no text-contrast requirement — they are 1px, not type — so these are picked to be visibly a step above the grounds they sit on rather than solved against a ratio. `--rule` reads against `--bone` (0.012 → 0.060); `--rule-firm` reads against both `--bone` and the slightly brighter `--bone-deep` and needs to still look like the firmer of the two hairlines against either. */ --rule: #533b6b; --rule-firm: #694d84; /* Overlays used on top of photography. Kept as tokens so the scrim strength is tuned in one place when Andrew's real images land. THE RGB IS THE PAGE'S OWN, 10/6/14, AND IT WAS 10/10/9 UNTIL THIS PASS. That old triplet was hue 60 — a warm near-black, left over from the bone-white page, where it was the ink the whole design was drawn in. It survived the inversion because at 0.28-0.78 alpha over a photograph nobody can name the hue of a scrim. It does not survive a PURPLE palette: the alphas below leave whatever is behind them showing through, so a warm black layered over #240046 mixes to a muddy brown-violet, and the edges where a scrim feathers out are exactly where that shows. Same lightness, hue moved 60 -> 271, so a scrim now darkens along the palette's own hue instead of dragging it towards mud. (This was written while #240046 was the page; it is the plane behind photography now, which is if anything more relevant — that is precisely where the scrims sit.) `--frost` keeps its one-step lift off the page (13/7/18 against 10/6/14), the same relationship it had at 12/12/11 against 10/10/9. */ --scrim-soft: rgba(10, 6, 14, 0.28); --scrim: rgba(10, 6, 14, 0.42); --scrim-strong: rgba(10, 6, 14, 0.72); --frost: rgba(13, 7, 18, 0.42); --frost-solid: rgba(13, 7, 18, 0.78); --frost-edge: rgba(255, 255, 255, 0.18); /* ---- Type -------------------------------------------------------------- Three roles, three faces. Bodoni was cut to be set black on white, so the light ground plays to it. Data is always mono. */ /* Instrument Serif rather than a didone. A high-contrast face like Bodoni loses its hairlines at display size over photography — the masthead went thin and lost authority exactly where it needed the most. This keeps the editorial register but with strokes that survive being set in white over an image. It ships in a single weight, so hierarchy comes from size and spacing, never from faux-bold. */ --font-display: "Instrument Serif", "Times New Roman", Times, Georgia, serif; --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* Centered type needs more air than left-aligned type, so the masthead cap sits lower than it did in the left-aligned composition. */ --fs-masthead: clamp(2.35rem, 5.2vw, 5.2rem); --fs-display: clamp(2.2rem, 5vw, 4.25rem); --fs-title: clamp(1.65rem, 2.8vw, 2.4rem); --fs-lead: clamp(1.02rem, 1.25vw, 1.2rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.72rem; --fs-micro: 0.64rem; /* The statement band's single line — deliberately allowed past the masthead cap, since it is the one place in the page scale is allowed to go further. The floor is set so the line clears its own padding at 360px without the final character clipping at rest, before any scroll motion has run. */ --fs-statement: clamp(2.1rem, 10vw, 9rem); --track-label: 0.16em; --track-mono: 0.08em; /* Instrument Serif is already tightly fitted, so it needs far less negative tracking than a didone and a touch more leading. */ --track-display: -0.008em; --lh-tight: 1.02; --lh-snug: 1.14; --lh-body: 1.62; /* ---- Space ------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Every section pads top AND bottom, so the space a reader actually sees between two of them is roughly double these numbers. They are set with that doubling in mind — raising --section-y by 1rem adds 2rem to every join on the page. */ --section-y: clamp(3.25rem, 5.5vw, 5.5rem); /* Used by the statement band, which is a single line of type and would read as an oddly cavernous gap at the full section rhythm. */ --section-y-tight: clamp(2rem, 3.5vw, 3rem); /* Roster carries the page's heaviest content below the hero and gets more air than the rest. Work used to share this and no longer does — it is full-bleed panels with their own internal padding and no section box at all, so it takes none of these. */ --section-y-open: clamp(4rem, 7vw, 7rem); --gutter: clamp(1.25rem, 4.5vw, 4.5rem); --max-w: 1560px; --max-text: 62ch; /* ---- Radius ------------------------------------------------------------ A real scale, doing structural work rather than decoration. */ --r-shell: clamp(18px, 2vw, 28px); --r-card: clamp(12px, 1.3vw, 18px); --r-input: 12px; --r-pill: 999px; /* ---- Motion ------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 180ms; --dur-mid: 400ms; --dur-slow: 760ms; /* ---- Misc -------------------------------------------------------------- */ --nav-h: 74px; /* Also retinted off hue 60. A shadow has to be darker than the surface it falls on or it reads as a smudge, so the triplet is pushed below its grounds on every channel rather than merely darkened in place: 10/0/20 is not below the page's 10/6/14 on blue, but the page is not where these land — `--shadow-panel` falls under `.panel` and `.cf__card`, whose own ground is the purple plane at 36/0/70, and it is below that on every channel. The warm 20/18/14 it replaced was lighter than the purple in green and read as a brown haze under the panels instead of a shadow. */ --shadow-panel: 0 24px 60px -34px rgba(10, 0, 20, 0.45); --shadow-lift: 0 18px 40px -26px rgba(10, 0, 20, 0.5); } @media (max-width: 640px) { :root { --nav-h: 62px; } }