/* ============================================================
ONWAVE · SKY THEME — импортируемая тема Неба
Две стороны одного листа: Хаос (тёмная, по умолчанию) и бизнес (.business)
Версия свода «Небосвод» · 2026-09-02
------------------------------------------------------------
КАК ПРИМЕНИТЬ (чтобы это стало новым Небом):
1) подключить шрифты и этот файл в шаблон Неба
(roy-lite/vzor/index.html или hive_lite):
2) корневой элемент: (Хаос — тёмная, по умолчанию)
светлая бизнес-тема:
акцент по роли:
3) весь экран обернуть в лист:
…
— он переворачивается при смене темы (см. «ПЕРЕВОРОТ ЛИСТА»)
4) верстать экраны классами ow-* (см. секцию «КОМПОНЕНТЫ»)
------------------------------------------------------------
ГЕОМЕТРИЯ: π — время, φ — пространство.
π : знак дышит 13 с, 13π = час, чеканка только за принятое.
φ : колонки .ow-gold = 38.2 / 61.8, отступы --sp-* по Фибоначчи
(5·8·13·21·34·55·89 — каждый ÷ предыдущий → 1.618),
лист .ow-rect — золотой прямоугольник.
Сечение показано не украшением, а самой геометрией окна.
============================================================ */
/* ---------- ТОКЕНЫ · Хаос (тёмная, по умолчанию) ---------- */
.ow{
color-scheme:dark;
--night:#0a0c14; --night-2:#0c0f19;
--panel:#12141f; --panel-2:#171a26; --panel-3:#1d2130;
--line:#252a3a; --line-soft:#1b1f2f;
--ink:#e9ebf4; --ink-2:#9aa1b7; --ink-3:#606782;
/* два голоса */
--pi:#4bd07a; --pi-dim:#2c7a4c; /* система / Мастер / гит */
--sun:#e7ad55; --sun-dim:#8a6a2e; /* человек / Дов / бизнес */
/* семантика статуса — отдельно от голосов */
--good:#56c98a; --warn:#e0a24d; --crit:#e2685f; --info:#5b8dd6; --violet:#7c86e8;
--accent:var(--sun);
/* шкала отступов = Фибоначчи (каждый ÷ предыдущий → 1.618), 13 — число улья */
--sp-1:5px;--sp-2:8px;--sp-3:13px;--sp-4:21px;--sp-5:34px;--sp-6:55px;--sp-7:89px;
--phi:1.618; /* φ — пространство */
--phi-min:38.2; /* меньшая доля сечения, % */
--phi-maj:61.8; /* большая доля сечения, % */
--r-1:6px;--r-2:9px;--r-3:14px;--r-4:20px;
--flip-ms:280ms; /* половина переворота листа */
/* шрифты */
--f-disp:"Schibsted Grotesk",system-ui,sans-serif;
--f-body:"Inter",system-ui,sans-serif;
--f-mono:"JetBrains Mono",ui-monospace,monospace;
}
/* Роли Неба v3 · решение Мастера 03.09: Мастер · Дов · Бизнес = Давид ·
Проджект = Марина. Роль «pm» была безымянной должностью — заменена на
человека: у Марины и Давида разные акценты, и обобщённое «pm» их
сливало. Дов и Давид делят янтарь (обе — человеческая, бизнес-сторона);
различает их подпись рядом, не цвет. */
.ow[data-role="master"]{--accent:var(--crit)}
.ow[data-role="dov"]{--accent:var(--sun)}
.ow[data-role="david"]{--accent:var(--sun)}
.ow[data-role="marina"]{--accent:var(--good)}
/* ---------- ТОКЕНЫ · бизнес-светлая ---------- */
.ow.business{
color-scheme:light;
--night:#eef1f6; --night-2:#f8fafc;
--panel:#ffffff; --panel-2:#f2f5fa; --panel-3:#e9edf4;
--line:#dde2ec; --line-soft:#eaeef5;
--ink:#161923; --ink-2:#4c5262; --ink-3:#828aa0;
--pi:#199a55; --pi-dim:#c3e9d4;
--sun:#a9761f; --sun-dim:#ead9b0;
--good:#1f9e5f; --warn:#b3781d; --crit:#cf4638; --info:#3563c0; --violet:#5057c4;
}
/* ---------- БАЗА ---------- */
.ow{margin:0;background:var(--night);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.ow h1,.ow h2,.ow h3{font-family:var(--f-disp);margin:0;letter-spacing:-.02em;text-wrap:balance}
.ow .mono{font-family:var(--f-mono)}
.ow .tnum{font-variant-numeric:tabular-nums}
.ow .eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ow a{color:var(--pi)}
@media (prefers-reduced-motion:reduce){.ow *{animation:none!important}}
/* дыхание знака π (13 c) */
.ow-pi{color:var(--pi);animation:ow-breathe 13s ease-in-out infinite;display:inline-block}
@keyframes ow-breathe{0%,100%{opacity:.8}50%{opacity:1}}
/* ---------- ХАОС · изнанка листа — вид изнутри машины ----------
Не «тёмный бизнес», а другая природа. В бизнесе ведёт дисплейный
гротеск; в Хаосе ведёт моно: заголовки, навигация, подписи, числа.
Свод глубже, панель держится волоском, приборы светятся.
Класс необязателен — тёмная и так по умолчанию; .chaos для явности. */
.ow:not(.business){
--night:#06080e; --night-2:#090c15;
--panel:#0e1119; --panel-2:#12161f; --panel-3:#181d29;
--line:#1e2434; --line-soft:#161b28;
--ink:#e4e8f2; --ink-2:#8d94ab; --ink-3:#565d75;
}
/* машинная сетка свода — проступает только у кромки, как разметка прибора */
.ow:not(.business)::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:linear-gradient(rgba(75,208,122,.028) 1px,transparent 1px) 0 0/100% 34px,
linear-gradient(90deg,rgba(75,208,122,.028) 1px,transparent 1px) 0 0/34px 100%;
-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 20%,transparent 50%);
mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 20%,transparent 50%)}
.ow:not(.business) .ow-leaf{position:relative;z-index:1}
/* моно ведёт */
.ow:not(.business) .ow-sh{font-family:var(--f-mono);font-weight:600;letter-spacing:-.01em}
.ow:not(.business) .ow-sh::before{content:"› ";color:var(--pi);font-weight:400}
.ow:not(.business) .ow-nav button{font-family:var(--f-mono);font-size:12px}
.ow:not(.business) .ow-pi{text-shadow:0 0 14px rgba(75,208,122,.5)}
.ow:not(.business) .ow-tile .l{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.ow:not(.business) .ow-tile .v{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ow:not(.business) .ow-epic .name{font-family:var(--f-mono);font-size:14px}
/* панель держится волоском сверху, а не заливкой */
.ow:not(.business) .ow-tile,.ow:not(.business) .ow-epic{box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
/* приборные поверхности — сканлайны живого монитора */
.ow:not(.business) .ow-instr{position:relative;overflow:hidden;box-shadow:inset 0 0 70px rgba(0,0,0,.6)}
.ow:not(.business) .ow-instr::after{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(75,208,122,.05) 0 1px,transparent 1px 3px)}
/* живое — блочный курсор */
.ow:not(.business) .ow-live::after{content:"▊";animation:ow-blink 1s steps(2) infinite}
@keyframes ow-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ow-live::after{animation:none}}
/* ---------- ВЕРХ / НАВИГАЦИЯ ---------- */
.ow-top{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--night-2);flex-wrap:wrap}
.ow-brand{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:700;font-size:16px}
.ow-nav{display:flex;gap:3px;flex-wrap:wrap}
.ow-nav button{font-size:12.5px;color:var(--ink-2);background:transparent;border:1px solid transparent;padding:6px 11px;border-radius:8px;cursor:pointer}
.ow-nav button.on{color:var(--ink);background:var(--panel);border-color:var(--line)}
.ow-nav .sep{width:1px;background:var(--line);margin:4px}
.ow-toggle{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px}
.ow-toggle button{font-family:var(--f-mono);font-size:11px;color:var(--ink-2);background:transparent;border:0;padding:5px 10px;border-radius:999px;cursor:pointer}
.ow-toggle button.on{color:var(--night);background:var(--accent);font-weight:600}
/* ---------- БАННЕР / ПОЛОСА РОЛИ ---------- */
.ow-banner{display:flex;align-items:center;gap:11px;padding:10px 16px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border-bottom:1px solid var(--line);font-size:13px}
.ow-banner .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ow-banner b{color:var(--ink)}
.ow-banner .cta{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:999px;padding:5px 12px;cursor:pointer}
/* ---------- ЗАГОЛОВКИ СЕКЦИЙ ---------- */
.ow-sh{font-family:var(--f-disp);font-size:18px;font-weight:600;margin:0 0 12px}
.ow-sh small{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);font-weight:400;margin-left:9px}
/* ---------- ЗОЛОТОЕ СЕЧЕНИЕ · геометрия окон ----------
φ живёт в пропорциях, а не в украшении: колонки 38.2/61.8,
поля по Фибоначчи, лист — золотой прямоугольник.
меньшее
большее
*/
.ow-gold{display:grid;grid-template-columns:38.2fr 61.8fr;gap:var(--sp-6);align-items:start;position:relative}
.ow-gold.flip-sides{grid-template-columns:61.8fr 38.2fr}
/* тонкая линия сечения лежит в самом разрыве колонок */
.ow-gold::before{content:"φ";position:absolute;top:calc(50% - 8px);left:calc(38.2% + var(--sp-6)/2);transform:translateX(-50%);
font-family:var(--f-mono);font-size:10px;color:var(--ink-3);opacity:.55;pointer-events:none}
.ow-gold.mute::before{content:none}
.ow-rect{aspect-ratio:var(--phi)} /* золотой прямоугольник */
.ow-rect.tall{aspect-ratio:calc(1 / 1.618)}
@media(max-width:820px){.ow-gold,.ow-gold.flip-sides{grid-template-columns:1fr;gap:var(--sp-5)}.ow-gold::before{content:none}}
/* ---------- ПЕРЕВОРОТ ЛИСТА · бизнес ↔ Хаос ----------
Один лист с двух сторон: лицо — обложка Дова (порядок),
изнанка — Хаос Мастера (машина изнутри).
Разметка: …