OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 14:38:18 -05:00
parent 1540aa9f13
commit 8926a9b071
1 changed files with 6 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
theme/assets/css/main.css
View File

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