Чет кал какой-то переключение темы. И ты не добавил liquid glass (жидкое стекло) из MacOS 26.

index.html

@@ -34,6 +34,16 @@
         }
     </script>
     <style>
+        :root {
+            --glass-bg: rgba(255, 255, 255, 0.75);
+            --glass-border: rgba(209, 213, 219, 0.3);
+            --glass-shadow: rgba(0, 0, 0, 0.1);
+        }
+        .dark {
+            --glass-bg: rgba(17, 24, 39, 0.75);
+            --glass-border: rgba(255, 255, 255, 0.125);
+            --glass-shadow: rgba(0, 0, 0, 0.25);
+        }
         .vanta-bg {
             position: absolute;
             top: 0;
@@ -43,17 +53,14 @@
             z-index: -1;
         }
         .glass-effect {
+            background: var(--glass-bg);
+            border-radius: 16px;
+            border: 1px solid var(--glass-border);
+            box-shadow: 0 4px 30px var(--glass-shadow);
             backdrop-filter: blur(16px) saturate(180%);
             -webkit-backdrop-filter: blur(16px) saturate(180%);
-            background-color: rgba(255, 255, 255, 0.75);
-            border-radius: 12px;
-            border: 1px solid rgba(209, 213, 219, 0.3);
         }
-        .dark .glass-effect {
-            background-color: rgba(17, 24, 39, 0.75);
-            border: 1px solid rgba(255, 255, 255, 0.125);
-        }
-        .dark {
+.dark {
             background-color: #111827;
             color: #f3f4f6;
         }
@@ -454,75 +461,78 @@ Write. Collaborate.
         });
         // Initialize Feather Icons
         feather.replace();
-
-        // Theme switcher
+        // Theme switcher with smooth transition
         const themeToggle = document.getElementById('theme-toggle');
         const themeIcon = document.getElementById('theme-icon');
         const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
         
+        // Apply theme with transition
+        function applyTheme(isDark) {
+            document.documentElement.style.transition = 'all 0.5s ease';
+            if (isDark) {
+                document.documentElement.classList.add('dark');
+                themeIcon.setAttribute('data-feather', 'sun');
+            } else {
+                document.documentElement.classList.remove('dark');
+                themeIcon.setAttribute('data-feather', 'moon');
+            }
+            feather.replace();
+            setTimeout(() => {
+                document.documentElement.style.transition = '';
+            }, 500);
+        }
+
         // Check for saved theme preference or use system preference
         const currentTheme = localStorage.getItem('theme');
         if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) {
-            document.documentElement.classList.add('dark');
-            themeIcon.setAttribute('data-feather', 'sun');
-            feather.replace();
+            applyTheme(true);
         } else {
-            document.documentElement.classList.remove('dark');
-            themeIcon.setAttribute('data-feather', 'moon');
-            feather.replace();
+            applyTheme(false);
         }
 
-        // Toggle theme
+        // Toggle theme with animation
         themeToggle.addEventListener('click', function() {
             const html = document.documentElement;
-            if (html.classList.contains('dark')) {
-                html.classList.remove('dark');
-                localStorage.setItem('theme', 'light');
-                themeIcon.setAttribute('data-feather', 'moon');
-            } else {
-                html.classList.add('dark');
-                localStorage.setItem('theme', 'dark');
-                themeIcon.setAttribute('data-feather', 'sun');
-            }
-            feather.replace();
+            const isDark = !html.classList.contains('dark');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            applyTheme(isDark);
         });
 
         // Listen for system theme changes
         prefersDarkScheme.addListener((e) => {
             if (!localStorage.getItem('theme')) {
-                if (e.matches) {
-                    document.documentElement.classList.add('dark');
-                    themeIcon.setAttribute('data-feather', 'sun');
-                } else {
-                    document.documentElement.classList.remove('dark');
-                    themeIcon.setAttribute('data-feather', 'moon');
-                }
-                feather.replace();
+                applyTheme(e.matches);
             }
         });
-// Smooth scrolling for navigation links
+        // Enhanced smooth scrolling with offset for fixed header
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
+anchor.addEventListener('click', function (e) {
                 e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
+                const targetId = this.getAttribute('href');
+                const target = document.querySelector(targetId);
                 if (target) {
-                    target.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
+                    const headerHeight = document.querySelector('nav').offsetHeight;
+                    const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
+                    window.scrollTo({
+                        top: targetPosition,
+                        behavior: 'smooth'
                     });
                 }
-            });
+});
         });
-
-        // Add scroll effect to navbar
+        // Enhanced navbar scroll effect with glass morphism
         window.addEventListener('scroll', function() {
             const nav = document.querySelector('nav');
-            if (window.scrollY > 100) {
-                nav.classList.add('bg-white', 'shadow-lg');
+            if (window.scrollY > 20) {
+                nav.classList.add('bg-white/80', 'dark:bg-gray-900/80', 'shadow-lg', 'backdrop-blur-md');
+                nav.style.backdropFilter = 'blur(8px)';
+                nav.style.webkitBackdropFilter = 'blur(8px)';
             } else {
-                nav.classList.remove('shadow-lg');
+                nav.classList.remove('shadow-lg', 'backdrop-blur-md');
+                nav.style.backdropFilter = '';
+                nav.style.webkitBackdropFilter = '';
             }
         });
-    </script>
+</script>
 </body>
 </html>