與下面的 Hero 都還在，這裡少幾個字不影響理解。 min-width:0 是必要的：flex 項目預設 min-width:auto，不加就不會縮。 */ .cnav .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnav-member, .cnav-toggle { flex: none; } /* 「學員專區 10/6 開放」→「學員專區」。省下的約 55px 剛好讓漢堡鈕留在第一列。日期在 membersOpen 打開後就不存在了。 */ .cnav-member .when { display: none; } } .cnav-links a { color: #dfeceb; font-size: 13.5px; padding: 3px 0; text-decoration: none; border-bottom: 2px solid transparent; } .cnav-links a:hover { color: #fff; } .cnav-links a.active { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); } /* 「學員專區」在手機上也必須常駐可見，所以它不在 .cnav-links 裡面。 */ .cnav-member { display: inline-flex; align-items: center; gap: 5px; background: var(--secondary); color: #fff !important; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap; } .cnav-member:hover { background: #24867a; text-decoration: none; } /* 學員專區還沒接通時（CAMP_CONFIG.membersOpen = false）， landing.js 會把 href 拿掉並掛上 aria-disabled。 */ .cnav-member[aria-disabled="true"] { background: #3f6b6b; color: #b8ccca !important; cursor: not-allowed; } a[aria-disabled="true"] { cursor: not-allowed; } a[aria-disabled="true"]:hover { text-decoration: none; } @media (min-width: 900px) { /* 桌機版一整列：品牌｜頁籤 …………… 學員專區。推開右側按鈕的是頁籤的 margin-right:auto，所以品牌不再需要 auto。 */ .cnav-in { padding: 10px 22px; gap: 18px; flex-wrap: nowrap; } .cnav .brand { margin-right: 0; } .cnav-toggle { display: none; } .cnav-links { flex-wrap: nowrap; gap: 16px; margin-right: auto; } .cnav-links a { font-size: 13.5px; white-space: nowrap; } } /* ---- 版面容器 ---- */ .wrapc { max-width: 1100px; margin: 0 auto; padding: 0 16px; } @media (min-width: 720px) { .wrapc { padding: 0 22px; } } /* ---- Hero ---- */ .chero { background: var(--bgDark); color: #fff; position: relative; overflow: hidden; padding: 30px 0 34px; } .chero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary)); } /* 視覺字 iPAS @ I-PASS：用 word-break 允許在 @ 後折行， 375px 時若不折會撐出水平捲動。 */ .chero .visual { font-size: clamp(26px, 8.6vw, 54px); font-weight: 800; letter-spacing: 2px; line-height: 1.15; color: var(--accent); margin: 0 0 10px; overflow-wrap: anywhere; } .chero .visual i { font-style: normal; color: #fff; opacity: .55; margin: 0 .12em; } .chero h1 { margin: 0 0 8px; font-size: clamp(22px, 6.4vw, 34px); letter-spacing: 1px; } .chero .sub { margin: 0; color: #cfe3e2; font-size: 14.5px; max-width: 46rem; } .chero .host { margin: 14px 0 0; font-size: 12.5px; color: #9db8b8; line-height: 1.8; } /* 主辦單位連結。Hero 與 footer 都是深色底，旁邊的說明字也是淺色，光靠顏色分不出哪裡可以點（Lighthouse 的 link-in-text-block 要求與周圍文字有 3:1 的色差，或者不只靠顏色區分），所以加底線。 */ .orglink { color: #cfe9e4; text-decoration: underline; text-underline-offset: 3px; } .orglink:hover { color: #fff; } .hbadges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; } .hbadges li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 20px; background: rgba(255, 255, 255, .12); color: #eaf5f4; } .hbadges .ico { color: var(--accent); } .hbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .btn { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; padding: 11px 20px; border-radius: 10px; text-decoration: none; border: 2px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: #d35f42; } .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn-ghost:hover { background: rgba(255, 255, 255, .12); } /* 報名連結還沒拿到時，按鈕降級成「即將開放」—— 刻意做成看得見但按不下去，而不是整顆消失，否則版面會在 Allen 填上網址的前後長得不一樣。 */ .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; } /* ---- 報名倒數橫幅 ---- */ .cd { background: var(--bgPrimaryLight); border-top: 1px solid #f0cdbf; border-bottom: 1px solid #f0cdbf; padding: 14px 0; } .cd-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .cd .lab { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--inkHot); font-size: 15px; } .cd .num { font-variant-numeric: tabular-nums; font-size: 17px; letter-spacing: .5px; } .cd .note { font-size: 12.5px; color: var(--inkMuted); } .cd details { width: 100%; } /* ---- 區塊 ---- */ .sec { padding: 34px 0 36px; scroll-margin-top: 64px; } @media (min-width: 900px) { .sec { scroll-margin-top: 58px; } } .sec > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 20px; letter-spacing: .5px; color: var(--textDark); } .sec > h2 .ico { color: var(--primary); width: 22px; height: 22px; } .sec > .lead { margin: 0 0 18px; color: var(--inkMuted); font-size: 13.5px; } .sec-alt { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* ---- 可收合說明 ---- 用原生 <details>/<summary>：關掉 JS 一樣展得開，這是驗收清單上的一條。 */ details.det { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; } details.det > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--inkLink); list-style: none; } details.det > summary::-webkit-details-marker { display: none; } details.det > summary .ico { width: 15px; height: 15px; transition: transform .18s; } details.det[open] > summary .ico { transform: rotate(180deg); } details.det .body { padding: 10px 2px 2px; font-size: 13.5px; color: var(--inkMuted); line-height: 1.85; } details.det .body p { margin: 0 0 8px; } details.det .body p:last-child { margin-bottom: 0; } details.det .body b { color: var(--textDark); } /* ---- 核心語彙：固本／補強 ---- 這兩個詞是整門課的骨架，出現在亮點、學習循環、90 分鐘色帶三個地方。做成小色塊而不是單純加粗，理由是它們常常出現在一段說明的開頭，加粗在 13.5px 的內文裡分量不夠，掃頁時會被整段字吃掉。顏色沿用色帶：固本＝綠、補強＝橘。對比度：--inkS2 對 #dff0ee 是 4.50，--inkHot 對 --bgPrimaryLight 是 4.60，兩個都過 AA；換色前先算過再改。 */ .term { display: inline-block; font-weight: 800; padding: 1px 9px; border-radius: 6px; margin-right: 3px; letter-spacing: .5px; } .term-core { background: #dff0ee; color: var(--inkS2); } .term-fix { background: var(--bgPrimaryLight); color: var(--inkHot); } /* ---- 三欄圖示卡 ---- */ .cards { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } } .card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; } .sec-alt .card { background: var(--bgSoft); } .card .cap { width: 44px; height: 44px; border-radius: 11px; margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--bgPrimaryLight); color: var(--primary); } .card .cap .ico { width: 24px; height: 24px; } .card h3 { margin: 0 0 6px; font-size: 16px; color: var(--textDark); } .card p { margin: 0; font-size: 13.5px; color: var(--inkMuted); line-height: 1.8; } .card details.det { margin-top: auto; } /* ---- 取證門檻 ---- */ .gauges { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .gauges { grid-template-columns: repeat(3, 1fr); } } .gauge { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px 14px; text-align: center; } .sec-alt .gauge { background: var(--bgSoft); } .gauge .dial { width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 8px solid var(--secondary); color: var(--textDark); } .gauge.g-avg .dial { border-color: var(--primary); } .gauge .dial b { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; } .gauge .dial span { font-size: 11px; color: var(--inkMuted); margin-top: 3px; } .gauge h3 { margin: 0 0 4px; font-size: 15px; } .gauge p { margin: 0; font-size: 12.5px; color: var(--inkMuted); } .gate-note { margin: 16px 0 0; padding: 12px 16px; background: var(--bgPrimaryLight); border-left: 6px solid var(--primary); border-radius: 8px; font-weight: 800; color: var(--inkHot); font-size: 15px; } /* ---- 學習循環 ---- */ .cycle { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 560px) { .cycle { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .cycle { grid-template-columns: repeat(5, 1fr); } } .step { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 12px; text-align: center; position: relative; } .sec-alt .step { background: var(--bgSoft); } .step .n { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--bgDark); color: #fff; font-size: 11px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .step .ico { width: 26px; height: 26px; color: var(--secondary); margin: 8px 0 6px; } .step b { display: block; font-size: 13.5px; } .step span { display: block; font-size: 12px; color: var(--inkMuted); margin-top: 2px; } /* ---- 課程進度時間軸 ---- 手機直向（左側一條線），900px 以上改橫向捲動的卡片列。 */ .tl { list-style: none; margin: 0; padding: 0; } .tl > li { position: relative; padding: 0 0 16px 26px; border-left: 2px solid var(--border); } .tl > li:last-child { border-left-color: transparent; padding-bottom: 0; } .tl > li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--secondary); border: 3px solid var(--bgSoft); } .sec-alt .tl > li::before { border-color: #fff; } .tl > li.exam::before { background: var(--primary); } .tl .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; } .tl .date { font-weight: 800; font-size: 14.5px; color: var(--textDark); font-variant-numeric: tabular-nums; } .tl .no { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 20px; background: var(--bgDark); color: #fff; } .tl .topic { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 4px; } .tl .topic .ico { color: var(--secondary); } .tl .q { font-size: 12px; color: var(--inkHot); font-weight: 700; } /* ---- 單元地圖 ---- */ .umap { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .umap { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .umap { grid-template-columns: repeat(3, 1fr); } } .unit { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .sec-alt .unit { background: var(--bgSoft); } .unit .top { display: flex; align-items: flex-start; gap: 10px; } .unit .top .ico { width: 26px; height: 26px; color: var(--secondary); margin-top: 2px; } .unit h3 { margin: 0; font-size: 15.5px; line-height: 1.5; } .unit .subj { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 5px; background: var(--bgPrimaryLight); color: var(--inkHot); } .unit .subj.s2 { background: #dff0ee; color: var(--inkS2); } /* 考情權重橫條：兩梯次各一條，寬度用 inline style 的 --w 帶進來。 */ .wbars { margin-top: 12px; display: grid; gap: 6px; } .wbar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--inkMuted); } .wbar .k { flex: none; width: 42px; font-weight: 700; } .wbar .track { flex: 1; height: 9px; background: #edeae6; border-radius: 5px; overflow: hidden; } .wbar .fill { display: block; height: 100%; width: var(--w); background: var(--secondary); border-radius: 5px; } .wbar.b2 .fill { background: var(--accent); } .wbar .v { flex: none; width: 34px; text-align: right; font-variant-numeric: tabular-nums; } /* ---- 每次 90 分鐘 ---- */ .mins { display: flex; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } /* 字色刻意用深色而不是白色。這五個色塊有三個是淺色（#7fb6ae／#c9c2b8／#e0a15f），白字壓上去只有 2.1–2.3 的對比度；把色塊壓暗到白字過得了 4.5 的話，整條色帶會變成一排灰褐色，失去「一眼看出哪一段最長」的作用。改用 #14262d（--bgDark 再壓深一階）之後，對五個色塊分別是 6.84／4.70／8.84／5.05／7.01，顏色一個都不用動。 */ .mins > div { padding: 12px 6px; text-align: center; color: #14262d; font-size: 12px; font-weight: 700; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; background: var(--c); } .mins > div span { display: block; font-weight: 400; font-size: 11px; } /* 顏色寫成 --c、比例寫成 HTML 裡的 --p，兩種版型共用同一份資料。 */ .m-fb { flex: 10; --c: #7fb6ae; } .m-core { flex: 40; --c: var(--secondary); } .m-br { flex: 5; --c: #c9c2b8; } .m-fix { flex: 25; --c: var(--primary); } .m-end { flex: 10; --c: #e0a15f; } /* 375px 時 5 欄各自只剩十幾 px，「休息 5 分」根本放不下，字會疊成一團。改成直向清單，但比例不能跟著不見——每一列底下補一條長度等於該段佔比的橫條，五條擺在一起還是看得出固本與補強佔掉多少。 */ @media (max-width: 559px) { .mins { flex-direction: column; gap: 10px; border: 0; background: transparent; } .mins > div { flex: none !important; background: transparent; color: var(--textDark); text-align: left; padding: 0; font-size: 13.5px; } .mins > div span { display: inline; margin-left: 7px; font-size: 12.5px; color: var(--inkMuted); opacity: 1; } .mins > div::after { content: ""; display: block; height: 10px; border-radius: 5px; margin-top: 5px; background: linear-gradient(90deg, var(--c) var(--p), #eae6e0 var(--p)); } } /* ---- 講師 ---- */ .teacher { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; } .sec-alt .teacher { background: var(--bgSoft); } .teacher .avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bgDark); color: var(--accent); } .teacher .avatar .ico { width: 34px; height: 34px; } .teacher .who { flex: 1 1 14rem; min-width: 0; } .teacher h3 { margin: 0 0 2px; font-size: 17px; } .teacher .org { margin: 0 0 8px; font-size: 13px; color: var(--inkMuted); } .teacher .certs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .teacher .bio { margin: 12px 0 0; font-size: 13px; color: var(--inkMuted); line-height: 1.85; } .teacher .biolink { font-weight: 700; } .teacher .biolink .ico { width: 13px; height: 13px; margin-left: 3px; } .teacher .certs li { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #dff0ee; color: var(--inkS2); } /* ---- 報名資訊 ---- */ .info { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 720px) { .info { grid-template-columns: repeat(2, 1fr); } } .info li { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .sec-alt .info li { background: var(--bgSoft); } .info .ico { width: 20px; height: 20px; color: var(--secondary); margin-top: 3px; } .info .k { display: block; font-size: 12px; font-weight: 700; color: var(--inkMuted); } .info .v { display: block; font-size: 14px; color: var(--textDark); overflow-wrap: anywhere; } .info .v a { overflow-wrap: anywhere; } /* ---- 常見問題 ---- */ .faq { display: grid; gap: 8px; } .faq details { background: #fff; border: 1px solid var(--border); border-radius: 10px; } .sec-alt .faq details { background: var(--bgSoft); } .faq summary { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 13px 15px; font-size: 14.5px; font-weight: 700; color: var(--textDark); list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ico { width: 16px; height: 16px; color: var(--secondary); transition: transform .18s; margin-left: auto; } .faq details[open] summary .ico { transform: rotate(180deg); } .faq .a { padding: 0 15px 14px; font-size: 13.5px; color: var(--inkMuted); line-height: 1.85; } /* ---- 微學程橫布條 ---- 圖是 1600×480（10:3）。HTML 上有 width/height，瀏覽器算得出 aspect-ratio，圖載入前就先把位置佔好，不會在捲動時把下面的內容往下推（CLS）。 */ .bannerlink { display: block; position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; line-height: 0; background: #eef5ec; } .bannerlink:hover { text-decoration: none; border-color: var(--secondary); } .bannerlink img { width: 100%; height: auto; display: block; } /* 「點圖放大」刻意放在圖片下方，不疊在圖上。第一版是右下角的半透明膠囊，375px 時整張圖只剩 343px 寬，那顆膠囊正好壓在「迎向雙軸轉型 IPASS」上——而那是這張圖的副標。做成獨立一列就不必為了避開內容去猜每個寬度下哪裡是空的。 */ .bannerlink .zoom { display: flex; align-items: center; justify-content: flex-end; gap: 5px; background: var(--bgDark); color: #dfeceb; font-size: 12.5px; font-weight: 700; line-height: 1.6; padding: 7px 12px; } .bannerlink:hover .zoom { color: #fff; } .bannerlink .zoom .ico { width: 14px; height: 14px; color: var(--accent); } .micro-note { margin: 12px 0 0; font-size: 12.5px; color: var(--inkMuted); } /* ---- 放大檢視 ---- 用原生 <dialog>：Esc 關閉、焦點鎖定、背景 inert 都是瀏覽器內建的，自己用 div 做要補一堆。不支援 <dialog> 的瀏覽器不會走到這裡—— landing.js 偵測不到就整個不攔截，連結退回「直接開圖」。 */ .lbox { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 92vh; overflow: visible; } .lbox::backdrop { background: rgba(12, 22, 26, .82); } .lbox img { display: block; width: 100%; height: auto; border-radius: 10px; } .lbox-x { position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; padding: 0; cursor: pointer; border: 2px solid #fff; border-radius: 50%; background: var(--bgDark); color: #fff; display: flex; align-items: center; justify-content: center; } .lbox-x .ico { width: 18px; height: 18px; } /* 手機上按鈕不能溢出到畫面外，會點不到 */ @media (max-width: 559px) { .lbox-x { top: 6px; right: 6px; } } /* ---- 個資告知 ---- */ .privacy { margin: 26px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-left: 6px solid var(--secondary); border-radius: 8px; font-size: 12.5px; color: var(--inkMuted); line-height: 1.85; } .privacy b { color: var(--textDark); } /* ---- Footer ---- */ .foot { margin-top: 40px; background: var(--bgDark); color: #cfe3e2; padding: 26px 0 30px; } .foot .orgs { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; font-weight: 700; color: #fff; } .foot .disc { margin: 14px 0 0; font-size: 12px; line-height: 1.9; color: #9db8b8; max-width: 52rem; } .foot .disc b { color: var(--accent); } /* Footer 的連結不能只靠顏色跟旁邊的說明文字區分——那兩者都是淺色，色差只有 1.3:1。加底線之後，看不出顏色差異的人也分得出哪裡可以點。 */ .foot .flink { color: #cfe9e4; text-decoration: underline; text-underline-offset: 3px; } .foot .flink:hover { color: #fff; } /* ---- 403 頁 ---- */ .oops { max-width: 34rem; margin: 0 auto; padding: 48px 20px; text-align: center; } .oops .cap { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--bgPrimaryLight); color: var(--primary); } .oops .cap .ico { width: 30px; height: 30px; } .oops h1 { margin: 0 0 10px; font-size: 21px; } .oops p { margin: 0 0 14px; font-size: 14px; color: var(--inkMuted); line-height: 1.9; } .oops .hbtns { justify-content: center; } .oops .btn-primary { color: #fff; } .oops .btn-line { background: #fff; color: var(--textDark); border-color: var(--border); } /* ---- 列印 ---- */ @media print { .cnav, .cd, .hbtns { display: none !important; } details { open: true; } body { background: #fff; } }

/* ============================================================ iPAS 淨零碳考證成功營｜公開廣宣頁專用樣式 ------------------------------------------------------------ 色票一律沿用 course.css 的 CSS 變數，不另外定義顏色，這樣五個課程網站換色時只要改一個地方。本檔只服務 index.html 與 403.html；學員專區的樣式另開檔案。排版策略：手機優先。所有 @media 都是 min-width，先寫 375px 的單欄版，再往上加欄。這樣任何漏寫的規則退化成單欄，而不是在手機上爆出水平捲動。 ============================================================ */ /* ---- 文字用的深色變體 ---- course.css 的 --primary／--secondary／--textMuted 是為色塊與大字設計的，拿來當 11–13px 的小字時，對比度只有 2.6–4.3，達不到 WCAG AA 要求的 4.5。這裡各留一個「同色系、壓暗到剛好過 4.5」的變體，專門給小字用；色塊、按鈕、圖示仍然用原本的 --primary／--secondary，色調看起來是同一套。數值不是憑感覺調的，是對 #ffffff／#fdfaf6（--bgSoft）／#fbe7e0（--bgPrimaryLight）三種底色都算過對比度取的最小壓暗量： --inkMuted 對三種底色 5.39／5.18／4.52 --inkLink 對三種底色 5.44／5.23／4.56 --inkHot 對三種底色 5.48／5.27／4.60 --inkS2 對 #dff0ee 4.50 改動任何一個顏色之後，要重跑 Lighthouse 的 color-contrast 稽核。 */ :root { --inkMuted: #4f7073; /* ← --textMuted #587D80 */ --inkLink: #1f766b; /* ← --secondary #2A9D8F */ --inkHot: #a6503a; /* ← --primary #E76F51 */ --inkS2: #1e786d; /* ← 考科二徽章的字色 */ } /* course.css 的 a{color:var(--secondary)} 對淺色底只有 3.19，內文連結一律換成 --inkLink（5.2 以上）。按鈕、導覽列、footer 各有自己的配色，排除在外。註：signupUrl 還沒填時，「報名方式」那個連結帶著 aria-disabled， axe 會跳過不驗；一填上網址就變成可點的連結、開始被驗—— 所以這條是在 Allen 填上表單網址那天才浮出來的，不是新寫的錯。 */ .sec a:not(.btn):not(.bannerlink):not([class*="cnav"]), .cd a:not(.btn) { color: var(--inkLink); } /* ---- 圖示 ---- sprite 內嵌在頁面開頭，所以是同文件參照。刻意不用 /assets/icons/icons.svg#name 的外部參照：Safari 對外部的支援不可靠，一旦失效整頁圖示全空，而本頁的設計是圖示優先。 */ .ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; } .ico-lg { width: 30px; height: 30px; flex: none; } /* ---- 頂部導覽 ---- */ .cnav { position: sticky; top: 0; z-index: 60; background: var(--bgDark); color: #fff; box-shadow: 0 2px 10px rgba(38, 70, 83, .22); } /* 品牌、頁籤、學員專區按鈕、漢堡鈕全部住在這一個容器裡，容器的寬度與左右邊距要跟 .wrapc 完全一致，頁籤才會跟內文對齊。 */ .cnav-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 9px 16px; } .cnav .brand { font-weight: 800; font-size: 14.5px; letter-spacing: .5px; margin-right: auto; } .cnav .brand small { display: block; font-weight: 400; font-size: 10.5px; color: #9db8b8; letter-spacing: 0; } .cnav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid #47707c; border-radius: 8px; color: #dfeceb; cursor: pointer; } .cnav-toggle .ico { width: 20px; height: 20px; } /* 沒有 JS 時選單展不開，所以「手機版預設收合」這件事只在有 JS 時成立。 .js 是 index.html 裡那支內嵌 script 設的——一定要在，不能等 defer 的 landing.js：那會先畫出展開的選單再收掉，整頁往上跳。 */ .cnav-links { display: flex; flex-wrap: wrap; gap: 4px 14px; } @media (max-width: 899px) { /* 手機版第一列：品牌 ………… 學員專區漢堡；頁籤自己佔滿第二列。 DOM 順序是品牌→漢堡→頁籤→學員專區（那個順序是為了桌機版排出品牌→頁籤→……→學員專區），所以這裡要用 order 把兩顆按鈕換回來。 */ .cnav-member { order: 1; } .cnav-toggle { order: 2; } .cnav-links { order: 3; flex-basis: 100%; padding-bottom: 2px; } .js .cnav-links:not(.open) { display: none; } } /* 導覽列的左右邊距必須跟 .wrapc 用同一個斷點，否則 720–899px 之間品牌會比內文往左 6px——那種差距不盯著看不出來，但整排東西就是對不齊。 */ @media (min-width: 720px) { .cnav-in { padding: 9px 22px; } } /* 375px 時第一列放不下「品牌＋學員專區＋漢堡」——漢堡會被擠到第二列，看起來像是多了一條空白列。把品牌的標語收起來、按鈕縮一號就擠得下。標語在下面的 Hero 還會再出現一次，不會消失。（按鈕字數在 membersOpen 打開後會從「學員專區 10/6 開放」縮短成「學員專區」，那時空間會更寬鬆，但這條規則留著也不礙事。） */ @media (max-width: 559px) { .cnav .brand { font-size: 13.5px; } .cnav .brand small { display: none; } .cnav-member { font-size: 12px; padding: 6px 10px; } .cnav-in { gap: 8px 10px; } /* 375px 還是差十幾 px。讓品牌成為唯一可收縮的那一個—— 兩顆按鈕都不能截字（截了就看不懂），而課程全名在與下面的 Hero 都還在，這裡少幾個字不影響理解。 min-width:0 是必要的：flex 項目預設 min-width:auto，不加就不會縮。 */ .cnav .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnav-member, .cnav-toggle { flex: none; } /* 「學員專區 10/6 開放」→「學員專區」。省下的約 55px 剛好讓漢堡鈕留在第一列。日期在 membersOpen 打開後就不存在了。 */ .cnav-member .when { display: none; } } .cnav-links a { color: #dfeceb; font-size: 13.5px; padding: 3px 0; text-decoration: none; border-bottom: 2px solid transparent; } .cnav-links a:hover { color: #fff; } .cnav-links a.active { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); } /* 「學員專區」在手機上也必須常駐可見，所以它不在 .cnav-links 裡面。 */ .cnav-member { display: inline-flex; align-items: center; gap: 5px; background: var(--secondary); color: #fff !important; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap; } .cnav-member:hover { background: #24867a; text-decoration: none; } /* 學員專區還沒接通時（CAMP_CONFIG.membersOpen = false）， landing.js 會把 href 拿掉並掛上 aria-disabled。 */ .cnav-member[aria-disabled="true"] { background: #3f6b6b; color: #b8ccca !important; cursor: not-allowed; } a[aria-disabled="true"] { cursor: not-allowed; } a[aria-disabled="true"]:hover { text-decoration: none; } @media (min-width: 900px) { /* 桌機版一整列：品牌｜頁籤 …………… 學員專區。推開右側按鈕的是頁籤的 margin-right:auto，所以品牌不再需要 auto。 */ .cnav-in { padding: 10px 22px; gap: 18px; flex-wrap: nowrap; } .cnav .brand { margin-right: 0; } .cnav-toggle { display: none; } .cnav-links { flex-wrap: nowrap; gap: 16px; margin-right: auto; } .cnav-links a { font-size: 13.5px; white-space: nowrap; } } /* ---- 版面容器 ---- */ .wrapc { max-width: 1100px; margin: 0 auto; padding: 0 16px; } @media (min-width: 720px) { .wrapc { padding: 0 22px; } } /* ---- Hero ---- */ .chero { background: var(--bgDark); color: #fff; position: relative; overflow: hidden; padding: 30px 0 34px; } .chero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary)); } /* 視覺字 iPAS @ I-PASS：用 word-break 允許在 @ 後折行， 375px 時若不折會撐出水平捲動。 */ .chero .visual { font-size: clamp(26px, 8.6vw, 54px); font-weight: 800; letter-spacing: 2px; line-height: 1.15; color: var(--accent); margin: 0 0 10px; overflow-wrap: anywhere; } .chero .visual i { font-style: normal; color: #fff; opacity: .55; margin: 0 .12em; } .chero h1 { margin: 0 0 8px; font-size: clamp(22px, 6.4vw, 34px); letter-spacing: 1px; } .chero .sub { margin: 0; color: #cfe3e2; font-size: 14.5px; max-width: 46rem; } .chero .host { margin: 14px 0 0; font-size: 12.5px; color: #9db8b8; line-height: 1.8; } /* 主辦單位連結。Hero 與 footer 都是深色底，旁邊的說明字也是淺色，光靠顏色分不出哪裡可以點（Lighthouse 的 link-in-text-block 要求與周圍文字有 3:1 的色差，或者不只靠顏色區分），所以加底線。 */ .orglink { color: #cfe9e4; text-decoration: underline; text-underline-offset: 3px; } .orglink:hover { color: #fff; } .hbadges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; } .hbadges li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 20px; background: rgba(255, 255, 255, .12); color: #eaf5f4; } .hbadges .ico { color: var(--accent); } .hbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .btn { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; padding: 11px 20px; border-radius: 10px; text-decoration: none; border: 2px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: #d35f42; } .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn-ghost:hover { background: rgba(255, 255, 255, .12); } /* 報名連結還沒拿到時，按鈕降級成「即將開放」—— 刻意做成看得見但按不下去，而不是整顆消失，否則版面會在 Allen 填上網址的前後長得不一樣。 */ .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; } /* ---- 報名倒數橫幅 ---- */ .cd { background: var(--bgPrimaryLight); border-top: 1px solid #f0cdbf; border-bottom: 1px solid #f0cdbf; padding: 14px 0; } .cd-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .cd .lab { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--inkHot); font-size: 15px; } .cd .num { font-variant-numeric: tabular-nums; font-size: 17px; letter-spacing: .5px; } .cd .note { font-size: 12.5px; color: var(--inkMuted); } .cd details { width: 100%; } /* ---- 區塊 ---- */ .sec { padding: 34px 0 36px; scroll-margin-top: 64px; } @media (min-width: 900px) { .sec { scroll-margin-top: 58px; } } .sec > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 20px; letter-spacing: .5px; color: var(--textDark); } .sec > h2 .ico { color: var(--primary); width: 22px; height: 22px; } .sec > .lead { margin: 0 0 18px; color: var(--inkMuted); font-size: 13.5px; } .sec-alt { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* ---- 可收合說明 ---- 用原生 <details>/<summary>：關掉 JS 一樣展得開，這是驗收清單上的一條。 */ details.det { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; } details.det > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--inkLink); list-style: none; } details.det > summary::-webkit-details-marker { display: none; } details.det > summary .ico { width: 15px; height: 15px; transition: transform .18s; } details.det[open] > summary .ico { transform: rotate(180deg); } details.det .body { padding: 10px 2px 2px; font-size: 13.5px; color: var(--inkMuted); line-height: 1.85; } details.det .body p { margin: 0 0 8px; } details.det .body p:last-child { margin-bottom: 0; } details.det .body b { color: var(--textDark); } /* ---- 核心語彙：固本／補強 ---- 這兩個詞是整門課的骨架，出現在亮點、學習循環、90 分鐘色帶三個地方。做成小色塊而不是單純加粗，理由是它們常常出現在一段說明的開頭，加粗在 13.5px 的內文裡分量不夠，掃頁時會被整段字吃掉。顏色沿用色帶：固本＝綠、補強＝橘。對比度：--inkS2 對 #dff0ee 是 4.50，--inkHot 對 --bgPrimaryLight 是 4.60，兩個都過 AA；換色前先算過再改。 */ .term { display: inline-block; font-weight: 800; padding: 1px 9px; border-radius: 6px; margin-right: 3px; letter-spacing: .5px; } .term-core { background: #dff0ee; color: var(--inkS2); } .term-fix { background: var(--bgPrimaryLight); color: var(--inkHot); } /* ---- 三欄圖示卡 ---- */ .cards { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } } .card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; } .sec-alt .card { background: var(--bgSoft); } .card .cap { width: 44px; height: 44px; border-radius: 11px; margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--bgPrimaryLight); color: var(--primary); } .card .cap .ico { width: 24px; height: 24px; } .card h3 { margin: 0 0 6px; font-size: 16px; color: var(--textDark); } .card p { margin: 0; font-size: 13.5px; color: var(--inkMuted); line-height: 1.8; } .card details.det { margin-top: auto; } /* ---- 取證門檻 ---- */ .gauges { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .gauges { grid-template-columns: repeat(3, 1fr); } } .gauge { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px 14px; text-align: center; } .sec-alt .gauge { background: var(--bgSoft); } .gauge .dial { width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 8px solid var(--secondary); color: var(--textDark); } .gauge.g-avg .dial { border-color: var(--primary); } .gauge .dial b { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; } .gauge .dial span { font-size: 11px; color: var(--inkMuted); margin-top: 3px; } .gauge h3 { margin: 0 0 4px; font-size: 15px; } .gauge p { margin: 0; font-size: 12.5px; color: var(--inkMuted); } .gate-note { margin: 16px 0 0; padding: 12px 16px; background: var(--bgPrimaryLight); border-left: 6px solid var(--primary); border-radius: 8px; font-weight: 800; color: var(--inkHot); font-size: 15px; } /* ---- 學習循環 ---- */ .cycle { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 560px) { .cycle { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .cycle { grid-template-columns: repeat(5, 1fr); } } .step { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 12px; text-align: center; position: relative; } .sec-alt .step { background: var(--bgSoft); } .step .n { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--bgDark); color: #fff; font-size: 11px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .step .ico { width: 26px; height: 26px; color: var(--secondary); margin: 8px 0 6px; } .step b { display: block; font-size: 13.5px; } .step span { display: block; font-size: 12px; color: var(--inkMuted); margin-top: 2px; } /* ---- 課程進度時間軸 ---- 手機直向（左側一條線），900px 以上改橫向捲動的卡片列。 */ .tl { list-style: none; margin: 0; padding: 0; } .tl > li { position: relative; padding: 0 0 16px 26px; border-left: 2px solid var(--border); } .tl > li:last-child { border-left-color: transparent; padding-bottom: 0; } .tl > li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--secondary); border: 3px solid var(--bgSoft); } .sec-alt .tl > li::before { border-color: #fff; } .tl > li.exam::before { background: var(--primary); } .tl .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; } .tl .date { font-weight: 800; font-size: 14.5px; color: var(--textDark); font-variant-numeric: tabular-nums; } .tl .no { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 20px; background: var(--bgDark); color: #fff; } .tl .topic { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 4px; } .tl .topic .ico { color: var(--secondary); } .tl .q { font-size: 12px; color: var(--inkHot); font-weight: 700; } /* ---- 單元地圖 ---- */ .umap { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .umap { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .umap { grid-template-columns: repeat(3, 1fr); } } .unit { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .sec-alt .unit { background: var(--bgSoft); } .unit .top { display: flex; align-items: flex-start; gap: 10px; } .unit .top .ico { width: 26px; height: 26px; color: var(--secondary); margin-top: 2px; } .unit h3 { margin: 0; font-size: 15.5px; line-height: 1.5; } .unit .subj { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 5px; background: var(--bgPrimaryLight); color: var(--inkHot); } .unit .subj.s2 { background: #dff0ee; color: var(--inkS2); } /* 考情權重橫條：兩梯次各一條，寬度用 inline style 的 --w 帶進來。 */ .wbars { margin-top: 12px; display: grid; gap: 6px; } .wbar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--inkMuted); } .wbar .k { flex: none; width: 42px; font-weight: 700; } .wbar .track { flex: 1; height: 9px; background: #edeae6; border-radius: 5px; overflow: hidden; } .wbar .fill { display: block; height: 100%; width: var(--w); background: var(--secondary); border-radius: 5px; } .wbar.b2 .fill { background: var(--accent); } .wbar .v { flex: none; width: 34px; text-align: right; font-variant-numeric: tabular-nums; } /* ---- 每次 90 分鐘 ---- */ .mins { display: flex; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } /* 字色刻意用深色而不是白色。這五個色塊有三個是淺色（#7fb6ae／#c9c2b8／#e0a15f），白字壓上去只有 2.1–2.3 的對比度；把色塊壓暗到白字過得了 4.5 的話，整條色帶會變成一排灰褐色，失去「一眼看出哪一段最長」的作用。改用 #14262d（--bgDark 再壓深一階）之後，對五個色塊分別是 6.84／4.70／8.84／5.05／7.01，顏色一個都不用動。 */ .mins > div { padding: 12px 6px; text-align: center; color: #14262d; font-size: 12px; font-weight: 700; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; background: var(--c); } .mins > div span { display: block; font-weight: 400; font-size: 11px; } /* 顏色寫成 --c、比例寫成 HTML 裡的 --p，兩種版型共用同一份資料。 */ .m-fb { flex: 10; --c: #7fb6ae; } .m-core { flex: 40; --c: var(--secondary); } .m-br { flex: 5; --c: #c9c2b8; } .m-fix { flex: 25; --c: var(--primary); } .m-end { flex: 10; --c: #e0a15f; } /* 375px 時 5 欄各自只剩十幾 px，「休息 5 分」根本放不下，字會疊成一團。改成直向清單，但比例不能跟著不見——每一列底下補一條長度等於該段佔比的橫條，五條擺在一起還是看得出固本與補強佔掉多少。 */ @media (max-width: 559px) { .mins { flex-direction: column; gap: 10px; border: 0; background: transparent; } .mins > div { flex: none !important; background: transparent; color: var(--textDark); text-align: left; padding: 0; font-size: 13.5px; } .mins > div span { display: inline; margin-left: 7px; font-size: 12.5px; color: var(--inkMuted); opacity: 1; } .mins > div::after { content: ""; display: block; height: 10px; border-radius: 5px; margin-top: 5px; background: linear-gradient(90deg, var(--c) var(--p), #eae6e0 var(--p)); } } /* ---- 講師 ---- */ .teacher { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; } .sec-alt .teacher { background: var(--bgSoft); } .teacher .avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bgDark); color: var(--accent); } .teacher .avatar .ico { width: 34px; height: 34px; } .teacher .who { flex: 1 1 14rem; min-width: 0; } .teacher h3 { margin: 0 0 2px; font-size: 17px; } .teacher .org { margin: 0 0 8px; font-size: 13px; color: var(--inkMuted); } .teacher .certs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .teacher .bio { margin: 12px 0 0; font-size: 13px; color: var(--inkMuted); line-height: 1.85; } .teacher .biolink { font-weight: 700; } .teacher .biolink .ico { width: 13px; height: 13px; margin-left: 3px; } .teacher .certs li { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #dff0ee; color: var(--inkS2); } /* ---- 報名資訊 ---- */ .info { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 720px) { .info { grid-template-columns: repeat(2, 1fr); } } .info li { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .sec-alt .info li { background: var(--bgSoft); } .info .ico { width: 20px; height: 20px; color: var(--secondary); margin-top: 3px; } .info .k { display: block; font-size: 12px; font-weight: 700; color: var(--inkMuted); } .info .v { display: block; font-size: 14px; color: var(--textDark); overflow-wrap: anywhere; } .info .v a { overflow-wrap: anywhere; } /* ---- 常見問題 ---- */ .faq { display: grid; gap: 8px; } .faq details { background: #fff; border: 1px solid var(--border); border-radius: 10px; } .sec-alt .faq details { background: var(--bgSoft); } .faq summary { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 13px 15px; font-size: 14.5px; font-weight: 700; color: var(--textDark); list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ico { width: 16px; height: 16px; color: var(--secondary); transition: transform .18s; margin-left: auto; } .faq details[open] summary .ico { transform: rotate(180deg); } .faq .a { padding: 0 15px 14px; font-size: 13.5px; color: var(--inkMuted); line-height: 1.85; } /* ---- 微學程橫布條 ---- 圖是 1600×480（10:3）。HTML 上有 width/height，瀏覽器算得出 aspect-ratio，圖載入前就先把位置佔好，不會在捲動時把下面的內容往下推（CLS）。 */ .bannerlink { display: block; position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; line-height: 0; background: #eef5ec; } .bannerlink:hover { text-decoration: none; border-color: var(--secondary); } .bannerlink img { width: 100%; height: auto; display: block; } /* 「點圖放大」刻意放在圖片下方，不疊在圖上。第一版是右下角的半透明膠囊，375px 時整張圖只剩 343px 寬，那顆膠囊正好壓在「迎向雙軸轉型 IPASS」上——而那是這張圖的副標。做成獨立一列就不必為了避開內容去猜每個寬度下哪裡是空的。 */ .bannerlink .zoom { display: flex; align-items: center; justify-content: flex-end; gap: 5px; background: var(--bgDark); color: #dfeceb; font-size: 12.5px; font-weight: 700; line-height: 1.6; padding: 7px 12px; } .bannerlink:hover .zoom { color: #fff; } .bannerlink .zoom .ico { width: 14px; height: 14px; color: var(--accent); } .micro-note { margin: 12px 0 0; font-size: 12.5px; color: var(--inkMuted); } /* ---- 放大檢視 ---- 用原生 <dialog>：Esc 關閉、焦點鎖定、背景 inert 都是瀏覽器內建的，自己用 div 做要補一堆。不支援 <dialog> 的瀏覽器不會走到這裡—— landing.js 偵測不到就整個不攔截，連結退回「直接開圖」。 */ .lbox { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 92vh; overflow: visible; } .lbox::backdrop { background: rgba(12, 22, 26, .82); } .lbox img { display: block; width: 100%; height: auto; border-radius: 10px; } .lbox-x { position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; padding: 0; cursor: pointer; border: 2px solid #fff; border-radius: 50%; background: var(--bgDark); color: #fff; display: flex; align-items: center; justify-content: center; } .lbox-x .ico { width: 18px; height: 18px; } /* 手機上按鈕不能溢出到畫面外，會點不到 */ @media (max-width: 559px) { .lbox-x { top: 6px; right: 6px; } } /* ---- 個資告知 ---- */ .privacy { margin: 26px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-left: 6px solid var(--secondary); border-radius: 8px; font-size: 12.5px; color: var(--inkMuted); line-height: 1.85; } .privacy b { color: var(--textDark); } /* ---- Footer ---- */ .foot { margin-top: 40px; background: var(--bgDark); color: #cfe3e2; padding: 26px 0 30px; } .foot .orgs { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; font-weight: 700; color: #fff; } .foot .disc { margin: 14px 0 0; font-size: 12px; line-height: 1.9; color: #9db8b8; max-width: 52rem; } .foot .disc b { color: var(--accent); } /* Footer 的連結不能只靠顏色跟旁邊的說明文字區分——那兩者都是淺色，色差只有 1.3:1。加底線之後，看不出顏色差異的人也分得出哪裡可以點。 */ .foot .flink { color: #cfe9e4; text-decoration: underline; text-underline-offset: 3px; } .foot .flink:hover { color: #fff; } /* ---- 403 頁 ---- */ .oops { max-width: 34rem; margin: 0 auto; padding: 48px 20px; text-align: center; } .oops .cap { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--bgPrimaryLight); color: var(--primary); } .oops .cap .ico { width: 30px; height: 30px; } .oops h1 { margin: 0 0 10px; font-size: 21px; } .oops p { margin: 0 0 14px; font-size: 14px; color: var(--inkMuted); line-height: 1.9; } .oops .hbtns { justify-content: center; } .oops .btn-primary { color: #fff; } .oops .btn-line { background: #fff; color: var(--textDark); border-color: var(--border); } /* ---- 列印 ---- */ @media print { .cnav, .cd, .hbtns { display: none !important; } details { open: true; } body { background: #fff; } }