/* css/story.css — 射手檔案（/stories/）專用樣式。 * * 這幾頁是**獨立的靜態 HTML**，不是 SPA 的一部分（比稿定案 A 案「刊號檔案」）。 * 為什麼不做成 #/story/xxx：hash 對搜尋引擎是同一個網址，做了也不會被當成獨立頁面 * 索引，等於白做——而這幾頁存在的理由有一半就是自然搜尋流量（SPEC_M17 §1）。 * * 色彩／字級／間距一律吃 css/tokens.css，本檔不自己定義任何顏色值。 * 深色模式：靜態頁沒有 app.js，改由每頁 的三行 inline script 設定 * （先讀 App 存的偏好，沒有就跟系統），tokens.css 的深色區塊照樣生效。 */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-family); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } h1, h2, h3, p { margin: 0; } a { color: inherit; } .nowrap { white-space: nowrap; } .story { max-width: 560px; margin: 0 auto; padding: 0 var(--space-5) var(--space-8); } /* 回上層：小、輕、不搶戲，但每頁都要有（單頁落地的訪客需要出口） */ .story__back { display: inline-block; margin: var(--space-5) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: none; } .story__back:hover { color: var(--color-accent-text); } /* ---------------------------------------------------------------------- */ /* 刊頭：關卡序號當浮水印（呼應 App 內 hero 卡與徽章數字盤的同一套語彙） */ /* ---------------------------------------------------------------------- */ .masthead { position: relative; padding: var(--space-6) 0 var(--space-5); overflow: hidden; /* 刊號浮水印刻意超出右邊界，這裡切掉才不會造成水平溢出 */ } .masthead__bignum { position: absolute; top: 4px; right: -6px; font-size: 132px; font-weight: 800; line-height: .8; letter-spacing: -.04em; color: var(--color-border); user-select: none; z-index: 0; } .masthead__kicker, .masthead__name, .masthead__meta { position: relative; z-index: 1; } /* 小字一律用 accent-dark：實測 accent 在淺色底只有 3.4:1（AA 小字要 4.5）， accent-dark 是 5.19:1；深色模式下 accent-dark 是 #E8590C，同樣過關。 */ .masthead__kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--color-accent-text); } .masthead__name { margin-top: var(--space-2); font-size: var(--text-2xl); font-weight: 800; line-height: var(--leading-tight); } .masthead__meta { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); } .masthead__rule { position: relative; z-index: 1; height: 2px; background: var(--color-text); margin-top: var(--space-5); } /* ---------------------------------------------------------------------- */ /* 生涯數據帶：沿用 App 內 hero 卡的夜幕深藍面板 */ /* ---------------------------------------------------------------------- */ .statband { margin-top: var(--space-5); background: var(--color-night); color: var(--color-on-night); border-radius: var(--radius-md); padding: var(--space-4); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } .statband__num { font-size: var(--text-lg); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-align: center; } .statband__num small { font-size: .6em; font-weight: 700; } .statband__lab { margin-top: 5px; font-size: 10px; letter-spacing: .06em; color: var(--color-on-night-muted); text-align: center; } .statband__src { grid-column: 1 / -1; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-night-line); font-size: 10px; line-height: var(--leading-normal); color: var(--color-on-night-muted); text-align: center; } /* ---------------------------------------------------------------------- */ /* 正文 */ /* ---------------------------------------------------------------------- */ .prose { margin-top: var(--space-6); } .prose h2 { font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; color: var(--color-accent-text); margin-bottom: var(--space-3); } .prose h2 + p { margin-top: 0; } .prose p { font-size: var(--text-md); line-height: 1.75; color: var(--color-text); } .prose p + p { margin-top: var(--space-4); } .prose section + section { margin-top: var(--space-6); } /* 重點句：底線式螢光，不是整段變色（整段變色在長文裡很吵） */ .prose em { font-style: normal; background: linear-gradient(transparent 62%, var(--color-accent-tint) 62%); } .pull { margin: var(--space-6) 0; padding-left: var(--space-4); border-left: 3px solid var(--color-accent); font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); } .pull__who { display: block; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-normal); color: var(--color-text-muted); } /* ---------------------------------------------------------------------- */ /* 菜單區：輪次序列 */ /* ---------------------------------------------------------------------- */ .menu { margin-top: var(--space-6); border-top: 1px solid var(--color-border); padding-top: var(--space-4); } .menu__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .menu__title { font-size: var(--text-sm); font-weight: 800; } .menu__sub { font-size: var(--text-xs); color: var(--color-text-muted); } .menu__rounds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-3); } .rd { width: 36px; height: 38px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 10px; font-weight: 700; background: var(--color-surface-sunken); border: 1px solid var(--color-border); /* 10px 的格內小字用 muted 在深色模式只有 4.06:1（AA 小字要 4.5），直接用 text */ color: var(--color-text); } .rd b { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-text); } /* 三分輪染 accent-tint：一眼看得出這份菜單的距離結構。 文字色刻意不跟著改成 accent-dark——accent-dark 壓在深色模式的 accent-tint 上只有 4.06:1，10px 小字不及格；而且距離本來就有文字寫在格子裡，顏色只是輔助訊號。 */ .rd--three { background: var(--color-accent-tint); border-color: var(--color-accent-tint); } .rd--ft { background: var(--color-surface); } .menu__gate { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text); } .menu__gate strong { font-weight: 800; } .menu__note { margin-top: var(--space-3); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-muted); } /* ---------------------------------------------------------------------- */ /* CTA ／ 頁尾 ／ 其他檔案 */ /* ---------------------------------------------------------------------- */ .cta { display: block; margin-top: var(--space-6); min-height: var(--touch-min); line-height: var(--touch-min); text-align: center; text-decoration: none; font-size: var(--text-md); font-weight: 800; color: var(--color-on-fill); background: var(--color-fill-accent); border-radius: var(--radius-md); } /* CTA 下方的誠實補充：階梯不給跳關，先講清楚點下去會發生什麼（SPEC_M19 §1） */ .cta-note { margin-top: var(--space-3); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-muted); text-align: center; } .cta--ghost { margin-top: var(--space-3); color: var(--color-text); background: transparent; border: 1px solid var(--color-border-strong); } .foot { margin-top: var(--space-6); border-top: 1px solid var(--color-border); padding-top: var(--space-4); font-size: 11px; line-height: var(--leading-normal); color: var(--color-text-muted); } .foot a { color: var(--color-text-muted); } .foot p + p { margin-top: var(--space-2); } .others { margin-top: var(--space-7); } /* text-faint 在淺色底只有 3.26:1，凡是承載內容的文字一律用 muted（5.83:1）； faint 只留給純裝飾（例如刊號浮水印）。 */ .others__title { font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; color: var(--color-text-muted); } .others__list { margin-top: var(--space-3); } .of { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); text-decoration: none; } .of__n { width: 24px; flex-shrink: 0; font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-text-muted); } /* 可點的訊號用底線，不用右箭頭：一整排「→」是最沒有個性的 CTA 語彙，而底線是 印刷與網頁一直以來就在用的連結標記，跟這幾頁的雜誌調性也合。 */ .of__nm { font-size: var(--text-sm); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; } .of:hover .of__nm, .of:active .of__nm { text-decoration-color: var(--color-accent-text); } .of__fc { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-muted); } /* ---------------------------------------------------------------------- */ /* 索引頁（/stories/） */ /* ---------------------------------------------------------------------- */ .index-head { padding: var(--space-7) 0 var(--space-5); } .index-head__kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--color-accent-text); } .index-head__h1 { margin-top: var(--space-3); font-size: var(--text-xl); font-weight: 800; line-height: var(--leading-tight); } .index-head__lead { margin-top: var(--space-4); font-size: var(--text-md); line-height: 1.75; color: var(--color-text-muted); } .index-note { margin-top: var(--space-6); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-muted); }