/* ============================================================ Народное голосование премии "Хлопушка" Standalone-раздел, все классы с префиксом .hp- Палитра и шрифт - как на публичной странице фильма (film-page.css) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&display=swap'); .hp-body { /* фирменная графика премии (Я.Диск Андрея, 04.09.2026): синий градиент, стеклянные рука/звезда/галочка. Градиент повторяет bg.png из того же комплекта (#041651 -> #002cb0), поэтому картинку фона не подключаем - CSS тянется на любую высоту страницы */ --hp-bg: #041651; --hp-bg-2: #002cb0; --hp-surface: rgba(6, 24, 84, 0.62); --hp-surface-2: rgba(3, 16, 66, 0.72); --hp-solid: #071a5e; --hp-border: rgba(255, 255, 255, 0.14); --hp-text: #f2f2f4; --hp-muted: rgba(255, 255, 255, 0.72); --hp-muted-2: rgba(255, 255, 255, 0.52); --hp-cyan: #33ccff; --hp-gold-a: #f7c100; --hp-gold-b: #f69400; --hp-gold-grad: linear-gradient(95deg, #f7c100 5%, #f69400 95%); margin: 0; min-height: 100vh; background: linear-gradient(180deg, #041651 0%, #01216f 48%, var(--hp-bg-2) 100%) fixed; color: var(--hp-text); font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .hp-body *, .hp-body *::before, .hp-body *::after { box-sizing: border-box; } .hp-body img { max-width: 100%; display: block; } .hp-body a { color: inherit; text-decoration: none; } /* ВАЖНО: у элементов с этим классом обычно есть второй класс (.hp-hero, .hp-section, .hp-header-in). Их вертикальные отступы задавать ТОЛЬКО через padding-block: короткая запись padding обнуляет боковые поля контейнера, и на телефоне текст встаёт вплотную к краю экрана (на десктопе не видно - там поля дают поля центрирования). */ .hp-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; } /* --- шапка --- */ .hp-header { position: sticky; top: 0; z-index: 50; background: rgba(4, 18, 66, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hp-border); } .hp-header-in { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; } .hp-logo { display: inline-flex; align-items: center; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; } .hp-logo img { height: 26px; width: auto; } .hp-logo span { background: var(--hp-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hp-back { margin-left: auto; font-size: 14px; color: var(--hp-muted); white-space: nowrap; } .hp-back:hover { color: var(--hp-text); } /* Статус входа зрителя в голосование - не путать с сессией сайта (админ/организатор) */ .hp-auth { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; line-height: 1.3; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hp-border); } .hp-auth--in { color: var(--hp-gold-a); border-color: rgba(247, 193, 0, 0.35); background: rgba(247, 193, 0, 0.08); } .hp-auth--out { color: var(--hp-text); background: var(--hp-surface-2); cursor: pointer; font: inherit; appearance: none; } .hp-auth--out:hover { border-color: var(--hp-gold-a); } /* Кнопка "Выйти" - только у админа (см. isAdmin в контроллере), спрятана до наведения/фокуса */ .hp-auth-logout { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: var(--hp-surface-2); color: var(--hp-text); font: inherit; font-size: 12px; line-height: 1.6; cursor: pointer; opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; margin-left: 0; overflow: hidden; pointer-events: none; white-space: nowrap; transition: opacity 0.15s, max-width 0.15s; } .hp-auth--hoverable:hover .hp-auth-logout, .hp-auth-logout:focus { opacity: 1; max-width: 80px; padding-left: 10px; padding-right: 10px; margin-left: 8px; pointer-events: auto; } .hp-auth-logout:hover { border-color: var(--hp-gold-a); } /* --- первый экран --- */ .hp-hero { position: relative; padding-block: 56px 32px; text-align: center; } .hp-hero > * { position: relative; z-index: 1; } .hp-kicker { display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8fe0ff; border: 1px solid rgba(51, 204, 255, 0.4); background: rgba(51, 204, 255, 0.08); border-radius: 100px; padding: 6px 14px; margin-bottom: 20px; } /* --- стеклянный декор первого экрана (hand/star/check из комплекта премии) --- Лежит ПОД текстом (z-index 0 против 1 у содержимого), кликов не ловит. Ни один элемент не выходит за правый край блока (отрицательных right нет): на ширине окна около 1100px это давало горизонтальную прокрутку всей страницы, а свечение - ещё и на телефонах, где сами картинки уже скрыты. Размеры и отступы уменьшаются на 1180px, ниже 900px картинки убираются совсем. Свечение под рукой - отдельным радиальным градиентом, иначе объект на синем выглядит наклейкой. */ .hp-hero-art { /* верх - строго 0: блок начинается сразу под липкой шапкой, иначе рука уезжает под неё и большой палец срезается кромкой шапки */ position: absolute; inset: 0 0 -10px; z-index: 0; pointer-events: none; } .hp-hero-art::before { content: ''; position: absolute; right: 0; top: -10px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(51, 204, 255, 0.22) 0%, rgba(51, 204, 255, 0) 68%); } .hp-hero-art img { position: absolute; display: block; } .hp-art-hand { right: 0; top: 26px; width: 172px; opacity: 0.85; } .hp-art-star { right: 30px; bottom: 0; width: 100px; opacity: 0.9; } .hp-art-check { left: 10px; top: 34px; width: 68px; opacity: 0.85; } /* ниже 1080px поля вокруг заголовка кончаются, и декор пошёл бы по тексту - остаётся только свечение */ @media (max-width: 1080px) { .hp-hero-art img { display: none; } } /* ширина ограничена, чтобы длинный заголовок не доходил до декора по краям */ .hp-hero h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.15; margin: 0 auto 16px; font-weight: 800; max-width: 980px; } .hp-hero p { color: var(--hp-muted); max-width: 720px; margin: 0 auto; font-size: 17px; } .hp-stats { display: flex; justify-content: center; gap: 32px; margin-top: 28px; flex-wrap: wrap; } .hp-stat b { display: block; font-size: 26px; font-weight: 800; } .hp-stat span { font-size: 13px; color: var(--hp-muted-2); } /* --- список номинаций --- */ .hp-section { padding-block: 24px 72px; } .hp-section h2 { font-size: 22px; margin: 0 0 18px; font-weight: 700; } .hp-noms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hp-nom { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 14px; backdrop-filter: blur(6px); padding: 20px; min-height: 132px; transition: border-color .18s, transform .18s, box-shadow .18s; } .hp-nom:hover { border-color: rgba(51, 204, 255, 0.55); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 10, 50, 0.35); } .hp-nom-name { font-weight: 700; font-size: 17px; line-height: 1.3; } .hp-nom-count { font-size: 13px; color: var(--hp-muted-2); } .hp-nom-go { font-size: 14px; color: #8fe0ff; font-weight: 600; } /* --- сетка номинантов --- Три в ряд: обложка стала вертикальной (постер 2:3), и при двух карточках в ряд она вырастала до 840px - карточка переставала помещаться на экран. При трёх в ряд обложка ~373x560, вся информация по-прежнему видна сразу: зритель ничего не раскрывает, чтобы прочитать, - нажимает только чтобы посмотреть трейлер и проголосовать. */ .hp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hp-card { background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 14px; backdrop-filter: blur(6px); overflow: hidden; display: flex; flex-direction: column; } /* 2:3 - пропорция киноплаката: номинанты приходят вертикальными постерами, и в горизонтальном окне object-fit: cover срезал у них название и логотипы. max-height не задаём - он ломает заданную пропорцию. Готовим картинки в 800x1200 (карточка ~373px, x2 под ретину) */ .hp-cover { position: relative; aspect-ratio: 2 / 3; background: var(--hp-surface-2); } .hp-cover img { width: 100%; height: 100%; object-fit: cover; } .hp-cover-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--hp-muted-2); font-size: 13px; } .hp-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity .18s; cursor: pointer; } .hp-cover:hover .hp-play, .hp-play:focus-visible { opacity: 1; } .hp-play i { width: 54px; height: 54px; border-radius: 50%; background: var(--hp-gold-grad); display: flex; align-items: center; justify-content: center; } .hp-play i::after { content: ''; border-left: 15px solid #111; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; } .hp-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .hp-card-title { font-weight: 700; font-size: 19px; line-height: 1.25; } .hp-card-meta { font-size: 13px; color: var(--hp-muted); } .hp-card-actions { margin-top: auto; display: flex; gap: 8px; padding-top: 8px; } /* описание сразу в карточке: 6 строк, дальше по ссылке разворачивается на месте */ .hp-card-descr { font-size: 14px; line-height: 1.55; color: var(--hp-muted); white-space: pre-line; } .hp-card-descr.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .hp-more { align-self: flex-start; background: none; border: none; padding: 0; cursor: pointer; color: var(--hp-gold-a); font: inherit; font-size: 13px; text-decoration: underline; } .hp-more:hover { color: var(--hp-gold-b); } .hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 100px; border: 1px solid var(--hp-border); background: transparent; color: var(--hp-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s; } .hp-btn:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.04); } .hp-btn--gold { background: var(--hp-gold-grad); color: #17150c; border-color: transparent; } .hp-btn--gold:hover { filter: brightness(1.06); background: var(--hp-gold-grad); } .hp-btn--wide { flex: 1; } .hp-btn[disabled] { opacity: .45; cursor: default; } /* --- окно номинанта --- */ .hp-modal { position: fixed; inset: 0; z-index: 100; display: none; background: rgba(1, 8, 38, 0.8); padding: 24px; overflow-y: auto; } .hp-modal.is-open { display: flex; align-items: flex-start; justify-content: center; } .hp-modal-box { background: var(--hp-solid); border: 1px solid var(--hp-border); border-radius: 16px; width: 100%; max-width: 860px; margin: auto; overflow: hidden; position: relative; } .hp-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } .hp-player { position: relative; aspect-ratio: 16 / 9; background: #000; } .hp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .hp-modal-body { padding: 20px 24px 24px; } .hp-modal-body h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; } .hp-modal-meta { color: var(--hp-muted); font-size: 14px; margin-bottom: 14px; } .hp-modal-descr { color: var(--hp-muted); font-size: 15px; white-space: pre-line; } .hp-modal-actions { margin-top: 20px; display: flex; gap: 10px; } /* отметка сделанного выбора: голос один и менять его нельзя */ .hp-btn--voted { border-color: rgba(120, 200, 120, 0.45); color: #8fd48f; background: rgba(120, 200, 120, 0.08); cursor: default; } .hp-modal-box--narrow { max-width: 460px; } /* вход зрителя: две кнопки-мессенджера друг под другом. Ширину даёт width: 100%, а НЕ .hp-btn--wide - там flex: 1, и в колонке он растянул бы кнопки по высоте, а не по ширине. */ .hp-bot-choice { display: flex; flex-direction: column; gap: 10px; } .hp-btn--bot { width: 100%; text-decoration: none; } .hp-modal-note { margin: 14px 0 0; color: var(--hp-muted); font-size: 12.5px; line-height: 1.5; } /* код для входа с компьютера: сканируется телефоном. Белая подложка обязательна - камеры плохо читают инверсный код на тёмном. */ .hp-qr { width: 216px; margin: 4px auto 12px; padding: 12px; background: #fff; border-radius: 12px; } .hp-qr svg { display: block; width: 100%; height: auto; } .hp-qr-status { text-align: center; margin-bottom: 10px; } .hp-qr-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* .hp-more писался под