/** * Типографическая шкала по ролям. * * Предыдущий слой 20-typography.css чинил минимумы: поднимал 8px до читаемого * и снимал капитель. Это не шкала, а починка. Здесь заводится сама система: * у каждой роли свой размер, вес, межстрочный и трекинг, и роли отличаются друг * от друга настолько, чтобы иерархия читалась без подсказок. * * Значения сняты с эталона — публичного лендинга team-on.io: * витрина clamp(48px, 4.15vw, 64px) app.css:403 * глава clamp(36px, 3.5vw, 48px) app.css:2381 * раздел clamp(22px, 2vw, 30px) app.css:733 * лид clamp(17px, 1.35vw, 20px) app.css:418 * основной текст clamp(15px, 1.28vw, 18px) app.css:2403 * мелкий clamp(13px, 1vw, 15px) app.css:598 * микро 12px app.css:1513 * Веса эталона: 650 (18 раз), 560 (16), 620 (12), 700 (9). Их и берём. * * Подключается после 20-typography.css и до компонентного слоя: роли — это база, * компонент вправе её уточнить. */ :root { /* Размеры. Заголовок экрана намеренно ограничен 52px: в капсуле он живёт в рабочем интерфейсе, а не на витрине, и 64px там перегружают экран. */ --t-screen: clamp(34px, 3.4vw, 52px); --t-section: clamp(24px, 2.2vw, 32px); --t-card: clamp(17px, 1.4vw, 20px); --t-lead: clamp(16px, 1.3vw, 18px); --t-body: 15px; --t-secondary: 14px; --t-caption: 13px; --t-label: 12px; /* Веса эталона. Числа выбраны по реальному числу начертаний, а не по эталону. Замер в DOM на этой машине (ширина строки «Заголовок раздела» при 20px): 400 → 173.31px 500, 560, 600, 620 → 179.00px 650, 700, 800 → 185.98px То есть системный стек даёт ТРИ начертания, а не непрерывную ось. Прежняя шкала 700/650/620/560 попадала в них так, что --w-heading совпадал с --w-display, а --w-strong с --w-medium: из четырёх ступеней на экране жили две, и заголовок раздела рисовался тем же жирным, что заголовок экрана. Новые числа разводят роли по трём доступным начертаниям и одновременно дают более чистую шкалу там, где шрифт переменный (SF Pro на macOS): 700 / 600 / 560 / 500 / 400 вместо 700 / 650 / 620 / 560 / 400. Одно совпадение на Windows остаётся неизбежным — три начертания на четыре роли, — но оно уведено вниз, к --w-strong и --w-medium, которые всегда разведены кеглем. */ --w-display: 700; --w-heading: 600; --w-strong: 560; --w-medium: 500; --w-regular: 400; /* Межстрочные: чем крупнее кегль, тем плотнее строка. Имя --lh-section, а не --lh-heading: последнее уже объявлено в 20-typography.css:52 со значением 1.2 и потребляется там же на строке 418 для .session-copy и .team-rail-brand strong. Повторное объявление в позднем файле молча меняло те два правила на 1.16 — при кегле 17px это 19.72px вместо 20.4px. */ --lh-display: 1.06; --lh-section: 1.16; --lh-lead: 1.42; --lh-body: 1.55; --lh-tight: 1.35; } /* ЗАГОЛОВОК ЭКРАНА Приветствие в ленте, заголовок карточки входа, заголовок ящика настроек. Это единственная роль с отрицательным трекингом: на крупном кегле буквы иначе разъезжаются. */ /* Селектор по классу, а не по id: `#welcome-title` имеет специфичность (1,0,0) и глушил три адаптивных уменьшения из боевого app.css — сжатый режим Студии и две мобильные ветки. Здесь (0,2,0), и боевые правила снова работают. */ .welcome-card h1, .login-card h1, .drawer-header h2 { font-size: var(--t-screen); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: -.025em; text-wrap: balance; } /* Сжатый режим Студии: заголовок приветствия обязан уменьшаться вместе с колонкой, иначе он занимает половину полотна. Повторяем боевые границы, но в новой шкале. */ .workbench.canvas-full .welcome-card h1 { font-size: clamp(22px, 2.4vw, 32px); } /* ЗАГОЛОВОК РАЗДЕЛА Шапка Холста, заголовки крупных панелей, заголовки секций Академии. */ .space-surface-summary h3, .section-heading h2, .section-heading h3, #work-surface-title, .academy-section > h2 { font-size: var(--t-section); font-weight: var(--w-heading); line-height: var(--lh-section); letter-spacing: -.015em; /* Роль доходит до 32px в колонке 620px, поэтому русский заголовок регулярно ломается на две строки с одиноким словом внизу. balance выравнивает строки по длине; на длинных абзацах он не применяется, но заголовок — короткий блок, ровно его случай. */ text-wrap: balance; } /* Заголовок панели внутри ящика — это не заголовок раздела: ящик шириной 520px, рядом с ним пилюля 12px и отступ 13px, и 32px там выглядят криком. Плюс структура панелей разная: в семи из десяти strong лежит не прямым потомком, поэтому селектор потомковый — иначе соседние заголовки одной вкладки отличались бы втрое. */ .panel-heading strong { font-size: var(--t-card); font-weight: var(--w-strong); line-height: var(--lh-tight); letter-spacing: -.008em; } /* ЗАГОЛОВОК КАРТОЧКИ Единица списка: навык, задача, воспоминание, артефакт, элемент пространства. Между ролью раздела и ролью карточки разница минимум 6px — иерархия читается. */ /* Заголовок лежит не прямым потомком, а внутри обёртки: карточка списка устроена как .space-item > .space-item-header > div > strong (проверено на живом стенде), навык — как .skill-card > header > h4 (app.js), приглашение — как .onboarding-card > .onboarding-card-header > strong. Поэтому селекторы потомковые, но прижаты к классу карточки, чтобы не задеть текст в ленте. */ .skill-card h4, .space-item-header strong, .memory-card strong, .artifact-card > strong, .onboarding-card-header > strong, .canvas-artifact > strong, .journal-entry strong { font-size: var(--t-card); font-weight: var(--w-strong); line-height: var(--lh-tight); letter-spacing: -.008em; } /* ЛИД Подзаголовок под заголовком экрана: пояснение к приветствию и к формам входа. Крупнее основного текста, но заметно легче заголовка. */ #welcome-copy, .login-copy p.muted, .space-surface-summary p { font-size: var(--t-lead); font-weight: var(--w-regular); line-height: var(--lh-lead); /* pretty, а не balance: лид может быть длиннее трёх строк, и balance на таких блоках браузером игнорируется. pretty работает с хвостом абзаца и убирает висячее последнее слово. */ text-wrap: pretty; } /* ОСНОВНОЙ ТЕКСТ Сообщения в ленте и тело карточек. Ширина строки ограничена в слое композиции, здесь только кегль и ритм. */ .bubble, .message-body, .canvas-body, .work-empty p { font-size: var(--t-body); font-weight: var(--w-regular); line-height: var(--lh-body); } /* ВТОРИЧНЫЙ ТЕКСТ Пояснение внутри карточки под её заголовком. */ .skill-card > p, .space-item-header p, .memory-card p, .artifact-card > span, .onboarding-card small, .journal-entry p { font-size: var(--t-secondary); font-weight: var(--w-regular); line-height: var(--lh-body); } /* ПОДПИСЬ Мета под содержимым: время, автор, источник, счётчик. */ .timeline-meta, .timeline-meta time, .memory-card time, .journal-entry time, .scenario-meta, .support-note { font-size: var(--t-caption); font-weight: var(--w-regular); line-height: var(--lh-tight); } /* МЕТКА Навигация, вкладки, статусные пилюли, надстрочные метки. 12px — брендовый пол для этой роли, ниже опускаться нельзя. Вес средний: метка не должна спорить с заголовком, но обязана держать форму на мелком кегле. */ .eyebrow, .nav-item, .work-tab, .space-surface-tab, .soft-pill, .drawer-tabs .nav-item { font-size: var(--t-label); font-weight: var(--w-medium); line-height: 1.3; letter-spacing: 0; text-transform: none; } /* ПАРА «ЗАГОЛОВОК ГРУППЫ — СОДЕРЖИМОЕ» В списке подключений и в карточках модулей заголовок и подпись были набраны одним кеглем 11px, из-за чего группа читалась как сплошная серая масса. Заголовок группы поднимаем и делаем плотнее, содержимое оставляем текстом. Одно объявление, а не два: раньше этот селектор стоял ещё и в группе меток выше, получал там --w-medium, а здесь --w-strong, и в панели Styles три font-weight подряд шли перечёркнутыми — по коду было не понять, какой вес рисуется. */ .space-surface-group > h4 { font-size: var(--t-label); font-weight: var(--w-strong); line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink); } /* ЧЕГО ЭТОТ ФАЙЛ СОЗНАТЕЛЬНО НЕ ДЕЛАЕТ 1. Не трогает шрифтовой стек: он задан в 20-typography.css, и менять его здесь означало бы спорить с соседним слоем. 2. Не задаёт ширину строки и отступы — это композиция, слой 35. 3. Не трогает мобильные ветки ниже 760px: там свой слой 40-mobile.css, а clamp() уже сам сжимает крупные роли на узком экране. 4. Не переводит на шкалу мелкие служебные подписи внутри Академии и Студии: их разметка приходит из JS и без живых данных проверить нечем. */