feat: landing page, menu tabs + brunch, events calendar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

events.html

@@ -19,47 +19,131 @@
   ==================================================== -->
   <script id="events-data" type="application/json">
   [
-    {
-      "name": "Jazz & Rye Night",
-      "date": "2026-03-20",
-      "time": "8 PM – 11 PM",
-      "description": "Local jazz quartet The Meridian Collective takes the stage. Featuring our curated rye whiskey flight and complimentary bar bites from 8–9 PM.",
-      "tag": "Live Music"
-    },
-    {
-      "name": "Mezcal Tasting Masterclass",
-      "date": "2026-03-27",
-      "time": "7 PM – 9 PM",
-      "description": "Guided tasting with four premium single-village mezcals. Led by award-winning spirits educator Ramona Vásquez. Tickets include a welcome cocktail.",
-      "tag": "Tasting"
-    },
-    {
-      "name": "Vinyl Sessions Vol. 12",
-      "date": "2026-04-03",
-      "time": "9 PM – 1 AM",
-      "description": "DJ Harlow spins rare soul, funk, and neo-jazz on a vintage turntable setup. No cover charge. Cocktail specials all night.",
-      "tag": "DJ Night"
-    },
-    {
-      "name": "Chef's Table Pairing Dinner",
-      "date": "2026-04-10",
-      "time": "7 PM – 10 PM",
-      "description": "A five-course tasting menu crafted by our head chef, each course paired with a cocktail from our bar team. Seats are very limited — reserve in advance.",
-      "tag": "Dinner Event"
-    },
     {
       "name": "Trivia Night",
-      "date": "2026-04-17",
+      "date": "2026-03-17",
       "time": "8 PM – 10 PM",
-      "description": "Monthly trivia with prizes including bar tabs, bottles, and Axis merchandise. Teams of up to 6. Arrive early to secure a table.",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
       "tag": "Social"
     },
     {
-      "name": "Whiskey & Smoke",
+      "name": "Live Music",
+      "date": "2026-03-20",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-03-24",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-03-27",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-03-30",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-03-31",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-03",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-04-07",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Board Games & Chess Night",
+      "date": "2026-04-09",
+      "time": "7 PM",
+      "description": "The 2nd Thursday of every month. Bring your A-game. Classic board games, chess sets, and cold drinks. All skill levels welcome.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-10",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-04-14",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-17",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-20",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-04-21",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
       "date": "2026-04-24",
-      "time": "7 PM – 9 PM",
+      "time": "9 PM",
-      "description": "An evening dedicated to peated Scotch and Islay whiskies. Flight of five drams, paired with smoked charcuterie. Led by our resident whiskey sommelier.",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
-      "tag": "Tasting"
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-04-28",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-27",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Board Games & Chess Night",
+      "date": "2026-05-14",
+      "time": "7 PM",
+      "description": "The 2nd Thursday of every month. Bring your A-game. Classic board games, chess sets, and cold drinks. All skill levels welcome.",
+      "tag": "Social"
     }
   ]
   </script>
@@ -71,7 +155,8 @@
       <span></span><span></span><span></span>
     </button>
     <ul class="navbar__links" id="nav-links">
-      <li><a href="index.html">Menu</a></li>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="menu.html">Menu</a></li>
       <li><a href="events.html" class="active">Events</a></li>
     </ul>
   </nav>
@@ -80,9 +165,14 @@
   <header class="page-hero">
     <p class="page-hero__eyebrow">What's On</p>
     <h1 class="page-hero__title">Upcoming Events</h1>
-    <p class="page-hero__sub">Live music &middot; Tastings &middot; Special nights</p>
+    <p class="page-hero__sub">Live music &middot; Trivia &middot; Board games &middot; Special nights</p>
   </header>
 
+  <!-- ===== Calendar Widget ===== -->
+  <div class="container">
+    <div class="cal-widget" id="cal-widget"></div>
+  </div>
+
   <!-- ===== Main Content ===== -->
   <main>
     <div class="container">
@@ -94,7 +184,7 @@
 
   <!-- ===== Footer ===== -->
   <footer>
-    <p><span>Axis</span> &mdash; Open Tue–Sun, 5pm–2am &mdash; 44 Commerce St</p>
+    <p><span>Axis</span> &mdash; 3048 Dundas Street West &mdash; Open Tue–Sun 5pm–2am &mdash; Brunch Thu–Sun 9am–3pm</p>
     <p style="margin-top:0.4rem;">Events subject to change. Follow us for updates.</p>
   </footer>
 
@@ -104,6 +194,108 @@
       document.getElementById('nav-links').classList.toggle('open');
     }
 
