/* ============================================================================ 战术界面层 · Tactical Interface ============================================================================ 为什么加这一层 ---------------------------------------------------------------------------- 前两轮把网站做"正确"了（底色、对比度、间距刻度、焦点环），但那是 Refactoring UI 讲的"消掉业余感" —— 它不产生风格。 结果是：整站是标准 SaaS 落地页套路 —— 小标签 + 大渐变标题 + 一段话 + 三个胶囊按钮 + 数据条 + 卡片墙 干净，但放到任何一个产品站上都成立，没有电竞味。 这一层给它一个性格：**指挥终端**。 不是"卖服务的公司官网"，是"战情室的显示屏"。 手法来源 ---------------------------------------------------------------------------- augmented-ui（github.com/propjockey/augmented-ui，1.4k star）—— 它用 clip-path 做 HUD 形状，核心两招： ① 切角矩形：polygon() 把两个对角切掉 ② 边框跟随斜边：CSS 的 border 不跟 clip-path 走 （border 在裁剪前就画好了），得用【伪元素三明治】： ::before 铺边框色 + 外形状 ::after 铺底色 + 内形状（inset 缩进） 两层一叠，视觉上就是"沿着斜边的边框" ⚠️ 一条关键限制（augmented-ui 文档明确警告） ---------------------------------------------------------------------------- clip-path 会关掉文字的次像素抗锯齿，长正文里能看出字变毛。 所以这一层【只切外壳】—— 按钮、数据条、区块标记、HUD 角标； 【不切正文卡片】。装长文本的容器保持干净。 为什么不用圆角了 ---------------------------------------------------------------------------- 原来按钮是 border-radius:980px（胶囊）—— 这是"千篇一律"的最大来源， 每个现代网站都这么干。切角是另一个语言：更硬、更"设备感"。 ============================================================================ */ :root{ /* 切角尺寸。四档，跟间距刻度一个思路 —— 受约束才好用。 */ --cham-s:5px; /* 小元素：徽章、标签 */ --cham:9px; /* 常规：按钮、数据格 */ --cham-l:14px; /* 大块：面板、数据条 */ --cham-xl:22px; /* 首屏 */ /* 强调线的颜色 —— 比主色淡，用来画 HUD 的辅助线 */ --line:rgba(255,255,255,.10); --line-hot:color-mix(in srgb,var(--accent) 55%,transparent); } /* ============================================================================ 一 · 切角形状 ---------------------------------------------------------------------------- 只切【左上 + 右下】两个对角。 切四角太"科幻片道具"，两个角就够表达"这不是圆角卡片"了， 而且留了两个直角，版面不至于飘。 ============================================================================ */ /* 切角容器：背景色块本身被裁 */ .cut{ clip-path:polygon( var(--cham) 0, 100% 0, 100% calc(100% - var(--cham)), calc(100% - var(--cham)) 100%, 0 100%, 0 var(--cham))} .cut-s{--cham:var(--cham-s)} .cut-l{--cham:var(--cham-l)} .cut-xl{--cham:var(--cham-xl)} /* 只有一边切（用在贴边元素上） */ .cut-tr{clip-path:polygon(0 0, calc(100% - var(--cham)) 0, 100% var(--cham), 100% 100%, 0 100%)} .cut-bl{clip-path:polygon(0 0, 100% 0, 100% 100%, var(--cham) 100%, 0 calc(100% - var(--cham)))} /* ============================================================================ 二 · 带边框的切角（伪元素三明治） ---------------------------------------------------------------------------- 问题：给切角元素加 border 没用 —— border 画在裁剪之前，会被一起切掉， 剩下的边也还是直的，不跟斜边走。 解法（augmented-ui 的手段）： ::before 铺满 → 涂边框色 → 裁成【外】形状 ::after 内缩 → 涂底色 → 裁成【内】形状 两层叠起来，露出来的那一圈就是"边框"，而且它沿着斜边走。 ============================================================================ */ .cutbox{ position:relative; background:transparent !important; border:0 !important; isolation:isolate} .cutbox::before,.cutbox::after{ content:'';position:absolute;pointer-events:none;z-index:-1; clip-path:inherit} .cutbox::before{inset:0;background:var(--cb-bd,var(--sep-strong))} .cutbox::after {inset:1px;background:var(--cb-bg,var(--surface))} /* 内层背景要比外层多缩 1px，露出的那一条就是"边框" */ .cutbox.cutbox-2::after{inset:2px} /* ============================================================================ 三 · HUD 角标 ---------------------------------------------------------------------------- 区块角上画 L 形角标 —— 战情室屏幕上那种。 ⚠️ 只给【有明确边框的块】加，比如数据条。 第一版我也给 .hero 加了，结果它飘在首屏顶部 —— 因为 .hero 有 70px 上内边距，角标贴在盒子边缘， 离真正的内容（eyebrow）有 80 多像素，看着像掉在那儿了。 角标的作用是"框住一块东西"。没有框可框的时候，它就是噪声。 ============================================================================ */ .hud, .live-strip{position:relative} .live-strip::after{ content:'';position:absolute;top:-1px;left:-1px; width:15px;height:15px; border-top:1px solid var(--line-hot); border-left:1px solid var(--line-hot); pointer-events:none} /* 右下的角标 —— 数据条右上是切角，所以放右下 */ .hud::after{ content:'';position:absolute;bottom:-1px;right:-1px; width:15px;height:15px; border-bottom:1px solid var(--line-hot); border-right:1px solid var(--line-hot); pointer-events:none} /* ============================================================================ 四 · 区块标题：从"竖线"改成"战术编号" ---------------------------------------------------------------------------- 原来区块标题前面是一根竖线 ▎，也是很通用的做法。 改成：切角小方块 + 等宽编号，像终端的行号。 ============================================================================ */ .sect h2::before,.sect-plain h2::before{ content:'';display:inline-block; width:4px;height:.82em;margin-right:.6em;vertical-align:-.06em; background:var(--accent); /* 竖线本身也切个角，跟整体语言一致 */ clip-path:polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%)} /* ============================================================================ 五 · 背景网格 ---------------------------------------------------------------------------- 极淡的坐标网格 —— 暗示"战术地图"。 透明度压到 2.5%，只在首屏区域出现； 全站铺会跟内容打架，而且费性能。 ============================================================================ */ .hero{position:relative;isolation:isolate} .hero::before{ content:'';position:absolute;inset:-40px -100vw -20px;z-index:-1; pointer-events:none; background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; /* 上下淡出，不要硬边 */ -webkit-mask-image:radial-gradient(120% 78% at 22% 34%,#000 0%,transparent 72%); mask-image:radial-gradient(120% 78% at 22% 34%,#000 0%,transparent 72%); /* 0.5 有点抢 —— 网格是氛围，不该跟标题争注意力 */ opacity:.3} /* ============================================================================ 六 · 数据条改成"仪表盘" ---------------------------------------------------------------------------- 原来是 4 个数字 + 分隔符，跟 SaaS 的"信任指标条"一模一样。 改成：等宽数字 + 切角格 + 顶部细线，像设备读数。 ============================================================================ */ .live-strip{ position:relative; border-radius:0 !important; clip-path:polygon( var(--cham-l) 0, 100% 0, 100% calc(100% - var(--cham-l)), calc(100% - var(--cham-l)) 100%, 0 100%, 0 var(--cham-l))} /* 每个读数格加一条顶线，像仪表的刻度基线 */ .live-item{position:relative} .live-item::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,var(--line-hot),transparent)} /* 数字用等宽 —— 跳数的时候宽度不抖 */ .live-item b{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; letter-spacing:-.02em} /* ============================================================================ 七 · 终端风格的 eyebrow ---------------------------------------------------------------------------- 原来是"● 云启飞鱼 · 官方"—— 圆点 + 文字，也是通用做法。 改成终端提示符：▸ + 等宽字 + 一条延伸的线。 ============================================================================ */ .eyebrow{ display:inline-flex;align-items:center;gap:0; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:12.5px !important; letter-spacing:.08em; text-transform:none} /* 用 ▸ 代替圆点，但保留 live-dot 的呼吸动画（它表示"在线"） */ .eyebrow .live-dot{margin-right:8px} /* 文字后面拖一条线出去，像终端的提示行 */ .eyebrow::after{ content:'';display:inline-block; width:clamp(28px,7vw,88px);height:1px;margin-left:12px; background:linear-gradient(90deg,var(--line-hot),transparent); vertical-align:middle} /* ============================================================================ 八 · 按钮：胶囊 → 切角 ---------------------------------------------------------------------------- 这是整站气质改变最大的一处。 胶囊圆角是"消费级 App"的语言，切角是"设备/工具"的语言。 ============================================================================ */ .btn{ border-radius:0 !important; /* 切角给到 11px。 按钮高约 42px（10px 内边距 ×2 + 20px 行高 + 2px 边框）， 9px 切角只占 21%，看着像"渲染故障"而不是设计。 11px 才明确读得出是【刻意的形状】。 */ --cham:11px !important; clip-path:polygon( var(--cham) 0, 100% 0, 100% calc(100% - var(--cham)), calc(100% - var(--cham)) 100%, 0 100%, 0 var(--cham))} /* 焦点环要跟着形状走 —— 方形的 outline 套在切角上会露角 */ .btn:focus-visible{ border-radius:0 !important; outline-offset:3px} /* 次要按钮（原来靠 1px 边框区分）—— 边框在切角上会露直角， 改成靠底色差 + 内侧亮线区分 */ .btn-g{ background:var(--surface-2) !important; border:0 !important; box-shadow:inset 0 0 0 1px var(--sep-strong)} .btn-g:hover{background:var(--surface-3) !important} /* ============================================================================ 九 · 徽章 / 标签 ============================================================================ */ .chip{ border-radius:0 !important; clip-path:polygon( var(--cham-s) 0, 100% 0, 100% calc(100% - var(--cham-s)), calc(100% - var(--cham-s)) 100%, 0 100%, 0 var(--cham-s))} /* ============================================================================ 十 · 首屏标题：给"数字内容"换个处理 ---------------------------------------------------------------------------- 原来是渐变文字。渐变标题也是被用滥的手法。 改成：主色 + 一条下划的强调线，更像"被标记出来的重点"。 ============================================================================ */ .hero h1 .grad{ background:none !important; -webkit-text-fill-color:currentColor !important; color:var(--accent) !important; position:relative} .hero h1 .grad::after{ content:'';position:absolute;left:0;right:0;bottom:.04em;height:.07em; background:var(--accent);opacity:.32} /* ============================================================================ 十一 · 卡片：只给"外壳"加细节，正文容器不动 ---------------------------------------------------------------------------- ⚠️ 这里刻意【不】给卡片加切角。 augmented-ui 文档警告：clip-path 会让文字抗锯齿变差。 卡片里装的是套餐说明、舰船数据这种长文本，切了会变毛。 只加一条左上角的短角标，成本低、辨识度高。 ============================================================================ */ .card{position:relative} .card::before{ content:'';position:absolute;top:0;left:0; width:14px;height:1px;background:var(--line-hot); pointer-events:none} .card::after{ content:'';position:absolute;top:0;left:0; width:1px;height:14px;background:var(--line-hot); pointer-events:none} /* ============================================================================ 十二 · 移动端 ---------------------------------------------------------------------------- 小屏上切角要缩小，不然按钮看着像被啃了一口。 ============================================================================ */ @media (max-width:680px){ :root{--cham-s:4px;--cham:7px;--cham-l:11px;--cham-xl:16px} .hud::before,.hud::after{width:11px;height:11px} .hero::before{background-size:40px 40px} .eyebrow::after{width:26px} } /* 系统设了"减弱动效"就不动 */ @media (prefers-reduced-motion:reduce){ .live-dot{animation:none !important} }