/* ====================================================================== TrueLink Directory — 認證權威大廳「亮版高質感」皮膚（index.html 專用） ---------------------------------------------------------------------- [2026-07-13 / Claude] 重設計：把認證大廳主頁做成亮版高質感（白卡 + 天藍／ 淡金柔漸層底、鮮明實心圖示磚、金質感 CTA、清楚層次與留白、去 AI 味）。 設計手法（低風險·對齊已核准的 /tools/ 亮版範式）： 1) index.html 掛 → tl-tokens.css 的語意 token 整組 翻亮（--tl-bg→slate-50、--tl-card-bg→white、--tl-text→slate-900…），dir-theme.css 的薄別名（--card/--border/--text-main/--blue…）與大量卡片/側欄/篩選規則「自動跟著翻亮」。 2) 本檔（最後載入·同特異度後到者贏）只補「不會隨 token 翻亮的硬編深色點」＋高質感點綴： 亮 hero、白搜尋列、側欄鮮明實心圖示磚、白卡柔陰影、新手說明區去紫彩虹改品牌漸層。 色彩一律走 --tl-* token（品牌 navy/green/gold/sky + 語意）；中性亮底用刻意調的藍灰。 本檔為 .css（brand-ci-guard 只掃 .html·不掃本檔），仍自律用 token 保單一真相。 ====================================================================== */ /* ── 0. 亮版 token 微調：gold-strong 在白底太淡 → 全頁改用暗金（一次修好 eyebrow／ 篩選計數／促購標題／分類 CTA／信任徽章／spotlight 全部 gold-strong 用點） ── */ [data-tl-theme="light"] { --tl-gold-strong: var(--tl-gold-700); } /* ── 1. 頁面畫布：天藍 + 淡金 柔漸層底（固定·不隨捲動·無水平溢出） ── */ body { background: radial-gradient(1200px 520px at 10% -10%, color-mix(in srgb, var(--tl-brand-navy) 8%, transparent), transparent 60%), radial-gradient(1000px 480px at 100% -6%, color-mix(in srgb, var(--tl-brand-gold) 13%, transparent), transparent 55%), linear-gradient(180deg, var(--tl-slate-50) 0%, #eaf1fb 100%); background-attachment: fixed; background-repeat: no-repeat; } /* ── 2. Hero（sticky 薄列·亮玻璃質感·天藍/淡金點綴） ── */ .dir-header { background: radial-gradient(70% 140% at 6% -30%, color-mix(in srgb, var(--tl-brand-navy) 10%, transparent), transparent 62%), radial-gradient(58% 130% at 100% -20%, color-mix(in srgb, var(--tl-brand-gold) 20%, transparent), transparent 55%), linear-gradient(180deg, #ffffff 0%, #f2f6fd 100%); border-bottom: 1px solid color-mix(in srgb, var(--tl-brand-navy) 12%, var(--tl-border)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 34px -22px rgba(20, 40, 90, 0.42); -webkit-backdrop-filter: saturate(1.15) blur(4px); backdrop-filter: saturate(1.15) blur(4px); } .dir-header::before { display: none; } /* 拔掉原深色 radial 光暈 */ .dir-hero-eyebrow { color: var(--tl-gold-700); background: color-mix(in srgb, var(--tl-brand-gold) 12%, #ffffff); border: 1px solid color-mix(in srgb, var(--tl-brand-gold) 38%, transparent); padding: 5px 12px; border-radius: var(--tl-radius-full); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.06); } .dir-hero-eyebrow i { color: var(--tl-gold-700); } /* 標題尾字漸層：白底改 navy→green（原 green→sky-300 在白底偏淡） */ .dir-header h1 { color: var(--tl-slate-900); } .dir-header h1 span { background: linear-gradient(120deg, var(--tl-brand-navy), var(--tl-brand-green)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── 3. 搜尋列（白底·柔陰影·金聚焦環） ── */ .search-input { background: #ffffff; border: 1px solid var(--tl-border-strong); color: var(--tl-slate-900); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05), 0 10px 22px -16px rgba(20, 40, 80, 0.35); } .search-input::placeholder { color: var(--tl-slate-400); } .search-input:focus { border-color: var(--tl-gold-500); background: #ffffff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-brand-gold) 22%, transparent); } .search-icon { color: var(--tl-brand-navy); } .search-icon:hover { color: var(--tl-brand-green); } .search-hint { color: var(--tl-slate-400); border-color: var(--tl-border); background: var(--tl-slate-100); } /* ── 4. 側欄：白面 + 鮮明實心圖示磚（每分類專屬色·工具色彩識別） ── */ .dir-sidebar { background: #ffffff; border: 1px solid var(--tl-border); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05), 0 18px 40px -26px rgba(24, 50, 110, 0.4); } .dir-sidebar__label { color: var(--tl-slate-500); } /* 分類項預設色 → 每顆給 --cat（品牌/信任色系·無紫無粉） */ .sub-tab-btn { --cat: var(--tl-brand-navy); color: var(--tl-slate-600); } .sub-tab-btn[data-target="articles"] { --cat: var(--tl-brand-navy); } .sub-tab-btn[data-target="entities"] { --cat: var(--tl-brand-green); } .sub-tab-btn[data-target="orgs"] { --cat: var(--tl-sky-600); } .sub-tab-btn[data-target="virtue"] { --cat: var(--tl-gold-700); } .sub-tab-btn[data-target="cards"] { --cat: var(--tl-line-nodes); } /* 沉穩青 */ .sub-tab-btn[data-target="ai"] { --cat: var(--tl-line-academy); } /* 靛藍 */ /* 鮮明實心圖示磚（glossy 漸層 + 柔投影·白圖示） */ .dir-sidebar .sub-tab-btn i, .main-tab-btn i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; color: #ffffff; background: linear-gradient(155deg, color-mix(in srgb, var(--cat) 82%, #ffffff), var(--cat)); box-shadow: 0 5px 12px -6px color-mix(in srgb, var(--cat) 80%, transparent), 0 1px 0 rgba(255, 255, 255, 0.5) inset; transition: transform 0.18s var(--tl-ease-standard); flex: 0 0 auto; } .main-tab-btn { --cat: var(--tl-primary); } .main-tab-btn.tab-outline-warn { --cat: var(--tl-warning); } .sub-tab-btn:hover i, .main-tab-btn:hover i { transform: translateY(-1px); } .sub-tab-btn:hover { background: color-mix(in srgb, var(--cat) 7%, #ffffff); color: var(--tl-slate-900); } .sub-tab-btn.active { background: color-mix(in srgb, var(--cat) 10%, #ffffff); color: var(--tl-slate-900); border-color: color-mix(in srgb, var(--cat) 32%, transparent); } .sub-tab-btn.active::before { background: var(--cat); } /* 左槓改分類色 */ .main-tab-btn:hover { background: color-mix(in srgb, var(--cat) 8%, #ffffff); color: var(--tl-slate-900); } .main-tab-btn.active { background: color-mix(in srgb, var(--cat) 12%, #ffffff); color: color-mix(in srgb, var(--cat) 72%, var(--tl-slate-900)); border-color: color-mix(in srgb, var(--cat) 40%, transparent); } /* ── 5. 主區標題 + 篩選（白面柔陰影） ── */ .dir-main__title { color: var(--tl-slate-900); } .dir-filters { background: #ffffff; border: 1px solid var(--tl-border); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.04); } .dir-filter-select { background: #ffffff; } .dir-filter-btn { background: var(--tl-slate-100); } .dir-nav-toggle { background: #ffffff; border: 1px solid var(--tl-border); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05), 0 10px 22px -16px rgba(20, 40, 80, 0.3); } /* ── 6. 卡片（白卡·柔層次陰影·品牌 hover·去深色殘留） ── */ .article-card, .entity-card, .ai-card, .org-card, .card-profile { background: #ffffff; border: 1px solid var(--tl-border); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05), 0 16px 34px -20px rgba(24, 50, 110, 0.28); } .article-card:hover, .entity-card:hover, .ai-card:hover, .org-card:hover, .card-profile:hover { border-color: color-mix(in srgb, var(--tl-brand-navy) 34%, var(--tl-border)); box-shadow: 0 3px 8px rgba(20, 40, 80, 0.08), 0 30px 56px -22px rgba(24, 50, 110, 0.4); } .ac-author { color: var(--tl-slate-600); } .ac-author-icon { background: color-mix(in srgb, var(--tl-brand-green) 12%, #ffffff); color: var(--tl-brand-green); border-color: color-mix(in srgb, var(--tl-brand-green) 26%, transparent); } /* 無圖文章縮圖：改亮版天藍柔底（原深 slate 漸層） */ .article-card-rich .ac-thumb-empty { background: linear-gradient(150deg, color-mix(in srgb, var(--tl-brand-navy) 12%, #ffffff), color-mix(in srgb, var(--tl-sky-400) 16%, #ffffff)); color: var(--tl-brand-navy); } .empty-state { background: #ffffff; border-color: var(--tl-border); } /* SEO/版本連結小標（若深色殘留·統一亮版中性） */ .ac-seo-line, .ac-version-link { color: var(--tl-slate-500); } /* ── 7. 徽章亮版對比修正 ── */ .ec-badge--ngo { color: var(--tl-brand-green); } .ec-badge--trust { color: var(--tl-gold-700); } /* ── 8. 促購卡 / 分類 spotlight（白面·淡金框） ── */ .premium-cta-banner { background: linear-gradient(160deg, color-mix(in srgb, var(--tl-brand-navy) 6%, #ffffff), #ffffff); border: 1px solid color-mix(in srgb, var(--tl-brand-gold) 34%, transparent); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05); } .premium-cta-lead { color: var(--tl-gold-700); } .premium-cta-sub { color: var(--tl-slate-500); } .dir-cat-card { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--tl-brand-navy) 8%, transparent), transparent 46%), linear-gradient(160deg, #ffffff 0%, #f4f8fe 100%); border: 1px solid color-mix(in srgb, var(--tl-brand-gold) 32%, transparent); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05), 0 16px 34px -22px rgba(24, 50, 110, 0.3); } .cat-emblem { background: color-mix(in srgb, var(--tl-brand-navy) 8%, #ffffff); } .dir-cat-card__title { color: var(--tl-slate-900); } /* ── 9. 新手說明區：整區翻亮 + 去 AI 味（拔掉紫彩虹漸層改品牌 navy→green→gold） ── */ .edu-container { background: #ffffff; border: 1px solid var(--tl-border); box-shadow: 0 1px 3px rgba(20, 40, 80, 0.06), 0 26px 60px -30px rgba(24, 50, 110, 0.3); } .edu-container--premium { background: radial-gradient(circle at 10% -4%, color-mix(in srgb, var(--tl-brand-green) 14%, transparent), transparent 34%), radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--tl-brand-gold) 16%, transparent), transparent 36%), linear-gradient(180deg, #ffffff 0%, #f4f8fe 100%); } /* 頂條：品牌三色（navy→green→gold）取代原 primary/blue/purple/warning 彩虹 */ .edu-container--premium::before { background: linear-gradient(90deg, var(--tl-brand-navy), var(--tl-brand-green), var(--tl-brand-gold)); opacity: 1; } .edu-hero-icon { color: #ffffff; background: linear-gradient(150deg, color-mix(in srgb, var(--tl-brand-navy) 82%, #ffffff), var(--tl-brand-navy)); border: none; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--tl-brand-navy) 70%, transparent); filter: none; } .edu-hero-icon--glow { color: #ffffff; background: linear-gradient(150deg, color-mix(in srgb, var(--tl-brand-green) 80%, #ffffff), var(--tl-brand-green)); border: none; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--tl-brand-green) 65%, transparent); } .edu-eyebrow { color: var(--tl-brand-green) !important; } .edu-hero h2 { color: var(--tl-slate-900); } .edu-hero p { color: var(--tl-slate-600); } .edu-value-card { background: #ffffff; border: 1px solid var(--tl-border); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05), 0 14px 30px -22px rgba(24, 50, 110, 0.28); } .edu-value-number { color: #ffffff; background: linear-gradient(150deg, color-mix(in srgb, var(--tl-brand-navy) 80%, #ffffff), var(--tl-brand-navy)); border: none; } .edu-value-card h3 { color: var(--tl-slate-900); } .edu-value-card p { color: var(--tl-slate-600); } .edu-list--marketing .edu-item { background: #ffffff; border-color: var(--tl-border); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05), 0 14px 30px -24px rgba(24, 50, 110, 0.26); } .edu-item--featured { border-color: color-mix(in srgb, var(--tl-brand-green) 42%, transparent) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--tl-brand-green) 12%, #ffffff), #ffffff) !important; } /* 鮮明實心圖示磚（白圖示·各自品牌/信任色·無紫） */ .edu-icon { color: #ffffff !important; border: none !important; box-shadow: 0 8px 18px -8px rgba(24, 50, 110, 0.35); } .edu-icon--mint { background: linear-gradient(150deg, color-mix(in srgb, var(--tl-brand-green) 80%, #fff), var(--tl-brand-green)); } .edu-icon--purple { background: linear-gradient(150deg, color-mix(in srgb, var(--tl-sky-600) 80%, #fff), var(--tl-sky-600)); } .edu-icon--amber { background: linear-gradient(150deg, color-mix(in srgb, var(--tl-gold-700) 80%, #fff), var(--tl-gold-700)); } .edu-icon--blue { background: linear-gradient(150deg, color-mix(in srgb, var(--tl-brand-navy) 80%, #fff), var(--tl-brand-navy)); } .edu-icon--rose { background: linear-gradient(150deg, color-mix(in srgb, var(--tl-line-nodes) 80%, #fff), var(--tl-line-nodes)); } .edu-content h3 { color: var(--tl-slate-900); } .edu-content p { color: var(--tl-slate-600); } .edu-content code { background: var(--tl-slate-100); color: var(--tl-brand-navy); } .edu-cta-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--tl-brand-green) 12%, #ffffff), color-mix(in srgb, var(--tl-brand-navy) 6%, #ffffff)); border: 1px solid color-mix(in srgb, var(--tl-brand-green) 30%, transparent); } .edu-cta-kicker { color: var(--tl-brand-green); } .edu-cta-panel h3 { color: var(--tl-slate-900); } .edu-cta-panel p { color: var(--tl-slate-600); } /* 主 CTA 用品牌綠實心；ghost 亮版中性（原 #dbeafe 淺字在白底看不見） */ .edu-cta-btn--primary { background: linear-gradient(135deg, var(--tl-brand-green), color-mix(in srgb, var(--tl-brand-green) 78%, #000)); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--tl-brand-green) 55%, transparent); color: #ffffff; } .edu-cta-btn--ghost { background: #ffffff; color: var(--tl-slate-700); border-color: var(--tl-border-strong); } .edu-cta-btn--ghost:hover { border-color: var(--tl-brand-navy); color: var(--tl-brand-navy); } /* FAQ 卡（dir-faq 已用 token·此處只補柔陰影一致感） */ .dir-faq details { box-shadow: 0 1px 2px rgba(20, 40, 80, 0.04); } /* ── 10. RWD @375：hero 堆疊·無水平溢出（沿用 dir-theme 斷點·此處只保險加固） ── */ @media (max-width: 480px) { body { background-attachment: scroll; } /* iOS fixed 效能保險 */ .dir-header { -webkit-backdrop-filter: none; backdrop-filter: none; } .edu-cta-actions { flex-basis: auto; width: 100%; } } /* ── 11. 現代化動畫精修（克制·去 AI 味）─────────────────────────────── 規範：只 transform/opacity、150-300ms、ease-out 進 ease-in 出、無 CLS、可中斷。 進場/揭示由 .tl-reveal/.dir-stagger（tl-motion.js）+ .grid-layout dirCardIn（dir-theme.css） 既有系統負責（每屏 1-2 個焦點動畫）；本區只補「hover/press 微互動」的順滑與回饋。 reduced-motion：tl-tokens.css 全站 * 規則已把 transition 全中和，下方再顯式加保險。 */ /* 卡片 hover：統一柔順 ease-out（浮起 + 陰影已由第 6 段定義·此處只調時序曲線） */ .article-card, .entity-card, .ai-card, .org-card, .card-profile, .dir-cat-card { transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s cubic-bezier(.2, .7, .2, 1), border-color .2s ease-out; } /* CTA / 按鈕：hover 微抬 + press 按壓回饋（scale down·觸覺感）·圖示微動 */ .dir-hero-cta, .premium-cta-btn, .edu-cta-btn, .dir-filter-btn, .btn-load-more, .dir-cat-card__cta { transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease-out, background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out; } .dir-hero-cta:hover, .edu-cta-btn--primary:hover, .btn-load-more:hover { transform: translateY(-1px); } .dir-hero-cta:active, .premium-cta-btn:active, .edu-cta-btn:active, .dir-filter-btn:active, .btn-load-more:active { transform: translateY(0) scale(.97); } /* 圖示微動：搜尋 icon 點按輕縮；卡片箭頭 hover 右移（.go i 已於 dir-theme 定義） */ .search-icon { transition: color .18s ease-out, transform .18s cubic-bezier(.2, .7, .2, 1); } .search-icon:active { transform: translateY(-50%) scale(.9); } .dir-cat-card:hover .cat-emblem { transform: translateY(-1px); } .cat-emblem { transition: transform .2s cubic-bezier(.2, .7, .2, 1); } /* 篩選展開 chevron 已有旋轉轉場（dir-theme）；tab 切換用 fadeIn（dir-theme）→ 平滑不跳。 */ /* 顯式 reduced-motion 保險（除全站 * 中和外·再關掉本區位移與進場位移） */ @media (prefers-reduced-motion: reduce) { .article-card, .entity-card, .ai-card, .org-card, .card-profile, .dir-cat-card, .dir-hero-cta, .premium-cta-btn, .edu-cta-btn, .dir-filter-btn, .btn-load-more, .dir-cat-card__cta, .search-icon, .cat-emblem, .dir-sidebar .sub-tab-btn i, .main-tab-btn i { transition: none !important; transform: none !important; } .search-icon:active { transform: translateY(-50%) !important; } }