/* Checker for Gmail™ www — 手寫精簡 CSS,零第三方依賴(plan-02 §3) * 主題:CSS 變數 + (header.html 首屏腳本設定) */ :root { /* Gmail 品牌色 */ --gm-red: #EA4335; --gm-red-hover: #D93025; --gm-red-active: #C5221F; --gm-gray: #5F6368; /* 淺色主題 */ --bg: #FFFFFF; --bg-soft: #F8F9FA; --text: #202124; --text-muted: #5F6368; --border: #DADCE0; --card-bg: #FFFFFF; --shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* 說明圖示 token(--dg-*)。圖是 inline SVG,顏色只能走這裡:外部 .svg 檔吃不到主題, * 硬編色值在深色主題會壞。對比度全部實算過(WCAG 1.4.3 文字 >=4.5:1、1.4.11 線與 * 邊界 >=3:1),且線色是對「它經過的每一個底色」算,不是只對頁面底色。 * 淺色實測:文字最低 5.44:1(--dg-text-muted on --dg-external)、線最低 3.31:1 * (--dg-stroke on --dg-external)。 */ --dg-device: #EEF4FF; /* 信任區:你的裝置 */ --dg-safex: #FEF7E0; /* 信任區:SafeX */ --dg-external: #F1F3F4; /* 信任區:外部服務 */ --dg-mail: #1A73E8; /* 郵件資料(粗實線) */ --dg-oauth: #9334E6; /* OAuth 認證值(細實線) */ --dg-cred: #C05600; /* 郵件帳號憑據(單點劃線) */ --dg-local: #137333; /* 本機加密儲存(虛線) */ --dg-optional: #5F6368; /* 可選路徑(點線) */ --dg-flow: #1967D2; /* native-mail 流程箭頭 */ --dg-box: #FFFFFF; /* 組件框與說明卡底 */ --dg-stroke: #80868B; /* 框線 */ --dg-text: #202124; --dg-text-muted: #5F6368; } [data-theme="dark"] { --bg: #202124; --bg-soft: #292A2D; --text: #E8EAED; --text-muted: #9AA0A6; --border: #3C4043; --card-bg: #292A2D; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* 深色主題不得沿用淺色值:淺色面上剛好的線色在深色面上會糊掉。 * 深色實測:文字最低 6.91:1、線最低 4.74:1(兩者都在 --dg-safex 上)。 */ --dg-device: #26313F; --dg-safex: #3A3324; --dg-external: #2A2C2E; --dg-mail: #8AB4F8; --dg-oauth: #D7AEFB; --dg-cred: #FCAD70; --dg-local: #81C995; --dg-optional: #BDC1C6; --dg-flow: #8AB4F8; --dg-box: #292A2D; --dg-stroke: #9AA0A6; --dg-text: #E8EAED; --dg-text-muted: #BDC1C6; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--gm-red); text-decoration: none; } a:hover { color: var(--gm-red-hover); text-decoration: underline; } .container { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; } /* ── Header ─────────────────────────── */ .site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 10; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; color: var(--text); } .brand:hover { text-decoration: none; color: var(--text); } .brand-logo { display: block; border-radius: 0.35rem; } /* 主導覽:桌面與品牌、動作按鈕同一行。⚠ .site-header 原本是不換行的 flex row,加了三條 * 文字連結後窄屏必溢出(.icon-btn 有 min-width 不會被壓縮),故整條 header 允許換行, * 窄屏規則見檔尾 @media。 */ .header-nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.95rem; } .header-nav a { color: var(--text-muted); white-space: nowrap; } .header-nav a:hover { color: var(--text); } .header-actions { display: flex; gap: 0.5rem; } /* 視覺隱藏但保留給螢幕閱讀器。本站不載入 Bootstrap，不能用 * 它的 .visually-hidden,否則一般頁面會把 landmark 名稱直接顯示出來。⚠ 寫法要避開 * TestDiagramStylesheetGate 的全檔禁用清單:不得用 clip-path / visibility / transform / * opacity,故用經典的 clip: rect(0 0 0 0) 組合。 */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem; background: transparent; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; } .icon-btn:hover { background: var(--bg-soft); color: var(--text); } /* 主題圖標顯隱:淺色顯月亮(可切深),深色顯太陽(可切淺) */ [data-theme="light"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: none; } /* ── Hero ───────────────────────────── */ .hero { text-align: center; padding: 5rem 1.25rem 4rem; background: var(--bg-soft); } .hero-logo { display: block; margin: 0 auto; border-radius: 1.25rem; box-shadow: var(--shadow); } .hero h1 { font-size: 2.4rem; margin: 1.25rem 0 0.75rem; line-height: 1.25; } .hero-sub { max-width: 640px; margin: 0 auto 2rem; color: var(--text-muted); font-size: 1.15rem; } .btn-cta { display: inline-block; padding: 0.85rem 2.25rem; border-radius: 0.5rem; background: var(--gm-red); color: #fff; font-size: 1.05rem; font-weight: 600; box-shadow: var(--shadow); } .btn-cta:hover { background: var(--gm-red-hover); color: #fff; text-decoration: none; } .btn-cta:active { background: var(--gm-red-active); } .hero-version { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.85rem; } /* ── Feature cards ──────────────────── */ .features { padding: 4rem 0; } .features h2, .privacy-promise h2 { text-align: center; font-size: 1.8rem; margin: 0 0 2.5rem; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; } .feature-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; box-shadow: var(--shadow); } .feature-card svg { color: var(--gm-red); margin-bottom: 0.75rem; } .feature-card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; } .feature-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; } /* ── Privacy promise ────────────────── */ .privacy-promise { padding: 4rem 0; background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .privacy-promise ul { max-width: 680px; margin: 0 auto 1.5rem; padding: 0; list-style: none; } .privacy-promise li { position: relative; padding: 0.5rem 0 0.5rem 2rem; font-size: 1.05rem; } .privacy-promise li::before { content: ""; position: absolute; left: 0; top: 0.9rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--gm-red); } .privacy-promise .more-link { text-align: center; } /* ── Local mail component ──────────── */ .install-page { padding: 3.5rem 0 4rem; } .install-layout { max-width: 760px; } .install-intro { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 2rem; } .install-logo { flex: 0 0 auto; border-radius: 1rem; box-shadow: var(--shadow); } .install-kicker { margin: 0; color: var(--gm-red); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .install-intro h1 { margin: 0.15rem 0 0.6rem; font-size: 2rem; line-height: 1.25; } .install-intro p:last-child { margin: 0; color: var(--text-muted); } .install-download, .install-unavailable, .install-steps, .install-boundary { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card-bg); box-shadow: var(--shadow); } .install-download { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .install-download h2, .install-unavailable h2, .install-steps h2, .install-boundary h2 { margin: 0 0 0.4rem; font-size: 1.25rem; } .install-download p, .install-unavailable p, .install-boundary p { margin: 0; color: var(--text-muted); } .install-unavailable { border-left: 4px solid var(--gm-red); } .install-checksum { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.85rem; } .install-checksum code { display: block; margin-top: 0.5rem; overflow-wrap: anywhere; } .install-steps ol { margin: 1rem 0 0; padding-left: 1.4rem; } .install-steps li { margin-bottom: 0.75rem; } .install-steps li:last-child { margin-bottom: 0; } .install-boundary { background: var(--bg-soft); } .install-boundary p + p { margin-top: 0.75rem; } /* ── Legal pages(privacy / terms)───── */ .legal-page { max-width: 760px; margin: 0 auto; padding: 3rem 1.25rem; } /* ── 更新記錄 ───────────────────── * 版本號本身是首頁進來的入口，所以段標題要一眼看得出「哪一天、哪幾個版本」。 * 同一天多個版本以 · 串在日期右側，字級小於日期：日期是主鍵，版本是附註。 */ .changelog-entry { margin-bottom: 2rem; } .changelog-entry h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; } .changelog-versions { color: var(--text-muted); font-size: 0.875rem; font-weight: 400; } .changelog-empty { color: var(--text-muted); } .legal-page h1 { font-size: 2rem; margin-bottom: 0.25rem; } .legal-page .last-updated { color: var(--text-muted); margin-bottom: 2rem; } .legal-page h2 { font-size: 1.35rem; margin-top: 2.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; } .legal-page h3 { font-size: 1.1rem; margin-top: 1.5rem; } .legal-page li { margin-bottom: 0.4rem; } .legal-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 0.75rem; } .legal-table-wrap:focus-visible { outline: 3px solid var(--gm-red); outline-offset: 2px; } .legal-table { width: 100%; min-width: 680px; border-collapse: collapse; } .legal-table th, .legal-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .legal-table thead th { background: var(--bg-soft); } .legal-table tbody tr:last-child > * { border-bottom: 0; } /* ── System message pages ──────────── */ .sys-message { min-height: 52vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.25rem; } .sys-message-card { width: min(100%, 28rem); text-align: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: var(--shadow); padding: 2rem; } .sys-message-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; color: #fff; font-size: 2rem; font-weight: 700; } .sys-message-ok { background: #188038; } .sys-message-error { background: var(--gm-red); } .sys-message-card h1 { margin: 1rem 0 0.5rem; font-size: 1.5rem; } .sys-message-card p { color: var(--text-muted); margin: 0 0 1.5rem; } /* ── Footer ─────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 2rem 0; text-align: center; color: var(--text-muted); font-size: 0.9rem; } .site-footer a { color: var(--text-muted); } .site-footer a:hover { color: var(--text); } .trademark-note { font-size: 0.8rem; } .footer-nav { display: flex; justify-content: center; gap: 1.5rem; margin-top: 0.75rem; } /* ── 說明圖示 ───────────────────────── */ /* 純靜態 inline SVG,零 JS。 * ⚠ viewBox 寬度必須等於 min-width(720),也就是 .legal-page 的實際內容欄寬(760 - 2×1.25rem)。 * 兩者一旦不等,SVG 就會被等比縮放,圖上的 12 號字會渲染成七八 px——那正好毀掉「加圖是為了 * 降低閱讀難度」這件事本身。改圖時要嘛維持 720 寬,要嘛連同這裡的 min-width 一起改。 * 窄屏沒有 pan/zoom 兜底,故靠 overflow-x 橫捲;滾動容器必須鍵盤可達(figure 帶 * tabindex="0"),否則只能用滑鼠捲。 */ .diagram { width: 100%; overflow-x: auto; margin: 1.5rem 0; } .diagram:focus-visible { outline: 2px solid var(--gm-red); outline-offset: 2px; } .diagram svg { display: block; width: 100%; min-width: 720px; height: auto; } .diagram figcaption { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.875rem; } /* 首頁圖是 920 寬(=.container 的實際內容欄寬 960 - 2×1.25rem),與上面那條 720 是同一個 * 「viewBox 寬 = 欄寬」不變量的另一個實例。⚠ 選擇器不得用 .container .diagram: * /native-mail 同樣在 .container 內,但它的 .install-layout 內容寬正好是 720,廣域選擇器 * 會把那張圖撐壞。故限定在首頁專屬的 .privacy-promise 內。 */ .privacy-promise .diagram svg { min-width: 920px; } /* `/security` 帶兩張圖:整欄放寬到 960(內容欄 920)供圖使用,**正文區塊各自收窄回 720** * 並置中——法務/說明文字的行長不該跟著圖一起變長。 * ⚠ 不用負邊距或 transform 做「出血」:兩者都能把內容推出視口,`html_dom_test` 的可見性門 * (`htNonNegativeCSSProps` / `transform` 全檔禁用)會擋下,而且擋得對。這裡每個值都是正的、 * 可直接判讀,窄屏由 max-width 自然退讓,圖再由 `.diagram` 自己的 overflow-x 橫捲。 * 選擇器用頁面層修飾類而非 `.legal-page .diagram`:/privacy 與 /terms 同樣是 `.legal-page`, * 廣域選擇器會把那兩個純文字頁也撐開,對它們只有壞處。 */ .legal-page--wide-diagram { max-width: 960px; } .legal-page--wide-diagram > *, .legal-page--wide-diagram section > * { max-width: 720px; margin-left: auto; margin-right: auto; } .legal-page--wide-diagram section { max-width: 920px; } .legal-page--wide-diagram .diagram { max-width: 920px; } .legal-page--wide-diagram .diagram svg { min-width: 920px; } .diagram-brief { margin-top: 0.75rem; } /* ── Responsive ─────────────────────── */ @media (max-width: 600px) { /* 窄屏 header 至少兩行:第一行品牌 ＋ 兩顆按鈕(靠右),第二行整條導覽。 * ⚠ 只給 nav 一個 flex-basis:100% 是不夠的——桌面 DOM 順序是 brand → nav → actions, * 那樣 nav 會夾在中間;要用 order 把它排到最後。導覽自己再 wrap,中文或極窄屏可能 * 變三行,這是接受的(不把「恰好兩行」寫成驗收條件)。 */ .header-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 1rem; } .hero h1 { font-size: 1.75rem; } .hero { padding: 3rem 1rem 2.5rem; } .install-intro { display: block; } .install-logo { margin-bottom: 1rem; } .install-download { align-items: stretch; flex-direction: column; } .install-download .btn-cta { text-align: center; } .footer-nav { flex-wrap: wrap; } }