/* ============================================ ФАЙЛ: variables.css ОПИСАНИЕ: CSS переменные для всего сайта (Clean Dark Theme) ============================================ */ :root { /* ========== ОСНОВНЫЕ ЦВЕТА ========== */ /* Основные цвета - Индиго */ --primary-color: #6366f1; --primary-hover: #818cf8; --primary-active: #4f46e5; --primary-glow: rgba(99, 102, 241, 0.35); /* Вторичные цвета - Циан / Синий */ --secondary-color: #06b6d4; --secondary-hover: #22d3ee; --secondary-active: #0891b2; /* Акцентные цвета - Розовый / Фуксия */ --accent-color: #f43f5e; --accent-hover: #fda4af; --accent-active: #e11d48; /* Нейтральные цвета (Сланцевые и глубокие космические синие вместо холодных серых) */ --neutral-50: #f8fafc; --neutral-100: #cbd5e1; --neutral-200: #94a3b8; --neutral-300: #64748b; --neutral-400: #3d4a63; --neutral-500: #263044; --neutral-600: #171e38; --neutral-700: #0e1430; --neutral-800: #090d22; --neutral-900: #060915; --neutral-950: #03050f; --neutral-1000: #01020a; /* ========== ФОНЫ ========== */ --bg-body: hsla(233, 78%, 14%, 0.98); /* Насыщенный глубокий космический темно-синий */ --bg-card: #080d20; /* Красивый космический фон карточек */ --bg-card-hover: #0d1430; /* Чуть более светлый темно-синий для эффекта наведения */ --bg-secondary: #050818; /* Глубокий темно-синий для вложенных блоков */ --bg-accent: #0a1128; /* Глубокий акцентный темно-синий */ --bg-glass: rgba(4, 6, 18, 0.92); /* Матовое темно-синее стекло */ --bg-glass-light: rgba(255, 255, 255, 0.015); /* Светлый слой стекла */ --bg-cookie: #080d20; --bg-color-cs: rgba(255, 255, 255, 0.015); /* ========== ЦВЕТА ТЕКСТА ========== */ --text-primary: #f8fafc; /* Почти чисто-белый для максимального контраста */ --text-secondary: #cbd5e1; /* Светлый сланцево-серый для вторичного текста */ --text-muted: #94a3b8; /* Приглушенный сланцево-серый */ --text-accent: #818cf8; /* Светящийся индиго-акцент */ --text-inverse: #05071a; /* Темный текст для светлых фонов */ --text-white: #ffffff; /* Чистый белый */ --text-cookie: #f8fafc; /* ========== ССЫЛКИ ========== */ --link-color: #38bdf8; /* Яркий светло-синий */ --link-hover: #7dd3fc; /* Светящийся мягкий синий */ /* ========== ГРАНИЦЫ ========== */ --border-color: rgba(99, 102, 241, 0.12); /* Граница с оттенком индиго */ --border-color-hover: rgba(99, 102, 241, 0.25); --border-color-strong: rgba(99, 102, 241, 0.4); --border-glass: 1px solid rgba(99, 102, 241, 0.15); --border-glass-hover: 1px solid rgba(99, 102, 241, 0.3); --border-cookie: 1px solid rgba(99, 102, 241, 0.15); /* ========== ЭФФЕКТЫ СТЕКЛА ========== */ --glass-blur: blur(16px); --glass-blur-heavy: blur(32px); --glass-bg: rgba(7, 10, 28, 0.75); --glass-bg-hover: rgba(12, 17, 42, 0.9); --glass-shadow: 0 8px 32px 0 rgba(1, 2, 10, 0.65); /* ========== СЕМАНТИЧЕСКИЕ ЦВЕТА ========== */ --success-color: #10b981; --warning-color: #f59e0b; --danger-color: #ef4444; --info-color: #06b6d4; /* ========== ГРАДИЕНТЫ ========== */ --gradient-primary: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%); --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); --gradient-accent: linear-gradient(135deg, #f43f5e 0%, #d946ef 100%); --gradient-cosmic: linear-gradient(135deg, #6366f1 0%, #d946ef 50%, #06b6d4 100%); --gradient-dark: linear-gradient(180deg, #080d20 0%, #030510 100%); --gradient-cs: linear-gradient(180deg, #080d20 0%, #030510 100%); --gradient-surface: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0) 100%); /* ========== ТЕНИ И СВЕЧЕНИЯ ========== */ --shadow-sm: 0 2px 4px rgba(1, 2, 8, 0.55); --shadow: 0 4px 20px rgba(1, 2, 8, 0.65), 0 2px 4px rgba(1, 2, 8, 0.45); --shadow-md: 0 10px 30px rgba(1, 2, 8, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-lg: 0 20px 50px rgba(1, 2, 8, 0.9), 0 0 40px rgba(99, 102, 241, 0.12); --shadow-glow-primary: 0 0 25px rgba(99, 102, 241, 0.2); --shadow-glow-secondary: 0 0 25px rgba(6, 182, 212, 0.15); --shadow-cookie: 0 10px 40px rgba(1, 2, 8, 0.75); /* ========== РАДИУСЫ СКРУГЛЕНИЯ ========== */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ========== ОТСТУПЫ ========== */ --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 3rem; /* ========== ПЕРЕХОДЫ ========== */ --transition-fast: all 0.2s ease; --transition-base: all 0.3s ease; --transition-slow: all 0.5s ease; /* ========== ШРИФТЫ ========== */ --font-heading: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ========== ПЕРЕОПРЕДЕЛЕНИЯ BOOTSTRAP ========== */ --bs-body-bg: var(--bg-body); --bs-body-color: var(--text-primary); --bs-primary: var(--primary-color); --bs-secondary: var(--secondary-color); --bs-success: var(--success-color); --bs-info: var(--info-color); --bs-warning: var(--warning-color); --bs-danger: var(--danger-color); --bs-border-color: var(--border-color); /* Совместимость с устаревшими версиями */ --dark-color: var(--bg-body); --light-color: var(--neutral-800); --text-color: var(--text-primary); --border-radius: var(--radius-md); --header-height: 80px; --z-index-sticky: 1030; /* Пользовательская насыщенность шрифта */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ========== НОВЫЕ ПРЕМИАЛЬНЫЕ ЭФФЕКТЫ (НОВИНКА 2026) ========== */ --shadow-glow-accent: 0 0 25px rgba(244, 63, 94, 0.3); /* Свечение акцентных элементов */ --text-glow-primary: 0 0 15px rgba(99, 102, 241, 0.4); /* Свечение для индиго-заголовков */ --text-glow-accent: 0 0 15px rgba(244, 63, 94, 0.4); /* Свечение для акцентных заголовков */ --border-premium: 1px solid rgba(99, 102, 241, 0.15); /* Тонкая премиальная граница */ --border-premium-hover: 1px solid rgba(99, 102, 241, 0.4); /* Премиальная граница при наведении */ --glass-blur-ultra: blur(40px); /* Ультра-глубокое размытие для стекла */ --gradient-mesh-cosmic: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(217, 70, 239, 0.1) 50%, rgba(6, 182, 212, 0.15) 100%); /* Сложный mesh-градиент для анимированных фонов */ }