/* =========================================================================== Equism — токены дизайн-системы --------------------------------------------------------------------------- Единственный источник правды по цвету, типографике, тени, радиусу и движению. Ничего, кроме переменных, здесь быть не должно. Направление: «галерея с тёмными залами». Светлая слоновая кость держит каталог и карточки, а смысловые блоки — герой, статистика, «как это работает», призыв, шапка и подвал — уходят в тёмный зелёно-графитовый тон. Страница читается как чередование светлых и тёмных залов, а не как один сплошной белый лист. =========================================================================== */ :root { /* =================================================================== ЦВЕТ ------------------------------------------------------------------- Контрасты проверены по WCAG до выбора палитры. Главный вывод: бронза #A97C50 на ивори даёт всего 3.54:1, а как фон кнопки не проходит ни с белым текстом (3.69:1), ни с тёмным (4.30:1). Отсюда железные правила: • бронза #A97C50 — ТОЛЬКО декор: линии, рамки, крупные иконки • бронзовый ТЕКСТ — #8A6440 (5.06:1 на ивори) • бронза на зелёном фоне — #C39A6B (4.79:1) • кнопки — зелёный фон + белый текст (12.33:1) • вторичный текст — #5C6360 (5.90:1), не бледнее На ТЁМНЫХ поверхностях правило ровно обратное и такое же жёсткое: бронзовым текстом там служит только --hm-bronze-light (#D9B389, 9.33:1 на ночном). Обычная бронза #A97C50 на --hm-night даёт 4.93:1, но на приподнятой панели --hm-night-3 падает до 3.98:1 — то есть в тексте её использовать нельзя, только в линиях. =================================================================== */ /* Поверхности. Фон страницы намеренно НЕ белый и не почти белый: прежние #FBFAF7 (яркость 96%) давали засвеченный лист, на котором белые карточки не отделялись от фона вообще — разница поверхностей была 1.04:1. #F7F4EC — 91%, карточки читаются как отдельные объекты (1.10:1), а весь текст по-прежнему проходит AA: основной 14.45:1, вторичный 5.61:1, самый светлый допустимый #6B7269 — 4.51:1. */ --hm-ivory: #F7F4EC; /* фон страницы */ --hm-ivory-2: #EFEADE; /* вторичные секции, полосы */ --hm-ivory-3: #E5DFD1; /* заливка, пустые места под фото */ --hm-surface: #FFFFFF; /* карточки, панели */ /* Английский зелёный — основной цвет бренда */ --hm-green: #1F3A2E; /* кнопки, шапка, акцентные ссылки */ --hm-green-deep: #16291F; /* подвал, ховер кнопки */ --hm-green-mid: #2C4F3E; /* градиенты, вторая ступень */ --hm-green-soft: rgba(31, 58, 46, 0.055); /* лёгкая подложка */ --hm-green-soft-2: rgba(31, 58, 46, 0.10); /* подложка активного */ --hm-green-line: rgba(31, 58, 46, 0.14); /* граница на светлом */ /* Бронза — акцент */ --hm-bronze: #A97C50; /* ДЕКОР: линии, рамки, крупные иконки */ --hm-bronze-text: #8A6440; /* бронзовый текст на светлом (5.06:1) */ /* Бронза для тёмных поверхностей. Взят светлее очевидного #C39A6B: тот давал на --hm-green-mid всего 3.55:1, то есть в градиенте героя бронзовый текст проваливался. #D9B389 проходит на всех зелёных палитры: green 6.32:1, green-mid 4.69:1, green-deep 7.85:1. */ --hm-bronze-light: #D9B389; --hm-bronze-soft: rgba(169, 124, 80, 0.10); /* подложка бейджа */ --hm-bronze-line: rgba(169, 124, 80, 0.28); /* бронзовая граница */ /* Текст */ --hm-text: #1C2420; /* основной (15.21:1) */ --hm-text-strong: #121815; /* заголовки */ --hm-muted: #5C6360; /* вторичный (5.90:1) */ --hm-muted-light: #6B7269; /* только ≥16px (4.75:1) */ /* =================================================================== ТЁМНЫЕ ПОВЕРХНОСТИ — «ночная» шкала ------------------------------------------------------------------- Зелёно-графитовый, а не нейтрально-серый: тёмные блоки должны читаться как та же палитра, что и зелёные кнопки, иначе тёмный герой выглядит чужой вставкой. Три ступени, контрасты посчитаны с --hm-on-dark (#F4F1EA): --hm-night 16.15:1 фон тёмного блока, шапка, подвал --hm-night-2 14.68:1 вторая ступень, градиенты --hm-night-3 13.04:1 приподнятая панель/карточка на тёмном =================================================================== */ --hm-night: #0F1714; --hm-night-2: #16211C; --hm-night-3: #1E2B25; /* Заливки и линии поверх тёмного */ --hm-night-raise: rgba(244, 241, 234, 0.05); /* подложка панели */ --hm-night-raise-2: rgba(244, 241, 234, 0.09); /* подложка ховера */ --hm-night-line: rgba(244, 241, 234, 0.13); /* нейтральная граница */ --hm-night-line-bronze: rgba(217, 179, 137, 0.26); /* бронзовая граница */ /* Текст на тёмном */ --hm-on-dark: #F4F1EA; /* основной (16.15:1) */ --hm-on-dark-muted: #A8B3AC; /* вторичный (8.42:1) */ --hm-on-dark-faint: rgba(244, 241, 234, 0.55); /* только декор и мета */ /* Тени на тёмном: свет не «падает», а гасится — тень почти чёрная */ --hm-sh-night: 0 18px 48px rgba(0, 0, 0, 0.45); --hm-sh-night-sm: 0 4px 14px rgba(0, 0, 0, 0.30); /* Текст на зелёном */ --hm-on-green: #FFFFFF; /* (12.33:1) */ --hm-on-green-muted: rgba(255, 255, 255, 0.78); /* не ниже .78 */ --hm-on-green-line: rgba(255, 255, 255, 0.16); /* Границы. Сдвинуты вместе с фоном: на более тёплом листе прежние значения почти сливались с ним. */ --hm-border: #E2DCCE; /* основная граница */ --hm-border-soft: #EBE5D8; /* разделители внутри карточек */ /* Статусы */ --hm-success: #2E6B45; --hm-success-soft: rgba(46, 107, 69, 0.10); --hm-danger: #9B2C22; --hm-danger-soft: rgba(155, 44, 34, 0.09); --hm-warning: #8A6440; --hm-warning-soft: rgba(169, 124, 80, 0.12); /* =================================================================== ТИПОГРАФИКА ------------------------------------------------------------------- Old Standard TT — книжная гарнитура начала XX века. В отличие от Cormorant она изначально наборная, поэтому держит кегль от 1.05rem, а в 700 не растворяется на тёмном фоне. Два ограничения гарнитуры, которые учтены в компонентах: • росту прописных не хватает насыщенности в 400 — заголовки идут в 700, кроме очень крупного кегля (герой), где 400 смотрится благороднее; • межбуквенное расстояние в оригинале книжно-тесное, поэтому в верхнем регистре (надзаголовки) обязателен разряд ≥0.16em, иначе капитель слипается. Весь интерфейс — Inter. Дисплейная гарнитура в мелком кегле и в полях ввода не применяется. =================================================================== */ --hm-display: 'Old Standard TT', 'Times New Roman', Georgia, serif; --hm-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Шкала кегля. Old Standard TT оптически мельче Cormorant при равном кегле — крупные ступени подняты примерно на 8%. */ --hm-fs-hero: clamp(2.4rem, 5.4vw, 4rem); --hm-fs-h1: clamp(2rem, 4.2vw, 3rem); --hm-fs-h2: clamp(1.7rem, 3.2vw, 2.45rem); --hm-fs-h3: 1.32rem; --hm-fs-h4: 1.18rem; --hm-fs-lead: 1.05rem; --hm-fs-body: 0.95rem; --hm-fs-sm: 0.87rem; --hm-fs-xs: 0.8rem; --hm-fs-label: 0.72rem; /* надзаголовки, uppercase */ /* Разряд. Винтажный набор живёт на широких капителях. */ --hm-ls-display: -0.012em; /* крупные засечковые заголовки */ --hm-ls-label: 0.18em; /* uppercase-надзаголовки */ --hm-ls-caps: 0.09em; /* uppercase в интерфейсе (Inter) */ /* =================================================================== ПРОСТРАНСТВО, РАДИУС, ТЕНЬ =================================================================== */ --hm-sp-1: 4px; --hm-sp-2: 8px; --hm-sp-3: 12px; --hm-sp-4: 16px; --hm-sp-5: 24px; --hm-sp-6: 32px; --hm-sp-7: 48px; --hm-sp-8: 64px; --hm-sp-9: 88px; --hm-r-sm: 8px; --hm-r: 10px; --hm-r-lg: 14px; --hm-r-xl: 20px; --hm-r-pill: 999px; /* Тёплые и очень мягкие — галерейность, а не «веб 2.0» */ --hm-sh-xs: 0 1px 2px rgba(28, 36, 32, 0.04); --hm-sh-sm: 0 2px 6px rgba(28, 36, 32, 0.05); --hm-sh: 0 8px 24px rgba(28, 36, 32, 0.06); --hm-sh-lg: 0 18px 44px rgba(28, 36, 32, 0.10); --hm-sh-xl: 0 28px 70px rgba(28, 36, 32, 0.14); /* На зелёных поверхностях */ --hm-sh-green: 0 10px 28px rgba(22, 41, 31, 0.22); /* =================================================================== ДВИЖЕНИЕ ------------------------------------------------------------------- Одна кривая на весь сайт — от неё зависит ощущение «дорого». =================================================================== */ --hm-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --hm-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --hm-t-fast: 140ms; --hm-t: 180ms; --hm-t-slow: 320ms; --hm-t-reveal: 620ms; /* Слои */ --hm-z-header: 1000; --hm-z-dropdown: 1100; --hm-z-mobilenav: 1200; --hm-z-overlay: 1300; --hm-z-modal: 1400; /* Раскладка */ --hm-container: 1200px; --hm-header-h: 68px; /* =================================================================== СЛОЙ СОВМЕСТИМОСТИ ------------------------------------------------------------------- Старые шаблоны обращаются к переменным прошлых палитр напрямую: --aristocrat-gold встречается 79 раз, --hm-brass — 32, и так далее. Здесь они переопределены на новые токены, поэтому страницы, до которых ручная правка дойдёт последней, всё равно сразу получают верные цвета. Важно: --aristocrat-gold и --hm-brass ведут на --hm-bronze-text (#8A6440), а не на декоративную бронзу. Старые шаблоны красят этим цветом в том числе мелкий текст, а #A97C50 на ивори даёт 3.54:1 — то есть ровно ту нечитаемость, которую и надо убрать. Новый код эти имена использовать не должен. =================================================================== */ /* Латунь/золото прошлой палитры → бронза */ --hm-brass: var(--hm-bronze-text); --hm-brass-light: var(--hm-bronze); --hm-brass-soft: var(--hm-bronze-soft); --aristocrat-gold: var(--hm-bronze-text); --aristocrat-gold-light: var(--hm-bronze); --aristocrat-gold-pale: var(--hm-border); /* Тёмные поверхности прошлой палитры → зелёный */ --hm-ink: var(--hm-green-deep); --hm-ink-2: var(--hm-green); --hm-leather: var(--hm-green); --hm-leather-dark: var(--hm-green-deep); /* Светлые поверхности */ --hm-sand: var(--hm-ivory); --hm-sand-2: var(--hm-ivory-2); --hm-hay: var(--hm-border); --aristocrat-cream: var(--hm-ivory); --aristocrat-ivory: var(--hm-ivory-2); --aristocrat-rose: var(--hm-ivory-2); --aristocrat-rose-dark: var(--hm-border); --aristocrat-lavender: var(--hm-ivory-2); --aristocrat-sage: var(--hm-border); --aristocrat-card-bg: var(--hm-surface); /* Текст и границы */ --hm-text-muted: var(--hm-muted); --aristocrat-text: var(--hm-text); --aristocrat-text-light: var(--hm-muted); --aristocrat-border: var(--hm-border); /* Тени */ --hm-shadow: rgba(28, 36, 32, 0.06); --hm-shadow-lg: rgba(28, 36, 32, 0.12); --aristocrat-shadow: rgba(28, 36, 32, 0.06); /* Шрифты и градиент */ --hm-serif: var(--hm-display); --gold-gradient: linear-gradient( 135deg, var(--hm-bronze-text), var(--hm-bronze), var(--hm-bronze-text) ); }