/* ============================================================ Click-to-expand image lightbox (Substack-style) Two pieces, both injected by lightbox.js into : - .zoom-cue — a plus button that floats over the top-right corner of the hovered image (position tracked per-frame in JS, so no per-image DOM wrapping and it follows the moving carousel reels). - .zoom-overlay — the full-screen viewer: X (top-left), save (top-right), the image centred. ============================================================ */ /* Plain (non-link, non-carousel) images get a zoom-in affordance. */ main img.is-zoomable { cursor: zoom-in; } /* ── Hover cue ─────────────────────────────────────────────── */ .zoom-cue { position: fixed; z-index: 95; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0.5px solid rgba(204, 196, 188, 0.25); border-radius: 8px; background: rgba(4, 4, 4, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text-primary); cursor: pointer; opacity: 0; transform: scale(0.9); transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease; /* Inert until positioned + faded in, so the invisible button can't intercept a stray click in the top-left corner. */ pointer-events: none; } .zoom-cue[hidden] { display: none; } .zoom-cue.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; } .zoom-cue:hover { color: var(--pink); border-color: rgba(191, 45, 85, 0.6); } .zoom-cue svg { width: 16px; height: 16px; } /* ── Full-screen overlay ───────────────────────────────────── */ .zoom-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 64px 24px; background: rgba(4, 4, 4, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.22s ease; overscroll-behavior: contain; } .zoom-overlay[hidden] { display: none; } .zoom-overlay.is-open { opacity: 1; } .zoom-img { max-width: 92vw; max-height: calc(100vh - 128px); width: auto; height: auto; object-fit: contain; display: block; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); transform: scale(0.985); transition: transform 0.22s ease; cursor: default; } .zoom-overlay.is-open .zoom-img { transform: scale(1); } /* Top-corner controls */ .zoom-btn { position: fixed; top: 20px; z-index: 1001; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0.5px solid rgba(204, 196, 188, 0.22); border-radius: 10px; background: rgba(4, 4, 4, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text-primary); cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .zoom-btn:hover { color: var(--pink); border-color: rgba(191, 45, 85, 0.6); background: rgba(4, 4, 4, 0.7); } .zoom-btn svg { width: 20px; height: 20px; } .zoom-close { left: 20px; } .zoom-save { right: 20px; } @media (max-width: 767px) { .zoom-overlay { padding: 56px 12px; } .zoom-img { max-width: 96vw; max-height: calc(100vh - 112px); } .zoom-btn { top: 14px; } .zoom-close { left: 14px; } .zoom-save { right: 14px; } } @media (prefers-reduced-motion: reduce) { .zoom-cue, .zoom-overlay, .zoom-img { transition: none; } }