/* Design tokens, reset and shared type styles. */ :root { /* Colour */ --ink: #111111; --paper: #FFFFFF; --accent: #FFCF00; /* alternatives from the design: #D4F20A #2F62C9 #FF6B4A */ --text-muted: #4A4A4A; --text-placeholder: #6E6E6E; --on-accent: #111111; /* text on accent fills; the same in both themes */ --footer-bg: #111111; --footer-fg: #FFFFFF; --footer-muted: #BDBDBD; --footer-rule: #3A3A3A; --preview-dim: 1; color-scheme: light; /* Type */ --font-sans: 'Google Sans', system-ui, sans-serif; --font-mono: 'Google Sans Code', ui-monospace, monospace; --label-size: 10px; /* Lines and shadows (the hard, offset "brutalist" shadow) */ --rule: 2px solid var(--ink); --shadow-sm: 3px 3px 0 var(--ink); --shadow-md: 4px 4px 0 var(--ink); /* Page side padding */ --gutter: 16px; } /* Dark theme, set on by js/theme.js. Ink and paper swap, so borders and the hard shadows turn light on a dark page. */ :root[data-theme="dark"] { --ink: #EDEDED; --paper: #141414; --text-muted: #A8A8A8; --text-placeholder: #8A8A8A; --footer-bg: #000000; --footer-rule: #2E2E2E; --preview-dim: .8; color-scheme: dark; } @media (min-width: 768px) { :root { --label-size: 11px; --gutter: 40px; } } @media (min-width: 1280px) { :root { /* At least 64–120px, and wide enough to keep content within 1360px on large screens. (100% resolves against the full-width section each padding is applied to.) */ --gutter: max(clamp(64px, 6vw, 120px), calc((100% - 1360px) / 2)); } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } h1, p { margin: 0; } a { color: var(--ink); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; cursor: pointer; } button:disabled { opacity: .35; cursor: default; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; } .icon { stroke-width: 2.2; flex-shrink: 0; } /* Small uppercase monospace text used for buttons, meta and captions. */ .label { font-family: var(--font-mono); font-size: var(--label-size); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .label--muted { color: var(--text-muted); font-weight: 400; }