/** * ============================================================================ * 聯絡我們頁面 — 獨立手寫 CSS 檔（非 Sass 編譯產物） * ============================================================================ * * 本檔為手寫維護，不進 Sass 樹（不在 assets/front/sass/ 底下管理， * 不會被任何 Sass 編譯流程處理、也不會被編譯覆蓋）。 * 請勿把本檔內容搬進 style.sass，也不要嘗試「編譯」本檔。 * 修改請直接改本檔，儲存即生效。 * * 掛載方式：由 application/views/front/_link.php 以純標籤載入， * 排在 assets/front/css/style.css 之後。 * * 背景：assets/front/css/style.css 為 Sass 編譯產物，本機查無建置設定 * （無 package.json、無 gulpfile、無 CI），無法重現編譯流程， * 故聯絡我們頁面的樣式改走此獨立手寫檔，完全不動 style.css 與 style.sass。 * * 硬性規則（本檔驗收條件，後續所有修改都必須遵守）： * - 本檔所有色值一律使用 var(--token) 語法，不可寫死字面色碼。 * - 禁止出現任何井字號開頭的字面色值（hex color literal）。 * - 驗收方式：對本檔做文字色碼掃描，命中數必須為 0。 * * ============================================================================ */ /* ---------------------------------------------------------------------- * 聯絡我們頁面樣式 —— 第 4a 格：桌機基準值（無 @media，RWD 覆寫留給 4b） * 依據：DESIGN-SPEC-contact-us-v2.md §1（線框）/§2（槽位表）/§3（Token 對應） * /§5（a11y）、DESIGN.md §0.3+§2（按鈕元件）；2026-10-01 併頁： * docs/active/SPEC_2026-10-01_contact-onepage-info.md §2.3、§9 * 全部規則 scope 在 [data-page="contact-us"] 底下，只影響本頁，不動其他 23 頁。 * 焦點環：全站已有連結／按鈕的藍色 focus-visible 外框規則（3px 實線、 * !important，style.css 逐字確認存在）。本檔不重複也不覆寫。 * 規格硬性規則 6（本頁禁止 outline:0/none）目前有一個登記的例外，只限本頁 * 送出鈕：.btn-lg:focus:not(:focus-visible) 的 outline:0，壓掉 Bootstrap 4.4.1 * reboot 在滑鼠點擊時畫的預設焦點框；鍵盤焦點仍走全站 button:focus-visible * 雙層環。依據：DESIGN.md §3.1「禁止 outline:none 而不補等效可見焦點」與 * 2026-10-02 Dispatcher 裁決。舊例外（S4 照片卡深色區白環覆寫）已隨 S4 * 於 2026-10-01 刪除；S2（.contact-primary）淡灰底沿用 * 全站藍環（5.92:1）。表單欄位（input／textarea）不在全站規則射程內， * DESIGN.md §3.1 雙層環寫在 .contact-grievance__control:focus（第 2b 張）。 * ---------------------------------------------------------------------- */ /* ============================================================ * 元件：按鈕系統 btn-lg（本頁唯一一顆：意見回饋表單送出鈕） * 依據：DESIGN.md §0.3（尺寸修正）＋ §2.1–2.4（變體清單/狀態矩陣/RWD/a11y）； * feedback SPEC §7.4（送出鈕）、§10.2（送出中）、I6（一頁只有一顆 btn-lg） * * 和先前的 btn-md 一樣是 page-scoped 先行實作：style.css 沒有這個 class * （DESIGN.md Pass B 新訂的元件系統，本頁是第一個採用者）。若其他頁面也要用， * 建議另案提升到全站共用檔（比照 tokens.css 的獨立掛載模式），避免逐頁重寫漂移。 * * 2026-10-01 併頁第 2b 張刪除 btn-md：唯一使用者 S4 照片卡回饋鈕已隨 S4 刪除， * contact.php 零引用，上半頁規格也沒有用到（日後要用從 git 歷史取回）。 * * 焦點環沿用 style.css 全站 button:focus-visible 雙層環，本檔不重寫。滑鼠點擊不顯示 * 焦點框：見 :active 規則下方的 :focus:not(:focus-visible)（規則 6 的登記例外，見檔頭）。 * RWD（≤1199 內距與最小寬、≤575 滿寬）見檔尾 4b 格。 * 送出中（loading）：狀態掛在 aria-busy="true"，JS 只切屬性（同時設 * aria-disabled="true"）、不寫樣式。底色維持 default（不變灰；hover 不變深、 * active 不位移）；文字不變；文字右側 1em 轉圈（::after，currentColor 外框缺 * 一段，內容為空，不會被念出）；只在 prefers-reduced-motion: no-preference 時旋轉； * reduce 時不轉，改成淡色整圈＋一段實色弧的靜止外觀（見轉圈規則下方，第 2c 張）。 * 寬度靠 min-width 鎖住：轉圈＋間距約 19px，遠小於 min-width 扣掉左右內距的 * 剩餘寬，按鈕寬度不變（feedback SPEC A11）。 * ============================================================ */ [data-page="contact-us"] .btn-lg { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); /* 文字 ↔ 轉圈，DESIGN.md L242「space-1(5px)＝圖示與文字間隙」 */ box-sizing: border-box; min-width: 270px; /* DESIGN.md §0.3 元件尺寸（≥1200），非 space-N token；≤1199 見 4b */ min-height: 65px; /* DESIGN.md §0.3：13×5，元件尺寸，非 space-N token */ padding: var(--space-4) var(--space-6); border: none; border-radius: var(--radius-md); background-color: var(--color-surface-brand); color: var(--color-text-inverse); font-size: var(--type-caption); font-weight: var(--weight-bold); letter-spacing: 0.05em; /* type-caption 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.5; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-fade), color var(--duration-fast) var(--ease-fade); /* 逐項列舉，不得用 all（DESIGN.md §4.4） */ } @media (hover: hover) { [data-page="contact-us"] .btn-lg:not([aria-busy="true"]):hover { background-color: var(--color-brand-deep); box-shadow: var(--shadow-1); transition: background-color var(--duration-fast) var(--ease-fade), box-shadow var(--duration-base) var(--ease-standard); } } [data-page="contact-us"] .btn-lg:not([aria-busy="true"]):active { transform: translateY(1px); /* DESIGN.md §2.2 active 狀態；位移量非間距 token */ } /* 滑鼠點擊不顯示焦點框：Bootstrap 4.4.1 reboot 的 button:focus 會在滑鼠點擊時畫出瀏覽器預設 outline。只壓有焦點但不是 focus-visible 的情況（Bootstrap 5 reboot 同寫法）；鍵盤焦點不符合本選擇器，全站雙層環照舊。不支援 :focus-visible 的瀏覽器整條規則失效，退回原本的框。這是規則 6 唯一登記的例外，見檔頭焦點環段。 */ [data-page="contact-us"] .btn-lg:focus:not(:focus-visible) { outline: 0; } [data-page="contact-us"] .btn-lg[aria-busy="true"]::after { content: ""; flex-shrink: 0; box-sizing: border-box; width: 1em; height: 1em; border: 2px solid currentColor; /* 轉圈線寬，非間距 token */ border-right-color: transparent; border-radius: 50%; } @media (prefers-reduced-motion: no-preference) { [data-page="contact-us"] .btn-lg[aria-busy="true"]::after { animation: contact-us-btn-spin 800ms linear infinite; /* feedback SPEC §10.2 轉速範圍 600–1000ms */ } } /* 減少動態（第 2c 張）：不旋轉時，缺一段的圈靜止下會被讀成字母 C，改成淡色整圈＋頂端一段實色弧。軌道用 color-border-on-image（tokens.css 唯一的半透明白，疊在品牌藍底上是淡藍），弧用 currentColor（text-inverse 白）。no-preference 的外觀與旋轉動畫不變。 */ @media (prefers-reduced-motion: reduce) { [data-page="contact-us"] .btn-lg[aria-busy="true"]::after { border-color: var(--color-border-on-image); border-top-color: currentColor; } } @keyframes contact-us-btn-spin { to { transform: rotate(360deg); } } /* ============================================================ * 元件：Iconify icon（裝飾性圖示；S2 地址／外連） * 依據：uiux 規格方向 A §1.1–1.6、陷阱 1/2；DESIGN.md L242 * （space-1(5px)＝圖示與文字間隙，全站唯一權威條文） * * 顏色刻意不寫：iconify-icon 為 currentColor（lucide SVG 逐字 * stroke="currentColor"），一律繼承所在元素 color，不得單獨指定， * 否則 hover 時底色轉藍、文字轉白，icon 卻留在藍色變成藍底藍字 * （規格 §1.4 明文最容易踩的錯）。 * * 原則不掛 class（陷阱 1：本站 icomoon 樣式掛在 * [class^="icon-"] / [class*=" icon-"] 屬性選擇器上，任何 icon / * icon- 開頭 class 都會被其 !important 命中），本節多數規則仍全用 * 元素選擇器與既有 BEM class 的後代選擇器 hook 樣式，不另外新增 * class 給 icon 本身。 * * 2026-09-15 例外：S2 電話／信箱／Facebook 前綴類型圖示改掛 * .contact-primary__mailto-lead（見下方該規則）。原因：只靠前綴圖示 * 的連結裡它同時是 :first-child 與 :last-child，兩條結構選擇器規則 * 會互相命中、勝負落在宣告順序而非特異度，不夠穩定；改用 class 判準 * 才能明確區分前綴與 Facebook 尾端的 external-link 後綴。此例外不 * 違反陷阱 1 的射程——該慣例只禁止 icon／icon- 開頭的 class， * 本 class 開頭是 c，不會被上述 icomoon 屬性選擇器命中。 * * 尺寸算法：font-size:1.15em 相對父層 --type-caption(14px) 算出 * 16.1px 作為 icon 自身 font-size；width/height:1em 相對 icon 自身 * 已算出的 font-size（16.1px）取值，兩者因此恆等（CLS 佔位「與該處 * font-size 同值」），不是重複疊乘 1.15。 * ============================================================ */ [data-page="contact-us"] iconify-icon { display: inline-block; width: 1em; height: 1em; font-size: 1.15em; /* 繼承 --type-caption(14px) → 16.1px，補回 lucide 24×24 viewBox 實佔約 83% 與中文字的光學差 */ vertical-align: -0.125em; /* iconify-icon 官方預設，對齊中文字視覺中線 */ } /* A1–A3：dt 標籤內 icon（文字前）。陷阱 2——不得改 .contact-primary__label 的 display，icon 留在既有 inline 流內，用 margin-inline-end 做間距，外層 grid 的 baseline 對齊因此不變 */ [data-page="contact-us"] .contact-primary__label iconify-icon { margin-inline-end: var(--space-1); } /* ============================================================ * Hero CONTACT 浮水印隱藏（P3-4） * 依據：uiux 定案規格（方向 A sea-scene）§2.2。h2.main-title 本已 * aria-hidden="true"，隱藏零語義損失；用 visibility:hidden 保留 * 版面盒（非 display:none），hero 高度與左欄垂直節奏維持 byte-level * 不變。只 scope 本頁，其餘 32 頁浮水印原樣保留，非全站規格變更。 * ============================================================ */ [data-page="contact-us"] .main-header .main-title { visibility: hidden; } /* ============================================================ * Hero → 第一區塊距離（SPEC 2026-10-01 contact-onepage-info §2.3、§10-6） * 規格要灰帶 margin-top 歸零、距離交給 .news-container 的上內距，但 * style.css 的 .news-container 只有左右內距；style.css 的 * [data-page=contact] .main-header 下距也套不到本頁（body 是 * data-page="contact-us"）→ 歸零後距離為 0，低於規格範圍 * （≥992 space-8～space-10、≤991 space-7～space-9）。依規格「超出範圍 * 時用 token 補到範圍內」，比照其他內頁由 .main-header 的 margin-bottom * 承擔，取範圍下限（其他內頁桌機約 47～100px、≤1199 多為 50px）。 * ≤991 見檔尾 @media。 * ============================================================ */ [data-page="contact-us"] .main-header { margin-bottom: var(--space-8); } /* ============================================================ * 區塊標題 h2（SPEC 2026-10-01 contact-onepage-info §2.3：下半頁沿用的契約） * 上下兩半共用本 class、同一組計算值（§10-4 比對 font-size／font-weight／ * line-height／color／letter-spacing）。本 class 不帶外距：h2 → 區塊第一個 * 內容（≥576 space-6／≤575 space-5）由所在容器提供，.contact-primary 由 * grid row-gap 提供（見下方該規則）。grid-column 讓 h2 在 grid 容器內跨 * 所有欄；不在 grid 容器內時無作用。 * ============================================================ */ [data-page="contact-us"] .contact-section__title { grid-column: 1 / -1; margin: 0; color: var(--color-text-strong); font-size: var(--type-h2); font-weight: var(--weight-bold); line-height: 1.2; letter-spacing: 0; } /* ============================================================ * S2 主聯絡區塊 * 依據：uiux info-left-map-right（2026-09-11） * 桌機 ≥992：左資訊／右地圖，欄寬 1fr 1fr；≤1199 gap 降 space-6、 * ≤991 單欄（上資訊下地圖，DOM 原序、不用 order）。 * 新原始值僅地圖 aspect-ratio 4/3。 * 2026-10-01（SPEC contact-onepage-info §2.3、§9.2）：第一個子元素是跨兩欄 * 的 h2，row-gap 因此也是「h2 → 內容」的距離。≥992 只有這一道列間距， * 由 space-7 改為規格的 space-6；≤991／≤575 既有的 row-gap（space-6／ * space-5）恰好等於規格值，資訊 ↔ 地圖的距離不變。margin-top 歸零 * （hero 距離改由 .main-header 承擔，見上），margin-bottom 維持 * space-10／≤991 space-9。 * 滿版灰帶：負 margin 與 padding 等量抵消，內容左緣仍對齊容器內容左緣。 * 2026-10-01 併頁第 3 張修 320 橫向溢出：≤1199 時 .news-container 的實際內距是 5.2083vw、沒有下限， * --container-page 是 max(5.2083vw, 20px)，視口小於 384px 時灰帶會多伸出視口（320 寬多 3.33px）。 * 改成兩者取小：calc(50% - 50vw) 等於負的容器實際內距（50% 是容器內容寬；沒有傳統捲軸時剛好相等）。 * 384px 以上 token 不大於實際內距，計算值與原本相同。不動全站 .news-container。 * ============================================================ */ [data-page="contact-us"] .contact-primary { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-7); row-gap: var(--space-6); align-items: stretch; margin-block: 0 var(--space-10); } /* 滿版灰帶（本頁兩條共用：上半頁 .contact-primary、意見回饋表單區塊 .contact-grievance__form-block）。 2026-10-05 1A（SPEC_2026-10-05_contact-form-band-figure-up.md §1.1）把表單區塊也做成灰帶：滿版寫法、底色、上下內距（≤991、≤575 見檔尾 4b，也是兩條共用）只寫這一份，改一條就是兩條一起改，不會漂移。滿版算式的來由見上方 S2 註解；≥1440 的覆寫見下一條。50% 是包含塊的內容寬，兩條灰帶的包含塊都必須是版心全寬（.news-container 的內容盒）算式才成立，所以表單區塊不能被 .contact-grievance__body 限寬（見該規則）。 2026-10-07 流程圖與表單交換：表單區塊搬進 .contact-grievance__overview 之後改成白底卡片所在的區塊，不再是灰帶；灰帶改掛在流程圖外面新包的 .contact-grievance__figure-block（body 最後一個子元素），選擇器與下面 ≥1440／ ≤991／≤575 三條覆寫一併改成 .contact-grievance__figure-block，算式、底色、內距全部沿用不變。 */ [data-page="contact-us"] .contact-primary, [data-page="contact-us"] .contact-grievance__figure-block { margin-inline: max(calc(var(--container-page) * -1), calc(50% - 50vw)); padding-block: var(--space-8); padding-inline: min(var(--container-page), calc(50vw - 50%)); background-color: var(--color-surface-subtle); } /* 灰帶在寬於 1920 時也要滿版（2026-10-05，TODO 10；SPEC_2026-10-05_contact-feedback-object-right.md §4.1）。成因：style.css 的 .news-container 在 ≥1440 一律是 12.7604166667vw，沒有 1920 的定值（2560 寬約 327px）； tokens.css 的 --container-page 卻在 ≥1920 定成 245px。上面那條 max() 取到 −245px，2560 寬時灰帶左右各短約 82px。改法：≥1440 往外撐的量直接用 12.7604vw，與 .news-container 邊距同值（就是 tokens.css 裡 --container-page 在 1440–1919 的值），不再經過 --container-page。1440–1919 的計算值與原本完全相同；1920 時 12.7604vw ＝ 244.9997px，與 245px 差不到 0.001px；只有寬於 1920 才會變。 max()／min() 搭 calc(50% - 50vw) 的寫法照舊：有傳統捲軸時 100vw 含捲軸寬，calc(50% - 50vw) 會多伸半條捲軸，兩者取小才不會出現橫向捲軸。margin 與 padding 用同一個量，灰帶內容的左右緣不動。tokens.css 不改（全站 token）。 2026-10-05 1A 起表單灰帶也共用這條（同上一條）。 2026-10-07 流程圖與表單交換：選擇器改成 .contact-grievance__figure-block（同上一條說明）。 */ @media (min-width: 1440px) { [data-page="contact-us"] .contact-primary, [data-page="contact-us"] .contact-grievance__figure-block { margin-inline: max(calc(12.7604vw * -1), calc(50% - 50vw)); padding-inline: min(12.7604vw, calc(50vw - 50%)); } } [data-page="contact-us"] .contact-primary__col { min-width: 0; /* 防止 mailto 長字串／地圖 intrinsic 寬撐破 grid track */ } [data-page="contact-us"] .contact-primary__col--info { display: flex; flex-direction: column; /* 識別組 ↔ 管道清單（SPEC 2026-10-01 §2.4 L3，定案值）：space-5，全斷點。識別組最後一行（通常是次要名）盒底 → dl 盒頂 30px，後面再接第一列的分隔線 1px 與上內距 space-3。 */ gap: var(--space-5); } [data-page="contact-us"] .contact-primary__col--map { display: flex; flex-direction: column; /* 2026-09-15 依用戶指示改靠上對齊，取代 09-14 的垂直置中決定。原本這裡是 justify-content: center，用來解「修 P1-(5)：左欄較高時地圖垂直置中，不再頂端對齊留一大塊空白」的問題；用戶看過真頁後直接指定地圖要靠上，故整段移除。不改寫成 justify-content: flex-start —— flex-direction:column 且未宣告 justify-content 時，預設行為本就是起點對齊，效果相同；且與同層姊妹規則 .contact-primary__col--info（上方，同樣 flex column 頂端對齊）一樣不宣告此屬性，寫法與慣例一致。下一個維護者請勿因為左欄較高留白就把 justify-content: center 修回來——那是本次刻意推翻的舊決定，不是遺漏。 */ } /* 識別組兩行按角色命名（SPEC contact-onepage-info §12.2）：主要名＝本頁語言的公司名，次要名＝另一種語言。誰在上、要不要加 lang，由 contact.php 依頁面語言輸出；本檔兩條規則不分語言。 */ [data-page="contact-us"] .contact-primary__name-main { margin: 0; /* 2026-10-01：原上距是給已刪除的 h3 欄標題；h2 → 內容的距離由 .contact-primary 的 row-gap 提供 */ color: var(--color-text-strong); font-size: var(--type-h4); font-weight: var(--weight-bold); line-height: 1.5; overflow-wrap: anywhere; } [data-page="contact-us"] .contact-primary__name-sub { margin: 0; color: var(--color-text-muted); font-size: var(--type-body); font-weight: var(--weight-regular); letter-spacing: 0.03em; line-height: 1.75; overflow-wrap: anywhere; } [data-page="contact-us"] .contact-primary__name-main + .contact-primary__name-sub { margin-top: 0; /* 主次名同一識別，緊貼行盒 */ } /* 管道清單（方向一 labeled-rows；SPEC 2026-10-01 §4.2、§9.3、§2.4） dl 是兩欄 grid（標籤欄 auto＝最長標籤的內容寬｜值欄），每列 div 用 subgrid 共用同一組欄線，四列的值欄左緣在同一條垂直線上（§10-16）。不支援 subgrid 的瀏覽器會退成標籤疊在值上方（同 ≤575）。列距（§2.4 L2）：每列上下內距 space-3（全斷點，≤575 也不降）＋每列上方 1px 分隔線、最後一列下方再一條；上一列最後一個連結盒底 → 下一列第一個連結盒頂 = 15 + 1 + 15 = 31px，列與列之間沒有 gap。標籤對齊（2026-10-01 Dispatcher 裁決，取代 SPEC §4.2 與 §10-16 的字面寫法）：標籤文字對齊值的第一行文字，兩者文字中線差 ≤1px，值是單行或多行都一樣。文字開頭的列（地址、媒體連繫、意見回饋）用 first baseline：地址換行時標籤仍跟第一行對齊；14px 標籤與 16px 值的中線約差 0.7px，來自兩種字級的字身比例。社群列（--social）例外：第一個連結以平台圖示開頭，連結的 baseline 會取到圖示，所以不用 baseline，改成標籤盒撐到連結盒高、行框在盒內置中（block 的 align-content），標籤中線＝第一個連結中線。 */ [data-page="contact-us"] .contact-primary__list { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); margin: 0; } [data-page="contact-us"] .contact-primary__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: first baseline; padding-block: var(--space-3); border-top: 1px solid var(--color-border-subtle); } [data-page="contact-us"] .contact-primary__row:last-child { border-bottom: 1px solid var(--color-border-subtle); } [data-page="contact-us"] .contact-primary__row--social { align-items: start; } [data-page="contact-us"] .contact-primary__row--social > .contact-primary__label { align-content: center; min-height: 45px; /* 與 .contact-primary__mailto 的 45px 觸控下限同高，非 space-N token */ } /* 社群三連結：直向堆疊，連結盒互相貼齊（§2.4 L1＝0）。li 用 flex，li 高度就是連結盒高，不受行框基線影響；連結寬度沿用 .contact-primary__mailto（≥992 依內容寬、≤991 撐滿欄寬）。 markup 的 role="list"：拿掉清單符號後 Safari 會一併拿掉清單語意。 */ [data-page="contact-us"] .contact-primary__social { margin: 0; padding: 0; list-style: none; } [data-page="contact-us"] .contact-primary__social > li { display: flex; } [data-page="contact-us"] .contact-primary__label { margin: 0; color: var(--color-text-muted); /* 不可點：本區品牌藍只給連結（SPEC contact-onepage-info §12.1） */ font-size: var(--type-caption); font-weight: var(--weight-medium); letter-spacing: 0.05em; line-height: 1.5; } [data-page="contact-us"] .contact-primary__value { margin: 0; color: var(--color-text-strong); font-size: var(--type-body); line-height: 1.75; overflow-wrap: break-word; } [data-page="contact-us"] .contact-primary__mailto { display: inline-flex; align-items: center; flex-wrap: wrap; box-sizing: border-box; min-height: 45px; /* DESIGN.md §0.3：觸控下限，非 space-N */ min-width: 0; max-width: 100%; color: var(--color-brand); font-size: var(--type-body); line-height: 1.75; text-decoration: underline; overflow-wrap: anywhere; transition: color var(--duration-fast) var(--ease-fade); } @media (hover: hover) { [data-page="contact-us"] .contact-primary__mailto:hover { color: var(--color-brand-deep); } } /* 不可斷尾段（地址末段＋外連圖示／信箱網域）。全斷點生效，不進 @media。 */ [data-page="contact-us"] .contact-nowrap { white-space: nowrap; } /* 地址連結：head 文字與不可斷尾段必須落在「同一個 inline formatting context」內。 .contact-primary__mailto 是 inline-flex，直接掛在 anchor 底下的匿名文字與 .contact-nowrap 是兩個 flex item（都被 blockify），結構上永遠不可能共用同一個行盒 —— head 內部折完後尾段整塊掉到下一條 flex line，就是 /en 1440「第 2 行右側挖洞、第 3 行孤字」的成因（/zh 要的綁定行為則是同一機制的正面效果）。這裡把 head + 尾段收進「單一」flex item，item 內部回到正常 inline 流，尾段以 atomic inline（white-space:nowrap）身分參與斷行，因此能接在行尾。不動 .contact-primary__mailto 本體：min-height:45px 觸控下限、align-items:center、 :740 的 ≤991 display:flex/width:100% 全部原樣生效。 */ [data-page="contact-us"] .contact-primary__address-link > .contact-primary__mailto-text { display: block; min-width: 0; } /* 地址連結盒的上下留白（2026-10-02，TODO 第 13 項之 1；SPEC contact-onepage-info §2.4「盒內上下各留 8.5px」）。單行連結的留白來自 .contact-primary__mailto 的 min-height 45px 減掉一行行高、再垂直置中：（45 − 28）／2 = 8.5px。地址一換行，文字區塊（行數 × 行高）就高過 45px，min-height 不再作用、留白變 0，地址列的文字到上下分隔線比其他三列少約 8px。這裡用同一條算式把留白寫成連結盒的上下內距：45px 與 .contact-primary__mailto 的 min-height 同值（觸控下限，DESIGN.md §0.3；兩處要一起改），1lh 是連結自己的行高（type-body × 1.75），不另外寫死 8.5px。單行時 28 + 17 = 45，等於 min-height，盒高與其他連結相同；每多一行只多一個行高。留白在連結盒裡面：列內距（space-3）與 §2.4 的盒距 31px 都不變，其他三列不受影響。不支援 lh 單位的舊瀏覽器（Safari 16.4、Chrome 109、Firefox 120 以前）會略過這條宣告，維持補之前的樣子，不會跑版。 */ [data-page="contact-us"] .contact-primary__address-link { padding-block: calc((45px - 1lh) / 2); } /* 尾段在新結構下是 inline box 而非 flex item。明確關掉緊急斷點，不依賴「white-space:nowrap 會壓過繼承來的 overflow-wrap:anywhere」這個隱含前提 —— Ta|iwan 那一族的斷字風險就在這條路徑上。尾段長度已由 PHP 端上限擋住（/en ≤18 字、/zh ≤12 字），關掉緊急斷點不會在窄斷點造成水平溢出。選擇器帶 .contact-primary__address-link，射程鎖在地址連結一支：其他 .contact-nowrap（例：信箱網域）不得被波及。 */ [data-page="contact-us"] .contact-primary__address-link .contact-nowrap { overflow-wrap: normal; word-break: normal; } /* 行尾圖示的圖文間距（DESIGN.md L242 space-1）：連結的直接子元素 iconify-icon （例：外連 external-link）。特異度維持 (0,2,1)，讓下方前綴圖示 .contact-primary__mailto-lead 規則 (0,3,0) 仍然勝出 —— 這個既有不變式不動。地址連結的圖示在 .contact-primary__mailto-text 內、不是直接子元素，走下一條專用路徑。 2026-10-01：原本在 .contact-primary__facebook 之後有一條逐字相同的規則（同選擇器、同宣告），依 SPEC contact-onepage-info §9.2 刪除、只留本條。兩條都在 lead 規則之前，之間沒有其他規則設這些元素的 margin-inline-start，刪哪一條計算值都相同。目前命中本條的是社群三連結尾端的 external-link 與意見回饋連結尾端的 arrow-down。 */ [data-page="contact-us"] .contact-primary__mailto > iconify-icon { margin-inline-start: var(--space-1); } /* 地址連結專用路徑。兩條分別對應 $addrTail 有值（圖示在 .contact-nowrap 內）與無值（fallback：圖示直接落在 text span 內）兩種 PHP 輸出形狀，缺任一條就會有一種資料形狀掉間距。選擇器含 .contact-primary__address-link，結構上不可能命中 .contact-primary__mailto-lead（lead 永遠是 anchor 直接子元素、不進本 span）。 */ [data-page="contact-us"] .contact-primary__address-link > .contact-primary__mailto-text > iconify-icon, [data-page="contact-us"] .contact-primary__address-link > .contact-primary__mailto-text > .contact-nowrap > iconify-icon { margin-inline-start: var(--space-1); } /* 前綴類型圖示（掛 .contact-primary__mailto-lead，連結內第一個子節點）。與上方行尾圖示規則 .contact-primary__mailto > iconify-icon (0,2,1) 不衝突：本選擇器特異度 (0,3,0) 較高，勝負由特異度決定、不依賴宣告順序。同時有前綴與行尾圖示的連結，兩條規則各自命中一顆。目前的使用者是社群三連結的平台圖示（2026-10-01 併頁第 3 張）。顏色刻意不寫 —— icon 吃 currentColor，單獨指定會在 hover 時與文字脫鉤。 */ [data-page="contact-us"] .contact-primary__mailto > .contact-primary__mailto-lead { flex-shrink: 0; margin-inline-start: 0; margin-inline-end: var(--space-1); } /* 地圖殼：4:3 比例容器，iframe 絕對填滿。不追左欄高度。殼底 surface-base、1px brand 外框畫出邊界，embed 未載入時邊框仍可辨識容器範圍。 */ [data-page="contact-us"] .contact-primary__map { position: relative; width: 100%; max-width: 100%; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); box-sizing: border-box; background-color: var(--color-surface-base); border: 1px solid var(--color-border-brand); } [data-page="contact-us"] .contact-primary__map-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; min-width: 0; border: 0; } /* ============================================================ * 意見回饋區 section（id=feedback；2026-10-01 併頁第 2a 張） * 依據：docs/active/SPEC_2026-10-01_contact-onepage-feedback.md §5（層級樹）、 * §6（間距三層）、§7（版面）；區標題與區塊外距照 * SPEC_2026-10-01_contact-onepage-info.md §2.3。 * 白底（feedback SPEC I4）：第 2b 張的表單欄位框 border-strong 對 surface-subtle * 只有 2.94:1，欄位不得直接放在淡灰帶上。2026-10-05 1A 起表單區塊是滿版灰帶，欄位放在灰帶裡的 * 白卡（.contact-grievance__col--form）上，仍是白底。 * 區塊外距：上半頁灰帶 → 本區的 space-10／≤991 space-9 只由 .contact-primary 的 * margin-bottom 出（info SPEC §2.3「只能由其中一方出」），本區 margin-top 為 0； * 本區是最後一區。2026-10-05 1A 起最後一個元素是表單灰帶，灰帶直接接頁尾、中間不留白， * 本區 padding-bottom 全斷點為 0（SPEC_2026-10-05_contact-form-band-figure-up.md §1.1）。 * h2 → body：row-gap space-6／≤575 space-5，與 .contact-primary 同法。 * scroll-margin-top：style.css 的 header 是 position:relative（高 70px／≤575 45px， * 各斷點都不是 sticky／fixed，捲動後離開視口），sticky 高度計 0， * 依 feedback SPEC §7.4 取 0 + space-4。第 2b 張的表單區塊（id=feedback-form） * 與 .contact-grievance__status 照同一個值。 * 三層間距（§6，括號內為 ≤991 的值）：最鬆 G1↔G2 space-8（space-7）； * 中 h3→步驟 space-4、步驟→結語 space-6（space-5）、結語→流程圖 space-5（單欄時）、 * 步驟之間 space-5（2026-10-02 起改軌道，§7.3.1）；最緊導言段落之間 space-4、h4→內文 space-2。 * 三B 內文兩段之間 space-3（§7.3.1 C2）。 * 2026-10-05 object-right（SPEC_2026-10-05_contact-feedback-object-right.md §2.1、§2.4）：流程圖移到 * 結語之後，h3→步驟沿用原本 h3→流程圖的 space-4，結語→流程圖沿用原本流程圖→步驟的 space-5； * ≥1200 兩欄的放法、間距與黏住見「意見回饋區兩欄 object-right」段（表單區之後、4b 格之前）。 * 比例檢查：最鬆／中層最大值 ≥992 為 80/40=2.0，≤991 為 50/30=1.67，皆 ≥1.6； * 步驟之間 30 ≥ h4→內文 10 的 3 倍（§7.3.1 比例約束）。 * 步驟不准截斷：li、h4、內文與三B 支線（li::after）都不得加 line-clamp／固定高度。 * ============================================================ */ [data-page="contact-us"] .contact-grievance { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); margin: 0; padding-bottom: 0; background-color: var(--color-surface-base); scroll-margin-top: var(--space-4); } /* 本區標題與段落的斷行（2026-10-05，SPEC_2026-10-05_contact-form-band-fix.md §3）：h2、h3 用 balance，英文標題不會只剩一個字掉到末行（/en 表單區 h3 末行從「system」變成「reporting system」）；p、li 用 pretty，末行不只剩一個字（/tw 表單說明末行從「謝！」變成「謝謝！」）。只換最後幾行的字：規格在 Chromium 量過本區所有 h2／h3／p／li，行數和高度都不變。不支援的瀏覽器維持原本的斷行。 - text-wrap 簡寫會把 text-wrap-mode 設回 wrap。本區這四種元素目前都沒有 nowrap（本檔的 nowrap 只掛在 .contact-nowrap 的 span 和 .btn-lg 按鈕上）。這兩條權重 (0,2,1) 高於本檔一般的 (0,2,0) 類別規則：日後用類別規則在這幾種元素上加 white-space: nowrap 會被蓋回 wrap，要提高權重或改寫這兩條。 - 步驟 h4 有自己的 balance（見步驟標題規則），不會吃到 li 繼承下來的 pretty。 - /tw 360 說明末行的「謝謝！」是完整句子，規格判定合格（§3.3），不處理。 - Safari 的 pretty 會調整整段，可能改變步驟段的行數，WebKit 沒測（§3.5）；退路是步驟段不套 pretty。 - 選擇器用本區 section 的 block class（.contact-grievance 只掛在這個 section 上），不照抄規格原碼的井字號 id 寫法：本檔全檔不含井字號（見檔頭色碼掃描規則）。兩種寫法命中同一個 section，計算值相同。 */ [data-page="contact-us"] .contact-grievance :is(h2, h3) { text-wrap: balance; } [data-page="contact-us"] .contact-grievance :is(p, li) { text-wrap: pretty; } /* 閱讀欄：行寬上限 38em–44em 取上限（§7.1；body 字級 16px → 704px），左緣貼齊容器、不置中。 ≤991 欄寬小於上限，自然填滿。≥1200 改成兩欄（2026-10-05 object-right，取代 §7.1 的「桌機右側刻意留白」）： body 不再限寬，44em 改由左欄的文字各自限寬，見「意見回饋區兩欄 object-right」段。 2026-10-05 1A 起 <1200 的 body 也不限寬：表單區塊要當滿版灰帶，灰帶的負 margin 用 50% 算，包含塊得是版心全寬； body 限寬 44em 的話，版心比 44em 寬時（約 786–1199 寬）灰帶右緣到不了視窗右緣。<1200 改由導言、機制區塊、表單說明、白卡各自限寬 44em（見檔尾 4b 的 ≤1199），寬度跟原本一樣是 min(版心寬, 44em)、靠左。 2026-10-05 2A（SPEC_2026-10-05_contact-form-band-figure-up.md §2）：導言和機制區塊外面多包一層 .contact-grievance__overview，跟 body 共用這條 flex 直排與段距（≤991 也一起降），<1200 的位置跟沒包之前一樣：導言 → 機制 space-8（≤991 space-7），機制 → 表單區塊仍是 body 的 gap。≥1200 它是流程圖所在的兩欄格線，也是流程圖黏住的範圍，見「意見回饋區兩欄 object-right」段。 2026-10-07 流程圖與表單交換：表單區塊併入 .contact-grievance__overview、當它最後一個子元素，<1200 時機制 → 表單區塊改由 overview 自己的 gap 出距離（原本「機制 → 表單區塊仍是 body 的 gap」改成這條）；body 最後一個子元素換成 .contact-grievance__figure-block（流程圖灰帶），overview → 流程圖灰帶改由 body 的 gap 出距離，<991 一起降的值不變。 ≥1200 時 overview 兩欄格線的右欄換成表單區塊整段（含白卡）並黏住，流程圖灰帶退到 body 外層單獨一條，不再是兩欄格線的一部分，見「意見回饋區兩欄 object-right」段。 */ [data-page="contact-us"] .contact-grievance__body, [data-page="contact-us"] .contact-grievance__overview { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; } [data-page="contact-us"] .contact-grievance__intro { display: flex; flex-direction: column; gap: var(--space-4); } [data-page="contact-us"] .contact-grievance__lede { margin: 0; color: var(--color-text-strong); font-size: var(--type-body-lg); font-weight: var(--weight-regular); letter-spacing: 0.03em; /* type-body-lg 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.75; } /* 「下滑填表」／"the form below"：段落中的行內連結，不撐 45px（WCAG 2.5.8 inline 豁免，§7.2）。2026-10-07 連結字改成「填寫表單」／"fill in the form"。焦點沿用全站 a:focus-visible 雙層環；hover 寫法沿用本頁地址連結（.contact-primary__mailto）。 */ [data-page="contact-us"] .contact-grievance__link { color: var(--color-brand); text-decoration: underline; transition: color var(--duration-fast) var(--ease-fade); } @media (hover: hover) { [data-page="contact-us"] .contact-grievance__link:hover { color: var(--color-brand-deep); } } [data-page="contact-us"] .contact-grievance__subtitle { margin: 0; color: var(--color-text-strong); font-size: var(--type-h3); font-weight: var(--weight-bold); letter-spacing: 0; line-height: 1.5; } /* 流程圖 figure（2026-10-05 object-right；SPEC_2026-10-05_contact-feedback-object-right.md §1.1、§2.2、§2.4、§4.2）： DOM 在結語之後。單欄（<1200）時結語 → 流程圖 space-5；兩欄時放右欄、從導言那一列開始（上距 0，2026-10-05 2A），會黏住，見「意見回饋區兩欄 object-right」段。寬度跟欄寬，上限是素材實寬（§7.3），不放大。上限寫在 figure 上，img 和下面原尺寸連結那一列都跟著不超過圖寬。不加框、不加圓角、不做橫向捲動。 2026-10-07 流程圖與表單交換：figure 搬出 overview，現在是 .contact-grievance__figure-block（灰帶）裡唯一的子元素，不再跟結語或導言有 DOM 前後關係，上距改歸零（margin-top:0），跟灰帶頂的距離只由灰帶的 padding-block 出；灰帶寬度等於版心全寬，圖在灰帶裡置中，加 margin-inline:auto（max-width 650px 不變，灰帶比圖寬時左右留白等寬）。 */ [data-page="contact-us"] .contact-grievance__figure { max-width: 650px; /* feedback-trim.png 素材實寬（650×552，§4.2 裁掉白邊後），非間距 token */ margin: 0 auto; } /* 流程圖灰帶容器（新增，2026-10-07 流程圖與表單交換）：.contact-grievance__figure-block 是 .contact-grievance__body 的最後一個子元素，取代原本 .contact-grievance__form-block 扮演的「滿版灰帶、直接接頁尾」角色（滿版寫法、底色、上下內距見上面 S2 的共用規則）。本身不需要額外的 flex／grid：裡面只有一個 figure，靠 figure 的 margin-inline:auto 置中即可，不用再包一層置中容器。 */ [data-page="contact-us"] .contact-grievance__figure-block { min-width: 0; } /* img 帶 width/height 屬性（650×552），height:auto 依比例算高，載入前就佔好位（CLS）。 */ [data-page="contact-us"] .contact-grievance__figure-img { display: block; width: 100%; height: auto; } /* 原尺寸連結那一列（§3.4）：圖 → 這一列 space-2；連結字級 type-body、行高 1.5（一行 24px），上下內距各 space-2，可點高 24 + 10 × 2 = 44px，用內距撐、不放大字。這一列總高 10 + 44 = 54px，「意見回饋區兩欄 object-right」段的黏住門檻 635／690 就是用這個 54 算的：行高或內距改了，門檻要一起重算。連結折成兩行時多一個行高（24px），可點高 68px，仍 ≥44。不用 nowrap、不截斷：/en 連結字 48 字元，窄欄（390 寬約 349px）一定要能換行。顏色、底線、hover 沿用上方 .contact-grievance__link；這條連結不在段落句子裡，不適用行內豁免，所以要撐到 44px。焦點沿用全站 a:focus-visible 雙層環。 */ [data-page="contact-us"] .contact-grievance__figure-caption { margin-top: var(--space-2); font-size: var(--type-body); letter-spacing: 0.03em; /* type-body 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.5; } [data-page="contact-us"] .contact-grievance__figure-caption > .contact-grievance__link { display: inline-block; padding-block: var(--space-2); } /* ------------------------------------------------------------ * 步驟清單：左側軌道＋三B 整段支線（feedback SPEC §7.3.1，方向二 rail-fork；2026-10-02 第二次改版， * v=17 取代 3f8d862 的短環） * 取代原本的步驟卡（DESIGN.md §4.3 card-plain--filled 灰底卡）與三B 內縮； * DOM 只有一處改動：三B 內文拆成兩個 p（C2）。 * 裝飾全部是偽元素（content 為空字串，不進無障礙樹），線與標記一律用 border 畫： * 強制色彩模式會拿掉 background，border 會留下。 * li::before 主線（實線，每個 li 畫一段，接起來是一條） * h4::before 標記（主線步驟實心點、三B 空心圈） * 三B li::after 支線（藍點線，上、右、下三邊，左邊開口接主線；盒高跟著三B 內容走） * 符號：T＝軌道一格（--rail-cell）、G＝軌道到內容（--rail-gap）、L＝線寬（--rail-line）、 * M＝標記直徑（--rail-marker）、H＝標題一行高（--rail-title-line）。 * T、G 在 ≤575 由檔尾 @media 改值；其他算式全部引用這幾個變數，自動跟著變。 * 沒有互動、沒有 hover／focus、沒有動畫。 * ------------------------------------------------------------ */ [data-page="contact-us"] .contact-grievance__steps { /* 元件常數：tokens.css 沒有線寬與圖形標記尺寸這一類（現有類別是色彩、字級、間距、圓角、陰影等），全站只有本元件用到，先放元件內、不新增 token（§7.3.1 Token 裁決：第二個元件也要用時再升成 token） */ --rail-line: 2px; /* L：T 是 30／20 時，主線與標記都落在整數像素 */ --rail-marker: 12px; /* M：不大於 H 的一半（≤575 的 H 是 24） */ /* 別名，都指向既有 token */ --rail-cell: var(--space-5); /* T */ --rail-gap: var(--space-3); /* G */ --rail-step-gap: var(--space-5); /* 上一步內文最後一行底 → 下一步 h4 頂 */ --rail-fork-above: var(--space-2); /* 支線岔出點（盒上緣）在三B h4 頂之上多遠 */ --rail-rejoin-below: var(--space-3); /* 支線接回點（盒下緣）在三B 最後一行內文底之下多遠 */ /* H：h4 的 line-height 直接引用本變數，標記與主線兩端的定位跟標題行高用同一個來源。 --type-h4 在 ≤575 由 tokens.css 切成 16px，本值自動跟著變（§7.3.1 第 9 點） */ --rail-title-line: calc(var(--type-h4) * 1.5); display: flex; flex-direction: column; gap: 0; /* 步驟間距改由 li 的 padding-bottom 出，主線才能在每個 li 裡接起來 */ margin: var(--space-4) 0 0; /* 機制 h3 → 步驟（object-right §2.1；原本是 h3 → 流程圖的距離）。≥1200 這段改由步驟欄的上距出（2A），見兩欄段 */ padding: 0; list-style: none; isolation: isolate; /* 標記的 z-index 只在本清單內比較 */ } /* 步驟：無底色、無圓角、無內距，直接放在 surface-base 白底上；內容左緣讓出一格軌道＋G（T＋G）。最後一步沒有下距，主線也停在它的標記圓心 */ [data-page="contact-us"] .contact-grievance__step { position: relative; margin: 0; padding: 0 0 var(--rail-step-gap); padding-inline-start: calc(var(--rail-cell) + var(--rail-gap)); } [data-page="contact-us"] .contact-grievance__step:last-child { padding-bottom: 0; } /* 步驟三B：內容左緣跟著空心圈多退一格 T（2T＋G） */ [data-page="contact-us"] .contact-grievance__step--branch { padding-inline-start: calc(var(--rail-cell) * 2 + var(--rail-gap)); } /* 主線：實線 L、border-strong（對白 3.23:1），中線在第一格軌道中線（距 li 左緣 T/2）。從步驟一的標記圓心連到步驟四的標記圓心；經過三B 那一列一樣連續、不帶標記 */ [data-page="contact-us"] .contact-grievance__step::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: calc((var(--rail-cell) - var(--rail-line)) / 2); border-inline-start: var(--rail-line) solid var(--color-border-strong); } [data-page="contact-us"] .contact-grievance__step:first-child::before { top: calc(var(--rail-title-line) / 2); } [data-page="contact-us"] .contact-grievance__step:last-child::before { bottom: auto; height: calc(var(--rail-title-line) / 2); } /* h4：line-height 引用 H（＝type-h4 × 1.5，跟原本的 1.5 同值）；text-wrap: balance 把短的多行標題各行長度分平均（§7.3.1 裁決 6E），字不動，不支援的瀏覽器維持原本的斷行 */ [data-page="contact-us"] .contact-grievance__step-title { position: relative; margin: 0; color: var(--color-text-strong); font-size: var(--type-h4); font-weight: var(--weight-bold); letter-spacing: 0.03em; /* type-h4 的 tracking，值見 tokens.css 該行註解 */ line-height: var(--rail-title-line); text-wrap: balance; } /* 標記：以 h4 當包含塊，圓心在所屬軌道的中線上，垂直對齊 h4 第一行行框中線（標題折行時不跟著移）。三B 的內容左緣多一格 T，標記也就落在第二格軌道的中線，兩種標記共用同一組定位。正圓照 DESIGN.md §4.2 直接寫 100%（tokens.css 的 radius-full 只取藥丸形的 9999px）； z-raised 讓標記蓋在主線與支線上面（只在清單的 isolation 範圍內比較） */ [data-page="contact-us"] .contact-grievance__step-title::before { content: ""; position: absolute; z-index: var(--z-raised); top: calc((var(--rail-title-line) - var(--rail-marker)) / 2); inset-inline-start: calc((var(--rail-cell) - var(--rail-marker)) / 2 - var(--rail-cell) - var(--rail-gap)); box-sizing: border-box; width: var(--rail-marker); height: var(--rail-marker); border: calc(var(--rail-marker) / 2) solid var(--color-brand); /* 實心點：border 填滿整個盒 */ border-radius: 100%; } /* 三B 標記：空心圈，框寬 L；內部填 surface-base 蓋住後面的點線（強制色彩模式下填色換成系統底色，一樣蓋得住） */ [data-page="contact-us"] .contact-grievance__step--branch > .contact-grievance__step-title::before { border-width: var(--rail-line); background-color: var(--color-surface-base); } /* 支線（整段）：從主線右緣水平岔出 → 轉角 → 沿第二格軌道的中線往下 → 轉角 → 水平接回主線右緣。照預覽 inject-rail-fork.css 的側環寫法，只有顏色改 color-brand（對白 6.51:1，§7.3.1「線的顏色與對比」）。左邊開口，不重畫主線那一段；盒高不設定，跟著三B 內容走：三B 有幾行字，支線就陪幾行。 li 沒有上內距，h4 頂就是 li 頂：盒上緣（岔出點）在 h4 頂之上 fork-above。 li 的下內距是 step-gap：盒下緣（接回點）在最後一行內文底之下 rejoin-below。空心圈圓心＝盒右緣減 L/2，整顆落在直線段上（盒頂＋轉角半徑 ≤ 圈頂），由標記的 z-raised 蓋在上面 */ [data-page="contact-us"] .contact-grievance__step--branch::after { content: ""; position: absolute; top: calc(-1 * var(--rail-fork-above)); bottom: calc(var(--rail-step-gap) - var(--rail-rejoin-below)); inset-inline-start: calc((var(--rail-cell) + var(--rail-line)) / 2); /* 主線右緣 */ box-sizing: border-box; width: var(--rail-cell); border: var(--rail-line) dotted var(--color-brand); border-inline-start: 0; border-start-end-radius: var(--radius-md); /* 不大於 T 的一半（≤575 時 T/2 = 10px） */ border-end-end-radius: var(--radius-md); } /* 步驟內文與結語：長文用 text-strong，不用 muted 灰（§7.3） */ [data-page="contact-us"] .contact-grievance__step-body, [data-page="contact-us"] .contact-grievance__closing { margin: 0; color: var(--color-text-strong); font-size: var(--type-body); font-weight: var(--weight-regular); letter-spacing: 0.03em; /* type-body 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.75; } [data-page="contact-us"] .contact-grievance__step-body { margin-top: var(--space-2); } /* 三B 內文的兩段之間（§7.3.1 C2）。特異度高於上一條，不依賴宣告順序 */ [data-page="contact-us"] .contact-grievance__step-body + .contact-grievance__step-body { margin-top: var(--space-3); } [data-page="contact-us"] .contact-grievance__closing { margin-top: var(--space-6); } /* 時限片語：只加粗，顏色跟著內文，不用品牌藍（避免和連結混淆，§7.3） */ [data-page="contact-us"] .contact-grievance__due { font-weight: var(--weight-bold); } /* ------------------------------------------------------------ * G3 表單（id=feedback-form；2026-10-01 併頁第 2b 張） * 依據：feedback SPEC §5（層級樹）、§6（間距）、§7.4（表單）、§10.2（狀態矩陣）、 * §11.1（降級）；DESIGN.md Components §3.1（焦點）、§3.3（欄位狀態與尺寸）、 * §3.4（表單 RWD）。 * 白底（I4）：欄位框 border-strong 對白 3.23:1、對 surface-subtle 只有 2.94:1， * 欄位一律不放進淡灰底（結果訊息的淡灰底只放文字）。 * 2026-10-05 1A（SPEC_2026-10-05_contact-form-band-figure-up.md §1）：本區塊是滿版灰帶（滿版寫法、底色、上下內距 * 與上半頁 .contact-primary 共用同一組規則，見 S2），白卡（.contact-grievance__col--form）裝必填提示、 * 結果訊息與表單，欄位仍在白底上。 * 與 G2 的距離由 .contact-grievance__body 的 gap 提供，本區不加 margin-top（白底留白之後才進灰帶）； * h3 沿用 .contact-grievance__subtitle；<1200 時說明與白卡各自限寬 44em（見 4b 的 ≤1199）。 * 2026-10-07 流程圖與表單交換：本區塊併入 .contact-grievance__overview、當它最後一個子元素，不再是滿版灰帶 * （灰帶改掛在流程圖外面的 .contact-grievance__figure-block，見上方 S2 共用規則的附註），白底、卡片樣式不變。 * 與機制區塊（結語）的距離改由 overview 自己的 gap 提供（≤991 一起降，見 body／overview 共用規則）。 * ≥1200 時整段（h3、說明、白卡）當 overview 右欄、黏住，不再自己是兩欄 grid，見「意見回饋區兩欄 object-right」段。 * 狀態掛在屬性／class 上，第 2c 張的 JS 只切狀態、不寫樣式： * 欄位錯誤 aria-invalid="true"（label 變色用 :has()，不支援的瀏覽器只少了 * label 變色，框線與訊息照常）；結果訊息 hidden 屬性＋is-success／is-error； * 驗證碼錯誤 hidden 屬性；送出中 aria-busy="true"（見檔頭 btn-lg）。 * hidden 只能切屬性：bootstrap 4.4.1 的 [hidden] 帶 !important， * jQuery .show() 寫的行內 display 蓋不過它。 * 間距（§6；括號內為 ≤575）：h3→說明 space-3、說明→白卡 space-5（單欄；兩欄時卡頂＝h3 頂，見兩欄段）、 * 卡內第一個是必填提示（上距 0，由卡的內距出）、 * 必填提示→結果訊息／表單 space-5（space-4）、結果訊息→表單 space-5（space-4）、 * label→欄位 space-2、欄位→錯誤 space-1、欄位→驗證碼 space-5（space-4）、 * 驗證碼（含錯誤）→送出鈕 space-4。欄位欄距、列距照 DESIGN.md §3.4（見 4b）。 * 比例：列距 15～30 ≥ label→欄位 10；本區中層最大 space-5，最鬆 G2↔G3 * space-8（≤991 space-7），比值 ≥1.6。 * ------------------------------------------------------------ */ [data-page="contact-us"] .contact-grievance__form-block { scroll-margin-top: var(--space-4); /* header 非 sticky：0 + space-4（§7.4，同 section） */ } [data-page="contact-us"] .contact-grievance__form-desc { margin: var(--space-3) 0 0; color: var(--color-text-strong); font-size: var(--type-body); font-weight: var(--weight-regular); letter-spacing: 0.03em; /* type-body 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.75; } /* 必填提示：type-caption、text-muted 對白 5.49:1。白卡裡的第一個元素，上距歸零，跟卡框的距離只由卡的內距出（1A §1.3；原本說明 → 必填提示的 space-2、≥1200 的 space-3 都拿掉） */ [data-page="contact-us"] .contact-grievance__required-note { margin: 0; color: var(--color-text-muted); font-size: var(--type-caption); font-weight: var(--weight-medium); letter-spacing: 0.05em; /* type-caption 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.5; } /* 白卡（2026-10-05 1A，SPEC_2026-10-05_contact-form-band-figure-up.md §1.3）：.contact-grievance__col--form 本身就是卡，不另加包裝層。底、框、圓角同上半頁地圖卡（.contact-primary__map；≤575 除外，見下）。卡內依序是必填提示 → 結果訊息 → 表單。內距：576–1199 space-5；≥1200 space-6（見兩欄段）。≤575 是左右貼齊視窗的滿版卡：上下 space-4、左右＝版心實際邊距，左右框線和圓角拿掉、上下框線保留（2026-10-05 修正，見 4b）。單欄（<1200）時卡在說明下方，說明 → 卡 space-5（規格沒寫這段距離，取 B 棒預覽 390 寬約 30px，也是本區的中層間距）；寬度上限 44em 見 4b 的 ≤1199。驗證碼：行內 script 量 .contact-grievance__captcha 的寬，<304 用 compact。≥576 卡內寬＝卡寬 − 2 × 左右內距 − 2（框）； ≤575 卡內寬＝版心寬（約 0.8958 × 視窗寬），視窗 <339.4（例如 320）才降成 compact，360 也是 normal （SPEC_2026-10-05_contact-form-band-fix.md §1.5、§1.6；JS 取整可能讓分界差 1px）。JS 不改：contact.css 在 head、 script 在 body 尾端，量的時候卡片樣式已經套上。 2026-10-07 流程圖與表單交換：≥1200 時表單區塊不再是兩欄 grid，卡不用格線定位，margin-top 沿用本規則的 space-5（不再被覆寫成 0）；內距仍在 ≥1200 覆寫成 space-6，見「意見回饋區兩欄 object-right」段。 */ [data-page="contact-us"] .contact-grievance__col--form { margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border-brand); border-radius: var(--radius-lg); background-color: var(--color-surface-base); } /* 結果訊息（§7.4）：surface-subtle 底、radius-md、左側色條（成功 brand 5.92:1、失敗 state-error 5.35:1，皆對 surface-subtle）。成功與失敗靠文字區分：失敗才有標題行（靜態字串，只在 is-error 顯示）；成功只有一句 brand 粗體。任何長度都換行，不截斷。 */ [data-page="contact-us"] .contact-grievance__status { margin-top: var(--space-5); padding: var(--space-5); border-inline-start: 4px solid transparent; /* §7.4 色條寬（線寬，非間距 token）；顏色由狀態 class 給 */ border-radius: var(--radius-md); background-color: var(--color-surface-subtle); overflow-wrap: anywhere; scroll-margin-top: var(--space-4); } [data-page="contact-us"] .contact-grievance__status.is-success { border-inline-start-color: var(--color-brand); } [data-page="contact-us"] .contact-grievance__status.is-error { border-inline-start-color: var(--color-state-error); } [data-page="contact-us"] .contact-grievance__status-title, [data-page="contact-us"] .contact-grievance__status-text { margin: 0; color: var(--color-text-strong); font-size: var(--type-body); font-weight: var(--weight-regular); letter-spacing: 0.03em; /* type-body 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.75; } [data-page="contact-us"] .contact-grievance__status-title { color: var(--color-state-error); font-weight: var(--weight-bold); } [data-page="contact-us"] .contact-grievance__status:not(.is-error) .contact-grievance__status-title { display: none; } [data-page="contact-us"] .contact-grievance__status.is-error .contact-grievance__status-text { margin-top: var(--space-1); } [data-page="contact-us"] .contact-grievance__status.is-success .contact-grievance__status-text { color: var(--color-brand); font-weight: var(--weight-bold); } /* 表單：flex 直排，子元素都撐滿欄寬（驗證碼容器必須是欄寬，第 2c 張量它決定 normal／compact）。送出鈕 2026-10-05 起也撐滿（align-self: stretch，見送出鈕規則）。 */ [data-page="contact-us"] .contact-grievance__form { display: flex; flex-direction: column; margin: var(--space-5) 0 0; } /* 欄位 grid：≥992 兩欄（姓名｜電子信箱、日期｜空格、意見回饋跨兩欄），≤991 單欄（見 4b） */ [data-page="contact-us"] .contact-grievance__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); } [data-page="contact-us"] .contact-grievance__field { display: flex; flex-direction: column; min-width: 0; } [data-page="contact-us"] .contact-grievance__field--full { grid-column: 1 / -1; } /* label：可見、放欄位上方；margin 蓋掉 bootstrap reboot 的 label margin-bottom .5rem */ [data-page="contact-us"] .contact-grievance__label { margin: 0 0 var(--space-2); color: var(--color-text-strong); font-size: var(--type-body); font-weight: var(--weight-medium); letter-spacing: 0.03em; /* type-body 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.75; } /* 必填星號：aria-hidden；必填語意由 required＋aria-required 與表單頂端提示提供 */ [data-page="contact-us"] .contact-grievance__required { margin-inline-start: var(--space-1); color: var(--color-state-error); } /* 欄位 default（DESIGN.md §3.3）：min-height space-7、內距 space-3／space-4、radius-sm。 appearance:none 拿掉 iOS 預設內陰影與圓角；字級 type-body 全斷點 16px （iOS Safari 欄位 <16px 聚焦時會放大整頁）。font-family 由 bootstrap reboot 繼承。 */ [data-page="contact-us"] .contact-grievance__control { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; min-height: var(--space-7); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface-base); color: var(--color-text-strong); font-size: var(--type-body); font-weight: var(--weight-regular); letter-spacing: 0.03em; /* type-body 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.5; } /* textarea：高度取 §7.4 範圍 160–240px 內的 200px（元件尺寸，非間距 token），只能直向拉 */ [data-page="contact-us"] .contact-grievance__control--textarea { min-height: 200px; line-height: 1.75; resize: vertical; } /* 狀態順序有意義（同特異度，後寫的贏）：hover → focus → 錯誤 → 停用。錯誤排在 focus 之後：送出後焦點會跳到第一個錯誤欄位，框線仍須是錯誤色（SPEC A8）。 */ @media (hover: hover) { [data-page="contact-us"] .contact-grievance__control:hover { border-color: var(--color-text-muted); } } /* focus：DESIGN.md §3.1 雙層環，寫在本頁欄位 class 上（全站那條只管 a／button）；無過渡，即時出現。 */ [data-page="contact-us"] .contact-grievance__control:focus { border-color: var(--color-border-brand); outline: 3px solid var(--color-state-focus); /* DESIGN.md §3.1 焦點環寬，非間距 token */ outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-text-inverse); } [data-page="contact-us"] .contact-grievance__control[aria-invalid="true"] { border-color: var(--color-state-error); } [data-page="contact-us"] .contact-grievance__field:has(> .contact-grievance__control[aria-invalid="true"]) .contact-grievance__label { color: var(--color-state-error); } /* 停用（DESIGN.md §3.3）：本頁規格的「送出中」不停用欄位，只在 JS 另行停用時生效。 iOS Safari 對 disabled 欄位預設 opacity 與 -webkit-text-fill-color，一併蓋掉。 */ [data-page="contact-us"] .contact-grievance__control:disabled { border-color: var(--color-border-subtle); background-color: var(--color-surface-subtle); color: var(--color-text-disabled); -webkit-text-fill-color: var(--color-text-disabled); opacity: 1; } [data-page="contact-us"] .contact-grievance__field:has(> .contact-grievance__control:disabled) .contact-grievance__label { color: var(--color-text-disabled); } /* 驗證碼：Google iframe 固定寬（normal 304px、compact 164px）。容器撐滿欄寬，第 2c 張量它選尺寸（<304px 用 compact，§10.3）；渲染後才變窄時由 overflow-x:auto 接住，不撐破頁面（§7.4、§11.1、DESIGN.md §3.4 規定的最後保險）。 */ [data-page="contact-us"] .contact-grievance__captcha { margin-top: var(--space-5); overflow-x: auto; line-height: 0; /* 收掉 iframe 底下的基線空隙，說明見下方第 2c 張註解 */ } /* 驗證碼預留高度（第 2c 張）：行內 script 一執行就量容器寬、選好 normal／compact 寫進 data-captcha-size，api.js 載入前先撐出 iframe 的高度，驗證碼出現時送出鈕不往下跳。數值是 Google 素材實測尺寸（normal 304×78、compact 164×144），非間距 token；沒有 JS 時不帶屬性、不預留（reCAPTCHA 本來就需要 JS）。上方 line-height:0：Google 的 iframe 是行內元素，行高會在它底下多留約 7px 基線空隙；overflow-x:auto 讓容器兩個方向都可捲動，這段空隙就成了縱向溢出（真 reCAPTCHA 實測 1440 為 85／78、320 為 151／144），傳統捲軸的系統會多出一條縱向捲軸。行高歸零把空隙收掉，不用 overflow-y:hidden 裁切。 */ [data-page="contact-us"] .contact-grievance__captcha[data-captcha-size="normal"] { min-height: 78px; } [data-page="contact-us"] .contact-grievance__captcha[data-captcha-size="compact"] { min-height: 144px; } /* 錯誤訊息：欄位錯誤（validator 產生，插在欄位正下方）與驗證碼錯誤共用。 type-caption、state-error 對白 5.89:1；任何長度都換行。 */ [data-page="contact-us"] .contact-grievance__error { margin: var(--space-1) 0 0; color: var(--color-state-error); font-size: var(--type-caption); font-weight: var(--weight-medium); letter-spacing: 0.05em; /* type-caption 的 tracking，值見 tokens.css 該行註解 */ line-height: 1.5; overflow-wrap: anywhere; } /* 送出鈕：所有斷點都撐滿欄寬，左右緣等於全寬欄位（textarea）的左右緣；驗證碼在上、按鈕在下，所有斷點都是上下排。 2026-10-05 由 flex-start（靠左、保有自身寬度）改成 stretch（SPEC_2026-10-05_contact-form-band-fix.md §2）：消掉送出鈕（≥1200 時 270 寬）跟上方驗證碼（304 寬）右緣差 34px 的近失對齊，寬度規則也從三段變成一段。只改這個 class、不改 .btn-lg（頁面上其他 .btn-lg 不受影響）；.btn-lg 的 min-width 270／200 留著，撐滿後最窄的 320 也有 286.7，比 min-width 大；≤575 的 .btn-lg width: 100% 結果相同（見 4b）。驗證碼是 Google 固定尺寸的跨網域 iframe，拉不寬，維持 304 寬靠左，接受它的右緣跟欄位不齊。2560 時送出鈕約 846 寬，用戶看過覺得太重的話，退路是 ≥1200 改回 flex-start。 */ [data-page="contact-us"] .contact-grievance__submit { align-self: stretch; margin-top: var(--space-4); } /* ------------------------------------------------------------ * 意見回饋區兩欄 object-right（≥1200；2026-10-05） * 依據：SPEC_2026-10-05_contact-feedback-object-right.md §1（各斷點欄位配置）、§2.1（放法與間距）、 * §2.3（黏住）；取代 feedback SPEC §7.1 的「閱讀欄左對齊、右側刻意留白」。<1200 維持單欄，不在這裡。 * 2026-10-05 2A（SPEC_2026-10-05_contact-form-band-figure-up.md §2）：流程圖改從導言那一列開始，見下方「導言＋機制」。 * 兩欄＝灰帶 .contact-primary 的兩欄：等寬、欄距 space-7。本區跟灰帶同在 .news-container 裡、內容盒一樣寬， * 同一組欄定義會讓右欄左緣自動落在地圖欄左緣，不另外算位置。導言＋機制（.contact-grievance__overview）和 * 表單區塊兩層都用這組定義（兩層同寬，欄線就重合；表單區塊是灰帶，負 margin 與內距抵消後內容盒仍是版心全寬）。 * body 維持基礎規則的 flex 直排，overview → 表單區塊的 space-8 由 body 的 gap 出。 * align-items: start：格子頂端對齊；流程圖也因此不會被拉成整列高，才黏得住。 * 導言＋機制（2A §2.1–§2.3）：overview 是三列的兩欄格線。機制區塊設 display: contents（沒有 role 的 div， * 對無障礙樹沒有影響），它的 h3、步驟欄、流程圖直接當 overview 的格子： * 左欄：第 1 列導言 → 第 2 列機制 h3 → 第 3 列步驟欄（步驟＋結語） * 右欄：流程圖佔第 1–3 列，圖頂＝導言頂；h3 只佔左欄，不會從圖中間穿過去 * 全部用明確的 grid-row／grid-column 定位，DOM 順序不變（導言 → h3 → 步驟欄 → 流程圖＝先讀完左欄、再讀右欄）， * 不用 order、不用 dense。各列之間的距離不一樣，overview 不設列距，改由格子的上距出： * 導言 → h3 space-8（h3 的上距，原本 body 的段距）； * h3 → 步驟欄 space-4（步驟欄的上距；步驟清單原本的上距在這裡歸零，步驟欄頂、步驟清單頂都在 h3 底下 20）； * 步驟欄（含結語）→ 表單灰帶 space-8（body 的 gap）。 * overview 只包導言和機制、不包表單區塊，底邊＝步驟欄底：流程圖黏住的範圍就是它（見下方黏住段）。 * 表單區塊（1A）：左欄是 h3 → 說明、右欄是白卡（.contact-grievance__col--form：必填提示 → 結果訊息 → 表單）， * 白卡從 h3 那一列開始，同樣用明確的 grid-row／grid-column 定位。 * 寬度上限：左欄文字沿用 44em（導言、步驟欄、說明各自限寬；≤1920 左欄最寬 690，上限不起作用）； * 流程圖 650 見 figure 規則；白卡跟著右欄寬、不限寬（2560 寬時卡內寬約 846）。 * 間距（都是既有 token，沒有新值）：表單 h3 → 說明 space-3（說明本來的 margin-top）；白卡頂＝h3 頂 * （1A §1.2，必填提示上距 0，見該規則）；其餘沿用：步驟 → 結語 space-6、必填提示 → 結果訊息 → 表單 space-5。 * 表單欄位改單欄（§2.1：右欄 485–690，排兩欄每格比現行設計的 332 窄），列距沿用 ≥992 的 space-5。 * 斷點：1200＝tokens.css --bp-lg（1199）+ 1，1440＝--bp-xl（1439）+ 1；@media 不支援 var()，照 4b 格慣例手寫。 * 2026-10-07 流程圖與表單交換：以上整段描述的是「右欄放流程圖」的舊版面，現狀改成右欄放表單區塊整段 * （h3 → 說明 → 白卡），流程圖搬到 .contact-grievance__figure-block（body 最後一個子元素，見該規則）， * 不在這個兩欄格線裡、也不黏住。右欄選擇器從 .contact-grievance__figure 改成 .contact-grievance__form-block， * grid-row/grid-column 定位沿用原本的「1 / span 3、第 2 欄」。表單區塊本身不再是自己的兩欄 grid：拿掉 * grid-template-rows、h3／說明／白卡各自的 grid-row／grid-column，改回預設直排（h3 → 說明 → 白卡，間距沿用 * 基礎規則：說明 margin-top space-3、白卡 margin-top space-5），白卡只保留 ≥1200 內距 space-6 的覆寫。 * 說明（.contact-grievance__form-desc）在右欄跟著欄寬即可，不需要 44em 限寬，從下面 max-width:44em 那條移除。 * 黏住的對象也換成表單區塊整段，見下方黏住段的 2026-10-07 附註。 * ------------------------------------------------------------ */ @media (min-width: 1200px) { [data-page="contact-us"] .contact-grievance__overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); align-items: start; } /* 導言＋機制（2A）：三列、列距 0，各列的距離由格子的上距出（見本段開頭） */ [data-page="contact-us"] .contact-grievance__overview { row-gap: 0; } [data-page="contact-us"] .contact-grievance__mechanism { display: contents; } [data-page="contact-us"] .contact-grievance__intro { grid-row: 1; grid-column: 1; } [data-page="contact-us"] .contact-grievance__mechanism > .contact-grievance__subtitle { grid-row: 2; grid-column: 1; margin-top: var(--space-8); } [data-page="contact-us"] .contact-grievance__col--steps { grid-row: 3; grid-column: 1; margin-top: var(--space-4); } [data-page="contact-us"] .contact-grievance__steps { margin-top: 0; } /* 右欄（2026-10-07 流程圖與表單交換）：表單區塊整段取代原本的流程圖，佔第 1–3 列、第 2 欄，跟左欄（導言→h3→步驟欄）同時起步；格線位置沿用原本給流程圖的設定，只換了選擇器。 */ [data-page="contact-us"] .contact-grievance__form-block { grid-row: 1 / span 3; grid-column: 2; } [data-page="contact-us"] .contact-grievance__intro, [data-page="contact-us"] .contact-grievance__col--steps { max-width: 44em; } /* 白卡內距（2026-10-07）：表單區塊不再是自己的兩欄 grid，h3→說明→白卡回到預設直排（基礎規則），這裡只保留 ≥1200 專屬的內距覆寫。 */ [data-page="contact-us"] .contact-grievance__col--form { padding: var(--space-6); } [data-page="contact-us"] .contact-grievance__fields { grid-template-columns: minmax(0, 1fr); } } /* 流程圖黏住（§2.3）：只有 figure 黏（圖＋原尺寸連結那一列），其他元素都不黏。 * top 取 space-6（本區 h2 → 內容的 row-gap）；頁首是 position: relative，捲走就不回來，不用扣頁首高度。 * 範圍（2026-10-05 2A §2.4）：figure 是 .contact-grievance__overview 格線第 1–3 列的格子，導言頂捲到視窗頂下 40 就開始黏， * 底邊碰到 overview 底邊（＝步驟欄底，結語結束）就跟著一起離開，不會進表單灰帶、不會壓到「線上匿名回饋系統」標題。 * 範圍刻意用一層真的盒子框住，不靠 body 格線裡的列：figure 的格線區域和格線容器 overview 的內容盒上下緣相同， * 瀏覽器不論拿哪一個當黏住的界線，放開點都一樣。不加 z-index（只在右欄，蓋不到左欄或焦點元素）。 * 黏住不是動畫，prefers-reduced-motion 照常啟用。 * 防呆：html、body、.news-container、.contact-grievance、.contact-grievance__body、.contact-grievance__overview、 * .contact-grievance__mechanism 都不能加 overflow（含 clip）或 contain: paint；任何一層變成捲動容器，黏住就會失效， * 而且不會報錯。 * 啟用條件：兩欄，而且視窗高度裝得下「黏住的盒子＋上下各 space-6」；裝不下就不黏，流程圖照一般捲動、 * 留在右欄頂端。門檻 635／690 是由素材尺寸推出來的局部常數，不是設計決策，不設 token： * 門檻 ≥ 圖實高 × (欄寬上限 ÷ 圖實寬) + 說明列高 + 2 × space-6，往上取到 5px 格線 * 圖 650×552（feedback-trim.png）；說明列 54 ＝ space-2 10 ＋連結可點高 44（見 figure-caption 規則） * 1200–1439：欄寬上限是 1439 寬時的右欄 (1439 − 2 × 7.5vw − space-7) ÷ 2 ≈ 586.6 * 552 × 586.6 ÷ 650 + 54 + 80 ≈ 632.2 → 635px * ≥1440：欄寬上限是圖實寬 650（figure 的上限）→ 552 + 54 + 80 = 686 → 690px * 圖、說明列高或 space-6 改了，照同一個式子重算。 * /en 原尺寸連結 48 字元，欄窄時可能折成兩行，說明列從 54 變 78。門檻是用各段最寬的欄（圖最高）算的； * 要折行，欄寬得小於連結字一行的寬，那時圖變矮的量大於多出來的 24px：只要連結字一行不超過 561px， * 兩段門檻都還裝得下（552 × 561 ÷ 650 + 78 + 80 ≈ 634.4 ≤ 635）。 * 2026-10-07 流程圖與表單交換：以上整段門檻是用「流程圖」的素材尺寸（650×552）推出來的，流程圖搬到 * .contact-grievance__figure-block 之後不再兩欄、不再黏住，這組算式不再適用於 figure，整段留著只是歷史記錄。 * 黏住的對象換成表單區塊整段（.contact-grievance__form-block：h3＋說明＋白卡），下面另立新的門檻與規則。 * ------------------------------------------------------------ */ /* 表單區塊黏住（2026-10-07 流程圖與表單交換，取代上面 §2.3 原本給流程圖用的規則）：黏住範圍仍是 * .contact-grievance__overview（右欄＝表單區塊整段，佔第 1–3 列，見兩欄段），overview 底＝左欄步驟欄底 * 或右欄表單底兩者取高者（grid 的 auto 列高天然這樣算，不用額外 CSS）。 * 門檻（min-height）暫定 1000px：先沿用上面舊門檻「圖高 + 說明列高 + 2 × space-6」的算法精神， * 改成「表單區塊整段高度 + 2 × space-6」，但表單區塊的實際高度（h3＋說明＋白卡，含驗證碼渲染後的高度） * 還沒有實測量過，1000px 只是暫定的保守值，之後要量過右欄在 1200–1439、≥1440 兩種欄寬下的實際高度 * （含 reCAPTCHA iframe）再重算，重算方式同上面舊門檻的算式（換成表單區塊的高度）。 * 其餘防呆（html／body／.news-container／.contact-grievance／.contact-grievance__body／ * .contact-grievance__overview／.contact-grievance__mechanism 不可加 overflow 或 contain: paint）、 * 不加 z-index、不是動畫等規則，沿用上面 §2.3 整段的說明，不重複寫一次。 * 2026-10-07 實測（Chrome，reCAPTCHA 已渲染）：表單區塊高 /tw 1200 寬 1104、1280 寬 1076、1440 寬 1079； * /en 1200 寬 1199（說明文字較長，最高）。白卡本身各寬都是 936。門檻取最高值：1199 + 2 × space-6（60）＝ 1259 * → 往上取到 5px 格線 1260px。視窗高度低於 1260 時不黏，表單照一般捲動留在右欄頂端，送出鈕不會被切掉。 * 表單欄位、說明文字或 space-6 改了，照同一個式子重算。 */ @media (min-width: 1200px) and (min-height: 1260px) { [data-page="contact-us"] .contact-grievance__form-block { position: sticky; top: var(--space-6); } } /* ---------------------------------------------------------------------- * 聯絡我們頁面樣式 —— 第 4b 格：五斷點 RWD 覆寫 * 依據：DESIGN-SPEC-contact-us-v2.md §4 RWD 表（五斷點） * * 斷點對照 tokens.css：--bp-xl(1439) / --bp-lg(1199) / --bp-md(991) / * --bp-sm(767) / --bp-xs(575)。CSS @media 不支援 var()，故沿用 * tokens.css 本身的既有慣例，手寫像素數字。 * * ≤1439 與 ≤767 兩個斷點刻意不在此新增規則： * - 區塊標題 h2 字級、公司名字級、container-page 容器內距、意見回饋區的 * h3／h4／導言字級皆為 token * （--type-h2/--type-h3/--type-h4/--type-body-lg/--container-page）， * 已由 tokens.css 檔尾的全域 :root @media 覆寫在對應斷點自動變值， * 本檔引用 var(--token) 即自動響應，不需要重複宣告。 * - ≤767 規格原文「字級沿用 ≤991 欄」「單欄」，S2 規則沿用 * ≤991 斷點已寫的覆寫，CSS max-width media query 天然向下持續生效。 * - 觸控目標（.contact-primary__mailto 的 min-height 45px、.btn-lg 的 * min-height 65px）是 4a 已寫的常數值，不隨斷點變化，全部 5 個斷點天然成立。 * ---------------------------------------------------------------------- */ /* ≤1199：S2 兩欄 gap 降 space-6，仍是兩欄，欄數本身不變。意見回饋表單欄位仍是兩欄、欄距降 space-4（DESIGN.md §3.4）；btn-lg 水平內距降 space-3、最小寬降 200px（DESIGN.md §0.3、§2.3） */ @media (max-width: 1199px) { [data-page="contact-us"] .contact-primary { column-gap: var(--space-6); } [data-page="contact-us"] .btn-lg { min-width: 200px; /* DESIGN.md §0.3 元件尺寸，非 space-N token */ padding-inline: var(--space-3); } [data-page="contact-us"] .contact-grievance__fields { column-gap: var(--space-4); } /* 意見回饋區閱讀欄 44em（2026-10-05 1A）：原本限在 .contact-grievance__body，改由子元素各自限寬，表單區塊本身不限寬才能當滿版灰帶（見 body 規則）。表單區塊的 h3 只有一行短標題，不另外限寬。 2026-10-07 流程圖與表單交換：表單區塊已不是滿版灰帶（灰帶換成流程圖的 .contact-grievance__figure-block），但 <1200 單欄時表單區塊的寬度仍等於版心全寬，這四個選擇器（含 .contact-grievance__form-desc、 .contact-grievance__col--form）限寬 44em 的理由跟結論不變，維持不動。 */ [data-page="contact-us"] .contact-grievance__intro, [data-page="contact-us"] .contact-grievance__mechanism, [data-page="contact-us"] .contact-grievance__form-desc, [data-page="contact-us"] .contact-grievance__col--form { max-width: 44em; } } /* ≤991：S2 單欄堆疊（左欄資訊 → 右欄地圖為 DOM 原序，未使用 grid order；切換 1fr 後自然上 h2、資訊、地圖，地圖不准消失）。淡灰帶 margin-bottom／padding-block 對齊 DESIGN.md §3.2「section 之間 ≤991 = space-9」一併降階；hero → 灰帶取 space-7（範圍 space-7～space-9 的下限） */ @media (max-width: 991px) { [data-page="contact-us"] .main-header { margin-bottom: var(--space-7); } [data-page="contact-us"] .contact-primary { grid-template-columns: 1fr; row-gap: var(--space-6); margin-block: 0 var(--space-9); } /* 兩條灰帶共用的上下內距（見 S2 的滿版灰帶規則）。2026-10-07 流程圖與表單交換：選擇器改成 .contact-grievance__figure-block（同 S2 的附註）。 */ [data-page="contact-us"] .contact-primary, [data-page="contact-us"] .contact-grievance__figure-block { padding-block: var(--space-7); } [data-page="contact-us"] .contact-primary__mailto { display: flex; width: 100%; } /* 意見回饋區：最鬆 G1↔G2 降 space-7；中層步驟→結語降 space-5（feedback SPEC §6；最鬆／中層 50/30=1.67 ≥ 1.6）。到 footer 的距離 2026-10-05 1A 起全斷點為 0（表單灰帶直接接頁尾，見 section 規則）。 2026-10-07 流程圖與表單交換：接頁尾的換成流程圖灰帶（.contact-grievance__figure-block，body 最後一個子元素），表單區塊併入 overview、不再是灰帶，道理不變、全斷點仍為 0。 2A 的 .contact-grievance__overview（導言＋機制）跟 body 一起降，導言 → 機制仍是 space-7 */ [data-page="contact-us"] .contact-grievance__body, [data-page="contact-us"] .contact-grievance__overview { gap: var(--space-7); } [data-page="contact-us"] .contact-grievance__closing { margin-top: var(--space-5); } /* 意見回饋表單：欄位改單欄、列距 space-4（DESIGN.md §3.4、feedback SPEC §11.1） */ [data-page="contact-us"] .contact-grievance__fields { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); } } /* ≤575：S2 row-gap 再降 space-5（同時是 h2 → 內容，SPEC §2.3）、淡灰帶 padding-block 再降 space-6；管道清單 dt/dd 改上下堆疊（標籤 → 值 space-1，SPEC §2.4） */ @media (max-width: 575px) { [data-page="contact-us"] .contact-primary { row-gap: var(--space-5); } /* 兩條灰帶共用的上下內距（見 S2 的滿版灰帶規則）。2026-10-07 流程圖與表單交換：選擇器改成 .contact-grievance__figure-block（同 S2 的附註）。 */ [data-page="contact-us"] .contact-primary, [data-page="contact-us"] .contact-grievance__figure-block { padding-block: var(--space-6); } [data-page="contact-us"] .contact-primary__list { grid-template-columns: minmax(0, 1fr); } [data-page="contact-us"] .contact-primary__row { row-gap: var(--space-1); } /* 疊放時社群列標籤盒高回到行高（§2.4：≤575 標籤盒內留白 0） */ [data-page="contact-us"] .contact-primary__row--social > .contact-primary__label { min-height: 0; } /* 意見回饋區：h2 → body 降 space-5（info SPEC §2.3）；步驟軌道 T 降 space-4、G 降 space-2 （feedback SPEC §7.3.1 第 8 點：主線、標記、支線與內容左緣的算式都引用這兩個變數，自動跟著變） */ [data-page="contact-us"] .contact-grievance { row-gap: var(--space-5); } [data-page="contact-us"] .contact-grievance__steps { --rail-cell: var(--space-4); --rail-gap: var(--space-2); } /* 意見回饋表單：中層間距降 space-4（必填提示／結果訊息→表單、欄位→驗證碼）、結果訊息內距降 space-4、欄位列距降 space-3（feedback SPEC §6、§7.4；DESIGN.md §3.4）； btn-lg 改滿寬（DESIGN.md §2.3 btn-block） */ [data-page="contact-us"] .contact-grievance__status { margin-top: var(--space-4); padding: var(--space-4); } [data-page="contact-us"] .contact-grievance__form { margin-top: var(--space-4); } [data-page="contact-us"] .contact-grievance__fields { row-gap: var(--space-3); } [data-page="contact-us"] .contact-grievance__captcha { margin-top: var(--space-4); } /* 白卡左右滿版（2026-10-05，SPEC_2026-10-05_contact-form-band-fix.md §1，取代 1A §1.3 的左右 space-2）：左右貼齊視窗、拿掉左右框線和圓角，上下 1px 品牌藍框線保留（顏色沿用基礎規則）；上下內距 space-4，左右內距＝版心實際邊距，欄位左緣和 h3、說明左緣同一條線，360 寬的驗證碼回到 normal。滿版跟 S2 的滿版灰帶規則（.contact-primary、.contact-grievance__form-block）用同一對式子，這是第三份：灰帶的寫法要改時這條一起改（驗收項 A2 量卡片左右緣＝0／clientWidth，會直接抓到）。不能只寫 var(--container-page)：它在 ≤575 有 20px 下限，比版心實際邊距 5.2083vw 大，364、360、320 會撐出 1–3px 橫向溢出。50% 是包含塊（灰帶的內容盒＝版心寬）的寬，所以白卡要維持是表單區塊的直接子元素，寬度也要維持 auto（不可以設 width: 100%），負 margin 才撐得出去。只在 ≤575 生效，不需要 ≥1440 的 12.7604vw 覆寫。 2026-10-07 流程圖與表單交換：表單區塊（.contact-grievance__form-block）已經不是滿版灰帶（灰帶換成 .contact-grievance__figure-block），但這條式子不是依賴「灰帶」本身，依賴的是白卡的直接父層（表單區塊） content-box 寬度＝版心寬、且左右置中（跟 .news-container 同一個中心點）。表單區塊現在是 .contact-grievance__overview 的子元素，overview 跟它上面的 .contact-grievance__body、.contact-grievance（section）一路到 .news-container 都沒有自己的 padding／border／width 限制（≤1199 單欄時 overview 是 flex 直排， 100% 寬），所以表單區塊 content-box 仍等於版心寬、置中也不變，這條式子不用改，白卡仍要維持是表單區塊的直接子元素、寬度維持 auto。 */ [data-page="contact-us"] .contact-grievance__col--form { margin-inline: max(calc(var(--container-page) * -1), calc(50% - 50vw)); padding: var(--space-4) min(var(--container-page), calc(50vw - 50%)); border-inline-width: 0; border-radius: 0; } [data-page="contact-us"] .btn-lg { width: 100%; } }