chore(release): 4.48.5 [skip ci]

## [4.48.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.4...v4.48.5) (2025-10-20) ### Bug Fixes * **homepage:** add dark gradient overlay for better text contrast on game cards ([6410b21](6410b21f82))
fix(homepage): add dark gradient overlay for better text contrast on game cards
2025-10-20 22:03:34 +00:00 · 2025-10-20 17:02:24 -05:00 · 2025-10-20 21:49:42 +00:00 · 2025-10-20 16:48:35 -05:00
3 changed files with 96 additions and 29 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [4.48.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.4...v4.48.5) (2025-10-20)
+
+
+### Bug Fixes
+
+* **homepage:** add dark gradient overlay for better text contrast on game cards ([6410b21](https://github.com/antialias/soroban-abacus-flashcards/commit/6410b21f829810af27e42d188295630bd67d6b6b))
+
+## [4.48.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.3...v4.48.4) (2025-10-20)
+
+
+### Bug Fixes
+
+* **homepage:** improve text contrast on game cards with text shadows ([b6410c7](https://github.com/antialias/soroban-abacus-flashcards/commit/b6410c7c225f01f42d095ca270b8da7903cbfbb0))
+
 ## [4.48.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.2...v4.48.3) (2025-10-20)


--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -609,46 +609,99 @@ function GameCard({
  return (
    <Link href={href}>
      <div
-        style={{ background: gradient }}
        className={css({
          rounded: 'xl',
          p: '6',
          shadow: 'lg',
          transition: 'all 0.3s ease',
          cursor: 'pointer',
+          position: 'relative',
+          overflow: 'hidden',
          _hover: {
            transform: 'translateY(-6px) scale(1.02)',
            shadow: '0 25px 50px rgba(0, 0, 0, 0.3)',
          },
        })}
      >
-        <div className={css({ fontSize: '3xl', mb: '3' })}>{icon}</div>
-        <h3 className={css({ fontSize: 'lg', fontWeight: 'bold', color: 'white', mb: '2' })}>
-          {title}
-        </h3>
-        <p className={css({ fontSize: 'sm', color: 'rgba(255, 255, 255, 0.9)', mb: '2' })}>
-          {description}
-        </p>
-        <p className={css({ fontSize: 'xs', color: 'rgba(255, 255, 255, 0.7)', mb: '3' })}>
-          {players}
-        </p>
-        <div className={hstack({ gap: '2', flexWrap: 'wrap' })}>
-          {tags.map((tag) => (
-            <span
-              key={tag}
-              className={css({
-                fontSize: 'xs',
-                px: '2',
-                py: '1',
-                bg: 'rgba(255, 255, 255, 0.2)',
-                color: 'white',
-                rounded: 'full',
-                fontWeight: 'semibold',
-              })}
-            >
-              {tag}
-            </span>
-          ))}
+        {/* Vibrant gradient background */}
+        <div
+          style={{ background: gradient }}
+          className={css({
+            position: 'absolute',
+            inset: 0,
+            zIndex: 0,
+          })}
+        />
+        {/* Dark gradient overlay for text readability */}
+        <div
+          className={css({
+            position: 'absolute',
+            inset: 0,
+            background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%)',
+            zIndex: 1,
+          })}
+        />
+        {/* Content */}
+        <div className={css({ position: 'relative', zIndex: 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.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.85)',
+              mb: '3',
+              textShadow: '0 1px 4px rgba(0, 0, 0, 0.4)',
+            })}
+          >
+            {players}
+          </p>
+          <div className={hstack({ gap: '2', flexWrap: 'wrap' })}>
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className={css({
+                  fontSize: 'xs',
+                  px: '2',
+                  py: '1',
+                  bg: 'rgba(255, 255, 255, 0.2)',
+                  color: 'white',
+                  rounded: 'full',
+                  fontWeight: 'semibold',
+                  textShadow: '0 1px 3px rgba(0, 0, 0, 0.4)',
+                })}
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
        </div>
      </div>
    </Link>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.48.3",
+  "version": "4.48.5",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	9f706e9dce	chore(release): 4.48.5 [skip ci] ## [4.48.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.4...v4.48.5) (2025-10-20) ### Bug Fixes * homepage: add dark gradient overlay for better text contrast on game cards ([`6410b21`](`6410b21f82`))	2025-10-20 22:03:34 +00:00
Thomas Hallock	6410b21f82	fix(homepage): add dark gradient overlay for better text contrast on game cards Added layered approach for better text readability: - Vibrant gradient background layer (bottom) - Dark gradient overlay from transparent (top 10%) to semi-dark (bottom 50%) - Content with relative z-index positioning This keeps the colorful gradients visible while ensuring all text (titles, descriptions, tags) is clearly readable on all four cards. Gradient goes from barely visible at top to moderately dark at bottom, creating a natural fade that doesn't overwhelm the vibrant colors. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 17:02:24 -05:00
semantic-release-bot	3dc9f48d12	chore(release): 4.48.4 [skip ci] ## [4.48.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.3...v4.48.4) (2025-10-20) ### Bug Fixes * homepage: improve text contrast on game cards with text shadows ([`b6410c7`](`b6410c7c22`))	2025-10-20 21:49:42 +00:00
Thomas Hallock	b6410c7c22	fix(homepage): improve text contrast on game cards with text shadows 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>	2025-10-20 16:48:35 -05:00