Sync: enhance header behavior for light hero backgrounds with dynamic class toggling

This commit is contained in:
Matt Batchelder
2026-02-21 14:42:45 -05:00
parent 8926a9b071
commit a89f9067e2
2 changed files with 19 additions and 4 deletions

View File

@@ -295,10 +295,12 @@ p:last-child { margin-bottom: 0; }
}
.logo-text strong { font-weight: 800; color: var(--color-accent); }
/* When header is over light background (inner pages) */
.page-header-light .site-header { background: var(--color-bg); box-shadow: var(--shadow-sm); }
.page-header-light .logo-text { color: var(--color-heading); }
.page-header-light .nav-menu a { color: var(--color-text); }
/* When header is over a light hero (set by JS) — unscrolled only */
.site-header.over-light-hero:not(.scrolled) .nav-menu a { color: var(--color-text); }
.site-header.over-light-hero:not(.scrolled) .nav-menu a:hover,
.site-header.over-light-hero:not(.scrolled) .nav-menu .current-menu-item > a { color: var(--color-primary); }
.site-header.over-light-hero:not(.scrolled) .logo-text { color: var(--color-heading); }
.site-header.over-light-hero:not(.scrolled) .nav-toggle span { background: var(--color-heading); }
/* Nav */
.site-nav { margin-left: auto; }