/* Дизайн-токены LumiBox. Кинотеатр — это тёмный зал, свет проектора, мерцание экрана. Отсюда палитра: глубокий чёрный, тёплый янтарь проекторного луча, серебристый отблеск киноплёнки. Шрифты: Inter для всего — заголовки жирные (700–800) с плотным межбуквенным интервалом, текст обычный. Единый гротеск в духе SF Pro: вес у заголовков, не шрифт. */ /* Шрифты подключаются в base.html с display=swap, чтобы их загрузка не задерживала первую отрисовку страницы. */ :root { /* --- Цвета --- */ /* Фон: глубокий кинозал */ --color-bg: #0a0a14; --color-surface: #141425; --color-surface-hover: #1e1e32; /* Текст: серебро киноплёнки */ --color-text: #f5f5f7; --color-text-muted: #A0A5B5; --color-text-dim: #86868b; --color-text-soft: #d2d2d7; --color-text-bright: #f5f5f7; --color-text-strong: #ffffff; --color-text-faint: #686868; --color-text-shadow: rgba(0, 0, 0, 0.6); /* Акцент — свет кинопроектора: яркий насыщенный оранжевый. Между классическим orange и amber: не жёлтый, не красный, не кислотный. --color-accent-rgb хранит те же три канала без обёртки rgb(), чтобы полупрозрачные варианты писались как rgba(var(--color-accent-rgb), .25). Раньше такие значения были вписаны числами в 65 местах по девяти файлам, и смена акцента требовала правки каждого. Теперь цвет живёт в одной строке, а все свечения, подсветки и границы следуют за ним сами. */ --color-accent: #e94560; --color-accent-rgb: 233, 69, 96; --color-accent-hover: #f05a75; --color-accent-soft: #ff8a9e; --color-accent-deep: #c73050; --color-accent-dim: rgba(var(--color-accent-rgb), 0.15); /* Свечение почти погашено. Оно было прикручено к пятнадцати местам сразу — логотип, значок логотипа, полоса под шапкой, поле поиска, чипы жанров, кнопка промо, кнопка пагинации, аватар, карточки подборок и справочников, футер. Когда светится всё, не светится ничего: подсветка перестаёт что-либо выделять и превращается в фоновый шум. Значение оставлено ненулевым, чтобы места, где свечение действительно к месту (активное состояние), не потеряли его совсем. */ --color-accent-glow: rgba(var(--color-accent-rgb), 0.03); /* Текст поверх оранжевой заливки: почти чёрный даёт контраст 9.2:1 */ --color-on-accent: #ffffff; /* Отражения */ --color-success: #4ade80; --color-error: #ff6b5a; --color-info: #5b9cf5; /* Карточки и поверхности — градации кинозала */ --color-card: #141425; --color-card-hover: #1e1e32; --color-surface-2: #191930; --color-surface-3: #141425; --color-surface-deep: #0a0a14; /* Границы */ --color-border: rgba(255, 255, 255, 0.1); --color-border-soft: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.18); /* Скроллбар — нейтрально-серый, без акцента: полоса прокрутки не должна спорить с контентом. */ --scrollbar-thumb: rgba(255, 255, 255, 0.22); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.38); /* Glass — чуть теплее, чем фон */ --glass-bg: rgba(20, 20, 37, 0.94); --glass-border: rgba(255, 255, 255, 0.1); --glass-blur: 20px; /* Зоны «кинозала» — верхняя полоса и промо-зона. Они остаются чёрными даже в светлой теме (эффект тёмного зала при дневном свете), поэтому их цвета определены здесь и не переопределяются в [data-theme="light"]. */ --color-dark-bg: #0a0a14; --color-dark-surface: #141425; --color-dark-surface-deep: #0a0a14; --color-dark-text: #86868b; --color-dark-text-soft: #d2d2d7; --color-dark-text-bright: #f5f5f7; --color-dark-border: rgba(255, 255, 255, 0.12); /* Плашки поверх изображений (бейджи, возраст, оверлей карточки) — тёмные в обеих темах, как плёнка поверх постера. Не переопределяются в [data-theme="light"]. */ --color-overlay: rgba(0, 0, 0, 0.72); --color-overlay-strong: rgba(0, 0, 0, 0.92); /* --- Поверхность карточки --- Один язык для всех карточных поверхностей проекта. Раньше их было пять и они расходились: .lb-shortstory — радиус lg и тень card, .card — радиус md без тени, .reference-card — md и shadow-sm, .collection-card — lg и shadow-sm, .sidebar-film — sm без тени. Четыре радиуса и три тени на одну сущность — это и создавало ощущение, что страницы делали разные люди. */ --card-radius: 12px; --card-radius-sm: var(--radius-md); --card-border: 1px solid var(--color-border); --card-bg: linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface) 100%); /* Внутренняя светлая кромка отделяет карточку от фона мягче, чем вторая рамка: край читается, но композиция не утяжеляется. */ --card-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.03); --card-shadow-hover: var(--shadow-card), 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); --card-border-hover: rgba(var(--color-accent-rgb), 0.35); /* Подъём при наведении одинаковый у всех карточек: разные величины читаются как разное поведение и ломают ощущение одного продукта. */ --card-lift: translateY(-4px); /* --- Типографика --- */ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Inter", sans-serif; --font-base: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Inter", sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", monospace; /* Мелкие ступени фиксированные: подпись под постером не должна расти вместе с экраном, иначе на большом мониторе интерфейс выглядит увеличенным, а не просторным. */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; /* Крупные ступени текучие. Раньше каждый заголовок задавался жёстким значением, а потом переопределялся в медиазапросах — отсюда 49 кеглей мимо шкалы и 429 строк переопределений в одном мобильном блоке. clamp() снимает эту работу: размер сам идёт за шириной экрана, и правило нужно ровно одно. */ /* Крупные ступени — адаптивные через clamp(). h1: clamp(24px,5vw,48px), h2: clamp(20px,4vw,36px), h3: clamp(18px,3vw,28px), body: clamp(14px,2.5vw,18px). */ --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.75rem); --text-xl: clamp(1.25rem, 1.125rem + 0.625vw, 2.25rem); --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 3rem); --text-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 3rem); /* Роли: display= film title (h1), title= page title (h1), heading= section title (h2), lg= card title (h3). */ --text-display: var(--text-3xl); --text-title: var(--text-2xl); --text-heading: var(--text-xl); /* Body text: clamp(14px, 2.5vw, 18px) для адаптивности */ --text-body: clamp(0.875rem, 0.85rem + 0.125vw, 1.125rem); /* Интерлиньяж и трекинг — тоже система. Их не было вовсе: в коде жило 20 разных значений line-height (1.4, 1.45 и 1.5 неразличимы глазом, но были тремя отдельными решениями) и 14 значений letter-spacing, из них шесть — для одной и той же задачи, подписей заглавными. */ --leading-tight: 1.15; /* крупные заголовки */ --leading-snug: 1.3; /* названия карточек, плотные списки */ --leading-normal: 1.5; /* интерфейсный текст */ --leading-relaxed: 1.7; /* описания и статьи */ --tracking-tight: -0.02em; /* крупные заголовки — иначе рыхлые */ --tracking-normal: 0; --tracking-wide: 0.08em; /* подписи ЗАГЛАВНЫМИ */ /* Совместимость: старое имя, пока не вычищены места использования. */ --line-height-sm: var(--leading-snug); /* --- Отступы (8px шаг) --- */ /* Микро-шаг 2px — только для точечных подгонок в плотных списках */ --space-0: 0.125rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; /* 16px mobile */ --space-5: 1.25rem; /* 20px */ --space-6: 2rem; /* 32px tablet */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px desktop */ --space-10: 4rem; /* 64px */ --space-12: 5rem; /* 80px */ --space-16: 8rem; /* 128px */ --space-20: 10rem; /* 160px */ /* --- Скругления: три значения --- Было двенадцать: пять токенов и семь чисел по месту, из которых три — прямые дубли токенов. Разные скругления у соседних элементов читаются как разные системы, собранные разными людьми. Старые имена оставлены псевдонимами: они разбросаны по 152 объявлениям, и переписывать каждое ради переименования — работа без результата. */ --radius-sm: 6px; /* мелкие контролы: чипы, поля, бейджи */ --radius-md: 12px; /* кнопки и небольшие панели */ --radius-lg: 20px; /* карточки и крупные поверхности */ --radius-full: 9999px; --radius-xs: var(--radius-sm); /* --- Тени: две --- Было 69 различных значений на 137 объявлений — то есть почти каждая тень принималась как отдельное решение. Тень отвечает на один вопрос: предмет лежит на поверхности или висит над ней. Ответов ровно два. Заодно уходит подсветка акцентом: она висела на логотипе, поле поиска, чипах, кнопках, аватаре и карточках — на главной светились шесть элементов сразу, и ни один не был важнее другого. */ --shadow-raise: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.55); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: var(--shadow-raise); --shadow-card: var(--shadow-raise); --shadow-glass: var(--shadow-overlay); --shadow-accent: var(--shadow-raise); /* --- Фокус --- Одно кольцо на весь проект. Было пять разных: 1px, 2px с прозрачностью 0.08, 3px двух видов и 4px — то есть попадание клавиатурой в разные элементы выглядело по-разному, будто это разные сайты. Двойное кольцо (сначала цветом фона, потом акцентом) читается и на тёмной поверхности, и на светлой, и поверх постера. */ --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); /* --- Слои --- Раньше значения стояли числами по месту (10 у шапки, 40 у меню, 50 у нижней панели, 3 и 2 внутри карточек), и понять, что выше чего, можно было только grep'ом по всему CSS. */ --z-raised: 1; /* элемент внутри карточки: бейдж, кнопка поверх постера */ --z-sticky: 50; /* нижняя панель, sticky-элементы */ --z-header: 100; /* шапка сайта */ --z-dropdown: 200; /* выпадающие списки, поиск, сортировка */ --z-drawer: 250; /* выдвижное меню перекрывает нижнюю панель */ --z-overlay: 300; /* лайтбокс, модальный трейлер */ --z-toast: 400; /* уведомление видно поверх всего */ --z-decorative: 9999; /* декоративные слои (зерно, свечение) */ /* --- Анимации --- */ /* Длительности подогнаны под рекомендации UI/UX Pro Max: — hover 150–200ms (быстрое ощущение отклика) — переходы 200–300ms (стандарт) — выход быстрее входа (exit-faster-than-enter) */ --transition-fast: 200ms ease; --transition: 300ms ease; --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); --transition-exit: 200ms cubic-bezier(0.4, 0, 1, 1); /* --- Макет — высота шапки измерена по факту: 60px min-height + 8px padding сверху и снизу (.site-header > .container) = 67px. От этого числа зависит sticky-позиция топнава и scroll-padding. --- */ --container-width: 1080px; --header-height: 67px; --touch-target: 44px; --bottom-nav-height: 68px; /* --- Сайдбар и карточки — геометрия reference --- reference: wrapper 976px, content 640px, sidebar 331px, movie__card 200px poster gap 20px LumiBox: 1080px container, sidebar 300px, content ~ 760px, poster 200px gap 20px Сохраняем LumiBox branding, только размеры как reference. */ --sidebar-width: 300px; --sidebar-gap: 20px; --card-gap: 20px; --card-padding: 16px; --film-card-gap: 16px; --film-card-section-gap: 20px; /* Выделение текста — цвет кинопроектора */ --color-selection-bg: rgba(var(--color-accent-rgb), 0.28); --color-selection-text: inherit; } /* ---------- Светлая тема ---------- Это основной вид сайта: разметка отдаёт data-theme="light" сразу, а тёмная включается переключателем. Механика осталась прежней — светлая тема переопределяет токены, — потому что на ней держатся 34 точечных правила в семи файлах; инвертировать их ради переименования значило бы переписать всё оформление ради ноля видимой разницы. Палитра нейтральная: фон #f5f5f7, текст #1d1d1f, вторичный #86868b. Никакого синего подмеса — цвет на странице должен быть только у постера и у главного действия. */ [data-theme="light"] { --color-bg: #f5f5f7; --color-surface: #ffffff; --color-surface-hover: #ebebed; --color-border: rgba(0, 0, 0, 0.08); --color-text: #1d1d1f; --color-text-muted: #6c6c82; --color-text-dim: #6c6c82; --color-text-soft: #424245; --color-text-bright: #1d1d1f; --color-text-strong: #000000; --color-text-faint: #aeaeb2; --color-text-shadow: rgba(255, 255, 255, 0.55); /* Кинематографичный красный: #e94560 на белом даёт контраст ~4.5:1 — проходит AA для текста обычного размера. */ --color-accent: #e94560; --color-accent-rgb: 233, 69, 96; --color-accent-hover: #f05a75; --color-accent-soft: #ff8a9e; --color-accent-deep: #c73050; --color-accent-dim: rgba(var(--color-accent-rgb), 0.08); --color-accent-glow: rgba(var(--color-accent-rgb), 0.06); --color-on-accent: #ffffff; --color-card: #ffffff; --color-card-hover: #f5f5f7; --color-surface-2: #ffffff; --color-surface-3: #f5f5f7; --color-surface-deep: #ebebed; --color-border-soft: rgba(0, 0, 0, 0.05); --color-border-strong: rgba(0, 0, 0, 0.16); --scrollbar-thumb: rgba(0, 0, 0, 0.22); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.38); --glass-bg: rgba(245, 245, 247, 0.94); --glass-border: rgba(0, 0, 0, 0.08); /* Тени светлой темы — те же две роли, только мягче: на светлом фоне тень той же силы читается как грязь. */ --shadow-raise: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 20px rgba(16, 24, 40, 0.06); --shadow-overlay: 0 8px 32px rgba(16, 24, 40, 0.12); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-md: var(--shadow-raise); --shadow-card: var(--shadow-raise); --shadow-glass: var(--shadow-overlay); --shadow-accent: var(--shadow-raise); } /* ---------- Базовый слой типографики ---------- */ /* Заголовки сайта — рабочий шрифт Inter, без декора. Вес и трекинг делают работу декоративного шрифта: крупные заголовки жирные и плотные. Размеры берутся из ролей, а не из чисел: h1 и h2 наследуют ступени шкалы ниже, и правка кеглей живёт в одном файле. */ h1, h2, h3.section__title, .film-hero__name { font-family: var(--font-base); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: none; text-wrap: balance; } h1 { font-size: var(--text-title); } h2 { font-size: var(--text-heading); } /* Названия карточек и мета-заголовки — тем же шрифтом: на мелком кегле он читается лучше декоративного. */ h3:not(.section__title) { font-family: var(--font-base); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); text-transform: none; } body { font-family: var(--font-base); line-height: var(--leading-normal); }