/* gallery.css — portfolio category filter + lightbox. Loaded on the portfolio page only (base.html keeps the other pages lean). Monochrome, design-system tokens only. The one literal is the lightbox overlay tint, derived from --ink (#141414 -> 20,20,20). */ /* --- Filter bar --------------------------------------------------------- */ /* Hidden until JS adds `.js` to (no-JS users get the full grid). */ .filters { display: none; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); } .js .filters { display: flex; } .filter { font-family: var(--font-sans); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); padding: var(--space-2) var(--space-4); background: transparent; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .filter:hover { color: var(--ink); border-color: var(--line-strong); } .filter.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* --- Tiles -------------------------------------------------------------- */ /* The wraps the existing responsive ; it is the grid child now. */ .tile { display: block; } .tile.is-hidden { display: none; } .tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* --- Lightbox ----------------------------------------------------------- */ .lightbox { width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(20, 20, 20, 0.97); color: var(--bg); } .lightbox::backdrop { background: rgba(20, 20, 20, 0.9); } .lb-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80vh; margin: 0; } /* Clipping viewport: panzoom transforms the inside this box, so zoom/pan stays contained (no page overflow) and bounds clamp against this element. */ .lb-viewport { display: flex; align-items: center; justify-content: center; width: 92vw; height: 74vh; overflow: hidden; } .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: none; /* let panzoom own touch gestures */ cursor: grab; } .lb-caption { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--bg); padding-top: var(--space-3); text-align: center; min-height: 1.5em; } .lb-prev, .lb-next, .lb-close { position: fixed; background: none; border: 0; color: var(--bg); cursor: pointer; line-height: 1; padding: var(--space-3); opacity: 0.7; transition: opacity var(--dur-fast) var(--ease); } .lb-prev:hover, .lb-next:hover, .lb-close:hover { opacity: 1; } .lb-prev:focus-visible, .lb-next:focus-visible, .lb-close:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; opacity: 1; } .lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 3rem; } .lb-prev { left: var(--space-2); } .lb-next { right: var(--space-2); } .lb-close { top: var(--space-2); right: var(--space-2); font-size: 2rem; } .lb-prev[hidden], .lb-next[hidden] { display: none; } /* --- Filmstrip ---------------------------------------------------------- */ .lb-strip { display: flex; gap: var(--space-2); justify-content: flex-start; overflow-x: auto; padding: var(--space-3); max-width: 92vw; margin: 0 auto; } .lb-strip button { flex: 0 0 auto; padding: 0; background: none; border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; opacity: 0.55; transition: opacity var(--dur-fast) var(--ease); } .lb-strip button:hover, .lb-strip button.is-active { opacity: 1; } .lb-strip button.is-active { border-color: var(--bg); } .lb-strip button:focus-visible { outline: 2px solid var(--bg); outline-offset: 1px; opacity: 1; } .lb-strip img { display: block; width: 72px; height: 54px; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .filter, .lb-prev, .lb-next, .lb-close, .lb-strip button, .grid img { transition: none; } }