html, body { width: 100%; height: 100%; margin: 0; background: #000; font-family: Arial, Helvetica, sans-serif; } #panorama { width: 100%; height: 100%; } #status { position: fixed; left: 12px; bottom: 12px; max-width: min(92vw, 700px); padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.35; color: #fff; background: rgba(0, 0, 0, 0.72); z-index: 9999; display: none; } #status.show { display: block; } /* Scene-list dropdown (shown only in edit mode for tours). */ #sceneList { position: fixed; left: 12px; top: 12px; max-width: min(60vw, 320px); padding: 8px 10px; border-radius: 8px; font-size: 14px; color: #fff; background: rgba(0, 0, 0, 0.72); border: 1px solid rgba(255, 255, 255, 0.2); z-index: 9999; display: none; font-family: inherit; } #sceneList.show { display: block; } /* Transparent diagnostics overlay (enabled with ?debug). Click-through so it never blocks panning. */ #debugOverlay { position: fixed; left: 12px; top: 12px; max-width: min(86vw, 380px); max-height: 72vh; padding: 8px 10px; border-radius: 8px; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; color: #b9f6ca; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.18); z-index: 10000; pointer-events: none; display: none; } #debugOverlay.show { display: block; } #debugOverlay .debug-head { color: #fff; white-space: pre-wrap; margin-bottom: 6px; } #debugOverlay .debug-log { max-height: 48vh; overflow-y: auto; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 6px; } #debugOverlay .debug-log > div { white-space: pre-wrap; opacity: 0.92; } /* Hard-disable compass / orientation buttons on all devices. */ .pnlm-compass, .pnlm-orientation-button { display: none !important; } /* Suppress Pannellum's right-click "About" credit popup everywhere (prod and edit mode). Single source of truth so neither mode has to re-implement this. */ .pnlm-about-msg { display: none !important; } /* Hide Pannellum's title/author info box by default. Opt back in per-pano with the showTitle flag, which adds .pano-show-title to . */ .pnlm-panorama-info { display: none !important; } body.pano-show-title .pnlm-panorama-info { display: inline !important; } /* Loading UI. Pannellum signals "busy" with a center box (.pnlm-load-box) it toggles via display, and writes the real download % to its progress bar (.pnlm-lbar-fill) and bytes to .pnlm-lmsg. We hide Pannellum's box, spinner, and built-in bar entirely and instead drive our own circular ring (.pano-loadspin below) from that same % — see setupLoadingSpinner in pano.js. The box stays in the DOM (hidden) purely as the busy + progress signal. In debug mode we still surface the live "X / Y MB" counter as plain text. The loadingLabel is blanked in JS, so no "Panorama loading..." text ever appears. */ .pnlm-load-box { background: transparent !important; box-shadow: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .pnlm-load-box p { margin: 0 !important; } .pnlm-lbox, .pnlm-lbar { display: none !important; } .pnlm-lmsg { display: none !important; } body.pano-debug .pnlm-lmsg { display: block !important; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } /* Loading indicator. Looks EXACTLY like a hovered hotspot dot (it reuses the same --ahp-* variables, so any future dot restyle carries over), with one addition: a new ring sitting just OUTSIDE the dot's hover glow that fills up like a clock as the image downloads. The ring is slightly thicker than the glow; its colour is a placeholder (--pano-loadring-color) to be chosen later. No background track — only the growing filled arc is shown. JS sets stroke-dashoffset = 100 - percent (the circle declares pathLength="100", so the dash math is independent of its actual radius). The whole thing is positioned at the clicked hotspot via inline left/top (JS), centered otherwise; .is-active fades it in after a short delay. */ .pano-loadspin { /* Geometry derived from the dot variables so it scales with them. Outer size = dot + glow + gap + ring thickness (+1px for the round stroke cap). At the default values this is 50px. The ring's own colour / opacity / width / gap live on :root so JS theming and per-pano overrides can reach them (a local declaration here would shadow the :root one). */ --pano-loadspin-size: calc( 2 * ( var(--ahp-size) / 2 + var(--ahp-hover-glow) + var(--pano-loadring-gap) + var(--pano-loadring-width) ) + 1px ); position: fixed; top: 50%; left: 50%; width: var(--pano-loadspin-size); height: var(--pano-loadspin-size); transform: translate(-50%, -50%); z-index: 10000; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } .pano-loadspin.is-active { opacity: 1; } /* The dot itself — a static copy of the hovered hotspot look. */ .pano-loadspin-dot { position: absolute; top: 50%; left: 50%; width: var(--ahp-size); height: var(--ahp-size); transform: translate(-50%, -50%); box-sizing: border-box; border-radius: 50%; background-color: rgba(var(--ahp-hover-color), var(--ahp-hover-opacity)); /* mimic the hovered dot */ border: var(--ahp-border-width) solid rgba(var(--ahp-border-color), var(--ahp-border-opacity)); /* The shared ahp-pulse animation drives the glow so the loader keeps "breathing" exactly like a live dot. */ animation: ahp-pulse var(--ahp-pulse-duration) ease-in-out infinite; } /* The progress ring, drawn just outside the glow. viewBox is 50 units square (≈ 1:1 with px at the default size) so r/stroke-width read in px there: r 20.5 + stroke 8 puts the inner edge ~3px past the glow and the outer edge at the box edge. pathLength="100" keeps JS's 100-based dash math correct regardless of the actual radius. */ .pano-loadspin svg { position: absolute; inset: 0; width: 100%; height: 100%; /* Start the stroke at 12 o'clock instead of 3 o'clock. */ transform: rotate(-90deg); } .pano-loadspin-fill { fill: none; stroke: rgba(var(--pano-loadring-color), var(--pano-loadring-opacity)); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; /* empty until JS fills it */ transition: stroke-dashoffset 0.2s ease; } /* Custom scene-navigation hotspot. Replaces Pannellum's default arrow sprite with a soft pink dot. Tweak the variables below to restyle — everything (size, colour, opacity, border, hover) derives from them. They live on :root (not the hotspot rule) so the loading indicator (.pano-loadspin-dot) can mirror the dot from the same single source. */ :root { /* The dot itself. */ --ahp-size: 15px; /* diameter of the visible dot */ --ahp-hit-size: 60px; /* diameter of the (invisible) tap/click target */ --ahp-color: 255, 182, 193; /* fill color, RGB (light pink) */ --ahp-opacity: 0.6; /* fill opacity (0–1) */ /* Border: the solid ring drawn around the dot. */ --ahp-border-color: 255, 255, 255;/* border color, RGB */ --ahp-border-opacity: 0.85; /* border opacity (0–1) */ --ahp-border-width: 2px; /* border thickness */ --ahp-hover-glow: 6px; /* glow ring size on hover */ /* Hover: the dot's emphasised state. Colour/opacity default to the dot fill at full opacity but can be themed independently. */ --ahp-hover-color: var(--ahp-color); --ahp-hover-opacity: 1; /* fill opacity on hover (0–1) */ --ahp-hover-glow-opacity: 0.35; /* glow ring opacity on hover (0–1) */ /* Pulse ring: the soft "breathing" glow on live dots + the loader. Colour defaults to the dot colour but can be themed independently. */ --ahp-pulse-color: var(--ahp-color); --ahp-pulse-glow: 4px; /* pulse ring thickness at peak (gentle, < hover) */ --ahp-pulse-opacity: 0.25; /* pulse ring opacity at peak (subtle) */ --ahp-pulse-duration: 2.6s; /* breathing period (shared with the loader) */ /* Loading ring: the clock-style fill arc on the loader. Colour/opacity default to the dot so the ring follows it unless overridden. These live here (not on .pano-loadspin) so JS theming can reach them. */ --pano-loadring-gap: 0px; /* clear space between the glow and the ring */ --pano-loadring-width: 8px; /* loading ring thickness */ --pano-loadring-color: var(--ahp-color); --pano-loadring-opacity: 0.6; /* loading ring opacity (0–1) */ } .adlai-hotspot-point { width: var(--ahp-size) !important; height: var(--ahp-size) !important; /* Centre the dot on its pitch/yaw anchor point. */ margin-left: calc(var(--ahp-size) / -2) !important; margin-top: calc(var(--ahp-size) / -2) !important; background-image: none !important; background-color: rgba(var(--ahp-color), var(--ahp-opacity)) !important; border: var(--ahp-border-width) solid rgba(var(--ahp-border-color), var(--ahp-border-opacity)) !important; border-radius: 50% !important; box-sizing: border-box; cursor: pointer; /* IMPORTANT: never transition `transform`. Pannellum rewrites the hotspot's transform every frame to pin it to the panorama, so a transform transition makes the dots lag/drift ("fly in"). */ transition: background-color 0.15s ease, box-shadow 0.15s ease; /* Gentle, continuous "breathing" glow so live dots are noticeable without the full hover/selected emphasis. */ animation: ahp-pulse var(--ahp-pulse-duration) ease-in-out infinite; } /* Invisible, larger hit area so small dots stay easy to tap with a thumb. Sized independently from the visible dot via --ahp-hit-size and centred on the same anchor. Pointer events land here; the visible circle just shows where to aim. */ .adlai-hotspot-point::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--ahp-hit-size); height: var(--ahp-hit-size); /* Centre on the dot without touching the dot's own transform (which Pannellum owns); the pseudo-element has its own transform context. */ transform: translate(-50%, -50%); border-radius: 50%; background: transparent; } /* Soft pulse: glow grows partway out and fades, then back to nothing. Peak stays below the hover glow so hover still reads as stronger. */ @keyframes ahp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ahp-pulse-color), 0); } 50% { box-shadow: 0 0 0 var(--ahp-pulse-glow) rgba(var(--ahp-pulse-color), var(--ahp-pulse-opacity)); } } .adlai-hotspot-point:hover { /* Grow a soft glow ring instead of scaling — scaling would replace Pannellum's positioning transform and fling the dot off-anchor. Pause the pulse so hover reads as a distinct "selected" state. */ animation: none; background-color: rgba(var(--ahp-hover-color), var(--ahp-hover-opacity)) !important; box-shadow: 0 0 0 var(--ahp-hover-glow) rgba(var(--ahp-hover-color), var(--ahp-hover-glow-opacity)); } /* Desktop: pin fullscreen toggle to bottom-right. */ @media (pointer: fine) { .pnlm-zoom-controls { position: fixed !important; top: auto !important; left: auto !important; right: 8px !important; bottom: 42px !important; margin-top: 0 !important; z-index: 9999 !important; } .pnlm-fullscreen-toggle-button { position: fixed !important; top: auto !important; left: auto !important; right: 8px !important; bottom: 8px !important; margin-top: 0 !important; z-index: 9999 !important; } }