/* NEW WOOD ART — внутренние страницы в стиле «лаборатории» ------------------ Категория, карточка товара, поиск, вход, регистрация, контакты, текстовые страницы, каталог NWA, «Жертва 2.0», корзина и оформление заказа — то есть всё, кроме главной. У корзины, оформления и «Жертвы» есть СВОИ файлы (nwa-cart.css, checkout.css, nwa-zhertva.css), но они не заменяют этот, а дополняют: палитра, панель, подвал и формы приходят отсюда. Своя палитра осталась только у главной — nwa-lab-home.css. Как это работает ---------------- Тема UniShop2 целиком построена на CSS-переменных: .top-menu берёт фон из --top-menu-bg, тот — из --nwa-bg-block, и так до горстки базовых --nwa-*, которые задаёт custom-dark-theme.css в :root. Поэтому здесь не перебиваются селекторы темы (это была бы бесконечная гонка специфичности), а переопределяется сама палитра на body.nwa-page. Класс nwa-page ставит uni_new_data.php по маршруту страницы. Без него файл не действует ни на что. -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); body.nwa-page{ /* --- Базовая палитра: те же цвета, что в nwa-lab-home.css -------------- */ --nwa-bg-body:#F2F2F0; --nwa-bg-block:#FFFFFF; --nwa-bg-card:#FFFFFF; --nwa-text:#2A2C2E; --nwa-text-secondary:#5A5D60; --nwa-accent:#DE4E10; --nwa-accent-hover:#BD420E; --nwa-accent-text:#FFFFFF; --nwa-accent-dark:#BD420E; --nwa-accent-dark-hover:#DE4E10; --nwa-border:rgba(42,44,46,.14); --nwa-scrim:rgba(12,13,15,.7); --body-font:'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* --- Кнопка «В корзину» ----------------------------------------------- Тема держит её цвета в отдельных переменных, включая состояние «уже в корзине», — переопределяем их, а не селекторы. Ведёт себя как название товара: спокойный бежевый, при наведении оранжевый. Фона нет ни в одном состоянии — кнопка читается как ссылка. Добавленный товар подсвечен тем же оранжевым, что и наведение: так видно, что он уже в корзине, без лишней заливки. */ --add-to-cart-btn-c:#BD420E; --add-to-cart-btn-bg:transparent; --add-to-cart-btn-c-hover:#F06529; --add-to-cart-btn-bg-hover:transparent; --add-to-cart-btn-c-incart:#F06529; --add-to-cart-btn-bg-incart:transparent; /* Подвал на главной остался тёмным, с фоновой картой — светлая палитра выше его перекрасила бы, потому что --footer-bg завязан на --nwa-bg-block. Возвращаем ему прежние цвета явно. */ --footer-bg:#0C0D0F; --footer-c:rgba(255,255,255,.78); --footer-heading-c:#FFFFFF; /* --- Полоса вкладок карточки товара ------------------------------------ «Описание | Отзывы | Вопрос-ответ». Была тёмной с тёмным текстом: фон #0E141B, надписи #2A2C2E — не читалось вообще. ⚠️ ЗДЕСЬ ВАЖНАЯ ЛОВУШКА ПЕРЕМЕННЫХ, ОНА КАСАЕТСЯ НЕ ТОЛЬКО ВКЛАДОК. В теме `.nav-tabs{background:var(--nav-tabs-bg)}`, а сама --nav-tabs-bg объявлена в custom-dark-theme.css строкой `--nav-tabs-bg: var(--nwa-bg-block)` — и объявлена НА :root. Переменная в объявлении другой переменной вычисляется там, где стоит объявление, то есть на :root, где --nwa-bg-block ещё тёмный. Дальше вниз по дереву наследуется уже готовый тёмный цвет. Наша светлая палитра стоит на body.nwa-page — ниже по дереву, и на это вычисление она не влияет НИКАК. Правило «переопределяй палитру, а не селекторы» работает только для тех мест, где --nwa-* используется напрямую. Поэтому переменные второго уровня приходится задавать здесь поимённо. Если ещё где-то всплывёт тёмное пятно на светлой странице — искать такую же цепочку: var() внутри объявления на :root. */ --nav-tabs-bg:#FFFFFF; --nav-tabs-c:#5A5D60; --nav-tabs-c-active:#2A2C2E; /* Высота липкой панели. Нужна не только ей: полоса вкладок в карточке товара тоже липкая и должна останавливаться под панелью, а не под верхним краем окна. Держим одним числом, чтобы не разъезжались. */ --nwa-topbar-h:130px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Фон подвала задан в stylesheet.css прямым значением .footer{background: #33333333} — полупрозрачным серым, а не переменной --footer-bg. На тёмном полотне он выглядел тёмным, на светлом стал светло-серым. Задаём явно. */ /* Фон подвала не задаётся вовсе: он остаётся полупрозрачным, как в теме, и сквозь него видна карта на body — точно так же, как на главной. Любое собственное значение фона здесь привязало бы картинку к подвалу. */ /* ========================================================================== БОКОВАЯ КОЛОНКА, СОРТИРОВКА, КНОПКИ СТРАНИЦЫ ========================================================================== Модуль категорий в колонке — это .menu-module__*, а НЕ .menu__level-* (те относятся к главному меню в шапке). Из-за путаницы в классах пункты оставались белыми на белом. -------------------------------------------------------------------------- */ /* Подкатегории — отдельный класс .menu-module__children-a, из-за чего оставались белыми, когда пункты верхнего уровня уже стали тёмными. Звёздочка в конце ловит и всё остальное внутри модуля: тёмная тема красит его содержимое под чёрный фон. */ /* Цвет задан прямым значением, а не через var(--nwa-text): переменную переопределяет generated.0.css (он подключается после тёмной темы и ставит свой --body-c), из-за чего пункты уходили в синевато-бирюзовый тон. */ body.nwa-page .menu-module, body.nwa-page .menu-module *, body.nwa-page .menu-module__a, body.nwa-page .menu-module__li, body.nwa-page .menu-module__pm, body.nwa-page .menu-module__children, body.nwa-page .menu-module__children-a, body.nwa-page .menu__level-1-a, body.nwa-page .menu__level-2-a, body.nwa-page .menu__level-3-a{ color:#2A2C2E !important; } body.nwa-page .menu-module__a:hover, body.nwa-page .menu-module__pm:hover, body.nwa-page .menu-module__children-a:hover, body.nwa-page .menu__level-1-a:hover, body.nwa-page .menu__level-2-a:hover, body.nwa-page .menu__level-3-a:hover{ color:var(--nwa-accent) !important; } /* Подкатегории мельче и спокойнее по тону — это второй уровень. */ body.nwa-page .menu-module__children-a{ font-size:.92em; color:#5A5D60 !important; } /* --- Вид панели ---------------------------------------------------------- Тёмная тема даёт ей тень 0 6px 18px rgba(0,0,0,.35) — на светлом полотне это грязное пятно; и подсветку плюсиков белым по белому, которой не видно. Приводим к спокойному виду: тонкая рамка, лёгкая тень, мягкие разделители. */ body.nwa-page .menu-module__ul{ background:#FFFFFF !important; border:1px solid #E2E2DE !important; /* Верхней границы нет — её роль играет нижний край заголовка, чтобы заголовок и список читались одной карточкой. Скругление только снизу. */ border-top:0 !important; border-radius:0 0 10px 10px !important; /* Без тени: на светлом полотне она читается грязным пятном, а на главной у блоков теней нет вовсе — только тонкая рамка. */ box-shadow:none !important; overflow:hidden; margin:0 0 20px !important; padding:0 !important; } body.nwa-page .menu-module__li{ /* Ни отступов, ни собственного фона: иначе заливка активного пункта не доходит до края и слева остаётся светлая полоса. */ margin:0 !important; padding:0 !important; background:none !important; border-left:0 !important; border-right:0 !important; } /* Активный пункт заливается во всю ширину строки. */ body.nwa-page .menu-module__a{ display:flex !important; width:100% !important; box-sizing:border-box; } /* Тени у остальных блоков страницы — по той же причине. */ body.nwa-page .uni-wrapper, body.nwa-page .product-thumb, body.nwa-page .uni-item, body.nwa-page .panel, body.nwa-page .well, body.nwa-page .content-block, body.nwa-page .sorts-block__wrapper{ box-shadow:none !important; } /* Заголовок «Категории» входит в ту же белую карточку, что и список под ним: он получает верхнюю половину рамки со скруглением, список — нижнюю без верхней границы. Вместе они читаются одним блоком, и его верхний край встаёт вровень с блоком товаров справа. */ body.nwa-page #column-left .heading, body.nwa-page #column-right .heading{ margin:0 !important; padding:14px 14px 12px !important; background:#FFFFFF !important; border:1px solid #E2E2DE !important; border-bottom:0 !important; border-radius:10px 10px 0 0 !important; align-items:center; } body.nwa-page .menu-module__li:not(:first-child){ border-top:1px solid #EDEDEA !important; } body.nwa-page .menu-module__a{ padding:11px 14px !important; font-weight:500; line-height:1.35; transition:background-color .15s ease, color .15s ease; } /* Отклик на нажатие. Страница категории приходит с сервера примерно за секунду, и всё это время браузер показывает старую — клик выглядит «проглоченным». :active срабатывает мгновенно, до всякой загрузки, и сразу показывает, какой пункт выбран. transition здесь намеренно отключён: плавное появление съедало бы те самые доли секунды, ради которых правило и добавлено. */ body.nwa-page .menu-module__a:active, body.nwa-page .menu-module__children-a:active{ background:#F06529 !important; color:#FFFFFF !important; transition:none !important; } body.nwa-page .menu-module__a:active *, body.nwa-page .menu-module__children-a:active *{ color:#FFFFFF !important; } /* Наведение подсвечивает всю строку — по ней и попадают курсором. Бежевого в колонке нет: он остался акцентом карточек, а здесь читался блёкло на белом. Отклик и выделение — оранжевые, как активные состояния в остальном интерфейсе. */ body.nwa-page .menu-module__li:hover > .menu-module__a{ /* Серая подложка под оранжевым текстом — оранжевый на оранжевом читался плохо (владелец, 23.09.2026). */ background:#EEEEEA !important; color:#F06529 !important; } /* Текущая категория: сплошная оранжевая заливка и белый текст. */ /* Звёздочка нужна: правило .menu-module * выше красит тёмным всё содержимое модуля, включая текст внутри активного пункта. Без неё на оранжевой заливке оставался тёмный текст. */ body.nwa-page .menu-module__a.active, body.nwa-page .menu-module__a.active *, body.nwa-page .menu-module__li.active > .menu-module__a, body.nwa-page .menu-module__li.active > .menu-module__a *{ color:#FFFFFF !important; } body.nwa-page .menu-module__a.active, body.nwa-page .menu-module__li.active > .menu-module__a{ background:#F06529 !important; border-left:0 !important; padding-left:14px !important; font-weight:600; /* Тема кладёт на активный пункт внутреннюю тень box-shadow: inset 8px 0 8px 0 rgb(0 209 216 / 18%) — бирюзовую полосу вдоль левого края. Именно она читалась как затенение и как «бирюзовый», который не удавалось найти: цвет задан не в свойстве color и не фоном, поэтому в поиске по палитре не всплывал. */ box-shadow:none !important; } /* Наведение на активный пункт. Селекторов несколько, потому что подсветка строки висит на .menu-module__li:hover > .menu-module__a — она срабатывает и когда курсор над строкой, но не над самой ссылкой, и в этот момент перекрывала оранжевую заливку бледным фоном. */ body.nwa-page .menu-module__a.active:hover, body.nwa-page .menu-module__li.active > .menu-module__a:hover, body.nwa-page .menu-module__li:hover > .menu-module__a.active, body.nwa-page .menu-module__li.active:hover > .menu-module__a{ background:#DE4E10 !important; color:#FFFFFF !important; } body.nwa-page .menu-module__li:hover > .menu-module__a.active *, body.nwa-page .menu-module__li.active:hover > .menu-module__a *{ color:#FFFFFF !important; } /* Плюс-минус внутри активного пункта — тоже белые, иначе теряются. */ body.nwa-page .menu-module__a.active .menu-module__pm, body.nwa-page .menu-module__li.active > .menu-module__a .menu-module__pm{ color:#FFFFFF !important; } /* Кнопка «плюс/минус» — серая, на наведении оранжевая. */ body.nwa-page .menu-module__pm{ color:#A9ACAF !important; border-radius:6px; transition:background-color .15s ease, color .15s ease; } body.nwa-page .menu-module__pm:hover{ background:#EEEEEA !important; color:#F06529 !important; } /* Подкатегории: отступ слева, чтобы читалась вложенность. */ body.nwa-page .menu-module__children-a{ padding-left:26px !important; transition:color .15s ease; } body.nwa-page .menu-module__children-a:hover, body.nwa-page .menu-module__children-a.active{ color:#F06529 !important; } /* Заголовок колонки отделён линией — как разделители секций на главной. */ /* Заголовок страницы в категории убран: он повторяет последний пункт хлебных крошек прямо над ним. Крошки остаются — по ним ещё и переходят обратно. На остальных страницах (товар, контакты, текстовые) h1 сохраняется: там он несёт название, которого больше нигде нет. */ body.nwa-page #product-category > .breadcrumb-h1 > h1{ display:none !important; } /* Блок с крошками и кнопкой «Назад» — без лишнего отступа снизу, чтобы колонка категорий и сетка товаров начинались на одной высоте. */ body.nwa-page #product-category > .breadcrumb-h1{ margin-bottom:14px !important; padding-bottom:0 !important; } body.nwa-page #column-left, body.nwa-page #column-right{ padding-top:0 !important; } body.nwa-page #column-left .heading{ margin-top:0 !important; } /* Заголовок колонки собран темой из трёх частей: .heading:before — вертикальная полоска-акцент, .heading__text — сам текст, .heading__divider — линия, растягивающаяся до края. Своя нижняя граница здесь лишняя: вместе с divider она читалась рамкой вокруг заголовка. */ /* Оформление заголовка колонки — выше, там он склеен со списком в одну карточку. Здесь раньше стояло правило, снимавшее фон и рамку: находясь дальше по файлу, оно перебивало нужное, и карточка не собиралась. */ body.nwa-page #column-left .heading, body.nwa-page #column-right .heading{ font-size:15px; } body.nwa-page .heading__text{ color:#2A2C2E !important; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; } /* Полоска-акцент — оранжевая, как выделение в списке под ней. */ body.nwa-page #column-left .heading:before, body.nwa-page #column-right .heading:before{ background:#F06529 !important; } body.nwa-page .heading__divider{ background:#E2E2DE !important; } /* Оформление активной категории — ниже, в разделе «Вид панели»: оранжевая заливка и белый текст. Прежнее правило с бежевым цветом стояло здесь и, находясь дальше по файлу, перебивало белый — при равной специфичности побеждает то, что записано позже. */ /* Заголовок колонки «Категории» — в общей типографике страницы. */ body.nwa-page .heading{ color:var(--nwa-text) !important; font-weight:300; text-transform:uppercase; letter-spacing:0.12em; } /* ========================================================================== ХЛЕБНЫЕ КРОШКИ ========================================================================== Разметка у темы есть всегда, но в custom-dark-theme.css стоит .breadcrumb{display:none !important} — крошки скрыты намеренно, вместо них оставлена кнопка «Назад». Возвращаем их и приводим к типографике страницы: мелкий текст, разделители, последний пункт — серый, как текущая страница. -------------------------------------------------------------------------- */ body.nwa-page .breadcrumb{ display:flex !important; flex-wrap:wrap; align-items:center; gap:0; margin:0 0 10px !important; padding:0 !important; background:none !important; border:0 !important; border-radius:0 !important; list-style:none; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; } body.nwa-page .breadcrumb li{ display:inline-flex; align-items:center; color:#8A8D90 !important; } body.nwa-page .breadcrumb li a{ color:#BD420E !important; text-decoration:none !important; transition:color .2s ease; } body.nwa-page .breadcrumb li a:hover{ color:#F06529 !important; } /* Последний пункт — текущая страница, ссылкой не является: серым и без выделения, чтобы не спорил с заголовком под ним. */ body.nwa-page .breadcrumb li:last-child{ color:#8A8D90 !important; } /* Разделитель между пунктами. Тема рисует его иконкой шрифта в li+li:before — оставляем сам приём, меняем цвет и отступы. */ body.nwa-page .breadcrumb li + li:before{ color:#B9BCBF !important; margin:0 8px; font-size:9px; } body.nwa-page .breadcrumb .fa-home{ font-size:12px; color:#BD420E !important; } /* Кнопка «Назад»: была тёмной плашкой — делаем светлой с рамкой, как кнопки на светлом полотне главной. */ body.nwa-page .uni-back-btn{ background:transparent !important; border:1px solid #E2E2DE !important; color:var(--nwa-text) !important; border-radius:6px !important; font-weight:500; letter-spacing:0.04em; transition:color .2s ease, border-color .2s ease; } body.nwa-page .uni-back-btn:hover{ color:var(--nwa-accent) !important; border-color:var(--nwa-accent) !important; } body.nwa-page .uni-back-btn i{ color:inherit !important; margin-right:8px; } /* Сортировка: тёмная плашка у выбранного пункта заменена на акцентный текст — на светлом полотне заливка выглядит чужеродно. */ body.nwa-page .sorts-block__span{ background:transparent !important; border:0 !important; color:var(--nwa-text) !important; transition:color .2s ease; } body.nwa-page .sorts-block__span:hover{ color:var(--nwa-accent) !important; } /* У выбранного пункта тема рисует тёмно-бирюзовую плашку с голубой рамкой: .sorts-block__span.selected{background:#0e3239; border:1px solid #0ba6ff}. Убираем и заливку, и рамку — на светлом полотне это чужая палитра. */ body.nwa-page .sorts-block__span.selected{ background:transparent !important; border:0 !important; color:var(--nwa-accent) !important; font-weight:600; } /* Селекты сортировки и количества. ВАЖНО: только background-color. Стрелка выпадающего списка — это фоновая картинка (select.form-control{background:url(../image/chevron.png) …}), и shorthand background её стирает: список остаётся без указателя. */ body.nwa-page .sorts-block__select, body.nwa-page .sorts-block__limit, body.nwa-page .sorts-block__wrapper select, body.nwa-page select.form-control{ background-color:#FFFFFF !important; color:var(--nwa-text) !important; border:1px solid #E2E2DE !important; border-radius:6px !important; /* Своя галочка вместо картинки темы: она нарисована прямо здесь, поэтому её цвет задаётся тут же и не зависит от файла chevron.png. */ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232A2C2E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:11px 8px !important; appearance:none; -moz-appearance:none; -webkit-appearance:none; padding-right:30px !important; } /* Иконки-стрелки на странице — в общей палитре. Тёмная тема красит часть из них своим цветом, который на светлом полотне выглядит чужеродно. */ body.nwa-page main .fa-angle-down, body.nwa-page main .fa-angle-up, body.nwa-page main .fa-angle-left, body.nwa-page main .fa-angle-right, body.nwa-page main .fa-chevron-down, body.nwa-page main .fa-chevron-up, body.nwa-page main .fa-chevron-left, body.nwa-page main .fa-chevron-right, body.nwa-page main .fa-caret-down, body.nwa-page main .fa-caret-up, body.nwa-page main .fa-arrow-left, body.nwa-page main .fa-arrow-right, body.nwa-page main .fa-long-arrow-alt-down, body.nwa-page main .fa-long-arrow-alt-up, body.nwa-page main .fa-sort-amount-down, body.nwa-page main .fa-sort-amount-up{ color:var(--nwa-text) !important; } body.nwa-page main a:hover .fa-angle-right, body.nwa-page main a:hover .fa-arrow-right, body.nwa-page main a:hover .fa-arrow-left{ color:var(--nwa-accent) !important; } /* Переключатели «плитка / список» — .sorts-block__btn внутри .sorts-block__btn-group. В теме это тёмные квадраты с классом btn-default, поэтому нужен и !important, и точное имя класса. */ body.nwa-page .sorts-block__btn, body.nwa-page .sorts-block__btn-group .btn, body.nwa-page .sorts-block__wrapper .btn{ background:#FFFFFF !important; background-image:none !important; border:1px solid #E2E2DE !important; color:var(--nwa-text) !important; border-radius:6px !important; box-shadow:none !important; transition:color .2s ease, border-color .2s ease; } body.nwa-page .sorts-block__btn i, body.nwa-page .sorts-block__btn-group .btn i{ color:inherit !important; } /* Отзыв на курсор — как у кнопки корзины и счётчика количества. */ body.nwa-page .sorts-block__btn:hover, body.nwa-page .sorts-block__btn-group .btn:hover{ color:#F06529 !important; border-color:#F06529 !important; } /* Выбранный вид — акцентом, без заливки. Класс здесь selected, а не active: тема помечает активную кнопку именно им. Плюс отдельный псевдоэлемент .sorts-block__btn.selected:before заливает её бирюзовым rgba(0,209,216,.15) — его гасим тоже, иначе подсветка остаётся поверх любого фона. */ body.nwa-page .sorts-block__btn.selected, body.nwa-page .sorts-block__btn.active, body.nwa-page .sorts-block__btn-group .btn.selected, body.nwa-page .sorts-block__btn-group .btn.active{ background:#FFFFFF !important; color:var(--nwa-accent) !important; border-color:var(--nwa-accent) !important; } body.nwa-page .sorts-block__btn.selected:before, body.nwa-page .sorts-block__btn.active:before, body.nwa-page .sorts-block__btn-group .btn.selected:before{ background:transparent !important; display:none !important; } /* Стрелка направления сортировки — псевдоэлемент после выбранного пункта. Цвет наследует от него, но задаём явно: в теме он свой. */ body.nwa-page .sorts-block__span.selected:after, body.nwa-page .sorts-block__span:after{ color:var(--nwa-accent) !important; } /* Подвал: текст и ссылки светлые, как на главной. !important нужен потому же, почему и везде в этом файле — тёмная тема задаёт цвета жёстко. */ body.nwa-page .footer, body.nwa-page .footer p, body.nwa-page .footer li, body.nwa-page .footer span, body.nwa-page .footer div, body.nwa-page footer, body.nwa-page footer p, body.nwa-page footer li, body.nwa-page footer span, body.nwa-page footer div{ color:rgba(255,255,255,.80) !important; } body.nwa-page .footer a, body.nwa-page footer a{ color:rgba(255,255,255,.80) !important; } body.nwa-page .footer a:hover, body.nwa-page footer a:hover{ color:#BD420E !important; } body.nwa-page .footer h1, body.nwa-page .footer h2, body.nwa-page .footer h3, body.nwa-page .footer h4, body.nwa-page .footer h5, body.nwa-page .footer__title, body.nwa-page footer h1, body.nwa-page footer h2, body.nwa-page footer h3, body.nwa-page footer h4, body.nwa-page footer h5{ color:#FFFFFF !important; text-transform:none; letter-spacing:0.01em; } /* --- Полотно устроено ровно как на главной ------------------------------- Там body остаётся тёмным и с фоновой картой (/image/catalog/Fon/333.jpg из темы), а светлое поле — это секция .nwa-lab внутри
. Подвал лежит ВНЕ
и полупрозрачен (.footer{background:#33333333} в stylesheet.css), поэтому карта просвечивает сквозь него и не привязана к его размеру. Здесь то же самое: фон body не трогаем, светлым красим
. Прежняя попытка — погасить фон body и прикрепить картинку к подвалу — давала не тот результат: изображение масштабировалось под высоту подвала. */ body.nwa-page main{ background:var(--nwa-bg-body); } /* Сам body остаётся тёмным и с картой — как на главной. Иначе светлая палитра выше перекрасила бы и его: custom-dark-theme.css применяет body{background-color:var(--nwa-bg-body)!important}, и карта в подвале просто перестала бы просвечивать. Значения — те же, что тема ставит по умолчанию в stylesheet.css. */ body.nwa-page{ background-color:#0E141B !important; background-image:url('/image/catalog/Fon/333.jpg') !important; } /* ========================================================================== СТАРАЯ ШАПКА МАГАЗИНА УБРАНА ========================================================================== Вместо неё выводится nwa_topbar.twig — та же панель, что на главной. Разметка старой шапки остаётся в HTML: скрыть её стилями безопаснее, чем вырезать из шаблона темы, который правят обновления и другие модули. Скрипты магазина при этом продолжают работать со своими элементами и не падают на отсутствующих узлах. -------------------------------------------------------------------------- */ /* Скрывается весь
целиком. Раньше здесь перечислялись отдельные блоки, и логотип оставался на экране вторым: header-block__item-logo лежит не внутри .header-block, а рядом с ним, и под правило не попадал. Панель nwa_topbar.twig стоит перед
и потому не затрагивается. */ body.nwa-page > header, body.nwa-page header{ display:none !important; } /* ========================================================================== ПАНЕЛЬ КАК НА ГЛАВНОЙ, ТОЛЬКО УЗКОЙ ПОЛОСОЙ ========================================================================== Разметка и классы совпадают с главной, поэтому оформление приходит готовым из nwa-lab-home.css — он подключается на этих страницах вместе с текущим файлом. Здесь только то, что отличает узкую шапку от высокого hero-блока. -------------------------------------------------------------------------- */ body.nwa-page .nwa-topbar{ /* На главной секция занимает min(70vh, 680px) — почти экран. Здесь это узкая полоса. Высота задана явно: при height:auto блок схлопывался по содержимому, фон превращался в тонкую ленту, а логотип вываливался из неё на светлое полотно страницы. 10.09.2026 полоса уменьшена вдвое: было 132px, стало 66. Причина — панель стала липкой и висит на экране постоянно, а 132px съедали заметную долю окна, особенно на ноутбуках и телефонах. Вместе с высотой вдвое уменьшены логотип и нижний отступ: высоту полосы задаёт логотип, и без него одна min-height ничего бы не изменила. Затем в панель добавилась вторая строка с разделами каталога, и общая высота стала 107: 78 у верхней строки, 28 у нижней и 1 у разделительной линии. Собственного нижнего отступа у секции больше нет — он отодвигал разделы от кромки, а их просили к ней прижать; просвет под текстом задаёт сама полоса. Значение ниже — страховка на случай, если обе строки почему-то схлопнутся. 11.09.2026 верхнюю строку увеличили вдвое: 78 → 156. Полоса разделов осталась 28 — её содержимое занимает 19 пикселей, и прибавка ушла бы в пустоту. Вместе с ростом строки вдвое вырос логотип: высоту строки задаёт он, и без него одна min-height дала бы пустую ленту. Тогда же прежняя разделительная линия в 1 пиксель заменена светлой полоской в 2 — она рисуется границей секции и потому входит в высоту. Итог 186: 156 у верхней строки, 28 у полосы разделов, 2 у полоски. 22.09.2026 владелец: «шапку на 30% меньше по высоте». Верхняя строка 156 → 100, полоса разделов и полоска прежние: 100 + 28 + 2 = 130. Знак и название уменьшены в той же пропорции (около 0,64). */ min-height:130px; height:auto; padding-bottom:0; /* clip-path на главной срезает выступающий фон снизу. Тут фон никуда не выступает, а лишнее отсечение мешало бы выпадающим меню панели. */ clip-path:none; overflow:visible; } /* ── Фон верхней строки: как у подвала — карта под тонировкой ────────────── Фотография цеха убрана: на высоком hero главной она работает, а в узкой ленте от неё остаётся пестрота, мешающая читать меню. Блок .nwa-hero__bg не вырезан из разметки, а погашен — он общий с главной. ⚠️ КАРТА ЗАДАНА СВОЯ, А НЕ ЧЕРЕЗ ПРОЗРАЧНОСТЬ, И ЭТО ПРИНЦИПИАЛЬНО. Подвалу хватает быть полупрозрачным: он лежит ВНЕ
и показывает фон самого body. С шапкой так нельзя — она липкая, при прокрутке под неё заезжает
со светлой заливкой #F2F2F0. Сквозь по-настоящему прозрачную панель просвечивало бы светлое поле, и белые надписи по нему не читались бы: наверху страницы вид был бы верный, а стоило прокрутить — ломался. Поэтому фон у панели СВОЙ, непрозрачный. Это остаётся верным и после 15.09.2026, когда карту сменили на снимок цеха. ⚠️ ИСТОРИЯ, ЧТОБЫ НЕ ВЕРНУЛИ СЛУЧАЙНО. Пока в полосе была та же карта, что у body, к ней прилагался background-attachment:fixed: кадр привязывался к окну и совпадал с полотном пиксель в пиксель, отчего панель выглядела прозрачной, не будучи ею. Со своим снимком совпадать не с чем, приём стал лишним и снят — подробности в самом правиле ниже. Значения больше НЕ обязаны совпадать с фоном body: у панели свой кадр. */ body.nwa-page .nwa-topbar .nwa-hero__bg{ display:none; } body.nwa-page .nwa-topbar{ /* 15.09.2026, по просьбе владельца: в полосе тот же снимок цеха, что в первом экране главной и в подвале. Было — карта `Fon/333.jpg` под тонировкой .2, то есть тот же фон, что у `body`. Задаётся здесь только ВЕРХНЯЯ строка панели (около 156px): нижняя полоса разделов рисует свой непрозрачный фон поверх и до этих слоёв не пропускает. Так и задумано — на ленте разделов мелкие подписи, и снимок под ними читался бы хуже. Цвет-подложка нужен на случай, если снимок не загрузился: без него сквозь тонировку просвечивало бы содержимое страницы. ⚠️ background-attachment СТАЛ scroll, БЫЛ fixed — И ВЕРНУТЬ НЕЛЬЗЯ. `fixed` стоял ради конкретного приёма: картинка привязывалась к окну так же, как у `body`, кадр совпадал с полотном пиксель в пиксель, и полоса выглядела прозрачной, не будучи ею. Теперь у полосы СВОЙ снимок, а не тот же, что у страницы, — совпадать больше не с чем, и приём потерял смысл. Зато `fixed` дёргает фон при прокрутке в мобильных браузерах, а на iOS часто не работает вовсе. Поэтому scroll. ⚠️ ЗАТЕМНЕНИЕ ПОВТОРЯЕТ ПОДВАЛ — ОДНА ФОРМА НА ОБА БЛОКА. Владелец, 15.09.2026: «затемнение шапки некрасиво, сделай как у подвала». Правильное замечание: у подвала перепад маленький (.90 → .84), поэтому тень читается как ровная, а здесь стояло .94 → .56 — на нижней трети полосы снимок вываливался светлым пятном, и граница перехода была видна как отдельная линия. Теперь значения и стопы те же, что в подвале (`nwa-lab-home.css`, правило `.footer`): .90 держится до 72%, дальше мягко до .84. ⚠️ МЕНЯЕТЕ ЗДЕСЬ — МЕНЯЙТЕ И В ПОДВАЛЕ. Это два блока одного вида, и расходиться им нельзя: они видны на одной странице, только сверху и снизу. Файла два (`nwa-inner.css` и `nwa-lab-home.css`), потому что подвал общий для всего сайта, а полоса — только для внутренних страниц. ⚠️ ПЛОТНОЕ ПОЛЕ НАЧИНАЕТСЯ ОТ САМОЙ ВЕРХНЕЙ КРОМКИ (0%), а не от строки меню, и внутри зоны текста значение ОДНО. Это отдельное требование владельца: «затемняем не только за текстом, но и сверху, чтоб пятнами не было». Глаз ловит именно перепад, а не яркость, — версия с переходом внутри текстовой зоны выглядела пятнистой при том же контрасте. ⚠️ Замерено на 1440px при высоте полосы 186: логотип занимает y 36…120, строка меню y 25…47, то есть весь текст лежит выше 65%, а лента разделов начинается с y 156 (84%) и рисует свой фон поверх. Меняете размер логотипа или высоту полосы (--nwa-topbar-h:186px) — пересчитайте стоп. ⚠️ ПЛОТНОСТЬ ПРАВИТСЯ ЗНАЧЕНИЯМИ АЛЬФЫ, больше — темнее. Подбирал владелец: .74/.66 → .88/.82 → .82/.76 → .88 до 65% → .94 до 62%, далее .56 → сейчас .90 до 72%, далее .84. Без затемнения тот же снимок даёт контраст 1.02 — надписи пропадают на бликах станков. */ background-color:#0B0D10; background-image: linear-gradient(180deg, rgba(8,9,11,.90) 0%, rgba(8,9,11,.90) 72%, rgba(8,9,11,.84) 100%), url('/image/catalog/nwa/nwa-hero-bg-workers.jpg?v=1'); background-position:center 30%, center 30%; background-repeat:no-repeat, no-repeat; background-size:cover, cover; background-attachment:scroll, scroll; } /* Затемнение больше ни на что не влияет: фон панели и так сплошной чёрный. Блок погашен, а не вырезан из шаблона, — он общий с главной, где нужен. */ body.nwa-page .nwa-topbar .nwa-hero__scrim{ display:none; } /* ── Светлая полоска по низу панели ─────────────────────────────────────── Цвет тот же, которым залито поле страницы: var(--nwa-bg-body) стоит на
ниже по файлу. Полоска продолжает это поле вверх, под самую панель. ЗАЧЕМ ОНА. Панель липкая, и при прокрутке под неё заезжает содержимое страницы. Без просвета карточки и заголовки подходят вплотную к тёмной полосе разделов и на ходу касаются её. Полоска даёт постоянный светлый зазор, и содержимое всегда уходит под панель через него. ПОЧЕМУ ГРАНИЦА, А НЕ ОТДЕЛЬНЫЙ БЛОК. Граница — часть самой панели: она липнет вместе с ней, занимает место в потоке (страница сама начинается ниже) и не может отстать при прокрутке. Отдельный блок под панелью уехал бы вверх первым же движением, а абсолютно позиционированная полоса не занимала бы места, и содержимое пришлось бы отодвигать вручную. Раньше здесь стояла тёплая линия в 1 пиксель — она отделяла ленту от тёмного полотна за краями светлого поля. Полоска делает то же самое и заметнее, поэтому линия убрана: двух границ у элемента не бывает, а рисовать её тенью ради шва под тёмной полосой не стоит. ⚠️ Толщина входит в общую высоту панели: 156 + 28 + 2 = 186. Меняя её, поправить min-height секции выше и тот же расчёт в комментариях к нему. Начинали с 8 пикселей, по просьбе пользователя полоса стала тоньше. Взято целое число: деление 8 на 5 дало бы 1,6 — дробную границу браузер всё равно округлит до пикселя экрана, и толщина поехала бы от масштаба системы. */ body.nwa-page .nwa-topbar{ border-bottom:2px solid var(--nwa-bg-body); } /* Панель остаётся на экране при прокрутке (10.09.2026). z-index нужен и сам по себе: выпадающие меню панели должны ложиться поверх содержимого страницы. Почему sticky, а не fixed. Sticky оставляет элемент в потоке: он занимает своё место, и содержимое страницы начинается под ним само. С fixed панель выпала бы из потока, налезла на начало страницы, и пришлось бы держать отступ сверху, равный её высоте, — а высота у неё разная на разных ширинах экрана, и любая правка полосы требовала бы правки отступа в другом месте. Работает это потому, что панель — прямой ребёнок : она лежит выше
, вставляет её header.twig сразу после открытия . Прокручивается сам документ, поэтому липнет панель к окну. Два условия, которые легко сломать не глядя: - НЕЛЬЗЯ ставить overflow (в т.ч. overflow-x:hidden) или clip-path ни на html, ни на body, ни на любого предка панели: sticky тогда молча перестаёт работать, без ошибок в консоли. У самой панели overflow:visible стоит выше по файлу — он нужен выпадающим меню, его тоже не трогать. - НЕЛЬЗЯ давать предкам transform или filter: они создают новую систему координат, и панель залипнет внутри неё, а не в окне. На главной этих правил нет: там шапка своя, у секции класс nwa-hero без nwa-topbar, и селектор до неё не достаёт. Прокрутка главной не изменилась. Оговорка про высоту: полоса занимает 132px и остаётся такой при прокрутке. На узких экранах это заметная доля окна — если мешает, панель можно уменьшать при прокрутке, но это уже требует скрипта. */ /* Без этого правила липкая панель отрывается на длинных страницах. Тема задаёт html{height:100%} и body{height:100%; display:flex}. Body получает высоту окна и НЕ растёт вместе с содержимым: измерено в Chrome — при документе 1914px сам body был 805px, содержимое просто вылезало за его границы. Липкий элемент держится только в пределах своего родителя, поэтому панель проезжала 673px (805 минус её собственные 132) и дальше уходила вверх вместе со страницей. Коварство в том, что на коротких страницах это незаметно: корзина и контакты прокручиваются на 174 и 514 пикселей, до предела не доходят, и панель ведёт себя правильно. Ломалось только там, где страница длиннее примерно 1500px. height:auto возвращает body обычное поведение — расти по содержимому. min-height:100% сохраняет то, ради чего стояло height:100%: короткая страница по-прежнему занимает не меньше экрана, а main{flex:1 0 auto} из темы по-прежнему прижимает подвал к низу. Проверено на всех страницах. */ body.nwa-page{ height:auto; min-height:100%; } body.nwa-page .nwa-topbar{ position:sticky; top:0; /* Слой поднят с 60 до 1000 вместе с переходом на sticky. Пока панель уезжала вверх вместе со страницей, 60 хватало. Теперь под неё проезжает содержимое, и всё, что лежит выше по слоям, полезло бы поверх: у раскрытой карточки товара .product-thumb.hover z-index 99, у стрелок карусели .owl-nav — 100, у меню темы .menu — 998. 1000 перекрывает их все и при этом остаётся НИЖЕ плавающего меню (.fly-menu, 1020) и модальных окон темы (1050 и выше) — они должны закрывать панель, а не наоборот. Поднимать выше 1020 нельзя. */ z-index:1000; /* Мягкая тень отделяет полосу от уезжающего под неё содержимого. */ box-shadow:0 6px 18px rgba(12,13,15,.18); } /* Логотип в узкой полосе меньше, чем на главной: там он рассчитан на высокий hero и занял бы всю шапку целиком. */ /* ── Логотип в узкой полосе: показываем только знак ──────────────────────── Файл nwa-logo.png (556×486) — это знак сверху и под ним две строки текста, «ЛАБОРАТОРИЯ NESTING» и «NEW WOOD ART», набранные тонким светлым шрифтом. На высоком hero главной это читается. В ленте 66px весь логотип ужимается до 48px, знак становится 19px, а буквы — меньше пяти: не подпись, а грязь. Поэтому здесь картинка обрезается до одного знака. Ссылка получает нужный размер и overflow:hidden, а сама картинка внутри увеличивается и сдвигается так, чтобы в окно попал только знак. Числа взяты из самого файла: знак занимает по вертикали примерно с 18-го по 205-й пиксель из 486, то есть 187. Чтобы он вышел ростом 46px, вся картинка должна быть 486 × 46 / 187 ≈ 120px, а поднять её надо на 18 × 120 / 486 ≈ 4px. Если логотип когда-нибудь перерисуют, эти три числа придётся пересчитать — других зависимостей от файла в стилях нет. */ /* На главной строка панели прижата к верхнему краю: .nwa-hero__top-inner задаёт align-items:flex-start, а логотип и меню доводятся до места каждый своим сдвигом — так было рассчитано под высокий hero. В ленте 66px это выглядит как текст, приклеенный к потолку. Здесь всё выравнивается по центру, а прежние сдвиги гасятся, иначе они складываются с центрированием. */ /* Верхняя строка кладётся ПОВЕРХ нижней полосы. Обе лежат в одной секции и обе с z-index:4 — при равном слое побеждает та, что ниже в разметке, то есть полоса. Из-за этого выпадающие списки «Вход» и «Онлайн программы», раскрываясь вниз, ныряли под неё и обрезались. Слой 6 против 4 у полосы. Достаточно поднять саму строку: списки лежат внутри неё и поднимаются вместе. */ body.nwa-page .nwa-topbar .nwa-hero__top{ z-index:6; } body.nwa-page .nwa-topbar .nwa-hero__top-inner{ align-items:center; /* ⚠️ Отступ справа — владелец, 15.09.2026: «текст отодвинем от правого края на две буквы». Замерено до правки: строка меню кончалась на x=1419 при окне 1440, то есть в 21px от кромки, и «Вход» читался как приклеенный. Две буквы при кегле 15px — примерно 18px, берём 22. ⚠️ Задаётся ИМЕННО здесь, а не на .nwa-nav: на главной у этого блока стоит padding-right:0 (там строка идёт по сетке hero, см. nwa-lab-home.css), и общее правило разъехалось бы с главной. ⚠️ Отступ съедает ширину строки. На 1300px и уже зазор между пунктами уменьшается до 14 (медиа-правило в конце файла) — если меню когда-нибудь начнёт переноситься на вторую строку, сначала трогать зазор, а не это число. */ padding-right:22px; /* Верхняя строка: логотип, название, каталог, инструменты, связь, корзина, аккаунт. Было 58px, поднято на 35% до 78 — вместе с ней подрос логотип, иначе прибавка ушла бы в пустоту по бокам от него. 11.09.2026 строка увеличена вдвое: 78 → 156. Полоса разделов под ней не тронута, растёт только верх. Числа, которые обязаны меняться вместе с этим: высота логотипа и высота его картинки ниже по файлу, min-height самой секции выше (156 + 28 + 1) и тот же блок в медиазапросе для телефонов — там строка намеренно осталась прежней. 22.09.2026: 156 → 100 (вся шапка −30%, см. min-height секции). */ min-height:100px; } /* ── Нижняя строка панели: разделы каталога ──────────────────────────────── Часть той же липкой секции, а не отдельный блок под ней: вынесенная наружу полоса уехала бы вверх при прокрутке, оставив шапку без половины меню. Своего фона у неё нет. Затемнение .nwa-hero__scrim растянуто на всю секцию (inset:0) и накрывает обе строки, поэтому стекло у них общее. Строки разделяет только тонкая линия. Высота панели складывается из трёх чисел: 156 у верхней строки, 28 у нижней и 1 у разделительной линии — 185. Меняя одно, пересчитайте остальные: то же значение стоит в комментарии к min-height самой полосы. На телефонах верхняя строка остаётся 78, и там сумма прежняя — 107. */ body.nwa-page .nwa-topbar__rail{ position:relative; /* Над затемнением, иначе оно закроет ссылки. Тот же слой, что у верхней строки (.nwa-hero__top в nwa-lab-home.css). */ z-index:4; /* Полоса непрозрачная, в отличие от верхней строки: та показывает фоновую карту под тонировкой, а здесь ровная заливка. Разделы читаются на ней одинаково по всей ширине, без светлых пятен от карты под мелким шрифтом. Цвет тот же, что у подвала. Верхние 8 пикселей заливка набирает плотность из ничего. Так стык двух строк не читается как линия: карта верхней строки не обрывается резко, а растворяется в заливке. Разделительной рамки здесь поэтому нет — она давала ровно тот шов, который просили убрать. 8 пикселей выбраны не наугад: содержимое полосы прижато к низу и занимает около 19 пикселей из 28, то есть верх текста начинается примерно на девятом. Растяжка заканчивается выше него, и надписи лежат на полностью плотном фоне. Меняя высоту полосы или отступ под текстом, проверьте, что растяжка по-прежнему заканчивается выше надписей. */ background:linear-gradient(to bottom, rgba(12,13,15,0) 0, #0C0D0F 8px); } body.nwa-page .nwa-topbar__rail-inner{ display:flex; /* Содержимое прижато к низу, а не по центру: так разделы стоят у самой кромки панели, и свободное место остаётся сверху, под верхней строкой, где оно и уместно. */ align-items:flex-end; /* Высота менялась много раз: 42 → 21 (уменьшили вдвое) → 30 и 34 вслед за ростом иконок → 28 сейчас, когда полосу попросили сделать уже. Строка обязана быть выше значка (23px) вместе с отступом ниже, иначе он вылезет за край. На такой высоте пункты держатся только если убрать у них собственные вертикальные отступы — те приходят с классом .nwa-nav__link из nwa-lab-home.css и рассчитаны на панель главной. */ min-height:28px; /* Небольшой просвет под текстом. Совсем без него надписи упираются в кромку и выглядят обрезанными. */ padding-bottom:4px; } body.nwa-page .nwa-topbar__rail-nav .nwa-nav__link{ padding-top:0; padding-bottom:0; line-height:1; } /* Меню верхней строки прижато вправо, это — влево, под логотип: строка разделов читается как продолжение названия, а не как хвост меню аккаунта. Правится одной цифрой: justify-content:flex-end вернёт её вправо. Три свойства снимаются с класса .nwa-nav, они рассчитаны на панель главной, где меню стоит в одной строке с логотипом и прижато к правому краю: justify-content:flex-end, отступ справа и margin-top в vh — последний на широких экранах даёт заметный провал вниз. */ body.nwa-page .nwa-topbar__rail-nav{ justify-content:flex-start; margin:0; padding:0; /* Перенос разрешён: на узких экранах строка станет выше, но пункты не уползут за край. ⚠️ Зазор — это ресурс, а не украшение. 11.09.2026 разделов стало девять (добавились «Услуги»), и им нужно 1298 пикселей. На ширине окна 1600 и больше полосе достаётся 1470 — помещаются. На 1440 достаётся 1270, и не хватало 28: «Услуги» переносились на вторую строку, панель вырастала со 186 до 212. Зазор уменьшен с 22 до 18 — это ровно 8 промежутков по 4 пикселя, 32 сэкономленных. Добавишь десятый раздел — считай заново. */ flex-wrap:wrap; gap:6px 18px; } body.nwa-page .nwa-topbar__cat{ display:inline-flex; align-items:center; gap:9px; /* Росло дважды: 12 → 13 → 14. На 12 рисунок иконок рассыпался, а названия читались с усилием. Дальше увеличивать некуда — строка из восьми разделов упрётся в ширину контейнера и перенесётся на вторую. 19.09.2026, владелец: снова 12 — как верхняя строка меню (там тоже 12, см. nwa-lab-home.css). Иконки не уменьшались. */ font-size:12px; font-weight:500; letter-spacing:.02em; white-space:nowrap; } /* Иконка — картинка, а не значок шрифта: цвет зашит в сам файл, и через color его не поменять. Белый получается фильтром: brightness(0) гасит рисунок в чёрный силуэт, invert(1) переворачивает его в белый. Приём работает с любым исходным цветом, поэтому иконки можно менять, не думая об их палитре. Разноцветными они здесь не годятся: на мелком кегле восемь пёстрых значков в строку рассыпают её на части, а рядом стоит одноцветное меню шрифтовыми значками — вместе это читалось как две разные панели. */ body.nwa-page .nwa-topbar__cat-icon{ display:block; /* Росли дважды: 16 → 20 → 23. Иконки — тонкая линейная графика, и на 16 пикселях рисунок сливался в пятно: узнать раздел по значку было нельзя. */ width:23px; height:23px; flex:0 0 auto; /* Иконка рисуется цветом ТЕКСТА: сама картинка работает маской, а виден сквозь неё фон элемента, то есть currentColor. Поэтому значок белеет и бежевеет вместе с надписью сам, безо всяких правил для наведения. Так сделано вместо прежнего filter:brightness(0) invert(1). Тот умел красить только в белый: чтобы получить бежевый #CD802D, пришлось бы подбирать вслепую длинную цепочку sepia/saturate/hue-rotate, и при любой правке палитры подбирать заново. ⚠️ Отсюда требование к файлам иконок: фон должен быть ПРОЗРАЧНЫМ. Маска берёт альфа-канал, и белая подложка в SVG даст сплошной квадрат вместо рисунка. Собственный цвет внутри файла значения не имеет — все девять сейчас оранжевые, и это никак не видно. Разметка поэтому не , а пустой : адрес приходит из шаблона переменной --nwa-cat-icon, потому что взять его из атрибута src средствами CSS нельзя. ⚠️ Адрес в переменной обязан начинаться со СЛЭША. Относительный путь в url() внутри пользовательского свойства браузер считает не от страницы, а от файла стилей, где свойство используется, — то есть от папки stylesheet. Замер в Chrome показал итог: он искал значок по адресу .../theme/unishop2/stylesheet/image/catalog/... и, конечно, не находил. В тот же относительный путь работает, поэтому ошибка не бросается в глаза: ломаются только иконки, нарисованные маской. Слэш ставит шаблон: url('/{{ category.icon }}'). */ background-color:currentColor; -webkit-mask-image:var(--nwa-cat-icon); mask-image:var(--nwa-cat-icon); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; /* Тень отделяет тонкие линии от фона и не даёт им теряться. Раньше стояла в той же цепочке, что и побелка; здесь осталась одна. */ filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); transition:transform .15s ease; } /* При наведении значок слегка подрастает — на строке без заливки это единственный отклик, который заметен, кроме цвета самой надписи. */ body.nwa-page .nwa-topbar__cat:hover .nwa-topbar__cat-icon{ transform:scale(1.12); } /* ------------------------------------------------------------------------ Выпадающие списки подкатегорий в полосе разделов Раскрытие, фон, рамка и подсветка пунктов приходят готовыми с классов .nwa-nav__soft* из nwa-lab-home.css — теми же, что у «Онлайн программ» в верхней строке. Здесь правится только то, чем полоса отличается от неё. Список появляется у любого раздела, где в админке есть вложенные категории: состав приходит из базы, в коде своего перечня нет. ------------------------------------------------------------------------ */ body.nwa-page .nwa-topbar__cat-wrap{ /* Обёртка встаёт на место самой ссылки и не должна тянуть строку вверх: содержимое полосы прижато к нижней кромке (align-items:flex-end у .nwa-topbar__rail-inner), а класс .nwa-nav__soft приносит с собой align-items:center, рассчитанный на высокую панель главной. */ align-items:flex-end; } /* Запасное короткое название для узких экранов. Показывается только у разделов с классом --long, то есть у тех, кому в catalog_cards.php задано поле 'tiny'. Сейчас такой один: «Услуги и Настройки» — полное название на 90 пикселей длиннее прежних «Услуг», и ниже 1366 строка разделов от него переносилась на вторую, а панель росла со 186 до 212. Там выводится просто «Услуги». Порог 1365, а не 1499: между этими значениями контейнер ещё широкий (1270) и полное название помещается. Проверено замером на семи ширинах. ⚠️ Селекторы длиннее, чем кажется нужным, и укорачивать их нельзя. Надписи внутри пунктов панели уже накрыты правилом `.nwa-nav__link > span:not(.nwa-nav__cart-icon):not(.nwa-nav__cart-count)` из nwa-lab-home.css, которое ставит им display:inline-block. Два :not() считаются за классы, и вес у него выше обычного `body.nwa-page .класс` — короткое правило молча проигрывало, на экране висели оба названия сразу. Замерено через вычисленные стили в Chrome, по коду это не видно. */ body.nwa-page .nwa-topbar .nwa-topbar__cat .nwa-topbar__cat-name--tiny{ display:none; } @media (max-width:1365px){ body.nwa-page .nwa-topbar .nwa-topbar__cat--long .nwa-topbar__cat-name{ display:none; } body.nwa-page .nwa-topbar .nwa-topbar__cat--long .nwa-topbar__cat-name--tiny{ display:inline-block; } } /* Признак того, что у раздела есть вложения: маленький треугольник вниз. Без него список выглядит сюрпризом — курсор попадает на пункт случайно. Отрицательный отступ гасит часть промежутка между значком и надписью (gap:9px у .nwa-topbar__cat): целиком девять пикселей здесь слишком много, треугольник должен читаться как часть надписи, а не как третий элемент. ⚠️ Ширина полосы — ресурс, см. комментарий к gap у .nwa-topbar__rail-nav. Треугольник добавляет по 9 пикселей тем разделам, у которых есть подкатегории. Прибавятся новые такие разделы — проверьте, что строка по-прежнему помещается на 1280. */ body.nwa-page .nwa-topbar__cat--has-sub:after{ content:""; width:0; height:0; margin-left:-4px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.75; transition:opacity .15s ease; } body.nwa-page .nwa-topbar__cat-wrap.is-open .nwa-topbar__cat--has-sub:after{ opacity:1; } body.nwa-page .nwa-topbar__cat-menu{ /* По левому краю пункта, а не по центру. Центрирование из nwa-lab-home.css рассчитано на меню у правого края экрана; здесь разделы прижаты влево, и у первых из них половина списка ушла бы за край контейнера. */ left:0; transform:none; /* Выпадает из-под полосы, а не из-под самой надписи: содержимое прижато к нижней кромке, и 4 пикселя отступа пришлись бы ровно на кромку. Разрыв перекрыт фоновым мостиком .nwa-nav__soft-menu:before высотой 10px, чтобы открытый список визуально примыкал к панели. */ top:calc(100% + 8px); min-width:184px; /* ⚠️ overflow сюда не добавлять: он срежет тот самый фоновый мостик. Если подкатегорий однажды станет столько, что список не влезет в экран, разбивайте его на колонки, а не заводите прокрутку. */ } body.nwa-page .nwa-topbar__cat-menu .nwa-nav__soft-item{ /* Тот же кегль, что у надписей нижней панели. */ font-size:12px; padding:8px 16px; } body.nwa-page .nwa-topbar .nwa-nav{ margin-top:0; } /* Меню покупателя поднято к верхней кромке строки — как на главной, где .nwa-hero__top-inner выравнивает содержимое по flex-start и меню стоит сразу под краем панели. Здесь строка выровнена по центру, потому что знак и название прижаты к её низу каждый своим align-self; меню поэтому поднимается тоже поимённо. ⚠️ Селектор обязан быть привязан к верхней строке. Класс .nwa-nav висит и на полосе разделов — там