/* ======================================== LIQUID GLASS EFFECT - SLSBMB INSPIRED Полупрозрачные секции через которые видны частицы фона ========================================= */ /* Убираем padding у body для полноэкранного фона */ body { padding: 0; margin: 0; } /* Animated background должен быть ПОЗАДИ всего но ВИДЕН сквозь glass */ .animated-background { position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0 !important; pointer-events: none; } /* Все частицы должны быть ПОЗАДИ контента но СКВОЗЬ glass */ .floating-element { z-index: 0 !important; /* Гарантируем что частицы позади */ } /* Wrapper для всех секций - УБРАНЫ ОТСТУПЫ для полноэкранного режима */ .hero, .intro-section, .industries-section, .why-outsource-section, .impact-section, .clients-section, .how-it-works-section, .sales-system-section, .pricing-section, .contact-section { position: relative; z-index: 1; width: 100%; /* Полная ширина как у SLSBMB */ margin: 0; /* Без отступов между секциями */ padding: 0; /* Padding будет у .container внутри */ } /* Container внутри секций - это и есть LIQUID GLASS карточки */ .intro-section .container, .industries-section .container, .why-outsource-section .container, .impact-section .container, .clients-section .container, .how-it-works-section .container, .sales-system-section .container, .pricing-section .container, .contact-section .container { /* Ограничение ширины карточки */ max-width: 1400px; width: 90%; /* Занимает 90% ширины экрана с отступами по бокам */ margin: 0 auto; /* Центрирование по горизонтали */ /* МАКСИМАЛЬНАЯ ВЫСОТА - занимаем почти весь экран */ min-height: 85vh; /* Карточка занимает 85% высоты экрана */ /* Внутреннее размещение контента */ display: flex; flex-direction: column; justify-content: center; /* Центрируем контент внутри карточки */ /* Liquid Glass эффект - МЕНЬШЕ прозрачности для видимости частиц */ background: rgba(26, 26, 26, 0.3); /* Было 0.4 → Теперь 0.3 для большей прозрачности */ backdrop-filter: blur(16px) saturate(200%); /* Меньше blur (16px вместо 20px) + больше насыщенности */ -webkit-backdrop-filter: blur(16px) saturate(200%); /* Закругленные углы как у SLSBMB */ border-radius: 24px; /* Тонкая светящаяся рамка */ border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37), inset 0 1px 0 0 rgba(255, 255, 255, 0.05); /* Padding внутри карточки */ padding: 4rem 3rem; /* Относительное позиционирование */ position: relative; /* Плавный переход при изменении */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Hover эффект - усиление glass эффекта */ .intro-section .container:hover, .industries-section .container:hover, .why-outsource-section .container:hover, .impact-section .container:hover, .clients-section .container:hover, .how-it-works-section .container:hover, .sales-system-section .container:hover, .pricing-section .container:hover, .contact-section .container:hover { background: rgba(26, 26, 26, 0.4); /* Немного темнее при hover но все еще прозрачно */ border-color: rgba(0, 255, 161, 0.3); /* Зеленая рамка при hover */ transform: translateY(-2px); box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5), 0 0 40px 0 rgba(0, 255, 161, 0.15), /* Зеленый glow снаружи */ inset 0 1px 0 0 rgba(255, 255, 255, 0.08); } /* Дополнительный glow эффект для primary цвета */ .intro-section .container::before, .industries-section .container::before, .why-outsource-section .container::before, .impact-section .container::before, .clients-section .container::before, .how-it-works-section .container::before, .sales-system-section .container::before, .pricing-section .container::before, .contact-section .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; padding: 1px; background: linear-gradient( 135deg, rgba(2, 183, 140, 0.1) 0%, rgba(0, 255, 161, 0.05) 50%, rgba(2, 183, 140, 0.1) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } .intro-section .container:hover::before, .industries-section .container:hover::before, .why-outsource-section .container:hover::before, .impact-section .container:hover::before, .clients-section .container:hover::before, .how-it-works-section .container:hover::before, .sales-system-section .container:hover::before, .pricing-section .container:hover::before, .contact-section .container:hover::before { opacity: 1; } /* Адаптивность для мобильных */ @media (max-width: 768px) { /* Секции остаются полноэкранными на мобильных */ .hero, .intro-section, .industries-section, .why-outsource-section, .impact-section, .clients-section, .how-it-works-section, .sales-system-section, .pricing-section, .contact-section { /* Убираем отступы - полноэкранный режим */ } .intro-section .container, .industries-section .container, .why-outsource-section .container, .impact-section .container, .clients-section .container, .how-it-works-section .container, .sales-system-section .container, .pricing-section .container, .contact-section .container { width: 95%; /* Немного уже на мобильных для лучшей читаемости */ min-height: 90vh; /* На мобильных занимаем 90% высоты */ padding: 2.5rem 1.5rem; border-radius: 20px; } } /* ======================================== МАКСИМАЛЬНАЯ ВИДИМОСТЬ ЧАСТИЦ ЧЕРЕЗ GLASS ========================================= */ .floating-element { /* ФИКСИРОВАННАЯ яркость - НИКОГДА не меняется */ opacity: 0.9 !important; /* Яркий зеленый цвет */ background: var(--color-secondary) !important; /* #00FFA1 */ /* Светящийся эффект (glow) */ box-shadow: 0 0 8px rgba(0, 255, 161, 0.6), 0 0 16px rgba(0, 255, 161, 0.4), 0 0 24px rgba(0, 255, 161, 0.2) !important; /* Увеличиваем яркость */ filter: brightness(1.3) !important; } /* Некоторые частицы ЭКСТРА яркими для контраста */ .floating-element:nth-child(3n) { opacity: 1 !important; box-shadow: 0 0 12px rgba(0, 255, 161, 0.8), 0 0 24px rgba(0, 255, 161, 0.5), 0 0 36px rgba(0, 255, 161, 0.3) !important; filter: brightness(1.5) !important; } /* УБРАЛИ пульсацию - она вызывала исчезновение через изменение opacity */ /* Progress dots поверх всего */ .progress-dots { z-index: 100 !important; } /* Navbar поверх всего */ .navbar { z-index: 100 !important; background: rgba(10, 10, 10, 0.65); /* Было 0.8 → Теперь 0.65 для баланса читаемости и glass эффекта */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }