/* 0n1 — shared legal / support page styles. Self-contained: no external fonts or scripts, so these pages load instantly and work with JavaScript disabled (App Store review friendly). Per-app accent is set via the --accent custom property on . */ /* Design tokens — the single source of truth for every @font-face and for all color/space/type tokens (--bg, --panel, --border, --text, --text-dim, --heading, --accent) plus the per-game [data-theme] brand blocks. Generated from src/tokens/tokens.source.js by `npm run tokens`. This @import MUST stay the first statement (after comments) or the browser drops it. Every static page links this file, so all of them inherit the tokens with no per-page edit; a page picks its brand with (inline --accent still overrides during migration). */ @import "/tokens.css"; :root { /* Dark canvas during navigations — the browser clears to black between pages instead of flashing white. Behavioural, not a token. */ color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.72; -webkit-font-smoothing: antialiased; /* Slashed zero so the "0n1" brand never reads as "on1" in the system font. */ font-variant-numeric: slashed-zero; font-feature-settings: "zero" 1; padding: 0 24px 96px; } .wrap { /* Fill a good share of wide screens (≈60% on a big monitor) with a floor for mid-size screens and near-full width on mobile. Card grids (auto-fit) gain columns as this widens; running prose is capped separately below so lines stay readable. */ width: min(94vw, max(768px, 60vw)); margin: 0 auto; } /* Keep running text at a comfortable measure while grids, tables, cards, media and headings use the full column. Left-aligned (no auto-centering) so prose and full-width blocks share the column's left edge. Caps only bite at the top level — inside a card a paragraph is already narrower than this. The card/list grids (post-list, tool-list, repo-list) are excluded so they fill the width instead of hugging the left. */ .lead, .wrap > p, .wrap > ul:not(.post-list):not(.proj-list), .wrap > ol, .wrap > blockquote { max-width: 78ch; } /* ── Top bar ──────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--border); margin-bottom: 48px; } .wordmark { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; transition: color 0.2s; white-space: nowrap; } .wordmark:hover { color: var(--heading); } .topbar .app { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .topbar .app img { width: 26px; height: 26px; border-radius: 24%; display: block; } /* ── Document heading ─────────────────────────────────────────────── */ .doc-head { margin-bottom: 40px; } /* Breathing room below the full-bleed site header — the injected .site-chrome bar sits directly above the first content block, so give the page content air. Scoped to .doc-head so the SPA homepage (which also loads this sheet) is untouched. */ .site-chrome + .doc-head { margin-top: 32px; } .doc-head h1 { font-family: "Audiowide", sans-serif; font-weight: 400; font-size: clamp(1.45rem, 4.8vw, 2rem); line-height: 1.28; color: var(--heading); letter-spacing: 0; } /* Brand "0n1" lettermark in the self-hosted Audiowide wordmark face, whose zero carries its own slash so it never reads as "on1". Headings are Audiowide too now, so this mainly keeps the token at full size within them. The pages preload the font so it loads reliably on mobile. */ .brandmark { font-family: "Audiowide", sans-serif; font-weight: 400; font-size: 1em; } .doc-head .updated { margin-top: 14px; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--text-dim); } .lead { font-size: 1.08rem; color: var(--text); } /* ── Sections ─────────────────────────────────────────────────────── */ h2 { font-family: "Audiowide", sans-serif; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.01em; line-height: 1.3; color: var(--heading); margin: 44px 0 14px; padding-top: 8px; } h2 .num { color: var(--accent); font-size: 0.92rem; margin-right: 10px; vertical-align: 0.08em; letter-spacing: 0.05em; } h3 { font-size: 1.02rem; color: var(--heading); margin: 26px 0 8px; } p { margin: 0 0 16px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ul { margin: 0 0 16px; padding-left: 22px; } li { margin-bottom: 9px; } strong { color: var(--heading); font-weight: 600; } hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; } /* ── Callout box ── moved to tokens.css (.callout, component-token driven). ── */ /* ── Data table ───────────────────────────────────────────────────── */ .table-scroll { overflow-x: auto; margin: 20px 0; } table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 460px; } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } th { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } td { color: var(--text); } /* ── FAQ (support) ────────────────────────────────────────────────── */ .faq { margin: 12px 0 8px; } .faq h3 { margin-top: 24px; } .contact-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--ref-radius-xl); padding: 24px 26px; margin: 24px 0; } .contact-card a { font-weight: 600; } /* ── Call-to-action button ──────────────────────────────────────────── The shared filled CTA (.cta-btn) + its outline variant now live in tokens.css, driven by the --btn-* component tokens. The coming-soon hubs just add class="cta-btn"; each page's [data-theme] (or inline --accent) supplies the fill. Do NOT redefine .cta-btn here. */ /* ── Footer nav ───────────────────────────────────────────────────── */ .legal-nav { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px 24px; } .legal-nav a { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .legal-nav a:hover { color: var(--accent); text-decoration: none; } .foot { margin-top: 28px; font-size: 0.74rem; color: var(--text-dim); letter-spacing: 0.03em; } /* Social follow link in the page footer (sits between the nav and the copyright). */ .social-follow { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 0.84rem; letter-spacing: 0.01em; color: var(--text); text-decoration: none; } .social-follow:hover { color: var(--heading); } .social-follow svg { flex: none; }