/* ═══════════════════════════════════════════════ SPLATVIEW — viewer.css Template: dark-sport (default) Barlow Condensed · Barlow · DM Mono ════════════════════════════════════════════════ */ /* ── TOKENS ─────────────────────────────────── */ :root { /* Brand — overridden per template if needed */ --accent: #e8ff47; --accent-dim: rgba(232,255,71,0.12); --accent-glow: rgba(232,255,71,0.25); --bg: #09090b; --surface: rgba(14,14,18,0.82); --surface2: rgba(22,22,28,0.90); --border: rgba(255,255,255,0.07); --border-hi: rgba(255,255,255,0.14); --text-hi: #f2f2f4; --text-mid: #9090a8; --text-lo: #484860; /* Layout */ --hdr-h: 52px; --btm-h: 116px; --panel-w: 360px; /* desktop info panel width */ --vtabs-gap: 12px; /* Fonts */ --f-display: 'Barlow Condensed', sans-serif; --f-body: 'Barlow', sans-serif; --f-mono: 'DM Mono', monospace; /* Motion */ --ease-out-expo: cubic-bezier(0.16,1,0.3,1); --ease-spring: cubic-bezier(0.34,1.56,0.64,1); } /* ═══════════════════════════════════════════════ THEME PALETTE LIBRARY ─────────────────────────────────────────────── Default theme currently active: dark-sport HOW TO USE Option A — add this to : Option B — add this to : THEME NAMES + MAIN COLOURS 1. dark-sport — Acid lime / graphite / black. Current default. 2. monaco-cream — Champagne gold / warm ivory / espresso black. 3. alpine-blue — Electric blue / ice white / deep navy. 4. rosso-corsa — Ferrari red / warm white / carbon black. 5. british-racing — Racing green / cream / dark forest. 6. graphite-lux — Silver graphite / cool white / charcoal. 7. copper-noir — Copper / amber / black-brown. 8. porto-wine — Burgundy / rose gold / midnight plum. 9. ocean-teal — Teal / aqua / dark petrol. 10. pure-minimal — White / soft grey / black. CUSTOM SHOWROOM THEME Use the commented template at the end of this section when a client wants their own exact brand colours. ════════════════════════════════════════════════ */ /* Default — Dark Sport / acid lime */ :root[data-theme="dark-sport"], body.theme-dark-sport { --accent: #e8ff47; --accent-dim: rgba(232,255,71,0.12); --accent-glow: rgba(232,255,71,0.25); --bg: #09090b; --surface: rgba(14,14,18,0.82); --surface2: rgba(22,22,28,0.90); --border: rgba(255,255,255,0.07); --border-hi: rgba(255,255,255,0.14); --text-hi: #f2f2f4; --text-mid: #9090a8; --text-lo: #484860; } /* Monaco Cream — champagne / ivory / espresso */ :root[data-theme="monaco-cream"], body.theme-monaco-cream { --accent: #d6b76a; --accent-dim: rgba(214,183,106,0.14); --accent-glow: rgba(214,183,106,0.28); --bg: #0d0b08; --surface: rgba(24,20,15,0.84); --surface2: rgba(31,26,20,0.92); --border: rgba(255,240,210,0.08); --border-hi: rgba(255,240,210,0.18); --text-hi: #fff5df; --text-mid: #b7a98f; --text-lo: #675d4c; } /* Alpine Blue — electric blue / ice white / navy */ :root[data-theme="alpine-blue"], body.theme-alpine-blue { --accent: #39a7ff; --accent-dim: rgba(57,167,255,0.14); --accent-glow: rgba(57,167,255,0.28); --bg: #06101d; --surface: rgba(8,20,34,0.84); --surface2: rgba(10,28,48,0.92); --border: rgba(190,225,255,0.08); --border-hi: rgba(190,225,255,0.18); --text-hi: #eef8ff; --text-mid: #8ba9c7; --text-lo: #46596e; } /* Rosso Corsa — Ferrari red / carbon black */ :root[data-theme="rosso-corsa"], body.theme-rosso-corsa { --accent: #ff2b2b; --accent-dim: rgba(255,43,43,0.13); --accent-glow: rgba(255,43,43,0.26); --bg: #0b0707; --surface: rgba(18,12,12,0.84); --surface2: rgba(27,16,16,0.92); --border: rgba(255,220,220,0.08); --border-hi: rgba(255,220,220,0.18); --text-hi: #fff2f2; --text-mid: #b99292; --text-lo: #634646; } /* British Racing — deep green / cream */ :root[data-theme="british-racing"], body.theme-british-racing { --accent: #c8b46a; --accent-dim: rgba(200,180,106,0.14); --accent-glow: rgba(200,180,106,0.24); --bg: #03110c; --surface: rgba(8,28,20,0.84); --surface2: rgba(10,39,28,0.92); --border: rgba(230,242,220,0.08); --border-hi: rgba(230,242,220,0.18); --text-hi: #f4f4e8; --text-mid: #9caf98; --text-lo: #4d624e; } /* Graphite Lux — silver / cool white / charcoal */ :root[data-theme="graphite-lux"], body.theme-graphite-lux { --accent: #cfd6df; --accent-dim: rgba(207,214,223,0.13); --accent-glow: rgba(207,214,223,0.20); --bg: #08090b; --surface: rgba(18,20,24,0.84); --surface2: rgba(27,30,36,0.92); --border: rgba(235,240,246,0.08); --border-hi: rgba(235,240,246,0.18); --text-hi: #f3f6f8; --text-mid: #a0a7b0; --text-lo: #555c66; } /* Copper Noir — copper / amber / black-brown */ :root[data-theme="copper-noir"], body.theme-copper-noir { --accent: #d98c4a; --accent-dim: rgba(217,140,74,0.14); --accent-glow: rgba(217,140,74,0.28); --bg: #0d0907; --surface: rgba(24,15,11,0.84); --surface2: rgba(34,20,14,0.92); --border: rgba(255,215,185,0.08); --border-hi: rgba(255,215,185,0.18); --text-hi: #fff0e2; --text-mid: #b9957b; --text-lo: #674b3a; } /* Porto Wine — burgundy / rose gold / midnight plum */ :root[data-theme="porto-wine"], body.theme-porto-wine { --accent: #d7a0a8; --accent-dim: rgba(215,160,168,0.14); --accent-glow: rgba(215,160,168,0.25); --bg: #0d0710; --surface: rgba(28,12,28,0.84); --surface2: rgba(42,17,40,0.92); --border: rgba(255,220,235,0.08); --border-hi: rgba(255,220,235,0.18); --text-hi: #fff0f6; --text-mid: #b99aaa; --text-lo: #65485a; } /* Ocean Teal — teal / aqua / petrol */ :root[data-theme="ocean-teal"], body.theme-ocean-teal { --accent: #35e0c2; --accent-dim: rgba(53,224,194,0.13); --accent-glow: rgba(53,224,194,0.26); --bg: #031011; --surface: rgba(7,29,31,0.84); --surface2: rgba(8,42,45,0.92); --border: rgba(205,255,247,0.08); --border-hi: rgba(205,255,247,0.18); --text-hi: #edfffb; --text-mid: #8bb8b1; --text-lo: #456662; } /* Pure Minimal — white / soft grey / black */ :root[data-theme="pure-minimal"], body.theme-pure-minimal { --accent: #ffffff; --accent-dim: rgba(255,255,255,0.12); --accent-glow: rgba(255,255,255,0.18); --bg: #050505; --surface: rgba(16,16,16,0.84); --surface2: rgba(24,24,24,0.92); --border: rgba(255,255,255,0.09); --border-hi: rgba(255,255,255,0.20); --text-hi: #ffffff; --text-mid: #a8a8a8; --text-lo: #5b5b5b; } /* CUSTOM SHOWROOM THEME TEMPLATE 1. Rename "custom-showroom" if needed. 2. Replace the HEX colours with the client's brand colours. 3. Activate with or . */ :root[data-theme="custom-showroom"], body.theme-custom-showroom { --accent: #e8ff47; /* Main brand / button / highlight colour */ --accent-dim: rgba(232,255,71,0.12); /* Soft panels and selected states */ --accent-glow: rgba(232,255,71,0.25); /* Subtle glow / emphasis */ --bg: #09090b; /* Page background */ --surface: rgba(14,14,18,0.82); /* Glass buttons / overlays */ --surface2: rgba(22,22,28,0.90); /* Larger panels / modals */ --border: rgba(255,255,255,0.07); /* Normal borders */ --border-hi: rgba(255,255,255,0.14); /* Hover / active borders */ --text-hi: #f2f2f4; /* Main text */ --text-mid: #9090a8; /* Secondary text */ --text-lo: #484860; /* Muted text */ } /* ── RESET ───────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); overscroll-behavior: none; } body { font-family: var(--f-body); color: var(--text-hi); -webkit-font-smoothing: antialiased; } button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; } dl, dt, dd { margin: 0; padding: 0; } /* ── LOADER ──────────────────────────────────── */ #loader { position: fixed; inset: 0; z-index: 900; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.55s var(--ease-out-expo), visibility 0.55s; } #loader.out { opacity: 0; visibility: hidden; pointer-events: none; } .ld-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } .ld-ring { width: 64px; height: 64px; color: var(--accent); animation: ldSpin 1.4s linear infinite; } .ld-ring svg { width: 100%; height: 100%; } @keyframes ldSpin { to { transform: rotate(360deg); } } .ld-label { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-lo); } /* ── APP SHELL ───────────────────────────────── */ #app { position: fixed; inset: 0; } #app.hidden { opacity: 0; pointer-events: none; } /* ── CANVAS ──────────────────────────────────── */ #c { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; /* custom one/two-finger gestures */ } /* ── HEADER ──────────────────────────────────── */ #hdr { position: absolute; top: 0; left: 0; right: 0; height: var(--hdr-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: linear-gradient(to bottom, rgba(9,9,11,0.88) 0%, transparent 100%); z-index: 50; pointer-events: none; } #hdr > * { pointer-events: auto; } .hdr-left { display: flex; align-items: center; gap: 10px; } .hdr-right { display: flex; align-items: center; gap: 14px; } .client-logo { display: block; height: var(--client-logo-h, 30px); max-width: var(--client-logo-max-w, 128px); width: auto; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.34)); } .client-logo[hidden] { display: none !important; } .hdr-badge { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); padding: 3px 9px; border-radius: 4px; white-space: nowrap; } .hdr-name { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-hi); white-space: nowrap; } .hdr-price { font-family: var(--f-display); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.06em; color: var(--text-mid); } .icon-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-mid); transition: color 0.18s, border-color 0.18s, background 0.18s; backdrop-filter: blur(8px); } .icon-btn svg { width: 15px; height: 15px; } .icon-btn:hover { color: var(--text-hi); border-color: var(--border-hi); } /* ── FPS COUNTER ──────────────────────────────── */ #fps { position: absolute; top: calc(var(--hdr-h) + 6px); right: 14px; font-family: var(--f-mono); font-size: 0.6rem; color: var(--text-lo); letter-spacing: 0.1em; pointer-events: none; z-index: 40; } #fpsVal { color: var(--accent); } /* ── VIEW TABS (Exterior / Interior) ─────────── */ #viewTabs { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--btm-h) + 14px); display: flex; gap: 6px; z-index: 50; } .vtab { padding: 7px 22px; font-family: var(--f-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); border: 1px solid var(--border); border-radius: 99px; background: var(--surface); backdrop-filter: blur(10px); transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s; } .vtab:hover { color: var(--text-hi); border-color: var(--border-hi); } .vtab.active { color: var(--bg); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); } /* ── BOTTOM PANEL ────────────────────────────── */ #btm { position: absolute; bottom: 0; left: 0; right: 0; height: var(--btm-h); display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 0 18px; background: linear-gradient(to top, rgba(9,9,11,0.92) 60%, transparent 100%); z-index: 50; } /* Specs strip */ #specsStrip { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } #specsStrip::-webkit-scrollbar { display: none; } .spec-cell { display: flex; flex-direction: column; align-items: center; padding: 0 14px; border-right: 1px solid var(--border); flex-shrink: 0; gap: 2px; } .spec-cell:first-child { padding-left: 0; } .spec-cell:last-child { border-right: none; } .spec-val { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-hi); line-height: 1; } .spec-lbl { font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-lo); } /* Controls row */ #ctrlRow { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #ctrlRow::-webkit-scrollbar { display: none; } .ctrl-pill { display: flex; align-items: center; gap: 6px; padding: 5px 13px; font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); border: 1px solid var(--border); border-radius: 99px; background: var(--surface); backdrop-filter: blur(8px); white-space: nowrap; flex-shrink: 0; transition: color 0.18s, border-color 0.18s, background 0.18s; } .ctrl-pill svg { width: 13px; height: 13px; flex-shrink: 0; } .ctrl-pill:hover { color: var(--text-hi); border-color: var(--border-hi); } .ctrl-pill.active { color: var(--accent); border-color: rgba(232,255,71,0.35); background: var(--accent-dim); } /* Hotspot toggle inherits ctrl-pill */ .hs-toggle { } /* Extra splat pills — extra pill with a dot indicator */ .extra-pill {} .extra-pill.active { color: var(--accent); border-color: rgba(232,255,71,0.35); background: var(--accent-dim); } .extra-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ── HOTSPOT DOTS ────────────────────────────── */ #hsLayer { position: absolute; inset: 0; pointer-events: none; z-index: 45; transition: opacity 0.3s; } #hsLayer.hidden-hs { opacity: 0; pointer-events: none !important; } .hs-dot { position: absolute; width: var(--hs-size, 28px); height: var(--hs-size, 28px); min-width: 10px; min-height: 10px; transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto; } .hs-dot-inner { position: absolute; inset: 32%; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: hsPulse 2.6s ease-in-out infinite; transition: transform 0.15s var(--ease-spring); } .hs-dot:hover .hs-dot-inner { transform: scale(1.35); } @keyframes hsPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 9px rgba(232,255,71,0); } } .hs-dot-ring { position: absolute; inset: 11%; border-radius: 50%; border: 1px solid rgba(232,255,71,0.3); animation: hsRing 2.6s ease-in-out infinite; } @keyframes hsRing { 0%,100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.5); opacity: 0; } } /* Hotspot label tooltip */ .hs-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg); background: var(--accent); border-radius: 4px; pointer-events: none; opacity: 0; transform: translateX(-50%) translateY(4px); transition: opacity 0.18s, transform 0.18s; } .hs-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--accent); } .hs-dot:hover .hs-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── INFO PANEL ──────────────────────────────── */ /* Desktop: slides in from right */ #infoPanel { position: fixed; top: var(--hdr-h); right: 0; bottom: var(--btm-h); width: var(--panel-w); background: var(--surface2); border-left: 1px solid var(--border); backdrop-filter: blur(24px); padding: 28px 26px 28px; z-index: 200; display: flex; flex-direction: column; gap: 14px; transform: translateX(100%); transition: transform 0.42s var(--ease-out-expo); overflow-y: auto; } #infoPanel.open { transform: translateX(0); } /* Drag handle — visible only on mobile */ .ip-drag-handle { display: none; } .ip-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-lo); transition: color 0.15s, background 0.15s; } .ip-close svg { width: 14px; height: 14px; } .ip-close:hover { color: var(--text-hi); background: rgba(255,255,255,0.06); } .ip-tag { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-top: 6px; } .ip-title { font-family: var(--f-display); font-size: 2.1rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; color: var(--text-hi); } .ip-body { font-size: 0.85rem; line-height: 1.7; color: var(--text-mid); font-weight: 300; } .ip-details { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--border); } .ip-details .ip-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); } .ip-details .ip-key { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-lo); } .ip-details .ip-val { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-hi); } /* Backdrop (mobile only) */ #ipBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); z-index: 195; opacity: 0; transition: opacity 0.3s; pointer-events: none; } #ipBackdrop.show { opacity: 1; pointer-events: auto; } /* ── PLACEHOLDER NOTICE ──────────────────────── */ .ph-notice { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px; } .ph-title { font-family: var(--f-display); font-size: 3rem; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.04); } .ph-hint { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.08); } .ph-file { font-family: var(--f-mono); font-size: 0.7rem; color: rgba(232,255,71,0.2); padding: 5px 14px; border: 1px dashed rgba(232,255,71,0.15); border-radius: 4px; margin-top: 4px; } /* ── TRANSITION FLASH ───────────────────────── */ #flash { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; z-index: 60; transition: opacity 0.22s; } #flash.on { opacity: 0.65; } /* ═══════════════════════════════════════════ MOBILE — bottom-sheet info panel ═══════════════════════════════════════════ */ /* SuperSplat-style walking surface reticle. This follows the mouse projection on the configured collision surfaces. */ #walkSurfaceReticle { position: absolute; left: 0; top: 0; width: 62px; height: 62px; transform: translate(-50%, -50%) scale(0.85); transform-origin: center center; z-index: 66; opacity: 0; pointer-events: none; transition: opacity 0.12s, transform 0.12s; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.38)); } #walkSurfaceReticle.show { opacity: 1; transform: translate(-50%, -50%) scale(var(--wr-scale, 1)); } #walkSurfaceReticle.active .wr-ring { border-color: var(--accent); box-shadow: 0 0 22px var(--accent-glow); } .wr-disc { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, rgba(232,255,71,0.18) 0%, rgba(232,255,71,0.075) 52%, rgba(232,255,71,0.02) 70%, transparent 72%); transform: scaleY(0.44); } .wr-ring { position: absolute; inset: 8px; border-radius: 50%; border: 1.5px solid rgba(232,255,71,0.54); transform: scaleY(0.44); background: rgba(232,255,71,0.04); } .wr-dot { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } @media (max-width: 768px) { :root { --btm-h: 108px; --panel-w: 100vw; } /* Info panel becomes bottom sheet */ #infoPanel { top: auto; bottom: 0; right: 0; left: 0; width: 100%; height: 72vh; border-left: none; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; padding: 14px 22px 32px; transform: translateY(100%); transition: transform 0.42s var(--ease-out-expo); overflow-y: auto; } #infoPanel.open { transform: translateY(0); } /* Drag handle */ .ip-drag-handle { display: block; width: 38px; height: 4px; border-radius: 99px; background: var(--border-hi); margin: 0 auto 16px; flex-shrink: 0; } /* Backdrop visible on mobile */ #ipBackdrop { display: block; } /* Shrink header */ .hdr-name { font-size: 1rem; } .hdr-price { font-size: 0.9rem; } .client-logo { height: var(--client-logo-h-mobile, 24px); max-width: var(--client-logo-max-w-mobile, 92px); } /* Tabs stay centered but smaller */ .vtab { padding: 6px 16px; font-size: 0.78rem; } /* Specs strip: scrolls on small screens */ .spec-cell { padding: 0 10px; } .spec-val { font-size: 0.9rem; } /* Ctrl row: touch-scroll */ #ctrlRow { padding-bottom: 2px; } /* FPS hidden on mobile */ #fps { display: none; } } /* Very small screens */ @media (max-width: 380px) { #specsStrip { gap: 0; } .spec-cell { padding: 0 8px; } } /* ── MOVEMENT MODE TABS ──────────────────────── */ #movementTabs { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--border); border-radius: 999px; background: rgba(14,14,18,0.76); backdrop-filter: blur(14px); box-shadow: 0 14px 38px rgba(0,0,0,0.28); } #movementGroup { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; } #extrasGroup { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .movement-icon-btn { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid transparent; color: var(--text-mid); background: rgba(255,255,255,0.035); transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s; } .movement-icon-btn svg { width: 22px; height: 22px; } .movement-icon-btn:hover { color: var(--text-hi); background: rgba(255,255,255,0.08); border-color: var(--border-hi); transform: translateX(-1px); } .movement-icon-btn.active { color: var(--bg); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,255,71,0.12), 0 0 22px var(--accent-glow); } .movement-icon-btn.active::after { content: ''; position: absolute; right: -11px; width: 5px; height: 18px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } #c.flying-mode { cursor: default; } #c.walking-mode { cursor: default; } #movementTabs[hidden] { display: none !important; } /* Optional center pointer. Flying now keeps the normal mouse visible. */ #pointerController { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%) scale(0.92); z-index: 65; opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; } #pointerController.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .pc-ring { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.36); background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 62%, transparent 63%); box-shadow: 0 0 18px rgba(0,0,0,0.35); } .pc-dot { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .pc-line { position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,0.42); transform: translate(-50%, -50%); } .pc-line-x { width: 32px; height: 1px; } .pc-line-y { width: 1px; height: 32px; } /* SuperSplat-style walking surface reticle. This follows the mouse projection on the configured collision surfaces. */ #walkSurfaceReticle { position: absolute; left: 0; top: 0; width: 62px; height: 62px; transform: translate(-50%, -50%) scale(0.85); transform-origin: center center; z-index: 66; opacity: 0; pointer-events: none; transition: opacity 0.12s, transform 0.12s; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.38)); } #walkSurfaceReticle.show { opacity: 1; transform: translate(-50%, -50%) scale(var(--wr-scale, 1)); } #walkSurfaceReticle.active .wr-ring { border-color: var(--accent); box-shadow: 0 0 22px var(--accent-glow); } .wr-disc { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, rgba(232,255,71,0.18) 0%, rgba(232,255,71,0.075) 52%, rgba(232,255,71,0.02) 70%, transparent 72%); transform: scaleY(0.44); } .wr-ring { position: absolute; inset: 8px; border-radius: 50%; border: 1.5px solid rgba(232,255,71,0.54); transform: scaleY(0.44); background: rgba(232,255,71,0.04); } .wr-dot { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } @media (max-width: 768px) { #movementTabs { right: 10px; transform: translateY(-50%) scale(0.92); transform-origin: right center; } .movement-icon-btn { width: 39px; height: 39px; } .movement-icon-btn svg { width: 20px; height: 20px; } } /* ── ACTION HOTSPOTS ─────────────────────────── Lime-green pulsating hotspots used for scene actions, such as changing from the closed-door splat to the open-door splat. These are separate from the regular information hotspots. */ .hs-dot-action .hs-dot-inner { background: #b7ff00; box-shadow: 0 0 0 0 rgba(183,255,0,0.48), 0 0 18px rgba(183,255,0,0.38); animation: actionHsPulse 1.55s ease-in-out infinite; } .hs-dot-action .hs-dot-ring { border-color: rgba(183,255,0,0.55); animation: actionHsRing 1.55s ease-in-out infinite; } .hs-dot-action .hs-tooltip { background: #b7ff00; color: #071000; } .hs-dot-action .hs-tooltip::after { border-top-color: #b7ff00; } @keyframes actionHsPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(183,255,0,0.48), 0 0 18px rgba(183,255,0,0.38); } 50% { transform: scale(1.38); box-shadow: 0 0 0 12px rgba(183,255,0,0), 0 0 26px rgba(183,255,0,0.55); } } @keyframes actionHsRing { 0%, 100% { transform: scale(1); opacity: 0.65; } 50% { transform: scale(1.75); opacity: 0; } } /* ── CONTACT BUTTON + FORM ───────────────────── */ .contact-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(232,255,71,0.32); background: linear-gradient(135deg, rgba(232,255,71,0.18), rgba(255,255,255,0.04)); color: var(--accent); font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; backdrop-filter: blur(12px); box-shadow: 0 0 18px rgba(232,255,71,0.10); transition: transform 0.18s, color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s; } .contact-btn:hover { transform: translateY(-1px); color: var(--bg); border-color: var(--accent); background: var(--accent); box-shadow: 0 0 26px var(--accent-glow); } .contact-btn[hidden] { display: none !important; } .contact-backdrop { position: fixed; inset: 0; z-index: 240; background: rgba(0,0,0,0.62); backdrop-filter: blur(5px); } .contact-backdrop[hidden] { display: none !important; } .contact-panel { position: fixed; top: 50%; left: 50%; z-index: 250; width: min(560px, calc(100vw - 28px)); max-height: min(86vh, 760px); overflow-y: auto; transform: translate(-50%, -50%); border: 1px solid var(--border-hi); border-radius: 26px; background: radial-gradient(circle at top left, rgba(232,255,71,0.11), transparent 34%), linear-gradient(180deg, rgba(23,23,29,0.96), rgba(10,10,13,0.96)); box-shadow: 0 28px 90px rgba(0,0,0,0.62); backdrop-filter: blur(26px); padding: 30px; } .contact-panel[hidden] { display: none !important; } .contact-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--text-mid); background: rgba(255,255,255,0.045); border: 1px solid var(--border); transition: color 0.16s, background 0.16s, border-color 0.16s; } .contact-close:hover { color: var(--text-hi); background: rgba(255,255,255,0.08); border-color: var(--border-hi); } .contact-close svg { width: 15px; height: 15px; } .contact-kicker { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .contact-title { font-family: var(--f-display); font-size: clamp(2rem, 6vw, 3.1rem); line-height: 0.95; letter-spacing: 0.02em; margin: 0 42px 10px 0; } .contact-subtitle { color: var(--text-mid); line-height: 1.55; font-size: 0.92rem; margin-bottom: 18px; } .showroom-card { display: grid; gap: 12px; padding: 15px 16px; margin: 0 0 18px; border: 1px solid rgba(232,255,71,0.18); border-radius: 18px; background: rgba(232,255,71,0.055); } .showroom-card[hidden] { display: none !important; } .showroom-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .showroom-label { font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-lo); } #showroomName { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: 0.04em; color: var(--text-hi); text-align: right; } .showroom-lines { display: grid; gap: 7px; color: var(--text-mid); font-size: 0.82rem; line-height: 1.35; } .showroom-line { display: flex; gap: 8px; align-items: baseline; } .showroom-line span:first-child { min-width: 64px; font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-lo); } .showroom-line a { color: var(--accent); text-decoration: none; } .showroom-line a:hover { text-decoration: underline; } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .contact-field { display: flex; flex-direction: column; gap: 7px; } .contact-field-wide { grid-column: 1 / -1; } .contact-field span { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-lo); } .contact-field input, .contact-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.055); color: var(--text-hi); font: inherit; font-size: 0.9rem; padding: 12px 13px; outline: none; transition: border-color 0.16s, background 0.16s, box-shadow 0.16s; } .contact-field textarea { resize: vertical; min-height: 98px; } .contact-field input:focus, .contact-field textarea:focus { border-color: rgba(232,255,71,0.45); background: rgba(255,255,255,0.075); box-shadow: 0 0 0 3px rgba(232,255,71,0.08); } .contact-privacy { grid-column: 1 / -1; color: var(--text-lo); font-size: 0.76rem; line-height: 1.45; } .contact-status { grid-column: 1 / -1; min-height: 18px; color: var(--accent); font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; } .contact-status.error { color: #ff7474; } .contact-submit { grid-column: 1 / -1; height: 46px; border-radius: 999px; background: var(--accent); color: var(--bg); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; box-shadow: 0 0 28px var(--accent-glow); transition: transform 0.16s, box-shadow 0.16s; } .contact-submit:hover { transform: translateY(-1px); box-shadow: 0 0 38px var(--accent-glow); } @media (max-width: 768px) { .contact-btn { height: 32px; padding: 0 11px; font-size: 0.56rem; } .contact-panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 86vh; transform: none; border-radius: 24px 24px 0 0; padding: 26px 20px 28px; } .contact-form { grid-template-columns: 1fr; } .showroom-card-head { align-items: flex-start; flex-direction: column; gap: 4px; } #showroomName { text-align: left; } } /* ── PREMIUM BRAND LOADING / WATERMARK ───────── */ .premium-loader { overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(232,255,71,0.13), transparent 30%), radial-gradient(circle at 18% 82%, rgba(255,255,255,0.06), transparent 28%), radial-gradient(circle at 82% 18%, rgba(232,255,71,0.055), transparent 24%), var(--bg); } /* Cinematic background from the previous reveal idea: slow rotating light, subtle technical grid, soft scanlines and a luxury vignette. */ .premium-loader::before, .premium-loader::after { content: ''; position: absolute; inset: -18%; pointer-events: none; } .premium-loader::before { background: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(900px) rotateX(58deg) translateY(16%); transform-origin: center; opacity: 0.22; animation: loaderGridGlide 7s linear infinite; mask-image: radial-gradient(circle at center, black 0%, transparent 68%); } .premium-loader::after { background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 8px), radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.72) 76%); opacity: 0.42; mix-blend-mode: screen; } .ld-bg-glow { position: absolute; inset: -24%; background: conic-gradient(from 160deg, transparent 0deg, rgba(232,255,71,0.15) 58deg, transparent 116deg, rgba(255,255,255,0.055) 185deg, transparent 260deg, rgba(232,255,71,0.08) 320deg, transparent 360deg); filter: blur(38px); opacity: 0.9; animation: brandLoaderDrift 10s linear infinite; } @keyframes brandLoaderDrift { to { transform: rotate(360deg); } } @keyframes loaderGridGlide { from { background-position: 0 0, 0 0; } to { background-position: 0 64px, 64px 0; } } .premium-ld-inner { position: relative; width: min(480px, calc(100vw - 42px)); padding: 44px 36px 38px; border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; background: linear-gradient(180deg, rgba(20,20,26,0.72), rgba(10,10,13,0.58)); backdrop-filter: blur(22px); box-shadow: 0 28px 90px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06); } .ld-logo { width: var(--loader-logo-w, 176px); height: var(--loader-logo-h, 112px); max-height: 128px; margin-bottom: 4px; /* Exact accent-colour loader logo. */ background: var(--accent); -webkit-mask-image: var(--loader-logo-url); mask-image: var(--loader-logo-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; filter: drop-shadow(0 18px 46px rgba(0,0,0,0.54)) drop-shadow(0 0 24px var(--accent-glow)); animation: loaderLogoBreathe 2.8s ease-in-out infinite; } .ld-logo::after { content: ''; position: absolute; } @keyframes loaderLogoBreathe { 0%, 100% { transform: scale(1); opacity: 0.96; } 50% { transform: scale(1.035); opacity: 1; } } .premium-ld-ring { width: 58px; height: 58px; margin-top: 4px; } .ld-quote { max-width: 380px; margin-top: 4px; font-family: var(--f-display); font-size: 1.42rem; line-height: 1.25; letter-spacing: 0.035em; color: rgba(242,242,244,0.84); text-align: center; } .premium-ld-inner::after { content: ''; position: absolute; left: 34px; right: 34px; bottom: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.42; animation: loaderLineSweep 2.2s var(--ease-out-expo) infinite; } @keyframes loaderLineSweep { 0%, 100% { transform: scaleX(0.18); opacity: 0.22; } 50% { transform: scaleX(1); opacity: 0.58; } } .brand-watermark { position: absolute; top: var(--watermark-top, auto); right: var(--watermark-right, 0px); bottom: var(--watermark-bottom, 2px); left: var(--watermark-left, auto); width: var(--watermark-w, 170px); height: var(--watermark-h, 58px); z-index: 58; pointer-events: auto; cursor: pointer; opacity: var(--watermark-opacity, 0.92); /* Exact accent-colour logo: The SVG is used as a mask, so the visible colour is always var(--accent). Change the file in JSON with branding.watermark.logo or branding.viewerLogo. */ background: var(--accent); -webkit-mask-image: var(--brand-watermark-url); mask-image: var(--brand-watermark-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; filter: drop-shadow(0 10px 26px rgba(0,0,0,0.42)); } .brand-watermark:hover, .brand-watermark:focus-visible { opacity: 1; transform: translateY(-1px); } .brand-watermark[hidden] { display: none !important; } @media (max-width: 768px) { .premium-ld-inner { padding: 30px 22px 28px; border-radius: 24px; } .ld-logo { width: var(--loader-logo-w-mobile, 132px); height: var(--loader-logo-h-mobile, 86px); } .ld-quote { font-size: 0.98rem; } .premium-ld-inner::after { content: ''; position: absolute; left: 34px; right: 34px; bottom: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.42; animation: loaderLineSweep 2.2s var(--ease-out-expo) infinite; } @keyframes loaderLineSweep { 0%, 100% { transform: scaleX(0.18); opacity: 0.22; } 50% { transform: scaleX(1); opacity: 0.58; } } .brand-watermark { top: var(--watermark-top-mobile, var(--watermark-top, auto)); right: var(--watermark-right-mobile, var(--watermark-right, 0px)); bottom: var(--watermark-bottom-mobile, var(--watermark-bottom, 2px)); left: var(--watermark-left-mobile, var(--watermark-left, auto)); width: var(--watermark-w-mobile, var(--watermark-w, 112px)); } } /* Active two-state action hotspots: slightly stronger glow when the target state is active. */ .hs-dot-action.is-action-active .hs-dot-inner { background: #e8ff47; box-shadow: 0 0 0 0 rgba(232,255,71,0.54), 0 0 24px rgba(232,255,71,0.55); } /* ── ENGAGEMENT PROMPT ───────────────────────── Timed message that appears after a configurable delay when the visitor has spent meaningful time with the vehicle. */ .engagement-backdrop { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,0.42); backdrop-filter: blur(4px); opacity: 1; } .engagement-prompt { position: fixed; right: 24px; bottom: 24px; z-index: 260; width: min(390px, calc(100vw - 32px)); padding: 24px 24px 22px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.12); background: radial-gradient(circle at 20% 0%, rgba(232,255,71,0.16), transparent 34%), linear-gradient(145deg, rgba(22,22,28,0.96), rgba(8,8,11,0.94)); box-shadow: 0 24px 70px rgba(0,0,0,0.46), 0 0 0 1px rgba(232,255,71,0.035) inset; backdrop-filter: blur(24px); color: var(--text-hi); animation: engagementIn 0.42s var(--ease-out-expo) both; } @keyframes engagementIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .engagement-close { position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--text-mid); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); } .engagement-close svg { width: 14px; height: 14px; } .engagement-close:hover { color: var(--text-hi); background: rgba(255,255,255,0.09); } .engagement-kicker { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .engagement-title { max-width: 310px; font-family: var(--f-display); font-size: 2rem; line-height: 0.98; letter-spacing: 0.02em; margin-bottom: 12px; } .engagement-body { color: var(--text-mid); font-size: 0.92rem; line-height: 1.55; margin-bottom: 18px; } .engagement-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .engagement-primary, .engagement-secondary { height: 38px; padding: 0 16px; border-radius: 999px; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; } .engagement-primary { color: var(--bg); background: var(--accent); box-shadow: 0 0 22px var(--accent-glow); } .engagement-secondary { color: var(--text-mid); border: 1px solid var(--border-hi); background: rgba(255,255,255,0.04); } .engagement-secondary:hover { color: var(--text-hi); } .engagement-backdrop[hidden], .engagement-prompt[hidden] { display: none !important; } @media (max-width: 768px) { .engagement-prompt { left: 14px; right: 14px; bottom: calc(var(--btm-h) + 14px); width: auto; padding: 22px 20px 20px; } .engagement-title { font-size: 1.65rem; } } /* ── ORIENTATION VIEW CUBE ───────────────────── SolidWorks-style quick orientation control. It stays in the top-right area and rotates with the active camera direction. */ .view-cube { position: absolute; top: calc(var(--hdr-h) + 18px); right: 18px; width: 96px; height: 96px; z-index: 72; perspective: 540px; pointer-events: auto; user-select: none; } .view-cube-body { position: absolute; inset: 20px; transform-style: preserve-3d; transition: transform 0.16s linear; } .view-cube-face { position: absolute; left: 0; top: 0; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: linear-gradient(145deg, rgba(24,24,30,0.82), rgba(10,10,13,0.72)); color: rgba(242,242,244,0.82); font-family: var(--f-mono); font-size: 0.48rem; letter-spacing: 0.09em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px rgba(0,0,0,0.28); backdrop-filter: blur(10px); cursor: pointer; backface-visibility: hidden; } .view-cube-face:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.16); } .view-cube-front { transform: rotateY(0deg) translateZ(28px); } .view-cube-back { transform: rotateY(180deg) translateZ(28px); } .view-cube-right { transform: rotateY(90deg) translateZ(28px); } .view-cube-left { transform: rotateY(-90deg) translateZ(28px); } .view-cube-top { transform: rotateX(90deg) translateZ(28px); } .view-cube-bottom { transform: rotateX(-90deg) translateZ(28px); } .view-cube::after { content: ''; position: absolute; inset: 16px; border-radius: 18px; border: 1px solid rgba(232,255,71,0.10); background: radial-gradient(circle, rgba(232,255,71,0.07), transparent 64%); filter: blur(8px); z-index: -1; pointer-events: none; } @media (max-width: 768px) { .view-cube { top: calc(var(--hdr-h) + 12px); right: 8px; width: 78px; height: 78px; transform: scale(0.86); transform-origin: top right; } } /* Orbit-only draggable view cube states */ .view-cube[hidden], .view-cube.view-cube-hidden { display: none !important; } .view-cube.is-dragging, .view-cube.is-dragging * { cursor: grabbing !important; } .view-cube { touch-action: none; } /* ═══════════════════════════════════════════════ ONBOARDING / HELP SYSTEM Non-blocking modern instructions for Orbit, Walking and Flying. ════════════════════════════════════════════════ */ .help-btn span { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 999px; border: 1px solid currentColor; font-family: var(--f-mono); font-size: 0.64rem; font-weight: 700; line-height: 1; } .onboarding-prompt, .onboarding-tour, .mode-tip { position: fixed; z-index: 230; color: var(--text-hi); border: 1px solid var(--border-hi); background: radial-gradient(circle at 18% 0%, var(--accent-dim), transparent 34%), linear-gradient(180deg, rgba(22,22,28,0.88), rgba(9,9,11,0.80)); backdrop-filter: blur(22px); box-shadow: 0 24px 80px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06); } .onboarding-prompt[hidden], .onboarding-tour[hidden], .mode-tip[hidden] { display: none !important; } .onboarding-prompt { left: 22px; bottom: calc(var(--btm-h) + 20px); width: min(360px, calc(100vw - 44px)); padding: 22px; border-radius: 24px; animation: obIn 0.48s var(--ease-out-expo) both; } .ob-kicker, .tour-kicker { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .onboarding-prompt h2, .onboarding-tour h2 { font-family: var(--f-display); font-size: 2rem; line-height: 0.98; letter-spacing: 0.03em; margin-bottom: 9px; } .onboarding-prompt p, .onboarding-tour p, .mode-tip p { color: var(--text-mid); font-size: 0.86rem; line-height: 1.55; } .ob-actions, .tour-actions { display: flex; align-items: center; gap: 9px; margin-top: 18px; } .ob-primary, .tour-primary, .ob-secondary, .tour-secondary { min-height: 36px; padding: 0 14px; border-radius: 999px; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; transition: transform 0.16s, background 0.16s, border-color 0.16s, color 0.16s; } .ob-primary, .tour-primary { background: var(--accent); color: var(--bg); border: 1px solid var(--accent); font-weight: 700; } .ob-secondary, .tour-secondary { color: var(--text-mid); border: 1px solid var(--border); background: rgba(255,255,255,0.035); } .ob-primary:hover, .tour-primary:hover, .ob-secondary:hover, .tour-secondary:hover { transform: translateY(-1px); } .onboarding-tour { right: 22px; top: calc(var(--hdr-h) + 18px); width: min(390px, calc(100vw - 44px)); padding: 24px; border-radius: 28px; animation: obIn 0.38s var(--ease-out-expo) both; } .tour-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 10px; color: var(--text-mid); border: 1px solid var(--border); background: rgba(255,255,255,0.04); font-size: 1.1rem; line-height: 1; } .tour-close:hover { color: var(--text-hi); border-color: var(--border-hi); } .tour-progress { position: absolute; top: 18px; left: 24px; font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--text-lo); } .tour-icon, .mode-tip-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(255,255,255,0.08); margin: 28px 0 14px; } .tour-icon svg, .mode-tip-icon svg { width: 32px; height: 32px; } .mode-tip { right: 84px; top: 50%; transform: translateY(-50%); width: min(330px, calc(100vw - 110px)); display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 20px; animation: tipIn 0.34s var(--ease-out-expo) both; pointer-events: none; } .mode-tip-icon { width: 52px; height: 52px; border-radius: 16px; margin: 0; } .mode-tip-icon svg { width: 28px; height: 28px; } .mode-tip strong { display: block; font-family: var(--f-display); font-size: 1.2rem; letter-spacing: 0.04em; margin-bottom: 2px; } .mode-tip p { font-size: 0.78rem; line-height: 1.35; } @keyframes obIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes tipIn { from { opacity: 0; transform: translateY(-50%) translateX(12px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } @media (max-width: 768px) { .onboarding-prompt { left: 14px; right: 14px; bottom: calc(var(--btm-h) + 14px); width: auto; padding: 18px; border-radius: 22px; } .onboarding-tour { left: 14px; right: 14px; top: calc(var(--hdr-h) + 12px); width: auto; padding: 20px; border-radius: 24px; } .mode-tip { left: 14px; right: 68px; top: auto; bottom: calc(var(--btm-h) + 14px); width: auto; transform: none; grid-template-columns: 46px 1fr; } @keyframes tipIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tour-icon { margin-top: 22px; } } /* ── PERFORMANCE SAFE OVERLAY HINTS ─────────────────────────────── These do not remove any visual feature. They tell the browser that the frequently animated UI overlays are isolated and transform-driven. */ #hsLayer, #walkSurfaceReticle, #pointerController, #viewCube { contain: layout style paint; } .hs-dot { left: 0; top: 0; will-change: transform, opacity; backface-visibility: hidden; } .view-cube-body { will-change: transform; backface-visibility: hidden; } /* ── PROGRESSIVE INITIAL IMAGE ───────────────── The poster appears instantly after the JSON is read. The 3D splat then loads behind it and the poster fades away when the default splat is ready. */ .initial-poster { position: absolute; inset: 0; z-index: 5; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 1; transform: scale(1.01); filter: saturate(1.05) contrast(1.02); transition: opacity 0.7s var(--ease-out-expo), visibility 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); pointer-events: none; } .initial-poster::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, rgba(0,0,0,0.08), rgba(0,0,0,0.44) 70%), linear-gradient(to top, rgba(9,9,11,0.88), rgba(9,9,11,0.08) 46%, rgba(9,9,11,0.55)); } .initial-poster.out { opacity: 0; visibility: hidden; transform: scale(1.035); } .extra-pill.loading { opacity: 0.65; pointer-events: none; } /* ═══════════════════════════════════════════════ LUXURY REVEAL LOADER — refined blend Keeps the animated depth from the previous version, but softens the look into a darker showroom / premium launch-film mood. ════════════════════════════════════════════════ */ .premium-loader { background: radial-gradient(circle at 50% 38%, rgba(232,255,71,0.11), transparent 26%), radial-gradient(circle at 20% 78%, rgba(255,255,255,0.07), transparent 24%), radial-gradient(circle at 78% 20%, rgba(232,255,71,0.045), transparent 26%), linear-gradient(145deg, #050507 0%, #0b0b10 42%, #050506 100%); isolation: isolate; } .premium-loader::before { background: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px), radial-gradient(ellipse at center, rgba(232,255,71,0.075), transparent 48%); background-size: 78px 78px, 78px 78px, 100% 100%; transform: perspective(1100px) rotateX(62deg) translateY(20%) scale(1.08); opacity: 0.24; mask-image: radial-gradient(ellipse at center, black 0%, transparent 66%); animation: loaderGridGlide 9s linear infinite; } .premium-loader::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent), radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,0.35) 42%, rgba(0,0,0,0.86) 86%), repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 7px); opacity: 0.64; mix-blend-mode: screen; animation: loaderLightSweep 4.8s var(--ease-out-expo) infinite; } .ld-bg-glow { background: conic-gradient(from 210deg, transparent 0deg, rgba(232,255,71,0.09) 44deg, transparent 92deg, rgba(255,255,255,0.07) 168deg, transparent 232deg, rgba(232,255,71,0.07) 310deg, transparent 360deg), radial-gradient(circle at 50% 46%, rgba(255,255,255,0.07), transparent 34%); filter: blur(44px); opacity: 0.78; animation: brandLoaderDrift 13s linear infinite; } .premium-ld-inner { width: min(540px, calc(100vw - 42px)); padding: 52px 42px 42px; border-radius: 34px; border: 1px solid rgba(255,255,255,0.105); background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.018)), linear-gradient(145deg, rgba(18,18,24,0.82), rgba(7,7,10,0.64)); box-shadow: 0 34px 110px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(232,255,71,0.08); } .premium-ld-inner::before { content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,0.13), transparent 24%, transparent 72%, rgba(232,255,71,0.10)); mask-image: linear-gradient(#000, transparent 54%); opacity: 0.58; } .ld-logo { width: var(--loader-logo-w, 220px); height: var(--loader-logo-h, 138px); max-height: 156px; margin-bottom: 10px; filter: drop-shadow(0 20px 54px rgba(0,0,0,0.68)) drop-shadow(0 0 30px rgba(232,255,71,0.18)); } .premium-ld-ring { width: 64px; height: 64px; color: rgba(232,255,71,0.92); filter: drop-shadow(0 0 16px rgba(232,255,71,0.18)); } .ld-label { color: rgba(242,242,244,0.46); } .ld-quote { max-width: 430px; margin-top: 8px; font-size: clamp(1.55rem, 4.6vw, 2.12rem); line-height: 1.05; letter-spacing: 0.045em; color: rgba(248,248,248,0.90); text-wrap: balance; text-shadow: 0 18px 48px rgba(0,0,0,0.68); } .premium-ld-inner::after { left: 46px; right: 46px; bottom: 22px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), var(--accent), rgba(255,255,255,0.28), transparent); opacity: 0.48; } @keyframes loaderLightSweep { 0%, 100% { transform: translateX(-14%) rotate(-8deg); opacity: 0.34; } 50% { transform: translateX(14%) rotate(-8deg); opacity: 0.66; } } /* ═══════════════════════════════════════════════ WOW LOADER EFFECTS — cinematic showroom intro Extra visual layers only; viewer performance remains unchanged after fade. ════════════════════════════════════════════════ */ .premium-loader { overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(232,255,71,0.13), transparent 20%), radial-gradient(circle at 18% 78%, rgba(255,255,255,0.08), transparent 23%), radial-gradient(circle at 86% 18%, rgba(232,255,71,0.065), transparent 28%), linear-gradient(145deg, #030304 0%, #0b0b10 44%, #040405 100%); } .premium-loader::before, .premium-loader::after, .ld-bg-glow, .ld-aurora, .ld-light-rays, .ld-orbit-field, .ld-noise { position: absolute; inset: 0; pointer-events: none; } .premium-loader::before { content: ''; background: linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px), radial-gradient(ellipse at center, rgba(232,255,71,0.10), transparent 48%); background-size: 72px 72px, 72px 72px, 100% 100%; transform: perspective(1200px) rotateX(64deg) translateY(22%) scale(1.16); opacity: 0.29; mask-image: radial-gradient(ellipse at center, black 0%, transparent 68%); animation: loaderGridGlide 8s linear infinite; } .premium-loader::after { content: ''; background: radial-gradient(ellipse at 50% 48%, transparent 0%, rgba(0,0,0,0.15) 36%, rgba(0,0,0,0.88) 86%), linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.055) 48%, transparent 62%); opacity: 0.78; mix-blend-mode: screen; animation: loaderLightSweep 5.8s var(--ease-out-expo) infinite; } .ld-aurora { z-index: 0; background: conic-gradient(from 120deg at 50% 45%, transparent 0deg, rgba(232,255,71,0.05) 38deg, rgba(255,255,255,0.09) 82deg, transparent 126deg, rgba(232,255,71,0.08) 208deg, transparent 286deg, rgba(255,255,255,0.055) 330deg, transparent 360deg); filter: blur(34px) saturate(1.18); opacity: 0.62; transform: scale(1.16); animation: loaderAuroraSpin 18s linear infinite; } .ld-light-rays { z-index: 0; background: linear-gradient(104deg, transparent 8%, rgba(232,255,71,0.075) 18%, transparent 31%), linear-gradient(73deg, transparent 22%, rgba(255,255,255,0.08) 35%, transparent 49%), linear-gradient(118deg, transparent 55%, rgba(232,255,71,0.055) 66%, transparent 78%); filter: blur(1px); opacity: 0.46; transform: translateX(-8%) scale(1.08); animation: loaderRaysDrift 7.5s ease-in-out infinite; } .ld-bg-glow { z-index: 0; background: radial-gradient(circle at 50% 42%, rgba(232,255,71,0.20), transparent 16%), radial-gradient(circle at 50% 42%, rgba(255,255,255,0.11), transparent 28%), radial-gradient(circle at 16% 82%, rgba(232,255,71,0.065), transparent 24%), radial-gradient(circle at 84% 16%, rgba(255,255,255,0.06), transparent 28%); filter: blur(38px); opacity: 0.88; animation: brandLoaderDrift 12s linear infinite; } .ld-orbit-field { z-index: 1; overflow: hidden; opacity: 0.74; } .ld-orbit-field span { position: absolute; width: 4px; height: 4px; border-radius: 999px; background: rgba(232,255,71,0.86); box-shadow: 0 0 18px rgba(232,255,71,0.65), 0 0 42px rgba(232,255,71,0.18); animation: loaderParticleFloat 6.8s ease-in-out infinite; } .ld-orbit-field span:nth-child(1) { left: 14%; top: 26%; animation-delay: -0.2s; animation-duration: 7.5s; } .ld-orbit-field span:nth-child(2) { left: 72%; top: 22%; animation-delay: -1.4s; animation-duration: 8.4s; opacity: 0.68; } .ld-orbit-field span:nth-child(3) { left: 84%; top: 62%; animation-delay: -2.6s; animation-duration: 6.9s; width: 3px; height: 3px; } .ld-orbit-field span:nth-child(4) { left: 24%; top: 72%; animation-delay: -3.8s; animation-duration: 9.1s; opacity: 0.62; } .ld-orbit-field span:nth-child(5) { left: 48%; top: 18%; animation-delay: -4.5s; animation-duration: 7.8s; width: 2px; height: 2px; background: rgba(255,255,255,0.86); } .ld-orbit-field span:nth-child(6) { left: 60%; top: 78%; animation-delay: -5.2s; animation-duration: 8.6s; width: 2px; height: 2px; background: rgba(255,255,255,0.78); } .ld-noise { z-index: 2; opacity: 0.08; background-image: repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,0.9) 0 1px, transparent 1px 4px); background-size: 180px 180px; mix-blend-mode: overlay; animation: loaderNoiseShift 1.8s steps(3) infinite; } .premium-ld-inner { position: relative; z-index: 4; overflow: hidden; transform: translateZ(0); animation: loaderCardBreathe 4.6s ease-in-out infinite; } .premium-ld-inner::before { background: linear-gradient(125deg, rgba(255,255,255,0.18), transparent 22%, transparent 70%, rgba(232,255,71,0.14)), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.11), transparent 36%); } .ld-logo { width: var(--loader-logo-w, 250px); height: var(--loader-logo-h, 156px); filter: drop-shadow(0 24px 64px rgba(0,0,0,0.74)) drop-shadow(0 0 38px rgba(232,255,71,0.26)); animation: loaderLogoPulse 3.2s ease-in-out infinite; } .premium-ld-ring { width: 70px; height: 70px; color: rgba(232,255,71,0.95); filter: drop-shadow(0 0 20px rgba(232,255,71,0.26)); } .ld-quote { font-weight: 300; letter-spacing: 0.06em; } @keyframes loaderAuroraSpin { to { transform: scale(1.16) rotate(360deg); } } @keyframes loaderRaysDrift { 0%, 100% { transform: translateX(-10%) scale(1.08); opacity: 0.34; } 50% { transform: translateX(9%) scale(1.12); opacity: 0.62; } } @keyframes loaderParticleFloat { 0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: 0.42; } 30% { transform: translate3d(22px,-18px,0) scale(1.45); opacity: 0.95; } 65% { transform: translate3d(-16px,24px,0) scale(0.78); opacity: 0.58; } } @keyframes loaderNoiseShift { 0% { transform: translate3d(0,0,0); } 33% { transform: translate3d(-2%,1%,0); } 66% { transform: translate3d(1%,-2%,0); } 100% { transform: translate3d(0,0,0); } } @keyframes loaderCardBreathe { 0%, 100% { box-shadow: 0 34px 110px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(232,255,71,0.08); } 50% { box-shadow: 0 40px 140px rgba(0,0,0,0.68), 0 0 70px rgba(232,255,71,0.075), inset 0 1px 0 rgba(255,255,255,0.11), inset 0 -1px 0 rgba(232,255,71,0.12); } } @keyframes loaderLogoPulse { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.94; } 50% { transform: translateY(-2px) scale(1.025); opacity: 1; } } @media (max-width: 768px) { .ld-logo { width: var(--loader-logo-w-mobile, 156px); height: var(--loader-logo-h-mobile, 98px); } .premium-ld-ring { width: 58px; height: 58px; } .premium-loader::before { background-size: 52px 52px, 52px 52px, 100% 100%; } .ld-light-rays { opacity: 0.34; } } /* ═══════════════════════════════════════════════ STUDIO REVEAL LOADER — vivid luxury edition Controlled camera flashes + brighter showroom beams. This is intentionally CSS-only so it does not slow the 3D viewer after fade. ════════════════════════════════════════════════ */ .premium-loader { background: radial-gradient(circle at 50% 38%, rgba(232,255,71,0.22), transparent 17%), radial-gradient(circle at 18% 72%, rgba(255,255,255,0.13), transparent 24%), radial-gradient(circle at 86% 20%, rgba(232,255,71,0.13), transparent 30%), radial-gradient(circle at 50% 100%, rgba(232,255,71,0.08), transparent 42%), linear-gradient(145deg, #020203 0%, #0c0d12 42%, #030304 100%); } .ld-studio-beams, .ld-camera-flashes, .ld-car-ghost, .ld-scanline { position: absolute; inset: 0; pointer-events: none; } /* Large controlled studio-light beams, not nightclub strobes. */ .ld-studio-beams { z-index: 1; opacity: 0.92; background: linear-gradient(104deg, transparent 0%, transparent 18%, rgba(232,255,71,0.20) 25%, rgba(255,255,255,0.11) 31%, transparent 42%), linear-gradient(73deg, transparent 0%, transparent 44%, rgba(255,255,255,0.15) 52%, rgba(232,255,71,0.08) 59%, transparent 72%), radial-gradient(ellipse at 50% 46%, rgba(255,255,255,0.13), transparent 30%); filter: blur(12px) saturate(1.28); mix-blend-mode: screen; animation: loaderStudioBeams 5.8s ease-in-out infinite; } /* A restrained photographic flash: quick, soft, and infrequent. */ .ld-camera-flashes { z-index: 3; opacity: 0; background: radial-gradient(circle at 20% 28%, rgba(255,255,255,0.55), transparent 18%), radial-gradient(circle at 76% 34%, rgba(232,255,71,0.36), transparent 22%), linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.20) 50%, transparent 100%); mix-blend-mode: screen; animation: loaderCameraFlash 7.2s infinite; } /* Ghosted vehicle-reveal silhouette: a subtle showroom tease behind the logo. */ .ld-car-ghost { z-index: 2; left: 50%; top: 56%; width: min(78vw, 760px); height: min(24vw, 215px); right: auto; bottom: auto; transform: translate(-50%, -50%); opacity: 0.58; filter: blur(0.4px) drop-shadow(0 0 46px rgba(232,255,71,0.14)); background: radial-gradient(ellipse at 20% 76%, rgba(232,255,71,0.20) 0 10%, transparent 11%), radial-gradient(ellipse at 78% 76%, rgba(232,255,71,0.20) 0 10%, transparent 11%), linear-gradient(transparent 52%, rgba(232,255,71,0.18) 54%, transparent 59%), radial-gradient(ellipse at 50% 62%, rgba(255,255,255,0.11) 0 8%, transparent 9%), linear-gradient(7deg, transparent 23%, rgba(232,255,71,0.17) 31%, rgba(255,255,255,0.13) 43%, rgba(232,255,71,0.13) 57%, transparent 72%); clip-path: polygon(2% 70%, 12% 58%, 25% 52%, 35% 34%, 54% 26%, 69% 38%, 84% 45%, 96% 62%, 98% 72%, 84% 76%, 76% 66%, 69% 63%, 58% 72%, 34% 72%, 27% 63%, 18% 63%, 11% 73%); animation: loaderGhostCar 4.8s ease-in-out infinite; } /* A clean reveal sweep over the ghost silhouette. */ .ld-scanline { z-index: 3; opacity: 0.8; background: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(232,255,71,0.32) 48%, rgba(255,255,255,0.24) 51%, transparent 64%, transparent 100%); filter: blur(8px); mix-blend-mode: screen; transform: translateX(-70%); animation: loaderScanline 3.2s cubic-bezier(0.16,1,0.3,1) infinite; } /* Make the dust field richer and more vivid. */ .ld-orbit-field span:nth-child(7) { left: 8%; top: 48%; animation-delay: -1.1s; animation-duration: 8.8s; width: 2px; height: 2px; background: rgba(255,255,255,0.92); } .ld-orbit-field span:nth-child(8) { left: 36%; top: 84%; animation-delay: -2.1s; animation-duration: 7.2s; width: 3px; height: 3px; } .ld-orbit-field span:nth-child(9) { left: 91%; top: 43%; animation-delay: -3.1s; animation-duration: 9.6s; width: 2px; height: 2px; opacity: .72; } .ld-orbit-field span:nth-child(10) { left: 42%; top: 32%; animation-delay: -4.1s; animation-duration: 6.5s; width: 3px; height: 3px; background: rgba(255,255,255,0.86); } .ld-orbit-field span:nth-child(11) { left: 68%; top: 56%; animation-delay: -5.1s; animation-duration: 8.1s; width: 4px; height: 4px; } .ld-orbit-field span:nth-child(12) { left: 28%; top: 16%; animation-delay: -6.1s; animation-duration: 9.3s; width: 2px; height: 2px; opacity: .66; } /* More present, premium symbol. */ .ld-logo { filter: drop-shadow(0 28px 76px rgba(0,0,0,0.78)) drop-shadow(0 0 52px rgba(232,255,71,0.36)) drop-shadow(0 0 18px rgba(255,255,255,0.18)); } .premium-ld-ring { filter: drop-shadow(0 0 28px rgba(232,255,71,0.42)) drop-shadow(0 0 8px rgba(255,255,255,0.18)); } @keyframes loaderStudioBeams { 0%, 100% { transform: translate3d(-7%, -1%, 0) scale(1.08) rotate(-1deg); opacity: 0.62; } 34% { transform: translate3d(5%, 1%, 0) scale(1.14) rotate(1deg); opacity: 1; } 70% { transform: translate3d(10%, -2%, 0) scale(1.10) rotate(0deg); opacity: 0.74; } } @keyframes loaderCameraFlash { 0%, 62%, 100% { opacity: 0; } 64% { opacity: 0.62; } 65.2% { opacity: 0.08; } 67% { opacity: 0.26; } 69% { opacity: 0; } } @keyframes loaderGhostCar { 0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.985); } 45% { opacity: 0.72; transform: translate(-50%, -50%) scale(1.015); } 62% { opacity: 0.52; } } @keyframes loaderScanline { 0% { transform: translateX(-78%); opacity: 0; } 16% { opacity: 0.88; } 54% { opacity: 0.42; } 100% { transform: translateX(78%); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ld-studio-beams, .ld-camera-flashes, .ld-car-ghost, .ld-scanline, .ld-aurora, .ld-light-rays, .ld-bg-glow, .ld-orbit-field span, .ld-logo, .premium-ld-inner { animation: none !important; } .ld-camera-flashes { display: 5; } } @media (max-width: 768px) { .ld-car-ghost { width: 88vw; height: 30vw; top: 57%; opacity: 0.44; } .ld-studio-beams { opacity: 0.68; filter: blur(16px); } .ld-camera-flashes { animation-duration: 8.8s; } } /* ═══════════════════════════════════════════════ LOADER SWIRL TEXTURE FIX Keeps the same cinematic loader, but makes the swirl layer reliable in Safari/Chrome by avoiding fragile blend-only visibility and adding the -webkit mask used by Safari. ════════════════════════════════════════════════ */ .ld-aurora { z-index: 0; opacity: 0.86; background: radial-gradient(circle at 50% 42%, rgba(232,255,71,0.20), transparent 16%), conic-gradient(from 218deg at 50% 45%, transparent 0deg, rgba(232,255,71,0.00) 18deg, rgba(232,255,71,0.20) 48deg, rgba(255,255,255,0.12) 74deg, rgba(232,255,71,0.06) 104deg, transparent 134deg, rgba(255,255,255,0.08) 178deg, rgba(232,255,71,0.18) 214deg, transparent 254deg, rgba(255,255,255,0.10) 306deg, transparent 360deg), repeating-conic-gradient(from 18deg at 50% 45%, rgba(232,255,71,0.045) 0deg 7deg, transparent 7deg 18deg); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 38%, rgba(0,0,0,0.26) 66%, transparent 82%); mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 38%, rgba(0,0,0,0.26) 66%, transparent 82%); filter: blur(18px) saturate(1.35) contrast(1.08); mix-blend-mode: screen; transform: translateZ(0) scale(1.22); will-change: transform, opacity; animation: loaderAuroraSpinFixed 16s linear infinite; } .ld-aurora::before, .ld-aurora::after { content: ''; position: absolute; inset: -18%; pointer-events: none; border-radius: 50%; } .ld-aurora::before { background: repeating-radial-gradient(ellipse at 50% 46%, transparent 0 18px, rgba(232,255,71,0.035) 19px 22px, transparent 23px 42px), conic-gradient(from 0deg at 50% 50%, transparent, rgba(255,255,255,0.10), rgba(232,255,71,0.16), transparent, rgba(232,255,71,0.10), transparent); opacity: 0.74; filter: blur(10px); animation: loaderAuroraCounterSpin 24s linear infinite; } .ld-aurora::after { background: radial-gradient(ellipse at 50% 50%, transparent 0 24%, rgba(232,255,71,0.08) 34%, transparent 52%), conic-gradient(from 90deg at 50% 50%, transparent 0 22%, rgba(255,255,255,0.12) 31%, transparent 40%, rgba(232,255,71,0.12) 62%, transparent 72%); opacity: 0.55; filter: blur(16px); animation: loaderAuroraSpinFixed 28s linear reverse infinite; } .premium-loader::before { -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 68%); mask-image: radial-gradient(ellipse at center, black 0%, transparent 68%); } @keyframes loaderAuroraSpinFixed { to { transform: translateZ(0) scale(1.22) rotate(360deg); } } @keyframes loaderAuroraCounterSpin { to { transform: rotate(-360deg) scale(1.08); } } @media (max-width: 768px) { .ld-aurora { opacity: 0.72; filter: blur(20px) saturate(1.25); } } /* ═══════════════════════════════════════════════ LOADER ADJUSTMENT — remove ghost car + scan-light Keeps the premium flashing/studio lights, but removes the vehicle silhouette and scanline sweep from the loader. ════════════════════════════════════════════════ */ .ld-car-ghost, .ld-scanline { display: none !important; opacity: 0 !important; animation: none !important; } /* Also remove the fine horizontal scanline texture from the loader overlay. */ .premium-loader::after { background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.72) 76%) !important; } /* ═══════════════════════════════════════════════ LOADER ADJUSTMENT — remove spinning square + stronger flashes Removes the rotating perspective grid/square while keeping the soft cinematic background and increasing the camera-light flash rhythm. ════════════════════════════════════════════════ */ .premium-loader::before { content: none !important; display: none !important; opacity: 0 !important; animation: none !important; } .ld-camera-flashes { opacity: 0; background: radial-gradient(circle at 18% 26%, rgba(255,255,255,0.78), transparent 16%), radial-gradient(circle at 74% 32%, rgba(232,255,71,0.52), transparent 21%), radial-gradient(circle at 52% 58%, rgba(255,255,255,0.30), transparent 28%), linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 46%, rgba(232,255,71,0.18) 54%, transparent 100%); filter: blur(1px) saturate(1.18); mix-blend-mode: screen; animation: loaderCameraFlash 3.9s infinite !important; } .ld-studio-beams { opacity: 1; filter: blur(11px) saturate(1.36); animation-duration: 4.8s !important; } .ld-light-rays { opacity: 0.58; animation-duration: 5.2s !important; } @keyframes loaderCameraFlash { 0%, 18%, 42%, 68%, 100% { opacity: 0; } 20% { opacity: 0.74; } 21.4% { opacity: 0.12; } 24% { opacity: 0.46; } 26% { opacity: 0; } 48% { opacity: 0.56; } 49.2% { opacity: 0.10; } 52% { opacity: 0.32; } 54% { opacity: 0; } 72% { opacity: 0.82; } 73.1% { opacity: 0.08; } 75% { opacity: 0.38; } 77% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .premium-loader::before { content: none !important; display: none !important; } .ld-camera-flashes { display: none !important; } } /* ═══════════════════════════════════════════════ LOADER ADJUSTMENT — distant storm, no spinning square Removes the remaining square/grid/sweep sources and replaces the hard flashes with softer cloud lightning in varied screen areas. ════════════════════════════════════════════════ */ .premium-loader::before { content: none !important; display: none !important; opacity: 0 !important; visibility: hidden !important; animation: none !important; transform: none !important; background: none !important; } /* Remove the scan/sweep layer that could still read as a rotating square. */ .premium-loader::after { content: '' !important; display: block !important; opacity: 0.58 !important; animation: none !important; transform: none !important; background: radial-gradient(ellipse at 50% 46%, transparent 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0.88) 88%) !important; mix-blend-mode: normal !important; } /* Stop remaining rotating loader glow from creating a visible square shape. */ .ld-bg-glow { animation: loaderCloudGlow 10s ease-in-out infinite !important; transform: none !important; background: radial-gradient(ellipse at 28% 34%, rgba(232,255,71,0.10), transparent 30%), radial-gradient(ellipse at 74% 28%, rgba(255,255,255,0.075), transparent 34%), radial-gradient(ellipse at 50% 76%, rgba(232,255,71,0.07), transparent 36%) !important; filter: blur(54px) saturate(1.08) !important; opacity: 0.76 !important; } @keyframes loaderCloudGlow { 0%, 100% { opacity: 0.60; filter: blur(58px) saturate(1.02); } 45% { opacity: 0.82; filter: blur(50px) saturate(1.12); } 72% { opacity: 0.68; filter: blur(62px) saturate(1.04); } } /* Softer, less frequent lightning. The background-position changes create the feeling of random distant flashes between cloud layers. */ .ld-camera-flashes { z-index: 1 !important; inset: -12% !important; opacity: 0; background: radial-gradient(ellipse at 16% 28%, rgba(255,255,255,0.42), transparent 26%), radial-gradient(ellipse at 78% 22%, rgba(232,255,71,0.28), transparent 32%), radial-gradient(ellipse at 58% 68%, rgba(255,255,255,0.24), transparent 34%), radial-gradient(ellipse at 34% 82%, rgba(232,255,71,0.18), transparent 30%) !important; background-size: 120% 120%, 135% 135%, 130% 130%, 125% 125% !important; background-position: 0% 0%, 100% 12%, 48% 100%, 20% 84% !important; filter: blur(26px) saturate(1.08) !important; mix-blend-mode: screen !important; animation: loaderStormCloudFlash 7.6s infinite !important; } .ld-camera-flashes::before, .ld-camera-flashes::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 68% 38%, rgba(255,255,255,0.22), transparent 28%), radial-gradient(ellipse at 22% 62%, rgba(232,255,71,0.16), transparent 34%); filter: blur(34px); opacity: 0; mix-blend-mode: screen; } .ld-camera-flashes::before { animation: loaderStormCloudFlashB 9.4s infinite; } .ld-camera-flashes::after { animation: loaderStormCloudFlashC 11.2s infinite; } @keyframes loaderStormCloudFlash { 0%, 13%, 100% { opacity: 0; background-position: 0% 0%, 100% 12%, 48% 100%, 20% 84%; } 15% { opacity: 0.34; background-position: 8% 12%, 86% 22%, 58% 86%, 30% 72%; } 16.4% { opacity: 0.08; } 18.2% { opacity: 0.22; } 21%, 47% { opacity: 0; } 50% { opacity: 0.26; background-position: 74% 18%, 18% 28%, 62% 72%, 82% 58%; } 51.6% { opacity: 0.07; } 54%, 78% { opacity: 0; } 81% { opacity: 0.30; background-position: 34% 4%, 72% 18%, 18% 74%, 58% 92%; } 83.2% { opacity: 0; } } @keyframes loaderStormCloudFlashB { 0%, 28%, 100% { opacity: 0; transform: translate3d(0,0,0) scale(1); } 31% { opacity: 0.22; transform: translate3d(-6%, 3%, 0) scale(1.08); } 32.2% { opacity: 0.05; } 34% { opacity: 0.16; } 36% { opacity: 0; } } @keyframes loaderStormCloudFlashC { 0%, 61%, 100% { opacity: 0; transform: translate3d(0,0,0) scale(1); } 64% { opacity: 0.18; transform: translate3d(5%, -4%, 0) scale(1.1); } 66% { opacity: 0; } } /* Calm the supporting beams so the lightning reads as cloudy and distant. */ .ld-studio-beams { opacity: 0.58 !important; filter: blur(26px) saturate(1.02) !important; animation-duration: 9s !important; } .ld-light-rays { opacity: 0.26 !important; filter: blur(10px) !important; animation-duration: 10s !important; } @media (prefers-reduced-motion: reduce) { .premium-loader::before, .ld-bg-glow, .ld-camera-flashes, .ld-camera-flashes::before, .ld-camera-flashes::after, .ld-studio-beams, .ld-light-rays { animation: none !important; } } /* ═══════════════════════════════════════════════ FINAL LOADER FIX — remove spinning square/grid Keeps the atmospheric glow and replaces sharp flashes with softer, cloud-like distant lightning. No viewer logic changed. ════════════════════════════════════════════════ */ /* This pseudo-element was the moving/perspective grid that looked like a spinning square. It is force-disabled here, even if earlier loader rules define it multiple times. */ .premium-loader::before { content: none !important; display: none !important; background: none !important; animation: none !important; transform: none !important; opacity: 0 !important; } /* Keep the main glow, but make it feel like slow cloud movement instead of a rotating geometric object. */ .ld-bg-glow { background: radial-gradient(circle at 24% 28%, rgba(232,255,71,0.13), transparent 30%), radial-gradient(circle at 76% 22%, rgba(255,255,255,0.07), transparent 28%), radial-gradient(circle at 52% 70%, rgba(232,255,71,0.08), transparent 36%), radial-gradient(circle at 15% 84%, rgba(255,255,255,0.045), transparent 30%) !important; filter: blur(46px) !important; opacity: 0.88 !important; animation: loaderCloudGlow 12s ease-in-out infinite !important; } @keyframes loaderCloudGlow { 0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: 0.78; } 33% { transform: translate3d(-2.5%,1.5%,0) scale(1.06); opacity: 0.9; } 66% { transform: translate3d(2%,-1%,0) scale(1.03); opacity: 0.84; } } /* Remove any scan/HUD-like line if it exists in the HTML. */ .ld-scanline { display: none !important; animation: none !important; opacity: 0 !important; } /* Softer, diffuse lightning flashes in different areas, like a storm behind clouds. These are intentionally blurred and low-opacity. */ .ld-camera-flashes { position: absolute; inset: -20%; display: block !important; pointer-events: none; opacity: 0; background: radial-gradient(circle at 18% 34%, rgba(255,255,255,0.22), transparent 18%), radial-gradient(circle at 74% 24%, rgba(232,255,71,0.16), transparent 22%), radial-gradient(circle at 52% 78%, rgba(255,255,255,0.12), transparent 24%); filter: blur(34px); mix-blend-mode: screen; animation: loaderCloudFlashA 8.6s infinite !important; } .ld-camera-flashes::before, .ld-camera-flashes::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; filter: blur(42px); mix-blend-mode: screen; } .ld-camera-flashes::before { background: radial-gradient(circle at 82% 44%, rgba(255,255,255,0.20), transparent 20%), radial-gradient(circle at 36% 18%, rgba(232,255,71,0.12), transparent 26%); animation: loaderCloudFlashB 10.4s infinite !important; } .ld-camera-flashes::after { background: radial-gradient(circle at 28% 68%, rgba(255,255,255,0.16), transparent 22%), radial-gradient(circle at 67% 76%, rgba(232,255,71,0.11), transparent 28%); animation: loaderCloudFlashC 12.2s infinite !important; } @keyframes loaderCloudFlashA { 0%, 9%, 13%, 28%, 100% { opacity: 0; transform: translate3d(0,0,0) scale(1); } 10% { opacity: 0.18; transform: translate3d(-1%,0,0) scale(1.02); } 11% { opacity: 0.06; } 12% { opacity: 0.14; } 29% { opacity: 0.10; transform: translate3d(1%,-1%,0) scale(1.04); } 30% { opacity: 0; } } @keyframes loaderCloudFlashB { 0%, 41%, 45%, 71%, 100% { opacity: 0; transform: scale(1); } 42% { opacity: 0.15; transform: translate3d(1.5%,-1%,0) scale(1.05); } 43% { opacity: 0.05; } 44% { opacity: 0.11; } 72% { opacity: 0.08; transform: translate3d(-1%,1%,0) scale(1.03); } 73% { opacity: 0; } } @keyframes loaderCloudFlashC { 0%, 22%, 25%, 58%, 61%, 100% { opacity: 0; transform: scale(1); } 23% { opacity: 0.12; transform: translate3d(-1%,1%,0) scale(1.04); } 24% { opacity: 0.04; } 59% { opacity: 0.10; transform: translate3d(1%,0,0) scale(1.05); } 60% { opacity: 0.03; } } /* Reduced motion: keep only a calm static glow. */ @media (prefers-reduced-motion: reduce) { .premium-loader::before, .ld-camera-flashes, .ld-camera-flashes::before, .ld-camera-flashes::after, .ld-scanline { display: none !important; animation: none !important; } .ld-bg-glow { animation: none !important; } } /* ═══════════════════════════════════════════════ BALANCED STATIC LOADER GLOW — no oversize, no borders The glow now fills the viewport normally, stays static, and only breathes through opacity/blur. No rotation/translation/scale is applied, so there is no moving edge or oversized layer to reveal on different screens. ════════════════════════════════════════════════ */ .premium-loader { overflow: hidden !important; background: radial-gradient(ellipse at 50% 42%, rgba(232,255,71,0.09), transparent 38%), radial-gradient(ellipse at 18% 84%, rgba(255,255,255,0.045), transparent 34%), radial-gradient(ellipse at 84% 16%, rgba(232,255,71,0.045), transparent 32%), var(--bg) !important; } .ld-bg-glow { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; transform-origin: center center !important; background: radial-gradient(ellipse at 50% 43%, rgba(232,255,71,0.16), transparent 34%), radial-gradient(ellipse at 52% 54%, rgba(255,255,255,0.07), transparent 48%), radial-gradient(ellipse at 24% 72%, rgba(232,255,71,0.055), transparent 36%), radial-gradient(ellipse at 78% 26%, rgba(255,255,255,0.045), transparent 34%) !important; filter: blur(44px) saturate(1.05) !important; opacity: 0.82 !important; animation: loaderStaticGlowBreath 9s ease-in-out infinite !important; will-change: opacity, filter; } .ld-aurora { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; background: radial-gradient(ellipse at 34% 38%, rgba(232,255,71,0.055), transparent 42%), radial-gradient(ellipse at 66% 58%, rgba(255,255,255,0.045), transparent 44%) !important; filter: blur(36px) saturate(1.08) !important; opacity: 0.42 !important; animation: loaderStaticAuroraBreath 11s ease-in-out infinite !important; will-change: opacity, filter; } @keyframes loaderStaticGlowBreath { 0%, 100% { opacity: 0.74; filter: blur(44px) saturate(1.02); } 50% { opacity: 0.92; filter: blur(52px) saturate(1.10); } } @keyframes loaderStaticAuroraBreath { 0%, 100% { opacity: 0.34; filter: blur(36px) saturate(1.04); } 50% { opacity: 0.52; filter: blur(44px) saturate(1.12); } } @media (prefers-reduced-motion: reduce) { .ld-bg-glow, .ld-aurora { animation: none !important; transform: none !important; } } /* ═══════════════════════════════════════════════ MOBILE VIEWPORT PRIORITY PATCH ------------------------------------------------------------------ Desktop styles above are intentionally left untouched. These rules only activate on phone-sized screens and reserve more visual space for the car by making the interface smaller, lighter and less tall. ════════════════════════════════════════════════ */ @media (max-width: 768px) { :root { --hdr-h: 42px; --btm-h: 78px; --mobile-edge: max(10px, env(safe-area-inset-left)); } /* Keep the 3D scene visually dominant. */ #hdr { height: var(--hdr-h); padding: 0 var(--mobile-edge); background: linear-gradient(to bottom, rgba(9,9,11,0.64), rgba(9,9,11,0.22) 62%, transparent 100%); } .hdr-left { gap: 7px; min-width: 0; } .hdr-right { gap: 7px; flex-shrink: 0; } .hdr-badge { font-size: 0.48rem; letter-spacing: 0.14em; padding: 2px 6px; } .hdr-name { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; font-size: 0.86rem; letter-spacing: 0.025em; } .hdr-price { display: none; } .client-logo { height: var(--client-logo-h-mobile, 20px); max-width: var(--client-logo-max-w-mobile, 76px); } .icon-btn { width: 30px; height: 30px; border-radius: 9px; } .contact-btn { height: 30px; padding: 0 10px; font-size: 0.52rem; letter-spacing: 0.09em; } /* Bottom UI becomes a compact control shelf instead of a large ribbon. */ #btm { height: var(--btm-h); padding: 8px var(--mobile-edge) calc(8px + env(safe-area-inset-bottom)); gap: 6px; justify-content: flex-end; background: linear-gradient(to top, rgba(9,9,11,0.70) 0%, rgba(9,9,11,0.36) 64%, transparent 100%); } #specsStrip { min-height: 23px; mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); } .spec-cell { padding: 0 8px; gap: 0; } .spec-val { font-size: 0.76rem; line-height: 0.98; } .spec-lbl { font-size: 0.44rem; letter-spacing: 0.07em; } #ctrlRow { gap: 6px; padding-bottom: 0; } .ctrl-pill { min-height: 28px; padding: 4px 10px; font-size: 0.52rem; letter-spacing: 0.075em; } .ctrl-pill svg { width: 11px; height: 11px; } #viewTabs { bottom: calc(var(--btm-h) + 8px); gap: 5px; } .vtab { padding: 5px 13px; font-size: 0.62rem; letter-spacing: 0.075em; } /* Hotspots and action bubbles: visually smaller, still easy to tap. */ .hs-dot { width: clamp(18px, calc(var(--hs-size, 28px) * 0.62), 36px); height: clamp(18px, calc(var(--hs-size, 28px) * 0.62), 36px); min-width: 18px; min-height: 18px; } .hs-dot-inner { inset: 38%; } .hs-dot-ring { inset: 22%; } @keyframes hsPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 5px rgba(232,255,71,0); } } @keyframes hsRing { 0%,100% { transform: scale(1); opacity: 0.28; } 50% { transform: scale(1.32); opacity: 0; } } .hs-tooltip { max-width: 120px; overflow: hidden; text-overflow: ellipsis; padding: 3px 7px; font-size: 0.48rem; letter-spacing: 0.07em; bottom: calc(100% + 5px); } /* Movement tools become smaller and less intrusive. */ #movementTabs { right: max(6px, env(safe-area-inset-right)); top: 52%; gap: 5px; padding: 5px; transform: translateY(-50%) scale(0.82); background: rgba(14,14,18,0.54); } #movementGroup { gap: 5px; } .movement-icon-btn { width: 34px; height: 34px; } .movement-icon-btn svg { width: 17px; height: 17px; } .movement-icon-btn.active::after { right: -8px; height: 13px; width: 4px; } .view-cube { display: none; } #pointerController { transform: translate(-50%, -50%) scale(0.72); } #walkSurfaceReticle { width: 44px; height: 44px; } /* Information appears as a compact sheet and does not cover the whole car. */ #infoPanel { height: min(56vh, 390px); border-radius: 18px 18px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); gap: 9px; background: rgba(18,18,23,0.91); } .ip-drag-handle { width: 34px; height: 3px; margin-bottom: 10px; } .ip-close { top: 10px; right: 12px; width: 26px; height: 26px; } .ip-tag { font-size: 0.48rem; letter-spacing: 0.14em; margin-top: 0; } .ip-title { font-size: 1.42rem; line-height: 0.96; } .ip-body { font-size: 0.76rem; line-height: 1.42; } .ip-details .ip-row { padding: 6px 0; } .ip-details .ip-key { font-size: 0.50rem; letter-spacing: 0.07em; } .ip-details .ip-val { font-size: 0.86rem; } #ipBackdrop.show { opacity: 0.38; } /* Contact / engagement modals become lighter on phone. */ .contact-panel { max-height: 78vh; padding: 20px 16px calc(22px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; } .contact-title { font-size: 1.65rem; } .contact-subtitle { font-size: 0.78rem; line-height: 1.45; } .contact-field span { font-size: 0.54rem; } .contact-field input, .contact-field textarea { min-height: 38px; font-size: 0.82rem; } .contact-submit { height: 40px; font-size: 0.62rem; } .engagement-prompt { bottom: calc(var(--btm-h) + 10px); left: 10px; right: 10px; padding: 17px 16px 16px; border-radius: 18px; } .engagement-title { font-size: 1.28rem; } .engagement-body { font-size: 0.76rem; line-height: 1.42; } .brand-watermark { right: max(10px, env(safe-area-inset-right)); bottom: calc(var(--btm-h) + 8px); width: var(--brand-watermark-w-mobile, 78px); height: var(--brand-watermark-h-mobile, 34px); opacity: 0.62; } } /* Extra protection for phones held horizontally: reduce chrome aggressively. */ @media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) { :root { --hdr-h: 34px; --btm-h: 42px; } #hdr { padding: 0 max(8px, env(safe-area-inset-left)); background: linear-gradient(to bottom, rgba(9,9,11,0.56), transparent); } .hdr-badge { display: none; } .hdr-name { max-width: 32vw; font-size: 0.74rem; } .client-logo { height: 18px; max-width: 64px; } .contact-btn { height: 26px; padding: 0 8px; font-size: 0.48rem; } .icon-btn { width: 27px; height: 27px; } #btm { height: var(--btm-h); padding: 5px max(8px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(9,9,11,0.58), transparent); } #specsStrip { display: none; } #ctrlRow { justify-content: center; } .ctrl-pill { min-height: 26px; padding: 3px 8px; font-size: 0.48rem; } #viewTabs { bottom: calc(var(--btm-h) + 5px); } .vtab { padding: 4px 10px; font-size: 0.54rem; } #movementTabs { top: 50%; transform: translateY(-50%) scale(0.72); right: max(4px, env(safe-area-inset-right)); } .hs-dot { width: clamp(16px, calc(var(--hs-size, 28px) * 0.52), 30px); height: clamp(16px, calc(var(--hs-size, 28px) * 0.52), 30px); } .hs-tooltip { display: none; } #infoPanel { height: min(74vh, 290px); width: min(420px, 74vw); left: auto; right: 8px; bottom: 8px; border-radius: 18px; transform: translateY(calc(100% + 18px)); } #infoPanel.open { transform: translateY(0); } .ip-title { font-size: 1.2rem; } .ip-body { font-size: 0.70rem; line-height: 1.35; } .ip-details { display: none; } .brand-watermark { display: none; } .engagement-prompt { bottom: calc(var(--btm-h) + 8px); max-width: 360px; left: 12px; right: auto; } } /* ═══════════════════════════════════════════════ MOBILE EXPERIENCE UPGRADE PACK ------------------------------------------------------------------ All rules are gated by .mobile-experience, which JS adds only on phone/coarse-pointer layouts. Desktop remains unchanged. ════════════════════════════════════════════════ */ .mobile-quick-actions, .mobile-gesture-hint { display: none; } @media (max-width: 768px), (pointer: coarse) { .mobile-experience #hdr, .mobile-experience #btm, .mobile-experience #viewTabs, .mobile-experience #movementTabs, .mobile-experience .brand-watermark { transition: opacity 0.32s var(--ease-out-expo), transform 0.32s var(--ease-out-expo), filter 0.32s; } .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #hdr, .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #btm, .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #viewTabs, .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #movementTabs, .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) .brand-watermark { opacity: 0.08; filter: blur(1px); pointer-events: none; } .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #hdr { transform: translateY(-18px); } .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #btm { transform: translateY(34px); } .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #viewTabs { transform: translateX(-50%) translateY(24px); } .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #movementTabs { transform: translateY(-50%) translateX(30px) scale(0.82); } .mobile-quick-actions { display: block; position: fixed; right: max(13px, env(safe-area-inset-right)); bottom: calc(13px + env(safe-area-inset-bottom)); z-index: 260; pointer-events: none; } .mobile-quick-toggle { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; gap: 0; border: 1px solid rgba(232,255,71,0.42); background: rgba(14,14,18,0.74); color: var(--accent); backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0,0,0,0.36), 0 0 22px rgba(232,255,71,0.12); pointer-events: auto; } .mobile-quick-toggle span { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px var(--accent-glow); } .mobile-quick-menu { position: absolute; right: 0; bottom: 58px; width: 142px; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border-hi); border-radius: 18px; background: rgba(14,14,18,0.88); backdrop-filter: blur(18px); box-shadow: 0 18px 55px rgba(0,0,0,0.42); pointer-events: auto; } .mobile-quick-menu[hidden] { display: none; } .mobile-quick-menu button { min-height: 34px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.075); color: var(--text-hi); font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase; text-align: left; } .mobile-quick-menu button:first-child { color: var(--accent); background: var(--accent-dim); } /* With quick actions available, the bottom shelf can be even quieter. */ .mobile-experience #btm { padding-right: 66px; } .mobile-experience #ctrlRow { max-width: calc(100vw - 82px); } /* Smarter hotspot feel: the nearest hotspot to the viewing center is subtly larger. */ .mobile-experience .hs-dot.is-nearest-mobile { width: clamp(24px, calc(var(--hs-size, 28px) * 0.82), 42px); height: clamp(24px, calc(var(--hs-size, 28px) * 0.82), 42px); z-index: 4; } .mobile-experience .hs-dot.is-nearest-mobile .hs-dot-inner { inset: 34%; } .mobile-experience .hs-dot.is-nearest-mobile .hs-dot-ring { inset: 15%; opacity: 0.55; } /* Mobile info cards first show the story, then the details on demand. */ .mobile-experience #infoPanel.mobile-ip-collapsed #ipBody { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mobile-experience #infoPanel.mobile-ip-collapsed #ipDetails { display: none; } .mobile-more-details { align-self: flex-start; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(232,255,71,0.34); background: var(--accent-dim); color: var(--accent); font-family: var(--f-mono); font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; } .mobile-gesture-hint { display: block; position: fixed; left: 50%; bottom: calc(var(--btm-h) + 60px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(10px); z-index: 255; opacity: 0; pointer-events: none; padding: 7px 12px; border-radius: 999px; background: rgba(14,14,18,0.74); border: 1px solid var(--border-hi); color: var(--text-hi); font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.06em; backdrop-filter: blur(14px); box-shadow: 0 14px 36px rgba(0,0,0,0.30); transition: opacity 0.34s var(--ease-out-expo), transform 0.34s var(--ease-out-expo); white-space: nowrap; } .mobile-gesture-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); } } @media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) { .mobile-experience #btm { display: none; } .mobile-experience #hdr { opacity: 0.82; } .mobile-experience #viewTabs { bottom: max(8px, env(safe-area-inset-bottom)); left: 50%; } .mobile-experience .mobile-quick-actions { right: max(9px, env(safe-area-inset-right)); bottom: calc(9px + env(safe-area-inset-bottom)); } .mobile-experience .mobile-quick-toggle { width: 42px; height: 42px; } .mobile-experience .mobile-quick-menu { bottom: 50px; width: 132px; } .mobile-experience .mobile-gesture-hint { bottom: calc(48px + env(safe-area-inset-bottom)); } .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #viewTabs { transform: translateX(-50%) translateY(18px); } } /* ═══════════════════════════════════════════════ MOBILE REFINEMENT PASS — user feedback Desktop remains untouched: all rules are mobile/coarse-pointer only. ════════════════════════════════════════════════ */ @media (max-width: 768px), (pointer: coarse) { /* The 3-dot quick action menu is intentionally removed. */ .mobile-quick-actions { display: none !important; } .mobile-experience #btm { padding-right: 12px; } .mobile-experience #ctrlRow { max-width: none; } /* Keep the car as the focus: make hotspot labels much smaller on phones. */ .mobile-experience .hs-tooltip { max-width: 112px; padding: 3px 7px; font-size: 0.47rem; letter-spacing: 0.07em; line-height: 1.05; white-space: normal; text-align: center; bottom: calc(100% + 5px); border-radius: 4px; } .mobile-experience .hs-tooltip::after { border-width: 3px; } /* Smaller visual footprint for hotspot dots themselves. */ .mobile-experience .hs-dot { width: clamp(18px, calc(var(--hs-size, 28px) * 0.62), 34px); height: clamp(18px, calc(var(--hs-size, 28px) * 0.62), 34px); } .mobile-experience .hs-dot.is-nearest-mobile { width: clamp(21px, calc(var(--hs-size, 28px) * 0.72), 38px); height: clamp(21px, calc(var(--hs-size, 28px) * 0.72), 38px); } /* Compact first-start learning popup. */ .mobile-experience .onboarding-prompt { left: 50%; right: auto; bottom: calc(var(--btm-h) + 10px + env(safe-area-inset-bottom)); width: min(286px, calc(100vw - 32px)); padding: 13px 14px; border-radius: 18px; transform: translateX(-50%); } .mobile-experience .ob-kicker { font-size: 0.48rem; margin-bottom: 5px; letter-spacing: 0.13em; } .mobile-experience .onboarding-prompt h2 { font-size: 1.28rem; line-height: 1; margin-bottom: 5px; } .mobile-experience .onboarding-prompt p { font-size: 0.72rem; line-height: 1.32; } .mobile-experience .ob-actions { margin-top: 10px; gap: 7px; } .mobile-experience .ob-primary, .mobile-experience .ob-secondary { min-height: 30px; padding: 0 10px; font-size: 0.51rem; letter-spacing: 0.08em; } /* Make mode tips smaller and less intrusive when they do appear after a true mode change. */ .mobile-experience .mode-tip { left: 12px; right: 58px; bottom: calc(var(--btm-h) + 10px + env(safe-area-inset-bottom)); grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 11px; border-radius: 16px; } .mobile-experience .mode-tip-icon { width: 36px; height: 36px; border-radius: 12px; } .mobile-experience .mode-tip-icon svg { width: 21px; height: 21px; } .mobile-experience .mode-tip strong { font-size: 0.96rem; } .mobile-experience .mode-tip p { font-size: 0.67rem; line-height: 1.22; } /* Fullscreen stays top-right; the instructions/info button sits directly below it. */ .mobile-experience .hdr-price { display: none !important; } .mobile-experience #btnFs, .mobile-experience #btnHelp { position: fixed; right: max(10px, env(safe-area-inset-right)); z-index: 86; width: 34px; height: 34px; } .mobile-experience #btnFs { top: max(8px, env(safe-area-inset-top)); } .mobile-experience #btnHelp { top: calc(max(8px, env(safe-area-inset-top)) + 40px); } } @media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) { .mobile-experience .onboarding-prompt { bottom: max(8px, env(safe-area-inset-bottom)); width: min(300px, calc(100vw - 80px)); } .mobile-experience .mode-tip { bottom: max(8px, env(safe-area-inset-bottom)); right: 54px; } .mobile-experience #btnFs { top: max(8px, env(safe-area-inset-top)); } .mobile-experience #btnHelp { top: calc(max(8px, env(safe-area-inset-top)) + 39px); } } @media (max-width: 768px), (pointer: coarse) { .mobile-experience .onboarding-prompt { animation: mobileObPromptIn 0.34s var(--ease-out-expo) both; } @keyframes mobileObPromptIn { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.985); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } } /* ═══════════════════════════════════════════════ MOBILE POLISH PASS — spacing, smoother hide, flying touch parity Desktop remains untouched. ════════════════════════════════════════════════ */ @media (max-width: 768px), (pointer: coarse) { .mobile-experience #hdr, .mobile-experience #btm, .mobile-experience #viewTabs, .mobile-experience #movementTabs, .mobile-experience .brand-watermark { transition: opacity 0.62s var(--ease-out-expo), transform 0.62s var(--ease-out-expo), filter 0.62s var(--ease-out-expo); will-change: opacity, transform, filter; } .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #hdr, .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #btm, .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #viewTabs, .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) #movementTabs, .mobile-experience.mobile-ui-hidden:not(.mobile-ui-locked) .brand-watermark { opacity: 0.045; filter: blur(0.6px); } /* Prevent top-right buttons from stacking on top of Contact. */ .mobile-experience #hdr { padding-right: calc(92px + env(safe-area-inset-right)); } .mobile-experience .hdr-left { min-width: 0; overflow: hidden; } .mobile-experience .hdr-name { overflow: hidden; text-overflow: ellipsis; max-width: 42vw; } .mobile-experience .hdr-right { gap: 7px; flex-shrink: 0; min-width: 0; } .mobile-experience .contact-btn { position: fixed; top: max(8px, env(safe-area-inset-top)); right: calc(max(10px, env(safe-area-inset-right)) + 44px); z-index: 86; height: 34px; max-width: 118px; padding: 0 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-experience #btnFs, .mobile-experience #btnHelp { right: max(10px, env(safe-area-inset-right)); } } @media (max-width: 390px), (pointer: coarse) { .mobile-experience .contact-btn { max-width: 98px; padding: 0 9px; font-size: 0.48rem; } .mobile-experience .hdr-name { max-width: 36vw; } } @media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) { .mobile-experience .contact-btn { top: max(8px, env(safe-area-inset-top)); right: calc(max(9px, env(safe-area-inset-right)) + 43px); height: 32px; max-width: 112px; } } /* ═══════════════════════════════════════════════ MOBILE WALKING JOYSTICK Mobile/tablet only. Appears only in Walking mode so Orbit and Flying stay clean. ════════════════════════════════════════════════ */ .mobile-walk-joystick { display: none; } @media (max-width: 768px), (pointer: coarse) { .mobile-experience.mobile-walking-mode .mobile-walk-joystick { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: calc(140px + env(safe-area-inset-bottom)); width: 92px; height: 92px; z-index: 115; display: block; opacity: 0.72; transform: translateZ(0) scale(0.96); transition: opacity 0.45s var(--ease-out-expo), transform 0.45s var(--ease-out-expo), filter 0.45s var(--ease-out-expo); touch-action: none; pointer-events: auto; } .mobile-experience.mobile-walking-mode .mobile-walk-joystick.active { opacity: 1; transform: translateZ(0) scale(1); filter: drop-shadow(0 14px 32px rgba(0,0,0,0.36)); } .mobile-walk-joystick-base { position: absolute; inset: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: radial-gradient(circle at center, rgba(232,255,71,0.10), rgba(232,255,71,0.04) 38%, rgba(14,14,18,0.54) 70%), rgba(14,14,18,0.48); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 10px 26px rgba(0,0,0,0.28); backdrop-filter: blur(14px); } .mobile-walk-joystick-base::before, .mobile-walk-joystick-base::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.12); border-radius: 99px; pointer-events: none; } .mobile-walk-joystick-base::before { width: 42px; height: 1px; } .mobile-walk-joystick-base::after { width: 1px; height: 42px; } .mobile-walk-joystick-knob { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; border-radius: 999px; transform: translate(-50%, -50%); background: var(--accent); box-shadow: 0 0 0 7px rgba(232,255,71,0.10), 0 0 24px var(--accent-glow); transition: transform 0.08s linear; pointer-events: none; } .mobile-ui-hidden.mobile-walking-mode .mobile-walk-joystick:not(.active) { opacity: 0.34; transform: translateZ(0) scale(0.9); } @media (orientation: landscape) and (max-height: 520px) { .mobile-experience.mobile-walking-mode .mobile-walk-joystick { width: 78px; height: 78px; left: max(10px, env(safe-area-inset-left)); bottom: calc(92px + env(safe-area-inset-bottom)); } .mobile-walk-joystick-knob { width: 32px; height: 32px; } .mobile-walk-joystick-base::before { width: 34px; } .mobile-walk-joystick-base::after { height: 34px; } } } /* ═══════════════════════════════════════════════ MOBILE HOTSPOT POPUP COMPACT PASS Makes hotspot info feel like a small mobile card, not a half-screen sheet. Desktop remains untouched. ════════════════════════════════════════════════ */ @media (max-width: 768px), (pointer: coarse) { .mobile-experience #infoPanel { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; height: auto; max-height: min(34vh, 235px); padding: 10px 14px 13px; gap: 7px; border-radius: 17px; border: 1px solid rgba(255,255,255,0.10); background: rgba(18,18,23,0.88); box-shadow: 0 18px 52px rgba(0,0,0,0.44); transform: translateY(calc(100% + 18px)); } .mobile-experience #infoPanel.open { transform: translateY(0); } .mobile-experience #infoPanel:not(.mobile-ip-collapsed) { max-height: min(54vh, 390px); overflow-y: auto; } .mobile-experience .ip-drag-handle { width: 30px; height: 3px; margin-bottom: 7px; opacity: 0.55; } .mobile-experience .ip-close { top: 8px; right: 9px; width: 25px; height: 25px; } .mobile-experience .ip-tag { margin-top: 0; font-size: 0.48rem; letter-spacing: 0.14em; } .mobile-experience .ip-title { max-width: calc(100% - 32px); font-size: clamp(1.02rem, 4.8vw, 1.34rem); line-height: 0.98; letter-spacing: 0.01em; } .mobile-experience .ip-body { font-size: 0.72rem; line-height: 1.34; color: rgba(242,242,244,0.72); } .mobile-experience #infoPanel.mobile-ip-collapsed #ipBody { -webkit-line-clamp: 2; } .mobile-experience .mobile-more-details { min-height: 25px; padding: 0 10px; font-size: 0.48rem; letter-spacing: 0.075em; } .mobile-experience .ip-details { margin-top: 2px; } .mobile-experience .ip-details .ip-row { padding: 6px 0; } .mobile-experience .ip-details .ip-key { font-size: 0.50rem; letter-spacing: 0.075em; } .mobile-experience .ip-details .ip-val { font-size: 0.88rem; } .mobile-experience #ipBackdrop.show { background: rgba(0,0,0,0.20); backdrop-filter: blur(1.2px); } } @media (max-width: 390px), (pointer: coarse) { .mobile-experience #infoPanel { left: 10px; right: 10px; max-height: min(32vh, 210px); padding: 9px 12px 12px; } .mobile-experience #infoPanel:not(.mobile-ip-collapsed) { max-height: min(52vh, 350px); } .mobile-experience .ip-title { font-size: 1.02rem; } .mobile-experience .ip-body { font-size: 0.68rem; } } @media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) { .mobile-experience #infoPanel { left: auto; right: calc(52px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); width: min(315px, 42vw); max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 9px 12px 11px; } .mobile-experience #infoPanel:not(.mobile-ip-collapsed) { max-height: calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } .mobile-experience .ip-title { font-size: 1.05rem; } .mobile-experience .ip-body { font-size: 0.66rem; line-height: 1.25; } .mobile-experience #infoPanel.mobile-ip-collapsed #ipBody { -webkit-line-clamp: 2; } } /* ═══════════════════════════════════════════════ MOBILE POPUP TRUE COLLAPSE + DRAG CLOSE PASS Collapsed state is now content-sized; details are only allocated after the user taps Show more. Desktop remains unchanged. ════════════════════════════════════════════════ */ @media (max-width: 768px), (pointer: coarse) { .mobile-experience #infoPanel { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding: 8px 12px 10px !important; gap: 5px !important; transform: translateY(calc(100% + 18px)) !important; transition: transform 0.36s var(--ease-out-expo), opacity 0.28s ease, max-height 0.28s var(--ease-out-expo), padding 0.22s ease !important; } .mobile-experience #infoPanel.open { transform: translateY(var(--mobile-ip-drag-y, 0px)) !important; } .mobile-experience #infoPanel.mobile-ip-dragging { transition: none !important; } .mobile-experience #infoPanel.mobile-ip-collapsed { max-height: min(24vh, 154px) !important; overflow: hidden !important; } .mobile-experience #infoPanel.mobile-ip-expanded { max-height: min(54vh, 390px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .mobile-experience #infoPanel.mobile-ip-collapsed #ipDetails { display: none !important; } .mobile-experience #infoPanel.mobile-ip-expanded #ipDetails { display: flex !important; } .mobile-experience #infoPanel.mobile-ip-collapsed #ipBody { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .mobile-experience .ip-drag-handle { display: block !important; width: 34px !important; height: 4px !important; margin: 0 auto 5px !important; border-radius: 999px !important; touch-action: none; cursor: grab; } .mobile-experience .ip-tag { font-size: 0.45rem !important; line-height: 1 !important; margin: 0 !important; } .mobile-experience .ip-title { font-size: clamp(0.98rem, 4.2vw, 1.18rem) !important; line-height: 0.98 !important; margin: 0 !important; } .mobile-experience .ip-body { font-size: 0.66rem !important; line-height: 1.26 !important; margin: 0 !important; } .mobile-experience .mobile-more-details { margin-top: 1px !important; min-height: 22px !important; padding: 0 9px !important; font-size: 0.45rem !important; } .mobile-experience .ip-details { margin-top: 4px !important; } } @media (max-width: 390px), (pointer: coarse) { .mobile-experience #infoPanel.mobile-ip-collapsed { max-height: min(23vh, 142px) !important; } .mobile-experience .ip-body { font-size: 0.63rem !important; } } @media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) { .mobile-experience #infoPanel.mobile-ip-collapsed { max-height: calc(100vh - 26px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; } .mobile-experience #infoPanel.mobile-ip-expanded { max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; } } /* Performance cleanup: once the loader fades out, stop all loader animations until JS removes it. */ #loader.out, #loader.out *, #loader.out::before, #loader.out::after { animation-play-state: paused !important; }