/* ============================================================ Tokens: CODER SOP §8. The only theme CSS file allowed raw values. Only what the Figma DECLARES becomes a token (Alex, 28 Sep 2026). The source is Figma FpZscvTt1UchedqNOTwOws, and nothing here is measured or inferred from the frames: - its colour variables ("Elementor" collection, 13 variables) - its paint styles (3 gradients) - its effect styles (4) - its text styles (desktop, and Mobile/ as separate tokens) Values are px, mirroring Figma 1:1. The one exception is tracking, which Figma declares as a percentage of the font size (1% = 0.01em). Anything the Figma doesn't declare (spacing, radius, sizes, borders, one-off dimensions, colours with no variable) stays raw in the component CSS and is flagged for UX; bash .claude/hooks/token-audit.sh lists it. Tokens marked LEGACY predate this file. They aren't in the Figma either, and are kept only until UX declares them. Tier 1 primitives → Tier 2 roles → Tier 3 components. Components may use Tier 1 text-style tokens directly. Colours always go through a Tier 2 role. ============================================================ */ :root { /* ── Tier 1: colour (Figma variables) ─────────────────── */ --color-teal-600: #177591; /* "Primary" */ --color-navy-900: #032a40; /* "Secondary" */ --color-gold-500: #f9b000; /* "Tertirary" (sic) */ --color-ink-950: #010d14; /* "Text" */ --color-white: #ffffff; /* "Background", "Text Inverse" */ --color-grey-500: #848484; /* "Text Accent" */ --color-grey-600: #636569; /* "Logo Grey" */ --color-teal-50: #e5f7f8; /* "Primary Accent" */ --color-teal-25: #f3f8fa; /* undeclared: the careers CV drop zone (flagged) */ --color-teal-75: #eaf5f7; /* undeclared: the careers success disc (flagged) */ --color-indigo-800: #162d6f; /* "Ancilary HUB" (sic) */ --color-white-a60: rgba(255, 255, 255, 0.6); /* "Accent" */ --color-black-a10: rgba(0, 0, 0, 0.1); /* "Secondary Accent" */ --color-black-a20: rgba(0, 0, 0, 0.2); /* undeclared: the Contact form panel's shadow (flagged) */ --color-gold-a20: rgba(249, 176, 0, 0.2); /* "Tertiary Accent" */ /* Button states, from the Button & Interaction Reference (1140:65694). The Figma sets these directly on the components rather than as variables. Not Figma variables, tokenised per Alex (29 Sep). */ --color-teal-800: #0f576e; /* primary hover and focus: 1140:65404, 1398:28307 */ --color-teal-300: #6ba8b8; /* primary and secondary pressed: 1140:65409, 1140:65683 */ --color-gold-600: #ec9100; /* conversion and Ask Coplus hover and focus: 1140:65648, 1140:65680 */ --color-grey-300: #cdd4d9; /* secondary inverse focus outline: 1398:28348 */ --color-sky-600: #0284c7; /* primary focus ring: 1398:28307 */ /* The FORM-001/FORM-002 validation error: a 1.5px border and the message text (1398:48824). Set on the fills, not variables: not Figma variables, tokenised per Alex (2 Oct). */ --color-red-600: #d92d20; /* error border */ --color-red-700: #b42318; /* error message text */ --color-red-100: #fbc8c8; /* the label of a field in error on the Contact form's teal panel (1398:48868) */ /* The pale-blue wash over the hero photos (1407:65430, 1407:99019) and behind the mobile menu (1305:22755). Set on the fills, not a variable: not a Figma variable, tokenised per Alex (29 Sep). */ --color-sky-100: #d4f4ff; /* The cream section background of the product page's cover list (1407:65430 "What's Covered Section"). Set on the frame, not a variable: not a Figma variable, tokenised per Alex (29 Sep). */ --color-cream-100: #f6f4ef; /* The open FAQ answer panel (1407:65642). Set on the frame, not a variable: not a Figma variable, tokenised per Alex (30 Sep). */ --color-teal-200: #b1d4d6; /* The glass cards in the About, Contact, Insights and FAQs heroes (1407:87821, 1398:47086, 1331:154006, 1331:155505): white at 28%. Not a Figma variable, not a Figma variable, tokenised per Alex (30 Sep). */ --color-white-a28: rgba(255, 255, 255, 0.28); /* The AncillaryHUB pages' pale indigo: the overview section and the open FAQ answer panel (1331:138022, 1331:138156). Not a Figma variable, tokenised per Alex (1 Oct). */ --color-indigo-50: #e5ebf8; /* The tile fill of the service cards, product tiles and the Property and Legal progress track (1407:101393, 1407:65064). Not a Figma variable, tokenised per Alex (1 Oct). */ --color-teal-100: #cee9eb; /* The card border (black at 5%): the Home service cards (1407:99049). Not a Figma variable, tokenised per Alex (1 Oct). */ --color-black-a5: rgba(0, 0, 0, 0.05); /* The dark card fill of the process steps, the Why choose, Values and Reviews cards, the Careers award badge and the Motor tiles and track (#03283c / #032a42 in the frames). Not a Figma variable, tokenised per Alex (1 Oct). */ --color-navy-850: #03283c; /* The tick circles in the "You may also be interested in" cards (1407:65330). Not a Figma variable, tokenised per Alex (1 Oct). */ --color-green-900: #334b3f; /* The FORM-003 complaint form (1108:15604 to 1108:15708): the dark card's border, the success reference and ring, the referral tint, and the shadow black. Not Figma variables, tokenised per Alex's 2 Oct ruling. */ --color-navy-950: #012032; --color-green-500: #00b67a; --color-green-a20: rgba(0, 182, 122, 0.2); --color-teal-900: #02464c; --color-orange-a20: rgba(215, 87, 23, 0.2); --color-black-a30: rgba(0, 0, 0, 0.3); --color-gold-300: #e8c56f; /* the sending submit button (1355:158252) */ --color-brown-700: #6a5726; /* its label */ /* Gradient stops, as declared inside the paint styles below */ --color-navy-800: #003a5e; --color-teal-500: #187e9e; --color-teal-700: #0f556c; --color-indigo-950: #030640; /* ── Tier 1: gradients (Figma paint styles) ──────────── */ --gradient-1: linear-gradient(270deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%); /* "gradient 1" */ --gradient-secondary: linear-gradient(180deg, var(--color-teal-500) 0%, var(--color-teal-700) 100%); /* "Secondary Gradient" */ --gradient-3: linear-gradient(180deg, var(--color-indigo-800) 0%, var(--color-indigo-950) 100%); /* "Gradient 3" */ /* The overlay on the Home service cards (1407:99049): #003e53 at 0 to #02202a at 1, at 60% paint opacity, darkest at the foot of the photo where the label sits. Not a Figma paint style, tokenised per Alex (1 Oct). */ --gradient-card-overlay: linear-gradient(180.408deg, rgba(0, 62, 83, 0) 48.18%, rgba(2, 32, 42, 0.6) 88.453%); /* ── Tier 1: effects (Figma effect styles) ────────────── */ --shadow-action: 0 0 12px rgba(0, 0, 0, 0.15); /* "Action" */ --shadow-form-card: 0 0 108.76px var(--color-black-a20); /* undeclared: the Contact form panel (flagged) */ --shadow-new: 0 0 10.1px rgba(0, 0, 0, 0.6), 0 4px 4px rgba(0, 0, 0, 0.25); /* "New" */ --blur-glass: 19px; /* "glass" */ --blur-glass-mobile: 6px; /* "Mobile Glass" */ /* ── Tier 1: type (Figma text styles) ─────────────────── */ /* The Figma uses two families. "Futura" sets Display, H2, H3, H4, Overline, Body (small) and every Mobile/ style; "Futura PT" sets Body and Action. Both come from Adobe Fonts (kit fcx5vke): Futura 100 ("futura-100", Medium only) stands in for the Figma's Futura, and matches its widths and line breaks closely (Alex, 29 Sep). Jost (self-hosted) stands in if the kit fails to load. */ --font-futura: 'futura-100', 'futura-pt', 'Jost', 'Century Gothic', sans-serif; --font-futura-pt: 'futura-pt', 'Jost', 'Futura', 'Century Gothic', sans-serif; --font-quattrocento-sans: 'Quattrocento Sans', serif; --weight-medium: 500; /* Futura PT Medium: every style but Action and Info, and Mobile/Action */ --weight-heavy: 700; /* Futura PT Heavy: Action (700 in the Adobe kit) */ --weight-bold: 700; /* Quattrocento Sans Bold: Info */ --tracking-action: 0.01em; /* Action and Mobile/Action: 1% */ /* Desktop styles */ --text-display: 64px; --leading-display: 1; --word-spacing-display: 6px; --text-h2: 48px; --leading-h2: 1.08; --text-h3: 28px; --leading-h3: 1.3; /* Figma H3 is 130% (was 1 until the claims frames showed it, 2 Oct) */ --text-h4: 24px; --leading-h4: 1.1; --text-body: 16px; --leading-body: 1.4; --text-body-small: 14px; --leading-body-small: 1.2; --text-overline: 16px; --leading-overline: 1; --text-action: 18px; --leading-action: 1; --text-info: 13px; --leading-info: 1; /* Mobile/ styles */ --text-mobile-display: 40px; --leading-mobile-display: 1.1; --text-mobile-h2: 32px; --leading-mobile-h2: 1.1; --text-mobile-h3: 24px; --leading-mobile-h3: 1.1; --text-mobile-h4: 20px; --leading-mobile-h4: 1.2; --text-mobile-h5: 18px; --leading-mobile-h5: 1.2; --text-mobile-body: 16px; --leading-mobile-body: 1.4; --text-mobile-body-small: 14px; --leading-mobile-body-small: normal; --text-mobile-overline: 14px; --leading-mobile-overline: 1.1; --text-mobile-action: 16px; --leading-mobile-action: 1.2; --text-mobile-info: 12px; --leading-mobile-info: 1.1; } :root { /* ── Tier 2: colour roles ─────────────────────────────── */ --color-primary: var(--color-teal-600); --color-secondary: var(--color-navy-900); --color-accent: var(--color-gold-500); --color-accent-tint: var(--color-gold-a20); --color-text: var(--color-ink-950); --color-text-muted: var(--color-grey-500); --color-text-inverse: var(--color-white); --color-text-inverse-muted: var(--color-white-a60); --color-surface: var(--color-white); --color-surface-tint: var(--color-teal-50); --color-surface-glass: var(--color-white-a60); --color-border: var(--color-black-a10); --color-surface-shade: var(--color-black-a10); /* "Secondary Accent" as a fill: the footer cards */ --color-hub: var(--color-indigo-800); --color-logo-grey: var(--color-grey-600); --color-primary-hover: var(--color-teal-800); --color-primary-pressed: var(--color-teal-300); --color-accent-hover: var(--color-gold-600); --color-focus-ring: var(--color-sky-600); --color-outline-inverse: var(--color-grey-300); --color-wash: var(--color-sky-100); --color-surface-warm: var(--color-cream-100); /* cream section backgrounds */ --color-surface-answer: var(--color-teal-200); /* the open FAQ answer panel */ --color-surface-glass-card: var(--color-white-a28); /* the hero glass cards; not a Figma variable, tokenised per Alex */ --color-surface-hub: var(--color-indigo-50); /* AncillaryHUB pale sections and answer panel; not a Figma variable, tokenised per Alex */ --color-surface-tile: var(--color-teal-100); /* the card and tile fill; not a Figma variable, tokenised per Alex */ --color-border-card: var(--color-black-a5); /* the card border; not a Figma variable, tokenised per Alex */ --color-card-navy: var(--color-navy-850); /* the dark cards, tiles and tracks on navy sections; not a Figma variable, tokenised per Alex */ --color-tick: var(--color-green-900); /* the tick circles of the also-interested lists; not a Figma variable, tokenised per Alex */ --color-error-border: var(--color-red-600); /* form field in error; not a Figma variable, tokenised per Alex */ --color-error-text: var(--color-red-700); /* form error message; not a Figma variable, tokenised per Alex */ --color-error-label: var(--color-red-100); /* an error field's label on the teal FORM-002 panel; not a Figma variable, tokenised per Alex */ --color-card-border-dark: var(--color-navy-950); /* the complaint choice cards' border; not a Figma variable, tokenised per Alex */ --color-success: var(--color-green-500); /* the complaint success ring and reference border; not a Figma variable, tokenised per Alex */ --color-success-tint: var(--color-green-a20); /* the success tick disc; not a Figma variable, tokenised per Alex */ --color-success-surface: var(--color-teal-900); /* the complaint reference box; not a Figma variable, tokenised per Alex */ --color-notice-tint: var(--color-orange-a20); /* the broker referral panel; not a Figma variable, tokenised per Alex */ --color-surface-upload: var(--color-teal-25); /* the careers CV drop zone; not a Figma variable, tokenised per Alex */ --color-surface-success-disc: var(--color-teal-75); /* the careers success disc; not a Figma variable, tokenised per Alex */ --gradient-dark-reverse: var(--gradient-1); /* right-to-left navy */ --gradient-primary: var(--gradient-secondary); --gradient-hub: var(--gradient-3); --font-heading: var(--font-futura); /* the Figma's Futura styles (and the Ask Coplus plugin) */ --font-body: var(--font-futura-pt); /* Body */ --font-action: var(--font-futura-pt); /* Action: buttons and Action-styled links */ --font-info: var(--font-quattrocento-sans); /* ── Tier 2: LEGACY, not declared in the Figma ────────────── These tokens existed before this file, so they're kept to avoid breaking anything. UX to declare them (or replacements) in the Figma. ─────────────────────────────────────────────────────────── */ --color-text-alt: #201e1d; --border-light: rgba(0, 0, 0, 0.05); /* old name kept: its one use (card-grid) shares a line with a raw 1px */ --gradient-dark: linear-gradient(100deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%); /* "gradient 1" colours at 100deg */ --transition-base: 200ms ease; /* ── Tier 2: layout (confirmed by Alex, 28 Sep 2026) ──────── Not Figma variables, but confirmed as the layout rule: desktop max width 1440, gutter 118, section 40 / 80 laptop (≤1366) gutter 50, section as desktop tablet (≤1024) gutter 40, section 24 / 48 mobile (≤767) gutter 20 Sections pad themselves with --space-gutter and cap their inner wrapper at --layout-content-max-w (1204 on desktop). An element that carries both the padding and the max width uses --layout-max-w. ─────────────────────────────────────────────────────────── */ --layout-max-w: 1440px; --space-gutter: 118px; --layout-content-max-w: calc(var(--layout-max-w) - 2 * var(--space-gutter)); --space-section: 40px; /* the neighbouring section has the SAME background */ --space-section-alt: 80px; /* the neighbouring section has a DIFFERENT background */ } @media (max-width: 1366px) { /* laptop */ :root { --space-gutter: 50px; } } @media (max-width: 1024px) { /* tablet */ :root { --space-gutter: 40px; --space-section: 24px; --space-section-alt: 48px; } } @media (max-width: 767px) { /* mobile */ :root { --space-gutter: 20px; } } :root { /* ── Tier 3: button (Figma "Button & Interaction Reference", 1140:65694) ── */ --button-primary-bg: var(--color-primary); --button-primary-text: var(--color-text-inverse); --button-accent-bg: var(--color-accent); --button-accent-text: var(--color-secondary); --button-font-size: var(--text-action); --button-shadow: var(--shadow-action); /* the "Action" effect: every type but Conversion */ --button-primary-bg-hover: var(--color-primary-hover); --button-primary-bg-pressed: var(--color-primary-pressed); --button-primary-outline: var(--color-surface-tint); /* focus, 1px outside */ --button-accent-bg-hover: var(--color-accent-hover); --button-accent-outline: var(--color-accent); /* focus, 1px outside */ --button-accent-bg-disabled: var(--color-gold-300); /* FORM-003 sending; not a Figma variable, tokenised per Alex */ --button-accent-text-disabled: var(--color-brown-700); --button-secondary-border: var(--color-secondary); --button-secondary-icon: var(--color-secondary); --button-secondary-inverse-border: var(--color-text-inverse); --button-secondary-inverse-bg: var(--color-surface); --button-secondary-inverse-text: var(--color-text); --button-secondary-inverse-icon: var(--color-secondary); --button-secondary-inverse-outline: var(--color-outline-inverse); --button-tertiary-text: var(--color-text-inverse); /* Primary focus (1398:28307): a 2px white ring, then a 4px sky halo */ --button-focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus-ring); /* Conversion and Ask Coplus focus: the same ring in gold (Alex, 29 Sep; the Figma's 1px outline alone was too faint) */ --button-accent-focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent); } /* ── Legacy aliases ───────────────────────────────────────── Owned by the Ask Coplus plugin (plugins/ask-coplus/), which reads these names. Nothing in the theme uses them. Keep them until the plugin moves to the Tier 2 names. (--font-heading is already a Tier 2 name, so it needs no alias.) ─────────────────────────────────────────────────────────── */ :root { --primary: var(--color-primary); --secondary: var(--color-secondary); --tertiary: var(--color-accent); --text: var(--color-text); --background: var(--color-surface); --primary-accent: var(--color-surface-tint); }