Redesign touch controls and engagement interaction

SUB Control/web/styles.css

@@ -615,69 +615,83 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
   text-transform: uppercase;
   letter-spacing: .08em;
 }
+@property --engage-progress {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
 .engage-button {
-  min-width: 140px;
-  height: 32px;
-  padding: 0 20px;
-  font-size: 11px;
-  font-weight: 500;
-  border-radius: 999px;
+  --engage-progress: 0%;
+  min-width: 166px;
+  height: 38px;
+  padding: 0 24px;
+  border-radius: 10px;
   position: relative;
   overflow: hidden;
   user-select: none;
+  touch-action: none;
+  background: #343a39;
+  border: 1px solid #242927;
+  color: #f7f8f6;
+  transition: --engage-progress .28s ease-out, background-color .24s ease, border-color .24s ease, color .2s ease, transform .16s ease;
 }
+.engage-button::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--engage-progress);
+  background: rgba(139, 218, 83, .18);
+  pointer-events: none;
+}
+.engage-button.charging { transition: background-color .24s ease, border-color .24s ease, color .2s ease; }
+.engage-face { position: relative; display: grid; place-items: center; min-width: 74px; }
+.engage-face > span { grid-area: 1/1; font-size: 11px; font-weight: 650; letter-spacing: .12em; }
+.engage-label {
+  color: transparent;
+  background: linear-gradient(105deg,#f4f6f3 20%,#ffffff 43%,#9da6a2 50%,#ffffff 57%,#f4f6f3 80%);
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+.arm:not(.charging):not(.state-transition) .engage-label { animation: engage-shimmer 2.8s linear infinite; }
+.engage-progress-label {
+  color: #a9ed72;
+  clip-path: inset(0 calc(100% - var(--engage-progress)) 0 0);
+  transition: clip-path .06s linear, opacity .18s ease;
+}
+.state-transition .engage-face { opacity: .2; transform: translateY(-2px); }
+.engage-face { transition: opacity .14s ease, transform .14s ease; }
+@keyframes engage-shimmer { from{background-position:160% 0} to{background-position:-90% 0} }
 .subtle { background: #e2e6e1; color: #28302c; border: 1px solid rgba(0, 0, 0, 0.08); }
 .subtle:hover { background: #d7dcd5; }
 
 .arm {
-  background: #eef3e5;
-  color: #24351a;
-  border: 1px solid rgba(157, 232, 72, 0.4);
+  background: #343a39;
+  color: #f7f8f6;
+  border-color: #242927;
   cursor: pointer;
 }
-.arm::before {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  inset: 0 auto 0 0;
-  width: var(--arm-progress, 0%);
-  border-radius: inherit;
-  background: linear-gradient(90deg, #c9f277, #9de848);
-  pointer-events: none;
-  transition: width 0.04s linear;
-}
-.arm-copy {
-  display: grid;
-  place-items: center;
-  width: 100%;
-  position: relative;
-  z-index: 2;
-}
-.arm-copy > span {
-  grid-area: 1 / 1;
-  transition: opacity 0.15s, transform 0.15s;
-}
-.arm-holding-label { opacity: 0; transform: translateY(3px); }
-.arm.charging .arm-label { opacity: 0; transform: translateY(-3px); }
-.arm.charging .arm-holding-label { opacity: 1; transform: translateY(0); }
 .arm.charged {
-  background: #c9f277 !important;
-  color: #14200d !important;
-  transform: scale(1.04);
+  --engage-progress: 100%;
+  background: #4e7140;
+  border-color: #78ad5a;
 }
 .danger { 
-  background: #f8deda; 
-  color: #7a2822; 
-  border: 1px solid rgba(240, 149, 139, 0.4);
+  --engage-progress: 0%;
+  background: #ad3f38;
+  color: #ffffff;
+  border: 1px solid #8e302b;
 }
+.danger .engage-label { color:#fff; background:none; }
+.danger .engage-progress-label { opacity:0; }
 .danger:hover {
-  background: #f4cac4;
-  border-color: rgba(240, 149, 139, 0.7);
+  background: #bd4740;
+  border-color: #8e302b;
 }
 
 /* ── Main Controls Grid ── */
 .controls-grid {
-  --joy-size: min(34vh, 230px);
+  --joy-size: min(46vh, 320px);
   --joy-circle-d: calc(var(--joy-size) * 0.90);
   display: grid;
   grid-template-columns: minmax(300px, 1fr) 175px;
@@ -738,8 +752,8 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
   position: relative;
   width: var(--size);
   height: var(--size);
-  min-width: 165px;
-  min-height: 165px;
+  min-width: 220px;
+  min-height: 220px;
   margin: auto;
   border: 0;
   background: transparent;
@@ -763,7 +777,7 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
 }
 .heave-track {
   position: relative;
-  width: 36px;
+  width: 48px;
   height: var(--joy-circle-d);
   border-radius: 18px;
   background: #eaeee8;
@@ -774,19 +788,20 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
 .heave-track::before { display: none !important; }
 .heave-center {
   position: absolute;
-  left: 6px;
-  right: 6px;
+  left: 7px;
+  right: 7px;
   top: 50%;
-  height: 1px;
-  background: #b2b9b4;
+  height: 3px;
+  border-radius: 2px;
+  background: #75807b;
 }
 .heave-fill {
   position: absolute;
-  left: 12px;
-  right: 12px;
+  left: 18px;
+  right: 18px;
   top: 50%;
   height: 0;
-  background: rgba(188, 159, 235, 0.4);
+  background: #87958e;
   border-radius: 3px;
 }
 .heave-knob {
@@ -794,8 +809,8 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
   left: 50%;
   top: 50%;
   translate: -50% -50%;
-  width: 48px;
-  height: 27px;
+  width: 64px;
+  height: 34px;
   border-radius: 14px;
   background: linear-gradient(145deg, #687271, #3c4443);
   border: 1px solid #d7dedc;