/* ── Self-hosted шрифты (variable woff2, latin + latin-ext) ────────────── Google Fonts нестабилен в РФ и добавлял render-blocking запрос + 2 preconnect. Кириллица у обоих семейств отсутствует и в Google Fonts — рендерится системным фолбэком (ui-sans-serif), поведение не изменилось. Файлы в fonts/, кэшируются SW. */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/dmsans-latin.woff2') format('woff2'); 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; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/dmsans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/spacegrotesk-latin.woff2') format('woff2'); 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; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/spacegrotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Кириллица: DM Sans и Space Grotesk кириллицы НЕ содержат, поэтому для символов U+0400–045F русский текст берёт совместимый по геометрии Manrope (self-host, тот же вес-диапазон). Латиница и ЦИФРЫ остаются в брендовых шрифтах — цифр в этом диапазоне нет, значит tabular-nums сумм по-прежнему рендерит Space Grotesk. */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } :root { --font-ui: 'DM Sans', ui-sans-serif, sans-serif; --font-display: 'Space Grotesk', ui-sans-serif, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Backgrounds — subtle violet tint for brand warmth */ --bg: #0c0c12; --bg2: #13131b; --panel: rgba(19, 19, 27, .97); --panel2: rgba(26, 26, 36, .96); --text: #f4f4f8; --muted: #8a8a9e; --hint: #3e3e52; --line: rgba(255, 255, 255, .08); --empty-bg: rgba(255, 255, 255, .015); --primary: #6c00ff; --primary2: #9b4dff; /* Тот же акцент в виде тройки каналов — для подсветок и свечения: rgb(var(--primary-rgb) / .12). Раньше на этих местах стояло 168 хардкодов rgba(124,58,237,…) / rgba(108,0,255,…), из-за чего подсветки не следовали ни за темой, ни тем более за выбранной схемой. Держать в синхроне с --primary. */ --primary-rgb: 108 0 255; --primary-bg: rgb(var(--primary-rgb) / .09); /* Текст поверх фиолетовой подсветки (--primary-bg и rgba(124,58,237,.1x)). Отдельно от --primary2: тот в светлой теме светлее основного и на тинте даёт 3.1:1 — ниже AA. Замер: tests/suites/a11y.js «активные элементы». */ --primary-on-tint: #b18aff; /* Акцентный текст (ссылки-действия, суммы, подписи). Отдельно от --primary2: тот светлее основного и как текст на белой панели даёт 3.6:1. */ --primary-text: #b18aff; --blue: #2563eb; --cyan: #0891b2; --green: #16a34a; --yellow: #f6bd3a; --orange: #ea580c; --red: #f22822; /* Фиксированный фиолетовый для этапов воронки. Отдельно от --primary: тот следует за выбранной цветовой схемой, а этап «В работе» должен оставаться отличимым от «Сдано» и в зелёной схеме. См. CRM_STATUS_COLOR в app.js. */ --violet: #8b5cf6; /* Status text — readable variant of each hue, dark-theme default. Цель — 5-8:1, а не «чем больше, тем лучше». Прежние значения (200-я ступень Tailwind: #fca5a5/#86efac/#93c5fd/#fdba74) давали 9-13:1 при пороге AA 4.5 — запас вдвое, купленный обесцвечиванием: «Расходы» и «Долг клиентов» на дашборде выходили бледно-розовыми, а не красными. Ниже — насыщенные оттенки с двукратным запасом над AA. Замер: tests/suites/a11y.js. */ --text-success: #22c55e; --text-danger: #ff5147; --text-info: #57a5ff; --text-warning: #ff9d3d; /* Darker hue shade — hover-darken for solid buttons, same in both themes */ --green-strong: #15803d; --blue-strong: #1d4ed8; --yellow-strong: #e6af2e; /* Бренд Premium Stock (stock.adervis.ru) — ЧУЖАЯ палитра: живёт только в карточке продукта в боковом меню (.side-promo) и одинакова в обеих темах. У продукта своя тёмная айдентика, и карточка несёт её, а не нашу. Золото совпадает с --yellow тёмной темы, но в светлой --yellow темнее — отсюда отдельные токены, не зависящие от темы. */ --stock-ink: #141414; --stock-gold: #f6bd3a; --stock-gold-deep: #c8901f; /* Красной ступени в семье НЕ БЫЛО — и ровно поэтому три места держали свой #b91c1c / #d41e18 мимо токенов: затемнить красную кнопку было нечем. Значение то же, что уже стояло в двух из трёх. */ --red-strong: #b91c1c; /* Текст цветной «капсулы» (категории пакетов, база знаний, активные фильтры). Фон капсулы — полупрозрачный тинт, поэтому реальный контраст зависит от того, что под ним: светлый оттенок читается на тёмном и почти исчезает на белом. Раньше эти цвета были захардкожены в компонентах и в светлой теме давали до 2:1 — держим их здесь по одному на оттенок и переопределяем для светлой. Значения проверяются тестом «цветные капсулы читаемы в обеих темах». */ --tint-violet: #c4b5fd; --tint-blue: #93c5fd; --tint-green: #86efac; --tint-orange: #fdba74; --tint-cyan: #67e8f9; --tint-pink: #f9a8d4; --tint-amber: #fcd34d; --tint-indigo: #a5b4fc; --tint-red: #fca5a5; --tint-slate: #cbd5e1; /* Фоны капсул — альфа-тинты, работают в обеих темах, поэтому не дублируются */ --tint-violet-bg: rgb(var(--primary-rgb) / .12); --tint-blue-bg: rgba(37, 99, 235, .12); --tint-green-bg: rgba(22, 163, 74, .14); --tint-orange-bg: rgba(234, 88, 12, .12); --tint-cyan-bg: rgba(8, 145, 178, .12); --tint-pink-bg: rgba(219, 39, 119, .12); --tint-amber-bg: rgba(202, 138, 4, .14); --tint-indigo-bg: rgba(67, 56, 202, .12); /* VK brand blue — фиксированный фирменный цвет VK, одинаков в обеих темах */ --vk-blue: #0077ff; --vk-blue-hover: #005fcc; /* Text on a saturated/colored background (buttons, badges) — same in both themes */ --on-color: #fff; /* Elevation scale — use instead of a single heavy --shadow */ --elev-0: 0 1px 2px rgba(0,0,0,.2); --elev-1: 0 2px 8px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.18); --elev-2: 0 8px 24px rgba(0,0,0,.36), 0 2px 8px rgba(0,0,0,.22); --elev-3: 0 20px 56px rgba(0,0,0,.52), 0 6px 18px rgba(0,0,0,.28); --shadow: var(--elev-2); /* ── Градиенты и свечение ────────────────────────────────────────────── Приём из современных дашбордов: акцент не плоской заливкой, а мягким переходом со свечением по краю. Держим ТОКЕНАМИ и строим из --primary-rgb, чтобы градиент следовал и за темой, и за выбранной схемой: захардкоженный фиолетовый в «зелёной» схеме выглядел бы чужим, ровно как это было со 168 хардкодами rgba(124,58,237,…) до --primary-rgb. grad-hero — крупная акцентная карточка (главная метрика, промо); grad-soft — лёгкая подложка под плитку/строку под курсором; grad-btn — заливка главной кнопки; glow-sm — свечение под элементом (кнопка, карточка при наведении); glow-md — заметное свечение у акцентной карточки и точки графика. Радиальная часть grad-hero сдвинута вправо-вверх (85% 0%): свет падает из угла, как в референсах, и не спорит с текстом, который идёт слева. */ --grad-hero: radial-gradient(120% 150% at 85% 0%, rgb(var(--primary-rgb) / .55) 0%, rgb(var(--primary-rgb) / .14) 48%, transparent 100%), linear-gradient(135deg, rgb(var(--primary-rgb) / .30) 0%, rgb(var(--primary-rgb) / .06) 100%); --grad-soft: linear-gradient(180deg, rgb(var(--primary-rgb) / .10) 0%, rgb(var(--primary-rgb) / .02) 100%); --grad-btn: linear-gradient(135deg, var(--primary2) 0%, var(--primary) 100%); --glow-sm: 0 6px 20px -8px rgb(var(--primary-rgb) / .55); --glow-md: 0 10px 34px -10px rgb(var(--primary-rgb) / .70); /* ── Скругления ──────────────────────────────────────────────────────── Замер по живому DOM (08.08.2026): на экранах встречалось ДЕСЯТЬ разных радиусов, в самом файле — восемнадцать значений от 2 до 999px, включая пары вроде 6/7/9 и 10/11, различить которые глазом нельзя, а вот несобранность интерфейса они дают. Шкала ровно на пять шагов, как у теней и длительностей: r-xs — мелочь внутри строк (чипы, иконки, бейджи); r-sm — кнопки, поля ввода, вложенные блоки; r-md — плитки и карточки внутри панели; r-lg — панели, модальные окна; r-xl — крупные карточки, hero-блоки; r-pill — всё, что должно быть капсулой. Значения 14/18/20/24 намеренно оставлены как есть в нескольких местах: они подобраны под вложенность (внутренний радиус = внешний − отступ), и сведение их к шкале дало бы видимый «нотч» на скруглении. */ /* Фокус-кольцо одним токеном: до этого кольцо рисовалось двумя разными цветами — глобальное правило брало --primary, а семь локальных (календарь, калькулятор) — --primary2. При переходе табом по одной странице подсветка меняла оттенок, хотя это ОДНО состояние: «сюда сейчас попадёт нажатие». Толщина и отступ тоже здесь — менять их поштучно негде. */ --ring: var(--primary2); --ring-w: 2px; /* ── Высоты элементов управления ─────────────────────────────────────── Замер по живому DOM (08.08.2026): на четырнадцати экранах встретилось ШЕСТНАДЦАТЬ разных высот кнопок, из них 27 кнопок ниже 32px — включая «Создать», «Открыть» и «Создать КП» в чеклисте первых шагов (27px). Это одновременно и неопрятно, и трудно попасть. Три шага: h-sm — компактные (фильтры, чипы, кнопки в строках таблиц), h-md — обычные кнопки и поля ввода, h-lg — главные действия и всё, до чего дотягиваются пальцем. Задаём МИНИМУМ, а не фиксированную высоту: кнопка с длинной подписью в две строки должна вырастать, а не обрезаться. Поэтому крупные кнопки (42–46px) остаются как есть — разнобой снизу опаснее. */ --h-sm: 32px; --h-md: 36px; --h-lg: 44px; /* Шкала из DESIGN.md §5: 4 бейдж/чип · 8 инпут/мелкая кнопка · 12 вторичная карточка · 16 основная карточка и модалка · 24 нижний лист и крупные standalone-панели (экран входа, страница брифа, портал клиента). --r-md: 10px — единственное значение вне спеки, оставлено под мелкие внутренние элементы, которых в DESIGN.md нет. */ --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px; /* ── Движение ────────────────────────────────────────────────────────── До этих токенов длительности расползлись по файлу десятью значениями (.12/.14/.15/.16/.18/.2/.22/.3/.35s) и пятью кривыми, из-за чего соседние элементы на одном экране двигались с разной скоростью. Три шага хватает: dur-1 — отклик на нажатие/наведение, глазом не читается как анимация; dur-2 — смена состояния (подсветка, раскрытие); dur-3 — появление слоя (модалка, шторка, всплывашка). ease-out для входа, ease-in для ухода, spring — только там, где нужен «отскок» (кружок схемы, счётчик), иначе интерфейс начинает пружинить весь. Уважение к prefers-reduced-motion — глобальным правилом ниже, не здесь. */ --dur-1: .12s; --dur-2: .2s; --dur-3: .32s; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --input: rgba(19, 19, 27, .95); /* Z-index scale */ --z-sticky: 40; --z-topbar: 50; --z-dropdown: 200; --z-notif: 300; --z-modal: 500; --z-search: 600; --z-toast: 700; --z-tooltip: 800; --z-tour: 850; --z-auth: 999; } [data-theme="light"] { --bg: #f0f2f5; --bg2: #ffffff; --panel: rgba(255, 255, 255, .98); --panel2: rgba(244, 246, 249, .98); --text: #1a2332; --muted: #4a5568; --hint: #94a3b8; --line: rgba(30, 41, 59, .14); --empty-bg: rgba(30, 41, 59, .02); --input: #ffffff; --shadow: 0 2px 12px rgba(0, 0, 0, .09); /* Высоты для СВЕТЛОЙ темы. Раньше их не было вовсе: :root задаёт тени под тёмный фон (до 36% и 52% чёрного), и светлая тема брала их как есть. Замер: карточка в покое имела rgba(0,0,0,.09), а под курсором получала rgba(0,0,0,.36) с размытием 24px — тень темнела вчетверо и вырастала вдвое, читаясь грязным пятном под каждой карточкой. На светлом фоне тень работает иначе: её задача — приподнять край, а не затемнить область. Поэтому меньше прозрачности, меньше размытие и синеватый оттенок подложки (30,41,59) вместо чистого чёрного — чистый чёрный на белом выглядит грязным, а не глубоким. */ --elev-0: 0 1px 2px rgba(30, 41, 59, .06); --elev-1: 0 2px 8px rgba(30, 41, 59, .08), 0 1px 2px rgba(30, 41, 59, .05); --elev-2: 0 6px 18px rgba(30, 41, 59, .10), 0 2px 6px rgba(30, 41, 59, .06); --elev-3: 0 16px 40px rgba(30, 41, 59, .16), 0 4px 12px rgba(30, 41, 59, .08); --primary: #5b4ee8; --primary2: #7c6fef; --primary-rgb: 91 78 232; --primary-bg: rgb(var(--primary-rgb) / .09); /* on-tint темнее, чем primary-text, и это не опечатка: подсветки местами накладываются друг на друга (активный пункт каталога + счётчик внутри него), и суммарный тинт заметно темнее одиночного. На нём #6d28d9 даёт 4.33:1. Ловится тестом «текст в интерфейсе: контраст отвечает WCAG AA». */ --primary-on-tint: #5b21b6; --primary-text: #6d28d9; --blue: #2563eb; --cyan: #0891b2; --green: #16a34a; --yellow: #ca8a04; --orange: #ea580c; --red: #dc2626; --violet: #7c3aed; /* Светлая тема: та же цель 5-6:1. Прежние значения уходили в другую крайность — #991b1b (7.4:1) читается кирпично-бурым, а не красным. Плюс здесь закрыт скрытый промах: --text-success был var(--green-strong) = #15803d, и на фоне страницы --bg #f0f2f5 это 4.47:1 — ниже AA. Пробник a11y ловил его только на белых панелях (5.02:1), поэтому тест молчал. */ --text-success: #14783c; --text-danger: #c81e1e; --text-info: var(--blue-strong); --text-warning: #b8400c; /* Тёмные варианты тех же оттенков: на белом читаются 5-8:1 вместо 2-4:1. У зелёного, оранжевого и янтарного взята 800-я ступень, а не 700-я: на 700-й замер давал 4,29-4,47:1 — формально ниже порога AA 4,5:1. */ --tint-violet: #6d28d9; --tint-blue: #1d4ed8; --tint-green: #166534; --tint-orange: #9a3412; --tint-cyan: #155e75; --tint-pink: #be185d; --tint-amber: #854d0e; --tint-indigo: #4338ca; --tint-red: #991b1b; --tint-slate: #475569; /* Градиенты и свечение в светлой теме — вдвое тише. Те же значения, что в тёмной, на белой панели читаются как грязное пятно: там свет ложится НА тёмное, здесь — на светлое, и глазу нужен куда меньший перепад. */ --grad-hero: radial-gradient(120% 150% at 85% 0%, rgb(var(--primary-rgb) / .28) 0%, rgb(var(--primary-rgb) / .08) 48%, transparent 100%), linear-gradient(135deg, rgb(var(--primary-rgb) / .16) 0%, rgb(var(--primary-rgb) / .03) 100%); --grad-soft: linear-gradient(180deg, rgb(var(--primary-rgb) / .07) 0%, rgb(var(--primary-rgb) / .015) 100%); --glow-sm: 0 6px 18px -10px rgb(var(--primary-rgb) / .45); --glow-md: 0 10px 28px -12px rgb(var(--primary-rgb) / .50); } /* ── Цветовые схемы (акцент) ───────────────────────────────────────────── Настройки → Оформление. Схема меняет ТОЛЬКО акцент; фоны, текст и статусные цвета (успех/ошибка) общие — иначе «зелёная» схема сделала бы неотличимыми акцент и признак успеха, а «красная» — акцент и ошибку. По той же причине в наборе нет красной схемы: она конфликтует с --text-danger. Специфичность: [data-accent=…] и [data-theme=light] равны (0,1,0), поэтому светлые значения задаются парой селекторов (0,2,0) — она выигрывает независимо от порядка правил в файле. Каждое значение проверено на AA: --primary держит ≥4.5:1 с белой подписью кнопки, --primary-text — ≥4.5:1 на всех трёх фонах своей темы. Сторож: tests/suites/a11y.js «цветовые схемы читаемы в обеих темах». */ [data-accent="indigo"] { --primary: #1f6feb; --primary2: #4d9dff; --primary-rgb: 31 111 235; --primary-text: #6ba8ff; --primary-on-tint: #6ba8ff; } [data-theme="light"][data-accent="indigo"] { --primary: #1d4ed8; --primary2: #3b82f6; --primary-rgb: 29 78 216; --primary-text: #1d4ed8; --primary-on-tint: #1e40af; } [data-accent="emerald"] { --primary: #0a7a43; --primary2: #16b364; --primary-rgb: 10 122 67; --primary-text: #22c55e; --primary-on-tint: #22c55e; } [data-theme="light"][data-accent="emerald"] { --primary: #047857; --primary2: #10b981; --primary-rgb: 4 120 87; --primary-text: #14783c; --primary-on-tint: #14532d; } [data-accent="amber"] { --primary: #b45309; --primary2: #e08c0b; --primary-rgb: 180 83 9; --primary-text: #f0b429; --primary-on-tint: #f0b429; } [data-theme="light"][data-accent="amber"] { --primary: #b45309; --primary2: #d97706; --primary-rgb: 180 83 9; --primary-text: #9a4c07; --primary-on-tint: #713f12; } [data-accent="teal"] { --primary: #0d7f8f; --primary2: #14b8c4; --primary-rgb: 13 127 143; --primary-text: #22d3ee; --primary-on-tint: #22d3ee; } [data-theme="light"][data-accent="teal"] { --primary: #0f766e; --primary2: #0d9488; --primary-rgb: 15 118 110; --primary-text: #0e6b64; --primary-on-tint: #115e59; } [data-accent="graphite"] { --primary: #4b5563; --primary2: #7c8a9e; --primary-rgb: 75 85 99; --primary-text: #9aa8bc; --primary-on-tint: #9aa8bc; } [data-theme="light"][data-accent="graphite"] { --primary: #475569; --primary2: #64748b; --primary-rgb: 71 85 105; --primary-text: #3f4c5f; --primary-on-tint: #3f4c5f; } /* Сине-стальная. Отличается от «Синей» (indigo) тем, что уходит не в чистый синий, а в холодный сине-серый: с ним градиенты и свечение дают ту самую «ночную» подачу аналитических панелей, ради которой схему и заводили. От «Графитовой» отличается наличием цвета — та полностью нейтральна. */ [data-accent="midnight"] { --primary: #3352d1; --primary2: #6d8bff; --primary-rgb: 51 82 209; --primary-text: #8fa8ff; --primary-on-tint: #8fa8ff; } [data-theme="light"][data-accent="midnight"] { --primary: #2f49b8; --primary2: #4d6ae0; --primary-rgb: 47 73 184; --primary-text: #2a4099; --primary-on-tint: #24377f; } [data-theme="light"] body { background: radial-gradient(circle at top left, rgb(var(--primary-rgb) / .06), transparent 40%), linear-gradient(160deg, #f0f2f5 0%, #e6e9ee 100%); } [data-theme="light"] .topbar { background: rgba(255, 255, 255, .96); border-bottom-color: rgba(30, 41, 59, .12); } * { box-sizing: border-box; } /* Единый видимый focus-индикатор для клавиатурной навигации (WCAG 2.1 AA §2.4.7). :focus-visible (не :focus) — рамка появляется только при Tab, не при клике мышью. Работает глобально, поверх любых локальных outline:none (input/select/textarea и т.п.) */ :focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 2px; border-radius: var(--r-xs); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } html, body { min-height: 100%; } body { margin: 0; overflow-x: hidden; font-family: var(--font-ui); background: radial-gradient(circle at top left, rgb(var(--primary-rgb) / .12), transparent 40%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); color: var(--text); } button, input, textarea, select { font: inherit; } button { cursor: pointer; } .app { display: flex; min-height: 100vh; } /* ── Sidebar ───────────────────────────────────────── */ .app-sidebar { width: 224px; flex: 0 0 224px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bg2); border-right: 1px solid var(--line); overflow: hidden; z-index: var(--z-sticky); scrollbar-width: none; transition: width var(--dur-3) var(--ease-out), flex-basis var(--dur-3) var(--ease-out); } .app-sidebar::-webkit-scrollbar { display: none; } .app-sidebar:empty { display: none; } /* Sidebar labels — fade+clip instead of display:none so they can transition */ .sidebar-label, .sidebar-brand-name, .sidebar-brand-sub, .sidebar-project-hint, .sidebar-badge { overflow: hidden; flex-shrink: 1; max-width: 200px; opacity: 1; /* fade slightly after width starts expanding; hide before width finishes collapsing */ transition: max-width var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); } /* ── Collapsed sidebar ─────────────────────────────── */ .app-sidebar.collapsed { width: 64px; flex: 0 0 64px; } .app-sidebar.collapsed .sidebar-label, .app-sidebar.collapsed .sidebar-brand-name, .app-sidebar.collapsed .sidebar-brand-sub, .app-sidebar.collapsed .sidebar-project-hint, .app-sidebar.collapsed .sidebar-badge { max-width: 0; opacity: 0; pointer-events: none; } .app-sidebar.collapsed .sidebar-header { padding: 14px 16px; } .app-sidebar.collapsed .sidebar-brand { gap: 0; } .app-sidebar.collapsed .sidebar-nav { padding: 6px; } .app-sidebar.collapsed .sidebar-nav-item { padding: 10px 18px; gap: 0; border-radius: var(--r-md); } .app-sidebar.collapsed .sidebar-nav-item svg { color: var(--text); opacity: .6; } .app-sidebar.collapsed .sidebar-nav-item.active svg { opacity: 1; color: var(--primary-text); } .app-sidebar.collapsed .sidebar-nav-item:hover svg { opacity: 1; } .app-sidebar.collapsed .sidebar-footer { padding: 6px; } .app-sidebar.collapsed .sidebar-footer .sidebar-nav-item { padding: 10px 18px; } /* CSS tooltip при наведении в collapsed */ .app-sidebar.collapsed .sidebar-nav-item { position: relative; } .app-sidebar.collapsed .sidebar-nav-item[title]::after { content: attr(title); position: fixed; left: 72px; background: var(--panel); color: var(--text); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); white-space: nowrap; pointer-events: none; opacity: 0; /* Второе значение — ЗАДЕРЖКА, а не длительность: подсказка не выскакивает сразу, пока курсор просто проезжает мимо. Токен сюда не подставлять. */ transition: opacity var(--dur-1) .06s; z-index: var(--z-tooltip); box-shadow: var(--elev-2); } .app-sidebar.collapsed .sidebar-nav-item[title]:hover::after { opacity: 1; } /* ── Sidebar header ─────────────────────────────────── */ .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 12px; flex-shrink: 0; transition: padding var(--dur-3) var(--ease-out); } .sidebar-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; flex: 1; -webkit-user-select: none; user-select: none; transition: gap var(--dur-3) var(--ease-out); } .sidebar-collapse-btn { display: none; } /* Текущий проект под Смета */ .sidebar-project-hint { display: block; font-size: 12px; color: var(--primary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; margin-top: 1px; } @media (prefers-reduced-motion: reduce) { .app-sidebar { transition: none; } } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } .sidebar-brand .logo { width: 34px; height: 34px; border-radius: var(--r-md); flex-shrink: 0; } .sidebar-brand-name { font-size: 13px; font-weight: 900; letter-spacing: .2px; line-height: 1.2; white-space: nowrap; } .sidebar-brand-sub { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; } .sidebar-nav { padding: 10px 8px; flex: 1; display: flex; flex-direction: column; gap: 1px; transition: padding var(--dur-3) var(--ease-out); /* Список может прокручиваться, а шапка и подвал (профиль, «Выйти») — нет. Меню высотой ровно в экран с overflow:hidden, и без этих двух строк на невысоком экране НИЗ МЕНЮ СРЕЗАЛСЯ: замер 11.09.2026 — на 700px «Выйти» уходил за край на 9px, на 600px на 109px, а у суперадмина подвал ещё выше на строку «Admin Panel». Ноутбук 1366×768 даёт в браузере как раз 650–700px. Полоса прокрутки скрыта, как у самого меню. */ min-height: 0; overflow-y: auto; scrollbar-width: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .sidebar-nav-config { position: fixed; width: 208px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.4); z-index: var(--z-modal); animation: catalogQtyPop .16s cubic-bezier(.16,1,.3,1); } .sidebar-nav-config-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px 8px; } .sidebar-nav-config-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--r-sm); cursor: grab; } .sidebar-nav-config-row:hover { background: var(--panel2); } .sidebar-nav-config-label { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav-switch { flex: 0 0 auto; width: 34px; height: 20px; border-radius: var(--r-pill); border: none; background: var(--line); position: relative; cursor: pointer; transition: background var(--dur-1); } .sidebar-nav-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-color); transition: transform var(--dur-1); } .sidebar-nav-switch.on { background: var(--primary); } .sidebar-nav-switch.on::after { transform: translateX(14px); } /* ── PWA INSTALL TOAST ───────────────────────────── */ .pwa-install-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast); display: flex; align-items: center; gap: 12px; max-width: min(440px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 12px 14px; box-shadow: 0 20px 56px rgba(0,0,0,.45); animation: pwaToastSlideUp .25s cubic-bezier(.16,1,.3,1); } @keyframes pwaToastSlideUp { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .pwa-install-toast-icon { width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0; } .pwa-install-toast-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .pwa-install-toast-text strong { font-size: 13px; } .pwa-install-toast-text span { font-size: 12px; color: var(--muted); } .pwa-install-toast-close { flex: 0 0 auto; background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; } .pwa-install-toast-close:hover { color: var(--text); } @media (max-width: 480px) { .pwa-install-toast { left: 16px; right: 16px; bottom: 76px; transform: none; max-width: none; } @keyframes pwaToastSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } } .sidebar-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; text-align: left; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), padding var(--dur-3) var(--ease-out), gap var(--dur-3) var(--ease-out); white-space: nowrap; } .sidebar-nav-item svg { flex-shrink: 0; opacity: .65; transition: opacity var(--dur-1), color var(--dur-3) var(--ease-out); } .sidebar-nav-item:hover { background: var(--primary-bg); color: var(--text); border-color: rgb(var(--primary-rgb) / .14); } .sidebar-nav-item:hover svg { opacity: 1; } .sidebar-nav-item.active { background: rgb(var(--primary-rgb) / .14); color: var(--primary-on-tint); border-color: rgb(var(--primary-rgb) / .26); } .sidebar-nav-item.active svg { opacity: 1; color: var(--primary-text); } .sidebar-divider { height: 1px; background: var(--line); margin: 6px 10px; } .sidebar-section-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 10px 12px 4px; opacity: .7; } .sidebar-footer { border-top: 1px solid var(--line); padding: 12px 10px; flex-shrink: 0; transition: padding var(--dur-3) var(--ease-out); } /* ── Профиль + выход одной строкой ─────────────────────────────────────── Просьба владельца 11.09.2026: «Выйти» отдельной строкой занимал место. Теперь это значок справа от профиля. Вплотную к имени промахнуться легко, а выход не переспрашивает — поэтому два нажатия, и оба видны глазом: покой — приглушённый значок двери; наведение — краснеет, стрелка «выходит» из двери на 2px; 1-е нажатие — раскрывается в красную пилюлю «Выйти?» (ширина текста едет от 0, имя слева уступает место и уходит в многоточие); 2-е нажатие — выход. Через 3 с или по уходу фокуса — схлопывается. */ .sidebar-user-row { display: flex; align-items: center; gap: 4px; } .sidebar-user-row .sidebar-user-main { flex: 1 1 auto; min-width: 0; } .sidebar-logout { flex: 0 0 auto; height: 32px; min-width: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 0; border: none; border-radius: var(--r-md); background: transparent; color: var(--muted); font: inherit; cursor: pointer; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), gap var(--dur-3) var(--ease-out); } .sidebar-logout-text { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 12.5px; font-weight: 700; transition: max-width var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); } .sidebar-logout-arrow { transition: transform var(--dur-2) var(--ease-out); } .sidebar-logout:hover { color: var(--text-danger); background: color-mix(in srgb, var(--red) 12%, transparent); } .sidebar-logout:hover .sidebar-logout-arrow { transform: translateX(2px); } .sidebar-logout.armed { gap: 6px; background: var(--red); color: var(--on-color); } .sidebar-logout.armed .sidebar-logout-text { max-width: 64px; opacity: 1; } .sidebar-logout.armed .sidebar-logout-arrow { transform: translateX(2px); } /* Свёрнутое меню — 64px: строка встаёт столбиком, пилюле раскрыться некуда, поэтому взведённое состояние там — просто красный значок. */ .app-sidebar.collapsed .sidebar-user-row { flex-direction: column; gap: 2px; } .app-sidebar.collapsed .sidebar-logout-text { display: none; } @media (prefers-reduced-motion: reduce) { .sidebar-logout, .sidebar-logout-text, .sidebar-logout-arrow { transition: none; } } /* ── Карточка своего продукта в боковом меню ───────────────────────────── Просьба владельца 11.09.2026: рекламировать в пустом месте меню свои другие продукты. Сейчас один — Premium Stock (stock.adervis.ru). Меню высотой ровно в экран и с overflow:hidden — прокрутки в нём НЕТ. Карточка, которой не хватило места, вытолкнула бы за край «Выйти» и профиль. Поэтому слот занимает только ОСТАВШЕЕСЯ место (flex 1 1 0), а сама карточка решает по его высоте: полная, короткая или никакой. Тон — тон самого продукта: «надёжный, прямой, быстрый», без кислотных градиентов и мигания (PRODUCT.md Premium Stock). Своя тёмная айдентика в обеих темах: это карточка продукта, а не наш интерфейс. */ .side-promo-slot { flex: 1 1 0; min-height: 0; container: sidepromo / size; display: flex; flex-direction: column; justify-content: flex-end; /* Без своих отступов: слот обязан сжиматься ДО НУЛЯ. Первая версия держала padding-top: 12px — сжаться ниже он не давал и сдвигал «Выйти» на 13px вниз как раз там, где места и так нет. Отступ сверху — у обёртки, и исчезает вместе с ней. -1px гасит зазор gap:1px, который списку достаётся от лишнего ребёнка. */ margin-top: -1px; } .app-sidebar.collapsed .side-promo-slot { display: none; } /* Крестик привязан к обёртке карточки, а не к слоту: карточка прижата к низу слота, и при высоком слоте крестик висел бы далеко над ней. */ .side-promo-wrap { position: relative; margin-top: 12px; } .side-promo { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-xl); /* Сплошной фон ОТДЕЛЬНОЙ строкой: браузер без color-mix отбросит следующее объявление целиком, вместе с --stock-ink внутри, — и белый текст остался бы на светлом меню невидимым. */ background: var(--stock-ink); background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--stock-gold) 16%, transparent), transparent 62%), var(--stock-ink); border: 1px solid color-mix(in srgb, var(--stock-gold) 22%, transparent); color: var(--on-color); text-decoration: none; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .side-promo:hover { border-color: color-mix(in srgb, var(--stock-gold) 50%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--stock-gold) 14%, transparent); } /* Постоянное движение карточки (владелец 28.09.2026: «баннер adervis stock должен быть с анимацией постоянной»). Три спокойных слоя: золотое свечение медленно дрейфует, по карточке раз в несколько секунд проходит блик, кнопка мягко «дышит». Всё — ПОД текстом (слой наложения карточки и z-index:-1) и на transform/opacity: композитор двигает готовые слои, перерисовки нет. */ .side-promo { position: relative; overflow: hidden; isolation: isolate; } .side-promo::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 150%; height: 150%; top: -55%; left: -25%; background: radial-gradient(closest-side, color-mix(in srgb, var(--stock-gold) 24%, transparent), transparent); animation: stockGlow 9s ease-in-out infinite alternate; } @keyframes stockGlow { 0% { transform: translate(28%, -6%) scale(.8); } 50% { transform: translate(-12%, 18%) scale(1); } 100% { transform: translate(18%, 42%) scale(.9); } } .side-promo::after { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--on-color) 11%, transparent) 50%, transparent); animation: stockShine 5.6s ease-in-out infinite; } @keyframes stockShine { 0%, 55% { transform: translateX(0); } 85%, 100% { transform: translateX(420%); } } @keyframes stockCta { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stock-gold) 0%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--stock-gold) 18%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--stock-gold) 60%, transparent); } } /* Фокус — наш, а не золотой: кольцо одно на всё приложение (сторож в assets), иначе при переходе табом подсветка меняла бы оттенок на этой карточке. */ .side-promo:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 2px; } .side-promo-logo { height: 26px; width: auto; align-self: flex-start; display: block; } .side-promo-title { font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; text-wrap: balance; } .side-promo-text { font-size: 12px; line-height: 1.4; color: color-mix(in srgb, var(--on-color) 62%, transparent); } /* Сменяющиеся пары «заголовок + строка» (владелец 02.10.2026: «чтобы читали»). Пары лежат в ОДНОЙ ячейке сетки: высота карточки = самая длинная пара, и при смене ничего не прыгает. Ключевые кадры — под 4 пары по 5 с (SIDE_PROMO_SLIDES / SIDE_PROMO_SLIDE_MS в app.js): 25% цикла на пару, вход и уход по 0,5 с. Фаза приходит из app.js от часов — перерисовка меню смену не обнуляет. Наведение или фокус — пауза, чтобы дочитать. */ .side-promo-msgs { display: grid; } .side-promo-msg { grid-area: 1 / 1; align-self: start; display: flex; flex-direction: column; gap: 8px; } .side-promo-msgs.is-rotating .side-promo-msg { animation: promoMsg 20s var(--ease-out) infinite both; animation-delay: calc(var(--promo-phase, 0ms) + var(--i, 0) * 5s); } .side-promo:hover .side-promo-msg, .side-promo:focus-visible .side-promo-msg { animation-play-state: paused; } @keyframes promoMsg { 0% { opacity: 0; transform: translateY(8px); } 2.5%, 22.5% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-8px); } } .side-promo-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; } .side-promo-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--stock-gold); white-space: nowrap; } /* Кнопка — того же роста и формы, что все .btn.small (правило владельца «стилистика кнопок одинаковая»), только в цветах продукта. Это span, а не button: вся карточка уже ссылка, кнопка внутри ссылки — невалидная разметка. Селектор на класс сильнее, чем кажется нужным: .btn.small той же силы стоит в файле НИЖЕ и перекрашивал кнопку в серый (снимок 11.09.2026). */ .side-promo .btn.side-promo-cta, .side-promo:hover .btn.side-promo-cta { background: linear-gradient(90deg, var(--stock-gold), var(--stock-gold-deep)); border-color: transparent; color: var(--stock-ink); font-weight: 700; animation: stockCta 2.8s ease-in-out infinite; } /* «Уменьшить движение» — анимации карточки выключаем ЯВНО. Общее правило проекта ускоряет их до 0,01 мс, а бесконечная анимация на такой скорости превратилась бы в мерцание. */ @media (prefers-reduced-motion: reduce) { .side-promo::before, .side-promo::after, .side-promo .btn.side-promo-cta, .side-promo-msgs.is-rotating .side-promo-msg { animation: none; } /* без смены — только первая пара, остальные не должны лечь поверх */ .side-promo-msg:not(:first-child) { visibility: hidden; } } .side-promo-close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: none; border-radius: var(--r-sm); display: grid; place-items: center; background: none; cursor: pointer; color: color-mix(in srgb, var(--on-color) 50%, transparent); } .side-promo-close:hover { color: var(--on-color); background: color-mix(in srgb, var(--on-color) 10%, transparent); } /* Места мало — короткая карточка: знак, цена, кнопка. Меньше — никакой: обрезанная реклама хуже отсутствующей. Пороги из замера 11.09.2026: полная карточка 204px + 12px отступа = 216 (берём 224, с запасом на перенос строки), короткая 100 + 12 = 112. Сменится текст — перемерить. */ /* Та же карточка в листе «Разделы» на телефоне — в самом низу, после «Настроить меню». Компактно: без абзаца описания (лист и так длинный). */ .side-promo-wrap--sheet { margin: 14px 4px 4px; } .side-promo-wrap--sheet .side-promo-text { display: none; } @container sidepromo (max-height: 223px) { .side-promo-msgs { display: none; } } @container sidepromo (max-height: 111px) { .side-promo-wrap { display: none; } } .sidebar-user-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 8px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; transition: background var(--dur-1); } .sidebar-user-btn:hover { background: var(--primary-bg); border-color: rgb(var(--primary-rgb) / .12); } .sidebar-user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--on-color); flex-shrink: 0; } .sidebar-user-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.2; } .sidebar-user-sub { font-size: 12px; color: var(--muted); margin-top: 1px; } /* ── Topbar icon buttons ───────────────────────────────── */ /* Значки шапки — в собственных «стеклянных» кружках, а не просто иконки на фоне. Без рамки они висели в пустоте и не читались как кнопки: единственным признаком нажимаемости был курсор, которого на телефоне нет. Рамка едва заметна (6% линии), поэтому шапка не превращается в ряд коробок. */ .topbar-icon-btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel2); border-radius: var(--r-md); color: var(--muted); cursor: pointer; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1); flex-shrink: 0; } .topbar-icon-btn:hover { background: var(--primary-bg); color: var(--text); border-color: rgb(var(--primary-rgb) / .35); box-shadow: var(--glow-sm); } .topbar-utils { display: flex; align-items: center; gap: 2px; } .topbar-page-title { display: none; } .topbar-page-title h2 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -.3px; } .topbar-page-title p { font-size: 12px; color: var(--muted); margin: 1px 0 0; } /* ── Topbar add button — круглая кнопка + ─────────────── */ .topbar-add-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: none; background: var(--primary); color: var(--on-color); font-size: 22px; font-weight: 300; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background var(--dur-1), transform var(--dur-1), box-shadow var(--dur-1); box-shadow: 0 4px 14px rgb(var(--primary-rgb) / .35); flex-shrink: 0; } .topbar-add-btn:hover { background: var(--primary2); transform: scale(1.07); box-shadow: 0 6px 20px rgb(var(--primary-rgb) / .45); } .topbar-add-label, .topbar-add-chevron { display: none !important; } .topbar-add-icon { display: none; } /* ── Topbar: десктоп и мобильные ───────────────────────── Справа всегда: [тема] [поиск] [уведомления] [+] [аватар] Слева на мобильных: лого + горизонтальный нав Слева на десктопе: пусто (sidebar держит навигацию) ────────────────────────────────────────────────────────── */ @media (min-width: 769px) { .topbar { display: flex !important; align-items: center; padding: 0 20px !important; height: 62px; gap: 6px; } /* На десктопе скрываем мобильные элементы */ .topbar .brand, .topbar .burger-btn, .topbar .nav { display: none !important; } .topbar-page-title { display: none !important; } /* Весь .top-actions прижат вправо */ .top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .topbar-icon-btn { width: 38px; height: 38px; } } @media (max-width: 768px) { .topbar-page-title { display: none !important; } /* На мобиле автосохранение не нужно в шапке */ .autosave-indicator { display: none; } } /* Sidebar footer tools (theme + settings) */ .sidebar-footer-tools { display: flex; align-items: center; gap: 4px; padding: 8px 10px 4px; } .sidebar-tool-btn { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: var(--r-sm); color: var(--muted); cursor: pointer; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); flex-shrink: 0; } .sidebar-tool-btn:hover { background: var(--primary-bg); color: var(--text); border-color: rgb(var(--primary-rgb) / .18); } .sidebar-logout-btn { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; border-radius: var(--r-sm); color: var(--muted); cursor: pointer; font-size: 16px; transition: var(--dur-1); flex-shrink: 0; } .sidebar-logout-btn:hover { background: rgba(220,38,38,.1); color: var(--text-danger); border-color: rgba(220,38,38,.3); } /* Hide sidebar + show mobile nav on mobile */ @media (max-width: 768px) { .app-sidebar { display: none !important; } .app { display: block; } .app-main { min-height: 100vh; } } /* brief/portal/calc mode — no sidebar */ body.brief-mode .app-sidebar, body.portal-mode .app-sidebar, body.calc-mode .app-sidebar { display: none !important; } body.brief-mode .app, body.portal-mode .app, body.calc-mode .app { display: block; } .topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: rgba(12, 12, 18, .88); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); } .brand { display: flex; align-items: center; gap: 12px; min-width: 215px; } .logo { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--primary); box-shadow: 0 12px 36px rgb(var(--primary-rgb) / .35); color: var(--on-color); font-weight: 900; flex: 0 0 auto; overflow: hidden; } .logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .logo span { display: none; line-height: 1; } .brand h1 { margin: 0; font-size: 16px; line-height: 1.1; letter-spacing: .2px; } .brand p { margin: 3px 0 0; color: var(--muted); font-size: 12px; } .nav { display: flex; align-items: center; justify-content: flex-start; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; } .nav::-webkit-scrollbar { display: none; } .nav button, /* Иконка внутри кнопки НЕ сжимается. Кнопка — inline-flex, и SVG в ней обычный flex-элемент: при длинной подписи в узкой кнопке он ужимался до нуля и пропадал молча. Замер на 390px: у «Открыть каталог» иконка была 0×15px, у «Выбрать пакет» — 11×15 вместо 15×15. Тем же объяснялся пропавший «+» на кнопке «Своя позиция» в каталоге: элемент в разметке есть, на экране его нет. */ .btn > svg { flex: 0 0 auto; } .btn { border: 1px solid var(--line); background: rgba(15, 23, 42, .45); color: var(--text); border-radius: var(--r-lg); /* 7px по вертикали — как у .btn.small: разницу между обычной и мелкой кнопкой держат кегль и горизонтальный отступ, а не рост. С 9px обычная кнопка выходила на 38–42px против 32–34 у всех остальных и читалась как «большая» (замечание владельца 04.09.2026). На телефоне ниже по файлу действует min-height:44px — цель касания не страдает. */ padding: 7px 14px; min-height: 34px; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; text-decoration: none; /* Кегль ЗАДАН, а не унаследован. Без этой строки высота кнопки зависела от того, куда её положили: в панели с font-size 13px выходило 34px, а там, где наследовались базовые 16px, — 42px. Замер по 14 разделам: 218 кнопок на 32px, 138 на 34px и хвост из 42/40/38/37 — вот эти «большие кнопки» владелец и видел. Разницы задумано не было, она набежала наследованием. 13.5px — на полпункта крупнее .btn.small (13px): обычная кнопка должна читаться чуть весомее мелкой, но не выбиваться из ряда. */ font-size: 13.5px; } .nav button { padding: 7px 10px; font-size: 12px; font-weight: 600; border-radius: var(--r-md); } .nav-icon-btn svg { opacity: .7; flex: 0 0 auto; } .nav-icon-btn:hover svg, .nav-icon-btn.active svg { opacity: 1; } [data-theme="light"] .nav button, [data-theme="light"] .btn { background: rgba(255, 255, 255, .78); } .nav button:hover, .btn:hover { transform: translateY(-1px); border-color: rgb(var(--primary-rgb) / .55); background: rgb(var(--primary-rgb) / .1); } .nav button.active { background: var(--primary); border-color: transparent; color: var(--on-color); } /* Deal bar gets extra top margin to breathe */ .deal-bar { margin-top: 4px; } .top-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 175px; } .container { width: min(1520px, calc(100% - 32px)); margin: 22px auto 42px; } .layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; } /* Грид-элемент по умолчанию имеет min-width:auto и раздувается под самый широкий неразрывный кусок внутри — на телефоне колонка сметы становилась 397px при ширине сетки 374 и утаскивала страницу вбок. Тот же корень, что у обрезки текста через ellipsis: без min-width:0 грид не даёт содержимому сжаться. */ .layout > * { min-width: 0; } /* Правая колонка 360px — под сводку сметы. Но .layout рисуют и без неё: вкладка «Финансы» в сделке кладёт внутрь одну только .panel, и колонка вместе с гэпом простаивала — замер на окне 1250px: сетка 932px, панель 554px, справа 378px пустоты. Из десяти вкладок сделки и четырнадцати разделов это единственное такое место, но правило общее: одинокий ребёнок занимает обе колонки, и резерв под сводку появляется только когда сводка есть. Через :only-child, а не :has(), — в проекте :has() пока не водится. */ .layout > :only-child { grid-column: 1 / -1; } .panel, .summary, .item, .package-card, .project-card, .client-card, .task-card, .finance-card, .team-card, .calendar-card, .crm-card, .proposal-preview { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); } .panel { padding: 18px; min-width: 0; /* без этого .panel как грид-ячейка раздувается под min-content контента (напр. .fin-summary-grid) и ломает мобильную раскладку */ } .summary { position: sticky; top: 86px; padding: 18px; } .section-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; } h1, h2, h3 { margin-top: 0; line-height: 1.15; } h1 { margin-bottom: 6px; font-size: 30px; letter-spacing: -.035em; } h2 { font-size: 22px; letter-spacing: -.025em; } h3 { margin-bottom: 8px; font-size: 17px; letter-spacing: -.015em; } p { color: var(--muted); line-height: 1.45; } .grid { display: grid; gap: 14px; } .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Карточки сделок — адаптивная сетка: 4 в ряд на широком экране, дальше автоматически 3 / 2 / 1 по ширине (минимум карточки 320px). */ .grid.three.deal-cards-grid { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .field { display: grid; gap: 6px; } /* Элемент сетки по умолчанию имеет min-width:auto и не сжимается ниже min-content своего содержимого. min-content у здесь пришлось бы прятать и рисовать заново. */ .appearance-modes { display: flex; gap: 10px; flex-wrap: wrap; } .appearance-mode { display: flex; align-items: center; gap: 9px; padding: 11px 16px; min-height: 44px; /* 44px — минимальный тач-таргет */ border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg2); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); } .appearance-mode:hover { color: var(--text); border-color: var(--primary2); } .appearance-mode:active { transform: scale(.97); } .appearance-mode.active { color: var(--primary-on-tint); border-color: rgb(var(--primary-rgb) / .45); background: var(--primary-bg); } .appearance-mode-ic { display: inline-flex; opacity: .85; } .accent-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .accent-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg2); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); } .accent-chip:hover { color: var(--text); border-color: var(--primary2); } .accent-chip:active { transform: scale(.97); } .accent-chip.active { color: var(--text); border-color: rgb(var(--primary-rgb) / .45); background: var(--primary-bg); } .accent-swatch { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--on-color); /* галочка на насыщенной заливке */ box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transition: transform var(--dur-2) var(--ease-spring); } .accent-chip:hover .accent-swatch { transform: scale(1.12); } .accent-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── «Смета»: постоянная колонка со списком сделок ─────────────────────────── Раньше список сделок жил только в выезжающей панели: чтобы перейти к соседней сделке, её приходилось каждый раз раскрывать кнопкой. На широком экране место есть — держим колонку открытой всегда. На узком она прячется, и там работает прежняя кнопка с панелью (обе разметки в DOM одновременно, поэтому у поля поиска в колонке отдельный id — см. renderDealRailHtml). */ .deal-layout { display: grid; /* Было жёстко 260px: название сделки и имя клиента обрезались почти всегда, а этап с датой стояли встык. Растим вместе с экраном, но не бесконечно — выше 340px колонка начинает отъедать место у самой сметы. */ grid-template-columns: clamp(268px, 20vw, 340px) minmax(0, 1fr); gap: 18px; align-items: start; } .deal-layout-main { min-width: 0; } /* без этого грид растягивается под самую широкую строку сметы */ .deal-rail { position: sticky; /* 86px, как у .summary справа: шапка sticky и имеет высоту 62px, при top:8px колонка уезжала под неё и «Сделки» обрезались. */ top: 86px; display: flex; flex-direction: column; max-height: calc(100dvh - 104px); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; } .deal-rail-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; } .deal-rail-head h3 { margin: 0; font-size: 14px; flex: 1; } /* Ряд колонки «Сделки»: «+» (новая сделка окном) и поиск длинной строкой. */ .deal-rail-actions { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: 0 0 auto; } .deal-rail-add { flex: 0 0 auto; width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--r-md); border: 1px solid rgb(var(--primary-rgb) / .35); background: rgb(var(--primary-rgb) / .1); color: var(--primary-text); cursor: pointer; transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-2) var(--ease-spring); } .deal-rail-add:hover { background: var(--primary); border-color: var(--primary); color: var(--on-color); transform: translateY(-1px); } .deal-rail-add:active { transform: none; } .deal-rail-actions .deal-rail-search { flex: 1 1 auto; min-width: 0; width: auto; } @media (hover: none) and (pointer: coarse) { .deal-rail-add { width: 44px; height: 44px; } } .deal-rail-list { flex: 1 1 auto; overflow-y: auto; padding: 0 8px 10px; } /* Кнопка возврата к автосортировке — в шапке колонки, на месте бывшей «Все». Видна только когда порядок ручной. Базовый вид берёт у .btn small, здесь только иконка в строку с подписью и уплотнение: заголовок «Сделки» рядом, и кнопка не должна его перевешивать. */ .deal-rail-order-reset { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; font-size: 12px; white-space: nowrap; } .deal-rail-order-reset svg { flex: 0 0 auto; } /* Ниже 1440px колонка не помещается рядом со сметой — возвращаемся к кнопке. Было 1100px, и меню разделов слева не учитывалось: на ноутбуке 1280 смете оставалось 360px, позиции резались справа (замер 30.09.2026: 1280 → 360px, 1366 → 441px). Без колонки: 1280 → ~650px, 1366 → ~730px. */ @media (max-width: 1440px) { .deal-layout { display: block; } .deal-rail { display: none; } } /* На широком экране кнопка-переключатель в шапке сделки не нужна: список и так виден слева. Оставляем её только там, где колонка скрыта. */ @media (min-width: 1441px) { .deal-switcher { display: none; } } /* ── Вкладка «Договор» в сделке: выбор шаблона ───────────────────────────── */ .deal-contract-tpl { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 16px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel2); color: var(--text); font: inherit; cursor: pointer; transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .deal-contract-tpl:hover { border-color: rgb(var(--primary-rgb) / .45); background: var(--primary-bg); transform: translateY(-2px); box-shadow: var(--elev-1); } .deal-contract-tpl:active { transform: translateY(-1px) scale(.99); } .deal-contract-tpl-cat { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-text); } .deal-contract-tpl-name { font-size: 14px; font-weight: 800; line-height: 1.3; } .deal-contract-tpl-desc { font-size: 12px; color: var(--muted); line-height: 1.45; } /* ── Табличные цифры у сумм (DESIGN.md §5) ──────────────────────────────── Пропорциональные цифры разной ширины: сумма «прыгает» при пересчёте, а в списках колонка чисел не выравнивается по разрядам. Для CRM, где деньги — главное содержимое, это заметно на каждом экране. Замер живого DOM (04.08) нашёл семь видов сумм без табличных цифр, включая .fin-amount 22px — самое крупное число в «Финансах». Правило намеренно шире одних сумм: у .badge и .kp-row-sub рядом с деньгами стоит текст, а на буквы font-variant-numeric не влияет вовсе — разделять их отдельными обёртками значило бы плодить разметку ради нуля эффекта. */ .funnel-stage .fs-amount, .fin-card .fin-amount, .kp-row-sub, .db-analytics-legend, .db-analytics-legend span, .badge { font-variant-numeric: tabular-nums; } /* ── Всплывающие поверхности в СВЕТЛОЙ теме ─────────────────────────────── Дропдауны, меню, подсказки и модалки несли рукописные тени под тёмный фон — до rgba(0,0,0,.55) при 80px размытия. Замер: универсальный дропдаун в светлой теме давал rgba(0,0,0,.35) при 40px, то есть вдвое тяжелее светлого --elev-3. На белом такая тень читается грязным пятном, а не приподнятой поверхностью. Раньше это чинили точечно: отдельные правила существовали ровно для двух поверхностей из одиннадцати (.profile-dd и .deal-ctx-menu), остальные пропустили. Здесь один список и один токен — новую всплывающую поверхность достаточно дописать сюда, а не подбирать ей тень заново. Тёмная тема не затронута: там рукописные значения остаются как были. */ [data-theme="light"] .uu-select-dd, [data-theme="light"] .profile-dd, [data-theme="light"] .deal-ctx-menu, [data-theme="light"] .help-dd, [data-theme="light"] .currency-select-dd, [data-theme="light"] .global-add-menu, [data-theme="light"] .sidebar-nav-config, [data-theme="light"] .svg-chart-tooltip, [data-theme="light"] .estimate-nav-tooltip-fixed, [data-theme="light"] .tour-popover, [data-theme="light"] .task-modal-box, [data-theme="light"] .auth-gate-box, [data-theme="light"] .deal-card-flying { box-shadow: var(--elev-3); } /* ═══════════════════════════════════════════════════════════════════════════ ЦЕЛИ КАСАНИЯ НА ТЕЛЕФОНЕ — ПОСЛЕДНИЙ БЛОК ФАЙЛА, И ЭТО ВАЖНО Минимум 44px для телефона задан выше (блок «Mobile UX — touch targets», ~строка 6322), но он стоит В СЕРЕДИНЕ файла, и правила компонентов ниже по тексту молча его перебивают: специфичность у них та же, а побеждает то, что позже. Так `.btn.catalog-add-btn { min-height: 32px }` (строка ~6584) оставлял «Добавить» — самую нажимаемую кнопку продукта — высотой 32px, и это же случилось с панелью кнопок сметы («Свернуть всё» вылезала за свою кнопку). Замер на 390×844 до правки, обходом 17 разделов: 137 целей меньше 44px. Поэтому гарантии касания живут ЗДЕСЬ, в самом конце: любое правило выше по файлу они перекрывают, и новый компонент не сможет их отменить, не написав отдельное правило ниже этой строки. Что НЕ трогаем: плотные сетки, где физический размер задан ячейкой (кнопка «+» в дне календаря) — им область касания расширяем невидимым ::after, а не высотой. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .btn, .btn.small, .chip, .tab, .fin-subtab, .fin-quick-btn, .date-preset-btn, .deal-view-btn, .brief-type-chip, .cal-month-pill, .cal-nav2-arrow, .cal-nav2-today, .cal-type-chip, .deal-switcher-btn, .currency-select-btn { min-height: 44px; } /* Иконочные кнопки без подписи: узкие по ширине так же плохо, как низкие. */ .deal-view-btn, .cal-nav2-arrow { min-width: 44px; } /* Кнопка «+» в клетке дня календаря сюда БОЛЬШЕ НЕ ВХОДИТ: на телефоне её нет (правило выше), и расширять область касания у невидимой кнопки — ровно то, из-за чего тап по дню улетал в «Задачи проекта». Расширять можно область ВИДИМОЙ кнопки; невидимой — нельзя, она тогда крадёт чужие нажатия. */ /* Шаг количества в строке каталога («−» и «+», 26×32). Поднимать саму кнопку нельзя — она стоит внутри компактного степпера рядом с числом, и 44px разорвали бы строку позиции. Расширяем невидимую область, как у «+» в календаре. Всплыло 17.08, когда демо-сделка стала собираться из пакета: позиций в смете стало 21 вместо пяти, и степперы появились там, где раньше их просто не было видно — дефект существовал давно, а показался только на объёме. */ .catalog-qty-btn { position: relative; } .catalog-qty-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* Кружок «Готово» в строке задачи — 24×24 по рамке: самое частое действие исполнителя на съёмке, и до правки палец в него не попадал (замер: ни одна из четырёх точек в 20px от центра). Кнопка стоит в плотной строке рядом с названием, поднимать её высоту нельзя — расширяем область, как у степпера. Здесь это безопасно: кнопка ВИДНА, значит область совпадает с тем, во что человек целится. */ .gtask-check { position: relative; } .gtask-check::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } } /* ── ОТКЛИК НА ДОЛГОЕ ДЕЙСТВИЕ ────────────────────────────────────────────── Кнопка, запустившая сетевое действие, показывает, что работа идёт. Раньше отклика не было: «КП-ссылка» уходила на сервер и слала письмо клиенту, а на экране до тоста не менялось ничего — читается как «кнопка не работает», и первое желание нажать ещё раз (что и давало дубли КП). Круг вращается, но опираться ТОЛЬКО на вращение нельзя: при prefers-reduced-motion глобальное правило обнуляет длительность анимаций, и спиннер замирает. Поэтому состояние несут ещё и приглушение с курсором ожидания — они работают без движения. */ .btn.is-busy, button.is-busy { position: relative; cursor: progress; opacity: .72; } .btn.is-busy::before, button.is-busy::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btnBusySpin .7s linear infinite; } @keyframes btnBusySpin { to { transform: rotate(360deg); } } /* Триггер выбора типа брифа — на телефоне вместо ленты, которая показывала три типа из шести и прятала остальные за краем (см. briefTypeListHtml). */ .brief-type-trigger { display: none; } @media (max-width: 640px) { .brief-type-tabs { display: none; } .brief-type-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 16px; padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 800; text-align: left; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; } /* min-width: 0 на подписи — иначе длинное название распирает кнопку и выдавливает шеврон за край. */ .brief-type-trigger-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brief-type-trigger svg { flex: 0 0 auto; color: var(--muted); } } /* Пустые этапы воронки на телефоне скрыты — см. renderCrmHome. На десктопе все одиннадцать помещаются, и «ноль в Договоре» там законный сигнал. */ @media (max-width: 640px) { .crm-home-funnel .funnel-stage--empty { display: none; } } /* ── Админка: карточка пользователя ────────────────────────────────────────── Карточка собиралась одним flex-wrap: аватар, имя, статусы и ШЕСТЬ кнопок в одном потоке. На телефоне это разваливалось в кашу — кнопки переносились по две-три в ряд, последняя (красная «Заблокировать») оставалась сиротой на своей строке, и карточка читалась как свалка. Даём явные зоны: кто → в каком состоянии → что с ним можно сделать. */ .adm-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .adm-card-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex-wrap: wrap; } .adm-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--primary); color: var(--on-color); display: grid; place-items: center; font-size: 14px; font-weight: 900; } /* Цвет аватара — статус подписки: активна, триал, истекла, заблокирован. */ .adm-avatar.is-active { background: var(--green); } .adm-avatar.is-trial { background: var(--yellow); color: var(--bg); } .adm-avatar.is-expired, .adm-avatar.is-none { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); } .adm-avatar.is-blocked { background: color-mix(in srgb, var(--red) 70%, var(--panel2)); } /* Срок: неделя и меньше — янтарь, прошёл — красный. */ .adm-days { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .adm-days.is-soon { color: var(--text-warning); font-weight: 700; } .adm-days.is-late { color: var(--text-danger); } /* «Платежи»: время, пометка «сегодня», номер платежа в ЮKassa. */ .adm-pay-time { margin-top: 2px; font-size: 11.5px; font-variant-numeric: tabular-nums; } .adm-pay-today { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; color: var(--text-success); background: color-mix(in srgb, var(--green) 14%, transparent); } .adm-pay-id { display: block; margin-top: 3px; padding: 0; border: 0; background: none; cursor: copy; font: 11px var(--font-mono); color: var(--muted); } .adm-pay-id:hover { color: var(--primary-text); } /* Правка подписки — карточкой под строкой. */ .adm-edit { border-top: 1px solid var(--line); padding: 16px; background: var(--panel2); } .adm-edit-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 700; } .adm-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; } .adm-edit-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line); } .adm-edit-refund { margin-left: auto; } .adm-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } .adm-actions { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; align-items: center; } /* Колонки правой части. Зона статуса растёт по содержимому (у кого-то метка, у кого-то только «Истекла»), поэтому без фиксированных ширин ряд действий начинался у каждой строки на своей вертикали. Ширины: 300px хватает на самый длинный набор состояния («Истекла · PRO · 22 дн. назад · Амбассадор»), 132px — на самую длинную главную кнопку («Активировать»). */ @media (min-width: 721px) { .adm-status { width: 300px; justify-content: flex-end; } .adm-actions { flex-wrap: nowrap; } .adm-act-main { flex: 0 0 132px; display: flex; justify-content: flex-end; } .adm-act-main .btn { width: 100%; justify-content: center; } .adm-act-tools { display: flex; gap: 6px; flex: 0 0 auto; } } /* Зелёная «Активировать» была залита в тринадцати строках из семнадцати — экран светился одинаково важными кнопками, и глаз не находил ни одной. Контур называет действие не тише, а заливку кнопка получает, когда работают с её строкой. Тот же приём, что в списке сделок и в каталоге. */ .adm-card-row .btn.green { background: transparent; color: var(--text-success); border: 1px solid var(--green); transition: background var(--dur-1), color var(--dur-1); } .adm-card:hover .adm-card-row .btn.green, .adm-card-row .btn.green:hover, .adm-card-row .btn.green:focus-visible { background: var(--green); color: var(--on-color); } /* Аккаунт без записи агентства: действий нет, и вместо ряда кнопок стоит объяснение — почему. Приглушённое, но с предупреждающим знаком: это не ошибка интерфейса, а состояние аккаунта. */ .adm-no-profile { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 6px 10px; border: 1px dashed var(--line); border-radius: var(--r-pill); } .adm-no-profile svg { color: var(--text-warning); flex: 0 0 auto; } @media (max-width: 720px) { /* Три этажа вместо одного потока. Аватар с именем занимают строку целиком, статусы идут под ними, действия — последней строкой. */ .adm-card-row { align-items: flex-start; gap: 10px; padding: 12px 13px; } .adm-who { flex: 1 1 100%; min-width: 0; order: 1; } .adm-avatar { order: 0; } .adm-status { order: 2; flex: 1 1 100%; } /* Действия — СЕТКОЙ, а не переносом: при переносе последняя кнопка вставала одна и ряд выглядел оборванным. Колонки равной ширины, минимум 44px — тач-цель; текстовые кнопки («Активировать», «Возврат») занимают две. */ /* Ровно ЧЕТЫРЕ колонки, а не auto-fit: при автоподборе выходило пять, и семь ячеек (шесть кнопок, одна из них двойная) ложились как 5+2 — вторая строка выглядела огрызком. Четыре дают 4+3, ряд читается целым. */ .adm-actions { order: 3; flex: 1 1 100%; display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* На телефоне зоны растворяются: кнопки должны лечь прямо в эту сетку из четырёх колонок, а не двумя блоками внутри неё. */ .adm-act-main, .adm-act-tools { display: contents; } .adm-actions .btn { min-height: 44px; padding-left: 6px; padding-right: 6px; justify-content: center; } /* Две колонки — только кнопкам с длинной подписью («Активировать», «Возврат»); они помечены классом в разметке. Правило «всё, что не значок» раздувало и «+14д», хотя тому хватает одной колонки. */ .adm-actions .adm-act-wide { grid-column: span 2; } } /* Ряды-ленты админки (вкладки, отборы). Раньше они переносились: шесть отборов вставали в ТРИ строки и съедали треть экрана до первого пользователя. Лента с прокруткой держит одну строку и не прячет порядок — свайп по ней привычен по воронке на главной. Полосу прокрутки прячем: она тут шумит. */ .adm-strip { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 10px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 10px), transparent 100%); } .adm-strip::-webkit-scrollbar { display: none; } .adm-strip > * { flex: 0 0 auto; } @media (max-width: 640px) { .admin-tab { min-height: 44px; } .adm-strip .fin-subtab { min-height: 40px; } } /* Форма промокода в админке: на телефоне четыре колонки не помещаются, поле «Истекает» схлопывалось до иконки календаря. */ @media (max-width: 640px) { .admin-promo-grid { grid-template-columns: 1fr 1fr !important; } } /* Состав пакета на телефоне: колонки заданы жёсткой шириной, и строка выходила за край — под списком появлялась полоса прокрутки вбок. Ужимаем ровно те колонки, которые от этого не теряют смысла. */ @media (max-width: 640px) { /* Прежние правила подрезали ширины полей: строка состава была ОДНОЙ линией (имя + объём + сумма + корзина) и на 390px выходила за край на 6px. С 04.09.2026 строка двухэтажная — имя своей строкой, объём и сумма под ним, — и подрезать больше нечего: ужимать нечему, всё помещается. */ } /* Пояснение к разделу на телефоне: читается один раз, а места занимает три строки между заголовком и работой. Скрываем только там, где экран узкий. */ @media (max-width: 640px) { .hide-on-mobile { display: none !important; } /* Фильтр, сортировка и счётчик — в один ряд. С фиксированными 170 и 150px два выбора занимали всю строку, и счётчик уезжал на третью. */ /* Поиск занимает СВОЮ строку целиком, фильтр с сортировкой и счётчик — вторую. Без явной строки для поиска он делил ряд с выпадашками, и те сжимались до сорока пикселей: от подписей «Без фильтра» и «По названию» оставались одни шевроны. Минимальная ширина 110px — та, при которой подпись ещё читается. */ /* С 02.10.2026 в строке ещё и вид «плитки / список»: поиск делит с ним первую строку (поле остаётся ≥200px), обе выпадашки — вторую. Обёртка инструментов раскладке не мешает (display: contents), порядок — order. */ /* Основа «вся строка минус переключатель вида» — рядом с полем больше ничего не помещается, выпадашки гарантированно уходят на вторую строку. */ .catalog-toolbar .catalog-search-wrap { flex: 1 1 calc(100% - 110px); max-width: none; } .catalog-toolbar-tools { display: contents; } .catalog-toolbar .catalog-view-switch { order: 1; } .catalog-toolbar .catalog-toolbar-select, .catalog-toolbar .uu-select-wrap { order: 2; } .catalog-toolbar .catalog-toolbar-select, /* Обёртка кастомной выпадашки ОБЯЗАТЕЛЬНА в списке: enhanceSelects прячет нативный select и переносит его ширину на .uu-select-wrap — правило, нацеленное только на select, до раскладки не доходит. */ .catalog-toolbar .uu-select-wrap { /* Половина строки, а не 1 1 0: при нулевой основе первая выпадашка влезала в строку поиска (замер 480px, 02.10.2026), поле переставало расти, а скрытый нативный select вылезал за край на 8px. */ flex: 1 1 calc(50% - 5px) !important; width: auto !important; min-width: 110px; } /* Счётчик уходит на свою строку. 110px на выпадашку — та ширина, при которой подпись «ещё читается» в теории; замером на 390px (12.09.2026) вышло «Без фил…» и «По назв…»: шеврон и внутренние отступы съедают из этих 110 около сорока. Счётчик — справочное число, ему отдельная строка стоит дешевле, чем две обрезанные подписи, а выпадашки получают по ~170px и помещаются целиком. */ /* Счётчика в ряду фильтров больше нет — он в шапке раздела над карточками. */ } /* ── Карточка каталога: одна высота в ряду и внятное наведение ────────────── Высота «плясала»: описание бывает в одну строку и в три, у части позиций есть бейдж «Расходы», у части нет — и в ряду под короткой карточкой оставалась дыра до низа соседней (скриншот владельца 29.08.2026). Лечим не подгонкой высот, а строением карточки: она растягивается на всю ячейку сетки, содержимое сверху, ряд действий прижат к низу. Тогда кнопки «Добавить» стоят на одной линии во всём ряду — именно по ним глаз и ведёт. Описание везде две строки (на телефоне так было и раньше): третья и четвёртая не помогают выбрать, а высоту рвут. */ .item--catalog { display: flex; flex-direction: column; height: 100%; } .item--catalog > .item-top { flex: 1 1 auto; } /* Поле цены — одной ширины во всех карточках. Оно объявлено на 190px, но внутри флекс-ряда сжималось вслед за названием: у «3D-элементы и рендер» коробка выходила 91px, у «Адаптация в вертикальный формат» — 124px, и в одном ряду стояли поля разного размера. Ширина 118px — та же, что уже принята на телефоне; «за продукт» под ней помещается. */ .item--catalog .price-editor { flex: 0 0 118px; width: 118px; } .item--catalog .item-top > div:first-child { flex: 1 1 auto; min-width: 0; } .item--catalog .catalog-price-input { width: 100%; } /* Цена в карточке каталога — сперва число, и только потом поле ввода. Рамка с подложкой стояли вокруг каждой цены, а карточек на экране два десятка: сетка получала два десятка тяжёлых прямоугольников, которые спорили с названием позиции. Читают эту сетку ради названия и цены, правят цену редко — поэтому оправа приходит при наведении на карточку и при фокусе, ровно тогда, когда полем собираются пользоваться. Габариты поля не меняются: цель касания остаётся прежней, ничего не «прыгает». */ .item--catalog .catalog-price-input { background: transparent; border-color: transparent; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background var(--dur-1), border-color var(--dur-1); } .item--catalog:hover .catalog-price-input, .item--catalog .catalog-price-input:hover, .item--catalog .catalog-price-input:focus { background: var(--input); border-color: var(--line); } /* Заголовок держит две строки всегда. Иначе у соседей по ряду («Аватар сообщества» в одну строку, «Адаптация в вертикальный формат» в две) описание и бейджи начинались на разной высоте: низ карточек уже выровнен, а середина всё равно «плавала». Две строки — потолок для названия услуги в каталоге из 200 позиций (проверено: длиннее нет), поэтому резерв не создаёт пустоты больше одной строки. */ /* Карточка-шаблон (договоры). Растягивается на ячейку сетки, бейдж категории прижат к низу — у соседей по ряду он стоит на одной линии независимо от того, в одну строку имя шаблона или в две. Наведение — то же, что у карточек каталога: подъём и мягкая тень акцентного тона. */ .tpl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 100%; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel2); color: inherit; font: inherit; cursor: pointer; transition: transform var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2); } .tpl-card h3 { font-size: 13px; margin: 0; line-height: 1.3; } .tpl-card p { font-size: 12px; margin: 0; color: var(--muted); line-height: 1.45; } .tpl-card .badge { margin-top: auto; display: inline-flex; } .tpl-card:hover { transform: translateY(-2px); border-color: rgb(var(--primary-rgb) / .55); box-shadow: 0 8px 22px -10px rgb(var(--primary-rgb) / .45); } .tpl-card:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .tpl-card { transition: none; } .tpl-card:hover { transform: none; } } .item--catalog .item-top h3 { min-height: calc(2 * 1.3em); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Ряд действий — всегда у нижнего края карточки. */ .item--catalog > .no-print:last-child { margin-top: auto; } /* Верх карточки сеткой: название | цена первой строкой, описание и бейджи во всю ширину. Правила выше для .item-top > div:first-child сюда не доходят — обёртки у названия больше нет. */ .item--catalog > .item-top.cat-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: start; align-content: start; } .cat-card-top > h3 { grid-column: 1; grid-row: 1; margin: 0; } .cat-card-top > p, .cat-card-top > .badges { grid-column: 1 / -1; } .item--catalog .cat-card-top > .price-editor { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 0; width: 118px; text-align: right; } .cat-price { display: flex; align-items: center; justify-content: flex-end; gap: 4px; width: 100%; cursor: text; } /* Поле цены — высотой со строку названия (32px, а не 43): иначе первая строка сетки выходила 58px при названии в 44, и между названием и описанием зияла пустота. На пальце поле 44px — минимальная цель касания. */ .item--catalog .cat-price .catalog-price-input { flex: 1 1 auto; min-width: 0; width: 100%; height: 32px; min-height: 0; padding: 2px 4px; text-align: right; } .cat-price-cur { font-size: 15px; font-weight: 700; color: var(--muted); } .cat-price-unit { padding-right: 4px; font-size: 12px; white-space: nowrap; } .item--catalog .cat-card-top > p { margin-top: 6px; } /* Своя позиция: метка «Своя» в цвете акцента и подсказка вместо пустого описания — строка на месте, карточка той же высоты, что соседние. */ .cat-own-pill { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-on-tint); background: rgb(var(--primary-rgb) / .12); border-color: rgb(var(--primary-rgb) / .3); } .item--catalog .cat-card-top > p.cat-desc-empty { color: var(--muted); font-style: italic; opacity: .8; } @media (hover: none) and (pointer: coarse) { .item--catalog .cat-price .catalog-price-input { height: 44px; } } @media (max-width: 640px) { /* 100px вмещают «1 200 000 ₽»; при 118 названию оставалось две строки по слову («Аренда / простой…»). */ .item--catalog .cat-card-top > .price-editor { width: 100px; } /* На телефоне раздел уже назван кнопкой «Раздел» над поиском — от шапки остаются пояснение и число позиций, одной строкой. */ .catalog-section-head:not(.pkg-group-header) .catalog-section-ico, .catalog-section-head:not(.pkg-group-header) h2 { display: none; } .catalog-section-head:not(.pkg-group-header) { margin-bottom: 10px; } } /* Шапка раздела, где из действий только «⋮»: на телефоне .section-title встаёт столбцом, и одинокая кнопка занимала под заголовком целую строку (60px до первого дела). Одна кнопка помещается рядом с заголовком. */ @media (max-width: 768px) { .section-title:has(> .toolbar > .deal-card-menu-wrap:only-child), .section-title.section-title--inline { flex-direction: row; align-items: flex-start; justify-content: space-between; } .section-title--inline > .toolbar { flex: 0 0 auto; } } .item--catalog .item-top p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Наведение: карточка чуть приподнимается, рамка берёт акцентный цвет, под ней мягкая тень того же тона. Не заливка — заливка спорит с ценой и бейджами, а тень поднимает карточку над списком и сразу показывает, что она кликабельна. */ .item--catalog { transition: transform var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2); } .item--catalog:hover { transform: translateY(-2px); border-color: rgb(var(--primary-rgb) / .55); box-shadow: 0 8px 22px -10px rgb(var(--primary-rgb) / .45); } .item--catalog:active { transform: translateY(0); } /* Выбранной карточке подъём не нужен: она и так выделена рамкой и фоном, а прыжок под курсором мешает целиться в «−/+». */ .item--catalog.selected:hover { transform: none; } @media (prefers-reduced-motion: reduce) { .item--catalog { transition: none; } .item--catalog:hover { transform: none; } } /* Карточка каталога на телефоне: цена остаётся В ОДНОЙ СТРОКЕ с названием, а не уезжает отдельным блоком под описание. Замер до правки: карточка 250px, на экран влезало 3,4 услуги — половину высоты занимали поле цены во всю ширину и подпись под ним. Строки сметы это правило НЕ трогает: у них свой класс. */ @media (max-width: 640px) { .item--catalog .item-top { flex-direction: row; align-items: flex-start; gap: 10px; } .item--catalog .item-top > div:first-child { flex: 1 1 auto; min-width: 0; } .item--catalog .price-editor { flex: 0 0 118px; text-align: right; } .item--catalog .catalog-price-input { width: 100%; text-align: right; } /* Описание — две строки. Оно помогает выбрать услугу, но третья и четвёртая строки уже не решают: полный текст виден в карточке позиции по нажатию. Побочно карточки становятся одной высоты, и список читается ровнее. */ .item--catalog .item-top p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* ── «Финансы»: итог за период и движение денег ───────────────────────── Карточка под полосой периода: четыре числа и график «вверх — пришло, вниз — ушло». Раньше итог был серой строкой мелким шрифтом в углу полосы (владелец 30.09.2026: «доделываем финансы с анимацией и графикой»). */ .fin-period { margin: 0 0 14px; padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel2); } .fin-period-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; } .fin-period-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .fin-period-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .fin-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .fin-dot.is-inc { background: var(--green); } .fin-dot.is-exp { background: var(--red); } .fin-period-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fin-period-num.is-inc, .fin-period-num.is-pos { color: var(--text-success); } .fin-period-num.is-exp { color: var(--text-danger); } .fin-period-chart { margin-top: 14px; } .fin-flow { display: block; width: 100%; height: 120px; } .fin-flow-base { stroke: var(--line); stroke-width: 1; } .fin-flow-hit { fill: rgb(var(--primary-rgb) / .08); opacity: 0; transition: opacity var(--dur-1); } .fin-flow-col { cursor: pointer; } .fin-flow-col:hover .fin-flow-hit { opacity: 1; } .fin-flow-inc { fill: url(#finFlowInc); transition: filter var(--dur-1); } .fin-flow-exp { fill: url(#finFlowExp); transition: filter var(--dur-1); } .fin-flow-col:hover .fin-flow-inc { filter: brightness(1.15); } .fin-flow-col:hover .fin-flow-exp { filter: brightness(1.2); } .fin-flow-axis { position: relative; height: 16px; margin-top: 6px; } .fin-flow-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .fin-period-hint { margin-top: 6px; font-size: 11.5px; color: var(--muted); } @media (max-width: 760px) { .fin-period { padding: 14px 14px 10px; } .fin-period-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fin-period-num { font-size: 19px; } } /* ── «Финансы»: движение ───────────────────────────────────────────────── При заходе в раздел — один раз (класс ставит render() только при смене вида): плитки волной, суммы набегают (_countUp), линии прорисовываются, столбики растут, строки проявляются. При смене вкладки — мягкий въезд её содержимого. Строки только проявляются, без сдвига: сдвинутая строка под курсором ловила бы клик не той операции. */ #appContent.fin-enter .fin-summary-grid > .fin-card { animation: homeRiseSoft .6s var(--ease-out) both; } #appContent.fin-enter .fin-summary-grid > .fin-card:nth-child(2) { animation-delay: 50ms; } #appContent.fin-enter .fin-summary-grid > .fin-card:nth-child(3) { animation-delay: 100ms; } #appContent.fin-enter .fin-summary-grid > .fin-card:nth-child(4) { animation-delay: 150ms; } #appContent.fin-enter .fin-summary-grid > .fin-card:nth-child(5) { animation-delay: 200ms; } #appContent.fin-enter .fin-card .spark-line { stroke-dasharray: 1; animation: sparkDraw 1s var(--ease-out) .3s both; } #appContent.fin-enter .fin-card .spark-area { animation: homeFade .8s ease .6s both; } #appContent.fin-enter .fin-card .spark-dot { transform-box: fill-box; transform-origin: center; animation: dotPop .5s var(--ease-spring) 1.1s both; } #appContent.fin-enter .spark-gauge-fill { animation: gaugeDraw 1.15s var(--ease-out) .3s both; } #appContent.fin-enter .fin-period { animation: homeRiseSoft .6s var(--ease-out) .18s both; } #appContent.fin-enter .fin-flow-inc, #appContent.fin-tab-switch .fin-flow-inc { transform-box: fill-box; transform-origin: 50% 100%; animation: barGrow .7s var(--ease-out) both; animation-delay: calc(260ms + var(--i, 0) * 18ms); } #appContent.fin-enter .fin-flow-exp, #appContent.fin-tab-switch .fin-flow-exp { transform-box: fill-box; transform-origin: 50% 0; animation: barGrow .7s var(--ease-out) both; animation-delay: calc(320ms + var(--i, 0) * 18ms); } #appContent.fin-enter .fin-table--ops tbody tr { animation: homeFade .45s ease both; animation-delay: calc(300ms + var(--r, 0) * 28ms); } #appContent.fin-enter .db-bar, #appContent.fin-tab-switch .db-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: barGrow .8s var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 45ms); } #appContent.fin-enter .rank-fill, #appContent.fin-tab-switch .rank-fill { transform-origin: left center; animation: barFillX .9s var(--ease-out) .2s both; } #appContent.fin-tab-switch .fin-subtab-bar ~ * { animation: finTabIn .38s var(--ease-out) both; } @keyframes finTabIn { from { opacity: 0; transform: translateY(6px); } } /* Уменьшенное движение: классы fin-enter / fin-tab-switch render() не ставит вовсе. */ /* ── Смета: значок раздела, действия в строке суммы, движение ─────────── 30.09.2026 (владелец: «делай как думаешь будет лучше и красиво с иконками»). Действия («В опции», копия, удалить) — значками рядом с суммой, а не невидимой полосой в 52px под каждой позицией. */ .item-top .line-ico { flex: 0 0 auto; margin-top: 2px; } /* Колонка суммы на компьютере шириной 190px: значки в потоке выталкивали сумму и стрелку за край карточки. Поэтому они стоят слева от суммы поверх пустого места строки (ряд суммы ужат до содержимого), а на телефоне, где колонка во всю ширину, — обычным рядом. */ .price-editor > div:first-child { position: relative; justify-self: end; } .line-quick { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity var(--dur-1); } @media (max-width: 768px) { .line-quick { position: static; transform: none; margin-right: 2px; } } .item:hover .line-quick, .item:focus-within .line-quick { opacity: 1; } @media (hover: none) { .line-quick { opacity: 1; } } .est-head-total { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); } @keyframes estOpen { from { opacity: 0; transform: translateY(-6px); } } .item.is-leaving { pointer-events: none; } .bill-mode-btn.is-active.is-fresh { animation: segIn .32s var(--ease-spring) both; } @keyframes segIn { from { transform: scale(.86); opacity: .5; } } /* «Монтаж» сводкой: строка выбранного, поля — по «Изменить». */ .calc-fold > .calc-fold-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; cursor: pointer; margin: -2px 0; } .calc-fold > .calc-fold-sum::-webkit-details-marker { display: none; } .calc-fold[open] > .calc-fold-sum { margin-bottom: 12px; } .calc-fold-title { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--text); } .calc-fold-title svg { color: var(--green); } .calc-fold-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 260px; min-width: 0; } .calc-fold-chips span { padding: 3px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 650; white-space: nowrap; color: var(--muted); background: var(--panel); border: 1px solid var(--line); } .calc-fold[open] .calc-fold-chips { display: none; } .calc-fold-edit { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--primary-text); } .calc-fold-edit svg { transition: transform var(--dur-2); transform: rotate(90deg); } .calc-fold[open] .calc-fold-edit svg { transform: rotate(-90deg); } .calc-fold .is-open, .calc-fold[open] .is-closed { display: none; } .calc-fold[open] .is-open { display: inline; } .calc-fold > .calc-fold-sum:hover .calc-fold-edit { text-decoration: underline; } .calc-fold[open] > :not(summary) { animation: estOpen .3s var(--ease-out) both; } /* Поля строки сметы — одного кегля и высоты. Замер 30.09.2026: поля ввода 16px / 44px, выпадающие списки рядом — 13px / 37px; строка читалась «прыгающей». На телефоне ввод остаётся 16px: меньше — и iPhone приближает страницу при фокусе. «Ответственный» делил колонку с «+» и обрезался до «— не назна…» — ему две колонки. */ @media (min-width: 769px) { .item .line-details .field input:not([type="checkbox"]):not([type="radio"]), .item .line-details .field .uu-select-btn { font-size: 14px; min-height: 40px; height: 40px; } .item .line-details .field input:not([type="checkbox"]):not([type="radio"]) { padding-top: 8px; padding-bottom: 8px; } .item .line-details .field input[type="number"] { font-variant-numeric: tabular-nums; } .item .line-details .grid > .field:has(.catalog-action-btn) { grid-column: span 2; } } /* Полоса над сметой: слева главное действие (+ Услуги) и сумма там, где «Итогов» рядом нет; справа настройки сметы — позиции, налог, скидка, «свернуть всё» значком. */ .est-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 14px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-lg); } .est-bar.is-standalone { margin-top: 18px; } .est-bar-total { min-width: 0; } .est-bar-sub { font-size: 12px; color: var(--muted); margin-top: 1px; } .est-bar-icon { width: 34px; padding-left: 0; padding-right: 0; justify-content: center; } /* Сумма в полосе — третья копия, когда «Итоги сметы» стоят рядом (>1160px). */ @media (min-width: 1161px) { body:not(.client-mode) .layout:has(> .summary) .est-bar-total { display: none; } } /* Полоса заметнее, добавление — плитками со значком и подсказкой, ряд «Сразу в раздел» (владелец 30.09.2026: «+услуги и + пакет не понятно»). */ .est-bar { padding: 12px 14px; border-color: rgb(var(--primary-rgb) / .25); background: linear-gradient(135deg, rgb(var(--primary-rgb) / .09), transparent 60%), var(--panel2); } /* «Итоги сметы»: скидка и налог — строками, которые правятся на месте (владелец 30.09.2026). Порядок как в корзине: этапы → скидка → налог → итого. */ .summary-adjust { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 14px; } .summary-adjust .estimate-discount { display: flex; flex-direction: column; gap: 6px; } .summary-adjust-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; text-align: left; } button.summary-adjust-row { cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1); } button.summary-adjust-row:hover { border-color: rgb(var(--primary-rgb) / .45); } .summary-adjust-lbl { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font-weight: 600; } .summary-adjust-lbl svg { color: var(--muted); } .estimate-discount-btn.is-set .summary-adjust-lbl svg { color: var(--text-success); } .summary-adjust-add { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; font-size: 12.5px; font-weight: 700; color: var(--primary-text); } .summary-adjust-row strong { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; padding-right: 4px; } .summary-tax-row select, .summary-tax-row .uu-select-btn { width: auto; max-width: 150px; min-height: 30px; height: 30px; padding: 3px 28px 3px 10px; font-size: 12.5px; border-radius: var(--r-sm); } /* В колонке «Итогов» окошко раскрывается под строкой, а не поверх налога и итога. */ .summary-adjust .estimate-discount-pop { position: static; width: auto; box-shadow: none; background: var(--panel2); animation: estOpen .24s var(--ease-out) both; } @media (hover: none) and (pointer: coarse) { .summary-adjust-row { min-height: 48px; } .summary-tax-row select, .summary-tax-row .uu-select-btn { min-height: 44px; height: 44px; } } /* ── Тур: первый слайд — живая сцена (renderWelcomeScene) ──────────────── Базовые стили = ФИНАЛЬНЫЙ кадр. Анимации живут только под .obx.is-play и прячут элементы в «from»; без is-play (повторный показ, уменьшенное движение) сцена стоит на итоге. Язык движения один: вход cubic-bezier(.16,1,.3,1), перемещение (.65,0,.35,1), без отскоков. */ .ob-mock.is-scene { position: relative; background: linear-gradient(160deg, rgb(var(--primary-rgb) / .16), rgb(var(--primary-rgb) / .03) 55%), var(--panel2); } .obx { --obx-in: cubic-bezier(.16, 1, .3, 1); --obx-move: cubic-bezier(.65, 0, .35, 1); position: relative; height: 100%; container-type: size; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px 56px; padding: 20px 24px 16px; box-sizing: border-box; } .obx-est, .obx-client { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 18px 40px -26px rgb(0 0 0 / .6); } .obx-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--muted); } .obx-line { display: flex; align-items: center; gap: 9px; font-size: 13px; } .obx-line > span:not([style]) { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .obx-line b, .obx-total b { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .obx-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); } .obx-total b { font-size: 22px; color: var(--text); } .obx-send { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: var(--r-md); background: var(--primary); color: var(--on-color); font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px -12px rgb(var(--primary-rgb) / .8); } .obx-link { position: absolute; left: 34%; top: 66%; z-index: 2; opacity: 0; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-color); font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 22px -8px rgb(var(--primary-rgb) / .9); } .obx-client { border-color: rgb(var(--primary-rgb) / .45); } .obx-step { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 650; color: var(--text-success); background: color-mix(in srgb, var(--green) 10%, transparent); } .obx-step.s3 { margin-top: auto; min-height: 40px; color: var(--on-color); background: var(--green); font-weight: 750; } .obx-pipe { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); } .obx-stage { position: relative; z-index: 1; padding: 7px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 650; color: var(--muted); } .obx-stage.is-done, .obx-stage.st1, .obx-stage.st2 { color: var(--text-success); } .obx-stage.st3 { color: var(--on-color); } .obx-kp { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 1px dashed rgb(var(--primary-rgb) / .45); border-radius: var(--r-md); background: rgb(var(--primary-rgb) / .08); font-size: 12.5px; font-weight: 650; } .obx-kp span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .obx-kp b { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; } .obx-kp svg { color: var(--primary-text); } .obx-cursor { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 5); border-radius: var(--r-pill); background: var(--primary); transform: translateX(300%); box-shadow: 0 6px 18px -8px rgb(var(--primary-rgb) / .9); } .obx-replay { /* В строке заголовка карточки «Клиент» — там справа пусто, а в углу сцены кнопка наезжала на рамку карточки. */ position: absolute; right: 34px; top: 29px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; transition: color var(--dur-1), border-color var(--dur-1); } .obx-replay:hover { color: var(--text); border-color: rgb(var(--primary-rgb) / .5); } /* Таймлайн (с): смета 0–2 · отправка 2 · ссылка 2,2–3 · клиент 3–4,4 · воронка 4,7–5,4 */ .obx.is-play .obx-est { animation: obxRise .6s var(--obx-in) both; } .obx.is-play .obx-client { animation: obxRise .6s var(--obx-in) .15s both, obxGlow 1s ease 3s both; } .obx.is-play .obx-line { animation: obxSlide .5s var(--obx-in) both; animation-delay: calc(.4s + var(--i) * .14s); } .obx.is-play .obx-total { animation: obxFade .4s ease .85s both; } .obx.is-play .obx-send { animation: obxFade .4s ease 1.1s both, obxPress .45s var(--obx-move) 2s both; } .obx.is-play .obx-link { animation: obxFly .85s var(--obx-move) 2.2s both; } .obx.is-play .obx-step { animation: obxSlide .45s var(--obx-in) both; } .obx.is-play .obx-step.s1 { animation-delay: 3.05s; } .obx.is-play .obx-step.s2 { animation-delay: 3.55s; } .obx.is-play .obx-step.s3 { animation: obxPay .6s var(--obx-in) 4.05s both; } .obx.is-play .obx-pipe { animation: obxFade .5s ease .3s both; } .obx.is-play .obx-kp { animation: obxRise .5s var(--obx-in) 3s both; } .obx.is-play .obx-cursor { animation: obxCursor 5.4s linear both; } .obx.is-play .obx-stage.st1 { animation: obxSt1 5.4s linear both; } .obx.is-play .obx-stage.st2 { animation: obxSt2 5.4s linear both; } .obx.is-play .obx-stage.st3 { animation: obxSt3 5.4s linear both; } .obx.is-play ~ .obx-replay { animation: obxFade .4s ease 5.6s both; } @keyframes obxRise { from { opacity: 0; transform: translateY(14px); } } @keyframes obxSlide { from { opacity: 0; transform: translateX(-10px); } } @keyframes obxFade { from { opacity: 0; } } @keyframes obxPress { 0%, 100% { transform: none; } 45% { transform: scale(.94); } } @keyframes obxGlow { 0% { box-shadow: 0 0 0 0 rgb(var(--primary-rgb) / .55); } 100% { box-shadow: 0 0 0 14px rgb(var(--primary-rgb) / 0); } } /* Ссылка летит дугой от кнопки к карточке клиента: доли от размера сцены (cqw/cqh). */ @keyframes obxFly { 0% { opacity: 0; transform: translate(0, 0) scale(.8); } 12% { opacity: 1; transform: translate(2cqw, -3cqh) scale(1); } 55% { opacity: 1; transform: translate(16cqw, -34cqh); } 88% { opacity: 1; transform: translate(26cqw, -44cqh) scale(1); } 100% { opacity: 0; transform: translate(28cqw, -46cqh) scale(.7); } } @keyframes obxPay { from { opacity: 0; transform: translateY(8px); color: var(--text-success); background: color-mix(in srgb, var(--green) 10%, transparent); } } @keyframes obxCursor { 0%, 42% { transform: translateX(100%); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 48%, 87% { transform: translateX(200%); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 98%, 100% { transform: translateX(300%); } } @keyframes obxSt1 { 0%, 43% { color: var(--on-color); } 47%, 100% { color: var(--text-success); } } @keyframes obxSt2 { 0%, 43% { color: var(--muted); } 47%, 88% { color: var(--on-color); } 92%, 100% { color: var(--text-success); } } @keyframes obxSt3 { 0%, 92% { color: var(--muted); } 96%, 100% { color: var(--on-color); } } @media (prefers-reduced-motion: reduce) { .obx.is-play *, .obx.is-play, .obx.is-play ~ .obx-replay { animation: none; } } /* Телефон: сцена в столбик, без полёта ссылки — последовательность и так видна. */ @media (max-width: 600px) { .ob-mock.is-scene { aspect-ratio: auto; max-height: none; } .obx-replay { position: static; margin: 0 14px 14px auto; display: flex; width: max-content; } .obx { container-type: normal; grid-template-columns: 1fr; gap: 10px; padding: 14px; } .obx-link { display: none; } /* Полные «КП отправлено» / «Предоплата» на 390px резались до «КП отпр…» — на телефоне короткие подписи из data-short. */ .obx-stage[data-short] { font-size: 0; } .obx-stage[data-short]::after { content: attr(data-short); font-size: 11px; } .obx-stage { font-size: 11px; } } /* Поиск по смете — в полосе над сметой. */ .est-search { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--muted); transition: border-color var(--dur-1); } .est-search:focus-within { border-color: rgb(var(--primary-rgb) / .6); } .est-search input { width: 150px; min-height: 0; height: 32px; padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--text); box-shadow: none; } .est-search input:focus { outline: none; box-shadow: none; } .est-search input:focus-visible { box-shadow: 0 2px 0 var(--primary); } .est-search-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-md); background: rgb(var(--primary-rgb) / .08); font-size: 13px; font-weight: 600; } @media (max-width: 560px) { .est-search { flex: 1 1 auto; } .est-search input { width: 100%; } } /* Свёрнутый этап называет состав. */ .stage-peek { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .stage-peek span { color: var(--hint); } /* «Итоги»: аванс под итогом; строки одного размера (Расходы/Прибыль были крупнее этапов). */ .summary-advance { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .summary .summary-line { font-size: 14px; } /* Полоса одной строкой: поиск · «Каталог» с меню разделов · «Пакет» · свернуть всё. */ .est-search { flex: 1 1 220px; } .est-search input { width: 100%; } .est-bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .est-split { position: relative; display: inline-flex; } .est-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; } .est-split-more > summary { list-style: none; width: 30px; margin-left: -1px; padding-left: 0; padding-right: 0; justify-content: center; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: pointer; } .est-split-more > summary::-webkit-details-marker { display: none; } .est-split-more > summary svg { transform: rotate(90deg); transition: transform var(--dur-2); } .est-split-more[open] > summary svg { transform: rotate(-90deg); } .est-split-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-dropdown); width: 290px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--elev-3); animation: estOpen .2s var(--ease-out) both; } .est-split-menu button { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-1); } .est-split-menu button:hover, .est-split-menu button:focus-visible { background: color-mix(in srgb, var(--c) 12%, transparent); } .est-split-menu button svg { flex: 0 0 auto; margin-top: 2px; color: var(--c); } .est-split-menu b { display: block; font-size: 13px; font-weight: 700; } .est-split-menu small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); } @media (hover: none) and (pointer: coarse) { .est-split-more > summary { width: 44px; } } @media (max-width: 560px) { .est-bar-actions { margin-left: 0; } .est-split-menu { left: 0; right: auto; } } /* «Скидка» и «Налог» — обычными строками «Итогов», без рамок-полей: тонкая линия снизу, как у соседних строк; нажимаемость — подсветкой при наведении. */ .summary-adjust { gap: 0; margin: 2px 0 12px; } .summary-adjust-row { min-height: 44px; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); border: 0; border-radius: var(--r-sm); background: transparent; box-shadow: inset 0 -1px 0 var(--line); } button.summary-adjust-row:hover { background: rgb(var(--primary-rgb) / .06); border-color: transparent; } .summary-adjust-lbl { font-weight: 500; } .estimate-discount-btn.is-set { background: transparent; border-color: transparent; } .estimate-discount-btn.is-set:hover { background: color-mix(in srgb, var(--green) 8%, transparent); } /* ── Тур: сцены слайдов 2–6 (ONBOARD_SCENES) ───────────────────────────── Тот же язык, что у первого слайда: база = финальный кадр, движение только под .obx.is-play. Общая карточка — .obx-card. */ .obx-card { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 18px 40px -26px rgb(0 0 0 / .6); } .obx-av { display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; color: var(--on-color); font-size: 10.5px; font-weight: 800; } .obx-av.is-ghost { background: transparent; border: 1px dashed var(--line); color: var(--muted); } .obx.is-play .obx-card { animation: obxRise .55s var(--obx-in) both; animation-delay: calc(var(--i, 0) * .1s); } /* 2. Воронка: новая сделка переезжает по колонкам до «Предоплаты». */ .obx--kanban { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; } .obx-kb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .obx-newbtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--r-md); background: var(--primary); color: var(--on-color); font-size: 12px; font-weight: 700; } .obx-kb { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 0; } .obx-kb-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 8px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); } .obx-kb-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .obx-kb-h i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .obx-kb-slot { height: 48px; flex: 0 0 auto; } .obx-kb-card, .obx-kb-mover { display: flex; flex-direction: column; justify-content: center; gap: 1px; height: 48px; padding: 0 10px; border-radius: var(--r-md); background: var(--panel2); border: 1px solid var(--line); min-width: 0; } .obx-kb-card b, .obx-kb-mover b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .obx-kb-card small, .obx-kb-mover small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* Путь карточки: слот под заголовком каждой колонки; шаг — ширина колонки + зазор. */ .obx-kb-mover { --kb-step: 28px; /* ширина колонки = ширина карточки + 2×(8 поле + 1 рамка) + 10 зазор */ position: absolute; left: 9px; top: 32px; width: calc((100% - 30px) / 4 - 18px); border-color: rgb(var(--primary-rgb) / .55); background: rgb(var(--primary-rgb) / .14); transform: translateX(calc(3 * (100% + var(--kb-step)))); } .obx-kb-done { position: absolute; right: 8px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--on-color); } .obx.is-play .obx-kb-col { animation: obxRise .5s var(--obx-in) both; animation-delay: calc(var(--i) * .08s); } .obx.is-play .obx-kb-card { animation: obxFade .4s ease both; animation-delay: calc(.3s + var(--j) * .06s); } .obx.is-play .obx-newbtn { animation: obxPress .45s var(--obx-move) .75s both; } .obx.is-play .obx-kb-mover { animation: obxKbMove 3s linear 1s both; } .obx.is-play .obx-kb-done { animation: obxPop .35s var(--obx-in) 3.95s both; } @keyframes obxKbMove { 0% { opacity: 0; transform: translate(0, -10px) scale(.96); } 9% { opacity: 1; transform: translate(0, 0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 26% { transform: translateX(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 38% { transform: translateX(calc(100% + var(--kb-step))); } 52% { transform: translateX(calc(100% + var(--kb-step))); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 64% { transform: translateX(calc(2 * (100% + var(--kb-step)))); } 78% { transform: translateX(calc(2 * (100% + var(--kb-step)))); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 92%, 100% { opacity: 1; transform: translateX(calc(3 * (100% + var(--kb-step)))); } } @keyframes obxPop { from { opacity: 0; transform: scale(.4); } } /* 3. Финансы: плитки набегают, операции въезжают, столбики растут. */ .obx--fin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px 14px; } .obx-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .obx-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--c); } .obx-kpi span { font-size: 11.5px; font-weight: 700; color: var(--muted); } .obx-kpi b { font-family: var(--font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c); white-space: nowrap; } .obx-txr { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; font-size: 12.5px; border-bottom: 1px solid var(--line); } .obx-txr:last-child { border-bottom: 0; } .obx-txr b { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .obx-txr b.is-in { color: var(--text-success); } .obx-txr b.is-out { color: var(--text-danger); } .obx-bars-row { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 8px; min-height: 60px; } .obx-bars-row span { flex: 1 1 0; height: var(--h); border-radius: var(--r-xs) var(--r-xs) 0 0; background: linear-gradient(180deg, var(--green), color-mix(in srgb, var(--green) 40%, transparent)); transform-origin: 50% 100%; } .obx.is-play .obx-kpi { animation: obxRise .5s var(--obx-in) both; animation-delay: calc(var(--i) * .1s); } .obx.is-play .obx-txr { animation: obxSlide .45s var(--obx-in) both; animation-delay: calc(1.4s + var(--i) * .25s); } .obx.is-play .obx-bars-row span { animation: barGrow .7s var(--obx-in) both; animation-delay: calc(2.3s + var(--i) * .09s); } /* 4. Команда: участники, исполнители у задач, отметки, «Синхронизировано». */ .obx--team { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr); gap: 14px; } .obx-person { display: flex; align-items: center; gap: 10px; min-height: 38px; } .obx-person b { display: block; font-size: 13px; } .obx-person small { display: block; font-size: 11.5px; color: var(--muted); } .obx-person.is-add { opacity: .75; } .obx-sync { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; color: var(--text-success); background: color-mix(in srgb, var(--green) 12%, transparent); } .obx-task { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: var(--r-md); background: var(--panel2); } .obx-cb { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--r-xs); border: 1.5px solid var(--line); color: var(--on-color); } .obx-task.is-done .obx-cb { background: var(--green); border-color: var(--green); } .obx-task-t { flex: 1 1 auto; min-width: 0; } .obx-task-t b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .obx-task-t small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); } .obx-task.is-done .obx-task-t b { color: var(--muted); text-decoration: line-through; } .obx.is-play .obx-person { animation: obxSlide .45s var(--obx-in) both; animation-delay: calc(.3s + var(--i) * .15s); } .obx.is-play .obx-task { animation: obxSlide .45s var(--obx-in) both; animation-delay: calc(.9s + var(--i) * .15s); } .obx.is-play .obx-task .obx-av { animation: obxPop .35s var(--obx-in) both; animation-delay: calc(1.8s + var(--i) * .3s); } .obx.is-play .obx-task.is-done .obx-cb { animation: obxCheck .3s ease both; animation-delay: calc(2.9s + var(--i) * .4s); } .obx.is-play .obx-task.is-done .obx-task-t b { animation: obxStrike .3s ease both; animation-delay: calc(2.9s + var(--i) * .4s); } .obx.is-play .obx-sync { animation: obxFade .4s ease 3.8s both; } @keyframes obxCheck { from { background: transparent; border-color: var(--line); color: transparent; } } @keyframes obxStrike { from { color: var(--text); text-decoration-color: transparent; } } /* 5. Настройки: логотип, реквизиты «печатаются», договор сам подставляет данные. */ .obx--set { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); gap: 14px; } .obx-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--primary); color: var(--on-color); font-family: var(--font-display); font-size: 22px; font-weight: 700; box-shadow: 0 8px 20px -10px rgb(var(--primary-rgb) / .9); } .obx-field { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: var(--r-md); background: var(--panel2); } .obx-field small { font-size: 10.5px; color: var(--muted); } .obx-field b { font-size: 13px; white-space: nowrap; overflow: hidden; } .obx-doc-l { font-size: 12.5px; line-height: 1.6; } .obx-doc-sk { height: 7px; border-radius: var(--r-xs); background: var(--line); } .obx-ph { position: relative; display: inline-block; } .obx-ph em { font-style: normal; font-weight: 700; color: var(--primary-text); background: rgb(var(--primary-rgb) / .12); padding: 0 4px; border-radius: var(--r-xs); } .obx-ph s { position: absolute; left: 0; top: 0; text-decoration: none; white-space: nowrap; color: var(--muted); font-family: ui-monospace, monospace; font-size: 11.5px; opacity: 0; } .obx-stamp { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--green); color: var(--on-color); font-size: 12px; font-weight: 700; } .obx.is-play .obx-logo { animation: obxPop .45s var(--obx-in) .4s both; } .obx.is-play .obx-field b { animation: obxType .6s steps(14, end) both; animation-delay: calc(.8s + var(--i) * .5s); } .obx.is-play .obx-ph em { animation: obxFade .35s ease both; animation-delay: calc(2.6s + var(--i) * .35s); } .obx.is-play .obx-ph s { animation: obxPhOut 2.95s linear both; animation-delay: calc(var(--i) * .35s); } .obx.is-play .obx-stamp { animation: obxPop .4s var(--obx-in) 3.9s both; } @keyframes obxType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes obxPhOut { 0% { opacity: 0; } 20%, 85% { opacity: 1; } 100% { opacity: 0; } } /* 6. Тарифы: три карточки, на «Стандарте» «Выбрать» → «Активно». */ .obx--plans { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; } .obx-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 0; } .obx-tier { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 14px 14px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); } .obx-tier.is-rec { border-color: rgb(var(--primary-rgb) / .7); background: linear-gradient(180deg, rgb(var(--primary-rgb) / .14), transparent 60%), var(--panel); } .obx-badge { position: absolute; top: -10px; left: 14px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-color); font-size: 11px; font-weight: 800; } .obx-tier-n { font-family: var(--font-display); font-size: 17px; } .obx-tier > small { font-size: 11.5px; color: var(--muted); } .obx-tier-p { margin: 8px 0 10px; font-family: var(--font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .obx-tier-p small { font-family: inherit; font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 2px; } .obx-tier-btn { position: relative; margin-top: auto; display: grid; place-items: center; min-height: 34px; border-radius: var(--r-md); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--text); overflow: hidden; } .obx-tier.is-rec .obx-tier-btn { border-color: transparent; background: var(--green); color: var(--on-color); } .obx-tier-btn i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; grid-area: 1 / 1; } .obx-tier-btn .is-pick { opacity: 0; } .obx-paychips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .obx-paychips span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); } .obx-paychips svg { color: var(--primary-text); } .obx.is-play .obx-tier { animation: obxRise .55s var(--obx-in) both; animation-delay: calc(var(--i) * .12s); } .obx.is-play .obx-tier.is-rec .obx-tier-btn { animation: obxPayBtn .5s ease 2.2s both, obxPress .45s var(--obx-move) 1.8s both; } .obx.is-play .obx-tier-btn .is-pick { animation: obxPickOut .5s ease 2.2s both; } .obx.is-play .obx-tier-btn .is-on { animation: obxFade .35s ease 2.45s both; } .obx.is-play .obx-paychips span { animation: obxRise .45s var(--obx-in) both; animation-delay: calc(3s + var(--i) * .15s); } @keyframes obxPayBtn { from { background: var(--primary); color: var(--on-color); } } @keyframes obxPickOut { from { opacity: 1; } to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .obx.is-play .obx-card, .obx.is-play [class^="obx-"], .obx.is-play [class*=" obx-"] { animation: none; } } @media (max-width: 600px) { .obx--fin, .obx--team, .obx--set { grid-template-columns: 1fr; grid-template-rows: none; } .obx-kpis { grid-template-columns: 1fr; } .obx-tiers { grid-template-columns: 1fr; } .obx-kb { gap: 6px; } .obx-kb-col { padding: 6px; } .obx-kb-mover { --kb-step: 20px; left: 7px; top: 30px; width: calc((100% - 18px) / 4 - 14px); } .obx-kb-card b, .obx-kb-mover b { font-size: 10.5px; } } /* Карточки сцен — по содержимому, без пустого низа; отличия тарифов. */ .obx--team, .obx--set { align-items: start; } .obx-kb { align-items: stretch; align-content: start; grid-auto-rows: min-content; } /* колонки — по самой высокой, без пустоты до низа */ .obx-tier-f { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 5px; } .obx-tier-f li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .obx-tier-f li svg { flex: 0 0 auto; color: var(--c); } .obx.is-play .obx-tier-f li { animation: obxFade .35s ease both; animation-delay: calc(.6s + var(--i) * .12s + var(--j) * .08s); } /* «Итоги сметы» на ноутбуке уже: 360px оставляли смете слишком мало. */ @media (max-width: 1320px) and (min-width: 1161px) { .layout { grid-template-columns: minmax(0, 1fr) 320px; } } /* Лента этапов на «Проектах» — всегда один ряд на компьютере. Сетка «сколько влезет по 98px» на ноутбуке ставила в ряд 11 плиток из 12, и «Архив» уходил один на вторую строку (владелец 30.09.2026). Теперь плитки делят ширину поровну; длинное название сокращается, полное — в подсказке. Вид и порядок плиток прежние (две переделки ленты 28.09 владелец отклонил). */ @media (min-width: 641px) { .crm-home-funnel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .crm-home-funnel > .funnel-stage { min-width: 0; } .crm-home-funnel > .funnel-stage h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-home-funnel > .funnel-stage .fs-amount { white-space: nowrap; } /* Узкая плитка (ноутбук): сумму не режем многоточием — «1 742 10…» про деньги недопустимо; мельче кегль и поля. */ .crm-home-funnel > .funnel-stage { container-type: inline-size; } } @media (min-width: 641px) and (max-width: 1400px) { .crm-home-funnel > .funnel-stage { padding-left: 7px; padding-right: 7px; } } @container (max-width: 90px) { .funnel-stage .fs-amount { font-size: 10.5px; letter-spacing: -.01em; } .funnel-stage h3 { font-size: 11px; } } /* Поля позиции сметы по карточке, а не по окну: при 1536 с колонкой «Сделки» смете остаётся ~580px, и четыре поля в ряд резались («Подгото…», дата «30.09.202»). Узкая карточка — поля по два в ряд. */ .estimate-stage article.item { container-type: inline-size; } @container (max-width: 640px) { .line-details .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Каталог: подразделы чипами, значок раздела ─────────────────────── */ .catalog-subchips { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 14px; } .catalog-subchip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1), color var(--dur-1); } .catalog-subchip span { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .catalog-subchip:hover { border-color: rgb(var(--primary-rgb) / .5); } .catalog-subchip.is-on { background: rgb(var(--primary-rgb) / .14); border-color: rgb(var(--primary-rgb) / .6); color: var(--primary-text); } .catalog-subchip.is-on span { color: var(--primary-text); } @media (hover: none) and (pointer: coarse) { .catalog-subchip { min-height: 44px; } } .summary-line-mult { font-size: 11.5px; font-weight: 700; color: var(--primary-text); font-variant-numeric: tabular-nums; } .cat-card-ico { display: inline-flex; vertical-align: -2px; margin-right: 6px; } /* Цена на карточке: «45 000 ₽» без дыры — поля и зазор перед знаком сжаты. */ .item--catalog .cat-price { gap: 2px; } .item--catalog .cat-price .catalog-price-input { padding-right: 1px; } /* ── Каталог: вид «списком», пустой поиск с созданием своей позиции ───── Список собран из той же карточки: позиция — одна строка «значок · название · цена за единицу · действия»; описание — в подсказке (title) и в окне позиции. */ .catalog-view-switch { display: inline-flex; gap: 2px; padding: 2px; margin-left: auto; margin-right: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); } .catalog-view-switch button { display: grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; transition: background var(--dur-1), color var(--dur-1); } .catalog-view-switch button:hover { color: var(--text); } .catalog-view-switch button.is-on { background: rgb(var(--primary-rgb) / .16); color: var(--primary-text); } @media (hover: none) and (pointer: coarse) { .catalog-view-switch button { width: 44px; height: 44px; } } .catalog-grid.is-list { grid-template-columns: 1fr; gap: 6px; } .catalog-grid.is-list > .item--catalog { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px; min-height: 0; text-align: left; } .catalog-grid.is-list .cat-card-top { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; } .catalog-grid.is-list .cat-card-top h3 { margin: 0; min-height: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; } .catalog-grid.is-list .cat-card-top > p, .catalog-grid.is-list .cat-card-top > .badges, .catalog-grid.is-list .cat-desc-empty { display: none; } .catalog-grid.is-list .cat-card-top > .price-editor { display: flex; flex-direction: row; align-items: baseline; gap: 6px; width: auto; } .catalog-grid.is-list .cat-price { width: 120px; } .catalog-grid.is-list .cat-price-unit { min-width: 76px; text-align: left; } /* !important — у ряда действий отступ задан в разметке (style), иначе не перебить. */ .catalog-grid.is-list > .item--catalog > .no-print { margin-top: 0 !important; flex: 0 0 auto; } .catalog-empty-create { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 36px 20px; border: 1px dashed var(--line); border-radius: var(--r-xl); color: var(--muted); } .catalog-empty-create b { font-size: 15px; color: var(--text); } .catalog-empty-create span { font-size: 13px; max-width: 360px; } .catalog-empty-create .btn { margin-top: 6px; } @media (max-width: 640px) { .catalog-grid.is-list > .item--catalog { flex-wrap: wrap; } .catalog-grid.is-list .cat-price-unit { display: none; } } /* Колонка разделов каталога — постоянной ширины. Она подстраивалась под содержимое: при добавлении позиции у раздела появлялась метка «✓1», колонка росла с 227 до 254px и сетка карточек уезжала вправо (владелец 30.09.2026: «пусть будет стабильно без сдвигов»). 264px вмещают «Постпродакшн» и оба счётчика. */ @media (min-width: 769px) { .catalog-body > .catalog-cat-sidebar { flex: 0 0 264px; width: 264px; min-width: 0; } .catalog-cat-sidebar .catalog-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ── Календарь: сводка периода, ячейки, список по дням (30.09.2026) ───── */ .cal-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; } .cal-sum-tile { --c: var(--primary); display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel2); color: var(--text); font: inherit; cursor: pointer; box-shadow: inset 3px 0 0 var(--c); transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1); } .cal-sum-tile:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); transform: translateY(-1px); } .cal-sum-tile.is-on { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--panel2)); } .cal-sum-tile.is-inc { --c: var(--green); } .cal-sum-tile.is-exp { --c: var(--orange); } .cal-sum-tile.is-dl { --c: var(--red); } .cal-sum-tile.is-task { --c: var(--blue); } .cal-sum-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .cal-sum-lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); } .cal-sum-tile b { font-family: var(--font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-sum-tile small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 760px) { .cal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cal-sum-tile b { font-size: 17px; } } /* Ячейки: прошедшие дни тише, день с дедлайном — красная черта сверху. */ .cal-cell.is-past .cal-day-num { opacity: .5; } .cal-cell.has-deadline { box-shadow: inset 0 2px 0 var(--red); } /* Список событий по дням. */ .cal-list { display: flex; flex-direction: column; gap: 6px; } .cal-list-day { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; padding-left: 2px; } .cal-list-day:first-child { margin-top: 0; } .cal-list-day b { font-size: 13.5px; } .cal-list-day span { font-size: 12px; color: var(--muted); } .cal-list-day.is-today b, .cal-list-day.is-today span { color: var(--primary-text); } .cal-list-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1); } .cal-list-row:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); background: color-mix(in srgb, var(--c) 5%, var(--panel2)); } .cal-list-row.is-today { border-color: rgb(var(--primary-rgb) / .4); } .cal-list-row.is-past .cal-list-text { opacity: .6; } .cal-list-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--c); } .cal-list-text { flex: 1 1 auto; min-width: 0; } .cal-list-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-list-sum { flex: 0 0 auto; font-family: var(--font-display); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .cal-list-type { flex: 0 0 auto; font-size: 12px; font-weight: 700; white-space: nowrap; } /* Подсказка слева в полосе, когда искать нечего (пустая смета / бюджет одной суммой). */ .est-bar-hint { flex: 1 1 220px; min-width: 0; font-size: 13px; color: var(--muted); padding-left: 4px; } /* Колонка «Сделки»: строки одной структуры (01.10.2026). Пустой ярус «клиент · срок» держит высоту, пустая полоса оплаты — прозрачная дорожка того же места. Выбор сделки подсвечивается мягко, без скачка. */ .deal-switcher-item-meta--who { min-height: 16px; } .deal-switcher-item-pay.is-empty { background: transparent; } .deal-switcher-item { transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .deal-switcher-item.active { box-shadow: 0 8px 22px -16px rgb(var(--primary-rgb) / .8); } /* ── Календарь: навигация одной строкой, день справа (01.10.2026) ─────── */ .cal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; } .cal-top .cal-header-title { min-width: 0; } .cal-top .cal-header-title h1 { margin: 0; } .cal-nav3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cal-month-pick { position: relative; } .cal-month-pick > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: var(--r-md); cursor: pointer; font-family: var(--font-display); font-size: 16px; font-weight: 700; white-space: nowrap; transition: background var(--dur-1); } .cal-month-pick > summary::-webkit-details-marker { display: none; } .cal-month-pick > summary:hover { background: rgb(var(--primary-rgb) / .08); } .cal-month-pick > summary svg { transform: rotate(90deg); color: var(--muted); transition: transform var(--dur-2); } .cal-month-pick[open] > summary svg { transform: rotate(-90deg); } .cal-month-pop { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: var(--z-dropdown); width: 244px; padding: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--elev-3); animation: estOpen .2s var(--ease-out) both; } .cal-month-pop-year { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cal-month-pop-year b { font-family: var(--font-display); font-size: 14px; } .cal-month-pop-year button, .cal-month-pop-grid button { border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; cursor: pointer; border-radius: var(--r-sm); transition: background var(--dur-1), border-color var(--dur-1); } .cal-month-pop-year button { width: 30px; height: 28px; font-size: 16px; } .cal-month-pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .cal-month-pop-grid button { height: 34px; font-size: 13px; font-weight: 600; } .cal-month-pop button:hover { background: rgb(var(--primary-rgb) / .1); } .cal-month-pop-grid button.is-now { border-color: rgb(var(--primary-rgb) / .45); } .cal-month-pop-grid button.is-on { background: var(--primary); color: var(--on-color); } .cal-mode-seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); } .cal-mode-seg button { min-height: 30px; padding: 3px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .cal-mode-seg button:hover { color: var(--text); } .cal-mode-seg button.is-on { background: rgb(var(--primary-rgb) / .16); color: var(--primary-text); } @media (hover: none) and (pointer: coarse) { .cal-mode-seg button, .cal-month-pop-grid button { min-height: 44px; } .cal-month-pick > summary { min-height: 44px; } .cal-month-pop-year button { width: 44px; height: 44px; } } .cal-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .cal-main { min-width: 0; } .cal-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* Две колонки, когда панели календаря хватает места (окно ≥1400 = ~1130px панели с меню слева). Контейнерным запросом нельзя: он не меряет сам себя. */ @media (min-width: 1400px) { .cal-body { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .cal-side { position: sticky; top: 86px; } } .cal-side-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel2); } .cal-side .cal-day-panel { margin: 0; } .cal-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .cal-side-head h3 { margin: 0; font-size: 15px; } .cal-up-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px; margin: 0 0 4px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1); } .cal-up-row:hover { background: color-mix(in srgb, var(--c) 8%, transparent); border-color: color-mix(in srgb, var(--c) 30%, var(--line)); } .cal-up-date { flex: 0 0 38px; display: flex; flex-direction: column; align-items: center; padding: 3px 0; border-radius: var(--r-sm); box-shadow: inset 0 3px 0 var(--c); background: var(--panel); } .cal-up-date b { font-family: var(--font-display); font-size: 15px; line-height: 1.1; } .cal-up-date small { font-size: 10.5px; color: var(--muted); } .cal-up-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .cal-up-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-up-text small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-up-sum { flex: 0 0 auto; font-family: var(--font-display); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Клиенты: итоги плитками, карточка одной раскладки (01.10.2026) ────── */ .clients-summary { margin: 2px 0 16px; } .cal-sum-tile.is-rep { --c: var(--violet); } /* «Повторные» — хорошее, не красным */ .clients-sort { width: auto; min-height: 34px; padding: 5px 30px 5px 10px; font-size: 13px; border-radius: var(--r-md); } .client-card-nums { display: grid; grid-template-columns: .8fr 1.2fr 1.2fr; gap: 8px; margin-top: 10px; } .client-card-nums > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .client-card-nums small { font-size: 11px; color: var(--muted); font-weight: 600; } .client-card-nums b, .client-card-nums .client-deals-link { font-family: var(--font-display); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .client-card-nums .client-deals-link { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--primary-text); cursor: pointer; } .client-card-nums .client-deals-link { border-radius: var(--r-sm); padding: 0 4px; margin-left: -4px; transition: background var(--dur-1); } .client-card-nums .client-deals-link:hover { background: rgb(var(--primary-rgb) / .12); } .client-card-nums .client-card-none { color: var(--muted); font-weight: 600; } .client-pay-track.is-empty { background: transparent; } /* ── Задачи: плитки единого вида, список по срокам (01.10.2026) ──────── */ .gtask-stats.cal-summary { margin: 0 0 14px; } .gtask-stats .cal-sum-tile.is-zero b { color: var(--muted); } .gtask-group-head { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; padding-left: 2px; } .gtask-group-head:first-child { margin-top: 0; } .gtask-group-head b { font-size: 13.5px; } .gtask-group-head span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .gtask-group-head.is-overdue b { color: var(--text-danger); } .gtask-group-head.is-today b { color: var(--text-warning); } .gtask-group-head.is-done b { color: var(--muted); } /* Корзина — при наведении на строку (на телефоне видна всегда). */ .gtask-row .icon-del-btn { opacity: 0; transition: opacity var(--dur-1); } .gtask-row:hover .icon-del-btn, .gtask-row .icon-del-btn:focus-visible { opacity: 1; } @media (hover: none) { .gtask-row .icon-del-btn { opacity: 1; } } /* ── Страница клиента: профиль, плитки, сделки слева, контакты справа (01.10.2026) ── */ .client-detail { display: flex; flex-direction: column; gap: 16px; } .client-hero { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); } .client-back { margin-bottom: 14px; } .client-hero-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .client-avatar--lg { flex: 0 0 64px; width: 64px; height: 64px; font-size: 22px; } .client-hero-id { flex: 1 1 260px; min-width: 0; } .client-hero-name { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; } .client-hero-name h1 { margin: 0; font-size: 28px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .client-hero-id p { margin: 4px 0 0; font-size: 14px; color: var(--muted); } .client-status-select { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 12px; border: 0; } .client-status-select:hover { filter: brightness(1.15); } .client-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .client-contact-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); } .client-contact-btn:hover { background: var(--panel2); color: var(--text); } .client-detail-stats { margin: 16px 0 0; } .cal-sum-tile.is-static { cursor: default; } .cal-sum-tile.is-static:hover { transform: none; border-color: var(--line); } .client-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } @media (min-width: 1100px) { .client-detail-grid { grid-template-columns: minmax(0, 1fr) 390px; } } .client-deals-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; } .client-deals-head h2, .client-side h2 { margin: 0; font-size: 18px; } .client-deals-head h2 span { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--muted); } .client-deals-sep { padding: 12px 4px 4px; font-size: 12px; font-weight: 700; color: var(--muted); } .client-project-row { display: flex; align-items: center; gap: 14px; box-shadow: inset 3px 0 0 var(--st-color, var(--line)); transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1); } .client-project-row:hover { background: var(--panel2); transform: translateY(-1px); } .cpr-main { flex: 1 1 auto; min-width: 0; } .cpr-main h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cpr-stage { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; } .cpr-stage i { width: 8px; height: 8px; border-radius: 50%; background: var(--st-color, var(--muted)); } .cpr-money { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 150px; } .cpr-total { font-family: var(--font-display); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .cpr-total.is-none { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); } .cpr-pay { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .cpr-ok { color: var(--text-success, var(--green)); font-weight: 600; } .cpr-left { color: var(--text-warning, var(--orange)); font-weight: 600; } .cpr-track { display: block; width: 140px; height: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--orange) 18%, transparent); overflow: hidden; } .cpr-track > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--green); } .cpr-go { flex: 0 0 auto; color: var(--muted); display: inline-flex; } .client-side { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); } @media (min-width: 1100px) { .client-side { position: sticky; top: 16px; } } .client-side-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .client-side-fields > :first-child { grid-column: 1 / -1; } .client-side .field { margin: 0; } .client-side-danger { padding-top: 10px; border-top: 1px solid var(--line); } @media (max-width: 640px) { .client-hero { padding: 14px; } .client-hero-name h1 { font-size: 22px; } .client-avatar--lg { flex-basis: 52px; width: 52px; height: 52px; font-size: 18px; } .client-contact-btn span { display: none; } .client-side-fields { grid-template-columns: minmax(0, 1fr); } .client-project-row { flex-wrap: wrap; gap: 8px 12px; } .cpr-main { flex: 1 1 100%; } .cpr-money { flex: 1 1 100%; min-width: 0; align-items: flex-start; } .cpr-pay { white-space: normal; } .cpr-track { width: 100%; } .cpr-go { display: none; } } /* ── Ролик о продукте: «Тарифный план» и «Поддержка» (01.10.2026) ───────── */ .promo-video { display: flex; gap: 22px; align-items: center; margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(120% 140% at 0% 100%, rgb(var(--primary-rgb) / .14), transparent 60%), var(--panel2); } .promo-video.is-support { margin: 0 0 22px; flex-direction: column; align-items: stretch; } /* В «Поддержке» колонка 680px — рядом с текстом видео выходило 314px; ставим во всю ширину. */ .promo-video.is-support .promo-video-frame { flex: 0 0 auto; width: 100%; max-width: none; } .promo-video-frame { flex: 0 0 460px; max-width: 52%; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px -24px rgb(var(--primary-rgb) / .7); } .promo-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bg); } .promo-video-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .promo-video-kicker { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--primary-text); background: rgb(var(--primary-rgb) / .14); } .promo-video-text h2 { margin: 0; font-size: 22px; line-height: 1.2; } .promo-video-text p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); } .promo-video-points { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; } .promo-video-points li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; } .promo-video-points li svg { flex: 0 0 auto; margin-top: 3px; color: var(--text-success); } .promo-video-open { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--primary-text); text-decoration: none; border-radius: var(--r-sm); transition: color var(--dur-1), opacity var(--dur-1); } .promo-video-open:hover { color: var(--text); } @media (hover: none) and (pointer: coarse) { .promo-video-open { min-height: 44px; } } @media (max-width: 900px) { .promo-video { flex-direction: column; align-items: stretch; padding: 14px; } .promo-video-frame { flex: 0 0 auto; width: 100%; max-width: none; } } /* ── Экран входа — лендинг (01.10.2026) ───────────────────────────────── Прокручиваемая страница поверх приложения: шапка, первый экран с формой, ролик, три шага, возможности, цены. Форма — тот же .auth-gate-box. */ .auth-gate.lp { display: block; overflow-y: auto; overflow-x: hidden; padding: 0; -webkit-overflow-scrolling: touch; background: radial-gradient(1100px 520px at 75% -10%, rgb(var(--primary-rgb) / .22), transparent 70%), radial-gradient(900px 500px at -10% 30%, rgb(var(--primary-rgb) / .1), transparent 70%), var(--bg); } .lp-top { position: sticky; top: 0; z-index: 2; backdrop-filter: blur(14px) saturate(1.4); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); } .lp-top-in { max-width: 1160px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 10px; } .lp-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-size: 17px; letter-spacing: -.01em; } .lp-brand b { font-weight: 800; } .lp-brand i { font-style: normal; font-weight: 600; color: var(--muted); } .lp-logo { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--primary); display: grid; place-items: center; flex: 0 0 auto; } .lp-logo img { width: 22px; height: 22px; object-fit: contain; } .lp-nav { display: flex; gap: 2px; margin-right: 8px; } .lp-nav button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; transition: color var(--dur-1), background var(--dur-1); } .lp-nav button:hover { color: var(--text); background: var(--panel2); } .lp-hero { max-width: 1160px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; } .lp-kicker { display: inline-flex; padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: var(--primary-text); background: rgb(var(--primary-rgb) / .12); } .lp-hero h1 { margin: 18px 0 16px; font-family: var(--font-display); font-size: clamp(34px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; } .lp-acc { background: linear-gradient(180deg, var(--primary-text), var(--primary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 560px; } .lp-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; } .lp-cta-main { padding: 13px 22px; font-size: 15px; } .lp-cta-video { padding: 13px 18px; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; } .lp-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); } .lp-trust li { display: inline-flex; align-items: center; gap: 6px; } .lp-trust svg { color: var(--text-success); } .lp .auth-gate-box { width: 100%; max-width: none; margin: 0; box-shadow: 0 30px 80px -40px rgb(var(--primary-rgb) / .55); } .lp-auth-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; } .lp-auth-sub { margin: 4px 0 18px; font-size: 13px; color: var(--muted); } .lp-sec { max-width: 1160px; margin: 0 auto; padding: 44px 24px; } .lp-h2 { margin: 0 0 22px; font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; text-align: center; } .lp-sub { margin: -10px auto 24px; max-width: 620px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.55; } .lp-video-frame { max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--r-2xl); overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 40px 100px -40px rgb(var(--primary-rgb) / .7); } .lp-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bg); } .lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; } .lp-steps li, .lp-feat { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); transition: border-color var(--dur-1), transform var(--dur-1); } .lp-steps li:hover, .lp-feat:hover { border-color: rgb(var(--primary-rgb) / .45); transform: translateY(-2px); } .lp-step-n { position: absolute; top: 18px; right: 20px; font-family: var(--font-display); font-size: 34px; font-weight: 700; color: rgb(var(--primary-rgb) / .25); } .lp-ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--primary-text); background: rgb(var(--primary-rgb) / .12); } .lp-steps h3, .lp-feat h3 { margin: 14px 0 6px; font-size: 17px; } .lp-steps p, .lp-feat p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); } .lp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin: 0 auto; } .lp-plan { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); } .lp-plan.is-rec { border-color: rgb(var(--primary-rgb) / .6); box-shadow: 0 24px 60px -30px rgb(var(--primary-rgb) / .7); } .lp-plan-badge { position: absolute; top: -11px; left: 22px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--on-color); background: var(--primary); } .lp-plan-name { font-size: 18px; font-weight: 800; } .lp-plan-name small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); } .lp-plan-price { margin: 14px 0 12px; display: flex; align-items: baseline; gap: 6px; } .lp-plan-price b { font-family: var(--font-display); font-size: 32px; font-variant-numeric: tabular-nums; } .lp-plan-price span { color: var(--muted); font-size: 14px; } .lp-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .lp-plan li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.4; } .lp-plan li svg { flex: 0 0 auto; margin-top: 2px; color: var(--text-success); } .lp-note { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--muted); } .lp-final { text-align: center; } .lp-final h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; } .lp-final p { margin: 0 auto 22px; max-width: 520px; color: var(--muted); font-size: 15px; line-height: 1.55; } .lp-foot { max-width: 1160px; margin: 0 auto; padding: 22px 24px 40px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } .lp-foot a { color: var(--muted); text-decoration: none; transition: color var(--dur-1); } .lp-foot a:hover { color: var(--text); } @media (max-width: 980px) { .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; } .lp .auth-gate-box { max-width: 480px; } .lp-nav { display: none; } .lp-steps, .lp-feats, .lp-plans { grid-template-columns: minmax(0, 1fr); } .lp-plans { max-width: 480px; } } @media (max-width: 560px) { .lp-top-in { padding: 10px 16px; } .lp-top-cta { display: none; } .lp-hero, .lp-sec { padding-left: 16px; padding-right: 16px; } .lp-hero { padding-top: 24px; } .lp-lead { font-size: 15.5px; } .lp-cta > .btn { flex: 1 1 100%; justify-content: center; } .lp-sec { padding-top: 32px; padding-bottom: 32px; } .lp-video-frame { border-radius: var(--r-xl); } } @media (hover: none) and (pointer: coarse) { .lp-nav button, .lp-foot a { min-height: 44px; display: inline-flex; align-items: center; } } /* ── Лендинг входа v2: экран продукта, «Знакомо?», гарантии, вопросы (02.10.2026) ── */ .lp-micro { margin: 12px 0 0; font-size: 13px; color: var(--muted); } .lp-shot { position: relative; max-width: 1040px; margin: 0 auto; border-radius: var(--r-xl); overflow: visible; box-shadow: 0 0 0 1px var(--line), 0 50px 120px -50px rgb(var(--primary-rgb) / .75); background: var(--panel); } .lp-shot-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-bottom: 1px solid var(--line); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--panel2); } .lp-shot-bar i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); } .lp-shot-bar span { margin-left: 12px; font-size: 12.5px; color: var(--muted); } .lp-shot img, .lp-shot-media { display: block; width: 100%; height: auto; border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--panel); } .lp-pin { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; max-width: 270px; padding: 8px 14px 8px 8px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text); background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid rgb(var(--primary-rgb) / .5); backdrop-filter: blur(10px); box-shadow: 0 14px 34px -14px rgb(var(--primary-rgb) / .8); } .lp-pin b { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--on-color); background: var(--primary); } .lp-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; } .lp-ba-col { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); } .lp-ba-col h3 { margin: 0 0 14px; font-size: 18px; } .lp-ba-col p { display: flex; gap: 10px; margin: 0; padding: 10px 0; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--line); } .lp-ba-col p:first-of-type { border-top: 0; } .lp-ba-col p svg { flex: 0 0 auto; margin-top: 3px; } .lp-ba-col.is-before { color: var(--muted); } .lp-ba-col.is-before h3 { color: var(--muted); } .lp-ba-col.is-before svg { color: var(--text-danger); } .lp-ba-col.is-after { border-color: rgb(var(--primary-rgb) / .45); box-shadow: 0 24px 60px -34px rgb(var(--primary-rgb) / .7); } .lp-ba-col.is-after svg { color: var(--text-success); } .lp-plan-btn { width: 100%; margin-top: 18px; justify-content: center; } .lp-guar { list-style: none; margin: 22px auto 0; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .lp-guar li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-lg); background: var(--panel2); font-size: 13.5px; line-height: 1.45; color: var(--muted); } .lp-guar li b { color: var(--text); font-weight: 700; } .lp-guar svg { flex: 0 0 auto; margin-top: 2px; color: var(--text-success); } .lp-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; } .lp-faq details { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); transition: border-color var(--dur-1); } .lp-faq details[open] { border-color: rgb(var(--primary-rgb) / .45); } .lp-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; min-height: 44px; font-size: 16px; font-weight: 700; cursor: pointer; transition: color var(--dur-1); } .lp-faq summary:hover { color: var(--primary-text); } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary svg { flex: 0 0 auto; color: var(--muted); transform: rotate(90deg); transition: transform var(--dur-1); } .lp-faq details[open] summary svg { transform: rotate(-90deg); } .lp-faq details p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--muted); } @media (max-width: 980px) { .lp-pin { position: static; transform: none; max-width: none; margin: 10px 12px 0; } .lp-shot { padding-bottom: 12px; overflow: hidden; } .lp-ba, .lp-guar { grid-template-columns: minmax(0, 1fr); } } /* ═══ ТАЙМИНГ СЪЁМКИ (?timing=…, вкладка сделки «Тайминг») ═══ Приёмы из референсов владельца (decision-design-from-references-2026-09): градиент со светом из угла в шапке, крупные цифры, значки в квадратах, свечение у текущего. Цвет типа блока — одна переменная --tm-k на строке: от неё красятся точка на линии, значок типа и шаблон в «Добавить блок». */ .tm-wrap { display: grid; gap: 14px; } .tm-page { max-width: 780px; margin: 0 auto; padding: 20px 16px 48px; } .tm-k-prep { --tm-k: var(--blue); } .tm-k-shoot { --tm-k: var(--primary); } .tm-k-break { --tm-k: var(--green); } .tm-k-move { --tm-k: var(--orange); } .tm-k-other { --tm-k: var(--muted); } /* шапка */ .tm-head { position: relative; display: grid; gap: 14px; padding: 22px; overflow: hidden; background-image: var(--grad-hero); border-color: rgb(var(--primary-rgb) / .28); } .tm-head-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .tm-pills { display: flex; flex-wrap: wrap; gap: 6px; } .tm-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--panel) 75%, transparent); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); } .tm-theme { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 75%, transparent); color: var(--text); cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-1), color var(--dur-1); } .tm-theme:hover { border-color: rgb(var(--primary-rgb) / .5); color: var(--primary-text); box-shadow: var(--glow-sm); } .tm-theme:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 2px; } .tm-pills { align-items: center; } .tm-pill.is-admin { background: var(--primary); border-color: transparent; color: var(--on-color); box-shadow: var(--glow-sm); } .tm-studio { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; } .tm-studio img, .tm-studio-mark { width: 32px; height: 32px; border-radius: var(--r-md); object-fit: cover; } .tm-studio-mark { display: grid; place-items: center; background: var(--primary); color: var(--on-color); font-family: var(--font-display); font-size: 15px; box-shadow: var(--glow-sm); } .tm-kicker { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-text); } .tm-title { margin: -6px 0 0; font-family: var(--font-display); font-size: 30px; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; } .tm-title-in { width: 100%; margin-top: -6px; font-family: var(--font-display); font-size: 22px; font-weight: 700; } .tm-stats { display: flex; flex-wrap: wrap; gap: 8px; } .tm-stat { flex: 1 1 0; display: grid; gap: 2px; min-width: 110px; padding: 10px 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 72%, transparent); border: 1px solid var(--line); } .tm-stat b { white-space: nowrap; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .tm-stat span { font-size: 12px; color: var(--muted); } .tm-stat.is-warn b { color: var(--text-warning); } .tm-meta { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } /* у администратора в плитках поля ввода: адрес — отдельной строкой во всю ширину, иначе всё обрезается */ .tm-meta.is-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .tm-meta.is-edit .tm-tile:last-child { grid-column: 1 / -1; } .tm-tile { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--line); } .tm-tile-body { display: grid; gap: 4px; min-width: 0; flex: 1; } .tm-tile-body b { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; } .tm-tile-body input { width: 100%; min-width: 0; } .tm-2in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } .tm-act { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 32px; margin-top: 2px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--primary-bg); color: var(--primary-on-tint); font-size: 13px; font-weight: 600; text-decoration: none; transition: background var(--dur-1), box-shadow var(--dur-1); } .tm-act:hover { background: rgb(var(--primary-rgb) / .18); box-shadow: var(--glow-sm); } .tm-act:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 2px; } .tm-status[data-s="error"] { color: var(--text-danger); border-color: currentColor; } .tm-status[data-s="conflict"] { color: var(--text-warning); } .tm-status[data-s="saved"] { color: var(--text-success); } .tm-status[data-s="saving"] svg { animation: tmBlink 1s ease-in-out infinite; } @keyframes tmBlink { 50% { opacity: .3; } } /* сейчас идёт */ .tm-live { display: grid; gap: 12px; padding: 18px 20px; border-color: rgb(var(--primary-rgb) / .55); box-shadow: var(--glow-md); background-image: var(--grad-soft); } .tm-live-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .tm-live-what { display: grid; gap: 4px; min-width: 0; } .tm-live-what h2 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; } .tm-live-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-danger); } .tm-live-dot { position: relative; flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--red); } .tm-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--red); animation: tmPing 1.8s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes tmPing { 75%, 100% { transform: scale(2.6); opacity: 0; } } .tm-live-left { display: grid; justify-items: end; flex: 0 0 auto; text-align: right; } .tm-live-left b { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; color: var(--primary-text); font-variant-numeric: tabular-nums; } .tm-live-left span { font-size: 12px; color: var(--muted); } .tm-live-bar, .tm-card-bar { height: 8px; border-radius: var(--r-pill); background: rgb(var(--primary-rgb) / .12); overflow: hidden; } .tm-live-bar i, .tm-card-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--primary2), var(--primary)); box-shadow: var(--glow-sm); } .tm-card-bar { height: 4px; margin-top: 4px; } .tm-live-next { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel2); font-size: 14px; } .tm-live-next > i { flex: 0 0 auto; align-self: center; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--tm-k); } .tm-live-next b { font-family: var(--font-display); font-variant-numeric: tabular-nums; } .tm-live-next span:last-child { min-width: 0; overflow-wrap: anywhere; } .tm-shift { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tm-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--panel2); border: 1px solid var(--line); } .tm-seg button { min-width: 48px; min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--dur-1), color var(--dur-1); } .tm-seg button:hover { background: var(--primary); color: var(--on-color); } .tm-seg button.is-back { margin-left: 4px; border-left: 1px solid var(--line); border-radius: 0 var(--r-pill) var(--r-pill) 0; color: var(--text-success); } .tm-seg button.is-back:hover { background: var(--green); color: var(--on-color); } .tm-seg button:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 1px; } @media (prefers-reduced-motion: reduce) { .tm-live-dot::after, .tm-status svg { animation: none; } } /* должности и фильтр */ .tm-roles-panel, .tm-add { display: grid; gap: 12px; } .tm-add { padding: 16px; border: 1px dashed rgb(var(--primary-rgb) / .4); border-radius: var(--r-xl); background: var(--grad-soft); } .tm-sec-head { display: flex; align-items: center; gap: 10px; } .tm-sec-head > div { display: grid; gap: 2px; } .tm-sec-head b { font-size: 15px; } .tm-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .tm-role { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; } .tm-role-x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); cursor: pointer; } .tm-role-x:hover { color: var(--text-danger); background: var(--tint-red); } .tm-role-in { width: 170px; min-height: 34px; padding: 4px 12px; border-radius: var(--r-pill); } .tm-filter { padding: 2px 0; } .tm-tpl { display: inline-flex; align-items: center; gap: 6px; } .tm-tpl i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--tm-k); } /* лента: время · линия с точкой · карточка */ .tm-list { display: grid; } .tm-row { display: grid; grid-template-columns: 58px 24px minmax(0, 1fr); column-gap: 8px; align-items: stretch; } .tm-time { display: grid; align-content: start; gap: 2px; padding-top: 12px; text-align: right; font-variant-numeric: tabular-nums; } .tm-time b { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.1; } .tm-time span { font-size: 12px; color: var(--muted); } .tm-rail { position: relative; display: flex; justify-content: center; } .tm-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--line); } .tm-row:first-child .tm-rail::before { top: 18px; } .tm-row:last-child .tm-rail::before { bottom: calc(100% - 18px); } .tm-rail i { position: relative; display: grid; place-items: center; width: 14px; height: 14px; margin-top: 14px; border-radius: var(--r-pill); background: var(--panel); border: 3px solid var(--tm-k); color: var(--on-color); } .tm-row.is-past .tm-rail i { width: 16px; height: 16px; border: 0; background: var(--tm-k); } .tm-row.is-cur .tm-rail i { width: 18px; height: 18px; margin-top: 12px; background: var(--tm-k); box-shadow: 0 0 0 5px rgb(var(--primary-rgb) / .18), var(--glow-sm); } .tm-card { position: relative; display: grid; gap: 6px; margin-bottom: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); transition: border-color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1); } .tm-card[role="button"] { cursor: pointer; } .tm-card[role="button"]:hover { border-color: rgb(var(--primary-rgb) / .5); box-shadow: var(--glow-sm); } .tm-card:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 2px; } .tm-card h3 { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; } .tm-card-top { display: flex; align-items: center; gap: 8px; } .tm-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tm-k); } .tm-now { padding: 2px 8px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-color); font-size: 11px; font-weight: 700; } .tm-dur { margin-left: auto; padding: 2px 8px; border-radius: var(--r-pill); background: var(--panel2); font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .tm-edit-hint { color: var(--hint); } .tm-chips { display: flex; flex-wrap: wrap; gap: 4px; } .tm-chip { padding: 2px 10px; border-radius: var(--r-pill); background: var(--panel2); font-size: 12px; color: var(--muted); } .tm-chip.is-me { background: var(--primary-bg); color: var(--primary-on-tint); font-weight: 600; } .tm-line { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; } .tm-line svg { flex: 0 0 auto; margin-top: 3px; } .tm-line b { color: var(--text); font-weight: 600; } .tm-line a { color: var(--primary-text); } .tm-row.is-cur .tm-card { border-color: var(--primary); box-shadow: var(--glow-md); background-image: var(--grad-soft); } .tm-row.is-cur .tm-time b { color: var(--primary-text); } .tm-row.is-past .tm-card, .tm-row.is-past .tm-time { opacity: .55; } .tm-row.is-open .tm-card { border-color: var(--primary); } .tm-edit { display: grid; gap: 10px; margin: -2px 0 14px 90px; padding: 16px; border: 1px solid rgb(var(--primary-rgb) / .45); border-radius: var(--r-xl); background: var(--primary-bg); } .tm-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tm-edit-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-edit-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tm-edit-grid.four .field { position: relative; } .tm-edit-grid.four input, .tm-edit-grid.four select { box-sizing: border-box; width: 100%; height: 48px; } .tm-hint { position: absolute; right: 34px; bottom: 15px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; } .tm-check { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; color: var(--muted); cursor: pointer; } .tm-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); } .tm-shift-exact { display: inline-flex; align-items: center; gap: 6px; } .tm-shift-exact input { width: 72px; min-height: 36px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .tm-edit .field { margin: 0; } .tm-edit .toolbar { margin: 0; } .tm-empty { color: var(--muted); text-align: center; padding: 24px 16px; } .tm-upsell { display: grid; gap: 14px; justify-items: start; } .tm-share { display: grid; gap: 10px; } .tm-share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tm-share-row p { margin: 2px 0 0; } .tm-share-foot { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--line); } .tm-foot { text-align: center; font-size: 12px; color: var(--hint); } .tm-foot a { color: var(--primary-text); } @media (max-width: 640px) { .tm-head { padding: 16px; } .tm-title { font-size: 24px; } .tm-meta, .tm-edit-grid.two { grid-template-columns: minmax(0, 1fr); } .tm-edit-grid, .tm-edit-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-stat { min-width: 0; } .tm-stat { flex: 1 1 calc(50% - 4px); min-width: 0; } .tm-stat b { font-size: 17px; } .tm-meta.is-edit { grid-template-columns: minmax(0, 1fr); } .tm-live-left b { font-size: 26px; } .tm-row { grid-template-columns: 46px 18px minmax(0, 1fr); column-gap: 6px; } .tm-time b { font-size: 15px; } .tm-card { padding: 12px; } .tm-edit { margin-left: 0; } .tm-share-row { flex-direction: column; align-items: stretch; } } @media print { .tm-add, .tm-shift, .tm-share, .tm-pills, .tm-theme, .tm-edit-hint, .tm-roles-panel, .tm-filter, .tm-card-bar { display: none; } .tm-head, .tm-live, .tm-row.is-cur .tm-card { background-image: none; box-shadow: none; } .tm-row.is-past .tm-card, .tm-row.is-past .tm-time { opacity: 1; } } /* ── Новости CRM: тихая строка по центру шапки (news.js) ───────── Не спорит с работой: мелкий приглушённый текст, без заливки, точка-маркер в цвете акцента. Только десктоп — на телефоне шапка узкая. */ .crm-news { display: none; } @media (min-width: 769px) { .crm-news { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; flex: 0 1 auto; max-width: 560px; height: 30px; padding: 0 6px 0 12px; border: 1px solid transparent; border-radius: var(--r-pill); color: var(--muted); font-size: 12.5px; line-height: 1; transition: border-color var(--dur-2), background var(--dur-2), opacity .3s; } .crm-news:hover { border-color: var(--line); background: color-mix(in srgb, var(--panel) 60%, transparent); } .crm-news.gone { opacity: 0; } .crm-news-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: rgb(var(--primary-rgb) / .7); } .crm-news-track { flex: 0 1 auto; min-width: 0; overflow: hidden; } .crm-news-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1, .36, 1); } .crm-news-text.out { opacity: 0; transform: translateY(-6px); } .crm-news-text.in { opacity: 0; transform: translateY(6px); transition: none; } .crm-news-count { flex: none; font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; } .crm-news-count:empty { display: none; } .crm-news-close { flex: none; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .55; transition: opacity var(--dur-1), background var(--dur-1); } .crm-news-close:hover, .crm-news-close:focus-visible { opacity: 1; background: color-mix(in srgb, var(--text) 8%, transparent); } .crm-news-close:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 1px; } } @media (prefers-reduced-motion: reduce) { .crm-news, .crm-news-text { transition: none; } }