/* ================================================================ 设计令牌 · Design Tokens --------------------------------------------------------------- 作为前端设计师，你可以自由修改以下任意变量来定制外观。 所有模块都引用这些变量，改一处全站生效。 ================================================================ */ :root { /* ============================================================ ① 色板 Color Palette —— 莫兰迪色系（每色分 5 档明度） 使用方式：var(--morandi-xxx-N) N=100最浅, 500主题色, 700深色 ============================================================ */ /* 鼠尾草绿 Sage */ --c-sage-100: #e8ede4; --c-sage-200: #cfd9c8; --c-sage-300: #a8b5a0; /* 默认主题色 */ --c-sage-400: #8b9a83; --c-sage-500: #6e8066; --c-sage-600: #576852; /* 玫瑰灰 Rose */ --c-rose-100: #f0e4e2; --c-rose-200: #e2ccca; --c-rose-300: #c9a8a3; --c-rose-400: #b08e8a; --c-rose-500: #937370; --c-rose-600: #7a5c5a; /* 雾霾蓝 Blue */ --c-blue-100: #e4ebf0; --c-blue-200: #c7d4dd; --c-blue-300: #9cb0bf; --c-blue-400: #849aa9; --c-blue-500: #6a8292; --c-blue-600: #546b7a; /* 雾霭紫 Dusty */ --c-dusty-100: #ebe5e3; --c-dusty-200: #d5cac7; --c-dusty-300: #b8a9a5; --c-dusty-400: #9e8f8b; --c-dusty-500: #81726e; --c-dusty-600: #675a57; /* 沙砾黄 Sand */ --c-sand-100: #f3ecd9; --c-sand-200: #e6d9bc; --c-sand-300: #d4c5a9; --c-sand-400: #c2b18f; --c-sand-500: #a8956e; --c-sand-600: #8a7855; /* 陶土棕 Clay */ --c-clay-100: #f0e4da; --c-clay-200: #e1ccb9; --c-clay-300: #c4a795; --c-clay-400: #ad8e7b; --c-clay-500: #8e6f5c; --c-clay-600: #725646; /* ============================================================ ② 中性色 Neutral Palette（偏暖莫兰迪灰） ============================================================ */ --n-bg: #f5f2ee; /* 页面背景 */ --n-surface: #faf8f5; /* 卡片/弹窗表面 */ --n-surface-2: #f0ebe4; /* 次级表面 hover */ --n-surface-3: #e8e1d6; /* 输入框背景 */ --n-border: #e2dace; /* 默认边框 */ --n-border-2: #d4cab9; /* 强调边框 */ --n-text: #5c5852; /* 正文 */ --n-text-2: #8a847c; /* 次级文字 */ --n-text-3: #a8a298; /* 辅助/提示文字 */ --n-text-inv: #ffffff; /* 反白文字 */ /* ============================================================ ③ 功能色 Functional ============================================================ */ --f-success: var(--c-sage-400); --f-error: var(--c-rose-400); --f-info: var(--c-blue-400); --f-warning: var(--c-sand-500); /* ============================================================ ④ 主题映射（如果你想换主色，改这里就行） 想换成玫瑰粉主题 → --brand: var(--c-rose-300) 即可 ============================================================ */ --brand: var(--c-sage-300); /* 主品牌色 */ --brand-hover: var(--c-sage-400); /* 主色 hover */ --brand-deep: var(--c-sage-500); /* 主色深色 */ --brand-soft: var(--c-sage-100); /* 主色柔化背景 */ --accent-a: var(--c-rose-300); /* 辅色A：粉 */ --accent-b: var(--c-blue-300); /* 辅色B：蓝 */ --accent-c: var(--c-sand-300); /* 辅色C：黄 */ --accent-d: var(--c-dusty-300); /* 辅色D：紫 */ --accent-e: var(--c-clay-300); /* 辅色E：棕 */ /* ============================================================ ⑤ 背景装饰色（用于首页渐变光晕） ============================================================ */ --glow-a: rgba(168, 181, 160, 0.20); --glow-b: rgba(201, 168, 163, 0.20); --glow-c: rgba(156, 176, 191, 0.18); /* ============================================================ ⑥ 字体 Typography ============================================================ */ /* 字体栈：中文优先苹方/微软雅黑，英文优先 Inter 系统字体 */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif; --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, Georgia, serif; --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace; /* 字号阶梯（px 方便精确控制，可自行改为 rem） */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; /* 默认正文大小，改这里全站字号联动 */ --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; --fs-hero: 52px; /* 首页大标题 */ /* 行高 */ --lh-tight: 1.25; --lh-snug: 1.45; --lh-normal: 1.7; /* 正文行高 */ --lh-relaxed: 1.9; /* 长文/小说行高 */ --lh-loose: 2.1; /* 字重 */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; /* 字间距 */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.03em; --ls-loose: 0.08em; /* ============================================================ ⑦ 间距 Spacing（4px 基数，8 点网格） ============================================================ */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* 内容区最大宽 / 导航高度 */ --container-max: 1280px; --nav-h: 72px; --container-px: 32px; /* 内容左右内边距 */ /* ============================================================ ⑧ 圆角 Radius ============================================================ */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full:999px; /* 胶囊/圆形 */ /* ============================================================ ⑨ 阴影 Shadow（统一柔和暖灰，不冷不硬） ============================================================ */ --sh-xs: 0 1px 2px rgba(92, 88, 82, 0.05); --sh-sm: 0 1px 3px rgba(92, 88, 82, 0.08), 0 1px 2px rgba(92, 88, 82, 0.04); --sh-md: 0 4px 12px rgba(92, 88, 82, 0.08), 0 2px 4px rgba(92, 88, 82, 0.04); --sh-lg: 0 10px 28px rgba(92, 88, 82, 0.12), 0 4px 10px rgba(92, 88, 82, 0.06); --sh-xl: 0 20px 50px rgba(92, 88, 82, 0.18), 0 8px 18px rgba(92, 88, 82, 0.08); /* 悬浮卡片阴影（主色微光） */ --sh-brand: 0 8px 24px rgba(139, 154, 131, 0.25); /* ============================================================ ⑩ 过渡动画 Transition ============================================================ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-io: cubic-bezier(0.64, 0, 0.36, 1); --dur-fast: 150ms; --dur-base: 260ms; --dur-slow: 420ms; --tr-fast: all var(--dur-fast) var(--ease-out); --tr-base: all var(--dur-base) var(--ease-out); --tr-slow: all var(--dur-slow) var(--ease-out); /* 动画位移距离 */ --move-in: 12px; /* ============================================================ ⑪ 断点 Breakpoints（JS 中会同步引用） ============================================================ */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 960px; --bp-xl: 1280px; /* ============================================================ ⑫ 层级 Z-Index（不用想破头，套级别即可） ============================================================ */ --z-base: 1; --z-nav: 100; --z-sidebar: 150; --z-dropdown: 200; --z-sticky: 300; --z-modal: 500; --z-toast: 600; --z-lightbox: 900; --z-theme: 950; /* 主题面板（最顶，方便调试） */ /* ============================================================ ⑬ 透明度层级 Opacity ============================================================ */ --o-subtle: 0.35; --o-muted: 0.55; --o-soft: 0.72; --o-solid: 1; /* ============================================================ ⑭ 玻璃拟态效果 ============================================================ */ --glass-bg: rgba(250, 248, 245, 0.88); --glass-blur: 14px; --glass-dark-bg: rgba(92, 88, 82, 0.55); --glass-dark-blur: 8px; /* ============================================================ ⑮ 设计师自由区 —— 你可以在这里定义任意项目专属变量 ============================================================ */ /* 示例：自定义按钮弧度 */ /* --custom-btn-radius: 24px; */ /* 示例：自定义分隔线 */ --divider-color: linear-gradient(90deg, transparent, var(--brand), var(--accent-a), transparent); /* 示例：首页标题装饰 */ --hero-gradient: linear-gradient(135deg, var(--brand) 0%, var(--accent-a) 50%, var(--accent-b) 100%); } /* ================================================================ 深色模式 Dark Mode（预留，想要的话给 html 加 class="dark" 即可） ================================================================ */ /* html.dark { --n-bg: #2a2825; --n-surface: #33302d; --n-surface-2: #3d3a37; --n-text: #e8e4de; --n-text-2: #b5b0a8; --n-text-3: #868179; --n-border: #46433f; ... 想加就自己填 } */