feat: update CSS and JavaScript for improved matrix background effects and visual consistency across pages

Author: AsieduDevelopmentHub

assets/css/style.css

@@ -50,7 +50,8 @@ body {
   font-size: 1rem;
   line-height: 1.6;
   color: var(--text);
-  background: #030712;
+  /* Light base so matrix (multiply + dark glyphs) reads as black rain in open areas */
+  background: #f1f5f9;
   background-attachment: fixed;
   min-height: 100vh;
   min-height: 100dvh;
@@ -68,7 +69,7 @@ a:hover {
   text-decoration: underline;
 }
 
-/* Full-viewport matrix rain behind all pages (see [data-matrix] in main.js). */
+/* Full-viewport matrix: dark glyphs + multiply = black-ish rain on light page gaps */
 .matrix-canvas--page-bg {
   position: fixed;
   inset: 0;
@@ -77,8 +78,8 @@ a:hover {
   min-height: 100vh;
   min-height: 100dvh;
   z-index: 0;
-  opacity: 0.78;
-  mix-blend-mode: screen;
+  opacity: 0.58;
+  mix-blend-mode: multiply;
   pointer-events: none;
 }
 
@@ -285,9 +286,9 @@ main > .section:not(.section-alt):not(.section-tint):not(.home-intro):not(.home-
   z-index: 1;
   background: linear-gradient(
     145deg,
-    rgba(12, 18, 34, 0.55) 0%,
-    rgba(30, 27, 75, 0.5) 42%,
-    rgba(14, 116, 144, 0.45) 100%
+    rgba(12, 18, 34, 0.78) 0%,
+    rgba(30, 27, 75, 0.74) 42%,
+    rgba(14, 116, 144, 0.68) 100%
   );
   background-size: 200% 200%;
   animation: hero-gradient 14s ease infinite;

assets/js/main.js

@@ -291,16 +291,19 @@
       var v = viewportSize();
       var w = pageBg ? v.w : canvas.clientWidth || v.w;
       var h = pageBg ? v.h : canvas.clientHeight || 420;
-      ctx.fillStyle = "rgba(3, 7, 18, 0.07)";
+      /* Fade trails toward “paper” so multiply blend keeps gutters feeling light */
+      ctx.fillStyle = pageBg ? "rgba(255, 255, 255, 0.14)" : "rgba(3, 7, 18, 0.07)";
       ctx.fillRect(0, 0, w, h);
 
       ctx.font =
         "bold 15px ui-monospace, SFMono-Regular, Menlo, Consolas, 'Cascadia Code', monospace";
       for (var i = 0; i < drops.length; i++) {
         var x = i * cell + Math.floor(cell * 0.35);
         var y = drops[i];
-        var hue = (118 + (i % 7) * 14) % 160;
-        ctx.fillStyle = "hsla(" + hue + ", 96%, 58%, 0.92)";
+        /* Near-black with a hint of matrix green; reads black on white after multiply */
+        var l = 0.08 + (i % 5) * 0.018;
+        var a = pageBg ? 0.82 : 0.92;
+        ctx.fillStyle = "hsla(135, 35%, " + Math.round(l * 100) + "%, " + a + ")";
         var code = 0x30a0 + Math.floor(Math.random() * 96);
         ctx.fillText(String.fromCharCode(code), x, y);
         drops[i] = y + cell * 0.85 + Math.random() * 12;