/* Hero 滾動敘事（J1087 第二波，2026-08-08） 企劃：docs/plans/hero-scrollytelling-plan-20260808.md 可行性驗證：同檔 §7（五項全過） ⚠️ 為什麼是獨立
而不是塞進 #s1： `.scene` 有 `overflow:hidden`——那會讓裡面的 position:sticky **直接失效**， 而且不會報錯，只會變成「捲一捲就整段滑掉了」。 這種因為祖先元素某個屬性導致 sticky 靜默失效的狀況， 查起來很痛（DOM 對、CSS 對、就是不黏），所以直接避開。 ⚠️ 三條實作紅線（§7 驗證結論），改這支之前先讀： ① 初始化腳本一律外部檔（inline 要逐一算 sha256 進 76 條 CSP 規則） ② 高度用 vh 不用 dvh（dvh 會跟著 iOS 網址列變動，等於把要避開的東西寫進版面） ③ 預設可見、JS 負責藏（反過來寫的話 JS 一出事整段空白） */ /* 首頁節點圖下架（見 index.html 該處註解）。 用 CSS 隱藏而不是刪 DOM：這是上線前的可逆選擇，Joey 若要回來只要拿掉這條。 ⚠️ 如果一週後沒有人要求復原，就該真的從 HTML 刪掉—— 隱藏的死 DOM 留著，下一個人會花時間去搞懂它為什麼不顯示。 */ .brain-container { display: none !important; } .story { position: relative; /* 五幕 × 每幕約一個屏高。手機縮短（§3 手機優先：捲動距離要短）， 不然滑到第三幕手就酸了。 */ height: 500vh; } @media (max-width: 700px) { .story { height: 380vh; } } .story-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 20px; } .story-stage { position: relative; width: min(720px, 92vw); } /* ── 預設（也就是「JS 沒接管」時）的樣子：五段可讀的直排文字 ── 這一段就是 SEO 與 no-JS 使用者看到的內容，也是 reduced-motion 的降級目的地。 */ .act { padding: 26px 0; border-top: 1px solid var(--border); } .act:first-child { border-top: none; } .act-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .22em; color: var(--accent); display: block; margin-bottom: 10px; } .act h3 { font-family: "Noto Serif TC", "Songti TC", Georgia, serif; font-size: clamp(21px, 4.6vw, 34px); line-height: 1.35; margin: 0 0 10px; color: var(--bright); } .act p { color: var(--dim); font-size: clamp(14px, 2.4vw, 16.5px); margin: 0; } /* 每一幕的道具（訊息氣泡、任務卡、終端行…）。 預設 display:none —— 它們是動畫的裝飾，靜態版讀文字就夠， 全部攤開反而讓「靜態長版」變成一團亂。 */ .act-visual { display: none; margin-top: 16px; } /* ── JS 接管後：五幕疊在一起、逐幕淡入 ── `.js-story` 由 hero.js 加在 上（見紅線③）。 */ .js-story .story-stage { height: 62vh; } .js-story .act { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; border-top: none; padding: 0; opacity: 0; } .js-story .act:first-child { opacity: 1; } .js-story .act-visual { display: block; } /* ── 各幕道具 ───────────────────────────────────────────────── */ /* 一：老闆的訊息氣泡 */ .bubble { display: inline-block; max-width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; padding: 12px 16px; text-align: left; font-size: clamp(14px, 2.6vw, 17px); color: var(--text); } /* 二：任務卡 */ .cards { display: flex; gap: 10px; flex-wrap: wrap; } .card-chip { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; font-size: 13.5px; color: var(--text); } /* 三：終端流 */ .term { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.9; color: var(--dim); text-align: left; } .term span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 四：紅燈轉綠 */ .checks { display: flex; flex-direction: column; gap: 8px; text-align: left; } .check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--dim); } .check i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; font-style: normal; } .check.pass i { background: var(--green); } /* 五：數字落定 */ .tally { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; } .tally div { text-align: center; } .tally b { display: block; font-family: "Noto Serif TC", "Songti TC", Georgia, serif; font-size: clamp(26px, 6vw, 40px); color: var(--accent); font-weight: 700; } .tally small { color: var(--dim); font-size: 12.5px; } /* 進度指示：現在在第幾幕。捲動敘事最容易讓人迷失「還有多久」， 五個點成本很低但能回答這件事。 */ .story-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; display: flex; gap: 7px; } .story-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background .25s ease; } .story-dots i.on { background: var(--accent); } /* 靜態版沒有「現在在第幾幕」這回事，所以不顯示 */ .story-dots { display: none; } .js-story .story-dots { display: flex; } /* ── reduced-motion：整段退回靜態長排 ── ⚠️ 連 sticky 都要解除。釘住本身就是一種強制的視差感， 對前庭敏感的人來說「不動但被黏住」一樣不舒服。 */ @media (prefers-reduced-motion: reduce) { .story, .js-story .story { height: auto; } .story-sticky, .js-story .story-sticky { position: static; height: auto; display: block; padding: 0 20px; } .js-story .story-stage { height: auto; } .js-story .act { position: static; opacity: 1; display: block; padding: 26px 0; border-top: 1px solid var(--border); } .js-story .act:first-child { border-top: none; } .js-story .act-visual { display: none; } .story-dots, .js-story .story-dots { display: none; } }