From 702187c1dce6a59e5cc6521439c612f2a05f2db2 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Tue, 2 Jun 2026 19:30:41 +0000
Subject: [PATCH] revert: restore orange accent + original home layout

- Revert accent from Flame Blue #1025A1 to electric amber #E8821C
- Restore all rgba accent values to orange spectrum
- Revert avatar to bg-3 background + accent text (was blue bg + white)
- Revert primary button text to dark #0a0c10 (was white on blue)
- Restore centered hero with logo pulse + 'Let's Create' kicker
- Restore single-grid tile layout (all tiles in one launcher-grid)
- Restore settings as separate centered row below main grid
- Restore centered footer + large wordmark with amber glow

Co-Authored-By: OWL <noreply@anthropic.com>
---
 services/web-ui/public/app.jsx          |   6 +-
 services/web-ui/public/screens-auth.jsx |   2 +-
 services/web-ui/public/screens-home.jsx |  50 ++++--------
 services/web-ui/public/styles-fixes.css | 104 ++++++++++++++----------
 services/web-ui/public/styles-rest.css  |  10 +--
 services/web-ui/public/styles.css       |  19 +++--
 6 files changed, 96 insertions(+), 95 deletions(-)

diff --git a/services/web-ui/public/app.jsx b/services/web-ui/public/app.jsx
index 8078127..fe67838 100644
--- a/services/web-ui/public/app.jsx
+++ b/services/web-ui/public/app.jsx
@@ -1,6 +1,6 @@
 // app.jsx - main shell
 
