/* ── Шрифты студии ─────────────────────────────────────────────────── 06.09.2026. До этого дня на сайте не было НИ ОДНОГО своего шрифта: всё системное. Логотип XSL Pictures — тяжёлый сериф с металлической обводкой и короной, а страницы были набраны нейтральным Times и Inter. Бренд обещал королевскую студию, интерфейс отдавал панелью мониторинга, и никакое стекло поверх этот разрыв не закрывало. Основа — FreeSerif: им набран сам логотип, и выбор сделан владельцем 06.09.2026 из шести кандидатов, показанных рядом с гербом. XCourier Prime — НАШ сценарный шрифт, лежит с 4 августа и не использовался нигде. У киностудии цифры набираются шрифтом сценария. ─────────────────────────────────────────────────────────────────── */ /* Выбор владельца 06.09.2026: основа FreeSerif, дополнительный XCourier Prime. FreeSerif стоял и раньше, но КАК СИСТЕМНЫЙ: на его машине он не установлен, и браузер молча подставлял Times. Отдаём файлом — тогда страница выглядит одинаково везде. Сабсет с 3.6 МБ до 36 КБ. */ @font-face{font-family:"XSL Serif";font-weight:400;font-display:swap; src:url("/static/freeserif.woff2") format("woff2")} @font-face{font-family:"XSL Serif";font-weight:700;font-display:swap; src:url("/static/freeserif-bold.woff2") format("woff2")} @font-face{font-family:"XSL Serif";font-weight:400;font-style:italic;font-display:swap; src:url("/static/freeserif-italic.woff2") format("woff2")} @font-face{font-family:"XCourier Prime";font-weight:400;font-display:swap; src:url("/static/xcourier-prime.woff2") format("woff2")} @font-face{font-family:"XCourier Prime";font-weight:700;font-display:swap; src:url("/static/xcourier-prime-bold.woff2") format("woff2")} @font-face{font-family:"XCourier Prime";font-weight:400;font-style:italic;font-display:swap; src:url("/static/xcourier-prime-italic.woff2") format("woff2")} /* ============================================================ XSL Pictures — design tokens Источник правды: BRAND.md. Не редактировать значения в обход него. Подключать первым, до стилей компонентов. ============================================================ */ :root { /* --- Ядро палитры ------------------------------------------------ */ --xsl-violet: #6800FF; --xsl-platinum: #E5E4E2; --xsl-metal: #ACACAC; --xsl-void: #0B0B0D; --xsl-surface: #141417; --xsl-surface-2: #1C1C21; --xsl-sunk: #0D0D10; /* ниже фона: колодцы, шкалы */ /* --- Фиолетовая шкала -------------------------------------------- 700 — фирменный. Контраст на #101010 = 2.74:1 → НЕ для текста. 600 — минимально допустимый для мелкого текста (4.79:1). */ --violet-200: #E4D4FF; /* 12.28:1 — светлейший, для акцента на тёмном */ --violet-300: #CAA6FF; /* 9.43:1 */ --violet-400: #BB8CFF; /* 7.53:1 */ --violet-500: #AB73FF; /* 6.01:1 */ --violet-600: #9C59FF; /* 4.79:1 */ --violet-700: #6800FF; /* 2.74:1 — только заливки и свечение */ --violet-800: #4A00B8; --violet-900: #290066; /* --- Текст -------------------------------------------------------- */ --text-primary: #EDEBF0; /* 16.61:1 */ --text-secondary: #A8A8B2; /* 8.34:1 */ /* 22.08: пять страниц держали здесь #71717D — 4.08:1 на фоне и 3.52:1 на приподнятой панели. Им набраны ВСЕ мелкие подписи сайта, а порог для мелкого текста 4.5. Поднято до первого проходящего значения с тем же холодным сдвигом. */ --text-muted: #858591; /* 5.39:1 на фоне, 4.66:1 на панели */ --text-disabled: #686872; /* 3.08:1 — только декор и крупное */ --text-on-violet: #FFFFFF; /* 6.95:1 на --violet-700 */ /* --- Состояния ---------------------------------------------------- Семантика отдельно от акцента: фиолетовый — это марка, а зелёный, жёлтый и красный означают «сошлось», «внимание», «упало». Смешивать их нельзя: тогда любое сообщение читается как фирменное оформление. До 22.08 эти три значения были продублированы на четырёх страницах. */ --ok: #3DDC97; --warn: #FFC53D; --bad: #FF4438; /* --- Линии -------------------------------------------------------- */ /* Линия с фиолетовым отливом, а не нейтральная: марка фиолетовая, и серая сетка рядом с ней читается как чужая. */ /* Границы. 8 сентября 2026 замерено: было 1.20:1 и 1.67:1 против нормы 3:1 для краёв управляемых элементов — карточки по всему сайту читались как обрезанные без рамки. Переведены на платину: она и норму берёт с запасом, и это то самое «благородство кромкой», а не заливкой. Замер по формуле WCAG на трёх фонах: void, surface, surface-2. */ --line: rgba(251, 250, 247, 0.20); /* 1.9:1 — тихая перегородка */ --line-strong: rgba(251, 250, 247, 0.42); /* 3.94:1 — край карточки */ /* --- Металл (градиент, не цвет) ----------------------------------- */ --metal-gradient: linear-gradient( 170deg, #6E6E6E 0%, #ACACAC 18%, #ECECEC 38%, #FFFFFF 48%, #B8B8B8 62%, #8F8F8F 80%, #4A4A4A 100% ); /* --- Свечение ----------------------------------------------------- */ --glow-sm: 0 0 24px -6px rgba(104, 0, 255, 0.45); --glow-md: 0 0 48px -8px rgba(104, 0, 255, 0.55); --glow-lg: 0 0 120px -20px rgba(104, 0, 255, 0.65); /* --- Гарнитуры ---------------------------------------------------- */ --font-display: "XSL Serif", "FreeSerif", "Liberation Serif", serif; /* Основа — FreeSerif: выбор владельца, 6 сентября 2026 («основа - Free Serif, доп. Xcourier prime»). Гротеск Golos/Inter оставался в теле страниц, и половина сайта набиралась не фирстилем, а системным шрифтом — из-за этого «совмещение» читалось как чужая вкладка. */ --font-body: "XSL Serif", "FreeSerif", "Liberation Serif", serif; /* Метки, статусы, таймкод — сценарной машинописью, а не безликим моно. */ --font-mono: "XCourier Prime", "JetBrains Mono", ui-monospace, monospace; --font-титр: "XCourier Prime", ui-monospace, monospace; /* Металл короны: холодное серебро с бликом. Прежний «металл» #ACACAC был просто серым текстом и материалом не читался. */ --металл: #C9C9D4; --металл-блик: #F2F2F7; --металл-тень: #6E6E7A; /* Королевский фиолетовый взят пипеткой с логотипа, он насыщеннее прежнего #6800FF и не уходит в синеву. */ --царский: #7B2BFF; /* Платина. 7 сентября 2026, слово владельца: «добавь благородство платины». Платина — не светлое серебро: она холоднее к белому, но БЕЗ синевы, блик у неё узкий и высокий, а тень уходит не в серый, а в тёплый графит. Поэтому три ступени, а не одна заливка: край (волосяная линия, почти белая), тело и тень. Цвет здесь работает материалом — им нельзя красить текст абзаца, только кромки, цифры и титры. */ --платина-край: #FBFAF7; --платина: #D5D7DB; --платина-тело: #A9ADB5; --платина-тень: #6B6F78; /* Снимок платины, а не градиент. Градиент даёт ровную пластмассу; у настоящей платины блик узкий, а в тени зерно. Тот же файл, что держит .x-титр, — объявлен здесь один раз, чтобы титр и факт дня были из одного материала. */ --платина-снимок: url("/static/platina.webp"); --платина-грань: rgba(251,250,247,.34); --платина-волос: rgba(251,250,247,.14); /* Кант органов управления. Общий --line-strong даёт на фоне контраст 1,67 к 1 при норме 3 к 1 для границы контрола: кнопки «нужен ответ» и «не надо» читались пустыми прямоугольниками, глаз находил их по тексту, а не по форме. Проверено расчётом: при .45 выходит 2,78 — не хватает, при .55 — 3,59. */ --кант-упр: rgba(202,166,255,.55); /* --- Кегли -------------------------------------------------------- */ --fs-display: clamp(3.5rem, 8vw, 9rem); --fs-h1: clamp(2.5rem, 5vw, 5rem); --fs-h2: clamp(2rem, 3.5vw, 3.25rem); --fs-h3: clamp(1.375rem, 2vw, 1.75rem); --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-utility: 0.75rem; /* --- Интерлиньяж --------------------------------------------------- */ --lh-display: 0.95; --lh-heading: 1.1; --lh-body: 1.6; --lh-small: 1.5; /* --- Трекинг ------------------------------------------------------- */ --tr-display: 0.08em; --tr-heading: 0.04em; --tr-utility: 0.16em; --tr-button: 0.10em; --tr-body: 0; /* --- Отступы (шаг 4) ----------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; --section-y: var(--s-9); /* мобильный ритм секций */ --container: 1240px; --gutter: var(--s-5); --page-pad: var(--s-5); /* --- Радиусы (намеренно острые) ------------------------------------ */ --r-sm: 2px; --r-md: 4px; --r-pill: 999px; /* --- Движение ------------------------------------------------------- */ --d-micro: 120ms; --d-ui: 240ms; --d-reveal: 480ms; --d-cine: 900ms; --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* --- Слои ------------------------------------------------------------ */ --z-grain: 9999; --z-nav: 1000; --z-modal: 1100; --z-cursor: 10000; } @media (min-width: 1024px) { :root { --section-y: var(--s-10); --gutter: var(--s-6); --page-pad: var(--s-8); } } /* ============================================================ Базовый слой ============================================================ */ html { lang: ru; } body { background: var(--xsl-void); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: var(--lh-heading); letter-spacing: var(--tr-heading); } h1 { font-size: var(--fs-h1); letter-spacing: var(--tr-display); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } .utility { font-family: var(--font-mono); font-size: var(--fs-utility); text-transform: uppercase; letter-spacing: var(--tr-utility); color: var(--text-muted); } /* Металлическая фаска — не более одного элемента на экран */ .metal { background: var(--metal-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } :focus-visible { outline: 2px solid var(--violet-500); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 200ms !important; scroll-behavior: auto !important; } /* Параллакс, частицы, магнитный курсор и загрузку героя дополнительно отключить в JS по этому же медиазапросу. */ }