+    /* ---- Calendar Widget ---- */
+    (function () {
+      const calEl = document.getElementById('cal-widget');
+      const MONTH_NAMES = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+      const today = new Date();
+      let viewYear = today.getFullYear();
+      let viewMonth = today.getMonth();
+
+      function is2ndThursday(y, m, d) {
+        if (new Date(y, m, d).getDay() !== 4) return false;
+        let count = 0;
+        for (let i = 1; i <= d; i++) {
+          if (new Date(y, m, i).getDay() === 4) count++;
+        }
+        return count === 2;
+      }
+
+      function getDots(y, m, d) {
+        const dow = new Date(y, m, d).getDay();
+        const dots = [];
+        if (dow === 2) dots.push({ color: 'var(--gold)', label: 'Trivia Night' });
+        if (dow === 1 || dow === 5) dots.push({ color: '#e07020', label: 'Live Music' });
+        if (is2ndThursday(y, m, d)) dots.push({ color: '#8844cc', label: 'Board Games & Chess Night' });
+        return dots;
+      }
+
+      function isBrunchDay(dow) {
+        // Thu=4, Fri=5, Sat=6, Sun=0
+        return dow === 0 || dow === 4 || dow === 5 || dow === 6;
+      }
+
+      function render() {
+        const firstDow = new Date(viewYear, viewMonth, 1).getDay();
+        const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+
+        let html = '<div class="cal-header">';
+        html += '<button class="cal-nav-btn" id="cal-prev">&#8249;</button>';
+        html += '<span class="cal-month-label">' + MONTH_NAMES[viewMonth] + ' ' + viewYear + '</span>';
+        html += '<button class="cal-nav-btn" id="cal-next">&#8250;</button>';
+        html += '</div>';
+
+        html += '<div class="cal-grid">';
+        // Day-of-week headers
+        ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].forEach(function (d) {
+          html += '<div class="cal-dow-header">' + d + '</div>';
+        });
+
+        // Empty leading cells
+        for (let i = 0; i < firstDow; i++) {
+          html += '<div class="cal-cell cal-cell--empty"></div>';
+        }
+
+        // Day cells
+        for (let d = 1; d <= daysInMonth; d++) {
+          const dow = new Date(viewYear, viewMonth, d).getDay();
+          const isToday = (today.getFullYear() === viewYear && today.getMonth() === viewMonth && today.getDate() === d);
+          const brunch = isBrunchDay(dow);
+          const dots = getDots(viewYear, viewMonth, d);
+
+          let cls = 'cal-cell';
+          if (brunch) cls += ' cal-cell--brunch';
+          if (isToday) cls += ' cal-cell--today';
+
+          html += '<div class="' + cls + '">';
+          html += '<span class="cal-day-num">' + d + '</span>';
+          if (dots.length > 0) {
+            html += '<div class="cal-dots">';
+            dots.forEach(function (dot) {
+              html += '<span class="cal-dot" style="background:' + dot.color + '" title="' + dot.label + '"></span>';
+            });
+            html += '</div>';
+          }
+          html += '</div>';
+        }
+
+        html += '</div>'; // .cal-grid
+
+        // Legend
+        html += '<div class="cal-legend">';
+        html += '<span class="cal-legend-item"><span class="cal-dot" style="background:var(--gold)"></span> Trivia Night (Tue)</span>';
+        html += '<span class="cal-legend-item"><span class="cal-dot" style="background:#e07020"></span> Live Music (Mon &amp; Fri)</span>';
+        html += '<span class="cal-legend-item"><span class="cal-dot" style="background:#8844cc"></span> Board Games &amp; Chess (2nd Thu)</span>';
+        html += '<span class="cal-legend-item"><span class="cal-legend-brunch-swatch"></span> Brunch hours (Thu–Sun)</span>';
+        html += '</div>';
+
+        calEl.innerHTML = html;
+
+        document.getElementById('cal-prev').addEventListener('click', function () {
+          viewMonth--;
+          if (viewMonth < 0) { viewMonth = 11; viewYear--; }
+          render();
+        });
+        document.getElementById('cal-next').addEventListener('click', function () {
+          viewMonth++;
+          if (viewMonth > 11) { viewMonth = 0; viewYear++; }
+          render();
+        });
+      }
+
+      render();
+    })();
+
     /* ---- Render events ---- */
     (function () {
       const DAYS   = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
@@ -118,15 +310,12 @@
         return;
       }
 
-      // Sort by date ascending
       events.sort((a, b) => new Date(a.date) - new Date(b.date));
 
-      // Only show today and future events
       const today = new Date();
       today.setHours(0, 0, 0, 0);
 
       const upcoming = events.filter(e => {
-        // Parse date as local to avoid UTC-offset surprises
         const [y, m, d] = e.date.split('-').map(Number);
         const dt = new Date(y, m - 1, d);
         return dt >= today;

index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Axis — Menu</title>
+  <title>Axis — Junction's Oldest Bar</title>
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
@@ -15,392 +15,124 @@
       <span></span><span></span><span></span>
     </button>
     <ul class="navbar__links" id="nav-links">
-      <li><a href="index.html" class="active">Menu</a></li>
+      <li><a href="index.html" class="active">Home</a></li>
+      <li><a href="menu.html">Menu</a></li>
       <li><a href="events.html">Events</a></li>
     </ul>
   </nav>
 
   <!-- ===== Hero ===== -->
-  <header class="page-hero">
+  <section class="landing-hero">
-    <p class="page-hero__eyebrow">Est. 2018 &mdash; Downtown</p>
+    <div class="landing-hero__overlay"></div>
-    <h1 class="page-hero__title">Our Menu</h1>
+    <div class="landing-hero__content">
-    <p class="page-hero__sub">Handcrafted cocktails &middot; Curated spirits &middot; Small plates</p>
+      <h1 class="landing-hero__title">AXIS</h1>
-  </header>
+      <p class="landing-hero__subtitle">Junction's Oldest Bar</p>
+      <p class="landing-hero__address">3048 Dundas Street West</p>
+      <div class="landing-hero__ctas">
+        <a href="menu.html" class="btn btn--gold">View Menu</a>
+        <a href="events.html" class="btn btn--outline">Upcoming Events</a>
+      </div>
+    </div>
+  </section>
 
-  <!-- ===== Main Content ===== -->
+  <!-- ===== About ===== -->
-  <main>
+  <section class="about-section">
+    <div class="container about-section__inner">
+      <div class="about-section__text">
+        <p class="section-eyebrow">Est. 1987</p>
+        <h2 class="section-heading">A Junction Institution</h2>
+        <p>Axis has been pouring pints and pulling neighbours together since 1987. Tucked along Dundas Street West, we've watched the Junction transform around us — but our commitment to a cold beer, a warm welcome, and a no-fuss good time has never changed.</p>
+        <p>Over three decades, we've become the spot where regulars have a stool with their name on it, where strangers become friends over a round of trivia, and where live music on a Monday night can turn an ordinary week around. We're not trendy. We're better than that — we're yours.</p>
+        <p>Whether you're stopping in for a quiet pint after work, settling in for brunch with friends on a Sunday morning, or catching a band on a Friday night, Axis is the kind of bar that feels like it was made for you specifically. Because, in a way, it was.</p>
+        <div class="about-section__hours">
+          <div class="about-section__hours-block">
+            <strong>Bar Hours</strong>
+            <p>Tuesday–Sunday &middot; 5pm–2am</p>
+          </div>
+          <div class="about-section__hours-block">
+            <strong>Brunch</strong>
+            <p>Thursday–Sunday &middot; 9am–3pm</p>
+          </div>
+        </div>
+        <p class="about-section__addr">3048 Dundas Street West, Toronto</p>
+      </div>
+      <div class="about-section__image">
+        <img
+          src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80&auto=format&fit=crop"
+          alt="Axis bar interior"
+          loading="lazy"
+        />
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== What's On ===== -->
+  <section class="whats-on-section">
     <div class="container">
+      <h2 class="section-heading section-heading--center">What's On</h2>
+      <div class="poster-grid">
 
-      <!-- ============ DRINKS ============ -->
+        <div class="poster-card">
-      <section class="menu-section" id="drinks">
+          <div class="poster-card__icon">&#9670;</div>
-        <h2 class="section-title">Drinks</h2>
+          <div class="poster-card__tag">Weekly</div>
-
+          <h3 class="poster-card__name">Trivia Night</h3>
-        <!-- Cocktails -->
+          <p class="poster-card__when">Every Tuesday &middot; 8pm</p>
-        <p class="section-subtitle">Cocktails</p>
+          <p class="poster-card__desc">Teams of up to 6. Prizes include bar tabs and Axis swag. Arrive early to grab a table.</p>
-        <div class="menu-grid">
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Caesar</div>
-              <div class="menu-item__desc">2oz vodka</div>
-            </div>
-            <div class="menu-item__price">$13</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Margarita</div>
-              <div class="menu-item__desc">2oz tequila, 1/2oz triple sec</div>
-            </div>
-            <div class="menu-item__price">$14</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Long Island Iced Tea</div>
-              <div class="menu-item__desc">2oz LIIT mix</div>
-            </div>
-            <div class="menu-item__price">$13</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Mimosa</div>
-              <div class="menu-item__desc">2.5oz champagne</div>
-            </div>
-            <div class="menu-item__price">$9</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Old Fashioned</div>
-              <div class="menu-item__desc">2oz whiskey</div>
-            </div>
-            <div class="menu-item__price">$13</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Screwdriver</div>
-              <div class="menu-item__desc">2oz vodka</div>
-            </div>
-            <div class="menu-item__price">$13</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Martini</div>
-              <div class="menu-item__desc">2oz vodka or gin, 1/2oz dry vermouth</div>
-            </div>
-            <div class="menu-item__price">$14</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Cosmopolitan</div>
-              <div class="menu-item__desc">2oz vodka</div>
-            </div>
-            <div class="menu-item__price">$13</div>
-          </div>
         </div>
 
-        <!-- Sangria -->
+        <div class="poster-card">
-        <p class="section-subtitle">Sangria</p>
+          <div class="poster-card__icon">&#9836;</div>
-        <div class="menu-grid">
+          <div class="poster-card__tag">Recurring</div>
-          <div class="menu-item">
+          <h3 class="poster-card__name">Live Music</h3>
-            <div class="menu-item__info">
+          <p class="poster-card__when">Every Monday &amp; Friday &middot; 9pm</p>
-              <div class="menu-item__name">Glass Sangria</div>
+          <p class="poster-card__desc">Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.</p>
-              <div class="menu-item__desc">Red or white &mdash; 3oz wine, 1oz rum</div>
-            </div>
-            <div class="menu-item__price">$15</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Pitcher Sangria</div>
-              <div class="menu-item__desc">Red or white &mdash; 9oz wine, 2oz rum</div>
-            </div>
-            <div class="menu-item__price">$27</div>
-          </div>
         </div>
 
-        <!-- Wine -->
+        <div class="poster-card">
-        <p class="section-subtitle">Wine <small style="font-weight:normal;font-size:0.75rem;">(6oz / 9oz / &frac12; litre / bottle)</small></p>
+          <div class="poster-card__icon">&#9823;</div>
-        <div class="menu-grid">
+          <div class="poster-card__tag">Monthly</div>
-          <div class="menu-item">
+          <h3 class="poster-card__name">Board Games &amp; Chess Night</h3>
-            <div class="menu-item__info">
+          <p class="poster-card__when">2nd Thursday of the month &middot; 7pm</p>
-              <div class="menu-item__name">House Red / White</div>
+          <p class="poster-card__desc">Bring your A-game. Classic board games, chess sets, and cold drinks. All skill levels welcome.</p>
-            </div>
-            <div class="menu-item__price">$9 / $13 / $24 / $30</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Other Red / White</div>
-            </div>
-            <div class="menu-item__price">$11 / $15 / $26 / $34</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Prosecco</div>
-            </div>
-            <div class="menu-item__price">$11 / $35</div>
-          </div>
         </div>
 
-        <!-- Draught Beer -->
-        <p class="section-subtitle">Draught Beer <small style="font-weight:normal;font-size:0.75rem;">(pint / pitcher)</small></p>
-        <div class="menu-grid">
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Stella Artois</div></div>
-            <div class="menu-item__price">$10 / $28</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Alexander Keith's</div></div>
-            <div class="menu-item__price">$8 / $24</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Juicy AF IPA</div></div>
-            <div class="menu-item__price">$9 / $24</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Space Invaders IPA</div></div>
-            <div class="menu-item__price">$9 / $24</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Amsterdam Blonde</div></div>
-            <div class="menu-item__price">$9 / $24</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Steam Whistle</div></div>
-            <div class="menu-item__price">$8 / $23</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Moosehead</div></div>
-            <div class="menu-item__price">$8 / $23</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Beau's Lug Tread</div></div>
-            <div class="menu-item__price">$8 / $23</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">High Park Ale</div></div>
-            <div class="menu-item__price">$8 / $23</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">High Park Lager</div></div>
-            <div class="menu-item__price">$8 / $23</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Guinness</div></div>
-            <div class="menu-item__price">$10 / $28</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Cider</div></div>
-            <div class="menu-item__price">$10 / $28</div>
-          </div>
-        </div>
-
-        <!-- Cans -->
-        <p class="section-subtitle">Cans</p>
-        <div class="menu-grid">
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Moosehead</div><div class="menu-item__desc">473ml</div></div>
-            <div class="menu-item__price">$7</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Sapporo</div><div class="menu-item__desc">500ml</div></div>
-            <div class="menu-item__price">$8</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Tuborg</div><div class="menu-item__desc">473ml</div></div>
-            <div class="menu-item__price">$8</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">3 Speed Tall Can</div><div class="menu-item__desc">568ml</div></div>
-            <div class="menu-item__price">$8</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Brickworks Cider</div><div class="menu-item__desc">473ml</div></div>
-            <div class="menu-item__price">$8</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Stiegl</div><div class="menu-item__desc">500ml</div></div>
-            <div class="menu-item__price">$8</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">White Claw</div><div class="menu-item__desc">473ml</div></div>
-            <div class="menu-item__price">$5</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Stiegl Radler</div><div class="menu-item__desc">500ml</div></div>
-            <div class="menu-item__price">$9</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">PBR</div><div class="menu-item__desc">473ml</div></div>
-            <div class="menu-item__price">$6</div>
-          </div>
-        </div>
-
-        <!-- Bottles -->
-        <p class="section-subtitle">Bottles</p>
-        <div class="menu-grid">
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Budweiser, Canadian, Coors Light, or Labatt Blue</div>
-              <div class="menu-item__desc">341ml</div>
-            </div>
-            <div class="menu-item__price">$6</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">MGD</div>
-              <div class="menu-item__desc">341ml&ndash;355ml</div>
-            </div>
-            <div class="menu-item__price">$6</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Smirnoff Ice, Stella, Heineken, or Corona</div>
-              <div class="menu-item__desc">330ml</div>
-            </div>
-            <div class="menu-item__price">$8</div>
-          </div>
-        </div>
-
-        <!-- Non-Alcoholic -->
-        <p class="section-subtitle">Non-Alcoholic</p>
-        <div class="menu-grid">
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Red Bull</div></div>
-            <div class="menu-item__price">$5</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">Perrier</div></div>
-            <div class="menu-item__price">$4</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">0% Guinness</div></div>
-            <div class="menu-item__price">$6</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info"><div class="menu-item__name">0% Beer</div></div>
-            <div class="menu-item__price">$5</div>
-          </div>
-        </div>
-
-      </section>
-
-      <hr class="divider" />
-
-      <!-- ============ FOOD ============ -->
-      <section class="menu-section" id="food">
-        <h2 class="section-title">Food</h2>
-
-        <!-- Small Plates -->
-        <p class="section-subtitle">Small Plates &amp; Shareables</p>
-        <div class="menu-grid">
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Truffle Fries</div>
-              <div class="menu-item__desc">Hand-cut fries, black truffle oil, parmesan, fresh thyme, aioli</div>
-            </div>
-            <div class="menu-item__price">$14</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Charcuterie Board</div>
-              <div class="menu-item__desc">Cured meats, aged cheeses, cornichons, grainy mustard, crostini</div>
-            </div>
-            <div class="menu-item__price">$22</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Spiced Lamb Skewers</div>
-              <div class="menu-item__desc">Harissa-marinated lamb, tzatziki, sumac onions, grilled pita</div>
-            </div>
-            <div class="menu-item__price">$18</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Burrata &amp; Heirloom Tomato</div>
-              <div class="menu-item__desc">Creamy burrata, heirloom tomatoes, basil oil, fleur de sel, balsamic</div>
-            </div>
-            <div class="menu-item__price">$16</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Crispy Calamari</div>
-              <div class="menu-item__desc">Lightly breaded, served with lemon aioli & smoked paprika dipping sauce</div>
-            </div>
-            <div class="menu-item__price">$15</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Korean BBQ Wings</div>
-              <div class="menu-item__desc">Gochujang glaze, sesame, scallions, pickled daikon — 8 wings</div>
-            </div>
-            <div class="menu-item__price">$17</div>
-          </div>
-        </div>
-
-        <!-- Mains -->
-        <p class="section-subtitle">Mains</p>
-        <div class="menu-grid">
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Axis Burger</div>
-              <div class="menu-item__desc">Double smash patty, aged cheddar, caramelized onion, house sauce, brioche</div>
-            </div>
-            <div class="menu-item__price">$20</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Pan-Seared Salmon</div>
-              <div class="menu-item__desc">Miso-glazed salmon, jasmine rice, bok choy, yuzu beurre blanc</div>
-            </div>
-            <div class="menu-item__price">$28</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Steak Frites</div>
-              <div class="menu-item__desc">8 oz hanger steak, chimichurri, pomme frites, watercress salad</div>
-            </div>
-            <div class="menu-item__price">$34</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Wild Mushroom Risotto</div>
-              <div class="menu-item__desc">Porcini &amp; cremini, aged parmesan, truffle oil, crispy sage (v)</div>
-            </div>
-            <div class="menu-item__price">$24</div>
-          </div>
-        </div>
-
-        <!-- Desserts -->
-        <p class="section-subtitle">Desserts</p>
-        <div class="menu-grid">
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Chocolate Lava Cake</div>
-              <div class="menu-item__desc">Warm dark chocolate, vanilla bean ice cream, gold dust</div>
-            </div>
-            <div class="menu-item__price">$12</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Crème Brûlée</div>
-              <div class="menu-item__desc">Classic vanilla custard, caramelized sugar crust, fresh berries</div>
-            </div>
-            <div class="menu-item__price">$11</div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item__info">
-              <div class="menu-item__name">Affogato</div>
-              <div class="menu-item__desc">Double espresso over vanilla gelato, optional Frangelico shot</div>
-            </div>
-            <div class="menu-item__price">$10</div>
       </div>
+      <p class="whats-on-link"><a href="events.html">See full calendar &rarr;</a></p>
     </div>
   </section>
 
+  <!-- ===== Promotions ===== -->
+  <section class="promos-section">
+    <div class="container">
+      <h2 class="section-heading section-heading--center">Specials</h2>
+      <div class="promo-grid">
+
+        <div class="promo-card">
+          <h3 class="promo-card__title">Happy Hour</h3>
+          <p class="promo-card__when">Tuesday–Friday &middot; 5pm–7pm</p>
+          <p class="promo-card__desc">$2 off all draught pints. Kick off your evening right.</p>
         </div>
-  </main>
+
+        <div class="promo-card">
+          <h3 class="promo-card__title">Weekend Brunch</h3>
+          <p class="promo-card__when">Thursday–Sunday &middot; 9am–3pm</p>
+          <p class="promo-card__desc">Eggs benny, poutine, french toast, and mimosas. The only brunch you need.</p>
+        </div>
+
+        <div class="promo-card">
+          <h3 class="promo-card__title">Live Music</h3>
+          <p class="promo-card__when">Every Monday &amp; Friday from 9pm</p>
+          <p class="promo-card__desc">No cover charge. Just great music and a full bar. Every week.</p>
+        </div>
+
+      </div>
+    </div>
+  </section>
 
   <!-- ===== Footer ===== -->
   <footer>
-    <p><span>Axis</span> &mdash; Open Tue–Sun, 5pm–2am &mdash; 44 Commerce St</p>
+    <p><span>Axis</span> &mdash; 3048 Dundas Street West &mdash; Open Tue–Sun 5pm–2am &mdash; Brunch Thu–Sun 9am–3pm</p>
-    <p style="margin-top:0.4rem;">Please drink responsibly. Must be 21+ to consume alcohol.</p>
+    <p style="margin-top:0.4rem;">Please drink responsibly. Must be of legal drinking age.</p>
   </footer>
 
   <script>

menu.html

@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Axis — Menu</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+  <!-- ===== Navbar ===== -->
+  <nav class="navbar">
+    <a href="index.html" class="navbar__brand">Axis</a>
+    <button class="navbar__toggle" aria-label="Toggle menu" onclick="toggleNav()">
+      <span></span><span></span><span></span>
+    </button>
+    <ul class="navbar__links" id="nav-links">
+      <li><a href="index.html">Home</a></li>
+      <li><a href="menu.html" class="active">Menu</a></li>
+      <li><a href="events.html">Events</a></li>
+    </ul>
+  </nav>
+
+  <!-- ===== Hero ===== -->
+  <header class="page-hero">
+    <p class="page-hero__eyebrow">3048 Dundas Street West</p>
+    <h1 class="page-hero__title">Our Menu</h1>
+    <p class="page-hero__sub">Handcrafted cocktails &middot; Curated spirits &middot; Small plates &middot; Brunch</p>
+  </header>
+
+  <!-- ===== Tab Bar ===== -->
+  <div class="menu-tabs" role="tablist">
+    <button class="menu-tab active" role="tab" data-tab="bar" onclick="switchTab('bar', this)">Bar Menu</button>
+    <button class="menu-tab" role="tab" data-tab="food" onclick="switchTab('food', this)">Food Menu</button>
+    <button class="menu-tab" role="tab" data-tab="brunch" onclick="switchTab('brunch', this)">Brunch</button>
+  </div>
+
+  <!-- ===== Main Content ===== -->
+  <main>
+    <div class="container">
+
+      <!-- ============ TAB: BAR MENU ============ -->
+      <div id="tab-bar" class="tab-panel active">
+        <section class="menu-section" id="drinks">
+          <h2 class="section-title">Bar Menu</h2>
+
+          <!-- Cocktails -->
+          <p class="section-subtitle">Cocktails</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Caesar</div>
+                <div class="menu-item__desc">2oz vodka</div>
+              </div>
+              <div class="menu-item__price">$13</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Margarita</div>
+                <div class="menu-item__desc">2oz tequila, 1/2oz triple sec</div>
+              </div>
+              <div class="menu-item__price">$14</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Long Island Iced Tea</div>
+                <div class="menu-item__desc">2oz LIIT mix</div>
+              </div>
+              <div class="menu-item__price">$13</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Mimosa</div>
+                <div class="menu-item__desc">2.5oz champagne</div>
+              </div>
+              <div class="menu-item__price">$9</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Old Fashioned</div>
+                <div class="menu-item__desc">2oz whiskey</div>
+              </div>
+              <div class="menu-item__price">$13</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Screwdriver</div>
+                <div class="menu-item__desc">2oz vodka</div>
+              </div>
+              <div class="menu-item__price">$13</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Martini</div>
+                <div class="menu-item__desc">2oz vodka or gin, 1/2oz dry vermouth</div>
+              </div>
+              <div class="menu-item__price">$14</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Cosmopolitan</div>
+                <div class="menu-item__desc">2oz vodka</div>
+              </div>
+              <div class="menu-item__price">$13</div>
+            </div>
+          </div>
+
+          <!-- Sangria -->
+          <p class="section-subtitle">Sangria</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Glass Sangria</div>
+                <div class="menu-item__desc">Red or white &mdash; 3oz wine, 1oz rum</div>
+              </div>
+              <div class="menu-item__price">$15</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Pitcher Sangria</div>
+                <div class="menu-item__desc">Red or white &mdash; 9oz wine, 2oz rum</div>
+              </div>
+              <div class="menu-item__price">$27</div>
+            </div>
+          </div>
+
+          <!-- Wine -->
+          <p class="section-subtitle">Wine <small style="font-weight:normal;font-size:0.75rem;">(6oz / 9oz / &frac12; litre / bottle)</small></p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">House Red / White</div>
+              </div>
+              <div class="menu-item__price">$9 / $13 / $24 / $30</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Other Red / White</div>
+              </div>
+              <div class="menu-item__price">$11 / $15 / $26 / $34</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Prosecco</div>
+              </div>
+              <div class="menu-item__price">$11 / $35</div>
+            </div>
+          </div>
+
+          <!-- Draught Beer -->
+          <p class="section-subtitle">Draught Beer <small style="font-weight:normal;font-size:0.75rem;">(pint / pitcher)</small></p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Stella Artois</div></div>
+              <div class="menu-item__price">$10 / $28</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Alexander Keith's</div></div>
+              <div class="menu-item__price">$8 / $24</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Juicy AF IPA</div></div>
+              <div class="menu-item__price">$9 / $24</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Space Invaders IPA</div></div>
+              <div class="menu-item__price">$9 / $24</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Amsterdam Blonde</div></div>
+              <div class="menu-item__price">$9 / $24</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Steam Whistle</div></div>
+              <div class="menu-item__price">$8 / $23</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Moosehead</div></div>
+              <div class="menu-item__price">$8 / $23</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Beau's Lug Tread</div></div>
+              <div class="menu-item__price">$8 / $23</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">High Park Ale</div></div>
+              <div class="menu-item__price">$8 / $23</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">High Park Lager</div></div>
+              <div class="menu-item__price">$8 / $23</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Guinness</div></div>
+              <div class="menu-item__price">$10 / $28</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Cider</div></div>
+              <div class="menu-item__price">$10 / $28</div>
+            </div>
+          </div>
+
+          <!-- Cans -->
+          <p class="section-subtitle">Cans</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Moosehead</div><div class="menu-item__desc">473ml</div></div>
+              <div class="menu-item__price">$7</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Sapporo</div><div class="menu-item__desc">500ml</div></div>
+              <div class="menu-item__price">$8</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Tuborg</div><div class="menu-item__desc">473ml</div></div>
+              <div class="menu-item__price">$8</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">3 Speed Tall Can</div><div class="menu-item__desc">568ml</div></div>
+              <div class="menu-item__price">$8</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Brickworks Cider</div><div class="menu-item__desc">473ml</div></div>
+              <div class="menu-item__price">$8</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Stiegl</div><div class="menu-item__desc">500ml</div></div>
+              <div class="menu-item__price">$8</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">White Claw</div><div class="menu-item__desc">473ml</div></div>
+              <div class="menu-item__price">$5</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Stiegl Radler</div><div class="menu-item__desc">500ml</div></div>
+              <div class="menu-item__price">$9</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">PBR</div><div class="menu-item__desc">473ml</div></div>
+              <div class="menu-item__price">$6</div>
+            </div>
+          </div>
+
+          <!-- Bottles -->
+          <p class="section-subtitle">Bottles</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Budweiser, Canadian, Coors Light, or Labatt Blue</div>
+                <div class="menu-item__desc">341ml</div>
+              </div>
+              <div class="menu-item__price">$6</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">MGD</div>
+                <div class="menu-item__desc">341ml&ndash;355ml</div>
+              </div>
+              <div class="menu-item__price">$6</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Smirnoff Ice, Stella, Heineken, or Corona</div>
+                <div class="menu-item__desc">330ml</div>
+              </div>
+              <div class="menu-item__price">$8</div>
+            </div>
+          </div>
+
+          <!-- Non-Alcoholic -->
+          <p class="section-subtitle">Non-Alcoholic</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Red Bull</div></div>
+              <div class="menu-item__price">$5</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">Perrier</div></div>
+              <div class="menu-item__price">$4</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">0% Guinness</div></div>
+              <div class="menu-item__price">$6</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info"><div class="menu-item__name">0% Beer</div></div>
+              <div class="menu-item__price">$5</div>
+            </div>
+          </div>
+
+        </section>
+      </div>
+
+      <!-- ============ TAB: FOOD MENU ============ -->
+      <div id="tab-food" class="tab-panel">
+        <section class="menu-section" id="food">
+          <h2 class="section-title">Food Menu</h2>
+
+          <!-- Small Plates -->
+          <p class="section-subtitle">Small Plates &amp; Shareables</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Truffle Fries</div>
+                <div class="menu-item__desc">Hand-cut fries, black truffle oil, parmesan, fresh thyme, aioli</div>
+              </div>
+              <div class="menu-item__price">$14</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Charcuterie Board</div>
+                <div class="menu-item__desc">Cured meats, aged cheeses, cornichons, grainy mustard, crostini</div>
+              </div>
+              <div class="menu-item__price">$22</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Spiced Lamb Skewers</div>
+                <div class="menu-item__desc">Harissa-marinated lamb, tzatziki, sumac onions, grilled pita</div>
+              </div>
+              <div class="menu-item__price">$18</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Burrata &amp; Heirloom Tomato</div>
+                <div class="menu-item__desc">Creamy burrata, heirloom tomatoes, basil oil, fleur de sel, balsamic</div>
+              </div>
+              <div class="menu-item__price">$16</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Crispy Calamari</div>
+                <div class="menu-item__desc">Lightly breaded, served with lemon aioli & smoked paprika dipping sauce</div>
+              </div>
+              <div class="menu-item__price">$15</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Korean BBQ Wings</div>
+                <div class="menu-item__desc">Gochujang glaze, sesame, scallions, pickled daikon — 8 wings</div>
+              </div>
+              <div class="menu-item__price">$17</div>
+            </div>
+          </div>
+
+          <!-- Mains -->
+          <p class="section-subtitle">Mains</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Axis Burger</div>
+                <div class="menu-item__desc">Double smash patty, aged cheddar, caramelized onion, house sauce, brioche</div>
+              </div>
+              <div class="menu-item__price">$20</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Pan-Seared Salmon</div>
+                <div class="menu-item__desc">Miso-glazed salmon, jasmine rice, bok choy, yuzu beurre blanc</div>
+              </div>
+              <div class="menu-item__price">$28</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Steak Frites</div>
+                <div class="menu-item__desc">8 oz hanger steak, chimichurri, pomme frites, watercress salad</div>
+              </div>
+              <div class="menu-item__price">$34</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Wild Mushroom Risotto</div>
+                <div class="menu-item__desc">Porcini &amp; cremini, aged parmesan, truffle oil, crispy sage (v)</div>
+              </div>
+              <div class="menu-item__price">$24</div>
+            </div>
+          </div>
+
+          <!-- Desserts -->
+          <p class="section-subtitle">Desserts</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Chocolate Lava Cake</div>
+                <div class="menu-item__desc">Warm dark chocolate, vanilla bean ice cream, gold dust</div>
+              </div>
+              <div class="menu-item__price">$12</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Crème Brûlée</div>
+                <div class="menu-item__desc">Classic vanilla custard, caramelized sugar crust, fresh berries</div>
+              </div>
+              <div class="menu-item__price">$11</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Affogato</div>
+                <div class="menu-item__desc">Double espresso over vanilla gelato, optional Frangelico shot</div>
+              </div>
+              <div class="menu-item__price">$10</div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <!-- ============ TAB: BRUNCH ============ -->
+      <div id="tab-brunch" class="tab-panel">
+        <section class="menu-section" id="brunch">
+          <h2 class="section-title">Brunch</h2>
+          <p class="brunch-hours-note">Served Thursday–Sunday &middot; 9am–3pm</p>
+
+          <!-- Brunch Food -->
+          <p class="section-subtitle">Food</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Eggs Benedict</div>
+                <div class="menu-item__desc">Poached eggs, Canadian back bacon, hollandaise, English muffin</div>
+              </div>
+              <div class="menu-item__price">$16</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Axis Breakfast Poutine</div>
+                <div class="menu-item__desc">Hand-cut fries, cheese curds, house gravy, fried egg</div>
+              </div>
+              <div class="menu-item__price">$17</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Avocado Toast</div>
+                <div class="menu-item__desc">Smashed avocado, sourdough, chili flakes, poached egg, microgreens</div>
+              </div>
+              <div class="menu-item__price">$15</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Buttermilk Pancakes</div>
+                <div class="menu-item__desc">Stack of three, maple syrup, whipped butter, seasonal fruit</div>
+              </div>
+              <div class="menu-item__price">$14</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Breakfast Burger</div>
+                <div class="menu-item__desc">Smash patty, fried egg, cheddar, bacon, house sauce, brioche bun</div>
+              </div>
+              <div class="menu-item__price">$18</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">French Toast</div>
+                <div class="menu-item__desc">Thick-cut brioche, vanilla custard, powdered sugar, berry compote</div>
+              </div>
+              <div class="menu-item__price">$14</div>
+            </div>
+          </div>
+
+          <!-- Brunch Drinks -->
+          <p class="section-subtitle">Drinks</p>
+          <div class="menu-grid">
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Mimosa</div>
+                <div class="menu-item__desc">2.5oz champagne, fresh orange juice</div>
+              </div>
+              <div class="menu-item__price">$9</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Caesar</div>
+                <div class="menu-item__desc">2oz vodka, Clamato, hot sauce, celery salt, rim</div>
+              </div>
+              <div class="menu-item__price">$13</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Coffee or Tea</div>
+                <div class="menu-item__desc">Drip coffee or steeped tea, free refills</div>
+              </div>
+              <div class="menu-item__price">$4</div>
+            </div>
+            <div class="menu-item">
+              <div class="menu-item__info">
+                <div class="menu-item__name">Fresh Orange Juice</div>
+                <div class="menu-item__desc">Freshly squeezed</div>
+              </div>
+              <div class="menu-item__price">$5</div>
+            </div>
+          </div>
+
+        </section>
+      </div>
+
+    </div><!-- .container -->
+  </main>
+
+  <!-- ===== Footer ===== -->
+  <footer>
+    <p><span>Axis</span> &mdash; 3048 Dundas Street West &mdash; Open Tue–Sun 5pm–2am &mdash; Brunch Thu–Sun 9am–3pm</p>
+    <p style="margin-top:0.4rem;">Please drink responsibly. Must be of legal drinking age.</p>
+  </footer>
+
+  <script>
+    function toggleNav() {
+      document.getElementById('nav-links').classList.toggle('open');
+    }
+
+    function switchTab(tabId, btn) {
+      document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+      document.querySelectorAll('.menu-tab').forEach(b => b.classList.remove('active'));
+      document.getElementById('tab-' + tabId).classList.add('active');
+      btn.classList.add('active');
+    }
+  </script>
+
+</body>
+</html>

style.css

@@ -363,6 +363,509 @@ footer span {
 }
 
 /* ---------- Responsive ---------- */
+/* ========================================
+   LANDING PAGE
+   ======================================== */
+
+/* --- Hero --- */
+.landing-hero {
+  position: relative;
+  height: 100vh;
+  min-height: 560px;
+  background-image: url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?w=1400&q=80&auto=format&fit=crop');
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.landing-hero__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.62);
+}
+
+.landing-hero__content {
+  position: relative;
+  z-index: 1;
+  padding: 0 1.5rem;
+}
+
+.landing-hero__title {
+  font-family: var(--font-display);
+  font-size: clamp(4rem, 14vw, 9rem);
+  color: var(--gold);
+  letter-spacing: 0.3em;
+  line-height: 1;
+  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
+}
+
+.landing-hero__subtitle {
+  margin-top: 0.75rem;
+  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  color: var(--text);
+}
+
+.landing-hero__address {
+  margin-top: 0.4rem;
+  font-size: 0.85rem;
+  letter-spacing: 0.15em;
+  color: var(--text-muted);
+}
+
+.landing-hero__ctas {
+  margin-top: 2.5rem;
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-block;
+  padding: 0.75rem 2rem;
+  font-size: 0.8rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  border-radius: 2px;
+  font-family: var(--font-body);
+  font-weight: 600;
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+  cursor: pointer;
+}
+
+.btn--gold {
+  background: var(--gold);
+  color: #0d0d0d;
+  border: 2px solid var(--gold);
+}
+
+.btn--gold:hover {
+  background: var(--gold-light);
+  border-color: var(--gold-light);
+  color: #0d0d0d;
+}
+
+.btn--outline {
+  background: transparent;
+  color: var(--gold);
+  border: 2px solid var(--gold);
+}
+
+.btn--outline:hover {
+  background: rgba(200, 146, 42, 0.12);
+  color: var(--gold-light);
+  border-color: var(--gold-light);
+}
+
+/* --- Section headings (landing) --- */
+.section-eyebrow {
+  font-size: 0.7rem;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: var(--gold-dim);
+  margin-bottom: 0.5rem;
+}
+
+.section-heading {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
+  color: var(--gold);
+  letter-spacing: 0.06em;
+  margin-bottom: 1.5rem;
+}
+
+.section-heading--center {
+  text-align: center;
+}
+
+/* --- About section --- */
+.about-section {
+  padding: 5rem 0;
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.about-section__inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+}
+
+.about-section__text p {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  line-height: 1.75;
+  margin-bottom: 1rem;
+}
+
+.about-section__hours {
+  display: flex;
+  gap: 2rem;
+  margin: 1.75rem 0 1.25rem;
+  padding: 1.25rem 1.5rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+.about-section__hours-block strong {
+  display: block;
+  font-size: 0.7rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--gold);
+  margin-bottom: 0.25rem;
+}
+
+.about-section__hours-block p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+.about-section__addr {
+  font-size: 0.8rem !important;
+  letter-spacing: 0.1em;
+  color: var(--text-muted) !important;
+}
+
+.about-section__image img {
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  object-fit: cover;
+  aspect-ratio: 4 / 3;
+}
+
+/* --- What's On / Poster cards --- */
+.whats-on-section {
+  padding: 5rem 0;
+}
+
+.poster-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.poster-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-top: 3px solid var(--gold-dim);
+  border-radius: 4px;
+  padding: 2rem 1.75rem;
+  transition: border-top-color 0.2s, transform 0.2s;
+}
+
+.poster-card:hover {
+  border-top-color: var(--gold);
+  transform: translateY(-2px);
+}
+
+.poster-card__icon {
+  font-size: 1.5rem;
+  color: var(--gold-dim);
+  margin-bottom: 0.75rem;
+}
+
+.poster-card__tag {
+  display: inline-block;
+  font-size: 0.65rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  background: rgba(200, 146, 42, 0.1);
+  color: var(--gold);
+  border: 1px solid var(--gold-dim);
+  border-radius: 2px;
+  padding: 2px 8px;
+  margin-bottom: 0.75rem;
+}
+
+.poster-card__name {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  color: var(--text);
+  margin-bottom: 0.4rem;
+}
+
+.poster-card__when {
+  font-size: 0.8rem;
+  color: var(--gold);
+  letter-spacing: 0.05em;
+  margin-bottom: 0.75rem;
+}
+
+.poster-card__desc {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+.whats-on-link {
+  text-align: center;
+  font-size: 0.9rem;
+  letter-spacing: 0.05em;
+}
+
+/* --- Promos --- */
+.promos-section {
+  padding: 5rem 0;
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.promo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1.5rem;
+}
+
+.promo-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2rem 1.75rem;
+  text-align: center;
+  transition: border-color 0.2s;
+}
+
+.promo-card:hover {
+  border-color: var(--gold-dim);
+}
+
+.promo-card__title {
+  font-family: var(--font-display);
+  font-size: 1.2rem;
+  color: var(--gold);
+  margin-bottom: 0.4rem;
+}
+
+.promo-card__when {
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
+}
+
+.promo-card__desc {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+/* ========================================
+   MENU PAGE — TABS
+   ======================================== */
+
+.menu-tabs {
+  display: flex;
+  background: var(--bg-surface);
+  border-bottom: 2px solid var(--border);
+  padding: 0 1.5rem;
+  gap: 0;
+  overflow-x: auto;
+}
+
+.menu-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  padding: 1rem 1.75rem;
+  font-family: var(--font-body);
+  font-size: 0.8rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+  white-space: nowrap;
+}
+
+.menu-tab:hover {
+  color: var(--gold-light);
+}
+
+.menu-tab.active {
+  color: var(--gold-light);
+  border-bottom-color: var(--gold);
+}
+
+.tab-panel {
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
+.brunch-hours-note {
+  font-size: 0.85rem;
+  letter-spacing: 0.08em;
+  color: var(--gold-dim);
+  margin-bottom: 2rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--gold-dim);
+  border-radius: 3px;
+  display: inline-block;
+}
+
+/* ========================================
+   EVENTS PAGE — CALENDAR WIDGET
+   ======================================== */
+
+.cal-widget {
+  margin: 2.5rem 0 1rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  max-width: 700px;
+}
+
+.cal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.cal-month-label {
+  font-family: var(--font-display);
+  font-size: 1.1rem;
+  color: var(--gold);
+  letter-spacing: 0.1em;
+}
+
+.cal-nav-btn {
+  background: none;
+  border: 1px solid var(--gold-dim);
+  border-radius: 3px;
+  color: var(--gold);
+  font-size: 1.4rem;
+  line-height: 1;
+  padding: 0.1rem 0.6rem 0.2rem;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.cal-nav-btn:hover {
+  background: rgba(200, 146, 42, 0.12);
+  color: var(--gold-light);
+}
+
+.cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+  background: var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.cal-dow-header {
+  background: var(--bg-surface);
+  text-align: center;
+  padding: 0.5rem 0;
+  font-size: 0.65rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.cal-cell {
+  background: var(--bg-card);
+  min-height: 56px;
+  padding: 0.4rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.cal-cell--empty {
+  background: #111;
+}
+
+.cal-cell--brunch {
+  background: rgba(40, 90, 50, 0.18);
+}
+
+.cal-cell--today .cal-day-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  outline: 2px solid var(--gold);
+  outline-offset: 1px;
+  color: var(--gold);
+  font-weight: 700;
+}
+
+.cal-day-num {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.cal-dots {
+  display: flex;
+  gap: 3px;
+  flex-wrap: wrap;
+  margin-top: 3px;
+}
+
+.cal-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.cal-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.5rem;
+  padding: 1rem 1.5rem;
+  background: var(--bg-surface);
+}
+
+.cal-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+}
+
+.cal-legend-brunch-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 10px;
+  border-radius: 2px;
+  background: rgba(40, 90, 50, 0.45);
+  border: 1px solid rgba(60, 140, 80, 0.4);
+  flex-shrink: 0;
+}
+
+/* ========================================
+   RESPONSIVE — NEW SECTIONS
+   ======================================== */
+
 @media (max-width: 680px) {
   .navbar__links {
     display: none;
@@ -414,4 +917,60 @@ footer span {
   .page-hero {
     padding: 2.5rem 1.5rem 2rem;
   }
+
+  .about-section__inner {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
+
+  .about-section__image {
+    order: -1;
+  }
+
+  .about-section__hours {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .poster-grid,
+  .promo-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .landing-hero__ctas {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .cal-widget {
+    margin: 1.5rem 0 0.5rem;
+  }
+
+  .cal-cell {
+    min-height: 44px;
+    padding: 0.3rem 0.3rem;
+  }
+
+  .cal-day-num {
+    font-size: 0.7rem;
+  }
+
+  .cal-dot {
+    width: 5px;
+    height: 5px;
+  }
+
+  .cal-legend {
+    gap: 0.5rem 1rem;
+    padding: 0.75rem 1rem;
+  }
+
+  .menu-tabs {
+    padding: 0 0.5rem;
+  }
+
+  .menu-tab {
+    padding: 0.85rem 1.25rem;
+    font-size: 0.72rem;
+  }
 }