/* ========================================================================== Марго Квиз — Design System v2 «Неон-сцена» tokens.css — единый источник правды для всех поверхностей (ТВ / PWA / админ) ФИШКА СИСТЕМЫ: эмоция Марго = глобальный акцент. JS ставит data-emotion="sarcasm|praise|joke|flirt|motivation|provocation|neutral" на корневой элемент сцены — весь UI плавно перетекает в цвет эмоции (свечения, борта, градиенты). Хью анимируется через @property (см. motion.css). ========================================================================== */ :root { /* ---------- Эмоция: динамический акцент (по палитре MargOrb) ---------- */ /* Покой = фирменный пурпур. Хью/сат/лайт — раздельно, чтобы лерпились. */ --emotion-h: 262; --emotion-s: 78%; --emotion-l: 62%; /* Производные — использовать ТОЛЬКО их, не сырые hsl в компонентах */ --emotion: hsl(var(--emotion-h) var(--emotion-s) var(--emotion-l)); --emotion-soft: hsl(var(--emotion-h) var(--emotion-s) 74%); --emotion-deep: hsl(var(--emotion-h) var(--emotion-s) 46%); --emotion-glow: hsl(var(--emotion-h) var(--emotion-s) var(--emotion-l) / 0.35); --emotion-faint: hsl(var(--emotion-h) var(--emotion-s) var(--emotion-l) / 0.12); --emotion-border: hsl(var(--emotion-h) calc(var(--emotion-s) - 20%) 50% / 0.45); /* Чем писать ПОВЕРХ заливки цветом эмоции. Правило: заливать текстовую поверхность можно только --emotion-soft — тогда тушь даёт от 7,09 : 1 (нейтраль, худший случай) до 14,5 (похвала). Поверх --emotion та же тушь даёт 4,17 — ниже AA, а --text-hi поверх похвалы вообще 1,41. */ --emotion-ink: hsl(var(--emotion-h) 60% 8%); /* ---------- Статика: фон и поверхность ---------- */ --bg-0: #070914; /* самый глубокий — за авророй */ --bg-1: #0a0e1a; /* базовый фон (совместим с текущим) */ --bg-2: #0e1326; /* приподнятый */ /* Стекло — панели поверх живого фона */ --glass-bg: rgba(16, 20, 40, 0.55); --glass-bg-heavy: rgba(14, 18, 36, 0.78); --glass-border: rgba(150, 165, 220, 0.14); --glass-blur: 18px; /* ---------- Текст ---------- */ --text-hi: #eef2ff; --text-mid: #9aa6cc; --text-dim: #6f7da6; /* 4,73 : 1 к --bg-1; было #5c6a8f — 3,59, ниже AA, а работает он капс-лейблами, то есть мелким */ /* ---------- Статусы (единые имена для ВСЕХ поверхностей) ---------- */ --ok: #4ade80; --ok-glow: rgba(74, 222, 128, 0.35); --err: #ef4444; --err-glow: rgba(239, 68, 68, 0.35); --warn: #fbbf24; --gold: #ffd700; --silver: #c8cede; --bronze: #cd7f32; /* Бренд-константа (не зависит от эмоции — для логотипа, ссылок) */ --brand: #7c3aed; --brand-soft: #a78bfa; /* ---------- Типографика ---------- */ --font-display: 'Unbounded', 'Segoe UI', sans-serif; /* заголовки, табло, цифры-герои */ --font-body: 'Onest', 'Segoe UI', system-ui, sans-serif; --font-num: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; /* таймеры, счёт, PIN */ /* Шкала под ТВ-дистанцию (грубее и крупнее обычного веба) */ --fs-hero: clamp(56px, 6.5vw, 104px); --fs-h1: clamp(36px, 3.6vw, 56px); --fs-h2: clamp(24px, 2.2vw, 34px); --fs-h3: 22px; --fs-body: 19px; --fs-small: 15px; --fs-label: 13px; /* капс-лейблы */ --ls-label: 0.14em; /* трекинг капс-лейблов */ /* ПОЛЫ АВТОПОДГОНКИ — НЕ СТУПЕНИ ШКАЛЫ. Шкала у каждой поверхности своя и вся целиком крупнее этих двух чисел; здесь — предел, ниже которого автоподгонка (fit-text.js) не опускает текст НИКОГДА, на какой бы поверхности он ни стоял. Поэтому они и объявлены один раз в :root и не переопределяются: пол не масштабируется вместе со шкалой, он упирается в физику глаза. --fs-micro — подпись внутри окна команды (вторая строка, читается с 1,5 м: колонка команд стоит у самого края экрана); --fs-nano — подпись внутри клетки стола (её читают, подойдя, или узнают по цвету и месту, а не по буквам). До этой пары те же числа стояли литералами в разметке трёх файлов (scene-kit.js, metka.js, seify.js) — долг таска 17. */ --fs-micro: 16px; --fs-nano: 14px; /* ---------- Спейсинг (шаг 4) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ---------- Радиусы (единая шкала на все поверхности) ---------- */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 999px; /* ---------- Тени / свечения ---------- */ --shadow-panel: 0 18px 50px rgba(3, 5, 14, 0.55); --shadow-pop: 0 8px 28px rgba(3, 5, 14, 0.45); --glow-emotion: 0 0 42px var(--emotion-glow); --glow-emotion-soft: 0 0 24px var(--emotion-faint); /* Свечение статусов. --ok-glow и --err-glow выше — это ЦВЕТ с альфой; здесь готовая тень с радиусом, как у эмоции. Ступеней три, а не две: у эмоции светится элемент, у статуса — от точки 8 px до плашки во весь слот, и один радиус на всё даёт либо грязь вокруг точки, либо незаметный ореол вокруг плашки. soft 16px — точка, бейдж, мелкий индикатор; базовый 42px — элемент: вариант ответа, кнопка (совпадает с --glow-emotion); strong 60px — плашка вердикта, оверлей во весь экран. */ --glow-ok: 0 0 42px var(--ok-glow); --glow-ok-soft: 0 0 16px var(--ok-glow); --glow-ok-strong: 0 0 60px var(--ok-glow); --glow-err: 0 0 42px var(--err-glow); --glow-err-soft: 0 0 16px var(--err-glow); --glow-err-strong: 0 0 60px var(--err-glow); } /* ---------- ТВ-сцена: типографика в координатах 1920×1080 ---------- .mk-stage масштабируется transform'ом, поэтому размеры внутри — px от макета 1920 (никаких vw/clamp — они меряют окно, а не сцену). */ .mk-stage { /* Шкала посчитана под зал ДО 4 МЕТРОВ (PRODUCT.md:24) и под самый мелкий экран, какой реально могут поставить, — 43 дюйма. Там 1 px макета = 0,496 мм, капитель ≈ 0,7 кегля, комфортное чтение — капитель не мельче 1/200 дистанции. Отсюда пол: 58 px дотягивает ровно до 4 м. ПОЛ ЧТЕНИЯ ЗАЛА — --fs-h2. Всё, что ниже него, вспомогательное: на --fs-h3, --fs-body, --fs-small и --fs-label нельзя вешать ничего, что зал ОБЯЗАН прочитать, — они рассчитаны на 2–3 метра и ближе. Дистанции по каждой ступени — в static/design/preview/tokens.html. */ /* ЗАЛ НЕ ДЕЛАЕТСЯ ТЕКУЧИМ, И ЭТО НЕ УПУЩЕНИЕ. Сцена спроектирована в координатах 1920×1080 и масштабируется ЦЕЛИКОМ — одним transform: scale() под фактический размер экрана. Это лучше текучей шкалы: пропорции кадра, длины строк и переносы остаются ровно теми, что приняли на приёмке, — на любом телевизоре от 43 до 85 дюймов. Текучая шкала переверстала бы кадр на каждой диагонали, и проверенное «вопрос ложится в четыре строки» перестало бы быть правдой. Капитану и оператору масштабировать целиком нельзя: там ввод и плотный интерфейс, поэтому у них шкала текучая (cqi). */ --fs-hero: 128px; /* 8,9 м на 43" — титул, счёт-герой, подиум */ --fs-h1: 84px; /* 5,8 м — текст вопроса, название тура */ --fs-h2: 58px; /* 4,0 м — ПОЛ: команда, очки, вердикт */ --fs-h3: 40px; /* 2,8 м — подписи блоков */ --fs-body: 30px; /* 2,1 м — реплика Марго, тикер: не обязательное */ --fs-small: 22px; /* 1,5 м — служебное */ --fs-label: 24px; /* 1,7 м — капс-лейбл над блоком */ /* МЕЖСТРОЧНИК ОБЪЯВЛЕН ЯВНО — по двум причинам. Первая типографская: крупный кегль требует ПЛОТНОЙ выключки, 1,5 на 84 px разваливает заголовок на несвязанные полосы. Вторая инженерная: без этой строки сцена наследует межстрочник страницы-хозяина, и одна и та же строка табло получалась 147 px на странице приёмки и 109 px в зале. Сцена владеет своей типографикой так же, как своим box-sizing. */ line-height: 1.25; /* ОХРАННОЕ ПОЛЕ КАДРА — ОДНО ЧИСЛО НА ВЕСЬ ЗАЛ. Владелец: «Нет охранной зоны для деталей ТВ. Все впритык. так не красиво». Так и было: колонка ведущей отбивалась от кромки на 32, экраны зала на 48, сцены снова на 32, а между колонкой и слотом не оставалось ничего, кроме паддинга колонки, — плашка тура вставала вплотную к Марго. Три разных числа в одном кадре читаются не как ритм, а как небрежность. Теперь число одно и живёт здесь, а не в файле каждого экрана. Им отбиваются ОБЕ детали кадра — колонка ведущей и слот экрана, — и его же хватает на зазор между ними: слот слева поля не имеет вовсе, зазор даёт правое поле колонки. Так ни одна деталь не стоит ближе --mk-guard ни к кромке кадра, ни к соседу. 48 — не выбор вкуса, а прежнее поле экранов зала (--sp-7), то есть то из трёх чисел, которое уже прошло приёмку. Заодно оно закрывает обрезку края телевизором (overscan): 48 px на 1920 — это 2,5 % стороны, ровно тот порог, за которым деталь начинает уезжать за физическую кромку панели. */ --mk-guard: 48px; /* Высота слота = кадр минус охранное поле сверху и снизу. Раньше 984 стояло числом в components.css (потолок .mk-question) и жило отдельной жизнью от полей: подвинули поле — потолок остался прежним, и панель вопроса вылезала ровно на разницу. Теперь одно следует за другим. */ --mk-slot-h: calc(1080px - var(--mk-guard) * 2); } /* ---------- Экран капитана: телефон в руке ---------- Своя шкала обязательна по той же причине, что и у сцены: базовая шкала в :root построена на clamp(...vw...) под ТВ. На телефоне 390 px эти clamp схлопываются в нижнюю границу, а на превью в окне ноутбука раздуваются — то есть один и тот же компонент выглядит по-разному там, где его смотрят, и там, где его принимают. Внутри .mk-captain размеры только в px. Дистанция чтения — 30–40 см, полутьма, действия секундами. Пол чтения — --fs-body 17 px (системный минимум комфортного набора на телефоне); всё, что мельче, служебное и не бывает единственным носителем смысла. */ .mk-captain { /* ШКАЛА ТЕКУЧАЯ И МЕРЯЕТ КОНТЕЙНЕР, А НЕ ОКНО. Единица cqi — процент ширины ближайшего контейнера запроса (им объявлен сам .mk-captain строкой container-type ниже). Почему не vw: в превью vw измерил бы окно браузера, и кадр телефона врал бы кеглем — той же ошибкой, из-за которой поверхностям вообще понадобились свои шкалы. База — телефон 390 px, у которого при полях 24 остаётся 342 содержимого; от него и считаны проценты. Границы clamp — это 360 и 430: самый узкий Android и самый широкий телефон, какие реально встречаются в зале. Шире 430 (планшет) шкала не растёт: экран капитана всё равно держат в руке. */ container-type: inline-size; --fs-hero: clamp(66px, 21.05cqi, 80px); /* 72 на 390 */ --fs-h1: clamp(40px, 12.87cqi, 49px); /* 44 */ --fs-h2: clamp(27px, 8.77cqi, 34px); /* 30 */ --fs-h3: clamp(20px, 6.43cqi, 25px); /* 22 */ --fs-body: clamp(16px, 4.97cqi, 19px); /* 17 */ --fs-small: clamp(13px, 4.09cqi, 16px); /* 14 */ --fs-label: clamp(11px, 3.51cqi, 13px); /* 12 */ /* Минимальная сторона зоны нажатия. Apple HIG даёт 44, Material — 48; здесь 56, потому что бьют большим пальцем, в полутьме, на скорость и один раз — промах по буззеру стоит вопроса. Растёт вместе со шкалой, но ниже 56 не опускается никогда: палец не уменьшается вместе с экраном. */ --tap: clamp(56px, 16.37cqi, 62px); /* Свой межстрочник по той же причине, что у сцены, но значение другое: здесь кегли мелкие и текст читают, а не считывают. */ line-height: 1.5; } /* ---------- Рабочее место оператора: ноутбук ---------- Шкала МЕЛЬЧЕ базовой, а не крупнее: зал читают с четырёх метров, оператор — с шестидесяти сантиметров, и ему нужна плотность, а не кегль. Нижняя граница экрана — 1366×768, поэтому вертикаль дороже горизонтали: чем компактнее строка ленты, тем больше игры видно без прокрутки. Своя шкала — по той же причине, что у сцены и телефона: базовая построена на clamp(…vw…) под ТВ, и на ноутбуке --fs-h1 раздувается до 52 px, то есть до кегля заголовка на постере внутри плотной рабочей панели. */ .mk-operator { /* Та же механика, что у капитана: cqi мерит контейнер, а не окно. База — ноутбук 1366 px, у которого при полях 12 остаётся 1342. Нижняя граница clamp — 1280 (самый узкий ноутбук, какой встречается), верхняя — рост не больше чем в 1,2 раза: на большом мониторе рабочая панель должна становиться просторнее, а не превращаться в плакат. */ container-type: inline-size; --fs-hero: clamp(37px, 2.98cqi, 48px); /* 40 на 1366 */ --fs-h1: clamp(26px, 2.09cqi, 34px); /* 28 */ --fs-h2: clamp(21px, 1.64cqi, 26px); /* 22 */ --fs-h3: clamp(16px, 1.27cqi, 20px); /* 17 */ --fs-body: clamp(14px, 1.12cqi, 18px); /* 15 */ --fs-small: clamp(12px, 0.97cqi, 15px); /* 13 */ --fs-label: clamp(11px, 0.82cqi, 13px); /* 11 */ /* Мышь точнее пальца, но оператор целится не глядя — 36 px против 56 у капитана. Ниже не опускать: под рукой мышь ноутбука, а не стола. */ --tap: clamp(36px, 2.68cqi, 44px); /* Плотнее, чем у капитана: экран оператора — плотная рабочая панель, и каждая лишняя десятая межстрочника стоит строки ленты. */ line-height: 1.45; } /* ---------- Мини-игра: ноутбук, за него садится капитан ---------- Четвёртая поверхность, и шкала у неё своя по тем же двум причинам, что у остальных: базовая :root построена на clamp(...vw...) под ТВ, а дистанция и способ ввода здесь другие, чем у оператора. ЧЕМ ИГРОК ОТЛИЧАЕТСЯ ОТ ОПЕРАТОРА, хотя оба сидят за ноутбуком. Оператор целится ПАМЯТЬЮ РУКИ по неподвижной панели и смотрит в зал — ему нужна плотность. Игрок целится ГЛАЗАМИ по случайной точке поля, на скорость, и промах стоит очков команде. Отсюда шкала крупнее операторской (основной текст 18 против 15) и зона нажатия 52 против 36. Мельче делать нельзя: за ноутбуком сидит человек, который эту игру видит первый раз в жизни и у которого 60 секунд. */ .mk-minigame { /* cqi, а не vw: кадр приёмки живёт внутри страницы, и vw измерил бы окно браузера. База — 1280, рабочая ширина ноутбука за вычетом хрома. Нижние границы clamp рассчитаны на телефон 390: игру открывают и с него, хотя зовут «к ноутбуку». */ container-type: inline-size; --fs-hero: clamp(52px, 5.63cqi, 88px); /* 72 на 1280 — очки в итогах */ --fs-h1: clamp(30px, 3.13cqi, 48px); /* 40 — титул экрана */ --fs-h2: clamp(22px, 2.19cqi, 34px); /* 28 — счёт в HUD, статус */ --fs-h3: clamp(17px, 1.64cqi, 25px); /* 21 — подписи блоков */ --fs-body: clamp(15px, 1.41cqi, 21px); /* 18 — правила, описания */ --fs-small: clamp(13px, 1.17cqi, 18px); /* 15 — служебное */ --fs-label: clamp(11px, 0.94cqi, 14px); /* 12 — капс-лейбл */ /* 52 — между капитаном (56, палец в полутьме) и оператором (36, мышь по памяти). Здесь мышь, но по движущейся цели. */ --tap: clamp(48px, 4.06cqi, 64px); /* ЧЕТЫРЕ ЦВЕТА УЗЛОВ — ЭТО ДАННЫЕ, А НЕ АКЦЕНТ. Тип узла игрок обязан различить боковым зрением за десятую долю секунды, поэтому цвет здесь работает как категория — так же, как --gold / --silver / --bronze работают местами подиума. Три из четырёх взяты готовыми; синий — единственный новый цвет системы, и он объявлен ЗДЕСЬ, а не в компоненте: цветом владеет tokens.css. Контраст к --bg-1 — 7,56 : 1. Значения совпадают с VALVE_CONFIG (static/minigame/game-v2.js:29): перевод на токены не меняет игру, он даёт ей имена. */ --node-normal: var(--ok); /* штатный — 1 клик, 4 с */ --node-fast: var(--err); /* газ — 1 клик, 2 с */ --node-heavy: #60a5fa; /* конденсат — 2 клика */ --node-unique: var(--gold); /* уникальный приток — 3 клика, x2 очки */ /* Плотнее капитанских 1,5: половина текста здесь — цифры и короткие подписи, а длинный текст живёт только на экране правил. */ line-height: 1.45; } /* ---------- Лендинг: витрина и внутренний хаб ---------- Шестая поверхность и единственная, которую открывают с чего угодно — с телефона в дороге, с рабочего ноутбука, с телевизора в переговорной. Поэтому диапазон шкалы здесь самый широкий во всей системе, а пол — самый высокий: страницу читают, а не считывают. Почему не базовая :root. Она построена под ТВ: --fs-hero там доходит до 104 px на широком окне и схлопывается до 56 на телефоне, то есть ведёт себя ровно наоборот тому, что нужно витрине. */ .mk-landing { container-type: inline-size; --fs-hero: clamp(38px, 5.94cqi, 96px); /* 76 на 1280 — обещание */ --fs-h1: clamp(28px, 3.75cqi, 60px); /* 48 — заголовок раздела */ --fs-h2: clamp(22px, 2.50cqi, 38px); /* 32 — заголовок карточки */ --fs-h3: clamp(18px, 1.72cqi, 26px); /* 22 */ --fs-body: clamp(16px, 1.41cqi, 20px); /* 18 — абзац */ --fs-small: clamp(13px, 1.17cqi, 17px); /* 15 */ --fs-label: clamp(11px, 0.94cqi, 14px); /* 12 */ /* 48 — норма для публичной страницы (Material 48, HIG 44). Меньше капитанских 56: здесь не бьют на скорость в полутьме, здесь читают и один раз нажимают. */ --tap: clamp(44px, 3.75cqi, 56px); /* Самый свободный межстрочник в системе: единственная поверхность с настоящим сплошным текстом. */ line-height: 1.55; } /* ========================================================================== Карта эмоций → хью/сат/лайт. ЭТОТ ФАЙЛ ВЛАДЕЕТ ЦВЕТОМ: карта орба (static/viewer/audio-visualizer.js) повторяет эти значения, а не наоборот. Правите здесь — правьте и там, иначе орб и сцена разъедутся молча. Вешается на корень сцены; переход хью плавный — см. motion.css @property. ========================================================================== */ [data-emotion="neutral"] { --emotion-h: 262; --emotion-s: 78%; --emotion-l: 62%; } [data-emotion="sarcasm"] { --emotion-h: 285; --emotion-s: 82%; --emotion-l: 63%; } [data-emotion="praise"] { --emotion-h: 45; --emotion-s: 95%; --emotion-l: 58%; } [data-emotion="joke"] { --emotion-h: 135; --emotion-s: 72%; --emotion-l: 55%; } [data-emotion="flirt"] { --emotion-h: 330; --emotion-s: 85%; --emotion-l: 64%; } [data-emotion="motivation"] { --emotion-h: 28; --emotion-s: 92%; --emotion-l: 58%; } [data-emotion="provocation"] { --emotion-h: 2; --emotion-s: 86%; --emotion-l: 58%; } /* Производные считаются ЗАНОВО на том элементе, который несёт data-emotion. Без этого блока переопределение трёх сырых чисел на .mk-stage до производных не доезжает: кастомное свойство подставляется там, где объявлено, а потомки наследуют уже готовую строку и заново не подставляют. Объявления те же, что в :root, — ни одного нового имени. Проверено в браузере 2026-08-18. */ [data-emotion] { --emotion: hsl(var(--emotion-h) var(--emotion-s) var(--emotion-l)); --emotion-soft: hsl(var(--emotion-h) var(--emotion-s) 74%); --emotion-deep: hsl(var(--emotion-h) var(--emotion-s) 46%); --emotion-glow: hsl(var(--emotion-h) var(--emotion-s) var(--emotion-l) / 0.35); --emotion-faint: hsl(var(--emotion-h) var(--emotion-s) var(--emotion-l) / 0.12); --emotion-border: hsl(var(--emotion-h) calc(var(--emotion-s) - 20%) 50% / 0.45); --emotion-ink: hsl(var(--emotion-h) 60% 8%); } /* ========================================================================== Базовые примитивы (общие строительные блоки v2-экранов) ========================================================================== */ /* Дизайн-система сама владеет box-sizing внутри сцены — не зависит от резетов страницы-хозяина. */ .mk-stage, .mk-stage *, .mk-stage *::before, .mk-stage *::after, .mk-captain, .mk-captain *, .mk-captain *::before, .mk-captain *::after, .mk-operator, .mk-operator *, .mk-operator *::before, .mk-operator *::after, .mk-minigame, .mk-minigame *, .mk-minigame *::before, .mk-minigame *::after, .mk-landing, .mk-landing *, .mk-landing *::before, .mk-landing *::after { box-sizing: border-box; } .mk-panel { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-panel); } .mk-panel--emotion { border-color: var(--emotion-border); box-shadow: var(--shadow-panel), var(--glow-emotion-soft); } .mk-label { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-dim); } .mk-label--emotion { color: var(--emotion-soft); } .mk-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full); background: var(--glass-bg); border: 1px solid var(--glass-border); font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-mid); } .mk-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } .mk-display { font-family: var(--font-display); font-weight: 700; color: var(--text-hi); }