/* * tianji-tokens.css — 天機閣「書齋」設計語言 單一 token 來源（Batch 0，2026-07-18） * * 緣由（docs/ui-ux-fullsite-audit-2026-07-17.md G1）：色票/字級/動效 token 目前散落在 * tianji.css / tianji-v2.css / report-r11.css 三份 CSS，各自命名不互通。本檔案是後續 * 所有批次的唯一 token 來源；tianji-v2.css 既有的等值宣告（--tj-ease 等）暫保留不動 * （避免這輪動到 29 個未轉換頁面），留待下一批次整併去重。 * * 載入順序：base.html 內必須排在 tianji-v2.css 之前（tokens 是基礎層，不覆蓋既有樣式）。 */ :root { /* ---------- 色票（書齋 palette）---------- */ --tj-ink: #1F3A2E; /* 墨綠 */ --tj-ink-deep: #152A20; /* 墨綠-深（頁面底色）*/ --tj-ink-mid: #243F33; /* 墨綠-卡片 */ --tj-ink-hover: #2F5040; /* 墨綠-hover */ --tj-gold: #C9A961; /* 古銅金 */ --tj-gold-hi: #DFC27A; /* nav 金／高亮金 */ --tj-gold-dim: #A88A45; /* 金-邊框暗調 */ --tj-paper: #F5EFE0; /* 米紙白 */ --tj-paper-mid: #EDE5CF; /* 米紙白-次層 */ --tj-crimson: #7A2F2F; /* 暗紅（印泥/警示強調）*/ --tj-text: #E8E0D0; /* 主文字（暗色底）*/ --tj-text-2: #9BA89F; /* 次文字 */ --tj-text-sepia: #2C1810; /* 主文字（sepia 底）*/ --tj-text-sepia-2: #5C4030; /* ---------- 字級 ---------- */ --tj-font-serif: "Noto Serif TC", serif; --tj-font-sans: "Noto Sans TC", system-ui, sans-serif; --tj-font-latin: "Cormorant Garamond", serif; --tj-font-mono: "JetBrains Mono", monospace; --tj-fs-xs: 0.78rem; --tj-fs-sm: 0.875rem; --tj-fs-base: 1rem; --tj-fs-md: 1.125rem; --tj-fs-lg: 1.375rem; --tj-fs-xl: 1.75rem; --tj-fs-2xl: 2.25rem; /* ---------- 間距（4px 基準）---------- */ --tj-space-1: 4px; --tj-space-2: 8px; --tj-space-3: 12px; --tj-space-4: 16px; --tj-space-5: 24px; --tj-space-6: 32px; --tj-space-7: 48px; /* ---------- 圓角 / 陰影 ---------- */ --tj-radius-sm: 4px; --tj-radius-md: 8px; --tj-radius-lg: 16px; --tj-radius-pill: 999px; --tj-shadow-sm: 0 1px 2px rgba(0,0,0,0.24); --tj-shadow-md: 0 4px 16px rgba(0,0,0,0.28); --tj-shadow-gold: 0 4px 20px rgba(201,169,97,0.22); /* ---------- 動效 ---------- */ --tj-ease: cubic-bezier(0.4, 0, 0.2, 1); --tj-dur-in: 0.18s; --tj-dur-hover: 0.2s; --tj-dur-expand: 0.32s; } /* ============================================================ 紙質底紋（paper-texture noise）— 加在任一區塊當 ::before 疊層， 低 opacity fractalNoise，模擬米紙纖維感。用法：class="tj-paper-texture" （宿主需 position:relative，class 本身已提供）。 ============================================================ */ .tj-paper-texture { position: relative; isolation: isolate; } .tj-paper-texture::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.02; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ 晝/夜（sepia）主題切換 — data-theme="sepia" 掛在 。 nav/footer 全站單一來源，直接以屬性選擇器覆蓋（specificity 天然 高於 .nav/.site-footer 原生單一 class，毋須 !important、毋須動原檔順序）。 其餘頁面內容本輪未接 sepia（--tj-bg 在 tianji-v2.css 兼作 CTA 反白文字色， 貿然全站重定義會反噬金底 CTA 對比度，見稽核文件 G3；留待下一批次）。 ============================================================ */ html[data-theme="sepia"] .nav { background: rgba(245,239,224,0.96); border-bottom-color: rgba(122,47,47,0.18); } html[data-theme="sepia"] .nav-link { color: var(--tj-text-sepia-2); } html[data-theme="sepia"] .nav-link:hover, html[data-theme="sepia"] .nav-link.nav-active { color: var(--tj-crimson); } html[data-theme="sepia"] .tj-nav-login { color: var(--tj-crimson); border-color: var(--tj-crimson); } html[data-theme="sepia"] .nav-user { color: var(--tj-crimson); } html[data-theme="sepia"] .site-footer { background: var(--tj-paper); border-top-color: rgba(122,47,47,0.18); } html[data-theme="sepia"] .footer-desc, html[data-theme="sepia"] .footer-col a, html[data-theme="sepia"] .footer-copyright, html[data-theme="sepia"] .footer-legal a { color: var(--tj-text-sepia-2); } html[data-theme="sepia"] .footer-col .footer-title { color: var(--tj-text-sepia); } html[data-theme="sepia"] .footer-col a:hover, html[data-theme="sepia"] .footer-legal a:hover { color: var(--tj-crimson); } /* 切換鈕本身 */ .tj-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 44px; min-height: 44px; border-radius: var(--tj-radius-pill); border: 1px solid rgba(201,169,97,0.35); background: transparent; color: var(--tj-gold); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: background var(--tj-dur-hover) var(--tj-ease), color var(--tj-dur-hover) var(--tj-ease); } .tj-theme-toggle:hover { background: rgba(201,169,97,0.12); } html[data-theme="sepia"] .tj-theme-toggle { color: var(--tj-crimson); border-color: rgba(122,47,47,0.35); } /* ============================================================ 共用元件 ============================================================ */ /* CTA：金底 + 墨綠字（WCAG AA，#C9A961 對 #152A20 對比度 ~7.7:1）*/ .tj-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 2rem; background: var(--tj-gold); color: var(--tj-ink-deep); font-family: var(--tj-font-sans); font-weight: 600; font-size: var(--tj-fs-base); letter-spacing: 0.04em; border: none; border-radius: var(--tj-radius-md); cursor: pointer; text-decoration: none; min-height: 44px; transition: transform var(--tj-dur-hover) var(--tj-ease), box-shadow var(--tj-dur-hover) var(--tj-ease); } .tj-cta:hover { transform: translateY(-1px); box-shadow: var(--tj-shadow-gold); } .tj-cta:focus-visible { outline: 2px solid var(--tj-gold-hi); outline-offset: 2px; } /* 金框卡 */ .tj-card-gold { background: var(--tj-ink-mid); border: 1px solid rgba(201,169,97,0.25); border-radius: var(--tj-radius-lg); padding: var(--tj-space-5); transition: border-color var(--tj-dur-hover) var(--tj-ease), box-shadow var(--tj-dur-hover) var(--tj-ease); } .tj-card-gold:hover { border-color: rgba(201,169,97,0.5); box-shadow: var(--tj-shadow-gold); } /* Badge（沿用既有 .tj-badge 命名已被佔用，故用 -gold 後綴區隔）*/ .tj-badge-gold { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.7rem; background: rgba(201,169,97,0.14); border: 1px solid rgba(201,169,97,0.35); border-radius: var(--tj-radius-pill); color: var(--tj-gold-hi); font-size: var(--tj-fs-xs); letter-spacing: 0.04em; } /* Section title：金色直條 + 標題文字 */ .tj-section-title { display: flex; align-items: center; gap: 0.75rem; font-family: var(--tj-font-serif); font-size: var(--tj-fs-xl); font-weight: 700; color: var(--tj-text); margin: 0 0 var(--tj-space-5); } .tj-section-title::before { content: ""; display: inline-block; width: 4px; height: 1.4em; background: var(--tj-gold); border-radius: var(--tj-radius-sm); flex-shrink: 0; } /* Skeleton（載入中佔位）*/ .tj-skeleton { position: relative; overflow: hidden; background: var(--tj-ink-mid); border-radius: var(--tj-radius-md); } .tj-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(201,169,97,0.12), transparent); animation: tj-skeleton-shimmer 1.4s var(--tj-ease) infinite; } @keyframes tj-skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .tj-skeleton-card { min-height: 320px; border: 1px solid rgba(201,169,97,0.15); } /* 空狀態（藏書印章 motif）：雙圈金/暗紅印章 + 文字 */ .tj-empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--tj-space-3); padding: var(--tj-space-7) var(--tj-space-4); text-align: center; color: var(--tj-text-2); } .tj-empty-state-stamp { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--tj-crimson); outline: 1px solid rgba(201,169,97,0.4); outline-offset: 4px; display: flex; align-items: center; justify-content: center; color: var(--tj-crimson); font-family: var(--tj-font-serif); font-size: 1.4rem; } .tj-empty-state-text { font-size: var(--tj-fs-sm); } /* ============================================================ 佈局元件：breadcrumb / badge(中性) / pill — PR-B1-1（#395）抽入 補稽核 G10 缺漏，供三姊妹頁與後續批次使用。 ============================================================ */ /* 麵包屑（金框中性）— 取代各頁 inline .breadcrumb 重複定義 */ .tj-breadcrumb { max-width: 900px; margin: 0 auto; padding: 0.75rem 1rem 0; font-size: var(--tj-fs-sm); } .tj-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; padding: 0; margin: 0; } .tj-breadcrumb li + li::before { content: "›"; color: var(--tj-gold); margin-right: 0.25rem; } .tj-breadcrumb a { color: var(--tj-gold); text-decoration: none; transition: color var(--tj-dur-hover) var(--tj-ease); } .tj-breadcrumb a:hover { text-decoration: underline; } .tj-breadcrumb span { color: var(--tj-text-2); } /* Badge 中性變體（非金）— 語意標記用（狀態/分類），與 .tj-badge-gold 互補 */ .tj-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.7rem; background: rgba(155,168,159,0.10); border: 1px solid rgba(155,168,159,0.30); border-radius: var(--tj-radius-pill); color: var(--tj-text-2); font-size: var(--tj-fs-xs); letter-spacing: 0.04em; } /* 小型 tag（列表/卡片內 inline 標籤）— 比 badge 更輕量 */ .tj-pill { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; background: rgba(201,169,97,0.08); border-radius: var(--tj-radius-pill); color: var(--tj-gold); font-size: var(--tj-fs-xs); font-family: var(--tj-font-mono); letter-spacing: 0.06em; } /* ============================================================ A11y：:focus-visible 金環 / skip-to-content / prefers-reduced-motion （與 tianji-v2.css 既有全域規則等值重申，作為 token 層單一敘述來源； tianji-v2.css 既有規則本輪保留不刪，避免動到未轉換頁面） ============================================================ */ :focus-visible { outline: 2px solid var(--tj-gold); outline-offset: 2px; } .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--tj-gold); color: var(--tj-ink-deep); padding: 0.6rem 1.2rem; border-radius: var(--tj-radius-sm); font-weight: 600; text-decoration: none; z-index: 1000; } .skip-link:focus { top: 1rem; } @media (prefers-reduced-motion: reduce) { .tj-skeleton::after { animation: none; } .tj-cta:hover { transform: none; } }