/* ============================================================ Мой Агент — бренд-слой кабинета (в тон лендингу moi-agent.ru) Подключается ПОСЛЕ Tailwind: поверх утилит добавляет шрифт, фон со световыми пятнами, стекло и фирменные кнопки. ============================================================ */ /* ---------- Inter (self-hosted, как на лендинге) ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/landing/fonts/inter-var-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/landing/fonts/inter-var-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/landing/fonts/inter-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/landing/fonts/inter-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --ma-ink: #0b1220; --ma-text: #3f4a5f; --ma-muted: #6e7891; --ma-line: #e6e9f2; --ma-indigo: #4f46e5; --ma-indigo-strong: #4338ca; --ma-indigo-soft: #eef2ff; --ma-deep-1: #312e81; --ma-deep-2: #1e1b4b; --ma-ok: #10b981; /* Тинты статусных бейджей («включено», «Бизнес»). Живут здесь, а не в шаблоне страницы: тот же зелёный/янтарный нужен и на других экранах, а копия разъезжается при правке темы. */ --ma-ok-soft: #ecfdf5; --ma-amber: #b4791a; --ma-amber-soft: #fdf6e7; --ma-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Поверхностные токены (единые ключи для светлой/тёмной темы) */ --ma-bg1: #fcfcfd; --ma-bg2: #f6f6f8; /* фон-градиент контента */ --ma-sidebar: #f3f3f5; /* сайдбар */ --ma-surface: #ffffff; /* поднятые поверхности: поле ввода, карточки */ --ma-surface-2: #f0f0f2; /* пузырь пользователя, вторичный тинт */ --ma-code-bg: #0b1220; /* code-блоки */ } /* ============================================================ Тёмная «бархатная» тема — глубокий графит с индиго-родством. Активируется атрибутом [data-theme="dark"] на (ставит ранний инлайн-скрипт из base.html до первой отрисовки — без мигания). Светлая тема НЕ затрагивается: всё ниже строго под dark-скоупом. ============================================================ */ :root[data-theme="dark"] { --ma-ink: #ececf1; --ma-text: #c6c8d2; --ma-muted: #8b8e9c; --ma-line: #2c2c37; --ma-indigo: #6366f1; /* кнопки: чуть светлее бренда — читаемо на тёмном */ --ma-indigo-strong: #a5b4fc; /* ссылки/каретка: светлый индиго на тёмном */ --ma-indigo-soft: #262636; /* тинт активного пункта/hover (индиго-подкрашенный тёмный) */ --ma-ok: #34d399; --ma-ok-soft: #10241d; --ma-amber: #e5b45a; --ma-amber-soft: #2a2318; --ma-bg1: #151519; --ma-bg2: #0f0f13; --ma-sidebar: #1a1a21; --ma-surface: #22222c; --ma-surface-2: #2a2a35; --ma-code-bg: #1b1b24; } :root[data-theme="dark"] body { color: var(--ma-ink); background: #0f0f13; } :root[data-theme="dark"] .ma-amb { background: linear-gradient(180deg, var(--ma-bg1), var(--ma-bg2)); } :root[data-theme="dark"] .ma-glass { background: rgba(30, 30, 38, 0.55) !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4), 0 24px 60px -28px rgba(0,0,0,.6); } :root[data-theme="dark"] .ma-glass-bar { background: rgba(21, 21, 26, 0.72) !important; border-color: rgba(255, 255, 255, 0.06) !important; } :root[data-theme="dark"] .ma-btn-secondary { background: rgba(255,255,255,.05); } /* Ремап часто используемых Tailwind-утилит внутри тёмного скоупа (перекрываем поверхности/текст/бордеры без правки каждого шаблона). Селектор [data-theme=dark] .util специфичнее одиночной утилиты → выигрывает. */ :root[data-theme="dark"] .bg-\[\#f3f3f5\] { background: var(--ma-sidebar) !important; } :root[data-theme="dark"] .bg-white { background: var(--ma-surface) !important; } :root[data-theme="dark"] .bg-slate-50, :root[data-theme="dark"] .bg-slate-100, :root[data-theme="dark"] .bg-neutral-50, :root[data-theme="dark"] .bg-gray-50 { background: var(--ma-sidebar) !important; } :root[data-theme="dark"] .border-slate-200, :root[data-theme="dark"] .border-slate-100, :root[data-theme="dark"] .border-slate-300, :root[data-theme="dark"] .border-slate-400, :root[data-theme="dark"] .border-neutral-200, :root[data-theme="dark"] .border-gray-200, :root[data-theme="dark"] .border-gray-300, :root[data-theme="dark"] .border-black\/\[\.07\], :root[data-theme="dark"] .border-black\/5, :root[data-theme="dark"] .border-black\/10 { border-color: var(--ma-line) !important; } :root[data-theme="dark"] .text-slate-950, :root[data-theme="dark"] .text-slate-900, :root[data-theme="dark"] .text-slate-800, :root[data-theme="dark"] .text-neutral-900, :root[data-theme="dark"] .text-gray-900 { color: var(--ma-ink) !important; } :root[data-theme="dark"] .text-slate-700, :root[data-theme="dark"] .text-slate-600, :root[data-theme="dark"] .text-neutral-600, :root[data-theme="dark"] .text-gray-600 { color: var(--ma-text) !important; } :root[data-theme="dark"] .text-slate-500, :root[data-theme="dark"] .text-slate-400, :root[data-theme="dark"] .text-neutral-400, :root[data-theme="dark"] .text-gray-500, :root[data-theme="dark"] .text-gray-400 { color: var(--ma-muted) !important; } :root[data-theme="dark"] .hover\:bg-slate-100:hover, :root[data-theme="dark"] .hover\:bg-slate-50:hover, :root[data-theme="dark"] .hover\:bg-black\/\[\.04\]:hover { background: rgba(255,255,255,.05) !important; } /* Активный пункт меню (bg-indigo-50 / text-indigo-700) + лого-текст индиго */ :root[data-theme="dark"] .bg-indigo-50 { background: var(--ma-indigo-soft) !important; } :root[data-theme="dark"] .text-indigo-700, :root[data-theme="dark"] .text-indigo-600 { color: var(--ma-indigo-strong) !important; } /* Цветные бейджи/алёрты — приглушаем под тёмный фон */ :root[data-theme="dark"] .bg-emerald-50 { background: rgba(16,185,129,.12) !important; } :root[data-theme="dark"] .bg-amber-50, :root[data-theme="dark"] .bg-amber-100 { background: rgba(245,158,11,.12) !important; } :root[data-theme="dark"] .bg-rose-50, :root[data-theme="dark"] .bg-indigo-50\/60 { background: rgba(244,63,94,.12) !important; } :root[data-theme="dark"] .text-emerald-900, :root[data-theme="dark"] .text-emerald-700 { color: #6ee7b7 !important; } :root[data-theme="dark"] .text-amber-900 { color: #fcd9a8 !important; } :root[data-theme="dark"] .text-rose-900, :root[data-theme="dark"] .text-rose-600 { color: #fda4af !important; } :root[data-theme="dark"] .hover\:bg-rose-50:hover { background: rgba(244,63,94,.14) !important; } /* Сайдбарные пункты чатов (инлайн-hex из _sidebar.html) */ :root[data-theme="dark"] .sb-thread-list .sb-thread { color: var(--ma-text); } :root[data-theme="dark"] .sb-thread-list .sb-thread:hover { background: rgba(255,255,255,.05); color: var(--ma-ink); } :root[data-theme="dark"] .sb-thread-list .sb-thread.active { background: var(--ma-indigo-soft); color: var(--ma-indigo-strong); } :root[data-theme="dark"] .sb-thread-list .sb-empty, :root[data-theme="dark"] .sb-thread-list .sb-thread .sb-del { color: var(--ma-muted); } :root[data-theme="dark"] .sb-thread-list .sb-thread .sb-del:hover { color: #f87171; background: rgba(248,113,113,.14); } html { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* ---------- Фиксированный фон со световыми пятнами ---------- */ .ma-amb { position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Премиальный нейтральный фон (без фиолетового) — дорогой оттенок белого */ background: linear-gradient(180deg, #fcfcfd, #f6f6f8); } /* ---------- Матовое стекло ---------- */ .ma-glass { background: rgba(255, 255, 255, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 23, 42, 0.05), 0 24px 60px -28px rgba(15, 23, 42, 0.12); } .ma-glass-bar { background: rgba(247, 248, 252, 0.6) !important; border-color: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 23, 42, 0.05); } /* ---------- Глубокий индиго (сайдбар, акцентные плашки) ---------- */ .ma-deep { position: relative; overflow: clip; background: linear-gradient(170deg, var(--ma-deep-1), var(--ma-deep-2) 75%) !important; } .ma-deep::before { content: ""; position: absolute; width: 320px; height: 320px; right: -100px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%); filter: blur(50px); pointer-events: none; } .ma-deep > * { position: relative; } /* ---------- Кнопки ---------- */ .ma-btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; background: var(--ma-indigo); color: #fff; cursor: pointer; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; padding: 10px 22px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 24px -12px rgba(79, 70, 229, 0.55); transition: background-color 0.18s var(--ma-ease), transform 0.18s var(--ma-ease), box-shadow 0.18s var(--ma-ease); } .ma-btn:hover { background: var(--ma-indigo-strong); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 16px 32px -12px rgba(79, 70, 229, 0.6); } .ma-btn:active { transform: translateY(0) scale(0.99); } .ma-btn:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.4); outline-offset: 2px; } .ma-btn-secondary { background: rgba(255, 255, 255, 0.7); border: 1px solid var(--ma-line); color: var(--ma-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .ma-btn-secondary:hover { background: var(--ma-indigo-soft); border-color: rgba(79, 70, 229, 0.35); transform: translateY(-1px); } .ma-btn-mega { width: 100%; min-height: 60px; border-radius: 16px; background: linear-gradient(120deg, #6366f1 0%, #8b5cf6 50%, #6366f1 100%); background-size: 220% 100%; font-size: 18px; box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12), 0 20px 44px -14px rgba(99, 102, 241, 0.65); animation: maMegaLive 5s ease-in-out infinite; } .ma-btn-mega:hover { transform: translateY(-2px); box-shadow: 0 3px 7px rgba(15, 23, 42, 0.12), 0 26px 56px -14px rgba(99, 102, 241, 0.75); } @keyframes maMegaLive { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } @media (prefers-reduced-motion: reduce) { .ma-btn-mega { animation: none; } .ma-btn, .ma-btn-secondary { transition: none; } } /* ---------- Переключатель (iOS-подобный) ---------- */ /* Дорожка 46×28, белый бегунок 24 с мягкой тенью. Живёт в brand.css, а не в шаблоне: тумблер нужен и на других экранах, а дубль стиля разъезжается. */ .ma-switch { appearance: none; border: 0; padding: 0; flex-shrink: 0; width: 46px; height: 28px; border-radius: 99px; background: #e9e9ea; position: relative; cursor: pointer; transition: background-color 0.25s var(--ma-ease); } .ma-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04); transition: transform 0.25s var(--ma-ease), width 0.2s var(--ma-ease); } .ma-switch.is-on { background: var(--ma-indigo); } .ma-switch.is-on::after { transform: translateX(18px); } .ma-switch:active::after { width: 28px; } .ma-switch.is-on:active::after { transform: translateX(14px); } .ma-switch:focus-visible { outline: 2px solid var(--ma-indigo); outline-offset: 3px; } :root[data-theme="dark"] .ma-switch { background: #39393d; } :root[data-theme="dark"] .ma-switch.is-on { background: var(--ma-indigo); } /* ---------- Поля ввода ---------- */ /* Своих стилей у input в кабинете не было: фон оставался браузерным белым, а цвет текста наследовался от body. В тёмной теме это давало светлые цифры на белом — то есть невидимый ввод. Здесь фон и текст берутся из токенов темы, поэтому поле читается в обеих. */ .ma-input { width: 100%; background: var(--ma-surface); color: var(--ma-ink); border: 1px solid var(--ma-line); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; outline: none; transition: border-color 0.18s var(--ma-ease), box-shadow 0.18s var(--ma-ease); } .ma-input::placeholder { color: var(--ma-muted); } .ma-input:focus { border-color: var(--ma-indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ma-indigo) 22%, transparent); } /* Страховка для полей без явных классов фона/текста. Таких в кабинете 42 — от настроек до экрана входа: фон у них браузерный белый, а цвет текста наследуется от body, и в тёмной теме ввод становится невидимым (светлые буквы на белом). Правило только для тёмной темы и без !important — поля, у которых фон задан классом (.bg-white и т.п.), перекрываются ремапом выше. */ :root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]), :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--ma-surface); color: var(--ma-ink); border-color: var(--ma-line); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--ma-muted); }