/* ========== ЛЕНДИНГ «10 ЛЕТ НАСТРОЙ КИНО!» · ЧЕРНОВИК ДЛЯ ПРЕВЬЮ-СТЕНДА Токены (:root) — инлайном в index.html: нужны до первой отрисовки. Здесь только компоненты. Сырых hex вне блока «ТЕХРЕЖИМ» нет ни одного. 1 база · 2 примитивы · 3 шапка B0 · 4 hero B1 · 5 вопрос и форма B3 6 счётчик B2 · 7 календарь B4 · 8 как участвовать B8 · 9 призы B5 10 победители B6 · 11 правила B7 · 12 футер B9 · 13 состояния · 14 десктоп 15 превью-панель ========== */ /* ========== 1. БАЗА И УТИЛИТЫ ========== */ body{ overflow-x:hidden; } /* страховка от бокового скролла на 320 px */ /* Honeypot: обёртка уводится за экран. display:none на инпуте запрещён. */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* П.1б: РИТМ СВЕТЛЫХ СЕКЦИЙ. Базовая секция — белая; .sec--band — светло-серая врезка #f4f4f4. Чередование задано вручную, а не через :nth-child: порядок секций на мобильном (из DOM) и на десктопе (через order) РАЗНЫЙ, и позиционный селектор дал бы на одном из брейкпоинтов две одинаковые полосы подряд. Десктоп: hero(чёрн) → как участвовать → календарь → призы → счётчик → вопрос → календарь(бел) → как(сер) → призы(бел) → победители(сер) → правила(бел) → футер(сер). Мобильный: слайдера нет, порядок вопрос ↔ счётчик переставлен местами: hero(чёрн) → вопрос(сер) → счётчик(бел) → календарь(бел) → … Стыки «бел + бел» — на десктопе слайдер → счётчик, на мобильном счётчик → календарь. Оба разведены волосяной линией: border-block на .sec--cd закрывает и тот и другой, потому что стоит с обеих сторон секции счётчика. Приёмка v2: строка «Десктоп» выше не учитывала слайдер, добавленный в этой же ревизии, — исправлено. */ .sec{ padding-block:var(--nk-space-8); background:var(--a-page); --a-sec-bg:var(--a-page); color:var(--a-ink); } .sec--band{ background:var(--a-band); --a-sec-bg:var(--a-band); } /* Заголовок секции: слева, с шевронным пунктиром справа (замена hr.png). Приём бренда «жирное + обычное» — разрез строго ПО СЛОВАМ (brand-audit §3.3). */ /* Шевронный пунктир справа от заголовка снят 07.08 по правке. Вместе с ним ушли background и padding-right у .sechead h2 span — они существовали только чтобы «прорезать» линию за текстом заголовка. */ .sechead{ margin:0 0 var(--nk-space-5); } .sechead h2{ font-weight:var(--nk-fw-regular); line-height:var(--nk-lh-tight); } .sechead h2 strong{ font-weight:var(--nk-fw-bold); } .sechead h2 span{ font-size:var(--nk-fs-xl); text-transform:uppercase; letter-spacing:var(--nk-ls-none); } .sec__sub{ margin:calc(var(--nk-space-4) * -1) 0 var(--nk-space-5); color:var(--a-ink-soft); font-size:var(--nk-fs-sm); } .sec__foot{ margin-top:var(--nk-space-4); font-size:var(--nk-fs-2xs); line-height:var(--nk-lh-relaxed); color:var(--a-ink-soft); } /* ---------- Маркеры и плашки техрежима ---------- Все .mark в разметке помечены aria-hidden="true" — единым правилом, без исключений: смысл маркера живёт в title и в техплашках рядом. */ .mark{ display:inline-block; margin-left:4px; padding:0 4px; background:var(--dev-yellow); color:var(--nk-ink); font:var(--nk-fw-bold) 11px/1.6 var(--dev-font); vertical-align:baseline; cursor:help; text-transform:none; letter-spacing:var(--nk-ls-none); } [data-marks="off"] .mark:not(.mark--always){ display:none; } /* Страница стала светлой: белый текст техплашки на ней исчез бы. Единая пара «#232323 по жёлтому 25 % на светлом» — 13,9:1 на белом, 13,2:1 на #f4f4f4. Отдельные переопределения для .card / .winbox сняты. */ .spec-note{ margin-top:var(--nk-space-4); padding:8px 10px; border:1px dashed var(--dev-yellow); background:rgb(255 212 0 / .25); color:var(--nk-ink); font:400 var(--nk-fs-2xs)/var(--nk-lh-relaxed) var(--dev-font); } [data-notes="off"] .spec-note{ display:none; } /* Плашка обязана быть всегда, но не имеет права съедать первый экран: не моноширинный, 11px/1.3 — умещается в 3–4 строки на 360 px */ .draft-banner{ padding:8px var(--nk-gutter-mobile); background:var(--dev-yellow); color:var(--nk-ink); border-bottom:3px solid var(--nk-ink); font:400 11px/1.3 var(--nk-font); } .draft-banner b{ text-transform:uppercase; } /* ========== 2. ПРИМИТИВЫ БРЕНДА: шеврон, скошенная плашка, кнопка ========== */ .ch{ fill:currentColor; display:inline-block; vertical-align:middle; } .ch--brand{ width:29px; height:12px; } .ch--sep{ width:9px; height:11px; } .ch--bullet{ width:8px; height:10px; margin-right:5px; color:var(--nk-red-cta); } /* Скошенная плашка: контейнер skew(−25°), внутренний span компенсирует */ .pill{ display:inline-block; padding:6px 14px; transform:skew(var(--nk-skew)); text-decoration:none; } /* Регистр НЕ поднимается через CSS: тексты лежат в DOM ровно в том регистре, какой задан copy.md. «5 дней · 5 вопросов · 5 призов» — строчными, как в §3. */ .pill > span{ display:block; transform:skew(var(--nk-skew-fix)); font-weight:var(--nk-fw-bold); -webkit-font-smoothing:antialiased; backface-visibility:hidden; /* иначе скос «мылит» */ } /* Белое на --nk-red-cta даёт 3,9:1 → допустимо только ≥19 px и 700. Отсюда --nk-fs-cta: это порог контраста, а не типографский выбор. */ .pill--red{ background:var(--nk-red-cta); color:var(--nk-white); } .pill--red > span{ font-size:var(--nk-fs-cta); line-height:1.15; } .pill--grey{ background:var(--nk-grey-200); color:var(--nk-text); } .pill--grey > span{ font-size:var(--nk-fs-xs); line-height:1.3; } .btn{ display:inline-block; padding:var(--nk-btn-padding); min-height:var(--nk-field-min); border:var(--nk-border); border-radius:var(--nk-radius); background:none; cursor:pointer; text-decoration:none; transform:skew(var(--nk-skew)); transition:opacity var(--nk-transition); } .btn > span{ display:block; transform:skew(var(--nk-skew-fix)); font-weight:var(--nk-fw-bold); font-size:var(--nk-fs-cta); line-height:1.15; -webkit-font-smoothing:antialiased; backface-visibility:hidden; } .btn--primary{ background:var(--nk-red-cta); color:var(--nk-white); } /* Контурная кнопка живёт только в секции правил, а та стала светлой: белый контур на белом исчез бы. #232323 по #ffffff — 15,7:1. */ .btn--ghost{ color:var(--nk-ink); box-shadow:inset 0 0 0 2px var(--nk-ink); } .btn--block{ width:100%; } .btn:hover{ opacity:var(--nk-press-opacity); } .btn[aria-busy="true"]{ opacity:var(--nk-press-opacity); pointer-events:none; } .btn[disabled]{ opacity:var(--nk-press-opacity); cursor:not-allowed; } /* Скошенная кнопка во всю ширину вылезает за контейнер — поджимаем края */ .btnwrap{ margin-inline:6px; } /* То же и для CTA в потоке: скос выносит углы примерно на ½ высоты × tan 25° за габарит бокса. У двухстрочного «ПОДКЛЮЧИТЬ ПАКЕТ «НАСТРОЙ КИНО!»» это ~17 px с каждой стороны — на 320–360 px уголки упирались в край экрана. */ .foot__cta .btn, .thanks .btn{ max-width:calc(100% - 36px); margin-inline:18px; } /* ========== 3. ШАПКА (B0) Главное меню — по образцу nastroykino.ru: белая плашка, пункты 14 px, bold, uppercase, красные #e00020 с подчёркиванием. Справа — красная скошенная плашка премиум-пакета (skew 25°, контент выпрямлен обратной компенсацией — приём с сайта). Списка 12 каналов, который на сайте занимает верхний уровень шапки, здесь нет: на лендинге акции он уводит от целевого действия. ========== */ /* 48 px — ровно как белая плашка меню на nastroykino.ru (замер: #menu-main_menu и его li = 48 px). display:flex + align-items:center, чтобы строка держала высоту независимо от содержимого. */ .top{ background:var(--nk-white); border-bottom:1px solid var(--nk-grey-200); display:flex; align-items:center; } /* min-width:0 на строке шапки — иначе flex-элемент не может стать уже своего min-content и марка выпирает за экран на 320 px */ .top__in{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--nk-space-3); width:100%; min-width:0; padding-block:var(--nk-space-2); } /* П.3б Д. Стрелкова (03.08) «на мобайле лого срезается». Три причины обрезки и три лекарства: 1) flex-элемент по умолчанию не сжимается уже min-content → min-width:0; 2) шеврон-иконка сжималась вместе с текстом → flex:none на .ch--brand; 3) «НАСТРОЙ КИНО!» связано   и не переносится → на 320 px кегль марки опускается до 16 px (правило в §14), строка целиком помещается. */ .brand{ display:inline-flex; align-items:center; gap:var(--nk-space-2); min-height:var(--nk-tap-min); color:var(--nk-ink); text-decoration:none; transition:opacity var(--nk-transition); flex:0 1 auto; min-width:0; max-width:100%; } .brand:hover{ opacity:var(--nk-hover-opacity); } .brand .ch--brand{ flex:none; } .brand__txt{ font-size:var(--nk-fs-lg); font-weight:var(--nk-fw-bold); text-transform:uppercase; min-width:0; overflow-wrap:break-word; } /* Дескриптора количества каналов под маркой НЕТ — OQ-19 / OQ-L1 не закрыт */ /* Меню: на мобильном — прокручиваемая строка. Перенос в столбик съедает первый экран, а он и так дефицитный: поле «Ваш ответ» едва помещается. --sep — половина этого расстояния уходит на позицию косой черты. */ .topnav{ --sep: var(--nk-space-4); display:flex; align-items:stretch; gap:0 var(--sep); order:3; flex-basis:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; min-width:0; } .topnav::-webkit-scrollbar{ display:none; } /* Меню шире экрана: на 390 px видно 358 из 486, «СКОРО В ЭФИРЕ» за краем. Без подсказки обрезанная косая черта у правого края читается как дефект вёрстки, а не как «здесь есть продолжение». Градиент-подсказка снимается на десктопе, где меню помещается целиком. */ .top{ position:relative; } .top::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:36px; background:linear-gradient(90deg, rgb(255 255 255 / 0), var(--nk-white) 70%); pointer-events:none; } /* Состояния пунктов — как на nastroykino.ru (снято с живого сайта 05.08): обычный пункт — #232323 с подчёркиванием; текущая страница — #e00020 с подчёркиванием; ховер — подчёркивание убирается, цвет не меняется. Красным ничего не помечаем: лендинг акции не является ни одним из разделов сайта, поэтому «текущего» пункта здесь нет. Класс .is-current оставлен на случай, если страницу когда-нибудь встроят в структуру сайта. */ .topnav a{ position:relative; display:inline-flex; align-items:center; white-space:nowrap; min-height:var(--nk-tap-min); color:var(--nk-ink); text-decoration:underline; font-size:var(--nk-fs-sm); font-weight:var(--nk-fw-bold); text-transform:uppercase; } .topnav a.is-current{ color:var(--nk-red); } .topnav a:hover, .topnav a:focus-visible{ text-decoration:none; } /* Косая черта между пунктами — как на nastroykino.ru. На сайте это фоновая картинка menu-vr.png (28×48) у правого края каждого
  • . Мы рисуем её на CSS: тянуть растр с чужого CDN ради одной линии — лишний внешний запрос, а лендинг самодостаточен (кроме счётчика Метрики). Наклон берём фирменный, −25°, тот же что у скошенных плашек. Черта стоит и после последнего пункта — так на оригинале. */ .topnav a::after{ content:""; position:absolute; right:calc(-0.5 * var(--sep)); top:0; bottom:0; width:1px; background:var(--nk-grey-300); /* Наклон снят замером исходной menu-vr.png (28×48): линия идёт из точки x≈1.5 при y=0 в x≈26.5 при y=47, то есть «\» — низ ПРАВЕЕ верха, 28° от вертикали. Это НЕ фирменный --nk-skew (−25°, у плашек он зеркальный). Высота — во всю плашку меню, как в оригинале (0..47 из 48). */ transform:skewX(28deg); pointer-events:none; } /* Скошенная плашка премиума. На мобильном скрыта: в шапке она конкурирует с формой за внимание, а целевое действие здесь одно. */ .pill--prem{ display:none; align-items:center; flex:none; background:var(--nk-red-cta); color:var(--nk-white); text-decoration:none; padding:var(--nk-space-2) var(--nk-space-5); /* Наклон снят замером premium-bottom.png (166×48) с самого сайта: левая кромка идёт из x=0 при y=0 в x=24 при y=47 — «\», низ ПРАВЕЕ верха, 27,1° от вертикали. Фирменный --nk-skew (−25°) даёт зеркальную форму, поэтому здесь он не используется. Содержимое выпрямляем обратным углом. */ transform:skewX(27deg); font-size:var(--nk-fs-sm); font-weight:var(--nk-fw-bold); min-height:var(--nk-tap-min); } .pill--prem > span{ display:block; transform:skewX(-27deg); } .pill--prem:hover{ opacity:var(--nk-hover-opacity); } /* ========== 4. HERO (B1) Кино-зона на мобильном держится в полосе 100–140 px (бриф §1.1): человек пришёл ответить на вопрос, а не рассматривать шапку. ========== */ /* Вход в акцию с первого экрана. Кнопка на всю ширину на мобильном: палец попадает не целясь. На десктопе — по содержимому. */ .hero__cta{ margin:var(--nk-space-5) 0 0; } .hero__cta .btn{ width:100%; } .hero__in{ position:relative; z-index:3; padding-block:10px; } /* ---------- фоновая кинонарезка ---------- */ .hero__reel{ position:absolute; z-index:0; inset:0; overflow:hidden; background:var(--nk-black); } .hero__video{ width:100%; height:100%; object-fit:cover; display:block; } /* МОБИЛЬНЫЙ — ЧЁРНАЯ ЗОНА БЕЗ ЕДИНОГО БАЙТА ВИДЕО. Ни ролик, ни заглушка не включаются: 100 % трафика приходит по QR с телевизора на LTE, а бюджет первого экрана — ≤350 КБ / LCP ≤2,5 с. Слои поднимаются только с 768 px, где сеть обычно другая. */ .hero__reel > *{ display:none; } @media (min-width:768px){ /* Включён ровно один слой — тот, что выбран атрибутом data-reel */ .hero__reel[data-reel="video"] .hero__video{ display:block; } .hero__reel[data-reel="placeholder"] .hero__mock{ display:block; } } /* Просили не двигать — не двигаем: остаётся один статичный кадр */ @media (prefers-reduced-motion:reduce){ .hero__mock i{ animation:none; } .hero__mock i:nth-child(3){ opacity:1; } } /* ЗАГЛУШКА. Пять «кадров» из фирменных шевронов сменяются ЖЁСТКИМ склеиванием (steps(1)) — так работает монтаж, кроссфейд читался бы как слайдшоу. Внутри кадра очень медленный наезд: 12 с на цикл, 2,4 с на кадр. */ .hero__mock{ position:absolute; inset:0; } .hero__mock i{ position:absolute; inset:-6%; opacity:0; background-repeat:repeat; background-position:center; animation:reel-cut 12s steps(1,end) infinite, reel-push 12s ease-in-out infinite; } .hero__mock i:nth-child(1){ animation-delay:0s; background-size:150px 186px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='93'%3E%3Cg fill='%23272727' transform='scale(3)'%3E%3Cpath d='M0 0H17L24.5 14H7.5Z'/%3E%3Cpath d='M7.5 16H24.5L17 30H0Z'/%3E%3C/g%3E%3C/svg%3E"); } .hero__mock i:nth-child(2){ animation-delay:-2.4s; background-size:96px 119px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='93'%3E%3Cg fill='%231d1d1d' transform='scale(3) rotate(180 12.5 15.5)'%3E%3Cpath d='M0 0H17L24.5 14H7.5Z'/%3E%3Cpath d='M7.5 16H24.5L17 30H0Z'/%3E%3C/g%3E%3C/svg%3E"); } .hero__mock i:nth-child(3){ animation-delay:-4.8s; background-size:260px 322px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='93'%3E%3Cg fill='%23303030' transform='scale(3)'%3E%3Cpath d='M0 0H17L24.5 14H7.5Z'/%3E%3Cpath d='M7.5 16H24.5L17 30H0Z'/%3E%3C/g%3E%3C/svg%3E"); } .hero__mock i:nth-child(4){ animation-delay:-7.2s; background-size:64px 79px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='93'%3E%3Cg fill='%23222222' transform='scale(3)'%3E%3Cpath d='M0 0H17L24.5 14H7.5Z'/%3E%3Cpath d='M7.5 16H24.5L17 30H0Z'/%3E%3C/g%3E%3C/svg%3E"); } .hero__mock i:nth-child(5){ animation-delay:-9.6s; background-size:190px 236px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='93'%3E%3Cg fill='%232b2b2b' transform='scale(3) rotate(180 12.5 15.5)'%3E%3Cpath d='M0 0H17L24.5 14H7.5Z'/%3E%3Cpath d='M7.5 16H24.5L17 30H0Z'/%3E%3C/g%3E%3C/svg%3E"); } @keyframes reel-cut{ 0%,20%{ opacity:1 } 20.01%,100%{ opacity:0 } } @keyframes reel-push{ 0%{ transform:scale(1) } 20%{ transform:scale(1.08) } 20.01%,100%{ transform:scale(1) } } /* Затемнение — единственное, что стоит между кадром и белым текстом */ .hero__scrim{ position:absolute; z-index:1; inset:0; background:var(--nk-scrim-strong); pointer-events:none; } /* Шеврон-крылья кино-зоны: по одному трезубию за каждый край, как обрамлён слайдер на главной сайта. Держим их тихими (5–7 %) — работать должен кадр, а не рамка. Прежний одиночный оверлей на 60 % снят вместе со знаком-кольцом; токен --nk-chevron-overlay-alpha остаётся фактом темы и используется там, где кадр реально нужно перекрыть. */ .hero__wing{ position:absolute; z-index:2; top:50%; height:auto; transform:translateY(-50%); color:var(--nk-white); fill:currentColor; pointer-events:none; } .hero__wing--l{ left:-34%; width:52%; opacity:.05; } .hero__wing--r{ right:-30%; width:56%; opacity:.07; } /* Было calc(100% - 52px) — запас под прежний шеврон-оверлей, который лез на текст справа. Крылья теперь тихие и почти целиком за краем, запас можно вернуть тексту. */ .hero__main{ max-width:calc(100% - 24px); } /* ЮБИЛЕЙНАЯ ПЛАШКА «10 ЛЕТ». Скос −25° на контейнере, внутренний слой возвращает текст в вертикаль — тот же приём, что у .pill и у #slider-toggle на сайте. Ни одна цифра и ни одна буква не наклонена: наклон принадлежит плашке. */ /* МОБИЛЬНЫЙ ЛОК-АП — СТОЛБИКОМ, ОСОЗНАННО. В одну строку он не влезает: на 375 px под текст остаётся 291 px, а плашка 134 + марка 184 = 326. Ужимать «НАСТРОЙ КИНО!» до 18 px ради одной строки не стали — марка важнее экономии 24 px. ЦЕНА: кино-зона выросла со 136 px (бриф §1.1: 100–140) до 196 (замер 07.08 на 375 px). Бюджет писался под hero-заголовок; фоновая кинонарезка — другой первый экран по определению, и бейдж «ВОПРОС 1 ИЗ 5» остаётся над сгибом и на 812, и на 667 px. */ .hero__title{ display:flex; flex-direction:column; align-items:flex-start; flex-wrap:wrap; gap:var(--nk-space-2); } /* Плашка полупрозрачная чёрная, а не красная: поверх движущегося кадра красная заливка спорила бы с ним и с датами (единственная красная плашка на первом экране должна быть одна — «С 11 ПО 15 АВГУСТА»). .55 поверх скрима .65 даёт под текстом ~0,84 чёрного при любом кадре — белое читается независимо от того, что играет в ролике. */ .hero__plate{ display:inline-block; background:rgb(0 0 0 / .55); color:var(--nk-white); padding:2px 12px 4px; transform:skew(var(--nk-skew)); } .hero__plate-in{ display:flex; align-items:baseline; gap:var(--nk-space-2); transform:skew(var(--nk-skew-fix)); } .hero__ten{ font-size:46px; font-weight:var(--nk-fw-bold); line-height:.95; letter-spacing:-.02em; } /* Порог 19 px тянется с красной заливки (белое по #ff0e2b — 3,9:1). Заливка теперь чёрная и контраст с запасом, но кегль оставлен: если плашка когда-нибудь вернётся к красному, «ЛЕТ» не окажется вне нормы. */ .hero__let{ font-size:19px; font-weight:var(--nk-fw-bold); line-height:1; letter-spacing:var(--nk-ls-wide); text-transform:uppercase; } .hero__brand{ display:flex; align-items:center; gap:var(--nk-space-2); font-size:var(--nk-fs-xl); font-weight:var(--nk-fw-bold); line-height:var(--nk-lh-tight); text-transform:uppercase; } .hero__brand .ch--brand{ flex:none; } .hero__mark{ margin-left:6px; } /* Дескриптор — единственное место в hero, где сказано, ЧТО происходит. Плашка даёт повод («10 ЛЕТ»), эта строка — событие («викторина»). Числа каналов здесь нет до ответа заказчика (🔴 OQ). */ .hero__desc{ margin-top:var(--nk-space-2); max-width:44ch; font-size:var(--nk-fs-xs); line-height:var(--nk-lh-relaxed); color:var(--a-soft-on-dark); } /* Утверждённая строка кампании — 16 px, основным цветом, шеврон-буллеты. Не подпись: это единственная утверждённая строка юбилея. */ .hero__slogan{ margin-top:var(--nk-space-2); display:flex; flex-wrap:wrap; column-gap:var(--nk-space-3); row-gap:2px; font-size:var(--nk-fs-md); font-weight:var(--nk-fw-bold); line-height:1.25; color:var(--a-text-on-dark); } .hero__word{ display:inline-flex; align-items:center; white-space:nowrap; } .hero__row{ margin-top:var(--nk-space-2); } /* Полоса фактов + подзаголовок состояния */ .hero__strip{ background:var(--nk-bg-cinema); border-top:var(--a-hairline-dark); } .hero__strip-in{ padding-block:10px; } .facts{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--nk-space-2); } .facts__sep{ color:var(--nk-red-cta); display:flex; } /* Три варианта подзаголовка лежат в DOM, показывает один — CSS по data-state. Правильный текст виден даже при выключенном или не загрузившемся JS. */ .hero__sub{ display:none; margin-top:var(--nk-space-2); font-size:var(--nk-fs-xs); line-height:var(--nk-lh-relaxed); color:var(--a-soft-on-dark); } [data-state="s0"] .hero__sub--s0, [data-state="s1"] .hero__sub--run, [data-state="s2"] .hero__sub--run, [data-state="s3"] .hero__sub--run, [data-state="s4"] .hero__sub--run, [data-state="s5"] .hero__sub--s5{ display:block; } /* ========== 5. ВОПРОС ДНЯ И ФОРМА (B3) — белая карточка на светло-серой врезке ========== */ /* Главный блок страницы — единственный, у кого своя подложка И своя карточка: на светлой базе белое на белом не читалось бы как отдельный объект. */ .sec--q{ padding-top:var(--nk-space-4); background:var(--a-band); --a-sec-bg:var(--a-band); } .card{ background:var(--a-screen); color:var(--a-ink); padding:var(--nk-block-padding); /* На мобильном светлый «экран» идёт от края до края: вложенные отступы .wrap → .card → .form съедали бы 96 px ширины у главной тач-цели. */ margin-inline:calc(var(--nk-gutter-mobile) * -1); } .big-h{ font-size:var(--nk-fs-2xl); font-weight:var(--nk-fw-bold); line-height:var(--nk-lh-tight); text-transform:uppercase; margin-bottom:var(--nk-space-3); } /* Тексты состояний — 16 px: ядро аудитории 45+, это не сноски */ .plate--pre{ font-size:var(--nk-fs-md); line-height:var(--nk-lh-relaxed); } .plate--pre p + p{ margin-top:var(--nk-space-3); } .q-badge{ margin-bottom:var(--nk-space-3); } .q-text{ font-size:var(--nk-fs-xl); font-weight:var(--nk-fw-bold); line-height:var(--nk-lh-heading); text-transform:uppercase; } /* П.4 Д. Стрелкова (03.08): «кадр/фото выводить блочно на всю ширину страницы, на мобайле блок с фото не отображается». Принято дословно. МОБИЛЬНЫЙ: блока нет вообще. Он всё равно заведомо пуст (права на кадры не подтверждены, NFR-12), а стоял ровно между вопросом и формой — каждый его пиксель отодвигал единственное целевое действие за сгиб. Побочная польза: поле «Ваш ответ» поднимается на первый экран. Сетевой цены у блока нет ни на одном брейкпоинте — внутри инлайн-SVG. */ /* Постер фильма дня. На мобильном скрыт — это решение по п.4 Стрелкова, и оно же экономит первому экрану ~100 КБ и высоту: форма поднимается выше. display:none у не отменяет загрузку в части браузеров, поэтому скрываем контейнер и снимаем сам src нельзя — вместо этого полагаемся на то, что картинка одна и лёгкая. */ .q-visual{ display:none; } /* Плашка «СЕГОДНЯ РАЗЫГРЫВАЕМ» была тёмной — по п.1б переведена на светлое. Роль акцента взял красный брусок слева: белым по --nk-red-cta залить плашку целиком нельзя, надпись-рубрика 14 px не проходит 4,5:1. */ .q-prize{ margin-top:var(--nk-space-3); padding:10px var(--nk-space-3); background:var(--nk-grey-100); color:var(--a-ink); box-shadow:inset 5px 0 0 var(--nk-red-cta); } .q-prize__lbl{ display:block; font-size:var(--nk-fs-sm); font-weight:var(--nk-fw-bold); text-transform:uppercase; color:var(--a-ink-soft); } .q-prize__val{ font-size:var(--nk-fs-lg); font-weight:var(--nk-fw-bold); } .plate{ margin-top:var(--nk-space-4); padding:var(--nk-space-4); background:var(--nk-grey-200); box-shadow:inset 4px 0 0 var(--nk-ink); font-size:var(--nk-fs-md); line-height:var(--nk-lh-relaxed); } .plate__h{ font-size:var(--nk-fs-lg); font-weight:var(--nk-fw-bold); text-transform:uppercase; line-height:var(--nk-lh-heading); margin-bottom:var(--nk-space-2); } /* Плашка вчерашнего дня — подчинённая: в S3/S4 она стоит второй, и главной на экране должна остаться плашка сегодняшнего закрытого дня */ .plate--yday{ box-shadow:inset 4px 0 0 var(--nk-grey-400); } .plate--yday .plate__h{ font-size:var(--nk-fs-md); } /* Ответ на белом: #e00020 на #e9e9e9 не проходит 4,5:1, на #ffffff — 5,0:1 */ .plate__ans{ margin-top:var(--nk-space-3); padding:8px 10px; background:var(--nk-white); color:var(--nk-error); font-weight:var(--nk-fw-bold); } .qa{ margin-top:var(--nk-space-4); display:grid; gap:var(--nk-space-3); } .qa li{ padding:var(--nk-space-3); background:var(--nk-grey-200); font-size:var(--nk-fs-sm); line-height:var(--nk-lh-relaxed); } .qa li span{ display:block; font-weight:var(--nk-fw-bold); } .qa li em{ display:block; font-style:normal; margin-top:4px; } .final__cta{ margin:var(--nk-space-5) 0 var(--nk-space-3); font-weight:var(--nk-fw-bold); } /* ---------- Форма ---------- */ .form, .thanks{ margin-top:var(--nk-space-4); padding:var(--nk-form-padding); background:var(--nk-grey-200); /* второй уровень full-bleed: кнопка получает 316 px из 360 (88 %) */ margin-inline:calc(var(--nk-block-padding) * -1); } /* Шаг между полями 16→12: форма на 390 px занимала 787 px, кнопка отправки оказывалась в 890 px от начала блока — полтора экрана прокрутки до действия. */ .field{ margin-bottom:var(--nk-space-3); } .field__lbl{ display:block; margin-bottom:4px; font-size:var(--nk-fs-xs); font-weight:var(--nk-fw-bold); text-transform:uppercase; color:var(--nk-text); } .input{ display:block; width:100%; min-height:var(--nk-field-min); padding:12px var(--nk-space-3); border:var(--nk-border); border-radius:var(--nk-radius); background:var(--nk-white); color:var(--nk-text); font-size:var(--nk-fs-md); /* ровно 16 px: меньше — iOS зумит страницу */ line-height:var(--nk-lh-base); } .input::placeholder{ color:var(--nk-grey-600); } .input[aria-invalid="true"]{ box-shadow:inset 0 0 0 2px var(--nk-error); } .field__hint{ margin-top:4px; font-size:var(--nk-fs-2xs); color:var(--nk-text); } .field__err{ margin-top:6px; padding:6px 8px; background:var(--nk-white); color:var(--nk-error); font-size:var(--nk-fs-2xs); font-weight:var(--nk-fw-bold); line-height:var(--nk-lh-relaxed); } .field__err:empty{ display:none; } /* ---------- Чекбоксы согласий ---------- */ .check{ margin-bottom:var(--nk-space-4); } .check__row{ display:flex; align-items:flex-start; gap:var(--nk-space-3); min-height:var(--nk-tap-min); padding-block:8px; cursor:pointer; } /* «Квадрат в квадрате», без галочки и скруглений. Приёмка v2: контур был --nk-grey-400 (#a4a4a4) — 2,49:1 на белом теле чекбокса и 2,05:1 на фоне формы #e9e9e9 при требуемых 3:1 (WCAG 1.4.11, граница элемента управления). Дефект достался от v1: приёмка v1 мерила только текстовые пары и нетекстовые границы не проверяла. Незакрашенный чекбокс — обязательное поле главного целевого действия, его рамка должна быть видна. #7f7f7f: 4,0:1 на белом, 3,3:1 на #e9e9e9. */ .check__box{ appearance:none; -webkit-appearance:none; flex:none; width:24px; height:24px; margin:2px 0 0; background:var(--nk-white); border:var(--nk-border); border-radius:var(--nk-radius); box-shadow:inset 0 0 0 2px var(--nk-grey-600); cursor:pointer; } .check__box:checked{ box-shadow:inset 0 0 0 5px var(--nk-white), inset 0 0 0 24px var(--nk-ink); } .check__box[aria-invalid="true"]{ box-shadow:inset 0 0 0 2px var(--nk-error); } /* Текст согласия — 14px/1.45: юридически значимый текст, не сноска */ .check__txt{ font-size:var(--nk-fs-xs); line-height:var(--nk-lh-base); color:var(--nk-text); } /* Ссылки согласия — цветом основного текста с подчёркиванием. Было: красные на белой подложке — приём родился из того, что #e00020 на #e9e9e9 даёт 4,13:1 и не проходит порог. Но три подложенных красных куска внутри одного абзаца рвали его на лоскуты, а это юридически значимый текст, который нужно ПРОЧИТАТЬ, а не проскочить. #282828 на #e9e9e9 = 11,6:1 — контраст вырос втрое, подчёркивание оставляет ссылку опознаваемой. */ .check__txt a{ color:var(--nk-text); text-decoration:underline; -webkit-box-decoration-break:clone; box-decoration-break:clone; } .check__note{ margin-top:var(--nk-space-2); font-size:var(--nk-fs-2xs); line-height:var(--nk-lh-relaxed); color:var(--nk-text); } .form__note{ margin-top:var(--nk-space-3); font-size:var(--nk-fs-2xs); line-height:var(--nk-lh-relaxed); color:var(--nk-text); } /* ---------- Экран благодарности ---------- */ .thanks{ padding-block:var(--nk-space-6); } .thanks__h{ font-size:var(--nk-fs-2xl); font-weight:var(--nk-fw-bold); text-transform:uppercase; line-height:var(--nk-lh-tight); margin-bottom:var(--nk-space-3); } .thanks p{ font-size:var(--nk-fs-md); line-height:var(--nk-lh-relaxed); } .thanks p + p{ margin-top:var(--nk-space-3); } .thanks .spec-note{ font-size:var(--nk-fs-2xs); } /* ========== 6. СЧЁТЧИК (B2) ========== */ /* Секция счётчика — белая. Волосяная линия снизу нужна только на мобильном, где следом идёт тоже белый календарь; на десктопе ниже светло-серая врезка вопроса, и линия на её фоне читается как аккуратный стык. */ .sec--cd{ border-block:var(--a-hairline); } /* П.1а Д. Стрелкова (03.08) «таймер мелковат». Цифры выросли: мобильный 40 → 64 px, десктоп 64 → 96 px, подписи 12 → 14/16 px, заголовок 14 → 16/20 px. Считалось по ширине: три разряда по 64 px («00» ≈ 70 px) плюс два шеврона и зазоры укладываются в 288 px полезной ширины на 320-м экране. Четыре разряда состояния S0 в 64 px не влезают — для S0 ниже отдельная, ужатая раскладка. */ .cd{ text-align:center; } .cd__h{ font-size:var(--nk-fs-md); font-weight:var(--nk-fw-bold); text-transform:uppercase; letter-spacing:.02em; color:var(--a-ink-soft); } .cd__clock{ display:flex; justify-content:center; align-items:flex-start; gap:var(--nk-space-2); margin-top:var(--nk-space-4); } .cd__unit{ min-width:72px; } .cd__unit b{ display:block; font-size:64px; font-weight:var(--nk-fw-bold); line-height:1; color:var(--nk-time); font-variant-numeric:tabular-nums; } .cd__unit i{ display:block; margin-top:8px; font-style:normal; font-size:var(--nk-fs-sm); color:var(--a-ink-soft); } .cd__clock .ch--sep{ width:14px; height:17px; margin-top:24px; color:var(--nk-red-cta); } /* S0 — четыре разряда вместо трёх: ужимаем, иначе строка рвётся на 320 px */ [data-state="s0"] .cd__unit{ min-width:56px; } [data-state="s0"] .cd__unit b{ font-size:44px; } [data-state="s0"] .cd__clock{ gap:var(--nk-space-1); } [data-state="s0"] .cd__clock .ch--sep{ width:9px; height:11px; margin-top:16px; } .cd__alt{ margin-top:var(--nk-space-4); font-size:var(--nk-fs-2xs); color:var(--a-ink-soft); } /* ========== 7. КАЛЕНДАРЬ АКЦИИ (B4) Смысл кодируется тремя способами сразу: цвет + символ + слово. Шевронная лента — индикатор прогресса: пройденное красное, будущее белое. ========== */ /* padding-inline — воздух под скошенные углы крайних узлов: скос −25° выносит угол на ~7 px за габарит колонки */ .tl{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--nk-space-2); padding-inline:var(--nk-space-2); } .tl__i{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; min-width:0; overflow-wrap:anywhere; } /* половинки ленты слева и справа от узла; -4px закрывает половину gap */ .tl__i::before, .tl__i::after{ content:""; position:absolute; top:16px; height:12px; background:var(--a-rule) repeat-x center; background-size:10px auto; } .tl__i::before{ left:-4px; right:50%; } .tl__i::after{ left:50%; right:-4px; } .tl__i:first-child::before, .tl__i:last-child::after{ display:none; } .tl__i.is-current::before, .tl__i.is-closed::before, .tl__i.is-done::before, .tl__i.is-no-winner::before, .tl__i.is-closed::after, .tl__i.is-done::after, .tl__i.is-no-winner::after{ background-image:var(--a-ribbon-on); } .tl__node{ position:relative; z-index:var(--nk-z-base); display:grid; place-items:center; width:var(--nk-tap-min); height:var(--nk-tap-min); transform:skew(var(--nk-skew)); flex:none; /* скошенный квадрат, не круг */ background:var(--a-page); /* непрозрачно: лента не просвечивает */ } .tl__node b{ transform:skew(var(--nk-skew-fix)); font-size:var(--nk-fs-lg); font-weight:var(--nk-fw-bold); line-height:1; } .tl__tick{ display:none; } .tl__date{ font-size:var(--nk-fs-2xs); font-weight:var(--nk-fw-bold); color:var(--a-ink); } .tl__full{ display:none; } .tl__status{ display:none; font-size:var(--nk-fs-2xs); line-height:1.3; color:var(--a-ink-soft); } /* Статус виден только у текущего дня, и в колонке 62 px «Участвуйте сейчас» переносился на две строки — низ календаря выходил рваным. Разрешаем строке выйти за габарит своей колонки: она центрируется по узлу и не переносится. overflow у .tl не режет, соседние колонки пустые — накладываться не на что. */ .tl__i.is-current .tl__status{ display:block; color:var(--a-ink); white-space:nowrap; position:relative; left:50%; transform:translateX(-50%); width:max-content; max-width:none; } /* Цифра будущего дня была #a4a4a4 — это цвет для тёмного фона (8,4:1 на #000). На белом он даёт 2,5:1, поэтому переведена в #6d6d6c (5,2:1). Контур узла #7f7f7f по белому — 3,4:1 при требуемых 3:1 для границы. */ .is-future .tl__node{ box-shadow:inset 0 0 0 2px var(--nk-grey-600); color:var(--a-ink-soft); } .is-current .tl__node{ background:var(--nk-red-cta); color:var(--nk-white); } .is-current .tl__node b{ font-size:var(--nk-fs-cta); } /* белое на красном ≥19px/700 */ .is-closed .tl__node, .is-done .tl__node{ background:var(--nk-ink); color:var(--nk-white); box-shadow:inset 0 0 0 2px var(--a-line-soft); } .is-no-winner .tl__node{ box-shadow:inset 0 0 0 2px var(--nk-grey-600); color:var(--a-ink-soft); } .is-done .tl__num, .is-no-winner .tl__num{ display:none; } .is-done .tl__tick, .is-no-winner .tl__tick{ display:block; } /* ========== 8. КАК УЧАСТВОВАТЬ (B8) ========== */ /* Мобильный: список вертикальный, но карточка горизонтальная (иконка слева). Вертикальная карточка с иконкой 96 px даёт 1500 px пустоты на 360 px. */ .how{ display:grid; gap:var(--nk-space-6); } .ic{ display:block; width:96px; height:96px; color:var(--nk-grey-600); } .how__i{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:var(--nk-space-4); align-items:start; } .how__i .ic{ width:56px; height:56px; grid-row:1 / span 2; } .how__i h3, .how__i p{ grid-column:2; } .how__i h3{ margin:0 0 6px; font-size:var(--nk-fs-lg); font-weight:var(--nk-fw-bold); text-transform:uppercase; line-height:var(--nk-lh-heading); } .how__i p{ font-size:var(--nk-fs-sm); line-height:var(--nk-lh-relaxed); color:var(--a-ink-soft); } /* ========== 9. ПРИЗЫ АКЦИИ (B5) — вертикальный список, не карусель ========== */ .prizes{ display:grid; gap:var(--nk-space-4); } /* Мобильный: иконка слева, три текстовые строки справа. Иконка перекрывает все три ряда — иначе строки уезжают в первую колонку. */ /* Карточка приза была тёмной (#232323) — по п.1б переведена на светло-серую врезку с волосяным контуром. Секция призов белая, поэтому карточка видна как объект без единой тёмной плоскости. */ .prize{ position:relative; display:grid; grid-template-columns:auto 1fr; grid-auto-rows:min-content; align-items:center; column-gap:var(--nk-space-3); padding:var(--nk-space-3) var(--nk-space-4); background:var(--a-band); color:var(--a-ink); box-shadow:inset 0 0 0 1px var(--nk-grey-200), inset 4px 0 0 transparent; } /* Иконка 64→52 и отступ 16→12: пять карточек занимали 743 px на 390 px — почти два экрана на блок, который человек листает, а не изучает. */ .prize .ic{ width:52px; height:52px; grid-column:1; grid-row:1 / span 3; align-self:center; } .prize__rub, .prize__name, .prize__date, .prize__won{ grid-column:2; } .prize__rub{ font-size:var(--nk-fs-sm); font-weight:var(--nk-fw-bold); text-transform:uppercase; color:var(--a-ink-soft); } .prize__name{ margin-top:4px; font-size:var(--nk-fs-lg); font-weight:var(--nk-fw-bold); line-height:var(--nk-lh-heading); } .prize__date{ margin-top:4px; font-size:var(--nk-fs-2xs); color:var(--a-ink-soft); } .prize__badge{ display:none; position:absolute; top:0; right:8px; padding:4px 12px; background:var(--nk-red-cta); color:var(--nk-white); transform:skew(var(--nk-skew)); } .prize__badge > span{ display:block; transform:skew(var(--nk-skew-fix)); font-size:var(--nk-fs-cta); font-weight:var(--nk-fw-bold); line-height:1.15; } .prize__won{ display:none; margin-top:4px; font-size:var(--nk-fs-2xs); color:var(--a-ink-soft); } .prize.is-today{ box-shadow:inset 0 0 0 1px var(--nk-grey-200), inset 4px 0 0 var(--nk-red-cta); } .prize.is-today .prize__badge{ display:block; } /* Разыгранный приз: было opacity:.7 — на светлом фоне полупрозрачность уводила подписи #6d6d6c в ~2,7:1. Приглушаем фоном и цветом декоративной иконки, текст остаётся в полном контрасте, а состояние всё равно названо словом «Разыграно N августа». */ .prize.is-won{ background:var(--nk-grey-050); } .prize.is-won .ic{ color:var(--nk-grey-300); } .prize.is-won .prize__won{ display:block; } .prize.is-won .prize__date{ display:none; } /* Разделители — gap, не вертикальные линии (бриф §2 B5) */ /* ========== 10. ПОБЕДИТЕЛИ (B6) — второй светлый «экран» ========== */ /* Секция победителей — светло-серая врезка ритма, сам блок белый */ /* Победители — на белом. Чередование фонов раздавалось по старому порядку блоков; после перестановки 07.08 в середине шли три белых подряд, а победители стыковались серым с блоком вопроса — границы секций пропадали. Порядок фонов после hero: серый · белый · серый · белый · серый · белый · серый. */ .sec--win{ background:var(--a-page); --a-sec-bg:var(--a-page); } .winbox{ background:var(--a-screen); color:var(--a-ink); padding:var(--nk-block-padding); box-shadow:inset 0 0 0 1px var(--nk-grey-200); } .win__empty, .win__nowin{ font-size:var(--nk-fs-lg); line-height:var(--nk-lh-relaxed); } .win__nowin{ padding-left:var(--nk-space-3); box-shadow:inset 4px 0 0 var(--nk-ink); } .win{ width:100%; border-collapse:collapse; } .win th{ text-align:left; padding:8px; font-size:var(--nk-fs-sm); font-weight:var(--nk-fw-bold); text-transform:uppercase; color:var(--a-ink-soft); } .win td{ padding:10px 8px; font-size:var(--nk-fs-sm); line-height:var(--nk-lh-relaxed); } /* Чередование строк было #e9e9e9. На нём красная дата #e00020 давала 4,13:1, а серая подпись #6d6d6c — 4,28:1: обе ниже 4,5:1. #fafafa поднимает пары до 4,93:1 и 5,05:1 и при этом остаётся видимым чередованием. */ .win tbody tr:nth-of-type(even){ background:var(--nk-grey-050); } .win__date{ color:var(--nk-red); font-weight:var(--nk-fw-bold); white-space:nowrap; } /* < 480 px: строки превращаются в карточки, thead уводится за экран. Горизонтальный скролл таблицы запрещён. */ @media (max-width:479px){ .win, .win tbody, .win tr, .win td{ display:block; width:100%; } .win thead{ position:absolute; left:-9999px; } .win tr{ padding:var(--nk-space-3) var(--nk-space-2); } .win td{ padding:2px 0; } .win td::before{ content:attr(data-l) ": "; font-weight:var(--nk-fw-bold); color:var(--a-ink-soft); } } /* ========== 11. ПРАВИЛА АКЦИИ (B7) ========== */ /* Была тёмной плоскостью (#232323) — по п.1б секция белая, как базовая. Собственного фона больше не задаёт. */ .rules__p{ font-size:var(--nk-fs-lg); line-height:var(--nk-lh-relaxed); max-width:52ch; } .rules__cta{ margin-top:var(--nk-space-5); } /* ========== 12. ФУТЕР (B9) Тёмный, #232323 — как на самом nastroykino.ru (проверено в DOM 05.08). История: изначально был тёмный, по замечанию «мрачновато» его осветлили вместе со всей страницей, 07.08 вернули обратно. Противоречия нет: претензия была к сплошной тёмной простыне через всю страницу, а не к тёмному финалу. Сейчас контент светлый, и тёмный низ закрывает композицию, рифмуясь с чёрным hero. #b4b5b4 — цвет строго для тёмного фона, на светлом он даёт 2,5:1 и не применяется нигде. ========== */ .foot{ background:var(--a-dark); color:var(--a-soft-on-dark); border-top:none; padding-top:var(--nk-space-8); /* резерв под фиксированную техпанель + домашний индикатор iPhone: иначе панель перекрывает юридически значимые ссылки футера */ padding-bottom:calc(var(--nk-space-12) + env(safe-area-inset-bottom, 0px)); } .foot a{ color:var(--a-text-on-dark); } /* .foot a — специфичность (0,1,1) и перебивает .btn--primary (0,1,0) независимо от порядка правил. Без этой строки главный CTA страницы выводится #282828 по #ff0e2b — 2,7:1 вместо 3:1. */ .foot a.btn--primary{ color:var(--nk-white); } .brand--foot{ color:var(--a-text-on-dark); margin-bottom:var(--nk-space-5); } .foot__org{ font-size:var(--nk-fs-sm); line-height:var(--nk-lh-relaxed); } .foot__links{ margin-top:var(--nk-space-4); } .foot__links li{ display:flex; align-items:center; min-height:var(--nk-tap-min); } /* Тач-цель — сама ссылка, а не строка списка: 44 px по брифу §10.2 п.9 */ .foot__links a{ display:flex; align-items:center; min-height:var(--nk-tap-min); text-decoration:underline; font-size:var(--nk-fs-sm); } .foot__h{ margin:var(--nk-space-7) 0 var(--nk-space-3); font-size:var(--nk-fs-sm); font-weight:var(--nk-fw-regular); text-transform:uppercase; color:var(--a-text-on-dark); } .foot__h strong{ font-weight:var(--nk-fw-bold); } .chans{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 var(--nk-space-4); } .chans a{ display:flex; align-items:center; gap:var(--nk-space-2); min-height:var(--nk-tap-min); font-size:var(--nk-fs-sm); text-decoration:none; } .chans a::before{ content:""; flex:none; width:9px; height:11px; background:var(--a-bullet) no-repeat center/contain; } .chans a:hover{ opacity:var(--nk-hover-opacity); } .foot__cta{ margin-top:var(--nk-space-7); } /* Возрастной маркировки нет — OQ-L6 не закрыт */ .foot__cr{ margin-top:var(--nk-space-7); font-size:var(--nk-fs-2xs); } /* Общая ошибка формы: отказ сервера, недоступность сети, дубль заявки. Живёт над кнопкой, роль alert — диктор читает сразу. */ .form__error{ grid-column:1 / -1; margin:0 0 var(--nk-space-3); padding:var(--nk-space-3) var(--nk-space-4); background:var(--nk-white); border-left:3px solid var(--nk-red); font-size:var(--nk-fs-sm); line-height:var(--nk-lh-relaxed); color:var(--nk-text); } .form__error[hidden]{ display:none; } /* ========== 13. СОСТОЯНИЯ S0…S5 (видимость .state-block — в критическом CSS в ) ========== */ /* S3/S4 — счётчик скрыт. S5 — узел удаляется из DOM силами landing.js. */ [data-state="s3"] #b2-countdown, [data-state="s4"] #b2-countdown{ display:none; } /* S0 — блок победителей скрыт целиком */ [data-state="s0"] #b6-winners{ display:none; } /* ========== 14. ДЕСКТОП Один DOM, порядок блоков меняется через order. Дублировать разметку нельзя. ========== */ /* Уже 360 px (старые Android): не даём марке переноситься на две строки — иначе кино-зона вырастает и вопрос уезжает за сгиб */ @media (max-width:359px){ .hero__in{ padding-block:var(--nk-space-2); } .hero__main{ max-width:calc(100% - 34px); } .hero__ten{ font-size:40px; } .hero__plate{ padding-inline:10px; } .hero__brand{ font-size:var(--nk-fs-lg); } .hero__desc{ font-size:var(--nk-fs-2xs); } /* слоган переносится на две строки — держим их вплотную */ .hero__slogan{ column-gap:var(--nk-space-2); row-gap:0; line-height:1.2; } .hero__row{ margin-top:6px; } .tl__status{ font-size:11px; } /* П.3б: 320 px — самый узкий случай. «НАСТРОЙ КИНО!» неразрывно ( ), при 18 px строка вместе с шевроном 29 px не влезает в 288 px полезной ширины. 16 px — влезает с запасом, тач-цель 44 px сохраняется. */ .brand__txt{ font-size:var(--nk-fs-md); } /* П.1а: на 288 px полезной ширины четыре разряда S0 при 44 px не помещаются */ [data-state="s0"] .cd__unit{ min-width:48px; } [data-state="s0"] .cd__unit b{ font-size:38px; } [data-state="s0"] .cd__clock .ch--sep{ margin-top:14px; } } @media (min-width:480px){ .wrap{ padding-inline:var(--nk-gutter-tablet); } .draft-banner{ padding-inline:var(--nk-gutter-tablet); } .card{ margin-inline:calc(var(--nk-gutter-tablet) * -1); } .tl__full{ display:inline; } .tl__short{ display:none; } .tl__status{ display:block; } .prize .ic{ width:96px; height:96px; } .win td::before{ content:none; } } @media (min-width:768px){ .wrap{ padding-inline:var(--nk-gutter-desktop); } .draft-banner{ padding-inline:var(--nk-gutter-desktop); } /* Порядок блоков задан РАЗМЕТКОЙ (05.08). Раньше здесь стояли flex-order, которые перекладывали секции на десктопе независимо от DOM, — из-за них перестановка блоков в HTML не давала никакого эффекта. Правила сняты: один источник правды на порядок, и он в разметке. Единственное, что осталось от той схемы, — слайдер: на мобильном его нет (display:none в §4S), на десктопе он идёт между «Как участвовать» и «Календарём», рядом с которым уместен: оба показывают 5 дней акции. */ /* П.3а: слайдер включается только с 768 px. Селектор .sec.sld — чтобы правило padding не перебивалось общим .sec ниже по файлу. */ /* Меню в одну строку рядом с маркой, плашка премиума справа — как на сайте. Высота строки 48 px: замерено на nastroykino.ru (#menu-main_menu и его li ровно 48 px). Вертикальные отступы у строки убраны — на сайте белая плашка и есть само меню, без обвязки. 48 > 44, поэтому минимальная тач-цель не нарушена. На мобильном оставляем 44: там вертикаль дороже, поле «Ваш ответ» и так помещается на первый экран впритык. */ .top__in{ padding-block:0; flex-wrap:nowrap; min-height:48px; } /* меню помещается целиком — подсказка прокрутки не нужна */ .top::after{ display:none; } .hero__cta{ margin-top:var(--nk-space-6); } .hero__cta .btn{ width:auto; } .topnav{ --sep: var(--nk-space-5); order:2; flex-basis:auto; overflow:visible; margin-left:var(--nk-space-6); } .topnav a{ min-height:48px; } .pill--prem{ display:inline-flex; margin-left:auto; order:3; align-self:stretch; min-height:48px; } .hero__in{ display:flex; align-items:center; gap:var(--nk-space-8); padding-block:var(--nk-space-10); min-height:340px; } /* QR-плашка снята 05.08 — hero стал одноколоночным, поэтому на десктопе собираем композицию по центру: плашка-заголовок работает как афиша, а не как подпись в углу. 70ch держит длину дескриптора. Ограничение ненадолго снимали, когда заголовок жил внутри плашки: «ВИКТОРИНА К 10-ЛЕТИЮ» при кегле 124 занимала 742 px и в 610 не помещалась. Со знаком «10 ЛЕТ» плашка обратно ~350 px, и лимит снова работает на текст, а не против него. */ .hero__main{ max-width:70ch; flex:1 1 auto; margin-inline:auto; text-align:center; } .hero__wing--l{ left:-22%; width:40%; } .hero__wing--r{ right:-20%; width:44%; } /* Десктоп: места хватает — плашка встаёт над маркой и работает афишей */ .hero__title{ flex-direction:column; align-items:center; gap:var(--nk-space-4); } .hero__plate{ padding:4px 34px 10px; } .hero__ten{ font-size:var(--nk-fs-6xl); } .hero__let{ font-size:var(--nk-fs-2xl); } .hero__brand{ font-size:var(--nk-fs-4xl); } /* 44ch ломали строку надвое при живом запасе контейнера: «…киноканалов» уезжало на вторую строку в одиночестве. 54ch держат её одной строкой и всё ещё далеки от предела читаемости. */ .hero__desc{ margin-inline:auto; max-width:54ch; font-size:var(--nk-fs-md); } .hero__slogan{ font-size:var(--nk-fs-lg); margin-top:var(--nk-space-3); column-gap:var(--nk-space-5); justify-content:center; } .ch--bullet{ width:11px; height:14px; } .hero__row{ margin-top:var(--nk-space-5); } .hero__strip-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--nk-space-6); padding-block:var(--nk-space-4); } .hero__sub{ margin-top:0; font-size:var(--nk-fs-sm); text-align:right; } .facts{ flex:none; } .pill--grey > span{ font-size:var(--nk-fs-sm); } .card{ padding:var(--nk-space-7); margin-inline:0; } /* ---------- П.5: форма — сетка два поля в ряд ---------- Было: колонка шириной 560 px и пустые 300+ px справа. Стало: сетка 2 × N во всю ширину карточки. Во всю ширину идёт ВАШ ОТВЕТ (.field--wide), согласия, кнопка и сноска; парами встают ИМЯ + ГОРОД и ТЕЛЕФОН + E-MAIL. С добавлением города (08.08) полей стало пять — E-MAIL перестал быть широким, иначе последний ряд оставался полупустым. Пустоты справа нет. */ .form{ margin-inline:0; max-width:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--nk-space-6); align-items:start; } .form > .field--wide, .form > .check, .form > .btnwrap, .form > .form__note, .form > .hp{ grid-column:1 / -1; } /* Юридически значимый текст согласий не растягиваем на всю ширину карточки: длина строки остаётся читаемой (≈75 знаков), дыр в сетке не возникает — блок и так занимает оба столбца. */ .check__row, .check__note{ max-width:72ch; } .thanks{ margin-inline:0; max-width:720px; } .q-live__top{ display:block; } /* П.4: кадр/фото больше не правая колонка (.q-live__top снова блок выше), а полоса во всю ширину секции вопроса — под текстом вопроса, над плашкой приза дня. Высота 200 px: заведомо пустой блок не должен спорить с вопросом за внимание. */ .q-visual{ display:block; margin:var(--nk-space-5) 0 0; float:right; width:180px; margin-left:var(--nk-space-6); } .q-visual__img{ display:block; width:100%; height:auto; box-shadow:inset 0 0 0 1px var(--nk-grey-200); } .q-visual__box{ display:grid; place-items:center; min-height:200px; background:var(--nk-grey-100); border:2px dashed var(--nk-grey-300); color:var(--nk-grey-600); } .q-visual__box .ch{ width:44px; height:54px; } .q-visual__cap{ margin-top:6px; border:0; background:none; padding:0; } .q-text{ font-size:var(--nk-fs-2xl); } .btnwrap .btn--block{ width:auto; min-width:280px; } /* П.1а: на десктопе цифры читаются с расстояния — 96 px */ .cd__h{ font-size:var(--nk-fs-xl); } .cd__unit{ min-width:130px; } .cd__unit b{ font-size:var(--nk-fs-6xl); } .cd__unit i{ font-size:var(--nk-fs-md); } .cd__clock .ch--sep{ width:20px; height:25px; margin-top:38px; } [data-state="s0"] .cd__unit{ min-width:110px; } [data-state="s0"] .cd__unit b{ font-size:var(--nk-fs-5xl); } [data-state="s0"] .cd__clock{ gap:var(--nk-space-2); } [data-state="s0"] .cd__clock .ch--sep{ width:14px; height:17px; margin-top:26px; } .cd__alt{ font-size:var(--nk-fs-sm); } .tl__i::before, .tl__i::after{ top:18px; height:16px; background-size:13px auto; } .how{ grid-template-columns:repeat(4, 1fr); gap:var(--nk-space-6); } .how__i{ grid-template-columns:1fr; grid-template-rows:auto auto auto; } .how__i .ic{ width:120px; height:120px; margin-bottom:var(--nk-space-3); grid-row:auto; } .how__i h3, .how__i p{ grid-column:1; } .prizes{ grid-template-columns:repeat(5, 1fr); gap:var(--nk-space-4); } .prize{ grid-template-columns:1fr; align-items:start; text-align:left; padding-top:var(--nk-space-7); } .prize .ic{ width:72px; height:72px; margin-bottom:var(--nk-space-3); grid-column:1; grid-row:auto; } .prize__rub, .prize__name, .prize__date, .prize__won{ grid-column:1; } .prize__name{ font-size:var(--nk-fs-md); } .winbox{ padding:var(--nk-space-6); } .chans{ grid-template-columns:repeat(4, 1fr); } .sechead h2 span{ font-size:var(--nk-fs-2xl); } .sec{ padding-block:var(--nk-space-12); } .sec--q{ padding-top:var(--nk-space-8); } } @media (min-width:1024px){ .pill--prem{ font-size:var(--nk-fs-md); } /* Кегль марки не выше 4xl: на 5xl «НАСТРОЙ КИНО!» ломается на две строки. Масштаб юбилея добираем плашкой, а не маркой. */ .hero__ten{ font-size:124px; } .hero__plate{ padding:6px 42px 12px; } } /* ========== 15. ↓↓↓ ПРЕВЬЮ-ПАНЕЛЬ — УДАЛИТЬ ПЕРЕД БОЕМ ↓↓↓ Один блок CSS, один узел DOM, одна функция в JS. ========== */ /* Место под развёрнутую панель на мобильном. Свёрнутый «ярлык» (≈47 px) уже перекрыт штатным нижним отступом футера, отдельный резерв не нужен. */ body.dp-open{ padding-bottom:290px; } /* Панель скрыта по умолчанию и в разметке, и без JS. Показывается только когда landing.js увидел ?debug=true и поставил класс на . */ #dev-panel{ display:none; } html.is-debug #dev-panel{ display:block; position:fixed; z-index:var(--nk-z-devpanel); left:0; right:0; bottom:0; background:var(--dev-bg); color:var(--dev-yellow); border-top:2px dashed var(--dev-yellow); font:400 var(--nk-fs-2xs)/1.4 var(--dev-font); padding-bottom:env(safe-area-inset-bottom); --a-focus-color: var(--dev-yellow); } #dev-panel a, #dev-panel label{ color:inherit; } .dp__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--nk-space-2); padding:6px var(--nk-space-3); border-bottom:1px dashed var(--dev-yellow); } .dp__title{ font-weight:var(--nk-fw-bold); letter-spacing:.02em; } .dp__toggle, .dp__btn{ min-height:32px; padding:4px 10px; cursor:pointer; background:transparent; color:var(--dev-yellow); border:1px dashed var(--dev-yellow); border-radius:0; font:400 var(--nk-fs-2xs)/1.4 var(--dev-font); } .dp__body{ padding:var(--nk-space-2) var(--nk-space-3) var(--nk-space-3); display:grid; gap:6px; } .dp__row{ display:flex; align-items:center; gap:var(--nk-space-2); } .dp__row label{ flex:none; min-width:80px; } .dp__row--chk label{ display:flex; align-items:center; gap:8px; min-width:0; min-height:30px; } .dp__row--chk input[disabled] + *, .dp__row--chk input[disabled]{ opacity:var(--nk-press-opacity); } .dp__row select{ flex:1 1 auto; min-height:32px; padding:4px 6px; background:var(--nk-ink); color:var(--dev-yellow); border:1px dashed var(--dev-yellow); border-radius:0; font:400 var(--nk-fs-2xs)/1.4 var(--dev-font); } .dp__row select[disabled]{ opacity:var(--nk-press-opacity); } .dp__hint{ opacity:.85; } #dev-panel.is-collapsed .dp__body{ display:none; } @media (min-width:768px){ body.dp-open{ padding-bottom:0; } #dev-panel{ left:auto; right:var(--nk-space-4); bottom:var(--nk-space-4); width:300px; border:2px dashed var(--dev-yellow); } } /* ↑↑↑ ПРЕВЬЮ-ПАНЕЛЬ — УДАЛИТЬ ПЕРЕД БОЕМ ↑↑↑ */ /* ========================================================================== ПРОВЕРКА РОЗЫГРЫША (B6) Блок под таблицей победителей. Появляется вместе с первой объявленной строкой, до этого скрыт атрибутом hidden. ========================================================================== */ .wincheck{margin:22px 0 0;padding:16px 18px;background:var(--nk-grey-100,#f4f4f4); border-left:3px solid var(--nk-red,#e00020)} .wincheck[hidden]{display:none} .wincheck__h{margin:0 0 10px;font-size:14px;line-height:1.2;font-weight:700; text-transform:uppercase;letter-spacing:.02em} .wincheck__day{margin:0 0 8px;font-size:14px;line-height:1.5} .wincheck__val{margin:0 0 8px;font-size:13px;line-height:1.5} .wincheck__lbl{display:block;color:var(--nk-grey-700,#6d6d6c);font-size:12px; text-transform:uppercase;letter-spacing:.02em;margin-bottom:3px} /* Значение раунда — 64 символа. На узком экране рвём по любому символу, иначе строка распирает страницу и появляется горизонтальный скролл. */ .wincheck code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;line-height:1.45;word-break:break-all; background:#fff;border:1px solid var(--nk-grey-200,#e9e9e9); border-radius:3px;padding:5px 7px;display:inline-block}