From 906869f425d8c1d8c2a8f9f1a0000c0ee64c9c9b Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 10 May 2026 23:13:24 -0400
Subject: [PATCH] CSS: convert all topology inline styles to modifier classes

Replace style= attributes on topology wire/node elements with semantic
modifier classes:
- topo-vc-wire--wan, --10g, --mgmt (wire colour semantics in CSS)
- topo-v2-host--bus (bus-section node size constraint)
- topo-legend-item--offrack already done in prior commit

Zero inline styles remain in the topology section.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/style.css     |  4 ++++
 templates/index.html | 14 +++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/static/style.css b/static/style.css
index b8097e9..ab073c6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -410,6 +410,9 @@
   background: linear-gradient(to bottom, var(--cyan), var(--green));
   opacity: .7;
 }
+.topo-vc-wire--wan  { background: linear-gradient(to bottom, var(--cyan), rgba(0,212,255,.3)); opacity: .7; }
+.topo-vc-wire--10g  { background: var(--amber); opacity: .6; }
+.topo-vc-wire--mgmt { background: var(--border-color); opacity: .5; }
 /* Blurred copy of the wire for a soft glow halo */
 .topo-vc-wire::before {
   content: '';
@@ -467,6 +470,7 @@
 .topo-v2-sub   { font-size: .58em; color: var(--text-muted); letter-spacing: .02em; }
 .topo-v2-vlan  { font-size: .54em; color: var(--cyan); opacity: .75; }
 
+.topo-v2-host--bus { min-width: 80px; max-width: 96px; }
 .topo-v2-internet { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); box-shadow: 0 0 12px rgba(0,212,255,.12); }
 .topo-v2-router   { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); box-shadow: 0 0 12px rgba(0,212,255,.14); }
 .topo-v2-switch   { border-color: var(--amber); color: var(--amber); text-shadow: var(--glow-amber); box-shadow: 0 0 12px rgba(255,179,0,.12); }
diff --git a/templates/index.html b/templates/index.html
index 9842983..a82abbc 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -188,9 +188,9 @@
       </div>
     </div>
 
-    <!-- WAN wire: cyan → green gradient, labeled -->
+    <!-- WAN wire: cyan → WAN gradient -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),rgba(0,212,255,.3)); opacity:.7;"></div>
+      <div class="topo-vc-wire topo-vc-wire--wan"></div>
       <span class="topo-vc-label">WAN · 10G SFP+</span>
     </div>
 
@@ -208,7 +208,7 @@
 
     <!-- UDM-Pro → USW-Agg (10G SFP+) -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
       <span class="topo-vc-label">10G SFP+</span>
     </div>
 
@@ -227,7 +227,7 @@
 
     <!-- USW-Agg → Pro 24 PoE (10G trunk) -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
       <span class="topo-vc-label">10G trunk</span>
     </div>
 
@@ -246,7 +246,7 @@
 
     <!-- Pro 24 PoE → host bus section -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--border-color);opacity:.5;"></div>
+      <div class="topo-vc-wire topo-vc-wire--mgmt"></div>
     </div>
 
     <!-- ══════════════════════════════════════════════════════════════
@@ -286,8 +286,8 @@
             <div class="topo-v2-wire-1g"  data-host="{{ hname }}" title="1G → Pro 24 PoE"></div>
           </div>
           <!-- host box -->
-          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }}"
-               data-host="{{ hname }}" style="min-width:80px; max-width:96px;">
+          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }} topo-v2-host--bus"
+               data-host="{{ hname }}">
             <span class="topo-v2-icon">▣</span>
             <span class="topo-v2-label">{{ hlabel }}</span>
             <span class="topo-v2-sub">{{ hsub }}</span>