/* ============================================================ HUD.CSS — decorative HUD chrome ------------------------------------------------------------ From the design system's HudOverlay. Frame, corner brackets, crosshairs, tick runs and drifting scan lines: pure decoration, no content, no interaction, sitting above the page at low opacity. Cyan only, per the accent rules. The kit drew this as React that returned about forty inline-styled divs and four inline SVGs, re-rendering the lot whenever the nav width changed. Here it is one static subtree built once, and the nav width is a CSS variable, so opening or collapsing the rail is a variable write rather than a re-render. TWO LAYERS, AND THE SPLIT IS THE POINT. Soft washes may cross the whole window; hard-edged decoration is confined to the right of the sidebar. A crosshair or box rule landing on a nav label reads as an artifact rather than as chrome. ============================================================ */ .hud-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; --hud: 34, 211, 238; --hud-nav: 260px; } /* Attempt screens are their own world -- the same rule the agenda flag follows. Decoration over a code editor is noise. */ body.route-focused .hud-layer, body.hud-off .hud-layer { display: none; } /* The storage picker is a gate in front of the whole app, and the HUD is not part of the app it decorates -- hudMount appends the layer to , so it is a SIBLING of .app-layout and the picker's `visibility: hidden` on that element never reached it. The chrome painted around the dialog. A body class rather than hiding the node in showStorageModePicker, because the picker and hudMount both run around DOMContentLoaded in no guaranteed order: whichever lands first, the rule applies the moment the layer exists. */ body.picker-open .hud-layer { display: none; } /* ── Ambient: soft only, may cross everything ─────────────── */ .hud-scan { position: absolute; inset: 0; opacity: 0.5; background: repeating-linear-gradient( 180deg, rgba(var(--hud), 0.028) 0px, rgba(var(--hud), 0.028) 1px, transparent 1px, transparent 4px); animation: hudScan 9s linear infinite; } .hud-wash-left { position: absolute; left: 0; top: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, rgba(var(--hud), 0.07) 0%, transparent 100%); } .hud-wash-top { position: absolute; left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(180deg, rgba(var(--hud), 0.05) 0%, transparent 100%); } /* ── Chrome: hard edges, kept off the sidebar ─────────────── */ .hud-chrome { position: absolute; top: 0; right: 0; bottom: 0; left: calc(var(--hud-nav) + 8px); overflow: hidden; transition: left 0.3s var(--ease-standard); } .hud-frame { position: absolute; inset: 8px; border: 1px solid rgba(var(--hud), 0.10); border-radius: 4px; } .hud-frame-inner { position: absolute; inset: 14px; border-top: 1px solid rgba(var(--hud), 0.05); border-bottom: 1px solid rgba(var(--hud), 0.05); } .hud-bracket { position: absolute; overflow: visible; } .hud-bracket-tl { top: 10px; left: 10px; } .hud-bracket-tr { top: 10px; right: 10px; transform: scale(-1, 1); } .hud-bracket-bl { bottom: 10px; left: 10px; transform: scale(1, -1); } .hud-bracket-br { bottom: 10px; right: 10px; transform: scale(-1, -1); } .hud-cross { position: absolute; overflow: visible; } .hud-ticks { position: absolute; display: flex; gap: 6px; } .hud-ticks span { display: block; background: rgba(var(--hud), 0.28); } .hud-ticks span:nth-child(4n + 1) { background: rgba(var(--hud), 0.6); } /* Horizontal run: 1px wide bars of varying height. */ .hud-ticks-h span { width: 1px; height: 4px; } .hud-ticks-h span:nth-child(4n + 1) { height: 9px; } /* Vertical run: the same, rotated. */ .hud-ticks-v { flex-direction: column; } .hud-ticks-v span { width: 4px; height: 1px; } .hud-ticks-v span:nth-child(4n + 1) { width: 9px; } .hud-dashes { position: absolute; top: 30px; right: 110px; display: flex; gap: 5px; } .hud-dashes span { display: block; height: 2px; background: rgba(var(--hud), 0.3); } .hud-rule { position: absolute; bottom: 34px; left: 40px; width: 180px; height: 1px; background: linear-gradient(90deg, rgba(var(--hud), 0.45) 0%, transparent 100%); } /* The second panel outline that used to sit at bottom: 60px / right: 40px is gone. It landed directly behind the settings button, so the two read as one broken control rather than as chrome behind a control. */ .hud-panel-b { position: absolute; top: 46%; right: 26px; width: 54px; height: 110px; border-right: 1px solid rgba(var(--hud), 0.10); border-top: 1px solid rgba(var(--hud), 0.10); } .hud-pulse { position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: linear-gradient(180deg, transparent, rgba(var(--hud), 0.55), transparent); animation: hudBreathe 4s ease-in-out infinite; } @keyframes hudScan { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } } @keyframes hudBreathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* Motion is the first thing to go; the still chrome is fine to keep. */ @media (prefers-reduced-motion: reduce) { .hud-scan, .hud-pulse { animation: none !important; } } /* A phone has no room to give away to decoration, and the sidebar is an overlay there rather than a column, so the nav offset means nothing. */ @media (max-width: 768px) { .hud-layer { display: none; } }