/** * JuryBoard Video Lightbox — shared overlay styles. * * Used by every JuryBoard widget that opens a video: the markup is created by * assets/js/jb-video-lightbox.js and appended to , so it lives outside * any widget wrapper. * * That is why every value reads a --jb-vl-* custom property with a hard-coded * fallback. A host widget styles the overlay by defining those properties on * itself; the JS copies whatever the trigger has inherited onto the lightbox * element. A host that defines nothing still gets the fallbacks below. */ .jb-vl { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .jb-vl.is-open { display: flex; } .jb-vl__backdrop { position: absolute; inset: 0; background: var(--jb-vl-overlay, rgba(8, 15, 31, .88)); opacity: 0; transition: opacity .25s ease; cursor: pointer; } .jb-vl.is-visible .jb-vl__backdrop { opacity: 1; } .jb-vl__dialog { position: relative; width: 100%; max-width: var(--jb-vl-max-width, 980px); opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .25s ease, transform .25s ease; } .jb-vl.is-visible .jb-vl__dialog { opacity: 1; transform: none; } .jb-vl__frame { position: relative; aspect-ratio: var(--jb-vl-ratio, 16 / 9); overflow: hidden; background: #000; border-radius: var(--jb-vl-radius, 12px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } .jb-vl__frame iframe, .jb-vl__frame video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } .jb-vl__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--jb-vl-close-bg, rgba(0, 0, 0, .55)); color: var(--jb-vl-close-color, #fff); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .2s ease, transform .2s ease; } .jb-vl__close:hover, .jb-vl__close:focus-visible { background: #000; transform: scale(1.06); } .jb-vl__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } html.jb-vl-lock { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .jb-vl__backdrop, .jb-vl__dialog, .jb-vl__close { transition: none; } }