/* ============================================================================ LCD DESIGN TOKENS — LLM Explorer Source: "LLM Explorer interface redesign" design canvas, token sheet 1M. Colour values differ from the mockup where the mockup failed WCAG AA. They are produced by tools/contrast-check.js, not hand-picked; see docs/redesign-lcd-plan.md D1. Do not edit a colour here without re-running: node tools/contrast-check.js --solve Theme is selected by [data-theme] on , set before first paint by the inline bootstrap script in templates/header.html. ========================================================================= */ /* ------------------------------------------------------------------ fonts */ /* Latin subset, self-hosted. The VT323 pixel face was retired in the layout polish pass: --lcd-font-lcd now resolves to the regular mono stack. */ @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lcd/ibm-plex-sans-condensed-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/lcd/ibm-plex-sans-condensed-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lcd/ibm-plex-mono-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/lcd/ibm-plex-mono-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------- light — paper LCD */ :root { --lcd-font-ui: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif; --lcd-font-data: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* Kept as an alias so every --lcd-font-lcd reference degrades to the regular mono face; the pixel font is gone. */ --lcd-font-lcd: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* type scale — mockup ramp x1.15-1.2 with an 11px floor (D2) */ --fs-micro: 11px; /* column heads, meta labels (was 9.5) */ --fs-label: 11.5px; /* eyebrows, footer (was 10) */ --fs-key: 12px; /* key/button text, chips (was 10.5)*/ --fs-data: 12px; /* secondary data cells (was 11) */ --fs-data-lg: 12.5px; /* primary data cells (was 11.5)*/ --fs-ui: 14px; /* body (was 13) */ --fs-body: 15px; /* long-form prose */ --fs-h3: 18px; --fs-h2: 20px; --fs-h1: 24px; --fs-title: 30px; /* model page title */ /* Numeral sizes rebalanced for the mono face: VT323 was ~40% narrower, so the old display sizes overwhelm the layout when set in Plex Mono. */ --fs-num-sm: 13px; /* inline numerals (score cells) */ --fs-num: 24px; /* stat tiles */ --fs-num-lg: 26px; /* bench cards */ --fs-hero: 36px; --fs-counter: 40px; /* grid templates (mockup 1M) */ --lcd-grid-13: minmax(230px, 1.6fr) 118px 54px 68px 70px 76px 92px 60px 56px 88px 88px 96px 150px; --lcd-grid-5: minmax(210px, 1fr) 130px 96px 64px 76px; --lcd-grid-alt: minmax(150px, 1fr) 96px 76px 50px; /* surfaces — `well` and `deep` lifted from the mockup so the 4-step ink ramp survives AA on every text-bearing surface (D1). Recess is carried by --lcd-inset, which is how the design signals it anyway. */ --lcd-bg: #c9d1c8; --lcd-panel: #d6dcd4; --lcd-well: #d0d7cf; /* mockup #bcc5bb */ --lcd-deep: #b7c0b6; /* mockup #aeb8ad — bar tracks only, no text */ /* ink */ --lcd-fg: #333833; --lcd-fg-dim: #474c46; --lcd-fg-faint: #555a54; --lcd-fg-ghost: #7d837b; /* disabled only — AA-exempt */ /* accent: --lcd-accent is display-only (>=24px, 3:1). Small text and links use --lcd-link, which clears 4.5:1 on every surface. */ --lcd-accent: #b55233; --lcd-accent-bright: #a8482b; --lcd-link: #8f3a22; --lcd-link-bright: #b55233; --lcd-ok: #3f5a4b; --lcd-bad: #8f3a22; --lcd-line: #4a4f49; /* Static frames (panels, tables, wells). Deliberately quiet: frames are grouping, not affordance — keys keep the strong --lcd-line. */ --lcd-border: rgba(51, 56, 51, .24); --lcd-hair: rgba(51, 56, 51, .16); --lcd-row: rgba(51, 56, 51, .06); --lcd-sel-bg: #333833; --lcd-sel-fg: #dde2db; --lcd-glow: 0 0 0 rgba(0, 0, 0, 0); --lcd-key-shadow: 2px 2px 0 var(--lcd-line); --lcd-key-shadow-hover: 4px 4px 0 var(--lcd-line); --lcd-inset: inset 2px 2px 0 rgba(51, 56, 51, .12); --lcd-focus: 2px solid var(--lcd-link); color-scheme: light; } /* --------------------------------------------------- dark — amber phosphor */ [data-theme="dark"] { --lcd-bg: #191b18; --lcd-panel: #22251f; --lcd-well: #121411; --lcd-deep: #0d0f0c; --lcd-fg: #d9d6c2; --lcd-fg-dim: #b3b09b; --lcd-fg-faint: #95927c; /* mockup #82806c — 3.89:1, below AA */ --lcd-fg-ghost: #565c55; --lcd-accent: #d9a441; --lcd-accent-bright: #e6ba62; --lcd-link: #d9a441; --lcd-link-bright: #e6ba62; --lcd-ok: #84b39a; --lcd-bad: #c47a55; /* mockup #4b4d42 is 1.80:1 on panel — in dark theme the border is the only affordance signal for keys and chips, so it has to clear SC 1.4.11. */ --lcd-line: #6c6f5f; --lcd-border: rgba(217, 214, 194, .2); --lcd-hair: rgba(217, 164, 65, .16); --lcd-row: rgba(217, 164, 65, .06); --lcd-sel-bg: #d9a441; --lcd-sel-fg: #22251f; --lcd-glow: 0 0 9px rgba(217, 164, 65, .32); --lcd-key-shadow: 2px 2px 0 rgba(0, 0, 0, .55); --lcd-key-shadow-hover: 4px 4px 0 rgba(0, 0, 0, .55); --lcd-inset: inset 2px 2px 0 rgba(0, 0, 0, .5); --lcd-focus: 2px solid var(--lcd-accent-bright); color-scheme: dark; } /* ------------------------------------------- dark variant — patina phosphor */ [data-theme="dark"][data-accent="patina"] { --lcd-bg: #0f1512; --lcd-panel: #141c17; --lcd-well: #090e0b; --lcd-deep: #060907; --lcd-fg: #dcecdf; --lcd-fg-dim: #b6cdbb; --lcd-fg-faint: #93ac9b; --lcd-fg-ghost: #44584a; --lcd-accent: #8fbfa5; --lcd-accent-bright: #b3d6c4; --lcd-link: #8fbfa5; --lcd-link-bright: #b3d6c4; --lcd-line: #557767; --lcd-border: rgba(143, 191, 165, .22); --lcd-hair: rgba(143, 191, 165, .16); --lcd-row: rgba(143, 191, 165, .06); --lcd-sel-bg: #8fbfa5; --lcd-sel-fg: #0f1512; --lcd-glow: 0 0 9px rgba(143, 191, 165, .32); } /* ------------------------------------------------------------------- base */ html { background: var(--lcd-bg); } body, iframe { background: var(--lcd-bg); color: var(--lcd-fg); font-family: var(--lcd-font-ui); font-size: var(--fs-ui); -webkit-font-smoothing: antialiased; } a { color: var(--lcd-link); text-decoration: none; } a:hover, a:focus { color: var(--lcd-link-bright); text-decoration: underline; } /* The mockup defines no focus state. A keyboard user needs one. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: var(--lcd-focus); outline-offset: 2px; } ::selection { background: var(--lcd-sel-bg); color: var(--lcd-sel-fg); } /* ------------------------------------------------------------------ motion */ @keyframes lcdblink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }