/* =========================================================================
3L · Design tokens · v1 (стартовые гипотезы)
-------------------------------------------------------------------------
Источник правды для всех носителей бренда. Импортируй этот файл в любой
HTML-проект (сайт, КП в HTML, шаблон кейса) и работай только через
переменные — никакого хардкода цвета/размера в разметке.
Связь с документами:
- brand-guidelines.md · perception list, направление, стартовая палитра
- references/README.md · уроки 7 эталонов, конкретные правила
- deliverables-spec.md · что должно собираться из этих токенов
Эти значения — рабочие гипотезы. Финальный HEX и шрифты подберёт дизайнер.
Структура (что есть какой токен) — останется.
========================================================================= */
/* -------------------------------------------------------------------------
Шрифты
-------------------------------------------------------------------------
Google Fonts грузятся напрямую через в index.html (preconnect к
fonts.googleapis.com + fonts.gstatic.com + stylesheet). Не через @import:
@import блокирует рендер до окончания скачивания и парсинга CSS, в котором
он лежит, а потом ещё ждёт второй RTT до Google. Прямой в
распараллеливает запрос со скачиванием tokens.css/main.css/sections.css.
------------------------------------------------------------------------- */
:root {
/* =======================================================================
ЦВЕТ
-----------------------------------------------------------------------
База — deep graphite (не чистый чёрный, тёплее и глубже).
Поверхность — warm off-white (не белый, чтобы не было «офисно»).
Акцент — acid lime, единственный главный сигнал бренда.
Глубокий акцент — petrol blue для разделов «AI / аналитика» (BMW-урок).
Сезонный — переопределяй на кейс / кампанию / клиента (Jacquemus-урок).
======================================================================= */
--color-base: #0E1012; /* deep graphite — фон тёмных секций */
--color-base-soft: #16191D; /* линии и карточки на тёмном */
--color-surface: #F3F0EA; /* warm off-white — фон светлых секций */
--color-surface-2: #E8E3D8; /* блоки внутри светлой секции */
--color-accent: #C8FF3D; /* acid lime — главный сигнал */
--color-accent-deep: #0E2E3A; /* petrol blue — AI/аналитика */
--color-season: var(--color-accent); /* переопределяй на кейс */
--color-text: #ECEAE3; /* на тёмной базе */
--color-text-muted: #8A8E94;
--color-text-invert: #111315; /* на светлой поверхности */
--color-text-invert-muted: #5F6166;
--color-line: #1F2226; /* на тёмной базе */
--color-line-invert: #D9D3C4; /* на светлой поверхности */
/* =======================================================================
ТИПОГРАФИКА
-----------------------------------------------------------------------
Гипотеза:
display → Bricolage Grotesque (характерный современный гротеск)
serif → Instrument Serif italic (культурный якорь, editorial)
body → Geist (humanist sans без «маркетингового» характера)
Не используем: Inter, Roboto, Arial, Space Grotesk (генерик AI-look).
======================================================================= */
--font-display: "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
--font-serif: "Instrument Serif", "Times New Roman", serif;
--font-body: "Geist", "Helvetica Neue", system-ui, sans-serif;
/* Размерная шкала — fluid через clamp(min, vw, max) */
--fs-display: clamp(64px, 9vw, 144px); /* hero, manifest */
--fs-h1: clamp(48px, 6vw, 96px); /* section openers */
--fs-h2: clamp(32px, 4vw, 56px);
--fs-h3: clamp(24px, 2.4vw, 32px);
--fs-h4: 20px;
--fs-body-l: 22px; /* основной body на сайте */
--fs-body: 17px;
--fs-body-s: 15px;
--fs-caption: 13px;
--fs-eyebrow: 12px; /* uppercase metа над заголовками */
--lh-display: 0.92;
--lh-heading: 1.04;
--lh-body: 1.5;
--lh-caption: 1.35;
--ls-display: -0.02em;
--ls-heading: -0.015em;
--ls-body: -0.005em;
--ls-eyebrow: 0.16em;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
/* =======================================================================
SPACING · 8px grid
======================================================================= */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
--space-9: 128px;
--space-10: 160px;
--space-11: 200px;
--space-12: 240px;
/* =======================================================================
RADII · минимальные. Большие скругления — не наша эстетика.
======================================================================= */
--radius-0: 0;
--radius-sm: 2px;
--radius-md: 4px;
--radius-pill: 999px; /* только для бейджей-меток */
/* =======================================================================
LAYOUT
======================================================================= */
--container-max: 1320px;
--container-wide: 1560px;
--gutter: clamp(20px, 4vw, 48px);
--bp-sm: 640px;
--bp-md: 960px;
--bp-lg: 1280px;
/* =======================================================================
MOTION · сдержанный slow-reveal, не «эффекты». OpenAI/Gentle Monster-урок.
-----------------------------------------------------------------------
Правила (полностью в README → раздел Motion):
· italic в типографике = «движение». motion = appear/feedback, не loops.
· никакого параллакса, bouncy easing, бесконечных rotate.
· reveal — single-shot через IntersectionObserver.
======================================================================= */
/* Durations */
--dur-instant: 120ms; /* мгновенный отклик: focus, табы, toggle */
--dur-fast: 180ms; /* hover на ссылках, кнопках, мелкие transitions */
--dur-base: 320ms; /* средние смены состояния, нав-меню */
--dur-page: 480ms; /* page-transition overlay (SPA-роутер) */
--dur-slow: 720ms; /* большие смены состояния, slow-zoom hover */
--dur-reveal: 1100ms; /* slow-reveal на скролл, editorial appear */
/* Easings */
--ease-default: cubic-bezier(0.2, 0.7, 0.2, 1); /* стандартный smooth-out */
--ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* editorial appear, выраженный finish */
--ease-exit: cubic-bezier(0.5, 0, 0.75, 0); /* резкий уход overlay/modal */
--ease-linear: linear; /* loop'ы: heartbeat, marquee, progress */
/* Distance · насколько далеко элемент сдвигается в reveal/hover */
--motion-distance-sm: 8px; /* микро-сдвиги: arrow на hover, мелкие fade-up */
--motion-distance-md: 16px; /* стандарт reveal: блоки текста, карточки */
--motion-distance-lg: 32px; /* крупный editorial appear: cover, manifesto */
/* Stagger · задержка между соседями в группе reveal'ов */
--motion-stagger: 80ms;
/* =======================================================================
ИНТЕРАКТИВНЫЕ СОСТОЯНИЯ
======================================================================= */
--focus-ring: 0 0 0 2px var(--color-base), 0 0 0 4px var(--color-accent);
--hover-lift: translateY(-2px); /* = инвертированный --motion-distance-sm/4 */
}
/* -------------------------------------------------------------------------
Reduced motion · уровень токенов, потому что применимо ко всем компонентам.
Оставляем focus и hover-цвет, отключаем длинные transitions и distance.
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-page: 0ms;
--dur-slow: 0ms;
--dur-reveal: 0ms;
--motion-distance-sm: 0px;
--motion-distance-md: 0px;
--motion-distance-lg: 0px;
--motion-stagger: 0ms;
--hover-lift: none;
}
}
/* -------------------------------------------------------------------------
Базовые типографические утилиты (опциональные классы)
-------------------------------------------------------------------------
Подключаются если хочешь готовый display/h1/body без своего CSS.
------------------------------------------------------------------------- */
.t-display {
font-family: var(--font-display);
font-size: var(--fs-display);
font-weight: var(--fw-medium);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
}
.t-h1 {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: var(--fw-medium);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
.t-h2 {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: var(--fw-medium);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
.t-h3 {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-medium);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
.t-italic {
font-family: var(--font-serif);
font-style: italic;
font-weight: var(--fw-regular);
}
.t-body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
}
.t-body-l {
font-family: var(--font-body);
font-size: var(--fs-body-l);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
}
.t-caption {
font-family: var(--font-body);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--color-text-muted);
}
.t-eyebrow {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-medium);
line-height: 1;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--color-text-muted);
}