/** * 鋼鐵之心 ERP — Lunar Silver 月光銀主題 * * 全域 override Tailwind CDN 高頻 class,讓所有頁面套上深夜藍灰底 + 月光銀強調色。 * 用 CSS 變數 + :where() 0-specificity selector + !important,確保覆蓋 Tailwind 又允許單頁 inline 覆蓋。 * * 設計來源:I_lunar_silver 預覽 * bg #0f1419 (深夜藍灰) * accent #c4c8d1 (月光銀) → #879cc1 (冷藍) * text #e8eef5 (主) / #c4c8d1 (次) / #9aa3b2 (muted) / #6b7585 (dim) * font DM Serif Display(標題) / Inter + Noto Sans TC(內文) */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap'); :root { /* === 月光銀色板 === */ --lunar-bg: #0f1419; --lunar-bg-alt: #14191f; --lunar-bg-deep: #0a0e13; --lunar-card-bg: rgba(196, 200, 209, 0.04); --lunar-card-bg-h: rgba(196, 200, 209, 0.07); --lunar-card-bg-deep: rgba(20, 26, 34, 0.85); --lunar-card-border: rgba(196, 200, 209, 0.10); --lunar-card-border-h:rgba(196, 200, 209, 0.35); --lunar-text-1: #e8eef5; /* 主標題 / 重要 */ --lunar-text-2: #c4c8d1; /* 次標題 / 副資料 */ --lunar-text-3: #9aa3b2; /* muted */ --lunar-text-4: #6b7585; /* dim / 提示 */ --lunar-accent: #c4c8d1; --lunar-accent-soft: #879cc1; --lunar-accent-glow: rgba(196, 200, 209, 0.3); --lunar-border: rgba(196, 200, 209, 0.10); --lunar-border-soft: rgba(196, 200, 209, 0.06); /* 語意色(成功/警示/錯誤) — 暗色版 */ --lunar-success: #6ee7b7; --lunar-success-bg: rgba(110, 231, 183, 0.08); --lunar-warning: #fbbf24; --lunar-warning-bg: rgba(251, 191, 36, 0.08); --lunar-danger: #ff9191; --lunar-danger-bg: rgba(255, 145, 145, 0.08); --lunar-info: #87b4d9; --lunar-info-bg: rgba(135, 180, 217, 0.08); } /* === Body + 全域字體 === */ html, body { background: var(--lunar-bg) !important; color: var(--lunar-text-1) !important; font-family: 'Inter', 'Noto Sans TC', sans-serif !important; background-image: radial-gradient(ellipse at top, rgba(196, 200, 209, 0.06), transparent 55%), radial-gradient(circle at 80% 70%, rgba(135, 156, 193, 0.04), transparent 50%); background-attachment: fixed; } /* === scrollbar === */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(196, 200, 209, 0.2); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(196, 200, 209, 0.4); } /* === Tailwind 高頻 background override === */ :where(.bg-white) { background-color: var(--lunar-card-bg) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } :where(.bg-white\/80) { background-color: rgba(15, 20, 25, 0.72) !important; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } :where(.bg-white\/85) { background-color: rgba(15, 20, 25, 0.78) !important; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } :where(.bg-white\/60, .bg-white\/65, .bg-white\/70, .bg-white\/75) { background-color: rgba(15, 20, 25, 0.55) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } /* day17 補:/90 /95(02_01 nav/header 用這兩個值)*/ :where(.bg-white\/90, .bg-white\/95) { background-color: rgba(15, 20, 25, 0.88) !important; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } :where(.bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100, .bg-stone-50, .bg-stone-100, .bg-zinc-50, .bg-zinc-100, .bg-neutral-50, .bg-neutral-100) { background-color: var(--lunar-bg-alt) !important; } :where(.bg-slate-200, .bg-gray-200, .bg-zinc-200) { background-color: rgba(196, 200, 209, 0.06) !important; } :where(.bg-slate-50\/80, .bg-slate-50\/90, .bg-slate-50\/95) { background-color: rgba(15, 20, 25, 0.85) !important; } /* === 文字顏色 override === */ :where(.text-slate-900, .text-gray-900, .text-zinc-900, .text-neutral-900, .text-black) { color: var(--lunar-text-1) !important; } :where(.text-slate-800, .text-gray-800, .text-zinc-800) { color: var(--lunar-text-1) !important; } :where(.text-slate-700, .text-gray-700, .text-zinc-700) { color: var(--lunar-text-2) !important; } :where(.text-slate-600, .text-gray-600, .text-zinc-600) { color: var(--lunar-text-2) !important; } :where(.text-slate-500, .text-gray-500, .text-zinc-500) { color: var(--lunar-text-3) !important; } :where(.text-slate-400, .text-gray-400, .text-zinc-400) { color: var(--lunar-text-4) !important; } :where(.text-slate-300, .text-gray-300) { color: var(--lunar-text-4) !important; } /* === 邊框 === */ :where(.border-slate-100, .border-gray-100, .border-zinc-100) { border-color: var(--lunar-border-soft) !important; } :where(.border-slate-200, .border-gray-200, .border-zinc-200) { border-color: var(--lunar-border) !important; } :where(.border-slate-300, .border-gray-300) { border-color: rgba(196, 200, 209, 0.18) !important; } /* === navbar 玻璃化(常見 .sticky + bg-white\/80 組合) === */ nav.bg-white\/80, nav.bg-white\/85, nav.bg-white\/90, nav[class*="backdrop-blur"] { background: rgba(15, 20, 25, 0.72) !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; border-bottom: 1px solid var(--lunar-card-border) !important; } /* === 主強調色 — 藍系都換月光銀漸層 === */ :where(.text-blue-600, .text-blue-500, .text-blue-700) { color: var(--lunar-accent) !important; } :where(.text-blue-400) { color: var(--lunar-accent-soft) !important; } :where(.bg-blue-600, .bg-blue-500) { background: linear-gradient(135deg, var(--lunar-accent), var(--lunar-accent-soft)) !important; color: var(--lunar-bg) !important; } :where(.bg-blue-600:hover, .bg-blue-700:hover, .hover\:bg-blue-700:hover) { background: linear-gradient(135deg, #e8eef5, var(--lunar-accent)) !important; color: var(--lunar-bg) !important; } :where(.bg-blue-50, .bg-blue-100) { background-color: rgba(135, 180, 217, 0.1) !important; } :where(.border-blue-200, .border-blue-300) { border-color: rgba(135, 180, 217, 0.3) !important; } :where(.ring-blue-400, .focus\:ring-blue-400:focus, .focus\:ring-blue-500:focus) { --tw-ring-color: var(--lunar-accent-soft) !important; } /* === 卡片內 absolute pill chip 統一月光銀(SUP-001 / A01 等編號 chip)=== */ .supplier-card .absolute.bg-white\/90, .supplier-card .absolute.bg-white\/80, .product-card .absolute.bg-white\/90, .product-card .absolute.bg-white\/80, .module-card .absolute.bg-white\/90, .module-card .absolute.bg-white\/80, /* 通用 — 任何 absolute pill chip 在卡片內 */ [class*="-card"] .absolute[class*="bg-white"] { background: linear-gradient(135deg, rgba(196, 200, 209, 0.25), rgba(135, 156, 193, 0.18)) !important; color: var(--lunar-text-1) !important; border: 1px solid rgba(196, 200, 209, 0.3) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; font-weight: 700 !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* === Modal 加深 — 強化區隔讓使用者看清楚浮窗 === */ .modal-overlay, :where(.fixed.inset-0)[class*="z-"] { /* 不誤觸 modal 子卡片本身 */ } .modal-overlay { background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(14px) saturate(120%) !important; -webkit-backdrop-filter: blur(14px) saturate(120%) !important; } /* Modal 內容卡片 — 強制深色不透明 + 月光銀邊 + 大 shadow 區隔背景 */ .modal-overlay > .bg-white, .modal-overlay > div[class*="bg-white"], [id$="-modal"] > .bg-white, [id$="-modal"] > div[class*="bg-white"] { background: linear-gradient(180deg, rgba(22, 28, 36, 0.99), rgba(15, 20, 25, 0.99)) !important; backdrop-filter: none !important; /* 模態本體不需 blur,否則內容透出去 */ border: 1px solid rgba(196, 200, 209, 0.18) !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(196, 200, 209, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 60px rgba(135, 156, 193, 0.06) !important; } /* Modal 內 input 也要更實在(不要太透明) */ .modal-overlay input, .modal-overlay select, .modal-overlay textarea, [id$="-modal"] input, [id$="-modal"] select, [id$="-modal"] textarea { background-color: rgba(196, 200, 209, 0.06) !important; border-color: rgba(196, 200, 209, 0.15) !important; } /* === 模組卡片 (.module-card 自訂 class) === */ /* 強化版:大卡片 + 精緻 icon 圈 + serif 標題 + 月光銀 hover glow */ .module-card { background: var(--lunar-card-bg) !important; border: 1px solid var(--lunar-card-border) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; padding: 1.5rem !important; border-radius: 1rem !important; min-height: 130px; position: relative; overflow: hidden; } /* 卡片背後微光暈(初始隱藏,hover 顯現) */ .module-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 0%, rgba(196, 200, 209, 0.08), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .module-card:hover::before { opacity: 1; } .module-card:hover { background: var(--lunar-card-bg-h) !important; border-color: var(--lunar-card-border-h) !important; box-shadow: 0 12px 40px rgba(135, 156, 193, 0.18), 0 0 0 1px rgba(196, 200, 209, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; transform: translateY(-3px); } /* icon 圈圈 — 統一月光銀玻璃感,但保留原色暗化版本(讓不同模組仍可辨識) */ .module-card > div:first-child { width: 2.75rem !important; height: 2.75rem !important; border-radius: 0.875rem !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .module-card:hover > div:first-child { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 6px 20px rgba(135, 156, 193, 0.2); transform: scale(1.05); } .module-card > div:first-child i { font-size: 1.125rem; } /* 標題用 serif 大字 */ .module-card > div:last-child > .font-bold, .module-card > div:last-child > div:first-child { font-family: 'DM Serif Display', 'Noto Serif TC', serif !important; font-size: 1.0625rem !important; font-weight: 400 !important; letter-spacing: 0.01em; color: var(--lunar-text-1) !important; margin-bottom: 0.375rem; transition: color 0.2s ease; } .module-card:hover > div:last-child > .font-bold, .module-card:hover > div:last-child > div:first-child { color: #fff !important; } /* 副標 */ .module-card > div:last-child > div:last-child { font-size: 0.6875rem !important; color: var(--lunar-text-4) !important; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500 !important; } /* === Icon 圈圈背景 — 多彩但暗化(維持模組辨識度,不要全部變月光銀) === */ .module-card > div:first-child.bg-purple-50 { background: rgba(168, 85, 247, 0.12) !important; } .module-card > div:first-child.bg-pink-50 { background: rgba(244, 114, 182, 0.12) !important; } .module-card > div:first-child.bg-blue-50 { background: rgba(96, 165, 250, 0.12) !important; } .module-card > div:first-child.bg-sky-50 { background: rgba(56, 189, 248, 0.12) !important; } .module-card > div:first-child.bg-teal-50 { background: rgba(45, 212, 191, 0.12) !important; } .module-card > div:first-child.bg-emerald-50, .module-card > div:first-child.bg-green-50 { background: rgba(110, 231, 183, 0.12) !important; } .module-card > div:first-child.bg-amber-50, .module-card > div:first-child.bg-yellow-50 { background: rgba(251, 191, 36, 0.12) !important; } .module-card > div:first-child.bg-red-50 { background: rgba(248, 113, 113, 0.12) !important; } .module-card > div:first-child.bg-orange-50 { background: rgba(251, 146, 60, 0.12) !important; } .module-card > div:first-child.bg-indigo-50 { background: rgba(129, 140, 248, 0.12) !important; } .module-card > div:first-child.bg-rose-50 { background: rgba(251, 113, 133, 0.12) !important; } .module-card > div:first-child.bg-cyan-50 { background: rgba(34, 211, 238, 0.12) !important; } .module-card > div:first-child.bg-violet-50 { background: rgba(167, 139, 250, 0.12) !important; } .module-card > div:first-child.bg-fuchsia-50 { background: rgba(232, 121, 249, 0.12) !important; } .module-card > div:first-child.bg-slate-50 { background: rgba(148, 163, 184, 0.12) !important; } /* Icon 圖示顏色 — 在暗底下提亮(從 -600 改為更亮的 -300/-400 色階) */ .module-card .text-purple-600, .module-card .text-purple-500 { color: #c4b5fd !important; } .module-card .text-pink-600, .module-card .text-pink-500 { color: #f9a8d4 !important; } .module-card .text-blue-600, .module-card .text-blue-500 { color: #93c5fd !important; } .module-card .text-sky-600 { color: #7dd3fc !important; } .module-card .text-teal-600 { color: #5eead4 !important; } .module-card .text-emerald-600, .module-card .text-green-600 { color: #6ee7b7 !important; } .module-card .text-amber-600, .module-card .text-yellow-600 { color: #fcd34d !important; } .module-card .text-red-600 { color: #fca5a5 !important; } .module-card .text-orange-600 { color: #fdba74 !important; } .module-card .text-indigo-600 { color: #a5b4fc !important; } .module-card .text-rose-600 { color: #fda4af !important; } .module-card .text-cyan-600 { color: #67e8f9 !important; } .module-card .text-violet-600 { color: #c4b5fd !important; } .module-card .text-fuchsia-600 { color: #f0abfc !important; } .module-card .text-slate-600 { color: #cbd5e1 !important; } /* === 全域 tap highlight(手機點下去的高光改成月光銀,不要瀏覽器預設的藍) === */ * { -webkit-tap-highlight-color: rgba(196, 200, 209, 0.2); } /* === 全域卡片 hover 統一(對齊 .module-card 月光銀 glow 效果) === 覆蓋所有 -card 自訂 class:supplier / product / tag / acc / stat / td 等 */ .supplier-card, .product-card, .tag-card, .acc-card, .stat-card, .lunar-hover-card { background: var(--lunar-card-bg) !important; border: 1px solid var(--lunar-card-border) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative; } .supplier-card::before, .product-card::before, .tag-card::before, .acc-card::before, .stat-card::before, .lunar-hover-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 0%, rgba(196, 200, 209, 0.08), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .supplier-card:hover::before, .product-card:hover::before, .tag-card:hover::before, .acc-card:hover::before, .stat-card:hover::before, .lunar-hover-card:hover::before { opacity: 1; } .supplier-card:hover, .product-card:hover, .tag-card:hover, .acc-card:hover, .stat-card:hover, .lunar-hover-card:hover, .td-card-hover:hover { background: var(--lunar-card-bg-h) !important; border-color: var(--lunar-card-border-h) !important; box-shadow: 0 12px 40px rgba(135, 156, 193, 0.18), 0 0 0 1px rgba(196, 200, 209, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; transform: translateY(-3px) !important; } /* === 手機 / 觸控裝置:tap 反饋(按下瞬間月光銀「強烈」亮起) === */ .supplier-card:active, .product-card:active, .tag-card:active, .acc-card:active, .stat-card:active, .lunar-hover-card:active, .td-card-hover:active, .module-card:active { background: var(--lunar-card-bg-h) !important; border-color: rgba(196, 200, 209, 0.6) !important; outline: 2px solid rgba(196, 200, 209, 0.35) !important; outline-offset: -2px; box-shadow: 0 0 0 4px rgba(196, 200, 209, 0.15), 0 0 60px rgba(135, 156, 193, 0.45), 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; transform: scale(0.97) !important; transition: all 0.08s ease-out !important; } /* === 觸控裝置:用 JS 加 .lunar-tap class 延長亮起到 300ms === */ .lunar-tap, .lunar-tap.supplier-card, .lunar-tap.product-card, .lunar-tap.module-card, .lunar-tap.tag-card, .lunar-tap.acc-card, .lunar-tap.stat-card, .lunar-tap.lunar-hover-card { background: var(--lunar-card-bg-h) !important; border-color: rgba(196, 200, 209, 0.6) !important; box-shadow: 0 0 0 3px rgba(196, 200, 209, 0.2), 0 0 50px rgba(135, 156, 193, 0.5), 0 12px 40px rgba(0, 0, 0, 0.4) !important; transform: scale(0.98) translateY(-1px) !important; } /* stat-card.active / .pay-card.selected 等 active 狀態保留更強的月光銀邊 */ .stat-card.active, .pay-card.selected { background: var(--lunar-card-bg-h) !important; border-color: var(--lunar-card-border-h) !important; box-shadow: 0 8px 32px rgba(135, 156, 193, 0.2), 0 0 0 1px rgba(196, 200, 209, 0.2) !important; } /* === 表格 row hover === */ tbody tr:hover { background-color: rgba(196, 200, 209, 0.04) !important; } thead tr { border-color: var(--lunar-border) !important; } /* === input / select / textarea === */ /* day17 補 `input:not([type])`(沒寫 type 屬性 預設 text 但 attr selector 不匹配 → 白底反白) */ :where(input[type="text"], input[type="search"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="url"], input:not([type]), select, textarea) { background-color: var(--lunar-card-bg) !important; color: var(--lunar-text-1) !important; border-color: var(--lunar-card-border) !important; } :where(input:focus, select:focus, textarea:focus) { border-color: var(--lunar-accent-soft) !important; outline: none !important; } /* 明確寫 bg-white 的 input 也強制翻深(覆蓋 Tailwind utility) */ :where(input.bg-white, textarea.bg-white, select.bg-white) { background-color: var(--lunar-card-bg) !important; } ::placeholder { color: var(--lunar-text-4) !important; opacity: 1; } /* === 紅/綠/黃/紫等強調色 — 暗色版微調(讓在深底看起來不刺眼) === */ :where(.bg-red-50) { background-color: rgba(255, 145, 145, 0.08) !important; } :where(.bg-red-100) { background-color: rgba(255, 145, 145, 0.15) !important; } :where(.text-red-600, .text-red-500, .text-red-700) { color: var(--lunar-danger) !important; } :where(.text-red-400) { color: #ffb8b8 !important; } :where(.border-red-200, .border-red-300) { border-color: rgba(255, 145, 145, 0.3) !important; } :where(.bg-emerald-50, .bg-green-50) { background-color: rgba(110, 231, 183, 0.08) !important; } :where(.bg-emerald-100, .bg-green-100) { background-color: rgba(110, 231, 183, 0.15) !important; } :where(.text-emerald-600, .text-emerald-700, .text-green-600, .text-green-700) { color: var(--lunar-success) !important; } :where(.text-emerald-400, .text-green-400, .text-emerald-500) { color: #6ee7b7 !important; } :where(.border-emerald-200, .border-emerald-300, .border-green-200) { border-color: rgba(110, 231, 183, 0.3) !important; } :where(.bg-amber-50, .bg-yellow-50) { background-color: rgba(251, 191, 36, 0.08) !important; } :where(.bg-amber-100, .bg-yellow-100) { background-color: rgba(251, 191, 36, 0.15) !important; } :where(.text-amber-600, .text-amber-700, .text-yellow-600, .text-yellow-700) { color: var(--lunar-warning) !important; } :where(.border-amber-200, .border-amber-300, .border-yellow-200) { border-color: rgba(251, 191, 36, 0.3) !important; } :where(.bg-purple-50, .bg-violet-50) { background-color: rgba(196, 200, 209, 0.06) !important; } :where(.text-purple-600, .text-purple-700, .text-violet-600) { color: #c4b5fd !important; } :where(.bg-pink-50, .bg-rose-50) { background-color: rgba(244, 174, 194, 0.08) !important; } :where(.text-pink-600, .text-pink-700, .text-rose-600) { color: #f4aec2 !important; } :where(.bg-cyan-50, .bg-sky-50, .bg-teal-50) { background-color: var(--lunar-info-bg) !important; } :where(.text-cyan-600, .text-cyan-700, .text-sky-600, .text-teal-600) { color: var(--lunar-info) !important; } :where(.text-cyan-400, .text-sky-400) { color: #87cbf4 !important; } :where(.bg-indigo-50) { background-color: rgba(135, 156, 193, 0.08) !important; } :where(.text-indigo-600, .text-indigo-700) { color: var(--lunar-accent-soft) !important; } /* === 漸層 - 把藍紫漸層調為月光銀漸層 === */ :where(.bg-gradient-to-r, .bg-gradient-to-br) { /* 保留原 gradient direction, 但讓 from-blue / via-blue / to-purple 接受月光銀色變數 */ } :where(.from-blue-600, .from-blue-500) { --tw-gradient-from: var(--lunar-accent) !important; } :where(.to-purple-600, .to-purple-500, .to-violet-600) { --tw-gradient-to: var(--lunar-accent-soft) !important; } :where(.via-blue-500) { --tw-gradient-via: var(--lunar-accent) !important; } /* === shadow 在暗底下要更亮才看得到 === */ :where(.shadow, .shadow-sm) { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5), 0 0 0 1px rgba(196,200,209,0.03) !important; } :where(.shadow-md) { box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(196,200,209,0.05) !important; } :where(.shadow-lg) { box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(196,200,209,0.05) !important; } :where(.shadow-2xl) { box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 40px rgba(135,156,193,0.08) !important; } /* === divider / hr === */ :where(hr) { border-color: var(--lunar-border) !important; } /* === 卡片 hover 統一 === */ :where(button, a)[class*="hover\\:bg-slate"]:hover, :where(button, a)[class*="hover\\:bg-gray"]:hover { background-color: rgba(196, 200, 209, 0.05) !important; } /* === modal backdrop === */ :where(.bg-black\/40, .bg-black\/50, .bg-slate-900\/40, .bg-slate-900\/50) { background-color: rgba(0, 0, 0, 0.65) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* === 標題大字加 serif(可選,先不全套避免影響表格)=== */ .lunar-heading { font-family: 'DM Serif Display', 'Noto Serif TC', serif; } /* === 品牌標誌:右下角小字 === */ body::after { content: 'TINGCHEN STUDIO ©'; position: fixed; bottom: 8px; right: 10px; z-index: 1; font-size: 9px; letter-spacing: 0.25em; color: var(--lunar-text-4); opacity: 0.4; pointer-events: none; } /* === customSelect(全站共用,取代 native