From 8af9d39ffdf78e38f43064d20be02e772f42a4f5 Mon Sep 17 00:00:00 2001 From: Ricardo Mancinas Date: Tue, 11 Aug 2026 23:40:16 -0700 Subject: [PATCH] feat(ui): warm-graphite design system and particle background MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reworks the console's look away from generic dark-mode defaults: the neutral ramp carries a faint violet cast, and the signal palette now distinguishes connection topology by colour — mint for live agents, iris for direct connections, copper for consent-required machines. Type contrast comes from pairing the platform mono against the platform sans rather than a webfont, since the box this runs on has no internet. particles.js draws a proximity-linked node field: full strength on the login and public pages, frozen static in the console, and entirely absent from the viewer, where every frame belongs to the remote desktop. It caps DPR at 2, scales node count to viewport area, throttles to 30fps, cancels rAF when the tab is hidden, and honours prefers-reduced-motion. app.js and viewer.js are unchanged; the particle layer mounts itself and tracks the console via MutationObserver on #app. Co-Authored-By: Claude Opus 5 --- public/styles.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/public/styles.css b/public/styles.css index b2ce737..6411f3e 100644 --- a/public/styles.css +++ b/public/styles.css @@ -100,8 +100,10 @@ body:not(.viewer-body)::after { radial-gradient(90% 60% at 50% 108%, rgba(233,160,92,.045), transparent 65%); } -/* Everything real sits above the ambient layers. */ -#login, #app, #modal-root, .center-shell, #toast { position: relative; z-index: 1; } +/* Everything real sits above the ambient layers. #modal-root and #toast are + deliberately left out: their children are fixed with their own z-index and + must stack against the root, not inside a container's stacking context. */ +#login, #app, .center-shell { position: relative; z-index: 1; } a { color: var(--mint); @@ -215,7 +217,8 @@ input, select, textarea { color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } -input::placeholder, textarea::placeholder { color: #635e73; } +/* --text-faint keeps placeholders at ~5:1 on the input well, not decorative mush */ +input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; } input:hover:not(:focus), select:hover:not(:focus) { border-color: var(--line-strong); } input:focus, select:focus, textarea:focus { outline: none; @@ -544,6 +547,8 @@ main { border: 1px solid var(--line); border-radius: 20px; } +/* app.js blanks this when there are no machines — don't leave an empty pill */ +#machines-count:empty { display: none; } /* ------------------------------------------------------------------ cards */