Update background color

Author: Magicherry

src/css/style.css

@@ -11,7 +11,7 @@
 
   Design tokens (edit in :root only):
   - Colors: --color-white, --color-text, --color-text-accent, --color-text-muted|soft|softer|strong,
-    --surface-page|glass|overlay-dark*, --border-subtle|medium|strong, --cta-*, --shadow-*,
+    --surface-page|glass|overlay-dark*, --bg-mesh-*, --border-subtle|medium|strong, --cta-*, --shadow-*,
     --project-type-*|project-tag-*|project-date-*|project-overlay-bg, --blur-*-gradient
   - Buttons: --button-radius-pill|md|lg, --button-transition, --button-active-scale
 
@@ -39,6 +39,14 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background-color: var(--surface-page) !important;
+    background-image:
+        var(--bg-mesh-a),
+        var(--bg-mesh-b),
+        var(--bg-mesh-c),
+        var(--bg-mesh-d);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: scroll;
 }
 
 :root {
@@ -54,8 +62,13 @@ body {
     --color-blockquote-footer: #88b3c0;
 
     /* Surfaces & overlays (glass / panels) */
-    --surface-page: rgba(10, 25, 47, 0.99);
-    --surface-app: rgba(15, 28, 35, 0.85);
+    --surface-page: #030712;
+    /* Layered mesh visible through semi-transparent --surface-app */
+    --bg-mesh-a: radial-gradient(ellipse 110% 90% at 8% -18%, rgba(56, 189, 248, 0.17) 0%, transparent 52%);
+    --bg-mesh-b: radial-gradient(ellipse 95% 78% at 102% 6%, rgba(139, 92, 246, 0.12) 0%, transparent 48%);
+    --bg-mesh-c: radial-gradient(ellipse 88% 72% at 82% 104%, rgba(45, 212, 191, 0.1) 0%, transparent 46%);
+    --bg-mesh-d: radial-gradient(ellipse 72% 58% at -6% 86%, rgba(59, 130, 246, 0.08) 0%, transparent 42%);
+    --surface-app: rgba(15, 23, 42, 0.74);
     --surface-glass: rgba(255, 255, 255, 0.05);
     --surface-glass-hover: rgba(255, 255, 255, 0.08);
     --surface-glass-active: rgba(255, 255, 255, 0.12);
@@ -97,8 +110,8 @@ body {
     ====================*/
     --bg-gradient-section: linear-gradient(to bottom left, rgba(17, 16, 16, 0.582), rgba(8, 19, 24, 0.904));
     --bg-gradient-image: linear-gradient(to bottom left, rgba(17, 16, 16, 0.678), rgba(10, 14, 22, 0.863));
-    --bg-preloader: #050b13;
-    --bg-footer: linear-gradient(145deg, #08121a 0%, #0f1f2b 40%, #0c1621 100%);
+    --bg-preloader: #030712;
+    --bg-footer: linear-gradient(145deg, #020617 0%, #0f172a 38%, #0c1222 100%);
 
     /*====================
         Scrollbar
@@ -198,8 +211,8 @@ body {
     --surface-nav-collapse: rgba(28, 38, 52, 0.95);
     --shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.06);
     --navbar-collapse-shadow: inset 0 -1.2px 1.2px rgba(255, 255, 255, 0.2), 0 -6px 32px 0 rgba(0, 0, 0, 0.2);
-    --blur-top-gradient: linear-gradient(180deg, rgba(6, 12, 20, 0.88) 0%, rgba(8, 18, 28, 0.76) 30%, rgba(10, 22, 34, 0.46) 60%, rgba(10, 22, 34, 0.18) 82%, rgba(10, 22, 34, 0) 100%);
-    --blur-mask-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0.14) 70%, rgba(0, 0, 0, 0) 100%);
+    --blur-top-gradient: linear-gradient(180deg, rgba(3, 7, 18, 0.92) 0%, rgba(15, 23, 42, 0.78) 32%, rgba(15, 23, 42, 0.42) 62%, rgba(15, 23, 42, 0.14) 84%, rgba(15, 23, 42, 0) 100%);
+    --blur-mask-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.26) 36%, rgba(0, 0, 0, 0.12) 72%, rgba(0, 0, 0, 0) 100%);
     --preloader-logo-glow: rgba(90, 150, 170, 0.3);
     --accent-glow-strong: rgba(90, 150, 170, 0.4);
     --accent-bg-soft: rgba(90, 150, 170, 0.12);