/** * HedgeTrade Design Tokens * ------------------------------------------------------------------ * Единый источник правды дизайн-системы. Ни один компонент проекта * не должен содержать «сырых» значений цвета, размера или радиуса — * только ссылки на токены из этого файла. * * Архитектура токенов (два уровня): * 1. Примитивы (--ht-blue-600, --ht-space-4) — сырые значения. * 2. Семантика (--ht-color-primary, --ht-card-padding) — роли. * Компоненты используют ТОЛЬКО семантический уровень: при редизайне * меняются примитивы, а компонентный CSS остаётся нетронутым. * * Fluid-масштабирование: * Все clamp() рассчитаны линейной интерполяцией на диапазоне * viewport 320px → 1440px (20rem → 90rem): * slope(vw) = (max - min) / 1120 * 100 * intercept(rem) = (min - slope * 320 / 100) / 16 * 1440px — референсная ширина макета: на ней значения совпадают * с макетом 1:1, ниже — плавно уменьшаются до мобильного минимума. * * Breakpoints (справочно — CSS custom properties не работают внутри * media queries, поэтому значения продублированы здесь комментарием * и должны использоваться в @media буквально): * --bp-sm: 700px (стек hero, 2 колонки преимуществ) * --bp-md: 1000px (планшет: 3 колонки, вертикальные шаги) * --bp-lg: 1200px (полная десктопная сетка) * * @package HedgeTrade_Child * @since 1.0.0 */ :root { /* ================================================================== 1. ПАЛИТРА — примитивы Названия по шкале светлоты (50 — самый светлый). ================================================================== */ --ht-blue-50: #F1F6FD; /* фон секций */ --ht-blue-100: #E9F1FF; /* подложки иконок, бейджи (спека hero) */ --ht-blue-200: #BFDBFE; /* hover подложек, focus ring */ --ht-blue-600: #2563EB; /* основной бренд-синий (спека hero) */ --ht-blue-700: #1D4ED8; /* hover/active состояния */ --ht-navy-900: #0F172A; /* заголовки (спека hero) */ --ht-slate-500: #64748B; /* основной текст (спека hero) */ --ht-slate-200: #E2E8F0; /* границы карточек (спека hero) */ --ht-white: #FFFFFF; /* ------------------------------------------------------------------ 1a. ПАЛИТРА — семантические роли ------------------------------------------------------------------ */ --ht-color-primary: var(--ht-blue-600); --ht-color-primary-hover: var(--ht-blue-700); --ht-color-primary-soft: var(--ht-blue-100); --ht-color-heading: var(--ht-navy-900); --ht-color-text: var(--ht-slate-500); --ht-color-surface: var(--ht-white); /* фон карточек */ --ht-color-section: var(--ht-blue-50); /* фон «синих» секций */ --ht-color-border: var(--ht-slate-200); --ht-color-on-primary: var(--ht-white); /* текст на кнопках */ --ht-color-focus-ring: var(--ht-blue-200); --ht-gradient-hero: linear-gradient(90deg, #EFF4FD 0%, #E8F0FD 100%); /* УТВЕРЖДЁННЫЙ фон hero (заказчик, 1.8.9). НЕ пересемплировать при замене ассетов! */ --ht-hero-pad: clamp(3rem, 2.29rem + 3.57vw, 5.5rem); /* нижний паддинг hero; верхний = /4 (см. ht-sections) */ /* ================================================================== 2. ТИПОГРАФИКА ================================================================== */ /* 'Manrope Fallback' — Arial с метриками Manrope (см. fonts.css): гарантирует нулевой layout shift при свапе шрифта. */ --ht-font-base: 'Manrope', 'Manrope Fallback', -apple-system, 'Segoe UI', Roboto, sans-serif; --ht-fw-regular: 400; --ht-fw-semibold: 600; --ht-fw-bold: 700; --ht-fw-heavy: 800; --ht-lh-tight: 1.12; /* H1 */ --ht-lh-heading: 1.25; /* H2–H3 */ --ht-lh-body: 1.55; /* параграфы, описания */ --ht-lh-none: 1; /* бейджи, метрики */ --ht-ls-caps: 0.08em; /* uppercase-бейджи */ /* ------------------------------------------------------------------ 2a. Fluid-шкала размеров (диапазон 320→1440, см. шапку файла) ------------------------------------------------------------------ */ --ht-fs-h1: clamp(1.875rem, 1.41rem + 2.32vw, 3.5rem); /* 30→56px: mobile 28–32 / tablet 36–44 / desktop до 56 — спека hero v2 */ --ht-fs-h2: clamp(1.375rem, 1.27rem + 0.54vw, 1.75rem); /* 22→28px */ --ht-fs-h3: clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem); /* 18→20px */ --ht-fs-lead: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); /* 16→18px, спека hero */ --ht-fs-body: 0.9375rem; /* 15px */ --ht-fs-card-title: clamp(0.9375rem, 0.92rem + 0.09vw, 1rem); /* 15→16px */ --ht-fs-small: 0.8125rem; /* 13px */ --ht-fs-caption: 0.75rem; /* 12px */ /* ================================================================== 3. SPACING База 4px (0.25rem). Шкала — примитивы; ниже — семантические отступы, привязанные к макету. ================================================================== */ --ht-space-1: 0.25rem; /* 4px */ --ht-space-2: 0.5rem; /* 8px */ --ht-space-3: 0.75rem; /* 12px */ --ht-space-4: 1rem; /* 16px */ --ht-space-5: 1.25rem; /* 20px */ --ht-space-6: 1.5rem; /* 24px */ --ht-space-8: 2rem; /* 32px */ --ht-space-10: 2.5rem; /* 40px — конец шкалы; крупнее — только clamp-токены */ /* Семантические отступы */ --ht-section-gap: clamp(1.5rem, 1.36rem + 0.71vw, 2rem); /* 24→32px на сторону: суммарно 48–64 между секциями, как в макете */ --ht-heading-gap: var(--ht-space-8); /* заголовок секции → контент */ --ht-grid-gap: var(--ht-space-5); /* gap карточных сеток */ --ht-card-padding: clamp(1.25rem, 1.18rem + 0.36vw, 1.5rem); /* 20→24px */ /* ================================================================== 4. LAYOUT / КОНТЕЙНЕРЫ ================================================================== */ --ht-container-max: 1400px; /* Ширина текста статей (720px) задаётся в theme.json → layout.contentSize: JSON не поддерживает var()/комментарии, значение продублировано осознанно. */ --ht-container-pad: clamp(1rem, 0.43rem + 2.86vw, 3rem); /* 16→48px */ /* ================================================================== 5. РАДИУСЫ ================================================================== */ --ht-radius-sm: 0.625rem; /* 10px — кнопки, плитки иконок, картинки в карточках */ --ht-radius-md: 1rem; /* 16px — карточки, секционные панели */ --ht-radius-pill: 999px; /* бейджи, круглые иконки */ /* ================================================================== 6. ТЕНИ Стиль макета: границы вместо теней. Тени — только hover-состояния и «парящие» элементы hero. Синий оттенок теней — фирменный приём. ================================================================== */ --ht-shadow-hover: 0 8px 24px rgba(21, 102, 242, 0.10); /* ================================================================== 7. TRANSITIONS Анимируем только transform/opacity (60 FPS, composite-only). ================================================================== */ --ht-ease: cubic-bezier(0.4, 0, 0.2, 1); --ht-duration: 180ms; --ht-transition: var(--ht-duration) var(--ht-ease); /* Интеракционные константы (hover-подъём, сдвиг стрелок, фокус-кольцо): вынесены в токены, чтобы жесты были одинаковыми у всех компонентов. */ --ht-lift: -2px; --ht-slide: 3px; --ht-focus-ring: 3px solid var(--ht-color-focus-ring); --ht-focus-offset: 2px; /* Z-index: первый потребитель появился в 1.10.1 (лайтбокс) — токен возвращён по правилу аудита 1.7.6. */ --ht-z-modal: 1000; /* ================================================================== 9. КОМПОНЕНТНЫЕ РАЗМЕРЫ ================================================================== */ /* Кнопки (радиус и паддинг — спека hero: 12px / 22px) */ --ht-btn-height: clamp(2.75rem, 2.68rem + 0.36vw, 3rem); /* 44→48px */ --ht-btn-radius: 0.75rem; --ht-btn-pad-x: 1.375rem; --ht-btn-fs: var(--ht-fs-body); --ht-btn-gap: var(--ht-space-2); /* иконка ↔ текст */ /* Иконки */ --ht-icon-sm: 1.25rem; /* 20px — метрики, пункты CTA-бара */ --ht-icon-md: 1.5rem; /* 24px — внутри плиток */ --ht-icon-tile: 2.5rem; /* 40px — голубая плитка под иконку */ --ht-icon-lg: 3.5rem; /* 56px — иконка Telegram в CTA */ /* Карточки */ --ht-card-article-img: 35%; /* доля картинки в карточке статьи */ --ht-card-min-w: 12rem; /* 192px: 6 колонок преимуществ держатся до ~1350px, как в макете */ /* ================================================================== 10. GRID-ШАБЛОНЫ auto-fit + minmax = сетка перестраивается сама, без media queries. min(100%, …) защищает от переполнения на узких экранах. ================================================================== */ --ht-grid-cards: repeat(auto-fit, minmax(min(100%, var(--ht-card-min-w)), 1fr)); --ht-grid-articles: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); } /* ================================================================== 11. МОСТ BLOCKSY → ТОКЕНЫ Blocksy генерирует собственные переменные для хедера, кнопок и палитры кастомайзера. Перепривязываем их к токенам, чтобы у всех элементов темы был один источник цвета. Специфичность :root одинаковая — побеждает порядок загрузки (tokens.css грузится с приоритетом 5, но inline-стили Blocksy позже), поэтому дублируем привязку на body для гарантированного выигрыша каскада. ================================================================== */ :root, body { --theme-palette-color-1: var(--ht-color-primary); /* accent */ --theme-palette-color-2: var(--ht-color-primary-hover); /* accent hover */ --theme-palette-color-3: var(--ht-color-heading); /* headings */ --theme-palette-color-4: var(--ht-color-text); /* text */ --theme-palette-color-5: var(--ht-color-border); /* borders */ --theme-palette-color-6: var(--ht-color-section); /* light bg */ --theme-palette-color-7: var(--ht-color-surface); /* surface */ --theme-link-initial-color: var(--ht-color-primary); --theme-link-hover-color: var(--ht-color-primary-hover); --theme-button-background-initial-color: var(--ht-color-primary); --theme-button-background-hover-color: var(--ht-color-primary-hover); --theme-form-field-border-focus-color: var(--ht-color-primary); } /* ================================================================== Уважение к пользовательским настройкам ОС: отключаем анимации глобально одним правилом, а не в каждом компоненте. ================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --ht-duration: 0.01ms; } }