/* ── Токены ───────────────────────────────────────────────────────────── */ :root { --bg: #0b0e14; --bg-soft: #121722; --surface: #161c28; --surface-2: #1c2433; --line: #263145; --text: #e6edf6; --text-dim: #93a1b8; --text-mute: #64748b; --accent: #38bdf8; --accent-strong: #0ea5e9; --hot: #fb7185; --hot-soft: rgba(251, 113, 133, .14); --ok: #34d399; --warn: #fbbf24; /* * Вуаль «прожектора». На светлой теме она заметно легче: там затемнение * читается как тень, а не как выключенный свет, и плотность тёмной темы * превращала бы страницу в чёрный экран с одной карточкой. */ --dim: rgba(4, 7, 12, .55); --radius: 14px; --radius-sm: 9px; --shadow: 0 12px 34px rgba(0, 0, 0, .38); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* * Светлая тема включается двумя путями: системной настройкой и кнопкой в шапке * (`data-theme` на ``, ставит app.js). Набор значений поэтому написан * дважды — CSS не умеет применять один блок к селектору и медиазапросу сразу. * Меняете значение — меняйте в обоих местах. * * `:not([data-theme='dark'])` в медиазапросе обязателен: без него выбранная * вручную тёмная тема слетала бы обратно на светлую у тех, у кого система светлая. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { --bg: #f4f7fb; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f1f5f9; --line: #dfe6f0; --text: #0f172a; --text-dim: #475569; --text-mute: #7c8ba1; --shadow: 0 10px 28px rgba(15, 23, 42, .08); --dim: rgba(15, 23, 42, .34); } } :root[data-theme='light'] { --bg: #f4f7fb; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f1f5f9; --line: #dfe6f0; --text: #0f172a; --text-dim: #475569; --text-mute: #7c8ba1; --shadow: 0 10px 28px rgba(15, 23, 42, .08); --dim: rgba(15, 23, 42, .34); } * { box-sizing: border-box; } html { /* * Место под вертикальную полосу прокрутки резервируется всегда. Без этого * переключение видов меняло высоту страницы, полоса появлялась и исчезала, * и содержимое дёргалось по горизонтали — поля слева и справа переставали * совпадать. */ scrollbar-gutter: stable; /* * Переход по якорю останавливается ниже липкой шапки, а не под ней: * ссылка «Подробнее» из подвала вела на `/about#hold`, и шапка накрывала * заголовок раздела. `--topbar-h` ставит JS на одностраничнике; на серверных * страницах его нет, поэтому запасное значение — высота их шапки. */ scroll-padding-top: calc(var(--topbar-h, 72px) + 14px); } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } body { background-image: radial-gradient(720px 420px at 82% -8%, rgba(56, 189, 248, .13), transparent 65%), radial-gradient(560px 340px at 6% 4%, rgba(251, 113, 133, .09), transparent 60%); background-attachment: fixed; min-height: 100vh; } /* ── Шапка ────────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .topbar__inner { max-width: 1440px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .topbar__left { display: flex; align-items: center; gap: 18px; min-width: 0; } /* * Итоги занимают всё свободное место между названием и выбором языка * и центрируются в нём — поэтому лежат прямо в `.topbar__inner`, а не внутри * левой группы. * * Блок остаётся строчным потоком, а не flex-контейнером: во flex каждое слово * между кликабельными кнопками становится отдельным элементом, и строка * начинает жаться и рваться. Пробовали — текст сжался. */ .topbar__stats { flex: 1; min-width: 0; margin: 0; text-align: center; line-height: 34px; font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* * Итоги набраны одним серым: это фон, а не заголовок. Цветные вставки * и подчёркивания рябили в шапке и спорили с ценами в выдаче. * НЕ добавлять сюда ни подчёркивание, ни акцентный цвет — пробовали дважды. */ .topbar__stats b { font-weight: 650; } /* Кликабельна вся строка целиком — она вся про одно предложение. Кликабельность выдают курсор и подсветка, не декор. */ .stat-line { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-line:hover { color: var(--text); } @media (max-width: 820px) { .topbar__stats { display: none; } } .brand { display: inline-flex; align-items: center; /* Крыло само по себе с воздухом по краям — большой зазор отрывал бы от него текст */ gap: 4px; text-decoration: none; color: var(--text); font-size: 19px; letter-spacing: -.02em; } /* * Логотип-крыло. Прозрачный PNG, а не плашка с градиентом: фон у исходника * чёрный, и на светлой теме он проступал бы тёмным прямоугольником. Прозрачность * сделана по яркости — неон остаётся, фон уходит (см. CLAUDE.md). */ .brand__logo { width: auto; height: 46px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent)); } @media (prefers-color-scheme: light) { /* * Светло-голубой неон на белом почти не виден: рисунок задуман светящимся * на чёрном. Притемняем и добавляем насыщенности, чтобы линии читались, * а не выцветали в фон. */ .brand__logo { filter: saturate(1.5) brightness(.78) drop-shadow(0 1px 2px rgba(12, 74, 110, .35)); } } .brand__stack { display: flex; flex-direction: column; justify-content: center; gap: 1px; /* * Высота задана заранее и не зависит от текста: слоганы разной длины, и без * этого смена «Свобода в цене» на «Идеальный день для идеальной цены» дёргала * бы шапку, а вместе с ней и всю страницу под липким заголовком. */ min-height: 40px; } .brand__text { font-weight: 700; letter-spacing: .14em; font-size: 17px; } /* * Слоган. Сменяется сам: старый уходит вниз и гаснет, новый приходит сверху. * Полоса под названием фиксированной ширины — иначе соседние элементы шапки * ездили бы туда-сюда на каждой смене. */ .brand__slogan { display: block; width: 240px; font-size: 11.5px; line-height: 1.2; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s ease, transform .3s ease; } /* Уходит вниз */ .brand__slogan.is-out { opacity: 0; transform: translateY(9px); } /* * Исходное положение нового — выше строки и невидимо. Переход отключён * намеренно: иначе браузер анимировал бы и «перелёт» наверх, и слоган * пролетал бы через всю строку вместо появления сверху. */ .brand__slogan.is-pre { opacity: 0; transform: translateY(-9px); transition: none; } @media (prefers-reduced-motion: reduce) { .brand__slogan { transition: opacity .3s ease; } .brand__slogan.is-out, .brand__slogan.is-pre { transform: none; } } /* На узком экране в шапке и так тесно — слоган уступает место кнопкам */ @media (max-width: 860px) { .brand__slogan { display: none; } .brand__stack { min-height: 0; } } .topbar__meta { display: flex; align-items: center; gap: 12px; } /* Приложения — в шапке, правее выбора языка, по центру по вертикали */ .apps { display: flex; align-items: center; gap: 4px; } .apps__btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-dim); cursor: pointer; transition: all .15s; } .apps__btn:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 720px) { .apps { display: none; } } /* Бейдж планировщика и кнопка «Обновить сейчас» убраны из шапки 26.07.2026: состояние обхода читается через GET /api/crawl, ручной запуск — POST /api/refresh. В шапке теперь валюта — она меняет все цены на экране разом. */ /* ── Раскладка ────────────────────────────────────────────────────────── */ /* * Одна колонка. Панель-анкета на 336px убрана: выдача приходит за десятки * миллисекунд, и держать ради неё треть экрана под форму нечем оправдать. * Параметры живут в строке пилюль, подробности — в поповерах. */ .app { max-width: 1440px; margin: 0 auto; /* Снизу немного: подвал стоит близко к содержимому, пустой полосы между ними быть не должно. Запас под приколотые панели даёт сам подвал. */ padding: 18px 22px 20px; } /* ── Строка параметров ────────────────────────────────────────────────── */ /* * Строка параметров тянется во всю ширину: пилюли делят её между собой, а не * жмутся влево, оставляя пустое место справа. Растут все, кроме «Сбросить» — * она появляется по ходу дела, и если бы тянулась вместе со всеми, то при * появлении сдвигала бы всю строку и уезжала на второй ряд. */ .searchbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 14px; } /* * Ширины заданы жёстко и не зависят от содержимого. Тянущиеся пилюли выглядели * живо ровно до первого действия: выбрал страну — подпись стала длиннее, соседи * ужались, вся строка перекроилась. Параметры не должны прыгать под курсором. */ /* * Ширины подобраны так, чтобы на 1400 px строка держалась в один ряд вместе * с флажками и «Сбросить». Меняете числа — проверьте, что кнопка не уехала * на второй ряд: место под неё зарезервировано, но лишних 50 px там нет. */ .searchbar > .pill { flex: 0 0 auto; } .searchbar > #pillOrigin, .searchbar > #pillDest { width: 232px; } .searchbar > #pillWhen { width: 202px; } .searchbar > #pillBudget { width: 182px; } .searchbar > #pillCurrency { width: 142px; } .searchbar > .pill .pill__main { width: 100%; } /* * «Сбросить» держит своё место всегда, даже пока не нужна: `display: none` * заставлял бы строку перекраиваться в момент появления кнопки — то есть ровно * тогда, когда человек только что менял параметры и смотрит на это место. */ /* `!important` здесь не каприз: общий `.is-hidden` объявлен с ним же (см. низ файла) */ .searchbar > .pill--reset.is-hidden { display: inline-flex !important; visibility: hidden; pointer-events: none; } /* * Пилюля — контейнер, а не кнопка: внутри неё живут основная кнопка (открывает * поповер) и крестик сброса. Кнопку в кнопку вложить нельзя. */ .pill { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; transition: border-color .16s, background .16s, box-shadow .16s; } .pill__main { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border: 0; border-radius: inherit; background: none; color: inherit; font-family: inherit; font-size: inherit; cursor: pointer; } /* Крестик сброса — серый, разгорается под курсором */ .pill__clear { display: grid; place-items: center; width: 26px; padding: 0 9px 0 0; border: 0; border-radius: inherit; background: none; color: var(--text-mute); font-size: 12px; line-height: 1; cursor: pointer; transition: color .14s; } .pill__clear:hover { color: var(--hot); } .pill:hover { border-color: var(--accent); } /* Открытая пилюля подсвечена — видно, какой поповер сейчас на экране */ .pill.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .pill.is-set { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .pill__icon { font-size: 15px; line-height: 1; } .pill__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; } .pill__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); } .pill__value { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; } /* * «Куда» — пилюля с полем ввода вместо готового значения. Направление набирают * прямо здесь, поэтому списка стран в поповере больше нет: одно поле вместо * поля, подписи и скроллящегося списка на 237 строк. * * Поле выглядит как `.pill__value`, а не как input: рамки и фона нет, шрифт тот * же. Иначе в строке параметров появился бы прямоугольник, которого нет * у соседних пилюль, и «Куда» читалась бы как что-то чужеродное. */ /* Нажимается вся пилюля, поэтому и курсор текстовый по всей её площади */ .pill--combo { padding-left: 12px; cursor: text; } .pill--combo .pill__text { flex: 1; min-width: 0; } .pill--combo .pill__label { cursor: text; } .pill--combo .pill__clear { cursor: pointer; } .pill__input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; } .pill__input:focus { outline: none; } /* Плейсхолдер — это «Куда угодно», то есть текущее состояние, а не подсказка */ .pill__input::placeholder { color: var(--text); opacity: 1; font-weight: 600; } .pill--combo .pill__text { justify-content: center; padding: 7px 0; } /* * Свой крестик у `type="search"` браузер рисует сам, а в пилюле уже есть * `.pill__clear` — получалось два подряд, и они делали разное: наш сбрасывает * направление целиком, браузерный лишь чистит текст. Убираем чужой. */ .pill__input::-webkit-search-cancel-button, .pill__input::-webkit-search-decoration { appearance: none; display: none; } .pill--combo .pill__clear { padding-right: 10px; } /* * Подсказки к набранному — первым блоком в окне «Куда летим»: окно открывается * с первым же символом, и не нашлось нужного — рядом регионы и карта. Отдельным * выпадающим списком под пилюлей они бы оказались под окном: поповер лежит * в top layer и перекрывает всё, что нарисовано обычным z-index. */ .dest-drop { display: grid; gap: 2px; max-height: 232px; overflow-y: auto; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .dest-drop.is-hidden { display: none; } /* Стрелка маршрута между «Откуда» и «Куда» — та же, что в карточке */ .searchbar__arrow { align-self: center; color: var(--text-mute); font-size: 16px; padding: 0 1px; } /* * Переключатели прямо в строке параметров. Кнопки «Фильтры» нет: прятать * два флажка за поповером значило прятать одно нажатие за двумя. */ .switches { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 3px 4px 3px 10px; margin-left: 2px; } .switches .check { font-size: 12.5px; gap: 7px; } .switches .check input { width: 14px; height: 14px; } .pill__count { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #05131c; font-size: 11.5px; font-weight: 700; } /* Пилюля-кнопка без вложенной .pill__main — язык в шапке */ /* * Пилюля без внутренней `.pill__main` (язык): содержимое лежит прямо в ней, * поэтому отступ между бейджем «RU» и подписью задаётся здесь — тот же 9px, * что и внутри обычных пилюль. Без него они слипались. */ .pill--plain { align-items: center; gap: 9px; padding: 8px 14px; font-family: inherit; cursor: pointer; } /* «Сбросить всё» — обычная кнопка, поэтому паддинг задаётся ей самой */ .pill--reset { align-items: center; padding: 10px 15px; color: var(--text-mute); border-style: dashed; font-family: inherit; cursor: pointer; } .pill--reset:hover { color: var(--hot); border-color: var(--hot); } /* * Списки выбора внутри поповеров (валюта, язык). * * Нативный