/* ============================================================================ Скин V7 «Тёмный editorial-эксплейнер». Источник эстетики — библиотека стилей, id ats-02-dark-editorial-explainer. ВАЖНО: в этом стиле композиция и есть стиль. Поэтому /case/top-novosti перестроен по нему структурно (компоненты .exp-* в main.css: шапка → одна крупная фигура → шесть равных панелей 2×3 → плашка-правило), а здесь живёт только палитра и свечение. Скин — не перекраска старой ленты блоков. Язык стиля (значения — по ЗАМЕРУ кадров, см. блок ниже; текстовое описание стиля в registry.json по цветам неточно и на него опираться нельзя): · ровный почти-чёрный фон #0D0D0C, поверхность панели #141311; · hero: заголовок ink, следом та же строка-тезис, подсвеченная оранжевым; · сетка скруглённых панелей, у каждой — цветной рельс слева и ОДИН акцентный цвет на панель (номер, чип, серия), а не радуга в каждой; · под каждой панелью — подпись-вывод моноширинным по центру; · чипы-теги: тонкая обводка акцентом + мягкое внешнее свечение; · шести­угольные узлы-бейджи у ролей + пунктирные коннекторы между ними; · внизу — чёрная плашка с правилом разбора. Блок .case-pack-std скин не перекрашивает — он остаётся в корневом стиле. ========================================================================== */ /* ЗАМЕР ЭТАЛОНА (пипеткой по кадрам 14_DcM0HUJOw6W и 34_DcJL94JO_3U, 22.08.2026). Словесное описание в registry.json говорит «тёплый почти-чёрный #16120E» — по пикселям это неверно и именно оно увело скин в коричневый: фон страницы #0D0D0B … #101010 S 0–15% V 5–6% панель #161513 … #171516 S 9–14% V 9% карточка снизу #1B1714 … #221A17 S 26–32% V 11–13% (тонирована акцентом) активная заливка #2F5059 / #7A4387 S 47–50% V 35–53% ← ГОРИТ, а не 13% альфы кромка узла #90609C светлее заливки на ~10 V левая полоса 3px, пик V 55%, + затухание внутрь панели ~14px чип фон S~79% V20%, обводка V~53%, текст в акценте Правило: цвет берём с кадра, не из текста описания. */ body[data-skin="v7"] { --bg: #0D0D0C; --panel: #141311; --panel-2: #131211; --panel-warm: linear-gradient(180deg, #1C1A16, #131211); /* белый эталона не чисто-белый: замер заголовка дал #D2D1CF (V 82%). Наш #F5EFE6 (V 96%) выбивался — на сравнительном кадре текст «звенел». */ --ink-strong: #E3DDD3; --ink: #D6CFC3; --ink-dim: #A29786; --ink-faint: #7F7566; /* ЗАМЕР НАСЫЩЕННОСТИ (важнейшая находка сверки кадров). В registry.json стоят #F59E0B / #2DD4BF / #A78BFA — это дефолтные Tailwind, вписанные на глаз. На самих кадрах цвета ЗАМЕТНО мягче: амбер заголовка #F1CD83 / #D59953 H 32–40 S 43–61% V 84–95% тил-циан #489BAB / #51A0B1 H 187–192 S 32–58% магента гекса #A056B5 / #B46DCB H 285–288 S 46–55% V 68–80% красный чип #9D434F H 352 S 57% V 62% Цвет ГОРИТ за счёт высокой яркости при УМЕРЕННОЙ насыщенности. S 96% давал «кислоту», а не свечение эталона. */ --camel: #E9B87A; /* главный акцент: песочный янтарь, S 48% */ --camel-deep: #F5CE96; --camel-tint: rgba(233,184,122,.13); --cold: #BC7FDB; /* второй смысловой: магента-фиолет, S 42% */ --cold-deep: #D2A6E6; --cold-tint: rgba(188,127,219,.13); --alarm: #E0707E; --alarm-tint: rgba(224,112,126,.13); --c-hair: rgba(245,239,230,.07); --c-thin: rgba(245,239,230,.11); --c-edge: rgba(245,239,230,.20); --shadow: 0 14px 40px rgba(0,0,0,.55); --shadow-soft: 0 4px 18px rgba(0,0,0,.38); --pan-bg: #141311; --pan-face: #1B1A17; --pan-edge: rgba(245,239,230,.10); --pan-hair: rgba(245,239,230,.08); --pan-grid: rgba(245,239,230,.07); --pan-ink: #F5EFE6; --pan-dim: #948878; --k-warm: #E9B87A; --k-cold: #BC7FDB; --k-teal: #6FBFD2; --k-alarm: #E0707E; /* серии тем — те же приглушённые тона, что и акценты панелей */ --w1: #E9B87A; --w2: #6FBFD2; --w3: #BC7FDB; --w4: #77C79E; --w5: #D98BE0; --radius: 16px; --radius-sm: 10px; color: var(--ink); /* фон эталона РОВНЫЙ почти-чёрный: замер дал S 0–15% при V 5–6%. Прежний тёплый radial на .09 давал коричневую муть — оставлен след на .035. */ background: radial-gradient(1100px 520px at 50% -10%, rgba(233,184,122,.035), transparent 60%), #0D0D0C; --header-bg: rgba(13,13,12,.92); } body[data-skin="v7"] ::selection { background: rgba(233,184,122,.28); color: #FFF7E8; } /* --------------------------------------------------------------------------- 1. HERO: тезис с одной оранжевой фразой Разметку не меняем: заголовок остаётся заголовком, а строка-вопрос под ним набирается тем же кеглем и подсвечивается оранжевым — приём кадров источника. ------------------------------------------------------------------------- */ body[data-skin="v7"] .casepage .kicker { color: var(--camel-deep); } body[data-skin="v7"] .casepage .kicker::before { background: var(--camel); opacity: 1; } body[data-skin="v7"] .casepage .simpage__title { font-size: clamp(27px, 3.9vw, 42px); letter-spacing: -.025em; line-height: 1.06; } body[data-skin="v7"] .casepage .simpage__q { margin-top: 4px; max-width: 26ch; font-family: var(--sans); font-weight: var(--w-accent); font-size: clamp(19px, 2.7vw, 31px); line-height: 1.14; letter-spacing: -.02em; color: var(--camel); } body[data-skin="v7"] .casepage .simpage__q::before { content: "— "; color: var(--camel); opacity: .7; } @media (min-width: 900px) { body[data-skin="v7"] .casepage .simpage__q { max-width: 34ch; } } body[data-skin="v7"] .case-note { color: var(--ink-dim); background: rgba(233,184,122,.07); border: var(--ln-thin) solid rgba(233,184,122,.35); border-radius: var(--radius-sm); box-shadow: inset 0 0 22px rgba(233,184,122,.05); } body[data-skin="v7"] .case-note b { color: var(--camel-deep); } /* --------------------------------------------------------------------------- 2. Вертикальный ритм и служебные ленты ------------------------------------------------------------------------- */ body[data-skin="v7"] .casepage .case-block:not(.case-pack-std) { margin-top: 68px; padding-top: 30px; border-top: var(--ln-hair) solid var(--c-hair); } @media (min-width: 900px) { body[data-skin="v7"] .casepage .case-block:not(.case-pack-std) { margin-top: 84px; padding-top: 34px; } } /* служебные ленты — только вне блока пакета: он живёт в корневом стиле */ body[data-skin="v7"] .casepage .case-block:not(.case-pack-std) .lab { letter-spacing: .18em; color: var(--ink-faint); } body[data-skin="v7"] .casepage .case-block:not(.case-pack-std) .lab i { color: var(--camel); } body[data-skin="v7"] .casepage .case-block:not(.case-pack-std) .case-h { font-size: clamp(20px, 2.7vw, 27px); letter-spacing: -.02em; } body[data-skin="v7"] .casepage .case-lead, body[data-skin="v7"] .casepage .simpage__list li { color: var(--ink-dim); } body[data-skin="v7"] .casepage .simpage__list li::before { background: var(--camel); height: 2px; } body[data-skin="v7"] .casepage .case-block:not(.case-pack-std) .case-fine { color: var(--ink-faint); } /* бегущая лента источника — тёмная плашка в гамме стиля */ body[data-skin="v7"] .wave-strip { background: var(--panel); border-color: var(--pan-edge); border-radius: 12px; } body[data-skin="v7"] .wave-strip__belt::before { background: linear-gradient(90deg, var(--panel), transparent); } body[data-skin="v7"] .wave-strip__belt::after { background: linear-gradient(270deg, var(--panel), transparent); } body[data-skin="v7"] .wave-strip__dot { background: #77C79E; } body[data-skin="v7"] .wave-strip__item b { color: var(--camel-deep); } /* --------------------------------------------------------------------------- 3. ПАНЕЛИ: скругление, рельс слева, один акцент на панель, подпись-вывод ------------------------------------------------------------------------- */ body[data-skin="v7"] .case-findings { counter-reset: fp; gap: var(--s5); } @media (min-width: 900px) { body[data-skin="v7"] .case-findings { gap: var(--s6); } } body[data-skin="v7"] .case-find { --acc: #E9B87A; --acc-soft: rgba(233,184,122,.14); counter-increment: fp; position: relative; overflow: hidden; background: var(--pan-bg); border: var(--ln-thin) solid var(--pan-edge); border-left: 2px solid var(--acc); border-radius: 16px; padding: 18px 20px 16px; gap: var(--s4); box-shadow: var(--shadow-soft); } @media (min-width: 900px) { body[data-skin="v7"] .case-find { padding: 22px 24px 18px; } } /* один акцентный цвет на панель — задаётся порядком, а не разметкой */ body[data-skin="v7"] .case-findings > .case-find:nth-child(1) { --acc: #E9B87A; --acc-soft: rgba(233,184,122,.14); } body[data-skin="v7"] .case-findings > .case-find:nth-child(2) { --acc: #6FBFD2; --acc-soft: rgba(111,191,210,.14); } body[data-skin="v7"] .case-findings > .case-find:nth-child(3) { --acc: #BC7FDB; --acc-soft: rgba(188,127,219,.14); } body[data-skin="v7"] .case-findings > .case-find:nth-child(4) { --acc: #77C79E; --acc-soft: rgba(119,199,158,.14); } /* мягкое свечение акцента в углу панели */ body[data-skin="v7"] .case-find::before { content: ""; position: absolute; left: -40px; top: -60px; width: 220px; height: 160px; background: radial-gradient(closest-side, var(--acc-soft), transparent); pointer-events: none; } /* шапка панели: бейдж-номер, роль, чип справа */ body[data-skin="v7"] .case-find__head { align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; } body[data-skin="v7"] .case-find__role { display: inline-flex; align-items: center; gap: 8px; font-size: 9.5px; letter-spacing: .16em; color: var(--pan-dim); } body[data-skin="v7"] .case-find__role::before { content: "панель 0" counter(fp); color: var(--acc); background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); border-radius: 6px; padding: 3px 7px; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; } /* главная цифра панели — в её акценте */ body[data-skin="v7"] .case-find__num b, body[data-skin="v7"] .case-find__num b.is-alarm, body[data-skin="v7"] .case-find__num b.is-ok { color: var(--acc); font-weight: var(--w-accent); letter-spacing: -.03em; font-size: clamp(27px, 3.4vw, 36px); text-shadow: 0 0 26px color-mix(in srgb, var(--acc) 35%, transparent); } /* подпись к цифре — моно строчными, а не капительной стеной */ body[data-skin="v7"] .case-find__num span { color: var(--pan-dim); letter-spacing: .03em; text-transform: none; font-size: 10.5px; } /* подписи баров — строчными, как в кадрах источника */ body[data-skin="v7"] .case-find .pan__bar { text-transform: lowercase; font-size: 9px; letter-spacing: .06em; } body[data-skin="v7"] .case-find .pan__barval { color: var(--pan-ink); } /* бары занимают свободную высоту панели, а не жмутся к шапке */ body[data-skin="v7"] .case-find > .pan__bars { margin-block: auto; } /* органы управления панели — в её акценте (базовый стиль ползунка живёт только внутри .pan, у панели вывода он остаётся системным) */ body[data-skin="v7"] .case-find input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; display: block; margin: 0; height: 22px; background: transparent; cursor: pointer; } body[data-skin="v7"] .case-find input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--pan-grid); border-radius: 2px; } body[data-skin="v7"] .case-find input[type="range"]::-moz-range-track { height: 2px; background: var(--pan-grid); border-radius: 2px; } body[data-skin="v7"] .case-find input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--acc); border: 2px solid var(--pan-bg); box-shadow: 0 0 0 1px var(--acc), 0 0 12px color-mix(in srgb, var(--acc) 45%, transparent); } body[data-skin="v7"] .case-find input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--acc); border: 2px solid var(--pan-bg); box-shadow: 0 0 0 1px var(--acc); } body[data-skin="v7"] .case-find .pan__ctrlval { color: var(--acc); } body[data-skin="v7"] .case-find .pan__ctrllab { color: var(--pan-dim); } /* ПОДПИСЬ-ВЫВОД под панелью: моно, по центру, отбита пунктиром */ body[data-skin="v7"] .case-find__note { font-family: var(--mono); font-size: 10.5px; line-height: 1.75; letter-spacing: .02em; color: var(--pan-dim); text-align: center; text-transform: lowercase; border-top: 1px dashed var(--pan-hair); padding-top: 14px; margin-top: auto; } body[data-skin="v7"] .case-find__note b { color: var(--ink); font-weight: var(--w-text); } /* серия внутри панели подтягивается к её акценту: панель говорит одним цветом */ body[data-skin="v7"] .case-findings > .case-find:nth-child(2) { --w1: var(--acc); } body[data-skin="v7"] .case-findings > .case-find:nth-child(3) { --w1: var(--acc); } body[data-skin="v7"] .case-findings > .case-find:nth-child(3) .pan__fill--teal { background: rgba(224,112,126,.5); } /* цвета SVG-графика панель ставит атрибутами — перекрываем их акцентом панели: у панели должен быть ОДИН цвет, а не общий оранж серии w1 */ body[data-skin="v7"] .case-findings > .case-find:nth-child(2) .wave-chart .line { stroke: var(--acc); } body[data-skin="v7"] .case-findings > .case-find:nth-child(2) .wave-chart .fill { fill: var(--acc); } body[data-skin="v7"] .case-findings > .case-find:nth-child(2) .wave-chart circle { fill: var(--acc); } body[data-skin="v7"] .case-findings > .case-find:nth-child(2) .wave-chart .line { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 32%, transparent)); } body[data-skin="v7"] .wave-react__val b.is-ok { color: var(--acc); } body[data-skin="v7"] .wave-react__val b.is-alarm { color: var(--k-alarm); } body[data-skin="v7"] .wave-react__val span { color: var(--pan-dim); } /* --------------------------------------------------------------------------- 4. ЧИПЫ-ТЕГИ: тонкая обводка + свечение ------------------------------------------------------------------------- */ body[data-skin="v7"] .pan__chip { border-radius: 7px; padding: 3px 9px; font-size: 9px; letter-spacing: .12em; text-transform: lowercase; background: rgba(245,239,230,.03); } body[data-skin="v7"] .case-find .pan__chip, body[data-skin="v7"] .case-find .pan__chip--warm, body[data-skin="v7"] .case-find .pan__chip--alarm { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: var(--acc-soft); box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 22%, transparent), inset 0 0 12px color-mix(in srgb, var(--acc) 8%, transparent); } body[data-skin="v7"] .pan__chip--warm { box-shadow: 0 0 14px rgba(233,184,122,.20); } body[data-skin="v7"] .pan__chip--alarm { box-shadow: 0 0 14px rgba(224,112,126,.20); } /* вкладки тем — те же чипы со свечением */ body[data-skin="v7"] .wave-tabs { gap: var(--s2) 7px; } body[data-skin="v7"] .wave-tab { background: rgba(245,239,230,.03); border-radius: 8px; border-color: var(--pan-edge); color: var(--ink-dim); text-transform: lowercase; font-size: 10.5px; padding: 6px 12px; } body[data-skin="v7"] .wave-tab i { border-radius: 3px; box-shadow: 0 0 8px var(--tab-c, transparent); } body[data-skin="v7"] .wave-tab:hover { color: var(--ink-strong); } body[data-skin="v7"] .wave-tab.is-on { color: var(--ink-strong); border-color: var(--tab-c, var(--camel)); box-shadow: inset 0 0 0 1px var(--tab-c, var(--camel)), 0 0 16px rgba(233,184,122,.16); } /* --------------------------------------------------------------------------- 5. РОЛИ: шестиугольные узлы-бейджи + пунктирные коннекторы ------------------------------------------------------------------------- */ body[data-skin="v7"] .case-roles { gap: var(--s5); } body[data-skin="v7"] .case-role { --acc: #E9B87A; --acc-soft: rgba(233,184,122,.14); background: var(--pan-bg); border: var(--ln-thin) solid var(--pan-edge); border-radius: 14px; padding: var(--s5); box-shadow: var(--shadow-soft); } body[data-skin="v7"] .case-roles > .case-role:nth-child(1) { --acc: #E9B87A; --acc-soft: rgba(233,184,122,.14); } body[data-skin="v7"] .case-roles > .case-role:nth-child(2) { --acc: #6FBFD2; --acc-soft: rgba(111,191,210,.14); } body[data-skin="v7"] .case-roles > .case-role:nth-child(3) { --acc: #BC7FDB; --acc-soft: rgba(188,127,219,.14); } body[data-skin="v7"] .case-roles > .case-role:nth-child(4) { --acc: #77C79E; --acc-soft: rgba(119,199,158,.14); } /* рельс слева — в акценте карточки */ body[data-skin="v7"] .case-role::after { left: -1px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--acc); opacity: 1; box-shadow: 0 0 12px var(--acc-soft); } /* шестиугольный узел-бейдж с номером роли */ body[data-skin="v7"] .case-role__num { position: relative; z-index: 0; display: inline-grid; place-items: center; width: 40px; height: 35px; margin-bottom: 2px; background: var(--acc); color: var(--acc); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); font-size: 11px; letter-spacing: .06em; } body[data-skin="v7"] .case-role__num::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: #221B15; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } body[data-skin="v7"] .case-role__name { font-size: 15.5px; letter-spacing: -.015em; } body[data-skin="v7"] .case-role__what { color: var(--ink-dim); } body[data-skin="v7"] .case-role__chips span { color: var(--acc); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 45%, transparent); border-radius: 7px; text-transform: lowercase; letter-spacing: .06em; box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 16%, transparent); } body[data-skin="v7"] .case-role__file { border-top: 1px dashed var(--pan-hair); color: var(--pan-dim); } /* коннектор между узлами — пунктирная линия через промежуток сетки */ @media (min-width: 1180px) { body[data-skin="v7"] .case-role::before { content: ""; position: absolute; left: 100%; top: 37px; width: var(--s5); height: 1px; background: repeating-linear-gradient(90deg, var(--c-edge) 0 4px, transparent 4px 8px); } body[data-skin="v7"] .case-roles > .case-role:last-child::before { content: none; } } /* --------------------------------------------------------------------------- 6. ПАСПОРТ ДАННЫХ И ПРИБОРНЫЕ ОРГАНЫ ------------------------------------------------------------------------- */ body[data-skin="v7"] .pan { border-radius: 16px; } body[data-skin="v7"] .pan__mark { background: var(--camel-tint); color: var(--k-warm); border-radius: 8px; border: 1px solid rgba(233,184,122,.5); box-shadow: 0 0 14px rgba(233,184,122,.18); } /* паспорт говорит одним цветом — оранжевым; зелёный и фиолет остаются статусам */ body[data-skin="v7"] .case-pass .pan__chip { color: var(--k-warm); border-color: rgba(233,184,122,.5); background: var(--camel-tint); box-shadow: 0 0 14px rgba(233,184,122,.18); } body[data-skin="v7"] .pan__key b { color: var(--pan-ink); } body[data-skin="v7"] .pan__boxt { letter-spacing: .16em; } body[data-skin="v7"] .case-pass__row b { color: var(--pan-ink); } body[data-skin="v7"] .case-dot--live { background: #77C79E; box-shadow: 0 0 8px rgba(119,199,158,.6); } body[data-skin="v7"] .case-dot--sched { background: var(--k-cold); box-shadow: 0 0 8px rgba(188,127,219,.5); } body[data-skin="v7"] .pan__line s { color: var(--k-teal); } body[data-skin="v7"] .pan__line.is-alarm s { color: var(--k-alarm); } body[data-skin="v7"] .pan__foot { color: var(--pan-dim); } body[data-skin="v7"] .pan__track { border-radius: 3px; } body[data-skin="v7"] .pan__fill { border-radius: 3px; } /* --------------------------------------------------------------------------- 7. ГРАФИКИ: серии стиля, мягкое свечение кривой ------------------------------------------------------------------------- */ body[data-skin="v7"] .wave-chart .line { filter: drop-shadow(0 0 6px rgba(233,184,122,.28)); } /* на широком экране кривая масштабируется вместе с viewBox — держим её тонкой */ @media (min-width: 900px) { body[data-skin="v7"] .case-find .wave-chart .line { stroke-width: 1.4; } } body[data-skin="v7"] .wave-chart .fill { opacity: .13; } body[data-skin="v7"] .wave-chart .grid { stroke-dasharray: 2 5; } body[data-skin="v7"] .wave-chart .zone-neg { opacity: .09; } body[data-skin="v7"] .wave-tip { background: #0E0B08; color: var(--ink-strong); border: 1px solid var(--pan-edge); box-shadow: 0 8px 24px rgba(0,0,0,.6); } body[data-skin="v7"] .wave-legend span { color: var(--pan-dim); } body[data-skin="v7"] .case-cols i { border-radius: 3px 3px 0 0; } /* --------------------------------------------------------------------------- 8. ЗАКЛЮЧЕНИЕ: строка итогов + вердикт + чёрная плашка с правилом ------------------------------------------------------------------------- */ body[data-skin="v7"] .case-final__totals { border-radius: 14px; } body[data-skin="v7"] .case-total b { color: var(--pan-ink); } body[data-skin="v7"] .case-total b.is-ok { color: #77C79E; } body[data-skin="v7"] .case-total b.is-alarm { color: var(--k-alarm); } body[data-skin="v7"] .case-final__verdict { padding: 22px; border-radius: 16px; background: linear-gradient(180deg, #241D15, #1B1610); border: var(--ln-thin) solid rgba(233,184,122,.28); box-shadow: var(--shadow-soft); } body[data-skin="v7"] .case-verdict, body[data-skin="v7"] .case-rec { color: var(--ink-dim); } body[data-skin="v7"] .case-verdict b, body[data-skin="v7"] .case-rec b { color: var(--ink-strong); } body[data-skin="v7"] .case-verdict .pan__chip--alarm { color: var(--camel); border-color: rgba(233,184,122,.55); background: var(--camel-tint); box-shadow: 0 0 14px rgba(233,184,122,.22); } /* чёрная плашка-футер с правилом разбора — приём кадров источника */ body[data-skin="v7"] .case-block:not(.case-pack-std) .case-final__verdict .case-fine { margin: 22px -22px -22px; padding: 14px 20px; border: 0; border-top: var(--ln-thin) solid rgba(233,184,122,.22); border-radius: 0 0 15px 15px; background: #0C0906; font-size: 10.5px; line-height: 1.7; letter-spacing: .04em; color: var(--pan-dim); text-align: center; } body[data-skin="v7"] .case-block:not(.case-pack-std) .case-final__verdict .case-fine::before { content: "правило"; display: inline-block; margin-right: 10px; vertical-align: 1px; color: var(--camel); border: 1px solid rgba(233,184,122,.5); border-radius: 6px; padding: 2px 7px; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 12px rgba(233,184,122,.2); } /* --------------------------------------------------------------------------- 9. Мини-терминал и кнопки ------------------------------------------------------------------------- */ body[data-skin="v7"] .term { --t-acc: #77C79E; --t-bg: #120F0B; --t-face: #1A150F; --t-line: rgba(245,239,230,.09); --t-ink: #EFE7DA; --t-dim: #948878; --t-err: #E0707E; border-radius: 14px; } body[data-skin="v7"] .term__go { border-radius: 8px; box-shadow: 0 0 14px rgba(119,199,158,.18); } body[data-skin="v7"] .term__pre { border-radius: 8px; } body[data-skin="v7"] .btn { border-radius: 999px; } body[data-skin="v7"] .btn--primary { color: #1A1208; background: var(--camel); border-color: var(--camel); box-shadow: 0 6px 22px rgba(233,184,122,.22); } body[data-skin="v7"] .btn--primary:hover { color: #1A1208; background: var(--camel-deep); border-color: var(--camel-deep); } body[data-skin="v7"] .simpage__back a:hover { color: var(--camel-deep); } /* --------------------------------------------------------------------------- 10. ЭКСПЛЕЙНЕР (.exp-*): свечение акцентов и тонкая настройка под тёмную гамму. Каркас компонентов — в main.css, здесь только то, что делает их «этим стилем»: мягкое внешнее свечение на обводках, глубина панелей, компактный фильтр темы. ------------------------------------------------------------------------- */ body[data-skin="v7"] .exp-card, body[data-skin="v7"] .exp-main { box-shadow: var(--shadow-soft); } /* мягкое свечение акцента в верхнем углу панели — приём кадров источника */ body[data-skin="v7"] .exp-card > .exp-card__meta::before { content: ""; position: absolute; left: -40px; top: -60px; width: 220px; height: 160px; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 14%, transparent), transparent); pointer-events: none; } body[data-skin="v7"] .exp-rub b, body[data-skin="v7"] .exp-state, body[data-skin="v7"] .exp-card__chips span { box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 16%, transparent); } body[data-skin="v7"] .exp-rub b { background: color-mix(in srgb, var(--acc) 12%, transparent); } body[data-skin="v7"] .exp-hex { box-shadow: 0 0 20px color-mix(in srgb, var(--acc) 14%, transparent); } body[data-skin="v7"] .exp-claims span { background: rgba(245,239,230,.03); } body[data-skin="v7"] .exp-strip { background: #0E0B08; color: var(--pan-dim); } body[data-skin="v7"] .exp-strip b { color: var(--camel-deep); } body[data-skin="v7"] .exp-log .pan__line s { color: var(--k-teal); } body[data-skin="v7"] .exp-log .pan__line.is-alarm s { color: var(--camel); } body[data-skin="v7"] .exp-legend em { color: var(--ink-faint); } /* ползунок часа реакции в панели 03 — в акценте своей карточки */ body[data-skin="v7"] .exp-card input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; display: block; margin: 0; height: 22px; background: transparent; cursor: pointer; } body[data-skin="v7"] .exp-card input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--pan-grid); border-radius: 2px; } body[data-skin="v7"] .exp-card input[type="range"]::-moz-range-track { height: 2px; background: var(--pan-grid); border-radius: 2px; } body[data-skin="v7"] .exp-card input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--acc); border: 2px solid var(--pan-bg); box-shadow: 0 0 0 1px var(--acc), 0 0 12px color-mix(in srgb, var(--acc) 45%, transparent); } body[data-skin="v7"] .exp-card input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--acc); border: 2px solid var(--pan-bg); box-shadow: 0 0 0 1px var(--acc); } /* глобальный фильтр темы: чипы со свечением, ряд не выше 30px */ body[data-skin="v7"] .exp-filter .wave-tab { border-radius: 7px; } body[data-skin="v7"] .exp-filter .wave-tab.is-on { box-shadow: inset 0 0 0 1px var(--tab-c, var(--camel)), 0 0 12px color-mix(in srgb, var(--tab-c, var(--camel)) 25%, transparent); } /* --------------------------------------------------------------------------- 11. СВЕДЕНИЕ С ЭТАЛОНОМ — правки по замеру кадров, не по описанию стиля. Каждый блок ниже закрывает один измеренный маркер расхождения. ------------------------------------------------------------------------- */ /* 11.0 ПЕРЕВОД ИНЛАЙН-АКЦЕНТОВ НА ЗАМЕРЕННУЮ ПАЛИТРУ. Разметка задаёт --acc инлайном (style="--acc:#E9B87A"), а DOM трогать нельзя. Атрибут-селектор + !important перекрывают инлайн, оставляя разметку как есть. Соответствие: реестровый (S 75–96%) → замеренный по кадру (S 40–50%). */ body[data-skin="v7"] [style*="#F59E0B"] { --acc: #E9B87A !important; } body[data-skin="v7"] [style*="#2DD4BF"] { --acc: #6FBFD2 !important; } body[data-skin="v7"] [style*="#A78BFA"] { --acc: #BC7FDB !important; } body[data-skin="v7"] [style*="#34D399"] { --acc: #77C79E !important; } /* 11.1 ПАНЕЛЬ = фон + тонировка своим акцентом + затухание от левой полосы. Замер: панель эталона не нейтральная, она подкрашена акцентом (#1B1714 у амберной, #171719 у фиолетовой), а от левой полосы внутрь идёт градиент ~14px. */ body[data-skin="v7"] .exp-card, body[data-skin="v7"] .exp-main { /* Замер по ПЛОЩАДИ (а не точкой) показал: панель эталона в массе почти нейтральна — медиана S 14%, — а S 26% даёт только полоса тепла у левого края. Значит тонировать надо не всю плоскость, а градиентом от полосы: сплошные 4,5% давали медиану S 27% и панель «ржавела». */ background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 17%, transparent) 0, color-mix(in srgb, var(--acc) 5%, transparent) 24px, color-mix(in srgb, var(--acc) 2%, transparent) 90px, transparent 190px), color-mix(in srgb, var(--acc) 1.5%, #141311); border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent); border-radius: 12px; /* НАРУЖНОГО свечения у панели в эталоне НЕТ — панель врезана в фон обычной тенью. Ореол по периметру был перебором итерации 1. */ box-shadow: 0 12px 30px rgba(0,0,0,.5); } /* полоса слева: замер дал 3px в кадре 1080 → 4px на нашей ширине 1440, пик V55%. Ореол у полосы короткий: по профилю пикселей затухание ~14px, не «зарево». */ body[data-skin="v7"] .exp-card::before, body[data-skin="v7"] .exp-main::before { /* сама полоса в эталоне НЕ на полной яркости: пик #92806A / #87698D — V 55–57%, а не V 91% чистого акцента. Чистый акцент делал её «лампочкой». */ width: 4px; opacity: 1; background: color-mix(in srgb, var(--acc) 66%, #141311); border-radius: 12px 0 0 12px; box-shadow: 0 0 9px color-mix(in srgb, var(--acc) 38%, transparent); } /* 11.1a ПЛОТНОСТЬ КАДРА. У эталона фигура занимает бОльшую долю панели, а воздуха между чипами и фигурой почти нет. Вертикальную разреженность самих схем задаёт viewBox в разметке (0 0 560 160) — её без правки DOM не сжать, поэтому подтягиваем контейнер. */ body[data-skin="v7"] .exp-fig { margin-top: 12px; } /* на узком экране 190px градиента — это почти вся ширина панели, панель «ржавеет» */ @media (max-width: 640px) { body[data-skin="v7"] .exp-card, body[data-skin="v7"] .exp-main { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 17%, transparent) 0, color-mix(in srgb, var(--acc) 4%, transparent) 20px, transparent 84px), color-mix(in srgb, var(--acc) 1.5%, #141311); } } @media (min-width: 1025px) { body[data-skin="v7"] .exp-fig { height: 152px; } body[data-skin="v7"] .exp-card--ctrl .exp-fig { height: 124px; } body[data-skin="v7"] .exp-card { min-height: 322px; } /* вердикт — не панель сетки: min-height сетки его распирал пустотой */ body[data-skin="v7"] .exp-verdict { min-height: 0; } } body[data-skin="v7"] .exp-card__claim { margin-top: 12px; } body[data-skin="v7"] .exp-card__tail::before { margin: 12px 0 10px; } body[data-skin="v7"] .exp-card:hover { border-color: color-mix(in srgb, var(--acc) 46%, transparent); } /* 11.2 ПРИЗРАЧНЫЙ НОМЕР в углу панели — приём кадров (крупный глиф под контентом). Через counter, разметку не трогаем. */ body[data-skin="v7"] .exp-grid { counter-reset: expc; } body[data-skin="v7"] .exp-card { counter-increment: expc; } body[data-skin="v7"] .exp-card::after { content: counter(expc, decimal-leading-zero); position: absolute; right: -14px; bottom: -30px; z-index: 0; pointer-events: none; font-family: var(--sans); font-weight: 700; font-size: 96px; line-height: 1; letter-spacing: -.05em; /* в эталоне глиф едва проступает и срезан краем — 7% читались как дефект */ color: color-mix(in srgb, var(--acc) 4%, transparent); } body[data-skin="v7"] .exp-card > * { position: relative; z-index: 1; } /* вердикт — не панель доказательства, номера у него нет */ body[data-skin="v7"] .exp-verdict::after { content: none; } /* 11.2a ОДИН ЦВЕТ НА ПАНЕЛЬ — в лестнице тоже. В эталоне (кадр 34) все ступени идут в гамме самой панели, и ровно одна подсвечена контрастным холодным. Разметка красит каждую ступень своим цветом — радуга, которой в эталоне нет. Перекрываем, DOM не трогая. */ body[data-skin="v7"] .exp-main .exp-rung { --acc: #E9B87A !important; } body[data-skin="v7"] .exp-main .exp-ladder > .exp-rung:last-child { --acc: #6FBFD2 !important; } /* 11.3 ГЕКСАГОНЫ: заливка ГОРИТ, и горит не у всех сразу. Замер кадра 14: верхний узел #7A4387 (S50% V53%), остальные V10–15%. Лестница в DOM идёт 01→04, на экране перевёрнута — значит «горит» last-child. */ body[data-skin="v7"] .exp-hex::before { inset: 1.5px; background: color-mix(in srgb, var(--acc) 17%, #131211); } body[data-skin="v7"] .exp-hex { box-shadow: none; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--acc) 22%, transparent)); } body[data-skin="v7"] .exp-ladder > .exp-rung:nth-last-child(2) .exp-hex::before { background: color-mix(in srgb, var(--acc) 27%, #131211); } /* горящий узел: замер эталона #7A4387 (V 53%) при кромке V 71–80% */ body[data-skin="v7"] .exp-ladder > .exp-rung:last-child .exp-hex::before { background: color-mix(in srgb, var(--acc) 56%, #131211); } body[data-skin="v7"] .exp-ladder > .exp-rung:last-child .exp-hex { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--acc) 55%, transparent)); } body[data-skin="v7"] .exp-ladder > .exp-rung:last-child .exp-hex u { color: var(--acc); } /* узел на рельсе — точка с ореолом, как в кадрах */ body[data-skin="v7"] .exp-rung__rail i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent), 0 0 14px color-mix(in srgb, var(--acc) 70%, transparent); } /* 11.4 ЧИПЫ И БЕЙДЖИ: замер эталона — фон тонирован акцентом (V~20%), обводка яркая (V~53%), текст в акценте, а не серый. */ /* замер чипа эталона: фон V 20%, обводка V 53%, текст в акценте. 16% заливки давали V 39% — вдвое ярче эталона, чип «пузырился». */ body[data-skin="v7"] .exp-rub b, body[data-skin="v7"] .exp-state, body[data-skin="v7"] .exp-card__chips span { border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); /* текст чипа темнее акцента, а не светлее: эталон даёт V ~50% при обводке V 53% */ color: color-mix(in srgb, var(--acc) 82%, #141311); box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 18%, transparent); } /* текст бейджа в эталоне НЕ белый, а в акценте: замер чипа дал текст #597581 при обводке #6E878C. Белый #FFF6EA поднимал яркость цветной зоны вдвое. */ body[data-skin="v7"] .exp-rub b { background: color-mix(in srgb, var(--acc) 18%, transparent); color: color-mix(in srgb, var(--acc) 92%, #FFFFFF); } body[data-skin="v7"] .exp-rub span { color: var(--ink-faint); } /* тезисы hero — те же чипы, но в главном акценте страницы */ body[data-skin="v7"] .exp-claims span { border-color: rgba(233,184,122,.40); background: rgba(233,184,122,.07); color: #D9C6A8; box-shadow: 0 0 12px rgba(233,184,122,.12); } body[data-skin="v7"] .exp-claims b { color: var(--camel-deep); } body[data-skin="v7"] .exp-stepper a { border-color: rgba(233,184,122,.28); color: #9C8B72; } body[data-skin="v7"] .exp-stepper a:first-child { border-color: var(--camel); color: var(--camel-deep); box-shadow: 0 0 12px rgba(233,184,122,.22); } /* 11.5 ПЛИТКИ-ЦИФРЫ: цифра горит акцентом, а не белым «как везде». Ряд одноцветный — в эталоне (кадр 14, «WHAT ONE BUDGET COVERS») все три строки ряда идут одним амбером. Радуга из итерации 1 была отсебятиной. */ body[data-skin="v7"] .exp-tile { background: linear-gradient(90deg, rgba(233,184,122,.09), transparent 18px), #141311; border-color: rgba(233,184,122,.20); } body[data-skin="v7"] .exp-tile b { color: var(--camel-deep); text-shadow: 0 0 22px rgba(233,184,122,.30); } /* 11.6 МИНИ-СХЕМЫ: у эталона узлы залиты, а не намечены. 13% → 30%, обводка 85% */ body[data-skin="v7"] .exp-scheme .node { fill: color-mix(in srgb, var(--acc) 23%, transparent); stroke: color-mix(in srgb, var(--acc) 80%, transparent); stroke-width: 1.2; } body[data-skin="v7"] .exp-scheme .link { stroke: color-mix(in srgb, var(--acc) 55%, transparent); } body[data-skin="v7"] .exp-scheme .dot { fill: var(--acc); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--acc) 80%, transparent)); } body[data-skin="v7"] .exp-scheme .tag { fill: color-mix(in srgb, var(--acc) 92%, #FFFFFF); } body[data-skin="v7"] .exp-scheme .plot { stroke-width: 1.6; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 55%, transparent)); } body[data-skin="v7"] .exp-scheme .plotfill { opacity: .17; } body[data-skin="v7"] .exp-card .wave-chart .line { stroke: var(--acc); stroke-width: 1.6; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--acc) 55%, transparent)); } body[data-skin="v7"] .exp-card .wave-chart .fill { fill: var(--acc); opacity: .16; } body[data-skin="v7"] .exp-card .wave-chart circle { fill: var(--acc); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 80%, transparent)); } /* 11.7 БАРЫ: заливка светится, дорожка глубже */ body[data-skin="v7"] .exp-bar__track { background: rgba(245,239,230,.06); } body[data-skin="v7"] .exp-bar__fill { box-shadow: 0 0 10px var(--sc, var(--camel)); } body[data-skin="v7"] .exp-bar.is-on > b { color: var(--acc); } /* 11.8 МИКРОТИПОГРАФИКА: моно-подписи эталона мельче и теплее наших */ body[data-skin="v7"] .exp-cap { font-size: 9.5px; letter-spacing: .18em; color: #6E6455; } body[data-skin="v7"] .exp-cap em { color: var(--camel); } body[data-skin="v7"] .exp-card__take { font-size: 10.5px; color: #7C7365; } body[data-skin="v7"] .exp-main__foot { font-size: 10.5px; color: #7C7365; } body[data-skin="v7"] .exp-rail__tile span, body[data-skin="v7"] .exp-legend em { color: #6E6455; } body[data-skin="v7"] .exp-hair { background: rgba(245,239,230,.07); } body[data-skin="v7"] .exp-card__tail::before { background: rgba(245,239,230,.07); } /* 11.9 ФИЛЬТР ТЕМЫ: активная вкладка в эталоне горит заливкой, не только обводкой */ body[data-skin="v7"] .exp-filter .wave-tab.is-on { background: color-mix(in srgb, var(--tab-c, var(--camel)) 18%, transparent); border-color: var(--tab-c, var(--camel)); box-shadow: 0 0 16px color-mix(in srgb, var(--tab-c, var(--camel)) 40%, transparent); } body[data-skin="v7"] .exp-filter .wave-tab i { box-shadow: 0 0 9px var(--tab-c, var(--camel)); } /* 11.10 ПЛАШКА-ПРАВИЛО: в эталоне это чёрная лента с акцентными словами */ body[data-skin="v7"] .exp-strip { background: #060606; color: #6E6455; border: 1px solid rgba(233,184,122,.16); } body[data-skin="v7"] .exp-strip b { color: var(--camel-deep); text-shadow: 0 0 16px rgba(233,184,122,.3); } /* ПРИМЕЧАНИЕ. Блок «пакет для внедрения» (.case-pack-std) скин НЕ трогает — он обязан оставаться в корневом светлом стиле на всех кейсах. Поэтому пункт ТЗ «сделать кнопку пакета outlined-чипом» здесь сознательно не выполнен: изоляция блока важнее единообразия чипов. */