/* ========================================================================= Тема «Контрастный блочный» — слой поверх general*.css / additional.css. Все правила ограничены .theme-bc (класс вешается на только там, где тема нужна), поэтому остальные страницы сайта не затрагиваются. Чтобы откатить — сменить @section('body_class', ...) на странице. ========================================================================= */ .theme-bc { --bc-ink: #0A0A0A; --bc-white: #FFFFFF; --bc-paper: #FFFFFF; --bc-line: #0A0A0A; --bc-muted: #6A6A6A; --bc-muted-2: #8A8A8A; --bc-accent: #1E7A4C; --bc-accent-dk: #17603C; --bc-gold: #B8942F; --bc-tile-bg: #F2F2F2; --bc-cnd: Oswald, "Arial Narrow", sans-serif; --bc-ui: Onest, system-ui, "Segoe UI", sans-serif; background: var(--bc-paper); font-family: var(--bc-ui); color: var(--bc-ink); -webkit-font-smoothing: antialiased; } .theme-bc .wrapper, .theme-bc .main { background: var(--bc-paper); } @media (min-width: 1200px) { .theme-bc .container { max-width: 1280px; } } /* ---------- Типографика ---------- */ .theme-bc h1, .theme-bc h2, .theme-bc h3, .theme-bc .title, .theme-bc .page-title, .theme-bc .box-title { font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.01em; font-weight: 700; color: var(--bc-ink); /* сбрасываем родные отступ/иконку у h2.title (см. ниже) — без этого под новый жирный капс они не подогнаны и съезжают */ padding-left: 0; } /* доп. css сайта навешивает на h2.title декоративную иконку (:before, t-before.svg) и короткую красную линию (:after) под исходный некапсовый заголовок 24px — на новой типографике она смещается и выглядит как сломанный квадрат слева от текста. В этой теме подчёркивание уже даёт border-bottom ниже, поэтому родные псевдоэлементы просто убираем. */ .theme-bc h2.title:before, .theme-bc .title:before, .theme-bc h2.title:after, .theme-bc .title:after, .theme-bc .page-title:after { display: none; } .theme-bc .page-title { font-size: 40px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 3px solid var(--bc-ink); } .theme-bc .main-brands .title, .theme-bc .container > .title, .theme-bc section > .title { font-size: 32px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 3px solid var(--bc-ink); } .theme-bc .s-about .row p { font-family: var(--bc-ui); text-transform: none; font-size: 16px; line-height: 1.7; color: #333333; } /* ---------- Шапка ---------- */ .theme-bc .header-main .middle { background: var(--bc-ink); border-bottom: none; } .theme-bc .header-main .middle .inner { min-height: 44px; } .theme-bc .header-main .map_mark_text { color: var(--bc-white); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; } .theme-bc .header-main .phone label { color: #8A8A8A; font-size: 13px; text-transform: uppercase; } .theme-bc .header-main .phone .header__phone-link, .theme-bc .header-main .phone a { font-family: var(--bc-cnd); font-size: 20px; font-weight: 600; color: var(--bc-white); } .theme-bc .header-main .phone .header__phone-link:hover { color: var(--bc-accent); } .theme-bc .header-main .menu { background: var(--bc-white); border-bottom: 3px solid var(--bc-ink); } /* Нижняя полоса меню не совпадала по боковым отступам с верхней (лого/ телефон): .inner здесь дублирует паддинг .container ещё одним padding:0 8px (general3/4.css), а первый/последний пункт меню добавляют свои родные 15px (ul.main-menu a/span). Верхняя же полоса (.middle .inner) такой доп. обёртки не имеет — только паддинг .container. Убираем лишние слои, чтобы "Каталог новых авто" и "Контакты" начинались/заканчивались на той же вертикали, что лого и телефон. */ .theme-bc .header-main .menu .inner { padding-left: 0; padding-right: 0; } /* тот же отступ 8px, что у .container, но перенесён на сам ul.main-menu (флекс-контейнер) — так он не завязан на .inner, который переиспользуется и другими блоками шапки. Скоуп только на десктопную шапку: у мобильного выпадающего меню тот же класс ul.main-menu, но своя, уже выровненная под .mobile-main вёрстка — этот паддинг её не должен задевать. */ .theme-bc .header-main .menu .inner ul.main-menu { padding: 0 8px; } .theme-bc .header-main .menu .inner ul.main-menu > li:first-child > a, .theme-bc .header-main .menu .inner ul.main-menu > li:first-child > span { padding-left: 0; } .theme-bc .header-main .menu .inner ul.main-menu > li:last-child > a, .theme-bc .header-main .menu .inner ul.main-menu > li:last-child > span { padding-right: 0; } /* лого-картинка (assets/images/{$setting->logotype}) битая — файла нет на диске (404), поэтому в шапке (десктоп и мобилка) вместо теперь просто название автосалона текстом */ .theme-bc .logo__text { font-family: var(--bc-cnd); text-transform: uppercase; font-weight: 700; font-size: 20px; letter-spacing: 0.02em; color: var(--bc-white); line-height: 1.1; } .theme-bc .main-menu > li > a, .theme-bc .main-menu > li > span, .theme-bc .main-menu .catalog-menu-btn { font-family: var(--bc-ui); font-size: 15px; font-weight: 500; color: var(--bc-ink); } .theme-bc .main-menu > li > a:hover, .theme-bc .main-menu .catalog-menu-btn:hover { color: var(--bc-accent); } /* выпадающий каталог */ .theme-bc .catalog-menu { background: var(--bc-white); border: 3px solid var(--bc-ink); border-radius: 0; box-shadow: none; } .theme-bc .catalog-menu .brand-item .brand-link { border-radius: 0; color: var(--bc-ink); } .theme-bc .catalog-menu .brand-item .brand-link:hover { background: var(--bc-tile-bg); color: var(--bc-accent); } .theme-bc .catalog-menu .hits .box-title { font-size: 18px; border-bottom: none; padding-bottom: 0; } .theme-bc .catalog-menu .hits .accent { color: var(--bc-accent); } .theme-bc .catalog-menu .hit-item .price { font-family: var(--bc-cnd); font-weight: 600; color: var(--bc-accent); } .theme-bc .catalog-menu-btn.open { background-color: var(--bc-tile-bg); box-shadow: none; } /* блок "Хиты продаж" убран из выпадающего меню — колонка марок (родные фиксированные 675px, рассчитанные на соседство с колонкой хитов) теперь растягивается на всю ширину каталога. */ .theme-bc .catalog-menu .brands { width: 100%; } /* были только горизонтальные линии-разделители (border-bottom) — колонки между собой ничем не отделялись, сетка выглядела недоделанной. Добавляем такую же вертикальную линию. Раскладка вертикальная: лого сверху по центру, название под ним по центру — раньше было в ряд (лого слева, название справа), и на мобильном узкие колонки (33% ширины) длинные однословные названия (Volkswagen, Chevrolet) распирали за рамку. */ .theme-bc .brand-items .brand-item .brand-link { border: 1px solid var(--bc-ink); box-sizing: border-box; height: auto; padding: 12px 8px; flex-direction: column; justify-content: center; text-align: center; } .theme-bc .brand-items .brand-item .brand-link span { min-width: 0; width: 100%; padding-left: 0; margin-top: 8px; white-space: normal; overflow-wrap: break-word; word-break: break-word; font-family: var(--bc-ui); } /* родное правило (general3/4.css) задаёт логотипу только width:32px, height:auto — у каждого лого своё соотношение сторон, поэтому реальная высота картинки у всех разная, и карточки марок раздуваются неодинаково. Прижимаем в общий квадрат, картинка вписывается пропорционально (object-fit: contain), без искажений; размер чуть уменьшен под новую вертикальную раскладку. */ .theme-bc .brand-items .brand-item .brand-link .brand-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; } .theme-bc .hit-items .hit-item .title { font-family: var(--bc-ui); color: var(--bc-ink); } .theme-bc .hit-items .hit-item > span:hover, .theme-bc .hit-items .hit-item a:hover { background: var(--bc-tile-bg); } /* мобильная шапка */ .theme-bc .header-mobile, .theme-bc .header-mobile .mobile-main { background: var(--bc-ink); } .theme-bc .new-auto-link { color: var(--bc-accent); } .theme-bc #burger span { background: var(--bc-accent); } /* .header-mobile.mobile-main (верхняя чёрная полоса с лого) и .header-mobile.mobile-menu (выпадающая панель адреса/меню/телефона) — разные блоки с разным фоном: у панели родной background:#fafafa (светлый), а не чёрный, как у верхней полосы. Белый текст на светлом фоне был невидим — красим панель отдельно, тёмным текстом на её родном светлом фоне. */ .theme-bc .header-mobile .mobile-menu { background: var(--bc-white); border-bottom: 2px solid var(--bc-ink); } .theme-bc .header-mobile .mobile-menu .addres { color: var(--bc-ink); font-family: var(--bc-ui); } .theme-bc .header-mobile .mobile-menu ul.main-menu li a, .theme-bc .header-mobile .mobile-menu ul.main-menu li span { color: var(--bc-ink); border-bottom: 1px solid #E4E4E0; /* родное padding:10px (general3/4.css) даёт ссылкам лишний отступ слева/ справа поверх паддинга .container — текст съезжает правее логотипа в .mobile-main (та же .container, но без внутреннего паддинга у элементов). Обнуляем горизонтальные, оставляя вертикальные 10px. */ padding-left: 0; padding-right: 0; } .theme-bc .header-mobile .mobile-menu .phones .header__phone-link, .theme-bc .header-mobile .mobile-menu .phones a { color: var(--bc-ink); font-family: var(--bc-cnd); font-weight: 600; } .theme-bc .header-mobile .mobile-menu .phones label { color: var(--bc-muted); } /* ---------- Герой: текст слева, слайдер справа ---------- */ .theme-bc .hero-row { padding-top: 28px; padding-bottom: 40px; } .theme-bc .hero-row__eyebrow { font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; font-weight: 600; color: var(--bc-accent); } .theme-bc .hero-row__title { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 48px; font-weight: 700; line-height: 1.05; color: var(--bc-ink); margin: 0; } .theme-bc .hero-row__desc { font-family: var(--bc-ui); font-size: 16px; line-height: 1.6; color: #333333; margin: 0; max-width: 460px; } .theme-bc .hero-row__cta { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; box-sizing: border-box; font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; font-weight: 600; border: 2px solid transparent; border-radius: 0; text-decoration: none; } .theme-bc .hero-row__cta--primary { background: var(--bc-accent); color: var(--bc-white); } .theme-bc .hero-row__cta--primary:hover { background: var(--bc-accent-dk); color: var(--bc-white); } .theme-bc .hero-row__cta--secondary { background: transparent; border: 2px solid var(--bc-ink); color: var(--bc-ink); } .theme-bc .hero-row__cta--secondary:hover { border-color: var(--bc-accent); color: var(--bc-accent); } .theme-bc .hero-row__media, .theme-bc .home-slider, .theme-bc .home-slider .home-slider__track, .theme-bc .home-slider .home-slider__slide { height: 100%; min-height: 320px; } @media (max-width: 767px) { .theme-bc .hero-row__media, .theme-bc .home-slider, .theme-bc .home-slider .home-slider__track, .theme-bc .home-slider .home-slider__slide { min-height: 0; } } .theme-bc .home-slider .home-slider__track { padding: 0 !important; } .theme-bc .home-slider .home-slider__img { height: 100%; border-radius: 0; border: 3px solid var(--bc-ink); } .theme-bc .home-slider .slick-dots li button { background: rgba(10, 10, 10, .25); border-radius: 0; } .theme-bc .home-slider .slick-dots li.slick-active button { background: var(--bc-accent); } /* ---------- Типы кузова: чёрная лента ---------- */ .theme-bc .main-brands { padding-top: 0; } .theme-bc .body-types { background: var(--bc-ink); margin: 0 -8px 40px; padding: 0 8px; } .theme-bc .body-types__list { max-width: 1280px; margin: 0 auto; gap: 0 30px; padding: 0; } .theme-bc .body-types__item { flex: 0 0 auto; } .theme-bc .body-types__link { height: 52px; padding: 0; border: none; border-radius: 0; background: transparent; font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.05em; font-size: 15px; font-weight: 500; color: var(--bc-white); white-space: nowrap; } .theme-bc .body-types__link:hover { background: transparent; color: var(--bc-accent); } /* ---------- Плитки марок ---------- */ .theme-bc .main-brands .brands { gap: 10px; } /* при 12 плитках в ряд длинным названиям ("Volkswagen") не хватало места — текст утыкался прямо в рамку. Уменьшаем число колонок (10 вместо 12) и даём больше внутреннего паддинга. */ .theme-bc .main-brands .brands .brand { width: calc((100% - 9 * 10px) / 10); margin-bottom: 0; } .theme-bc .main-brands .brands .brand > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: auto; min-height: 76px; padding: 10px 12px; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; transition: background .12s ease, border-color .12s ease; } .theme-bc .main-brands .brands .brand > a:hover { background: var(--bc-tile-bg); border-color: var(--bc-accent); color: var(--bc-ink); } .theme-bc .main-brands .brands .brand > a .brand-logo { display: flex; align-items: center; justify-content: center; } .theme-bc .main-brands .brands .brand > a .brand-logo img { max-width: 52px; max-height: 22px; object-fit: contain; } .theme-bc .main-brands .brands .brand > a .brand-name { font-family: var(--bc-ui); font-size: 11px; color: var(--bc-muted); } @media (max-width: 1023px) { .theme-bc .main-brands .brands .brand { width: calc((100% - 7 * 10px) / 8); } } /* на мобильном при 5 плитках в ряд длинные названия ("Lynk&Co", "Sollers") не помещались в узкую фиксированную высоту 64px и вылезали текстом за нижнюю рамку блока — расширяем плитки (3 в ряд) и убираем жёсткую высоту, чтобы название могло перенестись на 2 строки внутри рамки */ @media (max-width: 767px) { .theme-bc .main-brands .brands .brand { width: calc((100% - 1 * 8px) / 2); } .theme-bc .main-brands .brands { gap: 8px; } .theme-bc .main-brands .brands .brand > a { height: auto; min-height: 76px; } .theme-bc .main-brands .brands .brand > a .brand-name { text-align: center; line-height: 1.25; } .theme-bc .body-types__list { gap: 0 18px; } /* ограничение по max-height было хрупким — реальная высота плитки (с учётом переноса названия на 2 строки) оказалась больше, чем расчётная, и обрезало 3-й ряд раньше времени. Прячем явно по счёту элемента — показываем ровно первые 6 (2 в ряд × 3 ряда), независимо от их высоты. */ .theme-bc .main-brands .brands.showMoreHidden .brand:nth-child(n+7) { display: none; } } /* то же ограничение "первые 3 ряда" на планшете (8 в ряд) и десктопе (10 в ряд) — раньше кнопка "Показать ещё" вообще пряталась на этих ширинах, и список из ~60 марок отображался сразу целиком */ @media (min-width: 767.02px) and (max-width: 1023px) { .theme-bc .main-brands .brands.showMoreHidden .brand:nth-child(n+25) { display: none; } } @media (min-width: 1023.02px) { .theme-bc .main-brands .brands.showMoreHidden .brand:nth-child(n+31) { display: none; } } .theme-bc .brands-show-more { display: inline-flex; margin-top: 16px; } /* ---------- Популярное: подбор чипами ---------- */ .theme-bc .podbor_title { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--bc-ink); margin: 0 0 14px; padding-top: 36px; } .theme-bc h2 + .podbor_title { padding-top: 6px; } /* .podbor нигде в стилях сайта не определён вообще (ни в одном css-файле, не только в теме) — без display:flex "gap" ничего не даёт (работает только во flex/grid-контейнерах), а .podbor_item как обычные блочные div просто складывались друг под другом без единого пикселя зазора между ними — отсюда и слипшийся вид. */ .theme-bc .podbor { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } /* "Новые модели" (h2.title) идёт сразу за последним рядом чипов "Тип кузова" — у родного .title есть только нижний отступ/полоса, сверху пусто, из-за чего заголовок прижимался к ряду чипов над ним */ .theme-bc .podbor + .title { margin-top: 36px; } .theme-bc .podbor_item { width: auto; padding: 0; margin: 0; } .theme-bc .podbor_item a { height: 42px; padding: 0 18px; border: 2px solid var(--bc-ink); border-radius: 0; background: var(--bc-white); color: var(--bc-ink); font-family: var(--bc-ui); font-size: 14px; white-space: nowrap; } .theme-bc .podbor_item a:hover { background: var(--bc-ink); color: var(--bc-white); } /* ---------- Карточки моделей («Хиты продаж») ---------- */ .theme-bc .model-cards-mini { gap: 16px; margin-top: 4px; } .theme-bc .model-cards-mini .model-card-mini { width: calc((100% - 3 * 16px) / 4); } @media (max-width: 1023px) { .theme-bc .model-cards-mini .model-card-mini { width: calc((100% - 2 * 16px) / 3); } } @media (max-width: 767px) { .theme-bc .model-cards-mini .model-card-mini { width: calc((100% - 16px) / 2); } } .theme-bc .model-cards-mini .model-card--inner { margin: 0; padding: 0; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; height: 100%; overflow: hidden; } .theme-bc .model-cards-mini .col-first { padding: 16px 16px 0; } .theme-bc .model-cards-mini .col-first .title { font-family: var(--bc-cnd); text-transform: none; font-size: 19px; font-weight: 600; color: var(--bc-ink); padding-bottom: 0; } /* короткая полоска-акцент под названием модели — родной цвет #b71c1c (перекрашен в additional.css на синий #0e5394) заменяем на золотой, скруглённые углы убираем под плоскую эстетику темы */ /* базовое правило — полная цепочка в 4 класса (...model-card-mini .model-card--inner .col-first .title:after) — специфичнее укороченной версии, которая тут стояла раньше (3 класса, проигрывала). Даём такую же полную цепочку для обоих вариантов карточки. */ .theme-bc .model-cards-mini .model-card-mini .model-card--inner .col-first .title:after, .theme-bc .model-cards-mini-price .model-card-mini .model-card--inner .col-first .title:after { display: block; background: var(--bc-gold); border-radius: 0; } .theme-bc .model-cards-mini .col-first .image { padding-top: 14px; min-height: 140px; background: var(--bc-tile-bg); margin: 12px -16px 0; } .theme-bc .model-cards-mini .col-first .image img { max-width: 80%; max-height: 120px; object-fit: contain; } .theme-bc .model-cards-mini .col-second { margin-top: 0; padding: 12px 16px; background: var(--bc-accent); } .theme-bc .model-cards-mini .col-second > div { padding-left: 0; background-image: none !important; width: 100%; } .theme-bc .model-cards-mini .col-second label, /* доп. css сайта красит подпись через `.col-second>div label` (5 классов) — специфичнее правила выше (4 класса), поэтому реальный цвет оставался базовым серым #787878, который на зелёном фоне почти не виден (контраст ~1.2:1). Даём здесь такую же длинную цепочку, чтобы наверняка победить. */ .theme-bc .model-cards-mini .model-card-mini .model-card--inner .col-second > div label { font-family: var(--bc-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255, 255, 255, .92); margin: 0; } .theme-bc .model-cards-mini .col-second .cash span { font-family: var(--bc-cnd); font-size: 21px; font-weight: 600; color: var(--bc-white); transition: color .15s ease; } /* доп. css сайта на наведении красит цену в #b71c1c через `.model-card--inner:hover .cash span` (5 классов) — специфичнее правила выше (4 класса), поэтому реально побеждал красный. А красный на зелёном фоне почти той же светлоты (контраст ~1.2:1) — цена буквально пропадала. Даём такую же цепочку и красим в тёплое золото, которое на зелёном читается уверенно (контраст ~3.7:1) и не выглядит как ошибка/тревога. */ .theme-bc .model-cards-mini .model-card-mini .model-card--inner:hover .cash span, .theme-bc .model-cards-mini-price .model-card-mini .model-card--inner:hover .cash span { color: #FFD166; } .theme-bc .model-cards-mini .col-second .credit { margin-top: 4px; } .theme-bc .model-cards-mini .col-second .credit span { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .92); transition: color .15s ease; } .theme-bc .model-cards-mini .model-card-mini .model-card--inner:hover .credit span { color: #FFD166; } /* ---------- О салоне + преимущества ---------- */ .theme-bc .s-about { gap: 0 64px; align-items: flex-start; } .theme-bc .main-features .features { gap: 14px; } .theme-bc .main-features .features > div { width: calc((100% - 3 * 14px) / 4); padding: 24px 22px; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; text-align: left; color: var(--bc-accent); } .theme-bc .main-features .features > div svg { width: 32px; height: 32px; fill: currentColor; } .theme-bc .main-features .features > div span { display: block; font-family: var(--bc-cnd); text-transform: uppercase; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--bc-ink); padding-top: 14px; } .theme-bc .main-features .features > div p { font-family: var(--bc-ui); font-size: 14px; line-height: 1.55; color: var(--bc-muted); margin-top: 8px; } @media (max-width: 1023px) { .theme-bc .main-features .features > div { width: calc((100% - 14px) / 2); } } @media (max-width: 575px) { .theme-bc .main-features .features > div { width: 100%; } } /* ---------- Кредитный блок (зелёное поле) ---------- */ /* доп. css сайта ставит карточку формы (.banner>.form) абсолютным позиционированием (top:-20px), из-за чего она выпадает из потока и высоту блока держит только min-height у самого .banner-question — как только карточка становится выше этой высоты, она наезжает на футер. Возвращаем обычный flex-поток для обоих блоков (кредит и обратный звонок). */ .theme-bc .banner-credit, .theme-bc .banner-question { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .theme-bc .banner-credit .form, .theme-bc .banner-question .form, .theme-bc .banner-credit .info, .theme-bc .banner-question .info { position: static; } .theme-bc .banner-credit .form, .theme-bc .banner-question .form { /* растягиваем карточку формы по горизонтали (flex-grow:1), а не держим её узкой колонкой в 380px — с полями Имя/Телефон в один ряд внутри широкая карточка выглядит горизонтальной и остаётся невысокой */ flex: 1 1 520px; width: auto; } .theme-bc .banner-credit .info, .theme-bc .banner-question .info { /* не даём тексту слева отжимать карточку формы обратно в узкую колонку */ flex-grow: 0; flex-shrink: 0; } /* Имя и телефон — в одну строку, а не друг под другом: так карточка формы становится заметно ниже, и вокруг короткого заголовка блока остаётся меньше пустого места по высоте (высоту всей строки задаёт более высокий из двух столбцов). Перед полями в разметке стоит скрытый div честного поля-ловушки (), поэтому завязываемся не на порядок элементов (nth-of-type), а на конкретное поле через :has(). */ .theme-bc .banner-credit .form form, .theme-bc .banner-question .form form { display: flex; flex-wrap: wrap; gap: 10px 12px; } .theme-bc .banner-credit .form form .form-field:has(input[name="name"]), .theme-bc .banner-credit .form form .form-field:has(input[name="phone"]), .theme-bc .banner-question .form form .form-field:has(input[name="name"]), .theme-bc .banner-question .form form .form-field:has(input[name="phone"]) { flex: 1 1 calc(50% - 6px); width: auto; margin: 0; } .theme-bc .banner-credit .form form .form-check, .theme-bc .banner-question .form form .form-check, .theme-bc .banner-credit .form form .form-field:has(button), .theme-bc .banner-question .form form .form-field:has(button) { flex: 1 1 100%; width: 100%; margin: 0; } .theme-bc .banner-credit .info, .theme-bc .banner-question .info { /* flex-grow:0 — иначе .info растягивался на весь остаток строки (у .form есть max-width, а у .info не было), и вокруг короткого заголовка "Остались вопросы?" появлялось много пустого места */ flex: 0 1 460px; /* доп. css сайта прячет .banner-question .info на ширине ≤1023px (был рассчитан на фоновую картинку без текстовой альтернативы) — тексту теперь всегда есть место в flex-раскладке, скрывать нечего */ display: block; } .theme-bc .row-gray.margin-t2-b0 { background: var(--bc-accent); } .theme-bc .banner-credit { /* brand.css (грузится только на странице марки) вешает на этот блок ещё одну фоновую фотографию девушки (girl-credit.png) — на главной её нет, поэтому раньше здесь не было нужды её убирать */ background-image: none; padding-top: 52px; padding-bottom: 52px; /* было в ряд (текст слева, форма справа) — теперь текстовый блок на всю ширину сверху, форма во всю ширину под ним */ flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 32px; } /* brand.css задаёт .info фиксированные 55% шириной — с полями формы в один ряд карточка стала шире, и 55%+форма уже не помещались в строку без переноса ("всё как-то налезает") */ .theme-bc .banner-credit .info { /* .banner-credit теперь flex-direction:column — в колоночном контейнере flex-basis у .info управляет высотой, а не шириной. Ширину задаём явно, не полагаясь на align-items:stretch */ width: 100%; flex: 1 1 auto; } .theme-bc .banner-credit .form { flex: 1 1 auto; width: 100%; } .theme-bc .banner-credit .info .title, .theme-bc .banner-credit .info .title.text { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--bc-white); border-bottom: none; padding-bottom: 0; } .theme-bc .banner-credit .info .subtitle { font-family: var(--bc-ui); font-size: 16px; color: rgba(255, 255, 255, .82); margin-top: 12px; } /* было ещё одно правило .banner-credit .bonus-items ниже по файлу с той же специфичностью (3 класса) и display:flex/column — оно шло позже и перебивало мою предыдущую попытку сделать grid. Правим само это правило, а не добавляем третье поверх. */ .theme-bc .banner-credit .bonus-items { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 18px; margin-top: 26px; list-style: none; padding: 0; } /* brand.css/model.css (грузятся на странице марки и машины) задают ширину через .banner-credit .info .bonus-items .bonus-item — это 4 класса, у моего правила их было 3, и оно проигрывало: карточки сжимались до half-width их grid-ячейки, хотя ширина ячейки была правильной. Добавляем .info в цепочку, чтобы точно победить. */ .theme-bc .banner-credit .info .bonus-items .bonus-item { width: 23%; } @media (max-width: 575px) { .theme-bc .banner-credit .info .bonus-items .bonus-item { width: 100%; } } .theme-bc .banner-credit .bonus-item { /* без border-box паддинг 24px 22px добавлялся ПОВЕРХ заданных 23% ширины — реальная ширина 4 карточек с паддингами превышала контейнер, и четвёртая переносилась на новую строку */ box-sizing: border-box; background: var(--bc-ink); padding: 24px 22px; margin: 0; } .theme-bc .banner-credit .bonus-item > div { /* было в строку с justify-content:space-between и white-space:nowrap — на длинных подписях ("Госпрограммы льготного автокредитования") текст не помещался и вылезал за рамку блока. Кладём подпись над значением — тогда любая длина текста укладывается сама, без обрезки */ display: flex; flex-direction: column; justify-content: space-between; gap: 20px; height: 100%; min-height: 110px; } .theme-bc .banner-credit .bonus-item span:first-child { font-family: var(--bc-ui); font-size: 14px; line-height: 1.4; color: #D6D6D6; } .theme-bc .banner-credit .bonus-item span:last-child { font-family: var(--bc-cnd); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--bc-white); white-space: normal; } /* форма внутри красного блока — width:100% (см. выше) + border:3px + padding:26px 28px без box-sizing: border-box суммируются ПОВЕРХ 100% ширины родителя, и карточка формы вылезает за правый край блока — та же ошибка, что уже была на bonus-items и других плитках в этом файле */ .theme-bc .banner-credit .form { box-sizing: border-box; background: var(--bc-white); border: 3px solid var(--bc-ink); border-radius: 0; padding: 26px 28px; } .theme-bc .banner-credit .form .form-title .title-before { font-family: var(--bc-ui); font-size: 14px; color: var(--bc-muted); } .theme-bc .banner-credit .form .form-title .title-main { display: block; font-family: var(--bc-cnd); text-transform: uppercase; font-size: 24px; font-weight: 700; color: var(--bc-ink); margin-top: 4px; } .theme-bc .banner-credit .form .form-dscr { font-family: var(--bc-ui); font-size: 14px; color: var(--bc-muted); margin-top: 8px; background-size: 20px; } .theme-bc .banner-credit .form .ui-input { height: 48px; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; color: var(--bc-ink); font-family: var(--bc-ui); font-size: 15px; padding: 0 16px; } .theme-bc .banner-credit .form .ui-input::placeholder { color: #9A9A9A; } .theme-bc .banner-credit .form .ui-input:focus { border-color: var(--bc-accent); outline: none; } .theme-bc .banner-credit .form .form-check-label { color: var(--bc-muted); } .theme-bc .banner-credit .form .form-footer, .theme-bc .banner-credit .form .form-footer a { color: var(--bc-muted); font-size: 12px; } .theme-bc .banner-credit .form .form-footer a { color: var(--bc-ink); text-decoration: underline; } /* ---------- Кнопки ---------- */ .theme-bc .button, .theme-bc .btn-submit, .theme-bc button.button, /* доп. css сайта красит кнопку внутри форм через селектор `.banner>.form form .form-field .btn-submit` (4 класса) — он специфичнее `.theme-bc .btn-submit` (2 класса) и перебивает тему. Даём здесь такую же длинную цепочку, чтобы победить по специфичности независимо от порядка файлов. */ .theme-bc .banner .form .form-field .btn-submit { background: var(--bc-ink); border: none; border-radius: 0; height: 56px; font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; font-weight: 600; color: var(--bc-white); transition: background .12s ease; } .theme-bc .button:hover, .theme-bc .btn-submit:hover, .theme-bc .banner .form .form-field .btn-submit:hover { background: var(--bc-accent-dk); } /* ---------- Банки ---------- */ .theme-bc #banks .title { font-size: 24px; } .theme-bc .bank-items .bank-item .link { display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 12px; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; } .theme-bc .bank-items .bank-item img { max-height: 40px; object-fit: contain; filter: grayscale(1); opacity: .8; } .theme-bc .bank-items .bank-item .link:hover img { filter: none; opacity: 1; } /* ---------- Все марки и модели ---------- */ /* было: подчёркивание под шапкой и голый текст ссылок, без рамки — на фоне остальных карточек темы (чёрная рамка + hover) смотрелось незаконченным. Марка (.head) теперь тоже ссылка на страницу бренда. */ .theme-bc .main-all-models .brandnames { gap: 20px; } .theme-bc .main-all-models .brandname { width: calc((100% - 3 * 20px) / 4); padding: 0; box-sizing: border-box; } .theme-bc .main-all-models .brandname .head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #E4E4E0; text-decoration: none; } .theme-bc .main-all-models .brandname .head .img { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 28px; } .theme-bc .main-all-models .brandname .head .img img { max-width: 36px; max-height: 22px; object-fit: contain; } .theme-bc .main-all-models .brandname .head .title { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 16px; font-weight: 700; color: var(--bc-ink); margin: 0; } .theme-bc .main-all-models .brandname:hover .head .title { color: var(--bc-accent); } .theme-bc .main-all-models .brandname .body { display: flex; flex-wrap: wrap; gap: 8px; } .theme-bc .main-all-models .brandname .body div { padding: 0; } /* модели были просто текстом через запятую-отступ — заворачиваем каждую в такую же плоскую рамку-чип, как остальные интерактивные элементы темы. Родное правило `.brandnames .brandname .body div a` (3 класса + div + a) специфичнее короткого `.brandnames__link` (3 класса без элементов) и перебивало padding на 4px 0 — даём такую же полную цепочку с элементами. */ .theme-bc .main-all-models .brandname .body div a.brandnames__link { display: inline-block; border: 1px solid var(--bc-ink); padding: 6px 12px; font-family: var(--bc-ui); font-size: 13px; line-height: 1.3; color: var(--bc-ink); text-decoration: none; transition: border-color .12s ease, color .12s ease, background .12s ease; } .theme-bc .main-all-models .brandname .body div a.brandnames__link:hover { border-color: var(--bc-accent); background: var(--bc-accent); color: var(--bc-white); } /* родная запятая-разделитель между чипами больше не нужна — рамки сами разделяют модели визуально, лишний символ рядом с бордером смотрелся бы криво */ .theme-bc .main-all-models .brandname .body div:not(:last-child):after { content: none; } @media (max-width: 1023px) { .theme-bc .main-all-models .brandname { width: calc((100% - 20px) / 2); } } @media (max-width: 575px) { .theme-bc .main-all-models .brandname { width: 100%; } } /* ---------- Обратный звонок (то же зелёное поле, что у кредитного блока) ---------- Раньше здесь был отдельный чёрный фон и тёмные поля формы — единственное такое решение на странице, а кнопка "Жду звонка" (чёрная) сливалась с чёрным фоном и была не видна. Приводим к уже работающему паттерну banner-credit: зелёное поле снаружи + белая карточка формы с чёрной обводкой. */ .theme-bc .row-gray.margin-t1-b0 { background: var(--bc-accent); } .theme-bc .banner-question { /* фото девушки (background-image из общих стилей сайта) убираем — текст занимает освободившееся слева место благодаря flex-раскладке выше */ background-image: none; min-height: 0; border-radius: 0; padding: 44px 48px; margin-top: 24px; margin-bottom: 40px; gap: 48px; } .theme-bc .banner-question .info .title, .theme-bc .banner-question .info .title.text { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 32px; font-weight: 700; color: var(--bc-white); border-bottom: none; padding-bottom: 0; } .theme-bc .banner-question .info .subtitle { font-family: var(--bc-ui); font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .82); margin-top: 12px; } .theme-bc .banner-question .form { box-sizing: border-box; background: var(--bc-white); border: 3px solid var(--bc-ink); border-radius: 0; padding: 26px 28px; } .theme-bc .banner-question .form .form-title .title-before { font-family: var(--bc-ui); font-size: 14px; color: var(--bc-muted); } .theme-bc .banner-question .form .form-title .title-main { display: block; font-family: var(--bc-cnd); text-transform: uppercase; font-size: 23px; font-weight: 700; color: var(--bc-ink); margin-top: 4px; } .theme-bc .banner-question .form .form-dscr { font-family: var(--bc-ui); font-size: 14px; color: var(--bc-muted); margin-top: 8px; background-size: 20px; } .theme-bc .banner-question .form .ui-input { height: 48px; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; font-family: var(--bc-ui); font-size: 15px; color: var(--bc-ink); padding: 0 18px; } .theme-bc .banner-question .form .ui-input::placeholder { color: #9A9A9A; } .theme-bc .banner-question .form .ui-input:focus { border-color: var(--bc-accent); outline: none; } .theme-bc .banner-question .form .form-check-label { color: var(--bc-muted); } .theme-bc .banner-question .form .form-footer, .theme-bc .banner-question .form .form-footer a { font-size: 12px; color: var(--bc-muted); } .theme-bc .banner-question .form .form-footer a { color: var(--bc-ink); text-decoration: underline; } /* ---------- Подвал ---------- */ .theme-bc footer { background: var(--bc-ink); color: #9A9A9A; border-top: 3px solid var(--bc-accent); } .theme-bc footer .logo img { filter: brightness(0) invert(1); } .theme-bc .footer-inner { padding-top: 48px; padding-bottom: 32px; } .theme-bc .footer-inner .box-title { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--bc-white); border-bottom: none; padding-bottom: 0; margin-bottom: 14px; } .theme-bc .footer__nav-link, .theme-bc .footer .nav__link, .theme-bc footer a { font-family: var(--bc-ui); color: #9A9A9A; font-size: 14px; } .theme-bc .footer__nav-link:hover, .theme-bc footer a:hover { color: var(--bc-accent); } .theme-bc footer .information, .theme-bc footer .information-links { border-top: 1px solid #262626; color: #6A6A6A; font-size: 12px; } .theme-bc footer .text-link { color: #8A8A8A; } /* ---------- Ссылки в тексте (используется в описании марки и т.п.) ---------- */ .theme-bc a { color: var(--bc-ink); } .theme-bc a:hover { color: var(--bc-accent); } /* ---------- Чекбокс согласия в формах ---------- */ /* Настоящая причина, почему чекбокс был не виден: в общих стилях сайта есть ГЛОБАЛЬНОЕ правило (без привязки к классу) — input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked) { position: absolute; left: -9999px; } Оно рассчитано на паттерн "input сразу за ним sibling label" (кастомный чекбокс рисуется через label:before/:after), но .form-check устроен иначе — input лежит ВНУТРИ label, а не перед ним. В итоге сайт улетал чекбокс за экран (-9999px), а замену (label:before/:after) рисовать было не для чего — чекбокс полностью пропадал. Возвращаем ему обычное положение в потоке. */ .theme-bc .form-check-input:checked, .theme-bc .form-check-input:not(:checked) { position: static; left: auto; } .theme-bc .form-check { display: flex; align-items: flex-start; gap: 8px; } .theme-bc .form-check-input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--bc-ink); } /* ========================================================================= СТРАНИЦА МАРКИ (/auto/{brand}) ========================================================================= */ /* --- Хлебные крошки --- */ .theme-bc #breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 18px 0 0; margin: 0; font-size: 13px; color: var(--bc-muted); } /* Разделитель "/" в родных стилях задан в ДВУХ местах и по-разному: layout.css — через `li a:after` (подключается только на части страниц, у trade-in его нет вовсе — отсюда и "в трейд-ине крошки без слэшей"), general3/general4 — через `li .breadcrumbs__link:after`. Гасим оба и рисуем один свой на уровне `li`, чтобы на всех страницах было одинаково и ровно по одному слэшу. */ .theme-bc .breadcrumbs .inner ul#breadcrumbs li a:after, .theme-bc .breadcrumbs .inner ul#breadcrumbs li .breadcrumbs__link:after { content: none; } .theme-bc #breadcrumbs li:not(:last-child):after { content: '/'; margin-left: 6px; color: var(--bc-muted-2); } /* Типографика ссылок тоже расходилась: размер/цвет/вертикальный паддинг пункта заданы в layout.css через `li a` (страницы без layout.css — trade-in — их не получали) и в general3/4 через `.breadcrumbs__link` (класс мы из разметки убрали). Задаём явно у себя, полной цепочкой селектора, чтобы перебить layout.css на страницах, где он есть. */ .theme-bc .breadcrumbs .inner ul#breadcrumbs li a, .theme-bc .breadcrumbs .inner ul#breadcrumbs li span { font-size: 13px; color: var(--bc-muted); text-decoration: none; padding: 0; } .theme-bc .breadcrumbs__link { color: var(--bc-muted); } .theme-bc .breadcrumbs__link:hover { color: var(--bc-accent); } /* --- Хиро-баннер марки --- */ /* белый текст на светлом небе/облаках на фото сливался — кладём тёмный градиент поверх фото (гуще слева, где текст, прозрачнее справа, где форма и так на своей белой карточке) вместо одного text-shadow */ .theme-bc .page-brand .brand-first { background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.5) 35%, rgba(10, 10, 10, 0.2) 60%, rgba(10, 10, 10, 0) 82%), url('/assets/images/parking.webp'); background-repeat: no-repeat, no-repeat; background-position: center bottom, center bottom; background-size: cover, cover; background-color: var(--bc-tile-bg); border-bottom: 3px solid var(--bc-ink); padding: 40px 0; } .theme-bc .page-brand .brand-first .banner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px; } .theme-bc .page-brand .brand-first .banner .info { flex: 1 1 480px; } .theme-bc .page-brand .brand-first .banner .info .brand-title h1 { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 40px; font-weight: 700; line-height: 1.15; color: var(--bc-white); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } .theme-bc .page-brand .brand-first .banner .info .brand-title h1 span:first-child { display: inline-block; color: var(--bc-accent); margin-bottom: 6px; } .theme-bc .page-brand .brand-first .banner .info .brand-title h1 span:last-child { color: rgba(255, 255, 255, 0.75); } .theme-bc .page-brand .brand-first .banner .info .brand-title img { max-width: 44px; max-height: 44px; object-fit: contain; } /* это не заголовок раздела, а короткая строка-таймер под h1 — глушим капс/жирность, которые глобально навешаны на .page-title */ .theme-bc .page-brand .brand-first .banner .info .page-title { font-family: var(--bc-ui); text-transform: none; font-style: normal; font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); border-bottom: none; padding: 0; margin: 10px 0 26px; } /* .model теперь ссылка на страницу модели — снимаем подчёркивание/цвет ссылки по умолчанию, которые иначе перекрасили бы .title/.price */ .theme-bc .page-brand .brand-first .banner .info .models-banner .model { text-decoration: none; color: inherit; } .theme-bc .page-brand .brand-first .banner .info .models-banner .label { background: var(--bc-accent); border-radius: 0; transition: background .12s ease; } .theme-bc .page-brand .brand-first .banner .info .models-banner .model:hover .label { background: var(--bc-accent-dk); } .theme-bc .page-brand .brand-first .banner .info .models-banner .label span { font-family: var(--bc-ui); } /* "цена от" — показываем всегда, отдельно от бейджа скидки: у части машин в базе не задана price_new, и раньше строка с ценой пропадала совсем */ .theme-bc .page-brand .brand-first .banner .info .models-banner .label .price { font-family: var(--bc-cnd); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); margin-top: 2px; } .theme-bc .page-brand .brand-first .banner .info .models-banner .label:after { border-color: var(--bc-accent) var(--bc-accent) transparent transparent; } /* карточка формы в шапке марки: тот же приём, что и на главной — сайт ставит .banner .form абсолютным позиционированием (top:-20px), из-за чего карточка выпадает из потока; возвращаем обычный поток и оформляем белой карточкой с чёрной рамкой */ .theme-bc .page-brand .brand-first .banner .form { position: static; box-sizing: border-box; width: auto; flex: 0 0 380px; background: var(--bc-white); border: 3px solid var(--bc-ink); border-radius: 0; padding: 26px 28px; } .theme-bc .page-brand .brand-first .banner .form .form-title .title-before { font-family: var(--bc-ui); font-size: 14px; color: var(--bc-muted); } .theme-bc .page-brand .brand-first .banner .form .form-title .title-main { display: block; font-family: var(--bc-cnd); text-transform: uppercase; font-size: 22px; font-weight: 700; color: var(--bc-ink); margin-top: 4px; } .theme-bc .page-brand .brand-first .banner .form form { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; } /* карточка формы тут узкая (380px), в один ряд по 50% "Номер телефона" не помещался (обрезался) — кладём поля друг под другом */ .theme-bc .page-brand .brand-first .banner .form form .form-field:has(input[name="name"]), .theme-bc .page-brand .brand-first .banner .form form .form-field:has(input[name="phone"]) { flex: 1 1 100%; width: 100%; margin: 0; } .theme-bc .page-brand .brand-first .banner .form form .form-check, .theme-bc .page-brand .brand-first .banner .form form .form-field:has(button) { flex: 1 1 100%; width: 100%; margin: 0; } .theme-bc .page-brand .brand-first .banner .form .ui-input { height: 48px; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; color: var(--bc-ink); font-family: var(--bc-ui); font-size: 15px; padding: 0 16px; } .theme-bc .page-brand .brand-first .banner .form .form-check-label { color: var(--bc-muted); } .theme-bc .page-brand .brand-first .banner .form .form-footer, .theme-bc .page-brand .brand-first .banner .form .form-footer a { color: var(--bc-muted); font-size: 12px; } .theme-bc .page-brand .brand-first .banner .form .form-footer a { color: var(--bc-ink); text-decoration: underline; } /* --- Кнопка "Марка в кредит" под шапкой --- */ .theme-bc .page-brand .brand-buttons { position: static; padding: 20px 0 0; } @media (max-width: 767px) { .theme-bc .page-brand .brand-buttons { padding-bottom: 20px; } /* родное brand.css правило .btn-brand:hover сдвигает кнопку через margin-left: calc(3em + 2px) — задумано для десктопного наведения мышью, но на мобильном тап по кнопке тоже триггерит :hover, и margin резко подскакивает с мобильных 0.5% до ~3em — кнопку "дёргает" и ломает раскладку 45%-ных колонок. Отключаем сдвиг на тач-ширинах. */ .theme-bc .page-brand .brand-buttons .container .btn-brand:hover { margin-left: 0.5%; } } /* зелёный акцент вместо чёрного — эта кнопка единственный CTA сразу под шапкой марки, чёрный сливался с остальным чёрно-белым окружением */ .theme-bc .btn-brand { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; background: var(--bc-accent); color: var(--bc-white); font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 14px; } .theme-bc .btn-brand:hover { background: var(--bc-accent-dk); color: var(--bc-white); } /* родная иконка credit-red.svg цветная и не в палитре темы, на чёрной кнопке сливается/спорит с фоном — убираем вместе с зарезервированным под неё отступом (.ico-bg даёт padding-left: 30px) */ .theme-bc .btn-brand .ico-bg { background-image: none !important; padding-left: 0; } /* --- Блок "Получите спецпредложение" --- */ .theme-bc .row-gray.margin-t2-b2 { background: var(--bc-tile-bg); } .theme-bc .banner-max-sale { /* убираем ещё одну фоновую фотографию девушки — тот же приём, что и в блоке обратного звонка на главной */ background-image: none; text-align: center; padding: 48px 24px; border: 2px solid var(--bc-ink); background-color: var(--bc-white); } .theme-bc .banner-max-sale .title { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 26px; font-weight: 700; border-bottom: none; padding-bottom: 0; margin: 0 0 14px; } .theme-bc .banner-max-sale .subtitle { font-family: var(--bc-ui); font-size: 15px; line-height: 1.6; color: var(--bc-muted); width: auto; max-width: 560px; margin: 0 auto; } .theme-bc .banner-max-sale button { margin-top: 26px; } /* --- Описание марки (announcement / content) --- */ .theme-bc .text-content { font-family: var(--bc-ui); color: var(--bc-ink); line-height: 1.7; } .theme-bc .text-content h2, .theme-bc .text-content h2:before, .theme-bc .text-content h2:after { /* тот же сброс родной иконки/красной линии, что и у остальных заголовков темы */ font-family: var(--bc-cnd); text-transform: uppercase; } .theme-bc .text-content h2:before, .theme-bc .text-content h2:after { display: none; } .theme-bc .text-content h2 { font-size: 26px; font-weight: 700; padding: 0; margin: 32px 0 16px; } .theme-bc .archive-description { font-size: 16px; } /* ========================================================================= СТРАНИЦА МОДЕЛИ (/auto/{brand}/{car}) ========================================================================= */ /* --- Шапка модели: заголовок, миниколонка ссылок, фото, форма, чипы --- */ .theme-bc .model-title h1.page-title { font-size: 32px; margin: 0; padding: 0; border-bottom: none; } .theme-bc .row-top { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 20px; } .theme-bc .model-nav { /* родное правило — display:flex без flex-direction, то есть строкой. В узкой 200px-колонке длинные пункты ("Технические характеристики") не помещались в свою ширину и наезжали на соседние — превращаем в вертикальный список */ flex-direction: column; flex-wrap: nowrap; margin: 0 0 20px; gap: 8px; } .theme-bc .model-nav .item { width: 100%; } /* было просто текстом без обводки — не читалось как кликабельный пункт. Оформляем как остальные чипы темы: рамка + заливка при наведении */ .theme-bc .model-nav .item a { display: block; width: 100%; box-sizing: border-box; font-family: var(--bc-ui); font-size: 13px; font-weight: 500; color: var(--bc-ink); text-decoration: none; background-image: none !important; border: 2px solid var(--bc-ink); padding: 10px 14px; } .theme-bc .model-nav .item a:hover { background: var(--bc-ink); color: var(--bc-white); } /* родное правило .model-main .row-main .col-second .model-colors (4 класса) даёт 5% паддинга сверху — убираем */ .theme-bc .model-main .row-main .col-second .model-colors { padding-top: 0; } .theme-bc .model-colors #carImageContainer { /* родное transform:scale(1.2) визуально раздувает картинку на 20%, но не увеличивает место, которое она резервирует в потоке — увеличенная рамка наезжала на подписи цвета сразу под ней */ transform: none; margin: 0 auto 20px; width: 100%; } .theme-bc .model-main .row-main .col-second .model-colors img { width: 90%; height: auto; } /* #jsCompareColorContainer — position:absolute БЕЗ явного left в родных стилях: браузер сам вычисляет "статическую" позицию для абсолютного блочного элемента, и она не обязана совпадать с центрированием соседней инлайновой картинки через text-align на общем родителе. На практике это и давало сдвиг влево — контейнер сравнения садился к левому краю, а не вровень с центром основной картинки. Фиксируем left:0 явно, чтобы контейнер гарантированно совпадал с #carImageContainer (та же система координат, что и у слайдера-ползунка ниже, который тоже считает от left:0). */ .theme-bc .model-colors #jsCompareColorContainer { left: 0; } /* картинка сравнения вынута из потока: её left/top/width проставляет JS по фактическим координатам основной картинки (см. syncCompareImageWidth в components/car/info.blade.php). В потоке она зависела бы от ширины родителя, а та у слайдера постоянно меняется при перетаскивании. */ .theme-bc .model-colors #jsCompareColorImage { position: absolute; top: 0; left: 0; height: auto; margin: 0; display: block; } /* .color-tmb (обёртка кружков-свотчей) нигде в стилях сайта не описана — без отступа сверху ряд свотчей стоит вплотную к подписи "Цвет: ..." */ .theme-bc .color-tmb { margin-top: 5px; } .theme-bc .model-colors .colorbutton { border-radius: 0; border: 2px solid var(--bc-ink); } .theme-bc .model-colors .colorbutton.active { border-color: var(--bc-accent); box-shadow: none; } .theme-bc .model-colors #jsCompareColorToggleButton { border-radius: 0; border: 2px solid var(--bc-ink); } /* ползунок сравнения цветов (перетаскиваемый кружок посреди фото) — красный #cc2128 из родных стилей не в палитре темы */ .theme-bc .model-colors #jsCompareSliderContainer div { background: linear-gradient(180deg, rgba(10, 10, 10, 0), var(--bc-ink) 23.44%, var(--bc-ink) 75.52%, rgba(10, 10, 10, 0)); } .theme-bc .model-colors #jsCompareSliderContainer span { border-radius: 0; background-color: var(--bc-ink); } /* карточка заявки в правой колонке — тот же приём, что у banner-credit/-question: белая карточка с чёрной рамкой вместо родного серого градиента */ .theme-bc .model-form { box-sizing: border-box; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; box-shadow: none; padding: 24px; } .theme-bc .model-form .form-title .ico-time { font-family: var(--bc-ui); font-style: normal; font-size: 13px; color: var(--bc-muted); background-image: none !important; padding-left: 0; } .theme-bc .model-form .form-title .price { font-family: var(--bc-cnd); font-size: 32px; font-weight: 700; color: var(--bc-accent); margin: 6px 0 10px; } .theme-bc .model-form .form-dscr { font-family: var(--bc-ui); font-size: 14px; font-weight: 400; color: var(--bc-muted); margin-bottom: 14px; } .theme-bc .model-form form .form-field .btn-submit { background: var(--bc-ink); border-radius: 0; font-family: var(--bc-ui); } .theme-bc .model-form form .form-field .btn-submit:hover { background: var(--bc-accent); } .theme-bc .model-form .form-footer, .theme-bc .model-form .form-footer a { color: var(--bc-muted); } /* на мобильном (≤575px) родной .model-main .row-main .col-third .model-form (4 класса) обнуляет padding — эта карточка теперь с рамкой, а не серым градиентом без границ, поэтому padding:0 прижимает всё содержимое вплотную к рамке. Перебиваем тем же путём селектора + .theme-bc. */ @media (max-width: 575px) { .theme-bc .model-main .row-main .col-third .model-form { padding: 20px; } } /* полоска быстрых характеристик под шапкой — превращаем в чипы */ .theme-bc .tth-items { justify-content: flex-start; gap: 10px; border-top: 1px solid #E4E4E0; border-bottom: 1px solid #E4E4E0; padding: 16px 0; margin: 20px 0; } .theme-bc .tth-items .item { width: auto; flex: 0 0 auto; padding: 0 20px 0 0; text-align: left; } .theme-bc .tth-items .item .ico-bg { display: block; font-family: var(--bc-ui); font-size: 12px; color: var(--bc-muted); background-image: none !important; padding-left: 0; } .theme-bc .tth-items .item .value { font-family: var(--bc-cnd); font-size: 17px; font-weight: 600; color: var(--bc-ink); } /* нижний ряд: было 5 колонок (2 из них пустые распорки) — кнопку "Тест-драйв" объединили с оплатой в кредит в одну колонку (кнопка сверху, цена снизу), поэтому вместо fixed 20%-колонок с space-evenly используем обычный ряд с отступом слева направо */ .theme-bc .model-buttons { justify-content: space-between; } .theme-bc .model-buttons .item { width: auto; text-align: left; } .theme-bc .model-buttons .item--testdrive-credit { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .theme-bc .model-buttons .item label { font-family: var(--bc-ui); font-size: 13px; color: var(--bc-muted); } .theme-bc .model-buttons .item .eq-value { font-family: var(--bc-cnd); color: var(--bc-ink); } .theme-bc .model-buttons .item .credit-price { font-family: var(--bc-cnd); color: var(--bc-accent); } .theme-bc .model-buttons .item .btn { background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; box-shadow: none; color: var(--bc-ink); font-family: var(--bc-ui); text-align: center; } /* родная иконка testdrive.svg цветная, не из палитры темы — убираем вместе с зарезервированным под неё отступом (та же история, что и с иконками credit/discount на кнопках выше) */ .theme-bc .model-buttons .item .btn .ico-bg { background-image: none !important; padding-left: 0; } .theme-bc .model-buttons .item .btn:hover { background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-white); } /* --- Таблица комплектаций и цен --- */ .theme-bc #ModelComplectationTable .complectation-table { border: 2px solid var(--bc-ink); border-collapse: collapse; } .theme-bc #ModelComplectationTable .complectation-table thead { background: var(--bc-ink); } .theme-bc #ModelComplectationTable .complectation-table thead th { font-family: var(--bc-ui); font-weight: 600; color: var(--bc-white); } .theme-bc #ModelComplectationTable .complectation-table tbody tr { border-bottom: 1px solid #E4E4E0; } .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row:hover td { background: var(--bc-tile-bg); } .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .name { font-family: var(--bc-cnd); font-weight: 600; color: var(--bc-ink); } .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .price span, .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .discount-price span { font-family: var(--bc-cnd); font-weight: 700; } .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .discount-price span { color: var(--bc-accent); } .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .discount span.red, .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .discount .bold.red { color: var(--bc-gold); font-weight: 600; } /* Если у комплектации нет скидки (или все чекбоксы кредит/утилизация/ трейд-ин сняты и пересчёт дал 0 — см. data-discount в JS ниже), колонка "Выгода" не нужна, а старая цена не должна быть зачёркнута — она равна новой, зачёркивать нечего. На десктопе (>575px) это настоящая — display:none у одной ячейки в строке сдвигает остальные её ячейки влево, и "Новая цена" визуально съезжает под заголовок "Выгода" у соседних строк. Поэтому тут не убираем ячейку из потока, а просто прячем её содержимое (visibility:hidden сохраняет её ширину/место — столбцы остаются на месте). На мобильном (≤575px) thead скрыт, а tbody превращается в flex-карточки (см. model.css) — там display:none безопасен и именно так скрывал ряд изначально. */ .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row[data-discount="0"] td.discount, .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row[data-discount="0"] td.discount-price { visibility: hidden; } @media (max-width: 575px) { .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row[data-discount="0"] td.discount, .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row[data-discount="0"] td.discount-price { display: none; } } .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row[data-discount="0"] td.price { text-decoration: none; } .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .btn-row-credit { background: var(--bc-accent); border-radius: 0; color: var(--bc-white); font-family: var(--bc-ui); text-align: center; } /* текст лежит в — у него свой явный color:#555 (серый) в родных стилях, он выигрывает у унаследованного белого. А сама иконка — серый SVG (credit-color-gray.svg), на чёрном фоне практически не видна. Убираем иконку и красим текст явно в белый. */ .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .btn-row-credit .ico-bg { color: var(--bc-white); background-image: none !important; padding-left: 0; } .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .btn-row-credit:hover { background: var(--bc-accent-dk); } .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row .btn-row-credit:hover .ico-bg { color: var(--bc-white); } /* additional.css красит эту же кнопку в красный (#b71c1c) отдельным правилом именно при наведении на СТРОКУ таблицы (не на саму кнопку) — я его пропустил раньше, оно спрятано в общем списке селекторов вместе с .btn-submit. У него больше элементов в цепочке (tbody+td), поэтому оно специфичнее моего обычного правила и побеждало на ховере строки. */ .theme-bc #ModelComplectationTable .complectation-table tbody .complectation-row:hover td .btn-row-credit { background: var(--bc-accent); } /* переключатели "Кредит / Утилизация / Trade-in" над таблицей */ .theme-bc #ModelComplectationTable .car-sale-checkboxes .box { background: var(--bc-white); border: none; border-radius: 0; } .theme-bc #ModelComplectationTable .car-sale-checkboxes .box .option .name .text span:first-child { font-family: var(--bc-ui); font-weight: 600; color: var(--bc-ink); } .theme-bc #ModelComplectationTable .car-sale-checkboxes .box .return .value .red { color: var(--bc-accent); font-weight: 700; } /* --- Варианты комплектаций (карточки-слайдер) --- */ .theme-bc .eq_diff-items .item .inner { border: 2px solid var(--bc-ink); border-radius: 0; background: var(--bc-white); } .theme-bc .eq_diff-items .item .top .group .title { font-family: var(--bc-cnd); font-weight: 600; color: var(--bc-ink); } .theme-bc .eq_diff-items .item .top .group .price span { font-family: var(--bc-cnd); font-weight: 700; color: var(--bc-accent); } /* --- Технические характеристики / сравнение комплектаций --- */ .theme-bc .model-tech-tabs-head { border-bottom: 3px solid var(--bc-ink); gap: 4px; } .theme-bc .model-tech-tabs-head .ui-tabs-anchor h2 { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 16px; font-weight: 700; color: var(--bc-muted); padding: 12px 18px; } .theme-bc .model-tech-tabs-head .js-tech-tab-link.active .ui-tabs-anchor h2 { color: var(--bc-ink); background: var(--bc-tile-bg); } .theme-bc .model-tth-table { border: 2px solid var(--bc-ink); border-top: none; } .theme-bc .model-tth-table .tth-table-body thead tr th { background: var(--bc-ink); color: var(--bc-white); font-family: var(--bc-ui); } .theme-bc .model-tth-table .tth-table-body tbody tr th { font-family: var(--bc-ui); color: var(--bc-muted); font-weight: 500; } .theme-bc .model-tth-table .tth-table-body tbody tr td { font-family: var(--bc-cnd); font-weight: 600; color: var(--bc-ink); } /* .ico (ячейки сравнения комплектаций с +/-) сайт прячет текст через color: hsla(0,0%,100%,0), оставляя только фоновую SVG-иконку (plus-green.svg / minus-gray.svg). У родного td.ico и моего правила выше одинаковая специфичность, моё грузится позже и побеждало, снова показывая текст "+"/"-" поверх иконки — возвращаем прозрачность именно для .ico */ .theme-bc .model-tth-table .tth-table-body tbody tr td.ico { color: transparent; } /* "Выделить разные опции": JS вешает класс .jsSpecCompareHighlight на строку, а в стилях сайта есть #jsSpecCompareTabs .jsSpecCompareHighlight с ID в селекторе — она бьёт любое моё правило без ID, поэтому подсветка возвращалась синей (#0074bd), возвращала видимый текст "+"/"-" (у него нет своего цвета, наследует от строки white) и красила подпись опции (

) в унаследованный белый, который у меня же перебит на серый — серый на синем почти не читался. Перебиваем тем же ID. */ .theme-bc #jsSpecCompareTabs .jsSpecCompareHighlight { background: rgba(30, 122, 76, 0.22); color: var(--bc-ink); } .theme-bc #jsSpecCompareTabs .jsSpecCompareHighlight th { color: var(--bc-ink); } .theme-bc #jsSpecCompareTabs .jsSpecCompareHighlight td.ico { color: transparent; } .theme-bc .model-tth-table .tth-table-head .tth-table-items .item label { font-family: var(--bc-ui); font-size: 13px; } .theme-bc .model-tth-table .tth-table-head .show-diff { margin-bottom: 16px; } /* --- Фото --- */ .theme-bc #ModelPhotos .title-group .title { display: inline-block; margin: 0; border-bottom: none; } .theme-bc #ModelPhotos .title-group .title__carname { font-family: var(--bc-ui); color: var(--bc-muted); margin-left: 12px; } .theme-bc #ModelPhotos .photos-items .item a { border: 2px solid var(--bc-ink); border-radius: 0; background: var(--bc-tile-bg); } /* --- Гарантия после покупки --- */ .theme-bc .guarantees .title { margin-bottom: 24px; } .theme-bc .guarantees-items { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin: 0 0 32px; } .theme-bc .guarantees-items li { flex: 1 1 220px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 16px; border: 2px solid var(--bc-ink); } .theme-bc .guarantees-items li .image { display: flex; align-items: baseline; gap: 4px; font-family: var(--bc-cnd); color: var(--bc-accent); } .theme-bc .guarantees-items li .image span:first-child { font-size: 36px; font-weight: 700; } .theme-bc .guarantees-items li .image span:last-child { font-size: 14px; color: var(--bc-muted); } .theme-bc .guarantees-items li .title { font-family: var(--bc-ui); font-size: 14px; font-weight: 600; color: var(--bc-ink); margin: 0; } .theme-bc .guarantees .text-content .title { font-family: var(--bc-ui); text-transform: none; font-size: 16px; font-weight: 600; border-bottom: none; padding: 0; margin: 0 0 8px; } .theme-bc .guarantees .text-content .text { color: var(--bc-muted); line-height: 1.6; } /* --- Баннер "зимняя резина в подарок" --- */ .theme-bc .banner-winter-tire { background: var(--bc-tile-bg); border: 2px solid var(--bc-ink); max-height: none; padding: 24px; } .theme-bc .banner-winter-tire .container .info .title { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 22px; font-weight: 700; color: var(--bc-ink); } .theme-bc .banner-winter-tire .container .info .title .red { color: var(--bc-accent); } .theme-bc .banner-winter-tire .container .info .description { color: var(--bc-muted); } /* .container .image в родных стилях зажат в max-height + overflow:hidden — рассчитано на узкую декоративную полоску сбоку. На мобильном (≤575px) .info и .image оба становятся шириной 100% и встают друг под другом, но max-height у .image остаётся мизерным (70px), и overflow:hidden обрезает картинку почти целиком. Убираем ограничение по высоте — пусть фото разворачивается на всю свою ширину без обрезки. */ .theme-bc .banner-winter-tire .container .image { max-height: none; overflow: visible; } @media (max-width: 575px) { .theme-bc .banner-winter-tire .container .image { max-height: none; } } /* --- кнопка "Показать ещё" (марка в наличии, подбор по цене...) --- */ .theme-bc .jsShowMore.btn-more, .theme-bc .btn-more { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; margin-top: 16px; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; color: var(--bc-ink); font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 14px; } .theme-bc .jsShowMore.btn-more:hover, .theme-bc .btn-more:hover { background: var(--bc-ink); color: var(--bc-white); } /* --- Переключатели "Кредит / Утилизация / Trade-in" над таблицей комплектаций --- родная дорожка: серая выключена / зелёная включена. Делаем цвет включения/ выключения однозначным — зелёный акцент темы / красный. */ .theme-bc .switcher { background-color: #C0392B; } .theme-bc input:checked + .switcher { background-color: var(--bc-accent); } /* --- Полоса прокрутки (Chrome/Edge/Safari) --- */ .theme-bc::-webkit-scrollbar-thumb { background: var(--bc-accent); } .theme-bc::-webkit-scrollbar-thumb:window-inactive { background: var(--bc-accent-dk); } .theme-bc .hits::-webkit-scrollbar-thumb, .theme-bc .hits::-webkit-scrollbar-thumb:window-inactive { background: var(--bc-accent); } /* ========================================================================= ВСПЛЫВАЮЩИЕ ФОРМЫ (.s-modal) — общий компонент для всех попапов заявок: "Оставьте заявку", кредитный калькулятор, скидка, бронирование и т.д. Один набор классов используется во всех модалках сайта, поэтому правим разом всё под .theme-bc — те же приёмы, что и в banner-credit/model-form: белая карточка с чёрной рамкой вместо серого скруглённого попапа. ========================================================================= */ .theme-bc .s-modal { box-sizing: border-box; background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; box-shadow: none; } .theme-bc .s-modal .modal-head .title { font-family: var(--bc-cnd); text-transform: uppercase; font-weight: 700; letter-spacing: 0.02em; color: var(--bc-ink); } .theme-bc .s-modal .modal-head .subtitle, .theme-bc .s-modal .modal-head .description { font-family: var(--bc-ui); font-weight: 400; color: var(--bc-muted); } /* --- список преимуществ ("Гарантия лучшей цены" и т.д.) --- родные иконки — цветные картинки-фон, в общей ч/б стилистике смотрятся инородно, поэтому убираем картинку и оформляем как список с чёрным маркером-квадратом, как акцентные списки в других блоках темы. */ .theme-bc .s-modal .bonus-inform { border-top: 1px solid #E4E4E0; margin-top: 6px; padding-top: 6px; } .theme-bc .s-modal .bonus-inform > div { border-bottom: 1px solid #E4E4E0; } .theme-bc .s-modal .bonus-inform > div:last-child { border-bottom: none; } .theme-bc .s-modal .bonus-inform > div span { display: flex; align-items: center; gap: 10px; background-image: none !important; padding: 10px 0; font-family: var(--bc-ui); font-weight: 500; font-size: 14px; color: var(--bc-ink); } .theme-bc .s-modal .bonus-inform > div span:before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; background: var(--bc-accent); } /* --- карточка авто внутри модалки (картинка + цена) --- */ .theme-bc .s-modal .modal-body .modal-card, .theme-bc .s-modal .modal-body .modal-card-discount { border: 1px solid #E4E4E0; padding: 14px; } .theme-bc .s-modal .modal-body .modal-card .info .name { font-family: var(--bc-ui); font-weight: 600; color: var(--bc-ink); } .theme-bc .s-modal .modal-body .modal-card .info .price .new-price, .theme-bc .s-modal .modal-body .modal-card-discount .info .price .new-price { font-family: var(--bc-cnd); color: var(--bc-accent); } .theme-bc .s-modal .modal-body .modal-card-discount .info .ico-bg { font-family: var(--bc-cnd); color: var(--bc-accent); } /* --- поля формы --- */ .theme-bc .s-modal .modal-form .ui-input { border: 2px solid var(--bc-ink); border-radius: 0; background: var(--bc-white); font-family: var(--bc-ui); } .theme-bc .s-modal .modal-form .ui-input:focus, .theme-bc .s-modal .modal-form .ui-input:hover, .theme-bc .s-modal .modal-form .ui-input:active { border-color: var(--bc-accent); } .theme-bc .s-modal .modal-form .ui-input::placeholder { color: var(--bc-muted); } /* кнопка отправки — та же чёрная-заливка/зелёная-при-наведении логика, что у model-form .btn-submit и banner .btn-submit */ .theme-bc .s-modal .modal-form .btn-card.btn-popup-send { background: var(--bc-ink); border: none; border-radius: 0; box-shadow: none; font-family: var(--bc-ui); text-transform: uppercase; letter-spacing: 0.03em; } .theme-bc .s-modal .modal-form .btn-card.btn-popup-send:hover { background: var(--bc-accent); border: none; } .theme-bc .s-modal .modal-form .form-footer, .theme-bc .s-modal .modal-form .form-footer a { color: var(--bc-muted-2); } /* ========================================================================= СТРАНИЦА КРЕДИТА (/credit) ========================================================================= */ /* --- верхний баннер "Заполните заявку..." (3 колонки) --- родной вид: зелёная плашка с закруглёнными углами и декоративными svg- клиньями по бокам — переводим на белую карточку с чёрной рамкой. */ .theme-bc .WidgetThreePartBanner { background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; } .theme-bc .WidgetThreePartBanner_image:before, .theme-bc .WidgetThreePartBanner_right:before { display: none; } .theme-bc .WidgetThreePartBanner_center { background: var(--bc-tile-bg); } .theme-bc .WidgetThreePartBanner_center span { font-family: var(--bc-ui); color: var(--bc-ink); } .theme-bc .WidgetThreePartBanner_right { font-family: var(--bc-ui); color: var(--bc-ink); } /* --- форма расчёта + список преимуществ --- */ .theme-bc .credit_left { border-right: 2px solid var(--bc-ink); padding-right: 30px; } @media (max-width: 767px) { .theme-bc .credit_left { border-right: none; border-bottom: 2px solid var(--bc-ink); padding-right: 0; padding-bottom: 30px; margin-bottom: 30px; } } /* .creditFormStepTitle рассчитан на иконку слева (.creditFormStepTitleBox, 60px паддинг у текста), но в этой форме иконки нет — просто заголовок. Оформляем как обычный подзаголовок темы, без родной красной рамки и пустого отступа под несуществующую иконку. */ .theme-bc .credit_left .creditFormStepTitle { border: none; height: auto; line-height: normal; background: transparent; margin-bottom: 20px; } .theme-bc .credit_left .creditFormStepTitle > span { padding-left: 0; font-family: var(--bc-cnd); text-transform: uppercase; font-weight: 700; font-size: 20px; color: var(--bc-ink); } .theme-bc .credit_form_step .ui-input { border: 2px solid var(--bc-ink); border-radius: 0; background: var(--bc-white); font-family: var(--bc-ui); } .theme-bc .credit_form_step .ui-input:focus, .theme-bc .credit_form_step .ui-input:hover, .theme-bc .credit_form_step .ui-input:active { border-color: var(--bc-accent); outline: none; } .theme-bc .credit_form_step .ui-input::placeholder { color: var(--bc-muted); } /* у полей ввода родной margin-bottom:8px (credit.css .ui-input), а у чекбокса согласия своего отступа нет вообще (класса .ui-input у него нет) — он вплотную упирался в кнопку "Получить расчёт" сразу под ним. */ .theme-bc .credit_form_step .form-check { margin-bottom: 16px; } .theme-bc .credit_form_step button.btn-callback { background: var(--bc-ink); border: none; border-radius: 0; box-shadow: none; font-family: var(--bc-ui); text-transform: uppercase; letter-spacing: 0.03em; } .theme-bc .credit_form_step button.btn-callback:hover { background: var(--bc-accent); box-shadow: none; } .theme-bc .credit_form_step .form-footer, .theme-bc .credit_form_step .form-footer a { color: var(--bc-muted-2); } .theme-bc .credit_right .box-title { font-size: 20px; } .theme-bc .dividing-title { font-family: var(--bc-ui); color: var(--bc-muted); letter-spacing: 0.04em; } .theme-bc .dividing-title:after { background: #E4E4E0; } /* карточки преимуществ ("Ставка от N%", "0% взнос" и т.д.) — были градиентные скруглённые плашки, делаем плоскими бело-чёрными карточками с чёрной рамкой — тот же приём, что у остальных тайлов темы (gos-credit-programs, bonus-items и т.д.), а не еле заметная серая линия. */ .theme-bc .benefit-items .benefit-item .box { background: var(--bc-white); border: 2px solid var(--bc-ink); border-radius: 0; padding: 16px 10px; transition: border-color .12s ease; } .theme-bc .benefit-items .benefit-item .box:hover { border-color: var(--bc-accent); } .theme-bc .benefit-items .benefit-item span:last-child { font-family: var(--bc-ui); color: var(--bc-accent); font-weight: 700; font-size: 14px; line-height: 1.3; } /* иконки-картинки (vznos.svg, sert.svg, 8year.svg...) залиты синим "родным" цветом — не background-image, а настоящий , поэтому background-image: none тут не сработает. Перекрашиваем через filter: brightness(0) — любой закрашенный svg/png становится чёрным силуэтом, альфа-канал (прозрачность) сохраняется. */ .theme-bc .benefit-items .benefit-item span:first-child img { filter: brightness(0) saturate(100%); } /* родной span:first-child — flex-контейнер 32x32 без justify/align-items, поэтому img (у каждой svg свои пропорции) сидит внутри не по центру — отсюда и "сдвиг" между иконкой и текстом от карточки к карточке. Центрируем сам контейнер и вписываем картинку в него без искажений. */ .theme-bc .benefit-items .benefit-item span:first-child { justify-content: center; align-items: center; margin: 0 auto; } .theme-bc .benefit-items .benefit-item span:first-child img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .theme-bc .benefit-items .benefit-item .box { text-align: center; } /* --- список банков-партнёров --- рамка/фон уже заданы выше общим правилом .bank-items .bank-item .link (border: 2px solid var(--bc-ink)) — тут раньше был дублирующий rule с тонкой серой 1px рамкой, который побеждал по порядку файла при равной специфичности и на деле перекрашивал рамку в серую. Просто снимаем тень. */ .theme-bc .bank-items .bank-item .link { box-shadow: none; } /* --- условия кредита/рассрочки (2 колонки текста) --- */ .theme-bc .flex-2column > .box { background: var(--bc-white); border: 2px solid var(--bc-ink); padding: 24px; box-sizing: border-box; } .theme-bc .flex-2column .title { font-size: 22px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--bc-ink); } .theme-bc .flex-2column .title.text { font-size: 17px; margin-top: 20px; border-bottom: none; padding-bottom: 0; } /* родной чек-маркер (sea-check.svg) цветной и не вписывается в ч/б сетку — заменяем на акцентный квадрат, как в остальных списках темы */ .theme-bc ul.decor_list { padding-left: 0; list-style: none; } .theme-bc ul.decor_list li { list-style-image: none; position: relative; padding-left: 22px; font-family: var(--bc-ui); color: var(--bc-ink); } .theme-bc ul.decor_list li:before { content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: var(--bc-accent); } .theme-bc .credit-attention-list { padding-left: 0; list-style: none; } .theme-bc .credit-attention-list li { position: relative; padding-left: 22px; margin-bottom: 4px; } .theme-bc .credit-attention-list li:before { content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: var(--bc-ink); } /* "Вы всегда можете приобрести у нас авто за наличные со скидкой!" — родной класс .red красит текст в красный, в теме это акцентный зелёный */ .theme-bc .credit-attention-list + p .red { color: var(--bc-accent); font-weight: 600; } /* ссылка-телефон ("+7 (495)...") — родной .text-content .text-link тоже красный (#b71c1c), перекрашиваем в акцент темы */ .theme-bc .text-content .text-link { color: var(--bc-accent); } /* --- государственные программы --- */ .theme-bc .gos-credit-programs .item a { border: 2px solid var(--bc-ink); border-radius: 0; } .theme-bc .gos-credit-programs .item a span { font-family: var(--bc-cnd); text-transform: uppercase; font-weight: 700; color: var(--bc-ink); } .theme-bc .gos-credit-programs .item:hover span { color: var(--bc-accent); } .theme-bc .gos-credit-programs .item a p { font-family: var(--bc-ui); color: var(--bc-muted); } /* ========================================================================= СТРАНИЦА ГОСПРОГРАММЫ (/credit/{slug}) — /credit/pervyj-avtomobil-2022 и т.д. Текстовая страница на базе .text-content: буквица и подзаголовки перед списками были в фирменном сайтовом красном — переводим в акцент темы. Заголовок, decor_list и .text-link уже подхвачены общими правилами выше. ========================================================================= */ .theme-bc .first-letter p:first-child:first-letter { color: var(--bc-accent); font-family: var(--bc-cnd); } .theme-bc .text-content p.pre-ul { font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; font-size: 15px; color: var(--bc-ink); margin-top: 24px; } /* ========================================================================= СТРАНИЦЫ ПОДБОРА ПО СТРАНЕ/ТИПУ КУЗОВА/ЦЕНЕ (/country/{slug} и т.п.) У этих страниц простой баннер .brand-first .banner .info .brand-title — в отличие от страницы марки, он нигде не завёрнут в .page-brand и в родных стилях сайта вообще НЕ оформлен (это не баг темы — h1 тут голый и на исходном дизайне сайта тоже). Оформляем как обычный .page-title темы. */ .theme-bc .brand-first .banner .info .brand-title h1 { font-family: var(--bc-cnd); text-transform: uppercase; font-size: 40px; font-weight: 700; line-height: 1.2; color: var(--bc-ink); margin: 0 0 22px; padding-bottom: 14px; border-bottom: 3px solid var(--bc-ink); } @media (max-width: 575px) { /* без явного line-height строки при переносе на мобильном (два слова на 40px капсом почти всегда не влезают в одну строку) стояли слишком плотно и визуально налезали друг на друга */ .theme-bc .brand-first .banner .info .brand-title h1 { font-size: 28px; line-height: 1.3; } } .theme-bc .title-flex a { font-family: var(--bc-ui); color: var(--bc-muted); } .theme-bc .title-flex a:hover { color: var(--bc-accent); } /* ========================================================================= /auto, /catalog — список моделей по маркам (components/catalog/car-list) Десятки брендов подряд, у каждого свой заголовок + карточки — без визуального разделения между ними страница читалась как один бесконечный повторяющийся блок. Добавляем логотип и счётчик моделей в заголовок, разделительную линию между брендами и лимит в 4 карточки на бренд (остальное — по кнопке). */ .theme-bc .brand-list + .brand-list { margin-top: 48px; padding-top: 48px; border-top: 2px solid var(--bc-ink); } .theme-bc .brand-list__head { align-items: center; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 3px solid var(--bc-ink); } /* .title заворачивается в .brand-list__heading — родное правило ".container > .title" (прямой потомок) сюда больше не попадает, рамку/отступ переносим на весь заголовочный ряд выше, здесь только сброс размера под компоновку с логотипом и счётчиком */ .theme-bc .brand-list__heading { display: flex; align-items: center; gap: 12px; } .theme-bc .brand-list__heading .title { margin: 0; padding: 0; border: none; font-size: 24px; } .theme-bc .brand-list__logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 2px solid var(--bc-ink); box-sizing: border-box; background: var(--bc-white); } .theme-bc .brand-list__logo img { max-width: 26px; max-height: 20px; object-fit: contain; } .theme-bc .brand-list__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; background: var(--bc-tile-bg); color: var(--bc-muted); font-family: var(--bc-ui); font-size: 12px; font-weight: 700; } @media (max-width: 575px) { .theme-bc .brand-list__head { flex-wrap: wrap; gap: 10px; } } /* ========================================================================= КАРТА САЙТА (/karta-sajta) Блоки .flex-2column .box, .decor_list и заголовки уже подхвачены общими правилами темы. Отдельно нужен вложенный список программ под "Автокредит" (ul.children) — у него нет ни decor_list, ни какого-либо маркера вовсе. ========================================================================= */ .theme-bc .sitemap-list .children { list-style: none; padding-left: 18px; margin: 6px 0 0; } .theme-bc .sitemap-list .children li { position: relative; padding-left: 16px; } .theme-bc .sitemap-list .children li:before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--bc-muted-2); } .theme-bc .sitemap-list a { color: var(--bc-ink); font-family: var(--bc-ui); } .theme-bc .sitemap-list a:hover { color: var(--bc-accent); } /* ========================================================================= СТРАНИЦА КОНТАКТОВ (/contacts) ========================================================================= */ .theme-bc .contact-page { color: var(--bc-ink); } /* margin на 25%-ных колонках ломает 4-в-ряд (та же история, что и с bonus-items на странице кредита: margin добавляется СВЕРХ ширины, а не вместо неё) — считаем зазор через gap на родителе и вычитаем его долю из width, а не добавляем margin поверх фиксированных 25%/50%/100%. */ .theme-bc .contact-page .info { gap: 16px; } .theme-bc .contact-page .info .box { border: 2px solid var(--bc-ink); box-sizing: border-box; margin: 0; width: calc(25% - 12px); } @media (max-width: 767px) { .theme-bc .contact-page .info .box { width: calc(50% - 8px); } } @media (max-width: 575px) { .theme-bc .contact-page .info .box { width: 100%; } } .theme-bc .contact-page .info .box > div { font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; font-size: 14px; color: var(--bc-muted); padding-bottom: 0; } .theme-bc .contact-page .info .box > p, .theme-bc .contact-page .info a { font-family: var(--bc-ui); font-weight: 600; color: var(--bc-ink); } .theme-bc .contact-page .info a:hover { color: var(--bc-accent); } .theme-bc .contact-page .info .phones p span { color: var(--bc-muted); } /* карта — у родного сайта нет ни одного правила на .ya-map, без явной высоты контейнер Яндекс.Карт схлопывается в 0px и карта не видна вовсе */ .theme-bc .ya-map { height: 420px; border: 2px solid var(--bc-ink); margin: 24px 0; } .theme-bc .contact-page .travel .page-title { font-size: 28px; margin-top: 32px; } /* ========================================================================= СТРАНИЦА ОБМЕНА АВТО (/trade-in) Собрана на другом наборе классов, чем весь остальной сайт (BEM + Bootstrap-утилиты вроде .mb-5/.text-uppercase/.btn-primary) — их стилей нигде в проекте не было подключено вовсе (файл, где они были описаны когда-то, public/css/style.css, ни разу не заявлен в layout), так что страница до этого рендерилась совсем без оформления. Грузить тот файл целиком опасно — это полный Bootstrap-ресет, конфликтующий с .container/.btn/формами по всему остальному сайту. Поэтому пишем свои правила под те же классы, в стилистике темы, только для .theme-bc. ========================================================================= */ /* --- утилити-классы Bootstrap, которых нет нигде в стилях сайта --- */ .theme-bc .my-5 { margin-top: 48px; margin-bottom: 48px; } .theme-bc .mb-5 { margin-bottom: 48px; } .theme-bc .mb-4 { margin-bottom: 24px; } .theme-bc .mb-0 { margin-bottom: 0; } .theme-bc .mt-1 { margin-top: 4px; } .theme-bc .py-4 { padding-top: 24px; padding-bottom: 24px; } .theme-bc .small { font-size: 13px; } .theme-bc .text-uppercase { text-transform: uppercase; } .theme-bc .fw-bold { font-weight: 700; } .theme-bc .text-nowrap { white-space: nowrap; } .theme-bc .w-100 { width: 100%; } .theme-bc .align-self-end { align-self: flex-end; } .theme-bc .text-black { color: var(--bc-ink); } .theme-bc .text-gray { color: var(--bc-muted); } .theme-bc .text-primary { color: var(--bc-accent); } .theme-bc .h3 { font-size: 28px; } .theme-bc .h5 { font-size: 20px; } .theme-bc .h6 { font-size: 16px; } .theme-bc .object-fit-contain { object-fit: contain; } .theme-bc .ratio { position: relative; width: 100%; } .theme-bc .ratio-16x9 { aspect-ratio: 16 / 9; } .theme-bc .ratio > img { width: 100%; height: 100%; } /* --- кнопки --- */ .theme-bc .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--bc-ink); border-radius: 0; font-family: var(--bc-cnd); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 14px; padding: 0 24px; height: 48px; text-decoration: none; cursor: pointer; background: var(--bc-white); color: var(--bc-ink); box-sizing: border-box; transition: background .12s ease, color .12s ease, border-color .12s ease; } .theme-bc .btn-lg { height: 56px; padding: 0 32px; font-size: 15px; } .theme-bc .btn-primary { background: var(--bc-ink); border-color: var(--bc-ink); color: var(--bc-white); } .theme-bc .btn-primary:hover { background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-white); } .theme-bc .btn-outline-white { background: transparent; border-color: var(--bc-white); color: var(--bc-white); } .theme-bc .btn-outline-white:hover { background: var(--bc-white); color: var(--bc-ink); } .theme-bc .icon-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bc-ui); font-weight: 600; text-decoration: none; } .theme-bc .icon-link:hover { color: var(--bc-accent); } .theme-bc .icon-link svg { fill: currentColor; } /* --- поля Bootstrap-форм (.form-control/.form-select) — в остальном сайте везде используется .ui-input, здесь другой класс, своих стилей не было */ .theme-bc .form-control, .theme-bc .form-select { border: 2px solid var(--bc-ink); border-radius: 0; background: var(--bc-white); font-family: var(--bc-ui); font-size: 15px; padding: 0 16px; height: 48px; width: 100%; box-sizing: border-box; color: var(--bc-ink); } .theme-bc .form-control-lg, .theme-bc .form-select-lg { height: 52px; font-size: 16px; } .theme-bc .form-control:focus, .theme-bc .form-select:focus { outline: none; border-color: var(--bc-accent); } /* .form-select — убираем родную стрелку браузера (закруглённая, серая, не в тон плоской ч/б теме) и рисуем свою — прямой V-образный шеврон. Список опций (сам выпадающий попап) браузер рисует нативно и красится лишь частично (background/color у