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

SW nav: owl logo with light/dark crossfade on .on-dark

Browse Source 
Replace the text wordmark with the cobalt-recoloured owl + ShopWisdom single-line
lockup (Asset 46/47). The top-left logo now flips to the reverse (white) version over
dark bands. Verified locally in both modes. Staging/preview only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-24 22:17:38 -07:00
parent 99eb27d3f0
commit ba81bd674d
8 changed files with 207 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+5 -3
View File
@@ -63,9 +63,11 @@ strong { font-weight: 500; color: var(--ink); }
transition: background-color 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease;
}
.nav.scrolled { background: #f7f4ef80; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(15, 23, 41, 0.08); }
.nav-logo { flex-shrink: 0; display: flex; align-items: baseline; text-decoration: none; }
.nav-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; transition: color 0.45s ease; }
.nav-wordmark span { color: var(--accent); }
.nav-logo { flex-shrink: 0; position: relative; display: block; text-decoration: none; line-height: 0; }
.nav-logo-img { height: 36px; width: auto; display: block; transition: opacity 0.45s ease; }
.nav-logo-dark { position: absolute; top: 0; left: 0; opacity: 0; }
.nav.on-dark .nav-logo-light { opacity: 0; }
.nav.on-dark .nav-logo-dark { opacity: 1; }
.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; }