diff --git a/above-or-below-the-line.html b/above-or-below-the-line.html
index 6abdcc6..d0c0a5e 100644
--- a/above-or-below-the-line.html
+++ b/above-or-below-the-line.html
@@ -29,8 +29,23 @@
778‑985‑OPEN
Book a call
+
+
@@ -97,6 +112,22 @@
for (var i = 0, l = document.querySelectorAll('a.tel'); i < l.length; i++) {
l[i].setAttribute('href', 'tel:+1' + l[i].dataset.p1 + l[i].dataset.p2 + l[i].dataset.p3);
}
+ var toggle = document.getElementById('navToggle');
+ var menu = document.getElementById('navMobileMenu');
+ function closeMenu() {
+ menu.classList.remove('open'); toggle.classList.remove('open');
+ toggle.setAttribute('aria-label', 'Open menu'); toggle.setAttribute('aria-expanded', 'false');
+ }
+ if (toggle && menu) {
+ toggle.addEventListener('click', function () {
+ var open = !menu.classList.contains('open');
+ menu.classList.toggle('open', open); toggle.classList.toggle('open', open);
+ toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+ toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+ });
+ var mlinks = menu.querySelectorAll('a');
+ for (var j = 0; j < mlinks.length; j++) { mlinks[j].addEventListener('click', closeMenu); }
+ }
})();
diff --git a/continuity-audit.html b/continuity-audit.html
index f43eea9..bd12af7 100644
--- a/continuity-audit.html
+++ b/continuity-audit.html
@@ -29,8 +29,23 @@
778‑985‑OPEN
Book a call
+
+
@@ -131,6 +146,22 @@
var el = links[i];
el.setAttribute('href', 'tel:+1' + el.dataset.p1 + el.dataset.p2 + el.dataset.p3);
}
+ var toggle = document.getElementById('navToggle');
+ var menu = document.getElementById('navMobileMenu');
+ function closeMenu() {
+ menu.classList.remove('open'); toggle.classList.remove('open');
+ toggle.setAttribute('aria-label', 'Open menu'); toggle.setAttribute('aria-expanded', 'false');
+ }
+ if (toggle && menu) {
+ toggle.addEventListener('click', function () {
+ var open = !menu.classList.contains('open');
+ menu.classList.toggle('open', open); toggle.classList.toggle('open', open);
+ toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+ toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+ });
+ var mlinks = menu.querySelectorAll('a');
+ for (var j = 0; j < mlinks.length; j++) { mlinks[j].addEventListener('click', closeMenu); }
+ }
})();
diff --git a/index.html b/index.html
index 311641d..eb79400 100644
--- a/index.html
+++ b/index.html
@@ -50,8 +50,23 @@
778‑985‑OPEN
Book a call
+
+
@@ -250,6 +265,25 @@
var el = links[i];
el.setAttribute('href', 'tel:+1' + el.dataset.p1 + el.dataset.p2 + el.dataset.p3);
}
+ var toggle = document.getElementById('navToggle');
+ var menu = document.getElementById('navMobileMenu');
+ function closeMenu() {
+ menu.classList.remove('open');
+ toggle.classList.remove('open');
+ toggle.setAttribute('aria-label', 'Open menu');
+ toggle.setAttribute('aria-expanded', 'false');
+ }
+ if (toggle && menu) {
+ toggle.addEventListener('click', function () {
+ var open = !menu.classList.contains('open');
+ menu.classList.toggle('open', open);
+ toggle.classList.toggle('open', open);
+ toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+ toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+ });
+ var mlinks = menu.querySelectorAll('a');
+ for (var j = 0; j < mlinks.length; j++) { mlinks[j].addEventListener('click', closeMenu); }
+ }
})();
diff --git a/style.css b/style.css
index 6cda992..ccfac78 100644
--- a/style.css
+++ b/style.css
@@ -36,11 +36,32 @@ a { color: var(--steel); }
/* Header */
.site-header {
- background: var(--paper);
+ background: rgba(250, 247, 242, 0.8);
+ -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
- position: sticky; top: 0; z-index: 10;
+ position: sticky; top: 0; z-index: 100;
}
-.header-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
+.header-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 16px; }
+
+/* Mobile hamburger -> X + frosted dropdown (placed OUTSIDE the header so its glass blurs the page) */
+.nav-toggle { display: none; cursor: pointer; padding: 4px; background: none; border: none; align-items: center; justify-content: center; flex-shrink: 0; }
+.nav-toggle-icon { width: 30px; height: 30px; overflow: visible; }
+.nav-toggle-icon .bar { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; transform-origin: 16px 16px; transition: opacity 0.2s ease, transform 0.35s cubic-bezier(.4,0,.2,1); }
+.nav-toggle.open .bar-top { transform: translateY(6px) rotate(45deg); }
+.nav-toggle.open .bar-mid { opacity: 0; }
+.nav-toggle.open .bar-bot { transform: translateY(-6px) rotate(-45deg); }
+.nav-mobile-menu {
+ display: none; position: fixed; top: 53px; left: 0; right: 0; z-index: 90;
+ flex-direction: column; gap: 18px; padding: 24px 24px 28px;
+ background: rgba(250, 247, 242, 0.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
+ border-bottom: 1px solid var(--line); align-items: flex-end; text-align: right;
+ font-family: Verdana, Geneva, sans-serif;
+}
+.nav-mobile-menu.open { display: flex; }
+.nav-mobile-menu a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
+.nav-mobile-menu a:hover { color: var(--steel); }
+.nav-mobile-menu a.tel { color: var(--steel); font-weight: bold; }
+.nav-mobile-menu .nav-cta { color: #fff !important; }
.wordmark {
font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700;
color: var(--ink); text-decoration: none; letter-spacing: 0.01em;
@@ -196,10 +217,11 @@ blockquote p { margin: 0; font-style: italic; color: var(--ink-soft); }
@media (max-width: 900px) {
.grid.four { grid-template-columns: repeat(2, 1fr); }
.hero h1 { font-size: 2.1rem; }
+ .site-nav { display: none; }
+ .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
body { font-size: 17px; }
- .site-nav a:not(.nav-cta):not(.nav-phone) { display: none; }
.grid.four { grid-template-columns: 1fr; }
.hero { padding: 56px 0 44px; }
section { padding: 48px 0; }