From 71dbb66798de566b16a0ce2ba6365e50d163bc19 Mon Sep 17 00:00:00 2001 From: MiTHRAL Date: Fri, 1 May 2026 03:14:50 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20cards=20float=20=E2=80=94=20layered=20s?= =?UTF-8?q?hadows,=20lift=20+=20scale=20on=20hover?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themepo-elegantfin.css | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/themepo-elegantfin.css b/themepo-elegantfin.css index 0922b1c..06d8950 100644 --- a/themepo-elegantfin.css +++ b/themepo-elegantfin.css @@ -223,11 +223,12 @@ body:has(#itemDetailPage) html::after, border: 1px solid rgba(56, 189, 248, 0.18) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, - 0 4px 6px rgba(0, 0, 0, 0.3), - 0 16px 40px rgba(0, 0, 0, 0.5) !important; + 0 2px 4px rgba(0, 0, 0, 0.4), + 0 8px 16px rgba(0, 0, 0, 0.45), + 0 24px 48px rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; - transition: border-color 200ms, box-shadow 200ms, transform 125ms !important; + transition: border-color 250ms, box-shadow 250ms, transform 250ms ease-out !important; } /* Subtle sheen on the image itself */ @@ -245,14 +246,16 @@ body:has(#itemDetailPage) html::after, z-index: 1; } -/* Hover: lift + arcane glow */ +/* Hover: lift off surface + arcane glow */ .card-hoverable:hover .cardScalable { + transform: translateY(-6px) scale(1.02) !important; border-color: rgba(56, 189, 248, 0.5) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset, - 0 0 18px rgba(56, 189, 248, 0.18), - 0 20px 50px rgba(0, 0, 0, 0.55), - 0 4px 6px rgba(0, 0, 0, 0.3) !important; + 0 0 20px rgba(56, 189, 248, 0.2), + 0 8px 16px rgba(0, 0, 0, 0.5), + 0 32px 64px rgba(0, 0, 0, 0.55), + 0 48px 80px rgba(0, 0, 0, 0.3) !important; } /* Library cards (visualCardBox) */ @@ -266,17 +269,21 @@ body:has(#itemDetailPage) html::after, border: 1px solid rgba(56, 189, 248, 0.18) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, - 0 4px 6px rgba(0, 0, 0, 0.3), - 0 16px 40px rgba(0, 0, 0, 0.5) !important; - transition: border-color 200ms, box-shadow 200ms !important; + 0 2px 4px rgba(0, 0, 0, 0.4), + 0 8px 16px rgba(0, 0, 0, 0.45), + 0 24px 48px rgba(0, 0, 0, 0.4) !important; + transition: border-color 250ms, box-shadow 250ms, transform 250ms ease-out !important; } .card-hoverable:hover .visualCardBox { + transform: translateY(-6px) scale(1.02) !important; border-color: rgba(56, 189, 248, 0.5) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset, - 0 0 18px rgba(56, 189, 248, 0.18), - 0 20px 50px rgba(0, 0, 0, 0.55) !important; + 0 0 20px rgba(56, 189, 248, 0.2), + 0 8px 16px rgba(0, 0, 0, 0.5), + 0 32px 64px rgba(0, 0, 0, 0.55), + 0 48px 80px rgba(0, 0, 0, 0.3) !important; } /* Frutiger Aero glassmorphism drawer */