/* ============================================================ YAZME ПЕРСОНЫ · ТОКЕНЫ · ревизия 2026-08-b ЭТО СЛОЙ ПРИВЯЗКИ, А НЕ ОТДЕЛЬНАЯ ПАЛИТРА. Раньше раздел держал свои жёстко зашитые цвета (#0F0E0D и т.д.) и собственные шрифты. На сайте с тремя темами (amber / cloud / midnight) это выглядело как чужое приложение: при светлой теме «Cloud Dancer» персоны оставались чёрной дырой, при «Полночи» — не совпадали по тону. Теперь каждый токен раздела выводится из переменных сайта --yz-* (assets/css/yazme-theme.css) и автоматически едет за темой. Второе значение в var() — запасное, на случай если тема не подключилась. Правило: НИ ОДНОГО нового цвета. Только то, что уже есть в теме сайта. ============================================================ */ :root{ /* ---------- ПОВЕРХНОСТИ ---------- Ступени семантические, а не «по светлоте»: в тёмной теме карточка светлее страницы, в светлой — белая с тенью. Обе логики укладываются в одни и те же имена, поэтому компоненты не знают о теме ничего. */ /* ПЕРСОНЫ ИДУТ НА ПОЛШАГА ТЕМНЕЕ САЙТА. С 2026-08 сайт сам ушёл в обсидиан (#0F0E0D), поэтому разрыв между разделом и остальными страницами закрылся: раздел лишь чуть глубже, а не отдельный остров. Чёрный фон убирает всё лишнее и оставляет на экране только лицо и реплику. Тон тёплый (не чистый #000) — он родня янтарной теме, а не чужой. Акцент, текст, границы и тени по-прежнему берутся из темы сайта, поэтому раздел остаётся его частью, а не превращается обратно в остров. */ --s0:#0A0908; /* страница */ --s1:#131110; /* утопленное: поля ввода, «глубокие» карточки */ --s2:#201E1A; /* карточки, пузыри реплик */ --s3:#282523; /* приподнятые элементы: ghost-кнопки, монограмма */ --s4:#312D2A; /* активное состояние */ --s5:#36322F; /* поверх всего: тост, диалог */ --glass: var(--yz-glass, rgba(15,14,13,.78)); --overlay: var(--yz-overlay, rgba(10,9,8,.72)); /* ---------- АКЦЕНТ ---------- Один герой-цвет, и он всегда акцент сайта. */ --hero: var(--yz-accent, #d97757); --hero-hi: var(--yz-accent-hi, #e88a68); --hero-lo: var(--yz-accent-soft, rgba(217,119,87,.14)); --hero-mid: var(--yz-accent-deep, #b05730); --hero-line: var(--yz-accent-line, rgba(217,119,87,.42)); --hero-grad: var(--yz-grad, linear-gradient(135deg,#e2885f,#d97757 45%,#b3552e)); /* Текст НА акценте. Во всех трёх темах акцент светлый (терракота/золото), поэтому контрастнее тёмная надпись — проверено по WCAG для каждой темы. */ --on-hero: color-mix(in srgb, var(--yz-accent, #d97757) 20%, #000); /* ---------- ТЕКСТ ---------- */ --t1: var(--yz-text, #faf9f5); --t2: var(--yz-dim, #b9b4a7); --t3: var(--yz-muted, #8d8878); --hair: var(--yz-border, rgba(250,249,245,.08)); --hair2: var(--yz-border-strong, rgba(250,249,245,.17)); --hair3: color-mix(in srgb, var(--yz-border-strong, rgba(250,249,245,.17)) 100%, var(--yz-text, #faf9f5) 12%); --mark: var(--yz-gold, #e2b13c); --win: var(--yz-success, #58a76b); --lose: var(--yz-danger, #e5484d); --info: var(--yz-info, #4c8dff); /* ---------- ТЕНИ ---------- В светлой теме без них карточки сливаются с фоном; сайт использует тени и в тёмных темах, так что «на тёмном теней нет» больше не правило. */ --sh-sm: var(--yz-shadow-sm, 0 2px 8px rgba(0,0,0,.28)); --sh-md: var(--yz-shadow-md, 0 10px 30px -12px rgba(0,0,0,.5)); --sh-lg: var(--yz-shadow-lg, 0 24px 60px -18px rgba(0,0,0,.65)); --sh-hero: var(--yz-accent-glow, 0 8px 26px rgba(217,119,87,.35)); /* фокус-кольцо: берём инфо-цвет темы, он контрастен ко всем поверхностям */ --focus: var(--yz-info, #4c8dff); --focus-w: 2px; --focus-off: 2px; /* ---------- РАДИУСЫ ---------- */ --r-xs: 3px; --r-sm: var(--yz-r-sm, 10px); --r-md: var(--yz-r-lg, 22px); --r-lg: var(--yz-r-xl, 28px); --r-full: var(--yz-r-pill, 999px); /* ---------- ОТСТУПЫ ---------- */ --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp7:32px; --sp8:48px; /* ---------- ДВИЖЕНИЕ ---------- Базовые кривые — сайта, чтобы раздел двигался как остальной интерфейс. */ --e-out: var(--yz-ease, cubic-bezier(.22,1,.36,1)); --e-effect: var(--yz-ease, cubic-bezier(.22,1,.36,1)); --e-in: cubic-bezier(.4,0,1,1); --e-spring: var(--yz-spring, cubic-bezier(.34,1.45,.5,1)); --e-spring-soft: var(--yz-ease, cubic-bezier(.22,1,.36,1)); --e-bounce: var(--yz-spring, cubic-bezier(.34,1.45,.5,1)); --d-micro:140ms; --d-std:200ms; --d-sheet:280ms; --d-spring:380ms; /* ---------- ШРИФТЫ ---------- Только те, что уже живут на сайте. Playfair Display убран: его не подключает ни одна другая страница, он тянул лишний файл и выбивался из типографики проекта. */ --f-ui: var(--yz-font-ui, 'Inter', system-ui, sans-serif); --f-display: var(--yz-font-display, 'Unbounded', 'Inter', sans-serif); --f-serif: 'Source Serif 4', Georgia, serif; /* имена персонажей, цитаты */ --f-num: var(--yz-font-display, 'Unbounded', 'Inter', sans-serif); --f-hand: 'Caveat', cursive; /* ---------- ТИПОГРАФИКА ---------- */ --fs-hero:30px; --fs-title:20px; --fs-body:15px; --fs-small:13px; --fs-over:10px; --fs-hand:20px; --lh-tight:1.2; --lh-body:1.55; --ls-over:.12em; /* производные */ --r-in: calc(var(--r-md) - var(--sp3)); --d-exit-micro: calc(var(--d-micro)*.8); --d-exit-std: calc(var(--d-std)*.8); --d-exit-sheet: calc(var(--d-sheet)*.8); /* ---------- РАЗМЕРЫ УПРАВЛЕНИЯ ---------- --ctl — ХИТ-ЗОНА (минимум 44px по WCAG 2.2). Визуальный размер может быть меньше: --ctl-vis / --ctl-xs, разница добирается псевдоэлементом. */ --ctl:44px; --ctl-lg:52px; --ctl-vis:36px; --ctl-xs:28px; --mono:52px; --mono-lg:88px; --mono-sm:32px; /* ---------- РАСКЛАДКА ---------- --col — ширина колонки чтения. --wide — рабочая ширина каталога на большом экране (сетка карточек, две колонки в чате). */ --col:660px; --wide:1180px; /* безопасные зоны: берём переменные сайта, они уже объявлены в теме */ --sat: var(--safe-top, env(safe-area-inset-top, 0px)); --sab: var(--safe-bottom, env(safe-area-inset-bottom, 0px)); --sal: var(--safe-left, env(safe-area-inset-left, 0px)); --sar: var(--safe-right, env(safe-area-inset-right, 0px)); /* высота экранной клавиатуры — пишет JS из visualViewport */ --kb:0px; /* Запас снизу под плавающее меню сайта (#main-bottom-dock). Здесь — только значение до загрузки скрипта: дальше его перезаписывает JS (inc/ui.php), который меряет меню по факту. Меню есть не у всех — гостю его вообще не рисуют, и захардкоженные 88px просто съедали бы ему экран. */ --nav-gap: calc(88px + var(--sab)); } /* Светлая тема «Cloud Dancer»: чёрный здесь неуместен — берём поверхности сайта как есть, иначе раздел станет дырой посреди светлой страницы. */ html[data-yz-theme="cloud"]{ --s0: var(--yz-bg, #f4f2ec); --s1: var(--yz-bg-deep, #ebe8e0); --s2: var(--yz-surface, #ffffff); --s3: var(--yz-surface-2, #faf9f4); --s4: color-mix(in srgb, var(--yz-surface-2, #faf9f4) 88%, var(--yz-text, #232019)); --s5: var(--yz-surface, #ffffff); } /* «Полночь» — своя чёрно-синяя ночь, на ступень глубже сайта */ html[data-yz-theme="midnight"]{ --s0:#070A0F; --s1:#0C1016; --s2:#12171F; --s3:#1A2029; --s4:#232A35; --s5:#283040; } /* На больших экранах шрифт и контролы чуть крупнее: десктоп — не растянутый телефон, и мелкий мобильный кегль там читается как «недоделано». */ @media (min-width: 900px){ :root{ --fs-hero:38px; --fs-title:23px; --fs-body:16px; --fs-small:14px; --mono:56px; --mono-lg:104px; --nav-gap: 32px; /* на десктопе плавающего меню нет (страница в оболочке) */ } } /* Светлая тема: полупрозрачные «волоски» на белом почти не видны — подменяем их на чуть более плотные, компоненты об этом не знают. */ @media (prefers-reduced-transparency: reduce){ :root{ --hair: var(--yz-border-strong, rgba(250,249,245,.17)); --hair2: var(--yz-border-strong, rgba(250,249,245,.17)); } } /* Раздел не навязывает свою цветовую схему — её задаёт тема сайта. */