/* ───────────────────────────────────────────────────────────────────────── * Предложка — базовый слой: токены, reset, примитивы. * Общий для лендинга (index.html) и кабинета (app.html). * * Тема: светлая по умолчанию, тёмная — через prefers-color-scheme ИЛИ * явный [data-theme] на (переключатель в кабинете, localStorage). * ───────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* Поверхности */ --bg: #f5f6f9; --surface: #ffffff; --surface-2: #f1f3f7; --surface-3: #e8ebf1; --overlay: rgba(11, 13, 18, 0.45); /* тень-подсказка у краёв прокручиваемых областей */ --scroll-shadow: rgba(11, 13, 18, 0.18); /* Текст */ --ink: #0b0d12; --ink-2: #5a6272; /* ink-3 — самый тихий текст (подсказки, оси, время). Держим ≥4.5:1 к * поверхности: более светлый #8b93a3 давал 3.1:1 и не проходил AA. */ --ink-3: #6b7383; /* Линии */ --line: rgba(11, 13, 18, 0.1); --line-2: rgba(11, 13, 18, 0.055); /* Бренд */ --brand: #1c5cf5; --brand-hover: #164ed6; --brand-ink: #ffffff; --brand-soft: rgba(28, 92, 245, 0.1); --brand-soft-2: rgba(28, 92, 245, 0.16); /* Статусы. Зарезервированы: не использовать как серию данных. Значения * подобраны как ТЕКСТ поверх своей же тонировки (--*-soft) — прежние * #0c7f57 / #b26a00 годились для заливки, но давали 3.6–4.3:1 на тексте. */ --ok: #027b54; --ok-soft: rgba(2, 123, 84, 0.12); --warn: #9f5800; --warn-soft: rgba(159, 88, 0, 0.13); --danger: #c92a37; --danger-soft: rgba(201, 42, 55, 0.11); --danger-ink: #ffffff; /* Категориальная палитра графиков (порядок фиксирован, не циклится). * Проверена валидатором: lightness / chroma / CVD / контраст — PASS. * * НЕ связывать через var() со статусами и брендом, даже когда значения * совпадают: у серии данных и у роли интерфейса разные требования по * контрасту. --cat-2 когда-то был равен --warn, и правка --warn ради * читаемости бейджа молча перекрасила бы Telegram в графике источников. * --cat-1 совпадает с --brand только в светлой теме — в тёмной бренд * пришлось осветлить под контраст, а серия осталась валидированной. */ --cat-1: #1c5cf5; --cat-2: #b26a00; --cat-3: #00998c; --cat-4: #9333ea; --cat-5: #c71e7e; --cat-other: #8b93a3; /* Секвенциальная шкала (один тон, светлый → тёмный) */ --seq-1: #e3ecff; --seq-2: #b9cffe; --seq-3: #7ea6fb; --seq-4: #4179f7; --seq-5: #1c5cf5; --seq-6: #123fa8; /* Мессенджеры — идентичность, всегда с иконкой и подписью */ --max: #7b3ff2; --tg: #007db8; --vk: #0076de; /* Радиусы (концентрические: внешний = внутренний + padding) */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* Тени — слоистые, прозрачные (глубина тенью, не рамкой) */ --sh-1: 0 1px 2px rgba(11, 13, 18, 0.05), 0 1px 1px rgba(11, 13, 18, 0.03); --sh-2: 0 2px 4px rgba(11, 13, 18, 0.04), 0 8px 16px -6px rgba(11, 13, 18, 0.08); --sh-3: 0 4px 8px rgba(11, 13, 18, 0.05), 0 20px 40px -12px rgba(11, 13, 18, 0.14); --sh-brand: 0 2px 6px rgba(28, 92, 245, 0.24), 0 12px 24px -8px rgba(28, 92, 245, 0.34); /* Контур на изображениях: чистый чёрный/белый, без подтона */ --img-outline: oklch(0 0 0 / 0.1); /* Шкала размеров: 10 ступеней вместо 21 разрозненного значения. Полушаги * (13/13.5, 14/14.5, 15/15.5) глазом не различались, но плодили решение * при каждой новой строке. Имена по назначению, а не по числу. */ --t-3xs: 11px; /* декор в моке лендинга */ --t-2xs: 12px; /* мелкие метки, счётчики */ --t-xs: 12.5px; /* подписи, подсказки, время */ --t-sm: 14px; /* таблицы, чипы, мелкие кнопки */ --t-md: 15px; /* базовый UI: кнопки, пункты меню */ --t-base: 16px; /* заголовки карточек, поля на мобильном */ --t-lg: 18px; /* заголовки разделов и диалогов */ --t-xl: 20px; /* заголовок экрана */ --t-2xl: 26px; /* крупные показатели */ --t-display: 40px; /* итоговая цена */ --ease: cubic-bezier(0.2, 0, 0, 1); --shell: 1216px; } :root[data-theme="dark"], html[data-theme="dark"] body { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0a0b0e; --surface: #141619; --surface-2: #1b1e24; --surface-3: #23272e; --overlay: rgba(0, 0, 0, 0.6); --scroll-shadow: rgba(0, 0, 0, 0.6); --ink: #f1f3f7; --ink-2: #c5cddb; --ink-3: #acb5c6; --line: rgba(255, 255, 255, 0.1); --line-2: rgba(255, 255, 255, 0.055); --brand: #84bcff; --brand-hover: #9ac7ff; --brand-ink: #05070c; --brand-soft: rgba(132, 188, 255, 0.14); --brand-soft-2: rgba(132, 188, 255, 0.22); --ok: #4dd09b; --ok-soft: rgba(77, 208, 155, 0.16); --warn: #edae45; --warn-soft: rgba(237, 174, 69, 0.16); --danger: #ff9fa7; --danger-soft: rgba(255, 159, 167, 0.16); --danger-ink: #2a0a0d; --cat-1: #5a8ffa; --cat-2: #b5852b; --cat-3: #0aa694; --cat-4: #9a78f5; --cat-5: #e24784; --cat-other: #6f7787; --seq-1: #16233c; --seq-2: #1d3358; --seq-3: #2a4d8f; --seq-4: #3a6bc4; --seq-5: #5a8ffa; --seq-6: #8fb4fd; --max: #c5a2ff; --tg: #57bdef; --vk: #66b9ff; --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 16px -6px rgba(0, 0, 0, 0.5); --sh-3: 0 4px 8px rgba(0, 0, 0, 0.4), 0 20px 40px -12px rgba(0, 0, 0, 0.6); --sh-brand: 0 2px 6px rgba(132, 188, 255, 0.2), 0 12px 24px -8px rgba(132, 188, 255, 0.28); --img-outline: oklch(1 0 0 / 0.1); } } :root[data-theme="dark"] { --bg: #0a0b0e; --surface: #141619; --surface-2: #1b1e24; --surface-3: #23272e; --overlay: rgba(0, 0, 0, 0.6); --scroll-shadow: rgba(0, 0, 0, 0.6); --ink: #f1f3f7; --ink-2: #c5cddb; --ink-3: #acb5c6; --line: rgba(255, 255, 255, 0.1); --line-2: rgba(255, 255, 255, 0.055); --brand: #84bcff; --brand-hover: #9ac7ff; --brand-ink: #05070c; --brand-soft: rgba(132, 188, 255, 0.14); --brand-soft-2: rgba(132, 188, 255, 0.22); --ok: #4dd09b; --ok-soft: rgba(77, 208, 155, 0.16); --warn: #edae45; --warn-soft: rgba(237, 174, 69, 0.16); --danger: #ff9fa7; --danger-soft: rgba(255, 159, 167, 0.16); --danger-ink: #2a0a0d; --cat-1: #5a8ffa; --cat-2: #b5852b; --cat-3: #0aa694; --cat-4: #9a78f5; --cat-5: #e24784; --cat-other: #6f7787; --seq-1: #16233c; --seq-2: #1d3358; --seq-3: #2a4d8f; --seq-4: #3a6bc4; --seq-5: #5a8ffa; --seq-6: #8fb4fd; --max: #c5a2ff; --tg: #57bdef; --vk: #66b9ff; --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 16px -6px rgba(0, 0, 0, 0.5); --sh-3: 0 4px 8px rgba(0, 0, 0, 0.4), 0 20px 40px -12px rgba(0, 0, 0, 0.6); --sh-brand: 0 2px 6px rgba(132, 188, 255, 0.2), 0 12px 24px -8px rgba(132, 188, 255, 0.28); --img-outline: oklch(1 0 0 / 0.1); } /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--t-base); line-height: 1.55; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; outline: 1px solid var(--img-outline); outline-offset: -1px; } button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-weight: 640; line-height: 1.16; letter-spacing: -0.025em; text-wrap: balance; } p { text-wrap: pretty; } ul, ol { padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); } ::selection { background: var(--brand-soft-2); } /* Цифры выравниваем по разрядам везде, где они сравниваются глазом */ .num, td.num, .stat-value, .metric-value, .price, time { font-variant-numeric: tabular-nums; } /* ── Утилиты ───────────────────────────────────────────────────────────── */ /* Безопасные зоны: обе страницы объявляют viewport-fit=cover, то есть сами * просятся под вырез. Берём max() от обоих физических инсетов сразу — так * отступ симметричен и не ломается при dir="rtl" (логические env() не * существуют, а физические left/right в этом проекте под запретом). */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: 16px; inset-block-start: -100px; z-index: 100; padding: 12px 20px; background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--sh-3); font-weight: 560; transition: inset-block-start 160ms var(--ease); } .skip-link:focus { inset-block-start: 16px; } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } /* Ряд кнопок. Переносится обязательно: .btn несёт white-space: nowrap, и на * узком экране пара вроде «Продлить» + «Изменить каналы» (292px) иначе * вылезает за карточку (236px контента на 320px). 12px — стартовый зазор * между соседними залитыми/обведёнными контролами; группы чипов держим * плотнее (6px), они читаются как один контрол. */ .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .spacer { flex: 1; } .muted { color: var(--ink-2); } .dim { color: var(--ink-3); } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ── Кнопки ────────────────────────────────────────────────────────────── */ .btn { --btn-h: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding-inline: 18px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--t-md); font-weight: 560; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); transition: background-color 140ms var(--ease), box-shadow 140ms var(--ease), color 140ms var(--ease), scale 140ms var(--ease); } .btn:hover { background: var(--surface-2); } .btn:active { scale: 0.96; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .btn svg { flex: none; } .btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: var(--sh-brand); } .btn-primary:hover { background: var(--brand-hover); } .btn-soft { background: var(--brand-soft); color: var(--brand); box-shadow: none; } .btn-soft:hover { background: var(--brand-soft-2); } .btn-danger { color: var(--danger); } .btn-danger:hover { background: var(--danger-soft); } /* Подтверждающая кнопка в диалоге необратимого действия: заливка, чтобы * последствие читалось раньше, чем текст диалога. */ .btn-danger-solid { background: var(--danger); color: var(--danger-ink); box-shadow: none; } .btn-danger-solid:hover { background: var(--danger); filter: brightness(0.94); } .btn-lg { --btn-h: 52px; padding-inline: 24px; font-size: var(--t-base); border-radius: var(--r-md); } .btn-sm { --btn-h: 34px; padding-inline: 12px; font-size: var(--t-sm); border-radius: var(--r-xs); } .btn-icon { --btn-h: 38px; width: var(--btn-h); padding-inline: 0; border-radius: var(--r-sm); color: var(--ink-2); } .btn-icon:hover { color: var(--ink); } /* ── Поверхности ───────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2); } .card-pad { padding: 24px; } /* Вертикальная стопка внутри карточки. Явная сжимаемая колонка обязательна: * неявная auto-дорожка не сжимается ниже min-content содержимого, а строка * заголовка его не имеет — .truncate несёт white-space: nowrap, поэтому её * min-content равен полной ширине текста. На узких карточках (три в ряд около * 1100px) стопка распирала карточку на 64px. Тот же корень, что был у .view, * и лечится тем же minmax(0, 1fr). */ .card-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; } .card-head { display: flex; align-items: flex-start; flex-wrap: wrap; /* заголовок + кнопка действия не помещаются в одну строку на узком экране */ gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line-2); } .card-title { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.015em; } .card-sub { margin-top: 2px; /* Подзаголовок читают целиком, а не сканируют: на широкой карточке строка * доходила до 121 знака при норме 60–75. */ max-width: 68ch; font-size: var(--t-sm); color: var(--ink-2); letter-spacing: 0; } /* ── Значки и чипы ─────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 560; letter-spacing: 0; white-space: nowrap; } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-brand { background: var(--brand-soft); color: var(--brand); } .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; flex: none; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding-inline: 13px; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); font-weight: 560; transition: background-color 140ms var(--ease), color 140ms var(--ease), scale 140ms var(--ease); } .chip:hover { background: var(--surface-3); color: var(--ink); } .chip:active { scale: 0.96; } .chip[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); } /* ── Поля ──────────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .field > label, .field-label { font-size: var(--t-sm); font-weight: 560; color: var(--ink-2); letter-spacing: 0; } .field-hint { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0; } .input, .select, .textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); /* 16px на узких экранах: iOS Safari принудительно зумит страницу при * фокусе в поле с текстом мельче 16px и обратно не отзумливает. */ font-size: var(--t-base); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 140ms var(--ease); } .textarea { min-height: 108px; resize: vertical; line-height: 1.5; } .input::placeholder, .textarea::placeholder { color: var(--ink-3); } .input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); } .select { appearance: none; padding-inline-end: 38px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 17px center, right 12px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } .search { position: relative; display: flex; align-items: center; } .search svg { position: absolute; inset-inline-start: 13px; color: var(--ink-3); pointer-events: none; } .search .input { padding-inline-start: 40px; } /* Переключатель */ .switch { position: relative; display: inline-flex; flex: none; width: 44px; height: 26px; border-radius: var(--r-full); background: var(--surface-3); cursor: pointer; transition: background-color 160ms var(--ease); } .switch::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: var(--r-full); background: #fff; box-shadow: var(--sh-1); transition: translate 180ms var(--ease); } .switch[aria-checked="true"] { background: var(--brand); } .switch[aria-checked="true"]::after { translate: 18px 0; } /* Строка настройки: заголовок + описание + контрол */ .setting { display: flex; align-items: center; gap: 20px; padding: 15px 0; } .setting + .setting { border-top: 1px solid var(--line-2); } .setting-text { min-width: 0; flex: 1; } .setting-title { font-size: var(--t-md); font-weight: 560; } .setting-desc { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-2); letter-spacing: 0; } /* Слайдер */ .range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; } .range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-full); background: linear-gradient( to right, var(--brand) 0 var(--fill, 50%), var(--surface-3) var(--fill, 50%) 100% ); } .range::-moz-range-track { height: 6px; border-radius: var(--r-full); background: var(--surface-3); } .range::-moz-range-progress { height: 6px; border-radius: var(--r-full); background: var(--brand); } .range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: var(--r-full); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-2); transition: scale 140ms var(--ease); } .range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: var(--r-full); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-2); } .range:active::-webkit-slider-thumb { scale: 1.12; } /* ── Выбор тарифа: сегменты, срок, цена ──────────────────────────────── * Общие для калькулятора на лендинге и корзины в кабинете — держим здесь, * чтобы витрина и оформление подписки не разъехались по виду. */ .seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: var(--r-md); background: var(--surface-2); } .seg button { padding: 9px 16px; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 560; color: var(--ink-2); transition: background-color 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease), scale 140ms var(--ease); } /* Тот же отклик, что у .dur ниже: контролы выбора стоят в одной карточке * калькулятора, и нажимают их подряд — разнобой заметен сразу. */ .seg button:active { scale: 0.96; } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); } .calc-row-head { display: flex; align-items: baseline; gap: 10px; } .calc-value { margin-inline-start: auto; font-size: var(--t-xl); font-weight: 640; letter-spacing: -0.025em; } .dur-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .dur { display: grid; gap: 2px; padding: 11px 8px; border-radius: var(--r-sm); background: var(--surface-2); text-align: center; transition: background-color 140ms var(--ease), box-shadow 140ms var(--ease), scale 140ms var(--ease); } .dur:active { scale: 0.96; } .dur b { font-size: var(--t-md); font-weight: 600; } .dur span { font-size: var(--t-2xs); font-weight: 560; color: var(--ok); letter-spacing: 0; } .dur[aria-pressed="true"] { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); } .total-price { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-display); font-weight: 680; letter-spacing: -0.04em; line-height: 1; } .total-price small { font-size: var(--t-md); font-weight: 530; color: var(--ink-2); letter-spacing: -0.01em; } .total-old { font-size: var(--t-sm); color: var(--ink-3); text-decoration: line-through; } /* ── Аватар ────────────────────────────────────────────────────────────── */ .avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; overflow: hidden; } /* Фото ложится ПОВЕРХ инициалов, а не рядом: пока картинка не загрузилась * (или её нет, или ссылка протухла — тогда onerror её снимает), видно буквы. * absolute, потому что инициалы — текстовый узел, ему grid-area не задать. */ .avatar { position: relative; } .avatar img { position: absolute; outline: 1px solid var(--img-outline); outline-offset: -1px; inset: 0; width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 30px; height: 30px; font-size: var(--t-2xs); } /* ── Таблица ───────────────────────────────────────────────────────────── */ /* Таблицы шире экрана прокручиваются вбок, и без подсказки половина колонок * просто не существует для пользователя (на 320px скрыто 276px из 560). * Тени у краёв: слои `local` едут вместе с контентом и закрывают тени, когда * прокручивать больше некуда, слои `scroll` остаются на месте. Без слушателей * события scroll. */ .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; background: linear-gradient(to right, var(--surface) 40%, transparent) 0 0 / 28px 100% no-repeat local, linear-gradient(to left, var(--surface) 40%, transparent) 100% 0 / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) 0 0 / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) 100% 0 / 14px 100% no-repeat scroll; } .table { min-width: 560px; font-size: var(--t-sm); } .table th { padding: 10px 16px; text-align: start; font-size: var(--t-xs); font-weight: 560; color: var(--ink-3); /* У заглавных нет выносных элементов — без разрядки строка слипается. * Тот же порядок, что у .eyebrow на лендинге. */ letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .table td { padding: 13px 16px; border-top: 1px solid var(--line-2); vertical-align: middle; } .table tbody tr:hover td { background: var(--surface-2); } .table .num { text-align: end; } /* ── Пустое состояние ──────────────────────────────────────────────────── */ .empty { display: grid; justify-items: center; gap: 6px; padding: 56px 24px; text-align: center; } .empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); } .empty-title { font-size: var(--t-base); font-weight: 600; } .empty-text { max-width: 38ch; font-size: var(--t-sm); color: var(--ink-2); letter-spacing: 0; } /* Кнопка действия в пустом состоянии: gap в 6px для CTA слишком тесный. */ .empty .btn { margin-top: 10px; } /* ── Мессенджер-метки ──────────────────────────────────────────────────── */ .src { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); font-weight: 560; color: var(--ink-2); letter-spacing: 0; white-space: nowrap; } .src-max { color: var(--max); } .src-tg { color: var(--tg); } .src-vk { color: var(--vk); } /* ── Логотип ───────────────────────────────────────────────────────────── */ .logo { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-xl); font-weight: 640; letter-spacing: -0.03em; } .logo-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--r-full); background: var(--ink); color: var(--surface); } /* ── Мелочи ────────────────────────────────────────────────────────────── */ .link { color: var(--brand); font-weight: 560; transition: color 140ms var(--ease); } .link:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; } .arrow-link { display: inline-flex; align-items: center; gap: 7px; } .arrow-link svg { /* Отклик на наведение — в один шаг с .btn/.chip (140ms). На 200ms сдвиг * стрелки читался как задержка, а не как реакция. */ transition: translate 140ms var(--ease); } .arrow-link:hover svg { translate: 3px 0; } /* На широком экране поля возвращаются к плотному 15px: зум iOS там не грозит. */ @media (min-width: 640px) { .input, .select, .textarea { font-size: var(--t-md); } } /* Режим высокой контрастности заменяет фоны системными цветами, поэтому * состояния, которые несёт только заливка, там пропадают. Добавляем контур — * он в forced-colors переживает подмену. Позиция бегунка у .switch остаётся * самостоятельным признаком, ей отдельная страховка не нужна. */ @media (forced-colors: active) { .switch { border: 1px solid CanvasText; } .switch::after { background: CanvasText; } .switch[aria-checked="true"] { background: Highlight; } .chip[aria-pressed="true"], .dur[aria-pressed="true"], .seg button[aria-pressed="true"], .side-nav a[aria-current="page"], .ws-item[aria-current="true"] { outline: 2px solid CanvasText; outline-offset: -2px; } } @media (max-width: 720px) { .shell { padding-inline: 18px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }