From 158f2a8d53b846a13a625addd32d2835f6c29880 Mon Sep 17 00:00:00 2001
From: mini <afanamigo@gmail.com>
Date: Sun, 19 Apr 2026 20:26:50 +0800
Subject: [PATCH] fix(landing): resolve Task 3 CSS specificity issues

Code review flagged:
- .feature.card caused padding/background specificity race;
  .feature already defines all card properties, so drop .card
- model-card flex row misaligned name/meta (should stack in column);
  wrap in div to get dot | [name/meta] layout
- .container and .section-* scoped rules silently shadow puro.css defaults;
  add comment explaining intentional override

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/landing/LandingView.vue | 41 +++++++++++++++-------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/landing/LandingView.vue b/frontend/src/views/landing/LandingView.vue
index 570a18aa..0097e336 100644
--- a/frontend/src/views/landing/LandingView.vue
+++ b/frontend/src/views/landing/LandingView.vue
@@ -53,28 +53,38 @@
       <div class="model-wall">
         <div class="model-card">
           <div class="model-dot" style="background: var(--p-claude)"></div>
-          <div class="model-name">Claude Pro / Max</div>
-          <div class="model-meta">Anthropic OAuth</div>
+          <div>
+            <div class="model-name">Claude Pro / Max</div>
+            <div class="model-meta">Anthropic OAuth</div>
+          </div>
         </div>
         <div class="model-card">
           <div class="model-dot" style="background: var(--p-gpt)"></div>
-          <div class="model-name">ChatGPT Plus / Pro</div>
-          <div class="model-meta">OpenAI OAuth</div>
+          <div>
+            <div class="model-name">ChatGPT Plus / Pro</div>
+            <div class="model-meta">OpenAI OAuth</div>
+          </div>
         </div>
         <div class="model-card">
           <div class="model-dot" style="background: var(--p-codex)"></div>
-          <div class="model-name">Codex CLI</div>
-          <div class="model-meta">OpenAI OAuth</div>
+          <div>
+            <div class="model-name">Codex CLI</div>
+            <div class="model-meta">OpenAI OAuth</div>
+          </div>
         </div>
         <div class="model-card">
           <div class="model-dot" style="background: var(--p-gemini)"></div>
-          <div class="model-name">Gemini Code Assist</div>
-          <div class="model-meta">Google OAuth</div>
+          <div>
+            <div class="model-name">Gemini Code Assist</div>
+            <div class="model-meta">Google OAuth</div>
+          </div>
         </div>
         <div class="model-card is-muted">
           <div class="model-dot" style="background: var(--text-3)"></div>
-          <div class="model-name">更多</div>
-          <div class="model-meta">规划中</div>
+          <div>
+            <div class="model-name">更多</div>
+            <div class="model-meta">规划中</div>
+          </div>
         </div>
       </div>
     </section>
@@ -86,17 +96,17 @@
         <h2 class="section-title">一套 key，三件武器</h2>
       </div>
       <div class="features">
-        <div class="feature card">
+        <div class="feature">
           <div class="feature-icon">⚡</div>
           <h3>一个 key 接所有模型</h3>
           <p>不再为每个 provider 申请 API key、配置 base_url。统一 <code class="mono">sk-</code> 走 Claude / GPT / Gemini，按 model 自动路由到对应账号池。</p>
         </div>
-        <div class="feature card">
+        <div class="feature">
           <div class="feature-icon">🔄</div>
           <h3>账号池高可用</h3>
           <p>支持多账号自动调度与 failover。某个上游触发限流 / 冷却时，流量切到下一个健康账号，token 刷新全自动。</p>
         </div>
-        <div class="feature card">
+        <div class="feature">
           <div class="feature-icon">📊</div>
           <h3>用量看板</h3>
           <p>每条请求的 tokens、费用、上游账号、延迟全可视化。模型分布饼图 + 趋势曲线 + Top 排行。</p>
@@ -155,6 +165,11 @@
   font-family: var(--font-mono);
 }
 
+/* Note: these rules (.container / .section-*) intentionally override
+ * puro.css defaults with landing-page-specific values.
+ * puro.css has global defaults of: container max-width 1100px/padding 32px,
+ * section-title margin-bottom 16px, section-kicker letter-spacing 0.15em.
+ * Source-order ensures the scoped values below win. */
 .container {
   max-width: 1120px;
   margin: 0 auto;