/* Полировка standalone-сайта (для всех тем) */ /* Крестик закрытия модалок — не вплотную к углу */ .fancybox-slide .fancybox-button--close, .fancybox-close-small, .modal .fancybox-close-small, .modal__close { top: 14px !important; right: 14px !important; } /* Таймер акции: рамка-акцент без заливки, в нашей палитре. Текст крупнее оригинальных 8px. Цвет букв — --text-on-dark-panel (белый у всех семи тем), потому что таймер всегда лежит на ТЁМНОЙ таблетке (см. правило .deal-timer ниже). Раньше здесь стоял --btn-primary-color: у лаймовой тёмной темы это цвет текста НА КНОПКЕ, то есть #141414, и числа выходили тёмными по тёмному. */ .deal-timer__count { background: transparent !important; border: 1.5px solid var(--primary-color) !important; color: var(--text-on-dark-panel) !important; border-radius: 7px !important; width: auto !important; min-width: 34px !important; height: auto !important; padding: 5px 8px !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; } .deal-timer__text { color: var(--text-on-dark-panel) !important; font-size: 11px !important; } /* тень у надписей таймера — убрать */ .deal-timer__count, .deal-timer__text { text-shadow: none !important; } /* JS проставляет --light/--dark по яркости ФОТО под таймером. Пока таймер лежал прямо на снимке, это имело смысл; теперь под ним своя тёмная таблетка, и яркость фото уже ни при чём — обе ветки ведём одним светлым цветом, иначе на светлом снимке числа становятся тёмными по тёмному. */ .deal-timer--light .deal-timer__count, .deal-timer--light .deal-timer__text, .deal-timer--dark .deal-timer__count, .deal-timer--dark .deal-timer__text { color: var(--text-on-dark-panel) !important; } /* Выравнивание бейджа «Акция» по центру с числами таймера (бейдж ниже — 22px vs 31px) */ .deal-badge { top: 12px !important; } /* База местами использует var(--primary) (ховеры каталога, ссылки) вместо темовой --primary-color → на не-красных темах вылезал базовый ОРАНЖЕВЫЙ. Синхронизируем: --primary всегда = акцент темы. */ :root { --primary: var(--primary-color) !important; } /* Каталог-меню: ховер БЕЗ плашки — меняем только цвет самих элементов (текст + иконка → акцент). Иконка-спрайт () красится через currentColor. */ .catalog-menu__item { outline: none !important; border-radius: 10px !important; transition: color .15s ease !important; } .catalog-menu__item:hover { background: transparent !important; color: var(--primary-color) !important; } .catalog-menu__item:hover span { color: var(--primary-color) !important; } /* Иконка кузова (спрайт с fill=currentColor): норма — серый, ховер — акцент, СПЛОШНАЯ заливка (не контур). */ .type-card__icon { color: var(--mark-color) !important; fill: currentColor !important; } .catalog-menu__item:hover svg, .catalog-menu__item:hover .type-card__icon { color: var(--primary-color) !important; fill: currentColor !important; stroke: none !important; filter: none !important; } /* Калькулятор: скрыть сырой input И весь ion-виджет (.irs) — заменён нативным слайдером (.native-range), т.к. ion в статик-экспорте двоился и не тащился. */ .app-range-slider, input.js-ion-input, .app-range__slider .irs { display: none !important; } /* Нативный слайдер калькулятора — дорожка + заполнение в тон темы, круглый хэндл. */ .native-range { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; height: 6px !important; margin: 16px 0 !important; border-radius: 4px !important; background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) var(--p, 30%), rgba(0, 0, 0, .14) var(--p, 30%), rgba(0, 0, 0, .14) 100%) !important; outline: none !important; cursor: pointer !important; } .native-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 3px solid var(--primary-color); box-shadow: 0 1px 4px rgba(0, 0, 0, .28); cursor: pointer; margin-top: 0; } .native-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 3px solid var(--primary-color); box-shadow: 0 1px 4px rgba(0, 0, 0, .28); cursor: pointer; } .native-range::-moz-range-track { background: transparent; } /* ref-car (авто в калькуляторе/формах): подложки нет, есть «пол» под машиной. Была серая плита во всю ширину картинки — и она читалась именно плашкой: замер на /tradein при 1440 даёт контейнер 550x220, а сам автомобиль внутри рисуется 256x192, то есть фон вдвое шире авто. Плюс серый был зашит числом (#c9ccd2…#9fa3ab), мимо палитры. Теперь два слоя, оба из переменных темы: мягкая тень под колёсами и эллиптическая подсветка акцентом. Эллипс целиком ВНУТРИ кадра и гаснет во все стороны — иначе край картинки его срезает и снизу снова появляется прямая граница плиты. Скругление и внутренняя обводка сняты: у прозрачного фона границы быть не должно. Авто по-прежнему прозрачным PNG сверху, при выборе марки/модели JS меняет только его. */ .credit-page__car-preview, .fp-car-data__main-preview { background: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 26%, transparent), transparent), radial-gradient(68% 38% at 50% 79%, color-mix(in srgb, var(--primary-color) 28%, transparent) 0%, color-mix(in srgb, var(--primary-color) 11%, transparent) 48%, transparent 76%) !important; background-size: 280px 30px, 100% 100% !important; background-position: 50% 80%, 50% 50% !important; background-repeat: no-repeat, no-repeat !important; border-radius: 0 !important; box-shadow: none !important; } /* Воздух между картинкой и заголовком «Автомобиль не выбран»: подсветка доходит почти до низа кадра и без отступа липнет к тексту. */ .fp-car-data__main-preview { margin-bottom: 22px !important; } /* Подписи/значения калькулятора кредита («Стоимость автомобиля», «Ежемесячный платёж», «от - ₽») — были акцентом (красные). В цвет текста темы, не акцент. */ .credit-page__price-label, .credit-page__price-main, .credit-page__price-payment, .credit-page__price-main *, .credit-page__price-payment * { color: var(--main-text-color) !important; } /* Ховер контурной кнопки в геро-баннере («Перейти в каталог») — БЕЛАЯ заливка + тёмный текст (был сплошной акцент = как у основной кнопки; жалоба «сделай другой»). Заливку берём из --btn-outline-hover-color (#fff у всех семи тем), а НЕ из --btn-primary-color: у лаймовой тёмной темы это цвет текста на кнопке, то есть #141414, и ховер выходил чёрным по чёрному (замер 1.0). */ .section-hero .btn_outline:hover { background: var(--btn-outline-hover-color) !important; /* Контур на ховере остаётся АКЦЕНТНЫМ. Белая рамка по белой заливке на светлом фоне страницы стирала кнопку целиком: живой ховер дал заливку к фону 1.06…1.10, от кнопки оставались одни буквы. Акцентный контур к фону держит 4.52…13.83. */ border-color: var(--btn-outline-color, var(--primary-color)) !important; color: var(--ink) !important; } .section-hero .btn_outline:hover * { color: var(--ink) !important; } .credit-page__car-preview img, .fp-car-data__main-preview { object-fit: contain !important; max-height: 220px !important; padding: 14px !important; box-sizing: border-box !important; } /* Ховер марок: лого/иконка активнее + подпись в акцент */ .mark-link { transition: transform .18s ease, color .18s ease !important; } /* Логотипы марок — (надёжно видимы; маска давала регрессии «лого пропали»). На ховере: полная непрозрачность + лёгкое увеличение (перекрашивается подпись). */ .mark-link:hover .mark-link__icon { opacity: 1 !important; transform: scale(1.08); filter: none !important; } /* Вторичная кнопка «Обмен авто»: ПОСТОЯННЫЙ тёмно-серый фон (нейтрален к теме) + белый текст, без обводки. Базовый фон непостоянен (то тёмный, то светлый — на светлом белый текст пропадал, кнопка «пустая»). Ховер — лёгкое затемнение. */ .car-card .btn_secondary, .stock-card .btn_secondary, .model-page .btn_secondary, .btn_secondary { background: var(--mark-color) !important; color: var(--btn-primary-color) !important; border-color: transparent !important; } .btn_secondary * { color: var(--btn-primary-color) !important; } .car-card .btn_secondary:hover, .stock-card .btn_secondary:hover, .model-page .btn_secondary:hover, .btn_secondary:hover { filter: brightness(.92) !important; } /* База: .catalog-menu .mark-link:hover .mark-link__icon красит иконку захардкоженным ОРАНЖЕВЫМ фильтром, а .mark-link__title → #fff (на светлых темах белый-на-светлом). Перебиваем ТОЙ ЖЕ специфичностью (правило ниже по коду выигрывает). */ .catalog-menu .mark-link:hover .mark-link__icon { filter: none !important; transform: scale(1.08); } .catalog-menu .mark-link:hover .mark-link__title, .catalog-menu .mark-link:hover .mark-link__title span:first-child { color: var(--main-text-color) !important; } .catalog-menu .mark-link:hover .mark-link__title span:last-child { color: var(--primary-color) !important; } /* Ховер логотипа */ .header__logo:hover, .footer__logo:hover { opacity: .82; } /* Моб-меню: фон тёмный (#292c31, база) всегда → текст БЕЛЫЙ. На светлых темах текст был тёмным (#191A1E) — тёмное на тёмном (cr 1.24). */ .mobile-menu__nav-item, .mobile-menu__contacts-item, .mobile-menu__link, .mobile-menu a, .mobile-menu span, .mobile-menu small { color: var(--btn-primary-color) !important; } .mobile-menu__nav-item.--active { color: var(--primary-color) !important; } /* Единые скругления у картинок-слотов (не везде были) */ .service-card__image, .stock-card__image, .hero-carousel__image, .credit-hero-carousel .hero-carousel__image, .questions__assets img, .desc-block__image, .modal-megasave__assets img, .futures-section__asset, .about-trust-factors__inner { border-radius: 14px !important; } /* Зачёркнутая старая цена — ЦВЕТОМ ТЕКСТА карточки, но ПРИГЛУШЁННЫМ (светлее), НЕ акцентом. Высокая специфичность — бьёт .car-card__price * из theme-overrides. */ .car-card .car-card__price-old, .car-card__price .car-card__price-old, .car-card__price-main .car-card__price-old, .car-card [class*="price-old"], .car-card__price del, .car-card__price s { color: var(--car-card-price-old-text) !important; } /* Ховер пунктов каталог-меню — акцент, не базовый оранжевый */ .catalog-menu__link:hover, .catalog-menu a:hover, .catalog-menu__group-title:hover { color: var(--primary-color) !important; } .catalog-menu__link:hover svg, .catalog-menu a:hover svg { fill: var(--primary-color) !important; stroke: var(--primary-color) !important; filter: none !important; } /* Всплывашка розыгрыша: дисклеймер не оранжевый; картинка приза не обрезается */ /* Розыгрыш: панель приза — тёмный фон (была светлой → белый заголовок пропадал) */ .prize-draw__side { background: linear-gradient(160deg, #1c1d22 0%, #0e0f12 100%) !important; border-radius: 14px !important; padding: 18px !important; } /* Замер на olive-d: заголовок приза был rgb(20,20,20) на панели rgb(28,29,34) — контраст 1.1, чёрное на чёрном. Виноват --btn-primary-color: на тёмных темах он чёрный, потому что означает «текст на светлом акценте». Панель же тёмная на ВСЕХ темах, значит текст на ней всегда светлый. */ .prize-draw__side__title { color: var(--text-on-dark-panel) !important; } .prize-draw__disclamer { color: var(--text-on-dark-panel) !important; } /* Вторичный текст «Остались вопросы» — читаемым цветом текста, не блёклым серым */ .questions__desc { color: var(--main-text-color) !important; opacity: .88 !important; } /* Розыгрыш: приз ЦЕЛИКОМ (в базе position:absolute + object-fit:cover 574x370 в контейнере 310px → обрезалось). Делаем в потоке, contain, по размеру. */ .prize-draw__side { height: auto !important; min-width: 280px !important; flex: 1 1 40% !important; } .prize-draw__side__image, img.prize-draw__side__image { position: static !important; transform: none !important; object-fit: contain !important; width: 100% !important; max-width: 340px !important; height: auto !important; max-height: 300px !important; display: block !important; margin: 10px auto !important; } /* Отступы модалок — КАК В ОРИГИНАЛЕ. Мы добавляли контенту 30/32, считая, что он «впритык к краю», но у самой .modal уже есть 44px, и наши отступы ложились поверх: модалка звонка выходила 580x751 против 580x691 у multi-2.vitmp.ru, то есть на 60px выше. Заказчик выбрал вариант оригинала — обнуляем. */ .modal .modal__content { padding: 0 !important; } /* Колонкам сетки СВОИ отступы не нужны: у самой `.modal` уже есть padding 44px, и наши 36/32 ложились сверху — модалка вырастала на 72px против оригинала (замер: 653 против 581 у multi-2.vitmp.ru). Между колонками работает `gap: 20px` сетки, поэтому хватает небольшого зазора у левой колонки. */ .modal.modal_grid .modal-grid__col { padding: 0 !important; } .modal.modal_grid .modal-grid__col.info-content { padding-right: 8px !important; justify-content: flex-start !important; } .prize-draw .modal__content, .prize-draw .prize-draw__wrapper { padding: 0 !important; } /* Бейдж «100 000 ₽…»: только РАСКЛАДКА + форма иконки «%» (::before). Цвета плашки/ текста/кружка — в theme-overrides (контраст к модалке зависит от темы). */ .modal .modal__offer__badge { display: flex !important; align-items: center !important; gap: 14px !important; border-radius: 44px !important; padding: 8px 20px 8px 8px !important; } .modal .modal__offer__badge .percent { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; flex: none !important; border-radius: 50% !important; box-shadow: inset 0 1px 2px rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .35) !important; } .modal .modal__offer__badge .percent::before { content: "%"; font: 800 22px/1 system-ui, Arial, sans-serif; } /* База кладёт в ::after растр `pb-icon.png` — тёмный кружок со знаком, который рисуется ШИРЕ своего места и наезжает на текст: в «100 000 ₽ при приезде…» пропадало начало суммы. Растр вдобавок не перекрашивается под тему. Выключаем его — знак уже нарисован глифом в ::before. */ .modal .modal__offer__badge .percent::after { display: none !important; content: none !important; } /* Мега-распродажа: воздух вокруг заголовка/формы в правой колонке. */ .modal-megasave .modal-megasave__content { padding: 40px 44px 40px 20px !important; } /* Модальные ФОРМЫ — панель ввода светлая на ВСЕХ темах (база: .modal__form bg ~#f4efef, поля белые). На тёмных темах текст наследовал БЕЛЫЙ → белое-на-светлом (подписи полей, чекбокс cr 1.27; ссылка-политика — светлый акцент cr 2.28). Фиксируем тёмным текстом на светлой панели независимо от темы. */ .modal .app-label__heading, .modal .main-form-checkbox__text { color: var(--ink) !important; } .modal .main-form-checkbox__text a { color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: 2px; } .modal .app-input, .modal .wrapped-form input, .modal .wrapped-form textarea { color: var(--ink) !important; } .modal .app-input::placeholder { color: var(--car-card-price-old-text) !important; } /* Мега-распродажа: база задаёт width:calc(...) от контейнера fancybox, который мы убрали → ширина 0, сетка __inner (12 кол) схлопывалась, заголовок уезжал за экран (жалоба «текст не читается»). Возвращаем ширину — грид сам разложит: слева фон «МЕГА РАСПРОДАЖА», справа заголовок (белый) + светлая карточка формы (как в рефе). */ /* ВСЁ полноэкранное — только с 901px. Ниже у базы своя мобильная раскладка: `position: relative`, полоса фона сверху и `padding: 165px 0 0`, чтобы заголовок начинался ПОД надписью «МЕГА РАСПРОДАЖА». Наши `padding: 44px` и `position: fixed` её ломали — заголовок налезал прямо на надпись фона (замер на 390: у нас верх заголовка 84, у оригинала 165). */ @media (min-width: 901px) { .modal-megasave { /* Оригинал (multi-2.vitmp.ru) показывает эту модалку ВО ВЕСЬ ЭКРАН: фон с надписью «МЕГА РАСПРОДАЖА» слева, форма справа, машины выходят за левый край. Наше правило `width: min(1080px, 94vw)` делало из неё коробку, из-за чего фон обрезался, надпись пропадала, а машины выглядели съехавшими. Возвращаем полноэкранную раскладку базы. */ width: 100vw !important; max-width: 100vw !important; /* display и min-height — как у оригинала. Слайд fancybox центрирует по вертикали распоркой `::before` высотой 100%: блочная модалка встаёт ПОД распорку и уезжает на экран вниз (замер: y=900 при окне 900), а inline-block садится рядом с ней, то есть на своё место. */ display: inline-block !important; vertical-align: middle !important; min-height: 0 !important; margin: 0 !important; padding: 44px !important; } .modal-megasave__inner { width: 100% !important; min-height: 560px !important; } } /* Машина в модалке «Таких цен больше не будет» лежит ПРЯМО на фоне модалки — как в макете (Figma, node 4112-4463): ни плашки, ни рамки, ни скругления. Раньше она попадала под общее правило превью авто (кредитные блоки) и получала серую плитку с обводкой. Вместо плашки — мягкое свечение акцентом. */ .modal__car { background: radial-gradient(56% 62% at 64% 48%, color-mix(in srgb, var(--primary-color) 9%, transparent), transparent 72%) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; object-fit: contain !important; max-height: 240px !important; width: 100% !important; } /* --- Плашка «Позвонить» внизу мобильного экрана --------------------------- Разметку добавляем в конец view `footer` (add_mobile_callbar.js), стилей у базы multi-2 нет вовсе — они целиком здесь. Цвета только переменными: кнопка берёт акцент из `.btn_primary`, подложка — поверхность темы. Литералов нет, чтобы плашка не выпадала из палитры на остальных шести темах пакета. Ниже 781px прячем круглую кнопку звонка `.callback-button`: иначе на экране две кнопки звонка, и круглая перекрывает плашку. Порог 781 взят у базы multi-1, чтобы поведение совпадало между пакетами. */ .mobile-callback-button { /* Низ экрана уже занят панелью `.bottom-nav` (58px, z-index 999) — плашка садится НАД ней, иначе уезжает под панель и видна только краем. Высота панели вынесена в переменную: если в теме она другая, правится одним значением. */ --bottom-nav-height: 0px; position: fixed; z-index: 998; left: 0; right: 0; bottom: var(--bottom-nav-height); padding: 10px 16px; background: color-mix(in srgb, var(--bg-main-color) 88%, transparent); backdrop-filter: blur(6px); border-top: 1px solid color-mix(in srgb, var(--main-text-color) 14%, transparent); } .mobile-callback-button > .btn { width: 100%; display: flex; flex-direction: column; row-gap: 2px; padding-top: 10px; padding-bottom: 10px; } /* Подпись с графиком — тем же сплошным цветом, что и «Позвонить». Полупрозрачный белый на акценте просаживает контраст ниже нормы, а размер тут меньше 18px, то есть послабления 3.0 не действует. */ .mobile-callback-button > .btn small { font-size: 12px; line-height: 1.2; opacity: 1; color: var(--btn-primary-color) !important; -webkit-text-fill-color: var(--btn-primary-color) !important; } @media (min-width: 781px) { .mobile-callback-button { display: none !important; } } @media (max-width: 780px) { .callback-button { display: none !important; } /* чтобы плашка и панель не закрывали конец подвала */ body { padding-bottom: 96px; } } /* --- Кнопка «Позвонить» в карточке авто ----------------------------------- Раньше на её месте стоял «Обмен авто»; теперь это телефон, который по первому клику раскрывает номер, а по второму звонит (разметка вью `catalog-car-item`). Общее правило `.btn_secondary` красит её постоянным серо-синим `#4f5561` — цвет нейтрален к теме и выпадает из палитры, а «ховер» там сделан `filter: brightness(.92)`: фильтр не меняет вычисленные цвета, отклика не видно ни глазом, ни замером. Здесь — пара под тему: контур акцентом, по наведению заливка акцентом. Контраст (замер на светлой карточке): текст акцентом 6.07, обводка 6.07 при норме 3.0, на ховере белый на акценте 6.50. На тёмных темах пакета карточка другая — перемерить при установке. */ .car-card [data-phone-reveal] { /* Контур и подпись берут АКЦЕНТ, ПРИГОДНЫЙ КАК ТЕКСТ на светлом (--stock-date-share-text). Прямой --accent тут нельзя: на лаймовой теме он светлее карточки и текст пропадает (замер: 1.12 при норме 4.5). */ background: transparent !important; border: 1.5px solid var(--stock-date-share-text) !important; color: var(--stock-date-share-text) !important; -webkit-text-fill-color: var(--stock-date-share-text) !important; transition: background-color .15s ease, color .15s ease !important; } .car-card [data-phone-reveal] * { color: var(--stock-date-share-text) !important; -webkit-text-fill-color: var(--stock-date-share-text) !important; } .car-card [data-phone-reveal]:hover, .car-card [data-phone-reveal]:focus-visible { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--text-on-accent) !important; -webkit-text-fill-color: var(--text-on-accent) !important; filter: none !important; } .car-card [data-phone-reveal]:hover *, .car-card [data-phone-reveal]:focus-visible * { color: var(--text-on-accent) !important; -webkit-text-fill-color: var(--text-on-accent) !important; } /* --- Кнопки карточек авто на одной линии ---------------------------------- У карточки со скидкой в блоке цены появляется вторая строка (старая цена зачёркнутой), блок вырастает с 36 до 44px — и кнопки уезжают вниз на 8px относительно соседей. Высота самих карточек в ряду одинаковая, поэтому достаточно прижать блок действий к низу: тогда кнопки выстраиваются в одну линию независимо от того, сколько строк заняли название и цена. */ .car-card { display: flex !important; flex-direction: column !important; } .car-card__content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } .car-card__actions { margin-top: auto !important; } /* ВНИМАНИЕ на будущее: `height: 100%` контенту здесь ставить НЕЛЬЗЯ. Сверху в карточке лежит картинка (~205px), контент получал полную высоту карточки, вылезал за неё, а `.car-card` идёт с `overflow: hidden` — блок кнопок просто срезало. Замер положения при этом показывал «разброс 0»: кнопки были выровнены, потому что их одинаково обрезало. Проверять видимость, а не только координаты. */ /* --- Иконки блока «Преимущества» ------------------------------------------- База рисует их ИНЛАЙН-SVG с зашитым оранжевым `#F08436` прямо в атрибутах `stroke`. Атрибут представления слабее любого CSS-правила, поэтому цвет переопределяется отсюда и следует за темой. Файл трогать не нужно. Цвет — акцент ДЛЯ СВЕТЛОЙ поверхности: чистый акцент подходит не всем темам, на мятной #00c896 по фону секции #f4f9f7 гейт иконок дал 2.03 при норме 3.0. Где такой переменной нет, остаётся акцент — там он проходит (4.8…6.0). */ .fu-item__icon-svg rect, .fu-item__icon-svg path, .fu-item__icon-svg circle, .fu-item__icon-svg line { stroke: var(--accent-on-card, var(--accent)) !important; } .fu-item__icon-svg [fill]:not([fill="none"]) { fill: var(--accent-on-card, var(--accent)) !important; } /* --- Красные кнопки темнеют по наведению ----------------------------------- База осветляла заливку (замер: #BA171F -> #C3373E), из-за чего кнопка выглядела блёклой, а контраст белого текста падал с 6.50 до 5.33. Теперь уходим в тёмный оттенок акцента: заметнее и контрастнее. Значение — в переменной `--accent-hover` в theme.css, у каждой темы своё. */ .btn.btn_primary:hover, .btn.btn_primary:focus-visible, .btn_primary:hover, .btn_primary:focus-visible { background: var(--accent-hover) !important; background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; filter: none !important; } .car-card [data-phone-reveal]:hover, .car-card [data-phone-reveal]:focus-visible { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } /* --- Старое нижнее меню на мобильном убрано -------------------------------- Заказчик просит снять панель `.bottom-nav`: её место занимает плашка «Позвонить», а навигация есть в бургер-меню шапки. Поэтому плашка снова садится на самый низ, а нижний отступ страницы считается только под неё. */ .bottom-nav { display: none !important; } /* --- Герой на мобильном: текст был белым по белому ------------------------ Ниже 1024 база кладёт под текст слайда светлую карточку (`--bg-card`), а текст в герое белый — получалось белое по белому, читалось только по краям букв. Сам слайд при этом уже залит тёмным градиентом, поэтому светлую подложку убираем: текст ложится на тёмное, как на десктопе. Проверено по пикселям: было 1.95, стало >=10. */ @media (max-width: 1023px) { .hero-carousel__texts { background: transparent !important; box-shadow: none !important; } } /* --- Таймер акции на карточке ----------------------------------------------- Лежит абсолютом поверх фото (`.car-card__thumb`) белым текстом без подложки: на светлом снимке пропадал (замер 1.09). Даём тёмную «таблетку» — она не зависит от того, какое фото попалось, и не тянет за собой цвет темы. */ .deal-timer { background: color-mix(in srgb, var(--ink) 72%, transparent) !important; border-radius: 10px !important; padding: 4px 10px !important; backdrop-filter: blur(2px) !important; } /* --- Форма на странице автомобиля ------------------------------------------ Была почти неотличима от страницы: поверхность #F4EFEF на фоне #F9F4F4, контраст 1.05. Подмешиваем немного акцента и добавляем тонкую границу — форма читается как отдельный блок, но не спорит с кнопками. Цвета — только через переменные, значения считаются от палитры темы. */ .model-page__form, .credit-form__main, .model-page .wrapped-form { /* 6% подмеса давало различимость 1.15 — форма всё ещё сливалась. На 12% выходит 1.28: блок читается как отдельный, но не спорит с кнопками. */ background: color-mix(in srgb, var(--accent) 12%, var(--bg-form-wrapper)) !important; border: 1px solid color-mix(in srgb, var(--main-text-color) 18%, transparent) !important; } /* --- Плашка звонка не спорит с плашкой цены -------------------------------- На карточке автомобиля снизу уже есть своя закреплённая плашка (`.fixed_price`) с ценой и кнопкой «Зафиксировать выгоду». Там наша плашка звонка лишняя — прячем её на таких страницах. */ body:has(.fixed_price) .mobile-callback-button { display: none !important; } /* Кнопка отправки внутри формы — акцентная, а не серо-синяя из базы: в форме это главное действие, и нейтральный `.btn_secondary` выпадает из палитры так же, как выпадал «Позвонить» в карточке. Ховер — тёмный акцент. */ .model-page__form .btn_secondary, .wrapped-form .btn_secondary, .credit-form__main .btn_secondary { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--btn-primary-color) !important; } .model-page__form .btn_secondary *, .wrapped-form .btn_secondary *, .credit-form__main .btn_secondary * { color: var(--btn-primary-color) !important; -webkit-text-fill-color: var(--btn-primary-color) !important; } .model-page__form .btn_secondary:hover, .wrapped-form .btn_secondary:hover, .credit-form__main .btn_secondary:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; filter: none !important; } /* --- Размеры внутри модалок ------------------------------------------------ 1. Картинка (машина со знаком «%») на десктопе была 486x240 при свободных 119px в колонке — поднимаем потолок, чтобы кадр читался. 2. Розыгрыш: колонка с призом была 335px, а форма 620 — приз выглядел миниатюрой. Меняем пропорцию: приз шире, поля уже. 3. Мегараспродажа занимала всю высоту окна (1000 из 1000) и машины срезало снизу; картинка внутри вдобавок шла с `object-fit: fill`, то есть растянутой. Ограничиваем высоту и возвращаем пропорции. */ @media (min-width: 1024px) { .modal__car { /* 330 давало модалке кредита 592 вместо 581 у оригинала: там фото авто высокое и упиралось в потолок, а не в ширину. 318 — предел, при котором высота модалок совпадает с оригиналом. */ max-height: 318px !important; } /* Колонки модалки-сетки были ровно пополам (494/494), и картинка упиралась в ширину колонки: расти по высоте ей уже некуда. Отдаём картинке больше места, форме остаётся 440 — поля при этом не становятся уже, чем в остальных модалках сайта. */ .modal.modal_grid .modal-grid { grid-template-columns: 1.28fr 1fr !important; } /* Приз — главное в этой модалке, поэтому колонка под него шире формы. Исходник картинки 1200x1080, запас по разрешению есть: на 500px она не мылится. */ .prize-draw .prize-draw__side { flex: 0 0 500px !important; max-width: 500px !important; } .prize-draw .prize-draw__side img { /* у базы на этой картинке стоит max-width: 340px — без его снятия колонку можно расширять сколько угодно, приз останется прежним */ width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 520px !important; object-fit: contain !important; } .prize-draw .modal__content { max-width: 500px !important; } } /* Блок «Выгодный автокредит» на мобильном: текста не было видно. Замер: белый текст пунктов лежал на СВЕТЛОЙ плашке — наша тема красит `.credit-offer__content` карточным градиентом (белый), а цвет текста у базы остаётся белым. В ОРИГИНАЛЕ база на этой ширине кладёт на `__content` ТЁМНУЮ плашку (rgb(49,52,57)), а внешнему блоку фон убирает — то есть плашка «переезжает» между точками перелома, и наш карточный фон её перебивал. Возвращаем тёмную, той же парой переменных, что у героя. */ /* Значок-галочка в пунктах «Выгодного автокредита» на мобильном раздувался до 60px и налезал на текст — «слиплись пункты». Причина наша: 60px это правило БАЗЫ ДЛЯ ДЕСКТОПА, а на мобильном база сама ужимает значок до 33px (media.css). Наш theme-overrides скопировал только десктопное правило, и оно потекло вниз. Возвращаем мобильный размер — ровно тот, что у оригинала. Ограничение по ширине обязательно: на десктопе отступ под значок 80px, и 33px там смотрелись бы потерянными. */ @media (max-width: 1024px) { .credit-offer__futures-item::after { width: 33px !important; height: 33px !important; background-size: contain !important; background-repeat: no-repeat !important; } } @media (max-width: 1024px) { .credit-offer__content { background: linear-gradient(135deg, var(--hero-carousel-content-bg) 0%, var(--hero-carousel-content-bg-2, var(--hero-carousel-content-bg)) 100%) !important; } } /* Мегасейл строго на один экран. Геометрия на чистом браузере верная (верх 0, высота = окну), но fancybox вешает на контейнер `can-swipe`, и слайд можно утащить — тогда модалка уезжает, и «до картинки нужно листать». Прибиваем её к экрану намертво: fixed + inset 0. Перетаскивание слайда после этого модалку не двигает. `overflow: hidden` при этом срезал низ формы на невысоких экранах: замер 1280x720 — содержимого 886 при окне 720, галочка согласия уходила за край и домотать её было нельзя. Теперь на экранах ниже 840px сначала ужимаются отступы (1366x768 после этого влезает целиком), а остаток прокручивается ВНУТРИ модалки — слайд по-прежнему неподвижен. */ @media (min-width: 901px) { .fancybox-slide .modal-megasave { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; margin: 0 !important; transform: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; } } @media (min-width: 901px) and (max-height: 840px) { .fancybox-slide .modal-megasave { padding: 16px !important; } .modal-megasave .modal-megasave__content { padding: 20px 44px 20px 20px !important; } .modal-megasave__inner { min-height: 0 !important; } } /* Крестик закрытия мегасейла прибит к экрану. Содержимое модалки выше окна (замер: 390x844 — 973 при 844; 1280x720 — 805 при 720), а крестик лежал в её верхнем правом углу и уезжал вместе с содержимым — жалоба «мегасейл прокручивается, не вижу иконки закрыть». Правило адресное: остальные модалки в окно помещаются, и уводить их крестик в угол экрана незачем. */ .modal-megasave .fancybox-close-small { position: fixed !important; top: 14px !important; right: 14px !important; z-index: 99999 !important; } /* Плашка «Скидка 50 000 ₽ при предъявлении справки о доходах» на карточке авто. В разметке у неё инлайновый фон #f44336, но наша тема перекрашивала её в акцент — замер давал rgb(186,23,31), ровно как у кнопок рядом, и плашка с ними сливалась. Делаем инверсную: фон цветом ТЕКСТА темы, текст — цветом фона. Пара гарантированно контрастна и не спорит с акцентом. `!important` обязателен: инлайновый стиль иначе сильнее. */ /* Специфичность важна: в theme-overrides стоит span.js-modals[style] (элемент+класс+атрибут), и селектор слабее её не перебьёт, в каком бы файле ни лежал. */ .model-pricing span.js-modals[style], span.js-modals[style][data-src="#modal-recall"] { background: var(--main-text-color) !important; color: var(--bg-main-color) !important; } /* Мобильное меню было на базовом сером rgb(41,44,49) — вне палитры темы. Берём почти чёрный С ТОНОМ акцента (светлота 9%, насыщенность до 45%): белый текст меню держит контраст, а фон перестаёт выглядеть чужим. */ .mobile-menu { background: #0D1714 !important; } /* Гео-значок в меню был оранжевым: в его SVG зашит fill="#F08436" — цвет базового шаблона, к палитре отношения не имеет. Переводим на маску, цвет берётся из background-color, как сделано с бургером. */ .mobile-menu .--bf-icon-geo::after { background-image: none !important; /* Акцент к фону меню даёт 8.44 при норме 3.0 для нетекстового, поэтому здесь значок акцентом. */ background-color: var(--primary-color) !important; -webkit-mask: url('data:image/svg+xml,') center/contain no-repeat; mask: url('data:image/svg+xml,') center/contain no-repeat; } /* Герой на мобильном: текст вылезал из плашки на фотографию. Причина не в отступах — у базы `.hero-carousel__texts` имеет `margin-top: -30px`, то есть НАМЕРЕННО заезжает на картинку, и в оригинале плашка нарисована именно на нём. У нас плашка оказалась на `.hero-carousel__content`, и эти 30px текста висели над ней, прямо на фото. Возвращаем как в оригинале: плашка на текстах, у контента фона нет — кнопка тогда стоит на странице, как и задумано базой. */ @media (max-width: 1024px) { .hero-carousel__texts { /* У тёмных тем второй остановки нет — тогда берём первую, иначе градиент не собирается и плашка пропадает совсем. */ background: linear-gradient(135deg, var(--hero-carousel-content-bg) 0%, var(--hero-carousel-content-bg-2, var(--hero-carousel-content-bg)) 100%) !important; border-radius: 20px !important; } .hero-carousel__content { background: none !important; } } /* Пункт 3. «Значка меню не видно». Замер на 390px: сам у базы `display: none` и размер 0x0 — он не рисуется вообще. Бургер рисует КНОПКА, фоновой картинкой из media.css, и в той картинке зашит `stroke="white"`. У оригинала шапка тёмная, поэтому там белое видно; у пяти наших тем шапка светлая — белое по белому. Меняем заливку на МАСКУ: форма берётся из той же картинки, а цвет — из переменной темы (#191A1E на светлых, #FFFFFF на тёмных). Одно правило работает и там, и там. Точка перелома 1024px — та же, что у базы. */ @media (max-width: 1024px) { .header__open-menu { background-image: none !important; background-color: var(--main-text-color) !important; -webkit-mask: url('data:image/svg+xml,') center/contain no-repeat; mask: url('data:image/svg+xml,') center/contain no-repeat; } } /* Пункт 1. Иконки типов кузова в выпадающем каталоге по наведению не менялись: у путей зашит fill="#6D7381". Атрибут представления слабее любого CSS-правила, поэтому файлы иконок трогать не нужно. Цвет — var(--btn-outline-color), а НЕ акцент: замер контраста к подложке меню по всем семи темам даёт у акцента 2.03 на мятной (норма для нетекстового 3.0), тогда как выводной цвет темы проходит везде — минимум 4.52 на той же мятной, максимум 13.83 на лаймовой. */ .catalog-menu__item .type-card__icon path, .type-card .type-card__icon path { transition: fill .2s ease !important; } .catalog-menu__item:hover .type-card__icon path, .type-card:hover .type-card__icon path { fill: var(--btn-outline-color) !important; } /* Пункт 2. Стрелки пагинации на /auto по наведению не менялись ВООБЩЕ: замер на живом red-l давал одинаковые backgroundColor/borderColor/color при `matches(':hover') === true`. У базы там стоит `transition: all`, то есть анимация есть, а менять нечего. Заливаем ТОЙ ЖЕ парой, что у основной кнопки: чистый акцент на светлом фоне страницы проходит не везде — на мятной живой ховер дал заливку 2.03 к фону при норме 3.0 для нетекстовых. */ .pagination__prev:hover, .pagination__next:hover { /* --accent-hover: заливка ховера самой темы. Заливка основной кнопки не подошла — на красной тёмной она темнее фона всего в 2.73 раза при норме 3.0, стрелка на ховере пропадала. У --accent-hover запас есть на всех семи: к фону 3.85…11.57, текст к заливке 4.55…13.81. */ background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--btn-primary-color) !important; } .pagination__prev:hover::after, .pagination__next:hover::after, .pagination__prev:hover::before, .pagination__next:hover::before { color: var(--btn-primary-color) !important; border-color: var(--btn-primary-color) !important; } /* Пункт 5. «Сравнить модификации/комплектации» идут классом btn_primary, то есть залиты акцентом и спорят с главной кнопкой страницы (замер: фон rgb(186,23,31), текст белый — ровно как у главной). Делаем их контурными. Цвета берём из переменных ВЫВОДНОЙ кнопки темы, а не из затемнённого акцента: на тёмных темах затемнённый акцент сливается с фоном. */ .model-opt-buttons .btn.btn_primary { background: transparent !important; border: 2px solid var(--btn-outline-border-color) !important; color: var(--btn-outline-color) !important; } .model-opt-buttons .btn.btn_primary:hover { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--text-on-accent) !important; } /* Розыгрыш призов: модалка не влезала в окно ноутбука. Замер на живом red-l: высота 868px при окне 768 и 800 — появлялась прокрутка страницы, то есть та самая «листалка», на которую уже жаловались по мегасейлу. Виноват не размер полей (они 331px и это нормально), а приз: мы подняли ему потолок до 520px ради «картинку саму больше», и на высоких экранах это правильно, а на низких съедало весь запас. Поэтому потолок делаем не фиксированным, а от высоты окна, и заодно поджимаем отступы. Высокие мониторы (900+) правку не видят — там приз остаётся крупным. */ @media (max-height: 899px) { .prize-draw .prize-draw__side img { max-height: 34vh !important; } /* Отступы контента и так нулевые (как в оригинале) — на низком окне поджимать здесь уже нечего. */ .prize-draw .prize-draw__side { padding: 12px !important; } /* Высоту держит НЕ приз, а правая колонка: заголовок в две строки, подпись, бейдж и карточка формы. Приз к ней просто растягивается. Поэтому поджимаем правую колонку, иначе картинка уменьшается впустую. */ .prize-draw .modal__title { font-size: 30px !important; margin-bottom: 6px !important; } .prize-draw .modal__desc { margin-bottom: 10px !important; } .prize-draw .modal__offer__badge { padding: 6px 16px 6px 6px !important; margin-bottom: 10px !important; } .prize-draw .wrapped-form__inputs { gap: 10px !important; } .prize-draw .app-input { height: 52px !important; } .prize-draw .prize-draw__wrapper { gap: 16px !important; } } /* Окно уже 1150: колонки по 500px не помещались рядом (модалка 1012), приз переносился под форму и высота уходила к 1173. Делаем колонки долевыми — пара остаётся в один ряд. НИЖНЯЯ ГРАНИЦА ОБЯЗАТЕЛЬНА: ниже 901px обёртка розыгрыша у базы становится колонкой, и доли 46/50% начинают резать ШИРИНУ — замер на 390 давал колонку формы 145px и поле ввода 57px, то есть ту самую «кашу». */ @media (min-width: 901px) and (max-width: 1150px) { .prize-draw .prize-draw__side { flex: 1 1 46% !important; max-width: 46% !important; } .prize-draw .modal__content { flex: 1 1 50% !important; max-width: 50% !important; } } /* Машины мегасейла. База даёт width:125%/margin-left:-25%: на окне 1440 контейнер начинается с x=60, картинка уезжала на -190 и левый автомобиль резало краем экрана на 175px («машины съехали в бок»). Прежняя правка (просто width:100%) обрезку убирала, но машины мельчали. Отступ ужимаем по мере сужения окна — замер на 1440: блок 823x451, левый край -1px, правый 822 при форме с 862, то есть целиком в кадре и не наезжает на форму. */ .modal-megasave__assets img { object-fit: contain !important; height: auto !important; width: 125% !important; margin-left: -25% !important; } /* Вынос влево = ровно то поле, что осталось от экрана. Контейнер __inner шириной 1320 начинается с (окно-1320)/2, и отрицательный отступ не должен его превышать, иначе машину режет краем. Считано по колонке 762: окно 1700+ поле >=190 -> -25% (190px) окно 1500 поле 90 -> -10% (76px) окно 1400 поле 40 -> -5% (38px) окно <1400 поле ~0 -> 0 Полагаться на прозрачные рамки вырезок нельзя: у части из них поля 1.5%, у мятной их не было вовсе. */ @media (max-width: 1699px) { .modal-megasave__assets img { width: 110% !important; margin-left: -10% !important; } } @media (max-width: 1499px) { .modal-megasave__assets img { width: 105% !important; margin-left: -5% !important; } } @media (max-width: 1399px) { .modal-megasave__assets img { width: 100% !important; margin-left: 0 !important; } } /* Фон мегасейла — свой у каждой темы, собран в макете (страница «Мегараспродажа — фоны»). Имя файла с версией не случайно: ассеты отдаются с max-age=2592000, immutable, и перезапись popup-megasale-bg.jpg по тому же пути месяц не доехала бы до тех, кто модалку уже открывал. */ .modal-megasave { background-image: url(../img/popup-megasale-bg-v2.jpg), var(--bg) !important; } /* Номер шага в блоке преимуществ лежит на акцентной заливке. Белый текст на светлых акцентах (мятный, лаймовый) давал 2.16 при норме 3.0 — цвет теперь выбирает переменная темы. */ .ben-block__number, .ben-block__number * { color: var(--text-on-accent) !important; -webkit-text-fill-color: var(--text-on-accent) !important; } /* МЕТКА: текст на светлой плите, на акценте и крупная сумма */ /* Три места, где база кладёт текст на поверхность другой светлоты: 1. Ценник на странице кредита сидит на СВЕТЛОЙ плите формы, а текст остаётся белым — на тёмных темах это 1.27 при норме 4.5. 2. Номера шагов в блоках преимуществ лежат на акцентной заливке: белый на светлом акценте (мятный, лаймовый) даёт 2.16 при норме 3.0. 3. Крупная сумма в заголовке «Обмен авто» набрана акцентом прямо на фоне страницы: 2.03 при норме 3.0. Берём затемнённый акцент — тот же, что у ссылок согласия. */ .credit-page__price-label, .credit-page__price-main, .credit-page__price-main *, .credit-page__price-payment, .credit-page__price-payment *, .js-credit-term-value { color: var(--text-on-form) !important; -webkit-text-fill-color: var(--text-on-form) !important; } .ben-block__number, .ben-block__number *, .simple-futures-item__number, .simple-futures-item__number * { color: var(--text-on-accent) !important; -webkit-text-fill-color: var(--text-on-accent) !important; } .desc-blocks__title span { color: var(--stock-date-share-text) !important; -webkit-text-fill-color: var(--stock-date-share-text) !important; } /* Цифры и значки НА АКЦЕНТЕ. `--text-on-accent` рассчитан на мелкий текст и потому на красной тёмной он чёрный: белое по #FB4040 даёт 3.58, а для текста норма 4.5. Но номер выгоды — 24px, а значок «%» вообще не текст: там норма 3.0, и белое проходит. Поэтому заведена отдельная переменная: белая там, где она набирает 3.0, и прежняя тёмная на светлых акцентах (мятный, лаймовый), где белое не читается вовсе. */ .ben-block__number, .ben-block__number * { color: var(--text-on-accent-large) !important; -webkit-text-fill-color: var(--text-on-accent-large) !important; } /* Кружок со знаком «%» — НЕ акцент, а его затемнённый оттенок: замер по семи темам даёт от rgb(28,105,212) до rgb(110,118,12), то есть тёмный везде. Белый глиф выигрывает на всех (4.87…6.50 против 2.83…3.78 у тёмного), поэтому здесь нужен цвет «текст на тёмной плите», а не «текст на акценте»: последний на мятной и лаймовой чёрный, отсюда было чёрное на тёмном. */ .modal .modal__offer__badge .percent { color: var(--text-on-dark-panel) !important; -webkit-text-fill-color: var(--text-on-dark-panel) !important; } /* На карточке автомобиля внизу должна остаться ОДНА кнопка — «Зафиксировать выгоду». Второй ряд плашки (номер телефона плюс «Перезвоните мне») дублирует и её, и плашку звонка с остальных страниц. */ .fixed_price .fixed_price__btn { display: none !important; } /* Кнопки «Сравнить модификации/комплектации» — контурные, без подложки ни у самих кнопок, ни у обёртки, ни у псевдоэлементов со стрелкой. */ .model-opt-buttons, .model-opt-buttons .btn, .model-opt-buttons .btn::before, .model-opt-buttons .btn::after { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Кнопка «Позвонить» в карточке: по наведению заливалась `--accent-hover`, то есть ТРЕТЬИМ красным в одном элементе (рамка #B72828, акцент #FB4040, ховер #DD3030) — отсюда «красный не по палитре». Плюс текст брался `--text-on-accent`, на красной тёмной чёрный: 3.94 при норме 4.5. Заливаем тем же цветом, что и рамка в покое, текст белым: один красный на элемент и контраст 6.4. */ .car-card [data-phone-reveal]:hover, .car-card [data-phone-reveal]:focus-visible { background: var(--stock-date-share-text) !important; border-color: var(--stock-date-share-text) !important; color: var(--text-on-dark-panel) !important; -webkit-text-fill-color: var(--text-on-dark-panel) !important; } /* `-webkit-text-fill-color` обязателен рядом с `color`: он перебивает color при отрисовке, и без него на красной тёмной кнопка выглядела чёрным по красному, хотя `color` замерялся белым. */ .car-card [data-phone-reveal]:hover span, .car-card [data-phone-reveal]:focus-visible span { color: var(--text-on-dark-panel) !important; -webkit-text-fill-color: var(--text-on-dark-panel) !important; } /* Кнопки сравнения: цвет надо задавать И вложенному span. Правило красило только сам .btn, а внутри лежит , которому тема ставит свой цвет — на оливковой светлой он оказывался белым на белом (1.06), на лаймовой тёмной чёрным на тёмном (1.19). `-webkit-text-fill-color` обязателен рядом с `color`: он перебивает color при отрисовке. */ .model-opt-buttons .btn, .model-opt-buttons .btn span, .model-opt-buttons .btn * { color: var(--btn-outline-color) !important; -webkit-text-fill-color: var(--btn-outline-color) !important; } .model-opt-buttons .btn:hover, .model-opt-buttons .btn:hover span, .model-opt-buttons .btn:hover * { color: var(--text-on-accent) !important; -webkit-text-fill-color: var(--text-on-accent) !important; } /* Мобильное меню. Мы сделали ему тёмный фон в тон акцента, а текст пунктов у светлых тем остался тёмным — замер на оливковой светлой дал 1.04, то есть чёрное на чёрном. Раз фон теперь тёмный на ВСЕХ темах, то и текст на нём всегда светлый. */ .mobile-menu, .mobile-menu a, .mobile-menu span, .mobile-menu div, .mobile-menu__nav-item, .mobile-menu__contacts-item { color: var(--text-on-dark-panel) !important; -webkit-text-fill-color: var(--text-on-dark-panel) !important; } /* Плашка опроса внутри меню — своя, у неё акцентный фон и свой цвет текста, его перекрашивать нельзя. */ .mobile-menu .benefit-text-compact, .mobile-menu .benefit-text-compact * { color: var(--text-on-accent) !important; -webkit-text-fill-color: var(--text-on-accent) !important; } /* Карточка услуги: тема красила ФОН ВСЕЙ карточки тёмным градиентом, и он вылезал по краям поверх фотографии — «затемнение на всю картинку, видно края». Фон карточки убираем, фотография занимает её целиком, а читаемость подписи обеспечивает собственный градиент базы под текстом — усиливаем его, чтобы белый текст держал норму. */ .service-card { background: none !important; } .service-card .service-card__content { background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .78) 55%, rgba(0, 0, 0, 0) 100%) !important; } /* Условия автокредита — все восемь пунктов сразу, двумя рядами. Сначала блок был лентой на scroll-snap: четыре пункта на экран, вторая четвёрка доезжала прокруткой вбок. Заказчик просит видеть всё сразу — листалка снята, стоит сетка 4 колонки на 2 ряда. Ширина колонки прежняя (816px блока дают 189px), поэтому значок остаётся НАД текстом: рядом с текстом в 189px строки рвутся. Замер после правки (1440x900): блок 816x246, боковой прокрутки нет, на картинку справа не наезжает. Ниже 900px по два: четыре пункта в 358px дают 84px на колонку — нечитаемо. */ .credit-terms__content { display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(4, 1fr) !important; grid-auto-columns: auto !important; gap: 28px 20px !important; overflow-x: visible !important; scroll-snap-type: none !important; padding-bottom: 0 !important; } .credit-terms__content > .cr-term { scroll-snap-align: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; row-gap: 10px !important; min-width: 0 !important; } .credit-terms__content > .cr-term .cr-term__text { font-size: 15px !important; line-height: 1.3 !important; } @media (max-width: 900px) { .credit-terms__content { grid-template-columns: repeat(2, 1fr) !important; } } /* Галочка согласия. Замер на светлой плите формы (rgb(228,228,228)): рамка квадрата шла акцентом и давала 1.14 на лаймовой, 1.95 на мятной, 2.80 на красной тёмной при норме 3.0 для нетекстового. Сама галка — фоновая SVG со stroke тем же акцентом, то есть тоже невидима. Берём затемнённый акцент: он для того и заведён — акцент как текст на светлой поверхности. Галку переводим на маску, чтобы цвет шёл из переменной, а не из зашитого в картинку stroke. Правило общее, поэтому действует во ВСЕХ формах и модалках сразу. */ .main-form-checkbox__checkmark { border-color: var(--stock-date-share-text) !important; } .main-form-checkbox__input:checked + .main-form-checkbox__checkmark { border-color: var(--stock-date-share-text) !important; } .main-form-checkbox__checkmark::after { background-image: none !important; background-color: var(--stock-date-share-text) !important; -webkit-mask: url('data:image/svg+xml,') center no-repeat; mask: url('data:image/svg+xml,') center no-repeat; } /* Розыгрыш на мобильном — вариант «дожатый под экран» (выбор заказчика). Было 378x904 при окне 844: низ формы уходил за край, до кнопки приходилось подкручивать. Стало 834 — влезает целиком. Приз при этом ниже (186 против 209), заголовок 22 вместо 26, поля 46 вместо 52. Ниже 900px только. */ @media (max-width: 900px) { .prize-draw { padding: 16px !important; } .prize-draw .prize-draw__side { padding: 10px !important; } .prize-draw .prize-draw__side img { /* 19vh, а не 22: на olive-d правая колонка переносится на строку больше и модалка выходила 859 при окне 844. Запас берём призом — он единственное, что тут тянется без потери смысла. */ max-height: 19vh !important; } .prize-draw__side__title { font-size: 20px !important; line-height: 1.15 !important; } .prize-draw__disclamer { font-size: 11px !important; line-height: 1.3 !important; } .prize-draw .modal__title { font-size: 22px !important; margin-bottom: 4px !important; } .prize-draw .modal__desc { font-size: 13px !important; margin-bottom: 8px !important; } .prize-draw .modal__offer__badge { padding: 6px 14px 6px 6px !important; margin-bottom: 8px !important; } .prize-draw .wrapped-form__inputs { gap: 8px !important; } .prize-draw .app-input { height: 46px !important; } .prize-draw .prize-draw__wrapper { gap: 12px !important; } } /* ── Осмотр multi-2: находки гейта контраста (1440 и 390) ────────────────── */ /* Плашка «Пройти опрос» в мобильном меню. В dev.css у неё зашит коралловый градиент #ff6b6b → #ff8e53 с пульсацией того же цвета: на всех семи темах это пятно чужой палитры, а текст на нём даёт 2.78 при норме 4.5 (замер на 390px). Берём ту же пару, что у кнопки «Позвонить» прямо под ней: заливка основной кнопки, текст --btn-primary-color. Пара уже проверена гейтами и держит требование заказчика «на цветном — белые буквы» (тёмные только на светлом лайме). Замер по семи темам: 4.87 … 13.09. Переменная заливки у тем называется по-разному, отсюда цепочка запасных: --btn_primary-bg есть только у красной тёмной (#af2c2c), --btn-bg — у трёх, у остальных кнопка идёт прямо акцентом. Пульсация остаётся, но своим именем и своим цветом — базовые keyframes `pulse` светят кораллом. */ .mobile-menu .quiz-banner-compact { background: var(--btn_primary-bg, var(--btn-bg, var(--accent))) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, .28) !important; animation: quiz-pulse-accent 2s infinite !important; } .mobile-menu .quiz-banner-compact, .mobile-menu .quiz-banner-compact *, .mobile-menu .quiz-content, .mobile-menu .discount-highlight, .mobile-menu .benefit-text-compact, .mobile-menu .benefit-text-compact * { color: var(--btn-primary-color) !important; -webkit-text-fill-color: var(--btn-primary-color) !important; } /* Значок в плашке — инлайновый svg со stroke="currentColor", а база выбеливает его фильтром. На светлой заливке (лаймовая тёмная тема) белый значок пропадает: 1.35 при норме 3.0. Снимаем фильтр — цвет придёт от текста. */ .mobile-menu .quiz-banner-compact .quiz-icon { filter: none !important; stroke: var(--btn-primary-color) !important; color: var(--btn-primary-color) !important; } @keyframes quiz-pulse-accent { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } } /* Текущий пункт мобильного меню был набран акцентом на почти чёрной панели: 2.94 на красной светлой, 3.62 на синей, 3.64 на индиго при норме 4.5. Акцент на такой подложке до нормы не дотянуть ни на одной из семи тем, поэтому отметка переезжает с цвета на начертание: буквы светлые, как у остальных пунктов, а «где я» показывают жирность и подчёркивание акцентом. */ .mobile-menu__nav-item.--active { color: var(--text-on-dark-panel) !important; -webkit-text-fill-color: var(--text-on-dark-panel) !important; font-weight: 700 !important; text-decoration: underline !important; text-decoration-color: var(--primary-color) !important; text-decoration-thickness: 2px !important; text-underline-offset: 6px !important; } /* Номер выгоды на телефоне. media.css ужимает его с 24px до 20px, и по WCAG это уже не «крупный текст»: норма поднимается с 3.0 до 4.5, а белый по #FB4040 даёт 3.55 (гейт, 390px, красная тёмная). Ниже 1024px — там же, где срабатывает уменьшение, — берём обычный --text-on-accent. */ @media (max-width: 1024px) { .ben-block__number, .ben-block__number * { color: var(--text-on-accent) !important; -webkit-text-fill-color: var(--text-on-accent) !important; } } /* Контурная кнопка героя («Перейти в каталог») на планшете и телефоне. С 1024px плашка героя осталась только под текстом, а кнопки стоят прямо на фоне страницы (см. выше правку про `.hero-carousel__texts`). Цвет у кнопки так и остался белым — от тёмной плашки десктопа: на пяти светлых темах это белые буквы в белой рамке на светлом фоне, замер 1.06…1.10 при норме 4.5, кнопки не видно вовсе. Берём пару фона страницы: буквы --main-text-color (тёмные на светлых темах, белые на тёмных, минимум 15.4), рамка — контурная переменная темы (минимум 4.5). Ховер не трогаем: у него своя заливка и свой текст. */ @media (max-width: 1024px) { .hero-carousel__buttons .btn_outline:not(:hover), .hero-carousel__buttons .btn_outline:not(:hover) * { color: var(--main-text-color) !important; -webkit-text-fill-color: var(--main-text-color) !important; } .hero-carousel__buttons .btn_outline:not(:hover) { border-color: var(--btn-outline-color, var(--primary-color)) !important; } .hero-carousel__buttons .btn_outline:not(:hover) svg, .hero-carousel__buttons .btn_outline:not(:hover) path { stroke: var(--main-text-color) !important; fill: var(--main-text-color) !important; } }