From 514657d4804ae32ddb4fb817996a5a02d5daa851 Mon Sep 17 00:00:00 2001
From: Alexander Claes <alexander.claes10@gmail.com>
Date: Sat, 9 May 2026 09:54:35 +0200
Subject: [PATCH] style: polish site visuals with css

Introduce shared theme variables for ink, accent, panel, focus, and shadow colors so related visual styling stays consistent across the static stylesheet.

Add custom browser scrollbar styling for the page, wrapper, sidebar, and tech tree scroll containers while allowing the tech tree pane to show vertical scrolling when content overflows.

Refine the helptext popup with a warmer panel color, stronger themed border, subtle depth, clearer spacing, and higher stacking context so selected item details read more cleanly.

Restore a restrained sidebar background treatment with a subtle fade and edge shadow, without adding separate tinted content boxes inside the sidebar.

Improve focus and hover affordances for links, selects, cross-reference badges, highlighted paths, and tech tree nodes using CSS only. Keep node borders translucent to avoid visual clutter and avoid JavaScript or generated SVG structure changes.
---
 style.css | 166 ++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 148 insertions(+), 18 deletions(-)

diff --git a/style.css b/style.css
index 9100dcf1..40b53c7c 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,15 @@ body {
     width: 100%;
     height: 100%;
     --xRef-badge-size: 30px;
+    --ink: #33210f;
+    --ink-muted: #5b4224;
+    --panel: rgba(244, 230, 197, 0.86);
+    --panel-strong: rgba(250, 238, 207, 0.94);
+    --panel-border: #6d4a21;
+    --accent: #72604a;
+    --accent-dark: #3b2b17;
+    --focus: #f8d166;
+    --shadow: rgba(41, 24, 8, 0.28);
 }
 
 body, input, select, tspan {
@@ -19,6 +28,7 @@ body {
     display: flex;
     background: url('img/Backgrounds/bg_aoe2_hd_paper.jpg') repeat;
     font-size: 10pt;
+    color: var(--ink);
 }
 
 #techtree {
@@ -26,13 +36,58 @@ body {
 }
 
 a, a:hover, a:visited, a:active {
-    color: #4d3617;
+    color: var(--ink-muted);
+}
+
+a:hover {
+    color: var(--accent-dark);
+    text-decoration-thickness: 2px;
+}
+
+body,
+#wrapper,
+#metainfo,
+#techtree {
+    scrollbar-color: var(--accent) rgba(77, 54, 23, 0.18);
+    scrollbar-width: thin;
+}
+
+body::-webkit-scrollbar,
+#wrapper::-webkit-scrollbar,
+#metainfo::-webkit-scrollbar,
+#techtree::-webkit-scrollbar {
+    width: 13px;
+    height: 13px;
+}
+
+body::-webkit-scrollbar-track,
+#wrapper::-webkit-scrollbar-track,
+#metainfo::-webkit-scrollbar-track,
+#techtree::-webkit-scrollbar-track {
+    background-color: rgba(77, 54, 23, 0.16);
+    border: 1px solid rgba(77, 54, 23, 0.18);
+}
+
+body::-webkit-scrollbar-thumb,
+#wrapper::-webkit-scrollbar-thumb,
+#metainfo::-webkit-scrollbar-thumb,
+#techtree::-webkit-scrollbar-thumb {
+    background: linear-gradient(#8a7354, var(--accent));
+    border: 3px solid rgba(245, 231, 198, 0.72);
+    border-radius: 10px;
+}
+
+body::-webkit-scrollbar-thumb:hover,
+#wrapper::-webkit-scrollbar-thumb:hover,
+#metainfo::-webkit-scrollbar-thumb:hover,
+#techtree::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(#9a805d, #59422a);
 }
 
 .credits,
 .credits a {
     font-size: 8pt;
-    color: #4d3617;
+    color: var(--ink-muted);
 }
 
 .credits p {
@@ -56,10 +111,13 @@ a, a:hover, a:visited, a:active {
     position: absolute;
     display: none;
     width: 300px;
-    background-color: #eee;
-    border: 2px solid #bbb;
-    padding: 0.4rem;
+    background-color: var(--panel-strong);
+    border: 2px solid var(--panel-border);
+    box-shadow: 0 10px 26px var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
+    padding: 0.6rem;
     font-size: 10pt;
+    color: var(--ink);
+    z-index: 5;
 }
 
 #helptext p {
@@ -71,7 +129,7 @@ a, a:hover, a:visited, a:active {
     font-family: sans-serif;
     font-size: 9pt;
     text-transform: uppercase;
-    color: #4d3617;
+    color: var(--ink-muted);
     margin: 2px 10px 0 0;
     float: left;
 }
@@ -88,12 +146,20 @@ a, a:hover, a:visited, a:active {
     background-color: transparent;
     border: none;
     padding: 0;
+    cursor: pointer;
 }
 
 /* Style for helptext Cross-Reference image badges */
 #helptext #helptext__x_ref div button img {
     width: var(--xRef-badge-size);
     height: var(--xRef-badge-size);
+    border-radius: 50%;
+    transition: filter 120ms ease, opacity 120ms ease, transform 120ms ease;
+}
+
+#helptext #helptext__x_ref div button:hover img {
+    filter: brightness(1.12);
+    transform: translateY(-1px);
 }
 
 #helptext__x_ref h3 {
