/* Главная с подбором — /. Дополняет app.css, переиспользует его переменные. ДВА НОВЫХ ЦВЕТА, и оба — оттенки уже существующего `--link`: фон панели фильтра и её граница. Прежнее обещание «ни одного нового цвета» правится вместе с кодом, а не обходится молча: вход в фильтр держался на единственной границе `--line` в 1,25:1 при минимуме 3:1, и добавить контраст, не добавив поверхности, было нечем. Одно решение задаёт весь файл: ОДИН СЧЁТЧИК ВМЕСТО ТРЁХ, и он липкий. Сейчас на «сколько машин» отвечают три места, и у двух из них РАЗНЫЕ условия: results_bar slice.total if not f.is_empty() else market.total кнопка рейла slice.total if slice else (market.total if f.is_empty()) .proof market.total / market.clean На непустом фильтре с несчитанным срезом первые два дают разные ответы на одном экране. Эту поломку уже чинили — комментарий в index.html описывает замер 22.08, где /?turbo=1 отдавал ноль карточек и «Показать 66 744», — но правку сделали в одном месте из трёх. */ /* ── Единственный счётчик ───────────────────────────────────────────────────────────── Липнет под шапкой на --h-top, тот же контракт, что у .bar. Заменяет собой results_bar, счётчик на кнопке рейла и блок .proof целиком. */ /* Поверхность фильтра. Оттенки `--link #1a63c4`, а не новые цвета: ещё одна синяя надпись рядом со ссылками, кнопкой «Применить» и выбранным сегментом не выделила бы ничего. */ :root { --link-wash: #eef4fd; --link-line: #c7dbf6; } .hm-bar { position: sticky; top: var(--h-top); z-index: 18; padding: 11px 0 9px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hm-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* НА ДЕСКТОПЕ ПОЛОСА — ОДНА СТРОКА, ВСЕГДА И ВО ВСЕХ ЛОКАЛЯХ. Замер 1024 по-грузински: строка переносилась, полоса вырастала с 51px до 96, а `--hm-bar-h` ниже остаётся 51 — и липкий рейл наезжал на неё на 45 пикселей, пряча за собой чипы и верх подборщика. Ровно та поломка, ради которой `--hm-bar-h` и заведена. Грузинский длиннее русского примерно на четверть, а ширину `.hm-sort` задаёт самая длинная строка списка — та самая, которая однажды уже уносила полосу на 41px за правый край (см. `.sortform` в app.css). Резать последнюю подробность среза, а не переносить, — правило записано в пакете. */ @media (min-width: 1024px) { .hm-line { flex-wrap: nowrap; } } /* `flex: none` и `nowrap`: без них строка без переноса ЗАЖИМАЕТ этот блок, и переносится уже подпись внутри него — по-грузински «განცხადება ბაზაში ახლა» в две строки, полоса 70px вместо 51, и рейл снова наезжает. Сжиматься имеет право только `.hm-sub`: у него многоточие, и потерять последнюю подробность среза дешевле, чем спрятать за полосой верх подборщика. */ .hm-n { display: flex; align-items: baseline; gap: 9px; flex: none; white-space: nowrap; } .hm-n b { font-size: 28px; font-weight: 700; letter-spacing: -.6px; line-height: 1; font-variant-numeric: tabular-nums; } .hm-n span { font-size: 13px; color: var(--ink-dim); } /* Подробности среза, а не доски: «из 66 959 на доске · 154 без замечаний · 168 с полным VIN». Это ровно то, что печатал .proof, только против списка, который они описывают. */ .hm-sub { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-sort { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; } .hm-sort > span { font-size: 12.5px; color: var(--ink-dim); } /* ── Ряд наборов: своё и наше разделены подписями ───────────────────────────────────── Раньше «недавние» и «наборы» были оба .preset и различались одним пикселем контура (border-style: dashed). Своё и наше — разные вещи. */ .hm-presets { display: flex; gap: 6px; align-items: center; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; /* Отступы этой строки урезаны против пакета: 8px сверху от `.presets` и 8px снизу стояли вплотную к `margin-top: 12px` у `.shell`, то есть один и тот же зазор был отдан дважды. Замер 1440 после сборки: было 298px до первой машины против 291px на текущем проде, стало 288px. Правило страницы — машины первыми, и «не хуже, чем было» она обязана выдержать по замеру, а не по намерению. */ margin-top: 4px; padding-bottom: 2px; } .hm-presets::-webkit-scrollbar { display: none; } .hm-pcap { flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); font-weight: 700; white-space: nowrap; padding-right: 2px; } .hm-psep { flex: none; width: 1px; height: 16px; background: var(--line); margin: 0 3px; } /* Сохранённый поиск — сплошная синяя обводка и звезда: он назван человеком и за ним следят. Недавний — пунктир: он просто был. */ .preset.saved { border: 1.5px solid var(--link); background: var(--bg); font-weight: 600; } .preset.saved i { color: var(--link); } /* Сколько новых с прошлого раза — единственная причина вернуться к сохранённому поиску. */ .preset.saved .new { font-size: 11px; font-weight: 700; color: var(--ok); background: rgba(28, 138, 79, .1); border-radius: 9px; padding: 1px 6px; font-variant-numeric: tabular-nums; } /* ── Чипы выбранного переезжают В РЕЙЛ ──────────────────────────────────────────────── Раньше .applied стоял над списком справа, а фильтр в рейле слева: снять условие и изменить условие — две половины одного действия в разных углах экрана. */ .hm-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid var(--line); } .hm-chips > .cap { flex: 1 1 100%; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); font-weight: 700; } .hm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 3px 8px 3px 10px; } .hm-chip:hover { text-decoration: none; border-color: var(--ink-faint); } .hm-chip i { font-style: normal; color: var(--ink-faint); font-size: 13px; line-height: 1; } /* Снятое значение красным и здесь тоже: оно читается хуже всего, поэтому показывается дважды — зачёркнутой строкой у самого значения и чипом наверху рейла. */ .hm-chip.out { background: var(--fail); border-color: var(--fail); color: #fff; font-weight: 600; padding-left: 9px; } .hm-chip.out i { color: rgba(255, 255, 255, .7); } /* ── Числа у значений ───────────────────────────────────────────────────────────────── Про VIN в index.html уже написано: «чекбокс, который прячет семь восьмых списка не сказав об этом, читается как сломанный фильтр». Тот же довод верен ещё для одиннадцати контролов, у которых числа не печатались. */ .hm-hint { font-size: 11px; color: var(--ink-faint); line-height: 1.35; } /* ── Липкая кнопка внизу рейла ──────────────────────────────────────────────────────── Рейл длиннее экрана (он и так скроллится внутри себя — см. .rail в app.css), и «Применить» не имеет права уезжать под фолд. Градиент, а не сплошной фон: под кнопкой продолжается список полей, и резкая полка читалась бы как конец формы. */ .hm-apply { position: sticky; bottom: 0; margin-top: 10px; padding: 10px 0 2px; background: linear-gradient(rgba(247, 248, 250, 0), var(--bg) 22%); } .hm-apply button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border: 0; border-radius: 7px; font: inherit; font-size: 14.5px; font-weight: 700; background: var(--link); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(26, 99, 196, .28); } .hm-apply button:hover { filter: brightness(1.08); } /* «Сохранить поиск…» — ДРУГОЕ действие: оно открывает диалог, где поиску дают название, а не срабатывает сразу. Отсюда многоточие, обводка вместо заливки и пунктирная черта. */ .hm-save { margin-top: 12px; padding-top: 9px; border-top: 1px dashed var(--line); } .hm-save a, .hm-save button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; border: 1px solid var(--link); border-radius: 6px; background: transparent; color: var(--link); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .hm-save small { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-faint); line-height: 1.4; } /* ── Подсказки омнибокса ────────────────────────────────────────────────────────────── Список подсказок и только он: кнопки «применить» внутри выпадающего списка нет. Две одинаковые кнопки на одном экране конкурируют друг с другом — то же правило, по которому ck-bar в check.html поднимается только когда основная кнопка ушла. Правила ниже дополняют .omni-drop из app.css, а не заменяют его. */ .omni-drop .n { font-variant-numeric: tabular-nums; } .omni-row .sub { display: block; font-size: 11px; color: var(--ink-dim); } /* ── Мобильная ────────────────────────────────────────────────────────────────────────*/ @media (max-width: 1023px) { .hm-bar { padding: 9px 0 8px; } .hm-line { gap: 8px; } .hm-n b { font-size: 22px; } /* Сортировка — своей строкой на всю ширину, под числом и «Фильтр». Прятать её нельзя: порядок выдачи не условие фильтра, и в шторке его тоже нет. Лейбл «сортировка» на телефоне лишний — у select уже есть aria-label. Тач-цель 44, как у .hm-open. */ .hm-sort { flex: 1 1 100%; order: 4; margin-left: 0; width: 100%; display: flex; align-items: center; gap: 0; } .hm-sort > span { display: none; } .hm-sort .sortform, .hm-sort .sort { display: flex; width: 100%; min-width: 0; margin: 0; flex: 1 1 auto; } .hm-sort .sort select { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; font-size: 14px; padding: 0 10px; } /* Подробности среза — своей строкой и В ОДНУ СТРОКУ. С переносом «из 67 012 на доске · 64 608 без замечаний · 8 718 с полным VIN» занимало вторую и третью строки, и полоса вырастала до 97px: замер 390 после сборки. Резать последнюю подробность, а не переносить, — то же правило, что записано для грузинской локали, где строка длиннее русской примерно на четверть. */ .hm-sub { flex: 1 1 100%; order: 3; margin-top: 1px; font-size: 11.5px; } /* Кнопка открытия шторки несёт число УСЛОВИЙ, полоса над списком — число МАШИН. Сейчас .filter-btn печатает только chips|length, а сколько машин осталось, на телефоне не написано нигде выше кнопки «Показать» в самом конце шторки. */ /* ПАНЕЛЬ И ПОЛОСА ВХОДА — ОДИН ОБЪЕКТ. Панель на `--link-wash`, полоса на `--link`: 5,8:1 к белому фону против 1,25:1, которые давала единственная граница у таблетки. 48px — та же цель пальца, что у строк внутри шторки, и на четыре больше прежних 44. */ /* ПАНЕЛЬ ЖИВЁТ ВНУТРИ ЛИПКОЙ ПОЛОСЫ, поэтому дверь в фильтр под пальцем на любой высоте списка. Своей рамки у неё больше нет: полоса уже отделена от страницы линией, и вторая рамка внутри неё читалась как коробка в коробке. */ .hm-panel { margin: 8px 0 0; } .hm-open { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 7px; background: var(--link); color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; } /* Условия словами занимают всю строку и режутся многоточием: последнее условие дешевле потерять, чем унести таблетку со счётом за правый край. */ .hm-what { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Имя двери тише условий: оно отвечает «что это», а читают на полосе «что выбрано». */ .hm-lab { font-weight: 700; opacity: .78; } /* «ещё N» на белой таблетке внутри синей полосы: это счёт УСЛОВИЙ, и он единственное белое пятно, поэтому не спорит с самими условиями за внимание. */ .hm-open u { flex: none; text-decoration: none; background: #fff; color: var(--link); font-size: 12px; font-weight: 700; border-radius: 9px; padding: 2px 8px; } /* ПУСТАЯ ДВЕРЬ — ТА ЖЕ СИНЯЯ, ТОЛЬКО СЛОВО ПО ЦЕНТРУ. Контур вместо заливки делал из единственного входа на страницу подпись: 1,25:1 у белой таблетки — ровно та поломка, ради которой поверхность и появилась. Сдвигать слово влево нечему, пока условий нет, а прижатое к левому краю оно читалось как заголовок пустого поля. */ .hm-open.empty { justify-content: center; } .hm-open.empty .hm-what { flex: 0 1 auto; text-align: center; } .hm-open.empty .hm-lab { opacity: 1; } /* ЧИПЫ УХОДЯТ С ТЕЛЕФОНА. Их работу делают строки: восемь условий давали 764px ширины при 350 видимых, то есть четыре условия из восьми лежали за правым краем, а строка называет каждое и снимает тем же крестиком. На десктопе чипы остаются: там рейл открыт целиком и полоса ничего не прячет. */ .hm-chips { display: none; } /* Шторка: ответ наверху, кнопка внизу. Комментарий в index.html объясняет, что пять полей свернули, потому что открытыми они занимали 745px из 760 — кнопку это не спасло, она за пределом экрана в любом случае. */ .picker-wrap .hm-sheettop { position: sticky; top: 0; z-index: 10; padding: 9px 0 8px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .hm-apply { position: sticky; bottom: 0; display: flex; gap: 8px; margin: 0 -14px; padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); } .hm-apply button { flex: 1 1 0; min-width: 0; min-height: 46px; font-size: 15px; box-shadow: none; } /* РАСХОЖДЕНИЕ С ПАКЕТОМ, И ОНО НАМЕРЕННОЕ. В макете «сохранить» стоит второй кнопкой в липкой полосе рядом с «применить», а подвал рейла на телефоне прячется. Здесь наоборот: запись живёт в подвале шторки на обеих раскладках. Причина в двух правилах этой же страницы. «Сохранить поиск…» открывает разговор, а не срабатывает сразу, — то есть это `
` вне формы подбора (HTML запрещает вкладывать формы). Дотянуться до него из липкой полосы можно было бы только якорем или скриптом: якорь кладёт хеш в адрес, а GA4 читает `page_location` вместе с ним и разводит один срез на две строки в отчёте — ровно та причина, по которой шторка сделана на `
`, а не на `:target`; скрипт же оставил бы кнопку мёртвой там, где его нет. Шторка на телефоне это весь экран и она прокручивается, поэтому подвал достижим. */ /* Три раздела вместо details.more, который открывает пять полей разом. У каждого написано, что внутри выбрано: свёрнутое не имеет права означать «неизвестно». */ /* СТРОКА НА ТЕЛЕФОНЕ ВЫШЕ: 52px — та же цель пальца, что у полосы входа, и на восьми условиях это 416px против 1783, которые занимали три раскрытых раздела. */ .hm-row > summary { min-height: 52px; } .hm-row > summary > b { font-size: 15px; } .hm-row .rv { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Пальцем. .mrow сейчас это padding: 5px 8px при 13px кегле — около 27 пикселей, и в списке из четырёх значений подряд это строка, в которую попадают мимо. */ .picker-wrap .mrow { min-height: 44px; padding: 0 10px; font-size: 14px; } .picker-wrap .mrow input { width: 18px; height: 18px; } .picker-wrap select, .picker-wrap input[type="number"], .picker-wrap input[type="text"], .picker-wrap input[type="search"] { min-height: 44px; } } /* На десктопе панель это просто верх рейла: подборщик открыт, дверь в него не нужна, остаётся поле — там же, где оно стояло до переезда. */ /* На десктопе подборщик стоит в рейле открытым, дверь в него не нужна, и панель обязана исчезнуть ЦЕЛИКОМ: липкий рейл считает свой `top` из `--hm-bar-h`, и лишние девять пикселей отступа увели бы верх подборщика под полосу. */ @media (min-width: 1024px) { .hm-panel { display: none; } } /* ══ ДОБАВЛЕНО ПРИ СБОРКЕ ═════════════════════════════════════════════════════════════════ Ни одного нового цвета: --ok #1c8a4f, --caution #a4700e, --fail #c0392f, --ink #14181d, --ink-dim #5a6672, --ink-faint #8b96a2, --line #e3e8ee, --panel-2 #eef1f5, --link #1a63c4. */ /* Полоса выше --h-bar, и рейл обязан знать насколько. `.rail` в app.css липнет на calc(--h-top + --h-bar), где --h-bar это 40px старой `.bar`. `.hm-bar` крупнее: 28px число плюс 11+9 отступов плюс две линии. Замерено в браузере на 1440 — 50px. Без этой поправки верхние 10 пикселей рейла уезжают ПОД полосу и первое поле подбора обрезается. Переменной, а не числом в двух местах: `top` и `max-height` обязаны читать одно и то же, иначе рейл снова окажется выше вьюпорта и запаркует свой низ под фолдом навсегда — та самая поломка, ради которой он скроллится внутри себя. */ :root { --hm-bar-h: 51px; } @media (min-width: 1024px) { .shell .rail { top: calc(var(--h-top) + var(--hm-bar-h)); max-height: calc(100vh - var(--h-top) - var(--hm-bar-h) - 16px); } } /* Шапка шторки. На десктопе шторки нет вовсе, поэтому и ответа наверху нет: он стоит в липкой полосе над списком, в двадцати пикселях выше. */ @media (min-width: 1024px) { .hm-sheettop { display: none; } } @media (max-width: 1023px) { .hm-sheettop { display: flex; align-items: center; gap: 12px; margin: 0 -14px 10px; padding-left: 14px; padding-right: 14px; } .hm-sheettop .hm-n { flex: 1; } .hm-sheettop .hm-n b { font-size: 22px; } /* Крестик закрытия шторки — тоже цель для пальца: в app.css он 40x40, здесь 44x44. */ .hm-sheettop .filter-close { margin: 0; flex: none; width: 44px; height: 44px; line-height: 44px; } } /* Три раздела вместо одного «ещё». Мобильная раскладка их summary описана выше; здесь десктопная — тем же приёмом, что у `.picker .more` в app.css, потому что это тот же элемент в том же рейле. */ /* `minmax(0, 1fr)` по той же причине, что у `.picker` в app.css: раскрытый раздел — это ещё один грид, и без явной дорожки его минимум снова становится min-content самой длинной опции внутри. «Город» раскрывается вместе с выбранным городом, и именно он приносил в подбор 459px. */ /* ШЕСТЬ СТРОК ВМЕСТО ТРЁХ СВЁРНУТЫХ РАЗДЕЛОВ. Прежние `.hm-sect` сворачивали пять полей и раскрывались сами, если внутри что-то выбрано: на восьми условиях это 658px из 1783. Строка вместо раздела говорит то же самое значением справа и стоит 52px, а `name="hm-row"` держит открытой ровно одну. Значение — `--link` по белому, 5,8:1. Пустое — `--ink-dim` (5,8:1), а не `--ink-faint`: у того 3,0:1, а это значение поля, не рамка, и порог для него 4,5. */ .hm-row { border-top: 1px solid var(--line); } .hm-row > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; cursor: pointer; list-style: none; } .hm-row > summary::-webkit-details-marker { display: none; } /* Подпись имеет право перенестись, значение — нет. В рейле 260px «Двигатель и коробка» занимает 140, и при `flex: none` значению оставалось около пятидесяти: «бензин» не влезал даже в одно слово. Подпись из двух слов переносится без потери смысла, обрезанное значение теряет его целиком. */ .hm-row > summary > b { flex: 0 1 auto; min-width: 0; font-weight: 600; font-size: 14px; } /* НА ДЕСКТОПЕ ЗНАЧЕНИЕ ПЕРЕНОСИТСЯ, НА ТЕЛЕФОНЕ РЕЖЕТСЯ. Правило «до трёх подписей и не длиннее 28 знаков» считает сервер, который не знает ширины: в рейле 260px значению остаётся около 120, и «бензин · автомат» превращалось в «бе…». Многоточие уместно там, где строка одна и высота фиксирована (телефон, 52px), а в рейле высота свободна. ТРИ СТРОКИ, А НЕ ДВЕ, И ЭТО ЗАМЕР. Пробег встал третьим в строку к году и кузову, и на живой доске `Год 2015+ · ≤ 137 000 км и ещё 1` — 32 знака — в двух строках по 84px обрывалось на «и ещё», то есть строка молчала о том, что кузов тоже выбран. Сервер уже держит потолок в 28 знаков плюс «и ещё N», и три строки этот потолок вмещают целиком. Стоит это 8px на ОДНОЙ строке из шести и только когда ей есть что сказать: 46px там, где значение короткое. */ .hm-row .rv { flex: 1 0 84px; min-width: 84px; text-align: right; font-size: 12.5px; color: var(--link); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hm-row .rv.empty { color: var(--ink-dim); font-weight: 400; } /* «и ещё 3» — это счёт условий, а не условие: тем же кеглем, но не синим и не жирным. */ .hm-row .rv i { font-style: normal; font-weight: 400; color: var(--ink-dim); } .hm-row .rv .out { margin-left: 6px; color: var(--fail); } /* Шеврон СЛЕВА от крестика: строка, у которой справа только крестик, читается как «можно лишь удалить». Поворотом, а не подменой глифа: `content` на `::after` меняется только через второе правило, а поворот переживает любой шрифт. */ .hm-row .rc { flex: none; font-size: 11px; color: var(--ink-dim); } .hm-row[open] .rc { display: inline-block; transform: rotate(180deg); } .hm-row .rx { flex: none; width: 44px; height: 44px; margin-right: -10px; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; color: var(--ink-dim); text-decoration: none; } .hm-row .rx:hover { color: var(--fail); } .hm-row .rowbody { display: grid; gap: 9px; padding: 2px 0 12px; } /* Кнопка «показать модели» видна только там, где нет скрипта: он прячет её первым делом. Обводкой, а не заливкой: заливка на одном экране с «Применить» спорит с ней за нажатие. */ .show-models { justify-self: start; min-height: 40px; padding: 0 14px; border: 1px solid var(--link); border-radius: 6px; background: transparent; color: var(--link); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .hm-row .morelist { display: flex; flex-wrap: wrap; gap: 6px; } .hm-row .rowbody > small { color: var(--ink-dim); font-size: 11.5px; } /* Разговор о записи: имя и две отправки одной формы. Две кнопки, а не две формы: имя, напечатанное человеком, обязано уехать с любой из них, а двух форм с одним полем не бывает. `formaction` у второй добавляет `watch=` — тот же адрес, которым «Следить каждый день» уводит на выбор канала с посадочных. */ .hm-save > summary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; list-style: none; border: 1px solid var(--link); border-radius: 6px; background: transparent; color: var(--link); font-size: 13.5px; font-weight: 600; cursor: pointer; } .hm-save > summary::-webkit-details-marker { display: none; } .hm-save[open] > summary { margin-bottom: 9px; } .hm-save form { margin: 0; display: grid; gap: 8px; } .hm-name { display: flex; flex-direction: column; gap: 4px; } .hm-name > span { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .4px; } .hm-name input { min-height: 38px; } .hm-save-do { display: flex; gap: 8px; flex-wrap: wrap; } .hm-save-do button { flex: 1 1 auto; min-height: 40px; border-radius: 6px; border: 1px solid var(--link); background: var(--link); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .hm-save-do button.alt { background: transparent; color: var(--link); } @media (max-width: 1023px) { .hm-save > summary { min-height: 46px; font-size: 14.5px; } .hm-save-do button { min-height: 46px; } .hm-name input { min-height: 44px; } } /* ══ ВТОРОЙ ЗАХОД ═════════════════════════════════════════════════════════════════════════ «Применить» видна всегда, «Детальный поиск» стал кнопкой, растаможка — одной строкой. */ /* КНОПКА «ПРИМЕНИТЬ» НА ДЕСКТОПЕ ЗАКРЕПЛЕНА ЗА ВЬЮПОРТОМ, А НЕ ЗА РЕЙЛОМ. Липкой внутри рейла её было не видно на верхней трети страницы: рейл начинается на 294px (шапка, герой, полоса, наборы), высотой он почти во весь экран, и его НИЗ до первой прокрутки лежит под фолдом. Замер 1440x900: кнопка стояла на 1023–1067 при экране в 900, то есть человек, менявший марку или цену в первом же экране, не видел, чем это применить. Колонка рейла — это первая колонка `.shell` внутри `.wrap` (max-width 1120px, padding 18). Отсюда `left`: та же арифметика, что даёт браузер самой колонке, без единой строки JS. Рейл при этом остаётся липким на всю высоту выдачи, поэтому кнопка всегда стоит под видимым фильтром, а не сама по себе. На телефоне ничего не меняется: там шторка это весь экран, и кнопка липнет к её низу — замер 390 и 380 показал её на всех трёх позициях прокрутки. */ @media (min-width: 1024px) { .hm-apply { position: fixed; left: max(18px, calc((100vw - 1120px) / 2 + 18px)); bottom: 14px; width: 272px; margin: 0; padding: 0; background: none; z-index: 22; } .hm-apply button { box-shadow: 0 8px 22px rgba(20, 24, 29, .26); } /* Место под закреплённой кнопкой: без него последнее поле рейла пряталось бы под ней и доскроллить до него было бы нечем — та же поломка, что чинил внутренний скролл рейла. */ .picker-wrap { padding-bottom: 64px; } } /* «ДЕТАЛЬНЫЙ ПОИСК» — КНОПКА, НО ОБВЕДЁННАЯ И НЕ ЛИПКАЯ. Заливка тут была бы второй синей кнопкой в одной колонке, и они бы конкурировали: «Применить» срабатывает здесь и сейчас, эта уводит на другую страницу. Разница читается до нажатия, тем же приёмом, что у «Сохранить поиск…». */ .allf-cta { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--link); font-size: 13.5px; font-weight: 600; text-align: center; } .allf-cta:hover { border-color: var(--link); text-decoration: none; } @media (max-width: 1023px) { .allf-cta { min-height: 46px; font-size: 14.5px; } } /* РАСТАМОЖКА ОДНОЙ СТРОКОЙ. Значений три, и выпадающий список ради трёх — это нажатие, ожидание отрисовки и ещё нажатие. Здесь все три видны сразу вместе с числами по срезу. Радиокнопка спрятана, но не выключена: клавиатура и чтение с экрана работают, потому что `label` оборачивает сам input. */ .segbox { display: flex; gap: 6px; } .segbox label { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); cursor: pointer; font-size: 13px; white-space: nowrap; } .segbox input { position: absolute; opacity: 0; width: 0; height: 0; } .segbox label:hover { border-color: var(--ink-faint); } .segbox input:checked + span { color: var(--link); font-weight: 700; } .segbox label:has(input:checked) { border-color: var(--link); background: var(--panel-2); } .segbox input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 3px; } .segbox u { text-decoration: none; color: var(--ink-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; } .segbox input:checked + span u { color: var(--link); } @media (max-width: 1023px) { .segbox label { min-height: 44px; font-size: 14px; } } /* Пустая коробка модели: та же высота, та же рамка, что у списка марок, чтобы пара «марка, модель» читалась двумя полями, а не полем и подписью под ним. Наполняется она после выбора марки — список галочек, потому что модель это мультивыбор. */ .modellist.empty { display: flex; align-items: center; min-height: 40px; padding: 0 10px; background: var(--panel-2); } .modellist.empty .mhint { color: var(--ink-faint); font-size: 12px; line-height: 1.35; } /* На телефоне поля подборщика 44px — пустая коробка обязана быть той же высоты, иначе пара «марка, модель» снова читается как поле и что-то под ним. */ @media (max-width: 1023px) { .modellist.empty { min-height: 44px; } } /* Две кнопки вместо трёх: «любой» это отсутствие условия, а не значение. Ширину они делят пополам, поэтому число под словом помещается целиком. */ .segbox label { flex: 1 1 0; }