/* * ------------------------------------------------------------------------- * Healthier Essex — theme tokens * Source: Figma "Essex SDS Hub - Health & Wellbeing" → WEB Colours, * Text styles, Margin/spacing styles, Button styles. * * Themes are switched by data attributes on : * data-theme="dark" | "light" | "contrast" * data-simplified="true" | "false" (reduces animation / moving image) * ------------------------------------------------------------------------- */ :root { /* Brand palette (WEB Colours) */ --c-lime: #d1dd7a; /* Health lime — main colour, highlights, buttons */ --c-aubergine: #2b242c; /* Place+ aubergine — backgrounds and text (dark theme) */ --c-black: #121212; /* Place+ black */ --c-grey: #d0d0d0; /* Place+ grey — some backgrounds + text on dark */ --c-dark-grey: #717171; --c-mid-grey: #a9a9a9; --c-blue: #7293ff; /* Essex blue — SDS Hub link */ /* Health sub-theme colours */ --he01: #5e5d1f; /* Risks (data: overweight / obese, district circles) */ --he02: #9c8f2e; /* Behaviours */ --he03: #bdc43c; /* Deprivation */ --he04: #f1f9b8; /* Outcomes */ /* Explore page column colours (as drawn in the Digital place portrait frames) */ --theme-01: #9c8f2e; --theme-02: #bdc43c; --theme-03: #d1dd7a; --theme-04: #f1f9b8; --theme-fg: var(--c-aubergine); /* Semantic tokens — dark theme (default) */ --bg: var(--c-black); --bg-alt: var(--c-aubergine); --fg: var(--c-grey); /* Muted text: Figma's Dark Grey #717171 fails WCAG AA on these surfaces (3.8:1 on black, 3.1:1 on aubergine), so the nearest passing greys are used — one for the base surface, one for the alt surface. */ --fg-muted: #8a8a8a; /* on #121212 → 5.4:1 */ --fg-muted-alt: #949494; /* on #2b242c → 4.8:1 */ --fg-soft: var(--c-mid-grey); --accent: var(--c-lime); --on-accent: var(--c-aubergine); --link: var(--c-blue); --hairline: var(--c-dark-grey); /* Accent used AS TEXT (the phone frames use lime on dark; light uses Essex blue, high-contrast uses black so it always passes contrast) */ --accent-text: var(--c-lime); /* Site-settings sheet is always dark (Figma: same panel in all themes) */ --settings-active: var(--c-lime); /* Buttons */ --btn-bg: var(--accent); --btn-fg: var(--on-accent); --logo-fg: var(--c-lime); /* Footer is always dark */ --footer-bg: var(--c-black); --footer-fg: var(--c-grey); /* Data-vis colours */ --data-a: var(--he01); /* overweight / obese dots, district circles */ --data-b: var(--c-lime); /* healthy weight dots */ --chart-1: var(--c-lime); /* East of England */ --chart-2: var(--c-mid-grey); /* England */ --chart-3: var(--c-blue); /* Essex */ --chart-line: var(--c-dark-grey); --popup-bg: rgba(113, 113, 113, 0.7); /* Orb shading for the data dots (light from top-left) */ --counter-contact: rgba(0, 0, 0, 0.55); /* counters: tight shadow directly beneath */ --counter-shadow: rgba(0, 0, 0, 0.45); --orb-shadow: rgba(0, 0, 0, 0.5); /* cast shadow core */ --orb-penumbra: rgba(0, 0, 0, 0.32); /* wide soft edge */ --orb-contact: rgba(0, 0, 0, 0.55); /* where the sphere touches the surface */ --orb-specular: rgba(255, 255, 255, 0.28); --orb-bounce: rgba(255, 255, 255, 0.06); /* light reflected back from the surface */ /* Spacing (Margin/spacing styles). The Figma values are for a 1280 px viewport; they scale with the viewport between ~900 and 1920 px so the composition keeps its proportions on large screens, clamped either side. (1vw at 1280 = 12.8 px.) */ --margin: clamp(24px, 3.28vw, 63px); /* 42 @1280 → 63 @1920 */ --gutter: 16px; /* rows & columns */ --section-pad: clamp(56px, 6.5625vw, 126px); /* 84 @1280 → 126 @1920 */ --chapter-pad-right: clamp(24px, 11.17vw, 214px); /* 143 @1280 → 214 @1920 */ --btn-pad: 4px; --btn-gap: 8px; /* spacing between buttons and to hover tags */ --page-max: 1920px; /* the grid stops growing here and centres (ultrawide) */ --measure-body: 520px; /* max paragraph width (Figma body columns are 488 px) */ --measure-quote: 833px; /* Type */ --font: "GT America", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "GT America Mono", "SF Mono", Menlo, Consolas, monospace; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --hero-loop: 7.42s; color-scheme: dark; } /* ---------- Light theme ---------- */ :root[data-theme="light"] { --bg: var(--c-grey); --bg-alt: var(--c-mid-grey); --fg: var(--c-aubergine); --fg-muted: #555555; /* on #d0d0d0 → 4.8:1 */ --fg-muted-alt: #3a3a3a; /* on #a9a9a9 → 4.9:1 */ --fg-soft: #555555; --accent: var(--c-lime); --on-accent: var(--c-aubergine); /* Essex blue #7293ff is 1.9:1 on the light grey; a darker Essex blue keeps the hue and passes AA (5.4:1). */ --link: #1f3fbf; --hairline: var(--c-dark-grey); --accent-text: #1f3fbf; --settings-active: var(--c-lime); --btn-bg: var(--c-lime); --btn-fg: var(--c-aubergine); --logo-fg: var(--c-aubergine); --data-a: var(--he01); --data-b: var(--c-lime); --chart-1: var(--c-lime); --chart-2: var(--c-aubergine); --chart-3: var(--c-blue); --chart-line: var(--c-dark-grey); --popup-bg: rgba(43, 36, 44, 0.85); --counter-contact: rgba(43, 36, 44, 0.32); --counter-shadow: rgba(43, 36, 44, 0.22); --orb-shadow: rgba(43, 36, 44, 0.30); --orb-penumbra: rgba(43, 36, 44, 0.16); --orb-contact: rgba(43, 36, 44, 0.38); --orb-specular: rgba(255, 255, 255, 0.42); --orb-bounce: rgba(255, 255, 255, 0.18); color-scheme: light; } /* ---------- High contrast theme (greyscale, no lime) ---------- */ :root[data-theme="contrast"] { --bg: var(--c-grey); --bg-alt: var(--c-mid-grey); --fg: var(--c-black); --fg-muted: #3a3a3a; --fg-muted-alt: #2a2a2a; --fg-soft: #3a3a3a; --accent: var(--c-black); --on-accent: var(--c-grey); --link: var(--c-black); --hairline: var(--c-black); --accent-text: var(--c-black); --settings-active: var(--c-grey); --btn-bg: var(--c-black); --btn-fg: var(--c-grey); --logo-fg: var(--c-black); --data-a: var(--c-black); --data-b: #f4f4f4; --chart-1: #f4f4f4; --chart-2: var(--c-dark-grey); --chart-3: var(--c-black); --chart-line: var(--c-black); --popup-bg: rgba(18, 18, 18, 0.9); --theme-01: #6f6f6f; --theme-02: #8f8f8f; --theme-03: #b5b5b5; --theme-04: #e6e6e6; --theme-fg: var(--c-black); color-scheme: light; }