/* * gallery.css — Meraki shared gallery component * ───────────────────────────────────────────── * Used by: haven-III.html, nirvana.html, and any future project page. * * Required HTML skeleton on each page: * * * * * * * * *
*
* ... *
*
* *
*
* *
* * * * * * */ /* ── Filter tabs ─────────────────────────────────────────────────────────── */ .gal-filter { position: relative; padding-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #9ca3af; background: none; border: none; cursor: pointer; transition: color .25s; } .gal-filter::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #0B1C2E; transition: width .3s ease; } .gal-filter:hover { color: #0B1C2E; } .gal-filter:hover::after { width: 100%; } .gal-filter.active { color: #0B1C2E; } .gal-filter.active::after { width: 100%; } /* ── Gallery items ───────────────────────────────────────────────────────── */ .gal-item { transition: opacity .4s ease, transform .4s ease; cursor: pointer; } .gal-item.hidden { opacity: 0; transform: scale(.96); pointer-events: none; position: absolute; visibility: hidden; } .gal-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .gal-item:hover img { transform: scale(1.06); } /* Dark gradient overlay (bottom label) */ .gal-item .gal-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,28,46,.75) 0%, rgba(11,28,46,0) 60%); opacity: 0; transition: opacity .35s ease; display: flex; align-items: flex-end; padding: 18px 20px; } .gal-item:hover .gal-overlay { opacity: 1; } /* Centred zoom icon */ .gal-item .gal-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s ease; } .gal-item:hover .gal-zoom { opacity: 1; } /* ── Lightbox ────────────────────────────────────────────────────────────── */ #gal-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(7, 16, 26, .96); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; } #gal-lightbox.open { opacity: 1; pointer-events: all; } #gal-lightbox .lb-img-wrap { position: relative; max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; } #lb-img { max-width: 90vw; max-height: 82vh; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 64px rgba(0,0,0,.7); transition: opacity .25s ease; } #lb-img.fading { opacity: 0; } /* Prev / Next buttons */ .lb-btn { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(197,179,154,.12); border: 1px solid rgba(197,179,154,.3); color: #c5b39a; width: 52px; height: 52px; border-radius: 50%; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; z-index: 10001; } .lb-btn:hover { background: rgba(197,179,154,.28); border-color: rgba(197,179,154,.6); } #lb-prev { left: 20px; } #lb-next { right: 20px; } /* Close button */ #lb-close { position: fixed; top: 20px; right: 24px; background: rgba(197,179,154,.12); border: 1px solid rgba(197,179,154,.3); color: #c5b39a; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 10001; } #lb-close:hover { background: rgba(197,179,154,.28); } /* Caption + counter */ #lb-counter { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(197,179,154,.8); font-size: 13px; letter-spacing: .12em; font-family: sans-serif; } #lb-caption { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: 13px; letter-spacing: .08em; font-family: sans-serif; white-space: nowrap; }