mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OC nav flip: independent per-area detection (bar + menu read their own bg, re-check on open) + fade transitions

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-17 10:52:13 -07:00
parent 3267a6e8cc
commit fcfbfd8817
2 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+6 -4
View File
@@ -60,9 +60,10 @@ strong { font-weight: 500; color: var(--ink); }
padding: 0.85rem 3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
background: #f7f4ef80; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(15, 23, 41, 0.08);
transition: background-color 0.45s ease, border-color 0.45s ease;
}
.nav-logo { flex-shrink: 0; display: flex; }
.nav-logo-img { height: 34px; width: auto; display: block; }
.nav-logo-img { height: 34px; width: auto; display: block; transition: filter 0.45s ease; }
.nav-links-desktop { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); }
.nav-links-desktop a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: #374151; text-decoration: none; white-space: nowrap; transition: color 0.3s; }
.nav-links-desktop a:hover { color: #0f1729; }
@@ -76,8 +77,8 @@ a.tel { text-decoration: none; }
.nav-toggle { display: none; cursor: pointer; padding: 4px; background: none; border: none; align-items: center; justify-content: center; }
.nav-toggle-icon { width: 32px; height: 32px; overflow: visible; }
.nav-toggle-icon .bar { stroke: #0f1729; stroke-width: 1.8; stroke-linecap: round; transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.4,0,.2,1); }
.nav-toggle-icon .o-ring { fill: none; stroke: #0f1729; stroke-width: 1.8; stroke-dasharray: 57; stroke-dashoffset: 57; opacity: 0; transform-origin: 16px 16px; transition: stroke-dashoffset 0.4s cubic-bezier(.4,0,.2,1) 0.1s, opacity 0.2s ease 0.1s; }
.nav-toggle-icon .bar { stroke: #0f1729; stroke-width: 1.8; stroke-linecap: round; transition: stroke 0.45s ease, opacity 0.25s ease, transform 0.35s cubic-bezier(.4,0,.2,1); }
.nav-toggle-icon .o-ring { fill: none; stroke: #0f1729; stroke-width: 1.8; stroke-dasharray: 57; stroke-dashoffset: 57; opacity: 0; transform-origin: 16px 16px; transition: stroke 0.45s ease, stroke-dashoffset 0.4s cubic-bezier(.4,0,.2,1) 0.1s, opacity 0.2s ease 0.1s; }
.nav-toggle.open .bar-top { opacity: 0; transform: translateY(-4px); }
.nav-toggle.open .bar-mid { opacity: 0; transform: scaleX(0); }
.nav-toggle.open .bar-bot { opacity: 0; transform: translateY(4px); }
@@ -88,9 +89,10 @@ a.tel { text-decoration: none; }
flex-direction: column; gap: 1.25rem; padding: 1.75rem 1.5rem 2rem;
background: #f7f4ef80; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(15, 23, 41, 0.08); align-items: flex-end; text-align: right;
transition: background-color 0.45s ease, border-color 0.45s ease;
}
.nav-mobile-menu.open { display: flex; animation: navFadeIn 0.22s ease forwards; }
.nav-mobile-menu a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase; color: #374151; text-decoration: none; }
.nav-mobile-menu a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase; color: #374151; text-decoration: none; transition: color 0.45s ease; }
.nav-mobile-menu a:hover { color: #0f1729; }
.nav-mobile-menu .nav-cta { color: #fff !important; }
@keyframes navFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }