/* ============================================================================= CarsDirect „Мазно“ — основата на движението (docs/motion-system/predlojenie.md, раздел C). Зарежда се САМО с ключа ($cdMotion, config/motion.php), веднага след light.css. Всяко правило е под html.cd-m. Компонентите не си измислят скорости и криви — само тези. Под основата — областите (главата, търсенето, обявата, началната), всяка под свой заглавен ред. Един файл на всяка страница: редът е основата → главата → търсенето → обявата → началната (по-късното печели при равна тежест). Началната е в три раздела: 4 (общото с „Коли от …“), 5 (парче 1 — нощта и плочките) и 6 (парче 3 — лентите с коли). Анимира се само transform и opacity (+ grid-template-rows за разгъване; + растежът на плочките и на точката под тях на началната — назовано изключение, раздел 5). ============================================================================= */ :root{ --cd-dur-press:90ms; /* :active */ --cd-dur-1:150ms; /* цвят, мишка, смяна на икона, всяко малко излизане */ --cd-dur-2:240ms; /* падащ панел, диалог, разгъване, съобщение, тъмен фон, излизане на лист */ --cd-dur-3:320ms; /* влизане на лист, новата страница */ --cd-dur-page:440ms; /* снимката на колата + листът на обявата, общо */ --cd-ease-out:cubic-bezier(.2,.8,.2,1); /* влизане */ --cd-ease-in:cubic-bezier(.4,0,1,1); /* излизане */ --cd-ease-std:cubic-bezier(.2,0,0,1); /* промяна на място */ --cd-shift-sm:8px; --cd-shift-md:16px; --cd-shift-lg:96px; --cd-sheet-from:100%; --cd-press:.97; --cd-lift:-2px; --cd-zoom:1.03; --cd-scrim:rgba(15,23,32,.42); /* Изплуване ред по ред — само в панел, който се отваря (групите във „Филтри“; менюто ☰ от 10.10 е без). */ --cd-stagger:30ms; --cd-stagger-0:40ms; /* Слоевете: закачен ред 900 < глава 1000 < долна лента 1040 < тъмен фон и прозорци 10000 < съобщение 10100. Бисквитките са на 9999 — под тъмния фон. */ --cd-z-sticky:900; --cd-z-header:1000; --cd-z-float:1040; --cd-z-overlay:10000; --cd-z-toast:10100; --cd-r-sheet:18px; /* Менюто ☰ — лист отдясно, ТОЧНО както е измерено на porsche.de (10.10, scratchpad/porsche/spec.md; решение на собственика: „остави го както е — оттам идва премиум усещането“). Не се закръглят към другите токени и не се скъсяват: път 1000 px (не 100% — на телефон първите ~0,16 s листът още е извън екрана и само фонът потъмнява), навътре 600 ms cubic-bezier(0,0,.2,1) — влиза бързо и спира плавно; навън 600 ms cubic-bezier(.5,0,.6,1) — от бавно към бързо (при тях е „.6s cubic-bezier(.4,0,.5,1) reverse“ — същата крива наобратно), извън екрана след ~285 ms; фонът rgba(0,0,0,.6) за 400 ms ease, БЕЗ размазване (blur тежи на телефона). */ --cd-menu-dur:600ms; --cd-menu-x:1000px; --cd-menu-in:cubic-bezier(0,0,.2,1); --cd-menu-out:cubic-bezier(.5,0,.6,1); --cd-menu-scrim:rgba(0,0,0,.6); --cd-menu-scrim-dur:400ms; /* „Сцената“ на началната (парче 1, раздел 5) — две НАЗОВАНИ ИЗКЛЮЧЕНИЯ от петте скорости горе, измерени на porsche.com и одобрени от собственика (docs/motion-system/predlojenie.md). Не са отговор на натискане и не се закръглят към 90–440 ms. НОЩТА: 1,2 s — бавно тръгва, меко спира. РАСТЕЖЪТ: плочката под мишката и точката под лентата, 0,6 s. --cd-night е цветът на нощта (#010205 на Porsche — почти черно, с капка синьо). */ --cd-dur-scene:1200ms; --cd-ease-scene:cubic-bezier(.4,0,.5,1); --cd-night:#010205; --cd-dur-grow:600ms; --cd-ease-grow:cubic-bezier(0,0,.2,1); /* Таванът на широкото съдържание на началната от 992 px: плочките (5.3), лентите с коли (6.5) и заглавието на марките (7) са с един ляв ръб. 1560 px (собственикът, 14.10: „горните 4 ми се струват малко широки… не колкото главата, ама малко“) — на 1920 редът с плочките беше 1748 px, главата е 1200. Беше 2200. */ --cd-shir:1560px; } @media (prefers-reduced-motion:reduce){ :root{--cd-dur-press:0ms;--cd-dur-2:var(--cd-dur-1);--cd-dur-3:var(--cd-dur-1);--cd-dur-page:0ms; --cd-shift-sm:0px;--cd-shift-md:0px;--cd-shift-lg:0px;--cd-sheet-from:0%; --cd-press:1;--cd-lift:0px;--cd-zoom:1;--cd-stagger:0ms;--cd-stagger-0:0ms; --cd-menu-dur:var(--cd-dur-1);--cd-menu-x:0px;--cd-menu-scrim-dur:var(--cd-dur-1);} html.cd-m{scroll-behavior:auto} html.cd-m *,html.cd-m *::before,html.cd-m *::after{animation-duration:.01ms!important; animation-iteration-count:1!important;transition-duration:.01ms!important} html.cd-m .cd-layer,html.cd-m .cd-scrim,html.cd-m .cd-toast{animation-duration:var(--cd-dur-1)!important; transition-duration:var(--cd-dur-1)!important} /* без път — само кратко избледняване */ html.cd-m .cd-layer.is-entering{animation-name:cd-m-fade-in!important} html.cd-m .cd-layer.is-leaving{animation-name:cd-m-fade-out!important} } /* light.css: --transition беше „all .5s“ (47 места) — сега само цвят и прозрачност. */ html.cd-m{-webkit-tap-highlight-color:transparent; --transition:color var(--cd-dur-1) var(--cd-ease-std),background-color var(--cd-dur-1) var(--cd-ease-std), border-color var(--cd-dur-1) var(--cd-ease-std),opacity var(--cd-dur-1) var(--cd-ease-std); --transition2:var(--transition)} /* light.css:140-149 и :207-215 („all .3s“ на всяка връзка и снимка) — същите селектори, :where() не добавя тежест, тъй че всяко правило с клас пак печели, както досега. */ :where(html.cd-m) a,:where(html.cd-m) a:active,:where(html.cd-m) a:focus,:where(html.cd-m) a:hover, :where(html.cd-m) .img,:where(html.cd-m) img{ transition:color var(--cd-dur-1) var(--cd-ease-std),opacity var(--cd-dur-1) var(--cd-ease-std)} /* Главата над закачения ред на търсенето (вграден z-index 900); беше 5. */ html.cd-m .header{z-index:var(--cd-z-header)} /* Черната лента е fixed без top: при заключен скрол (body fixed, top:-Y) тя тръгваше с тялото нагоре. */ html.cd-m .header .mobile-top{top:0} /* --------------------------------------------------------------------------- Слоеве — CD.layer (cd-motion.js). Слоят идва от сървъра с hidden; CD.layer маха hidden и слага .cd-layer .is-open .is-entering, при затваряне .is-leaving и пак hidden. Вид движение (клас на слоя): cd-layer--sheet (лист под 768 px, диалог над), --up (лист винаги), --dialog, --drawer (лист отдясно — менюто ☰), без клас — избледняване. --------------------------------------------------------------------------- */ html.cd-m .cd-layer[hidden]{display:none!important} html.cd-m .cd-layer{z-index:calc(var(--cd-z-overlay) + 1 + var(--cd-depth,0) * 2)} html.cd-m .cd-layer:focus{outline:none} /* Фокус, даден или върнат от слоя след пръст или мишка (cd-motion.js: tiho, CD.focus) — без пръстен, докато не излезе от елемента. След клавиш атрибутът го няма и пръстенът си е на мястото. */ html.cd-m [data-cd-tiho]:focus-visible{outline:none!important} html.cd-m .cd-m-lift{z-index:calc(var(--cd-z-overlay) + 1)!important} html.cd-m .cd-layer.is-entering{animation:cd-m-fade-in var(--cd-dur-2) var(--cd-ease-out) backwards} html.cd-m .cd-layer.is-leaving{animation:cd-m-fade-out var(--cd-dur-1) var(--cd-ease-in) forwards} html.cd-m :is(.cd-layer--sheet,.cd-layer--up).is-entering{animation:cd-m-sheet-in var(--cd-dur-3) var(--cd-ease-out) backwards} html.cd-m :is(.cd-layer--sheet,.cd-layer--up).is-leaving{animation:cd-m-sheet-out var(--cd-dur-2) var(--cd-ease-in) forwards} html.cd-m .cd-layer--dialog.is-entering{animation:cd-m-dialog-in var(--cd-dur-2) var(--cd-ease-out) backwards} html.cd-m .cd-layer--dialog.is-leaving{animation:cd-m-fade-out var(--cd-dur-1) var(--cd-ease-in) forwards} @media (min-width:768px){ html.cd-m .cd-layer--sheet.is-entering{animation:cd-m-dialog-in var(--cd-dur-2) var(--cd-ease-out) backwards} html.cd-m .cd-layer--sheet.is-leaving{animation:cd-m-fade-out var(--cd-dur-1) var(--cd-ease-in) forwards} } /* Лист отдясно (менюто ☰): една плоскост, само transform; числата са --cd-menu-* горе. Редовете нямат свое движение. */ html.cd-m .cd-layer--drawer.is-entering{animation:cd-m-drawer-in var(--cd-menu-dur) var(--cd-menu-in) backwards} html.cd-m .cd-layer--drawer.is-leaving{animation:cd-m-drawer-out var(--cd-menu-dur) var(--cd-menu-out) forwards} /* Ред по ред: .cd-stagger > * или [data-cd-row]; CD.layer слага на всеки ред data-cd-row="0…7" — поредния му номер. Правилото е само по атрибута: с „.cd-stagger > *“ всяко .is-entering/.is-leaving преизчисляваше целия слой. Номерът е в атрибута, не в променлива (беше --cd-i с @property, за да не се наследява): самото @property караше Chrome да преизчислява ЦЕЛИЯ документ два пъти при всяка смяна на медийните условия (завъртане, друг праг на ширината, мишка/допир) — без него същото засяга само елементите с такива правила (10.10, мерено на /search: 3 665 срещу 1 767 елемента). Никога в списъка с коли. */ html.cd-m .cd-layer.is-entering [data-cd-row]{ animation:cd-m-row-in var(--cd-dur-2) var(--cd-ease-out) backwards; animation-delay:var(--cd-stagger-0)} html.cd-m .cd-layer.is-entering [data-cd-row="1"]{animation-delay:calc(var(--cd-stagger-0) + var(--cd-stagger))} html.cd-m .cd-layer.is-entering [data-cd-row="2"]{animation-delay:calc(var(--cd-stagger-0) + 2 * var(--cd-stagger))} html.cd-m .cd-layer.is-entering [data-cd-row="3"]{animation-delay:calc(var(--cd-stagger-0) + 3 * var(--cd-stagger))} html.cd-m .cd-layer.is-entering [data-cd-row="4"]{animation-delay:calc(var(--cd-stagger-0) + 4 * var(--cd-stagger))} html.cd-m .cd-layer.is-entering [data-cd-row="5"]{animation-delay:calc(var(--cd-stagger-0) + 5 * var(--cd-stagger))} html.cd-m .cd-layer.is-entering [data-cd-row="6"]{animation-delay:calc(var(--cd-stagger-0) + 6 * var(--cd-stagger))} html.cd-m .cd-layer.is-entering [data-cd-row="7"]{animation-delay:calc(var(--cd-stagger-0) + 7 * var(--cd-stagger))} @keyframes cd-m-fade-in{from{opacity:0}} @keyframes cd-m-fade-out{to{opacity:0}} @keyframes cd-m-sheet-in{from{transform:translateY(var(--cd-sheet-from))}} @keyframes cd-m-sheet-out{to{transform:translateY(100%)}} @keyframes cd-m-dialog-in{from{opacity:0;transform:translateY(var(--cd-shift-sm))}} /* --cd-menu-ot: откъде тръгва листът, ако движението му е прекъснато по средата (слага го cd-motion.js, „Главата“, само тогава) — продължава от мястото си, без скок. Обикновено го няма: влиза от --cd-menu-x, излиза от 0. */ @keyframes cd-m-drawer-in{from{transform:translateX(var(--cd-menu-ot,var(--cd-menu-x)))}} @keyframes cd-m-drawer-out{from{transform:translateX(var(--cd-menu-ot,0px))}to{transform:translateX(var(--cd-menu-x))}} @keyframes cd-m-row-in{from{opacity:0;transform:translateY(var(--cd-row-from,var(--cd-shift-sm)))}} /* Обща обвивка за лист/диалог — по желание (cd-sheet, cd-sheet--full за „Филтри“). В покой е БЕЗ transform: иначе става рамка за изскачащите менюта на VirtualSelect (cd-search.css:1638-1650). */ html.cd-m .cd-sheet{position:fixed;left:0;right:0;bottom:0;max-height:88dvh;display:flex;flex-direction:column; background:#fff;border-radius:var(--cd-r-sheet) var(--cd-r-sheet) 0 0;padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -12px 30px -12px rgba(15,23,32,.3);overflow:hidden;overscroll-behavior:contain} html.cd-m .cd-sheet--full{top:0;max-height:none;height:100dvh;border-radius:0} @media (min-width:768px){ html.cd-m .cd-sheet:not(.cd-sheet--full){inset:0;margin:auto;width:min(560px,calc(100vw - 32px));height:max-content; max-height:min(88dvh,760px);border-radius:var(--cd-r-sheet);box-shadow:0 24px 60px -20px rgba(15,23,32,.45)} } /* Тъмният фон — един за всички слоеве, от CD.layer. С .cd-scrim-under (менюто) главата е над него. Слой над слой: --cd-depth (от CD.layer) го качва точно под горния слой с фон — долният слой потъмнява. */ html.cd-m .cd-scrim{position:fixed;inset:0;z-index:calc(var(--cd-z-overlay) + var(--cd-depth,0) * 2);background:var(--cd-scrim);opacity:0;visibility:hidden; transition:opacity var(--cd-dur-2) var(--cd-ease-in),visibility 0s linear var(--cd-dur-2)} html.cd-m .cd-scrim.is-open{opacity:1;visibility:visible;transition:opacity var(--cd-dur-2) var(--cd-ease-out),visibility 0s} html.cd-m.cd-scrim-under .header{z-index:calc(var(--cd-z-overlay) + 1)} /* Фонът на менюто ☰ (porsche.de): черно 60%, 400 ms ease навътре и навън, без blur. Класът стои, докато листът излиза. */ html.cd-m.cd-scrim-under .cd-scrim{background:var(--cd-menu-scrim); transition:opacity var(--cd-menu-scrim-dur) ease,visibility 0s linear var(--cd-menu-scrim-dur)} html.cd-m.cd-scrim-under .cd-scrim.is-open{transition:opacity var(--cd-menu-scrim-dur) ease,visibility 0s} /* Съобщение — CD.toast(текст, 'ok'|'err'). Долу в средата, над лентата с бутоните на обявата. */ html.cd-m .cd-toast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--cd-z-toast); display:block;width:fit-content;max-width:420px;margin:0 auto;padding:12px 16px;border-radius:12px; background:#111827;color:#fff;font:600 14px/1.35 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center; box-shadow:0 10px 24px -10px rgba(0,0,0,.5);pointer-events:none;opacity:0;transform:translateY(var(--cd-shift-sm)); transition:opacity var(--cd-dur-1) var(--cd-ease-in),transform var(--cd-dur-1) var(--cd-ease-in)} html.cd-m .cd-toast:empty{display:none} html.cd-m .cd-toast.is-open{opacity:1;transform:none;transition:opacity var(--cd-dur-2) var(--cd-ease-out),transform var(--cd-dur-2) var(--cd-ease-out)} html.cd-m .cd-toast--err{background:#B91822} /* Над долната лента на обявата и над „Запази“ в търсенето; right 74 px (16 + 42 + 16) — колоната на ↑ остава свободна. БЕЗ body:has() (09.10): с него всеки вмъкнат елемент (парсерът, Livewire) караше браузъра да преизчислява и стотици карти — „Търси“ → /search рисуваше по-късно. Класовете на са същото условие: .cd-m-lbar (лентата на обявата — от сървъра, layouts/app), .cd-m-fab („Запази“) и .cd-m-chat (балонът на чата) — от cd-motion.js (CD.marks). Тежестта е същата. */ @media (max-width:991.98px){ html.cd-m:is(.cd-m-lbar,.cd-m-fab) body .cd-toast{bottom:calc(84px + env(safe-area-inset-bottom));right:74px} } /* Натискане (P1), по желание: .cd-press за бутони, .cd-veil за карти и редове (воал, без мащаб). */ html.cd-m .cd-press{transition:transform var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .cd-press:active{transform:scale(var(--cd-press))} html.cd-m .cd-veil{position:relative} html.cd-m .cd-veil::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:0;pointer-events:none; transition:opacity var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .cd-veil:active::after{opacity:.06} /* Връзка без свое натискане (ЧЗВ, контакти, /s/*, текстът на /koli-ot-*): притъмнява — tap-highlight е махнат по-горе. Нулева тежест, всяко правило на областите печели. Без бутони, карти и връзки със снимка (воал/мащаб). */ /* :active веднага след a[href]: останалото (с :has()) се проверява само за натиснатата връзка. */ :where(html.cd-m a[href]:active:not(.btn,.theme-btn,.nav-link,.navbar-brand,#scroll-top,[class*="cd-"],[class*="cdk-"], .cd-result-card a,.car-item a,.suggested-card a,[data-vt-card] a):not(:has(img,picture,video))){opacity:.7} /* .theme-btn (light.css:726-756: „all .5s“, кръгът под него — .5s) — „Виж всички“ на началната, формите на старата тема. Само цвят и фон по токените, натискане P1. „Профил“ в менюто си има свое (долу, „Главата“). */ html.cd-m .theme-btn{transition:color var(--cd-dur-1) var(--cd-ease-std),background-color var(--cd-dur-1) var(--cd-ease-std), border-color var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .theme-btn::before{transition:transform var(--cd-dur-2) var(--cd-ease-std)} html.cd-m .theme-btn:active{transform:scale(var(--cd-press))} /* Балонът на чата (cd-chat.js, z-index 99998) и лентата за сравнение (cd-compare.js, 99996) — под тъмния фон, докато има отворен слой (иначе стоят над „Покажи N обяви“, „Купи сега“ и избора на марка) или листът на VirtualSelect (Година, Пробег, Подреди по). */ /* Разписано, не :is(…) отдясно: такъв селектор се проверява срещу ВСЕКИ елемент при всяко пресмятане на стиловете (а преходът между страниците пресмята целия документ два пъти). С клас най-вдясно — само срещу елементите с него. Тежестта е същата (всички в :is() бяха по един клас). Същото по-долу навсякъде, където е писано „разписано“. */ html.cd-m.cd-layer-open .cd-chat-fab,html.cd-m.cd-layer-open .cd-chat-panel,html.cd-m.cd-layer-open .cd-cmp-bar, html.cd-m body.vscomp-popup-active .cd-chat-fab,html.cd-m body.vscomp-popup-active .cd-chat-panel, html.cd-m body.vscomp-popup-active .cd-cmp-bar{z-index:calc(var(--cd-z-overlay) - 1)} /* Заключен скрол на компютър (CD.lock): лентата за превъртане изчезва и всичко position:fixed отскача надясно с ширината ѝ — балоните с 15 px, прозорецът в средата със 7,5. Докато заключването беше в самото натискане, това не се виждаше; късното (late — марка/модел) идва ~0,3 s след отварянето, пред очите (11.10). --cd-sbw е ширината на лентата (cd-motion.js, lenta); на телефон я няма и правилата не местят нищо. Листът под 768 px остава на цяла ширина. */ html.cd-m.cd-locked .cd-chat-fab,html.cd-m.cd-locked .cd-chat-panel,html.cd-m.cd-locked #scroll-top{margin-right:var(--cd-sbw,0px)} html.cd-m.cd-locked .cd-cmp-bar{margin-left:calc(var(--cd-sbw,0px) / -2)} @media (min-width:768px){ html.cd-m.cd-locked .cd-mmp-overlay{margin-right:var(--cd-sbw,0px)} } /* Общи за много страници. */ /* 74 px отдолу (cd-redesign.css:1654) — само където има лента с бутони. Лентата я има само на обявата (route view) — .cd-m-lbar идва от сървъра (layouts/app), тъй че е вярно още от първото рисуване. Без body:not(:has()) — виж .cd-toast горе. */ @media (max-width:991.98px){ html.cd-m:not(.cd-m-lbar) body{padding-bottom:0} } /* Обратното броене на картите: цифри с еднаква ширина и запазено място — значката не трепти и не расте. */ html.cd-m :is(.cd-badge-time,.cd-countdown-strip) .timeleft{font-variant-numeric:tabular-nums} html.cd-m .cd-badge-time .timeleft{display:inline-block;min-width:9.5em;text-align:center} html.cd-m .cd-countdown-strip .timeleft{display:inline-block;min-width:8.6em} /* Входът: дошъл ли е с преход между страниците, cdAuthIn не се изиграва втори път (cd-auth.css:151). */ html.cd-m.cd-vt-came .cd-auth--full .cd-auth-inner{animation:none} /* ============================================================================= 1. ГЛАВАТА — менюто ☰ (лист отдясно), звездата, бутонът ↑. На всяка страница, и в блога. ============================================================================= */ /* „Мазно“ — главата, менюто ☰ (лист отдясно), долната лента и бутонът ↑. Всяко правило под html.cd-m; само токените от основата горе. */ /* ---------- Менюто ☰ до 991 px: плътен лист ОТДЯСНО, точно като porsche.de (решение на собственика, 10.10; заменя „завесата“ от 08.10) ---------- Листът е под горната лента и стига до долу; главата и ☰ остават, ☰ става ✕ на място. Влиза и излиза с --cd-menu-* (основата горе: 1000 px път, 600 ms, двете криви, фонът 400 ms) — движението е в „Слоеве“, .cd-layer--drawer. Редовете пътуват с листа, без свое движение. Скролът се заключва и фокусът влиза чак щом листът е кацнал (CD.layer, late). „Намалено движение“: без път, избледняване за --cd-dur-1 (основата горе). Отваря го CD.layer (cd-motion.js, „Главата“), не Bootstrap. Затворено е скрито, каквото и да е направил Bootstrap преди скрипта. Цветовете остават от темата (бяло; в блога — тъмната глава). .cd-layer--drawer го слага скриптът: ако той не тръгне, менюто се отваря по стария път (Bootstrap). */ @media (max-width:991.98px){ html.cd-m #main_nav.cd-layer--drawer:not(.is-open){display:none!important} /* В покой БЕЗ transform (и без will-change): листът е fixed вътре в главата и не бива да става рамка за нищо. */ html.cd-m #main_nav.is-open{display:block!important;position:fixed;left:0;right:0;top:var(--cd-menu-top,82px);bottom:0; max-height:none;overflow-y:auto;overscroll-behavior:contain;padding:6px 12px calc(14px + env(safe-area-inset-bottom)); border-radius:0;box-shadow:none} /* Редовете: обикновени връзки, 46 px, стрелка вдясно; натискане = лек воал (P1). */ html.cd-m #main_nav .navbar-nav .nav-link{position:relative;display:flex;align-items:center;justify-content:flex-start; min-height:46px;margin-right:0;padding:11px 10px;border-radius:10px} html.cd-m #main_nav .navbar-nav .nav-link::before{content:"";position:absolute;inset:0;width:auto;height:auto;transform:none;z-index:0;border-radius:inherit;background:currentColor; opacity:0;pointer-events:none;transition:opacity var(--cd-dur-press) var(--cd-ease-std)} html.cd-m #main_nav .navbar-nav .nav-link:active::before{opacity:.06} html.cd-m #main_nav .navbar-nav .nav-link:not(.my-profile)::after, html.cd-m #main_nav .navbar-nav > div .nav-link.my-profile::after{content:"";flex:none;width:7px;height:7px;margin:0 3px 0 auto; border:solid #C2C8D0;border-width:0 2px 2px 0;transform:rotate(-45deg)} /* Страницата, на която сте — в червено (блогът си пази белия цвят). */ html.cd-m body:not(.cd-blog) #main_nav .navbar-nav .nav-link.active:not(.my-profile){color:var(--theme-color)} /* Едно червено хапче „Профил“. „Администрация“ (само за админа) е обикновен ред. */ html.cd-m #main_nav .navbar-nav .nav-link.my-profile{display:block;text-align:center;margin:10px 0 2px!important; padding:13px 16px!important;border-radius:999px;line-height:1.3} html.cd-m #main_nav .navbar-nav .nav-link.my-profile:active{transform:scale(var(--cd-press))} html.cd-m #main_nav .navbar-nav .nav-link.my-profile:active::before{opacity:0} html.cd-m #main_nav .navbar-nav > div{margin-right:0!important} html.cd-m #main_nav .navbar-nav > div .nav-link.my-profile{display:flex;text-align:left;margin:0!important;padding:11px 10px!important; border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--color-dark)!important} html.cd-m .cd-blog #main_nav .navbar-nav > div .nav-link.my-profile{color:rgba(255,255,255,.74)!important} html.cd-m #main_nav .navbar-nav > div .nav-link.my-profile:active{transform:none} html.cd-m #main_nav .navbar-nav > div .nav-link.my-profile:active::before{opacity:.06} html.cd-m #main_nav .navbar-nav > div .nav-link.my-profile i{margin:0} } /* Менюто на телефон (собственикът, 19.10: „много по-премиум“). След три предложения и две по-тесни — бяло; „без тези линии между нещата, просто с въздух“, „всички с еднаква големина“, без групи, „VIN проверката да не е горе“. Редът (с order, само тук; на компютър е както си е): Търсене, Въпроси, Блог, VIN проверка (когато е пусната), Контакт. „Начало“ го няма — логото води там. Страницата, на която сте — малка червена точка след думата. Червеното хапче „Профил“ го няма — долу е меката карта на профила (или „Вход“ и „Регистрация“) и номерът с часовете и три кръгли иконки: обаждане, Viber, WhatsApp (layouts/header, .cd-mm-dolu). В блога главата е тъмна — там същото, на тъмно. Каквото е над това в този файл (листът, плъзгането, натискането) си остава. */ @media (max-width:991.98px){ html.cd-m #main_nav.is-open{padding:18px 28px calc(18px + env(safe-area-inset-bottom))} html.cd-m #main_nav .navbar-nav{min-height:100%} html.cd-m #main_nav .navbar-nav > li:first-child{display:none} html.cd-m #main_nav .navbar-nav > li:has(> a[href$="/proverka-vin"]){order:1} html.cd-m #main_nav .navbar-nav > li:has(> a[href$="/contact"]), html.cd-m #main_nav .navbar-nav > div, html.cd-m #main_nav .navbar-nav > li.d-lg-none{order:2} html.cd-m #main_nav .navbar-nav > li.cd-mm-dolu{order:3} html.cd-m #main_nav .navbar-nav .nav-link:not(.my-profile){ justify-content:flex-start;min-height:0;padding:10px 0;border:0;border-radius:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:27px;line-height:1.15;font-weight:600; letter-spacing:-.025em;text-transform:none;color:var(--color-dark) } html.cd-m #main_nav .navbar-nav .nav-link:not(.my-profile)::after{display:none} html.cd-m #main_nav .navbar-nav .nav-link.active:not(.my-profile)::after{ display:block;content:"";flex:none;width:8px;height:8px;margin:2px 0 0 12px;border:0;border-radius:50%;transform:none; background:var(--cd-red,#E11D2A);opacity:1 } html.cd-m body:not(.cd-blog) #main_nav .navbar-nav .nav-link.active:not(.my-profile), html.cd-m body:not(.cd-blog) #main_nav .navbar-nav .nav-link.active:not(.my-profile):hover{color:var(--color-dark)!important} /* Червеното хапче „Профил“ — само на компютър (там е човечето); на телефон е картата долу */ html.cd-m #main_nav .navbar-nav li:has(> .cd-hdr-profil){display:none} /* „Администрация“ (само за админа) — малък сив ред */ html.cd-m #main_nav .navbar-nav > div .nav-link.my-profile.cd-mm-adm{ min-height:0;padding:18px 0 4px!important;font-family:'Inter',sans-serif;font-size:13.5px;line-height:1;font-weight:500; text-transform:none;color:var(--cd-muted,#8A92A1)!important } html.cd-m #main_nav .navbar-nav > div .nav-link.my-profile.cd-mm-adm i{display:none} html.cd-m #main_nav .navbar-nav > div .nav-link.my-profile.cd-mm-adm::after{content:"→";width:auto;height:auto;margin:0 0 0 6px;border:0;transform:none} html.cd-m #main_nav .navbar-nav > div .nav-link.my-profile.cd-mm-adm::before{display:none} html.cd-m #main_nav .cd-mm-dolu{margin-top:auto;padding-top:26px;list-style:none;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif} html.cd-m #main_nav .cd-mm-prof{display:flex;align-items:center;gap:13px;padding:14px;border-radius:18px;background:var(--cd-surface-2,#F5F7FA);color:var(--color-dark);text-decoration:none;transition:transform var(--cd-dur-press,.12s) var(--cd-ease-std,ease)} html.cd-m #main_nav .cd-mm-prof:active{transform:scale(var(--cd-press,.98))} html.cd-m #main_nav .cd-mm-av{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--color-dark);color:#fff;font-size:15px;line-height:1;font-weight:700} html.cd-m #main_nav .cd-mm-prof-t b{display:block;font-size:15.5px;line-height:1.25;font-weight:700} html.cd-m #main_nav .cd-mm-prof-t small{display:block;font-size:12.5px;line-height:1.3;font-weight:500;color:var(--cd-muted,#8A92A1)} html.cd-m #main_nav .cd-mm-bal{margin-left:auto;text-align:right} html.cd-m #main_nav .cd-mm-bal small{display:block;margin-bottom:5px;font-size:11px;line-height:1;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--cd-muted,#8A92A1)} html.cd-m #main_nav .cd-mm-bal b{font-size:17px;line-height:1;font-weight:700;letter-spacing:-.01em} /* Картата води направо в профила (там е единственото меню на профила) — стрелка надясно */ html.cd-m #main_nav .cd-mm-str{width:18px;height:18px;flex:none;margin-left:2px;color:var(--cd-muted,#8A92A1)} html.cd-m #main_nav .cd-mm-vhod{display:flex;gap:10px} html.cd-m #main_nav .cd-mm-btn{flex:1;display:flex;align-items:center;justify-content:center;height:52px;border-radius:16px;background:var(--cd-surface-2,#F5F7FA); color:var(--color-dark);font-size:15px;font-weight:600;text-decoration:none;transition:transform var(--cd-dur-press,.12s) var(--cd-ease-std,ease)} html.cd-m #main_nav .cd-mm-btn--plyt{background:var(--color-dark);color:#fff} html.cd-m #main_nav .cd-mm-btn:active{transform:scale(var(--cd-press,.97))} html.cd-m #main_nav .cd-mm-pod{margin:10px 0 0;text-align:center;font-size:12.5px;line-height:1.4;font-weight:500;color:var(--cd-muted,#8A92A1)} html.cd-m #main_nav .cd-mm-kont{display:flex;align-items:center;gap:10px;margin-top:18px} html.cd-m #main_nav .cd-mm-tel{margin-right:auto;color:var(--color-dark);text-decoration:none} html.cd-m #main_nav .cd-mm-tel b{display:block;font-size:15.5px;line-height:1.2;font-weight:700;letter-spacing:-.01em} html.cd-m #main_nav .cd-mm-tel small{display:block;font-size:12px;line-height:1.3;font-weight:500;color:var(--cd-muted,#8A92A1)} html.cd-m #main_nav .cd-mm-ik{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--cd-surface-2,#F5F7FA);color:var(--color-dark);text-decoration:none;transition:transform var(--cd-dur-press,.12s) var(--cd-ease-std,ease)} html.cd-m #main_nav .cd-mm-ik:active{transform:scale(var(--cd-press,.94))} html.cd-m #main_nav .cd-mm-ik svg{width:20px;height:20px} html.cd-m #main_nav .cd-mm-ik i{font-size:21px;line-height:1} html.cd-m #main_nav .cd-mm-ik--viber{color:#7360F2} html.cd-m #main_nav .cd-mm-ik--wa{color:#25D366} /* Блогът: тъмната глава — същото на тъмно */ html.cd-m .cd-blog #main_nav .navbar-nav .nav-link:not(.my-profile){color:#fff} html.cd-m .cd-blog #main_nav .navbar-nav > div .nav-link.my-profile.cd-mm-adm{color:rgba(255,255,255,.5)!important} html.cd-m .cd-blog #main_nav .cd-mm-prof,html.cd-m .cd-blog #main_nav .cd-mm-btn,html.cd-m .cd-blog #main_nav .cd-mm-ik{background:rgba(255,255,255,.08);color:#fff} html.cd-m .cd-blog #main_nav .cd-mm-av{background:#fff;color:#15181F} html.cd-m .cd-blog #main_nav .cd-mm-prof-t small,html.cd-m .cd-blog #main_nav .cd-mm-bal small,html.cd-m .cd-blog #main_nav .cd-mm-pod,html.cd-m .cd-blog #main_nav .cd-mm-tel small{color:rgba(255,255,255,.55)} html.cd-m .cd-blog #main_nav .cd-mm-btn--plyt{background:#fff;color:#15181F} html.cd-m .cd-blog #main_nav .cd-mm-tel{color:#fff} html.cd-m .cd-blog #main_nav .cd-mm-str{color:rgba(255,255,255,.55)} html.cd-m .cd-blog #main_nav .cd-mm-ik--viber{color:#9C8CFF} html.cd-m .cd-blog #main_nav .cd-mm-ik--wa{color:#25D366} } /* ☰ → ✕: три черти вместо иконата; полето за пръста е по-голямо, без да мести главата. */ html.cd-m .cd-burger-ln{display:none} @media (max-width:991.98px){ html.cd-m .cd-burger{position:relative;width:22px;height:26px;color:var(--color-dark);background:transparent} html.cd-m .cd-blog .cd-burger{color:#fff} html.cd-m .cd-burger::before{content:"";position:absolute;inset:-9px -10px} html.cd-m .cd-burger .navbar-toggler-mobile-icon{display:none} html.cd-m .cd-burger-ln{display:block;position:absolute;inset:0;pointer-events:none} html.cd-m .cd-burger-ln > span{position:absolute;left:0;right:0;height:2.5px;border-radius:2px;background:currentColor; transition:transform var(--cd-dur-2) var(--cd-ease-std),opacity var(--cd-dur-1) var(--cd-ease-std)} /* черти и разстояния като иконата fa-bars (25 px) */ html.cd-m .cd-burger-ln > span:nth-child(1){top:3.25px} html.cd-m .cd-burger-ln > span:nth-child(2){top:10.5px} html.cd-m .cd-burger-ln > span:nth-child(3){top:17.75px} html.cd-m .cd-burger.is-x .cd-burger-ln > span{transition:transform var(--cd-dur-2) var(--cd-ease-out),opacity var(--cd-dur-1) var(--cd-ease-std)} html.cd-m .cd-burger.is-x .cd-burger-ln > span:nth-child(1){transform:translateY(7.25px) rotate(45deg)} html.cd-m .cd-burger.is-x .cd-burger-ln > span:nth-child(2){opacity:0} html.cd-m .cd-burger.is-x .cd-burger-ln > span:nth-child(3){transform:translateY(-7.25px) rotate(-45deg)} html.cd-m .cd-burger:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:6px} html.cd-m .cd-burger.no-tr .cd-burger-ln > span{transition:none} } /* ---------- Иконите в главата: истински връзки; натискане = кръг-воал + лек мащаб (P1) ---------- */ html.cd-m .mobile-menu-right a.cd-hdr-ic{position:relative;display:inline-block;padding:1px 6px;line-height:36px;font-size:20px; vertical-align:middle;text-decoration:none; transition:color var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .mobile-menu-right a.cd-hdr-ic::before{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px; border-radius:50%;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .mobile-menu-right a.cd-hdr-ic:active{transform:scale(var(--cd-press))} html.cd-m .mobile-menu-right a.cd-hdr-ic:active::before{opacity:.08} /* Логото и черната лента: притъмняване при натискане; връзките в долната част — също. */ html.cd-m .navbar-brand,html.cd-m .mobile-top a{transition:opacity var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .navbar-brand:active,html.cd-m .mobile-top a:active{opacity:.6} :where(html.cd-m) .footer-area a:active{opacity:.6} /* Връзките в менюто и хапчето — по токените (беше .15s/.3s от темата и Bootstrap). */ html.cd-m .navbar .nav-item .nav-link{transition:color var(--cd-dur-1) var(--cd-ease-std),background-color var(--cd-dur-1) var(--cd-ease-std), border-color var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-press) var(--cd-ease-std)} @media (min-width:992px){ html.cd-m .navbar .nav-item .nav-link.my-profile:active{transform:scale(var(--cd-press))} } /* Мишка (P2) само на компютър: на телефон :hover остава след докосване — нищо да не стои червено. */ @media (hover:none){ html.cd-m body:not(.cd-blog) .mobile-menu-right .nav-right-link:hover{color:var(--color-dark)} html.cd-m .cd-blog .mobile-menu-right .nav-right-link:hover{color:rgba(255,255,255,.8)} html.cd-m body:not(.cd-blog) #main_nav .nav-link:not(.active):not(.my-profile):hover{color:var(--color-dark)!important} html.cd-m .cd-blog #main_nav .nav-link:not(.active):not(.my-profile):hover{color:rgba(255,255,255,.74)!important} html.cd-m body:not(.cd-blog) #main_nav .nav-link.active:not(.my-profile):hover{color:var(--theme-color)!important} html.cd-m .cd-blog #main_nav .nav-link.active:not(.my-profile):hover{color:#fff!important} html.cd-m #main_nav .navbar-nav > li > .nav-link.my-profile:hover{color:#fff!important;background-color:#ff0000;border-color:transparent} html.cd-m body:not(.cd-blog) #main_nav .navbar-nav > div .nav-link.my-profile:hover{color:var(--color-dark)!important;border:0} html.cd-m .cd-blog #main_nav .navbar-nav > div .nav-link.my-profile:hover{color:rgba(255,255,255,.74)!important;border:0} } /* ---------- „Профил“ и „Локация“ на компютър: тънки иконки вместо червеното хапче (собственикът, 13.10) ---------- Като при Porsche, BMW и Polestar — в десния край стоят само иконки. Разметката на връзката „Профил“ е същата и в листа на телефона (там остава бутон, както е). Тук, от 992 px: думата „Профил“ и „Баланс:“ се скриват с font-size:0 (голи текстови възли са), показват се човечето и до него самата сума — #user-balance, който наддаването обновява. Иконките са с цвета на връзките — тъмни върху бялата глава, бели над видеото (собственикът, 13.10, след като ги видя червени на живо: „в менюто червеното вече не седи“ — до червеното лого и червената активна връзка ставаха три червени неща в един ред). Червеното остава знак за „тук си“ и за мишката, както при връзките: на страницата на профила човечето е червено и запълнено, на „Контакт“ локацията е червена. */ @media (min-width:992px){ /* редът на локацията е като другите редове на менюто (не се центрира отделно — иначе при меню на два реда иконката слиза под човечето) */ html.cd-m #main_nav .navbar-nav .cd-hdr-lok{display:block!important} html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-ik, html.cd-m #main_nav .navbar-nav .nav-link.my-profile.cd-hdr-profil{display:inline-flex;align-items:center;gap:8px;min-width:0;height:auto; margin:7px 0 0 8px!important;padding:8px 6px!important;background:transparent!important;border:0!important;border-radius:0!important; box-shadow:none!important;color:var(--color-dark)!important;font-size:0;line-height:1;text-decoration:none!important; transition:color var(--cd-dur-1) var(--cd-ease-std)} html.cd-m #main_nav .navbar-nav .nav-link.my-profile.cd-hdr-profil::before, html.cd-m #main_nav .navbar-nav .nav-link.my-profile.cd-hdr-profil::after{content:none!important} html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-ik svg, html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-profil svg{display:block;flex:0 0 auto} html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-profil>i, html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-profil br{display:none} html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-profil span{text-decoration:none!important} html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-profil #user-balance{font:600 14px/1 var(--body-font);letter-spacing:0; color:var(--color-dark);font-variant-numeric:tabular-nums;white-space:nowrap} html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-ik:hover, html.cd-m #main_nav .navbar-nav .nav-link.my-profile.cd-hdr-profil:hover, html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-ik.active, html.cd-m #main_nav .navbar-nav .nav-link.my-profile.cd-hdr-profil.active{color:var(--theme-color)!important; background:transparent!important} html.cd-m #main_nav .navbar-nav .nav-link.cd-hdr-profil.active .cd-hdr-chovek{fill:currentColor} /* Над видеото на началната двете иконки са червени (собственикът, 13.10: „само в менютата [черно], а на началната да са червени“): там връзките са бели и единственото друго червено е логото вляво — иконките го уравновесяват вдясно. Понеже цветът вече е червен, мишката се показва с леко избледняване. */ html.cd-m.cd-m-nad-video:not(.cd-plat) #main_nav .navbar-nav .nav-link.cd-hdr-ik, html.cd-m.cd-m-nad-video:not(.cd-plat) #main_nav .navbar-nav .nav-link.my-profile.cd-hdr-profil{color:var(--theme-color)!important; transition:color var(--cd-dur-1) var(--cd-ease-std),opacity var(--cd-dur-1) var(--cd-ease-std)} html.cd-m.cd-m-nad-video:not(.cd-plat) #main_nav .navbar-nav .nav-link.cd-hdr-ik:hover, html.cd-m.cd-m-nad-video:not(.cd-plat) #main_nav .navbar-nav .nav-link.my-profile.cd-hdr-profil:hover{opacity:.72} } @media (max-width:991.98px){ html.cd-m .cd-hdr-chovek{display:none} } /* ---------- ↑ нагоре: един тъмен кръг 42 px, прибира се при скрол надолу (P6) ---------- light.css държи bottom:100px !important — тук е по-специфично. Над долната лента на обявата, над „Запази“ в търсенето и над балона на чата, ако ги има на страницата. */ html.cd-m #scroll-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))!important;width:42px;height:42px; border-radius:50%;background:var(--cd-ink,#15181F);color:#fff;display:flex;align-items:center;justify-content:center; font-size:16px;line-height:1;text-decoration:none;box-shadow:0 8px 20px -6px rgba(15,23,32,.45);z-index:var(--cd-z-float); opacity:0;visibility:hidden;transform:translateY(100%); transition:opacity var(--cd-dur-1) var(--cd-ease-in),transform var(--cd-dur-1) var(--cd-ease-in),visibility 0s linear var(--cd-dur-1)} html.cd-m:not([data-scroll="down"]) #scroll-top.active{opacity:1;visibility:visible;transform:none; transition:opacity var(--cd-dur-2) var(--cd-ease-out),transform var(--cd-dur-2) var(--cd-ease-out),visibility 0s} html.cd-m:not([data-scroll="down"]) #scroll-top.active:active{transform:scale(var(--cd-press)); transition:transform var(--cd-dur-press) var(--cd-ease-std)} /* „Запази“ (търсенето, z --cd-z-sticky) е долу вдясно до 62 px — ↑ стои над него и се прибира заедно с него. */ /* Класовете на вместо body:has() — виж .cd-toast в основата. */ @media (max-width:991.98px){ html.cd-m:is(.cd-m-lbar,.cd-m-fab) body #scroll-top{bottom:calc(84px + env(safe-area-inset-bottom))!important} } /* Балонът на чата е до 78 px — ↑ над него, и когато има и „Запази“ (затова е след горното). */ html.cd-m.cd-m-chat body #scroll-top{bottom:calc(90px + env(safe-area-inset-bottom))!important} @media (min-width:992px){ html.cd-m #scroll-top{right:24px;bottom:24px!important} } @media (hover:hover) and (pointer:fine){ html.cd-m #scroll-top:hover{background:var(--theme-color)} } /* ---------- Звездата (любими): натискане P1; светва веднага (CD.fav) ---------- */ html.cd-m .cd-fav-btn{transition:transform var(--cd-dur-press) var(--cd-ease-std),background-color var(--cd-dur-1) var(--cd-ease-std), color var(--cd-dur-1) var(--cd-ease-std),border-color var(--cd-dur-1) var(--cd-ease-std)} html.cd-m .cd-fav-btn:active{transform:scale(var(--cd-press))} @media (hover:none){ /* след докосване :hover остава — махнатата звезда не бива да стои червена */ html.cd-m .cd-result-fav.cd-fav-btn:not(.is-active):hover{background:transparent; filter:drop-shadow(0 0 1.5px rgba(15,23,32,.9)) drop-shadow(0 2px 5px rgba(15,23,32,.5))} /* light.css a:hover оцветява в синьо; картата във „Вижте още“ — в тъмно */ html.cd-m .cd-mobile-icon-btn.cd-fav-btn:not(.is-active):hover{color:var(--cd-ink)} html.cd-m .car-btns a.cd-fav-btn:hover{background:var(--theme-color);color:var(--color-white)} } /* ============================================================================= 2. ТЪРСЕНЕТО — „Филтри“, марка/модел, балоните, картите. Марка/модел и VirtualSelect са и на началната. ============================================================================= */ /* „Мазно“ — търсенето: „Филтри“, марка/модел, балони, картите, закаченият ред. Всяко правило под html.cd-m; само токените от основата горе. */ /* --------------------------------------------------------------------------- „Филтри“ под 992 px — лист на цял екран (P4 --full), отваря го CD.layer (cd-motion.js, „Търсенето“). Слоят е самият панел (в Livewire): класът cd-layer--up идва от сървъра, отвореното състояние — от CD.layer, който го връща след всяко прерисуване. Затворен стои под екрана (translateY(100%), както без ключа), не display:none — така пази превъртането си. Не и visibility: тя се наследява и всяко отваряне преизчисляваше целия панел (~560 елемента) още в натискането — 2× по-бавно докосване. Отворен е БЕЗ transform: иначе става рамка за изскачащите менюта на VirtualSelect (cd-search.css:1638-1650). body.cd-filters-open е резервата от search.blade.php (ако cd-motion.js, „Търсенето“ не е дошъл) — тогава се вижда. --------------------------------------------------------------------------- */ @media (max-width:991.98px){ html.cd-m .cd-search-page .col-lg-3 .cd-search-panel.cd-sticky-panel{ top:0;bottom:auto;height:100vh;height:100dvh;transform:none;transition:none;overscroll-behavior:contain; z-index:calc(var(--cd-z-overlay) + 1 + var(--cd-depth,0) * 2)} html.cd-m body:not(.cd-filters-open) .cd-search-page .col-lg-3 .cd-search-panel.cd-sticky-panel:not(.is-open){transform:translateY(100%);will-change:transform} /* Свой растер отнапред (09.10): затвореният лист и редовете, които изплуват, са на свои слоеве още докато листът е долу — плочките им са готови. Иначе при отваряне първо се рисуваше целият лист (снимките на флаговете), а всеки ред, тръгнал от opacity:0, искаше нова плочка → композиторът изпускаше кадър на всеки ред (~30 ms): 30–40 к/с точно над главата. Отворен в покой — без will-change (иначе редовете стават рамка за менютата на VirtualSelect). Разписано (клас или id отдясно); не и при резервата body.cd-filters-open. */ html.cd-m body:not(.cd-filters-open) .cd-search-panel.cd-sticky-panel:is(:not(.is-open),.is-entering) .cd-search-tabs, html.cd-m body:not(.cd-filters-open) .cd-search-panel.cd-sticky-panel:is(:not(.is-open),.is-entering) #cd-search-tab-all > .cd-search-widget:nth-child(-n+6){will-change:transform,opacity} html.cd-m .cd-panel-actions-mobile{padding-bottom:calc(12px + env(safe-area-inset-bottom))} /* Ред по ред (08.10): табовете и първите 6 групи — тези, които са на екрана при отваряне; по-долните идват с листа. Закъснението е в CSS, не --cd-i от CD.layer: наследимата променлива на 14 групи преизчисляваше и всичко в тях. */ /* Разписано (виж балона на чата в основата). :is() даваше и на табовете тежестта на #cd-search-tab-all > …; затова при тях е :is(.cd-search-tabs,#cd-search-tab-all) и удвоен клас — тежестта е същата, а редовете долу пак печелят по реда си. */ html.cd-m .cd-search-panel.cd-layer.is-entering .cd-search-tabs.cd-search-tabs:is(.cd-search-tabs,#cd-search-tab-all), html.cd-m .cd-search-panel.cd-layer.is-entering #cd-search-tab-all > .cd-search-widget:nth-child(-n+6){ animation:cd-m-row-in var(--cd-dur-2) var(--cd-ease-out) backwards;animation-delay:var(--cd-stagger-0)} html.cd-m .cd-search-panel.cd-layer.is-entering #cd-search-tab-all > .cd-search-widget:nth-child(1){animation-delay:calc(var(--cd-stagger-0) + var(--cd-stagger))} html.cd-m .cd-search-panel.cd-layer.is-entering #cd-search-tab-all > .cd-search-widget:nth-child(2){animation-delay:calc(var(--cd-stagger-0) + 2 * var(--cd-stagger))} html.cd-m .cd-search-panel.cd-layer.is-entering #cd-search-tab-all > .cd-search-widget:nth-child(3){animation-delay:calc(var(--cd-stagger-0) + 3 * var(--cd-stagger))} html.cd-m .cd-search-panel.cd-layer.is-entering #cd-search-tab-all > .cd-search-widget:nth-child(4){animation-delay:calc(var(--cd-stagger-0) + 4 * var(--cd-stagger))} html.cd-m .cd-search-panel.cd-layer.is-entering #cd-search-tab-all > .cd-search-widget:nth-child(5){animation-delay:calc(var(--cd-stagger-0) + 5 * var(--cd-stagger))} html.cd-m .cd-search-panel.cd-layer.is-entering #cd-search-tab-all > .cd-search-widget:nth-child(6){animation-delay:calc(var(--cd-stagger-0) + 6 * var(--cd-stagger))} } /* Табовете „Всички / Запазени / Последни“: смяна на място с избледняване, без cdTabFadeIn отляво (cd-redesign.css:1399). */ html.cd-m .cd-search-page .tab-pane.show{animation:cd-m-fade-in var(--cd-dur-1) var(--cd-ease-std)} /* „Покажи N обяви“: въртелешката идва след 300 ms (wire:loading.delay.long), иначе нищо не мига. */ html.cd-m .cd-m-spin{width:15px;height:15px;margin-right:8px;vertical-align:-2px;border-radius:50%; border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:cd-search-spin .7s linear infinite} @keyframes cd-search-spin{to{transform:rotate(360deg)}} /* --------------------------------------------------------------------------- Марка и модел (P4): лист под 768 px, диалог над. Тъмният фон е общият на CD.layer, затова собственият на прозореца е прозрачен. Движи се самата карта (своите 100%), а слоят само „държи“ толкова, колкото трае излизането — CD.layer чака неговия animationend. Височината е постоянна: марки → модели и търсенето не карат листа да скача. --------------------------------------------------------------------------- */ html.cd-m .cd-mmp-overlay{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none} html.cd-m .cd-mmp-panel{position:relative;animation:none;height:min(82vh,680px);max-height:none} html.cd-m .cd-mmp-overlay.cd-layer.is-entering{animation:none} html.cd-m .cd-mmp-overlay.cd-layer.is-leaving{animation:cd-m-hold var(--cd-dur-1) linear forwards} html.cd-m .cd-mmp-overlay.is-entering .cd-mmp-panel{animation:cd-m-dialog-in var(--cd-dur-2) var(--cd-ease-out) backwards} html.cd-m .cd-mmp-overlay.is-leaving .cd-mmp-panel{animation:cd-m-fade-out var(--cd-dur-1) var(--cd-ease-in) forwards} @keyframes cd-m-hold{to{opacity:1}} @media (max-width:767.98px){ html.cd-m .cd-mmp-overlay{align-items:flex-end;padding:0} html.cd-m .cd-mmp-panel{max-width:none;height:88vh;height:88dvh;border-radius:var(--cd-r-sheet) var(--cd-r-sheet) 0 0; padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -12px 30px -12px rgba(15,23,32,.3)} html.cd-m .cd-mmp-overlay.cd-layer.is-leaving{animation-duration:var(--cd-dur-2)} html.cd-m .cd-mmp-overlay.is-entering .cd-mmp-panel{animation:cd-m-sheet-in var(--cd-dur-3) var(--cd-ease-out) backwards} html.cd-m .cd-mmp-overlay.is-leaving .cd-mmp-panel{animation:cd-m-sheet-out var(--cd-dur-2) var(--cd-ease-in) forwards} /* Отворен от „Филтри“ на телефон (собственикът, 09.10: „два ✕“): прозорецът е страница в листа (P4 --full) — цял екран и само ‹ (на марките — обратно към филтрите, на моделите — към марките). Иначе горните 12% показваха „Филтри ✕“ над „Изберете марка ✕“. Класа го слага make-model.blade.php при отваряне. На таблет и компютър остава диалог с ✕, а „Филтри“ отдолу потъмнява (тъмният фон по дълбочина, основата горе). */ html.cd-m .cd-mmp-overlay.cd-mmp--stacked .cd-mmp-panel{height:100vh;height:100dvh;border-radius:0;box-shadow:none} html.cd-m .cd-mmp-overlay.cd-mmp--stacked .cd-mmp-close{display:none} } /* Първото отваряне (собственикът, компютър, 09.10: „заби“): ~270 реда с лого — стил и подредба само за видимите. Без това всяко отваряне смяташе ~1 500 елемента и ~2 000 обекта за подредба (260–440 ms при 4× процесор). contain-intrinsic-size е височината на СЪДЪРЖАНИЕТО, без отстъпите на реда (cd-search.css: 11 + 11 и 10 + 10 px): 26 + 22 = 48 px и 25 + 20 = 45 px. С цялата височина тук ненарисуваният ред излизаше 70 px, списъкът — с една трета по-дълъг, и плъзгачът се местеше неравно, докато редовете се рисуват (11.10). */ html.cd-m .cd-mmp-make-row{content-visibility:auto;contain-intrinsic-size:auto 26px} html.cd-m .cd-mmp-model{content-visibility:auto;contain-intrinsic-size:auto 25px} /* content-visibility реже всичко извън реда — пръстенът на фокуса е навътре. Разписано. */ html.cd-m .cd-mmp-make-row:focus-visible,html.cd-m .cd-mmp-model:focus-visible{outline:2px solid var(--cd-red);outline-offset:-2px} /* Марки → модели е ВЕДНАГА (собственикът, 11.10); натискането се усеща по самия ред — потъмнява за --cd-dur-press. */ html.cd-m .cd-mmp-make-row,html.cd-m .cd-mmp-model{transition:background-color var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .cd-mmp-make-row:active,html.cd-m .cd-mmp-model:active,html.cd-m .cd-mmp-pop-tile:active{background-color:rgba(15,23,32,.08)} /* Натиснат, докато страницата още се зарежда: make-model.blade.php помни натискането и го изпълнява, щом е готово. */ html.cd-m .cd-mmp-trigger.is-pending{border-color:var(--cd-red);box-shadow:0 0 0 3px var(--cd-red-50);cursor:progress} /* --------------------------------------------------------------------------- VirtualSelect (Година, Пробег, Сортиране). Под 576 px библиотеката сама го показва като „popup“ — черен прозорец в средата. Тук: същият вид като листовете (P4) — отдолу, тъмният фон на слоевете, над главата, ✕ горе вдясно. БЕЗ движение: библиотеката го показва наведнъж. :is(.vscomp-ele,#cd-m-vs) носи тежестта на id — правилата в cd-search.css за #select-sort са с id и !important. --------------------------------------------------------------------------- */ /* Падащото меню (над 575 px, не „popup“): над главата и над закачените редове. Библиотеката му слага z-index 999 в стила, а с ключа главата е на 1000 — „Подреди по“, отворено нагоре, влизаше под нея (собственикът, 10.10). „Подреди по“ вече се отваря надолу (search_v2/sort.blade.php); това е за случая, в който долу няма място. */ html.cd-m .vscomp-ele .vscomp-dropbox-container{z-index:calc(var(--cd-z-header) + 1)!important} html.cd-m :is(.vscomp-ele,#cd-m-vs) .vscomp-wrapper.show-as-popup .vscomp-dropbox-container{ z-index:var(--cd-z-overlay)!important;background-color:var(--cd-scrim);align-items:flex-end;justify-content:center; padding:0;top:0;left:0!important;right:0!important;width:100%!important;height:100vh;height:100dvh;overscroll-behavior:contain} html.cd-m :is(.vscomp-ele,#cd-m-vs) .vscomp-wrapper.show-as-popup .vscomp-dropbox{ position:relative;width:100%!important;max-width:none;min-width:0!important;margin:0!important;max-height:88dvh; padding:52px 0 env(safe-area-inset-bottom);border:0!important;border-radius:var(--cd-r-sheet) var(--cd-r-sheet) 0 0!important; box-shadow:0 -12px 30px -12px rgba(15,23,32,.3)!important;overflow:hidden;background:var(--cd-surface,#fff)} html.cd-m :is(.vscomp-ele,#cd-m-vs) .vscomp-wrapper.show-as-popup .vscomp-options-container{max-height:calc(88dvh - 52px - env(safe-area-inset-bottom))!important} /* глава на листа: заглавие отляво, ✕ отдясно */ html.cd-m :is(.vscomp-ele,#cd-m-vs) .vscomp-wrapper.show-as-popup .vscomp-dropbox::before{ content:"";position:absolute;left:0;right:0;top:0;height:52px;box-sizing:border-box;padding:0 56px 0 16px; display:flex;align-items:center;border-bottom:1px solid var(--cd-line,#E8EAEE); font:700 15px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--cd-ink,#15181F)} html.cd-m #select-year_from .vscomp-wrapper.show-as-popup .vscomp-dropbox::before{content:"Година от"} html.cd-m #select-year_to .vscomp-wrapper.show-as-popup .vscomp-dropbox::before{content:"Година до"} html.cd-m #select-mileage_to .vscomp-wrapper.show-as-popup .vscomp-dropbox::before{content:"Пробег до"} html.cd-m #select-sort .vscomp-wrapper.show-as-popup .vscomp-dropbox::before{content:"Подреди по"} html.cd-m :is(.vscomp-ele,#cd-m-vs) .vscomp-wrapper.show-as-popup .vscomp-dropbox-close-button{ top:9px;right:12px;bottom:auto;left:auto;margin:0;width:34px;height:34px;background:var(--cd-surface-2,#F5F7FA);box-shadow:none} html.cd-m :is(.vscomp-ele,#cd-m-vs) .vscomp-wrapper.show-as-popup .vscomp-option{font-size:15px!important;padding:0 16px!important} /* --------------------------------------------------------------------------- Балони, регион, цвят, скоростна кутия (P1). Натискането хлътва; .is-pending (от натискането до отговора на Livewire) изглежда като избрано, а повторно натиснат избран — като неизбран. Следващото прерисуване слага истината от сървъра. --------------------------------------------------------------------------- */ /* Разписано (виж балона на чата в основата). В третото правило :is() даваше на всички тежестта на най-тежкия (.cd-toggle-label:not(.is-empty) — два класа), затова единичните са с удвоен клас: тежестта остава същата. */ html.cd-m .cd-toggle-label,html.cd-m .cd-segmented-btn,html.cd-m .cd-unit-toggle-btn{ transition:background-color var(--cd-dur-1) var(--cd-ease-std),border-color var(--cd-dur-1) var(--cd-ease-std), color var(--cd-dur-1) var(--cd-ease-std),box-shadow var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .cd-mobile-filter-btn,html.cd-m .cd-panel-show,html.cd-m .cd-panel-clear,html.cd-m .cd-panel-close,html.cd-m .cd-active-chip{ transition:transform var(--cd-dur-press) var(--cd-ease-std),opacity var(--cd-dur-1) var(--cd-ease-std)} html.cd-m .cd-toggle-label:not(.is-empty):active,html.cd-m .cd-segmented-btn.cd-segmented-btn:active, html.cd-m .cd-unit-toggle-btn.cd-unit-toggle-btn:active,html.cd-m .cd-mobile-filter-btn.cd-mobile-filter-btn:active, html.cd-m .cd-panel-show.cd-panel-show:active,html.cd-m .cd-panel-clear.cd-panel-clear:active, html.cd-m .cd-panel-close.cd-panel-close:active,html.cd-m .cd-active-chip.cd-active-chip:active{ transform:scale(var(--cd-press))} html.cd-m .cd-toggle-label.is-pending:not(.is-active):not(.is-empty){background:var(--cd-red);border-color:var(--cd-red);color:#fff} html.cd-m .cd-toggle-label.is-active.is-pending{background:var(--cd-surface);border-color:var(--cd-line-2);color:var(--cd-body)} html.cd-m .cd-body-list .cd-toggle-label.is-pending:not(.is-active):not(.is-empty){background:var(--cd-red-50);border-color:var(--cd-red);color:var(--cd-red)} html.cd-m .cd-body-list .cd-toggle-label.is-active.is-pending{background:transparent;border-color:transparent;color:var(--cd-body)} html.cd-m .cd-segmented-btn.is-pending:not(.is-active){background:var(--cd-red);color:#fff;box-shadow:none} html.cd-m .cd-segmented-btn.is-active.is-pending{background:var(--cd-surface);color:var(--cd-body)} html.cd-m .cd-unit-toggle-btn.is-pending:not(.is-active){background:var(--cd-red);color:#fff} html.cd-m .cd-unit-toggle:has(.is-pending:not(.is-active)) .cd-unit-toggle-btn.is-active{background:var(--cd-surface);color:var(--cd-body)} /* Цвят: пръстенът; без увеличение при мишка (едното увеличение на сайта е на снимките на картите). */ html.cd-m .cd-color-dot{transition:box-shadow var(--cd-dur-1) var(--cd-ease-std),border-color var(--cd-dur-1) var(--cd-ease-std)} html.cd-m .cd-color-swatch:hover .cd-color-dot{transform:none} html.cd-m .cd-color-swatch.is-pending:not(.is-active) .cd-color-dot{box-shadow:0 0 0 3px var(--cd-surface),0 0 0 4px var(--cd-red);border-color:transparent} html.cd-m .cd-color-swatch.is-active.is-pending .cd-color-dot{box-shadow:none;border-color:rgba(15,23,32,.14)} /* Регион (.is-pending го слага cd-motion.js, „Търсенето“ на
  • ; :checked остава отдолу). */ html.cd-m .cd-region-label{transition:color var(--cd-dur-1) var(--cd-ease-std)} html.cd-m .cd-region-label::after{transition:opacity var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-1) var(--cd-ease-std)} html.cd-m .cd-region-item.is-pending:not(.is-active) .cd-region-label{color:var(--cd-red)} html.cd-m .cd-region-item.is-pending:not(.is-active) .cd-region-label::after{opacity:1;transform:scaleX(1)} html.cd-m .cd-region-item.is-active.is-pending .cd-region-label{color:var(--cd-muted)} html.cd-m .cd-region-item.is-active.is-pending .cd-region-label::after{opacity:0;transform:scaleX(.4)} /* Махнат чип в лентата над резултатите — избледнява до отговора. */ html.cd-m .cd-active-chip.is-pending{opacity:.45} /* --------------------------------------------------------------------------- Резултатите се зареждат (P7): wire:loading.delay.class="is-busy" само на списъка — отговор под 200 ms не затъмнява нищо; иначе .6 за --cd-dur-2 (вместо opacity-75 на цялата колона наведнъж). --------------------------------------------------------------------------- */ html.cd-m .cd-search-results{transition:opacity var(--cd-dur-2) var(--cd-ease-std)} html.cd-m .cd-search-results.is-busy{opacity:.6} /* --------------------------------------------------------------------------- Картите. P1: при натискане — тъмен воал .06, без мащаб. P2 (само мишка): повдигане с --cd-lift и сянка, снимката — до --cd-zoom; „Виж повече“ също само там (на телефона залепваше след докосване). P7: снимката изплува, щом дойде (.is-loading от cd-motion.js, „Търсенето“). --------------------------------------------------------------------------- */ html.cd-m .cd-result-card{transition:box-shadow var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-1) var(--cd-ease-std)} html.cd-m .cd-result-card:hover{transform:none;box-shadow:0 1px 3px rgba(15,23,32,.05),0 10px 24px -6px rgba(15,23,32,.11)} html.cd-m .cd-result-card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;background:#000;opacity:0; pointer-events:none;transition:opacity var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .cd-result-card:active::after{opacity:.06} /* :active преди :has(): звездата натисната ⇒ и картата е :active, тъй че условието е същото, но :has() се проверява само за натиснатата карта, а не за всяка карта при всяко пресмятане (09.10: 54 µs на карта при 4× процесор). */ html.cd-m .cd-result-card:active:has(.cd-result-fav-row:active)::after{opacity:0} html.cd-m .cd-media-hover{transition:opacity var(--cd-dur-1) var(--cd-ease-std)} html.cd-m .cd-result-card:hover .cd-media-hover{opacity:0} html.cd-m .cd-result-media img{transition:opacity var(--cd-dur-2) var(--cd-ease-std),transform var(--cd-dur-3) var(--cd-ease-out)} html.cd-m .cd-result-media img.is-loading{opacity:0} @media (hover:hover) and (pointer:fine){ html.cd-m .cd-result-card:hover{transform:translateY(var(--cd-lift)); box-shadow:0 1px 3px rgba(15,23,32,.05),0 10px 24px -6px rgba(15,23,32,.11),var(--cd-shadow-2)} html.cd-m .cd-result-card:hover .cd-result-media img{transform:scale(var(--cd-zoom))} html.cd-m .cd-result-card:hover .cd-media-hover{opacity:1} } /* Брояч на търга: цифрите с еднаква ширина и запазено място — табелката не трепти всяка секунда. */ html.cd-m .cd-result-timer{font-variant-numeric:tabular-nums} /* 9,75em = часовникът и „4д 02ч 32м 14с“ (107 px при 11 px) — мястото е запазено и докато броячът още е празен. */ html.cd-m .cd-result-timer .timeleft{display:inline-block;min-width:9.75em;text-align:center} /* --------------------------------------------------------------------------- Закаченият ред „Филтри“ и „Запази“ (P6): по посоката на скрола (html[data-scroll] от cd-motion.js). Надолу — редът се прибира нагоре под главата (главата е --cd-z-header, той — --cd-z-sticky), „Запази“ — надолу; нагоре — връщат се. Старото .is-tucked вече не крие нищо. --------------------------------------------------------------------------- */ @media (max-width:991.98px){ html.cd-m .cd-active-filters.is-pinned{z-index:var(--cd-z-sticky)!important; transition:transform var(--cd-dur-2) var(--cd-ease-out),opacity var(--cd-dur-2) var(--cd-ease-out),visibility 0s} html.cd-m .cd-active-filters.is-pinned.is-tucked{opacity:1;visibility:visible;pointer-events:auto} html.cd-m[data-scroll="down"] .cd-active-filters.is-pinned{transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none; transition:transform var(--cd-dur-1) var(--cd-ease-in),opacity var(--cd-dur-1) var(--cd-ease-in),visibility 0s linear var(--cd-dur-1)} html.cd-m .cd-save-fab{z-index:var(--cd-z-sticky);transform:none;opacity:1;visibility:visible; transition:transform var(--cd-dur-2) var(--cd-ease-out),opacity var(--cd-dur-2) var(--cd-ease-out),visibility 0s} html.cd-m[data-scroll="down"] .cd-save-fab{transform:translateY(100%);opacity:0;visibility:hidden;pointer-events:none; transition:transform var(--cd-dur-1) var(--cd-ease-in),opacity var(--cd-dur-1) var(--cd-ease-in),visibility 0s linear var(--cd-dur-1)} } /* ============================================================================= 3. ОБЯВАТА — галерията, „Купи сега“/наддаване/кредит, разгъванията, гумите, лентите със снимки. ============================================================================= */ /* „Мазно“ — обявата: галерията, „Купи сега“/наддаване/кредит, разгъванията, споделяне, гумите, лентите със снимки, появата при превъртане. Всяко правило под html.cd-m; само токените от основата горе. */ /* ---- Галерия (P9). #cdStageImage стои на мястото си; новата снимка идва в .cd-m-front отгоре и изплува, щом е готова (decode). Плъзгане с пръст — CD.swipe (cd-motion.js, „Обявата“). ---- */ /* pinch-zoom: щипването с два пръста върху снимката остава на браузъра (увеличение — за щетите). */ html.cd-m .cd-main-stage{touch-action:pan-y pinch-zoom} html.cd-m .cd-main-stage a,html.cd-m .cd-main-stage img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none} html.cd-m .cd-stage-image{transition:transform var(--cd-dur-3) var(--cd-ease-out)} html.cd-m .cd-m-front{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;max-width:100%; object-fit:cover;object-position:center;opacity:0;pointer-events:none;transition:none} html.cd-m .cd-m-front.is-in{opacity:1;transition:opacity var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-3) var(--cd-ease-out)} /* Увеличението при мишка — само на компютър (на телефон оставаше залепнало след докосване). */ @media (hover:none),(pointer:coarse){ html.cd-m .cd-main-stage:hover .cd-stage-image{transform:none} } @media (hover:hover) and (pointer:fine){ html.cd-m .cd-main-stage:hover .cd-stage-image,html.cd-m .cd-main-stage:hover .cd-m-front{transform:scale(var(--cd-zoom))} } html.cd-m .cd-gallery-arrow{transition:background-color var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-press) var(--cd-ease-std)} html.cd-m .cd-gallery-arrow:active{transform:translateY(-50%) scale(var(--cd-press))!important} html.cd-m .cd-thumb{transition:opacity var(--cd-dur-1) var(--cd-ease-std),box-shadow var(--cd-dur-1) var(--cd-ease-std)} html.cd-m .cd-gallery-counter{font-variant-numeric:tabular-nums} /* Голямата снимка на цял екран (fslightbox): на телефон без лупата, слайдшоуто и цял екран. */ @media (max-width:767.98px){ html.cd-m .fslightbox-toolbar-button:is([title^="Zoom"],[title$="slideshow"],[title$="fullscreen"]){display:none} } /* ---- „Купи сега“ / „Поръчай“ / „Наддай“ / кредит (P4) — CD.layer чрез CD.obqva (cd-motion.js, „Обявата“). Под 768 px лист отдолу, над — диалог (прозрачност + 8 px, без мащаб: скриптът на TBI мери ширини). Движи се кутията; собственият фон само избледнява на място — в него е и затварянето с докосване. ---- */ /* Скритият прозорец остава подреден (visibility вместо display:none): отварянето е само рисуване. Иначе показването на fixed слой дълбоко в Livewire подреждаше наново пътя до корена — ~60 ms при 4× процесор. */ html.cd-m body .cd-finance-modal[hidden]{display:flex!important;visibility:hidden;pointer-events:none} html.cd-m .cd-finance-modal-backdrop{background:var(--cd-scrim)} html.cd-m .cd-finance-modal.cd-layer.is-entering{animation:none} html.cd-m .cd-finance-modal.cd-layer.is-leaving{animation:cd-m-obqva-hold var(--cd-dur-2) linear forwards} html.cd-m .cd-finance-modal.is-entering > .cd-finance-modal-backdrop{animation:cd-m-fade-in var(--cd-dur-2) var(--cd-ease-out) backwards} html.cd-m .cd-finance-modal.is-leaving > .cd-finance-modal-backdrop{animation:cd-m-fade-out var(--cd-dur-2) var(--cd-ease-in) forwards} html.cd-m .cd-finance-modal.is-entering > .cd-finance-modal-box{animation:cd-m-sheet-in var(--cd-dur-3) var(--cd-ease-out) backwards} html.cd-m .cd-finance-modal.is-leaving > .cd-finance-modal-box{animation:cd-m-sheet-out var(--cd-dur-2) var(--cd-ease-in) forwards} @media (max-width:767.98px){ html.cd-m .cd-finance-modal{align-items:flex-end;padding:0} html.cd-m .cd-finance-modal-box{max-width:none;max-height:88dvh;border-radius:var(--cd-r-lg) var(--cd-r-lg) 0 0} html.cd-m .cd-finance-modal-box .cd-buy-foot{padding-bottom:calc(18px + env(safe-area-inset-bottom))} html.cd-m .cd-finance-modal-box .cd-finance-modal-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))} } @media (min-width:768px){ html.cd-m .cd-finance-modal.cd-layer.is-leaving{animation-duration:var(--cd-dur-1)} html.cd-m .cd-finance-modal.is-entering > .cd-finance-modal-box{animation:cd-m-dialog-in var(--cd-dur-2) var(--cd-ease-out) backwards} html.cd-m .cd-finance-modal.is-leaving > .cd-finance-modal-box,html.cd-m .cd-finance-modal.is-leaving > .cd-finance-modal-backdrop{animation:cd-m-fade-out var(--cd-dur-1) var(--cd-ease-in) forwards} } /* Предаване към следващ прозорец (кредитът от „Купи сега“, формата на TBI): само кратко избледняване. */ html.cd-m .cd-finance-modal.cd-m-handoff.is-leaving{animation-duration:var(--cd-dur-1)} /* Децата са само фонът и кутията (ads/bid_modal, buy_modal, financing) — назовани, не „> *“: „> *“ се проверява срещу ВСЕКИ елемент при всяко пълно пресмятане на стиловете, а преходът между страниците прави по две (09.10). Тежестта е с клас повече — и тук, и в „намалено движение“ долу, тъй че редът помежду им и спрямо горните правила е същият. */ html.cd-m .cd-finance-modal.cd-m-handoff.is-leaving > .cd-finance-modal-backdrop, html.cd-m .cd-finance-modal.cd-m-handoff.is-leaving > .cd-finance-modal-box{animation:cd-m-fade-out var(--cd-dur-1) var(--cd-ease-in) forwards} @keyframes cd-m-obqva-hold{to{visibility:visible}} /* Една лента за превъртане — само тялото на отворения прозорец (собственикът, 09.10: „две ленти“). 1) Стигне ли края си, превъртането не минава нататък: на страница, увеличена с два пръста (снимките!), то местеше видимата ѝ част и до лентата на тялото излизаше втора, на целия екран. 2) Скритите прозорци остават подредени (горе), но не се превъртат — кредитът (z-index 100000, над листа) държеше още едно превъртащо се тяло точно над тялото на „Купи сега“. Разписано. */ html.cd-m .cd-finance-modal .cd-buy-body,html.cd-m .cd-finance-modal .cd-finance-modal-body{overscroll-behavior:contain} html.cd-m body .cd-finance-modal[hidden] .cd-buy-body,html.cd-m body .cd-finance-modal[hidden] .cd-finance-modal-body{overflow:hidden} /* Намалено движение: кутията и фонът стоят на място — целият прозорец само избледнява (основата горе, 150 ms). */ @media (prefers-reduced-motion:reduce){ html.cd-m .cd-finance-modal.cd-layer:is(.is-entering,.is-leaving) > .cd-finance-modal-backdrop, html.cd-m .cd-finance-modal.cd-layer:is(.is-entering,.is-leaving) > .cd-finance-modal-box{animation:none} } /* Кредитът: докато се зарежда заявката на TBI — въртележка, но чак след 300 ms. Имената не са cd-m-*: CD.layer чака всички cd-m-* движения в слоя, а въртележката е безкрайна. */ html.cd-m .cd-finance-modal-loading:not(.is-err)::before{content:"";display:block;width:22px;height:22px;margin:0 auto 10px; border-radius:50%;border:2.5px solid var(--cd-line-2);border-top-color:var(--cd-violet); animation:cd-obqva-spin .8s linear infinite,cd-obqva-show var(--cd-dur-1) var(--cd-ease-std) 300ms backwards} @keyframes cd-obqva-spin{to{transform:rotate(360deg)}} @keyframes cd-obqva-show{from{opacity:0}} /* „Изчисли вноската“ светваше лилаво след затваряне: залепнало :hover от докосването. На телефон — без. */ html.cd-m .cd-fin-apply{transition:background-color var(--cd-dur-1) var(--cd-ease-std),color var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-press) var(--cd-ease-std)} @media (hover:none),(pointer:coarse){ html.cd-m .cd-fin-apply:hover{background:var(--cd-surface);color:var(--cd-violet)} html.cd-m .cd-equip-toggle-btn:hover{background:var(--cd-red-50);color:var(--cd-red)} html.cd-m .cd-hero-title-actions .cd-pill-btn:not(.is-active):hover{border-color:var(--cd-line-2);color:var(--cd-ink);transform:none;box-shadow:var(--cd-shadow-1)} html.cd-m .cd-hero-title-actions .cd-pill-btn.is-active:hover{transform:none;box-shadow:var(--cd-shadow-1)} html.cd-m .cd-stepper-btn:hover{background:var(--cd-surface);color:var(--cd-ink)} } /* ---- Натискане (P1): бутоните на обявата и лентата долу хлътват под пръста. ---- */ /* Разписано (виж балона на чата в основата); единичните класове — удвоени, за да остане тежестта на :is() (два класа). */ html.cd-m :is(.cd-deal-card,.cd-finance-modal) .cd-btn,html.cd-m .cd-mobile-cta.cd-mobile-cta,html.cd-m .cd-mobile-icon-btn.cd-mobile-icon-btn, html.cd-m .cd-calc-submit.cd-calc-submit,html.cd-m .cd-equip-toggle-btn.cd-equip-toggle-btn,html.cd-m .cd-quick-bid-btn.cd-quick-bid-btn, html.cd-m .cd-hero-title-actions .cd-pill-btn{ transition:color var(--cd-dur-1) var(--cd-ease-std),background-color var(--cd-dur-1) var(--cd-ease-std),border-color var(--cd-dur-1) var(--cd-ease-std), box-shadow var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-press) var(--cd-ease-std)} html.cd-m :is(.cd-deal-card,.cd-finance-modal) .cd-btn:active:not([disabled]),html.cd-m .cd-mobile-cta.cd-mobile-cta:active:not([disabled]), html.cd-m .cd-mobile-icon-btn.cd-mobile-icon-btn:active:not([disabled]),html.cd-m .cd-fin-apply.cd-fin-apply:active:not([disabled]), html.cd-m .cd-calc-submit.cd-calc-submit:active:not([disabled]),html.cd-m .cd-equip-toggle-btn.cd-equip-toggle-btn:active:not([disabled]), html.cd-m .cd-quick-bid-btn.cd-quick-bid-btn:active:not([disabled]),html.cd-m .cd-hero-title-actions .cd-pill-btn:active:not([disabled]){ transform:scale(var(--cd-press))} html.cd-m .cd-stepper-btn{transition:background-color var(--cd-dur-1) var(--cd-ease-std),color var(--cd-dur-1) var(--cd-ease-std),transform var(--cd-dur-press) var(--cd-ease-std)} /* „Купи сега“ / „Поръчай“ в долната лента е