Menu fixes GP

Author: boopathirbk

docs/index.html

@@ -405,7 +405,7 @@ <h3>Boopathi R</h3>
         <div class="container">
             <div class="footer-grid">
                 <div class="footer-brand">
-                    <div class="logo"><i class="fas fa-cube" style="color: var(--geist-success);"
+                    <div class="logo"><i class="fas fa-cube" style="color: var(--geist-success-green);"
                             aria-hidden="true"></i> WBPG</div>
                     <p>The premium bulk content engine for WordPress creators. Open-source, accessible, and
                         high-performance.</p>

docs/style.css

@@ -18,7 +18,7 @@
 
     --geist-success: #0070f3;
     /* Primary Blue */
-    --geist-success-green: #00e074;
+    --geist-success-green: #00cc66;
     /* Standard Success Green */
     --geist-success-light: #3291ff;
     --geist-error: #ee0000;
@@ -28,6 +28,7 @@
 
     --link-color: var(--geist-success);
     --selection: var(--geist-cyan);
+    --background-rgb: 255, 255, 255;
 
     /* High-End Elevation */
     --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.02);
@@ -65,6 +66,7 @@
     --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.6);
     --shadow-lg: 0 40px 80px rgba(0, 0, 0, 0.8);
     --geist-success: #0070f3;
+    --background-rgb: 0, 0, 0;
 }
 
 /* Master Reset */
@@ -132,16 +134,24 @@ body::before {
 
 header {
     height: var(--header-height);
-    background: rgba(var(--background), 0.8);
-    backdrop-filter: blur(20px) saturate(180%);
+    background: var(--background);
+    /* Keep header solid on mobile for better stacking */
     border-bottom: 1px solid var(--accents-2);
     position: sticky;
     top: 0;
-    z-index: 1000;
+    z-index: 2000;
+    /* Higher than menu to keep toggle visible if needed */
     display: flex;
     align-items: center;
 }
 
+@media (min-width: 769px) {
+    header {
+        background: rgba(var(--background-rgb), 0.8);
+        backdrop-filter: blur(20px) saturate(180%);
+    }
+}
+
 .header-inner {
     width: 100%;
     display: flex;
@@ -153,7 +163,7 @@ header {
     font-family: var(--font-heading);
     font-weight: 800;
     font-size: 24px;
-    letter-spacing: -0.05em;
+    letter-spacing: -0.02em;
     color: var(--foreground);
     text-decoration: none;
     display: flex;
@@ -192,6 +202,8 @@ header {
     font-size: 14px;
     color: var(--accents-5);
     transition: color 0.2s ease;
+    white-space: nowrap;
+    /* Prevent nav links from wrapping on smaller desktops */
 }
 
 .nav-link:hover {
@@ -216,29 +228,33 @@ header {
     .nav-links {
         position: fixed;
         top: 0;
-        right: -100%;
+        right: 0;
         width: 100%;
         height: 100vh;
         background: var(--background);
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 40px;
-        transition: right 0.4s var(--ease), visibility 0.4s var(--ease);
-        z-index: 1000;
+        z-index: 3000;
+        /* Higher than header (2000) */
+        transform: translateX(100%);
+        transition: transform 0.4s var(--ease), visibility 0.4s var(--ease);
         visibility: hidden;
-        display: none;
-        /* Force hide to prevent overflow contribution */
+        padding: 40px;
+        pointer-events: none;
+        /* Disable interaction when hidden */
     }
 
     .nav-links.active {
-        right: 0;
+        transform: translateX(0);
         visibility: visible;
-        display: flex;
+        pointer-events: auto;
     }
 
     .nav-link {
-        font-size: 24px;
+        font-size: 28px;
+        font-weight: 700;
         color: var(--foreground);
     }
 }
@@ -391,7 +407,7 @@ header {
     font-family: var(--font-heading);
     font-size: clamp(38px, 10vw, 88px);
     font-weight: 900;
-    letter-spacing: -0.06em;
+    letter-spacing: -0.04em;
     line-height: 1;
     margin-bottom: 32px;
     background: linear-gradient(to bottom, var(--foreground) 60%, var(--accents-5));
@@ -428,7 +444,8 @@ header {
     font-weight: 800;
     letter-spacing: 0.15em;
     text-transform: uppercase;
-    color: var(--geist-success);
+    color: var(--geist-success-green);
+    /* Consistency with Masterpiece Green */
     margin-bottom: 24px;
     display: block;
 }
@@ -437,9 +454,9 @@ header {
     font-family: var(--font-heading);
     font-size: 48px;
     font-weight: 800;
-    letter-spacing: -0.05em;
+    letter-spacing: -0.02em;
     margin-bottom: 64px;
-    line-height: 1.1;
+    line-height: 1.2;
 }
 
 /* --- Comparison Logic (Pain Points) --- */
@@ -541,6 +558,8 @@ header {
     align-items: center;
     justify-content: center;
     border: 1px solid var(--accents-2);
+    overflow: hidden;
+    /* Ensure content stays inside */
 }
 
 .author-content h3 {