8

Profice WebSite/style/design.css

@@ -1,10 +1,10 @@
 :root {
-    --primary-dark: #4F4747;
+    --primary-dark: #5a5252;
     --primary-light: #EBEBDE;
-    --primary-mid: #777764;
-    --accent-orange: #F57C00;
-    --accent-teal: #26A69A;
-    --accent-green: #66BB6A;
+    --primary-mid: #8a8a7a;
+    --accent-orange: #d4864a;
+    --accent-teal: #5a9e96;
+    --accent-green: #7fb882;
 }
 
 * {
@@ -1121,10 +1121,51 @@ body {
     
     .top-banner {
         justify-content: space-between;
+        height: 70px;
+        padding: 5px 15px;
+    }
+    
+    .top-banner.scrolled {
+        height: 60px;
+        padding: 5px 12px;
     }
     
     .banner-left {
         flex: 1;
+        gap: 10px;
+    }
+    
+    .logo {
+        height: 40px;
+    }
+    
+    .top-banner.scrolled .logo {
+        height: 32px;
+    }
+    
+    .menu-toggle {
+        width: 38px;
+        height: 38px;
+    }
+    
+    .top-banner.scrolled .menu-toggle {
+        width: 32px;
+        height: 32px;
+    }
+    
+    #cursorToggle {
+        width: 38px;
+        height: 38px;
+    }
+    
+    .top-banner.scrolled #cursorToggle {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .cursor-icon {
+        width: 32px;
+        height: 32px;
     }
     
     .opening-hours {
@@ -1132,6 +1173,36 @@ body {
     }
 }
 
+@media (max-width: 480px) {
+    .top-banner {
+        height: 60px;
+        padding: 5px 10px;
+    }
+    
+    .top-banner.scrolled {
+        height: 55px;
+    }
+    
+    .logo {
+        height: 35px;
+    }
+    
+    .top-banner.scrolled .logo {
+        height: 28px;
+    }
+    
+    .menu-toggle,
+    #cursorToggle {
+        width: 34px;
+        height: 34px;
+    }
+    
+    .cursor-icon {
+        width: 28px;
+        height: 28px;
+    }
+}
+
 /* Footer Banner Styles */
 .footer-banner {
     background: rgba(42, 42, 42, 0.85) !important;