From 9275ae82db255cf952cb1bc824b80b7cc777e324 Mon Sep 17 00:00:00 2001
From: George Birikorang <george.fleef@gmail.com>
Date: Wed, 3 Sep 2025 01:39:25 -0400
Subject: [PATCH] fix: perfects mobile menu and nav

---
 about.html        | 67 +++++++++++++++++++++++++++-----
 contact.html      | 98 ++++++++++++++++++++++++++++++++++++-----------
 index.html        | 68 ++++++++++++++++++++++++++++----
 projects.html     | 36 ++++++++++++++---
 services.html     | 59 +++++++++++++++++++++++++---
 styles/output.css |  5 +++
 who.html          | 59 +++++++++++++++++++++++++---
 7 files changed, 336 insertions(+), 56 deletions(-)

diff --git a/about.html b/about.html
index f17f089..a993345 100644
--- a/about.html
+++ b/about.html
@@ -363,15 +363,18 @@
           </div>
     </div>
 
-    <!-- Menu Toggle with Homepage structure -->
-    <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
-          <div class="cursor-pointer" id="menuToggle">
-        <div class="relative inline-block" id="menuWrap">
+    <!-- Menu Toggle with Homepage/WHY structure -->
+    <div
+      class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
+    >
+      <div class="cursor-pointer" id="menuToggle">
+        <!-- Desktop view: menuWrap with waves and outline -->
+        <div class="relative inline-block hidden md:block" id="menuWrap">
           <div class="menu-waves" aria-hidden="true">
             <span class="wave"></span>
             <span class="wave"></span>
             <span class="wave"></span>
-            </div>
+          </div>
           <div class="menu-outline" aria-hidden="true"></div>
           <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
             <span class="w-1 h-1 bg-white"></span>
@@ -384,10 +387,32 @@
             <span class="w-1 h-1 bg-white"></span>
             <span class="w-1 h-1 bg-white"></span>
           </div>
-          <div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
+          <div
+            id="menuPetal"
+            class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
+          >
             <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
+          </div>
+        </div>
+        
+        <!-- Mobile view: simple transparent background -->
+        <div class="md:hidden">
+          <div
+            class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
+          >
+            <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+            </div>
+          </div>
         </div>
-      </div>
       </div>
     </div>
 
@@ -1289,6 +1314,24 @@
       /* Homepage-style menu outline and waves */
       #menuWrap { position: relative; overflow: visible; }
       .menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
+      
+      /* Hide menu outline on mobile */
+      @media (max-width: 768px) {
+        .menu-outline {
+          display: none !important;
+        }
+        
+        /* Create a proper button container for mobile */
+        #menuGrid {
+          background: rgba(255, 255, 255, 0.12) !important;
+          border-radius: 8px !important;
+          padding: 6px !important;
+          border: 1px solid rgba(255, 255, 255, 0.15) !important;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
+          backdrop-filter: blur(4px) !important;
+        }
+      }
+      
       .menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
       .menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
       .menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
@@ -1435,27 +1478,31 @@
         });
       });
 
-      // Menu toggle functionality (homepage pattern)
+      // Menu toggle functionality
       const menuToggle = document.getElementById("menuToggle");
       const navMenu = document.getElementById("navMenu");
-      const menuGrid = document.getElementById("menuGrid");
       const menuWrap = document.getElementById("menuWrap");
+      const menuGrid = document.getElementById("menuGrid");
+      const menuGridMobile = document.getElementById("menuGridMobile");
 
