/** * Artwork lightbox overlay. Appended to , outside the theme's content, * so it uses plain CSS rather than Tailwind utilities. */ .wa-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(23, 23, 23, 0.95); } .wa-lightbox[hidden] { display: none; } .wa-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; max-width: 92vw; } .wa-lightbox__img { display: block; max-width: 92vw; max-height: 82vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .wa-lightbox__cap { color: #d4d4d4; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } .wa-lightbox__counter { color: #a3a3a3; font-size: 11px; letter-spacing: 0.16em; } .wa-lightbox__counter[hidden] { display: none; } .wa-lightbox__close, .wa-lightbox__nav { position: absolute; color: #fff; background: none; border: 0; cursor: pointer; line-height: 1; opacity: 0.8; transition: opacity 0.2s ease; } .wa-lightbox__close:hover, .wa-lightbox__nav:hover { opacity: 1; } .wa-lightbox__close { top: 1.25rem; right: 1.5rem; font-size: 2rem; } .wa-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 0.5rem 1.25rem; } .wa-lightbox__prev { left: 0.5rem; } .wa-lightbox__next { right: 0.5rem; } .wa-lightbox__nav[hidden] { display: none; }