Reduce Dream QA hero copy

dream_customs/ui/app.py

@@ -686,6 +686,8 @@ def _hero_html(language: str = DEFAULT_LANGUAGE, status: str = "record") -> str:
             if index < active_step:
                 line_classes.append("is-complete")
             step_html.append(f'<i class="{" ".join(line_classes)}" aria-hidden="true"></i>')
+    hero_body = copy.get("hero_body", "").strip()
+    hero_body_html = f"<p class=\"dc-hero-body\">{escape(hero_body)}</p>" if hero_body else ""
     return f"""
 <header class="dc-hero">
   <div class="dc-hero-top">
@@ -699,7 +701,7 @@ def _hero_html(language: str = DEFAULT_LANGUAGE, status: str = "record") -> str:
     </div>
     <div class="dc-sun-mark" aria-hidden="true"></div>
   </div>
-  <p class="dc-hero-body">{copy['hero_body']}</p>
+  {hero_body_html}
   <div class="dc-hero-ribbon" aria-label="{escape(copy['hero_badge'])}">
     <span>{escape(copy['hero_badge'])}</span>
     <small>{escape(copy['hero_mobile_note'])}</small>

dream_customs/ui/copy.py

@@ -9,11 +9,11 @@ APP_COPY = {
     "en": {
         "title": "Dream QA",
         "hero_kicker": "Dream QA / The Morning Question Desk",
-        "hero_title": "What did the dream leave you asking?",
-        "subtitle": "Record the dream, answer one gentle question, and leave with a grounded Morning Ticket.",
-        "hero_body": "A small-model dream desk for the first few minutes after waking. It gathers concrete details, asks before interpreting, and writes one note for today.",
-        "hero_badge": "Text + image + voice intake",
-        "hero_mobile_note": "Made for the half-awake minute",
+        "hero_title": "What did the dream ask?",
+        "subtitle": "One fragment. One gentle question. One Morning Ticket.",
+        "hero_body": "",
+        "hero_badge": "Text · image · voice",
+        "hero_mobile_note": "Half-awake friendly",
         "brand_subtitle": "Dream Customs",
         "steps": ["Record", "One Question", "Today Tip"],
         "notice_record": "Write one dream fragment, then use a demo chip if you want the 90-second judge path.",
@@ -80,11 +80,11 @@ APP_COPY = {
     "zh": {
         "title": "梦境问答台",
         "hero_kicker": "梦境问答台 / 清晨问讯室",
-        "hero_title": "这个梦，醒来后把什么问题留给了你？",
-        "subtitle": "记录梦境，回答一个温和追问，最后拿到一张贴着梦境细节的清晨小票。",
-        "hero_body": "一个适合刚醒来几分钟使用的小模型问讯台：先捡起具体细节，再问一个好问题，最后只给今天的一张小纸条。",
-        "hero_badge": "文字 + 图片 + 语音统一入口",
-        "hero_mobile_note": "适合半醒时的一分钟",
+        "hero_title": "这个梦在问什么？",
+        "subtitle": "一个片段，一个追问，一张清晨小票。",
+        "hero_body": "",
+        "hero_badge": "文字 · 图片 · 语音",
+        "hero_mobile_note": "适合半醒时使用",
         "brand_subtitle": "Dream Customs",
         "steps": ["记录", "一个追问", "清晨小票"],
         "notice_record": "写一个梦境片段；想走 90 秒演示路径，也可以直接点示例 chip。",

dream_customs/ui/styles.py

@@ -3125,23 +3125,37 @@ button.secondary {
 """
 
 CSS += """
-/* Hero proportion fix: make the desk invitation feel calm, not like a giant poster. */
+/* Hero proportion fix: make the desk invitation feel calm, centered, and brief. */
 .dc-hero {
   align-content: center;
+  justify-items: center;
   background:
     radial-gradient(circle at 74% 37%, rgba(255, 253, 248, 0.54) 0 16%, rgba(255, 253, 248, 0.88) 33%, rgba(255, 253, 248, 0.98) 62%),
     linear-gradient(180deg, rgba(246, 251, 246, 0.96), rgba(255, 250, 240, 0.99)),
     url("https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?auto=format&fit=crop&w=1600&q=80") 74% 43% / cover !important;
-  gap: clamp(12px, 2vw, 18px);
-  min-height: clamp(420px, 50vh, 560px);
+  gap: clamp(10px, 1.8vw, 16px);
+  min-height: clamp(360px, 44vh, 500px);
   overflow: hidden;
-  padding: clamp(24px, 4vw, 46px) clamp(18px, 5vw, 70px) clamp(30px, 4.8vw, 54px);
+  padding: clamp(22px, 3.6vw, 40px) clamp(18px, 5vw, 70px) clamp(26px, 4.2vw, 48px);
+  text-align: center;
 }
 
 .dc-hero-top {
+  justify-self: stretch;
   grid-template-columns: 44px minmax(0, 1fr) 44px;
 }
 
+.dc-brand-lockup {
+  justify-content: center;
+  text-align: center;
+}
+
+.dc-brand-lockup > div {
+  display: grid;
+  justify-items: center;
+  max-width: min(100%, 900px);
+}
+
 .dc-menu-mark {
   opacity: 0.78;
 }
@@ -3158,19 +3172,23 @@ CSS += """
 }
 
 .dc-hero h1 {
-  font-size: clamp(2.35rem, 5.4vw, 4.85rem) !important;
-  line-height: 1.03;
+  font-size: clamp(2.45rem, 5.2vw, 4.35rem) !important;
+  line-height: 1.01;
   margin-left: auto;
   margin-right: auto;
-  max-width: 1080px;
+  max-width: 820px;
+  text-align: center;
   text-wrap: balance;
 }
 
 .dc-brand-subtitle {
   color: #6f7f8b;
-  font-size: clamp(1rem, 1.8vw, 1.34rem);
+  font-size: clamp(1rem, 1.55vw, 1.2rem);
   line-height: 1.45;
-  max-width: 780px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 560px;
+  text-align: center;
   text-wrap: balance;
 }
 
