底下」
用選擇器優先權覆蓋掉間距,不影響其他沒有加這個 class 的頁面。
5.5rem 大約是 11rem 的一半,符合使用者「大概減少二分之一」的說法。 */
.page-compact .hero.hero-page,
.page-compact .screen-panel:not(.hero):not(:last-of-type) {
margin-bottom: 5.5rem;
}
/* 2026-09-21 新增、2026-09-22 第七輪移除:主視覺背景原本放了兩塊柔和
光暈色塊(.aurora-blob-a / .aurora-blob-b,純裝飾、aria-hidden),想
營造深色背景上的「極光漸層」氛圍。使用者附圖標註「這兩個光圈要消除,
很明顯不是背景阿!」——模糊、透明度沒有做到融入背景的效果,反而看
起來是兩個突兀的獨立光圈,所以整組(HTML 的兩個 div、這裡的
.aurora-blob / .aurora-blob-a / .aurora-blob-b 規則、手機版的寬高
覆蓋)都移除,hero 背景還原成單純的深色底,不再有這層裝飾光暈。 */
/* 2026-09-22 新增:主視覺焦點區——使用者要求「tavi 放正中間,旁邊隨機
出現對話框」,把原本單純當裝飾小圖示的 hero-orb 升級成整個主視覺真正
的視覺主角,額外包一層 .hero-figure 當定位容器,讓對話泡泡
(.tavi-say)可以用 position:absolute 準確地貼在 Tavi 旁邊。 */
.hero-figure {
position: relative;
width: fit-content;
/* 2026-09-22 第五輪調整:下面跟「TAVI · 桌面遊戲 AI 助理」那行的間距
從 1.5rem 收窄到 1rem;第六輪再次收窄到 0.6rem,使用者附圖反映還要
再往上貼近一點。 */
margin: 0 auto 0.6rem;
z-index: 1;
}
.hero-orb {
/* 原本固定 9.5rem,現在改成響應式、而且明顯放大——Tavi 是主視覺的
主角,不是陪襯的小圖示。 */
width: clamp(11rem, 22vw, 15rem);
height: clamp(11rem, 22vw, 15rem);
display: block;
}
.hero-orb .glow-layer {
animation: glow-breathe 3.4s ease-in-out infinite;
transform-origin: 110px 110px;
}
/* 2026-09-22 新增:Tavi 旁邊隨機出現的對話泡泡,由 assets/site-motion.js
控制顯示時機跟文字內容(見該檔案「主視覺 Tavi 的隨機對話泡泡」那段)。
預設 opacity:0、由 JS/GSAP 淡入淡出——就算 JS 沒執行,這個元素本來就
不佔版面高度(absolute 定位),完全不影響頁面其他內容的正常顯示。 */
.tavi-say {
position: absolute;
/* 預設(上排)位置,見下面 .pos-mid / .pos-bottom 這兩個中/下排變化。 */
top: 4%;
left: 100%;
margin-left: 1.1rem;
width: max-content;
/* 2026-09-22 調整:使用者反映泡泡太窄,長一點的台詞換行換得不好看,
從 14rem 加寬到 19rem,大多數台詞單行或只換一次行就能顯示完。 */
max-width: 19rem;
padding: 0.65rem 0.95rem;
border-radius: 14px;
background: var(--hud-panel);
border: 1px solid var(--hud-line-dim);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 0 18px rgba(0, 80, 120, 0.18);
opacity: 0;
pointer-events: none;
z-index: 2;
}
.tavi-say-text {
margin: 0;
color: var(--hud-ice);
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.5;
text-align: left;
/* 2026-09-22 新增:真的需要換行時,盡量從標點符號(、,。！？等)這類
自然的斷句處換,不要從一個詞的中間硬切——line-break: strict 是
中文排版常用的「避頭尾」規則(標點符號不會被斷到下一行的開頭),
word-break/overflow-wrap 維持瀏覽器預設的一般斷行邏輯,不做
word-break: break-all 這種「滿寬就硬切」的粗暴斷行。 */
word-break: normal;
overflow-wrap: normal;
line-break: strict;
}
.tavi-say::before {
content: "";
position: absolute;
left: -0.5rem;
top: 1.15rem;
width: 0.9rem;
height: 0.9rem;
background: var(--hud-panel);
border-left: 1px solid var(--hud-line-dim);
border-bottom: 1px solid var(--hud-line-dim);
transform: rotate(45deg);
}
/* assets/site-motion.js 每次換下一句台詞,會從「上/中/下 × 左/右」6 個
位置裡隨機挑一個(見該檔案 BUBBLE_POSITIONS),讓泡泡不是只固定貼在
同一個高度的左右兩側,而是繞著 Tavi 隨機出現在不同位置,看起來更生動
——.is-left 控制左右側(預設在右側),.pos-mid / .pos-bottom 控制垂直
位置(預設在上方,對應 top: 4%)。 */
.tavi-say.is-left {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 1.1rem;
}
.tavi-say.is-left .tavi-say-text {
text-align: right;
}
.tavi-say.is-left::before {
left: auto;
right: -0.5rem;
border-left: none;
border-bottom: none;
border-right: 1px solid var(--hud-line-dim);
border-top: 1px solid var(--hud-line-dim);
}
.tavi-say.pos-mid {
top: 40%;
}
.tavi-say.pos-bottom {
top: 76%;
}
/* 手機窄螢幕:左右浮動的泡泡會超出螢幕寬度,改成貼在 Tavi 正下方、
置中顯示,三角形尾巴為了避免額外處理旋轉角度的複雜度,直接不顯示,
泡泡本身當成一個置中的說明文字卡片就已經清楚易讀。 */
@media (max-width: 640px) {
/* 2026-09-27 調整:使用者要求手機版的對話泡泡統一出現在 Tavi 上方,
不要隨機出現在不同位置。原本這裡只用單一 .tavi-say class 覆蓋
(權重 0,1,0),蓋不掉 .tavi-say.pos-mid(top:40%)、
.tavi-say.pos-bottom(top:76%)這兩條「中/下」隨機位置規則(權重
0,2,0,兩個 class 疊加,權重比這裡原本的寫法高)——手機版如果剛好
隨機到 pos-mid/pos-bottom,泡泡就會維持桌面版那組 top 數值,跟下面
的文字重疊,而不是統一貼在 Tavi 上方。
改用 .hero-figure .tavi-say(父層 .hero-figure + 本身,權重同樣是
0,2,0)當選擇器——.tavi-say 本來就是 .hero-figure 的直接子元素(見
index.html),這樣寫法權重打平,而這條規則寫在檔案比較後面、
權重打平時後面蓋前面,才能真正蓋掉 pos-mid/pos-bottom,不受隨機到
哪個位置影響。同時把泡泡從原本貼在 Tavi 下方(top:100%)改成貼在
Tavi 上方(bottom:100%)。 */
.hero-figure .tavi-say {
left: 50%;
right: auto;
top: auto;
bottom: 100%;
margin: 0 0 0.85rem;
/* 水平置中改由 assets/site-motion.js 用 GSAP 的 xPercent 處理
(見該檔案說明)——GSAP 本來就會接管這個元素的 transform 屬性
(要用 transform 做淡入時的位移/縮放動畫),這裡如果同時用 CSS
的 transform: translateX(-50%) 做置中,兩邊會互相覆蓋掉,所以
置中改成完全交給 JS 那邊統一管理,不在 CSS 這裡設定 transform。 */
max-width: 18rem;
}
.hero-figure .tavi-say .tavi-say-text {
text-align: center;
}
.hero-figure .tavi-say::before {
display: none;
}
}
.hero-eyebrow {
color: var(--hud-line);
font-family: var(--font-display);
/* 2026-09-19 調整:使用者要求跟 h1 互換大小。原本 0.35em 字距是配合
小字級設計的,直接套到放大後的字級會讓間距誇張到不好讀,所以這裡
跟著字級縮小字距比例,維持放大後還算舒服的間距。
2026-09-20 調整:使用者反映這行與下面的 h1 太擠,把下邊距加大,
讓兩行標題之間留多一點呼吸空間。
2026-09-22 第六輪調整:使用者附圖反映 h1 那句還要再往上貼近一點,
下邊距從 1.2rem 收窄到 0.9rem——比 2026-09-20 調整前的間距(原本
更小)寬一些,兩次反映的訴求各退一步,不會又擠回太緊的狀態。 */
letter-spacing: 0.08em;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
margin: 0 0 0.9rem;
}
.hero h1 {
/* 2026-09-20 調整:使用者反映互換後的 h1 太小,改成跟 .section-title
(例如「牠能幫你做什麼」那個標題)同樣的字級跟間距——字級、
margin 數值直接對齊 .section-title,兩邊都只設 margin-bottom、
不設 margin-top,前面的間距一樣是由上一個元素自己的間距決定。 */
font-family: var(--font-display);
/* 2026-09-22 調整:明確指定用品牌色票裡的 Ice White,比原本沒設定、
直接繼承 body 的 --hud-text 再亮一點,呼應參考案例裡標題文字用
「接近純白」顏色跳出來的做法。 */
color: var(--hud-ice);
margin: 0 0 0.6rem;
font-size: 1.7rem;
font-weight: 800;
text-shadow: 0 0 18px rgba(77, 240, 255, 0.55);
}
.hero p.lede {
max-width: 38rem;
margin: 0 auto 2rem;
color: var(--hud-muted);
font-size: 1.05rem;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* 2026-09-21 新增:捲動提示——原本是 position:absolute 貼齊 .hero 底部
的小指示點,提示玩家「下面還有內容,可以往下滑」。
2026-09-22 第七輪調整:使用者附圖標註「滾動放這」,位置在按鈕正下方
不遠處——原本貼齊 .hero 底部的做法,在 .hero 改成
min-height: calc(100vh - 3.6rem) + 內容靠上(justify-content:
flex-start,見上面 .hero.screen-panel 規則)之後,按鈕跟畫面最底部
之間會空出一大段,捲動提示被拉到很遠的下方,視覺上跟按鈕脫節。改成
直接接在 .hero-actions(下載/了解特色按鈕)後面的一般文件流位置
(見 index.html,.scroll-cue 現在是 .container 裡的最後一個子元素),
不再用 position:absolute 對齊 .hero 底部,這樣不管畫面多高,捲動
提示都會穩定貼在按鈕下方一小段距離,不會被拉遠。手機窄螢幕還是直接
隱藏(手機使用者本來就慣於滑動探索,不需要這個提示,留著反而佔
位置)。
2026-09-22 第十三輪調整:使用者附圖標註「滾輪提示與『牠能幫你做
什麼』的距離太遠了」。用 Playwright 量測 1907x1010 視窗後確認:
.hero 用 min-height 撐滿一個螢幕、但實際內容(Tavi、標題、按鈕、
這個提示點)沒有那麼高,justify-content: flex-start 又把內容整包
往上貼齊,留下來的空間全部堆在提示點下方、變成看不見的一大截空白,
把下一個區塊往下推遠。這裡把 margin-top 從 2.5rem 加到 4rem(多
1.5rem = 30px,剛好等於量到的那段沒被用到的空白),讓提示點往下
吃掉那段本來浪費掉的空間、更貼近 .hero 的實際下緣,藉此把距離縮短
一點,不影響提示點跟上面按鈕的相對位置(margin-top 只吃「原本沒被
佔用」的多餘空間,不會把 .hero 撐得更高,也不會讓下一個區塊提早
探頭——.hero 的總高度本來就是 min-height 撐出來的下限,這裡最多
只能把撐出來但沒被用到的空間填滿,不會反過來讓 .hero 變矮)。這一輪
縮短的量不大,真正大宗的距離其實是下面「牠能幫你做什麼」自己的
內距和垂直置中留白造成的,那部分另外調整(見 .screen-panel:not(.hero)
規則)。 */
.scroll-cue {
position: relative;
display: block;
margin: 5.3rem auto 0;
width: 1.2rem;
height: 2.4rem;
z-index: 1;
animation: scroll-cue-bounce 1.6s ease-in-out infinite;
}
.scroll-cue::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 1.6rem;
background: var(--hud-line);
transform: translateX(-50%);
}
.scroll-cue::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0.85rem;
height: 0.85rem;
border-right: 2px solid var(--hud-line);
border-bottom: 2px solid var(--hud-line);
transform: translateX(-50%) rotate(45deg);
}
@keyframes scroll-cue-bounce {
0%,
100% {
transform: translateY(0);
opacity: 0.5;
}
50% {
transform: translateY(0.55rem);
opacity: 1;
}
}
@media (max-width: 480px) {
.scroll-cue {
display: none;
}
}
/* ---------- 區塊 / 卡片 ---------- */
section {
padding: 3rem 0;
}
.section-title {
text-align: center;
font-family: var(--font-display);
margin: 0 0 0.6rem;
font-size: 1.7rem;
font-weight: 800;
/* 2026-09-27 新增:使用者反映所有「次標」(每個區塊自己的 h2 標題,
例如「系統需求」「工作坊:Skin、語音分享區」)要統一都有光暈——
跟 .hero h1 本來就用的 Ice White 顏色 + 青色發光 text-shadow 是
同一組數值,直接照抄過來,讓「主標(hero h1)」跟「次標
(.section-title)」的發光視覺一致。這個 class 全站共用,改這裡會
讓所有頁面的區塊標題一起套用,不用逐頁個別加。 */
color: var(--hud-ice);
text-shadow: 0 0 18px rgba(77, 240, 255, 0.55);
}
.section-subtitle {
text-align: center;
color: var(--hud-muted);
max-width: 34rem;
margin: 0 auto 2.2rem;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
gap: 1.1rem;
}
/* 2026-09-20 新增:首頁的兩個 4 格區塊(牠能幫你做什麼 / 常見問題)
改成固定 2x2 排列,比自動排版更整齊好看;螢幕較窄時收成單欄。 */
.card-grid-2x2 {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
.card-grid-2x2 {
grid-template-columns: 1fr;
}
}
/* 2026-09-27 新增:特色頁「基礎功能」原本跟「完整版限定」共用同一個
auto-fit 的 .card-grid,卡片寬度會依當排卡片「數量」自動平分容器寬度
——基礎功能有 5 張、完整版限定只有 3 張,寬螢幕時兩邊卡片會分到不同
寬度,看起來大小不一致。改成固定 3 欄(一行 3 個,多的自動換行),兩個
區塊都套用同一個 class,卡片大小就會完全一樣,不受各自卡片數量影響。
斷點沿用全站已經在用的 720px / 480px(跟上面 .nav-toggle 那組一致),
而不是另外發明新的斷點。 */
.card-grid-3 {
/* 2026-10-15:1fr 改成 minmax(0, 1fr)。1fr 的下限是「卡片內容的最小寬度」,
英文版的標題 + 「Full version」標籤比中文長,在 721px 左右的視窗會把欄寬
撐大、讓整個頁面出現橫向捲軸;minmax(0, 1fr) 讓三欄永遠平分,文字自己換行。 */
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
.card-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.card-grid-3 {
grid-template-columns: 1fr;
}
}
.card {
background: var(--hud-panel);
border: 1px solid var(--hud-line-dim);
border-radius: 12px;
padding: 1.4rem;
box-shadow: inset 0 0 24px rgba(0, 80, 120, 0.18);
/* 2026-09-21 新增:滑鼠移上去時輕輕抬升 + 邊框跟陰影一起變亮/變深,
是卡片式版面最常見、也最低風險的「有沒有互動感」判斷依據之一,
全站所有卡片(不管哪一頁)都會自動套用,不需要改任何 HTML。 */
transition: transform 0.3s var(--ease-premium), border-color 0.3s ease,
box-shadow 0.3s ease, background 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
border-color: var(--hud-line);
background: var(--hud-panel-elevated);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(0, 80, 120, 0.22);
}
/* 2026-10-04 新增:首頁四張功能卡片下面的循環示範影片(見 index.html 同日期的
註解、assets/loopvideo.js)。
- .card-with-media 把卡片改成直向 flex,.card-media 用 margin-top: auto 貼到
卡片最底部——同一排兩張卡片的文字長度不同、卡片被格線拉成一樣高時,兩支
影片的底部仍然對齊,不會一高一低。
- 影片只放大到不超過 26rem 高(桌機約 520px、手機約 440px),也不超過卡片
內容寬度;兩個限制同時生效時瀏覽器會保持原本比例縮小,不會變形。直式聊天
視窗(584x778)會縮小到約 520px 高,接近正方形的設定視窗(482x496)幾乎維持
原尺寸,所以四支影片的高度大致一致。
- 影片是用 Tavi 視窗本身的邊界裁出來的(視窗自己有一圈青色邊框與圓角),
這裡的圓角(0.35rem)略大於視窗原本的圓角,把裁切後四個角落多出來的一點
背景藏起來;外圈加一層淡淡的青色光暈,跟全站其他發光元素一致。 */
.card-with-media {
display: flex;
flex-direction: column;
}
.card-media {
margin-top: auto;
padding-top: 1.3rem;
display: flex;
justify-content: center;
align-items: flex-end;
}
.card-video {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 26rem;
border-radius: 0.35rem;
background: #02101c;
box-shadow: 0 0 18px rgba(77, 240, 255, 0.28);
}
.card h3 {
font-family: var(--font-display);
margin: 0 0 0.5rem;
font-size: 1.05rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.card p {
margin: 0;
color: var(--hud-muted);
font-size: 0.92rem;
}
/* 2026-09-20 新增:常見問題卡片原本是「是/不是」開頭直接接一整段解釋
全部黏在同一段裡,使用者反映讀起來不順眼。拆成兩個 :第一個是
簡短的是非答案(加這個 class,加粗、跟主文字同色,和下面說明拉開
一點距離),第二個才是完整說明,維持 .card p 原本的顏色/字級。 */
.card .faq-answer {
margin: 0 0 0.5rem;
font-weight: 700;
color: var(--hud-text);
}
.badge {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 0.15rem 0.5rem;
border-radius: 999px;
border: 1px solid var(--hud-line-dim);
color: var(--hud-line);
background: rgba(2, 12, 22, 0.6);
}
/* 2026-09-21 調整:「完整版」標籤原本借用 --hud-danger(紅色)當邊框色,
跟警告/危險訊息共用同一個顏色,語意上容易混淆(紅色直覺上是「有問題」
而不是「加值功能」)。改成金色系(--accent-amber),紅色之後專門留給
真正的警告(.callout.warning),兩種語意各自有獨立的顏色,不再共用。 */
.badge.locked {
color: var(--accent-amber);
border-color: rgba(255, 194, 102, 0.55);
background: rgba(255, 194, 102, 0.08);
}
/* 2026-09-27 新增:視覺上隱藏、但螢幕報讀軟體讀得到的輔助文字,給下面
.compare-table 裡的 ✓ / ✗ 符號補充「免費版可用」/「完整版可用」這種
文字說明用,避免只讀出「打勾」「打叉」符號、聽不出來是哪一欄。全站
目前只有這裡需要,先開成通用的工具 class,之後有其他地方需要一樣可以
直接套用。 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 2026-09-27 新增:特色頁「基礎功能」上方新增的免費版/完整版功能對照表
——比照 .callout 用同一套面板底色/邊框(視覺上算「大方塊」的同一個
語彙),裡面包一個真的
,而不是用卡片或格線模擬表格,語意跟
螢幕報讀軟體都比較正確。 */
.compare-table-wrap {
background: var(--hud-panel);
border: 1px solid var(--hud-line-dim);
border-radius: 14px;
padding: 0.4rem 1.3rem;
overflow-x: auto;
}
.compare-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.compare-table th,
.compare-table td {
padding: 0.85rem 0.6rem;
text-align: center;
border-bottom: 1px solid var(--hud-line-dim);
}
/* 2026-09-27 調整:原本這裡連 td 也是 white-space: nowrap,對特色頁那張
純打勾/打叉的表格沒差(欄位內容都很短),但訂閱頁新增的次數上限對照表
有幾格是完整的一句話(例如「依你自己 Anthropic 帳戶的用量計費」),
nowrap 會硬撐出很寬的欄位、逼出不必要的水平捲動。拿掉 td 的 nowrap,
讓長文字正常換行;短短一兩個字的徽章(.compare-yes/.compare-no/
.limit-tag)另外自己設 nowrap(見下面),不會被拆成兩行。 */
.compare-table th {
white-space: nowrap;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
border-bottom: none;
}
.compare-table th {
font-family: var(--font-display);
color: var(--hud-text);
font-weight: 700;
}
.compare-table .compare-feature-col,
.compare-table td:first-child {
text-align: left;
white-space: normal;
}
.compare-table td:first-child {
color: var(--hud-text);
}
.compare-yes,
.compare-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem;
white-space: nowrap;
}
/* 「可用」沿用主色系(--hud-line 青色),跟「完整版限定」卡片標籤刻意
用金色(--accent-amber)區隔開——這裡的重點是「有沒有」,不是「要不要
付費」,用另一組顏色語意會比較清楚。 */
.compare-yes {
color: var(--hud-bg-deep);
background: var(--hud-line);
}
.compare-no {
color: var(--hud-muted);
background: rgba(142, 201, 216, 0.12);
}
/* 2026-09-27 新增:訂閱頁的「次數上限」對照表,格子裡放的是「有上限」/
「無上限」這種文字徽章,不是單一符號,沿用 .compare-yes/.compare-no
同一套配色邏輯(青色實心 = 好消息、淡色 = 有限制),但改成隨文字寬度
自動撐開的藥丸形狀,而不是固定寬高的圓形。 */
.limit-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.3rem 0.9rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.85rem;
white-space: nowrap;
}
.limit-tag.is-unlimited {
color: var(--hud-bg-deep);
background: var(--hud-line);
}
.limit-tag.is-capped {
color: var(--hud-muted);
background: rgba(142, 201, 216, 0.12);
}
/* 2026-09-27 新增:表頭裡「完整版」/「自己設定」下面那行小字補充說明
(例如「未設定 API Key」),縮小、變細、變成 muted 色,跟上面主要的
欄位名稱拉開視覺層級,同時強制換行(表頭本身還是 nowrap,靠這個 block
自己起新行,不會把整個 th 撐更寬)。 */
.compare-table th .th-sub {
display: block;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 500;
color: var(--hud-muted);
margin-top: 0.2rem;
}
@media (max-width: 480px) {
.compare-table-wrap {
padding: 0.4rem 0.8rem;
}
.compare-table th,
.compare-table td {
padding: 0.7rem 0.4rem;
font-size: 0.85rem;
}
}
/* ---------- 訂閱方案表 ---------- */
.plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1.1rem;
}
.plan-card {
background: var(--hud-panel);
border: 1px solid var(--hud-line-dim);
border-radius: 14px;
padding: 1.6rem 1.3rem;
text-align: center;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: transform 0.3s var(--ease-premium), box-shadow 0.3s ease;
}
.plan-card:hover {
transform: translateY(-4px);
}
.plan-card.featured {
border-color: var(--hud-line);
box-shadow: 0 0 20px rgba(77, 240, 255, 0.25);
position: relative;
}
.plan-card.featured::before {
content: "最多人選";
position: absolute;
top: -0.65rem;
left: 50%;
transform: translateX(-50%);
background: var(--hud-line);
color: #041018;
font-size: 0.7rem;
font-weight: 800;
padding: 0.2rem 0.7rem;
border-radius: 999px;
}
.plan-name {
font-family: var(--font-display);
font-size: 1rem;
color: var(--hud-muted);
font-weight: 700;
letter-spacing: 0.05em;
}
.plan-price {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: var(--hud-text);
}
.plan-price span {
font-size: 0.95rem;
color: var(--hud-muted);
font-weight: 500;
}
/* ---------- 步驟清單 ---------- */
.steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.steps li {
display: flex;
gap: 0.9rem;
background: var(--hud-panel);
border: 1px solid var(--hud-line-dim);
border-radius: 10px;
padding: 0.9rem 1.1rem;
}
.step-index {
flex-shrink: 0;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
border: 1px solid var(--hud-line);
color: var(--hud-line);
font-family: var(--font-display);
display: grid;
place-items: center;
font-weight: 800;
font-size: 0.9rem;
}
.steps p {
margin: 0;
color: var(--hud-muted);
font-size: 0.92rem;
}
.steps strong {
color: var(--hud-text);
}
/* 2026-09-27 新增:工作坊頁面(workshop.html)的「怎麼下載，怎麼分享」
區塊,一個 section 裡要放兩組各自獨立的 .steps 步驟清單(下載一組、
分享一組),需要一個介於 .section-title(整個區塊的大標題)跟
.steps(個別步驟)之間的小標題,標出「這一組步驟在講什麼」。字級比
.section-title 小、置左(不像 .section-title 置中),第二組以後的
小標題上方多留一點空間跟前一組步驟拉開距離。 */
.subsection-title {
font-family: var(--font-display);
color: var(--hud-text);
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.8rem;
}
.subsection-title:not(:first-child) {
margin-top: 3rem;
}
/* ---------- 提示框 ---------- */
.callout {
border: 1px solid var(--hud-line-dim);
background: var(--hud-panel);
border-radius: 12px;
padding: 1.1rem 1.3rem;
font-size: 0.92rem;
color: var(--hud-muted);
}
.callout strong {
color: var(--hud-text);
}
.callout.warning {
border-color: var(--hud-danger);
background: rgba(90, 28, 36, 0.35);
color: #f3c7cd;
}
.callout.warning strong {
color: #fff;
}
/* 2026-09-22 第十輪新增:使用者要求把首頁「完整版與訂閱怎麼算」這個
提示框改成標題/內文/連結各自獨立一行,跟其他頁面(工作坊、討論版等)
共用的 .callout 預設「粗體字開頭直接接一整句」的行內排法不一樣。
為了不影響其他頁面既有的 .callout 用法,這裡新增一個只給這個實例用
的修飾用 class(.callout-stacked),而不是直接改 .callout strong 本身
的顯示方式。 */
.callout-stacked strong {
display: block;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.callout-stacked p {
margin: 0 0 0.6rem;
}
.callout-stacked p:last-child {
margin-bottom: 0;
}
/* ---------- 特色頁:實機示範影片區塊(2026-10-03 新增、同日第二輪
改成 YouTube 嵌入) ----------
使用者想要的版面參考 Steam 遊戲頁面的「內介紹」:一個發光次標 +
一段內文 + 一支影片/gif,中間空兩行(視覺上明顯的間距)再接下一組,
最後一組直接是整個區塊的結尾(不用額外收尾裝飾)。
次標/內文直接沿用全站共用的 .section-title / .section-subtitle
(就是使用者截圖裡示意的「發光次標」樣式本身),不另外發明新的標題
樣式,維持跟其他頁面「次標」視覺一致;.showcase-title /
.showcase-body 這兩個修飾用 class 只負責「卡片之間的間距」,不覆蓋
顏色/發光效果。(2026-10-04 更新:原本這裡還把 .showcase-title 的字級
縮成 1.3rem「比一般區塊次標小一號」,使用者看過實際頁面後反映影片區的
發光次標比其他區塊小太多,要求跟其他區塊一樣大,所以拿掉字級覆蓋,
直接用 .section-title 的 1.7rem。內文 .showcase-body 本來就沒有另外設定
字級,跟其他區塊的 .section-subtitle 一樣是 20px,不需要動。)
.showcase-block 不設 max-width——文字(h3/p)靠 .section-subtitle
自己的 max-width: 34rem 置中收窄,影片靠下面 .showcase-media-16x9
自己的寬度設定,兩者各自決定自己要多寬,不用共用同一個容器寬度。
第二輪改動(YouTube 嵌入)原因:原本這裡放的是另外剪出來、只框住
Tavi 對話框的 8-10 秒無聲循環直式小片段,使用者決定把 1-3 分鐘的
完整原始錄影改上傳到 YouTube 頻道,特色頁直接嵌入那份 YouTube 影片,
不再自己另外託管一份裁切版本。原始錄影是桌面/遊戲全螢幕畫面
(16:9),所以外框也從原本「依直式截圖比例、寬度 26rem 封頂」的
.showcase-media,改成下面這組固定 16:9 比例、寬度可以放到 50rem
的 .showcase-media-16x9。
高度用 aspect-ratio: 16/9 撐出,不用「padding-bottom: 56.25% +
height:0」那套舊式寫法——實測發現這裡會踩到那個寫法的經典陷阱:
百分比 padding 是依「父層」的寬度計算,不是依自己這個元素被
max-width 收窄後的寬度計算;.showcase-block 本身沒有設 max-width
(見上面說明),所以父層寬度會比 .showcase-media-16x9 自己的 50rem
寬很多,算出來的高度就會明顯偏高、不是正確的 16:9。aspect-ratio
是直接依元素自己的寬度算比例,沒有這個「父層寬度」的陷阱,新版
瀏覽器支援度也足夠,所以改用這個。iframe 用 position:absolute
疊滿整個容器(容器本身設 position:relative)。邊框/內發光沿用
.card 同一套視覺語言,讓嵌入的 YouTube 播放器看起來仍像網站自己的
一塊面板,不是突兀貼上去的外部內容。
沒有 autoplay:YouTube 影片是完整的 1-3 分鐘操作錄影,不是無聲
循環小卡片,改成一般「點了才播放」,見 features.html 裡