From 120959365ee0d467a618d44efaa71b68f8701040 Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Wed, 22 Apr 2026 18:47:05 +0200
Subject: [PATCH] Apply liquid glass to recipe cards

---
 index.html             | 57 ++++++++++++++++++++++++++++++++++++++++++
 js/views/RecipeList.js |  2 +-
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 24ad927..06701e5 100644
--- a/index.html
+++ b/index.html
@@ -383,11 +383,68 @@
             font-size: 0.54rem;
             line-height: 0.72rem;
         }
+        #recipe-grid > .recipe-catalog-card {
+            background: rgba(var(--surface-rgb), 0.7) !important;
+            background-image: none !important;
+            border: 1px solid rgba(255, 255, 255, 0.34) !important;
+            border-radius: 1.08rem !important;
+            box-shadow:
+                0 1px 2px rgba(var(--overlay-rgb), 0.06),
+                0 8px 18px rgba(var(--overlay-rgb), 0.08) !important;
+            backdrop-filter: blur(14px) saturate(140%);
+            -webkit-backdrop-filter: blur(14px) saturate(140%);
+        }
+        .dark #recipe-grid > .recipe-catalog-card {
+            background: rgba(var(--surface-rgb), 0.62) !important;
+            border-color: rgba(255, 255, 255, 0.1) !important;
+            box-shadow:
+                0 1px 2px rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.26) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-media {
+            height: 5.45rem;
+            background: rgb(var(--skeleton-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-body {
+            padding: 0.62rem;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-title {
+            min-height: 2.64rem;
+            margin-bottom: 0.5rem;
+            font-size: 0.68rem;
+            font-weight: 650 !important;
+            line-height: 0.88rem;
+            color: rgb(var(--text-emphasis-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-meta {
+            margin-bottom: 0;
+            padding-top: 0.1rem;
+            color: rgb(var(--text-muted-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-meta i {
+            color: rgb(var(--text-dim-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card > div:first-child::after {
+            display: none;
+        }
+        #recipe-grid > .recipe-catalog-card:active {
+            transform: scale(0.985);
+        }
         #recipe-grid > *:hover,
         #planner-picker-grid > *:hover {
             transform: translateY(-2px);
             box-shadow: none !important;
         }
+        #recipe-grid > .recipe-catalog-card:hover {
+            box-shadow:
+                0 2px 4px rgba(var(--overlay-rgb), 0.08),
+                0 12px 24px rgba(var(--overlay-rgb), 0.12) !important;
+        }
+        .dark #recipe-grid > .recipe-catalog-card:hover {
+            box-shadow:
+                0 2px 4px rgba(0, 0, 0, 0.24),
+                0 14px 30px rgba(0, 0, 0, 0.34) !important;
+        }
         #recipe-grid > * img,
         #planner-picker-grid > * img {
             transition: transform 240ms ease;
diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js
index 75362f1..ea67326 100644
--- a/js/views/RecipeList.js
+++ b/js/views/RecipeList.js
@@ -78,7 +78,7 @@ function renderGrid() {
         emptyStateEl: emptyState,
         recipes: getFilteredRecipes(),
         showSlotLabels: false,
-        cardClassName: 'recipe-list-card',
+        cardClassName: 'recipe-list-card recipe-catalog-card',
     });
     syncRecipeTopbarUI();
     requestAnimationFrame(syncRecipeScrollShadow);