From 29017b1d75801f2142fee281b0ff7e164c4d134a Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Thu, 21 May 2026 18:08:42 -0500
Subject: [PATCH] feat: change large card hover

---
 src/components/cards/LargeBlogLeftCard.astro  | 2 +-
 src/components/cards/LargeBlogRightCard.astro | 2 +-
 src/styles/global.css                         | 3 ++-
 src/styles/utilities-cards.css                | 7 +++++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/cards/LargeBlogLeftCard.astro b/src/components/cards/LargeBlogLeftCard.astro
index 8993e9c..5bf5f15 100644
--- a/src/components/cards/LargeBlogLeftCard.astro
+++ b/src/components/cards/LargeBlogLeftCard.astro
@@ -30,7 +30,7 @@ const { post } = Astro.props;
         inferSize={true}
       />
     </div>
-    <div class="flex flex-col justify-center bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
+    <div class="card-base-hidden-md flex flex-col justify-center p-6 gap-4">
       <h2 class="card-text-header">
         {post.title}
       </h2>
diff --git a/src/components/cards/LargeBlogRightCard.astro b/src/components/cards/LargeBlogRightCard.astro
index 18a6bae..dc0839d 100644
--- a/src/components/cards/LargeBlogRightCard.astro
+++ b/src/components/cards/LargeBlogRightCard.astro
@@ -20,7 +20,7 @@ const { post } = Astro.props;
     href={`/blog/${post.slug}`}
     data-astro-prefetch
   >
-    <div class="flex flex-col bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
+    <div class="card-base-hidden-md flex flex-col p-6 gap-4">
       <h2 class="card-text-header">
         {post.title}
       </h2>
diff --git a/src/styles/global.css b/src/styles/global.css
index 12d1b9d..91120cc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+
 @import './utilities-buttons.css';
 @import './utilities-cards.css';
 @import './utilities-misc.css';
@@ -47,7 +48,7 @@
   /* Background colors */
   --color-background: light-dark(var(--color-neutral-200), var(--color-mist-800));
   --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-mist-900) 20%, transparent));
-  --color-background-card: light-dark(color-mix(in srgb, var(--color-mist-100) 80%, transparent), color-mix(in srgb, var(--color-mist-900) 50%, transparent));
+  --color-background-card: light-dark(color-mix(in srgb, var(--color-mist-100) 80%, transparent), color-mix(in srgb, var(--color-mist-900) 40%, transparent));
 
   --color-background-1: light-dark(color-mix(in srgb, var(--color-mist-200) 75%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 95%, var(--color-mist-950)));
   --color-background-2: light-dark(color-mix(in srgb, var(--color-mist-400) 10%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 80%, var(--color-mist-950)));
diff --git a/src/styles/utilities-cards.css b/src/styles/utilities-cards.css
index 9a05786..bdd3f9e 100644
--- a/src/styles/utilities-cards.css
+++ b/src/styles/utilities-cards.css
@@ -13,6 +13,13 @@
          hover:bg-mist-400/20 dark:hover:bg-mist-800/40
 }
 
+@utility card-base-hidden-md {
+  @apply transition-all duration-300
+         rounded-b-2xl
+         bg-background-card md:bg-transparent
+         group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-mist-900/70 md:dark:group-hover:bg-transparent
+}
+
 @utility card-hover-icon-color {
   @apply transition-all duration-300
          text-primary