.gallery-page { min-height: 100dvh; background: var(--cream-2); /* Prevent the body from becoming a second scroll container (only scrolls). */ overflow: visible; } .gallery-header { position: relative; display: grid; justify-items: center; gap: 0.45rem; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 5vw, 3rem) 1.25rem; background: var(--cream); border-bottom: 1px solid rgba(28, 122, 129, 0.2); } .gallery-back { position: absolute; top: clamp(1.1rem, 3vw, 2rem); left: clamp(1rem, 4vw, 3rem); color: var(--teal-deep); font-family: var(--brand-alt); font-size: clamp(0.85rem, 2.4vw, 1rem); letter-spacing: 0.04em; text-decoration: none; border-bottom: 1px solid transparent; } .gallery-back:hover, .gallery-back:focus-visible { color: var(--teal); border-color: currentColor; outline: none; } .gallery-logo { width: clamp(94px, 13vw, 135px); height: auto; } .gallery-eyebrow { color: var(--teal-deep); font-family: var(--brand-alt); font-size: clamp(0.75rem, 2.2vw, 0.9rem); letter-spacing: 0.2em; text-transform: uppercase; } .gallery-content { width: min(1200px, 100%); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); } .gallery-content h1, .gallery-intro { color: var(--teal-deep); text-align: center; } .gallery-content h1 { font-family: var(--brand-font); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: normal; line-height: 1.1; } .gallery-intro { margin-top: 0.5rem; font-family: var(--brand-font); font-size: clamp(1rem, 2.4vw, 1.25rem); font-style: italic; } .gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.7rem, 2vw, 1.25rem); margin-top: clamp(1.75rem, 4vw, 3rem); } .gallery-grid a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); box-shadow: 0 6px 18px rgba(17, 83, 89, 0.18); } .gallery-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .gallery-grid a:hover img, .gallery-grid a:focus-visible img { transform: scale(1.04); } .gallery-grid a:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; } @media (max-width: 720px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .gallery-header { padding-top: 3.8rem; } .gallery-back { top: 1.2rem; } } /* ===== Lightbox popup ===== */ body.lightbox-open { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(17, 83, 89, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lightbox-fade 0.25s ease; } .lightbox[hidden] { display: none; } .lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); animation: lightbox-zoom 0.25s ease; } .lightbox-close { position: absolute; top: clamp(0.75rem, 3vw, 1.5rem); right: clamp(0.75rem, 3vw, 1.5rem); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; } .lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(0, 0, 0, 0.6); transform: scale(1.08); outline: none; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; } .lightbox-prev { left: clamp(0.75rem, 3vw, 1.5rem); } .lightbox-next { right: clamp(0.75rem, 3vw, 1.5rem); } .lightbox-nav svg { width: 26px; height: 26px; fill: currentColor; } .lightbox-nav:hover, .lightbox-nav:focus-visible { background: rgba(0, 0, 0, 0.6); outline: none; } .lightbox-prev:hover, .lightbox-prev:focus-visible { transform: translateY(-50%) scale(1.08); } .lightbox-next:hover, .lightbox-next:focus-visible { transform: translateY(-50%) scale(1.08); } @keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes lightbox-zoom { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ===== Back to top button ===== */ .back-to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 900; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: var(--teal); color: #fff; cursor: pointer; box-shadow: 0 8px 18px rgba(28, 122, 129, 0.3); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, visibility 0.25s ease; -webkit-tap-highlight-color: transparent; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover, .back-to-top:focus-visible { background: var(--teal-deep); transform: translateY(-3px); outline: none; } .back-to-top svg { width: 22px; height: 22px; fill: currentColor; }