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
3 changed files with 86 additions and 57 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [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)


--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -609,77 +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)',
          },
        })}
      >
+        {/* Vibrant gradient background */}
+        <div
+          style={{ background: gradient }}
+          className={css({
+            position: 'absolute',
+            inset: 0,
+            zIndex: 0,
+          })}
+        />
+        {/* Dark gradient overlay for text readability */}
        <div
          className={css({
-            fontSize: '3xl',
-            mb: '3',
-            textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
+            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,
          })}
-        >
-          {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>
-          ))}
+        />
+        {/* 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.4",
+  "version": "4.48.5",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [