/* * The whole design system. Every colour, size and space on this site is one of * these values, and the rule is enforced rather than hoped for: * site/tests/content.test.mjs fails the build if a raw colour appears anywhere * in style.css or in any page. * * ## Two palettes, and they must not be confused * * THE SUBJECT is the sixteen IBM EGA colours, read out of the game's own * executable at 0x04082 as IRGB. They exist here so that pages about the game's * palettes can show them. They are content, not decoration, and no interface * element may use one directly. * * THE INTERFACE is nine roles. Everything the site draws for itself comes from * those nine, and two of them are drawn from the subject palette on purpose: * the accent is EGA yellow and the link is EGA bright cyan, because a site * about a 16-colour game should be built from its colours rather than merely * printing them. * * Adding a tenth role is a decision. Reaching for a hex value is a mistake. */ :root { /* ---- The subject. Sixteen EGA colours, IRGB. Content only ---- */ --ega-0: #000000; /* black */ --ega-1: #0000AA; /* blue */ --ega-2: #00AA00; /* green */ --ega-3: #00AAAA; /* cyan */ --ega-4: #AA0000; /* red */ --ega-5: #AA00AA; /* magenta */ --ega-6: #AA5500; /* brown, the famous exception */ --ega-7: #AAAAAA; /* light grey */ --ega-8: #555555; /* dark grey */ --ega-9: #5555FF; /* bright blue */ --ega-10: #55FF55; /* bright green */ --ega-11: #55FFFF; /* bright cyan */ --ega-12: #FF5555; /* bright red */ --ega-13: #FF55FF; /* bright magenta */ --ega-14: #FFFF55; /* yellow */ --ega-15: #FFFFFF; /* white */ /* ---- The interface ---- Contrast, measured rather than asserted - on --ground and on --surface, because both carry text and the second is the worse case: ink 19.6 / 17.7 body text ink-dim 12.5 / 11.3 secondary text ink-quiet 6.8 / 6.2 captions and metadata, above the 4.5 floor accent 18.4 / 16.6 the one emphasis colour ground on ember 5.1 at its red end, 8.4 at its orange end: the text on a call to action (13 Oct 2026; white on the ember measured 2.4 to 4.0 and failed) link 16.0 / 14.5 links (inline code moved to ink-dim on 13 Oct 2026: cyan pills beside cyan links read as clickable) danger 6.2 / 5.6 warnings positive 14.8 / 13.4 confirmations scorch 5.8 / 5.3 the flat ember, for text that must be hot The surfaces moved from neutral black to violet-black on 22 September 2026 and every one of these was re-measured. Leaving the old figures under new values would be the worst kind of comment: a number that looks checked and is not. */ --ground: #0E0918; --surface: #1A1624; --raised: #1B1728; --shell: #2C2834; --line: #3E3A46; --ink: #FFFFFF; --ink-dim: #D1CECE; --ink-quiet: #9D9797; --accent: var(--ega-14); --link: var(--ega-11); --danger: var(--ega-12); --positive: var(--ega-10); /* ---- The fire, and the current ---- Two gradients and one flat accent, and they are the whole reason this palette changed. The surfaces are violet-black rather than neutral black, and the violet undertone is the point: a generic dark mode is grey, and this is lit from within. THE EMBER IS FOR CALLS TO ACTION AND NOTHING ELSE. A gradient that appears on a heading, a border and a button means nothing when it appears on a button. One job. The current is the cold counterpart and belongs to links, focus and anything the interface is tracking rather than asking for. */ --ember: linear-gradient(30deg, #FD8925, #FF0C00); --current: linear-gradient(141deg, #077AC7, #6B21EF); --scorch: #FF492C; --glow: #56312D; /* The analytics notice is drawn as a DOS dialog, because this is a site about a DOS game and that notice is the one place the interface can quote its subject without getting in the way of it. That look needs the blue, and EGA blue is the blue - a near miss would read as a mistake. KEPT through the 22 September restyle, deliberately. The new palette has an electric-blue gradient of its own and using it here was the obvious move; it would also have thrown away the only moment on the site where the interface speaks in the game's own voice. The gradient is for the things the interface is tracking. This is a quotation. Measured against the dialog itself, so it is legible rather than merely period - unchanged by the restyle, because the dialog does not sit on --ground: ink 10.5:1 the title ink-dim 5.7:1 the body, above the 4.5 floor link 10.8:1 the link out to the legal page */ --dialog: var(--ega-1); /* ---- Type ---- */ /* Inter since 13 October 2026, in place of Epilogue: a display face with uneven texture at reading sizes, where Inter is built for text on screens and keeps long technical paragraphs and hex values even (Dan, from five live previews). */ --type-text: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --type-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* The type scale, one set of sizes for the whole site (13 October 2026, Dan: "make the content font smaller and make sure fonts are consistent"). Body is 16px, and every size on the site is one of these; a size written anywhere else is a mistake. Flattened the same day ("the font sizes vary too much"): five sizes close together, with weight and colour doing the rest. Monospace is for code, keys and data only. */ --step--1: 0.875rem; /* 14px menus, captions, labels, the footer */ --step-0: 1rem; /* 16px body text, tables, buttons */ --step-1: 1.125rem; /* 18px the standfirst, h3 */ --step-2: 1.375rem; /* 22px h2 */ --step-3: 1.875rem; /* 30px h1 on a phone */ --step-4: 2.25rem; /* 36px h1 */ /* Every button is one size (13 October 2026): the masthead's Play and the page's calls to action were three heights and two type sizes. */ --control-height: 2.5rem; --control-type: 1rem; /* ---- Space. One ratio, no arbitrary values ---- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1.25rem; --space-md: 2rem; --space-lg: 3.25rem; --space-xl: 5.25rem; --space-2xl: 8rem; /* One column width, and text fills it. There is no separate measure: a paragraph that stops short of its own container looks like a mistake, whatever the typography books say about line length. So the column itself is the setting, and everything in it - prose, tables, screenshots - runs the full width. 78rem is the masthead's own width, so the brand, the navigation, the content and the footer all sit on exactly the same two edges and the margin at the sides is as small as the design allows. Held on 29 September 2026: a narrower 43rem reading column was tried in a tidy-up and taken straight back out (Dan: "you better not of squashed the page and increased the margin"). Keep the page this wide. */ --page: 78rem; --leading: 1.6; --leading-tight: 1.15; /* Four radii, not one. A 3px corner everywhere was the old system saying "this is a technical document"; the sizes below say which thing you are looking at - a control, a panel, a card, a pill. */ --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* Elevation is a STEP IN COLOUR, not a shadow. That is the one structural rule this palette brings: --ground, --surface, --raised and --shell are a ladder, and a panel goes up it rather than casting anything. The two shadows below are for the things that genuinely float. */ --shadow-sm: 0 0 8px rgba(0, 0, 0, 0.26); --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 0 rgba(255, 142, 93, 0.3); } /* Inter carries 100 to 900 on one axis; JetBrains Mono 100 to 800. Both are subset to Latin and the punctuation this site uses, and both are served from this origin. No font CDN, so a visitor who opts out of analytics makes no request to anywhere but this server - the analytics tag is the site's only external origin, and it is not fetched for anybody who has opted out. */ @font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2-variations'), url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono.woff2') format('woff2-variations'), url('/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }