.glb-canvas-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 999; } .glb-canvas-overlay canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 1; } .glb-scene-marker, .glb-keyframe-marker { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; } /* ================================================================== */ /* Preloader */ /* ================================================================== */ .glb-preloader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; transition: opacity 0.35s ease; } .glb-preloader--hidden { opacity: 0; pointer-events: none; } /* Custom image */ .glb-preloader__img { max-width: 100px; max-height: 100px; } /* Default CSS spinner */ .glb-preloader__spinner { width: 48px; height: 48px; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: rgba(255, 255, 255, 0.8); border-radius: 50%; animation: glb-spin 0.8s linear infinite; } @keyframes glb-spin { to { transform: rotate(360deg); } } /* ================================================================== */ /* Hotspot buttons */ /* ================================================================== */ /* * Appended to (not inside .glb-canvas-overlay) so the buttons escape the * overlay's stacking context and sit above page content — clickable even where * site content would otherwise cover them. Buttons are positioned in viewport * coordinates by the viewer. z-index stays just below the hotspot panel (10000). */ .glb-hotspot-wrapper { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .glb-hotspot-btn { position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 18px; line-height: 32px; text-align: center; cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%); transition: transform 0.15s ease, background 0.15s ease; z-index: 20; animation: glb-hotspot-pulse 2s ease-in-out infinite; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .glb-hotspot-btn:hover { transform: translate(-50%, -50%) scale(1.15); background: rgba(0, 0, 0, 0.85); } .glb-hotspot-btn--hidden { display: none; } /* Custom uploaded icon: show the image instead of a glyph. */ .glb-hotspot-btn--custom { background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: cover; } /* Icon variants */ .glb-hotspot-btn--info::before { content: '\2139'; } .glb-hotspot-btn--plus::before { content: '+'; font-weight: 700; } .glb-hotspot-btn--pin::before { content: '\1F4CD'; font-size: 16px; } @keyframes glb-hotspot-pulse { 0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } 50% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 6px rgba(255, 255, 255, 0.15); } } /* ================================================================== */ /* Hotspot panel (draggable iframe) */ /* ================================================================== */ .glb-hotspot-panel { position: fixed; width: 420px; height: 340px; background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); z-index: 10000; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; } .glb-hotspot-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1d2327; color: #fff; cursor: grab; user-select: none; flex-shrink: 0; } .glb-hotspot-panel__header:active { cursor: grabbing; } .glb-hotspot-panel__title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glb-hotspot-panel__close { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px; opacity: 0.7; transition: opacity 0.15s; pointer-events: auto; position: relative; z-index: 10; } .glb-hotspot-panel__close:hover { opacity: 1; } .glb-hotspot-panel__body { flex: 1 1 auto; overflow: hidden; } .glb-hotspot-panel__body iframe { width: 100%; height: 100%; border: none; } /* Resize handle */ .glb-hotspot-panel__resize { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; pointer-events: auto; z-index: 5; } .glb-hotspot-panel__resize::before { content: ''; position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-right: 2px solid rgba(0, 0, 0, 0.3); border-bottom: 2px solid rgba(0, 0, 0, 0.3); } .glb-hotspot-panel__resize::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 5px; height: 5px; border-right: 2px solid rgba(0, 0, 0, 0.3); border-bottom: 2px solid rgba(0, 0, 0, 0.3); } @media (max-width: 600px) { .glb-hotspot-panel { width: 92vw; height: 60vh; left: 4vw !important; top: 20vh !important; } } /* ================================================================== */ /* Hotspot panel – Glass variant */ /* ================================================================== */ .glb-hotspot-panel--glass { background: rgba(20, 22, 28, 0.82); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .glb-hotspot-panel--glass .glb-hotspot-panel__header { background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 10px 14px; } .glb-hotspot-panel--glass .glb-hotspot-panel__title { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .glb-hotspot-panel--glass .glb-hotspot-panel__close { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.1); font-size: 16px; line-height: 22px; text-align: center; padding: 0; opacity: 0.8; transition: background 0.15s, opacity 0.15s; } .glb-hotspot-panel--glass .glb-hotspot-panel__close:hover { background: rgba(0, 0, 0, 0.5); opacity: 1; } .glb-hotspot-panel--glass .glb-hotspot-panel__body { margin: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); } .glb-hotspot-panel--glass .glb-hotspot-panel__body iframe { background: transparent; opacity: 0.92; } .glb-hotspot-panel--glass .glb-hotspot-panel__resize::before { border-right-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(255, 255, 255, 0.2); } .glb-hotspot-panel--glass .glb-hotspot-panel__resize::after { border-right-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(255, 255, 255, 0.2); } /* ================================================================== */ /* Zoom hint tooltip */ /* ================================================================== */ .glb-zoom-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(8px); background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 13px; padding: 8px 16px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; white-space: nowrap; z-index: 30; } .glb-zoom-hint--visible { opacity: 1; transform: translateX(-50%) translateY(0); }