/* ═══════════════════════════════════════════════════════════════ 版型 B：工業／瑞士排版硬派 Swiss Industrial Print ─────────────────────────────────────────────────────────────── 所有規則都關在 :root[data-skin="ind"] 底下，紙感版（site.css / pages.css / home.css）一行都不動，按頁首「工業版」即時對照。 基底只有一種：未漂白的文件紙。不做深色模式——瑞士印刷的身分 來自紙與碳墨的關係，換成暗底就不是同一套東西了，所以進工業版 時 layout.js 會把 data-theme 釘在 light 並收掉深淺鈕。 兩色系統：碳黑 ＋ 航空警示紅。原本五個欄目色收斂成 · 工具評比 / 新聞觀點 → 紅（需要注目與警示的兩欄） · 其餘欄目 → 碳黑 欄目身分改由標籤文字與框線粗細承擔，不再靠色相分辨。 這支檔案最後載入，所以同權重的 token 覆寫靠來源順序取勝。 ═══════════════════════════════════════════════════════════════ */ /* ═══ 1. Token 覆寫 ═════════════════════════════════════════════ */ /* 配色經 WCAG 2.1 實算校正（2026-08-27）：原本紙面偏灰（#E8E6DF）、 ink-3 偏亮（#6E6C66），小字說明與紅字落在凹面時只有 3.65～4.20:1， 五個組合未達 AA。提高紙面明度、壓深 ink-3 與紅，全部拉到 5.07:1 以上。 */ :root[data-skin="ind"] { --ground: #F1EFE7; /* 未漂白文件紙 */ --surface: #FBFAF5; /* 卡面，比紙面亮一階 */ --surface-alt: #E3E0D6; /* 凹面：表頭、次要區塊 */ --ink: #0A0A0A; /* 碳墨 */ --ink-2: #35342F; --ink-3: #57554E; /* 小字說明專用，不能再亮 */ --line: #0A0A0A; /* 結構線一律全黑，這是硬派的骨架 */ --line-soft: #A9A69C; /* 次級髮絲線 */ --flag: #B81212; --flag-soft: #F7E4E4; --accent: #B81212; /* 航空警示紅，全站唯一強調色 */ --bright: #B81212; --on-bright:#FBFAF5; --tint: #E3E0D6; --glow: transparent; /* 欄目色：收斂成碳黑＋紅 */ --c1-b:#0A0A0A; --c1-i:#0A0A0A; --c1-t:#E3E0D6; /* 知識庫 */ --c2-b:#B81212; --c2-i:#B81212; --c2-t:#F7E4E4; /* 工具評比 · 紅 */ --c3-b:#0A0A0A; --c3-i:#0A0A0A; --c3-t:#E3E0D6; /* 產業數據 */ --c4-b:#B81212; --c4-i:#B81212; --c4-t:#F7E4E4; /* 新聞觀點 · 紅 */ --c5-b:#0A0A0A; --c5-i:#0A0A0A; --c5-t:#E3E0D6; /* 編輯部 */ --c6-b:#0A0A0A; --c6-i:#0A0A0A; --c6-t:#E3E0D6; /* 系統 */ /* 幾何：直角，沒有例外 */ --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0; /* 陰影：靜止時完全沒有，深度只由框線決定； 互動時才給硬邊位移，模擬印刷疊版錯位 */ --lift: none; --lift-2: 5px 5px 0 var(--ink); --grain-blend: multiply; --grain-alpha: .03; --mono: "JetBrains Mono", "IBM Plex Mono", "Cascadia Mono", ui-monospace, Consolas, "Courier New", monospace; --display: "Helvetica Neue", "Arial Black", Inter, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; } /* ═══ 2. 全域幾何與質感 ═════════════════════════════════════════ */ /* 圓角全歸零。用 :where() 讓這條權重為 0，後面任何一條想開特例都蓋得掉 */ :root[data-skin="ind"] :where(*) { border-radius: 0; } :root[data-skin="ind"] body { font-size: 17px; line-height: 1.8; letter-spacing: 0; /* 網點整片移除。文章區沒有自己的底色，任何畫在 body 上的紋理都會 整片透到文字後面，怎麼調淡都還是「撲滿」。工業感靠結構撐——直角、 外露格線、警示紅、重字重——不需要一層噪訊來證明自己是印刷品。 只留直向製圖導線：它落在字與字之間，不與行距同方向，不干擾閱讀。 刻意保留的紋理都是有意義的那幾處：hero 警示斜紋、數據卡的斜線帶、 評分格的「不適用」斜線。 */ background-image: repeating-linear-gradient(90deg, rgba(10,10,10,.02) 0 1px, transparent 1px 120px); } /* site.css 的 body::after 是 position:fixed ＋ mix-blend-mode:multiply、 z-index:60 的滿版覆蓋層——一張釘在視窗上的網版壓在所有文字之上。 捲動時內容在動、網點不動，規則點陣與字的節奏互打會產生視覺爬行， 這才是「看了很躁」的來源，不是密度不夠低（紙感版用碎形雜訊、不規則， 所以同樣結構不明顯）。工業版直接收掉這一層。 */ :root[data-skin="ind"] body::after { display: none; } :root[data-skin="ind"] ::selection { background: var(--accent); color: var(--on-bright); } :root[data-skin="ind"] :where(a, button, input):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ═══ 3. 字體架構 ═══════════════════════════════════════════════ 巨觀：900 字重、負字距、壓縮行高，讓字組成建築量體 微觀：等寬、大字距、全大寫（中文不受 uppercase 影響，只作用在拉丁與數字） ═══════════════════════════════════════════════════════════════ */ :root[data-skin="ind"] h1, :root[data-skin="ind"] h2, :root[data-skin="ind"] h3, :root[data-skin="ind"] h4 { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; text-wrap: balance; } /* 微觀排版：中繼資料、單位、座標一律等寬。 界線是「標籤 vs 句子」——標籤（日期、筆數、代碼、欄目名）留等寬大寫， 整句中文一律不進這份清單：等寬字對中文不生效會掉回黑體， 大寫對中文是空操作，寬字距只會把中文拉散，三個都是純虧。 */ :root[data-skin="ind"] .meta time, :root[data-skin="ind"] .crumb, :root[data-skin="ind"] .brand .en, :root[data-skin="ind"] .hub .cnt, :root[data-skin="ind"] .pagehead .eyebrow, :root[data-skin="ind"] .pagehead .stats, :root[data-skin="ind"] .article-meta, :root[data-skin="ind"] .post .foot, :root[data-skin="ind"] .upd .when, :root[data-skin="ind"] .evergreen .num, :root[data-skin="ind"] .evergreen .rt, :root[data-skin="ind"] .kind, :root[data-skin="ind"] .pill, :root[data-skin="ind"] .cond, :root[data-skin="ind"] .tag, :root[data-skin="ind"] .badge, :root[data-skin="ind"] .correction .when, :root[data-skin="ind"] .vcard .site, :root[data-skin="ind"] .toolhead .url, :root[data-skin="ind"] .sources .accessed, :root[data-skin="ind"] .termlist .en, :root[data-skin="ind"] .termdef .en, :root[data-skin="ind"] .termdef .label, :root[data-skin="ind"] .verdict .label, :root[data-skin="ind"] .results .path, :root[data-skin="ind"] footer h4, :root[data-skin="ind"] thead th, :root[data-skin="ind"] .rubric th, :root[data-skin="ind"] .specs th, :root[data-skin="ind"] .sourcebox dt { font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; } /* 數字一律表格對齊 */ :root[data-skin="ind"] :where(td, th, .num, .val, .pt, .cnt, .c, .big) { font-variant-numeric: tabular-nums; } /* ═══ 4. 頁首 ═══════════════════════════════════════════════════ */ :root[data-skin="ind"] header { background: var(--ground); backdrop-filter: none; border-bottom: 2px solid var(--ink); } :root[data-skin="ind"] header .wrap { height: 68px; gap: 24px; } :root[data-skin="ind"] .brand .zh { font-family: var(--display); font-weight: 900; font-size: 21px; letter-spacing: -.03em; } :root[data-skin="ind"] .brand .en { font-size: 11px; letter-spacing: .2em; color: var(--ink-2); } /* 商標符號當結構性圖形用，不是法律文字 */ :root[data-skin="ind"] .brand .en::after { content: " ®"; color: var(--accent); } :root[data-skin="ind"] nav { gap: 0; } :root[data-skin="ind"] nav a { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; padding: 8px 14px; color: var(--ink-2); border-left: 1px solid var(--line-soft); } :root[data-skin="ind"] nav a:first-of-type { border-left: 0; } :root[data-skin="ind"] nav a:hover { background: var(--ink); color: var(--ground); } :root[data-skin="ind"] nav a[aria-current] { background: var(--accent); color: var(--on-bright); font-weight: 700; } /* 下拉選單。上面那條 `nav a { border-left }` 是給橫排欄目用的分隔線， 洩漏到縱向的選單裡會變成每一列左邊插一根豎線，所以整組拆掉重畫。 分隔線改掛在 .navdrop 外框上，父項本身才不會多一根。 */ :root[data-skin="ind"] .navdrop { border-left: 1px solid var(--line-soft); } :root[data-skin="ind"] .navdrop-top { border-left: 0; } :root[data-skin="ind"] .navdrop-menu { padding: 0; gap: 0; border: 2px solid var(--ink); border-radius: 0; background: var(--ground); box-shadow: 6px 6px 0 var(--ink); } :root[data-skin="ind"] .navdrop-menu a { border-left: 0; border-radius: 0; padding: 10px 13px; border-top: 1px solid var(--line-soft); } :root[data-skin="ind"] .navdrop-menu.wide .navdrop-cols { gap: 0; } :root[data-skin="ind"] .navdrop-menu.wide .navdrop-cols a:nth-child(2) { border-top: 0; } :root[data-skin="ind"] .navdrop-menu.wide .navdrop-cols a:nth-child(even) { border-left: 1px solid var(--line-soft); } :root[data-skin="ind"] .navdrop-menu a:first-of-type { border-top: 0; } :root[data-skin="ind"] .navdrop-menu a.all { border-top: 2px solid var(--ink); margin-top: 0; } :root[data-skin="ind"] .navdrop-menu a .dot { border-radius: 0; } /* 版型切換鈕 */ .skin-toggle { flex: none; margin-left: 10px; font: inherit; font-size: 12px; line-height: 1; padding: 10px 14px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); letter-spacing: .04em; white-space: nowrap; transition: color .2s ease, border-color .2s ease, background .2s ease; } .skin-toggle:hover { color: var(--accent); border-color: var(--bright); } .skin-toggle .to-paper { display: none; } :root[data-skin="ind"] .skin-toggle .to-ind { display: none; } :root[data-skin="ind"] .skin-toggle .to-paper { display: inline; } :root[data-skin="ind"] .skin-toggle { font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; border: 2px solid var(--ink); background: var(--accent); color: var(--on-bright); font-weight: 700; } :root[data-skin="ind"] .skin-toggle:hover { background: var(--ink); color: var(--ground); } /* 工業版只有一種基底，深淺鈕在此無意義 */ :root[data-skin="ind"] .theme-toggle { display: none; } /* ═══ 5. Hero ═══════════════════════════════════════════════════ */ :root[data-skin="ind"] .hero { text-align: left; padding: 0 0 56px; } /* 柔光暈換成滿版警示斜紋帶 */ :root[data-skin="ind"] .hero::before { width: 100%; height: 14px; left: 0; top: 0; transform: none; border-radius: 0; background: repeating-linear-gradient( -45deg, var(--ink) 0 14px, transparent 14px 28px); opacity: 1; } :root[data-skin="ind"] .hero .wrap { padding-top: 52px; } :root[data-skin="ind"] .hero h1 { margin: 0 0 20px; max-width: 15em; font-size: clamp(34px, 6.2vw, 78px); line-height: .98; letter-spacing: -.045em; } /* 底線螢光棒 → 實心紅塊反白 */ :root[data-skin="ind"] .hero h1 .mark { background: var(--accent); color: var(--on-bright); padding: 0 .12em; } :root[data-skin="ind"] .hero .lede { margin: 0 0 30px; max-width: 40em; font-size: 16px; padding-left: 18px; border-left: 3px solid var(--accent); } :root[data-skin="ind"] .searchbar { margin: 0; max-width: none; border: 2px solid var(--ink); padding: 0 0 0 18px; } :root[data-skin="ind"] .searchbar:focus-within { border-color: var(--accent); box-shadow: 5px 5px 0 var(--accent); } :root[data-skin="ind"] .searchbar input { font-size: 16px; padding: 16px 12px; } :root[data-skin="ind"] .searchbar input::placeholder { font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; font-size: 13px; } :root[data-skin="ind"] .searchbar button { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; padding: 18px 32px; background: var(--ink); color: var(--ground); align-self: stretch; } :root[data-skin="ind"] .searchbar button:hover { background: var(--accent); filter: none; transform: none; } :root[data-skin="ind"] .quick { margin: 16px 0 0; max-width: none; justify-content: flex-start; font-size: 12px; } :root[data-skin="ind"] .quick em { font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; } :root[data-skin="ind"] .quick em::after { content: " >>>"; color: var(--accent); } :root[data-skin="ind"] .quick a { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px; border: 1px solid var(--line); background: transparent; } :root[data-skin="ind"] .quick a:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); } :root[data-skin="ind"] .creed { margin: 30px 0 0; font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid var(--line-soft); padding-top: 14px; } /* ═══ 6. 區塊標題 ═══════════════════════════════════════════════ */ :root[data-skin="ind"] section { padding: 64px 0; } :root[data-skin="ind"] .head { align-items: baseline; gap: 14px; border-top: 2px solid var(--ink); padding-top: 14px; margin-bottom: 28px; } :root[data-skin="ind"] .head h2 { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1.05; } /* 圓點 → 實心方塊，退到基線 */ :root[data-skin="ind"] .head h2 .dot, :root[data-skin="ind"] aside h3 .dot, :root[data-skin="ind"] footer h4 .dot, :root[data-skin="ind"] .pagehead .eyebrow .dot, :root[data-skin="ind"] .resultgroup h2 .dot, :root[data-skin="ind"] .sources h3 .dot, :root[data-skin="ind"] .proscons h4 .dot, :root[data-skin="ind"] ul.topics .n { border-radius: 0; } :root[data-skin="ind"] .head .sub { font-size: 12.5px; } :root[data-skin="ind"] .head .more { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); padding: 7px 13px; } :root[data-skin="ind"] .head .more:hover { background: var(--accent); color: var(--on-bright); gap: 5px; } /* ═══ 7. 卡片：靜止只有框，hover 整塊反白 ═══════════════════════ */ :root[data-skin="ind"] :where(.hub, .scen, .card, .post, .vcard, .termlist a, .rel-grid a, .deskgrid a, .kx, .fig, .chartbox, .tablecard, aside .box, .sources, .rulecard, .scorecard, .verdict, .proscons .col, .kmap-top, .kmap-entry, .klayer, .vnotice, .kflag, .ksymptom, .correction, .termdef) { border: 2px solid var(--ink); box-shadow: none; } :root[data-skin="ind"] :where(.hub, .scen, .card, .post, .vcard, .termlist a, .rel-grid a, .deskgrid a):hover { transform: none; background: var(--ink); border-color: var(--ink); box-shadow: 6px 6px 0 var(--accent); } /* 反白時把所有子元素的色彩一併拉平，蓋掉各欄目色的 hover 規則 */ :root[data-skin="ind"] :where(.hub, .scen, .card, .post, .vcard, .termlist a, .rel-grid a, .deskgrid a):hover, :root[data-skin="ind"] :where(.hub, .scen, .card, .post, .vcard, .termlist a, .rel-grid a, .deskgrid a):hover :where(h3, p, span, small, strong, em, li, div, .t, .q, .ex, .zh, .en, .one, .cnt, .go, .foot, .nm, .tag, .d, .site, .svc span, dt, dd) { color: var(--ground); border-color: var(--ground); } :root[data-skin="ind"] :where(.hub, .scen, .card, .post, .vcard):hover :where(.ico, .mark, .svc span, .tags span) { background: var(--accent); color: var(--on-bright); } :root[data-skin="ind"] :where(.post, .vcard):hover :where(.foot, .vfoot) { border-top-color: var(--ink-3); } /* 欄目導覽：首格加寬並整塊塗黑，作為視覺錨點 */ :root[data-skin="ind"] .hubs { gap: 0; border: 2px solid var(--ink); } :root[data-skin="ind"] .hub { border: 0; border-left: 2px solid var(--ink); } :root[data-skin="ind"] .hub:first-child { border-left: 0; } :root[data-skin="ind"] .hub .ico { width: 34px; height: 34px; border: 2px solid currentColor; } :root[data-skin="ind"] .hub.lead .ico { width: 42px; height: 42px; } :root[data-skin="ind"] .hub h3 { letter-spacing: -.03em; } :root[data-skin="ind"] .hub.lead h3 { font-size: 25px; } :root[data-skin="ind"] .hub .cnt { font-size: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; } :root[data-skin="ind"] .hub.lead .tags span { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); background: transparent; } /* 立場窄條：改成滿版警示條 */ :root[data-skin="ind"] .stancebar { border: 2px solid var(--ink); border-left: 10px solid var(--accent); padding: 14px 16px 14px 22px; box-shadow: none; } :root[data-skin="ind"] .stancebar .no { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } :root[data-skin="ind"] .stancebar .no svg { color: var(--accent); } :root[data-skin="ind"] .stancebar .links a { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); padding: 6px 12px; } :root[data-skin="ind"] .stancebar .links a:hover { background: var(--ink); color: var(--ground); } /* 情境卡 */ :root[data-skin="ind"] .scens { gap: 0; border: 2px solid var(--ink); } :root[data-skin="ind"] .scen { border: 0; border-left: 2px solid var(--ink); } :root[data-skin="ind"] .scen:first-child { border-left: 0; } :root[data-skin="ind"] .scen .q { font-family: var(--display); letter-spacing: -.02em; line-height: 1.35; } :root[data-skin="ind"] .scen .picks li { border-bottom: 1px dotted var(--line-soft); padding-bottom: 8px; } :root[data-skin="ind"] .scen .picks .tag { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } :root[data-skin="ind"] .scen .go { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--accent); } /* ═══ 8. 表格：資料密度是這個站的主體，表格要當主角 ═════════════ */ :root[data-skin="ind"] table { font-size: 14px; } :root[data-skin="ind"] thead th { background: var(--ink); color: var(--ground); font-size: 12px; letter-spacing: .07em; font-weight: 700; padding: 13px 18px; border-right: 1px solid var(--ink-3); } :root[data-skin="ind"] thead th:last-child { border-right: 0; } /* 排序表頭：表頭底是碳黑，選中的欄用航空警示紅，箭頭不加圓角不加陰影 */ :root[data-skin="ind"] thead th .sortbtn { gap: 8px; } :root[data-skin="ind"] thead th .sortbtn::after { font-size: 12px; opacity: .5; } :root[data-skin="ind"] thead th .sortbtn:hover, :root[data-skin="ind"] thead th[aria-sort="ascending"], :root[data-skin="ind"] thead th[aria-sort="descending"] { color: var(--accent); } :root[data-skin="ind"] thead th .sortbtn:focus-visible { outline: 2px solid var(--accent); border-radius: 0; } :root[data-skin="ind"] tbody td { padding: 14px 18px; border-top: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); } :root[data-skin="ind"] tbody td:last-child { border-right: 0; } /* 工具表最後一欄是「最後查證」日期，不折行才好讀——折成「2026-08-」「23」 兩段會讓人以為是兩筆資料。表格本身有 min-width 720px ＋ 橫向捲動，撐得住。 ⚠ 選擇器必須綁死 tbody[data-list="tools"]。原本寫成 .tablescroll tbody td:last-child， 抓到的是「每一張表每一列的最後一格」：名詞釋義表的詳細釋義、年表的說明欄， 全部變成不折行的等寬小字，整段被切在卡片外看不到（2026-08-31 兩次踩到）。 */ :root[data-skin="ind"] .tablescroll tbody[data-list="tools"] td:last-child { white-space: nowrap; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; } :root[data-skin="ind"] tbody tr:nth-child(even) { background: rgba(10,10,10,.028); } :root[data-skin="ind"] tbody tr:hover { background: var(--accent); color: var(--on-bright); } :root[data-skin="ind"] tbody tr:hover :where(td, small, a, span, .pill) { color: var(--on-bright); border-color: rgba(255,255,255,.4); } :root[data-skin="ind"] tbody tr:hover .pips i { background: var(--on-bright); } :root[data-skin="ind"] tbody tr:hover .pips i:not(.on) { background: transparent; border: 1px solid var(--on-bright); } :root[data-skin="ind"] td.name { font-weight: 700; } :root[data-skin="ind"] .tabs { padding: 0; gap: 0; border-bottom: 2px solid var(--ink); } :root[data-skin="ind"] .tabs button { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; padding: 13px 18px; border-right: 1px solid var(--line-soft); } :root[data-skin="ind"] .tabs button:hover { background: var(--surface-alt); } :root[data-skin="ind"] .tabs button[aria-pressed="true"] { background: var(--accent); color: var(--on-bright); font-weight: 700; } :root[data-skin="ind"] .tablefoot { border-top: 2px solid var(--ink); background: var(--surface-alt); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } :root[data-skin="ind"] .specs th { width: 12em; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; } :root[data-skin="ind"] table.compare th.rowhead { background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; } :root[data-skin="ind"] table.compare td.diff { background: var(--accent); color: var(--on-bright); } :root[data-skin="ind"] .rubric th { background: var(--ink); color: var(--ground); font-size: 12.5px; } :root[data-skin="ind"] .rubric .pt { color: var(--accent); } /* ═══ 9. 徽章與標籤：一律方框、等寬、全大寫 ═════════════════════ */ :root[data-skin="ind"] :where(.kind, .pill, .cond, .tag, .badge, .terms a, .az a, .chip, .updated-flag, .verifybar, .await, .selfnote, .filters button, .pager a, .pager span, .cite button, .oops .doors a, .desk .links a, .vnotice .links a) { border-radius: 0; } :root[data-skin="ind"] .kind { font-size: 12px; font-weight: 700; padding: 3px 9px; background: transparent; border: 1px solid currentColor; color: var(--ink); } :root[data-skin="ind"] .kind.k2, :root[data-skin="ind"] .kind.k4 { color: var(--accent); } :root[data-skin="ind"] .pill { font-size: 12px; border: 1px solid var(--line-soft); background: transparent; padding: 3px 9px; } :root[data-skin="ind"] .pill.on { background: var(--ink); color: var(--ground); border-color: var(--ink); } :root[data-skin="ind"] .pill.soon { border: 1px dashed var(--accent); color: var(--accent); } :root[data-skin="ind"] .cond { font-size: 12px; padding: 2px 8px; border: 1px solid var(--line-soft); } :root[data-skin="ind"] .cond.yes { background: var(--ink); color: var(--ground); border-color: var(--ink); } :root[data-skin="ind"] .cond.na { border: 1px dashed var(--accent); color: var(--accent); } :root[data-skin="ind"] .terms a, :root[data-skin="ind"] .az a { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); background: transparent; } :root[data-skin="ind"] .terms a:hover, :root[data-skin="ind"] .az a:hover { transform: none; background: var(--ink); color: var(--ground); border-color: var(--ink); } /* 評分圓點 → 方格：實心＝得分，空框＝未得，斜線＝不適用 */ :root[data-skin="ind"] .pips i, :root[data-skin="ind"] .scrow .pips i { border-radius: 0; width: 12px; height: 12px; background: transparent; border: 1px solid var(--ink); } :root[data-skin="ind"] .pips i.on, :root[data-skin="ind"] .scrow .pips i.on { background: var(--ink); } :root[data-skin="ind"] .pips i.na, :root[data-skin="ind"] .scrow .pips i.na { background: repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 4px); border: 1px solid var(--accent); } :root[data-skin="ind"] .scrow { border-top: 1px solid var(--line-soft); } :root[data-skin="ind"] .scrow .dim { font-family: var(--display); font-weight: 900; letter-spacing: -.01em; } :root[data-skin="ind"] .scrow .pt { font-family: var(--mono); color: var(--accent); font-weight: 700; } :root[data-skin="ind"] .scorecard .sctop { border-bottom: 2px solid var(--ink); } :root[data-skin="ind"] .scorecard .sctop .how { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; } :root[data-skin="ind"] .scfoot { background: var(--ink); color: var(--ground); } :root[data-skin="ind"] .scfoot b { color: var(--on-bright); } /* ═══ 10. 列表列：hover 給紅色左檔板，不整塊反白（避免長列表太吵）═ */ :root[data-skin="ind"] :where(ul.feed li a, .upd, .evergreen a, .results a, ul.topics a, .symlist a) { border-left: 3px solid transparent; border-bottom: 1px solid var(--line-soft); } :root[data-skin="ind"] :where(ul.feed li a, .upd, .evergreen a, .results a, ul.topics a, .symlist a):hover { background: var(--surface); box-shadow: none; transform: none; border-left-color: var(--accent); } :root[data-skin="ind"] ul.feed .t, :root[data-skin="ind"] .evergreen .t, :root[data-skin="ind"] .results .t { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; line-height: 1.4; } :root[data-skin="ind"] ul.feed li a:hover .t, :root[data-skin="ind"] .evergreen a:hover .t, :root[data-skin="ind"] .upd:hover .t, :root[data-skin="ind"] .results a:hover .t { color: var(--accent); } :root[data-skin="ind"] .upd + .upd { border-top: 0; } :root[data-skin="ind"] .upd .when { font-size: 12px; width: 4.4em; } :root[data-skin="ind"] .upd .tag { font-size: 12px; background: transparent; border: 1px solid currentColor; color: var(--ink); } :root[data-skin="ind"] .upd .tag.t2, :root[data-skin="ind"] .upd .tag.t4 { color: var(--accent); } :root[data-skin="ind"] .evergreen .num { color: var(--accent); font-weight: 700; } :root[data-skin="ind"] .results mark { background: var(--accent); color: var(--on-bright); } /* ═══ 11. 側欄與編輯部區塊 ══════════════════════════════════════ */ :root[data-skin="ind"] aside h3 { font-size: 15px; letter-spacing: -.01em; } :root[data-skin="ind"] aside .cap { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; } :root[data-skin="ind"] ul.topics .c { font-family: var(--mono); font-size: 12px; } :root[data-skin="ind"] .deskblock { border: 2px solid var(--ink); } :root[data-skin="ind"] .deskblock > h2 { font-size: 30px; letter-spacing: -.035em; } :root[data-skin="ind"] .deskgrid { gap: 0; border: 2px solid var(--ink); } :root[data-skin="ind"] .deskgrid a { border: 0; border-left: 2px solid var(--ink); background: transparent; } :root[data-skin="ind"] .deskgrid a:first-child { border-left: 0; } :root[data-skin="ind"] .deskgrid .q { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); } :root[data-skin="ind"] .deskgrid strong { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; } :root[data-skin="ind"] .deskgrid .go { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } :root[data-skin="ind"] .deskblock .team-note { background: transparent; border: 1px dashed var(--accent); color: var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: .03em; } :root[data-skin="ind"] .desk .inner { border: 2px solid var(--ink); border-left: 10px solid var(--accent); } :root[data-skin="ind"] .desk .links a { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); } :root[data-skin="ind"] .desk .links a:hover { background: var(--ink); color: var(--ground); } /* ═══ 12. 數據區塊 ══════════════════════════════════════════════ */ :root[data-skin="ind"] .figs { gap: 0; border: 2px solid var(--ink); } :root[data-skin="ind"] .fig { border: 0; border-left: 2px solid var(--ink); } :root[data-skin="ind"] .fig:first-child { border-left: 0; } :root[data-skin="ind"] .fig .band { height: 10px; background: var(--ink); } :root[data-skin="ind"] .fig:nth-child(2) .band { background: repeating-linear-gradient(-45deg, var(--ink) 0 6px, transparent 6px 12px); } :root[data-skin="ind"] .fig:nth-child(3) .band { background: var(--accent); } :root[data-skin="ind"] .skeleton i { background: var(--surface-alt); border: 1px solid var(--line-soft); } :root[data-skin="ind"] .await { background: transparent; border: 1px dashed var(--accent); color: var(--accent); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } :root[data-skin="ind"] .figlive .big { font-family: var(--display); font-size: 44px; font-weight: 900; letter-spacing: -.045em; } :root[data-skin="ind"] .figlive .delta { border: 1px solid currentColor; background: transparent; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } :root[data-skin="ind"] .figlive .delta.up { color: var(--accent); } :root[data-skin="ind"] .bars3 .bar { border: 2px solid var(--ink); background: var(--surface-alt); } :root[data-skin="ind"] .bars3 .col.hi .bar { background: var(--accent); border-color: var(--ink); } :root[data-skin="ind"] .bars3 .val { font-family: var(--mono); font-size: 13px; font-weight: 700; } :root[data-skin="ind"] .bars3 .yr { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; } :root[data-skin="ind"] .chart .axis { border-top: 2px solid var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; } :root[data-skin="ind"] .hbar .track { background: transparent; border: 1px solid var(--ink); height: 20px; } :root[data-skin="ind"] .hbar .fill { background: var(--ink) !important; } :root[data-skin="ind"] .hbar .lb { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; } :root[data-skin="ind"] .hbar .num { font-family: var(--mono); } :root[data-skin="ind"] .srcline { border-top: 2px solid var(--ink); font-size: 12px; } :root[data-skin="ind"] .srcline .verified { background: var(--ink); color: var(--ground); padding: 3px 9px; } :root[data-skin="ind"] .chartbox .foot { border-top: 2px solid var(--ink); background: var(--surface-alt); } :root[data-skin="ind"] .emptyplot .bars i { background: var(--surface-alt); border: 1px solid var(--line-soft); } :root[data-skin="ind"] .sourcebox { background: transparent; border: 1px solid var(--line); padding: 20px 24px; } :root[data-skin="ind"] .sourcebox dt { font-size: 12px; color: var(--accent); } /* ═══ 13. 內頁：標題區、麵包屑、文章 ════════════════════════════ */ :root[data-skin="ind"] .crumb { font-size: 12px; } :root[data-skin="ind"] .crumb span.sep { color: var(--accent); } :root[data-skin="ind"] .pagehead { border-top: 10px solid var(--ink); padding: 26px 0 8px; margin-top: 0; } :root[data-skin="ind"] .pagehead .eyebrow { font-size: 12px; font-weight: 700; color: var(--accent); } :root[data-skin="ind"] .pagehead h1 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -.04em; max-width: 17em; } :root[data-skin="ind"] .pagehead .lede { font-size: 16px; line-height: 1.8; padding-left: 18px; border-left: 3px solid var(--accent); } :root[data-skin="ind"] .pagehead .stats { font-size: 12px; border-top: 1px solid var(--line-soft); padding-top: 14px; gap: 26px; } :root[data-skin="ind"] .pagehead .stats b { color: var(--accent); font-weight: 700; } :root[data-skin="ind"] .article-meta { font-size: 12px; border-bottom: 1px solid var(--line-soft); padding-bottom: 14px; } :root[data-skin="ind"] .updated-flag { background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } :root[data-skin="ind"] .prose { font-size: 17px; line-height: 1.9; } :root[data-skin="ind"] .prose h2 { font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -.03em; line-height: 1.2; border-top: 2px solid var(--ink); padding-top: 14px; } :root[data-skin="ind"] .prose h3 { font-size: 19px; letter-spacing: -.02em; } :root[data-skin="ind"] .prose a { color: var(--accent); text-decoration-thickness: 2px; } :root[data-skin="ind"] .prose blockquote { border-left: 6px solid var(--accent); padding-left: 20px; background: transparent; } :root[data-skin="ind"] .prose code { font-family: var(--mono); background: var(--ink); color: var(--ground); padding: 2px 7px; } :root[data-skin="ind"] .prose hr { border-top: 2px solid var(--ink); } :root[data-skin="ind"] .prose .callout { border: 2px solid var(--ink); border-left: 10px solid var(--accent); box-shadow: none; } :root[data-skin="ind"] .prose figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; } :root[data-skin="ind"] .toc h4 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; } /* site.css 的裸 `nav` 選擇器（display:flex）會洩漏到