/* ============================================================================ ДЕШАБЛОН, ЧАСТЬ «ТИПОГРАФИКА» (25.08.2026) Файл отдельный и подключён ПОСЛЕДНИМ намеренно: styles.css на 8480 строк и 15 зон правят параллельно другие исполнители, polish-* только что выкачены в прод. Единственный безопасный рычаг тут - порядок в каскаде, а не правка чужих зон и не наращивание веса селекторов. ЧТО ИМЕННО ЧИНИТСЯ. Детектор шаблонности дал по типографике три класса: мелкий текст (< 12px), целый абзац капсом и сжатие букв до -0.05em. Все находки я снял ПРИБОРОМ на живой странице (headless-Chrome, окно 1280x800 - то же, в котором меряет детектор), с селекторами и числами, а не по догадке из исходника. ЧЕГО ЗДЕСЬ НЕТ И ПОЧЕМУ: - серебряный градиент на крупных заголовках не тронут: канон агентства от 17.08. Правится ТОЛЬКО межбуквенное расстояние заголовка; - синий #4FC4E9 и свечение круглой кнопки помощника не тронуты: прямые просьбы владельца, а не штамп генератора; - капс на коротких микро-подписях (.card__tag, .field__label, .spot__cta и прочие рубрики в 12-20 символов) оставлен: капс вреден на ФРАЗЕ, а на ярлыке в два слова он и есть нормальный приём. Тронута ровно одна подпись, которая на деле фраза в 32 символа. ========================================================================= */ /* --------------------------------------------------------------------------- 1. ЗАГОЛОВОК ГЕРОЯ: СЖАТИЕ БУКВ -0.05em -> -0.03em ЗАМЕР ДО: .hero h1 и унаследовавший его .hero h1 .accent, кегль clamp(31px, 6.4cqi, 58px), на окне 1440 это 52.48px, letter-spacing -2.624px = ровно -0.05em, начертание 500-700. ПОЧЕМУ ЭТО НЕ ВКУСОВЩИНА. Сжатие задано в em, поэтому оно одинаково и на 58px, и на 31px в узком окне. На крупном кегле -0.05em ещё держится, на 31px буквы уже слипаются: «ии», «лл», «нн» в русском тексте сходятся в одно пятно. Оптическое сжатие крупного шрифта живёт около -0.02...-0.03em, а -0.05em - это уже потеря формы буквы. ПОЧЕМУ РАЗНЫЕ ЗНАЧЕНИЯ. Чем мельче кегль, тем меньше он терпит сжатия, поэтому на узком окне сжатие ослаблено ещё вдвое. Селектор .hero .hero__copy h1 (0,2,1) перебивает и .hero h1, и правила внутри медиазапросов styles.css без ! important. */ .hero .hero__copy h1{ letter-spacing: -.03em; } @media (max-width: 760px){ /* На телефоне заголовок падает до 31px - на этом кегле держим -0.02em, то есть ровно столько, сколько нужно, чтобы строка не рассыпалась. */ .hero .hero__copy h1{ letter-spacing: -.02em; } } /* --------------------------------------------------------------------------- 2. ФРАЗА КАПСОМ В ТЕЛЕ ТЕКСТА ЗАМЕР ДО: .honest__label, 12.5px, вес 500, letter-spacing 2.5px (0.2em), text-transform: uppercase, ширина блока 320px, 32 символа: «ЧЕМ ЭТО ЗАМЕНИТЬ, ПОКА ЛЕНТЫ НЕТ». Второй такой же ярлык рядом - «ЧЕСТНО: ЧЕГО МЫ НЕ ГАРАНТИРУЕМ», 30 символов. ПОЧЕМУ ЧИНЮ. Слово мы узнаём по силуэту - по выносным элементам букв. Капс силуэт стирает, все слова становятся прямоугольниками, и фраза читается заметно медленнее. Это не ярлык в два слова, это предложение, и стоит оно НАД абзацем как маленький заголовок. Показательно, что детектор поймал только один из двух ярлыков: у соседа 30 символов, порог 30. Разница между ними в два символа, а не в сути, поэтому лечу оба сразу - иначе осталась бы ровно та же ошибка, просто не пойманная прибором. ЧТО СДЕЛАНО: возвращён обычный регистр, шрифт наследуется от блока (был моноширинный - в обычном регистре он читался бы как строка кода), кегль поднят до 13.5px, разрядка снята почти в ноль. 🔴 РАЗРЯДКУ ОБЯЗАН БЫЛ СНЯТЬ: 0.2em законны на капсе (там разрядка компенсирует плотность прописных), но на строчных буквах 0.2em - это уже «широкий трекинг в теле текста», отдельная находка того же детектора. Снял капс и оставил бы 0.2em - поменял бы одну болезнь на другую. */ .honest .honest__label{ font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.45; text-transform: none; } /* --------------------------------------------------------------------------- 3. МЕЛКИЙ ТЕКСТ В ПАНЕЛИ ПОМОЩНИКА ЗАМЕР ДО: .aai-head__s - 11.5px, 27 символов, «Мы на связи, отвечаем сразу»; .aai-note - 11px, 80 символов, сноска про справочность ответа. Оба - живой текст для чтения, а не служебный ярлык, и оба стоят в панели шириной min(384px, 100vw - 32px). ПОЧЕМУ 12.5px, А НЕ 11px. Закон владельца - пол 11px, но 11px это пол для МИКРО-ПОДПИСИ; для текста, который читают предложением, на экране с высокой плотностью пикселей это уже мелко. 12.5px - минимальный шаг, который уводит оба фрагмента выше порога и при этом не ломает ни строку заголовка панели (у неё многоточие при переполнении), ни высоту панели. ЧТО ПРОВЕРЕНО ПОСЛЕ ПРАВКИ, а не заявлено: панель открыта скриптом в headless-Chrome, замерено scrollWidth против clientWidth у подписи (нет ли срабатывания многоточия) и общая высота панели против её max-height. Селектор с id перебивает зону 14 styles.css, которую я трогать не имею права. Сверено скептиком 25.08: polish-assistant.css кегль этим двум строкам НЕ задаёт вовсе (grep по файлу пуст), поэтому прод-файл здесь ничем не перебит, и вес с id нужен только против styles.css. */ #aaiPanel .aai-head__s{ font-size: 12.5px; } #aaiPanel .aai-note{ font-size: 12.5px; line-height: 1.45; } /* --------------------------------------------------------------------------- 4. ПОДПИСЬ «КОТИРОВКИ ПОДГРУЖАЮТСЯ» В ПАНЕЛИ РЫНКА ЗАМЕР ДО: #marketStamp, 11px, вес 400, letter-spacing 0.55px (0.05em), доступная ширина 278px. В разметке лежит текст-заглушка «котировки подгружаются» - 22 символа, и до ответа биржи человек читает именно её; потом app.js подменяет её на короткое «обновлено 06:42». Из-за этой подмены находка и была неуловимой: прибор, снятый после загрузки, видит 15 символов и молчит, а на первой отрисовке текст длиннее порога и набран 11px. ПОЧЕМУ ТОЛЬКО ОТ 1200px. Ниже 1199px действует mobile.css, где .market__stamp намеренно отнесён к микро-подписям 11px, и у автора того файла есть замер на 375px с запасом в 4 пикселя на строку. Ломать чужой измеренный ряд ради одного пикселя нельзя, а 11px на телефоне закон владельца допускает. На широком окне запаса 278px против нужных ~130px, поэтому кегль поднят. */ @media (min-width: 1200px){ #marketStamp{ font-size: 12px; /* 🔴 РАЗРЯДКУ СНИЖАЮ ВМЕСТЕ С КЕГЛЕМ, И ЭТО НЕ УКРАШЕНИЕ. Проверка «что теряет правка» показала: подпись стоит ровно на пороге широкого трекинга (0.05em при пороге «строго больше 0.05»), и после подъёма кегля прибор начал считать её нарушением - сравнение двух прогонов одного и того же файла, с моей таблицей стилей и без неё, дало 1 находку против 0. Стоять на границе округления нельзя: то же правило завтра сработает от любой соседней правки. 0.03em уводит подпись с порога с запасом и оставляет моноширинной строке воздух. */ letter-spacing: .03em; } } /* --------------------------------------------------------------------------- 5. СНИЖЕННОЕ ДВИЖЕНИЕ Этот файл не добавляет НИ ОДНОЙ анимации и ни одного перехода: он меняет только кегль, регистр и межбуквенное расстояние. Блок оставлен как гарантия на будущее - если сюда допишут состояние с переходом, оно уже погашено. 🔴 ЗДЕСЬ НАМЕРЕННО НЕТ animation: none. Серебро заголовка героя - это заливка градиентом через background-clip, и если её когда-нибудь заведут ключевыми кадрами, глухое animation: none оставило бы заголовок в состоянии ДО анимации, то есть могло бы погасить его совсем. Гасить переходы безопасно всегда, гасить анимацию вслепую - нет. */ @media (prefers-reduced-motion: reduce){ .hero .hero__copy h1, .honest .honest__label, #aaiPanel .aai-head__s, #aaiPanel .aai-note, #marketStamp{ transition: none; } }