style(theme): enhance visual design and mobile responsiveness

docs/.vitepress/theme/components/NavCard.vue

@@ -27,12 +27,15 @@ defineProps({
     class="nav-card-link"
   >
     <div class="nav-card">
-      <div class="card-header">
-        <span
-          v-if="icon"
-          class="card-icon"
-        >{{ icon }}</span>
-        <span class="card-title">{{ title }}</span>
+      <div class="card-top">
+        <div class="card-header">
+          <span
+            v-if="icon"
+            class="card-icon"
+          >{{ icon }}</span>
+          <span class="card-title">{{ title }}</span>
+        </div>
+        <span class="card-arrow">↗</span>
       </div>
       <div
         v-if="description"
@@ -50,40 +53,70 @@ defineProps({
 }
 
 .nav-card {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  padding: 16px;
-  transition: all 0.3s ease;
-  background: var(--vp-c-bg-soft);
+  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 12%, var(--vp-c-divider));
+  border-radius: 22px;
+  padding: 20px 22px;
+  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+  background:
+    radial-gradient(circle at 100% -10%, color-mix(in srgb, var(--vp-c-brand-1) 12%, transparent), transparent 45%),
+    linear-gradient(165deg, color-mix(in srgb, var(--vp-c-brand-1) 6%, var(--vp-c-bg-soft)) 0%, var(--vp-c-bg-soft) 100%);
   height: 100%;
+  min-height: 132px;
+  backdrop-filter: blur(10px);
 }
 
 .nav-card:hover {
   border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-4px) scale(1.01);
+  box-shadow: 0 18px 40px rgba(0, 113, 227, 0.14);
+}
+
+.dark .nav-card:hover {
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
+}
+
+.card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .card-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 .card-icon {
-  font-size: 20px;
+  font-size: 22px;
 }
 
 .card-title {
   font-weight: 600;
-  color: var(--vp-c-brand);
-  font-size: 14px;
+  color: var(--vp-c-text-1);
+  font-size: 17px;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+}
+
+.card-arrow {
+  color: var(--vp-c-brand-1);
+  font-size: 15px;
+  font-weight: 700;
+  opacity: 0.8;
+  transition: transform 0.25s ease, opacity 0.25s ease;
+}
+
+.nav-card:hover .card-arrow {
+  transform: translate(2px, -2px);
+  opacity: 1;
 }
 
 .card-desc {
   color: var(--vp-c-text-2);
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 1.68;
 }
 </style>