/* hud.css — shared editorial HUD type system for the Adaptive Density illustration family. Single source of truth for the annotation/telemetry typography so every figure reads as the same instrument panel. Type, tracking, spacing, positions and the bar/dot primitives live here; per-figure files keep only genuinely figure-specific overrides. Face: Space Mono (matches the reading room), with a hard monospace fallback so the HUD degrades gracefully if the webfont is unavailable. Color: CSS custom properties with sensible defaults below. The field.js figures override these per-theme via Illo.applyChrome() (inline style on , which wins). DF / Belief Engine don't run field.js, so they rely on the :root (dark) defaults and the .lt (light) override here — they toggle `.lt` on themselves. */ @font-face { font-family: "IBM Plex Mono"; src: url("/arena/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Libre Caslon Display"; src: url("/arena/fonts/LibreCaslonDisplay-Regular.ttf") format("truetype"); font-display: swap; } :root { --ink: #10100f; --ink-dim: #5d5a55; --ink-faint: rgba(93,90,85,0.65); --bar-track: #e1e1dd; --bar-fill: #10100f; /* ---- type scale (one quiet ladder: eyebrow < label/meta < value < caption < title) ---- */ --hud-font: 'IBM Plex Mono', 'Courier New', ui-monospace, monospace; --hud-display: 'Libre Caslon Display', Georgia, serif; --hud-gutter: 24px; /* uniform inset from every frame edge */ --t-eyebrow: 9.5px; /* brand / section eyebrow, uppercase */ --t-meta: 9px; /* timestamp / version */ --t-label: 8.5px; /* telemetry + legend labels, uppercase */ --t-val: 8.5px; /* live numeric values */ --t-caption: 8.5px; /* section descriptor, uppercase */ --t-desc: 9.5px; /* sentence-case description body */ --t-readout: 8.5px; /* corner key:value counters */ --t-title: 30px; /* figure title (Title Case display) */ --tr-eyebrow: 2.4px; /* uppercase eyebrow wants the most tracking */ --tr-caption: 1.4px; --tr-label: 0.8px; --tr-meta: 1px; --tr-title: 0.5px; /* large display mono reads better tight, not airy */ /* telemetry geometry */ --label-w: 150px; --val-w: 30px; --bar-w: 84px; --bar-h: 4px; } .lt { --ink: #10100f; --ink-dim: #5d5a55; --ink-faint: rgba(93,90,85,0.65); --bar-track: #e1e1dd; --bar-fill: #10100f; } body { margin: 0; background: var(--bg, #ffffff); font-family: var(--hud-font); overflow: hidden; } canvas { display: block; } .overlay { position: absolute; z-index: 10; pointer-events: none; font-family: var(--hud-font); color: var(--ink); font-size: var(--t-label); letter-spacing: var(--tr-label); } /* ---- corners / common positions (field.js family) ---- */ .header { top: var(--hud-gutter); left: var(--hud-gutter); } .timestamp { top: var(--hud-gutter); right: var(--hud-gutter); text-align: right; } .caption { top: calc(var(--hud-gutter) + 20px); right: var(--hud-gutter); text-align: right; } .description { top: calc(var(--hud-gutter) + 64px); right: var(--hud-gutter); } .telemetry, .legend { bottom: var(--hud-gutter); left: var(--hud-gutter); } .readout { bottom: var(--hud-gutter); right: var(--hud-gutter); text-align: right; } /* ---- the type roles ---- */ .logo, .ey { font-size: var(--t-eyebrow); letter-spacing: var(--tr-eyebrow); color: var(--ink-faint); line-height: 1; } .title { font-family: var(--hud-display); font-size: var(--t-title); font-weight: 400; line-height: 1; letter-spacing: -0.01em; color: var(--ink); margin-top: 12px; } .timestamp { font-size: var(--t-meta); letter-spacing: var(--tr-meta); color: var(--ink-faint); line-height: 1.3; } .caption { font-size: var(--t-caption); letter-spacing: var(--tr-caption); color: var(--ink-dim); line-height: 1.3; } .description { display: none; } /* ---- telemetry rows: compact instrument readout, label / value / bar on one baseline ---- */ .telemetry, .legend { font-size: var(--t-label); } .telem-row { display: flex; align-items: center; margin: 4px 0; color: var(--ink-dim); line-height: 1; } .telem-label { width: var(--label-w); letter-spacing: var(--tr-label); white-space: nowrap; } .telem-val { width: var(--val-w); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; } .telem-bar { width: var(--bar-w); height: var(--bar-h); background: var(--bar-track); margin-left: 8px; } .telem-fill { height: 100%; background: var(--bar-fill); width: 0%; transition: width .25s; } /* legend rows (rise & settle) */ .legend-row { display: flex; align-items: center; margin: 4px 0; letter-spacing: var(--tr-label); color: var(--ink-dim); transition: opacity .4s; } .dotind { width: 6px; height: 6px; border-radius: 50%; background: var(--bar-fill); margin-right: 9px; flex: none; } /* corner counters */ .readout { font-size: var(--t-readout); color: var(--ink-faint); line-height: 1.5; letter-spacing: var(--tr-label); } .readout b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; } /* paradigm-shift footer */ .foot { bottom: var(--hud-gutter); left: var(--hud-gutter); right: var(--hud-gutter); display: flex; justify-content: space-between; font-size: var(--t-label); color: var(--ink-dim); letter-spacing: var(--tr-label); } .foot .sub { color: var(--ink-faint); margin-top: 3px; letter-spacing: var(--tr-meta); } .foot .on { color: var(--ink); } /* ---- cover ---- */ .ey { top: var(--hud-gutter); left: var(--hud-gutter); } .cover { top: 50%; left: var(--hud-gutter); transform: translateY(-50%); } .big { font-family: var(--hud-display); font-size: 60px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; color: var(--ink); } .sub { margin-top: 16px; font-size: 11px; letter-spacing: 5px; color: var(--ink-dim); } .lede { margin-top: 22px; max-width: 410px; font-size: var(--t-desc); line-height: 1.6; letter-spacing: 0.2px; color: var(--ink-faint); } .tag { bottom: var(--hud-gutter); right: var(--hud-gutter); font-size: var(--t-label); letter-spacing: var(--tr-meta); color: var(--ink-faint); text-align: right; } /* ---- decision fabric / belief engine corner panels ---- */ .top-left { top: var(--hud-gutter); left: var(--hud-gutter); } .top-right { top: var(--hud-gutter); right: var(--hud-gutter); text-align: right; } .bottom-left { bottom: var(--hud-gutter); left: var(--hud-gutter); max-width: 300px; line-height: 1.5; color: var(--ink-dim); } .bottom-right { bottom: var(--hud-gutter); right: var(--hud-gutter); text-align: right; } .panel-head { font-size: var(--t-eyebrow); letter-spacing: var(--tr-eyebrow); color: var(--ink); margin-bottom: 10px; } .panel-sub { font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--ink-faint); } .hypothesis { margin: 4px 0; font-size: var(--t-label); display: flex; align-items: center; } .h-label { color: var(--ink-faint); display: inline-block; width: 26px; } .h-conf { display: inline-block; width: 34px; text-align: right; font-variant-numeric: tabular-nums; } .h-bar { display: inline-block; height: var(--bar-h); background: var(--bar-track); margin-left: 8px; position: relative; } .h-fill { height: 100%; background: var(--bar-fill); } .flow-line { font-size: var(--t-readout); color: var(--ink-faint); letter-spacing: var(--tr-label); line-height: 1.5; font-variant-numeric: tabular-nums; } .metric { margin: 4px 0; color: var(--ink); line-height: 1.4; font-variant-numeric: tabular-nums; } .metric-label { color: var(--ink-faint); margin-right: 8px; } /* ---- mobile: tighten the whole HUD a step, reflow corners, drop ambient prose ---- Phones render the figure full-width (~340–390px). The desktop scale + wide telemetry would overflow and the top-right description would collide with the top-left header, so we shrink the scale, narrow the telemetry geometry, and hide the lowest-priority ambient description. Cover keeps its lede (that's the cover's content) but reflowed. */ @media (max-width: 640px) { :root { --hud-gutter: 13px; --t-eyebrow: 8px; --t-meta: 8px; --t-label: 7.5px; --t-val: 7.5px; --t-caption: 7.5px; --t-desc: 8.5px; --t-readout: 7.5px; --t-title: 21px; --tr-title: 0.3px; --tr-eyebrow: 1.8px; --label-w: 100px; --val-w: 22px; --bar-w: 50px; --bar-h: 3px; } .title { margin-top: 7px; } .description, .caption { display: none; } /* ambient prose + section descriptor — drop on phone (title names the figure; avoids colliding with a long title) */ .telem-row, .legend-row, .metric { margin: 3px 0; } .telem-bar { margin-left: 6px; } /* cover reflow — top-align into the sparse upper band so the lede clears the field peak */ .cover { top: 38px; transform: none; } .big { font-size: 38px; letter-spacing: 1px; } .sub { font-size: 9px; letter-spacing: 3px; margin-top: 10px; } .lede { font-size: 8.5px; line-height: 1.55; max-width: 76vw; margin-top: 13px; } /* DF / Belief Engine: keep the description but to a narrow measure, off the counters */ .bottom-left { max-width: 60vw; line-height: 1.45; } }