/* * chrome.css - оформление ОБОЛОЧКИ сайта (шапка, шторка, подвал, подпись автора). * Заготовка комплекта Site Prompt: шаблоны/assets/css/chrome.css (08.09.2026, п. 134 * оценщика: путь skeleton/ Фабрики у читателя комплекта не существует). ВСЕ правила * mobile-first. * * Имя сменено с blocks.css намеренно: «блоки» в фабрике - это 159 блоков библиотеки * владельца, а здесь оболочка движка. Одно слово на две разные вещи путало бы роль, * которой велено «собрать страницу из блоков». * header-nav - drawer, проходящий 6/6 критериев модалки гейта (доктрина R16-R19). */ /* ================= header-nav ================= */ .site-header { position: sticky; top: 0; z-index: var(--z-header, 100); height: var(--header-h); background: var(--glass-bg); backdrop-filter: blur(10px); border-bottom: var(--hairline); } /* position: relative - опорная коробка для панели мегаменю (23.09.2026). Панель * растянута left:0/right:0 по этой полосе, а полоса и есть .container: отсюда * «на всю ширину рабочей зоны», без единого числа ширины в правиле. */ .site-header__bar { position: relative; height: var(--header-h); display: flex; align-items: center; gap: var(--s-3); } /* min-height 44 при картинке 36: тап-цель дотягивается до порога, а лого не растёт * и шапка в 60px остаётся прежней (гейт мерил 108x36). */ .site-header__logo { display: flex; align-items: center; flex: 0 0 auto; min-height: var(--tap-min); } .site-header__logo img { height: 36px; width: auto; } /* ЛОГОТИП В ТЁМНОЙ ТЕМЕ (06.09.2026). Пара файлов: layout.php печатает logo.png с * классом --light и logo-dark.png|svg с классом --dark, показывается один по * html[data-mode]. Канон переключения тот же, что у кнопки темы ниже: data-mode="dark" * поверх светлой базы, media-запроса на тему нет. Без второго файла классов нет - * поведение прежнее. */ .site-header__logo-img--dark { display: none; } html[data-mode="dark"] .site-header__logo-img--light { display: none; } html[data-mode="dark"] .site-header__logo-img--dark { display: inline-block; } /* Одноцветный тёмный растр без пары: 'logo_ink' => true в config/site.php даёт классу * logo--ink белую заливку фильтром. Возвращено из pokerspro.ru (filter) 06.09.2026: * там правило жило в проектном skin.css, а следующий сайт с тёмным растром получил бы * невидимую шапку. */ html[data-mode="dark"] .site-header__logo img.logo--ink { filter: brightness(0) invert(1); } .site-header__spacer { flex: 1 1 auto; } /* CTA в шапке - компактная на мобиле, но не ниже порога тапа: было 40px. */ .site-header__cta { min-height: var(--tap-min); padding-inline: var(--s-4); font-size: var(--t-small); } /* Бургер - ≥44px тап (R20). flex: 0 0 auto обязателен (23.09.2026): бургер стоит * последним в переполненном ряду шапки (знак, тема, призыв, бургер), у flex по * умолчанию flex-shrink: 1, и на 360 его сжимало до 22px при объявленных 44 - сниппет * 03 честно считал мелкую цель, а палец мазал по главной кнопке мобильной шапки. * Ширина объявлена числом, а отбирал её браузер. */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--tap-min); height: var(--tap-min); padding: 0; background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-md); color: var(--text); cursor: pointer; } .nav-toggle__box { position: relative; width: 20px; height: 14px; } .nav-toggle__box span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-quick,.15s) var(--ease,ease), opacity var(--dur-quick,.15s) ease; } .nav-toggle__box span:nth-child(1) { top: 0; } .nav-toggle__box span:nth-child(2) { top: 6px; } .nav-toggle__box span:nth-child(3) { top: 12px; } /* Десктопная навигация - скрыта на мобиле */ .nav-desktop { display: none; } /* Кнопка-инструмент в шапке (11.09.2026, comparecasinos.blog): на узком экране живёт в * шторке (.nav-drawer__action), в шапке появляется с 768. */ .site-header__action { display: none; margin-right: var(--s-2); } .nav-drawer__action { margin: var(--s-3) 0 var(--s-2); } @media (min-width: 768px) { .site-header__action { display: inline-flex; } .nav-drawer__action { display: none; } } /* ---- Выпадающий список хаба в шапке (11.09.2026, play-mines.click) ---- * Разметка: .nav-desktop__group > a + button[data-nav-sub-toggle] + .nav-sub. * В покое список display:none (правило 03 про переполнение: скрытое - только * display:none). Раскрывают три вещи: наведение на группу, фокус внутри группы * (клавиатура) и класс is-open от кнопки (тап, app.js). На мобиле .nav-desktop * скрыта целиком, свой список у шторки ниже. */ .nav-desktop__group { position: relative; display: inline-flex; align-items: center; gap: 2px; } /* 28px ЛИТЕРАЛОМ, а не --tap-min (24.09.2026, К2 второго осмотра). Шевронка живёт * только в десктопной полосе меню от 768, где указатель мышиный, и стоит вплотную к * своему пункту: сам пункт - цель в 44, а шевронка её дублирует, раскрывая тот же * список. Порог В9 (24) она держит, цели в 44 ей не положено - 44 рядом с 44 разорвали * бы полосу меню. На сенсорном экране до 768 её нет вовсе: там шторка. */ .nav-desktop__more { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin-left: -2px; background: transparent; border: 0; border-radius: var(--r-md); color: var(--text-mute); cursor: pointer; } .nav-desktop__more svg { width: 16px; height: 16px; transition: transform var(--dur-quick, .15s) var(--ease, ease); } .nav-desktop__more:hover, .nav-desktop__group:hover .nav-desktop__more, .nav-desktop__group.is-branch .nav-desktop__more { color: var(--brand); } .nav-desktop__more[aria-expanded="true"] svg { transform: rotate(180deg); } .nav-sub { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: calc(var(--z-header, 100) + 1); min-width: 300px; max-width: calc(100vw - 32px); padding: var(--s-3); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); } /* «Мостик» над списком: курсор по пути от ссылки к списку не выпадает из группы. */ .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* Раскрытие наведением - ТОЛЬКО без живого скрипта (23.09.2026). app.js ставит .nav-desktop * класс is-js и с этого момента ведёт наведение сам (открытие, отложенное закрытие, * aria-expanded). Пока оба механизма работали разом, щелчок «закрыть» под курсором не * закрывал ничего: CSS держал панель, пока указатель стоит на пункте. Та же беда была с * :focus-within: Escape снимал is-open и возвращал фокус на кнопку - кнопка внутри * группы, :focus-within снова совпадал, и панель оставалась раскрытой (замер клавиатурой * 23.09.2026). С живым скриптом состояние ведёт он один: открывает кнопка, закрывают * Escape, уход фокуса из группы, клик мимо и отложенный уход мыши. Без скрипта работает * прежний чистый CSS - и наведение, и фокус. */ .nav-desktop:not(.is-js) .nav-desktop__group:hover .nav-sub, .nav-desktop:not(.is-js) .nav-desktop__group:focus-within .nav-sub, .nav-sub.is-open { display: block; } .nav-sub__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; } .nav-desktop .nav-sub__list a { display: flex; align-items: center; min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-md); color: var(--text-dim); font-weight: var(--fw-medium); font-size: var(--t-small); white-space: nowrap; text-decoration: none; } .nav-desktop .nav-sub__list a:hover, .nav-desktop .nav-sub__list a[aria-current="page"] { background: var(--brand-soft); color: var(--text); text-decoration: none; } .nav-desktop .nav-sub__all { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: var(--s-2); border-top: var(--hairline); padding-top: var(--s-2); color: var(--brand); font-size: var(--t-small); font-weight: var(--fw-semi); } /* ---- МЕГАМЕНЮ: ПАНЕЛЬ ВО ВСЮ ШИРИНУ РАБОЧЕЙ ЗОНЫ (23.09.2026) ---- * Решение владельца: «если пунктов много и разные разделы, то делают мегаменю, но на * всю ширину рабочей зоны». Форму выбирает layout.php по числу живых детей (6 и * больше), разметка: .nav-desktop__group--mega > a + button + .nav-mega > .nav-mega__in * (карточка раздела .nav-mega__lead + сетка подразделов .nav-mega__grid). * * ГРУППА СТАНОВИТСЯ position: static. У обычного выпадающего списка группа - опорная * коробка (position: relative), и панель прижалась бы к своему пункту шириной в него. * static возвращает опору выше, на .site-header__bar: панель растягивается ровно по * контейнеру, вместе с его max-width и gutter. Ни одной ширины числом. */ .nav-desktop__group--mega { position: static; } /* Края панели совпадают с КОЛОНКОЙ СОДЕРЖИМОГО, а не с краями вьюпорта: опорная коробка * абсолютного потомка - padding-box контейнера, и при left: 0 панель вылезала на 48px * gutter в каждую сторону; её левый край не совпадал ни со знаком в шапке, ни с текстом * страницы под ней. Отступ в gutter возвращает панель в ту же колонку. */ .nav-mega { display: none; position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter); z-index: calc(var(--z-header, 100) + 1); padding: var(--s-3); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); } /* Мост через разрыв между шапкой и панелью: без него курсор по пути вниз выпадает из * группы, :hover перестаёт совпадать и панель схлопывается под рукой. Высота ровно в * разрыв (8px) - мост, заехавший на панель, перехватывал бы клики по соседним пунктам. */ .nav-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } .nav-desktop:not(.is-js) .nav-desktop__group--mega:hover .nav-mega, .nav-desktop:not(.is-js) .nav-desktop__group--mega:focus-within .nav-mega, .nav-mega.is-open { display: block; } .nav-mega__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } /* Карточка раздела: имя, число живых страниц, ссылка в сам раздел. Фон - поверхность * на ступень глубже панели, чтобы карточка читалась как якорь, а не как ещё одна * колонка ссылок. */ .nav-mega__lead { display: grid; align-content: start; gap: var(--s-2); grid-template-areas: "t n" "go go"; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; padding: var(--s-4); border: var(--hairline); border-radius: var(--r-md); background: var(--surface-2); text-decoration: none; } .nav-mega__lead:hover { border-color: var(--brand); text-decoration: none; } .nav-mega__lead-t { grid-area: t; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h4); line-height: 1.2; color: var(--text); } /* Счётчик статей в карточке мегаменю - ПОДПИСЬ, не кнопка: 26x24 литералами, потому * что это размер пилюли с числом, а не цель касания (24.09.2026, К2). Кликается * карточка вокруг него, и у неё цель своя. */ .nav-mega__lead-n { grid-area: n; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding-inline: var(--s-2); border-radius: var(--r-pill); background: var(--brand-soft); color: var(--text); font-size: var(--t-tiny); font-weight: var(--fw-semi); line-height: 1; } /* Ссылка прижата к низу карточки: карточка тянется на высоту всей панели, и без этого * под ней оставалось пустое поле в полкарточки. */ .nav-mega__lead-go { grid-area: go; align-self: end; color: var(--brand); font-size: var(--t-small); font-weight: var(--fw-semi); } .nav-mega__lead-go::after { content: " \2192"; } .nav-mega__lead:hover .nav-mega__lead-go { text-decoration: underline; } .nav-mega__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .nav-mega__col { min-width: 0; } .nav-mega__col-t { margin: 0 0 var(--s-1); padding-inline: var(--s-3); font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); } .nav-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } /* Цель тапа 40px: панель живёт только от 1024, где указатель мышиный, но клавиатурный * и сенсорный обход по ней тот же, что по выпадающему списку рядом. */ .nav-desktop .nav-mega__cell { display: flex; align-items: center; min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-md); color: var(--text-dim); font-weight: var(--fw-medium); font-size: var(--t-small); text-decoration: none; } .nav-desktop .nav-mega__cell:hover, .nav-desktop .nav-mega__cell[aria-current="page"] { background: var(--brand-soft); color: var(--text); text-decoration: none; } /* ---- Backdrop (критерий 6): fixed, покрывает вьюпорт ---- */ .nav-backdrop { position: fixed; inset: 0; z-index: var(--z-modal, 200); background: var(--overlay-dim); /* токен, не literal (08.09.2026, п. 97 оценщика) */ display: none; } .nav-backdrop.is-open { display: block; } /* ---- Drawer (критерии 1-5): mobile-first модальное меню ---- */ .nav-drawer { /* Закрыт: display:none (R19 - не transform, не opacity) */ display: none; position: fixed; /* критерий 1 */ top: 0; right: 0; bottom: 0; width: min(86vw, 340px); z-index: calc(var(--z-modal, 200) + 1); background: var(--surface); border-left: var(--hairline); padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); overflow-y: auto; flex-direction: column; gap: var(--s-2); } .nav-drawer.is-open { display: flex; } .nav-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); } .nav-drawer__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h4); } .nav-drawer__close { width: var(--tap-min); height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-md); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; } .nav-drawer__link { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-3); color: var(--text-dim); font-weight: var(--fw-medium); border-radius: var(--r-md); text-decoration: none; } .nav-drawer__link:hover, .nav-drawer__link[aria-current="page"] { background: var(--brand-soft); color: var(--text); text-decoration: none; } .nav-drawer__cta { margin-top: var(--s-4); } /* СЕТКА, А НЕ РЯД (23.09.2026): четыре эндонима в один ряд на 360 не помещаются - * «Bahasa Indonesia» обрезался краем шторки (снимок шторка-360-dark). Два столбца * держат любое число языков: два в ряд, три - 2+1, четыре - 2x2. */ .nav-drawer__lang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--hairline); } .nav-drawer__lang a { text-align: center; min-height: var(--tap-min); padding-inline: var(--s-2); display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); border-radius: var(--r-md); color: var(--text-mute); font-size: var(--t-small); line-height: var(--lh-snug, 1.25); text-decoration: none; } .nav-drawer__lang a[aria-current="true"] { background: var(--brand-soft); color: var(--text); border-color: var(--brand); } /* Скролл фона заблокирован при открытом меню (критерий 5) */ html.nav-open, html.nav-open body { overflow: hidden; } /* Дети хаба в шторке -
под ссылкой хаба (11.09.2026). */ .nav-drawer__sub { border-radius: var(--r-md); } .nav-drawer__sub-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--tap-min); padding: 0 var(--s-3); cursor: pointer; list-style: none; color: var(--text-mute); font-size: var(--t-small); font-weight: var(--fw-medium); } .nav-drawer__sub-summary::-webkit-details-marker { display: none; } .nav-drawer__sub-summary::after { content: "+"; font-size: 18px; line-height: 1; margin-left: auto; } .nav-drawer__sub[open] .nav-drawer__sub-summary::after { content: "-"; } .nav-drawer__sub-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--brand-soft); color: var(--text); font-size: 12px; font-weight: var(--fw-semi); } .nav-drawer__sub-list { list-style: none; margin: 0; padding: 0 0 var(--s-2) var(--s-3); display: grid; gap: 2px; } /* Подзаголовок подраздела внутри гармошки (23.09.2026): те же группы, что в мегаменю * на широком экране, - десять страниц «Помощи» одним столбцом читались как свалка. */ .nav-drawer__sub-title { margin: var(--s-2) 0 var(--s-1); padding-left: var(--s-3); font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); } /* 40px, а не --tap-min: это ВЛОЖЕННЫЙ пункт внутри раскрытого
шторки, и он * на ступень мельче родителя (у того 44 по токену) - иначе вложенность не читается. * Пол В9 (24) держит с запасом. Замер критика 24.09.2026: цели в шторке 40-48, чисто. */ .nav-drawer__link--sub { min-height: 40px; font-size: var(--t-small); font-weight: var(--fw-body); } /* ================= footer ================= */ /* margin-top был --s-9 (96px): вместе с паддингом последней полосы это давало * 160px пустоты перед подвалом на 360 - пятую часть экрана ни о чём (замер * probe_layout, все 5 страниц). На мобиле 48, на 768 возвращается 96. */ .site-footer { background: var(--bg-2); border-top: var(--hairline); padding-block: var(--s-6); padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); margin-top: var(--s-6); } /* СЕТКА ПОДВАЛА (08.09.2026, п.41, образец владельца - sneket .ftr__top): первым идёт * бренд-блок (знак, строка о сайте, переключатель языка), за ним колонки ссылок. * На мобильном всё в один столбец, бренд сверху во всю ширину; на 768+ колонки * ссылок - auto-fit вместо жёстких четырёх: треков столько, сколько колонок напечатал * layout по составу сайта, пустых не остаётся; на 1024+ бренд - первая широкая колонка. * minmax(0, 1fr) и min-width: 0 у детей: длинное слово в строке о сайте не растянет * трек и не даст горизонтальной прокрутки на 360. */ .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .site-footer__grid > * { min-width: 0; } /* НОВАЯ РАСКЛАДКА ПОДВАЛА (23.09.2026, решение владельца: «футер сделан так себе, можно * лучше и эффектнее разместить там разделы»). Две зоны: бренд (знак, строка о сайте, * языки) и