/* Reset、排版基礎、無障礙工具類。取代原本 Bootstrap 4 的 reboot 與 Porto theme.css 所提供的同類規則。字型刻意不載入任何 webfont：設計稿本身也只用系統字型堆疊，而自架 Noto Sans TC 即使做 subset 也要 5–8MB，比這次刪掉的 CSS 還重。注意 system-ui 在 Windows 的 zh-TW 會解析成微軟正黑體而非 Noto，字重也因此正規化成 400/600/700/800（設計稿的 850/950 是可變字型語法，在靜態字型上會亂捨入）。 */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* 錨點捲動時不要讓標題貼齊視窗頂端被 sticky header 蓋住 */ scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100svh; background: radial-gradient(circle at 12% 18%, rgba(255, 199, 111, .18), transparent 26%), radial-gradient(circle at 90% 14%, rgba(255, 208, 82, .20), transparent 24%), linear-gradient(180deg, #fffaf2 0%, var(--cream) 70%, #fff1d4 100%); /* 不用 background-attachment:fixed：長頁面會在視窗高度處出現接縫，而且它在低階 Android 上是已知的重繪負擔 */ background-repeat: no-repeat; color: var(--brown); font-family: system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; font-size: var(--fs-body); line-height: 1.7; display: flex; flex-direction: column; } h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; font-weight: 800; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: 1.125rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--orange-text); } a:hover { color: var(--orange-dark); } img { max-width: 100%; height: auto; } /* ---- 無障礙 ------------------------------------------------------------- 以下四段是從舊的 FOAS 政府外殼移植過來的慣例，換皮不能一起丟掉。 ------------------------------------------------------------------------- */ /* 只給讀屏軟體看的文字。用 clip 而非 display:none —— display:none 連讀屏都讀不到 */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 跳至主要內容。放在第一個子元素，不放在 header 裡—— 放進 header 的話，某個斷點把 header 隱藏掉就會連它一起消失 */ .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 100; padding: 12px 24px; background: var(--brown); color: #fff; font-weight: 700; text-decoration: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: transform .15s ease; } .skip-link:focus { transform: translate(-50%, 0); color: #fff; } /* WCAG 2.4.7 可見焦點。沿用原本已通過稽核的藍色框，但改用 :focus-visible—— 舊的 :focus 規則會在滑鼠點擊時也閃一個大藍框 */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* 不支援 :focus-visible 的舊瀏覽器退回 :focus，才不會完全沒有焦點提示 */ @supports not selector(:focus-visible) { :focus { outline: 3px solid var(--focus); outline-offset: 2px; } } main:focus { outline: none; } /* skip link 送焦點進來時不要畫框 */ /* ---- Alpine.js ---------------------------------------------------------- */ /* Alpine 是 defer 載入的，x-show="false" 的區塊在它接手之前會先閃一下。 x-cloak 由 Alpine 在初始化後移除，這條規則是它唯一的作用來源—— 少了它，「內政部驗證中」頁一載入就會同時看到等待與失敗兩種畫面。 */ [x-cloak] { display: none !important; } /* ---- 使用者偏好 -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Bootstrap 原本有印刷樣式，移除後要自己補：政府網站的結果頁會被列印，不該把導覽列與整片橘色漸層一起印出來 */ @media print { body { background: #fff !important; color: #000; } .site-header, .site-footer, .skip-link, .menu-btn, .btn, .cta { display: none !important; } main { padding: 0 !important; } .card, .success-card { box-shadow: none !important; border: 1px solid #999 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; } }