/* ⚠️ ФАЙЛ СОБИРАЕТСЯ АВТОМАТИЧЕСКИ — правки здесь будут стёрты. Источник: sutra/brand/land-quiet/assets/tokens.css Собрано: predeploy.sh. Правьте источник и запускайте сборку. */ /* ═══════════════════════════════════════════════════════════════════════ «Моя Сутра» — общие величины сайта ═══════════════════════════════════════════════════════════════════════ Единственное место, где заданы фирменные цвета, шрифты и геометрия колонки. Подключают все страницы: и лендинг со своей системой экранов, и текстовые страницы справочника через base.css. Почему отдельный файл, а не часть base.css: у лендинга собственные правила на те же теги (h1, h2, p, ссылки), и подключение к нему всей типографики документа изменило бы вид утверждённой страницы. Величины же общие для всего сайта — их и выносим. Подключать ПЕРВЫМ, до остальных стилей: Правка цвета или шрифта делается здесь и разом отражается на всех страницах. Числа в комментариях — контраст к бумаге; ниже 4,5:1 не опускаться, это порог читаемости основного текста. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ————— палитра: монохром + один акцент ————— */ --paper: #F4F0E8; /* тёплая бумага */ --paper-deep: #ECE7DB; /* подложка листа письма, врезок */ /* 🔴 Линейка на сайте ОДНА — правка 23.08.2026. Раньше их было две: светлая «декоративная» #B9AB8E (к бумаге 1,99 : 1, к подложке письма 1,83 : 1) и несущая #8C7B54 (3,64 : 1 и 3,35 : 1). Деление на декоративные и несущие на практике не удержалось: лендинг перевели на тёмную целиком (24 места), а base.css и страницы расчётов остались на светлой (11 + 40 мест) — и половина сайта поехала одним тоном, половина другим. Расхождение видно глазом на стыке страниц. Отменять деление можно потому, что «декоративных» линеек на сайте нет: все они держат структуру — границы таблиц, разделители разделов, шапка, подчёркивание поля. Насечки-дни на нити рисуются терракотой с прозрачностью и этого тона не берут вовсе. Два имени оставлены нарочно: --rule-dark читается в вёрстке как «несущая» и стоит там, где линия обязана быть видна; --hairline — общий случай. Значение у них теперь одно, и разъехаться оно больше не может. */ --rule-dark: #8C7B54; /* линейка 3,64 : 1 к бумаге */ --hairline: var(--rule-dark); --ink: #17140F; /* основной текст 16,2:1 */ --ink-mid: #252017; /* подводка 14,2:1 */ --ink-soft: #3E382E; /* проза, письмо 10,2:1 */ --muted: #655E52; /* второстепенный 5,6:1 */ --thread: #B23A22; /* акцент «красная нить» 5,25:1 */ --thread-hi: #9C3019; /* ── тёмный набор: тема раздела, а не системная настройка ───────────────── 🔴 Решение владельца 22.08.2026: экраны и разделы отличаются друг от друга не только содержанием, но темой и рисунком. Первым тёмным становится раздел «Книга перемен» — китайская книга, и тёмный лист ей идёт по смыслу. Это НЕ реакция на системную настройку телефона: сайт светлый по определению, белого в бренде нет вовсе, а тёмная тема здесь — фирменный приём раздела. Включается классом на странице, а не медиазапросом. Терракота в тёмном ярче: #B23A22 на тёмной бумаге даёт 3,1 : 1 — ниже нормы для текста. #D9603F даёт 5,4 : 1 и остаётся тем же цветом по характеру. */ --dark-paper: #15120E; --dark-paper-deep: #1E1A14; /* Линейка в тёмном — тоже одна, по той же причине, что в светлом наборе. #6B6152 даёт к тёмной бумаге 3,07 : 1, к подложке письма 2,85 : 1. Прежний «декоративный» #4A4234 давал 1,88 : 1 и 1,75 : 1 — то есть его на тёмном листе не было видно вовсе. ⚠️ 2,85 : 1 на подложке — чуть ниже порога 3 : 1 для графики. Поднимать значение здесь не стал: тёмная тема «Книги перемен» утверждена владельцем, а правка тона — его решение, не верстальщика. */ --dark-rule: #6B6152; --dark-hairline: var(--dark-rule); --dark-ink: #F2EDE2; --dark-ink-mid: #E4DCCC; --dark-ink-soft: #D2CABA; --dark-muted: #9A9081; --dark-thread: #D9603F; --dark-thread-hi: #E8734F; /* акцент нажатый */ --font-display: "Lora", "Lora-fallback", Georgia, serif; --font-mono: "PT Mono", "Mono-fallback", Menlo, monospace; /* ————— геометрия колонки ————— Нить идёт слева, текст начинается за ней. Совпадение этих координат на всех страницах — то, что склеивает их в один сайт. */ --thread-x: 72px; /* где идёт нить */ --text-x: 168px; /* где начинается текст */ --pad-r: 64px; --shell: 1440px; /* дальше композиция не растягивается */ /* ————— нить: размах, шаг дней, длина насечки ————— 🔴 Перенесено сюда из лендинга 22.08.2026. Раньше эти величины объявлялись ВНУТРИ index.html, и остальные страницы их не видели — поэтому нить на них выродилась в прямую полоску без насечек. Система бренда (system.md §7) требует обратного: «нить — единственная графика на сайте, и она обязана вести себя одинаково везде», а насечки-дни «идут непрерывно, от первого экрана до подвала». Лендинг объявляет те же имена у себя и потому не задет. */ --thread-w: 40px; /* поле, в котором гуляет нить (±6 от оси) */ --day-step: 44px; /* шаг насечек-дней */ --tick-w: 20px; /* длина насечки поперёк нити */ } /* Колонка сжимается на узких экранах. Значения общие для лендинга и документов; всё, что специфично для системы экранов лендинга (шаг дней, размах нити, вертикальный ритм), остаётся в нём самом. */ @media (max-width:1080px){ :root{--text-x:132px; --thread-x:56px; --pad-r:40px} } @media (max-width:640px){ /* Телефон: поле нити 26 px (±3,9), шаг дней 40 — величины из system.md §7. */ :root{--text-x:42px; --thread-x:15px; --pad-r:20px; --thread-w:26px; --day-step:40px; --tick-w:14px} } @media (max-width:360px){ :root{--text-x:36px; --thread-x:13px; --pad-r:16px} }