2

2026-02-06 13:15:10 +01:00
parent aa30e33805
commit 73968dfbd6
11 changed files with 354 additions and 260 deletions
--- a/WebSite/style/design.css
+++ b/WebSite/style/design.css
@@ -20,9 +20,20 @@ body {
    min-height: 100vh;
 }

+/* Hexagonal Canvas Background */
+#hexCanvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    pointer-events: none;
+}
+
 /* Top Banner - Ultra Smooth Performance */
 .top-banner {
-    background-color: var(--primary-light);
+    background-color: rgba(235, 235, 222, 0.85);
    color: var(--primary-dark);
    padding: 5px 40px;
    height: 90px;
@@ -36,6 +47,8 @@ body {
    z-index: 1001;
    border-bottom: 3px solid var(--accent-orange);
    overflow: hidden;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
    
    /* Ultra-smooth transitions with hardware acceleration */
    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
@@ -69,37 +82,6 @@ body {
    transition-duration: 0.2s;
 }

-/* Light blink effect for top banner */
-.top-banner::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 2px;
-    background: var(--accent-orange);
-    animation: lightBlink 3s ease-in-out infinite;
-    z-index: 1;
-    pointer-events: none;
-}
-
-@keyframes lightBlink {
-    0% {
-        left: -100%;
-        opacity: 0;
-    }
-    10% {
-        opacity: 1;
-    }
-    90% {
-        opacity: 1;
-    }
-    100% {
-        left: 100%;
-        opacity: 0;
-    }
-}
-
 .top-banner-left {
    display: flex;
    align-items: center;
@@ -1160,7 +1142,7 @@ body {

 /* Footer Banner Styles */
 .footer-banner {
-    background: #2a2a2a !important;
+    background: rgba(42, 42, 42, 0.85) !important;
    color: var(--primary-light) !important;
    padding: 60px 0 30px;
    margin: 80px 0 0 0;
@@ -1168,22 +1150,8 @@ body {
    width: 100%;
    position: relative;
    overflow: hidden;
-}
-
-.footer-banner::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--accent-orange), transparent);
-    animation: shimmer 3s infinite;
-}
-
-@keyframes shimmer {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }

 .footer-container {
--- a/WebSite/style/tech-onepager.css
+++ b/WebSite/style/tech-onepager.css
@@ -3,52 +3,15 @@
 * System being built aesthetic - not marketing campaign
 */

-/* ===== TECH BACKGROUND ===== */
+/* ===== TECH BACKGROUND (disabled - replaced by hexCanvas) ===== */
 .tech-background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    overflow: hidden;
-}
-
-.grid-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: 
-        linear-gradient(rgba(79, 71, 71, 0.12) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(79, 71, 71, 0.12) 1px, transparent 1px);
-    background-size: 50px 50px;
-    pointer-events: none;
-}
-
-.dot-pattern {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: radial-gradient(circle, rgba(79, 71, 71, 0.12) 1px, transparent 1px);
-    background-size: 20px 20px;
-    pointer-events: none;
+    display: none;
 }

+.grid-overlay,
+.dot-pattern,
 .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, 
-        rgba(235, 235, 222, 0.8) 0%, 
-        rgba(235, 235, 222, 0.6) 50%, 
-        rgba(235, 235, 222, 0.4) 100%);
-    pointer-events: none;
+    display: none;
 }

 /* ===== HERO SECTION ===== */
@@ -71,6 +34,7 @@

 .hero-left {
    max-width: 600px;
+    width: 100%;
 }

 .hero-headline {
@@ -85,18 +49,32 @@
 .hero-subline {
    font-size: 1.25rem;
    line-height: 1.6;
-    color: var(--primary-mid);
+    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 400;
+    background: rgba(102, 187, 106, 0.35);
+    padding: 16px 20px;
+    padding-left: 20px;
+    border-left: 3px solid var(--accent-teal);
+    background: rgba(102, 187, 106, 0.35);
+    border-radius: 0 8px 8px 0;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    display: inline-block;
 }

 .hero-proof {
    font-size: 1.1rem;
-    color: var(--accent-teal);
+    color: var(--primary-dark);
    font-weight: 500;
    margin-bottom: 40px;
-    padding-left: 20px;
+    padding: 12px 20px;
    border-left: 3px solid var(--accent-teal);
+    background: rgba(102, 187, 106, 0.35);
+    border-radius: 0 8px 8px 0;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    display: inline-block;
 }

 .hero-buttons {
@@ -379,8 +357,7 @@
 /* ===== SYSTEME SECTION ===== */
 .systeme-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    background: transparent;
 }

 .container {
@@ -1247,8 +1224,7 @@
 /* ===== QUALIFICATION SECTION ===== */
 .qualification-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
+    background: transparent;
 }

 .qualification-grid {
@@ -1406,26 +1382,11 @@
 /* ===== PROCESS SECTION ===== */
 .process-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    background: transparent;
    position: relative;
    overflow: hidden;
 }

-.process-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, 
-        transparent 0%, 
-        rgba(38, 166, 154, 0.05) 50%, 
-        transparent 100%);
-    pointer-events: none;
-}
-
 .process-line {
    display: flex;
    align-items: center;
@@ -1624,24 +1585,11 @@
 /* ===== ERGEBNISSE SECTION ===== */
 .results-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(15px);
+    background: transparent;
    position: relative;
    overflow: hidden;
 }

-.results-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(circle at 30% 50%, rgba(38, 166, 154, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 70% 50%, rgba(102, 187, 106, 0.1) 0%, transparent 50%);
-    pointer-events: none;
-}
-
 .results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -1760,26 +1708,11 @@
 /* ===== INTERACTION SECTION ===== */
 .interaction-section {
    padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    background: transparent;
    position: relative;
    overflow: hidden;
 }

-.interaction-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, 
-        transparent 30%, 
-        rgba(38, 166, 154, 0.05) 50%, 
-        transparent 70%);
-    pointer-events: none;
-}
-
 .interaction-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));