From 3f8d65ff07a929d806e7fc717ef54facd1634784 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 22 Jul 2025 03:08:06 +0000
Subject: [PATCH 1/2] Improve mobile navigation accessibility and responsive
 design

Co-authored-by: lucaswan348 <lucaswan348@gmail.com>
---
 index.html |  4 ++--
 script.js  |  6 +++++-
 styles.css | 30 +++++++++++++++++++++++++++---
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 03997c8..199bcd9 100644
--- a/index.html
+++ b/index.html
@@ -22,11 +22,11 @@
                 <li><a href="#pricing">Pricing</a></li>
                 <li><a href="#contact">Contact</a></li>
             </ul>
-            <div class="hamburger">
+            <button class="hamburger" aria-label="Toggle navigation" aria-expanded="false">
                 <span></span>
                 <span></span>
                 <span></span>
-            </div>
+            </button>
         </div>
     </nav>
 
diff --git a/script.js b/script.js
index ca66d56..f8b29e2 100644
--- a/script.js
+++ b/script.js
@@ -5,9 +5,11 @@ const navMenu = document.querySelector('.nav-menu');
 hamburger.addEventListener('click', () => {
     hamburger.classList.toggle('active');
     navMenu.classList.toggle('active');
+    const expanded = navMenu.classList.contains('active');
+    hamburger.setAttribute('aria-expanded', expanded);
     
     // Prevent body scroll when menu is open
-    if (navMenu.classList.contains('active')) {
+    if (expanded) {
         document.body.style.overflow = 'hidden';
     } else {
         document.body.style.overflow = '';
@@ -19,6 +21,7 @@ document.querySelectorAll('.nav-menu a').forEach(link => {
     link.addEventListener('click', () => {
         hamburger.classList.remove('active');
         navMenu.classList.remove('active');
+        hamburger.setAttribute('aria-expanded', 'false');
         document.body.style.overflow = '';
     });
 });
@@ -28,6 +31,7 @@ window.addEventListener('scroll', () => {
     if (navMenu.classList.contains('active')) {
         hamburger.classList.remove('active');
         navMenu.classList.remove('active');
+        hamburger.setAttribute('aria-expanded', 'false');
         document.body.style.overflow = '';
     }
 });
diff --git a/styles.css b/styles.css
index a338b2f..08dbb01 100644
--- a/styles.css
+++ b/styles.css
@@ -40,7 +40,8 @@ body {
     background: rgba(0, 0, 0, 0.95);
     backdrop-filter: blur(10px);
     z-index: 1000;
-    padding: 1.2rem 0;
+    height: var(--header-h); /* use the shared header height */
+    padding: calc(env(safe-area-inset-top) + 0.5rem) 0 0.5rem; /* safe-area + some breathing room */
     border-bottom: 1px solid #333;
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
 }
@@ -143,6 +144,8 @@ body {
     padding: 0.5rem;
     border-radius: 6px;
     transition: all 0.3s ease;
+    border: none;
+    background: transparent;
 }
 
 .hamburger:hover {
@@ -175,7 +178,7 @@ body {
     min-height: 100vh;
     display: flex;
     align-items: center;
-    padding-top: 80px;
+    padding-top: var(--header-h);
     background: #000000;
     position: relative;
 }
@@ -837,8 +840,29 @@ body {
 
 /* Responsive Design */
 @media (max-width: 768px) {
+    // Override the shared header height for small screens
+    :root {
+        --header-h: 60px;
+    }
+
+    /* compact horizontal logo */
+    .nav-logo {
+        flex-direction: row;
+        align-items: center;
+        gap: .5rem;
+    }
+
+    /* tighten flex spacing to avoid horizontal overflow */
+    .nav-container {
+        gap: 0;
+    }
     .hamburger {
-        display: flex;
+        margin-left: auto;
+    }
+
+    /* make sure the slide-down menu sits just below the shorter bar */
+    .nav-menu.active {
+        top: var(--header-h);
     }
     
     .nav-menu {

From acde8b6825f42d4ba88f408f3af4f5bfbda405d9 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 22 Jul 2025 03:15:37 +0000
Subject: [PATCH 2/2] Add CSS variable for header height with responsive
 breakpoint

Co-authored-by: lucaswan348 <lucaswan348@gmail.com>
---
 styles.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index 08dbb01..34f7fae 100644
--- a/styles.css
+++ b/styles.css
@@ -5,6 +5,10 @@
     box-sizing: border-box;
 }
 
+:root {
+    --header-h: 80px; /* Default header height for desktop and larger screens */
+}
+
 html, body {
     width: 100%;
     overflow-x: hidden;
@@ -840,7 +844,7 @@ body {
 
 /* Responsive Design */
 @media (max-width: 768px) {
-    // Override the shared header height for small screens
+    /* Override the shared header height for small screens */
     :root {
         --header-h: 60px;
     }