/* ========================================================================= Тема «Тёмный премиум» — слой поверх general*.css / additional.css. Всё правила ограничены .theme-dp (класс вешается на только там, где тема нужна), поэтому остальные страницы сайта не затрагиваются. Чтобы откатить — убрать @section('body_class', 'theme-dp') на странице. ========================================================================= */ .theme-dp { --dp-ink: #0B0E13; --dp-ink-2: #151A22; --dp-ink-3: #10151D; --dp-line-dark: #232B36; --dp-paper: #F6F6F4; --dp-white: #FFFFFF; --dp-text: #12161C; --dp-text-2: #4A515A; --dp-muted: #6E7681; --dp-muted-2: #8A9099; /* приглушённый текст поверх тёмных поверхностей: светлее, чем --dp-muted, иначе 13-14px не дотягивают до контраста AA на #0B0E13 */ --dp-on-dark: #9AA1AB; --dp-on-dark-2: #8A93A0; --dp-line: #E9E9E5; --dp-line-2: #E4E4E0; --dp-accent: #D01F26; --dp-accent-dk: #A5161C; --dp-dsp: Unbounded, system-ui, sans-serif; --dp-ui: Onest, system-ui, "Segoe UI", sans-serif; background: var(--dp-paper); font-family: var(--dp-ui); color: var(--dp-text); -webkit-font-smoothing: antialiased; } .theme-dp .wrapper, .theme-dp .main { background: var(--dp-paper); } @media (min-width: 1200px) { .theme-dp .container { max-width: 1280px; } } /* ---------- Типографика ---------- */ .theme-dp h1, .theme-dp h2, .theme-dp h3, .theme-dp .title, .theme-dp .page-title, .theme-dp .box-title { font-family: var(--dp-dsp); letter-spacing: -0.02em; color: var(--dp-text); } .theme-dp .page-title { font-size: 40px; font-weight: 600; margin: 0 0 18px; } .theme-dp .main-brands .title, .theme-dp .container > .title, .theme-dp section > .title { font-size: 34px; font-weight: 600; margin: 0 0 22px; } .theme-dp .s-about .row p { font-size: 16px; line-height: 1.7; color: var(--dp-text-2); } /* ---------- Шапка ---------- */ .theme-dp .header-main { background: var(--dp-ink); } .theme-dp .header-main .middle { background: var(--dp-ink); border-bottom: 1px solid var(--dp-line-dark); } .theme-dp .header-main .middle .inner { min-height: 46px; } /* логотип обычно тёмный — выбеливаем, чтобы читался на тёмной шапке */ .theme-dp .header-main .logo img, .theme-dp .header-mobile .logo img, .theme-dp footer .logo img { filter: brightness(0) invert(1); } .theme-dp .header-main .map_mark_text, .theme-dp .header-main .phone label { color: var(--dp-on-dark); font-size: 13px; } .theme-dp .header-main .phone .header__phone-link, .theme-dp .header-main .phone a { font-family: var(--dp-dsp); font-weight: 500; color: var(--dp-white); } .theme-dp .header-main .phone .header__phone-link:hover { color: var(--dp-accent); } .theme-dp .header-main .menu { background: var(--dp-ink); } .theme-dp .main-menu > li > a, .theme-dp .main-menu > li > span, .theme-dp .main-menu .catalog-menu-btn { color: #D6D9DE; font-size: 15px; font-weight: 500; } .theme-dp .main-menu > li > a:hover, .theme-dp .main-menu .catalog-menu-btn:hover { color: var(--dp-white); } /* выпадающий каталог */ .theme-dp .catalog-menu { background: var(--dp-white); border: 1px solid var(--dp-line); border-radius: 18px; box-shadow: 0 24px 60px rgba(11, 14, 19, .28); } .theme-dp .catalog-menu .brand-item .brand-link { border-radius: 10px; color: var(--dp-text); } .theme-dp .catalog-menu .brand-item .brand-link:hover { background: var(--dp-paper); color: var(--dp-accent); } .theme-dp .catalog-menu .hits .box-title { font-size: 18px; } .theme-dp .catalog-menu .hits .accent { color: var(--dp-accent); } .theme-dp .catalog-menu .hit-item .price { font-family: var(--dp-dsp); font-weight: 600; color: var(--dp-accent); } /* мобильная шапка */ .theme-dp .header-mobile, .theme-dp .header-mobile .mobile-main { background: var(--dp-ink); } .theme-dp .header-mobile .addres, .theme-dp .header-mobile .phones a { color: #D6D9DE; } /* ---------- Герой: текст слева, слайдер справа ---------- */ .theme-dp .hero-row { background: linear-gradient(135deg, #151A22 0%, #0E1219 60%, #17110F 100%); border: 1px solid var(--dp-line-dark); border-radius: 24px; padding: 56px; margin-top: 8px; margin-bottom: 40px; } .theme-dp .hero-row__eyebrow { font-family: var(--dp-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dp-accent); } .theme-dp .hero-row__title { font-family: var(--dp-dsp); font-size: 44px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--dp-white); margin: 0; } .theme-dp .hero-row__desc { font-family: var(--dp-ui); font-size: 16px; line-height: 1.6; color: #9AA1AB; margin: 0; max-width: 460px; } .theme-dp .hero-row__cta { display: inline-flex; align-items: center; height: 54px; padding: 0 28px; border-radius: 12px; font-family: var(--dp-ui); font-size: 15px; font-weight: 600; text-decoration: none; } .theme-dp .hero-row__cta--primary { background: var(--dp-accent); color: var(--dp-white); } .theme-dp .hero-row__cta--primary:hover { background: var(--dp-accent-dk); color: var(--dp-white); } .theme-dp .hero-row__cta--secondary { background: transparent; border: 1px solid #3A4350; color: var(--dp-white); } .theme-dp .hero-row__cta--secondary:hover { border-color: var(--dp-accent); color: var(--dp-accent); } .theme-dp .hero-row__media, .theme-dp .home-slider, .theme-dp .home-slider .home-slider__track, .theme-dp .home-slider .home-slider__slide { height: 100%; min-height: 280px; } .theme-dp .home-slider .home-slider__track { padding: 0 !important; } .theme-dp .home-slider .home-slider__img { height: 100%; border-radius: 16px; } .theme-dp .home-slider .slick-dots li button { background: rgba(255, 255, 255, .35); } .theme-dp .home-slider .slick-dots li.slick-active button { background: var(--dp-accent); } /* ---------- Типы кузова: чипы ---------- */ .theme-dp .body-types__list { gap: 10px; margin-bottom: 34px; } .theme-dp .body-types__item { flex: 0 0 auto; } .theme-dp .body-types__link { height: 44px; padding: 0 20px; border: 1px solid var(--dp-line-2); border-radius: 999px; background: var(--dp-white); color: #2A3038; font-size: 15px; font-weight: 400; white-space: nowrap; } .theme-dp .body-types__link:hover { border-color: var(--dp-text); background: var(--dp-white); color: var(--dp-text); } /* ---------- Плитки марок ---------- */ .theme-dp .main-brands .brands { gap: 10px; } .theme-dp .main-brands .brands .brand { width: calc((100% - 11 * 10px) / 12); margin-bottom: 0; } .theme-dp .main-brands .brands .brand > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 76px; padding: 8px; background: var(--dp-white); border: 1px solid var(--dp-line); border-radius: 12px; transition: border-color .15s ease; } .theme-dp .main-brands .brands .brand > a:hover { border-color: #C9C9C3; color: var(--dp-text); } .theme-dp .main-brands .brands .brand > a .brand-logo { display: flex; align-items: center; justify-content: center; } .theme-dp .main-brands .brands .brand > a .brand-logo img { max-width: 52px; max-height: 22px; object-fit: contain; } .theme-dp .main-brands .brands .brand > a .brand-name { font-size: 11px; color: var(--dp-muted); } @media (max-width: 1023px) { .theme-dp .main-brands .brands .brand { width: calc((100% - 7 * 10px) / 8); } } @media (max-width: 767px) { .theme-dp .main-brands .brands .brand { width: calc((100% - 4 * 8px) / 5); } .theme-dp .main-brands .brands { gap: 8px; } .theme-dp .main-brands .brands .brand > a { height: 64px; } .theme-dp .main-brands .brands .brand > a .brand-logo img { max-width: 42px; max-height: 18px; } .theme-dp .main-brands .brands .brand > a .brand-name { font-size: 10px; } } /* ---------- Популярное: подбор чипами ---------- */ .theme-dp .podbor_title { font-family: var(--dp-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dp-muted-2); margin: 26px 0 12px; } .theme-dp h2 + .podbor_title { margin-top: 6px; } .theme-dp .podbor { gap: 10px; margin-left: 0; margin-right: 0; } .theme-dp .podbor_item { width: auto; padding: 0; margin-bottom: 0; } .theme-dp .podbor_item a { height: 44px; padding: 0 20px; border: 1px solid var(--dp-line-2); border-radius: 999px; background: var(--dp-white); color: #2A3038; font-size: 15px; white-space: nowrap; } .theme-dp .podbor_item a:hover { border-color: var(--dp-text); color: var(--dp-text); } /* ---------- Карточки моделей («Хиты продаж») ---------- */ .theme-dp .model-cards-mini { gap: 20px; margin-top: 4px; } .theme-dp .model-cards-mini .model-card-mini { width: calc((100% - 3 * 20px) / 4); } @media (max-width: 1023px) { .theme-dp .model-cards-mini .model-card-mini { width: calc((100% - 2 * 20px) / 3); } } @media (max-width: 767px) { .theme-dp .model-cards-mini .model-card-mini { width: calc((100% - 20px) / 2); } } .theme-dp .model-cards-mini .model-card--inner { margin: 0; padding: 20px; background: var(--dp-white); border: 1px solid var(--dp-line); border-radius: 18px; height: 100%; transition: border-color .15s ease; } .theme-dp .model-cards-mini .model-card-mini:hover .model-card--inner { border-color: #C9C9C3; } .theme-dp .model-cards-mini .col-first .title { font-family: var(--dp-dsp); font-size: 17px; font-weight: 600; text-transform: none; color: var(--dp-text); padding-bottom: 4px; } .theme-dp .model-cards-mini .col-first .title:after { display: none; } .theme-dp .model-cards-mini .col-first .image { padding-top: 14px; min-height: 150px; background: linear-gradient(160deg, #F1F1EE 0%, #E4E5E1 100%); border-radius: 12px; margin-top: 10px; } .theme-dp .model-cards-mini .col-first .image img { max-width: 88%; max-height: 130px; object-fit: contain; } .theme-dp .model-cards-mini .col-second { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dp-line-2); gap: 10px 0; } .theme-dp .model-cards-mini .col-second > div { padding-left: 0; background-image: none !important; } .theme-dp .model-cards-mini .col-second label, /* доп. css сайта красит подпись через `.col-second>div label` (5 классов) — специфичнее правила выше (4 класса) и перебивает тему тем же образом, что и в theme-bold-contrast.css. Даём такую же длинную цепочку. */ .theme-dp .model-cards-mini .model-card-mini .model-card--inner .col-second > div label { font-family: var(--dp-ui); font-size: 12px; color: var(--dp-muted-2); margin: 0 0 3px; } .theme-dp .model-cards-mini .col-second .cash { width: 100%; } .theme-dp .model-cards-mini .col-second .cash span { font-family: var(--dp-dsp); font-size: 22px; font-weight: 600; color: var(--dp-accent); } .theme-dp .model-cards-mini .col-second .credit { width: 100%; margin-top: 6px; } .theme-dp .model-cards-mini .col-second .credit span { font-size: 13px; font-weight: 400; color: var(--dp-muted); } /* ---------- О салоне + преимущества ---------- */ .theme-dp .s-about { gap: 0 64px; align-items: flex-start; } .theme-dp .main-features .features { gap: 14px; } .theme-dp .main-features .features > div { width: calc((100% - 3 * 14px) / 4); padding: 26px 24px; background: var(--dp-white); border: 1px solid var(--dp-line); border-radius: 16px; text-align: left; color: var(--dp-accent); } .theme-dp .main-features .features > div svg { width: 34px; height: 34px; fill: currentColor; } .theme-dp .main-features .features > div span { font-family: var(--dp-ui); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--dp-text); padding-top: 14px; } .theme-dp .main-features .features > div p { font-size: 14px; line-height: 1.55; color: var(--dp-muted); margin-top: 8px; } @media (max-width: 1023px) { .theme-dp .main-features .features > div { width: calc((100% - 14px) / 2); } } @media (max-width: 575px) { .theme-dp .main-features .features > div { width: 100%; padding: 20px; } } /* ---------- Кредитный блок (тёмный) ---------- */ .theme-dp .row-gray.margin-t2-b0 { background: var(--dp-ink); } .theme-dp .banner-credit { padding-top: 56px; padding-bottom: 56px; gap: 64px; } .theme-dp .banner-credit .info .title, .theme-dp .banner-credit .info .title.text { font-family: var(--dp-dsp); font-size: 42px; font-weight: 600; line-height: 1.12; color: var(--dp-white); } .theme-dp .banner-credit .info .subtitle { font-size: 17px; color: var(--dp-muted-2); margin-top: 14px; } .theme-dp .banner-credit .bonus-items { display: flex; flex-direction: column; gap: 1px; margin-top: 28px; border-radius: 14px; overflow: hidden; background: var(--dp-line-dark); list-style: none; padding: 0; } .theme-dp .banner-credit .bonus-item { background: var(--dp-ink-3); padding: 18px 24px; margin: 0; } .theme-dp .banner-credit .bonus-item > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .theme-dp .banner-credit .bonus-item span:first-child { font-size: 15px; color: #D6D9DE; } .theme-dp .banner-credit .bonus-item span:last-child { font-family: var(--dp-dsp); font-size: 15px; font-weight: 600; color: var(--dp-white); white-space: nowrap; } /* форма внутри тёмного блока */ .theme-dp .banner-credit .form { background: var(--dp-ink-2); border: 1px solid var(--dp-line-dark); border-radius: 20px; padding: 34px; } .theme-dp .banner-credit .form .form-title .title-before { font-size: 14px; color: var(--dp-muted-2); } .theme-dp .banner-credit .form .form-title .title-main { display: block; font-family: var(--dp-dsp); font-size: 25px; font-weight: 600; color: var(--dp-white); margin-top: 4px; } .theme-dp .banner-credit .form .form-dscr { font-size: 14px; color: var(--dp-on-dark); margin-top: 8px; } .theme-dp .banner-credit .form .ui-input { height: 52px; background: var(--dp-ink-3); border: 1px solid #2A3038; border-radius: 10px; color: var(--dp-white); font-family: var(--dp-ui); font-size: 15px; padding: 0 16px; } .theme-dp .banner-credit .form .ui-input::placeholder { color: var(--dp-on-dark); } .theme-dp .banner-credit .form .ui-input:focus { border-color: var(--dp-accent); outline: none; } .theme-dp .banner-credit .form .form-check-label { color: var(--dp-on-dark); } .theme-dp .banner-credit .form .form-footer, .theme-dp .banner-credit .form .form-footer a { color: var(--dp-on-dark); font-size: 12px; } .theme-dp .banner-credit .form .form-footer a { color: #9AA1AB; text-decoration: underline; } /* ---------- Кнопки ---------- */ .theme-dp .button, .theme-dp .btn-submit, .theme-dp button.button, /* доп. css сайта красит кнопку внутри форм через селектор `.banner>.form form .form-field .btn-submit` (4 класса) — он специфичнее `.theme-dp .btn-submit` (2 класса) и перебивает тему. Даём здесь такую же длинную цепочку, чтобы победить по специфичности независимо от порядка файлов. */ .theme-dp .banner .form .form-field .btn-submit { background: var(--dp-accent); border: none; border-radius: 12px; height: 56px; font-family: var(--dp-ui); font-size: 16px; font-weight: 600; color: var(--dp-white); transition: background .15s ease; } .theme-dp .button:hover, .theme-dp .btn-submit:hover, .theme-dp .banner .form .form-field .btn-submit:hover { background: var(--dp-accent-dk); } /* ---------- Банки ---------- */ .theme-dp #banks .title { font-size: 26px; } .theme-dp .bank-items .bank-item .link { display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 12px; background: var(--dp-white); border: 1px solid var(--dp-line); border-radius: 12px; } .theme-dp .bank-items .bank-item img { max-height: 40px; object-fit: contain; filter: grayscale(1); opacity: .78; } .theme-dp .bank-items .bank-item .link:hover img { filter: none; opacity: 1; } /* ---------- Все марки и модели ---------- */ .theme-dp .main-all-models .brandnames { gap: 32px 24px; } .theme-dp .main-all-models .brandname { width: calc((100% - 3 * 24px) / 4); padding: 0; } .theme-dp .main-all-models .brandname .head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--dp-line-2); } .theme-dp .main-all-models .brandname .head .img img { max-width: 46px; max-height: 22px; object-fit: contain; } .theme-dp .main-all-models .brandname .head .title { font-family: var(--dp-ui); font-size: 15px; font-weight: 600; margin: 0; } .theme-dp .main-all-models .brandname .body div { padding: 3px 0; } .theme-dp .main-all-models .brandnames__link { font-size: 14px; color: var(--dp-text-2); } .theme-dp .main-all-models .brandnames__link:hover { color: var(--dp-accent); } @media (max-width: 1023px) { .theme-dp .main-all-models .brandname { width: calc((100% - 24px) / 2); } } @media (max-width: 575px) { .theme-dp .main-all-models .brandname { width: 100%; } } /* ---------- Обратный звонок (светлая карточка) ---------- */ .theme-dp .row-gray.margin-t1-b0 { background: var(--dp-paper); } .theme-dp .banner-question { background: var(--dp-white); border: 1px solid var(--dp-line); border-radius: 22px; padding: 44px 48px; margin-top: 24px; margin-bottom: 40px; gap: 48px; } .theme-dp .banner-question .info .title, .theme-dp .banner-question .info .title.text { font-family: var(--dp-dsp); font-size: 34px; font-weight: 600; color: var(--dp-text); } .theme-dp .banner-question .info .subtitle { font-size: 16px; line-height: 1.6; color: var(--dp-muted); margin-top: 12px; } .theme-dp .banner-question .form .form-title .title-before { font-size: 14px; color: var(--dp-muted-2); } .theme-dp .banner-question .form .form-title .title-main { display: block; font-family: var(--dp-dsp); font-size: 24px; font-weight: 600; color: var(--dp-text); margin-top: 4px; } .theme-dp .banner-question .form .form-dscr { font-size: 14px; color: var(--dp-muted); margin-top: 8px; } .theme-dp .banner-question .form .ui-input { height: 56px; background: #FAFAF8; border: 1px solid var(--dp-line-2); border-radius: 12px; font-family: var(--dp-ui); font-size: 15px; color: var(--dp-text); padding: 0 18px; } .theme-dp .banner-question .form .ui-input:focus { border-color: var(--dp-text); outline: none; } .theme-dp .banner-question .form .form-footer, .theme-dp .banner-question .form .form-footer a { font-size: 12px; color: var(--dp-muted); } /* ---------- Подвал ---------- */ .theme-dp footer { background: var(--dp-ink); color: #9AA1AB; } .theme-dp .footer-inner { padding-top: 52px; padding-bottom: 32px; } .theme-dp .footer-inner .box-title { font-family: var(--dp-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dp-on-dark-2); margin-bottom: 14px; } .theme-dp .footer__nav-link, .theme-dp .footer .nav__link, .theme-dp footer a { color: #9AA1AB; font-size: 14px; } .theme-dp .footer__nav-link:hover, .theme-dp footer a:hover { color: var(--dp-white); } .theme-dp footer .information, .theme-dp footer .information-links { border-top: 1px solid var(--dp-line-dark); color: var(--dp-on-dark-2); font-size: 12px; } .theme-dp footer .text-link { color: var(--dp-on-dark); }