/* ===================================================================== Adverit Legal — Design Tokens (CSS custom properties) --------------------------------------------------------------------- THE canonical, framework-agnostic source of truth for the brand. v2.9.0 — Phase 1 Design Refresh. Palette and type are transcribed from the Figma file "Adverit Copy", page "Master & Satellite actual" (node 226:4313). Authorised by ADR-0014 in the ADVERIT vault; the per-screen implementation map is docs/design-map.md. 2.1.0 adds the Operator Console layer (--adv-console-*), authorised by ADR-0016. 2.2.0 adds the mobile layer (--adv-m-*) and the first breakpoint tokens, transcribed from the 402px mobile tier, authorised by ADR-0017. 2.3.0 adds the satellite layer (--adv-sat-*), authorised by ADR-0018 (its hero tokens retired in 2.9.0). 2.4.0 gives the master header a row of its own and redraws the master hero's headline (--adv-nav-h / --adv-master-nav-h, the --adv-hero-intro-pad pair, --adv-hero-intro-title-weight), authorised by ADR-0022 (AD-131). 2.5.0 gives the display headings a line budget (--adv-display-measure / -budget / -size-tight, the re-measured --adv-sat-hero-measure and its -size-tight, --adv-bp-frame), authorised by ADR-0021 §4 item 21 (AD-132). 2.6.0 is the 2026-09-16 round (AD-137): the navy accent button and footer, the second site shadow (--adv-shadow-search), and the master homepage's centred hero and its search pill (--adv-hero-home-*, --adv-hero-pill-*), which retire the AD-131 row tokens they replace (--adv-hero-intro-pad-*, --adv-hero-intro-title-ls, --adv-hero-float-gap), authorised by ADR-0024. 2.7.0 is the same round's inner pages (AD-138): the inset photo plate's radius (--adv-radius-band), the master bar's translucent current item (--adv-nav-active-fill / -blur) and the About page's split hero (--adv-about-hero-*), authorised by ADR-0025. 2.8.0 adds the form field's two drawn states (AD-143): the focus surface and the error surface (--adv-color-field-focus / --adv-color-field-error, and the --adv-field-* aliases every form reads), authorised by ADR-0028. 2.9.0 is the round's satellite half (AD-145): one page-title weight (700) on both tiers, one header-row height (--adv-nav-h is 99 on both tiers and --adv-master-nav-h retires), the firm's city beside the logo and in the Home hero (--adv-nav-city-*, --adv-hero-city-*), and the footer's light-blue network line on navy, authorised by ADR-0030. Its design-QA amendment (ADR-0030 Amendment 1, still 2.9.0 — unreleased) turns the nav tint into the HOVER plate and puts the caret on the body grey (--adv-color-nav-caret), bounds the city names (--adv-hero-city-max-w / -size-tight, --adv-nav-city-max-w), and draws the 402 bar and Homes (--adv-m-header-h 88, --adv-m-logo-tile-* 220 × 88, --adv-m-logo-h, --adv-m-hero-logo-w, --adv-m-hero-city-size, --adv-m-nav-city-size, --adv-m-home-title-weight / -lh). Its second design-QA amendment (ADR-0030 Amendment 2, still 2.9.0) slows the Home logo's slide into the bar (--adv-transition-logo-slide, 0.48s). ADR-0025 Amendment 19 (AD-149, still 2.9.0) adds the type scale's smallest step (--adv-caption-size 10px, --adv-caption-lh, --adv-caption-ls): the news-card date carried it as a literal, and the ≤860 office card on the master's map draws two more lines at the same size. ADR-0049 (AD-180, still 2.9.0) adds the e-mail layer (--adv-email-width 600px, --adv-email-logo-w 160px): the two numbers Authentik's generated invitation and reset e-mails need that no page does. ADR-0025 Amendment 24 (AD-185, still 2.9.0) adds --adv-m-detail-gap 54px: the 402 detail stack (681:27056, 704:30027, 750:35822, 760:8044 — every block of a detail page 54 apart), which components.css carried as a literal. Every Adverit surface — Hugo firm sites, the adverit.legal master site, the demo simulation tool, and any admin/portal UI — MUST consume these variables and match them exactly. Do NOT hard-code raw hex/px values in components; reference var(--adv-*). Changes here are brand changes and require an ADR in the ADVERIT vault. Provenance is marked on every group that has none in Figma: [figma] bound to a Figma variable — authoritative [read] read off a component with get_design_context [measured] read off a render; no variable binds it [kept] carried over from v1; the design does not address it [deprecated] alias kept so consumers don't break; scheduled for removal Values are mirrored verbatim in tokens.scss and tokens.json — keep the three in lock-step. ===================================================================== */ :root { /* ---------- Brand colours [figma] ---------- */ --adv-color-primary: #2B68A9; /* "Corporate blue" — links, active edges, accents */ --adv-color-primary-dark: #122448; /* "Dark navy" — filled CTA (ADR-0024), active text, deep panels */ --adv-color-hero-navy: #122448; /* Hero / footer base (same navy) — footer on both tiers */ /* ---------- Accents [figma] ---------- Annotated in the file as "used selectively across the interface". These are accents, NOT a second primary. */ --adv-color-accent-light-blue: #D0DEEC; /* Active/selected surface */ --adv-color-accent-burgundy: #652C35; /* Hover text accent, section labels */ /* ---------- Page palette [design] ---------- From the "Adverit Design System" Claude Design project, which carries the page-level values the Figma *variables* never bound — the ones the screens actually use. Everything above is bound in Figma and stays authoritative for components; these cover the compositions around them. `heroInk` (#112B3D) USED TO LIVE HERE as "the one value in neither source's token list". It is gone: 896:9764 binds `corporate/navy`, so the satellite hero title is #122448 and the value now resolves through `--adv-sat-heading-ink`. Removed rather than aliased — it had one consumer, in this repo, and a [measured] token that a variable has since contradicted is a trap, not a fallback. */ /* `surfaceCool` (#F5F5F5) USED TO SIT HERE as "cool section band — NOT surface-alt". Removed 2026-09-01: Figma's variable set has exactly TWO page backgrounds — `background/main` #FAF9F7 and `background/secondary` #F5F4F2 — and #F5F5F5 is neither. Both painted bands on the satellite homepage bind `background/secondary` on their own rectangles (896:9785, 896:9818). It encoded a distinction the design does not make, and the template comment that repeated it as fact is what kept the wrong colour on the band. */ --adv-color-blue-deep: #355992; /* master brand / link hover */ --adv-color-ink-strong: #212121; /* outlined-button label, strongest ink */ --adv-color-ink-muted: #797979; /* secondary text in compositions */ --adv-color-surface-blue: #E7EEF3; /* pale blue panel */ --adv-color-rule: #DEDEDE; /* hairline rules inside sections */ /* The hero scrim. The master's photo band carries a full-height gradient from #232323 at the foot to transparent at the head (623:21938) — darker than body ink, and the only reason the white search copy over the photograph is readable. Not a surface and not a text colour: it exists to be seen through. */ --adv-color-scrim: #232323; /* ---------- Glass [design, read from the component] ---------- The master homepage's quick links (node 516:5836, "Frame 102") are the one surface in the system that sits ON a photograph: a 10% white wash over a 10px backdrop blur, going to a 30% light-blue wash when selected. Read off the component, not measured off a render, and bound to no Figma variable — which is why they are here rather than in the palette above. A wash, not a fill: both take the colour of the photograph behind them, so they are only legible over the hero's dark foot. Do not reuse on a plain page surface, where a 10% white on near-white is invisible. */ --adv-color-glass: rgba(245, 245, 245, 0.10); --adv-color-glass-active: rgba(208, 222, 236, 0.30); --adv-glass-blur: 10px; /* ---------- On-media controls [design, read from 623:21940] ---------- The master's hero CONTROLS — the two selects and the search field — when they sit on the photograph: a 70% INK wash under a 5px blur, on the dark border, with inverse copy. NOT the glass above, and the difference is deliberate. Glass is a 10% WHITE wash: it lightens what is behind it, which is right for the quick-link tiles (they are plates, and their labels are large). A control has to be READ — a placeholder at 14px over an arbitrary photograph needs the background darkened, not lightened. Both live on the same hero, one over the other, because they answer different questions. THE MOBILE TIER ALREADY DREW THIS (ADR-0017, `--adv-m-search-fill`): the 402 hero field is the same 70% ink. Same value, so the mobile token now REFERENCES this one instead of restating it — desktop simply had not caught up until 623:21940. THE 5px BLUR IS THE ONE NEW VALUE (glass blurs at 10) — see the ADR note in Decisions/, rule 5. */ --adv-on-media-fill: color-mix(in srgb, var(--adv-color-ink) 70%, transparent); /* rgba(60,60,60,.7) */ /* THE BUTTON IS A LIGHTER WASH THAN THE FIELD — 30%, not 70% (AK, 2026-08-31). It overlaps the field's tail, so the two washes STACK: at a matching 70% the disc composites to 91% ink and a solid #3C3C3C ring has almost nothing to separate from, which is what AK saw as "no border". Over a mid-grey photograph the arithmetic is: field 87, disc 68, ring 60 — the disc reads and the ring does not. At 30% it becomes field 87, disc 79, ring 60: the ring gains what the disc gives up, which is the right trade for a control whose SHAPE is its affordance. 681:27546 (the 402 component) is where the design states this; 623:21940 draws the desktop button at 70% like its field. Taking the mobile value on both tiers — a DELIBERATE divergence from the desktop frame, flagged for design, and the only reading under which the button is a button. */ --adv-on-media-btn-fill: color-mix(in srgb, var(--adv-color-ink) 30%, transparent); --adv-on-media-blur: 5px; /* ---------- Nav item HOVER plate [design, read from 247:7400] ---------- Every bar item's HOVER, on both tiers (247:7400, the "Header section menu" component both headers instance): a 5% BLACK tint under a 30px backdrop blur, radius 12. The frame's blur is 30.3, rounded the way ADR-0024 rounded the menu's 3.05. The names say "active" because the tint was the master's CURRENT item until the client redrew the states (ADR-0025 §3 → ADR-0030 Amendment 1 §1). Names are identities, so they stay; current is now an unfilled navy 600 label (--adv-active-text). THE FIRST TRANSLUCENT-BLACK SURFACE IN THE PALETTE, AND IT HAS TO BE ONE. About's bar and the satellite Home's are filled #F5F4F2 — which is --adv-hover-surface — so an opaque plate would vanish into the bar it sits on. A tint darkens whatever is under it by the same step on either bar surface. */ --adv-nav-active-fill: rgba(0, 0, 0, 0.05); --adv-nav-active-blur: 30px; /* ---------- Neutrals & surfaces [figma] ---------- */ --adv-color-ink: #3C3C3C; /* "Text Primary" — headings & body ink */ --adv-color-body: #51595F; /* "Text Secondary" — long-form body copy */ --adv-color-surface: #FAF9F7; /* "Background Primary" — page background, controls */ --adv-color-surface-alt: #F5F4F2; /* "Background Secondary" — cards, hover surfaces */ --adv-color-border: #DAD6D0; /* "Borders Light" — default 1px borders */ --adv-color-border-strong: #3C3C3C; /* "Borders Dark" */ /* PURE BLACK — the on-media control's ACTIVE edge, and the only place the system uses #000 (AK, 2026-08-31). It is NOT a general ink: text is `--adv-color-ink` #3C3C3C, and "Borders Dark" is that same #3C3C3C, which is what every edge on the hero control carries at REST. Black is the step above it, so focusing the field darkens its outline instead of recolouring it — the resting/active pair reads as one control changing state rather than as two colours. ADR OWED (rule 5): a new brand value, bound to no Figma variable. */ --adv-color-black: #000000; --adv-color-white: #FFFFFF; /* The dropdown caret. 247:7400 (every state), 1529:15071 and the hero pill fill it with "text/secondary", which IS the body grey — an alias, not a second hex (ADR-0030 Amendment 1 §1). It was #868686 ("old/Grey/ navigation") until the 2026-09-17 redraw. */ --adv-color-nav-caret: var(--adv-color-body); /* ---------- On-dark [figma] ---------- */ --adv-color-on-navy: #FAFBFC; /* "Text Inverse" — text on navy/blue */ /* ---------- Tint ramps [read] ---------- 498:5753 navy · 498:5773 blue · 498:5785 burgundy. These are OPACITY steps on the base colour — 100/90/80/70/60/50% — not opaque tints mixed toward white. The distinction matters: they take the colour of whatever sits behind them, so on the #FAF9F7 page they read as the swatch board shows, and on any other surface they do not. Use them over a known backdrop, or flatten first. */ --adv-ramp-navy-100: rgba(18, 36, 72, 1); --adv-ramp-navy-90: rgba(18, 36, 72, 0.9); --adv-ramp-navy-80: rgba(18, 36, 72, 0.8); --adv-ramp-navy-70: rgba(18, 36, 72, 0.7); --adv-ramp-navy-60: rgba(18, 36, 72, 0.6); --adv-ramp-navy-50: rgba(18, 36, 72, 0.5); --adv-ramp-blue-100: rgba(43, 104, 169, 1); --adv-ramp-blue-90: rgba(43, 104, 169, 0.9); --adv-ramp-blue-80: rgba(43, 104, 169, 0.8); --adv-ramp-blue-70: rgba(43, 104, 169, 0.7); --adv-ramp-blue-60: rgba(43, 104, 169, 0.6); --adv-ramp-blue-50: rgba(43, 104, 169, 0.5); --adv-ramp-burgundy-100: rgba(101, 44, 53, 1); --adv-ramp-burgundy-90: rgba(101, 44, 53, 0.9); --adv-ramp-burgundy-80: rgba(101, 44, 53, 0.8); --adv-ramp-burgundy-70: rgba(101, 44, 53, 0.7); --adv-ramp-burgundy-60: rgba(101, 44, 53, 0.6); --adv-ramp-burgundy-50: rgba(101, 44, 53, 0.5); /* ---------- Interaction language [read] ---------- Consistent across button, tag, filter, search, nav item and all four cards, so it is encoded once here rather than per component. */ --adv-hover-surface: var(--adv-color-surface-alt); /* #F5F4F2 */ --adv-hover-accent: var(--adv-color-accent-burgundy); /* text accent on hover */ --adv-active-surface: var(--adv-color-accent-light-blue);/* #D0DEEC */ --adv-active-text: var(--adv-color-primary-dark); /* navy — NOT blue, see below */ --adv-active-edge: var(--adv-color-primary); /* #2B68A9 */ /* THE FORM FIELD'S TWO DRAWN STATES (AD-143, ADR-0028 §8) — read off 560:15756 (focus) and 560:15874 (validation). Neither fill is bound to a Figma variable; both edges are. The focus state is NOT the active state above: a focused field is a near-white #F2F4F5 under the blue edge, where a selected chip is #D0DEEC. The error state is a warm #EBE5E4 under the burgundy edge, with the message in burgundy. Every `.adv-field` reads these — the master's forms and the satellite's contact form alike. */ --adv-color-field-focus: #F2F4F5; --adv-color-field-error: #EBE5E4; --adv-field-focus-surface: var(--adv-color-field-focus); --adv-field-focus-edge: var(--adv-active-edge); /* #2B68A9 */ --adv-field-error-surface: var(--adv-color-field-error); --adv-field-error-edge: var(--adv-color-accent-burgundy); /* #652C35 */ --adv-field-error-text: var(--adv-color-accent-burgundy); /* Card hover is not a recolour: same surface under a 2% blue wash, plus scale(1.05) and the title to navy. The wash over #F5F4F2 composites to #F1F1F1, which is what earlier measurements of the render reported. */ --adv-card-hover-wash: rgba(43, 104, 169, 0.02); --adv-card-hover-scale: 1.05; /* ---------- Disabled [measured] ---------- Binds no Figma variable in any of the six button variants. Label on fill is 3.08:1 — below AA, accepted under WCAG 1.4.3's inactive-control exemption. Flagged to design; replace if a bound value ever arrives. */ --adv-disabled-bg: #D6D6D6; --adv-disabled-border: #979EA5; --adv-disabled-text: #777778; /* ---------- Semantic aliases (prefer these in components) ---------- */ --adv-text: var(--adv-color-ink); --adv-text-body: var(--adv-color-body); --adv-text-muted: var(--adv-color-body); --adv-bg: var(--adv-color-surface); --adv-bg-card: var(--adv-color-surface-alt); --adv-bg-tint: var(--adv-color-accent-light-blue); --adv-border-color: var(--adv-color-border); --adv-link-color: var(--adv-color-primary); --adv-link-hover: var(--adv-color-primary-dark); /* Focus is NOT designed — authored by us, because it is an accessibility requirement that cannot wait on design (ADR-0014 §4). */ --adv-focus-ring: var(--adv-color-primary); --adv-focus-ring-width: 2px; --adv-focus-ring-offset: 2px; /* ---------- Deprecated aliases [deprecated] ---------- The new palette has no counterpart for these, but they have live consumers (tint ×104, link ×47, tint-edge ×45, faint ×43, on-navy-muted ×12). Remapped rather than deleted so this refresh does not double as a console-wide breakage. Scheduled for removal in a follow-up ticket — do NOT reference them in new code. */ --adv-color-link: var(--adv-color-primary); /* was #1A6AA3 */ --adv-color-muted: var(--adv-color-body); /* was #6D7A85 */ --adv-color-faint: var(--adv-color-body); /* was #9AA6B0 */ --adv-color-tint: var(--adv-color-accent-light-blue); /* was #EEF4F8 */ --adv-color-tint-edge: var(--adv-color-border); /* was #D4E2EC */ --adv-color-border-soft: var(--adv-color-surface-alt); /* was #EEF1F4 */ --adv-color-on-navy-muted: var(--adv-color-on-navy); /* was #9CC3DD */ --adv-color-navy-divider: rgba(250, 251, 252, 0.12); /* was #1C405F */ /* ---------- Wordmark [kept] ---------- These describe the logo asset, not the UI, so the refresh leaves them. */ --adv-color-logo-blue: #5E89C6; --adv-color-charcoal: #333739; /* ---------- Status palette (admin Operator Console) [kept] ---------- Live / Suspended / Building / Error / Demo. No counterpart in Figma — this is a console taxonomy, not brand surface — so ADR-0007 stands and the values are carried over. ONE CORRECTION (ADR-0014 §3): warning measured 4.47:1 on its own background, not the 4.8:1 recorded in v1 — under AA. The fg is darkened from #B45309 to #A34A08 to clear 4.5:1. Erratum filed against ADR-0007. Note the pill backgrounds sit at 1.02–1.11:1 against the new page backgrounds: the border is load-bearing and must not be dropped. */ --adv-status-success-fg: #1F7A5C; --adv-status-success-bg: #E7F3EC; --adv-status-success-border: #BFE0CC; --adv-status-warning-fg: #A34A08; /* was #B45309 — see above */ --adv-status-warning-bg: #FBF0E3; --adv-status-warning-border: #EBD3AE; --adv-status-danger-fg: #B4322B; --adv-status-danger-bg: #FBEAE8; --adv-status-danger-border: #E6C3BF; --adv-status-demo-fg: #6B4E9E; --adv-status-demo-bg: #F1ECF8; --adv-status-demo-border: #D9CCEE; --adv-status-info-fg: #1A6AA3; /* no longer tracks link, which moved to #2B68A9 */ --adv-status-info-bg: #E8F1F8; --adv-status-info-border: #C2DBEC; /* ---------- Typography: families [figma] ---------- The Figma file is Inter and nothing else. Self-hosted, latin + latin-ext, font-display: swap — no Google Fonts CDN, because the EU data-residency rule makes a third-country font fetch on every page load an avoidable transfer. */ --adv-font-heading: 'Inter', system-ui, -apple-system, sans-serif; --adv-font-body: 'Inter', system-ui, -apple-system, sans-serif; --adv-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* [kept] console/eyebrow only */ /* ---------- Typography: weights ---------- */ --adv-weight-regular: 400; --adv-weight-medium: 500; --adv-weight-semibold: 600; --adv-weight-bold: 700; /* ---------- Type scale [figma] ---------- Figma exposes seven styles; the token set has eight roles, so the mapping is authored, not mechanical (ADR-0014 §2). LINE HEIGHT: three Figma styles report `lineHeight: 100`, which means AUTO — not 100% and not 100px. For Inter, AUTO is 1.21 (hhea 1984+494 over 2048 upem), confirmed against rendered nodes: a 38px heading measures 46px, a 14px node 17px. Never transcribe it as 1 or 100. Role Figma style Size LH */ --adv-h1-size: 38px; --adv-h1-lh: 1.21; --adv-h1-ls: 0; /* Heading/semibold_38px (AUTO) */ --adv-h2-size: 28px; --adv-h2-lh: 1.5; --adv-h2-ls: 0; /* Heading/regular_28px */ --adv-h3-size: 22px; --adv-h3-lh: 1.21; --adv-h3-ls: 0; /* Heading/medium_22px (AUTO) */ --adv-h4-size: 16px; --adv-h4-lh: 1.5625; --adv-h4-ls: 0; /* Navigation/medium_16px — see note */ --adv-lead-size: 24px; --adv-lead-lh: 1.5; --adv-lead-ls: 0;/* Body/regular_24px */ --adv-body-size: 16px; --adv-body-lh: 1.5625; --adv-body-ls: 0; /* Body/regular_16px (25px) */ --adv-small-size: 14px; --adv-small-lh: 1.21; --adv-small-ls: 0; /* Navigation/regular_14px (AUTO) */ --adv-eyebrow-size: 12px; --adv-eyebrow-lh: 1.4; --adv-eyebrow-ls: 0.12em; /* [kept] no Figma counterpart */ --adv-caption-size: 10px; --adv-caption-lh: 1.21; --adv-caption-ls: 0; /* "Old/small" (AUTO) */ /* caption is the design's smallest step, and it took until AD-149 to become a token. The news-card date has been 10px since the card shipped, written as a literal in components.css with a comment calling it "the only 10px in the design"; 1605:21983/21984 — the ≤860 office card's country and its practice-areas line — made that untrue. Two call sites is a role. `small` is 14 and its Figma style is Navigation/regular_14px; its JSON role read "Caption" until AD-149 and now reads "Small", so the word means one size. Authorised by ADR-0025 Amendment 19. */ /* h4 has no fourth heading in Figma — the design has three heading sizes and card titles use h2 (28px). It is mapped to Navigation/medium_16px, the smallest authored label style, so the role stays usable. */ /* Navigation roles, explicit [figma] */ --adv-nav-size: 16px; --adv-nav-lh: 1.5625; /* Navigation/medium_16px, weight 500 */ --adv-nav-small-size: 14px; --adv-nav-small-lh: 1.21; /* Navigation/regular_14px (AUTO) */ /* ---------- Display scale [design] ---------- The Figma *variables* stop at 38px, so a transcription of them alone has nothing to set a hero or a section headline with — which is why the first pass produced a type scale that could not build a homepage. These are the sizes the screens use, from the Claude Design project's `typography.css` plus the satellite template itself. LINE HEIGHT: the file reports 100 on these, and ADR-0014 §2 is explicit that 100 means AUTO — 1.21 for Inter — not 100%. The first transcription read it as a flat 1 and set every display headline in a line box its own size. Only `display` is corrected here, from a measured 70px on the master homepage's band headline; `hero`, `pageTitle` and `cardTitle` are left at 1 until each is measured the same way rather than assumed. */ /* `--adv-hero-*` MOVED to the satellite layer at the foot of this file (`--adv-sat-hero-*`, ADR-0018) and retired there in 2.9.0 with its only consumer, the firm sites' `.adv-hero-title` (ADR-0030 §2). Leaving it here is what let five empty-state plates borrow it — see `--adv-monogram-size` below. */ /* The initials plate that stands in for a missing photograph — firm card, expert photo, person card, insight media, CTA band. All five are AUTHORED (the design draws no empty state for any of them) and all five used to read `--adv-hero-size` simply because it was the largest display value in the file. That coupling meant correcting the hero above would silently resize five unrelated components, so the borrowed value is pinned here instead and the plates keep exactly the size they render today. */ --adv-monogram-size: 72px; /* [authored] empty-photo initials plate */ /* AUTO (1.21), not 1 — see the note below the group. 58 x 1.21 = 70.18, which is the 70px line box the frames show on a band headline. */ --adv-display-size: 58px; --adv-display-lh: 1.21; --adv-display-weight: 700; /* section headline */ /* ---------- The display heading's line budget (AD-132) ---------- A MEASURE, A RUNE COUNT AND ONE STEP DOWN, and none of them belong on `--adv-display-size`: that token is also read by `.adv-expert-name`, `.adv-detail__name`, `.adv-article__title` and `.adv-page-head--master .adv-page-title`, none of which want a measure. These three reach exactly two headings, through `.adv-display--budget` and `.adv-display--tight` — see the note on those rules in `css/components.css`, which is also where the three-line cap lives. 600 IS WHAT THE SATELLITE ALREADY DREW. `sections/intro.html` carried an inline `max-width:16ch`, which computes to 603.38 at 58/700 — so this is that number, made a token and given to the master's About heading, which had no cap at all. It binds because the band's column is 660. 55 IS MEASURED, NOT DIVIDED. Dividing 600 by an average character width gives 65 and ignores raggedness, which is where the missing ten live; a realistic string at 600/58/700 takes a fourth line from 56 runes. Hugo compares the headline's `strings.RuneCount` against this number and emits `--tight` or does not, which is how the size steps by CONTENT and not by viewport — `clamp()` keys off the screen and would do the opposite. Hugo cannot read a custom property at build time and neither can `@media`, so this is the canonical record and the literals in `sections/hero.html`, `sections/intro.html`, the master's `sections/about.html` and `sites/_template/static/admin/config.yml` MUST match it. Same contract as `--adv-bp-*` above. */ --adv-display-measure: 600px; /* `.adv-display--budget`'s measure in the 660 column */ --adv-display-budget: 55; /* runes that fit three lines at 58/700 [measured 2026-09-08] */ --adv-display-size-tight: 52px; /* the one step down, chosen per string [figma] */ /* 58/1.21, NOT 72/1 (AK, 2026-09-01). AD-75 set 72 from the two handoff templates and recorded it as correcting "the 58/900 a first pass read from a style name". The style name was right. THE FILE HAS NO 72px TYPE STYLE AT ALL — its heading scale is 58 (black/bold), 38 (semibold), 28 (regular), 22 (medium) — and three page h1s bind `Heading/black_58px` directly: 336:10814 (satellite About), 343:11445 (satellite listing) and the master's own 522:8766. So 72 existed only in the handoff HTML, which is why `.adv-page-head--master .adv-page-title` was already patched back to 58: the master had found this and fixed it at its own scope, leaving the satellite on the wrong base. That override is now redundant, as is `--sm`. lh is AUTO, the same trap as `hero` and `display`: About's h1 box is 70, which is 58 x 1.21, not 72 x 1. 700 SINCE 2.9.0 (ADR-0030 §4, AD-145). The redrawn satellite heads (343:11443 and its three twins, 553:12683, 553:13398) bind `Heading/bold_58px` where 336:10814 / 343:11445 bound `black_58px`, and the master had already moved every head it redrew to 700 by rebinding this at its own scope (ADR-0025 §2). The token moves instead and those rebinds are gone; the two search titles, which nothing rebound, follow. */ --adv-page-title-size: 58px; --adv-page-title-lh: 1.21; --adv-page-title-weight: 700; /* page h1 — 343:11443, 553:12683 */ /* MEASURED AT LAST, and it is h2 (AK, 2026-08-31). 38/1 was the placeholder the note below this group flagged — "cardTitle is left at 1 until measured". The component 288:3219 names its title style `Heading/regular_28px` in every variant, which is `--adv-h2-size` exactly, and the token file already said so in the h4 note: "card titles use h2 (28px)". 1.5 comes with the style. */ --adv-card-title-size: 28px; --adv-card-title-lh: 1.5; --adv-card-title-weight: 400; /* large card title = h2 */ --adv-subtitle-size: 24px; --adv-subtitle-lh: 1.5; /* hero subtitle, intro copy */ /* THE MASTER HOMEPAGE'S HEADLINE IS THE ONE DISPLAY SIZE THAT IS NOT SET TIGHT. It is 58px like the others, but with a loose line box — not the AUTO every other display size carries. REDRAWN TWICE. 2026-09-08 (1198:9572): the line box closed 68 → 56 and the weight dropped 900 → 700. The weight differs from `--adv-page-title-weight`, which is every page h1 on BOTH tiers, hence a token of its own. 2026-09-16 (1482:29818, ADR-0024 §6): the headline is centred above the search and binds the NAMED style `Heading/bold_58px` — 700, letter-spacing 0, a 95.245% line box (55.2). That binding answers AD-131's open question, so the 1px tracking token is gone and the rule says `letter-spacing: 0`; the 56 stays, 0.8px from the frame. Its own tokens rather than a change to `--adv-display-*`: those set every band headline on the page, and the file gives THIS node its own metrics. Consumed by `.adv-page-hero--home .adv-page-title`. */ --adv-hero-intro-title-weight: 700; --adv-hero-intro-title-lh: 56px; /* Section label — uppercase, maroon, 24px. This is what the screens put above every band ("About us", "practice areas", "our values"). Note it is NOT the v1 `eyebrow`, which is 12px mono and has no counterpart in the design at all; that one stays only because the console still uses it. */ --adv-label-size: 24px; --adv-label-lh: 1; --adv-label-weight: 500; /* ---------- Spacing [read] ---------- Measured off auto-layout padding and gaps. 26 and 34 do not fit the old 4/8-point scale — the scale gains steps rather than the comps being rounded to fit it. */ --adv-space-4: 4px; /* card title→body gap */ --adv-space-8: 8px; /* [kept] */ --adv-space-12: 12px; /* filter row gap, panel gap */ --adv-space-16: 16px; /* dropdown item gap, control padding-block */ --adv-space-24: 24px; /* [kept] */ --adv-space-26: 26px; /* control + card padding-inline (button, filter, card) */ --adv-space-32: 32px; /* [kept] */ --adv-space-34: 34px; /* card padding-block */ --adv-space-40: 40px; /* nav item padding-inline */ --adv-space-42: 42px; /* expanded filter column gap */ --adv-space-48: 48px; /* [kept] */ --adv-space-60: 60px; /* page margin: 60 each side of the 1320 container on 1440 */ --adv-space-64: 64px; /* [kept] */ /* ---------- Radii [read] ---------- The design has exactly two: 12px for every panel and card, pill for every control. The button stores a literal 66px, which CSS clamps to half its 50px box — so it is a pill, and is transcribed as one. The remaining names are deprecated aliases (button ×90, md ×68). */ --adv-radius-0: 0; --adv-radius-card: 12px; /* all four cards + the open-filter panel */ --adv-radius-pill: 999px; /* button, tag, filter, search field */ --adv-radius-xs: 4px; /* open-filter search field + tickbox (522:9005, 522:9537) */ /* The master's PHOTO PLATES (AD-138): the listing band (1485:37739), the detail band (1485:37746) and About's hero photograph (1482:33811) are inset 1320 plates with a 24 radius. A third radius on the desktop tier — ADR-0025 §1 amends ADR-0014 §5 ("exactly two") and ADR-0017 §4 ("two per tier"). */ --adv-radius-band: 24px; --adv-radius-button: var(--adv-radius-pill); /* [deprecated] was 6px */ --adv-radius-md: var(--adv-radius-card); /* [deprecated] was 8px */ --adv-radius-lg: var(--adv-radius-card); /* [deprecated] was 14px */ --adv-radius-xl: var(--adv-radius-card); /* [deprecated] was 16px */ /* ---------- Borders ---------- */ --adv-border-width: 1px; --adv-border: var(--adv-border-width) solid var(--adv-color-border); --adv-border-tint: var(--adv-border-width) solid var(--adv-color-border); /* ---------- Elevation [read] ---------- THE DESIGN IS FLAT. No component in the file casts a shadow — not the card, not its hover, not the full-bleed dropdown, not the floating filter panel. Every surface is fill + 1px border, and card hover uses scale, not elevation. So the site shadows resolve to `none`. raised/dropdown are retained for the Operator Console only: a dialog or slide-over with no elevation is a usability problem, not a style choice. This is a sanctioned divergence (ADR-0014 §6) — the first in a system whose premise is one visual language everywhere. ONE EXCEPTION ARRIVED (AK, 2026-08-31): the master's rebuilt "Find legal support" menu (890:8431) carries `drop-shadow(0 0 3.05px rgba(0,0,0,0.08))` — the FIRST site component in the file to cast one, and it contradicts the finding above. It is a hairline halo, not elevation: no offset, 3px of blur, 8% black, on a panel that already has its 1px border. Kept as its own token rather than relaxing `--adv-shadow-card`, because the finding still holds for every other surface. Recorded by ADR-0024. A SECOND ONE ARRIVED (2026-09-16, AD-137): the master hero's search pill (1482:29818) carries `drop-shadow(0 0 3.05px rgba(0,0,0,0.04))` — the same halo at half the strength. Its own token for the same reason, and rounded to 3px the way the menu's 3.05 was. Two named exceptions, not a relaxed rule: every other surface is still flat. ADR-0024 §4. */ --adv-shadow-card: none; --adv-shadow-card-hover: none; --adv-shadow-menu: 0 0 3px rgba(0, 0, 0, 0.08); /* master nav menu, 890:8431 */ --adv-shadow-search: 0 0 3px rgba(0, 0, 0, 0.04); /* master hero search pill, 1482:29818 */ --adv-shadow-raised: 0 10px 30px rgba(18, 36, 72, 0.12); /* console only */ --adv-shadow-dropdown: 0 12px 34px rgba(18, 36, 72, 0.14); /* console only */ /* ---------- Layout [read] ---------- */ --adv-container: 1320px; /* search field is 1320 wide at x=60 on a 1440 frame */ --adv-gutter: 26px; /* card inner gutter */ --adv-grid-columns: 12; --adv-section-pad-x: 60px; /* page margin on 1440 */ /* [design] The screens space their bands by 96 and stack heading→body→CTA by 26. v1's 56px section padding was a guess and is superseded. */ --adv-section-gap: 96px; --adv-stack-gap: 26px; --adv-section-pad-y: 96px; /* = --adv-section-gap; literal so the parity test can compare it */ --adv-card-gap: 60px; /* between cards in a homepage row */ /* [design] THE MASTER HOMEPAGE HERO — ONE CENTRED COLUMN (1482:29818, 2026-09-16, ADR-0024 §6). A 1440 x 1024 composition that starts at y=0, under the transparent bar: the wordmark box at 112, the headline centred on 457.5, the subtitle at 510, the search pill at 643, "Popular:" at 725. THE GAPS ARE WHAT IS LEFT BETWEEN THE BLOCKS' OWN HEIGHTS, so each block keeps its own box and the column cannot drift by summing: wordmark 215.4 (the tile at 2.174x, `.adv-page-hero__wordmark`) → 102 → h1 56 → 25 → subtitle 36 → 97 → pill 70 → 12 → Popular. 102 rather than the 103 a 215 box would give: the glyph box renders 215.4, and 102 puts the h1's centre on the frame's 457.5. `min-height`, not `100vh`: the frame is a composition, not a viewport — at 900 tall the Popular line alone would already sit at the fold. NO OPACITY TOKEN. The frame draws its render at 73% over #F5F4F2, and the designer's export ALREADY IS that composite — measured against Figma's own render of 1482:29818 (mean error 0.6 as delivered, 3.1 with a further 73% applied). So the file is shown as it is. Off the 4/8 scale throughout; every value is the frame's. */ --adv-hero-home-min-h: 1024px; --adv-hero-home-pad-top: 112px; --adv-hero-home-gap-title: 102px; --adv-hero-home-gap-subtitle: 25px; --adv-hero-home-gap-search: 97px; --adv-hero-home-title-measure: 892px; --adv-hero-home-gap-popular: 12px; /* [design] The hero's search pill (1482:29844): 899 x 70, its two select cells 100 and 140 wide, and a 60px navy submit disc 5 in from the right end. The cell gap and the pill's own inset are the scale's 26. */ --adv-hero-pill-w: 899px; --adv-hero-pill-h: 70px; --adv-hero-pill-office-w: 100px; --adv-hero-pill-support-w: 140px; --adv-hero-pill-submit-inset: 5px; /* [design] The master About hero (1482:33810, AD-138): one 1024 band, copy on the left in a 500 column (1482:33910, vertically centred — 366 to 659), a 720 x 815 photograph from the bar's foot to the right edge (1482:33811). Its own min-height rather than --adv-hero-home-min-h: the values match today, but a redraw of one page must not move the other. */ --adv-about-hero-min-h: 1024px; --adv-about-hero-copy-w: 500px; --adv-about-hero-photo-h: 815px; /* [read] The header's row — ONE height for both tiers since 2.9.0. The design publishes one header component in two variants (516:6080); both were 60 until the 2026-09-08 round redrew the master's at 99 (1198:9572, 1205:11636), and the 2026-09-16 round redrew the satellite's at 99 too (I553:12719, 1484:36481 — ADR-0030 §1). So the second token the master's value used to need (--adv-master-nav-h, rebound onto this one inside `.adv-nav--master`) is gone: `.adv-nav__bar` reads this, and so do the rules OUTSIDE the nav whose frame positions are page-y and are written as "frame y − bar" (ADR-0025 §8) — the heroes that pull themselves up under the bar and the listing and detail heads, on both tiers. Below 861 the bar is --adv-m-header-h, set as a `height` directly. */ --adv-nav-h: 99px; /* [design] The firm's city beside the logo (I553:12719: Inter Medium 24/25, #3C3C3C) and in the Home hero's lockup under the wordmark (1484:36477: Inter Regular 42, line box 1.153). The footer's city (247:8404) is the bar's pair on navy. ADR-0030 §1–§3. */ --adv-nav-city-size: 24px; --adv-nav-city-lh: 25px; --adv-hero-city-size: 42px; --adv-hero-city-lh: 1.153; /* [design] How far a city may run (MD, 2026-09-17; ADR-0030 Amendment 1 §5). The hero city's box is at most 300: a compound name wraps inside it, a single long word drops to the tight size (and, past that, is fitted by the theme's script). The bar's city is at most 243, and a longer name shrinks its type to fit. */ --adv-hero-city-max-w: 300px; --adv-hero-city-size-tight: 30px; --adv-nav-city-max-w: 243px; /* ---------- Motion [kept] ---------- The Figma file carries no prototype transitions, so there is nothing to measure and any value here would be invention. Carried over from v1. Provenance differs from its neighbours on purpose — see ADR-0014 §6. --adv-transition-logo-slide is not a measurement either: it is a PRODUCT DECISION (MD, 2026-09-17 — the client asked for a slower slide), the Home logo's travel into the bar, twice the 240 it had (ADR-0030 Amendment 2). */ --adv-transition-fast: 0.15s; --adv-transition-logo-slide: 0.48s; --adv-ease: ease; /* ---------- Z-index ---------- */ --adv-z-dropdown: 20; --adv-z-header: 50; /* ===================================================================== Operator Console layer [authored, ADR-0016] — v1.0.0 of the layer, derives from the base set above. Design source: Claude Design project "Обновление консоли на токены D1". WHY THIS LAYER EXISTS. The console shares the Adverit visual system but is an operational tool, not a marketing surface. Three things the site scale cannot give it: 1. Density. The site type scale steps 14 → 16px. A registry row needs 11/12/13/14, and a mono column header needs 10.5. 2. Control shape. The site's controls are pills. At a 32px control height in a dense toolbar a pill reads as a tag, not a field, and it eats the 3px active edge on a nav item. The console uses 6px. 3. Zoning. The site is flat: fill + 1px border. A console needs page / nav / panel to be three distinguishable planes so a table reads as a table — surface-alt against the page is 1.04:1, which is not a plane. This layer introduces NO new colour: every value resolves to a base token or a color-mix of one, so the palette stays single-sourced and a brand change still propagates. It is a sanctioned divergence in the same sense as the retained raised/dropdown shadows (ADR-0014 §6). RULES - Console components consume --adv-console-* and base tokens ONLY. No raw hex, rgba, or px outside the scale. - The deprecated aliases (tint, faint, muted, border-soft, radius-button/md/lg/xl, tint-edge, link) MUST NOT appear in console code. Their v2 remapping is what this layer exists to undo. - Mirror into tokens.scss / tokens.json in the same commit — the parity test in packages/ui/src/tokens.test.ts covers this layer. CONTRAST — measured, not assumed (sRGB, WCAG 2.1); the invariants are enforced by tokens.test.ts: - Status pill text on its own background: 4.61 (Live) to 6.49 (Disabled). All pass AA. Live is the floor. - Status pill background against a white panel: 1.10 to 1.16. THE BORDER IS LOAD-BEARING. A pill without its 1px border is not a pill. - On a selected row (#D0DEEC) a pill's own background falls to ~1.2:1 and Live's text to 3.84 — below AA. Hence pill-on-selected-bg: the pill inverts to the panel fill with a full-strength border. - --adv-color-ink-muted (#797979) FAILS AA as console text: 4.35 on white, 4.14 on the page, 3.96 on the nav. It is never used for text here — see the ink group. ===================================================================== */ /* ---------- Console surfaces ---------- Three planes, all from the base neutrals. The console inverts the site's card convention: panels are WHITE and the chrome is the warm grey, because in a data view the content plane must be the brightest thing on screen. */ --adv-console-page: var(--adv-color-surface); /* #FAF9F7 view background */ --adv-console-panel: var(--adv-color-white); /* tables, cards, overlays, menus */ --adv-console-nav: var(--adv-color-surface-alt); /* #F5F4F2 sidenav + topbar */ --adv-console-inset: var(--adv-color-surface); /* wells inside a panel: stepper band, code blocks */ /* ---------- Console rules ---------- Two weights only. `rule` is structural (panel edge, table head/foot), `rule-soft` is the row divider — it replaces border-soft, which in v2 resolves to the card fill and therefore draws nothing. */ --adv-console-rule: var(--adv-color-border); /* #DAD6D0 */ --adv-console-rule-soft: color-mix(in srgb, var(--adv-color-border) 55%, var(--adv-color-white)); /* #EBE8E5 */ /* ---------- Console interaction surfaces ---------- hover and selected must never be the same value: an operator scanning a table needs "where is my cursor" and "what did I pick" to be different questions. The site's own hover token is surface-alt and its own active token is accent-light-blue — the brand's language, not a new one. */ --adv-console-row-hover: var(--adv-hover-surface); /* #F5F4F2 */ --adv-console-row-selected: var(--adv-active-surface); /* #D0DEEC */ --adv-console-selected-edge: var(--adv-active-edge); /* #2B68A9 — 4.2:1 on the fill, non-text */ --adv-console-accent-wash: color-mix(in srgb, var(--adv-color-primary) 8%, var(--adv-color-white)); /* #EEF3F8 — card/quick-action hover */ /* ---------- Console ink ---------- TWO text levels, not three. --adv-color-ink-muted (#797979) fails AA at every console size on every console surface (see header) — the third level is carried by TYPE instead: mono family, uppercase, 10–11px, 0.08–0.14em tracking. That reads as "metadata" without asking the eye to resolve low-contrast grey, and it survives a user zooming or a high-contrast OS setting. ink-faint exists for NON-TEXT only — a disabled glyph, a decorative stroke, a select arrow. Never put a word in it. */ --adv-console-ink: var(--adv-color-ink); /* #3C3C3C 11.03:1 on panel */ --adv-console-ink-body: var(--adv-color-body); /* #51595F 7.13:1 on panel */ --adv-console-ink-meta: var(--adv-color-body); /* metadata: same value, mono/uppercase carries the level */ --adv-console-ink-faint: var(--adv-color-ink-muted); /* #797979 NON-TEXT ONLY — fails AA for copy */ --adv-console-ink-on-accent: var(--adv-color-on-navy); /* #FAFBFC 5.54:1 on primary */ /* ---------- Console accent ---------- accent for non-text and for text on the panel (5.74:1). On a selected row primary drops to 4.2:1, so text there takes accent-strong. */ --adv-console-accent: var(--adv-color-primary); /* #2B68A9 */ --adv-console-accent-strong: var(--adv-color-primary-dark); /* #122448 — text on selected/wash surfaces */ /* ---------- Console status ---------- The taxonomy itself is unchanged (ADR-0007) — this only adds the neutral the set was missing: StatusPill's `disabled` variant filled with border-soft on a border-soft-adjacent panel, i.e. an invisible pill. */ --adv-console-neutral-fg: var(--adv-color-body); /* 6.49:1 on the fill */ --adv-console-neutral-bg: var(--adv-color-surface-alt); --adv-console-neutral-border: var(--adv-color-border); /* A pill sitting on a selected row inverts: fill becomes the panel, border goes to full strength. A modifier, not a second palette. */ --adv-console-pill-on-selected-bg: var(--adv-color-white); /* ---------- Console feedback ---------- One focus ring for the whole console. Replaces five hand-copied rgba(0, 77, 133, 0.1) declarations built on the pre-v2 primary, plus a sixth at 0.12 on the login screen. The scrim replaces two literals on the retired #04243F navy (Overlay, mobile nav). */ --adv-console-focus: 0 0 0 3px color-mix(in srgb, var(--adv-color-primary) 20%, transparent); --adv-console-scrim: color-mix(in srgb, var(--adv-color-primary-dark) 42%, transparent); /* ---------- Console radii ---------- Controls are 6px. Panels keep the brand's 12px, so a dialog still reads as an Adverit surface. Pills stay pills — radius-pill is a live base token and did not change; status pills, tags, counters and avatars all keep it. */ --adv-console-radius-control: 6px; /* button, field, select, kebab, nav item, toast, callout, menu panel */ --adv-console-radius-inset: 4px; /* menu item, segmented tab, language chip */ --adv-console-radius-panel: var(--adv-radius-card); /* 12px — panel, dialog, card */ /* ---------- Console type scale ---------- Six steps. Every one replaces at least two literals in the pre-AD-77 code. 2xs/3xs are mono-only: uppercase, tracked, metadata. */ --adv-console-text-3xs: 10px; /* nav group label, build stamp */ --adv-console-text-2xs: 10.5px; /* table column header, language chip */ --adv-console-text-xs: 11px; /* KV label, timestamps, hints */ --adv-console-text-sm: 12px; /* status pill, tag, counter, segmented tab, button sm */ --adv-console-text-md: 13px; /* table cell, menu item, field text, button */ --adv-console-text-lg: 14px; /* record name, nav item, dialog body */ --adv-console-title: var(--adv-h3-size); /* 22px page h1 — was 25px in registries, 27px on the dashboard */ --adv-console-metric: 32px; /* StatCard number — was 34px */ /* ---------- Console spacing ---------- The site scale has no step between 8 and 12, and the console's dense clusters need 6 and 10. Named here rather than added to --adv-space-* so the site scale stays a transcription of the design. */ --adv-console-gap-1: 6px; --adv-console-gap-2: 10px; --adv-console-gap-3: var(--adv-space-12); --adv-console-gap-4: var(--adv-space-16); --adv-console-gap-5: var(--adv-space-24); /* ---------- Console metrics ---------- Control heights were never tokenised, so they drifted to 30, 32, 34 and 36px on one toolbar. Two values, not one: a control with a text label is 32px, an icon-only control is 30px so it does not outweigh the field next to it. Row height stays with the shell — it is padding-derived and pinning it would fight the stacked mobile row. */ --adv-console-control-h: 32px; /* field, select, button, segmented tab, icon tile */ --adv-console-icon-h: 30px; /* icon-only control: kebab, dialog close, row action */ --adv-console-topbar-h: 60px; /* brandbar + topbar — was a literal --topbar in .shell */ /* ---------- Console elevation ---------- Reuses the two console-only shadows already sanctioned in ADR-0014 §6. Nothing new: a flat design plus a floating dialog needs exactly these. */ --adv-console-shadow-panel: var(--adv-shadow-raised); --adv-console-shadow-pop: var(--adv-shadow-dropdown); /* ===================================================================== Mobile layer [read + authored, ADR-0017] — the 402px tier. Measured off the mobile frames in "Adverit.fig", page "Master & Satellite actual" (added to the file 2026-08-25; inventory in docs/design-map.md §3a/§4b), via the Claude Design project "Adverit Mobile Foundations". The file still binds ZERO variables and ZERO text styles, so every value is read off a node — node ids inline — or marked AUTHORED where the file is silent (states, touch). NO new colour, same constitution as the console layer: every colour here resolves to a base token or a color-mix of one. That includes the menu-row ink, which the handoff flags as "not in the desktop palette" — rgb(81,89,95) is exactly #51595F, i.e. color-body ("Text Secondary"). The handoff is corrected, not followed, there. Geometry the layer introduces: ONE new radius (8px mobile cards — ADR-0014 §5's "exactly two radii" is amended to two per tier; glass tiles, full-bleed media and panels keep the brand 12px). The kit's drawn 66/70/78px pill literals clamp to half-box and are transcribed as radius-pill, the same reading §5 gave the desktop button's 66. Focus adds NOTHING: the authored mobile ring (2px primary at 2px offset) is exactly the base --adv-focus-ring set from ADR-0014 §4. ===================================================================== */ /* ---------- Breakpoints [authored] ---------- The file draws 402 and 1440 and nothing between, so the steps are ours (ADR-0017 §2). CSS @media cannot read var() — these tokens are the canonical record and the JS/JSON consumable; the literals in the stylesheets MUST match them. condense: margins 60→26, display sizes clamp, dropdown stacks nav: nav collapses to the toggle; BODY STEPS TO 14/25 (the handoff's own boundary for the body step) mobile: single column, 20px margin, mobile button mapping, 8px cards — where the 402 frames apply frame: the design width itself — where the 600/60/660 split the display line budget is measured against actually exists THE FIRST THREE ARE `max-width` LITERALS AND THE FOURTH IS NOT, because the first three mark degradations at and below a step while `frame` marks where the frame BEGINS. This file has no `min-width` layer (ADR-0021 §3 and §9), so the one rule that uses it is an UNDO and its literal is 1439, one under this token. */ --adv-bp-condense: 1100px; --adv-bp-nav: 860px; --adv-bp-mobile: 560px; --adv-bp-frame: 1440px; /* ---------- Frame & grid [read] ---------- The tier is drawn at 402, NOT 390. Content is 362 between two 20px margins — every band, card and control on 597:19805 starts at x=20 and is 362 wide. Supersedes the space-26 the responsive CSS relaxed to below 1100 (that step keeps 26; the ≤mobile step takes 20). */ --adv-m-frame: 402px; --adv-m-margin: 20px; --adv-m-content: 362px; /* ---------- Header (1537:19420, 1537:19045 — every page, both tiers) ---------- The bar is the logo tile's height, 88: a 220 × 88 tile centred, the wordmark inside 162.9 × 59.3 (top ≈ 14.3). It was 72 with a 150 × 60 tile and a 40-high wordmark (597:19805) until the 2026-09-17 frames; MD took 88 for every page, not only Home (ADR-0030 Amendment 1 §7). The menu toggle is a 20px glyph at x=362, y=26 — hard against the margin, not a 60px tile; its 44px hit area is authored AROUND it (see touch). The satellite's city sits under the wordmark's left edge at 16 regular (1537:19432). On the Home tops the large lockup's tile is 295 wide (1537:18130, 1537:19268; the wordmark inside is 218.5). */ --adv-m-header-h: 88px; --adv-m-logo-tile-w: 220px; --adv-m-logo-tile-h: 88px; --adv-m-logo-h: 59.3px; --adv-m-hero-logo-w: 295px; --adv-m-nav-city-size: 16px; --adv-m-toggle: 20px; /* ---------- Type [read] ---------- The display end contracts to ONE number — 38 carries both the hero (weight 800) and every band headline (weight 700) — and the BODY STEP DROPS TO 14/25px (desktop 16/25). 16 survives only as the uppercase section label (desktop 24). Card titles 22, ink not navy. */ --adv-m-hero-size: 38px; --adv-m-hero-weight: 800; --adv-m-hero-lh: 1.1; /* 597:19805 */ --adv-m-title-size: 38px; --adv-m-title-weight: 700; --adv-m-title-lh: 1.1; /* band headline */ --adv-m-card-title: 22px; --adv-m-card-title-lh: 1.1; /* 754:38390 */ --adv-m-lede-size: 18px; --adv-m-lede-lh: 1.35; /* desktop 24 · 1.5 */ --adv-m-label-size: 16px; --adv-m-label-weight: 500; /* uppercase maroon */ --adv-m-body-size: 14px; --adv-m-body-lh: 25px; /* the step change */ --adv-m-tag-size: 14px; /* tag size=big */ --adv-m-tag-compact: 10px; /* tag size=compact — smallest step in the system */ /* The master Home's 402 headline (1537:18130) is 600 on a 0.99 line box, centred — Home only; every other 402 head keeps --adv-m-hero-weight. The satellite Home's city under its lockup is 26 on the desktop city's line box (1537:19312). ADR-0030 Amendment 1 §7. */ --adv-m-home-title-weight: 600; --adv-m-home-title-lh: 0.99; --adv-m-hero-city-size: 26px; /* ---------- Button (597:19957) ---------- Height 50, pill (drawn 66), padding 14/26, label 14/25 medium. Two widths: long fills the 362 measure, short is 171 so two sit in a row with 20 between. THE FILL LOGIC INVERTS ON MOBILE — `main` is the OUTLINED button (1px border-strong, navy label, no fill) and only `accent` carries a fill. Do not reuse the desktop class. No accent+short variant exists — three variants, not four. */ --adv-m-btn-h: 50px; --adv-m-btn-long: 362px; --adv-m-btn-short: 171px; --adv-m-btn-pad: 14px 26px; --adv-m-btn-radius: var(--adv-radius-pill); /* drawn 66 — clamps, a pill (ADR-0014 §5 reading) */ /* ---------- Hero search (Group 186, 664:24579) ---------- A 362 × 56 pill both mobile homepages float on the hero photograph: a 70% ink wash with its own 56 × 56 round button. A WASH, not a surface — on a light page it disappears (same warning as glass). */ --adv-m-search-h: 56px; --adv-m-search-fill: var(--adv-on-media-fill); /* rgba(60,60,60,.7) — the desktop on-media wash, unchanged at 402 */ --adv-m-search-btn-fill: var(--adv-on-media-btn-fill); /* rgba(60,60,60,.3) — 681:27546; see the note on the base token */ --adv-m-search-btn: 56px; --adv-m-search-radius: var(--adv-radius-pill); /* drawn 78 / button 70 — both clamp */ /* ---------- Quick-link tile (597:19805) ---------- Same glass as desktop — the 10% white wash over the 10px blur — at 57 tall, keeping the brand 12px radius (NOT the 8px mobile card). */ --adv-m-tile-h: 57px; --adv-m-tile-radius: var(--adv-radius-card); /* ---------- Radii [read] ---------- The one new geometry value in the layer: the mobile card set rounds at 8. 12 stays on glass tiles, full-bleed media and panels, so both live on a phone — ADR-0014 §5 amended, see ADR-0017 §4. */ --adv-m-radius-card: 8px; /* ---------- AUTHORED: touch ---------- The file states no hit area and its visible boxes are below any floor (menu row 25 tall, toggle 20, tickbox 16). The target is a 44px hit area AROUND the visual box — padding or a pseudo-element, never a resize. The menu stack is 25 + 26 = 51 pitch, so 44 fits with no neighbour overlap. */ --adv-m-touch-min: 44px; /* ---------- AUTHORED: button states ---------- The file has no hover, pressed, focus or disabled anywhere. Derived from the desktop behaviour the system already records, so mobile inherits the brand's logic rather than a new one. main is already the outlined form on mobile, so its pressed state is desktop main AT REST — navy fill, light label. accent presses to the desktop accent HOVER — burgundy — since the accent itself became navy on 2026-09-16 (Button 247:8285, hover 498:5691) and its old press, one step down to blue-deep, would now read as a lighter button under the finger (ADR-0024 §2). Disabled is the desktop inactive recipe verbatim. */ --adv-m-btn-main-pressed-bg: var(--adv-color-primary-dark); --adv-m-btn-main-pressed-ink: var(--adv-color-on-navy); --adv-m-btn-accent-pressed-bg: var(--adv-hover-accent); --adv-m-btn-disabled-bg: var(--adv-disabled-bg); --adv-m-btn-disabled-border: var(--adv-disabled-border); --adv-m-btn-disabled-ink: var(--adv-disabled-text); /* ---------- Tickbox (filter rows) ---------- The file draws the checked mark as a 10 × 10 rect with NO fill — it renders invisible (authoring slip #3, flagged to design). Authored to primary, matching the tag's active edge. */ --adv-m-tick-box: 16px; --adv-m-tick-radius: 2px; --adv-m-tick-border: var(--adv-color-border); --adv-m-tick-mark: var(--adv-color-primary); /* ---------- Category tag, active ---------- The same active surface the desktop set uses — the brand's own interaction language, not a mobile invention. size=compact, state=active is undrawn in the file (authoring slip #1): authored as the big-active recipe at compact padding. */ --adv-m-tag-active-bg: var(--adv-active-surface); /* #D0DEEC */ --adv-m-tag-active-border: var(--adv-active-edge); /* #2B68A9 */ --adv-m-tag-active-ink: var(--adv-active-text); /* #122448 */ /* ---------- Menu rows (623:23275) ---------- 25-tall text rows on a 26 stack — a text list, not 56px tap rows; the 44px target comes from touch-min. Row ink is color-body: the handoff calls rgb(81,89,95) foreign, but it IS #51595F, Text Secondary — corrected, see the layer header. state=active is authored to 14/500 (the file's 13px variant is authoring slip #2). */ --adv-m-row-ink: var(--adv-color-body); --adv-m-row-size: 14px; --adv-m-row-active-weight: 500; /* ---------- Rhythm [read] ---------- Read off the homepage band stack. The desktop 96/26 pair does not appear on mobile. 34 and 24 exist on the base scale and are referenced; 20 does not (it is the mobile margin recurring as a stack gap) and stays a layer literal. */ --adv-m-band-gap: var(--adv-space-34); /* between bands */ --adv-m-head-gap: var(--adv-space-24); /* inside a band's head */ --adv-m-stack-gap: 20px; /* between stacked controls */ --adv-m-tile-gap: var(--adv-space-16); /* between tiles */ --adv-m-chip-gap: var(--adv-space-8); /* between chips */ /* The DETAIL pages run on 54, not the homepage's 34 (681:27056, 704:30027, 750:35822, 760:8044): bar → title, title → body, block → block. Not on the base scale, so a layer literal like the stack gap (AD-185). */ --adv-m-detail-gap: 54px; /* between the blocks of a detail page */ /* ===================================================================== SATELLITE TIER --adv-sat-* [ADR-0018, Proposed] WHY A LAYER AND NOT MORE BASE TOKENS. The two tiers share one token namespace, and that has now produced the same bug twice. Correcting the satellite hero's size would have resized five unrelated empty-state plates, because they had borrowed `--adv-hero-size` for being the largest number in the file (fixed by `--adv-monogram-size`). And the satellite's band headings are navy in the file while `.adv-display` defaults to body ink — the master's reading, inherited by a tier that never agreed to it. A flat namespace cannot express "this belongs to one tier". This layer can, and it is the same device already used twice: `--adv-console-*` (ADR-0016) and `--adv-m-*` (ADR-0017). SCOPE. Only values the satellite frames prove differ from the shared default, or that no other consumer should ever read. NOT a copy of the palette — everything the tiers agree on stays in the base tokens above and a brand change still propagates. THIS LAYER INTRODUCES NO NEW COLOUR: `heading-ink` resolves to a base token, exactly the rule the console layer follows. RULES - Satellite components consume --adv-sat-* and base tokens ONLY. - Nothing outside the satellite tier may read --adv-sat-*. If a value is wanted elsewhere it belongs in the base scale, not borrowed from here — that borrowing is what this layer exists to stop. - Mirror into tokens.scss / tokens.json in the same commit; the parity test in packages/ui/src/tokens.test.ts covers this layer. ===================================================================== */ /* ---------- Heading ink [figma] ---------- Every heading on the tier binds `corporate/navy`, checked on four nodes across three screens: the hero h1 (896:9764), both homepage band headings (896:9774 "Discuss your questions…", 896:9849 "Let's discuss how we can help.") and the listing h1 (343:11445). The listing already got there through `.adv-page-head .adv-page-title`; the other three did not. This replaces `--adv-color-hero-ink` (#112B3D), which was marked [measured] as "the one value in neither source's token list". It is in the list now, and a bound variable beats a value read off a render — the precedence rule AD-75 recorded for `.adv-area-card__count`. */ --adv-sat-heading-ink: var(--adv-color-primary-dark); /* #122448 */ /* ---------- Homepage hero — RETIRED in 2.9.0 ---------- `--adv-sat-hero-*` (size, lh, weight, measure, measure-tier, size-tight, intro-pad, photo-gap, cta-gap) served the photograph hero of 896:9755 and its one consumer, `.adv-hero-title`. The 2026-09-16 Home (1484:36469) opens on the split hero and the wordmark lockup instead (ADR-0030 §2), so the layer went with the component rather than being left to rot. */ /* ---------- About / "our approach" (336:11104) ---------- Label box bottom to the first row's box top. THE FRAME SAYS 54 AND THIS IS 56, and the 2 is not a fudge — it is the label's line box. 336:10867 ("our approach") is 190 x 29 at 24px, i.e. AUTO leading (24 x 1.21 = 29.04), so 2.5px of half-leading sits inside the box under the glyphs. Our `.adv-section-label` still carries `--adv-label-lh: 1`, so its box is 24 and ends level with the glyphs. Box to box the frame is 54 (757 -> 811); glyph to box it is 56.5, and 56 is what puts our shorter box where the frame puts its text. So this number is CONDITIONAL on `--adv-label-lh` — the sixth AUTO-read-as-1 in this file, and the one still outstanding. Correct that token and this becomes 54. It is not corrected here because `.adv-section-label` is every band label on BOTH tiers, and the master's were measured against lh 1 the day before; that is its own change, not a side effect of an About spacing fix. */ --adv-sat-approach-gap: 56px; /* label to the first approach row */ /* ---------- The tier's text measure inside the 660 column ---------- 550, and it is not one block's number — it is the same measure in two unrelated places, both sitting in the right-hand 660 column of the same 600/60/660 grid: - About's approach copy: all four nodes (336:10875, 336:10879, 336:10886, 336:11080) are x=660 w=550 against a column that runs to 660. The 110 of slack is what wraps each step to two lines and gives the row its 50px height. - Every LISTING head's lead: 343:11446 (practice areas), 343:12287 (services) and 385:3687 (insights) are all x=720 w=550. 343:11855 (experts) is 557 — one box out of four, 7px off three that agree, which reads as a handle nudged rather than a second intent. A MEASURE, NOT A COLUMN — the same distinction `--adv-sat-hero-measure` records. Left to the column the text runs the full 660 and each block wraps wherever its own sentence happens to run out. NOT About's own head, which is 660 (336:10815 — the full column). That head is a different composition and keeps the column as its measure; only the listings cap. */ --adv-sat-measure: 550px; /* ===================================================================== E-MAIL --adv-email-* [ADR-0049] The two numbers an HTML e-mail needs that no page does (AD-180). scripts/authentik-mail.mjs writes Authentik's invitation and reset e-mails from tokens.json as inline styles — mail clients drop custom properties — so these exist here for lock-step, not for a stylesheet. ===================================================================== */ --adv-email-width: 600px; /* the one column every mail client renders unscaled */ --adv-email-logo-w: 160px; /* the wordmark's display width; its PNG is 2x */ } /* Brand text selection */ ::selection { background: var(--adv-color-accent-light-blue); } /* ===================================================================== Adverit Legal — Base layer --------------------------------------------------------------------- Element resets, body defaults, typography utilities and layout helpers built entirely on tokens.css. Import order in any consumer: @import "../tokens/tokens.css"; @import "fonts.css"; @import "base.css"; @import "components.css"; Fonts moved out to fonts.css and are now SELF-HOSTED (ADR-0014). This file used to @import three families from fonts.googleapis.com, with a note suggesting self-hosting "for performance". Performance was the lesser problem: it put a request carrying every visitor's IP to a third-country host on every page load of every firm site, against the EU data-residency Immutable Rule. Do not reintroduce it. ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* THE FOOTER SITS ON THE VIEWPORT'S FOOT (AK, 2026-08-31). A short page — the search entry screen is the one that prompted this, and 896:9585 draws exactly it: a 1024 frame with the footer at 741 — otherwise ends its footer wherever the content happens to stop, leaving the page surface below it and the footer reading as a band that failed to load rather than as the end of the document. AUTHORED HERE AND NOT PER SCREEN. It is a property of the DOCUMENT, both themes render the same `header / main / footer` skeleton, and on any page taller than the viewport the rule does nothing at all — `min-height` is a floor, and `flex: 1 0 auto` lets main grow past it. A per-page version would have to be remembered by every short page anyone adds later. `100dvh` with a `100vh` fallback: on a phone `vh` is the LARGEST viewport, chrome retracted, so it overshoots by the height of the address bar and puts the footer just below the fold — the exact thing this rule exists to prevent. `min-height`, never `height`: the latter would make the body a fixed box and long pages would overflow it. And `flex: 1 0 auto` rather than `1 1 auto`, because a shrinkable main would let a tall page's content compress instead of the page scrolling. */ body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--adv-bg); color: var(--adv-text); font-family: var(--adv-font-body); font-size: var(--adv-body-size); line-height: var(--adv-body-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body > main { flex: 1 0 auto; } a { color: var(--adv-link-color); } /* Accessible focus ring — visible, brand-coloured, never removed outright */ :focus-visible { outline: 2px solid var(--adv-focus-ring); outline-offset: 2px; } /* ---------- Typography utilities ---------- Class-based so non-semantic markup can opt in; the same rules also apply to bare h1–h4 inside .adv-prose. */ .adv-h1 { font-family: var(--adv-font-heading); font-weight: var(--adv-weight-semibold); font-size: var(--adv-h1-size); line-height: var(--adv-h1-lh); letter-spacing: var(--adv-h1-ls); color: var(--adv-text); margin: 0; } .adv-h2 { font-family: var(--adv-font-heading); font-weight: var(--adv-weight-semibold); font-size: var(--adv-h2-size); line-height: var(--adv-h2-lh); letter-spacing: var(--adv-h2-ls); color: var(--adv-text); margin: 0; } .adv-h3 { font-family: var(--adv-font-heading); font-weight: var(--adv-weight-semibold); font-size: var(--adv-h3-size); line-height: var(--adv-h3-lh); letter-spacing: var(--adv-h3-ls); color: var(--adv-text); margin: 0; } .adv-h4 { font-family: var(--adv-font-heading); font-weight: var(--adv-weight-semibold); font-size: var(--adv-h4-size); line-height: var(--adv-h4-lh); letter-spacing: var(--adv-h4-ls); color: var(--adv-text); margin: 0; } .adv-lead { font-family: var(--adv-font-body); font-weight: var(--adv-weight-regular); font-size: var(--adv-lead-size); line-height: var(--adv-lead-lh); color: var(--adv-text-body); margin: 0; } .adv-body { font-family: var(--adv-font-body); font-size: var(--adv-body-size); line-height: var(--adv-body-lh); color: var(--adv-text-body); margin: 0; } .adv-small { font-family: var(--adv-font-body); font-size: var(--adv-small-size); line-height: var(--adv-small-lh); color: var(--adv-text-muted); margin: 0; } .adv-eyebrow { font-family: var(--adv-font-mono); font-weight: var(--adv-weight-medium); font-size: var(--adv-eyebrow-size); line-height: var(--adv-eyebrow-lh); letter-spacing: var(--adv-eyebrow-ls); text-transform: uppercase; color: var(--adv-color-link); margin: 0; } /* Bare heading mapping for prose blocks */ .adv-prose h1 { font: var(--adv-weight-semibold) var(--adv-h1-size)/var(--adv-h1-lh) var(--adv-font-heading); letter-spacing: var(--adv-h1-ls); } .adv-prose h2 { font: var(--adv-weight-semibold) var(--adv-h2-size)/var(--adv-h2-lh) var(--adv-font-heading); letter-spacing: var(--adv-h2-ls); } .adv-prose h3 { font: var(--adv-weight-semibold) var(--adv-h3-size)/var(--adv-h3-lh) var(--adv-font-heading); letter-spacing: var(--adv-h3-ls); } .adv-prose h4 { font: var(--adv-weight-semibold) var(--adv-h4-size)/var(--adv-h4-lh) var(--adv-font-heading); } .adv-prose :is(p, li) { font-size: var(--adv-body-size); line-height: var(--adv-body-lh); color: var(--adv-text-body); } /* --------------------------------------------------------------------- PROSE LISTS, AND THE BLOCK RHYTHM THAT WAS NEVER AUTHORED (MD, 2026-09-09 — AD-128, ADR-0023) The mapping above covered headings and paragraphs and NOTHING ELSE, so a list inside a prose block arrived at browser defaults: `disc` at a 40px indent, a 1em block margin, and a colour inherited from `body` (--adv-text) rather than the --adv-text-body the paragraph beside it takes one line up. Two greys in one body of copy, in the same column. This is not hypothetical and it did not arrive with AD-128 — 116 firm article bodies under sites/ already end in a bulleted list, and they have rendered this way since the demo firms were seeded. THE PARAGRAPH MARGIN IS NOT MERELY UNSET — IT IS TRAPPED. Every container a prose block sits in is a flex item (.adv-detail__body, .adv-stack, .adv-expert-bio__block, .adv-split-media__body), and a flex item is an independent formatting context: the first paragraph's 1em cannot collapse out of the block, so it is ADDED to the container's own gap. The master's About and Join bands are drawn on a 34 rhythm (279:2389), declare --adv-space-34, and render 50. Zeroing the block-start and paying the rhythm at the block-end is what makes a container's declared gap the distance you actually see. THE HEADINGS ARE IN THE RHYTHM because they are in the mapping. Left out, `h1`–`h4` kept browser margins — em-relative and so arbitrary at every step (23.24 under an h2, 22 under an h3, beside a deliberate 24) — and a prose block that OPENS on a heading kept a trapped top margin, which is the whole defect the block-start zero exists to remove. Naming them here costs nothing and closes the one hole the enumeration left open. `blockquote`, `table`, `pre`, `hr`, `dl` and `figure` are still out: they carry no mapping above, so the boundary is the same one the mapping draws. 24 AND 8 ARE THE TWO STEPS tokens.css MARKS `[kept]`. Every other step is `[read]` and carries the job it was measured from — 26 is control and card padding-inline, 34 is card padding-block, 40 is nav item padding-inline. Prose is none of those, and borrowing a measured step for an unmeasured job is how a scale stops meaning anything (rule 5). 24 is also the nearest step to the 25px line box (16 x 1.5625), so a paragraph boundary reads as one blank line, and it stays a clear 10 under the 34 that separates the whole block from the composition around it. 8 is a third of 24: an item boundary a third the weight of a paragraph boundary is what keeps an eight-item list reading as ONE block subdivided rather than as eight short paragraphs. AD-128 bracketed this at 0 to 16 and 16 was declined on that ratio — at 16 an item costs two thirds of a paragraph. 24 for the indent too: the smallest step that keeps a `disc` inside the box, against 40, which is only the browser's number and 6% of the 660 measure. THE MARGINS ARE CHILD-SCOPED AND THE INDENT IS NOT, deliberately. Indentation is per level, so a nested list must indent again and the selector has to reach it. Block rhythm belongs to the top-level flow only, so `>` stops a nested list paying a paragraph-sized gap inside its parent item. `li > :is(p, ul, ol)` IS WHAT MAKES A LOOSE LIST EQUAL A TIGHT ONE, and the `>` above is not enough on its own. Goldmark wraps each item of a LOOSE list (blank lines between the bullets) in a `

`; that `

` is not a child of the sink, so the rhythm rule misses it — but the BROWSER's 1em does not. Left alone it collapses with `li + li` to max(1em, 8) and reappears below the list by collapsing out through the `li` and the `ul`, neither of which has block padding or a border to stop it, landing past the `:last-child` rule that believes it removed exactly that margin. Measured before this line existed: a tight list rendered an 8px item gap and no tail, the same list written loose rendered 14 and a 14px tail. Zeroing it makes the two shapes identical, which matters because the 33 bodies are authored in YAML block scalars where a blank line between bullets is the readable way to write them. Whoever writes the next thirty should not have to know this to get the same page. `li + li`, NOT A MARGIN ON EVERY `li`. A block-end margin on the last item collapses out of the list — a `ul` here has no block padding or border to stop it — and survives the `:last-child` rule below as 8px the rule believes it removed, on every one of those 116 articles whose body ends in a list. A start margin on all but the first item has nothing to leak. `> :last-child` IS UNSCOPED, and it is the general form of a rule components.css used to carry as `.adv-article .adv-prose > :last-child` — written for the one page that had prose, which is now every page that has prose. That copy is DELETED rather than left beside this one: two rules declaring the same property and value is an edit to either with no visible effect. `.adv-article > :last-child` is a different rule, governs the article's own non-prose children, and stays. Without this, the last block's margin is trapped in the flex item and added to the gap: 34 + 24 to the practice-area page's "Discuss your case". --------------------------------------------------------------------- */ .adv-prose > :is(p, ul, ol, h1, h2, h3, h4) { margin-block: 0 var(--adv-space-24); } .adv-prose :is(ul, ol) { padding-inline-start: var(--adv-space-24); } .adv-prose li + li { margin-block-start: var(--adv-space-8); } .adv-prose li > :is(p, ul, ol) { margin-block: 0; } .adv-prose > :last-child { margin-block-end: 0; } /* ---------- Layout helpers ---------- */ .adv-container { max-width: var(--adv-container); margin-inline: auto; padding-inline: var(--adv-section-pad-x); } .adv-section { padding-block: var(--adv-section-pad-y); } .adv-grid-12 { display: grid; grid-template-columns: repeat(var(--adv-grid-columns), 1fr); gap: var(--adv-gutter); } /* Surfaces */ .adv-surface { background: var(--adv-bg); } .adv-on-navy { background: var(--adv-color-hero-navy); color: var(--adv-color-on-navy); } /* --------------------------------------------------------------------- THE `hidden` ATTRIBUTE, MADE TO WORK `[hidden]` is a User-Agent rule — `display: none` in the UA origin — and ANY author `display` declaration beats it, whatever the specificity. Almost every component in this system sets `display`, so `el.hidden = true` from JS did nothing to a card, a chip row or a filter bar: the element stayed on screen while the script believed it was gone. That shipped three times before it was understood, each time as a different symptom — filters that changed the count but not the grid, a "load more" that was always visible, a blank strip above the footer — and each time it was patched with one more `.some-component[hidden]` rule. This is the rule those were reaching for. `!important` is deliberate. The point is to beat every author `display` in the sheet, including ones written later by someone who does not know this exists — which is precisely the person it protects. An element that wants to ignore it should not be using the attribute. --------------------------------------------------------------------- */ [hidden] { display: none !important; } /* ===================================================================== Adverit Legal — Component layer --------------------------------------------------------------------- Built only on tokens.css (+ base.css). Class prefix: .adv-*. v2 — Phase 1 Design Refresh, authorised by ADR-0014. Every component below that carries a `node` comment was read out of Figma with get_design_context ("Adverit Copy" / "Master & Satellite actual"), not measured off a render — the earlier fitted values were wrong about radius, hover and shadow, and reading the component is what corrected them. If you change one of these, read the node again first. THE SYSTEM IS FLAT. Nothing in the design casts a shadow: every surface is a fill plus a 1px border, and card hover is a transform, not an elevation. `--adv-shadow-card` resolves to `none` by design. THE INTERACTION LANGUAGE IS SHARED, so it is written once as tokens and reused rather than restated per component: hover surface --adv-hover-surface + text --adv-hover-accent active surface --adv-active-surface + text --adv-active-text + edge --adv-active-edge Class names are a contract with the themes and packages/ui. Existing names are preserved and restyled; components the refresh introduces are added alongside. Anything marked [not in Figma] is carried over from v1 and repointed to the new tokens — it will be revisited when its screen is built. ===================================================================== */ /* --------------------------------------------------------------------- Buttons node 247:8285 50px tall, pill, Inter Medium 16/25. Figma pads the bordered variants 15/27 and the unbordered ones 14/26 — the same box, with the border accounted for. Here every variant carries a 1px border (transparent where the design has none), so one padding value serves all of them and the heights cannot drift apart. --------------------------------------------------------------------- */ .adv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--adv-space-8); height: 50px; padding-inline: var(--adv-space-26); border: var(--adv-border-width) solid transparent; border-radius: var(--adv-radius-pill); font-family: var(--adv-font-body); font-weight: var(--adv-weight-medium); font-size: var(--adv-nav-size); line-height: var(--adv-nav-lh); /* A button is a label, not a paragraph — the same reason the nav items say so. Without it "Contact legal expert" breaks over two lines and the pill grows to 80px tall. */ white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--adv-transition-fast) var(--adv-ease), color var(--adv-transition-fast) var(--adv-ease), border-color var(--adv-transition-fast) var(--adv-ease); } /* accent — the filled call to action. NAVY SINCE 2026-09-16: the accent variant itself was recoloured in the component set (247:8284 is corporate/navy), so this is the same variant, not a new one — and its hover (498:5691) is corporate/burgundy. It was blue with a navy hover; a navy button cannot hover to navy. `--adv-color-primary` does NOT move with it: it is still every link, active edge and "Explore ↗" (ADR-0024 §2). */ .adv-btn--primary { color: var(--adv-color-on-navy); background: var(--adv-color-primary-dark); } .adv-btn--primary:hover { background: var(--adv-hover-accent); } /* main — outlined. Hover is the shared language: soft surface + burgundy. */ .adv-btn--secondary { color: var(--adv-color-primary-dark); background: transparent; border-color: var(--adv-color-border-strong); } .adv-btn--secondary:hover { background: var(--adv-hover-surface); border-color: var(--adv-hover-accent); color: var(--adv-hover-accent); } /* Disabled binds no variable in any of the six Figma variants, so these are measured values (ADR-0014 §5). Label-on-fill is 3.08:1 — below AA, and allowed only because WCAG 1.4.3 exempts inactive controls. */ .adv-btn:disabled, .adv-btn[aria-disabled="true"], .adv-btn--disabled { background: var(--adv-disabled-bg); border-color: var(--adv-disabled-border); color: var(--adv-disabled-text); cursor: not-allowed; } /* On a navy or blue surface the filled button inverts. [not in Figma] */ .adv-btn--on-primary { color: var(--adv-color-primary); background: var(--adv-color-on-navy); } .adv-btn--ghost-on-dark { color: var(--adv-color-on-navy); background: transparent; border-color: rgba(250, 251, 252, 0.55); } .adv-btn--ghost-on-dark:hover { background: rgba(250, 251, 252, 0.10); } /* Text button — node 513:4489. Two states, no box. */ .adv-link-more { display: inline-flex; align-items: center; gap: var(--adv-space-8); font-family: var(--adv-font-body); font-weight: var(--adv-weight-medium); font-size: var(--adv-nav-size); line-height: var(--adv-nav-lh); color: var(--adv-color-primary); text-decoration: none; } .adv-link-more::after { content: "\203A"; font-size: 1.2em; line-height: 1; } .adv-link-more:hover { color: var(--adv-hover-accent); } /* The master homepage's "Explore …" links are a NORTH-EAST ARROW after body copy, not the chevron after a nav-weight label that the firm screens use (`ArrowLink` in the reference template: `--type-body` plus "↗"). Different glyph, different weight — a modifier rather than a second component. */ .adv-link-more--out { font-weight: var(--adv-weight-regular); } .adv-link-more--out::after { content: "\2197"; font-size: 1em; } /* --------------------------------------------------------------------- Icon nodes 516:7647, 247:7403 The Figma kit does contain icons — they are named by meaning ("search"), which is why an earlier search for layers called icon/glyph/arrow found none. Each ships as several assets differing only in fill; the committed SVGs use currentColor instead, so state comes from the colour rules that are already written and an icon cannot disagree with its label. --------------------------------------------------------------------- */ /* NO BLANKET `fill` HERE. Two families of icon live in this set: filled glyphs (search, caret, mail) whose paths carry `fill="currentColor"` of their own, and stroked outlines (phone, pin) drawn with `stroke="currentColor"` over a root `fill="none"`. A CSS `fill: currentColor` on the wrapper beats that root presentation attribute — CSS always does — and cascades into the outline's paths, so the phone and the map pin rendered as solid dark silhouettes instead of line art. The committed assets already state their own paint; this rule only has to size them and hand down the colour. */ .adv-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; color: inherit; } /* The exported caret points UP — its path is an apex-at-top triangle, and the Figma component rotates it 180° to point down. The asset is kept verbatim, so that rotation has to happen here or every caret in the UI is upside down. */ .adv-icon--caret { width: 8px; height: 8px; color: var(--adv-color-nav-caret); transform: rotate(180deg); transition: transform var(--adv-transition-fast) var(--adv-ease); } /* Open: back to the asset's own orientation, i.e. 180° from closed. */ [aria-expanded="true"] > .adv-icon--caret { transform: rotate(0deg); } @media (prefers-reduced-motion: reduce) { .adv-icon--caret { transition: none; } } .adv-icon--search { width: 24px; height: 24px; } .adv-icon--close { width: 8px; height: 8px; } /* The search tile's ✕ (searchOpen, 1529:12859): 14 across at stroke 1.5 — the viewBox is cropped to the stroke, so the box is 15.5. */ .adv-icon--sheet-close { width: 15.5px; height: 15.5px; } /* --------------------------------------------------------------------- Category tag nodes 257:1159, 623:21974/5 Note the active state is not just a recolour: it steps up from Inter Regular 14 to Medium 16, which is why the active chip is visibly larger (183x45 against 105x37). That is the design's intent, not drift. THE PADDING IS 9/15, NOT THE 10/16 THE FRAME APPEARS TO SAY, and the difference is where the 1px border lives. Figma draws this stroke INSIDE the box: the tag measures 105x37 with its text at x=16 y=10 and 73x17 — 16+73+16 = 105 and 10+17+10 = 37, with no room left for a rim. A CSS `border` sits OUTSIDE the padding box, so transcribing 10/16 literally made every tag in the system 2px wider and 2px taller than drawn. Take the border out of the drawn inset and both states land exactly: inactive 15+73+15+2 = 105 9+17+9+2 = 37 active 15+151+15+2 = 183 9+25+9+2 = 45 This is a CORRECTED READING of the same nodes, not a new value — and it is worth knowing generally, because every bordered box in this file that sizes itself from its content has the same 2px to give back. The controls do not: their 60px heights are stated, so the border is absorbed there. */ .adv-badge { display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; /* the drawn 10/16 less the 1px border — see above */ border: var(--adv-border-width) solid var(--adv-color-border); border-radius: var(--adv-radius-pill); background: var(--adv-color-surface-alt); color: var(--adv-color-ink); font-family: var(--adv-font-body); font-weight: var(--adv-weight-regular); font-size: var(--adv-small-size); /* 17px, not 1. The style the file names on this text says lineHeight 100, but the text node it is bound to measures 73x17 — Figma's own box wins over its transcription, as it has on every other reading. At `1` the inactive tag came out 36 against the drawn 37, and the active state (which carries its own 25px line-height) was the only one that fit. */ line-height: 17px; text-decoration: none; transition: background var(--adv-transition-fast) var(--adv-ease), color var(--adv-transition-fast) var(--adv-ease), border-color var(--adv-transition-fast) var(--adv-ease); } /* A BADGE CAN ALSO BE A BUTTON — the search page's kind tabs (and, until AD-196, the insights listing's scope tags, 430:9032) are a live single-select and a