/* Океанская палитра - Бескрайние глубины */ :root { /* Основные цвета океанской тематики */ --color-background: #0A1628; /* Глубины океана в полночь */ --color-text: #E1F5FE; /* Морская пена и отблески луны */ --color-primary: #00E5FF; /* Яркая биолюминесценция */ --color-secondary: #26C6DA; /* Тропические воды */ --color-dark: #0D1B2A; /* Морская бездна */ --color-dark-lighter: #1B2B42; /* Полуночные волны */ --color-dark-medium: #2C3E50; /* Штормовые глубины */ --color-card-bg: #0E1F33; /* Темные морские пещеры */ --color-article-title: #4DD0E1; /* Коралловое свечение */ --color-article-text: #B3E5FC; /* Отражение неба в воде */ --color-feature-hover: #1A3A52; /* Глубокие течения */ --color-card-overlay: rgba(77, 208, 225, 0.12); /* Мерцающая вода */ /* Океанские градиенты */ --gradient-primary: linear-gradient(135deg, #00E5FF 0%, #0097A7 50%, #004D5C 100%); --gradient-feature: linear-gradient(135deg, #0D1B2A 0%, #1B3A52 50%, #26495C 100%); /* Дополнительные эффекты */ --shadow-standard: 0 4px 15px rgba(0, 229, 255, 0.15); --shadow-hover: 0 8px 25px rgba(0, 229, 255, 0.25); --shadow-card: 0 6px 20px rgba(13, 27, 42, 0.4); --shadow-card-hover: 0 12px 35px rgba(0, 229, 255, 0.2); } /* Основные элементы с океанской атмосферой */ body { background: radial-gradient(ellipse at center, #0D1B2A 0%, #0A1628 100%); background-attachment: fixed; } /* Заголовки с эффектом глубоководного свечения */ h1, h2, h3, h4 { text-shadow: 0 0 20px rgba(0, 229, 255, 0.6), 0 0 40px rgba(0, 229, 255, 0.3); background: linear-gradient(45deg, #00E5FF, #4DD0E1, #26C6DA); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Навигация с эффектом морской поверхности */ .navbar { background: linear-gradient(180deg, rgba(13, 27, 42, 0.95) 0%, rgba(10, 22, 40, 0.9) 100%); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(0, 229, 255, 0.2); } .navbar a:hover { text-shadow: 0 0 15px rgba(0, 229, 255, 0.8); color: var(--color-primary); } /* Основной контент с волновыми эффектами */ .header { background: radial-gradient(circle at 20% 80%, rgba(0, 229, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(77, 208, 225, 0.08) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(38, 198, 218, 0.05) 0%, transparent 50%); } .header-text p { text-shadow: 0 0 25px rgba(0, 229, 255, 0.4); } /* Карточки с эффектом подводных пещер */ .feature-card { background: linear-gradient(135deg, rgba(13, 27, 42, 0.8) 0%, rgba(27, 43, 66, 0.6) 50%, rgba(44, 62, 80, 0.4) 100%); border: 1px solid rgba(0, 229, 255, 0.15); backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(13, 27, 42, 0.3), inset 0 1px 0 rgba(0, 229, 255, 0.1); } .feature-card:hover { background: linear-gradient(135deg, rgba(26, 58, 82, 0.9) 0%, rgba(44, 62, 80, 0.7) 50%, rgba(55, 78, 100, 0.5) 100%); box-shadow: 0 15px 40px rgba(0, 229, 255, 0.2), inset 0 1px 0 rgba(0, 229, 255, 0.2); border-color: rgba(0, 229, 255, 0.4); } /* Иконки с биолюминесцентным эффектом */ .feature-icon { background: radial-gradient(circle at center, rgba(0, 229, 255, 1) 0%, rgba(77, 208, 225, 0.8) 70%, rgba(38, 198, 218, 0.6) 100%); box-shadow: 0 0 25px rgba(0, 229, 255, 0.6), 0 0 50px rgba(0, 229, 255, 0.3); } /* Статьи с коралловым свечением */ .article-card { background: linear-gradient(145deg, rgba(14, 31, 51, 0.9) 0%, rgba(19, 32, 51, 0.7) 100%); border: 1px solid rgba(77, 208, 225, 0.2); box-shadow: 0 5px 20px rgba(13, 27, 42, 0.4), inset 0 1px 0 rgba(77, 208, 225, 0.1); } .article-card:hover { box-shadow: 0 10px 30px rgba(77, 208, 225, 0.3), 0 0 25px rgba(0, 229, 255, 0.2); border-color: rgba(77, 208, 225, 0.5); } /* Кнопки с океанскими переливами */ .catalog-btn, .feedback-btn { background: linear-gradient(45deg, #00E5FF 0%, #26C6DA 30%, #0097A7 60%, #004D5C 100%); box-shadow: 0 0 20px rgba(0, 229, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .catalog-btn:hover, .feedback-btn:hover { box-shadow: 0 0 30px rgba(0, 229, 255, 0.7), 0 5px 15px rgba(0, 229, 255, 0.3); transform: translateY(-2px); } /* Поля формы с водной рябью */ .feedback-field { background: linear-gradient(135deg, rgba(13, 27, 42, 0.8) 0%, rgba(27, 43, 66, 0.6) 100%); border: 2px solid rgba(0, 229, 255, 0.3); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); } .feedback-field:focus { border-color: rgba(0, 229, 255, 0.8); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 229, 255, 0.4); } /* Информационные блоки с глубоководными оттенками */ .info-block { background: linear-gradient(135deg, rgba(13, 27, 42, 0.7) 0%, rgba(26, 58, 82, 0.5) 100%); border: 1px solid rgba(77, 208, 225, 0.15); box-shadow: 0 5px 15px rgba(13, 27, 42, 0.3), inset 0 1px 0 rgba(77, 208, 225, 0.05); } .info-block:hover { background: linear-gradient(135deg, rgba(26, 58, 82, 0.8) 0%, rgba(44, 62, 80, 0.6) 100%); box-shadow: 0 10px 25px rgba(0, 229, 255, 0.2), inset 0 1px 0 rgba(77, 208, 225, 0.15); } /* Футер с эффектом морского дна */ footer { background: linear-gradient(180deg, rgba(10, 22, 40, 0) 0%, rgba(13, 27, 42, 0.8) 30%, rgba(7, 15, 28, 1) 100%); border-top: 1px solid rgba(0, 229, 255, 0.1); } /* Cookie banner с морской тематикой */ .cookie-banner { background: linear-gradient(90deg, rgba(13, 27, 42, 0.95) 0%, rgba(26, 58, 82, 0.9) 100%); border-top: 2px solid rgba(0, 229, 255, 0.3); backdrop-filter: blur(10px); } .accept-all { background: linear-gradient(45deg, #00E5FF, #26C6DA); box-shadow: 0 0 15px rgba(0, 229, 255, 0.4); } /* Дополнительные эффекты анимации волн */ @keyframes oceanWave { 0%, 100% { transform: translateY(0) rotate(0.5deg); } 50% { transform: translateY(-5px) rotate(-0.5deg); } } .feature-card:hover { animation: oceanWave 3s ease-in-out infinite; } /* Эффект мерцания для биолюминесценции */ @keyframes bioluminescence { 0%, 100% { opacity: 0.8; box-shadow: 0 0 25px rgba(0, 229, 255, 0.6); } 50% { opacity: 1; box-shadow: 0 0 40px rgba(0, 229, 255, 0.9); } } .feature-icon { animation: bioluminescence 4s ease-in-out infinite; }