From 2e5e46755483c78caedaa5c209b86dd0c1c88df9 Mon Sep 17 00:00:00 2001
From: Semprini <atkinpa@gmail.com>
Date: Mon, 25 May 2026 20:52:22 +1200
Subject: [PATCH] Add ASB brand colors and update styles for improved UI
 consistency

---
 data/static/css/styles.css | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/data/static/css/styles.css b/data/static/css/styles.css
index a89dc1f..a04d41a 100644
--- a/data/static/css/styles.css
+++ b/data/static/css/styles.css
@@ -4,16 +4,22 @@
     box-sizing: border-box;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
+:root {
+    /* ASB brand yellow — used for highlights, hover, and the nav accent bar. */
+    --asb-yellow: #FFCC00;
+    --asb-yellow-dim: rgba(255, 204, 0, 0.5);
+}
 ::selection{
     color: #000;
-    background: #fff;
+    background: var(--asb-yellow);
 }
 nav{
     position: fixed;
-    background: #1b1b1b;
+    background: #000;
     width: 100%;
     padding: 10px 0;
     z-index: 12;
+    border-bottom: 3px solid var(--asb-yellow);
 }
 nav .menu{
     max-width: none;
@@ -26,7 +32,7 @@ nav .menu{
 }
 .menu .logo a{
     text-decoration: none;
-    color: #fff;
+    color: var(--asb-yellow);
     font-size: 35px;
     font-weight: 600;
 }
@@ -50,7 +56,7 @@ nav .menu{
     transition: all 0.3s ease;
 }
 .menu ul li a:hover{
-    background-color: #fff;
+    background-color: var(--asb-yellow);
     color: #000;
     padding: 10px 15px;
 }
@@ -82,7 +88,7 @@ main {
 footer {
     position: relative;
     z-index: 1;
-    background: rgba(27, 27, 27, 0.85);
+    background: rgba(0, 0, 0, 0.85);
     color: #888;
     text-align: center;
     padding: 18px 20px;
@@ -109,7 +115,7 @@ footer {
     color: #f1f5f9;
     margin-bottom: 8px;
     padding-bottom: 8px;
-    border-bottom: 2px solid #2d2d3a;
+    border-bottom: 2px solid var(--asb-yellow);
     letter-spacing: 0.02em;
     flex-shrink: 0;
 }
@@ -148,14 +154,14 @@ footer {
     white-space: nowrap;
 }
 .data-table tbody tr {
-    background: #161622;
+    background: rgba(22, 22, 34, 0.72);
     transition: background 0.15s ease;
 }
 .data-table tbody tr:nth-child(even) {
-    background: #1a1a28;
+    background: rgba(26, 26, 40, 0.72);
 }
 .data-table tbody tr:hover {
-    background: #252540;
+    background: rgba(37, 37, 64, 0.85);
 }
 .data-table tbody td {
     padding: 13px 18px;
@@ -448,7 +454,7 @@ footer {
     color: #94a3b8;
     margin: 0;
     padding-bottom: 6px;
-    border-bottom: 1px solid #2d2d3a;
+    border-bottom: 1px solid var(--asb-yellow);
 }
 .metric-card .num { font-variant-numeric: tabular-nums; text-align: right; }
 .metric-card .good { color: #4ade80; }
@@ -556,7 +562,7 @@ footer {
 .row-link:hover { background: rgba(99, 102, 241, 0.12); }
 
 .job-link {
-    color: #a5b4fc;
+    color: var(--asb-yellow);
     text-decoration: none;
     font-weight: 600;
 }
@@ -570,7 +576,7 @@ a.job-bar:hover { filter: brightness(1.1); box-shadow: 0 0 0 1px rgba(255,255,25
 .detail-header {
     margin-bottom: 14px;
     padding-bottom: 10px;
-    border-bottom: 2px solid #2d2d3a;
+    border-bottom: 2px solid var(--asb-yellow);
 }
 .detail-header h1 {
     border-bottom: none;
@@ -587,7 +593,7 @@ a.job-bar:hover { filter: brightness(1.1); box-shadow: 0 0 0 1px rgba(255,255,25
     margin-bottom: 6px;
 }
 .detail-crumbs a {
-    color: #a5b4fc;
+    color: var(--asb-yellow);
     text-decoration: none;
 }
 .detail-crumbs a:hover { text-decoration: underline; }