/* Дизайн мини-аппа.
Ориентир — экраны Aviasales, Trip.com и Skyscanner: карточка билета там
это прежде всего два времени и линия перелёта между ними, а всё
остальное — подписи мелким. Прошлая версия рисовала коды городов и
пунктирную стрелку с самолётиком, то есть украшение на месте данных:
часы вылета источник отдаёт в каждой котировке, просто до экрана они
не доходили.
Палитра своя, а не из Telegram: тема оболочки даёт два фона и один
акцент, на них тревел-интерфейс не собрать. У Telegram остаётся цвет
шапки — она стоит вплотную над вебвью, и разъезжаться с ней нельзя. */
/* ═══ ТОКЕНЫ (v9 «направление v3» — design/flightdeals-v3-prompt.md +
design/flightdeals-v3-reference.html, волна A) ═══════════════════════
Полная замена палитры v8 (фиолет/светлый-дефолт) на эталонную:
графит #0e0f13, тёплый белый #f4f1ea, лиловый только у самолётика
маршрута. Тёмная тема теперь ОСНОВНАЯ — обычный body БЕЗ класса это и
есть тёмная тема; body.light (волна D) описан отдельно ниже одним
блоком, как просит задание, инверсия по формуле промпта.
Приём с волны v8 сохранён: канонические имена определены тут, старые
(--page/--line/--muted/--faint/--brand/--link/--good/--warn…), которыми
пользуются десятки правил экранов волн B/C, остаются алиасами через
var() — значение меняется в одном месте. */
:root {
color-scheme: dark;
--bg: #0e0f13;
--ink: #f4f1ea;
/* Роадмап §5б (readability-аудит): .6 давало 6.53:1 на --bg (с запасом),
но ЭТОТ ЖЕ токен (через --text-2/--muted) красит текст и поверх
--surface/--surface-2 (карточки/чипы) — там разница светлее фона
меньше, а в светлой теме .6 держал текст-2 буквально впритык, 4.57:1
(см. body.light ниже) — один шаг рендера от провала. .65 (посчитано
WCAG-скриптом, tests/js/test-tabs-contrast.js) даёт 7.5:1/6.9:1 тёмная
на --bg/--surface-2, 5.39:1/5.01:1 светлая — везде запас, не впритык. */
--mute: rgba(244, 241, 234, .65);
/* Ревью v12, P1: строго декоративное — пунктир/точки/затухающий
превью-текст соседей карусели (.dl-switch-side, .sc-dash-dim). Любой
текст, который пользователь должен ПРОЧЕСТЬ, ходит через --text-3
ниже (body{}) — тот больше не алиас на это значение, он даёт 2.7:1,
ниже порога даже «крупного» текста. */
--dim: rgba(244, 241, 234, .32);
/* Единственный цветной акцент во всём приложении — и то только у
самолётика на пунктирном маршруте (.rh-path svg, компонент
RouteDash). НЕ путать с --accent ниже: тот красит унаследованные с
v8 интерактивные заливки (активный чип, выбранный день календаря,
sheet-cta) и лиловым не пользуется — промпт запрещает цветной акцент
где-либо ещё («Фон и цвета»). */
--lilac: #b7b0f2;
/* Семантика цены (промпт, «Фон и цвета»): зелёный — дешевле/упала,
красный — дороже/выросла. Только бейджи и цифры, никогда фоны. */
--price-good: #8fe0bf;
--price-high: #f09590;
/* Формула затемнения фото (промпт, «Фото») + зерно (SVG feTurbulence,
дословно из эталона) + виньетка — общие для настоящих фото и
процедурных сцен городов (см. секцию «сцены» ниже и PhotoCard/
sceneHtml в app.js). */
--photo-scrim: linear-gradient(180deg, transparent 40%, rgba(14, 15, 19, .75) 78%, rgba(14, 15, 19, .95) 100%);
--photo-scrim-light: linear-gradient(180deg, rgba(14, 15, 19, .42) 0%, transparent 26%, transparent 40%, rgba(14, 15, 19, .78) 78%, rgba(14, 15, 19, .96) 100%);
--vignette: radial-gradient(120% 90% at 50% 35%, transparent 40%, rgba(0, 0, 0, .55) 100%);
--grain-svg: url("data:image/svg+xml;utf8,");
/* Радиусы (промпт, «Кнопки и элементы»): карточки/шит — 28, пилюля —
25. --r-sm/--r-md (12, мелкие элементы/инпуты/строки-списков) волной
A не тронуты — вне периметра «карточки/пилюля» промпта. */
--r-sm: 12px;
--r-md: 12px;
--r-card: 28px;
--r-pill: 25px;
--r-lg: var(--r-card);
--r-xl: var(--r-card);
/* Шкала кегля унаследованных экранов (волны B/C по месту). */
--f-xs: 11px;
--f-sm: 12px;
--f-md: 13px;
--f-base: 15px;
--f-lg: 17px;
--f-xl: 21px;
--f-2xl: 26px;
--f-3xl: 34px;
--f-title: 27px;
/* Именованная шкала v8 — она каскадирует на все 4 таба через .head h1
(--type-display-*) и .list-group-title (--type-micro-*), так
что вес/трекинг обновлены тут же по правилу промпта («никакого веса
600-700 в заголовках», «капс-подписи 11px, letter-spacing .16em»).
Остальные весовые литералы (600-800) внутри отдельных компонентов —
не через эти токены, волны B/C правят по месту (см. DESIGN_PLAN.md,
раздел v9 волна A — список того, что сознательно не тронуто). */
--type-display-size: 32px; --type-display-lh: 38px; --type-display-w: 300;
--type-title-size: 22px; --type-title-lh: 28px; --type-title-w: 400;
--type-headline-size: 17px; --type-headline-lh: 22px; --type-headline-w: 400;
--type-body-size: 15px; --type-body-lh: 20px; --type-body-w: 400;
--type-caption-size: 13px; --type-caption-lh: 16px; --type-caption-w: 400;
--type-micro-size: 11px; --type-micro-lh: 14px; --type-micro-w: 400;
--type-micro-tracking: .16em;
/* Новые именованные размеры промпта — для экранов волн B/C (01/02/03/
06/07): заголовок/город 42-46 вес 300, город капсом в «Куда угодно»
40-44 трекинг .2em, цена 40 вес 300, капс-подпись 11 трекинг .16em
(то же значение, что --type-micro-tracking — два имени, потому что
роли разные: micro красит существующие служебные ярлыки, cap — новые
герой-подписи экрана из промпта). */
--type-hero-size: 44px; --type-hero-w: 300;
--type-citycaps-size: 42px; --type-citycaps-tracking: .2em; --type-citycaps-w: 400;
--type-price-size: 40px; --type-price-w: 300;
--type-cap-size: 11px; --type-cap-tracking: .16em;
--pad: 16px;
--safe-b: env(safe-area-inset-bottom, 0px);
/* Плавающая стеклянная пилюля таббара (промпт, «Кнопки и элементы»):
64 высотой (было 60 — роадмап §5а вернул подписи под иконками, бар
подрос на те же 4px, что и .tab, см. её блок ниже) + 28 от низа +
запас, чтобы последняя карточка ленты не утыкалась прямо в бар
(задание волны A, п.4 — «паддинги контента снизу учитывают плавающий
бар»). Единственные потребители токена — main{}/#home-view{} ниже по
файлу (grep подтверждает) — травел/карта своих паддингов от него не
считают, им трогать нечего. */
--tabbar-h: 120px;
--icon-stroke: 1.75;
/* Высоты: primary-пилюля 50 (промпт), secondary-иконка/чипы — как в v8. */
--btn-h: 50px;
--btn-h-sm: 44px;
--chip-h: 36px;
/* Текст/иконки поверх фото (PhotoCard) и поверх сплошных тёмных
подложек (blur-кружки действий) — не меняются между темами. */
--on-scrim: #fff;
--on-scrim-2: rgba(255, 255, 255, .82);
--on-scrim-3: rgba(255, 255, 255, .65);
/* Ревью v12, P1: токен был объявлен, но ничем не потреблялся —
.dl-badge/.dl-fav/.rd-badge/.rd-radar жили только на .glass
(rgba(255,255,255,.12), белое стекло), и в светлых верхних 12%
фото, где --photo-scrim ещё прозрачен (transparent 40%), бейдж/
сердечко мерили 2.41-3.38:1. .45 не хватало даже на пересвеченном
небе (2.72:1 посчитано) — поднято до .62 (≥4.5:1 на белом фоне,
формула WCAG), задействовано ниже у самих компонентов. */
--scrim-btn-bg: rgba(10, 16, 26, .62);
/* Аудит 2026-09-05 — --radar-scrim/--radar-scrim-ink изначально были
задуманы как единый источник И для OFF, И для ON радара НАД фото
(.rt-radar в .rt-cta-row, .rd-radar). ON-роль у них забрана 06.09
(см. --radar-on/--radar-on-ink чуть ниже) — здесь остаётся только
OFF: кремовое стекло над фото, не меняется между темами, та же
логика, что и --on-scrim* строкой выше. */
--radar-scrim: #f4f1ea;
--radar-scrim-ink: #0e0f13;
/* Аудит 2026-09-06 (владелец сравнил обе кнопочные семьи «Следить» —
над фото, .rt-radar/.rd-radar, и в плоском подвале шита, #fd-radar/
#ds-radar — рядом и увидел, что даже после фикса 05.09 они красятся
по-разному: над фото ON держался тем-инвариантного --radar-scrim
(кремовый), в подвале — тем-следящего var(--ink)/var(--bg), в
светлой теме выглядят буквально противоположными цветами). Отныне
ON — ОДИН источник на ВСЕ поверхности и ОБЕ темы: заливка тем же
зелёным, что означает «дешевле»/«Покупать» (--price-good), но сам
--price-good тем-следящий (#8fe0bf тёмная/#166b4a светлая — см.
body{}/body.light ниже) и для инварианта не подходит, отсюда
отдельный литерал средней яркости. Объявлен только тут, в :root, —
НЕ переопределять в body.light, инвариантность нужна буквально.
Иконка поверх — currentColor (.rt-radar svg/.rd-radar svg ниже по
файлу), --radar-on-ink просто красит currentColor в белый. */
--radar-on: #2f8f4e;
--radar-on-ink: #ffffff;
--overlay: rgba(6, 10, 18, .4);
--shadow-modal: 0 -8px 40px rgba(0, 0, 0, .3);
--shadow-pin: 0 1px 4px rgba(0, 0, 0, .35);
--shadow-glow: 0 4px 18px rgba(0, 0, 0, .4);
}
/* Поверхности (--bg/--surface) — СВОИ, курированные (applyTelegramSurfaces()
в app.js прокидывает themeParams.bg_color/secondary_bg_color сюда как
приоритетный источник, курированный хекс ниже — фолбэк). Текст, бордер
и семантические цвета остаются курированными: контраст — обязательство
приложения, не темы стороннего бота. Три ступени --surface/--surface-2/
--border остаются от v8 (унаследованные экраны волн B/C ещё держатся на
сплошных карточках, не на стекле/фото/воздухе промпта) — просто
пересчитаны под новый графитовый --bg вместо угольного v8. */
body {
--bg: var(--tg-bg, #0e0f13);
--surface: var(--tg-surface, #17181d);
--surface-2: #1d1f26;
/* «Разделители-волосы» — промпт, экран Профиль. */
--border: rgba(255, 255, 255, .08);
--text: var(--ink);
--text-2: var(--mute);
/* Ревью v12, P1 (§0): было var(--dim) — 2.67:1 тёмная/2.04:1 светлая,
третий тир текста (крошки/шевроны «›»/«Реклама · erid»/подписи под
барами) читался в 2-3 раза хуже норматива. .48/.6 — минимум,
который держит ≥4.5:1 на обеих --bg (посчитано формулой WCAG, см.
/tmp/aud-ux/notes — 4.56:1 тёмная тут же, светлая — ниже в
body.light: фон там уже настолько светлый, что --text-2 (.6) сам
держит только 4.57:1, так что третий тир физически не может быть
заметно тусклее второго и остаться читаемым — не то же самое
значение случайно, эта светлая тема просто не даёт зазора. */
--text-3: rgba(244, 241, 234, .48);
--price-good: #8fe0bf;
--price-neutral: var(--text-2);
--price-high: #f09590;
/* --accent* красит унаследованные интерактивные заливки — промпт
запрещает цветной акцент где-либо, кроме самолётика маршрута, так
что «акцент» тут буквально --ink: заливка белым по тёмному, тот же
язык, что у .pill/.sheet-cta ниже. */
--accent: var(--ink);
--accent-text: var(--ink);
--on-accent: var(--bg);
--accent-soft: rgba(244, 241, 234, .12);
--shadow: 0 2px 14px rgba(0, 0, 0, .38);
--shadow-sm: var(--shadow);
--skeleton: linear-gradient(90deg, #1e212b 25%, #282c39 37%, #1e212b 63%);
/* Светлое стекло (эталон, .glass) — фон стеклянных иконок/пилюль/
бейджей поверх фото. --nav-bg — отдельно, таббар в эталоне темнее и
непрозрачнее generic .glass (нужно оставаться читаемым над любым
фоном ленты, не только над фото). */
--glass: rgba(255, 255, 255, .12);
--nav-bg: rgba(20, 21, 26, .55);
--sale: var(--price-high);
--danger: var(--price-high);
/* ── старые имена → алиасы на канонические ── */
--page: var(--bg);
--line: var(--border);
--muted: var(--text-2);
--faint: var(--text-3);
--brand: var(--accent);
--link: var(--accent-text);
--on-brand: var(--on-accent);
--brand-soft: var(--accent-soft);
--good: var(--price-good);
--warn: var(--price-high);
}
/* Волна D: светлая тема — инверсия по формуле промпта (#f3f1ec фон,
#14151c текст), переключается по Telegram.WebApp.colorScheme
(applyTheme(), app.js — уже вешает класс .light на body, когда тема
светлая; менять там было нечего — v9 уже привела схему к «тёмная =
дефолт без класса, светлая = body.light», см. комментарий в самом
applyTheme()). Механизм — не копия всех правил файла, а ПЕРЕЗАПИСЬ
горстки базовых custom properties: --text/--accent/--sale и десятки
унаследованных алиасов уже объявлены через var(--ink)/var(--price-*)
ВНУТРИ обычного body{} выше (не body.light) — переопределив тут только
источники (--bg/--ink/--mute/--dim/--price-good/--price-high/
--surface/--surface-2/--border/--nav-bg/--accent-soft/--skeleton), вся цепочка
пересчитывается сама (тот же приём, что уже даёт --tg-bg/--tg-surface
из applyTelegramSurfaces()). «Второстепенные — те же альфы» — дословно:
--mute/--dim/--border/--accent-soft/.rh-dot/.switch(on) держат ТЕ ЖЕ
значения альфы, что и в тёмной теме, только от новой светлой пары
ink/bg, а не пересобраны на глаз. */
body.light {
--bg: #f3f1ec;
--ink: #14151c;
/* Роадмап §5б: та же правка и по той же причине, что у --mute в :root
выше (тёмная тема) — держим ОДНУ альфу в обеих темах (принцип файла,
см. комментарий над body.light). Раньше .6 тут был одновременно и
минимумом 4.5:1, и потолком — --text-3 ниже был вынужден повторить
то же число (не мог быть темнее без провала). .65 даёт 5.39:1 —
теперь у --text-3 наконец есть куда быть темнее --mute, не трогая
сам факт, что он ниже порога не уходит (не меняем его значение). */
--mute: rgba(20, 21, 28, .65);
--dim: rgba(20, 21, 28, .32);
--text-3: rgba(20, 21, 28, .6);
/* Дневные сцены светлые сверху, а бейдж/сердечко живут в верхних
углах — без верхнего затемнения контраст падал до 1.89 (ревью
v10, P1-4). */
--photo-scrim: var(--photo-scrim-light);
/* Ревью v12, P1: #1d8a5f/#c94f43 (промпт) держат только 3.83:1/3.97:1
на #f3f1ec — «Сейчас дёшево»/«−82%» это обычный некрупный текст
(13-21px/300-600), порог 4.5:1. Затемнено на глаз до ≈5.5-5.7:1
(посчитано формулой WCAG) — тот же оттенок, просто на 1-2 ступени
темнее; бейдж/иконка НАД фото сюда не входят — те намеренно
остаются пастельными в обеих темах (см. блок «Стекло/иконки/бейджи
НАД фото» ниже, тут их не трогаем). */
--price-good: #166b4a;
--price-high: #a93a2f;
/* Курированный фолбэк поверхностей — themeParams Telegram (applyTelegramSurfaces())
по-прежнему приоритетнее через var(--tg-bg, …)/var(--tg-surface, …)
в обычном body{} выше, тут только курированные значения САМОЙ
светлой темы (были #17181d/#1d1f26 — тёмный графит, тут — тёплый
сероватый оффвайт той же СЕМЬИ, что и --bg, на 1-2 ступени темнее). */
--surface: #eae7e0;
--surface-2: #e2ded4;
--border: rgba(0, 0, 0, .08);
--accent-soft: rgba(20, 21, 28, .12);
/* Таббар — тоже стекло (blur+полупрозрачность), просто непрозрачнее
generic .glass (комментарий у --nav-bg выше) — в светлой теме тот же
принцип, светлое стекло вместо тёмного. */
--nav-bg: rgba(255, 255, 255, .65);
/* Skeleton-шиммер (план v8, §3) — был тёмно-графитовым фиксированно;
на светлом фоне тёмный шиммер читался бы дырой, не «загрузкой». */
--skeleton: linear-gradient(90deg, #e8e5dc 25%, #f0eee6 37%, #e8e5dc 63%);
}
/* ── Стекло/иконки/бейджи НАД фото — не зависят от темы тела ──────────
Промпт: «сцены городов оставь тёмными как есть» — сами фото/сцены не
меняются между темами (см. .scene* выше, .ex-photo — им ничего тут не
нужно), поэтому всё, что лежит ПРЯМО НА фото, а не на --bg, остаётся
таким же, каким было в тёмной теме, даже когда body.light перекрашивает
--ink/--price-good/--price-high для остального интерфейса: назад/
поделиться/радар «Маршрута» и «Сделки» (.rt-full-actions, .rt-radar),
сердечко карусели (.dl-fav) и билета (.rt-fav), радар-toggle/«Подождать»
«Радара» (.rd-radar/.rd-pill-wait), бейджи скидки/
тренда (.dl-badge/.rd-badge), скидка в факт-строке «Сделки»
(.rt-fact.is-good) и статус мёртвого билета (.rt-blurb.is-dead — «Сделка»,
openDealCard). Значения — буквально те же литералы, что у .glass/
--price-good/--price-high тёмной темы (см. токены в начале файла),
продублированы тут явно: сам токен теперь другой в body.light, а этим
элементам нужно СТАРОЕ значение независимо от темы.
Аудит светлой темы Главной (04.09): `.hm-fav` (сердечко «На выходные»/
«Горящего») — БУКВАЛЬНО тот же `.ic.glass` приём, что и `.dl-fav`
(карточка «переиспользована», см. её комментарий в app.js), но в этот
список не попала — свой `stroke: var(--ink)` (.ic svg, выше по файлу)
молча темнел в body.light поверх фото/hue-карточки, как и .dl-fav до
этого фикса. `.hm-hot-badge` раньше несла ту же history (`--ink` вместо
буквального значения) — 11.09.2026 её правило снято вместе с остальным
`.hm-hot-*` (карточка «Горящего» переиспользует `.hm-badge`, ниже по
каскаду, а он и так красит текст буквальным `#0e0f13`, не токеном —
свой override для body.light ему не нужен вовсе, см. .hm-badge). */
body.light .rt-full-actions .ic svg,
body.light .dl-fav svg,
body.light .hm-fav svg {
stroke: #f4f1ea;
}
/* .rt-radar/.rd-radar ушли из списка выше (аудит 2026-09-05, радар меняет
цвет по темам) — у обеих кнопок теперь свой `color: var(--radar-scrim)`
в базовом (не body.light) правиле рядом с их классом ниже по файлу, и
иконка берёт его через `stroke: currentColor`, а не хардкод тут; токен
theme-инвариантен сам по себе (объявлен вне body.light, см. начало
файла), отдельный override для body.light ему не нужен вовсе. */
body.light .dl-fav.is-fav svg,
body.light .rt-fav.is-fav svg {
fill: #f4f1ea;
}
body.light .dl-badge,
body.light .rd-pill-wait,
body.light .rd-pill-watch,
body.light .rd-goal-chip {
color: #f4f1ea;
}
body.light .rd-badge.is-good,
body.light .rt-fact.is-good {
color: #8fe0bf;
}
body.light .rd-badge.is-high,
body.light .rt-blurb.is-dead {
color: #f09590;
}
/* Приёмка v9, P1-5: `.pill { background: var(--ink); color: var(--bg) }`
переворачивается в body.light вместе с --ink/--bg — правильно для
пилюль НА --bg (шторки, профиль), но именно поверх фото это красит
«Смотреть»/«Купить за …»/«Покупать» тёмным на тёмном фото. Правило —
не по имени конкретной кнопки (`.dl-cta`), а по фото-контексту: любая
`.pill` внутри контентной обёртки над фото (`.dl-info` карусели,
`.rt-full-content` «Маршрута»/«Сделки», `.rd-card-content` «Радара» —
те же классы, что закреплены выше в этом блоке) получает промптовую
белую пилюлю независимо от темы тела, так же как иконки/бейджи рядом. */
body.light .dl-info .pill,
body.light .rt-full-content .pill,
body.light .rd-card-content .pill {
background: #f4f1ea; color: #0e0f13;
}
/* ── Стекло НЕ над фото — обычные плашки на --bg, инвертируем (промпт:
«стекло инвертируй rgba(0,0,0,.06-.08) + бордер rgba(0,0,0,.1)»).
Меньшинство .glass-потребителей: остальные (см. блок выше) — над фото
и туда не входят. Текст/иконки внутри уже читают --text/--text-2/--ink
токенами и переворачиваются сами — тут только фон/обводка.
Аудит светлой темы Главной (04.09): `#hm-search` (лупа топбара) и
`.hm-hero-chip` («N сделок» на hero-карточке «Весь мир») — тот же
голый `.glass` (rgba(255,255,255,.12)) на плоской `--bg`/`--surface-2`,
что уже дал 1.34:1 у `#dl-mode-toggle`/`.preset` (см. её комментарий
ниже) — тот же приём, замер PIL: без инверсии грань кружка/пилюли
отличалась от страницы на 1-3 из 255 (не видна физически). */
body.light #dl-mode-toggle,
body.light .preset,
body.light #hm-search,
body.light .hm-hero-chip,
body.light .hm-pd-card,
body.light #profile-gear {
background: rgba(0, 0, 0, .07);
border-color: rgba(0, 0, 0, .1);
}
/* Аудит светлой темы Главной (04.09), баг №1: `.hm-chip` (чипы месяцев
«Горящего сейчас») красил фон `var(--scrim-2)` — токен нигде не
объявлен (тот же класс guaranteed-invalid custom property, что уже
чинили у `.hm-card.hm-skel`/`.hm-cheaper-row` в этом файле, см. их
комментарии), background молча резолвился в transparent, а текст —
буквально `--on-scrim` (#fff, тем-инвариантный). В тёмной теме баг был
не виден (белый текст на прозрачном поверх тёмного `--bg` читается
нормально), в светлой — белый текст на прозрачном поверх кремового
`--bg` (#f3f1ec) визуально исчезает (замер PIL: ~1:1). Базовое правило
`.hm-chip` не трогаем (менять его — красить дефолтную тёмную тему,
которая сейчас случайно выглядит верно), фикс — только тут, теми же
переменными, что уже красят соседний `.filterbar .chip` (см. её
блок, «фильтры» выше по файлу): `--surface-2`/`--text-2` — готовая,
уже подобранная под обе темы пара поверхность/текст неактивной
пилюли, `.hm-chip.is-active` (--ink/--bg) не трогаем — активная
пилюля уже тем-корректна (те же алиасы, что --accent/--on-accent).
`:not(.is-active)` тут ОБЯЗАТЕЛЕН, не декоративный уточнитель: голый
`body.light .hm-chip` (тег `body` + 2 класса, 0,0,2,1) специфичнее
`.hm-chip.is-active` (2 класса, 0,0,2,0) и перекрашивал бы активную
пилюлю тоже, невзирая на порядок правил в файле — живая проверка
поймала именно это (PIL-замер после первого прохода). */
body.light .hm-chip:not(.is-active) {
background: var(--surface-2);
color: var(--text-2);
}
/* Ревью v12, P1 (§1): .sc-field лежит ровно на силуэте гор (.sc-scene),
который на этой высоте проступает через маску на ~36% — прозрачное
стекло (та же rgba(0,0,0,.07), что у остальных) не даёт устойчивой
границы, плейсхолдер местами теряется на сером силуэте (тёмная тема
так не страдает — фон там однороднее). Непрозрачная поверхность
вместо стекла — только тут и только в светлой теме. */
body.light .sc-field {
background: var(--surface); border: 1px solid var(--border);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light .tabbar { border-color: rgba(0, 0, 0, .1); }
body.light .tab.is-active { background: rgba(0, 0, 0, .08); }
/* RouteDash вне фото (.rh-dot/.rh-path — «Выдача»/«Билет», ref-06: код—код
с пунктиром; на «Маршруте»/«Поиске» тот же язык лежит на сцене и сюда
не входит) — точка/пунктир были белыми фиксированно, на светлом фоне
становятся ink-based тем же приёмом, что --mute/--dim выше. Самолётик
(--lilac) — НЕ трогаем: единственный цветной акцент одинаков в обеих
темах (промпт, «Фон и цвета»). */
body.light .rh-dot { background: rgba(20, 21, 28, .5); }
body.light .rh-path::before { border-top-color: rgba(0, 0, 0, .35); }
body.light .sc-dash-line { border-top-color: rgba(0, 0, 0, .28); }
/* Диагностика v12 этап 2 п.6: тот же .28 на светлом фоне читается хуже
(ink-текст низкой прозрачности против светлой поверхности) — чуть
плотнее, чем в тёмной теме. Ревью v16, №11: .32 всё ещё держал только
2.04:1 в центре окна (см. основной комментарий у .sc-airports,
app.css) — поднято до .58 (~4.28:1, формула WCAG к #f3f1ec), тот же
принцип, что и AW_FADE_LIGHT в app.js — светлой теме нужна более
высокая ступень непрозрачности для того же ощущаемого контраста. */
body.light .sc-airports-track span { opacity: .58; }
/* Тумблер «Уведомления» (Профиль) во «включённом» состоянии — та же
ink-based альфа .28, что и .rh-dot выше. */
body.light .list-row.is-on .switch { background: rgba(20, 21, 28, .28); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { overscroll-behavior-y: none; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 400 var(--f-base)/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", Roboto, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer;
touch-action: manipulation; }
/* Единый стиль иконок проекта: stroke 1.75 (план v8, §1) — раньше 1.9. */
svg { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
main { padding: 18px var(--pad) calc(var(--tabbar-h) + var(--safe-b) + 20px); }
/* Переходы между экранами — 220ms ease-out (план v8, §4). */
.panel { display: none; animation: fade .22s ease-out both; }
.panel.is-active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } }
/* Заголовок экрана (план v8, §1): именованная шкала брифа — display
32/38/700, крупнее и контрастнее подписи под ним. Больше воздуха
снизу — старые 14px впритык к контенту читались как «топорно». */
.head { margin: 0 2px 20px; }
.head h1 {
font-size: var(--type-display-size); line-height: var(--type-display-lh);
font-weight: var(--type-display-w); letter-spacing: -.5px; margin: 0 0 4px;
}
.head p { color: var(--text-2); font-size: var(--f-md); margin: 0; }
/* «Жирный + светлый» запрещён во всём приложении (план v8, §1: «§1
прямо запрещает» — заголовок целиком одним весом). Раньше .lt красил
половину заголовка приглушённым весом/цветом; сами
убраны из шаблонов §1/§2.1/§2.2/§2.7 этой волны (index.html, app.js:
paintGreeting/recentRoutesHtml), .lt тут обнулён на inherit как
защита для мест, куда эта волна не заходит (§2.3-2.6). */
.lt { font-weight: inherit; color: inherit; }
/* ═══ v3 базовые компоненты (design/flightdeals-v3-reference.html,
классы перенесены дословно) ══════════════════════════════════════════
.glass/.pill/.ic — общий стеклянный/пилюльный язык эталона: стеклянная
круглая иконка (.ic, обычно вместе с .glass — ``),
белая пилюля основного действия (.pill), полупрозрачная стеклянная
подложка бейджей/полей (.glass сама по себе). */
.glass {
background: rgba(255, 255, 255, .12);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, .14);
}
/* Ревью v12, P2: .glass на плоском --bg/--surface (не над фото) держит
1.34:1 — размывать нечего, грань кнопки/пилюли читается как невидимый
прямоугольник (замерено на #dl-mode-toggle/.preset). Радар-toggle в
подвале ОБЫЧНОГО шита (.sheet-foot .rt-radar — «Рейс»/«Даты и цены») —
та же дыра; тот же класс НАД фото («Маршрут»/«Сделка») не задет, эти
контексты живут в другом месте DOM (.rt-cta-row, не .sheet-foot). */
#dl-mode-toggle, .preset, .sheet-foot .rt-radar, #profile-gear {
border-color: rgba(255, 255, 255, .22);
}
/* Аудит 2026-09-05 (владелец: радар меняет цвет неправильно по темам) —
комментарий двумя правилами выше сам называл `.sheet-foot .rt-radar`
(«Рейс»/«Даты и цены») жертвой «той же дыры», что у #dl-mode-toggle/
.preset, но в их body.light-инверсию (см. блок «Стекло НЕ над фото»
выше по файлу) кнопку так и не добавили — офф-состояние оставалось
белым стеклом (`.glass`, rgba(255,255,255,.12)) НА светлом `--surface`
подвала шита: рамка выше это чинит, а вот заливка — нет, живой
Playwright-скрин (R-light-fd-radar-off.png) поймал полностью пропавшую
иконку. `:not(.is-on)` обязателен — `.rt-radar.is-on` красит свою
заливку токеном ниже по файлу (var(--ink), тем-корректно САМ по себе,
его трогать не нужно), а `body.light .sheet-foot .rt-radar` (0,0,3,1)
специфичнее `.sheet-foot .rt-radar.is-on` (0,0,3,0) и молча забил бы
заливку ON-состояния тоже — тот же приём, что уже документирован у
`.hm-chip:not(.is-active)` (см. её комментарий выше по файлу). */
body.light .sheet-foot .rt-radar:not(.is-on) {
background: rgba(0, 0, 0, .07);
border-color: rgba(0, 0, 0, .1);
}
.pill {
display: flex; align-items: center; justify-content: center;
height: var(--btn-h); border-radius: var(--r-pill);
background: var(--ink); color: var(--bg);
font-size: 15px; font-weight: 500;
transition: transform .12s ease-out;
}
.pill:active { transform: scale(.98); }
.pill[disabled] { opacity: .4; }
/* Ревью v12, P1: было 42×42, порог хит-зоны 44 — тут разница
несущественная визуально, проще поднять сам размер, чем городить
::after (см. компактные бейджи/кружки ниже по файлу, где визуальный
размер трогать нельзя и hit-área расширена невидимым слоем). */
.ic {
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.ic svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* ═══ v3 процедурные сцены городов (эталон, дословно) ═══════════════════
Заглушка вместо серого прямоугольника, пока нет своего фото направления
(промпт, «Фото»): градиент неба + силуэт хребта/крыш + зерно + виньетка.
4 сцены эталона — kgd (Калининград, закат)/sea (побережье)/mtn (горы,
ночь)/ist (Стамбул, минареты) — выбор детерминирован по hash(IATA)
(sceneForCity() в app.js), сама сцена рисуется генератором sceneHtml(). */
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene .sky { position: absolute; inset: 0; }
.scene .sun { position: absolute; border-radius: 50%; filter: blur(22px); }
.scene .hill { position: absolute; left: -10%; right: -10%; bottom: 0; }
.scene .grain { position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; background-image: var(--grain-svg); }
.scene .vig { position: absolute; inset: 0; background: var(--vignette); }
.scene .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(180deg, rgba(14, 15, 19, 0), rgba(14, 15, 19, .75) 55%, rgba(14, 15, 19, .98)); }
/* Калининград, закат */
.kgd .sky { background: linear-gradient(180deg, #1b1f2c 0%, #3b3a48 38%, #8a6a5a 68%, #c9906a 84%, #5a4a44 100%); }
.kgd .sun { width: 220px; height: 220px; left: 45%; bottom: 22%; background: rgba(255, 190, 130, .55); }
.kgd .h1 { height: 44%; background: #1a1a20; clip-path: polygon(0 100%, 0 62%, 8% 60%, 14% 64%, 22% 58%, 30% 60%, 36% 56%, 40% 58%, 44% 18%, 46% 10%, 48% 18%, 50% 56%, 58% 54%, 64% 50%, 66% 52%, 70% 46%, 72% 48%, 78% 52%, 86% 50%, 94% 56%, 100% 54%, 100% 100%); }
.kgd .h2 { height: 24%; background: #101014; clip-path: polygon(0 100%, 0 70%, 10% 72%, 18% 60%, 26% 64%, 34% 55%, 42% 62%, 55% 58%, 60% 40%, 62% 44%, 66% 60%, 78% 56%, 90% 62%, 100% 58%, 100% 100%); }
/* Сочи, море */
.sea .sky { background: linear-gradient(180deg, #0f1a2a 0%, #213b55 40%, #5d7a86 60%, #d8a06a 72%, #1c3340 73%, #0d1c26 100%); }
.sea .sun { width: 180px; height: 180px; left: 52%; bottom: 27%; background: rgba(255, 200, 140, .5); }
.sea .h1 { height: 18%; background: #0a1319; clip-path: polygon(0 100%, 0 40%, 12% 44%, 22% 30%, 30% 38%, 40% 34%, 48% 42%, 60% 36%, 70% 44%, 82% 38%, 92% 46%, 100% 42%, 100% 100%); }
.sea .h2 { height: 30%; background: linear-gradient(180deg, rgba(255, 200, 140, .12), transparent 60%); clip-path: polygon(40% 0, 60% 0, 70% 100%, 30% 100%); }
/* Горы, ночь */
.mtn .sky { background: linear-gradient(180deg, #070a14 0%, #141c33 50%, #2b3450 80%, #3c4258 100%); }
.mtn .sun { width: 56px; height: 56px; left: 70%; top: 15%; background: rgba(225, 232, 255, .7); filter: blur(4px); box-shadow: 0 0 60px 30px rgba(180, 195, 240, .18); }
.mtn .h1 { height: 52%; background: #1d2338; clip-path: polygon(0 100%, 0 80%, 12% 62%, 22% 70%, 34% 48%, 42% 56%, 50% 30%, 56% 40%, 62% 34%, 72% 58%, 80% 50%, 90% 66%, 100% 60%, 100% 100%); }
.mtn .h2 { height: 36%; background: #0d111d; clip-path: polygon(0 100%, 0 60%, 10% 66%, 20% 52%, 30% 60%, 38% 50%, 48% 62%, 58% 56%, 66% 64%, 74% 54%, 86% 62%, 100% 56%, 100% 100%); }
.mtn .snow { position: absolute; left: -10%; right: -10%; bottom: 0; height: 52%; background: rgba(220, 228, 245, .35); clip-path: polygon(46% 42%, 50% 30%, 54% 36%, 56% 40%, 58% 46%, 52% 43%, 48% 46%, 44% 44%); }
/* Стамбул */
.ist .sky { background: linear-gradient(180deg, #1a1230 0%, #3d2a4e 40%, #8a4a52 66%, #d9855a 82%, #3a2a2a 100%); }
.ist .sun { width: 240px; height: 240px; left: 20%; bottom: 16%; background: rgba(255, 170, 110, .5); }
.ist .h1 { height: 40%; background: #141016; clip-path: polygon(0 100%, 0 70%, 6% 70%, 7% 20%, 8% 20%, 9% 70%, 20% 72%, 26% 62%, 30% 54%, 36% 50%, 42% 52%, 48% 60%, 52% 62%, 60% 62%, 61% 24%, 62% 24%, 63% 62%, 76% 64%, 84% 60%, 92% 66%, 100% 62%, 100% 100%); }
.ist .h2 { height: 22%; background: #0b090c; clip-path: polygon(0 100%, 0 60%, 15% 64%, 25% 56%, 40% 62%, 55% 58%, 70% 64%, 85% 58%, 100% 62%, 100% 100%); }
/* ═══ v10 план §4/§2: дневная палитра сцен (body.light) ═══════════════
Каждая из 4 сцен выше получала только ночную/сумеречную палитру
(промпт v9 — «фото тёмные, атмосферные»); v10 добавляет вторую,
дневную, для body.light — тот же силуэт (clip-path не трогаем, форма
гор/крыш/минаретов не меняется), только небо/солнце светлее и холоднее
у зенита, силуэты на 2-3 ступени светлее графита, чтобы не читались
как «та же ночь с фильтром». sceneForCity()/sceneHtml() (app.js)
по-прежнему выбирают ТОЛЬКО силуэт (kind) по hash(IATA) — тема тут ни
при чём, палитру дня/ночи применяет каскад body.light, поэтому смена
темы Telegram (themeChanged → applyTheme() → classList.toggle('light'))
перекрашивает уже нарисованные сцены сама, без повторного рендера
разметки. .fade/.vig (нижнее затемнение для читаемости текста) НЕ
трогаем — тот же принцип, что и «стекло/бейджи над фото не
инвертируются» ниже по файлу: текст поверх фото лежит на тёмной
подложке независимо от темы приложения. */
body.light .kgd .sky { background: linear-gradient(180deg, #6fb8e8 0%, #a7d6ee 35%, #dcedf0 62%, #f7e0b6 84%, #eccf98 100%); }
body.light .kgd .sun { background: rgba(255, 246, 210, .85); }
body.light .kgd .h1 { background: #48566a; }
body.light .kgd .h2 { background: #313e50; }
body.light .sea .sky { background: linear-gradient(180deg, #4fa7dc 0%, #74c3e2 32%, #a6dad9 58%, #d3ecd8 78%, #eef6e4 100%); }
body.light .sea .sun { background: rgba(255, 250, 220, .8); }
body.light .sea .h1 { background: #1c3a4a; }
body.light .sea .h2 { background: linear-gradient(180deg, rgba(255, 246, 214, .4), transparent 60%); }
body.light .mtn .sky { background: linear-gradient(180deg, #4f8fdb 0%, #7db4e8 45%, #bfddf0 78%, #e6f1f6 100%); }
body.light .mtn .sun { background: rgba(255, 255, 255, .95); box-shadow: 0 0 60px 30px rgba(255, 255, 255, .3); }
body.light .mtn .h1 { background: #3c4a63; }
body.light .mtn .h2 { background: #26314a; }
body.light .mtn .snow { background: rgba(255, 255, 255, .8); }
body.light .ist .sky { background: linear-gradient(180deg, #5fa6da 0%, #8bc2e0 38%, #cfe4e2 66%, #f2ddac 86%, #e4c384 100%); }
body.light .ist .sun { background: rgba(255, 248, 220, .85); }
body.light .ist .h1 { background: #423a4d; }
body.light .ist .h2 { background: #2d2836; }
/* PhotoCard (промпт, «Фото»): формула затемнения+зерно+виньетка — общая
для НАСТОЯЩЕГО фото (банк /photos/v1/..., план fix-2026-08-28-photos-
diag.md) и процедурной сцены выше.
.ex-scrim уже красится --photo-scrim (унаследовано с v8) — тут та же
подложка дополняется зерном и виньеткой через псевдоэлементы, разметку
карточек трогать не нужно. v9 волна B: карусель «Сделки» (.dl-card) и
экран «Маршрут» (.rt-full) переиспользуют ровно .ex-scrim в разметке —
отдельных классов для них тут заводить не нужно (волна D: «Сделка»/
openDealCard тоже — .deal-hero-shade, второй класс этого дуэта, снят
вместе со старым .ticket, см. ниже). */
.ex-scrim { pointer-events: none; }
.ex-scrim::before {
content: ""; position: absolute; inset: 0; background: var(--vignette);
}
.ex-scrim::after {
content: ""; position: absolute; inset: 0;
opacity: .13; mix-blend-mode: overlay; background-image: var(--grain-svg);
}
/* ─── фильтры ──────────────────────────────────────────────────────── */
/* Горизонтальный скролл с fade-маской справа (план v8, §2.2) — иначе
непонятно, что чипов больше, чем помещается в экран. -webkit-mask-
image обязателен: Telegram на iOS — WKWebView, без префикса маска не
применится вовсе, а не просто выглядит иначе. */
.filterbar {
display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
margin: 0 calc(var(--pad) * -1) 10px; padding: 2px var(--pad) 6px;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.filterbar::-webkit-scrollbar { display: none; }
/* Чипы 36px (план v8, §1): активный = акцентный фон + белый текст,
неактивный = аутлайн (роадмап §3г, readability-аудит 2026-09-20: было
заливкой --surface-2, той же, что у десятка других плашек в файле, —
выключенный фильтр визуально не отличался от статичной карточки, «не
читается как переключатель»; заливка снята, остаётся только видимая
обводка — «пусто внутри» vs «сплошная заливка» читается однозначно
как «выключен» vs «включён», без обучения). border-color — --text-3,
не --border: тот 0.08 альфы — hairline для разделителей строк списка,
для контура самостоятельной кнопки этого мало; --text-3 даёт ~4.4-4.5:1
к --surface в обеих темах (WCAG-формула, tests/js/test-tabs-contrast.js)
— контур виден, не домысливается. */
.chip {
/* Ревью v12, P1: --chip-h (36px) ниже порога 44 — min-height поверх
фиксированной height не меняет токен (он же красит другую
геометрию по файлу), просто клампит фактическую высоту вверх. */
flex: none; height: var(--chip-h); min-height: 44px; display: inline-flex; align-items: center;
padding: 0 14px; border-radius: 999px; white-space: nowrap;
font-size: var(--f-md); font-weight: 600; color: var(--text-2);
background: var(--surface); border: 1px solid var(--text-3);
transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease-out;
}
.chip.is-active {
color: var(--on-accent); background: var(--accent); border-color: var(--accent);
/* Аудит UX, P3 (радар-цель, openRadarGoalSheet): живой замер (Playwright,
computed style + WCAG-формула) на реальных токенах обеих тем даёт
16-17:1 текст/фон у самого is-active чипа — цветовая инверсия
(--accent/--on-accent = --ink/--bg, тот же язык, что и у .hm-chip.
is-active «Все даты», см. её блок выше по файлу) уже отличная, не
переизобретаем. Жирность — ВТОРОЙ, независимый от цвета канал
(WCAG 1.4.1 «не только цветом»): «Все даты» полагается на то же
цветовое правило в одиночку — тут не трогаем её, а чипам цели
радара (4 похожих по форме пилюли подряд, в отличие от одиночной
«Все даты» на фоне обычных чипов месяцев) лишний, не завязанный на
оттенок сигнал не помешает.
*/
font-weight: 700;
}
.chip:active { transform: scale(.98); }
/* P1.5 («Выдача прогрессивно»): чипы-заглушки, пока не пришли рейсы —
тот же приём, что .day.nodata/.day.past в календаре (муторно и
некликабельно, но геометрия на месте, чтобы её не «перевёрстывало»,
когда придут настоящие интерактивные чипы). */
.chip:disabled { opacity: .45; pointer-events: none; }
.status { color: var(--muted); font-size: var(--f-sm); margin: 0 2px 10px; }
.status:empty { display: none; }
.status.error { color: var(--sale); }
.status a { color: var(--link); font-weight: 600; }
/* P1.5: «Ищем лучшие цены…» — лёгкая анимация вместо голого текста, три
точки пульсируют по очереди (тот же язык, что «печатает…» в мессенджерах).
currentColor наследует --muted от .status — отдельный токен не нужен. */
.rs-dots { display: inline-flex; gap: 2px; margin-left: 3px; vertical-align: middle; }
.rs-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .25; animation: rs-dot-pulse 1.1s ease-in-out infinite; }
.rs-dots i:nth-child(2) { animation-delay: .15s; }
.rs-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rs-dot-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* ═══ inline-баннер сетевой ошибки (план v8, §4) ═══════════════════════
Заменяет tg.showAlert для сетевых сбоев (не для подтверждений
действий, те остаются alert): фиксированная плашка сверху с кнопкой
«Повторить», не модальный alert поверх приложения. showNetError()/
hideNetError() в app.js — общий примитив на весь проект; volна A
подключает его в своей зоне (карта «Куда угодно»), остальные
showAlert(`Не вышло: …`) в §2.3-2.6 переведёт волна B/C (список в
DESIGN_PLAN.md). */
.net-banner {
position: fixed; left: 10px; right: 10px; z-index: 50;
top: max(env(safe-area-inset-top, 0px), 10px);
display: flex; align-items: center; gap: 10px;
padding: 12px 12px 12px 14px; border-radius: var(--r-lg);
background: var(--surface); box-shadow: var(--shadow-modal);
border: 1px solid var(--border);
animation: fade .22s ease-out both;
}
.net-banner-msg { flex: 1; min-width: 0; font-size: var(--f-md); color: var(--text); }
.net-banner button {
flex: none; height: 32px; padding: 0 14px; border-radius: 999px;
background: var(--accent); color: var(--on-accent);
font-size: var(--f-sm); font-weight: 650;
transition: transform .12s ease-out;
}
.net-banner button:active { transform: scale(.96); }
/* ─── секции: «row-head» ────────────────────────────────────────────
Приёмка v9, P1-6: единственные потребители — «Минимум по дням»/«Лучшие
даты» в шторке «Даты и цены» (app.js, openDatesSheet) — промпт §6
просит капс-подпись (11px/.16em), не заголовок весом 750. Тот же
стиль, что и .list-group-title (Профиль), text-transform делает капс
из обычного текста в разметке — сам текст трогать не пришлось. */
.row-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; }
.row-head h2 {
flex: 1; margin: 0; font-size: var(--type-micro-size); line-height: var(--type-micro-lh);
font-weight: var(--type-micro-w); text-transform: uppercase;
letter-spacing: var(--type-micro-tracking); color: var(--text-2);
}
.row-head .sub { color: var(--faint); font-size: var(--f-sm); font-weight: 500; }
/* ─── пусто и скелеты ──────────────────────────────────────────────── */
/* EmptyState (приёмка v9, P1-7): промпт запрещает обводки/плашки везде —
раньше только .rd-empty (Радар) снимал заливку/бордер модификатором,
остальные .empty (первый запуск без города, «Куда угодно» без
результатов, сетевые ошибки) оставались обычной карточкой с обводкой.
Действие — не всегда ghost «Повторить»: у первого запуска это
единственный путь внутрь приложения, ему язык главной кнопки
(.empty-cta, пилюля — см. emptyState() в app.js). */
.empty {
padding: 34px 22px; text-align: center; color: var(--text-2);
background: none; border: 0; border-radius: var(--r-lg);
}
.empty svg { width: 34px; height: 34px; color: var(--text-3); margin-bottom: 10px; }
.empty b { display: block; font-size: var(--f-lg); font-weight: 300; color: var(--text); margin-bottom: 4px; letter-spacing: -.02em; }
.empty p { margin: 0; font-size: var(--f-md); line-height: 1.45; }
.empty a { color: var(--accent-text); }
.empty-cta { width: 200px; margin: 18px auto 0; }
.empty-retry {
display: inline-flex; align-items: center; justify-content: center;
margin-top: 14px; height: var(--btn-h-sm); padding: 0 20px; border-radius: 999px;
background: none; border: 1.5px solid var(--border); color: var(--accent-text);
font-size: var(--f-md); font-weight: 650;
transition: transform .12s ease-out, border-color .12s ease-out;
}
.empty-retry:active { transform: scale(.98); border-color: var(--accent); }
.skeleton {
height: 132px; border-radius: var(--r-lg);
background: var(--skeleton); background-size: 400% 100%;
animation: shimmer 1.3s ease-in-out infinite;
}
.skeleton.tall { height: auto; aspect-ratio: 4 / 5; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* Скелетон фото города (план v8, §3): не отдельный оверлей-блок, а
background САМОГО — пока файл не декодирован, браузер рисует
фон элемента вместо картинки, так что шиммер виден без лишней разметки;
снимается классом при onload (app.js, все фото-цепочки). */
.img-loading { background: var(--skeleton); background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; }
/* ─── нижняя навигация: FloatingTabBar (промпт, «Кнопки и элементы» +
эталон .nav) ══════════════════════════════════════════════════════════
Плавающая стеклянная пилюля, 5 кнопок — главная/поиск/находки/радар/
профиль (v10 план §5: Поиск первый и стартовый, было молния/лупа в v9 —
index.html меняет порядок кнопок).
Роадмап §5а (readability-аудит, 2026-09-20): подписи вкладок раньше
уезжали в sr-only (эталон рисовал таббар вовсе без подписей) — «иконки
без слов не считываются с одного взгляда», владелец попросил подписи
ГЛАЗАМИ, не только скринридеру. Бар подрос 60→64px, .tab 44→52px (запас
под вторую строку текста под иконкой) — --tabbar-h (:root выше) сдвинут
на ту же дельту (116→120), иначе паддинги контента (main{}/#home-view
ниже по файлу) начали бы утыкаться в подросший бар. */
.tabbar {
/* max(--safe-b, --tg-content-safe-area-inset-bottom) — унаследовано с
v8: обычный env() safe-area устройства ИЛИ, если больше, инсет,
который для клиентов Bot API 8+ прокидывает сам telegram-web-app.js. */
position: fixed; left: 50%; z-index: 30;
bottom: calc(28px + max(var(--safe-b), var(--tg-content-safe-area-inset-bottom, 0px)));
transform: translateX(-50%);
display: flex; align-items: center; gap: 6px;
height: 64px; padding: 0 10px; border-radius: 30px;
background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, .14);
/* Приёмка v9, P2-2: эталонный .nav — без тени, separation держат только
стекло/обводка. */
}
.tab {
width: 52px; height: 52px; flex: none;
display: flex; align-items: center; justify-content: center;
border-radius: 22px; color: var(--mute);
transition: transform .12s ease-out, background .16s ease, color .16s ease;
}
.tab:active { transform: scale(.94); }
/* Активная — светлый кружок за иконкой+подписью (промпт), не акцентная
заливка текста: лиловый акцент вне самолётика маршрута запрещён («Фон
и цвета») — весь сигнал «выбрано» несёт инверсия --mute→--ink, общая
для иконки И подписи (наследование, см. .tab-stack span ниже). */
.tab.is-active { background: rgba(255, 255, 255, .14); color: var(--ink); }
.tab-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tab svg { width: 22px; height: 22px; stroke-width: 1.5; transition: transform .18s cubic-bezier(.32, .72, 0, 1); }
.tab.is-active svg { transform: scale(1.06); }
/* Роадмап §5а: подпись под иконкой, 10px — верх диапазона брифа (10-11px)
отдан самой иконке, снизу подпись мельче, чтобы обе строки не спорили
за внимание. Цвет не задаём явно — наследует currentColor от .tab/
.tab.is-active выше: тот же переключатель --mute/--ink, что и у иконки,
одним каналом, а не второй параллельной парой правил, которая могла бы
рассинхронизироваться с ней при следующей правке. */
.tab-stack span {
font-size: 10px; line-height: 12px; font-weight: 400; white-space: nowrap;
}
/* Ревью v8, P1-8: role=tablist явно перекрывал неявный landmark
navigation у