/* Source Sans 3, self-hosted. Google served this as a VARIABLE font, so one file per subset covers 400/600/700 - hence font-weight: 400 700 rather than three separate faces. unicode-range means latin-ext is only fetched if a character in that range actually appears. */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/source-sans-3-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* DLCL brand tokens, matching the Stitch "Updated Typography" design. --------------------------------------------------------------------------- Theming model: is set by the inline script in head.html before first paint (saved choice, else the OS preference). With JavaScript off no attribute is set, so the media query below still follows the OS. Pico is driven from these same tokens further down, so Pico's own light/dark defaults can never leak through. */ /* Light palette (the default, and what data-theme="light" pins). */ :root, :root[data-theme="light"] { --dlcl-primary: #a20069; --dlcl-on-primary: #ffffff; --dlcl-primary-container: #c42683; --dlcl-on-primary-container: #ffe7ef; --dlcl-primary-hover: #c42683; --dlcl-secondary: #5f559a; --dlcl-on-secondary: #ffffff; --dlcl-tertiary: #00597f; --dlcl-on-tertiary: #ffffff; --dlcl-background: #fcf9f8; --dlcl-surface: #ffffff; --dlcl-surface-low: #f6f3f2; --dlcl-border: #e5e2e1; --dlcl-on-background: #1b1b1b; --dlcl-on-surface-variant: #57414a; --dlcl-inverse-surface: #313030; --dlcl-inverse-on-surface: #f3f0ef; --dlcl-footer-heading: #dcd9d9; --dlcl-footer-link-hover: #ffb0d6; /* Debunked-claim accent, used by the misinformation case cards. */ --dlcl-alert: #b3261e; --dlcl-on-alert: #ffffff; --dlcl-alert-surface: #fceceb; --dlcl-on-alert-surface: #8c1d18; /* The wordmark is solid black on transparency and the partner marks are dark line art, so both need help once the page goes dark: the wordmark swaps to the white dlcl-logo-invert.png, the partner marks get a light chip. */ --dlcl-logo-light-display: inline; --dlcl-logo-dark-display: none; --dlcl-logo-chip: transparent; /* Case-study band: the scrim laid over the Bondi photograph, and the accent for text printed straight onto it. */ --dlcl-band-rgb: 252 249 248; --dlcl-on-photo-accent: #8c005a; --dlcl-sun-display: inline; --dlcl-moon-display: none; color-scheme: light; } /* Dark palette. Declared twice on purpose: once for visitors who have not picked a theme (follow the OS) and once for an explicit data-theme="dark". Keep the two lists in sync. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dlcl-primary: #ffa9d2; --dlcl-on-primary: #5e0039; --dlcl-primary-container: #8e1e60; --dlcl-on-primary-container: #ffe0ee; --dlcl-primary-hover: #ffd0e6; --dlcl-secondary: #bcb1ec; --dlcl-on-secondary: #291d5c; --dlcl-tertiary: #8ad4f5; --dlcl-on-tertiary: #003549; --dlcl-background: #141112; --dlcl-surface: #1c191a; --dlcl-surface-low: #232021; --dlcl-border: #3a3435; --dlcl-on-background: #ece0e3; --dlcl-on-surface-variant: #d6c1c9; --dlcl-inverse-surface: #0e0c0d; --dlcl-inverse-on-surface: #ece0e3; --dlcl-footer-heading: #bfb3b7; --dlcl-footer-link-hover: #ffd0e6; --dlcl-alert: #ffb4ab; --dlcl-on-alert: #601410; --dlcl-alert-surface: #33100d; --dlcl-on-alert-surface: #ffdad6; --dlcl-logo-light-display: none; --dlcl-logo-dark-display: inline; --dlcl-logo-chip: #f3f0ef; --dlcl-band-rgb: 15 13 14; --dlcl-on-photo-accent: #ffd0e6; --dlcl-sun-display: none; --dlcl-moon-display: inline; color-scheme: dark; } } :root[data-theme="dark"] { --dlcl-primary: #ffa9d2; --dlcl-on-primary: #5e0039; --dlcl-primary-container: #8e1e60; --dlcl-on-primary-container: #ffe0ee; --dlcl-primary-hover: #ffd0e6; --dlcl-secondary: #bcb1ec; --dlcl-on-secondary: #291d5c; --dlcl-tertiary: #8ad4f5; --dlcl-on-tertiary: #003549; --dlcl-background: #141112; --dlcl-surface: #1c191a; --dlcl-surface-low: #232021; --dlcl-border: #3a3435; --dlcl-on-background: #ece0e3; --dlcl-on-surface-variant: #d6c1c9; --dlcl-inverse-surface: #0e0c0d; --dlcl-inverse-on-surface: #ece0e3; --dlcl-footer-heading: #bfb3b7; --dlcl-footer-link-hover: #ffd0e6; --dlcl-alert: #ffb4ab; --dlcl-on-alert: #601410; --dlcl-alert-surface: #33100d; --dlcl-on-alert-surface: #ffdad6; --dlcl-logo-light-display: none; --dlcl-logo-dark-display: inline; --dlcl-logo-chip: #f3f0ef; --dlcl-band-rgb: 15 13 14; --dlcl-on-photo-accent: #ffd0e6; --dlcl-sun-display: none; --dlcl-moon-display: inline; color-scheme: dark; } /* Bind Pico to the DLCL tokens. These reference the palette above, so they resolve per theme automatically and Pico never supplies a colour of its own. Pico sets colour directly on p/ul/ol/table/headings, which is why an unbound --pico-color used to show as pale grey on our always-light surfaces when the device was in dark mode. */ :root { --pico-font-family: "Source Sans 3", system-ui, sans-serif; --pico-color: var(--dlcl-on-background); --pico-background-color: var(--dlcl-background); --pico-muted-color: var(--dlcl-on-surface-variant); --pico-muted-border-color: var(--dlcl-border); --pico-h1-color: var(--dlcl-on-background); --pico-h2-color: var(--dlcl-on-background); --pico-h3-color: var(--dlcl-on-background); --pico-h4-color: var(--dlcl-on-background); --pico-h5-color: var(--dlcl-on-background); --pico-h6-color: var(--dlcl-on-background); --pico-primary: var(--dlcl-primary); --pico-primary-hover: var(--dlcl-primary-hover); --pico-primary-underline: var(--dlcl-primary-hover); } /* Pico scales the root font size with the viewport (up to 131.25% at 1536px), but .dlcl-container is capped at a fixed 1200px. Past 125% the rem-sized navbar outgrows that container and wraps into a 200px-tall stack on large monitors, so hold the last step that still fits. */ @media (min-width: 1536px) { :root { --pico-font-size: 125%; } } /* The navbar is sticky, so anchor jumps (/#mission, /#why, ...) would land the target heading underneath it without this offset. */ section[id] { scroll-margin-top: 7rem; } body { background: var(--dlcl-background); color: var(--dlcl-on-background); } h1, h2, h3, h4, h5, h6 { font-family: "Liberation Sans", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.01em; color: var(--dlcl-on-background); } /* Inline icons (partials/icon.html). Sized in em so they track the text they sit in, exactly as the icon font did. */ .dlcl-icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; fill: currentColor; vertical-align: -0.15em; } .dlcl-container { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; } .dlcl-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 700; color: var(--dlcl-primary); } .dlcl-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; color: var(--dlcl-on-surface-variant); margin-bottom: 1rem; } /* Buttons */ .dlcl-btn { display: inline-block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.95rem; line-height: 1; padding: 0.75rem 1.75rem; border-radius: 0.25rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.15s, color 0.15s; } .dlcl-btn-solid { background: var(--dlcl-primary); color: var(--dlcl-on-primary); } .dlcl-btn-solid:hover { background: var(--dlcl-primary-container); color: var(--dlcl-on-primary-container); } .dlcl-btn-outline { background: transparent; color: var(--dlcl-primary); border-color: var(--dlcl-primary); } .dlcl-btn-outline:hover:not(:disabled) { background: var(--dlcl-primary); color: var(--dlcl-on-primary); } .dlcl-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; } /* Navbar */ .dlcl-navbar { background: var(--dlcl-surface); border-bottom: 1px solid var(--dlcl-border); position: sticky; top: 0; z-index: 50; } .dlcl-navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: relative; } .dlcl-brand-group { flex: 0 1 auto; min-width: 0; } .dlcl-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; text-decoration: none; } .dlcl-brand-logo { /* The squash came from pairing a fixed `height` with a flex-shrinkable width. Sizing the wordmark by max-height with both dimensions `auto` hands it back to the replaced-element sizing rules, so on a viewport too narrow even for the collapsed bar it scales down proportionally instead. */ flex: 0 1 auto; height: auto; width: auto; max-height: 2.25rem; max-width: 100%; } /* Only one of the two wordmark files is in the layout at a time. */ .dlcl-brand-logo-light { display: var(--dlcl-logo-light-display); } .dlcl-brand-logo-dark { display: var(--dlcl-logo-dark-display); } .dlcl-brand-name { font-family: "Liberation Sans", Arial, Helvetica, sans-serif; font-weight: 700; color: var(--dlcl-on-background); letter-spacing: -0.01em; } /* The burger and its checkbox only exist below the nav breakpoint. The sibling combinator is not decorative: Pico ships `[type=checkbox]~label { display: inline-block }` at specificity (0,1,1), which outranks a bare `.dlcl-nav-burger` (0,1,0) and would leave the burger painted on desktop. Every rule that sets `display` on the burger has to carry at least that much weight. */ .dlcl-nav-toggle, .dlcl-nav-toggle ~ .dlcl-nav-burger { display: none; } /* Theme toggle. Pico styles bare