/* LIGHTBOX — full-screen viewer for the photos in #espacios */ .lb-trigger { cursor: zoom-in; } .lb { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 56px 24px 32px; background: rgba(14, 14, 14, 0.96); opacity: 0; visibility: hidden; /* visibility is stepped, not eased. Opening must flip it to visible in the same tick the class lands, because JS focuses the close button immediately afterwards and a visibility:hidden element cannot take focus — focus() becomes a silent no-op and keyboard users are stranded on . Closing delays the flip by the fade duration so the exit animation is still seen. */ transition: opacity .18s ease, visibility 0s linear .18s; } .lb.open { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s linear 0s; } /* The image is capped by both axes so a tall floor plan and a wide photo are both fully visible without scrolling. */ .lb-figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; margin: 0; } .lb-img { display: block; max-width: min(1200px, 92vw); max-height: 78vh; width: auto; height: auto; object-fit: contain; background: var(--black); } .lb-caption { font-family: var(--font-sans); font-size: 13px; letter-spacing: .3px; color: rgba(255, 255, 255, 0.75); text-align: center; } .lb-count { color: rgba(255, 255, 255, 0.4); margin-left: 10px; } .lb-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--white); font-size: 20px; cursor: pointer; transition: background .15s, border-color .15s; } .lb-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); } .lb-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .lb-close { top: 16px; right: 16px; } .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); } .lb-next { right: 16px; top: 50%; transform: translateY(-50%); } .lb-prev[hidden], .lb-next[hidden] { display: none; } /* Stop the page behind from scrolling while the viewer is open. */ body.lb-lock { overflow: hidden; } @media (max-width: 600px) { .lb { padding: 52px 12px 24px; } .lb-img { max-width: 96vw; max-height: 70vh; } .lb-btn { width: 40px; height: 40px; } .lb-prev { left: 8px; } .lb-next { right: 8px; } } @media (prefers-reduced-motion: reduce) { .lb { transition: none; } }