From c84abfb8c0abd47844c91a54c18ec5c78e6628f8 Mon Sep 17 00:00:00 2001
From: Pratik <pratik@engineeringbuild.com>
Date: Sat, 13 Jun 2026 12:16:01 +1000
Subject: [PATCH] Update website

---
 main.css | 152 ++++++++++++++++++++++++++++++++++++-------------------
 main.js  |   9 ++++
 2 files changed, 110 insertions(+), 51 deletions(-)

diff --git a/main.css b/main.css
index ae19729..ae9e85b 100644
--- a/main.css
+++ b/main.css
@@ -2,6 +2,18 @@
   box-sizing: border-box;
 }
 
+:root {
+  --color-page: #f4f7f6;
+  --color-surface: #ffffff;
+  --color-ink: #102033;
+  --color-muted: #5b677a;
+  --color-border: #d9e2e1;
+  --color-accent: #0f766e;
+  --color-accent-dark: #0b4f4a;
+  --color-accent-soft: #e6f3f1;
+  --color-footer: #102033;
+}
+
 html {
   scroll-behavior: smooth;
 }
@@ -12,8 +24,8 @@ body {
   min-height: 100vh;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
-  background: #fff;
-  color: #111827;
+  background: var(--color-page);
+  color: var(--color-ink);
 }
 
 main {
@@ -26,12 +38,37 @@ a {
 }
 
 .site-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 18px 24px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--color-border);
