/* ============================================================================ * 2026-09-24 全站外观升级 * ---------------------------------------------------------------------------- * 起因：用户反馈"网站太普通、没有眼前一亮、没有停留的冲动"。 * 诊断结果：整站 0 个 @keyframes、hero 只有一行字加两个按钮、没有深色模式。 * * 本次加的东西（都在这一块里，方便整体回滚）： * 1. 深色模式（跟随系统 + 手动切换） * 2. Hero 工具星图（canvas 在 js/home-hero.js） * 3. 动效与微交互（滚动渐显 / 悬停光晕 / 按钮反馈） * 4. 命令面板 Ctrl+K * 5. 我的工作台（收藏 / 最近 / 进度 / 便签） * 6. 每日一格 * * 约定：新增样式一律用变量取色，别再硬编码 —— 否则深色模式又要补一堆覆盖。 * ========================================================================== */ /* ---------------------------------------------------------------- 1. 深色模式 用 html[data-theme] 单一开关（主题由 JS 解析后写上去，避免 CSS 写两遍变量表）。 为防刷新时白闪， 里有一段内联脚本先设好 data-theme，见 index.html。 注意：默认跟随系统；用户手动选过就听用户的。 */ html[data-theme='dark'] { --bg: #0b1020; --card-bg: #141a2b; --text: #e8ecf5; --text-light: #9aa7bd; --border: #262f45; --primary-light: #1c2440; --shadow: 0 4px 24px rgba(0, 0, 0, 0.4); /* 语义色板整体反转。 最容易踩的坑：--primary-dark 在浅色下是"比主色更深的强调色"， 底色一黑就得反过来变成"更亮"的强调色，否则深靛蓝压在深底上根本读不出来 （service.html 的报价数字就栽在这，只有 2.75:1）。 但 .btn-primary:hover 是拿它当**背景**用的，深底白字会反过来失效， 所以那一条在下面单独覆盖。 */ --primary-dark: #a5b4fc; --panel: #1c2440; --tint-a: #171d33; --tint-b: #1d1836; --tint-warm-a: #2a2110; --tint-warm-b: #33280f; --tint-warm-line: #4a3a15; /* ⚠️ 这里不能把 --on-warm 改成亮黄： 它压在 .featured-flag--service 的实心琥珀底(#f59e0b)上，两种主题下底都是琥珀， 改成亮黄会变成 1.49:1（我改过一版，扫描立刻抓出来了）。 深色下的暖色卡片走 zc 系与 tint-warm 系变量，不需要 --on-warm。 注意：注释里**不要**写「星号紧挨斜杠」的写法，那个符号会提前闭合注释， 残句会一路吞掉后面第一条声明。（这里踩过一次。） */ /* 页面内联灰阶整体反转成"亮灰"。 对比度实算（对 --card-bg #141a2b）：ink-1 15.3、ink-2 12.5、 ink-3 9.1、ink-4/5 6.5 —— 全部高于 WCAG 正文线 4.5。 */ --ink-1: #eef2fa; --ink-2: #d5dced; --ink-3: #b3bdd2; --ink-4: #98a3bb; --ink-5: #939eb6; --paper: #0f1526; --hair: #232b41; /* 星盘卡片：保留"太阳偏暖、月亮偏蓝、上升偏绿、天顶偏紫"的区分， 只把明度压下去。文字用 --ink-* 的亮灰，实算对比度都在 6:1 以上。 */ --zc-sun: linear-gradient(135deg, #2a2312, #1d1a14); --zc-moon: linear-gradient(135deg, #182031, #141821); --zc-asc: linear-gradient(135deg, #12251d, #131a17); --zc-mc: linear-gradient(135deg, #1e1830, #17151f); --zc-line: #2a3348; --warm-ink: #e8d5a3; --warm-ink-strong: #f5e3b0; --ok-ink: #6ee7b7; /* --on-dark / --on-dark-muted / --code-bg / --tooltip-bg 故意不在这里重定义： 它们描述的是"本来就该是深色的面板"，两种主题下同值。 */ color-scheme: dark; } /* --primary-dark 被当背景用的那一处，必须单独救回来（白字要压深底） */ html[data-theme='dark'] .btn-primary { background: #4f46e5; } html[data-theme='dark'] .btn-primary:hover { background: #6366f1; } /* 幽灵按钮同理：描边和文字都得用亮靛蓝 */ html[data-theme='dark'] .btn-ghost { color: #a5b4fc; border-color: #6366f1; } /* 深色下的兜底覆盖：样式表里还有 100 多处硬编码浅色， 这里只覆盖"最显眼、最容易读不清"的那几类，不做全量重写。 */ html[data-theme='dark'] body { background: var(--bg); color: var(--text); } html[data-theme='dark'] .site-header, html[data-theme='dark'] .site-footer { background: var(--card-bg); border-color: var(--border); } html[data-theme='dark'] .tool-card, html[data-theme='dark'] .featured-card, html[data-theme='dark'] .tool-inputs, html[data-theme='dark'] .tool-output { background: var(--card-bg); border-color: var(--border); } html[data-theme='dark'] .tool-card h3, html[data-theme='dark'] .featured-card h3 { color: var(--text); } html[data-theme='dark'] .tool-card p, html[data-theme='dark'] .featured-card p, html[data-theme='dark'] .tool-desc, html[data-theme='dark'] .section-sub { color: var(--text-light); } html[data-theme='dark'] .tool-search input, html[data-theme='dark'] .form-group input, html[data-theme='dark'] .form-group textarea, html[data-theme='dark'] .form-group select { background: #0f1526; color: var(--text); border-color: var(--border); } html[data-theme='dark'] .tool-status { background: #1c2440; color: #a5b4fc; } html[data-theme='dark'] .cat-nav a { background: var(--card-bg); border-color: var(--border); color: var(--text-light); } html[data-theme='dark'] .tool-cat-title { border-color: var(--border); } html[data-theme='dark'] .tool-tip, html[data-theme='dark'] .hero-sub { color: var(--text-light); } /* 服务推荐卡：上面那条 .featured-card 覆盖会把它压成普通卡、丢掉琥珀身份， 所以这里要更具体地救回来。 */ html[data-theme='dark'] .featured-card--service { background: linear-gradient(135deg, var(--tint-warm-a) 0%, var(--tint-warm-b) 100%); border-color: #b45309; } /* 隐私说明条：浅色下是"绿纸"，深色下换成深绿底浅绿字 */ html[data-theme='dark'] .privacy-note { background: #0f2a20; border-color: #1c4636; border-left-color: #34d399; color: #a7e8c8; } html[data-theme='dark'] .privacy-note b { color: #6ee7b7; } /* ---------------------------------------------------------------- 2. Hero 星图 */ .hero { position: relative; padding: 0; background: radial-gradient(120.0% 100.0% at 50% 0%, #1b2450 0%, #0d1225 45%, #080b16 100.0%); overflow: hidden; text-align: center; color: #eef2ff; } .hero-inner { position: relative; z-index: 2; padding: 56px 20px 30px; } .hero h1 { font-size: 44px; font-weight: 800; line-height: 1.25; letter-spacing: 0.5px; margin-bottom: 14px; color: #f4f7ff; } .hero .gradient-text { background: linear-gradient(92deg, #8b9dff 0%, #c084fc 45%, #f0abfc 100.0%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-sub { color: #a9b6d4; font-size: 16.5px; max-width: 620px; margin: 0 auto 24px; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero .btn-ghost { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); color: #dfe6ff; } .hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); } /* 星图画布：占据 hero 下半部，是这块的视觉主体 */ .hero-map { position: relative; height: 340px; margin-top: 6px; } #tool-map { width: 100.0%; height: 100.0%; display: block; } .hero-map-hint { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12.5px; color: #7e8cb0; pointer-events: none; } .hero-kbd { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-light); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: 11.5px; font-family: ui-monospace, Consolas, monospace; color: var(--ink-3, #5a6472); } /* Hero 区本身是深底，键帽要反过来用浅色 —— 原来这里写死了浅色，浅色主题下键盘提示落在白色顶栏上只有 1.42:1。 */ .hero .hero-kbd { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #cfd8f5; } .hero-stats { margin-top: 18px; font-size: 13.5px; color: #8f9dc0; } .hero-stats b { color: #dfe6ff; } .hero-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .hero-badges span { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 5px 14px; font-size: 12.5px; color: #b9c4e2; } @media (max-width: 560px) { .hero h1 { font-size: 29px; } .hero-sub { font-size: 15px; } .hero-map { height: 260px; } .hero-inner { padding: 40px 16px 24px; } } /* ---------------------------------------------------------------- 3. 动效 */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes popIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes pulseGlow { from, to { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.42); } 50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); } } /* 滚动渐显：默认先藏起来，.in 由 IntersectionObserver 加上。 ⚠️ 没有 JS 时不能把内容一直藏住 —— 所以用 html.js-on 做前提。 */ html.js-on .reveal { opacity: 0; transform: translateY(16px); } html.js-on .reveal.in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } html.js-on .reveal.d1.in { transition-delay: .06s; } html.js-on .reveal.d2.in { transition-delay: .12s; } html.js-on .reveal.d3.in { transition-delay: .18s; } /* 工具卡：悬停光晕跟着鼠标（--mx/--my 由 JS 写入） */ .tool-card { position: relative; overflow: hidden; transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s; } .tool-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .25s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, 0.16), transparent 62%); pointer-events: none; } .tool-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.13); } .tool-card:hover::before { opacity: 1; } .tool-card:active { transform: translateY(-1px) scale(0.995); } .tool-card .tool-icon { transition: transform .28s cubic-bezier(.22,.61,.36,1); } .tool-card:hover .tool-icon { transform: scale(1.16) rotate(-4deg); } .btn { transition: transform .16s, box-shadow .16s, background .16s, border-color .16s; } .btn:active { transform: scale(0.97); } .btn-primary { animation: pulseGlow 3.4s ease-out 1.2s 2; } /* 主题切换按钮 */ .theme-toggle { width: 36px; height: 36px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 10px; cursor: pointer; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: transform .18s, border-color .18s; } .theme-toggle:hover { transform: rotate(-16deg) scale(1.06); border-color: var(--primary); } /* ---------------------------------------------------------------- 4. 命令面板 */ .cmdk-mask { position: fixed; inset: 0; z-index: 999; background: rgba(8, 11, 22, 0.55); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; animation: popIn .18s ease-out; } .cmdk-mask[hidden] { display: none; } .cmdk { width: 100.0%; max-width: 560px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); overflow: hidden; } .cmdk-input { width: 100.0%; border: 0; outline: 0; padding: 16px 18px; font-size: 16px; font-family: inherit; background: transparent; color: var(--text); border-bottom: 1px solid var(--border); } .cmdk-list { max-height: 46vh; overflow: auto; padding: 6px; } .cmdk-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--text); text-decoration: none; font-size: 14.5px; } .cmdk-item .ci { font-size: 18px; width: 22px; text-align: center; flex: none; } .cmdk-item .cn { flex: 1; } .cmdk-item .ct { font-size: 11.5px; color: var(--text-light); } .cmdk-item.on, .cmdk-item:hover { background: var(--primary-light); } .cmdk-empty { padding: 18px; text-align: center; color: var(--text-light); font-size: 14px; } .cmdk-foot { padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-light); display: flex; gap: 14px; justify-content: flex-end; } /* ---------------------------------------------------------------- 5. 我的工作台 */ .wb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; } .wb-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; } .wb-card h3 { font-size: 14px; margin-bottom: 10px; color: var(--text); } .wb-card .wb-sub { font-size: 12px; color: var(--text-light); margin-bottom: 10px; } .wb-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .wb-list a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); text-decoration: none; padding: 6px 8px; border-radius: 8px; } .wb-list a:hover { background: var(--primary-light); } .wb-list .e { flex: none; } .wb-empty { font-size: 13px; color: var(--text-light); } .wb-progress { height: 8px; background: var(--primary-light); border-radius: 999px; overflow: hidden; margin: 8px 0 6px; } .wb-progress i { display: block; height: 100.0%; width: 0; background: linear-gradient(90deg, var(--primary), #a855f7); border-radius: 999px; transition: width .6s cubic-bezier(.22,.61,.36,1); } .wb-note { width: 100.0%; min-height: 92px; resize: vertical; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-family: inherit; background: transparent; color: var(--text); } .wb-foot { font-size: 11.5px; color: var(--text-light); margin-top: 12px; line-height: 1.7; } .wb-star { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; opacity: 0.32; transition: opacity .18s, transform .18s; } .wb-star:hover { opacity: 1; transform: scale(1.18); } .wb-star.on { opacity: 1; } .tool-card { position: relative; } /* ---------------------------------------------------------------- 6. 每日一格 */ .daily { background: linear-gradient(120deg, var(--primary-light), transparent 70%); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .daily-swatch { width: 52px; height: 52px; border-radius: 12px; flex: none; border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } .daily-body { flex: 1 1 240px; min-width: 0; } .daily-body .t { font-size: 13px; color: var(--text-light); } .daily-body .v { font-size: 15.5px; color: var(--text); font-weight: 600; margin: 2px 0 6px; } .daily-body .q { font-size: 14px; color: var(--text); line-height: 1.7; } .daily .btn { flex: none; } /* ---------------------------------------------------------------- 8. 顶部工具区 */ .header-tools { display: flex; align-items: center; gap: 8px; flex: none; } .cmdk-open { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 10px; font-size: 13px; font-family: inherit; color: var(--text-light); cursor: pointer; transition: border-color .18s, color .18s, transform .18s; } .cmdk-open:hover { border-color: var(--primary); color: var(--primary); } .cmdk-open:active { transform: scale(.97); } @media (max-width: 760px) { /* 窄屏：搜索按钮只留图标，导航也别挤成两行 */ .cmdk-open-t { display: none; } .cmdk-open .hero-kbd { display: none; } .header-tools { gap: 6px; } } @media (prefers-reduced-motion: reduce) { html.js-on .reveal { opacity: 1 !important; transform: none !important; } .btn-primary { animation: none !important; } .tool-card:hover { transform: none; } * { scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- 9. 工具页在深色下的处理 设计取舍：**外壳走深色，工作区保留浅色"纸面"。** 36 个工具页各自带内联样式，把它们逐个改深风险很大 —— 而且我这边看不到渲染结果，改了也不敢说好看。 深色外壳 + 浅色工作台是常见做法（像深色 IDE 里的浅色编辑器）， 对图片 / PDF / 画板这类工具来说，"白纸"本来也该是白的。 */ html[data-theme='dark'] .tool-page { color: var(--text); } html[data-theme='dark'] .tool-page h1 { color: var(--text); } html[data-theme='dark'] .tool-tip { color: var(--text-light); } html[data-theme='dark'] .site-footer, html[data-theme='dark'] .site-footer a, html[data-theme='dark'] .main-nav a { color: var(--text-light); } html[data-theme='dark'] .main-nav a:hover { color: var(--text); } html[data-theme='dark'] .brand { color: var(--text); } /* 浅色"纸面"在深色底上给一点边界感，别像一块突兀的白斑 */ html[data-theme='dark'] .tool-inputs, html[data-theme='dark'] .tool-output, html[data-theme='dark'] .form-group textarea, html[data-theme='dark'] .form-group input, html[data-theme='dark'] .form-group select { box-shadow: 0 2px 18px rgba(0, 0, 0, .35); }