diff --git a/src/components/FooterSection.module.css b/src/components/FooterSection.module.css
index 405be49..3ef9a84 100644
--- a/src/components/FooterSection.module.css
+++ b/src/components/FooterSection.module.css
@@ -1,4 +1,6 @@
.footerSection {
+ --footer-grid-line: rgba(21, 87, 166, 0.1);
+
position: relative;
isolation: isolate;
width: 100%;
@@ -12,3 +14,50 @@
justify-content: flex-start;
background-color: var(--bg-page, #ffffff);
}
+
+.footerSection::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 50%;
+ width: 100vw;
+ transform: translateX(-50%);
+ z-index: 0;
+ opacity: 0.6;
+ pointer-events: none;
+ background-image:
+ repeating-linear-gradient(
+ 26.565deg,
+ transparent 0 35px,
+ var(--footer-grid-line) 35px 36px
+ ),
+ repeating-linear-gradient(
+ 153.435deg,
+ transparent 0 35px,
+ var(--footer-grid-line) 35px 36px
+ );
+ -webkit-mask-image: linear-gradient(
+ to bottom,
+ transparent 0%,
+ #000 18%,
+ #000 80%,
+ transparent 100%
+ );
+ mask-image: linear-gradient(
+ to bottom,
+ transparent 0%,
+ #000 18%,
+ #000 80%,
+ transparent 100%
+ );
+}
+
+.footerSection > * {
+ position: relative;
+ z-index: 1;
+}
+
+:global([data-theme='dark']) .footerSection {
+ --footer-grid-line: rgba(130, 181, 255, 0.09);
+}
diff --git a/src/components/IsometricFooter/IsometricScene.tsx b/src/components/IsometricFooter/IsometricScene.tsx
index d0541a7..10236de 100644
--- a/src/components/IsometricFooter/IsometricScene.tsx
+++ b/src/components/IsometricFooter/IsometricScene.tsx
@@ -13,59 +13,6 @@ import {
TelegramIcon,
} from './IsoElements';
-/**
- * Faint Isometric Background Grid
- * Fine architectural diamond grid lines covering the ground (slope 0.5, 2:1 isometric)
- */
-function IsometricBackgroundGrid() {
- const lines = [];
- const spacing = 40;
- const yStart = 150;
- const yEnd = 500;
-
- // Axis 1: / lines (slope 0.5, dx = 2 * dy)
- for (let c = -600; c <= 1600; c += spacing * 2) {
- const x1 = c;
- const y1 = yStart;
- const x2 = c + (yEnd - yStart) * 2;
- const y2 = yEnd;
- lines.push(
-
- );
- }
-
- // Axis 2: \ lines (slope -0.5, dx = -2 * dy)
- for (let c = -400; c <= 1800; c += spacing * 2) {
- const x1 = c;
- const y1 = yStart;
- const x2 = c - (yEnd - yStart) * 2;
- const y2 = yEnd;
- lines.push(
-
- );
- }
-
- return {lines};
-}
-
/**
* Architectural Stepped Terraces:
* 5 ground steps on the floor along the 2:1 isometric grid,
@@ -323,22 +270,19 @@ export default function IsometricScene({
role="img"
aria-label="Interactive 3D isometric footer scene"
>
- {/* 1. Faint Isometric Ground Grid */}
-
-
- {/* 2. Solid 3D Architectural Stepped Terraces */}
+ {/* 1. Solid 3D Architectural Stepped Terraces */}
- {/* 3. Glowing Royal Blue Circuit Conduits */}
+ {/* 2. Glowing Royal Blue Circuit Conduits */}
- {/* 4. Left Mountain Cluster */}
+ {/* 3. Left Mountain Cluster */}
- {/* 5. Right Mountain Cluster (mirrored) */}
+ {/* 4. Right Mountain Cluster (mirrored) */}
- {/* 6. Pine Trees on the floor along ground line */}
+ {/* 5. Pine Trees on the floor along ground line */}
@@ -346,7 +290,7 @@ export default function IsometricScene({
- {/* 7. Central Workstation Illustrations resting flush on the large platform */}
+ {/* 6. Central Workstation Illustrations resting flush on the large platform */}
{/* Prominent Monitor Display resting on left elevated step */}
@@ -356,7 +300,7 @@ export default function IsometricScene({
- {/* 8. The 4 Interactive Isometric Signposts rotated in 3D */}
+ {/* 7. The 4 Interactive Isometric Signposts rotated in 3D */}