From fb7b510ee3170b3729f0a56adf6785a1ef8965eb Mon Sep 17 00:00:00 2001
From: Myron Blair <myronblair@outlook.com>
Date: Fri, 22 May 2026 13:43:18 +0000
Subject: [PATCH] Add mobile hamburger nav with animated drawer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hamburger button appears on screens ≤768px. Tapping opens a full-screen
drawer with all nav links + Book Now CTA. Closes on link tap, Escape key,
or toggling the button. Body scroll locks while drawer is open.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 119 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 118 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 9b903a6..cb8209b 100644
--- a/index.html
+++ b/index.html
@@ -420,9 +420,90 @@
     .footer-links a { color: rgba(255,255,255,0.4); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
     .footer-links a:hover { color: var(--orange); }
 
-    /* RESPONSIVE NAV */
+    /* HAMBURGER / MOBILE NAV */
+    .nav-hamburger {
+      display: none;
+      flex-direction: column;
+      gap: 5px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 6px;
+      border-radius: 6px;
+      transition: background 0.2s;
+      z-index: 101;
+    }
+    .nav-hamburger:hover { background: rgba(255,255,255,0.07); }
+    .nav-hamburger span {
+      display: block;
+      width: 24px;
+      height: 2px;
+      background: white;
+      border-radius: 2px;
+      transition: transform 0.25s, opacity 0.25s;
+      transform-origin: center;
+    }
+    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+    .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
+    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
+    .nav-drawer {
+      display: none;
+      position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      z-index: 99;
+      flex-direction: column;
+      padding-top: 72px;
+      background: rgba(13,13,13,0.97);
+      backdrop-filter: blur(12px);
+      animation: drawerIn 0.22s ease;
+    }
+    @keyframes drawerIn {
+      from { opacity: 0; transform: translateY(-8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .nav-drawer.open { display: flex; }
+    .nav-drawer ul {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      padding: 1.5rem 2rem;
+      gap: 0;
+      flex: 1;
+    }
+    .nav-drawer ul li a {
+      display: block;
+      padding: 1rem 0;
+      color: rgba(255,255,255,0.85);
+      text-decoration: none;
+      font-size: 1.25rem;
+      font-weight: 600;
+      border-bottom: 1px solid rgba(255,255,255,0.07);
+      transition: color 0.2s;
+    }
+    .nav-drawer ul li:last-child a { border-bottom: none; }
+    .nav-drawer ul li a:hover { color: var(--orange); }
+    .nav-drawer .drawer-cta {
+      margin: 1rem 2rem 2.5rem;
+    }
+    .nav-drawer .drawer-cta a {
+      display: block;
+      text-align: center;
+      background: var(--orange);
+      color: white;
+      padding: 1rem;
+      border-radius: 8px;
+      font-weight: 700;
+      font-size: 1.1rem;
+      text-decoration: none;
+      transition: background 0.2s;
+    }
+    .nav-drawer .drawer-cta a:hover { background: var(--orange-dark); }
+
     @media (max-width: 768px) {
       .nav-links { display: none; }
+      .nav-cta   { display: none; }
+      .nav-hamburger { display: flex; }
     }
   </style>
 </head>
@@ -439,8 +520,24 @@
       <li><a href="#faq">FAQ</a></li>
     </ul>
     <a href="#contact" class="nav-cta">Book Now</a>
+    <button class="nav-hamburger" id="navToggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="navDrawer">
+      <span></span><span></span><span></span>
+    </button>
   </nav>
 
+  <!-- Mobile Drawer -->
+  <div class="nav-drawer" id="navDrawer" role="dialog" aria-label="Mobile navigation">
+    <ul>
+      <li><a href="#why">Why Us</a></li>
+      <li><a href="#pricing">Pricing</a></li>
+      <li><a href="#how">How It Works</a></li>
+      <li><a href="#routes">Routes</a></li>
+      <li><a href="#faq">FAQ</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+    <div class="drawer-cta"><a href="#contact">Book Now</a></div>
+  </div>
+
   <!-- Hero -->
   <header class="hero" role="banner">
     <div style="position:relative;z-index:1;">
@@ -733,6 +830,26 @@
   </footer>
 
   <script>
+    // ── Mobile nav ───────────────────────────────────────────────────────────────
+    const navToggle = document.getElementById('navToggle');
+    const navDrawer = document.getElementById('navDrawer');
+    function closeDrawer() {
+      navToggle.classList.remove('open');
+      navDrawer.classList.remove('open');
+      navToggle.setAttribute('aria-expanded', 'false');
+      document.body.style.overflow = '';
+    }
+    navToggle.addEventListener('click', () => {
+      const isOpen = navDrawer.classList.toggle('open');
+      navToggle.classList.toggle('open', isOpen);
+      navToggle.setAttribute('aria-expanded', String(isOpen));
+      document.body.style.overflow = isOpen ? 'hidden' : '';
+    });
+    // Close on any link click inside drawer
+    navDrawer.querySelectorAll('a').forEach(a => a.addEventListener('click', closeDrawer));
+    // Close on Escape key
+    document.addEventListener('keydown', e => { if (e.key === 'Escape') closeDrawer(); });
+
     // ── Availability Calendar ────────────────────────────────────────────────────
     const dateInput  = document.querySelector('input[type="date"]');
     const calGrid    = document.getElementById('calGrid');