/* * Bennelongia shared image lightbox — one reusable overlay, injected once * into by assets/js/lightbox.js and reused by every image slider * that opts in (see BnLightbox.attachGallery calls in * assets/js/service-gallery-carousel.js). Namespaced under .bn-lightbox so * it can't collide with a slider's own styles. */ .bn-lightbox { --bl-font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bl-ink: #030712; --bl-green: #7FB04F; position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(3, 7, 18, 0.85); } .bn-lightbox[hidden] { display: none; } body.bn-lightbox-open { overflow: hidden; } .bn-lightbox__dialog { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: min(1100px, 100%); max-height: 100%; } .bn-lightbox__stage-wrap { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; } .bn-lightbox__stage { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 78vh; } .bn-lightbox__image { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; background: #000; } .bn-lightbox__caption { margin: 0; max-width: 100%; font-family: var(--bl-font); font-size: 16px; line-height: 1.5; color: #fff; text-align: center; } .bn-lightbox__caption[hidden] { display: none; } .bn-lightbox__close { position: absolute; top: -44px; right: -8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #fff; color: var(--bl-ink); font-size: 22px; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .bn-lightbox__close:hover, .bn-lightbox__close:focus-visible { background: var(--bl-green); color: #fff; outline: none; } .bn-lightbox__nav { position: absolute; top: 50%; z-index: 1; width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #fff; color: var(--bl-ink); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: background-color 0.2s ease, color 0.2s ease; } .bn-lightbox__nav:hover, .bn-lightbox__nav:focus-visible { background: var(--bl-green); color: #fff; outline: none; } .bn-lightbox__nav[hidden] { display: none; } .bn-lightbox__nav svg { width: 18px; height: 18px; } .bn-lightbox__nav--prev { left: 0; transform: translate(-50%, -50%); } .bn-lightbox__nav--next { right: 0; transform: translate(50%, -50%); } .bn-lightbox-trigger { cursor: zoom-in; } @media (max-width: 768px) { .bn-lightbox { padding: 16px; } .bn-lightbox__close { top: -40px; right: 0; } .bn-lightbox__nav { width: 40px; height: 40px; } .bn-lightbox__caption { font-size: 14px; } }