/* * Гостевое приложение НАГРИНД. * * Отдельный лист: /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; --type-display: 2rem; --type-h1: 1.5rem; --type-h2: 1.125rem; --type-h3: 1rem; --type-body: 0.9375rem; --type-small: 0.8125rem; --type-micro: 0.6875rem; --type-figure: 1.75rem; --type-figure-lg: 2.75rem; --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --radius-pill: 999px; --gutter: 16px; --content: 520px; --nav-height: 60px; --fast: 120ms; --base: 200ms; --slow: 320ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* * Бренд приходит из настроек арендатора: app.js кладёт --tenant-accent и * рассчитанный по контрасту --tenant-ink инлайном на . Значения ниже — * запасные, на случай если бутстрап не доехал. */ --club: var(--tenant-accent, #5f84d5); --club-ink: var(--tenant-ink, #05070c); --canvas: #08090c; --surface: #111318; --surface-2: #181b22; --surface-3: #20242d; --line: #252932; --line-strong: #333947; --ink: #f2f4f8; --ink-dim: #a2abbd; --ink-faint: #828b9e; --positive: #3ecf6a; --warning: #f5b544; --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 -18px 48px rgba(0, 0, 0, 0.55); } :root[data-theme="light"] { color-scheme: light; --canvas: #f5f6f9; --surface: #ffffff; --surface-2: #eef0f5; --surface-3: #e3e7ef; --line: #dfe3ec; --line-strong: #c3cad8; --ink: #0f1218; --ink-dim: #525a6b; --ink-faint: #5f6878; --positive: #12833f; --warning: #9a6400; --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 -18px 48px 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; } :focus-visible { outline: 2px solid var(--club); outline-offset: 2px; border-radius: 4px; } /* * Разметка прячет части шторки через атрибут 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); } .stack { display: grid; gap: 24px; align-content: start; } .stack-tight { display: grid; gap: 12px; 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: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; 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: 2px; 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: 6px; max-width: 100%; overflow: hidden; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; 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: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; } .topbar-button svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-dim); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .topbar-button img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } /* ─── типографика разделов ───────────────────────────────────────────────── */ .screen-title { font-family: var(--font-display); font-size: var(--type-h1); font-weight: 600; letter-spacing: 0.03em; line-height: 1.1; text-transform: uppercase; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .section-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--type-h2); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .section-title::before { content: ""; width: 3px; height: 0.9em; border-radius: 2px; background: var(--tab-accent); } .section-link { padding: 0; border: 0; background: none; color: var(--info); 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-size: var(--type-micro); letter-spacing: 0.12em; text-transform: uppercase; } /* ─── кнопки ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font-size: var(--type-body); font-weight: 600; text-align: center; cursor: pointer; transition: transform var(--fast) var(--ease-out), background var(--fast) linear, opacity var(--fast) linear; } .btn:active:not(:disabled) { transform: scale(0.98); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--club); color: var(--club-ink); } .btn-ghost { border-color: var(--line-strong); background: transparent; color: var(--ink); } .btn-quiet { min-height: 36px; padding: 0 12px; border: 0; background: none; color: var(--info); font-size: var(--type-small); font-weight: 500; } .btn-block { width: 100%; min-height: 48px; } .btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; } .btn-icon { display: grid; place-items: center; width: 40px; min-height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); cursor: pointer; } .btn-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-dim); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ─── чипы ───────────────────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-dim); font-size: var(--type-small); font-weight: 600; white-space: nowrap; } .chip-good { background: color-mix(in srgb, var(--positive) 16%, transparent); color: color-mix(in srgb, var(--positive) var(--on-tint), black); } .chip-wait { background: color-mix(in srgb, var(--warning) 16%, transparent); 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: color-mix(in srgb, var(--tab-accent) 18%, transparent); color: color-mix(in srgb, var(--tab-accent) var(--on-tint), black); } .chip-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ─── карточки и плитки ──────────────────────────────────────────────────── */ .card { padding: 16px; border-radius: var(--radius); background: var(--surface); } .card-inset { border: 1px solid var(--line); background: var(--surface-2); } .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: 0; border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer; } .tile span { color: var(--ink-faint); font-size: var(--type-micro); letter-spacing: 0.1em; text-transform: uppercase; } .tile strong { font-family: var(--font-display); font-size: var(--type-figure); font-weight: 600; line-height: 1; } .figure-strip { display: grid; grid-auto-flow: column; /* 1fr не сжимается ниже min-content, а подписи под цифрами длинные. */ grid-auto-columns: minmax(0, 1fr); padding: 14px 0; border-radius: var(--radius); background: var(--surface); } .figure-strip > div { display: grid; justify-items: center; gap: 4px; 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: 600; line-height: 1; } .figure-strip strong i { color: var(--ink-faint); font-size: 0.55em; font-style: normal; } .figure-strip span { color: var(--ink-faint); font-size: var(--type-micro); letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } /* ─── фильтры-пилюли ───────────────────────────────────────────────────────── * Это были подчёркнутые табы из референса, прокручиваемые по горизонтали. * В референсе их два-три и они короткие; у нас шесть русских слов, которые * в 390px не помещаются. Внутри Telegram Desktop такая лента оказалась * недостижимой: скроллбар скрыт, мышью её не тянут, а колесом вбок никто * не крутит — «Ежемесячные» и «Другие» просто не существовали для гостя. * Пилюли переносятся на вторую строку и всегда видны целиком. */ .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .tabs button { min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-dim); font-size: var(--type-small); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background var(--fast) linear, color var(--fast) linear; } .tabs button[aria-selected="true"] { border-color: color-mix(in srgb, var(--tab-accent) 45%, transparent); background: color-mix(in srgb, var(--tab-accent) 16%, transparent); color: color-mix(in srgb, var(--tab-accent) var(--on-tint), black); } /* ─── карусель ───────────────────────────────────────────────────────────── * Пальцем лента листается сама; мышью — нет, а внутри 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 { border-radius: var(--radius); background: var(--surface); overflow: hidden; } .row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 16px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font-size: var(--type-body); text-align: left; cursor: pointer; } .row:first-child { border-top: 0; } .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-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .row-copy small { color: var(--ink-faint); font-size: var(--type-small); } .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; display: grid; align-content: end; gap: 10px; margin: 0 calc(var(--gutter) * -1) 4px; padding: 24px var(--gutter) 24px; overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(120% 88% at 50% 0%, color-mix(in srgb, var(--club) 32%, transparent), transparent 70%), var(--surface); } .hero::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 62%; background: linear-gradient(180deg, transparent, var(--canvas)); } /* Знак бренда вместо арта: даёт блоку вес, ничего не изображая. */ .hero-mark { position: absolute; z-index: -1; top: -14px; right: -18px; width: 132px; height: 132px; object-fit: contain; opacity: 0.09; pointer-events: none; } .hero-status { display: flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: var(--type-small); } .hero-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive) 22%, transparent); } .hero-status.is-closed i { background: var(--ink-faint); box-shadow: none; } .hero-name { font-family: var(--font-display); font-size: var(--type-h1); font-weight: 600; letter-spacing: 0.03em; line-height: 1.05; text-transform: uppercase; } .hero-balance { display: flex; align-items: baseline; gap: 8px; } .hero-balance b { font-family: var(--font-display); font-size: var(--type-figure-lg); font-weight: 700; line-height: 0.95; } .hero-balance span { color: var(--ink-dim); font-size: var(--type-small); } .hero-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .hero-marks .chip { border: 0; cursor: pointer; } /* ─── «сегодня»: чекин и горячая миссия ──────────────────────────────────── */ .today { display: grid; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--surface); } .today-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .today-head strong { font-family: var(--font-display); font-size: var(--type-h3); letter-spacing: 0.05em; text-transform: uppercase; } .checkin-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .checkin-day { display: grid; justify-items: center; gap: 4px; } .checkin-day i { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-small); font-style: normal; } .checkin-day.done i { border-color: transparent; background: color-mix(in srgb, var(--positive) 20%, transparent); color: color-mix(in srgb, var(--positive) var(--on-tint), black); } .checkin-day.current i { border-color: var(--club); color: var(--ink); } .checkin-day small { color: var(--ink-faint); font-size: var(--type-micro); } .hot-mission { display: grid; gap: 8px; padding: 14px; border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning) 10%, transparent); } .hot-mission span { color: color-mix(in srgb, var(--warning) var(--on-tint), black); font-size: var(--type-micro); letter-spacing: 0.1em; text-transform: uppercase; } .hot-mission strong { font-size: var(--type-h3); } .hot-mission p { color: var(--ink-dim); font-size: var(--type-small); } /* ─── строка «что сделать сейчас» ────────────────────────────────────────── */ .next-action { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); } .next-action-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--tab-accent) 18%, transparent); color: color-mix(in srgb, var(--tab-accent) var(--on-tint), black); } .next-action-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .next-action-copy { display: grid; gap: 2px; min-width: 0; } .next-action-copy span { color: color-mix(in srgb, var(--tab-accent) var(--on-tint), black); font-size: var(--type-micro); letter-spacing: 0.1em; text-transform: uppercase; } .next-action-copy strong { font-size: var(--type-h3); } .next-action-copy small { color: var(--ink-dim); font-size: var(--type-small); } /* ─── карточка миссии ────────────────────────────────────────────────────── */ .quest { display: grid; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--surface); } .quest-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; } .quest-art { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--surface-2); object-fit: cover; } .quest-copy { display: grid; gap: 2px; min-width: 0; } .quest-copy strong { font-size: var(--type-h3); line-height: 1.25; } .quest-copy small { color: var(--ink-faint); font-size: var(--type-micro); letter-spacing: 0.08em; text-transform: uppercase; } .quest-reward { font-family: var(--font-display); font-size: var(--type-h2); font-weight: 600; color: color-mix(in srgb, var(--positive) var(--on-tint), black); white-space: nowrap; } .quest p { color: var(--ink-dim); font-size: var(--type-small); } .quest-foot { display: flex; align-items: center; gap: 8px; } .quest-foot .btn { flex: 1; } /* компактная карточка для карусели на главной */ .quest-mini { display: grid; align-content: space-between; gap: 10px; width: 168px; min-height: 148px; padding: 12px; border: 0; border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer; } .quest-mini img { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; } .quest-mini strong { display: -webkit-box; overflow: hidden; font-size: var(--type-small); font-weight: 600; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .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-prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .rank-prize { display: grid; justify-items: center; gap: 4px; padding: 12px 4px; border-radius: var(--radius-sm); background: var(--surface-2); } .rank-prize b { font-family: var(--font-display); font-size: var(--type-micro); letter-spacing: 0.1em; color: var(--ink-faint); } .rank-prize strong { font-family: var(--font-display); font-size: var(--type-h2); } .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: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); } .rank-row:first-child { border-top: 0; } .rank-row.is-me { background: color-mix(in srgb, var(--club) 14%, transparent); } .rank-place { font-family: var(--font-display); font-size: var(--type-body); color: var(--ink-faint); text-align: center; } .rank-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink-dim); font-family: var(--font-display); font-size: var(--type-small); overflow: hidden; } .rank-avatar img { width: 100%; height: 100%; object-fit: cover; } .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: 500; text-overflow: ellipsis; white-space: nowrap; } .rank-player small { color: var(--ink-faint); font-size: var(--type-small); } .rank-score { font-family: var(--font-display); font-size: var(--type-h3); font-weight: 600; } /* ─── профиль ────────────────────────────────────────────────────────────── */ .profile-head { display: grid; justify-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; } .profile-avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--surface-2); object-fit: cover; } .profile-name { font-family: var(--font-display); font-size: var(--type-h1); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .profile-handle { color: var(--ink-faint); font-size: var(--type-small); } .level-card { display: grid; gap: 10px; padding: 16px; 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(4, minmax(0, 1fr)); gap: 12px 8px; } .badge-cell { display: grid; justify-items: center; gap: 6px; text-align: center; } .badge-mark { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink-faint); font-family: var(--font-display); font-size: var(--type-small); overflow: hidden; } /* * Загруженная картинка достижения. Закрытое — приглушено, как и было с * галочками: сетка должна с одного взгляда показывать, что уже собрано. */ .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); } /* ─── история ────────────────────────────────────────────────────────────── */ .history-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); } .history-row:first-child { border-top: 0; } .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: 500; text-overflow: ellipsis; white-space: nowrap; } .history-copy small { color: var(--ink-faint); font-size: var(--type-small); } .history-amount { font-family: var(--font-display); font-size: var(--type-body); font-weight: 600; text-align: right; white-space: nowrap; } .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); } /* ─── кейсы ──────────────────────────────────────────────────────────────── */ .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, 7.6s) cubic-bezier(0.12, 0.92, 0.18, 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 16px; border-top: 1px solid var(--line); } .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); } /* ─── нижняя навигация ───────────────────────────────────────────────────── */ .bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; 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: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(14px); } .bottom-nav button { display: grid; place-items: center; border: 0; background: none; color: var(--ink-faint); cursor: pointer; transition: color var(--fast) linear; } .bottom-nav button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .bottom-nav button[aria-current="page"] { color: var(--ink); } .bottom-nav button[data-tab="home"][aria-current="page"] { color: var(--tab-home); } .bottom-nav button[data-tab="quests"][aria-current="page"] { color: var(--tab-quests); } .bottom-nav button[data-tab="cases"][aria-current="page"] { color: var(--tab-cases); } .bottom-nav button[data-tab="rating"][aria-current="page"] { color: var(--tab-rating); } .bottom-nav button[data-tab="profile"][aria-current="page"] { color: var(--ink); } /* ─── шторки ─────────────────────────────────────────────────────────────── */ .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; padding: 12px var(--gutter) calc(20px + env(safe-area-inset-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--canvas); box-shadow: var(--shadow-sheet); overflow-y: auto; animation: sheet-up var(--slow) var(--ease-out); } .sheet-grip { justify-self: center; width: 36px; 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-size: var(--type-micro); letter-spacing: 0.1em; text-transform: uppercase; } .sheet-head h2 { font-family: var(--font-display); font-size: var(--type-h1); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .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 16px; border-radius: var(--radius-sm); background: var(--surface-3); 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; gap: 10px; width: min(100%, var(--content)); margin: 0 auto 12px; padding: 10px var(--gutter); 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: 32px 16px; 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 { position: relative; border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent), transparent ); transform: translateX(-100%); animation: shimmer 1.4s infinite; } .skeleton-hero { height: 30svh; border-radius: var(--radius); } .skeleton-card { height: 96px; border-radius: var(--radius); } .skeleton-row { height: 64px; border-radius: var(--radius); } /* ─── анимации ───────────────────────────────────────────────────────────── */ @keyframes fade-in { from { opacity: 0; } } @keyframes sheet-up { from { transform: translateY(18px); opacity: 0.6; } } @keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } } @keyframes shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ─── широкий экран ──────────────────────────────────────────────────────── */ @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); }