2

Profice 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 {