/* * Стили сервиса. Раньше они лежали прямо в base.html – 246 КБ разметки, * которые приезжали заново с каждым переходом и не кешировались браузером * (аудит 19.09.2026). Отдельным файлом они скачиваются один раз. * * Порядок правил внутри важен: свои правила модули дописывают рядом с * родственными, а не в конец файла. * * ── Одна шкала подписей (22.09.2026) ── * Подпись в интерфейсе пишется **с заглавной буквы и без разрядки**. Ни капса * (`text-transform: uppercase`), ни положительного `letter-spacing` в новых * правилах быть не должно: и то и другое осталось от дизайн-системы макета, * капс из сервиса убран еще 13.09.2026, а разрядка без него превращает * строчную кириллицу в набор букв – заказчик поймал это словами «странные * между-символьные отступы». * * Два исключения, и других нет: логотип-леттеринг шрифтом Cinzel (`.brand * span`) и строки цифр, которые сверяют по знакам, – ИНН * (`.bl-inn input`) и временный пароль. Отрицательная разрядка у крупных * заголовков (`-.01em`) – это не разрядка, а обычный набор, ее не трогаем. * * Строчная буква у подписи допустима только там, где это состояние, а не * название: «скоро», «выключена», «ждет проверки». Название блока, колонки * или показателя – всегда с заглавной. */ /* Палитра – по ТЗ «Палитра платформы» (Claude Design, 28.09.2026): фон теплее и сдвинут к графиту, ступени глубины различимы (рамка/страница/карточка/ всплывающее окно), текст ярче, состояния разведены по цвету, золото – только для главного, цвет ИИ – спокойный сине-зеленый вместо фиолетового. Рамку кабинета (шапка, логотип, боковое меню) красит --sidebar-bg – это и есть роль, которую ТЗ называет --frame-bg: отдельного токена не заводим, переменная уже под эту роль и используется (parts/nav_brand.html, parts/topbar.html, parts/sidebar.html). Панель содержимого внутри рамки – --content-bg, тем же цветом, что и --bg (по ТЗ они совпадают): --bg виден на страницах без рамки (вход, регистрация), --content-bg – внутри .shell .main. Карточки светлее рамки и страницы (--card-bg), всплывающие окна и выпадающие списки – светлее карточек (--raised-bg, новый токен). */ :root { --bg: #131417; --sidebar-bg: #0d0e11; --content-bg: #131417; --card-bg: #1a1b20; /* Всплывающие окна и выпадающие списки (.zmodal, .side-pop, свой список и календарь, тосты) – своя, самая светлая ступень: иначе окно поверх карточки сливалось бы с ней по цвету. */ --raised-bg: #212228; --card-border: rgba(242,236,226,.09); --input-bg: rgba(242,236,226,.06); --text: #f2ece2; --text-72: rgba(242,236,226,.84); --text-62: rgba(242,236,226,.70); --text-muted: rgba(242,236,226,.56); --accent: #d6b266; --accent-hover: #e8c87e; --accent-active: #a8812f; --accent-text: #171310; --accent-strong-rgb: 214,178,102; /* Золото как ЦВЕТ ТЕКСТА и значка (ссылки, «назад», активный пункт меню) – всегда через этот токен, не через --accent: чистый #d6b266 читается только как заливка кнопки, текстом он ощутимо ярче задуманного. */ --accent-ink: #e0c07a; --bezel-bg: rgba(242,236,226,.04); --text-rgb: 242,236,226; --track: rgba(242,236,226,.10); --success: #8fbf6a; --success-rgb: 143,191,106; --warning: #e39a4f; --warning-rgb: 227,154,79; --danger: #e36b5c; --danger-rgb: 227,107,92; /* «Не участвует», «скоро», «выключено» – нейтральный серый, не спутать ни с одним из цветов состояния выше. */ --neutral-state: #8a8c93; /* Авторство текста: цвет ИИ – спокойный сине-зеленый (не фиолетовый), зеленый – написал человек. */ --ai: #6fb3b8; --ai-rgb: 111,179,184; --mine: #8fbf6a; --brand-text: #f5efe4; --card-alert-bg: rgba(227,154,79,.08); --card-alert-border: rgba(227,154,79,.35); --card-ok-bg: rgba(143,191,106,.08); --card-ok-border: rgba(143,191,106,.35); /* Сообщение об ошибке – от --danger, не от --warning: оно про сбой, а не про то, что ждет внимания. */ --msg-error-bg: rgba(227,107,92,.10); --msg-error-border: rgba(227,107,92,.35); --msg-error-text: #f3b8ae; --msg-success-bg: rgba(143,191,106,.10); --msg-success-border: rgba(143,191,106,.4); --msg-success-text: #c9e6b8; /* Палитра графиков (console/charts.py и шаблоны рядов) – шесть цветов, без оранжевого и красного: те заняты состояниями «внимание»/«ошибка», и в графике означали бы именно это, а не порядковый номер серии. */ --chart-1: #d6b266; --chart-2: #6fb3b8; --chart-3: #8fbf6a; --chart-4: #c98a6b; --chart-5: #9aa0c8; --chart-6: #b7ad9c; } /* Светлая тема – та же палитра, что в ТЗ «Палитра платформы» (28.09.2026). */ :root[data-theme="light"] { --bg: #f6f4f0; /* Рамка страниц без кабинета остается в исходной светлой палитре. */ --sidebar-bg: #e9e6e0; --content-bg: #f6f4f0; --card-bg: #ffffff; --raised-bg: #ffffff; --card-border: rgba(26,24,20,.10); --input-bg: rgba(26,24,20,.05); --text: #1a1814; --text-72: #3f3b35; --text-62: #57524a; --text-muted: #6b665d; --accent: #d6b266; --accent-hover: #e8c87e; --accent-active: #a8812f; --accent-text: #171310; --accent-strong-rgb: 138,106,36; /* Чистый #d6b266 текстом на белом почти не читается – для текста и значков берется темный оттенок золота. */ --accent-ink: #8a6a24; --bezel-bg: rgba(26,24,20,.05); --text-rgb: 26,24,20; --track: rgba(26,24,20,.10); --success: #3f7a2c; --success-rgb: 63,122,44; --warning: #a8591d; --warning-rgb: 168,89,29; --danger: #b4432c; --danger-rgb: 180,67,44; --neutral-state: #6e6f75; --ai: #2f7c82; --ai-rgb: 47,124,130; --mine: #3f6b28; --brand-text: #1a1814; --card-alert-bg: rgba(168,89,29,.08); --card-alert-border: rgba(168,89,29,.35); --card-ok-bg: rgba(63,122,44,.08); --card-ok-border: rgba(63,122,44,.35); --msg-error-bg: rgba(180,67,44,.10); --msg-error-border: rgba(180,67,44,.35); --msg-error-text: #7a2a16; --msg-success-bg: rgba(63,122,44,.10); --msg-success-border: rgba(63,122,44,.4); --msg-success-text: #2c5a20; --chart-1: #b8923f; --chart-2: #2f7c82; --chart-3: #3f7a2c; --chart-4: #a8674a; --chart-5: #5f66a3; --chart-6: #8c8474; } * { box-sizing: border-box; } /* Размер корня задан числом нарочно. Кегли интерфейса считаются в пикселях, а не в rem, и опираться на настройку «размер шрифта» в браузере им нельзя: при системном масштабе «крупнее» вся шкала уезжала целиком – заголовок раздела вырастал до 40 пикселей вместо 22, и текст переставал влезать в колонки. Тексты, которые читает человек (статьи, письма), от этого не страдают: они и так заданы в пикселях по макету. */ html { font-size: 16px; } /* На широком экране увеличиваем только текст кабинета. Геометрия и пиксельная основа rem сохраняются; относительные кегли наследуют масштаб. */ @media (min-width: 1401px) { body:has(.shell) { --font-scale: 1.1; } } /* Кегль редактора из собранной библиотеки задаем в стиле кабинета. */ .wiki-editor-box .bn-editor { font-size: calc(13px * var(--font-scale, 1)); } :root { /* Одна кривая движения на весь сервис: быстрый старт, мягкая остановка – так интерфейс ощущается как предмет с массой, а не как мгновенное переключение состояний. */ --ease: cubic-bezier(.32,.72,0,1); --lift: 0 18px 40px -24px rgba(0,0,0,.55); --lift-hover: 0 26px 56px -26px rgba(0,0,0,.65); --inner-light: inset 0 1px 0 rgba(242,236,226,.06); } [data-theme="light"] { --lift: 0 18px 40px -28px rgba(23,19,16,.22); --lift-hover: 0 26px 56px -30px rgba(23,19,16,.28); --inner-light: inset 0 1px 0 rgba(255,255,255,.75); } /* Свои правила вида .btn { display: inline-flex } перебивают встроенное правило браузера для hidden – без этого спрятанная кнопка остается видна. */ [hidden] { display: none !important; } /* Шкала кеглей – семь размеров на весь кабинет, больше не заводить: 22/21/19 – заголовок раздела (var(--h1), меняется в точках перелома); 15 – заголовок карточки (h2); 13 – основной текст, кнопки, поля (body); 12.5 – пункт меню (var(--nav-size)); 12 – служебная подпись: даты, счетчики (.muted); 11 – пометка «скоро» и метки; 14 – цифра в показателе. Меньше 11 не опускаемся: не влезает – сокращаем текст или переносим строку, а не уменьшаем кегль. */ body { font-family: 'Golos Text', -apple-system, "Segoe UI", sans-serif; margin: 0; background: var(--bg); color: var(--text); font-size: calc(var(--type-body) * var(--font-scale, 1)); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; } h1, h2, h3 { font-weight: 500; line-height: 1.3; } /* Полоса прокрутки – из макета: тонкая, золотая, на прозрачной дорожке. Системная синевато-серая полоса выбивалась из палитры сильнее всего, потому что она одна на весь экран и всегда на виду. Прозрачная рамка в 2 пикселя с background-clip: content-box дает воздух вокруг ползунка – без нее он прилипает к краю окна. */ * { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-strong-rgb),.45) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(var(--text-rgb),.04); border-radius: 8px; } ::-webkit-scrollbar-thumb { background: rgba(var(--accent-strong-rgb),.42); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-strong-rgb),.72); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ── Точки перелома кабинета (ТЗ и макет «Загрузка знания на ноутбуке», 19.09.2026) ── Одно место на весь сервис. Раньше между «широко» и «телефон» промежутка не было: на ноутбуке в 1280 пикселей страница продолжала жить по правилам 1440 – меню обрезало названия, три карточки источников сжимались до 150 пикселей, правая колонка отбирала у левой последнюю ширину. Теперь ширины, отступы, кегли и число колонок задают переменные ниже, а разделы просто ими пользуются: своих медиа-запросов на эти же вещи в шаблонах быть не должно. от 1440 px меню 240, две колонки, правая 380, карточки источников 2 в ряд 1280–1439 меню 218, две колонки, правая 340, карточки в один столбец 1024–1279 меню значками, одна колонка, карточки 2 в ряд значком сверху до 1023 меню значками, одна колонка, карточки в столбец значком слева до 860 меню полосой сверху (было и раньше) Три карточки источников в ряд не ставим ни на одной ширине: на 1440 это 241 пиксель на карточку, из них 92 забирают значок и отступы – в строке описания остается меньше 20 знаков вместо нужных сорока. Ширины меню на пиксель больше макетных: в макете они заданы без рамки (content-box), у нас – с ней. Про меню важно (правка 20.09.2026): ширина окна задает только НАЧАЛЬНОЕ состояние меню – ниже 1280 свернуто, выше развернуто. Последнее слово всегда за человеком: кнопка «‹ / ›» есть на любой ширине и ставит на атрибут data-nav="open" или "closed". Вес селектора с атрибутом (0,2,0) выше, чем у :root в медиа-запросе (0,1,0), поэтому выбор человека побеждает ширину окна. Отсюда и четыре набора ниже: развернутый набор написан дважды (по умолчанию и для data-nav="open"), свернутый тоже дважды (ниже 1280 и для data-nav="closed"). Это нарочно: у CSS нет способа сказать «примени тот же набор», а собирать состояние меню скриптом – значит мигать им на каждой странице. */ :root { /* Высота шапки и логотипа в рамке кабинета (.shell, .topbar, .nav-brand) – одна переменная на все три места (просьба заказчика 28.09.2026 сделать шапку чуть ниже: было 60px). */ --head-h: 52px; /* Меню – РАЗВЕРНУТО (набор повторен ниже для data-nav="open"). Ширина 216/60 – фиксированная, одна на все широкие экраны (28.09.2026, ТЗ «правки общей рамки кабинета»): раньше развернутое меню само сужалось на ноутбуке (241 → 219), теперь эта тонкая настройка снята сознательно. */ --nav-w-open: 216px; /* ширина развернутого меню */ --nav-w: var(--nav-w-open); --nav-pad: 18px; /* боковые отступы логотипа и подвала меню */ --nav-size: 13px; --nav-text: flex; /* названия пунктов: видны или свернуты в значки */ --nav-title: flex; /* подпись группы; свернуто – линия вместо нее */ --nav-title-line: none; --nav-item-justify: flex-start; --brand-justify: flex-start; --brand-full: block; /* широкий логотип */ --brand-mini: none; /* квадратный мини-логотип для свернутого меню */ --brand-letter: none; /* запасной квадрат с буквой */ --brand-dot: 44px; --foot-align: stretch; --side-when-open: flex; /* какая стрелка на кнопке сворачивания */ --side-when-closed: none; /* Счетчик пункта: плашка с числом или точка в углу значка. */ --badge-pos: static; --badge-w: auto; --badge-h: 18px; --badge-min: 18px; --badge-pad: 0 4px; --badge-font: 10px; --badge-plain-bg: none; /* Страница и шапка раздела */ --page-gutter: 24px; --page-pad-y: 18px; /* верх страницы и низ шапки раздела */ --page-gap: 20px; /* от шапки до первой карточки */ --page-bottom: 28px; --h1: 22px; --head-basis: 420px; /* сколько заголовок раздела просит себе в шапке */ /* Колонки страницы */ --side-col: 380px; --page-cols: minmax(0, 1.5fr) var(--side-col); --col-gap: 14px; /* Карточки источников знания */ --src-cols: repeat(2, minmax(0, 1fr)); --src-dir: row; --src-gap: 14px; --text-h: 260px; /* поле «записать знание текстом» */ /* Мастер «Новый продукт» */ --wiz-col: 720px; /* колонка формы: поле в 1100 пикселей читается хуже, чем в 700 */ --wiz-pair: repeat(2, minmax(0, 1fr)); --wiz-foot-dir: row; --wiz-step-label: inline; /* подписи шагов; ниже 1024 подписан только текущий */ } @media (max-width: 1439px) { :root { --h1: 21px; --page-gap: 18px; --page-bottom: 26px; --side-col: 340px; --page-cols: minmax(0, 1fr) var(--side-col); --src-cols: minmax(0, 1fr); } } @media (max-width: 1119px) { /* Колонка формы сужается до ширины страницы – 720 пикселей уже не влезают вместе с отступами. Парные поля при этом остаются в два столбца. */ :root { --wiz-col: 100%; } } @media (max-width: 1279px) { :root { /* Меню – СВЕРНУТО по умолчанию (тот же набор, что у data-nav="closed") */ --nav-w: 60px; --nav-pad: 14px; --nav-text: none; --nav-title: none; --nav-title-line: block; --nav-item-justify: center; --brand-justify: center; --brand-full: none; --brand-mini: block; --brand-letter: flex; --brand-dot: 32px; --foot-align: center; --side-when-open: none; --side-when-closed: flex; --badge-pos: absolute; --badge-w: 8px; --badge-h: 8px; --badge-min: 0; --badge-pad: 0; --badge-font: 0; --badge-plain-bg: var(--warning); /* Страница */ --page-gutter: 18px; --page-pad-y: 16px; --page-gap: 16px; --page-bottom: 24px; --h1: 19px; --page-cols: minmax(0, 1fr); --src-cols: repeat(2, minmax(0, 1fr)); --src-dir: column; --src-gap: 12px; } } @media (max-width: 1023px) { /* Колонка снова узкая – вертикальная карточка в ней не читается. Кнопки шапки с этой ширины уходят на вторую строку целиком: заголовок просит себе всю строку, а не делит ее с ними. */ :root { --src-cols: minmax(0, 1fr); --src-dir: row; --src-gap: 14px; --head-basis: 100%; --wiz-pair: minmax(0, 1fr); --wiz-foot-dir: column; --wiz-step-label: none; } } @media (max-width: 900px) { :root { --text-h: 180px; } } /* Человек свернул меню сам – на любой ширине. */ :root[data-nav="closed"] { --nav-w: 60px; --nav-pad: 14px; --nav-text: none; --nav-title: none; --nav-title-line: block; --nav-item-justify: center; --brand-justify: center; --brand-full: none; --brand-mini: block; --brand-letter: flex; --brand-dot: 32px; --foot-align: center; --side-when-open: none; --side-when-closed: flex; --badge-pos: absolute; --badge-w: 8px; --badge-h: 8px; --badge-min: 0; --badge-pad: 0; --badge-font: 0; --badge-plain-bg: var(--warning); } /* Человек развернул меню сам – в том числе на ноутбуке, где по умолчанию оно свернуто. Ширина фиксированная, --nav-w-open (216px). */ :root[data-nav="open"] { --nav-w: var(--nav-w-open); --nav-pad: 18px; --nav-text: flex; --nav-title: flex; --nav-title-line: none; --nav-item-justify: flex-start; --brand-justify: flex-start; --brand-full: block; --brand-mini: none; --brand-letter: none; --brand-dot: 44px; --foot-align: stretch; --side-when-open: flex; --side-when-closed: none; --badge-pos: static; --badge-w: auto; --badge-h: 18px; --badge-min: 18px; --badge-pad: 0 4px; --badge-font: 10px; --badge-plain-bg: none; } .layout { display: flex; align-items: flex-start; min-height: 100vh; } /* ── Единая рамка кабинета (28.09.2026, правки общей рамки кабинета) ── Сетка на весь экран: слева колонка меню (parts/sidebar.html), сверху полоса шапки (parts/topbar.html), левая верхняя ячейка – логотип (parts/nav_brand.html). Шапка, логотип и меню красятся одним и тем же --sidebar-bg – рамкой без стыков и границ между ячейками. Панель содержимого (.main) – отдельным цветом (--content-bg) и со своим скруглением в левом верхнем углу, где рамка образует внутренний угол; у остальных трех краев панель доходит до края экрана, скруглять нечего. Ни у одной ширины экрана меню больше не выезжает ящиком (было – до 860px): оно просто сворачивается до значков той же переменной --nav-w, что и на ноутбуке. Прокручивается только панель содержимого – рамка никогда не уезжает, поэтому у .shell есть overflow: hidden и высота ровно 100vh; у тела страницы своей прокрутки нет (body.has-shell). */ .shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: var(--head-h) minmax(0, 1fr); grid-template-areas: "brand head" "side main"; height: 100vh; /* dvh – там, где браузер его понимает: на телефоне сворачивание адресной строки меняет 100vh рывком, а 100dvh следует за настоящей высотой окна. */ height: 100dvh; overflow: hidden; background: var(--sidebar-bg); transition: grid-template-columns .2s var(--ease); } body.has-shell { height: 100vh; height: 100dvh; overflow: hidden; } :root[data-theme="light"] .shell { --sidebar-bg: #343434; } /* Светлые подписи живут только на графитовой рамке. Элементы шапки получают токены отдельно: popup поддержки внутри .topbar-support сохраняет светлую поверхность и исходные токены страницы. Окно профиля расположено вне .sidebar и также не наследует эти значения. */ :root[data-theme="light"] .shell :is(.sidebar, .nav-brand, .topbar > :not(.topbar-support), .topbar-support > button) { --text: #f2ece2; --text-rgb: 242,236,226; --text-72: rgba(242,236,226,.84); --text-62: rgba(242,236,226,.78); --text-muted: rgba(242,236,226,.72); --brand-text: #f5efe4; --accent-ink: #e0c07a; --accent-strong-rgb: 214,178,102; --card-border: rgba(242,236,226,.24); --card-bg: #343434; --neutral-state: #b8b9bf; --warning: #e39a4f; --warning-rgb: 227,154,79; --danger: #f3a294; --danger-rgb: 243,162,148; --card-alert-bg: rgba(227,154,79,.08); --card-alert-border: rgba(227,154,79,.35); } :root[data-theme="light"] .shell :is(.sidebar, .nav-brand) { color: var(--text); } :root[data-theme="light"] .shell .sidebar nav .nav-group, :root[data-theme="light"] .shell button.side-toggle { color: var(--text-muted); } :root[data-theme="light"] .shell .sidebar nav .icon, :root[data-theme="light"] .shell .sidebar nav .soon .icon { stroke: var(--text-muted); } :root[data-theme="light"] .shell .sidebar nav a.active .icon { stroke: var(--accent-ink); } :root[data-theme="light"] .shell .sidebar nav a.is-off { opacity: 1; color: var(--text-muted); } :root[data-theme="light"] .shell .topbar > .topbar-icon-btn, :root[data-theme="light"] .shell .topbar-support > button { color: var(--text-muted); } /* Шапка (parts/topbar.html) – одна на все ширины экрана, от телефона до широкого монитора: раньше это была отдельная полоса только для узкого экрана, теперь она занимает верхнюю ячейку сетки (grid-area: head) рядом с логотипом и над содержимым при любой ширине. */ .topbar { grid-area: head; display: flex; align-items: center; gap: 8px; height: var(--head-h); min-width: 0; padding: 0 20px 0 12px; } /* Значки-кнопки шапки – назад и тема: 32×32, без рамки, приглушенный цвет, подсветка при наведении фоном, а не рамкой (по макету «Карточка продукта»). */ .topbar-icon-btn { flex: none; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: rgba(var(--text-rgb),.55); cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease); } .topbar-icon-btn:hover { background: rgba(var(--text-rgb),.10); color: var(--text); box-shadow: none; } /* Своего stroke у значков в проекте нет ни у одного – каждый блок красит их сам (правило CLAUDE.md, «Значку нужен свой stroke»). Без этой строки стрелка «назад» и солнце/луна рисовались невидимыми. */ .topbar-icon-btn .icon { flex: none; stroke: currentColor; } .topbar-spacer { flex: 1; min-width: 0; } .topbar-ai-toggle { flex: none; margin: 0; } .topbar-ai-toggle button { min-height: 32px; padding: 6px 10px; white-space: nowrap; } a.topbar-expiry { display: flex; align-items: center; gap: 12px; min-width: 0; box-sizing: border-box; min-height: 32px; padding: 0 10px; border: 1px solid var(--card-alert-border); border-radius: 8px; background: var(--card-alert-bg); color: var(--warning); font-size: calc(12px * var(--font-scale, 1)); line-height: 1.4; text-decoration: none; } a.topbar-expiry:hover { border-color: var(--warning); color: var(--warning); } a.topbar-expiry:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; } a.topbar-expiry { flex: none; white-space: nowrap; } .shell:has(.topbar-expiry) { grid-template-rows: auto minmax(0,1fr); } .shell:has(.topbar-expiry) .nav-brand { height:52px; align-self:start; } @media (max-width: 1099px) { .topbar:has(.topbar-expiry) { height: auto; min-height: 52px; flex-wrap: wrap; padding-block: 8px; } .topbar-expiry { order: 10; flex-basis: 100%; } } .topbar-me-wrap { position: relative; flex: none; display: flex; align-items: center; gap: 8px; } .topbar-role { font-size: calc(11px * var(--font-scale, 1)); font-weight: 400; color: var(--text-72); max-width: 160px; line-height: 1.3; } /* Аватар с именем – одна пилюля, открывает окно профиля (см. side-pop). */ a.topbar-me { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 3px; border-radius: 999px; border: 0; background: transparent; color: var(--text); font-size: calc(13px * var(--font-scale, 1)); font-weight: 500; text-decoration: none; cursor: pointer; transition: background .35s var(--ease); } a.topbar-me:hover { background: rgba(var(--text-rgb),.10); } .topbar-me .side-avatar { width: 26px; height: 26px; font-size: calc(10px * var(--font-scale, 1)); } .topbar-me-name { white-space: nowrap; } /* Ниже 420 пикселей имени рядом с аватаром уже не хватает места (ТЗ «правки общей рамки кабинета», 28.09.2026) – аватар остается, открывает то же окно профиля. */ @media (max-width: 419px) { .topbar-me-name { display: none; } } /* Боковое меню (parts/sidebar.html) – занимает нижнюю левую ячейку сетки (grid-area: side), под логотипом (parts/nav_brand.html), той же шириной – --nav-w. Рамки справа больше нет: рамка и панель содержимого разделены не линией, а разным цветом и скруглением угла самой панели (.main). */ .sidebar { grid-area: side; width: var(--nav-w); min-width: 0; height: 100%; /* Прокручивается только список разделов (см. .sidebar nav ниже), а кнопка сворачивания внизу остается на месте. */ overflow: hidden; background: var(--sidebar-bg); padding: 8px 0 20px; display: flex; flex-direction: column; line-height: normal; transition: width .2s var(--ease); } /* .brand – знак сервиса ВНЕ кабинета (parts/brand.html): страницы входа, регистрации, восстановления пароля. Не трогать ради сетки кабинета – там меню нет вовсе, и .brand-plain держится на этой же базовой раскладке (core/static/zevs.css, ниже, класс .brand-plain). Логотип внутри кабинета – отдельный класс .nav-brand, сознательно НЕ .brand: разные страницы, разная раскладка, общее имя однажды развели бы их незаметно (28.09.2026). */ .brand { display: flex; align-items: center; justify-content: var(--brand-justify); gap: 12px; padding: 0 var(--nav-pad) 22px; white-space: nowrap; } .brand .dot { width: var(--brand-dot); height: var(--brand-dot); border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 40% 35%, var(--accent-hover), var(--accent-active)); } a.brand { text-decoration: none; color: inherit; } /* .nav-brand – левая верхняя ячейка сетки кабинета (grid-area: brand, parts/nav_brand.html), той же высоты, что шапка (.topbar) рядом. */ .nav-brand { grid-area: brand; display: flex; align-items: center; justify-content: var(--brand-justify); gap: 12px; height: var(--head-h); min-width: 0; padding: 0 var(--nav-pad); white-space: nowrap; text-decoration: none; color: inherit; } /* В шапке кабинета логотип мельче, чем на страницах до входа (просьба заказчика 28.09.2026): ячейка сетки высотой --head-h (52px), и картинка/ знак в 44 пикселя занимали бы в ней почти все место. .brand (parts/brand.html, страницы до входа) не трогаем – там своя, более просторная раскладка. */ .nav-brand .dot { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 40% 35%, var(--accent-hover), var(--accent-active)); } /* Чужой логотип не должен ломать меню: высота фиксирована, ширина по картинке. */ .brand-logo { height: 44px; width: auto; max-width: 150px; object-fit: contain; flex-shrink: 0; } .nav-brand .brand-logo { height: 28px; } .nav-brand:hover .brand-logo, .nav-brand:hover .dot { opacity: .85; } /* Какой логотип виден, решают переменные меню: развернутое показывает широкий, свернутое – квадратный мини (или букву, если мини не загрузили). Тему знает только браузер, поэтому нужную картинку выбирает CSS. Раньше это переключал атрибут data-nav, но теперь меню сворачивает еще и ширина окна – одного атрибута стало мало. */ .brand-mini { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .brand-letter { display: var(--brand-letter); align-items: center; justify-content: center; font-size: calc(18px * var(--font-scale, 1)); font-weight: 600; color: var(--accent-text); } .brand-logo.for-dark { display: var(--brand-full); } .brand-logo.for-light { display: none; } .brand-mini.for-dark { display: var(--brand-mini); } .brand-mini.for-light { display: none; } :root[data-theme="light"] .brand-logo.for-dark { display: none; } :root[data-theme="light"] .brand-logo.for-light { display: var(--brand-full); } :root[data-theme="light"] .brand-mini.for-dark { display: none; } :root[data-theme="light"] .brand-mini.for-light { display: var(--brand-mini); } /* Графитовая рамка светлой темы требует версии знака для темного фона. */ :root[data-theme="light"] .shell .nav-brand .brand-logo.for-dark { display: var(--brand-full); } :root[data-theme="light"] .shell .nav-brand .brand-mini.for-dark { display: var(--brand-mini); } :root[data-theme="light"] .shell .nav-brand :is(.brand-logo, .brand-mini).for-light { display: none; } /* Две версии логотипа рядом: каждую показываем на ее фоне, иначе не видно, что светлая картинка на светлом фоне пропадает. */ .logo-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-bottom: 8px; } .logo-now { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 12px; padding: 12px; border-radius: 10px; } .logo-now.on-dark { background: #131417; } .logo-now.on-light { background: #f2ece2; color: #171310; } .logo-now.on-light .switch-row span { color: #171310; } .logo-now img { height: 44px; width: auto; max-width: 200px; object-fit: contain; } .logo-mini { height: 22px; width: auto; max-width: 90px; object-fit: contain; } /* Карточка ЛПР – с кем говорить о тарифе; по макету карточки клиента. */ .dm-card { display: flex; gap: 18px; align-items: center; border-color: rgba(var(--accent-strong-rgb),.45); } .dm-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: calc(17px * var(--font-scale, 1)); font-weight: 500; background: rgba(var(--accent-strong-rgb),.18); border: 1px solid rgba(var(--accent-strong-rgb),.5); } .dm-body { flex: 1; min-width: 0; } .dm-title { color: var(--accent-ink); } .dm-name { font-size: calc(var(--type-title) * var(--font-scale, 1)); font-weight: 500; margin: 4px 0 3px; } .dm-history { font-size: calc(13px * var(--font-scale, 1)); margin-top: 6px; } .dm-actions { flex: none; display: flex; flex-direction: column; gap: 8px; } .dm-actions form { margin: 0; } .role-group { margin-bottom: 18px; } .role-head { display: flex; align-items: center; gap: 10px; font-size: calc(11px * var(--font-scale, 1)); color: var(--text-muted); } .role-line { flex: 1; height: 1px; background: rgba(var(--text-rgb),.06); } .person-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .person-line .pill { font-size: calc(var(--type-label) * var(--font-scale, 1)); padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb),.18); color: var(--text-62); } .person-line .pill.dm { border-color: rgba(var(--accent-strong-rgb),.45); background: rgba(var(--accent-strong-rgb),.16); color: var(--brand-text); } .person-line .pill.off { border-color: color-mix(in srgb, var(--warning) 50%, transparent); color: var(--warning); } /* Список клиентов – карточками по макету. */ .client-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .client-card { display: flex; flex-direction: column; gap: 14px; margin: 0; } .cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .cc-name { font-size: calc(var(--type-title) * var(--font-scale, 1)); font-weight: 500; line-height: 1.35; } .cc-head .muted { font-size: calc(13px * var(--font-scale, 1)); margin-top: 4px; } .cc-head .pill { flex: none; font-size: calc(11px * var(--font-scale, 1)); padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb),.2); color: var(--text-72); } .cc-numbers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 12px 0; border-top: 1px solid rgba(var(--text-rgb),.06); border-bottom: 1px solid rgba(var(--text-rgb),.06); } .cc-numbers .muted { font-size: calc(11px * var(--font-scale, 1)); } .cc-value { font-size: calc(15px * var(--font-scale, 1)); font-weight: 500; margin-top: 3px; } .cc-rest { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--font-scale, 1)); } .cc-admin { display: flex; align-items: center; gap: 10px; } .cc-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; font-size: calc(11px * var(--font-scale, 1)); font-weight: 500; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-strong-rgb),.16); border: 1px solid rgba(var(--accent-strong-rgb),.4); } .cc-person { min-width: 0; display: flex; flex-direction: column; } .cc-person-name { font-size: calc(13px * var(--font-scale, 1)); font-weight: 500; } .cc-person .muted { font-size: calc(12px * var(--font-scale, 1)); } .cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; } .brand-text { display: var(--nav-text); } /* Логотип-леттеринг шрифтом Cinzel – он же в исключениях из «Одной шкалы подписей» в шапке файла: капс там нет, а разрядка есть намеренно. Нужен и на страницах входа (.brand span), и в кабинете (.nav-brand span) – те не делят один класс-обертку (см. комментарий у .brand выше), поэтому правило продублировано, а не расширен селектор. */ .brand span, .nav-brand span { font-family: 'Cinzel', 'Golos Text', serif; font-weight: 500; letter-spacing: .14em; font-size: calc(15px * var(--font-scale, 1)); color: var(--brand-text); } .brand-sub { font-size: calc(12px * var(--font-scale, 1)); font-weight: 500; color: var(--accent-ink); margin-top: 3px; } .sidebar nav { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; padding: 0 10px; overflow-x: hidden; overflow-y: auto; /* Полосы прокрутки в списке разделов нет вовсе (просьба заказчика 28.09.2026) – список все равно прокручивается колесом и свайпом, а золотая полоса рядом с меню выглядела отдельной декоративной чертой. scrollbar-width для Firefox, ::-webkit-scrollbar ниже – для остальных. */ scrollbar-width: none; } .sidebar nav::-webkit-scrollbar { width: 0; height: 0; } .sidebar nav a, .sidebar nav .soon { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: calc(var(--nav-size) * var(--font-scale, 1)); text-decoration: none; color: var(--text-62); justify-content: var(--nav-item-justify); transition: background .35s var(--ease), color .35s var(--ease); } .sidebar nav a:hover { color: var(--text); } .sidebar nav a.active { background: rgba(var(--accent-strong-rgb),.12); color: var(--brand-text); font-weight: 500; } .sidebar nav .icon { flex: none; stroke: rgba(var(--text-rgb),.55); } .sidebar nav a.active .icon { stroke: var(--accent-ink); } /* Название и пометка – столбиком: «скоро» стоит ПОД названием, а не в строке справа. Пока пометка стояла справа, она забирала ширину у названия, и «Карта знаний» превращалась в «Карта знан...». Теперь название занимает всю ширину пункта и не сокращается – при нужде переносится на вторую строку. */ .sidebar nav .nav-text { display: var(--nav-text); flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sidebar nav .label { line-height: 1.25; } /* Подпункты открытого раздела – под названием, без значка; текущий ярче. В свернутом меню их нет вовсе. */ .sidebar nav a.nav-child { display: var(--nav-text); padding: 6px 10px 6px 35px; font-size: calc(13px * var(--font-scale, 1)); font-weight: 400; background: none; } .sidebar nav a.nav-child.current { color: var(--brand-text); font-weight: 500; } .sidebar nav .soon { color: var(--text-muted); cursor: default; } .sidebar nav .soon .icon { stroke: rgba(var(--text-rgb),.38); } .sidebar nav .soon .tag { font-size: calc(11px * var(--font-scale, 1)); line-height: 1; color: var(--text-muted); } /* Раздел закрыт до подтверждения почты. Это не заготовка на будущее, а готовый раздел, до которого человеку осталось одно действие, – поэтому видно его отчетливее, чем «скоро», и метка цветом предупреждения. */ .sidebar nav .soon.is-locked { color: var(--text-62); } .sidebar nav .soon.is-locked .tag { color: var(--warning); } /* Раздел скрыт супер-админом на весь сервис: его видит только он сам, и по меню должно быть сразу понятно, что у клиентов этого пункта нет. Пункт рабочий – заходить в него можно, поэтому приглушаем, а не гасим. */ .sidebar nav a.is-off { opacity: .55; } /* «Скрыт» – выключенный раздел, а не то, что ждет внимания: нейтральный серый, не оранжевый (ТЗ «Палитра платформы», 28.09.2026). */ .sidebar nav a.is-off .tag { font-size: calc(11px * var(--font-scale, 1)); line-height: 1; color: var(--neutral-state); } /* Кружок с инициалами. Один класс на весь сервис, размер – модификатором. */ .avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: calc(13px * var(--font-scale, 1)); } .avatar-sm { width: 34px; height: 34px; font-size: calc(12px * var(--font-scale, 1)); } .avatar-lg { width: 56px; height: 56px; font-size: calc(16px * var(--font-scale, 1)); } .avatar-soft { background: rgba(var(--accent-strong-rgb),.18); color: var(--accent-ink); } /* Кнопка, которая должна выглядеть ссылкой (выход – только POST). */ .inline-form { display: inline; } /* Специфичность выше, чем у button[type=submit] – иначе кнопка-ссылка получала бы заливку обычной кнопки. */ button.link-button, button.link-button[type=submit] { background: none; border: 0; padding: 0; font: inherit; font-size: calc(var(--type-body) * var(--font-scale, 1)); color: var(--text-muted); text-decoration: underline; cursor: pointer; } button.link-button:hover, button.link-button[type=submit]:hover { background: none; color: var(--text); } .main { flex: 1; min-width: 0; padding: var(--page-pad-y) var(--page-gutter) var(--page-bottom); max-width: 1400px; } /* Панель содержимого внутри рамки кабинета (28.09.2026, правки общей рамки кабинета) – собственный цвет и скругление левого верхнего угла, там, где рамка образует внутренний угол; у остальных трех краев панель доходит до края экрана, скруглять там нечего. Прокручивается только эта панель – шапка, логотип и меню сидят в своих ячейках сетки и никогда не уезжают. */ .shell .main { grid-area: main; min-height: 0; /* overflow-x не задан нарочно: на узком экране таблицы просят у .main свою горизонтальную прокрутку (@media 860px ниже), и та не должна спорить с этим правилом по весу селектора. Браузер сам считает ее auto, раз вертикальная уже auto – так и было устроено раньше. */ overflow-y: auto; background: var(--content-bg); border-top-left-radius: 20px; } /* На широком экране поверхность доходит до края, а прежняя ширина содержимого (1400px вместе с отступами) сохраняется свободным полем справа. Прокрутка остается у внешнего края поверхности. */ @media (min-width: 861px) { .shell .main:not(.main-flush):not(.ob-main) { max-width: none; padding-right: max(var(--page-gutter), calc(100% - 1400px + var(--page-gutter))); } } /* Страница без собственных отступов и на всю высоту ячейки – для мастера, у которого свои закрепленные полосы сверху и снизу и своя прокрутка середины (.wiz-body): .main сам не должен прокручиваться поверх этого. */ .main-flush { padding: 0; max-width: none; overflow: hidden; display: flex; flex-direction: column; } .main-flush .messages { margin: 16px 32px 0; } /* Узкий экран (телефон, узкое окно). Боковое меню занимало 240 пикселей из 400, и горизонтальная прокрутка появлялась на каждой странице – здесь оно выезжает ящиком поверх страницы, а таблицы получают свою прокрутку. Один порог на весь сервис: ниже 860 пикселей все в одну колонку. */ @media (max-width: 860px) { /* align-items: stretch обязателен: при flex-start колонка получает ширину по содержимому, и широкая таблица растягивала всю страницу вместо того, чтобы прокручиваться внутри своей карточки. Правило относится только к неавторизованным страницам (.layout) – в кабинете сетка .shell не меняет направление ни на одной ширине. */ .layout { flex-direction: column; align-items: stretch; } /* Меню больше не выезжает ящиком ни на одной ширине, в том числе здесь (28.09.2026, ТЗ «правки общей рамки кабинета») – оно просто того же нешироко-экранного вида, что на ноутбуке: колонка значков той же переменной --nav-w, что и везде. Отдельных правил для узкого меню больше нет. */ .main { padding: 16px 16px 40px; } /* Липнет полоса подвала целиком, а не карточка внутри нее: иначе фон страницы просвечивал бы под ней при прокрутке. */ .wiz-foot { position: sticky; bottom: 0; background: var(--bg); padding-bottom: 12px; } /* Таблицы не ломаем и не сплющиваем: строки держат свою ширину, а карточка вокруг них прокручивается вбок сама. */ .roster-grid, .client-grid, .feed-row { min-width: 520px; } .card, .main { overflow-x: auto; max-width: 100%; } /* .ref и .ref-below раскладываются запросом к своей обертке (.ref-flow), но этот ряд оставлен запасным: браузер без поддержки запросов к контейнеру иначе держал бы две колонки на телефоне. */ .grid-2, .cols-2, .stat-row, .tiles-3, .cols-main-side, .cols-side-main, .ref, .ref-below { grid-template-columns: 1fr; } /* Поиск в шапке раздела занимает свою строку целиком. Поле ввода само уже своего размера не становится (у него своя ширина по числу знаков), поэтому «Поиск – поле – Найти» держали около пятисот пикселей, и список клиентов возился вбок на телефоне. */ .page-actions form { flex-wrap: wrap; width: 100%; } .page-actions input[type="text"], .page-actions input[type="search"] { flex: 1 1 140px; min-width: 0; } } .main-centered { max-width: 420px; margin: 60px auto; padding: 0 16px; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: var(--page-pad-y); margin-bottom: var(--page-gap); border-bottom: 1px solid var(--card-border); } /* Кегль заголовка раздела – только из шкалы точек перелома (22/21/19). Он единственный, кроме пункта меню, кому вообще разрешено меняться от ширины, и у него есть верхняя граница: от clamp и vw он рос сильнее, чем нужно. */ .page-header h1 { font-size: calc(var(--type-page) * var(--font-scale, 1)); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 4px; } .page-header .subtitle { color: var(--text-muted); margin: 0; font-size: calc(13px * var(--font-scale, 1)); line-height: 1.5; } /* Заголовок с подписью занимает строку вместе с кнопками и сжимается сам – иначе длинная подпись («... по продукту «Трансформаторная подстанция КТП-Север 630»») выталкивала кнопки на вторую строку уже на 1280. Ниже 1024 он просит себе всю строку, и кнопки переносятся – так в ТЗ. */ .page-header > *:first-child { flex: 1 1 var(--head-basis); min-width: 0; } /* align-items: flex-start – иначе соседняя кнопка растягивается на всю высоту открытой рядом формы (так «Сравнить продукты» превращалась в столб). */ .page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; flex: none; } /* Форма поиска в шапке – своя маленькая сетка, и по умолчанию она растягивает кнопку по высоте поля ввода. Тогда «Найти» оказывается выше соседней кнопки раздела на два пикселя; выравнивание по центру возвращает ей свой размер. */ .page-actions form { align-items: center; } /* Подписи кнопок не переносятся – при нехватке места кнопка уходит на новую строку целиком (28.09.2026, ТЗ «правки общей рамки кабинета», шапка карточки продукта: у нее длинные надписи вроде «Добавить данные о продукте», и без этого правила они переносились посреди слова внутри узкой кнопки, а не отправляли саму кнопку на следующую строку). */ .page-actions > a, .page-actions > button, .page-actions .btn { white-space: nowrap; } h2 { font-size: calc(var(--type-title) * var(--font-scale, 1)); font-weight: 500; margin: 0 0 12px; } .card { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 20px; margin-bottom: 16px; box-shadow: var(--inner-light), var(--lift); transition: box-shadow .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease); } /* Вложенная рамка: карточка лежит в едва заметном поддоне, как стекло в оправе. Радиусы концентрические – внешний на 6 пикселей больше. */ .card-bezel { position: relative; padding: 6px; border-radius: 20px; background: var(--bezel-bg); display: flex; } .card-bezel > .card { margin-bottom: 0; flex: 1; } @media (max-width: 860px) { .card-bezel { padding: 0; background: none; } } /* Карточка, на которую можно нажать, отзывается на наведение: слегка приподнимается и подсвечивает край. Двигаем только transform – остальное заставляло бы браузер пересчитывать раскладку. */ .card[role="link"] { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .card[role="link"]:hover { transform: translateY(-2px); border-color: rgba(var(--accent-strong-rgb),.45); box-shadow: var(--inner-light), var(--lift-hover); } /* Появления блоков при прокрутке здесь больше нет – убрано 20.09.2026 по просьбе заказчика: блоки проявлялись волной, и до нижнего приходилось ждать. Ничего, кроме вида, на нем не держалось: содержимое всегда было на месте, прятала его только эта анимация. */ @media (prefers-reduced-motion: reduce) { /* Человеку, которому движение мешает, показываем все сразу. */ * { animation: none !important; transition-duration: .01ms !important; } } .card-alert { background: var(--card-alert-bg); border-color: var(--card-alert-border); } .card-alert .alert-title { color: var(--warning); font-weight: 500; margin-bottom: 4px; } .card-ok { background: var(--card-ok-bg); border-color: var(--card-ok-border); } .card-ok .alert-title { color: var(--success); font-weight: 500; margin-bottom: 4px; } /* ── Блок, который надо заполнить (22.09.2026) ───────────────────────────── Просьба заказчика: «если данных не хватает, нужно делать блок заметным, чтобы пользователь понимал, что это важно», и так же выделять все блоки, обязательные к заполнению. Чем это отличается от `.card-alert`, рядом с которым стоит: `.card-alert` говорит «что-то не так» (источник не разобрался, знание разъехалось), а `.card-need` – «от вас ждут действия». Поэтому у него есть полоса слева и значок: на странице из восьми одинаковых карточек одного фона мало, его глаз не ловит. Полоса, а не красная рамка целиком: незаполненное поле – это не поломка, и пугать им нельзя. Цвет – `--warning`, а не `--danger`: в темной теме это один и тот же оттенок, но смысл разный, и когда `--danger` станет красным, этот блок красным стать не должен. */ .card-need { /* Рамка, радиус и отступы заданы тут, а не взяты у `.card`: блок ставится и сам по себе, без `.card` (на «Загрузке знания» он живет внутри сводки). Рядом с `.card` значения совпадают с ее собственными – вид не меняется. */ position: relative; overflow: hidden; background: var(--card-alert-bg); border: 1px solid var(--card-alert-border); border-radius: 14px; padding: 20px; } .card-need .need-head { display: flex; align-items: center; gap: 8px; color: var(--warning); font-weight: 500; } /* Значку нужен свой stroke: общего правила `.icon { stroke: … }` в проекте нет, каждый блок красит значки сам – иначе он рисуется невидимым. */ .card-need .need-head .icon { flex: none; stroke: currentColor; } .card-need .need-text { font-size: calc(13px * var(--font-scale, 1)); line-height: 1.6; color: var(--text-72); margin: 8px 0 0; } /* Перечень того, чего не хватает: плашки, а не строка через запятую – так видно и сколько пунктов, и что это отдельные темы, а не одна длинная. */ .need-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .need-list span { font-size: calc(12px * var(--font-scale, 1)); padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); color: var(--text-72); background: rgba(var(--text-rgb),.03); } /* Пометка «нужно заполнить» у подписи поля или блока. Одна на весь сервис: до 22.09.2026 их было три разных (`.field-need` в мастере, `.start-need` в анкете, `.links-required` в окне ссылок), и выглядели они по-разному в трех местах одного кабинета. Старые имена оставлены псевдонимами – они стоят в полутора десятках шаблонов и в снимках. */ .need-tag, .field-need, .start-need, .links-required { display: inline-block; flex: none; font-size: calc(11px * var(--font-scale, 1)); line-height: 1.45; color: var(--warning); padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 8%, transparent); } .field-need { margin-left: 8px; } /* Внутри заголовка пометка не должна липнуть к тексту и тянуть его жирность на себя. Отдельным правилом, а не в базовом: в анкете и в окне ссылок она стоит в ряду с `gap`, и там отступ был бы лишним. */ b > .need-tag, strong > .need-tag { margin-left: 8px; font-weight: 500; vertical-align: middle; } /* Мелкая подпись над цифрой и над блоком. Разрядки (letter-spacing) тут нет и быть не должно – см. «Одна шкала подписей» в шапке файла: она осталась от капса, а капс из интерфейса убран. На строчной кириллице разрядка читается как сбой шрифта, и заказчик поймал это словами «странные между-символьные отступы». */ .eyebrow { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-muted); font-weight: 500; } .metric { font-size: calc(22px * var(--font-scale, 1)); font-weight: 600; line-height: 1.2; } .muted { color: var(--text-muted); font-size: calc(12px * var(--font-scale, 1)); } /* Для содержательного текста (описания, абзацы) – контрастнее и крупнее, чем .muted (который для по-настоящему второстепенных пометок: даты, подписи, "носитель:"). Проверено по пикселям макета – там подписи вроде "Носитель: Игорь Соколов" ощутимо тусклее полных абзацев. */ .text-secondary { color: var(--text-72); font-size: calc(13px * var(--font-scale, 1)); } /* Одна высота у всех обычных кнопок – 36px, как в макете (9px сверху и снизу, 13px шрифт, рамка). Держится на двух вещах, и обе обязательны: * `line-height: normal` – иначе ссылка-кнопка и настоящая кнопка расходятся на четыре пикселя. `