/* VISIONER Mini App — тема наследуется от клиента Telegram (CSS-переменные tg). Фолбэки — светлая тема; тёмная приезжает из tg-переменных автоматически. */ /* ══════════════════════════════════════════════════════════════════════════ Палитра — СВОЯ, из макета Figma (Visioner 2.0), а не из темы клиента. ══════════════════════════════════════════════════════════════════════════ ❗ Раньше поверхности были привязаны к `--tg-theme-*`. Звучало правильно («уважаем тему человека»), а на деле ломало замысел: в тёмных темах Telegram `secondary_bg_color` ТЕМНЕЕ фона, и карточка не всплывала над экраном, а тонула в нём. Вся глубина макета держится на обратном. Плюс пока цвета приезжают от клиента, «как в макете» не получается никогда: у человека может стоять любая из десятка тем. Поэтому у приложения свой набор — тот, что нарисован и утверждён. Акцент тоже из макета 3.0 (#f09819): цвет кнопки Telegram ломал оранжевую систему экранов. */ :root { --bg: #050100; --card: #2e2825; --tertiary: #141211; --seg-on: rgba(54, 49, 46, 0.85); --surface: rgba(20, 18, 17, 0.95); --text: #ffffff; --hint: #aaaaaa; --hint2: #78797e; --plain-fg: rgba(255, 255, 255, .95); --link: #f09819; --accent: #f09819; --accent-text: #ffffff; --accent-soft: rgba(240, 152, 25, .18); --ok: #34c759; --bad: #d82e2f; --warn: #e0a800; --radius: 20px; --divider: rgba(255, 255, 255, .05); --outline: rgba(255, 255, 255, .1); --plain: rgba(255, 255, 255, .08); --destructive: #d82e2f; --quiet: #141211; --tertiary-fg: #8d71e8; --tertiary-bg: rgba(21, 13, 46, 0.8); } * { box-sizing: border-box; } body { margin: 0; font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); padding-bottom: calc(100px + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; } #app { padding: var(--gap-block) var(--pad-x) 8px; max-width: 560px; margin: 0 auto; } /* ══════════════════════════════════════════════════════════════════════════ Ритм отступов — ОДИН на все экраны ══════════════════════════════════════════════════════════════════════════ Раньше каждый экран набирал зазоры сам: где 22, где 12, где 4, а где ноль, и половина держалась на inline-стилях. На соседних экранах одинаковые по смыслу блоки стояли по-разному, и приложение выглядело собранным из кусков. Величины и их смысл заданы переменными в макете — здесь только имена свои. Держим соответствие явно, чтобы правка в одном месте не разъезжалась с другим: макет (2924:35877) здесь что разделяет Section pudding 32 --gap-block самостоятельные блоки экрана Element padding 24 --gap-el крупные куски одного экрана Big inner padding 20 --gap подпись раздела → её содержимое Standart inner p. 16 --gap-list соседние элементы ОДНОЙ группы Padding/padding-m 8 --gap-head строки списка вокруг разделителя horisontal padding 16 --pad-x боковое поле экрана Card padding 16 --card-pad внутреннее поле карточки Верхнее поле экрана — те же 32, что и между блоками: в макете первый элемент каждого экрана стоит на y=32. Задаёт его #app и только он, свой отступ сверху первый блок не имеет — иначе экраны начнутся на разной высоте. */ :root { --gap-block: 32px; --gap-el: 24px; --gap: 20px; --gap-list: 16px; --gap-head: 8px; --card-pad: 16px; --pad-x: 16px; --field-error: #e53935; /* native/destructive_text_color из макета */ } #app > *:first-child { margin-top: 0; } /* ── Состояния на весь экран ── */ .center-state { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 24px; } .center-state .big { font-size: 44px; } .center-state .title { font-weight: 700; font-size: 18px; } .center-state .sub { color: var(--hint); font-size: 14px; max-width: 300px; } .spinner { width: 28px; height: 28px; border: 3px solid var(--card); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Скелет вместо спиннера: он занимает то же место, что и будущий контент, поэтому экран не прыгает, когда данные приходят. На слабой связи в поле это заметнее любой анимации перехода. */ .skel-card { background: var(--card); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; } .skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg) 25%, var(--card) 37%, var(--bg) 63%); background-size: 400% 100%; animation: skel 1.3s ease-in-out infinite; } .skel + .skel { margin-top: 8px; } .skel.w70 { width: 70%; } .skel.w40 { width: 40%; } @keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .skel { animation: none; } } /* Кнопка ровно та же, что .btn-cta: 50 px, скругление 8, SemiBold 17/26. Двух разных кнопок в продукте быть не должно — раньше .btn (скругление 12, высота по паддингам) и .btn-cta стояли на соседних экранах и выглядели из разных приложений. */ .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; min-height: 50px; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 17px; font-weight: 600; line-height: 26px; letter-spacing: .1px; padding: 12px 16px; cursor: pointer; } .btn:active { opacity: .8; } /* ── Шапка профиля ── */ .header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .header .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex: none; } .header .who { min-width: 0; } .header .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header .rank { color: var(--hint); font-size: 13px; } /* ── Карточки ── */ .card { background: var(--plain); border-radius: 12px; padding: 16px; margin-bottom: 12px; } .card h3 { margin: 0 0 10px; font-size: 15px; } /* Кошелёк */ .balance-num { font-size: 34px; font-weight: 800; line-height: 1.1; } .balance-sub { color: var(--hint); font-size: 13px; margin-top: 2px; } /* Лента операций */ .ledger-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bg); } .ledger-item:last-child { border-bottom: 0; } .ledger-item .info { flex: 1; min-width: 0; } .ledger-item .label { font-size: 14px; font-weight: 600; } .ledger-item .meta { font-size: 12px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ledger-item .amt { font-weight: 700; white-space: nowrap; } .amt.plus { color: var(--ok); } .amt.minus { color: var(--bad); } .amt.zero { color: var(--hint); } /* Значки */ .badge-progress { color: var(--hint); font-size: 13px; margin: -6px 0 12px; } .badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .badge { background: var(--card); border-radius: var(--radius); padding: 12px 8px; text-align: center; cursor: pointer; } .badge .e { font-size: 30px; } .badge .t { font-size: 11.5px; font-weight: 600; margin-top: 6px; line-height: 1.25; } .badge .d { font-size: 10.5px; color: var(--hint); margin-top: 3px; line-height: 1.3; } .badge.locked { opacity: .45; filter: grayscale(1); } .badge .bar { height: 4px; background: var(--bg); border-radius: 2px; margin-top: 7px; overflow: hidden; } .badge .bar > div { height: 100%; background: var(--accent); } /* История */ .year-block { margin-bottom: 18px; } .year-title { font-size: 20px; font-weight: 800; margin: 0 0 8px; } .tl-item { display: flex; gap: 10px; padding: 7px 0; } .tl-item .ico { flex: none; width: 26px; text-align: center; } .tl-item .txt { flex: 1; font-size: 14px; } .tl-item .when { color: var(--hint); font-size: 12px; white-space: nowrap; } .year-summary { color: var(--hint); font-size: 13px; margin-top: 6px; } .tl-item[data-storyev] { cursor: pointer; } /* Веха с постером. Подпись лежит НА картинке под градиентом, а не под ней: так строка ленты остаётся одним объектом, и светлый постер не съедает белый текст. */ .tl-photo { position: relative; margin: 8px 0; border-radius: var(--radius); overflow: hidden; background: var(--card); cursor: pointer; } .tl-photo img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .tl-photo .cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 8px; padding: 18px 12px 9px; color: #fff; font-size: 13.5px; font-weight: 600; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); } .tl-photo .cap .when { margin-left: auto; font-weight: 500; opacity: .85; white-space: nowrap; } /* 🎉 Праздник. Ровно четыре повода (см. celebrate() в app.js), поэтому отдельного «облегчённого» варианта нет: он либо есть, либо нет. */ .confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9999; } .confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: confetti-fall 1.9s ease-in forwards; } @keyframes confetti-fall { to { transform: translateY(105vh) rotate(540deg); opacity: 0; } } /* ── Квесты и роли ── */ .list-card { background: var(--plain); border-radius: 12px; padding: 13px 14px; margin-bottom: 9px; cursor: pointer; } .list-card .row1 { display: flex; align-items: center; gap: 8px; } .list-card .ttl { flex: 1; font-weight: 700; font-size: 14.5px; min-width: 0; } .list-card .rw { font-weight: 700; white-space: nowrap; color: var(--ok); } .list-card .tag { font-size: 12px; color: var(--hint); margin-top: 4px; } .list-card .tag.ok { color: var(--ok); } /* Подпись раздела — ссылкой, как в макете: серый капс читался как служебная метка, а это оглавление того, что под ним. */ .section-h { margin: var(--gap-block) 0 0; padding: 0 2px; font-size: 15px; font-weight: 600; line-height: 22px; letter-spacing: .15px; color: var(--link); } /* ── Формы ────────────────────────────────────────────────────────────────── Полям НУЖНЫ явные стили: без них WebView рисует системные контролы — разной высоты, со своими шрифтами и подсветкой, из-за чего формы выглядели собранными наспех. Один вид для input/select/textarea. */ .proof-form textarea, .proof-form input[type=text], .proof-form input[type=number], .proof-form input[type=tel], .proof-form select { width: 100%; box-sizing: border-box; display: block; background: var(--bg); color: var(--text); border: 1px solid rgba(128,128,128,.25); border-radius: 10px; font: inherit; font-size: 15px; padding: 11px 12px; margin: 0; -webkit-appearance: none; appearance: none; } .proof-form textarea { min-height: 84px; resize: vertical; } .proof-form select { /* стрелка вместо системной, съеденной appearance:none */ background-image: linear-gradient(45deg, transparent 50%, var(--hint) 50%), linear-gradient(135deg, var(--hint) 50%, transparent 50%); background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } .proof-form textarea:focus, .proof-form input:focus, .proof-form select:focus { outline: none; border-color: var(--accent); } .proof-form input::placeholder, .proof-form textarea::placeholder { color: var(--hint); } /* Поле = подпись + контрол. Раньше подписи были плейсхолдерами и исчезали при вводе — на длинных формах человек забывал, что именно заполняет. */ .field { margin-bottom: 12px; } .field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--hint); margin-bottom: 5px; } .field .hint { font-size: 12px; color: var(--hint); margin-top: 5px; } .field-row { display: flex; gap: 8px; } .field-row .field { flex: 1; min-width: 0; } /* Чекбокс в строку с подписью (а не поверх неё) */ .check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; margin: 4px 0 12px; } .check-row input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); } /* Строка тир-листа: место — имя — метрики. Имя ужимается, метрики не рвутся на две строки (на узких экранах список иначе «прыгает»). */ .tier-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(128,128,128,.12); font-size: 14px; } .tier-row:last-child { border-bottom: 0; } .tier-row .pl { flex: none; min-width: 24px; } .tier-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tier-row .mt { flex: none; font-size: 12.5px; color: var(--hint); white-space: nowrap; } .tier-row .up { color: var(--ok); } .tier-row.me { background: var(--card); border-radius: 8px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; font-weight: 700; } /* Оценка звёздами: крупные цели под палец (44px — минимум для тача) */ .stars { display: flex; gap: 4px; } .star { border: 0; background: none; cursor: pointer; padding: 0; width: 44px; height: 44px; line-height: 44px; font-size: 30px; color: var(--hint); } .star.on { color: #f5a623; } .proof-form .file-row { margin-top: 10px; } .file-label { display: inline-block; background: var(--bg); border: 1px dashed var(--hint); border-radius: 10px; padding: 9px 14px; font-size: 13.5px; color: var(--hint); cursor: pointer; } .file-label input { display: none; } .file-list { font-size: 12.5px; color: var(--hint); margin-top: 6px; } .proof-form .btn { width: 100%; margin-top: 12px; } .btn[disabled] { opacity: .55; } .form-err { color: var(--bad); font-size: 13px; margin-top: 8px; } /* Классы, приехавшие с разметкой из «Штаба оргов», но без стилей: кнопки в ряду наезжали друг на друга, а постер меро тянулся во весь натуральный размер вместо ширины экрана. */ /* Вертикальный стек действий: раньше кнопки ставились поштучно с разными inline-отступами (у части margin-top был, у части нет) — и они прилипали друг к другу. Отступ задаёт контейнер, одинаковый для всех. */ .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .actions .btn { width: 100%; margin: 0; } .btn-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .btn-row .btn { flex: 1; min-width: 44%; margin-top: 0; } /* .chip по умолчанию flex:none + nowrap — три штуки в ряд («Пригласи друга», «Мои данные», «Документы») не влезали и наезжали друг на друга. */ .btn-row .chip { flex: 1 1 auto; text-align: center; white-space: normal; } .btn.danger { background: #d92d20; color: #fff; } .task-status-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .task-status-row .chip { font-size: 12px; padding: 5px 10px; } /* ── Аренда ── */ .chip-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin: 0 -16px calc(var(--gap) - 8px); padding-left: 16px; padding-right: 16px; } .chip { flex: none; border: 0; background: var(--tertiary); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .chip.active { background: var(--accent); color: var(--accent-text); } .rent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } .rent-card { background: var(--card); border-radius: var(--radius); overflow: hidden; cursor: pointer; } .rent-card .ph { width: 100%; aspect-ratio: 4/3; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--hint); overflow: hidden; } .rent-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .rent-card .body { padding: 9px 10px 11px; } .rent-card .t { font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rent-card .p { font-size: 12px; color: var(--hint); margin-top: 3px; } .rent-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin-top: 5px; background: var(--bg); color: var(--hint); } .rent-badge.busy { color: var(--bad); } .rent-badge.org { color: var(--link); } .rent-detail .photo-main { width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--card); margin-bottom: 12px; } .rent-detail .photo-main img { width: 100%; display: block; } .kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--bg); } .kv:last-child { border-bottom: 0; } .kv span:first-child { color: var(--hint); flex: none; } .kv span:last-child { text-align: right; } /* .hint-box описан ниже, в блоке по макету */ /* ── Таббар ── */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; } .tab { flex: 1; min-width: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 20px; color: var(--hint); padding: 8px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; } .tab span { font-size: 11px; font-weight: 600; } .tab.active { color: var(--accent); } /* ══════════════════════════════════════════════════════════════════════════ 🎪 Мероприятия: разделы, карточки, строки списка ══════════════════════════════════════════════════════════════════════════ Экран собран разделами с горизонтальными каруселями (макет Figma «Экран мероприятий»). Компоненты взяты в андроидной редакции: заголовок раздела — Roboto SemiBold в обычном регистре, а не капсом 13 px, как в iOS-варианте; скругления и кнопки — по Material, а не по HIG. Иерархия внутри карточки строится размером и цветом, а не рамками: картинка (площадь) → название (кегль) → дата → цена (приглушённая). */ .ev-section { margin: 0 0 var(--gap-block); } .ev-shead { display: flex; align-items: center; gap: 10px; padding: 0 4px 8px; } /* ❗ Здесь я ошибся раньше: «перевёл» заголовок на андроидный (17 px, обычный регистр), хотя в макете он iOS-овский — мелкий серый капс. Макет главнее моей теории про платформы. */ .ev-shead h2 { flex: 1; margin: 0; font-size: 13px; font-weight: 400; line-height: 16px; letter-spacing: -0.08px; text-transform: uppercase; color: var(--hint); } /* Текстовая кнопка Material: без пилюли и рамки, только цвет ссылки */ .ev-all { position: relative; border: 0; background: none; padding: 4px 8px; margin: -4px -8px -4px 0; color: var(--link); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border-radius: 8px; } /* Само слово «Всё» — 40×30, меньше пальца. Растим область нажатия невидимым слоем: цель становится ~60×52, а вёрстка не смещается. */ .ev-all::after { content: ""; position: absolute; inset: -11px -6px; } .ev-all:active { background: var(--plain); } /* Карусель выходит за поля экрана: карточка, обрезанная краем, — это и есть приглашение свайпнуть. Упёртая в поле выглядит как последняя. */ .ev-scroll { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 16px 4px; margin: 0 -16px; /* ❗ Без scroll-padding первая карточка вставала вплотную к краю экрана. Причина не в отступах, а в привязке: точка привязки считается от края области прокрутки, а не от её padding. Браузер честно подкручивал ленту на 16 px вправо, чтобы совместить начало карточки с краем, — и левый отступ просто уезжал за экран. scroll-padding сдвигает саму точку привязки внутрь. */ scroll-padding-left: 16px; scroll-padding-right: 16px; scrollbar-width: none; } .ev-scroll::-webkit-scrollbar { display: none; } .ev-card { flex: 0 0 auto; width: 66vw; max-width: 253px; scroll-snap-align: start; background: var(--card); border-radius: 20px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease; } .ev-card:active { transform: scale(.97); } /* Прошедшие приглушены, но читаемы: это архив, а не брак */ .ev-card.past .ev-media img, .ev-row.past .ev-thumb img { filter: saturate(.55) brightness(.92); } .ev-card.past .ev-title, .ev-row.past .ev-title { color: var(--hint); } /* Обложка квадратная — та же картинка работает и здесь, и на экране меро */ .ev-media { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--bg); overflow: hidden; } .ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ev-media-stub { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; opacity: .35; } /* Плашки поверх картинки. Тёмная подложка, а не цвет темы: под картинкой светлая тема даёт белым по белому ровно там, где небо. */ .ev-chip { position: absolute; top: 12px; right: 12px; font-size: 15px; font-weight: 700; padding: 6px 10px; border-radius: 10px; backdrop-filter: blur(12px); background: var(--surface); color: var(--plain-fg); white-space: nowrap; line-height: 20px; } .ev-chip.few { color: var(--warn); } .ev-chip.none { color: #d9d9d9; font-weight: 600; } /* Состояние «записан» в макете — не строка, а знак: зелёный кружок с галочкой в тёмном квадрате. Строкой он занимал треть картинки и спорил с постером, знаком — читается мгновенно и не мешает смотреть. */ .ev-chip.mark { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; font-size: 0; } .ev-chip.mark::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--ok) no-repeat center / 16px 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); } .ev-chip.mark.wait::before { background-color: var(--warn); } .ev-chip.mark.pay::before { background-color: var(--bad); } .ev-body { padding: 12px 14px 14px; } .ev-titlerow { display: flex; align-items: baseline; gap: 4px; } /* Две строки максимум: третья съедает высоту, ради которой лента и затевалась */ .ev-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ev-age { flex: 0 0 auto; font-size: 17px; color: var(--hint); } .ev-sub { margin-top: 1px; font-size: 15px; line-height: 20px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ev-cap { font-size: 13px; line-height: 20px; color: var(--hint); } /* ── Строка длинного списка ──────────────────────────────────────────────── Полноразмерная квадратная обложка в вертикальном списке заняла бы экран целиком на одно меро — а список затем и нужен, чтобы сравнивать. */ /* Карточка из макета: 130×130 картинка вплотную к краю, текст с полем 12. Раньше картинка была 88 и болталась внутри общего паддинга — карточка читалась как строка списка, а не как афиша. */ .ev-row { display: flex; align-items: stretch; background: var(--card); border-radius: 12px; overflow: hidden; margin-bottom: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ev-row:active { transform: scale(.99); } .ev-thumb { flex: 0 0 130px; width: 130px; height: 130px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; } .ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ev-thumb .ev-media-stub { font-size: 34px; } .ev-rowbody { flex: 1; min-width: 0; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } /* В карточке 130 px высоты второй строке названия места нет */ .ev-row .ev-title { -webkit-line-clamp: 1; letter-spacing: -.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ev-row .ev-sub { margin-top: 0; letter-spacing: -.23px; } .ev-row .ev-cap { line-height: 16px; letter-spacing: -.08px; } /* Состояние, где от человека чего-то ждут, — единственное цветное пятно */ .ev-cap.warn { color: var(--warn); font-weight: 600; } /* ── Поиск ─────────────────────────────────────────────────────────────── */ .ev-search { position: relative; margin: 2px 0 12px; } .ev-search input { width: 100%; padding: 11px 38px 11px 14px; font-size: 15px; border: none; border-radius: 12px; background: var(--card); color: var(--text); -webkit-appearance: none; appearance: none; } .ev-search input::placeholder { color: var(--hint); } .ev-search input:focus { outline: 2px solid var(--accent); outline-offset: -2px; } .ev-qx { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--hint); font-size: 15px; padding: 8px; cursor: pointer; } /* ══════════════════════════════════════════════════════════════════════════ 🎪 Экран мероприятия (макет Figma, андроидная редакция) ══════════════════════════════════════════════════════════════════════════ */ /* Обложка во всю ширину, квадратная — та же пропорция, что в ленте. Постер и обложка листаются свайпом; точки показывают, что их две. */ /* Обложка в макете НЕ во всю ширину: она вписана в те же поля, что и остальной экран, и скруглена на 12. Раньше я растянул её до краёв — так делают ленты новостей, но здесь картинка часть карточки, а не подложка под неё. */ .ev-hero { position: relative; border-radius: 12px; overflow: hidden; } .ev-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ev-slides::-webkit-scrollbar { display: none; } .ev-slides > * { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; background: var(--card); } .ev-slides img { width: 100%; height: 100%; object-fit: cover; display: block; } .ev-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 36px; display: flex; gap: 6px; padding: 8px 9px; border-radius: 28px; background: rgba(0, 0, 0, .25); backdrop-filter: blur(22px); } .ev-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); } .ev-dot.on { background: #fff; } .ev-head { padding: var(--gap-block) 4px 0; } .ev-typechip + .ev-head { padding-top: 0; } .ev-h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: .07px; } /* Блок сведений: строки, разделённые линиями, без собственных заголовков — подпись стоит над значением, как в макете. */ .info-box { background: var(--plain); border-radius: 12px; overflow: hidden; margin: var(--gap-list) 0 var(--gap-block); } .info-row { padding: 12px 16px; } /* Линия между любыми соседями блока — включая пару «строка ↔ кнопка». Правило на .info-row + .info-row промахивалось мимо парной строки и кнопки «Скопировать»: они не .info-row. */ /* Линия между любыми соседями — с отступом 16 по краям, как в макете: от края до края она режет плашку пополам и та перестаёт читаться единым блоком. */ .info-box > * + * { position: relative; } .info-box > * + *::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--divider); } /* Пара «Цена — Записи»: вертикальной черты между ними в макете нет, правая ячейка просто прижата к краю и выровнена по правому. */ .info-split { display: flex; align-items: stretch; } .info-split > .info-row:first-child { flex: 1; min-width: 0; } .info-split > .info-row + .info-row { flex: 0 0 auto; text-align: right; } .info-lbl { font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: var(--hint); } .info-val { font-size: 17px; line-height: 22px; letter-spacing: -.4px; } .info-val.wrap { white-space: pre-wrap; word-break: break-word; } .info-val .r { float: right; color: var(--hint); } .ev-sect-h { padding: 0 4px var(--gap-list); font-size: 17px; font-weight: 600; line-height: 26px; } /* ── Поле ввода Material 3 (outlined) ───────────────────────────────────── Подпись сидит в вырезе рамки — это и есть андроидный вариант того, что в iOS-макете было отдельной строкой над полем. */ .md-field { position: relative; margin: 31px 0 0; } .md-field input, .md-field select { width: 100%; height: 52px; padding: 0 16px; font: inherit; font-size: 16px; line-height: 24px; letter-spacing: .15px; color: var(--text); background: transparent; border: 1.8px solid var(--outline); border-radius: 14px; -webkit-appearance: none; appearance: none; } .md-field input:focus, .md-field select:focus, .md-field textarea:focus { border-color: var(--accent); outline: none; } /* ── Состояния поля (макет 2839:18851) ───────────────────────────────────── Пять состояний, и каждое отвечает на свой вопрос: пустое — «сюда можно писать», активное — «пишешь сюда», заполненное — «здесь уже есть ответ», ошибка — «вот это поле не пропустит», выключенное — «сейчас нельзя». Ошибку красят и рамка, и подпись: одной рамки на тёмном фоне мало. */ .md-field.is-error input, .md-field.is-error textarea, .md-field.is-error select { border-color: var(--field-error); } .md-field.is-error > label { color: var(--field-error); } .md-field.is-disabled { opacity: .4; pointer-events: none; } /* Причина ошибки — под полем, а не общей строкой внизу формы: пока доскроллишь до неё, забудешь, о каком поле речь. */ .md-field .md-err { margin: 6px 0 0 16px; font-size: 13px; line-height: 18px; color: var(--field-error); } /* Большое поле — для описаний: те же рамка и подпись, выше содержимое */ .md-field.large textarea { width: 100%; min-height: 80px; padding: 14px 16px; resize: vertical; font: inherit; font-size: 16px; line-height: 24px; letter-spacing: .15px; color: var(--text); background: transparent; border: 1.8px solid var(--outline); border-radius: 14px; } .md-field > label { position: absolute; top: -11px; left: 10px; padding: 0 6px; background: var(--bg); color: var(--hint); font-size: 15px; font-weight: 600; line-height: 22px; pointer-events: none; } .md-field input:focus ~ label, .md-field select:focus ~ label { color: var(--accent); } .md-hint { margin-top: 0; font-size: 13px; line-height: 18px; color: var(--hint); } /* Кнопка Android: 50 px, скругление 8, Roboto SemiBold 17/26 */ .btn-cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 17px; font-weight: 600; line-height: 26px; cursor: pointer; margin-top: var(--gap-block); text-decoration: none; } .btn-cta:active { opacity: .82; } /* Кнопка билета по макету: глиф QR-кода 24 px, зазор 10, паддинги 12/15, надпись 17/26 с трекингом .1. Раньше вместо глифа стояла эмодзи 🎫 — каждый клиент рисует её своим шрифтом, и рядом с текстом она выглядела как случайная картинка, а не как знак. Сверху отступа нет: это первый элемент экрана. */ .qr-cta { gap: 10px; padding: 15px 12px; margin: 0 0 var(--gap-block); letter-spacing: .1px; overflow: hidden; } .qr-cta .ic { flex: none; background-color: var(--accent-text); } .btn-cta[disabled] { opacity: .5; cursor: default; } /* Второстепенное действие: та же кнопка, только тише цветом. Синяя на экране ровно одна — то, чего ждут прямо сейчас. */ .btn-cta.plain { background: var(--plain); color: var(--plain-fg); } /* Кнопка последней строкой внутри плашки сведений («Скопировать»): у неё свои углы были бы вторыми внутри чужого скругления. */ .btn-cta.in-box { border-radius: 0; margin-top: 0; } /* Разрушающее действие. Красный из макета отличается от красного ошибок: тот кричит о поломке, этот — о том, что кнопку не нажимают случайно. */ .btn-cta.danger { background: var(--destructive); color: var(--accent-text); margin-top: var(--gap-block); } /* Стопка действий: между кнопками 16 — они читаются вместе, как одна группа; до самой стопки 32, потому что это отдельный блок экрана. */ .actions { gap: var(--gap-list); margin-top: var(--gap-block); } .actions .btn-cta { margin-top: 0; } /* ── 💳 Оплата ───────────────────────────────────────────────────────────── */ .pay-sum { font-size: 34px; font-weight: 700; line-height: 41px; letter-spacing: .4px; margin-top: 8px; } /* ── Экран результата ────────────────────────────────────────────────────── */ .res-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--gap-block); padding: var(--gap-block) var(--pad-x) var(--gap); text-align: center; } .res-circle { width: min(240px, 62vw); aspect-ratio: 1 / 1; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-size: min(136px, 35vw); line-height: 1; } /* Круг один на все три исхода. Раньше у ошибки он был красным, а у очереди эмодзи мельче — в обновлённом макете разницы нет: цветом и размером кричит не круг, а то, что написано под ним. */ .res-ttl { font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: .07px; } .res-sub { font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: var(--hint); margin-top: var(--gap-head); } /* ── Клавиатура ────────────────────────────────────────────────────────────── Приложение открывают и с десктопного Telegram, где ходят табом. Своих стилей фокуса не было, а браузерный сбрасывается темой. :focus-visible, а не :focus: обводка нужна тому, кто идёт с клавиатуры, и не нужна тому, кто ткнул пальцем. */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } /* ── 🔥 Кошелёк: ранг вместо счёта ─────────────────────────────────────────── Огоньки — репутация, а не валюта. Крупное число в банковской вёрстке говорило обратное, и подпись мелким шрифтом этот спор проигрывала. */ /* ── Зазор после ряда действий ─────────────────────────────────────────────── `.card` задаёт только margin-bottom, а кнопка — ничего. Блок, идущий сразу за кнопкой или за рядом действий, вставал к ним вплотную: между «В архив» и «Удалить меро» было ровно 0 px, и читалось это как одна слипшаяся плита. */ /* Шаг между блоками экрана меро — 20, как в макете. Двенадцать оставались от прежней вёрстки и сбивали ритм: сверху 20, а тут вдруг 12. */ .actions + *, .btn + .card, .btn + .actions { margin-top: 20px; } /* ══════════════════════════════════════════════════════════════════════════ Шторка (bottom sheet) ══════════════════════════════════════════════════════════════════════════ Модалка снизу вместо отдельного экрана там, где человек не уходит с места, а лишь заглядывает: список типа меро, оплата, QR. Экран за ней остаётся виден — значит остаётся понятно, откуда пришёл и куда вернёшься. */ .sheet-back { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .18s ease; } .sheet-back.on { opacity: 1; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 901; max-height: 88vh; display: flex; flex-direction: column; background: var(--bg); border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform .22s ease; } .sheet.on { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .sheet, .sheet-back { transition: none; } } /* Ручка — не украшение: она сообщает, что шторку можно утянуть вниз */ .sheet-grip { flex: none; width: 36px; height: 4px; border-radius: 4px; background: var(--divider); margin: 8px auto 4px; } .sheet-head { flex: none; text-align: center; padding: 8px 20px 12px; font-size: 24px; font-weight: 700; line-height: 28px; } .sheet-body { overflow-y: auto; padding: 0 20px 20px; } .sheet-body.flush { padding-left: 0; padding-right: 0; } /* ── Горизонтальная карточка меро (в шторке «Всё») ─────────────────────── */ .ev-wide { display: flex; align-items: stretch; gap: 0; background: var(--card); border-radius: 12px; overflow: hidden; margin-bottom: 12px; cursor: pointer; } .ev-wide:active { opacity: .85; } .ev-wide .ev-thumb { width: 130px; height: 130px; border-radius: 0; flex: none; } .ev-wide-body { flex: 1; min-width: 0; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; } .ev-wide-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .ev-wide-foot .ev-age { flex: 1; font-size: 13px; line-height: 16px; } /* ══════════════════════════════════════════════════════════════════════════ 👤 Профиль ══════════════════════════════════════════════════════════════════════════ */ .pf-box { background: var(--plain); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 8px; } .pf-row { display: flex; align-items: center; gap: 10px; cursor: pointer; } .pf-ava { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--link); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; overflow: hidden; } .pf-ava img { width: 100%; height: 100%; object-fit: cover; } .pf-who { flex: 1; min-width: 0; } .pf-name { font-size: 24px; font-weight: 700; line-height: 28px; } .pf-fires { font-size: 15px; line-height: 20px; color: var(--hint); margin-top: 4px; } .pf-chev { flex: none; color: var(--hint); font-size: 18px; } .pf-tier { display: flex; align-items: flex-end; gap: 10px; } .pf-tier-name { font-size: 34px; font-weight: 700; line-height: 41px; letter-spacing: .4px; } .pf-tier-next { flex: 1; text-align: right; font-size: 15px; line-height: 20px; color: var(--hint); } /* Список разделов: иконка, название, разделитель с отступом под текст */ .pf-list { background: var(--bg); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--gap-head) * 2 + 1px); margin-top: var(--gap-block); } /* Строка раздела: иконка 28 в цвете ссылки, подпись 16/24. Разделитель начинается от текста, а не от края — так строка читается как «иконка и её название», а не как таблица. */ .pf-item { display: flex; align-items: center; gap: 20px; min-height: 56px; padding: 12px 4px; cursor: pointer; position: relative; } .pf-item + .pf-item::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--gap-head) - 1px); height: 1px; background: var(--divider); } .pf-ico { flex: none; width: 28px; height: 28px; display: flex; align-items: flex-start; justify-content: flex-start; } .pf-ico .ic { width: 24px; height: 24px; background-color: var(--text); } .pf-ttl { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; letter-spacing: .15px; } /* ══════════════════════════════════════════════════════════════════════════ Нижняя панель — андроидная редакция ══════════════════════════════════════════════════════════════════════════ Активный таб помечается не только цветом, но и подложкой-пилюлей под иконкой: цветом одним различают не все, а форма видна всем. */ .tab .tab-ico { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: 0; width: 24px; height: 24px; padding: 0; border-radius: 35px; font-size: 22px; line-height: 24px; } .tab.active .tab-ico { background: var(--accent-soft); } .tab-badge { position: absolute; top: -3px; left: calc(50% + 14px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 20px; background: var(--accent); color: var(--accent-text); font-size: 13px; font-weight: 600; line-height: 20px; text-align: center; } /* ── Сегменты «Афиша / Мои записи» ─────────────────────────────────────────── Не два экрана, а два взгляда на один: человек переключает, а не уходит. Пилюля 44 px — та же высота, что у зон нажатия в Штабе. */ .seg2 { display: flex; align-items: center; height: 44px; padding: 2px; background: var(--tertiary); border-radius: 44px; margin-bottom: var(--gap-block); } .seg2-i { flex: 1; height: 100%; border: 0; border-radius: 40px; cursor: pointer; background: transparent; color: var(--hint); font: inherit; font-size: 13px; font-weight: 600; line-height: 20px; } .seg2-i.on { background: var(--seg-on); color: var(--text); } /* Состояния чипа на карточке: он говорит «что со мной», а не «сколько мест» */ .ev-chip.wait { color: #d9d9d9; } .ev-chip.pay { color: var(--warn); } /* Счётчик до конца оплаты. Считается от серверного дедлайна и не обнуляется при закрытии шторки — иначе обещание «успей» ничего не стоит. */ .pay-left { text-align: center; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--warn); } /* ── Нижняя панель по макету ───────────────────────────────────────────────── Тёмная поверхность с волосяной линией сверху, активный таб — СПЛОШНАЯ синяя пилюля с белой иконкой (не подсветка на 15 %: в макете она залита). */ .tabbar { background: var(--surface); backdrop-filter: blur(22px); border-top: .5px solid var(--divider); } .tab { color: var(--hint2); } .tab.active { color: var(--link); } .tab .tab-ico { min-width: 64px; padding: 4px 10px; border-radius: 35px; background: transparent; } .tab.active .tab-ico { background: var(--accent); } .tab.active .tab-ico .ic { background-color: var(--accent-text); } /* Иконка в панели мельче общей: 20 px, а не 24. Раньше глиф занимал пилюлю почти целиком и она читалась не как подложка, а как рамка вокруг иконки. Высота пилюли прежняя (28 px) — добрали паддингом, чтобы панель не поехала. */ .tab .tab-ico .ic { width: 20px; height: 20px; background-color: var(--hint2); } .tab span:not(.tab-ico) { font-size: 13px; font-weight: 600; line-height: 20px; letter-spacing: .1px; } /* Material-глифы из макета. Маской, а не : картинку не перекрасить, а иконка обязана менять цвет между активным и неактивным табом. */ .ic { display: block; width: 24px; height: 24px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .ic-explore { -webkit-mask-image: url("icons/explore.svg"); mask-image: url("icons/explore.svg"); } .ic-person { -webkit-mask-image: url("icons/person.svg"); mask-image: url("icons/person.svg"); } .ic-person2 { -webkit-mask-image: url("icons/person2.svg"); mask-image: url("icons/person2.svg"); } .ic-extension { -webkit-mask-image: url("icons/extension.svg"); mask-image: url("icons/extension.svg"); } .ic-basket { -webkit-mask-image: url("icons/basket.svg"); mask-image: url("icons/basket.svg"); } /* Иконки разделов профиля — Material Symbols Outlined, как договорились: эмодзи в списке навигации каждый клиент рисует по-своему, и ряд из двенадцати штук выглядел как набор наклеек, а не как один список. Эмодзи остаются там, где они смысл, а не украшение — в значках- достижениях: там картинка и есть награда. */ .ic-emoji_events { -webkit-mask-image: url("icons/emoji_events.svg"); mask-image: url("icons/emoji_events.svg"); } .ic-text_snippet { -webkit-mask-image: url("icons/text_snippet.svg"); mask-image: url("icons/text_snippet.svg"); } .ic-history { -webkit-mask-image: url("icons/history.svg"); mask-image: url("icons/history.svg"); } .ic-directions_car { -webkit-mask-image: url("icons/directions_car.svg"); mask-image: url("icons/directions_car.svg"); } .ic-local_activity { -webkit-mask-image: url("icons/local_activity.svg"); mask-image: url("icons/local_activity.svg"); } .ic-rate_review { -webkit-mask-image: url("icons/rate_review.svg"); mask-image: url("icons/rate_review.svg"); } .ic-lightbulb { -webkit-mask-image: url("icons/lightbulb.svg"); mask-image: url("icons/lightbulb.svg"); } .ic-leaderboard { -webkit-mask-image: url("icons/leaderboard.svg"); mask-image: url("icons/leaderboard.svg"); } .ic-campaign { -webkit-mask-image: url("icons/campaign.svg"); mask-image: url("icons/campaign.svg"); } .ic-casino { -webkit-mask-image: url("icons/casino.svg"); mask-image: url("icons/casino.svg"); } .ic-account_balance { -webkit-mask-image: url("icons/account_balance.svg"); mask-image: url("icons/account_balance.svg"); } .ic-chevron_right { -webkit-mask-image: url("icons/chevron_right.svg"); mask-image: url("icons/chevron_right.svg"); } .ic-arrow_back { -webkit-mask-image: url("icons/arrow_back.svg"); mask-image: url("icons/arrow_back.svg"); } /* Глиф QR-кода — выгружен из макета, а не нарисован: своей рукой я бы попал мимо сетки квадратов. */ .ic-qr_code { -webkit-mask-image: url("icons/qr_code.svg"); mask-image: url("icons/qr_code.svg"); } /* Иконка в строке списка — того же серого, что и подпись: цветом строку ведёт название, а не значок слева */ .pf-ico .ic { background-color: var(--text); margin: 0; } .pf-chev .ic { width: 16px; height: 16px; background-color: var(--hint); } /* Та же стрелка в правом краю строк-ссылок (аренда, транспорт, разделы) */ .rw .ic { width: 20px; height: 20px; background-color: var(--hint); } /* Стрелка «назад» — тоже material, а не типографский треугольник */ /* Поля ввода везде — те же outlined-поля, что на форме записи. Раньше на остальных экранах они были залитыми прямоугольниками и выглядели из другого приложения. */ /* Только текстовые контролы: галочка и выбор файла — не поля ввода, им ширина 100 % и рамка не нужны (иначе чекбокс растягивается на строку). */ .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea, .proof-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .proof-form textarea, .proof-form select { width: 100%; background: transparent; color: var(--text); border: 1.8px solid var(--outline); border-radius: 14px; font: inherit; font-size: 16px; line-height: 24px; letter-spacing: .15px; padding: 13px 16px; -webkit-appearance: none; appearance: none; } .field input:focus, .field select:focus, .field textarea:focus, .proof-form input:focus, .proof-form textarea:focus, .proof-form select:focus { border-color: var(--accent); outline: none; } /* Подсказка-плашка — это Tooltip (Android) из макета: пузырь ТЕМНЕЕ фона, а не светлее. Раньше подложка была светлой (--plain), и подсказка спорила по весу с карточками, хотя она — сноска к соседнему блоку, а не блок. */ .hint-box { background: rgba(0, 0, 0, .85); /* custom/tooltip_background_dark */ color: #fff; border-radius: 12px; padding: 10px; font-size: 13px; line-height: 20px; letter-spacing: .1px; /* Сверху 32 — подсказка открывает новый блок; снизу 16, потому что она прижата к тому, что поясняет (это же делает .hint-box + *). */ margin: var(--gap-block) 0 var(--gap-list); } /* ══════════════════════════════════════════════════════════════════════════ Экран квестов — по макету Figma (2756:7963) ══════════════════════════════════════════════════════════════════════════ */ /* Счётчик на синей кнопке: «есть чего ждать». Ноль не рисуем вовсе — пустой бейдж приучает не замечать непустой. */ .cta-badge { margin-left: 8px; padding: 0 8px; border-radius: 20px; background: rgba(255, 255, 255, .22); color: var(--accent-text); font-size: 15px; font-weight: 600; line-height: 24px; } /* Карточка квеста: название и награда в одной строке, под ними что с ним можно сделать и как часто. Три строки — три разных вопроса, и порядок у них по убыванию важности. */ .q-card { background: var(--plain); border-radius: 12px; padding: 12px 0; margin-bottom: var(--gap-list); cursor: pointer; -webkit-tap-highlight-color: transparent; } .q-card:active { opacity: .85; } .q-head { display: flex; align-items: center; gap: 16px; padding: 0 16px; } .q-ttl { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 26px; letter-spacing: .1px; } .q-rew { flex: none; font-size: 17px; line-height: 22px; letter-spacing: -.4px; white-space: nowrap; } .q-body { padding: 8px 16px 0; } .q-state { font-size: 17px; line-height: 22px; letter-spacing: -.4px; } .q-kind { font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: var(--hint); } .q-card .tag { font-size: 15px; line-height: 20px; margin-top: 2px; } /* Ячейки разделов: иконка 28, подпись 16/24. Разделители между ВСЕМИ строками во всю ширину — в макете линии стоят не везде, но пропуск в одном месте читается как сбой вёрстки, а не как замысел. */ .cells { margin-top: var(--gap-block); display: flex; flex-direction: column; gap: calc(var(--gap-head) * 2 + 1px); } .cell { display: flex; align-items: center; gap: 20px; min-height: 56px; padding: 12px 4px; cursor: pointer; position: relative; font-size: 16px; line-height: 24px; letter-spacing: .15px; } .cell + .cell::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--gap-head) - 1px); height: 1px; background: var(--divider); } .cell:active { background: var(--plain); } .cell-ico { flex: none; width: 28px; height: 28px; display: flex; align-items: flex-start; justify-content: flex-start; } .cell-ico .ic { width: 24px; height: 24px; background-color: var(--text); } .cell-ttl { flex: 1; min-width: 0; } .ic-volunteer_activism { -webkit-mask-image: url("icons/volunteer_activism.svg"); mask-image: url("icons/volunteer_activism.svg"); } /* ══════════════════════════════════════════════════════════════════════════ Обновление макетов 12.08.2026 (2761:8817, 2736:11563, 2736:9970) ══════════════════════════════════════════════════════════════════════════ */ /* ── Таб-бар: активный помечен ЛИНИЕЙ СВЕРХУ, а не залитой пилюлей ────────── Пилюля была в прошлой редакции макета; в новой её нет — вместо неё полоса 4 px по верхней кромке таба. Разница не косметическая: пилюля утяжеляла панель и спорила с синей кнопкой действия на экране. */ .tabbar .tab { padding: 12px 0 16px; gap: 6px; border-top: 4px solid transparent; } .tab.active { border-top-color: var(--link); } .tab .tab-ico { min-width: 0; width: 24px; height: 24px; padding: 0; background: none; } .tab.active .tab-ico { background: none; } .tab .tab-ico .ic { width: 24px; height: 24px; background-color: var(--hint2); } .tab.active .tab-ico .ic { background-color: var(--link); } /* ── Хвостик подсказки ────────────────────────────────────────────────────── Показывает, К ЧЕМУ подсказка относится. В макете он снизу слева: пузырь висит НАД тем, что поясняет. Раньше смотрел вверх — и подсказка читалась как сноска к предыдущему блоку, то есть ровно наоборот. */ .hint-box.tip { position: relative; } .hint-box.tip::after { content: ""; position: absolute; bottom: -6px; left: 12px; width: 28px; height: 6px; background: inherit; clip-path: polygon(13.8% 0, 84.8% 0, 50% 100%); } /* ── Карточка профиля: градиент и иллюстрация ─────────────────────────────── Единственное место в приложении с фирменным градиентом: это «я» человека, и оно должно отличаться от служебных плашек. */ .pf-hero { position: relative; overflow: hidden; background: radial-gradient(120% 160% at 20% 90%, rgba(253,72,44,.4) 0%, #fd482c 63%, #f77023 81%, #f09819 100%); border-radius: 12px; padding: var(--card-pad); margin-top: var(--gap-list); display: flex; flex-direction: column; gap: 8px; } .pf-hero .pf-row { margin: 0; cursor: pointer; } .pf-hero .pf-name { color: #fff; } .pf-hero .pf-fires { color: #fff; } .pf-tier { display: flex; align-items: flex-end; gap: 10px; } .pf-tier-name { font-size: 34px; font-weight: 700; line-height: 41px; letter-spacing: .4px; color: #fff; } .pf-tier-next { flex: 1; text-align: right; font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: #fff; } .pf-bar, .progress { height: 12px; border-radius: 4px; overflow: hidden; background: var(--accent-soft); } .pf-bar > div, .progress > div { height: 100%; background: var(--link); border-radius: 4px; } /* ── Чип типа меро над названием ────────────────────────────────────────────*/ .ev-typechip { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 12px; margin: var(--gap-block) 0 var(--gap-list); background: var(--accent-soft); color: var(--link); font-size: 15px; font-weight: 600; line-height: 22px; letter-spacing: .15px; } /* ── Строка сведений с иконкой ────────────────────────────────────────────── Дата, время и место читаются взглядом по значку, а не по подписи — поэтому значок 28 и стоит первым. */ .info-row.ico { display: flex; align-items: center; gap: 16px; padding: 0 16px; } .info-row.ico > .ic { flex: none; width: 28px; height: 28px; background-color: var(--link); } .info-row.ico .info-cell { flex: 1; min-width: 0; padding: 12px 0; } .info-row.ico .info-act { flex: none; color: var(--link); font-size: 17px; line-height: 22px; letter-spacing: -.4px; cursor: pointer; text-decoration: none; } /* ── Баннер-объяснение (командное меро) ─────────────────────────────────────*/ .ev-banner { background: var(--accent); color: var(--accent-text); border-radius: 12px; padding: 16px; margin: var(--gap-block) 0; } .ev-banner b { display: block; font-size: 17px; font-weight: 600; line-height: 26px; letter-spacing: .1px; margin-bottom: 4px; } .ev-banner span { font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: rgba(255, 255, 255, .9); } /* ── Пара компактных кнопок в ряд (Чат · Транспорт) ───────────────────────── Иконка над подписью: две таких кнопки занимают одну строку вместо двух полноширинных, и экран не превращается в стопку одинаковых плашек. */ .ev-pair { display: flex; gap: 10px; margin-top: var(--gap-list); } .ev-pair > * { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border: 0; border-radius: 12px; cursor: pointer; background: var(--plain); color: var(--link); font: inherit; font-size: 13px; font-weight: 600; line-height: 20px; letter-spacing: .1px; text-decoration: none; } .ev-pair .ic { width: 24px; height: 24px; background-color: var(--link); } .ev-pair > *:active { opacity: .8; } /* ── Тумблер в форме записи («Я капитан») ───────────────────────────────────*/ .sw-row { display: flex; align-items: center; gap: 12px; padding: 4px 4px; margin: 20px 0; font-size: 17px; line-height: 26px; } .sw-row > span { flex: 1; min-width: 0; } /* Селектор с родителем весомее одиночного класса, поэтому `flex: 1` выше перебивал `.sw` и тумблер растягивался во всю свободную ширину — 169 px вместо 52. Пишем так же «весомо», иначе правило не действует. */ .sw-row > span.sw { flex: none; width: 52px; height: 32px; position: relative; } .sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .sw i { position: absolute; inset: 0; border-radius: 32px; pointer-events: none; background: rgba(120, 120, 128, .32); transition: background .15s ease; } .sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: transform .15s ease; } .sw input:checked + i { background: var(--link); } .sw input:checked + i::after { transform: translateX(20px); } .ic-groups { -webkit-mask-image: url("icons/groups.svg"); mask-image: url("icons/groups.svg"); } .ic-check { -webkit-mask-image: url("icons/check.svg"); mask-image: url("icons/check.svg"); } .ic-close { -webkit-mask-image: url("icons/close.svg"); mask-image: url("icons/close.svg"); } .ic-expand_more { -webkit-mask-image: url("icons/expand_more.svg"); mask-image: url("icons/expand_more.svg"); } .ic-calendar_today { -webkit-mask-image: url("icons/calendar_today.svg"); mask-image: url("icons/calendar_today.svg"); } .ic-schedule { -webkit-mask-image: url("icons/schedule.svg"); mask-image: url("icons/schedule.svg"); } .ic-place { -webkit-mask-image: url("icons/place.svg"); mask-image: url("icons/place.svg"); } .ic-chat_bubble { -webkit-mask-image: url("icons/chat_bubble.svg"); mask-image: url("icons/chat_bubble.svg"); } /* Подпись раздела прижата к своему содержимому — что бы за ней ни шло. Правило стоит последним намеренно: по весу оно равно правилам отдельных блоков (.hint-box, .card), и при равном весе выигрывает нижнее. */ .section-h + * { margin-top: var(--gap); } /* …но подпись раздела открывает НОВЫЙ блок, её к подсказке не жмём. */ .hint-box + *:not(.section-h) { margin-top: var(--gap-list); } /* ── Скидка на записи (макет 2835:17840) ─────────────────────────────────── Галочка, название скидки и цена «было → стало» в одну строку, под ними — код. Раньше это была плашка с мелким текстом: человек не видел, во что ему обойдётся меро, пока не дочитает. */ .disc { display: flex; flex-direction: column; gap: var(--gap-head); margin-top: var(--gap-block); } .disc-head { display: flex; flex-direction: column; gap: 4px; padding: 0 24px; } .disc-row { display: flex; align-items: center; gap: 10px; cursor: pointer; } .disc-row input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; } .disc-ttl { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; line-height: 26px; letter-spacing: .1px; } .disc-was { text-decoration: line-through; } .disc-code { font-size: 15px; line-height: 20px; letter-spacing: -.23px; color: var(--hint); } /* ── Строка выбора (команда) ─────────────────────────────────────────────── Выбор из списка — это переход в шторку, а не выпадающий select: родной select в Telegram WebView приходит в чужой теме. Строка показывает, что выбрано, и открывает выбор. */ .pick-row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 4px; margin-top: var(--gap-block); cursor: pointer; } .pick-row > .ic { flex: none; width: 28px; height: 28px; background-color: var(--hint); } .pick-row .pick-ttl { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; letter-spacing: .15px; } .pick-row .pick-val { flex: none; font-size: 17px; line-height: 22px; letter-spacing: -.4px; color: var(--link); } /* ── Выбор из списка (макеты 2839:18960 и 2839:18920) ────────────────────── Родной