/* ════════════════════════════════════════════════════════════════════ * Soultrix Brand Stylesheet * ════════════════════════════════════════════════════════════════════ * * Единый источник правды для брендинга. Подключается ПЕРВЫМ во всех * шаблонах (base.html и standalone-страницы), чтобы остальной CSS мог * читать переменные через var(--brand-*). * * Что здесь: * 1. Брендовые цвета и градиенты (sky→indigo). * 2. Общие токены палитры (--bg, --surface, --text, --accent…), * которыми пользуется base.html и наследующие страницы. * 3. Класс .brand-mark — стиль лого SOULTRIX (Inter ExtraBold, * uppercase, плотный letter-spacing, gradient через * background-clip:text). * 4. Класс .btn-brand — primary-кнопка с фирменным градиентом. * 5. Класс .body-tint — мягкий радиальный тинт фона страницы, * объединяющий внутренние страницы с landing'ом. * 6. Тема — light по умолчанию, dark через html.dark. * * Что здесь НЕ должно появляться: * - Layout-стили конкретных страниц (.bento, .navbar, .card, .pill…). * - Компонентные стили из base.html (.btn--primary, .navbar__links…) * — они зависят от структуры конкретного шаблона и живут там. * * Inter ExtraBold подключается через в * шаблона — не через @import, чтобы избежать дополнительного * запроса с критического пути. .brand-mark fallback'ится на * системные шрифты, если Inter не загрузился. * ══════════════════════════════════════════════════════════════════ */ /* ── Light theme (по умолчанию) ─────────────────────────────────── */ :root { /* Brand atoms */ --brand-sky: #0ea5e9; --brand-indigo: #6366f1; --brand-sky-soft: rgba(14, 165, 233, 0.12); --brand-indigo-soft: rgba(99, 102, 241, 0.12); --brand-grad: linear-gradient(135deg, #0ea5e9, #6366f1); --brand-grad-90: linear-gradient(90deg, #0ea5e9, #6366f1); /* Background + body-tint (мягкий радиал на верх страницы) */ --bg: #f3f4f6; --bg-tint: radial-gradient(1200px 600px at 50% -10%, rgba(99, 102, 241, 0.05), transparent 60%); /* Surfaces */ --surface: #ffffff; --surface-alt: #f9fafb; --surface-glass: rgba(255, 255, 255, 0.7); --border: #e5e7eb; --border-soft: #f1f5f9; /* Text */ --text: #111827; --text-sub: #6b7280; --text-soft: #94a3b8; /* Accent (alias для совместимости с компонентами base.html) */ --accent: #0ea5e9; --accent-2: #6366f1; --accent-text: #ffffff; --accent-sub: #e0f2fe; /* Semantic */ --green: #10b981; --green-bg: #ecfdf5; --red: #ef4444; --red-bg: #fef2f2; /* Shadows */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); --shadow-brand: 0 6px 16px rgba(99, 102, 241, 0.3); /* Radii / spacing */ --radius: 14px; --radius-sm: 10px; --radius-pill: 999px; --gap: 12px; --transition-theme: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ── Dark theme ─────────────────────────────────────────────────── */ html.dark { /* Brand atoms — светлее в темной теме (sky-400/indigo-400) */ --brand-sky: #38bdf8; --brand-indigo: #818cf8; --brand-sky-soft: rgba(56, 189, 248, 0.2); --brand-indigo-soft: rgba(129, 140, 248, 0.2); --brand-grad: linear-gradient(135deg, #38bdf8, #818cf8); --brand-grad-90: linear-gradient(90deg, #38bdf8, #818cf8); --bg: #151720; --bg-tint: radial-gradient(1200px 600px at 50% -10%, rgba(99, 102, 241, 0.18), transparent 60%); --surface: #1a1c25; --surface-alt: #22252f; --surface-glass: rgba(26, 28, 37, 0.6); --border: #2e3140; --border-soft: rgba(255, 255, 255, 0.06); --text: #e5e7eb; --text-sub: #9ca3af; --text-soft: #64748b; --accent: #38bdf8; --accent-2: #818cf8; --accent-sub: #0e2540; --green-bg: #064e3b; --red-bg: #450a0a; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* ══════════════════════════════════════════════════════════════════ * Brand mark — лого SOULTRIX. * Используется в .navbar__logo, .footer-logo и любых других местах, * где надо вывести бренд-имя. Не указывает размер шрифта — это * делает контейнер (например, .navbar__logo задаёт 22px, footer 20px). * ══════════════════════════════════════════════════════════════════ */ .brand-mark { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-weight: 800; letter-spacing: -1.5px; text-transform: uppercase; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; white-space: nowrap; /* Компенсация отрицательного letter-spacing на последней букве. Negative letter-spacing укорачивает inline-бокс после КАЖДОЙ буквы (включая последнюю). У "X" в SOULTRIX из-за этого правый штрих выходит за gradient-region и не закрашивается — визуально буква выглядит "обрезанной". padding-inline-end расширяет padding-box, в который рисуется градиент, и background-clip: text закрашивает X целиком. */ padding-inline-end: 0.12em; } /* ══════════════════════════════════════════════════════════════════ * Body-tint — фон страницы с мягким радиальным брендовым акцентом. * Применяется на через class="body-tint" (в base.html через * {% block body_attrs %}). Цель — визуально связать внутренние * страницы (плотные карточки, таблицы) с landing-ом, не ломая * читаемость дашбордов. * * background-attachment: fixed — тинт не скроллится с контентом. * ══════════════════════════════════════════════════════════════════ */ .body-tint { background-color: var(--bg); background-image: var(--bg-tint); background-repeat: no-repeat; background-attachment: fixed; } /* ══════════════════════════════════════════════════════════════════ * Brand button — primary-кнопка с фирменным градиентом. * Используется на landing/auth/ai-concept и в любых местах, где нужен * акцентный CTA. Внутренние страницы могут использовать .btn--primary * из base.html (плоская заливка) — оба стиля валидны. * ══════════════════════════════════════════════════════════════════ */ .btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; background: var(--brand-grad-90); color: #ffffff; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; } .btn-brand:hover { transform: translateY(-1px); box-shadow: var(--shadow-brand); } html.dark .btn-brand { color: #0a0e1a; }