From 059336536f4eaad741c4ff6c8be42d0646a379e0 Mon Sep 17 00:00:00 2001
From: clucraft <clucraft@users.noreply.github.com>
Date: Fri, 23 Jan 2026 10:24:42 -0500
Subject: [PATCH] Add ghostly wispy effect to Ghost text in navbar

- Ghost text fades from solid to transparent (left to right)
- Soft ethereal glow effect via text-shadow
- Enhanced glow on hover
- Works in both light and dark modes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/Layout.tsx | 35 +++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index e4366fd..44ef142 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -109,6 +109,36 @@ export default function Layout({ children }: LayoutProps) {
           height: 28px;
         }
 
+        .navbar-brand-text {
+          display: flex;
+        }
+
+        .navbar-brand-ghost {
+          background: linear-gradient(90deg, var(--text) 0%, var(--text) 20%, transparent 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          text-shadow: 0 0 8px var(--ghost-glow, rgba(150, 150, 150, 0.4));
+          position: relative;
+        }
+
+        .navbar-brand:hover .navbar-brand-ghost {
+          background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 20%, transparent 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          text-shadow: 0 0 12px var(--primary-glow, rgba(99, 102, 241, 0.5));
+        }
+
+        [data-theme="dark"] {
+          --ghost-glow: rgba(200, 200, 200, 0.3);
+          --primary-glow: rgba(129, 140, 248, 0.5);
+        }
+
+        [data-theme="light"] {
+          --ghost-glow: rgba(100, 100, 100, 0.25);
+          --primary-glow: rgba(99, 102, 241, 0.4);
+        }
+
         .navbar-user {
           display: flex;
           align-items: center;
@@ -266,7 +296,10 @@ export default function Layout({ children }: LayoutProps) {
         <div className="navbar-content">
           <Link to="/" className="navbar-brand">
             <img src="/icon.svg" alt="" className="navbar-brand-icon" />
-            <span>PriceGhost</span>
+            <span className="navbar-brand-text">
+              <span>Price</span>
+              <span className="navbar-brand-ghost">Ghost</span>
+            </span>
           </Link>
 
           <div className="navbar-user">