/* Базовые стили и адаптив — перенесены из partials/styles.html старого сайта. */ body { margin: 0; background: #FFFFFF; font-family: 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: #E30613; text-decoration: none; } a:hover { color: #B00410; } input, button { font-family: inherit; } html { scroll-behavior: smooth; } section[id], footer[id] { scroll-margin-top: 120px; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #E30613; outline-offset: 3px; } img { max-width: 100%; } @keyframes ayTrace { 0% { background-position: -60% 0%, 100% -60%, 160% 100%, 0% 160%; } 100% { background-position: 160% 0%, 100% 160%, -60% 100%, 0% -60%; } } ::selection { background: #E30613; color: #fff; } .navdrop { position: relative; display: flex; align-items: center; } .navdrop-menu { position: absolute; top: 100%; left: -14px; z-index: 70; padding-top: 26px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu { opacity: 1; visibility: visible; transform: translateY(0); } .navdrop-caret { transition: transform .16s ease; } .navdrop:hover .navdrop-caret { transform: rotate(180deg); } .ms { width: 1em; height: 1em; overflow: hidden; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; flex: 0 0 auto; user-select: none; } /* ---------- адаптив ---------- Стили в разметке инлайновые, поэтому переопределяем через [style*=…] + !important. Плавное масштабирование (отступы, кегль, gap) задано clamp() по месту — здесь только смена числа колонок, которую clamp выразить не может. ВАЖНО: правила находят элементы по тексту атрибута style. Если в шаблоне поменять, например, «minmax(0, 1fr)» на «minmax(0,1fr)», правило молча перестанет работать. Это ловит тест core/tests.py::test_responsive_selectors_match. */ /* планшет */ @media (max-width: 900px) { /* асимметричные пары колонок складываются в одну */ [style*="grid-template-columns: minmax(0,"], [style*="repeat(2, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; } /* подвал — в две колонки, а не в одну: правило идёт после общего, поэтому перебивает его при равной специфичности */ [style*="minmax(0, 2.1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } header nav { gap: 14px !important; font-size: 14px !important; } /* Элементы, отжатые вправо через margin-left: auto (группа «телефон + город + CTA» в шапке, счётчики «10 брендов» у заголовков), в узкой строке вылезают за экран: строка объявлена flex-wrap: nowrap. Сбрасываем прижатие и разрешаем перенос. */ [style*="margin-left: auto"] { margin-left: 0 !important; flex-wrap: wrap !important; } [style*="display: flex"]:has(> [style*="margin-left: auto"]) { flex-wrap: wrap !important; } /* min-width: 0 ниже не должен сминать неразрывный текст — он не может перенестись */ [style*="white-space: nowrap"] { min-width: auto !important; } /* Вертикальный разделитель колонок. После схлопывания грида линия слева и отступ 44px сдвигают блок относительно секции — переносим разделение вверх. */ [style*="padding-left: 44px"][style*="border-left"] { padding-left: 0 !important; border-left: 0 !important; padding-top: 28px !important; border-top: 1px solid #E4E6E9 !important; } /* панель меню позиционируется от своего пункта и уезжает за правый край — делаем .navdrop нестатичным контекстом и растягиваем панель по ширине шапки */ .navdrop { position: static !important; } .navdrop-menu { left: 16px !important; right: 16px !important; } .navdrop-menu > div { width: auto !important; min-width: 0 !important; } } /* телефон */ @media (max-width: 560px) { /* плотные сетки логотипов и иконок — максимум в две колонки */ [style*="minmax(min(148px"], [style*="minmax(min(150px"], [style*="minmax(min(155px"], [style*="minmax(min(160px"], [style*="minmax(min(180px"], [style*="repeat(2, minmax(min("] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* подвал окончательно в одну колонку */ [style*="minmax(0, 2.1fr)"] { grid-template-columns: minmax(0, 1fr) !important; } header nav { gap: 10px !important; font-size: 13px !important; } /* лента направлений: подпись съедает строку, логотипы обрезаются overflow: hidden */ [style*="gap: 30px"][style*="border-top"] { flex-wrap: wrap !important; gap: 14px !important; } [style*="gap: 30px"][style*="border-top"] > div { overflow: visible !important; flex-wrap: wrap !important; } } /* У flex- и grid-элементов min-width по умолчанию auto: они не сжимаются ниже своего содержимого, из-за чего длинный текст вылезает за карточку и overflow-wrap не срабатывает. */ @media (max-width: 900px) { a, span, div, li, p { min-width: 0; } } /* Длинные слова («производителями») шире узкой колонки и вылезают за карточку. */ body { overflow-wrap: break-word; } /* Подстраховка от горизонтальной прокрутки. Именно clip, а не hidden: hidden создаёт скролл-контейнер и ломает position: sticky у шапки. */ body { overflow-x: clip; } /* ---------- бургер: мобильное меню ---------- Без JS и без состояния компонента: скрытый чекбокс + label. Поэтому меню не требует правок в renderVals каждой страницы — разметка лежит в партиале шапки, стили здесь, и правка расходится по всем страницам одной сборкой. Навигация и группа контактов обёрнуты в .ay-nav-panel. На широком экране обёртка прозрачна для раскладки (display: contents), поэтому оба блока остаются прямыми флекс-элементами строки шапки и ничего не меняется. На узком обёртка становится панелью, выезжающей от правой кромки. */ .ay-menu-toggle { display: none; } .ay-menu-btn { display: none; } .ay-menu-ico-close { display: none; } .ay-nav-panel { display: contents; } .ay-menu-scrim { display: none; } @media (max-width: 900px) { /* На узком экране чекбокс меню скрыт визуально, но доступен с клавиатуры: Tab — к кнопке меню, пробел — открыть/закрыть (WCAG 2.1.1). */ .ay-menu-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .ay-menu-toggle:focus-visible + .ay-menu-btn { outline: 2px solid #E30613; outline-offset: 3px; opacity: 1; } .ay-menu-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: 0 0 auto; width: 44px; height: 44px; cursor: pointer; border: 1px solid currentColor; opacity: .8; } .ay-menu-btn .ms { font-size: 24px; } .ay-menu-toggle:checked ~ .ay-menu-btn .ay-menu-ico-open { display: none; } .ay-menu-toggle:checked ~ .ay-menu-btn .ay-menu-ico-close { display: inline-block; } /* Закрытая панель отведена за правый край и расширяет страницу вправо: её ширина попадает в прокрутку, и экран начинает елозить вбок. `overflow-x: clip` у body это не удерживает — обрезаем по самой шапке. Пара «clip по горизонтали, visible по вертикали» допустима: боковой вынос отсекается, а открытая панель и затемнение свободно уходят вниз под шапку. */ header { overflow-x: clip; overflow-y: visible; } /* Панель и затемнение отсчитываются от
: он sticky, то есть уже позиционированный предок, и при прокрутке стоит у верхней кромки экрана. position: fixed тут ничего не дал бы: backdrop-filter на шапке делает её контейнером для fixed-потомков, отсчёт всё равно шёл бы от неё. */ .ay-nav-panel { display: block; position: absolute; top: 100%; right: 0; z-index: 70; box-sizing: border-box; width: min(86vw, 340px); padding: 20px; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; transform: translateX(105%); visibility: hidden; transition: transform .26s ease, visibility .26s; } .ay-menu-toggle:checked ~ .ay-nav-panel { transform: none; visibility: visible; } .ay-nav-panel-dark { background: #0B0B0D; border-left: 1px solid rgba(255,255,255,0.1); box-shadow: -20px 0 44px rgba(0,0,0,0.5); } .ay-nav-panel-light { background: #FFFFFF; border-left: 1px solid #E4E6E9; box-shadow: -20px 0 44px rgba(20,21,23,0.16); } /* тап мимо панели закрывает её: затемнение — это