/* * Оптимизация для систем без GPU * Применяется только если у есть класс "no-gpu" * Добавляется через JavaScript при отсутствии WebGL */ /* ======================================== Отключаем backdrop-filter (размытие фона) ======================================== */ body.no-gpu .backdrop-filter, body.no-gpu .glass-workout-card, body.no-gpu .glass-workout-grid, body.no-gpu .subscription-card, body.no-gpu .benefit-card, body.no-gpu .date-tab, body.no-gpu .content-section { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255, 255, 255, 0.98) !important; color: var(--color-text-primary) !important; } body.no-gpu .main-navbar, body.no-gpu .main-mobile-menu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255, 255, 255, 0.98) !important; } body.no-gpu .workout-detail-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #1a202c !important; color: var(--color-text-on-dark) !important; } body.no-gpu .floating-title { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: transparent !important; color: white !important; } body.no-gpu .nav-links a, body.no-gpu .main-nav-links a { color: var(--color-text-primary) !important; } /* ======================================== Правильные цвета для темных секций ======================================== */ body.no-gpu section.dark-section, body.no-gpu .content-section.dark-section, body.no-gpu #reactions.content-section, body.no-gpu #subscriptions.content-section, body.no-gpu #workout-benefits.content-section, body.no-gpu #contacts { background: #1a202c !important; color: rgba(255, 255, 255, 0.95) !important; } body.no-gpu section.dark-section h1, body.no-gpu section.dark-section h2, body.no-gpu section.dark-section h3, body.no-gpu section.dark-section h4, body.no-gpu section.dark-section h5, body.no-gpu section.dark-section p, body.no-gpu section.dark-section span, body.no-gpu section.dark-section li, body.no-gpu .content-section.dark-section h1, body.no-gpu .content-section.dark-section h2, body.no-gpu .content-section.dark-section h3, body.no-gpu .content-section.dark-section h4, body.no-gpu .content-section.dark-section p, body.no-gpu .content-section.dark-section span { color: rgba(255, 255, 255, 0.95) !important; } /* Исключение для списков внутри карточек на белом фоне */ body.no-gpu .content-section.dark-section .subscription-card li, body.no-gpu .content-section.dark-section .benefit-card li { color: var(--color-text-primary, #1a202c) !important; } /* Исключение для span внутри карточек на белом фоне */ body.no-gpu .content-section.dark-section .subscription-card span, body.no-gpu .content-section.dark-section .benefit-card span { color: var(--color-text-primary, #1a202c) !important; } body.no-gpu .content-section.dark-section .benefit-card .benefit-hint span { color: var(--color-aqua-primary, #1c96a6) !important; } /* Исключение для заголовков внутри карточек на белом фоне */ body.no-gpu .content-section.dark-section .subscription-card h3, body.no-gpu .content-section.dark-section .benefit-card h3, body.no-gpu .content-section.dark-section .benefit-card .benefit-title { color: var(--color-aqua-primary, #1c96a6) !important; } body.no-gpu section.dark-section a, body.no-gpu .content-section.dark-section a { color: var(--color-aqua-primary, #1c96a6) !important; } /* Абонементы */ body.no-gpu .subscription-card { background: rgba(255, 255, 255, 0.98) !important; border: 1px solid var(--color-border, #e2e8f0) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.no-gpu .subscription-card, body.no-gpu .subscription-card * { color: var(--color-text-primary, #1a202c) !important; } body.no-gpu .subscription-name { color: var(--color-aqua-primary, #1c96a6) !important; } body.no-gpu .subscription-card .workout-types-list { color: var(--color-text-primary, #1a202c) !important; } body.no-gpu .subscription-card .workout-types-list li { color: var(--color-text-primary, #1a202c) !important; text-shadow: none !important; } body.no-gpu .subscription-card .workout-types-list li::before { color: var(--color-aqua-primary, #1c96a6) !important; text-shadow: none !important; } body.no-gpu .feature-item { color: var(--color-text-primary, #1a202c) !important; } body.no-gpu .feature-details { color: var(--color-text-secondary, #4a5568) !important; } body.no-gpu .feature-icon { color: var(--color-aqua-primary, #1c96a6) !important; } body.no-gpu .feature-text { color: var(--color-text-primary, #1a202c) !important; } body.no-gpu .feature-text strong { color: var(--color-text-primary, #1a202c) !important; } body.no-gpu .subscription-divider { background: rgba(0, 0, 0, 0.1) !important; } body.no-gpu .subscription-footer { color: var(--color-text-primary, #1a202c) !important; } body.no-gpu .subscription-price { color: var(--color-aqua-primary, #1c96a6) !important; } body.no-gpu .subscription-duration { color: var(--color-text-secondary, #4a5568) !important; } /* Преимущества */ body.no-gpu .benefit-card { background: rgba(255, 255, 255, 0.98) !important; border: 1px solid var(--color-border, #e2e8f0) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.no-gpu .benefit-card, body.no-gpu .benefit-card * { color: var(--color-text-primary, #1a202c) !important; } body.no-gpu .benefit-title { color: var(--color-aqua-primary, #1c96a6) !important; } body.no-gpu .benefit-card .benefit-title { color: var(--color-aqua-primary, #1c96a6) !important; } body.no-gpu .benefit-short-desc { color: var(--color-text-secondary, #4a5568) !important; } body.no-gpu .benefit-icon-container { background: rgba(28, 150, 166, 0.1) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.no-gpu .benefit-icon { color: var(--color-aqua-primary, #1c96a6) !important; } body.no-gpu .benefit-hint { color: var(--color-aqua-primary, #1c96a6) !important; } body.no-gpu .benefit-hint svg { color: var(--color-aqua-primary, #1c96a6) !important; } body.no-gpu .floating-title { background: transparent !important; color: white !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; } /* ======================================== Отключаем CSS анимации ======================================== */ body.no-gpu .floating-title, body.no-gpu .workout-detail-panel, body.no-gpu .subscription-card, body.no-gpu .benefit-card, body.no-gpu .date-tab.active, body.no-gpu [class*="float"], body.no-gpu [class*="bounce"], body.no-gpu [class*="pulse"] { animation: none !important; } body.no-gpu .workout-card-wrapper:hover, body.no-gpu .glass-workout-card:hover, body.no-gpu .subscription-card:hover, body.no-gpu .benefit-card:hover, body.no-gpu .reaction-card:hover { transform: none !important; } /* ======================================== Отключаем hover-эффекты с transform ======================================== */ body.no-gpu .scroll-btn:hover { transform: translateY(-50%) !important; } body.no-gpu .btn:hover, body.no-gpu button:hover { transform: none !important; } body.no-gpu .reaction-btn:hover, body.no-gpu .reaction-image:hover { transform: none !important; } /* ======================================== Реакции - карточки ======================================== */ body.no-gpu .reaction-card { background: white !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; } body.no-gpu .reaction-card * { color: var(--color-text-primary) !important; } body.no-gpu .reaction-overlay { background: linear-gradient(to top, rgba(26, 32, 44, 0.9), rgba(26, 32, 44, 0.5), transparent) !important; } body.no-gpu .reaction-overlay * { color: white !important; } body.no-gpu .reaction-btn { background: linear-gradient(135deg, var(--color-red-accent, #e63946), var(--color-red-primary, #9c1f1f)) !important; color: white !important; } /* ======================================== Навигация ======================================== */ body.no-gpu .main-navbar { background: rgba(255, 255, 255, 0.98) !important; border-bottom: 1px solid var(--color-border, #e2e8f0) !important; } body.no-gpu .main-nav-links a { color: var(--color-text-primary, #1a202c) !important; } body.no-gpu .main-nav-links a:hover { color: var(--color-aqua-primary, #1c96a6) !important; } /* ======================================== Мобильное меню ======================================== */ body.no-gpu .main-mobile-menu { background: rgba(255, 255, 255, 0.98) !important; } body.no-gpu .main-mobile-menu a { color: var(--color-text-primary, #1a202c) !important; } /* ======================================== Убираем сложные тени ======================================== */ body.no-gpu [class*="shadow"] { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; } /* ======================================== Ускоряем все transitions ======================================== */ body.no-gpu * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } /* ======================================== Убираем perspective и preserve-3d ======================================== */ body.no-gpu .parallax-container, body.no-gpu .parallax-content { transform-style: flat !important; perspective: none !important; } /* ======================================== Отключаем плавный параллакс (статичный фон) ======================================== */ body.no-gpu .parallax-bg, body.no-gpu .parallax-bg-1, body.no-gpu .parallax-bg-2, body.no-gpu .parallax-bg-3 { position: fixed !important; transform: none !important; } body.no-gpu .parallax-container::before, body.no-gpu .parallax-container::after { display: none !important; } /* ======================================== Упрощаем градиенты в тексте ======================================== */ body.no-gpu .floating-title, body.no-gpu .hero-title-gradient, body.no-gpu [class*="gradient-text"] { background: var(--color-aqua-primary) !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: inherit !important; background-clip: unset !important; color: var(--color-aqua-primary) !important; } /* ======================================== Отключаем background-attachment: fixed ======================================== */ body.no-gpu .reaction-hero { background-attachment: scroll !important; } /* ======================================== Ускоряем все transitions ======================================== */ body.no-gpu * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } /* ======================================== Убираем perspective и preserve-3d ======================================== */ body.no-gpu .parallax-container, body.no-gpu .parallax-content { transform-style: flat !important; perspective: none !important; }