.z23pl {
--z23-accent: #f5a623;
--z23-dark: #171d2b;
--z23-cols: 3;
--z23-gap: 24px;
--z23-ratio: 1 / 1.05;
--z23-radius: 0px;
--z23-border: rgba(23, 29, 43, 0.16);
--z23-muted: #6b7280;
--z23-overlay: linear-gradient(
180deg,
rgba(23, 29, 43, 0.62) 0%,
rgba(23, 29, 43, 0.45) 55%,
rgba(23, 29, 43, 0.6) 100%
);
} .z23pl--cols-2 {
--z23-cols: 2;
}
.z23pl--cols-3 {
--z23-cols: 3;
}
.z23pl--cols-4 {
--z23-cols: 4;
}
.z23pl,
.z23pl *,
.z23pl *::before,
.z23pl *::after {
box-sizing: border-box;
}
.z23pl {
scroll-margin-top: 110px;
}
.z23pl img {
max-width: 100%;
}
.z23pl__region {
position: relative;
} .z23pl--grid .z23pl__list {
display: grid;
grid-template-columns: repeat(var(--z23-cols), minmax(0, 1fr));
gap: var(--z23-gap);
}
.z23pl--masonry .z23pl__list {
columns: var(--z23-cols);
column-gap: var(--z23-gap);
}
.z23pl--compact .z23pl__list {
display: flex;
flex-direction: column;
}
.z23pl__list:focus {
outline: none;
} .z23pl__card {
position: relative;
overflow: hidden;
border-radius: var(--z23-radius);
background: var(--z23-dark);
}
.z23pl--grid .z23pl__card {
aspect-ratio: var(--z23-ratio);
}
.z23pl--masonry .z23pl__card {
break-inside: avoid;
margin-bottom: var(--z23-gap);
}
.z23pl--grid .z23pl__media {
position: absolute;
inset: 0;
}
.z23pl--grid .z23pl__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.z23pl--masonry .z23pl__media {
position: relative;
}
.z23pl--masonry .z23pl__media img {
width: 100%;
height: auto;
display: block;
transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.z23pl__media-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 240px;
background: var(--z23-dark);
color: rgba(255, 255, 255, 0.12);
font-size: 7rem;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
user-select: none;
}
.z23pl--masonry .z23pl__media-fallback {
aspect-ratio: 4 / 5;
height: auto;
}
.z23pl__overlay {
position: absolute;
inset: 0;
background: var(--z23-overlay);
transition: background-color 0.3s ease;
pointer-events: none;
z-index: 1;
}
.z23pl__body {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 28px;
}
.z23pl__head {
min-width: 0;
}
.z23pl__date {
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.85);
background: rgba(23, 29, 43, 0.3);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
padding: 6px 12px;
margin-bottom: 18px;
transition: border-color 0.3s ease;
}
.z23pl__title {
margin: 0;
color: #fff;
font-size: clamp(1.25rem, 1.1rem + 0.9vw, 1.6rem);
font-weight: 800;
line-height: 1.12;
text-transform: uppercase;
letter-spacing: 0.01em;
overflow-wrap: break-word;
text-shadow: 0 1px 3px rgba(23, 29, 43, 0.45);
}
.z23pl__title a {
color: inherit;
text-decoration: none;
} .z23pl__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
}
.z23pl__excerpt {
margin: 12px 0 0;
color: rgba(255, 255, 255, 0.92);
font-size: 0.9rem;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 1px 3px rgba(23, 29, 43, 0.45);
}
.z23pl__more {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
background: var(--z23-dark);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 13px 22px;
transition: background-color 0.3s ease;
}
.z23pl__arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.z23pl__card:hover .z23pl__media img {
transform: scale(1.06);
}
.z23pl__card:hover .z23pl__arrow {
transform: translateX(5px);
}
.z23pl__card:hover .z23pl__date {
border-color: var(--z23-accent);
}
.z23pl__card:hover .z23pl__more {
background: var(--z23-accent);
color: var(--z23-dark);
} .z23pl__card--compact {
display: flex;
align-items: center;
gap: 18px;
background: transparent;
overflow: visible;
padding: 14px 0;
border-bottom: 1px solid var(--z23-border);
}
.z23pl__card--compact:first-child {
border-top: 1px solid var(--z23-border);
}
.z23pl__thumb {
flex: 0 0 96px;
width: 96px;
height: 96px;
overflow: hidden;
background: var(--z23-dark);
}
.z23pl__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.z23pl__thumb .z23pl__media-fallback {
min-height: 0;
font-size: 2.2rem;
}
.z23pl__card--compact:hover .z23pl__thumb img {
transform: scale(1.08);
}
.z23pl__meta {
min-width: 0;
}
.z23pl__card--compact .z23pl__title {
color: var(--z23-dark);
font-size: 1rem;
line-height: 1.3;
transition: color 0.25s ease;
text-shadow: none;
}
.z23pl__card--compact:hover .z23pl__title {
color: var(--z23-accent);
}
.z23pl__card--compact .z23pl__date {
border: 0;
background: transparent;
color: var(--z23-muted);
padding: 0;
margin: 6px 0 0;
font-size: 12px;
letter-spacing: 0.04em;
}
.z23pl__card--compact .z23pl__excerpt {
color: var(--z23-muted);
margin-top: 6px;
-webkit-line-clamp: 2;
text-shadow: none;
} .z23pl__empty {
margin: 0;
padding: 48px 16px;
text-align: center;
color: var(--z23-muted);
font-size: 1rem;
} .z23pl__filters {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
}
.z23pl__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.z23pl__pill {
display: inline-block;
border: 1px solid var(--z23-border);
color: var(--z23-dark);
background: transparent;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
padding: 10px 18px;
transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.z23pl__pill:hover {
border-color: var(--z23-dark);
color: var(--z23-dark);
}
.z23pl__pill.is-active {
background: var(--z23-accent);
border-color: var(--z23-accent);
color: var(--z23-dark);
}
.z23pl__dropdowns {
display: flex;
gap: 10px;
}
.z23pl__dd {
position: relative;
}
.z23pl__dd-trigger {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid var(--z23-border);
color: var(--z23-dark);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 16px;
cursor: pointer;
list-style: none;
user-select: none;
transition: border-color 0.25s ease;
}
.z23pl__dd-trigger::-webkit-details-marker {
display: none;
}
.z23pl__dd-trigger:hover {
border-color: var(--z23-dark);
}
.z23pl__dd-caret {
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.2s ease;
}
.z23pl__dd[open] .z23pl__dd-caret {
transform: rotate(-135deg) translateY(-2px);
}
.z23pl__dd-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 40;
min-width: 200px;
margin: 0;
padding: 6px;
list-style: none;
background: #fff;
border: 1px solid var(--z23-border);
box-shadow: 0 12px 32px rgba(23, 29, 43, 0.14);
}
.z23pl__dd-menu li {
margin: 0;
}
.z23pl__dd-item {
display: block;
padding: 9px 14px;
color: var(--z23-dark);
font-size: 13px;
text-decoration: none;
transition: background-color 0.15s ease;
}
.z23pl__dd-item:hover {
background: rgba(23, 29, 43, 0.06);
}
.z23pl__dd-item.is-active {
font-weight: 700;
background: rgba(245, 166, 35, 0.14);
} .z23pl__pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 40px;
}
.z23pl__page {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 42px;
height: 42px;
padding: 0 12px;
border: 1px solid var(--z23-border);
color: var(--z23-dark);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
a.z23pl__page:hover {
border-color: var(--z23-dark);
}
.z23pl__page.is-active {
background: var(--z23-dark);
border-color: var(--z23-dark);
color: #fff;
}
.z23pl__page--dots {
border: 0;
min-width: 24px;
padding: 0;
}
.z23pl__page--prev,
.z23pl__page--next {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.08em;
} .z23pl.is-loading .z23pl__list,
.z23pl.is-loading .z23pl__footer {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.2s ease;
}
.z23pl.is-loading .z23pl__region::after {
content: "";
position: absolute;
top: 48px;
left: 50%;
margin-left: -16px;
width: 32px;
height: 32px;
border: 3px solid rgba(23, 29, 43, 0.15);
border-top-color: var(--z23-accent);
border-radius: 50%;
animation: z23pl-spin 0.8s linear infinite;
z-index: 5;
}
@keyframes z23pl-spin {
to {
transform: rotate(360deg);
}
} .z23pl a:focus-visible,
.z23pl summary:focus-visible {
outline: 2px solid var(--z23-accent);
outline-offset: 2px;
}
.z23pl__card:has(.z23pl__link:focus-visible) {
outline: 2px solid var(--z23-accent);
outline-offset: 3px;
} @media (max-width: 1024px) {
.z23pl--cols-3,
.z23pl--cols-4 {
--z23-cols: 2;
}
}
@media (max-width: 640px) {
.z23pl--cols-2,
.z23pl--cols-3,
.z23pl--cols-4 {
--z23-cols: 1;
}
.z23pl__body {
padding: 22px;
}
.z23pl__page-word {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.z23pl__filters {
justify-content: flex-start;
}
} @media (prefers-reduced-motion: reduce) {
.z23pl *,
.z23pl *::before,
.z23pl *::after {
transition: none !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.z23pl .z23pl__card:hover img {
transform: none !important;
}
}