/* ========================================================================== Shared app shell — Map, Inspect and Drive. One set of tokens + one frame: top bar, left dock, context card, tool strip, status bar. Pages opt in with . lrv.html / diag.html keep using viewer.css and are not affected. ========================================================================== */ :root { color-scheme: dark; /* Core Stage palette */ --sh-bg: #0e0f11; --sh-surface: rgba(22, 24, 27, 0.9); --sh-bar: rgba(16, 17, 19, 0.95); --sh-well: rgba(0, 0, 0, 0.3); --sh-raise: rgba(236, 236, 234, 0.05); --sh-ink: #ececea; --sh-on-ink: #101113; --sh-muted: #979a9e; --sh-faint: #63666b; --sh-line: rgba(236, 236, 234, 0.09); --sh-line-2: rgba(236, 236, 234, 0.17); --sh-accent: #e4692a; --sh-accent-rgb: 228, 105, 42; --sh-accent-ink: #fff7f0; --sh-accent-soft: rgba(228, 105, 42, 0.15); --sh-data: #ececea; --sh-f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sh-f-ui: "Instrument Sans", "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif; --sh-f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace; --sh-top-h: 52px; --sh-status-h: 32px; --sh-gap: 12px; --sh-dock-w: 300px; --sh-card-w: 292px; /* Aliases so drive.css / leaflet overrides written against the old viewer.css tokens keep working inside the shell. */ --bg: var(--sh-bg); --panel: var(--sh-surface); --ink: var(--sh-ink); --muted: var(--sh-muted); --accent: var(--sh-accent); --line: var(--sh-line); --font-display: var(--sh-f-display); --font-body: var(--sh-f-ui); } * { box-sizing: border-box; } html, body.shell { margin: 0; height: 100%; background: var(--sh-bg); color: var(--sh-ink); font-family: var(--sh-f-ui); font-size: 13px; line-height: 1.4; overflow: hidden; } body.shell [hidden] { display: none !important; } .hidden { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sh-mono { font-family: var(--sh-f-mono); font-variant-numeric: tabular-nums; } .sh-lbl { margin: 0; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sh-faint); font-weight: 600; } .sh-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--sh-muted); } .sh-glass { background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: 10px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Full-bleed view behind the shell */ body.shell #c { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; } /* ---------- buttons & small controls ---------- */ .sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; margin: 0; border: 1px solid var(--sh-line-2); border-radius: 7px; background: var(--sh-raise); color: var(--sh-ink); font: 500 12.5px var(--sh-f-ui); text-decoration: none; cursor: pointer; white-space: nowrap; } .sh-btn:hover { border-color: rgba(236, 236, 234, 0.32); } .sh-btn:focus-visible, .sh-iconbtn:focus-visible, .sh-modes a:focus-visible, .sh-tabs button:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 1px; } .sh-btn.primary { background: var(--sh-accent); border-color: var(--sh-accent); color: var(--sh-accent-ink); font-weight: 600; } .sh-btn.primary:hover { filter: brightness(1.08); } .sh-btn[aria-pressed="true"], .sh-btn.active { background: var(--sh-accent-soft); border-color: var(--sh-accent); color: var(--sh-accent); } .sh-btn:disabled { opacity: 0.45; cursor: default; } .sh-iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; margin: 0; border: 1px solid var(--sh-line-2); border-radius: 7px; background: var(--sh-raise); color: var(--sh-muted); cursor: pointer; } .sh-iconbtn:hover { color: var(--sh-ink); } .sh-iconbtn svg, .sh-btn svg { width: 15px; height: 15px; } .sh-iconbtn.ghost { border-color: transparent; background: none; width: 26px; height: 26px; } /* Segmented control (Real date / Manual, dock tabs) */ .sh-seg, .sh-tabs { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--sh-line-2); border-radius: 8px; background: var(--sh-well); } .sh-seg > button, .sh-tabs > button { flex: 1 1 0; margin: 0; padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--sh-muted); font: 500 12.5px var(--sh-f-ui); cursor: pointer; white-space: nowrap; } .sh-seg > button:hover, .sh-tabs > button:hover { color: var(--sh-ink); } .sh-seg > button.is-active, .sh-seg > button[aria-selected="true"], .sh-tabs > button[aria-selected="true"] { background: var(--sh-ink); color: var(--sh-on-ink); } /* Switch-styled checkbox */ .sh-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 3px 0; font-size: 12.5px; color: var(--sh-ink); cursor: pointer; } .sh-toggle input { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 28px; height: 16px; margin: 0; border-radius: 9px; background: var(--sh-line-2); cursor: pointer; transition: background 0.15s ease; } .sh-toggle input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--sh-muted); transition: left 0.15s ease; } .sh-toggle input:checked { background: var(--sh-accent); } .sh-toggle input:checked::after { left: 14px; background: var(--sh-accent-ink); } .sh-toggle input:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; } body.shell input[type="range"] { accent-color: var(--sh-accent); } .sh-input { width: 100%; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--sh-line-2); border-radius: 8px; background: var(--sh-well); color: var(--sh-ink); font: 13px var(--sh-f-ui); color-scheme: dark; } .sh-input:focus { outline: none; border-color: var(--sh-accent); } .sh-input::placeholder { color: var(--sh-faint); } .sh-grp { display: flex; flex-direction: column; gap: 7px; } /* ---------- 1 · top bar ---------- */ .sh-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--sh-top-h); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 var(--sh-gap); background: var(--sh-bar); border-bottom: 1px solid var(--sh-line); } .sh-left, .sh-right { display: flex; align-items: center; gap: 8px; min-width: 0; } .sh-right { justify-content: flex-end; } .sh-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; } .sh-brand img { width: 36px; height: 36px; flex: 0 0 auto; position: relative; top: -1px; } .sh-brand-text { display: flex; flex-direction: column; min-width: 0; } .sh-brand-text small { display: block; margin: 0 0 5px; font-size: 9.5px; line-height: 1; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sh-accent); font-weight: 600; } .sh-brand-text b { display: block; font-family: var(--sh-f-display); font-weight: 500; font-size: 17px; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; } .sh-modes { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--sh-line-2); border-radius: 9px; background: var(--sh-well); } .sh-modes a { display: flex; align-items: center; gap: 7px; padding: 6px 16px; border-radius: 6px; color: var(--sh-muted); font-weight: 500; font-size: 13px; text-decoration: none; white-space: nowrap; } .sh-modes a:hover { color: var(--sh-ink); } .sh-modes a svg { width: 15px; height: 15px; flex: 0 0 auto; } /* Map with no site chosen: Inspect / Drive need one. */ .sh-modes a.is-disabled { opacity: 0.38; cursor: default; } .sh-modes a.is-disabled:hover { color: var(--sh-muted); } .sh-modes a[aria-current="page"] { background: var(--sh-ink); color: var(--sh-on-ink); pointer-events: none; } .sh-modes kbd, .sh-kbd { font-family: var(--sh-f-mono); font-size: 10px; line-height: 15px; padding: 0 4px; border: 1px solid var(--sh-line-2); border-radius: 3px; color: var(--sh-faint); } .sh-modes a[aria-current="page"] kbd { color: inherit; border-color: currentColor; opacity: 0.55; } .sh-sun { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border: 1px solid var(--sh-line-2); border-radius: 8px; background: var(--sh-raise); font-size: 12px; color: var(--sh-muted); white-space: nowrap; min-width: 0; overflow: hidden; } .sh-sun svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--sh-accent); } .sh-sun .sh-mono { color: var(--sh-ink); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; } /* Help / about popover */ .sh-pop { position: fixed; top: calc(var(--sh-top-h) + 8px); right: var(--sh-gap); z-index: 45; width: min(360px, calc(100vw - 2 * var(--sh-gap))); max-height: calc(100vh - var(--sh-top-h) - 24px); overflow: auto; padding: 14px; display: grid; gap: 12px; background: var(--sh-bar); border: 1px solid var(--sh-line-2); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } .sh-pop h3 { margin: 0; font-size: 13px; font-weight: 600; } .sh-pop p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sh-muted); } .sh-pop a { color: var(--sh-accent); } .sh-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 12.5px; } .sh-keys dt { margin: 0; } .sh-keys dd { margin: 0; color: var(--sh-muted); } /* ---------- 2 · left dock ---------- */ .sh-dock { position: fixed; left: var(--sh-gap); top: calc(var(--sh-top-h) + var(--sh-gap)); bottom: calc(var(--sh-status-h) + var(--sh-gap)); z-index: 20; width: var(--sh-dock-w); display: flex; flex-direction: column; overflow: hidden; overflow: clip; /* unlike hidden, focus can't scroll the header out of view */ } .sh-dock-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--sh-line); } .sh-dock-h h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; } .sh-dock-h .sh-tabs { flex: 1 1 auto; } .sh-dock-b { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 12px 16px; scrollbar-width: thin; } .sh-pane { display: flex; flex-direction: column; gap: 16px; } .sh-dock.collapsed { bottom: auto; } /* Inspect / Drive: the panel hugs its content and only grows to the full height (then scrolls) when the content needs it. */ @media (min-width: 721px) { .page-inspect .sh-dock, .page-drive .sh-dock { bottom: auto; max-height: calc(100vh - var(--sh-top-h) - var(--sh-status-h) - 2 * var(--sh-gap)); max-height: calc(100dvh - var(--sh-top-h) - var(--sh-status-h) - 2 * var(--sh-gap)); } } .sh-dock.collapsed .sh-dock-b { display: none; } .sh-dock.collapsed .sh-dock-h { border-bottom: 0; } .sh-dock-toggle svg { transition: transform 0.15s ease; } .sh-dock.collapsed .sh-dock-toggle svg { transform: rotate(180deg); } /* ---------- 3 · context card ---------- */ .sh-card { position: fixed; right: var(--sh-gap); top: calc(var(--sh-top-h) + var(--sh-gap)); z-index: 20; width: var(--sh-card-w); max-height: calc(100vh - var(--sh-top-h) - var(--sh-status-h) - 2 * var(--sh-gap)); overflow: auto; scrollbar-width: thin; } .sh-card-sec { padding: 12px 14px; display: grid; gap: 8px; } .sh-card-sec + .sh-card-sec { border-top: 1px solid var(--sh-line); } .sh-card h3 { margin: 0; font-family: var(--sh-f-display); font-weight: 400; font-size: 22px; line-height: 1.15; } .sh-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; } .sh-kv > div { display: grid; gap: 1px; min-width: 0; } .sh-kv dt { font-size: 10.5px; color: var(--sh-faint); } .sh-kv dd { margin: 0; font-family: var(--sh-f-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; } /* ---------- 4 · tool strip ---------- */ .sh-tools { position: fixed; left: 50%; bottom: calc(var(--sh-status-h) + var(--sh-gap)); transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 4px; padding: 5px; max-width: calc(100vw - 2 * var(--sh-dock-w) - 6 * var(--sh-gap)); } .sh-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--sh-line-2); flex: 0 0 auto; } /* ---------- 5 · status bar ---------- */ .sh-status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--sh-status-h); display: flex; align-items: center; gap: 18px; padding: 0 14px; font-size: 11.5px; color: var(--sh-muted); background: var(--sh-bar); border-top: 1px solid var(--sh-line); white-space: nowrap; overflow: hidden; } .sh-status .sh-mono { color: var(--sh-ink); font-size: 11.5px; } .sh-status-l { display: flex; align-items: center; gap: 18px; min-width: 0; overflow: hidden; } .sh-status-r { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: 0 0 auto; } .sh-status a { color: var(--sh-muted); text-decoration: none; border-bottom: 1px dotted var(--sh-faint); } .sh-status a:hover { color: var(--sh-ink); } .sh-site-name { color: var(--sh-ink); font-weight: 500; } /* ---------- landing-site list (Map dock + Inspect/Drive tab) ---------- */ .sh-sites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sh-sites li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 6px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; } .sh-sites li:hover, .sh-sites li:focus-visible { background: var(--sh-raise); outline: none; } .sh-sites li.active, .sh-sites li[aria-selected="true"] { background: var(--sh-accent-soft); border-color: rgba(var(--sh-accent-rgb), 0.45); } .sh-sites img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--sh-line); background: #0a0b0e; } .sh-sites .name { margin: 0; font-size: 13px; line-height: 1.25; color: var(--sh-ink); } .sh-sites .sub { margin: 2px 0 0; font-family: var(--sh-f-mono); font-size: 10.5px; color: var(--sh-faint); } .sh-sites li.active .sub, .sh-sites li[aria-selected="true"] .sub { color: var(--sh-muted); } .sh-search { position: relative; } .sh-search svg { position: absolute; left: 10px; top: 9px; width: 14px; height: 14px; color: var(--sh-faint); pointer-events: none; } .sh-search .sh-input { padding-left: 30px; } /* ---------- legends (shared by Inspect layers and the Drive minimap) ---------- */ .legend-bar { height: 8px; border-radius: 2px; border: 1px solid var(--sh-line); } .legend-bar.elev { background: linear-gradient(90deg, rgb(107, 13, 148), rgb(31, 56, 224), rgb(13, 184, 235), rgb(31, 209, 71), rgb(242, 235, 31), rgb(250, 122, 15), rgb(224, 20, 15)); } .legend-bar.hill { background: linear-gradient(90deg, #1c1b19, #e8e6e1); } .legend-bar.slope { background-color: #2a2c32; background-image: linear-gradient(90deg, rgba(89, 199, 107, 0.15) 0%, rgba(89, 199, 107, 0.55) 12%, rgba(140, 224, 71, 0.9) 22%, rgb(242, 224, 31) 40%, rgb(250, 122, 15) 58%, rgb(242, 20, 31) 78%, rgb(158, 20, 184) 100%), linear-gradient(45deg, #3a3c42 25%, transparent 25%), linear-gradient(-45deg, #3a3c42 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3a3c42 75%), linear-gradient(-45deg, transparent 75%, #3a3c42 75%); background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px; background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0; } .legend-bar.psr { background: linear-gradient(90deg, rgb(168, 158, 145) 0%, rgb(168, 158, 145) 49%, rgb(30, 72, 184) 51%, rgb(30, 72, 184) 100%); } .legend-bar.sunlit { background: linear-gradient(90deg, rgb(13, 5, 122) 0%, rgb(10, 72, 224) 20%, rgb(5, 184, 219) 40%, rgb(31, 224, 133) 60%, rgb(184, 245, 31) 80%, rgb(255, 255, 13) 100%); } .legend-bar.contsun { background: linear-gradient(90deg, rgb(8, 12, 40) 0%, rgb(20, 60, 140) 18%, rgb(40, 140, 180) 36%, rgb(220, 170, 40) 58%, rgb(255, 140, 30) 78%, rgb(255, 240, 160) 100%); } .legend-bar.contearth { background: linear-gradient(90deg, rgb(15, 10, 56) 0%, rgb(31, 46, 140) 20%, rgb(20, 122, 184) 40%, rgb(26, 199, 173) 60%, rgb(140, 240, 184) 80%, rgb(235, 250, 240) 100%); } .legend-bar.suitability { background: linear-gradient(90deg, rgb(30, 30, 36) 0%, rgb(89, 71, 46) 25%, rgb(184, 133, 36) 50%, rgb(140, 199, 56) 75%, rgb(56, 224, 107) 100%); } .legend-labels { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--sh-f-mono); font-size: 10.5px; color: var(--sh-muted); font-variant-numeric: tabular-nums; } /* ---------- loading overlays ---------- */ #loading, #boot { position: fixed; inset: var(--sh-top-h) 0 0 0; z-index: 25; display: grid; place-content: center; gap: 1rem; background: radial-gradient(ellipse at center, #17191c 0%, var(--sh-bg) 70%); text-align: center; color: var(--sh-muted); transition: opacity 0.4s ease, visibility 0.4s, background 0.25s ease; } #loading.soft { z-index: 5; background: rgba(7, 8, 11, 0.55); } #loading.hide, #boot.hide { opacity: 0; visibility: hidden; pointer-events: none; } .spinner { width: 2rem; height: 2rem; margin: 0 auto; border: 2px solid var(--sh-line-2); border-top-color: var(--sh-accent); border-radius: 50%; animation: sh-spin 0.8s linear infinite; } /* Boot overlay progress + stall note (loading.js trackBoot) */ .boot-bar { width: min(240px, 60vw); height: 3px; margin: 0 auto; border-radius: 2px; background: var(--sh-line); overflow: hidden; } .boot-bar i { display: block; width: 0; height: 100%; background: var(--sh-accent); transition: width 0.35s ease; } .boot-note { max-width: 320px; min-height: 2.9em; margin: 0 auto; font-size: 12px; line-height: 1.45; color: var(--sh-faint); } /* Busy overlay (loading.js showBusy): loads inside a page (layer, site, vehicle). Greys out the 3D view with a centred progress card; the panels (z >= 20) stay above it and usable. */ .sh-busy { position: fixed; inset: var(--sh-top-h) 0 var(--sh-status-h) 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(10, 11, 14, 0.55); backdrop-filter: grayscale(1) brightness(0.7); -webkit-backdrop-filter: grayscale(1) brightness(0.7); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; } .sh-busy.on { opacity: 1; visibility: visible; } .sh-busy-card { display: grid; gap: 10px; width: min(300px, 100%); text-align: center; } .sh-busy-text { margin: 0; font-size: 14px; color: var(--sh-ink); } .sh-busy-sub { min-height: 1.4em; margin: 0; font-family: var(--sh-f-mono); font-size: 11px; color: var(--sh-muted); font-variant-numeric: tabular-nums; } .sh-busy-bar { position: relative; height: 4px; border-radius: 2px; background: rgba(236, 236, 234, 0.14); overflow: hidden; } .sh-busy-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--sh-accent); transition: width 0.25s ease; } .sh-busy-bar.indeterminate i { width: 35%; animation: sh-busy-slide 1.1s ease-in-out infinite; } @keyframes sh-busy-slide { from { left: -35%; } to { left: 100%; } } .sh-busy.error .sh-busy-text { color: var(--sh-accent); } .sh-busy.error .sh-busy-bar { display: none; } /* While a layer / site loads, the Probe and its legend belong to data that isn't there yet: grey them out with the scene. */ body.page-inspect.sh-busy-on .sh-card :is(.probe-sec, .legend-sec) { opacity: 0.35; filter: grayscale(1); pointer-events: none; transition: opacity 0.25s ease, filter 0.25s ease; } /* Layer row whose data is downloading */ .page-inspect label.mode.is-loading::after { content: ""; position: absolute; right: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 1.5px solid var(--sh-line-2); border-top-color: var(--sh-accent); border-radius: 50%; animation: sh-spin 0.8s linear infinite; } @keyframes sh-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } .sh-toggle input, .sh-toggle input::after, .sh-dock-toggle svg { transition: none; } } /* ========================================================================== Inspect ========================================================================== */ /* Layer rows — the existing radio inputs, restyled (main.js still drives them) */ .page-inspect .mode-list { display: flex; flex-direction: column; gap: 2px; } .page-inspect label.mode { position: relative; /* keeps the hidden radio inside the row, so focusing it never scrolls the panel away */ display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; margin: 0; padding: 6px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; } .page-inspect label.mode:hover { background: var(--sh-raise); } .page-inspect label.mode:has(input:checked) { background: var(--sh-accent-soft); border-color: rgba(var(--sh-accent-rgb), 0.45); } .page-inspect label.mode:has(input:focus-visible) { outline: 2px solid var(--sh-accent); outline-offset: 1px; } .page-inspect label.mode input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .page-inspect label.mode .sw { width: 34px; height: 34px; border-radius: 6px; border: 0; background: #222 center / cover; } .page-inspect label.mode strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.25; } .page-inspect label.mode small { display: block; margin-top: 1px; font-size: 11px; line-height: 1.3; color: var(--sh-faint); } .page-inspect label.mode .sw.sw-ortho { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, #2b2b2b, #9a9a96 45%, #3b3b3a 60%, #cfcfca); } .page-inspect label.mode .sw.sw-hillshade { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, #1c1b19, #8e8b85 45%, #3a3936 62%, #e8e6e1); } .page-inspect label.mode .sw.sw-psr { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(168, 158, 145) 0%, rgb(168, 158, 145) 50%, rgb(30, 72, 184) 52%); } .page-inspect label.mode .sw.sw-elevation { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(107, 13, 148), rgb(13, 184, 235) 35%, rgb(31, 209, 71) 55%, rgb(242, 235, 31) 75%, rgb(224, 20, 15)); } .page-inspect label.mode .sw.sw-slope { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(89, 199, 107), rgb(242, 224, 31) 40%, rgb(250, 122, 15) 60%, rgb(158, 20, 184)); } .page-inspect label.mode .sw.sw-illumination { background: var(--thumb, none) center / cover no-repeat, radial-gradient(circle at 25% 30%, #d9d4c8, #3a3833 55%, #0d0d0f); } .page-inspect label.mode .sw.sw-contsun { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(8, 12, 40), rgb(40, 140, 180) 40%, rgb(255, 140, 30) 75%, rgb(255, 240, 160)); } .page-inspect label.mode .sw.sw-contearth { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(15, 10, 56), rgb(20, 122, 184) 40%, rgb(26, 199, 173) 70%, rgb(235, 250, 240)); } .page-inspect label.mode .sw.sw-suitability { background: var(--thumb, none) center / cover no-repeat, linear-gradient(135deg, rgb(30, 30, 36), rgb(184, 133, 36) 50%, rgb(56, 224, 107)); } /* The phone-only dropdown is not needed: the layer rows work at every width. */ .page-inspect .viz-select-wrap { display: none; } .page-inspect .legend { padding: 10px; border-radius: 8px; background: var(--sh-well); border: 1px solid var(--sh-line); display: grid; gap: 6px; } .page-inspect .legend.hidden, .page-inspect .legend:not(:has(> :not(.hidden):not([hidden]))) { display: none !important; } /* Colour ramp: lives in the Probe card (moves into the layers pane on phones, where the card is hidden) */ .page-inspect .legend-ramp { display: grid; gap: 4px; } .page-inspect .legend-sec { padding: 4px 14px 12px; } .page-inspect .legend-ramp[hidden], .page-inspect .legend-sec:has(> .legend-ramp[hidden]), .page-inspect .legend-sec:empty { display: none; } .page-inspect .legend .legend-ramp { margin-bottom: 2px; } .page-inspect .layer-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--sh-muted); } .page-inspect .layer-note.hidden { display: none !important; } .page-inspect .subpanel.hidden { display: none !important; } /* Sun controls (Dynamic illumination) */ .sh-sunctl { display: grid; gap: 8px; } .sh-sun-row { display: flex; align-items: center; gap: 8px; } .sh-sun-row .sh-input { flex: 1 1 auto; font-family: var(--sh-f-mono); font-size: 12px; } .sh-readout { margin: 0; font-family: var(--sh-f-mono); font-size: 11px; line-height: 1.5; color: var(--sh-muted); white-space: pre-line; font-variant-numeric: tabular-nums; } .sh-az { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; margin: 0; font-size: 12.5px; } .sh-az input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 0; } .sh-az .az-val { font-family: var(--sh-f-mono); font-size: 11.5px; color: var(--sh-data); } .sh-az .control-note { grid-column: 1 / -1; font-size: 11px; color: var(--sh-faint); } .az-play { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; margin: 0; border: 1px solid var(--sh-line-2); border-radius: 50%; background: var(--sh-raise); color: var(--sh-ink); font-size: 10px; line-height: 1; cursor: pointer; } .az-play[aria-pressed="true"] { border-color: var(--sh-accent); color: var(--sh-accent); background: var(--sh-accent-soft); } /* Legend: marker for the value under the cursor; imagery shows no scale */ .page-inspect .legend-track { position: relative; } .page-inspect .legend-mark { position: absolute; top: -5px; width: 0; height: 0; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--sh-ink); transition: left 0.15s; pointer-events: none; } .page-inspect .legend-mark[hidden] { display: none; } .page-inspect #legend.no-scale .legend-track, .page-inspect #legend.no-scale .legend-labels { display: none; } /* Landing sites tab: plain label; on phones it shows the current site name */ .page-inspect .sh-tabs .tab-site { display: none; } @media (max-width: 720px) { .page-inspect .sh-tabs .tab-full { display: none; } .page-inspect .sh-tabs [data-tab="sites"] { min-width: 0; } .page-inspect .sh-tabs .tab-site { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; } .page-inspect .sh-tabs .tab-site-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .page-inspect .sh-tabs .tab-site svg { flex: 0 0 auto; width: 10px; height: 10px; } /* The site name lives in the tab, so the card goes away */ .page-inspect .sh-card { display: none; } } /* Touch screens: no probe (no hover) — the card keeps only the site / locator */ body.no-probe.page-inspect .probe-sec { display: none; } body.no-probe.page-inspect .loc-sec { padding-top: 12px; } .page-inspect .probe-h .probe-hint { flex: 1; } /* Context card: probe + locator (mockup) */ .page-inspect .probe-sec { padding: 12px 14px 10px; display: grid; gap: 8px; } .page-inspect .probe-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .page-inspect .probe-h .sh-lbl { margin: 0; } .page-inspect .probe-hint { font-size: 11px; color: var(--sh-faint); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-inspect .probe-big { font-family: var(--sh-f-mono); font-size: 26px; line-height: 1.1; color: var(--sh-data); font-variant-numeric: tabular-nums; } .page-inspect .probe-cap { margin: 0 0 2px; font-size: 10.5px; color: var(--sh-faint); } /* Latitude + Longitude always share the last row */ .page-inspect .probe-kv > div:nth-last-child(2) { grid-column: 1; } .page-inspect .probe-kv dd { font-size: 13px; color: var(--sh-data); overflow-wrap: anywhere; } .page-inspect .probe-note { margin: 0; font-family: var(--sh-f-mono); font-size: 10.5px; line-height: 1.45; color: var(--sh-muted); font-variant-numeric: tabular-nums; } .page-inspect .loc-sec { padding: 0 14px 12px; display: grid; gap: 8px; } .page-inspect #subtitle { display: flex; flex-wrap: wrap; gap: 2px 10px; font-family: var(--sh-f-mono); font-size: 10.5px; color: var(--sh-faint); font-variant-numeric: tabular-nums; } .page-inspect .locator { position: relative; display: block; width: 100%; height: 118px; border-radius: 8px; overflow: hidden; border: 1px solid var(--sh-line); text-decoration: none; background: #0a0b0e; } .page-inspect .locator:hover { border-color: var(--sh-accent); } .page-inspect .locator canvas { display: block; width: 100%; height: 100%; } .page-inspect .locator .loc-open, .page-inspect .locator .loc-name { position: absolute; padding: 1px 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); font-size: 10.5px; color: var(--sh-muted); } .page-inspect .locator .loc-open { right: 6px; bottom: 5px; } .page-inspect .locator .loc-name { left: 6px; top: 5px; max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sh-ink); font-weight: 500; } /* Measure: the existing bar, now living in the tool strip */ .page-inspect .measure-bar { display: flex; align-items: center; gap: 6px; } .page-inspect .measure-actions { display: flex; align-items: center; gap: 6px; } .page-inspect .measure-inline-hint { font-size: 12px; color: var(--sh-muted); white-space: nowrap; padding: 0 4px; } /* The tool strip is transformed, so position relative to it. */ .page-inspect .measure-readout { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); min-width: 13rem; padding: 10px 12px; display: grid; gap: 2px; font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; background: var(--sh-surface); border: 1px solid var(--sh-line-2); border-radius: 10px; backdrop-filter: blur(14px); } .page-inspect .measure-readout .metrics[hidden] { display: none; } .page-inspect .measure-readout .row { display: flex; justify-content: space-between; gap: 0.85rem; } .page-inspect .measure-readout .row span:last-child { font-family: var(--sh-f-mono); color: var(--sh-data); } .measure-btn.hidden, .measure-readout.hidden, .measure-inline-hint.hidden { display: none !important; } .measure-labels { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; } .measure-label { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); padding: 0.18rem 0.45rem; background: rgba(12, 14, 18, 0.9); border: 1px solid var(--sh-line); border-radius: 4px; font-family: var(--sh-f-mono); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; color: var(--sh-ink); opacity: 0; will-change: transform; } .measure-label.on { opacity: 1; } .measure-label.direct { border-color: rgba(255, 240, 74, 0.85); color: #fff04a; } .measure-label.horiz { border-color: rgba(92, 255, 154, 0.85); color: #5cff9a; } .measure-label.vert { border-color: rgba(255, 122, 69, 0.85); color: #ff7a45; } /* ========================================================================== Drive ========================================================================== */ /* Vehicle: two option cards (mockup) */ .page-drive .vehicle-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .page-drive .vehicle-opts button { display: grid; gap: 2px; align-content: start; margin: 0; padding: 8px; border: 1px solid var(--sh-line-2); border-radius: 8px; background: transparent; color: var(--sh-ink); text-align: left; font: inherit; cursor: pointer; } .page-drive .vehicle-opts button:hover { border-color: rgba(236, 236, 234, 0.32); } .page-drive .vehicle-opts button.on { border-color: var(--sh-accent); background: var(--sh-accent-soft); } .page-drive .vehicle-opts b { font-size: 12.5px; font-weight: 500; } .page-drive .vehicle-opts small { font-size: 10.5px; line-height: 1.3; color: var(--sh-faint); } .page-drive .sh-lbl .sh-kbd { margin-left: 4px; letter-spacing: 0; } /* Headlamps / Walk: toggle buttons, lit in the accent when on */ .page-drive .drive-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .page-drive .drive-act svg { width: 15px; height: 15px; } .page-drive .drive-act.on { border-color: var(--sh-accent); background: var(--sh-accent-soft); color: var(--sh-accent); } .page-drive .drive-act[hidden] { display: none; } /* Old dropdown styles (kept for the touch layout) */ .page-drive .vehicle-picker { position: relative; } .page-drive .site-trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--sh-line-2); border-radius: 8px; background: var(--sh-raise); color: var(--sh-ink); font: 500 13px var(--sh-f-ui); text-align: left; cursor: pointer; } .page-drive .site-trigger > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-drive .site-trigger::after { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid var(--sh-muted); border-bottom: 1.5px solid var(--sh-muted); transform: rotate(45deg); } .page-drive .site-trigger[aria-expanded="true"] { border-color: var(--sh-accent); } .page-drive .site-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; margin: 0; padding: 4px; list-style: none; background: var(--sh-bar); border: 1px solid var(--sh-line-2); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } .page-drive .site-menu li { padding: 7px 9px; border-radius: 6px; cursor: pointer; } .page-drive .site-menu li:hover, .page-drive .site-menu li:focus-visible { background: var(--sh-raise); outline: none; } .page-drive .site-menu li[aria-selected="true"] { background: var(--sh-accent-soft); } .page-drive .site-menu .name { margin: 0; font-size: 13px; } .page-drive .site-menu .sub { margin: 1px 0 0; font-size: 11px; color: var(--sh-faint); } /* Sun: drive.css markup, shell look */ .page-drive .drive-sun-mode { display: flex; gap: 2px; margin: 0; padding: 2px; border: 1px solid var(--sh-line-2); border-radius: 8px; background: var(--sh-well); } .page-drive .drive-sun-mode-btn { flex: 1 1 0; padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--sh-muted); font: 500 12.5px var(--sh-f-ui); letter-spacing: 0; text-transform: none; cursor: pointer; } .page-drive .drive-sun-mode-btn:hover { color: var(--sh-ink); border: 0; } .page-drive .drive-sun-mode-btn.is-active { background: var(--sh-ink); color: var(--sh-on-ink); border: 0; } .page-drive .drive-sun-mode-panel { margin-top: 8px; } .page-drive .drive-sun-date-row { display: flex; gap: 6px; } .page-drive .drive-sun-date { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--sh-line-2); border-radius: 8px; background: var(--sh-well); color: var(--sh-ink); font: 12px var(--sh-f-mono); color-scheme: dark; } .page-drive .drive-sun-date:focus { border-color: var(--sh-accent); outline: none; } .page-drive .drive-sun-date-apply { flex: 0 0 auto; height: 32px; padding: 0 12px; border: 1px solid var(--sh-accent); border-radius: 7px; background: var(--sh-accent); color: var(--sh-accent-ink); font: 600 12.5px var(--sh-f-ui); letter-spacing: 0; text-transform: none; cursor: pointer; } .page-drive .drive-sun-date-apply:disabled { background: var(--sh-raise); border-color: var(--sh-line-2); color: var(--sh-faint); cursor: default; } .page-drive .drive-sun-date-readout { margin: 8px 0 0; font-family: var(--sh-f-mono); font-size: 11px; line-height: 1.5; color: var(--sh-muted); white-space: pre-line; } .page-drive .drive-sun-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; } .page-drive .drive-sun-row:not(:first-of-type) { margin-top: 8px; } .page-drive .drive-sun-val { font-family: var(--sh-f-mono); font-size: 11.5px; color: var(--sh-data); } .page-drive #drive-sun-az, .page-drive #drive-sun-el { display: block; width: 100%; margin: 4px 0 0; } /* Ambient audio */ .page-drive .drive-audio { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; } .page-drive .drive-audio-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--sh-line-2); border-radius: 7px; background: var(--sh-raise); color: var(--sh-ink); font: 600 11px/1 var(--sh-f-ui); cursor: pointer; } .page-drive .drive-audio-toggle.is-playing { border-color: var(--sh-accent); background: var(--sh-accent-soft); color: var(--sh-accent); } .page-drive .drive-audio-vol { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sh-ink); } .page-drive .drive-audio-vol input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; } .page-drive .drive-credit { margin: 0; font-size: 11px; line-height: 1.45; color: var(--sh-faint); } .page-drive .drive-credit a { color: var(--sh-muted); } /* Telemetry in the tool strip */ .page-drive .sh-tele { display: flex; align-items: stretch; margin: 0; } .page-drive .sh-tele > div { display: grid; padding: 2px 16px; border-left: 1px solid var(--sh-line); } .page-drive .sh-tele > div:first-child { border-left: 0; } .page-drive .sh-tele dt { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sh-faint); } .page-drive .sh-tele dd { margin: 0; font-family: var(--sh-f-mono); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Stability gauges (Pitch / Roll): the icon tilts; the number's colour is set from main.js (text colour -> yellow -> red as the LRV's limit nears). */ .page-drive .sh-tele .drive-stab { display: flex; align-items: center; gap: 6px; } /* Fixed-width value so the cell never resizes as the number changes. */ .page-drive .sh-tele .drive-stab span { display: inline-block; width: 4ch; text-align: right; white-space: pre; } .page-drive .sh-tele .drive-stab svg { width: 36px; height: 24px; flex: none; overflow: visible; fill: currentColor; stroke: currentColor; stroke-width: 0; } .page-drive .sh-tele .drive-stab .gnd { stroke-width: 1; opacity: 0.35; } .page-drive .sh-tele .drive-stab .st { stroke-width: 1.1; } .page-drive .sh-tele .drive-stab .wh { fill: none; stroke-width: 2.2; } .page-drive .sh-tele .drive-stab .ico { transform-box: view-box; transition: transform 0.18s linear; } .page-drive .sh-tele .drive-stab #drive-pitch-ico { transform-origin: 16px 12px; } .page-drive .sh-tele .drive-stab #drive-roll-ico { transform-origin: 12px 12px; } /* Fixed minimum widths (in characters of each readout's own font) so a cell never resizes as its number gains or loses digits; the widest value each can show is "100 km/h", "12.34 km", "90°", "359° NW", "−5,123 m". */ .page-drive .sh-tele #drive-speed { min-width: 8ch; } .page-drive .sh-tele #drive-odo { min-width: 8ch; } .page-drive .sh-tele #drive-slope { min-width: 3ch; } .page-drive .sh-tele #drive-heading { min-width: 7ch; } .page-drive .sh-tele #drive-elev { min-width: 8ch; } .page-drive .sh-tele .drive-speed { font-size: 20px; line-height: 1.15; color: var(--sh-data); } /* Minimap = context card. Keeps drive.css's expanded (travel-open) mode. */ .page-drive .drive-map-panel:not(.travel-open) { position: fixed; top: calc(var(--sh-top-h) + var(--sh-gap)); right: var(--sh-gap); bottom: auto; left: auto; z-index: 20; width: var(--sh-card-w); padding: 10px 12px 12px; background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: 10px; backdrop-filter: blur(14px); } .page-drive .drive-map-panel.travel-open { z-index: 60; border-radius: 10px; background: var(--sh-bar); border: 1px solid var(--sh-line-2); } .page-drive .drive-map-title, .page-drive .drive-map-readout { font-size: 11px; } /* Header: [swatch layer L ▾] · expand (mockup layer picker) */ .page-drive .drive-map-panel { overflow: visible; } .page-drive .drive-map-title { gap: 6px; margin-bottom: 8px; } .page-drive .drive-lpick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; height: 28px; margin: 0; padding: 0 8px 0 4px; border: 1px solid var(--sh-line-2); border-radius: 7px; background: var(--sh-raise); color: var(--sh-ink); font: 500 12px var(--sh-f-ui); text-align: left; white-space: nowrap; cursor: pointer; } .page-drive .drive-lpick:hover, .page-drive .drive-lpick[aria-expanded="true"] { border-color: rgba(236, 236, 234, 0.32); } .page-drive .drive-lpick-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .page-drive .drive-lpick svg { flex: 0 0 auto; width: 10px; height: 10px; color: var(--sh-muted); } .page-drive .drive-map-sw { flex: 0 0 auto; display: block; width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--sh-line); background: #222 center / cover no-repeat; } /* Layer menu: grouped rows with thumbnails, dropping over the card */ .page-drive .drive-lpop { position: absolute; left: 0; right: 0; top: 46px; z-index: 3; display: grid; gap: 8px; max-height: 520px; overflow: auto; padding: 8px 6px; border: 1px solid var(--sh-line); border-radius: 10px; background: rgba(14, 15, 17, 0.97); backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); scrollbar-width: thin; } .page-drive .drive-lpop[hidden] { display: none; } .page-drive .drive-lpop-grp { display: grid; gap: 2px; } .page-drive .drive-lpop-grp .sh-lbl { padding: 0 6px 4px; } .page-drive .drive-lay { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; margin: 0; padding: 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--sh-ink); font: inherit; text-align: left; cursor: pointer; } .page-drive .drive-lay:hover { background: var(--sh-raise); } .page-drive .drive-lay.sel { background: var(--sh-accent-soft); border-color: rgba(var(--sh-accent-rgb), 0.45); } .page-drive .drive-lay .drive-map-sw { width: 34px; height: 34px; border-radius: 6px; } .page-drive .drive-lay b { display: block; font-size: 13px; font-weight: 500; } .page-drive .drive-lay small { display: block; font-size: 11px; line-height: 1.3; color: var(--sh-faint); } .page-drive .drive-map-expand { flex: 0 0 auto; width: 28px; height: 28px; } .page-drive .drive-map-expand[aria-pressed="true"] { border-color: var(--sh-accent); color: var(--sh-accent); } .page-drive .drive-map-panel.travel-open .drive-map-expand { display: none; /* the × closes the expanded map */ } .page-drive .drive-map-canvas { position: relative; } .page-drive #drive-map-scale { position: absolute; left: 6px; bottom: 5px; padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); font-family: var(--sh-f-mono); font-size: 10px; color: var(--sh-muted); pointer-events: none; } .page-drive #drive-minimap { border-radius: 8px; border: 1px solid var(--sh-line); } /* Map outline: drawn in CSS (not on the canvas) so its corners follow the canvas radius — 7px = the 8px outer radius minus the 1px border it sits inside. */ .page-drive .drive-map-canvas::after { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 7px; pointer-events: none; } /* Legend with a marker for the value under the rover / cursor */ .page-drive .drive-map-legend { margin: 10px 0 0; display: grid; gap: 4px; } .page-drive .drive-map-legend-track { position: relative; } .page-drive .drive-map-legend .legend-bar { height: 8px; border-radius: 2px; } .page-drive .drive-map-legend-mark { position: absolute; top: -5px; width: 0; height: 0; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--sh-ink); transition: left 0.3s; } .page-drive .drive-map-legend-mark[hidden] { display: none; } .page-drive .drive-map-panel.no-scale :is(.drive-map-legend, .drive-map-under) { display: none; } .page-drive .drive-map-under { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 8px; font-size: 11.5px; color: var(--sh-muted); } .page-drive .drive-map-under b { font-family: var(--sh-f-mono); font-weight: 500; font-size: 13px; color: var(--sh-data); } .page-drive .drive-map-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-top: 10px; } .page-drive .drive-map-readout { margin: 0; min-width: 0; font-family: var(--sh-f-mono); font-size: 11px; color: var(--sh-data); } .page-drive .drive-fast-travel { display: inline-flex; align-items: center; flex: 0 0 auto; width: auto; height: 26px; margin: 0; padding: 0 10px; border: 1px solid var(--sh-line-2); border-radius: 7px; background: var(--sh-raise); font: 500 11.5px var(--sh-f-ui); letter-spacing: 0; text-transform: none; } .page-drive .drive-fast-travel:hover, .page-drive .drive-fast-travel.active { border-color: var(--sh-accent); color: var(--sh-accent); } .page-drive .drive-map-close { border-radius: 7px; } /* Touch: the always-on corner map stays a small picture */ body.drive-touch-controls .drive-map-panel:not(.travel-open) :is(.drive-lpick kbd, .drive-map-expand, .drive-map-legend, .drive-map-under, .drive-fast-travel) { display: none; } body.drive-touch-controls .drive-map-panel:not(.travel-open) .drive-map-foot { padding-top: 4px; } .page-drive .drive-map-legend .legend-labels { font-size: 10px; } /* Key hints live in the status bar */ .page-drive .drive-hint-bar { display: flex; gap: 14px; padding: 0; background: none; border: 0; backdrop-filter: none; width: auto; font-size: 11.5px; color: var(--sh-muted); pointer-events: none; } .page-drive .drive-hint-bar strong { font-family: var(--sh-f-mono); font-size: 10px; font-weight: 500; padding: 0 4px; border: 1px solid var(--sh-line-2); border-radius: 3px; color: var(--sh-ink); margin-right: 3px; } /* Touch devices (any width): sticks own the bottom-left, actions the top-right. The status bar folds into the top bar and keeps only the FPS readout. */ body.drive-touch-controls .sh-status { top: 0; bottom: auto; left: auto; right: calc(var(--sh-gap) + 40px); height: var(--sh-top-h); padding: 0 6px; background: none; border: 0; z-index: 31; pointer-events: none; } body.drive-touch-controls .sh-status-l, body.drive-touch-controls .sh-status-r > :not(#drive-fps) { display: none; } body.drive-touch-controls .sh-dock { bottom: auto; max-height: calc(100vh - var(--sh-top-h) - 190px); } body.drive-touch-controls .sh-tools { left: auto; right: var(--sh-gap); transform: none; bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 0.6rem); } body.drive-touch-controls #drive-touch .mobile-actions { top: calc(var(--sh-top-h) + var(--sh-gap)); } /* H hides the HUD; the phone HUD button does the same */ body.drive-hud-hidden .sh-ui, body.drive-mobile-hud-hidden .sh-ui { visibility: hidden; opacity: 0; pointer-events: none; } body.drive-hud-hidden .drive-map-panel.travel-open, body.drive-mobile-hud-hidden .drive-map-panel.travel-open { visibility: visible; opacity: 1; pointer-events: auto; } /* ========================================================================== Map ========================================================================== */ .page-map #map { position: fixed; inset: var(--sh-top-h) 0 var(--sh-status-h) 0; background: #050608; } .page-map .leaflet-container { background: #050608; font: inherit; } /* Grayscale basemap so the site footprints and data layers carry the color */ .page-map .leaflet-tile-pane, .page-map .leaflet-image-layer { filter: grayscale(1) brightness(0.85) contrast(1.08); } .page-map .graticule-label { background: transparent; border: none; color: #ffffff; font-family: var(--sh-f-mono); font-size: 10.5px; font-weight: 500; text-shadow: 0 0 4px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.55); box-shadow: none; white-space: nowrap; } .page-map .site-marker { background: #ffffff; border: 2px solid #1a140c; border-radius: 50%; width: 14px !important; height: 14px !important; margin-left: -7px !important; margin-top: -7px !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); cursor: pointer; } .page-map .site-marker.selected { background: var(--sh-accent); box-shadow: 0 0 0 4px rgba(var(--sh-accent-rgb), 0.45); } .page-map .site-marker.hovered { box-shadow: 0 0 0 5px rgba(var(--sh-accent-rgb), 0.55); transform: scale(1.15); } .page-map .site-label { background: var(--sh-bar); border: 1px solid var(--sh-line-2); border-radius: 5px; color: var(--sh-ink); font: 12px var(--sh-f-ui); padding: 2px 7px; white-space: nowrap; box-shadow: none; } .page-map .site-label::before { display: none; } /* Site detail = context card */ .page-map #detail { overflow: hidden; padding: 0; } .page-map #detail.hidden { display: none !important; } .page-map .detail-thumb-wrap { position: relative; height: 150px; background: #111; } .page-map #detail-thumb { display: block; width: 100%; height: 100%; object-fit: cover; } .page-map .detail-thumb-wrap::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(8, 9, 12, 0.85)); } .page-map #detail-badge { position: absolute; left: 12px; bottom: 9px; z-index: 1; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sh-accent); font-weight: 600; text-shadow: 0 1px 6px #000; } .page-map #detail-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 26px; height: 26px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: var(--sh-ink); font-size: 16px; line-height: 1; cursor: pointer; } .page-map .detail-body { padding: 12px 14px 14px; gap: 10px; } .page-map #detail-name { font-size: 24px; line-height: 1.1; } .page-map .detail-coord { margin: 2px 0 0; font-family: var(--sh-f-mono); font-size: 11.5px; color: var(--sh-data); } .page-map #detail .sh-kv dd { font-size: 13px; } /* Footprint short codes (mockup: code above each footprint, accent when selected) */ .page-map .site-code { background: none; border: 0; } .page-map .site-code span { display: inline-block; font: 600 11px/1 var(--sh-f-mono); color: rgba(236, 236, 234, 0.85); text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.7); white-space: nowrap; cursor: pointer; } .page-map .site-code.hovered span { color: #f0a57e; } .page-map .site-code.selected span { color: var(--sh-accent); font-size: 12px; } .page-map .detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1280px) { .sh-modes kbd { display: none; } .sh-modes a { padding: 6px 12px; } } @media (max-width: 1100px) { :root { --sh-dock-w: 272px; --sh-card-w: 256px; } .sh-brand-text { display: none; } .sh-sun .sh-sun-lbl { display: none; } .page-drive .sh-tele > div { padding: 2px 10px; } } @media (max-width: 860px) { .sh-tools { max-width: calc(100vw - 2 * var(--sh-gap)); } .page-drive .sh-tele dd { font-size: 13px; } .page-drive .sh-tele .drive-speed { font-size: 16px; } /* Narrow: keep the probe and the site name, drop the locator picture */ .page-inspect .sh-card { width: 240px; } .page-inspect .locator { height: auto; border: 0; background: none; } .page-inspect .locator canvas, .page-inspect .locator .loc-open, .page-inspect #subtitle { display: none; } .page-inspect .locator .loc-name { position: static; display: block; padding: 0; background: none; font-size: 12px; } .page-drive .sh-tools { left: auto; right: var(--sh-gap); transform: none; bottom: calc(var(--sh-status-h) + var(--sh-gap)); } } /* Phones: dock becomes a sheet, status bar goes away */ @media (max-width: 720px) { :root { --sh-top-h: 48px; --sh-status-h: 0px; --sh-gap: 8px; } /* Status bar folds into the top bar: only the FPS readout stays */ .sh-status { top: 0; bottom: auto; left: auto; right: calc(var(--sh-gap) + 40px); height: var(--sh-top-h); padding: 0 6px; background: none; border: 0; z-index: 31; pointer-events: none; } .sh-status-l, .sh-status-r > :not(#fps):not(#drive-fps) { display: none; } .page-inspect .sh-card { left: var(--sh-gap); right: var(--sh-gap); top: calc(var(--sh-top-h) + var(--sh-gap) + 52px); width: auto; } .page-inspect .probe-sec { padding: 8px 12px 6px; gap: 4px; } .page-inspect .loc-sec { padding: 0 12px 8px; } .page-inspect .probe-big { font-size: 18px; } .page-inspect .probe-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; } .page-inspect .probe-kv > div:nth-last-child(2) { grid-column: auto; } .page-inspect .probe-kv dd { font-size: 11px; } .page-inspect .probe-note { display: none; } .sh-topbar { grid-template-columns: auto 1fr auto; gap: 8px; } .sh-brand img { width: 32px; height: 32px; } .sh-modes { justify-self: center; } .sh-modes a { padding: 6px 10px; } .sh-modes a .sh-mode-lbl { display: none; } .sh-sun { display: none; } .sh-dock { left: var(--sh-gap); right: var(--sh-gap); top: auto; bottom: var(--sh-gap); width: auto; max-height: min(46vh, 26rem); } .sh-dock.collapsed { bottom: var(--sh-gap); } .sh-dock.collapsed .sh-dock-toggle svg { transform: rotate(90deg); } .sh-dock:not(.collapsed) .sh-dock-toggle svg { transform: rotate(-90deg); } .sh-tools { top: calc(var(--sh-top-h) + var(--sh-gap)); bottom: auto; } /* ---- Map on phones: same floating bottom panel as Inspect ---- */ body.page-map { /* space taken at the bottom by the panel (its height + the gap under it) */ --map-sheet: calc(min(46vh, 26rem) + var(--sh-gap)); } body.page-map:has(#sh-dock.collapsed) { --map-sheet: calc(49px + var(--sh-gap)); } .page-map #map { inset: var(--sh-top-h) 0 0 0; } .page-map .sh-dock:not(.collapsed) { height: min(46vh, 26rem); } .sh-dock-h { cursor: default; } /* Site card: compact, docked to the bottom of the map */ .page-map .sh-dock-h, .page-inspect .sh-dock-h { cursor: pointer; } .page-map .sh-card { top: auto; left: var(--sh-gap); right: var(--sh-gap); bottom: calc(var(--map-sheet) + var(--sh-gap)); width: auto; max-height: calc(100dvh - var(--sh-top-h) - var(--map-sheet) - 2 * var(--sh-gap)); z-index: 21; } .page-map .detail-thumb-wrap { position: static; height: auto; background: none; } .page-map .detail-thumb-wrap::after, .page-map #detail-thumb { display: none; } .page-map #detail-badge { position: static; display: block; padding: 10px 44px 0 14px; } .page-map #detail-close { top: 6px; right: 6px; background: var(--sh-raise); } .page-map .detail-body { padding: 4px 14px 12px; gap: 8px; } .page-map #detail-name { font-size: 20px; } .page-map #detail .sh-kv { display: flex; flex-wrap: wrap; gap: 2px 14px; } .page-map #detail .sh-kv > div { display: flex; align-items: baseline; gap: 5px; } .page-map #detail .sh-kv dd { font-size: 11.5px; } .page-map .detail-actions .sh-btn { height: 34px; } /* Zoom / whole-pole: small icon column in the map's top-right corner */ .page-map .sh-tools { display: flex; flex-direction: column; top: calc(var(--sh-top-h) + var(--sh-gap)); right: var(--sh-gap); bottom: auto; left: auto; transform: none; max-width: none; padding: 3px; gap: 3px; } .page-map .sh-tools .sh-sep { display: none; } /* Data credit as a small tag in the map's top-left corner */ .page-map .sh-status { top: calc(var(--sh-top-h) + 6px); left: 6px; right: auto; height: auto; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); z-index: 19; font-size: 10px; } .page-map .sh-status-r > #map-attr { display: inline !important; } .page-inspect .measure-readout { bottom: auto; top: calc(100% + 8px); } /* Drive: sticks own the bottom edge, so the panel drops from the top-left */ .page-drive .sh-dock { top: calc(var(--sh-top-h) + var(--sh-gap)); bottom: auto; right: auto; width: min(18rem, calc(100vw - 110px)); max-height: 60vh; } .page-drive .sh-dock.collapsed { bottom: auto; } .page-drive .sh-dock.collapsed .sh-dock-toggle svg { transform: rotate(-90deg); } .page-drive .sh-dock:not(.collapsed) .sh-dock-toggle svg { transform: rotate(90deg); } .page-drive .sh-tools { top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 0.6rem); } body.drive-touch-controls .sh-tools { left: auto; right: var(--sh-gap); transform: none; bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 0.6rem); } .page-drive .sh-tele > div:nth-child(n + 3) { display: none; } body.drive-touch-controls .drive-map-panel:not(.travel-open) { top: calc(var(--sh-top-h) + var(--sh-gap)); } body.drive-map-open .sh-dock, body.drive-map-open .sh-tools { visibility: hidden; opacity: 0; pointer-events: none; } } /* ---------- Map → Inspect transition (handoff.js) ---------- */ /* Old and new page cross-fade instead of a hard cut (Chromium). */ /* Map: while it zooms into a site, everything but the map steps aside. */ body.map-leaving .sh-ui:not(.sh-topbar), body.mode-leaving :is(.sh-ui:not(.sh-topbar), #drive-touch, .measure-labels) { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } body.map-leaving :is(.leaflet-marker-pane, .leaflet-overlay-pane, .leaflet-tooltip-pane) { opacity: 0; transition: opacity 0.5s ease; } /* Inspect, arriving from the Map: the map as it was drawn (#intro-tiles, built by a script at the top of the page) stays up while the 3D scene builds behind it. Once the terrain has drawn, the part over the site dissolves, then the camera tilts and the rest of the map fades away. */ /* The top bar stays put through the whole transition, above the map picture. */ html.intro .sh-topbar { z-index: 80; } html.intro #loading { z-index: 50; background: transparent; } html.intro #loading > * { opacity: 0; animation: sh-intro-late 0s 7s forwards; } #intro-tiles { position: fixed; inset: 0; z-index: 58; pointer-events: none; } #intro-tiles img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; user-select: none; } /* Everything except the site rectangle (the hole is 1px smaller than the rectangle so the two copies overlap and never leave a seam). */ #intro-tiles .out { clip-path: polygon( evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, calc(var(--ix) + 1px) calc(var(--iy) + 1px), calc(var(--ix) + 1px) calc(var(--iy) + var(--ih) - 1px), calc(var(--ix) + var(--iw) - 1px) calc(var(--iy) + var(--ih) - 1px), calc(var(--ix) + var(--iw) - 1px) calc(var(--iy) + 1px), calc(var(--ix) + 1px) calc(var(--iy) + 1px) ); } /* Just the site rectangle: leaves once the terrain behind it has drawn. */ #intro-tiles .in { clip-path: polygon( var(--ix) var(--iy), calc(var(--ix) + var(--iw)) var(--iy), calc(var(--ix) + var(--iw)) calc(var(--iy) + var(--ih)), var(--ix) calc(var(--iy) + var(--ih)) ); } #intro-tiles .in.fade { opacity: 0; transition: opacity 0.7s ease; } /* Map, arriving from Inspect / Drive: the map around the site appears first. */ #intro-tiles .out.fade { opacity: 0; transition: opacity 0.7s ease; } /* ...and its markers and grid wait for the zoom-out, with the panels. */ html.intro body.page-map :is(.leaflet-marker-pane, .leaflet-overlay-pane, .leaflet-tooltip-pane) { opacity: 0; } html.intro-out body.page-map :is(.leaflet-marker-pane, .leaflet-overlay-pane, .leaflet-tooltip-pane) { animation: sh-intro-ui 0.9s ease both; } #intro-tiles.fade { opacity: 0; transition: opacity 1.3s ease; } /* Opened directly (typed URL, reload, site switch in Drive): the same progress card, over the boot overlay's dark backdrop instead of its spinner. */ html.direct-load #loading > * { visibility: hidden; } /* Progress card over the transition (Map and Inspect). */ #intro-bar { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } #intro-bar.on { opacity: 1; } #intro-bar .sh-busy-card { padding: 14px 18px 12px; border-radius: 10px; background: rgba(10, 11, 14, 0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @keyframes sh-intro-late { to { opacity: 1; } } html.intro .sh-ui:not(.sh-topbar) { opacity: 0; pointer-events: none; } html.intro-out .sh-ui:not(.sh-topbar) { animation: sh-intro-ui 0.9s ease both; } @keyframes sh-intro-ui { from { opacity: 0; } to { opacity: 1; } }