/** * ========================================================================= * "МИР БЕСПИЛОТНИКОВ" — НАСТРОЙКИ ДИЗАЙНА ДЛЯ СТОРОННЕГО ДИЗАЙНЕРА * ========================================================================= * Данный файл содержит все визуальные настройки проекта. Вы можете менять * цвета, шрифты, скругления углов, градиенты и фоны. * Основная структура и сетка адаптивности находятся в файле main.css. */ :root { /* ======================================================================= * 1. ЦВЕТОВАЯ ПАЛИТРА (Используйте форматы HSL, HEX или RGB) * ======================================================================= */ /* Основные фоновые цвета (Светлая авиационная тема) */ --color-bg-primary: #f8fafc; /* Облачный светлый фон */ --color-bg-secondary: #ffffff; /* Фон для карточек и блоков */ --color-bg-tertiary: #f1f5f9; /* Альтернативный фон (выделение полей, шапки) */ /* Акцентные цвета для интерфейса (Фирменный технологичный синий) */ --color-accent: #2A48DF; /* Фирменный синий */ --color-accent-rgb: 42, 72, 223; --color-accent-secondary: #1E3A8A; /* Глубокий синий */ --color-accent-secondary-rgb: 30, 58, 138; /* Цвета текста */ --color-text-main: #334155; /* Темно-серый для основного текста */ --color-text-muted: #64748b; /* Приглушенный серый для подписей */ --color-text-white: #0f172a; /* Контрастный почти черный для заголовков */ /* Стекломорфизм (Glassmorphism) */ --glass-bg: rgba(255, 255, 255, 0.8); --glass-border: rgba(15, 23, 42, 0.08); --glass-glow: rgba(42, 72, 223, 0.08); /* ======================================================================= * 2. ТИПОГРАФИКА * ======================================================================= */ /* Семейства шрифтов. Вы можете подключить свои шрифты в и указать их здесь. */ --font-family-title: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* ======================================================================= * 3. РАДИУСЫ СКРУГЛЕНИЯ И ИНТЕРФЕЙСНЫЕ РАЗМЕРЫ * ======================================================================= */ --border-radius-card: 16px; /* Скругление для карточек */ --border-radius-btn: 30px; /* Скругление для кнопок (круглая/капсульная форма) */ --border-radius-badge: 8px; /* Скругление для бейджей и меток */ /* ======================================================================= * 4. ГРАДИЕНТЫ И ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ * ======================================================================= */ /* Основной градиент для кнопок и акцентных плашек (теперь сплошной розовый) */ --gradient-primary: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%); --gradient-dark: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%); /* Текстура сетки на фоне (создает технологичный эффект) */ --bg-grid-line: rgba(15, 23, 42, 0.02); --bg-grid-size: 40px; /* ======================================================================= * 5. СКОРОСТЬ АНИМАЦИЙ И ЭФФЕКТОВ * ======================================================================= */ --transition-speed: 0.3s; --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================= ДОПОЛНИТЕЛЬНЫЕ СТИЛИ СТОРОННЕГО ДИЗАЙНЕРА Ниже этого комментария дизайнер может переопределять любые стили, добавлять пользовательские фоны, картинки или эффекты наведения. ========================================================================= */ /* Авиационный светлый градиент с синим свечением */ body { background-image: linear-gradient(to bottom, #f1f5f9 0%, #e2e8f0 100%), radial-gradient(circle at 80% 20%, rgba(42, 72, 223, 0.05) 0%, transparent 50%), radial-gradient(circle at 15% 70%, rgba(42, 72, 223, 0.04) 0%, transparent 50%); background-attachment: fixed; } /* Эффект свечения для акцентных кнопок */ .glow-effect { position: relative; } .glow-effect::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--border-radius-btn); background: var(--gradient-primary); filter: blur(15px); opacity: 0.4; z-index: -1; transition: opacity var(--transition-speed) var(--transition-ease); } .glow-effect:hover::after { opacity: 0.7; } /* Подсветка некорректных полей ввода */ .form-control.date-invalid, .form-control.email-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important; background-color: rgba(239, 68, 68, 0.02) !important; } .form-control.email-valid { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important; background-color: rgba(16, 185, 129, 0.02) !important; } /* ========================================================================= ФИРМЕННОЕ ОФОРМЛЕНИЕ И ФОНЫ «МИР БЕСПИЛОТНИКОВ» ========================================================================= */ /* Фоновая технологичная сетка из точек */ .bg-grid-texture { background-image: radial-gradient(rgba(42, 72, 223, 0.07) 1.5px, transparent 1.5px) !important; background-size: 30px 30px !important; } /* Улучшенная сетка для Героя (совмещение линий и точек в фирменном синем цвете) */ .hero { background-image: linear-gradient(to right, rgba(42, 72, 223, 0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(42, 72, 223, 0.025) 1px, transparent 1px), radial-gradient(rgba(42, 72, 223, 0.05) 1.5px, transparent 1.5px) !important; background-size: 40px 40px, 40px 40px, 20px 20px !important; } /* Брендовые орбиты для фонового оформления в Герое */ .hero-bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; pointer-events: none; } .shape-orbit { position: absolute; border: 1.5px dashed rgba(42, 72, 223, 0.12); border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; } .shape-orbit-1 { width: 580px; height: 580px; top: 25%; left: 78%; animation: rotate-orbit 45s linear infinite; } .shape-orbit-2 { width: 860px; height: 860px; top: 35%; left: 78%; border-style: solid; border-color: rgba(42, 72, 223, 0.06); animation: rotate-orbit 65s linear infinite reverse; } .shape-orbit-3 { width: 1150px; height: 1150px; top: 45%; left: 78%; animation: rotate-orbit 90s linear infinite; } @keyframes rotate-orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Обновление баннера CTA */ .cta-banner { background: linear-gradient(135deg, rgba(42, 72, 223, 0.04) 0%, rgba(30, 58, 138, 0.08) 100%) !important; border: 1px solid rgba(42, 72, 223, 0.22) !important; box-shadow: 0 15px 35px rgba(42, 72, 223, 0.06) !important; } /* Свечение и цвета кнопок и плашек на синем фоне */ .btn-primary, .nav-btn, .cab-avatar, .play-btn { color: #FFFFFF !important; } .btn-primary { box-shadow: 0 8px 30px rgba(42, 72, 223, 0.22) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .nav-btn:hover, .nav-btn:focus, .nav-btn:active { color: #FFFFFF !important; } .btn-primary:hover { box-shadow: 0 12px 35px rgba(42, 72, 223, 0.38) !important; } .nav-btn { box-shadow: 0 4px 15px rgba(42, 72, 223, 0.2) !important; } .nav-btn:hover { box-shadow: 0 6px 20px rgba(42, 72, 223, 0.35) !important; } .play-icon { fill: #FFFFFF !important; } .dialog-close:hover { color: #FFFFFF !important; } /* Настройки шрифтов заголовков по брендбуку */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-title) !important; letter-spacing: -0.06em !important; font-weight: 600 !important; }