/* === ssla-lightbox — viewer overlay for g-media image-gallery ============ Ported from the DTA storefront (dta-lightbox.css) in v3.54.44. Deliberately NOT scoped under any section class: the element is appended to , outside the g-media section it serves. Everything is scoped on .ssla-lightbox itself. Suite UI is squared — no border-radius anywhere here. ========================================================================= */ .ssla-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba( 15, 15, 15, .92 ); padding: 4vh 4vw; } .ssla-lightbox.is-open { display: flex; } body.ssla-lightbox-open { overflow: hidden; } .ssla-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; } .ssla-lightbox__img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; display: block; box-shadow: 0 8px 40px rgba( 0, 0, 0, .5 ); } .ssla-lightbox__caption { color: #f2f2f2; font-family: var( --shell-font-family-body, inherit ); font-size: .9rem; text-align: center; max-width: 60ch; } .ssla-lightbox__caption[hidden] { display: none; } .ssla-lightbox__count { position: absolute; bottom: 20px; left: 50%; transform: translateX( -50% ); color: rgba( 255, 255, 255, .7 ); font-size: .8rem; letter-spacing: .04em; } .ssla-lightbox__close, .ssla-lightbox__nav { position: absolute; background: transparent; border: none; color: #fff; cursor: pointer; line-height: 1; transition: opacity .15s; } .ssla-lightbox__close:hover, .ssla-lightbox__nav:hover { opacity: .7; } /* Keyboard users need to see where they are — the ported original had no visible focus ring on these controls. */ .ssla-lightbox__close:focus-visible, .ssla-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; } .ssla-lightbox__nav[hidden] { display: none; } .ssla-lightbox__close { top: 18px; right: 22px; font-size: 2.4rem; font-weight: 300; padding: .25rem .5rem; } .ssla-lightbox__nav { top: 50%; transform: translateY( -50% ); font-size: 3.5rem; font-weight: 300; padding: .5rem 1rem; } .ssla-lightbox__prev { left: 6px; } .ssla-lightbox__next { right: 6px; } @media ( max-width: 640px ) { .ssla-lightbox { padding: 2vh 2vw; } .ssla-lightbox__img { max-height: 74vh; } .ssla-lightbox__nav { font-size: 2.4rem; padding: .5rem .6rem; } .ssla-lightbox__close { top: 10px; right: 12px; font-size: 2rem; } .ssla-lightbox__count { bottom: 10px; } } @media ( prefers-reduced-motion: reduce ) { .ssla-lightbox__close, .ssla-lightbox__nav { transition: none; } }