From 83d11f5d995fb7b65e80ca290bade6ba2c5389e0 Mon Sep 17 00:00:00 2001 From: Zachary Levy Date: Tue, 11 Aug 2026 13:54:33 -0700 Subject: [PATCH] Changed navigation press animations --- preview/components-nav.html | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/preview/components-nav.html b/preview/components-nav.html index 9e5af96..e757507 100644 --- a/preview/components-nav.html +++ b/preview/components-nav.html @@ -1,5 +1,5 @@ - + @@ -90,7 +90,7 @@ border-radius: 2px; } - .product-name { + .wordmark { font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; @@ -126,7 +126,7 @@ border-bottom: 1px solid var(--border, #7c6f64); padding: 0 12px; } - .topnav .product-name { + .topnav .wordmark { display: flex; align-items: center; padding: 0 16px 0 8px; margin-right: 8px; @@ -142,10 +142,14 @@ text-transform: uppercase; color: var(--fg-caption, #cebd9e); cursor: pointer; - transition: color var(--transition-hover, 150ms ease-out); + transition: color var(--transition-hover, 150ms ease-out), background var(--transition-ui, 180ms ease-out); height: 100%; } .tab:hover { color: var(--fg-body, #f2e2ba); } + .tab:active { + color: var(--gold-bright, #fabd2f); + transition: color var(--transition-press, 55ms ease-out); + } .tab.active { color: var(--fg-heading, #fbf1c7); } .tab.active::after { content: ""; position: absolute; @@ -168,7 +172,7 @@ padding: 12px 0; display: flex; flex-direction: column; } - .sb-product-name { + .sb-wordmark { padding: 4px 20px 16px; border-bottom: 1px solid var(--border-subtle, #665c54); margin-bottom: 8px; @@ -190,6 +194,7 @@ transition: color var(--transition-hover, 150ms ease-out); } .sb-item:hover { color: var(--fg-body, #f2e2ba); } + .sb-item:active { color: var(--gold-bright, #fabd2f); transition: color var(--transition-press, 55ms ease-out); } .sb-item.active { color: var(--fg-heading, #fbf1c7); font-weight: 600; } @@ -206,13 +211,13 @@
01
Top Tabs
-
Lit divider — the bottom rule glows gold under the active tab.
+
Lit divider — the bottom rule glows gold under the active tab. Press: label snaps gold-bright at 55ms, releases at 180ms. Click to try.
✓ Locked
-
Cybersteel
+
Cybersteel
Dashboard
Nodes
Builds
@@ -230,13 +235,13 @@
02
Side Nav
-
Bare brightness — active item is cream & bold; rest are muted.
+
Bare brightness — active item is cream & bold; rest are muted. Same text-snap press.
✓ Locked
+