/* ============================================================ Provenance Diligence — токены. Единственное место, где живут числа. 27.08.2026 · вход МАРКЕТИНГ · источник: FINAL_CONCEPT_2026-08-27.md §2 Любое расхождение с этим файлом в любом другом месте проекта считается ошибкой того места, а не этого файла. Числа, отмеченные ЗАМЕРЕНО, получены исполнением, а не оценкой. ============================================================ */ :root { /* --- СЕТКА ------------------------------------------------- ЗАМЕРЕНО: 12×72 + 11×24 = 1128 ровно. Прежние 1120 давали колонку 71,333 — ни одна из 11 внутренних границ не стояла на целом пикселе. */ --band: 1128px; --cols: 12; --gap: 24px; --col: 72px; /* (1128 − 11×24) / 12 */ --margin-left: clamp(20px, 6vw, 96px); --prose: 648px; /* колонки 1–7: 7×72 + 6×24 */ --aside: 456px; /* колонки 8–12: 5×72 + 4×24 */ /* проверка: 648 + 24 + 456 = 1128 */ /* --- ВЕРТИКАЛЬНЫЙ РЕЛЬС ------------------------------------ Базовая единица — СТРОКА ТЕЛА, а не 8px. ЗАМЕРЕНО: из прежней шкалы 4·8·16·24·40·64·104·168 ноль из восьми шагов кратны 30. */ --line: 30px; /* базовая единица */ --sp-half: 15px; /* только внутри примитива */ --sp-1: 30px; --sp-2: 60px; --sp-3: 90px; --sp-4: 120px; --sp-6: 180px; /* --- ГАРНИТУРЫ --------------------------------------------- СТАТИЧЕСКИЕ начертания, не переменные. ЗАМЕРЕНО 27.08 (latin + latin-ext, раздача Google): переменные Source Serif 4 opsz + Plex Sans var .. 293 КБ статика serif 400 + 600 + sans 500 ............. 116 КБ Ось opsz снята: у Inter она тоже есть, доказательством ручной работы она никогда не была. Хостинг свой — Google Fonts это сторонний хост. */ /* Образец фаундера (baton.com) набран ОДНОЙ гарнитурой без засечек — Akkurat. Она платная. Inter — её ближайшая бесплатная родня: тот же нейтральный гротеск, закрытые апертуры, ровный ритм. Лицензия SIL OFL, кириллица родная, файлы лежат у нас. Засечная оставлена вторым голосом для правовых страниц: там длинный сплошной текст, и засечка держит строку лучше. */ --sans: "Onest", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif; /* Своей моноширинной у нас нет и файла к ней нет: строка тянула откат на Consolas. Числа набираются той же гарнитурой с табличными цифрами. */ --mono: "Onest", SFMono-Regular, Menlo, Consolas, monospace; /* --- ШКАЛА ------------------------------------------------- ШЕСТЬ кеглей, ТРИ значения интерлиньяжа: 15 · 30 · 45. Рельс держится на уровне БЛОКА, не строки: две строки H1 = 2×45 = 90 = три строки тела две строки реквизита = 2×15 = 30 = одна строка тела */ --h1: 69px; --h1-lh: 82px; /* sans 700. 🔴 01.09.2026 поднят с 60/60 по слову фаундера «хочу как на baton.com». Замер образца: 67px, интерлиньяж 80,4px, разрядка −1,34px. Реальная высота строчной буквы у них 35px против наших 32px — это ЕДИНСТВЕННОЕ место, где их шрифт крупнее нашего: основной текст у нас 19px против их 16px, кнопка 16 против 14. Прежнее значение (как у образца: у baton.com заголовок 67 px начертанием 700. Округлено до 60, чтобы остаться на рельсе: 60 = 4×15, две строки = 120. */ --h2: 30px; --h2-lh: 34px; /* serif 600 */ --h3: 23px; --h3-lh: 32px; /* serif 600 — возвращён 28.08, поднят с 21px 01.09.2026 по слову фаундера «увеличить заголовки». */ --body: 21px; --body-lh: 32px; /* serif 400 */ --label: 18px; --label-lh:32px; /* sans 500. 🔴 01.09.2026 поднят с 15px по слову фаундера «шрифт не меньше, чем на baton.com». Замер образца при окне 1440: основной размер 16px (57 элементов из 89), кнопки и верхнее меню 16px. У нас меню и подписи были 15px, кнопки 14–15px. */ --meta: 17px; --meta-lh: 24px; /* mono 400. 🔴 01.09.2026 поднят с 13/15 тем же решением. Самый мелкий ОБЫЧНЫЙ текст у образца — 14px; 15px берём с запасом. ⚠️ 13/15 = 1,15. Это НЕ описка: рельс держится на «две строки реквизитов = 30 = одна строка тела». Правило узкое — строка «источник · дата» набирается в ОДНУ строку. Переносится — блок перестраивается, а не уплотняется. Многострочный реквизит: 13/30 (--meta-lh-loose). */ --meta-lh-loose: 32px; /* H3 возвращён 28.08: 21/30, экран цены требует четвёртого уровня. Цена на экране 7 (порядок и цена) — ступень H1, serif, lining-nums. На первом экране цена стоит ВНУТРИ предложения H2 и кеглем не выделяется. */ --tracking-h1: -0.01em; /* единственный трекинг */ /* --- ПАЛИТРА ----------------------------------------------- Контрасты пересчитаны по формуле WCAG и сверены проверяющим. */ --paper: #FAF8F7; /* лист страницы; ink на нём 12,80:1 */ --card: #FFFFFF; /* карточки и поле ввода поверх листа */ --ground: #F0F4EA; /* бледно-зелёная полоса; ink 12,25:1 */ --deep: #1F625C; /* тёмная полоса; белый на ней 6,20:1 */ --deep-2: #217A75; /* вторая тёмная полоса; белый 4,72:1 */ --ink: #2E2F34; /* текст */ --muted: #5A6169; /* ярлыки, реквизиты; 7,44:1 */ --accent: #CD4A01; /* ТОЛЬКО заливка кнопки. Белым по нему 4,59:1 — проходит. Текстом по листу он даёт 4,33:1, то есть НИЖЕ порога 4,5. У образца оранжевый и стоит только заливкой. */ --tram: #CD9015; /* ЗАМЕР по пикселям панно главной: средний по 4507 насыщенным точкам корпуса трамвая. Надписью по --deep даёт 2,57:1 при пороге 4,5 — поставлен по прямому слову фаундера, который смотрит своими глазами. */ --tram-lite: #F1CA7A; /* тот же тон 40° и сочность 81%, светлота поднята до 71%: по --deep 4,55:1 — порог проходит. */ --flag: #DA291C; /* красный флага Португалии, Pantone 485C. Надписью по --deep даёт 1,46:1 — худшая пара из возможных, и сам флаг красное с зелёным вплотную не сводит: на стыке герб. */ --flag-lite: #F7C5C1; /* тот же тон 4°, светлота поднята до 86%: по --deep 4,62:1 — порог 4,5 пройден. ВЫБОР ФАУНДЕРА 31.08 из четырёх показанных вариантов, при показанном замере и при прямо названном следствии: на экране это читается розовым, не алым. */ --link: #1F625C; /* ссылки текстом; на листе 6,70:1 */ --head: #1F625C; /* ЗАГОЛОВКИ. У образца они бирюзовые, а не чёрные — это одно из главных отличий, которое читается как «не похоже». Замер baton.com: h1, h2 и абзацы-подводки на светлом набраны #1F625C. */ --rule-hair: #E4DFDA; /* декоративные линии */ --rule-ui: #8A8580; /* прочие границы; 3,27:1 */ /* Красного нет ни одного оттенка. Тема светлая, единственная. Шкала состояния находки АХРОМАТИЧЕСКАЯ: смысл несёт слово с определением, охра из шкалы выходит целиком. */ /* --- ФОРМА ------------------------------------------------- Граница поля поднята до --ink 1,5px: при радиусе 0 и границе 3,35:1 поле переставало читаться полем. */ --field-bg: var(--card); --field-border: 1.5px solid var(--rule-ui); --focus-ring: 0.25em solid var(--ink); --focus-offset: 0.125em; /* --- ПРОЧЕЕ ------------------------------------------------ */ --radius: 0; /* один радиус на всё */ --hover-ms: 120ms; /* единственная длительность */ --target-min: 24px; /* WCAG 2.2 SC 2.5.8 */ } /* --- ДВИЖЕНИЕ ------------------------------------------------ Бюджет: ноль самостоятельно запускающегося движения. Реакция на наведение и рамка фокуса — всё. */ @media (prefers-reduced-motion: reduce) { :root { --hover-ms: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* --- НОСИТЕЛЬ ------------------------------------------------ */ .band { max-width: var(--band); margin-left: var(--margin-left); margin-right: auto; /* правое поле резиновое */ } .prose { max-width: var(--prose); } .aside { max-width: var(--aside); } /* Поле примечаний рядом с прозой. КОНТЕЙНЕРНЫЙ запрос, не медиазапрос по ширине окна: поле зависит от своего контейнера, а не от размера экрана. */ .spread { container-type: inline-size; } @container (min-width: 1128px) { .spread__inner { display: grid; grid-template-columns: var(--prose) var(--gap) var(--aside); } } /* Узкий вьюпорт: одна колонка, отбивки целыми строками сохраняются, примечание встаёт ПОД своим абзацем. */ /* --- ЕДИНСТВЕННЫЙ ПОВТОРЯЮЩИЙСЯ ПРИМИТИВ --------------------- Строка записи. Ею набраны экраны 3, 5, 8 и 10 — четыре из десяти. Ширина ярлыка НЕ фиксирована: короткие строки при переводе на ES и PT растут вплоть до 300 %. */ .rec { display: grid; grid-template-columns: minmax(min-content, max-content) 1fr auto; gap: 0 var(--gap); padding: var(--sp-half) 0; border-bottom: 1px solid var(--rule-hair); } .rec__label { font: 500 var(--label)/var(--label-lh) var(--sans); color: var(--muted); } .rec__value { font: 400 var(--body)/var(--body-lh) var(--serif); color: var(--ink); } .rec__meta { font: 400 var(--meta)/var(--meta-lh) var(--mono); color: var(--muted); } /* --- ТИПОГРАФИКА --------------------------------------------- */ body { font: 400 var(--body)/var(--body-lh) var(--serif); color: var(--ink); background: var(--paper); text-align: left; /* флаговый набор */ hyphens: none; /* переносов нет */ } h1 { font: 400 var(--h1)/var(--h1-lh) var(--serif); letter-spacing: var(--tracking-h1); } h2 { font: 600 var(--h2)/var(--h2-lh) var(--serif); letter-spacing: 0; } h3 { font: 600 var(--h3)/var(--h3-lh) var(--serif); letter-spacing: 0; } /* --- СОСТОЯНИЯ. Добавлены 28.08: их не было ни одного, и проверка полноты назвала это блокирующим — верстальщик принял бы их сам, а браузер по умолчанию красит посещённую ссылку фиолетовым, что прямо ломает правило «охра — только интерактивное». */ a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color var(--hover-ms) ease-out; } a:visited { color: var(--accent); } /* НЕ фиолетовый: один знак — одно значение */ a:hover { text-decoration-thickness: 2px; } a:active { color: var(--ink); } /* Единственная кнопка страницы. Заливка --ink, текст --paper: 16,59:1 — контраст тот же, что у текста на бумаге. */ .btn { font: 500 var(--label)/var(--label-lh) var(--sans); color: var(--paper); background: var(--ink); border: 0; border-radius: var(--radius); padding: var(--sp-half) var(--sp-1); min-height: 45px; /* полторы строки тела, ≥ --target-min */ cursor: pointer; transition: background var(--hover-ms) ease-out; } .btn:hover { background: #0B1720; } /* та же краска темнее */ .btn:active { background: #000; } .btn[disabled]{ background: var(--muted); cursor: default; } /* Рамка фокуса. outline-offset выносит её НАРУЖУ элемента, поэтому на кнопке --ink она лежит на бумаге и видна: 16,59:1. Проверка полноты утверждала обратное — это неверно, и вот почему: без offset рамка совпала бы с заливкой, с offset она за краем. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } :focus:not(:focus-visible) { outline: none; } /* Строка записи: реакция на наведение — фон, не рост. */ .rec:hover { background: var(--ground); } /* Заголовков прописными нет ни одного. lang обязателен на и на КАЖДОЙ иноязычной цитате — от него зависят кавычки трёх языков. */ /* Цифры: табличные всюду, где числа стоят столбцом. */ .num { font-variant-numeric: lining-nums tabular-nums; } /* Дата печатается как «27 Mar 2026», не «27.03.2026»: для читателя из США 03.27 и 27.03 неразличимы. */