/* Темы: только переопределения, общий слой не трогаем. * * ПОЧЕМУ ЗДЕСЬ НЕТ БЛОКА ДЛЯ «РАСШИРЕННОЙ» (rich). Нынешний облик — * это app.css как он есть. Если бы мы продублировали его значения сюда, * то завели бы второе место правды: правка в одном файле молча * расходилась бы с другим. Поэтому rich = отсутствие переопределений, * и обещание «нынешний вид не изменился» проверяется тривиально. * * ПОЧЕМУ ОТДЕЛЬНЫМ , А НЕ @import В КОНЦЕ app.css. По * спецификации @import обязан стоять до правил — дописанный в конец он * просто игнорируется. А порядок нужен именно такой: тема идёт ПОСЛЕ * общего слоя, иначе переопределения проиграют по каскаду. * * ПРАВИЛО ЭТОГО ФАЙЛА. Доводка под конкретную тему живёт тут, а не в * app.css. Общий слой обязан оставаться нейтральным, иначе следующая * тема начнётся с борьбы против предыдущей. * * И ГЛАВНОЕ: тема НИЧЕГО НЕ УДАЛЯЕТ. `display:none` здесь значит «в этом * облике не показываем»; блок остаётся в разметке, в коде и в данных и * работает в другой теме. */ /* ══ Базовая — режим совместимости ═══════════════════════════════ Приложение выглядит так, как привычно заказчику: белый лист, чистый чёрный текст, крупные фотографии, жёлтая кнопка действия. Числа не придуманы — сняты с экранов его приложения (docs/скрины-для-ТЗ, замеры в docs/ТЗ-описание-экранов.md). */ :root[data-theme="basic"] { /* Полотно: белое, без тёплого оттенка нашей «Расширенной» */ --paper: #FFFFFF; --surface: #F5F5F5; --surface-2: #EFEFEF; --line: #EDEDED; /* Текст: чистый чёрный и ровный серый — так у заказчика */ --ink: #000000; --ink-2: #848484; --ink-3: #9B9B9B; /* Жёлтый кнопки — измерен с их экрана. Для текста на светлом берём тёмный вариант: сам #E9B216 на белом не читается. */ --accent: #E9B216; --accent-deep: #8A6A00; /* Заставка и круглая «назад» чуть светлее кнопки — так на их экранах (замеры в docs/ТЗ-описание-экранов.md). */ --accent-splash: #F2B915; /* Гарнитура — СИСТЕМНАЯ: на Android это Roboto, то есть буквально то, что видно на снимках заказчика. Ничего не качаем, Golos остаётся «Расширенной». Unbounded в этом облике не участвует. */ --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: var(--font-ui); /* Крупнее и просторнее */ --fs-h1: 28px; --fs-h2: 20px; --fs-small: 14px; --lh: 1.5; --r-card: 14px; --r-photo: 14px; --r-btn: 10px; --btn-h: 53px; /* высота кнопки действия у заказчика */ } /* ── Компас: в этом облике его нет ───────────────────────────── Большой круг со стрелкой — наша навигация, у заказчика её нет вовсе. Гасим именно `.compass`, а НЕ весь `.go-mid`: внутри того же блока лежит `.hero` (расстояние и «до такой-то точки»), он теме нужен. Блок не удалён — в «Расширенной» он на месте и работает. */ [data-theme="basic"] .compass, [data-theme="basic"] #mini-compass, [data-theme="basic"] .ptile--compass { display: none; } /* ── Заставка ────────────────────────────────────────────────── Жёлтый экран с лапой, следами, версией и полосой загрузки — как у заказчика. Показывается с ПЕРВОГО кадра: `data-theme` стоит на ещё до стилей (js/theme.js), поэтому правило срабатывает сразу и заставка не мигает после отрисовки. Узор следов рисуем тем же знаком лапы, что и логотип, — отдельной картинки в проекте нет, а тащить её ради фона незачем. */ [data-theme="basic"] #splash { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; background-color: var(--accent-splash); background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; transition: opacity 260ms ease; } [data-theme="basic"] #splash.is-gone { opacity: 0; pointer-events: none; } [data-theme="basic"] .splash__v { position: absolute; top: calc(16px + var(--safe-t)); right: 20px; font-size: 15px; color: #191919; } [data-theme="basic"] .splash__paw { display: block; margin: 0 auto 10px; fill: #191919; } [data-theme="basic"] .splash__n { font-size: 34px; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: #191919; text-align: center; } [data-theme="basic"] .splash__bar { position: absolute; left: 20px; right: 20px; bottom: calc(52px + var(--safe-b)); height: 3px; border-radius: 3px; background: #D9A613; overflow: hidden; } [data-theme="basic"] .splash__bar > i { display: block; height: 100%; width: 0; border-radius: 3px; background: #191919; transition: width 200ms linear; } [data-theme="basic"] .splash__p { position: absolute; left: 0; right: 0; bottom: calc(26px + var(--safe-b)); text-align: center; font-size: 15px; color: #191919; } /* ── Каталог маршрутов: сетка в две колонки с крупным фото ────── У заказчика это первый экран, и он устроен именно так: квадратная фотография, под ней название, под ним описание. Разметка наша прежняя (ui.js renderChoose) — меняется только раскладка. */ /* В селекторе есть body.route-choosing НЕ для красоты: общий слой включает воронку правилом `body.route-choosing #route-choose`, и оно весомее простого `[data-theme] #route-choose` — тема проиграла бы по специфичности, а раскладка осталась бы в одну колонку. */ [data-theme="basic"] body.route-choosing #route-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; align-items: start; } /* Всё, что не карточка (переключатель города, заголовок), — во всю ширину */ [data-theme="basic"] #route-choose > :not(.rcard) { grid-column: 1 / -1; } [data-theme="basic"] #route-choose .rcard { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; margin: 0; border: 0; } [data-theme="basic"] #route-choose .rcard__i { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--r-photo); } /* Текстовая колонка в сетке не режется: ограничение в две строки досталось ей от старого общего класса и здесь только мешает. */ [data-theme="basic"] #route-choose .rcard__t { display: block; overflow: visible; line-height: 1.25; } [data-theme="basic"] #route-choose .rcard__t b { font-size: 17px; line-height: 1.25; margin-bottom: 4px; } /* Подпись под названием — не больше двух строк. Полная («экскурсионный автобус · 8 точек · 8,1 км · 70 мин») растягивает плитку на три строки, и соседние карточки в сетке перестают быть сравнимыми. */ /* `:not(.rcard__go)` обязателен: у строки «Идти по маршруту ›» тоже класс `small`, и без исключения это правило (оно ниже и весомее) перебивало бы её скрытие своим display. */ [data-theme="basic"] #route-choose .rcard__t > .small:not(.rcard__go) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* «Идти по маршруту ›» — наша подсказка; у заказчика её нет, а сама плитка и так нажимается целиком. */ [data-theme="basic"] #route-choose .rcard__go { display: none; } /* Город — строкой-вкладкой с жёлтым подчёркиванием, как у него */ [data-theme="basic"] .choose-city { display: inline-flex; align-items: baseline; gap: 8px; width: auto; /* Иначе элемент сетки растягивается на всю колонку, и подчёркивание уезжает от края до края вместо короткой вкладки под названием. */ justify-self: start; padding: 0 2px 6px; margin-bottom: 4px; border: 0; border-bottom: 3px solid var(--accent); background: transparent; border-radius: 0; } [data-theme="basic"] .choose-city b { font-size: 17px; } [data-theme="basic"] .choose-city > .small.muted { display: none; } /* Подпись над сеткой — заголовком, а не капслоком */ [data-theme="basic"] #route-choose > .upper { font-size: var(--fs-h2); font-weight: 700; text-transform: none; letter-spacing: -0.01em; color: var(--ink); margin: 6px 0 2px; } /* ── Экран маршрута: объекты сеткой, как у заказчика ─────────── Тот же список остановок (trail.js), только в две колонки и с крупными фотографиями. Разметку не трогаем. */ [data-theme="basic"] #trail-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; align-items: start; } [data-theme="basic"] #trail-body > :not(.rrow) { grid-column: 1 / -1; } [data-theme="basic"] #trail-body .rrow { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; } [data-theme="basic"] #trail-body .rrow__img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--r-photo); } [data-theme="basic"] #trail-body .rrow__b b { font-size: 17px; line-height: 1.25; } /* ── Кнопка действия ─────────────────────────────────────────── Высокая, во всю ширину, с чёрным текстом на жёлтом — узнаваемая деталь его приложения. */ [data-theme="basic"] .btn--accent, [data-theme="basic"] .screen__cta { min-height: var(--btn-h); border-radius: var(--r-btn); font-size: 17px; font-weight: 600; } /* ══ Карта ═══════════════════════════════════════════════════════ Подложка Яндекса не трогается ни при каких условиях (запрет заказчика от 05.09.2026) — красим только наше: нитку, метки и обвязку. */ :root[data-theme="basic"] { --thread: #F2B915; /* маршрут жёлтый, как у них */ --poi-main: #E42426; /* объекты маршрута — красные */ --poi-food: #161616; /* инфраструктура одинаково тёмная */ --poi-hotel: #161616; --poi-fun: #161616; } /* Стрелка направления превращается в ШЕВРОН: у заказчика маршрут выложен именно уголками, а не треугольниками. Внешний div уже повёрнут по курсу (js/mapview_ya.js), поэтому сам уголок рисуем внутри и доворачиваем на 45° — так он смотрит вдоль движения. */ [data-theme="basic"] .rarrow { width: 13px; height: 13px; border: 0; filter: none; position: relative; /* Волна: каждый следующий шеврон вспыхивает чуть позже предыдущего, и по цепочке бежит подсветка. Сдвиг берётся из номера стрелки (--i), который проставляет карта. Никакого таймера: анимацией занимается композитор, это дёшево и плавно. */ animation: chev-wave 2.6s linear infinite; animation-delay: calc(var(--i, 0) * -0.085s); } [data-theme="basic"] .rarrow::before { content: ''; position: absolute; left: 1px; top: 1px; right: 1px; bottom: 1px; border-top: 3px solid var(--thread); border-right: 3px solid var(--thread); transform: rotate(-45deg); filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .9)); } @keyframes chev-wave { 0%, 100% { opacity: .38; } 50% { opacity: 1; } } /* Кому анимация мешает — тому ровный свет, а не мигание. */ @media (prefers-reduced-motion: reduce) { [data-theme="basic"] .rarrow { animation: none; opacity: .85; } } /* Вместо точки-курсора — медвежья лапа. Знак тот же, что в логотипе и на заставке: приложение про медвежью тропу, и след на карте читается прямее любого кружка. */ [data-theme="basic"] .me { width: 30px; height: 30px; border: 0; border-radius: 0; background-color: transparent; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .95)); } /* Фильтры на карте отдельных правил НЕ требуют: включённый чип красится цветом своей группы (`.mchip--cat.is-on { background: var(--c) }`), а цвет группы в этом облике — тёмный (#161616). Получается ровно то, что у заказчика: чёрная пилюля с белым текстом, когда слой включён, и белая, когда выключен. Своё правило здесь сломало бы различие состояний. */ /* ══ Шапка как у заказчика ═══════════════════════════════════════ У него в шапке заголовок раздела и значок профиля, а логотипа с именем приложения нет вовсе. Текст заголовка подставляет ui.js по данным темы; здесь только раскладка. Гамбургер остаётся — через него живут афиша, погода и план, которых нет в трёх вкладках. */ [data-theme="basic"] #s-go .topbar__logo { justify-content: center; padding-left: 34px; /* зрительный противовес значкам справа */ } [data-theme="basic"] #s-go .topbar__logo span { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } /* Чип города из шапки убран: город выбирается вкладкой в самом каталоге, как у заказчика. Сам чип не удалён — он есть в другом облике и на других экранах. */ [data-theme="basic"] #s-go .chip--city { display: none; } /* Круглая жёлтая «назад» поверх обложки — узнаваемая деталь его приложения. 38 dp по замеру с их экрана. */ [data-theme="basic"] .cover__back { position: absolute; left: var(--pad); top: calc(var(--safe-t) + 10px); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent-splash); color: #191919; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: pointer; } /* Обложка маршрута: фотография во всю ширину, без полей */ [data-theme="basic"] .cover { position: relative; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 14px; } [data-theme="basic"] .cover img { display: block; width: 100%; height: 230px; object-fit: cover; } /* Есть обложка — шапка не нужна: фотография начинается от верхнего края, а «назад» лежит кругом поверх неё. Нет обложки — шапка остаётся, иначе с экрана некуда уйти. */ [data-theme="basic"] #s-trail.has-cover .topbar { display: none; } [data-theme="basic"] #s-trail.has-cover .screen__body { padding-top: 0; }