@@ -3183,6 +3201,7 @@ CSS += """
 }
 
 .dc-hero-ribbon {
+  justify-self: center;
   background: rgba(255, 253, 248, 0.62);
   border-color: rgba(95, 143, 104, 0.2);
   border-radius: 999px;
@@ -3214,7 +3233,8 @@ CSS += """
 }
 
 .dc-stepper {
-  margin-top: clamp(18px, 3.2vw, 34px);
+  justify-self: center;
+  margin-top: clamp(14px, 2.4vw, 26px);
   max-width: 680px;
 }
 
@@ -3235,12 +3255,12 @@ CSS += """
 
 @media (max-width: 900px) {
   .dc-hero {
-    min-height: 470px;
+    min-height: 430px;
     padding: 24px 22px 32px;
   }
 
   .dc-hero h1 {
-    font-size: clamp(2.25rem, 10vw, 3.65rem) !important;
+    font-size: clamp(2.15rem, 9.4vw, 3.45rem) !important;
   }
 
   .dc-brand-subtitle,
@@ -3251,7 +3271,7 @@ CSS += """
 
 @media (max-width: 640px) {
   .dc-hero {
-    min-height: 520px;
+    min-height: 460px;
   }
 
   .dc-hero-top {

tests/test_ui_actions.py

@@ -101,10 +101,12 @@ def test_hero_subtitle_explains_app_instead_of_legacy_name():
     hero_html = ui_app._hero_html()
 
     assert "The Morning Question Desk" in hero_html
-    assert "What did the dream leave you asking?" in hero_html
-    assert "grounded Morning Ticket" in hero_html
+    assert "What did the dream ask?" in hero_html
+    assert "One fragment. One gentle question. One Morning Ticket." in hero_html
     assert "dc-hero-ribbon" in hero_html
-    assert "Text + image + voice intake" in hero_html
+    assert "Text · image · voice" in hero_html
+    assert "A small-model dream desk" not in hero_html
+    assert "dc-hero-body" not in hero_html
     assert "Dream Customs" not in hero_html