/* Video lightbox — see js/lg-video-popup.js. * * Deliberately NOT scoped under .lg-microsite: the overlay is appended to , outside the * scope wrapper. Containment comes from the enqueue instead — functions.php only loads this on * pages carrying `_lg_microsite` post meta. The `lg-vpopup` prefix keeps it clear of both * Bootstrap and UIkit. * * Sizing mirrors the source Popup Maker settings: centred, 50% width, capped, 16:9. */ .lg-vpopup { position: fixed; inset: 0; z-index: 1999999999; /* the source popups used this exact z-index */ display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.8); opacity: 0; transition: opacity 350ms ease; /* source animation_speed: 350 */ } .lg-vpopup.is-open { opacity: 1; } .lg-vpopup[hidden] { display: none; } .lg-vpopup-inner { position: relative; width: 50%; /* source custom_width */ max-width: 1100px; min-width: 280px; } /* Intrinsic 16:9 box — the original wrapped the iframe in padding-top:56.25%. */ .lg-vpopup-ratio { position: relative; padding-top: 56.25%; background: #000; } .lg-vpopup-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .lg-vpopup-close { position: absolute; top: -40px; right: 0; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; } .lg-vpopup-close:hover, .lg-vpopup-close:focus-visible { color: #ffdd00; /* Kino Flo yellow */ } /* Stop the page scrolling behind the video. */ body.lg-vpopup-open { overflow: hidden; } @media (max-width: 960px) { .lg-vpopup-inner { width: 100%; } }