/* donaldtruck-homev2-20260911-v1.css Новое оформление блоков главной «в стилистике dt-vin» (тёмная карточка, красное свечение, «стеклянные» внутренние панели) — ПРЕВЬЮ на согласование с клиентом. Все правила действуют ТОЛЬКО при классе dt-home-v2 на . Класс ставит парный donaldtruck-homev2-20260911-v1.js — и только на главной с параметром ?preview=v2. Без параметра главная не меняется ни на пиксель. Эталон — секция .dt-vin, она сама здесь НЕ меняется. .dt-b2b уже оформлена так же. Убраны белые подложки: ленты .dt-section::before (их рисует псевдоэлемент, а не секция), белая hero-панель, белые карточки преимуществ, категорий и брендов. ОТКАТ: убрать из _inc/module.project-config.php две строки homev2 (CSS и JS). */ html.dt-home-v2 { --v2-card-bg: radial-gradient(circle at 92% 18%, rgba(239, 57, 53, .3), rgba(0, 0, 0, 0) 20%), linear-gradient(135deg, #111827 0%, #1d2a38 100%); --v2-card-flat: linear-gradient(135deg, #111827 0%, #1d2a38 100%); --v2-shadow: 0 18px 36px rgba(15, 23, 42, .08); --v2-panel-shadow: 0 18px 34px rgba(15, 23, 42, .17); --v2-muted: rgba(255, 255, 255, .75); --v2-muted-2: rgba(255, 255, 255, .68); --v2-glass: rgba(255, 255, 255, .08); --v2-glass-line: rgba(255, 255, 255, .16); --v2-tile: rgba(255, 255, 255, .06); --v2-tile-line: rgba(255, 255, 255, .14); --v2-tile-hover: rgba(255, 255, 255, .1); --v2-red: #eb3b36; --v2-red-line: rgba(239, 57, 53, .55); --v2-red-soft: #ff6f6a; --v2-red-tint: rgba(239, 57, 53, .16); } /* ---------- 1. Первый экран (hero) ---------- */ html.dt-home-v2 .dt-hero .dt-hero__panel { border-color: transparent !important; background-color: #111827 !important; background-image: var(--v2-card-bg) !important; box-shadow: var(--v2-shadow) !important; color: #fff; } html.dt-home-v2 .dt-hero .dt-hero__title { color: #fff; } html.dt-home-v2 .dt-hero .dt-hero__subtitle { color: var(--v2-muted); } html.dt-home-v2 .dt-hero .dt-hero__badge { border-color: rgba(239, 57, 53, .42); background: rgba(239, 57, 53, .12); color: #ffb0b0; } /* Поиск: только внутри .dt-hero — те же классы есть у выпадающей панели поиска в шапке */ html.dt-home-v2 .dt-hero .dt-search-card { border-color: var(--v2-glass-line); background: var(--v2-glass); box-shadow: var(--v2-panel-shadow); } html.dt-home-v2 .dt-hero .dt-search-tab { background: var(--v2-glass); color: var(--v2-muted-2); } html.dt-home-v2 .dt-hero .dt-search-tab:hover:not(.is-active), html.dt-home-v2 .dt-hero .dt-search-tab:focus-visible:not(.is-active) { background: rgba(255, 255, 255, .14); color: #fff; } html.dt-home-v2 .dt-hero .dt-search-tab.is-active { background: #fff; color: #182333; } html.dt-home-v2 .dt-hero .dt-search-input { border-color: rgba(255, 255, 255, .15); background: rgba(17, 24, 39, .58); color: #fff; } html.dt-home-v2 .dt-hero .dt-search-input::placeholder { color: rgba(255, 255, 255, .45); } html.dt-home-v2 .dt-hero .dt-search-input:hover { border-color: rgba(255, 255, 255, .28); } html.dt-home-v2 .dt-hero .dt-search-input:focus { border-color: rgba(240, 57, 52, .88); background: rgba(17, 24, 39, .76); box-shadow: 0 0 0 3px rgba(240, 57, 52, .16); } html.dt-home-v2 .dt-hero .dt-search-submit { box-shadow: 0 14px 28px rgba(235, 59, 54, .25); } html.dt-home-v2 .dt-hero .dt-check { border-color: var(--v2-glass-line); background: var(--v2-glass); color: #fff; } html.dt-home-v2 .dt-hero .dt-check::before { color: var(--v2-red-soft); } html.dt-home-v2 .dt-hero .dt-hero__media { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 34px rgba(0, 0, 0, .28); } /* ---------- 2. Преимущества под первым экраном ---------- */ html.dt-home-v2 .dt-benefit { border-color: rgba(255, 255, 255, .08); background: var(--v2-card-flat); box-shadow: var(--v2-shadow); } html.dt-home-v2 .dt-benefit__icon { background: var(--v2-red-tint); color: var(--v2-red-soft); } html.dt-home-v2 .dt-benefit__title { color: #fff; } html.dt-home-v2 .dt-benefit__text { color: var(--v2-muted-2); } /* ---------- 3. Секции-карточки: категории, бренды, спецпредложения, карта ---------- */ /* белые полноширинные ленты — это псевдоэлемент, а не фон самой секции */ html.dt-home-v2 .dt-home .dt-section::before { content: none !important; } html.dt-home-v2 .dt-home .dt-categories, html.dt-home-v2 .dt-home .dt-brands, html.dt-home-v2 .dt-home .dt-offers, html.dt-home-v2 .dt-home .dt-map { position: relative; z-index: 0; padding: 34px 40px 40px; border-radius: 20px; background-color: #111827; background-image: var(--v2-card-bg); box-shadow: var(--v2-shadow); color: #fff; } html.dt-home-v2 .dt-home .dt-section__title { color: #fff; } html.dt-home-v2 .dt-home .dt-section__subtitle { color: var(--v2-muted); } /* категории */ html.dt-home-v2 .dt-category-card { border-color: var(--v2-tile-line); background: var(--v2-tile); box-shadow: none; color: #fff; } html.dt-home-v2 .dt-category-card strong { color: #fff; } html.dt-home-v2 .dt-category-card span { background: var(--v2-red-tint); color: var(--v2-red-soft); } html.dt-home-v2 .dt-category-card:hover, html.dt-home-v2 .dt-category-card:focus-visible { border-color: var(--v2-red-line); background: var(--v2-tile-hover); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); } html.dt-home-v2 .dt-category-card:hover span, html.dt-home-v2 .dt-category-card.is-active span { background: var(--v2-red); color: #fff; } /* бренды: название белое, знак — в светлом оттенке фирменного цвета (currentColor плитки) */ html.dt-home-v2 .dt-brand-grid a.dt-brand { border-color: var(--v2-tile-line); background: var(--v2-tile); box-shadow: none; } html.dt-home-v2 .dt-brand-grid a.dt-brand:hover, html.dt-home-v2 .dt-brand-grid a.dt-brand:focus-visible { border-color: var(--v2-red-line); background: var(--v2-tile-hover); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); } html.dt-home-v2 .dt-brand strong { color: #fff; } html.dt-home-v2 .dt-brand--bosch { color: #ff5a67 !important; } html.dt-home-v2 .dt-brand--wabco { color: #5ea5ec !important; } html.dt-home-v2 .dt-brand--knorr { color: #43b8e8 !important; } html.dt-home-v2 .dt-brand--sachs { color: #82a9ea !important; } html.dt-home-v2 .dt-brand--mahle { color: #5f9fe3 !important; } html.dt-home-v2 .dt-brand--hella { color: #7faae6 !important; } html.dt-home-v2 .dt-brand--febi { color: #93a5e6 !important; } html.dt-home-v2 .dt-brand--donaldson { color: #55a4e4 !important; } html.dt-home-v2 .dt-brand--mann { color: #55c887 !important; } html.dt-home-v2 .dt-brand--skf { color: #40adeb !important; } /* у знака MAHLE рамка цвета currentColor (белая) — на белой плитке её не было видно, на тёмной видно */ html.dt-home-v2 .dt-brand--mahle .dt-brand__mark { border-color: transparent; } /* спецпредложения (сейчас скрыты режимом «без цен», оформлены на случай его отката) */ html.dt-home-v2 .dt-offer-card { border-color: var(--v2-tile-line); background: var(--v2-tile); box-shadow: none; } html.dt-home-v2 .dt-offer-card:hover { border-color: var(--v2-red-line); background: var(--v2-tile-hover); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); } html.dt-home-v2 .dt-offer-card h3 { color: #fff; } html.dt-home-v2 .dt-offer-card__meta, html.dt-home-v2 .dt-offer-card__article, html.dt-home-v2 .dt-offer-card__stock span { color: var(--v2-muted-2); } html.dt-home-v2 .dt-offer-card__stock strong { color: #4ade80; } html.dt-home-v2 .dt-offer-card__price span { color: rgba(255, 255, 255, .5); } html.dt-home-v2 .dt-offer-card__price b { color: var(--v2-red-soft); } html.dt-home-v2 .dt-offer-card__heart { border-color: var(--v2-glass-line); background: rgba(17, 24, 39, .6); color: rgba(255, 255, 255, .8); } html.dt-home-v2 .dt-offer-card__actions a { background: var(--v2-red); } html.dt-home-v2 .dt-offer-card__actions button { border: 1px solid var(--v2-glass-line); background: var(--v2-glass); color: #fff; } /* карта: рамка карты и «стеклянная» панель адреса, как форма в dt-vin */ html.dt-home-v2 .dt-map__frame { border-color: var(--v2-tile-line); border-radius: 16px; box-shadow: none; } html.dt-home-v2 .dt-map__info { border: 1px solid var(--v2-glass-line); border-radius: 16px; background: var(--v2-glass); box-shadow: var(--v2-panel-shadow); } /* карточка секции съела 2×40px ширины — отдаём их панели адреса, иначе адрес ломается на 3 строки */ @media (min-width: 992px) { html.dt-home-v2 .dt-map__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } } /* ---------- 4. Цифры ---------- */ html.dt-home-v2 .dt-stats { background-color: #111827; background-image: var(--v2-card-bg); box-shadow: var(--v2-shadow); } @media (min-width: 1200px) { html.dt-home-v2 .dt-stats { border-radius: 20px; } } /* ---------- 5. Адаптив: повторяем поведение dt-vin ---------- */ @media (max-width: 1199px) { html.dt-home-v2 .dt-home .dt-categories, html.dt-home-v2 .dt-home .dt-brands, html.dt-home-v2 .dt-home .dt-offers, html.dt-home-v2 .dt-home .dt-map { padding: 30px; } } /* на телефоне dt-vin и dt-b2b растянуты на всю ширину без скруглений — секции делаем так же */ @media (max-width: 767px) { html.dt-home-v2 .dt-home .dt-categories, html.dt-home-v2 .dt-home .dt-brands, html.dt-home-v2 .dt-home .dt-offers, html.dt-home-v2 .dt-home .dt-map { width: calc(100% + 32px); margin-right: -16px; margin-left: -16px; padding: 30px 16px; border-radius: 0; } html.dt-home-v2 .dt-map__frame, html.dt-home-v2 .dt-map__info { border-radius: 14px; } }