/* ============================================================ п.13 ЦВЕТА И ЧИТАЕМОСТЬ Подключается ПОСЛЕДНИМ среди стилей шапки, поэтому перебивает style.css / header.css / mobile.css без !important там, где исходное правило шло без него. Ни одного захардкоженного цвета: всё через токены, которые header.php считает из config_site_color и config_site_color_secondary библиотекой catalog/view/theme/coloring/v48_palette.php. --brand-yellow / --brand-teal сами фирменные цвета --brand-*-text >= 5.0:1 к белому (текст на белом) --brand-*-strong >= 7.0:1 к белому (АКТИВНЫЕ состояния) --brand-*-deep >= 4.8:1 к белому (поверхность под белый текст) --on-yellow / --on-teal текст ПОВЕРХ плашки фирменного цвета --brand-muted приглушённый текст на белом, >= 5.5:1 --on-dark-muted приглушённый текст на тёмных блоках, >= 4.5:1 ============================================================ */ /* ---------- 1. ПОДВАЛ: текст тонул в тёмном фоне #151F26 ---------- */ .footer__disclaimer, .footer__bottom-row, .footer__legal-info, .footer__pay-badge, .footer__phone-sub, .footer__desc, .footer__contact-row { color: var(--on-dark-muted); } /* ---------- 2. ПОДПИСКА: подпись и плейсхолдер ---------- */ .subscribe__note { color: var(--on-dark-muted); } .subscribe__input::placeholder { color: var(--on-dark-muted); opacity: 1; } .subscribe__input::-webkit-input-placeholder { color: var(--on-dark-muted); opacity: 1; } .subscribe__input::-moz-placeholder { color: var(--on-dark-muted); opacity: 1; } /* кнопка: жёлтая плашка + читаемый на ней текст */ .subscribe__btn { color: var(--on-yellow); } /* ---------- 3. ЦИФРЫ И АКЦЕНТНЫЙ ТЕКСТ НА БЕЛОМ ---------- Фирменный цвет как текст на белом даёт 1.3-2.3. Берём его же, затемнённый до нормы. */ .why-us__number, .counter__number { color: var(--brand-teal-text); } .why-us__desc { color: var(--brand-muted); } /* ---------- 4. SEO-ТЕКСТ на #f5f6f7 ---------- */ .seo-text p, .seo-text ul, .seo-text ol, .seo-text h2, .seo-text h3, .seo-text h4, .seo-text strong, .seo-text b { color: var(--brand-muted); } .seo-text li::marker { color: var(--brand-muted); } .seo-text a { color: var(--brand-teal-text); } .seo-text a:hover { color: var(--brand-teal-strong); } /* ---------- 5. FAQ: раскрытый вопрос и ссылки в ответах ---------- Подложка раскрытого пункта тонирована (--brand-teal-light), поэтому здесь нужен -strong, а не -text. */ .faq__question:hover { color: var(--brand-teal-text); } .faq__item.active .faq__question { color: var(--brand-teal-strong); } .faq__item.active .faq__toggle { color: var(--brand-teal-strong); } .faq__answer p { color: var(--brand-muted); } .faq__answer a { color: var(--brand-teal-strong); border-bottom-color: currentColor; } .faq__answer a:hover { border-bottom-color: currentColor; } /* ---------- 6. ЛЕНТА КАТЕГОРИЙ ---------- Была светлая бирюзовая полоса с белым текстом (2.20), а ВЫБРАННЫЙ пункт ещё бледнее (1.96) — выделение читалось как «отключено». Стало: полоса углублена до --brand-teal-deep (белый текст >= 4.8), активный пункт — плашка второго фирменного цвета с тёмным текстом (>= 5.5), то есть заметно КОНТРАСТНЕЕ соседей. */ .cat-nav { background: var(--brand-teal-deep); } html.vp-mobile .cat-nav { background: var(--brand-teal-deep) !important; } .cat-nav::after { background: linear-gradient(to left, var(--brand-teal-deep), rgba(0, 0, 0, 0)); } .cat-nav a { color: #fff; } .cat-nav a:hover { background: rgba(0, 0, 0, 0.18); } .cat-nav a.active, .cat-nav a.active:hover { background: var(--brand-yellow); color: var(--on-yellow); box-shadow: inset 0 -3px 0 var(--brand-yellow-deep); } .cat-nav a.cat-nav--highlight { background: rgba(0, 0, 0, 0.18); border-bottom-color: var(--brand-yellow); } .cat-nav a.cat-nav--highlight:hover { background: rgba(0, 0, 0, 0.26); } /* ---------- 7. КНОПКИ НА ФИРМЕННОЙ ПЛАШКЕ ---------- */ .compare__btn { background: var(--brand-teal-deep); color: #fff; } .compare__btn:hover { background: var(--brand-teal-strong); } .compare__card--featured .compare__btn { background: var(--brand-yellow); color: var(--on-yellow); } .compare__card--featured .compare__btn:hover { background: var(--brand-yellow); color: var(--on-yellow); } .scroll-top { background: var(--brand-teal-deep); } .scroll-top:hover { background: var(--brand-teal-strong); } /* ---------- 8. НАВИГАЦИЯ В ШАПКЕ И БУРГЕР ---------- Активный пункт был бледнее обычных (2.20 против почти чёрных). Даём -strong, жирность и подложку — выделение читается как выделение. */ .header__nav a.active { color: var(--brand-teal-strong); border-bottom-color: var(--brand-teal-strong); font-weight: 800; } .mobile-drawer__nav a.active { color: var(--brand-teal-strong); background: var(--brand-teal-light); box-shadow: inset 3px 0 0 var(--brand-teal-strong); font-weight: 800; } .mobile-drawer__nav a:active { color: var(--brand-teal-strong); } .mobile-drawer__section { color: var(--brand-teal-strong); border-bottom-color: var(--brand-teal-deep); } /* ---------- 9. ХЛЕБНЫЕ КРОШКИ: текущий раздел ---------- */ .breadcrumb .active { color: var(--brand-muted); } /* ---------- 10. СОРТИРОВКА В КАТЕГОРИЯХ ---------- style.css:93 красил выбранный пункт в фирменный жёлтый — 1.43 против 4.29 у невыбранных. Активный делаем самым тёмным и подчёркнутым. */ .container.category-page .sort-block a.active, .container.category-page .sort-block a.active:hover, .sort-block a.btn-link.active { color: var(--brand-teal-strong); font-weight: 700; border-bottom: 2px solid var(--brand-teal-strong); } .container.category-page .sort-block a, .container.category-page .sort-block label { color: var(--brand-muted); } .container.category-page .sort-block a:hover { color: var(--brand-teal-text); } .container.category-page .sort-block a:hover span { border-color: var(--brand-teal-text); } /* ---------- 11. ФИЛЬТРЫ: «Показать все» / «Скрыть» ---------- */ .showall a { color: var(--brand-yellow-text); } .showall a:hover { color: var(--brand-yellow-strong); } /* ---------- 12. ОТЗЫВЫ: «Читать полностью», «Ответить» ---------- */ .review-block .more-button, .review-answer .btn-link { color: var(--brand-yellow-text); } .last-review .more-button, .last-review .more-button:hover { color: var(--brand-teal-text); } .rating-text { color: var(--brand-muted); } /* ---------- 13. ПЛИТКА ТОВАРА ---------- */ /* «96 отзывов» был #ddd на белом (~1.3) */ .product-grid .caption .rating a { color: var(--brand-muted); } .product-grid .caption .rating i.rating-num { color: var(--brand-muted); } /* Уголки «ХИТ продаж» / «НОВИНКА»: заливка — фирменный цвет, надпись — рассчитанный под него --on-*, вместо белого (1.48 и 2.22). */ .product-layout.product-grid .bmarker .marker-fon.hit-fon { border-bottom-color: var(--brand-yellow); } .product-layout.product-grid .bmarker .marker-fon.new-fon { border-bottom-color: var(--brand-teal); } .product-layout.product-grid .bmarker .marker-text.hit-text { color: var(--on-yellow); } .product-layout.product-grid .bmarker .marker-text.new-text { color: var(--on-teal); } .product-layout.product-grid .amarker .amarker-text { background-color: var(--brand-yellow); color: var(--on-yellow); } .product-layout.product-grid .amarker-right { border-left-color: var(--brand-yellow); } /* ---------- 14. ОСТАЛЬНЫЕ МЕСТА С ТОЙ ЖЕ ПРИЧИНОЙ ---------- Тема красит мелкий текст и иконки чистым --brand-teal поверх белого и поверх --brand-teal-light — это те же 2.0-2.3. Токен тот же, просто в текстовой роли. */ .compare__header-badge, .faq__header-badge, .reviews__header-badge { color: var(--brand-teal-strong); } .product-card__reviews-link, .product-card__name a:hover, .review-card__product, .reviews__nav-btn, .reviews__all-link, .top-bar__phone a:hover, .header__nav a:hover, .mobile-drawer__close:active { color: var(--brand-teal-text); } .reviews__nav-btn:hover { background: var(--brand-teal-deep); color: #fff; } .footer__social a:hover { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); } .footer__tg-btn:hover { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); } /* Уголок «!» на плашке (белый значок на фирменной заливке). Родителя выбираем соседним комбинатором: .marker-fon в разметке идёт перед .marker-pic, так что :has() не нужен и правило работает везде. */ .product-layout.product-grid .bmarker .marker-fon.hit-fon ~ .marker-pic { color: var(--on-yellow); border-color: var(--on-yellow); } .product-layout.product-grid .bmarker .marker-fon.new-fon ~ .marker-pic { color: var(--on-teal); border-color: var(--on-teal); } /* ---------- 15. ЛЕВОЕ МЕНЮ КАТЕГОРИЙ: выбранный пункт ---------- */ .category .child > .child-item .list-group-item.active { color: var(--brand-teal-strong) !important; font-weight: 700; } #menu-list-top .menu-item a.active { color: var(--brand-teal-strong); } /* ---------- 8. БЕЙДЖИ «ОФИЦИАЛЬНЫЙ ДИЛЕР» (11.08.2026) ---------- Белый текст на фирменной бирюзе #82B4BD давал 2.28:1, а бирюзовый текст на её же 20-процентной заливке — 1.97:1. Обе величины ниже нормы 4.5. Берём затемнённые токены той же палитры (их считает v48_palette.php из цвета магазина), поэтому на других сайтах линии цвет по-прежнему свой. */ .official-badge { background: var(--brand-teal-deep); } /* белый на #457A84 → 4.81:1 */ /* Бейдж в hero лежит НА ФОТОГРАФИИ, а не на белом. Первая попытка считала контраст к фону страницы и сделала хуже: тёмно-бирюзовый текст на тёмном снимке дал 1.68:1 по замеру пикселей. На фото контраст гарантируется только непрозрачной подложкой — берём ту же, что у бейджа в шапке. */ .hero__badge { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); color: #fff; /* → 4.81:1 при любом снимке */ } /* ---------- 9. АКЦЕНТНОЕ СЛОВО В ЗАГОЛОВКЕ HERO (11.08.2026) ---------- Слово подсвечивается вторым цветом магазина, а он же красит хром. У сайта с тёмным хромом (графит) слово на тёмной фотографии сливалось с фоном. Берём фирменный цвет и осветляем — читается на тёмном и остаётся брендовым. Браузеры без color-mix наследуют белый заголовок, то есть тоже читаемо. */ .hero h1 span, .hero__title span { color: color-mix(in srgb, var(--brand-yellow) 55%, #ffffff) !important; } /* ---------- 10. ФОН HERO БЕЗ ФОТОГРАФИИ (11.08.2026) ---------- Когда у магазина не задана картинка hero, подложка вырождалась в серый градиент, уходящий вправо почти в белый: пусто и грязно, товар на нём теряется. Заменяем на тёмный градиент из токенов палитры — он считается из цвета магазина, поэтому на каждом сайте свой, и остаётся тёмным по всей ширине, так что белый текст и карточка товара читаются везде. ВАЖНО: только когда фотографии НЕТ. Правило стоит с !important (иначе его перебивал битый url() из hero.css), а !important в таблице сильнее inline-стиля, поэтому без оговорки заглушка закрывала бы и настоящую картинку из админки. Признак «фотография есть» ставит шаблон — класс hero__bg--photo. */ .hero__bg:not(.hero__bg--photo) { background-image: linear-gradient(135deg, var(--brand-teal-deep, #232A30) 0%, var(--brand-teal, #2F3A40) 58%, var(--brand-teal-strong, #3A464E) 100%) !important; opacity: 1 !important; } /* ---------- 11. ТЕКСТ НА АКЦЕНТНЫХ ПЛАШКАХ (11.08.2026) ---------- Токен --on-yellow считался под жёлтый акцент, поэтому давал тёмную надпись. На тёмно-синем акценте она читается плохо; белый даёт 4.9:1 — норма. */ :root { --on-yellow: #ffffff !important; } .hero__cta, .hero__cta:hover, .hero__cta:focus, .hero__product-badge, .hero__badge-hit, [class*="badge-hit"], [class*="hit"] { color: #ffffff !important; }