/* ============================================================ IBBIS Design System — Color & Type Tokens International Biosecurity and Biosafety Initiative for Science Version based on 2022 brand guidelines + 2025 Commec sub-brand. Font strategy for this static site: • Display / sans (headers, nav, buttons): real Acumin Pro, loaded over the network via IBBIS's Adobe Typekit kit. The to https://use.typekit.net/mso6gwr.css lives in each page's ; the Typekit family name is "acumin-pro" (first in the stacks below). • Serif (titles, sub-heads, body): Lyon Text is a licensed print font we do not ship on the public site, so we fall back to Crimson Pro (Google Fonts, imported below) — a metric-reasonable substitute — then to Georgia / system serifs. No font binaries are hosted in this repo; everything degrades gracefully with no JavaScript. ============================================================ */ /* Google Fonts fallback layer — Manrope (sans) + Crimson Pro (serif), plus Archivo / Source Serif 4 as tertiary fallbacks. */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Archivo:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap'); :root { /* ---------- Core palette (from IBBIS guidelines p.18) ---------- */ --ibbis-navy: #23285A; /* neutral — primary surface / body text on light */ --ibbis-teal: #419BB9; /* accent — secondary action, link, data-viz */ --ibbis-red: #F05023; /* accent — bird-mark tint, CTA, emphasis */ --ibbis-black: #000000; --ibbis-grey: #808080; --ibbis-white: #FFFFFF; /* Disciplined UI steps — three per accent only. Tint (subtle bg), Brand (= core hex), Hover (= darker state). Navy gets an extra page-tint for subtle sections, and a "deep" for modal/footer surfaces. Do not invent new steps. */ --navy-tint: #F4F5FA; /* page tint on white (bg-subtle) */ --navy: #23285A; /* = IBBIS Navy */ --navy-deep: #14163A; /* modal scrim / deep footer / hover */ --red-tint: #FDE4DA; --red: #F05023; /* = IBBIS Red */ --red-hover: #C23A14; --teal-tint: #E1EFF4; --teal: #419BB9; /* = IBBIS Teal */ --teal-hover:#2F7C97; /* Neutrals — three grey stops only. */ --grey-line: #D6DAE0; /* borders, hairlines (cool, teal-tinted)*/ --grey-muted:#4A4A4A; /* secondary text */ --grey: #808080; /* = IBBIS Grey */ /* ---------- Data visualisation ---------- Tonal scales are permitted ONLY inside charts, maps, and quantitative visualisations — not for UI surfaces. Every ramp starts or ends on a core brand hex so visualisations always feel rooted in the palette. */ /* Sequential · teal → navy (low → high) */ --viz-seq-0: #EAF4F8; --viz-seq-1: #B8DAE5; --viz-seq-2: #6FB5CA; --viz-seq-3: #419BB9; /* = IBBIS Teal */ --viz-seq-4: #2F6B88; --viz-seq-5: #23285A; /* = IBBIS Navy */ /* Diverging · red ↔ navy through warm neutral */ --viz-div-n3: #C23A14; /* = red-hover */ --viz-div-n2: #F05023; /* = IBBIS Red */ --viz-div-n1: #FCC9B5; --viz-div-0: #F5F1EC; /* warm neutral centre */ --viz-div-p1: #A9C8D3; --viz-div-p2: #419BB9; /* = IBBIS Teal */ --viz-div-p3: #23285A; /* = IBBIS Navy */ /* Categorical · max 5 named buckets, brand-first order */ --viz-cat-1: #23285A; /* navy */ --viz-cat-2: #419BB9; /* teal */ --viz-cat-3: #F05023; /* red */ --viz-cat-4: #D98A00; /* ochre (warning) */ --viz-cat-5: #808080; /* grey (no-data / other) */ /* ---------- Semantic tokens (light surface) ---------- */ --bg: var(--ibbis-white); --bg-subtle: var(--navy-tint); --bg-raised: var(--ibbis-white); --bg-inverse: var(--ibbis-navy); --fg: var(--ibbis-navy); /* body text on light */ --fg-muted: var(--grey-muted); --fg-subtle: var(--grey); --fg-on-dark: var(--ibbis-white); --fg-on-accent: var(--ibbis-white); --accent: var(--ibbis-red); /* primary CTA, bird mark */ --accent-hover: var(--red-hover); --link: var(--ibbis-teal); /* hypertext, secondary accent */ --link-hover: var(--teal-hover); --border: var(--grey-line); /* cool teal-tinted hairline */ --border-strong: var(--ibbis-teal); --border-inverse: rgba(255,255,255,0.22); --success: #2E8B57; --warning: #D98A00; --danger: var(--ibbis-red); /* ---------- Font families ---------- Cascade order: 1. Real licensed display family via Typekit ("acumin-pro") 2. Google fallback (Manrope / Crimson Pro) 3. Earlier project fallback (Archivo / Source Serif 4) 4. Microsoft / system safe (Arial Nova, Arial, Georgia, Cambria) 5. Generic All layers hit similar x-heights and widths so layout does not reflow dramatically if a layer is unavailable. */ --font-display: "acumin-pro", "Manrope", "Archivo", "Arial Nova", Arial, sans-serif; /* ALL-CAPS headers */ --font-sans: "acumin-pro", "Manrope", "Archivo", "Arial Nova", Arial, sans-serif; /* UI / nav / buttons */ --font-serif: "Lyon Text", "Crimson Pro", "Source Serif 4", Georgia, Cambria, "Georgia Pro", serif; /* titles, sub-heads, body copy */ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace; /* ---------- Type scale ---------- Tracking rule (from guidelines): ALL-CAPS headers always carry generous letter-spacing (~0.08–0.12em). Body copy is sentence case. */ --fs-xxs: 0.6875rem; /* 11 — micro caps: eyebrows, meta labels, footer bar */ --fs-xs: 0.8rem; /* ~13 - caps labels, buttons, nav */ --fs-sm: 1rem; /* 16 - captions + secondary body, footer */ --fs-md: 1.2rem; /* ~19 — lead body */ --fs-lg: 1.375rem; /* 22 — sub-head */ --fs-xl: 1.75rem; /* 28 — H3 */ --fs-2xl: 2.25rem; /* 36 — H2 */ --fs-3xl: 3rem; /* 48 — H1 */ --fs-4xl: 4rem; /* 64 — display */ --fs-5xl: 5.5rem; /* 88 — hero display */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-loose: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-caps: 0.1em; /* header style */ --tracking-caps-l: 0.14em; /* title style, extra light */ /* ---------- Spacing (4-px base) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ---------- Radii ---------- The brand is geometric + institutional. Corners are small or zero. Pills/large radii would feel consumer-y and off-brand. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px; /* only for circular marks / avatars */ /* ---------- Shadows ---------- Sparingly used. The brand leans flat + printed; use a subtle elevation for menus/cards on white, and a deeper one for modals. */ --shadow-sm: 0 1px 2px rgba(35,40,90,0.06), 0 1px 1px rgba(35,40,90,0.04); --shadow-md: 0 4px 12px rgba(35,40,90,0.08), 0 2px 4px rgba(35,40,90,0.05); --shadow-lg: 0 18px 40px rgba(35,40,90,0.14), 0 4px 10px rgba(35,40,90,0.06); --shadow-inset-focus: 0 0 0 2px rgba(65,155,185,0.5); /* ---------- Container / layout ---------- */ --container-max: 1200px; --container-px: 2.5rem; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms; /* ============================================================ WEBSITE-LOCAL TOKENS Added by the Commec website; NOT (yet) in the canonical IBBIS Design System file. Candidates to push upstream via DesignSync. Kept in this block so a future design-sync merge doesn't clobber them silently. See memory: design-sync-source. ============================================================ */ /* Brand colours as raw channels, so components can build rgba() tints without re-typing the hex-as-rgb (was hard-coded ~8×). */ --white-rgb: 255, 255, 255; --navy-rgb: 35, 40, 90; /* = --ibbis-navy #23285A */ --red-rgb: 240, 80, 35; /* = --ibbis-red #F05023 */ --teal-rgb: 65, 155, 185; /* = --ibbis-teal #419BB9 */ /* On-navy tint scale — exactly four levels for white-on-navy text and hairlines. Replaces ~26 ad-hoc rgba(255,255,255,·) values. */ --on-navy-strong: rgba(var(--white-rgb), 0.9); /* headings / emphasis / near-white text */ --on-navy: rgba(var(--white-rgb), 0.72); /* body copy on navy */ --on-navy-muted: rgba(var(--white-rgb), 0.5); /* labels, notes, rulers, disclaimers */ --on-navy-line: rgba(var(--white-rgb), 0.2); /* all hairlines, borders, dividers */ /* Mobile counterpart to --container-px (page gutter at ≤620px). */ --container-px-sm: 1.375rem; /* 22px */ /* Program-card accent (moved here from a stray :root in site.css). */ --prog-accent: var(--ibbis-red); }