/* ========================================================================= Quorum - design tokens (per theme; the association family's shared theme.css reads only these names) Single light theme by design. BRAND LOOK (the four values the platform's Site Admin > Brand Look screen controls; it injects --cs-brand-* / --cs-font-* and loads the fonts): --brand-primary, --brand-secondary, --font-heading, --font-body The values below are the fallbacks when Brand Look is not set. Precedence: custom.css > Brand Look > these defaults. THEME ACCENTS (fixed in this theme; not part of Brand Look): --accent-1 text-safe accent (eyebrows, Post a job, hints) --accent-2 FILL ONLY (signup button, highlighter, labels on dark via --accent-2-light; as text or a focus ring use --accent-2-ink) --accent-3 the member directory slide Everything else is derived with color-mix() so a Brand Look change carries through tints, darks and hovers automatically. ========================================================================= */ :root { color-scheme: light; /* ---- Brand Look ---------------------------------------------------- */ --brand-primary: var(--cs-brand-primary, #2B44B5); /* ultramarine. 8.1:1 on white */ --brand-secondary: var(--cs-brand-secondary, #0D7466); /* deep teal. Join button, conference: 5.7:1 on white */ --font-heading: var(--cs-font-heading, 'Manrope', 'Trebuchet MS', sans-serif); --font-body: var(--cs-font-body, 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif); --heading-weight: 500; /* Manrope, variable 500-800. Nick chose it over Bricolage Grotesque and picked the lightest weights (2026-10-15) */ --display-weight: 600; /* welcome h1, page titles, the org name (skin.css) */ --heading-tracking: -0.02em; /* ---- Theme accents (fixed) ----------------------------------------- */ --accent-1: #C0306A; /* raspberry. 5.4:1 on white: OK as text and as a fill under white text */ --accent-2: #FF9F43; /* tangerine. FILL ONLY (2.0:1 on white) with dark text. Text uses --accent-2-ink */ --accent-3: #5536B8; /* violet. Member directory slide: 8.1:1 on white */ --tint-base: #ffffff; /* clean white that every tint mixes into */ --accent-3-ground: color-mix(in srgb, var(--accent-3) 9%, #fff); /* directory slide background */ /* ---- Derived from brand + accents ---------------------------------- */ /* The three coloured bands (paths, Our work, footer) share this lighter ultramarine, #5166c2 (Nick, 2026-10-14; skin.css points the paths band at it). Despite the family's name it is LIGHTER than the primary, which stays #2B44B5 for text and buttons. White text on it is 5.2:1. */ --primary-dark: color-mix(in srgb, var(--brand-primary) 82%, #fff); --primary-hover: color-mix(in srgb, var(--brand-primary) 80%, #000); --primary-tint: color-mix(in srgb, var(--brand-primary) 6%, var(--tint-base)); --secondary-hover: color-mix(in srgb, var(--brand-secondary) 80%, #000); --secondary-tint: color-mix(in srgb, var(--brand-secondary) 8%, var(--tint-base)); --accent-1-hover: color-mix(in srgb, var(--accent-1) 80%, #000); --accent-1-tint: color-mix(in srgb, var(--accent-1) 9%, var(--tint-base)); --accent-2-tint: color-mix(in srgb, var(--accent-2) 16%, var(--tint-base)); --accent-2-ink: color-mix(in srgb, var(--accent-2) 50%, #000); /* tangerine as text or ring: #805022, 6.8:1 on white */ --accent-2-light: color-mix(in srgb, var(--accent-2) 55%, #fff); /* labels on the dark bands: 11.5:1 on ink */ --accent-2-hover: color-mix(in srgb, var(--accent-2) 85%, #000); --accent-3-hover: color-mix(in srgb, var(--accent-3) 80%, #000); --accent-3-tint: color-mix(in srgb, var(--accent-3) 9%, var(--tint-base)); /* ---- Colour cycles (cards cycle by position, editors never choose) -- News cards and job cards use 1-4; events use the secondary colour for the featured first card, then 2-4. -text is the text-safe version (all four are at least 4.7:1 on their own tint). */ --cyc-1: var(--brand-primary); --cyc-1-text: var(--cyc-1); --cyc-1-tint: var(--primary-tint); --cyc-2: var(--accent-1); --cyc-2-text: var(--cyc-2); --cyc-2-tint: var(--accent-1-tint); --cyc-3: var(--brand-secondary); --cyc-3-text: var(--cyc-3); --cyc-3-tint: var(--secondary-tint); --cyc-4: var(--accent-3); --cyc-4-text: var(--cyc-4); --cyc-4-tint: var(--accent-3-tint); /* Our work icons, light enough to read on the dark band */ --work-1: color-mix(in srgb, var(--brand-primary) 35%, #fff); --work-2: color-mix(in srgb, var(--brand-secondary) 45%, #fff); --work-3: var(--accent-2); --work-4: color-mix(in srgb, var(--accent-1) 50%, #fff); --work-5: color-mix(in srgb, var(--accent-3) 35%, #fff); /* ---- Neutrals ------------------------------------------------------ */ --ink: #141a33; /* blue-black: text and the dark bands */ --muted: #4a5170; /* 7.8:1 on white */ --line: #e1e4f0; --surface: #ffffff; --on-dark: #ffffff; /* text on the bands: 5.2:1 */ --on-dark-muted: rgba(255, 255, 255, .92); /* 4.7:1 on the bands */ /* ---- Type scale (desktop value in comment) ------------------------- */ --fs-display: clamp(2.75rem, 1.5rem + 4.4vw, 5rem); /* 80px welcome h1 */ --fs-slide: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); /* 72px slide h2 */ --fs-h1: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); /* 64px interior page title */ --fs-h2: clamp(2.25rem, 1.7rem + 2vw, 3.375rem); /* 54px section titles */ --fs-h3: clamp(1.6rem, 1.4rem + .8vw, 1.875rem); /* 30px paths, Our work */ --fs-card: clamp(1.45rem, 1.3rem + .45vw, 1.65rem); /* 26px card titles */ --fs-lead: 1.25rem; /* 20px */ --fs-body: 1.125rem; /* 18px body */ --fs-small: .9375rem; /* 15px meta */ --fs-label: .8125rem; /* 13px eyebrows, uppercase */ --lh-tight: 1.02; --lh-body: 1.6; --measure: 68ch; /* interior rich-text line length */ /* ---- Space, radii, elevation --------------------------------------- */ --gutter: 24px; --section-y: clamp(4rem, 2.8rem + 4vw, 6.5rem); /* 104px desktop */ --radius-sm: 18px; /* news cards */ --radius-md: 24px; /* job cards, notices, sidebar */ --radius-lg: 28px; /* event cards */ --radius-xl: 32px; /* slide feature cards */ --radius-btn: 999px; /* buttons are pills */ --radius-input: 14px; /* form fields */ --radius-badge: 16px; /* job badge tile (rounded square) */ --radius-pill: 999px; /* chips, slider dots */ --shadow-card: 0 12px 28px color-mix(in srgb, var(--brand-primary) 8%, transparent); --shadow-float: 0 24px 48px rgba(20, 26, 51, .14); --focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent-2-ink); /* tangerine ink: 6.8:1 on white (tangerine itself is 2.0:1, under the 3:1 focus minimum) */ --control-h: 48px; --tap-min: 44px; /* The motif as a CSS mask, for icons drawn by CSS on section content (news types, Our work, job badges, the hiring strip). Quorum: the network. */ --motif-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 104 100 36M100 104 165 83M100 104 140 159M100 104 60 159M100 104 35 83' stroke='black' stroke-width='10' stroke-linecap='round'/%3E%3Ccircle cx='100' cy='104' r='28'/%3E%3Ccircle cx='100' cy='36' r='19'/%3E%3Ccircle cx='165' cy='83' r='19'/%3E%3Ccircle cx='140' cy='159' r='19'/%3E%3Ccircle cx='60' cy='159' r='19'/%3E%3Ccircle cx='35' cy='83' r='19'/%3E%3C/svg%3E"); /* Aliases for the repo-wide names, so shared snippets pick up the palette */ --theme-primary: var(--brand-primary); --theme-accent: var(--brand-secondary); --theme-dark: var(--ink); --theme-font-primary: var(--font-body); --theme-font-heading: var(--font-heading); } @media (max-width: 575.98px) { :root { --gutter: 16px; } }