From 037cfc29e60f5d466702cd0a3dd32d11cb6d9d82 Mon Sep 17 00:00:00 2001
From: Austin Pickett <pickett.austin@gmail.com>
Date: Wed, 11 Mar 2026 15:48:03 -0400
Subject: [PATCH] fix: mobile

---
 landingpage/index.html | 18 ++++-------------
 landingpage/script.js  |  1 +
 landingpage/style.css  | 46 ++++++++++++++++++++++++++++++------------
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/landingpage/index.html b/landingpage/index.html
index 705a7a92a..e24ed11c4 100644
--- a/landingpage/index.html
+++ b/landingpage/index.html
@@ -72,23 +72,13 @@
         </div>
         <button
           class="nav-hamburger"
+          id="nav-hamburger"
           onclick="toggleMobileNav()"
           aria-label="Toggle menu"
         >
-          <svg
-            width="22"
-            height="22"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <line x1="3" y1="6" x2="21" y2="6" />
-            <line x1="3" y1="12" x2="21" y2="12" />
-            <line x1="3" y1="18" x2="21" y2="18" />
-          </svg>
+          <span class="hamburger-bar"></span>
+          <span class="hamburger-bar"></span>
+          <span class="hamburger-bar"></span>
         </button>
         <div class="nav-mobile" id="nav-mobile">
           <a href="#install" onclick="toggleMobileNav()">Install</a>
diff --git a/landingpage/script.js b/landingpage/script.js
index 038faddad..4cd097bdb 100644
--- a/landingpage/script.js
+++ b/landingpage/script.js
@@ -60,6 +60,7 @@ function switchStepPlatform(platform) {
 
 function toggleMobileNav() {
   document.getElementById("nav-mobile").classList.toggle("open");
+  document.getElementById("nav-hamburger").classList.toggle("open");
 }
 
 function toggleSpecs() {
diff --git a/landingpage/style.css b/landingpage/style.css
index 27ae21a92..30334df0d 100644
--- a/landingpage/style.css
+++ b/landingpage/style.css
@@ -199,9 +199,35 @@ strong {
     display: none;
     background: none;
     border: none;
-    color: var(--text-dim);
     cursor: pointer;
-    padding: 4px;
+    padding: 6px;
+    width: 34px;
+    height: 34px;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+}
+
+.hamburger-bar {
+    display: block;
+    width: 20px;
+    height: 2px;
+    background: var(--text-dim);
+    border-radius: 1px;
+    transition: transform 0.25s var(--ease-out-quint), opacity 0.2s var(--ease-out-quad);
+    transform-origin: center;
+}
+
+.nav-hamburger.open .hamburger-bar:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+}
+
+.nav-hamburger.open .hamburger-bar:nth-child(2) {
+    opacity: 0;
+}
+
+.nav-hamburger.open .hamburger-bar:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
 }
 
 .nav-mobile {
@@ -592,6 +618,8 @@ strong {
     color: var(--primary-light);
     opacity: 0.85;
     flex-shrink: 0;
+    display: flex;
+    line-height: 0;
 }
 
 .feature-card h3 {
@@ -969,7 +997,7 @@ strong {
     }
 
     .nav-hamburger {
-        display: block;
+        display: flex;
     }
 
     /* --- Hero --- */
@@ -1063,20 +1091,12 @@ strong {
     }
 
     .feature-card {
-        padding: 20px 18px;
-    }
-
-    .feature-icon {
-        font-size: 24px;
-        margin-bottom: 12px;
-    }
-
-    .feature-card h3 {
-        font-size: 15px;
+        padding: 16px 18px;
     }
 
     .feature-card p {
         font-size: 13px;
+        line-height: 1.5;
     }
 
     /* --- Terminal demo --- */