From d9c65182c72576df16e65499da9bb69bd994c297 Mon Sep 17 00:00:00 2001 From: dilgenfritz Date: Mon, 3 Nov 2025 06:17:07 -0600 Subject: [PATCH] Step 3: Update tagline to synthwave typography - Updated 'Master Your Dedication' with Audiowide font - Changed to white text with magenta glow effect - Added textGlow animation for pulsing effect - Increased letter-spacing for cyberpunk aesthetic - Updated subtitle to Electrolize font with cyan color - Added cyan text-shadow glow - Subtitle now uppercase with tech styling TEST: Refresh to see tagline with white text + magenta glow, cyan subtitle --- src/styles/styles.css | 45 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 36 insertions(+), 9 deletions(-) diff --git a/src/styles/styles.css b/src/styles/styles.css index 708303c..443264b 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -151,6 +151,22 @@ body { } } +@keyframes textGlow { + from { + text-shadow: + 0 0 20px #ff00ff, + 0 0 40px #ff00ff, + 0 2px 4px rgba(0, 0, 0, 0.8); + } + to { + text-shadow: + 0 0 30px #ff00ff, + 0 0 60px #ff00ff, + 0 0 90px #ff00ff, + 0 2px 4px rgba(0, 0, 0, 0.8); + } +} + /* Enhanced Hero Section */ .hero-header { background: linear-gradient(135deg, @@ -237,19 +253,30 @@ body { } .tagline-emphasis { - font-size: clamp(1.5rem, 4vw, 2.5rem); - color: var(--text-primary); - font-weight: 600; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); - letter-spacing: 1px; + font-family: 'Audiowide', cursive; + font-size: clamp(2rem, 5vw, 3.5rem); + font-weight: 400; + color: #ffffff; + text-shadow: + 0 0 20px #ff00ff, + 0 0 40px #ff00ff, + 0 2px 4px rgba(0, 0, 0, 0.8); + text-transform: uppercase; + letter-spacing: 6px; + margin-bottom: 15px; + display: block; + animation: textGlow 2s ease-in-out infinite alternate; } .tagline-subtitle { - font-size: var(--font-lg); - color: var(--text-secondary); - font-weight: 300; + font-family: 'Electrolize', sans-serif; + font-size: 1.2rem; + color: #00ffff; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 2px; opacity: 0.9; - font-style: italic; + text-shadow: 0 0 10px #00ffff; } .hero-features {