From ed31c7bba618c1a7b9e8f0840e0bddfec9e13f24 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 15 May 2026 14:03:52 -0400
Subject: [PATCH] Redesign header with neon cyberpunk effects

Title improvements:
- Add cyan-to-blue gradient text for dynamic look
- Multi-layer drop-shadow glow effects (4px + 12px)
- Text-shadow for additional neon glow
- Restructured layout: logo + title on one line, tagline below

Logo:
- Add cyan glow effect with drop-shadow filter
- Maintains 28px height with better visual impact

Tagline:
- New subtitle '~ DISC & CASE DESIGN STUDIO ~'
- Styled in bright cyan neon color
- Cyan text-shadow for layered glow effect
- Pixel-style spacing with wider letter-spacing
- Centered layout for visual balance

Result: Full neon cyberpunk aesthetic on header!

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/index.html | 46 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/index.html b/src/index.html
index d731ae8..5f49547 100644
--- a/src/index.html
+++ b/src/index.html
@@ -104,14 +104,50 @@
       padding: 26px;
     }
 
+    .appHeader {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .appLogoRow {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .appLogo {
+      height: 28px;
+      width: auto;
+      filter: drop-shadow(0 0 4px rgba(0, 217, 255, 0.6)) drop-shadow(0 0 8px rgba(0, 217, 255, 0.3));
+    }
+
     h1 {
       font-size: 0.9rem;
       line-height: 1.2;
-      margin: 0 0 6px;
+      margin: 0;
       font-family: 'Press Start 2P', cursive;
       font-weight: normal;
       letter-spacing: 0.08em;
       white-space: nowrap;
+      background: linear-gradient(90deg, #00d9ff 0%, #0099ff 50%, #00d9ff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
+      filter: drop-shadow(0 0 4px rgba(0, 217, 255, 0.6)) drop-shadow(0 0 12px rgba(0, 217, 255, 0.3));
+    }
+
+    .appTagline {
+      font-size: 0.55rem;
+      letter-spacing: 0.15em;
+      color: #00d9ff;
+      text-align: center;
+      text-shadow: 0 0 8px rgba(0, 217, 255, 0.7), 0 0 16px rgba(0, 217, 255, 0.3);
+      font-family: 'VT323', 'Courier New', monospace;
+      font-weight: normal;
+      margin: 0;
+      line-height: 1;
     }
 
     .subhead {
@@ -1435,7 +1471,13 @@
   <div class="app">
     <aside>
       <div class="appTitle">
-        <h1><img src="logo.gif" alt="CaseWrap" style="height: 28px; width: auto; vertical-align: middle; margin-right: 8px;" /> CaseWrap Studio</h1>
+        <div class="appHeader">
+          <div class="appLogoRow">
+            <img src="logo.gif" alt="CaseWrap" class="appLogo" />
+            <h1>CaseWrap</h1>
+          </div>
+          <div class="appTagline">~ DISC & CASE DESIGN STUDIO ~</div>
+        </div>
         <p class="subhead">Design printable case wraps and disc labels, then save, print, or share them on Nostr.</p>
       </div>