/* ============================================================ Premium image zoom lightbox — applies to ANY inside an element marked .img-zoomable, OR inside a .leciel-slide. Cinematic Apple-style dark glass backdrop, buttery motion. ============================================================ */ /* Lock body scroll while zoom is open */ body.img-zoom-locked { overflow: hidden; touch-action: none; } /* The overlay is appended to by the JS. */ .img-zoom-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(6, 14, 12, 0.78); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); touch-action: pinch-zoom; overscroll-behavior: contain; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); } .img-zoom-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } /* The cloned image — fit inside the viewport, preserve aspect, allow zoom-in. */ .img-zoom-overlay img.img-zoom-clone { display: block; max-width: min(96vw, 1400px); max-height: 84vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35); transform: scale(0.96); opacity: 0; transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); cursor: zoom-out; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; } .img-zoom-overlay.is-visible img.img-zoom-clone { transform: scale(1); opacity: 1; } /* Optional caption (overlaid at the bottom of the image) */ .img-zoom-overlay .img-zoom-caption { position: absolute; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif); font-size: 14px; font-weight: 400; font-style: italic; color: rgba(245, 239, 228, 0.78); letter-spacing: 0.01em; padding: 0 24px; opacity: 0; transition: opacity 0.4s ease 0.1s; pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .img-zoom-overlay.is-visible .img-zoom-caption { opacity: 1; } /* Tag badge (e.g. "FACHADA MARINA") — mirrors the gallery label */ .img-zoom-overlay .img-zoom-tag { position: absolute; top: calc(24px + env(safe-area-inset-top, 0px)); left: 50%; transform: translate(-50%, -6px); display: inline-flex; align-items: center; padding: 8px 18px; background: rgba(232, 222, 200, 0.94); color: #061914; border-radius: 999px; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.4s ease 0.08s, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); pointer-events: none; } .img-zoom-overlay.is-visible .img-zoom-tag { opacity: 1; transform: translate(-50%, 0); } /* Close button — premium glass pill, top-right */ .img-zoom-overlay .img-zoom-close { position: absolute; top: calc(20px + env(safe-area-inset-top, 0px)); right: calc(20px + env(safe-area-inset-right, 0px)); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #f5efe4; border-radius: 50%; cursor: pointer; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); transition: background 0.2s ease, transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s ease; opacity: 0; transition: opacity 0.4s ease 0.12s, background 0.2s ease, transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1); } .img-zoom-overlay.is-visible .img-zoom-close { opacity: 1; } .img-zoom-overlay .img-zoom-close:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); } .img-zoom-overlay .img-zoom-close:active { transform: scale(0.92); } /* Hint at the bottom of the screen */ .img-zoom-overlay .img-zoom-hint { position: absolute; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); text-align: center; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 239, 228, 0.45); opacity: 0; transition: opacity 0.4s ease 0.18s; pointer-events: none; user-select: none; } .img-zoom-overlay.is-visible .img-zoom-hint { opacity: 1; } /* Counter badge — bottom-left, "1 / 18" */ .img-zoom-overlay .img-zoom-counter { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: calc(24px + env(safe-area-inset-left, 0px)); display: inline-flex; align-items: center; padding: 7px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); color: rgba(245, 239, 228, 0.92); border-radius: 999px; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); opacity: 0; pointer-events: none; transition: opacity 0.4s ease 0.14s; } .img-zoom-overlay.is-visible .img-zoom-counter { opacity: 1; } /* Prev / next nav buttons in the lightbox */ .img-zoom-overlay .img-zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #f5efe4; border-radius: 50%; cursor: pointer; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); opacity: 0; transition: opacity 0.4s ease 0.16s, background 0.2s ease, border-color 0.2s ease, transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1); } .img-zoom-overlay.is-visible .img-zoom-nav { opacity: 1; } .img-zoom-overlay .img-zoom-nav:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); } .img-zoom-overlay .img-zoom-nav:active { transform: translateY(-50%) scale(0.92); } .img-zoom-overlay .img-zoom-nav.prev { left: calc(20px + env(safe-area-inset-left, 0px)); } .img-zoom-overlay .img-zoom-nav.next { right: calc(20px + env(safe-area-inset-right, 0px)); } .img-zoom-overlay .img-zoom-nav[disabled] { opacity: 0.3 !important; cursor: default; pointer-events: none; } /* When the source gallery uses .leciel-slide, give a tactile zoom-in cursor */ .leciel-slide img, .leciel-thumb img { cursor: zoom-in; -webkit-user-drag: none; } .leciel-slide:hover img, .leciel-thumb:hover img { /* keep crisp; we just signal interactivity */ filter: none; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .img-zoom-overlay, .img-zoom-overlay img.img-zoom-clone, .img-zoom-overlay .img-zoom-close, .img-zoom-overlay .img-zoom-nav { transition-duration: 0.001ms !important; } } /* Mobile-specific: hide the prev/next nav buttons (we keep swipe-friendly interaction, but on small viewports the X and the image suffice). */ @media (max-width: 640px) { .img-zoom-overlay .img-zoom-nav { width: 44px; height: 44px; opacity: 0.85; } .img-zoom-overlay img.img-zoom-clone { max-width: 100vw; max-height: 70vh; border-radius: 8px; } }