From 1fd833df172cb88c92898138c221805a108775ce Mon Sep 17 00:00:00 2001 From: Michael Victory Date: Wed, 17 Jun 2026 07:33:35 -0700 Subject: [PATCH] =?UTF-8?q?SW=20nav:=20frosted-glass=20header=20+=20hambur?= =?UTF-8?q?ger->X=20mobile=20menu=20(glass=20dropdown=20placed=20outside?= =?UTF-8?q?=20header)=20across=20all=203=20pages=20=E2=80=94=20matches=20O?= =?UTF-8?q?C=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.8 --- above-or-below-the-line.html | 31 +++++++++++++++++++++++++++++++ continuity-audit.html | 31 +++++++++++++++++++++++++++++++ index.html | 34 ++++++++++++++++++++++++++++++++++ style.css | 30 ++++++++++++++++++++++++++---- 4 files changed, 122 insertions(+), 4 deletions(-) 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; }