+  background: rgba(255, 255, 255, 0.96);
+  transition: padding 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.site-header.is-scrolled {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  box-shadow: 0 10px 28px rgba(16, 32, 51, 0.12);
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.site-header.is-scrolled .brand {
+  font-size: 1.05rem;
+}
+
+.site-header.is-scrolled .brand-subtitle {
+  display: none;
+}
+
+.site-header.is-scrolled .site-nav > a,
+.site-header.is-scrolled .nav-trigger {
+  font-size: 0.82rem;
 }
 
 .brand-block {
@@ -44,11 +81,13 @@ a {
   font-weight: 800;
   line-height: 1;
   letter-spacing: 0;
+  color: var(--color-ink);
+  transition: font-size 0.2s ease;
 }
 
 .brand-subtitle {
   font-size: 0.72rem;
-  color: #6b7280;
+  color: var(--color-muted);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
@@ -68,7 +107,8 @@ a {
 .nav-trigger {
   font-size: 0.92rem;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--color-ink);
+  transition: font-size 0.2s ease;
 }
 
 .nav-group {
@@ -86,7 +126,7 @@ a {
 .nav-trigger::after {
   content: "v";
   margin-left: 6px;
-  color: #6b7280;
+  color: var(--color-muted);
   font-size: 0.8em;
 }
 
@@ -97,10 +137,10 @@ a {
   left: 0;
   min-width: 220px;
   padding: 12px;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 14px;
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 14px 34px rgba(16, 32, 51, 0.12);
   z-index: 10;
 }
 
@@ -116,12 +156,15 @@ a {
 }
 
 .nav-panel a:hover {
-  background: #f3f4f6;
+  background: var(--color-accent-soft);
+  color: var(--color-accent-dark);
 }
 
 .hero-section {
-  padding: 72px 24px 80px;
-  border-bottom: 1px solid #e5e7eb;
+  padding: 88px 24px 92px;
+  border-bottom: 1px solid var(--color-border);
+  background: linear-gradient(135deg, #102033 0%, #0b4f4a 100%);
+  color: #ffffff;
 }
 
 .hero-content {
@@ -131,7 +174,7 @@ a {
 
 .hero-content h1 {
   margin: 0 0 16px;
-  font-size: 3rem;
+  font-size: 3.6rem;
   line-height: 1.08;
   letter-spacing: 0;
 }
@@ -141,7 +184,7 @@ a {
   margin: 0 0 14px;
   font-size: 1.35rem;
   line-height: 1.45;
-  color: #1f2937;
+  color: #eefdfa;
 }
 
 .hero-copy {
@@ -149,7 +192,7 @@ a {
   margin: 0;
   font-size: 1rem;
   line-height: 1.7;
-  color: #4b5563;
+  color: #c9e3df;
 }
 
 .hero-actions {
@@ -164,34 +207,36 @@ a {
   align-items: center;
   justify-content: center;
   min-height: 44px;
-  padding: 11px 16px;
-  border: 1px solid #111827;
+  padding: 12px 18px;
+  border: 1px solid var(--color-accent);
   border-radius: 8px;
   font-size: 0.94rem;
   font-weight: 700;
 }
 
 .button-primary {
-  background: #111827;
+  background: var(--color-accent);
   color: #fff;
 }
 
 .button-primary:hover {
-  background: #0f172a;
+  background: var(--color-accent-dark);
 }
 
 .button-secondary {
-  background: #fff;
-  color: #111827;
+  background: #ffffff;
+  color: var(--color-accent-dark);
+  border-color: #ffffff;
 }
 
 .button-secondary:hover {
-  background: #f3f4f6;
+  background: var(--color-accent-soft);
+  border-color: var(--color-accent-soft);
 }
 
 .home-section {
-  padding: 56px 24px;
-  border-bottom: 1px solid #e5e7eb;
+  padding: 64px 24px;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .home-content {
@@ -201,7 +246,7 @@ a {
 
 .home-content h2 {
   margin: 0 0 22px;
-  font-size: 1.75rem;
+  font-size: 1.95rem;
   line-height: 1.2;
   letter-spacing: 0;
 }
@@ -211,7 +256,7 @@ a {
   margin: 0;
   font-size: 1.05rem;
   line-height: 1.7;
-  color: #4b5563;
+  color: var(--color-muted);
 }
 
 .coverage-list {
@@ -226,19 +271,20 @@ a {
 .coverage-list a {
   display: block;
   height: 100%;
-  padding: 16px;
-  border: 1px solid #e5e7eb;
+  padding: 18px;
+  border: 1px solid var(--color-border);
   border-radius: 8px;
-  background: #fff;
-  color: #1f2937;
+  background: var(--color-surface);
+  color: var(--color-ink);
   font-weight: 700;
   line-height: 1.45;
+  box-shadow: 0 8px 20px rgba(16, 32, 51, 0.05);
 }
 
 .coverage-list a:hover,
 .featured-card:hover {
-  border-color: #cbd5e1;
-  background: #f9fafb;
+  border-color: var(--color-accent);
+  background: var(--color-accent-soft);
 }
 
 .featured-grid {
@@ -249,26 +295,28 @@ a {
 
 .featured-card {
   display: block;
-  padding: 18px;
-  border: 1px solid #e5e7eb;
+  padding: 22px;
+  border: 1px solid var(--color-border);
   border-radius: 8px;
-  background: #fff;
+  background: var(--color-surface);
+  box-shadow: 0 8px 20px rgba(16, 32, 51, 0.05);
 }
 
 .featured-card h3 {
   margin: 0 0 10px;
-  font-size: 1.05rem;
+  font-size: 1.18rem;
   line-height: 1.3;
 }
 
 .featured-card p {
   margin: 0;
-  color: #4b5563;
+  color: var(--color-muted);
   line-height: 1.6;
 }
 
 .cta-section {
   padding: 64px 24px;
+  background: var(--color-surface);
 }
 
 .cta-section h2 {
@@ -281,9 +329,10 @@ a {
 
 .site-footer {
   margin-top: auto;
-  padding: 32px 24px;
-  border-top: 1px solid #e5e7eb;
-  background: #f9fafb;
+  padding: 40px 24px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--color-footer);
+  color: #ffffff;
 }
 
 .footer-content {
@@ -302,7 +351,7 @@ a {
 .footer-brand p {
   max-width: 480px;
   margin: 0;
-  color: #4b5563;
+  color: #cbd5e1;
   line-height: 1.6;
 }
 
@@ -324,7 +373,7 @@ a {
 .footer-email {
   grid-column: 1 / -1;
   width: fit-content;
-  color: #4b5563;
+  color: #cbd5e1;
   font-weight: 700;
 }
 
@@ -337,9 +386,10 @@ a {
   max-width: 720px;
   margin: 0 auto;
   padding: 28px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--color-border);
   border-radius: 18px;
-  background: #fff;
+  background: var(--color-surface);
+  box-shadow: 0 8px 20px rgba(16, 32, 51, 0.05);
 }
 
 .content-page {
@@ -366,7 +416,7 @@ a {
   font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
-  color: #6b7280;
+  color: var(--color-muted);
   font-weight: 700;
 }
 
@@ -387,7 +437,7 @@ a {
 .contact-form textarea {
   width: 100%;
   padding: 12px 14px;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--color-border);
   border-radius: 12px;
   font: inherit;
 }
@@ -397,7 +447,7 @@ a {
   padding: 12px 16px;
   border: 0;
   border-radius: 12px;
-  background: #111827;
+  background: var(--color-accent);
   color: #fff;
   font: inherit;
   font-weight: 700;
@@ -405,7 +455,7 @@ a {
 }
 
 .contact-form button:hover {
-  background: #0f172a;
+  background: var(--color-accent-dark);
 }
 
 @media (max-width: 720px) {
@@ -421,9 +471,9 @@ a {
     width: 44px;
     height: 44px;
     place-content: center;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--color-border);
     border-radius: 8px;
-    background: #fff;
+    background: var(--color-page);
     cursor: pointer;
   }
 
diff --git a/main.js b/main.js
index e5cafd0..c484578 100644
--- a/main.js
+++ b/main.js
@@ -158,3 +158,12 @@ mobileMenuQuery.addEventListener('change', () => {
   });
   closeMobileMenus();
 });
+
+function updateScrolledHeaders() {
+  document.querySelectorAll('.site-header').forEach((header) => {
+    header.classList.toggle('is-scrolled', window.scrollY > 20);
+  });
+}
+
+updateScrolledHeaders();
+window.addEventListener('scroll', updateScrolledHeaders, { passive: true });