/* ========================================================================== БЕЛЫЙ ФОН ПО ВСЕМУ САЙТУ -------------------------------------------------------------------------- Заказчик: «По всему сайту обязательно белый фон! Корзина белый фон!». В кадре шапки из макета (узел 41:2005) фон тоже белый. Файл подключается в header.php ПОСЛЕ site.css / catalog.css / home.css / interactions.css и ДО мобильного слоя. Порядок выбран не случайно: почти все правила ниже перебиваются равной специфичностью, а не !important, — им достаточно стоять позже конкурента. Мобильные файлы идут после и фон страницы не задают, так что они ничего не ломают. Что НЕ трогаем и почему — см. комментарий в конце файла. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Холст страницы Конкуренты: site-hf.css:31 body{...background:var(--bg)} (--bg = #ffffff) site.css:63 body{...background:var(--bg)} (--bg = #ffffff) home.css:37 body{...background:var(--cream)} (--cream = #e9ede7) home.css:234 body{background:#fff} (перебивает 37) То есть база и так белая, но она держится на переменной --bg. Фиксируем цвет явно, чтобы случайная правка переменной не перекрасила весь сайт. Специфичность (0,0,1) — как у конкурентов, выигрываем порядком. -------------------------------------------------------------------------- */ html{background-color:#fff} body{background-color:#fff} /* Бутстрап красит body переменной --bs-body-bg (она приходит из темы assets/css/theme.min.css, править её нельзя). Задаём белый на :root: наш :root читается позже темы, специфичность одинаковая. */ :root{--bs-body-bg:#fff} /* -------------------------------------------------------------------------- 2. КОРЗИНА И ОФОРМЛЕНИЕ — то, на что заказчик указал отдельно Конкурент: site.css:2011 body:has(.sc-cart),body:has(.sc-checkout){background:#f6f6f3} Это и есть серый фон корзины: тогда страницу нарочно притемнили, «чтобы белые карточки читались». Теперь карточки читаются рамкой (1px var(--tile-line)) и тенью var(--tile-shadow) — они остаются. Специфичность у :has() считается по самому «тяжёлому» аргументу: body:has(.sc-cart) = (0,1,1). Повторяем ровно тот же селектор и выигрываем порядком подключения, без !important. -------------------------------------------------------------------------- */ body:has(.sc-cart), body:has(.sc-checkout), body:has(.sc-basket){background-color:#fff} /* -------------------------------------------------------------------------- 3. Оболочки страницы Красим только ПРЕДКОВ контента — main, контейнер темы и .sc2026-page. .mac сюда намеренно не попал: на главной внутри .quizsec фоновые орнаменты (.bg-orn) лежат СОСЕДЯМИ .mac и ниже по слою — непрозрачный .mac закрыл бы их. Предков красить безопасно: содержимое рисуется поверх. -------------------------------------------------------------------------- */ main.page-wrapper{background-color:#fff} main.page-wrapper > .container{background-color:#fff} .sc2026-page{background-color:#fff} /* -------------------------------------------------------------------------- 4. Служебные классы бутстрапа .bg-light и .bg-secondary в бутстрапе объявлены С !important (background-color:rgba(...,var(--bs-bg-opacity))!important), поэтому обычной специфичностью их не перебить — это единственное место в файле, где !important оправдан. Область сужена до main.page-wrapper, чтобы не задеть административную панель Битрикса. В нашей вёрстке .bg-secondary стоит на подложке миниатюры товара (sale.basket.basket.line/body.basket/ajax_template.php:29,33) — ей белый как раз и нужен. -------------------------------------------------------------------------- */ main.page-wrapper .bg-light, main.page-wrapper .bg-secondary{background-color:#fff !important} /* -------------------------------------------------------------------------- 5. Внутренности корзины Карточки .cart-box и .total уже белые (site.css:1899, 1946) — не трогаем. Серой оставалась подложка под фотографией позиции. Конкурент: site.css:1922 .sc-cart .ci .ph{background:var(--bg-soft)} (--bg-soft = #f4f6f3), специфичность (0,3,0) — повторяем её. У картинки внутри стоит mix-blend-mode:multiply; на белом умножение ничего не меняет, снимок остаётся таким же, как был. -------------------------------------------------------------------------- */ .sc-cart .ci .ph{background-color:#fff} /* Старый шаблон корзины (sale.basket.basket/.default, класс .sc-basket). В текущей вёрстке страницы на нём нет, но правила в site.css живут и включатся, если шаблон вернут. Серой была правая сводка с итогом. Конкурент: site.css:869 .sc-basket .basket-checkout-section — (0,2,0). */ .sc-basket .basket-checkout-section{background-color:#fff} /* -------------------------------------------------------------------------- 6. Оформление заказа (sale.order.ajax) Серую полосу давал заголовок каждой секции и подложки миниатюр. Конкуренты: site.css:907 .sc2026-page .bx-soa-section-title-container (0,2,0) site.css:1732 .sc-checkout .bx-soa-item-imgcontainer (0,2,0) site.css:1861 .sc-checkout .bx-soa-item-img-block (0,2,0) Секция сама по себе остаётся отделённой: у .bx-soa-section есть рамка и тень (site.css:1651 и блок с var(--tile-shadow)), заголовок от содержимого отделяет отступ. -------------------------------------------------------------------------- */ .sc2026-page .bx-soa-section-title-container{background-color:#fff} .sc-checkout .bx-soa-item-imgcontainer{background-color:#fff} .sc-checkout .bx-soa-item-img-block{background-color:#fff} /* Итоговая сводка: для .sc-checkout она уже белая (site.css:1713), но базовое правило .sc2026-page (site.css:933) красит её в --bg-soft и сработает на любой другой странице с этим компонентом. */ .sc2026-page .bx-soa-cart-total{background-color:#fff} /* Список товаров на странице оплаты/подтверждения: подложка миниатюры. Конкурент: site.css:2212 .sc-goods-pic{background-color:var(--bg-soft)} Рамка 1px var(--tile-line) у плитки остаётся, снимок не «повиснет». */ .sc-goods-pic{background-color:#fff} /* -------------------------------------------------------------------------- 7. Серые подложки на обычных страницах (не корзина) Их пропустили в первом заходе: заказчик просил белый ПО ВСЕМУ САЙТУ, а это те же серые плитки var(--bg-soft), что уже побелены в корзине (.sc-cart .ci .ph, .sc-goods-pic). Оставлять их серыми — значит показать заказчику серое на главной, на «О компании» и на B2B. Все три конкурента лежат в файлах, которые подключаются РАНЬШЕ нашего, поэтому берём ту же специфичность и выигрываем порядком, без !important. -------------------------------------------------------------------------- */ /* «С чего начать» на /company/about/ — целая секция страницы. Конкурент: site.css:1334 .about .ab-start{background:var(--bg-soft)} — специфичность (0,2,0), повторяем её ровно. Рамку не добавляем: секция стоит в ряду фирменных цветных блоков (.ab-pack и .ab-sign — зелёные site.css:1368,1445; .ab-cta — бордовый site.css:1477), они и держат ритм, а margin-top:56 отделяет её сверху. Картинка .ab-start-person — PNG с альфа-каналом (cutout), на белом каймы не даёт. */ .about .ab-start{background-color:#fff} /* Правая колонка на /business/ — плитка в двухколоночной сетке. Конкурент: site.css:2796 .b2b-side{background:var(--bg-soft)} — (0,1,0). Здесь одного белого мало: рядом в той же секции стоит .b2b-form-box, и он уже белый С рамкой и тенью (site.css:2765 background:#fff;border:1px solid var(--tile-line);box-shadow:var(--tile-shadow)). Белая колонка без рамки рядом с белой плиткой с рамкой просто растворилась бы, поэтому повторяем ГОТОВЫЙ рецепт соседа, а не выдумываем новый. Радиус 32 остаётся из site.css, box-sizing:border-box стоит глобально (site.css:61) — рамка ничего не сдвигает. */ .b2b-side{background-color:#fff;border:1px solid var(--tile-line); box-shadow:var(--tile-shadow)} /* Подложка фотографии в карточке товара на ГЛАВНОЙ (модалка #pmodal). Конкурент: home.css:365 .pm-photo{background:#f0f3ee} — (0,1,0). Тот же случай, что .sc-cart .ci .ph: у снимка внутри стоит mix-blend-mode:multiply (home.css:366), а умножение на белом ничего не меняет — пачка выглядит ровно как была, только чище. Саму карточку .pm-card не трогаем: её кремовая подложка var(--cream-soft) — это ground модального окна, см. список ниже. */ .pm-photo{background-color:#fff} /* ========================================================================== НАМЕРЕННО ОСТАВЛЕНО ЦВЕТНЫМ (не белым): • Подвал .site-foot / .ft-shape — тёмно-зелёный var(--green-deep-2), site-hf.css:163. Это фирменный низ страницы. • Шапка при прокрутке .site-head.is-stuck .head-inner::before — полупрозрачное белое стекло с размытием (site-hf.css:51,60). Оно и так белое, но с альфой; заливать наглухо нельзя — пропадёт эффект. • Бегущая строка .ticker / .ticker-wrap — лента из макета с наклоном и рисованной подложкой (site.css:474–491). • Зелёные и бордовые плашки: .btn-green, .acc-nav-i.on, .acc-status.ok, .sc-map .city-tab.on, .sc-map .partner, .quiz, .marquee, .topbar, .sc-cart .ci .opt, .acc-bar и т.п. — это состояния и акценты бренда. • Всплывашки и модальные окна: .sc-added-box и его миниатюра .sc-added-ph (site.css:1604), .scp (cart-popover), .hd-drop и его боковая колонка .hd-drop-side (site.css:140), карточка товара на главной .pm-card (var(--cream-soft), home.css:360) — отдельный слой над страницей, у них своя подложка. Внутри .pm-card мы побелили только колодец фотографии .pm-photo, см. §7. • Плитки карточки товара из макета Frame 467: .pdp-box.pdp-scales (#f1f2e8, site.css:1015), .pdp-brew .ic (#F2F3E9, site.css:1111) — нарисованы в Figma именно такими. • Оранжевая метка .badge.bg-faded-danger (catalog.css:63) — статус, а не фон. • Мелкие управляющие элементы на серой заливке — это кнопки и чипы, а не фон страницы: .sc-map .spot .a-tel (1223), .sc-addr-edit (2070), .sc-addr-found button:hover (2111), .sc-pay-logo (4433), чип фильтра (1191), выбранная доставка .bx-soa-pp-company-selected (1756). • .pcard .pimg.is-empty (site.css:3284) — заглушка «фото нет» (product-card.php:504). Это состояние пустоты: на белом пропадёт и место под снимок будет не видно. • .card .ph (home.css:145,240) — вёрстка старого прототипа, в живых страницах класса .card нет (в корзине это .sc-cart .ci .ph, он побелен в §5; каталог рисуется через .pcard). Трогать нечего. ЖДЁТ СЛОВА ЗАКАЗЧИКА (перечислено в отчёте, needsFromMe): .pdp-specs (site.css:975), .doc-req (894), .sc-addr-map (2127) и родственная ей .sc-contacts-map (2895) — крупные серые плашки, где белый может «уронить» блок; нужен ответ, белим или оставляем. ========================================================================== */