/* ============================================= MB CAR — подложка и две темы (светлая / тёмная) Подключается последним. Значения цветов по темам — в variables.css. Вариант подложки: , тема: . ============================================= */ /* ── Краски подложки по темам ── */ :root { --ul-line: rgba(37, 99, 235, .15); --ul-line-strong: rgba(37, 99, 235, .26); --ul-draw: rgba(37, 99, 235, .42); --ul-glow1: rgba(59, 130, 246, .22); --ul-glow2: rgba(14, 165, 233, .14); --blur-surface: blur(18px); --ul-pencil: rgba(52, 54, 60, .62); /* графит по светлой бумаге */ } html[data-theme="dark"] { --ul-line: rgba(120, 165, 255, .20); --ul-line-strong: rgba(120, 165, 255, .34); --ul-draw: rgba(140, 180, 255, .55); --ul-glow1: rgba(59, 130, 246, .30); --ul-glow2: rgba(14, 165, 233, .16); --ul-pencil: rgba(226, 229, 236, .50); /* светлый карандаш по тёмному листу */ } /* ── Подложка: отдельный неподвижный слой, содержимое едет поверх. Именно слой, а не background-attachment: fixed — тот на iPhone не работает. ── */ .site-underlay { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; overflow: hidden; background: linear-gradient(160deg, var(--c-page) 0%, var(--c-page-2) 100%); } .site-underlay::before, .site-underlay::after { content: ""; position: absolute; inset: 0; pointer-events: none; } /* 1. Свечение и косые линии */ [data-bg="1"] .site-underlay::before { background: radial-gradient(60vw 50vh at 12% 8%, var(--ul-glow1), transparent 70%), radial-gradient(50vw 50vh at 92% 88%, var(--ul-glow2), transparent 70%); } [data-bg="1"] .site-underlay::after { background: repeating-linear-gradient(118deg, transparent 0 46px, var(--ul-line) 46px 47px); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 100%); } /* 2. Чертёж: миллиметровка и крупный чертёж седана с размерными линиями */ [data-bg="2"] .site-underlay::before { background: radial-gradient(70vw 60vh at 50% 55%, var(--ul-glow1), transparent 70%), linear-gradient(var(--ul-line-strong) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, var(--ul-line-strong) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(var(--ul-line) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--ul-line) 1px, transparent 1px) 0 0 / 24px 24px; } [data-bg="2"] .site-underlay::after { background: var(--ul-draw); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 380' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E %3Cg stroke-width='3'%3E %3Cpath d='M70 250C68 214 96 200 150 192L262 176C306 136 362 108 446 106L548 108C612 112 660 142 704 176L790 190C826 197 838 220 836 250L770 250A56 56 0 0 0 658 250L302 250A56 56 0 0 0 190 250Z'/%3E %3Ccircle cx='246' cy='250' r='48'/%3E%3Ccircle cx='714' cy='250' r='48'/%3E %3C/g%3E %3Cg stroke-width='2'%3E %3Ccircle cx='246' cy='250' r='32'/%3E%3Ccircle cx='246' cy='250' r='9'/%3E%3Ccircle cx='714' cy='250' r='32'/%3E%3Ccircle cx='714' cy='250' r='9'/%3E %3Cpath d='M246 218V241M246 259V282M214 250H237M255 250H278M223 227L240 244M252 256L269 273M269 227L252 244M240 256L223 273'/%3E %3Cpath d='M714 218V241M714 259V282M682 250H705M723 250H746M691 227L708 244M720 256L737 273M737 227L720 244M708 256L691 273'/%3E %3Cpath d='M300 174C336 142 380 124 440 122L440 174ZM456 122L544 124C592 128 632 150 664 174L456 174Z'/%3E %3Cpath d='M448 174L448 244M286 174L700 174M610 174L628 244M286 180L300 244'/%3E %3Cpath d='M340 196h30M500 196h30M276 168l-16 2l2 10l14-2Z'/%3E %3Cpath d='M78 214C96 206 118 202 140 200L134 216C114 218 96 222 80 228ZM826 212C812 204 798 200 786 198L790 214C804 216 816 220 828 226Z'/%3E %3Cpath d='M110 236H178M782 236H826'/%3E %3C/g%3E %3Cg stroke-width='1.4'%3E %3Cpath d='M30 300H870'/%3E %3Cpath d='M70 262V340M836 262V340M70 328H836M70 328l12-5M70 328l12 5M836 328l-12-5M836 328l-12 5'/%3E %3Cpath d='M246 300V318M714 300V318M246 312H714M246 312l10-4M246 312l10 4M714 312l-10-4M714 312l-10 4'/%3E %3Cpath d='M40 106V250M32 106H60M32 250H60M40 106l-5 12M40 106l5 12M40 250l-5-12M40 250l5-12'/%3E %3Cpath d='M446 106V60M446 60H560M704 176L760 120H850M246 202L200 130H120' stroke-dasharray='6 6'/%3E %3Ccircle cx='446' cy='106' r='5'/%3E%3Ccircle cx='704' cy='176' r='5'/%3E%3Ccircle cx='246' cy='202' r='5'/%3E %3C/g%3E %3C/svg%3E"); -webkit-mask: var(--m) no-repeat center 58% / min(1500px, 96vw) auto; mask: var(--m) no-repeat center 58% / min(1500px, 96vw) auto; } /* 3. Детали: шестерня, тормозной диск, поршень, ключ, пружина (вариант по умолчанию) */ [data-bg="3"] .site-underlay::before { background: radial-gradient(60vw 50vh at 15% 85%, var(--ul-glow1), transparent 70%), radial-gradient(45vw 45vh at 90% 10%, var(--ul-glow2), transparent 70%); } [data-bg="3"] .site-underlay::after { inset: -15%; /* запас под поворот, чтобы в углах не было пустот */ background: var(--ul-line-strong); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='75' cy='75' r='30'/%3E%3Ccircle cx='75' cy='75' r='11'/%3E%3Ccircle cx='75' cy='75' r='38' stroke-width='9' stroke-dasharray='9 10.9' stroke-linecap='butt'/%3E%3Ccircle cx='255' cy='95' r='50'/%3E%3Ccircle cx='255' cy='95' r='40'/%3E%3Ccircle cx='255' cy='95' r='17'/%3E%3Ccircle cx='255' cy='68' r='3.5'/%3E%3Ccircle cx='281' cy='87' r='3.5'/%3E%3Ccircle cx='271' cy='117' r='3.5'/%3E%3Ccircle cx='239' cy='117' r='3.5'/%3E%3Ccircle cx='229' cy='87' r='3.5'/%3E%3Crect x='48' y='200' width='64' height='62' rx='7'/%3E%3Cpath d='M48 213h64M48 222h64M48 231h64'/%3E%3Ccircle cx='80' cy='247' r='7'/%3E%3Cpath d='M72 262L66 318M88 262L94 318'/%3E%3Ccircle cx='80' cy='326' r='14'/%3E%3Cpath d='M205 225L285 305' stroke-width='11'/%3E%3Ccircle cx='198' cy='218' r='15'/%3E%3Ccircle cx='292' cy='312' r='15'/%3E%3Cpath d='M150 150l28 9l-28 9l28 9l-28 9l28 9l-28 9' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask: var(--m) 0 0 / 360px 360px; mask: var(--m) 0 0 / 360px 360px; opacity: .7; transform: rotate(-8deg) scale(1.25); } /* 4. Карбон: плетение и световая полоса */ [data-bg="4"] .site-underlay::before { background: linear-gradient(45deg, var(--ul-line) 25%, transparent 25% 75%, var(--ul-line) 75%) 0 0 / 14px 14px, linear-gradient(45deg, var(--ul-line) 25%, transparent 25% 75%, var(--ul-line) 75%) 7px 7px / 14px 14px; opacity: .75; } [data-bg="4"] .site-underlay::after { background: linear-gradient(115deg, transparent 30%, var(--ul-glow1) 46%, transparent 62%), radial-gradient(50vw 40vh at 85% 90%, var(--ul-glow2), transparent 70%); } /* 5. Колёсный диск: крупный контур справа */ [data-bg="5"] .site-underlay::before { background: radial-gradient(48vw 48vw at 100% 55%, var(--ul-glow1), transparent 68%), radial-gradient(40vw 40vh at 5% 5%, var(--ul-glow2), transparent 70%); } [data-bg="5"] .site-underlay::after { background: var(--ul-line-strong); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='300' cy='300' r='292'/%3E%3Ccircle cx='300' cy='300' r='272'/%3E%3Ccircle cx='300' cy='300' r='228'/%3E%3Ccircle cx='300' cy='300' r='220'/%3E%3Ccircle cx='300' cy='300' r='56'/%3E%3Ccircle cx='300' cy='300' r='22'/%3E%3Cg id='s'%3E%3Cpath d='M282 247L262 82M318 247L338 82'/%3E%3Ccircle cx='300' cy='262' r='7'/%3E%3C/g%3E%3Cg transform='rotate(72 300 300)'%3E%3Cpath d='M282 247L262 82M318 247L338 82'/%3E%3Ccircle cx='300' cy='262' r='7'/%3E%3C/g%3E%3Cg transform='rotate(144 300 300)'%3E%3Cpath d='M282 247L262 82M318 247L338 82'/%3E%3Ccircle cx='300' cy='262' r='7'/%3E%3C/g%3E%3Cg transform='rotate(216 300 300)'%3E%3Cpath d='M282 247L262 82M318 247L338 82'/%3E%3Ccircle cx='300' cy='262' r='7'/%3E%3C/g%3E%3Cg transform='rotate(288 300 300)'%3E%3Cpath d='M282 247L262 82M318 247L338 82'/%3E%3Ccircle cx='300' cy='262' r='7'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask: var(--m) no-repeat right -18vh center / 105vh 105vh; mask: var(--m) no-repeat right -18vh center / 105vh 105vh; } /* 6 и 7. Чертёж насквозь: карандашный рисунок машины с видимой начинкой (оператор и Дима 08.10). Четыре модели — W212, W164, W221, W639 — сменяются при прокрутке: скрипт в header.php ставит . Рисунки собирает tools/gen_underlay_xray.py. №7 — то же на миллиметровке. */ .ul-car { display: none; } [data-bg="6"] .ul-car, [data-bg="7"] .ul-car { display: block; position: absolute; inset: 0; pointer-events: none; background: var(--ul-pencil); opacity: 0; transition: opacity .8s ease; -webkit-mask: var(--m) no-repeat center 56% / min(1700px, 96vw) auto; mask: var(--m) no-repeat center 56% / min(1700px, 96vw) auto; } .ul-car--1 { --m: url("../img/underlay-xray-w212.svg"); } .ul-car--2 { --m: url("../img/underlay-xray-w164.svg"); } .ul-car--3 { --m: url("../img/underlay-xray-w221.svg"); } .ul-car--4 { --m: url("../img/underlay-xray-w639.svg"); } /* №7 — рисунки по фото кузовов от Димы (09.10: «более чёткий контур… фары, фонари, контур крыши, колёса, стёкла»): жирный внешний контур и линии деталей. Собирает tools/gen_underlay_photo.py. Прежние чертежи «насквозь» остались в №6. */ [data-bg="7"] .ul-car--1 { --m: url("../img/underlay-photo-w212.png?v=1009b"); } [data-bg="7"] .ul-car--2 { --m: url("../img/underlay-photo-w164.png?v=1009b"); } [data-bg="7"] .ul-car--3 { --m: url("../img/underlay-photo-w221.png?v=1009b"); } [data-bg="7"] .ul-car--4 { --m: url("../img/underlay-photo-w639.png?v=1009b"); } html[data-car="1"] .ul-car--1, html[data-car="2"] .ul-car--2, html[data-car="3"] .ul-car--3, html[data-car="4"] .ul-car--4 { opacity: 1; } @media (max-aspect-ratio: 1/1) { [data-bg="6"] .ul-car, [data-bg="7"] .ul-car { -webkit-mask-size: 128vw auto; mask-size: 128vw auto; -webkit-mask-position: center 50%; mask-position: center 50%; } } [data-bg="6"] .site-underlay::before { background: radial-gradient(60vw 50vh at 10% 10%, var(--ul-glow1), transparent 70%), radial-gradient(50vw 50vh at 92% 90%, var(--ul-glow2), transparent 70%); } [data-bg="7"] .site-underlay::before { background: radial-gradient(70vw 60vh at 50% 55%, var(--ul-glow1), transparent 70%), linear-gradient(var(--ul-line-strong) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, var(--ul-line-strong) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(var(--ul-line) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--ul-line) 1px, transparent 1px) 0 0 / 24px 24px; } /* 8. Каркасы кузова: четыре силовых каркаса на одном листе, без смены (первый набросок 08.10). Рисунок собирает tools/gen_underlay_skeleton.py; на узком экране — столбик из четырёх. */ [data-bg="8"] .site-underlay::before { background: radial-gradient(60vw 50vh at 10% 10%, var(--ul-glow1), transparent 70%), radial-gradient(50vw 50vh at 92% 90%, var(--ul-glow2), transparent 70%); } [data-bg="8"] .site-underlay::after { background: var(--ul-pencil); --m: url("../img/underlay-skeleton.svg"); -webkit-mask: var(--m) no-repeat center / min(1900px, 98vw) auto; mask: var(--m) no-repeat center / min(1900px, 98vw) auto; } @media (max-aspect-ratio: 1/1) { [data-bg="8"] .site-underlay::after { --m: url("../img/underlay-skeleton-tall.svg"); -webkit-mask: var(--m) no-repeat center / auto 98%; mask: var(--m) no-repeat center / auto 98%; } } @media print { .site-underlay { display: none; } } /* ── Плашки: лёгкое размытие подложки под ними. Только там, где внутри нет выпадающих списков: размытие замыкает слои внутри плашки, и список соседней плашки оказался бы под следующей. ── */ .product-card, .engine-card, .door-picker, .catalog-toolbar, .info-card, .pay-card, .faq-item, .cart-item, .contact-card, .order-card, .order-summary, .delivery-card { -webkit-backdrop-filter: var(--blur-surface); backdrop-filter: var(--blur-surface); } /* ── Объёмные края плашек (оператор 08.10: «чёткие очертания краёв, причём в 3D»): светлая грань сверху, тёмная снизу, рамка и тень под плашкой — плашка «лежит» на подложке. ── */ :root { --edge-line: rgba(15, 23, 42, .12); --edge-3d: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(15, 23, 42, .07), 0 1px 0 rgba(15, 23, 42, .12), 0 12px 26px -10px rgba(15, 23, 42, .28); } html[data-theme="dark"] { --edge-line: rgba(255, 255, 255, .16); --edge-3d: inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -2px 0 rgba(0, 0, 0, .32), 0 2px 0 rgba(0, 0, 0, .40), 0 16px 30px -10px rgba(0, 0, 0, .70); } .product-card, .engine-card, .door-picker, .catalog-toolbar, .info-card, .pay-card, .faq-item, .cart-item, .contact-card, .order-card, .order-summary, .delivery-card, .category-card, .smart-search__card { border: 1px solid var(--edge-line); box-shadow: var(--edge-3d); } /* ── Переключатель темы в шапке: в светлой видна луна, в тёмной — солнце ── */ .theme-toggle .fa-sun { display: none; } html[data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; } html[data-theme="dark"] .theme-toggle .fa-moon { display: none; } /* ── Тёмная тема: то, что токенами не выразить ── */ html[data-theme="dark"] ::-webkit-scrollbar-track { background: #10141C; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A4458; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #56627A; } /* ── Плашки плотнее (оператор 08.10: «слишком сильно видно подложку»): плитки разделов на главной в тёмной теме красились почти прозрачным серым — даём им ту же плотную поверхность. ── */ html[data-theme="dark"] .category-card { background: var(--c-surface); -webkit-backdrop-filter: var(--blur-surface); backdrop-filter: var(--blur-surface); } /* ══ Приглушённые цвета (оператор 09.10.2026: «слишком яркие… особенно синий, белый — пусть будут более сероватые», и в светлой теме тоже). Блок стоит последним и перекрывает краски из variables.css и краски подложки выше. Вернуть прежнюю яркость — удалить этот блок и такой же в конце plates.css. ══ */ html[data-theme="dark"] { --c-blue: #5878AD; --c-accent: #5878AD; --c-accent-hover: #7391C2; --c-blue-light: rgba(88, 120, 173, .16); --c-blue-border: rgba(88, 120, 173, .42); --c-btn-bg: #4C6B9E; --c-btn-bg-hover: #415D8B; --c-text: #C6CBD5; --c-ink: #D2D6DE; --c-gray-900: #D2D6DE; --c-gray-800: #BFC4CE; --c-gray-700: #ABB1BD; --c-gray-600: #979EAC; --c-text-muted: #878F9F; --c-gray-500: #878F9F; --c-on-accent: #E6E9EE; --c-green: #3E8F5F; --c-red: #C85A5A; --ul-line: rgba(140, 152, 178, .13); --ul-line-strong: rgba(140, 152, 178, .22); --ul-draw: rgba(150, 162, 188, .40); --ul-glow1: rgba(70, 88, 125, .20); --ul-glow2: rgba(60, 90, 110, .10); --ul-pencil: rgba(196, 201, 212, .36); } html[data-theme="dark"] .float-nav__btn { filter: saturate(.62) brightness(.9); } html:not([data-theme="dark"]) { --c-blue: #3F66B0; --c-accent: #4A72BC; --c-accent-hover: #3F66B0; --c-blue-light: #E9EEF6; --c-blue-border: #BCCAE2; --c-white: #F3F4F6; --c-page: #E4E7EC; --c-page-2: #D9DDE4; --c-surface: rgba(240, 242, 245, .94); --c-surface-solid: #F0F2F5; --c-field: #F4F5F7; --c-chip: rgba(240, 242, 245, .9); --c-header-bg: rgba(238, 240, 243, .92); --c-gray-50: #EEF0F3; --c-gray-100: #E8EAEE; --c-gray-bg: #EAECF0; --c-ink: #20242C; --c-text: #262B35; --c-btn-bg: #20242C; --c-btn-bg-hover: #3A404B; --c-on-accent: #F1F2F4; --ul-line: rgba(70, 90, 135, .11); --ul-line-strong: rgba(70, 90, 135, .19); --ul-draw: rgba(70, 90, 135, .34); --ul-glow1: rgba(90, 120, 170, .14); --ul-glow2: rgba(80, 130, 150, .09); } html:not([data-theme="dark"]) .float-nav__btn { filter: saturate(.72); } /* ══ Рисованные баннеры в шапке главной (оператор 09.10.2026): кузов тонким контуром по тёмному листу с миллиметровкой — вместо прежних картинок. Включатель и порядок кузовов — inc/hero-sketch.php. Кузов — тот же трафарет, что в подложке №7; на ПК стоит справа от текста, на телефоне — под ним, бледнее. ══ */ /* Фон баннера — БЕЗ миллиметровки: с ней шапка сливалась с подложкой страницы (оператор 09.10). Пять вариантов того же тёмного оттенка, номер ставит inc/hero-sketch.php (класс hero__slide--bgN). */ .hero--sketch .hero__slides { --carw: min(54vw, 980px); /* ширина рисунка кузова */ --floor: calc(50% + var(--carw) * .125); /* высота, на которой стоят колёса кузова */ background: linear-gradient(160deg, #141926 0%, #232B3B 100%); } /* 1. Свет за машиной: мягкое пятно справа, края темнее */ .hero--bg1 .hero__slides { background: radial-gradient(46vw 60% at 72% 52%, rgba(120, 140, 180, .30), transparent 70%), radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45) 100%), linear-gradient(160deg, #161B28 0%, #1E2534 100%); } /* 2. Тёмный металл: широкие косые полосы света, как на пластинах карточек */ .hero--bg2 .hero__slides { background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .40) 100%), linear-gradient(118deg, #171B25 0%, #262D3B 16%, #3A4354 30%, #2A3140 42%, #1A1F2A 58%, #2B3342 76%, #151924 100%); } /* 3. Косая штриховка карандашом: густая справа, сходит на нет к тексту */ .hero--bg3 .hero__slides { background: linear-gradient(160deg, #141926 0%, #222A39 100%); } .hero--bg3 .hero__slides::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(118deg, transparent 0 13px, rgba(160, 172, 196, .13) 13px 14px); -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 78%); mask-image: linear-gradient(90deg, transparent 22%, #000 78%); } /* 4. Студия: тёмная стена, светлее пол, машина стоит на линии пола */ .hero--bg4 .hero__slides { background: radial-gradient(50vw 26% at 72% var(--floor), rgba(140, 158, 195, .26), transparent 70%), linear-gradient(180deg, #131722 0%, #1C2230 calc(var(--floor) - 1px), #3A4355 var(--floor), #262D3B calc(var(--floor) + 60px), #171B26 100%); } /* 5. Чертёжные дуги: тонкие окружности циркулем вокруг машины */ .hero--bg5 .hero__slides { background: linear-gradient(160deg, #141926 0%, #222A39 100%); } .hero--bg5 .hero__slides::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 72% var(--floor), transparent 0 69px, rgba(160, 172, 196, .12) 69px 70px); -webkit-mask-image: radial-gradient(60vw 90% at 72% 55%, #000 30%, transparent 75%); mask-image: radial-gradient(60vw 90% at 72% 55%, #000 30%, transparent 75%); } .hero__sketch { position: absolute; inset: 0; display: block; background: #C2C7D0; opacity: .85; -webkit-mask: var(--m) no-repeat calc(100% - 3vw) 50% / var(--carw) auto; mask: var(--m) no-repeat calc(100% - 3vw) 50% / var(--carw) auto; } .hero__sketch--w221 { --m: url("../img/underlay-photo-w221.png?v=1009b"); } .hero__sketch--w164 { --m: url("../img/underlay-photo-w164.png?v=1009b"); } .hero__sketch--w212 { --m: url("../img/underlay-photo-w212.png?v=1009b"); } .hero__sketch--w639 { --m: url("../img/underlay-photo-w639.png?v=1009b"); } /* ПК: текст привязан к линии пола (оператор 09.10: «довезём бесплатно за линию вниз уходит — такого не должно быть»). Заголовок и абзац любой длины кончаются НАД линией, кнопки стоят ПОД ней — раньше блок стоял по центру шапки, и длинный абзац третьего слайда залезал на пол. */ @media (min-width: 1024px) { .hero--sketch { --floor: calc(50% + min(54vw, 980px) * .125); } .hero--sketch .hero__content, .hero--sketch .hero__content--active { position: absolute; top: 0; height: var(--floor); display: flex; flex-direction: column; justify-content: flex-end; } .hero--sketch .hero__sub { margin-bottom: 22px; } .hero--sketch .hero__cta { position: absolute; top: calc(100% + 26px); left: 0; white-space: nowrap; } } /* Телефон и планшет (оператор 09.10: «машина за буквами — отвратительно, она должна быть отдельно»): кузов стоит в своей зоне сверху, во всю ширину, а заголовок, текст и кнопки — под ним; шапка растёт по содержимому. */ @media (max-width: 1023px) { .hero--sketch { height: auto; } .hero--sketch .hero__slides { --carw: min(96vw, 620px); --floor: calc(12px + var(--carw) * .406); } .hero--sketch .hero__sketch { -webkit-mask: var(--m) no-repeat 50% 12px / var(--carw) auto; mask: var(--m) no-repeat 50% 12px / var(--carw) auto; } .hero--sketch .hero__inner { height: auto; justify-content: flex-start; padding-top: calc(var(--carw-m) * .5625 + 20px); padding-bottom: 84px; --carw-m: min(96vw, 620px); } } /* ══ Смена рисованных баннеров — машина уезжает (оператор 09.10.2026: «не менялись, а сдвигались влево, как будто машина уезжает… след, как будто она пронеслась, и следующий кадр»). Фон шапки один на все слайды и стоит на месте; едет только рисунок: прежний срывается влево, по линии пола проносится светлый след, следующий въезжает справа и тормозит. Скрипт слайдера прежний — он лишь переставляет класс hero__slide--active. ══ */ .hero--sketch .hero__slide { opacity: 1; background: none; transition: none; } .hero--sketch .hero__sketch { transform: translateX(-105%); opacity: 0; } .hero--sketch .hero__slide--active .hero__sketch { transform: none; opacity: .85; } /* Езда показывается ВСЕМ, даже при системной настройке «меньше движения»: у оператора в Windows эффекты анимации выключены, и без этого он (и такие же посетители) езды не видел бы вовсе. Движение короткое, без мигания. */ @media all { /* уезжает: разгон влево и лёгкий смаз. Класс hero__slide--left ставит маленький скрипт в front-page.php слайду, который только что перестал быть текущим (переходом по снятию класса это не делается: браузер обрывает рисунок мгновенно). */ .hero--sketch .hero__slide--left .hero__sketch { animation: mbcar-car-out .75s cubic-bezier(.55, 0, .9, .35) both; } /* въезжает: справа, с торможением, чуть позже уехавшей */ .hero--sketch .hero__slide--active .hero__sketch { transition: none; filter: none; animation: mbcar-car-in 1.05s cubic-bezier(.12, .75, .2, 1) .28s both; } /* след: светлые полосы на высоте кузова, проносятся справа налево между кадрами */ .hero--sketch .hero__slide--active::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; top: calc(var(--floor) - var(--carw) * .2); height: calc(var(--carw) * .2); background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(210, 218, 235, .55) 9px 10px, transparent 10px 23px), linear-gradient(180deg, transparent, rgba(160, 178, 215, .22) 80%, rgba(200, 212, 238, .5)); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 55%, transparent 100%); opacity: 0; animation: mbcar-car-trail .95s cubic-bezier(.3, 0, .6, 1) .1s both; } } @keyframes mbcar-car-in { 0% { transform: translateX(105%); opacity: 0; filter: blur(3px); } 25% { opacity: .85; } 100% { transform: none; opacity: .85; filter: none; } } @keyframes mbcar-car-out { 0% { transform: none; opacity: .85; filter: none; } 80% { opacity: .85; } 100% { transform: translateX(-105%); opacity: 0; filter: blur(3px); } } @keyframes mbcar-car-trail { 0% { transform: translateX(70%) scaleX(.6); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateX(-90%) scaleX(1.5); opacity: 0; } } /* Адрес в верхней полосе — ссылка на карту (оператор 09.10); блок карты встаёт под прилипшей шапкой. */ a.top-bar__location { color: inherit; text-decoration: none; cursor: pointer; } a.top-bar__location:hover { color: var(--c-accent-hover); text-decoration: underline; text-underline-offset: 3px; } #kak-nas-najti { scroll-margin-top: 110px; } /* значок-«капелька» у адреса — светло-зелёный, чтобы было видно, куда нажимать (оператор 09.10); точка внутри — просвет значка, через него видна тёмная полоса шапки */ .top-bar__location .fa-location-dot { color: #7EE2A0; font-size: 1.15em; } a.top-bar__location:hover .fa-location-dot { color: #A6F0C0; } /* Логотип магазина (Дима 09.10: «везде добавить… и на подложке, где кузова»). Картинок две — чёрными линиями для светлой темы и светлыми для тёмной; собирает tools/gen_logo_assets.py. */ .logo-tone--light { display: none; } html[data-theme="dark"] .logo-tone--dark { display: none; } html[data-theme="dark"] .logo-tone--light { display: block; } .logo { flex-direction: row; align-items: center; gap: 10px; } .logo__text { display: flex; flex-direction: column; line-height: 1; } .logo__img { height: 58px; width: auto; flex: none; } .logo__sub { white-space: nowrap; } /* уже 1200 px подпись рядом не помещается (меню наезжало) — название есть в самом рисунке */ @media (max-width: 1199px) { .logo__text { display: none; } .logo__img { height: 62px; } } @media (max-width: 480px) { .logo__img { height: 56px; } } .mobile-nav__logo { display: flex; align-items: center; gap: 8px; } .mobile-nav__logo-img { height: 40px; width: auto; } .footer__logo-img { display: block; width: 170px; height: auto; margin-bottom: 10px; } .footer__logo-img + .footer__logo-name { display: none; } /* название уже в рисунке */ /* на подложке — тем же «карандашом», что и кузова, в левом нижнем углу листа */ .ul-logo { display: none; } [data-bg="6"] .ul-logo, [data-bg="7"] .ul-logo { display: block; position: absolute; left: 3vw; bottom: 4vh; pointer-events: none; width: min(240px, 30vw); aspect-ratio: 480 / 294; background: var(--ul-pencil); -webkit-mask: url("../img/logo-mbcar-dark.png?v=1009") no-repeat center / contain; mask: url("../img/logo-mbcar-dark.png?v=1009") no-repeat center / contain; } /* ══ Вкладки «Характеристики» и «Доставка» в карточке товара (Дима 14.10: «текст слабо читается на прозрачном фоне»): у вкладок не было своей плашки — текст лежал прямо на рисунке подложки. Даём плотную плашку и темнее серый текст внутри; в обеих темах. ══ */ .product-tabs-section, .product-desc-section__inner { background: var(--c-surface-solid); border: 1px solid var(--edge-line); border-radius: var(--r-xl); box-shadow: var(--edge-3d); padding: var(--sp-6); } .product-tabs-section { margin-top: var(--sp-8); } @media (max-width: 640px) { .product-tabs-section, .product-desc-section__inner { padding: var(--sp-4); } } .product-tabs-section .detail-specs__group-title, .product-desc-section__inner .detail-specs__group-title { background: var(--c-gray-bg); color: var(--c-text); } .product-tabs-section .detail-specs__row dt, .product-desc-section__inner .detail-specs__row dt { color: var(--c-gray-700); } .product-tabs-section .detail-specs__row dd, .product-desc-section__inner .detail-specs__row dd { color: var(--c-ink); } .product-tabs-section .detail-delivery__card, .product-desc-section__inner .detail-delivery__card { background: var(--c-surface-solid); } .product-tabs-section .detail-delivery__card-desc, .product-tabs-section .detail-delivery__card-list, .product-desc-section__inner .detail-delivery__card-desc, .product-desc-section__inner .detail-delivery__card-list, .product-tabs-section .detail-specs__note, .product-desc-section__inner .detail-specs__note { color: var(--c-gray-800); } .product-tabs-section .tabs__btn:not(.tabs__btn--active), .product-desc-section__inner .tabs__btn:not(.tabs__btn--active) { color: var(--c-gray-700); }