/** * XMT-Argo Shared Components CSS * Стили для общих компонентов: header, footer, burger menu, chat button * Эти стили загружаются на всех страницах */ /* ======================================== ВАЖНО: Основные стили компонентов уже в base.css ======================================== */ /* УБРАНО: Все стили header, footer, burger, chat из этого файла Они уже есть в base.css и работают идеально. Этот файл содержит только: - Утилиты для загрузки компонентов - Дополнительные стили, не конфликтующие с base.css - Gallery action buttons (новая функциональность) */ /* ======================================== LOGO LINK STYLES ======================================== */ .logo-link { display: inline-block; text-decoration: none; transition: all 0.3s ease; width: auto !important; height: auto !important; } .logo-link .logo-image { width: auto !important; height: 50px !important; max-width: 200px !important; max-height: 50px !important; } .logo-link:hover { transform: scale(1.05); filter: brightness(1.1); } .logo-link:hover .logo-image { filter: drop-shadow(0 0 10px rgba(79, 172, 254, 0.5)); } /* ======================================== КОНТЕЙНЕРЫ ДЛЯ КОМПОНЕНТОВ ======================================== */ /* Контейнеры для компонентов - прозрачные, не влияют на стили */ #header-container, #footer-container, #burger-menu-container, #chat-container { /* Контейнеры полностью прозрачны - стили применяются к содержимому */ } /* ======================================== СОСТОЯНИЯ ЗАГРУЗКИ КОМПОНЕНТОВ ======================================== */ .component-loading { opacity: 0.5; transition: opacity 0.3s ease; } .component-loaded { opacity: 1; transition: opacity 0.3s ease; } /* Анимации появления компонентов */ @keyframes fadeInComponent { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .component-animate-in { animation: fadeInComponent 0.4s ease-out; } /* ======================================== FALLBACK ДЛЯ РАБОТЫ БЕЗ JAVASCRIPT ======================================== */ .no-js .burger-menu { display: none; } .no-js .cosmic-nav { position: static; background: var(--bg-secondary); transform: none; opacity: 1; visibility: visible; } /* ======================================== ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ ======================================== */ .component-hidden { display: none !important; } .component-visible { display: block !important; } /* ======================================== GALLERY ACTION BUTTONS CTA кнопки под галереей продуктов ======================================== */ .gallery-actions { padding: 2rem 0; background: transparent; } .gallery-buttons { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; } .gallery-action-btn { position: relative; padding: 1rem 2rem; border: none; border-radius: 50px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); overflow: hidden; } .gallery-action-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.5s; } .gallery-action-btn:hover::before { left: 100%; } /* Primary Button (Синяя заявка) */ .gallery-action-btn.primary { background: linear-gradient(135deg, var(--primary-color), var(--accent-blue)); color: white; box-shadow: 0 4px 15px rgba(45, 91, 255, 0.4), 0 0 20px rgba(45, 91, 255, 0.2); } .gallery-action-btn.primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(45, 91, 255, 0.5), 0 0 30px rgba(45, 91, 255, 0.3); } /* Secondary Button (Оранжевое обсуждение) */ .gallery-action-btn.secondary { background: linear-gradient(135deg, var(--accent-orange), #f59e0b); color: white; box-shadow: 0 4px 15px rgba(251, 146, 60, 0.4), 0 0 20px rgba(251, 146, 60, 0.2); } .gallery-action-btn.secondary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(251, 146, 60, 0.5), 0 0 30px rgba(251, 146, 60, 0.3); } .gallery-action-btn i { font-size: 1.1rem; transition: transform 0.3s ease; } .gallery-action-btn:hover i { transform: translateX(2px); } /* ======================================== МОБИЛЬНЫЕ СТИЛИ ДЛЯ ЛОГОТИПА ======================================== */ @media (max-width: 768px) { .header-logo { width: 20vw !important; max-width: 120px !important; height: auto !important; } .logo-link .logo-image { width: 100% !important; height: auto !important; max-width: 120px !important; max-height: none !important; } .gallery-buttons { flex-direction: column; gap: 0.75rem; } .gallery-action-btn { width: 100%; max-width: 280px; padding: 0.875rem 1.5rem; font-size: 0.85rem; } } @media (max-width: 480px) { .header-logo { width: 20vw !important; max-width: 100px !important; } .logo-link .logo-image { max-width: 100px !important; } } /* ======================================== БЕЛЫЕ ИКОНКИ СОЦИАЛЬНЫХ СЕТЕЙ В МЕНЮ ======================================== */ /* Перекрашиваем иконки социальных сетей в белый цвет только в меню */ .cosmic-nav-social .nav-social-icon img { filter: brightness(0) invert(1); transition: all 0.3s ease; } /* При наведении добавляем легкое свечение */ .cosmic-nav-social-link:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); transform: scale(1.1); } /* Специальные стили для каждой социальной сети при наведении */ .cosmic-nav-social-link[title="Telegram"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0, 136, 204, 0.8)); } .cosmic-nav-social-link[title="WhatsApp"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(37, 211, 102, 0.8)); } .cosmic-nav-social-link[title="Instagram"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(225, 48, 108, 0.8)); } .cosmic-nav-social-link[title="VKontakte"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(70, 128, 194, 0.8)); } .cosmic-nav-social-link[title="YouTube"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 0, 0, 0.8)); } .cosmic-nav-social-link[title="Avito"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0, 170, 255, 0.8)); } /* ======================================== БЕЛЫЕ ИКОНКИ СОЦИАЛЬНЫХ СЕТЕЙ В МЕНЮ ======================================== */ /* Перекрашиваем иконки социальных сетей в белый цвет только в меню */ .cosmic-nav-social .nav-social-icon img { filter: brightness(0) invert(1); transition: all 0.3s ease; } /* При наведении добавляем легкое свечение */ .cosmic-nav-social-link:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); transform: scale(1.1); } /* Специальные стили для каждой социальной сети при наведении */ .cosmic-nav-social-link[title="Telegram"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0, 136, 204, 0.8)); } .cosmic-nav-social-link[title="WhatsApp"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(37, 211, 102, 0.8)); } .cosmic-nav-social-link[title="Instagram"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(225, 48, 108, 0.8)); } .cosmic-nav-social-link[title="VKontakte"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(70, 128, 194, 0.8)); } .cosmic-nav-social-link[title="YouTube"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 0, 0, 0.8)); } .cosmic-nav-social-link[title="Avito"]:hover .nav-social-icon img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0, 170, 255, 0.8)); }