-      if (menuToggle && navMenu && menuGrid) {
+      if (menuToggle && navMenu) {
         let isMenuOpen = false;
 
         menuToggle.addEventListener("click", () => {
           if (isMenuOpen) {
+            // Close menu
             navMenu.classList.add("hidden");
             if (menuWrap) menuWrap.classList.remove("open");
             isMenuOpen = false;
           } else {
+            // Open menu
             navMenu.classList.remove("hidden");
             if (menuWrap) menuWrap.classList.add("open");
             isMenuOpen = true;
           }
         });
 
+        // Close menu when clicking outside
         document.addEventListener("click", (e) => {
           if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
             navMenu.classList.add("hidden");
diff --git a/contact.html b/contact.html
index 4882fa3..10ab9c0 100644
--- a/contact.html
+++ b/contact.html
@@ -367,9 +367,12 @@
           </div>
 
     <!-- Menu Toggle with Homepage/WHY structure -->
-    <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
-          <div class="cursor-pointer" id="menuToggle">
-        <div class="relative inline-block" id="menuWrap">
+    <div
+      class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
+    >
+      <div class="cursor-pointer" id="menuToggle">
+        <!-- Desktop view: menuWrap with waves and outline -->
+        <div class="relative inline-block hidden md:block" id="menuWrap">
           <div class="menu-waves" aria-hidden="true">
             <span class="wave"></span>
             <span class="wave"></span>
@@ -386,11 +389,33 @@
             <span class="w-1 h-1 bg-white"></span>
             <span class="w-1 h-1 bg-white"></span>
             <span class="w-1 h-1 bg-white"></span>
-            </div>
-          <div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
+          </div>
+          <div
+            id="menuPetal"
+            class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
+          >
             <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
+        
+        <!-- Mobile view: simple transparent background -->
+        <div class="md:hidden">
+          <div
+            class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
+          >
+            <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -873,6 +898,24 @@
       /* Homepage-style menu outline and waves */
       #menuWrap { position: relative; overflow: visible; }
       .menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
+      
+      /* Hide menu outline on mobile */
+      @media (max-width: 768px) {
+        .menu-outline {
+          display: none !important;
+        }
+        
+        /* Create a proper button container for mobile */
+        #menuGrid {
+          background: rgba(255, 255, 255, 0.12) !important;
+          border-radius: 8px !important;
+          padding: 6px !important;
+          border: 1px solid rgba(255, 255, 255, 0.15) !important;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
+          backdrop-filter: blur(4px) !important;
+        }
+      }
+      
       .menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
       .menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
       .menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
@@ -883,28 +926,39 @@
     </style>
 
     <script>
-      // Menu toggle functionality (class-toggle)
+      // Menu toggle functionality
       const menuToggle = document.getElementById("menuToggle");
       const navMenu = document.getElementById("navMenu");
       const menuWrap = document.getElementById("menuWrap");
-      (function setupMenu(){
-        if (!menuToggle || !navMenu || !menuWrap) return;
-        let isOpen = false;
-        menuToggle.addEventListener('click', (e)=>{
-          e.stopPropagation();
-          isOpen = !isOpen;
-          if (isOpen) { navMenu.classList.remove('hidden'); menuWrap.classList.add('open'); }
-          else { navMenu.classList.add('hidden'); menuWrap.classList.remove('open'); }
-        });
-        document.addEventListener('click', (e)=>{
-          if (!isOpen) return;
-          if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
-            isOpen = false;
-            navMenu.classList.add('hidden');
-            menuWrap.classList.remove('open');
+      const menuGrid = document.getElementById("menuGrid");
+      const menuGridMobile = document.getElementById("menuGridMobile");
+
+      if (menuToggle && navMenu) {
+        let isMenuOpen = false;
+
+        menuToggle.addEventListener("click", () => {
+          if (isMenuOpen) {
+            // Close menu
+            navMenu.classList.add("hidden");
+            if (menuWrap) menuWrap.classList.remove("open");
+            isMenuOpen = false;
+          } else {
+            // Open menu
+            navMenu.classList.remove("hidden");
+            if (menuWrap) menuWrap.classList.add("open");
+            isMenuOpen = true;
           }
         });
-      })();
+
+        // Close menu when clicking outside
+        document.addEventListener("click", (e) => {
+          if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
+            navMenu.classList.add("hidden");
+            if (menuWrap) menuWrap.classList.remove("open");
+            isMenuOpen = false;
+          }
+        });
+      }
     </script>
 
       // Form submission
diff --git a/index.html b/index.html
index 4c37725..b7ff0ea 100644
--- a/index.html
+++ b/index.html
@@ -372,13 +372,13 @@
           </a>
         </div>
 
-        <!-- Menu Grid -->
+        <!-- Menu Toggle with Homepage/WHY structure -->
         <div
-          class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50 opacity-0 animate-fade-in-left"
-          style="animation-delay: 0.4s; animation-fill-mode: forwards"
+          class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
         >
           <div class="cursor-pointer" id="menuToggle">
-            <div class="relative inline-block" id="menuWrap">
+            <!-- Desktop view: menuWrap with waves and outline -->
+            <div class="relative inline-block hidden md:block" id="menuWrap">
               <div class="menu-waves" aria-hidden="true">
                 <span class="wave"></span>
                 <span class="wave"></span>
@@ -406,6 +406,25 @@
                 <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
               </div>
             </div>
+
+            <!-- Mobile view: simple transparent background -->
+            <div class="md:hidden">
+              <div
+                class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
+              >
+                <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
+                  <span class="w-1 h-1 bg-white rounded-full"></span>
+                  <span class="w-1 h-1 bg-white rounded-full"></span>
+                  <span class="w-1 h-1 bg-white rounded-full"></span>
+                  <span class="w-1 h-1 bg-white rounded-full"></span>
+                  <span class="w-1 h-1 bg-white rounded-full"></span>
+                  <span class="w-1 h-1 bg-white rounded-full"></span>
+                  <span class="w-1 h-1 bg-white rounded-full"></span>
+                  <span class="w-1 h-1 bg-white rounded-full"></span>
+                  <span class="w-1 h-1 bg-white rounded-full"></span>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -621,6 +640,23 @@
         outline: 1px solid rgba(255, 255, 255, 0.6);
         outline-offset: 6px;
       }
+
+      /* Hide menu outline on mobile */
+      @media (max-width: 768px) {
+        .menu-outline {
+          display: none !important;
+        }
+
+        /* Create a proper button container for mobile */
+        #menuGrid {
+          background: rgba(255, 255, 255, 0.12) !important;
+          border-radius: 8px !important;
+          padding: 6px !important;
+          border: 1px solid rgba(255, 255, 255, 0.15) !important;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
+          backdrop-filter: blur(4px) !important;
+        }
+      }
       .menu-waves .wave {
         position: absolute;
         inset: 0;
@@ -805,6 +841,23 @@
           opacity: 1;
         }
       }
+
+      /* Hero section class for targeting */
+      .hero-section {
+        /* This class will be added to the hero section for targeting */
+      }
+
+      /* Mobile menu button styling */
+      @media (max-width: 768px) {
+        #menuGrid {
+          background: rgba(255, 255, 255, 0.12) !important;
+          border-radius: 8px !important;
+          padding: 6px !important;
+          border: 1px solid rgba(255, 255, 255, 0.15) !important;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
+          backdrop-filter: blur(4px) !important;
+        }
+      }
     </style>
 
     <script src="js/main.js"></script>
