/* =========================================================================== EmEx — lightbox (popup image carousel). The dialog is appended to , outside .emex-sd-page, so the Something Different stylesheet's custom properties do not reach it. The values below are that sheet's own tokens (navy #1D2A4D, stone #EBE6DF, ink #27272F, orange #B85308) and its font stacks, restated here rather than replaced — no new palette. Item-link rules are generic: any renderer that emits the markup contract gets them. ========================================================================= */ [data-emex-lightbox] a[data-emex-lightbox-item] { display: block; /* pointer, not zoom-in: zoom-in can render as the plain arrow on some setups, which leaves the photo looking unclickable. */ cursor: pointer; border-radius: inherit; } [data-emex-lightbox] a[data-emex-lightbox-item]:focus-visible { outline: 3px solid #B85308; outline-offset: 2px; } .emex-lightbox { --lb-stone: #EBE6DF; --lb-navy: #1D2A4D; --lb-ink: #27272F; --lb-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --lb-label: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--lb-stone); font-family: var(--lb-body); } .emex-lightbox::backdrop { background: rgba(23, 24, 30, .93); } .emex-lightbox__inner { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; padding: 64px 76px; } .emex-lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; max-width: 92vw; transition: opacity .18s ease; /* The swipe surface. Horizontal movement is left to our pointer handlers; without this the browser claims the gesture as a pan and cancels the pointer stream, so no pointerup ever arrives. Vertical pan and pinch-zoom stay native. */ touch-action: pan-y pinch-zoom; } .emex-lightbox__fig.is-loading { opacity: .5; } .emex-lightbox__img { display: block; max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 8px; background: var(--lb-ink); touch-action: pan-y pinch-zoom; /* A native image drag or a text selection would abort the swipe. */ -webkit-user-drag: none; -webkit-user-select: none; user-select: none; } .emex-lightbox__cap { margin: 0; max-width: 62ch; text-align: center; font-size: .95rem; line-height: 1.4; color: var(--lb-stone); } .emex-lightbox__cap[hidden] { display: none; } .emex-lightbox__count { position: absolute; left: 0; right: 0; bottom: 22px; margin: 0; text-align: center; font-family: var(--lb-label); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lb-stone); } .emex-lightbox__count[hidden] { display: none; } /* Controls ---------------------------------------------------------------- */ .emex-lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(235, 230, 223, .38); border-radius: 50%; background: rgba(29, 42, 77, .72); color: var(--lb-stone); font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .emex-lightbox__btn:hover { background: var(--lb-navy); border-color: var(--lb-stone); } .emex-lightbox__btn:focus-visible { outline: 3px solid var(--lb-stone); outline-offset: 3px; } .emex-lightbox__btn[hidden] { display: none; } .emex-lightbox__close { top: 14px; right: 14px; font-size: 1.25rem; } .emex-lightbox__nav { top: 50%; transform: translateY(-50%); } .emex-lightbox__nav--prev { left: 14px; } .emex-lightbox__nav--next { right: 14px; } /* Narrow screens: the navigation sits low so both buttons are under a thumb. */ @media (max-width: 700px) { .emex-lightbox__inner { padding: 64px 12px 104px; } .emex-lightbox__nav { top: auto; bottom: 18px; transform: none; width: 58px; height: 58px; } .emex-lightbox__nav--prev { left: 18px; } .emex-lightbox__nav--next { right: 18px; } .emex-lightbox__count { bottom: 36px; } .emex-lightbox__img { max-height: 70vh; } } /* Page scroll is locked while the dialog is open. */ html.emex-lightbox-open { overflow: hidden; } .emex-lightbox--still .emex-lightbox__fig, .emex-lightbox--still .emex-lightbox__btn { transition: none; } @media (prefers-reduced-motion: reduce) { .emex-lightbox__fig, .emex-lightbox__btn { transition: none; } }