/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · theme: custom (signal blue on ink) * hero: H2 Split Diptych · nav: N5 Floating pill · footer: Ft5 Statement · features: F4 Step sequence * enrichment: Tier B — hand-built SVG wordmark with CSS-animated run cycle * pre-emit critique: P5 H5 E4 S5 R4 V5 */ /* tokens.css подключается ссылкой в , а не отсюда. @import стоил одного круга сети на каждой загрузке: браузер узнаёт о втором файле только после того, как скачал и разобрал первый. Замер 07.08.2026 на боевом сайте: styles.css завершался на 930 мс, tokens.css СТАРТОВАЛ на 932, шрифты — на 1391. Три круга подряд перед первой отрисовкой. Ставит ссылку scripts/link-tokens-css.py, стережёт check-site.py. */ /* ============ база ============ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: clip; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Трекинг и интерлиньяж идут ПАРОЙ с размером, а не задаются раз на все заголовки. Значения ниже — дефолт для заголовка среднего кегля (h3, h4); крупные кегли перекрывают его своим трекингом рядом с font-size. Почему так, а не одним числом на всё, — в шапке шкалы в tokens.css. */ h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: var(--track-lg); line-height: var(--lead-lg); margin: 0; overflow-wrap: anywhere; min-width: 0; /* Строки заголовка выравниваются по длине. Без этого перенос идёт «как влезет»: H1 главной на 1440 px давал «Из Китая — через» / «одного» / «оператора.» — вторая строка вчетверо короче первой, и заголовок читается как обрубленный. Свойство работает до шести строк, дальше браузер молча переходит к обычному переносу, — для заголовков этого хватает с запасом. */ text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { max-width: 100%; } a { color: inherit; text-decoration: none; } /* Ссылка внутри текста обязана быть видна ссылкой. Подчёркивание снято глобально строкой выше — это верно для кнопок, пунктов меню и карточек-ссылок, у которых своя форма. Но в абзаце оно снималось тоже, и «Калькулятор считает обе схемы рядом» выглядело сплошным предложением: ни цвета, ни линии, ни курсора-руки до наведения. На тёмной полосе это заметнее всего — там даже оттенка нет. Отбираются ссылки БЕЗ собственного класса: у всякой ссылки-элемента (.btn, .nav__links a, .route a) класс есть, а текстовая ссылка пишется голым тегом. Признак держится сам собой — новая ссылка в тексте получит вид без правки CSS. Подчёркивание тонкое и отодвинуто от букв: линия вплотную режет нижние выносные у «р», «у», «д». WCAG 1.4.1 — различие не должно держаться на одном цвете. Навигация исключена целиком: `:not(nav a)` отсекает потомков любого