/* «Реактор» — тема по референсу владельца (build.nvidia.com), 31.08.2026. Самая тёмная тема пульта и единственная, где глубину держит НЕ тень, а рамка: на графите #0C0C0C тень невидима физически — под ней тот же чёрный. Отсюда три приметы языка, снятые прямо со страницы референса: — лист почти чёрный, карточка на один шаг светлее и обведена волоском; — кислотный лайм #76B900 работает ТОЛЬКО акцентом: рамка кнопки, чип, значок, «где я». Заливка лаймом — одна первичная кнопка на экран; — скругления маленькие: 8px карточка, 4px контрол (у остальных тем 12–14). Про буквы. У референса свой NVIDIA Sans — нейтральный узкий гротеск. Ближе всего из уже вшитых в пульт — 'Inter' (он и стоит в теле), поэтому в этой теме заголовки переводим с 'Plus Jakarta Sans' на него же: жакарта круглее и мягче, рядом с графитом читается «детской» и ломает язык референса. Про зелёный. Лайм занят брендом, поэтому «успех» переехал на изумруд #00BB7F из той же палитры референса. Если бы оба были лаймовыми, светофор сборки слился бы с кнопками и «где я», и экран потерял бы навигацию. Замеры контраста на карточке #0E0E0E (порог 4,5 для текста): белый 19,2 · --muted 8,5 · --faint 5,95 · лайм 7,9 · изумруд 7,6 · янтарь 8,97 · красный 5,5 · циан 10,5. Чернила --ink на заливках: 5,6–10,9. 🔴 Файл подключается ПОСЛЕ style.css/mobile.css — спор одинаковых по силе правил решает порядок. */ html.theme-reaktor{ /* Плоскости. Лист графитовый, карточка на шаг светлее, вторая плоскость (зебра, поля, наведение) — ещё на шаг. Разница мала намеренно: у референса карточку от фона отделяет рамка, а не подложка. */ --bg:#060606;--surface:#0C0C0C;--surface2:#161616; /* Рамка карточки 1,3:1 — работа геометрическая, не контрастная. Кромка контрола (--border2) вдвое ярче: её человек должен видеть, а не угадывать. */ --border:rgba(255,255,255,.20);--border2:rgba(255,255,255,.34); --text:#FFFFFF;--muted:#ADADAD;--faint:#8F8F8F; /* Акцент. --ink графитовый: белый по лайму даёт 2,4 — на кнопке это нечитаемо, поэтому у референса текст на зелёном тоже чёрный. */ --brand:#76B900;--brand-soft:rgba(118,185,0,.14);--ink:#0C0C0C; --green:#00BB7F;--green-soft:rgba(0,187,127,.14); --amber:#F99C00;--amber-soft:rgba(249,156,0,.14); --red:#FE3F3F;--red-soft:rgba(254,63,63,.15); --teal:#A5DE15;--teal-soft:rgba(165,222,21,.14); /* Геометрия референса: 8 / 4. Это самая «строгая» тема набора. */ --r:8px;--r-sm:4px; /* Тень оставлена только для всплывающих слоёв — им нужно оторваться от листа. На карточках она снята явно ниже: на графите это грязь, а не глубина. */ --shadow:0 2px 4px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.5); --btn-hover-filter:brightness(1.12); } html.theme-reaktor,html.theme-reaktor input,html.theme-reaktor select, html.theme-reaktor textarea{color-scheme:dark} html.theme-reaktor body{background:var(--bg)} /* Заголовки — тем же гротеском, что и тело (см. шапку файла), с плотным трекингом: у референса крупный заголовок собран, а не разрежен. */ html.theme-reaktor h1,html.theme-reaktor h2,html.theme-reaktor h3, html.theme-reaktor .topbar h1,html.theme-reaktor .page-h2, html.theme-reaktor .card-title,html.theme-reaktor .kpi-val, html.theme-reaktor .auth-title,html.theme-reaktor .action-title{ font-family:'Inter',system-ui,-apple-system,sans-serif;letter-spacing:-.02em; } /* Заголовки у референса приглушены до #E0E0E0 — чистый белый оставлен телу. Разница в один шаг, но именно она отделяет «шапку блока» от его содержимого (замер: 14,6 к карточке — выше порога с запасом). */ html.theme-reaktor h1,html.theme-reaktor h2,html.theme-reaktor h3, html.theme-reaktor .page-h2,html.theme-reaktor .card-title,html.theme-reaktor .action-title{ color:#E0E0E0; } /* ── Фон ──────────────────────────────────────────────────── 🔴 Подобран НЕ по CSS референса, а по его ПИКСЕЛЯМ — так вернее. Замер скриншота build.nvidia.com (1440×900) по восьми точкам фона: слева вверху #0E1108 справа вверху #0B1011 слева внизу #0C0E07 центр внизу #0E130E справа внизу #0A0D0E середина #060606 ← глубже, чем по краям То есть у него не «чёрный лист», а тёмная толща с холодным отливом: зелёный натекает слева, голубой справа, сверху и снизу, а середина уходит в глубину. Владелец назвал это «как будто в воде» — и он прав, ровно так это и сделано. Повторяем эффект четырьмя пятнами по углам поверх глубокой базы. Маски референса не годятся: на нашей разметке верхняя полоса не отрисовывалась вовсе (проверено пикселем — цвета не было), а пятна работают везде. */ html.theme-reaktor{--bg:#060606} html.theme-reaktor body{background:#060606} html.theme-reaktor .aurora-bg{ opacity:1; background: radial-gradient(1250px 660px at 0% 0%,rgba(191,242,48,.13),transparent 70%), radial-gradient(1250px 660px at 100% 0%,rgba(124,215,254,.13),transparent 70%), radial-gradient(1150px 540px at 0% 100%,rgba(191,242,48,.10),transparent 72%), radial-gradient(1150px 540px at 100% 100%,rgba(124,215,254,.10),transparent 72%), #060606; } html.theme-reaktor .aurora-bg .ga{background:transparent} /* Пыльца. У референса поверх фона работают ДВА canvas с частицами — мелкие зелёные точки по всему полю (сверено на странице: canvas.pointer-events-none absolute inset-[0]). Без них графит выглядит пустым — владелец так и сказал: «теперь фон чёрный». Свой генератор частиц у пульта уже есть: скрипт base.html сыплет 340 штук .aurora-star. Поэтому не гасим их, а перекрашиваем под референс. !important обязателен: скрипт красит каждую 11-ю и 13-ю точку инлайном (белым и тёплым), а инлайн сильнее обычного правила. Крупные точки при этом остаются крупными — россыпь получается живой, как у исходника. */ html.theme-reaktor .aurora-star{ background:#76B900!important; box-shadow:0 0 4px rgba(118,185,0,.5)!important; filter:brightness(.85); } /* 🔴 Узор фона (html.bg-dots / bg-grid / bg-contour) выбирается ОТДЕЛЬНО от темы и в style.css гасит наш слой через !important, рисуя поверх листа сетку точек от цвета текста. На «Реакторе» это читалось звёздным небом поверх работы (экран сборки по проходам, скриншот владельца 01.09.2026), а у референса никакого узора нет вовсе. Поэтому тема перебивает узор: она сама решает, как выглядит её фон. Классы стоят на одном элементе (html), поэтому наш селектор специфичнее чужого и выигрывает при равном !important. Кто хочет точки — берёт другую тему. */ html.theme-reaktor.bg-dots body,html.theme-reaktor.bg-grid body, html.theme-reaktor.bg-contour body{background-image:none} html.theme-reaktor.bg-none .aurora-bg,html.theme-reaktor.bg-dots .aurora-bg, html.theme-reaktor.bg-grid .aurora-bg,html.theme-reaktor.bg-contour .aurora-bg{opacity:1!important} /* ── Шапка ────────────────────────────────────────────────── Референс не отделяет её ни тенью, ни стеклом — только волоском. Блюр снимаем явно: полупрозрачная плёнка поверх графита даёт грязно-серый, а не «стекло». */ html.theme-reaktor .nv-head{ min-height:48px;height:48px; background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom:0;box-shadow:none; } /* Пункты шапки: 14px/400 белым на 60 %, активный добирает до 100 % (замер). */ html.theme-reaktor .nv-dom{font-size:14px;font-weight:400;color:rgba(255,255,255,.6)} /* Активный домен подчёркнут лаймом, а не залит: заливка в этом языке значит «кнопка», а раздел меню — не кнопка. */ html.theme-reaktor .nv-dom.is-on{background:transparent;color:var(--text);box-shadow:inset 0 -2px 0 var(--brand)} html.theme-reaktor .nv-dom:hover{background:var(--hover);color:var(--text)} html.theme-reaktor .nv-logo-erp{letter-spacing:.02em} /* Поиск — чёрное поле в рамке (у референса он именно обведён, а не залит). */ /* Поиск в шапке — поле на ступень СВЕТЛЕЕ шапки, а не чёрная дыра в ней: чистый #000 на графите читается провалом, особенно на телефоне, где поле занимает половину строки. */ /* Поиск референса — ПИЛЮЛЯ: радиус 50px, кромка #707070, кегль 12,8px. */ html.theme-reaktor .nv-search{ background:transparent;border:1px solid #707070;border-radius:50px;padding-left:4px; } html.theme-reaktor .nv-search input{font-size:12.8px} html.theme-reaktor .nv-search:focus-within{border-color:var(--brand)} html.theme-reaktor .topbar{background:transparent;border-bottom:1px solid var(--border)} /* ── Колонка разделов ─────────────────────────────────────── Тот же графит, что лист: у референса левая панель не отделена подложкой. «Где я» — плашка второй плоскости с лаймовой полосой (полоса уже нарисована базовым ::before, ей достаточно цвета). */ html.theme-reaktor .nv-side{ background:#0C0C0C;backdrop-filter:none;-webkit-backdrop-filter:none; border-right:1px solid var(--border); } html.theme-reaktor .nv-item{border-radius:var(--r-sm)} html.theme-reaktor .nv-item.is-on{background:var(--surface2);color:var(--text);box-shadow:none;font-weight:600} html.theme-reaktor .nv-item.is-on::before{background:var(--brand)} html.theme-reaktor .nv-item.is-on .nv-item-ico{color:var(--brand)} html.theme-reaktor .nv-item:hover{background:var(--hover)} html.theme-reaktor .nv-sec,html.theme-reaktor .nv-sec-btn{letter-spacing:.06em;text-transform:uppercase} /* ── Карточки: рамка вместо тени ──────────────────────────── Главное правило языка. Тень снимаем явно — базовая из style.css осталась бы грязным пятном под карточкой. Наведение зажигает лаймовую рамку: это и есть единственный «живой» жест темы, взятый с карточек моделей референса. Подъёма (translateY) у него нет — карточки стоят на месте. */ html.theme-reaktor .card,html.theme-reaktor .kpi,html.theme-reaktor .action{ border:1px solid var(--border);box-shadow:none;border-radius:var(--r); background:var(--surface); } html.theme-reaktor .card:hover,html.theme-reaktor .action:hover{ transform:none;border-color:var(--brand); box-shadow:0 0 0 1px rgba(118,185,0,.25); } html.theme-reaktor .action{transition:border-color .18s ease,box-shadow .18s ease} html.theme-reaktor .content{padding:36px 40px 72px} html.theme-reaktor .card-head{background:transparent;border-bottom:1px solid var(--border);padding:18px 24px} html.theme-reaktor .card-body{padding:20px 24px} html.theme-reaktor .card.pad{padding:22px 24px} html.theme-reaktor .kpi{padding:22px 24px} html.theme-reaktor .action{padding:22px} html.theme-reaktor .kpi-grid,html.theme-reaktor .action-grid{gap:18px;margin-bottom:26px} html.theme-reaktor .pill-row{gap:10px;margin-bottom:18px} html.theme-reaktor .sec-tabs{gap:10px;margin-bottom:18px} html.theme-reaktor .page-hd,html.theme-reaktor .page-header{margin-bottom:28px} /* Кегли референса: секция 24/700 #E0E0E0, подпись 18/400 белым, имя в карточке 16/500 белым. */ html.theme-reaktor .page-h2{font-size:24px;font-weight:700;line-height:30px;color:#E0E0E0} html.theme-reaktor .page-sub{font-size:18px;font-weight:400;line-height:27px;color:#FFF} html.theme-reaktor .card-title{font-size:16px;font-weight:500;line-height:24px;color:#FFF} html.theme-reaktor .action.primary{ border-color:rgba(118,185,0,.45);background:linear-gradient(180deg,rgba(118,185,0,.07),transparent 60%),var(--surface); } /* Значки карточек — квадраты со скруглением языка, а не «таблетки» 9–11px. */ html.theme-reaktor .kpi-ico{border-radius:var(--r-sm)} html.theme-reaktor .action-ico{border-radius:var(--r-sm)} html.theme-reaktor .kpi-val{letter-spacing:-.03em} /* ── Кнопки и чипы ────────────────────────────────────────── Числа сняты со страницы: высота 40, padding 7/11, радиус 4, 14px/700, gap 8. 🔴 Заливки у референса нет ни на одной кнопке — обе прозрачные и различаются ТОЛЬКО цветом кромки: главное действие #76B900 («More Models»), нейтральное #A7A7A7 («Start Now»); слово внутри белое в обоих случаях. */ html.theme-reaktor .main .btn,html.theme-reaktor .main button:not([class]){ min-height:40px;padding:7px 11px;border-radius:4px;gap:8px; font-size:14px;font-weight:700;line-height:14px; background:transparent;color:#FFF;box-shadow:inset 0 0 0 1px #76B900; } html.theme-reaktor .main .btn:hover,html.theme-reaktor .main button:not([class]):hover{ filter:none;background:rgba(118,185,0,.12);color:#FFF;box-shadow:inset 0 0 0 1px #76B900; } html.theme-reaktor .main .btn.sm,html.theme-reaktor .main .btn.xs{min-height:32px;padding:5px 10px;font-size:13px} html.theme-reaktor .main .btn.ghost,html.theme-reaktor .main button.ghost{ background:transparent;color:#FFF;box-shadow:inset 0 0 0 1px #A7A7A7; } html.theme-reaktor .main .btn.ghost:hover,html.theme-reaktor .main button.ghost:hover{ background:rgba(255,255,255,.06);color:#FFF;box-shadow:inset 0 0 0 1px #A7A7A7; } /* Опасного и подтверждающего действия у референса на витрине нет — держим тот же строй, цвет смысла уходит в кромку. */ html.theme-reaktor .main .btn.danger{background:transparent;color:#FFF;box-shadow:inset 0 0 0 1px var(--red)} html.theme-reaktor .main .btn.success{background:transparent;color:#FFF;box-shadow:inset 0 0 0 1px var(--green)} html.theme-reaktor .main .btn.danger:hover{background:rgba(254,63,63,.14)} html.theme-reaktor .main .btn.success:hover{background:rgba(0,187,127,.14)} /* Чип: 12px/500, строчными, цвет категории и в слове, и в кромке. */ html.theme-reaktor .chip{ background:transparent;border:1px solid var(--border2);color:var(--muted); font-size:12px;font-weight:500;line-height:18px;text-transform:lowercase; } html.theme-reaktor .chip.brand{color:var(--brand);border-color:var(--brand);background:transparent} html.theme-reaktor .chip.green,html.theme-reaktor .chip.ok{color:var(--green);border-color:var(--green);background:transparent} html.theme-reaktor .chip.amber,html.theme-reaktor .chip.warn{color:var(--amber);border-color:var(--amber);background:transparent} html.theme-reaktor .chip.red{color:var(--red);border-color:var(--red);background:transparent} html.theme-reaktor .chip.teal{color:var(--teal);border-color:var(--teal);background:transparent} html.theme-reaktor .badge.off-shift{background:var(--surface2);color:var(--muted)} /* ── Таблицы ──────────────────────────────────────────────── Зебры у референса нет: строки делит волосок темнее рамки карточки — на графите обычный --border рябил бы решёткой на длинном списке. Шапка — мелкие серые прописные. */ html.theme-reaktor .tbl th{ color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;font-weight:600; border-bottom:1px solid var(--border); } html.theme-reaktor .tbl tbody td{border-bottom:1px solid #1E1E1E} html.theme-reaktor .tbl tbody tr:nth-of-type(even) td{background:transparent} html.theme-reaktor .tbl tbody tr:hover td{background:#151515} html.theme-reaktor .tbl tbody tr.cell-band td{background:var(--surface2)} /* ── Поля ввода ───────────────────────────────────────────── Перечень типов повторяет style.css целиком: урезанный оставлял бы email/password/time на чужом фоне — серые окна в форме входа. */ html.theme-reaktor input:not([type]),html.theme-reaktor input[type=text], html.theme-reaktor input[type=email],html.theme-reaktor input[type=password], html.theme-reaktor input[type=number],html.theme-reaktor input[type=search], html.theme-reaktor input[type=date],html.theme-reaktor input[type=datetime-local], html.theme-reaktor input[type=time],html.theme-reaktor select,html.theme-reaktor textarea{ background:var(--surface2);border-color:var(--border2);color:var(--text);border-radius:var(--r-sm); } html.theme-reaktor input::placeholder,html.theme-reaktor textarea::placeholder{color:var(--faint)} /* 🔴 Поле поиска в шапке — не самостоятельный инпут, а начинка обёртки .nv-search: рамку и фон носит она. Правило по типам выше по специфичности, чем nav.css, и на телефоне чёрный прямоугольник инпута (44 px) вылезал из обёртки (34 px) вторым прямоугольником — поймано на рендере. Возвращаем его в прозрачность. */ html.theme-reaktor .nv-search input,html.theme-reaktor .list-search input{ background:transparent;border:0;box-shadow:none; } html.theme-reaktor .nv-search input:focus,html.theme-reaktor .list-search input:focus{box-shadow:none} html.theme-reaktor .list-search:focus-within{border-color:var(--brand)} html.theme-reaktor input:focus,html.theme-reaktor select:focus,html.theme-reaktor textarea:focus{ border-color:var(--brand);box-shadow:0 0 0 3px rgba(118,185,0,.22); } /* ── Поверхности браузера ─────────────────────────────────── Выделение, каретка, полоса прокрутки и кольцо фокуса приезжают из системы и не принадлежат ни одной теме: на графите они выглядят как чужая деталь. Красим их из палитры — это самое дешёвое, что отличает собранный экран от свёрстанного. */ html.theme-reaktor ::selection{background:rgba(118,185,0,.32);color:#FFF} html.theme-reaktor{scrollbar-color:#3D3D3D transparent;scrollbar-width:thin} html.theme-reaktor input,html.theme-reaktor textarea{caret-color:var(--brand)} html.theme-reaktor :focus-visible{outline:2px solid var(--brand);outline-offset:2px} html.theme-reaktor ::-webkit-scrollbar{width:10px;height:10px} html.theme-reaktor ::-webkit-scrollbar-track{background:transparent} html.theme-reaktor ::-webkit-scrollbar-thumb{background:#2F2F2F;border-radius:99px;border:2px solid #0C0C0C} html.theme-reaktor ::-webkit-scrollbar-thumb:hover{background:#4A4A4A} /* Край листа: экран-копия МойСклада берёт var(--border) напрямую — на графите рамка 1,3:1 лист не отделяет, ему нужна кромка контрола. Имя файла в этом правиле намеренно без расширения: отбор тестов CI грепает статику по базовому имени. */ html.theme-reaktor .ms-copy{border-color:var(--border2)} /* ── Объём ────────────────────────────────────────────────────────────── «Как будто в воде» (владелец, 01.09.2026): экран должен читаться толщей, а не плоскостью. Толщу делают четыре слоя вместе, поодиночке ни один не даёт ощущения глубины: 1. виньетка — свет собран к центру, края уходят в темноту; 2. верхняя кромка карточки ловит свет, нижняя тонет (inset-блик + градиент); 3. под карточкой мягкая тень с большим размытием — она висит в толще; 4. хром темнее листа, карточка светлее — три яруса по глубине. 🔴 Тени здесь со смещением и большим размытием, без цветного ореола: ореол с нулевым смещением читается декором, а не глубиной. */ /* 1. Виньетка поверх фоновых пятен — края темнее середины. */ html.theme-reaktor .aurora-bg::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(130% 95% at 50% 42%,transparent 52%,rgba(0,0,0,.34) 100%); } /* 2–3. Карточка висит в толще: свет по верхней кромке, лёгкий скат вниз и мягкая тень под ней. Фон карточки остаётся кромочным, как у референса. */ /* Толща воды: карточка не кроет фон, а стоит В НЁМ — сквозь неё видно размытые пыльцу и отлив. Это и даёт «объём», которого не даёт ни тень, ни градиент по отдельности: глаз читает слой стекла над живым фоном. 🔴 Размытие включаем только на широком экране: на ТСД и телефонах склада backdrop-filter стоит кадров, а работать там надо быстро. */ html.theme-reaktor .card,html.theme-reaktor .kpi,html.theme-reaktor .action{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 46%), rgba(14,14,14,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 32px rgba(0,0,0,.55); } @media (min-width:901px){ html.theme-reaktor .card,html.theme-reaktor .kpi,html.theme-reaktor .action{ backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15); } } html.theme-reaktor .card:hover,html.theme-reaktor .action:hover{ border-color:var(--brand); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(118,185,0,.25); } /* Пилюли и кнопки — та же логика, но мельче: они ближе к поверхности. */ html.theme-reaktor .pill,html.theme-reaktor .main .btn,html.theme-reaktor .main button:not([class]){ box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 8px rgba(0,0,0,.4),inset 0 0 0 1px #76B900; } html.theme-reaktor .main .btn.ghost,html.theme-reaktor .main button.ghost{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 8px rgba(0,0,0,.4),inset 0 0 0 1px #A7A7A7; } /* Поля ввода — наоборот, УТОПЛЕНЫ: свет падает внутрь сверху. */ html.theme-reaktor input:not([type]),html.theme-reaktor input[type=text], html.theme-reaktor input[type=email],html.theme-reaktor input[type=password], html.theme-reaktor input[type=number],html.theme-reaktor input[type=search], html.theme-reaktor input[type=date],html.theme-reaktor input[type=datetime-local], html.theme-reaktor input[type=time],html.theme-reaktor select,html.theme-reaktor textarea{ box-shadow:inset 0 2px 6px rgba(0,0,0,.55); } /* 4. Ярусы: колонка и шапка глубже листа, карточка — ближе к зрителю. */ html.theme-reaktor .nv-side{ background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.5)); border-right:1px solid var(--border); } html.theme-reaktor .nv-head{ background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25)); border-bottom:1px solid rgba(255,255,255,.06); } /* Всплывающие слои — выше всех, тень длиннее. */ html.theme-reaktor .nv-found,html.theme-reaktor .nv-drop,html.theme-reaktor .menu{ box-shadow:0 18px 48px rgba(0,0,0,.65); }