From 3c927b3e27985b75f92132668a6ae8cb13a7e853 Mon Sep 17 00:00:00 2001
From: Nate Emmert <nmemmert@gmail.com>
Date: Mon, 24 Aug 2026 15:49:03 -0400
Subject: [PATCH] Use semi-transparent accent fill on nav button hover

color-mix(accent 18%, transparent) keeps text readable and gives a
ghost-button tint instead of a full solid fill.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/public/conditions.html | 8 ++++----
 app/public/dashboard.html  | 4 ++--
 app/public/style.css       | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/public/conditions.html b/app/public/conditions.html
index cdccb76..60e3da4 100644
--- a/app/public/conditions.html
+++ b/app/public/conditions.html
@@ -87,9 +87,9 @@ html, body {
   transition: background .15s, border-color .15s, color .15s;
 }
 .hdr-back:hover {
-  background: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--accent);
 }
 .hdr-sep {
   color: var(--border);
@@ -152,9 +152,9 @@ html, body {
   transition: background .15s, border-color .15s, color .15s;
 }
 .hdr-dash-link:hover {
-  background: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--accent);
 }
 
 /* ── Hero ────────────────────────────────────────────────── */
diff --git a/app/public/dashboard.html b/app/public/dashboard.html
index 0426b88..ca46814 100644
--- a/app/public/dashboard.html
+++ b/app/public/dashboard.html
@@ -41,9 +41,9 @@ a { color: var(--cool); text-decoration: none; }
   transition: background .15s, border-color .15s, color .15s;
 }
 .logout:hover {
-  background: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--accent);
 }
 
 /* ── Wrapper ── */
diff --git a/app/public/style.css b/app/public/style.css
index 88b43bf..53dde77 100644
--- a/app/public/style.css
+++ b/app/public/style.css
@@ -128,9 +128,9 @@ a:hover { text-decoration: underline; }
   transition: background .15s, border-color .15s, color .15s;
 }
 .station-link:hover {
-  background: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--accent);
 }
 
 .settings-nav-links {