/* Applied to while the Three.js home scene is active. */ .delta-three-active { overflow-x: hidden; background-color: var(--color-secondary-900); cursor: grab; } /* Stage container for the Three.js block on the homepage. */ #delta-three-stage { /*--three-stage-height: clamp(320px, 56vh, 680px);*/ position: relative; width: 100%; height: 100vh; background-color: var(--color-secondary-900); } /* Shared absolute positioning for canvas and loader inside the stage. */ .webgl.delta-home-three-canvas, #delta-three-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-top: 5rem; @media (max-width: 1024px) { padding-top: 0; } } /* Render target fills the stage, not the full viewport. */ .webgl.delta-home-three-canvas { width: 100%; height: 100%; display: block; z-index: 1; } /* Loader covers only the stage while GLB loading is in progress. */ #delta-three-loader { display: grid; place-content: center; width: 100%; height: 100%; background-color: var(--color-secondary-900); z-index: 2; } /* Loader text style. */ #delta-three-loader h1 { margin: 0; padding: 0; font-family: monospace; font-size: clamp(1.5rem, 4vw, 3rem); color: var(--color-primary-700); } /* Touch-Hint: nur auf Touch-Geräten sichtbar */ #delta-three-touch-hint { display: none; position: absolute; bottom: 15vh; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none; width: auto; background: rgba(0, 0, 0, 0.20); box-shadow: var(--shadow-default); backdrop-filter: var(--glass-blur); border-radius: 30px; padding: 10px 15px; gap: 30px; } #delta-three-touch-hint .delta-touch-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; cursor: pointer; pointer-events: auto; color: var(--color-white); line-height: 0; } #delta-three-touch-hint .delta-touch-btn::before, #delta-three-touch-hint .delta-touch-icon::before { content: ''; display: block; background: var(--color-white); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } #delta-three-touch-hint .delta-touch-btn::before { width: 20px; height: 20px; } #delta-three-touch-hint .delta-touch-icon::before { width: 36px; height: 36px; } #delta-three-touch-hint .delta-touch-btn--prev::before { mask-image: url('../assets/icons/arrow-left.svg'); -webkit-mask-image: url('../assets/icons/arrow-left.svg'); } #delta-three-touch-hint .delta-touch-btn--next::before { mask-image: url('../assets/icons/arrow-right.svg'); -webkit-mask-image: url('../assets/icons/arrow-right.svg'); } #delta-three-touch-hint .delta-touch-icon { display: flex; align-items: center; justify-content: center; } #delta-three-touch-hint .delta-touch-icon::before { mask-image: url('../assets/icons/swipe.svg'); -webkit-mask-image: url('../assets/icons/swipe.svg'); } @media (hover: none) { #delta-three-touch-hint { display: flex; align-items: center; justify-content: space-between; } }