From 344f0dd48e74877b9a7ff6419ed93c7f02e43988 Mon Sep 17 00:00:00 2001
From: Nate Emmert <nmemmert@gmail.com>
Date: Mon, 24 Aug 2026 15:51:37 -0400
Subject: [PATCH] Add press effect, glow, arrow slide, easing, and backdrop
 blur to nav buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- :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>
---
 app/public/conditions.html | 31 ++++++++++++++++++++++++++-----
 app/public/dashboard.html  | 12 ++++++++++--
 app/public/style.css       | 12 ++++++++++--
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/app/public/conditions.html b/app/public/conditions.html
index 60e3da4..97c8882 100644
--- a/app/public/conditions.html
+++ b/app/public/conditions.html
@@ -83,14 +83,22 @@ html, body {
   padding: 0.32rem 0.75rem;
   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);
 }
 .hdr-back: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);
 }
+.hdr-back:active { transform: scale(0.95); box-shadow: none; }
 .hdr-sep {
   color: var(--border);
   font-size: 0.8rem;
@@ -148,14 +156,27 @@ html, body {
   padding: 0.32rem 0.75rem;
   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);
 }
 .hdr-dash-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);
 }
+.hdr-dash-link:active { transform: scale(0.95); box-shadow: none; }
+.hdr-dash-link .arr {
+  display: inline-block;
+  transition: transform .18s cubic-bezier(.2,0,0,1);
+}
+.hdr-dash-link:hover .arr { transform: translateX(2px); }
 
 /* ── Hero ────────────────────────────────────────────────── */
 .hero {
@@ -372,7 +393,7 @@ canvas { display: block; }
   </div>
   <div class="hdr-live"><span class="live-dot"></span>Live</div>
   <div class="hdr-right">
-    <a href="/dashboard" class="hdr-dash-link">Dashboard →</a>
+    <a href="/dashboard" class="hdr-dash-link">Dashboard <span class="arr">→</span></a>
     <div class="hdr-time" id="hdrTime"></div>
   </div>
 </header>
diff --git a/app/public/dashboard.html b/app/public/dashboard.html
index ca46814..fdf1104 100644
--- a/app/public/dashboard.html
+++ b/app/public/dashboard.html
@@ -37,14 +37,22 @@ a { color: var(--cool); text-decoration: none; }
   padding: 0.32rem 0.75rem;
   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);
 }
 .logout: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);
 }
+.logout:active { transform: scale(0.95); box-shadow: none; }
 
 /* ── Wrapper ── */
 .page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
diff --git a/app/public/style.css b/app/public/style.css
index 53dde77..5f84c08 100644
--- a/app/public/style.css
+++ b/app/public/style.css
@@ -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;