/*
laureaty.css — стили страницы «Лауреаты Народной Премии» (page-laureaty.php).
Использует глобальные CSS-переменные темы (--igp-*), поэтому работает в light/dark
автоматически через data-theme на . Только flexbox, без grid.
Обложки игр — ![]()
со скелетоном (не CSS background).
*/
.laureaty {
padding: 8px 0 56px;
}
.laureaty .container {
display: flex;
flex-direction: column;
gap: 48px;
}
/* ── Заголовок-плашка (как .lozung на архиве, но компактнее) ──
.lozung базово приходит из main.css/site.css (красный фон, белый
текст, шрифт Molot). Уменьшаем высоту и кегль для этой страницы.
ВАЖНО: глобально у h1 есть margin 32/24px и line-height под 48px —
именно они раздували высоту плашки. Гасим их с запасом по специфичности. */
.lozung.lozung--laureaty {
padding: 10px 22px;
}
body:not(.home) .container .lozung.lozung--laureaty h1 {
margin: 0;
padding: 0;
font-size: clamp(20px, 3vw, 30px);
line-height: 1.2;
}
.lozung.lozung--laureaty strong {
font-size: inherit;
line-height: inherit;
}
/* ── Блок одной номинации ─────────────────────────────────── */
.laureaty-nom {
display: flex;
flex-direction: column;
gap: 20px;
max-width: none; /* перебиваем глобальный body:not(.home) .container h1 + div { max-width:880px } */
}
.laureaty-nom__title {
margin: 0;
font-weight: 700;
font-size: clamp(20px, 3vw, 30px);
line-height: 1.2;
color: var(--igp-text);
text-align: center;
}
/* ── Бейджи мест — «игровая» плашка-награда ───────────────── */
.laureaty-badge {
--badge-bg-1: #3a3f4b; /* верх «металла» */
--badge-bg-2: #1b1e26; /* низ «металла» */
--badge-ink: #f4f6fb;
position: relative;
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 7px 16px;
border-radius: 999px;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: var(--badge-ink);
background: linear-gradient(155deg, var(--badge-bg-1) 0%, var(--badge-bg-2) 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
isolation: isolate;
}
/* Глянцевый блик по верху пилюли */
.laureaty-badge::after {
content: "";
position: absolute;
z-index: -1;
inset: 1px 1px auto 1px;
height: 45%;
border-radius: 999px 999px 40% 40%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), transparent);
pointer-events: none;
}
/* Модификаторы --gold/--silver/--bronze в разметке оставлены для совместимости,
но визуально все плашки одинаковы: отдельных правил для них нет — они наследуют
единый «игровой» вид от .laureaty-badge. */
/* ── Победитель ───────────────────────────────────────────── */
.laureaty-winner {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: stretch;
background: var(--igp-surface);
border: 1px solid var(--igp-border);
border-radius: 18px;
overflow: hidden;
box-shadow: var(--igp-shadow);
}
.laureaty-winner__cover {
/* Фиксированная половина — чтобы ширина обложки была ОДИНАКОВОЙ у всех
победителей и не «плавала» от длины описания справа. */
display: block;
flex: 0 0 50%;
max-width: 50%;
text-decoration: none;
}
.laureaty-winner__info {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
}
.laureaty-winner__name {
margin: 0;
font-weight: 700;
font-size: clamp(18px, 2.4vw, 26px);
line-height: 1.25;
color: var(--igp-text);
}
.laureaty-winner__desc {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--igp-text-muted);
}
/* ── Финалисты ────────────────────────────────────────────── */
.laureaty-finalists__line {
font-weight: 600;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--igp-text-muted);
padding-top: 4px;
}
.laureaty-finalists {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.laureaty-finalist {
display: flex;
flex-direction: column;
flex: 1 1 240px;
max-width: calc(50% - 10px);
background: var(--igp-surface);
border: 1px solid var(--igp-border);
border-radius: 14px;
overflow: hidden;
}
.laureaty-finalist__cover {
position: relative;
display: block;
text-decoration: none;
}
.laureaty-finalist__cover .laureaty-badge {
position: absolute;
z-index: 2;
top: 10px;
left: 10px;
}
.laureaty-finalist__info {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
flex: 1 1 auto;
}
.laureaty-finalist__name {
margin: 0;
font-weight: 600;
font-size: 16px;
line-height: 1.3;
color: var(--igp-text);
}
/* ── Кнопки ───────────────────────────────────────────────────
Селекторы усилены `body:not(.home) .laureaty` — иначе глобальное
правило `body:not(.home) .container a` (site.css) красит текст
ссылки в --igp-accent (красный на красном → не видно). */
body:not(.home) .laureaty a.laureaty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
margin-top: auto;
padding: 9px 22px;
border-radius: 999px;
border: 1px solid transparent;
font-weight: 600;
font-size: 14px;
text-decoration: none;
cursor: pointer;
background: var(--igp-accent);
/* !important — перебиваем агрессивное глобальное
body:not(.home) .container a {color:--igp-accent} (специфичнее нашего). */
color: var(--igp-on-accent) !important;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body:not(.home) .laureaty a.laureaty-btn:hover {
background: var(--igp-accent-hover);
color: var(--igp-on-accent) !important;
}
body:not(.home) .laureaty a.laureaty-btn--ghost {
background: transparent;
color: var(--igp-text) !important;
border-color: var(--igp-border);
}
body:not(.home) .laureaty a.laureaty-btn--ghost:hover {
background: var(--igp-accent);
color: var(--igp-on-accent) !important;
border-color: var(--igp-accent);
}
.laureaty-empty {
text-align: center;
color: var(--igp-text-muted);
padding: 40px 0;
}
/* ── Обложка: плейсхолдер ленивой загрузки ────────────────────
Канон проекта (как в games-archive.css / games-filter):
.game-item-thumb со скелетоном (::before иконка + ::after shimmer),
.game-item-thumb__img появляется по onload → .is-loaded.
Дублируем тут, т.к. games-archive.css на этой странице не подключается. */
.laureaty .game-item-thumb {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--igp-surface-alt);
overflow: hidden;
}
/* Иконка-плейсхолдер по центру */
.laureaty .game-item-thumb::before {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 48px;
height: 48px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .6;
pointer-events: none;
}
/* Shimmer */
.laureaty .game-item-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255, 255, 255, 0) 100%);
transform: translateX(-100%);
animation: laureatyThumbShimmer 1.4s infinite;
pointer-events: none;
}
@keyframes laureatyThumbShimmer {
100% { transform: translateX(100%); }
}
/* Картинка поверх скелетона */
.laureaty .game-item-thumb__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity .25s ease;
z-index: 1;
}
.laureaty .game-item-thumb.is-loaded::before,
.laureaty .game-item-thumb.is-loaded::after {
display: none;
}
.laureaty .game-item-thumb.is-loaded .game-item-thumb__img {
opacity: 1;
}
/* Dark: приглушаем иконку и shimmer (как в games-archive.css). */
html[data-theme="dark"] .laureaty .game-item-thumb::before {
opacity: .35;
}
html[data-theme="dark"] .laureaty .game-item-thumb::after {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.08) 50%,
rgba(255, 255, 255, 0) 100%);
}
/* ── Фикс скругления углов обложки на iOS Safari ─────────────
На iOS overflow:hidden родителя с border-radius НЕ обрезает
вложенный .game-item-thumb (свой overflow:hidden + absolute img),
углы изображения «вылезают». Решение — дублируем border-radius
на самом thumb там, где он касается края карточки. */
.laureaty-finalist__cover .game-item-thumb {
border-radius: 13px 13px 0 0; /* верхние, как у .laureaty-finalist (14px - 1px border) */
}
.laureaty-winner__cover .game-item-thumb {
border-radius: 17px 0 0 17px; /* левые, как у .laureaty-winner (18px - 1px border) */
}
/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width: 768px) {
.laureaty .container { gap: 36px; }
/* Текст плашки-заголовка по центру на мобилке. */
.lozung.lozung--laureaty { align-items: center; text-align: center; }
body:not(.home) .container .lozung.lozung--laureaty h1 { text-align: center; width: 100%; }
.laureaty-winner { flex-direction: column; }
.laureaty-winner__cover { flex: 1 1 auto; max-width: 100%; width: 100%; }
/* В колонку обложка победителя сверху — скругляем верхние углы, не левые. */
.laureaty-winner__cover .game-item-thumb { border-radius: 17px 17px 0 0; }
.laureaty-finalist { max-width: 100%; flex-basis: 100%; }
}