/* Scroll-rover rail. Ported from _reference/rover-spec.html — only the rail/rover/pointer/ scanbar (no HUD bar, no graph-paper background, no detail overlay, no view transitions). Loaded sitewide (see head.html) since the rail appears on every page, so colors default to the site's own sitewide theme vars (--text-color/--primary-color/--text-secondary-color, defined in head.html and already light/dark-toggle aware) rather than the spec's own --ink/--rust/--line-2, which don't exist in this codebase. room-hero.css overrides these 3 vars to the purple/gold room palette on the homepage only. */ :root{ --rover-rail-width: 88px; --rover-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; } /* Declared on body, not :root: --text-color/--primary-color only get their dark-mode values from the .dark class on (see theme.css) — a var() resolved at :root would freeze in the light-mode default before that override ever applies, so every page rendered in dark mode (the site's default) would silently get light-mode rover colors. Declaring these here instead means they resolve using body's own (correctly dark-mode-aware) cascade. */ body{ --rover-ink: var(--text-color, #1a2330); --rover-signal: var(--primary-color, #c2481c); --rover-track: var(--text-secondary-color, rgba(120,120,120,.4)); /* wheel/panel fills are tints of --rover-ink itself (not the page background), so they're always visibly different from whatever's behind the rover on any page/theme, instead of depending on a second color that happens to contrast in one theme but not another */ --rover-wheel: color-mix(in srgb, var(--rover-ink) 60%, transparent); --rover-panel: color-mix(in srgb, var(--rover-ink) 14%, transparent); } /* .scanbar and .rail are both direct children of — theme.css's ".light > *" rule forces an opaque background-color (and text color) onto every direct child of body with !important, which otherwise paints over the scanbar's signal color and, worse, paints an opaque 88px-wide strip over whatever page content sits underneath the rail. Both need an explicit !important override back to transparent/their own color; this file loads after theme.css, so equal-specificity + !important here wins the cascade. */ .scanbar{position:fixed;top:0;left:0;height:2px;background:var(--rover-signal)!important;z-index:41; width:var(--p,0%);transition:width .1s linear} /* overlays the existing left margin/gutter rather than reserving space for itself, so page content keeps its full width — pointer-events:none lets clicks pass through to whatever's underneath. Always visible; rover-rail.html positions it (parked on the room's floor on the homepage, or in rail-mode from the top on every other page). */ .rail{ position:fixed;top:0;left:0;width:var(--rover-rail-width);height:100vh; background:transparent!important; z-index:30;pointer-events:none; } .rail .track{position:absolute;left:44px;top:64px;bottom:24px;width:1px; background:repeating-linear-gradient(var(--rover-track) 0 5px,transparent 5px 11px)} .rover-holder{position:absolute;left:14px;top:64px;width:60px;height:46px; transition:top .18s cubic-bezier(.2,.7,.2,1)} /* pointer/dimension line from the rover to the currently-inspected .rover-target */ .pointer{position:absolute;left:60px;height:1px;background:var(--rover-signal); width:0;opacity:0;transition:width .25s ease,opacity .2s ease} .pointer::after{content:attr(data-code);position:absolute;right:2px;top:-15px; font-family:var(--rover-mono);font-size:9.5px;letter-spacing:.1em;color:var(--rover-signal)} .pointer.on{opacity:1} /* ---- the rover (SVG) ---- */ .rover{width:60px;height:46px;display:block;color:var(--rover-ink);overflow:visible} .rover .wheel{fill:var(--rover-wheel)} .rover .wheel-spoke{transform-origin:center;transform-box:fill-box} .rover .mast{transform-origin:34px 30px;transform-box:view-box;transition:transform .4s ease} .rover .beam{opacity:0;transition:opacity .3s ease} .rover .ant-tip{transform-box:fill-box} @media (prefers-reduced-motion:no-preference){ .rover.moving{animation:rover-bob .7s ease-in-out infinite} .rover.moving .wheel-spoke{animation:rover-roll .55s linear infinite} .rover .ant-tip{animation:rover-blink 2.2s infinite} } @keyframes rover-bob{50%{transform:translateY(-1.5px)}} @keyframes rover-roll{to{transform:rotate(360deg)}} @keyframes rover-blink{0%,55%{opacity:1}62%,100%{opacity:.15}} /* inspecting: rover halts, mast tilts toward the target, beam shows */ .rover.inspecting .mast{transform:rotate(20deg)} .rover.inspecting .beam{opacity:.9} /* ---- responsive: rail hides, rover drops to a static bottom-right corner ---- */ @media (max-width:840px){ .rail{position:fixed;left:auto;right:12px;top:auto;bottom:12px;width:auto;height:auto} .rail .track{display:none} .rover-holder{position:static;transition:none} .pointer{display:none} }