improve card ui

src/views/Favorites/FavoritesAvatar.vue

@@ -684,6 +684,10 @@
     const hasUserSelectedAvatarGroup = ref(false);
     const remoteAvatarGroupsResolved = ref(false);
 
+    /**
+     *
+     * @param value
+     */
     function handleSortFavoritesChange(value) {
         const next = Boolean(value);
         if (next !== sortFavorites.value) {
@@ -706,11 +710,17 @@
         avatarToolbarMenuOpen.value = false;
     };
 
+    /**
+     *
+     */
     function handleAvatarImportClick() {
         closeAvatarToolbarMenu();
         showAvatarImportDialog();
     }
 
+    /**
+     *
+     */
     function handleAvatarExportClick() {
         closeAvatarToolbarMenu();
         showAvatarExportDialog();
@@ -720,6 +730,9 @@
         loadAvatarSplitterPreferences();
     });
 
+    /**
+     *
+     */
     async function loadAvatarSplitterPreferences() {
         const storedSize = await configRepository.getString('VRCX_FavoritesAvatarSplitter', '260');
         const parsedSize = Number(storedSize);
@@ -921,6 +934,11 @@
         }
     );
 
+    /**
+     *
+     * @param key
+     * @param visible
+     */
     function handleGroupMenuVisible(key, visible) {
         if (visible) {
             activeGroupMenu.value = key;
@@ -931,6 +949,9 @@
         }
     }
 
