/* ═══════════════════════════════════════════════════════════════════════ CRYSTAL SOUND THERAPY — токены Палитра выведена ЗАМЕРАМИ её работ (квантование + кластеризация в LAB), а не придумана. Источник каждого цвета указан. Меняется правкой этого блока и больше нигде. Сначала мерили по 20 снимкам с телефона, теперь — по 49 финальным сканам docs/drawings/*.pdf. Что изменилось от перезамера, написано в двух местах ниже: в блоке БУМАГА и в блоке про холодную половину палитры. Сами значения токенов не изменились ни одно. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── БУМАГА ────────────────────────────────────────────────────────── Замеры со СНИМКОВ дали нейтрально-прохладный #E0E2E4 — это холодный свет телефона, а не бумага. Тёплый тон был задан осознанно, под печать книги. ПЕРЕЗАМЕРЕНО по финальным сканам (49 листов, Epson ScanSmart, docs/drawings/*.pdf): яркий процентиль чистого поля даёт #F4F2F0 — то есть почти нейтральный тон. Это баланс белого сканера, а не решение о бумаге, и --paper НЕ МЕНЯЕТСЯ: тёплый тон выбран под печать, на нём посчитаны все контрасты и по нему утверждён прототип. Пункт закрыт, перезамерять больше нечего. */ --paper: #F6F1E7; --paper-2: #EDE5D6; /* карточки, плеер, вложенные плоскости */ --paper-3: #E3D9C6; /* заглушки иллюстраций, приглушение */ --line: #D2C6AF; /* линейка 1px · 1.50:1 · ТОЛЬКО разделители */ /* Граница ЭЛЕМЕНТА УПРАВЛЕНИЯ: поле ввода, кольцо кнопки play. WCAG 1.4.11 требует 3:1 для границ контролов; --line даёт 1.35:1 на карточке, то есть поле ввода буквально не видно. Отдельный токен, а не замена --line: тонкая линейка между плоскостями — основа этого дизайна, и её трогать нельзя. */ --line-ctrl: #827A6C; /* 3.77 / 3.39 / 3.03 к трём тонам бумаги */ /* ── ЧЕРНИЛА ───────────────────────────────────────────────────────── Источник: индиго её плащей, волны, ночного неба (замеры #303848 / #385870 / #507898), затемнено до контраста. */ --ink: #232B3D; /* весь основной текст, кнопки · 12.57:1 */ --ink-soft: #586071; /* второстепенный текст · 5.61 / 5.04 / 4.51 */ --ink-hover: #1A2130; /* ── ОХРА / ЗОЛОТО ─────────────────────────────────────────────────── Источник: солнца, звёзды, лепестки (замеры #A88858 / #D0B070). ВНИМАНИЕ: --gold для ТЕКСТА НЕ ГОДИТСЯ — 2.84:1. Только линии, метки, рамки, кольца. Для текста существует --gold-ink. */ --gold: #B8873F; /* Считается на ТРЁХ тонах бумаги, а не только на --paper: метка «Ближайшее» и строка «Последние 2 места» живут внутри карточки (--paper-2), где прежние 4.85:1 превращались в 4.36:1. */ /* Кольцо ЭЛЕМЕНТА УПРАВЛЕНИЯ (кнопка play): --gold даёт 2.55:1 на карточке, порог для границы контрола — 3:1 (WCAG 1.4.11). Токен использовался в components.css и pages.css, а определения не было: нераспознанный var() делает всю декларацию невалидной, и у кнопки на /s/1…/s/5 не оставалось видимой окружности. */ --gold-ring: #9C7235; /* 3.83 / 3.44 / 3.08 к трём тонам бумаги */ --gold-ink: #7D591D; /* 5.62 / 5.06 / 4.52 (AA везде) */ /* ── ПЫЛЬНАЯ РОЗА / ТЕРРАКОТА ──────────────────────────────────────── Источник: платья, тела фигур, мак (замеры #C0A098 / #A07068). */ --rose: #9A4F3E; /* 5.24:1 */ --rose-tint: #EDDFD8; /* ── ШАЛФЕЙ / ОЛИВА ────────────────────────────────────────────────── Источник: листья, ткань, стебли (замеры #909888 / #486040). */ --sage: #4A5A3A; /* 6.63:1 */ --sage-tint: #E4E3D2; /* ── БИРЮЗА ────────────────────────────────────────────────────────── Источник: редкие акценты в букетах (#70B0B0 / #388888). Ровно один сценарий: играющая дорожка. Только 18px+. */ --teal: #356868; /* «играет» · 5.60 / 5.04 / 4.50 (AA везде) */ /* ── ЧЕГО В ТОКЕНАХ НЕТ И НЕ БУДЕТ: ХОЛОДНАЯ ПОЛОВИНА ЕЁ ПАЛИТРЫ ──── Кластеризация пигмента по 49 финальным сканам (k-means в LAB, 957 тысяч точек с насыщенностью выше порога) дала распределение, которого прежние замеры не показывали: #B5A186 17.1% тёпло-охристый ← основа, есть в токенах #D2C6A8 14.5% светлая охра ← это ровно наш --line #85583A 9.4% жжёная умбра ← --gold-ink рядом #9E7870 9.1% пыльная роза ← --rose рядом #D99C79 8.6% коралл #819BAD 8.0% ПЫЛЬНО-СИНИЙ ← в токенах НЕТ #DAA9BE 7.8% розовая дымка #6F7452 6.8% олива ← --sage рядом #CC698C 6.2% насыщенная роза #6A5271 4.8% ФИОЛЕТОВЫЙ ← в токенах НЕТ #E5D87D 4.3% лимонная охра #C05148 3.4% красный ← --rose рядом Тринадцать процентов её краски — холодные, и на сайте не было ни одного холодного пикселя. Отсюда и брались жалобы на одноцветность при формально верных токенах: палитра целиком сидела в одном тёплом секторе. Токенами эти цвета быть НЕ МОГУТ: их контраст к бумаге — 1.4…2.6:1, то есть ни текстом, ни линией, ни рамкой они не работают физически. Их место — заливка большой площади малой плотности, и её отдаёт assets/css/wash.css настоящей её акварелью, вырезанной из сканов. Не добавляйте их сюда: токен без допустимого применения через месяц окажется в подписи под фотографией. */ /* ── НОЧЬ ──────────────────────────────────────────────────────────── Только /s/1…/s/5. Не тема сайта — режим одного сценария: книга в одной руке, телефон в другой, вечер. */ --night: #151824; --night-2: #1E2231; --night-line: #2E3446; --night-ctrl: #586487; /* граница поля в ночи · 3.02:1 к --night */ --night-ink: #E9E2D2; /* 13.70:1 */ --night-soft: #A49C8C; /* 6.49:1 */ --night-gold: #D9B76A; /* 9.20:1 */ /* ── ТИПОГРАФИКА ───────────────────────────────────────────────────── Оба шрифта под SIL Open Font License: веб + десктоп + печать + коммерция без отдельной покупки. Теми же шрифтами будет набрана книга. Кириллица проверена запросом к Google Fonts. */ --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --font-text: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ── РАЗМЕРЫ (375px — основной размер проектирования) ─────────────── */ --fs-h1: 38px; --lh-h1: 1.08; --fs-h2: 29px; --lh-h2: 1.15; --fs-h3: 24px; --lh-h3: 1.20; --fs-lead: 18px; --lh-lead: 1.55; --fs-body: 16px; --lh-body: 1.68; --fs-data: 15px; --lh-data: 1.35; --fs-price: 20px; --fs-small: 14px; --lh-small: 1.50; --fs-label: 12px; /* ── SPACING ─────────────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --container: 1180px; --container-text: 720px; --pad-x: 20px; --section-y: 56px; --gap-cards: 16px; --radius: 2px; /* мягкость даёт акварель, а не радиусы */ --radius-img: 3px; --tap: 48px; /* Фактическая высота хедера на 375px. От неё считаются отступ при переходе по анкору и верх раскрытого меню: литерал 60px в двух местах расходился с реальностью. */ --hdr-h: 56px; --border: 1px solid var(--line); /* Рамка ЭЛЕМЕНТА УПРАВЛЕНИЯ — отдельно от разделителей: границу поля ввода и кольцо кнопки play надо видеть (WCAG 1.4.11, 3:1). */ --border-ctrl: 1px solid var(--line-ctrl); --ease: cubic-bezier(.22,.61,.36,1); --dur-reveal: 520ms; --dur-ui: 160ms; } @media (min-width: 900px) { :root { --fs-h1: 60px; --fs-h2: 40px; --fs-h3: 27px; --fs-lead: 21px; --fs-body: 17px; --fs-data: 16px; --fs-price: 22px; --pad-x: 40px; --section-y: 104px; --gap-cards: 24px; } }