/* Disco-Train — Page Background: fixed, full-viewport layer behind everything (replaces the site's own background on pages that use it). */ /* z-index: 0 (not -1) on purpose — Betheme's #Wrapper is position:relative with z-index:auto, which per the CSS painting-order spec always paints above negative z-index siblings regardless of DOM order. Using the same stacking level (0) and guaranteeing this div is the FIRST child of (see discotrain-pbg-frontend.php) makes DOM order decide instead: #Wrapper (later in the DOM) paints on top, this background paints below. */ .discotrain-pbg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; background: var(--discotrain-dark, #0d0d0d); } .discotrain-pbg-image { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .discotrain-pbg-native-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; } /* YouTube/Vimeo embeds: classic "oversize + center" trick so the iframe always covers the viewport at a 16:9 ratio, cropping instead of letterboxing. */ .discotrain-pbg-yt-embed, .discotrain-pbg-vimeo-embed { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); } .discotrain-pbg-yt-embed iframe, .discotrain-pbg-vimeo-embed iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; /* 16:9 */ min-height: 100vh; min-width: 177.78vh; /* 16:9 */ transform: translate(-50%, -50%); border: 0; pointer-events: none; } .discotrain-pbg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; }