/* Токены Kiddie English, снятые из suggest/prototype.pen. Не редактировать руками: при изменении макета пересобирать из .pen. Альфа-варианты (#16233DE6 и подобные) в макете задаются от базового цвета и здесь не дублируются - используйте color-mix или rgb(from ...). Исключение: три уровня текста (--muted, --text-3 во всех палитрах) и малиновая (--magenta, плюс новый --magenta-text) правлены вручную ради контраста по WCAG AA - замер по пикселям под текстом показал отказ ниже планки 4.5. У каждого правленого токена в комментарии оставлено исходное значение из макета, чтобы пересборка из .pen не затёрла правку молча - при следующей пересборке перенести эти значения заново. */ :root { /* Бренд */ --ink: #16233D; /* чернила, основной текст и тёмные фоны */ --ink-soft: #3C4B68; --muted: #666D74; /* вторичный текст, правлено ради AA, в макете #707880 (было 4.48, стало 5.24 на белом) */ --paper: #F7F4EE; /* бумага, фон светлых секций */ --white: #FFFFFF; --line: #E3DED4; /* разделители */ --sun: #F0C23C; /* солнечный акцент */ --magenta: #D52E84; /* заливка кнопок, правлено ради AA, в макете #E2318C (белый текст на ней было 4.16, стало 4.61) */ --magenta-text: #C82B7C; /* та же малиновая, но для случая, когда она сама текст на светлом: заливка остаётся фирменной, текст проходит AA (на бумаге 4.67 против 3.79) */ --mint: #5FC9B6; /* Три уровня текста. Праздничные палитры переопределяют их своими оттенками, поэтому разметка праздника работает и на обычной странице - например крошки на хабе, у которого палитры праздника нет. */ --text: var(--ink); --text-2: var(--muted); --text-3: #676D71; /* третий уровень серого, правлено ради AA, в макете #9AA2A8 (было 2.59, стало 5.25) */ /* Типографика */ --font-head: Manrope, system-ui, sans-serif; /* 700-800 */ --font-body: Inter, system-ui, sans-serif; /* 400-700 */ /* Шкала десктопа (1440) */ --h1-hero: 76px; --h1-hero-ls: -2.6px; --h1-hero-lh: 1.04; --h1-page: 62px; --h1-page-ls: -2.2px; --h1-page-lh: 1.06; --h2: 52px; --h2-ls: -1.8px; --h2-lh: 1.10; --h2-sm: 48px; --h2-sm-ls: -1.6px; --h2-sm-lh: 1.14; --h3: 21px; --h3-ls: -0.4px; --h3-lh: 1.30; --lead: 19px; --lead-lh: 1.75; --body: 16px; --body-lh: 1.75; --body-sm: 15px; --body-sm-lh: 1.70; --small: 13px; --small-lh: 1.50; --kicker: 12px; --kicker-ls: 3px; /* uppercase, 700 */ /* Шкала мобильной (390) */ --m-h1: 31px; --m-h1-ls: -1px; --m-h1-lh: 1.08; --m-h2: 28px; --m-h2-ls: -0.9px; --m-h2-lh: 1.12; --m-h3: 18px; --m-lead: 16px; --m-body: 15px; --m-small:12px; --m-kicker: 11px; --m-kicker-ls: 2.4px; /* Сетка и ритм */ --page-w: 1440px; --gutter: 56px; /* десктоп */ --gutter-m: 20px; /* мобильная */ --section-y: 110px; /* вертикальный паддинг секции, десктоп: 100-116 */ --section-y-m: 52px; --gap-section: 44px; /* заголовок → содержимое */ --gap-cards: 20px; --gap-cards-m: 14px; /* Скругления */ --r-btn: 4px; --r-field: 8px; --r-card: 14px; --r-card-lg: 20px; --r-pill: 999px; /* Кнопка */ --btn-pad: 18px 32px; --btn-font: 700 15px/1 var(--font-body); } /* ─── Хэллоуин ─────────────────────────────────────────────── */ [data-holiday="halloween"] { --bg: #120C22; /* ночь */ --bg-deep: #08050F; /* самый тёмный, первый экран и билет */ --card: #1C1436; --line-h: #33285A; --accent: #FF7A18; /* тыквенный */ --accent-2:#B8F24A; /* лайм */ --accent-text: #FF8124; /* оранжевый, когда он сам текст: мелкие номера на тёмном */ --text: #FFFFFF; --text-2: #A79FC0; --text-3: #958EAF; /* правлено ради AA, в макете #6C6390 (на ночном фоне было 3.47, стало 6.14) */ --overlay: linear-gradient(90deg,#120C22FA 0%,#120C22F0 42%,#120C22CC 100%); } /* ─── Рождество ────────────────────────────────────────────── */ [data-holiday="christmas"] { --bg: #0C2019; /* еловый */ --bg-deep: #07130F; --card: #123024; --door: #17402F; /* окошко адвент-календаря */ --line-h: #24503F; --accent: #E9C46A; /* золото */ --accent-2:#E4574C; /* красный */ --accent-text: #E9C46A; /* пока равен --accent: золото на тёмном проходит, токен нужен для единообразия */ --text: #FFFFFF; --text-2: #9DBBAE; --text-3: #7C988B; /* правлено ради AA, в макете #6E8C7E */ --paper-h: #F6EFDF; /* бумага письма и бланка */ --paper-ink:#1B2A22; --paper-line: #DDD3BD; /* линия и обводка поля на бумаге */ --paper-muted:#647068; /* подписи на бумаге письма, правлено ради AA, в макете #7B8A7F */ --paper-ph: #A9B0A4; /* подсказка внутри пустого поля на бумаге */ --paper-red: #C0392B; /* красные чернила: пропуски в письме, печать бланка */ --window-bg: #0A1A14; /* нутро окна адвент-карточки на первом экране */ --overlay: linear-gradient(90deg,#07130FFA 0%,#07130FF0 42%,#07130FCC 100%); } /* ─── Пасха ────────────────────────────────────────────────── */ [data-holiday="easter"] { --bg: #FBF9F3; --bg-soft: #E7F3EC; /* мятный, первый экран и форма */ --card: #FFFFFF; --line-h: #E3DED4; --accent: #3F9B7F; /* мята */ --accent-2:#E0A81B; /* жёлтый */ --accent-3:#E886AC; /* розовый */ --accent-text: #317963; /* мята, когда она сама текст: правлено ради AA, было 3.38 на белом, стало 5.19 */ --text: #16233D; /* Серые подписи на этой странице темнее общих: на первом экране они лежат не на бумаге, а на большом декоративном пятне (.ea-hero__sun и .ea-hero__pink, ea-hero.css) - на телефоне это тёплый бежевый rgb(229,206,187). Общий серый давал там 3,4 при норме 4,5 из docs/tech-spec.md (раздел 9). Пятно не трогаем: это рисунок макета, и оно крупное; темнеет текст. Тон тот же, холодный серый. */ --text-2: #4F565D; /* правлено ради AA, общий --muted тут не проходит (было 3,40 на пятне, стало 4,9) */ --text-3: #4E5457; /* правлено ради AA, в макете #9AA2A8 (было 3,47, стало 5,0) */ --overlay: linear-gradient(90deg,#E7F3ECFC 0%,#E7F3ECF7 42%,#E7F3ECDB 100%); --on-accent-lead: #D6EEE5; /* подпись в зелёной полоске бланка формы */ --placeholder: #AFB5BB; /* подсказка внутри пустого поля формы */ } /* ─── День святого Валентина ───────────────────────────────── */ [data-holiday="valentines"] { --bg: #FFF7FA; --bg-soft: #FFE7F1; --card: #FFFFFF; --paper-h: #FFFCF7; /* бумага открыток и бланка */ --line-h: #F3D9E6; --accent: #D52E84; /* фирменный малиновый, правлено ради AA, в макете #E2318C - тот же тон, темнее на 6%, как и общий --magenta (белый текст на ней было 4.16, стало 4.61) */ --accent-2:#B3145F; --violet: #7A6BA8; /* метка "учителю и всем" в разговорнике, правлено ради AA, в макете #8E7CC3 - тот же тон, темнее на 14% (белый текст на ней было 3.61, стало 4.67) */ --card-yellow: #FFF4D9; /* открытка "To my brother" */ --card-mint: #E6F6F1; /* открытка "To dad" */ --placeholder: #C3B7BD; /* подсказка внутри пустого поля бланка */ --accent-text: #C82B7C; /* малиновая, когда она сама текст */ --on-accent: #FFFFFF; /* текст на малиновой полосе "Правило дня" */ --on-accent-kicker: #FFFFFF; /* надстрочник на малиновой полосе, правлено ради AA, в макете #FFD3E8 */ --on-accent-lead: #FFFFFF; /* пояснение на малиновой полосе, правлено ради AA, в макете #FFE3F1 */ --text: #16233D; /* Серые подписи на этой странице темнее общих: на первом экране они лежат не на бумаге, а на большом декоративном пятне (vl-hero.css) - на компьютере это rgb(245,195,219), на телефоне rgb(249,207,226). Общий серый давал там 3,4-4,2 при норме 4,5 из docs/tech-spec.md (раздел 9). Пятно не трогаем: это рисунок макета; темнеет текст. */ --text-2: #585F66; /* правлено ради AA, общий --muted тут не проходит (было 4,16 на пятне, стало 4,70) */ --text-3: #5C5358; /* правлено ради AA, в макете #A99AA2 (было 3,43, стало 5,3) */ --overlay: linear-gradient(90deg,#FFE7F1FC 0%,#FFE7F1F7 42%,#FFE7F1DB 100%); }