/* Chimera — слой токенов. Один источник правды для темы WordPress, страниц лаунчера и обсерватории. Значений цвета и размера мимо этого файла быть не должно. Редакция 3 (2026-09-13). Три правки по замечаниям владельца: 1. Текст был «слишком белым» — холодный #e8f0ec заменён на тёплую слоновую кость. Чистый белый на чёрном режет глаз и выглядит дёшево; тёплый уводит страницу в сторону старого атласа. 2. Появилось золото как СТРУКТУРНЫЙ цвет — рамки, волосяные линии, углы. Не как второй акцент рядом с изумрудом, а как материал оправы. Изумруд остаётся цветом живого: статусы, действия, ссылки. 3. Подложки вернулись к градиенту с полупрозрачностью — это прямое требование чеклиста, которое я нарушил в редакции 1, сделав их плоскими. */ :root{ /* ── подложка ─────────────────────────────────────── */ --ink: #060d0b; /* фон страницы */ --ink-2: #0a1512; /* поднятая полоса */ --ink-3: #0c1815; /* поля ввода, блоки кода */ /* ── лестница нейтралей ─────────────────────────────── Шесть ступеней одного тёплого оттенка вместо трёх и вместо безличного серого. У победителей Awwwards нейтрали всегда покрашены в тон акцента — именно это отличает продуманную палитру от gray-100..gray-900 из фреймворка. */ --paper: #f2eee4; /* заголовки */ --paper-1: #ddd8cb; /* лид, крупный текст */ --paper-2: #bdb8a9; /* основной текст */ --paper-3: #9d9888; /* приглушённый */ --quiet: #8c8a7c; /* метки, подписи, данные */ --quiet-2: #6d6c61; /* нижний предел: разделители подписей */ /* ── оправа: золото как материал рамок ────────────── */ --gold: #c9a227; /* латунь, а не жёлтый */ --gold-soft: #e3c46f; --gold-line: rgba(201,162,39,.46); /* волосяная рамка */ --gold-edge: rgba(214,175,54,.78); /* угловые метки */ --gold-glow: rgba(201,162,39,.14); --gold-bright:#e8cd7a; /* блик фаски на заголовке */ --gold-deep: #6b5316; /* тень фаски */ /* ── линии ────────────────────────────────────────── */ --rule: #1e2a26; --rule-soft: #141d1a; /* ── акцент: латунь ─────────────────────────────────── Владелец выбрал латунный вариант из трёх показанных (13.09.2026). Латунь берёт на себя всё, что раньше было изумрудным: основную кнопку, ссылки, фокус, выделение. Изумруд не убран — он сузился до одного значения: ЖИВОЕ. Знак в шапке и признак «работает прямо сейчас» — и больше нигде. Так изумруд перестаёт быть украшением и получает смысл: увидев его, человек знает, что эта вещь запущена. На странице он появляется два-три раза, и каждый раз не просто так. */ --accent: #c9a227; /* латунь: действие, ссылка, фокус */ --accent-hi: #dcb43a; --accent-lo: #6b5316; --accent-ink: #140f02; /* текст на латунной кнопке */ --live: #35d49d; /* изумруд: только «работает сейчас» */ --live-lo: #1b7a5a; /* Прежние имена сохранены, чтобы не переписывать компоненты — они теперь указывают на латунь. Единственное место, где нужен изумруд, обращается к --live напрямую. */ --emerald: var(--accent); --emerald-lo: var(--accent-lo); --warn: #d9b44a; --danger: #b8433a; /* ── подложки: градиент + полупрозрачность ────────── */ --surface: linear-gradient(158deg, rgba(42,78,68,.40) 0%, rgba(20,40,34,.30) 52%, rgba(10,20,17,.44) 100%); --surface-hi: linear-gradient(158deg, rgba(56,96,84,.48) 0%, rgba(24,48,40,.34) 52%, rgba(12,24,20,.50) 100%); /* ── имена, на которые опирается system.css ─────────── Сессия реализации правила компоненты параллельно и завела свои имена, пока я переписывал этот файл целиком. Столкновение вышло тихим: неопределённый var() не ошибка, он просто ничего не даёт — поэтому метки разделов стали белыми, а подложка полосы исчезла. Свожу оба слоя здесь, чтобы имя было одно на систему. */ --gold-hair: rgba(201,162,39,.42); /* волосяная рамка */ --gold-tick: rgba(214,175,54,.80); /* угловые метки, засечки */ --gold-label: #b99f53; /* капитель меток: 7.8:1, читается */ --panel: var(--surface); --panel-glow: linear-gradient(180deg, rgba(216,166,74,.06), transparent 40%); /* ── начертания ───────────────────────────────────── */ /* Фолбэк короткий и явный, как у Lando Norris (Brier, Arial) — девятиэлементный стек из бойлерплейта выдаёт отсутствие решения. Golos Text и JetBrains Mono берутся ВАРИАТИВНЫМИ (400..900 и 100..800). У победителей Awwwards почти все файлы `-Variable`: это значит, что вес подбирался непрерывно, а не выбирался из списка 400/700. Нам это нужно по делу, а не для галочки — на тёмном фоне светлый текст оптически тоньше, чем тот же вес на белом, поэтому основной текст идёт 420, а не 400, метки 520, а не 500. Разница в полступени, но именно она убирает ощущение «текст тонковат», которое иначе лечат увеличением кегля. */ --serif: "Cormorant SC", Georgia, serif; --sans: "Golos Text", Arial, sans-serif; /* Оптическая компенсация тёмного фона */ --w-body: 420; --w-lead: 400; --w-label: 520; --w-data: 450; --mono: "JetBrains Mono", ui-monospace, monospace; /* ── шкала кегля ──────────────────────────────────── */ --t-display: clamp(50px, 6.4vw, 88px); /* Титульный экран. Кегль рассчитан на длину заголовка, а не наоборот. Было clamp(58px, 12.2vw, 190px) — под короткий заголовок «Делаю и делюсь». С редакцией 3 заголовок стал «Домашний кластер по рабочим правилам», 35 знаков: на 1400px он занимал 170.8px, четыре строки и 588px высоты. Лид начинался на отметке 971 при высоте окна 900 — человек видел заголовок и больше ничего. Замерено по строкам на живой странице: 170px — четыре строки, 140px — четыре, 120px — три, 104px — две, и лид поднимается на 588. Взято 104px как самый крупный, при котором заголовок в две строки. Токен используется одним правилом, .ch-title h1, то есть только титульным экраном главной. Внутренние страницы набираются 88px и 64px и этой правкой не затронуты — проверено живьём. */ --t-title: clamp(46px, 7.4vw, 104px); /* титульный экран */ --t-h2: clamp(30px, 3.2vw, 42px); --t-h3: 30px; --t-lead: 20px; --t-body: 17px; --t-small: 15px; --t-label: 12px; --t-data: 12.5px; /* ── сетка и ритм ─────────────────────────────────── */ --cols: 12; --gut: 32px; --max: 1240px; --pad: 40px; --sec-y: 86px; --radius: 2px; --measure: 56ch; } @media (max-width: 940px){ :root{ --gut:20px; --pad:24px; --sec-y:56px; } }