Merge branch 'pr-480' into visual-pr-playground

static/landing.html

@@ -95,6 +95,50 @@
     color: #fff; border: none;
   }
   .btn.primary:hover { filter: brightness(1.07); }
+  .nav-links-hamburger {
+    display: none;
+    position: relative;
+  }
+  .hamburger-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--panel);
+    color: var(--fg);
+    cursor: pointer;
+  }
+  .hamburger-btn:hover {
+    border-color: var(--accent);
+  }
+  .hamburger-menu {
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    min-width: 220px;
+    display: none;
+    flex-direction: column;
+    padding: 12px;
+    background: rgba(17,17,17,0.98);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
+  }
+  .hamburger-menu a {
+    color: var(--muted);
+    padding: 8px 10px;
+    border-radius: 6px;
+  }
+  .hamburger-menu a:hover {
+    color: var(--fg);
+  }
+  .nav-links-hamburger.open .hamburger-menu {
+    display: flex;
+  }
 
   /* Hero */
   .hero { padding: 86px 0 40px; text-align: center; }
@@ -296,7 +340,8 @@
   @media (max-width: 820px) {
     .grid { grid-template-columns: repeat(2, 1fr); }
     .shotrow { grid-template-columns: 1fr; }
-    .nav-links a:not(.btn) { display: none; }
+    .nav-links { display: none; }
+    .nav-links-hamburger { display: block; }
   }
   @media (max-width: 520px) {
     .grid { grid-template-columns: 1fr; }
@@ -324,6 +369,28 @@
           GitHub
         </a>
       </div>
+
+      <div class="nav-links-hamburger">
+        <button class="hamburger-btn" aria-label="Open menu">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3.5,7 C3.22385763,7 3,6.77614237 3,6.5 C3,6.22385763 3.22385763,6 3.5,6 L20.5,6 C20.7761424,6 21,6.22385763 21,6.5 C21,6.77614237 20.7761424,7 20.5,7 L3.5,7 Z M3.5,12 C3.22385763,12 3,11.7761424 3,11.5 C3,11.2238576 3.22385763,11 3.5,11 L20.5,11 C20.7761424,11 21,11.2238576 21,11.5 C21,11.7761424 20.7761424,12 20.5,12 L3.5,12 Z M3.5,17 C3.22385763,17 3,16.7761424 3,16.5 C3,16.2238576 3.22385763,16 3.5,16 L20.5,16 C20.7761424,16 21,16.2238576 21,16.5 C21,16.7761424 20.7761424,17 20.5,17 L3.5,17 Z"/>
+          </svg>
+        </button>
+
+        <div class="hamburger-menu">
+          <a href="#features">Features</a>
+          <a href="#testimonials">Testimonials</a>
+          <a href="#how">How it started</a>
+          <a href="#start">Get started</a>
+
+          <a class="btn" href="https://github.com/pewdiepie-archdaemon/odysseus" target="_blank">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.2.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4.7 18.3 5 18.3 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .4.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"/>
+            </svg>
+            GitHub
+          </a>
+        </div>
+      </div>
     </div>
   </nav>
 
@@ -733,6 +800,24 @@
 
       show(0);
     })();
+
+
+    // Mobile navigation: open/close hamburger menu
+    (function () {
+      var container = document.querySelector('.nav-links-hamburger');
+      if (!container) return;
+
+      var button = container.querySelector('.hamburger-btn');
+
+      button.addEventListener('click', function (e) {
+        e.stopPropagation();
+        container.classList.toggle('open');
+      });
+
+      document.addEventListener('click', function () {
+        container.classList.remove('open');
+      });
+    })();
   </script>
 
 </body>