/* ============================================================================= ash-chrome.css — обвязка страницы asho.to Скип-ссылка · розовая плашка · шапка · меню разделов · боковое меню · подвал · нижнее меню · фильтры витрины · фасеты · пагинация · /cities · хештеги · возрастная заглушка 18+ · кнопка «наверх». ПОДКЛЮЧАТЬ ТРЕТЬИМ: ash-tokens.css → ash-catalog.css → ash-chrome.css. Отсюда берутся .q-btn, .q-icon и .h-icon (объявлены в ash-catalog.css). ОТКУДА ЧИСЛА. Всё из research/chrome.md, где разобран боевой CSS источника /var/www/asho_to_usr/data/_handoff/style/index-Cwib1x1t.css плюс сохранённые страницы. Там же помечено, что снято с разметки, а что восстановлено по CSS: ПРАВАЯ ПОЛОВИНА ШАПКИ в дампе отсутствует (сервер отдал её как ), поэтому её состав — доказуемая реконструкция по scoped-правилам, а ПОРЯДОК элементов слева направо — единственное, чего в дампе нет вообще. ⚠️ СКРОЛЛ-ЛОК. Скролл-контейнер — , НЕ body. В сети это уже чинили (моб. меню на CY): при overflow:hidden на body iOS-Safari продолжает прокручивать страницу и теряет позицию при закрытии. ============================================================================= */ /* ============================================================================= 0. СКИП-ССЫЛКА (БАГ 49, 57) main.tpl → #ash-content (modules/ash-content.tpl). У источника такого элемента нет вовсе, поэтому строка обязана быть невидимой до фокуса с клавиатуры: без правила она рисовалась обычным inline-текстом 196x20 первым элементом тела и сдвигала ВСЮ страницу на 20px вниз — отсюда расхождение по всем вертикальным замерам (page-area, шапка, крошки, h1). Гасим и :focus, и :focus-visible: мышиный фокус на ссылке нам тоже не мешает показать её, а :focus страхует браузеры без :focus-visible. ============================================================================= */ .ash-skip { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ash-skip:focus, .ash-skip:focus-visible { position: fixed; top: 8px; left: 8px; z-index: 10000; width: auto; height: auto; margin: 0; padding: 8px 12px; overflow: visible; clip-path: none; border-radius: 8px; background: var(--Background-Layer1); color: var(--Text-Primary); } /* ============================================================================= 1. РОЗОВАЯ ПЛАШКА НАД ШАПКОЙ Не ссылка, но с cursor:pointer — обработчик у источника клиентский, куда ведёт, из дампа не видно. Градиент из четырёх стопов — снят дословно. ============================================================================= */ .approved-banner { height: 32px; display: flex; align-items: center; justify-content: center; width: 100%; font-weight: var(--Font-Weight-Bold, 700); color: var(--Special-White); background: linear-gradient(90deg, #ff5ebc, #ff5e7d, #ff5e9c, #92d4ff); } .approved-banner .h-icon { font-size: 18px; color: var(--Special-Verified); } /* ============================================================================= 2. ШАПКА Фон — --Background-Black (#242424) в светлой теме и --Background-BG (#121212) в тёмной: то есть шапка сливается с контентом только в тёмной теме, а в светлой над белым контентом видна тёмная полоса. Это и есть разгадка вопроса ДИЗАЙН_ASHOO.md §7 (сам каркас .page-area/.content-area — в ash-tokens.css). ============================================================================= */ .header { background: var(--Background-Black); } body.body--dark .header { background: var(--Background-BG); } .header-row { height: 44px; display: flex; align-items: center; flex-wrap: nowrap; } @media (min-width: 1024px) { .header-row { height: 64px; } } /* Правило источника «.header-row div{height:44px}» слишком широкое: оно задирает высоту любому вложенному диву. Ограничиваем прямыми детьми — вид тот же, а вложенные колонки инструментов не ломаются. */ .header-row > div { height: 44px; display: flex; align-items: center; flex-wrap: nowrap; } .header-row > div button { min-width: 44px; } .header-row .q-btn--fab-mini { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } /* Бургер ВИДЕН НА ВСЕХ ШИРИНАХ: у источника это не «мобильный бургер», а постоянная кнопка бокового меню. Сдвиги −10/+3 — оптическая правка источника. */ .burger { margin-left: -10px; position: relative; top: 3px; color: var(--Special-White); } /* Логотип — инлайновый SVG с единственной заливкой .logo-main, поэтому он автоматически белый в обеих темах (никаких двух файлов). */ .app-logo { width: 134px; height: 44px; display: block; } .app-logo .logo-main { fill: var(--Special-White); } @media (max-width: 1023.98px) { .app-logo { width: 82px; height: 30px; } } /* --- правая половина: инструменты --------------------------------------- overflow:hidden здесь не «на всякий случай»: это прямое указание источника, что на узком экране инструменты НЕ переносятся на вторую строку и НЕ уходят в бургер, а физически обрезаются по правому краю. */ .mobile-header-tools { min-width: 0; overflow: hidden; } .header-tools { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin-left: auto; } .nav-header, .nav-header .q-btn { height: 32px; min-height: 32px; } /* Выбор города и выбор страны — два экземпляра одного компонента. */ .selector { height: 32px; display: inline-flex; align-items: center; gap: 4px; color: var(--Special-White); font-size: var(--font-size-label-m, 12px); line-height: var(--line-height-label-m, 16px); font-weight: var(--Font-Weight-Regular, 400); cursor: pointer; } .selector .q-btn-dropdown__arrow { color: var(--Text-Secondary); } .selector .city, .selector .country { min-width: 0; display: inline-flex; align-items: center; gap: 4px; } .selector .h-icon { flex: none; } .selector .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1023.98px) { .selector .name { max-width: 96px; } } .dark-mode-toggle { height: 20px; border: 0; padding: 0; background: transparent; color: var(--Special-White); cursor: pointer; display: inline-flex; align-items: center; } /* В разметке лежат ОБЕ иконки, видимую выбирает класс темы на body. Так кнопка показывает верное состояние ещё до того, как приедет хоть один скрипт: при светлой теме предлагаем месяц, при тёмной — солнце. */ body.body--light .dark-mode-toggle .icon-light { display: none; } body.body--dark .dark-mode-toggle .icon-dark { display: none; } .language-switch-icon { height: 20px; } @media (max-width: 1023.98px) { .dark-mode-toggle { height: 24px; } .language-switch-icon { height: 24px; } } .map-btn { border: 2px solid var(--Special-Primary); border-radius: 8px; color: var(--Special-White); } .pwa-install-btn, .top-btn { width: 44px; height: 44px; border: 1px solid var(--Special-White); border-radius: 50%; background: transparent; color: var(--Special-White); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } /* Поле поиска в шапке */ .header-form .q-field__control { height: 44px; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; background: var(--Background-Layer1); } .header-form input { border: 0; outline: 0; width: 100%; background: transparent; color: var(--Text-Primary); font-family: inherit; font-size: var(--Font-Size-Body-Small, 14px); } /* ============================================================================= 3. МЕНЮ РАЗДЕЛОВ (вторая строка шапки) Три вещи, которые надо повторить: 1) ряд листается горизонтально, полоса прокрутки скрыта (.scroll-area); 2) ЛИПКИМ ряд становится ТОЛЬКО ниже 1024px — на десктопе он уезжает вместе со страницей. Sticky везде — самая частая ошибка при копировании; 3) кнопка «Фильтр» ведёт на /search, а НЕ открывает диалог (диалог открывает другая кнопка, в самом листинге, см. §5). В шапке выводятся ВСЕ СЕМЬ разделов + «Салоны», а не пять с options:["menu"]. ============================================================================= */ @media (max-width: 1023.98px) { .header.sticky { position: sticky; top: 0; z-index: 1000; padding: 8px 0; } } .menu-sections { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; } @media (min-width: 1024px) { .menu-sections { gap: 8px; } } .menu-sections a { display: flex; align-items: center; height: 40px; padding: 8px; border: 1px solid var(--Special-White); border-radius: 8px; color: var(--Special-White); background-color: inherit; text-wrap: nowrap; white-space: nowrap; } @media (min-width: 1024px) { .menu-sections a { padding: 10px 8px; } } .menu-sections a[active="true"], .menu-sections a[data-active="true"] { background: var(--Elements-Dark-Gray) !important; } .menu-sections a.filter-btn { background: var(--Special-Primary); border: none; padding: 8px 12px; gap: 4px; color: var(--Special-White) !important; } .menu-sections a.filter-btn .search-icon { width: 16px; height: 16px; font-size: 16px; } /* ============================================================================= 4. БОКОВОЕ МЕНЮ ОТ БУРГЕРА Разметки в дампе нет, стили компонента есть целиком. Примета, которую нельзя потерять: зазор между ссылками 44px — очень крупный шаг. ⚠️ Это НЕ .index-header/.index-footer из того же CSS: те принадлежат второй, маркетинговой шапке посадочной страницы, для каталога они не годятся. ============================================================================= */ .q-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 3000; width: 300px; max-width: 85vw; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; } .q-drawer[open], .q-drawer.is-open { transform: translateX(0); } .q-drawer__backdrop { position: fixed; inset: 0; z-index: 2999 !important; background: #0009; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .q-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; } .index-drawer { background: var(--Background-Black); color: var(--Special-White); } .drawer-inner { display: flex; flex-direction: column; gap: 24px; min-height: 100%; padding: 16px; } .drawer-nav { display: flex; flex-direction: column; gap: 44px; } .drawer-nav a { color: var(--Special-White); text-decoration: none; } .drawer-nav a:hover { color: var(--Special-Primary); } .drawer-contacts { display: flex; flex-direction: column; gap: 20px; margin-top: auto; padding-top: 24px; color: var(--Special-White); } .drawer-contacts a { display: flex; align-items: center; gap: 12px; text-decoration: none; } .drawer-contacts a span { text-decoration: underline; } /* Скролл-лок при открытом меню и при открытой заглушке 18+. Контейнер — : см. предупреждение в шапке файла. */ html.ash-lock { overflow: hidden; } /* ============================================================================= 5. ПОДВАЛ Фон --Special-Black: подвал остаётся тёмным и в СВЕТЛОЙ теме (это не --Background-*). На десктопе три колонки в один ряд, ссылки «Компания» — в две колонки с зазором 64px. На мобиле одна колонка, заголовки колонок скрыты классом gt-sm, и появляется разделитель separator1. ============================================================================= */ .footer-wrap { background: var(--Special-Black); width: 100%; margin-top: auto; } .footer { display: grid; gap: 24px 64px; padding-top: 40px; padding-bottom: 40px; color: var(--Special-White); grid-template-areas: "description links contacts" "separator2 separator2 separator2" "eula eula eula"; } .footer .description { grid-area: description; } @media (min-width: 1024px) { .footer .description { margin-right: 76px; } } .footer .description svg { color: var(--Special-White); } .footer .links { grid-area: links; gap: 16px; } .footer .links a, .footer .links div { color: var(--Special-White); cursor: pointer; } .footer .links a:hover, .footer .links div:hover { color: var(--Special-Primary); } @media (min-width: 1024px) { .footer .links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; } } @media (max-width: 1023.98px) { .footer .links { display: flex; flex-direction: row; flex-wrap: wrap; } } .footer .contacts { grid-area: contacts; display: flex; flex-direction: column; gap: 20px; } .footer .contacts > a { display: flex; align-items: center; text-decoration: underline !important; color: var(--Special-White); } .footer .contacts .h-icon { margin-right: 12px; font-size: 24px; } .footer .separator1 { grid-area: separator1; } .footer .separator2 { grid-area: separator2; } /* Юридический ряд. В дампе область eula отрисована как — то есть состав ссылок источника нам НЕИЗВЕСТЕН (chrome.md §3.3). Стили есть, а содержимое закрываем своими страницами; это дырка, а не «один в один». */ .footer .eula { grid-area: eula; display: flex; flex-direction: row; justify-content: center; gap: 16px; } .footer .eula a { color: var(--Text-Secondary); text-align: left; padding-bottom: 8px; text-decoration-line: underline !important; } .footer .eula a:hover { color: var(--Special-Primary); } @media (max-width: 1023.98px) { .footer .eula { flex-direction: column; } } @media (max-width: 1023.98px) { .footer { padding-top: 24px; padding-bottom: 0; grid-template-areas: "description" "links" "separator1" "contacts" "separator2" "eula"; } /* место под фиксированное нижнее меню, иначе оно накрывает подвал */ .footer-wrap { margin-bottom: 50px; } /* БАГ 21: на анкете и салоне над меню стоит ещё и полоса контактов (60px), и вдвоём они накрывали подвал. :has сам выключается там, где полосы нет (на витринах, /cities, /salons её в разметке не печатают). */ body:has(.q-page-sticky) .footer-wrap { margin-bottom: 110px; } } /* Круглый значок «18+»: в подвале белый, в заглушке розовый — цвет даёт currentColor, поэтому правило одно на оба места. */ .warn { width: 44px; height: 44px; border: 2px solid currentColor; font-size: 14px; font-weight: 500; line-height: 16px; } .footer .rta img { display: block; height: 32px; width: auto; } /* ============================================================================= 6. НИЖНЕЕ МЕНЮ (только уже 1024px) Высота 50, фон --Special-Black, подписи 10px. БАГ 51: размер значка задаёт font-size на обёртке