/** * Meridian lightbox (handle: meridian-el-lightbox). * * July 2026 redesign restyle (redesign-2026-07-contract.md): dark editorial * gallery — near-black backdrop rgba(15,13,10,.94) over everything (header is * z-index 900), image centered at max 84vw × 78vh, small-caps counter top-left, * hairline-circle controls (white, gold on hover), caption pinned bottom-center * so differently-sized images never shift it. * * JS contract (init.js/lightbox module): [data-m-lightbox] is only a TRIGGER * attribute on in-page galleries (hotel hero figure, gallery strip) — it must * NOT receive overlay styling or those elements vanish. The JS builds a * separate `.m-lightbox` overlay appended to with EXACTLY these inner * classes: __counter, __close, __prev, __next, __figure > __img + __caption. * State: `is-open` on the root; `is-live` re-applied to __img on each image * swap to restart the fade/scale animation. Body scroll locked via * body.m-no-scroll (style.css). Selectors here must match buildLightbox() / * renderLightbox() in js/src/init.js — keep the two in sync. * * @package Meridian * @license GPL-3.0-or-later */ .m-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background-color: rgba(15, 13, 10, 0.94); opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 0s linear 250ms; } .m-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 250ms ease; } /* Counter — "2 / 4", small caps letterspaced, white/60, 24px inset. */ .m-lightbox__counter { position: absolute; top: 24px; left: 24px; font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } /* Controls — 44px hairline circles, white glyphs, gold on hover/focus. */ .m-lightbox__close, .m-lightbox__prev, .m-lightbox__next { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: #fff; cursor: pointer; transition: color 250ms ease, border-color 250ms ease; } .m-lightbox__close:hover, .m-lightbox__prev:hover, .m-lightbox__next:hover, .m-lightbox__close:focus-visible, .m-lightbox__prev:focus-visible, .m-lightbox__next:focus-visible { color: var(--lhr-gold, #a9885a); border-color: var(--lhr-gold, #a9885a); } .m-lightbox__close:focus-visible, .m-lightbox__prev:focus-visible, .m-lightbox__next:focus-visible { outline: 2px solid var(--lhr-gold-soft, #cbb48d); outline-offset: 2px; } .m-lightbox__close { top: 24px; right: 24px; font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif); font-size: 24px; font-weight: 300; line-height: 1; } .m-lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); } .m-lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); } .m-lightbox__prev svg, .m-lightbox__next svg { width: 18px; height: 18px; display: block; } /* Stage — image centered both axes; the figure shrinks to its content so backdrop clicks (event.target === root) still land on the root. */ .m-lightbox__figure { margin: 0; display: flex; align-items: center; justify-content: center; } .m-lightbox__img { display: block; width: auto; height: auto; max-width: 84vw; max-height: 78vh; object-fit: contain; } /* Fade/scale-in, restarted by init.js on every image swap. */ .m-lightbox__img.is-live { animation: m-lightbox-in 250ms ease; } @keyframes m-lightbox-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } } /* Caption — sans 14px white/75, pinned bottom-center of the overlay (not in flow) so image-size changes cause no layout jump. */ .m-lightbox__caption { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); margin: 0; max-width: 84vw; text-align: center; font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); } @media (prefers-reduced-motion: reduce) { .m-lightbox, .m-lightbox.is-open, .m-lightbox__close, .m-lightbox__prev, .m-lightbox__next { transition: none; } .m-lightbox__img.is-live { animation: none; } }