/* critical.css — 首屏关键 CSS（T2.1 性能硬指标） 随构建注入各页 作为阻塞但极小的外部样式表（CSP 合规：非内联）， 覆盖 above-the-fold 渲染所需规则，使全量 114KB style.css 可非阻塞加载。 所有颜色均经 var() 引用，无硬编码裸色值（:root 为令牌定义源，豁免）。 与 css/tokens.css 的 :root / 暗色覆盖保持同步。 */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } :root { --brand-blue: #007AFF; --brand-blue-dark: #0056CC; /* D7 决策（2026-08-26）：纯 #007AFF 单一品牌蓝阶，--brand-purple 已移除，禁止 reintroduce */ --brand-orange: #FF9500; --brand-green: #34C759; --bg: #F5F5F7; --bg-card: #FFFFFF; --bg-surface: #F8F8FA; --bg-elevated: #F8F8FA; --bg-muted: #F8F8FA; --border: #E8E8ED; --text-primary: #1D1D1F; /* T1.4：#86868B 在浅灰背景上仅 ~3.4:1，未达 AA；#6E6E73 为 ≥4.5:1 的次级文字标准值 */ --text-secondary: #6E6E73; --text-tertiary: #98989D; --primary: #007AFF; --primary-hover: #0056CC; --primary-light: rgba(0,122,255,0.15); --primary-glow: rgba(0,122,255,0.4); --glass-bg: rgba(255,255,255,0.72); --glass-blur: 20px; --glass-border: rgba(0,0,0,0.06); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 12px 30px rgba(0,0,0,0.08); --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 3rem; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1000px; --bp-xl: 1200px; --z-base: 1; --z-raised: 2; --z-sticky: 90; --z-header: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --radius: var(--radius-md); --text: var(--text-primary); --tag-bg: #f0f0f0; --tag-text: #555; --tooltip-bg: #1d1d1f; --tooltip-text: #fff; --footer-bg: #e8e8ed; --hot-tool-border: #fef3c7; --like: #f43f5e; --like-bg: #fff1f2; --danger: #ef4444; --danger-strong: var(--color-danger); --success: var(--color-success-deep); --success-bg: #f0fdf4; /* Semantic status colors (T1.3 语义令牌补全：danger/warning/success/info 单一来源) */ --color-danger: #dc2626; --color-warning: #f59e0b; --color-success: #16a34a; /* T1.4：#16a34a 在浅绿底(success-bg)上仅 ~3.14:1；组件层文字用深一档的 green-700 保 AA */ --color-success-deep: #15803d; --color-info: #2563eb; --color-info-alpha: rgba(37,99,235,0.8); /* T1.4: tag text overrides for WCAG AA on light tint backgrounds */ --tag-image-deep: #065f46; --tag-shopping-deep: #9d174d; --tag-utility-deep: #475569; --tag-text-deep: #c2410c; /* 暗色模式正文文字色（T1.4：修复 Phase 0 将 --text 链接到 --bg 导致的黑底黑字） */ --text-on-dark: #F5F5F7; /* 正文链接色（T1.4：亮色用 info 蓝保 AA；暗色由主题块覆写为高亮蓝） */ --link-color: var(--color-info); /* a11y(2026-09-21)：深色「抬升面」(--bg-elevated = --surface-dark)上的正文链接需更亮才达 AA 4.5； 亮色沿用 info 蓝，深色由主题块覆写为更亮蓝(实测 5.45:1)。 */ --link-color-elevated: var(--color-info); --hot-badge-from: var(--color-warning); --hot-badge-to: #ef4444; --hot-likes: #d97706; --trend-hot-bg: #fef2f2; --trend-hot-text: var(--color-danger); --trend-up-bg: #fff7ed; --trend-up-text: #ea580c; --strength-fair: var(--color-warning); --strength-strong: #eab308; --cat-finance: #1d4ed8; --cat-life: #8d6003; /* 加深达 AA(4.54:1)，保持金黄相（原 #ca8a04 对比不足） */ --cat-shopping: #db2777; --cat-travel: #026aa0; /* 加深达 AA(4.53:1)，保持天蓝相（原 #0284c7 对比不足） */ --cat-utility: var(--slate-500); --cat-image: #059669; --white: #fff; --black: #000; --text-muted: #6b7280; /* T4.3：dark 下 text-muted(#6b7280) 在黑底 4.34:1 稍不足，提亮达标 */ --text-muted-dark: #8a8a8f; /* T1.4：浅色底(#e9eff7 等)上的说明文字需比 secondary 更深才达 4.5:1 */ --text-secondary-deep: #5d6470; --bg-subtle: #f1f5f9; --bg-soft: #f8fafc; --border-soft: #e5e7eb; --surface-dark: #2c2c2e; --surface-dark-2: #3a3a3c; --surface-dark-3: #38383a; --surface-darker: #1c1c1e; --surface-darkest: #111113; --red-100: #fecaca; --red-200: #fca5a5; --red-300: #f87171; --blue-100: #bfdbfe; /* T1.1 蓝阶补全（D7：纯蓝阶，indigo/violet 已移除） */ --blue-50: #eff6ff; --blue-300: #93c5fd; --blue-500: #3b82f6; --blue-600: var(--color-info); --blue-900: #1e3a8a; --slate-300: #94a3b8; --slate-500: #64748b; --orange-100: #fed7aa; --orange-200: #fdba74; --orange-400: #ff9f0a; --orange-500: #f97316; --orange-900: #713f12; --brown-900: #7c2d12; --amber-100: #fde68a; --amber-400: #fbbf24; --pink-200: #f9a8d4; --pink-500: #ec4899; --pink-900: #831843; --sky-300: #7dd3fc; --sky-400: #38bdf8; --sky-900: #0c4a6e; --emerald-200: #6ee7b7; --emerald-500: #10b981; --emerald-900: #064e3b; --green-400: #34d399; --green-500: #22c55e; --green-900: #14532d; --green-apple: #30d158; --cyan-50: #ecfeff; --cyan-300: #67e8f9; --cyan-600: #0891b2; --slate-800: #1e293b; --gray-800: #1f2937; --accent-blue: #0a84ff; --danger-bg-deep: #3a1a1a; --green-100: #86efac; /* ── Shadow scale ── */ --shadow-2xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-xs: 0 1px 3px rgba(0,0,0,0.06); --shadow-base: 0 2px 4px rgba(0,0,0,0.1); --shadow-md-dark: 0 4px 12px rgba(0,0,0,0.12); --shadow-lg-dark: 0 4px 12px rgba(0,0,0,0.2); --shadow-xl: 0 0 0 3px rgba(0,122,255,0.15); /* ── Shadow 命名契约（2026-09-23 P0-1 修复）───────────────────── * --shadow-* 只存【完整值】（几何 + 颜色），可作为 box-shadow 的唯一值 * --shadow-color-* 只存【颜色】，用于「字面几何 + 颜色令牌」的组合写法 * 禁止把 --shadow-* 当颜色拼在手写 length 之后：展开后 length > 4， * 整条声明会被浏览器静默丢弃（不报错、不告警，computed 恒为 none）。 * 由静态门禁 scripts/check-token-discipline.mjs 的 R1 规则拦截。 */ --shadow-color-soft: rgba(0,0,0,0.04); --shadow-color-light: rgba(0,0,0,0.1); --shadow-color-medium: rgba(0,0,0,0.12); --shadow-color-strong: rgba(0,0,0,0.2); /* 暗色阴影色（修复 Phase 0 遗留：style.css 曾引用未定义的 --shadow-2xl/3xl/overlay） */ --shadow-color-dark: rgba(0,0,0,0.3); --shadow-color-darker: rgba(0,0,0,0.4); --shadow-color-deepest: rgba(0,0,0,0.5); /* ── Cookie 横幅动作色（2026-09-23 a11y）─────────────────────── * banner 内文字 11.52~11.84px 属非大字号，阈值 4.5:1； * 纯 --primary 作文字或作白字底均只有 4.02:1，不达标。 * 只作用于 banner，不动 --primary 本体（站级既有议题，另立待决项）。 */ --cmp-action-bg: var(--brand-blue-dark); --cmp-action-fg: var(--white); --cmp-banner-link: var(--brand-blue-dark); /* ── Brand blue alpha tints ── */ --blue-05: rgba(0,122,255,0.05); --blue-06: rgba(0,122,255,0.06); --blue-08: rgba(0,122,255,0.08); --blue-10: rgba(0,122,255,0.1); --blue-12: rgba(0,122,255,0.12); --blue-14: rgba(0,122,255,0.14); --blue-15: rgba(0,122,255,0.15); --blue-16: rgba(0,122,255,0.16); --blue-20: rgba(0,122,255,0.2); --blue-25: rgba(0,122,255,0.25); --blue-30: rgba(0,122,255,0.3); --blue-35: rgba(0,122,255,0.35); /* ── Accent blue (#0a84ff) alpha tints ── */ --accent-08: rgba(10,132,255,0.08); --accent-10: rgba(10,132,255,0.1); --accent-12: rgba(10,132,255,0.12); --accent-14: rgba(10,132,255,0.14); --accent-15: rgba(10,132,255,0.15); --accent-25: rgba(10,132,255,0.25); --accent-40: rgba(10,132,255,0.4); /* ── Category alpha tints（T1.1：finance 紫→蓝 info tint；utility 紫→slate 中性） ── */ --cat-finance-bg: rgba(37,99,235,0.15); --cat-health-bg: rgba(22,163,74,0.2); --cat-life-bg: rgba(202,138,4,0.2); --cat-shopping-bg: rgba(219,39,119,0.2); --cat-travel-bg: rgba(2,132,199,0.2); --cat-utility-bg: rgba(100,116,139,0.15); --cat-image-bg: rgba(5,150,105,0.2); --cat-text-bg: rgba(234,88,12,0.2); --cat-tools-bg: rgba(8,145,178,0.2); /* ── UI state alphas ── */ --like-alpha: rgba(244,63,94,0.15); --danger-alpha: rgba(239,68,68,0.1); --danger-alpha-2: rgba(220,38,38,0.2); --danger-alpha-12: rgba(239,68,68,0.12); --danger-alpha-3: rgba(220,38,38,0.3); --success-alpha: rgba(34,197,94,0.15); --warning-alpha: rgba(245,158,11,0.1); --hot-likes-bg: rgba(251,191,36,0.15); --hot-likes-border: rgba(251,191,36,0.3); --hot-score-bg: rgba(239,68,68,0.2); /* T1.1：--purple-08/06/08b 紫色 tint 已删除，引用处改用蓝色阶 tint（D7） */ --orange-08: rgba(255,149,0,0.08); --green-08: rgba(52,199,89,0.08); --green-10a: rgba(48,209,88,0.1); --amber-10: rgba(255,159,10,0.1); --yellow-45: rgba(250,204,21,0.45); /* ── Glass / surface alphas ── */ --glass-white-90: rgba(255,255,255,0.9); --glass-white-80: rgba(255,255,255,0.8); --glass-white-15: rgba(255,255,255,0.15); --glass-white-08: rgba(255,255,255,0.08); --glass-white-06: rgba(255,255,255,0.06); --surface-alpha-60: rgba(28,28,30,0.6); --surface-alpha-70: rgba(44,44,46,0.7); --surface-alpha-72: rgba(28,28,30,0.72); --surface-alpha-80: rgba(28,28,30,0.8); --toast-bg: rgba(20, 22, 28, 0.92); --toast-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); --glass-border-light: rgba(128,128,128,0.4); --overlay-bg: rgba(0,0,0,0.45); /* ── Link / badge ── */ --link-bg: var(--color-info-alpha); --link-badge-deep: rgba(0,86,204,0.85); /* ── Color Picker 多渠道（PRD 3.1）── 棋盘格用于画布/色板呈现透明像素；错误条与半透明提示条的色值统一收在此处， style.css 内只引用 var()，以满足「CSS 裸色值清零」门禁。 */ --cp-checker-cell: #d4d4d4; --cp-danger-bg: rgba(239,68,68,0.1); --cp-danger-border: rgba(239,68,68,0.28); --cp-warn-bg: rgba(245,158,11,0.12); --cp-warn-border: rgba(245,158,11,0.38); /* ── badge-maker 组件调色板（2026-09-24 从 badge-maker.css 升格）──────── * 该页原有一套自成体系的局部调色板（P1-13「完全脱离令牌体系」）。 * 此处按原值升格为组件级令牌，**色值一字未改 → 视觉零变化**， * badge-maker.css 内只保留 var() 引用，达成「色值单一来源」。 * -rgb 结尾为 RGB 分量令牌，配合字面 alpha 使用：rgba(var(--bm-ink-rgb), .09) * （该形式由 check-p0-gate 的 checkCssColors 认可，非裸色值） * ⚠️ 是否进一步统一到主站色阶（会改变视觉）→ 需视觉评审，列为待决项。 */ --bm-ink: #0F172A; --bm-ink-2: #59637A; --bm-ink-3: #8A93A3; --bm-ink-4: #9AA4B6; --bm-ink-5: #6C7689; --bm-ink-2-dark: #B4BCC9; --bm-ink-3-dark: #8E96A3; --bm-blue-dark: #0062CC; --bm-accent-dark: #3395FF; --bm-bg-1: #F7F9FC; --bm-bg-2: #EDF1F7; --bm-surface-deep: #222730; --bm-elevated: #242427; --bm-line-strong: #C8D1E0; --bm-line-soft: #DEE5EF; --bm-ink-rgb: 15,23,42; --bm-ink2-rgb: 17,24,39; --bm-glass-rgb: 255,255,255; --bm-blue-rgb: 0,122,255; --bm-accent-rgb: 10,132,255; --bm-slate-rgb: 120,130,150; --bm-warn-rgb: 217,119,6; --bm-amber-rgb: 251,191,36; --bm-black-rgb: 0,0,0; --bm-panel-rgb: 20,26,36; --bm-panel2-rgb: 20,24,33; --bm-surface-rgb: 44,44,46; /* ── 分类图标底板渐变（2026-09-24 V3：白图标对比度 ≥3:1 单一来源）──── * 旧方案图标底板复用 --cat-* / --strength-strong / --color-success 等广用令牌， * 暗色块把这些令牌压浅后白图标对比度跌破 3:1（life 1.92 / travel 2.14 / health 2.28 / image 2.54 / utility 2.56 / text 2.80）。 * 此处锁定 8 组专用图标渐变令牌（起→止），颜色均实测白字 ≥3:1（多数 ≥4:1）， * 与标签用 --cat-* 解耦，消除「死镜像 / 暗色覆盖」连带击穿。 * 仅作用于 .tool-card .icon.* ，不改标签配色。 */ --icon-finance-a: #007AFF; --icon-finance-b: #0056CC; --icon-health-a: #15803D; --icon-health-b: #14532D; --icon-life-a: #b45309; --icon-life-b: #A16207; --icon-shopping-a: #db2777; --icon-shopping-b: #be185d; --icon-travel-a: #0284C7; --icon-travel-b: #075985; --icon-utility-a: #64748b; --icon-utility-b: #475569; --icon-image-a: #047857; --icon-image-b: #065f46; --icon-text-a: #C2410C; --icon-text-b: #9a3412; } /* ===== Reset / Base ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text-primary); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } a { color: var(--link-color); text-decoration: none; transition: opacity 0.2s; } a:hover { text-decoration: underline; } /* Inline SVG sprite 容器：隐藏，避免 FOUC / 占位 */ .icon-sprite { display: none !important; position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; } /* 卫生步骤将 inline display:none 转为 .hidden 类，critical 需定义以避免回弹显示 */ .hidden { display: none !important; } /* 广告预留高度（T2.4）：首屏即生效，防止 style.css 异步应用时产生 CLS */ .ad-slot { min-height: 100px; } .ad-slot-leaderboard { min-height: 120px; } .ad-slot ins.adsbygoogle { display: block; width: 100%; } /* ===== Header ===== */ header { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); transition: box-shadow 0.3s; } header .logo { font-size: 1.15rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 10px; letter-spacing: -0.3px; } header .logo:hover { opacity: 0.8; text-decoration: none; } header nav { display: flex; align-items: center; gap: 12px; } header nav a { color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; padding: 7px 14px; border-radius: var(--radius-md); transition: background 0.2s, color 0.2s; } header nav a:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; } .lang-switch { padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.85rem; cursor: pointer; background: var(--bg-card); color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s; appearance: none; -webkit-appearance: none; } .lang-switch:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .logo img.site-logo { height: 36px; vertical-align: middle; display: inline-block; } .logo { display: flex; align-items: center; text-decoration: none; } /* ===== Theme Toggle ===== */ .theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; line-height: 1; padding: 0; } .theme-toggle:hover { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 3px var(--primary-light); } svg.ic { width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; } /* ===== Main / Page Header ===== */ /* 注：max-width 必须与 css/style.css 的 main 规则保持一致（1280px）。 历史上 critical 写 1100px、style 写 1280px → 首屏按 1100 渲染、async style.css 到达后 main 外扩到 1280px 造成整页重排（CLS≈0.27，FOUC）。对齐后首帧=终态。 */ main { flex: 1; max-width: 1280px; margin: 0 auto; padding: 48px 28px; width: 100%; } .page-header { text-align: center; margin-bottom: 44px; position: relative; } .page-header h1 { font-size: var(--fs-3xl); font-weight: 700; color: var(--text-primary); margin-bottom: 10px; letter-spacing: -0.5px; background: linear-gradient(120deg, var(--brand-blue), var(--brand-blue-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; } /* 强制颜色模式降级（2026-09-23 P0-2）：Windows 高对比度下 background-clip:text 会让 文字彻底消失。首帧只有 critical.css，故此处必须补 —— 否则 style.css 异步到达前会闪。 */ @media (forced-colors: active) { .page-header h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: CanvasText; color: CanvasText; text-shadow: none; } } .page-header p { font-size: 1.05rem; color: var(--text-secondary); max-width: 620px; margin: 0 auto; line-height: 1.6; } .page-header::after { content: ''; display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-dark)); opacity: 0.8; } /* ===== Search Bar ===== */ .search-bar { max-width: 480px; margin: 0 auto 1.5rem; position: relative; } .search-bar input { width: 100%; padding: 12px 36px 12px 44px; border-radius: var(--radius-lg); border: 1.5px solid var(--border); font-family: var(--font-sans); font-size: 15px; background: var(--glass-white-80); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); outline: none; transition: all 0.2s ease; box-sizing: border-box; } .search-bar input:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--blue-15); } .search-bar input::placeholder { color: var(--text-tertiary); } .search-icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: var(--fs-md); pointer-events: none; } .search-clear { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 1.1rem; padding: 0.2rem; display: none; } /* ===== Tool Grid (首屏) ===== */ .tool-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-bottom: 48px; } /* P1-1/P1-2: 首屏对齐 style.css 的 hot/section-divider 布局 + 为 JS 填充的 hot 网格预留高度（降 CLS）。 .recent-tools 初始为 hidden（display:none），不占位；仅 .hot-tools-grid 可见且由 JS 填充。 */ .section-divider { margin: 32px 0 20px; padding: 0; text-align: left; } .hot-section { margin-bottom: 8px; } .hot-tools-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-bottom: 24px; /* 首屏即预留 8 卡两行近似高度（420px），与 style.css 的 #hotToolsGrid 对齐， 避免 async 重排 innerHTML 时容器高度抖动造成 CLS。 */ min-height: 420px; } /* P1-1：热点卡布局与 style.css 对齐（首帧即样式化，避免 style.css 应用时的未样式化→样式化 CLS） */ .hot-tool-card { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1.5px solid var(--hot-tool-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); transition: all 0.3s ease; } .hot-tool-card .tool-card { display: block; padding: 24px 24px 0; cursor: pointer; } .hot-tool-card .tool-card .icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; border-radius: 12px; color: var(--white); } .hot-tool-card .tool-card h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; } .hot-tool-card .tool-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 10px; } .hot-tool-card .hot-badge { position: absolute; top: -1px; left: -1px; background: linear-gradient(135deg, var(--strength-fair), var(--danger)); color: var(--white); font-size: 0.7rem; font-weight: 700; padding: 2px 10px; border-radius: 12px 0 12px 0; z-index: 1; } .hot-tool-card .hot-score { background: var(--danger-alpha); position: absolute; z-index: 2; top: 38px; right: 10px; font-size: var(--fs-xs); color: var(--danger-strong); font-weight: 700; display: flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 8px; } .hot-tool-card .like-btn { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); border: 1.5px solid var(--border); background: var(--glass-white-90); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; line-height: 1; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .tool-card-wrap { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 20px; position: relative; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.3s cubic-bezier(0.175,0.885,0.32,1.275), border-color 0.3s ease; box-shadow: var(--shadow-sm); animation: fadeInUp 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both; animation-iteration-count: 1; } .tool-grid .tool-card-wrap:nth-child(1){ animation-delay: 0.05s; } .tool-grid .tool-card-wrap:nth-child(2){ animation-delay: 0.10s; } .tool-grid .tool-card-wrap:nth-child(3){ animation-delay: 0.15s; } .tool-grid .tool-card-wrap:nth-child(4){ animation-delay: 0.20s; } .tool-grid .tool-card-wrap:nth-child(5){ animation-delay: 0.25s; } .tool-grid .tool-card-wrap:nth-child(6){ animation-delay: 0.30s; } .tool-grid .tool-card-wrap:nth-child(7){ animation-delay: 0.35s; } .tool-grid .tool-card-wrap:nth-child(8){ animation-delay: 0.40s; } .tool-grid .tool-card-wrap:nth-child(9){ animation-delay: 0.45s; } .tool-grid .tool-card-wrap:nth-child(10){ animation-delay: 0.50s; } .tool-grid .tool-card-wrap:nth-child(11){ animation-delay: 0.55s; } .tool-grid .tool-card-wrap:nth-child(12){ animation-delay: 0.60s; } .tool-grid .tool-card-wrap:nth-child(13){ animation-delay: 0.65s; } .tool-grid .tool-card-wrap:nth-child(14){ animation-delay: 0.70s; } .tool-grid .tool-card-wrap:nth-child(15){ animation-delay: 0.75s; } .tool-grid .tool-card-wrap:nth-child(16){ animation-delay: 0.80s; } .tool-grid .tool-card-wrap:nth-child(17){ animation-delay: 0.85s; } .tool-grid .tool-card-wrap:nth-child(18){ animation-delay: 0.90s; } .tool-grid .tool-card-wrap:nth-child(19){ animation-delay: 0.95s; } .tool-grid .tool-card-wrap:nth-child(20){ animation-delay: 1.00s; } .tool-card-wrap:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-lg); border-color: var(--primary-light); } .tool-card-wrap:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.1s; } .tool-card { flex: 1; text-decoration: none; color: inherit; } .tool-card:hover { text-decoration: none; } .tool-card .icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 12px; transition: transform 0.3s; } .tool-card-wrap:hover .icon { transform: scale(1.08); } .tool-card h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; } .tool-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; } /* 分类图标渐变（V3 2026-09-24：白图标对比度 ≥3:1，令牌化到 --icon-*） */ .tool-card .icon.icon-finance { background: linear-gradient(135deg, var(--icon-finance-a), var(--icon-finance-b)); } .tool-card .icon.icon-health { background: linear-gradient(135deg, var(--icon-health-a), var(--icon-health-b)); } .tool-card .icon.icon-life { background: linear-gradient(135deg, var(--icon-life-a), var(--icon-life-b)); } .tool-card .icon.icon-shopping { background: linear-gradient(135deg, var(--icon-shopping-a), var(--icon-shopping-b)); } .tool-card .icon.icon-travel { background: linear-gradient(135deg, var(--icon-travel-a), var(--icon-travel-b)); } .tool-card .icon.icon-utility { background: linear-gradient(135deg, var(--icon-utility-a), var(--icon-utility-b)); } .tool-card .icon.icon-image { background: linear-gradient(135deg, var(--icon-image-a), var(--icon-image-b)); } .tool-card .icon.icon-text { background: linear-gradient(135deg, var(--icon-text-a), var(--icon-text-b)); } /* ===== Skip link / Focus ===== */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--primary, var(--blue-600)); color: var(--white); padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none; transition: none; } .skip-link:focus { left: 0; outline: none; } :focus-visible { outline: 3px solid var(--primary, var(--blue-600)); outline-offset: 2px; border-radius: 4px; } /* V4 (2026-09-24)：鼠标点击聚焦不显示默认 outline，键盘聚焦仍由上方 :focus-visible 提供 3px 指示。 解耦「鼠标无丑环」与「键盘有可见焦点」，修复此前 :focus{outline:none} 覆盖全局兜底导致搜索框等键盘焦点不可见。 */ :focus:not(:focus-visible) { outline: none; } /* V6 (2026-09-24)：logo 词标明暗双图，按主题切换，修复暗色下词标 #1f2937 不可见（1.43:1）。 logo-h.svg=浅色词标（亮色模式），logo-h-dark.svg=浅色底上用深/浅词标已由 SVG 内置 fill 处理。 */ header .logo img.logo-dark { display: none; } [data-theme="dark"] header .logo img.logo-light { display: none; } [data-theme="dark"] header .logo img.logo-dark { display: inline-block; } /* ===== 暗色模式（首屏令牌覆盖，防主题闪烁） ===== */ [data-theme="dark"] { --like: var(--like); --like-bg: var(--like-alpha); --danger: var(--red-300); --danger-strong: var(--red-200); --success: var(--green-400); --success-bg: var(--cat-health-bg); --trend-hot-text: var(--red-200); --trend-up-text: var(--orange-200); --cat-finance: var(--blue-300); --cat-life: var(--amber-100); --cat-shopping: var(--pink-200); --cat-travel: var(--sky-300); --cat-utility: var(--slate-300); --cat-image: var(--emerald-200); --bg: var(--black); --bg-card: var(--surface-darker); --bg-elevated: var(--surface-dark); --bg-muted: var(--surface-dark); --bg-surface: var(--surface-dark); --text: var(--text-on-dark); --text-primary: var(--text-on-dark); --text-secondary: var(--text-tertiary); --link-color: var(--accent-blue); --link-color-elevated: #4DA6FF; --border: var(--surface-dark-2); --glass-bg: rgba(0,0,0,0.72); --glass-blur: 20px; --glass-border: var(--glass-white-06); --primary: var(--accent-blue); --primary-hover: var(--brand-blue-dark); --primary-light: var(--accent-15); --primary-glow: var(--accent-40); --brand-blue: var(--accent-blue); --brand-orange: var(--orange-400); --brand-green: var(--green-apple); --shadow-sm: 0 1px 3px var(--shadow-color-dark); --shadow-md: 0 4px 12px var(--shadow-color-darker); --shadow-lg: 0 8px 30px var(--shadow-color-deepest); /* Cookie 横幅动作色（暗色，首屏版）：构建期由 build.mjs L1 DRY 从 tokens.css [data-theme="dark"] 同步注入，勿手工维护 */ --cmp-action-bg: var(--accent-blue); --cmp-action-fg: var(--black); --cmp-banner-link: var(--accent-blue); } [data-theme="dark"] .tool-card-wrap { border-color: var(--glass-white-06); box-shadow: 0 1px 3px var(--shadow-color-strong), 0 4px 12px var(--shadow-color-strong); } [data-theme="dark"] { --icon-finance-1: var(--blue-900); --icon-finance-2: var(--icon-finance-b); --icon-health-1: var(--green-900); --icon-health-2: var(--icon-health-b); --icon-life-1: var(--orange-900); --icon-life-2: var(--icon-life-b); --icon-shopping-1: var(--pink-900); --icon-shopping-2: var(--icon-shopping-b); --icon-travel-1: var(--sky-900); --icon-travel-2: var(--icon-travel-b); --icon-utility-1: var(--slate-800); --icon-utility-2: var(--icon-utility-b); --icon-image-1: var(--emerald-900); --icon-image-2: var(--icon-image-b); --icon-text-1: var(--brown-900); --icon-text-2: var(--icon-text-b); } [data-theme="dark"] .tool-card .icon.icon-finance { background: linear-gradient(135deg, var(--icon-finance-1), var(--icon-finance-2)); } [data-theme="dark"] .tool-card .icon.icon-health { background: linear-gradient(135deg, var(--icon-health-1), var(--icon-health-2)); } [data-theme="dark"] .tool-card .icon.icon-life { background: linear-gradient(135deg, var(--icon-life-1), var(--icon-life-2)); } [data-theme="dark"] .tool-card .icon.icon-shopping { background: linear-gradient(135deg, var(--icon-shopping-1), var(--icon-shopping-2)); } [data-theme="dark"] .tool-card .icon.icon-travel { background: linear-gradient(135deg, var(--icon-travel-1), var(--icon-travel-2)); } [data-theme="dark"] .tool-card .icon.icon-utility { background: linear-gradient(135deg, var(--icon-utility-1), var(--icon-utility-2)); } [data-theme="dark"] .tool-card .icon.icon-image { background: linear-gradient(135deg, var(--icon-image-1), var(--icon-image-2)); } [data-theme="dark"] .tool-card .icon.icon-text { background: linear-gradient(135deg, var(--icon-text-1), var(--icon-text-2)); } /* ===== 响应式（首屏断点） ===== */ @media (max-width: 1000px) { .tool-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 768px) { header { padding: 0 16px; } header .logo { font-size: var(--fs-md); } header nav { gap: 8px; } main { padding: 28px 16px; } .page-header { margin-bottom: 32px; } .page-header h1 { font-size: var(--fs-2xl); } .tool-grid { grid-template-columns: repeat(2,1fr); gap: 16px; } } @media (max-width: 480px) { .page-header h1 { font-size: 1.35rem; } .logo img.site-logo { height: 26px; } .tool-card-wrap { padding: 16px; } .tool-card .icon { width: 38px; height: 38px; font-size: 1.1rem; } main { padding: 20px 14px; } } /* ===== 热门工具筛选 chips（首屏布局，须与 style.css 同值，避免 async style.css 应用到 DCL 时 芯片 padding 0→8px 导致筛选行增高、下方 hot-section 被推下产生 CLS） ===== */ .category-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; } .category-chip { padding: 8px 18px; border-radius: var(--radius-full); border: none; font-family: var(--font-sans); font-size: 13px; font-weight: 500; background: var(--bg-muted); color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; } .category-chip.active { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark)); color: var(--white); box-shadow: 0 2px 8px var(--blue-30); } @media (max-width: 480px) { .category-filters { gap: 0.35rem; } .category-chip { font-size: 0.8rem; padding: 0.35rem 0.7rem; } }