/* ============================================================ MP-Analytics — Design Tokens Фиолетово-синяя гамма (вдохновлено WB + Ozon) Стилистика: тёмная тема, много воздуха, мягкие тени, акцентный градиент только на ключевых элементах. ============================================================ */ :root { /* --- Фирменные цвета-полюса --- */ --wb-violet: #7B2FBE; /* фиолетовый Wildberries */ --wb-magenta: #CB11AB; /* малиновый WB (для редких акцентов) */ --ozon-blue: #005BFF; /* синий Ozon */ --ozon-deep: #001A34; /* тёмно-синий Ozon */ /* --- Базовая палитра интерфейса (тёмная тема) --- */ --bg: #0E0E14; /* основной фон страницы */ --surface: #16161F; /* фон карточек */ --surface-2: #1E1E2A; /* приподнятые элементы, hover */ --border: #2A2A38; /* тонкие границы */ /* --- Текст --- */ --text: #F4F4F7; /* основной текст */ --text-muted: #9CA3AF; /* подписи, второстепенное */ --text-faint: #6B7280; /* совсем приглушённое */ /* --- Акценты --- */ --primary: #005BFF; /* основной акцент (синий Ozon) */ --secondary: #7B2FBE; /* вторичный акцент (фиолетовый WB) */ --accent-gradient: linear-gradient(135deg, #7B2FBE 0%, #4D5BFF 50%, #005BFF 100%); /* --- Семантика статусов --- */ --success: #22C55E; /* ok */ --warning: #F59E0B; /* внимание */ --danger: #EF4444; /* err / горит */ /* --- Скругления --- */ --radius-sm: 10px; --radius: 16px; /* карточки */ --radius-lg: 24px; /* крупные блоки */ --radius-pill: 999px; /* таблетки, тумблеры */ /* --- Тени (мягкие, для глубины на тёмном) --- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow: 0 8px 32px rgba(0, 0, 0, 0.40); --shadow-glow: 0 8px 40px rgba(0, 91, 255, 0.25); /* свечение под акцентом */ /* --- Типографика --- */ --font-sans: "Inter Tight", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --fs-display: clamp(28px, 4vw, 44px); /* главные цифры/заголовки */ --fs-h1: 24px; --fs-h2: 18px; --fs-body: 15px; --fs-small: 13px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh: 1.5; /* --- Отступы (8px-сетка) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; /* --- Движение --- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.15s; --dur: 0.25s; } /* ============================================================ Светлая тема — переопределяем только переменные палитры. Бренд-цвета (WB violet, Ozon blue) и акцентный градиент остаются прежними, чтобы фирменность не терялась. Активируется через . ============================================================ */ [data-bs-theme="light"] { --bg: #F7F7FA; --surface: #FFFFFF; --surface-2: #F1F1F5; --border: #E4E4EA; --text: #15151B; --text-muted: #5B5F6B; --text-faint: #8B8F9A; --shadow-sm: 0 2px 8px rgba(20, 20, 35, 0.06); --shadow: 0 8px 32px rgba(20, 20, 35, 0.10); --shadow-glow: 0 8px 40px rgba(0, 91, 255, 0.18); } /* ============================================================ Примеры применения токенов — ориентир для агента. Эти классы показывают «как должно выглядеть», агент адаптирует их под реальную разметку проекта. ============================================================ */ body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh); -webkit-font-smoothing: antialiased; } /* Карточка-метрика (выручка, заказы) */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--secondary); } /* Подпись метрики */ .card__label { color: var(--text-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0.01em; } /* Главная цифра — здесь живёт «вау» */ .card__value { font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: -0.02em; margin-top: var(--space-2); } /* Акцентная карточка (например, выручка за месяц) */ .card--accent { background: radial-gradient(120% 120% at 0% 0%, rgba(123,47,190,0.18), transparent 60%), var(--surface); box-shadow: var(--shadow-glow); } /* Кнопка-акцент */ .btn-primary { background: var(--accent-gradient); color: #fff; font-weight: var(--fw-semibold); border: none; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); cursor: pointer; transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); } /* Активный таб / пункт меню */ .nav-item--active { color: var(--text); position: relative; } .nav-item--active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--accent-gradient); border-radius: var(--radius-pill); } /* Бейджи статусов синхронизации */ .badge-ok { background: rgba(34,197,94,0.15); color: var(--success); } .badge-err { background: rgba(239,68,68,0.15); color: var(--danger); } .badge-ok, .badge-err { font-size: var(--fs-small); font-weight: var(--fw-semibold); padding: 2px var(--space-2); border-radius: var(--radius-pill); } /* Линия графика выручки — в акцентный синий с лёгким свечением */ /* (для chart.js/recharts задать stroke: var(--primary)) */