/* ============================================================ 全能工具 · 公共 UI 组件库 (tl654-ui · v2.0) 设计语言：东方编辑·古籍朱印（戊土命格色系） 依赖：无（纯 CSS / 零第三方） 引入方式： 配色哲学：宣纸米底（土用神）+ 朱砂红印（火喜神）+ 赭石金（土辅）+ 墨色字 禁用色：纯白 / 灰 / 蓝 / 青绿 / 黑（金水木忌神） 目录： §1 设计令牌（CSS Variables · 浅 / 暗双主题） §2 浏览器 Reset + 元素基础 §3 焦点 / 选区 / 滚动条 §4 跳过链接 .skip-link (a11y) §5 容器 .container (含 safe-area-inset) §6 背景层 .bg / .orb / .noise（命格五色暖光晕） §7 宣纸片 .glass / .glass-strong / .glass-soft（哑光厚实，非玻璃） §8 Section .section / .section-head §9 按钮 .btn / .btn-primary / .btn-secondary / .btn-ghost (含 -sm/-lg 尺寸) §10 Icon 圆角块 .icon-tile (-sm/-md/-lg) §11 Tag .tag / .tag-list（横滑 + 两端 mask 淡出） §12 Badge .badge / .badge-with-dot §13 Stats .stats / .stat (tabular-nums 数字等宽) §14 模态框 .modal / .modal-content / .modal-form / .modal-body / .modal-foot §15 a11y (prefers-reduced-motion + hover: none) §16 移动端优化 §28 古籍/朱印模块（.seal-stamp / .classical-frame / .paper-grain / .scroll-divider / .ordinal-seal） ============================================================ */ /* ============================================================ §1 设计令牌（戊土命格色系） ============================================================ */ :root { color-scheme: light dark; /* 字体栈：中文加入思源宋体/Noto Serif SC（衬线，古籍编辑感） */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", "PingFang SC", serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* 浅色：宣纸米底 + 暖墨文字 2026-05 加深的宣纸案台：杏仁米 → 米卡其暖渐变（土用神，仍属"浅暖"非深色）。 目的＝让米白卡片(#FEF8EC)更"浮起"（卡片浮起比 1.18→1.38）； 深度封顶受"直接落在背景上的副标题 text-3"约束（加深后仍 5.2:1 达 AA）。 */ --bg-base: linear-gradient(180deg, #F4E8CC 0%, #E7D4AC 100%); --bg-veil: rgba(250,243,224,0.7); --text-1: #2C1810; /* 古墨色（替代 #1a1a1f 冷黑） */ --text-2: #3D2914; /* 赭褐 */ --text-3: #6B4F35; /* 沉香褐 — 替代灰 */ --text-soft: #79603C; /* 浅沉香加深：placeholder/提示达 AA 5.3:1（旧 #8B6F47 仅 4.25） */ --divider: rgba(107,52,16,0.13); /* 栗色淡线，非黑（加深一档，分隔更清晰） */ /* 宣纸片：哑光厚实米色（非玻璃） */ --glass-bg: rgba(254,248,236,0.95); /* P3 卡片提亮+提不透明：与米底拉开层级、卡片更"浮起"（仍低于 strong，同心层级不乱） */ --glass-bg-strong: rgba(255,250,238,0.96); --glass-bg-soft: rgba(250,238,213,0.70); --glass-blur: 0px; /* 命理水气大忌 → 关闭 blur */ --glass-sat: 100%; /* 实色卡片背景（统一引用 --glass-bg，让所有 panel/container 与 header (.glass) 完全同色） */ --card-solid-bg: var(--glass-bg); --card-solid-bg-hover: var(--glass-bg-strong); --container-solid-bg: var(--glass-bg); /* doc 内部下沉色（暖色，赭褐淡 alpha） */ --surface-2: rgba(107,52,16,0.05); --surface-3: rgba(107,52,16,0.09); /* 阴影：暖栗色（非冷蓝），模拟暖光投射 */ --glass-shadow: inset 0 1px 0 rgba(255,243,224,0.85), 0 8px 24px rgba(107,52,16,0.13), 0 2px 5px rgba(60,30,10,0.06); --glass-shadow-hover: inset 0 1px 0 rgba(255,247,232,0.95), 0 14px 36px rgba(107,52,16,0.14), 0 4px 10px rgba(60,30,10,0.07); /* 边缘 gradient border：金棕 → 暗栗 → 米色，模拟纸边老化 */ --border-grad: linear-gradient(135deg, rgba(184,115,46,0.40) 0%, rgba(107,52,16,0.10) 50%, rgba(212,165,116,0.35) 100%); /* orb 命格五色暖光晕（朱红/赭金/琥珀/绛紫/沉香） */ --orb-op: 0.22; --orb-c1: #C0392B; /* 朱砂红（火喜神） */ --orb-c2: #B8732E; /* 赭石金（土用神） */ --orb-c3: #D97706; /* 琥珀（火土过渡） */ --orb-c4: #6B2C5C; /* 绛紫（火土过渡，深点缀） */ --orb-c5: #8B5A2B; /* 沉香（土辅助） */ /* 品牌强调色：朱砂红主色（替代蓝） */ --accent: #C42E22; /* P5 v2 微深：从环境暖橙金中更"跳"，链接/白字均达 5.0:1（旧 #C0392B 4.91） */ --accent-2: #8B2C2C; --accent-grad: linear-gradient(135deg, #C42E22 0%, #8B2C2C 100%); --accent-soft: rgba(196,46,34,0.12); /* P1 文字/链接专用 accent：与"填充色"分角色。浅色=朱砂；暗色另行提亮（见 dark 块）， 解决暗底链接对比度（旧暗色沿用 #C0392B 仅 3.38:1 不达标） */ --accent-text: var(--accent); /* P1 on-accent：accent/深色填充之上的文字色（暖白，替代金气纯白 #fff）。 两种主题同色——它永远落在饱和填充上，无需 dark 覆盖 */ --on-accent: #FAF3E0; /* 副品牌色（赭金） */ --gold: #B8732E; --gold-deep: #6B3410; --gold-light: #D4A574; --gold-soft: rgba(184,115,46,0.12); /* P2 语义色（success/warning/danger/info）· 角色＝填充/图标/描边/soft 底 色相均为暖系（避忌蓝绿），取自命格色库：松石绿成功 / 暖琥珀警示 / 朱砂危险 / 赭金信息。 注意：暖中间调当浅底正文色对比度不足 → 语义"实色"用于填充/图标，文字态请配深色或用 soft 底。 */ --success: #5F8A4F; --success-soft: rgba(95,138,79,0.12); /* 松石绿（色库唯一许可绿） */ --warning: #C9760E; --warning-soft: rgba(201,118,14,0.12); /* 暖琥珀加深（浅底图标可辨） */ --danger: #C0392B; --danger-soft: rgba(192,57,43,0.12); /* 朱砂（色库指定 danger=朱砂） */ --info: #B8732E; --info-soft: rgba(184,115,46,0.12); /* 赭金（替代蓝 info，避水气） */ /* 五行五色命格化色板（mingli 类工具专用 · 详见 docs §7.4.3） 设计意图：火土命格喜用 → 鲜艳；金水木命格忌用 → 灰暗 视觉直接传达"喜忌"。禁止再用 Tailwind 蓝/绿/黄 */ --elem-huo: #C0392B; /* 火 喜神 朱砂红 */ --elem-huo-soft: rgba(192, 57, 43, 0.08); --elem-tu: #B8732E; /* 土 用神 赭石金 */ --elem-tu-soft: rgba(184, 115, 46, 0.08); --elem-jin: #8B6F47; /* 金 忌神 浅沉香 */ --elem-jin-soft: rgba(139, 111, 71, 0.08); --elem-shui: #6B2C5C; /* 水 忌神 绛紫 */ --elem-shui-soft: rgba(107, 44, 92, 0.08); --elem-mu: #5D7245; /* 木 忌神 苔绿 */ --elem-mu-soft: rgba(93, 114, 69, 0.08); /* ============= 工具页全局间距 token（单一真理源 · 一处改全站）============= 设计：所有"卡片 ↔ 卡片"间距用 owl 选择器（margin-top 单边向下），不混 padding-bottom 修改这两个值即可调整整站工具页节奏，无需找各文件 padding */ --tool-gap: var(--space-5); /* 桌面 24 - 导航↔hero / hero↔section / section↔section */ --tool-gap-mobile: var(--space-4); /* 移动 16 */ /* 圆角 / 间距 */ /* 苹果连续圆角阶梯（2026-05：略调圆润 + 全局 squircle 平滑，松开 v2"古籍更方"收紧） */ --radius-xs: 6px; /* 小控件 / 内联 code / 细插槽 */ --radius-sm: 10px; /* 输入 / 标签 / tab */ --radius-md: 14px; /* 按钮 / panel / 中卡 */ --radius-lg: 18px; /* 大卡 / hero / doc */ --radius-xl: 26px; /* modal / 巨 hero */ --radius-full: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* 缓动曲线 */ --easing: cubic-bezier(0.4, 0, 0.2, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --container-w: 1200px; } /* 暗色 · 跟随系统（夜墨风：深栗底 + 暖朱红主色，避免冷蓝水气） */ :root[data-theme="dark"] { --bg-base: radial-gradient(ellipse 110% 50% at 50% 0%, hsla(20, 30%, 14%, 0.6), transparent 65%), linear-gradient(180deg, #1F140C 0%, #14100A 100%); --bg-veil: rgba(31,20,12,0.6); --text-1: #F5E6D3; /* 月光宣纸 */ --text-2: #D9C5A8; --text-3: #A89175; --text-soft: #A18966; /* P4 暗色提亮：暗卡上达 4.89:1（旧 #8C7556 仅 3.73 不达标） */ --divider: rgba(212,165,116,0.14); --glass-bg: rgba(45,28,18,0.78); --glass-bg-strong: rgba(55,35,22,0.88); --glass-bg-soft: rgba(45,28,18,0.50); --card-solid-bg: var(--glass-bg); --card-solid-bg-hover: var(--glass-bg-strong); --container-solid-bg: var(--glass-bg); --surface-2: rgba(255,230,200,0.05); --surface-3: rgba(255,230,200,0.09); --glass-shadow: inset 0 1px 0 rgba(255,220,180,0.08), 0 4px 16px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.25); --glass-shadow-hover: inset 0 1px 0 rgba(255,220,180,0.12), 0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.35); --border-grad: linear-gradient(135deg, rgba(212,165,116,0.25) 0%, rgba(212,165,116,0.03) 50%, rgba(212,165,116,0.18) 100%); --accent-soft: rgba(192,57,43,0.20); --accent-text: #E2542C; /* P1 霹雳金红：暗底链接/强调达 5.0:1（填充仍用 --accent） */ --danger: #E2542C; /* 暗色危险文字提亮（浅色 #C0392B 于暗底仅 3.48） */ --orb-op: 0.30; --orb-c1: #C0392B; --orb-c2: #B8732E; --orb-c3: #D97706; --orb-c4: #6B2C5C; --orb-c5: #8B5A2B; } /* 暗色 · 手动覆盖（优先级高于系统） */ [data-theme="dark"] { --bg-base: radial-gradient(ellipse 110% 50% at 50% 0%, hsla(20, 30%, 14%, 0.6), transparent 65%), linear-gradient(180deg, #1F140C 0%, #14100A 100%); --bg-veil: rgba(31,20,12,0.6); --text-1: #F5E6D3; --text-2: #D9C5A8; --text-3: #A89175; --text-soft: #A18966; /* P4 暗色提亮：暗卡上达 4.89:1（旧 #8C7556 仅 3.73 不达标） */ --divider: rgba(212,165,116,0.14); --glass-bg: rgba(45,28,18,0.78); --glass-bg-strong: rgba(55,35,22,0.88); --glass-bg-soft: rgba(45,28,18,0.50); --card-solid-bg: var(--glass-bg); --card-solid-bg-hover: var(--glass-bg-strong); --container-solid-bg: var(--glass-bg); --surface-2: rgba(255,230,200,0.05); --surface-3: rgba(255,230,200,0.09); --glass-shadow: inset 0 1px 0 rgba(255,220,180,0.08), 0 4px 16px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.25); --glass-shadow-hover: inset 0 1px 0 rgba(255,220,180,0.12), 0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.35); --border-grad: linear-gradient(135deg, rgba(212,165,116,0.25) 0%, rgba(212,165,116,0.03) 50%, rgba(212,165,116,0.18) 100%); --accent-soft: rgba(192,57,43,0.20); --accent-text: #E2542C; /* P1 霹雳金红：暗底链接/强调达 5.0:1（填充仍用 --accent） */ --danger: #E2542C; /* 暗色危险文字提亮（浅色 #C0392B 于暗底仅 3.48） */ --orb-op: 0.30; --orb-c1: #C0392B; --orb-c2: #B8732E; --orb-c3: #D97706; --orb-c4: #6B2C5C; --orb-c5: #8B5A2B; } /* ============================================================ §2 浏览器 Reset + 元素基础 ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ 苹果连续圆角（squircle / 超椭圆）· 全局渐进增强 - 让所有圆角呈苹果那种"平滑过渡"曲线（实测 squircle 关键字最自然） - 不支持的浏览器（截至 2026 初 Safari/Firefox 多数版本）自动回退普通圆弧 - 圆形(50%)/胶囊(full) 必须复位 round：否则圆点/头像/胶囊会被压成"方圆" */ *, *::before, *::after { corner-shape: squircle; } .orb, .tag, .badge, .badge .dot, .hero-badge, .hero-badge .dot, .search-hero, .search-btn, .almanac-yiji .ji::before, .cat-count, .cta-glow, .search-modal-clear, .article-cat-chip, .cat-stats .stat-dot, .subcat-chip, .subcat-chip .chip-count, .related-count, .tool-privacy-note, .diagram-legend-item, .steps-ol li::before, .sub-chip, .pager-btn, .search-state-link, .tool-form input[type="range"]::-webkit-slider-thumb, .tool-form input[type="range"]::-moz-range-thumb, .toast, .history-remove, .seal-stamp.round, .scroll-divider .mark, .mobile-bottom-nav .m-nav-item--search .m-nav-search-bubble { corner-shape: round; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; /* 防 sticky header 遮挡锚点 */ tab-size: 4; scrollbar-width: thin; scrollbar-color: rgba(128,128,140,0.35) transparent; } body { /* 古籍编辑美学：正文宋体（衬线），数字与代码仍走系统等宽 */ font-family: var(--font-serif); font-size: 15px; line-height: 1.7; /* 宋体竖向韵律稍松一档 */ color: var(--text-1); background: var(--bg-base); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "palt" 1; /* 中文比例对齐 */ min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } /* 数字/英文/代码保持原比例字栈（宋体的拉丁数字偏窄） */ code, kbd, samp, pre, .font-mono, [class*="-mono"], input, textarea, select, .tabular-nums, [class*="tabular"] { font-family: var(--font-mono); } /* 输入控件用 sans（宋体在小字号 input 里识别度低） */ input, textarea, select, button { font-family: var(--font-sans); } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; } a { color: inherit; text-decoration: none; touch-action: manipulation; } input, textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; -webkit-appearance: none; appearance: none; font-size: 16px; /* iOS Safari 防 focus 自动放大（>=16px）*/ } /* ============================================================ §2.1 全局防溢出（grid/flex 容器内表单控件） ============================================================ Grid/Flex 默认 min-width = auto = min-content，对 input 而言 min-content 等于 "占位符或当前值"宽度，会撑爆 1fr 列。强制 min-width: 0 让 grid 'minmax(0, 1fr)' 语义在 input 上也生效——大厂（Linear / Stripe / Notion）工具表单标准做法 作用范围限 .panel-body 内（工具页容器），避免影响管理后台 / 弹窗等其他场景 */ .panel-body input, .panel-body textarea, .panel-body select { min-width: 0; } ul { list-style: none; } /* ============================================================ §3 焦点 / 选区 / 滚动条 ============================================================ */ ::selection { background: var(--accent-soft); color: var(--text-1); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(128,128,140,0.3); border-radius: var(--radius-xs); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(128,128,140,0.5); background-clip: padding-box; } /* 全局 focus-visible 兜底 */ :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs); } /* ============================================================ §4 跳过链接 (.skip-link) ============================================================ */ .skip-link { position: absolute; left: -9999px; top: 12px; padding: 8px 16px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm); z-index: 9999; } .skip-link:focus { left: 12px; } /* ============================================================ §5 容器 .container 策略： - 大屏（>1200）不加 padding —— 内容直接占满 max-width 1200，与 .header-inner 同宽 （视口已天然有 (vw - 1200) / 2 留白，再加 padding 是双重浪费） - 窄屏（≤1200）才加 padding 防内容贴屏幕边 - 移动端（≤640）padding 略大些更舒服 ============================================================ */ .container { max-width: var(--container-w); margin: 0 auto; width: 100%; } @media (max-width: 1200px) { .container { padding-left: max(var(--space-3), env(safe-area-inset-left)); padding-right: max(var(--space-3), env(safe-area-inset-right)); } } @media (max-width: 640px) { .container { padding-left: max(var(--space-4), env(safe-area-inset-left)); padding-right: max(var(--space-4), env(safe-area-inset-right)); } } /* ============================================================ §6 背景层 (.bg / .orb / .noise) 用法：放在 body 第一个子元素，aria-hidden 光晕：命格五色暖光（朱红/赭金/琥珀/绛紫/沉香）替代蓝紫水气 噪点：暖棕纸纤维替代黑色 noise（贴近真宣纸质感） ============================================================ */ .bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(90px); /* 光斑略柔，宣纸晕染感 */ opacity: var(--orb-op); mix-blend-mode: multiply; /* 在米底上叠出"墨色染晕"效果 */ } [data-theme="dark"] .orb, :root[data-theme="dark"] .orb { mix-blend-mode: screen; } .orb-1 { width: 600px; height: 600px; left: -180px; top: -120px; background: radial-gradient(circle, var(--orb-c1), transparent 65%); } .orb-2 { width: 520px; height: 520px; right: -160px; top: 220px; background: radial-gradient(circle, var(--orb-c2), transparent 65%); } .orb-3 { width: 700px; height: 700px; left: 28%; top: 760px; background: radial-gradient(circle, var(--orb-c3), transparent 65%); } .orb-4 { width: 480px; height: 480px; right: 18%; bottom: 200px; background: radial-gradient(circle, var(--orb-c4), transparent 65%); } .orb-5 { width: 560px; height: 560px; left: 40%; bottom: -120px; background: radial-gradient(circle, var(--orb-c5), transparent 65%); } /* 暗色：mix-blend-mode 单独覆盖（@media 不能嵌套在选择器规则里） */ :root[data-theme="dark"] .orb { mix-blend-mode: screen; } [data-theme="dark"] .orb { mix-blend-mode: screen; } .noise { position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: multiply; /* 暖棕色噪点（替代原黑色 alpha 噪点）→ 模拟真宣纸纤维 */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat; } /* ============================================================ §7 宣纸片 .glass / .glass-strong / .glass-soft 命格大改：玻璃 → 宣纸（去 blur 水气，改厚实哑光米色 + 暖浮雕阴影） 类名保留兼容（4883 行内所有引用照常生效），仅语义换骨。 含 ::before 金棕渐变描边模拟纸边老化（替代玻璃光照渐变） ============================================================ */ .glass { position: relative; background: var(--glass-bg); /* 命理水气大忌：删除 backdrop-filter blur */ box-shadow: var(--glass-shadow); border-radius: var(--radius-lg); isolation: isolate; } .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--border-grad); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } .glass > * { position: relative; z-index: 2; } .glass-strong { background: var(--glass-bg-strong); } .glass-soft { background: var(--glass-bg-soft); } /* 兼容旧浏览器：背景已经是实色米底，无需降级 */ @supports not (backdrop-filter: blur(1px)) { .glass { background: var(--glass-bg); } [data-theme="dark"] .glass { background: var(--glass-bg); } } /* ============================================================ §8 Section .section / .section-head ============================================================ */ .section { padding: var(--space-8) 0; } @media (max-width: 768px) { .section { padding: var(--space-7) 0; } } /* 垂直堆叠（替代逐个 panel 写 margin-bottom） 用法：
…panel × N…
桌面尺寸阶梯：.stack-y-sm 16px / 默认 .stack-y 24px / .stack-y-lg 32px / .stack-y-xl 48px 移动端 ≤768px 整体降一档：12 / 16 / 24 / 32 默认与 .tool-hero padding-bottom + .section-pad padding-top 之和完全相等 → "hero ↔ 第一个 panel" 与 "panel ↔ panel" 节奏 100% 闭环 兼容性：用 `> * + *` Lobotomized Owl 替代 flex gap，避免 display:none 子节点干扰 */ .stack-y { display: flex; flex-direction: column; } .stack-y-sm { display: flex; flex-direction: column; } .stack-y-lg { display: flex; flex-direction: column; } .stack-y-xl { display: flex; flex-direction: column; } /* 默认 .stack-y 用全局 --tool-gap token（与 main owl 间距统一）*/ .stack-y > * + * { margin-top: var(--tool-gap); } .stack-y-sm > * + * { margin-top: var(--space-4); } /* 16 紧凑变体 */ .stack-y-lg > * + * { margin-top: var(--space-6); } /* 32 宽松变体 */ .stack-y-xl > * + * { margin-top: var(--space-7); } /* 48 跨段 */ @media (max-width: 768px) { .stack-y > * + * { margin-top: var(--tool-gap-mobile); } .stack-y-sm > * + * { margin-top: var(--space-3); } .stack-y-lg > * + * { margin-top: var(--space-5); } .stack-y-xl > * + * { margin-top: var(--space-6); } } /* 工具页 section 内边距（响应式） 用法：
设计：与 .tool-hero padding-bottom 相加 = .stack-y 的 gap，整页节奏闭环 桌面 8/24（hero 16 + 8 = 24 = stack-y），移动 4/16（hero 12 + 4 = 16 = stack-y）*/ .section-pad { padding-top: 0; /* 间距由 main > * + * margin-top 统一控制 */ padding-bottom: var(--space-5); /* 桌面 24（页底空气）*/ } @media (max-width: 768px) { .section-pad { padding-bottom: var(--space-4); } /* 移动 16 */ } .section-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: var(--space-6); gap: var(--space-4); } .section-head h2, .section-title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 var(--space-1); } .section-subtitle, .section-head p { color: var(--text-3); font-size: 14px; } .section-head .more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--accent); white-space: nowrap; transition: gap .2s var(--easing); } .section-head .more:hover { gap: 10px; } /* ============================================================ §9 按钮 .btn / .btn-primary / .btn-secondary / .btn-ghost 尺寸：.btn-sm / .btn-lg ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; transition: all .2s var(--easing); white-space: nowrap; cursor: pointer; } .btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); } .btn-lg { height: 56px; padding: 0 32px; font-size: 15px; border-radius: var(--radius-md); } .btn-primary { background: var(--accent-grad); color: var(--on-accent); box-shadow: 0 4px 12px rgba(192,57,43,0.3), inset 0 1px 0 rgba(255,255,255,0.3); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(192,57,43,0.4), inset 0 1px 0 rgba(255,255,255,0.4); } .btn-primary:active { transform: translateY(0) scale(0.98); } .btn-secondary { background: var(--glass-bg-soft); color: var(--text-1); position: relative; } .btn-secondary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--border-grad); -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .btn-secondary:hover { background: var(--glass-bg); transform: translateY(-1px); } .btn-secondary:active { transform: translateY(0) scale(0.98); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--accent-soft); color: var(--text-1); } /* ============================================================ §10 Icon 圆角块 .icon-tile (-sm/-md/-lg) 用法：生 ============================================================ */ .icon-tile { display: grid; place-items: center; border-radius: var(--radius-lg); color: var(--on-accent); font-weight: 700; letter-spacing: -0.04em; flex-shrink: 0; /* 三层阴影模拟立体玻璃质感 */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 8px rgba(60,30,10,0.18), 0 8px 20px rgba(60,30,10,0.18), 0 2px 4px rgba(60,30,10,0.08); transition: transform .4s var(--easing-spring); } .icon-tile-sm { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 3px rgba(60,30,10,0.12), 0 2px 6px rgba(60,30,10,0.08); } .icon-tile-md { width: 36px; height: 36px; font-size: 13px; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(60,30,10,0.12), 0 3px 8px rgba(60,30,10,0.1); } .icon-tile-lg { width: 56px; height: 56px; font-size: 24px; border-radius: 16px; } /* ============================================================ §11 Tag .tag / .tag-list .tag-list：横滑列表，两端 mask 淡出 ============================================================ */ .tag { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; padding: 6px 14px; border-radius: var(--radius-full); background: var(--glass-bg-soft); font-size: 13px; color: var(--text-2); transition: all .2s var(--easing); position: relative; } .tag::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--border-grad); -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .tag:hover { color: var(--text-1); transform: translateY(-1px); background: var(--glass-bg); } .tag-list { display: flex; align-items: center; flex-wrap: nowrap; justify-content: center; gap: var(--space-2); max-width: 100%; padding: 4px 12px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } .tag-list::-webkit-scrollbar { display: none; } /* ------------------------------------------------------------ §11.1 朱印题签 .tag-seal（古籍工具页词条标签） 语言：木版印刷的"题签 / 落款"——非现代胶囊；默认赭金细框 + 古墨字 用法：嫁娶吉日 列表容器复用 .chip-wrap 或自写 flex（gap 8px / wrap） 覆盖配色：内联 style="--tag-seal-line: #C0392B; --tag-seal-soft: rgba(192,57,43,0.10);" 或父容器上挂 CSS 变量，所有 tag-seal 子元素继承 兜底：color-mix 不支持的旧浏览器降级到中性灰边，仍可读 ------------------------------------------------------------ */ .tag-seal { --tag-seal-line: #B8732E; /* 赭金（题字落款色，含蓄不抢朱印）*/ --tag-seal-soft: rgba(184,115,46,0.10); display: inline-flex; align-items: center; white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; padding: 4px 12px; border-radius: 6px; /* 题签直角圆 ≠ 胶囊 999 */ background: transparent; color: var(--text-1); text-decoration: none; border: 1px solid color-mix(in srgb, var(--tag-seal-line) 28%, transparent); transition: background 0.15s var(--easing), border-color 0.15s var(--easing), color 0.15s var(--easing); } .tag-seal:hover { background: var(--tag-seal-soft); border-color: var(--tag-seal-line); color: var(--tag-seal-line); text-decoration: none; } /* 暗模式略增边框对比 */ :root[data-theme="dark"] .tag-seal { border-color: color-mix(in srgb, var(--tag-seal-line) 42%, transparent); } [data-theme="dark"] .tag-seal { border-color: color-mix(in srgb, var(--tag-seal-line) 42%, transparent); } /* 色阶变体（语义级，覆盖默认赭金）： .tag-seal-zhu 朱砂红 — 吉 / 正向 / 重点链接 / 主品牌色相 .tag-seal-ink 沉香墨 — 凶 / 弱化 / 中性偏暗 / 长列表克制（避免红海） .tag-seal-violet 绛紫 — 学业 / 知性 / 特殊提示 不在变体表里的色，通过内联 style="--tag-seal-line:#xxx;--tag-seal-soft:rgba(...);" 临时覆盖 */ .tag-seal-zhu { --tag-seal-line: #C0392B; --tag-seal-soft: rgba(192,57,43,0.10); } .tag-seal-ink { --tag-seal-line: #6B4F35; --tag-seal-soft: rgba(107,79,53,0.10); } .tag-seal-violet { --tag-seal-line: #6B2C5C; --tag-seal-soft: rgba(107,44,92,0.10); } /* ------------------------------------------------------------ §11.2 相关工具入口卡 .rel-card（工具页底部"相关查询"区） 设计：去外壳 panel 和标题，多个独立 .panel 卡片直接 grid 排列 每张卡 = 图标 + 文字（主名 + 描述）+ 右箭头 hover：上浮 2px + 箭头变金色右移 用法：
历
老黄历
完整黄历 · 宜忌 · 神煞 · 节气一览
→ ...
网格：2 列桌面 → 1 列 ≤480px（与 .ss-rel-grid 同断点） ------------------------------------------------------------ */ .rel-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tool-gap); } @media (max-width: 768px) { .rel-card-grid { gap: var(--tool-gap-mobile); } } @media (max-width: 480px) { .rel-card-grid { grid-template-columns: 1fr; } } .rel-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); text-decoration: none; color: var(--text-1); transition: transform .15s var(--easing); } .rel-card:hover { transform: translateY(-2px); text-decoration: none; color: var(--text-1); } .rel-card .icon-tile { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--glass-bg-strong); } .rel-card-body { flex: 1; min-width: 0; } .rel-card-name { font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; } .rel-card-desc { font-size: 0.82rem; color: var(--text-3); line-height: 1.5; margin-top: 4px; } .rel-card-arrow { color: var(--text-3); font-size: 1.4rem; transition: color .15s var(--easing), transform .15s var(--easing); flex-shrink: 0; } .rel-card:hover .rel-card-arrow { color: var(--gold); transform: translateX(4px); } /* ============================================================ §12 Badge .badge / .badge-with-dot 用法：823 款工具上线 ============================================================ */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px 6px 8px; border-radius: var(--radius-full); background: var(--glass-bg-soft); font-size: 13px; color: var(--text-2); position: relative; } .badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--border-grad); -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #34c759; box-shadow: 0 0 12px rgba(52,199,89,0.6); animation: badge-pulse 2s ease-in-out infinite; } @keyframes badge-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(0.85); } } .badge strong { color: var(--text-1); font-weight: 600; } /* ============================================================ §13 Stats .stats / .stat ============================================================ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .stat { text-align: center; position: relative; } .stat:not(:last-child)::after { content: ""; position: absolute; right: calc(var(--space-4) * -0.5); top: 18%; bottom: 18%; width: 1px; background: var(--divider); } .stat strong { display: block; font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; letter-spacing: -0.03em; color: var(--text-1); line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .stat span { font-size: 13px; color: var(--text-3); } @media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } } /* ============================================================ §14 模态框 .modal / .modal-content / .modal-form / .modal-body / .modal-foot 原生 元素，命令面板风格 ============================================================ */ .modal { position: fixed; inset: 0; margin: auto; border: 0; padding: 0; background: transparent; width: min(640px, 92vw); max-height: min(80vh, 600px); border-radius: var(--radius-lg); color: var(--text-1); } .modal::backdrop { /* 暖古墨遮罩（命格化 · 删除 blur 水气 + 冷蓝） */ background: rgba(44, 24, 16, 0.55); } [data-theme="dark"] .modal::backdrop { background: rgba(0,0,0,0.65); } :root[data-theme="dark"] .modal::backdrop { background: rgba(0,0,0,0.65); } .modal-content { background: var(--glass-bg-strong); /* 已删除 backdrop-filter + isolation：Safari 中 组合渲染会让内容透明不可见； blur 也是命格水气大忌 */ border-radius: var(--radius-lg); box-shadow: var(--glass-shadow-hover); position: relative; display: flex; flex-direction: column; height: 100%; /* 不用 overflow: hidden（会裁外光环）；内部 modal-body 自己有 overflow-y: auto */ } .modal-content::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--border-grad); -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } .modal-form { display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 22px; border-bottom: 1px solid var(--divider); position: relative; z-index: 2; flex-shrink: 0; } .modal-icon { width: 22px; height: 22px; color: var(--text-3); flex-shrink: 0; } .modal-input { flex: 1; font-size: 17px; color: var(--text-1); background: transparent; border: 0; outline: none; min-width: 0; } .modal-input::placeholder { color: var(--text-soft); } .modal-input:focus, .modal-input:focus-visible { outline: none; } .modal-close { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-3); background: rgba(107,52,16,0.04); transition: all .2s var(--easing); flex-shrink: 0; } .modal-close:hover { background: rgba(107,52,16,0.08); color: var(--text-1); } .modal-close svg { width: 14px; height: 14px; } [data-theme="dark"] .modal-close { background: rgba(255,255,255,0.06); } [data-theme="dark"] .modal-close:hover { background: rgba(255,255,255,0.1); } :root[data-theme="dark"] .modal-close { background: rgba(255,255,255,0.06); } :root[data-theme="dark"] .modal-close:hover { background: rgba(255,255,255,0.1); } .modal-body { padding: 8px; flex: 1; overflow-y: auto; position: relative; z-index: 2; } .modal-label { font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 14px 6px; } .modal-foot { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--divider); font-size: 12px; color: var(--text-3); position: relative; z-index: 2; flex-shrink: 0; } .modal-foot kbd { display: inline-block; padding: 2px 6px; margin-right: 4px; border-radius: var(--radius-xs); background: rgba(107,52,16,0.06); font-family: var(--font-mono); font-size: 11px; color: var(--text-2); min-width: 18px; text-align: center; } [data-theme="dark"] .modal-foot kbd { background: rgba(255,255,255,0.08); } :root[data-theme="dark"] .modal-foot kbd { background: rgba(255,255,255,0.08); } @keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes backdropFade { from { opacity: 0; } to { opacity: 1; } } .modal[open] { animation: modalIn .25s cubic-bezier(0.34, 1.3, 0.64, 1); } .modal[open]::backdrop { animation: backdropFade .2s ease both; } @media (max-width: 640px) { .modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; inset: 0; margin: 0; } .modal-content { border-radius: 0; height: 100%; } .modal-form { padding: 16px; } } /* ============================================================ §15 a11y (prefers-reduced-motion + hover: none) ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 触控设备禁用 hover transform 副作用，避免点击后"粘连" */ @media (hover: none) { .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover, .tag:hover { transform: none; } } /* ============================================================ §16 移动端优化（共享） ============================================================ */ @media (max-width: 768px) { :root { --glass-blur: 16px; --glass-sat: 160%; } } /* ============================================================ §17 面包屑 .breadcrumb（站点唯一真理源，v2 命格风） -------------------------------------------------------------- 用法（统一模板）： - 间距：公共 token（gap space-2 / padding-top space-4 / padding-bottom space-3） - 链接：text-2 默认 / hover accent 朱（不下划线，命格风克制） - 分隔符 / 当前页：兼容多套老命名（.sep / .breadcrumb-sep / .bc-sep / .current / [aria-current]） - 不用 padding 简写：同元素挂 .container 时会覆盖 left/right ============================================================ */ .breadcrumb-wrap { /* panel 同款视觉：米底 + 暖栗投影 + ::before 描边 + ::after 外光环（共享选择器在 §25 玻璃片定义）*/ position: relative; isolation: isolate; contain: layout style; background: var(--container-solid-bg); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); /* layout */ display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: 13px; color: var(--text-3); /* 默认间距：所有 page 通用（与 tool-hero 同节奏 tool-gap）； 工具页 main owl 例外区在底部用 !important 覆盖 padding（防被清零）*/ margin-top: var(--tool-gap); padding: var(--space-3) var(--space-4); } /* 老用法兼容：