From b62f8b8eaa916a70f2ec07ea8f9082e00403031b Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Thu, 12 Mar 2026 11:51:09 +0300
Subject: [PATCH] Enhance app title with Orbitron font, gradient shimmer, and
 text stroke

Load Orbitron from Google Fonts for the h1 title and version badge.
Add animated gradient shimmer sweep and accent-colored text outline.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/wled_controller/static/css/layout.css | 32 ++++++++++++++++---
 .../src/wled_controller/templates/index.html  |  3 ++
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/server/src/wled_controller/static/css/layout.css b/server/src/wled_controller/static/css/layout.css
index a3223b1..dd3fbd7 100644
--- a/server/src/wled_controller/static/css/layout.css
+++ b/server/src/wled_controller/static/css/layout.css
@@ -17,8 +17,31 @@ header {
 }
 
 h1 {
-    font-size: 1.25rem;
-    color: var(--primary-text-color);
+    font-family: 'Orbitron', sans-serif;
+    font-size: 1.15rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    -webkit-text-stroke: 0.5px var(--primary-color);
+    paint-order: stroke fill;
+    background: linear-gradient(
+        120deg,
+        var(--primary-color) 0%,
+        var(--primary-text-color) 35%,
+        var(--primary-color) 50%,
+        var(--primary-text-color) 65%,
+        var(--primary-color) 100%
+    );
+    background-size: 250% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: titleShimmer 6s ease-in-out infinite;
+}
+
+@keyframes titleShimmer {
+    0%, 100% { background-position: 100% 50%; }
+    50%      { background-position: 0% 50%; }
 }
 
 h2 {
@@ -78,8 +101,9 @@ h2 {
 }
 
 #server-version {
-    font-size: 0.75rem;
-    font-weight: 400;
+    font-family: 'Orbitron', sans-serif;
+    font-size: 0.65rem;
+    font-weight: 700;
     color: var(--text-secondary);
     background: var(--border-color);
     padding: 2px 8px;
diff --git a/server/src/wled_controller/templates/index.html b/server/src/wled_controller/templates/index.html
index c9367f3..d71a516 100644
--- a/server/src/wled_controller/templates/index.html
+++ b/server/src/wled_controller/templates/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LED Grab</title>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>💡</text></svg>">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
     <!-- PWA -->
     <meta name="theme-color" content="#1a1a1a">
     <meta name="apple-mobile-web-app-capable" content="yes">