/* J.A.M.E.S.H.A. Hologram Desk — UI v2 (FINAL, merged into live index.html) * * Loaded AFTER desk.css. Scoped to [data-ui="v2"] (set on of index.html). * * 1. Composition scales — panels dock to a capped stage, not the window edge. * 2. Radial — telemetry ring gauges; arc motifs on panel edges. * 3. Type hierarchy — raised label floor; larger clock/FPS numerals. */ [data-ui="v2"] { /* The stage is the widest the workbench is allowed to spread. Past this the panels stop tracking the window and hold position, so a 2560px monitor frames the subject instead of marooning the chrome at the far edges. */ --stage-max: 1320px; --stage-pad: 1.1rem; --stage-inset: max(var(--stage-pad), calc(50vw - var(--stage-max) / 2)); /* Type scale. Base sheet ran everything mono at 9-10px differentiated only by colour; these give it actual steps. */ --t-micro: 11px; /* was 9-10 — the label floor */ --t-label: 12px; --t-body: 13px; --t-num: 15px; /* gauge readouts */ --t-num-lg: 20px; /* hero numerals */ } /* ——— 1. Stage-relative docking ——— */ [data-ui="v2"] .panel--left { left: var(--stage-inset); } [data-ui="v2"] .panel--right { right: var(--stage-inset); } /* Top bar and footer content align to the same stage, so the whole HUD reads as one frame rather than three things pinned to different edges. */ [data-ui="v2"] .hud-top { padding-left: var(--stage-inset); padding-right: var(--stage-inset); } [data-ui="v2"] .hud-bottom { padding-left: var(--stage-inset); padding-right: var(--stage-inset); } [data-ui="v2"] .asset-rack { max-width: min(var(--stage-max), calc(100vw - 2 * var(--stage-pad))); margin-inline: auto; } /* ——— 2. Radial ——— */ [data-ui="v2"] .telemetry--radial { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0.9rem 0 0.85rem; padding: 0; background: none; border: none; } [data-ui="v2"] .telemetry--radial > div { display: block; position: relative; padding: 0; background: none; border: none; text-align: center; } [data-ui="v2"] .gauge svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); /* 0 starts at 12 o'clock */ overflow: visible; } [data-ui="v2"] .gauge__track { fill: none; stroke: rgba(var(--accent-rgb), 0.16); stroke-width: 3; } [data-ui="v2"] .gauge__fill { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; /* 2πr for r=24 */ stroke-dasharray: 150.796; stroke-dashoffset: 150.796; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.7)); transition: stroke-dashoffset 0.18s linear, stroke 0.35s ease; } [data-ui="v2"] .gauge--fid .gauge__fill { stroke: var(--gold); filter: drop-shadow(0 0 4px rgba(201, 168, 75, 0.75)); } /* Numerals sit inside the ring */ [data-ui="v2"] .gauge__val { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-58%); font-family: var(--mono); font-size: var(--t-num); line-height: 1; color: var(--text); letter-spacing: 0.02em; } [data-ui="v2"] .gauge--fid .gauge__val { color: #ffda89; } [data-ui="v2"] .gauge__lbl { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(0.5rem); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--muted); } /* Arc motif on the panels — the only curves in the base UI were inside the 3D scene, so the chrome read as pure rectangles. */ [data-ui="v2"] .panel { position: absolute; } [data-ui="v2"] .panel::after { content: ""; position: absolute; left: -1px; bottom: -1px; width: 46px; height: 46px; border-left: 1px solid rgba(var(--accent-rgb), 0.55); border-bottom: 1px solid rgba(var(--accent-rgb), 0.55); border-bottom-left-radius: 46px; pointer-events: none; opacity: 0.8; } [data-ui="v2"] .panel__header { position: relative; overflow: hidden; } /* Sweep arc under the header */ [data-ui="v2"] .panel__header::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -14px; height: 28px; border-radius: 50%; border-top: 1px solid rgba(var(--accent-rgb), 0.32); pointer-events: none; } /* Meter gets an accent cap so it reads as instrumentation, not a progress bar */ [data-ui="v2"] .meter__track { height: 6px; border-radius: 3px; overflow: hidden; } [data-ui="v2"] .meter__fill { border-radius: 3px; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); } /* ——— 3. Type hierarchy ——— */ [data-ui="v2"] .mono { font-size: var(--t-label); } [data-ui="v2"] .spec dt, [data-ui="v2"] .panel__id, [data-ui="v2"] .telemetry span, [data-ui="v2"] .asset-rack__label, [data-ui="v2"] .meter__label, [data-ui="v2"] .hud-bottom .mono, [data-ui="v2"] .explode-hint, [data-ui="v2"] .audio-hint, [data-ui="v2"] .video-ctrls__hint { font-size: var(--t-micro); } [data-ui="v2"] .asset-btn__code { font-size: var(--t-micro); } /* The 11px bump pushed the two control hints onto a second line with a single word orphaned. Tighten the tracking so they fit, and balance the split if a narrower panel still wraps them. */ [data-ui="v2"] .explode-hint, [data-ui="v2"] .audio-hint, [data-ui="v2"] .video-ctrls__hint { letter-spacing: 0.04em; text-wrap: balance; line-height: 1.35; } [data-ui="v2"] .panel__title { font-size: var(--t-label); letter-spacing: 0.2em; } /* Hero numerals in the top bar — clock and FPS were the same size as every other label despite being the two live values on screen. */ [data-ui="v2"] #clock { font-size: var(--t-num-lg); line-height: 1; color: var(--text); letter-spacing: 0.06em; } [data-ui="v2"] #fps { font-size: var(--t-num); color: var(--accent); } [data-ui="v2"] .hud-top__right { display: flex; align-items: baseline; gap: 0.55rem; } [data-ui="v2"] .hud-top__center strong { font-size: var(--t-body); } [data-ui="v2"] .spec dd { font-size: var(--t-body); } /* Ops: same stage inset + panel width as Examination column; clear the rack */ [data-ui="v2"] .ops-console { --ops-width: min(280px, 32vw); --rack-clearance: 9.75rem; right: var(--stage-inset); bottom: var(--rack-clearance); width: var(--ops-width); } [data-ui="v2"] .asset-rack { /* Fit between left dossier + right ops/exam columns */ width: min( var(--stage-max), calc(100vw - 2 * (var(--stage-inset) + min(280px, 32vw) + 0.85rem)) ); } [data-ui="v2"] .ops-console__brand { font-size: var(--t-label, 11px); } [data-ui="v2"] .ops-line__body { font-size: var(--t-body, 12px); } /* ——— Narrow screens: stage collapses back to edge padding ——— */ @media (max-width: 820px) { [data-ui="v2"] { --stage-inset: var(--stage-pad); } [data-ui="v2"] .telemetry--radial { grid-template-columns: repeat(4, 1fr); gap: 0.3rem; } [data-ui="v2"] .gauge__val { font-size: 12px; } [data-ui="v2"] .ops-console { --rack-clearance: 11rem; right: var(--stage-pad); left: var(--stage-pad); width: auto; bottom: var(--rack-clearance); } [data-ui="v2"] .asset-rack { width: min(100%, calc(100vw - 2 * var(--stage-pad))); } }