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

OC nav: adaptive — nav + mobile menu flip to dark frosted with light text over dark sections

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-17 07:47:04 -07:00
parent 0c42369220
commit 3267a6e8cc
2 changed files with 25 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+11
View File
@@ -95,6 +95,17 @@ a.tel { text-decoration: none; }
.nav-mobile-menu .nav-cta { color: #fff !important; }
@keyframes navFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* Adaptive: over a dark section, flip nav + menu to dark frosted with light text */
.nav.on-dark { background: rgba(15, 23, 41, 0.5); border-bottom-color: rgba(247, 244, 239, 0.14); }
.nav.on-dark .nav-links-desktop a { color: rgba(247, 244, 239, 0.85); }
.nav.on-dark .nav-links-desktop a:hover { color: #fff; }
.nav.on-dark .nav-logo-img { filter: brightness(0) invert(1); }
.nav.on-dark .nav-toggle-icon .bar, .nav.on-dark .nav-toggle-icon .o-ring { stroke: #f7f4ef; }
.nav-mobile-menu.on-dark { background: rgba(15, 23, 41, 0.55); border-bottom-color: rgba(247, 244, 239, 0.14); }
.nav-mobile-menu.on-dark a { color: rgba(247, 244, 239, 0.9); }
.nav-mobile-menu.on-dark a:hover { color: #fff; }
.nav-mobile-menu.on-dark .nav-cta { color: #fff !important; }
@media (max-width: 900px) {
.nav { padding: 0.7rem 1.5rem; }
.nav-links-desktop { display: none; }