Improve gateway traffic dashboard and connection branding

src/web/styles/features/connection.css

@@ -29,6 +29,7 @@
 }
 
 .client-power-control {
+  position: relative;
   width: 96px;
   height: 96px;
   display: grid;
@@ -38,18 +39,31 @@
 
 .client-power-section.is-gateway .client-power-control,
 .client-power-section.is-gateway .client-power {
-  width: 68px;
-  height: 68px;
+  width: 84px;
+  height: 84px;
 }
 
 .client-power-section.is-gateway .client-power svg {
-  width: 30px;
-  height: 30px;
+  width: 36px;
+  height: 36px;
 }
 
 .client-power-section.is-gateway .client-power::before {
-  width: 44px;
-  height: 44px;
+  width: 52px;
+  height: 52px;
+}
+
+.client-power-control > .client-tooltip {
+  top: calc(100% + 12px);
+  right: auto;
+  bottom: auto;
+  left: 50%;
+  transform: translate(-50%, -2px);
+}
+
+.client-power-control.client-tooltip-anchor:hover > .client-tooltip,
+.client-power-control.client-tooltip-anchor:focus-visible > .client-tooltip {
+  transform: translate(-50%, 0);
 }
 
 .client-power-control:focus-visible {

src/web/styles/layout.css

@@ -152,6 +152,17 @@
   pointer-events: none;
 }
 
+.client-power-control > .harbor-brand {
+  position: absolute;
+  top: auto;
+  right: auto;
+  bottom: calc(100% + 44px);
+  left: 50%;
+  width: max-content;
+  transform: translateX(-50%) scale(3);
+  transform-origin: center bottom;
+}
+
 .harbor-brand.is-switchable {
   pointer-events: auto;
 }
@@ -206,13 +217,6 @@
   filter: drop-shadow(0 0 5px color-mix(in oklch, var(--client-accent) 44%, transparent));
 }
 
-.harbor-brand.is-connected .harbor-brand-content > svg,
-.harbor-brand.is-connected .harbor-brand-name > strong,
-.harbor-brand.is-connected .harbor-brand-name > em,
-.harbor-brand.is-connected .harbor-mode-stack {
-  transform: translateY(-4px);
-}
-
 .harbor-brand.is-connected .harbor-brand-name > strong,
 .harbor-brand.is-connected .harbor-brand-name > em,
 .harbor-brand.is-connected .harbor-mode-stack {
@@ -397,10 +401,6 @@
   animation: harbor-mode-arrows-discovered 260ms 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
-.harbor-brand.is-connected .harbor-mode-swap {
-  transform: translateY(calc(-50% - 4px));
-}
-
 @keyframes harbor-mode-arrows-discovered {
   from {
     opacity: 0;
@@ -662,6 +662,10 @@
     transform: translateX(-50%) scale(1.55);
   }
 
+  .client-power-control > .harbor-brand {
+    transform: translateX(-50%) scale(1.55);
+  }
+
   .client-inline-error.is-connection,
   .client-inline-error.is-subscription {
     position: static;
@@ -719,6 +723,10 @@
     transform: translateX(-50%) scale(1.35);
   }
 
+  .client-power-control > .harbor-brand {
+    transform: translateX(-50%) scale(1.35);
+  }
+
   .client-secondary-menu {
     right: 8px;
   }