/* ========================================================================== LeadScale design system: tokens Version 3.1. 23 September 2026. Status: AGREED, DL-229. The four content-type marks in 37.3 were signed off by Fred the same day, DL-232. v3.1 is v3.0 below, VERBATIM, followed by one new section, 37.0, which overrides by redefinition. Nothing above section 37 has been edited, so every change of this version is in one place and can be refused by deleting that section. v3.0 sits beside this file, untouched. What 37.0 carries, each item from DL-229: Montserrat for display and heading levels (supersedes DL-072a's Roboto Serif); heading line-height 1.1 and the 30 to 34 character cap; the 5/7 split for blocks without media; orange never as text; a 12px floor; one primary button; the navy company facts bar with the gold 25 mark, homepage only; the content-type marks for the blog. The Google Fonts request changes from Roboto Serif to Montserrat 600 and 700. Roboto and Roboto Mono are unchanged. ========================================================================== */ /* ========================================================================== LeadScale design system: tokens Version 3.0. 20 August 2026. Status: DRAFT. THIS FILE IS A FLATTEN, NOT A REWRITE. v2.2 imported v2.1, which imported v2.0. Delivered as three files with two @import statements, the chain breaks the moment one file is missing from a handover, and every token it defined resolves to an empty string. That is what happened: --ls-card-pad: var(--ls-space-6) computed to nothing, so a build would have shipped cards with no padding, buttons with no radius and headings with no weight. v3.0 is v2.0 + v2.1 + v2.2 concatenated in order, verbatim, with the two @import lines removed. One file. No load order to get wrong. The three rounds of external critique behind those values are preserved exactly; nothing has been retuned. CORRECTIONS, and there are only two. Both are errors of omission in the original chain, not of judgement: C1 --ls-shadow-raised did not exist and should not. v2.1 rules two shadows, full stop: overlay for menus and popovers, sticky for the pinned header. Any third shadow is a new decision for the log. C2 --ls-radius-cell did not exist and is not needed. The radius ruling is 0 / 4 / 6 / 8. The single 2px drawing value lives where v2.2 put it, on --ls-grid312-radius, scoped to the 312-grid cell alone. ADDITIONS, section 33 at the foot. Four, each one a gap the component library hit and could not resolve from the existing tokens. Each is a proposal for the decision log, not a fait accompli, and each is marked PROPOSED so it can be refused without unpicking anything else. WHAT IS DELIBERATELY NOT HERE: No new hue. No new face. No new spacing step. No motion easing beyond v2.0's 150ms ease, because "the default is stillness" is a ruling and a curve is a way around it. No clamp() type, because v2.1 section 10.1 specifies discrete mobile values and a clamp silently replaces them. Architecture, unchanged, three layers: raw palette ls-navy-700 ... never used by a component role layer ls-text-primary ... page-level roles component ls-btn-primary-bg ... what a build actually reads ========================================================================== */ /* ========================================================================== PART ONE. v2.0, 19 August 2026, verbatim. Palette, semantic layer, type scale, space, shape, motion, and the [data-tone="contrast"] rebinding block. ========================================================================== */ :root { /* 1.1 Navy */ --ls-navy-100: #F4F7FC; --ls-navy-200: #EBF1F8; --ls-navy-300: #DFE8F3; --ls-navy-400: #C8D6E6; --ls-navy-500: #A9BDD5; --ls-navy-600: #839BBA; --ls-navy-700: #0C2340; /* BRAND Oxford Blue */ --ls-navy-800: #16375C; --ls-navy-900: #617083; /* BRAND Slate */ --ls-navy-1000: #223550; /* BRAND Heading ink */ /* 1.2 Grey */ --ls-gray-100: #F8F8FA; /* BRAND Ghost White */ --ls-gray-200: #F1F3F6; /* BRAND Light grey */ --ls-gray-300: #E7EAEF; --ls-gray-400: #DADEE5; --ls-gray-500: #C3C9D3; --ls-gray-600: #A6AEBB; --ls-gray-700: #808D98; /* BRAND body grey. Non-text only. F6. */ --ls-gray-800: #6E7A87; --ls-gray-900: var(--ls-navy-900); --ls-gray-1000: var(--ls-navy-1000); /* alias, not a second definition */ /* 1.3 Alpha greys */ --ls-alpha-100: rgba(12, 35, 64, 0.04); --ls-alpha-300: rgba(12, 35, 64, 0.10); --ls-alpha-400: rgba(12, 35, 64, 0.14); --ls-alpha-700: rgba(12, 35, 64, 0.44); /* 1.4 Orange. The one accent. Never body text at 700. */ --ls-orange-100: #FFF6E6; --ls-orange-400: #FFD48A; --ls-orange-700: #FF9F02; /* BRAND Orange Peel */ --ls-orange-900: #9C6200; /* CORRECTION 1. Text-safe: 5.05 white, 4.54 gray-200. */ --ls-orange-1000: #7A4B00; /* 1.5 Green */ --ls-green-100: #EEF5F1; --ls-green-400: #B9D2C5; --ls-green-700: #588370; /* BRAND. Marks and fills, not text. F3. */ --ls-green-900: #3F6152; /* Success text: 6.90 on white. */ --ls-green-1000: #2A4237; /* 1.6 Amber */ --ls-amber-100: #FEF6E8; --ls-amber-400: #FBDFA9; --ls-amber-700: #FAC16A; /* BRAND */ --ls-amber-900: #8A6314; --ls-amber-1000: #5C4210; /* Warning text. F4: hue is never the only carrier. */ /* 1.7 Coral */ --ls-coral-100: #FDEFF0; --ls-coral-400: #F4BABE; --ls-coral-700: #E66F76; /* BRAND */ --ls-coral-900: #B03A41; --ls-coral-1000: #7A2529; /* 1.8 Purple. Data series and Labs only. */ --ls-purple-100: #F3EFF7; --ls-purple-400: #CFC0DD; --ls-purple-700: #8A6CA6; /* BRAND */ --ls-purple-900: #614A76; --ls-purple-1000: #40314E; /* 2.0 Semantic layer */ --ls-surface-primary: #FFFFFF; --ls-surface-secondary: var(--ls-gray-100); --ls-surface-sunken: var(--ls-gray-200); --ls-surface-contrast: var(--ls-navy-700); --ls-surface-accent: var(--ls-orange-100); --ls-surface-evidence: var(--ls-navy-100); /* NEW. The evidence panel sits on this. */ --ls-text-primary: var(--ls-navy-1000); --ls-text-secondary: var(--ls-gray-900); --ls-text-muted: var(--ls-gray-700); /* Non-text and disabled only. */ --ls-text-accent: var(--ls-orange-900); --ls-text-source: var(--ls-gray-900); /* NEW. The source line under a figure. */ --ls-text-on-contrast: #FFFFFF; --ls-text-on-contrast-secondary: var(--ls-navy-500); --ls-border-subtle: var(--ls-alpha-300); --ls-border-default: var(--ls-alpha-400); --ls-border-strong: var(--ls-alpha-700); --ls-border-on-contrast: rgba(255, 255, 255, 0.20); --ls-border-accent: var(--ls-orange-700); --ls-accent: var(--ls-orange-700); --ls-color-success: var(--ls-green-700); /* Marks. Text binds green-900. */ --ls-color-warning: var(--ls-amber-1000); --ls-color-error: var(--ls-coral-900); --ls-color-info: var(--ls-navy-700); --ls-focus: var(--ls-navy-700); /* CORRECTION 2. */ /* 2.1 Data. CORRECTION 4: adjacent distances 19.6 / 15.6 / 15.7. */ --ls-chart-1: #223550; --ls-chart-2: #5A6B80; --ls-chart-3: #8C99A8; --ls-chart-4: #C3C9D3; --ls-chart-accent: var(--ls-orange-700); --ls-chart-grid: var(--ls-alpha-300); /* 3.0 Type. Roboto superfamily only, per the brand book's web face. */ --ls-font-display: 'Roboto Serif', Georgia, 'Times New Roman', serif; --ls-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ls-font-mono: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace; --ls-font-numeric: 'Roboto Mono', 'Roboto', sans-serif; /* Figures are set mono: a number reads as a measurement, and columns align. */ --ls-weight-regular: 400; --ls-weight-heading: 500; --ls-weight-medium: 500; --ls-weight-semibold: 600; --ls-weight-bold: 700; --ls-type-display: 52px; --ls-leading-display: 56px; --ls-tracking-display: -0.03em; --ls-type-page-title: 46px; --ls-leading-page-title: 52px; --ls-tracking-page-title: -0.03em; --ls-type-title: 34px; --ls-leading-title: 42px; --ls-tracking-title: -0.02em; --ls-type-section: 26px; --ls-leading-section: 34px; --ls-tracking-section: -0.015em; --ls-type-subsection: 22px; --ls-leading-subsection: 30px; --ls-tracking-subsection: -0.01em; --ls-type-lede: 20px; --ls-leading-lede: 32px; --ls-tracking-lede: -0.005em; --ls-type-body-large: 18px; --ls-leading-body-large: 30px; --ls-tracking-body-large: 0; --ls-type-body: 16px; --ls-leading-body: 26px; --ls-tracking-body: 0; /* DEVIATION 1 */ --ls-type-compact: 14px; --ls-leading-compact: 22px; --ls-tracking-compact: 0; --ls-type-label: 13px; --ls-leading-label: 18px; --ls-tracking-label: 0.06em; --ls-type-meta: 12px; --ls-leading-meta: 16px; --ls-tracking-meta: 0.02em; --ls-type-figure: 34px; --ls-leading-figure: 40px; --ls-tracking-figure: -0.01em; /* NEW. The evidence figure. */ --ls-measure-reading: 68ch; --ls-measure-lede: 46ch; --ls-measure-title: 24ch; --ls-measure-display: 20ch; /* 4.0 Space */ --ls-space-1: 4px; --ls-space-2: 8px; --ls-space-3: 12px; --ls-space-4: 16px; --ls-space-5: 20px; --ls-space-6: 24px; --ls-space-8: 32px; --ls-space-10: 40px; --ls-space-12: 48px; --ls-space-16: 64px; --ls-space-20: 80px; --ls-space-24: 96px; --ls-flow-tight: var(--ls-space-2); --ls-flow-copy: var(--ls-space-4); --ls-flow-group: var(--ls-space-8); --ls-flow-section: var(--ls-space-16); --ls-flow-chapter: var(--ls-space-24); /* 5.0 Shape, layout, elevation */ --ls-radius-xs: 4px; /* BRAND button radius */ --ls-radius-sm: 6px; --ls-radius-md: 8px; --ls-content-width: 1200px; --ls-gutter: var(--ls-space-6); --ls-grid-columns: 12; --ls-control-height: 40px; --ls-control-height-touch: 44px; --ls-rule: 1px; --ls-rule-accent: 3px; --ls-shadow-overlay: 0 8px 24px rgba(12, 35, 64, 0.12), 0 1px 2px rgba(12, 35, 64, 0.08); /* 6.0 Motion. The default is stillness. */ --ls-duration: 150ms; --ls-ease: ease; --ls-transition: background-color var(--ls-duration) var(--ls-ease), border-color var(--ls-duration) var(--ls-ease), color var(--ls-duration) var(--ls-ease); --ls-focus-width: 2px; --ls-focus-offset: 2px; } /* 7.0 Contrast band. Rebinds semantics; contents never restyled. */ [data-tone="contrast"] { --ls-surface-primary: var(--ls-navy-700); --ls-surface-secondary: var(--ls-navy-800); --ls-surface-evidence: var(--ls-navy-800); --ls-text-primary: var(--ls-text-on-contrast); --ls-text-secondary: var(--ls-text-on-contrast-secondary); --ls-text-muted: var(--ls-navy-600); --ls-text-source: var(--ls-navy-500); --ls-border-subtle: var(--ls-border-on-contrast); --ls-border-default: var(--ls-border-on-contrast); --ls-border-strong: rgba(255, 255, 255, 0.44); --ls-focus: #FFFFFF; --ls-chart-1: #FFFFFF; --ls-chart-2: var(--ls-navy-500); --ls-chart-3: var(--ls-navy-600); --ls-chart-4: var(--ls-navy-800); background: var(--ls-surface-primary); color: var(--ls-text-primary); } /* ========================================================================== PART TWO. v2.1, 19 August 2026, verbatim. The composition layer: washes, the signal rule, halos, the responsive matrix, the mobile type map, the state recipes and the composition rules. ========================================================================== */ :root { /* 9.0 Surfaces and washes (NEW) */ --ls-wash-hero: linear-gradient(180deg, rgba(238,245,255,.60) 0%, rgba(238,245,255,0) 56%); /* Hero only. Once per page. Never behind evidence panels. */ --ls-rule-signal: linear-gradient(90deg, #0C2340 0%, #FF9F02 100%); --ls-rule-signal-height: 3px; --ls-rule-signal-width: 96px; /* Foot of the page hero only. Once per page. Never a border, never a divider. */ /* 9.1 Halos. Data markers only, never UI controls. */ --ls-halo-data: 0 0 0 4px rgba(255,159,2,.22); --ls-halo-data-emphasis: 0 0 0 6px rgba(255,159,2,.30); /* 9.2 Radius ruling: 0 / 4 / 6 / 8, one radius per component. 0 bands, tables, full-bleed. 4 controls (BRAND). 6 large buttons, evidence panels, menus, answer block. 8 cards and media. No pills. */ --ls-radius-none: 0; /* 9.3 Missing state values (NEW) */ --ls-navy-750: #0A1C33; /* primary button active */ --ls-orange-750: #E68F00; /* accent button hover */ --ls-orange-800a: #CC7F00;/* accent button active */ /* 9.4 Elevation ruling: two shadows, full stop. */ --ls-shadow-sticky: 0 1px 0 #C8D6E6; /* pinned header only */ /* --ls-shadow-overlay carries from v2.0: menus, popovers, modals, toasts only. */ /* 10.0 Responsive matrix (NEW) */ --ls-bp-sm: 480px; /* 4 cols, 16 gutter */ --ls-bp-md: 768px; /* 4 cols, 16 gutter */ --ls-bp-lg: 1024px; /* 8 cols, 20 gutter */ --ls-bp-xl: 1200px; /* 12 cols, 24 gutter, container min(1200px, 100% - 48px) */ --ls-band-pad-desktop: 96px; --ls-band-pad-tablet: 64px; --ls-band-pad-mobile: 48px; /* 10.1 Mobile type map (NEW). Desktop value -> below 768px. */ --ls-type-display-m: 36px; --ls-leading-display-m: 42px; --ls-type-page-title-m: 32px; --ls-leading-page-title-m: 38px; --ls-type-title-m: 27px; --ls-leading-title-m: 34px; --ls-type-figure-m: 28px; --ls-leading-figure-m: 34px; } /* ========================================================================== 11.0 State recipes (NEW). Exact deltas, not "darker". Primary button bg navy-700 / text #FFF. Hover navy-800. Active navy-750. Disabled bg gray-200, text gray-700, border gray-400. Accent button bg orange-700 / text navy-700 (700 weight). Hover orange-750. Active orange-800a. One accent button per viewport height; it carries the standing CTA (default awaiting Robin). Secondary bg transparent, 1px navy-400, text navy-1000. Hover bg navy-100, border navy-500. Active bg navy-200. Text link navy-1000, 2px orange underline at 3px offset. Hover navy-700, underline unchanged. Input 1px navy-400. Hover navy-500. Focus border navy-700 plus 2px navy-700 outline at 2px offset. Error border coral-900, message coral-900 with icon, field bg coral-100 at 40%. Disabled bg gray-200 text gray-700. Card 1px #DFE8F3, radius 8, padding 24 (feature 32, compact 16). Hover border #C8D6E6, bg gray-100. Colour transition only, no translate: the stillness rule outranks the two graders who asked for -2px. All transitions 150ms ease, colour properties only. 12.0 Composition rules (NEW), enforced in review rather than CSS: Band cycle: white, gray-100, white, navy-700 contrast, white, gray-100. Contrast band once per template, twice on the homepage, never first, never adjacent to another contrast band. The hero wash is not a band. Hero: eyebrow 16 above H1; H1 max 20ch; clarifier 24 below at 46ch; CTA row 32 below, pair 16 apart; micro-conversion link 12 below; signal rule 40 beneath. Copy spans 8 of 12 columns. Mega menu: hover-intent AND click, both the contract (DL-052). Pointer devices: open after 160ms rest, close 220ms after leave; click locks open. Touch and keyboard: click/Enter only. Escape closes, focus returns, aria-expanded. Columns collapse per the navigation schedule. Figures: a figure never renders without a source line: Source: origin, n=sample, period, criteria. Mono 12/16, text-source, 1px rule above. Figure trio with fewer than two cleared figures drops the block. H1 overflow: the CMS caps h1 at 60 characters; longer fails the check. ========================================================================== */ /* ========================================================================== PART THREE. v2.2, 19 August 2026, verbatim. The component-level semantic layer, the corrections schema, and the soft rules restated as build checks. ========================================================================== */ :root { /* ------------------------------------------------------------------ 20.0 Buttons ------------------------------------------------------------------ */ --ls-btn-height: 44px; --ls-btn-height-compact: 40px; --ls-btn-pad-x: 22px; --ls-btn-radius: var(--ls-radius-xs); /* 4px BRAND */ --ls-btn-weight: var(--ls-weight-medium); --ls-btn-primary-bg: var(--ls-navy-700); --ls-btn-primary-text: #FFFFFF; --ls-btn-primary-bg-hover: var(--ls-navy-800); --ls-btn-primary-bg-active: var(--ls-navy-750); --ls-btn-disabled-bg: var(--ls-gray-200); --ls-btn-disabled-text: var(--ls-gray-700); --ls-btn-disabled-border: var(--ls-gray-400); --ls-btn-accent-bg: var(--ls-orange-700); --ls-btn-accent-text: var(--ls-navy-700); --ls-btn-accent-weight: var(--ls-weight-bold); --ls-btn-accent-bg-hover: var(--ls-orange-750); --ls-btn-accent-bg-active: var(--ls-orange-800a); --ls-btn-secondary-border: var(--ls-navy-400); --ls-btn-secondary-text: var(--ls-navy-1000); --ls-btn-secondary-bg-hover: var(--ls-navy-100); --ls-btn-secondary-border-hover: var(--ls-navy-500); --ls-btn-secondary-bg-active: var(--ls-navy-200); /* ------------------------------------------------------------------ 21.0 Links ------------------------------------------------------------------ */ --ls-link-text: var(--ls-text-primary); --ls-link-text-hover: var(--ls-navy-700); --ls-link-underline: var(--ls-orange-700); --ls-link-underline-width: 2px; --ls-link-underline-offset: 3px; --ls-arrowlink-mark: var(--ls-orange-700); /* ------------------------------------------------------------------ 22.0 Inputs and forms ------------------------------------------------------------------ */ --ls-input-height: 44px; --ls-input-pad: 10px 12px; --ls-input-radius: var(--ls-radius-xs); --ls-input-bg: var(--ls-surface-primary); --ls-input-border: var(--ls-navy-400); --ls-input-border-hover: var(--ls-navy-500); --ls-input-border-focus: var(--ls-navy-700); --ls-input-border-error: var(--ls-coral-900); --ls-input-bg-error: rgba(253, 239, 240, 0.4); /* coral-100 at 40% */ --ls-input-text-disabled: var(--ls-gray-700); --ls-input-bg-disabled: var(--ls-gray-200); --ls-input-placeholder: var(--ls-gray-700); --ls-label-weight: var(--ls-weight-semibold); --ls-errmsg-text: var(--ls-coral-900); /* ------------------------------------------------------------------ 23.0 Cards ------------------------------------------------------------------ */ --ls-card-pad: var(--ls-space-6); /* 24 */ --ls-card-pad-feature: var(--ls-space-8); /* 32 */ --ls-card-pad-compact: var(--ls-space-4); /* 16 */ --ls-card-radius: var(--ls-radius-md); /* 8 */ --ls-card-border: #DFE8F3; /* navy-300 */ --ls-card-border-hover: var(--ls-navy-400); --ls-card-bg: var(--ls-surface-primary); --ls-card-bg-hover: var(--ls-gray-100); --ls-card-gap-title-body: var(--ls-space-2); --ls-card-gap-body-meta: var(--ls-space-4); --ls-card-gap-footer: var(--ls-space-6); /* ------------------------------------------------------------------ 24.0 Evidence components ------------------------------------------------------------------ */ --ls-evidence-bg: var(--ls-surface-evidence); /* navy-100 */ --ls-evidence-border: var(--ls-border-subtle); --ls-evidence-radius: var(--ls-radius-sm); /* 6 */ --ls-evidence-pad: var(--ls-space-6); --ls-srcline-type: 12px; --ls-srcline-leading: 16px; --ls-srcline-text: var(--ls-text-source); --ls-srcline-rule: var(--ls-gray-300); --ls-srcline-gap: 12px; --ls-srcline-mark: var(--ls-orange-700); --ls-figure-face: var(--ls-font-mono); --ls-answer-rule: var(--ls-orange-700); --ls-answer-rule-width: var(--ls-rule-accent); /* 3px BRAND */ --ls-answer-bg: var(--ls-gray-100); --ls-answer-radius: 0 var(--ls-radius-sm) var(--ls-radius-sm) 0; --ls-claim-marker: var(--ls-amber-700); /* the VERIFY chip fill */ --ls-claim-marker-text: var(--ls-amber-1000); /* and its text, 9.37:1 */ /* ------------------------------------------------------------------ 25.0 The data language ------------------------------------------------------------------ */ --ls-grid312-cell: 12px; --ls-grid312-gap: 4px; --ls-grid312-radius: 2px; /* the one drawing use of 2px */ --ls-grid312-filled: var(--ls-navy-700); --ls-grid312-empty: #DFE8F3; --ls-grid312-highlight: var(--ls-orange-700); --ls-grid312-outline: 1.5px; --ls-diagram-stroke: 1.5px; --ls-diagram-line: var(--ls-navy-400); --ls-diagram-node: var(--ls-navy-700); --ls-chart-line-width: 1.5px; --ls-chart-marker: 6px; --ls-chart-gridline: var(--ls-gray-300); --ls-icon-box: 24px; --ls-icon-stroke: 1.5px; /* ------------------------------------------------------------------ 26.0 Navigation (DL-052: hover-intent AND click, both the contract) ------------------------------------------------------------------ */ --ls-nav-height: 72px; --ls-nav-item-pad-x: 12px; --ls-nav-item-radius: var(--ls-radius-xs); --ls-nav-item-bg-hover: var(--ls-gray-200); --ls-nav-item-bg-open: var(--ls-navy-700); --ls-nav-item-text-open: #FFFFFF; --ls-mega-open-delay: 160ms; /* pointer rest before open */ --ls-mega-close-delay: 220ms; /* pointer leave before close */ --ls-mega-radius: var(--ls-radius-sm); --ls-mega-shadow: var(--ls-shadow-overlay); --ls-mega-col-rule: var(--ls-alpha-300); --ls-mega-head-rule: var(--ls-orange-700); --ls-footer-bg: var(--ls-surface-secondary); /* ------------------------------------------------------------------ 27.0 Tables ------------------------------------------------------------------ */ --ls-table-head-type: 13px; --ls-table-head-rule: var(--ls-navy-400); --ls-table-row-rule: var(--ls-gray-300); --ls-table-pad: 12px 16px; --ls-table-numeral-face: var(--ls-font-mono); /* ------------------------------------------------------------------ 28.0 Bands and page composition ------------------------------------------------------------------ */ --ls-band-pad: var(--ls-band-pad-desktop); /* Resolved responsively below: a component token that hardcodes one breakpoint reintroduces the fault the component layer exists to stop. Round-three finding, grader C. */ --ls-hero-pad-top: 88px; --ls-hero-pad-bottom: 72px; --ls-hero-eyebrow-gap: 16px; --ls-hero-clarifier-gap: 24px; --ls-hero-cta-gap: 32px; --ls-hero-cta-pair-gap: 16px; --ls-hero-micro-gap: 12px; --ls-hero-rule-gap: 40px; } /* ========================================================================== 29.0 The corrections schema (adopted from panel round two, grader C) The register lives at /trust/corrections on the T7 template, append-only. One row per correction: correction-id c-0001, sequential, permanent anchor claim-id the data-claim-id of the corrected figure date-corrected ISO date prior-value what was published corrected-value what it now says reason-class data-revision | transcription | methodology-change authoriser named person On the page, a corrected figure carries data-corrected="c-0001" and renders a mono 12/16 line in --ls-srcline-text, 8px beneath its source line: "Corrected 14 August 2026", linking to the register anchor. Engine screen captures carry data-verified and data-review-by at capture + 90 days, a caption "Engine · [module] · captured [date]", and show no client names and no real record data. 30.0 Soft rules that must become checks (check_alignment.py additions): 16 every element with a rendered figure has an ancestor or sibling source line, and every source line names origin, sample, period, criteria 17 every data-corrected value has a matching register row 18 every data-review-by date is in the future at build time 19 orange-900 text nodes are <= 5% of a page's text characters 20 contrast band count per page: <= 1 per template, <= 2 on the homepage, never the first band, never adjacent 21 h1 length <= 60 characters; answer block 40-60 words A rule with no check is a preference. These are numbered to follow the fifteen checks that exist. ========================================================================== */ /* 31.0 Responsive resolution of composition tokens (round-three fix). --ls-band-pad is a role, not a desktop value. */ @media (max-width: 1024px) { :root { --ls-band-pad: var(--ls-band-pad-tablet); --ls-hero-pad-top: 64px; --ls-hero-pad-bottom: 56px; } } @media (max-width: 768px) { :root { --ls-band-pad: var(--ls-band-pad-mobile); --ls-hero-pad-top: 56px; --ls-hero-pad-bottom: 48px; } } /* ========================================================================== 33.0 ADDITIONS IN v3.0. All PROPOSED. Four gaps the component library hit. Each one is a value the library needed and could not derive from an existing token. None changes an existing value. Refuse any of them and only the component that reads it is affected. ========================================================================== */ :root { /* 33.1 PROPOSED. Diagram primitives. The Engine schematic (D1) and the instrument rail (D2) were one-off SVG in mock v22 with no tokens at all, which is why no second one could be made. v2.2 named the diagram line and node; these are the three values its panels also need. Panel stroke is v22's own #C3CCD8, unchanged. */ --ls-diagram-panel-stroke: #C3CCD8; --ls-diagram-panel-fill: var(--ls-surface-primary); --ls-diagram-signal: var(--ls-orange-700); /* return path, live record */ /* 33.2 PROPOSED. Two measures the reading measure does not cover. v2.0 gives reading 68ch, lede 46ch, title 24ch, display 20ch. The answer block runs slightly longer than prose at the same font size because it is set in the serif, and a source line must be allowed to run long rather than truncate, which is check 16's whole point. */ --ls-measure-answer: 70ch; --ls-measure-source: 90ch; /* 33.3 PROPOSED. The stack breakpoint. Not a new breakpoint in the responsive matrix, which stays 480 / 768 / 1024 / 1200. This is the single width at which a technical drawing stops being legible and is REPLACED by stacked panels rather than scaled down. The value is v22's own, taken from its @media (max-width:960px) rule where .sch-frame is dropped and .eng-stack takes over. Recorded as a token so the ruling is not buried in one component's CSS. */ --ls-bp-stack: 960px; /* 33.4 PROPOSED. Tight band padding. The credentials bar and the statement band are bands, so they must take a band padding rather than an ad-hoc value, but at the full 96px a one-line band reads as an empty screen. Two thirds of the desktop and mobile values respectively. */ --ls-band-pad-tight-desktop: 64px; --ls-band-pad-tight-mobile: 32px; } /* 34.0 Responsive resolution of the composition tokens. --ls-band-pad is a role, not a desktop value: a component token that hardcodes one breakpoint reintroduces the fault the component layer exists to stop. Values are v2.1's: 96 / 64 / 48. */ :root { --ls-band-pad: var(--ls-band-pad-desktop); --ls-band-pad-tight: var(--ls-band-pad-tight-desktop); } @media (max-width: 1024px) { :root { --ls-band-pad: var(--ls-band-pad-tablet); } } @media (max-width: 768px) { :root { --ls-band-pad: var(--ls-band-pad-mobile); --ls-band-pad-tight: var(--ls-band-pad-tight-mobile); } } /* 35.0 Reduced motion. v2.0 sets one duration; this zeroes it, so no component has to remember. */ @media (prefers-reduced-motion: reduce) { :root { --ls-duration: 0ms; } } /* ========================================================================== 36.0 BUILD CHECKS ADDED IN v3.0, following the twenty-one that exist. 22 no declaration in a component stylesheet contains a literal hex, a px radius or a px space value: every one resolves through a token 23 every var() in a component stylesheet resolves to a token defined in THIS file. Check 23 exists because the delivered v2.2 shipped five references that resolved to nothing, and no check caught it 24 no interactive element is smaller than 44px in either axis 25 no component stylesheet declares its own @import. Tokens are one file, and this is the check that keeps them one file A rule with no check is a preference. ========================================================================== */ /* ========================================================================== 37.0 DL-229, 23 September 2026. Agreed with Fred. Overrides by redefinition. ========================================================================== */ :root { /* 37.1 Type. The wordmark is Montserrat; the headings now match it. */ --ls-font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --ls-font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --ls-weight-heading: 700; /* page titles and section headings. v3.0 read 500, and headings already read this token, so 700 lands. */ --ls-weight-subheading: 600; /* card titles, panel titles, article H3s */ --ls-leading-display: 1.1; --ls-leading-page-title: 1.1; --ls-leading-title: 1.1; --ls-leading-section: 1.1; --ls-leading-display-m: 1.1; /* mobile values follow DL-229 too */ --ls-leading-page-title-m: 1.1; --ls-leading-title-m: 1.1; --ls-tracking-display: -0.02em; --ls-tracking-page-title: -0.02em; --ls-tracking-title: -0.015em; --ls-type-intro: 20px; --ls-leading-intro: 30px; /* intro lines, Roboto */ /* 37.2 Width. Montserrat sets wider than Roboto Serif; caps widen with it. */ --ls-measure-display: 32ch; /* was 20ch */ --ls-measure-title: 34ch; /* was 24ch */ --ls-measure-lede: 60ch; /* was 46ch */ --ls-measure-reading: 68ch; /* unchanged */ --ls-split-heading-cols: 5; /* a block with no media: heading left five */ --ls-split-body-cols: 7; /* columns, body right seven, on the 12 grid */ /* 37.3 Colour rules. No new hue except the anniversary gold, which is the brand amber by value and is scoped to one component. */ --ls-text-accent: var(--ls-orange-900); /* #9C6200. Orange 700 is never text. */ --ls-number-accent: var(--ls-orange-900); /* section numerals, FAQ icons */ --ls-facts-bar-bg: var(--ls-navy-700); /* homepage only */ --ls-facts-bar-text: #FFFFFF; --ls-anniversary-gold: var(--ls-amber-700); /* #FAC16A. The 25 mark only. */ /* Signed off by Fred, 23 September 2026, DL-232. Marks only, never text. */ --ls-type-mark-news: var(--ls-green-700); --ls-type-mark-opinion: var(--ls-purple-700); --ls-type-mark-guide: var(--ls-amber-700); --ls-type-mark-event: var(--ls-coral-700); /* 37.4 Size floor. Nothing below 12px; card body 14px. */ --ls-type-min: 12px; --ls-type-card-body: 14px; /* 37.5 One primary button: navy on light grounds, orange on navy. */ --ls-btn-primary-bg: var(--ls-navy-700); --ls-btn-primary-text: #FFFFFF; --ls-btn-primary-on-dark-bg: var(--ls-orange-700); --ls-btn-primary-on-dark-text: var(--ls-navy-700); /* 37.6 Held panels are solid. */ --ls-held-bg: var(--ls-navy-100); --ls-held-border: none; /* 37.7 Header buffer between the last menu item and the button. */ --ls-header-nav-cta-gap: var(--ls-space-6); } /* 37.8 Build checks added in v3.1, following 22 to 25. 26 no element's color resolves to --ls-orange-700 27 no text below --ls-type-min 28 no element uses Roboto Serif 29 a block with no media and a width under 60% of the grid fails 30 the gold 25 mark renders only inside company-facts-bar */ /* LeadScale preview 0.4.0. Site stylesheet. Reads design tokens v3.1 (v7, DL-229, DL-232). Headings Montserrat 700, subheadings 600, line-height 1.1, 30 to 34ch caps; Roboto body; Roboto Mono labels at 12px minimum; the 5/7 split for blocks without media; orange 700 is never text; one primary button (navy on light, orange on navy); whole cards are links. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; } body { margin: 0; font-family: var(--ls-font-sans); font-size: var(--ls-type-body); line-height: var(--ls-leading-body); color: var(--ls-text-primary); background: var(--ls-surface-primary); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ls-navy-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: var(--ls-focus-width) solid var(--ls-focus); outline-offset: var(--ls-focus-offset); } p { margin: 0; } ul, ol { margin: 0; padding: 0; } h1, h2, h3 { margin: 0; font-family: var(--ls-font-heading); color: var(--ls-text-primary); text-wrap: balance; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ls-navy-700); color: #fff; padding: 10px 16px; border-radius: var(--ls-radius-xs); } .skip:focus { top: 12px; } .wrap { max-width: var(--ls-content-width); margin: 0 auto; padding: 0 var(--ls-gutter); } /* Type */ .h1 { font-size: var(--ls-type-page-title); line-height: var(--ls-leading-page-title); letter-spacing: var(--ls-tracking-page-title); font-weight: var(--ls-weight-heading); max-width: var(--ls-measure-display); } .hero-statement-hero .h1 { font-size: var(--ls-type-display); line-height: var(--ls-leading-display); letter-spacing: var(--ls-tracking-display); } .h2 { font-size: var(--ls-type-title); line-height: var(--ls-leading-title); letter-spacing: var(--ls-tracking-title); font-weight: var(--ls-weight-heading); max-width: var(--ls-measure-title); } .h3, .card-t, .q { font-size: var(--ls-type-subsection); line-height: 1.25; font-weight: var(--ls-weight-subheading); } .lede { margin-top: var(--ls-space-6); font-size: var(--ls-type-intro); line-height: var(--ls-leading-intro); color: var(--ls-text-secondary); max-width: var(--ls-measure-lede); } .eyebrow, .sublabel, .mcol-h, .fcol-h, .meta-line, .search-l, .step-n, .req, .chip-n, .post time { font-family: var(--ls-font-mono); font-size: var(--ls-type-meta); line-height: var(--ls-leading-meta); letter-spacing: .08em; text-transform: uppercase; } .eyebrow { color: var(--ls-text-accent); margin-bottom: var(--ls-space-4); font-weight: 500; } .split-b > p, .prose p, .a p { font-size: var(--ls-type-body-large); line-height: var(--ls-leading-body-large); color: var(--ls-text-primary); max-width: var(--ls-measure-reading); } .split-b > * + *, .prose > * + *, .a > * + * { margin-top: var(--ls-flow-copy); } .split-b > .h3, .prose .h3 { margin-top: var(--ls-space-8); } .prose .h2 { margin-top: var(--ls-space-12); font-size: var(--ls-type-section); line-height: 1.1; } .prose .h2:first-child { margin-top: 0; } .sublabel { color: var(--ls-text-secondary); margin-top: var(--ls-space-8) !important; } /* Buttons: one primary. Navy on light grounds, orange on navy. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ls-control-height-touch); padding: 12px 22px; border-radius: var(--ls-radius-xs); font-weight: var(--ls-weight-semibold); font-size: 16px; line-height: 1.2; text-decoration: none; transition: var(--ls-transition); } .btn-primary { background: var(--ls-btn-primary-bg); color: var(--ls-btn-primary-text); } .btn-primary:hover { background: var(--ls-navy-800); } .btn-on-dark { background: var(--ls-btn-primary-on-dark-bg); color: var(--ls-btn-primary-on-dark-text); } .btn-on-dark:hover { background: var(--ls-orange-400); } .btn-secondary { background: transparent; color: var(--ls-navy-700); box-shadow: inset 0 0 0 1px var(--ls-border-strong); } .btn-secondary:hover { box-shadow: inset 0 0 0 2px var(--ls-navy-700); } .actions { display: flex; flex-wrap: wrap; gap: var(--ls-space-4); margin-top: var(--ls-space-8); } .linkrow { display: flex; flex-wrap: wrap; gap: var(--ls-space-6); } .more { font-weight: var(--ls-weight-semibold); text-decoration: none; } .more::after { content: " \2192"; } .more:hover { text-decoration: underline; } /* Facts bar, homepage only. The gold 25 mark renders only here. */ .facts-bar { background: var(--ls-facts-bar-bg); color: var(--ls-facts-bar-text); } .facts-in { display: flex; align-items: center; gap: var(--ls-space-4); min-height: 40px; } .mark25 { width: 44px; height: 28px; flex: 0 0 auto; } .mark25 text { font-family: var(--ls-font-heading); font-weight: 700; font-size: 32px; fill: none; stroke: var(--ls-anniversary-gold); stroke-width: 1.1; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--ls-border-subtle); } .hdr { display: flex; align-items: center; height: 72px; gap: var(--ls-header-nav-cta-gap); } .logo { flex: 0 0 auto; display: inline-flex; padding: 4px; margin-left: -4px; } .logo img { height: 28px; width: auto; } .primary { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; } .tops { list-style: none; display: flex; align-items: stretch; gap: 0; } .top { position: static; display: flex; align-items: center; } .top-a { display: inline-flex; align-items: center; height: 72px; padding: 0 2px 0 8px; color: var(--ls-text-primary); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; } .top-a:hover, .top.open .top-a { border-bottom-color: var(--ls-navy-700); } .top-b { width: 22px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; margin-right: 0; padding: 0; } .top-b::after { content: ""; position: absolute; left: 6px; top: 16px; width: 7px; height: 7px; border-right: 1.5px solid var(--ls-text-secondary); border-bottom: 1.5px solid var(--ls-text-secondary); transform: rotate(45deg); } .top-b[aria-expanded="true"]::after { transform: rotate(-135deg); top: 20px; } .hdr-cta { flex: 0 0 auto; padding: 12px 18px; } .mega { position: absolute; left: 0; right: 0; top: 72px; background: #fff; border-top: 1px solid var(--ls-border-subtle); box-shadow: var(--ls-shadow-overlay); padding: var(--ls-space-8) 0 var(--ls-space-10); } .mband { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ls-space-8); } .mband-secondary { margin-top: var(--ls-space-8); padding-top: var(--ls-space-6); border-top: 1px solid var(--ls-border-subtle); } .mcol-h { color: var(--ls-text-secondary); margin-bottom: var(--ls-space-3); } .mcol-h a { color: inherit; } .mcol ul { list-style: none; } .mcol li a { display: block; padding: 6px 0; font-size: 15px; line-height: 20px; color: var(--ls-text-primary); text-decoration: none; } .mcol li a:hover { text-decoration: underline; } .mband-secondary .mcol li a { font-size: 14px; } .burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; margin-left: auto; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .burger i { display: block; width: 22px; height: 2px; background: var(--ls-navy-700); } .drawer { border-top: 1px solid var(--ls-border-subtle); background: #fff; max-height: calc(100vh - 72px); overflow: auto; padding-bottom: var(--ls-space-8); } .dmenu { border-bottom: 1px solid var(--ls-border-subtle); } .dmenu summary { padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none; min-height: 44px; } .dmenu summary::-webkit-details-marker { display: none; } .dmenu-b { padding-bottom: var(--ls-space-4); } .dcol-h { margin-top: var(--ls-space-4); font-weight: 600; font-size: 14px; } .dmenu-b ul { list-style: none; } .dmenu-b li a { display: block; padding: 8px 0; min-height: 44px; font-size: 15px; } .drawer-cta { margin-top: var(--ls-space-6); } .site-header.reduced .hdr { justify-content: flex-start; } /* Blocks */ .blk { padding: var(--ls-space-20) 0; border-bottom: 1px solid var(--ls-border-subtle); } .blk.shade { background: var(--ls-surface-secondary); } .split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--ls-space-6) var(--ls-space-12); align-items: start; } .split + .split { margin-top: var(--ls-space-16); } .split-h { position: relative; } .split > * { min-width: 0; } /* Hero */ .hero { padding: var(--ls-space-16) 0 var(--ls-space-20); background: var(--ls-wash-hero), #fff; } .hero-statement-hero { padding: var(--ls-space-20) 0 var(--ls-space-24); } .hero-page-hero-reduced { padding: var(--ls-space-12) 0 var(--ls-space-12); } /* Clients: the credentials bar, directly below the homepage hero */ .clients { padding: var(--ls-space-10) 0; background: #fff; } .clients-in { display: flex; align-items: center; gap: var(--ls-space-10); flex-wrap: wrap; } .label-h { font-family: var(--ls-font-heading); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-text-secondary); } .logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ls-space-6) var(--ls-space-12); flex: 1 1 auto; } .logos img { height: 28px; width: auto; max-width: 120px; } /* Answer */ .answer { background: #fff; } .answer-b { border-top: 2px solid var(--ls-navy-700); padding-top: var(--ls-space-6); } .answer-b > p { font-size: var(--ls-type-intro); line-height: var(--ls-leading-intro); } /* Cards. The whole card is the link. */ .cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--ls-space-4); } .cards-3 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } .card { position: relative; background: #fff; border: 1px solid var(--ls-border-subtle); border-radius: var(--ls-radius-sm); padding: var(--ls-space-6); } .shade .card { background: #fff; } .card-t { font-size: 18px; line-height: 1.3; } .card-t a { color: var(--ls-text-primary); text-decoration: none; } .card.is-link .card-t a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ls-radius-sm); } .card.is-link:hover { border-color: var(--ls-navy-700); } .card.is-link:hover .card-t a { text-decoration: underline; } .card-b { margin-top: var(--ls-space-2); font-size: var(--ls-type-card-body); line-height: 22px; color: var(--ls-text-secondary); } .card-b a { position: relative; z-index: 1; } .card.wide { grid-column: 1 / -1; } .card-list { list-style: none; margin-top: var(--ls-space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 0 var(--ls-space-6); } .card-list li { padding: 8px 0; border-top: 1px solid var(--ls-border-subtle); font-size: 14px; line-height: 22px; color: var(--ls-text-secondary); } .card-list li a { font-weight: 600; } .rlinks { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--ls-space-4); } .rl { position: relative; border-top: 2px solid var(--ls-navy-700); padding: var(--ls-space-4) 0; } .rl-t a { font-weight: 600; text-decoration: none; color: var(--ls-text-primary); } .rl.is-link .rl-t a::after { content: ""; position: absolute; inset: 0; } .rl.is-link:hover .rl-t a { text-decoration: underline; } .rl-b { display: block; margin-top: 4px; font-size: 14px; color: var(--ls-text-secondary); } .ticks { list-style: none; } .ticks li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--ls-border-subtle); font-size: 17px; line-height: 27px; max-width: var(--ls-measure-reading); } .ticks li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 10px; height: 6px; border-left: 2px solid var(--ls-green-700); border-bottom: 2px solid var(--ls-green-700); transform: rotate(-45deg); } .steps { list-style: none; counter-reset: s; } .steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--ls-space-4); padding: var(--ls-space-5) 0; border-top: 1px solid var(--ls-border-subtle); } .step-n { color: var(--ls-number-accent); font-weight: 500; padding-top: 4px; } .step-b { font-size: 17px; line-height: 27px; max-width: var(--ls-measure-reading); } .step-t { font-weight: 600; } .figures { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--ls-space-4); } .fig { background: var(--ls-surface-evidence); border-radius: var(--ls-radius-sm); padding: var(--ls-space-6); } .fig-n { display: block; font-family: var(--ls-font-heading); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--ls-text-primary); } .fig-b { display: block; margin-top: var(--ls-space-3); font-size: 14px; line-height: 22px; color: var(--ls-text-secondary); } /* Tables */ .tbl-wrap { overflow-x: auto; margin-top: var(--ls-space-4); } .tbl { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; line-height: 23px; } .tbl th, .tbl td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--ls-border-subtle); } .tbl thead th { font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-text-secondary); font-weight: 500; border-bottom: 2px solid var(--ls-navy-700); } .tbl tbody th { font-weight: 600; width: 20%; } .blk[data-block="comparison-table"] .split { grid-template-columns: 1fr; } .kv { margin: 0; } .kv-r { display: grid; grid-template-columns: 2fr 3fr; gap: var(--ls-space-4); padding: 14px 0; border-top: 1px solid var(--ls-border-subtle); } .kv dt { font-weight: 600; } .kv dd { margin: 0; color: var(--ls-text-secondary); } /* Questions */ .faq { border-top: 1px solid var(--ls-border-subtle); } .qa { border-bottom: 1px solid var(--ls-border-subtle); } .qa summary { display: flex; justify-content: space-between; gap: var(--ls-space-6); align-items: center; padding: 18px 0; cursor: pointer; list-style: none; min-height: 44px; } .qa summary::-webkit-details-marker { display: none; } .q { font-size: 18px; line-height: 1.35; } .qa-i { flex: 0 0 auto; width: 14px; height: 14px; position: relative; } .qa-i::before, .qa-i::after { content: ""; position: absolute; background: var(--ls-number-accent); left: 0; top: 6px; width: 14px; height: 2px; } .qa-i::after { transform: rotate(90deg); } .qa[open] .qa-i::after { display: none; } .a { padding: 0 0 var(--ls-space-6); } .a p { font-size: 16px; line-height: 26px; } /* Call to action: navy band, orange button */ .cta { background: var(--ls-navy-700); border-bottom: 0; } .cta .h2 { color: #fff; } .cta-p { color: var(--ls-text-on-contrast) !important; } .cta-more { color: var(--ls-navy-400) !important; font-size: 16px !important; } .cta a:not(.btn) { color: #fff; } /* Article (T8) */ .article-meta { padding: var(--ls-space-6) 0; border-bottom: 1px solid var(--ls-border-subtle); } .meta-line { color: var(--ls-text-secondary); text-transform: none; letter-spacing: .02em; } .toc { position: sticky; top: 96px; } .toc ol { list-style: none; border-left: 2px solid var(--ls-border-subtle); } .toc li a { display: block; padding: 6px 0 6px 16px; font-size: 14px; line-height: 20px; color: var(--ls-text-secondary); text-decoration: none; } .toc li a:hover { color: var(--ls-text-primary); text-decoration: underline; } /* Filters (T9, T11) */ .filters { padding: var(--ls-space-8) 0; background: var(--ls-surface-secondary); } .filters-in { display: flex; flex-wrap: wrap; gap: var(--ls-space-4) var(--ls-space-8); align-items: end; } .search { display: flex; flex-direction: column; gap: 6px; flex: 0 1 360px; } .search-l { color: var(--ls-text-secondary); } .search input, .form input[type=text], .form input[type=email], .form select, .form textarea { font: inherit; font-size: 16px; min-height: var(--ls-control-height-touch); padding: 10px 12px; border: 1px solid var(--ls-border-strong); border-radius: var(--ls-radius-xs); background: #fff; color: var(--ls-text-primary); width: 100%; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font: inherit; font-size: 14px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ls-border-strong); background: #fff; color: var(--ls-text-primary); cursor: pointer; } .chip[aria-pressed="true"] { background: var(--ls-navy-700); color: #fff; border-color: var(--ls-navy-700); } .chip-n { margin-left: 4px; letter-spacing: 0; text-transform: none; } .grid-group + .grid-group { margin-top: var(--ls-space-16); } .grid-group > .h2 { margin-bottom: var(--ls-space-6); } [hidden] { display: none !important; } .years { display: flex; align-items: end; gap: 6px; height: 64px; } .yr { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 4px; height: 64px; min-width: 44px; border: 0; background: transparent; cursor: pointer; font: inherit; font-family: var(--ls-font-mono); font-size: 12px; color: var(--ls-text-secondary); } .yr i { display: block; width: 28px; background: var(--ls-navy-400); border-radius: 2px 2px 0 0; } .yr[aria-pressed="true"] i { background: var(--ls-navy-700); } .yr[aria-pressed="true"] { color: var(--ls-text-primary); } .post-rows { list-style: none; border-top: 2px solid var(--ls-navy-700); } .post { display: grid; grid-template-columns: 160px 1fr; gap: var(--ls-space-6); padding: 16px 0; border-bottom: 1px solid var(--ls-border-subtle); border-left: 3px solid var(--ls-navy-300); padding-left: 16px; } .post time { color: var(--ls-text-secondary); padding-top: 3px; } .post a { font-weight: 600; color: var(--ls-text-primary); text-decoration: none; font-size: 17px; line-height: 1.35; } .post a:hover { text-decoration: underline; } .pager { display: flex; gap: 8px; margin-top: var(--ls-space-6); flex-wrap: wrap; } .pager button { min-width: 44px; min-height: 44px; border: 1px solid var(--ls-border-strong); background: #fff; border-radius: var(--ls-radius-xs); cursor: pointer; font: inherit; } .pager button[aria-current="page"] { background: var(--ls-navy-700); color: #fff; } .linkbtn { font: inherit; background: none; border: 0; padding: 0; color: var(--ls-navy-700); text-decoration: underline; cursor: pointer; min-height: 44px; } .post-empty, .filter-empty { margin-top: var(--ls-space-6); } /* Form (T5) */ .form { display: grid; gap: var(--ls-space-5); max-width: 560px; } .field { display: grid; gap: 6px; } .field label { font-weight: 600; } .req { color: var(--ls-text-secondary); order: -1; justify-self: end; margin-bottom: -26px; } .help { font-size: 14px !important; line-height: 22px !important; color: var(--ls-text-secondary); } .consent { grid-template-columns: 24px 1fr; align-items: start; } .consent input { width: 20px; height: 20px; margin: 2px 0 0; } .consent label { font-weight: 400; } .form .btn { justify-self: start; border: 0; cursor: pointer; } .form-ok { font-weight: 600; color: var(--ls-green-900); } .field.err input, .field.err select, .field.err textarea { border-color: var(--ls-color-error); } /* Footer */ .site-footer { background: var(--ls-navy-700); color: #fff; padding: var(--ls-space-16) 0 var(--ls-space-10); border-top: 1px solid var(--ls-border-on-contrast); } .flogo img { height: 28px; width: auto; } .fcols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ls-space-6); margin-top: var(--ls-space-10); } @media (max-width: 1100px) { .fcols { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--ls-space-8); } } .fcol-h { color: var(--ls-navy-400); margin-bottom: var(--ls-space-3); } .fcol ul { list-style: none; } .fcol li a { display: block; padding: 4px 0; font-size: 14px; line-height: 20px; color: #fff; text-decoration: none; } .fcol li a:hover { text-decoration: underline; } .futil { margin-top: var(--ls-space-12); padding-top: var(--ls-space-6); border-top: 1px solid var(--ls-border-on-contrast); } .copy { font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-navy-400); } .site-footer.reduced { padding: var(--ls-space-8) 0; } /* Responsive */ @media (max-width: 1239px) { .primary, .hdr-cta { display: none; } .burger { display: flex; } } @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--ls-space-5); } .split-h:empty { display: none; } .blk { padding: var(--ls-space-12) 0; } .hero, .hero-statement-hero { padding: var(--ls-space-10) 0 var(--ls-space-12); } .h1, .hero-statement-hero .h1 { font-size: 34px; } .h2 { font-size: 26px; } .h3, .card-t, .q { font-size: 18px; } .lede, .answer-b > p { font-size: 18px; line-height: 28px; } .toc { position: static; } .post { grid-template-columns: 1fr; gap: 4px; } .kv-r { grid-template-columns: 1fr; gap: 4px; } .facts { font-size: 12px; gap: 2px 12px; } .facts li + li::before { content: none; } .clients-in { gap: var(--ls-space-5); } .logos { gap: var(--ls-space-5) var(--ls-space-8); } .logos img { height: 22px; } } /* ===================== 0.4.1 layout ===================== */ /* Facts bar on every page; larger 25 mark; separators stay in the text so a wrapped line still reads */ .facts-in { min-height: 52px; gap: var(--ls-space-5); } .mark25 { width: 62px; height: 40px; } .mark25 text { font-size: 36px; stroke-width: 1.2; } .facts { font-size: 14px; line-height: 20px; display: block; } .facts .f-sep { color: var(--ls-navy-500); } /* Numbered kicker with the orange rule, before each section heading */ .kicker { display: flex; align-items: center; gap: 12px; margin-bottom: var(--ls-space-5); } .k-n { font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .16em; color: var(--ls-number-accent); } .k-r { width: 28px; height: 2px; border-radius: 2px; background: var(--ls-accent); } .cta .k-r { background: var(--ls-accent); } /* Sections: heading and short intro split 5/7, content full width below */ .sec + .sec { margin-top: var(--ls-space-16); } .sec > .h2 { margin-bottom: var(--ls-space-6); } .sec-head { margin-bottom: var(--ls-space-10); } .sec-head .split-b > p { font-size: var(--ls-type-intro); line-height: var(--ls-leading-intro); } .full > * + * { margin-top: var(--ls-space-8); } .full > .h3.sub { margin-top: var(--ls-space-12); } .full > .h3.sub + * { margin-top: var(--ls-space-5); } .read { max-width: 72ch; } .read > p + p, .read p + p { margin-top: var(--ls-flow-copy); } .read p { font-size: var(--ls-type-body-large); line-height: var(--ls-leading-body-large); } .full .sublabel { margin-top: var(--ls-space-10) !important; } .cols { display: grid; gap: var(--ls-space-12); } .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: repeat(3, 1fr); } .h2-s { font-size: var(--ls-type-section); margin-bottom: var(--ls-space-5); } /* Cards by count, full width, equal height per row */ .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ls-space-5); } .cards-1 { grid-template-columns: minmax(0, 640px); } .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards-4, .cards-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { padding: var(--ls-space-6) var(--ls-space-6) var(--ls-space-8); display: flex; flex-direction: column; } .card-t { font-size: 19px; } .card-b { font-size: 15px; line-height: 24px; } .split-b .cards, .split-b .rlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rlinks { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rlinks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rlinks-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Steps as a strip of stages */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ls-navy-700); } .steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .steps li { display: block; padding: var(--ls-space-6) var(--ls-space-6) var(--ls-space-6) 0; border-top: 0; border-right: 1px solid var(--ls-border-subtle); } .steps li + li { padding-left: var(--ls-space-6); } .steps li:last-child { border-right: 0; } .step-n { display: block; margin-bottom: var(--ls-space-3); font-size: 13px; } .step-n::before { content: "0"; } .step-b { font-size: 15px; line-height: 24px; } .step-t { display: block; font-family: var(--ls-font-heading); font-weight: 600; font-size: 17px; line-height: 1.3; margin-bottom: 6px; } /* Lists: two columns when long */ .ticks.two { columns: 2; column-gap: var(--ls-space-12); } .ticks.two li { break-inside: avoid; } .ticks li { max-width: none; } /* Answer: one reading block with the orange rule */ .answer { padding: var(--ls-space-12) 0; } .answer-b { border-top: 0; border-left: 3px solid var(--ls-accent); padding: 4px 0 4px var(--ls-space-8); max-width: 80ch; } .answer-b > p { font-size: 21px; line-height: 33px; } /* Related: a row */ .related { padding: var(--ls-space-12) 0; } /* Pull quote */ .pull { margin: 0; padding: var(--ls-space-6) 0 var(--ls-space-6) var(--ls-space-8); border-left: 3px solid var(--ls-accent); max-width: 60ch; } .pull p { font-family: var(--ls-font-heading); font-weight: 600; font-size: 24px; line-height: 1.35; color: var(--ls-text-primary); } .pull + .read p { font-size: 15px; color: var(--ls-text-secondary); } /* Homepage hero with the Engine panel */ .hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--ls-space-12); align-items: center; } .engine-panel { margin: 0; background: #fff; border: 1px solid var(--ls-border-subtle); border-radius: var(--ls-radius-md); padding: var(--ls-space-6); box-shadow: var(--ls-shadow-overlay); } .ep-h { font-family: var(--ls-font-heading); font-weight: 700; font-size: 18px; padding-bottom: var(--ls-space-4); border-bottom: 1px solid var(--ls-border-subtle); } .ep-list { list-style: none; margin-top: var(--ls-space-4); position: relative; } .ep-list::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--ls-border-default); } .ep-s { position: relative; padding: 0 0 var(--ls-space-4) 26px; } .ep-dot { position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ls-navy-600); } .ep-dot.on { background: var(--ls-accent); border-color: var(--ls-accent); } .ep-g { font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-text-primary); font-weight: 500; } .ep-i { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--ls-text-secondary); } /* The Engine diagram */ .engine-diagram { margin: var(--ls-space-12) 0 0; padding: var(--ls-space-8); background: var(--ls-surface-evidence); border-radius: var(--ls-radius-md); } .ed-row { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: stretch; } .ed-box { background: #fff; border: 1px solid var(--ls-border-subtle); border-radius: var(--ls-radius-sm); padding: var(--ls-space-5); } .ed-h { font-family: var(--ls-font-heading); font-weight: 700; font-size: 18px; padding-bottom: var(--ls-space-3); border-bottom: 1px solid var(--ls-border-subtle); } .ed-box ol { list-style: none; margin-top: var(--ls-space-2); } .ed-box li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--ls-border-subtle); font-size: 14px; line-height: 20px; } .ed-box li:last-child { border-bottom: 0; } .ed-box li a { color: var(--ls-text-primary); text-decoration: none; } .ed-box li a:hover { text-decoration: underline; } .ed-n { font-family: var(--ls-font-mono); font-size: 12px; color: var(--ls-number-accent); min-width: 22px; padding-top: 1px; } .ed-arrow { align-self: center; justify-self: center; width: 24px; height: 2px; background: var(--ls-navy-700); position: relative; } .ed-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 8px solid var(--ls-navy-700); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .ed-return { margin: var(--ls-space-4) 16.5% 0; height: 34px; border: 1.5px dashed var(--ls-accent); border-top: 0; border-radius: 0 0 10px 10px; display: flex; align-items: flex-end; justify-content: center; } .ed-return span { transform: translateY(50%); background: var(--ls-surface-evidence); padding: 0 12px; font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ls-text-secondary); } /* Article contents stays in view */ .article .split-h { align-self: stretch; } /* Phone drawer: link and toggle on one row */ .dmenu { border-bottom: 1px solid var(--ls-border-subtle); } .dm-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; } .dm-a { font-weight: 600; color: var(--ls-text-primary); text-decoration: none; padding: 12px 0; } .dm-t { width: 44px; height: 44px; border: 0; background: transparent; position: relative; cursor: pointer; } .dm-t::after { content: ""; position: absolute; left: 17px; top: 15px; width: 8px; height: 8px; border-right: 1.5px solid var(--ls-text-secondary); border-bottom: 1.5px solid var(--ls-text-secondary); transform: rotate(45deg); } .dm-t[aria-expanded="true"]::after { transform: rotate(-135deg); top: 20px; } @media (max-width: 1100px) { .cards-4, .cards-8, .rlinks-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps-4, .steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps li, .steps li + li { padding: var(--ls-space-5) var(--ls-space-5) var(--ls-space-5) 0; border-right: 0; border-bottom: 1px solid var(--ls-border-subtle); } .hero-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .cards, .cards-2, .cards-4, .cards-8, .rlinks, .rlinks-2, .rlinks-4, .steps, .steps-2, .steps-4, .steps-5, .cols-2, .cols-3, .split-b .cards { grid-template-columns: 1fr; } .ticks.two { columns: 1; } .ed-row { grid-template-columns: 1fr; gap: 12px; } .ed-arrow { transform: rotate(90deg); } .ed-return { display: none; } .answer-b { padding-left: var(--ls-space-5); } .answer-b > p { font-size: 18px; line-height: 29px; } .facts-in { gap: var(--ls-space-3); } .mark25 { width: 48px; height: 32px; } .facts { font-size: 12.5px; line-height: 18px; } /* tables become labelled stacks */ .tbl, .tbl thead, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; min-width: 0; } .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tbl tr { padding: var(--ls-space-4) 0; border-bottom: 1px solid var(--ls-border-default); } .tbl tbody th { width: auto; padding: 0 0 8px; border: 0; } .tbl td { padding: 6px 0; border: 0; } .tbl td::before { content: attr(data-label); display: block; font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-text-secondary); margin-bottom: 2px; } } .sec-short { margin-bottom: 0; } .cols .h3.sub { margin: 0 0 var(--ls-space-4); } .full > .cols { margin-top: var(--ls-space-12); } #questions .split-h > .h2 { position: sticky; top: 96px; } #questions .split-h { align-self: stretch; } /* Illustration slots */ .media-row { display: grid; grid-template-columns: 7fr 5fr; gap: var(--ls-space-12); align-items: start; } .m-text .h2 { margin-bottom: var(--ls-space-6); } .m-fig { position: sticky; top: 96px; } .media-below { margin-top: var(--ls-space-12); } .hero .hero-grid { align-items: center; } .ph { margin: 0; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--ls-space-6); padding: var(--ls-space-6); border-radius: var(--ls-radius-md); border: 1px dashed var(--ls-navy-500); background-color: var(--ls-navy-100); background-image: radial-gradient(var(--ls-navy-300) 1px, transparent 1px); background-size: 16px 16px; } .ph-mark { width: 150px; height: 60px; } .ph-mark circle { fill: #fff; stroke: var(--ls-navy-600); stroke-width: 1.5; } .ph-mark circle:nth-of-type(2) { fill: var(--ls-accent); stroke: var(--ls-accent); } .ph-mark path { fill: none; stroke: var(--ls-navy-600); stroke-width: 1.5; stroke-dasharray: 3 3; } .ph figcaption { background: #fff; border-radius: var(--ls-radius-sm); padding: var(--ls-space-4); } .ph-l { display: block; font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-number-accent); } .ph-t { display: block; margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--ls-text-secondary); } .read .ph, .prose .ph { margin: var(--ls-space-6) 0; } .engine-panel { background: var(--ls-navy-100); box-shadow: none; border: 1px solid var(--ls-navy-300); } .ep-f { margin-top: var(--ls-space-2); padding-top: var(--ls-space-4); border-top: 1px solid var(--ls-border-subtle); font-family: var(--ls-font-mono); font-size: 12px; line-height: 18px; color: var(--ls-text-secondary); } .ep-f span { color: var(--ls-number-accent); margin-right: 6px; } .ed-h { display: flex; justify-content: space-between; align-items: baseline; } .ed-c { font-family: var(--ls-font-mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-text-secondary); } .m-fig .engine-diagram { margin: 0; padding: var(--ls-space-4); } .m-fig .ed-row { grid-template-columns: 1fr; gap: 10px; } .m-fig .ed-arrow { transform: rotate(90deg); } .m-fig .ed-return { display: none; } @media (max-width: 1100px) { .media-row { grid-template-columns: 1fr; } .m-fig { position: static; } } .m-rest { margin-top: var(--ls-space-8); } .m-rest .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-rest .cards-1 { grid-template-columns: minmax(0, 1fr); } @media (max-width: 860px) { .m-rest .cards { grid-template-columns: 1fr; } } /* ===================================================================================== 0.4.2: white space, card rows that fill, full-width clients, the moving Engine diagram, build-drawn illustrations, media players, the blog index rows and the ROAS calculator ===================================================================================== */ @keyframes ls-flow { 0% { offset-distance: 0%; opacity: 0 } 10% { opacity: 1 } 90% { opacity: 1 } 100% { offset-distance: 100%; opacity: 0 } } .ls-flow { animation: ls-flow 7s linear infinite; } @media (prefers-reduced-motion: reduce) { .ls-flow, .illus svg * { animation: none !important; } .ls-flow { opacity: 0; } } /* a heading stacks above a long intro; the intro keeps a reading measure */ .sec > .h2 + .intro, .sec > .h2 + .full { margin-top: var(--ls-space-6); } .read.intro p { font-size: var(--ls-type-intro); line-height: var(--ls-leading-intro); } .sec + .sec { margin-top: var(--ls-space-16); } .sec > .intro + .full { margin-top: var(--ls-space-10); } /* card rows always fill: a column count per card count, the last row stretches */ .fill { display: flex !important; flex-wrap: wrap; gap: var(--ls-space-5); } .fill > li { flex: 1 1 calc((100% - (var(--c) - 1) * var(--ls-space-5)) / var(--c)); min-width: 0; } .fill-1 { --c: 1; } .fill-2 { --c: 2; } .fill-3 { --c: 3; } .fill-4 { --c: 4; } .fill-1 > li { max-width: 760px; } @media (max-width: 1100px) { .fill-3, .fill-4 { --c: 2; } } @media (max-width: 700px) { .fill { --c: 1 !important; } .fill > li { flex-basis: 100%; } } /* text and illustration: centred against each other, no sticky figure */ .media-row { align-items: center; grid-template-columns: 6fr 5fr; } .m-fig { position: static; } .m-cards .cards { display: flex !important; flex-direction: column; gap: var(--ls-space-4); } .m-cards .cards > li { flex: none; max-width: none; } .m-text .h2 + .m-cards { margin-top: var(--ls-space-6); } .illus { margin: 0; } .illus svg { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; } .hero-grid .illus svg { max-width: 460px; } /* FAQ and form: heading above, content at a reading width */ .faq-col { max-width: 880px; margin-top: var(--ls-space-8); } .faq-col > p { max-width: var(--ls-measure-reading); margin-bottom: var(--ls-space-6); } .form-wrap { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 880px; } .form-b { margin-top: var(--ls-space-6); } /* clients: the full width */ .clients-in.wide { flex-direction: column; align-items: stretch; gap: var(--ls-space-6); } .clients-in.wide .logos { justify-content: space-between; gap: var(--ls-space-8) var(--ls-space-10); } .clients-in.wide .logos img { height: 44px; max-width: 170px; } @media (max-width: 860px) { .clients-in.wide .logos { justify-content: center; } .clients-in.wide .logos img { height: 30px; max-width: 120px; } } /* the Engine architecture diagram: SVG with movement on wider screens, the list on phones */ .engine-diagram.has-svg { padding: var(--ls-space-6); } .ed-svg { display: block; width: 100%; height: auto; } .ed-svg a text { text-decoration: none; } .ed-svg a:hover text, .ed-svg a:focus text { text-decoration: underline; fill: #0C2340; } .engine-diagram.has-svg .ed-list { display: none; } @media (max-width: 860px) { .engine-diagram.has-svg .ed-svg { display: none; } .engine-diagram.has-svg .ed-list { display: block; } } /* articles with fewer than three sections: one reading column */ .article-single .prose-single { max-width: 760px; margin: 0 auto; } .article-single .prose-single > * + * { margin-top: var(--ls-flow-copy); } .prose h3.h3, .prose .h3 { margin-top: var(--ls-space-8); } .prose ul, .prose ol { padding-left: 1.2em; } .prose img { max-width: 100%; } /* media players */ .media { margin: var(--ls-space-6) 0; } .media audio { width: 100%; } .media video { width: 100%; max-height: 520px; background: #0C2340; border-radius: var(--ls-radius-sm); } /* sources */ .sources { padding: var(--ls-space-8) 0; } .src-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--ls-border-subtle); padding-top: var(--ls-space-4); } .src-list ul { list-style: none; } .src-list li { font-family: var(--ls-font-mono); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; color: var(--ls-text-secondary); } .src-list a { color: var(--ls-text-secondary); } /* blog index rows */ .post { grid-template-columns: 170px 1fr; } .post-m { display: flex; flex-direction: column; gap: 6px; } .post-t { font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ls-text-secondary); } .post-h { grid-column: 2; grid-row: 1; font-size: 18px; line-height: 1.35; } .post-x { grid-column: 2; font-size: 15px; line-height: 1.55; color: var(--ls-text-secondary); margin-top: -12px; } .post.t-news, .post:has(.t-news) { border-left-color: var(--ls-navy-700); } .post:has(.t-opinion) { border-left-color: #8A6CA6; } .post:has(.t-guides) { border-left-color: #588370; } .post:has(.t-events) { border-left-color: #FAC16A; } @media (max-width: 700px) { .post-h, .post-x { grid-column: 1; grid-row: auto; } .post-x { margin-top: 0; } } /* T13 calculator */ .tool { padding: var(--ls-space-12) 0; background: var(--ls-surface-secondary); } .calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ls-space-10); background: #fff; border: 1px solid var(--ls-border-subtle); border-radius: var(--ls-radius-md); padding: var(--ls-space-8); } .calc .field { margin-top: var(--ls-space-5); } .calc .field label { display: block; font-weight: 600; } .calc input[type="number"] { width: 100%; max-width: 260px; min-height: 44px; padding: 8px 12px; font: inherit; border: 1px solid var(--ls-border-strong); border-radius: var(--ls-radius-sm); margin-top: 6px; } .calc .help, .c-note { font-size: 14px; color: var(--ls-text-secondary); margin-top: 6px; } .calc-out dl { margin-top: var(--ls-space-4); } .c-out { border-bottom: 1px solid var(--ls-border-subtle); padding: 12px 0; } .c-out dt { font-weight: 600; } .c-out output { display: block; font-family: var(--ls-font-heading); font-size: 32px; font-weight: 700; color: var(--ls-navy-700); margin: 4px 0; } .c-h { font-size: 14px; color: var(--ls-text-secondary); } .calc [data-calc-share] { margin-top: var(--ls-space-6); } .calc .consent { display: flex; gap: 10px; align-items: center; } @media (max-width: 860px) { .calc { grid-template-columns: 1fr; padding: var(--ls-space-5); } } /* 0.4.2 adjustments after the first look */ .fig-solo { margin: var(--ls-space-8) 0 0; } .fig-solo .ph, .fig-solo .illus { max-width: 560px; } .h2 + .read.intro { margin-top: var(--ls-space-6); } .read.intro + .engine-diagram { margin-top: var(--ls-space-10); } .ed-svg a { text-decoration: none; } .meta-line { font-size: 13px; line-height: 1.6; } .bold-line { font-weight: 700; } .post { grid-template-rows: auto 1fr; row-gap: 6px; } .post-m { grid-row: 1 / span 2; } .post-x { margin-top: 0; } .c-out dd { margin: 0; } .tool-intro { margin-bottom: var(--ls-space-8); } @media (max-width: 700px) { .post-m { grid-row: auto; } } .post-h { font-family: var(--ls-font-heading); font-weight: 600; font-size: 18px; line-height: 1.35; } .h-minor { font-size: 20px; } /* the text-and-illustration row stacks on narrow screens (after the 0.4.2 column rule, so it wins) */ @media (max-width: 1100px) { .media-row { grid-template-columns: minmax(0, 1fr); } .m-fig { max-width: 560px; } } .illus img { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; } .hero-grid .illus img { max-width: 460px; } /* ---- 0.5.0: homepage v2 (content-production/homepage-loop-2026-10-01/v2) ---- */ /* ---- proposal additions, built from v3.1 tokens only ---- */ .hero-in .h1 { font-size: 46px; line-height: 52px; } .ep-simple .ep-s { padding-bottom: var(--ls-space-6); } .ep-simple .ep-i { font-size: 15px; line-height: 22px; margin-top: 6px; } .ep-foot { margin-top: var(--ls-space-2); padding-top: var(--ls-space-4); border-top: 1px solid var(--ls-border-subtle); font-size: 13px; line-height: 20px; color: var(--ls-text-secondary); } .sec-sub { margin: var(--ls-space-3) 0 var(--ls-space-8); font-size: 18px; line-height: 28px; color: var(--ls-text-secondary); } .promise { margin-top: var(--ls-space-5); font-family: var(--ls-font-heading); font-weight: 700; font-size: 22px; line-height: 30px; color: var(--ls-navy-700); } .hero-in .clarifier { font-weight: 600; font-size: 24px; line-height: 32px; } .chip-ok { font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: 12px; background: var(--ls-green-100); color: var(--ls-green-1000); border: 1px solid var(--ls-green-700); } .stages { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--ls-space-6); margin-top: var(--ls-space-10); } .stages li { border-top: 2px solid var(--ls-navy-700); padding-top: var(--ls-space-4); } .stage-n { display: block; font-family: var(--ls-font-heading); font-weight: 700; font-size: 20px; color: var(--ls-navy-700); } .stages p { margin-top: 8px; font-size: 16px; line-height: 25px; color: var(--ls-text-secondary); } .tiles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--ls-space-6); margin-top: var(--ls-space-10); } .tiles li { background: #fff; border: 1px solid var(--ls-border-subtle); border-radius: var(--ls-radius-sm); padding: var(--ls-space-6); } .tiles .proof-b { display: block; margin-top: 6px; color: var(--ls-text-secondary); font-size: 15px; line-height: 22px; } .tiles li.held-tile { background: var(--ls-gray-200); border-color: var(--ls-gray-400); } .held-tile .held-l, .held-line .held-l { display: inline-block; margin-bottom: 8px; } .held-line { margin-top: var(--ls-space-4); padding: 12px 14px; background: var(--ls-gray-200); border-radius: var(--ls-radius-sm); } .ls-flow-2 { animation-delay: 3.5s; } @media (max-width: 860px) { .stages, .tiles { grid-template-columns: 1fr; } } .offer { margin-top: var(--ls-space-4); font-weight: 500; font-size: 17px; line-height: 26px; color: var(--ls-navy-1000); padding-left: 14px; border-left: 3px solid var(--ls-orange-700); max-width: var(--ls-measure-lede); } .held-card { background: var(--ls-gray-200) !important; } .held-card .held-l { align-self: flex-start; } .clarifier { margin-top: var(--ls-space-6); font-family: var(--ls-font-heading); font-weight: 600; font-size: 26px; line-height: 34px; color: var(--ls-navy-800); } @media (max-width: 860px) { .hero-in .h1 { font-size: 29px; line-height: 35px; letter-spacing: -0.02em; } .clarifier { font-size: 21px; line-height: 28px; } } .ep2 { position: relative; padding-right: calc(var(--ls-space-6) + 26px); } .ep2 .ep-list::before { background: var(--ls-navy-400); } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .chips li { font-size: 12px; line-height: 16px; padding: 4px 9px; border-radius: 12px; background: var(--ls-navy-100); color: var(--ls-navy-1000); border: 1px solid var(--ls-navy-300); } .ep2 .ep-i { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } .chip-held { font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: 12px; background: var(--ls-coral-100); color: var(--ls-coral-900); border: 1px solid var(--ls-coral-700); } .ep-run { position: absolute; left: calc(var(--ls-space-6) + 1px); top: 96px; width: 9px; height: 9px; border-radius: 50%; background: var(--ls-orange-700); animation: ep-down 7s linear infinite; } .ep-back { position: absolute; right: 14px; top: 96px; bottom: 74px; width: 0; border-right: 1.5px dashed var(--ls-orange-700); } .ep-back::before { content: ""; position: absolute; top: -6px; left: -5px; border-bottom: 8px solid var(--ls-orange-700); border-left: 4px solid transparent; border-right: 4px solid transparent; } .ep-back-dot { position: absolute; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ls-orange-700); animation: ep-up 7s linear infinite; } .ep-ret { margin-top: var(--ls-space-2); padding-top: var(--ls-space-4); border-top: 1px solid var(--ls-border-subtle); font-family: var(--ls-font-mono); font-size: 12px; line-height: 18px; color: var(--ls-text-secondary); display: flex; gap: 8px; } .ep-ret-i { color: var(--ls-orange-900); } @keyframes ep-down { 0% { transform: translateY(0); opacity: 0 } 5% { opacity: 1 } 45% { transform: translateY(var(--ep-h, 300px)); opacity: 1 } 50%,100% { transform: translateY(var(--ep-h, 300px)); opacity: 0 } } @keyframes ep-up { 0%,50% { bottom: 0; opacity: 0 } 55% { opacity: 1 } 95% { bottom: 100%; opacity: 1 } 100% { bottom: 100%; opacity: 0 } } .proof { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--ls-space-6); margin-top: var(--ls-space-10); } .proof li { border-top: 2px solid var(--ls-navy-700); padding-top: var(--ls-space-4); } .proof .proof-b { display: block; margin-top: 6px; color: var(--ls-text-secondary); font-size: 15px; line-height: 22px; } .proof li.held { border: 0; background: var(--ls-gray-200); border-radius: var(--ls-radius-sm); padding: var(--ls-space-4) var(--ls-space-5); } .held-l { display: inline-block; font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--ls-navy-700); color: #fff; padding: 2px 8px; border-radius: 3px; margin-bottom: 8px; } .proof li.held .fig-n { color: var(--ls-gray-800); } .linkrow { margin-top: var(--ls-space-8); display: flex; gap: var(--ls-space-8); flex-wrap: wrap; } .loop { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--ls-space-6); margin-top: var(--ls-space-10); counter-reset: s; } .loop li { position: relative; background: #fff; border: 1px solid var(--ls-border-subtle); border-radius: var(--ls-radius-sm); padding: var(--ls-space-6); } .loop li + li::before { content: ""; position: absolute; left: calc(-1 * var(--ls-space-6)); top: 44px; width: var(--ls-space-6); height: 2px; background: var(--ls-navy-700); } .loop-n { display:block; font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .16em; color: var(--ls-number-accent); margin-bottom: 6px; } .loop p { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--ls-text-secondary); } .loop-back { position: relative; margin: 0 12.5% 0; height: 40px; border: 1.5px dashed var(--ls-orange-700); border-top: 0; border-radius: 0 0 10px 10px; } .loop-back::before { content: ""; position: absolute; left: -5px; top: -2px; border-bottom: 8px solid var(--ls-orange-700); border-left: 4px solid transparent; border-right: 4px solid transparent; } .loop-l { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: #fff; padding: 0 12px; font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ls-text-secondary); white-space: nowrap; } .loop-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ls-orange-700); bottom: -5px; animation: loop-run 7s linear infinite; } @keyframes loop-run { 0% { right: 0; opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { right: 100%; opacity: 0 } } .band-engine { background: var(--ls-navy-100); border-top: 1px solid var(--ls-navy-300); padding: var(--ls-space-16) 0; } @media (prefers-reduced-motion: reduce) { .ep-run, .ep-back-dot, .loop-dot { animation: none; opacity: 0; } } @media (max-width: 1100px) { .loop { grid-template-columns: repeat(2, minmax(0,1fr)); } .loop li:nth-child(3)::before { display: none; } .loop-back { display: none; } } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .proof { grid-template-columns: 1fr; } } @media (max-width: 700px) { .loop { grid-template-columns: 1fr; } .loop li + li::before { display: none; } .loop-l { white-space: normal; } } /* ---- 0.5.3: the approved A-04 revision on homepage v2 ---- */ .hero-in .hp-proof { margin-top: var(--ls-space-4); font-family: var(--ls-font-mono); font-size: 13px; letter-spacing: .04em; color: var(--ls-text-secondary); } .card .hp-note { margin-top: 10px; font-size: 14px; line-height: 21px; } .card .hp-inlink { position: relative; z-index: 2; text-decoration: underline; } .hp-sub { margin-top: var(--ls-space-6); font-family: var(--ls-font-heading); font-size: 18px; color: var(--ls-navy-1000); } .proof.hp-results { margin-bottom: var(--ls-space-8); } .cta .cta-more { margin-top: var(--ls-space-4); } /* ---- 0.5.0: a hero paragraph after the lede keeps the lede's measure (articles with two opening paragraphs) ---- */ @media (max-width: 1099px) { .engine-diagram.has-svg .ed-svg { display: none; } .engine-diagram.has-svg .ed-list { display: block; } } .hero-in > p:not([class]) { max-width: var(--ls-measure-lede); margin-top: var(--ls-space-4); font-size: 18px; line-height: 28px; color: var(--ls-text-secondary); } /* ---- 0.5.1: the original 25 artwork (DL-229 option A) in the company-facts-bar ---- */ img.mark25 { width: auto !important; display: block; } /* ---- 0.5.0 preview chrome: review banner and held-claim tags. Not part of the deployable design. ---- */ .rv-page { background: var(--ls-purple-100); border-bottom: 1px solid var(--ls-purple-400); color: var(--ls-purple-1000); } .rv-page .wrap { padding-top: 12px; padding-bottom: 12px; font-size: 14px; line-height: 21px; } .rv-page b { font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-right: 8px; } .held-tag { display: inline-block; font-family: var(--ls-font-mono); font-size: 12px; line-height: 16px; letter-spacing: .04em; background: var(--ls-purple-100); color: var(--ls-purple-1000); border: 1px dashed var(--ls-purple-700); border-radius: 3px; padding: 1px 6px; margin: 0 4px; vertical-align: 1px; cursor: help; } .held-tag.held-end { opacity: .8; } /* ---- 0.5.3: the Services and Platform homepages (DL-267, DL-271, DL-279), scoped to those two pages ---- */ :is(body[data-page="A-09"], body[data-page="A-08"]) main .sh-hero .h1 { max-width: 24ch; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .proofline { margin-top: var(--ls-space-6); font-size: 14px; line-height: 22px; color: var(--ls-text-secondary); max-width: 70ch; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .card-x { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 14px; color: var(--ls-navy-800); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .ocs .card { display: flex; flex-direction: column; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .ocs .card-t { font-size: 17px; line-height: 24px; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .soon { color: var(--ls-text-secondary); font-weight: 500; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .soon-t { display: inline-block; margin-left: 8px; font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ls-purple-1000); background: var(--ls-purple-100); border: 1px dashed var(--ls-purple-700); border-radius: 3px; padding: 0 6px; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .bigstat { margin-top: var(--ls-space-8); border-top: 2px solid var(--ls-navy-700); padding-top: var(--ls-space-4); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .bigstat .fig-n, :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats .fig-n { display: block; font-family: var(--ls-font-heading); font-weight: 700; font-size: 40px; line-height: 46px; color: var(--ls-navy-1000); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .bigstat .proof-b, :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats .proof-b { display: block; margin-top: 6px; color: var(--ls-text-secondary); font-size: 15px; line-height: 22px; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .pillars { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--ls-space-6); margin-top: var(--ls-space-10); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .pillars li { border-top: 2px solid var(--ls-navy-700); padding-top: var(--ls-space-4); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .pillars p { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--ls-text-secondary); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow { margin-top: var(--ls-space-10); display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: center; gap: 0; background: var(--ls-navy-100); border-radius: var(--ls-radius-sm); padding: var(--ls-space-6); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow-col { list-style: none; display: grid; gap: 10px; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow-col li, :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow-eng { background: #fff; border: 1px solid var(--ls-border-subtle); border-radius: var(--ls-radius-sm); padding: 12px 14px; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow b { display: block; font-family: var(--ls-font-heading); font-size: 15px; color: var(--ls-navy-1000); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow span { display: block; font-size: 13px; line-height: 19px; color: var(--ls-text-secondary); margin-top: 2px; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow-eng { border: 2px solid var(--ls-navy-700); padding: 20px 16px; text-align: center; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow-arr { height: 2px; background: var(--ls-navy-700); margin: 0 8px; position: relative; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow-arr::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 9px solid var(--ls-navy-700); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .more-p { margin-top: var(--ls-space-8); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .more-p p + p { margin-top: var(--ls-space-4); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .techgrid > li:last-child { grid-column: span 2; } @media (max-width: 860px) { :is(body[data-page="A-09"], body[data-page="A-08"]) main .techgrid > li:last-child { grid-column: auto; } } :is(body[data-page="A-09"], body[data-page="A-08"]) main .checks { margin-top: var(--ls-space-8); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .ticks { margin: var(--ls-space-4) 0; padding-left: 20px; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .ticks li + li { margin-top: 6px; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .split-b p + p { margin-top: var(--ls-space-4); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--ls-space-6); margin-top: var(--ls-space-8); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats li { border-top: 2px solid var(--ls-navy-700); padding-top: var(--ls-space-4); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats .src { display: block; margin-top: 8px; font-family: var(--ls-font-mono); font-size: 12px; letter-spacing: .03em; color: var(--ls-text-secondary); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .linkrow { margin-top: var(--ls-space-8); display: flex; gap: var(--ls-space-6); flex-wrap: wrap; align-items: center; } @media (max-width: 1000px) { :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 860px) { :is(body[data-page="A-09"], body[data-page="A-08"]) main .pillars, :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats { grid-template-columns: 1fr; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow { grid-template-columns: 1fr; gap: 12px; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow-arr { width: 2px; height: 24px; margin: 0 auto; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .flow-arr::after { right: -5px; top: auto; bottom: -2px; border-top: 9px solid var(--ls-navy-700); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0; } :is(body[data-page="A-09"], body[data-page="A-08"]) main .bigstat .fig-n, :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats .fig-n { font-size: 34px; line-height: 40px; } } :is(body[data-page="A-09"], body[data-page="A-08"]) main .sec-tail { margin-top: var(--ls-space-6); max-width: 75ch; color: var(--ls-text-secondary); } :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats.stats-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 860px) { :is(body[data-page="A-09"], body[data-page="A-08"]) main .stats.stats-3 { grid-template-columns: 1fr; } }