/* ═══════════════════════════════════════════════════════════════ jc-theme.css — JAC redesign (палитра официального jaccar.ru) Подключается ПОСЛЕДНИМ в . Палитра выровнена по фирменному сайту JAC Cars Russia (https://jaccar.ru): • accent #005F7F (petrol/teal — основной brand) • hover #004C66 (darker petrol) • active #00A5CF (light cyan) • bg-soft #F6F7F7 (section soft) Никаких изменений геометрии, layout'а, padding'а, шрифтов, позиций. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ Design tokens Полный token-layer overlay поверх legacy style.css. Назначение токенов — даёт consistency для наших новых правил и понятный handoff бэк-команде (заменяемые значения через :root). ═══════════════════════════════════════════════════════════════ */ :root { /* ─── Color roles ─── */ --jc-accent: #005F7F; /* JAC petrol — официальный jaccar.ru */ --jc-accent-hover: #004C66; /* darker petrol — :hover */ --jc-accent-pressed: #00A5CF; /* light cyan — :active (как у jaccar.ru) */ --jc-accent-soft: #E5F0F4; /* tint — фоновые подсветки */ --jc-accent-strong: #003344; /* deepest petrol — заголовки/контрасты */ --jc-text: #1F2937; /* main — мягкий graphite (slate-800), не jet-black */ --jc-text-soft: #4B5563; /* secondary — slate-600 */ --jc-text-muted: #9CA3AF; /* tertiary, captions — slate-400 */ --jc-text-on-accent: #FFFFFF; --jc-surface: #FFFFFF; /* cards, modals */ --jc-surface-2: #FAFAFB; /* alt cards */ --jc-bg-soft: #F6F7F7; /* sections soft — jaccar.ru */ --jc-bg-strong: #E5E7EB; /* disabled, dividers */ --jc-border: #E5E7EB; --jc-border-strong: #9CA3AF; --jc-border-accent: var(--jc-accent); /* ─── Type scale (rem-based, 1rem = 16px) ─── */ --jc-text-xs: 0.75rem; /* 12 — caption */ --jc-text-sm: 0.875rem; /* 14 — body small */ --jc-text-base: 1rem; /* 16 — body */ --jc-text-md: 1.125rem; /* 18 — body large / h6 */ --jc-text-lg: 1.25rem; /* 20 — h5 */ --jc-text-xl: 1.5rem; /* 24 — h4 */ --jc-text-2xl: 2rem; /* 32 — h3 */ --jc-text-3xl: 2.5rem; /* 40 — h2 */ --jc-text-4xl: 3rem; /* 48 — h1 */ --jc-leading-tight: 1.15; --jc-leading-snug: 1.35; --jc-leading-base: 1.55; --jc-leading-loose: 1.75; --jc-tracking-tight: -0.02em; --jc-tracking-base: 0; --jc-tracking-wide: 0.04em; --jc-tracking-cap: 0.08em; --jc-weight-normal: 400; --jc-weight-medium: 500; --jc-weight-semi: 600; --jc-weight-bold: 700; /* ─── Spacing scale (4pt base) ─── */ --jc-s-1: 4px; --jc-s-2: 8px; --jc-s-3: 12px; --jc-s-4: 16px; --jc-s-5: 20px; --jc-s-6: 24px; --jc-s-8: 32px; --jc-s-10: 40px; --jc-s-12: 48px; --jc-s-16: 64px; --jc-s-20: 80px; --jc-s-24: 96px; /* ─── Radius scale ─── */ --jc-r-0: 0; --jc-r-sm: 4px; --jc-r-md: 8px; --jc-r-lg: 12px; --jc-r-xl: 16px; --jc-r-2xl: 24px; --jc-r-full: 999px; /* ─── Shadow scale (elevation) ─── */ --jc-shadow-sm: 0 1px 3px rgba(11, 11, 14, 0.05); --jc-shadow-md: 0 4px 16px rgba(11, 11, 14, 0.08); --jc-shadow-lg: 0 12px 32px rgba(11, 11, 14, 0.12); --jc-shadow-xl: 0 24px 48px rgba(11, 11, 14, 0.16); --jc-shadow-glow: 0 0 0 3px rgba(0, 95, 127, 0.12); /* ─── Transition tokens ─── */ --jc-t-fast: .15s ease; --jc-t-base: .22s cubic-bezier(.4, 0, .2, 1); --jc-t-slow: .35s cubic-bezier(.4, 0, .2, 1); /* ─── Breakpoints (для документации/JS, в media-queries нельзя) ─── */ --jc-bp-sm: 480px; --jc-bp-md: 768px; --jc-bp-lg: 1024px; --jc-bp-xl: 1440px; /* ─── Z-index scale ─── */ --jc-z-base: 1; --jc-z-dropdown: 100; --jc-z-sticky: 200; --jc-z-modal: 1000; --jc-z-toast: 2000; /* ─── Legacy aliases (для backward compat существующих правил) ─── */ --jc-radius: var(--jc-r-sm); } /* ─── 1. Кнопки — только цвет и радиус ─── */ .btn, .tabs-main__tabs-nav > * { border-radius: var(--jc-radius); } .btn--primary { background: var(--jc-accent); } .btn--primary:hover { /* :hover в оригинале использует filter:brightness(1.1) — не трогаем поведение */ } .btn--secondary { border-color: var(--jc-accent); } .btn--white { color: var(--jc-accent); } /* ─── 2. Инпуты — радиус и цвет фокуса ─── */ .input { border-radius: var(--jc-radius); } .input:focus, .input:focus-visible { border-color: var(--jc-accent); outline: none; } /* ─── 3. Ссылки — hover в JAC red (НЕ кнопки) ─── */ a:hover:not([class*="btn"]):not([class*="header__callback"]):not([class*="footer__phone"]) { color: var(--jc-accent); } /* Кнопки-anchors сохраняют свой text-color на hover */ a.btn--primary:hover, .btn--primary:hover { color: var(--jc-text-on-accent); } /* .btn--white:hover в Step 7 → background стал dark, text должен быть white. НЕ задавать тёмный text — он сольётся с фоном. */ a.btn--white:hover, .btn--white:hover { color: var(--jc-text-on-accent); } /* ─── 4. Цены — главная сумма в акцентном цвете ─── */ .index-car-slider__content-price-current, .price-item__price, [class*="price"]:not([class*="credit"]):not([class*="text"]) { /* Оставляю гибким — селекторы цен у JAC vitmp вариативные. Если что-то задело лишнее, сужу следующим шагом. */ } /* Уверенные точечные правила цен (из разметки jac.vitmp.ru): */ .index-car-slider__content-price-current { color: var(--jc-accent); } /* ═══════════════════════════════════════════════════════════════ STEP 2 — Меню и слайдер Signature: underline-bar 2-3px в JAC red, появляющаяся на hover/active. Один мотив, два места применения. Геометрия не трогается. ═══════════════════════════════════════════════════════════════ */ /* ─── 5. Главное меню — color hover (underline только на active) ─── NB: бэк JAC vitmp удаляет self-link из nav на каждой странице, поэтому "active" = отсутствие пункта. Underline-bar делаем ТОЛЬКО для classes .--active / .active (когда backend начнёт их ставить вместо удаления self-link). Hover — только color-shift, без bar. */ .header__nav .nav__list > li > a { position: relative; color: var(--jc-text); text-decoration: none; transition: color .18s ease; } .header__nav .nav__list > li > a:hover, .header__nav .nav__list > li > a:focus-visible { color: var(--jc-accent); } /* Active state: backend ставит .--active на (для текущей страницы) или на (если переключится на полноценный паттерн). Поддерживаем оба. */ .header__nav .nav__list > li.--active > a, .header__nav .nav__list > li.active > a, .header__nav .nav__list > li > a.--active, .header__nav .nav__list > li > a.active, .header__nav .nav__list > li > span.--active, .header__nav .nav__list > li > .--active { color: var(--jc-accent); position: relative; display: inline-block; text-decoration: none; cursor: default; font-weight: var(--jc-weight-semi); } .header__nav .nav__list > li.--active > a::after, .header__nav .nav__list > li.active > a::after, .header__nav .nav__list > li > a.--active::after, .header__nav .nav__list > li > a.active::after, .header__nav .nav__list > li > span.--active::after, .header__nav .nav__list > li > .--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--jc-accent); } /* Footer-навигация — то же, чтобы system felt coherent */ .footer__nav .nav__list a { position: relative; transition: color .18s ease; } .footer__nav .nav__list a:hover { color: var(--jc-accent); } /* ─── 6. Слайдер моделей — thumbs (S7, J7, JS3…) ─── Оригинал использует ::before c border-bottom и color #005f7f. Мы только перекрашиваем — никакой новой геометрии. */ .index-car-slider__thumbs-item { letter-spacing: 0.04em; /* лёгкий tracking, не ломает width */ } .index-car-slider__thumbs-item:hover, .index-car-slider__thumbs-item:active, .index-car-slider__thumbs-item.active, .swiper-slide-thumb-active .index-car-slider__thumbs-item { color: var(--jc-accent); } .index-car-slider__thumbs-item.active::before, .swiper-slide-thumb-active .index-car-slider__thumbs-item::before { transform: scaleX(1); opacity: 1; } /* hover-underline шире, чем у оригинала (он делал scaleX 0.25 → короткий штрих) */ .index-car-slider__thumbs-item:hover::before { transform: scaleX(0.6); opacity: 1; } /* ─── 7. Swiper кнопки prev/next — radius и hover-tint ─── */ .swiper-button-prev, .swiper-button-next { border-radius: var(--jc-radius); transition: background-color .18s ease, color .18s ease; } .swiper-button-prev:hover, .swiper-button-next:hover { color: var(--jc-accent); } /* swiper-pagination (когда есть): bullets в JAC red на active */ .swiper-pagination-bullet-active { background: var(--jc-accent); } /* ═══════════════════════════════════════════════════════════════ STEP 3 — Типографика: всё семейство Montserrat Montserrat уже подключён в fonts.css (300/400/500/600/700). body уже на нём. Перебиваем места, где остался Frutiger-стек. ═══════════════════════════════════════════════════════════════ */ html { font-family: 'Montserrat', sans-serif; } /* Формы наследуют от родителя (по умолчанию НЕ наследуют) */ input, button, select, textarea { font-family: inherit; } /* Точечно — классы с захардкоженным Frutiger-стеком в оригинале */ .model__gift-text, .model__gift-ico, .model__price-current, .model__price-old, .model__price-credit, .model__info, .contacts, .contacts__phones, .credit-form__list { font-family: 'Montserrat', sans-serif; } /* ═══════════════════════════════════════════════════════════════ STEP 4 — Group A+E: визуальные эффекты + микро-анимации Только: transitions, box-shadow, transform :hover, opacity, focus-rings. Никаких изменений layout/spacing/sizes. Все transforms микро. ═══════════════════════════════════════════════════════════════ */ /* ─── 9. Карточки моделей в каталоге (.model) ─── */ .model { transition: transform var(--jc-t-base), box-shadow var(--jc-t-base); } .model:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow-md); } /* Картинка модели — лёгкий zoom при наведении на карточку */ .model__preview, .model__photo { overflow: hidden; } .model__preview img, .model__photo img { transition: transform .35s cubic-bezier(.4, 0, .2, 1); } .model:hover .model__preview img, .model:hover .model__photo img { transform: scale(1.03); } /* ─── 10. Promo-карточки (акции) ─── */ .promo__item { transition: transform var(--jc-t-base), box-shadow var(--jc-t-base); } .promo__item:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow-lg); } /* Картинка-обёртка обрезает scale, чтобы не вылезало за карточку. Сама карточка .promo__item остаётся overflow:visible — нужно для shadow. */ .promo__item-image { overflow: hidden; } .promo__item-image img { transition: transform .35s cubic-bezier(.4, 0, .2, 1); } .promo__item:hover .promo__item-image img { transform: scale(1.04); } /* ─── 11. Карточки услуг на главной (.progs__item) ─── */ .progs__item { transition: transform var(--jc-t-base), box-shadow var(--jc-t-base); box-shadow: var(--jc-shadow-sm); } .progs__item:hover { transform: translateY(-2px); box-shadow: var(--jc-shadow-md); } /* ─── 12. Кнопки — микро-elevation на hover ─── */ .btn--primary { transition: transform var(--jc-t-fast), box-shadow var(--jc-t-fast), background-color var(--jc-t-fast); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 95, 127, 0.25); } .btn--primary:active { transform: translateY(0); box-shadow: var(--jc-shadow-sm); } /* Внутри swiper-слайдов: shadow обрезается overflow:hidden swiper-wrapper'а. Полностью убираем translateY и shadow на hover. Сохраняем только color-shift через :hover:filter brightness. */ .swiper-slide .btn--primary:hover, .swiper-slide a.btn--primary:hover, .swiper-slide .btn--white:hover, .swiper-slide a.btn--white:hover { transform: none; box-shadow: none; filter: brightness(1.08); } .swiper-slide .btn--primary:active, .swiper-slide .btn--white:active { filter: brightness(0.95); } /* ─── 13. Старая зачёркнутая цена — приглушаем ─── */ del, .price-old, .option__price-old, .catalog-item__pricing-old, .car-main-prices__price-old, .model__price-old { opacity: 0.55; } /* ─── 14. Inputs — focus-ring в JAC red ─── */ .input, .main-form-input { transition: border-color var(--jc-t-fast), box-shadow var(--jc-t-fast); } .input:focus, .input:focus-visible, .main-form-input:focus, .main-form-input:focus-visible { border-color: var(--jc-accent); box-shadow: var(--jc-shadow-glow); outline: none; } /* ─── 15. Картинки-якоря в catalog-item — zoom на hover ─── */ .catalog-item__thumb, .models-carousel__preview, .car-main-photo { overflow: hidden; } .catalog-item__thumb-img, .models-carousel__preview-img, .car-main-photo__img { transition: transform .35s cubic-bezier(.4, 0, .2, 1); } .catalog-item:hover .catalog-item__thumb-img, .models-carousel__slide:hover .models-carousel__preview-img { transform: scale(1.04); } /* ═══════════════════════════════════════════════════════════════ STEP 5 — Group B: типографика (type scale) Применяем --jc-text-* только к h1/h2 и явным title-классам. h3-h6 в JAC переиспользуются для цен (.option__price-current и т.п.) и трогать их = ломать цены. Поэтому targeted-only. Fluid через clamp() — заменяет 4-уровневый @media legacy. ═══════════════════════════════════════════════════════════════ */ /* ─── 17. Заголовок страницы — h1 ─── */ h1, .main-banner__title.h1, .intro__page h1 { font-size: clamp(var(--jc-text-3xl), 5vw, var(--jc-text-4xl)); line-height: var(--jc-leading-tight); letter-spacing: var(--jc-tracking-tight); font-weight: var(--jc-weight-bold); text-wrap: balance; /* убирает orphan-слова на последней строке */ } /* ─── 18. h2 и заголовки секций (явные классы) ─── */ h2, .section__title:is(h1), .car-main-head__title, .special-model-card-main__name, .section-header__heading, .main-heading { font-size: clamp(var(--jc-text-2xl), 3.5vw, var(--jc-text-3xl)); line-height: var(--jc-leading-tight); letter-spacing: var(--jc-tracking-tight); font-weight: var(--jc-weight-bold); text-wrap: balance; } /* Pretty wrap для body-параграфов — не разрывает orphan-слова */ p, li { text-wrap: pretty; } /* ─── 19. Mid-level title-классы (компонентные) ─── */ .credit-form__title, .tradein-form__title, .review-form__title, .model-credit-form__title, .model-page-offer__title, .popup__title { font-size: var(--jc-text-xl); line-height: var(--jc-leading-snug); font-weight: var(--jc-weight-semi); letter-spacing: var(--jc-tracking-base); } /* ─── 20. Карточка-promo title ─── */ .promo__item-title { font-size: var(--jc-text-md); line-height: var(--jc-leading-snug); font-weight: var(--jc-weight-semi); } /* ─── 21. Body-shadows — line-height и tracking ─── */ body { line-height: var(--jc-leading-base); } /* Eyebrow / caps small text — equate letter-spacing для всех текстовых элементов в верхнем регистре (если они есть в разметке оригинала) */ [class*="--caps"], .eyebrow { text-transform: uppercase; letter-spacing: var(--jc-tracking-cap); font-size: var(--jc-text-xs); font-weight: var(--jc-weight-semi); } /* ═══════════════════════════════════════════════════════════════ STEP 6 — Radius scale на контейнеры Кнопки/инпуты — r-sm (4px), карточки — r-md (8px), модалки — r-lg. Image-обёртки внутри карточки получают свой radius, иначе картинка выглядит как квадрат, торчащий из закруглённой карточки. ═══════════════════════════════════════════════════════════════ */ /* ─── 23. Карточки моделей и услуг (medium containers) ─── */ .model, .promo__item, .progs__item, .text-block-flow-icon, .gifts-item-box, .gifts-item-content, .special-model-card-main, .credit-form, .tradein-form, .car-main-prices, .option { border-radius: var(--jc-r-md); } /* Картинки внутри секционных контейнеров получают свой radius (left-corners только, потому что они занимают левую часть flex-карточки). Так контейнер остаётся overflow:visible — внутри work hover-shadow кнопок не обрезаются. */ .credit-form__image { border-radius: var(--jc-r-md) 0 0 var(--jc-r-md); overflow: hidden; } .credit-form__image img { width: 100%; height: 100%; object-fit: cover; } /* На mobile (@media max-width:1023 в legacy: .credit-form { display: block }) image занимает верх — переключаем radius на top-only */ @media (max-width: 1023px) { .credit-form__image { border-radius: var(--jc-r-md) var(--jc-r-md) 0 0; } } /* Image-обёртки внутри карточек — closing top corners */ .promo__item-image, .model__preview, .model__photo, .catalog-item__thumb, .car-main-photo { border-radius: var(--jc-r-md) var(--jc-r-md) 0 0; /* overflow:hidden уже задан в Step 4 для hover-zoom */ } /* Внутренние изображения и оригинальные .progs__item background — match radius */ .text-block-flow-icon .text-block-flow-icon__image, .special-model-card-slider__main { border-radius: var(--jc-r-md); overflow: hidden; } /* ─── 24. Модальные окна / большие панели (large) ─── */ .popup, .popup__content, .modal, .fancybox-content, .app-modal__content { border-radius: var(--jc-r-lg); } /* ─── 24.5. Form-блоки и select dropdowns ─── */ /* Тёмный блок формы заявки (правая колонка на /credit/, /tradein/) */ .model-page-offer, .model-page__col.th-container, .car-main-prices, .model-page-pricing, .model-page-pricing__new, .model-specs { border-radius: var(--jc-r-md); } /* Items внутри model-specs (Мощность, КПП) */ .model-specs-item { border-radius: var(--jc-r-sm); } /* Select2 — fake dropdown поверх native select (Модель, Комплектация) */ .select + .select2 .select2-selection, .select2-selection, .select2-dropdown { border-radius: var(--jc-r-sm) !important; } /* Native select без select2 — также скруглён */ select.select, select.input { border-radius: var(--jc-r-sm); } /* Section divider span'ы внутри form (Ваш автомобиль / Новый автомобиль) — eyebrow-style: small caps tracking. :not([class]) защищает от попадания на select2-внутренние spans и data-car-* attributes. */ .model-page-offer__inputs > span:not([class]):not([data-car-name]):not([data-car-payment]) { display: block; font-size: var(--jc-text-xs); text-transform: uppercase; letter-spacing: var(--jc-tracking-cap); font-weight: var(--jc-weight-semi); opacity: 0.7; margin-bottom: var(--jc-s-2); } /* ─── 25. Badges / tags / счётчики (pill / full radius) ─── */ .model__badge, .option__badge, .section__counter, [class*="badge"], [class*="-tag"]:not([class*="trade"]) { border-radius: var(--jc-r-full); } /* ─── 26. Hero blocks (large panels) ─── */ .intro__page, .main-banner__inner { border-radius: var(--jc-r-lg); } /* Header — скругление снизу + мягкая тень. Legacy уже даёт .header { position: fixed; background: #fff; box-shadow }. Добавляем только border-radius снизу. БЕЗ overflow:hidden — иначе мобильное nav-меню (раскрывающееся вниз) обрежется. */ .header { border-bottom-left-radius: var(--jc-r-lg); /* 12px */ border-bottom-right-radius: var(--jc-r-lg); box-shadow: var(--jc-shadow-md); } /* ─── 27. Header polish: vertical centering + phone-button с иконкой ─── */ /* Центровка логотипа и навигации по вертикали + воздух между logo и nav */ .header-group { align-items: center; gap: var(--jc-s-12); /* 48px вместо legacy 30px */ } /* Logo — native ВСЕГДА виден (любой браузер). На hover поверх img фейдится ::before с background-image от красной версии SVG (logo-accent.svg / jac-footer-accent.svg). Никаких mask-image — bg-image работает везде. Если поменяем --jc-accent в токенах — также обновить fill в *-accent.svg. */ .header__logo a, .footer__logo a { position: relative; display: inline-block; line-height: 0; } .header__logo a img, .footer__logo a img { display: block; } .header__logo a::before, .footer__logo a::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; transition: opacity var(--jc-t-base); } .header__logo a::before { background-image: url("../img/logo-accent.svg"); } .footer__logo a::before { background-image: url("../img/jac-footer-accent.svg"); } .header__logo a:hover::before, .footer__logo a:hover::before { opacity: 1; } /* Между nav-items тоже добавим воздуха */ .header__nav .nav__list { gap: var(--jc-s-8); /* 32px */ } /* Header callback container: всё что справа — кнопкa + телефон */ .header__callback { display: flex; align-items: center; gap: var(--jc-s-3); } /* Telephone-ссылка как outline-кнопка с phone-иконкой */ .header__callback > a[href^="tel:"] { display: inline-flex; align-items: center; gap: var(--jc-s-2); padding: var(--jc-s-2) var(--jc-s-4); border: 1px solid var(--jc-border); border-radius: var(--jc-r-sm); color: var(--jc-text); font-weight: var(--jc-weight-semi); text-decoration: none; transition: border-color var(--jc-t-fast), color var(--jc-t-fast), background-color var(--jc-t-fast); line-height: 1; } .header__callback > a[href^="tel:"]::before { content: ""; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 15.5c-1.2 0-2.4-.2-3.6-.6-.4-.1-.8 0-1 .3l-2.2 2.2c-2.8-1.4-5.2-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.3-1-.4-1.2-.6-2.4-.6-3.6 0-.5-.5-1-1-1H4c-.5 0-1 .5-1 1 0 9.4 7.6 17 17 17 .5 0 1-.5 1-1v-3.5c0-.5-.5-1-1-1z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 15.5c-1.2 0-2.4-.2-3.6-.6-.4-.1-.8 0-1 .3l-2.2 2.2c-2.8-1.4-5.2-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.3-1-.4-1.2-.6-2.4-.6-3.6 0-.5-.5-1-1-1H4c-.5 0-1 .5-1 1 0 9.4 7.6 17 17 17 .5 0 1-.5 1-1v-3.5c0-.5-.5-1-1-1z'/%3E%3C/svg%3E") no-repeat center / contain; } .header__callback > a[href^="tel:"]:hover { color: var(--jc-accent); border-color: var(--jc-accent); } /* "Заказать звонок" — primary red кнопка */ .header__callback__item { display: inline-flex; align-items: center; gap: var(--jc-s-2); padding: var(--jc-s-2) var(--jc-s-4); background: var(--jc-accent); color: var(--jc-text-on-accent); border-radius: var(--jc-r-sm); font-weight: var(--jc-weight-semi); text-decoration: none; transition: background-color var(--jc-t-fast), transform var(--jc-t-fast), box-shadow var(--jc-t-fast); line-height: 1; } .header__callback__item span { color: inherit; } .header__callback__item img { width: 16px; height: 16px; filter: brightness(0) invert(1) !important; /* белая иконка */ } .header__callback__item:hover { background: var(--jc-accent-hover); color: var(--jc-text-on-accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 95, 127, 0.25); } /* Воздух сверху hero — заголовок не упирается в header. В legacy базовый .intro__page без padding-top, есть только в mobile media. Добавляем consistent padding-top на всех breakpoint'ах. */ .intro__page { padding-top: var(--jc-s-16); /* 64px desktop */ padding-bottom: var(--jc-s-12); /* 48px desktop */ } @media (max-width: 1023px) { .intro__page { padding-top: var(--jc-s-12); /* 48px */ padding-bottom: var(--jc-s-8); /* 32px */ } } @media (max-width: 767px) { .intro__page { padding-top: var(--jc-s-10); /* 40px */ } } /* intro__page-inner: legacy = flex column с justify-content:flex-end (контент прижат к низу). Это даёт разные top-отступы для h1 на /credit/ и /tradein/ когда у них разная высота контента. Top-align = одинаковый воздух от header на всех страницах. */ .intro__page-inner { justify-content: flex-start !important; } /* ═══════════════════════════════════════════════════════════════ STEP 7 — Унификация колористики Перекрываем legacy steel-blue #005f7f → JAC accent. Серый разнобой → --jc-text-soft / --jc-text-muted. ═══════════════════════════════════════════════════════════════ */ /* ─── 28. Footer — графитовый фон вместо steel-blue ─── */ .footer { background: var(--jc-text); color: var(--jc-text-on-accent); } .footer a { color: var(--jc-text-on-accent); } .footer a:hover { color: var(--jc-accent); } /* Footer кнопки — унифицированные dimensions (одинаковая высота + ширина). Phone-link и "Заказать звонок" должны быть идентичны. */ .footer__phone, .footer .phone--secondary, .footer .btn--secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--jc-s-2); width: 220px; height: 44px; padding: 0 var(--jc-s-4); box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--jc-r-sm); color: var(--jc-text-on-accent); background: transparent; text-decoration: none; font-weight: var(--jc-weight-semi); line-height: 1; cursor: pointer; transition: border-color var(--jc-t-fast), color var(--jc-t-fast), background-color var(--jc-t-fast); filter: none; } .footer__phone:hover, .footer .phone--secondary:hover, .footer .btn--secondary:hover { color: var(--jc-text-on-accent); background: var(--jc-accent); border-color: var(--jc-accent); filter: none; } /* ─── 29. Пагинация — JAC red вместо steel-blue ─── */ .pagination__item--current, .pagination__item.--active { background: var(--jc-accent) !important; color: var(--jc-text-on-accent) !important; border-radius: var(--jc-r-sm); } .pagination__item:hover { color: var(--jc-accent); border-radius: var(--jc-r-sm); } /* ─── 30. Tags / labels с steel-blue → JAC accent ─── */ .tag--primary, .tag--secondary { color: var(--jc-accent); } /* ─── 31. Прогресс-бары и slider'ы с steel-blue ─── */ .range__progress, .range__filled, .range__active, [class*="progress"][class*="--filled"] { background: var(--jc-accent); } /* ─── 32. Унификация кнопок — все states с safe contrast ─── */ /* .btn--secondary outline → border + text accent */ .btn--secondary { background: var(--jc-surface); color: var(--jc-text); border: 1px solid var(--jc-border); transition: border-color var(--jc-t-fast), color var(--jc-t-fast), background-color var(--jc-t-fast); } .btn--secondary:hover { border-color: var(--jc-accent); color: var(--jc-accent); background: var(--jc-surface); filter: none; /* отменяем legacy brightness(1.1) который выбеливал */ } /* .btn--white (на тёмном фоне) — никогда не делать его brightness:1.1 (станет невидимым) */ .btn--white { background: var(--jc-surface); color: var(--jc-text); transition: background-color var(--jc-t-fast), color var(--jc-t-fast); } .btn--white:hover { background: var(--jc-text); color: var(--jc-text-on-accent); filter: none; } /* .btn_secondary (legacy underscore variant) — приводим к secondary style */ .btn_secondary { background: var(--jc-surface); color: var(--jc-text); border: 1px solid var(--jc-border); } .btn_secondary:hover { border-color: var(--jc-accent); color: var(--jc-accent); filter: none; } /* ─── 33.3. "Показать телефон" + "Заказать обратный звонок" — унифицируем ─── */ .contacts__inner .phone-contacts, .contacts__inner > .btn--secondary { display: inline-flex; align-items: center; justify-content: center; width: 280px; box-sizing: border-box; padding: var(--jc-s-3) var(--jc-s-4); background: var(--jc-surface); color: var(--jc-text); border: 1px solid var(--jc-border); border-radius: var(--jc-r-sm); cursor: pointer; font-weight: var(--jc-weight-semi); text-decoration: none; transition: border-color var(--jc-t-fast), color var(--jc-t-fast), background-color var(--jc-t-fast); line-height: 1.5; } .contacts__inner .phone-contacts:hover, .contacts__inner > .btn--secondary:hover { border-color: var(--jc-accent); color: var(--jc-accent); background: var(--jc-surface); filter: none; } .contacts__inner .phone-contacts span { color: inherit; } /* ─── 33.4. Hero контактов — overlay поверх legacy фотографии ─── Картинка con_bg.jpg сине-серая. Добавляем градиент graphite+accent чтобы вернуть бренд-тон. */ .contacts { position: relative; border-radius: var(--jc-r-md); overflow: hidden; } .contacts::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(11, 11, 14, 0.78) 0%, rgba(11, 11, 14, 0.55) 60%, rgba(0, 95, 127, 0.35) 100% ); pointer-events: none; z-index: 0; } .contacts > * { position: relative; z-index: 1; } /* ─── 33.5. Страница /contacts/ — скругление контейнеров ─── */ .contacts-main__map, .map, .contacts-main__review-form, .review-form, .contacts__phones, .contacts__inner, .contacts-container { border-radius: var(--jc-r-md); } /* Карта обычно содержит iframe — нужен overflow:hidden чтобы iframe скруглился */ .contacts-main__map, .map { overflow: hidden; } /* Контакты-блок (страница /contacts/): значения = solid white, не тонкие. */ .contacts .address--secondary, .contacts .time--secondary { color: #fff; font-weight: var(--jc-weight-medium); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .contacts__inner h4 { color: rgba(255, 255, 255, 0.7); font-weight: var(--jc-weight-semi); font-size: var(--jc-text-xs); text-transform: uppercase; letter-spacing: var(--jc-tracking-cap); margin-bottom: var(--jc-s-2) !important; } /* ─── 33. Адрес/время/телефон — наследуют color от parent (contacts/footer). Legacy: .contacts { color: #fff }, .footer { color: #fff } — оба тёмные. НЕ задаём явный color здесь — иначе ломается контраст там, где .address--secondary находится внутри dark-контейнера (страница "Контакты" с фоном con_bg.jpg). Раньше user-жалоба была про "тусклый" footer-текст — это решается контрастом самого footer-фона (см. секцию footer ниже), не глобальным цветом текста. */ .footer__time, .footer__address, .address--secondary, .time--secondary, .phone--secondary { color: inherit; } /* В footer text-on-dark — белый с высоким opacity для читаемости. */ .footer .footer__time, .footer .footer__address, .footer .address--secondary, .footer .time--secondary, .footer .footer__info, .footer .footer-bottom__info, .footer .phone--secondary, .footer__main-info { color: rgba(255, 255, 255, 0.95); } /* Model-page (страницы /credit/, /tradein/): grid 3 columns. Все 3 col stretching-выровнены по высоте (default grid behavior). Внутри col.item3 legacy задаёт justify-content:flex-end → form прижата к низу и оставляет пустое место сверху. Делаем form full-height, чтобы визуально соответствовала соседней th-container card. */ .model-page__col.item3 > .model-page-offer { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; } /* Inner inputs/buttons block — заполняет оставшееся пространство для consistent look (равная высота с pricing card в item2). */ .model-page__col.item3 > .model-page-offer > .model-page-offer__inputs { flex: 1; display: flex; flex-direction: column; gap: var(--jc-s-3); } /* ═══════════════════════════════════════════════════════════════ STEP 34 — Hero typography redesign (главный баннер) Marketing-приоритизация для повышения конверсии: 1) Urgency-chip (date) — pulsing dot, eyebrow position 2) Brand-protagonist (JAC T9) — big display, brand stripe 3) Slogan-line (ЕМУ ВСЕ ПО ПЛЕЧУ) — supporting weight 4) Offer-line (subtitle) — accent-bar слева, средний вес 5) CTA — uppercase, увеличен, arrow-shift на hover 6) Photo vignette — gradient слева для читаемости Все строго CSS-only поверх legacy DOM, контент не изменён. ═══════════════════════════════════════════════════════════════ */ /* Vignette — gradient overlay на bg-изображении для контраста текста. */ .main-banner__bg { overflow: hidden; } /* Композиция hero: авто строго в правой половине кадра. При cover-кропе на узких viewport'ах сохраняем правый край (где машина), а не центр. */ .main-banner__bg img { object-position: right center !important; } .main-banner__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(11, 15, 22, 0.65) 0%, rgba(11, 15, 22, 0.42) 32%, rgba(11, 15, 22, 0.12) 58%, rgba(11, 15, 22, 0) 78% ); pointer-events: none; } /* Banner-content — рамки и воздух. */ .main-banner .banner-content { max-width: 760px; gap: var(--jc-s-6); } /* (1) DATE — urgency-чип, eyebrow-стиль с pulsing-индикатором. */ .main-banner__date { width: -moz-fit-content; width: fit-content; display: inline-flex; align-items: center; gap: var(--jc-s-2); padding: 8px var(--jc-s-4); background: rgba(0, 95, 127, 0.16); border: 1px solid rgba(0, 95, 127, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--jc-r-full); color: #fff; font-size: var(--jc-text-sm); font-weight: var(--jc-weight-semi); letter-spacing: var(--jc-tracking-cap); text-transform: uppercase; line-height: 1; } .main-banner__date::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--jc-accent); box-shadow: 0 0 0 0 rgba(0, 95, 127, 0.65); animation: jc-banner-pulse 1.8s ease-out infinite; } @keyframes jc-banner-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 95, 127, 0.70); } 70% { box-shadow: 0 0 0 10px rgba(0, 95, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 95, 127, 0); } } /* (2)+(3) TITLE — двухуровневая иерархия. JAC T9
ЕМУ ВСЕ ПО ПЛЕЧУ base = слоган (меньше, medium weight) = модель-протагонист (display, black) */ .main-banner__title.h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: var(--jc-weight-medium); letter-spacing: var(--jc-tracking-cap); line-height: 1.15; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); text-wrap: balance; } .main-banner__title.h1 b { display: block; /* модель сама по себе строка */ margin-bottom: var(--jc-s-2); font-size: clamp(3.25rem, 7.5vw, 6rem); font-weight: 900; letter-spacing: -0.035em; line-height: 0.92; text-transform: none; position: relative; padding-left: var(--jc-s-4); } .main-banner__title.h1 b::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 14%; width: 4px; background: var(--jc-accent); border-radius: 2px; } /* Скрываем
(т.к. уже block — лишний перенос ломает spacing) */ .main-banner__title.h1 br { display: none; } /* (4) SUBTITLE — главный offer, accent-stripe слева. */ .main-banner__subtitle { max-width: 580px; padding-left: var(--jc-s-4); border-left: 3px solid var(--jc-accent); font-size: clamp(1.125rem, 2.1vw, 1.625rem); font-weight: var(--jc-weight-medium); letter-spacing: 0.01em; line-height: var(--jc-leading-snug); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.40); } /* (5) CTA — uppercase, увеличенная. Стрелка в ::after уже есть в legacy (.btn_secondary:after — bg-image arrow-r.svg, hover → arrow-white.svg). НЕ переопределяем content, только смещаем существующую стрелку на hover. */ .main-banner .banner-content .btn { align-self: flex-start; padding: var(--jc-s-4) var(--jc-s-6); max-width: none; font-size: var(--jc-text-md); font-weight: var(--jc-weight-semi); letter-spacing: var(--jc-tracking-wide); text-transform: uppercase; box-shadow: var(--jc-shadow-lg); } .main-banner .banner-content .btn::after { transition: transform var(--jc-t-base); } .main-banner .banner-content .btn:hover::after { transform: translateX(4px); } /* Hover state hero-CTA «Перейти в каталог» (.btn_secondary в .main-banner): фон — petrol, текст — белый. Стрелка-arrow в ::after подменяется legacy на белую через background-image (.btn_secondary:hover:after уже сделан в style.css). */ .main-banner .banner-content .btn_secondary { transition: background-color var(--jc-t-base), color var(--jc-t-base), border-color var(--jc-t-base), transform var(--jc-t-base); } .main-banner .banner-content .btn_secondary:hover, .main-banner .banner-content .btn_secondary:focus-visible { background-color: var(--jc-accent); border-color: var(--jc-accent); color: var(--jc-text-on-accent); } @media (max-width: 768px) { .main-banner__title.h1 b { padding-left: var(--jc-s-3); } .main-banner__title.h1 b::before { width: 3px; } .main-banner__subtitle { padding-left: var(--jc-s-3); border-left-width: 2px; } } /* ─── 22. Reduced motion — уважаем системный prefer ─── */ @media (prefers-reduced-motion: reduce) { .main-banner__date::before { animation: none !important; } .main-banner .banner-content .btn:hover::after { transform: none !important; } .model, .promo__item, .progs__item, .btn--primary, .model__preview img, .model__photo img, .promo__item-image img, .catalog-item__thumb-img, .models-carousel__preview-img, .input, .main-form-input { transition: none !important; } .model:hover, .promo__item:hover, .progs__item:hover, .btn--primary:hover { transform: none !important; } } /* ─── 23. Floating callback widget (фиксированная кнопка-телефон) ─── Внешний виджет приходит со своим красным `rgb(166,25,46)`. Перекрашиваем в JAC petrol, чтобы фиксированная кнопка не выпадала из палитры. */ #callback-widget-button, .callback-button { background-color: var(--jc-accent) !important; border-color: var(--jc-accent) !important; } #callback-widget-button:hover, .callback-button:hover { background-color: var(--jc-accent-hover) !important; border-color: var(--jc-accent-hover) !important; }