Улучшил мобильное меню и модальное окно

assets/css/main.css

@@ -317,19 +317,27 @@ a:hover {
 
 .mobile-menu-toggle {
     display: none;
-    flex-direction: column;
     background: none;
     border: none;
     cursor: pointer;
-    padding: 5px;
+    padding: 8px;
-    gap: 4px;
+    font-size: 1.5rem;
+    color: var(--text-dark);
+    transition: var(--transition);
+    line-height: 1;
+}
+
+.mobile-menu-toggle i {
+    transition: var(--transition);
+    display: inline-block;
+}
+
+.mobile-menu-toggle.active i {
+    transform: rotate(90deg);
 }
 
 .mobile-menu-toggle span {
-    width: 25px;
+    display: none;
-    height: 3px;
-    background-color: var(--text-dark);
-    transition: var(--transition);
 }
 
 /* Hero Section */
@@ -438,12 +446,25 @@ a:hover {
     height: 100%;
     z-index: 1;
     flex-shrink: 0;
+    background-color: var(--primary-color);
+    overflow: hidden;
 }
 
 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    display: block;
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .hero-nav {
@@ -645,7 +666,9 @@ a:hover {
     font-size: 1.5rem;
     color: var(--text-light);
     cursor: pointer;
-    padding: 0.5rem;
+    width: 40px;
+    height: 40px;
+    padding: 0;
     border-radius: 50%;
     transition: var(--transition);
     flex-shrink: 0;
@@ -653,6 +676,9 @@ a:hover {
     top: 1rem;
     right: 1rem;
     z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .modal-close:hover {

assets/js/main.js

@@ -52,17 +52,16 @@ function initMobileMenu() {
     if (mobileMenuToggle && navbarMenu) {
         mobileMenuToggle.addEventListener('click', function() {
             navbarMenu.classList.toggle('active');
+            mobileMenuToggle.classList.toggle('active');
             
-            // Animate hamburger menu
+            // Toggle hamburger/close icon
-            const spans = mobileMenuToggle.querySelectorAll('span');
+            const icon = mobileMenuToggle.querySelector('i');
             if (navbarMenu.classList.contains('active')) {
-                spans[0].style.transform = 'rotate(45deg) translateY(7px)';
+                icon.classList.remove('fa-bars');
-                spans[1].style.opacity = '0';
+                icon.classList.add('fa-times');
-                spans[2].style.transform = 'rotate(-45deg) translateY(-7px)';
             } else {
-                spans[0].style.transform = 'none';
+                icon.classList.remove('fa-times');
-                spans[1].style.opacity = '1';
+                icon.classList.add('fa-bars');
-                spans[2].style.transform = 'none';
             }
         });
         
@@ -70,10 +69,10 @@ function initMobileMenu() {
         navLinks.forEach(link => {
             link.addEventListener('click', () => {
                 navbarMenu.classList.remove('active');
-                const spans = mobileMenuToggle.querySelectorAll('span');
+                mobileMenuToggle.classList.remove('active');
-                spans[0].style.transform = 'none';
+                const icon = mobileMenuToggle.querySelector('i');
-                spans[1].style.opacity = '1';
+                icon.classList.remove('fa-times');
-                spans[2].style.transform = 'none';
+                icon.classList.add('fa-bars');
             });
         });
         
@@ -81,10 +80,10 @@ function initMobileMenu() {
         document.addEventListener('click', function(e) {
             if (!navbarMenu.contains(e.target) && !mobileMenuToggle.contains(e.target)) {
                 navbarMenu.classList.remove('active');
-                const spans = mobileMenuToggle.querySelectorAll('span');
+                mobileMenuToggle.classList.remove('active');
-                spans[0].style.transform = 'none';
+                const icon = mobileMenuToggle.querySelector('i');
-                spans[1].style.opacity = '1';
+                icon.classList.remove('fa-times');
-                spans[2].style.transform = 'none';
+                icon.classList.add('fa-bars');
             }
         });
     }

index.html

@@ -38,6 +38,11 @@
     <!-- CSS -->
     <link rel="stylesheet" href="assets/css/main.css?v=1.2">
     
+    <!-- Preload hero slider images -->
+    <link rel="preload" as="image" href="assets/images/hero-1.jpg">
+    <link rel="preload" as="image" href="assets/images/hero-2.jpg">
+    <link rel="preload" as="image" href="assets/images/hero-3.jpg">
+    
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -52,13 +57,13 @@
         <nav class="navbar">
             <div class="container">
                 <div class="navbar-brand">
-                    <img src="logo.svg" alt="ФИДЕМ" class="logo">
+                    <img src="logo.svg" alt="ФИДЕМ" class="logo" loading="eager">
                     <div class="brand-info">
                         <span class="brand-text">ФИДЕМ</span>
                         <span class="brand-subtitle">медицинский центр</span>
                         <div class="partner-info">
                             <span class="partner-text">Официальный партнер</span>
-                            <img src="assets/images/helix-logo.svg" alt="Helix" class="partner-logo">
+                            <img src="assets/images/helix-logo.svg" alt="Helix" class="partner-logo" loading="eager">
                             <span class="partner-brand">HELIX</span>
                         </div>
                     </div>
@@ -93,9 +98,7 @@
                 </div>
                 
                 <button class="mobile-menu-toggle" id="mobile-menu-toggle">
-                    <span></span>
+                    <i class="fas fa-bars"></i>
-                    <span></span>
-                    <span></span>
                 </button>
             </div>
         </nav>
@@ -121,7 +124,10 @@
                         </div>
                     </div>
                     <div class="hero-image">
-                        <img src="assets/images/hero-1.jpg" alt="Медицинский центр ФИДЕМ">
+                        <picture>
+                            <source srcset="assets/images/hero-1.webp" type="image/webp">
+                            <img src="assets/images/hero-1.jpg" alt="Медицинский центр ФИДЕМ" loading="eager">
+                        </picture>
                     </div>
                 </div>
                 
@@ -139,7 +145,7 @@
                         </div>
                     </div>
                     <div class="hero-image">
-                        <img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика">
+                        <img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика" loading="eager">
                     </div>
                 </div>
                 
@@ -157,7 +163,7 @@
                         </div>
                     </div>
                     <div class="hero-image">
-                        <img src="assets/images/hero-3.jpg" alt="УЗИ диагностика">
+                        <img src="assets/images/hero-3.jpg" alt="УЗИ диагностика" loading="eager">
                     </div>
                 </div>
             </div>
@@ -326,7 +332,10 @@
                     </div>
                     
                     <div class="about-image">
-                        <img src="assets/images/about.jpg" alt="О медицинском центре ФИДЕМ">
+                        <picture>
+                            <source srcset="assets/images/about.webp" type="image/webp">
+                            <img src="assets/images/about.jpg" alt="О медицинском центре ФИДЕМ" loading="lazy">
+                        </picture>
                     </div>
                 </div>
             </div>

nginx_fidem.conf

@@ -21,7 +21,23 @@ server {
         add_header Cache-Control "public, immutable";
     }
     
+    # Image optimization
+    location ~* \.(jpg|jpeg|png|gif|svg|webp)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        add_header Vary "Accept-Encoding";
+    }
+    
+    # WebP support with proper Content-Type
+    location ~* \.webp$ {
+        add_header Content-Type "image/webp";
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+    
     # Gzip compression
     gzip on;
-    gzip_types text/css application/javascript image/svg+xml;
+    gzip_types text/css application/javascript image/svg+xml application/json text/plain;
+    gzip_min_length 1000;
+    gzip_vary on;
 }