/* ========================================================================= Funding Xperts — Design Tokens ------------------------------------------------------------------------- Every colour, spacing and radius value used across the theme is defined here as a CSS custom property and referenced everywhere else (buttons, links, header, footer, focus states, forms). Never hard-code a colour in component CSS — add or reuse a token instead. v1.1 — 2 Sep 2026 The colour values below are no longer estimates. They were SAMPLED from the live production theme (wp-content/themes/funding/inc/assets/css/ main-style.css) and from the master logo SVG. See brand-tokens.md for the source of each value, its frequency of use on the live site, and the full WCAG contrast audit. THE ONE RULE THAT SHAPES EVERYTHING: --fx-color-brand-cyan on white measures 1.95:1. That fails WCAG 2.2 AA for text (needs 4.5:1) and fails it even for UI borders (needs 3:1). So the brand cyan is used as a FILL with navy text on top (6.43:1), never as ink or as a border on a white ground. Navy carries all text work (12.52:1). Brief §9 requires exactly this: keep the palette, change the colour's job. ========================================================================= */ :root { /* ----------------------------------------------------------------- Brand — sampled, verified. Do not "tidy" these values. ----------------------------------------------------------------- */ --fx-color-brand-cyan: #00CCE7; /* dominant brand colour, 41 uses on live site */ --fx-color-brand-cyan-deep: #0097E8; /* far stop of the live hero gradient */ --fx-color-brand-aqua: #8CEAEA; /* pale aqua panel backgrounds, 10 uses */ --fx-color-brand-navy: #18335F; /* deep navy — footer, dark bands, 11 uses */ --fx-color-logo-cyan: #4DC0EF; /* the logo mark's own cyan — DISTINCT from brand-cyan. Keep separate; do not unify. */ /* ----------------------------------------------------------------- Semantic roles — what the brand colours actually do ----------------------------------------------------------------- */ --fx-color-primary: var(--fx-color-brand-cyan); /* button FILLS only */ --fx-color-primary-hover: var(--fx-color-brand-aqua); /* lighter on hover, ink stays navy */ --fx-color-on-primary: var(--fx-color-brand-navy); /* text ON a cyan fill — 6.43:1 */ --fx-color-secondary: var(--fx-color-brand-navy); /* outline buttons, borders */ --fx-color-secondary-hover: #0F2140; --fx-color-heading: var(--fx-color-brand-navy); --fx-color-link: var(--fx-color-brand-navy); --fx-color-link-hover: #0F2140; /* ----------------------------------------------------------------- Text ----------------------------------------------------------------- */ --fx-color-text: #16233A; /* near-black, biased navy so it sits with the brand */ --fx-color-text-muted: #55637A; /* 6.3:1 on white — passes AA at body size */ --fx-color-text-faint: #8794A8; /* large text / non-essential labels ONLY */ --fx-color-text-on-dark: #E4ECF8; --fx-color-text-on-dark-soft: #CBD9EC; /* secondary copy on a navy ground */ --fx-color-text-on-dark-muted: #B4C6E0; /* body copy on the darkest band */ --fx-color-label-on-dark: #8FA6C6; /* mono labels on a dark ground */ --fx-color-on-brand-muted: #12406A; /* supporting text on the cyan band */ --fx-color-success-ink: #0C5231; /* text inside a success panel */ --fx-color-error-ink: #7E211A; /* text inside an error panel */ /* ----------------------------------------------------------------- Surfaces ----------------------------------------------------------------- */ --fx-color-bg: #ffffff; --fx-color-bg-alt: #F2F6FA; /* cool light section background */ --fx-color-bg-tint: #E8FAFB; /* pale aqua wash, derived from brand aqua */ --fx-color-bg-dark: var(--fx-color-brand-navy); --fx-color-bg-darker: #0F2140; /* footer / platform band */ /* ----------------------------------------------------------------- Structure ----------------------------------------------------------------- */ --fx-color-border: #DCE5EF; --fx-color-border-strong: #C2D0E0; --fx-color-border-on-dark: rgba(140, 234, 234, 0.22); /* ----------------------------------------------------------------- Status ----------------------------------------------------------------- */ --fx-color-success: #137A46; --fx-color-success-bg: #E9F6EF; --fx-color-success-border: #B9E2CC; --fx-color-error: #A32A20; --fx-color-error-bg: #FBEFEE; --fx-color-error-border: #EFC9C5; --fx-color-notice: #B7791F; /* amber — unresolved TODO markers in the UI */ --fx-color-notice-bg: #FDF6E7; --fx-color-notice-border: #F0DEB4; /* ----------------------------------------------------------------- Accessibility ----------------------------------------------------------------- */ /* Focus ring uses the deep cyan: 3.19:1 on white passes the 3:1 required for non-text UI, and it reads as brand rather than as a browser default. */ --fx-color-focus-ring: var(--fx-color-brand-cyan-deep); /* ----------------------------------------------------------------- Typography ------------------------------------------------------------------- The live site currently loads four families inconsistently — Corbel, BiomeW04, Nunito Sans and Montserrat, several with !important. Brief §4 permits modernising typography, so this collapses to two: display — Familjen Grotesk, for headings and figures base — Public Sans, for everything read at length Both are loaded from Google Fonts in functions.php. TODO-FONT-HOSTING: consider self-hosting these two families rather than calling fonts.googleapis.com — a UK financial-services site with a cookie banner is better off not making a third-party request for every visitor. TODO-BIOME: confirm whether BiomeW04 on the live site is a licensed brand font. If it is, it should replace Familjen Grotesk for headings. ----------------------------------------------------------------- */ --fx-font-base: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fx-font-display: "Familjen Grotesk", "Public Sans", "Helvetica Neue", Arial, sans-serif; --fx-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --fx-font-size-base: 1rem; --fx-font-size-small: 0.875rem; --fx-font-size-tiny: 0.75rem; --fx-font-size-medium: 1.15rem; --fx-font-size-large: clamp(1.72rem, 3.5vw, 2.5rem); --fx-font-size-xlarge: clamp(2.3rem, 4.7vw, 3.5rem); --fx-line-height-base: 1.6; --fx-line-height-heading: 1.08; --fx-tracking-heading: -0.021em; --fx-tracking-label: 0.15em; /* ----------------------------------------------------------------- Spacing scale ----------------------------------------------------------------- */ --fx-space-xs: 0.5rem; --fx-space-sm: 1rem; --fx-space-md: 1.5rem; --fx-space-lg: 2.5rem; --fx-space-xl: 4.5rem; /* ----------------------------------------------------------------- Shape / elevation ----------------------------------------------------------------- */ --fx-radius-sm: 4px; --fx-radius-md: 8px; --fx-radius-lg: 10px; --fx-radius-pill: 999px; --fx-shadow-sm: 0 1px 2px rgba(15, 33, 64, 0.06); --fx-shadow-md: 0 1px 2px rgba(15, 33, 64, 0.06), 0 14px 34px -18px rgba(15, 33, 64, 0.28); /* ----------------------------------------------------------------- Layout ----------------------------------------------------------------- */ --fx-container-max: 1180px; --fx-content-max: 780px; /* ----------------------------------------------------------------- Motion (respects prefers-reduced-motion, see style.css) ----------------------------------------------------------------- */ --fx-transition-fast: 150ms ease; --fx-transition-base: 250ms ease; /* Slight-overshoot "ease out back" curve used for the FAQ accordion's elastic expand (assets/js/accordion.js). Kept as a token so any other component can reuse the same feel — WAAPI's `.animate()` easing option can't read a CSS var directly, so accordion.js has this same value duplicated in a JS constant with a comment pointing back here. Keep both in sync if you change this. */ --fx-easing-elastic: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Dark-background context (footer, platform band) — swap text/border tokens locally so components inside need no dark-specific rules of their own. */ .fx-on-dark { --fx-color-text: var(--fx-color-text-on-dark); --fx-color-text-muted: #B4C6E0; --fx-color-border: var(--fx-color-border-on-dark); --fx-color-heading: #ffffff; --fx-color-link: var(--fx-color-brand-aqua); --fx-color-link-hover: #ffffff; }