/** * UVU Review: story player UI for the 3D map. * * Linked by the page: the scroll-track geometry, the stage and the top bar, which must be right at page load. * The HUD (control bar, sheet, overlay panels, scroll graphics, phone and reduced-motion rules) lives in * css/recon-hud.css, which js/recon-controller.js adds when the reader nears the map ([data-hud-css="1"]). * The controller mirrors its state as data attributes on #recon and ; both files only read them: * #recon[data-layout="desk|port|land"] [data-mode] [data-overlay] [data-card] [data-ready] * [data-coarse] [data-host] [data-reduced] [data-paused] [data-armed] [data-bar] * [data-legend] [data-status-over] [data-onscreen="0|1"] [data-lite] [data-hud-css="1"] * [data-sheet="peek|open"] (phones and tablets only) [data-tablet] [data-poster="0|1"] [data-return] * #reconOverlay[data-where="slot|zone|col|band"] .recon-status/.recon-hint[data-dock="card|sheet"] * #storyCard[data-more] #sheetClock[data-short] * html[data-presenter] html[data-recon-pinned] html[data-recon-cover] * * Phones and tablets (port, land): the map fills the stage. All step text is in ONE bottom sheet (#storyCard) * on a 65 px bar; a tools row at the top carries the return chip, Map key and Skip map. Desk is unchanged. */ /* ============ TOKENS AND SCROLL TRACK ============ */ #recon{ --u:1vh; --step:calc(88 * var(--u)); --lead:calc(60 * var(--u)); --tail:calc(30 * var(--u)); --topbar-h:0px; --ts:1; --hud-bg:rgba(10,13,19,.86); --hud-solid:#0f141d; --hud-line:rgba(255,255,255,.11); --play:#d12f2f; --play-hi:#e2453f; --ink-2:#c9d2dd; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --cond:'Oswald','Arial Narrow','Roboto Condensed',Impact,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:radial-gradient(ellipse at 70% 10%,rgba(61,139,255,.06),transparent 55%),var(--bg); } @supports (height:1svh){ #recon{--u:1svh} } @media (max-width:520px){ #recon{--step:calc(80 * var(--u))} } @media (min-width:1280px){ #recon[data-host="1"]{--ts:1.2} } @media (min-width:1600px){ #recon[data-host="1"]{--ts:1.4} } .recon-layout{position:relative;background:var(--bg);overflow-anchor:none} .stage{ position:-webkit-sticky;position:sticky;top:0; height:calc(100 * var(--u));width:100%; z-index:2;overflow:hidden;background:#0a0d13;outline:none; } /* Until the map starts, the frame holds about:blank (a light document). A light frame lets that blank page stay transparent over the dark stage; under the page's dark scheme the browser would paint it white. */ #reconFrame{width:100%;height:100%;display:block;border:0;pointer-events:none;background:#0a0d13;color-scheme:light} #reconFrame.free{pointer-events:auto} /* The old cards are now invisible spacers. Nothing in this column can take a click. Each spacer's hidden copy of its step (for screen readers and find-in-page) is clipped to nothing and kept in the middle, clear of notches. */ .beats{ position:relative;z-index:0;pointer-events:none; margin-top:calc(-100 * var(--u)); padding-top:calc(var(--lead) + 50 * var(--u) - var(--step) / 2); padding-bottom:calc(var(--tail) + 50 * var(--u) - var(--step) / 2); } /* The page sets scroll-padding-top for its fixed top bar; --spt (written by the controller) cancels it here, so "scroll this step to the centre" (find-in-page, screen readers, tests) lands exactly on p = N. */ .beat{position:relative;height:var(--step);min-height:0;padding:0;display:block;pointer-events:none;scroll-margin-bottom:var(--spt,0px)} .beat-card{ position:absolute;top:50%;left:50%;width:240px;height:1px;margin:-1px 0 0 -120px;padding:0;border:0;overflow:hidden; clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);pointer-events:none; scroll-margin-bottom:var(--spt,0px); } #recon [hidden]{display:none !important} #recon .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden; clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap; } /* ============ TOP BAR (spec section 8) ============ */ .topbar{transition:transform .2s ease} @media (max-width:520px){ .topbar .src{display:none} .topbar .brand{white-space:nowrap} } @media (max-width:860px),(max-height:480px){ html[data-recon-cover] .topbar{transform:translateY(-100%)} } html[data-presenter][data-recon-cover] .topbar{transform:translateY(-100%)} /* ============ STAGE LAYERS ============ */ .recon-veil{ position:absolute;left:0;right:0;top:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:1; background:#0a0d13;opacity:1;pointer-events:none;transition:opacity .6s ease; } #recon[data-ready="1"] .recon-veil{opacity:0} .stage-hud{position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;pointer-events:none;font-family:var(--sans)} /* The HUD's own rules (css/recon-hud.css) arrive when the reader nears the map. Until then the HUD is not drawn, except the live region, which must be able to speak from the start. */ #recon:not([data-hud-css="1"]) .stage-hud > :not(.sr-only){display:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .scrollcue .bar{animation:none} .topbar{transition:none} }