fix: плавное уменьшение шапки и переключение логотипов

public/static/css/etpgrf.css

@@ -48,40 +48,53 @@ body {
   flex-direction: column;
 }
 
-/* Навбар: используем переменную для фона */
-.navbar {
+#main-navbar {
+  z-index: 1000;
   background-color: var(--bs-navbar-bg) !important;
   border-bottom: 1px solid var(--bs-border-color);
-  padding: 0; /* Убираем отступы у навбара */
+  padding: 0;
   position: sticky;
   top: 0;
-  height: 105px;
-  z-index: 1000;
   backdrop-filter: blur(4px); /* Эффект размытия */
   box-shadow: 0 -25px 30px 15px var(--bs-border-color);
+  /* transition: height 0.3s ease, background-color 0.3s ease; /* Анимация высоты */
 }
 
-.navbar-brand {
+#main-navbar > .container {
+  background: no-repeat left;
+  background-size: contain;
+}
+
+#main-navbar > .container.logo-big {
+  background-image: var(--bg-image-text);
+  transition: .4s ease;
+}
+
+#main-navbar > .container:not(.logo-big) {
+  background-image: none;
+  transition: .4s ease;
+}
+
+#main-navbar > #logo > .navbar-brand {
   padding: 0; /* Убираем отступы у бренда */
+  display: block; /* Блок, чтобы работали размеры */
+  background: no-repeat left;
+  background-size: contain;
+  margin-left: -1.5%;
 }
 
-/* Стили для скролла */
-.navbar-scrolled {
-  height: 55px;
+#main-navbar > #logo.logo-big > .navbar-brand {
+  height: 105px;
+  width: 500px;
+  opacity: 1;
+  transition: .4s ease;
 }
 
-/* Логотип */
-.logo-img {
-  width: 70%;
-  margin-left: -3%; /* Немного сдвигаем влево, чтобы буквы ETPGRF логотипа выровнять */
-  height: 151px; /* Ограничиваем высоту */
-  object-fit: contain; /* Вписываем, сохраняя пропорции */
-}
-
-/* Уменьшаем логотип при скролле */
-.navbar-scrolled .logo-img {
-  height: 78px; /* Компактная высота */
-  margin-left: -5%;
+#main-navbar > #logo:not(.logo-big) > .navbar-brand {
+  height: 60px;
+  width: 285px;
+  transition: .4s ease;
+  opacity: 0;
 }
 
 /* Контент растягивается, чтобы прижать футер */

public/static/js/base.js

@@ -7,39 +7,30 @@
     function updateTheme(e) {
         const theme = e.matches ? 'dark' : 'light';
         document.documentElement.setAttribute('data-bs-theme', theme);
-        // При смене темы обновляем и логотип
-        updateLogo();
     }
 
+    // Установить при загрузке
+    updateTheme(darkModeMediaQuery);
+    // Слушать изменения
+    darkModeMediaQuery.addEventListener('change', updateTheme);
+
     // --- ЛОГОТИП И СКРОЛЛ ---
     function updateLogo() {
-        const logoImg = document.getElementById('logo-img');
-        const navbar = document.getElementById('main-navbar');
-        
-        if (!logoImg || !navbar) return;
+        if (!navbar) return;
+        const navbar = document.getElementById('logo');
+        const scrollY = window.scrollY;
 
-        const isDark = darkModeMediaQuery.matches;
-        // Используем window.scrollY для определения прокрутки
-        // Если прокрутили больше 50px, уменьшаем шапку
-        const isScrolled = window.scrollY > 50; 
-
-        if (isScrolled) {
-            navbar.classList.add('navbar-scrolled');
-            logoImg.src = isDark ? logoImg.dataset.srcDarkCompact : logoImg.dataset.srcLightCompact;
-        } else {
-            navbar.classList.remove('navbar-scrolled');
-            logoImg.src = isDark ? logoImg.dataset.srcDark : logoImg.dataset.srcLight;
+        // Гистерезис: включаем после 60px, выключаем до 10px
+        // Это предотвращает дребезг на границе
+        if (scrollY > 60) {
+            navbar.classList.remove('logo-big');
+        } else if (scrollY < 10) {
+            navbar.classList.add('logo-big');
         }
     }
 
-    // Инициализация темы и логотипа
-    updateTheme(darkModeMediaQuery);
-    darkModeMediaQuery.addEventListener('change', updateTheme);
-    
     // Инициализация логотипа при загрузке и скролле
-    document.addEventListener('DOMContentLoaded', updateLogo);
-    window.addEventListener('scroll', updateLogo);
-
+    window.addEventListener('scroll', updateLogo, { passive: true });
 
     // --- КУКИ И СЧЕТЧИКИ ---
     const COOKIE_KEY = 'cookie_consent';