.sajg-main,
.sajg-archive,
.sajg-archive-header,
.sajg-carousel,
.sajg-media {
--sajg-ink: #10141c;
--sajg-ink-soft: #5b6472;
--sajg-paper: #ffffff;
--sajg-line: #e7e9ee;
--sajg-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
} .sajg-archive-header {
position: relative;
border-radius: 20px;
overflow: hidden;
margin-bottom: clamp(22px, 3vw, 34px);
padding: clamp(38px, 7vw, 72px) clamp(20px, 5vw, 56px);
background-size: cover;
background-position: center;
background-color: #eef2f7;
text-align: center;
}
.sajg-archive-header--image { color: #fff; }
.sajg-archive-header-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(8, 11, 18, 0.45), rgba(8, 11, 18, 0.15)),
var(--sajg-arch-overlay, rgba(12, 15, 22, 0.5));
}
.sajg-archive-header:not(.sajg-archive-header--image) .sajg-archive-header-overlay { display: none; }
.sajg-archive-header-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.sajg-archive-header-title {
font-family: var(--sajg-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
font-size: clamp(1.9rem, 4.5vw, 3rem);
font-weight: 750;
letter-spacing: -0.02em;
line-height: 1.08;
margin: 0 0 12px;
color: inherit;
}
.sajg-archive-header:not(.sajg-archive-header--image) .sajg-archive-header-title { color: var(--sajg-ink); }
.sajg-archive-header-intro {
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.6;
margin: 0;
opacity: 0.9;
}
.sajg-archive-header:not(.sajg-archive-header--image) .sajg-archive-header-intro { color: var(--sajg-ink-soft); }
.sajg-main {
font-family: inherit;
color: var(--sajg-ink);
display: block;
width: 100%;
}
.sajg-main *,
.sajg-main *::before,
.sajg-main *::after { box-sizing: border-box; } .sajg-view-btn,
.sajg-carousel-btn,
.sajg-lb-close,
.sajg-lb-prev,
.sajg-lb-next,
.sajg-hero-play {
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box !important;
min-height: 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
line-height: 1 !important;
text-shadow: none !important;
font-family: inherit;
}
.sajg-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(18px, 4vw, 32px);
width: 100%;
}
.sajg-main a { text-decoration: none; }
.sajg-main img { max-width: 100%; display: block; }
.sajg-empty {
text-align: center;
color: var(--sajg-ink-soft);
padding: 60px 20px;
font-size: 1.05rem;
} .sajg-crumbs {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.82rem;
letter-spacing: 0.02em;
padding: 7px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(16, 20, 28, 0.06);
box-shadow: 0 2px 10px rgba(16, 20, 28, 0.05);
margin-bottom: 22px;
}
.sajg-crumbs a { color: var(--sajg-ink-soft); transition: color 0.15s ease; }
.sajg-crumbs a:hover { color: var(--sajg-ink); }
.sajg-crumb-sep { color: #b6bcc6; }
.sajg-crumb-current { color: var(--sajg-ink); font-weight: 600; } .sajg-archive-hero {
padding: clamp(48px, 8vw, 90px) 0 clamp(28px, 4vw, 44px);
background:
radial-gradient(1000px 420px at 15% -10%, #eef3fb 0%, rgba(238, 243, 251, 0) 60%),
radial-gradient(900px 420px at 90% 0%, #fdf1ec 0%, rgba(253, 241, 236, 0) 55%);
text-align: center;
}
.sajg-archive-hero .sajg-crumbs { margin-bottom: 26px; }
.sajg-archive-title {
font-family: var(--sajg-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
font-size: clamp(2.1rem, 5vw, 3.4rem);
line-height: 1.08;
font-weight: 750;
letter-spacing: -0.02em;
margin: 0 0 14px;
color: var(--sajg-ink);
}
.sajg-archive-intro {
font-size: clamp(1rem, 1.6vw, 1.15rem);
color: var(--sajg-ink-soft);
max-width: 560px;
margin: 0 auto;
line-height: 1.6;
}
.sajg-archive-body { padding: clamp(28px, 5vw, 56px) 0 clamp(60px, 8vw, 110px); } .sajg-view-toggle {
display: flex;
justify-content: flex-end;
gap: 4px;
padding: 4px;
width: max-content;
margin: 0 0 22px auto;
background: #f1f3f7;
border-radius: 999px;
}
.sajg-view-btn {
border: 0 !important;
background: transparent !important;
color: #8b93a1 !important;
width: 38px !important;
height: 34px !important;
padding: 0 !important;
border-radius: 999px !important;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: none !important;
transition: all 0.18s ease;
}
.sajg-view-btn:hover { color: var(--sajg-ink) !important; }
.sajg-view-btn.is-active {
background: #ffffff !important;
color: var(--sajg-accent, #1d3b45) !important;
box-shadow: 0 2px 8px rgba(16, 20, 28, 0.12) !important;
}
.sajg-view-btn svg { display: block; } .sajg-folder-grid {
display: grid;
grid-template-columns: repeat(var(--sajg-cols, 3), 1fr);
gap: calc(var(--sajg-gap, 16px) + 8px);
}
.sajg-archive[data-view="list"] .sajg-folder-grid { display: none; }
.sajg-archive[data-view="grid"] .sajg-folder-list { display: none; }
.sajg-folder-card {
position: relative;
display: block;
aspect-ratio: 4 / 5;
border-radius: calc(var(--sajg-radius, 14px) + 6px);
overflow: hidden;
box-shadow: var(--sajg-shadow);
border: var(--sajg-border-w, 0) solid var(--sajg-border-c, #fff);
background: #dfe3ea;
transform: translateY(0);
transition: transform 0.28s ease, box-shadow 0.28s ease;
isolation: isolate;
}
.sajg-folder-card:hover {
transform: translateY(-5px);
box-shadow: 0 22px 48px rgba(15, 20, 30, 0.22);
}
.sajg-folder-card-img,
.sajg-cover-placeholder {
position: absolute;
inset: 0; width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sajg-folder-card:hover .sajg-folder-card-img { transform: scale(1.06); }
.sajg-cover-placeholder {
display: block;
background: linear-gradient(140deg, #c8d2e2 0%, #97a5bd 100%);
}
.sajg-folder-card-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8, 11, 18, 0.72) 0%, rgba(8, 11, 18, 0.18) 42%, rgba(8, 11, 18, 0) 65%);
z-index: 1;
}
.sajg-folder-card-count {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
font-size: 0.78rem;
font-weight: 650;
color: #fff;
background: rgba(16, 20, 28, 0.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 4px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.22);
}
.sajg-folder-card-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 20px 22px;
display: block;
}
.sajg-folder-card-name {
display: block;
color: #fff;
font-size: 1.22rem;
font-weight: 700;
letter-spacing: -0.01em;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.sajg-folder-card-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 6px;
color: rgba(255, 255, 255, 0.82);
font-size: 0.86rem;
line-height: 1.5;
max-height: 0;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
.sajg-folder-card:hover .sajg-folder-card-desc {
max-height: 3.2em;
opacity: 1;
} .sajg-folder-list {
display: flex;
flex-direction: column;
gap: calc(var(--sajg-gap, 16px));
}
.sajg-folder-row {
display: flex;
align-items: center;
gap: clamp(16px, 3vw, 28px);
padding: 14px;
border-radius: calc(var(--sajg-radius, 14px) + 6px);
background: var(--sajg-paper);
border: 1px solid var(--sajg-line);
box-shadow: 0 2px 10px rgba(15, 20, 30, 0.04);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.sajg-folder-row:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(15, 20, 30, 0.12);
border-color: transparent;
}
.sajg-folder-row-media {
flex: 0 0 clamp(110px, 22vw, 220px);
aspect-ratio: 3 / 2;
border-radius: var(--sajg-radius, 14px);
overflow: hidden;
position: relative;
background: #dfe3ea;
}
.sajg-folder-row-media img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
transition: transform 0.5s ease;
}
.sajg-folder-row:hover .sajg-folder-row-media img { transform: scale(1.05); }
.sajg-folder-row-body { flex: 1 1 auto; min-width: 0; }
.sajg-folder-row-name {
display: block;
font-size: 1.15rem;
font-weight: 700;
color: var(--sajg-ink);
letter-spacing: -0.01em;
}
.sajg-folder-row-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 5px;
color: var(--sajg-ink-soft);
font-size: 0.92rem;
line-height: 1.55;
}
.sajg-folder-row-meta {
display: inline-block;
margin-top: 10px;
font-size: 0.78rem;
font-weight: 600;
color: var(--sajg-ink-soft);
background: #f1f3f7;
padding: 3px 11px;
border-radius: 999px;
}
.sajg-folder-row-arrow {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 999px;
display: grid;
place-items: center;
background: #f1f3f7; color: var(--sajg-accent, #1d3b45);
font-size: 1rem;
margin-right: 8px;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sajg-folder-row:hover .sajg-folder-row-arrow {
background: var(--sajg-accent, #1d3b45);
color: #fff;
transform: translateX(3px);
} .sajg-hero {
position: relative;
min-height: max(340px, var(--sajg-hero-h, 48vh));
display: flex;
align-items: flex-end;
background-size: cover;
background-position: center;
color: #fff;
overflow: hidden;
}
.sajg-hero--plain { background: linear-gradient(140deg, #202636 0%, #3c4762 100%); } .sajg-hero-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.sajg-hero-embed-wrap {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none; container-type: size;
container-name: sajg-hero-box;
} .sajg-hero-embed {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: max(100%, 177.78cqh);
height: max(100%, 56.25cqw);
border: 0;
} @supports not (width: 1cqw) {
.sajg-hero-embed {
width: max(100%, 177.78vh);
height: max(100%, 56.25vw);
}
}
.sajg-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to top, rgba(8, 11, 18, 0.65) 0%, rgba(8, 11, 18, 0.1) 45%, rgba(8, 11, 18, 0.25) 100%),
var(--sajg-hero-overlay, rgba(16, 20, 28, 0.35));
}
.sajg-hero-inner {
position: relative;
z-index: 2;
padding-top: 90px;
padding-bottom: clamp(30px, 5vw, 54px);
}
.sajg-hero .sajg-crumbs {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.sajg-hero .sajg-crumbs a { color: rgba(255, 255, 255, 0.75); }
.sajg-hero .sajg-crumbs a:hover { color: #fff; }
.sajg-hero .sajg-crumb-current { color: #fff; }
.sajg-hero .sajg-crumb-sep { color: rgba(255, 255, 255, 0.45); }
.sajg-hero-title {
font-family: var(--sajg-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
font-size: clamp(2rem, 5.5vw, 3.6rem);
font-weight: 760;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0 0 12px;
color: var(--sajg-hero-title-color, #fff);
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.sajg-hero-desc {
max-width: 620px;
font-size: clamp(0.98rem, 1.5vw, 1.12rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.88);
margin: 0 0 14px;
}
.sajg-hero-metarow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
}
.sajg-hero-meta {
display: inline-block;
font-size: 0.8rem;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 5px 14px;
border-radius: 999px;
margin: 0;
} .sajg-hero-play {
appearance: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 11px;
padding: 7px 18px 7px 8px;
border-radius: 999px;
color: #fff;
font-size: 0.85rem;
font-weight: 650;
letter-spacing: 0.01em;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 8px 24px rgba(8, 11, 18, 0.25);
transition: background 0.2s ease, transform 0.2s ease;
}
.sajg-hero-play:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
.sajg-hero-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sajg-hero-play-icon {
position: relative;
width: 30px;
height: 30px;
flex: 0 0 auto;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
}
.sajg-hero-play-icon::after {
content: "";
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent var(--sajg-accent, #1d3b45);
}
.sajg-hero-play-label { white-space: nowrap; }
.sajg-hero-back {
position: absolute;
top: 22px;
right: clamp(18px, 4vw, 32px);
z-index: 2;
color: #fff;
font-size: 0.85rem;
font-weight: 600;
background: rgba(16, 20, 28, 0.35);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 8px 16px;
border-radius: 999px;
transition: background 0.2s ease;
}
.sajg-hero-back:hover { background: rgba(16, 20, 28, 0.6); color: #fff; } .sajg-single-body {
padding-top: clamp(28px, 5vw, 56px);
padding-bottom: clamp(70px, 9vw, 120px);
padding-left: clamp(16px, 4vw, 32px);
padding-right: clamp(16px, 4vw, 32px);
} .sajg-media--masonry {
column-count: var(--sajg-cols, 3);
column-gap: var(--sajg-gap, 16px);
}
.sajg-media--masonry .sajg-item {
break-inside: avoid;
margin: 0 0 var(--sajg-gap, 16px);
}
.sajg-media--grid,
.sajg-media--squares {
display: grid;
grid-template-columns: repeat(var(--sajg-cols, 3), 1fr);
gap: var(--sajg-gap, 16px);
}
.sajg-media--grid .sajg-item { aspect-ratio: 4 / 3; margin: 0; }
.sajg-media--squares .sajg-item { aspect-ratio: 1 / 1; margin: 0; }
.sajg-media--grid .sajg-item img,
.sajg-media--grid .sajg-item video,
.sajg-media--squares .sajg-item img,
.sajg-media--squares .sajg-item video {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
}
.sajg-item {
position: relative;
overflow: hidden;
border-radius: var(--sajg-radius, 14px);
box-shadow: var(--sajg-shadow);
border: var(--sajg-border-w, 0) solid var(--sajg-border-c, #fff);
background: #e6e9ef;
isolation: isolate;
} .sajg-reveal-ready .sajg-item {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
will-change: opacity, transform;
}
.sajg-reveal-ready .sajg-item.is-revealed { opacity: 1; transform: none; } .sajg-loadmore-wrap { text-align: center; margin-top: clamp(22px, 3vw, 36px); }
.sajg-loadmore {
cursor: pointer;
border: 0 !important;
padding: 13px 30px !important;
border-radius: 999px !important;
font-size: 0.92rem;
font-weight: 650 !important;
line-height: 1.2 !important;
letter-spacing: normal !important;
text-transform: none !important;
color: #fff !important;
background: var(--sajg-accent, #1d3b45) !important;
box-shadow: 0 8px 22px rgba(15, 20, 30, 0.14) !important;
transition: transform 0.18s ease, filter 0.18s ease;
}
.sajg-loadmore:hover { transform: translateY(-2px); filter: brightness(0.94); }
.sajg-loadmore.is-loading { opacity: 0.6; cursor: default; transform: none; }
.sajg-has-lightbox .sajg-item { cursor: zoom-in; }
.sajg-item img,
.sajg-item video {
width: 100%;
height: auto;
display: block;
transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
} .sajg-media--masonry .sajg-item--video img,
.sajg-media--masonry .sajg-item--video video {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.sajg-zoom .sajg-item:hover img,
.sajg-zoom .sajg-item:hover video { transform: scale(1.05); }
.sajg-item-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 34px 16px 13px;
color: #fff;
font-size: 0.86rem;
font-weight: 550;
line-height: 1.4;
background: linear-gradient(to top, rgba(8, 11, 18, 0.72), rgba(8, 11, 18, 0));
pointer-events: none;
}
.sajg-overlay-none .sajg-item-caption { display: none; }
.sajg-overlay-hover .sajg-item-caption {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.sajg-overlay-hover .sajg-item:hover .sajg-item-caption {
opacity: 1;
transform: translateY(0);
} .sajg-video-placeholder {
display: block;
aspect-ratio: 16 / 10;
background:
radial-gradient(400px 200px at 80% 10%, rgba(255, 255, 255, 0.14), transparent 60%),
linear-gradient(140deg, #1c2230 0%, #38415a 100%);
}
.sajg-media--grid .sajg-video-placeholder,
.sajg-media--squares .sajg-video-placeholder {
position: absolute;
inset: 0;
aspect-ratio: auto;
width: 100%;
height: 100%;
}
.sajg-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 56px;
height: 56px;
border-radius: 999px;
background: rgba(16, 20, 28, 0.55);
border: 1.5px solid rgba(255, 255, 255, 0.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform 0.2s ease, background 0.2s ease;
pointer-events: none;
}
.sajg-play::after {
content: "";
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 9px 0 9px 15px;
border-color: transparent transparent transparent #fff;
}
.sajg-item:hover .sajg-play {
transform: translate(-50%, -50%) scale(1.08);
background: rgba(16, 20, 28, 0.75);
} .sajg-carousel { position: relative; }
.sajg-carousel-viewport {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.sajg-carousel-track {
flex: 1 1 auto;
min-width: 0;
display: flex;
gap: calc(var(--sajg-gap, 16px) + 4px);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 14px 4px 30px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sajg-carousel-track::-webkit-scrollbar { display: none; }
.sajg-folder-card--carousel {
flex: 0 0 min(300px, 78vw);
aspect-ratio: 3 / 4;
scroll-snap-align: center;
} .sajg-carousel-btn {
cursor: pointer;
flex: 0 0 auto;
width: 46px !important;
height: 46px !important;
padding: 0 !important;
border-radius: 999px !important;
border: 1px solid var(--sajg-line) !important;
background: #fff !important;
color: var(--sajg-ink) !important;
font-size: 1.1rem;
display: grid;
place-items: center;
box-shadow: 0 4px 14px rgba(15, 20, 30, 0.1) !important;
transition: all 0.18s ease;
z-index: 3;
}
.sajg-carousel-btn:hover {
background: var(--sajg-accent, #1d3b45) !important;
color: #fff !important;
border-color: var(--sajg-accent, #1d3b45) !important;
transform: scale(1.06);
} .sajg-carousel-dots {
display: flex;
justify-content: center;
gap: 7px;
margin-top: 4px;
}
.sajg-carousel-dots:empty { display: none; }
.sajg-carousel-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #cfd5df;
border: 0;
padding: 0;
cursor: pointer;
transition: all 0.2s ease;
}
.sajg-carousel-dot.is-active {
background: var(--sajg-accent, #1d3b45);
width: 22px;
} .sajg-carousel--coverflow .sajg-carousel-track {
--sajg-cf-card: min(320px, 72vw);
perspective: 1500px;
gap: 18px;
padding: 34px calc(50% - var(--sajg-cf-card) / 2) 44px;
}
.sajg-carousel--coverflow .sajg-folder-card--carousel {
flex-basis: var(--sajg-cf-card);
transform: scale(0.78) rotateY(0deg);
opacity: 0.5;
transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease;
box-shadow: 0 18px 40px rgba(15, 20, 30, 0.18);
will-change: transform;
}
.sajg-carousel--coverflow .sajg-folder-card--carousel.is-prev { transform: scale(0.82) rotateY(24deg); opacity: 0.7; }
.sajg-carousel--coverflow .sajg-folder-card--carousel.is-next { transform: scale(0.82) rotateY(-24deg); opacity: 0.7; }
.sajg-carousel--coverflow .sajg-folder-card--carousel.is-active {
transform: scale(1.04);
opacity: 1;
z-index: 2;
box-shadow: 0 30px 60px rgba(15, 20, 30, 0.32);
} .sajg-carousel--spotlight .sajg-carousel-track {
--sajg-sp-card: min(660px, 64vw);
gap: 18px;
padding: 16px calc(50% - var(--sajg-sp-card) / 2) 32px;
}
.sajg-carousel--spotlight .sajg-folder-card--carousel {
flex-basis: var(--sajg-sp-card);
aspect-ratio: 16 / 10;
opacity: 0.38;
transform: scale(0.93);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.sajg-carousel--spotlight .sajg-folder-card--carousel.is-active {
opacity: 1;
transform: scale(1);
}
.sajg-carousel--spotlight .sajg-folder-card-name { font-size: 1.5rem; } .sajg-lb {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8, 10, 16, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
opacity: 0;
transition: opacity 0.22s ease;
}
.sajg-lb.is-open { opacity: 1; }
.sajg-lb-stage {
max-width: min(1200px, 92vw);
max-height: 84vh;
display: flex;
flex-direction: column;
align-items: center;
transform: scale(0.97);
transition: transform 0.22s ease;
}
.sajg-lb.is-open .sajg-lb-stage { transform: scale(1); }
.sajg-lb-stage img,
.sajg-lb-stage video {
max-width: 92vw;
max-height: 78vh;
width: auto;
height: auto;
border-radius: 10px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.sajg-lb-embed { width: min(1100px, 92vw, calc(78vh * 16 / 9));
aspect-ratio: 16 / 9;
border: 0;
border-radius: 10px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
background: #000;
}
.sajg-lb-caption {
margin-top: 16px;
color: rgba(255, 255, 255, 0.85);
font-size: 0.92rem;
text-align: center;
max-width: 70ch;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.sajg-lb-count {
position: absolute;
top: 20px;
left: 24px;
color: rgba(255, 255, 255, 0.65);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.06em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.sajg-lb-close,
.sajg-lb-prev,
.sajg-lb-next {
cursor: pointer;
position: absolute;
width: 46px !important;
height: 46px !important;
padding: 0 !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
background: rgba(255, 255, 255, 0.08) !important;
color: #fff !important;
font-size: 1.15rem;
display: grid;
place-items: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: none !important;
transition: background 0.18s ease, transform 0.18s ease;
}
.sajg-lb-close:hover,
.sajg-lb-prev:hover,
.sajg-lb-next:hover { background: rgba(255, 255, 255, 0.22) !important; }
.sajg-lb-close { top: 16px; right: 20px; }
.sajg-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.sajg-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.sajg-lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.sajg-lb-next:hover { transform: translateY(-50%) scale(1.06); }
body.sajg-lb-open { overflow: hidden; } @media (max-width: 1024px) {
.sajg-folder-grid { grid-template-columns: repeat(min(var(--sajg-cols, 3), 2), 1fr); }
.sajg-media--masonry { column-count: min(var(--sajg-cols, 3), 2); }
.sajg-media--grid,
.sajg-media--squares { grid-template-columns: repeat(min(var(--sajg-cols, 3), 2), 1fr); }
}
@media (max-width: 640px) {
.sajg-folder-grid { grid-template-columns: 1fr 1fr; }
.sajg-folder-card-name { font-size: 1rem; }
.sajg-folder-card-desc { display: none; }
.sajg-media--masonry { column-count: 2; }
.sajg-media--grid,
.sajg-media--squares { grid-template-columns: 1fr 1fr; }
.sajg-folder-row { flex-wrap: wrap; }
.sajg-folder-row-media { flex-basis: 100%; }
.sajg-folder-row-arrow { display: none; }
.sajg-hero-back { top: 14px; }
.sajg-lb-prev { left: 8px; }
.sajg-lb-next { right: 8px; }
.sajg-carousel-viewport { gap: 4px; }
.sajg-carousel-btn { width: 36px; height: 36px; font-size: 0.95rem; }
.sajg-carousel-title { font-size: 1.4rem; }
}
@media (max-width: 420px) {
.sajg-folder-grid { grid-template-columns: 1fr; }
.sajg-media--masonry { column-count: 1; }
.sajg-media--grid,
.sajg-media--squares { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.sajg-main *,
.sajg-lb,
.sajg-lb-stage { transition: none !important; }
.sajg-carousel-track { scroll-behavior: auto; }
.sajg-reveal-ready .sajg-item { opacity: 1 !important; transform: none !important; }
}