/* 七道流光｜脈輪能量覺察 — 頁面樣式。色票/動效變數來自 css/tools-shared.css。淺色水彩改版（2026-07-23）：與抽牌頁（oracle.html）同調性，整合 11 張場景素材。對比度數字（見文末 --chakra-muted 說明）皆為改版時實算，非用猜的（judgment.md §0）。 */ :root { /* 只用於顯影儀式的短暫暗轉（見 .chakra-reveal-curtain），不再是頁面底色 */ --chakra-reveal-dusk-1: var(--lf-deep-lavender); --chakra-reveal-dusk-2: #241a35; /* 次要文字用（eyebrow/meta/disclaimer/label）：deep-lavender 用「降不透明度」在淺底會掉到 <4.5:1，改用這個全不透明的暗褐紫色——同色票已用在主站(commit d1dd1d5 低對比修正)、對 ivory 背景實測 5.02:1 */ --chakra-muted: #6f6253; } * { box-sizing: border-box; } /* 修坑：author CSS 的 `display: flex`（.chakra-screen--breath/--reveal 用來置中）origin 優先度高於瀏覽器 UA 對 [hidden] 的 display:none，同 specificity 時會贏過 UA 規則、讓 hidden 畫面仍渲染。顯式補這條保證 hidden 永遠贏。 */ [hidden] { display: none !important; } /* 修坑：background 只放 html，不要跟著放 body。html 有非透明背景時該值會被拿去畫 canvas(最底層，蓋不到任何東西)；但如果 body 也宣告了背景，body 就不會被視為「已傳播、視同無背景」，會在一般 stacking 層自己再畫一次——那一層高於 z-index:-1 的 .chakra-scene-bg/.chakra-reveal-curtain，會把它們蓋住到 body 內容的高度為止(實測只有 body 内容以下的視窗餘白看得到背景圖)。 */ html { background: linear-gradient(180deg, var(--lf-warm-ivory) 0%, #fbf7f0 100%); /* 375px 實測 20px 橫向溢出（.chakra-entrance-fx::before 130% 寬、.chakra-result-fog、 .chakra-body-figure-wrap::before 皆有意外外溢的裝飾層）——最外層一次防呆，不逐一收窄每個溢出源的寬度。 ⚠️ 必須用 clip 不能用 hidden：依 CSS Overflow 規範，overflow-x:hidden 會讓 overflow-y 從 visible 計算成 auto，因此變成捲動容器——手機（尤其 iOS Safari）的慣性滑動與 position:fixed 背景會出問題，桌機也多一層無謂的捲動脈絡。 clip 抑制同樣的橫向溢出但不建立捲動容器（oracle.css 同坑已於 2026-07-24 修正，這裡是 2026-07-27 user 反饋「身體覺察題滑動有問題」時補上的同型修復）。 */ overflow-x: clip; } html, body { margin: 0; min-height: 100%; color: var(--lf-deep-lavender); font-family: 'Noto Sans TC', sans-serif; line-height: 1.7; } h1, h2, h3, .chakra-eyebrow, .chakra-theme-title { font-family: 'Cormorant Garamond', 'Noto Sans TC', serif; } /* ---------- 場景背景層（單一 fixed div，JS 依畫面切換 class；同 oracle.css 的 .oracle-bg pattern） ---------- */ .chakra-scene-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-size: cover; background-position: center; } /* 每張場景圖都疊一層 ivory 紗罩保文字可讀性（0.65 不透明度：圖仍可見、底色夠亮） */ .chakra-scene-bg--entrance { background-image: linear-gradient(rgba(244, 235, 221, 0.65), rgba(244, 235, 221, 0.65)), url(../images/tools/chakra/scenes/entrance-background.webp); } /* background-position 50% 44%＝實測畫中發光球心位置（scratchpad 像素分析：亮點中心 x49.9% y44.2%），讓 CSS 呼吸圓能疊準畫中球（見 .chakra-breath-orb），不是猜的座標 */ .chakra-scene-bg--breath { background-image: linear-gradient(rgba(244, 235, 221, 0.35), rgba(244, 235, 221, 0.35)), url(../images/tools/chakra/scenes/breathing-background.webp); background-position: 50% 44%; } .chakra-scene-bg--question-body { background-image: linear-gradient(rgba(244, 235, 221, 0.68), rgba(244, 235, 221, 0.68)), url(../images/tools/chakra/scenes/question-body-background.webp); } .chakra-scene-bg--question-scenario { background-image: linear-gradient(rgba(244, 235, 221, 0.68), rgba(244, 235, 221, 0.68)), url(../images/tools/chakra/scenes/question-scenario-background.webp); } .chakra-scene-bg--reveal { background-image: linear-gradient(rgba(244, 235, 221, 0.5), rgba(244, 235, 221, 0.5)), url(../images/tools/chakra/scenes/reveal-background.webp); } .chakra-scene-bg--result { background-image: linear-gradient(rgba(244, 235, 221, 0.68), rgba(244, 235, 221, 0.68)), url(../images/tools/chakra/scenes/result-background.webp); } .chakra-skip-link { position: absolute; left: -999px; top: 0; background: var(--lf-warm-ivory); color: var(--lf-deep-lavender); padding: 0.5em 1em; z-index: 100; } .chakra-skip-link:focus { left: 0.5em; top: 0.5em; } .chakra-topbar { display: flex; justify-content: center; padding: 1rem; } .chakra-brand { display: flex; align-items: center; gap: 0.5em; color: var(--lf-deep-lavender); text-decoration: none; opacity: 0.85; font-size: 0.95rem; } .chakra-brand img { border-radius: 50%; } .chakra-app { max-width: 640px; margin: 0 auto; padding: 1rem 1.25rem 4rem; min-height: 70vh; position: relative; } /* ---------- 進度：光的旅程（不用 % 數字，用漸亮的光點列） ---------- */ .chakra-progress-track { display: flex; gap: 0.4rem; justify-content: center; margin: 0 0 2rem; } .chakra-progress-fill { display: none; } /* 光點由 JS 動態產生 span，這裡只保留 a11y 容器語意 */ .chakra-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(74, 58, 99, 0.16); transition: background var(--lf-dur-med) var(--lf-ease-breath), box-shadow var(--lf-dur-med) var(--lf-ease-breath); } .chakra-progress-dot.is-lit { background: var(--dot-color, var(--lf-champagne-gold)); box-shadow: 0 0 8px 1px var(--dot-color, var(--lf-champagne-gold)); } .chakra-sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- 通用畫面 ---------- */ .chakra-screen { text-align: center; animation: chakra-fade-in var(--lf-dur-slow) var(--lf-ease-breath); } @keyframes chakra-fade-in { from { opacity: 0; } to { opacity: 1; } } .chakra-eyebrow { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; color: var(--chakra-muted); margin-bottom: 0.75rem; } .chakra-h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 500; margin: 0 0 1rem; /* mix-blend-mode 文字融色（工單新增，改良自 rocketweblabs 白字+exclusion——我們淺底深字，改用 multiply：深紫字疊上 .chakra-scene-bg--entrance 場景圖（scene 圖上另疊了 0.65 不透明 ivory 紗罩，見該規則），字色只會更暗、對比只升不降，實測數字見驗收報告。 */ mix-blend-mode: multiply; } .chakra-lede { font-size: 1.05rem; opacity: 0.9; } .chakra-meta { font-size: 0.9rem; color: var(--chakra-muted); margin-bottom: 2rem; } .chakra-disclaimer { font-size: 0.75rem; color: var(--chakra-muted); margin-top: 2.5rem; } .chakra-error { color: #a3423b; } .chakra-btn { display: inline-block; font-family: inherit; font-size: 1rem; padding: 0.85em 2em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; min-height: 44px; text-decoration: none; } .chakra-btn--primary { background: linear-gradient(135deg, var(--lf-champagne-gold), var(--lf-amber)); color: #2a2035; font-weight: 600; } .chakra-btn--primary:hover, .chakra-btn--primary:focus-visible { filter: brightness(1.08); } .chakra-btn--ghost { background: transparent; color: var(--lf-deep-lavender); border-color: rgba(74, 58, 99, 0.35); } .chakra-btn--ghost:hover, .chakra-btn--ghost:focus-visible { border-color: var(--lf-champagne-gold); } .chakra-btn:focus-visible { outline: 2px solid var(--lf-champagne-gold); outline-offset: 2px; } /* ---------- 入口氛圍：雲煙霧層（2 層 blur 徑向漸層橫向緩飄）＋稀疏流光粒子（14 顆，上飄＋微閃）同層 z-index:-1（fixed，位於 scene-bg -2 之上、內容之下），只用 transform/opacity 動畫。 reduced-motion 全域規則會把 duration 壓到 0.01ms/iteration 壓到 1/transform 歸零—— 效果等同直接消失，不需另外寫停用規則。 */ .chakra-entrance-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* 雲煙 v6：雙拷貝無縫單向飄移（機制見 tools-shared.css .lf-fog-band 註解），取代 v5 的「來回擺盪」ping-pong keyframe。四道帶子（入口底部兩層對向飄移＋前景＋上緣）維持原本層數不變，只換內部驅動方式；紋理仍是同一批程式合成分形雜訊圖。 px/s 換算（1440px 桌機實測基準）： entrance-a 寬 130%×1440≈1872px、29s → ≈64.6px/s； entrance-b 寬 110%×1440≈1584px、37s → ≈42.8px/s； front 寬 90%×1440≈1296px、27s → ≈48.0px/s； top 寬 70%×1440≈1008px、20s → ≈50.4px/s（原 38s≈26.5px/s 低於目標區間，已加速）。 */ .lf-fog-band--entrance-a { width: 130%; height: 26vh; left: -15%; bottom: 0; filter: blur(4px); opacity: 0.85; animation-duration: 29s; } .lf-fog-band--entrance-a .lf-fog-tile { background-image: var(--lf-fog-a); } .lf-fog-band--entrance-b { width: 110%; height: 18vh; left: -15%; bottom: 12%; filter: blur(4px); opacity: 0.85; animation-duration: 37s; animation-direction: reverse; } .lf-fog-band--entrance-b .lf-fog-tile { background-image: var(--lf-fog-b); } /* 前景霧：疊在內容之上的超低透明度霧絮（pointer-events:none 穿透）——電影景深手法，高度壓在畫面下緣、不碰按鈕與正文區 */ .lf-fog-band--front { left: -10%; bottom: -6%; width: 90%; height: 16vh; filter: blur(6px); opacity: 0.6; z-index: 2; animation-duration: 27s; } .lf-fog-band--front .lf-fog-tile { background-image: var(--lf-fog-a); } /* 上緣細霧：單側、比底部淡一半、細長——環繞感但不壓標題（霧沉底才自然，上面只點到為止）。 border-radius:50% 已移除（工單新增機制的必要取捨）：舊版靠橢圓裁切遮住方形硬邊，但雙拷貝軌道需要 overflow:visible 讓第二份 tile 露在右側，裁切與此互斥；改成完全依賴底圖本身左右已羽化到透明的 alpha 邊緣自然收邊，視覺上從「橢圓光暈」變成「無邊界的霧絮」，回報中列為刻意變更而非缺陷。 */ .lf-fog-band--top { right: -12%; top: 3%; width: 70%; height: 13vh; filter: blur(3px); opacity: 0.85; animation-duration: 20s; } .lf-fog-band--top .lf-fog-tile { background-image: var(--lf-fog-b); } /* 尺寸/光暈加大（3px 無光暈 → 4px 基準 + box-shadow 光暈，nth-child 錯落 3-5px 不單調） */ .chakra-particle { position: absolute; left: var(--left, 0%); bottom: -4%; width: 4px; height: 4px; border-radius: 50%; background: var(--lf-champagne-gold); box-shadow: 0 0 5px 1px rgba(216, 179, 106, 0.55); opacity: 0; animation: chakra-particle-float calc(15s + var(--i, 0) * 0.7s) linear infinite; animation-delay: calc(var(--i, 0) * -1.6s); } .chakra-particle:nth-child(3n) { width: 5px; height: 5px; box-shadow: 0 0 6px 1.5px rgba(216, 179, 106, 0.6); } .chakra-particle:nth-child(4n+1) { width: 3px; height: 3px; box-shadow: 0 0 4px 1px rgba(216, 179, 106, 0.5); } @keyframes chakra-particle-float { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 15% { opacity: 0.8; } 50% { transform: translateY(-46vh) scale(1.15); opacity: 0.35; } 65% { opacity: 0.85; } 100% { transform: translateY(-92vh) scale(0.8); opacity: 0; } } /* ---------- 呼吸安住 ---------- */ /* 2026-07-28 追加修正：畫面本身的入場淡入（見上面 .chakra-screen 的 chakra-fade-in， 1.2s）會連「略過」鈕一起淡入——36s 的引導偏長，略過鈕必須從一開始就明顯可見，不能連它也跟著淡（user 明訂：不要淡入或藏在下方）。只在呼吸畫面關掉整段淡入，其餘畫面不受影響。 */ .chakra-screen--breath { min-height: 60vh; animation: none; } /* 略過鈕跟文字/球一樣改 fixed，三者用同一套技巧各自定位——比靠 flex-end 推到底部更可預期（原本 flex-end 算出來會跟文字擠在一起，實測才發現的）。置中同樣不用 transform（reduced-motion 會歸零，見上面 orb 的註解）。 */ #btn-skip-breath { position: fixed; left: 0; right: 0; top: 78%; margin-inline: auto; width: max-content; } /* 呼吸圓改 fixed 疊在場景圖(z-index -2)之上、內容之下，跟畫中發光球同心對位（見上面 background-position），視覺上是「那顆球在變亮變大」而不是憑空多一顆球。尺寸 max(8.6vw,12.8vh) 換算自畫中光球直徑佔圖高約 12.8%，在 background-size:cover 縮放下這是讓圓形疊圖跟著等比例縮放的精確公式（scale=max(vw/圖寬,vh/圖高)）。 */ /* 置中故意用 margin 負值算，不用 transform:translate(-50%,-50%)——共用的 reduced-motion 規則對 .lf-motion 後代下了 `transform:none !important`， author !important 贏過 animation/transition，會把置中用的 translate 一起歸零、球整個歪掉 (實測抓到)。改用 margin 置中，transform 就能安全只留給呼吸的 scale 用， reduced-motion 關掉 scale 時球仍準確疊在畫中球心上。 */ /* 2026-07-28 同步修正（工單 item 1，user 反饋「呼吸跟節奏字對不起來」，後追加反饋「4s/4s 太快」）：球原本用 CSS infinite keyframes 自跑一輪，文字另跑自己的時鐘 ——兩個各自的時鐘沒有共同起點，永遠對不齊。改成「球只認 class、時鐘完全交給 JS」：吸氣加 .is-inhale、吐氣加 .is-exhale，transform/opacity 用 transition 過渡，JS 在同一個 tick 換 class 也觸發文字交叉淡出淡入（見 js/chakra.js runBreathCycle）。 transition-duration 不寫死在這裡——吸氣(5s)/吐氣(7s)時長不同，且工單要求兩端各留 300-500ms 停留感，實際時長由 JS 依相位動態設定（style.transitionDuration，見 applyBreathPhase），CSS 只給 timing-function 與吸/吐兩態的目標值。 */ .chakra-breath-orb { /* user 反饋放大：8.6vw/12.8vh（貼齊畫中球）→ 1.4 倍，光暈明確大於畫中球才有「球在呼吸」感 */ --orb-size: max(12vw, 18vh); position: fixed; left: 50%; top: 44%; width: var(--orb-size); height: var(--orb-size); margin-left: calc(var(--orb-size) / -2); margin-top: calc(var(--orb-size) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(216, 179, 106, 0.85) 0%, rgba(217, 154, 69, 0.4) 45%, transparent 72%); pointer-events: none; z-index: -1; /* 吸=小變大、吐=大變小——初始態＝吐氣終態（第一個 tick 由 JS 加 .is-inhale 觸發吸氣過渡）*/ transform: scale(0.72); opacity: 0.35; transition-property: transform, opacity; transition-timing-function: var(--lf-ease-breath); } .chakra-breath-orb.is-inhale { transform: scale(1.32); opacity: 1; } .chakra-breath-orb.is-exhale { transform: scale(0.72); opacity: 0.35; } /* reduced-motion：全域規則（tools-shared.css）「只留 opacity，不做 transform」的既定慣例在這裡自然生效——transform 被壓成 none（球不縮放），但 transition-property 仍保留 opacity，球的明暗仍會跟著吸吐淡化/變亮；文字與輪次指示照常按各自時長推進、3 輪後照常前進，不是另外做一套「安住中」靜態畫面（維持跟站內既有 reduced-motion 政策一致）。 */ /* 引導文字移到球下方安全距離（球心在 44%，文字在 62%）。同樣不用 transform 置中（理由同上），改 left:0;right:0;margin-inline:auto 這個不靠 transform 的置中法。 2026-07-28 追加修正（user 反饋「太快」有一部分是硬切換字造成的急促感）：換字前先交叉淡出、換完再淡入（見 js/chakra.js crossfadeBreathText），opacity+極輕微上移（中文字不做 blur——工單明訂）。transition-duration 0.65s（≥ 0.6s，對應驗收要求「量測文字元素 transition duration ≥0.6s 證明不是硬切」），必須與 JS 端 BREATH_TEXT_FADE_MS 同步（兩處數字要一致，否則會淡出到一半就被打斷）。 */ .chakra-breath-text { position: fixed; left: 0; right: 0; top: 62%; margin-inline: auto; width: max-content; max-width: 80vw; text-align: center; font-size: 1.1rem; opacity: 0.85; transform: translateY(0); transition: opacity 0.65s ease, transform 0.65s ease; } .chakra-breath-text.is-fading { opacity: 0; transform: translateY(6px); } /* 輪次指示（「第 N 次呼吸・共 3 次」）：文字下方一行，比引導文字更淡一階（次要資訊）。常駐更新、不加淡出淡入動畫（工單允許的替代方案——只在跨輪那兩次 tick 才變，不像吸/吐文字每個相位都換，動畫的邊際效益低）。 */ .chakra-breath-round { position: fixed; left: 0; right: 0; top: 69%; margin-inline: auto; width: max-content; max-width: 80vw; text-align: center; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--chakra-muted); } /* ---------- 題目 ---------- */ .chakra-journey-label { font-size: 0.85rem; letter-spacing: 0.1em; color: var(--chakra-muted); margin-bottom: 0.5rem; } .chakra-question-text { font-size: clamp(1.2rem, 4vw, 1.6rem); font-weight: 500; margin: 0.5rem 0 2rem; } .chakra-options { display: flex; flex-direction: column; gap: 0.75rem; } .chakra-option { display: block; width: 100%; text-align: left; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(74, 58, 99, 0.2); color: var(--lf-deep-lavender); border-radius: 14px; padding: 0.9em 1.1em; font-family: inherit; font-size: 1rem; cursor: pointer; min-height: 44px; transition: background var(--lf-dur-med), border-color var(--lf-dur-med); } .chakra-option:hover, .chakra-option:focus-visible { background: rgba(216, 179, 106, 0.18); border-color: var(--lf-champagne-gold); } .chakra-option:focus-visible { outline: 2px solid var(--lf-champagne-gold); outline-offset: 2px; } .chakra-option.is-selected { border-color: var(--lf-champagne-gold); background: rgba(216, 179, 106, 0.24); } .chakra-nav-row { margin-top: 2rem; } /* ---------- 2026-07-23 UX 審查工單新增 ---------- */ /* A：題目標題是每題前進後的焦點落點——programmatic focus 不強制觸發 :focus-visible，但保險起見兩者都寫：一般 focus 不出現突兀外框，鍵盤族群仍看得到高對比外框。 */ .chakra-question-text:focus { outline: none; } .chakra-question-text:focus-visible { outline: 2px solid var(--lf-champagne-gold); outline-offset: 6px; } /* G：身體覺察題可點性微提示 */ .chakra-body-hint { font-size: 0.85rem; color: var(--chakra-muted); margin: -1.25rem 0 1.25rem; } /* H：從 localStorage 恢復進度時的一次性提示 */ .chakra-resume-banner { font-size: 0.85rem; color: var(--chakra-muted); background: rgba(216, 179, 106, 0.16); border-radius: 10px; padding: 0.6em 1em; margin: 0 0 1.25rem; } .chakra-resume-banner a { color: var(--lf-deep-lavender); text-decoration: underline; } /* ---------- 身體藝術（水彩人物插畫底圖 + SVG 熱區/節點疊層） ---------- */ .chakra-body-figure-wrap { display: flex; flex-direction: column; align-items: center; /* 上下留白收緊（原 1rem/2rem）：覺察題在 700px 高的手機上要塞題目＋提示＋人物＋「沒有明顯的位置」按鈕，省下的 ~24px 讓那顆按鈕露出頭來、暗示還有東西可捲。 */ margin: .5rem 0 1rem; } .chakra-body-figure { position: relative; /* 只給互動熱區題用（結果頁能量圖已改用獨立的 .chakra-energy-map，見下方）—— 放大讓行動裝置點擊面積足夠（2026-07-23 user 反饋熱區點不準） */ /* 寬度同時受高度上限約束（56vh × 2/3 ＝對應 2:3 比例的寬）——否則 375×700 實測人物 506px 高、底部落在 778px，把「沒有明顯的位置」按鈕整顆推到摺線外，使用者以為只能點人物、還得先摸索捲動（2026-07-27 user 反饋「滑動有問題」的第二個成因）。 */ width: min(430px, 90vw, calc(60vh * 0.6667)); aspect-ratio: 2 / 3; /* 柔和光暈當人物的「地面」，讓它像站在場景裡而不是貼在頁面上 */ filter: drop-shadow(0 18px 20px rgba(74, 58, 99, 0.18)); } .chakra-body-img, .chakra-body-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .chakra-body-img { object-fit: contain; } /* 圖載入失敗 fallback：柔和漸層底（不退回舊幾何剪影） */ .chakra-body-img-fallback { border-radius: 16px; background: linear-gradient(180deg, rgba(216, 179, 106, 0.18), rgba(122, 107, 158, 0.12)); } /* 熱區改「垂直相接的區帶」（rect，非圓）：零重疊零死區。預設幾乎不可見，摸到/選中才亮——不把水彩人物切成解剖圖格線（2026-07-23 user 拍板）。 */ .chakra-body-hotspot { fill: transparent; stroke: rgba(74, 58, 99, 0.06); stroke-width: 1; cursor: pointer; transition: fill var(--lf-dur-med), stroke var(--lf-dur-med); /* fill-mode 故意不用 both/forwards：animation 對 fill/stroke 的優先度高於一般 cascade，用 both 會讓動畫結束後仍卡住 100% 的值、蓋掉 :hover/:focus-visible 規則（實測踩到——hover 完全沒反應）。不設 fill-mode，動畫跑完後才會把 fill/stroke 交還給一般 cascade，:hover 才生效。100% keyframe 值已經等於靜止態的值，交還瞬間不會有跳動。 */ animation: chakra-hotspot-intro 0.7s ease-out; animation-delay: var(--intro-delay, 0s); } /* hover/focus 回饋。（2026-07-28：曾為 44px 觸控目標加過隱形放大命中層，但它疊在區帶上方吃掉指標事件、又與相鄰區帶重疊導致點錯區——已移除，觸控好按改由 .chakra-region-chips 解決。） */ .chakra-body-hotspot:hover, .chakra-body-hotspot:focus-visible { fill: var(--hotspot-fill-hover, rgba(216, 179, 106, 0.35)); stroke: var(--hotspot-stroke, var(--lf-champagne-gold)); outline: none; } .chakra-body-hotspot.is-selected { fill: var(--hotspot-fill-selected, rgba(216, 179, 106, 0.55)); stroke: var(--hotspot-stroke, var(--lf-champagne-gold)); } /* 進入身體覺察題：七區帶依序輕閃一次再回到極淡的靜止態（可發現性提示），閃光用該區對應的脈輪色（--hotspot-fill-hover/--hotspot-stroke），不是通用金色 */ @keyframes chakra-hotspot-intro { 0% { fill: rgba(216, 179, 106, 0); stroke: rgba(216, 179, 106, 0); } 55% { fill: var(--hotspot-fill-hover, rgba(216, 179, 106, 0.35)); stroke: var(--hotspot-stroke, rgba(216, 179, 106, 0.8)); } 100% { fill: transparent; stroke: rgba(74, 58, 99, 0.06); } } @media (prefers-reduced-motion: reduce) { /* 共用的 .lf-motion reduced-motion 規則把所有 animation-duration 壓到 0.01ms，七區帶依序閃這個 @keyframes 效果在 reduced-motion 下形同消失（符合預期：不做閃爍式動態）。但 G 工單要求 reduced-motion 下仍要有「全部同時淡入」的可感知提示——改用 opacity transition（reduced-motion 規則只放行 transition-property: opacity，這是全站規則刻意留的唯一動態管道）而不是 keyframes 動畫，JS 端在下一個 frame 加上 .chakra-hotspot-rm-visible 觸發淡入。 */ .chakra-body-hotspot { animation: none !important; opacity: 0; transition: opacity 400ms linear; } .chakra-body-hotspot.chakra-hotspot-rm-visible { opacity: 1; } } /* ---------- 蓮花符號（脈輪節點小圖示，body 能量圖 / 結果卡共用生成器） ---------- */ .chakra-lotus { display: block; overflow: visible; } .chakra-lotus-glyph { transform-origin: 50px 50px; } /* ---------- 結果頁人體能量圖：註記式版型（2026-07-23 方案A）---------- 身體上七個脈輪光點（大小＋光暈編碼光階）＋引線拉到外側註記（蓮花符號＋輪名＋光階詞），左右交錯排列。整張圖是單一 viewBox 的 inline SVG，靠 CSS 等比縮放、不分斷點—— 這是 375px 手機也放得下的關鍵（同一份版型，只是縮放比例不同）。 */ /* width:100% 是必要的，不只是 max-width：父層 .chakra-body-figure-wrap 是 align-items:center 的 flex column，flex item 預設 fit-content 寬度，沒有明確 width 時 SVG（viewBox 有但無 width/height 屬性）會退回 UA 預設 300px 而不是真正撐滿可用寬度（實測：拿掉這行桌機只渲染出 300px 寬）。 */ /* 能量圖後方極淡柔光暈：z-index:0 讓 #energy-map-wrap 自建 stacking context， ::before(z-index:-1) 才會確實鎖在這個容器內、不會外溢蓋到其他區塊。靜態不加動畫——"不能搶能量圖" 的最穩妥做法就是它完全不動。 */ #energy-map-wrap { position: relative; z-index: 0; } #energy-map-wrap::before { content: ""; position: absolute; inset: -12%; z-index: -1; background: radial-gradient(circle at 50% 45%, rgba(216, 179, 106, 0.14), transparent 70%); filter: blur(28px); pointer-events: none; } /* 400→560px：跟父層 .chakra-result-layer 的 max-width:560px 對齊（2026-07-23 user 反饋人物變太小），560 是頁面版型下這個容器實際能撐到的天花板，配 JS 端加大的 MAP_BODY_W/H （見 chakra.js CHAKRA_BODY_Y 上方常數）才能讓人物視覺高度回到 ~480px 桌機量級 */ .chakra-energy-map { width: 100%; max-width: 560px; margin: 0 auto; } .chakra-energy-map-svg { display: block; width: 100%; height: auto; overflow: visible; } .chakra-energy-lead { stroke: rgba(74, 58, 99, 0.3); stroke-width: 1; fill: none; } .chakra-energy-lead-end { fill: rgba(74, 58, 99, 0.4); } .chakra-energy-name { font-family: 'Cormorant Garamond', 'Noto Sans TC', serif; font-size: 13px; font-weight: 500; fill: var(--lf-deep-lavender); } .chakra-energy-stage { font-size: 11px; fill: var(--chakra-muted); } /* 身體光點：大小＋光暈濃淡編碼光階（很穩定/穩定流動=中等飽滿、需要滋養=較小暗淡、承擔較多=較大強光暈、轉化中=中等＋張力動畫）；四種狀態動畫沿用既有 keyframes，只是掛到這個上，不再是整個蓮花符號節點。 */ .chakra-energy-dot { transform-box: fill-box; transform-origin: 50% 50%; filter: drop-shadow(0 0 var(--node-glow-blur, 5px) var(--node-glow, rgba(216, 179, 106, 0.45))); transition: opacity var(--lf-dur-slow) var(--lf-ease-breath); } .chakra-energy-dot.chakra-body-node--very_stable, .chakra-energy-dot.chakra-body-node--stable_flow { animation: chakra-node-breathe var(--lf-dur-breath) var(--lf-ease-breath) infinite; } .chakra-energy-dot.chakra-body-node--overextended { animation: chakra-node-pulse 1.6s ease-in-out infinite; } .chakra-energy-dot.chakra-body-node--transforming { animation: chakra-node-tension 3.5s ease-in-out infinite; } /* 需要滋養：微光緩慢明滅（比呼吸更慢更暗，「等待被點亮」的意象） */ .chakra-energy-dot.chakra-body-node--needs_nourishment { animation: chakra-node-dim-glow 9s var(--lf-ease-breath) infinite; } @keyframes chakra-node-dim-glow { 0%, 100% { opacity: 0.3; transform: scale(0.94); } 50% { opacity: 0.95; transform: scale(1.04); } } @keyframes chakra-node-breathe { 0%, 100% { opacity: 0.6; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes chakra-node-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } } @keyframes chakra-node-tension { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } /* ---------- 結果卡蓮花小圖示（20px，與 label 同行——見上面 .chakra-card-label-row） ---------- */ .chakra-card-icon { width: 20px; height: 20px; margin: 0; } /* ---------- 顯影過場：短暫沉入暗色 → 七輪光點次第亮起 → 淡出回淺色 ---------- */ .chakra-screen--reveal { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; } /* 暗轉簾幕：疊在場景圖之上、一般內容之下，animation 跑完後維持全透明（forwards）。 reduced-motion 全域規則（tools-shared.css）會把 duration 壓到 0.01ms、直接停在「透明=已回到淺色」，等同「直接淡入結果、不做暗轉」。 */ .chakra-reveal-curtain { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 30%, var(--chakra-reveal-dusk-1) 0%, var(--chakra-reveal-dusk-2) 85%); animation: chakra-reveal-curtain-fade 2s var(--lf-ease-breath) forwards; } @keyframes chakra-reveal-curtain-fade { 0%, 35% { opacity: 1; } 100% { opacity: 0; } } /* 顯影瞬間一次性「光塵綻放」：粒子從中央(對齊 curtain 徑向中心 50% 30%)向外散開淡出，不循環——animation-iteration-count 用預設值 1，不是 infinite。畫面每次重新顯示都會從 display:none 回到可見（見 showScreen/[hidden] 機制），CSS 動畫因此每次自動重播一次，不需要額外 JS 觸發。DOM 順序排在 curtain 之後、reveal-figure 之前——沿用同檔案已驗證的 z-index:-1 疊層規則（負 z 元素之間由文件順序決定疊放、皆蓋不到一般內文，見上方 curtain 註解）。 */ .chakra-dust-burst { position: fixed; left: 50%; top: 30%; z-index: -1; pointer-events: none; } .chakra-dust-mote { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--lf-champagne-gold); box-shadow: 0 0 6px 1px rgba(216, 179, 106, 0.7); opacity: 0; animation: chakra-dust-scatter 1.7s var(--lf-ease-breath) forwards; animation-delay: calc(var(--i, 0) * 0.05s); } @keyframes chakra-dust-scatter { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1); opacity: 0; } } .chakra-reveal-figure { display: flex; flex-direction: column-reverse; /* 海底輪在下、頂輪在上，對應脊柱由下而上次第亮起 */ align-items: center; gap: 0.55rem; } .chakra-reveal-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dot-color, var(--lf-champagne-gold)); opacity: 0; animation: chakra-reveal-dot-light 0.5s ease forwards; animation-delay: var(--dot-delay, 0s); } @keyframes chakra-reveal-dot-light { from { opacity: 0; transform: scale(0.4); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } to { opacity: 1; transform: scale(1); box-shadow: 0 0 12px 2px var(--dot-color, var(--lf-champagne-gold)); } } .chakra-reveal-line { max-width: 32em; opacity: 0.9; } /* ---------- 結果頁氛圍：更淡的雲煙霧層（同入口手法、不透明度減半） ---------- */ .chakra-result-fog { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* 結果頁圖片霧層已改用 .lf-fog-band--result（真實 DOM 子節點，見 chakra.html），雙拷貝無縫單向飄移；::after 維持原本的 radial-gradient 光暈層（非圖片，不在本次機制範圍內，繼續用舊的 ping-pong 手法）。px/s：軌道寬 130%×1440≈1872px、46s → ≈40.7px/s。 */ .lf-fog-band--result { left: -15%; width: 130%; height: 42vh; bottom: -12%; filter: blur(5px); opacity: 0.45; /* 結果頁霧更淡，不搶能量圖 */ animation-duration: 46s; } .lf-fog-band--result .lf-fog-tile { background-image: var(--lf-fog-a); } .chakra-result-fog::after { content: ""; position: absolute; left: -15%; width: 130%; bottom: 2%; height: 30vh; background: radial-gradient(ellipse at center, rgba(198, 183, 218, 0.32), transparent 70%); animation: chakra-fog-drift-glow 62s var(--lf-ease-breath) infinite reverse; } @keyframes chakra-fog-drift-glow { 0%, 100% { transform: translateX(-10%) translateY(1.5vh); opacity: 0.8; } 50% { transform: translateX(46%) translateY(-1.5vh); opacity: 1; } } /* ---------- 結果頁 ---------- */ .chakra-result-layer { margin: 0 auto 3rem; max-width: 560px; } /* F：頂部日期行＋回訪時的次要重新測驗連結按鈕 */ .chakra-result-date-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--chakra-muted); } .chakra-btn--tiny { padding: 0.4em 1.1em; font-size: 0.8rem; min-height: 36px; } /* K：結果頁章節導覽圓點（scrollspy）。慢調性 0.4s transition；<=400px 收起避免擠版（390px 為工單指定的手機測試寬度）。 */ .chakra-spy-nav { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 5; } .chakra-spy-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(74, 58, 99, 0.18); border: none; padding: 0; cursor: pointer; transition: background 0.4s var(--lf-ease-breath), transform 0.4s var(--lf-ease-breath), box-shadow 0.4s var(--lf-ease-breath); } .chakra-spy-dot.is-active { background: var(--dot-color, var(--lf-champagne-gold)); box-shadow: 0 0 6px 1px var(--dot-color, var(--lf-champagne-gold)); transform: scale(1.35); } @media (max-width: 400px) { /* 自行判斷不擠版：極窄螢幕內容優先，導覽點收起（390px 手機測試寬度落在此規則內） */ .chakra-spy-nav { display: none; } } .chakra-theme-title { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0 0 1rem; } .chakra-theme-body { opacity: 0.9; } .chakra-result-cards { display: grid; gap: 0.85rem; } .chakra-card { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(74, 58, 99, 0.15); border-radius: 16px; padding: 1.1rem 1.25rem; text-align: left; } .chakra-card--flow { border-color: rgba(169, 184, 162, 0.5); } .chakra-card--nourishment { border-color: rgba(175, 199, 213, 0.5); } .chakra-card--overextension { border-color: rgba(155, 109, 91, 0.5); } /* 圖示＋label 同一行（2026-07-23 收緊層級：原本圖示/label/輪名/內文四層直落太鬆散） */ .chakra-card-label-row { display: flex; align-items: center; gap: 0.45em; margin: 0 0 0.35rem; } .chakra-card-label-row .chakra-card-icon { width: 20px; height: 20px; margin: 0; } .chakra-card-label { font-size: 0.8rem; color: var(--chakra-muted); margin: 0; } /* 輪名放大＋帶該輪色細底線（--chakra-accent 由 JS 依實際脈輪動態設值，見 chakra.js renderResult；underline 只貼文字寬度，不是整排拉滿，讀起來才像強調不是分隔線） */ .chakra-card-chakra { display: inline-block; margin: 0 0 0.6rem; font-size: 1.55rem; padding-bottom: 0.15em; border-bottom: 2px solid var(--chakra-accent, var(--lf-champagne-gold)); } .chakra-card-text { margin: 0; font-size: 0.95rem; } /* B：滋養／承擔同輪時的橋接句——柔和提示兩卡談的是同一個中心，不是專業轉介警語，視覺上跟 .chakra-card-boundary 區分開（不加頂線、不用斜體） */ .chakra-card-bridge { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--chakra-muted); } /* boundary 句視覺區隔柔和化：極淡橫線＋加大留白，跟內文分層但不用生硬色塊 */ .chakra-card-boundary { margin: 0.85rem 0 0; padding-top: 0.6rem; border-top: 1px solid rgba(74, 58, 99, 0.12); font-size: 0.85rem; font-style: italic; color: var(--chakra-muted); } .chakra-echo-text, .chakra-practice-text { text-align: left; opacity: 0.9; white-space: pre-line; } /* 2026-07-28 美化（工單 item 2，user 反饋「這塊有點醜」）：改成跟結果頁其他層同一設計語言 ——.chakra-card 那種淡底/細邊/圓角的卡片感，每輪一列：左側蓮花符號＋該輪色細色條，輪名為列標題，右側光階詞當 pill（該輪色淡底），下一行接核心主題／該輪的引導問句（quiz.chakras[].coreQuestion，既有資料欄位，不是新造文案）。 */ .chakra-full-breakdown { margin-top: 1rem; text-align: left; display: grid; gap: 0.6rem; } .chakra-full-row { display: flex; gap: 0.85rem; align-items: flex-start; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(74, 58, 99, 0.12); border-left: 3px solid var(--row-color, var(--lf-champagne-gold)); border-radius: 14px; padding: 0.85rem 1rem; transition: background 0.3s var(--lf-ease-breath); } /* hover/focus 底色微變化（桌機）——鍵盤可達（tabindex=0），focus-visible 另加該輪色描邊 */ .chakra-full-row:hover, .chakra-full-row:focus-visible { background: rgba(255, 255, 255, 0.78); } .chakra-full-row:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--row-color, var(--lf-champagne-gold)) inset; } .chakra-full-row-icon { flex: none; width: 26px; height: 26px; margin-top: 0.1rem; } .chakra-full-row-body { flex: 1 1 auto; min-width: 0; } .chakra-full-row-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.3rem; } .chakra-full-row-name { margin: 0; font-size: 1.05rem; font-weight: 500; } .chakra-full-row-stage { font-size: 0.78rem; padding: 0.2em 0.75em; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .chakra-full-row-facet { margin: 0 0 0.2rem; font-size: 0.88rem; opacity: 0.85; } .chakra-full-row-desc { margin: 0; font-size: 0.85rem; color: var(--chakra-muted); } @media (max-width: 400px) { .chakra-full-row { padding: 0.7rem 0.8rem; gap: 0.65rem; } .chakra-full-row-name { font-size: 1rem; } } /* 摺疊觸發鈕：品牌語言的自訂箭頭（不是瀏覽器 details 三角——本身就是