/* ============================================================================ iPiD Design Core — CSS Custom Properties (v0) ---------------------------------------------------------------------------- Source of truth: ipid-tech Webflow :root, extracted 2026-06-22 from site-snapshots/ipid-webflow-snapshot-260622/cdn.prod.website-files.com/ 671607cea138e254fd48e8d9/css/ipid-tech.webflow.shared.11941e2c5.min.css Naming is RE-NORMALISED for an open, non-Webflow future (clean --ipid-* names). The original Webflow var names are kept in comments for traceability. STATUS LEGEND: [C]=confirmed [I]=inferred [R]=recommended normalisation Only confirmed/high-confidence tokens are in the main block. Low-confidence / experimental tokens are quarantined at the bottom — do NOT treat those as final brand truth. ============================================================================ */ :root { /* ---- Brand colours (Brand Ecosystem V3.1, June 2026 — DDL-0029) ------ V3.1 renames the old Azure #daebeb to FROST and re-uses "Azure" for the NEW #add7d6. Satin Sheen Gold #cba135 is RETIRED; the Soft Yield surface tone takes over its "confidence/outcome" role (it is a background, not an accent fill — hovers now darken to midnight instead). */ --ipid-forest-teal: #073333; /* [C] PRIMARY brand — V3.1 core (--brand--primary-forest-teal) */ --ipid-dark-midnight-forest: #041f1f; /* [C] darkest brand; hover-darken target (not in V3.1 — kept, live-site native) */ --ipid-frost: #daebeb; /* [C] V3.1 core "Frost" — pale teal tint (was --ipid-azure ≤v0.4.0; --brand--azure) */ --ipid-sky: #6fb7c6; /* [C] V3.1 core — THE 10% accent: highlights/callouts/data-viz. ⚠ ~2.2:1 on white — shapes only, never text */ --ipid-soft-yield: #f9faf0; /* [C] V3.1 core — "quiet authority" surface behind confidence/outcome moments (gold's successor in role) */ --ipid-azure: #add7d6; /* [C] V3.1 supporting — ⚠ NEW MEANING: ≤v0.4.0 "azure" was #daebeb (now --ipid-frost) */ --ipid-mint: #ddf1e6; /* [C] V3.1 supporting — verified/positive surface (payoff strip) */ --ipid-ink: #0a1c1e; /* [C] V3.1 supporting near-black */ /* frost-family tints (extraction-era; not in V3.1 — kept as working tints) */ --ipid-frost-light: #edf5f5; /* [C] lightest tint (was --ipid-azure-light) */ --ipid-frost-medium: #ceebeb; /* [C] (was --ipid-azure-medium) */ --ipid-frost-medium-light: #f5fafa; /* [C] (was --ipid-azure-medium-light) */ /* deprecated aliases — kept one version (remove at 0.6.0); repoint consumers to the frost-* names */ --ipid-azure-light: var(--ipid-frost-light); --ipid-azure-medium: var(--ipid-frost-medium); --ipid-azure-medium-light: var(--ipid-frost-medium-light); /* --ipid-gold: #cba135 — RETIRED (DDL-0029, v0.5.0; V3.1 drops Satin Sheen Gold). Do not use. */ /* ---- Functional / state colours ------------------------------------ */ --ipid-success: #006236; /* [C] matched / positive — V3.1 (was #008148 sea-green; DDL-0029) */ --ipid-warning: #c85a00; /* [C] close-match / caution — V3.1 (was #ba450b mahogany; DDL-0029). ⚠ check contrast for small white text */ --ipid-error: #9b0018; /* [C] no-match / error — V3.1 (was #96031a carmine per DDL-0005, superseded by DDL-0029). #c8102e stays UK-region only */ --ipid-link: #118ab2; /* [C] inline link / hyperlinks ("Blue (NCS)") — not in V3.1; kept pending review (open-questions Q18) */ /* dark-purple #210124 + tomato #ff5f40 RE-QUARANTINED (DDL-0029) — absent from V3.1; see quarantine block */ /* region / geographic markers (NOT brand — use only for VoP/CoP context) */ --ipid-region-eu: #003399; /* [C] (--functional--european-union) */ --ipid-region-uk-green: #004225; /* [C] (--functional--british-racing-green) */ --ipid-region-uk-red: #c8102e; /* [C] (--functional--british-red) */ /* ---- Neutrals / surfaces ------------------------------------------- */ --ipid-black: #000000; /* [C] (--text--colour-base--black-100) */ --ipid-white: #ffffff; /* [C] (--text--colour-base--white-100) */ --ipid-almost-white: #fafafa; /* [C] primary off-white section bg (--container--almost-white) */ --ipid-grey-100: #f5f5f5; /* [C] whitesmoke (--container--grey-100) */ --ipid-grey-200: #eeeeee; /* [C] (--container--grey-200) */ --ipid-grey-300: #e0e0e0; /* [C] borders (--container--grey-300) */ --ipid-grey-400: #bdbdbd; /* [C] muted (--container--grey-400) */ /* ---- Text colours (opacity-based) ---------------------------------- */ --ipid-text-primary: rgba(0,0,0,0.87); /* [C] body on light */ --ipid-text-secondary: rgba(0,0,0,0.60); /* [C] secondary on light */ --ipid-text-tertiary: rgba(0,0,0,0.38); /* [C] decorative only (fails AA) */ --ipid-text-on-dark: #ffffff; /* [C] primary on teal */ --ipid-text-on-dark-secondary: rgba(255,255,255,0.80); /* [C] secondary on teal */ --ipid-text-on-dark-tertiary: rgba(255,255,255,0.50); /* [C] tertiary on teal */ /* ---- Lines / borders ----------------------------------------------- */ --ipid-line-on-light-subtle: rgba(0,0,0,0.06); /* [C] */ --ipid-line-on-light: rgba(0,0,0,0.12); /* [C] default border */ --ipid-line-on-light-strong: rgba(0,0,0,0.25); /* [C] */ --ipid-line-on-dark-subtle: rgba(255,255,255,0.06); /* [C] */ --ipid-line-on-dark: rgba(255,255,255,0.12); /* [C] */ /* ---- Elevation ----------------------------------------------------- */ --ipid-shadow-card: 0 0.5rem 4rem 0 rgba(0,0,0,0.08); /* [I] soft diffuse card shadow */ --ipid-modal-scrim: rgba(4,31,31,0.90); /* [C] (--shade--dark-midnight-modal-bg) */ /* ---- Typography: families (DM Sans-only — DDL-0036, v0.8.0) -------- iPiD verdict 2026-07-07: Martina Plantijn is REMOVED from web; the whole web type system is DM Sans (Brand Ecosystem V3.1, slides 50-53). --ipid-font-heading is kept as the semantic slot; it now equals the body family — hierarchy comes from WEIGHT (Black 900 / SemiBold 600), not a second face. Gilmer remains logo-wordmark only (DDL-0031). */ --ipid-font-heading: "DM Sans", Arial, sans-serif; /* [C] headings — DM Sans (DDL-0036; was Martina Plantijn ≤v0.7.0) */ --ipid-font-body: "DM Sans", Arial, sans-serif; /* [C] body/UI — DM Sans (DDL-0028, v0.4.0; was Roboto Flex) */ --ipid-font-branding: "Gilmer", Arial, sans-serif; /* [C] LOGO WORDMARK ONLY (Gilmer Medium) — retired from copy/eyebrows (DDL-0031, v0.5.0) */ /* DM Sans is variable with opsz + wght axes only. Apply `font-optical-sizing: auto`. */ /* ---- Typography: weights (V3.1 slide 51 — DDL-0036) ----------------- Weight-built hierarchy: h1 + display/stat numbers = display (900); h2/h3 = subhead (600). PIN (DDL-0040): --ipid-weight-display is Display/H1/ stat ONLY — never `h1,h2,h3 { font-weight: var(--ipid-weight-display) }`, which renders H2/H3 at 900 (the "bulky" bug). Canonical heading base: CONSUMING-IN-CODE.md. No umbrella --ipid-weight-heading token by design. */ --ipid-weight-display: 900; /* [C] DM Sans Black — Display, H1, display stats ONLY (V3.1; pinned DDL-0040) */ --ipid-weight-subhead: 600; /* [C] DM Sans SemiBold — H2, H3, overlines (V3.1) */ --ipid-weight-body: 400; /* [C] DM Sans Regular body (DDL-0028) */ --ipid-weight-label: 500; /* [C] DM Sans Medium — UPPERCASE eyebrows/labels (DDL-0031; V3.1) */ /* deprecated aliases (Martina-era names) — remove at 0.10.0 */ --ipid-weight-heading-bold: var(--ipid-weight-display); /* was Martina 700 */ --ipid-weight-heading-regular: var(--ipid-weight-body); /* was Martina 400 (the italic accent) */ /* ---- Typography: scale (size / line-height) ------------------------- A best-practice ~1.25 modular web scale (V3.1's px already sat on it; the pptx's exact sizes are NOT the spec — DDL-0039). Line-heights tighten as size grows (headings ≈1.08-1.25), text styles ≈1.5. */ --ipid-text-display: 4.5rem; --ipid-text-display-lh: 5rem; /* [C] Display 72/80 (1.11) — high-impact hero statements (V3.1) */ --ipid-text-display-mobile: 3rem; --ipid-text-display-mobile-lh: 3.25rem; /* [C] Display mobile 48/52 */ --ipid-text-xxxl: 3rem; --ipid-text-xxxl-lh: 3.25rem; /* [C] H1 desktop 48/52 (1.08 — Black 900 sets tight; was 3.5rem under Martina) */ --ipid-text-xxxl-mobile: 2.5rem; --ipid-text-xxxl-mobile-lh: 2.75rem; /* [C] H1 mobile 40/44 */ --ipid-text-xxl: 2.5rem; --ipid-text-xxl-lh: 3rem; /* [C] H2 40/48 (1.2) — V3.1 (was 2rem/32px) */ --ipid-text-xl: 2rem; --ipid-text-xl-lh: 2.5rem; /* [C] H3 32/40 (1.25) — V3.1 (was 1.5rem/24px) */ --ipid-text-l: 1.25rem; --ipid-text-l-lh: 2rem; /* [C] Body Large / lead 20/32 (1.6) — best-practice 1.25x body step; cleaned off V3.1's odd 21px (DDL-0039) */ --ipid-text-base: 1rem; --ipid-text-base-lh: 1.5rem; /* [C] body 16/24 */ --ipid-text-s: 0.875rem; --ipid-text-s-lh: 1.3125rem; /* [C] small 14/21 (1.5) — V3.1 (was 0.9rem/14.4px) */ --ipid-text-label: 0.875rem; --ipid-text-label-lh: 1.25rem; /* [C] eyebrow 14/20 — V3.1 (was 12px in the Gilmer era) */ --ipid-text-stat: 6.5rem; --ipid-text-stat-lh: 6.5rem; /* [C] display stats 104/104 (1.0) — key-metric callouts (V3.1) */ --ipid-text-stat-mobile: 4rem; --ipid-text-stat-mobile-lh: 4rem; /* [C] display stats mobile 64/64 */ /* ---- Typography: letter-spacing (V3.1 tracking, em-based — DDL-0036) - */ --ipid-tracking-display: -0.025em; /* [C] Display / H1 / H2 / stats — V3.1 "-25"; large heavy DM Sans wants -2.5% */ --ipid-tracking-heading: -0.01em; /* [C] H3 — V3.1 "-10" (token carried over from the Martina -1%) */ --ipid-tracking-label: 0.1em; /* [C] UPPERCASE eyebrows/labels — V3.1 "100" (em-based; was 2px) */ --ipid-tracking-label-sm: var(--ipid-tracking-label); /* deprecated alias (was 1.5px) — remove at 0.10.0 */ /* ---- Typography: optical corrections (web/CSS only — DDL-0041) ------- Display-scale headlines carry a larger left side-bearing than the small left-aligned text (eyebrow/dek/nav) sharing the margin, so their ink reads inset. Hang the heading by this negative em to pull the ink to the margin — margin-left, NOT text-indent (shifts only line 1). Display/H1-scale only; H2/H3 offset is sub-pixel. NORMAL-CAP DEFAULT. Side-bearings cluster by optical class (72px Black): flat-stem (B D E F H I K L M N P R U) 4px + round (C G O Q S) 3px both take this default; FLUSH caps (A V W T Y J X, ~0px) OPT OUT (margin-left:0) or they over-hang the margin (see the ROI hero "A"). Three classes, not 26. RE-MEASURE the table if the display font/weight/size changes (method: visual-review-rules.md check 5). */ --ipid-optical-hang: -0.04em; /* [C] display headline optical hang — normal-cap default (DDL-0041) */ /* ---- Spacing ramp (2/4/8/16/24/32/40/64) --------------------------- */ --ipid-space-2: 0.125rem; /* [C] (text-inline) */ --ipid-space-4: 0.25rem; /* [C] */ --ipid-space-8: 0.5rem; /* [C] */ --ipid-space-16: 1rem; /* [C] */ --ipid-space-24: 1.5rem; /* [C] */ --ipid-space-32: 2rem; /* [C] */ --ipid-space-40: 2.5rem; /* [C] */ --ipid-space-64: 4rem; /* [C] */ /* ---- Layout -------------------------------------------------------- */ --ipid-page-gutter: 2rem; /* [C] default gutter */ --ipid-page-gutter-wide: 4rem; /* [C] */ --ipid-margin-mobile: 1rem; /* [C] */ --ipid-hero-top-pad: 6rem; /* [C] hero top pad under fixed nav */ --ipid-control-height: 2.75rem; /* [C] 44px — ONE height for buttons AND form fields (DDL-0034, v0.7.0; rem-based by principle). Supersedes the 48px field height (DDL-0015) and the un-tokenised ~48px .btn */ --ipid-control-height-mobile: 2.5rem; /* [C] 40px — the same control height under the mobile breakpoint (consumer applies it in its media query, like the -mobile type tokens) */ --ipid-form-field-height: var(--ipid-control-height); /* deprecated alias (was 3rem/48px) — remove at 0.8.0; use --ipid-control-height */ --ipid-container-max: 1280px;/* [I] desktop content cap (from --breakpoint--desktop-wide) */ /* ---- Radii --------------------------------------------------------- */ --ipid-radius-sm: 4px; /* [C] inputs, form fields, AND BUTTONS (.c-button=4px) (--radius--base) */ --ipid-radius-md: 8px; /* [C] cards (--radius--increased) */ --ipid-radius-lg: 16px; /* [C] feature cards (--radius--large) — V3.2 p43 "standard card: 16px" maps here (DDL-0052) */ --ipid-radius-xl: 24px; /* [C] OVERSIZED feature panels only — V3.2 p43 gives "20–25px"; fixed at 24 (a range breeds drift, harness-user 2026-08-18, DDL-0052). Standard cards stay lg/16, nested tiles md/8 */ --ipid-radius-pill: 100px; /* [C] TAGS / BADGES / chips / dots / avatars — NOT buttons (--radius--rounded) */ /* ---- Motion -------------------------------------------------------- */ --ipid-duration-fast: 100ms; /* [C] */ --ipid-duration-base: 160ms; /* [C] dominant transition */ --ipid-duration-slow: 300ms; /* [C] */ --ipid-ease: ease; /* [C] (R: upgrade to cubic-bezier(0.4,0,0.2,1)) */ /* ---- Opacity ------------------------------------------------------- */ --ipid-opacity-disabled: 0.38; /* [C] */ --ipid-opacity-hover: 0.75; /* [C] white button hover */ } /* ============================================================================ QUARANTINE — uncertain / experimental / low-confidence. These are NOT confirmed brand truth. Do not ship without iPiD review. ============================================================================ */ :root { /* warm creams (#faf5ef / #e0d8ce) dropped — DDL-0008, v0.2.0 (not an intentional brand surface) */ /* gold #cba135 RETIRED outright (DDL-0029; V3.1) — not even quarantined; do not revive without a new brand decision */ --ipid-x-dark-purple: #210124; /* [C→quarantined] was --ipid-dark-purple (DDL-0011); absent from Brand Ecosystem V3.1 — re-quarantined DDL-0029, don't ship without iPiD review */ --ipid-x-tomato: #ff5f40; /* [C→quarantined] was --ipid-tomato (DDL-0011); absent from V3.1 — re-quarantined DDL-0029 */ --ipid-x-grey-mid: #9b9b9b; /* [C low] accessible-components dark-grey; fails AA on white for body text */ --ipid-x-shadow-hover: 0 0.75rem 5rem 0 rgba(0,0,0,0.12); /* [R] proposed card hover elevation */ }