Update index.html

index.html

@@ -160,7 +160,7 @@
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
 
     <!-- NAVIGATION BAR -->
-    <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
+    <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm bg-black/50">
         <!-- Logo + mini orb -->
         <div class="flex items-center space-x-2">
             <a href="index.html" class="flex items-center space-x-2">
@@ -171,8 +171,23 @@
             </a>
         </div>
 
+        <!-- Navigation Links (Desktop) -->
+        <div class="hidden md:flex items-center space-x-6">
+            <a href="about.html" class="text-gray-300 hover:text-indigo-400 transition">About</a>
+            <a href="research.html" class="text-gray-300 hover:text-indigo-400 transition">Research</a>
+            <a href="capabilities.html" class="text-gray-300 hover:text-indigo-400 transition">Capabilities</a>
+            <a href="consciousness.html" class="text-gray-300 hover:text-indigo-400 transition">Consciousness</a>
+            <a href="chat.html" class="text-gray-300 hover:text-indigo-400 transition">Chat</a>
+            <a href="contact.html" class="text-gray-300 hover:text-indigo-400 transition">Contact</a>
+        </div>
+
         <!-- Right controls: single Constellation glyph + Access -->
         <div class="flex items-center space-x-3">
+            <!-- Mobile Menu Button -->
+            <button id="mobile-menu-btn" class="md:hidden w-10 h-10 rounded-full border border-indigo-500/40 bg-gray-900/20 hover:bg-gray-900/40 backdrop-blur-sm transition flex items-center justify-center" aria-label="Toggle Menu">
+                <i class="fas fa-bars text-indigo-300"></i>
+            </button>
+
             <!-- Constellation Glyph (opens the Lab Navigator) -->
             <button id="lab-nav-btn"
                 class="w-10 h-10 rounded-full border border-indigo-500/40 bg-gray-900/20 hover:bg-gray-900/40 backdrop-blur-sm transition flex items-center justify-center"
@@ -188,6 +203,26 @@
         </div>
     </nav>
 
+    <!-- Mobile Menu Dropdown -->
+    <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>
+                <button id="mobile-menu-close" class="w-10 h-10 rounded-full border border-gray-700 bg-gray-900/50 hover:bg-gray-900/70 transition flex items-center justify-center" aria-label="Close Menu">
+                    <i class="fas fa-times text-gray-300"></i>
+                </button>
+            </div>
+            <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>
+                <a href="consciousness.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Consciousness</a>
+                <a href="chat.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Chat</a>
+                <a href="contact.html" class="text-gray-300 hover:text-indigo-400 transition py-2">Contact</a>
+            </div>
+        </div>
+    </div>
+
     <!-- HERO SECTION -->
     <section class="relative z-10 min-h-screen flex flex-col justify-center items-center px-6 py-20 text-center">
         <div class="max-w-4xl mx-auto">
@@ -209,8 +244,8 @@
         </div>
 
         <div class="mt-24 w-64 h-64 relative conscious-element" id="conscious-orb-container">
-            <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>
+            <canvas id="orb-neural-canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none" style="opacity: 0.1;"></canvas>
+            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full relative">
                 <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)" />
@@ -1538,7 +1573,7 @@
            SUPER BOLD & LARGE HEARTBEAT NEURAL ANIMATION
         ----------------------------------------------------------------- */
         const neuralCanvas = document.getElementById('orb-neural-canvas');
-        const neuralCtx = neuralCanvas.getContext('2d');
+        const neuralCtx = neuralCanvas ? neuralCanvas.getContext('2d') : null;
 
         function resizeNeuralCanvas() {
             if (neuralCanvas && neuralCanvas.parentElement) {
@@ -1555,6 +1590,7 @@
         const neuronCount = 22;
         const neurons = [];
         function setupNeurons() {
+            if (!neuralCanvas) return;
             neurons.length = 0;
             const w = neuralCanvas.width;
             const h = neuralCanvas.height;
@@ -1910,8 +1946,45 @@
                 closeAccessModal(true);
                 return;
             }
+            if (mobileMenu && !mobileMenu.classList.contains('modal-hidden')) {
+                toggleMobileMenu(false);
+                return;
+            }
         });
 
+        /* -----------------------------------------------------------------
+           MOBILE MENU TOGGLE
+        ----------------------------------------------------------------- */
+        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const mobileMenuClose = document.getElementById('mobile-menu-close');
+
+        function toggleMobileMenu(show) {
+            toggleModal(mobileMenu, show);
+        }
+
+        if (mobileMenuBtn) {
+            mobileMenuBtn.addEventListener('click', () => toggleMobileMenu(true));
+        }
+
+        if (mobileMenuClose) {
+            mobileMenuClose.addEventListener('click', () => toggleMobileMenu(false));
+        }
+
+        if (mobileMenu) {
+            mobileMenu.addEventListener('click', (e) => {
+                if (e.target === mobileMenu) toggleMobileMenu(false);
+            });
+        }
+
+        // Close mobile menu when clicking on a link
+        const mobileMenuLinks = mobileMenu?.querySelectorAll('a');
+        if (mobileMenuLinks) {
+            mobileMenuLinks.forEach(link => {
+                link.addEventListener('click', () => toggleMobileMenu(false));
+            });
+        }
+
         // Initial dossier render
         renderDossier('start');
     </script>