feat: refine CSS styles and enhance JavaScript functionality for matrix background effects, improving visual clarity and responsiveness

Author: AsieduDevelopmentHub

assets/css/style.css

@@ -1,4 +1,7 @@
 :root {
+  /* Shared animated hero / header background */
+  --brand-hero-grad: linear-gradient(145deg, #0c1222 0%, #1e1b4b 42%, #0e7490 100%);
+  --brand-hero-grad-size: 200% 200%;
   --bg: #eef2ff;
   --bg-deep: #0c1222;
   --surface: rgba(255, 255, 255, 0.72);
@@ -50,8 +53,8 @@ body {
   font-size: 1rem;
   line-height: 1.6;
   color: var(--text);
-  /* Light base so matrix (multiply + dark glyphs) reads as black rain in open areas */
-  background: #f1f5f9;
+  /* Dark base so white matrix rain reads clearly in gutters */
+  background: #030712;
   background-attachment: fixed;
   min-height: 100vh;
   min-height: 100dvh;
@@ -69,7 +72,7 @@ a:hover {
   text-decoration: underline;
 }
 
-/* Full-viewport matrix: dark glyphs + multiply = black-ish rain on light page gaps */
+/* Full-viewport matrix: white 0/1, screen blend on dark body */
 .matrix-canvas--page-bg {
   position: fixed;
   inset: 0;
@@ -78,8 +81,8 @@ a:hover {
   min-height: 100vh;
   min-height: 100dvh;
   z-index: 0;
-  opacity: 0.58;
-  mix-blend-mode: multiply;
+  opacity: 0.62;
+  mix-blend-mode: screen;
   pointer-events: none;
 }
 
@@ -93,13 +96,29 @@ a:hover {
   position: sticky;
   top: 0;
   z-index: 50;
-  background: rgba(15, 23, 42, 0.78);
-  backdrop-filter: blur(18px) saturate(160%);
-  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
+  isolation: isolate;
+  background: var(--brand-hero-grad);
+  background-size: var(--brand-hero-grad-size);
+  animation: hero-gradient 14s ease infinite;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+}
+
+.site-header::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background:
+    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(79, 70, 229, 0.35), transparent 58%),
+    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(6, 182, 212, 0.28), transparent 52%),
+    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.06), transparent 42%);
+  pointer-events: none;
 }
 
 .header-inner {
+  position: relative;
+  z-index: 1;
   max-width: var(--max);
   margin: 0 auto;
   padding: 0.875rem 1.5rem;
@@ -223,6 +242,8 @@ a:hover {
 }
 
 .nav-panel {
+  position: relative;
+  z-index: 1;
   display: none;
   flex-direction: column;
   padding: 0 1.5rem 1rem;

assets/js/main.js

@@ -287,25 +287,39 @@
       });
     }
 
+    function headerBandBottom() {
+      var el = document.querySelector(".site-header");
+      if (!el) return 0;
+      var r = el.getBoundingClientRect();
+      return Math.ceil(r.bottom);
+    }
+
+    function randomBit() {
+      return Math.random() < 0.5 ? "1" : "0";
+    }
+
     function step() {
       var v = viewportSize();
       var w = pageBg ? v.w : canvas.clientWidth || v.w;
       var h = pageBg ? v.h : canvas.clientHeight || 420;
-      /* 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)";
+      var headerBottom = pageBg ? headerBandBottom() : 0;
+      /* Fade trails toward page base (light) so black digits read on white gutters */
+      ctx.fillStyle = pageBg ? "rgba(241, 245, 249, 0.16)" : "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];
-        /* 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);
+        var inHeader = pageBg && headerBottom > 0 && y >= 0 && y <= headerBottom;
+        /* Header band: bright 0/1 for the strip under .site-header. Elsewhere: black on light areas. */
+        if (inHeader) {
+          ctx.fillStyle = "rgba(255, 255, 255, 0.96)";
+        } else {
+          ctx.fillStyle = "rgba(15, 23, 42, 0.78)";
+        }
+        ctx.fillText(randomBit(), x, y);
         drops[i] = y + cell * 0.85 + Math.random() * 12;
         if (drops[i] > h + 48 && Math.random() > 0.965) {
           drops[i] = -Math.random() * (h * 0.35);