From b6410c7c225f01f42d095ca270b8da7903cbfbb0 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 16:48:19 -0500
Subject: [PATCH] fix(homepage): improve text contrast on game cards with text
 shadows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added text shadows to all game card text elements for better readability
on bright gradient backgrounds:
- Icon emoji: subtle shadow
- Title: strong shadow for maximum contrast
- Description: medium shadow (also increased opacity to 0.95)
- Player count: medium shadow (increased opacity to 0.85)
- Tags: medium shadow

This ensures all text is clearly readable on all four gradient backgrounds
(purple, pink, cyan, and green).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/page.tsx | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index e119fcaf..ea7d9eda 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -622,14 +622,44 @@ function GameCard({
           },
         })}
       >
-        <div className={css({ fontSize: '3xl', mb: '3' })}>{icon}</div>
-        <h3 className={css({ fontSize: 'lg', fontWeight: 'bold', color: 'white', mb: '2' })}>
+        <div
+          className={css({
+            fontSize: '3xl',
+            mb: '3',
+            textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
+          })}
+        >
+          {icon}
+        </div>
+        <h3
+          className={css({
+            fontSize: 'lg',
+            fontWeight: 'bold',
+            color: 'white',
+            mb: '2',
+            textShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+          })}
+        >
           {title}
         </h3>
-        <p className={css({ fontSize: 'sm', color: 'rgba(255, 255, 255, 0.9)', mb: '2' })}>
+        <p
+          className={css({
+            fontSize: 'sm',
+            color: 'rgba(255, 255, 255, 0.95)',
+            mb: '2',
+            textShadow: '0 1px 4px rgba(0, 0, 0, 0.4)',
+          })}
+        >
           {description}
         </p>
-        <p className={css({ fontSize: 'xs', color: 'rgba(255, 255, 255, 0.7)', mb: '3' })}>
+        <p
+          className={css({
+            fontSize: 'xs',
+            color: 'rgba(255, 255, 255, 0.85)',
+            mb: '3',
+            textShadow: '0 1px 4px rgba(0, 0, 0, 0.4)',
+          })}
+        >
           {players}
         </p>
         <div className={hstack({ gap: '2', flexWrap: 'wrap' })}>
@@ -644,6 +674,7 @@ function GameCard({
                 color: 'white',
                 rounded: 'full',
                 fontWeight: 'semibold',
+                textShadow: '0 1px 3px rgba(0, 0, 0, 0.4)',
               })}
             >
               {tag}