/* ========================================================== brand-kit-showcase.css — Featured Showcase Gallery A reusable, modular "hero stage + thumbnail rail" viewer for case-study brand/visual assets (logos, stationery, mockups, screenshots). Drop-in for any number of future case studies — see the HTML comment above each .brand-showcase block in portfolio.html for how to duplicate it. ========================================================== */ .brand-showcase { display: flex; flex-direction: column; gap: var(--sp-md); } /* ── Stage (center-stage hero image) ─────────────────────── */ .showcase-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 640px; overflow: hidden; border-radius: var(--r-md); border: 1px solid rgba(var(--green-rgb), 0.14); background: var(--grey-1); display: flex; align-items: center; justify-content: center; } .showcase-stage-img { width: 100%; height: 100%; object-fit: contain; background: var(--black); cursor: zoom-in; opacity: 1; transition: opacity 0.25s ease-out; } .showcase-stage-img.is-swapping { opacity: 0; } /* Prev / next arrow controls */ .showcase-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; color: var(--white); background: rgba(26, 28, 27, 0.55); border: 1px solid rgba(var(--green-rgb), 0.25); border-radius: var(--r-full); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); z-index: 2; } .showcase-arrow:hover, .showcase-arrow:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--black); } .showcase-arrow--prev { left: var(--sp-sm); } .showcase-arrow--next { right: var(--sp-sm); } /* Hide arrows entirely when a gallery only has one asset (toggled by script/portfolio.js via this modifier class) */ .brand-showcase.is-single .showcase-arrow, .brand-showcase.is-single .showcase-thumbs { display: none; } /* Caption overlay */ .showcase-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-md); background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); z-index: 1; pointer-events: none; } .showcase-caption-fig { font-size: 0.65rem; letter-spacing: 0.25em; color: var(--color-accent); } .showcase-caption-text { font-size: var(--size-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--white); } /* ── Thumbnail rail ──────────────────────────────────────── */ .showcase-thumbs { display: flex; gap: var(--sp-xs); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: rgba(var(--green-rgb), 0.35) transparent; } .showcase-thumbs::-webkit-scrollbar { height: 6px; } .showcase-thumbs::-webkit-scrollbar-thumb { background: rgba(var(--green-rgb), 0.35); border-radius: var(--r-full); } .showcase-thumb { flex: 0 0 auto; width: 84px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--color-border); background: var(--grey-1); opacity: 0.55; cursor: pointer; transition: opacity var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .showcase-thumb img { width: 100%; height: 100%; object-fit: cover; } .showcase-thumb:hover { opacity: 0.85; transform: translateY(-2px); } .showcase-thumb.is-active { opacity: 1; border-color: var(--color-accent); box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.35); } .showcase-thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ── Fullscreen zoom (click the stage image) ──────────────── Built by script/portfolio.js as a dedicated backdrop + image pair appended straight to . It deliberately does NOT reuse/promote the in-place stage — an ancestor further up the case-study markup creates its own stacking context, which would cap the promoted image's z-index and trap it behind the backdrop no matter how high z-index was set. */ .showcase-zoom-backdrop { position: fixed; inset: 0; z-index: 1999; background: rgba(10, 11, 10, 0.92); opacity: 0; pointer-events: none; transition: opacity 0.25s ease-out; display: flex; align-items: center; justify-content: center; padding: var(--sp-lg); } .showcase-zoom-backdrop.is-visible { opacity: 1; pointer-events: all; } .showcase-zoom-img { z-index: 2000; width: auto; height: auto; max-width: 90vw; max-height: 90vh; cursor: zoom-out; border-radius: var(--r-md); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); opacity: 0; transform: scale(0.96); transition: opacity 0.2s ease-out, transform 0.2s ease-out; } .showcase-zoom-backdrop.is-visible .showcase-zoom-img { opacity: 1; transform: scale(1); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 768px) { .showcase-stage { aspect-ratio: 4 / 3; max-height: 420px; } .showcase-arrow { width: 36px; height: 36px; font-size: 1.2rem; } .showcase-thumb { width: 64px; } }