/* Фирменные токены. Значения взяты из экспорта доски Figma «Ecom Open Air» — это обновлённые гайдлайны, присланные клиентом взамен прежних. Правится ТОЛЬКО этот файл: ни один фирменный цвет не должен быть захардкожен в других местах. ОСНОВНЫЕ ЦВЕТА — «для фонов, крупных заливок, плашек и типографики»: Light Grey #0F141E #191E28 #5A6989 #C3CDE1 #EBEFF5 Electric Violet #230055 #5A00D2 #7D32FF #D7BEFF #F0EBFF Ultramarine #0F0055 #3700F0 #4B3CFF #B4C3FF #E6EBFF Lime #94A100 #B4C400 #E1FA00 #E8FF75 #F2FFC8 ДОПОЛНИТЕЛЬНЫЕ («в очень малом проценте к основным»): Aqua #009191 #00B4B4 #00FAFF #5AFAFF #BEFFFF Sea Green #00967D #00BEA5 #00EBC3 #32FFDC #69FFE6 Бирюзовый (Sea Green) и розовый (Rose Bonbon) в новых гайдлайнах переехали в дополнительные и помечены «используются в очень малом проценте» — поэтому в интерфейсе игры их больше нет. */ /* Гарнитуры по обновлённому гайдлайну: YS Compressed Heavy для заголовков (раньше был YS Display), YS Text для наборного текста. Файлы лежат локально — на стенде интернета нет. font-display: block — лучше показать текст на кадр позже, чем моргнуть системным шрифтом на глазах у зрителей. */ @font-face { font-family: 'YS Compressed'; src: url('../../assets/fonts/YSCompressed-Heavy.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: block; } @font-face { font-family: 'YS Compressed'; src: url('../../assets/fonts/YSCompressed-HeavyItalic.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: block; } @font-face { font-family: 'YS Text'; src: url('../../assets/fonts/YS-Text-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: 'YS Text'; src: url('../../assets/fonts/YS-Text-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: 'YS Text'; src: url('../../assets/fonts/YS-Text-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: block; } :root { /* --- Бренд --- */ --brand-primary: #4B3CFF; /* Ultramarine — основной акцент */ --brand-primary-dark: #3A2DD6; --brand-violet: #7D32FF; /* Electric Violet — второй акцент */ --brand-violet-light: #D7BEFF; --brand-on-primary: #FFFFFF; /* Aqua — акцент экранов. Взят из дополнительной палитры по просьбе клиента: он хотел бирюзовый «как в логотипе», а Sea Green читался слишком зелёным. Aqua — чистый циан, ближе к тому, как знак воспринимается целиком (в нём бирюза уходит в синий градиентом). */ --brand-aqua: #00FAFF; --brand-aqua-deep: #00B4B4; --brand-lime: #E1FA00; /* Lime — новый акцент гайдлайна */ --brand-lime-dark: #B4C400; --brand-lime-light: #F2FFC8; --brand-ink: #191E28; /* Light Grey, тёмный конец шкалы */ --brand-ink-deep: #0F141E; /* самый тёмный тон новой палитры */ --brand-paper: #FFFFFF; /* Логотип внутри SVG нарисован цветом #1B00F6 — это его собственный цвет, менять его нельзя, он не является токеном палитры. */ /* --- Сцена игры --- */ /* Обновлённые гайдлайны заметно темнее прежних: основа — почти чёрный #0F141E, на нём живут яркие заливки. */ --stage-bg: #0F141E; --stage-veil: rgba(15, 20, 30, 0.88); --stage-text: #FFFFFF; --stage-muted: rgba(195, 205, 225, 0.72); /* Light Grey #C3CDE1 */ /* --- Цвета игроков --- Клиент: «цвета где розовый нужно будет поменять на бирюзовый». Бирюзовый (Sea Green) встаёт ровно на место розового — второму игроку. Первый игрок забирает Electric Violet из основной палитры: два зелёных рядом (лайм и бирюза) различались бы хуже, а игрок обязан узнавать свою карточку мгновенно, боковым зрением, на бегу. Пара противоположна и по тону, и по светлоте, поэтому читается даже при нарушениях цветовосприятия. Плюс цвет не единственный признак: у каждого игрока есть номер и стрелка ▲/▼. Оговорка на будущее: в обновлённых гайдлайнах Sea Green переведён в дополнительные цвета, «в очень малом проценте». Здесь он стоит по прямой просьбе клиента и перекрывает это правило. */ --player-1: #7D32FF; /* Electric Violet, основная палитра */ --player-1-soft: #F0EBFF; --player-2: #00EBC3; /* Sea Green — бирюзовый, вместо розового */ --player-2-soft: #BEFFF0; /* --- Типографика --- Обновлённый гайдлайн: YS Compressed Heavy для заголовков, YS Text (Bold / Medium / Regular) для наборного текста. Файлы подключены выше через @font-face, лежат в assets/fonts. Системный стек оставлен запасным на случай, если файл не прочитается. YS Compressed заметно уже прежнего YS Display — в заголовки помещается больше символов, кегли под него перепроверены. */ --font-brand: 'YS Text', 'Yandex Sans Text', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'YS Compressed', 'YS Text', 'Yandex Sans Display', var(--font-brand); /* Кегли под 1920×1080, экран смотрят с 2–3 метров — крупно */ --fs-hero: 104px; --fs-title: 64px; --fs-lead: 38px; --fs-body: 26px; --fs-caption: 18px; --fs-legal: 15px; /* --- Ритм --- */ --gap-xs: 8px; --gap-sm: 16px; --gap-md: 28px; --gap-lg: 48px; --gap-xl: 80px; --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* --- Фирменная графика --- 3D-рифлёная поверхность из раздела «Графика» гайдлайна. Тёмная, поэтому белый текст поверх неё читается без дополнительной подложки. */ --brand-backdrop: url('../../assets/brand/backdrop.jpg'); /* --- Тема текущего магазина --- Значения подставляет feed.js из shops.js. Это оформление ВЫМЫШЛЕННЫХ витрин сторонних ритейлеров — к гайдлайнам Ритейл Медиа отношения не имеет и намеренно от них отличается. */ --shop-bg: #FFFFFF; --shop-surface: #F2F3F7; --shop-text: #0A0A0A; --shop-muted: #7A7A85; /* Заглушка до подстановки темы: нейтральный серый, намеренно не фирменный и не принадлежащий ни одной из пяти витрин. На экран не попадает — feed.js переписывает --shop-accent/--shop-promo темой магазина ещё до первого кадра. Раньше здесь стоял #6B4EFF из прежней фирменной палитры: цвета в проекте давно другие, а файл продолжал показывать след старой системы. Белый текст на этом сером даёт 8,7:1 — правило «текст на акценте всегда белый» не ломается даже в невозможном случае, если тему не подставят. */ --shop-accent: #4A4A55; --shop-promo: #4A4A55; --shop-header-bg: #000000; --shop-header-text: #FFFFFF; }