/* * voidware.com * * Two palettes live here on purpose. * * The studio chrome — header, hero furniture, About, CTA, footer — is cool and * metallic, to agree with the Strand mark, which is a brushed silver ribbon. * The games are not. Each story section and each card carries its own genre * accent via [data-theme], so vivid game worlds sit inside a neutral frame * rather than fighting it. */ /* ---------------------------------------------------------------- tokens - */ :root { /* studio ground, coolest to warmest */ --ink: #0a0c11; --ink-raise: #12151d; --ink-panel: #171b25; --rule: rgba(200, 208, 220, 0.14); --rule-firm: rgba(200, 208, 220, 0.28); --paper: #eef1f6; --paper-mid: #b8c0cd; --paper-dim: #838d9d; --steel: #c8d0dc; /* the mark is brushed metal; the wordmark uses the same sweep */ --metal: linear-gradient(155deg, #ffffff 0%, #ccd4e0 26%, #8d97a6 48%, #f2f5f9 68%, #a8b2c1 88%, #dde3ec 100%); /* genre accent, overridden per section by [data-theme] */ --accent: var(--steel); --accent-ink: #0a0c11; --tint: transparent; --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem; --t-hero: clamp(2.4rem, 6.4vw, 5rem); --t-h2: clamp(1.75rem, 4vw, 2.9rem); --t-h3: clamp(1.2rem, 2.2vw, 1.55rem); --t-lead: clamp(1.05rem, 1.6vw, 1.3rem); --t-body: clamp(1rem, 1.1vw, 1.09rem); --t-small: 0.875rem; --t-micro: 0.75rem; --radius: 14px; --radius-sm: 8px; --radius-pill: 999px; --shadow: 0 18px 44px rgba(0, 0, 0, 0.55); --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.4); --fast: 140ms; --slow: 420ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --gutter: clamp(1.1rem, 4vw, 3rem); --measure: 62ch; --header-h: 62px; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Display only — one weight, no optical-size axis. Never below ~20px. */ --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; } /* Genre palettes, carried over from the per-game themes of the old site. Scoped to a subtree, not , so several can coexist on one page. */ [data-theme='fantasy'] { --accent: #bf5af2; --accent-ink: #14061f; --tint: #1a0f2e; } [data-theme='crime'] { --accent: #e8603c; --accent-ink: #1a0503; --tint: #140705; } [data-theme='scifi'] { --accent: #04d9ff; --accent-ink: #001318; --tint: #020a14; } [data-theme='retro'] { --accent: #ffd60a; --accent-ink: #201a00; --tint: #171614; } /* Non-game products get their own accents, taken from the hardware each one recreates: 'vfd' is the green of the vacuum fluorescent display in RetroFX, 'lcd' the amber of the C and AC keys on the JL-120, which has a plain LCD. */ [data-theme='vfd'] { --accent: #7bf7b0; --accent-ink: #04170d; --tint: #0b1410; } [data-theme='lcd'] { --accent: #f0b93c; --accent-ink: #1c1300; --tint: #14110a; } /* ------------------------------------------------------------------ base - */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-ui); font-size: var(--t-body); /* 400, not 300: light weights optically thin out on a near-black ground */ font-weight: 400; line-height: 1.65; overflow-x: hidden; font-synthesis: none; } /* Instrument Serif is a display face: one weight, drawn for large sizes. It takes the big editorial headings; anything under about 20px would go thin and characterless in it, so those are set in Inter instead. Asking for a bold it does not have would only get a synthesised one, so h1/h2 are 400. */ h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.06; margin: 0; letter-spacing: 0; } h3, h4 { font-family: var(--font-ui); font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: -0.012em; } p { margin: 0 0 var(--s4); } p:last-child { margin-bottom: 0; } a { color: inherit; } img, video { max-width: 100%; display: block; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 3px; } .wrap { width: min(1220px, 100%); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { width: min(860px, 100%); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: var(--s3); left: var(--s3); z-index: 200; padding: var(--s2) var(--s4); background: var(--paper); color: var(--ink); border-radius: var(--radius-sm); transform: translateY(-160%); transition: transform var(--fast) var(--ease); } .skip-link:focus { transform: none; } /* section furniture */ .section { padding-block: var(--s9); position: relative; } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); } .section-title { font-size: var(--t-h2); } .eyebrow { font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper-dim); margin: 0 0 var(--s3); } .lead { font-size: var(--t-lead); color: var(--paper-mid); max-width: var(--measure); } /* The display face is a single 400 weight, so a heading no longer separates itself from the paragraph under it by weight alone. Give it some air. */ .section-title + .lead, .section-title + .prose, .section-title + .qa { margin-top: var(--s4); } /* ---------------------------------------------------------------- brand - */ /* The paint goes on the