/* Presentation for the global image lightbox. Behaviour lives in lightbox.js; this file only draws the overlay it builds. Colours are hardcoded rather than drawn from the --bg/--text tokens in whitepapers/styles.css, because this file also loads on the Next homepage, which does not load that stylesheet. Both surfaces do load nav.css, so --font-sans is safe to use. */ img[alt]:not([alt=""]) { cursor: zoom-in; } .lightbox-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: rgba(8, 8, 8, 0.92); cursor: zoom-out; } .lightbox-overlay[hidden] { display: none; } .lightbox-figure { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; cursor: default; } .lightbox-image { display: block; max-width: 92vw; max-height: 82vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } .lightbox-caption { margin: 14px 0 0; max-width: 640px; color: rgba(255, 255, 255, 0.7); font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: 0.875em; line-height: 1.5; text-align: center; } .lightbox-close { position: fixed; top: 20px; right: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); } /* Set on while the overlay is open, so the page behind it cannot scroll along with it. */ html.lightbox-open { overflow: hidden; } @media (max-width: 640px) { .lightbox-overlay { padding: 72px 16px 24px; } .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 22px; } }