dock UI: lit-lantern active state (soft gold wash, not solid fill), equal-height pills, subtle sheen

c1728cc3a2d3760a974dd2c743b271c1f05670f0 · 2026-09-02 08:47:22 -0700 · Steve Abrams

Files touched

M room/index.html

Diff

commit c1728cc3a2d3760a974dd2c743b271c1f05670f0
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Sep 2 08:47:22 2026 -0700

    dock UI: lit-lantern active state (soft gold wash, not solid fill), equal-height pills, subtle sheen
---
 room/index.html | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/room/index.html b/room/index.html
index fa6af65..10f42d5 100644
--- a/room/index.html
+++ b/room/index.html
@@ -103,14 +103,26 @@
     width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--gold);cursor:pointer;
   }
   .btn{
-    font-family:var(--sans);font-size:12px;letter-spacing:.05em;
-    background:rgba(40,12,16,.7);color:var(--ink);border:1px solid var(--panel-edge);
-    border-radius:10px;padding:9px 13px;cursor:pointer;transition:background .2s,color .2s;
-    display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
+    font-family:var(--sans);font-size:12px;letter-spacing:.04em;font-weight:500;
+    background:linear-gradient(180deg,rgba(58,18,24,.72),rgba(34,10,14,.72));
+    color:var(--ink);border:1px solid rgba(242,182,74,.22);
+    border-radius:11px;padding:0 14px;min-height:38px;cursor:pointer;
+    transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .06s;
+    display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
+    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.35);
   }
-  .btn:hover{background:rgba(70,20,26,.9);color:var(--gold)}
-  .btn[aria-pressed="true"]{background:var(--gold);color:#2a0a0e;border-color:var(--gold);font-weight:600}
-  .toggle{display:flex;flex-direction:column;gap:6px}
+  .btn:hover{border-color:rgba(242,182,74,.5);color:var(--gold);
+    background:linear-gradient(180deg,rgba(78,24,30,.85),rgba(48,14,18,.85))}
+  .btn:active{transform:translateY(1px)}
+  /* active "on" state — a lit lantern glow, not a solid candy fill */
+  .btn[aria-pressed="true"]{
+    color:var(--gold);border-color:rgba(242,182,74,.6);font-weight:600;
+    background:linear-gradient(180deg,rgba(242,182,74,.20),rgba(242,182,74,.07));
+    box-shadow:inset 0 0 0 1px rgba(242,182,74,.22),inset 0 1px 0 rgba(255,235,190,.16),0 0 14px rgba(242,182,74,.16);
+  }
+  .btn[aria-pressed="true"]:hover{background:linear-gradient(180deg,rgba(242,182,74,.28),rgba(242,182,74,.12))}
+  .toggle{display:flex;flex-direction:column;gap:8px;align-items:stretch}
+  .toggle .btn{justify-content:flex-start}   /* equal-width pills, left-aligned labels */
 
   /* ---- Camera pills ---- */
   .cams{position:fixed;left:26px;bottom:20px;z-index:7;display:flex;gap:8px;flex-direction:column}

← 0300e1c room: tappable year-tile grid + Grateful Dead/Dead & Company · back to Dead Agentabrams · room: re-apply 17-show catalog + slowed motion + idle one-be 8917dd6 →