/* * ------------------------------------------------------------------------- * Essex SDS Hub — theme tokens * Source: Figma "Essex SDS Hub - Health & Wellbeing" * → page "SDS Hub Frames - for style scape" * → WEB Colours, Text styles, Margin/spacing styles, Button styles. * * Themes are switched by data attributes on : * data-theme="dark" | "light" | "contrast" (dark is the designed default) * data-simplified="true" | "false" * * NOTE for the design team: only the dark theme is drawn in Figma. The light * theme here maps the same relationships onto the light surfaces (Place+ * Grey ground, aubergine text) following the Health & Wellbeing site; the * high-contrast theme is greyscale. Both are extrapolations awaiting design. * ------------------------------------------------------------------------- */ :root { /* Brand palette (Colour styles) */ --c-blue: #7293ff; /* Essex Blue — main colour, highlights, buttons */ --c-aubergine: #2b242c; /* Place+ Aubergine — backgrounds and text */ --c-black: #121212; /* Place+ Black — page ground, dark theme */ --c-grey: #d0d0d0; /* Place+ Grey — text on dark, light ground */ --c-dark-grey: #717171; /* mainly dashboards */ --c-mid-grey: #a9a9a9; /* mainly dashboards */ --c-lime: #d1dd7a; /* Health & Wellbeing cross-links (dark surfaces) */ /* Digital Place Portrait theme colours (Colour styles) */ --th-people: #f5a4df; --th-economy: #b6dbd4; --th-built: #ff8e55; --th-housing: #ffc15b; --th-health: #d1dd7a; --th-natural: #82ca43; --th-movement: #fbb19c; --th-infrastructure: #d9c1f9; --th-fg: #121212; /* text inside expanded theme columns */ --th-num: #2b242c; /* column numbers / titles */ /* Semantic tokens — dark theme (designed default) */ --bg: var(--c-black); --bg-alt: var(--c-aubergine); --fg: var(--c-grey); /* Figma uses Dark Grey #717171 for muted text; it fails WCAG AA on both dark surfaces (3.8:1 / 3.1:1), so the nearest passing greys are used — same resolution as agreed on the Health & Wellbeing site. */ --fg-muted: #8a8a8a; /* on #121212 → 5.4:1 */ --fg-muted-alt: #949494; /* on #2b242c → 4.9:1 */ --accent: var(--c-blue); --on-accent: var(--c-aubergine); --accent-text: var(--c-blue); /* blue used as text (6.5:1 on black) */ --link-hwb: var(--c-lime); /* H&WB cross-link — dark surfaces only */ --btn-bg: var(--c-blue); --btn-fg: var(--c-aubergine); --logo-fg: var(--c-blue); --hero-scrim: var(--c-aubergine); /* solid under the 35 % hero video */ /* Footers are drawn dark in every context */ --footer-aubergine: var(--c-aubergine); --footer-black: var(--c-black); --footer-fg: var(--c-grey); /* Spacing (Margin/spacing styles: desktop 42/16/84, phone 20/12/32). Values are for the 1280 px frame and scale with the viewport up to 1920, as agreed for the Health & Wellbeing site. 1vw @1280 = 12.8 px. */ --margin: clamp(24px, 3.28vw, 63px); /* 42 @1280 */ --gutter: 16px; --section-pad: clamp(56px, 6.5625vw, 126px); /* 84 @1280 */ --btn-pad: 4px; --btn-gap: 8px; /* Button styles note 3: spacing between buttons */ --page-max: 1920px; --measure-body: 520px; /* body column is 488–489 px in the frames */ /* Type */ --font: "GT America", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "GT America Mono", "SF Mono", Menlo, Consolas, monospace; /* Motion (hero timeline: 7.422246 s, exported from Figma keyframes) */ --hero-t: 7.422246s; --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-nudge: cubic-bezier(0.34, 1.2, 0.64, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); color-scheme: dark; } /* ---------- Light theme (derived — not drawn in Figma) ---------- */ :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; --accent: var(--c-blue); --on-accent: var(--c-aubergine); --accent-text: #1f3fbf; /* Essex blue darkened for AA on light (5.4:1) */ --btn-bg: var(--c-blue); --btn-fg: var(--c-aubergine); --logo-fg: var(--c-aubergine); --hero-scrim: var(--c-aubergine); color-scheme: light; } /* ---------- High contrast theme (greyscale, derived) ---------- */ :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; --accent: var(--c-black); --on-accent: var(--c-grey); --accent-text: var(--c-black); --btn-bg: var(--c-black); --btn-fg: var(--c-grey); --logo-fg: var(--c-black); --hero-scrim: var(--c-black); /* theme columns become a luminance ramp */ --th-people: #e8e8e8; --th-economy: #d4d4d4; --th-built: #9a9a9a; --th-housing: #c2c2c2; --th-health: #cccccc; --th-natural: #8f8f8f; --th-movement: #b5b5b5; --th-infrastructure: #dedede; --th-fg: var(--c-black); --th-num: var(--c-black); color-scheme: light; }