/* StraightTalk4u: design tokens. ============================================================================ Ported from the authoritative token set that ships inside the approved prototype, at: WordPress site UI design/_ds/straighttalk4u-design-system-64cab34d.../tokens/ That copy wins over the standalone "StraightTalk4u Design System" folder, which is the older v2 set and still carries the superseded sage ramp. WARM is the customer-selected theme and the only theme this site ships. No [data-theme] wrapper is applied anywhere in the prototype, so the Warm values are baked straight into :root here. The calm and bold reference blocks are deliberately not ported, and there is no [data-theme] selector in this file. What lives here, and what does not: - Ramps, computed colours, feedback semantics, font roles, weights, line heights, letter spacings, radii, shadows, motion, heading hooks, fluid rhythm and the container widths all live here. None of them has a theme.json equivalent that a classic theme can surface. - The @font-face rules do NOT live here. They are registered through settings.typography.fontFamilies[].fontFace in theme.json, which is the only free route to self-hosted fonts on a classic theme. - The roughly 21 semantic colours are also mapped into the Kadence Colour Palette in the Customizer, which is the picker the site owner actually sees. Keep the two in step. British English throughout. No em dashes and no en dashes, here or anywhere. ========================================================================= */ :root { /* ========================================================================== 1. Brand ramp: navy The primary brand colour, taken from the logo wordmark and emblem. ====================================================================== */ --navy-900: #06243f; --navy-800: #08304f; --navy-700: #0b3d72; /* Primary navy, the wordmark and emblem colour. */ --navy-600: #134c87; --navy-500: #1c5a93; --navy-400: #3f77ab; --navy-300: #7aa1c6; --navy-200: #b9cee0; --navy-100: #e3ecf4; --navy-50: #f1f6fa; /* ========================================================================== 2. Brand ramp: sage green Re-matched to the exact logo green #5d8366. The stale #3f6b3c / #4e7d4a / #5e8c57 family from the older design system folder is superseded and must not be reintroduced. ====================================================================== */ --green-700: #405e48; --green-600: #4e7157; --green-500: #5d8366; /* Sage green, the exact logo green. */ --green-400: #7a9c82; --green-bright: #4fa94f; /* The brighter "growth" green, used on the arrow and on inverted icons. */ --green-300: #a2bfa8; --green-200: #cbdccf; --green-100: #e9f0ea; --green-50: #f4f8f5; --green-tint: #a9d18e; /* Soft light green from the client deck, used on chips and the savings pill. */ /* ========================================================================== 3. Neutrals Navy-tinted greys, plus the two creams that give Warm its warmth. ====================================================================== */ --ink-900: #14202c; --ink-800: #1f2d3a; --ink-700: #34424f; --ink-600: #4b5a68; --ink-500: #677686; --ink-550: #5d6c7c; /* Muted text that reads at 4.5 to 1 on the cream canvas (K-24, 9 October 2026). */ --ink-400: #8a98a6; --ink-300: #b6c1cb; --ink-200: #d8dfe6; --ink-100: #eaeff3; --ink-50: #f5f8fa; --white: #ffffff; --cream: #faf6ee; /* Warm off-white, the page canvas. */ --cream-deep: #f3ecdd; /* One step deeper, used as the default border. */ /* ========================================================================== 4. Resolved semantics, Warm These are the values the Kadence Colour Palette should also carry. The resolved literals are noted in the comments so the two can be compared at a glance without walking the ramps. ====================================================================== */ --brand: var(--green-600); /* #4e7157 */ --brand-strong: var(--green-700); /* #405e48 */ --brand-soft: var(--green-100); /* #e9f0ea */ --accent: var(--navy-600); /* #134c87 */ --accent-strong: var(--navy-700); /* #0b3d72 */ --accent-soft: var(--navy-100); /* #e3ecf4 */ --accent-bright: var(--green-bright); /* #4fa94f */ --canvas: var(--cream); /* #faf6ee, the page background. */ --surface: var(--white); /* #ffffff, cards and panels. */ --surface-alt: var(--green-50); /* #f4f8f5, alternating bands. */ --surface-invert: var(--green-700); /* #405e48, the dark bands and both booking side panels. */ --text-strong: var(--navy-900); /* #06243f, headings. */ --text-body: var(--ink-700); /* #34424f, paragraphs. */ --text-muted: var(--ink-550); /* #5d6c7c, captions and meta: 5.0 to 1 on the cream canvas, 4.6 on --cream-deep. #677686 (ink-500) read 4.3 on cream, under 4.5 (K-24, 9 October 2026). */ --text-on-brand: var(--white); --text-on-accent: var(--white); --text-link: var(--green-700); /* #405e48 */ --border: var(--cream-deep); /* #f3ecdd */ --border-strong: #e2d8c4; /* ========================================================================== 5. Computed colour The focus ring is deliberately pinned to --green-500, not to --accent, so the ring stays green even though Warm makes --accent navy. A palette entry expects a literal colour and would render a color-mix() string as an empty swatch, so both of these have to stay here rather than move to theme.json. ====================================================================== */ /* The logo green itself: 4.0 to 1 on the cream canvas and 4.3 on white. The 55 per cent tint it replaced read 1.9 to 1, under the 3 to 1 WCAG asks of a focus indicator (K-22, 9 October 2026). */ --focus-ring: var(--green-500); --shadow-focus: 0 0 0 3px var(--focus-ring); /* ========================================================================== 6. Feedback semantics Eight values. Only --danger is exercised in the design, by .st4u-field__req, .st4u-field__error and .st4u-control--error. The other six are kept here rather than registered in the palette, where they would only clutter the picker the site owner uses. ====================================================================== */ --success: #4e7157; --success-bg: #e9f0ea; --warning: #c98a2b; --warning-bg: #faf0db; --danger: #b4453a; --danger-bg: #f8e7e4; --info: #1c5a93; --info-bg: #e3ecf4; /* ========================================================================== 7. Typefaces Lora, Nunito Sans and Montserrat are the permanent brand set, confirmed by the client on 25 August 2026. All three are self-hosted from assets/fonts/ and declared in theme.json. Nothing is fetched from the Google Fonts CDN, which would send every UK visitor's IP address to a third party on page load. The two role aliases matter: theme.json has no concept of a role alias, and every ported .st4u-* rule below depends on these names existing. ====================================================================== */ --font-serif: 'Lora', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Montserrat', system-ui, sans-serif; --font-heading: var(--font-sans); /* Warm points headings at Nunito Sans. */ --font-body: var(--font-sans); /* ========================================================================== 8. Type scale theme.json carries the same eight steps as settings.typography.fontSizes, but those emit --wp--preset--font-size--* names that the ported component CSS does not use, so the scale is repeated here under its own names. Keep the two in step if either changes. 4xl and 5xl are deliberately omitted: they are defined in the design system but never used, and the hero h1 carries its own clamp(). ====================================================================== */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 2.875rem; /* 46px */ /* ========================================================================== 9. Weights, line heights, letter spacings theme.json exposes these only as boolean "allow the control" switches with no preset lists, so they stay here. --ls-caps is load-bearing: every uppercase eyebrow, the price flag and the footer column headers depend on it. Change it and the whole design shifts. ====================================================================== */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.14em; /* ========================================================================== 10. Spacing scale A 4px base. theme.json carries the same ten steps as settings.spacing.spacingSizes for the block spacing controls, but again under --wp--preset--spacing--* names the ported CSS does not use. ====================================================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* ========================================================================== 11. Radii Core offers only a settings.border.radius boolean, with no preset list, so all seven stay here. --radius-card resolves to --radius-lg, 18px. The [data-theme="warm"] block in the design system would have given 24px together with three green-tinted shadows, but no wrapper applies that block anywhere, so the prototype renders at 18px with the navy shadows below. The rendered prototype is what the client signed off, so the rendered prototype is the approved target. The green tints in that unused block also still reference the superseded sage #5e8c57 and would need re-deriving from #5d8366 before they could be adopted. ====================================================================== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; --radius-card: var(--radius-lg); --border-width: 1px; /* ========================================================================== 12. Shadows Soft and navy-tinted, matching the prototype as rendered. settings.shadow.presets exists but buys nothing on a classic theme: there is no Global Styles interface to surface it in, core forces defaultPresets off for classic themes anyway, and the presets emit --wp--preset--shadow--* names the ported CSS does not use. ====================================================================== */ --shadow-xs: 0 1px 2px rgba(11, 61, 114, 0.06); --shadow-sm: 0 2px 8px rgba(11, 61, 114, 0.07); --shadow-md: 0 8px 24px rgba(11, 61, 114, 0.09); --shadow-lg: 0 18px 48px rgba(11, 61, 114, 0.13); /* --shadow-focus is defined in section 5, beside the ring colour it depends on. */ /* ========================================================================== 13. Motion Every transition and animation in the theme reads from these four. The prefers-reduced-motion blocks in layout.css and components.css disable the movement rather than shortening it. ====================================================================== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 380ms; /* ========================================================================== 14. Heading treatment hooks Warm sets no transform and a slight negative tracking. Component rules read these rather than hard-coding the values, so a future theme change is one edit in one place. ====================================================================== */ --heading-transform: none; --heading-spacing: -0.015em; /* ========================================================================== 15. Fluid rhythm and container widths The two clamps stay out of settings.spacing.spacingSizes on purpose: exposing fluid rhythm in the block spacing control invites the owner to break the rhythm, and a clamp value shows as an empty control in the Spacer block. --container mirrors settings.layout.contentSize and wideSize in theme.json, and must also be mirrored in the Kadence Customizer container width or the editor will not match the front end. --container-form is new. The prototype hard-codes 980px as a literal on both booking panels with no token behind it. ====================================================================== */ --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --gutter: clamp(1.25rem, 4vw, 3rem); --container: 1180px; /* Default band width: home, why coaching, fees, women's group. */ --container-narrow: 760px; /* Reading width: FAQ, enquiry form, fees reassurance note, legal pages. */ --container-form: 980px; /* The two booking panels. */ /* ========================================================================== 16. Header height 78px of header plus 18px of breathing room is where both sticky rails sit, so the two numbers are kept together here rather than repeated as literals in layout.css. ====================================================================== */ --header-height: 78px; --sticky-top: 96px; }