From 4462473fcc185611b6de209f39b3077fed007b75 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 09:51:16 +0800
Subject: feat(frontend): 质感打磨——微过渡、卡片悬停、登录页留白与字阶
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[变更性质] 视觉打磨，前端重设计第二轮之四。
[新增功能] 全局 150ms transition 层；hover:hover 且 768px+ 卡片 hover 上浮；登录/注册页留白重排（2rem/2.4rem 按宽度断点）；h1/h2/h3 字阶统一（1.55/1.18/1.02）。
[实现方案] 单层 app.css 聚合，动效仅在支持 hover 的桌面指针设备生效，避免移动端粘滞态；清理 .hint 重复规则。
[影响范围] app.css、AuthPages.svelte；无行为变化。
---
 frontend/src/app.css                | 26 +++++++++++++++++++++-----
 frontend/src/pages/AuthPages.svelte | 10 ++++++++--
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index a3e02bd..11a8e4b 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -63,6 +63,22 @@
 
 * { box-sizing: border-box; }
 
+/* round2 质感：150ms 全局过渡（背景/边框/阴影/位移/文字色） */
+a, button, input, select, textarea, table.data th, table.data td,
+.card, [data-slot='card'], .badge, .navlink, .metric-card {
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
+    box-shadow 150ms ease, transform 150ms ease;
+}
+
+/* 桌面端卡片 hover 轻微上浮阴影；触屏（hover none）不做位移避免黏连 */
+@media (hover: hover) and (min-width: 768px) {
+  .card:hover,
+  [data-slot='card']:hover {
+    box-shadow: 0 4px 14px rgba(16, 42, 49, 0.08);
+    transform: translateY(-1px);
+  }
+}
+
 html, body {
   margin: 0;
   padding: 0;
@@ -75,9 +91,11 @@ html, body {
 }
 
 h1, h2, h3, h4 { font-weight: 600; margin: 0; }
-h1 { font-size: 1.35rem; }
-h2 { font-size: 1.1rem; }
-h3 { font-size: 1rem; }
+/* round2 字阶：拉开 h1/h2/正文/次要说明的区分 */
+h1 { font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.25; }
+h2 { font-size: 1.18rem; letter-spacing: -0.01em; }
+h3 { font-size: 1.02rem; }
+.hint { color: var(--text-3); font-size: 0.82rem; line-height: 1.45; }
 a { color: var(--teal-strong); text-decoration: none; }
 a:hover { text-decoration: underline; }
 p { margin: 0.4rem 0; }
@@ -137,8 +155,6 @@ input[type='checkbox'], input[type='radio'] { width: auto; }
 }
 .card + .card { margin-top: 0.9rem; }
 
-.hint { color: var(--text-3); font-size: 0.83rem; }
-
 table.data {
   width: 100%;
   border-collapse: collapse;
diff --git a/frontend/src/pages/AuthPages.svelte b/frontend/src/pages/AuthPages.svelte
index 6221368..7495d62 100644
--- a/frontend/src/pages/AuthPages.svelte
+++ b/frontend/src/pages/AuthPages.svelte
@@ -178,8 +178,14 @@
       radial-gradient(700px 350px at 85% -60px, rgba(13, 148, 136, 0.08), transparent),
       var(--bg);
   }
-  .auth-card { width: min(400px, 100%); padding: 1.6rem; }
-  .auth-brand { margin-bottom: 1.1rem; }
+  .auth-card { width: min(400px, 100%); padding: 2rem 1.75rem 1.8rem; }
+  /* round2 登录页留白重排：标题区与表单拉开，卡片下缘留呼吸感 */
+  @media (min-width: 768px) {
+    .auth-card { padding: 2.4rem 2.2rem 2.1rem; }
+  }
+  .auth-brand { margin-bottom: 1.35rem; }
+  .auth-brand h1 { margin-bottom: 0.3rem; }
+  .auth-brand p { max-width: 26em; }
   .mark {
     display: inline-block;
     width: 34px;
-- 
cgit v1.2.3