Add glass/frosted-glass effect to hub and onboarding UI surfaces

Agent-Logs-Url: https://github.com/naturallaw777/staging_alpha/sessions/47ed7298-e001-4ae0-9d35-7dd1e869d836

Co-authored-by: naturallaw777 <99053422+naturallaw777@users.noreply.github.com>

app/sovran_systemsos_web/static/css/base.css

@@ -9,10 +9,10 @@
 }
 
 :root {
-  --bg-color:        #0b0f0d;
+  --bg-color:        #080a09;
-  --surface-color:   #111614;
+  --surface-color:   rgba(14, 16, 15, 0.7);
-  --card-color:      #181e1b;
+  --card-color:      rgba(20, 22, 21, 0.6);
-  --border-color:    #1e2d27;
+  --border-color:    rgba(255, 255, 255, 0.06);
   --text-primary:    #ecf3ef;
   --text-secondary:  #8aaa9a;
   --text-dim:        #4a6658;
@@ -23,8 +23,8 @@
   --grey:            #5E7A6A;
   --radius-card:     18px;
   --radius-btn:      8px;
-  --shadow-card:     0 2px 8px rgba(0,0,0,0.5);
+  --shadow-card:     0 4px 16px rgba(0, 0, 0, 0.4);
-  --shadow-hover:    0 6px 20px rgba(0,0,0,0.7);
+  --shadow-hover:    0 8px 32px rgba(0, 0, 0, 0.5);
 }
 
 html, body {
@@ -55,8 +55,10 @@ body {
 }
 
 .login-card {
-  background-color: var(--surface-color);
+  background-color: rgba(14, 16, 15, 0.75);
-  border: 1px solid var(--border-color);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 20px;
   padding: 48px 40px;
   width: 100%;

app/sovran_systemsos_web/static/css/header.css

@@ -1,8 +1,10 @@
 /* ── Header bar ─────────────────────────────────────────────────── */
 
 .header-bar {
-  background-color: var(--surface-color);
+  backdrop-filter: blur(14px);
-  border-bottom: 1px solid var(--border-color);
+  -webkit-backdrop-filter: blur(14px);
+  background-color: rgba(10, 12, 11, 0.82);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
@@ -46,8 +48,10 @@
 /* ── IP bar ─────────────────────────────────────────────────────── */
 
 .ip-bar {
-  background-color: var(--surface-color);
+  background-color: rgba(10, 12, 11, 0.7);
-  border-bottom: 1px solid var(--border-color);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   padding: 8px 24px;
   display: flex;
   align-items: center;

app/sovran_systemsos_web/static/css/layout.css

@@ -18,8 +18,10 @@
   flex-shrink: 0;
   height: 100%;
   overflow-y: auto;
-  border-right: 1px solid var(--border-color);
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
-  background-color: var(--surface-color);
+  background-color: rgba(12, 14, 13, 0.65);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   padding: 20px 14px;
   display: flex;
   flex-direction: column;

app/sovran_systemsos_web/static/css/modals.css

@@ -4,7 +4,9 @@
   display: none;
   position: fixed;
   inset: 0;
-  background-color: rgba(0,0,0,0.75);
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
   z-index: 200;
   align-items: center;
   justify-content: center;
@@ -15,15 +17,17 @@
 }
 
 .modal-dialog {
-  background-color: var(--surface-color);
+  background-color: rgba(14, 16, 15, 0.8);
-  border: 1px solid var(--border-color);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   width: 90vw;
   max-width: 900px;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
 }
 
 .modal-header {
@@ -119,15 +123,17 @@ button.btn-reboot:hover:not(:disabled) {
 /* ── Credentials info modal ──────────────────────────────────────── */
 
 .creds-dialog {
-  background-color: var(--surface-color);
+  background-color: rgba(14, 16, 15, 0.8);
-  border: 1px solid var(--border-color);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   width: 90vw;
   max-width: 700px;
   max-height: 85vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
   animation: creds-fade-in 0.2s ease-out;
 }
 

app/sovran_systemsos_web/static/css/onboarding.css

@@ -139,8 +139,10 @@
 /* Cards */
 
 .onboarding-card {
-  background-color: var(--surface-color);
+  background-color: rgba(14, 16, 15, 0.65);
-  border: 1px solid var(--border-color);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--radius-card);
   padding: 24px 28px;
   display: flex;
@@ -733,7 +735,9 @@
   display: none;
   position: fixed;
   inset: 0;
-  background-color: rgba(6, 8, 7, 0.92);
+  background-color: rgba(6, 8, 7, 0.7);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   z-index: 999;
   align-items: center;
   justify-content: center;
@@ -744,8 +748,10 @@
 }
 
 .reboot-card {
-  background-color: var(--surface-color);
+  background-color: rgba(14, 16, 15, 0.8);
-  border: 1px solid var(--border-color);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 20px;
   padding: 48px 56px;
   text-align: center;

app/sovran_systemsos_web/static/css/tiles.css

@@ -5,6 +5,8 @@
   min-height: 130px;
   background-color: var(--card-color);
   border: 1px solid var(--border-color);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   border-radius: var(--radius-card);
   box-shadow: var(--shadow-card);
   display: flex;