:root { /* Depot Connect brand: navy #14282f · steel #709fb1 · stone #d3d2cd · paper #eceae6 · Saira */ --navy: #14282f; --navy-deep: #0c1b20; --steel: #709fb1; --steel-soft: rgba(112, 159, 177, .2); --stone: #d3d2cd; --paper: #eceae6; --ink: #eef1f1; --ink-dim: rgba(238, 241, 241, .64); --ink-faint: rgba(238, 241, 241, .4); --glass: rgba(20, 40, 47, .8); --glass-strong: rgba(14, 30, 36, .93); --line: rgba(238, 241, 241, .13); --freight: #709fb1; /* Depot steel (was a generic orange) */ --radius: 12px; --panel-w: 380px; --font: Saira, system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--navy); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; } button, input, select { font: inherit; color: inherit; } #xp { position: fixed; inset: 0; } #scene { display: block; width: 100%; height: 100%; touch-action: none; outline: none; } .glass { background: var(--glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--line); } /* brand */ .brand { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; pointer-events: none; padding: 12px 16px 11px; border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(5, 28, 36, .25); } .brand__name, .loader__name { font-weight: 700; letter-spacing: .22em; font-size: 18px; color: var(--ink); } .brand__name span, .loader__name span { font-weight: 300; color: var(--steel); margin-left: .3em; } .brand__sub { margin-top: 5px; font-size: 11px; letter-spacing: .06em; color: var(--ink-dim); } .brand__sub em { font-style: normal; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(230, 162, 60, .2); color: #f0c27a; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; } /* top bar */ .topbar { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; display: flex; gap: 8px; transition: right .35s ease; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); font-weight: 500; font-size: 13px; letter-spacing: .04em; cursor: pointer; box-shadow: 0 8px 30px rgba(5, 28, 36, .25); transition: background .2s, color .2s; } .pill svg { width: 18px; height: 18px; } .pill:hover { background: var(--glass-strong); } .pill[aria-pressed="true"] { background: var(--steel); color: var(--navy); border-color: transparent; } #bFreight[aria-pressed="true"] { background: var(--steel); color: var(--navy); } #bReset:active svg { transform: rotate(-120deg); transition: transform .25s; } .pill:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; } /* panel */ .panel { position: absolute; top: calc(max(16px, env(safe-area-inset-top)) + 56px); right: 16px; bottom: 96px; width: var(--panel-w); display: flex; flex-direction: column; border-radius: 16px; background: var(--glass-strong); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(5, 28, 36, .45); overflow: hidden; z-index: 3; animation: panelIn .35s ease; } @keyframes panelIn { from { opacity: 0; transform: translateX(20px); } } .panel__grab { display: none; } .pview { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 16px 16px 0; } .pview[hidden], .panel[hidden], .tip[hidden] { display: none; } .phead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .phead h2 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .04em; } .x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(238, 243, 246, .06); font-size: 20px; line-height: 1; cursor: pointer; } .x:hover { background: rgba(238, 243, 246, .12); } .back { border: 0; background: none; color: var(--steel); cursor: pointer; padding: 6px 0; font-size: 14px; } .muted { color: var(--ink-dim); font-size: 13px; line-height: 1.5; margin: 0 0 12px; } .summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .stat { padding: 10px; border-radius: 10px; background: rgba(238, 243, 246, .05); } .stat b { display: block; font-size: 18px; font-weight: 500; } .stat span { font-size: 11px; color: var(--ink-dim); letter-spacing: .04em; } .seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; border-radius: 10px; background: rgba(238, 243, 246, .06); margin-bottom: 10px; } .seg button { border: 0; background: none; padding: 8px 4px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--ink-dim); cursor: pointer; } .seg button[aria-selected="true"] { background: var(--steel); color: var(--navy); } .filters { display: grid; gap: 8px; margin-bottom: 10px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: none; padding: 6px 10px; border-radius: 999px; font-size: 12px; color: var(--ink-dim); cursor: pointer; } .chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--steel)); } .chip[aria-pressed="true"] { color: var(--ink); border-color: var(--steel); background: var(--steel-soft); } .row { display: flex; gap: 8px; } .row input, .row select { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(238, 243, 246, .05); font-size: 13px; } .row select { flex: 0 0 120px; } .row select option { background: var(--navy); } .ulist, .flist { list-style: none; margin: 0 -16px; padding: 0 8px 12px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; } .urow { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; } .urow:hover, .urow.is-hov { background: rgba(238, 243, 246, .06); } .urow .num { display: grid; place-items: center; height: 36px; border-radius: 8px; background: rgba(238, 243, 246, .06); font-weight: 700; font-size: 14px; border-left: 3px solid var(--c); } .urow .meta { font-size: 13px; } .urow .meta small { display: block; color: var(--ink-dim); font-size: 11px; margin-top: 2px; } .urow .area { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: color-mix(in srgb, var(--c) 26%, transparent); color: color-mix(in srgb, var(--c) 80%, white); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); } .badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); } /* unit detail: the status is a solid, unmissable pill */ .d-title .badge { padding: 6px 14px; font-size: 13px; background: var(--c); color: var(--navy); border-color: transparent; } .d-title .badge i { background: var(--navy); opacity: .55; } .legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-dim); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .empty { padding: 24px 8px; text-align: center; color: var(--ink-dim); font-size: 13px; } /* detail */ .detail { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 16px; } .d-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .d-title h3 { margin: 0; font-size: 28px; font-weight: 500; } .d-sub { color: var(--ink-dim); font-size: 13px; margin: 4px 0 14px; } .d-plan { width: 100%; height: 170px; border-radius: 12px; background: rgba(238, 243, 246, .04); margin-bottom: 14px; } .d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .d-grid .stat b { font-size: 20px; } .d-grid .stat.wide { grid-column: span 2; } .d-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } /* Enquire + the unit's PDF brochure (/v2/assets/units/, built by /root/depot-v2-build/unit-pdfs/make.mjs) */ .btn.d-pdf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .btn.d-pdf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(238, 243, 246, .06); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; color: var(--ink); } .btn:hover { background: rgba(238, 243, 246, .12); } .btn.primary { background: var(--steel); color: var(--navy); border-color: transparent; } .d-nav { display: flex; justify-content: space-between; } .d-nav button { border: 0; background: none; color: var(--steel); cursor: pointer; font-size: 13px; padding: 8px 0; } .d-note { font-size: 11px; color: var(--ink-faint); line-height: 1.5; margin-top: 10px; } /* freight list */ .frow { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; width: 100%; padding: 12px 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; } .frow:hover, .frow[aria-pressed="true"] { background: var(--steel-soft); } .frow b { font-weight: 500; font-size: 14px; } .frow small { color: var(--ink-dim); font-size: 12px; } .frow .t { text-align: right; font-size: 20px; font-weight: 500; color: var(--freight); font-variant-numeric: tabular-nums; } .frow .t small { display: block; font-size: 11px; color: var(--ink-dim); } .credit { font-size: 10px; color: var(--ink-faint); padding: 8px 0 14px; margin: 0; border-top: 1px solid var(--line); } /* labels / pins / tooltip */ .labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .ulabel { position: absolute; left: 0; top: 0; pointer-events: auto; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; border: 0; border-bottom: 2px solid var(--c, var(--steel)); background: rgba(20, 40, 47, .88); color: var(--ink); font: 700 11px/22px var(--font); cursor: pointer; will-change: transform; transition: background .15s; } .ulabel:hover, .ulabel.is-hov { background: var(--navy); } .ulabel.is-sel { background: var(--ink); color: var(--navy); transform-origin: center; } .pin { position: absolute; left: 0; top: 0; pointer-events: auto; transform-origin: 50% 100%; padding: 6px 10px; border-radius: 10px; background: rgba(20, 40, 47, .92); border: 1px solid rgba(112, 159, 177, .55); white-space: nowrap; font-size: 12px; cursor: pointer; } .pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: rgba(112, 159, 177, .8); } .pin b { display: block; font-size: 12px; font-weight: 500; } .pin span { color: var(--freight); font-weight: 500; } .pin.site { border-color: var(--steel); background: var(--steel); color: var(--navy); font-weight: 700; letter-spacing: .12em; } .pin.site::after { border-top-color: var(--steel); } .pin.shield { padding: 3px 8px; border-radius: 5px; background: #1d6b3a; border: 2px solid #f2f2ea; font-weight: 700; color: #fff; } .pin.shield::after { display: none; } /* Freight destinations (v0.7.68 declutter): exact dot + label placed clear of the others, leader line between */ .pin.dest { transition: opacity .25s ease; } .pin.dest::after { display: none; } .pin.dest.is-compact { padding: 4px 8px; } .pin.dest.is-compact b, .pin.dest.is-compact .km { display: none; } .pin.dest.is-hidden { opacity: 0; pointer-events: none; } .pin.dest.is-sel { border-color: var(--steel); } .pin.site { z-index: 3; } .pindot { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: 0; padding: 0; border-radius: 50%; background: var(--navy); border: 2px solid #f2f2ea; box-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: auto; cursor: pointer; z-index: 1; } .pindot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; } /* bigger hit area */ .pindot.is-sel { background: var(--steel); } .pinlines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .pinlines line { stroke: rgba(20, 40, 47, .75); stroke-width: 1.5; } .tip { position: absolute; left: 0; top: 0; pointer-events: none; padding: 8px 12px; border-radius: 10px; background: rgba(20, 40, 47, .94); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; z-index: 4; } .tip b { font-size: 14px; margin-right: 6px; } /* dock */ .dock { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: var(--glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(5, 28, 36, .35); max-width: calc(100vw - 32px); transition: left .35s ease; } .dock__group { display: flex; gap: 4px; } .dock button { appearance: none; border: 0; background: transparent; color: var(--ink-dim); font: 500 13px/1 var(--font); letter-spacing: .04em; padding: 10px 14px; border-radius: 10px; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; } .dock button:hover { color: var(--ink); background: rgba(238, 243, 246, .06); } .dock button.is-active, .dock button[aria-pressed="true"] { color: var(--navy); background: var(--steel); } .dock__time { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 10px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .dock__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } .dock__time output { font: 500 13px/1 var(--font); font-variant-numeric: tabular-nums; min-width: 40px; color: var(--ink); } .dock .now { padding: 8px 10px; font-size: 12px; border: 1px solid var(--line); } .dock .now[aria-pressed="true"] { background: #3fb47a; color: #062014; border-color: transparent; } .dock .now[aria-pressed="true"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; animation: blink 1.6s infinite; } @keyframes blink { 50% { opacity: .2; } } .dock input[type=range] { -webkit-appearance: none; appearance: none; width: 170px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #1b2a4a 0%, #1b2a4a 20%, #f3b26b 27%, #fff4d6 50%, #f08a4b 75%, #1b2a4a 82%, #1b2a4a 100%); outline: none; } .dock input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid var(--steel); cursor: grab; } .dock input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--steel); cursor: grab; } .hint { position: absolute; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px); transform: translateX(-50%); font-size: 12px; color: var(--ink); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 6px 12px; border-radius: 20px; pointer-events: none; transition: opacity .8s; white-space: nowrap; } .hint.is-hidden { opacity: 0; } .loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at 50% 40%, #1a3140, var(--navy-deep)); transition: opacity .9s ease; z-index: 10; } .loader .loader__name { color: var(--ink); font-size: 26px; } .loader__bar { width: 220px; height: 2px; background: rgba(238, 243, 246, .12); border-radius: 2px; overflow: hidden; } .loader__bar i { display: block; height: 100%; width: 0; background: var(--steel); transition: width .25s; } .loader__pct { font-size: 12px; letter-spacing: .1em; color: var(--ink-dim); } .loader.is-done { opacity: 0; pointer-events: none; } .dev { position: absolute; bottom: 90px; left: 16px; margin: 0; padding: 10px 12px; font: 11px/1.5 ui-monospace, Menlo, monospace; color: #cfe; background: rgba(5, 28, 36, .82); border-radius: 8px; max-width: 360px; white-space: pre-wrap; pointer-events: none; z-index: 5; } /* mobile: panel becomes a bottom sheet */ @media (max-width: 760px) { :root { --panel-w: 100vw; } .brand { left: 12px; top: max(12px, env(safe-area-inset-top)); padding: 9px 12px 8px; } .brand__name { font-size: 13px; } .brand__sub { font-size: 10px; } .topbar, body.panel-open .topbar { top: calc(max(12px, env(safe-area-inset-top)) + 58px); left: 12px; right: auto; z-index: 4; } .pill { padding: 8px 12px; font-size: 12px; gap: 6px; } .pill svg { width: 16px; height: 16px; } /* bottom sheet: peek / half / full, draggable; the whole view scrolls (header sticky) so lists get real height */ .panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: var(--sheet-h, 55vh); max-height: calc(100vh - 124px); border-radius: 18px 18px 0 0; animation: sheetIn .35s ease; padding-bottom: env(safe-area-inset-bottom); transition: height .32s cubic-bezier(.2,.8,.2,1); touch-action: pan-y; } .panel.dragging { transition: none; } @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } } .panel__grab { display: block; width: 100%; height: 22px; margin: 0; background: none; border: 0; cursor: grab; touch-action: none; position: relative; flex: none; } .panel__grab::after { content: ""; position: absolute; left: 50%; top: 9px; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: rgba(238, 243, 246, .3); } .pview { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-top: 0; padding-bottom: 24px; } .phead { position: sticky; top: 0; z-index: 2; background: var(--glass-strong); margin: 0 -16px 10px; padding: 4px 16px 8px; touch-action: none; } .ulist, .flist { overflow: visible; flex: none; min-height: auto; } .detail { overflow: visible; flex: none; } .legend { flex: none; } .panel.is-peek .pview > :not(.phead) { visibility: hidden; } .x.min { font-size: 0; } .x.min::before { content: ""; display: block; width: 10px; height: 10px; margin: 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); } .panel.is-peek .x.min::before { transform: translateY(2px) rotate(-135deg); } body.panel-open .dock { display: none; } .dock { flex-wrap: wrap; justify-content: center; width: calc(100vw - 24px); gap: 6px; bottom: max(12px, env(safe-area-inset-bottom)); } .dock__time { order: -1; width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 4px 6px 10px; } .dock input[type=range] { flex: 1; width: auto; } .dock button { padding: 10px 11px; } .hint { display: none; } .d-plan { height: 130px; } body.freight .panel { height: 42vh; } } /* style preferences */ .sgroup { border: 0; margin: 0 0 14px; padding: 0; } .sgroup legend { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; padding: 0; } .srow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 13px; } .srow input[type=color] { width: 44px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; } .srow input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; } .srow input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; } .srow input[type=range] { width: 130px; accent-color: var(--steel); } .srow output { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-dim); min-width: 34px; text-align: right; } .sactions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; } .sactions .btn { padding: 10px 6px; font-size: 12px; } /* map mode */ #map { position: absolute; inset: 0; z-index: 0; } /* own stacking context: MapLibre attribution can never draw over the sheet (mobile QA) */ #map .maplibregl-canvas { outline: none; } .maplibregl-ctrl-bottom-right { bottom: 84px; } .place { position: absolute; left: 16px; top: 96px; width: 270px; padding: 12px; border-radius: 14px; z-index: 6; font-size: 12px; } .place__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .place__head b { font-size: 14px; font-weight: 500; } .place__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; } .place button, .place select { border: 1px solid var(--line); background: rgba(238, 243, 246, .06); border-radius: 8px; padding: 7px 6px; font-size: 12px; cursor: pointer; } .place select option { background: var(--navy); } .place button[aria-pressed="true"] { background: var(--steel); color: var(--navy); } .place__row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .place__row > span:first-child { width: 52px; color: var(--ink-dim); } .place__row input[type=range] { flex: 1; accent-color: var(--steel); } .place .small { font-size: 11px; margin: 6px 0 0; } /* ---------- presentation switch (top centre) ---------- */ .pres { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(12, 27, 32, .25); z-index: 3; } .pres button { appearance: none; border: 0; background: none; color: var(--ink-dim); font: 500 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; } .pres button:hover { color: var(--ink); } .pres button[aria-pressed="true"] { background: var(--paper); color: var(--navy); } .pill--tour[aria-pressed="true"] { background: var(--paper); color: var(--navy); } .ulabel.is-dim { opacity: 0; pointer-events: none; } /* ---------- tour caption card ---------- */ .tour { position: absolute; left: 24px; bottom: max(24px, env(safe-area-inset-bottom)); width: min(460px, calc(100vw - 48px)); padding: 20px 22px 16px; border-radius: 16px; background: var(--glass-strong); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(12, 27, 32, .45); z-index: 4; } .tour[hidden], .dock__group[hidden] { display: none; } .dock__time:has(+ .dock__group[hidden]) { border-right: 0; padding-right: 0; } .tour__dots { display: flex; gap: 4px; margin-bottom: 14px; } .tour__dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(238, 241, 241, .16); transition: background .4s; } .tour__dots i.done { background: rgba(112, 159, 177, .6); } .tour__dots i.cur { background: var(--steel); } .tour__k { margin: 0 0 4px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); } .tour__t { margin: 0 0 8px; font-size: 24px; font-weight: 500; letter-spacing: .01em; line-height: 1.15; } .tour__b { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-dim); } .tour__b b { color: var(--ink); font-weight: 600; } .tour.is-in .tour__k, .tour.is-in .tour__t, .tour.is-in .tour__b { animation: tourIn .7s cubic-bezier(.2, .8, .2, 1) both; } .tour.is-in .tour__t { animation-delay: .06s; } .tour.is-in .tour__b { animation-delay: .12s; } @keyframes tourIn { from { opacity: 0; transform: translateY(8px); } } .tour__cta { margin: -4px 0 14px; } .tour__ctl { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; } .tour__ctl button { border: 1px solid var(--line); background: rgba(238, 241, 241, .05); border-radius: 9px; padding: 7px 12px; font: 500 13px/1 var(--font); cursor: pointer; color: var(--ink); } .tour__ctl button:hover { background: rgba(238, 241, 241, .12); } .tour__ctl .tour__x { margin-left: auto; color: var(--ink-dim); } /* paused by grabbing the camera: Resume tour fills over the 4 s before it resumes on its own */ .tour__ctl #tourPlay.is-resume { position: relative; overflow: hidden; border-color: var(--steel); color: #fff; } .tour__ctl #tourPlay.is-resume::before { content: ''; position: absolute; inset: 0; background: rgba(112, 159, 177, .35); transform: scaleX(0); transform-origin: left; z-index: -1; } .tour__ctl #tourPlay.is-resume { isolation: isolate; } .tour__ctl #tourPlay.is-counting::before { animation: tourResume 4s linear forwards; } @keyframes tourResume { to { transform: scaleX(1); } } .tour__spd { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); } .tour__spd input { flex: 1; accent-color: var(--steel); min-width: 0; } .tour__spd output { min-width: 34px; text-align: right; font: 500 13px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; } /* tour: the controls it doesn't need fade/fold away instead of vanishing (Jamie, Nov 2: no snaps) */ body.touring .dock, body.touring .labels, body.touring .hint { opacity: 0 !important; pointer-events: none !important; } .topbar .pill { max-width: 220px; overflow: hidden; white-space: nowrap; transition: background .2s, color .2s, max-width .4s cubic-bezier(.2, .8, .2, 1), padding .4s cubic-bezier(.2, .8, .2, 1), margin .4s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, border-width .4s; } body.touring #bUnits, body.touring #bFreight, body.touring #bWalk { max-width: 0; padding-left: 0; padding-right: 0; margin-left: -8px; border-width: 0; opacity: 0; pointer-events: none; } @media (max-width: 760px) { body.touring #bUnits, body.touring #bFreight, body.touring #bWalk { flex: 0 0 0; margin-left: -6px; } } @media (max-width: 760px) { .pres { top: calc(max(12px, env(safe-area-inset-top)) + 106px); left: 12px; transform: none; } .pres button { padding: 8px 14px; font-size: 12px; } body.panel-open .pres { display: none; } .tour { left: 12px; right: 12px; width: auto; bottom: max(12px, env(safe-area-inset-bottom)); padding: 16px; } .tour__t { font-size: 20px; } } /* Clean presentation: paper all the way to the horizon (no navy page colour above the map plane) */ #map { background: #dfe8ed; } /* GPU dropped the 3D twice — tell the visitor instead of a blank page */ body.xp-gpu-lost > :not(.xp-gpu-lost-box) { visibility: hidden; } body.xp-gpu-lost { background: #eceae6; } .xp-gpu-lost-box { position: fixed; inset: 0; z-index: 99999; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 2rem; text-align: center; background: #eceae6; color: #14282f; font: 500 1.1rem Saira, sans-serif; } .xp-gpu-lost-box p { max-width: 26rem; margin: 0; } .xp-gpu-lost-box button { font: 600 1rem Saira, sans-serif; padding: .7rem 1.6rem; border: 0; border-radius: 999px; background: #14282f; color: #fff; cursor: pointer; } .xp-gpu-lost-box small { font-size: .85rem; opacity: .7; max-width: 22rem; } /* Chrome refuses WebGL for a while after a GPU crash on this site */ html.xp-gl-blocked body::after { content: '3D is switched off on this device right now. Fully close your browser, reopen it and try again.'; position: fixed; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; background: #eceae6; color: #14282f; font: 500 1.1rem Saira, sans-serif; z-index: 99999; } /* ---------- phones + the Fold: tidy top row + slim bottom bar (Jamie, Oct 28: "everything stacked on the left") ---------- row 1: brand (name only) left · Map/Clean right · modes in between when there's room (≥ 600 px, Fold unfolded) narrow phones: modes get their own evenly spread row under it */ @media (max-width: 760px) { .brand { padding: 8px 12px; } .brand__name { font-size: 12px; letter-spacing: .18em; } .brand__sub { display: none; } .pres { top: max(12px, env(safe-area-inset-top)); left: auto; right: 12px; transform: none; padding: 3px; } .pres button { padding: 8px 12px; font-size: 11px; } .topbar, body.panel-open .topbar { top: calc(max(12px, env(safe-area-inset-top)) + 46px); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 6px; } .topbar .pill { flex: 1; justify-content: center; padding: 9px 6px; font-size: 12px; gap: 6px; box-shadow: 0 6px 20px rgba(5, 28, 36, .2); } .dock { padding: 6px; gap: 4px; border-radius: 14px; } .dock__time { padding: 2px 4px 8px; gap: 8px; } .dock button { padding: 9px 10px; font-size: 12px; } .dock .now { padding: 7px 9px; } .dock__label { display: none; } .maplibregl-map .maplibregl-ctrl-bottom-right { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 100px) !important; } } @media (min-width: 600px) and (max-width: 760px) { /* room for one top row: brand · modes · Map/Clean */ .topbar, body.panel-open .topbar { top: max(12px, env(safe-area-inset-top)); left: 50%; right: auto; transform: translateX(-50%); justify-content: center; } .topbar .pill { flex: none; padding: 9px 11px; } /* bottom: views + sun on one slim row */ .dock { flex-wrap: nowrap; width: auto; max-width: calc(100vw - 24px); } .dock__time { order: 0; width: auto; flex: 1; min-width: 200px; border: 0; border-left: 1px solid var(--line); padding: 0 4px 0 10px; } .maplibregl-map .maplibregl-ctrl-bottom-right { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 58px) !important; } } /* mid-width desktops / tablets: Map | Clean under the brand so it never sits over the mode buttons */ @media (min-width: 761px) and (max-width: 1260px) { /* (Walk pill made the top bar wider: was 1180) */ .pres { top: calc(max(16px, env(safe-area-inset-top)) + 72px); left: 16px; transform: none; } } /* first-visit welcome (Jamie, Oct 28): centred card after the intro lands, then the tour */ .welcome { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 32px)); padding: 26px 26px 22px; border-radius: 18px; background: var(--glass-strong); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(12, 27, 32, .5); z-index: 6; animation: welIn .7s cubic-bezier(.2, .8, .2, 1) both; } .welcome[hidden] { display: none; } .welcome.is-out { animation: welOut .45s ease forwards; } @keyframes welIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.98); } } @keyframes welOut { to { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.98); } } .welcome__t { margin: 0 0 8px; font-size: 26px; font-weight: 300; line-height: 1.15; } .welcome__t b { font-weight: 700; letter-spacing: .02em; } .welcome__b { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--ink-dim); } .welcome__how { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .welcome__how li { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink); } .welcome__how i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--steel-soft); color: var(--steel); } .welcome__how svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .welcome__act { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .welcome__go { position: relative; overflow: hidden; } .welcome__go span { position: relative; } .welcome__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .22); animation: welBar 10s linear forwards; } @keyframes welBar { to { width: 100%; } } .welcome:hover .welcome__bar, .welcome:focus-within .welcome__bar { animation-play-state: paused; } body.welcoming .dock, body.welcoming .hint { opacity: .35; } @media (max-width: 760px) { .welcome { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 20px 18px 16px; } @keyframes welIn { from { opacity: 0; transform: translate(-50%, 18px); } } .welcome.is-out { animation: none; opacity: 0; } .welcome__t { font-size: 22px; } } /* interface tour (after the first-visit tour): a ring spotlights each control, the card explains it */ .coach { position: absolute; inset: 0; z-index: 7; pointer-events: none; } .coach[hidden] { display: none; } .coach__ring { position: absolute; border-radius: 14px; border: 2px solid var(--steel); box-shadow: 0 0 0 9999px rgba(8, 18, 22, .42), 0 0 24px rgba(112, 159, 177, .6); transition: left .5s cubic-bezier(.2, .8, .2, 1), top .5s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.2, .8, .2, 1), height .5s cubic-bezier(.2, .8, .2, 1), opacity .3s; } .coach__ring.is-none { opacity: 0; } .coach__card { position: absolute; width: min(380px, calc(100vw - 32px)); padding: 18px 20px 14px; border-radius: 16px; background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(12, 27, 32, .5); pointer-events: auto; transition: left .5s cubic-bezier(.2, .8, .2, 1), top .5s cubic-bezier(.2, .8, .2, 1); } .coach__t { margin: 0 0 6px; font-size: 20px; font-weight: 500; } .coach__b { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); } .coach__ctl { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px; align-items: center; } .coach__ctl .btn { padding: 9px 14px; } #coachSkip { background: none; border-color: transparent; color: var(--ink-dim); padding-left: 0; } .coach.is-in .tour__k, .coach.is-in .coach__t, .coach.is-in .coach__b { animation: tourIn .6s cubic-bezier(.2, .8, .2, 1) both; } .welcome__how[hidden], .coach__b[hidden] { display: none; } /* Simplified Chinese (js/i18n.js sets ): Saira for Latin/numbers, system CJK fonts for Chinese */ html:lang(zh) { --font: Saira, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif; } html:lang(zh) .xp-gpu-lost-box, html:lang(zh) .xp-gpu-lost-box button, html:lang(zh).xp-gl-blocked body::after { font-family: var(--font); } html:lang(zh).xp-gl-blocked body::after { content: '此设备当前已停用3D功能。请完全关闭浏览器，重新打开后再试。'; } /* ---------- Walk mode (js/walk.js, Nov 2026): dots on the ground, Back / Next, look around ---------- */ .walkpins { z-index: 2; } .wpin { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%; border: 2px solid #9cc0cf; background: rgba(20, 40, 47, .82); color: #eef3f6; font: 700 13px/1 var(--font); cursor: pointer; pointer-events: none; opacity: 0; transition: opacity .35s ease, background .2s; will-change: transform, opacity; box-shadow: 0 0 0 3px rgba(112, 159, 177, .28), 0 4px 14px rgba(5, 28, 36, .35); } .wpin i { position: relative; z-index: 1; font-style: normal; } .wpin::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(156, 192, 207, .75); opacity: 0; transform: scale(.6); } .wpin.is-on { opacity: 1; pointer-events: auto; } .wpin.is-on.is-occ { opacity: .45; } /* behind a building: still there, still clickable */ .wpin.is-on::before { animation: wpinPulse 2.4s ease-out infinite; } .wpin:hover, .wpin:focus-visible { background: #709fb1; color: var(--navy); } @keyframes wpinPulse { 0% { opacity: .8; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.25); } } .walk { position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 16px 12px; border-radius: 16px; background: var(--glass-strong); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(12, 27, 32, .45); z-index: 4; } .walk[hidden] { display: none; } .walk.is-in { animation: walkInC .4s cubic-bezier(.2, .8, .2, 1) both; } .walk.is-out { animation: walkOutC .3s ease forwards; pointer-events: none; } .walk__lv { margin: 0 0 10px; grid-template-columns: 1fr 1fr; } .walk__now { display: flex; align-items: baseline; gap: 10px; min-height: 22px; margin: 0 2px 10px; } .walk__n { flex: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); font-variant-numeric: tabular-nums; } .walk__name { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .walk__ctl { display: flex; align-items: center; gap: 6px; } .walk__ctl button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: rgba(238, 241, 241, .05); border-radius: 10px; padding: 9px 12px; font: 500 13px/1 var(--font); cursor: pointer; color: var(--ink); transition: background .2s, color .2s; } .walk__ctl button svg { width: 16px; height: 16px; } .walk__ctl button:hover { background: rgba(238, 241, 241, .12); } .walk__ctl .walk__go { background: var(--steel); color: var(--navy); border-color: transparent; } .walk__ctl .walk__go:hover { background: #9cc0cf; } .walk__ctl .walk__x { margin-left: auto; color: var(--ink-dim); } .walk__hint { margin: 10px 2px 0; font-size: 11.5px; color: var(--ink-dim); } body.walking .dock, body.walking .labels:not(.walkpins), body.walking .hint { opacity: 0; pointer-events: none; } body.walking .dock, body.walking .hint { transition: opacity .3s ease; } #bWalk[aria-pressed="true"] { background: var(--steel); color: var(--navy); } body.walking .maplibregl-canvas, body.walking .maplibregl-canvas-container { touch-action: none; } /* gestures are ours while walking (MapLibre handlers off) */ @media (max-width: 760px) { .walk { left: 12px; right: 12px; width: auto; transform: none; bottom: max(12px, env(safe-area-inset-bottom)); padding: 12px 12px 10px; } .walk__ctl button { padding: 10px 11px; } .walk__name { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .wpin.is-on::before { animation: none; } .walk.is-in, .walk.is-out { animation-duration: .15s; } } /* ---------- transitions pass (Nov 2026): every state change eases, nothing pops ---------- */ .panel.is-out { animation: panelOut .3s ease forwards; pointer-events: none; } @keyframes panelOut { to { opacity: 0; transform: translateX(20px); } } .pview.pv-in { animation: pvIn .32s cubic-bezier(.2, .8, .2, 1) both; } @keyframes pvIn { from { opacity: 0; transform: translateY(6px); } } .tour.is-shown { animation: walkIn .4s cubic-bezier(.2, .8, .2, 1) both; } .tour.is-out { animation: walkOut .3s ease forwards; pointer-events: none; } @keyframes walkIn { from { opacity: 0; transform: translateY(16px); } } @keyframes walkOut { to { opacity: 0; transform: translateY(12px); } } @keyframes walkInC { from { opacity: 0; transform: translate(-50%, 16px); } } @keyframes walkOutC { to { opacity: 0; transform: translate(-50%, 12px); } } .coach { transition: opacity .3s ease; } .coach.is-out { opacity: 0; pointer-events: none; } .coach.is-out * { pointer-events: none !important; } #pins { transition: opacity .4s ease; } .ulabel { transition: background .15s, opacity .35s ease; } .labels.lbl-off .ulabel { opacity: 0; pointer-events: none; } #map { transition: background-color .9s ease; } .dock, .hint { transition: opacity .35s ease; } @media (max-width: 760px) { @keyframes panelOut { to { opacity: 0; transform: translateY(40px); } } .walk.is-in { animation-name: walkIn; } .walk.is-out { animation-name: walkOut; } } @media (prefers-reduced-motion: reduce) { .panel, .panel.is-out, .pview.pv-in, .tour.is-shown, .tour.is-out, .walk.is-in, .walk.is-out, .welcome, .welcome.is-out { animation-duration: .12s !important; } .topbar .pill, .coach, #pins, .ulabel, .dock, .hint, #map { transition-duration: .12s !important; } } /* ---------- mobile QA fixes (Nov 2026) ---------- */ /* W8: Safari drew the sort