/* * AlphaLudo — the shared design system. * * Every page loads this file first. It holds the tokens (colour, type, space), * the fonts, and the pieces every page has: the site bar, links, buttons, the * footer. Page-specific layers (reading pages, the game) build on it. * * Two surfaces, one language: * night — the board lives here: home hero, play. * paper — reading: research, about, home lower half. * A section can switch surface with .night / .paper; the tokens below are * re-pointed per surface, so components never ask which one they are on. * * Colour carries meaning and nothing else: * --you (green) the human player * --ai (amber) the model * --brass hairlines and the mark, never text on paper * --alarm (red) errors and the bug log only */ /* ── Fonts (self-hosted: no third-party request, no render-blocking CSS) ── */ /* Instrument Serif for display: one weight, drawn to be set large. Geist for everything read and clicked. Geist Mono for figures. */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/geist.woff2') format('woff2-variations'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/geist-mono.woff2') format('woff2-variations'); } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* Fixed palette */ /* "Jade salon": a card table at night. Green-black room, bone and ivory, mint for emphasis, the seat colours for the players. */ --night-0: #060d0a; --night-1: #0b1510; --night-2: #122019; --night-3: #1b2c23; --paper-0: #f3f0e8; --paper-1: #ebe6da; --paper-2: #e0d9c9; --ink-0: #0f1a14; --cream: #f1ede3; --ivory: #efe4c8; --mint: #8fd9b6; --jade: #1d6b4c; --brass: #d8ceb2; /* bone: hairlines and the mark, as the arena's metal */ --brass-soft: rgba(216, 206, 178, 0.28); --you: #22a468; /* the board's emerald, a touch lighter for UI */ --you-deep: #0f7e4c; --ai: #e5a02e; /* the board's amber */ --ai-deep: #a86a0c; --alarm: #d0503a; --sapphire: #3b7bc8; --crimson: #b8343a; /* Type */ --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Seven steps. Nothing on the site is smaller than --t-1. */ --t-1: 0.8125rem; /* 13px captions, labels */ --t-2: 0.9375rem; /* 15px UI, secondary */ --t-3: 1.0625rem; /* 17px body */ --t-4: 1.3125rem; /* 21px lead, h4 */ --t-5: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); /* h3 */ --t-6: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); /* h2 */ --t-7: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem); /* display */ /* Space: an 8px rhythm with a 4px half-step */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --measure: 40rem; --wide: 72rem; --bar-h: 3.5rem; --radius-s: 6px; --radius: 10px; --radius-l: 16px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* Surface tokens. Components use only these. */ .night, :root { color-scheme: dark; --bg: var(--night-0); --bg-raised: var(--night-1); --bg-sunk: #090706; --surface: var(--night-2); --surface-2: var(--night-3); --text: #f1ede3; --text-2: #b6bcb0; --text-3: #87918a; --line: rgba(241, 237, 227, 0.1); --line-2: rgba(241, 237, 227, 0.19); --accent: var(--ivory); /* the primary action on night */ --accent-ink: #0b1510; /* text on an accent fill */ --emph: var(--mint); /* italic emphasis, kickers, links' arrows */ --you-text: #4cc98c; --ai-text: #f0b54f; --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.7); } .paper { color-scheme: light; --bg: var(--paper-0); --bg-raised: #f8f6f0; --bg-sunk: var(--paper-1); --surface: var(--paper-1); --surface-2: var(--paper-2); --text: var(--ink-0); --text-2: #3f4b44; --text-3: #52605a; --line: rgba(15, 26, 20, 0.12); --line-2: rgba(15, 26, 20, 0.22); --accent: var(--jade); /* the primary action on paper */ --accent-ink: #f3f0e8; --emph: var(--jade); --you-text: #096a3f; --ai-text: #7d4d06; --shadow: 0 1px 2px rgba(15, 30, 22, 0.06), 0 12px 32px -18px rgba(15, 30, 22, 0.35); } /* A surface paints itself, so a .paper band inside a .night page (or the reverse) is complete on its own. */ .paper, .night { background-color: var(--bg); color: var(--text); } /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 1rem); } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--t-3); line-height: 1.6; font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; /* never fake a bold or italic Instrument Serif */ } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } table { border-collapse: collapse; } [hidden] { display: none !important; } ::selection { background: color-mix(in srgb, var(--mint) 40%, transparent); color: var(--text); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: var(--s-2) var(--s-4); background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-s); font-weight: 600; text-decoration: none; } .skip-link:focus { top: var(--s-3); } /* ── Type ───────────────────────────────────────────────────────────────── */ .display, h1 { font-family: var(--serif); font-size: var(--t-7); font-weight: 400; line-height: 1; letter-spacing: -0.015em; text-wrap: balance; } h2 { font-family: var(--serif); font-size: var(--t-6); font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; } h3 { font-family: var(--serif); font-size: var(--t-5); font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; text-wrap: balance; } h4 { font-family: var(--sans); font-size: var(--t-3); font-weight: 650; line-height: 1.35; } .lead { font-size: var(--t-4); line-height: 1.5; color: var(--text-2); text-wrap: pretty; } p { text-wrap: pretty; } em.serif, .serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; } /* The site's one label voice: mono small caps in the emphasis colour, the same as the story's chapter labels. */ .eyebrow { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emph); } .num, .mono { font-family: var(--mono); font-feature-settings: 'zero' 0, 'tnum' 1; letter-spacing: -0.01em; } .tnum { font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration-line: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color 0.2s, color 0.2s; } a:hover { text-decoration-color: currentColor; } .link-accent { color: var(--accent); } kbd { font-family: var(--mono); font-size: 0.85em; padding: 0.05em 0.4em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-line: var(--line-2); display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 44px; padding: 0 1.15em; border: 1px solid var(--btn-line); border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--sans); font-size: var(--t-2); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background 0.18s, border-color 0.18s, transform 0.18s var(--ease-out), box-shadow 0.18s; -webkit-tap-highlight-color: transparent; } .btn:hover { border-color: var(--text-3); } .btn:active { transform: translateY(1px) scale(0.985); } .btn svg { width: 1.05em; height: 1.05em; flex: none; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } .btn-primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-line: transparent; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent); } .btn-primary:hover { --btn-bg: color-mix(in srgb, var(--accent) 88%, white); border-color: transparent; } .btn-lg { min-height: 52px; padding: 0 1.5em; font-size: var(--t-3); } .btn-ghost { --btn-bg: transparent; --btn-line: transparent; } .btn-ghost:hover { --btn-bg: var(--surface); border-color: transparent; } .btn-icon { width: 44px; padding: 0; } .arrow-link { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; text-decoration: none; color: var(--text); } /* The empty alt text keeps the arrow out of the link's spoken name. */ .arrow-link::after { content: '→'; content: '→' / ''; transition: transform 0.2s var(--ease-out); color: var(--emph); } .arrow-link:hover::after { transform: translateX(3px); } /* ── The site bar ───────────────────────────────────────────────────────── */ .sitebar { position: sticky; top: 0; z-index: 50; height: var(--bar-h); display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--gutter); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); /* Solid, not frosted: a blur over the live 3D canvas cost more GPU time than the board itself, and a near-opaque bar let text ghost through. (At the table it is translucent on purpose; see app.css.) */ background: var(--bg); border-bottom: 1px solid var(--line); transition: background-color 0.3s, color 0.3s, border-color 0.3s; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: auto; color: var(--text); text-decoration: none; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; } .brand-mark { width: 28px; height: 28px; flex: none; } .brand b { font-weight: inherit; font-style: italic; color: inherit; } .sitenav { display: flex; align-items: center; gap: var(--s-1); } .sitenav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.8rem; border-radius: 999px; color: var(--text-2); font-size: var(--t-2); font-weight: 550; text-decoration: none; transition: color 0.15s, background 0.15s; } .sitenav a:hover { color: var(--text); background: var(--surface); } .sitenav a[aria-current="page"] { color: var(--text); } .sitenav a[aria-current="page"]::after { content: ''; width: 5px; height: 5px; margin-left: 0.45rem; border-radius: 50%; background: var(--accent); } .sitenav .nav-play { margin-left: var(--s-2); color: var(--accent-ink); background: var(--accent); font-weight: 650; padding: 0 1rem; } .sitenav .nav-play:hover { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 88%, white); } .sitenav .nav-gh { padding: 0; width: 40px; justify-content: center; } .sitenav .nav-gh svg { width: 19px; height: 19px; } @media (max-width: 640px) { .sitenav .nav-hide-sm { display: none; } .sitenav a { padding: 0 0.6rem; } .brand { font-size: 1.125rem; } } /* ── Footer ─────────────────────────────────────────────────────────────── */ .sitefoot { border-top: 1px solid var(--line); padding: var(--s-7) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); color: var(--text-2); font-size: var(--t-2); } .sitefoot-inner { /* The footer pads itself by the gutter; .wrap pads inside its max width. Take the gutters off here so both columns start at the same x. */ max-width: calc(var(--wide) - 2 * var(--gutter)); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-6); } .sitefoot h2 { font-family: var(--sans); font-size: var(--t-1); font-weight: 650; letter-spacing: 0.02em; color: var(--text-3); margin-bottom: var(--s-3); } .sitefoot ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); } .sitefoot a { color: var(--text-2); text-decoration: none; } .sitefoot a:hover { color: var(--text); text-decoration: underline; } .sitefoot .foot-brand p { margin-top: var(--s-3); max-width: 22rem; } .sitefoot .foot-meta { max-width: calc(var(--wide) - 2 * var(--gutter)); margin: var(--s-7) auto 0; padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); color: var(--text-3); font-size: var(--t-1); } @media (max-width: 760px) { .sitefoot-inner { grid-template-columns: 1fr 1fr; } .sitefoot .foot-brand { grid-column: 1 / -1; } } /* ── Shared bits ────────────────────────────────────────────────────────── */ .wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); } .rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent); margin: 0; } .chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.65em; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--t-1); font-weight: 600; color: var(--text-2); white-space: nowrap; } .dot { width: 0.6em; height: 0.6em; border-radius: 50%; display: inline-block; flex: none; } .dot-you { background: var(--you); } .dot-ai { background: var(--ai); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }