/* ============================================================================= ZZD База знаний · издательская тема поверх Tailwind ----------------------------------------------------------------------------- Слой ПОВЕРХ brand.css (шрифты) + theme.css (токены обеих тем, атмосфера). Tailwind оставлен как движок утилит (раскладка), а цвета/шрифты/поверхности переопределяются здесь по фирменному стилю ЗЗД. Тёмная — по умолчанию, светлая — . Утилиты Tailwind — property-specific (.text-* красит текст, .bg-* — фон), поэтому переопределяем адресно, !important. ============================================================================= */ :root{ --radius:14px; --radius-sm:10px; --gold-ring:rgba(209,158,104,.22); --btn-gold-ink:#0a0e17; --on-semantic:#0a0e17; --z-subtle:rgba(255,255,255,.035); /* slate-50/100 подложки, hover строк */ --z-btn-ghost:rgba(255,255,255,.05); --z-navbar:linear-gradient(100deg,#0b1c34 0%,#0a1526 100%); /* верхнее меню (фикс navy) */ --z-hair:rgba(209,158,104,.5); /* золотая линия под навбаром */ --z-dark:#0e1626; /* тёмные поверхности (консоль/лог) — фикс */ --z-dark-2:#0a1120; --z-on-dark:#dfe6f2; /* светлый текст на тёмных поверхностях */ --nav-hover:rgba(255,255,255,.06); --seal-op:.42; --ok-bg:rgba(92,199,154,.14); --ok-line:rgba(92,199,154,.30); --warn-bg:var(--gold-soft); --warn-line:rgba(209,158,104,.32); --bad-bg:rgba(231,154,139,.13);--bad-line:rgba(231,154,139,.32); } :root[data-theme="light"]{ --gold-ring:rgba(191,138,73,.2); --btn-gold-ink:#3a2a12; --on-semantic:#ffffff; --z-subtle:rgba(6,34,71,.035); --z-btn-ghost:rgba(6,34,71,.05); --nav-hover:rgba(6,34,71,.05); --seal-op:.16; --ok-bg:rgba(47,143,92,.12); --ok-line:rgba(47,143,92,.28); --warn-line:rgba(191,138,73,.32); --bad-bg:rgba(192,72,58,.10); --bad-line:rgba(192,72,58,.28); } /* ------------------------------- База --------------------------------------- */ body{ background:var(--bg); color:var(--ink); font-family:var(--zzd-mer); min-height:100vh; } .zzd-layout, .zzd-topbar, .zzd-login{ position:relative; z-index:1; } /* над атмосферой */ a{ color:inherit; } img{ max-width:100%; } /* UI-хром — Leksa Sans; проза/данные ячеек — Merriweather (из body) */ h1,h2,h3,h4,h5,h6, th, label, button, input, select, textarea, summary, .zzd-nav, .font-bold,.font-semibold,.font-medium{ font-family:var(--zzd-lek) !important; } h1,h2,h3{ color:var(--head); letter-spacing:-.01em; } /* тонкий брендовый скроллбар (тёмная тема) */ *{ scrollbar-color:var(--line-2) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:20px; } ::-webkit-scrollbar-track{ background:transparent; } /* ===================================================================== САЙДБАР (app-shell) — панель слита с фоном + золотая линия, +10% масштаб, меню без внутреннего скролла (эмблема уступает высоту) ===================================================================== */ .zzd-layout{ display:flex; min-height:100vh; } .zzd-sidebar{ position:sticky; top:0; height:100vh; flex:0 0 clamp(238px,18vw,280px); width:clamp(238px,18vw,280px); background:transparent; display:flex; flex-direction:column; padding:22px 16px; } .zzd-brand-mark-mini{ display:none; width:40px; height:auto; margin:0 auto; filter:var(--logo-filter); } .zzd-collapse{ display:none; } .zzd-sidebar::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:1px; background:linear-gradient(180deg,transparent,var(--z-hair) 34% 66%,transparent); } .zzd-sidebar .zzd-brand{ display:block; padding:2px 8px 16px; text-decoration:none; } .zzd-brand-mark{ display:block; width:100%; max-width:186px; height:auto; filter:var(--logo-filter); } .zzd-sidebar .zzd-brand small{ display:block; margin-top:11px; font-family:var(--zzd-lek); font-size:12px; letter-spacing:.02em; color:var(--dim); line-height:1.5; } .zzd-nav{ display:flex; flex-direction:column; gap:2px; margin:10px 0 auto; padding:6px; background:var(--z-subtle); border:1px solid var(--line); border-radius:14px; flex:0 0 auto; overflow:visible; } .zzd-nav-link{ position:relative; display:flex; align-items:center; gap:11px; padding:9px 13px; border-radius:10px; font-family:var(--zzd-lek); font-weight:600; font-size:15px; color:var(--muted); transition:.16s; text-decoration:none; } .zzd-nav-link:hover{ background:var(--nav-hover); color:var(--head); } .zzd-nav-link.active{ color:var(--gold); background:var(--gold-soft); } .zzd-nav-link.active::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--gold); } .zzd-nav-link .ni-ic{ flex:0 0 auto; width:1.35rem; text-align:center; font-size:1rem; opacity:.85; } .zzd-nav-link .ni-tx{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .zzd-pseal{ width:min(150px,72%); height:120px; margin:6px auto 12px; flex:0 1 auto; min-height:0; overflow:hidden; background:var(--emblem) center/contain no-repeat; opacity:var(--seal-op); } .zzd-foot{ border-top:1px solid var(--line); padding-top:13px; flex:0 0 auto; } .zzd-foot .zzd-user{ font-family:var(--zzd-lek); font-weight:600; color:var(--head); font-size:15px; padding:0 8px; } .zzd-foot .zzd-role{ font-family:var(--zzd-lek); color:var(--gold); font-size:13px; padding:0 8px 8px; } .zzd-theme-toggle{ display:flex; align-items:center; gap:11px; width:100%; margin:2px 0 4px; background:var(--z-subtle); border:1px solid var(--line); color:var(--muted); font-family:var(--zzd-lek); font-weight:600; font-size:14px; padding:9px 14px; border-radius:10px; cursor:pointer; transition:.2s; } .zzd-theme-toggle:hover{ color:var(--gold-2); border-color:var(--gold); } .zzd-theme-toggle .ni-ic{ width:1.35rem; text-align:center; } .zzd-foot form{ margin:0; } .zzd-logout{ display:flex; align-items:center; gap:11px; width:100%; background:transparent; border:none; color:var(--muted); font-family:var(--zzd-lek); font-weight:500; font-size:14px; padding:8px 13px; border-radius:10px; cursor:pointer; transition:.18s; text-align:left; } .zzd-logout:hover{ background:var(--nav-hover); color:var(--head); } .zzd-logout .ni-ic{ width:1.35rem; text-align:center; } .zzd-content{ flex:1; min-width:0; max-width:1360px; margin-inline:auto; padding:clamp(24px,2.6vw,42px) clamp(20px,3.2vw,52px); } /* мобильная верхняя полоска + выезжающий drawer */ .zzd-topbar{ display:none; } .zzd-burger{ background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; border-radius:8px; font-size:18px; line-height:1; padding:5px 11px; cursor:pointer; } .zzd-topbar-brand{ display:flex; align-items:center; gap:8px; font-family:var(--zzd-lek); font-weight:700; color:#fff; font-size:1.05rem; text-decoration:none; } .zzd-topbar-brand img{ height:24px; width:24px; border-radius:50%; filter:brightness(0) invert(1); } .zzd-backdrop{ display:none; } /* ===================================================================== ПЕРЕОПРЕДЕЛЕНИЕ ЦВЕТОВ TAILWIND (адресно, по свойству) ===================================================================== */ /* ---- фоны ---- */ .bg-white{ background-color:var(--card) !important; } .bg-slate-50{ background-color:var(--z-subtle) !important; } .bg-slate-100{ background-color:var(--z-subtle) !important; } .hover\:bg-slate-50:hover{ background-color:var(--z-subtle) !important; } .hover\:bg-slate-100:hover{ background-color:var(--nav-hover, rgba(255,255,255,.06)) !important; } .bg-slate-500,.bg-slate-600{ background-color:var(--z-btn-ghost) !important; } .bg-slate-700{ background-color:var(--z-dark) !important; } .bg-slate-800{ background-color:var(--z-dark) !important; } .bg-slate-900{ background-color:var(--z-dark-2) !important; } .bg-blue-600{ background-color:var(--gold-2) !important; color:var(--btn-gold-ink) !important; } .hover\:bg-blue-700:hover,.bg-blue-700{ background-color:var(--gold) !important; } .bg-blue-50,.bg-blue-100{ background-color:var(--gold-soft) !important; } .bg-green-50,.bg-green-100{ background-color:var(--ok-bg) !important; } .bg-green-500{ background-color:var(--ok) !important; } .bg-red-50,.bg-red-100{ background-color:var(--bad-bg) !important; } .bg-red-500{ background-color:var(--bad) !important; } .bg-amber-50,.bg-amber-100{ background-color:var(--warn-bg) !important; } .bg-amber-500,.bg-amber-600,.bg-amber-700{ background-color:var(--warn) !important; } .bg-black{ background-color:#05070c !important; } /* ---- текст ---- */ .text-slate-400{ color:var(--dim) !important; } .text-slate-500,.text-slate-600{ color:var(--muted) !important; } .text-slate-700{ color:var(--ink) !important; } .text-slate-800,.text-slate-900{ color:var(--head) !important; } .text-slate-100{ color:var(--z-on-dark) !important; } .text-blue-500,.text-blue-600,.text-blue-700{ color:var(--gold-2) !important; } .text-blue-800,.text-blue-900{ color:var(--head) !important; } .text-green-300,.text-green-500,.text-green-600,.text-green-700,.text-green-800{ color:var(--ok) !important; } .text-red-500,.text-red-600,.text-red-700,.text-red-800{ color:var(--bad) !important; } .text-amber-500,.text-amber-600,.text-amber-800,.text-amber-900{ color:var(--warn) !important; } /* ---- границы ---- */ .border,.border-t,.border-b,.border-l,.border-r{ border-color:var(--line) !important; } .border-slate-200,.border-gray-200,.border-slate-300{ border-color:var(--line-2) !important; } .border-red-500{ border-color:var(--bad-line) !important; } .border-green-200,.border-green-300,.border-green-500{ border-color:var(--ok-line) !important; } .border-amber-200,.border-amber-500{ border-color:var(--warn-line) !important; } .border-blue-200{ border-color:var(--warn-line) !important; } .divide-y > :not([hidden]) ~ :not([hidden]){ border-color:var(--line) !important; } /* ---- тени → сине-тонированные фирменные ---- */ .shadow,.shadow-sm,.shadow-md,.shadow-lg{ box-shadow:var(--card-shadow) !important; } /* ===================================================================== КОМПОНЕНТЫ (карточки/кнопки/поля/бейджи/таблицы) ===================================================================== */ /* карточки bg-white rounded-* shadow → «приподняты» + золотая полоска сверху (подпись стиля кита; KPI-плитки .zzd-kpi полоску не получают — у них своя заливка). */ .bg-white.rounded-lg, .bg-white.rounded-xl, .bg-white.rounded{ border:1px solid var(--line); position:relative; } .bg-white.rounded-lg:not(.zzd-kpi)::before, .bg-white.rounded-xl:not(.zzd-kpi)::before, .bg-white.rounded:not(.zzd-kpi)::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--gold), rgba(209,158,104,0) 60%); border-top-left-radius:8px; border-top-right-radius:8px; } /* KPI-плитки дашборда: тёмно-синяя плитка + золотая цифра — как в ca/portal-bot */ .zzd-kpi{ overflow:hidden; color:#fff !important; background:linear-gradient(160deg,#0e3467 0%,#071c37 68%) !important; border:1px solid var(--line) !important; } .zzd-kpi::after{ content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; opacity:.5; background:radial-gradient(circle, rgba(209,158,104,.16), transparent 70%); } .zzd-kpi .zzd-kpi-v{ font-family:var(--zzd-lek) !important; font-weight:800 !important; color:var(--gold-2) !important; } .zzd-kpi .text-slate-500, .zzd-kpi .text-slate-400{ color:#b9c6dc !important; } /* поля ввода — утоплены, золотой фокус (перебиваем focus:ring-blue) */ input, select, textarea{ background-color:var(--field) !important; color:var(--head) !important; border-color:var(--line-2) !important; border-radius:var(--radius-sm); } input::placeholder, textarea::placeholder{ color:var(--dim) !important; } input:focus, select:focus, textarea:focus{ outline:none !important; border-color:var(--gold) !important; box-shadow:0 0 0 3px var(--gold-ring) !important; } input[type=checkbox], input[type=radio]{ accent-color:var(--gold); } /* золотая primary-кнопка: текст тёмный (перебивает text-white) */ .bg-blue-600.text-white, .bg-blue-700.text-white{ color:var(--btn-gold-ink) !important; } .bg-blue-600:hover{ filter:brightness(1.05); } /* таблицы */ table thead{ font-family:var(--zzd-lek); } table thead th{ color:var(--dim) !important; letter-spacing:.06em; } tbody tr:hover{ background:var(--z-subtle) !important; } td{ color:var(--ink); } /* highlight в тест-чате (grounded / галлюцинация) — тёплые тона */ .grounded{ background-color:var(--gold-soft) !important; color:var(--gold-2) !important; } .not-grounded{ background-color:var(--bad-bg) !important; color:var(--bad) !important; } /* ссылки-«посмотреть» и т.п. */ a.text-blue-600:hover, .hover\:underline:hover{ color:var(--gold) !important; } /* ===================================================================== ЭКРАН ВХОДА (login.html — отдельный, класс .zzd-login на body) ===================================================================== */ .zzd-login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; } .zzd-login-card{ position:relative; overflow:hidden; width:min(420px,94vw); background:var(--card); border:1px solid var(--line); border-radius:20px; padding:clamp(30px,4vw,42px) clamp(26px,4vw,38px); box-shadow:var(--card-shadow); } .zzd-login-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--gold), rgba(209,158,104,0) 60%); } .zzd-login-logo{ display:block; width:100%; max-width:210px; margin:0 auto 6px; filter:var(--logo-filter); } .zzd-login-title{ font-family:var(--zzd-lek); font-weight:800; font-size:1.35rem; color:var(--head); text-align:center; letter-spacing:-.01em; } .zzd-login-sub{ text-align:center; color:var(--muted); font-size:14px; margin:6px 0 22px; } .zzd-login label{ display:block; font-family:var(--zzd-lek); font-weight:600; font-size:12.5px; letter-spacing:.02em; color:var(--muted); margin-bottom:6px; } .zzd-login input{ width:100%; font-size:16px; padding:12px 14px; margin-bottom:16px; } .zzd-login-btn{ width:100%; font-family:var(--zzd-lek); font-weight:600; font-size:16px; background:var(--gold-2); color:var(--btn-gold-ink); border:none; border-radius:12px; padding:13px; cursor:pointer; box-shadow:0 14px 28px -14px rgba(209,158,104,.7); transition:.2s; } .zzd-login-btn:hover{ filter:brightness(1.06); } .zzd-login-err{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--bad); color:var(--bad); border-radius:10px; padding:.7rem 1rem; margin-bottom:16px; font-size:14px; } /* плавающий тумблер темы на входе */ .zzd-fab{ position:fixed; top:20px; right:24px; z-index:3; display:flex; align-items:center; gap:7px; font-family:var(--zzd-lek); font-weight:600; font-size:13px; color:var(--muted); background:var(--card); border:1px solid var(--line-2); border-radius:100px; padding:8px 14px; cursor:pointer; transition:.2s; } .zzd-fab:hover{ color:var(--gold-2); border-color:var(--gold); } /* +10% масштаб (как «110% зума») + сворачивание рельса — на десктопе */ @media (min-width:900px){ .zzd-layout{ zoom:1.1; width:calc(100% / 1.1); } .zzd-sidebar{ height:calc(100vh / 1.1); transition:width .28s ease, flex-basis .28s ease; } .zzd-collapse{ position:absolute; top:12px; right:12px; z-index:3; display:grid; place-items:center; width:26px; height:26px; background:var(--z-subtle); border:1px solid var(--line); color:var(--muted); border-radius:8px; cursor:pointer; font-size:17px; line-height:1; transition:background .2s, transform .35s ease; } .zzd-collapse:hover{ background:var(--nav-hover); color:var(--head); } html.nav-collapsed .zzd-sidebar{ width:76px; flex:0 0 76px; min-width:0; overflow:hidden; padding-left:.5rem; padding-right:.5rem; } html.nav-collapsed .zzd-collapse{ top:10px; left:50%; right:auto; transform:translateX(-50%) rotate(180deg); } html.nav-collapsed .zzd-brand{ text-align:center; padding:2.4rem 0 .7rem; } html.nav-collapsed .zzd-brand-mark{ display:none; } html.nav-collapsed .zzd-brand-mark-mini{ display:block; } html.nav-collapsed .zzd-brand small, html.nav-collapsed .ni-tx, html.nav-collapsed .zzd-pseal, html.nav-collapsed .zzd-theme-toggle .tt-tx, html.nav-collapsed .zzd-foot .zzd-user{ display:none; } html.nav-collapsed .zzd-nav{ margin-top:.8rem; padding:6px 4px; } html.nav-collapsed .zzd-nav-link{ justify-content:center; gap:0; padding:11px 0; } html.nav-collapsed .zzd-theme-toggle, html.nav-collapsed .zzd-logout{ justify-content:center; gap:0; } } /* низкие экраны: меню без скролла — эмблему и подпись прочь (меню «заходит на логотип») */ @media (min-width:900px) and (max-height:940px){ .zzd-sidebar .zzd-brand small{ display:none; } .zzd-pseal{ display:none; } } /* планшет/телефон: сайдбар → выезжающий drawer */ @media (max-width:899px){ .zzd-topbar{ display:flex; align-items:center; gap:.8rem; position:sticky; top:0; z-index:30; background:var(--z-navbar); color:#fff; padding:.55rem .9rem; box-shadow:0 1px 0 var(--z-hair); } .zzd-sidebar{ position:fixed; top:0; left:0; height:100vh; width:264px; z-index:40; background:var(--bg); transform:translateX(-100%); transition:transform .25s; box-shadow:2px 0 40px rgba(0,0,0,.5); overflow-y:auto; } .zzd-sidebar::after{ display:none; } body.nav-open .zzd-sidebar{ transform:none; } body.nav-open .zzd-backdrop{ display:block; position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.55); } .zzd-content{ padding:1.2rem 1rem; max-width:none; } }