/* ═══ theme-variables.css ═══ */ /* =========================================================== theme-variables.css — 全站主题色彩变量系统 夜间模式（默认）→ 日间模式 ([data-theme="light"]) 使用方式： 1. 在 中优先引入本文件 2. 所有 CSS 中颜色值引用 var(--xxx) 而非硬编码 3. JS 切换 即可换肤 =========================================================== */ :root { /* =========================================================== 背景色层级（由深到浅） =========================================================== */ --bg-page: #020617; /* 最深：页面背景 / 第二屏背景 */ --bg-hero: #0B0F19; /* 首屏 Hero 背景 */ --bg-card: #0f172a; /* 卡片 / 菜单 / 搜索栏 / 弹窗 */ --bg-card-hover: #1e293b; /* 卡片悬浮态 */ --bg-card-alt: #131824; /* 工具卡片（image/office） / 工具栏 */ --bg-card-alt2: #1a1d24; /* 导航资源卡片 */ --bg-card-alt3: #111827; /* 分段控制器背景 */ --bg-search: #161B28; /* 首页搜索框背景 */ --bg-icon: #1E2638; /* 快捷工具图标背景 */ --bg-icon-hover: rgba(59,130,246,0.15); /* 图标悬浮光晕 */ --bg-header: rgba(15,17,24,0.92); /* site-header 背景 */ --bg-header-hero: rgba(11,15,25,0.96); /* hero-header 背景 */ --bg-footer: #12151f; /* 页脚背景 */ --bg-drawer-hero: #0B0F19; /* 首页抽屉背景 */ --bg-overlay: rgba(2,6,23,0.75); /* 弹窗/抽屉遮罩 */ --bg-overlay-hero: rgba(0,0,0,0.7); /* Hero 抽屉遮罩 */ --bg-prompt-dialog-close: rgba(30,41,59,0.6); /* 对话框关闭按钮 */ /* =========================================================== 等级色：用于标签徽章（成功/警告/危险/信息） =========================================================== */ --success: #10b981; --color-success-btn: #047857; /* 成功按钮背景（加深，白字可达 AA 4.5） */ --success-bg: rgba(16,185,129,0.08); --success-border: rgba(16,185,129,0.3); --warning: #ea580c; --warning-bg: rgba(245,158,11,0.12); --warning-border: rgba(245,158,11,0.25); --bookmark-active-bg: #2a2113; /* 收藏激活态背景（深色模式） */ --bookmark-active-text: #f8fafc; /* 收藏激活态文字（深色模式） */ --danger: #ef4444; --danger-bg: rgba(239,68,68,0.12); --danger-border: rgba(239,68,68,0.25); --info: #34d399; --info-bg: rgba(52,211,153,0.12); --info-border: rgba(52,211,153,0.25); /* =========================================================== 边框色层级（由深到浅） =========================================================== */ --border-color: #334155; /* 通用边框 */ --border-light: rgba(255,255,255,0.06); /* 浅色边框（搜索框/工具卡片） */ --border-card: #2A3040; /* 首页功能卡片边框 */ --border-focus: #3b82f6; /* 聚焦态边框 */ --border-card-hover: #3b82f6; /* 卡片悬浮边框 */ --border-header: rgba(59,130,246,0.08); /* hero-header 底边 */ --border-header-alt: rgba(37,99,235,0.10); /* site-header 底边 */ --border-footer: rgba(37,99,235,0.12); /* 页脚顶边 */ --border-drawer: rgba(59,130,246,0.12); /* 抽屉边框 */ /* =========================================================== 文字色（由亮到暗） =========================================================== */ --text-white: #ffffff; /* 纯白主文字（标题/按钮文字/Logo） */ --text-primary: #f8fafc; /* 一级文字（标题/正文） */ --text-secondary: #94a3b8; /* 二级文字（说明/描述） */ --text-tertiary: #cbd5e1; /* 三级文字（辅助信息/面包屑当前） */ --text-muted: #6B7280; /* 弱化文字（占位符/面包屑） */ --text-nav: #9CA3AF; /* 导航链接文字 */ --text-footer: #8892a0; /* 页脚文字 */ --text-footer-sep: #94a3b8; /* 页脚分隔符（深色模式提亮以保证对比） */ --text-placeholder: #6B7280; /* 输入框占位符 */ --text-on-accent: #ffffff; /* 品牌色按钮上的文字 */ --text-black: #020617; /* 纯黑文字（浅色背景高对比） */ /* 导航链接色变体 */ --nav-link: #9CA3AF; --nav-link-hero: #9CA3AF; --nav-link-hover: #3b82f6; /* Hero 导航悬浮 */ --nav-link-hover-alt: #2563eb; /* site-header 导航悬浮 */ --nav-link-active: #ffffff; /* 导航激活态 */ /* =========================================================== 强调色（品牌色） =========================================================== */ --accent: #3b82f6; /* 品牌色 */ --accent-hover: #60a5fa; /* 悬浮品牌色 */ --accent-dark: #2563eb; /* 深品牌色（header hover） */ --accent-bg: rgba(59,130,246,0.10); /* 品牌色背景 */ --accent-bg-hover: rgba(59,130,246,0.18); /* 品牌色悬浮背景 */ --accent-bg-light: rgba(59,130,246,0.12); /* 极淡品牌色背景 */ --accent-border: rgba(59,130,246,0.25); /* 品牌色边框 */ --accent-glow: rgba(59,130,246,0.12); /* 品牌色发光 */ --accent-glow-hover: rgba(59,130,246,0.10); /* 卡片悬浮光晕 */ --accent-shadow: 0 0 0 3px rgba(59,130,246,0.12); /* 搜索框聚焦阴影 */ --accent-shadow-btn: 0 6px 16px rgba(59,130,246,0.35); /* 按钮阴影 */ --accent-badge-bg: rgba(59,130,246,0.15); /* 徽章背景 */ --accent-badge-color: var(--accent-hover); /* 徽章文字 */ --text-error: #ef4444; /* 错误/警示红（暗底：亮红对比足） */ --accent-strong: #3b82f6; /* 小标题/强调蓝（暗底：亮蓝对比足） */ /* =========================================================== 阴影 =========================================================== */ --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2); --shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3); --shadow-btn: 0 6px 16px rgba(59,130,246,0.35); --shadow-drawer: -4px 0 20px rgba(0,0,0,0.4); --shadow-card-glow: 0 8px 28px rgba(59,130,246,0.12); --shadow-card-glow-hover: 0 8px 28px rgba(59,130,246,0.10); --shadow-nav-seg: 0 2px 8px rgba(59,130,246,0.35); --shadow-card-nav: 0 12px 28px -8px rgba(0,0,0,0.5), 0 4px 12px -4px rgba(0,0,0,0.3); --shadow-dialog: 0 24px 64px rgba(0,0,0,0.5); --shadow-modal: 0 4px 12px rgba(0,0,0,0.3); --shadow-prompts: 0 12px 24px -8px rgba(0,0,0,0.4), 0 4px 8px -4px rgba(0,0,0,0.3); /* =========================================================== 圆角（与 main.css 同步） =========================================================== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; /* =========================================================== 特殊元素（JSON 格式化配色 / XML 高亮配色） =========================================================== */ --json-brace: #d19a66; --json-bracket: #e5c07b; --json-str: #98c379; --json-num: #d19a66; --json-bool: #c678dd; --json-null: #c678dd; --json-key: #e06c75; --json-punct: #5c6370; --json-folded-array: #61afef; --json-folded-object: #56b6c2; --json-folded-suffix: #abb2bf; --xml-tag: #7dd3fc; --xml-attr: #fbbf24; --xml-attr-val: #86efac; --xml-content: #f8fafc; --xml-comment: #64748b; /* =========================================================== 骨架屏 =========================================================== */ --skeleton-shimmer: linear-gradient(90deg, #1e293b 25%, #263548 50%, #1e293b 75%); --skeleton-bg: #1a1d24; --skeleton-border: rgba(255,255,255,0.08); /* =========================================================== 上传区背景（图片/文件工具拖拽上传区域） =========================================================== */ --bg-upload: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --bg-upload-hover: linear-gradient(135deg, #1e293b 0%, #334155 100%); /* =========================================================== 渐变 =========================================================== */ --gradient-hero: linear-gradient(135deg, #0f172a 0%, #020617 100%); --gradient-header-logo: linear-gradient(135deg, #3b82f6, #60a5fa); --gradient-nav-category: linear-gradient(135deg, #3b82f6, #2563eb); --gradient-shimmer: linear-gradient(90deg, #1e2128 25%, #2a2d34 50%, #1e2128 75%); --gradient-hero-after: linear-gradient(to bottom, transparent, #020617); --gradient-prompts-shimmer: linear-gradient(90deg, #1e293b 25%, #263548 50%, #1e293b 75%); /* =========================================================== 下拉菜单（theme-toggle.js 注入） =========================================================== */ --dropdown-bg: #1e293b; --dropdown-border: #334155; --dropdown-item-hover: #334155; --dropdown-item-active: #60a5fa; --dropdown-icon: #94a3b8; --dropdown-check: #60a5fa; --toggle-hover-bg: rgba(255,255,255,0.1); --toggle-focus-shadow: 0 0 0 2px rgba(59,130,246,0.5); } /* =========================================================== [data-theme="light"] — 日间模式 色彩反推原则： - 背景：深黑/蓝 → 柔和灰白（避免纯白刺眼） - 文字：浅灰/白 → 深灰/黑（保证 WCAG AA 对比度） - 边框：深灰 → 浅灰 - 强调色：保持品牌蓝色不变 =========================================================== */ [data-theme="light"] { /* --- 背景色 --- */ --bg-page: #f1f5f9; --bg-hero: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #f1f5f9; --bg-card-alt: #f8fafc; --bg-card-alt2: #f8fafc; --bg-card-alt3: #e2e8f0; --bg-search: #ffffff; --bg-icon: #e2e8f0; --bg-icon-hover: rgba(59,130,246,0.10); --bg-header: rgba(255,255,255,0.92); --bg-header-hero: rgba(255,255,255,0.96); --bg-footer: #e2e8f0; --bg-drawer-hero: #ffffff; --bg-overlay: rgba(0,0,0,0.4); --bg-overlay-hero: rgba(0,0,0,0.3); --bg-prompt-dialog-close: rgba(226,232,240,0.8); /* --- 等级色 --- */ --success-bg: rgba(16,185,129,0.08); --success-border: rgba(16,185,129,0.3); --warning-bg: rgba(245,158,11,0.08); --warning-border: rgba(245,158,11,0.25); --danger-bg: rgba(239,68,68,0.08); --danger-border: rgba(239,68,68,0.25); --info-bg: rgba(52,211,153,0.08); --info-border: rgba(52,211,153,0.25); /* --- 边框色 --- */ --border-color: #e2e8f0; --border-light: rgba(0,0,0,0.12); --border-card: #d1d5db; --border-focus: #3b82f6; --border-card-hover: #3b82f6; --border-header: rgba(59,130,246,0.12); --border-header-alt: rgba(59,130,246,0.15); --border-footer: #cbd5e1; /* 页脚顶边：可见浅灰色 */ --border-drawer: rgba(0,0,0,0.08); /* --- 文字色 --- */ --text-white: #ffffff; /* 纯白：用于深色/彩色背景上的白字 */ --text-primary: #0f172a; /* 主标题/正文 */ --text-secondary: #334155; /* 次级文字（加深深灰色提升可读性） */ --text-tertiary: #475569; /* 三级文字 */ --text-muted: #64748b; /* 亮色模式弱化文字加深，保证对比 */ --text-nav: #475569; --text-footer: #475569; /* 链接/正文颜色：中深灰，保证可读性 */ --text-footer-sep: #64748b; /* 分割线/版权行颜色（亮色模式加深以保证对比） */ --text-placeholder: #94a3b8; --text-on-accent: #ffffff; --text-black: #0f172a; /* --- 导航链接 --- */ --nav-link: #475569; --nav-link-hero: #475569; --nav-link-active: #0f172a; /* --- 强调色 --- */ --accent-bg: rgba(59,130,246,0.08); --accent-bg-hover: rgba(59,130,246,0.15); --accent-bg-light: rgba(59,130,246,0.06); --accent-border: rgba(59,130,246,0.2); --accent-glow: rgba(59,130,246,0.08); --accent-glow-hover: rgba(59,130,246,0.06); --accent-shadow: 0 0 0 3px rgba(59,130,246,0.15); --accent-shadow-btn: 0 6px 16px rgba(59,130,246,0.3); --accent-badge-bg: rgba(59,130,246,0.1); --accent-badge-color: #3b82f6; /* --- 亮色模式链接/按钮对比加固（不影响暗色模式） --- */ --accent: #1d4ed8; /* 亮色主蓝：深蓝，链接/主按钮白字可达 4.5:1+ */ --accent-hover: #2563eb; /* 亮色悬停/分类链接蓝 */ --success: #059669; /* 亮色绿色按钮加深，白字可达 3:1+ */ --text-error: #b91c1c; /* 浅底：加深红保证 WCAG AA */ --accent-strong: #1d4ed8; /* 浅底：加深蓝保证 WCAG AA */ --bookmark-active-bg: #fef3c7; /* 收藏激活态背景（浅色模式） */ --bookmark-active-text: #92400e; /* 收藏激活态文字（浅色模式） */ /* --- 阴影（日间调浅） --- */ --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --shadow-hover: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); --shadow-drawer: -4px 0 20px rgba(0,0,0,0.1); --shadow-card-glow: 0 8px 28px rgba(59,130,246,0.08); --shadow-card-glow-hover: 0 8px 28px rgba(59,130,246,0.06); --shadow-nav-seg: 0 2px 8px rgba(59,130,246,0.2); --shadow-card-nav: 0 4px 12px rgba(0,0,0,0.08); --shadow-dialog: 0 24px 64px rgba(0,0,0,0.15); --shadow-modal: 0 4px 12px rgba(0,0,0,0.1); --shadow-prompts: 0 4px 12px rgba(0,0,0,0.08); /* --- JSON 高亮（日间适配） --- */ --json-brace: #c1842e; --json-bracket: #b8860b; --json-str: #3d8f5c; --json-num: #c1842e; --json-bool: #8b3daa; --json-null: #8b3daa; --json-key: #c7254e; --json-punct: #8c8c8c; --json-folded-array: #2876b3; --json-folded-object: #2d8a8a; --json-folded-suffix: #5a6377; --xml-tag: #2563eb; --xml-attr: #b45309; --xml-attr-val: #15803d; --xml-content: #1e293b; --xml-comment: #64748b; /* --- 骨架屏（日间） --- */ --skeleton-shimmer: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); --skeleton-bg: #ffffff; --skeleton-border: rgba(0,0,0,0.08); /* --- 上传区（日间） --- */ --bg-upload: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); --bg-upload-hover: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); /* --- 渐变（日间微调） --- */ --gradient-hero: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); --gradient-shimmer: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); --gradient-hero-after: linear-gradient(to bottom, transparent, #f1f5f9); --gradient-prompts-shimmer: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); /* --- 下拉菜单（日间） --- */ --dropdown-bg: #ffffff; --dropdown-border: #e2e8f0; --dropdown-item-hover: #f1f5f9; --dropdown-item-active: #3b82f6; --dropdown-icon: #64748b; --dropdown-check: #3b82f6; --toggle-hover-bg: rgba(0,0,0,0.05); --toggle-focus-shadow: 0 0 0 2px rgba(59,130,246,0.4); /* --- Footer 文字（日间高对比度覆盖） --- */ --footer-title-color: #1e293b; /* 标题颜色：深灰色 */ --footer-link-color: #475569; /* 链接/正文颜色：中深灰 */ --footer-border-color: #cbd5e1; /* 分割线颜色：浅灰可见 */ } /* =========================================================== 兼容层 — 保留旧版 --color-* 变量引用 在 main.css 中也定义了同名变量，此处作为后备 =========================================================== */ :root { --color-bg-primary: var(--bg-page, #020617); --color-bg-secondary: var(--bg-card, #0f172a); --color-bg-tertiary: var(--bg-card-hover, #1e293b); --color-border: var(--border-color, #334155); --color-text-primary: var(--text-primary, #f8fafc); --color-text-secondary: var(--text-secondary, #94a3b8); --color-text-tertiary: var(--text-tertiary, #cbd5e1); --color-accent: var(--accent, #3b82f6); --color-accent-hover: var(--accent-hover, #60a5fa); --color-success: var(--success, #10b981); --color-warning: var(--warning, #f59e0b); --color-danger: var(--danger, #ef4444); } /* ═══ main.css ═══ */ /* =========================================================== main.css — 全局公共样式（低饱和深蓝商务风格） =========================================================== */ /* =========================================================== @font-face — 本地字体声明（导航卡片头像专用） =========================================================== */ @font-face { font-family: 'Icon-EN'; src: url('/assets/fonts/bebas-neue.woff2') format('woff2'); } @font-face { font-family: 'Icon-CN'; src: url('/assets/fonts/LXGWWenKai-Regular.ttf'); } @font-face { font-family: 'Icon-Mix'; src: url('/assets/fonts/outfit-bold.woff2') format('woff2'); } /* --- 设计系统变量（引用 theme-variables.css 实现动态换肤） --- */ :root { --color-bg-primary: var(--bg-page); --color-bg-secondary: var(--bg-card); --color-bg-tertiary: var(--bg-card-hover); --color-bg-hover: var(--bg-card-hover); --color-border: var(--border-color); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-tertiary); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; } /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif; background-color: var(--color-bg-primary, #020617); color: var(--color-text-primary, #f8fafc); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; /* 全局防横向溢出兜底（不影响 fixed/sticky） */ scroll-behavior: smooth; } a { color: var(--color-accent, #3b82f6); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--color-accent-hover, #60a5fa); } img { max-width: 100%; display: block; } /* --- 容器 --- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* =========================================================== 导航栏 =========================================================== */ .navbar { background: var(--color-bg-secondary, #0f172a); height: 70px; display: flex; align-items: center; border-bottom: 1px solid var(--color-border, #334155); position: sticky; top: 0; z-index: 1000; transition: box-shadow 0.3s; } .nav-content { display: flex; justify-content: space-between; width: 100%; align-items: center; } .logo { font-size: 24px; font-weight: 700; background: linear-gradient(135deg, var(--color-accent, #3b82f6), var(--color-accent-hover, #60a5fa)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 1px; } .logo-link { text-decoration: none; } .logo-link:hover { opacity: 0.85; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { text-decoration: none; color: var(--color-text-secondary, #94a3b8); padding: 8px 16px; font-size: 14px; border-radius: var(--radius-sm, 8px); transition: all 0.2s; } .nav-links a:hover { color: var(--color-text-primary, #f8fafc); background: var(--color-bg-tertiary, #1e293b); } .nav-links a.active { color: var(--color-text-primary, #f8fafc); background: var(--color-bg-tertiary, #1e293b); font-weight: 600; } .btn-login { padding: 8px 20px; border: 1px solid var(--color-accent, #3b82f6); background: transparent; color: var(--color-accent, #3b82f6); border-radius: var(--radius-sm, 8px); cursor: pointer; font-size: 14px; transition: all 0.2s; } .btn-login:hover { background: var(--color-accent, #3b82f6); color: var(--text-on-accent, #fff); } /* =========================================================== Hero 区域（首页） =========================================================== */ .hero { background: linear-gradient(135deg, var(--color-bg-secondary, #0f172a) 0%, var(--color-bg-primary, #020617) 100%); padding: var(--space-2xl, 64px) 0; text-align: center; } .hero h1 { font-size: 48px; margin-bottom: var(--space-xs, 8px); background: linear-gradient(135deg, var(--color-text-primary, #f8fafc), var(--color-accent, #3b82f6)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero p { color: var(--color-text-secondary, #94a3b8); font-size: 18px; margin-bottom: var(--space-md, 24px); } /* --- 搜索框 --- */ .search-box { display: flex; max-width: 600px; margin: 0 auto; border-radius: 50px; overflow: hidden; border: 1px solid var(--color-border, #334155); background: var(--color-bg-secondary, #0f172a); } .search-box input { flex: 1; padding: 15px 30px; border: none; outline: none; font-size: 16px; background: transparent; color: var(--color-text-primary, #f8fafc); } .search-box input::placeholder { color: var(--color-text-secondary, #94a3b8); } .search-box button { padding: 0 35px; background: var(--color-accent, #3b82f6); color: var(--text-on-accent, #fff); border: none; cursor: pointer; font-size: 16px; transition: background 0.2s; } .search-box button:hover { background: var(--color-accent-hover, #60a5fa); } .search-hint, .search-message { max-width: 600px; margin: 12px auto 0; font-size: 14px; color: var(--color-text-secondary, #94a3b8); text-align: center; } mark { background: var(--color-warning, #f59e0b); color: var(--text-black, #020617); padding: 2px 6px; border-radius: 3px; font-weight: 500; } /* --- 搜索结果 --- */ .search-results { max-width: 600px; margin: 20px auto 0; background: var(--color-bg-secondary, #0f172a); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-card); display: none; overflow: hidden; border: 1px solid var(--color-border, #334155); animation: slideDown 0.25s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .results-header { padding: var(--space-sm, 16px) 20px; background: var(--color-bg-tertiary, #1e293b); border-bottom: 1px solid var(--color-border, #334155); font-size: 14px; color: var(--color-text-tertiary, #cbd5e1); } .results-list { list-style: none; max-height: 400px; overflow-y: auto; } .result-item { display: flex; align-items: center; padding: var(--space-sm, 16px) 20px; border-bottom: 1px solid var(--color-border, #334155); cursor: pointer; transition: background 0.2s; position: relative; } /* 「敬请期待」搜索结果：灰标 + 不可点击 */ .result-item.coming-soon { opacity: 0.6; cursor: not-allowed; } .result-item.coming-soon:hover { background: transparent; } .result-item:last-child { border-bottom: none; } .result-item:hover { background: var(--color-bg-tertiary, #1e293b); } .result-icon { width: 48px; height: 48px; margin-right: 15px; min-width: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; } .result-icon img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; } .result-content { flex: 1; text-align: left; } .result-content h4 { font-size: 15px; margin-bottom: 4px; color: var(--color-text-primary, #f8fafc); } .result-content p { font-size: 13px; color: var(--color-text-secondary, #94a3b8); line-height: 1.4; text-align: left; } .results-footer { padding: 12px 20px; background: var(--color-bg-tertiary, #1e293b); border-top: 1px solid var(--color-border, #334155); font-size: 12px; color: var(--color-text-secondary, #94a3b8); text-align: center; } .no-results { padding: 30px 20px; text-align: center; color: var(--color-text-secondary, #94a3b8); font-size: 14px; } /* 高亮卡片 */ .highlight-card { animation: pulse 2s ease; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3); } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } /* =========================================================== 板块标题与卡片网格 =========================================================== */ .tool-section { padding: var(--space-2xl, 64px) 0; } .section-title { margin-bottom: var(--space-lg, 32px); font-size: 24px; border-left: 4px solid var(--color-accent, #3b82f6); padding-left: var(--space-sm, 16px); color: var(--color-text-primary, #f8fafc); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md, 24px); } .card { background: var(--color-bg-secondary, #0f172a); padding: var(--space-lg, 32px); border-radius: var(--radius-md, 12px); text-align: center; transition: all 0.3s ease; cursor: pointer; border: 1px solid var(--color-border, #334155); position: relative; } .card:hover { transform: translateY(-6px); background: var(--color-bg-tertiary, #1e293b); box-shadow: var(--shadow-hover); border-color: var(--color-accent, #3b82f6); } /* 未实现工具卡片：灰标 + 不可点击（替代原 alert 打断） */ .card.coming-soon { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); } .card.coming-soon:hover { transform: none; background: var(--color-bg-secondary, #0f172a); box-shadow: none; border-color: var(--color-border, #334155); } .cs-badge { position: absolute; top: 8px; right: 8px; font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 999px; background: var(--color-accent, #3b82f6); color: #fff; letter-spacing: 0.02em; pointer-events: none; } /* 工具栏内联 SVG 图标（替代 Font Awesome） */ .tool-btn svg.tb-icon { width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0; } .card-icon { font-size: 40px; margin-bottom: var(--space-sm, 16px); } .card-icon img { width: 48px; height: 48px; object-fit: contain; display: block; border-radius: var(--radius-md, 12px); margin: 0 auto; } .card h3 { margin-bottom: var(--space-xs, 8px); font-size: 18px; color: var(--color-text-primary, #f8fafc); } .card p { color: var(--color-text-secondary, #94a3b8); font-size: 14px; line-height: 1.5; } /* --- 热门标识 --- */ .hot-tag::before { content: "HOT"; position: absolute; top: 10px; right: 10px; background: var(--color-danger, #ef4444); color: var(--text-on-accent, #fff); font-size: 10px; padding: 3px 10px; border-radius: 20px; font-weight: 600; } /* --- 新功能标签 --- */ .badge-new { position: absolute; top: 10px; right: 10px; background: rgba(59, 130, 246, 0.15); color: var(--color-accent, #3b82f6); font-size: 11px; padding: 4px 10px; border-radius: 4px; font-weight: 500; } .badge-vpn { position: absolute; top: 10px; right: 10px; background: rgba(245, 158, 11, 0.15); color: var(--color-warning, #f59e0b); font-size: 11px; padding: 4px 10px; border-radius: 20px; font-weight: 500; } /* 卡片同时有 HOT 标签和 VPN 标签时，VPN 下移避免重叠 */ .card.hot-tag .badge-vpn { top: 36px; } /* 隐藏的卡片 */ .card.hidden { opacity: 0; transform: scale(0.8); pointer-events: none; position: absolute; visibility: hidden; } /* 工具网格5列 */ .tools-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } /* =========================================================== 页面标题区（二级页面通用） =========================================================== */ .page-header { text-align: center; margin-bottom: var(--space-lg, 32px); } .page-title { font-size: 32px; font-weight: 700; color: var(--color-text-primary, #f8fafc); margin-bottom: var(--space-xs, 8px); } .page-subtitle { font-size: 16px; color: var(--color-text-secondary, #94a3b8); line-height: 1.6; max-width: 600px; margin: 0 auto; } /* =========================================================== 分类筛选按钮 =========================================================== */ .filter-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: var(--space-xl, 48px); flex-wrap: wrap; } .filter-tab { padding: 8px 20px; background: var(--color-bg-secondary, #0f172a); border: 1px solid var(--color-border, #334155); border-radius: 20px; font-size: 14px; color: var(--color-text-secondary, #94a3b8); cursor: pointer; transition: all 0.2s; } .filter-tab:hover { background: var(--color-bg-tertiary, #1e293b); border-color: var(--color-accent, #3b82f6); color: var(--color-accent, #3b82f6); } .filter-tab.active { background: var(--color-accent, #3b82f6); border-color: var(--color-accent, #3b82f6); color: var(--text-on-accent, #fff); } /* =========================================================== 弹窗 =========================================================== */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 6, 23, 0.8); z-index: 2000; justify-content: center; align-items: center; animation: fadeIn 0.2s ease; } .modal-overlay.active { display: flex; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background: var(--color-bg-secondary, #0f172a); border-radius: var(--radius-md, 12px); width: 90%; max-width: 400px; border: 1px solid var(--color-border, #334155); box-shadow: var(--shadow-hover); animation: slideUp 0.25s ease; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { padding: var(--space-sm, 16px) 20px; border-bottom: 1px solid var(--color-border, #334155); text-align: center; } .modal-header h3 { font-size: 18px; color: var(--color-text-primary, #f8fafc); } .modal-body { padding: var(--space-lg, 32px) 20px; text-align: center; } .modal-body p { font-size: 15px; color: var(--color-text-secondary, #94a3b8); line-height: 1.8; } .modal-footer { padding: var(--space-sm, 16px) 20px; border-top: 1px solid var(--color-border, #334155); text-align: center; } .btn-close { padding: 10px 40px; background: var(--color-accent, #3b82f6); color: var(--text-on-accent, #fff); border: none; border-radius: var(--radius-sm, 8px); font-size: 15px; cursor: pointer; transition: all 0.2s; } .btn-close:hover { background: var(--color-accent-hover, #60a5fa); transform: translateY(-1px); } /* =========================================================== 页脚 =========================================================== */ footer { background: var(--bg-footer, #12151f); padding: var(--space-lg, 32px) 0; text-align: center; border-top: 1px solid var(--border-footer, rgba(37,99,235,0.12)); margin-top: var(--space-2xl, 64px); } footer p { color: var(--text-footer, #8892a0); font-size: 14px; } /* =========================================================== 面包屑导航 / 返回链接（二级页面通用） =========================================================== */ .back-link { display: inline-block; margin-bottom: 20px; color: var(--color-accent, #3b82f6); text-decoration: none; font-size: 14px; } .back-link:hover { color: var(--color-accent-hover, #60a5fa); } .back-link::before { content: "\2190 "; } /* =========================================================== 移动端汉堡菜单与抽屉导航 =========================================================== */ /* 汉堡按钮（桌面隐藏，移动端显示） */ .hamburger-btn { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; } .hamburger-btn span { display: block; width: 100%; height: 2.5px; background: var(--color-text-primary, #f8fafc); border-radius: 2px; transition: all 0.3s ease; } .hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger-btn.active span:nth-child(2) { opacity: 0; } .hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* 抽屉遮罩 */ .drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 6, 23, 0.7); z-index: 1999; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .drawer-overlay.active { opacity: 1; visibility: visible; } /* 抽屉菜单 */ .drawer-menu { position: fixed; top: 0; left: 0; width: 280px; height: 100%; background: var(--color-bg-secondary, #0f172a); z-index: 2000; border-right: 1px solid var(--color-border, #334155); box-shadow: 2px 0 20px rgba(0,0,0,0.4); transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; } .drawer-menu.active { transform: translateX(0); } .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm, 16px) 20px; border-bottom: 1px solid var(--color-border, #334155); } .drawer-logo { font-size: 20px; font-weight: 700; background: linear-gradient(135deg, var(--color-accent, #3b82f6), var(--color-accent-hover, #60a5fa)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .drawer-close { width: 36px; height: 36px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-text-secondary, #94a3b8); transition: background 0.2s; } .drawer-close:hover { background: var(--color-bg-tertiary, #1e293b); } /* 抽屉导航项 */ .drawer-nav { padding: 10px 0; } .drawer-nav-item { display: flex; align-items: center; padding: 14px 20px; text-decoration: none; color: var(--color-text-secondary, #94a3b8); font-size: 15px; transition: all 0.2s; border-left: 3px solid transparent; } .drawer-nav-item svg { margin-right: var(--space-xs, 8px); flex-shrink: 0; stroke: currentColor; } .drawer-nav-item:hover { background: var(--color-bg-tertiary, #1e293b); color: var(--color-text-primary, #f8fafc); border-left-color: var(--color-accent, #3b82f6); } .drawer-nav-item.active { background: var(--color-bg-tertiary, #1e293b); color: var(--color-accent, #3b82f6); border-left-color: var(--color-accent, #3b82f6); font-weight: 600; } .drawer-footer { padding: var(--space-sm, 16px) 20px; border-top: 1px solid var(--color-border, #334155); margin-top: auto; } .drawer-login-btn { width: 100%; padding: 12px; border: 1px solid var(--color-accent, #3b82f6); background: transparent; color: var(--color-accent, #3b82f6); border-radius: var(--radius-sm, 8px); cursor: pointer; font-size: 15px; transition: all 0.2s; } .drawer-login-btn:hover { background: var(--color-accent, #3b82f6); color: var(--text-on-accent, #fff); } /* =========================================================== 响应式 - 平板及以下 =========================================================== */ @media (max-width: 1024px) { .tools-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .hamburger-btn { display: flex; } .nav-links { display: none; } .nav-auth { display: none; } .nav-content { justify-content: flex-start; } .hamburger-btn { margin-right: var(--space-sm, 16px); } .hero h1 { font-size: 32px; } .hero p { font-size: 16px; } .card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .page-title { font-size: 26px; } .page-subtitle { font-size: 14px; } .filter-tabs { gap: 6px; margin-bottom: var(--space-md, 24px); } .filter-tab { padding: 6px 14px; font-size: 13px; } .modal-content { width: 92%; max-width: 360px; } } @media (min-width: 769px) { .hamburger-btn { display: none; } } @media (max-width: 375px) { .tools-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .card { padding: var(--space-sm, 16px); } .card-icon { font-size: 32px; margin-bottom: var(--space-xs, 8px); } .card h3 { font-size: 15px; } .card p { font-size: 13px; } } /* =========================================================== 面包屑导航 =========================================================== */ .breadcrumb { padding: var(--space-sm, 16px) 0 0; margin-bottom: var(--space-sm, 16px); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; } .breadcrumb li { display: flex; align-items: center; gap: 6px; color: var(--color-text-secondary, #94a3b8); } .breadcrumb li + li::before { content: "/"; color: var(--color-border, #334155); } .breadcrumb a { color: var(--color-text-secondary, #94a3b8); text-decoration: none; transition: color 0.2s; } .breadcrumb a:hover { color: var(--color-accent, #3b82f6); } .breadcrumb li[aria-current="page"] { color: var(--color-text-tertiary, #cbd5e1); } /* =========================================================== FAQ 板块（工具页通用） =========================================================== */ .faq-section { max-width: 800px; margin: var(--space-2xl, 64px) auto 0; padding: 0 20px; } .faq-section h2 { font-size: 22px; font-weight: 700; color: var(--color-text-primary, #f8fafc); margin-bottom: var(--space-lg, 32px); border-left: 4px solid var(--color-accent, #3b82f6); padding-left: var(--space-sm, 16px); } .faq-item { background: var(--color-bg-secondary, #0f172a); border: 1px solid var(--color-border, #334155); border-radius: var(--radius-md, 12px); padding: var(--space-md, 24px); margin-bottom: var(--space-sm, 16px); } .faq-item h3 { font-size: 16px; font-weight: 600; color: var(--color-text-primary, #f8fafc); margin-bottom: var(--space-xs, 8px); line-height: 1.5; } .faq-item p { font-size: 14px; color: var(--color-text-secondary, #94a3b8); line-height: 1.7; margin: 0; } /* 工具页 → 指南 反向内链区块（P1 SEO，与 faq 风格统一） */ .related-tutorials { max-width: 800px; margin: var(--space-2xl, 64px) auto 0; padding: 0 20px; } .related-tutorials h2 { font-size: 22px; font-weight: 700; color: var(--color-text-primary, #f8fafc); margin-bottom: var(--space-lg, 32px); border-left: 4px solid var(--color-accent, #3b82f6); padding-left: var(--space-sm, 16px); } .related-tutorials .rt-links { display: flex; flex-wrap: wrap; gap: 12px; } .related-tutorials .rt-links a { display: inline-block; padding: 9px 16px; border: 1px solid var(--color-border, #334155); border-radius: var(--radius-md, 12px); background: var(--color-bg-secondary, #0f172a); color: var(--color-text-primary, #f8fafc); font-size: 14px; text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease; } .related-tutorials .rt-links a:hover { border-color: var(--color-accent, #3b82f6); color: var(--color-accent, #3b82f6); background: var(--color-bg-secondary, #0f172a); } /* details/summary 版 FAQ（新版工具页使用） */ .faq-title { font-size: 22px; font-weight: 700; color: var(--color-text-primary, #f8fafc); margin-bottom: var(--space-lg, 32px); border-left: 4px solid var(--color-accent, #3b82f6); padding-left: var(--space-sm, 16px); } .faq-list { display: flex; flex-direction: column; gap: var(--space-sm, 16px); } details.faq-item { background: var(--color-bg-secondary, #0f172a); border: 1px solid var(--color-border, #334155); border-radius: var(--radius-md, 12px); padding: 0; margin-bottom: 0; overflow: hidden; } details.faq-item[open] { border-color: var(--color-accent, #3b82f6); } .faq-question { font-size: 16px; font-weight: 600; color: var(--color-text-primary, #f8fafc); line-height: 1.5; padding: var(--space-md, 24px); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s; } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--color-accent, #3b82f6); flex-shrink: 0; margin-left: 12px; transition: transform 0.25s; } details.faq-item[open] .faq-question::after { transform: rotate(45deg); } .faq-question:hover { background: var(--color-bg-hover, #1e293b); } .faq-answer { padding: 0 var(--space-md, 24px) var(--space-md, 24px); border-top: 1px solid var(--color-border, #334155); } .faq-answer p { font-size: 14px; color: var(--color-text-secondary, #94a3b8); line-height: 1.7; margin: var(--space-sm, 16px) 0 0; } .faq-answer code { background: rgba(59, 130, 246, 0.12); color: var(--color-accent-hover, #60a5fa); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'Courier New', Courier, monospace; } @media (max-width: 768px) { .faq-section { padding: 0 16px; } .faq-section h2 { font-size: 18px; } .faq-item { padding: var(--space-sm, 16px); } .faq-item h3 { font-size: 15px; } .faq-title { font-size: 18px; } .faq-question { font-size: 15px; padding: var(--space-sm, 16px); } .faq-answer { padding: 0 var(--space-sm, 16px) var(--space-sm, 16px); } } /* =========================================================== 隐私政策 / 友情链接等静态内容页 =========================================================== */ .static-page { max-width: 800px; margin: 0 auto; padding: var(--space-2xl, 64px) 20px; } .static-page h1 { font-size: 32px; font-weight: 700; color: var(--color-text-primary, #f8fafc); margin-bottom: var(--space-lg, 32px); } .static-page h2 { font-size: 20px; font-weight: 600; color: var(--color-text-primary, #f8fafc); margin: var(--space-xl, 48px) 0 var(--space-sm, 16px); border-left: 3px solid var(--color-accent, #3b82f6); padding-left: 12px; } .static-page h3 { font-size: 17px; font-weight: 600; color: var(--color-text-primary, #f8fafc); margin: var(--space-md, 24px) 0 var(--space-xs, 8px); } .static-page p { font-size: 15px; color: var(--color-text-secondary, #94a3b8); line-height: 1.8; margin-bottom: var(--space-sm, 16px); } .static-page ul, .static-page ol { padding-left: 24px; margin-bottom: var(--space-sm, 16px); } .static-page li { font-size: 15px; color: var(--color-text-secondary, #94a3b8); line-height: 1.8; margin-bottom: 6px; } .static-page a { color: var(--color-accent, #3b82f6); } .static-page a:hover { color: var(--color-accent-hover, #60a5fa); } /* 友链卡片网格 */ .links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-sm, 16px); margin: var(--space-sm, 16px) 0; } .link-card { background: var(--color-bg-secondary, #0f172a); border: 1px solid var(--color-border, #334155); border-radius: var(--radius-md, 12px); padding: var(--space-sm, 16px); text-decoration: none; transition: all 0.2s; display: block; } .link-card:hover { border-color: var(--color-accent, #3b82f6); background: var(--color-bg-tertiary, #1e293b); } .link-card-name { font-size: 15px; font-weight: 600; color: var(--color-text-primary, #f8fafc); margin-bottom: 6px; } .link-card-desc { font-size: 13px; color: var(--color-text-secondary, #94a3b8); line-height: 1.5; } /* 本站信息卡片 */ .site-info-card { background: var(--color-bg-secondary, #0f172a); border: 1px solid var(--color-border, #334155); border-radius: var(--radius-md, 12px); padding: var(--space-md, 24px); margin: var(--space-sm, 16px) 0; } .site-info-card .site-info-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: 15px; } .site-info-card .site-info-label { color: var(--color-text-tertiary, #cbd5e1); min-width: 80px; flex-shrink: 0; } .site-info-card .site-info-value { color: var(--color-text-primary, #f8fafc); flex: 1; } .copy-code-block { background: var(--color-bg-primary, #020617); border: 1px solid var(--color-border, #334155); border-radius: var(--radius-sm, 8px); padding: 12px 16px; font-family: 'Menlo', 'Consolas', 'Courier New', monospace; font-size: 13px; color: var(--color-text-tertiary, #cbd5e1); word-break: break-all; line-height: 1.6; position: relative; margin-top: var(--space-xs, 8px); } .btn-copy-code { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-xs, 8px); padding: 8px 16px; background: var(--color-bg-tertiary, #1e293b); border: 1px solid var(--color-border, #334155); border-radius: var(--radius-sm, 8px); color: var(--color-text-primary, #f8fafc); font-size: 14px; cursor: pointer; transition: all 0.2s; } .btn-copy-code:hover { border-color: var(--color-accent, #3b82f6); color: var(--color-accent, #3b82f6); } /* 友链列表空状态提示 */ .links-empty-hint { grid-column: 1 / -1; color: var(--color-text-secondary, #94a3b8); font-size: 14px; text-align: center; padding: 32px 0; } @media (max-width: 768px) { .static-page { padding: var(--space-lg, 32px) 16px; } .static-page h1 { font-size: 24px; } .static-page h2 { font-size: 18px; } .links-grid { grid-template-columns: 1fr 1fr; } } /* =========================================================== [data-theme="light"] 日间模式 — Hover 交互重写 方案 A：悬停时保持背景不变，仅通过阴影提供反馈 =========================================================== */ [data-theme="light"] .faq-item:hover, [data-theme="light"] .content-card:hover, [data-theme="light"] .list-item:hover { background-color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-color: #e2e8f0; color: inherit; transition: all 0.3s ease; } [data-theme="light"] .faq-question:hover { background-color: #ffffff !important; transition: background 0.3s ease; } [data-theme="light"] .card:hover { background: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } [data-theme="light"] .result-item:hover { background: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; } [data-theme="light"] .link-card:hover { background: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } [data-theme="light"] details.faq-item:hover { border-color: #e2e8f0; } /* 确保日间模式下 FAQ 等卡片默认背景为白 */ [data-theme="light"] .faq-item, [data-theme="light"] details.faq-item { background-color: #ffffff; } /* 日间模式下按钮 hover 保持原有样式不变（按钮不需要此规则） */ /* =========================================================== 统一站点头部（site-header）—— 模块主页与详情页共用 说明：详情页由 js/main.js 的 initDetailHeader() 动态注入此结构， 因此将样式放在全站都会加载的 main.css 中，保证视觉一致。 =========================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-header-alt); } .header-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; } .header-inner .logo { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-primary); background: none; -webkit-text-fill-color: var(--text-primary); background-clip: unset; } .nav-desktop { display: none; flex: 1; align-items: center; justify-content: center; gap: 1.5rem; } .nav-desktop a { text-decoration: none; font-size: 0.875rem; color: var(--text-footer); transition: color 0.2s ease; padding: 0; background: none; border-radius: 0; } .nav-desktop a:hover { color: var(--accent-dark); } .nav-desktop a.active { color: var(--text-primary); font-weight: 600; } .mobile-menu-btn { display: flex; align-items: center; justify-content: center; min-width: 44px; /* 触控友好：满足 WCAG 2.5.5 最小目标尺寸 */ min-height: 44px; color: var(--text-primary); font-size: 1.25rem; padding: 0.25rem; background: none; border: none; cursor: pointer; } .mobile-menu { display: none; padding: 0 1.5rem 1rem; background: var(--bg-header); } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 0.5rem 0; font-size: 0.875rem; text-decoration: none; color: var(--text-footer); transition: color 0.2s ease; } .mobile-menu a:hover { color: var(--accent-dark); } .mobile-menu a.active { color: var(--accent-dark); font-weight: 600; } @media (min-width: 768px) { .mobile-menu-btn { display: none; } .mobile-menu { display: none !important; } .nav-desktop { display: flex; } } /* 大屏 1920px 档（CLAUDE.md 五档断点补齐） 各页内容容器已自带 max-width 收口，此处仅放宽头部内栏， 让 1920+ 屏幕上 Logo 与导航有更舒展的横向空间，避免头部显得过窄。 */ @media (min-width: 1920px) { .site-header .header-inner { max-width: 1440px; } } /* 详情页：固定头部偏移，避免首屏内容被遮挡 */ body.detail-header main { padding-top: 4.5rem; } /* 焦点可见性（键盘导航无障碍） */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; border-radius: 4px; } /* =========================================================== 跳转链接（键盘 / 读屏用户可一键跳到主内容） =========================================================== */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--accent, #3b82f6); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; } /* =========================================================== 响应式微调 — 超小屏 375px（CLAUDE.md 五档断点补齐） =========================================================== */ @media (max-width: 375px) { .container { padding: 0 14px; } .card-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .page-title { font-size: 22px; } .page-subtitle { font-size: 13px; } .footer-grid { gap: 1rem; } .static-page h1 { font-size: 22px; } /* 注入式头部在超小屏收窄内边距、缩小 Logo，避免横向拥挤 */ .header-inner { padding: 0 1rem; } .header-inner .logo { font-size: 1.1rem; } } /* =========================================================== 尊重「减少动态效果」偏好（无障碍） =========================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ═══ header-footer.css ═══ */ /* =========================================================== header-footer.css — 全局统一导航栏与页脚样式 所有页面共享，与 index.html 保持完全一致 =========================================================== */ /* --- 固定导航栏 --- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-header-alt); } .header-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; } .header-inner .logo { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-primary); background: none; -webkit-text-fill-color: var(--text-primary); background-clip: unset; } /* 桌面端导航 */ .nav-desktop { display: none; flex: 1; align-items: center; justify-content: center; gap: 1.5rem; } .nav-desktop a { text-decoration: none; font-size: 0.875rem; color: var(--text-footer); transition: color 0.2s ease; padding: 0; background: none; border-radius: 0; } .nav-desktop a:hover { color: var(--accent-dark); } .nav-desktop a.active { color: var(--text-primary); } /* 移动端汉堡按钮 */ .mobile-menu-btn { display: block; color: var(--text-primary); font-size: 1.25rem; padding: 0.25rem; background: none; border: none; cursor: pointer; } /* 移动端下拉菜单 */ .mobile-menu { display: none; padding: 0 1.5rem 1rem; background: var(--bg-header); } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 0.5rem 0; font-size: 0.875rem; text-decoration: none; color: var(--text-footer); transition: color 0.2s ease; } .mobile-menu a:hover { color: var(--accent-dark); } @media (min-width: 768px) { .mobile-menu-btn { display: none; } .mobile-menu { display: none !important; } .nav-desktop { display: flex; } } /* =========================================================== 页脚 =========================================================== */ .site-footer { background: var(--bg-footer); border-top: 1px solid var(--border-footer); } .footer-inner { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.5rem; } .footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } } .footer-col h4 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 0.75rem; color: var(--text-primary); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: 0.5rem; } .footer-col ul li a { color: var(--text-footer); font-size: 0.75rem; text-decoration: none; transition: color 0.2s ease; } .footer-col ul li a:hover { color: var(--accent-dark); } .footer-divider { height: 1px; background: var(--border-footer); margin-bottom: 1.5rem; } .footer-copy { text-align: center; font-size: 0.75rem; color: var(--text-footer); } .footer-links { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-footer); } .footer-links a { color: var(--text-footer); text-decoration: none; transition: color 0.2s ease; } .footer-links a:hover { color: var(--accent-dark); } .footer-links .sep { color: var(--text-footer-sep); } /* 指南文章占位图：替代缺失的 placeholder-*.jpg，随主题自适应 */ .guide-figure { display:block; width:100%; height:auto; margin:1rem 0; color: var(--text-muted, #94a3b8); background: var(--bg-card, #0f172a); border:1px solid var(--border-color, #334155); border-radius:12px; } /* =========================================================== * R2：相邻工具推荐（main.js 动态注入组件，随主题自适应） * 设计对齐站点深蓝商务风：卡片背景 #1e293b、边框 #334155、强调 #3b82f6 * =========================================================== */ .related-tools { margin: 2.5rem 0 1rem; padding: 1.5rem; background: var(--bg-card, #0f172a); border: 1px solid var(--border-color, #334155); border-radius: 16px; } .related-tools-title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary, #f8fafc); margin: 0 0 1rem; } .related-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.875rem; } .related-tool-card { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; background: var(--bg-card-alt, #131824); border: 1px solid var(--border-color, #334155); border-radius: 12px; color: var(--text-primary, #f8fafc); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .related-tool-card:hover { border-color: var(--border-card-hover, #3b82f6); background: var(--bg-card-hover, #1e293b); transform: translateY(-2px); } .related-tool-icon { display: inline-flex; color: var(--accent, #3b82f6); flex: 0 0 auto; } .related-tool-name { font-size: 0.9rem; color: var(--text-secondary, #cbd5e1); } /* 响应式：五档断点（1920 桌面默认；1440/1024/768/375 收敛） */ @media (max-width: 1440px) { .related-tools-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } @media (max-width: 1024px) { .related-tools { padding: 1.25rem; } .related-tools-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } @media (max-width: 768px) { .related-tools-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.625rem; } .related-tool-card { padding: 0.75rem; } } @media (max-width: 375px) { .related-tools { margin: 1.5rem 0 0.5rem; padding: 1rem; } .related-tools-title { font-size: 1rem; } .related-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .related-tool-card { padding: 0.625rem; flex-direction: column; text-align: center; gap: 0.375rem; } .related-tool-name { font-size: 0.8rem; } } /* =========================================================== R3：免登录「收藏」按钮 + 首页/模块主页「最近使用 / 我的收藏」召回区 暗蓝主题，与 related-tools 视觉一致；纯色，避免相对资源依赖 =========================================================== */ .tb-bookmark-bar { margin: 0.75rem 0 1.25rem; } .tb-bookmark-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--bg-card-alt, #131824); border: 1px solid var(--border-color, #334155); border-radius: 999px; color: var(--text-primary, #cbd5e1); font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .tb-bookmark-btn:hover { border-color: var(--border-card-hover, #3b82f6); color: var(--text-primary, #f8fafc); } .tb-bookmark-btn svg { color: var(--text-muted, #64748b); transition: color 0.2s ease; } .tb-bookmark-btn.is-active { border-color: var(--warning, #f59e0b); color: var(--bookmark-active-text, #f8fafc); background: var(--bookmark-active-bg, #2a2113); } .tb-bookmark-btn.is-active svg { color: var(--warning, #f59e0b); fill: var(--warning, #f59e0b); } .tb-recents { margin: 2.5rem 0 1rem; padding: 1.5rem; background: var(--bg-card, #0f172a); border: 1px solid var(--border-color, #334155); border-radius: 16px; } .tb-recents-inner { display: flex; flex-direction: column; gap: 1.5rem; } .tb-recents-title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary, #f8fafc); margin: 0 0 1rem; } .tb-recents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.875rem; } .tb-recent-card { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; background: var(--bg-card-alt, #131824); border: 1px solid var(--border-color, #334155); border-radius: 12px; color: var(--text-primary, #f8fafc); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .tb-recent-card:hover { border-color: var(--border-card-hover, #3b82f6); background: var(--bg-card-hover, #1e293b); transform: translateY(-2px); } .tb-recent-icon { display: inline-flex; color: var(--accent, #3b82f6); flex: 0 0 auto; } .tb-recent-name { font-size: 0.9rem; color: var(--text-secondary, #cbd5e1); } /* 悬浮抽屉：我的工作台（最近使用 / 我的收藏） */ .tb-drawer-root { position: fixed; inset: 0; z-index: 70; pointer-events: none; /* 仅抽屉/遮罩拦截，关闭时不挡页面 */ overflow: hidden; /* 裁剪离屏抽屉，避免横向滚动 */ } .tb-drawer-fab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 14px 10px; border: 1px solid var(--border-color, #334155); border-right: none; background: var(--accent, #3b82f6); color: #fff; border-radius: 14px 0 0 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); writing-mode: vertical-rl; text-orientation: mixed; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; transition: background 0.2s ease, padding-right 0.2s ease; } .tb-drawer-fab svg { writing-mode: horizontal-tb; } .tb-drawer-fab:hover { background: var(--accent-dark, #2563eb); padding-right: 14px; } .tb-drawer-fab:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; } .tb-drawer { position: absolute; top: 0; right: 0; height: 100%; width: 340px; max-width: 86vw; background: var(--bg-card, #0f172a); border-left: 1px solid var(--border-color, #334155); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.28); transform: translateX(100%); transition: transform 0.28s ease; display: flex; flex-direction: column; pointer-events: auto; } .tb-drawer.open { transform: translateX(0); } .tb-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border-color, #334155); flex: 0 0 auto; } .tb-drawer-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text-primary, #f8fafc); } .tb-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-color, #334155); background: transparent; color: var(--text-secondary, #94a3b8); cursor: pointer; } .tb-drawer-close:hover { background: var(--bg-card-hover, #1e293b); color: var(--text-primary, #f8fafc); } .tb-drawer-close:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; } .tb-drawer-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; flex: 1 1 auto; } .tb-drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.28s ease; pointer-events: none; } .tb-drawer-scrim.show { opacity: 1; pointer-events: auto; } body.tb-drawer-open { overflow: hidden; } /* R3 响应式：五档断点 */ @media (max-width: 1440px) { .tb-recents-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } @media (max-width: 1024px) { .tb-recents { padding: 1.25rem; } .tb-recents-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } @media (max-width: 768px) { .tb-recents-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.625rem; } .tb-recent-card { padding: 0.75rem; } } @media (max-width: 375px) { .tb-recents { margin: 1.5rem 0 0.5rem; padding: 1rem; } .tb-recents-title { font-size: 1rem; } .tb-recents-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .tb-recent-card { padding: 0.625rem; flex-direction: column; text-align: center; gap: 0.375rem; } .tb-recent-name { font-size: 0.8rem; } } /* =========================================================== R2：工具页场景文案 + 示例（防御式注入，零外部依赖） 暗蓝主题，与 related-tools / R3 视觉一致 =========================================================== */ .scenario-block { margin: 1.5rem 0 0.5rem; padding: 1.5rem; background: var(--bg-card, #0f172a); border: 1px solid var(--border-color, #334155); border-radius: 16px; } .scenario-title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary, #f8fafc); margin: 0 0 1rem; } .scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.875rem; } .scenario-card { padding: 1rem; background: var(--bg-card-alt, #131824); border: 1px solid var(--border-color, #334155); border-radius: 12px; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .scenario-card:hover { border-color: var(--border-card-hover, #3b82f6); background: var(--bg-card-hover, #1e293b); transform: translateY(-2px); } .scenario-icon { display: inline-flex; font-size: 1.5rem; line-height: 1; margin-bottom: 0.5rem; } .scenario-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary, #f8fafc); margin: 0 0 0.375rem; } .scenario-desc { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary, #94a3b8); margin: 0; } .scenario-example { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--accent-bg-light, rgba(59,130,246,0.12)); border: 1px dashed var(--border-color, #334155); border-radius: 12px; } .scenario-example-fig { flex: 0 0 auto; width: 160px; max-width: 40%; color: var(--accent, #3b82f6); } .scenario-example-fig svg { width: 100%; height: auto; display: block; } .scenario-example-text { flex: 1 1 auto; min-width: 0; } .scenario-example-label { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--accent-badge-color, #60a5fa); background: var(--accent-badge-bg, rgba(59,130,246,0.15)); border: 1px solid var(--accent-border, rgba(59,130,246,0.25)); border-radius: 999px; padding: 0.125rem 0.625rem; margin-bottom: 0.5rem; } .scenario-example-text p { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary, #94a3b8); margin: 0; } /* R2 响应式：五档断点 */ @media (max-width: 1440px) { .scenario-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (max-width: 1024px) { .scenario-block { padding: 1.25rem; } .scenario-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } @media (max-width: 768px) { .scenario-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.625rem; } .scenario-card { padding: 0.75rem; } .scenario-example { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .scenario-example-fig { width: 140px; max-width: 60%; } } @media (max-width: 375px) { .scenario-block { margin: 1rem 0 0.5rem; padding: 1rem; } .scenario-title { font-size: 1rem; } .scenario-grid { grid-template-columns: 1fr; gap: 0.5rem; } .scenario-card { padding: 0.625rem; } .scenario-example { padding: 0.875rem; } .scenario-example-fig { width: 120px; } }