/* =================================================================== КОРМУШКА — дизайн-система рабочего портала (liga-ui.css) Командный центр собственника + отделы + AI-агенты. AI-аналитик АРГУС. Движок унаследован от ядра liga: классы/ID/data-атрибуты сохранены 1-в-1. Ребрендинг — только поверхность (палитра «коралл/агро», типографика, акценты). Внутренние ключи тем сохранены для совместимости, подписи в пикере — агро. 5 тем (атрибут data-bg на ): goszakaz → «Зерно» (по умолчанию) тёплый тёмный, зерно-золото + фирменный коралл #f35c50 kontrakt → «Поле» агро-зелёный, свежая трава и всходы auktsion → «Закат» коралл/оранж закат над полем premium → «Лён» светлая тёплая, лён + коралловый акцент terminal → «Амбар» тёмное дерево амбара + янтарное свечение `light` — алиас светлой темы «Лён» для совместимости (liga-fx/academy/бары). Эффект-слои: fx-golddust (золотая пыль/зерно), fx-shimmer, fx-glare, fx-grain — см. блок ЭФФЕКТ-СЛОИ ниже. =================================================================== */ /* ───── ТОКЕНЫ ПО УМОЛЧАНИЮ = тема «Госзаказ» ───── */ :root{ /* типографика */ --sf:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Playfair Display",Georgia,"Times New Roman",serif; --mono:"JetBrains Mono","SF Mono",ui-monospace,monospace; --head-font:var(--sf); /* заголовки: sans, в «Премиум» переопределяется на serif */ /* текст */ --text:#f4ede4; --text2:#c9b8a6; --muted:#8b7a66; /* акценты (имена сохранены для движка: gold=основной, green=деньги и т.д.) */ --gold:#f0b24a; --gold2:#ffd584; --amber:#e0852f; /* зерно / янтарь */ --green:#54c98a; --money:#54c98a; --red:#ff6f61; --blue:#6aa6e6; --violet:#c193e6; --plat:#cdbfa9; /* «plat» = тёплый камень */ --steel:#9c8a72; /* фирменная агро-сталь */ /* поверхности */ --glass:rgba(30,20,14,.54); --bd:rgba(240,160,90,.16); --panel-2:rgba(255,255,255,.04); --radius:22px; --radius-sm:14px; /* скролл-бар */ --sb-col1:#f0b24a; --sb-col2:#9c8a72; /* фирменные градиенты-акценты (используются кнопками/нав/бейджами) */ --grad-accent:linear-gradient(135deg,#f35c50,#f0b24a); /* фирменный коралл → зерно */ --on-accent:#2a1206; /* текст на сплошном акценте */ --ring:rgba(243,92,80,.7); /* цвет курсор-кольца/риппла — коралл */ } /* =================================================================== ТЕМА 1 — «Зерно» (default). Тёплый тёмный: золото зерна + фирменный коралл. Амбар на закате: тёплое золото над глубоким тёмным деревом. =================================================================== */ [data-bg="goszakaz"]{ --text:#f5efe6; --text2:#cdbca9; --muted:#8d7c68; --gold:#f0b24a; --gold2:#ffd584; --amber:#e0852f; /* зерно / янтарь */ --green:#54c98a; --money:#54c98a; --red:#ff6f61; --blue:#6aa6e6; --violet:#c193e6; --plat:#cdbfa9; --steel:#9c8a72; --glass:rgba(34,22,15,.54); --bd:rgba(240,170,100,.16); --head-font:var(--sf); --sb-col1:#f0b24a; --sb-col2:#a8714a; --grad-accent:linear-gradient(135deg,#f35c50,#f0b24a); /* коралл → зерно */ --on-accent:#2a1206; --ring:rgba(243,92,80,.7); } [data-bg="goszakaz"] .scene{background:radial-gradient(ellipse 92% 50% at 50% -8%,#f35c5022,transparent 60%),radial-gradient(ellipse 78% 70% at 50% 8%,#3a2418,#231711 52%,#140d0b 100%)} [data-bg="goszakaz"] .b1{background:radial-gradient(circle,#f35c50,transparent 60%)} [data-bg="goszakaz"] .b2{background:radial-gradient(circle,#e0a23a,transparent 60%)} [data-bg="goszakaz"] .b3{background:radial-gradient(circle,#6fbf5a,transparent 62%)} /* =================================================================== ТЕМА 2 — «Поле». Агро-зелёный: свежая трава, всходы, поле. Молодая зелень кормовых культур под утренним солнцем. =================================================================== */ [data-bg="kontrakt"]{ --text:#f0f5e9; --text2:#bcccab; --muted:#7c8a6a; --gold:#86c545; --gold2:#aee07a; --amber:#5a9e2f; /* «gold»-акцент = всходы / трава */ --green:#43d98f; --money:#43d98f; --red:#ff6f61; --blue:#6abf8e; --violet:#bcd88e; --plat:#bcc9a8; --steel:#7c9168; --glass:rgba(22,28,16,.55); --bd:rgba(150,200,110,.16); --head-font:var(--sf); --sb-col1:#86c545; --sb-col2:#3a7a3a; --grad-accent:linear-gradient(135deg,#86c545,#3f9e5a); --on-accent:#0e2410; --ring:rgba(134,197,69,.7); } [data-bg="kontrakt"] .scene{background:radial-gradient(ellipse 80% 70% at 50% -6%,#243a1c,#1a2614 56%,#0c120a 100%)} [data-bg="kontrakt"] .b1{background:radial-gradient(circle,#5a9e2f,transparent 60%)} [data-bg="kontrakt"] .b2{background:radial-gradient(circle,#2f9e64,transparent 60%)} [data-bg="kontrakt"] .b3{background:radial-gradient(circle,#9bcf57,transparent 62%)} /* =================================================================== ТЕМА 3 — «Закат». Коралл/оранж закат над полем. Тёплый вечер: фирменный коралл бренда в полную силу. =================================================================== */ [data-bg="auktsion"]{ --text:#fdeee6; --text2:#e0b29e; --muted:#a8765f; --gold:#ff7a4d; --gold2:#ffb07a; --amber:#e85a3a; /* «gold»-акцент = закатный коралл-оранж */ --green:#5ad99a; --money:#5ad99a; --red:#ff5f6f; --blue:#e69a6a; --violet:#ff9e8a; --plat:#d6b4a0; --steel:#b07a5f; --glass:rgba(34,16,12,.58); --bd:rgba(255,120,80,.18); --head-font:var(--sf); --sb-col1:#ff7a4d; --sb-col2:#c0432f; --grad-accent:linear-gradient(135deg,#ff7a4d,#e0432f); --on-accent:#2a0f08; --ring:rgba(255,122,77,.8); } [data-bg="auktsion"] .scene{background:radial-gradient(ellipse 70% 60% at 50% -10%,#7a2f1c,transparent 60%),linear-gradient(180deg,#321410,#22100c 55%,#120806 100%)} [data-bg="auktsion"] .b1{background:radial-gradient(circle,#e0552f,transparent 60%)} [data-bg="auktsion"] .b2{background:radial-gradient(circle,#ff9a4d,transparent 60%)} [data-bg="auktsion"] .b3{background:radial-gradient(circle,#d63a4f,transparent 62%)} /* =================================================================== ТЕМА 4 — «Лён». Светлая тёплая: лён, крафт, бумага + коралловый акцент. Дневной офис: чистый светлый фон, фирменный коралл как акцент. =================================================================== */ [data-bg="premium"]{ --text:#2a1d14; --text2:#6e5a48; --muted:#9c8a76; --gold:#d8632f; --gold2:#f0884a; --amber:#b84a22; /* «gold»-акцент = тёплый терракот-коралл */ --green:#1f9e64; --money:#1f9e64; --red:#d6485a; --blue:#3f7fc0; --violet:#8a6fd6; --plat:#5c4a3c; --steel:#7a6450; --glass:rgba(255,251,246,.74); --bd:rgba(180,110,60,.16); --panel-2:rgba(140,80,40,.04); --head-font:var(--sf); --sb-col1:#d8632f; --sb-col2:#2a1d14; --grad-accent:linear-gradient(135deg,#f35c50,#e0852f); /* коралл → янтарь */ --on-accent:#fff7f0; --ring:rgba(243,92,80,.6); } [data-bg="premium"] .scene{background:linear-gradient(168deg,#fdf7ef,#f6ece0 50%,#f0e2d2 100%)} [data-bg="premium"] .vp::before{background:linear-gradient(180deg,rgba(255,255,255,.6),transparent)} [data-bg="premium"] .side{background:linear-gradient(180deg,rgba(255,252,247,.9),rgba(247,238,228,.86));border-right:1px solid rgba(180,110,60,.14)} [data-bg="premium"] .brand .mk{background:linear-gradient(135deg,#f35c50,#e0852f)} [data-bg="premium"] .brand .mk svg{stroke:#fff7f0} [data-bg="premium"] .btn-g,[data-bg="premium"] .seg button.on,[data-bg="premium"] .chip.on,[data-bg="premium"] .nav a.nbadge{color:#fff7f0} [data-bg="premium"] .nav a.on{background:linear-gradient(135deg,rgba(243,92,80,.14),rgba(224,133,47,.10));color:#2a1d14} [data-bg="premium"] .av,[data-bg="premium"] .side .ava{color:#fff7f0} [data-bg="premium"] th{color:#8a6a52} [data-bg="premium"] #eqg stop:first-child{stop-color:rgba(243,92,80,.4)} [data-bg="premium"] .sa-bar,[data-bg="premium"] .ca-bar{background:rgba(252,246,238,.92)} [data-bg="premium"] #liga-ticker{background:rgba(255,252,247,.94);box-shadow:0 -2px 14px rgba(180,110,60,.06)} [data-bg="premium"] .tk-i{color:#8a6a52}[data-bg="premium"] .tk-i b{color:#2a1d14} /* =================================================================== ТЕМА 5 — «Амбар». Тёмное дерево амбара + янтарное свечение лампы. Склад на ночь: глубокое дерево, тёплый янтарный свет. =================================================================== */ [data-bg="terminal"]{ --text:#f6ecd8; --text2:#c4aa86; --muted:#7c6a52; --gold:#f5b942; --gold2:#ffd87a; --amber:#d6892a; /* «gold»-акцент = янтарное свечение лампы */ --green:#5ad98a; --money:#5ad98a; --red:#ff5f5a; --blue:#d0a05a; --violet:#e0b06a; --plat:#c2a884; --steel:#8a6f50; --glass:rgba(14,9,5,.66); --bd:rgba(245,185,66,.16); --head-font:var(--sf); --sb-col1:#f5b942; --sb-col2:#a8714a; --grad-accent:linear-gradient(135deg,#f5b942,#d6892a); --on-accent:#1a0f04; --ring:rgba(245,185,66,.8); } [data-bg="terminal"] .scene{background:radial-gradient(ellipse 60% 40% at 50% 0%,#3a2410,transparent 60%),linear-gradient(180deg,#1a1109,#0e0905 58%,#050302 100%)} [data-bg="terminal"] .b1{background:radial-gradient(circle,#a8711e,transparent 60%)} [data-bg="terminal"] .b2{background:radial-gradient(circle,#d6a82a,transparent 60%)} [data-bg="terminal"] .b3{background:radial-gradient(circle,#f5b942,transparent 62%)} [data-bg="terminal"] .vp,[data-bg="terminal"] .card{border-radius:16px} [data-bg="terminal"] .nav a.on{background:linear-gradient(135deg,rgba(245,185,66,.18),rgba(214,137,42,.08))} /* =================================================================== СОВМЕСТИМОСТЬ: light как базовая светлая (для liga-fx/academy/баров). Зеркалит «Премиум» по токенам; темой в пикере не значится. =================================================================== */ [data-bg="light"]{ --text:#2a1d14; --text2:#6e5a48; --muted:#9c8a76; --gold:#d8632f; --gold2:#f0884a; --amber:#b84a22; --green:#1f9e64; --money:#1f9e64; --red:#d6485a; --blue:#3f7fc0; --violet:#8a6fd6; --plat:#5c4a3c; --steel:#7a6450; --glass:rgba(255,251,246,.74); --bd:rgba(180,110,60,.16); --sb-col1:#d8632f; --sb-col2:#2a1d14; --grad-accent:linear-gradient(135deg,#f35c50,#e0852f); --on-accent:#fff7f0; --ring:rgba(243,92,80,.6); } /* =================================================================== ТЕМА 6 — «Бумага». Светлая чистая (белый/бумага) + фирменный коралл. Для презентаций и проектора: максимальный контраст, минимум фактуры. =================================================================== */ [data-bg="den"]{ --text:#1e1b16; --text2:#5c5648; --muted:#9a9384; --gold:#e0532f; --gold2:#f0784a; --amber:#c0432a; /* «gold»-акцент = коралл-терракот */ --green:#1f9e64; --money:#1f9e64; --red:#d6485a; --blue:#3f7fc0; --violet:#7a6fd6; --plat:#4a4636; --steel:#6e6757; --glass:rgba(252,251,248,.82); --bd:rgba(40,30,20,.12); --panel-2:rgba(40,30,20,.03); --head-font:var(--sf); --sb-col1:#e0532f; --sb-col2:#9a9384; --grad-accent:linear-gradient(135deg,#f35c50,#f0884a); --on-accent:#fff7f0; --ring:rgba(243,92,80,.5); } [data-bg="den"] .scene{background:linear-gradient(168deg,#fffefb,#f6f3ec 60%,#efe9df 100%)} [data-bg="den"] .vp::before{background:linear-gradient(180deg,rgba(255,255,255,.7),transparent)} [data-bg="den"] .side{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,245,238,.9));border-right:1px solid rgba(40,30,20,.1)} [data-bg="den"] .brand .mk{background:linear-gradient(135deg,#f35c50,#f0884a)} [data-bg="den"] .brand .mk svg{stroke:#fff7f0} [data-bg="den"] .btn-g,[data-bg="den"] .seg button.on,[data-bg="den"] .chip.on,[data-bg="den"] .nav a.nbadge{color:#fff7f0} [data-bg="den"] .nav a.on{background:linear-gradient(135deg,rgba(243,92,80,.12),rgba(240,136,74,.08));color:#1e1b16} [data-bg="den"] .av,[data-bg="den"] .side .ava{color:#fff7f0} [data-bg="den"] th{color:#6e6757} [data-bg="den"] #eqg stop:first-child{stop-color:rgba(243,92,80,.4)} [data-bg="den"] .sa-bar,[data-bg="den"] .ca-bar{background:rgba(250,248,243,.94)} [data-bg="den"] #liga-ticker{background:rgba(255,255,255,.96);box-shadow:0 -2px 14px rgba(40,30,20,.05)} [data-bg="den"] .tk-i{color:#6e6757}[data-bg="den"] .tk-i b{color:#1e1b16} /* =================================================================== ТЕМА 7 — «Графит». Тёмная нейтральная (графит/сталь) + фирменный коралл. Строгая тёмная альтернатива тёплому «Зерну». =================================================================== */ [data-bg="grafit"]{ --text:#eceff3; --text2:#a6adb8; --muted:#6b7280; --gold:#f35c50; --gold2:#ff8a7e; --amber:#e0852f; /* «gold»-акцент = фирменный коралл */ --green:#46d39a; --money:#46d39a; --red:#ff6f61; --blue:#6fb6ff; --violet:#b6a8ff; --plat:#aeb6c2; --steel:#7d8794; --glass:rgba(22,25,30,.55); --bd:rgba(180,190,205,.14); --head-font:var(--sf); --sb-col1:#f35c50; --sb-col2:#7d8794; --grad-accent:linear-gradient(135deg,#f35c50,#e0852f); --on-accent:#15181d; --ring:rgba(243,92,80,.7); } [data-bg="grafit"] .scene{background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(243,92,80,.14),transparent 55%),linear-gradient(180deg,#1c1f25,#15171c 55%,#0e1014 100%)} [data-bg="grafit"] .b1{background:radial-gradient(circle,#f35c50,transparent 60%)} [data-bg="grafit"] .b2{background:radial-gradient(circle,#4a5160,transparent 60%)} [data-bg="grafit"] .b3{background:radial-gradient(circle,#e0852f,transparent 62%)} [data-bg="light"] .scene{background:linear-gradient(168deg,#f4fbff,#eaf4f8 50%,#dff0f5 100%)} [data-bg="light"] .side{background:linear-gradient(180deg,rgba(250,253,255,.9),rgba(238,247,250,.86));border-right:1px solid rgba(30,110,140,.14)} [data-bg="light"] .btn-g,[data-bg="light"] .seg button.on,[data-bg="light"] .chip.on{color:#f3fbff} [data-bg="light"] .brand .mk{background:linear-gradient(135deg,#1f86a6,#0f6f8c)}[data-bg="light"] .brand .mk svg{stroke:#f3fbff} [data-bg="light"] #eqg stop:first-child{stop-color:rgba(31,134,166,.4)} /* ───── БАЗА ───── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sf);color:var(--text);min-height:100vh;overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased;letter-spacing:-.01em} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} /* ───── СЦЕНЫ (фон по умолчанию = Госзаказ) ───── */ .scene{position:fixed;inset:0;z-index:0;overflow:hidden;transition:background .8s;background:radial-gradient(ellipse 78% 62% at 50% -10%,#1a2a47,#0d1424 54%,#070b14 100%)} .blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.7;mix-blend-mode:screen;display:none} .b1{width:55vw;height:55vw;background:radial-gradient(circle,#caa24a,transparent 60%);top:-14vw;left:-8vw;animation:m1 26s ease-in-out infinite} .b2{width:48vw;height:48vw;background:radial-gradient(circle,#2e6db5,transparent 60%);bottom:-16vw;right:-6vw;animation:m2 30s ease-in-out infinite} .b3{width:42vw;height:42vw;background:radial-gradient(circle,#7d93b3,transparent 62%);top:30vh;left:42vw;animation:m1 34s ease-in-out infinite reverse} @keyframes m1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,5vh) scale(1.12)}} @keyframes m2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,-4vh) scale(1.1)}} /* блобы видимы во всех тёмных темах для глубины */ [data-bg="goszakaz"] .blob,[data-bg="kontrakt"] .blob,[data-bg="auktsion"] .blob,[data-bg="terminal"] .blob{display:block;opacity:.5} /* ───── ЭФФЕКТ-СЛОИ ───── */ .bubbles,.snowlayer,.starlayer,.vignette,.spot,.grainlayer,.scanlayer,.goldlayer{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;overflow:hidden} html.fx-snow .snowlayer{display:block}.flake{position:absolute;top:-24px;color:#fff;opacity:.85;animation:fall linear infinite}@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}} .starlayer{background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#fff,transparent),radial-gradient(1px 1px at 55% 35%,#fff,transparent),radial-gradient(2px 2px at 80% 60%,#fff,transparent),radial-gradient(1px 1px at 90% 25%,#fff,transparent),radial-gradient(1px 1px at 45% 85%,#fff,transparent);animation:tw 4s ease-in-out infinite}html.fx-stars .starlayer{display:block}@keyframes tw{0%,100%{opacity:.35}50%{opacity:.95}} .vignette{box-shadow:inset 0 0 220px 70px rgba(0,0,0,.6);z-index:6}html.fx-vignette .vignette{display:block} .spot{background:radial-gradient(560px circle at var(--sx,50%) var(--sy,40%),rgba(255,255,255,.06),transparent 60%)}html.fx-spotlight .spot{display:block} .grainlayer{z-index:6;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E")}html.fx-grain .grainlayer{display:block} .scanlayer{z-index:6;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0,rgba(0,0,0,.16) 1px,transparent 2px,transparent 4px);opacity:.5}html.fx-scan .scanlayer{display:block} /* «гриф/печать» как фирменный мерцающий слой (бывшая golddust — токенизирован под акцент темы) */ .goldlayer{z-index:0;background-image:radial-gradient(1.5px 1.5px at 12% 24%,rgba(232,194,122,.5),transparent),radial-gradient(1px 1px at 42% 62%,rgba(247,220,160,.4),transparent),radial-gradient(1.5px 1.5px at 73% 18%,rgba(232,194,122,.45),transparent),radial-gradient(1px 1px at 88% 70%,rgba(247,220,160,.35),transparent),radial-gradient(1.5px 1.5px at 30% 88%,rgba(232,194,122,.4),transparent);animation:tw 6s ease-in-out infinite}html.fx-golddust .goldlayer{display:block} #matrix{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;opacity:.4}html.fx-matrix #matrix{display:block} #parts{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}html.fx-particles #parts{display:block} html.fx-shimmer .big,html.fx-shimmer .kv,html.fx-shimmer .pt,html.fx-shimmer .ph .h,html.fx-shimmer .brand .t{background:linear-gradient(120deg,var(--text) 25%,var(--gold2) 50%,var(--text) 75%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;animation:shim 3s linear infinite}@keyframes shim{to{background-position:-220% 0}} html.fx-holo .vp::before{height:100%;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.22) 44%,rgba(120,200,255,.22) 50%,rgba(255,150,220,.22) 56%,transparent 66%);background-size:300% 100%;animation:holo 4.5s linear infinite}@keyframes holo{to{background-position:-300% 0}} .cring{position:fixed;z-index:8;pointer-events:none;width:34px;height:34px;border:2px solid var(--gold);border-radius:50%;transform:translate(-50%,-50%);transition:transform .12s ease;display:none}html.fx-ring .cring{display:block} .traildot{position:fixed;z-index:7;pointer-events:none;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,var(--gold),transparent 70%);transform:translate(-50%,-50%);animation:fadeT .65s forwards}@keyframes fadeT{from{opacity:.8;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.3)}} .ripple{position:fixed;border-radius:50%;border:2px solid var(--ring);pointer-events:none;z-index:7;transform:translate(-50%,-50%);animation:rip .6s ease-out forwards}@keyframes rip{from{width:0;height:0;opacity:.7}to{width:340px;height:340px;opacity:0}} .confp{position:fixed;z-index:9;width:8px;height:8px;border-radius:2px;pointer-events:none;transform:translate(-50%,-50%);animation:conf .9s ease-out forwards}@keyframes conf{to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(320deg);opacity:0}} html.fx-glow .kv,html.fx-glow .big{text-shadow:0 0 22px rgba(232,194,122,.55)} html.fx-border .vp{animation:bhue 7s linear infinite} @keyframes bhue{0%{border-color:rgba(232,194,122,.7)}25%{border-color:rgba(70,211,154,.7)}50%{border-color:rgba(111,182,255,.7)}75%{border-color:rgba(125,147,179,.7)}100%{border-color:rgba(232,194,122,.7)}} /* ───── СТЕКЛО / ПАНЕЛИ ───── */ .vp{background:var(--glass);backdrop-filter:blur(34px) saturate(155%);-webkit-backdrop-filter:blur(34px) saturate(155%);border:1px solid var(--bd);border-radius:var(--radius);box-shadow:0 24px 50px rgba(0,0,0,.42),inset 0 1px 1px rgba(255,255,255,.18);position:relative;overflow:hidden} .vp::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent);pointer-events:none} .vp::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.14),transparent 45%);opacity:0;transition:.4s} html.fx-glare .vp:hover::after{opacity:1} .vp>*{position:relative;z-index:2} /* ───── LAYOUT ───── */ .app{position:relative;z-index:1;display:flex;min-height:100vh} .side{position:fixed;top:0;left:0;bottom:0;width:248px;z-index:20;display:flex;flex-direction:column;padding:16px 14px;gap:6px;background:var(--glass);backdrop-filter:blur(34px) saturate(155%);border-right:1px solid var(--bd)} .brand{display:flex;align-items:center;gap:11px;padding:8px 8px 16px} .brand .mk{width:44px;height:44px;border-radius:13px;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)} .brand .mk svg{width:24px;height:24px;stroke:var(--on-accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .brand .t{font-family:var(--head-font);font-weight:800;font-size:17px;letter-spacing:.2px;line-height:1.05}.brand .t span{color:var(--gold)}.brand .s{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.12em;margin-top:2px} .nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto} .nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:.2s;position:relative} .nav a:hover{background:rgba(255,255,255,.07);color:var(--text)} .nav a.on{background:linear-gradient(135deg,rgba(232,194,122,.20),rgba(199,154,79,.08));color:var(--gold)} .nav a.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)} .nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .nav a .nbadge{margin-left:auto;font-size:10px;font-weight:800;background:var(--gold);color:var(--on-accent);border-radius:50px;padding:2px 7px} .nav .nav-sep{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 12px 4px;font-weight:700} .side .user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;background:rgba(255,255,255,.06)} .side .ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--steel),#3a4a68);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#eaf0f8} .main{flex:1;margin-left:248px;padding:18px 22px 120px;min-width:0} .top{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:50px;margin-bottom:18px;flex-wrap:wrap} .top .pt{font-family:var(--head-font);font-weight:800;font-size:19px;margin-right:auto} .sel{padding:9px 13px;border-radius:50px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--text);font:inherit;font-family:var(--sf);cursor:pointer} .sel option{color:#111} .seg{display:flex;background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:50px;padding:4px} .seg button{border:none;background:transparent;color:var(--text2);font-weight:700;font-size:12.5px;padding:8px 13px;border-radius:50px;cursor:pointer;font-family:var(--sf);transition:.2s} .seg button.on{background:var(--grad-accent);color:var(--on-accent)} .iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center;transition:.2s} .iconbtn:hover{border-color:var(--gold);color:var(--gold)} .iconbtn svg{width:18px;height:18px;vertical-align:middle} .section{display:none;animation:rev .6s cubic-bezier(.2,.9,.2,1)}.section.on{display:block} @keyframes rev{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ───── КОМПОНЕНТЫ ───── */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px} @media(max-width:1000px){.grid{grid-template-columns:1fr 1fr}} .kpi{padding:20px;transition:transform .35s cubic-bezier(.2,.9,.2,1.2);transform-style:preserve-3d;will-change:transform} .kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-accent);opacity:.5} .kpi .ic{width:40px;height:40px;border-radius:13px;background:rgba(232,194,122,.14);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:13px} .kpi .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .kpi .lab{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text2)} .kpi .kv{font-family:var(--head-font);font-weight:800;font-size:25px;margin-top:5px}.kpi .d{font-size:12px;margin-top:5px;color:var(--green)}.kpi .d.down{color:var(--red)} .cols{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-bottom:16px}@media(max-width:900px){.cols{grid-template-columns:1fr}} .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}@media(max-width:900px){.cols3{grid-template-columns:1fr}} .panel{padding:22px;margin-bottom:16px;transition:transform .3s cubic-bezier(.2,.9,.2,1.1)} .ph{display:flex;align-items:center;gap:10px;margin-bottom:15px}.ph .h{font-family:var(--head-font);font-weight:800;font-size:16px;display:flex;align-items:center;gap:9px}.ph .h svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.ph .s{font-size:12px;color:var(--text2);margin-left:auto} .big{font-family:var(--head-font);font-weight:800;font-size:clamp(32px,5vw,52px);letter-spacing:-1.5px} .brow{display:flex;align-items:center;gap:11px;margin-bottom:10px}.bnm{width:140px;flex-shrink:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px} .bbar{flex:1;height:9px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden}.bbar i{display:block;height:100%;width:0;border-radius:6px;background:var(--grad-accent);transition:width 1s cubic-bezier(.2,.9,.2,1)} .bbar i.g{background:linear-gradient(90deg,var(--green),#0a7d54)}.bbar i.v{background:linear-gradient(90deg,var(--violet),#6b3fd6)}.bbar i.b{background:linear-gradient(90deg,var(--blue),#1565c0)} .bval{width:78px;text-align:right;font-size:12px;color:var(--text2);font-family:var(--mono)} .dec{display:flex;align-items:flex-start;gap:12px;padding:13px;border-radius:18px;background:var(--panel-2);border:1px solid var(--bd);margin-bottom:10px} .dec .e{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.08);color:var(--gold)}.dec .e svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .dec .tt{font-weight:700;font-size:13.5px}.dec .bb{font-size:12px;color:var(--text2);line-height:1.5}.dec .imp{margin-left:auto;font-weight:800;font-size:13px;white-space:nowrap;color:var(--green)} .heat{display:flex;gap:3px}.hc{flex:1;height:42px;border-radius:6px;display:flex;align-items:flex-end;justify-content:center;font-size:8px;color:var(--muted)} .tbl-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px} .tbl-tools input,.tbl-tools select{padding:9px 13px;border-radius:11px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--text);font:inherit} .tbl-tools input:focus,.tbl-tools select:focus{outline:none;border-color:var(--gold)} .tbox{max-height:520px;overflow:auto;border:1px solid var(--bd);border-radius:12px} table{width:100%;border-collapse:collapse}th{position:sticky;top:0;background:var(--glass);backdrop-filter:blur(20px);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);padding:11px 14px;cursor:pointer;white-space:nowrap} th.r,td.r{text-align:right}td{padding:11px 14px;font-size:13px;border-top:1px solid var(--bd)}tbody tr:hover{background:rgba(255,255,255,.05)} .cellbar{display:flex;align-items:center;gap:8px;min-width:120px}.cellbar .mini{flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;min-width:44px}.cellbar .mini i{display:block;height:100%;background:var(--grad-accent)} .heatcell{padding:3px 9px;border-radius:6px;font-family:var(--mono);font-size:12px} .showmore{text-align:center;padding:13px;color:var(--gold);cursor:pointer;font-weight:700;font-size:13px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{padding:9px 15px;border-radius:50px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.2s} .chip svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .chip:hover{border-color:var(--gold)} .chip.on{background:var(--grad-accent);color:var(--on-accent);border-color:transparent} .swrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:13px;background:var(--panel-2);border:1px solid var(--bd);margin-bottom:8px;cursor:pointer} .sw{width:42px;height:24px;border-radius:50px;background:rgba(255,255,255,.2);position:relative;flex-shrink:0;transition:.25s}.sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.25s} .swrow.on .sw{background:var(--grad-accent)}.swrow.on .sw::after{left:20px} /* ── фирменные тендер-компоненты (бейджи статусов, тэги) ── */ .tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;border-radius:50px;padding:4px 10px;white-space:nowrap;letter-spacing:.02em} .tag.gold{background:rgba(232,194,122,.16);color:var(--gold)} .tag.green{background:rgba(70,211,154,.16);color:var(--green)} .tag.red{background:rgba(255,111,138,.16);color:var(--red)} .tag.blue{background:rgba(111,182,255,.16);color:var(--blue)} .tag.violet{background:rgba(182,168,255,.16);color:var(--violet)} .tag.plat{background:rgba(195,206,221,.14);color:var(--plat)} .tag.mut{background:rgba(255,255,255,.07);color:var(--text2)} /* статусы тендеров (семантические алиасы поверх tag) */ .tag.win,.tag.won{background:rgba(70,211,154,.18);color:var(--green)} .tag.live,.tag.bidding{background:rgba(111,182,255,.18);color:var(--blue)} .tag.draft,.tag.prep{background:rgba(232,194,122,.16);color:var(--gold)} .tag.lost,.tag.fail{background:rgba(255,111,138,.16);color:var(--red)} .pos{color:var(--green)}.neg{color:var(--red)} .btn-g{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:none;border-radius:14px;background:var(--grad-accent);color:var(--on-accent);font-family:var(--sf);font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.32);transition:transform .2s,box-shadow .2s} .btn-g:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.4)} .btn-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--bd);border-radius:14px;background:rgba(255,255,255,.05);color:var(--text);font-family:var(--sf);font-weight:700;font-size:13.5px;cursor:pointer;transition:.2s} .btn-o:hover{border-color:var(--gold);color:var(--gold)} .card{padding:18px;border-radius:20px;background:var(--panel-2);border:1px solid var(--bd);transition:transform .25s,border-color .25s} .card:hover{transform:translateY(-3px);border-color:rgba(232,194,122,.4)} .av{width:46px;height:46px;border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--on-accent);flex-shrink:0} .donut{--p:0;--c:var(--gold);width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.08) 0);display:flex;align-items:center;justify-content:center;position:relative} .donut::after{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--glass);backdrop-filter:blur(8px)} .donut .dv{position:relative;z-index:2;font-weight:800;font-size:20px} .spark{display:flex;align-items:flex-end;gap:2px;height:34px}.spark i{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--gold),rgba(199,154,79,.2))} .progline{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}.progline i{display:block;height:100%;border-radius:6px;background:var(--grad-accent)} /* ───── ТЕНДЕР-ТИКЕР (бегущая строка котировок/контрактов) ───── */ #liga-ticker{position:fixed;left:248px;right:0;bottom:0;z-index:18;height:34px;display:flex;align-items:center;overflow:hidden;background:rgba(8,12,20,.74);backdrop-filter:blur(14px);border-top:1px solid var(--bd);font-family:var(--mono);font-size:12px} .tk-track{display:inline-flex;gap:34px;white-space:nowrap;animation:tkscroll 48s linear infinite;padding-left:100%} @keyframes tkscroll{to{transform:translateX(-100%)}} .tk-i{display:inline-flex;align-items:center;gap:7px;color:var(--text2)} .tk-i b{color:var(--text);font-weight:700} @media(max-width:860px){#liga-ticker{left:0;bottom:64px}} /* ───── HERO-блоки (Академия/Направления) — подложки под акцент темы ───── */ [data-bg="premium"] .acad-hero{background:linear-gradient(120deg,rgba(184,134,43,.10),rgba(255,255,255,.55) 60%)!important;border-color:rgba(28,54,104,.22)!important} [data-bg="premium"] .dir-hero{background:linear-gradient(135deg,rgba(184,134,43,.12),rgba(255,255,255,.6))!important;border-color:rgba(28,54,104,.22)!important} [data-bg="premium"] .acad-hero .acad-hero-s,[data-bg="premium"] .dir-hero .hero-lead{color:#4a5572} [data-bg="light"] .acad-hero{background:linear-gradient(120deg,rgba(184,134,43,.10),rgba(255,255,255,.55) 60%)!important;border-color:rgba(28,54,104,.22)!important} [data-bg="light"] .dir-hero{background:linear-gradient(135deg,rgba(184,134,43,.12),rgba(255,255,255,.6))!important;border-color:rgba(28,54,104,.22)!important} [data-bg="light"] .acad-hero .acad-hero-s,[data-bg="light"] .dir-hero .hero-lead{color:#4a5572} /* светлая бегущая строка */ [data-bg="light"] #liga-ticker{background:rgba(252,251,246,.94);box-shadow:0 -2px 14px rgba(28,54,104,.06)} [data-bg="light"] .tk-i{color:#5a6a86}[data-bg="light"] .tk-i b{color:#16213a} /* ───── MOBILE ───── */ .mob-nav{display:none} @media(max-width:860px){ .side{display:none}.main{margin-left:0;padding:14px 14px 96px} .mob-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;background:var(--glass);backdrop-filter:blur(30px);border-top:1px solid var(--bd);padding:8px 6px;justify-content:space-around;overflow-x:auto} .mob-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text2);font-size:10px;text-decoration:none;padding:4px 8px;border-radius:10px;flex-shrink:0} .mob-nav a.on{color:var(--gold)}.mob-nav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .grid{grid-template-columns:1fr 1fr} } /* ───── MODAL ───── */ .modal-ov{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:18px}.modal-ov.on{display:flex} .modal{width:min(760px,96vw);max-height:88vh;overflow:auto;padding:24px} .modal .x{position:absolute;top:16px;right:18px;cursor:pointer;font-size:22px;opacity:.6;z-index:5} .loading{padding:30px;text-align:center;color:var(--muted);font-size:13px} /* ───── FX PANEL ───── */ .fxpanel{position:fixed;bottom:120px;right:16px;z-index:26;background:rgba(12,18,28,.74);backdrop-filter:blur(26px);border:1px solid var(--bd);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.45);max-height:70vh;overflow:auto} .fxhead{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;font-weight:800;font-size:13px;color:#fff;white-space:nowrap} .fxlist{display:none;flex-direction:column;gap:3px;padding:4px 8px 10px;width:230px}.fxpanel.open .fxlist{display:flex} /* scrollbar + print */ *{scrollbar-width:thin;scrollbar-color:var(--sb-col1) transparent} ::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:rgba(140,160,190,.14);border-radius:10px} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--sb-col1),var(--sb-col2));border-radius:10px;border:2px solid transparent;background-clip:padding-box;min-height:44px} ::-webkit-scrollbar-thumb:hover{filter:brightness(1.15)}::-webkit-scrollbar-corner{background:transparent} @media print{.side,.mob-nav,.fxpanel,#liga-ticker,.scene,.spot,.starlayer,#matrix,#parts,.vignette,.grainlayer,.scanlayer,.goldlayer{display:none!important}.main{margin:0!important;padding:0}.vp{box-shadow:none!important;border:1px solid #ddd!important;background:#fff!important;backdrop-filter:none!important}body{color:#000!important}} html.perf *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}html.perf .panel,html.perf .vp,html.perf .kpi,html.perf .side,html.perf .modal{background:rgba(14,20,32,.94)!important} [data-bg="premium"] html.perf .panel,[data-bg="premium"] html.perf .vp,[data-bg="premium"] html.perf .kpi,[data-bg="premium"] html.perf .side,[data-bg="premium"] html.perf .modal{background:rgba(248,250,253,.96)!important} /* модули интерфейса (управляются в админке → Настройки → Интерфейс) */ html.no-music #mz-btn,html.no-music #mz-panel{display:none!important} html.no-assistant #jv-orb,html.no-assistant #jv-panel,html.no-assistant #jv-chat-btn{display:none!important} html.no-chat #jv-chat-btn{display:none!important} /* =================================================================== ДОПОЛНИТЕЛЬНЫЕ ТЕМЫ (id ровно: rossiya / kapital / kreml / stal) Полный набор переменных как у goszakaz + .scene/.b1/.b2/.b3. =================================================================== */ /* ТЕМА — «Россия»: глубокий navy, акцент благородный синий, триколор-блобы */ [data-bg="rossiya"]{ --text:#eef2fb; --text2:#a7b6d6; --muted:#6a7aa0; --gold:#5b8cff; --gold2:#9fbcff; --amber:#3a6ad6; /* «gold»-акцент = синий */ --green:#46d39a; --money:#46d39a; --red:#e2455f; --blue:#6fb6ff; --violet:#9aa8ff; --plat:#c2ccdf; --steel:#7886a8; --glass:rgba(12,18,38,.56); --bd:rgba(150,180,255,.16); --head-font:var(--sf); --sb-col1:#5b8cff; --sb-col2:#e2455f; --grad-accent:linear-gradient(135deg,#3a6ad6,#e2455f); --on-accent:#f2f5ff; --ring:rgba(91,140,255,.75); } [data-bg="rossiya"] .scene{background:radial-gradient(ellipse 80% 62% at 50% -10%,#15224a,#0a1130 54%,#05081c 100%)} [data-bg="rossiya"] .b1{background:radial-gradient(circle,#dfe6f5,transparent 60%)} /* белый (приглушённо) */ [data-bg="rossiya"] .b2{background:radial-gradient(circle,#3a6ad6,transparent 60%)} /* синий */ [data-bg="rossiya"] .b3{background:radial-gradient(circle,#c23a52,transparent 62%)} /* красный (приглушённо) */ /* ТЕМА — «Капитал»: почти чёрно-зелёный фон, акцент золото, градиент золото→изумруд */ [data-bg="kapital"]{ --text:#f3f1e6; --text2:#bdc4ad; --muted:#7d8470; --gold:#ffd76a; --gold2:#ffe79c; --amber:#d8a93e; --green:#1fae7a; --money:#27c98c; --red:#ff6f7e; --blue:#6fcaa8; --violet:#c8d77a; --plat:#cdd0b8; --steel:#7f8a6f; --glass:rgba(8,16,12,.58); --bd:rgba(255,215,106,.16); --head-font:var(--sf); --sb-col1:#ffd76a; --sb-col2:#1fae7a; --grad-accent:linear-gradient(135deg,#ffd76a,#1fae7a); --on-accent:#1a2410; --ring:rgba(255,215,106,.75); } [data-bg="kapital"] .scene{background:radial-gradient(ellipse 78% 60% at 50% -10%,#0d1f18,#06120c 56%,#020805 100%)} [data-bg="kapital"] .b1{background:radial-gradient(circle,#d8a93e,transparent 60%)} [data-bg="kapital"] .b2{background:radial-gradient(circle,#1fae7a,transparent 60%)} [data-bg="kapital"] .b3{background:radial-gradient(circle,#ffd76a,transparent 62%)} /* ТЕМА — «Кремль»: тёмно-бордовый/винный фон, благородное золото, бордо+золото блобы */ [data-bg="kreml"]{ --text:#f5ece2; --text2:#c9b3a6; --muted:#8a7064; --gold:#e8c27a; --gold2:#f7dca0; --amber:#c79a4f; --green:#5fc99a; --money:#5fc99a; --red:#ff7a72; --blue:#c79ab0; --violet:#caa0b8; --plat:#cdbcb2; --steel:#8a6f78; --glass:rgba(28,12,18,.58); --bd:rgba(232,194,122,.18); --head-font:var(--sf); --sb-col1:#e8c27a; --sb-col2:#9c2e3e; --grad-accent:linear-gradient(135deg,#e8c27a,#c79a4f); --on-accent:#27101a; --ring:rgba(232,194,122,.75); } [data-bg="kreml"] .scene{background:radial-gradient(ellipse 78% 60% at 50% -10%,#3a1620,#1e0d12 54%,#0c0508 100%)} [data-bg="kreml"] .b1{background:radial-gradient(circle,#9c2e3e,transparent 60%)} /* бордо */ [data-bg="kreml"] .b2{background:radial-gradient(circle,#e8c27a,transparent 60%)} /* золото */ [data-bg="kreml"] .b3{background:radial-gradient(circle,#7a2230,transparent 62%)} /* тёмное бордо */ /* ТЕМА — «Сталь»: графитово-стальной фон, акцент стально-голубой/циан, сталь→циан */ [data-bg="stal"]{ --text:#eaf1f6; --text2:#a6b6c4; --muted:#6a7a88; --gold:#7fd0ff; --gold2:#b3e6ff; --amber:#4f9bc4; /* «gold»-акцент = циан */ --green:#3fe0c8; --money:#3fe0c8; --red:#ff6f8a; --blue:#5fb0ff; --violet:#9ab4cc; --plat:#bcc8d2; --steel:#8fb4d6; --glass:rgba(14,20,26,.58); --bd:rgba(143,180,214,.18); --head-font:var(--sf); --sb-col1:#7fd0ff; --sb-col2:#8fb4d6; --grad-accent:linear-gradient(135deg,#8fb4d6,#7fd0ff); --on-accent:#06141e; --ring:rgba(127,208,255,.75); } [data-bg="stal"] .scene{background:radial-gradient(ellipse 80% 60% at 50% -8%,#1c2832,#10171e 56%,#070b0f 100%)} [data-bg="stal"] .b1{background:radial-gradient(circle,#8fb4d6,transparent 60%)} [data-bg="stal"] .b2{background:radial-gradient(circle,#7fd0ff,transparent 60%)} [data-bg="stal"] .b3{background:radial-gradient(circle,#5d7a92,transparent 62%)} /* блобы видимы в новых тёмных темах (не трогаем исходное правило строки выше) */ [data-bg="rossiya"] .blob,[data-bg="kapital"] .blob,[data-bg="kreml"] .blob,[data-bg="stal"] .blob{display:block;opacity:.5} /* =================================================================== ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ (id ровно: aurora / grid / rubli) Самодостаточные слои поверх .scene (z-index:1), но ниже контента (.app z-index:1 / .vp>* z-index:2 — слои не перекрывают карточки, т.к. лежат фиксированным фоном за app). pointer-events:none. Заняты СВОИ слои-классы .auroralayer/.gridlayer/.rublilayer — существующие псевдоэлементы (.vp::before/.vp::after/.scene::*) НЕ трогаются. =================================================================== */ .auroralayer,.gridlayer,.rublilayer{position:fixed;inset:0;z-index:1;pointer-events:none;display:none;overflow:hidden} /* ЭФФЕКТ — «Северное сияние»: плавный градиентный свет вверху, медленный hue-сдвиг */ html.fx-aurora .auroralayer{display:block} .auroralayer{ height:62vh;inset:0 0 auto 0; background:linear-gradient(115deg, rgba(91,140,255,.18) 0%, rgba(62,224,160,.16) 30%, rgba(127,208,255,.16) 55%, rgba(182,168,255,.16) 80%, rgba(91,140,255,.18) 100%); background-size:260% 100%; filter:blur(36px) saturate(140%); -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); animation:auroraSlide 26s ease-in-out infinite,auroraHue 40s linear infinite; } @keyframes auroraSlide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes auroraHue{to{filter:blur(36px) saturate(140%) hue-rotate(360deg)}} /* ЭФФЕКТ — «Тендер-сетка»: тонкая техно-сетка по фону, очень медленное движение */ html.fx-grid .gridlayer{display:block} .gridlayer{ opacity:.5; background-image: linear-gradient(var(--bd) 1px,transparent 1px), linear-gradient(90deg,var(--bd) 1px,transparent 1px); background-size:46px 46px,46px 46px; -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000,transparent 75%); mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000,transparent 75%); animation:gridDrift 60s linear infinite; } @keyframes gridDrift{to{background-position:46px 46px,46px 46px}} /* ЭФФЕКТ — «Парящие рубли»: символы рубля дрейфуют вверх, чистый CSS (data-URI SVG) */ html.fx-rubli .rublilayer{display:block} .rublilayer{ opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ctext x='30' y='60' font-family='Georgia,serif' font-size='34' fill='%23ffffff' fill-opacity='0.16'%3E%E2%82%BD%3C/text%3E%3Ctext x='150' y='130' font-family='Georgia,serif' font-size='26' fill='%23ffffff' fill-opacity='0.12'%3E%E2%82%BD%3C/text%3E%3Ctext x='70' y='190' font-family='Georgia,serif' font-size='30' fill='%23ffffff' fill-opacity='0.14'%3E%E2%82%BD%3C/text%3E%3C/svg%3E"); background-size:220px 220px; animation:rubliFloat 50s linear infinite; } @keyframes rubliFloat{from{background-position:0 0}to{background-position:0 -880px}} /* =================================================================== УНИКАЛЬНЫЕ ЭФФЕКТ-СЛОИ (свои слои-классы, как aurora/grid): fx-bubbles — пузырьки со дна, fx-rain — дождь по воде, fx-ripple — круги. Слой-дивы добавлены в index.html/login.html. Только transform → дёшево. =================================================================== */ .bubbleslayer,.rainlayer,.ripplelayer{position:fixed;inset:0;z-index:1;pointer-events:none;display:none;overflow:hidden} /* ── ПУЗЫРЬКИ: восходящий слой высотой 200%, плавно ползёт вверх ── */ html.fx-bubbles .bubbleslayer{display:block} .bubbleslayer::before,.bubbleslayer::after{content:"";position:absolute;left:0;right:0;top:0;height:200%; background-image: radial-gradient(4px 4px at 8% 12%,rgba(180,235,245,.5),transparent 60%), radial-gradient(6px 6px at 22% 38%,rgba(180,235,245,.4),transparent 60%), radial-gradient(3px 3px at 37% 70%,rgba(200,245,255,.55),transparent 60%), radial-gradient(7px 7px at 54% 22%,rgba(170,225,240,.35),transparent 60%), radial-gradient(4px 4px at 68% 80%,rgba(200,245,255,.5),transparent 60%), radial-gradient(5px 5px at 81% 45%,rgba(180,235,245,.42),transparent 60%), radial-gradient(3px 3px at 93% 65%,rgba(200,245,255,.5),transparent 60%); background-size:100% 50%;animation:palBubUp 14s linear infinite} .bubbleslayer::after{animation-duration:22s;opacity:.6;filter:blur(.6px)} @keyframes palBubUp{from{transform:translateY(0)}to{transform:translateY(-50%)}} /* ── ДОЖДЬ: диагональные штрихи, наклон и сдвиг ── */ html.fx-rain .rainlayer{display:block} .rainlayer{background:repeating-linear-gradient(102deg,rgba(180,220,235,.10) 0,rgba(180,220,235,.10) 1px,transparent 2px,transparent 9px); background-size:14px 14px;animation:palRain .55s linear infinite;opacity:.5} @keyframes palRain{from{background-position:0 0}to{background-position:-28px 80px}} /* ── КРУГИ ПО ВОДЕ: расходящиеся кольца в нескольких точках ── */ html.fx-ripple .ripplelayer{display:block} .ripplelayer::before,.ripplelayer::after{content:"";position:absolute;border:1.5px solid var(--gold);border-radius:50%;opacity:0; width:20px;height:20px;animation:palRipple 5.5s ease-out infinite} .ripplelayer::before{left:24%;top:38%} .ripplelayer::after{left:72%;top:64%;animation-delay:2.6s;border-color:var(--blue)} @keyframes palRipple{0%{transform:scale(1);opacity:.55}80%{opacity:0}100%{transform:scale(14);opacity:0}} /* =================================================================== МОБИЛЬНЫЕ (≤860px): гасим тяжёлые анимированные эффекты. На Android полноэкранные анимированные слои + blur + mix-blend постоянно перерисовываются и дают «моргание». На десктопе — без изменений. =================================================================== */ @media (max-width:860px){ .blob{display:none!important} .snowlayer,.starlayer,.goldlayer,.grainlayer,.scanlayer,.auroralayer,.gridlayer, .rublilayer,.bubbleslayer,.rainlayer,.ripplelayer,.spot,#matrix,#parts,.cring{display:none!important} #jv-orb,#jv-chat-btn,#jv-panel{display:none!important} html.fx-shimmer .big,html.fx-shimmer .kv,html.fx-shimmer .pt,html.fx-shimmer .ph .h, html.fx-shimmer .brand .t{animation:none!important;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--text)!important} html.fx-holo .vp::before{animation:none!important;background:none!important} html.fx-border .vp{animation:none!important} }