Add press effect, glow, arrow slide, easing, and backdrop blur to nav buttons

- :active scale(0.95) press feel on all nav buttons
- box-shadow glow ring on hover (accent @ 20% opacity)
- cubic-bezier(.2,0,0,1) iOS-style snap easing on all transitions
- backdrop-filter: blur(10px) frosted glass base on all buttons
- Dashboard → arrow wraps in <span class="arr"> and slides 2px right on hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nate EmmertandClaude Sonnet 4.6 committed 2026-08-24 15:51:37 -04:00
1 parent 3c927b3e27
commit 344f0dd48e
3 files changed
+46 -9

No files matched your search

+10 -2
View File
@@ -124,14 +124,22 @@ a:hover { text-decoration: underline; }
padding: 0.35rem 0.85rem;
border: 1px solid var(--border);
border-radius: 8px;
background: transparent;
transition: background .15s, border-color .15s, color .15s;
background: color-mix(in srgb, white 5%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background .18s cubic-bezier(.2,0,0,1),
border-color .18s cubic-bezier(.2,0,0,1),
color .18s cubic-bezier(.2,0,0,1),
box-shadow .18s cubic-bezier(.2,0,0,1),
transform .1s cubic-bezier(.2,0,0,1);
}
.station-link:hover {
background: color-mix(in srgb, var(--accent) 18%, transparent);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.station-link:active { transform: scale(0.95); box-shadow: none; }
.settings-nav-links {
display: flex;