/* ============================================================ CRC-30 · 视觉识别层 ============================================================ 为什么单独一个文件，而不是直接改 style.css： 这次改版的目标是"看不出与参考站同源"，但**功能必须一行不动**。 把差异全部集中在这里，好处有三： 1. 原样式保持原样，回滚只需删掉这一行 ，不存在"改回去漏了一处" 2. 视觉与功能彻底分离 —— 改配色永远不会再碰坏选择器 3. 差异点可审查：下面每一条覆盖都注明了改什么、为什么 改版策略（不是换颜色，是换语言）： · 主色从"纯灰阶 R=G=B" 改为 **冷调石墨 + 极窄青色高光** —— 灰阶是最容易撞车的选择，因为它没有特征 · 底色从黑 (#020202) 改为**深墨绿黑**，带一点绿的偏色， 读起来是"工具"而不是"炫技作品" · 圆角一律 0（保留）但边框从"发丝线"改为**双线 + 角标**， 这是排版层面的特征差异，不影响任何交互 · 字体栈保留原样（可读性优先），但标题字重与字距重新定义 · 关键操作色：#ef5350 / #26a69a 这类 Material 色全部撤掉， 换成单色高光 + 明度差 ⚠️ 所有交互态（hover / focus / disabled / aria-current）都重新定义过， 不能只改静态样式 —— 否则键盘用户会看不到焦点环。 ============================================================ */ :root{ /* ---------- 底色：深墨绿黑 ---------- 不是纯黑。纯黑 + 纯灰是最常见的"开发者审美"， 也是最容易与同类站撞车的地方。加一点绿的偏色之后， 同样的灰阶也会读成完全不同的东西。 */ --bg-0:#040705; /* 页面最深处 */ --bg-1:#070b09; /* 主体背景 */ --bg-2:#0d1411; /* 抬起层 */ /* ---------- 墨色 9 级 ---------- 仍是无彩色相（避免廉价的"科技蓝"）， 但整体抬高了绿的成分，与底色同族。 */ --ink:#f0f5f2; --ink-1:#e4eae6; --ink-2:#c3cdc7; --ink-3:#93a099; --ink-4:#75827b; --ink-5:#546059; --ink-6:#39423d; --ink-display:#ffffff; --ink-hi:#f8fffb; --ink-mono:#cfe0d6; --ink-mono-dim:#6d7d74; --ink-italic:#a8b8af; /* ---------- 边线：五档 ---------- 原版四档，这里加一档更亮的用于"当前项"， 并把常用的 --line 调亮一点点，让边界在暗底上更清楚。 */ --line-soft:rgba(240,255,246,.055); --line:rgba(240,255,246,.125); --line-strong:rgba(240,255,246,.30); --line-faint:rgba(240,255,246,.085); --line-hot:rgba(150,255,205,.55); /* ---------- 表面 ---------- */ --surface:rgba(240,255,246,.016); --surface-2:rgba(240,255,246,.040); --surface-3:rgba(240,255,246,.075); --sheet:#080d0a; --sel-bg:rgba(150,255,205,.16); --sel-line:rgba(150,255,205,.7); /* ---------- 实心块 ---------- 从冷白改为极浅的薄荷白，暗示"这个系统与绿色有关"， 但仍然保持无彩色相（不变成俗气的青绿按钮）。 */ --solid-bg:#e8f5ec; --solid-ink:#06110b; --solid-hover:#ffffff; --solid-active:#d6e8dc; /* ---------- 关键操作 ---------- ���掉 Material 的红/绿，用"明度 + 一条侧边线"表达状态。 危险提示仍然需要能一眼分辨 —— 用左侧 2px 实线，不靠色相。 */ --key-red:#ff7a6e; --key-green:#7dffbe; --key-green-ink:#04130c; --key-line:rgba(240,255,246,.5); --key-bg:rgba(240,255,246,.05); --key-h:58px; /* ---------- 图表刻度 ---------- */ --tick-off:rgba(240,255,246,.13); --tick-on:#eef7f1; /* ---------- 新增：识别色 ---------- 这三个是本次改版新引入的，只在 CRC-30 的识别元素上用， 不去覆盖原有语义（避免把"错误"和"品牌"混成一个颜色）。 */ --brand:#9dffc8; --brand-dim:rgba(157,255,200,.30); --brand-ink:#04120b; } /* ============================================================ 1 · 背景 ============================================================ */ body{background:var(--bg-1);color:var(--ink-1)} /* 三个大而柔的光斑，模拟"从上方与两侧打下来的光"。 原版是一道顶部径向光，形态太常见；这里是三处不同强度、 不同偏色的叠加，落到暗底上会显出极淡的层次。 */ body::before{ background: radial-gradient(78% 46% at 50% -8%, rgba(157,255,200,.055) 0%, transparent 64%), radial-gradient(52% 40% at 8% 34%, rgba(190,230,255,.028) 0%, transparent 70%), radial-gradient(46% 40% at 96% 66%, rgba(255,235,200,.022) 0%, transparent 72%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 30%, var(--bg-1) 64%, var(--bg-2) 100%); } ::selection{background:var(--brand);color:var(--brand-ink)} /* ============================================================ 2 · 页头 ============================================================ */ header{ background:rgba(7,11,9,.82); border-bottom:1px solid var(--line-soft); backdrop-filter:blur(14px) saturate(1.1); } /* 底部一条极细的品牌色渐变线 —— 这是"一眼不是同源"的第一处 */ header::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,var(--brand-dim) 22%,var(--brand-dim) 78%,transparent); pointer-events:none; } .bar{height:74px} .brand b{ font-size:16px;letter-spacing:.34em; /* 品牌名用等宽，与正文的 Titillium 拉开距离 —— 排版层面的识别差异 */ font-family:var(--mono);font-weight:400; } .nav{gap:24px} .nav a{ font-size:10.5px;letter-spacing:.2em;position:relative; padding:4px 0; } .nav a[aria-current]{color:var(--brand)} .nav a[aria-current]::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--brand); } /* 键盘焦点必须够亮 —— 这是无障碍底线，不能为了风格牺牲 */ .btn:focus-visible,input:focus-visible,button:focus-visible, a:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--brand);outline-offset:2px; } /* ============================================================ 3 · 按钮 ============================================================ .btn{ border-radius:0; /* 左上角切一个 6px 缺口：这是本改版最明显的识别记号， 成本极低（一个伪元素），但足以让列表一眼区分。 */ position:relative;letter-spacing:.11em; padding:10px 19px; border-color:var(--line); transition:background .16s,border-color .16s,color .16s; } .btn::before{ content:'';position:absolute;left:0;top:0;width:6px;height:6px; border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong); opacity:0;transition:opacity .16s; } .btn:hover:not(:disabled)::before{opacity:1} .btn:hover:not(:disabled){background:var(--surface-3);border-color:var(--line-strong)} .btn-solid{ background:var(--solid-bg);color:var(--solid-ink);border-color:var(--solid-bg); font-weight:600; } .btn-solid::before{border-color:rgba(6,17,11,.4)} .btn-solid:hover:not(:disabled){background:var(--solid-hover);border-color:var(--solid-hover)} .btn-solid:hover:not(:disabled)::before{opacity:1} .btn-solid:disabled{ background:var(--surface-2);border-color:var(--line);color:var(--ink-4); } .btn-sm{padding:6px 12px;font-size:11px;letter-spacing:.1em} /* ============================================================ 4 · 标题与正文 ============================================================ */ /* 文档页的标题（白皮书 / 团队）与 hero 标题要同一套语言， 否则从首页点进白皮书会像换了个站 —— 漏掉这一处， 视觉识别在文档页就完全失效了。 */ .wp-head h1{ font-family:var(--mono);font-weight:400; letter-spacing:.14em;line-height:1.1; text-shadow:0 0 42px rgba(157,255,200,.10); } .wp-head h1 b{font-weight:400;color:var(--brand)} .wp-head .meta{color:var(--ink-5);letter-spacing:.2em} .wp p.wp-abs{border-left-color:var(--brand-dim)} .hero h1{ font-weight:400; /* 字距从 .005em 放到 .16em，并混用等宽 —— "字距拉开 + 等宽"是硬核工具站的典型语言， 与参考站的"窄体大字"正好相反。 */ letter-spacing:.16em; font-family:var(--mono); line-height:1.1; color:var(--ink-display); text-shadow:0 0 42px rgba(157,255,200,.10); } .eyebrow{color:var(--ink-4);letter-spacing:.28em;margin-bottom:30px} .eyebrow::after{background:linear-gradient(90deg,var(--line),transparent)} .lede-hook{ font-family:var(--mono);font-weight:400; font-size:17px;letter-spacing:.1em;color:var(--brand); text-transform:uppercase;margin-bottom:18px; } .lede{color:var(--ink-2);line-height:1.72} .lede-2{color:var(--ink-4)} /* 四个特性卡：改成网格里的"参数行"，而不是四个独立小卡。 视觉形态变了，但里面的文字与结构由 JS 渲染，一行没动。 */ .feats{ gap:0; border-top:1px solid var(--line-soft); margin-top:44px; } .feat{ padding:20px 20px 20px 0; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft); position:relative; } .feat:nth-child(odd){padding-left:0} .feat:nth-child(even){padding-left:20px;border-right:0} .feat:nth-last-child(-n+2){border-bottom:0} .feat-n{ font-family:var(--mono);font-size:15px;letter-spacing:.06em; color:var(--brand);margin-bottom:9px; } .feat-t{font-weight:600;letter-spacing:.03em} .feat-s{color:var(--ink-4);letter-spacing:.12em} /* ============================================================ 5 · 卡片与分区 ============================================================ */ .card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:0; position:relative; } /* 卡片左上角的品牌色角标 —— 统一识别记号 */ .card::before{ content:'';position:absolute;left:-1px;top:-1px; width:14px;height:14px; border-left:1px solid var(--brand-dim);border-top:1px solid var(--brand-dim); pointer-events:none; } .proto{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .proto-t{font-family:var(--mono);font-weight:400;letter-spacing:.1em} .proto-c .label{color:var(--brand);letter-spacing:.22em} .faq-h .label{color:var(--brand);letter-spacing:.24em} /* 发行刻度盘：刻度用长度与亮度编码，不靠色相 —— 灰度打印下仍可读 */ .orb-dial{filter:drop-shadow(0 0 34px rgba(157,255,200,.07))} .orb-end{ font-family:var(--mono);letter-spacing:.2em; text-transform:uppercase; } .orb-sub{color:var(--ink-4);letter-spacing:.14em} /* ============================================================ 6 · 表单 ============================================================ */ input,select,textarea{ background:var(--surface-2); border:1px solid var(--line); border-radius:0;color:var(--ink); font-family:var(--mono); transition:border-color .16s,background .16s; } input:hover,select:hover,textarea:hover{border-color:var(--line-strong)} input:focus,select:focus,textarea:focus{ border-color:var(--brand-dim);background:var(--surface-3); outline:none;box-shadow:inset 2px 0 0 var(--brand); } /* 数字输入去掉浏览器自带的上下箭头 —— 它们是灰阶的，且不好点 */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .fld .label{color:var(--ink-4);letter-spacing:.2em} .fld-hint{color:var(--ink-5)} .fld-hint.is-bad{color:var(--key-red)} .fld-hint.is-ok{color:var(--brand-dim)} /* 焦点框：只有"关键操作"（会花钱的那几个）才有框 */ .fld-key{position:relative} .fld-key input{border-color:var(--key-line);background:var(--key-bg)} .fld-key input:focus{box-shadow:inset 3px 0 0 var(--brand)} /* 资产选择 chip */ .chip{ border:1px solid var(--line);border-radius:0;background:transparent; font-family:var(--mono);letter-spacing:.08em;transition:all .16s; } .chip:hover:not(:disabled){border-color:var(--line-strong);color:var(--ink-1)} .chip.on,.chip[aria-pressed=true]{ background:var(--solid-bg);color:var(--solid-ink);border-color:var(--solid-bg); } .chip:disabled{opacity:.35;cursor:not-allowed} /* ============================================================ 7 · 表格 ============================================================ */ table{font-variant-numeric:tabular-nums} thead th{ font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; color:var(--ink-4);text-transform:uppercase; border-bottom:1px solid var(--line); } tbody tr{border-bottom:1px solid var(--line-soft)} tbody tr:hover{background:var(--surface)} tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--brand-dim)} td{color:var(--ink-2)} .xchip{ border:1px solid var(--line);border-radius:0; font-family:var(--mono);letter-spacing:.1em;color:var(--ink-3); background:var(--surface-2); } /* ============================================================ 8 · 页脚与弹层 ============================================================ */ footer{border-top:1px solid var(--line-soft);background:var(--bg-0)} .foot-links a{letter-spacing:.16em;transition:color .16s} .foot-links a:hover{color:var(--brand)} .foot-x{display:inline-flex;align-items:center;gap:.42em} .foot-x .x-ico{width:15px;height:15px;flex:none;display:block} .foot-brand{ font-family:var(--mono);letter-spacing:.34em;color:var(--ink-4); } .veil{background:rgba(2,5,3,.86);backdrop-filter:blur(7px)} .sheet{background:var(--sheet);border:1px solid var(--line);border-radius:0} .sheet-h{border-bottom:1px solid var(--line-soft)} .sheet-x:hover{background:var(--surface-3);color:var(--ink)} /* 弹层左上角同款角标 */ .sheet::before{ content:'';position:absolute;left:-1px;top:-1px;width:16px;height:16px; border-left:1px solid var(--brand-dim);border-top:1px solid var(--brand-dim); pointer-events:none; } /* ============================================================ 9 · 关闭提示 / 待开放 ============================================================ */ .prog-note.is-closed{ border-left-color:var(--brand-dim); font-family:var(--mono);font-size:12px; } .soon-bar{border-left-color:var(--brand-dim)} .soon-dot{border-color:var(--brand-dim)} .soon-tag{font-family:var(--mono);border-color:var(--line);color:var(--ink-4)} /* ============================================================ 10 · 刻度与图形 ============================================================ */ .bar-track{background:var(--surface-2);border:1px solid var(--line-soft)} .bar-track>i,.prog-bar>i{ background:linear-gradient(90deg,var(--brand-dim),var(--brand)); } .xrail i{background:var(--tick-off)} .xrail i.on{background:var(--ink-2)} /* 品牌标记：内联 SVG 的月相。描边走品牌色，填充仍是白 —— 全绿会糊成一块，白填充 + 绿描边才有"被点亮一半"的辨识度。 （原来是 .mark{color:var(--brand)} 一把刷，等于把整个 logo 染绿， 在 24px 下几乎看不出月相了。） */ .mark{color:var(--brand)} .brand .mark path{fill:var(--ink-display)} /* 品牌名的下划线：与 nav 的当前项标记同一套语言 */ .brand b{position:relative} .brand b::after{ content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px; background:var(--brand-dim);opacity:.7; } /* ============================================================ 11 · 窄屏 ============================================================ */ @media(max-width:900px){ .feats{grid-template-columns:1fr} .feat{border-right:0;padding-left:0!important} .feat{border-bottom:1px solid var(--line-soft)} .feat:last-child{border-bottom:0} } @media(max-width:640px){ :root{--gutter:18px} .hero h1{letter-spacing:.1em} .brand b{letter-spacing:.24em} .nav{gap:16px} } /* ============================================================ 12 · 减少动效 ============================================================ 前庭障碍用户会因为视差与过渡而不适。 尊重系统设置不是加分项，是底线。 */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } } /* ============================================================ 13 · 打印 ============================================================ 白皮书要能被打印/存 PDF。深底打印是灾难（墨粉全费）， 所以强制切回白底黑字。 */ @media print{ :root{ --bg-0:#fff;--bg-1:#fff;--bg-2:#fff; --ink:#111;--ink-1:#111;--ink-2:#333;--ink-3:#555;--ink-4:#777;--ink-5:#999; --ink-display:#000;--ink-hi:#000;--ink-mono:#222;--ink-mono-dim:#666;--ink-italic:#444; --line:#ccc;--line-soft:#e2e2e2;--line-strong:#999;--line-faint:#eee; --surface:transparent;--surface-2:transparent;--surface-3:#f4f4f4; --brand:#0a7a4a;--brand-dim:#0a7a4a;--brand-ink:#fff; } body{background:#fff;color:#111} body::before{display:none} header,.nav,.lang,#connect,#me-btn,.veil,footer .foot-links{display:none!important} .card,.proto,.xp-panel{border:1px solid #ddd;background:#fff} a{color:#0a7a4a} .wp .eq,.lp-code{background:#f6f6f6;border:1px solid #ddd} } /* ============================================================ 14 · hidden 必须真的隐藏 ============================================================ 踩过的坑：.btn 的 display 是 inline-flex，而 [hidden] 的 UA 默认样式 display:none 会被任何显式 display 覆盖掉 —— 结果