/* ============================================================ SHANN Industrial Premium — design tokens Единственный источник истины по цвету, типографике, ритму и движению. Ничего, кроме переменных: компоненты живут в components.css ============================================================ */ :root{ /* ---------- PRIMARY: фирменный синий SHANN ---------- База #0087ff взята из логотипа shann.ru (logo_b.svg, fill:#0087ff) */ --p-50:#e9f5ff; --p-100:#cfe9ff; --p-200:#9dd2ff; --p-300:#63b7ff; --p-400:#2c9dff; --p-500:#0087ff; /* фирменный */ --p-600:#006ed6; --p-700:#0057a8; --p-800:#00447f; --p-900:#00335f; /* ---------- SECONDARY: промышленный графит ---------- Тёмная база бренда. Не чёрный — в чёрном техника «тонет» */ --s-50:#f4f6f8; --s-100:#e6eaee; --s-200:#ccd4db; --s-300:#a4b1bc; --s-400:#74838f; --s-500:#4e5b66; --s-600:#38434c; --s-700:#272f36; --s-800:#1a2026; /* основная тёмная поверхность */ --s-900:#11161a; /* максимально тёмная */ /* ---------- SKY: фирменный градиент SHANN (сцена для техники) ---------- */ --sky-1:#2ec2ee; --sky-2:#95d7f8; --sky-3:#eaf6fd; /* ---------- NEUTRAL ---------- */ --n-0:#ffffff; --n-50:#fafbfc; --n-100:#f4f6f8; --n-200:#e8ecef; --n-300:#d5dbe0; --n-400:#9aa5ae; --n-500:#646e78; --n-600:#4a545d; --n-700:#333b42; --n-800:#1f262c; --n-900:#12171b; /* ---------- СЕМАНТИКА ---------- */ --success:#0f9d58; --success-bg:#e8f6ee; --success-fg:#0a6b3c; --warning:#e8940c; --warning-bg:#fdf3e3; --warning-fg:#8a5600; --error:#d93025; --error-bg:#fdecea; --error-fg:#a01c14; --info:var(--p-500);--info-bg:var(--p-50); --info-fg:var(--p-700); /* ---------- РОЛИ (светлая тема) ---------- */ --bg:var(--n-0); --bg-alt:var(--n-100); --bg-dark:var(--s-800); --surface:var(--n-0); --surface-2:var(--n-50); --surface-dark:var(--s-700); --border:var(--n-200); --border-strong:var(--n-300); --text:var(--n-900); --text-2:var(--n-600); --text-3:var(--n-500); --text-on-dark:var(--n-0); --text-on-dark-2:#a9b6c0; --accent:var(--p-500); /* бренд-акцент: плашки, иконки, декор */ --accent-hover:var(--p-600); --focus:var(--p-400); /* Доступные производные: белый на #0087ff даёт 3.55 — ниже WCAG AA. Поэтому для заливок под белый текст и для ссылок берём затемнённые варианты. */ --action:#006ed6; /* фон кнопки под белый текст → 5.0 */ --action-hover:#0057a8; /* → 7.17 */ --link:#0064c2; /* ссылка на белом → 5.83 */ --link-on-dark:#63b7ff; /* ссылка на графите → 7.62 */ /* ---------- ГРАДИЕНТЫ ---------- */ --grad-sky:linear-gradient(178deg,var(--sky-1) 0%,var(--sky-2) 40%,var(--sky-3) 74%,#fff 100%); --grad-accent:linear-gradient(100deg,#0052a0,#006ed6 55%,#0087ff); /* минимальный контраст с белым 5.0 */ --grad-dark:linear-gradient(160deg,var(--s-800) 0%,var(--s-900) 100%); --grad-steel:linear-gradient(150deg,#232b32 0%,#161c21 60%,#0f1418 100%); --grad-fade-dark:linear-gradient(180deg,rgba(17,22,26,0) 0%,rgba(17,22,26,.86) 68%,#11161a 100%); /* ---------- ТИПОГРАФИКА ---------- Montserrat — бренд-слой (узнаваемость SHANN) Inter — интерфейс: спеки, формы, таблицы (табличные цифры, читаемость от 12px) */ --font-brand:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --font-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; /* размер / интерлиньяж / трекинг / вес */ --t-display:clamp(44px,6.4vw,80px); --lh-display:1.04; --ls-display:-.028em; --fw-display:200; --t-hero:clamp(34px,4.6vw,58px); --lh-hero:1.1; --ls-hero:-.022em; --fw-hero:200; --t-h1:clamp(30px,3.4vw,44px); --lh-h1:1.14; --ls-h1:-.018em; --fw-h1:300; --t-h2:clamp(25px,2.6vw,34px); --lh-h2:1.2; --ls-h2:-.014em; --fw-h2:300; --t-h3:clamp(19px,1.6vw,23px); --lh-h3:1.3; --ls-h3:-.008em; --fw-h3:600; --t-h4:17px; --lh-h4:1.4; --ls-h4:-.004em; --fw-h4:600; --t-body-lg:17px; --lh-body-lg:1.62; --t-body:15.5px; --lh-body:1.62; --t-body-sm:14px; --lh-body-sm:1.58; --t-caption:13px; --lh-caption:1.5; --t-label:11.5px; --lh-label:1.35; --ls-label:.09em; --fw-label:600; --t-button:15px; --lh-button:1; --ls-button:.005em; --fw-button:600; --t-mono:14px; /* ---------- РИТМ (база 4px) ---------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px; --section-y:clamp(56px,7vw,104px); --maxw:1280px; --gutter:clamp(18px,3vw,32px); /* ---------- РАДИУСЫ ---------- */ --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:16px; --r-full:999px; /* ---------- ТЕНИ ---------- */ --sh-xs:0 1px 2px rgba(16,32,46,.06); --sh-sm:0 2px 8px rgba(16,32,46,.07); --sh-md:0 8px 24px rgba(16,32,46,.09); --sh-lg:0 18px 48px rgba(14,40,62,.13); --sh-xl:0 30px 70px rgba(10,32,52,.18); --sh-accent:0 10px 28px rgba(0,110,214,.28); --sh-machine:drop-shadow(0 26px 26px rgba(12,44,72,.28)); --focus-ring:0 0 0 3px rgba(0,135,255,.35); /* ---------- ДВИЖЕНИЕ ---------- */ --ease-out:cubic-bezier(.22,.61,.36,1); --ease-in-out:cubic-bezier(.65,.05,.36,1); --ease-spring:cubic-bezier(.34,1.4,.64,1); --d-instant:90ms; --d-fast:160ms; --d-base:240ms; --d-slow:420ms; --d-reveal:640ms; /* ---------- СЛОИ ---------- */ --z-base:1; --z-sticky:50; --z-header:60; --z-dropdown:70; --z-overlay:80; --z-modal:90; --z-toast:100; } /* ---------- ТЁМНАЯ ТЕМА ---------- Включается системной настройкой или атрибутом data-theme="dark" */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:var(--s-900); --bg-alt:var(--s-800); --surface:var(--s-800); --surface-2:var(--s-700); --border:#2b343c; --border-strong:#3a444d; --text:#eef2f5; --text-2:#b3c0cb; --text-3:#8b98a4; --accent:var(--p-400); --accent-hover:var(--p-300); --sh-md:0 8px 24px rgba(0,0,0,.4); --sh-lg:0 18px 48px rgba(0,0,0,.5); } } :root[data-theme="dark"]{ --bg:var(--s-900); --bg-alt:var(--s-800); --surface:var(--s-800); --surface-2:var(--s-700); --border:#2b343c; --border-strong:#3a444d; --text:#eef2f5; --text-2:#b3c0cb; --text-3:#8b98a4; --accent:var(--p-400); --accent-hover:var(--p-300); } /* Уважение к настройке «уменьшить движение» — требование WCAG 2.3.3 */ @media (prefers-reduced-motion: reduce){ :root{ --d-instant:1ms; --d-fast:1ms; --d-base:1ms; --d-slow:1ms; --d-reveal:1ms; } }