@@ -957,10 +1010,11 @@
       // Menu toggle functionality
       const menuToggle = document.getElementById("menuToggle");
       const navMenu = document.getElementById("navMenu");
-      const menuGrid = document.getElementById("menuGrid");
       const menuWrap = document.getElementById("menuWrap");
+      const menuGrid = document.getElementById("menuGrid");
+      const menuGridMobile = document.getElementById("menuGridMobile");
 
-      if (menuToggle && navMenu && menuGrid) {
+      if (menuToggle && navMenu) {
         let isMenuOpen = false;
 
         menuToggle.addEventListener("click", () => {
@@ -970,7 +1024,7 @@
             if (menuWrap) menuWrap.classList.remove("open");
             isMenuOpen = false;
           } else {
-            // Open menu (keep button static)
+            // Open menu
             navMenu.classList.remove("hidden");
             if (menuWrap) menuWrap.classList.add("open");
             isMenuOpen = true;
diff --git a/projects.html b/projects.html
index 6453abb..63440be 100644
--- a/projects.html
+++ b/projects.html
@@ -368,7 +368,8 @@
       class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
     >
       <div class="cursor-pointer" id="menuToggle">
-        <div class="relative inline-block" id="menuWrap">
+        <!-- Desktop view: menuWrap with waves and outline -->
+        <div class="relative inline-block hidden md:block" id="menuWrap">
           <div class="menu-waves" aria-hidden="true">
             <span class="wave"></span>
             <span class="wave"></span>
@@ -393,6 +394,25 @@
             <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
+
+        <!-- Mobile view: simple transparent background -->
+        <div class="md:hidden">
+          <div
+            class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
+          >
+            <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -1137,7 +1157,7 @@
         contain: layout;
       }
 
-      /* Homepage-style menu outline and waves */
+      /* Homepage-style menu outline and waves (desktop only) */
       #menuWrap {
         position: relative;
         overflow: visible;
@@ -1150,6 +1170,7 @@
         outline: 1px solid rgba(255, 255, 255, 0.6);
         outline-offset: 6px;
       }
+
       .menu-waves {
         position: absolute;
         inset: -20px;
@@ -1534,27 +1555,32 @@
             }
           });
 
