/* GRAPE EXPO — оформление каталога/корзины под стиль лендинга magazinsclad.ru
Подключается из include/header_include/head_custom.php (только сайт s2).
Палитра лендинга: акцент #d97706, тёмный #2a2e3f, кремовый фон #f8f5f0.
CSS Аспро грузится позже (через BX.setCSSList), поэтому везде !important. */
@font-face { font-family: 'Montserrat'; src: url('/local/templates/empty_opt/fonts/400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/local/templates/empty_opt/fonts/700.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
body, .wrapper1, .btn, input, select, textarea, .title, h1, h2, h3, h4, h5 {
font-family: 'Montserrat', Arial, sans-serif !important;
}
/* фон страницы и шапки */
body { background: #f8f5f0 !important; color: #2a2e3f; }
.wrapper1.header_bgcolored .top-block,
.wrapper1.header_bgcolored .header { background: #fff !important; }
.top-block { border-bottom: 1px solid #ece5d8 !important; }
/* ---------- 1. Верхняя контактная полоса ----------
Ключевое: Аспро красит .maxwidth-theme в белый, из-за этого полоса выглядела
как «светлый текст на светлом фоне», а тёмный фон был виден только по краям. */
.ge-topbar { background: #2a2e3f !important; color: #f4f1ea !important; width: 100% !important; }
.ge-topbar .maxwidth-theme,
.ge-topbar .ge-topbar__inner { background: transparent !important; background-color: transparent !important; }
.ge-topbar__inner {
display: flex !important; justify-content: space-between !important; align-items: center !important;
gap: 16px !important; padding: 8px 0 !important; flex-wrap: wrap !important;
font-size: 12px !important; line-height: 1.5 !important;
}
.ge-topbar__left, .ge-topbar__right { color: #f4f1ea !important; }
.ge-topbar a, .ge-topbar__right a { color: #f4f1ea !important; text-decoration: none !important; }
.ge-topbar a:hover { color: #d97706 !important; }
.ge-topbar__right { display: flex !important; gap: 18px !important; }
/* ---------- 2. Левая панель Аспро (пресеты/настройки темы) ---------- */
.top_block_switch,
.top_block_switch .switch { display: none !important; visibility: hidden !important; }
/* ---------- 4. Дубль заголовка: крошка из одного пункта ---------- */
.breadcrumbs:has(.breadcrumbs__item:only-child) { display: none !important; }
/* ---------- 6. Горизонтальное меню: акцент лендинга #d97706 ---------- */
.menu-row.middle-block,
.menu-row.middle-block.bgcolored { background: #d97706 !important; background-color: #d97706 !important; }
.menu-row .mega-menu table td,
.menu-row .mega-menu table td.menu-item,
.menu-row .mega-menu table td .wrap,
.menu-row .mega-menu table td > a,
.menu-row .mega-menu table td .wrap > a { background-color: transparent !important; color: #fff !important; }
.menu-row .mega-menu table td.active,
.menu-row .mega-menu table td.cur,
.menu-row .mega-menu table td:hover { background-color: #b45309 !important; }
.menu-row .mega-menu table td.active .wrap > a,
.menu-row .mega-menu table td:hover .wrap > a,
.menu-row .mega-menu table td a:hover { color: #fff !important; }
#mobilemenu .menu > ul > li > a,
#mobilemenu .menu.middle > ul > li > a { color: #2a2e3f !important; }
/* акцентный цвет интерфейса */
.btn.btn-default, .btn-primary, button.btn-default, .basket .btn,
.catalog_item .btn, .item .btn, .buy_block .btn, .button.btn {
background: #b45309 !important; border-color: #b45309 !important; color: #fff !important;
}
.btn.btn-default:hover, .btn-primary:hover, .basket .btn:hover { background: #92400e !important; border-color: #92400e !important; }
.colored, .colored_theme_hover_bg:hover { color: #b45309; }
.price, .price .price_value, .item_price, .cost { color: #2a2e3f !important; font-weight: 600 !important; }
.menu > li > a:hover, .menu > li.active > a, .menu > li.current > a { color: #d97706 !important; }
/* логотип лендинга вместо логотипа бутика */
.logo a img, .logo a svg, .logo img, .logo svg { display: none !important; }
.logo a, .logo > a {
display: block !important; width: 190px !important; height: 42px !important;
background: url('/local/templates/empty_opt/images/logo.svg') no-repeat left center / contain !important;
}
#footer .logo a, .footer .logo a { background: url('/local/templates/empty_opt/images/logo.svg') no-repeat left center / contain !important; }
/* убираем чужие тексты и блоки бутика */
.top-description.addr, .top-description { display: none !important; }
.region_wrapper, .regions, .site-selector, .region-phones, .city_chooser { display: none !important; }
.compare-link, .favorite-link, .wishlist, .compare_item_button, .item-compare { display: none !important; }
.bottom-icons-panel__content, .bottom-icons-panel { display: none !important; }
/* ---------- 3. Карточка раздела: никаких иконочных «украшений» ---------- */
.section_item_inner ul li:before, .section_item_inner ul li:after { content: none !important; }
.section_item .subsections li.sect::after { content: none !important; }
.section_item td.image img { max-width: 120px !important; height: auto !important; }
/* ---------- 5/7. ПОДВАЛ: оставляем один — штатный тёмный подвал Аспро ---------- */
.ge-footer { display: none !important; }
.subscribe_button,
#footer .subscribe_button,
.footer .subscribe_button { display: none !important; }
#developer, .developer, .developer__logo { display: none !important; }
#footer, .footer, footer.footer { background: #2a2e3f !important; color: #f4f1ea !important; }
#footer .bottom-menu .item .title a, #footer .bottom_menu a, #footer a { color: #f4f1ea !important; }
#footer a:hover, .footer a:hover { color: #d97706 !important; }
#footer .footer-bottom__item, #footer .copy { color: #f4f1ea !important; }
#footer .phone.blocks, #footer .phone.blocks a, #footer .phone.blocks .phone,
#footer .email.blocks, #footer .email.blocks a, #footer .address.blocks { color: #f4f1ea !important; }
#footer .phone.blocks a { font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; }
#footer .email.blocks .svg path, #footer .address.blocks .svg path, #footer .phone.blocks .svg path { fill: #d97706 !important; }
/* ---------- 11. Правая вертикальная панель Аспро: убираем полосу иконок ---------- */
/* Сама выезжающая корзина (.basket_hover_block) остаётся рабочей */
.basket_fly > .wrap_cont > .opener,
.basket_fly .opener,
.basket_wrapp .opener { display: none !important; }
/* избранное и сравнение в каталоге не используем — прячем их иконки и в шапке */
.wraps_icon_block.compare, .wraps_icon_block.delay,
.compare_count, .wish_count, .basket-link.compare, .basket-link.delay { display: none !important; }
/* ---------- C. Только получение в магазине: убираем пустой блок «рассчитать доставку» ---------- */
.catalog_detail .calculate-delivery,
.catalog_detail .js-prices-in-item .calculate-delivery,
.item_main_info .calculate-delivery { display: none !important; }
/* строка «Оплата и доставка» в характеристиках, если появится */
.catalog_detail .tab_delivery_cost { display: none !important; }
/* ================= 12. ШАПКА: одна цветная полоса =================
По замечанию заказчика: белая полоса (.logo_and_menu-row) убрана как отдельный
блок, логотип перенесён в цветную полосу меню, «Мой кабинет» — вправо после
пунктов меню, поиск удалён из разметки всех шапок. */
.logo_and_menu-row { display: none !important; }
/* страховка: остатки поиска в любой шапке */
.inline-search-show, .inline-search-block, .search_wrap, .search-block,
.mega_fixed_menu .search_block, #title-search_mega_menu { display: none !important; }
.header_wrap, .header_wrap .header-wrapper, #header, .wrapper1.header_bgcolored .header,
.wrapper1.header_bgcolored .top-block { background: #d97706 !important; }
.menu-row.middle-block.ge-header-single { background: #d97706 !important; background-color: #d97706 !important; }
.ge-header-bar { display: flex !important; align-items: center !important; gap: 22px !important; width: 100% !important; }
.ge-header-bar__logo { flex: 0 0 auto !important; display: flex !important; align-items: center !important; }
.ge-header-bar__logo .ge-logo { display: block !important; line-height: 0 !important; }
.ge-header-bar__logo .ge-logo img { display: block !important; height: 38px !important; width: auto !important; max-width: 200px !important; }
.ge-header-bar__menu { flex: 1 1 auto !important; min-width: 0 !important; }
.ge-header-bar__menu .menu-only { width: 100% !important; }
.ge-header-bar__menu nav.mega-menu, .ge-header-bar__menu nav.mega-menu table { width: 100% !important; }
.ge-header-bar__cabinet { flex: 0 0 auto !important; margin-left: auto !important; padding-left: 6px !important; }
.ge-header-bar__cabinet .wrap_icon, .ge-header-bar__cabinet .inner-table-block { display: block !important; line-height: 1 !important; }
.ge-header-bar__cabinet .personal-link,
.ge-header-bar__cabinet .personal-link .name,
.ge-header-bar__cabinet .personal-link .wrap,
.ge-header-bar__cabinet .personal-link span { color: #fff !important; text-transform: uppercase !important;
font-size: 13px !important; font-weight: 600 !important; letter-spacing: .02em !important; text-decoration: none !important; }
.ge-header-bar__cabinet .personal-link .svg path,
.ge-header-bar__cabinet .personal-link svg path { fill: #fff !important; }
.ge-header-bar__cabinet .personal-link:hover,
.ge-header-bar__cabinet .personal-link:hover .name { color: #ffe6bd !important; }
/* выпадающий список кабинета должен быть выше полосы */
.ge-header-bar__cabinet .dropdown, .ge-header-bar__cabinet .dropdown-menu { z-index: 3000 !important; }
/* мобильная шапка — в тон полосы, чтобы логотип и бургер читались */
@media (max-width: 991px) {
#mobileheader, .mobileheader-v1, #mobileheader .mobileheader,
#mobileheader .mobileheader-v1 { background: #d97706 !important; }
#mobileheader .burger svg path, #mobileheader .wrap_icon svg path,
#mobileheader .right-icons svg path { fill: #fff !important; }
#mobileheader .burger .svg path { stroke: #fff !important; }
#mobileheader .logo a, #mobileheader .logo > a { width: 150px !important; height: 34px !important; }
#mobileheader .logo a { background-position: left center !important; }
}
/* ================= 13. ШАПКА: добивка (единый цвет, без чужих подложек) ================= */
/* .menu-only и .line-row красились в цвет темы Аспро (#c0b283) — из-за них
в полосе меню была khaki-подложка, а под шапкой — khaki-линия.
Красим весь тракт меню прозрачным, цвет даёт сама полоса .ge-header-single. */
.header_wrap .menu-only,
.ge-header-bar__menu .menu-only,
.ge-header-bar__menu nav.mega-menu,
.ge-header-bar__menu nav.mega-menu table,
.ge-header-bar__menu nav.mega-menu tbody,
.ge-header-bar__menu nav.mega-menu tr,
.ge-header-bar__menu nav.mega-menu td,
.ge-header-bar__menu nav.mega-menu td .wrap,
.ge-header-bar__menu nav.mega-menu td a,
.ge-header-bar__menu .table-menu { background: transparent !important; background-color: transparent !important; }
.header_wrap .line-row, .line-row.visible-xs, .line-row { background: #d97706 !important; background-color: #d97706 !important; border-color: #b45309 !important; }
/* активный и наведённый пункт — тёмный акцент (как было) */
.ge-header-bar__menu nav.mega-menu td.active,
.ge-header-bar__menu nav.mega-menu td.cur,
.ge-header-bar__menu nav.mega-menu td:hover { background-color: #b45309 !important; }
/* ================= 14. ЛОГОТИП в цветной полосе ================= */
.ge-header-bar__logo .ge-logo img { height: 46px !important; max-width: 240px !important; }
/* ================= 15. ШАПКА: устойчивая раскладка ================= */
.ge-header-bar { overflow: visible !important; gap: 14px !important; }
.ge-header-bar__menu { overflow: hidden !important; }
.ge-header-bar__cabinet { flex: 0 0 auto !important; white-space: nowrap !important; overflow: visible !important; }
.ge-header-bar__cabinet .personal-link { white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; overflow: visible !important; }
.ge-header-bar__cabinet .personal-link .wrap { display: inline-block !important; overflow: visible !important; }
.ge-header-bar__cabinet .personal-link .name { display: inline-block !important; visibility: visible !important; color: #fff !important;
font-size: 13px !important; line-height: 1.2 !important; text-transform: uppercase !important; font-weight: 600 !important; }
.ge-header-bar__cabinet .personal-link .svg, .ge-header-bar__cabinet .personal-link i.svg { display: inline-block !important; vertical-align: middle !important; }
.ge-header-bar__cabinet .personal-link svg { display: inline-block !important; }
/* ================= 16. ШАПКА: кабинет справа и логотип ================= */
/* 1) Кабинет больше не упирается в границу контейнера: правый отступ + каретка внутри. */
.ge-header-bar__cabinet { padding-right: 22px !important; }
/* 2) Вертикальное центрирование по полосе — как у пунктов меню (высота полосы 53px). */
.ge-header-bar__cabinet { align-self: stretch !important; display: flex !important; align-items: center !important; }
.ge-header-bar__cabinet .wrap_icon, .ge-header-bar__cabinet .inner-table-block,
.ge-header-bar__cabinet .auth_wr_inner { display: flex !important; align-items: center !important; height: 100% !important; }
.ge-header-bar__cabinet .personal-link { display: inline-flex !important; align-items: center !important;
height: 100% !important; line-height: 1.2 !important; }
.ge-header-bar__cabinet .personal-link .wrap, .ge-header-bar__cabinet .personal-link .name { line-height: 1.2 !important; }
/* каретка дропдауна — сразу за подписью, без вылета за контейнер */
.ge-header-bar__cabinet .auth_wr_inner > i.svg, .ge-header-bar__cabinet .auth_wr_inner > .svg { margin-left: 6px !important; display: inline-block !important; vertical-align: middle !important; }
/* 3) Логотип: белая непрозрачная версия (в исходном SVG часть заливки была white с opacity .35) */
#mobileheader .logo a, #mobileheader .logo > a { background-image: url('/local/templates/empty_opt/images/logo.svg') !important; }
.ge-header-bar__logo .ge-logo img { filter: none !important; opacity: 1 !important; }
@media (max-width: 991px) {
#mobileheader .logo a, #mobileheader .logo > a { background-size: contain !important; background-position: left center !important; }
}
/* ================= 17. МОБИЛЬНАЯ ШАПКА: логотип по центру полосы =================
Было: .logo-block (float:left, height:62px) + .logo a (height:34px, display:block) —
логотип прижимался к ВЕРХУ полосы (центр на 14px выше центра шапки) и упирался
в тёмную контактную полосу. Теперь полоса — flex-строка, все элементы по центру. */
@media (max-width: 991px) {
#mobileheader .mobileheader-v1, #mobileheader .mobileheader {
display: flex !important; align-items: center !important; height: 63px !important;
padding: 0 10px !important; box-sizing: border-box !important; overflow: hidden !important;
}
#mobileheader .burger, #mobileheader .logo-block, #mobileheader .right-icons {
float: none !important; display: flex !important; align-items: center !important;
height: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important;
}
#mobileheader .burger { flex: 0 0 auto !important; justify-content: flex-start !important; }
#mobileheader .logo-block { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 8px !important; justify-content: flex-start !important; }
#mobileheader .right-icons { flex: 0 0 auto !important; margin-left: auto !important; justify-content: flex-end !important; }
/* логотип: ровно по центру полосы, без вылетов за её границы */
#mobileheader .logo, #mobileheader .logo a, #mobileheader .logo > a {
display: block !important; width: 128px !important; max-width: 100% !important; height: 30px !important;
margin: 0 !important; padding: 0 !important;
background-image: url('/local/templates/empty_opt/images/logo.svg') !important;
background-repeat: no-repeat !important; background-position: left center !important; background-size: contain !important;
}
#mobileheader .logo svg, #mobileheader .logo img, #mobileheader .logo a img, #mobileheader .logo a svg { display: none !important; }
#mobileheader .right-icons > div, #mobileheader .right-icons .wrap_icon {
display: flex !important; align-items: center !important; height: 100% !important; }
}
/* ================= 18. ЛОГОТИП (оригинальные пропорции) и мобильная полоса =================
Логотип берём ОРИГИНАЛЬНЫЙ empty_opt/images/logo.svg (геометрия байт-в-байт как на лендинге),
а белизну даём фильтром. bright(0) делает все пиксели чёрными (альфа сохраняется!), invert(1)
превращает их в белые — поэтому внутренняя полупрозрачность (35%) оригинала не теряется
и силуэт/деталировка выглядят как на лендинге, только белым. */
/* размер задаём ТОЛЬКО по высоте, ширина auto => пропорции не искажаются */
.ge-header-bar__logo .ge-logo img {
display: block !important; height: 30px !important; width: auto !important;
max-width: none !important; max-height: none !important; object-fit: contain !important;
filter: brightness(0) invert(1) !important; opacity: 1 !important;
}
.ge-header-bar__logo .ge-logo { line-height: 0 !important; }
/* мобильная шапка: тот же оригинальный файл + фильтр, высота только */
@media (max-width: 991px) {
#mobileheader .logo, #mobileheader .logo a, #mobileheader .logo > a {
width: auto !important; height: 28px !important; max-width: 60% !important;
background-image: url('/local/templates/empty_opt/images/logo.svg') !important;
background-repeat: no-repeat !important; background-position: left center !important;
background-size: contain !important; filter: brightness(0) invert(1) !important;
}
}
/* ---- верхняя контактная полоса: только для десктопа (брейкпоинт как у мобильной шапки) ---- */
@media (max-width: 991px) {
.ge-topbar { display: none !important; }
}
/* телефон в мобильной шапке и в бургер-меню */
#mobileheader .wrap_phones a.ge-mobile-phone { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; }
#mobileheader .wrap_phones a.ge-mobile-phone svg, #mobileheader .wrap_phones a.ge-mobile-phone use { fill: #fff !important; }
#mobileheader .wrap_phones a.ge-mobile-phone svg path { fill: #fff !important; }
.mobilemenu-v1 .ge-mobile-phone-row a, .mobilemenu-v1 .ge-mobile-phone-row a span { color: #fff !important; }
.mobilemenu-v1 .ge-mobile-phone-row a svg path { fill: #fff !important; }
/* ================= 19. КНОПКА «ВЫХОД» В КАБИНЕТЕ ================= */
.ge-logout { margin: 12px 0 0; }
.ge-logout__btn {
display: inline-flex !important; align-items: center !important; gap: 8px !important;
padding: 9px 18px !important; border-radius: 4px !important;
background: #b45309 !important; border: 1px solid #b45309 !important; color: #fff !important;
font-size: 13px !important; font-weight: 600 !important; line-height: 1.1 !important;
text-transform: uppercase !important; letter-spacing: .02em !important; text-decoration: none !important;
transition: background .2s ease, border-color .2s ease;
}
.ge-logout__btn:hover, .ge-logout__btn:focus { background: #92400e !important; border-color: #92400e !important; color: #fff !important; }
.ge-logout__ico { display: inline-flex !important; }
.ge-logout__ico svg path { fill: #fff !important; }
@media (max-width: 991px) {
.ge-logout { margin-top: 10px; }
.ge-logout__btn { padding: 8px 15px !important; font-size: 12px !important; }
}
/* ================= 20. МОБИЛЬНЫЙ ЛОГОТИП (img, оригинальные пропорции) =================
Background-версия не могла иметь width:auto (ширина схлопывалась в 0), поэтому
логотип выводится как ![]()
: только высота, ширина считается браузером по
intrinsic-пропорциям файла. */
@media (max-width: 991px) {
#mobileheader .logo a, #mobileheader .logo > a { background-image: none !important; width: auto !important; height: auto !important; }
#mobileheader .ge-mobile-logo-link { display: block !important; line-height: 0 !important; }
#mobileheader .ge-mobile-logo {
display: block !important; height: 28px !important; width: auto !important;
max-width: 100% !important; object-fit: contain !important;
filter: brightness(0) invert(1) !important;
}
}
/* логотип мобильной шапки не должен попадать под правило скрытия логотипа Аспро
(секция 17: #mobileheader .logo img { display:none }) */
@media (max-width: 991px) {
#mobileheader .logo .ge-mobile-logo, #mobileheader .logo a .ge-mobile-logo,
#mobileheader .ge-mobile-logo-link .ge-mobile-logo {
display: block !important; visibility: visible !important; opacity: 1 !important;
height: 28px !important; width: auto !important;
}
}
/* ================= 21. МОБИЛЬНЫЙ ЛОГОТИП: ширину не ограничиваем =================
Предки (.logo / .ge-mobile-logo-link) сжимали ![]()
до 23px, из-за чего логотип
терял пропорции. Отдаём размер только по высоте, ширину считает браузер
по intrinsic-пропорциям файла (109x81 -> при 28px высоты ~38px ширины). */
@media (max-width: 991px) {
#mobileheader .logo, #mobileheader .logo-block, #mobileheader .ge-mobile-logo-link {
width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important;
}
#mobileheader .ge-mobile-logo {
width: auto !important; max-width: none !important; min-width: 0 !important;
height: 28px !important; flex: 0 0 auto !important;
}
}
/* ================= 22. МОБИЛЬНЫЙ ЛОГОТИП: без подложки =================
У .logo/.ge-mobile-logo-link оставался белый фон (и background-image старой
white-версии SVG), из-за чего за логотипом рисовался белый прямоугольник. */
@media (max-width: 991px) {
#mobileheader .logo, #mobileheader .logo-block, #mobileheader .ge-mobile-logo-link,
#mobileheader .logo a, #mobileheader .logo > a {
background: transparent !important; background-color: transparent !important; background-image: none !important;
box-shadow: none !important; border: 0 !important;
}
}
/* ================= 23. ФИЛЬТР ЛОГОТИПА — только на ![]()
=================
На мобильном фильтр висел и на , и на ![]()
(двойное применение) — от этого
вся область логотипа заливалась белым прямоугольником. Оставляем один фильтр. */
@media (max-width: 991px) {
#mobileheader .logo, #mobileheader .logo > a, #mobileheader .logo a, #mobileheader .ge-mobile-logo-link { filter: none !important; }
#mobileheader .ge-mobile-logo { filter: brightness(0) invert(1) !important; }
}
/* ================= 24. МОБИЛЬНЫЙ ЛОГОТИП: без фильтра =================
Логотип сам по себе белый, поэтому brightness(0) invert(1) — no-op, но именно он
заливал область логотипа белым прямоугольником. Убираем фильтр. */
@media (max-width: 991px) {
#mobileheader .ge-mobile-logo { filter: none !important; }
}
/* ================= 25. МОБИЛЬНЫЙ ЛОГОТИП: финал =================
Отказываемся от ![]()
в мобильной шапке: Аспро навешивает на него свой lazyload
(data-lazyload/lazyloaded) и под ним рисовалась белая подложка, а CSS-фильтр
на белом логотипе ничего не меняет (white -> brightness(0) -> invert(1) -> white).
Используем исходный файл лендинга как background, размер подобран под его
пропорции (109x81 => 1.346): 38x28 = 1.357 — силуэт не искажается. */
@media (max-width: 991px) {
#mobileheader .ge-mobile-logo { display: none !important; }
#mobileheader .logo, #mobileheader .logo > a, #mobileheader .logo a {
display: block !important;
width: 38px !important; height: 28px !important; max-width: none !important;
background: url('/local/templates/empty_opt/images/logo.svg') no-repeat left center / contain !important;
background-color: transparent !important;
filter: none !important; box-shadow: none !important; border: 0 !important;
}
#mobileheader .logo-block { width: auto !important; }
}
/* ================= 26. ЛОГОТИП: версия без плашки =================
В исходном logo.svg первый контур (.fil0) — полупрозрачная БЕЛАЯ плашка на всю
область файла. На тёмном лендинге она выглядит как подложка, на оранжевой полосе —
как «квадрат» вокруг логотипа. Используем /local/templates/empty_opt/images/logo.svg: тот же рисунок
(.fil1, пути байт-в-байт из оригинала), но плашка скрыта. Фильтр не нужен —
логотип и так белый. */
.ge-header-bar__logo .ge-logo img { filter: none !important; height: 30px !important; width: auto !important; }
@media (max-width: 991px) {
#mobileheader .logo, #mobileheader .logo > a, #mobileheader .logo a {
background-image: url('/local/templates/empty_opt/images/logo.svg') !important;
background-repeat: no-repeat !important; background-position: left center !important; background-size: contain !important;
background-color: transparent !important; filter: none !important;
width: 38px !important; height: 28px !important;
}
#mobileheader .ge-mobile-logo { display: none !important; }
}
/* ================= 27. ЛОГОТИП: финальная конфигурация =================
Логотип лендинга — БЕЛЫЙ (fill:white): большой «G» отрисован белым с
прозрачностью 35% (.fil0), надпись GRAPE — плотным белым (.fil1). Рисунок
рассчитан на тёмный фон. Поэтому:
• используем исходный файл целиком, БЕЗ CSS-фильтров и без правок SVG
(brightness(0) invert(1) для белого логотипа — no-op, а моя white-сборка
делала «G» непрозрачным и силуэт сливался);
• размер задаём только по высоте (ширина auto) — пропорции 109x81 сохраняются;
• под логотипом — деликатная тёмная подложка со скруглением, как просил
заказчик: на ней белый знак читается так же, как на лендинге. */
.ge-header-bar__logo .ge-logo {
display: inline-flex !important; align-items: center !important;
background: #2a2e3f !important; border-radius: 8px !important;
padding: 4px 8px !important; line-height: 0 !important;
}
.ge-header-bar__logo .ge-logo img {
display: block !important; height: 30px !important; width: auto !important;
max-width: none !important; max-height: none !important;
filter: none !important; opacity: 1 !important; object-fit: contain !important;
}
@media (max-width: 991px) {
#mobileheader .logo, #mobileheader .logo > a, #mobileheader .logo a {
width: 38px !important; height: 28px !important;
background-image: url('/local/templates/empty_opt/images/logo.svg') !important;
background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important;
background-color: #2a2e3f !important; /* тёмная подложка как на десктопе */
border-radius: 6px !important; filter: none !important; box-shadow: none !important; border: 0 !important;
}
#mobileheader .ge-mobile-logo { display: none !important; }
}
/* ================= 28. ТЕМА: только светлая (независимо от темы ОС) =================
В шаблоне Аспро есть авто-тёмная тема: css/blocks/dark-light-theme.css содержит
@media (prefers-color-scheme: dark) { .theme-default { --light: OFF; --dark: ON } },
после чего ВСЕ цвета Аспро берутся из var(--dark, …) и страница частично темнеет
(у нас фон оставался кремовым, а заголовки/поля становились тёмными — текст сливался).
Для сайта выставки фиксируем светлую палитру: возвращаем toggle-переменные в
«светлое» состояние с !important (медиазапрос Аспро перебивается, т.к. специфичность
та же, а !important сильнее) и дополнительно страхуем самые важные места. */
html, :root { color-scheme: light !important; }
body, .theme-default, .theme-light, .theme-dark,
html body.theme-default, html body.theme-dark {
--light: var(--ON_toggle) !important;
--dark: var(--OFF_toggle) !important;
color-scheme: light !important;
}
@media (prefers-color-scheme: dark) {
.theme-default { --light: var(--ON_toggle) !important; --dark: var(--OFF_toggle) !important; }
/* страховка для правил, которые не используют переменные */
html, body { background-color: #f8f5f0 !important; color: #2a2e3f !important; }
.wrapper1, .wraps, #content, .middle, .container, .top-block-wrapper, .page-top { background-color: transparent !important; color: #2a2e3f !important; }
h1, h2, h3, h4, h5, #pagetitle, .topic__heading, .topic__heading h1, .title, .h1, .h2, .h3 { color: #333333 !important; }
p, .text, .description, .detail-text, li, td, .muted { color: #2a2e3f !important; }
label, .form-label, label span, .field-label, .bx-soa-custom-label { color: #888888 !important; }
a, a .name { color: #b45309 !important; }
input, textarea, select, .form-control,
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="search"] {
background-color: #f8f8f8 !important; color: #333333 !important;
-webkit-text-fill-color: #333333 !important; caret-color: #333333 !important;
border-color: #ececec !important; box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: #333333 !important; opacity: 1 !important; }
/* кнопки не переопределяем: после фикса toggle-переменных они и так светлые,
а лишнее переопределение делало тёмную схему отличной от светлой */
.module-form-block-wr, .form-block-wr, .lk-page, .border_block, .auth-page-block,
.box-shadow, .white-block, .bg_block, .sale-personal-section-index-block, .form { background-color: #ffffff !important; color: #2a2e3f !important; }
#footer, .footer, footer.footer { background-color: #2a2e3f !important; color: #f4f1ea !important; }
#footer a, #footer .bottom-menu .item .title a { color: #f4f1ea !important; }
.ge-topbar, .ge-topbar a { background-color: #2a2e3f !important; color: #f4f1ea !important; }
table, .table, .data-table { background-color: #ffffff !important; color: #2a2e3f !important; }
.menu-row.middle-block, .menu-row.middle-block.bgcolored { background-color: #d97706 !important; }
}
/* ================= 29. WCAG AA: контраст подписей, второстепенного текста и кнопок =================
Замеры ДО: белый текст на кнопке #d97706 = 3.19:1; подписи #888 на кремовом = 3.26:1.
ПОСЛЕ: белый на #b45309 = 5.02:1 (ховер #92400e = 7.09:1);
подписи #63697a на кремовом #f8f5f0 = 5.04:1, на поле #f8f8f8 = 5.19:1, на белом = 5.48:1.
Кнопки затемнены только как ЗАЛИВКА под текстом: крупные декоративные зоны
(полоса меню, иконки) остаются фирменным #d97706. */
label, .form-label, label span, .field-label, .bx-soa-custom-label,
.form-text, .hint, .muted, .small, small, .description, .detail-text .muted,
.top-description, .sale-personal-section-index-block .muted {
color: #63697a !important;
}
/* в тёмной полосе и подвале второстепенный текст остаётся светлым */
#footer label, #footer .muted, #footer .small, #footer small, #footer .description,
.ge-topbar label, .ge-topbar .muted, .ge-topbar small,
#footer .footer-bottom__item, #footer .copy { color: #f4f1ea !important; }
/* единый вид и контраст всех кнопок-заливок */
.btn.btn-default, .btn-primary, button.btn-default, .basket .btn,
.catalog_item .btn, .item .btn, .buy_block .btn, .button.btn,
.ge-logout__btn, .btn.btn-lg.btn-default {
background-color: #b45309 !important; border-color: #b45309 !important; color: #ffffff !important;
}
.ge-logout__btn:hover, .btn.btn-default:hover, .btn-primary:hover, .basket .btn:hover,
button.btn-default:hover, .btn.btn-lg.btn-default:hover {
background-color: #92400e !important; border-color: #92400e !important; color: #ffffff !important;
}
/* ================= 30. КНОПКА VK ID — тот же контраст =================
Кнопка виджета VK ID (.vk-id-btn) была залита фирменным #d97706 → белый текст
давал 3.19:1. Приводим к общему виду кнопок сайта (#b45309 = 5.02:1). */
.vk-id-btn, .vk-id-btn__text, a.vk-id-btn, button.vk-id-btn,
[class*="vk-id-btn"] {
background-color: #b45309 !important; color: #ffffff !important; border-color: #b45309 !important;
}
.vk-id-btn:hover, [class*="vk-id-btn"]:hover { background-color: #92400e !important; border-color: #92400e !important; }
.vk-id-btn svg path, .vk-id-btn svg use { fill: #ffffff !important; }
/* ================= 31. WCAG AA: второстепенный текст и служебные ссылки =================
Часть подписей/ссылок шла цветом #a0a5b0 и светлее (контраст < 4.5:1).
Приводим второстепенный текст к #63697a (5.0–5.5:1 на кремовом и белом),
служебные ссылки — к нашему accent-dark #b45309 (4.62:1 на кремовом). */
.muted, .text-muted, .muted_text, .small, small, .description, .form-text, .hint, .note,
.tlink, .auth-switch, .auth-switch a, .login_link, .auth-page .tlink,
.dark_link.muted, .color-theme-hover.muted, .no-title, .top-description, .sect,
p.muted, span.muted, .js-scroll-services .muted, .catalog_section_list .element-count2,
.section_item .element-count2, .breadcrumbs__link, .breadcrumbs__item-name,
.sale-personal-section-index-block .sale-personal-section-index-block-name + .muted,
.basket-empty__text, .cart-empty .text, .sku-props .muted, .props_list .muted {
color: #63697a !important;
}
a.tlink, .auth-switch a, .login_link, a.muted, a.text-muted, a.dark_link.muted,
.color-theme-hover.muted, .js-link { color: #b45309 !important; }
a.tlink:hover, .auth-switch a:hover, .login_link:hover { color: #92400e !important; }
/* в тёмной полосе/подвале служебный текст остаётся светлым */
#footer .muted, #footer .text-muted, #footer .small, #footer small, #footer .description,
#footer .element-count2, .ge-topbar .muted, .ge-topbar small { color: #f4f1ea !important; }
/* ================= 32. WCAG AA: подсказки и служебные ссылки =================
Остались три места: подсказка .gma-hint (#888 → 3.54:1), служебная ссылка
«Войти по логину и паролю» (цвет темы #c0b283 → 2.11:1) и подпись соцблока
div.title (#999 → 2.85:1). Приводим к #63697a / accent-dark #b45309. */
.gma-hint, .soc-avt .title, .auth_page .title, .auth_page .gma-hint,
.auth_page .form-block-wr .title, .soc-avt__title, .bx-auth-serv-title,
.soc-avt .soc-avt__subtitle, .auth_page .muted, .auth_page .small {
color: #63697a !important;
}
/* служебные ссылки в блоке авторизации и кабинете (цвет темы был khaki #c0b283).
ВАЖНО: без широкого селектора по .auth_page — он перекрашивал пункты меню в шапке. */
.gma-links a, .grape-max-auth a:not(.btn), .form_body a:not(.btn),
.soc-avt a:not(.vk-id-btn), .lk-page a:not(.btn),
.personal_wrapper a:not(.btn):not(.dark_link),
.sale-personal-section-index-block a:not(.btn) {
color: #b45309 !important;
}
.gma-links a:hover, .grape-max-auth a:hover, .form_body a:hover,
.soc-avt a:not(.vk-id-btn):hover, .lk-page a:hover,
.personal_wrapper a:not(.btn):hover { color: #92400e !important; }
/* Только ВЕРХНИЙ уровень пунктов меню — белые (выпадашки и мобильное меню
остаются с цветом темы: их панели светлые, белый текст там был бы невидим). */
.menu-row .mega-menu td > .wrap > a,
.menu-row .mega-menu td > .wrap > a .link-title,
.menu-row .mega-menu td > a,
.ge-header-bar__cabinet .personal-link,
.ge-header-bar__cabinet .personal-link .name {
color: #ffffff !important;
}
/* ================= 33. СТРАНИЦА ВХОДА: убираем декоративную линию =================
Линию в блоке соцвхода рисует псевдоэлемент шаблона Аспро:
.soc-avt::after { content:""; width:560px; height:1px; background:#ececec; position:absolute }
Прячем только её — подпись «Быстрый вход через соцсети» и кнопка VK остаются. */
.soc-avt::after, .soc-avt::before,
.soc-avt .title::after, .soc-avt .title::before,
.reg-new.social_block::after, .reg-new.social_block::before {
display: none !important; content: none !important; background: none !important; border: 0 !important;
}
/* ================= 34. СОЦВХОД: единый стиль кнопок =================
Было: VK ID — оранжевая кнопка, Яндекс — маленький жёлтый квадратик.
Теперь оба входа — одинаковые кнопки в стиле сайта (акцент #b45309,
белый текст, иконка 15px слева, высота 40px, радиус 4px). Иконки официальные,
но приведены к одному размеру и монохрому (как у VK), чтобы не спорить с фоном.
Порядок: VK ID, затем Яндекс — оба выводятся в .soc-avt. */
.soc-avt .row, .soc-avt .soc-serv-main, .soc-avt .social_block { display: block !important; }
.soc-avt .vk-id-btn,
.soc-avt .ge-soc-btn {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 9px !important; box-sizing: border-box !important;
min-width: 230px !important; height: 40px !important; padding: 0 18px !important;
margin: 0 10px 12px 0 !important; border: 1px solid #b45309 !important; border-radius: 4px !important;
background-color: #b45309 !important; color: #fff !important;
font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important;
text-transform: uppercase !important; letter-spacing: .02em !important; text-decoration: none !important;
vertical-align: top !important; transition: background-color .2s ease, border-color .2s ease;
}
.soc-avt .vk-id-btn:hover, .soc-avt .ge-soc-btn:hover,
.soc-avt .vk-id-btn:focus, .soc-avt .ge-soc-btn:focus {
background-color: #92400e !important; border-color: #92400e !important; color: #fff !important;
}
.soc-avt .ge-soc-btn .soc-icon,
.soc-avt .ge-soc-btn i.soc-icon {
display: inline-block !important; flex: 0 0 auto !important;
width: 16px !important; height: 16px !important; margin: 0 !important;
background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
filter: brightness(0) invert(1) !important; /* официальная форма, единый белый цвет как у VK */
}
.soc-avt .ge-soc-btn__text { display: inline-block !important; white-space: nowrap !important; }
@media (max-width: 560px) {
.soc-avt .vk-id-btn, .soc-avt .ge-soc-btn { width: 100% !important; min-width: 0 !important; margin-right: 0 !important; }
}
/* ================= 35. СОЦВХОД: кнопки сервисов (Яндекс и др.) ================
Сервисы (Яндекс) рисуются компонентом bitrix:socserv.auth.form как
/ — приводим их
к геометрии кнопки VK ID, чтобы блок читался единообразно. */
.soc-avt .button.icon,
.soc-avt .auth .button,
.soc-avt .auth input[type="submit"].button,
.soc-avt .auth a.button,
.soc-avt span.auth > a,
.soc-avt span.auth > input[type="submit"] {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 9px !important; box-sizing: border-box !important; width: auto !important;
min-width: 230px !important; height: 40px !important; padding: 0 18px !important;
margin: 0 10px 12px 0 !important; border: 1px solid #b45309 !important; border-radius: 4px !important;
background: #b45309 !important; background-image: none !important; color: #fff !important;
font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; text-indent: 0 !important;
text-transform: uppercase !important; letter-spacing: .02em !important; text-decoration: none !important;
vertical-align: top !important; overflow: visible !important;
}
.soc-avt .button.icon:hover, .soc-avt .auth .button:hover, .soc-avt span.auth > a:hover { background: #92400e !important; border-color: #92400e !important; color: #fff !important; }
.soc-avt .button.icon .soc-icon, .soc-avt .auth .soc-icon {
display: inline-block !important; flex: 0 0 auto !important; width: 16px !important; height: 16px !important;
margin: 0 !important; background-size: contain !important; background-repeat: no-repeat !important;
background-position: center !important; filter: brightness(0) invert(1) !important;
}
.soc-avt .ge-soc-btn__text, .soc-avt .button.icon span, .soc-avt .auth .button span,
.soc-avt span.auth > a span, .soc-avt span.auth > input[type="submit"] + span {
display: inline-block !important; color: #fff !important; text-transform: uppercase !important;
font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important;
}
@media (max-width: 560px) {
.soc-avt .button.icon, .soc-avt .auth .button, .soc-avt span.auth > a, .soc-avt span.auth > input[type="submit"] {
width: 100% !important; min-width: 0 !important; margin-right: 0 !important;
}
}
/* ================= 36. СОЦВХОД: одна строка, Яндекс слева, VK справа =================
Подпись «Быстрый вход через соцсети» убрана из шаблона, на её месте — кнопка Яндекс.
.row внутри socserv делаем display:contents, чтобы кнопка Яндекса стала прямым
элементом flex-строки, и порядок задаём через order: Яндекс (1), VK ID (2).
На узких экранах кнопки на всю ширину и встают в столбец. */
.soc-avt { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; }
.soc-avt .row, .soc-avt .row.clearfix, .soc-avt .social_block { display: contents !important; }
.soc-avt .row > div[style*="clear"], .soc-avt .row > div[style*="clear:both"] { display: none !important; }
.soc-avt .ge-soc-btn, .soc-avt .button.icon, .soc-avt .auth .button,
.soc-avt span.auth > a, .soc-avt span.auth > input[type="submit"],
.soc-avt span.auth, .soc-avt .bx-ss-button { order: 1 !important; }
.soc-avt .vk-id-btn { order: 2 !important; }
.soc-avt .vk-id-btn, .soc-avt .ge-soc-btn, .soc-avt .button.icon, .soc-avt span.auth > a { margin: 0 !important; }
@media (max-width: 560px) {
.soc-avt { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.soc-avt .vk-id-btn, .soc-avt .ge-soc-btn, .soc-avt .button.icon, .soc-avt span.auth > a, .soc-avt span.auth { width: 100% !important; min-width: 0 !important; }
}
/* ================= 37. ШАПКА: временная текстовая надпись «GRAPE ОПТ» =================
Вместо картинки-знака (исходный SVG полупрозрачный, на оранжевой полосе бледный)
выводим белую надпись тем же шрифтом, что пункты меню: без плашки и подложки.
Заменить на знак дизайнера — в разметке шапки (header_1.php / header_mobile_1.php),
там помечено комментарием GRAPE expo. */
.ge-header-bar__logo .ge-logo {
background: transparent !important; background-color: transparent !important; background-image: none !important;
padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.ge-header-bar__logo .ge-logo img { display: none !important; }
.ge-header-bar__logo .ge-logo .ge-logo-text {
display: inline-block !important; color: #ffffff !important; background: none !important;
font-family: Montserrat, Arial, sans-serif !important; font-size: 22px !important; font-weight: 700 !important;
line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important;
white-space: nowrap !important; text-decoration: none !important;
}
@media (max-width: 1400px) { .ge-header-bar__logo .ge-logo .ge-logo-text { font-size: 20px !important; } }
@media (max-width: 991px) {
#mobileheader .logo, #mobileheader .logo > a, #mobileheader .logo a, #mobileheader .ge-mobile-logo-link, #mobileheader .logo-block {
background: transparent !important; background-color: transparent !important; background-image: none !important;
padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important;
}
#mobileheader .ge-mobile-logo, #mobileheader .logo img { display: none !important; }
#mobileheader .ge-logo-text, #mobileheader .ge-mobile-logo-link .ge-logo-text {
display: inline-block !important; color: #ffffff !important; background: none !important;
font-family: Montserrat, Arial, sans-serif !important; font-size: 17px !important; font-weight: 700 !important;
line-height: 1 !important; letter-spacing: .06em !important; text-transform: uppercase !important; white-space: nowrap !important;
}
}
/* ================= 38. ЛОГОТИП ЗАКАЗЧИКА (Винно-Водочный склад) =================
Шапка: знак (треугольник, кроп из logo-vvs-*) + HTML-название — полный вертикальный
знак в полосе 53px нечитаем. Подвал: полный знак. Файлы: images/logo/logo-vvs-*.webp
Исходники дизайнера — в /root/grape-backup/logo-src/. */
.ge-header-bar__logo .ge-logo { display: inline-flex !important; align-items: center !important; gap: 9px !important; background: none !important; padding: 0 !important; border: 0 !important; }
.ge-header-bar__logo .ge-logo-text { display: none !important; }
.ge-header-bar__logo .ge-logo-img { display: block !important; height: 38px !important; width: auto !important; }
.ge-header-bar__logo .ge-logo-name { display: block !important; color: #fff !important; font: 600 11px/1.15 Montserrat, Arial, sans-serif !important; text-transform: uppercase !important; letter-spacing: .03em !important; white-space: nowrap !important; }
.ge-footer-logo { text-align: center !important; padding: 26px 0 10px !important; }
.ge-footer-logo img { display: inline-block !important; height: 132px !important; width: auto !important; }
@media (max-width: 991px) {
#mobileheader .ge-logo-name, #mobileheader .ge-logo-text { display: none !important; }
#mobileheader .ge-logo-img { display: block !important; height: 32px !important; width: auto !important; }
}
@media (max-width: 600px) { .ge-footer-logo img { height: 96px !important; } }
/* ================= 39. ЛОГОТИП ЗАКАЗЧИКА: приоритетные правила =================
Перебиваем прежние правила, скрывавшие картинку логотипа (display:none из разделов 27/37) */
.ge-header-bar__logo .ge-logo img.ge-logo-img, .ge-header-bar__logo a.ge-logo img { display: block !important; height: 38px !important; width: auto !important; max-width: none !important; opacity: 1 !important; visibility: visible !important; }
#mobileheader .logo img.ge-logo-img, #mobileheader .ge-mobile-logo-link img.ge-logo-img { display: block !important; height: 32px !important; width: auto !important; max-width: none !important; opacity: 1 !important; visibility: visible !important; }
#mobileheader .logo, #mobileheader .logo a, #mobileheader .ge-mobile-logo-link { width: auto !important; height: auto !important; background-image: none !important; }
.ge-footer-logo img { display: inline-block !important; height: 132px !important; width: auto !important; opacity: 1 !important; visibility: visible !important; }
/* ================= 40. ТЁМНАЯ ПОЛОСА МЕНЮ (как верхняя полоса и подвал) =================
Полоса меню — тёмно-синяя #2a2e3f (тот же цвет, что у верхней полосы с контактами и подвала),
пункты/кабинет/иконки/бургер — белые, ховер и активный пункт — оранжевый акцент.
Кнопки сайта остаются оранжевыми (акцент не меняем). */
.ge-header-bar, .ge-header-bar__menu, .ge-header-bar .menu-row.middle-block,
.ge-header-bar .menu-row.middle-block.bgcolored, #mobileheader, #mobileheader .mobileheader-v1,
#mobileheader .visible-xs.visible-sm {
background: #2a2e3f !important; background-color: #2a2e3f !important; background-image: none !important;
}
.menu-row .mega-menu td > .wrap > a, .menu-row .mega-menu td > .wrap > a .link-title,
.menu-row .mega-menu td > a, .ge-header-bar__cabinet .personal-link,
.ge-header-bar__cabinet .personal-link .name, .ge-header-bar__cabinet .personal-link svg,
.ge-header-bar__cabinet .personal-link svg path, #mobileheader .burger,
#mobileheader .burger span, #mobileheader .right-icons a, #mobileheader .right-icons .svg,
#mobileheader .right-icons svg, #mobileheader .right-icons svg path { color: #fff !important; }
.ge-header-bar__cabinet .personal-link svg path, #mobileheader .right-icons svg path,
#mobileheader .burger span { fill: #fff !important; background-color: #fff !important; }
.menu-row .mega-menu td > .wrap > a { border-radius: 4px !important; }
.menu-row .mega-menu td > .wrap > a:hover, .menu-row .mega-menu td.active > .wrap > a,
.menu-row .mega-menu td.menu-item:hover > .wrap > a {
background: #d97706 !important; color: #fff !important;
}
.ge-header-bar__cabinet .personal-link:hover { background: #d97706 !important; color: #fff !important; border-radius: 4px !important; }
.menu-row .mega-menu .dropdown-menu, .menu-row .mega-menu .dropdown, .mega_fixed_menu, .mobilemenu-v1, #mobilemenu {
background-color: #fff !important;
}
.menu-row .mega-menu .dropdown-menu a, .menu-row .mega-menu .dropdown a, .mobilemenu-v1 a, #mobilemenu a { color: #333 !important; }
.menu-row .mega-menu .dropdown-menu a:hover, .mobilemenu-v1 a:hover { color: #b45309 !important; }
/* мобильная шапка: логотип/иконки на тёмном, ничего не «проваливается» */
#mobileheader a[href^="tel:"], #mobileheader a[href^="tel:"] .svg, #mobileheader a[href^="tel:"] svg path, #mobileheader a[href^="tel:"] svg use { color: #fff !important; fill: #fff !important; }
/* ================= 41. ТЁМНАЯ ПОЛОСА: убираем оранжевые остатки =================
По краям полосы оставались оранжевые ячейки/псевдоэлементы от прежнего оформления.
Гасим их в тёмный, оранжевым остаётся только ховер/активный пункт. */
.menu-row.middle-block, .menu-row.middle-block.bgcolored, .ge-header-bar, .ge-header-bar__menu, .menu-only, .menu-only .menu-row {
background-color: #2a2e3f !important;
}
.menu-row.middle-block::before, .menu-row.middle-block::after,
.menu-row.middle-block .maxwidth-theme::before, .menu-row.middle-block .maxwidth-theme::after,
.ge-header-bar::before, .ge-header-bar::after, .ge-header-bar__menu::before, .ge-header-bar__menu::after,
.menu-row .menu-only::before, .menu-row .menu-only::after, .menu-row .colored, .menu-row .colored_bg,
.menu-row .maxwidth-theme > .colored, .menu-row .wrapper_inner, .menu-row .wrapper_inner::before, .menu-row .wrapper_inner::after {
background: #2a2e3f !important; background-color: #2a2e3f !important; background-image: none !important;
}
.menu-row .mega-menu td .wrap > a:hover, .menu-row .mega-menu td.active > .wrap > a,
.ge-header-bar__cabinet .personal-link:hover { background-color: #d97706 !important; }
/* ================= 42. ТЁМНАЯ ПОЛОСА: обёртки (header-wrapper) =================
Внешняя обёртка шапки оставалась оранжевой и «просвечивала» узкими полосами
по краям тёмной полосы. Гасим её и внутренние обёртки. */
.header-wrapper, .header-wrapper .menu-row, .header-wrapper .menu-row.middle-block,
.menu-row.middle-block.bgcolored.ge-header-single, .header-wrapper .header-inner,
.header-wrapper .wrapper_inner, .header-wrapper > .maxwidth-theme,
.header-wrapper::before, .header-wrapper::after,
.menu-row.middle-block.bgcolored.ge-header-single::before, .menu-row.middle-block.bgcolored.ge-header-single::after {
background: #2a2e3f !important; background-color: #2a2e3f !important; background-image: none !important;
}
/* ================= 43. ЗАКРЕПЛЁННАЯ (ПРИЛИПАЮЩАЯ) ШАПКА — как основная =================
Была светлая полоса со старым логотипом на тёмной плашке и оранжевым блоком «Корзина».
Приводим к виду основной шапки: фон #2a2e3f, белые пункты/кабинет/иконки,
наш оранжевый знак (logo-vvs-mark-orange.webp), «Корзина» — обычный пункт меню. */
#headerfixed, #headerfixed .header_inner, #headerfixed .maxwidth-theme, #headerfixed .wrapper_inner,
#headerfixed .logo-row, #headerfixed .logo-row.v2, #headerfixed .menu-row, #headerfixed .menu-row.middle-block,
#headerfixed .menu-row.middle-block.bgcolored, #headerfixed .header-wrapper, .headerfixed, .fixed_header {
background: #2a2e3f !important; background-color: #2a2e3f !important; background-image: none !important;
box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
#headerfixed *, #headerfixed .menu-row.middle-block * { background-color: transparent !important; }
#headerfixed .menu-row.middle-block, #headerfixed .menu-row.middle-block.bgcolored { background-color: #2a2e3f !important; }
#headerfixed a, #headerfixed .menu-row .mega-menu td > .wrap > a, #headerfixed .menu-row .mega-menu td > .wrap > a .link-title,
#headerfixed .personal-link, #headerfixed .personal-link .name, #headerfixed .right-icons a, #headerfixed .burger,
#headerfixed .wrap_icon, #headerfixed .svg, #headerfixed .svg use, #headerfixed .basket-link, #headerfixed .basket-link .count {
color: #fff !important;
}
#headerfixed .svg path, #headerfixed .svg use, #headerfixed .burger span { fill: #fff !important; background-color: #fff !important; }
#headerfixed .menu-row .mega-menu td > .wrap > a:hover, #headerfixed .menu-row .mega-menu td.active > .wrap > a,
#headerfixed .personal-link:hover { background-color: #d97706 !important; color: #fff !important; border-radius: 4px !important; }
/* старый логотип/плашка не должны показываться */
#headerfixed .logo, #headerfixed .logo a, #headerfixed .logo-block { background: transparent !important; background-image: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
#headerfixed .logo img:not(.ge-logo-img), #headerfixed .logo svg, #headerfixed .logo a svg { display: none !important; }
#headerfixed .ge-logo-img { display: block !important; height: 34px !important; width: auto !important; }
#headerfixed .ge-logo-name { display: none !important; }
/* «Корзина» — обычный пункт, без отдельного оранжевого прямоугольника */
#headerfixed .basket-link, #headerfixed .basket-link.big, #headerfixed .wrap_icon.wrap_basket,
#headerfixed .basket-link .svg, #headerfixed .basket-link i { background: transparent !important; background-color: transparent !important; color: #fff !important; }
#headerfixed .basket-link .count { background-color: #d97706 !important; color: #fff !important; }
/* ================= 44. МОБИЛЬНАЯ ШАПКА: на всю ширину =================
Полоса была «плавающим» прямоугольником: тёмный фон лежал на внутреннем блоке,
а внешние обёртки давали светлые «ушки» по краям. Растягиваем на всю ширину. */
@media (max-width: 991px) {
#mobileheader, #mobileheader .mobileheader-v1, #mobileheader .visible-xs.visible-sm,
html body #mobileheader, html body .wrapper1 #mobileheader {
width: 100% !important; max-width: 100% !important; min-width: 100% !important;
margin: 0 !important; padding: 0 !important; left: 0 !important; right: 0 !important;
border-radius: 0 !important; box-sizing: border-box !important;
background: #2a2e3f !important; background-color: #2a2e3f !important; background-image: none !important;
}
#mobileheader .maxwidth-theme, #mobileheader .wrapper_inner, #mobileheader .container,
#mobileheader .mobileheader-v1 .maxwidth-theme {
width: 100% !important; max-width: none !important; margin: 0 !important;
padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important;
background: transparent !important; background-color: transparent !important;
}
#mobileheader .logo-block, #mobileheader .burger, #mobileheader .right-icons, #mobileheader .wrap_icon { margin-top: 0 !important; margin-bottom: 0 !important; }
body > .wrapper1, body .wrapper1, body .wraps, .wrapper1 .wraps { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
}
/* ================= 45. МОБИЛЬНЫЙ ЛОГОТИП: тот же знак, что на десктопе =================
Требование заказчика: один и тот же файл (logo-vvs-mark-orange.webp/@2x), прозрачный,
без плашки/подложки; отличается только размер. Гасим все фоны/рамки у контейнеров
логотипа, которые оставались от прежних правок. */
@media (max-width: 991px) {
#mobileheader .logo, #mobileheader .logo a, #mobileheader .logo > a,
#mobileheader .ge-mobile-logo-link, #mobileheader .logo-block, #mobileheader .inner-table-block {
background: none !important; background-color: transparent !important; background-image: none !important;
border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin-left: 0 !important;
width: auto !important; height: auto !important;
}
#mobileheader .logo img:not(.ge-logo-img), #mobileheader .logo svg, #mobileheader .logo a svg, #mobileheader .ge-mobile-logo { display: none !important; }
#mobileheader .ge-logo-img, #mobileheader .logo a img.ge-logo-img {
display: block !important; height: 32px !important; width: auto !important; max-width: none !important;
background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
opacity: 1 !important; visibility: visible !important;
}
#mobileheader .ge-logo-name { display: none !important; }
}
/* ================= 46. ЗАКРЕПЛЁННАЯ ШАПКА: наш знак =================
В header_fixed_*.php логотип выводится inline-SVG темы (не ![]()
), поэтому меняем его
на нашу картинку средствами CSS: сам SVG прячем, вместо него — ::before с нашим знаком. */
#headerfixed .logo, #headerfixed .logo a, #headerfixed .logo-block { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
#headerfixed .logo svg, #headerfixed .logo img:not(.ge-logo-img), #headerfixed .logo a svg { display: none !important; }
#headerfixed .logo a::before, #headerfixed .logo > a::before {
content: "" !important; display: block !important; width: 42px !important; height: 34px !important;
background: url("/local/templates/grapeexpo/images/logo/logo-vvs-mark-orange.webp") no-repeat center center !important;
background-size: contain !important;
}
@media (max-width: 991px) {
#headerfixed .logo a::before, #headerfixed .logo > a::before { width: 38px !important; height: 31px !important; }
}
/* ================= 47. ПАНЕЛЬ КАБИНЕТА (выпадашка при наведении) =================
Была «микро»-панель только с именем, прижатая к правому краю и обрезанная.
Делаем нормальную белую панель с тёмным текстом, отступами, по содержимому,
выровненную по правому краю пункта и не выходящую за экран; пункты — видимые. */
.ge-header-bar__cabinet { position: relative !important; }
.ge-header-bar__cabinet .personal-link { position: relative !important; z-index: 20 !important; }
.ge-header-bar__cabinet .personal-link:hover { background-color: #d97706 !important; border-radius: 4px !important; }
/* мостик, чтобы курсор не «терял» панель */
.ge-header-bar__cabinet .personal-link::after {
content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important;
top: 100% !important; height: 14px !important; background: transparent !important;
}
.ge-header-bar__cabinet .dropdown-menu, .ge-header-bar__cabinet .personal_menu,
.ge-header-bar__cabinet .personal-link > .dropdown, .ge-header-bar__cabinet .wrap_icon + .dropdown-menu {
display: none; position: absolute !important; right: 0 !important; left: auto !important; top: 100% !important;
width: auto !important; min-width: 230px !important; max-width: calc(100vw - 24px) !important;
margin: 8px 0 0 !important; padding: 14px 18px !important; box-sizing: border-box !important;
background: #fff !important; background-color: #fff !important; border: 0 !important; border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; z-index: 3000 !important; text-align: left !important;
white-space: normal !important; overflow: visible !important;
}
.ge-header-bar__cabinet:hover .dropdown-menu, .ge-header-bar__cabinet .personal-link:hover + .dropdown-menu,
.ge-header-bar__cabinet:hover .personal_menu { display: block !important; visibility: visible !important; opacity: 1 !important; }
.ge-header-bar__cabinet .dropdown-menu a, .ge-header-bar__cabinet .personal_menu a {
display: block !important; visibility: visible !important; opacity: 1 !important;
padding: 7px 0 !important; color: #2a2e3f !important; font-size: 13px !important; line-height: 1.25 !important;
white-space: nowrap !important; text-decoration: none !important; background: transparent !important;
}
.ge-header-bar__cabinet .dropdown-menu a:hover, .ge-header-bar__cabinet .personal_menu a:hover { color: #b45309 !important; }
.ge-header-bar__cabinet .dropdown-menu .name, .ge-header-bar__cabinet .personal_menu .name,
.ge-header-bar__cabinet .dropdown-menu span, .ge-header-bar__cabinet .personal_menu span { color: #2a2e3f !important; }
.ge-header-bar__cabinet .dropdown-menu .personal-name, .ge-header-bar__cabinet .personal_menu .personal-name {
padding-bottom: 8px !important; margin-bottom: 8px !important; border-bottom: 1px solid #ececec !important;
font-weight: 600 !important; color: #2a2e3f !important; white-space: nowrap !important;
}
@media (max-width: 991px) {
.ge-header-bar__cabinet .dropdown-menu, .ge-header-bar__cabinet .personal_menu { min-width: 200px !important; padding: 12px 14px !important; }
}
/* ================= 48. СВОЯ ПАНЕЛЬ КАБИНЕТА =================
Тема свою панель строит JS-ом и она то есть, то нет — поэтому панель у нас своя
(.ge-cab-panel), а темину подавляем, чтобы не было двух. */
.ge-cab-wrap { position: relative !important; display: inline-block !important; }
.ge-cab-wrap .ge-cab-link { position: relative !important; z-index: 20 !important; display: inline-flex !important; align-items: center !important; gap: 9px !important; height: 100% !important; padding: 0 10px !important; color: #fff !important; }
.ge-cab-wrap .ge-cab-link .name { color: #fff !important; }
.ge-cab-wrap:hover .ge-cab-link, .ge-cab-wrap.open .ge-cab-link { background-color: #d97706 !important; border-radius: 4px !important; }
.ge-cab-wrap .ge-cab-link::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; height: 16px !important; background: transparent !important; }
.ge-cab-panel {
display: none; position: absolute !important; right: 0 !important; left: auto !important; top: 100% !important;
min-width: 230px !important; max-width: calc(100vw - 24px) !important; margin: 8px 0 0 !important; padding: 14px 18px !important;
box-sizing: border-box !important; background: #fff !important; border-radius: 6px !important;
box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; z-index: 3000 !important; text-align: left !important;
}
.ge-cab-wrap:hover .ge-cab-panel, .ge-cab-wrap.open .ge-cab-panel { display: block !important; }
.ge-cab-panel__name { padding-bottom: 9px !important; margin-bottom: 9px !important; border-bottom: 1px solid #ececec !important; color: #2a2e3f !important; font-weight: 600 !important; white-space: nowrap !important; }
.ge-cab-panel a { display: block !important; padding: 7px 0 !important; color: #2a2e3f !important; font-size: 13px !important; line-height: 1.25 !important; white-space: nowrap !important; text-decoration: none !important; background: transparent !important; }
.ge-cab-panel a:hover { color: #b45309 !important; }
.ge-cab-panel__logout { margin-top: 6px !important; padding-top: 9px !important; border-top: 1px solid #ececec !important; }
/* подавляем панель темы внутри нашего блока кабинета */
.ge-header-bar__cabinet .dropdown-menu, .ge-header-bar__cabinet .personal_menu, .ge-header-bar__cabinet .personal-link + .dropdown,
#headerfixed .ge-header-bar__cabinet .dropdown-menu, #headerfixed .ge-header-bar__cabinet .personal_menu { display: none !important; }
/* ================= 49. МОБИЛЬНЫЕ ИКОНКИ: корзина и кабинет — оранжевые в покое =================
Заказчик: значки корзины и кабинета терялись на тёмной полосе (были видны только в нажатом
состоянии). Делаем их постоянно оранжевыми (#d97706), активное — темнее (#b45309).
Телефон и бургер остаются белыми (как просил заказчик). */
@media (max-width: 991px) {
#mobileheader .basket-link, #mobileheader .basket-link .svg, #mobileheader .basket-link svg,
#mobileheader .basket-link svg use, #mobileheader .basket-link svg path, #mobileheader .svg-inline-basket,
#mobileheader .wrap_icon.wrap_cabinet, #mobileheader .wrap_icon.wrap_cabinet .svg, #mobileheader .wrap_icon.wrap_cabinet svg use,
#mobileheader .wrap_icon.wrap_cabinet svg path, #mobileheader .personal-link, #mobileheader .personal-link .svg,
#mobileheader .personal-link svg use, #mobileheader .personal-link svg path, #mobileheader .svg-inline-cabinet {
color: #d97706 !important; fill: #d97706 !important;
}
#mobileheader .basket-link svg path, #mobileheader .basket-link svg use,
#mobileheader .personal-link svg path, #mobileheader .personal-link svg use { fill: #d97706 !important; }
/* активное/нажатое — темнее */
#mobileheader .basket-link:active, #mobileheader .basket-link:active svg path, #mobileheader .basket-link:active svg use,
#mobileheader .personal-link:active, #mobileheader .personal-link:active svg path, #mobileheader .personal-link:active svg use,
#mobileheader .basket-link.active svg path, #mobileheader .personal-link.active svg path {
color: #b45309 !important; fill: #b45309 !important;
}
/* счётчик корзины: убираем хаки темы (#c0b283) — белый кружок с оранжевой цифрой */
html body #mobileheader .basket-link .count, html body #mobileheader .basket-link .count *,
#mobileheader .basket-link .count, #mobileheader .basket-link .count *,
#mobileheader .basket-link .count.count--empty, #mobileheader .basket-link .count.empty {
background: #fff !important; background-color: #fff !important; background-image: none !important;
color: #b45309 !important; font-weight: 700 !important; text-shadow: none !important;
}
html body #mobileheader .basket-link .count, #mobileheader .basket-link .count {
border: 1px solid #b45309 !important; box-sizing: border-box !important; box-shadow: none !important;
}
/* телефон и бургер — белые, как было */
#mobileheader a[href^="tel:"], #mobileheader a[href^="tel:"] .svg, #mobileheader a[href^="tel:"] svg use,
#mobileheader a[href^="tel:"] svg path, #mobileheader .burger, #mobileheader .burger span { color: #fff !important; fill: #fff !important; }
}
/* ================= 50. МОБИЛЬНЫЕ ИКОНКИ: бургер и телефон — тоже оранжевые =================
Финальное решение заказчика: весь набор иконок в мобильной шапке в одном фирменном
цвете #d97706 (бургер, корзина, кабинет/вход, телефон), активное — темнее #b45309.
Счётчик корзины не меняем (белый кружок, оранжевая цифра и рамка). */
@media (max-width: 991px) {
#mobileheader .burger, #mobileheader .burger i, #mobileheader .burger svg, #mobileheader .burger svg path,
#mobileheader .burger svg use, #mobileheader .svg-inline-burger, #mobileheader .svg-inline-burger path,
#mobileheader a[href^="tel:"], #mobileheader a[href^="tel:"] i, #mobileheader a[href^="tel:"] svg,
#mobileheader a[href^="tel:"] svg path, #mobileheader a[href^="tel:"] svg use, #mobileheader .svg-inline-phone,
#mobileheader .svg-inline-phone path { color: #d97706 !important; fill: #d97706 !important; }
#mobileheader .burger span { background-color: #d97706 !important; border-color: #d97706 !important; }
#mobileheader .burger:active, #mobileheader .burger:active svg path, #mobileheader .burger:active svg use,
#mobileheader a[href^="tel:"]:active, #mobileheader a[href^="tel:"]:active svg path, #mobileheader a[href^="tel:"]:active svg use,
#mobileheader .burger.active svg path, #mobileheader .burger.active span {
color: #b45309 !important; fill: #b45309 !important; background-color: #b45309 !important;
}
/* счётчик остаётся белым с оранжевой цифрой — только подтверждаем приоритет */
html body #mobileheader .basket-link .count, html body #mobileheader .basket-link .count * {
background: #fff !important; background-color: #fff !important; color: #b45309 !important;
}
}
/* ================= 51. МОБИЛЬНАЯ ШАПКА: все иконки оранжевые =================
Финальное решение: бургер, корзина, кабинет/вход и телефон — один фирменный #d97706,
активное — #b45309. Логотип (картинка) не затрагивается, счётчик остаётся белым
с оранжевой цифрой. Правило широкое намеренно: у темы разные хуки у иконок. */
@media (max-width: 991px) {
html body #mobileheader svg, html body #mobileheader svg use, html body #mobileheader svg path,
html body #mobileheader .svg, html body #mobileheader .svg use, html body #mobileheader .svg path,
html body #mobileheader .burger, html body #mobileheader .burger i, html body #mobileheader .burger span,
html body #mobileheader .right-icons a, html body #mobileheader .right-icons i, html body #mobileheader .right-icons .svg,
html body #mobileheader .wrap_icon, html body #mobileheader .wrap_icon .svg, html body #mobileheader .basket-link,
html body #mobileheader .personal-link, html body #mobileheader a[href^="tel:"], html body #mobileheader a[href^="tel:"] .svg {
color: #d97706 !important; fill: #d97706 !important; stroke: #d97706 !important;
}
html body #mobileheader .burger span { background-color: #d97706 !important; border-color: #d97706 !important; }
html body #mobileheader a:active svg, html body #mobileheader a:active svg use, html body #mobileheader a:active svg path,
html body #mobileheader .burger:active, html body #mobileheader .burger:active span, html body #mobileheader a:active .svg {
color: #b45309 !important; fill: #b45309 !important; stroke: #b45309 !important; background-color: transparent !important;
}
html body #mobileheader .burger:active span { background-color: #b45309 !important; }
/* счётчик корзины — без изменений: белый кружок, оранжевая цифра */
html body #mobileheader .basket-link .count, html body #mobileheader .basket-link .count * {
background: #fff !important; background-color: #fff !important; color: #b45309 !important; fill: #b45309 !important; stroke: none !important;
}
html body #mobileheader .ge-logo-img { fill: none !important; color: inherit !important; }
}
/* ================= 52. ИНЛАЙН-ТЕЛЕФОН в мобильной шапке =================
Спрайтовый символ имел зашитый белый fill и не перекрашивался — заменили на инлайн-SVG
с fill="currentColor", цвет берётся отсюда. */
@media (max-width: 991px) {
html body #mobileheader .ge-phone-inline, html body #mobileheader a[href^="tel:"] .ge-phone-inline,
html body #mobileheader .ge-phone-inline * { color: #d97706 !important; fill: #d97706 !important; }
html body #mobileheader a[href^="tel:"]:active .ge-phone-inline, html body #mobileheader a[href^="tel:"]:active .ge-phone-inline * {
color: #b45309 !important; fill: #b45309 !important;
}
}
/* ================= 53. ТЕЛЕФОН ИНЛАЙН в мобильной шапке =================
Иконка выводилась внешним