/* help.css — the SINGLE CSS bundle the help-centre document head links (async, fingerprinted at deploy by the ?v= cache-bust). The dev bundler (bin/build-assets.php) inlines every @import below — recursively, since tokens/index.css itself imports the token atoms — into one flat public/assets/css/help.css. Cascade order is deliberate and MUST be preserved: 1. tokens — :root custom properties everything else resolves via var() 2. base — reset, then typography, then a11y, then (empty) fonts, then print 3. layout — page grid + section rhythm 4. pages — help-centre chrome + page styles (bold-design vocabulary, token-driven) The token + base + layout layers are COPIED VERBATIM from the marketing surface (the mature, shared bold-design system — not rewritten). Only the help-centre page CSS is bespoke. */ /* 1 — design tokens (single manifest; pulls in every token atom). */ /* >>> inlined: ./tokens/index.css */ /* row 35 — token manifest. One import pulls in every design-token atom (rows 21-34). Order: colour primitives first, then semantic colour (which may reference them), then type / space / radii / shadow / motion / z / layout. */ /* >>> inlined: ./color/navy.css */ /* row 21 — navy brand colour tokens. Source: live-build ccfs/style.css :root (--c-brand #003366, --c-brand-dark #002244, --c-brand-light #2b6ca8). Exposed under the BUILD-MAP --c-navy* names; the legacy --c-brand* aliases are kept so carried-over component CSS keeps resolving. */ :root { --c-navy: #003366; --c-navy-2: #16325c; --c-navy-dark: #002244; --c-navy-light: #2b6ca8; /* link/accent blue — sitewide refs had no fallback (collapsed to ink). Aliased to navy-light, NOT --c-green (which fails 4.5:1 text contrast on white). */ --c-blue: var(--c-navy-light); /* legacy aliases (source names) */ --c-brand: var(--c-navy); --c-brand-dark: var(--c-navy-dark); --c-brand-light: var(--c-navy-light); } /* >>> inlined: ./color/green.css */ /* row 22 — green accent colour token. Source: live-build ccfs/style.css :root (--c-accent #90cb22). Exposed under the BUILD-MAP --c-green name; the legacy --c-accent alias is kept so carried-over component CSS keeps resolving. */ :root { /* A11Y GUARD (report M5/M7): --c-green #90cb22 is contrast-safe ONLY as text/icon on DARK (navy) surfaces — ≈9:1 there, but only ≈1.95:1 on white (fails 4.5:1 text AND the 3:1 non-text/state-indicator bar). Do NOT use it for text, borders, or selected-state underlines on light backgrounds — use navy (--c-brand) for state cues on white. */ --c-green: #90cb22; /* AA-safe dark green for text/borders on light surfaces (--c-green itself fails on white). */ --c-green-dark: #5f8a16; /* legacy alias (source name) */ --c-accent: var(--c-green); } /* >>> inlined: ./color/neutral.css */ /* row 23 — neutral greys / white / ink scale. Source: live-build ccfs/style.css :root text + surface tokens. PREMIUM-UPLIFT (depth via surface separation): the page background moves off pure white to a very light cool grey (#f5f7fa) and cards/popovers stay pure white (--c-bg-elevated) — so every card, panel and elevated surface visibly LIFTS off the page with the new layered shadows, the way HSBC/Lloyds surfaces sit on a tonal canvas rather than melting into a white void. --c-bg-alt is deepened a hair (#eef1f6) so inset/zebra bands still read distinct from the new page grey. --c-border held at #e5e7eb (hairlines on white). The locked surface-tint tokens below are byte-identical (SurfaceTintTokensTest). */ :root { --c-ink: #111827; /* primary text */ --c-ink-muted: #374151; /* secondary text */ --c-ink-subtle: #6b7280; /* tertiary / captions */ --c-border: #e5e7eb; /* hairlines, dividers */ --c-white: #ffffff; --c-bg: #f5f7fa; /* page background — light tonal grey so white cards lift */ --c-bg-alt: #eef1f6; /* zebra / inset surfaces (deeper than page grey) */ --c-bg-elevated: #ffffff; /* cards, popovers — pure white, lifts off the page */ /* Intentional light SURFACE-TINTS — give heros/inset bands depth instead of flat solid slabs. This token CSS is the documented single place raw surface hex is allowed; every other leg references these by NAME (esp. the product jump-nav hover wash) rather than inlining color-mix. */ --c-surface-navy-tint: #eef3f8; /* cool inset band; ink 15.89:1, ink-muted 9.23:1, navy 11.30:1 */ --c-surface-green-tint: #f4f9e9; /* eco/green callout + jump-nav hover wash; ink 16.53:1, NAVY 11.75:1. Text on this MUST be navy/ink — green-dark is only 3.81:1 here. */ --c-border-strong: #8a8a8a; /* strong/emphasis border (R217) */ /* sitewide refs without fallback (collapsed to ink/initial) — alias to existing ink/surface scale */ --c-muted: var(--c-ink-subtle); /* muted text / captions */ --c-text-secondary: var(--c-ink-muted); /* secondary text */ --c-surface-muted: var(--c-bg-alt); /* inset / zebra surface */ /* legacy aliases (source names) */ --c-text: var(--c-ink); --c-text-muted: var(--c-ink-muted); --c-text-subtle: var(--c-ink-subtle); /* Compatibility aliases — carried-over component bundles (form-field.css, careers.css) target a --color-* / --radius-* namespace this system never defined; the un-fallback'd ones (--color-text, --color-surface) collapsed to invalid → janky inputs. Map them to the design tokens so forms and those components render consistently with everything else. */ --color-text: var(--c-ink); --color-text-muted: var(--c-ink-muted); --color-muted: var(--c-ink-subtle); --color-surface: var(--c-bg-elevated); --color-surface-alt: var(--c-bg-alt); /* WCAG 1.4.11: form control edges need ≥3:1 on white. #9aa6b8 = ~3.3:1 on #fff. Decorative hairlines / dividers → --c-border #e5e7eb (not a control edge). */ --color-border: #9aa6b8; --color-primary: var(--c-navy); --color-link: var(--c-navy); /* form-field.css state colours carried hardcoded hexes that didn't match the semantic tokens (alert.base.css), so form error/success rendered a different red/green than every other state surface. Map them to --c-error/--c-success and tint the bg from the same color-mix recipe the alert variants use, so all state surfaces agree. */ --color-error: var(--c-error); --color-success: var(--c-success); --color-error-bg: color-mix(in srgb, var(--c-error) 8%, var(--c-bg-elevated)); --color-success-bg: color-mix(in srgb, var(--c-success) 9%, var(--c-bg-elevated)); } /* >>> inlined: ./color/semantic.css */ /* row 24 — semantic state colours for alert callouts. Source: live-build ccfs/style.css :root (--c-success #16a34a, --c-warning #d97706, --c-danger #dc2626, --c-info #2563eb), wired into inc/core/ccfs-ui-components.php alerts. Exposed under --c-success/-warn/-error/-info per the BUILD-MAP row. */ :root { --c-success: #16a34a; --c-warn: #d97706; --c-error: #dc2626; --c-info: #2563eb; /* R213 AA text-contrast variants (6.82:1 and 6.78:1 on #f9fafb) */ --c-success-text: #166534; --c-warn-text: #92400e; /* legacy alias (source name) */ --c-warning: var(--c-warn); --c-danger: var(--c-error); } /* >>> inlined: ./type/family.css */ /* row 25 — font-family stacks. Source: critical-marketing.css:886-891 (R140/R150). Montserrat is primary sans; Inter is the self-hosted fallback (loaded after Montserrat in the sans stack). Mono used for money figures / tabular numerals. No CDN requests (UK-GDPR posture). */ :root { --font-sans: "Montserrat", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* >>> inlined: ./type/scale.css */ /* row 26 — type size ramp. Source: live-build ccfs/style.css :root (--text-xs .75rem .. --text-4xl 2.25rem). Exposed under the BUILD-MAP --fs-* names; legacy --text-* aliases kept. PREMIUM-UPLIFT (confident bank-like hierarchy): body sizes (xs/sm/base/lg) stay fixed and rem-based so reading copy is unchanged, but the display sizes (xl→4xl) become a fluid clamp() scale so page headings read large and assured on desktop without overflowing phones. The clamp floors keep small-screen sizes close to the prior values; the ceilings push H1/H2 up noticeably (4xl 36→44px, 3xl 30→34px) for a substantial, not-timid voice. Every consumer references these tokens by name, so the scale cascades. */ :root { --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: clamp(1.25rem, 1.18rem + 0.35vw, 1.4rem); /* 20 → 22.4px */ /* --fs-md: carried-over page bundles (content/legal/product/status .css) reference a mid heading step this ramp never defined; un-fallback'd, it collapsed and those navy H3 sub-headings silently inherited body size. Alias to --fs-lg (18px), the intended sub-heading step, matching how --text-*/--radius-* compat aliases are handled. */ --fs-md: var(--fs-lg); --fs-2xl: clamp(1.5rem, 1.38rem + 0.6vw, 1.75rem); /* 24 → 28px */ --fs-3xl: clamp(1.75rem, 1.55rem + 1vw, 2.125rem); /* 28 → 34px */ --fs-4xl: clamp(2.125rem, 1.7rem + 2.1vw, 2.75rem); /* 34 → 44px */ /* Display heading scale — fluid clamp() steps that sit AT/ABOVE --fs-4xl for hero marquee/eyebrow display type (landing H1, section heroes). Floors stay near the 4xl ceiling so phones don't overflow; ceilings push up for an assured, large-format voice. */ --fs-display-3: clamp(2.75rem, 2.2rem + 2.4vw, 3.5rem); /* 44 → 56px */ --fs-display-2: clamp(3.25rem, 2.5rem + 3.2vw, 4.5rem); /* 52 → 72px */ --fs-display-1: clamp(3.75rem, 2.8rem + 4.2vw, 5.5rem); /* 60 → 88px */ /* legacy aliases (source names) */ --text-xs: var(--fs-xs); --text-sm: var(--fs-sm); --text-base: var(--fs-base); --text-lg: var(--fs-lg); --text-xl: var(--fs-xl); --text-2xl: var(--fs-2xl); --text-3xl: var(--fs-3xl); --text-4xl: var(--fs-4xl); } /* >>> inlined: ./type/leading.css */ /* row 27 — line-height + reading-measure tokens. Source: live-build ccfs/style.css :root (--lh-tight 1.2, --lh-normal 1.5, --lh-loose 1.75). --measure-prose tracks the long-form legal reading column (.ccfs-simple-content caps body copy at 60ch in source; ~66ch comfortable max). PREMIUM-UPLIFT: --lh-tight nudged 1.2→1.15 so large display headings read tight and assured; --lh-loose pulled 1.75→1.6 so body prose lands in the confident 1.5-1.6 bank range (1.75 read slightly airy/uncommitted). --lh-normal unchanged at 1.5. */ :root { --lh-tight: 1.15; --lh-normal: 1.5; --lh-loose: 1.6; --measure-prose: 66ch; /* long-form / legal reading measure */ } /* >>> inlined: ./space/scale.css */ /* row 28 — spacing ramp. Source: live-build ccfs/style.css :root (--s-1 4px .. --s-12 256px). Exposed under the BUILD-MAP --sp-* names; legacy --s-* aliases kept for carried-over component CSS. Some late-ported page bundles still use the older --sp-100/200 naming; keep those aliases here so spacing does not collapse when those pages render. PREMIUM-UPLIFT (bank-grade generosity): the small UI steps (1-4) are unchanged so tight inline gaps / control padding stay crisp, but the mid-to-upper steps that drive card/panel padding, grid gaps and section rhythm are opened ~17-30%. This is the single highest-leverage fix for the "cramped" complaint — every .section, .container, card and grid resolves its breathing room from these tokens, so the change cascades site-wide without per-page edits. --sp-5 24→28, --sp-6 32→40, --sp-7 48→60, --sp-8 64→80, --sp-9 96→120. */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: clamp(20px, 1.1rem + 1.1vw, 28px); --sp-6: clamp(26px, 1.3rem + 2vw, 40px); --sp-7: clamp(34px, 1.4rem + 3.4vw, 60px); --sp-8: clamp(44px, 1.8rem + 5vw, 80px); --sp-9: clamp(60px, 2.4rem + 8vw, 120px); --sp-10: 160px; --sp-11: 208px; --sp-12: 256px; /* legacy aliases (source names) */ --s-1: var(--sp-1); --s-2: var(--sp-2); --s-3: var(--sp-3); --s-4: var(--sp-4); --s-5: var(--sp-5); --s-6: var(--sp-6); --s-7: var(--sp-7); --s-8: var(--sp-8); --s-9: var(--sp-9); --s-10: var(--sp-10); --s-11: var(--sp-11); --s-12: var(--sp-12); /* legacy step aliases (carried-over page bundles) */ --sp-100: var(--sp-1); --sp-150: var(--sp-2); --sp-200: var(--sp-2); --sp-250: var(--sp-3); --sp-300: var(--sp-3); --sp-350: var(--sp-4); --sp-400: var(--sp-4); --sp-500: var(--sp-5); --sp-600: var(--sp-6); --sp-700: var(--sp-7); --sp-800: var(--sp-8); } /* >>> inlined: ./radii/scale.css */ /* row 29 — border-radius tokens. Source: live-build ccfs/style.css :root (--r-sm 4px, --r-md 8px, --r-lg 16px, --r-full 9999px). PREMIUM-UPLIFT (restrained, not bubbly): banks read confident with modest corners. --r-md held at 8px (the card/button workhorse); --r-lg pulled 16→12px so large panels and cards stop looking soft/consumer-app and read composed. --r-sm/--r-full unchanged. */ :root { --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px; /* compatibility aliases — carried-over bundles (form-field.css, careers.css, simple-view-toggle.css) reference the --radius-* namespace. */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); } /* >>> inlined: ./radii/bevel.css */ /* row 29b — bevel-radius alias layer (shared survey token system). Imported right after radii/scale.css so curvature reads from ONE place and the skeuomorphic survey can speak in bevel terms while keeping the restrained 8/12px bank feel (--r-sm 4 / --r-md 8 / --r-lg 12 / --r-full 9999). No new curvature values. */ :root { --skeu-bevel-sm: var(--r-sm); --skeu-bevel: var(--r-md); --skeu-bevel-lg: var(--r-lg); --skeu-bevel-pill: var(--r-full); } /* >>> inlined: ./shadow/scale.css */ /* row 30 — elevation shadow tokens. Source: live-build ccfs/style.css :root (--shadow-sm/-md/-lg). PREMIUM-UPLIFT (layered depth): single flat drop-shadows replaced with TWO-LAYER shadows — a crisp 1px contact shadow plus a softer ambient diffusion — so cards lift off the new light-grey page (neutral.css --c-bg) with believable depth instead of a flat smudge. Tuned on a slate-blue tint (15,23,42) to read neutral-cool, not muddy. --shadow-xs added for the slimmest chrome (sticky header / notice bar) hairline lift. */ :root { --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05); --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .06); --shadow-md: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .07); --shadow-lg: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 20px rgba(15, 23, 42, .09); } /* >>> inlined: ./shadow/skeu.css */ /* row 30b — SKEUOMORPHIC elevation + inset vocabulary (shared survey token system). Imported immediately AFTER shadow/scale.css and BEFORE shadow/focus.css so it layers on the existing --shadow-sm/-md/-lg scale and never touches the focus ring. Tuned on the SAME slate-blue tint (15,23,42) the scale uses → reads cohesive with --shadow-sm/-md/-lg (cards lift off the light-grey page, neutral.css --c-bg #f5f7fa). Adds a 1px white top-edge bevel (gloss) to raised surfaces + tactile pressed/inset wells + brand CTA chrome derived from --c-navy / --c-green. Modern, restrained skeuomorphism — NOT gaudy. Highlights lighten only the TOP 1px (no text-contrast hit). Affordance RULE: depth never replaces the non-shadow cue (border/weight/colour) and never lands on :focus — focus keeps --shadow-focus (shadow/focus.css) untouched. */ :root { /* Raised surfaces (cards, panels, buttons at rest) — crisp top-edge gloss + a LAYERED ambient drop (contact + mid + soft spread) for real tactile depth. */ --skeu-highlight: inset 0 1px 0 rgba(255,255,255,.6); /* top bevel gloss on light surfaces */ --skeu-highlight-strong: inset 0 1px 0 rgba(255,255,255,.8); /* white cards / secondary btn */ /* TURN-DOWN PASS (2026-06-19): the depth pass read too heavy — softened all ambient layers ~40% (kept the 3-layer structure + monotonic ladder, just lighter). Skeuo character stays; shading is restrained. Still NEUTRAL slate — no colored glows. */ --skeu-shadow-raised: var(--skeu-highlight), 0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.05); --skeu-shadow-raised-lg: var(--skeu-highlight), 0 2px 4px rgba(15,23,42,.05), 0 10px 22px rgba(15,23,42,.07); /* Hover = lift one notch (pair with transform: translateY(-1px/-2px) the components already use). Blur/offset deliberately EXCEED --skeu-shadow-raised-lg so a large card on raised-lg genuinely lifts on hover instead of shrinking its shadow — keeps the elevation ladder monotonic. */ --skeu-shadow-hover: var(--skeu-highlight-strong), 0 2px 6px rgba(15,23,42,.06), 0 12px 26px rgba(15,23,42,.08); /* Pressed (:active) — collapse the lift to a deep inner press; affordance pairs with translateY(0). */ --skeu-shadow-pressed: inset 0 2px 4px rgba(15,23,42,.16), inset 0 1px 2px rgba(15,23,42,.10); /* Canonical press for DARK surfaces (navy/green CTAs) — a darker inset than the light --skeu-shadow-pressed so a pressed primary doesn't get a pale slate well that clashes with its gradient. */ --skeu-shadow-pressed-navy: inset 0 2px 4px rgba(0,0,0,.22), inset 0 1px 2px rgba(0,0,0,.14); --skeu-shadow-cta-navy-active: var(--skeu-shadow-pressed-navy); --skeu-shadow-cta-green-active: var(--skeu-shadow-pressed-navy); --skeu-grad-navy-active: linear-gradient(180deg, var(--c-navy-dark) 0%, var(--c-navy-dark) 100%); /* Inset wells (inputs, sliders track, readout panels) — a real recessed well, not a hairline. */ --skeu-shadow-inset: inset 0 1px 3px rgba(15,23,42,.10), inset 0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1px rgba(15,23,42,.02); --skeu-shadow-inset-deep: inset 0 2px 5px rgba(15,23,42,.13), inset 0 1px 2px rgba(15,23,42,.09); /* Navy primary CTA chrome — gradient + bevel + brand glow, all derived from --c-navy. */ --skeu-grad-navy: linear-gradient(180deg, color-mix(in srgb, var(--c-navy) 84%, #fff) 0%, var(--c-navy) 46%, var(--c-navy-dark) 100%); --skeu-grad-navy-hover: linear-gradient(180deg, color-mix(in srgb, var(--c-navy) 92%, #fff) 0%, var(--c-navy-dark) 100%); --skeu-shadow-cta-navy: inset 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.09); --skeu-shadow-cta-navy-hover: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 4px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.11); /* Green CTA chrome (dark navy bands) — derived from --c-green. */ --skeu-grad-green: linear-gradient(180deg, color-mix(in srgb, var(--c-green) 76%, #fff) 0%, var(--c-green) 50%, color-mix(in srgb, var(--c-green) 86%, #000) 100%); --skeu-grad-green-hover: linear-gradient(180deg, color-mix(in srgb, var(--c-green) 84%, #fff) 0%, color-mix(in srgb, var(--c-green) 90%, #000) 100%); --skeu-shadow-cta-green: inset 0 1px 0 rgba(255,255,255,.42), 0 1px 2px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.09); --skeu-shadow-cta-green-hover: inset 0 1px 0 rgba(255,255,255,.46), 0 2px 4px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.11); /* Secondary (white) CTA gradient — references the locked navy-tint token, not raw hex. */ --skeu-grad-surface: linear-gradient(180deg, var(--c-white) 0%, color-mix(in srgb, var(--c-surface-navy-tint) 60%, var(--c-white)) 100%); --skeu-grad-surface-hover: linear-gradient(180deg, var(--c-surface-navy-tint) 0%, color-mix(in srgb, var(--c-surface-navy-tint) 70%, var(--c-navy)) 100%); --skeu-shadow-cta-surface: var(--skeu-highlight-strong), 0 1px 2px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.07); --skeu-shadow-cta-surface-hover: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 4px rgba(15,23,42,.10), 0 6px 14px rgba(15,23,42,.09); /* Sticky-header / floating-FAB / dropdown chrome. */ --skeu-shadow-chrome: 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(15,23,42,.06), 0 6px 14px rgba(15,23,42,.07); /* Hover lift for INTERACTIVE chrome (FAB, dropdown trigger) — one notch up from --skeu-shadow-chrome. */ --skeu-shadow-chrome-hover: 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(15,23,42,.08), 0 10px 22px rgba(15,23,42,.10); /* Detached floating panels (dropdown, drawer sheet, search-suggest). Blur EXCEEDS raised-lg so a float panel never reads flatter than the in-flow cards beside it (monotonic ladder). */ --skeu-shadow-float: 0 2px 8px rgba(15,23,42,.07), 0 14px 30px rgba(15,23,42,.10); /* Single source of truth for the full-bleed navy CTA bands (.home-hero / .home-calc / .home-final) — replaces the raw #013b73 hex that was duplicated 3x at inconsistent angles/stop-counts. */ --skeu-grad-navy-band: linear-gradient(160deg, color-mix(in srgb, var(--c-navy) 88%, #fff) 0%, var(--c-navy) 60%, var(--c-navy-dark) 100%); } /* NON-DESKTOP TURN-DOWN (owner directive 2026-06-20: "side shadows too heavy esp mobile"). The wide raised-lg AMBIENT blur (0 10px 22px) pools on the left/right edges of stacked cards and reads as a grey wash. Cut the ambient blur + offset ~60% (keep the top-edge gloss + a tight contact shadow) so cards still lift but never shade the page. BREAKPOINT: applies to EVERYTHING below the desktop layout (<= 1023.98px) — phones AND tablets AND narrow laptop windows — not just <=640px. (The earlier 640px cap missed the 641–1023px range, where the page still reads heavy: the owner saw old shadows persist at exactly that width even though the menu/button rules — which key off the 1024px desktop breakpoint — had already changed.) Desktop (>= 1024px) keeps the bold at-rest lift. Token-level override → every component inherits it with ZERO per-component edits. */ @media (max-width: 1023.98px) { :root { --skeu-shadow-raised: var(--skeu-highlight), 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.04); --skeu-shadow-raised-lg: var(--skeu-highlight), 0 1px 3px rgba(15,23,42,.05), 0 3px 8px rgba(15,23,42,.05); --skeu-shadow-hover: var(--skeu-highlight-strong), 0 1px 3px rgba(15,23,42,.05), 0 4px 10px rgba(15,23,42,.06); --skeu-shadow-float: 0 1px 4px rgba(15,23,42,.06), 0 6px 16px rgba(15,23,42,.07); --skeu-shadow-chrome: 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(15,23,42,.05), 0 3px 8px rgba(15,23,42,.05); } } /* Dark token values — the site has NO real dark THEME (light surfaces throughout), but an OS in dark mode still triggers this block and repaints the shadow tokens. The original dark drops (0 18px 40px at .6 opacity) were far heavier than the light set and, layered under a still-LIGHT page, read as a heavy black wash — the owner's "skeuo still heavy" was an OS-dark-mode artefact. Dialled back to match the (restrained) light weight: smaller blur/offset, lower opacity. The mobile turn-down above already covers <=1023.98px in light mode; these lighter dark drops keep dark mode tidy at every width too. */ @media (prefers-color-scheme: dark) { :root { --skeu-highlight: inset 0 1px 0 rgba(255,255,255,.08); --skeu-highlight-strong: inset 0 1px 0 rgba(255,255,255,.12); --skeu-shadow-raised: var(--skeu-highlight), 0 1px 2px rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.38); --skeu-shadow-raised-lg: var(--skeu-highlight), 0 1px 3px rgba(0,0,0,.42), 0 5px 12px rgba(0,0,0,.4); --skeu-shadow-hover: var(--skeu-highlight-strong), 0 2px 6px rgba(0,0,0,.42), 0 7px 16px rgba(0,0,0,.45); --skeu-shadow-inset: inset 0 1px 2px rgba(0,0,0,.45); --skeu-shadow-inset-deep: inset 0 2px 5px rgba(0,0,0,.5); --skeu-shadow-chrome: 0 1px 3px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.4); } } /* >>> inlined: ./shadow/focus.css */ /* row 31 — focus-ring token (the visible focus indicator — never removed). Source: live-build ccfs/style.css :root (--shadow-focus). OPAQUE navy ring so the focused/unfocused delta clears WCAG 2.2 SC 2.4.11 (≥3:1) on white surfaces — the prior 35%-alpha tint blended to ≈1.64:1 and failed (A11Y H1). #2b6ca8 == rgb(43,108,168) at full opacity. Dark-band buttons keep their white-ring override (--shadow-focus-inverse). */ :root { --shadow-focus: 0 0 0 3px #2b6ca8; /* Inverse (white) focus ring for buttons on navy bands, where the navy --shadow-focus is near-invisible. WCAG 2.4.11 override used by home-hero/calc/final + product-cta CTAs — one source of truth so a future ring tweak changes both override sites together. */ --shadow-focus-inverse: 0 0 0 3px rgba(255, 255, 255, .65); } /* >>> inlined: ./motion/duration.css */ /* row 32 — motion duration + easing tokens. Source: live-build ccfs/style.css :root (--dur-fast 120ms, --dur-normal 220ms, --dur-slow 400ms, --ease-out, --ease-in-out). Under prefers-reduced-motion the durations collapse to ~1ms (mirrors the source @media block) so transitions that reference these tokens become effectively instant for motion-averse users. */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-normal: 220ms; --dur-slow: 400ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-normal: 1ms; --dur-slow: 1ms; } } /* >>> inlined: ./z/layers.css */ /* row 33 — z-index layering scale (header / drawer / overlay / modal / toast). Source: live-build ccfs/style.css :root (--z-base 1 .. --z-toast 1500). */ :root { --z-base: 1; --z-sticky: 100; /* sticky header */ --z-overlay: 500; /* drawer / scrim */ --z-modal: 1000; /* dialogs */ --z-toast: 1500; /* transient notifications (top-most) */ } /* >>> inlined: ./layout/breakpoints.css */ /* row 34 — layout breakpoint + container tokens. Breakpoints: 390 (phone) / 768 (tablet) / 1024 (laptop) / 1440 (wide), per the BUILD-MAP row. Container widths from live-build ccfs/style.css :root (--container-narrow 640px, --container-default 960px, --container-wide 1200px, --container-max 1440px). NB custom properties cannot drive @media (min-width: var(--bp-*)) queries — these tokens are the single source of truth for the pixel values; component/layout CSS restates the literal in its @media prelude and references --bp-* only in comments. */ :root { --bp-phone: 390px; --bp-tablet: 768px; --bp-laptop: 1024px; --bp-wide: 1440px; --container-narrow: 640px; --container-default: 960px; /* Widened 1200→1320 (owner: content sat in a narrow column with big dead margins on desktop, read as "cut off / not resizing / doesn't fit tight"). 1320 fills wide screens noticeably more while keeping body line-length readable. */ --container-wide: 1320px; --container-max: 1440px; } /* 2 — base layer. */ /* >>> inlined: ./base/reset.css */ /* base/reset.css — row 36 * Modern, minimal reset. Border-box everywhere, no UA margin leak, predictable * media/form defaults. Structural-only: the values here are 0, 100%, none and * keyword inherits — not design tokens — so no raw hex/px lives outside the * token files. Depends on tokens/index.css for the custom properties used by * the typography/a11y layers that load after it. */ *, *::before, *::after { box-sizing: border-box; } /* No UA margin leak — every element starts flush; spacing is opt-in. */ * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; } body { min-height: 100vh; min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Media defaults — block-level, never overflow, vertical rhythm preserved. */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Form controls inherit typography rather than UA defaults. */ input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } /* Motion baseline — a single tasteful transition for the interactive affordances * that don't already define their own (bare anchors / buttons). Components that set * a transition (button.base.css, link/text-link.css, …) load AFTER this in the * cascade and carry higher specificity, so they win; this only fills the gap so a * link or button with no component rule still eases its colour/background/shadow on * hover/focus instead of snapping. Uses the shared motion tokens; the reduced-motion * block below collapses --dur-* (and any transition referencing it) to ~instant. */ a, button { transition: color var(--dur-normal) var(--ease-out), background-color var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); } /* Avoid text overflows on long words / URLs. */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Lists used as navigation/structure carry no UA bullets or indent. */ ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } /* Anchors and table cells behave predictably. */ a { color: inherit; text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; } /* Honour reduced-motion at the reset layer too: collapse all animation. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* >>> inlined: ./base/typography.css */ /* base/typography.css — row 37 * Base element type, fully token-driven. Every size/leading/colour/weight here * is a var(--token) declared in tokens/* (loaded via tokens/index.css). No raw * hex/px lives in this file. Mirrors the theme's type intent: Montserrat sans * throughout, tight leading + slight negative tracking on display headings, * comfortable body leading for reading. */ html { font-family: var(--font-sans); font-size: 100%; /* respect the user's root size; the scale is rem-based */ line-height: var(--lh-normal); color: var(--c-text); background-color: var(--c-bg); } body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 400; line-height: var(--lh-normal); color: var(--c-text); } /* Display headings — Montserrat, tight leading. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); line-height: var(--lh-tight); letter-spacing: -0.018em; /* premium-uplift: tighter negative tracking so large headings read confident + bank-like (was -0.011em) */ color: var(--c-navy); /* brand-navy headings vs ink body — restores hierarchy (was flat ink-on-ink) */ text-wrap: balance; /* even multi-line heading wrap; degrades gracefully where unsupported */ /* Vertical rhythm: a tighter space BELOW every heading binds it to the content it introduces; a generous space ABOVE (scaled by level, in the per-element rules below) separates it from the preceding block. The reset zeroes all UA margins, so this base layer is what gives every page its rhythm — no per-page one-offs needed. */ margin-block-end: var(--sp-4); } /* Per-element size/weight + space-above, scaled by level so the hierarchy reads through whitespace as well as size: larger headings get more air above. */ h1 { font-size: var(--text-4xl); font-weight: 700; margin-block-start: var(--sp-8); } h2 { font-size: var(--text-3xl); font-weight: 700; margin-block-start: var(--sp-7); } h3 { font-size: var(--text-2xl); font-weight: 600; margin-block-start: var(--sp-6); } h4 { font-size: var(--text-xl); font-weight: 600; margin-block-start: var(--sp-5); } h5 { font-size: var(--text-lg); font-weight: 600; margin-block-start: var(--sp-5); } h6 { font-size: var(--text-base); font-weight: 600; margin-block-start: var(--sp-5); } /* Body copy — comfortable measure and rhythm. A consistent space below every paragraph is the single biggest readability win for prose; the reset stripped the UA default, so restore it here at the base layer. */ p { font-size: var(--text-base); line-height: var(--lh-loose); color: var(--c-text); margin-block-end: var(--sp-4); } /* Rhythm guards — keep the new margins from opening doubled or unwanted gaps: - a leading heading/paragraph must not push its container open (cards, bands, prose columns start flush at the top); - a heading or paragraph that is the LAST child must not add a trailing gap; - stacked headings (e.g. a kicker + title pair, or a heading directly after another) collapse the large space-above to a tight, deliberate step; - a heading immediately after a paragraph keeps its full space-above (the default) so new subsections breathe. */ h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child { margin-block-start: 0; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child { margin-block-end: 0; } :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--sp-2); } small { font-size: var(--text-sm); } strong, b { font-weight: 700; } /* Inline code / monospace figures use the mono token. */ code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--text-sm); } /* >>> inlined: ./base/a11y.css */ /* base/a11y.css — row 38 * Accessibility primitives: a skip-link that is hidden until focused, a global * :focus-visible ring driven by --shadow-focus (the focus ring is NEVER * removed), and an .sr-only utility for screen-reader-only text. Token-driven: * colours/spacing/radii/z come from tokens/* (via tokens/index.css); the only * literals are the standard sr-only clip primitives (1px clip rect), which are * structural, not design tokens. Depends on tokens/shadow/focus.css (row 31). */ /* Skip-link — off-screen until it receives focus, then snaps into the top-left * so a keyboard user can jump straight to the main content. Mirrors header.php * `