Update index.html

index.html

@@ -152,13 +152,6 @@
             box-shadow: 0 0 0 1px rgba(99,102,241,0.22), 0 0 28px rgba(99,102,241,0.08);
             transform: translateY(-1px);
         }
-
-        /* Mobile menu - hide on desktop */
-        @media (min-width: 768px) {
-            #mobile-menu {
-                display: none !important;
-            }
-        }
     </style>
 </head>
 
@@ -211,7 +204,7 @@
     </nav>
 
     <!-- Mobile Menu Dropdown -->
-    <div id="mobile-menu" class="fixed top-[73px] left-0 right-0 z-[100] bg-black/95 backdrop-blur-md border-b border-gray-800 modal modal-hidden" style="display: none;">
+    <div id="mobile-menu" class="md:hidden fixed top-0 left-0 right-0 z-50 bg-black/95 backdrop-blur-md border-b border-gray-800 modal modal-hidden">
         <div class="px-6 py-4">
             <div class="flex justify-between items-center mb-6">
                 <span class="text-lg font-semibold">Menu</span>
@@ -219,7 +212,7 @@
                     <i class="fas fa-times text-gray-300"></i>
                 </button>
             </div>
-            <div class="flex flex-col space-y-4 pb-6">
+            <div class="flex flex-col space-y-4">
                 <a href="about.html" class="text-gray-300 hover:text-indigo-400 transition py-2">About</a>
                 <a href="research.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Research</a>
                 <a href="capabilities.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Capabilities</a>
@@ -251,8 +244,8 @@
         </div>
 
         <div class="mt-24 w-64 h-64 relative conscious-element" id="conscious-orb-container">
-            <canvas id="orb-neural-canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none z-10"></canvas>
-            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full relative z-20">
+            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
+                <canvas id="orb-neural-canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>
                 <circle cx="100" cy="100" r="80" fill="url(#orbGradient)" filter="url(#orbGlow)" />
                 <path d="M100,20 Q120,50 100,80 Q80,50 100,20 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M100,180 Q80,150 100,120 Q120,150 100,180 Z" fill="rgba(255,255,255,0.1)" />
@@ -1580,10 +1573,7 @@
            SUPER BOLD & LARGE HEARTBEAT NEURAL ANIMATION
         ----------------------------------------------------------------- */
         const neuralCanvas = document.getElementById('orb-neural-canvas');
-        if (!neuralCanvas) {
-            console.warn('Neural canvas element not found');
-        }
-        const neuralCtx = neuralCanvas ? neuralCanvas.getContext('2d') : null;
+        const neuralCtx = neuralCanvas.getContext('2d');
 
         function resizeNeuralCanvas() {
             if (neuralCanvas && neuralCanvas.parentElement) {
@@ -1591,19 +1581,15 @@
                 neuralCanvas.height = neuralCanvas.parentElement.clientHeight;
             }
         }
-        
-        if (neuralCanvas) {
+        resizeNeuralCanvas();
+        window.addEventListener('resize', () => {
             resizeNeuralCanvas();
-            window.addEventListener('resize', () => {
-                resizeNeuralCanvas();
-                setupNeurons();
-            });
-        }
+            setupNeurons();
+        });
 
         const neuronCount = 22;
         const neurons = [];
         function setupNeurons() {
-            if (!neuralCanvas) return;
             neurons.length = 0;
             const w = neuralCanvas.width;
             const h = neuralCanvas.height;
@@ -1619,9 +1605,7 @@
                 });
             }
         }
-        if (neuralCanvas && neuralCtx) {
-            setupNeurons();
-        }
+        setupNeurons();
 
         function drawNeuralActivity(time) {
             if (!neuralCanvas || !neuralCtx) return;
@@ -1975,63 +1959,28 @@
         const mobileMenuClose = document.getElementById('mobile-menu-close');
 
         function toggleMobileMenu(show) {
-            if (!mobileMenu) return;
-            
-            // Only show on mobile screens
-            if (window.innerWidth >= 768) {
-                return; // Don't show on desktop
-            }
-            
-            if (show) {
-                mobileMenu.style.display = 'block';
-                // Force a reflow
-                mobileMenu.offsetHeight;
-                mobileMenu.classList.remove('modal-hidden');
-                mobileMenu.classList.add('modal-visible');
-                document.body.style.overflow = 'hidden';
-            } else {
-                mobileMenu.classList.remove('modal-visible');
-                mobileMenu.classList.add('modal-hidden');
-                setTimeout(() => {
-                    if (mobileMenu.classList.contains('modal-hidden')) {
-                        mobileMenu.style.display = 'none';
-                    }
-                }, 300);
-                document.body.style.overflow = '';
-            }
+            toggleModal(mobileMenu, show);
         }
 
         if (mobileMenuBtn) {
-            mobileMenuBtn.addEventListener('click', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                toggleMobileMenu(true);
-            });
+            mobileMenuBtn.addEventListener('click', () => toggleMobileMenu(true));
         }
 
         if (mobileMenuClose) {
-            mobileMenuClose.addEventListener('click', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                toggleMobileMenu(false);
-            });
+            mobileMenuClose.addEventListener('click', () => toggleMobileMenu(false));
         }
 
         if (mobileMenu) {
             mobileMenu.addEventListener('click', (e) => {
-                if (e.target === mobileMenu) {
-                    toggleMobileMenu(false);
-                }
+                if (e.target === mobileMenu) toggleMobileMenu(false);
             });
         }
 
         // Close mobile menu when clicking on a link
-        if (mobileMenu) {
-            const mobileMenuLinks = mobileMenu.querySelectorAll('a');
+        const mobileMenuLinks = mobileMenu?.querySelectorAll('a');
+        if (mobileMenuLinks) {
             mobileMenuLinks.forEach(link => {
-                link.addEventListener('click', () => {
-                    toggleMobileMenu(false);
-                });
+                link.addEventListener('click', () => toggleMobileMenu(false));
             });
         }