Sync: update header styles for scrolled state to improve visibility and consistency

This commit is contained in:
Matt Batchelder
2026-02-21 14:38:18 -05:00
parent 1540aa9f13
commit 8926a9b071

View File

@@ -258,9 +258,6 @@ p:last-child { margin-bottom: 0; }
backdrop-filter: blur(8px);
}
.site-header.scrolled .logo-text { color: var(--color-heading); }
.site-header.scrolled .nav-menu a { color: var(--header-scrolled-text); }
.header-inner {
display: flex;
align-items: center;
@@ -318,12 +315,12 @@ p:last-child { margin-bottom: 0; }
padding-bottom: 2px;
}
/* Light mode: nav text over hero needs to be dark */
[data-theme="light"] .nav-menu a { color: var(--color-text); }
[data-theme="light"] .nav-menu a:hover,
[data-theme="light"] .nav-menu .current-menu-item > a { color: var(--color-primary); }
[data-theme="light"] .logo-text { color: var(--color-heading); }
[data-theme="light"] .nav-toggle span { background: var(--color-heading); }
/* Scrolled: switch to theme-appropriate text on solid bg */
.site-header.scrolled .nav-menu a { color: var(--header-scrolled-text); }
.site-header.scrolled .nav-menu a:hover,
.site-header.scrolled .nav-menu .current-menu-item > a { color: var(--color-primary); }
.site-header.scrolled .logo-text { color: var(--color-heading); }
.site-header.scrolled .nav-toggle span { background: var(--color-heading); }
.nav-menu a::after {
content: '';
position: absolute;
@@ -339,10 +336,6 @@ p:last-child { margin-bottom: 0; }
.nav-menu a:hover::after,
.nav-menu .current-menu-item > a::after { width: 100%; }
.site-header.scrolled .nav-menu a { color: var(--header-scrolled-text); }
.site-header.scrolled .nav-menu a:hover,
.site-header.scrolled .nav-menu .current-menu-item > a { color: var(--color-primary); }
/* ── Dropdown sub-menu ─────────────────────────────────────── */
.nav-menu > li {
position: relative;
@@ -472,7 +465,6 @@ p:last-child { margin-bottom: 0; }
border-radius: 2px;
transition: all var(--transition);
}
.site-header.scrolled .nav-toggle span { background: var(--color-heading); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }