From b4362f2e548a5e8e3cdf835913ac31c081a9ac25 Mon Sep 17 00:00:00 2001
From: Local Dev <dev@localhost>
Date: Mon, 5 Oct 2026 20:28:20 +0200
Subject: [PATCH] PIN pads: calm hover and press states

Moving the pointer across the keypad lit each key it crossed with a bright
acid border and digit, and every filled dot glowed, which read as the pad
flashing while a PIN was typed. Keys now only lighten slightly on hover and
press in a little when clicked; dots fill without the glow.
---
 settings.html | 6 +++++-
 unlock.html   | 9 ++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/settings.html b/settings.html
index ddc44b63..303517ad 100644
--- a/settings.html
+++ b/settings.html
@@ -281,10 +281,14 @@
   .pinpad .pindot.on{background:var(--acid);border-color:var(--acid)}
   .pinpad .pinkeys{display:grid;grid-template-columns:repeat(3,62px);gap:8px}
   .pinpad .pinkeys button{height:46px;border-radius:10px;border:1px solid var(--line);background:#1b2330;color:var(--ink);font:500 18px system-ui,sans-serif;cursor:pointer}
-  .pinpad .pinkeys button:hover{border-color:var(--acid);color:var(--acid-text)}
+  /* Keys only lighten on hover; an acid border lighting up on each key the pointer crossed read as flashing. */
+  .pinpad .pinkeys button{transition:background-color .08s,transform .06s}
+  .pinpad .pinkeys button:hover{background:#232c3b}
+  .pinpad .pinkeys button:active{transform:scale(.96)}
   .pinpad .pinkeys button.util{background:transparent;font-size:13px;color:var(--dim)}
   @media (prefers-color-scheme: light){
     .pinwiz-box input[type=password], .pinpad .pinkeys button{background:#f1f5f8;color:#253A49}
+    .pinpad .pinkeys button:hover{background:#e4e9f0}
     .pinpad .pinkeys button.util{background:transparent}
   }
 </style></head>
diff --git a/unlock.html b/unlock.html
index 8fd23f30..efea8c06 100644
--- a/unlock.html
+++ b/unlock.html
@@ -29,12 +29,15 @@
   .pinpad .pindots { display: flex; gap: 12px; }
   .pinpad .pindot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--dim);
                     background: transparent; transition: background .12s, border-color .12s; }
-  .pinpad .pindot.on { background: var(--acid); border-color: var(--acid);
-                       box-shadow: 0 0 6px rgb(from var(--acid) r g b / .5); }
+  /* No glow, and keys only lighten on hover: a bright acid border lighting
+     up on whichever key the pointer crosses read as the pad flashing. */
+  .pinpad .pindot.on { background: var(--acid); border-color: var(--acid); }
   .pinpad .pinkeys { display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; }
   .pinpad .pinkeys button { height: 46px; border-radius: 10px; border: 1px solid var(--line);
                             background: var(--surface2); color: var(--ink); font: 500 18px system-ui, sans-serif; cursor: pointer; }
-  .pinpad .pinkeys button:hover { border-color: var(--acid); color: var(--acid); }
+  .pinpad .pinkeys button { transition: background-color .08s, transform .06s; }
+  .pinpad .pinkeys button:hover { background: rgb(from var(--surface2) calc(r + 10) calc(g + 10) calc(b + 12)); }
+  .pinpad .pinkeys button:active { transform: scale(.96); }
   .pinpad .pinkeys button.util { background: transparent; font-size: 13px; color: var(--dim); }
   /* Two lines reserved, so a message appearing never changes the dialog's
      height (it is centred, so any height change moves the whole pad). */