From 6acc541cd82b65234d83bfca1c291821d800e5d4 Mon Sep 17 00:00:00 2001
From: xsl <youmiss@163.com>
Date: Tue, 13 Oct 2026 19:01:00 +0800
Subject: [PATCH] fix(h5): unify regular slogan typography on splash and photo
 guide

---
 graphify-out/manifest.json       |  8 ++++----
 h5/css/ui-20261012.css           |  7 ++++---
 h5/index.html                    |  9 ++++++++-
 h5/test/splash-brand-browser.mjs | 18 ++++++++++++++++++
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/graphify-out/manifest.json b/graphify-out/manifest.json
index ee0faaa..91ce75c 100644
--- a/graphify-out/manifest.json
+++ b/graphify-out/manifest.json
@@ -140,8 +140,8 @@
     "semantic_hash": ""
   },
   "h5/index.html": {
-    "mtime": 1791885786.4010859,
-    "ast_hash": "2a9b884da4be536708d26bf69f4a9f12",
+    "mtime": 1791886665.6930811,
+    "ast_hash": "f9f520bdd67e32920fc79d387de4a033",
     "semantic_hash": ""
   },
   "h5/vendor/faceapi/README.md": {
@@ -2020,8 +2020,8 @@
     "semantic_hash": ""
   },
   "h5/test/splash-brand-browser.mjs": {
-    "mtime": 1791885347.4210553,
-    "ast_hash": "257d77c6cfb00b56b0a0dff9fc8955b1",
+    "mtime": 1791886665.6930811,
+    "ast_hash": "99c9c93f6eab48ce6de0d88fa348c50f",
     "semantic_hash": ""
   },
   "docs/\u62cd\u6444\u89d2\u5ea6\u4e0d\u5408\u683c\u9707\u52a8\u63d0\u9192-2026-10-13.md": {
diff --git a/h5/css/ui-20261012.css b/h5/css/ui-20261012.css
index 2231519..766e16e 100644
--- a/h5/css/ui-20261012.css
+++ b/h5/css/ui-20261012.css
@@ -9,9 +9,10 @@
   top: max(6.838833%, calc(env(safe-area-inset-top) + 48px));
 }
 #s-splash .splash-slogan { top: max(6.838833%, calc(env(safe-area-inset-top) + 48px)); }
-/* Retain the PSD's two lower slogan lines; the updated brand uses regular type. */
-.splash-slogan-updated .splash-slogan-copy { width:100%; height:100%; clip-path:inset(32% 0 0); }
-.splash-slogan-brand { position:absolute; top:0; left:50%; transform:translateX(-50%); font-family:Arial,sans-serif; font-size:23px; font-weight:400; line-height:1; white-space:nowrap; }
+/* Keep the PSD Chinese line; both English lines share the exact regular font. */
+.splash-slogan-updated .splash-slogan-copy { width:100%; height:100%; clip-path:inset(68% 0 0); }
+.splash-slogan-brand, .splash-slogan-english { position:absolute; top:0; left:50%; transform:translateX(-50%); font-family:Arial,sans-serif; font-size:23px; font-weight:400; line-height:1; white-space:nowrap; }
+.splash-slogan-english { top:26.736111px; }
 #s-splash [data-action="open-privacy"],
 #s-splash [data-action="open-privacy"]:focus,
 #s-splash [data-action="open-privacy"]:active { border:0; outline:none; box-shadow:none; -webkit-appearance:none; appearance:none; }
diff --git a/h5/index.html b/h5/index.html
index b0478b8..929a0f1 100644
--- a/h5/index.html
+++ b/h5/index.html
@@ -46,6 +46,7 @@
   <div class="splash-slogan splash-slogan-updated" role="img" aria-label="1'me，FROM THE INSIDE OUT；以我为始 自有表现">
     <img class="splash-slogan-copy" src="assets/img/ui-20261012/splash-slogan.png" width="718" height="217" loading="lazy" alt="">
     <span class="splash-slogan-brand" aria-hidden="true">1'me</span>
+    <span class="splash-slogan-english" aria-hidden="true">FROM THE INSIDE OUT</span>
   </div>
   <div class="splash-bottom">
     <div class="brand-row">
@@ -303,7 +304,13 @@
 <!-- ═══════════ 弹窗:拍照引导 ═══════════ -->
 <!-- 背景只保留启动页底图 + Slogan(不叠档案表单),对齐设计稿 04 -->
 <div class="overlay overlay-guide" id="p-photoguide">
-  <div class="guide-bg"><img class="splash-slogan" src="assets/img/ui-20261012/splash-slogan.png" width="718" height="217" loading="lazy" alt="ONE ME，FROM THE INSIDE OUT；以我为始 自有表现"></div>
+  <div class="guide-bg">
+    <div class="splash-slogan splash-slogan-updated" role="img" aria-label="1'me，FROM THE INSIDE OUT；以我为始 自有表现">
+      <img class="splash-slogan-copy" src="assets/img/ui-20261012/splash-slogan.png" width="718" height="217" loading="lazy" alt="">
+      <span class="splash-slogan-brand" aria-hidden="true">1'me</span>
+      <span class="splash-slogan-english" aria-hidden="true">FROM THE INSIDE OUT</span>
+    </div>
+  </div>
   <div class="popup">
     <button class="popup-close" data-action="close-photoguide" aria-label="关闭">
       <img src="assets/img/ui-20261009/icon-close.png" alt="关闭">
diff --git a/h5/test/splash-brand-browser.mjs b/h5/test/splash-brand-browser.mjs
index 10099ef..9f7613d 100644
--- a/h5/test/splash-brand-browser.mjs
+++ b/h5/test/splash-brand-browser.mjs
@@ -19,6 +19,18 @@ try {
   assert.equal(await page.locator('#s-splash .splash-slogan-brand').isVisible(), true);
   assert.equal(await page.locator('#s-splash .splash-slogan-brand').textContent(), "1'me");
   assert.equal(await page.locator('#s-splash .splash-slogan-brand').evaluate(el => getComputedStyle(el).fontWeight), '400');
+  for (const root of ['#s-splash', '#p-photoguide']) {
+    const fonts = await page.locator(root + ' .splash-slogan').evaluate(el => {
+      return ['.splash-slogan-brand', '.splash-slogan-english'].map(selector => {
+        const s = getComputedStyle(el.querySelector(selector));
+        return [s.fontFamily, s.fontSize, s.fontWeight, s.lineHeight];
+      });
+    });
+    assert.deepEqual(fonts[0], fonts[1], root + ': identical English font settings');
+    assert.equal(fonts[0][1], '23px');
+    assert.equal(fonts[0][2], '400');
+    assert.match(await page.locator(root + ' .splash-slogan').getAttribute('aria-label'), /^1'me/);
+  }
   const button = page.locator('#s-splash [data-action="open-privacy"]');
   await button.focus();
   const style = await button.evaluate(el => {
@@ -31,5 +43,11 @@ try {
   await page.screenshot({ path:'/tmp/juzi-splash-brand-20261013.png' });
   await button.click();
   await page.waitForSelector('#p-privacy.show');
+  await page.evaluate(() => {
+    document.querySelector('#p-privacy').classList.remove('show');
+    document.querySelector('#p-photoguide').classList.add('show');
+  });
+  await page.waitForTimeout(400);
+  await page.screenshot({ path:'/tmp/juzi-photoguide-brand-20261013.png' });
   console.log('PASS splash brand, borderless focused start button, yellow fill, privacy entry');
 } finally { await browser.close(); }