/* Палитра бренда Bronka. От темы Telegram берём только одно — светлая она или тёмная (скрипт ставит data-theme на ); сами цвета фирменные, чтобы приложение выглядело одинаково у всех. Bron Red — единственный акцент: кнопки-действия, точка знака, расстояние. Go Green из гайда здесь не используется: он только для «свободно». */ :root { --red: #E8432E; --night: #12151C; --ink: #1B2230; --steel: #98A2B6; --paper: #FFFFFF; /* Светлая схема: Paper и Ink. Steel Grey на белом слишком бледный для адресов (контраст 2,6:1), поэтому подписи — смесь Steel с Ink. */ --bg: var(--paper); --text: var(--ink); --hint: color-mix(in srgb, var(--steel) 60%, var(--ink)); --card: color-mix(in srgb, var(--steel) 12%, var(--paper)); --line: color-mix(in srgb, var(--steel) 35%, transparent); --link: var(--red); --button: var(--red); --button-text: var(--paper); --pill: var(--ink); /* выбранный чип или вкладка */ --pill-text: var(--paper); --radius: 14px; } /* Тёмная схема: Night и Paper, карточки — Ink. */ :root[data-theme="dark"] { --bg: var(--night); --text: var(--paper); --hint: var(--steel); --card: var(--ink); --line: color-mix(in srgb, var(--steel) 25%, transparent); --pill: var(--paper); --pill-text: var(--night); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--night); --text: var(--paper); --hint: var(--steel); --card: var(--ink); --line: color-mix(in srgb, var(--steel) 25%, transparent); --pill: var(--paper); --pill-text: var(--night); } } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Страница сама не прокручивается никогда: шапка стоит, а прокручивается содержимое каждого экрана внутри неё. Иначе iOS-WebView при резком прыжке прокрутки к началу (листание страниц) на кадр сбрасывал всю отрисовку — мигал весь экран вместе с шапкой. Заодно окну нечего отдавать Telegram как жест «свернуть». */ html, body { height: 100%; overflow: hidden; } body { margin: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; height: var(--tg-viewport-stable-height, 100dvh); background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding-bottom: env(safe-area-inset-bottom); /* Без этого мобильный браузер ждёт 300 мс после касания — вдруг это двойной тап для масштаба. Нажатия начинают отзываться сразу. */ touch-action: manipulation; overscroll-behavior: none; } main { flex: 1 1 auto; min-height: 0; position: relative; } /* ------------------------------------------------------------------ шапка */ .top { flex: 0 0 auto; position: relative; z-index: 2; background: var(--bg); padding: 10px 12px 6px; border-bottom: 1px solid var(--line); } /* Вордмарк по гайду: BRONKA капсом, чёрное начертание, точка-кресло после слова. Точка всегда красная — серой её делать нельзя. */ .brand { display: flex; align-items: baseline; gap: 2px; margin: 0 2px 8px; } .brand-word { font-size: 17px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; } .brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); align-self: flex-end; margin-bottom: 1px; } .brand-sub { margin-left: 10px; font-size: 12px; color: var(--hint); } .search { width: 100%; padding: 11px 14px; border: none; border-radius: var(--radius); background: var(--card); color: var(--text); font-size: 15px; } .search:focus { outline: 2px solid var(--button); } .tabs { display: flex; gap: 6px; margin-top: 8px; } .tab { flex: 1; padding: 8px; border: none; border-radius: 10px; background: var(--card); color: var(--hint); font-size: 14px; font-weight: 500; } .tab.is-active { background: var(--pill); color: var(--pill-text); } .tab-icon { flex: 0 0 44px; } /* Панель фильтров закрыта по умолчанию: на телефоне четыре ряда кнопок съели бы весь экран до списка. Открывается плавно — высота едет через grid-template-rows 0fr → 1fr, это единственный способ анимировать «auto»-высоту без измерений в скрипте. */ .panel { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 240ms cubic-bezier(0.22, 0.7, 0.3, 1), margin-top 240ms cubic-bezier(0.22, 0.7, 0.3, 1); } .panel.is-open { grid-template-rows: 1fr; margin-top: 10px; } /* min-width: 0 обязателен: grid-ячейка не сжимается уже содержимого, и без него длинный ряд районов растягивал панель на всю свою ширину — прокручивалась страница, а не ряд. */ .panel-inner { min-height: 0; min-width: 0; overflow: hidden; } .panel.is-open .panel-inner { overflow: visible; } .panel-row { margin-bottom: 10px; } .panel-label { display: block; font-size: 12px; color: var(--hint); margin-bottom: 5px; } .chips { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } .distance { color: var(--link); font-weight: 600; } .geo-hint { background: var(--card); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; font-size: 14px; } .geo-hint button, .empty button { margin-top: 8px; padding: 9px 14px; border: none; border-radius: 10px; background: var(--button); color: var(--button-text); font-size: 14px; font-weight: 500; } .chip { flex: 0 0 auto; padding: 6px 12px; border: none; border-radius: 999px; background: var(--card); color: var(--text); font-size: 13px; white-space: nowrap; } .chip.is-active { background: var(--pill); color: var(--pill-text); } /* ------------------------------------------------------------------- виды */ /* Экраны лежат друг на друге и занимают всё место под шапкой; каждый прокручивается сам. Скрытые не display: none, а visibility: hidden — так список помнит, где его прокрутили, когда возвращаешься из карточки. */ .view { position: absolute; inset: 0; visibility: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 12px 24px; } .view.is-active { visibility: visible; } #map { padding: 0; overflow: hidden; } #map-canvas { width: 100%; height: 100%; touch-action: none; } /* ------------------------------------------------------------- карточки */ .card { background: var(--card); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; } /* Цена — то, по чему выбирают, поэтому она в своей колонке справа и крупнее всего остального. Строка описания при этом может быть любой длины: min-width: 0 не даёт ей выдавить цену за край. */ .card-row { display: flex; align-items: flex-start; gap: 12px; } .card-main { flex: 1; min-width: 0; } .card-price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; } .price-from { font-size: 11px; color: var(--hint); } .price-value { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .price-unit { font-size: 11px; color: var(--hint); margin-top: 1px; } .price-none { font-size: 11px; color: var(--hint); text-align: right; } .card-title { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; } .card-line { color: var(--hint); font-size: 13px; margin-top: 3px; } /* Значки — второстепенная строка, поэтому приглушены: акцент в карточке должен быть только один, и это цена. */ .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .badge { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--hint) 14%, transparent); color: var(--hint); font-size: 12px; } .empty { color: var(--hint); text-align: center; padding: 40px 20px; } .count { color: var(--hint); font-size: 13px; margin: 2px 0 10px; } /* Листание внизу списка. */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; } .pager-btn { flex: 1; padding: 11px 14px; border: none; border-radius: 10px; background: var(--card); color: var(--text); font-size: 14px; font-weight: 500; } .pager-btn:disabled { opacity: 0.35; } /* Счётчик страниц — на самом деле