:root { /* ---- Светлая/тёмная тема (решение владельца 19.09.2026, см. /settings) ---- color-scheme: light dark - поддерживаем обе, light-dark() в каждом цветовом токене сам выбирает нужную ветку по ВЫЧИСЛЕННОМУ (унаследованному) color-scheme, а не по паре copy-paste блоков "светлая"/"тёмная" - забыть токен в одном из двух блоков физически невозможно, он один. Выбор пользователя (см. app/templates/settings.html) - через атрибут data-theme на , который форсирует color-scheme ниже, в обход системного prefers-color-scheme; без атрибута - "как в системе". Не цветовые токены (radius/fs/space/dur/ease ниже) от темы не зависят. */ color-scheme: light dark; /* Тёплая нейтральная гамма (решение владельца 20.09.2026, тот же референс личного финансового трекера, что и у --accent-2 ниже) - вместо нейтрально-серых/чисто-чёрных поверхностей: лёгкий зелёно-серый подтон во тьме, тёплый кремовый в свету. Сайдбар в референсе СВЕТЛЕЕ основного фона (а не темнее, как было раньше в тёмной ветке) - та же иерархия сохранена здесь: --sidebar-bg/--panel лежат на тон выше --bg. */ --bg: light-dark(#f1f2ec, #141613); --sidebar-bg: light-dark(#ffffff, #1c1f1b); --panel: light-dark(#ffffff, #1c1f1b); --panel-hover: light-dark(#eceee6, #242822); --panel-deep: light-dark(#e5e7dd, #101210); /* sticky-заголовки таблиц - на тон глубже панели в обе стороны */ --border: light-dark(#dcded4, #2c3029); --text: light-dark(#18181b, #f2f2f3); --muted: light-dark(#6c6c76, #9a9aa2); --accent: light-dark(#18181b, #f2f2f3); /* первичная кнопка - инвертированный монохром, роль сохранена в обе стороны */ --accent-text: light-dark(#ffffff, #0b0b0d); --danger: light-dark(#d94343, #ff6b6b); /* темнее/насыщеннее в светлой - на белом фоне #ff6b6b терял контраст */ /* ---- Фирменный акцент: тёплое золото вместо прежнего фиолетового (решение владельца 17.09.2026, по референсу дизайна личного финансового трекера - см. чат) - не тот же оттенок, что на референсе, и осознанно дальше по тону от --cat-ads (оранжевый, H~25°): золото здесь H~42° и заметно менее насыщенное/тусклее, чтобы бренд-акцент и категорийный "Реклама" не сливались в один и тот же "оранжевый". Светлая ветка - тот же тон, но темнее/насыщеннее (тот же приём, что и --danger выше): --accent-2-pale используется как ТЕКСТ на цветной подложке (.ai-card-live, .logo-accent) - в тёмной теме это светлый оттенок на чёрном, в светлой это должна быть та же роль наоборот, тёмный оттенок на светлом, а не "просто тот же цвет". ---- */ --accent-2: light-dark(#9c7a2c, #c8a041); /* базовый бренд-золотой */ --accent-2-light: light-dark(#b8934a, #dfbb68); /* светлый конец градиентов (.ai-card-icon, буллеты) */ --accent-2-dark: light-dark(#7a5f20, #9b7427); /* тёмный конец градиентов */ --accent-2-pale: light-dark(#7a5f20, #f0dda8); /* акцентный текст (.ai-card-live, .logo-accent) - тёмный на светлом, светлый на тёмном */ /* Производные для точечного использования вне .ai-card - тот же rgb, что у --accent-2 выше, альфа приподнята в светлой ветке (то же rgba читается бледнее на белом, чем на чёрном). */ --accent-2-wash: light-dark(rgba(156, 122, 44, 0.10), rgba(200, 160, 65, 0.12)); /* самая слабая подложка/wash */ --accent-2-soft: light-dark(rgba(156, 122, 44, 0.18), rgba(200, 160, 65, 0.20)); /* hover-обводка, превью-состояния */ --accent-2-glow: light-dark(rgba(156, 122, 44, 0.32), rgba(200, 160, 65, 0.35)); /* рамка активного состояния, edge-glow (было .35 у border .ai-card) */ --accent-2-glow-strong: light-dark(rgba(156, 122, 44, 0.38), rgba(200, 160, 65, 0.40)); /* было 0.4 у border .ai-card-live — отдельный токен, чтобы не терять оттенок при рефакторинге */ --accent-2-strong: light-dark(rgba(156, 122, 44, 0.50), rgba(200, 160, 65, 0.55)); /* пик пульс-анимации (совпадает с текущим 0.55 в @keyframes ai-pulse) */ --accent-2-ring: 0 0 0 3px var(--accent-2-soft); /* готовый box-shadow для :focus-visible */ /* ---- Категорийные цвета дашборда на главной (Панель Пульса) ---- Каждый цвет закреплён за одним доменом данных везде на сайте, чтобы цвет стал легендой, которую пользователь запоминает один раз: Заказы/Остатки ФБС - фирменный акцент (переиспользует --accent-2, отдельного оттенка нет), Деньги - зелёный (формализация уже существовавшего в коде "успеха"), Остатки/аналитика WB - голубой, Реклама - оранжевый (осознанно далеко от жёлтого предупреждения ниже и от --danger, т.к. обычно рисуется в "нет доступа" состоянии, которое не должно читаться как ошибка). Светлая ветка каждого семейства - тот же тон, темнее/насыщеннее для контраста на белом (тот же приём, что и у --accent-2/--danger выше). */ --cat-money: light-dark(#2f9c52, #5fd97f); --cat-money-text: light-dark(#1f7a3d, #7fe0a0); --cat-money-wash: light-dark(rgba(47, 156, 82, 0.08), rgba(95, 217, 127, 0.08)); --cat-money-soft: light-dark(rgba(47, 156, 82, 0.16), rgba(95, 217, 127, 0.18)); --cat-money-glow: light-dark(rgba(47, 156, 82, 0.22), rgba(95, 217, 127, 0.25)); --cat-money-strong: light-dark(rgba(47, 156, 82, 0.40), rgba(95, 217, 127, 0.40)); --cat-stock: light-dark(#1687a3, #3ec6e0); --cat-stock-text: light-dark(#0f6a80, #8fe3f2); --cat-stock-wash: light-dark(rgba(22, 135, 163, 0.08), rgba(62, 198, 224, 0.08)); --cat-stock-soft: light-dark(rgba(22, 135, 163, 0.16), rgba(62, 198, 224, 0.18)); --cat-stock-glow: light-dark(rgba(22, 135, 163, 0.22), rgba(62, 198, 224, 0.25)); --cat-stock-strong: light-dark(rgba(22, 135, 163, 0.40), rgba(62, 198, 224, 0.40)); --cat-ads: light-dark(#c96a1e, #ff9f5a); --cat-ads-text: light-dark(#a8551a, #ffc08a); --cat-ads-wash: light-dark(rgba(201, 106, 30, 0.08), rgba(255, 159, 90, 0.08)); --cat-ads-soft: light-dark(rgba(201, 106, 30, 0.16), rgba(255, 159, 90, 0.18)); --cat-ads-glow: light-dark(rgba(201, 106, 30, 0.22), rgba(255, 159, 90, 0.25)); --cat-ads-strong: light-dark(rgba(201, 106, 30, 0.40), rgba(255, 159, 90, 0.40)); /* ---- Radius — формализация уже существующих в коде значений, ни одно число не меняется ---- */ --radius-sm: 6px; /* инпуты, кнопки, .article-photo — уже везде 6px */ --radius-md: 8px; /* .stat-tile, .article, .error, .empty, .table-wrap */ --radius-lg: 10px; /* .login-card */ --radius-xl: 13px; /* .ai-card-icon */ --radius-2xl: 16px; /* .ai-card */ --radius-pill: 999px; /* .ai-card-live */ /* ---- Тени — новые, используются только в двух местах (см. .ai-card:hover и .login-page) ---- */ --shadow-edge-card: 0 12px 32px -14px var(--accent-2-glow); /* hover .ai-card */ --shadow-login-glow: 0 0 60px var(--accent-2-wash); /* амбиентная подсветка страницы логина */ /* ---- Шрифтовые размеры — документирование существующей шкалы, значения не меняются; переменные не обязательны к внедрению в этом релизе ---- */ --fs-h1: 22px; /* .page-header h1 */ --fs-logo: 20px; /* .logo */ --fs-card-title: 19px; /* .ai-card-title */ --fs-body-lg: 15px; /* .ai-card-intro, .ai-card-bullets li */ --fs-body: 14px; /* .page-subtitle, table td/th text, кнопки */ --fs-small: 13px; /* .meta, .sidebar-user, .declare-input, .mgmt-input */ --fs-xs: 12px; /* th, .sidebar-user-role, .logout-button */ --fs-micro: 11px; /* .nav-section-title, .ai-card-live */ /* Акцентный serif для заголовков (.logo, .page-header h1) - по референсу Family Finance: жирная антиква для "фирменных" надписей, весь остальной текст сайта остаётся на системном sans-serif (см. font-family на body). */ --font-serif: Georgia, "Times New Roman", Times, serif; /* ---- Motion language: единые длительности и кривые для всех переходов/анимаций сайта ---- Каждый сценарий использует один из этих токенов — новых "самопальных" значений в коде быть не должно, чтобы плавность ощущалась как единая система, а не набор случайных чисел. Все анимации, использующие эти токены, отключаются одним блоком в @media (prefers-reduced-motion: reduce) внизу файла. */ --dur-fast: 150ms; /* мгновенная реакция: hover/фокус (уже было — a,button,input...) */ --dur-base: 200ms; /* появление шапки страницы (main), поворот caret */ --dur-moderate: 220ms; /* появление строк/карточек (stagger), схлопывание строки при удалении */ --dur-accordion: 250ms; /* раскрытие/закрытие аккордеонов (было и осталось 0.25s) */ --dur-flash: 300ms; /* автосейв: проявление/угасание .flash-row */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* базовый переход по умолчанию (цвет, hover, фокус) */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* появление нового: fade-in, stagger, flash-in */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* исчезновение: fade-out строки при удалении */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* симметричные переходы: аккордеон, высота строки */ /* ---- Ритм отступов — формализация уже фактически используемых в коде значений в переиспользуемую шкалу (11.09.2026, аудит информационной плотности всех страниц). Ни одно число не меняется, только называется: расстояние МЕЖДУ двумя структурно разными блоками всегда один из этих токенов и всегда margin-top у НАЧАЛА следующего блока (не margin-bottom у предыдущего) - иначе оно снова "теряется", если блоки переставить. ---- */ --space-1: 4px; /* подпись → значение внутри одного показателя (.stat-label margin-top) */ --space-2: 8px; /* тесная группа внутри одной строки/карточки */ --space-3: 12px; /* между плитками/карточками в одном ряду (.stat-tiles/.pulse-grid gap) */ --space-4: 16px; /* блок внутри секции (.mgmt-add-form padding-top) */ --space-5: 20px; /* конец группы плиток перед следующим блоком (.stat-tiles margin-bottom) */ --space-6: 24px; /* граница между разными смысловыми секциями страницы (.page-header margin-bottom) */ /* ---- "Крупные числа" — те же .stat-value/.pulse-hero-value, что и были, просто названы токеном: на одном экране одновременно должно быть не больше одного такого значения на карточку (см. правило типографики). ---- */ --fs-stat: 24px; /* .stat-value */ --fs-stat-lg: 32px; /* .pulse-hero-value */ } /* Явный выбор темы (см. app/templates/settings.html) форсирует color-scheme в обход системного prefers-color-scheme - light-dark() выше пересчитает каждый токен по нему же, без отдельного блока переопределений. Без атрибута (человек не выбирал/выбрал "как в системе") - color-scheme остаётся "light dark" из :root, и решает система. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); } a { color: inherit; } /* Плавность по умолчанию: hover/active-переходы у ссылок, кнопок, полей и строк таблицы вместо мгновенного переключения цвета/фона. */ a, button, input, select, .nav-item, tbody tr { transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } main { animation: fade-in var(--dur-base) var(--ease-out); } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Переключение человека на "Задачах" (шлюз/вкладки Даниил-Илья-Руслан) - решение владельца 22.09.2026: без перезагрузки страницы, контент подгружается через fetch и подменяется в #tasks-body (см. tasks.html loadTasksBody), а этот класс проигрывает появление снизу заметнее обычного main{fade-in} (4px) - здесь смена контента откровенно заметна человеку, лёгкого фейда недостаточно, чтобы прочитаться как "появилось", а не "просто моргнуло". */ @keyframes tasks-body-reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } #tasks-body.tasks-reveal { animation: tasks-body-reveal var(--dur-moderate) var(--ease-out); } /* ---- Хореография появления списков: первые несколько карточек/строк проявляются с небольшим последовательным сдвигом, дальше — без задержки, чтобы длинный список не ощущался медленным. Работает поверх main{fade-in}. ---- */ @keyframes item-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Строки .mgmt-table tbody tr сознательно НЕ участвуют в этой хореографии: эти таблицы плотные, рабочие, перечитываются много раз в день, и каждая полная перезагрузка (после любого «Добавить»/«Удалить» — это redirect) заново проигрывала бы каскад по всем строкам. Для CRUD-таблицы, которую сканируют взглядом много раз в день, повторяющаяся анимация на каждой строке — уже шум, а не польза. */ .stat-tile, .article { animation: item-in var(--dur-moderate) var(--ease-out) both; } .stat-tile:nth-child(1), .article:nth-child(1) { animation-delay: 0ms; } .stat-tile:nth-child(2), .article:nth-child(2) { animation-delay: 25ms; } .stat-tile:nth-child(3), .article:nth-child(3) { animation-delay: 50ms; } .stat-tile:nth-child(4), .article:nth-child(4) { animation-delay: 75ms; } .stat-tile:nth-child(5), .article:nth-child(5) { animation-delay: 100ms; } .stat-tile:nth-child(6), .article:nth-child(6) { animation-delay: 125ms; } .stat-tile:nth-child(7), .article:nth-child(7) { animation-delay: 150ms; } /* Потолок хореографии: с 8-го элемента и далее — без нарастающей задержки. */ .stat-tile:nth-child(n+8), .article:nth-child(n+8) { animation-delay: 0ms; } .layout { display: flex; min-height: 100vh; } /* --- Сайдбар --- */ /* position: sticky + height: 100vh (решение владельца 20.09.2026) - раньше сайдбар был обычным флекс-элементом без своей высоты, поэтому браузер растягивал его вровень с высотой основного контента (align-items: stretch у .layout) и прокручивал вместе со страницей: чтобы увидеть "Настройки" внизу меню на длинной странице, приходилось скроллить вниз. Теперь высота сайдбара всегда равна высоте окна и не зависит от контента. Подстраховка на случай совсем маленького окна (не основной способ поместить пункты меню - для этого см. плотные отступы .nav-item/.nav-section-title ниже) - overflow-y:auto НЕ на самом .sidebar (нашли 22.09.2026: overflow-y на элементе молча включает и обрезающий overflow-x, из-за чего абсолютно спозиционированная .notif-panel, которая по дизайну шире сайдбара и намеренно вылезает поверх контента, обрезалась по правому краю сайдбара), а на самом