/* * 錢進寶島──官網著陸頁樣式。 * * 這份色票直接沿用遊戲本體「暖光帳房像素風」的設計 token * （apps/web/src/styles/pixel-tokens.css），數值逐一核對過，不重新設計。 * 著陸頁只挑實際用得到的變數搬過來，不是整份複製——遊戲那邊還有棋盤 * 站點色、收支熱區圖色階等著陸頁用不到的變數，這裡略過。 * * 深色主題規則跟遊戲本體同一套邏輯：沒切換過時跟隨系統 * prefers-color-scheme；使用者按過右上角的深色主題按鈕後， * 蓋過系統偏好（見 index.html 的腳本）。 */ :root { color-scheme: light; --ink: #33241a; --paper: #f0dfbc; --paper-raised: #f6e9c6; --paper-sunken: #e4cfa4; --border: #4a3018; --temple-red: #a3322a; --post-green: #1c6647; --taxi-yellow: #894a12; --mrt-blue: #3a6986; --text-primary: var(--ink); --text-secondary: #5a462e; --text-muted: #6b573d; --text-on-accent: #f6e9c6; --shadow-soft: 6px 6px 0 rgba(0, 0, 0, 0.3); --shadow-raised: 7px 7px 0 rgba(0, 0, 0, 0.3); --wk-wood: #6b4a2e; --wk-gold: #d9a227; --wk-btn-shadow: #241609; --focus-ring: var(--mrt-blue); --font-body: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif; --font-mono: 'Press Start 2P', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif; } :root[data-theme='dark'] { color-scheme: dark; --ink: #e8e3cf; --paper: #15242b; --paper-raised: #1b2f37; --paper-sunken: #0c1418; --border: #a9825a; --temple-red: #d17b73; --post-green: #4fbe89; --taxi-yellow: #d89a3c; --mrt-blue: #6fa3c4; --text-primary: var(--ink); --text-secondary: #c9bfa0; --text-muted: #a79c7e; --text-on-accent: #1c130a; --shadow-soft: 6px 6px 0 rgba(0, 0, 0, 0.45); --shadow-raised: 7px 7px 0 rgba(0, 0, 0, 0.5); --wk-wood: #b8895c; --wk-gold: #f0c24e; --wk-btn-shadow: #241609; --focus-ring: #f0c24e; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']):not([data-theme='dark']) { color-scheme: dark; --ink: #e8e3cf; --paper: #15242b; --paper-raised: #1b2f37; --paper-sunken: #0c1418; --border: #a9825a; --temple-red: #d17b73; --post-green: #4fbe89; --taxi-yellow: #d89a3c; --mrt-blue: #6fa3c4; --text-primary: #e8e3cf; --text-secondary: #c9bfa0; --text-muted: #a79c7e; --text-on-accent: #1c130a; --shadow-soft: 6px 6px 0 rgba(0, 0, 0, 0.45); --shadow-raised: 7px 7px 0 rgba(0, 0, 0, 0.5); --wk-wood: #b8895c; --wk-gold: #f0c24e; --wk-btn-shadow: #241609; --focus-ring: #f0c24e; } } /* ---- reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--mrt-blue); } h1, h2, h3 { /* 標題用內文字型（Noto Sans TC）而非像素字型 Press Start 2P：標題是 中文，像素字型沒有中文字，本來就會退回 Noto——但標題裡的半形標點 （逗號、問號、連字號）會被像素字型接手，渲染成錯位或缺字的小方塊。 改用內文字型後中文與標點一致由 Noto 渲染，乾淨。像素字型仍保留給 步驟編號圓圈與常見問題的 +／− 記號（純數字與符號，像素風正好）。 */ font-family: var(--font-body); font-weight: 900; line-height: 1.5; color: var(--text-primary); } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ---- layout shell ---- */ .section-inner, .hero-inner, .footer-cta, .footer-info { max-width: 880px; margin: 0 auto; padding: 0 20px; } main > section { padding: 56px 0; border-bottom: 2px solid var(--border); } main > section:nth-of-type(odd) { background: var(--paper-raised); } /* ---- 深色主題切換按鈕 ---- */ .theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 20; width: 44px; height: 44px; border: 2px solid var(--border); background: var(--paper-raised); color: var(--text-primary); font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: 2px 2px 0 var(--wk-btn-shadow); } .theme-toggle:hover { filter: brightness(1.06); } .theme-toggle:active { transform: translate(2px, 2px); box-shadow: none; } /* ---- 主按鈕：綠進底、乳白字、厚框硬影，跟遊戲內確認按鈕同一語彙 （box-shadow 位移＋按下時位移歸零的做法對照 apps/web/src/styles/global.css 的 .btn / .btn-positive） ---- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.9em 2.2em; border: 3px solid var(--border); background: var(--post-green); color: var(--text-on-accent); font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--wk-btn-shadow); transition: transform 0.08s steps(2, end), box-shadow 0.08s steps(2, end), filter 0.08s linear; } .btn-primary:hover { filter: brightness(1.06); } .btn-primary:active { transform: translate(4px, 4px); box-shadow: none; } /* ---- Hero ---- */ .hero { padding: 88px 0 64px; text-align: center; background: var(--paper); } .hero h1 { margin: 0 0 16px; font-size: 1.75rem; color: var(--taxi-yellow); } /* Hero 主打句：版本一（PAS）的情感鉤子──讀者當主詞的一句話， 比副標大、比標題輕，是全頁第一個要被讀進去的句子。 */ .hero-lead { max-width: 620px; margin: 0 auto 20px; font-family: var(--font-body); font-size: 1.35rem; font-weight: 700; line-height: 1.6; color: var(--text-primary); } .hero-sub { max-width: 620px; margin: 0 auto 32px; color: var(--text-secondary); font-size: 1.05rem; } .hero-note { margin: 16px 0 0; color: var(--text-muted); font-size: 0.9rem; } /* ---- 遊戲介紹 / 段落文字 ---- */ #intro h2, #how-to-play h2, #why-taiwan h2, #screenshots h2, #faq h2 { font-size: 1.3rem; margin: 0 0 28px; padding-bottom: 12px; border-bottom: 2px solid var(--border); } #intro p { color: var(--text-secondary); } /* ---- 玩法簡介：有序清單 ---- */ .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 20px; } .steps li { counter-increment: step; position: relative; padding: 18px 20px 18px 64px; background: var(--paper); border: 2px solid var(--border); box-shadow: var(--shadow-soft); color: var(--text-secondary); } .steps li::before { content: counter(step); position: absolute; left: 16px; top: 18px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--border); background: var(--wk-gold); color: var(--ink); font-family: var(--font-mono); font-size: 0.85rem; } .steps strong { color: var(--text-primary); } /* ---- 差異化三欄 ---- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature { background: var(--paper); border: 2px solid var(--border); box-shadow: var(--shadow-soft); padding: 20px; } .feature h3 { margin: 0 0 12px; font-size: 1rem; color: var(--temple-red); } .feature p { margin: 0; color: var(--text-secondary); } .feature p + p { margin-top: 12px; } .feature .note { font-size: 0.85rem; color: var(--text-muted); } /* ---- 遊戲畫面 ---- */ .screenshot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .screenshot { margin: 0; border: 2px solid var(--border); background: var(--paper-sunken); box-shadow: var(--shadow-soft); overflow: hidden; } .screenshot img { width: 100%; } /* ---- 常見問題 ---- */ .faq-list { display: grid; gap: 12px; } .faq-item { border: 2px solid var(--border); background: var(--paper); } .faq-item summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; position: relative; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 20px; top: 14px; font-family: var(--font-mono); color: var(--taxi-yellow); } .faq-item[open] summary::after { content: '−'; } .faq-item p { margin: 0; padding: 0 20px 20px; color: var(--text-secondary); } /* ---- 頁尾 ---- */ .site-footer { padding: 56px 0 32px; background: var(--wk-wood); color: var(--text-on-accent); } .footer-cta { text-align: center; padding-bottom: 40px; } .footer-cta .hero-note { color: var(--text-on-accent); opacity: 0.85; } .waitlist-form { max-width: 420px; margin: 28px auto 0; text-align: left; } .waitlist-form label { display: block; margin-bottom: 8px; font-weight: 700; } .waitlist-form-row { display: flex; gap: 10px; flex-wrap: wrap; } .waitlist-form input[type='email'] { flex: 1 1 220px; padding: 0.7em 0.9em; border: 2px solid var(--border); background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; } .waitlist-form button { padding: 0.7em 1.4em; border: 2px solid var(--border); background: var(--wk-gold); color: var(--ink); font-family: var(--font-body); font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0 var(--wk-btn-shadow); transition: transform 0.08s steps(2, end), box-shadow 0.08s steps(2, end), filter 0.08s linear; } .waitlist-form button:hover { filter: brightness(1.06); } .waitlist-form button:active { transform: translate(2px, 2px); box-shadow: none; } /* 送出成功訊息：預設隱藏，只有在網址錨點命中 #form-success 時顯示 （表單服務把訪客導回 …/#form-success 後才會出現，見 index.html 表單 上方的說明註解），不需要 JavaScript。 */ .form-success { display: none; max-width: 420px; margin: 20px auto 0; padding: 12px 16px; border: 2px solid var(--border); background: var(--post-green); color: var(--text-on-accent); font-weight: 700; } .form-success:target { display: block; } .form-fallback { max-width: 420px; margin: 16px auto 0; font-size: 0.85rem; opacity: 0.85; } .form-fallback a { color: var(--text-on-accent); text-decoration: underline; } .footer-info { text-align: center; font-size: 0.85rem; opacity: 0.8; border-top: 2px solid rgba(246, 233, 198, 0.3); padding-top: 20px; } .footer-info p { margin: 4px 0; } .footer-info a { color: var(--text-on-accent); } /* ---- 響應式：行動優先，桌面在 720px 以上才展開多欄 ---- */ @media (max-width: 719px) { .hero { padding: 72px 0 48px; } .hero h1 { font-size: 1.4rem; } .hero-lead { font-size: 1.15rem; } .feature-grid { grid-template-columns: 1fr; } .screenshot-grid { grid-template-columns: 1fr; } .waitlist-form-row { flex-direction: column; } .waitlist-form button { width: 100%; } }