，沒有 flex 置中的話文字貼在左上角、還會溢出按鈕邊界——跟 .tzhd-snip-btn 用同一套置中規則。 */ .tzhd-reveal-btn { width: 100%; min-height: 44px; border: 0; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--btn-primary-shadow); font: 700 var(--fs-base)/1 var(--font-sans); visibility: hidden; white-space: nowrap; } .tzhd-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); } .tzhd-grade { border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 8px 4px; text-align: center; font-size: var(--fs-md); font-weight: 700; line-height: 1.35; background: var(--surface); color: var(--fg); } .tzhd-grade small { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--fg-muted); } .tzhd-grade.tzhd-pick { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: transparent; box-shadow: var(--btn-primary-shadow); } /* 🐛 QQ 抓到（影片版已修，原型沒跟著修）：這行本來是靜態套用，跟卡片本身的 background 各過各的日子——播放時卡片背景要等 tzhd-pickOn 在 4.3s 才變成 --btn-primary-bg，這段小字卻從 0s 就套用「疊在 --btn-primary-bg 上才讀得到」的顏色，疊在還沒變色的 --surface 上，深色和淺色主題都會有 ~1 秒幾乎看不見（量出來對比 <2:1）。修法：小字跟卡片本身同步變色（見下面 tzhd-pickOnSmall）， 0–4.3s 沿用一般卡片同款的 --fg-muted（在 --surface 上本來就合格），變色那一刻才切到跟白底卡搭配的顏色——靜態版（reduced-motion／2×2 網格）沒有動畫，直接沿用這行的最終色，不受影響。 */ .tzhd-grade.tzhd-pick small { color: color-mix(in srgb, var(--btn-primary-fg) 70%, transparent); } .tzhd-next { margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--accent-memory-text); background: var(--accent-memory-tint); border-radius: var(--r-full); padding: 4px 12px; } /* —— 場景 4：帶走 —— */ .tzhd-mini { display: flex; align-items: center; gap: var(--sp-3); } .tzhd-mini .tzhd-t { font-weight: 700; font-size: var(--fs-md); line-height: 1.4; color: var(--fg); } .tzhd-mini .tzhd-s { font-size: var(--fs-sm); color: var(--fg-muted); } .tzhd-dest { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); } .tzhd-dest-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; background: var(--surface-2); border-radius: var(--r-card); padding: 10px var(--sp-4); box-shadow: var(--hl-s2); } .tzhd-dest-row .tzhd-name { font-weight: 700; font-size: var(--fs-md); line-height: 1.3; color: var(--fg); } .tzhd-dest-row .tzhd-how { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.5; } .tzhd-dest-row .tzhd-ok { margin-left: auto; color: var(--pine-ink); display: inline-flex; } .tzhd-dest-row .tzhd-ok .ic { width: 22px; height: 22px; } .tzhd-arrow-down { display: flex; justify-content: center; color: var(--fg-faint); margin-top: var(--sp-3); } /* ===== 版面：桌機一幕＝文案左、畫面右；靜態版（reduced-motion／還沒進視窗）＝ 2×2 ===== */ @media (min-width: 820px) { .tzhd-demo { margin-top: var(--sp-7); } .tzhd-scene { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-7); max-width: 900px; width: 100%; margin: 0 auto; } .tzhd-cap { justify-self: start; } .tzhd-screen { justify-self: end; height: 420px; } .tzhd-demo:not(.is-playing) .tzhd-stage { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); row-gap: var(--sp-7); max-width: 900px; margin: 0 auto; } .tzhd-demo:not(.is-playing) .tzhd-scene { grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; align-content: start; } .tzhd-demo:not(.is-playing) .tzhd-cap, .tzhd-demo:not(.is-playing) .tzhd-screen { justify-self: center; } .tzhd-demo:not(.is-playing) .tzhd-cap { text-align: left; width: 100%; max-width: 380px; } } @media (max-width: 819px) { .tzhd-steps { margin-bottom: var(--sp-4); } .tzhd-scene { gap: var(--sp-3); } .tzhd-cap h3 { font-size: 1.35rem; margin-bottom: 2px; } .tzhd-cap p { font-size: var(--fs-base); } .tzhd-demo:not(.is-playing) .tzhd-stage { gap: var(--sp-7); } /* 手機：進度條移到畫面下方，讓假 App 畫面盡量進首屏；文案固定兩行高，換幕時畫面不上下跳 */ .tzhd-demo.is-playing { display: flex; flex-direction: column; } .tzhd-demo.is-playing .tzhd-steps { order: 2; margin: var(--sp-4) 0 0; } .tzhd-demo.is-playing .tzhd-stage { order: 1; } .tzhd-demo.is-playing .tzhd-ctl { order: 3; margin-top: var(--sp-2); } .tzhd-demo.is-playing .tzhd-cap p { min-height: calc(2 * 1.7em); } } /* ===== 播放模式：四幕疊在同一格（高度＝最高那幕，換幕不跳版） ===== */ .tzhd-demo.is-playing .tzhd-steps { display: grid; } .tzhd-demo.is-playing .tzhd-stage { gap: 0; } .tzhd-demo.is-playing .tzhd-scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; } .tzhd-demo.is-playing .tzhd-scene.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease .28s, visibility 0s; } .tzhd-demo.is-playing .tzhd-steps .is-active .tzhd-fill { animation: tzhd-fill var(--D) linear forwards; } .tzhd-demo.is-paused *, .tzhd-demo.is-paused *::before, .tzhd-demo.is-paused *::after { animation-play-state: paused !important; } @media (hover: hover) { .tzhd-demo.is-playing .tzhd-stage:hover * { animation-play-state: paused !important; } } .tzhd-ctl { display: flex; justify-content: center; margin-top: var(--sp-4); } .tzhd-pause { display: none; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-full); background: none; color: var(--fg-muted); font: 500 var(--fs-sm)/1 var(--font-sans); cursor: pointer; align-items: center; gap: 6px; } .tzhd-demo.is-playing .tzhd-pause { display: inline-flex; } /* ===== 各幕的時間軸：預設樣式＝最終狀態；動畫只描述「從哪裡來」。所以 reduced-motion／JS 還沒跑到 .is-playing 時，直接看到每一幕的完成態。 ===== */ @keyframes tzhd-fill { from { width: 0; } to { width: 100%; } } @keyframes tzhd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes tzhd-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes tzhd-lineOff { from { border-left-color: var(--primary); color: var(--fg); } to { border-left-color: transparent; color: var(--fg-faint); } } @keyframes tzhd-lineOn { from { border-left-color: transparent; color: var(--fg-faint); } to { border-left-color: var(--primary); color: var(--fg); } } @keyframes tzhd-markOn { from { background: transparent; } to { background: color-mix(in srgb, var(--primary) 14%, transparent); } } @keyframes tzhd-press { 0%, 100% { transform: none; box-shadow: var(--btn-primary-shadow); } 45% { transform: scale(.97); box-shadow: var(--btn-primary-pressed); } } @keyframes tzhd-sheetUp { from { transform: translateY(105%); } to { transform: none; } } @keyframes tzhd-type { from { width: 0; } to { width: 15em; } } @keyframes tzhd-caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes tzhd-revealBtn { 0%, 84% { visibility: visible; opacity: 1; transform: none; box-shadow: var(--btn-primary-shadow); } 88% { visibility: visible; opacity: 1; transform: scale(.97); box-shadow: var(--btn-primary-pressed); } 93%, 99.9% { visibility: visible; opacity: 1; transform: none; } 100% { visibility: hidden; opacity: 0; } } @keyframes tzhd-pickOn { from { background: var(--surface); color: var(--fg); border-color: var(--line-strong); box-shadow: none; } to { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: transparent; } } /* 小字（「≈3 天後」）跟卡片本身用同一段時間軸換色——見上面 .tzhd-grade.tzhd-pick small 的說明，這支不能自己一套時間表。 */ @keyframes tzhd-pickOnSmall { from { color: var(--fg-muted); } to { color: color-mix(in srgb, var(--btn-primary-fg) 70%, transparent); } } /* 場景 1（--D 4.4s） */ .tzhd-demo.is-playing .tzhd-s1.is-active .tzhd-l1 { animation: tzhd-lineOff .3s ease .9s both; } .tzhd-demo.is-playing .tzhd-s1.is-active .tzhd-l2 { animation: tzhd-lineOn .3s ease .9s both, tzhd-markOn .4s ease 2.1s both; } .tzhd-demo.is-playing .tzhd-s1.is-active .tzhd-snip-btn { animation: tzhd-press .35s ease 1.8s both; } .tzhd-demo.is-playing .tzhd-s1.is-active .tzhd-sheet { animation: tzhd-sheetUp .5s var(--ease-out) 2.3s both; } /* 場景 2（4.6s） */ .tzhd-demo.is-playing .tzhd-s2.is-active .tzhd-card { animation: tzhd-rise .5s var(--ease-out) .2s both; } .tzhd-demo.is-playing .tzhd-s2.is-active .tzhd-title { animation: tzhd-fade .4s ease .5s both; } .tzhd-demo.is-playing .tzhd-s2.is-active .tzhd-src { animation: tzhd-fade .4s ease .7s both; } .tzhd-demo.is-playing .tzhd-s2.is-active li:nth-child(1) { animation: tzhd-rise .45s var(--ease-out) 1.2s both; } .tzhd-demo.is-playing .tzhd-s2.is-active li:nth-child(2) { animation: tzhd-rise .45s var(--ease-out) 1.7s both; } .tzhd-demo.is-playing .tzhd-s2.is-active .tzhd-quote { animation: tzhd-rise .45s var(--ease-out) 2.3s both; } .tzhd-demo.is-playing .tzhd-s2.is-active .tzhd-jump { animation: tzhd-fade .4s ease 2.9s both; } /* 場景 3（6s；回訪是瓶頸，這幕給最長） */ .tzhd-demo.is-playing .tzhd-s3.is-active .tzhd-rv-cue { animation: tzhd-rise .45s var(--ease-out) .3s both; } .tzhd-demo.is-playing .tzhd-s3.is-active .tzhd-typed { animation: tzhd-type 1.5s steps(15, end) 1s both; } .tzhd-demo.is-playing .tzhd-s3.is-active .tzhd-caret { animation: tzhd-caretBlink .8s step-end 1s 3; } .tzhd-demo.is-playing .tzhd-s3.is-active .tzhd-reveal-btn { animation: tzhd-revealBtn 3.2s linear 0s both; } .tzhd-demo.is-playing .tzhd-s3.is-active .tzhd-grades { animation: tzhd-fade .35s ease 3.2s both; } .tzhd-demo.is-playing .tzhd-s3.is-active .tzhd-ans { animation: tzhd-rise .4s var(--ease-out) 3.2s both; } .tzhd-demo.is-playing .tzhd-s3.is-active .tzhd-grade.tzhd-pick { animation: tzhd-pickOn .25s ease 4.3s both; } .tzhd-demo.is-playing .tzhd-s3.is-active .tzhd-grade.tzhd-pick small { animation: tzhd-pickOnSmall .25s ease 4.3s both; } .tzhd-demo.is-playing .tzhd-s3.is-active .tzhd-next { animation: tzhd-rise .4s var(--ease-out) 4.6s both; } /* 場景 4（4.6s） */ .tzhd-demo.is-playing .tzhd-s4.is-active .tzhd-mini { animation: tzhd-rise .45s var(--ease-out) .2s both; } .tzhd-demo.is-playing .tzhd-s4.is-active .tzhd-arrow-down { animation: tzhd-fade .3s ease .6s both; } .tzhd-demo.is-playing .tzhd-s4.is-active .tzhd-dest-row:nth-child(1) { animation: tzhd-rise .45s var(--ease-out) .9s both; } .tzhd-demo.is-playing .tzhd-s4.is-active .tzhd-dest-row:nth-child(2) { animation: tzhd-rise .45s var(--ease-out) 1.3s both; } .tzhd-demo.is-playing .tzhd-s4.is-active .tzhd-dest-row:nth-child(3) { animation: tzhd-rise .45s var(--ease-out) 1.7s both; } .tzhd-demo.is-playing .tzhd-s4.is-active .tzhd-dest-row:nth-child(1) .tzhd-ok { animation: tzhd-fade .3s ease 1.6s both; } .tzhd-demo.is-playing .tzhd-s4.is-active .tzhd-dest-row:nth-child(2) .tzhd-ok { animation: tzhd-fade .3s ease 2.0s both; } .tzhd-demo.is-playing .tzhd-s4.is-active .tzhd-dest-row:nth-child(3) .tzhd-ok { animation: tzhd-fade .3s ease 2.4s both; } @media (prefers-reduced-motion: reduce) { .tzhd-demo *, .tzhd-demo *::before, .tzhd-demo *::after { animation: none !important; transition: none !important; } }