.header { /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/ background-color: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 0; position: fixed; top: 0; z-index: 1000; backdrop-filter: blur(10px); width: 100%; } .phoneBlock a{ font-size: 10px; } .headerMenu { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 0 20px; } .headerMenu a { position: relative; color: black; text-decoration: none; padding: 1.2rem 1.2rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 500; font-size: 1.0rem; transition: all 0.3s ease; overflow: hidden; } .headerMenu 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%); } .headerMenu 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; } .headeLogo { 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; } .logoImage { height: 80px; border-radius: 8px; object-fit: contain; transition: all 0.3s ease; /*filter: brightness(0) invert(1);*/ } .headerMenu a:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .headerMenu a:hover::before { width: 80%; } .headerMenu a:hover::after { left: 100%; } .headerMenu a.active { background: rgba(255, 255, 255, 0.15); font-weight: 600; } .headerMenu a.active::before { width: 100%; background: linear-gradient(90deg, var(--lavander), var(--light-blue)); } /* Анимация при загрузке */ .headerMenu a { animation: slideIn 0.6s ease forwards; opacity: 0; transform: translateY(-20px); } .headerMenu a:nth-child(1) { animation-delay: 0.1s; } .headerMenu a:nth-child(2) { animation-delay: 0.2s; } .headerMenu a:nth-child(3) { animation-delay: 0.3s; } .headerMenu a:nth-child(4) { animation-delay: 0.4s; } @keyframes slideIn { to { opacity: 1; transform: translateY(0); } } /* Адаптивность */ @media (max-width: 768px) { .headerMenu { flex-direction: column; } .headerMenu a { width: 100%; text-align: center; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .headerMenu a:last-child { border-bottom: none; } } /* Эффект пульсации при наведении на кнопку выхода */ .headerMenu a[onclick]:hover { background: linear-gradient(135deg, #ff6b6b, #ee5a52); } .headerMenu a[onclick]:hover::before { background: linear-gradient(90deg, #ffd89b, #ff6b6b); } /*бургер*/ .burger { display: none; flex-direction: column; cursor: pointer; gap: 5px; } .burger span { width: 25px; height: 3px; background: black; transition: 0.3s; } /* Анимация крестика */ .burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .burger.active span:nth-child(2) { opacity: 0; } .burger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } @media (max-width: 1090px) { .burger { display: flex; } .headerMenu { flex-direction: row; justify-content: space-between; } .headerNav { position: absolute; top: 100%; left: 0; width: 100%; background: white; display: flex; flex-direction: column; align-items: center; max-height: 0; overflow: hidden; transition: 0.3s ease; } .headerNav.open { max-height: 300px; } .headerNav a { width: 100%; text-align: center; padding: 1rem; } .phoneBlock { display: none; } } @media (max-width: 500px){ .logoImage { height: 60px; border-radius: 8px; object-fit: contain; transition: all 0.3s ease; /*filter: brightness(0) invert(1);*/ } }