+    /**
+     *
+     */
     function ensureSelectedGroup() {
         if (selectedGroup.value && isGroupAvailable(selectedGroup.value)) {
             return;
@@ -938,6 +959,9 @@
         selectDefaultGroup();
     }
 
+    /**
+     *
+     */
     function selectDefaultGroup() {
         if (!hasUserSelectedAvatarGroup.value) {
             const remote =
@@ -967,6 +991,10 @@
         clearSelectedAvatars();
     }
 
+    /**
+     *
+     * @param group
+     */
     function isGroupAvailable(group) {
         if (!group) {
             return false;
@@ -986,6 +1014,12 @@
         return false;
     }
 
+    /**
+     *
+     * @param type
+     * @param key
+     * @param options
+     */
     function selectGroup(type, key, options = {}) {
         if (selectedGroup.value?.type === type && selectedGroup.value?.key === key) {
             return;
@@ -997,14 +1031,27 @@
         clearSelectedAvatars();
     }
 
+    /**
+     *
+     */
     function clearSelectedAvatars() {
         selectedFavoriteAvatars.value = [];
     }
 
+    /**
+     *
+     * @param type
+     * @param key
+     */
     function isGroupActive(type, key) {
         return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
     }
 
+    /**
+     *
+     * @param type
+     * @param key
+     */
     function handleGroupClick(type, key) {
         if (hasSearchInput.value) {
             avatarFavoriteSearch.value = '';
@@ -1013,6 +1060,9 @@
         selectGroup(type, key, { userInitiated: true });
     }
 
+    /**
+     *
+     */
     function startLocalGroupCreation() {
         if (!isLocalUserVrcPlusSupporter.value || isCreatingLocalGroup.value) {
             return;
@@ -1024,11 +1074,17 @@
         });
     }
 
+    /**
+     *
+     */
     function cancelLocalGroupCreation() {
         isCreatingLocalGroup.value = false;
         newLocalGroupName.value = '';
     }
 
+    /**
+     *
+     */
     function handleLocalGroupCreationConfirm() {
         const name = newLocalGroupName.value.trim();
         if (!name) {
@@ -1044,6 +1100,11 @@
         });
     }
 
+    /**
+     *
+     * @param id
+     * @param value
+     */
     function toggleAvatarSelection(id, value) {
         if (value) {
             if (!selectedFavoriteAvatars.value.includes(id)) {
@@ -1054,40 +1115,71 @@
         }
     }
 
+    /**
+     *
+     */
     function showAvatarExportDialog() {
         avatarExportDialogVisible.value = true;
     }
 
+    /**
+     *
+     */
     function handleRefreshFavorites() {
         refreshFavorites();
         getLocalAvatarFavorites();
     }
 
+    /**
+     *
+     * @param group
+     * @param visibility
+     */
     function handleVisibilitySelection(group, visibility) {
         const menuKey = remoteGroupMenuKey(group.key);
         changeAvatarGroupVisibility(group.name, visibility, menuKey);
     }
 
+    /**
+     *
+     * @param group
+     */
     function handleRemoteRename(group) {
         handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
         changeFavoriteGroupName(group);
     }
 
+    /**
+     *
+     * @param group
+     */
     function handleRemoteClear(group) {
         handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
         clearFavoriteGroup(group);
     }
 
+    /**
+     *
+     * @param groupName
+     */
     function handleLocalRename(groupName) {
         handleGroupMenuVisible(localGroupMenuKey(groupName), false);
         promptLocalAvatarFavoriteGroupRename(groupName);
     }
 
+    /**
+     *
+     * @param groupName
+     */
     function handleLocalDelete(groupName) {
         handleGroupMenuVisible(localGroupMenuKey(groupName), false);
         promptLocalAvatarFavoriteGroupDelete(groupName);
     }
 
+    /**
+     *
+     * @param groupName
+     */
     async function handleCheckInvalidAvatars(groupName) {
         handleGroupMenuVisible(localGroupMenuKey(groupName), false);
 
@@ -1178,11 +1270,18 @@
         }
     }
 
+    /**
+     *
+     */
     function handleHistoryClear() {
         handleGroupMenuVisible(historyGroupMenuKey, false);
         promptClearAvatarHistory();
     }
 
+    /**
+     *
+     * @param group
+     */
     function changeFavoriteGroupName(group) {
         const currentName = group.displayName || group.name;
         modalStore
@@ -1221,6 +1320,12 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param name
+     * @param visibility
+     * @param menuKey
+     */
     function changeAvatarGroupVisibility(name, visibility, menuKey = null) {
         const params = {
             type: 'avatar',
@@ -1243,6 +1348,10 @@
         });
     }
 
+    /**
+     *
+     * @param ctx
+     */
     function clearFavoriteGroup(ctx) {
         modalStore
             .confirm({
@@ -1260,6 +1369,10 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param group
+     */
     function promptLocalAvatarFavoriteGroupRename(group) {
         modalStore
             .prompt({
@@ -1285,6 +1398,10 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param group
+     */
     function promptLocalAvatarFavoriteGroupDelete(group) {
         modalStore
             .confirm({
@@ -1299,6 +1416,10 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param value
+     */
     function doSearchAvatarFavorites(value) {
         if (typeof value === 'string') {
             avatarFavoriteSearch.value = value;
@@ -1353,6 +1474,9 @@
     }
     const searchAvatarFavorites = debounce(doSearchAvatarFavorites, 200);
 
+    /**
+     *
+     */
     async function refreshLocalAvatarFavorites() {
         if (refreshingLocalFavorites.value) {
             return;
@@ -1399,6 +1523,9 @@
         }
     }
 
+    /**
+     *
+     */
     function cancelLocalAvatarRefresh() {
         if (!refreshingLocalFavorites.value) {
             return;
@@ -1416,6 +1543,9 @@
         refreshingLocalFavorites.value = false;
     }
 
+    /**
+     *
+     */
     function toggleSelectAllAvatars() {
         if (!activeRemoteGroup.value) {
             return;
@@ -1427,6 +1557,9 @@
         }
     }
 
+    /**
+     *
+     */
     function copySelectedAvatars() {
         if (!selectedFavoriteAvatars.value.length) {
             return;
@@ -1436,6 +1569,9 @@
         showAvatarImportDialog();
     }
 
+    /**
+     *
+     */
     function showAvatarBulkUnfavoriteSelectionConfirm() {
         if (!selectedFavoriteAvatars.value.length) {
             return;
@@ -1455,6 +1591,10 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param ids
+     */
     function bulkUnfavoriteSelectedAvatars(ids) {
         ids.forEach((id) => {
             favoriteRequest.deleteFavorite({
@@ -1473,6 +1613,10 @@
         }
     });
 
+    /**
+     *
+     * @param value
+     */
     function formatVisibility(value) {
         if (!value) {
             return '';
@@ -1568,15 +1712,14 @@
         border: 1px solid var(--border);
         padding: 8px;
         cursor: pointer;
-        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
+        transition: background-color 0.15s ease;
-        transition:
-            box-shadow 0.2s ease,
-            transform 0.2s ease;
     }
 
     .group-item:hover {
-        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
+        background-color: var(--accent);
-        transform: translateY(-2px);
+        box-shadow:
+            0 4px 6px -1px rgb(0 0 0 / 0.1),
+            0 2px 4px -2px rgb(0 0 0 / 0.1);
     }
 
     .group-item__top {
@@ -1773,19 +1916,17 @@
         border-radius: calc(8px * var(--favorites-card-scale, 1));
         padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
-        transition:
+        transition: background-color 0.15s ease;
-            border-color 0.2s ease,
-            box-shadow 0.2s ease,
-            transform 0.2s ease;
-        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
         width: 100%;
         min-width: var(--favorites-card-min-width, 240px);
         max-width: var(--favorites-card-target-width, 320px);
     }
 
     :deep(.favorites-search-card:hover) {
-        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
+        background-color: var(--accent);
-        transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
+        box-shadow:
+            0 4px 6px -1px rgb(0 0 0 / 0.1),
+            0 2px 4px -2px rgb(0 0 0 / 0.1);
     }
 
     :deep(.favorites-search-card__content) {

src/views/Favorites/FavoritesFriend.vue

@@ -1352,15 +1352,14 @@
         border: 1px solid var(--border);
         padding: 8px;
         cursor: pointer;
-        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
+        transition: background-color 0.15s ease;
-        transition:
-            box-shadow 0.2s ease,
-            transform 0.2s ease;
     }
 
     .group-item:hover {
-        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
+        background-color: var(--accent);
-        transform: translateY(-2px);
+        box-shadow:
+            0 4px 6px -1px rgb(0 0 0 / 0.1),
+            0 2px 4px -2px rgb(0 0 0 / 0.1);
     }
 
     .group-item__top {
@@ -1544,19 +1543,17 @@
         border-radius: calc(8px * var(--favorites-card-scale, 1));
         padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
-        transition:
+        transition: background-color 0.15s ease;
-            border-color 0.2s ease,
-            box-shadow 0.2s ease,
-            transform 0.2s ease;
-        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
         width: 100%;
         min-width: var(--favorites-card-min-width, 240px);
         max-width: var(--favorites-card-target-width, 320px);
     }
 
     :deep(.favorites-search-card:hover) {
-        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
+        background-color: var(--accent);
-        transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
+        box-shadow:
+            0 4px 6px -1px rgb(0 0 0 / 0.1),
+            0 2px 4px -2px rgb(0 0 0 / 0.1);
     }
 
     :deep(.favorites-search-card.is-selected) {

src/views/Favorites/FavoritesWorld.vue

@@ -621,11 +621,17 @@
         worldToolbarMenuOpen.value = false;
     };
 
+    /**
+     *
+     */
     function handleWorldImportClick() {
         closeWorldToolbarMenu();
         showWorldImportDialog();
     }
 
+    /**
+     *
+     */
     function handleWorldExportClick() {
         closeWorldToolbarMenu();
         showExportDialog();
@@ -635,6 +641,9 @@
         loadWorldSplitterPreferences();
     });
 
+    /**
+     *
+     */
     async function loadWorldSplitterPreferences() {
         const storedSize = await configRepository.getString('VRCX_FavoritesWorldSplitter', '260');
         const parsedSize = Number(storedSize);
@@ -889,6 +898,10 @@
 
     const getLocalRowItems = (row) => (row && Array.isArray(row.items) ? row.items : []);
 
+    /**
+     *
+     * @param value
+     */
     function handleSortFavoritesChange(value) {
         const next = Boolean(value);
         if (next !== sortFavorites.value) {
@@ -946,6 +959,11 @@
 
     onMounted(() => {});
 
+    /**
+     *
+     * @param key
+     * @param visible
+     */
     function handleGroupMenuVisible(key, visible) {
         if (visible) {
             activeGroupMenu.value = key;
@@ -956,6 +974,9 @@
         }
     }
 
+    /**
+     *
+     */
     function ensureSelectedGroup() {
         if (selectedGroup.value && isGroupAvailable(selectedGroup.value)) {
             return;
@@ -963,6 +984,11 @@
         selectDefaultGroup();
     }
 
+    /**
+     *
+     * @param type
+     * @param key
+     */
     function handleGroupClick(type, key) {
         if (hasSearchInput.value) {
             worldFavoriteSearch.value = '';
@@ -971,6 +997,9 @@
         selectGroup(type, key, { userInitiated: true });
     }
 
+    /**
+     *
+     */
     function selectDefaultGroup() {
         if (!hasUserSelectedWorldGroup.value) {
             const remoteKey = favoriteWorldGroups.value[0]?.key || worldGroupPlaceholders[0]?.key || null;
@@ -991,6 +1020,10 @@
         clearSelectedWorlds();
     }
 
+    /**
+     *
+     * @param group
+     */
     function isGroupAvailable(group) {
         if (!group) {
             return false;
@@ -1007,6 +1040,12 @@
         return false;
     }
 
+    /**
+     *
+     * @param type
+     * @param key
+     * @param options
+     */
     function selectGroup(type, key, options = {}) {
         if (selectedGroup.value?.type === type && selectedGroup.value?.key === key) {
             return;
@@ -1018,10 +1057,19 @@
         clearSelectedWorlds();
     }
 
+    /**
+     *
+     * @param type
+     * @param key
+     */
     function isGroupActive(type, key) {
         return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
     }
 
+    /**
+     *
+     * @param value
+     */
     function formatVisibility(value) {
         if (!value) {
             return '';
@@ -1029,6 +1077,9 @@
         return value.charAt(0).toUpperCase() + value.slice(1);
     }
 
+    /**
+     *
+     */
     function startLocalGroupCreation() {
         if (isCreatingLocalGroup.value) {
             return;
@@ -1040,11 +1091,17 @@
         });
     }
 
+    /**
+     *
+     */
     function cancelLocalGroupCreation() {
         isCreatingLocalGroup.value = false;
         newLocalGroupName.value = '';
     }
 
+    /**
+     *
+     */
     function handleLocalGroupCreationConfirm() {
         const name = newLocalGroupName.value.trim();
         if (!name) {
@@ -1058,6 +1115,11 @@
         });
     }
 
+    /**
+     *
+     * @param id
+     * @param value
+     */
     function toggleWorldSelection(id, value) {
         if (value) {
             if (!selectedFavoriteWorlds.value.includes(id)) {
@@ -1068,10 +1130,16 @@
         }
     }
 
+    /**
+     *
+     */
     function clearSelectedWorlds() {
         selectedFavoriteWorlds.value = [];
     }
 
+    /**
+     *
+     */
     function toggleSelectAllWorlds() {
         if (!activeRemoteGroup.value) {
             return;
@@ -1083,6 +1151,9 @@
         }
     }
 
+    /**
+     *
+     */
     function copySelectedWorlds() {
         if (!selectedFavoriteWorlds.value.length) {
             return;
@@ -1092,6 +1163,9 @@
         showWorldImportDialog();
     }
 
+    /**
+     *
+     */
     function showWorldBulkUnfavoriteSelectionConfirm() {
         if (!selectedFavoriteWorlds.value.length) {
             return;
@@ -1111,6 +1185,10 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param ids
+     */
     function bulkUnfavoriteSelectedWorlds(ids) {
         ids.forEach((id) => {
             favoriteRequest.deleteFavorite({
@@ -1121,15 +1199,27 @@
         worldEditMode.value = false;
     }
 
+    /**
+     *
+     */
     function showExportDialog() {
         worldExportDialogVisible.value = true;
     }
 
+    /**
+     *
+     */
     function handleRefreshFavorites() {
         refreshFavorites();
         getLocalWorldFavorites();
     }
 
+    /**
+     *
+     * @param group
+     * @param visibility
+     * @param menuKey
+     */
     function changeWorldGroupVisibility(group, visibility, menuKey = null) {
         const params = {
             type: group.type,
@@ -1152,6 +1242,10 @@
         });
     }
 
+    /**
+     *
+     * @param group
+     */
     function promptLocalWorldFavoriteGroupRename(group) {
         modalStore
             .prompt({
@@ -1177,6 +1271,10 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param group
+     */
     function promptLocalWorldFavoriteGroupDelete(group) {
         modalStore
             .confirm({
@@ -1191,6 +1289,10 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param ctx
+     */
     function clearFavoriteGroup(ctx) {
         modalStore
             .confirm({
@@ -1208,6 +1310,10 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param worldFavoriteSearch
+     */
     function doSearchWorldFavorites(worldFavoriteSearch) {
         const search = worldFavoriteSearch.trim().toLowerCase();
         if (search.length < 3) {
@@ -1225,31 +1331,56 @@
     }
     const searchWorldFavorites = debounce(doSearchWorldFavorites, 200);
 
+    /**
+     *
+     * @param group
+     * @param visibility
+     */
     function handleVisibilitySelection(group, visibility) {
         const menuKey = remoteGroupMenuKey(group.key);
         changeWorldGroupVisibility(group, visibility, menuKey);
     }
 
+    /**
+     *
+     * @param group
+     */
     function handleRemoteRename(group) {
         handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
         changeFavoriteGroupName(group);
     }
 
+    /**
+     *
+     * @param group
+     */
     function handleRemoteClear(group) {
         handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
         clearFavoriteGroup(group);
     }
 
+    /**
+     *
+     * @param groupName
+     */
     function handleLocalRename(groupName) {
         handleGroupMenuVisible(localGroupMenuKey(groupName), false);
         promptLocalWorldFavoriteGroupRename(groupName);
     }
 
+    /**
+     *
+     * @param groupName
+     */
     function handleLocalDelete(groupName) {
         handleGroupMenuVisible(localGroupMenuKey(groupName), false);
         promptLocalWorldFavoriteGroupDelete(groupName);
     }
 
+    /**
+     *
+     * @param group
+     */
     function changeFavoriteGroupName(group) {
         const currentName = group.displayName || group.name;
         modalStore
@@ -1288,6 +1419,9 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     */
     async function refreshLocalWorldFavorites() {
         if (refreshingLocalFavorites.value) {
             return;
@@ -1333,6 +1467,9 @@
         }
     }
 
+    /**
+     *
+     */
     function cancelLocalWorldRefresh() {
         if (!refreshingLocalFavorites.value) {
             return;
@@ -1446,15 +1583,14 @@
         border: 1px solid var(--border);
         padding: 8px;
         cursor: pointer;
-        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
+        transition: background-color 0.15s ease;
-        transition:
-            box-shadow 0.2s ease,
-            transform 0.2s ease;
     }
 
     .group-item:hover {
-        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
+        background-color: var(--accent);
-        transform: translateY(-2px);
+        box-shadow:
+            0 4px 6px -1px rgb(0 0 0 / 0.1),
+            0 2px 4px -2px rgb(0 0 0 / 0.1);
     }
 
     .group-item__top {
@@ -1696,19 +1832,17 @@
         border-radius: calc(8px * var(--favorites-card-scale, 1));
         padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
-        transition:
+        transition: background-color 0.15s ease;
-            border-color 0.2s ease,
-            box-shadow 0.2s ease,
-            transform 0.2s ease;
-        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
         width: 100%;
         min-width: var(--favorites-card-min-width, 240px);
         max-width: var(--favorites-card-target-width, 320px);
     }
 
     :deep(.favorites-search-card:hover) {
-        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
+        background-color: var(--accent);
-        transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
+        box-shadow:
+            0 4px 6px -1px rgb(0 0 0 / 0.1),
+            0 2px 4px -2px rgb(0 0 0 / 0.1);
     }
 
     :deep(.favorites-search-card.is-selected) {

src/views/FriendsLocations/components/FriendsLocationsCard.vue

@@ -241,16 +241,17 @@
         display: grid;
         gap: calc(14px * var(--card-scale) * var(--card-spacing));
         border-radius: 8px;
-        transition:
+        transition: background-color 0.15s ease;
-            box-shadow 0.2s ease,
-            transform 0.2s ease;
         width: 100%;
         max-width: var(--friend-card-target-width, 220px);
         min-width: var(--friend-card-min-width, 220px);
         box-sizing: border-box;
 
         &:hover {
-            transform: translateY(calc(-2px * var(--card-scale)));
+            background-color: var(--accent);
+            box-shadow:
+                0 4px 6px -1px rgb(0 0 0 / 0.1),
+                0 2px 4px -2px rgb(0 0 0 / 0.1);
         }
     }
 

src/views/MyAvatars/components/MyAvatarCard.vue

@@ -1,13 +1,11 @@
 <template>
-    <HoverCard :open-delay="500" :close-delay="100">
+    <HoverCard :open-delay="700" :close-delay="100">
         <HoverCardTrigger as="div">
             <ContextMenu>
                 <ContextMenuTrigger as="div">
-                    <div
+                    <div class="avatar-card-wrapper rounded-lg" @click="$emit('click')">
-                        class="avatar-card-wrapper rounded-lg transition-all duration-150 hover:-translate-y-0.5 hover:shadow-md"
-                        @click="$emit('click')">
                         <Card
-                            class="avatar-card flex flex-col gap-0 p-0 cursor-pointer overflow-hidden rounded-lg relative"
+                            class="avatar-card flex flex-col gap-0 p-0 cursor-pointer overflow-hidden rounded-lg relative transition-colors hover:bg-accent hover:shadow-md"
                             :class="isActive ? 'border-2 border-primary' : 'border border-border/50'">
                             <div class="w-full aspect-5/2 overflow-hidden bg-muted relative">
                                 <img

src/views/Tools/Tools.vue

@@ -530,7 +530,7 @@
     }
 
     .tool-card {
-        transition: all 0.3s ease;
+        transition: background-color 0.15s ease;
         position: relative;
         overflow: visible;
         border-radius: 8px;
@@ -538,7 +538,10 @@
         width: 100%;
 
         &:hover {
-            transform: translateY(-2px);
+            background-color: var(--accent);
+            box-shadow:
+                0 4px 6px -1px rgb(0 0 0 / 0.1),
+                0 2px 4px -2px rgb(0 0 0 / 0.1);
         }
 
         .tool-content {

src/views/Tools/components/GroupCalendarEventCard.vue

@@ -255,7 +255,7 @@
 
 <style scoped>
     .event-card {
-        transition: all 0.3s ease;
+        transition: background-color 0.15s ease;
         position: relative;
         overflow: visible;
         border-radius: 8px;
@@ -263,7 +263,10 @@
     }
 
     .event-card:hover {
-        transform: translateY(-2px);
+        background-color: var(--accent);
+        box-shadow:
+            0 4px 6px -1px rgb(0 0 0 / 0.1),
+            0 2px 4px -2px rgb(0 0 0 / 0.1);
     }
 
     .event-card.grouped-card {