/* ══════════════════════════════════════════════════════════════ Another Self · 官网共用样式 ────────────────────────────────────────────────────────────── 首页原本把设计令牌和样式全部内联在 index.html 里。 现在多了安全页、协议页、版本页 —— 如果再各拷一份， 改一个颜色要改七个地方，早晚会不一致。 这里沉淀「跨页面共用」的部分： 设计令牌、基础排版、导航、按钮、页脚、卡片、内页标题 首页自己特有的（粒子球、对话演示、通话卡）留在 index.html 内。 令牌与 DESIGN.md 一致，改这里就等于改全站。 ══════════════════════════════════════════════════════════════ */ :root { --b7:#089c99; --b6:#13C1B8; --b5:#36cfc2; --b4:#5cdbcc; --b3:#87e8d9; --b2:#b5f5e9; --b1:#e6fff9; --g10:#1D2129; --g8:#4E5969; --g6:#86909C; --g4:#C9CDD4; --g3:#E5E6EB; --g2:#F2F3F5; --g1:#F7F8FA; --text:var(--g10); --t2:var(--g8); --t3:var(--g6); --bd:var(--g3); --bd2:var(--g4); --ac:var(--b6); --ac-h:var(--b5); --ac-a:var(--b7); --sh1:0 1px 2px rgba(29,33,41,.04),0 2px 8px rgba(29,33,41,.04); --sh2:0 2px 8px rgba(29,33,41,.05),0 10px 30px rgba(29,33,41,.07); --sh3:0 10px 24px rgba(29,33,41,.08),0 28px 64px rgba(29,33,41,.11); --shb:0 6px 20px rgba(19,193,184,.28); --ease:cubic-bezier(.22,1,.36,1); /* 内容区宽度上限。 1200 → 1360：1440 视口下内容占比 83% → 94%，不再显得窄。 正文自身有 max-width 兜着（如 .hero .sub 520px、 内页正文栏 880px），所以容器放宽不会让**单行过长**， 只是让卡片、表格、首屏两栏这些"面"更舒展。 */ --maxw:1360px; /* ── 圆角尺度 ── 原来全站有 18 种圆角（3px 到 100px 都有），纯属写的时候随手定， 所以整体看着"说不清哪里不齐"。收敛成 4 档： r1 小控件（标签、图标底、小按钮） r2 按钮、输入框、导航项 r3 卡片、面板、下拉菜单 r4 大容器 胶囊形用 999px。新写样式请用这四档，不要再随手写数字。 */ --r1:8px; --r2:10px; --r3:14px; --r4:18px; --rp:999px; /* ── 排版尺度 ── 病史：全站实测出现过 **41 种字号**，13.4 / 13.5 / 13.6 三个值同时存在， 行高手写了 1.25~1.92 共 15 种小数。收敛过一次，但**刻度定小了**： 正文主力压在 15-16px、次要文字 12-13px，中文读起来偏小； 而且同一字号派生出一堆行高/字重组合（13px 一个档就有 11 种）， 所以看着"不协调"。 这一版按中文网页的常规基准重定（约 1.25 的层级比）： t1 大标题 68 / t2 区块标题 38 / t3 小标题 20 t4 正文 17 / t5 次要 15 / t6 说明 14 / t7 标签 13 最小字号停在 13px —— 再小中文就难认了。 字号用固定 px（正文不做 vw 缩放，会破坏阅读节奏）， 只有大标题用 clamp 跟着视口走。 */ --fs-hero:clamp(38px,6.4vw,68px); --fs-h2:clamp(26px,3.6vw,38px); --fs-h3:20px; --fs-body:17px; /* 界面控件档（导航项、按钮、菜单）。 导航原来用 --fs-sub(15px)，比正文低两级，偏小； 导航是高频点击目标，不该离正文那么远。 16px = 与正文差一级，是主流产品的常见做法。 */ --fs-ui:16px; --fs-sub:15px; --fs-note:14px; --fs-tag:12px; /* 行高三档够用：紧（标题）/ 中（卡片）/ 松（正文段落） */ /* 行高三档。字号整体调大后，中文的舒适区间是： 紧 1.35（标题）/ 中 1.65（卡片、界面文字）/ 松 1.8（长段落） 原来 1.85 配 15px 还行，配 17px 就显得散，收到 1.8。 */ --lh-tight:1.35; --lh-mid:1.65; --lh-loose:1.8; /* ── 间距刻度（4px 基准）── 实测主力间距是 9px / 3px / 4px / 2px / 5px 这种碎值， 9px 出现 50 次、3px 出现 40 次 —— 没有刻度，随手定的。 统一到 4 的倍数。 */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px; /* 区块垂直节奏：原来 13 个区块用了 148/90/96/100/110/118 共 8 种 不同 padding，区块之间没有呼吸规律。收成三档： 常规 / 强调 / 首尾大区块 */ --sec:96px; --sec-lg:112px; --sec-xl:132px; /* 全站统一动效时长（原来 .16s~.35s 混用） */ --dur:.22s; /* 首屏两栏的共同高度。 必须**固定**：原来窗口用 min/max-height，会跟着消息内容长， 把整个首页高度带着上下跳（实测波动 92px）； 后来改成"跟着左栏撑"，结果消息一多又把左栏带高（波动 576px）。 现在两边都锁死在这个值上，页面高度绝对稳定，且上下边界对齐。 */ /* 首屏两栏的共同高度。 ⚠️ 原来是固定 680px，导致**屏幕越高越填不满** —— 实测 1080p 只占 86%、2K 只占 64%、4K 只占 43%， 首屏下面白白露出一大块下一节的内容。 现在跟着视口高走： 取「视口高 - 导航条 66px」和 680px 里的大者， 再用 clamp 压上限 900px（4K 下不至于拉成一根面条）。 这样从笔记本到 2K 都是满屏，超宽屏也不会过高。 */ /* 首屏两栏的共同高度。**固定值，不跟视口变**。 ⚠️ 试过两种"满屏"方案，都不好，已回退，别再改： · clamp(680px, 100vh-66px, 900px) —— 2K 下被上限卡住，只占 79%， 下面露出 296px；1080p 又超出，首屏被切。 · max(680px, 100vh-126px) —— 屏幕越高首屏被拉得越长， 2K 下到 1558px，**两栏内容被拉散、很难看**。 结论：首屏保持固定高度，屏幕高就让它自然多留点白 —— 这比硬撑满屏好看。 */ --hero-h:680px; /* 品牌色的语义别名。 ⚠️ index.html 有 4 处用了 var(--brand-1) / var(--brand-2)， 但这两个变量**从来没定义过** —— var() 取不到值时整条声明被丢弃， 不报错。所以那里的背景和边框一直是空的，肉眼只觉得"这块有点怪"。 从渐变里的 rgba(230,255,249,0) 可确认 brand-1 就是 --b1。 */ --brand-1:var(--b1); --brand-2:var(--b2); /* ── 文字配色规则（全站统一，改这里就等于改全站）── 踩过的坑：同一层级的文字用了两三种颜色，页面看着"没设计过"。 定三条规则： 标题（h1/h2/h3） 一律 --g10 深灰黑，靠**字号和粗细**分层级， 不靠颜色 —— 用颜色区分标题会显得花。 正文（p） 一律 --t2（g8），比标题浅一档就够。 强调（b / strong） 用 --g10 加粗，**不用颜色**； "加粗变黑"本身就是最强的强调。 品牌色（青） 只给**标签、图标、可点击项、关键高亮词**。 青色是稀缺资源，到处用就不值钱了。 两档青的用法（不是重复，是对比度需要）： --b6 亮青 → 用在**白底/浅底**上的高亮词、图标 --b7 深青 → 用在**浅青底（b1）**上的文字，浅底上亮青看不清 */ --rule-title:var(--g10); --rule-body:var(--t2); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:#fff;color:var(--text);font:16px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} /* 内容栏。左右内边距同时承担两个职责： 1. 窄屏时的安全边距 2. 宽屏时把 Logo / 下载按钮往外推的余量 28px → 24px，配合 --maxw 放宽，1440 视口下 Logo 左边界从 148px 移到约 64px、下载按钮右边界同样外移。 */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} @media(max-width:640px){.wrap{padding:0 20px}} /* 超宽屏：1360 封顶后两侧会空出很大一块（1920 下留白 256px）。 这里让容器在超宽屏上再伸展，仍然保留边距不贴边。 正文的阅读行长由各自的 max-width 兜着，不受影响。 */ @media(min-width:1680px){:root{--maxw:1520px}} @media(min-width:1920px){:root{--maxw:1680px}} .deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .deco .b{position:absolute;border-radius:50%;filter:blur(90px)} .deco .b1{width:560px;height:560px;top:-260px;left:50%;transform:translateX(-50%);background:rgba(19,193,184,.10)} .deco .b2{width:400px;height:400px;top:48%;right:-200px;background:rgba(92,219,204,.07)} main,nav,footer{position:relative;z-index:1} /* ── 导航 ── */ nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .35s,box-shadow .35s,backdrop-filter .35s} nav.solid{background:rgba(255,255,255,.8);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);box-shadow:0 1px 0 var(--bd)} /* 导航容器和内容容器**完全同宽同边距** —— Logo 左边界、 「下载」按钮右边界自动和页面内容对齐，不用各自调数值。 ⚠️ 上一版把 nav 单独放宽（max-width + 80px、padding 16px）， 结果 Logo 在 16px、正文在 40px、首屏在 24px，**三条对齐线**， 看着就是"没对齐"。现在统一走 .wrap 那一套。 */ nav .wrap{display:flex;align-items:center;height:66px;gap:4px} .brand{font-weight:700;font-size:var(--fs-body);display:flex;align-items:center;gap:12px;flex:none} /* ⚠️ 必须显式 display:block。 这个 logo 靠 ::before/::after（absolute + inset:0）画两个方块， 而 .m 默认是 inline —— inline 元素没有布局盒，绝对定位的伪元素 拿不到可计算的 inset，宽高算出来是 0，**logo 直接看不见**。 导航里因为外层是 flex、flex item 会被块化，侥幸正常； 页脚那份（footer .brandcol）就塌了，页脚品牌栏一直是空的。 */ .brand .m{width:22px;height:22px;display:block;position:relative;flex:none} .brand .m::before,.brand .m::after{content:'';position:absolute;inset:0;border-radius:var(--r1)} .brand .m::before{border:1.8px solid var(--b3);transform:translate(-3px,-3px)} .brand .m::after{background:var(--b6);transform:translate(3px,3px);box-shadow:0 3px 10px rgba(19,193,184,.35)} nav .sp{flex:1} /* 右上角两个按钮：下载（次要，描边）+ 登录（主要，青色填充）。 用「填充 vs 描边」区分主次 —— 只靠颜色深浅在浅色背景上分不出来， 描边和实心的差别一眼就能看出哪个是主动作。 */ nav .cta{background:var(--b6);color:#fff;font-weight:600;padding:8px 20px;border-radius:var(--r2);font-size:var(--fs-ui);transition:.22s var(--ease);box-shadow:0 2px 8px rgba(19,193,184,.26);display:inline-flex;align-items:center;gap:8px} nav .cta:hover{background:var(--b5);transform:translateY(-1px);box-shadow:var(--shb)} nav .cta svg{width:16px;height:16px} /* 次要按钮：描边，不加阴影，hover 才出一层浅底 */ nav .cta.sec{background:transparent;color:var(--t2);border:1px solid var(--bd2);box-shadow:none} nav .cta.sec:hover{background:var(--g1);border-color:var(--g6);color:var(--g10);transform:translateY(-1px);box-shadow:none} /* 两个按钮之间留一点距离（.sp 是弹性空格，不产生间距） */ nav .cta + .cta{margin-left:10px} /* 窄屏：导航项已经收了，两个按钮只留「登录」—— 下载可以从首页的下载区块进去，不必占着导航栏。 */ @media(max-width:760px){nav .cta.sec{display:none}} /* 导航里的文字链接（安全、定价…）。 青色只留给主按钮，这些用灰阶 —— 品牌色稀缺原则。 */ nav .nl{font-size:var(--fs-ui);color:var(--t2);padding:8px 12px;border-radius:var(--r2);transition:.2s var(--ease);white-space:nowrap} /* ── 下拉菜单 ── 导航栏是 fixed 的，菜单挂在上面的导航项里。 为什么用 hover + click 都支持：桌面端习惯悬停， 触屏没有 hover 只能点。两套都留着。 */ nav .nl.has-menu{position:relative;cursor:pointer;user-select:none} nav .nl.has-menu > a{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none} nav .nl.has-menu > a::after{ content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.55;transition:transform .2s var(--ease) } nav .nl.has-menu.open > a::after{transform:rotate(180deg)} nav .nl.has-menu.open,nav .nl.has-menu:hover{color:var(--b7);background:var(--b1)} nav .menu{ position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-6px); min-width:172px; background:#fff;border:1px solid var(--bd);border-radius:var(--r3); box-shadow:0 12px 32px rgba(19,24,40,.10),0 2px 8px rgba(19,24,40,.05); padding:8px;z-index:70; opacity:0;visibility:hidden; transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s } /* 居中对齐导航项。最右边那项（文档）按居中会探出屏幕， 用 max-width 的容器挡住不如直接限制它的偏移 —— 这里给最右边的菜单右对齐。 */ nav .menu::before{ /* 小三角，指向所展开的导航项 */ content:'';position:absolute;top:-5px;left:50%;margin-left:-5px; width:10px;height:10px;background:#fff; border-left:1px solid var(--bd);border-top:1px solid var(--bd); transform:rotate(45deg);border-radius:2px 0 0 0 } nav .nl.has-menu.open .menu, nav .nl.has-menu:hover .menu{opacity:1;visibility:visible;transform:translate(-50%,0)} /* 靠近屏幕边缘的项：居中会探出去，由 JS 打上 class 改成贴边对齐。 箭头也跟着挪，免得指错位置。 */ nav .nl.has-menu.align-right .menu{left:auto;right:0;transform:translate(0,-6px)} nav .nl.has-menu.align-right.open .menu, nav .nl.has-menu.align-right:hover .menu{transform:translate(0,0)} nav .nl.has-menu.align-right .menu::before{left:auto;right:16px;margin-left:0} nav .nl.has-menu.align-left .menu{left:0;transform:translate(0,-6px)} nav .nl.has-menu.align-left.open .menu, nav .nl.has-menu.align-left:hover .menu{transform:translate(0,0)} nav .nl.has-menu.align-left .menu::before{left:16px;margin-left:0} nav .menu a{ display:block;font-size:var(--fs-ui);color:var(--t2);padding:8px 16px;border-radius:var(--r2); text-decoration:none;white-space:nowrap;transition:.16s var(--ease) } nav .menu a:hover{background:var(--b1);color:var(--b7)} nav .menu a.on{color:var(--b7);font-weight:600;background:var(--b1)} /* 菜单和导航之间留一条透明通道，否则鼠标移过去会闪断 */ nav .nl.has-menu::after{ content:'';position:absolute;top:100%;left:0;right:0;height:12px } /* 触屏：只认点击，不认 hover（否则点开又立刻被 hover 关掉） */ @media(hover:none){ nav .nl.has-menu:hover .menu{opacity:0;visibility:hidden;transform:translate(-50%,-6px)} nav .nl.has-menu.open .menu{opacity:1;visibility:visible;transform:translate(-50%,0)} } nav .nl:hover{color:var(--b7);background:var(--b1)} nav .nl.on{color:var(--b7);font-weight:600} @media(max-width:860px){nav .nl{display:none}} /* 手机上留一个「菜单」，用横向滚动的导航条代替汉堡菜单 —— 官网只有几个入口，不值得为此写一套抽屉逻辑。 它被 site.js 挪进