/* ══════════════════════════════════════════════════════════════ DearLep — 樣式 材質是玻璃，底是白紙。 玻璃本身沒有顏色，它只折射底下的光。所以底層鋪了一層極淡的粉彩暈染 (.luminance)—— 淡到單看幾乎是白的，但玻璃層壓上去之後會透出一點 顏色的呼吸，不至於變成一片死白。 材質三要素： 1. backdrop-filter 的模糊 + 飽和度提升 —— 折射 2. 頂緣的高光內陰影 —— 玻璃邊緣受光 3. 極細的暗色描邊 + 遠距柔和陰影 —— 厚度與懸浮 但玻璃只用在「大區塊」上。籌碼、標籤、輸入框一律不做成一片片的小玻璃， 否則整頁都是浮動的框，反而看不出層級。沒有圓角 —— 是玻璃板，不是藥丸。 只有亮色一種樣貌：標本影像的顏色判讀需要一致的白底。 ══════════════════════════════════════════════════════════════ */ :root { --paper: #ffffff; --wash: #f7f8fa; /* 極淡，只用於表格 hover 與去背圖襯底 */ /* 底層暈染：白底上刷三團粉彩，淡到幾乎看不見，只為了讓玻璃有東西可折射 */ --glow-rose: rgba(246, 208, 222, .17); --glow-sky: rgba(198, 220, 243, .18); --glow-mint: rgba(206, 232, 220, .15); /* 玻璃 */ --glass: rgba(255, 255, 255, .58); --glass-hi: rgba(255, 255, 255, .80); --glass-lo: rgba(255, 255, 255, .40); --specular: rgba(255, 255, 255, .95); --hairline: rgba(22, 32, 52, .07); --shade: rgba(28, 40, 66, .09); --shade-2: rgba(28, 40, 66, .05); --blur: 24px; --ink: #16181d; --ink-2: #454b57; --ink-3: #6e7683; --ink-4: #9aa1ad; --rule: #e5e7eb; /* 細線 */ --rule-2: #cdd2d9; /* 需要更明確的分界時 */ /* 強調色：標本針的黃銅。用得極省，幾乎只出現在 kicker 與連結。 */ --accent: #8a6534; /* 語意色與強調色分離 */ --ok: #2f6b4f; --warn: #8a6a1f; --thin: #9a5340; /* 資料稀疏 */ /* 地圖：陸塊是安靜的底，採集點才是內容 */ --map-land: #f2f4f7; --map-coast: #b9c0ca; --map-site: #4a6f96; --map-halo: rgba(74, 111, 150, .45); --sans: "Noto Sans TC", "PingFang TC", "Noto Sans CJK TC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --serif: "Songti TC", "Noto Serif CJK TC", "Source Han Serif TC", "Iowan Old Style", Georgia, serif; --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; --pad: 20px; } /* 這份設計只有一種樣貌。不跟隨系統深色模式 —— 標本影像的判讀 需要一致的白底，換成深色會改變使用者對顏色的感知。 */ :root { color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* 最小字級 1.1rem —— 標本影像旁的說明文字常常是判讀的依據， 縮到 11px 那種「後設資料尺寸」等於預設沒人要看。 */ :root { --fs-min: 1.1rem; } body { margin: 0; min-height: 100dvh; background: var(--paper); position: relative; color: var(--ink); font-family: var(--sans); font-size: 1.2rem; line-height: 1.7; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } /* ── 底層暈染 ───────────────────────────────────────────── 固定不捲動，玻璃在其上移動時折射會跟著變化。 顏色壓得極淡 —— 目的是「不死白」,不是「有顏色」。 */ .luminance { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--paper); } .orb { position: absolute; border-radius: 50%; filter: blur(150px); } .orb-a { width: 52vw; height: 52vw; left: -12vw; top: -16vw; background: var(--glow-rose); } .orb-b { width: 44vw; height: 44vw; right: -10vw; top: 18vh; background: var(--glow-sky); } .orb-c { width: 48vw; height: 48vw; left: 22vw; bottom: -20vw; background: var(--glow-mint); } /* ── 玻璃材質 ─────────────────────────────────────────── 只掛在大區塊上。沒有圓角 —— 是一片玻璃板，不是藥丸。 */ .glass { position: relative; background: linear-gradient(152deg, var(--glass-hi), var(--glass) 45%, var(--glass-lo)); backdrop-filter: blur(var(--blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); box-shadow: inset 0 1px 0 0 var(--specular), /* 頂緣受光 */ inset 0 0 0 .5px var(--hairline), /* 厚度描邊 */ 0 8px 30px -10px var(--shade), /* 懸浮 */ 0 2px 8px -3px var(--shade-2); } /* 底緣的反射光 —— 玻璃下沿會把底下的光帶上來 */ .glass::after { content: ""; position: absolute; inset: auto 10% 0 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--specular), transparent); opacity: .55; pointer-events: none; } /* ── 頁首 ───────────────────────────────────────────────── */ .chrome { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, var(--glass-hi), var(--glass)); backdrop-filter: blur(var(--blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); box-shadow: inset 0 -.5px 0 var(--hairline), 0 1px 14px -6px var(--shade); } .chrome-inner { max-width: 1160px; margin: 0 auto; padding: 12px var(--pad); padding-top: calc(12px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 22px; } .wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; } .wordmark-mark { width: 42px; height: 42px; object-fit: contain; flex: none; } .wordmark-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; } /* 字標已裁到墨跡邊界（原檔左側有 44px 透明留白）, 因此圖片左緣就是「台」的左緣，下方的 DearLep 直接切齊即可。 */ .wordmark-zh { width: 176px; height: auto; display: block; } .wordmark-text small { font-size: 1.1rem; color: var(--ink-4); letter-spacing: .14em; } /* 桌機：選單項目在剩餘空間裡水平置中 */ .nav { display: flex; gap: 20px; flex: 1; justify-content: center; } .nav::-webkit-scrollbar { display: none; } /* 漢堡鈕只在窄螢幕出現 */ .burger { display: none; } .nav a { font-size: 1.12rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; padding: 2px 0; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--ink); } .nav a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); } .quick { position: relative; flex: none; width: min(220px, 30vw); } .quick-icon { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 13px; height: 13px; color: var(--ink-4); pointer-events: none; } .quick input { width: 100%; font: inherit; font-size: 1.1rem; padding: 5px 0 5px 20px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; color: var(--ink); } .quick input::placeholder { color: var(--ink-4); } .quick input:focus { outline: 0; border-bottom-color: var(--ink); } /* ── 版面 ───────────────────────────────────────────────── */ .shell { max-width: 1160px; margin: 0 auto; padding: 32px var(--pad) 56px; display: flex; flex-direction: column; gap: 34px; } /* 玻璃只給最外層的大區塊 —— 由 CSS 指定，而不是在 markup 上到處掛 class。 巢狀在裡面的區塊自動維持平面，不會變成「玻璃裡還有玻璃」。 標題與前言不掛，它們該直接落在紙上。 */ .shell > .panel, .shell > .panel-tight, .shell > .map-layout { background: linear-gradient(152deg, var(--glass-hi), var(--glass) 45%, var(--glass-lo)); backdrop-filter: blur(var(--blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); box-shadow: inset 0 1px 0 0 var(--specular), inset 0 0 0 .5px var(--hairline), 0 8px 30px -10px var(--shade), 0 2px 8px -3px var(--shade-2); padding: 24px 26px; } .shell > .panel-tight { padding: 14px 20px; } .shell > .map-layout { padding: 24px 26px; } .footnote { border-top: 1px solid var(--rule); padding: 20px var(--pad) calc(48px + env(safe-area-inset-bottom)); font-size: 1.1rem; color: var(--ink-3); gap: 4px; } .footnote p { margin: 0; } .footnote .dim { color: var(--ink-4); } /* ── 文字 ───────────────────────────────────────────────── */ h1 { font-family: var(--serif); font-size: clamp(25px, 4.4vw, 34px); font-weight: 600; margin: 0; line-height: 1.28; letter-spacing: -.012em; text-wrap: balance; } h2 { font-family: var(--serif); font-size: 1.52rem; font-weight: 600; margin: 0; text-wrap: balance; } h3 { font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--ink-2); } p { margin: 0; } .kicker { font-family: var(--mono); font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .lede { font-size: 1.24rem; color: var(--ink-2); max-width: 44rem; margin: 0; } /* 學名與中文名的主次關係。 中文名是讀者認得的那個，學名是識別碼 —— 所以中文名黑、學名淺灰且小一號。 用 em 而不是絕對值，任何字級的上下文裡都維持同一個比例。 */ .sci { font-style: italic; color: var(--ink-3); font-size: .88em; font-weight: 400; } .zh-name { color: var(--ink); font-weight: 600; } /* 沒有中文名的物種（本庫約三成），學名就是主要標籤，不能也淡掉 */ .sci.solo { color: var(--ink); font-size: 1em; font-weight: 600; } .dim { color: var(--ink-3); } a { color: var(--accent); text-underline-offset: 2px; } code { font-family: var(--mono); font-size: .92em; color: var(--ink-2); } /* ── 結構 ───────────────────────────────────────────────── */ .panel { display: flex; flex-direction: column; gap: 15px; } .panel-tight { display: flex; flex-direction: column; gap: 10px; } /* 兩個 class 同時掛在一個元素上時，橫向排列優先 —— 否則 margin-left:auto 會在 column 方向上把元素推到右邊，整組資訊就靠右散開了 */ .panel-tight.row, .panel.row { flex-direction: row; align-items: center; } .stack { display: flex; flex-direction: column; gap: 14px; } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .spread { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .grid-cards { display: grid; gap: 22px 20px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); } /* ── 覆蓋率標記 ────────────────────────────────────────── 稀疏維度必須誠實揭露。舊站最大的問題是設計投入與資料密度 反向 —— 這個標記是修正它的機制，所以即使版面極簡也保留。 */ .coverage { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 1.1rem; letter-spacing: .03em; color: var(--ink-3); white-space: nowrap; } .coverage::before { content: ""; width: 26px; height: 2px; background: linear-gradient(90deg, var(--bar-fill, var(--ok)) var(--pct, 0%), var(--rule) var(--pct, 0%)); } .coverage.thin { color: var(--thin); --bar-fill: var(--thin); } /* ── 統計數字 ───────────────────────────────────────────── */ .figures { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .figure { display: flex; flex-direction: column; gap: 2px; } .figure b { font-family: var(--mono); font-size: 1.92rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .figure span { font-size: 1.1rem; color: var(--ink-3); } /* ── 影像格 ─────────────────────────────────────────────── */ .plate { display: grid; gap: 20px 16px; grid-template-columns: repeat(auto-fill, minmax(min(155px, 100%), 1fr)); } .spec { display: flex; flex-direction: column; gap: 7px; } /* 標本照多半是白底或去背，不畫一條線就會浮在頁面上分不出邊界 */ .spec img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border: 1px solid var(--rule); background: var(--paper); } .spec img.cutout { object-fit: contain; padding: 8px; background: var(--wash); } .spec a { display: block; line-height: 0; } .spec a:hover img { border-color: var(--rule-2); } .spec .cap { font-size: 1.1rem; color: var(--ink-3); line-height: 1.55; display: flex; flex-direction: column; gap: 2px; } /* 顏色交給 .zh-name / .sci 決定 —— 卡片不該自己蓋掉名稱的主次關係 */ .spec .cap b { font-weight: 600; font-size: 1.16rem; } /* ── 標籤 ─────────────────────────────────────────────── 純文字，不做膠囊。多個標籤靠間距分開就夠了。 */ .tag { font-size: 1.1rem; color: var(--ink-3); white-space: nowrap; } .tag.accent { color: var(--accent); } .tag.warn { color: var(--warn); } /* ── 表格 ───────────────────────────────────────────────── */ .sheet { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 1.1rem; } th, td { text-align: left; padding: 9px 14px 9px 0; vertical-align: top; } th:last-child, td:last-child { padding-right: 0; } thead th { font-size: 1.1rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; border-bottom: 1px solid var(--rule-2); padding-bottom: 7px; } tbody td { border-bottom: 1px solid var(--rule); } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--wash); } td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── 表單元件 ───────────────────────────────────────────── */ .field { width: 100%; font: inherit; font-size: 1.2rem; padding: 9px 0; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; background: none; color: var(--ink); } .field:focus { outline: 0; border-bottom-color: var(--ink); } .btn { font: inherit; font-size: 1.12rem; font-weight: 500; padding: 9px 20px; border: 0; border-radius: 0; background: var(--ink); color: var(--paper); cursor: pointer; min-height: 40px; } .btn:hover { background: var(--ink-2); } .btn-quiet { background: none; color: var(--ink); border: 1px solid var(--rule-2); } .btn-quiet:hover { background: var(--wash); border-color: var(--ink-4); } /* ── 篩選籌碼 ─────────────────────────────────────────── 沒有底色、沒有外框。選取狀態用墨色底線標示 —— 在一整片灰字裡，一條實線比一塊淺色底更容易被找到。 */ .chips { display: flex; flex-wrap: wrap; gap: 4px 16px; } .chip { font-size: 1.1rem; color: var(--ink-2); text-decoration: none; cursor: pointer; border: 0; background: none; font-family: inherit; padding: 2px 0; display: inline-flex; align-items: baseline; gap: 5px; border-bottom: 2px solid transparent; } .chip:hover { color: var(--ink); text-decoration: none; } .chip.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); } .chip .ct { font-family: var(--mono); font-size: 1.1rem; color: var(--ink-4); font-variant-numeric: tabular-nums; } .chip.on .ct { color: var(--ink-3); } .chip.zero { color: var(--ink-4); pointer-events: none; } /* ── Mega Menu 抽屜 ─────────────────────────────────────── */ .drawer { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .drawer > summary { list-style: none; cursor: pointer; padding: 12px 0; display: flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 500; } .drawer > summary::-webkit-details-marker { display: none; } .drawer > summary .caret { margin-left: auto; color: var(--ink-4); transition: rotate .2s ease; } .drawer[open] > summary .caret { rotate: 180deg; } .drawer > summary:hover { color: var(--accent); } .drawer-body { padding: 4px 0 22px; display: grid; gap: 26px; } @media (min-width: 60rem) { .drawer-body { grid-template-columns: repeat(3, 1fr); } } .dim-group { display: flex; flex-direction: column; gap: 9px; } /* 標題、＋/－ 開關與覆蓋率標記在同一行，但覆蓋率可以換行掉下去 —— 欄寬只有三分之一，硬擠會把「停棲外形」折成「停棲外／形」 */ .dim-group > header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .dim-group > header h3 { font-size: 1.1rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .dim-group > header .coverage { margin-left: auto; } /* ── 包含／排除開關 ──────────────────────────────────────── 舊站的 ＋/－。切的是整個維度：勾選的項目從「只顯示這些」翻成 「濾掉這些」。全形符號的字寬與中文一致，兩種狀態不會讓標題左右跳。 */ .ex-toggle { font-family: var(--mono); font-size: 1.1rem; line-height: 1; width: 1.5em; text-align: center; flex: none; text-decoration: none; color: var(--ink-4); border: 1px solid var(--rule-2); padding: 3px 0; } .ex-toggle:hover { color: var(--ink); border-color: var(--ink-3); text-decoration: none; } .ex-toggle.on { color: var(--warn); border-color: currentColor; font-weight: 700; } /* 整個維度翻成排除時，選項讀起來的意思也反了 —— 用刪除線讓 「這些會被濾掉」在掃視時就看得出來，不必先讀到標題上的 － */ .dim-group.excluded .chip.on, .dim-group.excluded .shape-pick.on .nm { text-decoration: line-through; } .chip.neg { color: var(--warn); font-weight: 600; border-bottom-color: currentColor; } /* ── 「還有 N 項」：收起來，但打得開 ──────────────────────── 關著的時候是行末的一顆籌碼；打開之後獨佔一整列， 裡面的項目才有寬度可以橫向排列，而不是擠成一條細柱。 */ .more { flex: none; } .more[open] { flex: 1 0 100%; margin-top: 2px; } .more > summary { list-style: none; cursor: pointer; font-size: 1.1rem; color: var(--ink-4); border-bottom: 2px dotted var(--rule-2); padding: 2px 0; width: max-content; } .more > summary::-webkit-details-marker { display: none; } .more > summary:hover { color: var(--ink-2); border-bottom-color: var(--ink-4); } .more[open] > summary { color: var(--ink-3); margin-bottom: 6px; } .more[open] > summary::after { content: "　收合"; color: var(--ink-4); } /* ── 分類階層樹 ─────────────────────────────────────────── */ .tree { display: flex; flex-direction: column; } .tree details { border-bottom: 1px solid var(--rule); } .tree details:last-child { border-bottom: 0; } .tree summary { list-style: none; cursor: pointer; padding: 9px 0; display: flex; align-items: center; gap: 9px; font-size: 1.12rem; } .tree summary::-webkit-details-marker { display: none; } .tree summary:hover { color: var(--accent); } .tree summary .ct { margin-left: auto; font-family: var(--mono); font-size: 1.1rem; color: var(--ink-4); font-variant-numeric: tabular-nums; } .tree .depth-2 { padding-left: 22px; } .tree .depth-3 { padding-left: 44px; } .tree .leaves { padding: 2px 0 12px 44px; display: flex; flex-direction: column; gap: 2px; } .tree .leaf { font-size: 1.1rem; padding: 2px 0; text-decoration: none; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; } .tree .leaf:hover { color: var(--accent); } .tree .leaf .zh { color: var(--ink-3); font-size: 1.1rem; } /* ── 分頁 ───────────────────────────────────────────────── */ /* 頁碼橫排。先前這個