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 */}