From b389664824af28c9a87fbc271722d94fbc4dbe73 Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Sat, 11 Jul 2026 15:39:30 +0300
Subject: [PATCH] Refine client accent styling with dynamic harbor colors

---
 src/web/styles.css | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/web/styles.css b/src/web/styles.css
index d70bb22..43ef50b 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -58,11 +58,11 @@ p {
   --client-border: oklch(0.86 0.012 145);
   --client-text: oklch(0.24 0.014 145);
   --client-muted: oklch(0.53 0.014 145);
-  --client-accent: oklch(0.62 0.14 151);
-  --client-accent-soft: oklch(0.92 0.045 151);
   --harbor-word: oklch(0.39 0.075 232);
   --harbor-connect: oklch(0.57 0.11 185);
   --harbor-gateway: oklch(0.61 0.12 72);
+  --client-accent: var(--harbor-connect);
+  --client-accent-soft: color-mix(in oklch, var(--client-accent) 22%, transparent);
   grid-template-rows: 1fr;
   color-scheme: light;
   background: var(--client-bg);
@@ -90,6 +90,10 @@ p {
   color: var(--client-text);
 }
 
+.client-shell:has(.harbor-brand.is-gateway-active) {
+  --client-accent: var(--harbor-gateway);
+}
+
 .harbor-brand {
   position: fixed;
   top: 50%;
@@ -251,15 +255,16 @@ p {
 
 .harbor-mode-tooltip {
   position: absolute;
-  top: calc(100% + 12px);
+  bottom: calc(100% + 9px);
   left: 50%;
   width: 116px;
   display: grid;
   gap: 2px;
   padding: 5px 6px;
   border-radius: 5px;
-  background: color-mix(in oklch, var(--client-panel) 94%, var(--client-bg));
-  box-shadow: 0 6px 20px oklch(0.08 0.015 145 / 0.16);
+  background: color-mix(in oklch, var(--client-panel) 64%, transparent);
+  box-shadow: 0 5px 18px oklch(0.08 0.015 145 / 0.1);
+  backdrop-filter: blur(8px) saturate(0.9);
   color: var(--client-muted);
   font-size: 4px;
   line-height: 1.5;
@@ -269,7 +274,7 @@ p {
   visibility: hidden;
   filter: blur(2px);
   pointer-events: none;
-  transform: translate(-50%, -3px);
+  transform: translate(-50%, 3px);
   transition: opacity 240ms ease, filter 320ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 400ms;
 }
 
@@ -1188,7 +1193,7 @@ p {
   font-weight: 600;
   letter-spacing: -0.055em;
   opacity: 0.88;
-  text-shadow: 0 0 20px oklch(0.62 0.05 151 / 0.24);
+  text-shadow: 0 0 20px color-mix(in oklch, var(--client-accent) 24%, transparent);
   transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), text-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1197,7 +1202,7 @@ p {
 .client-subscription-domain-button:hover strong {
   opacity: 1;
   transform: translateY(-2px);
-  text-shadow: 0 0 28px oklch(0.7 0.08 151 / 0.42);
+  text-shadow: 0 0 28px color-mix(in oklch, var(--client-accent) 42%, transparent);
 }
 
 .client-usage {
@@ -1430,7 +1435,7 @@ p {
   color: var(--client-text);
   font-size: 12px;
   font-weight: 500;
-  text-shadow: 0 0 12px oklch(0.62 0.05 151 / 0.12);
+  text-shadow: 0 0 12px color-mix(in oklch, var(--client-accent) 12%, transparent);
 }
 
 .client-access-point {
@@ -1564,11 +1569,11 @@ p {
     --client-border: oklch(0.34 0.015 145);
     --client-text: oklch(0.93 0.008 145);
     --client-muted: oklch(0.68 0.012 145);
-    --client-accent: oklch(0.76 0.13 151);
-    --client-accent-soft: oklch(0.32 0.055 151);
     --harbor-word: oklch(0.78 0.07 232);
     --harbor-connect: oklch(0.75 0.1 185);
     --harbor-gateway: oklch(0.79 0.11 72);
+    --client-accent: var(--harbor-connect);
+    --client-accent-soft: color-mix(in oklch, var(--client-accent) 22%, transparent);
     color-scheme: dark;
   }
 }