/* ---- Z-index scale ---- 1 Base layers (chart-container, report-toc resting, section-mission) 2 Content layers (section-whatwedo, about-hero image, contact background) 3 Framework cards 10 Carousel inner layers 900 Report mobile bar, report-toc scrolled 910 Report drawer backdrop 920 Report drawer panel 950 Hero nav fixed, hero field wrapper 1000 Article progress, hero nav, report sidebar, project nav sticky 1100 Contact overlay 9999 Skip link (topmost, accessibility) ---- */ :root { /* Brand colors */ --color-blue: #1436BC; --color-yellow: #F5C518; --color-white: #FFFFFF; --color-black: #0A0A0A; --color-dark: #0B1026; --color-navy: #242348; --color-grey-light: #F5F5F3; --color-grey-dark: #3A3A4A; --color-error: #c0392b; /* Typography. Inter is loaded site-wide as a Windows/Linux fallback for the Helvetica Neue voice. Mac users with HN installed never reach Inter - the browser stops at the first family that resolves - so they keep the real Helvetica Neue Black. Everyone else gets real Inter Black instead of Arial fallback. */ --font-display: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif; --font-body: 'Work Sans', 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif; --font-label: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --space-2xl: 8rem; /* Layout */ --site-max-width: 1500px; --site-gutter: max(4vw, 1rem); /* ---- Chart typography scale ---- */ --chart-font-title: clamp(1rem, 1.2vw, 1.15rem); --chart-font-subtitle: clamp(0.78rem, 0.9vw, 0.85rem); --chart-font-label: clamp(0.78rem, 0.9vw, 0.88rem); --chart-font-value: 0.72rem; --chart-font-value-sm: 0.68rem; --chart-font-caption: clamp(0.72rem, 0.82vw, 0.78rem); --chart-font-col-header: clamp(0.95rem, 1.2vw, 1.15rem); --chart-font-seg-value: clamp(0.88rem, 1.15vw, 1.05rem); --chart-font-extra: clamp(0.95rem, 1.3vw, 1.2rem); --chart-font-legend: 0.78rem; --chart-font-annotation: clamp(0.75rem, 0.88vw, 0.82rem); /* ---- Chart SVG font sizes (px for viewBox scaling) ---- */ --chart-svg-label: 14px; --chart-svg-label-lg: 32px; --chart-svg-col-label: 15px; --chart-svg-value: 17px; --chart-svg-value-lg: 32px; --chart-svg-value-sm: 14px; --chart-svg-tick: 16px; --chart-svg-tick-sm: 14px; /* ---- Chart border-radius scale ---- */ --chart-radius-sm: 2px; --chart-radius-md: 3px; --chart-radius-lg: 8px; /* ---- Chart spacing ---- */ --chart-gap-row: 0.35em; --chart-gap-row-grouped: 0.5em; --chart-gap-label: 0.6em; --chart-gap-sub-bar: 0.15em; --chart-gap-legend: 1.2em; --chart-pad-bar: 0.5em; --chart-pad-segment: 0.3em; /* ---- Grey palette (consolidated) ---- 100 Backgrounds, grid fills 200 Borders, dividers, rules 300 Subtle lines, muted shapes 400 De-emphasised elements 500 Muted text, captions 600 Secondary text 700 Axis text, labels 800 Body text (darkest grey) ---- */ --grey-100: #F0F0F0; --grey-200: #E0E0E0; --grey-300: #C8C8C8; --grey-400: #B0B0B0; --grey-500: #999999; --grey-600: #777777; --grey-700: #666666; --grey-800: #585858; /* ---- Chart colour palette (swatch + extensions) ---- */ --chart-blue-mid: #5B8BD9; --chart-blue-light: #78B1E0; --chart-yellow-mid: #EBC84B; --chart-yellow-light: #FFE173; --chart-yellow-bright: #FDC100; --chart-red-light: #C66D69; --chart-red-pale: #D9A09E; --chart-red-faint: #EBCFCE; --chart-olive: #86A624; --chart-olive-light: #BFD968; --chart-slate: #3A4A61; --chart-navy: #1C273B; /* ---- Political party colours ---- */ --party-labour: #C62828; --party-conservative: #1436BC; --party-reform: #00838F; --party-libdem: #FDBB30; --party-green: #2E7D32; --party-other: #9E9E9E; --party-dnv: #757575; --party-wontvote: #757575; --party-dk: #BDBDBD; /* ---- Mindset segment colours (UK) ---- */ --seg-alarmed: #A71712; --seg-pragmatic: #86A624; --seg-disengaged: #3A4A61; --seg-hopeful: #1436BC; --seg-market: #FDC100; --seg-uncertain: #777777; /* ---- Mindset segment colours (CA) ---- */ --ca-seg-market: #E8942D; --ca-seg-hopeful: #1565C0; --ca-seg-pragmatic: #2E7D32; --ca-seg-alarmed: #C62828; --ca-seg-disengaged: #5F8A8B; /* ---- Scatter/accent colours ---- */ --chart-accent-pink: #E84080; --chart-accent-orange: #E85D3A; --chart-accent-indigo: #6B5BD9; --chart-accent-teal: #4A7B8C; --chart-accent-amber: #B8860B; /* ---- CA region map swatches ---- Sequential grey-blue palette used purely to distinguish adjacent regions on the map. Not tied to segment colours. ---- */ --ca-region-stroke: #8895a7; --ca-region-hover: #c5ccda; --ca-region-label: #2d3748; --ca-region-north: #e4e9f1; --ca-region-sacramento: #cdd5e2; --ca-region-bay-area: #dbe1eb; --ca-region-fresno: #e8ecf3; --ca-region-central-coast: #d1d9e5; --ca-region-la-county: #dfe5ee; --ca-region-orange: #c9d2e0; --ca-region-inland-empire: #e6ebf2; --ca-region-san-diego: #d5dce8; /* ---- Theatre / overview / misc page colours ---- */ --theatre-bg: #111; --theatre-text-muted: #888; --theatre-text-meta: #ccc; --theatre-text-desc: #555; --theatre-text-attr: #444; --about-bio-name: #2d2c50; --contact-error-text: #7d1a11; --draft-banner-bg: #d32f2f; --draft-banner-text: #fff; /* ---- Compass dots animation palette ---- Hex values preserved from original js/compass-dots.js PALETTE. These are intentionally distinct from --seg-* because the compass animation uses its own illustrative palette, not the survey-mindset segment colours. ---- */ --compass-dot-optimists: #1436BC; --compass-dot-cautious: #F5C518; --compass-dot-skeptics: #0B1026; --compass-dot-engaged: #5C6B2F; --compass-dot-disengaged: #8B2D3C; --compass-dot-neutral: #5B8EC9; /* ---- Chart grey palette (aliases into grey scale) ---- */ --chart-grey-muted: var(--grey-500); --chart-grey-text: var(--grey-800); --chart-grey-axis: var(--grey-700); --chart-grey-border: var(--grey-200); --chart-grey-rule: #EEEEEE; --chart-grey-grid: var(--grey-100); --chart-grey-bar-link: #BBBBBB; --chart-grey-trend: #CCCCCC; --chart-grey-light: var(--grey-400); }