/** * site-theme.css * ------------------------------------------------------------------ * TeddyTechLab 官網共用設計系統。 * * 用法：每個 App 的 landing page 在裡先引用這個檔案，再用一小段 * 自己的 * * 版面結構、字體、間距、按鈕形狀、各區塊排版全部統一寫在這裡； * 之後要調整「全站共用的樣子」（例如改字級、改按鈕圓角），只需要 * 改這一個檔案，所有頁面會一起更新。只有「品牌色」允許每個 App 各自 * 決定，靠 --accent / --on-accent 這兩個變數做區隔。 * * 顏色變數命名的取捨（--accent / --on-accent 成對出現）： * 每個品牌用「飽和主色 + 同色系深色文字」這一組搭配（例如 Amália 的 * 黃底＋深棕字），而不是「主色 + 白字」，因為淺色/亮色系的主色（黃、 * 薄荷綠等）用白字對比度普遍不夠。之後新增 App 時，選色請照這個 * 「淺色主色 + 同色系深色」的模式，不要只選一個顏色就直接套用白字。 * ------------------------------------------------------------------ */ :root { --text-main: #1d1d1f; --text-sub: #6e6e73; --bg-main: #ffffff; --bg-soft: #f5f5f7; /* Fallback 顏色（未被頁面覆寫時使用），每個頁面應該覆寫這兩個變數。 */ --accent: #0071e3; --on-accent: #ffffff; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: var(--text-main); background: var(--bg-main); line-height: 1.6; } section { padding: 96px 24px; text-align: center; } .container { max-width: 980px; margin: 0 auto; } h1 { font-size: 56px; font-weight: 600; letter-spacing: -0.02em; } h2 { font-size: 40px; font-weight: 600; margin-bottom: 16px; } h3 { font-size: 21px; font-weight: 600; margin-bottom: 12px; } p { font-size: 19px; color: var(--text-sub); max-width: 720px; margin: 0 auto; } .hero p { margin-top: 24px; } /* CTA：統一用實心膠囊按鈕（品牌色底 + 對應深/淺文字色），不再用純色文字連結——文字連結在淺色/亮色主色下對比度容易不夠。 */ .cta { margin-top: 32px; display: inline-block; font-size: 17px; font-weight: 600; color: var(--on-accent); background: var(--accent); text-decoration: none; padding: 12px 28px; border-radius: 999px; transition: filter 0.15s ease; } .cta:hover { filter: brightness(0.95); } .features { background: var(--bg-soft); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px; margin-top: 64px; } .feature p { font-size: 17px; } /* App Header */ .app-header { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; } .app-icon { width: 64px; height: 64px; border-radius: 22%; } /* Requirement note（硬體需求／系統需求說明，非所有頁面都會用到） */ .requirement-note { margin-top: 20px; font-size: 14px; color: #9a9aa0; } /* Transparency Section（非所有頁面都會用到，例如純第三方 App 就不需要） */ .transparency { background: var(--bg-main); padding: 64px 24px; } .transparency .container { max-width: 720px; } .transparency p { font-size: 15px; line-height: 1.7; } .transparency p + p { margin-top: 16px; } /* Support Section */ .support { background: var(--bg-soft); padding: 20px 12px; text-align: center; } .support p { font-size: 15px; color: var(--text-sub); margin-bottom: 2px; } .support-note { font-size: 12px; color: #9a9aa0; } .support a { color: var(--on-accent); background: var(--accent); text-decoration: none; font-weight: 600; padding: 1px 8px; border-radius: 999px; } footer { background: var(--bg-soft); padding: 8px 12px; text-align: center; font-size: 12px; color: var(--text-sub); } @media (max-width: 600px) { h1 { font-size: 40px; } h2 { font-size: 32px; } }