/** * MLS Genie photo viewer. * * Shared by Luxury Listings and the MLS Genie listing template. Behaviour * lives in luxury-listing-public.js; these are its presentation rules, moved * here out of the magazine showcase stylesheet so a second surface could use * the viewer without dragging a whole showcase layout along with it. * * Class names still read mlsg-lux-* because the markup contract and the * JavaScript that builds it are unchanged. Renaming them is queued with the * wider viewer extraction, and is not worth a live regression on its own. */ /* Gallery lightbox — built by luxury-listing-public.js, appended to once on first open. Deliberately a neutral near-black stage (not the customizable --mlsg-lux-ink token) since that's the correct backdrop for photo viewing regardless of a listing's chosen palette; the gold accent ties the counter/caption back to the site's own look. */ .mlsg-lux-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; } .mlsg-lux-lightbox[hidden] { display: none; } .mlsg-lux-lightbox.is-open { opacity: 1; } .mlsg-lux-lightbox__backdrop { position: absolute; inset: 0; background: rgba(8,8,7,0.96); } /* Stage grows to fill nearly the whole viewport while zoomed (was capped at 88vw/76vh always) — animated alongside the image's own transform so "zoom" reads as the photo expanding to fill the screen, not just scaling up inside a small fixed frame. overflow switches to visible so the enlarged image is never clipped by the stage's own box. */ .mlsg-lux-lightbox__stage { position: relative; z-index: 1; max-width: 88vw; max-height: 76vh; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; aspect-ratio: 6 / 4; transition: max-width .35s cubic-bezier(.22,1,.36,1), max-height .35s cubic-bezier(.22,1,.36,1); } .mlsg-lux-lightbox__stage.is-zoomed { max-width: 98vw; max-height: 98vh; overflow: visible; } .mlsg-lux-lightbox__img { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0 20px 60px rgba(0,0,0,0.5); opacity: 1; transition: opacity .2s ease, transform .35s cubic-bezier(.22,1,.36,1); touch-action: none; cursor: zoom-in; } .mlsg-lux-lightbox__img.is-loading { opacity: 0; } .mlsg-lux-lightbox__img.is-zoomed { cursor: grab; } /* Only suppress the transition while a pan drag is actively in progress (added on drag-start, removed on drag-end) — NOT for the whole zoomed state, otherwise the zoom-in/out itself would never animate, just snap. That distinction is the whole fix here. */ .mlsg-lux-lightbox__img.is-panning { transition: none; } /* Chrome (caption/counter, thumbnail strip, prev/next arrows) fades out while zoomed so the photo genuinely fills the viewport without clutter — toolbar (zoom/slideshow/fullscreen/close) stays, since that's still needed to get back out. */ .mlsg-lux-lightbox__footer, .mlsg-lux-lightbox__strip, .mlsg-lux-lightbox__nav { transition: opacity .25s ease; } .mlsg-lux-lightbox.is-zoomed .mlsg-lux-lightbox__footer, .mlsg-lux-lightbox.is-zoomed .mlsg-lux-lightbox__strip, .mlsg-lux-lightbox.is-zoomed .mlsg-lux-lightbox__nav { opacity: 0; pointer-events: none; } .mlsg-lux-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); backdrop-filter: blur(6px); color:var(--mlsg-on-brand); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; transition: background .2s ease, transform .2s ease, opacity .25s ease; } .mlsg-lux-lightbox__nav:hover { background: rgba(255,255,255,0.18); } .mlsg-lux-lightbox__nav--prev { left: 20px; } .mlsg-lux-lightbox__nav--next { right: 20px; } /* Toolbar — replaces the old standalone close button. One row of equally-styled icon buttons, top-right: zoom, slideshow, full screen, close (same grouping/order as the Houzez theme's own Fancybox-based lightbox, reimplemented natively here rather than adopting Fancybox itself — Fancybox requires a paid commercial license for use in a product sold to clients, which this is). */ .mlsg-lux-lightbox__toolbar { position: absolute; top: 20px; right: 20px; z-index: 3; display: flex; gap: 10px; } .mlsg-lux-lightbox__tool { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); backdrop-filter: blur(6px); color:var(--mlsg-on-brand); display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; transition: background .2s ease; } .mlsg-lux-lightbox__tool:hover { background: rgba(255,255,255,0.18); } .mlsg-lux-lightbox__footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; padding: 20px 80px; color:var(--mlsg-on-brand); background: rgba(0, 0, 0, 0.5); } .mlsg-lux-lightbox__caption { margin: 0 0 6px; font-size: 1.05rem; font-family: Georgia, 'Times New Roman', serif; } .mlsg-lux-lightbox__caption[hidden] { display: none; } .mlsg-lux-lightbox__counter { font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mlsg-lux-gold); } .mlsg-lux-lightbox__strip { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2; display: flex; gap: 8px; justify-content: flex-start; overflow-x: auto; padding: 0 24px; max-width: 100%; box-sizing: border-box; scroll-behavior: smooth; } .mlsg-lux-lightbox__thumb { flex: 0 0 auto; width: 64px; height: 44px; padding: 0; cursor: pointer; border: 2px solid transparent; border-radius: 6px; overflow: hidden; opacity: .55; transition: opacity .2s ease, border-color .2s ease; background: #000; } .mlsg-lux-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mlsg-lux-lightbox__thumb:hover { opacity: .85; } .mlsg-lux-lightbox__thumb.is-active { opacity: 1; border-color: var(--mlsg-lux-gold); } body.mlsg-lux-lightbox-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .mlsg-lux-lightbox, .mlsg-lux-lightbox__img, .mlsg-lux-lightbox__stage { transition: none; } } @media (max-width: 640px) { .mlsg-lux-lightbox__footer { bottom: 0; padding: 15px 60px; } .mlsg-lux-lightbox__nav { width: 42px; height: 42px; font-size: 0.95rem; } .mlsg-lux-lightbox__nav--prev { left: 10px; } .mlsg-lux-lightbox__nav--next { right: 10px; } .mlsg-lux-lightbox__strip { display: none; } .mlsg-lux-lightbox__toolbar { top: 12px; right: 12px; gap: 6px; } .mlsg-lux-lightbox__tool { width: 38px; height: 38px; font-size: 0.9rem; } }