/* ============================================================ TOKENS.CSS — Единый источник истины по дизайн-токенам Театр на Таганке ============================================================ */ :root { /* --- ЦВЕТА --- */ --color-brand: #C22A22; --color-black: #000000; --color-black-soft: #131313; --color-black-ui: #111111; --color-white: #FFFFFF; --color-bg-warm: #FCFAF7; --color-bg-sand: #ECEEE9; /* «Песок ×2 темнее» — база фона hero на главной (видна при загрузке медиа / леттербоксе). Получено как RGB(--color-bg-sand) × 0.5. Альтернатива с сохранением оттенка (HSL L÷2): #798567. */ --color-bg-sand-dark: #767775; --color-placeholder: #c8c2bb; --color-overlay-warm: rgba(102, 82, 47, 0.05); /* Семантические прозрачности чёрного мягкого (светлая тема) */ --color-black-soft-40: rgba(19, 19, 19, 0.40); --color-black-soft-25: rgba(19, 19, 19, 0.25); --color-black-soft-20: rgba(19, 19, 19, 0.20); --color-black-soft-15: rgba(19, 19, 19, 0.15); --color-black-soft-10: rgba(19, 19, 19, 0.10); --color-black-soft-04: rgba(19, 19, 19, 0.04); --color-black-soft-05: rgba(19, 19, 19, 0.05); /* Семантические прозрачности для оверлея карточек репертуара */ --color-card-overlay-80: rgba(17, 17, 17, 0.80); --color-card-overlay-65: rgba(17, 17, 17, 0.65); --color-card-overlay-30: rgba(17, 17, 17, 0.30); /* Семантические прозрачности белого (тёмная тема) */ --color-white-80: rgba(255, 255, 255, 0.80); --color-white-70: rgba(255, 255, 255, 0.70); --color-white-60: rgba(255, 255, 255, 0.60); --color-white-50: rgba(255, 255, 255, 0.50); --color-white-40: rgba(255, 255, 255, 0.40); --color-white-35: rgba(255, 255, 255, 0.35); --color-white-25: rgba(255, 255, 255, 0.25); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-10: rgba(255, 255, 255, 0.10); --color-white-07: rgba(255, 255, 255, 0.07); --color-white-05: rgba(255, 255, 255, 0.05); /* Семантические прозрачности чёрного (hero-оверлеи) */ --color-black-80: rgba(0, 0, 0, 0.80); --color-black-70: rgba(0, 0, 0, 0.70); --color-black-60: rgba(0, 0, 0, 0.60); --color-black-50: rgba(0, 0, 0, 0.50); --color-black-40: rgba(0, 0, 0, 0.40); --color-black-30: rgba(0, 0, 0, 0.30); --color-black-20: rgba(0, 0, 0, 0.20); --color-black-10: rgba(0, 0, 0, 0.10); --color-black-05: rgba(0, 0, 0, 0.05); /* --- ТИПОГРАФИКА --- */ --font-main: 'Pragmatica', 'Helvetica', sans-serif; --font-accent: 'Pragmatica Extended', 'Special Gothic Expanded One', 'Arial Black', sans-serif; /* --- РАЗМЕРЫ ШРИФТОВ (фиксированная шкала) --- */ --font-size-xs: 14px; --font-size-s: 16px; --font-size-m: 18px; --font-size-l: 20px; --font-size-xl: 24px; --font-size-2xl: 32px; --font-size-3xl: 36px; /* Псевдонимы для обратной совместимости */ --font-size-body: var(--font-size-s); --font-size-nav: var(--font-size-l); --font-size-menu: var(--font-size-m); --font-size-dates: var(--font-size-2xl); /* --- НАСЫЩЕННОСТИ --- Физические токены: соответствуют конкретному значению font-weight. Использовать напрямую только в редких случаях (заголовки, акценты), когда веc — это часть художественной идентичности блока. */ --font-weight-book: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; /* Семантические алиасы насыщенностей: описывают РОЛЬ, не значение. Использовать в большинстве случаев — это даёт точку управления для быстрых откатов без правки десятков файлов. --font-weight-body — основной читаемый текст: описания, мета-данные карточек, длинные подписи, лейблы 18-20px. Если визуально не хватает контраста на 400 — поменять алиас обратно на --font-weight-medium одной строкой здесь. */ --font-weight-body: var(--font-weight-book); /* --- МЕЖСТРОЧНЫЕ ИНТЕРВАЛЫ --- */ --line-height-tight: 0.9; --line-height-heading: 1.15; --line-height-base: 1.25; --line-height-body: 1.4; --line-height-loose: 1.5; /* --- МЕЖБУКВЕННЫЕ ИНТЕРВАЛЫ --- */ --letter-spacing-tight: -0.02em; --letter-spacing-base: -0.005em; --letter-spacing-wide: 0.05em; /* --- ОТСТУПЫ --- */ --space-xs: 6px; --space-s: 10px; --space-sm: 12px; --space-m: 16px; --space-l: 20px; --space-xl: 24px; --space-2xl: 33px; --space-3xl: 48px; --space-4xl: 60px; --space-5xl: 80px; --space-6xl: 96px; --space-7xl: 112px; --space-8xl: 128px; /* --- ИКОНКИ И КАСАТЕЛЬНЫЕ ЗОНЫ --- */ --icon-s: 24px; --touch-target: 56px; --icon-frame-m: 40px; /* --- РАДИУСЫ И ПРОПОРЦИИ КАРТОЧЕК --- Унифицированные значения для всех карточек, кнопок, бейджей. Радиус 2px — единый стандарт всех скруглений в проекте. Пропорция постера 355/236 — фото карточки спектакля (репертуар, исторические постановки, любые карточки-постеры). */ --card-radius: 2px; --card-aspect-poster: 355 / 236; /* --- ВЫСОТЫ КНОПОК --- Стандартные высоты кнопок: L (60px) — основные CTA, кнопки в карточках, мобильные тулбары M (48px) — компактные кнопки в дропдаунах и панелях */ --btn-h-l: 60px; --btn-h-m: 48px; /* --- КНОПКИ ЛИСТАНИЯ СЛАЙДЕРОВ --- Квадратные кнопки ← → у горизонтальных лент: «На сценах театра», «Новости и события» и далее по мере надобности. Появляются по ховеру на секцию, живут только на десктопе (≥1024px). ПРАВКА 10.08: формула размера переехала сюда из компонентов. Раньше одни и те же две строки лежали копиями в schedule.css и news.css — правка размера в одном месте молча расходилась с другим. Компоненты теперь только подставляют эти токены в свои --nav-icon / --nav-size, всё остальное (позиция, ховер, фон) остаётся их собственной специфи́кой. Два независимых множителя: --slider-nav-arrow-scale стрелка относительно плашки --slider-nav-scale кнопка целиком, вместе со стрелкой Плашка считается от базового кегля, а не от увеличенной стрелки: иначе она тянется за ней и растёт следом. Общий множитель применяется к обеим величинам, поэтому поля вокруг стрелки сохраняют пропорцию при любом его значении. Размеры: плашка 52.9px на 1024 → 57.5px на 1680, стрелка 31px → 38px, поля вокруг стрелки 10.9px → 9.8px. Квадрат в компонентах задаётся явными width/height, а не aspect-ratio: Safari не вычисляет ratio, когда И width, И height равны auto, и схлопывает кнопку в прямоугольник по контенту. */ --slider-nav-icon-base: clamp(18px, 1.310vw, 22px); --slider-nav-arrow-scale: 1.5; --slider-nav-scale: 1.15; --slider-nav-icon: calc(var(--slider-nav-icon-base) * var(--slider-nav-arrow-scale) * var(--slider-nav-scale)); --slider-nav-size: calc((var(--slider-nav-icon-base) + 28px) * var(--slider-nav-scale)); /* --- СЕТКА ВНУТРЕННИХ СТРАНИЦ (scale-1680) --- Все горизонтальные и вертикальные величины внутренних страниц скейлятся единым коэффициентом относительно базы Figma 1680px. Формула (по умолчанию): clamp(BASE × 0.65, (BASE / 1680 × 100)vw, BASE) Нижняя граница 0.65 от базы срабатывает при ~1092px и защищает от слишком мелких значений. На 1680+ — строго макетные величины. Между — линейный рост. Исключение — --inner-col-gap: при переходе от 4 к 3 колонкам (1440px) gap сбрасывается до 72px и скейлится вниз до 48px. 4-колоночный gap (72→96 между 1440→1680) задаётся в repertoire-page.css через --grid-col-gap. Формула обоих: clamp(MIN, 10vw - 72px, MAX). Эти токены используются: — page.css → .page__intro, .page__bar, .page__grid (паддинги) — afisha.css → .afisha__content, .afisha__group (паддинги, gap) — repertoire-page.css, historical-performances.css → .page__grid Все величины скейлятся одним коэффициентом → вертикальные границы карточек никогда не расходятся между разными страницами и ширинами. */ --inner-pad-x: clamp(10.4px, 0.952vw, 16px); /* боковой паддинг */ --inner-col-gap: clamp(48px, 10vw - 72px, 72px); /* gap между колонками (3 col: 72→48) */ --inner-row-gap: clamp(62.4px, 5.714vw, 72px); /* gap между строками (3 col: 72→62.4) */ --inner-pad-top: clamp(40px, 3.810vw, 64px); /* верхний паддинг сетки */ --inner-pad-bottom: clamp(60px, 5.714vw, 96px); /* нижний паддинг сетки */ /* --- ШАПКА ВНУТРЕННИХ СТРАНИЦ --- Компактная фиксированная шапка для всех страниц кроме главной. Главная использует абсолютно позиционированную шапку поверх hero с размерами бренд-блока 128/180/256px. */ --header-inner-h: 72px; /* мобилка и планшет (до 1023px) */ --header-inner-h-desk: 80px; /* ноутбук и десктоп (≥1024px) */ /* --- РАЗДЕЛИТЕЛИ --- */ --divider-color: var(--color-white-25); --divider-width: 1px; /* --- АНИМАЦИИ --- */ --ease-out-smooth: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);/* С небольшим отскоком (overshoot) — идеально для бейджей, попапов и дропдаунов */ --duration-instant: 80ms; --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 800ms; --duration-slower: 1200ms; /* --- Z-INDEX (системная шкала) --- */ --z-base: 1; --z-elevated: 10; --z-overlay: 15; --z-ui: 20; --z-header: 50; --z-modal: 200; --z-toast: 300; /* --- БРЕЙКПОИНТЫ (только для документации, в CSS использовать числа) --- --bp-tablet: 768px --bp-laptop: 1024px --bp-desktop: 1440px */ /* --- СВЯЗКА С JS (читаются через getComputedStyle) --- */ --js-title-base-size: 80; --js-title-width-ratio: 1; --js-title-padding-x: 24; } /* --- JS-переменные для планшета --- */ @media (min-width: 768px) and (max-width: 1023px) { :root { --js-title-base-size: 100; --js-title-padding-x: 40; } } /* --- JS-переменные для ноутбука --- */ @media (min-width: 1024px) and (max-width: 1439px) { :root { --js-title-base-size: 110; --js-title-width-ratio: 0.5; --js-title-padding-x: 32; } } /* --- JS-переменные для десктопа --- */ @media (min-width: 1440px) { :root { --js-title-base-size: 148; --js-title-width-ratio: 0.68; /* было 0.5: бюджет ширины плашек названия, 0.68 → длинные тайтлы («ВИШНЕВЫЙ САД. КОМЕДИЯ») ложатся в 2 строки на 1680. Под капом .global-info__title-wrapper max-width: 70%. */ --js-title-padding-x: 48; } }