/* ============================================================================= ТУРБО — оформление «ЧАС ВЫЕЗДА» Слой поверх components.css. Ничего в ките не правит: селекторы префиксованы `.theme-hour` на , поэтому перебивают базовые правила специфичностью, а не важностью. ИДЕЯ. Цвет здесь работает, а не украшает: он показывает ЧАС. У каждой тренировки своё небо, и список читается как расписание суток раньше, чем глаз доходит до цифр. Приложение тоже находится в каком-то часе — этим светом покрашен хром. ЧТО СНИМАЕТСЯ от печатной системы: смещённая плашка, жёсткие рамки карточек, растровый орнамент, зерно, золото. ЧТО ОСТАЁТСЯ: наборный шрифт и фирменный красный — он достаётся ДЕЙСТВИЮ, а небо остаётся данными. Два правила, на которых эта тема ломается, если про них забыть: · переопределять надо ПАЛИТРУ кита, а не компоненты по одному — иначе всё, до чего не дотянулся руками, продолжает брать печатные токены; · `--c-white` значит не «белый», а «то, что выбито из плашки». Снял плашку — обязан снять и выворотку, иначе текст печатается бумагой по бумаге. Эта ошибка ловилась трижды. ============================================================================= */ /* ----------------------------------------------------------------------------- ОКРУЖАЮЩИЙ ЧАС. Класс `hour-*` ставит инлайновый скрипт в — до первой отрисовки, иначе шапка мигнула бы серым. Живёт на , а не на , потому что скрипт в голове тела ещё не видит; переменные наследуются вниз. -------------------------------------------------------------------------- */ :root { --amb: #EDE9E2; --amb-bar: #EFEBE4; --amb-foot: #F0ECE5; /* Бумага тоже принадлежит часу. Пока она была нейтрально-тёплой, холодная шапка ночного часа стыковалась с кремовой серединой видимой полосой. */ --amb-mid: #F7F6F2; /* Небо «сейчас». Экраны без своего времени — тренер, профиль, команда — берут его: у них нет часа выезда, но у приложения час есть. Экран, у которого время ЕСТЬ, перебивает переменную на себе (`.hero--*`). */ --sky: linear-gradient(178deg, #17246B 0%, #6A3E86 42%, #D9713F 74%, #F0A93C 100%); } :root.hour-dawn { --amb: #F6E7D7; --amb-bar: #F7E9DC; --amb-foot: #F8ECE0; --amb-mid: #FBF6F0; --sky: linear-gradient(178deg, #17246B 0%, #6A3E86 42%, #D9713F 74%, #F0A93C 100%); } :root.hour-morn { --amb: #E4EDF6; --amb-bar: #E9F0F7; --amb-foot: #EAF1F8; --amb-mid: #F4F8FC; --sky: linear-gradient(178deg, #1B5FC4 0%, #4E93D8 55%, #9BD4EF 100%); } :root.hour-day { --amb: #E6F0F8; --amb-bar: #EBF2F9; --amb-foot: #ECF3F9; --amb-mid: #F5F9FC; --sky: linear-gradient(178deg, #1877CF 0%, #6FB3E4 55%, #CFE8F5 100%); } :root.hour-eve { --amb: #F3E4E0; --amb-bar: #F4E7E3; --amb-foot: #F5EAE6; --amb-mid: #FBF4F2; --sky: linear-gradient(178deg, #43246E 0%, #8C3A63 46%, #E8542F 100%); } :root.hour-night { --amb: #E5E7EE; --amb-bar: #E9EAF0; --amb-foot: #E9EBF1; --amb-mid: #F2F3F7; --sky: linear-gradient(178deg, #0B1226 0%, #123448 58%, #1E6E7A 100%); } .theme-hour { /* --- собственная палитра темы ------------------------------------------- */ --h-paper: #F7F6F2; --h-ink: #14140F; --h-ink-2: #55554D; --h-ink-3: #8A8A80; /* Линейка задана чернилами с прозрачностью, а не тёплым бежевым: бумага теперь окрашена часом, и постоянный тёплый цвет желтил рамки в холодные часы. Полупрозрачные чернила сами подстраиваются под свет. */ --h-line: rgba(20, 20, 15, 0.14); /* Заливка блока — те же прозрачные чернила, только слабее. Взята прозрачностью по той же причине, что и линейка, и ещё по одной: фон `.app` это градиент часа, `--amb` сверху к `--amb-mid` книзу, поэтому ЛЮБАЯ сплошная заливка совпадала бы с бумагой на какой-то высоте прокрутки и там исчезала. Чернила идут от бумаги ВНИЗ, а не вверх, — так блок не может «светиться ярким пятном», на чём уже погорела белая плита обычной карточки. */ --h-block: rgba(20, 20, 15, 0.045); --h-red: #B0453A; /* смягчённый: кумач в интерфейсе читается как «удалить» */ --h-red-soft: #B0453A; --h-red-soft2: #9C3B31; /* --- часы: две точки на каждый, зенит и горизонт ------------------------- */ --dawn-1: #17246B; --dawn-2: #F0A93C; --morn-1: #1B5FC4; --morn-2: #9BD4EF; --day-1: #1877CF; --day-2: #CFE8F5; --eve-1: #43246E; --eve-2: #E8542F; --night-1: #0B1226; --night-2: #1E6E7A; /* --- ПАЛИТРА КИТА, перенастроенная целиком ------------------------------ */ --c-paper: var(--amb-mid); --c-paper-2: #F0EEE8; --c-paper-3: #E2E0D8; --c-bg: var(--h-paper); --c-surface: #FFFFFF; --c-surface-alt: #F0EEE8; --c-ink: var(--h-ink); --c-ink-2: var(--h-ink-2); --c-ink-3: var(--h-ink-3); --c-text: var(--h-ink); --c-text-muted: var(--h-ink-2); --c-text-meta: var(--h-ink-3); --c-line: var(--h-line); --c-line-soft: var(--h-line); --c-red: var(--h-red); --c-red-deep: #8E1009; --c-red-wash: #F6E6E3; --c-accent: var(--h-red); --c-focus: var(--h-red); /* Золота в схеме нет: охра всплывала подписями цвета бумаги. */ --c-ochre: var(--h-ink-3); --c-ochre-deep: #B07A22; /* Тона состояний. Печатные зелёный и голубой в палитре часа — чужие: рядом с небом и терракотой они читались как чужая вставка. Значения остаются РАЗНЫМИ (состояние должно различаться), но берутся из тех же рампы и температуры: тиль из ночного часа и синь из дневного. */ --c-green: #2A6B62; --c-cyan: var(--day-1); /* Смещённая плашка — печатный приём. Обнуляется в одном месте, и красная тень пропадает разом везде: под монограммой, кнопками, карточками. */ --misreg-x: 0px; --misreg-y: 0px; --plate: none; --plate-red: none; --plate-cyan: none; } /* --- Фон: свет часа сверху и снизу, спокойная середина ---------------------- */ .theme-hour { background: var(--h-paper); color: var(--h-ink); } .theme-hour .app { background: linear-gradient(180deg, var(--amb) 0, rgba(0, 0, 0, 0) 520px), linear-gradient(0deg, var(--amb-foot) 0, rgba(0, 0, 0, 0) 300px), var(--amb-mid); } /* Растр и зерно — приёмы печати. Свет в этой теме идёт от часа, и точечное поле спорит с ним на каждом экране, поэтому гасится разом по всему киту, а не по одному носителю: `.tex-halftone` стоит в разметке девятнадцать раз. */ .theme-hour .tex-grain::before, .theme-hour .tex-halftone::after, .theme-hour .page-head__orn, .theme-hour .dayband__tail, .theme-hour .hero__dots { display: none !important; } /* --- Шапка ----------------------------------------------------------------- */ .theme-hour .appbar { background: linear-gradient(180deg, var(--amb-bar) 0%, var(--amb) 100%); border-bottom: 1px solid rgba(20, 20, 15, 0.10); box-shadow: none; } .theme-hour .brand__mark { background: none; color: var(--h-red); padding: 0; box-shadow: none; border: 0; letter-spacing: 0.02em; } .theme-hour .brand__sub { color: var(--h-ink-3); } .theme-hour .iconbtn { background: none; border: 0; box-shadow: none; color: var(--h-ink); } /* --- Заголовок экрана ------------------------------------------------------- */ .theme-hour .page-head { padding-bottom: var(--sp-2); } .theme-hour .page-head__rule { display: none; } .theme-hour .page-head__kicker { color: var(--h-ink-3); letter-spacing: 0.18em; } .theme-hour .page-head__title { font-size: clamp(38px, 12vw, 58px); line-height: 0.88; letter-spacing: -0.02em; } .theme-hour .page-head__title em { color: var(--h-red); font-style: normal; } /* --- Переключатели, чипы, сортировка ---------------------------------------- */ .theme-hour .seg { border: 1px solid var(--h-line); box-shadow: none; background: transparent; } .theme-hour .seg__btn { background: transparent; color: var(--h-ink-2); border: 0; } .theme-hour .seg__btn.is-on { background: var(--h-ink); color: var(--h-paper); } .theme-hour .chiprow { background: var(--amb-mid); border-bottom: 1px solid var(--h-line); } .theme-hour .chiprow--sticky { background: var(--amb-mid); } .theme-hour .chip, .theme-hour .chiprow .tag { background: transparent; border: 1px solid var(--h-line); color: var(--h-ink-2); box-shadow: none; } .theme-hour .sortbar { background: transparent; border-bottom: 1px solid var(--h-line); } /* --- Дата ------------------------------------------------------------------- */ .theme-hour .dayband { background: transparent; color: var(--h-ink-3); border: 0; border-top: 1px solid var(--h-ink); padding-top: var(--sp-3); margin-top: var(--sp-6); } .theme-hour .dayband__num { color: var(--h-ink); font-size: 22px; } .theme-hour .dayband__mo, .theme-hour .dayband__wd, .theme-hour .dayband__count { color: var(--h-ink-3); } /* --- СПИСОК: каждая тренировка своим блоком --------------------------------- */ /* Сначала здесь были строки на линейках, без коробок. На реальном расписании это не прочиталось, и жалоба пришла ровно этой фразой: «наглядно не видно, где заканчивается информация об одной тренировке и начинается другая». Промежутка хватало (16px и линейка), не хватало ГРАНИЦЫ: строка это пять ярусов — метки, название, тренер, цена, место, — и низ одной от верха следующей отличался только тем, что между ними тоньше линия. Хуже всего доставалось подвалу: кит приваривал «цену и место» к своей карточке рамкой и заливкой, тема сняла обе, и полоса повисла между двумя линейками — своей снизу и чужой сверху. Её можно было прочитать не к той тренировке, и это уже не про красоту. Теперь тренировка это блок: заливка в четверть тона (см. `--h-block`), отступ внутри и воздух снаружи. Коробок по-прежнему нет — ни рамки, ни тени, ни скругления, — но у блока есть край, и он свой у каждой. */ .theme-hour .card--session { background: var(--h-block); border: 0; box-shadow: none; border-radius: 0; /* Внутренний отступ по горизонтали забирает 24px у содержимого. Отдаёт их колонка времени: на узком экране она и так сужается до 64px (см. медиа ниже), а на обычном заголовку хватает — он в две строки с клампом. */ padding: var(--sp-4) var(--sp-3); margin-inline: var(--gutter); gap: var(--sp-4); min-height: 0; /* Печатный грид был рассчитан на мелкий заголовок: с крупным кеглем длинные слова переносились посреди слова. Место берётся у времени и счётчика. */ grid-template-columns: 84px 1fr auto; } .theme-hour .card--session::before, .theme-hour .card--session::after { display: none; } .theme-hour .card--session:active { transform: none; } /* Воздух между блоками — 20px против 13px самого большого промежутка ВНУТРИ блока (тело и подвал). Кит ставил 16px, и получалось наоборот: внутри одной тренировки просвета было больше, чем между двумя. Заливка спорила с разбивкой, а глаз верит разбивке. */ .theme-hour .sessionrow { margin-bottom: var(--sp-5); } /* Время и небо этого часа полоской под ним — легенда, а не рейка. */ .theme-hour .card__time { background: transparent; color: var(--h-ink); padding: 0; min-width: 0; border-right: 0; } .theme-hour .card__time b { font-size: 25px; letter-spacing: -0.01em; } .theme-hour .card__time i { display: block; height: 4px; margin: 7px 0; background: var(--h-line); } .theme-hour .card__time span { color: var(--h-ink-3); font-size: 11px; } .theme-hour .is-dawn .card__time i { background: linear-gradient(90deg, var(--dawn-1), var(--dawn-2)); } .theme-hour .is-morn .card__time i { background: linear-gradient(90deg, var(--morn-1), var(--morn-2)); } .theme-hour .is-day .card__time i { background: linear-gradient(90deg, var(--day-1), var(--day-2)); } .theme-hour .is-eve .card__time i { background: linear-gradient(90deg, var(--eve-1), var(--eve-2)); } .theme-hour .is-night .card__time i { background: linear-gradient(90deg, var(--night-1), var(--night-2)); } /* Персональная красила колонку времени в красный. Красный здесь — действие. */ .theme-hour .is-personal .card__time { background: transparent; } .theme-hour .card--session .card__body { padding: 0; } .theme-hour .card--session .card__title { font-size: clamp(19px, 5vw, 24px); line-height: 0.98; letter-spacing: -0.012em; overflow-wrap: normal; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .theme-hour .card--session .card__meta { color: var(--h-ink-2); margin-top: 4px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .theme-hour .card--session .card__kicker .tag { background: transparent; border: 1px solid var(--h-line); color: var(--h-ink-3); box-shadow: none; } .theme-hour .card--session .card__coach { margin-top: var(--sp-2); } .theme-hour .card--session .card__score { border-left: 0; padding-right: 0; min-width: 54px; } /* Линейка НАД подвалом — то, чем кит привязывал цену и место к их карточке. Внутри блока она уже не спорит с границей, а делит содержимое одной тренировки: сверху что это за тренировка, снизу сколько и где. */ .theme-hour .card--session .card__foot { background: transparent; border: 0; border-top: 1px solid var(--h-line); padding: var(--sp-3) 0 0; } /* Цена переехала в колонку времени (`.card__rate`), из подвала карточки она ушла — поэтому правило смотрит на новый класс. Заметнее, чем «120 МИН»: рядом стоит длительность, и если дать им один размер и один тон, цена перестанет читаться как цена. Тише часа — час здесь главный. Специфичность (0,3,0) нужна, чтобы перебить `.theme-hour .card__time span`, который красит в рейке ВСЕ span'ы. */ .theme-hour .card--session .card__time .card__rate { color: var(--h-ink); font-size: 13px; letter-spacing: 0; } .theme-hour .card__note { color: var(--h-ink-3); } .theme-hour .card--session .card__score .score { color: var(--h-ink); } .theme-hour .score--danger { color: var(--h-red); } /* «Мест нет» штампом поверх имени тренера — печатный приём. Состояние читается весом: строка гаснет, счётчик остаётся нулём. */ .theme-hour .card--session .stamp { display: none; } /* Раньше эти правила гасили заливку — с блоком они пробивали в нём дырку. Состояние и так читается весом: строка гаснет, счётчик остаётся нулём. */ .theme-hour .card--session.is-soldout .card__foot { background: transparent; } .theme-hour .card--session.is-soldout .card__body, .theme-hour .card--session.is-soldout .card__score { opacity: 1; } .theme-hour .card--session.is-soldout .card__title, .theme-hour .card--session.is-soldout .card__meta, .theme-hour .card--session.is-soldout .card__time .card__rate { color: var(--h-ink-3); } .theme-hour .card--session.is-soldout .card__time i { opacity: 0.35; } /* --- ГЕРОЙ: небо того часа --------------------------------------------------- */ .theme-hour .hero { position: relative; overflow: hidden; color: #fff; border: 0; box-shadow: none; padding: var(--sp-6) var(--gutter) var(--sp-6); background: var(--sky); } .theme-hour .hero--dawn { --sky: linear-gradient(178deg, var(--dawn-1) 0%, #6A3E86 42%, #D9713F 74%, var(--dawn-2) 100%); } .theme-hour .hero--morn { --sky: linear-gradient(178deg, var(--morn-1) 0%, #4E93D8 55%, var(--morn-2) 100%); } .theme-hour .hero--day { --sky: linear-gradient(178deg, var(--day-1) 0%, #6FB3E4 55%, var(--day-2) 100%); } .theme-hour .hero--eve { --sky: linear-gradient(178deg, var(--eve-1) 0%, #8C3A63 46%, var(--eve-2) 100%); } .theme-hour .hero--night { --sky: linear-gradient(178deg, var(--night-1) 0%, #123448 58%, var(--night-2) 100%); } .theme-hour .hero__title { font-size: clamp(30px, 9vw, 48px); line-height: 0.92; letter-spacing: -0.02em; } .theme-hour .hero__sub { color: rgba(255, 255, 255, 0.78); } .theme-hour .hero__kicker .tag { background: rgba(255, 255, 255, 0.16); border: 0; color: #fff; box-shadow: none; } .theme-hour .hero__strip { border-top: 1px solid rgba(255, 255, 255, 0.24); } .theme-hour .hero__fact b { color: #fff; } .theme-hour .hero__fact span { color: rgba(255, 255, 255, 0.66); } /* --- Табло, шкалы, метки ----------------------------------------------------- */ /* Табло было чернильной плашкой с вывороткой. Плашки нет — значит и выворотки быть не должно, иначе подписи печатаются бумагой по бумаге. */ .theme-hour .score-plate { background: transparent; color: var(--h-ink); border: 0; border-bottom: 1px solid var(--h-line); /* Поле, а не ноль: табло встречается и внутри карточки, и во всю ширину экрана — на «Достижениях» обнулённые поля срезали подписи по краям. */ box-shadow: none; border-radius: 0; padding-inline: var(--gutter); } .theme-hour .score-plate .score, .theme-hour .score-plate .score > b, .theme-hour .score-plate b.t-num { color: var(--h-ink); } .theme-hour .score-plate .score > span, .theme-hour .score-plate .t-label, .theme-hour .score-plate p { color: var(--h-ink-2); } .theme-hour .tickbar--capacity > i { background: var(--h-line); border: 0; } .theme-hour .tickbar--capacity > i.is-taken { background: var(--h-ink); } /* «Есть места» стояло в рамке и обещало нажатие, которого нет. */ .theme-hour .badge { border: 0; background: transparent; padding-inline: 0; box-shadow: none; } /* Цвет ставится только метке БЕЗ тона. `data-tone` несёт состояние, и плоский серый поверх него стирал разницу: квадратик у «АКТИВЕН» выходил серым, хотя тон у метки есть — просто общее правило перебивало его по порядку. */ .theme-hour .badge:not([data-tone]) { color: var(--h-ink-2); } .theme-hour .badge::before { content: ""; display: inline-block; width: 8px; height: 8px; background: currentColor; margin-right: 7px; vertical-align: 1px; } /* Сеал: лучи — трафаретный приём, на градиенте читаются артефактом. Цена и действие — одна мысль, значит и краска одна. */ .theme-hour .seal::before { display: none; } .theme-hour .seal { background: linear-gradient(180deg, var(--h-red-soft) 0%, var(--h-red-soft2) 100%); color: #fff; box-shadow: 0 6px 18px -6px rgba(20, 11, 26, 0.42); } .theme-hour .monogram { background: var(--h-ink); color: var(--h-paper); border: 0; box-shadow: none; } /* --- Кнопки: красный за действием -------------------------------------------- */ .theme-hour .btn { border-radius: 0; box-shadow: none; border: 1px solid var(--h-ink); background: transparent; color: var(--h-ink); } .theme-hour .btn--primary { background: linear-gradient(180deg, var(--h-red-soft) 0%, var(--h-red-soft2) 100%); border: 0; color: #fff; box-shadow: 0 2px 10px -3px rgba(156, 59, 49, 0.5); } .theme-hour .btn--primary:hover { background: linear-gradient(180deg, #A63E33 0%, #8E332A 100%); } .theme-hour .btn--primary:active { box-shadow: none; } .theme-hour .btn--lg { font-size: 14.5px; letter-spacing: 0.06em; padding-block: 13px; } /* Полоса действий липнет к низу экрана — там лежит нижняя размывка. */ .theme-hour .btn-row { background: var(--amb-foot); border-top: 1px solid var(--h-line); } .theme-hour .btn-row--split { padding: var(--sp-3) var(--gutter); gap: var(--sp-4); } .theme-hour .btn-row--split .btn { flex: 0 1 auto; min-width: 190px; } /* .btn-row--inset — та же полоса, но ВНУТРИ карточки формы, а не во всю ширину экрана. `min-width: 190px` выше рассчитан на полосу от края до края: две такие кнопки плюс зазор требуют 396px, и внутри карточки на телефоне (375px минус поля страницы, карточки и самой полосы) столько взять неоткуда — «Создать» уезжала за правый край. Снимаем порог и удвоенные поля. Правило живёт ЗДЕСЬ, а не в `components.css`: тема грузится последней, и `.theme-hour .btn-row--split` (0,2,0) перебивает любой `.btn-row--inset` (0,1,0) оттуда независимо от порядка внутри файла. */ .theme-hour .btn-row--inset.btn-row--split { padding-inline: 0; grid-template-columns: 1fr 1fr; } .theme-hour .btn-row--inset.btn-row--split .btn { min-width: 0; padding-inline: var(--sp-2); white-space: nowrap; } /* --- Нижняя навигация -------------------------------------------------------- */ .theme-hour .tabbar { background: linear-gradient(0deg, var(--amb-bar) 0%, var(--amb-foot) 100%); border-top: 1px solid rgba(20, 20, 15, 0.10); box-shadow: none; } .theme-hour .tabbar__item { color: var(--h-ink-3); background: none; } .theme-hour .tabbar__item.is-active { color: var(--h-red); background: none; } /* --- Остатки печатной утвари -------------------------------------------------- */ .theme-hour .card, .theme-hour .sheet, .theme-hour .stamp { box-shadow: none; } .theme-hour .divider span { color: var(--h-ink-3); } /* ----------------------------------------------------------------------------- ДОБОРКИ. Места, где кит рассчитывал на плашку, а тема её сняла: выворотка осталась бы бумагой по бумаге. Каждое — с указанием, что именно исчезло. -------------------------------------------------------------------------- */ /* Сегодняшний день был красной плашкой. Плашки нет — но «сегодня» обязано отличаться, иначе список теряет точку отсчёта. Отличаем краской линии. */ .theme-hour .dayband--today { border-top-color: var(--h-red); } .theme-hour .dayband--today .dayband__num, .theme-hour .dayband--today .dayband__mo { color: var(--h-red); } .theme-hour .dayband--today .dayband__wd, .theme-hour .dayband--today .dayband__count { color: var(--h-ink-3); } .theme-hour button.dayband--toggle { color: var(--h-ink-3); } /* Отменённая тренировка теряла штамп вместе со всеми штампами, а зачёркнутого заголовка мало. Гасим строку целиком — как у «мест нет». */ /* Рамки у блока больше нет — красить её нечем; строку гасит текст. */ .theme-hour .card--session.is-cancelled .card__title, .theme-hour .card--session.is-cancelled .card__meta, .theme-hour .card--session.is-cancelled .card__time .card__rate { color: var(--h-ink-3); } .theme-hour .card--session.is-cancelled .card__time b { color: var(--h-ink-3); } .theme-hour .card--session.is-cancelled .card__time i { opacity: 0.35; } /* Метки поверх неба: базовое правило красит их в чернила, а небо тёмное. */ .theme-hour .hero .badge { color: rgba(255, 255, 255, 0.82); } .theme-hour .hero .badge::before { background: currentColor; } /* .badge--solid — выворотка по заливке. Сейчас в приложении не встречается, но правило `.theme-hour .badge` погасило бы заливку и оставило белый текст. */ .theme-hour .badge--solid { background: currentColor; padding-inline: var(--sp-2); } .theme-hour .badge--solid span { color: var(--h-paper); } .theme-hour .badge--solid::before { background: var(--h-paper); } /* Кнопка-ссылка потеряла свою бесплотность: правило `.theme-hour .btn` вешает рамку на ВСЕ кнопки и перебивает `.btn--ghost` специфичностью. Возвращаем — «не сейчас» и «продолжить в браузере» не должны выглядеть как действие. */ .theme-hour .btn--ghost { border-color: transparent; background: transparent; color: var(--h-ink-2); } .theme-hour .btn--ghost:hover { color: var(--h-red); } /* Выключенная кнопка была заштрихована по диагонали — типографский приём. */ .theme-hour .btn[disabled], .theme-hour .btn.is-disabled { background: var(--c-paper-2); background-image: none; border-color: var(--h-line); color: var(--h-ink-3); } .theme-hour .btn--ghost[disabled] { background: transparent; border-color: transparent; } /* Экран установки — первое, что видит человек, и он лежит ВНЕ `.app`, поэтому свет часа до него не доставал: получался белый лист. */ .theme-hour .install { background: linear-gradient(180deg, var(--amb) 0, rgba(0, 0, 0, 0) 520px), linear-gradient(0deg, var(--amb-foot) 0, rgba(0, 0, 0, 0) 300px), var(--amb-mid); } .theme-hour .install__title { color: var(--h-ink); } .theme-hour .install__line, .theme-hour .install__note { color: var(--h-ink-2); } /* Постер входа остаётся красным — это единственная плашка, где красный читается как знак клуба, а не как действие. Тема его не трогает. Тело под приложением: на коротком экране `.app` не достаёт до низа, и тёплая бумага стыковалась с холодным светом часа видимым швом. */ .theme-hour { background: var(--amb-foot); } /* Полоса «запись по пакету» под карточкой была серой плашкой в рамке — она спорила со строками, которые теперь держатся на одной линейке. */ /* Действие принадлежит тренировке над ним, значит и блок у них один: та же заливка, тот же вылет, линейка сверху вместо линейки снизу. Иначе блок кончался, а «запись по пакету» оставалась висеть на бумаге отдельно. */ .theme-hour .quickbook { background: var(--h-block); border: 0; border-top: 1px solid var(--h-line); padding: var(--sp-3) var(--sp-3) var(--sp-4); margin-inline: var(--gutter); } .theme-hour .quickbook--mine { background: transparent; color: var(--h-ink); border-color: var(--h-line); } .theme-hour .quickbook--mine .btn--ghost { color: var(--h-ink-2); } .theme-hour .quickbook--hold { background: transparent; border-color: var(--h-line); } .theme-hour .quickbook--hold .quickbook__mark { background: var(--h-red); } .theme-hour .quickbook .btn { border-color: var(--h-line); } /* Флажок фильтра: чернильная рамка вокруг красного квадрата — печатная утварь. */ .theme-hour .checkfilter__mark { border-color: var(--h-line); background: var(--c-surface); } .theme-hour .checkfilter:has(input:checked) .checkfilter__mark { border-color: var(--h-red); } .theme-hour .checkfilter__mark::after { background: var(--h-red); } .theme-hour .switch input:checked + .switch__track { background: var(--h-red); } /* Быстрое действие экрана («+» рядом с заголовком) было красной плашкой в чернильной рамке. Общее правило `.theme-hour .iconbtn` погасило её вместе с рамкой — и действие пропало совсем. Возвращаем краской, а не плашкой. */ /* Голая красная краска рядом с заголовком-плакатом читалась как значок, а не как кнопка: нажимать её никто не собирался. Возвращаем аффорданс — светлая красноватая плитка с тонкой рамкой. Плашка, но негромкая: это ярлык действия у заголовка, а не само действие. */ .theme-hour .iconbtn--red { background: var(--c-red-wash); border: 1px solid rgba(176, 69, 58, 0.30); color: var(--h-red); } .theme-hour .iconbtn--red:active { background: var(--h-red); border-color: var(--h-red); color: #fff; } /* `.dayband--today` кит использует и как «сегодня», и как акцентную полосу раздела («Предстоящие»). Там у неё голая подпись без класса: она наследовала приглушённый цвет полосы, и выделенный раздел выглядел бледнее обычных. `:not([class])` бьёт точно по ней и не задевает «СУББОТА» в расписании. */ .theme-hour .dayband--today > span:not([class]) { color: var(--h-red); } /* ----------------------------------------------------------------------------- ПАКЕТЫ. Шапка пакета была чернильной плашкой во всю ширину — на экране, где плашек больше нет, она перекрикивала всё остальное. Пакет теперь строится как и расписание: заголовок на линейке, тело на бумаге. -------------------------------------------------------------------------- */ .theme-hour .pkg__head { background: transparent; color: var(--h-ink); border-bottom: 1px solid var(--h-ink); padding: var(--sp-3) 0; margin-inline: var(--gutter); } .theme-hour .pkg.is-off .pkg__head { background: transparent; border-bottom-color: var(--h-line); } .theme-hour .pkg.is-off { background: transparent; } .theme-hour .pkg.is-off .pkg__title { color: var(--h-ink-3); } .theme-hour .pkg__head .card__price { color: var(--h-ink); } .theme-hour .pkg__body, .theme-hour .pkg__rules { padding-inline: var(--gutter); } .theme-hour .pkg__rules { border-top-color: var(--h-line); } /* Подвал пакета — это `.btn-row`, а он ЛИПКИЙ: прозрачным его делать нельзя, текст пакета пойдёт прямо под кнопкой. Красим в цвет нижней размывки — там она и стоит, — и оставляем тонкую линию, чтобы полоса читалась полосой. */ .theme-hour .pkg__foot { background: var(--amb-foot); border-top: 1px solid var(--h-line); padding: var(--sp-3) var(--gutter) var(--sp-5); } /* ----------------------------------------------------------------------------- ПРОФИЛЬ. Ступень клуба и лестница ступеней были набраны плашками — чернильной с красной рейкой. Тот же чёрно-красный, который мы убрали с монограммы: на бумаге без плашек он читается как чужой элемент. Ступень — это ДАННЫЕ, а не действие, поэтому она получает линейку и краску, а не плиту. -------------------------------------------------------------------------- */ .theme-hour .rank { background: transparent; color: var(--h-ink); border-top: 1px solid var(--h-ink); border-bottom: 1px solid var(--h-line); box-shadow: none; } .theme-hour .rank__rail { background: transparent; color: var(--h-red); } .theme-hour .rank__cap { color: var(--h-ink-3); } .theme-hour .rank__name { color: var(--h-ink); } .theme-hour .rank__note { color: var(--h-ink-2); } .theme-hour .ladder { border: 0; background: transparent; } .theme-hour .ladder__row { border-bottom-color: var(--h-line); } .theme-hour .ladder__no { background: transparent; color: var(--h-ink-3); } .theme-hour .ladder__row.is-past .ladder__no { background: transparent; color: var(--h-ink-2); } .theme-hour .ladder__row.is-now { background: transparent; color: var(--h-ink); } .theme-hour .ladder__row.is-now .ladder__no { background: transparent; color: var(--h-red); } .theme-hour .ladder__row.is-now .ladder__name { color: var(--h-red); } .theme-hour .ladder__row.is-now .ladder__state { color: var(--h-ink-3); } /* Ссылка-действие внутри неба: базовый серый на тёмном не читается. */ .theme-hour .hero .btn--ghost { color: rgba(255, 255, 255, 0.82); } .theme-hour .hero .btn--ghost:hover { color: #fff; } /* ----------------------------------------------------------------------------- ЗАПИСИ И ПЛАТЕЖИ. `.card--booking` стояла отдельной белой плитой во всю ширину экрана: в печатной системе её держала толстая рамка, а без рамки плита просто висит. Собираем её как строку расписания — по линейке и в поле. -------------------------------------------------------------------------- */ .theme-hour .card--booking { background: transparent; border: 0; border-bottom: 1px solid var(--h-line); box-shadow: none; margin-inline: var(--gutter); } .theme-hour .card--booking .card__head, .theme-hour .card--booking .card__body, .theme-hour .card--booking .card__foot { padding-inline: 0; } /* Итог — часть своей записи, а не разделитель между ними: со своей линейкой сверху он читался как заголовок следующей строки. Разделяет только нижняя линейка карточки. */ .theme-hour .card--booking .card__foot { background: transparent; border-top: 0; padding-block: 0 var(--sp-3); } .theme-hour .card--booking + .card--booking { margin-top: var(--sp-4); } .theme-hour .card--booking .card__rail { background: transparent; color: var(--h-ink); } /* Внутри карточки поля даёт сама карточка. */ .theme-hour .card .score-plate { padding-inline: 0; } /* ----------------------------------------------------------------------------- КАРТОЧКА `.coach` — общая для тренеров и достижений. Была белой плитой в рамке с подвалом-плашкой. Становится строкой на линейке, как расписание. -------------------------------------------------------------------------- */ .theme-hour .coach { background: transparent; border: 0; border-bottom: 1px solid var(--h-line); box-shadow: none; padding: var(--sp-4) 0; margin-inline: var(--gutter); } .theme-hour .coach__foot { margin: var(--sp-3) 0 0; padding: var(--sp-2) 0 0; background: transparent; border-top: 1px solid var(--h-line); } .theme-hour .coach.is-locked .coach__foot { background: transparent; } .theme-hour .coach__lock { margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0; background: transparent; border-top: 1px solid var(--h-red); } .theme-hour .coach__spec, .theme-hour .coach__detail { color: var(--h-ink-2); } /* Заливная метка — последняя чернильная плашка в списках. Обводка вместо заливки: состояние читается, а строка остаётся строкой. */ .theme-hour .tag--fill { background: transparent; color: var(--h-ink); border: 1px solid var(--h-ink); } .theme-hour .tag--accent { background: transparent; color: var(--h-red); border-color: var(--h-red); } /* На небе метки остаются вывороткой — там фон тёмный. Правило идёт ПОСЛЕ `.tag--fill`, иначе обводка перебила бы его специфичностью-в-ничью. */ .theme-hour .hero__kicker .tag, .theme-hour .hero .tag { background: rgba(255, 255, 255, 0.16); border: 0; color: #fff; } /* Обычная `.card` осталась белой плитой: на бумаге, окрашенной часом, она светилась ярким пятном. Держим её рамкой, а не заливкой. Исключения перечислены явно: строка расписания и запись собраны выше как строки на линейке, а это правило стоит ПОЗЖЕ и при равной специфичности вернуло бы им рамку. Так и случилось — карточка расписания снова оказалась в коробке. */ .theme-hour .card:not(.card--session):not(.card--booking) { background: transparent; border: 1px solid var(--h-line); box-shadow: none; } /* Список пар «подпись — значение» стоял белой плитой поверх окрашенной бумаги. Ему хватает линеек: так он совпадает с расписанием и записями. */ .theme-hour .list { background: transparent; border-block-color: var(--h-line); } .theme-hour .list__row { border-bottom-color: var(--h-line); } /* ----------------------------------------------------------------------------- ВЫВОРОТКА БЕЗ ПЛАШКИ. `--c-paper-*` в цвете ТЕКСТА значит «выбито из плашки». Там, где плашку сняла тема, подпись начинала печататься бумагой по бумаге. Ровно эта ошибка ловилась в макетах трижды — здесь она нашлась ещё дважды. -------------------------------------------------------------------------- */ /* Рейка записи: дата и место были вывороткой на чернильной полосе. */ .theme-hour .card--booking .card__rail span { color: var(--h-ink-3); } /* Подзаголовок пакета — на бывшей чернильной шапке. */ .theme-hour .pkg__sub { color: var(--h-ink-2); } /* Обратный случай: полоса установки ОСТАЛАСЬ чернильной, а общее правило для `.btn--ghost` покрасило её кнопку в тёмное — чернила по чернилам. */ .theme-hour .install--bar .btn--ghost { color: var(--c-paper-2); } .theme-hour .install--bar .btn--ghost:hover { color: #fff; } /* Системные флажки на настройках тренера приходили браузерным синим — цветом, которого в схеме нет вообще. Кит рисует свои `.checkfilter` и `.switch`, но эти поля остались стандартными. */ .theme-hour input[type="checkbox"], .theme-hour input[type="radio"] { accent-color: var(--h-red); } /* Счётчик отмеченных — ЛИПКАЯ полоса под шапкой, поэтому она обязана быть непрозрачной. Чернильной плитой она перебивала небо тренировки прямо под ним; светлая полоса с красной линейкой держит то же место в иерархии. */ .theme-hour .tally { background: var(--amb-bar); color: var(--h-ink); border-bottom: 2px solid var(--h-red); } /* ----------------------------------------------------------------------------- УЗКИЙ ЭКРАН (320 px — iPhone SE и подобные). -------------------------------------------------------------------------- */ @media (max-width: 359px) { /* Колонка времени расширена до 84px ради крупного часа — на 320 px этих двадцати пикселей не хватает заголовку, и «ГРАНФОНДО: ПОДГОТОВКА» обрезалось справа. Здесь час уступает место названию. */ .theme-hour .card--session { grid-template-columns: 64px 1fr auto; } .theme-hour .card--session .card__time b { font-size: 21px; } /* Запрет переноса внутри слова спасает вёрстку на обычном телефоне, но на узком экране превращается в обрезку. Лучше перенос, чем потерянный текст. */ .theme-hour .card--session .card__title { overflow-wrap: anywhere; } /* Счётчик, флажок и сортировка стоят в одной строке с `nowrap` каждый — на 320 px «ТОЛЬКО С МЕСТАМИ» наезжало на «БЛИЖАЙШИЕ». Пусть перенесётся. */ .theme-hour .sortbar { flex-wrap: wrap; row-gap: var(--sp-2); } } /* ----------------------------------------------------------------------------- СЧЁТЧИК РАЗДЕЛА. Кит ставил его в ПРАВЫЙ конец чернильной полосы, а вправо его толкала распорка `.dayband__tail` — растровый хвост, который тема убрала вместе с остальным орнаментом. Распорки не стало, и число прилипло к подписи: «Предстоящие 0» с сиротливым нулём вплотную. Плюс это тег ``, то есть браузер по умолчанию его ещё и наклонял. -------------------------------------------------------------------------- */ .theme-hour .dayband__count { margin-left: auto; padding-right: 0; font-style: normal; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--h-ink-3); } /* У шеврона свой `margin-left: auto`. Два auto в флексе делят свободное место пополам — число уехало бы на середину. Место забирает счётчик, шеврон просто идёт следом. */ .theme-hour .dayband__chev { margin-left: 0; } /* ----------------------------------------------------------------------------- ЗАМОРОЗКА. Действие ледяное по смыслу — и по цвету: бледная синь из дневной рампы. Красный в схеме занят записью и оплатой, а «заморозить» ей не ровня, поэтому кнопка остаётся вторичной, просто перестаёт быть бесцветной. Правило узкое, на подвал пакета: `.btn--secondary` носят и «Войти», и кнопки на экранах ошибок — им синева ни к чему. -------------------------------------------------------------------------- */ /* Синей становится вся ветка заморозки: и «Заморозить», и подтверждение в форме. Подтверждение размечено как `btn--primary` — оно и есть главное действие ФОРМЫ, — но красный в схеме занят записью и оплатой, поэтому здесь он уступает льду. Селектор с модификатором, а не `:not(--end)`: в витрине в таком же подвале стоит «Купить», и она обязана остаться красной. */ .theme-hour .pkg__foot > .btn--secondary, .theme-hour .pkg__foot--freeze .btn--primary { background: linear-gradient(180deg, #E8F3FB 0%, var(--day-2) 100%); border: 1px solid rgba(24, 119, 207, 0.34); color: #123448; box-shadow: none; } .theme-hour .pkg__foot > .btn--secondary:hover, .theme-hour .pkg__foot--freeze .btn--primary:hover { background: linear-gradient(180deg, #DCEDF8 0%, #BFE0F1 100%); } .theme-hour .pkg__foot > .btn--secondary[disabled], .theme-hour .pkg__foot--freeze .btn--primary[disabled] { background: var(--c-paper-2); border-color: var(--h-line); color: var(--h-ink-3); } /* ----------------------------------------------------------------------------- КАЛЕНДАРЬ. Шапка месяца была чернильной плитой, шапка недели и пустые клетки — бежевыми плашками: на окрашенной часом бумаге всё это читалось заплатами. Сетка держится на линейках, как и остальные списки. -------------------------------------------------------------------------- */ .theme-hour .cal { background: transparent; border-color: var(--h-line); } .theme-hour .cal__nav { background: transparent; color: var(--h-ink); border-bottom: 1px solid var(--h-ink); } .theme-hour .cal__arrow { color: var(--h-ink-2); } .theme-hour .cal__arrow:active { background: transparent; color: var(--h-red); } .theme-hour .cal__wd { background: transparent; border-bottom-color: var(--h-line); } .theme-hour .cal__day { border-color: var(--h-line); } .theme-hour .cal__day.is-void { background: transparent; } .theme-hour .cal__count { background: var(--h-red); color: #fff; } /* Выбранный день остаётся заливкой — это единственная метка выбора в сетке. Счётчик на нём был охряным, а охра в теме сведена к чернилам: серое на чёрном. Отдаём ему бумагу. */ .theme-hour .cal__day.is-sel { background: var(--h-ink); } .theme-hour .cal__day.is-sel .cal__count { background: var(--h-paper); color: var(--h-ink); } /* «Выбрать время» у тренера — тёплая охра. В схеме она означает ожидание: слот ещё нужно выбрать, а тренеру — подтвердить. Красный тут был бы обещанием мгновенной записи, которого экран не даёт. Правило узкое, на подвал карточки тренера: `.btn--secondary` носит и вход, и экраны ошибок. */ .theme-hour .coach__foot .btn--secondary { background: linear-gradient(180deg, #FCF4E4 0%, #F6E7C8 100%); border: 1px solid rgba(176, 122, 34, 0.34); color: #4A3A16; } .theme-hour .coach__foot .btn--secondary:hover { background: linear-gradient(180deg, #F8EDD6 0%, #EFDCB4 100%); } /* ----------------------------------------------------------------------------- ЗНАЧКИ — МЕДАЛИ. Плоские: заливка металла, кант потемнее, выбитый знак. Ни блика, ни фаски, ни тени — объём тут был лишним и вдобавок врал: подсветка сверху слева делала диск асимметричным, и отцентрованный знак КАЗАЛСЯ сдвинутым влево. Геометрия была верной, обманывал свет. -------------------------------------------------------------------------- */ .theme-hour .pin { border: 0; background: var(--medal-fill); color: var(--medal-ink); box-shadow: inset 0 0 0 2px var(--medal-rim); } .theme-hour .pin__num { color: var(--medal-ink); text-shadow: none; } .theme-hour .pin[data-tone="bronze"] { --medal-fill: #C08A63; --medal-rim: #7C4E2E; --medal-ink: #35200F; } .theme-hour .pin[data-tone="silver"] { --medal-fill: #CFD4D8; --medal-rim: #8F969D; --medal-ink: #333A40; } .theme-hour .pin[data-tone="gold"] { --medal-fill: #E0C273; --medal-rim: #A78438; --medal-ink: #4A3A12; } /* Ступень, которой мы не знаем: нейтральный металл, но всё ещё медаль. */ .theme-hour .pin[data-tone="steel"] { --medal-fill: #CFCEC7; --medal-rim: #94938C; --medal-ink: #3A3A34; } /* Не полученный значок — заготовка без металла. */ .theme-hour .pin.is-locked { background: var(--c-paper-2); color: var(--h-ink-3); box-shadow: inset 0 0 0 2px var(--h-line); } .theme-hour .pin.is-locked .pin__num { color: var(--h-ink-3); text-shadow: none; } /* «Оплатить деньгами» — запасной путь, когда пакет уже есть: платить второй раз не то, к чему экран ведёт. Красный остаётся у главного действия (у «Записаться», когда пакета нет, — это та же кнопка), а альтернатива берёт тёплую охру. */ .theme-hour .btn-row--pay .btn--secondary { background: linear-gradient(180deg, #FCF4E4 0%, #F6E7C8 100%); border: 1px solid rgba(176, 122, 34, 0.34); color: #4A3A16; } .theme-hour .btn-row--pay .btn--secondary:hover { background: linear-gradient(180deg, #F8EDD6 0%, #EFDCB4 100%); } /* Выключенная кнопка обязана выглядеть выключенной. Общее правило для `[disabled]` весит столько же, сколько правило выше, и проигрывало ему по порядку: у распроданной тренировки «Мест нет» светилось приглашающей охрой. Та же кнопка, тот же класс — меняется только состояние. */ .theme-hour .btn-row--pay .btn--secondary[disabled] { background: var(--c-paper-2); border-color: var(--h-line); color: var(--h-ink-3); } /* Выбранный фильтр. Кит заливал его чернилами, но общее правило темы для `.chip` весит столько же и идёт позже — заливка пропадала, и включённый фильтр ничем не отличался от выключенного. Возвращаем отличие, но негромко: фильтр — это выбор участника, а не действие, поэтому подсветка, а не плашка. */ .theme-hour .chip.is-on { background: var(--c-red-wash); border-color: rgba(176, 69, 58, 0.38); color: var(--h-red); } .theme-hour .chip.is-on .chip__count { background: var(--h-red); color: #fff; } /* Шапка в теме часа лежит на своём фоне, а не на бумаге: обводка точки непрочитанного должна повторять его, иначе вокруг неё светлый ореол. `--amb-bar` — ВЕРХ градиента шапки (`linear-gradient(--amb-bar → --amb)`), а точка сидит у верхнего края иконки. Сперва я написал сюда `--amb-head`, которой в проекте нет вовсе: подстановка молча свалилась бы на запасную бумагу — ровно тот ореол, ради которого правило и писалось. */ .theme-hour .appbar__bell { color: var(--h-ink); } .theme-hour .appbar__bell-dot { background: var(--h-red); box-shadow: 0 0 0 2px var(--amb-bar); } /* ЗАПИСЬ — БЛОК, как тренировка в расписании. На линейках записи в «Моих тренировках» шли сплошной лентой: тонкая линейка под карточкой не отличалась от линейки под строкой времени, и было не понять, где кончается одна запись и начинается другая (Доработки 14.09, пункт 2) — та же жалоба, что раньше на расписание, и тот же ответ: заливка в четверть тона, отступ внутри, воздух снаружи. Запись — группа `.booking` (карточка и приваренные к ней оплата и подтверждение отмены): блоком становится карточка, а приваренное встаёт сразу под ней, в той же колонке. */ .theme-hour .card--booking { background: var(--h-block); border: 0; box-shadow: none; border-radius: 0; padding: var(--sp-3) var(--sp-3) 0; } .theme-hour .card--booking .card__rail { padding-inline: 0; } .theme-hour .card--booking .card__foot { border-top: 1px solid var(--h-line); padding-top: var(--sp-3); } .theme-hour .booking { margin-bottom: var(--sp-5); } /* Полоса действий ВНУТРИ врезки — подтверждение отмены под записью, оплата в подтверждении персональной. Порог `min-width: 190px` рассчитан на полосу во всю ширину экрана; во врезке две кнопки по 190px требовали 428px, и на телефоне «Отменить» уезжала за правый край, а вся страница начинала ездить вбок. Та же беда сжимала сумму у «Оплатить» до «5 0 / 00 / ₽» (Доработки 14.09, пункт 3). */ .theme-hour .callout .btn-row--split { padding-inline: 0; } .theme-hour .callout .btn-row--split .btn { min-width: 0; } /* Приваренное к записи — в той же колонке, что и её блок. */ .theme-hour .booking > :not(.card--booking) { margin-inline: var(--gutter); }