From 83ee1522772e1653a740caf693ba3ecbf7e251c0 Mon Sep 17 00:00:00 2001
From: sysadmin <sysadmin@silverlined.dev>
Date: Tue, 9 Jun 2026 14:51:48 +0100
Subject: [PATCH] feat(welcome): frosted glass-card framing for wizard on void
 wall
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the full-viewport .wizard rule with a fixed-inset frosted-glass card
(backdrop-filter blur, semi-transparent surface, rounded corners, inset shadow)
so the Mercury void/gradient wall shows behind and around the card. Adds
@keyframes sm-rise entrance animation and a body::after SILVERMETAL wordmark
watermark on the wall. Targets the real .wizard class in SilverOS.Welcome.UI/
Components/Routes.razor — no App-project markup touched.
---
 .../SilverOS.Welcome.App/wwwroot/css/app.css  | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/windows/welcome/src/SilverOS.Welcome.App/wwwroot/css/app.css b/windows/welcome/src/SilverOS.Welcome.App/wwwroot/css/app.css
index 1b8751c..555a055 100644
--- a/windows/welcome/src/SilverOS.Welcome.App/wwwroot/css/app.css
+++ b/windows/welcome/src/SilverOS.Welcome.App/wwwroot/css/app.css
@@ -139,6 +139,19 @@ body {
     min-height: 100vh;
 }
 
+body::after {
+    content: "SILVERMETAL";
+    position: fixed;
+    right: 26px;
+    bottom: 16px;
+    font-family: var(--font-ui);
+    font-weight: 700;
+    font-size: 13px;
+    letter-spacing: 4px;
+    color: rgba(255, 255, 255, 0.16);
+    pointer-events: none;
+}
+
 /* ── Blazor error overlay (keep readable) ──────────────────────────── */
 #blazor-error-ui {
     background: #1a0a0a;
@@ -200,9 +213,23 @@ h1:focus { outline: none; }
 .wizard {
     display: grid;
     grid-template-rows: auto 1fr auto;
-    min-height: 100vh;
-    max-width: 760px;
-    margin: 0 auto;
+    position: fixed;
+    inset: 5vh 7vw;                 /* float as a card inset from the wall edges */
+    max-width: 1040px;
+    margin: 0 auto;                 /* center horizontally within the inset box */
+    background: rgba(16, 22, 31, 0.55);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 18px;
+    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
+    overflow: hidden;               /* clip header/footer corners to the radius */
+    animation: sm-rise 0.5s var(--ease-out) both;
+}
+
+@keyframes sm-rise {
+    from { opacity: 0; transform: translateY(12px); }
+    to   { opacity: 1; transform: none; }
 }
 
 /* ── Step indicator ─────────────────────────────────────────────────── */