/* ═══════════════════════════════════════════════════════════════════════════ * МАСТЕРСКАЯ — ТЕМА. ТЕПЕРЬ ОНА СИДИТ НА ТЕХ ЖЕ КОСТЯХ, ЧТО САЙТ. * * БЫЛО (замер 12.07): своя палитра из 11 цветов, свои шрифты (Inter/JetBrains Mono — * НИ ОДНОГО общего с сайтом), кегли 13 · 15 · 19 — ВНЕ ШКАЛЫ. Общих костей — НОЛЬ. * Оттого мастерская и «не как сайт»: это были два разных продукта, склеенных ссылкой. * * СТАЛО (решение Designer): скелет ОДИН, свет РАЗНЫЙ. * · шрифты — Spectral (заголовки) + Golos Text (текст), те же, что на витрине; * · шкала — 12·14·16·18·20·24·28·32·40·48, ничего между (машина следит: design_guard); * · цвета — НЕ СВОИ. Значения приходят из themes.css через [data-surface="verstak"]. * Тёмное — это РОЛЬ (оболочка-инструмент), а не характер бренда. * · акцент — тот же тёплый тон, что на бумаге, но значение светлеет до уголька, * иначе кирпич #8B2C22 проваливает контраст на тёмном. * * ЗАКОН: тёмное имеет право быть везде, КРОМЕ САМОГО ХОЛСТА СТРАНИЦЫ. Холст артиста — * всегда в своём настоящем тёплом виде: он правит то, что видит. * * СТАРЫЕ ИМЕНА (--panel, --ink, --line, --muted) ОСТАВЛЕНЫ ЖИВЫМИ ПСЕВДОНИМАМИ: * их зовут 9 html-файлов и вся вёрстка модулей. ЗАКОН МИГРАЦИИ: сначала работают ОБА, * потом переезд, только потом снос. Разом переименовать — значит уронить мастерскую. * ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* КОСТИ (те же, что на витрине) */ --font-display: 'Spectral', Georgia, 'Times New Roman', serif; --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; --serif: var(--font-display); --sans: var(--font-body); --mono: 'JetBrains Mono', 'Courier New', monospace; /* цифры/аккорды — работа, не витрина */ --radius: 12px; --sec: 60px; --gap: 44px; /* СВЕТ: значения приходят из themes.css ([data-surface="verstak"]). Здесь — только запасные значения на случай, если themes.css не подключён. */ --bg: #17140F; --surface: #201C16; --surface-2: #262119; --text: #EDE6D6; --text-mut: #A79E8C; --accent: #D98A2B; --rule: #332C22; --ok: #7fd6a2; --warn: #E3B457; --bad: #E06A62; /* ошибка: на тёмном красный должен светлеть, иначе не читается */ /* ЖИВЫЕ ПСЕВДОНИМЫ старых имён — вся вёрстка модулей зовёт их (закон миграции) */ --panel: var(--surface); --panel2: var(--surface-2); --line: var(--rule); --ink: var(--text); --muted: var(--text-mut); --accent2: var(--ok); --chord: var(--accent); --btnline: var(--rule); /* ШКАЛА КЕГЛЕЙ ТОКЕНАМИ (D-104): страницы берут var(--fs-*), «почти такой же» размер ввести нельзя. */ --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5} h1,h2{margin:0} .module-head{padding:22px 24px 0} .module-head h2{font-family:var(--serif);font-size:24px;font-weight:600;margin-bottom:4px} .module-head .sub{color:var(--muted);font-size:14px;margin:0 0 18px} .wrap{max-width:1100px;margin:0 auto;padding:0 24px 40px} .card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:18px} label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em} input,select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:9px 11px;font-family:var(--sans);font-size:14px} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)} textarea{font-family:var(--mono);resize:vertical} .row{display:flex;gap:12px;flex-wrap:wrap} .row>div{flex:1;min-width:130px} button.act{background:var(--accent);color:#fff;border:none;border-radius:7px;padding:10px 18px;font-weight:600;cursor:pointer;font-size:14px} button.act:hover{filter:brightness(1.08)} button.ghost{background:var(--panel2);color:var(--ink);border:1.5px solid var(--btnline);border-radius:7px;padding:10px 16px;cursor:pointer;font-size:14px} button.ghost:hover{border-color:var(--accent)} table{width:100%;border-collapse:collapse;margin-top:8px} th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:14px} th{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em} td.num,th.num{text-align:right;font-family:var(--mono)} .result{background:var(--panel2);border-left:3px solid var(--accent2);border-radius:6px;padding:14px;margin-top:14px;font-family:var(--mono);font-size:14px;white-space:pre-wrap} .hint{color:var(--muted);font-size:12px;margin-top:6px} .member-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-end} .member-row>div{flex:1} .x{background:none;border:1.5px solid var(--btnline);color:var(--ink);border-radius:6px;width:34px;height:34px;cursor:pointer} .x:hover{border-color:var(--accent);color:var(--accent)} .filebar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px;align-items:center} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--accent2);color:#fff;padding:11px 20px;border-radius:8px;font-size:14px;opacity:0;transition:.3s;pointer-events:none;z-index:80} .toast.show{opacity:1;pointer-events:auto} /* file-кнопка: