/* ============================================================================ photographer.ru – дизайн-система, фаза 2 TASK-002 ЗАФИКСИРОВАНО решением владельца 01.08.2026: гарнитуры, кегли, веса, интерлиньяжи и цвет. ЗАФИКСИРОВАНО решением владельца 13.08.2026, фаза 4: пространственная шкала, каркас страницы и реестр контрольных точек. Прежняя редакция этой шапки отправляла за ними на макетирование страниц – с 13.08.2026 они здесь. Разбор и замер, на которых принято решение: materials/design/пространство-и-сетка-2026-08-13.md. Единый источник значений. Все числа проверены рендером Chromium 151, способ проверки указан рядом. Ничего не менять «на глаз» и не дублировать литералами в компонентах. ============================================================================ */ :root{ /* --- ГАРНИТУРЫ --------------------------------------------------------- Антиква несёт чтение, гротеск несёт аппарат: навигацию, подписи, дату, крошки, таблицы, интерфейс. Читатель различает текст и обвязку начертанием, а не кеглем и не светлотой. Обе свободные, OFL 1.1, с кириллицей, вариативные. Literata подтверждена по первоисточнику google/fonts, ofl/literata/METADATA.pb: оси opsz 7–72 и wght 200–900, подмножества cyrillic и cyrillic-ext, два файла на всю систему. */ --font-text: "Literata", Georgia, "Times New Roman", serif; --font-apparatus: "Golos Text", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --font-ui: var(--font-apparatus); /* --- КЕГЛИ ------------------------------------------------------------- Шесть ступеней на одиннадцать ролей: роли различаются весом, осью оптического размера и цветом, а не новым кеглем. Отношения соседних ступеней на десктопе: 1,23 · 1,25 · 1,30 · 1,31 · 1,65 */ --step-1: .8125rem; /* 13 – мета */ --step-2: 1rem; /* 16 – подпись */ --step-3: clamp(1.125rem, 1.08rem + .22vw, 1.25rem); /* 18–20 – текст */ --step-4: clamp(1.375rem, 1.24rem + .60vw, 1.625rem); /* 22–26 – подзаг. */ --step-5: clamp(1.75rem, 1.55rem + .90vw, 2.125rem); /* 28–34 – заг. 2 */ --step-6: clamp(2.125rem, 1.40rem + 3.10vw, 3.5rem); /* 34–56 – заголовок*/ /* --- ОПТИЧЕСКИЙ РАЗМЕР ------------------------------------------------- Ось opsz задаётся токенами; литеральных значений в компонентах быть не должно. Ядро WordPress `font-variation-settings` не поддерживает и молча отбрасывает – обход через settings.custom проверен на живом wp-s1. ВНИМАНИЕ: font-variation-settings наследуется и перекрывает font-weight у потомков. Через него задаётся ТОЛЬКО opsz; вес – обычным font-weight. */ --opsz-display: 72; --opsz-head2: 48; --opsz-head3: 32; --opsz-deck: 36; --opsz-quote: 48; --opsz-body: 14; /* --- ВЕСА -------------------------------------------------------------- Лестница весов не совпадает с лестницей чисел: у Literata на меньшем кегле тот же вес даёт больше цвета. Замер 01.08.2026 – отношение толщины штриха к кеглю, рендер 4x, подсчёт по переходам чёрное/белое. Было: 700 / 700 / 600 -> 0,1444 / 0,1652 / 0,1580. Подзаголовок раздела был на 14,4 % чернее заголовка статьи: лестница цвета шла вверх, пока лестница кегля шла вниз. Стало невозрастающей: 0,1444 · 0,1402 · 0,1392 · 0,1269 (текст). */ --wght-display: 700; --wght-head2: 600; --wght-head3: 500; --wght-normal: 400; --wght-meta: 500; --wght-strong: 600; /* инлайновое выделение; к заголовкам не относится */ /* --- ИНТЕРЛИНЬЯЖИ ------------------------------------------------------ */ --lh-display: 1.07; --lh-head2: 1.18; --lh-tight: 1.28; --lh-quote: 1.32; --lh-meta: 1.40; --lh-deck: 1.45; --lh-body: 1.62; /* --- МЕРА ЧТЕНИЯ ------------------------------------------------------- Сорок кеглей основного текста. На десктопе 800 px и медиана 67 знаков кириллицы в строке – замер на настоящем тексте статьи через Range.getClientRects. Классический идеал 66. Записана множителем, а не числом: кегль подвижный, колонка сжимается вместе с ним, число знаков в строке не плывёт. Проверено: 1440 px -> 800 px и 67 знаков; 768 px -> 728 px и 65 знаков. В ch записать было нельзя: ch разрешается по шрифту И кеглю элемента, где указан, и один токен давал четыре разные ширины. Это мера чтения, а не отступ. Сетка страницы – фаза 4. */ --measure-text: calc(var(--step-3) * 40); --measure-deck: var(--measure-text); --measure-caption: calc(var(--measure-text) * .62); /* Мера широкого кадра статьи. Жила в типографической шкале своим объявлением и осталась там при сведении 13.08.2026 – тогда её брал один файл. Со сборкой страницы статьи 15.08.2026 её берут два, то есть это уже второй экземпляр, и величина переезжает сюда. Формула не менялась: полторы меры текста, около 1062 px. */ --measure-wide: calc(var(--measure-text) * 1.5); /* --- ЦВЕТ -------------------------------------------------------------- Подложка выбрана владельцем 01.08.2026 из четырёх отрисованных тонов на настоящих снимках. Тёмной темы нет – решение владельца 31.07.2026; имена токенов семантические, поэтому добавить её позже можно. Названная стратегия: «стена экспозиции» – белое поле, чёрный текст и ничего больше. Хроматических цветов в системе нет вовсе: весь цвет страницы принадлежит отпечатку. */ --bg: #ffffff; --bg-sunk: #f5f5f6; /* вставка видео, таблица, пустое состояние */ --ink: #17181a; /* 17,8:1 – основной текст, заголовки */ --ink-soft: #45484d; /* 9,2:1 – подзаголовок, подписи под снимками */ --ink-mute: #63666d; /* 5,8:1 – дата, крошки, служебное */ /* На белом линейка – единственный конструктивный инструмент: теней и карточек в системе нет, поэтому линеек три. */ --rule: #dcdde1; /* разделение внутри статьи */ --rule-soft: #ececee; /* самое слабое, строки таблицы */ --rule-strong: #b9bbc0; /* граница раздела и край изображения */ /* ЦВЕТНОГО АКЦЕНТА В СИСТЕМЕ НЕТ. Решение владельца 02.08.2026, третье и последнее за день. История решения. Был #cc0000 – фирменный красный легаси, 53 вхождения в прод-CSS; 01.08.2026 сохранён как исторический след, то есть по доводу от истории, а не от голоса. 02.08.2026 голос закрыт словами «добрый · внимательный · свободный», и красный против «доброго» не устоял: сигнальный цвет говорит «внимание» и «ошибка». Владелец выбрал тёплый охристый, взята охра #8a5a1a. Затем предложен #dab750 – тон хороший, но 1,93:1 на белом при пороге 3:1, не проходит; два его затемнения тон держали. И на этом владелец снял вопрос целиком: пусть будут чернила. Семь отрисованных вариантов сохранены в акцент-варианты-2026-08-02.html. Вернуть цвет – одна строка: все места, где акцент используется, размечены этим токеном и никаких литералов не содержат. Что это значит для системы. Хроматический бюджет страницы уходит фотографии целиком – ровно то, к чему шла стратегия «стена экспозиции». Ссылку несёт подчёркивание, и теперь оно чернильное: смысл держится на линии, а не на цвете, поэтому WCAG 1.4.1 выполняется по построению, а не по договорённости. Подчёркивание взято тоньше прежнего – чёрная линия при той же толщине читается заметно сильнее цветной. ВНИМАНИЕ, проверка выбывает. Машинный обход «элементов акцентного цвета в тексте должно быть ноль» больше ничего не доказывает: акцент равен цвету текста. Вместо неё на приёмке проверяется, что ни один элемент не окрашен НИ В ОДИН хроматический цвет – в системе их не осталось вовсе. */ --accent: #17181a; /* чернила, 17,8:1 – подчёркивание и кольцо фокуса */ --accent-wash: #f5f5f6; /* подложка нажатого состояния, она же --bg-sunk */ /* --- ПРОСТРАНСТВЕННАЯ ШКАЛА -------------------------------------------- ВЫБРАНА владельцем 13.08.2026 на макете образец-пространство-2026-08-13.html из двух шкал, живших в системе. Шаг около 1,41 – корень из двух. ДОВОД ЗАМЕРА ИСПРАВЛЕН 13.08.2026, ЧИТАТЬ ЭТУ РЕДАКЦИЮ. Первый замер сделан на подставном шрифте: страницы грузили Literata с Google Fonts, файл не пришёл, и Chromium набрал текст запасной антиквой, а проверка document.fonts.check при этом врала «загружено». После переезда шрифтов на свой хостинг замер повторён на настоящей Literata. Настоящие числа на 1440 px: просвет «абзац → абзац» 31,39 px при интерлиньяже 32,4 – это 0,969 строки. У отклонённой шкалы восьмёрок тот же просвет 27,39 px, то есть 0,845 строки. Принятая шкала ближе к строке, но совпадения с ней нет; прежняя запись про «0,01 px» была следствием чужих метрик и снята. ВЫБОР ПОДТВЕРЖДЁН ЗАМЕРОМ 15.08.2026, решение владельца того же дня. Оба прежних довода к тому времени умерли: совпадение с интерлиньяжем – от подставного шрифта, дешевизна «тринадцать образцов против одного» – от того, что шкала съехалась сюда и переход стоит восьми строк. Довод, который выдержал замер на четырёх ширинах: у принятой шкалы просвет абзаца держится у интерлиньяжа на всём ходе clamp() – 0,969 на 1440 px, 1,032 на 992 и 768, 1,034 на 360, отклонение не больше 3,4 %. У отклонённой – 0,845…0,905, всегда снизу и не ближе 9,5 %. ПРАВИЛО ПРИЁМКИ: величина отступа проверяется оптическим просветом между чернильными краями на рендере, а не числом в этом файле. Числа в CSS и просветы на экране не совпадают: бокс строки несёт половинный интерлиньяж сверху и снизу. МЕРА ДЛЯ ПРОСВЕТА АБЗАЦА – ±5 % ОТ ИНТЕРЛИНЬЯЖА на любой ширине, решение владельца 15.08.2026. Прежняя формулировка «просвет равен интерлиньяжу» снята как невыполнимая: ступени шкалы неподвижны (rem), кегль подвижен (clamp), и одна подгонка не держится на всём ходе. Проверено третьей шкалой: --space-4 в 21 px даёт ровно 1,000 на 1440 px и 1,068 на 360 – разболтанность вдвое хуже принятой. ШКАЛА ОСТАЁТСЯ НЕПОДВИЖНОЙ – тем же решением. Вопрос «задать ступени тем же clamp(), что и кегль» закрыт: замер довода в пользу этого пути не дал. */ --space-1: .25rem; /* 4 px */ --space-2: .5rem; /* 8 px */ --space-3: .875rem; /* 14 px */ --space-4: 1.25rem; /* 20 px – равен кеглю основного текста на 1440 px; просвет абзаца 0,969…1,034 интерлиньяжа, в мере ±5 % */ --space-5: 1.75rem; /* 28 px */ --space-6: 2.5rem; /* 40 px */ --space-7: 3.5rem; /* 56 px */ --space-8: 5rem; /* 80 px */ /* --- КАРКАС СТРАНИЦЫ --------------------------------------------------- Ширины, задающие полосу и её содержимое. До 13.08.2026 лежали копиями в образцах; значения не менялись при переносе ни на одну величину. */ /* Обвязка страницы. Выведена в фазе 2 из широкого кадра (1200 px) плюс два отступа: шапка, подвал и содержание стоят на одной левой границе. */ --shell: 77.5rem; /* 1240 px */ /* Полоса документа – страница видео, рекламного места, сырого HTML. */ /* --doc-width СНЯТА 15.08.2026, решение владельца. Величина в 880 px объявлялась полосой документа, но раскладку «документ» задаёт мера текста: ни одна собранная страница её не брала. Оставались четыре витрины образцов, где она держала ширину лесов, – они переведены на меру текста плюс поля. Источник содержит только применяемое. */ /* Лента шире меры чтения осознанно: мера 800 px – ширина колонки сплошного текста, а строка ленты несёт кадр И текст. При ленте шириной 800 текст рядом с превью сжимается до 38 знаков в строке. 1040 = 240 под кадр + 32 зазор + 768 под текст. */ --feed-width: 65rem; /* 1040 px */ /* Кадр в ленте подвижный. Фиксированные 240 px на ширине 768 оставляли тексту 456 px и 48 знаков в строке – замер на рендере 02.08.2026. */ --feed-thumb: clamp(10rem, 22%, 15rem); /* 160–240 px */ --feed-gap: 2rem; /* 32 px */ /* Мера анонса. Отдельная от меры чтения: анонс набран 16 px, и при ширине колонки 728 px в строке оказывался 81 знак – выше потолка 75. */ --measure-deck-feed: 40rem; /* 640 px, ~70 знаков */ /* --- КОНТРОЛЬНЫЕ ТОЧКИ ------------------------------------------------- Набор выбран владельцем 13.08.2026. До этого в системе было четырнадцать значений на шестнадцать файлов при одном названном. ВАЖНО, ЧЕГО ЭТИ ТОКЕНЫ НЕ ДЕЛАЮТ: кастомное свойство не работает внутри @media – условие медиазапроса вычисляется до каскада, и var() там не раскрывается. Поэтому ниже – реестр значений, а число всё равно стоит в самом запросе. Связь держится комментарием с именем точки в каждом @media; при сборке темы реестр уходит в theme.json, а числа подставляет сборка. JS читает эти токены штатно – там var() доступен. */ --bp-узкий: 40rem; /* 640 px – лента, карточка, пресс-релиз, страница темы, поиск, пагинация, витрина значков */ --bp-широкий: 62rem; /* 992 px – раскладка меню шапки. Число выведено замером: при обвязке 1240 шесть пунктов меню занимают 612 px, логотип 232, поиск 240 – 1084 px с двумя зазорами, первым перестаёт помещаться поиск */ /* Средняя точка набора. ЖИВОГО ПРИМЕНЕНИЯ У НЕЁ СЕГОДНЯ НЕТ, и это исправление разбора от 13.08.2026: там она была предложена как та, что соберёт нынешние 811 px и 900 px. При правке выяснилось, что 811 px – порог числа колонок сетки снимков (ячейка не уже 248 px), а 900 px стоит в витрине акцента, не в странице. Обе величины к странице отношения не имеют и остались на месте. Точка заведена как заявленная владельцем, но пустая: первый, кто её применит, обязан объяснить чем именно. */ --bp-средний: 52rem; /* 832 px – применений нет */ /* --- ЦЕЛЬ НАЖАТИЯ ------------------------------------------------------ Ориентир заведён 20.08.2026 по совету навыка Impeccable; до этого его в системе не было вовсе (OPEN-065), и собранные страницы держали кто 40, кто 33 px. Навык требует 44 x 44 px для касания (reference/adapt.md, audit.md, ios.md; для Android там же 48 dp) и разрешает плотнее там, где указатель точный, — и называет механизм: @media (pointer: coarse). Отсюда правило системы: под грубым указателем цель не меньше --tap-min, под точным ограничения нет. Ширина экрана тут ни при чём: планшет с мышью и телефон с пальцем различаются указателем, а не числом пикселей. */ --tap-min: 44px; /* ЧАСТНЫЕ ГРАНИЦЫ, В НАБОР НЕ ВХОДЯТ И ТОКЕНАМИ НЕ СТАНОВЯТСЯ. 519/520 px – строка события пресс-релиза складывается в столбец. 535, 549, 560, 585, 811 px – пороги числа колонок сетки снимков, посчитанные от размера ячейки, а не от страницы. Обе группы описаны в materials/design/пространство-и-сетка-2026-08-13.md, раздел 5. */ } /* ============================================================================ ПОЛИТИКА ЦВЕТА. Не значения, а правила – нарушение ломает систему. 1. Ни один текстовый элемент не окрашивается акцентом: ни рубрика, ни ссылка, ни выделение, ни рубрикационная метка. Проверяется машинно обходом текстовых узлов – элементов акцентного цвета быть не должно. 2. Смысл ссылки несёт подчёркивание, а не цвет: WCAG 1.4.1 выполняется по построению. Наведение утолщает подчёркивание и текст не красит. 3. Различение без цвета делается весом и начертанием. 4. Волосяная линейка --rule-strong по контуру каждого изображения – следствие белой подложки. Замер по прод-архиву 01.08.2026, выборка 400 снимков из 84 431: у 8,8 % больше четверти краевых пикселей почти белые, такой отпечаток на белом теряет границу. Ставится box-shadow, а не border: рамка меняет геометрию блока и ломает расчёт меры. ============================================================================ */