From 36fe4a6f0f6567648f7c27cef12f3a05d3a194f7 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sun, 27 Jul 2025 21:43:06 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fix=20Card=20Hero=20Section=20In?=
 =?UTF-8?q?visible=20Text=20Issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 Root Cause:
- getTCGGradient() returned Tailwind classes (from-purple-600)
- CSS linear-gradient() received invalid syntax after string replacement
- Background gradient wasn't rendering, leaving white text on light background
- Text became completely invisible (only visible when highlighted)

✅ Solution:
- Fixed getTCGGradient() to return proper CSS color values
- Removed broken string replacement logic
- Used proper CSS gradient syntax: linear-gradient(135deg, #color1, #color2, #color3)
- White text now properly visible on colored gradient backgrounds

🎨 Color Improvements:
- MTG: Purple gradient (#9333ea, #8b5cf6, #4f46e5)
- Pokemon: Blue gradient (#2563eb, #3b82f6, #0891b2)
- Lorcana: Pink/Purple gradient (#db2777, #ec4899, #a855f7)
- Default: Gray gradient for unknown games

The card hero section should now be fully visible in all themes! 🌟
---
 pages/card/[id].js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/card/[id].js b/pages/card/[id].js
index b458d16..a366b8e 100644
--- a/pages/card/[id].js
+++ b/pages/card/[id].js
@@ -134,11 +134,11 @@ export default function CardDetail() {
 
   const getTCGGradient = (game) => {
     const gradients = {
-      'MTG': 'from-purple-600 via-purple-500 to-indigo-600',
-      'Pokemon': 'from-blue-600 via-blue-500 to-cyan-600',
-      'Lorcana': 'from-pink-600 via-pink-500 to-purple-600'
+      'MTG': '#9333ea, #8b5cf6, #4f46e5',
+      'Pokemon': '#2563eb, #3b82f6, #0891b2',
+      'Lorcana': '#db2777, #ec4899, #a855f7'
     };
-    return gradients[game] || 'from-gray-600 to-gray-700';
+    return gradients[game] || '#4b5563, #374151';
   };
 
   const getTCGIcon = (game) => {
@@ -338,7 +338,7 @@ export default function CardDetail() {
       <div 
         className="relative min-h-96 flex items-center justify-center overflow-hidden"
         style={{
-          background: `linear-gradient(135deg, ${getTCGGradient(card.game).replace('from-', '').replace('via-', '').replace('to-', '')})`
+          background: `linear-gradient(135deg, ${getTCGGradient(card.game)})`
         }}
       >
         {/* Background Pattern */}
@@ -385,7 +385,7 @@ export default function CardDetail() {
             </div>
 
             {/* Card Info */}
-            <div className="text-white">
+            <div style={{ color: 'white' }}>
               <div className="mb-6">
                 <h1 className="text-4xl font-bold mb-2">{card.name}</h1>
                 <p className="text-xl opacity-90 mb-4">{card.oracle_text || card.card_type}</p>