/* ============================================================ tokens.css — единственное место, где живут цвета и шкала. Тема бренда переключается атрибутом data-brand на любом элементе: или на отдельной секции/карточке. Компоненты читают только переменные. ============================================================ */ :root { /* — Зонтичный бренд «Первая эвент компания». Значения из фирменного гайда. — */ --pec-ink: #102F35; /* доверие и профессионализм */ --pec-graphite: #202124; /* глубокий нейтральный */ --pec-cream: #F6F0E6; /* воздух */ --pec-gold: #D9B46E; /* премиальность в деталях */ --pec-sage: #6FA88A; /* структура и ясность */ /* Дополнительные акценты гайда. Работают точечно, не как основа. */ --pec-blue: #3A7DFF; --pec-orange: #FF6A2A; /* — Большой бизнес завтрак. Снято с афиш проекта: мир темно-синий. — */ --bbz-navy: #070E28; /* основной фон */ --bbz-navy-deep: #03081A; /* провал, глубина */ --bbz-blue: #1E3F9E; /* свечение и линии */ --bbz-blue-light: #A8C6EE; /* подписи и второстепенный текст-акцент */ --bbz-red: #DE2A21; /* дата и действие, затемнен до 4.71:1 с белым */ /* — Кофе Рейв (фирменный-стиль.md) — */ --cr-espresso: #3B2E24; --cr-cream: #F5EFE6; --cr-orange: #FF8A3D; --cr-lime: #C8FF3D; --cr-graphite: #111111; /* Кремовый и лайм нужны и вне темы Кофе Рейва — на баннере поверх графита. */ /* — Активная тема: по умолчанию зонтичная — */ --bg: var(--pec-cream); --bg-deep: var(--pec-ink); --surface: #FFFFFF; --ink: var(--pec-ink); --ink-on-deep: var(--pec-cream); --muted: #5C7176; --muted-on-deep: #9FB4B7; --accent: var(--pec-gold); --accent-ink: #241A05; --accent-2: var(--pec-sage); --accent-text: #3F7057; /* шалфей, затемненный до 5.05:1 на креме */ --line: rgba(16, 47, 53, 0.14); --line-on-deep: rgba(246, 240, 230, 0.18); --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --display-tracking: -0.02em; --display-weight: 600; --display-transform: none; /* — Шкала — */ --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem); --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem); --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 2rem); --step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.9rem); --step-4: clamp(2.3rem, 1.7rem + 3vw, 4.6rem); --step-5: clamp(2.8rem, 1.8rem + 5vw, 6rem); --space-1: 0.5rem; --space-2: 0.875rem; --space-3: 1.375rem; --space-4: 2.25rem; --space-5: 3.5rem; --space-6: 5.5rem; --space-7: 8rem; --header-h: 72px; --radius: 14px; --radius-lg: 26px; --radius-pill: 999px; --measure: 68ch; --page: 1220px; --gutter: clamp(1.1rem, 4vw, 3rem); --shadow-sm: 0 1px 2px rgba(16, 47, 53, 0.06), 0 4px 14px rgba(16, 47, 53, 0.05); --shadow-md: 0 2px 6px rgba(16, 47, 53, 0.07), 0 18px 44px rgba(16, 47, 53, 0.1); /* Кривые по назначению. Встроенные CSS-кривые слабоваты, берем усиленные. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* вход, выход, отклик */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* движение по экрану */ --ease-hover: ease; /* цвет и фон при наведении */ /* Длительности по назначению. Потолок для интерфейса — 300 мс. */ --dur-press: 140ms; /* отклик на нажатие */ --dur-hover: 160ms; /* наведение */ --dur-menu: 180ms; /* выпадающее меню */ --dur-menu-out: 130ms;/* его закрытие: система отвечает быстрее, чем решает человек */ --dur-panel: 240ms; /* мобильная панель навигации */ --dur-reveal: 380ms; /* появление секции при скролле */ --ease: var(--ease-out); --dur: var(--dur-hover); } /* — Тема: Кофе Рейв — */ [data-brand='coffee-rave'] { --bg: var(--cr-cream); --bg-deep: var(--cr-graphite); --surface: #FFFFFF; --ink: var(--cr-espresso); --ink-on-deep: var(--cr-cream); --muted: #7A6A5C; --muted-on-deep: #B5ABA0; --accent: var(--cr-orange); --accent-ink: #2B1400; --accent-2: var(--cr-lime); --accent-text: #A84400; /* оранжевый, затемненный до 5.26:1 на креме */ --line: rgba(59, 46, 36, 0.16); --line-on-deep: rgba(245, 239, 230, 0.16); --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif; --display-tracking: 0.005em; --display-weight: 800; --shadow-sm: 0 1px 2px rgba(59, 46, 36, 0.06), 0 4px 14px rgba(59, 46, 36, 0.06); --shadow-md: 0 2px 6px rgba(59, 46, 36, 0.08), 0 18px 44px rgba(59, 46, 36, 0.12); } /* — Большой бизнес завтрак, уровень 1: акцент внутри светлой страницы. Карточка проекта на главной берет только цвет, поверхность остается общей. — */ [data-brand='business-breakfast'] { --accent: var(--bbz-red); --accent-ink: #FFFFFF; --accent-2: var(--bbz-blue); --accent-text: #1E3F9E; /* синий бренда, 8.20:1 на креме */ } /* — Уровень 2: собственный мир проекта. Включается только когда страница принадлежит ему целиком: у бренда нет светлой поверхности, все его носители живут на глубоком синем. — */ body[data-brand='business-breakfast'] { --bg: var(--bbz-navy); --bg-deep: var(--bbz-navy-deep); --surface: rgba(255, 255, 255, 0.045); --ink: #FFFFFF; --ink-on-deep: #FFFFFF; --muted: #A3B6DC; --muted-on-deep: #A3B6DC; --accent-2: var(--bbz-blue-light); --accent-text: var(--bbz-blue-light); --line: rgba(168, 198, 238, 0.22); --line-on-deep: rgba(168, 198, 238, 0.22); /* Заголовки на афишах набраны тяжелым гротеском. */ --display-weight: 800; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 18px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 22px 50px rgba(0, 0, 0, 0.5); } /* — Инверсная поверхность: темный блок внутри светлой страницы — */ [data-surface='deep'] { --bg: var(--bg-deep); --surface: rgba(255, 255, 255, 0.05); --ink: var(--ink-on-deep); --muted: var(--muted-on-deep); --line: var(--line-on-deep); background: var(--bg); color: var(--ink); }