Skip to content

Commit 0775d31

Browse files
AsieduDevelopmentHubAsieduDevelopmentHub
committed
refactor: replace page background canvas with hero canvas on multiple pages for improved visual consistency and focus
1 parent ba3ee9c commit 0775d31

5 files changed

Lines changed: 14 additions & 13 deletions

File tree

‎assets/css/style.css‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,7 @@ body {
5353
font-size: 1rem;
5454
line-height: 1.6;
5555
color: var(--text);
56-
/* Dark base so white matrix rain reads clearly in gutters */
57-
background: #030712;
56+
background: #f1f5f9;
5857
background-attachment: fixed;
5958
min-height: 100vh;
6059
min-height: 100dvh;
@@ -72,22 +71,20 @@ a:hover {
7271
text-decoration: underline;
7372
}
7473

75-
/* Full-viewport matrix: white 0/1, screen blend on dark body */
76-
.matrix-canvas--page-bg {
77-
position: fixed;
74+
/* Matrix rain only inside hero bands (home .hero-wrap, inner .page-hero--mesh) */
75+
.matrix-canvas--hero {
76+
position: absolute;
7877
inset: 0;
7978
width: 100%;
8079
height: 100%;
81-
min-height: 100vh;
82-
min-height: 100dvh;
8380
z-index: 0;
84-
opacity: 0.62;
81+
opacity: 0.58;
8582
mix-blend-mode: screen;
8683
pointer-events: none;
8784
}
8885

8986
@media (prefers-reduced-motion: reduce) {
90-
.matrix-canvas--page-bg {
87+
.matrix-canvas--hero {
9188
display: none !important;
9289
}
9390
}
@@ -354,6 +351,7 @@ main > .section:not(.section-alt):not(.section-tint):not(.home-intro):not(.home-
354351
content: "";
355352
position: absolute;
356353
inset: 0;
354+
z-index: 1;
357355
background:
358356
radial-gradient(ellipse 80% 50% at 20% 40%, rgba(79, 70, 229, 0.38), transparent 58%),
359357
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(6, 182, 212, 0.28), transparent 52%),
@@ -365,6 +363,7 @@ main > .section:not(.section-alt):not(.section-tint):not(.home-intro):not(.home-
365363
content: "";
366364
position: absolute;
367365
inset: 0;
366+
z-index: 1;
368367
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
369368
opacity: 0.5;
370369
pointer-events: none;
@@ -374,6 +373,7 @@ main > .section:not(.section-alt):not(.section-tint):not(.home-intro):not(.home-
374373
.hero-orbs {
375374
position: absolute;
376375
inset: 0;
376+
z-index: 2;
377377
pointer-events: none;
378378
overflow: hidden;
379379
}
@@ -416,6 +416,7 @@ main > .section:not(.section-alt):not(.section-tint):not(.home-intro):not(.home-
416416

417417
.hero {
418418
position: relative;
419+
z-index: 3;
419420
padding: 4.5rem 0 5rem;
420421
text-align: left;
421422
}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
<link rel="stylesheet" href="assets/css/style.css" />
2929
</head>
3030
<body>
31-
<canvas class="matrix-canvas matrix-canvas--page-bg" data-matrix aria-hidden="true"></canvas>
3231
<header class="site-header">
3332
<div class="header-inner">
3433
<a class="logo logo-with-mark" href="index.html">
@@ -66,6 +65,7 @@
6665

6766
<main>
6867
<div class="hero-wrap">
68+
<canvas class="matrix-canvas matrix-canvas--hero" data-matrix aria-hidden="true"></canvas>
6969
<div class="hero-orbs" aria-hidden="true">
7070
<div class="hero-orb hero-orb--a"></div>
7171
<div class="hero-orb hero-orb--b"></div>

‎pages/about.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
<link rel="stylesheet" href="../assets/css/style.css" />
2929
</head>
3030
<body>
31-
<canvas class="matrix-canvas matrix-canvas--page-bg" data-matrix aria-hidden="true"></canvas>
3231
<header class="site-header">
3332
<div class="header-inner">
3433
<a class="logo logo-with-mark" href="../index.html">
@@ -58,6 +57,7 @@
5857

5958
<main>
6059
<section class="page-hero page-hero--mesh page-reveal">
60+
<canvas class="matrix-canvas matrix-canvas--hero" data-matrix aria-hidden="true"></canvas>
6161
<div class="container">
6262
<h1>About SentraCore</h1>
6363
<p class="lead">

‎pages/docs.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
<link rel="stylesheet" href="../assets/css/style.css" />
2929
</head>
3030
<body>
31-
<canvas class="matrix-canvas matrix-canvas--page-bg" data-matrix aria-hidden="true"></canvas>
3231
<header class="site-header">
3332
<div class="header-inner">
3433
<a class="logo logo-with-mark" href="../index.html">
@@ -58,6 +57,7 @@
5857

5958
<main>
6059
<section class="page-hero page-hero--mesh page-reveal">
60+
<canvas class="matrix-canvas matrix-canvas--hero" data-matrix aria-hidden="true"></canvas>
6161
<div class="container">
6262
<h1>Documentation</h1>
6363
<p class="lead">

‎pages/download.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
<link rel="stylesheet" href="../assets/css/style.css" />
2929
</head>
3030
<body>
31-
<canvas class="matrix-canvas matrix-canvas--page-bg" data-matrix aria-hidden="true"></canvas>
3231
<header class="site-header">
3332
<div class="header-inner">
3433
<a class="logo logo-with-mark" href="../index.html">
@@ -58,6 +57,7 @@
5857

5958
<main>
6059
<section class="page-hero page-hero--mesh page-reveal">
60+
<canvas class="matrix-canvas matrix-canvas--hero" data-matrix aria-hidden="true"></canvas>
6161
<div class="container">
6262
<h1>Download</h1>
6363
<p class="lead">

0 commit comments

Comments
 (0)