-        // Menu toggle functionality (homepage pattern)
+        // Menu toggle functionality
         const menuToggle = document.getElementById("menuToggle");
         const navMenu = document.getElementById("navMenu");
-        const menuGrid = document.getElementById("menuGrid");
         const menuWrap = document.getElementById("menuWrap");
+        const menuGrid = document.getElementById("menuGrid");
+        const menuGridMobile = document.getElementById("menuGridMobile");
 
-        if (menuToggle && navMenu && menuGrid) {
+        if (menuToggle && navMenu) {
           let isMenuOpen = false;
+          let closeBtnEl = null;
 
           menuToggle.addEventListener("click", () => {
             if (isMenuOpen) {
+              // Close menu
               navMenu.classList.add("hidden");
               if (menuWrap) menuWrap.classList.remove("open");
               isMenuOpen = false;
             } else {
+              // Open menu
               navMenu.classList.remove("hidden");
               if (menuWrap) menuWrap.classList.add("open");
               isMenuOpen = true;
             }
           });
 
+          // Close menu when clicking outside
           document.addEventListener("click", (e) => {
             if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
               navMenu.classList.add("hidden");
diff --git a/services.html b/services.html
index dc77d27..0dc2c6d 100644
--- a/services.html
+++ b/services.html
@@ -168,6 +168,24 @@
       /* Homepage-style menu outline and waves */
       #menuWrap { position: relative; overflow: visible; }
       .menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
+      
+      /* Hide menu outline on mobile */
+      @media (max-width: 768px) {
+        .menu-outline {
+          display: none !important;
+        }
+        
+        /* Create a proper button container for mobile */
+        #menuGrid {
+          background: rgba(255, 255, 255, 0.12) !important;
+          border-radius: 8px !important;
+          padding: 6px !important;
+          border: 1px solid rgba(255, 255, 255, 0.15) !important;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
+          backdrop-filter: blur(4px) !important;
+        }
+      }
+      
       .menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
       .menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
       .menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
@@ -530,9 +548,12 @@
     </div>
 
     <!-- Menu Toggle with Homepage/WHY structure -->
-    <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
+    <div
+      class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
+    >
       <div class="cursor-pointer" id="menuToggle">
-        <div class="relative inline-block" id="menuWrap">
+        <!-- Desktop view: menuWrap with waves and outline -->
+        <div class="relative inline-block hidden md:block" id="menuWrap">
           <div class="menu-waves" aria-hidden="true">
             <span class="wave"></span>
             <span class="wave"></span>
@@ -550,10 +571,32 @@
             <span class="w-1 h-1 bg-white"></span>
             <span class="w-1 h-1 bg-white"></span>
           </div>
-          <div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
+          <div
+            id="menuPetal"
+            class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
+          >
             <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
+        
+        <!-- Mobile view: simple transparent background -->
+        <div class="md:hidden">
+          <div
+            class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
+          >
+            <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -1103,27 +1146,31 @@
         document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
       })();
 
-      // Menu toggle functionality (homepage pattern)
+      // Menu toggle functionality
       const menuToggle = document.getElementById("menuToggle");
       const navMenu = document.getElementById("navMenu");
-      const menuGrid = document.getElementById("menuGrid");
       const menuWrap = document.getElementById("menuWrap");
+      const menuGrid = document.getElementById("menuGrid");
+      const menuGridMobile = document.getElementById("menuGridMobile");
 
-      if (menuToggle && navMenu && menuGrid) {
+      if (menuToggle && navMenu) {
         let isMenuOpen = false;
 
         menuToggle.addEventListener("click", () => {
           if (isMenuOpen) {
+            // Close menu
             navMenu.classList.add("hidden");
             if (menuWrap) menuWrap.classList.remove("open");
             isMenuOpen = false;
           } else {
+            // Open menu
             navMenu.classList.remove("hidden");
             if (menuWrap) menuWrap.classList.add("open");
             isMenuOpen = true;
           }
         });
 
+        // Close menu when clicking outside
         document.addEventListener("click", (e) => {
           if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
             navMenu.classList.add("hidden");
diff --git a/styles/output.css b/styles/output.css
index 42dd8da..1008191 100644
--- a/styles/output.css
+++ b/styles/output.css
@@ -2296,6 +2296,11 @@ video {
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-filter {
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
diff --git a/who.html b/who.html
index 4788658..21a3365 100644
--- a/who.html
+++ b/who.html
@@ -364,9 +364,12 @@
     </div>
 
     <!-- Menu Toggle with Homepage/WHY structure -->
-    <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
+    <div
+      class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
+    >
       <div class="cursor-pointer" id="menuToggle">
-        <div class="relative inline-block" id="menuWrap">
+        <!-- Desktop view: menuWrap with waves and outline -->
+        <div class="relative inline-block hidden md:block" id="menuWrap">
           <div class="menu-waves" aria-hidden="true">
             <span class="wave"></span>
             <span class="wave"></span>
@@ -384,10 +387,32 @@
             <span class="w-1 h-1 bg-white"></span>
             <span class="w-1 h-1 bg-white"></span>
           </div>
-          <div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
+          <div
+            id="menuPetal"
+            class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
+          >
             <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
+        
+        <!-- Mobile view: simple transparent background -->
+        <div class="md:hidden">
+          <div
+            class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
+          >
+            <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -1476,6 +1501,24 @@
       /* Homepage-style menu outline and waves */
       #menuWrap { position: relative; overflow: visible; }
       .menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
+      
+      /* Hide menu outline on mobile */
+      @media (max-width: 768px) {
+        .menu-outline {
+          display: none !important;
+        }
+        
+        /* Create a proper button container for mobile */
+        #menuGrid {
+          background: rgba(255, 255, 255, 0.12) !important;
+          border-radius: 8px !important;
+          padding: 6px !important;
+          border: 1px solid rgba(255, 255, 255, 0.15) !important;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
+          backdrop-filter: blur(4px) !important;
+        }
+      }
+      
       .menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
       .menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
       .menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
@@ -1541,27 +1584,31 @@
         });
       });
 
-      // Menu toggle functionality (homepage pattern)
+      // Menu toggle functionality
       const menuToggle = document.getElementById("menuToggle");
       const navMenu = document.getElementById("navMenu");
-      const menuGrid = document.getElementById("menuGrid");
       const menuWrap = document.getElementById("menuWrap");
+      const menuGrid = document.getElementById("menuGrid");
+      const menuGridMobile = document.getElementById("menuGridMobile");
 
-      if (menuToggle && navMenu && menuGrid) {
+      if (menuToggle && navMenu) {
         let isMenuOpen = false;
 
         menuToggle.addEventListener("click", () => {
           if (isMenuOpen) {
+            // Close menu
             navMenu.classList.add("hidden");
             if (menuWrap) menuWrap.classList.remove("open");
             isMenuOpen = false;
           } else {
+            // Open menu
             navMenu.classList.remove("hidden");
             if (menuWrap) menuWrap.classList.add("open");
             isMenuOpen = true;
           }
         });
 
+        // Close menu when clicking outside
         document.addEventListener("click", (e) => {
           if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
             navMenu.classList.add("hidden");