/* ══════════════════════════════════════════════════════════════ PHOTO LIGHTBOX (869egbcc1) — full-viewport fullscreen photo viewer, reused by every clickable photo on the homepage: hero cinema slides and the featured/category/chassis photo grids. (The closing full-bleed photo section this originally also covered was removed site-wide by 869egbckn.) Portaled to by Lightbox.tsx so it always sits above the page's own stacking contexts. ══════════════════════════════════════════════════════════════ */ .bi-photo-lightbox { position: fixed; inset: 0; /* Above everything else on the site, including the 9999 scroll progress indicator and the tour spotlight (main.css/tour.css). */ z-index: 10000; display: flex; align-items: center; justify-content: center; background: hsl(var(--bg-hsl) / .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: zoom-out; padding: clamp(16px, 4vw, 48px); animation: bi-photo-lightbox-fade-in 220ms ease both; } @keyframes bi-photo-lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bi-photo-lightbox { animation: none; } } .bi-photo-lightbox__figure { position: relative; max-width: 100%; max-height: 100%; margin: 0; cursor: default; display: flex; flex-direction: column; align-items: center; } .bi-photo-lightbox__img { display: block; max-width: 100%; max-height: calc(100svh - clamp(96px, 14vw, 160px)); width: auto; height: auto; object-fit: contain; border: 1px solid hsl(var(--gold-hsl) / .18); box-shadow: 0 24px 80px hsl(var(--bg-hsl) / .8); } .bi-photo-lightbox__caption { margin-top: 16px; font-family: var(--f-label), 'Inter', system-ui, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--fg-hsl) / .72); text-align: center; } .bi-photo-lightbox__close, .bi-photo-lightbox__arrow { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--fg); background: hsl(var(--bg-hsl) / .5); border: 1px solid hsl(var(--gold-hsl) / .3); border-radius: 0; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .bi-photo-lightbox__close:hover, .bi-photo-lightbox__arrow:hover { color: var(--gold); border-color: var(--gold); } .bi-photo-lightbox__close:focus-visible, .bi-photo-lightbox__arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .bi-photo-lightbox__close { top: clamp(14px, 2.5vw, 28px); right: clamp(14px, 2.5vw, 28px); width: 44px; height: 44px; font-size: 28px; line-height: 1; } .bi-photo-lightbox__arrow { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; line-height: 1; } .bi-photo-lightbox__arrow--left { left: clamp(10px, 2.5vw, 32px); } .bi-photo-lightbox__arrow--right { right: clamp(10px, 2.5vw, 32px); } .bi-photo-lightbox__counter { position: absolute; bottom: clamp(14px, 3vw, 32px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 14px; color: hsl(var(--fg-hsl) / .7); } @media (max-width: 640px) { .bi-photo-lightbox__arrow { width: 40px; height: 40px; font-size: 24px; } .bi-photo-lightbox__close { width: 38px; height: 38px; font-size: 22px; } .bi-photo-lightbox__arrow--left { left: 6px; } .bi-photo-lightbox__arrow--right { right: 6px; } } /* ══════════════════════════════════════════════════════════════ PHOTO EXPAND AFFORDANCE — small corner button layered on photos that live inside a card link (featured types, category grid, featured chassis dossiers). The card keeps navigating normally on click; this button — and a plain click anywhere else on the photo itself — opens the same Lightbox instead of following the link. ══════════════════════════════════════════════════════════════ */ .bi-photo-expand { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--fg); background: hsl(var(--bg-hsl) / .5); border: 1px solid hsl(var(--gold-hsl) / .32); border-radius: 0; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease; cursor: zoom-in; } .bi-photo-expand svg { width: 16px; height: 16px; } .bi-photo-expand:hover { color: var(--gold); border-color: var(--gold); } .bi-photo-expand:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .bi-feat-card:hover .bi-photo-expand, .bi-feat-card:focus-within .bi-photo-expand { opacity: 1; transform: translateY(0); } /* Touch devices have no hover — keep the affordance visible so it stays discoverable without a pointer. */ @media (hover: none) { .bi-photo-expand { opacity: .82; } } /* Discoverability cursor on the clickable photo areas themselves. Scoped to `.bi-photo-clickable` (added in JSX only when there's actually an image to expand) rather than the bare card-photo classes, since those classes still render for empty/placeholder tiles that have no onClick handler. */ .bi-hero-cinema__sequence, .bi-photo-clickable { cursor: zoom-in; }