/* The Fraud Clinic — design tokens. Derived from the Parcours canonical palette at ~/Projects/firm-ops/marketing/identity/tokens.css. Every ratio in a comment is measured, not estimated. Two deliberate departures from the Parcours file, both forced by this audience: 1. Body ink is --p-ink-deep (9.56 on page) rather than --p-ink petrol (6.61). A substantial share of readers here are over 75. Petrol is kept for line work and the wordmark. 2. Body copy is 23px, matching the reference site exactly (ADR-001, amended 3 Sep 2026). Parcours' document floor of 14px and our own earlier 17px floor were both set for a general audience. This one is set for a reader over 75. There is no dark theme. Parcours rule 7 forbids one, and the ramp was mixed to sit on white: every stop is a light tint, so a dark ground inverts the whole warm-to-cool reading. Parcours rules that carry over unchanged: - THREE TEXT COLOURS. --ink, --ink-line, --muted. Nothing else carries words. There is deliberately no lighter grey, which is what retired the old --faint and its AA failures. - THE ACCENT IS A FILL. No ramp stop is ever text, a border, or the only mark of a state. - STRUCTURE IS INK. An accent fill always sits inside an intact ink border. */ :root{ /* Stated so the browser paints its own widgets, scrollbars and focus rings light too. Without it a dark-OS reader gets dark form controls on a white page. */ color-scheme:light; /* ---- ground ---- */ --ground:#ffffff; --raised:#e6eeef; /* ---- the three that carry words ---- */ --ink:#1f4b55; /* body and headings. 9.56 ground · 8.12 raised */ --ink-line:#2f6470; /* petrol. line work, borders, the wordmark, links. 6.61 · 5.61 */ --muted:#516b75; /* ledes, captions, rail labels, provenance. 5.66 · 4.81 */ --rule:#d5e2e3; /* decorative hairline. Never bounds anything clickable. */ /* ---- the journey ramp. Fill only. One stop per stage, warm at the first approach and cool at the silence. Contrast, stated rather than assumed. A stop is a ground on the stage hero band, so text does sit on one. Only --ink may, and only because r1 was re-cut for it: #ef9d82 gave 4.4699 and missed the floor by three hundredths. #f09e83 gives 4.5192 — one to two values per channel, a CIEDE2000 distance of 0.27 from the old value where 2.3 is a just-noticeable difference, so it is the same colour and it puts the whole ramp over 4.5: --ink on r1..r7 4.52 4.95 5.33 5.44 5.47 5.38 5.19 (min 4.52) --ink-line on r1..r7 3.12 3.42 3.69 3.76 3.78 3.72 3.59 (min 3.12) --muted on r1..r7 2.67 2.93 3.16 3.22 3.24 3.19 3.07 (min 2.67) So on a band: body text and small labels are --ink. Display type at 24px and over may be --ink-line, which clears the 3:1 large-text floor everywhere. --muted never appears on a stop; it clears neither floor on any of them. Links on a band are --ink with a permanent underline, never --ink-line: the underline carries the affordance, not the colour. What the stop itself is never asked to do is clear 3:1 against the surface behind it, and in light mode it does not: vs --ground 2.12 1.93 1.79 1.76 1.75 1.78 1.84 (min 1.75) vs --raised 1.80 1.64 1.52 1.49 1.49 1.51 1.57 (min 1.49) WCAG 1.4.11 binds a graphical object only where it is *required* to understand the content. Every stage states its position three other ways in text — the number 01..07, the stage name, the act label — so the ramp adds nothing a reader would lose without it, and no state anywhere is signalled by colour alone. Decorative, therefore exempt. Do not promote a stop to a state indicator without re-testing: at these ratios it would fail. The seven have to be told apart from each other, not just from the ink, because that is the whole point of the band. Closest pair is r6/r7 at CIEDE2000 7.2, then r2/r3 at 7.9; the smallest of all twenty-one pairs is over three times a just-noticeable difference. ---- */ --r1:#f09e83; --r2:#eda9ac; --r3:#e8b3c8; --r4:#d3bcd8; --r5:#b9c4dd; --r6:#9fc9d8; --r7:#8fc9cc; /* ---- the tints. Each is 30% of its stop on --ground, rounded to hex and written out so its contrast is fixed rather than computed (REDESIGN-PLAN, "The seven tints"). They mark the main action section, and only under data-shape="lighter". --ink on t1..t7 7.74 to 8.18 --ink-line on t1..t7 5.35 to 5.65 --muted on t1..t7 4.58 4.69 4.79 4.84 4.83 4.82 4.77 (min 4.58) ---- */ --tint-r1:#fbe2da; --tint-r2:#fae5e6; --tint-r3:#f8e8ef; --tint-r4:#f2ebf3; --tint-r5:#eaedf5; --tint-r6:#e2eff3; --tint-r7:#ddeff0; /* ---- deadline. Coral tint as the field, ink as the structure, which is the brand's own construction for an accent band. It means one thing: a window is closing. A page with no deadline uses none of it. ---- */ --closing:#fdeee8; /* ink on it: 8.46 */ --panel-grid:rgba(47,100,112,.16); /* graph paper on the open panel */ --font-display:Newsreader,"Iowan Old Style",Georgia,serif; --font-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,monospace; /* Two trackings, because tracking is a function of size and case and the site sets type in exactly two registers. --track-label is the 13px mono and sans uppercase apparatus, already the majority at 52 uses. --track-display is the median of the seven negative literals it replaces, all of them tightening display type at 26px and above. A numeral centred in a disc is a shape rather than a label and takes `normal`. */ --track-label:.14em; --track-display:-.018em; /* One prose leading, where there were three: 1.6 and 1.65 on body, 1.5 on the term glosses, a spread of 3.45px a line at 23px decided rule by rule rather than once. 1.65 is the most generous of the three, so unifying on it never tightens a paragraph for a reader who is often over 75. Only running text takes it; a label that happens to be set at 23px is not prose and keeps its own leading. */ --leading-prose:1.65; /* ---- measure. Both are the reference's own values at its own 23px root, taken as pixels rather than characters because that is how they are set there: .lead 440px and .description 600px, roughly 38 and 52 characters. --measure-lead is the opening statement of a section. --measure is argument. --measure-lead is 440px at 23px, set in em so that it stays about 38 characters at whatever size the statement is set: the doors' standfirst is 27.6px, and a fixed 440px held 27 to 32 characters of it over five lines. ---- */ --measure:600px; --measure-lead:19.13em; /* ---- rhythm. The reference's four named separators, at its three sizes. module_separator 300, space_l 500, space_s 80, space_xs 20, stepping to 200/300/50/10 and then 100/200/40/10. Overridden at the breakpoints below. ---- */ --sep:300px; --sep-l:500px; --sep-s:80px; --sep-xs:20px; --radius:2px; /* One curve, and two variants of it, taken from the reference site's own sheet where 300 of 455 timed declarations share the same first control point. That repetition is what reads as expensive: everything on the page enters the same way. The 0.8 start is the whole trick. At a fifth of the way through, a thing on their curve has moved 4% of its distance and a thing on our old cubic-bezier(.23,1,.32,1) had moved 68%. Motion that leaves at full speed reads as reactive; motion that gathers reads as weighted. The two pointer curves are theirs as well: they do NOT use the gathering curve for hover, because a control that hesitates reads as broken rather than considered. --ease-back is that same curve landing 1.19% past its target, and is for reveals only. Theirs lands 10.2% past (y2 of 1.5), which on the widest reveal here is 15px of bounce; a substantial share of this site's readers are over 75, and a bounce that size is a vestibular problem rather than a flourish. Only y2 moves, because every reveal transitions translate on this curve and opacity on --ease, and the two have to stay together. A different shape, such as cubic-bezier(.2,.9,.3,1.06), diverges from --ease by 0.78 at a third of the way through: the block finishes arriving while it is still invisible. This one never diverges by more than 0.06. */ --ease:cubic-bezier(.8,0,.2,1); --ease-back:cubic-bezier(.8,0,.2,1.14); --ease-quick:cubic-bezier(0,.5,.2,1); --ease-snap:cubic-bezier(0,0,.2,8); /* Their section card's press, taken whole: it pulls 0.8px further out before it travels, and lands 0.8px past before settling. The y2 of 1.5 is the overshoot --ease-back above declines, and it is admissible here for the reason that one is not. Overshoot is a percentage of the distance travelled: 10.2% of a 150px reveal is the 15px of bounce that is a vestibular problem, and 10.2% of this 10px press is 0.8px. The curve was never the objection. The distance was. */ --ease-press:cubic-bezier(.8,-.5,.2,1.5); /* Three, and no fourth. A reveal, a state change, a pointer acknowledgement. */ --t-reveal:1s; --t-state:.5s; --t-micro:.3s; } /* ---- links, decided once ---- Two kinds, and what separates them is whether the link sits inside a sentence. In prose it has to be findable without colour (WCAG 1.4.1), so it keeps an underline. The browser's default one is drawn on the text baseline and is cut by every descender it crosses, which is what made the deep-link lists look broken. This one is offset clear of the baseline and drawn in the link's own ink, because STRUCTURE IS INK: the underline is structure, not a second colour, and --rule is not available to it since a hairline never marks anything clickable. In navigation - a list of links that is plainly a list of links - position already says the thing can be clicked, and underlining all eight is emphasis on everything, which is the reverse of how this design makes focus. Those opt out per page; the underline comes back on hover and focus so the pointer still confirms the target. Block links that are themselves a card (.door, .doorrow, .next, .now) set text-decoration:none where they are defined, and keep overriding this. */ /* ---- root type. 23px, the reference's own size, set once and never reduced: it has no breakpoint override for font-size and neither do we. Line height is the one place we do not follow it. Theirs is 1.25, which is a display setting; running prose at 1.25 and 23px is a tighter block than a reader with low vision can track, and COGA 4.4.5 asks for the opposite. Ours stays at 1.6 for prose. ---- */ /* The page shell, in the one sheet every page links, and linked before every other. This was written out ten times over in nine files and no two copies were the same length, so twenty pages kept the browser's default 8px body margin, which put a white gutter around a banner meant to run edge to edge, and twenty-six never received -webkit-text-size-adjust, which lets iOS Safari inflate the type of a page already set at the size this reader needs. Each page keeps its own `font` shorthand on body: the front page runs at 1.6 and a reading page at 1.65, and that difference is deliberate. */ *{box-sizing:border-box} html{font-size:23px; -webkit-text-size-adjust:100%} body{margin:0; background:var(--ground); color:var(--ink); -webkit-font-smoothing:antialiased} a{ color:var(--ink-line); text-decoration-line:underline; text-decoration-color:currentColor; text-decoration-thickness:1px; text-underline-offset:.17em; } /* The page gutter and the label rail, in the one sheet every page loads. Both were written out a second time in topics.css and a third page needed them, which is the point at which a copy stops being a copy and becomes three things that can disagree. --bleed-r is how far the right gutter is from the viewport edge, for the few elements that are allowed to reach past it. */ .wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(22px,4vw,40px); --bleed-r:max(0px, (100vw - 1180px) / 2 + clamp(22px,4vw,40px) - 24px); } .k{font:500 13px/1.5 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted)} /* ---- the rhythm steps down twice, at the reference's own proportions ---- */ @media (max-width:1250px){ :root{--sep:200px; --sep-l:300px; --sep-s:50px; --sep-xs:10px} } @media (max-width:820px){ :root{--sep:100px; --sep-l:200px; --sep-s:40px; --sep-xs:10px} } /* ---- cross-document view transitions ---- Both documents in a navigation have to opt in, so this lives in the one sheet every page loads. It used to sit in explorer.css and stage.css, which between them reach eight pages of forty-one, so thirty-three of the site's navigations were a white flash. The stage's number, name and deck are the same three elements on both sides of a stage navigation and are named in stage.css so the browser carries them across. Chrome, Edge and Safari run this; Firefox has not shipped it and gets an ordinary page load. Wrapped in no-preference because @view-transition has no other off switch, and a reader who has asked for less motion has asked for a plain navigation. */ @media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}