/* ============================================================ module.css — стиль продуктовых модулей: финансы, продажи, HR, дисциплина, прогноз, риски, логистика, owner-day. Платформа-стиль owner.axioma-ai.ru: тёмная navy + Inter + JetBrains Mono для цифр + sidebar layout. ============================================================ */ /* 152-ФЗ: шрифты подключаются через self-hosted /static/fonts/fonts.css (см. в HTML). Google Fonts @import удалён. */ :root { --sidebar-width: 260px; --sidebar-width-collapsed: 72px; --bg-primary: #0a0e1a; --bg-surface: #111827; --bg-card: #1a2035; --border: #1e2a45; --border-strong: #2a3a5a; --accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #10b981; --accent-gold: #f59e0b; --accent-red: #ef4444; --blue-soft: rgba(59, 130, 246, 0.10); --purple-soft: rgba(139, 92, 246, 0.10); --green-soft: rgba(16, 185, 129, 0.10); --amber-soft: rgba(245, 158, 11, 0.10); --red-soft: rgba(239, 68, 68, 0.10); --text: #e2e8f0; --text-2: #cbd5e1; --text-3: #64748b; --text-4: #475569; /* --gradient-brand inherits from cockpit-tokens.css (single source of truth) */ --glow-blue: 0 0 24px rgba(59, 130, 246, 0.18); /* legacy aliases */ --navy: var(--bg-surface); --navy-dark: var(--bg-primary); --gold: var(--accent-gold); --bg: var(--bg-primary); --card: var(--bg-card); --border-soft: var(--border); --red: var(--accent-red); --blue: var(--accent-blue); --green: var(--accent-green); --amber: var(--accent-gold); } /* ============================================================ LIGHT THEME — переключается через [data-theme="light"] на ============================================================ */ html[data-theme="light"] { --bg-primary: #f8fafc; --bg-surface: #ffffff; --bg-card: #ffffff; --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; --text-2: #334155; --text-3: #64748b; --text-4: #94a3b8; --blue-soft: rgba(59, 130, 246, 0.12); --purple-soft: rgba(139, 92, 246, 0.12); --green-soft: rgba(16, 185, 129, 0.14); --amber-soft: rgba(245, 158, 11, 0.18); --red-soft: rgba(239, 68, 68, 0.14); --glow-blue: 0 4px 14px rgba(59, 130, 246, 0.12); /* aliases */ --bg: var(--bg-primary); --card: var(--bg-card); } html[data-theme="light"] body { background: var(--bg-primary); color: var(--text); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-primary); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .num, .kt-value, table.tbl td.num, table.tbl th.num { font-family: 'JetBrains Mono', Menlo, monospace; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } .serif { font-family: 'Inter', sans-serif; } /* legacy — наследуем Inter */ a { color: var(--accent-blue); text-decoration: none; } a:hover { color: #60a5fa; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* ============================================================ HERO + HERO-NAV — превращаются в компактную страничную шапку. На странице больше не нужен дублирующий бренд (он в sidebar), поэтому .hero показывает только модульный заголовок. .hero-nav скрыт — навигация теперь в sidebar. ============================================================ */ .hero { margin-left: var(--sidebar-width); background: transparent; color: var(--text); padding: 24px 32px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; border: none; } .hero-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; color: var(--text); } .hero-title .module-name { background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { color: var(--text-3); font-size: 13px; font-style: italic; } .hero-back { color: var(--text-3); font-size: 13px; } .hero-back a { color: var(--accent-blue); font-weight: 500; } .hero-back a:hover { color: #60a5fa; } .hero-nav { display: none; /* навигация перенесена в sidebar */ } /* ============================================================ CONTAINER — основной контент, отступ под sidebar ============================================================ */ .container { max-width: none; margin-left: var(--sidebar-width); padding: 24px 32px 80px; transition: margin-left 0.3s ease; } .cockpit-sidebar.collapsed ~ .container, .cockpit-sidebar.collapsed ~ .hero, .cockpit-sidebar.collapsed ~ main .container { margin-left: var(--sidebar-width-collapsed); } /* ============================================================ SECTION TITLE ============================================================ */ .section-title-wrap { margin: 32px 0 16px; } .section-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; color: var(--text); text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 8px; border-bottom: 2px solid var(--accent-blue); display: inline-block; padding-right: 28px; } /* ============================================================ KPI TILES ============================================================ */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 12px; } @media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } } .kpi-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; position: relative; overflow: hidden; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } .kpi-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); } .kpi-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .kpi-tile.blue::before { background: var(--accent-blue); box-shadow: var(--glow-blue); } .kpi-tile.green::before { background: var(--accent-green); } .kpi-tile.amber::before { background: var(--accent-gold); } .kpi-tile.red::before { background: var(--accent-red); } .kpi-tile .kt-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .kpi-tile .kt-value { font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } /* T0.2: контраст ≥ 4.5:1 на WHITE — заменены жёлтый/зелёный/красный на dark-варианты. Старые #F59E0B/#10B981/#EF4444 давали 2.15/2.54/3.76 на white = нечитаемо. */ .kpi-tile.red .kt-value { color: #B91C1C; } /* 5.93:1 vs white */ .kpi-tile.green .kt-value { color: #15803D; } /* 5.21:1 vs white */ .kpi-tile.amber .kt-value { color: #B45309; } /* 4.74:1 vs white */ .kpi-tile.blue .kt-value { color: var(--text); } /* В тёмной теме оставляем оригинальные яркие — там фон тёмный, контраст уже норм */ [data-theme="dark"] .kpi-tile.red .kt-value { color: var(--accent-red); } [data-theme="dark"] .kpi-tile.green .kt-value { color: var(--accent-green); } [data-theme="dark"] .kpi-tile.amber .kt-value { color: var(--accent-gold); } /* T0.2: тренды и semantic-цвет в таблицах / kt-delta — тоже dark на white. */ .kt-delta, .pill, .panel, td, span { /* применяется при наличии inline color: var(--accent-*) — caskaded не сработает, поэтому переопределяем сами переменные на белой теме */ } [data-theme="light"], html:not([data-theme]), :root { --accent-red: #B91C1C; --accent-green: #15803D; --accent-gold: #B45309; --accent-amber: #B45309; } [data-theme="dark"] { --accent-red: #EF4444; --accent-green: #10B981; --accent-gold: #F59E0B; --accent-amber: #F59E0B; } .kpi-tile .kt-delta { font-size: 12px; color: var(--text-3); margin-top: 8px; } /* ============================================================ PANELS / CARDS ============================================================ */ .panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; transition: border-color 0.25s; } .panel:hover { border-color: var(--border-strong); } .panel-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; color: var(--text); text-transform: uppercase; letter-spacing: 0.08em; border-left: 3px solid var(--accent-blue); padding-left: 10px; margin-bottom: 14px; } .panel-chart { height: 280px; position: relative; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 18px; } @media (max-width: 1100px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* ============================================================ TABLES ============================================================ */ table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } table.tbl th { background: var(--bg-surface); color: var(--text-3); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); } table.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-2); } table.tbl td.num { text-align: right; } table.tbl tr:hover td { background: rgba(59,130,246,0.04); } table.tbl td .pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; } table.tbl td .pill.green { background: var(--green-soft); color: var(--accent-green); } table.tbl td .pill.amber { background: var(--amber-soft); color: var(--accent-gold); } table.tbl td .pill.red { background: var(--red-soft); color: var(--accent-red); } table.tbl td .pill.blue { background: var(--blue-soft); color: var(--accent-blue); } /* ============================================================ ALERTS ============================================================ */ .alert { padding: 14px 18px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; line-height: 1.5; border-left: 4px solid; background: var(--bg-card); border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text-2); } .alert.red { background: linear-gradient(90deg, var(--red-soft) 0%, var(--bg-card) 45%); border-left-color: var(--accent-red); } .alert.amber { background: linear-gradient(90deg, var(--amber-soft) 0%, var(--bg-card) 45%); border-left-color: var(--accent-gold); } .alert.green { background: linear-gradient(90deg, var(--green-soft) 0%, var(--bg-card) 45%); border-left-color: var(--accent-green); } .alert.blue { background: linear-gradient(90deg, var(--blue-soft) 0%, var(--bg-card) 45%); border-left-color: var(--accent-blue); } .alert .alert-tag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; margin-right: 8px; } .alert.red .alert-tag { color: var(--accent-red); } .alert.amber .alert-tag { color: var(--accent-gold); } .alert.green .alert-tag { color: var(--accent-green); } .alert.blue .alert-tag { color: var(--accent-blue); } /* ============================================================ FOOT ============================================================ */ .foot { color: var(--text-3); font-size: 12px; text-align: center; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); } .foot a { color: var(--accent-blue); } /* ============================================================ MOBILE OVERRIDES — телефоны до 768px Применяются ко всем модулям, использующим module.css ============================================================ */ @media (max-width: 768px) { .container { padding: 12px; max-width: 100%; } .section-title-wrap { margin-top: 14px; margin-bottom: 8px; } .section-title { font-size: 16px; } /* KPI: 2 столбца на телефоне (узкие плитки лучше длинных строк) */ .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi-tile { padding: 10px 12px; } .kt-value { font-size: 20px; } .kt-label { font-size: 10px; } .kt-delta { font-size: 10px; } /* Все grid-секции в одну колонку */ .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 10px; } /* Чарт меньше высотой — экономим вертикаль */ .panel { padding: 12px; } .panel-chart { height: 220px; } .panel-title { font-size: 14px; margin-bottom: 8px; } /* Таблицы: горизонтальный скролл — лучше чем сломанная вёрстка */ .panel > table.tbl, .panel > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 12px; } table.tbl th, table.tbl td { padding: 8px 10px; } /* Алерты компактнее */ .alert { padding: 10px 12px; font-size: 13px; } .alert .alert-tag { font-size: 10px; } /* Hero-навигация (если есть) — wrap и крупнее тапаемые */ .hero-nav, .hero-back { padding: 10px 12px; font-size: 13px; flex-wrap: wrap; } .hero-back a { display: inline-block; padding: 4px 0; } } @media (max-width: 480px) { /* Совсем маленькие — один KPI на ряд */ .kpi-row { grid-template-columns: 1fr; } .panel-chart { height: 200px; } .section-title { font-size: 15px; } /* Скрыть второстепенные элементы footer */ .foot { font-size: 11px; } .foot a { display: inline-block; padding: 4px 0; } }