From 331441b57e2ede7b5d0b50a9d2f9f7ceacf287d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Mon, 2 Feb 2026 00:19:15 +0000
Subject: [PATCH] Add subtle shadow and reduce border intensity on cards

- Add shadow-sm to ServiceCard, BookmarkCard, and Settings card
- Reduce border opacity: slate-100 (light) / stone-700/50 (dark)
- Lighter hover states for a softer look

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/app/page.tsx                | 2 +-
 src/components/BookmarkCard.tsx | 2 +-
 src/components/ServiceCard.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3a1f99e..d87225c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -139,7 +139,7 @@ export default function Home() {
       case 'settings':
         return (
           <div className="max-w-2xl">
-            <div className="bg-white dark:bg-stone-900 rounded-xl border border-slate-200 dark:border-stone-800 p-6">
+            <div className="bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm p-6">
               <h2 className="text-lg font-semibold text-slate-900 dark:text-stone-100 mb-6">
                 Appearance
               </h2>
diff --git a/src/components/BookmarkCard.tsx b/src/components/BookmarkCard.tsx
index 29fd2e7..11009aa 100644
--- a/src/components/BookmarkCard.tsx
+++ b/src/components/BookmarkCard.tsx
@@ -13,7 +13,7 @@ export function BookmarkCard({ bookmark }: BookmarkCardProps) {
       href={bookmark.url}
       target="_blank"
       rel="noopener noreferrer"
-      className="group flex items-center gap-3 p-3 bg-white dark:bg-stone-900 rounded-lg border border-slate-200 dark:border-stone-800 hover:border-slate-300 dark:hover:border-stone-700 hover:shadow-md transition-all duration-200"
+      className="group flex items-center gap-3 p-3 bg-white dark:bg-stone-900 rounded-lg border border-slate-100 dark:border-stone-700/50 shadow-sm hover:border-slate-200 dark:hover:border-stone-600/50 hover:shadow-md transition-all duration-200"
     >
       {/* Icon */}
       <div className="w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-md bg-slate-100 dark:bg-stone-800 group-hover:bg-slate-200 dark:group-hover:bg-stone-700 transition-colors">
diff --git a/src/components/ServiceCard.tsx b/src/components/ServiceCard.tsx
index 4c4d868..6f62b2a 100644
--- a/src/components/ServiceCard.tsx
+++ b/src/components/ServiceCard.tsx
@@ -29,7 +29,7 @@ export function ServiceCard({ service, status }: ServiceCardProps) {
       href={service.url}
       target="_blank"
       rel="noopener noreferrer"
-      className="group relative block p-4 bg-white dark:bg-stone-900 rounded-xl border border-slate-200 dark:border-stone-800 hover:border-slate-300 dark:hover:border-stone-700 hover:shadow-lg transition-all duration-200"
+      className="group relative block p-4 bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm hover:border-slate-200 dark:hover:border-stone-600/50 hover:shadow-md transition-all duration-200"
     >
       {/* Status indicator */}
       <div className="absolute top-3 right-3 flex items-center gap-1.5">