/* ==========================================================================
don't bin gen z — shared design system
v3, 2026-08-06. Built from DBGZ Brand Kit v1 + the v3 prototype.
THIS FILE IS SHARED BY EVERY PAGE. It holds the tokens, the reset, @font-face,
the header, the footer, buttons, fields, modals, the lightbox, stars, the
notice primitives and the cookie consent banner — and nothing else. Anything
page-specific belongs in that page's own stylesheet under public/css/pages/,
where every class carries the
page prefix (.home-* .mat-* .opp-* .fund-* .priv-* .nf-*). Shared classes never
carry a prefix; page stylesheets never define an unprefixed class. That rule is
what stops two pages quietly redefining .card.
The prototype styles every element inline and fakes hover with a `style-hover`
attribute that browsers ignore. Everything below is the real thing: working
:hover, :focus-visible and prefers-reduced-motion.
========================================================================== */
/* --------------------------------------------------------------- @font-face
Self-hosted. The site used to pull Anton / Space Grotesk / Space Mono from
Google's CDN, which discloses every visitor's IP to Google — the privacy notice
says no third-party tracking, and LG München I 3 O 17493/20 held that
unconsented Google Fonts embedding breaches the GDPR. All three are SIL OFL 1.1.
Anton is the permanent display face for v3: the kit flags it as a stand-in for
Paalalabas Condensed, which still is not web-wired. --display is the single swap
point if that file ever arrives. */
@font-face {
font-family: 'Anton';
src: url('/fonts/anton-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('/fonts/space-grotesk-var.woff2') format('woff2');
font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Space Mono';
src: url('/fonts/space-mono-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Space Mono';
src: url('/fonts/space-mono-400-italic.woff2') format('woff2');
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Space Mono';
src: url('/fonts/space-mono-700.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Pagkaki';
src: url('/fonts/PAGKAKI-Regular.ttf') format('truetype');
font-weight: 400; font-style: normal; font-display: swap;
}
/* ------------------------------------------------------------------- tokens
The ONLY place a colour literal appears. Never set text on rust to --paper:
rust grounds take --chalk. The two prose greys are a hierarchy, not a rounding
error — --body-ink for the main argument, --body-ink-2 for anything supporting
it (standfirsts, card "why" text, list captions). */
:root {
--ink: #0B0B0B; /* near-black ground and body text */
--paper: #FFFFFF; /* light ground */
--rust: #C2371F; /* primary accent, links, rules */
--flare: #FF3A20; /* the full stop, focus rings, errors */
--amber: #FFB600; /* highlight, primary button on dark */
--slate: #2E2E39; /* secondary dark panel */
--slate-2: #46465A; /* borders inside slate panels */
--chalk: #DBDBDB; /* type on rust grounds */
--rule: #E5E3DB; /* hairlines on paper */
--body-ink: #1F1E1B; /* primary long-form prose */
--body-ink-2: #3D3C36; /* secondary prose */
--muted: #6B6A61; /* captions on paper */
--muted-dark: #C9C8BF; /* captions on dark */
--faint: #8F8E9B; /* legal / imprint */
--wash: #FAF8F2; /* hover fill, dashed placeholder ground */
--dash: #B7B5AB; /* dashed borders */
--ink-field: #1B1B22; /* input ground inside an ink panel */
--slate-field: #23232D; /* input ground inside a slate panel */
--scrim: rgba(11, 11, 11, 0.92); /* modal backdrop */
--scrim-2: rgba(11, 11, 11, 0.95); /* lightbox backdrop */
--display: Anton, sans-serif;
--mono: 'Space Mono', monospace;
--sans: 'Space Grotesk', sans-serif;
--scrawl: 'Pagkaki', cursive;
--shell: 1220px;
--gut: clamp(18px, 4vw, 28px);
--header-h: 104px;
}
/* -------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: var(--header-h); /* plain anchor jumps clear the sticky header, no JS */
}
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 18px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
main#main {
flex: 1 0 auto; /* absorbs leftover height so the footer sits at the viewport bottom on short pages */
}
/* .nf-wrap and .adm-login are the only two page panels that paint a
full-bleed dark background directly inside main — when main's flex-grow
stretches it on a short page, a plain block child does not grow with it
(percentage heights don't resolve here). Flexifying main is scoped to just
these two pages via :has(), so it never touches the homepage's
margin-collapsing prose flow or any other page. */
main#main:has(> .nf-wrap),
main#main:has(> .adm-login) {
display: flex;
flex-direction: column;
}
img, svg, video { max-width: 100%; }
img, video { height: auto; }
a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--rust);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 3px; color: var(--rust); }
input, select, button, textarea {
font-family: var(--mono);
font-size: 16px;
color: inherit;
}
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 3px solid var(--flare); outline-offset: 2px; }
::selection { background: var(--amber); color: var(--ink); }
[hidden] { display: none !important; }
/* ------------------------------------------------------------------- layout */
/* the page shell. every band that needs the 1220px column wraps its content in it. */
.wrap {
max-width: var(--shell);
margin: 0 auto;
padding: 0 var(--gut);
}
/* skip link — off screen until focused, then pinned top-left over the header */
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--amber);
color: var(--ink);
font-family: var(--mono);
font-weight: 700;
font-size: 14px;
padding: 14px 18px;
text-decoration: none;
}
.skip:focus { left: 0; }
/* visually hidden, still announced */
.vh {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------- type */
.eyebrow {
margin: 0 0 12px;
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.eyebrow--rust { color: var(--rust); }
.eyebrow--amber { color: var(--amber); }
/* the full stop. it is --flare everywhere it appears, and it is the only place
--flare is used as type. */
.dot { color: var(--flare); }
.mono { font-family: var(--mono); }
/* the marker-pen voice. one line at a time, real numbers only, never for UI. */
.scrawl {
font-family: var(--scrawl);
line-height: 1.08;
text-transform: uppercase;
}
/* -------------------------------------------------------------------- prose
The rendered markdown body of an article, and any long-form block that wants
the same rhythm. Wrap it once: