.nova-gallery-wrapper {
--nova-cols: 3;
--nova-gap: 12px;
--nova-radius: 6px;
--nova-trans: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
--nova-lb-bg: rgba(8, 8, 12, 0.97);
} .nova-gallery-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.nova-filter-btn {
display: inline-flex;
align-items: center;
padding: 7px 18px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.03em;
border: none;
cursor: pointer;
transition: background var(--nova-trans), color var(--nova-trans), transform 0.15s ease;
white-space: nowrap;
outline: none;
}
.nova-filter-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.4);
}
.nova-filter-btn:hover:not(.is-active) {
opacity: 0.8;
} .nova-gallery-grid {
column-count: var(--nova-cols);
column-gap: var(--nova-gap);
} .nova-gallery-grid.layout-grid {
display: grid;
grid-template-columns: repeat(var(--nova-cols), 1fr);
gap: var(--nova-gap);
column-count: unset;
} .nova-gallery-grid.layout-justified {
display: flex;
flex-wrap: wrap;
gap: var(--nova-gap);
column-count: unset;
}
.nova-gallery-grid.layout-justified .nova-gallery-item {
flex: 1 1 200px;
} .nova-gallery-item {
break-inside: avoid;
margin-bottom: var(--nova-gap);
overflow: hidden;
transition: opacity var(--nova-trans), transform var(--nova-trans);
}
.nova-gallery-grid.layout-grid .nova-gallery-item {
margin-bottom: 0;
}
.nova-gallery-item.is-hidden {
display: none;
}
.nova-gallery-item.is-filtering {
animation: novaFade 0.35s ease forwards;
}
@keyframes novaFade {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to   { opacity: 1; transform: none; }
}
.nova-gallery-item figure {
margin: 0;
padding: 0;
overflow: hidden;
border-radius: var(--nova-radius);
display: block;
line-height: 0;
position: relative;
} .nova-gallery-item-inner {
position: relative;
overflow: hidden;
}
.nova-gallery-grid.layout-grid .nova-gallery-item-inner {
padding-bottom: 66%;
}
.nova-gallery-grid.layout-grid .nova-gallery-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.nova-gallery-grid.layout-masonry .nova-gallery-item img,
.nova-gallery-grid.layout-justified .nova-gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
img {
transition: transform var(--nova-trans), filter var(--nova-trans);
} .nova-gallery-item:hover img {
transform: scale(1.05);
} .nova-gallery-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--nova-radius);
pointer-events: none;
}
.nova-overlay-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px;
text-align: center;
max-width: 90%;
}
.nova-overlay-icon {
display: flex;
color: #fff;
margin-bottom: 4px;
}
.nova-overlay-title {
margin: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
.nova-overlay-caption {
margin: 0;
font-size: 13px;
line-height: 1.4;
} .nova-gallery-overlay.effect-fade {
opacity: 0;
transition: opacity var(--nova-trans);
}
.nova-gallery-item:hover .nova-gallery-overlay.effect-fade {
opacity: 1;
} .nova-gallery-overlay.effect-slide-up {
opacity: 0;
transform: translateY(100%);
transition: opacity var(--nova-trans), transform var(--nova-trans);
align-items: flex-end;
justify-content: flex-start;
padding: 0;
background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 100%) !important;
}
.nova-gallery-overlay.effect-slide-up .nova-overlay-content {
align-items: flex-start;
text-align: left;
padding: 14px 16px;
}
.nova-gallery-item:hover .nova-gallery-overlay.effect-slide-up {
opacity: 1;
transform: translateY(0);
} .nova-gallery-overlay.effect-zoom-in {
opacity: 0;
transform: scale(1.08);
transition: opacity var(--nova-trans), transform var(--nova-trans);
}
.nova-gallery-item:hover .nova-gallery-overlay.effect-zoom-in {
opacity: 1;
transform: scale(1);
} .nova-gallery-overlay.effect-corner-fold {
opacity: 0;
transition: opacity var(--nova-trans);
}
.nova-gallery-overlay.effect-corner-fold::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px; height: 3px;
border-top: 3px solid rgba(255,255,255,0.9);
border-left: 3px solid rgba(255,255,255,0.9);
transition: width 0.35s ease, height 0.35s ease;
}
.nova-gallery-overlay.effect-corner-fold::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 3px; height: 3px;
border-bottom: 3px solid rgba(255,255,255,0.9);
border-right: 3px solid rgba(255,255,255,0.9);
transition: width 0.35s ease, height 0.35s ease;
}
.nova-gallery-item:hover .nova-gallery-overlay.effect-corner-fold {
opacity: 1;
}
.nova-gallery-item:hover .nova-gallery-overlay.effect-corner-fold::before,
.nova-gallery-item:hover .nova-gallery-overlay.effect-corner-fold::after {
width: 40px;
height: 40px;
} .nova-gallery-item {
cursor: pointer;
} .nova-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: novaLbIn 0.28s ease;
}
.nova-lightbox[hidden] {
display: none !important;
}
@keyframes novaLbIn {
from { opacity: 0; }
to   { opacity: 1; }
}
.nova-lb-backdrop {
position: absolute;
inset: 0;
background: var(--nova-lb-bg);
cursor: zoom-out;
} .nova-lb-close,
.nova-lb-prev,
.nova-lb-next {
position: absolute;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, transform 0.15s ease;
z-index: 2;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.nova-lb-close:hover,
.nova-lb-prev:hover,
.nova-lb-next:hover {
background: rgba(255,255,255,0.18);
}
.nova-lb-close {
top: 20px; right: 20px;
width: 42px; height: 42px;
border-radius: 50%;
}
.nova-lb-prev,
.nova-lb-next {
top: 50%;
transform: translateY(-50%);
width: 48px; height: 48px;
border-radius: 50%;
}
.nova-lb-prev { left: 20px; }
.nova-lb-next { right: 20px; }
.nova-lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.nova-lb-next:hover { transform: translateY(-50%) translateX(2px); } .nova-lb-stage {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: calc(100vw - 140px);
max-height: calc(100vh - 200px);
}
.nova-lb-img {
max-width: 100%;
max-height: calc(100vh - 200px);
object-fit: contain;
border-radius: 4px;
box-shadow: 0 30px 80px rgba(0,0,0,0.7);
transition: opacity 0.2s ease;
display: block;
z-index: 1;
position: relative;
}
.nova-lb-img.is-loading {
opacity: 0;
} .nova-lb-spinner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
}
.nova-lb-spinner::after {
content: '';
width: 34px; height: 34px;
border: 3px solid rgba(255,255,255,0.15);
border-top-color: #fff;
border-radius: 50%;
animation: novaSpin 0.7s linear infinite;
}
@keyframes novaSpin {
to { transform: rotate(360deg); }
}
.nova-lb-spinner.is-hidden {
display: none;
} .nova-lb-info {
position: relative;
z-index: 2;
text-align: center;
margin-top: 16px;
color: #fff;
}
.nova-lb-title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 600;
}
.nova-lb-caption {
margin: 0;
font-size: 13px;
color: rgba(255,255,255,0.6);
} .nova-lb-thumbs {
position: relative;
z-index: 2;
display: flex;
gap: 8px;
margin-top: 16px;
overflow-x: auto;
max-width: calc(100vw - 80px);
padding-bottom: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.nova-lb-thumb {
flex-shrink: 0;
width: 54px;
height: 38px;
object-fit: cover;
border-radius: 3px;
opacity: 0.45;
cursor: pointer;
border: 2px solid transparent;
transition: opacity 0.2s ease, border-color 0.2s ease;
}
.nova-lb-thumb.is-active {
opacity: 1;
border-color: #fff;
}
.nova-lb-thumb:hover {
opacity: 0.8;
} @media (max-width: 1024px) {
.nova-gallery-wrapper { --nova-cols: 2; }
}
@media (max-width: 767px) {
.nova-gallery-wrapper { --nova-cols: 1; }
.nova-lb-stage {
max-width: calc(100vw - 20px);
max-height: calc(100vh - 160px);
}
.nova-lb-prev { left: 8px; }
.nova-lb-next { right: 8px; }
.nova-lb-close { top: 12px; right: 12px; }
.nova-lb-thumbs { max-width: calc(100vw - 20px); }
}