/* Skin Suite v7 — pinch-zoom lightbox (Warren bug-fix 2026-05-05). Tap a v7 photo to open a fullscreen viewer that supports pinch-zoom on mobile + scroll-wheel zoom on desktop. Self-contained: no library deps. */ /* ============ TAP-TO-EXPAND HINT ON THE PHOTO ITSELF ============ */ /* The hint sits in the top-right corner of every .v7-photo. CSS-only icon (two arrows pointing outward) so we don't need an SVG dependency. */ .v7-photo { cursor: zoom-in; } .v7-photo .v7-zoom-hint { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); z-index: 4; } .v7-photo .v7-zoom-hint::before { /* unicode "search/magnifier" — works without an icon font */ content: "\2922"; /* up-right + down-left arrows */ font-size: 16px; line-height: 1; font-weight: 700; } /* ============ FULLSCREEN LIGHTBOX OVERLAY ============ */ .v7-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.94); display: flex; align-items: center; justify-content: center; /* Allow native pinch-zoom on the lightbox surface (iOS + Android). */ touch-action: pinch-zoom; overflow: hidden; /* Hidden by default; .open adds it to the DOM and we transition opacity. */ opacity: 0; transition: opacity 0.18s ease-out; } .v7-lightbox.v7-lightbox-open { opacity: 1; } .v7-lightbox .v7-lightbox-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; /* The image inside transforms — keep the stage transform-friendly. */ overflow: hidden; /* User-select none so a long-press doesn't fire a text selection. */ user-select: none; -webkit-user-select: none; } .v7-lightbox .v7-lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; /* JS sets transform: translate() scale() — keep the origin centered. */ transform-origin: center center; transition: transform 0.12s ease-out; will-change: transform; /* Disable browser image drag interaction so it doesn't fight our pan. */ -webkit-user-drag: none; user-drag: none; pointer-events: auto; } .v7-lightbox .v7-lightbox-img.v7-no-anim { transition: none; } /* Close button — top-right, big enough for a thumb. */ .v7-lightbox .v7-lightbox-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; /* Bypass touch-action on the close button so a single tap always works. */ touch-action: manipulation; } .v7-lightbox .v7-lightbox-close:hover, .v7-lightbox .v7-lightbox-close:focus { background: rgba(255, 255, 255, 0.3); outline: none; } /* Caption + zoom hint at the bottom. */ .v7-lightbox .v7-lightbox-caption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: #ddd; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); z-index: 2; } /* When the lightbox is open, lock body scrolling. JS adds .v7-lightbox-locked to . body-level rule, no override conflict so plain `hidden` wins. */ body.v7-lightbox-locked { overflow: hidden; position: fixed; width: 100%; } html.v7-lightbox-locked { overflow: hidden; } /* On very narrow phones, give the close button a bit more room from the edge. */ @media (max-width: 380px) { .v7-lightbox .v7-lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; } }