/* * Гостевое приложение клуба. * * Единственный лист гостя: /assets/styles.css принадлежал первой админке и * удалён вместе с ней. Здесь только то, что видит гость, и ничего сверх * docs/guest-design-language.md. * * Имени платформы тут быть не должно ни в одной строке, включая комментарии: * лист отдаётся гостям каждого клуба как есть. */ /* ─── шрифты ────────────────────────────────────────────────────────────── * Tektur — техно-гротеск для заголовков и цифр, Onest — текст. Оба лежат * рядом, никаких обращений наружу: приложение открывается внутри Telegram и * VK, где чужой домен может и не ответить. */ @font-face { font-family: "Onest"; src: url("/saas/onest-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Tektur"; src: url("/saas/tektur-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Tektur"; src: url("/saas/tektur-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ─── токены ─────────────────────────────────────────────────────────────── */ :root { color-scheme: dark; --font-display: "Tektur", "Onest", system-ui, sans-serif; --font-text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; /* * Шкала снята с макета: экран там нарисован в 288 пикселей вместо 390, то * есть в 1.354 раза мельче настоящего. Все размеры ниже — размеры макета, * умноженные на этот коэффициент, поэтому пропорции совпадают, а буквы * остаются читаемыми на живом телефоне. */ --type-display: 1.5rem; --type-h1: 1.375rem; --type-h2: 1rem; --type-h3: 1.0625rem; --type-body: 1rem; --type-small: 0.8125rem; --type-micro: 0.75rem; --type-caps: 0.6875rem; --type-figure: 1.9375rem; --type-figure-lg: 2.875rem; /* * Радиусы растут вместе с площадью: метка круглее строки, строка круглее * карточки только на глаз — на деле наоборот, и одинаковый радиус на чипе и * на герое делает мелкое раздутым, а крупное квадратным. */ --radius-xs: 8px; --radius-sm: 11px; --radius-md: 14px; --radius-row: 16px; --radius: 20px; --radius-lg: 24px; --radius-sheet: 28px; --radius-pill: 999px; --gutter: 16px; --content: 520px; --nav-height: 60px; --fast: 160ms; --base: 220ms; --slow: 420ms; --ease-out: cubic-bezier(0.2, 0.9, 0.2, 1); --ease-overshoot: cubic-bezier(0.3, 1.4, 0.4, 1); /* * Бренд приходит из настроек арендатора: app.js кладёт --tenant-accent и * рассчитанный по контрасту --tenant-ink инлайном на . Значения ниже — * запасные, на случай если бутстрап не доехал. */ --club: var(--tenant-accent, #5f84d5); --club-ink: var(--tenant-ink, #05070c); --club-soft: color-mix(in srgb, var(--club) 24%, transparent); /* * Акцент для мелкого текста на тёмном. Фирменный цвет клуба на подложке * даёт 2.35:1 — подпись «что нужно снять» приходилось угадывать. Осветляем * его к чернилам, сохраняя тон: на всех трёх поверхностях выходит выше 4.5. * Заливки кнопок берут чистый --club, там контраст даёт белый текст. */ --club-label: color-mix(in oklab, var(--club) 55%, var(--ink)); --canvas: #0c1017; --surface: #171d28; --surface-2: #10151d; --surface-3: #1f2635; --nav-surface: #0a0e14; --line: #232b38; --line-strong: #333d4e; --ink: #eef2f8; --ink-dim: #aab4c4; /* * Метка на карточке. В макете она на два тона темнее, но карточка светлее * фона, и там тот же цвет даёт 4.2:1 — ниже порога, за которым подпись под * заголовком читают уже по памяти. Подняли до 4.7:1 на карточке и 5.1:1 на * фоне; на глаз это тот же серый. */ --ink-faint: #78849a; --positive: #3ecf6a; --positive-soft: rgba(62, 207, 106, 0.16); --warning: #f5b544; --warning-soft: rgba(245, 181, 68, 0.18); --danger: #ff5a5f; --info: #5b8cff; /* * Раздел красит свою иконку в навигации и засечку у заголовка. Активная * вкладка-фильтр и активная иконка навигации красятся брендом: на экране * один акцент, и это цвет клуба. */ --tab-home: var(--club); --tab-quests: #5b8cff; --tab-cases: #a678ff; --tab-rating: #f5b544; --tab-profile: #8b93a7; --tab-accent: var(--club); /* * Доля цвета в подписи, лежащей на подложке того же цвета. В тёмной теме * цвет годится как есть; в светлой подложка почти белая, и тот же цвет даёт * 3.3:1 — поэтому там текст подмешивается с чёрным. */ --on-tint: 100%; /* Золото, серебро, бронза: на светлом фоне яркие версии не читаются. */ --medal-1: #f3c14b; --medal-2: #c6ccd8; --medal-3: #d18f5a; --shadow-sheet: 0 -12px 34px rgba(0, 0, 0, 0.5); } /* * Светлая тема. Макет её не рисует — он весь тёмный, — поэтому значения ниже * получены переносом ролей: холст остаётся на тон темнее карточки, колодец — * на тон темнее холста, а служебные цвета берутся в затемнённых версиях, * иначе зелёный и жёлтый на белом дают 2:1 и превращаются в украшение. */ :root[data-theme="light"] { color-scheme: light; --canvas: #f2f4f8; --surface: #ffffff; --surface-2: #eceff5; --surface-3: #e2e6ee; --nav-surface: #ffffff; --line: #dde2ec; --line-strong: #c2cad9; --ink: #0d1017; --ink-dim: #4d566a; --ink-faint: #5c6577; --positive: #12833f; --positive-soft: rgba(18, 131, 63, 0.14); --warning: #9a6400; --warning-soft: rgba(154, 100, 0, 0.16); --danger: #c02b30; --info: #2a54c8; --tab-quests: #2a54c8; --tab-cases: #6f3fd0; --tab-rating: #9a6400; --tab-profile: #5b6377; --on-tint: 68%; --medal-1: #8a6100; --medal-2: #5f6878; --medal-3: #8a4b1f; --shadow-sheet: 0 -12px 34px rgba(15, 18, 24, 0.18); } /* ─── база ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--canvas); color: var(--ink); font-family: var(--font-text); font-size: var(--type-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } h1, h2, h3, h4, p, figure, ol, ul { margin: 0; } ol, ul { padding: 0; list-style: none; } img { max-width: 100%; display: block; } a { color: var(--info); text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } /* * Указатель — у всякой кнопки, а не у той, чей компонент про это вспомнил. * Раньше правило жило в каждом блоке отдельно, и кнопка без него выглядела * как текст: на десктопе это единственный признак, что по ней можно нажать. */ button { cursor: pointer; } button:disabled { cursor: not-allowed; } :focus-visible { outline: 2px solid var(--club); outline-offset: 2px; border-radius: 4px; } /* * Поверхности, которые рисует браузер, а не мы: выделение текста, курсор ввода * и штатные переключатели. По умолчанию они синие — единственный кусок * приложения, который не знает про цвет клуба, и он выдаёт себя ровно в тот * момент, когда гость выделяет код или печатает комментарий к заявке. */ ::selection { color: var(--club-ink); background: var(--club); } input, textarea { caret-color: var(--club); } input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--club); } /* * Разметка прячет части шторки через атрибут hidden; без этого правила * display у компонента побеждает и на экране оказываются оба состояния. */ [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ─── каркас ─────────────────────────────────────────────────────────────── */ .app-shell { display: block; width: 100%; min-height: 100svh; padding-bottom: calc(var(--nav-height) + 20px + env(safe-area-inset-bottom)); } .app-view { display: block; width: min(100%, var(--content)); margin: 0 auto; padding: 0 var(--gutter); } .app-view[data-view="home"] { --tab-accent: var(--tab-home); } .app-view[data-view="quests"] { --tab-accent: var(--tab-quests); } .app-view[data-view="cases"] { --tab-accent: var(--tab-cases); } .app-view[data-view="rating"] { --tab-accent: var(--tab-rating); } .app-view[data-view="profile"], .app-view[data-view="history"], .app-view[data-view="settings"] { --tab-accent: var(--tab-profile); } .app-view[data-view="club-selection"] { --tab-accent: var(--tab-home); } /* * Ритм макета плотнее прежнего: блоки идут через 12 пикселей, а не через 24. * Экран гостя читается сверху вниз одним движением, и широкие промежутки * выталкивали ленту миссий за первый экран — до неё доходили прокруткой. */ .stack { display: grid; gap: 12px; align-content: start; } .stack-tight { display: grid; gap: 10px; align-content: start; } /* * Одноколоночным сеткам колонка объявляется явно. * * Без неё неявная колонка получает ширину `auto`, то есть max-content самого * широкого ребёнка. Горизонтальная лента миссий шириной в шесть карточек * растягивала колонку до 1080px, а вместе с ней — экран, героя и всё * остальное: страница ехала вбок, а сама лента переставала прокручиваться * внутри себя, потому что ей больше ничего не мешало. * * `minmax(0, 1fr)` разрешает колонке сжиматься ниже min-content содержимого, * и `overflow-x: auto` у ленты снова означает то, что должен. */ .stack, .stack-tight, .today, .level-card, .quest, .hot-mission, .club-option, .profile-head, .level-rail, .field, .gate, .sheet { grid-template-columns: minmax(0, 1fr); } /* ─── верхняя панель ─────────────────────────────────────────────────────── */ /* * Тема слева, клуб по центру — он же вход в смену сети и точки, — аватарка * справа ведёт в профиль. Кнопки стали скруглёнными квадратами вместо кругов: * круг рядом с круглой аватаркой читался как вторая аватарка. */ .topbar { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 11px; width: min(100%, var(--content)); margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 12px; } .topbar-place { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; } .topbar-place strong { display: flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; font-size: var(--type-h3); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .topbar-place strong svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .topbar-place small { color: var(--ink-faint); font-size: var(--type-micro); } .topbar-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-row); background: var(--surface); color: var(--ink-faint); cursor: pointer; } .topbar-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .topbar-button img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } /* ─── типографика разделов ───────────────────────────────────────────────── */ /* * Заголовки перешли с техно-гротеска капсом на обычный Onest. * * Капс Tektur был взят из референса, где заголовков по два слова: «КЛУБЫ», * «НАГРАДЫ». У нас там «Оставить честный отзыв на Яндексе» и «Перенести * бонусы в Langame» — в капсе такая строка читается по буквам и переносится * на три ряда. Tektur остаётся там, ради чего и брался: цифры и короткие * метки капсом. */ .screen-title { font-size: var(--type-h1); font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; } /* * Заголовок экрана и его счётчик стоят одной строкой: «Миссии · 22 доступны». * Отдельной строкой счётчик занимал высоту заголовка, ничего к нему не * добавляя, и первая карточка уходила ниже сгиба. */ .screen-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 2px 1px; } .screen-head .muted, .screen-head .faint { flex: none; font-size: var(--type-small); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .section-title { display: flex; align-items: center; gap: 8px; font-size: var(--type-body); font-weight: 650; } .section-link { padding: 0; border: 0; background: none; color: var(--club); font-size: var(--type-small); cursor: pointer; } .muted { color: var(--ink-dim); } .faint { color: var(--ink-faint); font-size: var(--type-small); } .eyebrow { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-micro); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } /* ─── кнопки ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); font-size: var(--type-body); font-weight: 650; text-align: center; cursor: pointer; transition: transform var(--fast) var(--ease-out), background var(--fast) linear, filter var(--fast) linear, opacity var(--fast) linear; } .btn:active:not(:disabled) { transform: scale(0.985); filter: brightness(1.08); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--club); color: var(--club-ink); } /* * Обводка второстепенной кнопки идёт внутренней тенью, а не рамкой: рамка * добавляет кнопке два пикселя высоты, и рядом с основной она вставала на * пиксель выше — в паре «Отмена / Отправить» это видно сразу. */ .btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); } .btn-quiet { justify-self: start; min-height: 36px; padding: 0 12px 0 0; border: 0; background: none; color: var(--ink-dim); font-size: var(--type-small); font-weight: 500; } .btn-block { width: 100%; min-height: 48px; } /* Кнопка внутри строки: по содержимому, а не во всю ширину. */ .btn-inline { width: auto; min-height: 36px; padding: 0 15px; border-radius: var(--radius-sm); font-size: var(--type-small); } .btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 9px; } /* Отмена занимает столько, сколько нужно слову: место отдаётся действию. */ .btn-row.is-pair { grid-template-columns: auto minmax(0, 1fr); } .btn-row.is-pair .btn-ghost { padding: 0 19px; } .btn-icon { display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--radius-row); background: var(--surface); color: var(--ink-faint); cursor: pointer; } .btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ─── метки ──────────────────────────────────────────────────────────────── */ /* * Чип перестал быть пилюлей высотой 28. * * В макете это плотная метка капсом: «ПОВТОРЯЕМАЯ», «ОТЗЫВЫ», «ЕСТЬ». Пилюля * с её высотой и скруглением читалась как кнопка, и гость жал на слово * «Выполнено» в углу карточки, ожидая, что оно что-то откроет. */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; } .chip-good { background: var(--positive-soft); color: color-mix(in srgb, var(--positive) var(--on-tint), black); } .chip-wait { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) var(--on-tint), black); } .chip-bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: color-mix(in srgb, var(--danger) var(--on-tint), black); } .chip-accent { background: var(--club-soft); color: var(--ink-dim); } .chip-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Нажимаемый чип — только тот, что ведёт в раздел. */ button.chip { border: 0; cursor: pointer; } /* ─── карточки и плитки ──────────────────────────────────────────────────── */ .card { padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .card-inset { border-color: var(--line); background: var(--surface-2); } .card-center { display: grid; justify-items: center; gap: 6px; text-align: center; } /* * Ряд кнопок в такой карточке тянется во всю ширину. `justify-items: center` * сжимал его до содержимого, а `auto-fit` внутри делил уже нулевую ширину на * две колонки — кнопки складывались одна на другую. */ .card-center > .btn-row, .card-center > .btn { justify-self: stretch; width: 100%; } .tile-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tile { display: grid; align-content: start; gap: 4px; min-height: 84px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer; } .tile span { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); letter-spacing: 0.08em; text-transform: uppercase; } .tile strong { font-family: var(--font-display); font-size: var(--type-figure); font-weight: 650; line-height: 1; letter-spacing: -0.03em; } /* * Три цифры в ряд: приглашено / активировано / в процессе, бонусы / XP / в * Langame. Волоски между ними, а не рамки вокруг: три отдельные карточки в * ряд на 390 пикселях оставляют по двенадцать символов на подпись. */ .figure-strip { display: grid; grid-auto-flow: column; /* 1fr не сжимается ниже min-content, а подписи под цифрами длинные. */ grid-auto-columns: minmax(0, 1fr); padding: 13px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .figure-strip > div { display: grid; justify-items: center; gap: 3px; padding: 0 8px; border-left: 1px solid var(--line); } .figure-strip > div:first-child { border-left: 0; } .figure-strip strong { font-family: var(--font-display); font-size: var(--type-figure); font-weight: 650; line-height: 1; letter-spacing: -0.03em; } .figure-strip strong i { color: var(--ink-faint); font-size: 0.55em; font-style: normal; } .figure-strip span { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); letter-spacing: 0.07em; text-align: center; text-transform: uppercase; } /* ─── фильтры-вкладки ──────────────────────────────────────────────────────── * Лента вкладок листается пальцем и мышью: полосы прокрутки нет ни на одной * платформе — она забирала восемь пикселей высоты и на телефоне всё равно не * показывалась. Что лента продолжается, говорит растворённый правый край; * мышью её тащит app.js, поэтому под курсором она берёт руку. */ .tabs { display: flex; gap: 7px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .tabs::-webkit-scrollbar { display: none; } /* Маска и рука появляются, только когда за краем что-то есть. */ .tabs.is-overflowing { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } @media (hover: hover) and (pointer: fine) { .tabs.is-overflowing { cursor: grab; } } /* * Пока ленту тащат, текст не выделяется и вкладка не подсвечивается: иначе * протаскивание оставляет за собой синюю выделенную полосу. */ .tabs.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .tabs.is-dragging button { pointer-events: none; } .tabs button { flex: none; min-height: 34px; padding: 0 11px; border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-micro); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background var(--fast) linear, color var(--fast) linear; } .tabs button[aria-selected="true"] { background: var(--club); color: var(--club-ink); } /* Вкладка «Новые» подсвечена, пока в ней что-то есть. */ .tabs button.is-fresh:not([aria-selected="true"]) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); } /* ─── карусель ───────────────────────────────────────────────────────────── * Пальцем лента листается сама; мышью — нет, а внутри Telegram Desktop * приложение открывается именно мышью. Поэтому там, где есть указатель, * у ленты появляется тонкий скроллбар, а app.js добавляет протаскивание. */ .rail { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } @media (hover: hover) and (pointer: fine) { .rail { padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .rail::-webkit-scrollbar { display: block; height: 6px; } .rail::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--line-strong); } .rail::-webkit-scrollbar-track { background: transparent; } } .rail > * { flex: 0 0 auto; scroll-snap-align: start; } /* Пока ленту тянут, клик по карточке не должен срабатывать. */ .rail.is-dragging { scroll-snap-type: none; cursor: grabbing; } .rail.is-dragging > * { pointer-events: none; } /* ─── строки-списки ──────────────────────────────────────────────────────── */ .rows { display: grid; gap: 9px; } .row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; width: 100%; min-height: 56px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--surface); color: inherit; font-size: var(--type-body); text-align: left; cursor: pointer; } .row:not(:has(> svg)) { grid-template-columns: minmax(0, 1fr) auto auto; } .row:disabled { cursor: default; } .row > svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-faint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .row-copy { display: grid; gap: 1px; min-width: 0; } .row-copy strong { overflow: hidden; font-size: var(--type-body); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .row-copy small { color: var(--ink-faint); font-size: var(--type-micro); } .row-value { color: var(--ink-dim); font-size: var(--type-small); text-align: right; } .row-chevron { width: 8px; height: 8px; border-top: 2px solid var(--ink-faint); border-right: 2px solid var(--ink-faint); transform: rotate(45deg); } /* ─── поля ───────────────────────────────────────────────────────────────── */ .field { display: grid; gap: 6px; } .field > span { color: var(--ink-dim); font-size: var(--type-small); } .field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); } .field textarea { min-height: 92px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field-hint { color: var(--ink-faint); font-size: var(--type-small); } .switch { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--line); cursor: pointer; } .switch:first-child { border-top: 0; } .switch-copy { display: grid; gap: 1px; } .switch-copy small { color: var(--ink-faint); font-size: var(--type-small); } .switch input { position: absolute; opacity: 0; pointer-events: none; } .switch i { position: relative; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--surface-3); transition: background var(--fast) linear; } .switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-dim); transition: transform var(--base) var(--ease-out), background var(--fast) linear; } .switch input:checked + i { background: color-mix(in srgb, var(--club) 55%, transparent); } .switch input:checked + i::after { background: var(--club); transform: translateX(18px); } .switch input:focus-visible + i { outline: 2px solid var(--club); outline-offset: 2px; } /* ─── герой главной ──────────────────────────────────────────────────────── */ /* * Шапка и баланс — один блок во всю ширину экрана, а не полоса над карточкой. * Две вложенные рамки на первом экране читались как коробка в коробке, и * баланс — то, ради чего приложение открывают, — оказывался внутри второй. * * Внутри всё, что было в шапке: аватарка ведёт в профиль, клуб со стрелкой — * в смену сети и точки, луна меняет тему, колокольчик с точкой — новые * начисления. Справа арт бренда; клубу без арта остаётся знак водяным. */ .hero { position: relative; overflow: hidden; margin: 0 calc(var(--gutter) * -1); padding: calc(14px + env(safe-area-inset-top)) 18px 20px; border-radius: 0 0 var(--radius-sheet) var(--radius-sheet); min-height: 200px; background: radial-gradient(130% 110% at 84% 6%, var(--club-soft), transparent 62%), linear-gradient(180deg, var(--surface), var(--canvas)); } .hero-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; } .hero-avatar { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--club); cursor: pointer; overflow: hidden; } .hero-avatar img { width: 100%; height: 100%; object-fit: cover; } .hero-who { display: grid; flex: 1; gap: 1px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } .hero-who b { overflow: hidden; font-size: var(--type-body); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .hero-who small { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink-faint); font-size: var(--type-small); } .hero-who small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-who small svg { flex: none; width: 15px; height: 15px; } /* Точка статуса клуба: открыт — зелёная, закрыт — приглушённая. */ .hero-live { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--positive); } .hero-live.is-closed { background: var(--ink-faint); } .hero-action { position: relative; display: grid; place-items: center; flex: none; width: 35px; height: 35px; padding: 0; border: 0; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-dim); cursor: pointer; } .hero-action svg { width: 18px; height: 18px; } .hero-action .dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--club); box-shadow: 0 0 0 2px var(--surface); } .hero-body { position: relative; z-index: 1; margin-top: 24px; } .hero-balance { color: var(--positive); font-family: var(--font-display); font-size: var(--type-figure-lg); font-weight: 650; line-height: 1; letter-spacing: -0.04em; } .hero-caption { margin-top: 5px; color: var(--ink-faint); font-size: var(--type-small); } /* Что ждёт гостя прямо сейчас: открытия кейсов, заявки, резерв. */ .hero-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; /* Арт занимает правую треть блока — метки под него не заезжают. */ padding-right: 118px; } .hero-name { margin-top: 14px; font-size: var(--type-h1); font-weight: 650; } /* * Арт уходит под правый край и растворяется к центру: карточка под ним всё * равно начинается сразу, и жёсткая граница картинки резала бы блок пополам. */ .hero-art { position: absolute; right: -8px; bottom: 0; z-index: 0; width: 133px; height: 171px; background-position: 46% top; background-size: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 26%, #000); mask-image: linear-gradient(to right, transparent, #000 26%, #000); } /* Знак бренда — запасной вариант для клуба, который арт не загрузил. */ .hero-mark { position: absolute; right: -14px; bottom: -18px; z-index: 0; width: 148px; height: 148px; opacity: 0.09; object-fit: contain; } /* ─── «сегодня»: отметка дня и горячая миссия ────────────────────────────── */ .today { display: grid; gap: 0; } .today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .today-head b { font-size: var(--type-body); font-weight: 650; } .today-count { color: var(--positive); font-family: var(--font-display); font-size: var(--type-body); font-weight: 650; } /* * Семь ячеек в ряд. Раньше в каждой стояла цифра дня и обещанная награда: * на 390 пикселях это 44 пикселя на ячейку, куда «кейс» не помещался. Ряд * отвечает на один вопрос — сколько дней собрано, — а награда ушла строкой * ниже. */ .checkin-days { display: flex; gap: 5px; margin-top: 10px; } .checkin-days i { flex: 1; height: 22px; border-radius: 7px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); } .checkin-days i.done { background: var(--positive-soft); box-shadow: inset 0 0 0 1px var(--positive); } .checkin-days i.current:not(.done) { box-shadow: inset 0 0 0 1px var(--club); } .today-note { margin-top: 7px; color: var(--ink-faint); font-size: var(--type-small); } .today .btn { margin-top: 12px; } .today-done { margin-top: 12px; } .hot-mission { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent); border-radius: var(--radius-row); background: color-mix(in srgb, var(--warning) 10%, transparent); } .hot-mission .eyebrow { color: color-mix(in srgb, var(--warning) var(--on-tint), black); } .hot-mission strong { font-size: var(--type-h3); font-weight: 650; } /* ─── строка «что сделать сейчас» ────────────────────────────────────────── */ /* * Единственная строка на главной, которая говорит, что делать прямо сейчас: * пока профиль не собран — следующий шаг, дальше — ближайшая миссия. В * макете её нет, поэтому собрана из его же частей: карточка, значок в * скруглённом квадрате, заголовок, подпись и одна кнопка. */ .next-action { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .next-action-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--club-soft); color: var(--club); } .next-action-mark svg { width: 18px; height: 18px; } .next-action-copy { display: grid; gap: 2px; min-width: 0; } .next-action-copy > span { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } .next-action-copy strong { font-size: var(--type-h3); font-weight: 650; } .next-action-copy small { color: var(--ink-faint); font-size: var(--type-small); line-height: 1.45; } .next-action .btn, .next-action-buttons { grid-column: 1 / -1; margin-top: 3px; } .next-action-buttons { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; } /* ─── карточка миссии ────────────────────────────────────────────────────── */ /* * Карточка миссии: обложка под срез правого края, награда на ней. * * Раньше картинка стояла квадратом 56px слева и делила строку с названием. * На таком размере она не отвечала ни на один вопрос — три отзыва выглядели * одинаково, — а награда терялась справа мелкой строкой. Теперь обложка * крупная и обрезана краем, а число на её тёмной части самое заметное. */ .quest { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); min-height: 171px; align-content: start; } .quest-art { position: absolute; z-index: -1; right: -12px; top: 4px; bottom: 46px; width: 165px; object-fit: contain; object-position: right center; -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000); mask-image: linear-gradient(to right, transparent, #000 16%, #000); pointer-events: none; } /* * Обложки нарисованы графитом под тёмный фон: там их приходится подсвечивать, * иначе предмет сливается с карточкой. На светлой теме тот же подъём делает * его выцветшим, поэтому там наоборот — добавляем контраст. */ :root[data-theme="dark"] .quest-art { filter: brightness(1.22) contrast(1.06); } :root[data-theme="light"] .quest-art { filter: contrast(1.12) saturate(0.9); } /* * Метка периодичности. Яркая плашка вместо строчки мелким шрифтом: это * единственное, что отличает ежедневную миссию от разовой на беглый взгляд. */ .quest-badge { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 6px 9px; border-radius: var(--radius-xs); background: var(--positive); color: var(--canvas); font-family: var(--font-display); font-size: var(--type-micro); font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; } .quest-badge.is-wait { background: var(--warning); } .quest-badge.is-done { background: var(--surface-3); color: var(--ink-dim); } /* Заявка на проверке: обложка приглушается, чтобы карточка не звала заново. */ .quest.is-pending .quest-art { filter: saturate(0.4) opacity(0.72); } /* * Значок площадки в строке условий. Поля вокруг знака у каждого файла свои, * и правила сервисов запрещают менять пропорции — поэтому подрезаем показом: * рамка со скруглением и масштаб под конкретный файл. */ .quest-service { display: inline-grid; width: 15px; height: 15px; border-radius: 4px; overflow: hidden; vertical-align: -3px; margin-right: 6px; flex: none; } .quest-service img { width: 100%; height: 100%; object-fit: cover; display: block; } .quest-service.is-round { border-radius: 50%; } .quest-service.is-zoom img { transform: scale(1.29); } .quest-copy { display: grid; gap: 2px; min-width: 0; } .quest-copy strong { margin-top: 9px; font-size: var(--type-h3); font-weight: 650; line-height: 1.25; padding-right: 133px; } .quest-copy small { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; padding-right: 116px; display: flex; align-items: center; } /* * Награда — самое крупное на карточке, и стоит она на обложке. * * Читается за счёт подложки цветом карточки: на фоне её не видно, а там, где * под числом оказался светлый бок предмета, она растворяет картинку до того * же тона. Чёрная подложка читалась бы пятном — карточка светлее её. */ .quest-reward { position: absolute; z-index: 1; right: 62px; top: 47%; transform: translateY(-50%); font-family: var(--font-display); font-size: var(--type-figure); font-weight: 650; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; text-shadow: 0 2px 20px var(--canvas), 0 0 6px var(--canvas); } .quest-reward::before { content: ""; position: absolute; inset: -14px -22px -14px -28px; z-index: -1; background: radial-gradient( ellipse at center, var(--surface) 30%, color-mix(in srgb, var(--surface) 72%, transparent) 58%, transparent 78% ); } .quest p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 5px 0 0; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.4; padding-right: 141px; } .quest .quest-foot { margin-top: 13px; } .quest-foot { display: flex; align-items: center; gap: 8px; } .quest-foot .btn { flex: 1; } /* компактная карточка для карусели на главной */ /* * Плитка ленты на главной говорит тем же языком, что большая карточка: * обложка под срез правого края, награда крупно поверх её тёмной части. * Раньше здесь была картинка 40×40 в углу — на одном экране с новой * карточкой это читалось как два разных приложения. */ .quest-mini { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start; gap: 6px; width: 168px; min-height: 150px; padding: 12px; border: 0; border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer; } .quest-mini-art { position: absolute; z-index: -1; right: -14px; top: 6px; bottom: 6px; width: 124px; object-fit: contain; object-position: right center; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000); mask-image: linear-gradient(to right, transparent, #000 22%, #000); pointer-events: none; } :root[data-theme="dark"] .quest-mini-art { filter: brightness(1.22) contrast(1.06); } :root[data-theme="light"] .quest-mini-art { filter: contrast(1.12) saturate(0.9); } .quest-mini-place { display: flex; align-items: center; color: var(--ink-faint); font-size: var(--type-micro); letter-spacing: 0.08em; text-transform: uppercase; padding-right: 70px; } .quest-mini strong { display: -webkit-box; overflow: hidden; font-size: var(--type-small); font-weight: 600; line-height: 1.3; padding-right: 76px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* Награда лежит на тёмной части обложки — та же подложка, что в карточке. */ .quest-mini b { position: relative; width: max-content; font-family: var(--font-display); font-size: var(--type-h3); color: color-mix(in srgb, var(--positive) var(--on-tint), black); } .quest-mini b::before { content: ""; position: absolute; inset: -8px -14px -8px -16px; z-index: -1; background: radial-gradient( ellipse at center, var(--surface) 34%, transparent 76% ); } .quest-mini b { font-family: var(--font-display); font-size: var(--type-h3); color: color-mix(in srgb, var(--positive) var(--on-tint), black); } /* ─── клуб ───────────────────────────────────────────────────────────────── */ .visit-series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .visit-step { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); } .visit-step i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-small); font-style: normal; } .visit-step b { font-family: var(--font-display); font-size: var(--type-small); color: var(--ink-dim); } .visit-step.done { border-color: transparent; background: color-mix(in srgb, var(--positive) 12%, transparent); } .visit-step.done i { background: color-mix(in srgb, var(--positive) 24%, transparent); color: color-mix(in srgb, var(--positive) var(--on-tint), black); } .visit-step.done b { color: color-mix(in srgb, var(--positive) var(--on-tint), black); } .visit-step.current { border-color: var(--club); } .club-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .club-meta div { display: grid; gap: 2px; min-width: 0; } .club-meta span { color: var(--ink-faint); font-size: var(--type-small); } .club-meta strong { overflow: hidden; font-size: var(--type-small); font-weight: 500; text-overflow: ellipsis; } /* список клубов (выбор точки и соседние точки сети) */ .club-option { display: grid; gap: 8px; width: 100%; padding: 14px 16px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; } .club-option:first-child { border-top: 0; } .club-option[aria-pressed="true"] { background: color-mix(in srgb, var(--club) 12%, transparent); } .club-option-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .club-option-head strong { font-family: var(--font-display); font-size: var(--type-h3); letter-spacing: 0.04em; text-transform: uppercase; } .club-option small { display: block; color: var(--ink-faint); font-size: var(--type-small); } .club-option .btn { justify-self: start; margin-top: 4px; } /* ─── рейтинг ────────────────────────────────────────────────────────────── */ /* Итог прошлой недели показывается только тому, кто в неё попал в призы. */ .rank-season-result { display: grid; gap: 2px; border-color: var(--club); } .rank-season-result b { color: var(--club); } .rank-season-result small { color: var(--ink-dim); } .rank-prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .rank-prize { display: grid; gap: 3px; padding: 11px 8px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; } .rank-prize b { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .rank-prize strong { color: var(--positive); font-family: var(--font-display); font-size: var(--type-body); font-weight: 650; } .rank-prize.place-1 { box-shadow: inset 0 0 0 1px var(--warning); } .rank-prize.place-1 strong { color: var(--medal-1); } .rank-prize.place-2 strong { color: var(--medal-2); } .rank-prize.place-3 strong { color: var(--medal-3); } .rank-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--surface); } .rank-row:first-child { border-top: 0; } .rank-row.is-me { border-color: var(--club); } .rank-place { flex: none; width: 22px; color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-small); font-weight: 700; text-align: center; } .rank-avatar { display: grid; place-items: center; flex: none; width: 35px; height: 35px; overflow: hidden; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-dim); font-family: var(--font-display); font-size: var(--type-micro); font-weight: 700; } .rank-avatar img { width: 100%; height: 100%; object-fit: cover; } .rank-row.is-me .rank-avatar { background: var(--club); box-shadow: none; color: var(--club-ink); } .rank-row.place-1 .rank-avatar { box-shadow: 0 0 0 2px var(--medal-1); } .rank-row.place-2 .rank-avatar { box-shadow: 0 0 0 2px var(--medal-2); } .rank-row.place-3 .rank-avatar { box-shadow: 0 0 0 2px var(--medal-3); } .rank-row.place-1 .rank-place { color: var(--medal-1); } .rank-row.place-2 .rank-place { color: var(--medal-2); } .rank-row.place-3 .rank-place { color: var(--medal-3); } .rank-player { display: grid; gap: 1px; min-width: 0; } .rank-player strong { overflow: hidden; font-size: var(--type-body); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .rank-player small { color: var(--ink-faint); font-size: var(--type-micro); } .rank-score { flex: none; color: var(--positive); font-family: var(--font-display); font-size: var(--type-small); font-weight: 650; } /* ─── профиль ────────────────────────────────────────────────────────────── */ .profile-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; } .profile-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2); object-fit: cover; } .profile-name { overflow: hidden; font-size: var(--type-h3); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .profile-handle { color: var(--ink-faint); font-size: var(--type-small); } .level-card { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .level-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; } .level-mark { display: grid; place-items: center; min-width: 44px; height: 30px; padding: 0 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--club) 20%, transparent); /* * Номер уровня набран основным цветом текста: подложка уже фирменная, и * фирменный цвет поверх неё давал 3.9:1 — ниже порога для мелкого текста. */ color: var(--ink); font-family: var(--font-display); font-size: var(--type-small); font-weight: 600; } .level-head strong { font-family: var(--font-display); font-size: var(--type-h3); letter-spacing: 0.04em; text-transform: uppercase; } .level-head b { font-family: var(--font-display); font-size: var(--type-h3); color: var(--ink-dim); } .xp-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; } /* * Заполнение рисуется во всю ширину и сжимается по X: анимировать transform * дешевле, чем width, и полоса не дёргает раскладку соседей. */ .xp-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--club); transform: scaleX(var(--fill, 0)); transform-origin: left center; transition: transform var(--slow) var(--ease-out); } .level-rail { display: grid; gap: 2px; } .level-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .level-step:first-child { border-top: 0; } .level-step i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-small); font-style: normal; } .level-step.is-unlocked i { background: color-mix(in srgb, var(--positive) 20%, transparent); color: color-mix(in srgb, var(--positive) var(--on-tint), black); } .level-step.is-current { color: var(--ink); } .level-step small { color: var(--ink-faint); font-size: var(--type-small); } /* достижения сеткой, как «НАГРАДЫ» в референсе */ /* * Достижений у клуба пять по умолчанию, и в четыре колонки последнее * оставалось одно в строке. Колонка задаётся минимальной шириной: пять * значков встают в ряд на телефоне и не расползаются на широком экране. */ .badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 12px 8px; } .badge-cell { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; font-size: var(--type-caps); line-height: 1.3; } .badge-mark { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--surface); color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-small); } /* * Загруженная картинка достижения. Закрытое — приглушено, как и было с * галочками: сетка должна с одного взгляда показывать, что уже собрано. */ .badge-mark img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; filter: grayscale(1); transition: opacity var(--fast) linear, filter var(--fast) linear; } .badge-cell.is-unlocked .badge-mark img { opacity: 1; filter: none; } /* Счётчик поверх картинки: без подложки он тонет в любом рисунке. */ .badge-count { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 999px; color: var(--ink-dim); background: color-mix(in srgb, var(--surface) 88%, transparent); font-family: var(--font-display); font-size: var(--type-micro); } .badge-cell.has-art .badge-mark { border-color: transparent; } .badge-cell.is-unlocked .badge-mark { border-color: transparent; background: color-mix(in srgb, var(--tab-accent) 18%, transparent); color: color-mix(in srgb, var(--tab-accent) var(--on-tint), black); } .badge-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .badge-cell span { display: -webkit-box; overflow: hidden; color: var(--ink-faint); font-size: var(--type-micro); line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .badge-cell.is-unlocked span { color: var(--ink-dim); } /* ─── тема ──────────────────────────────────────────────────────────────── */ .theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--surface); } .theme-copy { display: grid; gap: 1px; } .theme-copy strong { font-size: var(--type-body); font-weight: 650; } .theme-copy small { color: var(--ink-faint); font-size: var(--type-small); } .theme-switch { display: flex; flex: none; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-2); } .theme-switch button { display: grid; place-items: center; width: 34px; height: 28px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink-faint); cursor: pointer; transition: background var(--fast) linear, color var(--fast) linear; } .theme-switch button.is-on { background: var(--club); color: var(--club-ink); } .theme-switch svg { width: 15px; height: 15px; } /* Код приглашения: его диктуют вслух, поэтому он крупный и разрежен. */ .referral-code { color: var(--club); font-family: var(--font-display); font-size: var(--type-figure); font-weight: 650; letter-spacing: 0.12em; } /* ─── история ────────────────────────────────────────────────────────────── */ .history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 3px; border-bottom: 1px solid var(--line); } .history-row:last-child { border-bottom: 0; } /* * Миниатюры из строк убраны. Обложка задания на 52 пикселя отвечала на * вопрос «какое это задание», но в истории вопрос другой — «сколько и * когда», — и картинка только оттесняла сумму к краю. */ .history-row img { display: none; } .history-row img { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-2); object-fit: cover; } .history-copy { display: grid; gap: 1px; min-width: 0; } .history-copy strong { overflow: hidden; font-size: var(--type-body); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .history-copy small { color: var(--ink-faint); font-size: var(--type-micro); } .history-amount { flex: none; color: var(--ink-dim); font-family: var(--font-display); font-size: var(--type-body); font-weight: 650; } .history-amount.good { color: color-mix(in srgb, var(--positive) var(--on-tint), black); } .history-amount.bad { color: color-mix(in srgb, var(--danger) var(--on-tint), black); } .history-amount.wait { color: color-mix(in srgb, var(--warning) var(--on-tint), black); } /* ─── кейсы ──────────────────────────────────────────────────────────────── */ /* * Строка каталога кейсов: обложка, название с составом и одна кнопка. * * Плитки в три колонки помещали в 100 пикселей ширины и название, и цену, и * счётчик оплаченных открытий — читалось только название. Строкой всё это * помещается в одну линию, а кнопка называет цену словами. */ .case-row { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .case-row[data-ready="true"] { border-color: var(--club); box-shadow: 0 0 0 1px var(--club-soft); } .case-row-art { flex: none; width: 51px; height: 51px; border-radius: var(--radius-md); background: var(--surface-2); object-fit: contain; } .case-row-copy { display: grid; gap: 2px; min-width: 0; } .case-row-copy strong { font-size: var(--type-body); font-weight: 650; } .case-row-copy small { color: var(--ink-faint); font-size: var(--type-micro); } /* Счётчик оплаченных открытий стоит перед кнопкой — он объясняет её надпись. */ .case-row-count { min-width: 24px; padding: 3px 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--positive) 18%, transparent); color: var(--positive); font-family: var(--font-display); font-size: var(--type-micro); text-align: center; } .case-row-act { min-height: 36px; padding: 0 14px; font-size: var(--type-small); white-space: nowrap; } /* Заголовок экрана прокрута: какой кейс открываем и сколько оплачено. */ .case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .case-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--type-h2); } .case-head span { color: var(--ink-faint); font-size: var(--type-small); } .case-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .case-tier { display: grid; gap: 6px; } .case-tier-select { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; cursor: pointer; } .case-tier[data-active="true"] .case-tier-select { border-color: var(--tab-accent); background: color-mix(in srgb, var(--tab-accent) 12%, transparent); } .case-tier-select img { width: 48px; height: 48px; object-fit: contain; } .case-tier-select span { font-family: var(--font-display); font-size: var(--type-micro); letter-spacing: 0.08em; text-transform: uppercase; } .case-tier-select strong { font-family: var(--font-display); font-size: var(--type-h3); } .case-tier-buy { min-height: 34px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-dim); font-size: var(--type-micro); font-weight: 600; cursor: pointer; } .case-tier-buy:disabled { opacity: 0.5; cursor: not-allowed; } /* * Геометрия барабана связана с константами в app.js: ширина элемента 112, * зазор 10, левое поле 14. Менять только вместе с ними, иначе выигрыш * останавливается мимо маркера. */ .case-window { position: relative; min-height: 186px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .case-window::before, .case-window::after { content: ""; position: absolute; z-index: 4; top: 0; bottom: 0; width: 56px; pointer-events: none; } .case-window::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); } .case-window::after { right: 0; background: linear-gradient(270deg, var(--surface), transparent); } .case-marker { position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--tab-accent); transform: translateX(-50%); } .case-marker::before, .case-marker::after { content: ""; position: absolute; left: 50%; border: 6px solid transparent; transform: translateX(-50%); } .case-marker::before { top: 0; border-top-color: var(--tab-accent); } .case-marker::after { bottom: 0; border-bottom-color: var(--tab-accent); } .case-reel { display: flex; gap: 10px; width: max-content; padding: 14px 0 14px 14px; transform: translate3d(var(--case-offset, 0px), 0, 0); will-change: transform; } .case-reel.spinning { transition: transform var(--case-duration, 4.2s) cubic-bezier(0.12, 0.72, 0.16, 1); } .case-item { display: grid; flex: 0 0 112px; align-content: start; gap: 6px; min-height: 158px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; } .case-item.winner { border-color: var(--tab-accent); background: color-mix(in srgb, var(--tab-accent) 14%, transparent); } .case-item strong { min-height: 30px; font-size: var(--type-micro); line-height: 1.2; overflow-wrap: anywhere; } .case-item > span { color: var(--ink-faint); font-size: var(--type-micro); } .case-result { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--tab-accent) 34%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--tab-accent) 10%, transparent); } .case-result span { color: var(--ink-faint); font-size: var(--type-micro); letter-spacing: 0.1em; text-transform: uppercase; } .case-result strong { font-family: var(--font-display); font-size: var(--type-h3); } .case-result p { color: var(--ink-dim); font-size: var(--type-small); } .prize-art { display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-3); overflow: hidden; } .prize-art img { width: 100%; height: 100%; object-fit: contain; } .prize-art.reel { min-height: 84px; } .prize-art.thumb { width: 72px; height: 72px; } .prize-art.history { width: 40px; height: 40px; } .prize-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .prize-grid .prize-art { aspect-ratio: 1; } .inventory-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--surface); } .inventory-row:first-child { border-top: 0; } .inventory-row .prize-art { width: 56px; height: 56px; } /* ─── экраны-ворота ──────────────────────────────────────────────────────── */ .gate { display: grid; align-content: center; gap: 24px; width: min(100%, var(--content)); min-height: 100svh; margin: 0 auto; padding: 40px var(--gutter) calc(40px + env(safe-area-inset-bottom)); text-align: center; } .gate::before { content: ""; position: fixed; z-index: -1; inset: 0; background: radial-gradient( 90% 56% at 50% 0%, color-mix(in srgb, var(--club) 30%, transparent), transparent 68% ); pointer-events: none; } .gate-mark { justify-self: center; width: 72px; height: 72px; object-fit: contain; } /* Логотип-надпись шире, чем высок, и в квадрат его загонять нельзя. */ .gate-wordmark { justify-self: center; width: auto; max-width: 200px; height: 34px; object-fit: contain; } .gate-wordmark.on-light { display: none; } :root[data-theme="light"] .gate-wordmark.on-dark { display: none; } :root[data-theme="light"] .gate-wordmark.on-light { display: block; } .gate h1 { font-family: var(--font-display); font-size: var(--type-display); font-weight: 600; letter-spacing: 0.03em; line-height: 1.05; text-transform: uppercase; } .gate p { color: var(--ink-dim); } .gate-actions { display: grid; gap: 8px; } .gate-note { color: var(--ink-faint); font-size: var(--type-small); } .gate .rows, .gate .card { text-align: left; } .brand-choice { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-align: left; cursor: pointer; } .brand-choice img { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: contain; } .brand-choice strong { font-family: var(--font-display); font-size: var(--type-h3); letter-spacing: 0.04em; text-transform: uppercase; } .brand-choice small { display: block; color: var(--ink-faint); font-size: var(--type-small); } /* ─── нижняя навигация ───────────────────────────────────────────────────── */ /* * Пять значков без подписей. Активный отличается формой — контур сменяется * заливкой — и цветом клуба; раньше каждый раздел красился своим цветом, и * внизу экрана горела радуга из пяти акцентов, спорящая с брендом. * * Панель непрозрачная: полупрозрачная с размытием на слабых телефонах внутри * Telegram роняет прокрутку на весь экран, а выигрывает только видом. */ .bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; align-items: center; width: min(100%, var(--content)); height: calc(var(--nav-height) + env(safe-area-inset-bottom)); margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--nav-surface); } .bottom-nav button { display: grid; place-items: center; min-height: 44px; border: 0; background: none; color: var(--ink-faint); cursor: pointer; transition: color var(--base) ease; } .bottom-nav button svg { width: 24px; height: 24px; transition: transform var(--base) ease; } .bottom-nav button[aria-current="page"] { color: var(--club); } .bottom-nav button[aria-current="page"] svg { transform: translateY(-1px) scale(1.08); } /* ─── шторки ─────────────────────────────────────────────────────────────── */ .sheet-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; align-items: end; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px); animation: fade-in var(--base) var(--ease-out); } .sheet { display: grid; gap: 16px; width: min(100%, var(--content)); max-height: 88svh; margin: 0 auto; gap: 12px; padding: 13px var(--gutter) calc(18px + env(safe-area-inset-bottom)); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--surface); box-shadow: var(--shadow-sheet); overflow-y: auto; animation: sheet-up var(--slow) var(--ease-out); } .sheet-grip { justify-self: center; width: 34px; height: 4px; border-radius: var(--radius-pill); background: var(--line-strong); } .sheet-head { display: grid; gap: 2px; } .sheet-head span { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } .sheet-head h2 { font-size: var(--type-display); font-weight: 650; line-height: 1.15; } .file-picker { display: grid; gap: 8px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; cursor: pointer; } .file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; } .file-picker small { color: var(--ink-faint); font-size: var(--type-small); } .file-picker.selected { border-style: solid; border-color: var(--positive); } .file-picker-preview { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; text-align: left; } .file-picker-preview img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; } /* ─── тост, баннер, пустые состояния ─────────────────────────────────────── */ .toast { position: fixed; bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom)); left: 50%; z-index: 50; display: flex; align-items: center; gap: 10px; width: min(calc(100% - 32px), calc(var(--content) - 32px)); padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-row); background: var(--surface); color: var(--ink); font-size: var(--type-small); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); transform: translateX(-50%); animation: toast-in var(--base) var(--ease-out); } .toast i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--info); } .toast.success i { background: var(--positive); } .toast.error i { background: var(--danger); } .banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(calc(100% - var(--gutter) * 2), var(--content)); margin: 0 auto 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--surface); color: var(--ink-dim); font-size: var(--type-small); } .banner::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); } .banner.is-error::before { background: var(--danger); } .banner.is-loading::before { background: var(--info); } .empty { display: grid; justify-items: center; gap: 10px; padding: 28px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; } .empty svg { width: 40px; height: 40px; fill: none; stroke: var(--ink-faint); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .empty strong { font-size: var(--type-h3); } .empty p { max-width: 34ch; color: var(--ink-dim); font-size: var(--type-small); } /* ─── скелетоны ──────────────────────────────────────────────────────────── */ /* * Заглушка повторяет геометрию того, что грузится, а не абстрактные полоски: * когда данные приедут, экран не перестроится. Блик по ней идёт тем же * правилом, что и по кнопке отправки, — он в разделе движения. */ .skeleton { border-radius: var(--radius-row); } .skeleton-hero { height: 30svh; border-radius: var(--radius); } .skeleton-card { height: 96px; border-radius: var(--radius); } .skeleton-row { height: 64px; border-radius: var(--radius-row); } /* ─── тост ───────────────────────────────────────────────────────────────── */ @keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } } /* ─── широкий экран ──────────────────────────────────────────────────────── */ @media (min-width: 640px) { :root { --gutter: 20px; } .bottom-nav { border-right: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; } } /* * Приглашение ответить про возраст. Раньше этот вопрос занимал весь первый * экран и отсекал три четверти пришедших; теперь он полосой над содержимым — * заметен, но не запирает. */ .age-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 13px 16px; text-align: left; border: 1px solid color-mix(in srgb, var(--club) 45%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--club) 12%, var(--surface)); color: var(--ink); cursor: pointer; transition: border-color var(--base) var(--ease-out), background var(--base) var(--ease-out); } .age-banner > span:first-child { display: grid; gap: 2px; min-width: 0; } .age-banner strong { font-size: 0.98rem; } .age-banner small { color: var(--ink-dim); } .age-banner__go { font-size: 1.2rem; color: var(--club); transition: transform var(--base) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .age-banner:hover { border-color: var(--club); background: color-mix(in srgb, var(--club) 18%, var(--surface)); } .age-banner:hover .age-banner__go { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .age-banner, .age-banner__go { transition: none; } .age-banner:hover .age-banner__go { transform: none; } } /* * Второе разрешение ВК: состояние и кнопки рядом с ним. Строка живёт внутри * переключателя, поэтому кнопки не должны выглядеть как ещё один тумблер. */ .switch-copy small.ok { color: var(--positive); } .switch-copy small.warn { color: var(--warning); } .switch-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; } .switch-actions .btn-quiet { padding: 6px 10px; font-size: 0.85rem; text-decoration: none; } /* Главное действие в строке канала: разрешить — не то же, что перепроверить. */ .switch-actions .btn-quiet.strong { color: var(--club-ink); background: var(--club); border-radius: var(--radius-pill); } /* ─── движение ───────────────────────────────────────────────────────────── */ /* * Двенадцать правил на всё приложение. Каждое привязано к действию, а не к * украшению: если анимацию убрать, экран теряет смысл, а не блеск. Всё * гаснет при `prefers-reduced-motion` — блок в конце файла. * * 1. Появление экрана — в app.js: блоки поднимаются со ступенькой 60 мс. */ /* 2. Отклик на касание. Подтверждает нажатие раньше, чем придёт ответ сервера. */ .btn, .row, .club-option, .quest, .case-row, .rank-row, .topbar-button, .topbar-place, .hero-action, .hero-who, .hero-avatar { transition: transform var(--fast) var(--ease-out), filter var(--fast) ease; } .btn:active:not(:disabled), .row:active, .club-option:active, .topbar-button:active, .topbar-place:active, .hero-action:active, .hero-who:active, .hero-avatar:active { transform: scale(0.985); filter: brightness(1.08); } /* * 3. Зов к действию: мягкое кольцо раз в 2.6 секунды у единственной кнопки, * которую ждут сегодня. Больше одной такой на экране быть не может — иначе * это не зов, а мигающая витрина. */ .btn.is-calling { animation: call 2600ms ease-out infinite; } @keyframes call { 0%, 70%, 100% { box-shadow: 0 0 0 0 transparent; } 12% { box-shadow: 0 0 0 0 var(--club-soft); } 40% { box-shadow: 0 0 0 9px transparent; } } /* Кнопка возврата в шапке экрана: Battlepass открывается поверх миссий. */ .screen-head.has-back { align-items: center; justify-content: flex-start; } .screen-head.has-back .screen-title { margin-left: 4px; } .screen-back { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; border: 0; border-radius: var(--radius-pill); color: var(--ink); background: none; transition: background var(--fast) linear; } .screen-back:hover { background: var(--surface-2); } /* * Одна стрелка на пустом месте не говорит, куда она вернёт: рядом с заголовком * «Battlepass» её читают как часть заголовка. Подпись снимает вопрос. */ .screen-back--labelled { gap: 4px; grid-auto-flow: column; width: auto; height: 38px; margin-left: 0; padding: 0 13px 0 9px; border: 1px solid var(--line); color: var(--ink-faint); background: var(--surface); font-size: var(--type-small); font-weight: 700; } .screen-back--labelled:hover { color: var(--ink); background: var(--surface-2); } /* * Вход в Battlepass наверху «Миссий». Карточка обязана звать нажать, поэтому * живёт по правилам карточки миссии: тот же радиус, тот же отклик на нажатие, * живая полоса лимита и прямое действие в подписи. */ /* * Обложка сезона. Единственный блок в «Миссиях», который должен работать как * витрина, а не как строка списка: имя раздела набрано крупно, арт клуба * выходит за правый край, полоса недели и одна кнопка внизу. Цвет берётся у * бренда — платформа белого лейбла, и золото одного клуба было бы чужим у * другого. */ .battlepass-cover { position: relative; isolation: isolate; overflow: hidden; display: block; width: 100%; min-height: 232px; padding: 0; text-align: left; border: 1px solid color-mix(in srgb, var(--club) 46%, var(--line)); border-radius: var(--radius-lg); color: var(--ink); background: radial-gradient(118% 88% at 88% 8%, color-mix(in srgb, var(--club) 34%, transparent), transparent 58%), linear-gradient(160deg, color-mix(in srgb, var(--club) 12%, var(--surface)), var(--surface-2) 72%); transition: transform var(--fast) var(--ease-out), border-color var(--fast) linear, filter var(--fast) linear; } .battlepass-cover:active { transform: scale(0.985); filter: brightness(1.06); } /* Диагональные блики: две тонкие полосы под наклоном, без картинки. */ .battlepass-cover__sheen { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(104deg, transparent 46%, color-mix(in srgb, var(--club) 30%, transparent) 47.4%, transparent 48.8%), linear-gradient(104deg, transparent 58%, color-mix(in srgb, var(--club) 16%, transparent) 58.9%, transparent 60%); } /* * Арт стоит в правом нижнем углу и уходит под края: обрезанный по нижней * границе персонаж читается как часть обложки, а вписанный целиком — как * наклейка. Снизу он растворяется, чтобы не спорить с кнопкой. */ .battlepass-cover__hero { position: absolute; right: -12px; /* Кнопка — нижний край обложки, и арт заканчивается над ней: пересечённый кнопкой персонаж читается как ошибка вёрстки, а не как приём. */ bottom: 50px; z-index: 0; width: 206px; max-width: 56%; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 99%); mask-image: linear-gradient(180deg, #000 68%, transparent 99%); } .battlepass-cover__body { position: relative; z-index: 1; display: grid; gap: 5px; padding: 16px 17px 17px; } .battlepass-cover__top { display: flex; align-items: center; gap: 8px; color: var(--club-label); font-size: var(--type-micro); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .battlepass-cover__top b { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--club) 40%, var(--line)); border-radius: var(--radius-pill); color: var(--ink-faint); font-weight: 700; letter-spacing: .04em; text-transform: none; } /* * Имя раздела — самая крупная надпись экрана. Заливка градиентом по тексту * даёт металлический отлив, но цвет остаётся брендовым; если браузер не умеет * background-clip, остаётся обычный чернильный текст. */ .battlepass-cover__mark { margin-top: 3px; color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 11.5vw, 2.7rem); font-weight: 800; line-height: .96; letter-spacing: -.02em; text-transform: uppercase; background: linear-gradient(178deg, #fff 4%, color-mix(in srgb, var(--club) 34%, #fff) 46%, color-mix(in srgb, var(--club) 82%, #fff) 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .battlepass-cover__season { color: var(--ink); font-family: var(--font-display); font-size: var(--type-caps); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .battlepass-cover__facts, .battlepass-cover__pitch { max-width: 62%; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.45; } .battlepass-cover__facts { margin-top: 2px; } .battlepass-cover__pitch { margin-top: 6px; } /* Полоса живёт в текстовой колонке: пересекать арт ей незачем. */ .battlepass-cover__meter { display: grid; gap: 4px; max-width: 62%; margin-top: 12px; } .battlepass-cover__meter small { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .battlepass-cover__meter > i { margin-top: 3px; } .battlepass-cover__meter span { color: var(--ink-faint); font-size: var(--type-small); } .battlepass-cover__meter b { color: var(--ink); font-variant-numeric: tabular-nums; } .battlepass-cover__meter > i { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 12%, transparent); } /* Полоса растёт масштабом, а не шириной: ширина заставляет пересчитывать раскладку на каждый кадр, масштаб — нет. */ .battlepass-cover__meter > i b { display: block; height: 100%; width: 100%; transform: scaleX(var(--fill, 0)); transform-origin: left center; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--club) 70%, #fff), var(--club)); transition: transform 420ms var(--ease-out); } @media (prefers-reduced-motion: reduce) { .battlepass-cover__meter > i b { transition: none; } } /* Внутри пасса обложка не нажимается: она уже открыта. */ .battlepass-cover--panel { min-height: 208px; } .battlepass-cover--panel .battlepass-cover__hero { bottom: 10px; width: 178px; } .battlepass-cover--panel:active { transform: none; filter: none; } .battlepass-cover__cta { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 46px; margin-top: 13px; padding: 0 16px; border: 0; border-radius: var(--radius); color: var(--tenant-ink, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--club) 82%, #fff), var(--club)); font-family: var(--font-display); font-size: .98rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } /* * Блик проходит по кнопке снова и снова: это единственный зов на экране, и он * должен оставаться живым, а не сверкнуть один раз при загрузке. Полоса света * идёт по диагонали и большую часть цикла стоит за краем — иначе мигание * превращается в шум под текстом. */ .battlepass-cover__cta::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: 0; width: 46px; /* Полоса идёт поверх надписи: так блик и выглядит на кнопке. */ z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); /* Ход задан в пикселях: проценты здесь считаются от собственной ширины полосы, и на кнопке любой ширины блик уезжал бы мимо. */ transform: translate3d(-60px, 0, 0) rotate(14deg); animation: battlepass-shine 2600ms var(--ease-out) infinite; } @keyframes battlepass-shine { 0% { transform: translate3d(-60px, 0, 0) rotate(14deg); } 38%, 100% { transform: translate3d(460px, 0, 0) rotate(14deg); } } @media (prefers-reduced-motion: reduce) { .battlepass-cover__cta::after { animation: none; opacity: 0; } } /* Значок игры: логотип издателя, пока его нет — монограмма на своём оттенке. */ .game-badge { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; width: 52px; height: 32px; border-radius: var(--radius-xs); background: linear-gradient(150deg, hsl(var(--game-hue) 58% 32%), hsl(calc(var(--game-hue) + 26) 52% 17%)); } .game-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px 5px; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); } /* * Монограмма — запасной вариант, а не подложка: сквозь прозрачный логотип она * просвечивала и мешала читать знак. Пока картинка на месте, её не видно; * если файл не загрузился, обработчик удаляет img и монограмма возвращается. */ .game-badge:has(img) b, .battlepass-game-head__art:has(img) b { display: none; } .game-badge b { position: absolute; color: #fff; font-family: var(--font-display); font-size: .74rem; font-weight: 800; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); } /* Пометка категории живёт в тексте карточки, а не поверх знака игры. */ /* Battlepass: отдельный экран внутри миссий. */ .battlepass-hero { display: grid; gap: 10px; padding: 22px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--club) 45%, var(--line)); border-radius: var(--radius-lg); background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--club) 30%, transparent), transparent 46%), var(--surface); } .battlepass-hero > span, .battlepass-game-head span { color: var(--club-label); font-size: var(--type-micro); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .battlepass-hero h2, .battlepass-game-head h3 { margin: 0; } .battlepass-hero p, .battlepass-rules { margin: 0; color: var(--ink-faint); line-height: 1.5; } /* Только в локальной разработке: пройти активацию ещё раз, не чистя хранилище. */ .battlepass-replay { justify-self: start; min-height: 34px; padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-faint); background: none; font-size: var(--type-micro); } .battlepass-cap { display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; margin-top: 8px; } .battlepass-cap span { color: var(--ink-faint); font-size: var(--type-small); } .battlepass-cap strong { font-variant-numeric: tabular-nums; } .battlepass-cap > i { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-3); } .battlepass-cap > i b { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--club); transform: scaleX(var(--fill, 0)); transform-origin: left center; transition: transform var(--slow) var(--ease-out); } .battlepass-search { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .battlepass-search:focus-within { border-color: var(--club); } .battlepass-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; } .battlepass-game-head { display: grid; gap: 10px; justify-items: center; padding: 18px 18px 16px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, hsl(var(--game-hue) 46% 22% / .55), transparent 78%), var(--surface); } .battlepass-game-head__art { position: relative; display: grid; place-items: center; width: 100%; height: 72px; } .battlepass-game-head__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* * Знаки приходят от разных издателей: у одних белая надпись, у других тёмная, * у третьих обе части сразу. Светлый ореол под тёмным контуром вытягивает * тёмные части, а тень под светлыми держит их край — один приём вместо * подгонки каждого файла. */ filter: drop-shadow(0 0 1px rgba(255, 255, 255, .5)) drop-shadow(0 0 3px rgba(255, 255, 255, .28)) drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); } .battlepass-game-head__art b { color: #fff; font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: .04em; } .battlepass-game-head h3 { font-size: 1.24rem; } .battlepass-game-head small { color: var(--ink-faint); line-height: 1.45; } .battlepass-task-list { display: grid; gap: 10px; } /* * Карточка испытания повторяет геометрию обычной миссии: арт, название, * награда крупной цифрой и своя кнопка заявки. Условие свёрнуто до трёх строк * и раскрывается по кнопке — в каталоге оно длинное. */ .battlepass-task { display: grid; gap: 8px; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--fast) linear; } .battlepass-task.is-troll { background: linear-gradient(118deg, color-mix(in srgb, var(--warning) 7%, var(--surface)), var(--surface)); } .battlepass-task__copy { display: grid; gap: 5px; min-width: 0; } .battlepass-task__copy small { color: var(--club-label); font-size: var(--type-micro); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .battlepass-task__copy small.is-troll { color: var(--warning); } .battlepass-task__copy strong { font-size: 1.02rem; line-height: 1.25; } .battlepass-task__copy p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.45; } .battlepass-task.is-open .battlepass-task__copy p { -webkit-line-clamp: unset; } .battlepass-task { overflow: hidden; } .battlepass-task__copy em { color: var(--ink-faint); font-size: var(--type-micro); font-style: normal; } .battlepass-task__more { justify-self: start; min-height: 32px; padding: 0; border: 0; color: var(--club-label); background: none; font-size: var(--type-small); font-weight: 700; } .battlepass-task__foot { margin-top: 2px; } .battlepass-task__foot .btn { min-height: 44px; } /* * Требования испытания. Свёрнутая карточка обещает только цену — сколько * кадров придётся снять; развёрнутая перечисляет их поимённо вместе с тем, что * проверяющий будет сверять. Тот же блок повторяется в листе заявки, поэтому * оформление одно на оба места. */ .battlepass-task__shots { justify-self: start; padding: 3px 9px; border-radius: var(--radius-pill); color: var(--ink-faint); background: var(--surface-2); font-size: var(--type-micro); font-weight: 700; } .battlepass-req { display: grid; gap: 12px; margin: 2px 0 4px; } .battlepass-req section { display: grid; gap: 6px; } .battlepass-req h4 { margin: 0; color: var(--club-label); font-size: var(--type-micro); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .battlepass-req p { display: block; margin: 0; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.45; -webkit-line-clamp: unset; } .battlepass-req ol { display: grid; gap: 8px; margin: 0; padding: 0; counter-reset: shot; list-style: none; } .battlepass-req li { display: grid; gap: 2px; padding-left: 26px; position: relative; counter-increment: shot; } /* Номер кадра — тот же, что на слоте в листе заявки: их читают как пару. */ .battlepass-req li::before { content: counter(shot); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--bg); background: var(--club); font-size: 11px; font-weight: 800; } .battlepass-req li strong { font-size: var(--type-small); line-height: 1.3; } .battlepass-req li span { color: var(--ink-faint); font-size: var(--type-micro); line-height: 1.45; } .battlepass-req.is-compact { padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } /* Плейс Roblox: платформа над названием, чтобы «Brookhaven RP» не висел один. */ .battlepass-game-head__platform { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); font-style: normal; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .sheet-condition { margin: 6px 0 0; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.45; } /* * Код переписывают на бумагу, поэтому блок выглядит как отрывной талон. Рамка * пунктирная, но нейтральная: акцентный пунктир на этом экране читался как * ошибка ввода, хотя ошибки нет — это просто первый шаг. */ .battlepass-code { display: grid; justify-items: center; gap: 5px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); text-align: center; } .battlepass-code span, .battlepass-code small { color: var(--ink-faint); } .battlepass-code strong { color: var(--club-label); font-size: 1.8rem; letter-spacing: .16em; } .battlepass-photo-fields { display: grid; gap: 10px; } /* ─── Battlepass: активация, свой список игр, доказательства ─────────────── */ /* * Активация — единственный праздничный момент приложения, поэтому он занимает * весь экран: заливка расходится из самой кнопки, искры рисуются на canvas, * числа набираются. Всё остальное движение в Battlepass остаётся служебным. */ .bp-activation { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gutter); background: radial-gradient(120% 90% at 50% 12%, color-mix(in srgb, var(--club) 38%, transparent), transparent 62%), var(--canvas); clip-path: circle(0% at var(--from-x, 50%) var(--from-y, 50%)); } .bp-activation__sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .bp-activation__copy { position: relative; display: grid; gap: 10px; justify-items: center; text-align: center; } .bp-activation__copy strong { font-family: var(--font-display); font-size: clamp(1.9rem, 9vw, 2.7rem); line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; } .bp-activation__copy > span { color: var(--club-label); font-weight: 750; } .bp-activation__copy dl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--club) 30%, transparent); } .bp-activation__copy dt { margin-top: 3px; color: var(--ink-faint); font-size: 11px; letter-spacing: .02em; } .bp-activation__copy dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 5.4vw, 1.5rem); font-variant-numeric: tabular-nums; line-height: 1; } .battlepass-tools { display: flex; gap: 9px; align-items: stretch; } .battlepass-tools .battlepass-search { flex: 1 1 auto; } .battlepass-my-games { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); font-size: var(--type-small); font-weight: 700; white-space: nowrap; } .battlepass-my-games:active { transform: scale(0.985); filter: brightness(1.08); } /* * Лента игр ведёт себя как вкладки заданий: полосы прокрутки нет ни на * телефоне, ни под мышью, листается пальцем и перетаскиванием. */ .battlepass-games { align-items: stretch; } /* * Метка группы в горизонтальной ленте. Стоит перед плейсами Roblox и читается * снизу вверх: горизонтального места в ленте нет, а вертикальная полоска * отделяет платформу от игр, не забирая ширину у карточек. */ .battlepass-rail-mark { flex: 0 0 auto; display: grid; place-items: center; align-self: stretch; padding: 0 4px; border-left: 1px solid var(--line); color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; } .battlepass-games .battlepass-game-chip { flex: 0 0 auto; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 10px; align-items: center; min-height: 56px; width: 196px; padding: 9px 12px 9px 10px; border-radius: var(--radius-row); text-align: left; font-family: var(--font-text); } .battlepass-games .battlepass-game-chip span { display: grid; min-width: 0; } .battlepass-games .battlepass-game-chip strong { min-width: 0; overflow: hidden; font-size: .86rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .battlepass-games .battlepass-game-chip small { color: var(--ink-faint); font-size: var(--type-micro); } /* * У выбранного чипа подпись держится на размере и насыщенности, а не на * прозрачности: на заливке средней яркости (синий бренд) четверть альфы * съедала контраст до 3.5:1, и подпись переставала читаться на солнце. */ .battlepass-games .battlepass-game-chip[aria-selected="true"] small { color: inherit; font-weight: 600; } .battlepass-games .battlepass-game-chip.is-outside { border: 1px dashed var(--line-strong); } /* Свой список игр. */ .battlepass-game-picker { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; margin: 4px 0 12px; } /* * Заголовок группы. Плейсы Roblox — части одной платформы, а не отдельные * игры, и в алфавитном списке из шестидесяти четырёх позиций они терялись * между чужими названиями. Заголовок липкий: список длинный, и на середине * группы всё ещё должно быть видно, где ты находишься. */ .battlepass-pick-group { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 6px 2px; background: var(--surface); } .battlepass-pick-group:first-child { margin-top: 0; } .battlepass-pick-group span { color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-caps); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .battlepass-pick-group small { padding: 1px 7px; border-radius: var(--radius-pill); color: var(--ink-faint); background: var(--surface-2); font-size: var(--type-micro); font-weight: 700; } /* Линия добирает оставшуюся ширину — так группа читается как раздел. */ .battlepass-pick-group::after { content: ""; flex: 1; height: 1px; background: var(--line); } .battlepass-game-pick { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr); gap: 11px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--surface); } .battlepass-game-pick.is-on { border-color: var(--club); } .battlepass-game-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; } .battlepass-game-pick { position: relative; cursor: pointer; } .pick-box { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 7px; color: transparent; background: var(--surface-2); transition: border-color var(--fast) linear, background var(--fast) linear, color var(--fast) linear; } .battlepass-game-pick.is-on .pick-box { border-color: var(--club); color: var(--club-ink); background: var(--club); } .battlepass-game-pick input:focus-visible + .pick-box { outline: 2px solid var(--club); outline-offset: 2px; } .battlepass-game-pick span { display: grid; min-width: 0; } .battlepass-game-pick strong { overflow: hidden; font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; } .battlepass-game-pick small { color: var(--ink-faint); font-size: var(--type-micro); } /* * Слот фотографии. Занятый слот показывает саму фотографию: подпись «файл * выбран» человек не читает, а миниатюру видит сразу. */ .proof-slots { display: grid; gap: 9px; } .proof-slot { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; gap: 12px; align-items: center; min-height: 74px; padding: 9px 12px 9px 9px; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: var(--radius-row); background: var(--surface); cursor: pointer; } .proof-slot.is-filled { border-style: solid; border-color: var(--positive); } .proof-slot input { position: absolute; width: 1px; height: 1px; opacity: 0; } .proof-slot > img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); } .proof-slot__copy { display: grid; gap: 3px; min-width: 0; } .proof-slot__copy strong { font-size: .95rem; } /* Подпись и пояснение — разные строки: слитый текст читается как одно слово. */ .proof-slot__copy small { color: var(--ink-faint); font-size: var(--type-micro); line-height: 1.4; } .proof-slot__mark { display: grid; place-items: center; color: var(--positive); } .proof-slot__mark--empty { color: var(--ink-faint); } .proof-slot:not(.is-filled) { grid-template-columns: minmax(0, 1fr) 24px; } .field-optional { margin-left: 6px; color: var(--ink-faint); font-size: var(--type-micro); font-style: normal; font-weight: 500; } /* Награда — величина с единицей, а не «+20» в углу. */ .battlepass-task__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .battlepass-task__reward { flex: none; padding: 3px 9px; border-radius: var(--radius-pill); color: var(--club-ink); background: var(--club); font-size: var(--type-micro); font-weight: 800; white-space: nowrap; } /* Раскрытие условия выглядит как переключатель, а не как ссылка в тексте. */ .battlepass-task__more { justify-self: start; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px 0 7px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-dim); background: var(--surface-2); font-size: var(--type-micro); font-weight: 700; } .battlepass-task__more svg { transition: transform var(--base) var(--ease-out); } .battlepass-task.is-open .battlepass-task__more svg { transform: rotate(180deg); } .battlepass-task__foot { display: block; } @media (max-width: 520px) { .battlepass-game-head { align-items: flex-start; flex-direction: column; gap: 5px; } .battlepass-game-head small { text-align: left; } } /* 4. Лента кейса — выше, рядом с самой лентой: длительность и кривая парные. */ /* 5. Переключатель: кружок едет с лёгким перелётом, фон красится в цвет клуба. */ .switch i, .switch i::after, .theme-switch button { transition: background var(--base) linear, transform var(--base) var(--ease-out), color var(--base) linear; } /* 6. Активная вкладка: контур сменяется заливкой, движение указывает место. */ .bottom-nav button svg { transition: transform var(--base) ease, color var(--base) ease; } .bottom-nav button[aria-current="page"] svg { transform: translateY(-1px) scale(1.08); } /* * 7. Отметка дня: ячейка вспыхивает и оседает. Единственная «праздничная» * анимация в приложении — на действии, которое повторяют каждый день. */ .checkin-days i.done { animation: step-pop 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards; } @keyframes step-pop { from { transform: scale(0.86); opacity: 0.4; } to { transform: none; opacity: 1; } } /* 8. Шторка поднимается снизу на 26 пикселей: видно, откуда она взялась. */ .sheet { animation: sheet-up var(--slow) cubic-bezier(0.2, 0.9, 0.24, 1) backwards; } .sheet-backdrop { animation: fade-in var(--base) ease backwards; } @keyframes sheet-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* * 9. Файл принят: пунктир сменяется сплошной рамкой, миниатюра появляется с * лёгким перелётом. Подтверждение, что файл взят, до отправки. */ .file-picker.selected .file-picker-preview { animation: attach-pop var(--slow) var(--ease-overshoot) backwards 100ms; } @keyframes attach-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } /* * 10. Отправка: по кнопке проходит блик. Загрузка снимка занимает секунды, и * молчать это время нельзя. */ .btn.is-busy { position: relative; overflow: hidden; } .btn.is-busy::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 30%, color-mix(in srgb, #fff 24%, transparent) 48%, transparent 66% ); background-size: 250% 100%; animation: shimmer 1200ms linear infinite; } @keyframes shimmer { from { background-position: 180% 0; } to { background-position: -60% 0; } } /* * 11. Ожидание проверки: три точки пульсируют по очереди у карточки на * проверке. Заявка не исчезает из списка, и видно, что она в работе. */ .quest-wait { display: flex; align-items: center; gap: 9px; margin-top: 13px; } .quest-wait span { color: var(--ink-faint); font-size: var(--type-micro); } .dots { display: flex; flex: none; gap: 4px; } .dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--warning); animation: blink-three 1300ms ease-in-out infinite; } .dots b:nth-child(2) { animation-delay: 160ms; } .dots b:nth-child(3) { animation-delay: 320ms; } @keyframes blink-three { 0%, 100% { opacity: 0.28; } 40% { opacity: 1; } } /* 12. Ожидание загрузки: блик по заглушке рисует форму того, что придёт. */ .skeleton { background: linear-gradient( 100deg, var(--surface) 30%, var(--surface-3) 46%, var(--surface) 62% ); background-size: 280% 100%; animation: skeleton-shimmer 1400ms linear infinite; } @keyframes skeleton-shimmer { from { background-position: 180% 0; } to { background-position: -60% 0; } } /* Новая метка на свежей миссии: появляется, а не мигает бесконечно. */ .quest-badge { animation: badge-in var(--base) var(--ease-out) backwards; } @keyframes badge-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .checkin-days i.done, .sheet, .sheet-backdrop, .file-picker.selected .file-picker-preview, .quest-badge, .skeleton, .btn.is-calling, .btn.is-busy::after, .dots b { animation: none; } .btn, .row, .club-option, .quest, .case-row, .rank-row, .topbar-button, .topbar-place, .hero-action, .hero-who, .hero-avatar, .bottom-nav button svg, .switch i, .switch i::after, .theme-switch button { transition: none; } .case-reel.spinning { transition: none; } }