.bfz-gallery {
--bfz-surface: #fff;
--bfz-border: #eee3d5;
--bfz-text: #2b2420;
--bfz-text-soft: #5a5045;
--bfz-orange: #e0653a;
--bfz-teal: #3b9b9e;
--bfz-radius: 20px;
--bfz-shadow: 0 16px 36px -20px rgba(43, 36, 32, 0.22);
}
.bfz-gallery__photo-heading {
width: 100%;
margin: 0 0 2rem;
color: var(--bfz-text);
font-size: clamp(1.7rem, 3vw, 2.6rem);
font-weight: 700;
line-height: 1.15;
text-align: center;
}
.bfz-gallery__albums {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.bfz-gallery--empty,
.bfz-gallery__empty {
text-align: center;
color: var(--bfz-text-soft);
font-size: 1rem;
line-height: 1.6;
padding: 2rem 1rem;
}
.bfz-album {
display: flex;
flex-direction: column;
border: 1px solid var(--bfz-border);
border-radius: var(--bfz-radius);
overflow: hidden;
background: var(--bfz-surface);
box-shadow: var(--bfz-shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bfz-album:hover {
transform: translateY(-4px);
box-shadow: 0 26px 48px -20px rgba(43, 36, 32, 0.32);
}
.bfz-album__viewer {
position: relative;
background: #f3ece0;
}
.bfz-album__stage {
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
.bfz-album__stage:focus-visible {
outline: 3px solid var(--bfz-orange);
outline-offset: -3px;
}
.bfz-album__slide {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.bfz-album__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--bfz-text);
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 8px 20px rgba(43, 36, 32, 0.18);
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bfz-album__nav:hover,
.bfz-album__nav:focus-visible {
background: var(--bfz-orange);
color: #fff;
outline: none;
transform: translateY(-50%) scale(1.05);
}
.bfz-album__nav--prev { left: 0.75rem; }
.bfz-album__nav--next { right: 0.75rem; }
.bfz-album__counter {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
z-index: 2;
padding: 0.3rem 0.75rem;
border-radius: 999px;
background: rgba(43, 36, 32, 0.72);
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
backdrop-filter: blur(4px);
pointer-events: none;
}
.bfz-album__info {
padding: 1.25rem 1.35rem 1.35rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.bfz-album__title {
margin: 0;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 1.25rem;
line-height: 1.2;
color: var(--bfz-text);
}
.bfz-album__desc {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--bfz-text-soft);
}
.bfz-album__count {
display: inline-flex;
align-self: flex-start;
margin-top: 0.15rem;
padding: 0.3rem 0.75rem;
border-radius: 999px;
background: #f3ece0;
color: var(--bfz-text-soft);
font-size: 0.8125rem;
font-weight: 700;
}
.bfz-lightbox[hidden] {
display: none !important;
}
.bfz-lightbox {
position: fixed;
inset: 0;
z-index: 100000;
}
.bfz-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 16, 14, 0.88);
}
.bfz-lightbox__dialog {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
padding: 2.5rem 4rem;
}
.bfz-lightbox__figure {
margin: 0;
max-width: min(1100px, 92vw);
width: 100%;
}
.bfz-lightbox__image {
display: block;
width: 100%;
max-height: 78vh;
object-fit: contain;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.bfz-lightbox__caption {
margin-top: 0.75rem;
text-align: center;
color: #f1e9df;
font-size: 0.95rem;
}
.bfz-lightbox__close,
.bfz-lightbox__nav {
position: absolute;
z-index: 2;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
backdrop-filter: blur(6px);
transition: background 0.2s ease;
}
.bfz-lightbox__close:hover,
.bfz-lightbox__nav:hover,
.bfz-lightbox__close:focus-visible,
.bfz-lightbox__nav:focus-visible {
background: rgba(224, 101, 58, 0.85);
outline: none;
}
.bfz-lightbox__close {
top: 1rem;
right: 1rem;
width: 44px;
height: 44px;
font-size: 1.75rem;
line-height: 1;
}
.bfz-lightbox__nav {
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
font-size: 2rem;
line-height: 1;
}
.bfz-lightbox__nav--prev { left: 1rem; }
.bfz-lightbox__nav--next { right: 1rem; }
.bfz-lightbox__counter {
position: absolute;
left: 50%;
bottom: 1.25rem;
transform: translateX(-50%);
padding: 0.35rem 0.85rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 0.875rem;
font-weight: 600;
}
@media (max-width: 768px) {
.bfz-gallery__albums {
grid-template-columns: 1fr;
}
.bfz-album__nav {
width: 36px;
height: 36px;
font-size: 1.5rem;
}
.bfz-lightbox__dialog {
padding: 3.5rem 1rem 4rem;
}
.bfz-lightbox__nav {
width: 40px;
height: 40px;
font-size: 1.6rem;
}
}
@media (prefers-reduced-motion: reduce) {
.bfz-album,
.bfz-album__nav {
transition: none;
}
}
.bfz-video-carousel {
--bfz-video-gap: 1.4rem;
margin: 0 0 5rem;
}
.bfz-video-carousel__viewport {
position: relative;
overflow: hidden;
background: transparent;
}
.bfz-video-carousel__track {
display: flex;
gap: var(--bfz-video-gap);
transition: transform 0.4s ease;
will-change: transform;
}
.bfz-video-carousel__slide {
flex: 0 0 calc((100% - (2 * var(--bfz-video-gap))) / 3);
min-width: 0;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: center;
}
.bfz-video-carousel__video {
display: block;
width: 100%;
height: auto;
max-height: 76vh;
object-fit: cover;
background: transparent;
border: 0;
border-radius: 22px;
overflow: hidden;
box-shadow: var(--bfz-shadow);
} .bfz-video-carousel__slide--portrait .bfz-video-carousel__video {
width: min(100%, 360px);
aspect-ratio: 9 / 16;
}
.bfz-video-carousel__slide--landscape .bfz-video-carousel__video {
aspect-ratio: 16 / 9;
} .bfz-video-carousel__slide--unknown .bfz-video-carousel__video {
aspect-ratio: auto 9 / 16;
}
.bfz-video-carousel__nav {
position: absolute;
top: 50%;
z-index: 3;
transform: translateY(-50%);
width: 46px;
height: 46px;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.94);
color: var(--bfz-text);
font-size: 2rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.bfz-video-carousel__nav[hidden],
.bfz-video-carousel__counter[hidden] {
display: none !important;
}
.bfz-video-carousel__nav:hover,
.bfz-video-carousel__nav:focus-visible {
background: var(--bfz-orange);
color: #fff;
outline: none;
}
.bfz-video-carousel__nav--prev { left: .65rem; }
.bfz-video-carousel__nav--next { right: .65rem; }
.bfz-video-carousel__counter {
position: absolute;
right: .65rem;
top: .65rem;
z-index: 3;
padding: .3rem .75rem;
border-radius: 999px;
background: rgba(43,36,32,.72);
color: #fff;
font-size: .8125rem;
font-weight: 700;
pointer-events: none;
}
@media (max-width: 1023px) {
.bfz-video-carousel { --bfz-video-gap: 1rem; }
.bfz-video-carousel__slide {
flex-basis: calc((100% - var(--bfz-video-gap)) / 2);
}
}
@media (max-width: 768px) {
.bfz-video-carousel {
--bfz-video-gap: .85rem;
margin-bottom: 3rem;
}
.bfz-video-carousel__slide { flex-basis: 100%; }
.bfz-video-carousel__video { border-radius: 14px; }
.bfz-video-carousel__nav { width: 38px; height: 38px; font-size: 1.6rem; }
.bfz-video-carousel__nav--prev { left: .5rem; }
.bfz-video-carousel__nav--next { right: .5rem; }
}
@media (max-width: 768px) {
.bfz-gallery__photo-heading {
margin-bottom: 1.5rem;
font-size: clamp(1.55rem, 7vw, 2rem);
}
}