feat: 首页卡片的渐变色调整

docs/superpowers/specs/2026-08-10-explore-card-unified-gradient-design.md

@@ -0,0 +1,29 @@
+# ExploreCards 统一媒体渐变设计
+
+## 目标
+
+统一 ExploreCards 中图片和视频上方的渐变浮层。渐变不再随卡片 `tone` 使用不同主题色，而是固定为顶部透明、底部浅黑半透明，以保持不同媒体内容上的文字可读性和视觉一致性。
+
+## 实现范围
+
+- 在 `src/pages/Discovery/components/ExploreCards/styles/index.scss` 中保留一条公共 `.explore-card-gradient` 规则。
+- 公共渐变使用以下色阶：
+
+  ```scss
+  linear-gradient(
+    180deg,
+    rgba(5, 24, 24, 0) 0%,
+    rgba(5, 24, 24, 0.18) 46%,
+    rgba(5, 24, 24, 0.34) 100%
+  )
+  ```
+
+- 删除 `culture`、`adventure` 和 `nightlife` 对 `.explore-card-gradient` 的主题色覆盖。
+- 保留各 `tone` 的卡片底色，确保没有封面媒体时现有视觉不变。
+- 不调整图片或视频渲染、文字内容区、箭头和点击行为。
+
+## 验证
+
+- 静态检查样式中仅存在一条 `.explore-card-gradient` 背景定义。
+- 检查所有渐变色标均为 `rgba(5, 24, 24, ...)`，且顶部透明度为 `0`、底部透明度为 `0.34`。
+- 运行 `git diff --check`，确认没有空白符错误。

src/pages/Discovery/components/ExploreCards/styles/index.scss

@@ -58,33 +58,21 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: linear-gradient(180deg, rgba(43, 107, 122, 0) 42%, rgba(71, 179, 145, 0.72) 74%, #47b391 100%);
+  background: linear-gradient(180deg, rgba(5, 24, 24, 0) 0%, rgba(5, 24, 24, 0.18) 66%, rgba(5, 24, 24, 0.64) 100%);
 }
 
 .explore-card.is-culture {
   background: #b98563;
 }
 
-.explore-card.is-culture .explore-card-gradient {
-  background: linear-gradient(180deg, rgba(87, 57, 37, 0.08) 36%, rgba(150, 93, 55, 0.62) 72%, #b98563 100%);
-}
-
 .explore-card.is-adventure {
   background: #5b895f;
 }
 
-.explore-card.is-adventure .explore-card-gradient {
-  background: linear-gradient(180deg, rgba(30, 58, 47, 0) 36%, rgba(47, 97, 54, 0.74) 74%, #5b895f 100%);
-}
-
 .explore-card.is-nightlife {
   background: #438694;
 }
 
-.explore-card.is-nightlife .explore-card-gradient {
-  background: linear-gradient(180deg, rgba(12, 47, 78, 0.04) 34%, rgba(28, 92, 111, 0.72) 74%, #438694 100%);
-}
-
 .explore-card-content {
   position: absolute;
   left: 0;