@@ -103,9 +169,12 @@ a, a:hover, a:visited, a:active {
 #helptext summary {
     font-family: sans-serif;
     font-size: 8pt;
-    color: #4d3617;
+    color: var(--ink-muted);
     text-transform: uppercase;
     cursor: pointer;
+    border-top: 1px solid rgba(77, 54, 23, 0.22);
+    margin-top: 0.45rem;
+    padding-top: 0.35rem;
 }
 
 #wrapper {
@@ -121,15 +190,17 @@ a, a:hover, a:visited, a:active {
 
 
 #techtree {
-    border-left: 6px solid #4d3617;
+    border-left: 6px solid var(--panel-border);
     flex: 1 0 auto;
     position: relative;
     width: calc(100vw - 22rem - 20px);
     overflow-x: scroll;
+    overflow-y: auto;
+    box-shadow: inset 12px 0 18px -18px #000;
 }
 
 #metainfo {
-    border-right: 6px solid #4d3617;
+    border-right: 6px solid var(--panel-border);
     border-right: none;
     width: 20rem;
     flex: 0 0 auto;
@@ -138,12 +209,14 @@ a, a:hover, a:visited, a:active {
     padding: 1rem;
     overflow: auto;
     height: 100vh;
+    background: linear-gradient(90deg, rgba(255, 245, 217, 0.28), rgba(221, 195, 138, 0.18));
+    box-shadow: inset -1px 0 rgba(255, 255, 255, 0.18), 5px 0 18px -18px #000;
 }
 
 #civselect {
     font-size: 18px;
     font-weight: bold;
-    background-color: #72604a;
+    background-color: var(--accent);
     flex: 1 0 auto;
     margin-right: 1rem;
     color: white;
@@ -151,6 +224,8 @@ a, a:hover, a:visited, a:active {
     box-shadow: inset 0 2px #3f4806, inset 2px -2px #768141, inset -2px 0 #768141;
     height: 36px;
     padding: 5px;
+    border: 1px solid var(--accent-dark);
+    cursor: pointer;
 }
 
 #civselect option {
@@ -158,7 +233,8 @@ a, a:hover, a:visited, a:active {
 }
 
 #civselect:focus {
-    outline: none;
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
 }
 
 #civinfo {
@@ -172,6 +248,10 @@ a, a:hover, a:visited, a:active {
     align-items: center;
 }
 
+#civlogo {
+    filter: drop-shadow(0 4px 5px var(--shadow));
+}
+
 #thanks {
     flex: 0 0 auto;
 }
@@ -239,6 +319,8 @@ hr:before {
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 0;
     word-break: normal;
+    color: var(--ink);
+    cursor: pointer;
 }
 
 .locale-switcher:hover select {
@@ -247,7 +329,8 @@ hr:before {
 }
 
 .locale-switcher select:focus {
-    outline: none;
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
 }
 
 #navigation {
@@ -260,8 +343,43 @@ hr:before {
     cursor: pointer;
 }
 
+.node rect[id$="_bg"] {
+    stroke: rgba(255, 244, 210, 0.22);
+    stroke-width: 1px;
+    vector-effect: non-scaling-stroke;
+}
+
+.node:hover rect[id$="_bg"],
+.node.is-highlight rect[id$="_bg"] {
+    stroke: rgba(248, 209, 102, 0.72);
+    stroke-width: 1.5px;
+}
+
+.node rect[id$="_imgph"] {
+    stroke: rgba(255, 244, 210, 0.16);
+    stroke-width: 1px;
+    vector-effect: non-scaling-stroke;
+}
+
+.node image {
+    pointer-events: none;
+}
+
+.node text {
+    pointer-events: none;
+}
+
+.node rect[id$="_disabled_gray"] {
+    fill: #000;
+    opacity: 0.24;
+}
+
+.cross {
+    pointer-events: none;
+}
+
 .node.is-highlight .node__overlay {
-    stroke: #fff;
+    stroke: var(--focus);
     stroke-width: 3px;
 }
 
@@ -271,12 +389,12 @@ hr:before {
 
 .connection {
     fill: none;
-    stroke: #000;
+    stroke: rgba(0, 0, 0, 0.72);
     stroke-width: 2px;
 }
 
 .connection.is-highlight {
-    stroke: #fff;
+    stroke: var(--focus);
     stroke-width: 3px;
 }
 
@@ -288,9 +406,10 @@ hr:before {
 }
 
 a.inverted {
-    background-color: rgba(50,50,50,.5);
-    color: #ccc;
-    padding: .2em;
+    background-color: rgba(77, 54, 23, 0.72);
+    color: #f1e2c6;
+    padding: .2em .4em;
+    text-decoration: none;
 }
 
 .helptext__heading,
@@ -298,6 +417,17 @@ a.inverted {
     line-height: 1;
 }
 
+.helptext__heading {
+    color: var(--accent-dark);
+    font-weight: bold;
+}
+
+.helptext__desc,
+.helptext__stats,
+.helptext__upgrade_info {
+    line-height: 1.45;
+}
+
 .cost {
     white-space: nowrap;
     padding-left: .25em;