From 6e43ab30c240142f2d2b7563f2c3b286eab9b829 Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Fri, 22 May 2026 02:54:10 +0000
Subject: [PATCH] =?UTF-8?q?rebrand:=20Recorders=20=E2=80=94=20Dragonflight?=
 =?UTF-8?q?,=20ember=20orange=20hue-32?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 services/web-ui/public/recorders.html | 44 +++++++++++++--------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/services/web-ui/public/recorders.html b/services/web-ui/public/recorders.html
index 45b4898..08cfb89 100644
--- a/services/web-ui/public/recorders.html
+++ b/services/web-ui/public/recorders.html
@@ -4,14 +4,14 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <title>Recorders — Z-AMPP</title>
+  <title>Recorders — Dragonflight</title>
   <link rel="stylesheet" href="css/common.css?v=3">
   <style>
     /* ── Recorders page · AMPP-aligned theme ── */
     .main {
       background:
-        radial-gradient(ellipse 70% 50% at 50% 0%, oklch(28% 0.10 266 / 0.35), transparent 60%),
-        radial-gradient(ellipse 60% 40% at 90% 100%, oklch(35% 0.16 266 / 0.18), transparent 65%),
+        radial-gradient(ellipse 70% 50% at 50% 0%, oklch(28% 0.10 32 / 0.35), transparent 60%),
+        radial-gradient(ellipse 60% 40% at 90% 100%, oklch(35% 0.16 32 / 0.18), transparent 65%),
         var(--bg-base);
     }
     .page-content { padding: 24px 32px 48px; }
@@ -33,7 +33,7 @@
       backdrop-filter: blur(6px);
       transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
     }
-    .recorder-card:hover { border-color: oklch(45% 0.20 266 / 0.4); }
+    .recorder-card:hover { border-color: oklch(45% 0.20 32 / 0.4); }
     .recorder-card.recording {
       border-color: oklch(62% 0.22 25 / 0.55);
       background: oklch(15% 0.025 260 / 0.8);
@@ -57,11 +57,11 @@
 
     .recorder-status-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
     .recorder-status-row .text-sm { font-size: 13px; font-weight: 500; }
-    .recorder-timer { margin-left: auto; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: oklch(70% 0.18 266); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
+    .recorder-timer { margin-left: auto; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: oklch(70% 0.18 32); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
     .recorder-card.recording .recorder-timer { color: oklch(62% 0.22 25); }
 
     .signal-strip { position: relative; height: 4px; background: oklch(20% 0.04 260); border-radius: 2px; overflow: hidden; }
-    .signal-strip-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, oklch(55% 0.20 266), oklch(70% 0.18 266)); animation: signalSlide 2.4s linear infinite; }
+    .signal-strip-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, oklch(55% 0.20 32), oklch(70% 0.18 32)); animation: signalSlide 2.4s linear infinite; }
     .signal-strip--warn .signal-strip-fill { background: oklch(82% 0.15 90); }
     .signal-strip--bad  .signal-strip-fill { background: oklch(62% 0.22 25); animation: none; opacity: 0.4; }
     .signal-strip--idle .signal-strip-fill { background: oklch(35% 0.04 260); animation: none; opacity: 0.4; }
@@ -94,13 +94,13 @@
       transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
     }
     .source-type-btn:hover, .mode-btn:hover {
-      border-color: oklch(45% 0.20 266 / 0.5);
+      border-color: oklch(45% 0.20 32 / 0.5);
       color: var(--text-primary);
     }
     .source-type-btn.active, .mode-btn.active {
-      border-color: oklch(55% 0.20 266 / 0.7);
-      background: oklch(20% 0.08 266 / 0.45);
-      color: oklch(78% 0.14 266);
+      border-color: oklch(55% 0.20 32 / 0.7);
+      background: oklch(20% 0.08 32 / 0.45);
+      color: oklch(78% 0.14 32);
       font-weight: 600;
     }
 
@@ -166,8 +166,8 @@
     }
     .codec-tab:hover { color: var(--text-secondary); }
     .codec-tab.active {
-      color: oklch(78% 0.14 266);
-      border-bottom-color: oklch(55% 0.20 266 / 0.85);
+      color: oklch(78% 0.14 32);
+      border-bottom-color: oklch(55% 0.20 32 / 0.85);
     }
     .codec-tab-panel { display: none; padding: 14px; }
     .codec-tab-panel.active { display: block; }
@@ -178,7 +178,7 @@
       border: 1px solid oklch(28% 0.04 260 / 0.45);
       border-radius: 10px;
       background:
-        radial-gradient(ellipse 60% 40% at 50% 0%, oklch(28% 0.10 266 / 0.18), transparent 70%),
+        radial-gradient(ellipse 60% 40% at 50% 0%, oklch(28% 0.10 32 / 0.18), transparent 70%),
         oklch(11% 0.018 250 / 0.6);
       padding: 14px 16px 12px;
       display: flex; flex-direction: column; gap: 8px;
@@ -215,7 +215,7 @@
     }
     .bmd-card-trace {
       fill: none;
-      stroke: oklch(35% 0.08 266 / 0.4);
+      stroke: oklch(35% 0.08 32 / 0.4);
       stroke-width: 0.8;
       stroke-dasharray: 2 3;
     }
@@ -244,19 +244,19 @@
     }
     .bmd-port-group { transition: filter 120ms ease; }
     .bmd-port-group:hover .bmd-port-ring {
-      stroke: oklch(60% 0.18 266 / 0.8);
+      stroke: oklch(60% 0.18 32 / 0.8);
     }
     .bmd-port-group.is-selected .bmd-port-ring {
-      fill: oklch(30% 0.14 266 / 0.55);
-      stroke: oklch(75% 0.18 266);
+      fill: oklch(30% 0.14 32 / 0.55);
+      stroke: oklch(75% 0.18 32);
       stroke-width: 2;
-      filter: drop-shadow(0 0 6px oklch(60% 0.20 266 / 0.7));
+      filter: drop-shadow(0 0 6px oklch(60% 0.20 32 / 0.7));
     }
     .bmd-port-group.is-selected .bmd-port-pin {
-      fill: oklch(85% 0.10 266);
+      fill: oklch(85% 0.10 32);
     }
     .bmd-port-group.is-selected .bmd-port-label {
-      fill: oklch(82% 0.14 266);
+      fill: oklch(82% 0.14 32);
     }
   </style>
 </head>
@@ -265,8 +265,8 @@
   <!-- Sidebar -->
   <nav class="sidebar" aria-label="Main navigation">
     <div class="sidebar-brand">
-      <img src="img/dragon-logo.png?v=1" alt="Wild Dragon" class="sidebar-logo">
-      <span class="sidebar-brand-name">Z-AMPP</span>
+      <img src="img/dragon-logo.png?v=1" alt="Dragonflight" class="sidebar-logo">
+      <span class="sidebar-brand-name">Dragonflight</span>
     </div>
         <nav class="sidebar-nav">
       <a href="home.html" class="nav-item">