/* ========================================================================== Mortal's dream —— 设计变量（唯一源头） -------------------------------------------------------------------------- 全站只在这里定义颜色 / 圆角 / 字体 / 动效 / 层高。页面里不要再写死数值。 变量故意不加前缀：它们作用域是 :root，各页面不会互相冲突； 只有「类名」才用 md- 前缀（见 base.css），避免和页面自有类名打架。 ★ 想换整站配色，只改这个文件里的「品牌色相」那 10 行即可。 ========================================================================== */ :root{ /* ================= 色彩体系 ================= 底色接近黑（带一点蓝，不是死黑），但画面绝不单调： 一层彩色极光 + 分类色相把空间撑起来，强调色只用于 「状态 / 动作 / 分类」，不做大面积铺底。 */ --bg:#04060f; /* 页面底色：近黑，带蓝调 */ --bg-deep:#000000; /* 首页那种纯黑，给需要极致对比的页面 */ --surface:rgba(10,17,36,.52); /* 玻璃面板 */ --surface-2:rgba(8,13,28,.78); /* 浮层：菜单、弹窗 */ --surface-3:rgba(4,8,20,.9); /* 最重的一层 */ /* ---- 品牌色相（这套来自你原来的 download 页） ---- */ --c-amber:#fbbf24; /* 琥珀 */ --c-pink:#f472b6; /* 粉 */ --c-sky:#7dd3fc; /* 天蓝 */ --c-mint:#24fbc2; /* 薄荷 */ --c-violet:#a78bfa; /* 紫 */ --c-rose:#fb7185; /* 玫红 */ --c-blue:#60a5fa; /* 蓝 */ --c-emerald:#34d399; /* 翠绿 */ --c-fuchsia:#e879f9; /* 品红 */ --c-slate:#94a3b8; /* 灰蓝 */ /* ---- 语义强调 ---- */ --accent:var(--c-amber); /* 主动作 */ --accent-2:var(--c-pink); /* 次动作 */ --accent-3:var(--c-sky); /* 信息 */ --accent-live:var(--c-mint); /* "在线 / 可用" 的状态点 */ --grad-accent:linear-gradient(135deg,rgba(251,191,36,.26),rgba(244,114,182,.2)); --grad-accent-strong:linear-gradient(135deg,#fbbf24,#f472b6); --grad-text:linear-gradient(100deg,#fbbf24,#f472b6 48%,#7dd3fc); --ring-accent:0 0 0 4px rgba(251,191,36,.12); --glow-accent:0 16px 40px rgba(251,191,36,.22); --glow-pink:0 16px 40px rgba(244,114,182,.2); /* ---- 彩色极光：那层让底色活起来的光 ---- */ --aura: radial-gradient(38% 32% at 14% 10%,rgba(244,114,182,.17),transparent 68%), radial-gradient(34% 30% at 86% 18%,rgba(125,211,252,.16),transparent 70%), radial-gradient(38% 32% at 72% 86%,rgba(251,191,36,.13),transparent 70%), radial-gradient(30% 26% at 22% 88%,rgba(36,251,194,.1),transparent 72%); /* ---- 中性文字与描边（层级靠白色透明度，不靠灰度） ---- */ --ink:#eef1f6; --ink-2:rgba(238,241,246,.68); --ink-3:rgba(238,241,246,.46); --ink-4:rgba(238,241,246,.28); --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.28); --glass:rgba(255,255,255,.028); --glass-2:rgba(255,255,255,.05); --glass-3:rgba(255,255,255,.08); --ink-inverse:#05070f; /* 亮底上的文字 */ --white:#fff; /* ---- 分类色相 ---- 卡片 / 标签 / 图标共用同一个 --cat。给元素加 data-cat="<分类key>" 即可着色。 */ --cat:var(--accent); --cat-soft:rgba(255,255,255,.06); /* ================= 有机圆角 ================= 四个角半径必须不同 —— 这是「果冻」的来源，统一圆角会立刻失去它。 */ --r-a:26px; --r-b:20px; --r-c:30px; --r-d:22px; --r-sm-a:14px; --r-sm-b:11px; --r-sm-c:16px; --r-sm-d:12px; --r-pill:999px; /* ================= 排版 ================= */ --font:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --font-serif:'Noto Serif SC',Georgia,serif; --font-mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; /* ================= 动效 ================= */ --ease:cubic-bezier(.22,.61,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); /* 果冻弹簧：与首页玻璃球完全同一套 */ --jelly-k:120; --jelly-c:13; /* ================= 尺寸与层高 ================= */ --nav-h:58px; --shell:1240px; --z-fx:58; --z-nav:40; --z-menu:70; --z-modal:76; --z-toast:80; --z-cursor:90; --mx:50vw; --my:50vh; } /* -------------------------------------------------------------------------- 分类色相映射：把 --cat 注入到带 data-cat 的元素上。 颜色 → 分类的对应关系，全站只在这里定义一次。 -------------------------------------------------------------------------- */ [data-cat="archive"]{--cat:var(--c-amber); --cat-soft:rgba(251,191,36,.16)} [data-cat="app"] {--cat:var(--c-sky); --cat-soft:rgba(125,211,252,.16)} [data-cat="doc"] {--cat:var(--c-pink); --cat-soft:rgba(244,114,182,.16)} [data-cat="image"] {--cat:var(--c-violet); --cat-soft:rgba(167,139,250,.16)} [data-cat="audio"] {--cat:var(--c-mint); --cat-soft:rgba(36,251,194,.14)} [data-cat="video"] {--cat:var(--c-rose); --cat-soft:rgba(251,113,133,.16)} [data-cat="code"] {--cat:var(--c-blue); --cat-soft:rgba(96,165,250,.16)} [data-cat="data"] {--cat:var(--c-emerald); --cat-soft:rgba(52,211,153,.16)} [data-cat="web"] {--cat:var(--c-fuchsia); --cat-soft:rgba(232,121,249,.16)} [data-cat="other"] {--cat:var(--c-slate); --cat-soft:rgba(148,163,184,.14)} /* 通用色相：不归属任何分类的元素（菜单项、按钮、图标）用这个着色。 例：