From e6bcdc9c62c2ecdf82d587188a3ce0010958007d Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Sat, 11 Jul 2026 15:24:23 +0300
Subject: [PATCH] Refine harbor brand mode swap positioning and styling

---
 src/web/styles.css | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/web/styles.css b/src/web/styles.css
index b03ccdb..6ceb39b 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -135,6 +135,7 @@ p {
 }
 
 .harbor-brand-content {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 9px;
@@ -207,12 +208,12 @@ p {
   transition: color 420ms ease, opacity 420ms ease, filter 420ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.harbor-mode-connect {
+.harbor-brand .harbor-mode-connect {
   z-index: 2;
   color: var(--harbor-connect);
 }
 
-.harbor-mode-gateway {
+.harbor-brand .harbor-mode-gateway {
   z-index: 1;
   color: var(--harbor-gateway);
   opacity: 0.2;
@@ -235,18 +236,26 @@ p {
 }
 
 .harbor-brand .harbor-mode-swap {
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 12px);
   width: 14px;
   height: 14px;
-  opacity: 0.42;
+  color: var(--harbor-connect);
+  opacity: 0.82;
   stroke-width: 1.35;
+  transform: translateY(-50%);
   transition: color 320ms ease, opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.harbor-brand.is-gateway-active .harbor-mode-swap {
+  color: var(--harbor-gateway);
+}
+
 .harbor-brand-control:hover .harbor-mode-swap,
 .harbor-brand-control:focus-visible .harbor-mode-swap {
-  color: var(--harbor-gateway);
   opacity: 1;
-  transform: translateX(1px);
+  transform: translate(1px, -50%);
 }
 
 .client-instructions-toggle {