/* ========================================================================== theme-overrides.css — кастом такси-сайта поверх шаблона Multi. -------------------------------------------------------------------------- Здесь ЕДИНСТВЕННОЕ безопасное место для правки стилей. Все остальные файлы в /assets/css/ трогать НЕЛЬЗЯ — обновления шаблона их перезапишут. Правило: если хочешь изменить цвет/размер/поведение — пиши сюда. Если хочешь новый блок — добавь новый селектор сюда и разметку в HTML. ========================================================================== */ /* ========================================================================= 0.PALETTE) БРЕНД-ПАЛИТРА — форсируем поверх настроек темы Multi. На боевом Multi переменные :root генерятся из админки (по умолчанию СИНИЕ). Чтобы сайт был жёлто-чёрным без правок в админке — переопределяем их здесь с !important (custom-property с !important перебивает обычную вне зависимости от порядка подключения). Файл грузится последним — применяется гарантированно. Если захотите менять цвета из админки — уберите этот блок. ========================================================================= */ :root { --primary-color: #FFC107 !important; --secondary-color: #212121 !important; --main-btn-color: #FFC107 !important; --main-btn-text-color: #212121 !important; --secondary-btn-color: #212121 !important; --secondary-btn-text-color: #ffffff !important; --hero-banner-color: rgba(33, 33, 33, 0.55) !important; --hero-banner-text-color: #ffffff !important; --banner-color: radial-gradient(105.52% 108.84% at 37.86% 30.64%, #FFC107 0%, #FFD54F 100%) !important; --promo-credit-banner-bg-color: #212121 !important; --promo-credit-banner-text-color: #FFC107 !important; --term-block-number-bg-color: radial-gradient(105.52% 108.84% at 37.86% 30.64%, #FFC107 0%, #FFD54F 100%) !important; --term-block-number-text-color: #212121 !important; --card-color: #F7F7F7 !important; --body-bg-secondary-color: #ffffff !important; } /* ========================================================================= 0) БАЗОВЫЙ СЛОЙ ШАБЛОНА MULTI — НЕ УДАЛЯТЬ. Перенесён из оригинального /assets/css/theme-overrides.css шаблона Multi. Именно он привязывает цвета кнопок/шапки/баннеров/модалок к CSS-переменным из :root (заданы в каждой страницы). Без этого блока кнопки и всплывашки остаются синими (дефолт theme.css), а фон шапки — прозрачным (--bg-color оказывается не определён). Наши таксишные правки идут НИЖЕ. ========================================================================= */ :root { --bg-color: var(--body-bg-color); --main-text-color: var(--body-text-color); /* алиасы: в оригинале не заданы — задаём, чтобы мелкие акценты (иконки списков/дропдаунов, цена в кредит-форме) были в цвет темы */ --primary: var(--primary-color); --secondary: var(--secondary-color); } .app-header { --bg-color: var(--header-bg-color); --main-text-color: var(--header-text-color); color: var(--main-text-color); } .label-icon { background: var(--secondary); } .mod-check__dropdown-icon::before, .mod-check__dropdown-icon.active::before { background: var(--primary); } .credit-form__main-step-text-price, .car-block__main-info-item-value--payment { color: var(--primary); } .btn { transition: 0.2s; transition-property: filter, opacity, color, border-color, background-color, transform; } .btn.btn_primary { background: var(--main-btn-color); color: var(--main-btn-text-color); } .btn.btn_outline { background: transparent; border-color: var(--main-btn-color); color: var(--main-btn-color); } .btn.btn_outline:hover, .btn.btn_outline:active { border-color: transparent; background: var(--main-btn-color); color: var(--main-btn-text-color); } .btn.btn_white { background: var(--secondary-btn-color); color: var(--secondary-btn-text-color); } .btn:hover { filter: opacity(0.8); } .btn:active { filter: brightness(0.9); transform: scale(0.95); } .mark-link { border-color: var(--mark-link-border-color); background: var(--mark-link-bg-color); color: var(--mark-link-text-color); } .mark-link:hover { filter: opacity(0.8); } .mark-link:active { filter: brightness(0.9); transform: scale(0.95); } .hero-carousel__content, .modal-mega-sale .modal__form { background-color: var(--hero-banner-color); color: var(--hero-banner-text-color); } .mega-sale-form-desc, .modal-mega-sale .form-terms { color: inherit; } .popup-preset__form { background: var(--promo-credit-banner-bg-color); color: var(--promo-credit-banner-text-color); } .popup-preset__form-top-title, .popup-preset__form-top-text, .popup-preset__form .main-form-checkbox_white { color: inherit; } .credit-banner { background-image: var(--banner-color); } .credit-bg { background-color: var(--body-bg-secondary-color); } .callback-button { background-color: var(--main-btn-color); color: var(--main-btn-text-color); } .callback-button:before { border: solid var(--main-btn-color) 1px; } .callback-button:after { background-color: var(--main-btn-color); } .callback-button__icon { background: currentColor; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 0 48 48' width='48'%3E%3Cpath d='M0 0h48v48h-48z' fill='none'/%3E%3Cpath fill='white' d='M13.25 21.59c2.88 5.66 7.51 10.29 13.18 13.17l4.4-4.41c.55-.55 1.34-.71 2.03-.49 1.24.74 4.65 1.14 7.14 1.14 1.11 0 2 .89 2 2v7c0 1.11-.89 2-2 2-18.78 0-34-15.22-34-34 0-1.11.9-2 2-2h7c1.11 0 2 .89 2 2 0 2.49.4 4.9 1.14 7.14.22.69.06 1.48-.49 2.03l-4.4 4.42z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: 60%; } .term-block__number { background: var(--term-block-number-bg-color); color: var(--term-block-number-text-color); } .btn.btn_outline_phone:before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M19.7446 14.5828C20.2283 15.0679 20.5 15.725 20.5 16.41C20.5 17.095 20.2283 17.7521 19.7446 18.2372L18.985 19.1128C12.1482 25.6577 -4.48861 9.0262 1.95576 2.16827L2.91574 1.33356C3.40138 0.863354 4.05264 0.603237 4.7286 0.609485C5.40457 0.615733 6.0509 0.887845 6.52777 1.36695C6.55365 1.39283 8.10046 3.40196 8.10046 3.40196C8.55944 3.88411 8.81494 4.52458 8.81385 5.19023C8.81277 5.85589 8.55517 6.49552 8.09462 6.97616L7.12796 8.19149C7.66292 9.49122 8.44945 10.6724 9.44235 11.6673C10.4353 12.6621 11.615 13.451 12.9137 13.9885L14.1366 13.0161C14.6174 12.5559 15.2569 12.2987 15.9225 12.2977C16.588 12.2968 17.2282 12.5523 17.7103 13.0111C17.7103 13.0111 19.7187 14.557 19.7446 14.5828ZM18.596 15.7965C18.596 15.7965 16.5984 14.2598 16.5725 14.2339C16.4005 14.0634 16.1681 13.9677 15.926 13.9677C15.6838 13.9677 15.4514 14.0634 15.2794 14.2339C15.2569 14.2573 13.5732 15.5987 13.5732 15.5987C13.4597 15.689 13.3247 15.7482 13.1814 15.7704C13.0381 15.7927 12.8914 15.7772 12.7559 15.7255C11.0734 15.0991 9.54522 14.1185 8.27479 12.85C7.00436 11.5816 6.0214 10.0549 5.39249 8.37346C5.33672 8.23611 5.31855 8.0864 5.33982 7.9397C5.36109 7.793 5.42105 7.65461 5.51353 7.53876C5.51353 7.53876 6.855 5.85432 6.87753 5.83262C7.04805 5.66066 7.14372 5.4283 7.14372 5.18614C7.14372 4.94398 7.04805 4.71162 6.87753 4.53966C6.85166 4.51462 5.31486 2.5155 5.31486 2.5155C5.14031 2.359 4.9125 2.27519 4.67814 2.28124C4.44377 2.28729 4.2206 2.38275 4.05436 2.54806L3.09438 3.38276C-1.61536 9.0454 12.8019 22.6619 17.7645 17.9726L18.525 17.0961C18.7032 16.9311 18.8102 16.7032 18.8235 16.4607C18.8367 16.2181 18.7551 15.98 18.596 15.7965Z' fill='black'/%3E%3C/svg%3E"); mask-size: contain; mask-position: center; mask-repeat: no-repeat; background: currentColor; } /* ------------------------------------------------------------------------- 1) Общая палитра (цвета кнопок/акцентов пересчитаны в шапке страниц через CSS-переменные :root). Здесь — только тонкие правки поверх шаблона. ------------------------------------------------------------------------- */ .hero-carousel__title, .hero-carousel__desc { text-shadow: 0 2px 12px rgba(0,0,0,.35); } /* нативные чекбоксы в формах/модалках по умолчанию синие — красим в бренд */ input[type="checkbox"], input[type="radio"] { accent-color: #FFC107; } /* цвета кнопок задаются в секции 14 (чёрные + жёлтый текст) */ /* ------------------------------------------------------------------------- 2) section-badges — плашки с УТП (кредит от 4.9% / 0% / ГБО / одобрение) ------------------------------------------------------------------------- */ .section-badges { padding: 32px 0; } .badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .badge-card { background: linear-gradient(135deg, #FFC107 0%, #FFD54F 100%); color: #212121; border-radius: 12px; padding: 24px 20px; text-align: center; box-shadow: 0 4px 12px rgba(255,193,7,.25); } .badge-card__value { font-size: 32px; font-weight: 800; line-height: 1.1; margin-bottom: 8px; } .badge-card__label { font-size: 14px; opacity: .85; } @media (max-width: 900px) { .badges-grid { grid-template-columns: repeat(2, 1fr); } .badge-card__value { font-size: 24px; } } /* ------------------------------------------------------------------------- 3) section-hero_slim — компактный hero для внутренних страниц (у оригинального section-hero — только слайдер) ------------------------------------------------------------------------- */ .section-hero_slim { padding: 40px 0; } .hero-slim { background: linear-gradient(135deg, #212121 0%, #424242 100%); color: #fff; border-radius: 16px; padding: 48px 40px; text-align: center; } .hero-slim__title { font-size: 36px; font-weight: 700; margin: 0 0 12px; color: #FFC107; } .hero-slim__desc { font-size: 18px; max-width: 700px; margin: 0 auto 24px; opacity: .9; } .hero-slim__btn { display: inline-block; } @media (max-width: 700px) { .hero-slim { padding: 32px 20px; } .hero-slim__title { font-size: 24px; } .hero-slim__desc { font-size: 15px; } } /* ------------------------------------------------------------------------- 4) section-income — таблица ориентировочного дохода ------------------------------------------------------------------------- */ .section-income { padding: 40px 0; } .income-table__wrap { overflow-x: auto; } .income-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); } .income-table th, .income-table td { padding: 16px 20px; text-align: center; border-bottom: 1px solid #eee; font-size: 15px; } .income-table th { background: #212121; color: #FFC107; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .02em; } .income-table td:first-child { text-align: left; font-weight: 600; background: #FFF8E1; } .income-table tr:last-child td { border-bottom: none; } .income-table tr:hover td { background: rgba(255,193,7,.08); } .income-table__note { margin-top: 16px; font-size: 13px; color: #666; text-align: center; } /* ------------------------------------------------------------------------- 5) section-ready-solution — «Готовое решение для такси» ------------------------------------------------------------------------- */ .section-ready-solution { padding: 40px 0; } .ready-solution__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ready-solution__col { background: #F7F7F7; border-radius: 12px; padding: 32px; } .ready-solution__col_alt { background: #212121; color: #fff; } .ready-solution__col_alt h3 { color: #FFC107; } .ready-solution__col h3 { margin: 0 0 16px; font-size: 22px; font-weight: 700; } .ready-solution__list { list-style: none; padding: 0; margin: 0; } .ready-solution__list li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid rgba(0,0,0,.06); } .ready-solution__col_alt .ready-solution__list li { border-bottom-color: rgba(255,255,255,.08); } .ready-solution__list li:before { content: ""; position: absolute; left: 0; top: 15px; width: 16px; height: 16px; border-radius: 50%; background: #FFC107 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23212121'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/12px no-repeat; } .ready-solution__list li:last-child { border-bottom: none; } @media (max-width: 800px) { .ready-solution__grid { grid-template-columns: 1fr; } .ready-solution__col { padding: 24px 20px; } } /* ------------------------------------------------------------------------- 6) section-rules (с кастомными карточками) — «Как купить» ------------------------------------------------------------------------- */ .rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .rules-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 24px 20px; position: relative; } .rules-card__num { width: 40px; height: 40px; border-radius: 50%; background: #FFC107; color: #212121; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .rules-card__title { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .rules-card__text { font-size: 14px; color: #555; line-height: 1.5; } @media (max-width: 900px) { .rules-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .rules-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- 7) section-terms (с кастомной сеткой) — «Покупка vs Аренда» ------------------------------------------------------------------------- */ .terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .terms-col { border-radius: 12px; padding: 32px; } .terms-col_good { background: linear-gradient(135deg, #FFC107 0%, #FFD54F 100%); color: #212121; } .terms-col_bad { background: #F7F7F7; color: #212121; } .terms-col__title { margin: 0 0 16px; font-size: 22px; font-weight: 700; } .terms-col__list { list-style: none; padding: 0; margin: 0; } .terms-col__list li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid rgba(0,0,0,.08); } .terms-col__list li:last-child { border-bottom: none; } .terms-col_good .terms-col__list li:before { content: "+"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; background: #212121; color: #FFC107; border-radius: 50%; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; } .terms-col_bad .terms-col__list li:before { content: "−"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; background: #212121; color: #fff; border-radius: 50%; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; } @media (max-width: 800px) { .terms-grid { grid-template-columns: 1fr; } .terms-col { padding: 24px 20px; } } /* ------------------------------------------------------------------------- 8) section-catalog_tabs — табы Эконом / Комфорт / Комфорт+ ------------------------------------------------------------------------- */ .catalog-tabs { display: flex; gap: 8px; margin: 16px 0 24px; flex-wrap: wrap; } .catalog-tab { display: inline-block; padding: 10px 20px; border-radius: 24px; background: #F7F7F7; color: #212121; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; } .catalog-tab:hover { background: #eee; } .catalog-tab.--active { background: #FFC107; color: #212121; } /* ------------------------------------------------------------------------- 9) section-catalog-page — обёртка для крупного каталога ------------------------------------------------------------------------- */ .section-catalog-page { padding: 32px 0 56px; } /* ------------------------------------------------------------------------- 10) section-credit-page — калькулятор автокредита ------------------------------------------------------------------------- */ .credit-page { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .credit-page__col_form { background: #F7F7F7; border-radius: 12px; padding: 32px; } .credit-page__title { font-size: 24px; font-weight: 700; margin-bottom: 20px; } .credit-calc__field { margin-bottom: 16px; } .credit-calc__field label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; } .credit-calc__result { background: #212121; color: #FFC107; border-radius: 8px; padding: 16px 20px; margin: 20px 0; text-align: center; } .credit-calc__result-label { font-size: 13px; opacity: .85; margin-bottom: 4px; } .credit-calc__result-value { font-size: 28px; font-weight: 800; } .credit-page__col_text h2 { margin: 0 0 16px; font-size: 24px; font-weight: 700; } .credit-page__col_text ul { padding-left: 20px; line-height: 1.7; } @media (max-width: 800px) { .credit-page { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- 11) section-finance-page (tradein page) ------------------------------------------------------------------------- */ .finance-page { background: #F7F7F7; border-radius: 12px; padding: 32px; } .finance-page h2, .finance-page h3 { margin: 0 0 16px; font-weight: 700; } .finance-page h3 { margin-top: 24px; font-size: 18px; } .finance-page__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .finance-step { background: #fff; border-radius: 8px; padding: 20px 16px; } .finance-step__num { width: 32px; height: 32px; border-radius: 50%; background: #FFC107; color: #212121; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .finance-step__text { font-size: 14px; line-height: 1.4; } .finance-page ul { padding-left: 20px; line-height: 1.7; } @media (max-width: 800px) { .finance-page__steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .finance-page__steps { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- 12) section-breadcrumbs ------------------------------------------------------------------------- */ .section-breadcrumbs { padding: 16px 0; } .breadcrumbs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #666; } .breadcrumbs__item a { color: #666; text-decoration: none; } .breadcrumbs__item a:hover { color: #212121; } /* базовый слой рисует стрелку через mask-image — гасим её, у нас своя "→" */ .breadcrumbs__item_current { color: #212121; font-weight: 600; } /* ------------------------------------------------------------------------- 13) Фиксы отображения hero-слайдера (баннеры) ------------------------------------------------------------------------- */ /* Фон слайда центрируем: базовый top-left срезал низ картинки. Композиция баннеров: авто слева, справа — место под текстовый блок. */ .hero-carousel__slide { background-position: center center; } /* На мобиле (≤1024px) media.css задаёт тексто-блоку hero ЗАХАРДКОЖЕННЫЙ синий фон (rgb(0 57 166 / 84%)) — переменными не перекрыть, гасим точечно. */ @media (max-width: 1024px) { .hero-carousel__content { background: rgba(33, 33, 33, .84) !important; } } /* ------------------------------------------------------------------------- 14) Перекрас: ЧЁРНЫЕ кнопки + ЖЁЛТЫЙ текст, убираем «жёлтое на белом». Идёт последним — перекрывает базовый слой и секции выше. ------------------------------------------------------------------------- */ /* --- Кнопки на СВЕТЛОМ фоне: чёрный фон + жёлтый текст --- */ .btn.btn_primary { background: #212121; color: #FFC107; } .btn.btn_outline { background: transparent; border-color: #212121; color: #212121; } .btn.btn_outline:hover, .btn.btn_outline:active { background: #212121; border-color: #212121; color: #FFC107; } /* Плавающая кнопка звонка */ .callback-button { background-color: #212121; color: #FFC107; } .callback-button:before { border-color: #212121; } .callback-button:after { background-color: #212121; } /* --- Кнопки на ТЁМНОМ фоне (hero, hero_slim, credit-banner): наоборот — жёлтый фон + чёрный текст (иначе чёрное на чёрном) --- */ .hero-carousel__btn .btn, .hero-slim__btn .btn, .credit-banner__button .btn { background: #FFC107; border-color: #FFC107; color: #212121; } .hero-carousel__btn .btn:hover, .hero-slim__btn .btn:hover, .credit-banner__button .btn:hover { background: #FFD54F; border-color: #FFD54F; color: #212121; } /* --- section-badges: было жёлтое на белом → чёрная карточка + жёлтая цифра --- */ .badge-card { background: #212121; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.14); } .badge-card__value { color: #FFC107; } .badge-card__label { color: rgba(255,255,255,.8); opacity: 1; } /* --- Кружки-номера (как купить / trade-in шаги): чёрный + жёлтый --- */ .rules-card__num, .finance-step__num { background: #212121; color: #FFC107; } /* --- Активный таб каталога --- */ .catalog-tab.--active { background: #212121; color: #FFC107; } /* --- Галочки списка «Готовое решение»: чёрный круг + жёлтая галка --- */ .ready-solution__list li:before { background: #212121 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFC107'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/12px no-repeat; } /* --- Сравнение «Покупка vs Аренда»: жёлтую панель → тёмную --- */ .terms-col_good { background: #212121; color: #fff; } .terms-col_good .terms-col__title { color: #FFC107; } .terms-col_good .terms-col__list li { border-bottom-color: rgba(255,255,255,.12); } .terms-col_good .terms-col__list li:before { background: #FFC107; color: #212121; } /* --- Плашка «Выгодный кредит» (credit-banner): жёлтый градиент → тёмный. Заодно чинит нечитаемый белый текст на жёлтом. --- */ .credit-banner { background-image: linear-gradient(135deg, #212121 0%, #333333 100%); color: #fff; } .credit-banner__info-title { color: #FFC107; } /* ------------------------------------------------------------------------- 15) Логотип — масштаб по высоте с сохранением пропорций, без обрезки. База даёт width:100% + max-height:32px → широкий SVG сплющивался/резался. ------------------------------------------------------------------------- */ .header__logo-image, .footer-logo__img { width: auto !important; height: 32px; max-height: 32px; max-width: 240px; object-fit: contain; } .header__logo { max-width: none; overflow: visible; } /* ------------------------------------------------------------------------- 16) Куки-попап («Мы используем куки») — в стиль такси. cookieModal.css рисует его через CSS-переменные (по умолчанию синие ссылки/прогресс) — переопределяем переменные, ничего не ломая. ------------------------------------------------------------------------- */ .cookie { --cookie-bg: #212121; --cookie-color: #ffffff; --cookie-link-color: #FFC107; --cookie-progress-bg: rgba(255, 255, 255, .15); --cookie-progress-color: #FFC107; } .cookie__card { border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); } /* ------------------------------------------------------------------------- 17) ЕДИНЫЙ СТИЛЬ ИКОНОК (для всего сайта). Спецификация иконок-файлов (assets/img/*.svg): viewBox 0 0 24 24; fill:none; stroke:#FFC107; stroke-width:1.8; stroke-linecap/linejoin: round. Иконка кладётся в круглый значок .about-card__icon (чёрный круг). Новые иконки делай по этой же спеке — тогда стиль единый. ------------------------------------------------------------------------- */ .about-card__icon { /* база: круг 100px, фон var(--secondary)=#212121 */ padding: 26px; /* крупнее воздух вокруг линии-иконки */ } .about-card__icon-img { object-fit: contain; } /* ------------------------------------------------------------------------- 18) СИСТЕМА: кнопки ≠ плашки (чтобы не путались визуально). Кнопки (интерактив): ЧЁРНЫЕ + жёлтый текст (на тёмном — наоборот). Плашки/итоги (не кликаются): ЖЁЛТАЯ заливка + тёмный текст. ------------------------------------------------------------------------- */ /* Плашка «Ежемесячный платёж» в калькуляторе была визуально как кнопка (чёрная + жёлтый текст) → делаем жёлтой плашкой с тёмным текстом. */ .credit-calc__result { background: #FFC107; color: #212121; } .credit-calc__result-label { opacity: .75; } /* ------------------------------------------------------------------------- 19) section-services — плитки услуг. У .service-card нет background-color, а картинки грузятся лениво → до/без картинки плитка была белой с белым (невидимым) текстом. Тёмный фон-фолбэк: плитка всегда читаема. ------------------------------------------------------------------------- */ .service-card { background-color: #212121; position: relative; /* Явно фиксируем поведение фона — базовый CSS Multi не гарантирует no-repeat и правильную позицию, из-за чего машины «съезжали» за края. */ background-repeat: no-repeat !important; background-position: right center !important; background-size: cover !important; } /* Легкий darken слева для читаемого белого текста заголовка + тонкое золотистое свечение сзади машины (усиливает премиальность). */ .service-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(14,14,19,0.55) 0%, rgba(14,14,19,0.15) 45%, rgba(14,14,19,0) 65%); z-index: 0; } .service-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 75% 55%, rgba(255,200,60,0.18) 0%, rgba(255,200,60,0) 70%); mix-blend-mode: screen; z-index: 0; } .service-card .service-content { position: relative; z-index: 2; } /* ========================================================================= 21) Детальная карточка авто (/auto/*): блок цены был ярко-жёлтый с белым нечитаемым текстом и красной плашкой. Переводим в нашу тёмную тему. ========================================================================= */ .model-total { background: #212121 !important; background-image: none !important; color: #fff; border-radius: 20px; } .model-total__title { color: #fff !important; opacity: .85; } .model-total__future-value, .model-total__future-value.--bigger, .model-total__future-value [data-car-price-text] { color: #FFC107 !important; font-weight: 700; } .model-total del, .model-total del[data-car-price-old-text] { color: #9a9a9a !important; } .model-total__future-title { color: #fff !important; opacity: .75; } .model-total .credit, .model-total__future-value.credit, .model-total [data-car-price-permounth-text] { color: #FFC107 !important; } .model-total .credit { background: #0e0e13 !important; border-radius: 8px; padding: 6px 14px; } /* красная плашка "Начало месяца — специальные условия!" — на всякий случай переопределяем цвет фона поверх inline style (в build_static тоже правим) */ .model-total .js-modals[style*="f44336"], .model-total span[style*="f44336"] { background: #FFC107 !important; color: #212121 !important; font-weight: 700; } /* Кнопки внутри блока цены */ .model-total .btn_white { background: transparent !important; border: 2px solid #FFC107 !important; color: #FFC107 !important; } .model-total .btn_white:hover { background: #FFC107 !important; color: #212121 !important; } .model-total .btn_primary { background: #FFC107 !important; color: #212121 !important; border-color: #FFC107 !important; } /* Красные плашки Multi (#f24942) не в тему нашего сайта. Перекрашиваем «Выгода X ₽» и «Акция до конца месяца» в жёлтые. */ .car-card__thumb .sale-block, .model-page__preview .sale-block, .sale-block { background: #FFC107 !important; color: #212121 !important; font-weight: 800; } .stock-date__share { color: #212121 !important; background: #FFC107; display: inline-block; padding: 4px 10px; border-radius: 6px; font-weight: 700; } /* section-comps: серая плашка с жёлтыми квадратными иконками некрасиво. Переводим в тему: тёмный фон, жёлтые иконки на чёрном подкладе. */ .comps-info { background: linear-gradient(90deg, #1a1a20 0%, #2a2a30 100%) !important; background-image: linear-gradient(90deg, #1a1a20 0%, #2a2a30 100%) !important; border-radius: 16px !important; padding: 24px !important; color: #fff !important; } .comps-info__item-icon { background: #FFC107 !important; background-image: none !important; color: #212121 !important; padding: 10px !important; border-radius: 10px !important; } .comps-info__item-value { color: #fff !important; font-weight: 700; } .comps-info__item-description { color: rgba(255,255,255,0.65) !important; } .comps-info__button .btn, .comps-info__button .btn_primary { background: #FFC107 !important; color: #212121 !important; border-color: #FFC107 !important; } /* Плашка на карте контактов — жёлтые буквы на белом не видны. Делаем текст тёмным (тёмно-графит), заголовки — жёлтые как акцент. */ .contacts__content { background: #fff !important; color: #0E0E13 !important; } .contacts__content * { color: inherit !important; } .contacts__content .contacts__item, .contacts__content a.contacts__item { color: #0E0E13 !important; font-weight: 600; } .contacts__content .contacts__item:first-child { color: #212121 !important; font-weight: 800; } /* Секция "Автомобили в похожих категориях" — кнопка «В каталог» на светлом фоне сливалась с чипами категорий. Делаем контрастной. */ .section-comps .btn, .comps-header .btn, .section-header__link, .section-header .btn, [class*="show-all"] .btn, a[href$="/catalog"].btn { background: #212121 !important; color: #FFC107 !important; border: 2px solid #212121 !important; } .section-comps .btn:hover, .section-header .btn:hover, a[href$="/catalog"].btn:hover { background: #0e0e13 !important; color: #FFC107 !important; } /* ------------------------------------------------------------------------- 20) Картинка блока «Отправьте заявку». У .questions__asset в базе нет ширины → рисуется в натуральную ширину и распирает колонку грида, прижимая форму. Ограничиваем колонкой. ------------------------------------------------------------------------- */ .questions__asset { width: 100%; height: 100%; min-width: 0; object-fit: cover; } /* на мобиле блок в одну колонку (media.css ≤1024px) — высота по контенту */ @media (max-width: 1024px) { .questions__asset { height: auto; } } /* ========================================================================= 21) ВСПЛЫВАШКИ (модалки/попапы) — добиваем ХАРДКОД-СИНИЙ из app.css. Эти цвета зашиты в базовый app.css литеральным hex (#0039A6 / #6E96E3 / rgb(0,57,166)) мимо CSS-переменных, поэтому бренд-палитра их НЕ перекрывает. Перекрываем точечно с !important (в т.ч. один blue-фон в app.css сам стоит с !important). Токены: жёлтый #FFC107 / #FFD54F, тёмный #212121, белый #fff. ========================================================================= */ /* --- Попап пресета/подбора (#popup-preset) --- */ /* синий базовый градиент тонирует всю всплывашку -> тёмный, чёрные оверлеи сохраняем */ .popup-preset__wrap { background: linear-gradient(250deg, rgba(33, 33, 33, 0) 46.2%, rgba(0, 0, 0, 0.74) 89.63%), linear-gradient(90deg, rgba(0, 0, 0, 0) 53.29%, rgba(0, 0, 0, 0.38) 66.33%), linear-gradient(113deg, #212121 -0.53%, #333333 62.27%) !important; } /* кнопка сабмита: была белая с синим текстом -> жёлтая с тёмным */ .popup-preset__form-fields-button { background-color: #FFC107 !important; color: #212121 !important; } .popup-preset__form-fields-button:hover { background-color: #FFD54F !important; color: #212121 !important; } /* ссылка «согласие» -> жёлтая (на тёмном фоне формы) */ .popup-preset__form-fields-confidentiality a { color: #FFC107 !important; } /* --- Попап «Справка о доходах» (#modal-income-statements) --- */ /* в app.css синий фон стоит с !important — перебиваем тёмным */ .popup-income-statements .popup-preset__form { background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #212121 !important; } /* --- Мега-распродажа (#modal-mega-sale) --- */ .modal-mega-sale .btn.btn_primary { color: #212121 !important; } /* --- Модалка комплектации / кредит-калькулятор (mod-check) --- */ .mod-check__checklist__value, .mod-check__checklist__price-top, .mod-check__checklist__price-bottom { color: #212121 !important; } .mod-check__dropdown-icon::before, .mod-check__dropdown-icon.active::before { background-color: #FFC107 !important; } .mod-check__checkbox input[type="checkbox"]:checked + label { background-color: #212121 !important; border-color: #212121 !important; } /* --- Спец-условия по кредиту (в модалке кредита) --- */ .special-credit__text, .special-credit__desc { color: #212121 !important; } /* --- Синяя плашка «итого» в калькуляторе --- */ .car-block__total { background: radial-gradient(105.52% 108.84% at 37.86% 30.64%, #FFC107 0%, #FFD54F 100%) !important; color: #212121 !important; } /* --- Мега-распродажа: кнопка «Получить доступ» была белая -> жёлтая --- */ /* (розовый бейдж «Бесплатно!» внутри кнопки оставляем — по решению заказчика) */ .modal-mega-sale .btn.btn_primary, .modal-mega-sale .btn.btn_megasave { background-color: #FFC107 !important; color: #212121 !important; } /* кнопка «Закрыть» пряталась под формой -> поднимаем шапку над формой */ .modal-mega-sale .modal-mega-sale__header { position: relative; z-index: 6; } .modal-mega-sale .modal-mega-sale__header .btn.btn_outline { position: relative; z-index: 6; } /* наша mega-sale-cars.png выше по пропорциям (890x655) — показываем авто целиком, без дефолтного выноса bottom:-110px (иначе срезает колёса) */ .modal-mega-sale__cars { bottom: 0 !important; } /* ========================================================================= 22) СИНИЕ СПЕЦ-ИКОНКИ (#2e58db) в карточках авто — жёстко зашиты в app.css. (Розовый акцент #DD4C70 оставляем как есть — по решению заказчика.) ========================================================================= */ /* Синие спец-иконки в карточках авто (мотор/расход/мощность/спидометр) -> тёмные */ .drive-unit-icon, .droplets-icon, .power-icon, .speedometer-icon { background-color: #212121 !important; } /* Синеватые «пустые» точки в спеках -> нейтральные */ .specs__list__item__fill-dot { background-color: #E0E0E0 !important; } .section-comps .btn { border: 1px solid !important; }