-const ACCENT = '#1025A1';
+const ACCENT = '#E8821C';
 
 function App() {
   const [route, setRoute] = React.useState('home');
@@ -41,8 +41,8 @@ function App() {
     document.documentElement.style.setProperty('--accent', ACCENT);
     document.documentElement.style.setProperty('--accent-soft', hexToRgba(ACCENT, 0.14));
     document.documentElement.style.setProperty('--accent-soft-2', hexToRgba(ACCENT, 0.22));
-    document.documentElement.style.setProperty('--accent-text', '#C7CFEA'); // Halo — readable on dark
-    document.documentElement.style.setProperty('--accent-hover', '#1830B8');
+    document.documentElement.style.setProperty('--accent-text', lighten(ACCENT, 0.25));
+    document.documentElement.style.setProperty('--accent-hover', lighten(ACCENT, 0.08));
   }, []);
 
   React.useEffect(() => {
diff --git a/services/web-ui/public/screens-auth.jsx b/services/web-ui/public/screens-auth.jsx
index f912077..f1e3a0e 100644
--- a/services/web-ui/public/screens-auth.jsx
+++ b/services/web-ui/public/screens-auth.jsx
@@ -76,7 +76,7 @@
         style={{
           width: '100%',
           background: disabled ? 'var(--bg-3)' : 'var(--accent)',
-          color: '#fff',
+          color: disabled ? 'var(--text-3)' : '#0a0c10',
           border: 'none',
           borderRadius: 4,
           padding: '9px',
diff --git a/services/web-ui/public/screens-home.jsx b/services/web-ui/public/screens-home.jsx
index 55c6cb3..5a11986 100644
--- a/services/web-ui/public/screens-home.jsx
+++ b/services/web-ui/public/screens-home.jsx
@@ -134,6 +134,7 @@ function Home({ navigate }) {
       <div className="launcher-inner">
         <div className="launcher-hero">
           <span className="launcher-logo-wrap">
+            <span className="launcher-logo-pulse" aria-hidden="true" />
             <img
               className="launcher-logo"
               src="img/dragon-logo.png"
@@ -141,17 +142,15 @@ function Home({ navigate }) {
               draggable="false"
             />
           </span>
-          <div className="launcher-hero-text">
-            <h1 className="launcher-wordmark">DRAGONFLIGHT</h1>
-            <p className="launcher-tagline">
-              Media Asset Management &amp; Production Platform
-            </p>
-          </div>
+          <h1 className="launcher-wordmark">DRAGONFLIGHT</h1>
+          <p className="launcher-kicker">Let's Create</p>
+          <p className="launcher-tagline">
+            Media Asset Management &amp; Production Platform
+          </p>
         </div>
 
-        {/* Primary ops: Library, Recorders, Playout */}
         <div className="launcher-grid">
-          {tiles.slice(0, 3).map(t => (
+          {tiles.map(t => (
             <button
               key={t.id}
               className={'launcher-tile tone-' + t.tone}
@@ -168,55 +167,38 @@ function Home({ navigate }) {
               </span>
             </button>
           ))}
-        </div>
 
-        {/* Secondary: Downloads, Jobs, Dashboard, Settings — smaller tiles */}
-        <div className="launcher-settings-row">
-          {tiles.slice(3).map(t => (
-            <button
-              key={t.id}
-              className={'launcher-tile tone-' + t.tone + ' launcher-tile-secondary'}
-              onClick={() => t.id === '__downloads' ? setShowDownloads(true) : navigate(t.id)}
-            >
-              <span className="launcher-tile-icon">
-                <Icon name={t.icon} size={20} />
-              </span>
-              <span className="launcher-tile-label">{t.label}</span>
-              <span className="launcher-tile-sub">{t.sub}</span>
-              <span className="launcher-tile-desc">{t.desc}</span>
-              <span className="launcher-tile-arrow">
-                <Icon name="arrowRight" size={13} />
-              </span>
-            </button>
-          ))}
           <button
             className="launcher-tile tone-ghost launcher-tile-secondary"
             onClick={() => navigate('dashboard')}
           >
             <span className="launcher-tile-icon">
-              <Icon name="layout" size={20} />
+              <Icon name="layout" size={22} />
             </span>
             <span className="launcher-tile-label">Dashboard</span>
             <span className="launcher-tile-sub">Operations view</span>
             <span className="launcher-tile-desc">
-              Live recorders, job queue, cluster health.
+              Recent activity, job queue, cluster health.
             </span>
             <span className="launcher-tile-arrow">
-              <Icon name="arrowRight" size={13} />
+              <Icon name="arrowRight" size={14} />
             </span>
           </button>
+        </div>
+
+        <div className="launcher-settings-row">
           <button
-            className={'launcher-tile tone-' + settingsTile.tone + ' launcher-tile-secondary launcher-tile-settings'}
+            className={'launcher-tile tone-' + settingsTile.tone + ' launcher-tile-settings'}
             onClick={() => navigate(settingsTile.id)}
           >
             <span className="launcher-tile-icon">
-              <Icon name={settingsTile.icon} size={20} />
+              <Icon name={settingsTile.icon} size={26} />
             </span>
             <span className="launcher-tile-label">{settingsTile.label}</span>
             <span className="launcher-tile-sub">{settingsTile.sub}</span>
             <span className="launcher-tile-desc">{settingsTile.desc}</span>
             <span className="launcher-tile-arrow">
-              <Icon name="arrowRight" size={13} />
+              <Icon name="arrowRight" size={14} />
             </span>
           </button>
         </div>
diff --git a/services/web-ui/public/styles-fixes.css b/services/web-ui/public/styles-fixes.css
index a9e5296..cd70853 100644
--- a/services/web-ui/public/styles-fixes.css
+++ b/services/web-ui/public/styles-fixes.css
@@ -253,10 +253,10 @@
   /* Convert the dark logo to white so it pops on the dark sidebar.
      brightness(0) collapses everything to black, invert(1) flips to white.
      Works on both the original dark PNG and any transparent white PNG. */
-  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(16, 37, 161, 0.35));
+  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(232, 130, 28, 0.30));
 }
 .sidebar-header:hover .brand-logo {
-  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(16, 37, 161, 0.55));
+  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(232, 130, 28, 0.55));
 }
 
 /* ============================================================
@@ -268,7 +268,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   background:
-    radial-gradient(1100px 500px at 50% -10%, rgba(16, 37, 161, 0.08), transparent 60%),
+    radial-gradient(1100px 500px at 50% -10%, rgba(232, 130, 28, 0.07), transparent 60%),
     var(--bg-0);
   display: flex;
   align-items: flex-start;
@@ -280,20 +280,19 @@
   max-width: 1160px;
   display: flex;
   flex-direction: column;
-  align-items: stretch;
-  gap: 32px;
+  align-items: center;
+  gap: 40px;
 }
 
 .launcher-hero {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
-  gap: 18px;
-  text-align: left;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--border);
+  gap: 14px;
+  text-align: center;
+  margin-top: 8px;
 }
-/* Logo wrapper — compact, left-aligned mark. */
+/* Logo wrapper holds the animated pulse halo behind the image. */
 .launcher-logo-wrap {
   position: relative;
   display: inline-grid;
@@ -302,7 +301,19 @@
   height: 52px;
   flex-shrink: 0;
 }
-.launcher-logo-pulse { display: none; }
+.launcher-logo-pulse {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
+  animation: logoPulse 3s ease-in-out infinite;
+  z-index: 0;
+}
+@keyframes logoPulse {
+  0%, 100% { transform: scale(1); opacity: 0.6; }
+  50% { transform: scale(1.15); opacity: 1; }
+}
 .launcher-logo {
   position: relative;
   z-index: 1;
@@ -311,7 +322,7 @@
   object-fit: contain;
   filter:
     brightness(0) invert(1)
-    drop-shadow(0 0 8px rgba(16, 37, 161, 0.35));
+    drop-shadow(0 0 8px rgba(232, 130, 28, 0.35));
   animation: launcherLogoIn 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
 }
 @keyframes launcherLogoIn {
@@ -319,43 +330,55 @@
   to   { opacity: 1; transform: scale(1); }
 }
 @media (prefers-reduced-motion: reduce) {
+  .launcher-logo-pulse { animation: none; opacity: 0.5; }
   .launcher-logo { animation: none; }
 }
-.launcher-hero-text {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  flex: 1;
-  min-width: 0;
-}
+
 .launcher-wordmark {
   margin: 0;
-  font-size: 22px;
+  font-size: 44px;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.12em;
   line-height: 1;
   color: var(--text-1);
-  text-shadow: none;
+  text-shadow: 0 0 32px rgba(232, 130, 28, 0.15);
+}
+.launcher-kicker {
+  margin: 2px 0 0;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
 }
-.launcher-kicker { display: none; }
 .launcher-tagline {
   margin: 0;
   color: var(--text-3);
-  font-size: 12.5px;
-  letter-spacing: 0.01em;
+  font-size: 13.5px;
+  letter-spacing: 0.02em;
+}
+@media (max-width: 480px) {
+  .launcher-tagline { font-size: 11.5px; letter-spacing: 0; }
+}
+
+.launcher-tagline-motto {
+  margin-top: 6px;
+  color: var(--accent);
+  font-style: italic;
+  font-size: 15px;
+  letter-spacing: 0.04em;
 }
-.launcher-tagline-motto { display: none; }
 
 .launcher-grid {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
+  gap: 14px;
 }
 @media (max-width: 960px) { .launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 620px) { .launcher-grid { grid-template-columns: 1fr; } }
 
-/* Secondary tiles: smaller vertical footprint, quieter treatment. */
+/* Settings sits on its own centered row beneath the main grid. */
 .launcher-tile-secondary {
   min-height: 120px;
   padding: 16px 18px 18px;
@@ -380,20 +403,15 @@
 /* Settings row: holds the 4 secondary tiles. */
 .launcher-settings-row {
   width: 100%;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
+  display: flex;
+  justify-content: center;
 }
 .launcher-tile-settings {
   width: 100%;
-  max-width: 100%;
-}
-@media (max-width: 960px) {
-  .launcher-settings-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (max-width: 620px) {
-  .launcher-settings-row { grid-template-columns: 1fr; }
+  max-width: calc((100% - 28px) / 3);
 }
+@media (max-width: 960px) { .launcher-tile-settings { max-width: calc((100% - 14px) / 2); } }
+@media (max-width: 620px) { .launcher-tile-settings { max-width: 100%; } }
 
 .launcher-tile {
   position: relative;
@@ -500,10 +518,10 @@
 /* Tone variants - colour the icon tile + halo, leave the body text
    neutral so the tile reads as a button, not a banner. */
 .launcher-tile.tone-accent {
-  --tile-tint: rgba(16, 37, 161, 0.18);
+  --tile-tint: rgba(232, 130, 28, 0.15);
   --tile-icon-bg: var(--accent-soft);
   --tile-icon-fg: var(--accent-text);
-  --tile-icon-border: rgba(16, 37, 161, 0.30);
+  --tile-icon-border: rgba(232, 130, 28, 0.28);
 }
 .launcher-tile.tone-live {
   --tile-tint: rgba(255, 59, 48, 0.18);
@@ -578,7 +596,7 @@
 
 .launcher-footer {
   margin-top: 20px;
-  text-align: left;
+  text-align: center;
   font-size: 11px;
   letter-spacing: 0.04em;
   color: var(--text-4);
@@ -667,7 +685,7 @@ button.btn.primary:active {
   stroke-width: 1.5;
 }
 .bmd-card-trace {
-  stroke: rgba(16, 37, 161, 0.12);
+  stroke: rgba(232, 130, 28, 0.10);
   stroke-width: 0.5;
   fill: none;
 }
diff --git a/services/web-ui/public/styles-rest.css b/services/web-ui/public/styles-rest.css
index 8f37a80..9b4961a 100644
--- a/services/web-ui/public/styles-rest.css
+++ b/services/web-ui/public/styles-rest.css
@@ -171,7 +171,7 @@
   gap: 20px;
   align-items: stretch;
   background:
-    radial-gradient(ellipse at top, rgba(16,37,161,0.05), transparent 60%),
+    radial-gradient(ellipse at top, rgba(232,130,28,0.05), transparent 60%),
     var(--bg-0);
 }
 .decklink-card-face {
@@ -971,7 +971,7 @@
   border-bottom: 1px solid var(--border);
 }
 .epg-week-day:last-child { border-bottom: 0; }
-.epg-week-day.today { background: linear-gradient(180deg, rgba(16,37,161,0.04) 0%, transparent 80%); }
+.epg-week-day.today { background: linear-gradient(180deg, rgba(232,130,28,0.04) 0%, transparent 80%); }
 .epg-week-dayhead {
   display: flex; align-items: baseline; gap: 10px;
   padding: 10px 20px 6px;
@@ -1065,7 +1065,7 @@
   border-color: var(--accent-soft-2);
   background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-1) 60%);
 }
-.stat-card--active .value { color: var(--accent-text); }
+.stat-card--active .value { color: var(--accent); }
 .stat-card--failed {
   border-color: rgba(255,91,91,0.25);
   background: linear-gradient(180deg, var(--danger-soft) 0%, var(--bg-1) 60%);
@@ -1236,7 +1236,7 @@
 .token-tier.popular {
   border-color: var(--accent);
   background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-1) 40%);
-  box-shadow: 0 0 24px rgba(16,37,161,0.12);
+  box-shadow: 0 0 24px rgba(232,130,28,0.12);
 }
 .token-tier-badge {
   position: absolute;
@@ -1359,7 +1359,7 @@
   border-radius: 99px;
   flex-shrink: 0;
 }
-.search-result-kind.kind-asset { color: #C7CFEA; border-color: rgba(16,37,161,0.30); }
+.search-result-kind.kind-asset { color: #FECF8A; border-color: rgba(232,130,28,0.25); }
 .search-result-kind.kind-project { color: #FFD89B; border-color: rgba(245,166,35,0.25); }
 .search-result-kind.kind-recorder { color: #FFAFAF; border-color: rgba(255,91,91,0.25); }
 .search-result-kind.kind-job { color: #9EE7D2; border-color: rgba(45,212,168,0.25); }
diff --git a/services/web-ui/public/styles.css b/services/web-ui/public/styles.css
index 488061f..31fe18d 100644
--- a/services/web-ui/public/styles.css
+++ b/services/web-ui/public/styles.css
@@ -18,12 +18,12 @@
   --text-3: #8B92A0;  /* WCAG AA (#133) - was #6B7280, 4.06:1 vs --bg-0; now ~7.5:1 */
   --text-4: #6B7280;
 
-  /* accent — Flame Blue (Wild Dragon brand, Pantone 286 C) */
-  --accent: #1025A1;
-  --accent-hover: #1830B8;
-  --accent-soft: rgba(16, 37, 161, 0.14);
-  --accent-soft-2: rgba(16, 37, 161, 0.22);
-  --accent-text: #C7CFEA;
+  /* accent — electric amber (broadcast tally) */
+  --accent: #E8821C;
+  --accent-hover: #F09030;
+  --accent-soft: rgba(232, 130, 28, 0.14);
+  --accent-soft-2: rgba(232, 130, 28, 0.22);
+  --accent-text: #FECF8A;
 
   /* status */
   --success: #2DD4A8;
@@ -244,10 +244,11 @@ a { color: inherit; text-decoration: none; }
 .avatar {
   width: 28px; height: 28px;
   border-radius: 50%;
-  background: var(--accent);
+  background: var(--bg-3);
+  border: 1px solid var(--border-strong);
   display: grid; place-items: center;
   font-weight: 700; font-size: 11px;
-  color: #fff;
+  color: var(--accent);
   flex-shrink: 0;
 }
 .user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
@@ -350,7 +351,7 @@ a { color: inherit; text-decoration: none; }
   transition: background 80ms, border 80ms, color 80ms;
   white-space: nowrap;
 }
-.btn.primary { background: var(--accent); color: #fff; }
+.btn.primary { background: var(--accent); color: #0a0c10; }
 .btn.primary:hover { background: var(--accent-hover); }
 .btn.ghost { background: transparent; color: var(--text-2); }
 .btn.ghost:hover { background: var(--hover); color: var(--text-1); }