/* ========================================= Lightbox (controlled by js/lightbox.js) A single overlay is appended to on load. Clicking a [data-lightbox] trigger adds the .is-open class to reveal it. ========================================= */ .lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92); padding: 24px; animation: lightbox-fade 0.2s ease; } .lightbox.is-open { display: flex; } @keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } } .lightbox__backdrop { position: absolute; inset: 0; padding: 0; border: none; background: transparent; cursor: zoom-out; } .lightbox__content { position: relative; z-index: 1; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; } .lightbox__image { display: block; max-width: 90vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); } .lightbox__close, .lightbox__nav { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: var(--color-white); text-decoration: none; font-size: 22px; font-weight: 500; border: none; cursor: pointer; transition: background var(--motion-duration-fast) var(--motion-ease), transform var(--motion-duration) var(--motion-ease); z-index: 2; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.26); } .lightbox__close { top: 24px; right: 24px; } .lightbox__close:hover { transform: scale(1.06); } .lightbox__nav { top: 50%; transform: translateY(-50%); } .lightbox__nav--prev { left: 24px; } .lightbox__nav--next { right: 24px; } .lightbox__nav:hover { transform: translateY(-50%) scale(1.06); } .lightbox__nav svg, .lightbox__close svg { width: 22px; height: 22px; } .lightbox__counter { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); padding: 8px 16px; background: rgba(255, 255, 255, 0.14); color: var(--color-white); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; z-index: 2; } @media (max-width: 768px) { .lightbox { padding: 12px; } .lightbox__image { max-width: 94vw; max-height: 80vh; } .lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; } .lightbox__nav { width: 40px; height: 40px; } .lightbox__nav--prev { left: 8px; } .lightbox__nav--next { right: 8px; } .lightbox__counter { top: 12px; font-size: 13px; } }