.header { /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/ background-color: var(--purple); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 0; position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); } .header-menu { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 0 20px; } .header-menu a { position: relative; color: white; text-decoration: none; padding: 1.8rem 2rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 500; font-size: 1.1rem; transition: all 0.3s ease; overflow: hidden; } .header-menu a::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: linear-gradient(90deg, var(--lavander), var(--light-blue)); transition: all 0.3s ease; transform: translateX(-50%); } .header-menu a::after { content: ''; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s ease; } .header-logo { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 700; font-size: 1.4rem; transition: all 0.3s ease; } .logo-image { width: 340px; height: 80px; border-radius: 8px; object-fit: contain; transition: all 0.3s ease; /*filter: brightness(0) invert(1);*/ } .header-menu a:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .header-menu a:hover::before { width: 80%; } .header-menu a:hover::after { left: 100%; } .header-menu a.active { background: rgba(255, 255, 255, 0.15); font-weight: 600; } .header-menu a.active::before { width: 100%; background: linear-gradient(90deg, var(--lavander), var(--light-blue)); } /* Анимация при загрузке */ .header-menu a { animation: slideIn 0.6s ease forwards; opacity: 0; transform: translateY(-20px); } .header-menu a:nth-child(1) { animation-delay: 0.1s; } .header-menu a:nth-child(2) { animation-delay: 0.2s; } .header-menu a:nth-child(3) { animation-delay: 0.3s; } @keyframes slideIn { to { opacity: 1; transform: translateY(0); } } /* Адаптивность */ @media (max-width: 768px) { .header-menu { flex-direction: column; padding: 0; } .header-menu a { width: 100%; text-align: center; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .header-menu a:last-child { border-bottom: none; } } /* Эффект пульсации при наведении на кнопку выхода */ .header-menu a[onclick]:hover { background: linear-gradient(135deg, #ff6b6b, #ee5a52); } .header-menu a[onclick]:hover::before { background: linear-gradient(90deg, #ffd89b, #ff6b6b); }