/* ===================================================================== 红灵·智造 销售官网 — 工业编辑体设计系统 v6.0 视觉方向：Engineering Editorial（工程图纸 / 技术白皮书基因） 铁律一：层级靠「发丝线 + 编号索引 + 等宽数据」建立，不靠卡片堆叠 铁律二：真实产品界面承载数据 · 装饰层只用抽象科技视觉 铁律三：单一强调色（点蓝）· 工程硬边（4/8px）· 玻璃仅用于导航与浮层 ===================================================================== */ /* ---------- 1. 设计令牌 ---------- */ :root{ /* 深色底层 — 石墨黑，去蓝调，降低「科技蓝黑」的通用感 */ --abyss:#08090C; --night:#0C0E13; --deep:#11141A; --panel:#14181F; --panel-2:#1A1F28; --panel-3:#222833; /* 分割线 — 中性灰，不再是「蓝光描边」 */ --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15); --line-3:rgba(255,255,255,.26); /* 单一强调色：点蓝（去青、去霓虹辉光） */ --blue:#2F6FE4; --blue-lt:#6C9BF0; --blue-dk:#1E4FB8; --cyan:#6C9BF0; /* 兼容旧变量：青已并入蓝，全站不再有第二色相 */ --blue-soft:rgba(47,111,228,.10); /* 深色区文字 */ --txt:#EDEFF3; --txt-2:#A2A9B6; --txt-3:#6E7684; --txt-4:#4B525E; /* 浅色区 */ --paper:#F6F7F9; --paper-2:#EDEFF2; --paper-3:#E1E4E9; --ink:#0F1216; --ink-2:#3E4653; --ink-3:#6C7484; --paper-line:rgba(15,18,22,.12); /* 语义 */ --warn:#D9534F; --ok:#3F9E6A; /* 玻璃 — 收敛：仅导航、浮层、模态使用 */ --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06); --glass-brd:rgba(255,255,255,.11); --glass-brd-hi:rgba(255,255,255,.20); /* 光与影 — 去辉光：改为克制的实体投影 */ --sh-card:0 1px 2px rgba(0,0,0,.4); --sh-lift:0 12px 32px -14px rgba(0,0,0,.6); --sh-shot:0 24px 48px -24px rgba(0,0,0,.75); --glow-blue:none; /* 兼容旧变量：全站取消霓虹辉光 */ --glow-soft:none; /* 圆角 — 工程硬边：4/8 为主，大圆角仅保留给胶囊与浮层 */ --r-xs:3px; --r-sm:5px; --r:8px; --r-md:10px; --r-lg:16px; --r-pill:999px; /* 节奏 */ --gap:24px; --pad-sec:104px; --maxw:1280px; --sans:"HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","Helvetica Neue",sans-serif; --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ---------- 2. 重置 ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--night);color:var(--txt); font-family:var(--sans);font-size:15px;line-height:1.78; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block;border:0} /* 只是 @2x 图源的选择器容器，不该参与布局。 不写 display:contents 的话，它会成为 inline 盒子把外层 grid / flex 撑歪。 contents 让内部 直接参与父级布局，视觉与未包 picture 时完全一致。 */ picture{display:contents} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4,p,dl,dd,figure{margin:0} ul,ol{margin:0;padding:0;list-style:none} table{border-collapse:collapse;width:100%} ::selection{background:rgba(47,111,228,.42);color:#fff} :focus-visible{outline:2px solid var(--blue-lt);outline-offset:3px;border-radius:4px} /* 滚动条 */ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--abyss)} ::-webkit-scrollbar-thumb{background:#1E2B44;border-radius:99px;border:3px solid var(--abyss)} ::-webkit-scrollbar-thumb:hover{background:#2C3F63} /* ---------- 3. 版式 ---------- */ /* 编辑体字阶：大标题更紧的负字距 + 更低行高，靠「字号对比」而非颜色建立层级 */ h1,.h1{font-size:clamp(34px,4.4vw,58px);line-height:1.08;font-weight:700;letter-spacing:-.032em} h2,.h2{font-size:clamp(26px,2.9vw,40px);line-height:1.18;font-weight:700;letter-spacing:-.026em} h3,.h3{font-size:19px;line-height:1.40;font-weight:600;letter-spacing:-.012em} h4,.h4{font-size:16px;line-height:1.48;font-weight:600} .lead{font-size:16.5px;line-height:1.78;color:var(--txt-2)} .body{font-size:15px;line-height:1.78;color:var(--txt-2)} .small{font-size:13px;line-height:1.68;color:var(--txt-3)} .tiny{font-size:12px;line-height:1.6;color:var(--txt-3)} b,strong{font-weight:600;color:var(--txt)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* 浅色区文字反转 */ .light{color:var(--ink)} .light .lead,.light .body{color:var(--ink-2)} .light .small,.light .tiny{color:var(--ink-3)} .light b,.light strong{color:var(--ink)} /* 眉标 — 编辑体索引：编号 + 发丝线，代替「发光小标签」 */ .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--txt-3);margin-bottom:20px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--line-3);flex:none} .light .eyebrow{color:var(--ink-3)} .light .eyebrow::before{background:var(--paper-line)} /* 强调词 — 编辑体不用渐变文字，改为「下划细线」，克制的唯一强调 */ .hl{ background:none;color:var(--blue-lt); box-shadow:inset 0 -.09em 0 rgba(108,155,240,.24); } .light .hl{color:var(--blue-dk);box-shadow:inset 0 -.09em 0 rgba(30,79,184,.18)} /* ---------- 4. 容器与栅格 ---------- */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px} .wrap--wide{max-width:1440px} .grid{display:grid;gap:var(--gap)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)} .g6{grid-template-columns:repeat(6,1fr)} .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .split--wide{grid-template-columns:1.15fr .85fr} .split--narrow{grid-template-columns:.85fr 1.15fr} .mt-s{margin-top:14px}.mt{margin-top:26px}.mt-l{margin-top:44px}.mt-xl{margin-top:64px} .center{text-align:center} .mx-auto{margin-left:auto;margin-right:auto} /* ---------- 5. 区块 ---------- */ .sec{position:relative;padding:var(--pad-sec) 0;background:var(--night);overflow:hidden} .sec--dark{background:var(--night);color:var(--txt)} .sec--deep{background:var(--abyss);color:var(--txt)} .sec--light{background:var(--paper);color:var(--ink)} .sec--light-alt{background:var(--paper-2);color:var(--ink)} .sec--tight{padding:72px 0} .sec--flush{padding-top:0} .sec-head{max-width:760px;margin-bottom:56px} .sec-head--center{margin-left:auto;margin-right:auto;text-align:center} .sec-head--center .eyebrow{justify-content:center} .sec-head h2 + .lead{margin-top:18px} .sec-head--row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:40px} .sec-head--row > div{max-width:680px} /* 深色区块的环境光 — 去「光晕球」，改为单侧极淡的冷光渐层 */ /* 环境光：只做「区块单侧的冷色底光」，提供深色区的层次，不参与任何循环动画。 位移由 motion.js 的 initAmbient() 按指针位置驱动（有因果、有阻尼）， 静止时页面完全静止 —— 取代原先自发的 breatheGlow 呼吸。 */ /* 不写 will-change：全站有一百多个 .orb，强制提升会白白占用上百个合成层。 translate3d 本身在需要时才提升，交给浏览器判断即可。 */ .orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0; filter:blur(120px);opacity:.13} .orb--blue{background:radial-gradient(circle,rgba(47,111,228,.42),transparent 70%)} .orb--cyan{background:radial-gradient(circle,rgba(47,111,228,.28),transparent 70%)} .orb--1{width:560px;height:560px;top:-260px;right:-200px} .orb--2{width:460px;height:460px;bottom:-280px;left:-180px} .sec > .wrap{position:relative;z-index:1} /* 细网格纹理 — 工程图纸底纹（保留，它是本设计的记忆点之一） */ .grid-bg::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.038) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%); } .grid-bg--full::before{ mask-image:none;-webkit-mask-image:none; background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px); } /* ---------- 6. 按钮 ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--r-sm); font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap; transition:background .18s ease,border-color .18s ease,color .18s ease; } .btn svg{flex:none} .btn--primary{ color:#fff;background:var(--blue); border-color:var(--blue); } .btn--primary:hover{background:var(--blue-dk);border-color:var(--blue-dk)} .btn--ghost{ color:var(--txt);background:transparent; border-color:var(--line-2); } .btn--ghost:hover{background:rgba(255,255,255,.05);border-color:var(--line-3)} .btn--outline{color:var(--blue-lt);border-color:rgba(108,155,240,.4);background:transparent} .btn--outline:hover{background:rgba(47,111,228,.12);border-color:var(--blue-lt)} .btn--dark{color:#fff;background:#0F1216;border-color:#0F1216} .btn--dark:hover{background:#1B2029;border-color:#1B2029} .btn--sm{height:40px;padding:0 18px;font-size:14px} .btn--lg{height:54px;padding:0 30px;font-size:16px} .btn--block{width:100%} .btn--text{height:auto;padding:0;color:var(--blue-lt);font-weight:600;background:none;border:0} .btn--text:hover{gap:13px} /* --- 玻璃质感按钮组 --- 视觉语言参考 ThreeUI（threeui.com）Community 免费组件： Dark Glass / Glassmorphism CTA / Aster Glass Arrow / Sliding Text CTA。 ⚠️ 只借鉴视觉，不引入其代码 —— ThreeUI 是 React 组件库 （npm i @designcodeio/threeui + React peer deps），源码受保护且只提供 React 用法。本站为零依赖静态站，引入 React 会击穿 PRD §11 的 LCP ≤ 2.5s。故以下全部用原生 CSS 重写，无新增依赖、无 JS、无 WebGL。 这组变体与第 19 节玻璃导航同源：同样的高透底 + 内高光 + 折射亮边。 */ /* 玻璃主 CTA：悬停时一道高光斜掠而过（源自 Glassmorphism CTA 的 revolving highlight） */ .btn--glass{ position:relative;overflow:hidden; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(16px) saturate(175%); -webkit-backdrop-filter:blur(16px) saturate(175%); box-shadow:0 10px 28px -14px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.14); transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,transform .24s ease; } /* 原有一条 hover 时斜向扫过的高光（sweep/shimmer）。它是消费级 App 的 通用装饰，与「工业编辑体」的硬边调性冲突，且动效与按钮功能无关 —— 已删除。 悬停反馈改由背景提亮 + 边框转实承担（见下方 :hover）。 */ .btn--glass:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.24); box-shadow:0 14px 34px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.18); } .btn--glass:active{transform:translateY(1px)} /* 玻璃箭头按钮：次要 CTA，悬停时箭头右移（源自 Aster Glass Arrow） */ .btn--glass-arrow{ position:relative;overflow:hidden; color:var(--txt); background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px) saturate(165%); -webkit-backdrop-filter:blur(14px) saturate(165%); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); transition:background .22s ease,border-color .22s ease; } /* 底部下划线改为实色 1px：渐变下划线在深色底上会读作「发光的线」， 与硬边调性不符。中间亮两头淡的渐变尤其像 AI 生成的装饰。 */ .btn--glass-arrow::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none; background:var(--blue-lt); opacity:0;transition:opacity .22s ease; } .btn--glass-arrow:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.20); } .btn--glass-arrow:hover::after{opacity:1} .btn--glass-arrow svg{transition:transform .26s cubic-bezier(.22,1,.36,1)} .btn--glass-arrow:hover svg{transform:translateX(4px)} /* ---------- 玻璃按钮的深浅背景适配（全站铺开） ---------- ⚠️ 玻璃是「深色玻璃」：白字 + 半透白底 + backdrop-filter。 放到浅色区块（.sec--light / .sec--light-alt / .light）上会白字压浅底、 backdrop-filter 取不到暗背景，整组失效甚至不可读。 因此不做 HTML 批量替换（106 个主 CTA + 88 个次 CTA 分散在深浅两种底上）， 改用 CSS 按所在区块自动分流： 深色区块 → 主 CTA 玻璃化（高光斜掠）、次 CTA 玻璃箭头 浅色区块 → 保留原蓝底 / 描边，维持对比度与转化引导 这样深色区视觉统一，浅色区不牺牲可读性。 */ .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--primary, .sec--dark .btn--primary, .sec--deep .btn--primary{ color:#fff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); backdrop-filter:blur(16px) saturate(175%); -webkit-backdrop-filter:blur(16px) saturate(175%); box-shadow:0 10px 28px -14px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.14); position:relative;overflow:hidden; transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,transform .24s ease; } .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--primary::before, .sec--dark .btn--primary::before, .sec--deep .btn--primary::before{ content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent); transform:translateX(0) skewX(-12deg); transition:transform .72s cubic-bezier(.22,1,.36,1); } .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--primary:hover, .sec--dark .btn--primary:hover, .sec--deep .btn--primary:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.24); box-shadow:0 14px 34px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.18); } .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--primary:hover::before, .sec--dark .btn--primary:hover::before, .sec--deep .btn--primary:hover::before{transform:translateX(360%) skewX(-12deg)} .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--primary:active, .sec--dark .btn--primary:active, .sec--deep .btn--primary:active{transform:translateY(1px)} .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--ghost, .sec--dark .btn--ghost, .sec--deep .btn--ghost{ color:var(--txt); background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); backdrop-filter:blur(14px) saturate(165%); -webkit-backdrop-filter:blur(14px) saturate(165%); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); position:relative;overflow:hidden; } .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--ghost::after, .sec--dark .btn--ghost::after, .sec--deep .btn--ghost::after{ content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent); opacity:0;transition:opacity .22s ease; } .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--ghost:hover, .sec--dark .btn--ghost:hover, .sec--deep .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20)} .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--ghost:hover::after, .sec--dark .btn--ghost:hover::after, .sec--deep .btn--ghost:hover::after{opacity:1} .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--ghost svg, .sec--dark .btn--ghost svg, .sec--deep .btn--ghost svg{transition:transform .26s cubic-bezier(.22,1,.36,1)} .sec:not(.sec--light):not(.sec--light-alt):not(.light) .btn--ghost:hover svg, .sec--dark .btn--ghost:hover svg, .sec--deep .btn--ghost:hover svg{transform:translateX(4px)} /* 浅色区块内的按钮保持原样（蓝底 / 描边），此处显式声明以防上面规则外溢 */ .sec--light .btn--primary,.sec--light-alt .btn--primary,.light .btn--primary{ color:#fff;background:var(--blue);border-color:var(--blue); } .sec--light .btn--primary:hover,.sec--light-alt .btn--primary:hover,.light .btn--primary:hover{ background:var(--blue-dk);border-color:var(--blue-dk); } /* 滑动文字 CTA：文字上滑换行（源自 Sliding Text CTA），克制、适合深色区 */ .btn--slide{ position:relative;overflow:hidden; color:var(--txt-2); background:transparent; border:1px solid var(--line-2); transition:border-color .22s ease,color .22s ease; } .btn--slide .st{position:relative;display:block;overflow:hidden;height:1.25em;line-height:1.25} .btn--slide .st i{ display:block;font-style:normal; transition:transform .38s cubic-bezier(.22,1,.36,1); } .btn--slide .st i + i{position:absolute;top:100%;left:0;right:0;color:var(--txt)} .btn--slide:hover{border-color:var(--line-3)} .btn--slide:hover .st i{transform:translateY(-100%)} .btn--slide:focus-visible{outline:2px solid var(--blue-lt);outline-offset:3px} .light .btn--ghost{color:var(--ink);background:transparent;border-color:var(--paper-line)} .light .btn--ghost:hover{background:#fff;border-color:var(--line-3);border-color:rgba(15,18,22,.28)} .arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--blue-lt);transition:gap .2s ease} .arrow-link:hover{gap:13px} .light .arrow-link{color:var(--blue-dk)} /* ---------- 7. 卡片 → 编辑体区块 ---------- */ /* 玻璃保留给导航与浮层，不再作为常规卡片底 */ .glass{ position:relative;border-radius:var(--r-md); background:var(--panel);border:1px solid var(--line); } /* 常规卡片：无浮起、无阴影，靠发丝线定义边界（工程图纸语汇） */ .card{ position:relative;display:flex;flex-direction:column;gap:14px; padding:28px 26px;border-radius:var(--r); background:transparent;border:1px solid var(--line); transition:border-color .22s ease,background .22s ease; } .card:hover{border-color:var(--line-2);background:rgba(255,255,255,.018)} .card--glass{background:rgba(255,255,255,.022);border-color:var(--line)} .card--glass:hover{background:rgba(255,255,255,.038);border-color:var(--line-2)} .card--flat:hover{transform:none} .card h3{margin:0} .card p{font-size:14.5px;line-height:1.74;color:var(--txt-2);margin:0} .card--link{cursor:pointer} /* 浅色区的卡片：白底 + 细边 = 标准 SaaS 卡片墙，是子页面「一眼 AI」的另一处来源。 本设计系统里深色区靠发丝线定义边界，浅色区没有理由例外 —— 去掉填充与侧边，只留上方一条发丝线，六个格子读起来是一张表格/台账， 而不是六张并排的卡。 */ .light .card{ background:none;border:0;border-top:1px solid var(--paper-line);border-radius:0; } .light .card:hover{background:rgba(15,18,22,.018);border-color:rgba(15,18,22,.26)} .light .card--glass{background:none} .light .card--glass:hover{background:rgba(15,18,22,.018)} .light .card p{color:var(--ink-2)} /* 编号索引卡 — 编辑体主力版式：序号在左，内容在右，无边框无底色 */ .card--idx{ display:grid;grid-template-columns:auto 1fr;gap:0 20px; padding:30px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none; } .card--idx:hover{background:none;border-color:var(--line)} .card--idx .idx{grid-row:span 3;font-size:12px;padding-top:5px;color:var(--txt-4)} .card--idx h3{font-size:17px;margin:0 0 8px} .card--idx p{margin:0} .light .card--idx{border-color:var(--paper-line)} .light .card--idx:hover{background:none;border-color:var(--paper-line)} .light .card--idx .idx{color:#9BA2AE} /* 图标芯片 — 去渐变去发光，改硬边方块 */ .ico{ width:42px;height:42px;flex:none;display:grid;place-items:center; border-radius:var(--r-sm);color:var(--blue-lt); background:rgba(47,111,228,.10); border:1px solid rgba(108,155,240,.24); } .ico svg{width:20px;height:20px} .ico--sm{width:34px;height:34px;border-radius:var(--r-xs)} .ico--sm svg{width:16px;height:16px} .ico--lg{width:50px;height:50px;border-radius:var(--r)} .ico--lg svg{width:24px;height:24px} .light .ico{color:var(--blue);background:rgba(47,111,228,.08);border-color:rgba(47,111,228,.2)} /* 序号 */ .idx{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--blue-lt);letter-spacing:.06em} .light .idx{color:var(--blue-dk)} /* 标签 — 去胶囊，改工程标签（小圆角 + 发丝边） */ .tag{ display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px; border-radius:var(--r-xs);font-size:11.5px;font-weight:600;letter-spacing:.02em; background:rgba(47,111,228,.08);color:var(--blue-lt);border:1px solid rgba(108,155,240,.22); } .tag--cy{background:rgba(47,111,228,.08);color:var(--blue-lt);border-color:rgba(108,155,240,.22)} .tag--warn{background:rgba(217,83,79,.11);color:#E58A87;border-color:rgba(217,83,79,.28)} .tag--ok{background:rgba(63,158,106,.11);color:#63B98A;border-color:rgba(63,158,106,.28)} .tag--mute{background:rgba(255,255,255,.04);color:var(--txt-3);border-color:var(--line)} .light .tag{background:rgba(47,111,228,.08);color:var(--blue-dk);border-color:rgba(47,111,228,.2)} .light .tag--mute{background:var(--paper-2);color:var(--ink-2);border-color:var(--paper-line)} /* 图片/截图框 — 硬边，轻投影 */ .shot{ position:relative;overflow:hidden;border-radius:var(--r-sm); border:1px solid var(--line-2);background:#fff;box-shadow:var(--sh-shot); } .shot img{width:100%;height:auto;display:block} .shot--dark{background:var(--panel)} .shot--photo{border-color:var(--line-2)} .shot--photo img{width:100%;height:100%;object-fit:cover} .shot-bar{ display:flex;align-items:center;gap:7px;padding:10px 14px; background:rgba(8,10,14,.94);border-bottom:1px solid var(--line); } .shot-bar i{width:9px;height:9px;border-radius:50%;background:#252A33;flex:none} .shot-bar i:first-child{background:#D9534F} .shot-bar i:nth-child(2){background:#D2A24C} .shot-bar i:nth-child(3){background:#3F9E6A} .shot-bar span{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--txt-3);letter-spacing:.03em} /* 可点击放大 */ .zoomable{cursor:zoom-in} .zoomable::after{ content:"点击放大";position:absolute;right:12px;bottom:12px; padding:5px 11px;border-radius:var(--r-xs);font-size:11.5px;font-weight:600; background:rgba(6,8,12,.86);color:var(--txt);border:1px solid var(--line-2); opacity:0;transition:opacity .22s ease; } .zoomable:hover::after{opacity:1} /* 实景照片带 — 去圆角去描边，整幅出血 */ .pstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .pstrip figure{ position:relative;margin:0;height:268px;overflow:hidden; border-radius:var(--r-xs);border:1px solid var(--line); background:var(--panel); } .pstrip img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .9s cubic-bezier(.22,.75,.2,1),filter .5s ease; filter:saturate(.8) brightness(.92) contrast(1.04)} .pstrip figure:hover img{transform:scale(1.04);filter:saturate(.95) brightness(1) contrast(1.06)} .pstrip figure::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 42%,rgba(8,9,12,.88) 100%); } .pstrip figcaption{ position:absolute;left:20px;right:20px;bottom:18px;z-index:2; font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.5; } .pstrip figcaption span{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--txt-2)} /* 科技图块拼贴 */ .mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:2px} .mosaic figure{ position:relative;margin:0;aspect-ratio:16/9;overflow:hidden; border-radius:var(--r-xs);border:1px solid var(--line); background:var(--panel); transition:border-color .3s ease; } .mosaic img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.86) brightness(.9) contrast(1.05); transition:transform .8s cubic-bezier(.22,.75,.2,1),filter .45s ease} .mosaic figure:hover{border-color:var(--line-3)} .mosaic figure:hover img{transform:scale(1.05);filter:saturate(.98) brightness(1) contrast(1.06)} .mosaic figcaption{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 14px 11px; font-size:12.5px;font-weight:600;color:var(--txt);letter-spacing:.01em; background:linear-gradient(180deg,transparent,rgba(8,9,12,.92)); } .mosaic--3{grid-template-columns:repeat(3,1fr)} .mosaic--6{grid-template-columns:repeat(3,1fr)} /* 分页 */ .pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:44px;flex-wrap:wrap} .pager a,.pager span{ min-width:42px;height:42px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center; border-radius:var(--r-sm);font-size:14px;font-weight:600;font-family:var(--mono); background:transparent;border:1px solid var(--line);color:var(--txt-2);transition:all .2s ease; } .pager a:hover{border-color:var(--line-3);color:var(--txt)} .pager .on{background:var(--blue);border-color:var(--blue);color:#fff} .pager .dis{opacity:.34;cursor:not-allowed} .light .pager a,.light .pager span{background:#fff;border-color:var(--paper-line);color:var(--ink-2)} .light .pager a:hover{border-color:rgba(15,18,22,.3);color:var(--ink)} .light .pager .on{color:#fff;border-color:var(--blue)} /* 预约日历 */ .cal{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:22px} .cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .cal-head b{font-size:14.5px;color:var(--txt)} .cal-head span{font-family:var(--mono);font-size:12px;color:var(--txt-3)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .cal-wd{font-family:var(--mono);font-size:11px;color:var(--txt-3);text-align:center;padding:6px 0;letter-spacing:.06em} .cal-day{ aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--r-xs); font-size:13.5px;font-family:var(--mono);color:var(--txt-2); background:transparent;border:1px solid transparent;cursor:pointer;transition:all .18s ease; } .cal-day:hover{border-color:var(--line-2);color:var(--txt)} .cal-day[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)} .cal-day.dim{opacity:.26;cursor:not-allowed;pointer-events:none} .cal-day.wknd{color:var(--txt-3)} .cal-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} .cal-slots button{ height:36px;padding:0 16px;border-radius:var(--r-xs);font-size:13px;font-weight:600;font-family:var(--mono); background:transparent;border:1px solid var(--line-2);color:var(--txt-2);cursor:pointer;transition:all .18s ease; } .cal-slots button:hover{border-color:var(--line-3);color:var(--txt)} .cal-slots button[aria-pressed="true"]{background:rgba(47,111,228,.14);border-color:var(--blue-lt);color:var(--blue-lt)} /* 报价估算器 */ .estimator{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:start} .est-out{ position:sticky;top:104px;border:1px solid var(--line-2);border-radius:var(--r); background:var(--panel); padding:28px; } .est-out .et{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--txt-3);text-transform:uppercase} .est-out .ev{font-family:var(--mono);font-size:42px;font-weight:700;letter-spacing:-.03em;color:var(--txt);margin-top:12px;line-height:1.05} .est-out .eu{font-size:13px;color:var(--txt-2);margin-top:8px} .est-rows{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:11px} .est-rows > div{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;color:var(--txt-2)} .est-rows b{font-family:var(--mono);color:var(--txt);font-weight:600} /* 门户侧栏 */ .portal-lay{display:grid;grid-template-columns:236px 1fr;gap:34px;align-items:start} .portal-nav{position:sticky;top:104px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:14px} .portal-nav h5{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--txt-3);text-transform:uppercase;margin:8px 10px 12px} .portal-nav a{ display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-xs); font-size:14px;color:var(--txt-2);transition:all .2s ease; } .portal-nav a svg{width:18px;height:18px;flex:none;opacity:.85} .portal-nav a > span{white-space:nowrap} .portal-nav a:hover{background:rgba(255,255,255,.04);color:var(--txt)} .portal-nav a.on{background:rgba(47,111,228,.12);color:var(--blue-lt);font-weight:600} .portal-nav a .pn{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--txt-3)} .portal-nav hr{border:0;border-top:1px solid var(--line);margin:12px 6px} /* 详情页长文 */ .article{max-width:820px} .article h3{font-size:21px;margin:44px 0 14px;color:var(--txt)} .article h3:first-child{margin-top:0} .article h4{font-size:16.5px;margin:28px 0 10px;color:var(--txt)} .article p{font-size:15px;line-height:1.9;color:var(--txt-2);margin:0 0 16px} .article ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:11px} .article ul li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.82;color:var(--txt-2)} .article ul li::before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--blue)} .article blockquote{ margin:24px 0;padding:20px 24px;border-left:2px solid var(--blue); background:rgba(47,111,228,.05);border-radius:0 var(--r-xs) var(--r-xs) 0; font-size:15px;line-height:1.82;color:var(--txt); } .article blockquote cite{display:block;margin-top:12px;font-size:13px;font-style:normal;color:var(--txt-3)} .light .article h3,.light .article h4{color:var(--ink)} .light .article p,.light .article ul li{color:var(--ink-2)} .light .article blockquote{background:#F0F4FD;color:var(--ink)} .light .article blockquote cite{color:var(--ink-3)} /* 元信息行 */ .meta-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin:22px 0 0} .meta-row > div{font-size:13.5px;color:var(--txt-3)} .meta-row b{color:var(--txt);font-weight:600;font-family:var(--mono)} .light .meta-row > div{color:var(--ink-3)} .light .meta-row b{color:var(--ink)} /* 编号索引清单 — 编辑体主力版式：取代卡片墙 */ .index-list{display:grid;grid-template-columns:1fr 1fr;gap:0 64px} .index-list > article:first-child{border-top:1px solid var(--line)} .light .index-list > article:first-child{border-color:var(--paper-line)} /* 产品索引 + 截图锚点：非对称双栏 */ .prod-lay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:56px;align-items:start} .prod-list{display:grid;gap:0} .prod-row{ display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:0 22px; padding:24px 0;border-top:1px solid var(--line); transition:background .2s ease; } .prod-row:last-child{border-bottom:1px solid var(--line)} .prod-row .idx{padding-top:5px;color:var(--txt-4)} .prod-row h3{font-size:17px;margin:0 0 7px;transition:color .2s ease} .prod-row p{font-size:14px;line-height:1.72;color:var(--txt-2);margin:0;max-width:52ch} .prod-row .pr-arrow{color:var(--txt-4);margin-top:5px;transition:color .2s ease,transform .25s ease} .prod-row:hover h3{color:var(--txt)} .prod-row:hover .pr-arrow{color:var(--blue-lt);transform:translateX(4px)} .light .prod-row{border-color:var(--paper-line)} .light .prod-row:hover h3{color:var(--ink)} .light .prod-row .idx{color:#9BA2AE} .light .prod-row p{color:var(--ink-2)} .prod-shot{position:sticky;top:104px} @media (max-width:1000px){ .prod-lay{grid-template-columns:1fr;gap:36px} .prod-shot{position:static} } @media (max-width:760px){ .index-list{grid-template-columns:1fr;gap:0} } /* 案例栏 — 大数字主导，靠纵向发丝线分栏（取代等宽卡片） */ .case-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .case-item{display:flex;flex-direction:column;padding:34px 30px 34px 0;border-left:1px solid var(--line);padding-left:30px} .case-item:first-child{border-left:0;padding-left:0} .case-item .ci-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)} .case-item .ci-num{font-family:var(--mono);font-size:44px;font-weight:600;letter-spacing:-.045em;line-height:1.05;color:var(--txt);margin-top:16px;font-variant-numeric:tabular-nums} .case-item .ci-num em{font-size:22px;font-style:normal;color:var(--txt-3);margin-left:2px} .case-item .ci-lab{font-size:14px;font-weight:600;color:var(--txt-2);margin-top:4px} .case-item p{font-size:13.5px;line-height:1.72;color:var(--txt-3);margin:16px 0 0} .case-item .ci-more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600; color:var(--blue-lt);margin-top:auto;padding-top:20px;transition:gap .2s ease} .case-item:hover .ci-more{gap:12px} .light .case-strip{border-color:var(--paper-line)} .light .case-item{border-color:var(--paper-line)} .light .case-item .ci-num{color:var(--ink)} .light .case-item .ci-lab{color:var(--ink-2)} .light .case-item p{color:var(--ink-3)} .light .case-item .ci-more{color:var(--blue-dk)} @media (max-width:1000px){ .case-strip{grid-template-columns:1fr} .case-item{border-left:0;padding-left:0;border-top:1px solid var(--line)} .case-item:first-child{border-top:0} } /* 政策资讯 — 日期栏新闻列表 */ .news-list{display:grid;gap:0;border-top:1px solid var(--line)} .news-row{ display:grid;grid-template-columns:104px auto 1fr auto;align-items:baseline;gap:0 20px; padding:24px 0;border-bottom:1px solid var(--line);transition:background .18s ease; } .news-row .nr-date{font-family:var(--mono);font-size:12.5px;color:var(--txt-4);letter-spacing:.02em} .news-row h3{font-size:16.5px;margin:0} .news-row p{font-size:13.5px;line-height:1.7;color:var(--txt-3);margin:6px 0 0; grid-column:3 / 4} .news-row .nr-arrow{color:var(--txt-4);align-self:center;transition:color .2s ease,transform .25s ease} .news-row:hover h3{color:var(--txt)} .news-row:hover .nr-arrow{color:var(--blue-lt);transform:translateX(4px)} .light .news-list{border-color:var(--paper-line)} .light .news-row{border-color:var(--paper-line)} .light .news-row:hover h3{color:var(--ink)} .light .news-row p{color:var(--ink-3)} .light .news-row .nr-date{color:#9BA2AE} @media (max-width:760px){ .news-row{grid-template-columns:1fr auto;gap:8px 12px} .news-row .nr-date{grid-column:1/-1} .news-row h3,.news-row p{grid-column:1/-1} } /* ---------- 8. 首屏 ---------- */ .hero{position:relative;padding:0;background:var(--abyss);overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0;background:var(--abyss)} /* 真实工厂摄影做主视觉：不做去饱和、不叠重纱。 原版 saturate(.7)+opacity:.82+双层渐变 → 画面糊成一团灰， 正是用户指出的「背景很模糊很难看」。此处改为只压右半区， 让主体（工件/产线/工人）在左文右图的构图里真正看得见。 */ .hero-bg img{ /* 高度给到 114%：首屏照片要参与滚动视差（js/site.js 里 yPercent 0→10）， 若仍是 100% 会在上缘露出一条空底。多出的 14% 就是位移余量。 */ width:100%;height:114%;object-fit:cover;object-position:72% 46%; opacity:1; filter:saturate(.92) contrast(1.04) brightness(.96); } .hero-bg::after{ content:"";position:absolute;inset:0; /* 左侧为文字让位（必须压暗到能读），右侧只做极轻的暗角， 中间用一条斜向过渡把「可读区」和「观赏区」分开 */ background: linear-gradient(100deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.86) 26%, rgba(8,9,12,.52) 48%, rgba(8,9,12,.16) 64%, rgba(8,9,12,.10) 100%), linear-gradient(180deg, rgba(8,9,12,.34) 0%, rgba(8,9,12,0) 22%, rgba(8,9,12,0) 62%, rgba(8,9,12,.62) 88%, var(--abyss) 100%); } /* 数字孪生线框底纹：必须「克制」——真实照片是主角，网格只是叠加的工程语汇。 原 .05 白线 + 大范围 mask 在照片上会形成一层灰雾，降到 .028 并收窄到右半区。 */ .hero-veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse 58% 52% at 68% 46%,#000 0%,transparent 72%); -webkit-mask-image:radial-gradient(ellipse 58% 52% at 68% 46%,#000 0%,transparent 72%); } .hero-inner{position:relative;z-index:2;padding-top:132px;padding-bottom:96px;min-height:min(780px,88vh);display:flex;align-items:center} .hero-inner > .hero-grid{width:100%;flex:1} .hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:64px;align-items:center} .hero-grid > *,.split > *,.grid > *{min-width:0} .hero h1{margin-bottom:24px} .hero .lead{font-size:17px;max-width:540px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px} .hero-trust{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .hero-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} .hero-meta span{ display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--txt-2); } .hero-meta span::before{content:"";width:4px;height:4px;background:var(--blue-lt);flex:none} /* 首屏右侧 KPI — 工程仪表盘：硬边 + 等宽数字 + 发丝分隔。 背景 .82 在真实照片前会「透出纹理」而显脏，提到 .93 并加一层极淡的 冷色内衬，让它在车间照片上依然是一块干净的仪表，而不是一块毛玻璃。 */ .hero-visual{position:relative} .hero-stack{display:flex;flex-direction:column;gap:0;max-width:440px;margin-left:auto; border:1px solid var(--line-2);border-radius:var(--r); background:linear-gradient(180deg,rgba(13,15,20,.94),rgba(10,12,16,.96)); box-shadow:0 24px 56px -28px rgba(0,0,0,.9); overflow:hidden} .kpi{ padding:18px 20px;border-radius:0;border-bottom:1px solid var(--line); background:transparent; } .kpi:last-child{border-bottom:0} .kpi .k{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--txt-3);letter-spacing:.02em} .kpi .v{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--txt);line-height:1.12;margin-top:8px;letter-spacing:-.035em} .kpi .v em{font-size:14px;font-style:normal;color:var(--txt-3);margin-left:5px;font-family:var(--sans)} .kpi .bar{height:3px;background:rgba(255,255,255,.09);margin-top:13px;overflow:hidden} .kpi .bar i{display:block;height:100%;background:var(--blue)} /* 规格行（替代原三栏 kpi-row）： 原来是 grid 3 等分，每格净宽只剩 ~110px，22px 等宽数字下 「按需交付」「月付 / 年付」「SaaS / 私有化」全部被折成两行， 三行错落的高矮块把整块仪表盘拉散。 改成左标签 / 右取值的单行规格表：值拿到整行宽度，永不断行， 且「标签—取值」的对照关系比三栏并列更容易扫读（工程规格表的读法）。 */ .spec-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px; padding:14px 20px;border-bottom:1px solid var(--line)} .spec-row:last-child{border-bottom:0} .spec-row .k{font-size:12.5px;color:var(--txt-3);white-space:nowrap} .spec-row .v{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--txt); letter-spacing:-.01em;white-space:nowrap;text-align:right} /* 首屏轮播指示 */ .dots{display:flex;align-items:center;gap:10px;margin-top:44px} .dots button{ width:26px;height:2px;border:0;background:rgba(255,255,255,.22); cursor:pointer;padding:0;transition:background .25s ease,width .25s ease; } .dots button[aria-current="true"]{background:var(--blue-lt);width:38px} /* ---------- 9. 数据带 ---------- */ /* 编辑体数据带：去掉外框圆角与等宽分格，改为上下发丝线 + 纵向分隔 */ .band{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); border-radius:0;overflow:visible; } .band > div{padding:32px 30px;background:none;border-left:1px solid var(--line)} .band > div:first-child{border-left:0;padding-left:0} .band .v{font-family:var(--mono);font-size:36px;font-weight:600;line-height:1.05;letter-spacing:-.035em;color:var(--txt)} .band .k{font-size:13.5px;color:var(--txt-3);margin-top:10px} .light .band{background:none;border-color:var(--paper-line)} .light .band > div{background:none;border-color:var(--paper-line)} .light .band .v{color:var(--ink)} .light .band .k{color:var(--ink-3)} /* 行内数据 */ .stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .stats > div{padding:22px 20px;background:var(--panel)} .stats .v{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--txt);letter-spacing:-.03em} .stats .k{font-size:13px;color:var(--txt-3);margin-top:6px} .light .stats{background:var(--paper-line);border-color:var(--paper-line)} .light .stats > div{background:#fff} .light .stats .v{color:var(--ink)} .light .stats .k{color:var(--ink-3)} /* ---------- 10. 列表 / 流程 / 表格 ---------- */ /* 流程步骤 — 去网格底色与圆角，靠发丝线切分 */ .flow{display:grid;gap:0;background:none;border-radius:0;overflow:visible; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .flow--4{grid-template-columns:repeat(4,1fr)} .flow--5{grid-template-columns:repeat(5,1fr)} .flow--6{grid-template-columns:repeat(6,1fr)} .flow--8{grid-template-columns:repeat(8,1fr)} .flow > div{padding:26px 18px 26px 0;background:none;position:relative;border-left:1px solid var(--line);padding-left:22px} .flow > div:first-child{border-left:0;padding-left:0} .flow .n{font-family:var(--mono);font-size:11.5px;color:var(--txt-4);letter-spacing:.1em} .flow h4{margin:10px 0 7px;font-size:14.5px} .flow p{font-size:12.5px;line-height:1.65;color:var(--txt-3);margin:0} .flow--8 h4{font-size:13px} .flow--8 p{font-size:11.5px} .light .flow{background:none;border-color:var(--paper-line)} .light .flow > div{background:none;border-color:var(--paper-line)} .light .flow .n{color:#9BA2AE} .light .flow p{color:var(--ink-3)} /* 定义列表 */ .dl{display:grid;gap:0} .dl > div{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:20px 0;border-bottom:1px solid var(--line)} .dl > div:first-child{border-top:1px solid var(--line)} .dl dt{font-size:14px;font-weight:600;color:var(--txt);margin:0} .dl dd{margin:0;font-size:14.5px;color:var(--txt-2);line-height:1.75} .light .dl > div{border-color:var(--paper-line)} .light .dl dt{color:var(--ink)} .light .dl dd{color:var(--ink-2)} /* 要点列表 */ .check{display:grid;gap:13px} .check li{display:flex;gap:11px;font-size:14.5px;line-height:1.72;color:var(--txt-2)} .check li::before{ content:"";flex:none;width:16px;height:16px;margin-top:5px;border-radius:2px; background:rgba(47,111,228,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C9BF0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; border:1px solid rgba(108,155,240,.26); } .check--warn li::before{ background:rgba(217,83,79,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E58A87' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/9px no-repeat; border-color:rgba(217,83,79,.28); } .light .check li{color:var(--ink-2)} /* 表格 */ .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)} table.tbl{min-width:720px;font-size:14px} table.tbl th,table.tbl td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} table.tbl thead th{ background:rgba(255,255,255,.03);font-size:11.5px;font-weight:600;color:var(--txt-3); letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);white-space:nowrap; } table.tbl tbody tr:last-child td{border-bottom:0} table.tbl tbody tr:hover{background:rgba(255,255,255,.02)} table.tbl td:first-child{font-weight:600;color:var(--txt)} table.tbl .yes{color:var(--blue-lt);font-weight:600} table.tbl .no{color:var(--txt-4)} .light .tbl-wrap{background:#fff;border-color:var(--paper-line)} .light table.tbl th,.light table.tbl td{border-color:var(--paper-line)} .light table.tbl thead th{background:var(--paper-2);color:var(--ink-3)} .light table.tbl tbody tr:hover{background:rgba(47,111,228,.03)} .light table.tbl td:first-child{color:var(--ink)} .light table.tbl .yes{color:var(--blue-dk)} .light table.tbl .no{color:#A8B5C6} /* ---------- 11. 套餐 ---------- */ /* 编辑体价目：去卡片浮起，改列式硬边；推荐档用左侧色条 + 实底标 */ .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:stretch; border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .plan{ display:flex;flex-direction:column;gap:18px;padding:32px 26px;border-radius:0; background:transparent;border:0;border-left:1px solid var(--line);position:relative; transition:background .22s ease; } .plan:first-child{border-left:0} .plan:hover{background:rgba(255,255,255,.02)} .plan--hot{background:rgba(47,111,228,.05)} .plan--hot::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue); } .plan--hot::after{ content:"推荐";position:absolute;top:18px;right:20px; height:20px;padding:0 8px;border-radius:var(--r-xs);font-size:10.5px;font-weight:700;line-height:20px; letter-spacing:.06em;color:#fff;background:var(--blue); } .plan .pn{font-size:17px;font-weight:600} .plan .pd{font-size:13px;color:var(--txt-3);margin-top:5px} .plan .price{font-family:var(--sans);font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums} .plan .price em{font-size:14px;font-style:normal;color:var(--txt-3);font-family:var(--sans);margin-left:5px;letter-spacing:0} .plan .price small{font-size:13px;color:var(--txt-3);font-family:var(--sans);margin-left:6px} .plan ul{display:grid;gap:11px;font-size:14px;color:var(--txt-2);flex:1} .plan ul li{display:flex;gap:10px;line-height:1.7} .plan ul li::before{content:"";flex:none;width:14px;height:14px;margin-top:5px;border-radius:2px; background:rgba(47,111,228,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C9BF0' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat} .light .plans{border-color:var(--paper-line)} .light .plan{background:#fff;border-color:var(--paper-line)} .light .plan--hot{background:#F2F6FE} .light .plan .pd,.light .plan .price em,.light .plan .price small{color:var(--ink-3)} .light .plan ul{color:var(--ink-2)} /* 计费切换 */ .switch{ display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-sm); background:transparent;border:1px solid var(--line); } .switch button{ height:36px;padding:0 20px;border:0;border-radius:var(--r-xs);background:transparent; color:var(--txt-2);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease; } .switch button[aria-pressed="true"]{background:var(--blue);color:#fff} .light .switch{background:#fff;border-color:var(--paper-line)} .light .switch button{color:var(--ink-2)} .light .switch button[aria-pressed="true"]{color:#fff} /* ---------- 12. 筛选 ---------- */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px} .filters button{ height:36px;padding:0 16px;border-radius:var(--r-xs);cursor:pointer;font-size:14px;font-weight:500; background:transparent;border:1px solid var(--line);color:var(--txt-2);transition:all .2s ease; } .filters button:hover{border-color:var(--line-3);color:var(--txt)} .filters button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff} .light .filters button{background:#fff;border-color:var(--paper-line);color:var(--ink-2)} .light .filters button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff} .filters--group{display:grid;gap:14px} .filters--group > div{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .filters--group .fk{font-family:var(--mono);font-size:11.5px;color:var(--txt-3);letter-spacing:.08em;text-transform:uppercase;min-width:64px} /* 多维筛选器下方的说明行（案例中心筛选提示） */ .filter-hint{margin:-20px 0 34px;font-size:12.5px;line-height:1.7;color:var(--txt-3)} .light .filter-hint{color:var(--ink-3)} /* ---------- 13. FAQ ---------- */ .faq{display:grid;gap:0;background:none;border:0;border-top:1px solid var(--line);border-radius:0;overflow:visible} .faq details{background:none;border-bottom:1px solid var(--line)} .faq details[open]{background:none} .faq summary{ display:flex;justify-content:space-between;gap:20px;align-items:center; padding:22px 0;cursor:pointer;list-style:none;font-size:15.5px;font-weight:600; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";flex:none;width:18px;height:18px;border-radius:var(--r-xs); background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C9BF0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/12px no-repeat; border:1px solid var(--line-2); transition:transform .25s ease; } .faq details[open] summary::after{transform:rotate(45deg)} .faq .fa{padding:0 0 24px;font-size:14.5px;line-height:1.8;color:var(--txt-2);max-width:860px} .light .faq{background:none;border-color:var(--paper-line)} .light .faq details{background:none;border-color:var(--paper-line)} .light .faq details[open]{background:none} .light .faq .fa{color:var(--ink-2)} /* ---------- 14. 表单 ---------- */ .form{display:grid;gap:20px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .field{display:grid;gap:8px} .field label{font-size:13.5px;font-weight:600;color:var(--txt-2)} .field label .req{color:#FF7A7E;margin-left:3px} .field input,.field select,.field textarea{ width:100%;padding:13px 15px;border-radius:var(--r-sm); background:rgba(0,0,0,.22);border:1px solid var(--line-2);color:var(--txt); font-size:14.5px;transition:border-color .2s ease,background .2s ease; } .field textarea{min-height:120px;resize:vertical;line-height:1.7} .field input::placeholder,.field textarea::placeholder{color:var(--txt-4)} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,111,228,.16); } .field .hint{font-size:12.5px;color:var(--txt-3);line-height:1.6} .field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8099' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px} .light .field label{color:var(--ink-2)} .light .field input,.light .field select,.light .field textarea{background:#fff;border-color:var(--paper-line);color:var(--ink)} .light .field input::placeholder,.light .field textarea::placeholder{color:#9AA9BC} .upload{ display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px; border:1px dashed var(--line-2);border-radius:var(--r-sm);background:rgba(0,0,0,.16); text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease; } .upload:hover{border-color:var(--blue);background:rgba(47,111,228,.05)} .upload .u1{font-size:14px;font-weight:600;color:var(--txt)} .upload .u2{font-size:12.5px;color:var(--txt-3)} .form-note{ padding:14px 16px;border-radius:var(--r-sm);font-size:13px;line-height:1.7; background:rgba(47,111,228,.06);border:1px solid rgba(108,155,240,.18);color:var(--txt-2); } .form-ok{ display:none;padding:14px 16px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.7; background:rgba(63,158,106,.1);border:1px solid rgba(63,158,106,.28);color:#63B98A; } .form-ok.on{display:block} /* ---------- 15. 面包屑 / 页头 ---------- */ .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--txt-3);padding:22px 0} .crumb a:hover{color:var(--blue-lt)} .crumb span{color:var(--txt-4)} /* 子页面原先是「大标题 + 三行小字 + 100px 空洞」——版式只有一层， 留白没有承载物，看上去像被截断的后台页。这是「一眼 AI」的头号来源。 现改造为「全屏工程舞台」： · 满屏高度，内容底对齐（编辑体的重心落在下三分之一，不是居中） · 底图二选一：真实工业摄影（.phead--photo）/ 工程图纸（.phead--blue） · 斜向单侧压暗，左侧为文字让位、右侧保留影像本体 · 右栏「本页内容」索引 —— 把原来的空洞换成可用的站内导航， 它同时是滚动进度的载体（读到哪一节，哪一行亮起） · 底部工程刻度尺 + 下滚提示，把「还有内容」这件事说清楚 两档底图与索引均由 js/site.js 的 buildStage() 注入，39 个页面共用同一套底座。 */ .phead{ position:relative;padding:0;background:var(--abyss);overflow:hidden; min-height:100vh;min-height:100svh; display:flex;align-items:stretch; border-bottom:1px solid var(--line); } .phead > .wrap{ position:relative;z-index:3;width:100%; display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.62fr); gap:clamp(40px,5vw,84px);align-items:end; padding-top:168px;padding-bottom:124px; } .phead-main{min-width:0} .phead h1{font-size:clamp(31px,3.9vw,52px);max-width:820px} .phead .lead{margin-top:22px;max-width:620px;font-size:16.5px;color:var(--txt-2)} .phead .crumb{padding:0 0 24px;color:var(--txt-3)} /* 页头标签 —— 去胶囊阵列，改「刻度 + 事实」行： 左侧一道短刻度线，右侧等宽字，读起来像图纸的注记栏而不是 SaaS 的 chip 墙。 带语义的 tag--warn / tag--ok 保留原样（它们承载重要提示信息）。 */ .phead-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:30px;align-items:center} .phead-meta .tag:not(.tag--warn):not(.tag--ok){ height:auto;padding:0 0 0 15px;border:0;border-radius:0;background:none; position:relative;font-family:var(--mono);font-size:12px;font-weight:500; letter-spacing:.06em;color:var(--txt-2); } .phead-meta .tag:not(.tag--warn):not(.tag--ok)::before{ content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--blue-lt); } .light .phead-meta .tag:not(.tag--warn):not(.tag--ok){color:var(--ink-2)} /* ---- 底图 A：真实工业摄影 ---- */ .ph-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--abyss)} /* 高度给到 116% 是为了留出视差位移的余量，滚动时不会露出上下白边 */ .ph-bg img{ width:100%;height:116%;object-fit:cover;object-position:72% 52%; filter:saturate(.9) contrast(1.05) brightness(.92); transform:translate3d(0,-8%,0) scale(1.02);will-change:transform; } .ph-bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(100deg, rgba(8,9,12,.95) 0%, rgba(8,9,12,.89) 32%, rgba(8,9,12,.62) 54%, rgba(8,9,12,.22) 76%, rgba(8,9,12,.12) 100%), linear-gradient(180deg, rgba(8,9,12,.5) 0%, rgba(8,9,12,.08) 30%, rgba(8,9,12,0) 54%, rgba(8,9,12,.46) 86%, var(--abyss) 100%); } /* ---- 底图 B：工程图纸（无合适实拍的页面走这一档，而不是硬凑照片）---- */ .ph-blue{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--abyss)} .ph-blue i{ position:absolute;inset:-14% 0 0;display:block; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px); background-size:104px 104px,104px 104px,26px 26px,26px 26px; mask-image:radial-gradient(ellipse 88% 96% at 32% 42%,#000 10%,transparent 84%); -webkit-mask-image:radial-gradient(ellipse 88% 96% at 32% 42%,#000 10%,transparent 84%); will-change:transform; } /* 四角收暗：整屏方格纸会显得像空白的坐标本，压掉边角后重心才回到内容上 */ .ph-blue::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 92% 82% at 34% 46%,transparent 34%,rgba(8,9,12,.62) 88%); } /* 页码水印 —— 让「这是第几页」这件事有形体，替代无意义的装饰图形 */ .ph-num{ position:absolute;right:-1.5%;bottom:-10%;z-index:1;pointer-events:none;user-select:none; font-family:var(--mono);font-weight:700;letter-spacing:-.07em;line-height:.76; font-size:min(30vw,400px);color:rgba(255,255,255,.032); } /* 图纸角标（裁切标记）*/ .ph-crop{position:absolute;width:13px;height:13px;z-index:2;pointer-events:none; border:0 solid var(--line-3);opacity:.5} .ph-crop--tl{left:26px;top:26px;border-left-width:1px;border-top-width:1px} .ph-crop--tr{right:26px;top:26px;border-right-width:1px;border-top-width:1px} .ph-crop--bl{left:26px;bottom:74px;border-left-width:1px;border-bottom-width:1px} .ph-crop--br{right:26px;bottom:74px;border-right-width:1px;border-bottom-width:1px} /* ---- 工程网格叠加（两档底图共用，只在右半区显形，避免盖住文字）---- */ .ph-grid{ position:absolute;inset:0;z-index:1;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:76px 76px; mask-image:radial-gradient(ellipse 40% 58% at 72% 48%,#000 0%,transparent 76%); -webkit-mask-image:radial-gradient(ellipse 40% 58% at 72% 48%,#000 0%,transparent 76%); } .phead--blue .ph-grid{display:none} /* ---- 右栏：本页内容索引（原来的空洞现在装了这个）---- */ .ph-side{position:relative;min-width:0;align-self:end;padding-bottom:4px} /* 索引要压在真实照片上，亮车间里纯文字读不下来。 用一层只朝右加深的软渐变代替卡片/毛玻璃 —— 看不出边界，但对比度够读。 */ .ph-side::before{ content:"";position:absolute;z-index:-1;pointer-events:none; inset:-26px -44px -22px -60px; background:linear-gradient(270deg, rgba(8,9,12,.74) 0%, rgba(8,9,12,.5) 54%, rgba(8,9,12,.12) 84%, rgba(8,9,12,0) 100%); } .phead--blue .ph-side::before{display:none} /* ---- 图签（工程图纸档的右栏）---- */ .ph-spec .ph-idx-h{margin-bottom:2px} .ph-spec dl{display:grid} .ph-spec dl > div{ display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:baseline; padding:11px 0;border-bottom:1px solid var(--line); } .ph-spec dt{ font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--txt-4); } .ph-spec dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--txt-2);word-break:break-all} .ph-idx-h{ display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding-bottom:11px;border-bottom:1px solid var(--line-2); font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3); } .ph-idx-h em{font-style:normal;color:var(--txt-4)} .ph-idx ol{display:grid} .ph-idx li{border-bottom:1px solid var(--line)} .ph-idx a{ position:relative;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px; padding:12px 0;color:var(--txt-2); transition:color .2s ease,padding-left .3s cubic-bezier(.22,.61,.36,1); } /* 每行上方一条从左侧画入的发丝线 —— 「读到哪一节」的视觉锚点 */ .ph-idx a::before{ content:"";position:absolute;left:0;top:-1px;height:1px;width:0; background:var(--blue-lt);transition:width .55s cubic-bezier(.22,.61,.36,1); } .ph-idx a:hover{color:var(--txt);padding-left:7px} .ph-idx li.is-on a{color:var(--txt)} .ph-idx li.is-on a::before{width:100%} .ph-idx i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em; color:var(--txt-4);transition:color .25s ease} .ph-idx li.is-on i{color:var(--blue-lt)} .ph-idx span{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 右列是「可跳」这一事实的提示符，只在悬停 / 当前节亮起 —— 不在静止时增加噪声 */ .ph-idx em{ font-style:normal;font-family:var(--mono);font-size:12px;color:var(--blue-lt); opacity:0;transform:translateX(-5px); transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1); } .ph-idx a:hover em,.ph-idx li.is-on em{opacity:1;transform:none} /* ---- 页脚注记：刻度尺 + 下滚提示 + 页面坐标 ---- */ .ph-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none} .ph-foot::before{ content:"";display:block;height:1px;background:var(--line); } .ph-ruler{ height:9px; background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 1px,transparent 1px 64px), repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 16px); background-size:auto 9px,auto 5px; background-position:0 0,0 0;background-repeat:repeat-x; opacity:.55; } .ph-foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:15px;padding-bottom:17px} .ph-cue{ display:inline-flex;align-items:center;gap:11px; font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--txt-4); } .ph-cue i{position:relative;display:block;width:1px;height:28px;background:var(--line-2);overflow:hidden} .ph-cue i::after{ content:"";position:absolute;left:-.5px;width:2px;height:9px; /* 滚动提示：有明确引导功能，保留。但只跑 4 轮后停止 —— 永久循环会让它变成「页面一直在动」的噪音来源。 */ background:var(--blue-lt);animation:cueRun 2.8s cubic-bezier(.55,0,.45,1) 4 both; } @keyframes cueRun{ 0% {top:-10px;opacity:0} 22% {opacity:1} 78% {opacity:1} 100%{top:28px;opacity:0} } .ph-coord{ font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--txt-4);text-align:right; } .ph-coord b{color:var(--txt-3);font-weight:600} /* 无索引可显示时（不足 2 节 / 登录、404 等极简页），文字列占满整行 */ .phead--solo > .wrap{grid-template-columns:minmax(0,1fr);gap:0} .phead--solo h1,.phead--solo .lead{max-width:800px} /* ---------- 16. 页脚 ---------- */ .foot{background:var(--abyss);border-top:1px solid var(--line);padding:76px 0 0;position:relative;overflow:hidden} .foot::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(180deg,rgba(47,111,228,.05),transparent 40%); } .foot-top{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:44px;padding-bottom:56px} .foot-brand{display:flex;flex-direction:column;gap:18px;max-width:320px} .foot-logo{display:flex;align-items:center;gap:12px} .foot-logo img{width:36px;height:36px;border-radius:var(--r-sm)} .foot-logo .t1{font-size:16.5px;font-weight:700;letter-spacing:.01em} .foot-logo .t2{font-size:11.5px;color:var(--txt-3);letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono)} .foot-brand p{font-size:13.5px;line-height:1.8;color:var(--txt-3)} .foot-contact{display:grid;gap:9px;font-size:13.5px;color:var(--txt-2)} .foot-contact b{font-family:var(--mono);font-size:16px;color:var(--txt);letter-spacing:.01em} .foot-col h4{font-size:13.5px;font-weight:600;color:var(--txt);margin-bottom:18px;letter-spacing:.02em} .foot-col ul{display:grid;gap:11px} .foot-col a{font-size:13.5px;color:var(--txt-3);transition:color .18s ease} .foot-col a:hover{color:var(--txt)} .foot-bot{ position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px; padding:24px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--txt-4); } .foot-bot .fb-links{display:flex;flex-wrap:wrap;gap:22px} .foot-bot a:hover{color:var(--txt-2)} .foot-disc{position:relative;z-index:1;padding:0 0 24px;font-size:12px;line-height:1.75;color:var(--txt-4);max-width:900px} /* ---------- 17. AI 咨询块 ---------- */ .ai-fab{ position:fixed;right:26px;bottom:26px;z-index:80; width:54px;height:54px;border-radius:var(--r);border:1px solid rgba(108,155,240,.4); cursor:pointer;display:grid;place-items:center; background:var(--blue); box-shadow:0 10px 26px -10px rgba(0,0,0,.7); transition:background .22s ease; } .ai-fab:hover{background:var(--blue-dk)} .ai-fab img{width:28px;height:28px;object-fit:contain} .ai-fab::after{ content:"";position:absolute;inset:-6px;border-radius:var(--r-lg); border:1px solid rgba(108,155,240,.28);opacity:0;transition:opacity .22s ease; } .ai-panel{ position:fixed;right:26px;bottom:96px;z-index:81; width:372px;max-width:calc(100vw - 40px);max-height:min(640px,78vh); display:none;flex-direction:column;overflow:hidden; border-radius:var(--r-md);background:rgba(14,16,21,.98); border:1px solid var(--line-2); backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px); box-shadow:0 40px 90px -30px rgba(0,0,0,.95); } .ai-panel.open{display:flex} .ai-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)} .ai-head img{width:34px;height:34px;object-fit:contain;border-radius:9px;background:rgba(47,111,228,.14);padding:4px} .ai-head .an{font-size:14.5px;font-weight:600} .ai-head .as{font-size:11.5px;color:var(--txt-3);display:flex;align-items:center;gap:6px} .ai-head .as::before{content:"";width:6px;height:6px;border-radius:50%;background:#12B76A} .ai-close{margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);background:transparent; color:var(--txt-2);cursor:pointer;display:grid;place-items:center;font-size:15px;line-height:1} .ai-close:hover{background:var(--glass);color:var(--txt)} .ai-body{padding:20px;overflow-y:auto;display:grid;gap:14px} .ai-msg{font-size:13.5px;line-height:1.72;color:var(--txt-2);padding:13px 15px;border-radius:12px; background:var(--glass);border:1px solid var(--glass-brd)} .ai-msg .am-t{font-size:12px;color:var(--txt-3);margin-bottom:6px;font-family:var(--mono)} .ai-qs{display:grid;gap:8px} .ai-qs button{ text-align:left;padding:11px 14px;border-radius:var(--r-sm);cursor:pointer;font-size:13.5px; background:rgba(47,111,228,.07);border:1px solid rgba(108,155,240,.2);color:var(--txt-2); transition:all .2s ease; } .ai-qs button:hover{background:rgba(47,111,228,.14);border-color:rgba(108,155,240,.4);color:var(--txt)} .ai-foot{padding:16px 20px;border-top:1px solid var(--line);display:flex;gap:10px} .ai-foot .btn{flex:1;height:42px;font-size:13.5px} .ai-disc{font-size:11.5px;line-height:1.6;color:var(--txt-4);padding:0 20px 16px} /* ---------- 18. 灯箱 ---------- */ .lb{ position:fixed;inset:0;z-index:120;display:none; background:rgba(3,6,12,.94);backdrop-filter:blur(10px); align-items:center;justify-content:center;padding:40px; } .lb.open{display:flex} .lb figure{margin:0;max-width:min(1400px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:14px} .lb img{max-width:100%;max-height:78vh;width:auto;margin:0 auto;border-radius:var(--r);border:1px solid var(--line-2)} .lb figcaption{text-align:center;font-size:13.5px;color:var(--txt-2)} .lb-x,.lb-p,.lb-n{ position:absolute;width:46px;height:46px;border-radius:var(--r-sm);cursor:pointer; background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--txt); display:grid;place-items:center;font-size:19px;backdrop-filter:blur(10px); } .lb-x:hover,.lb-p:hover,.lb-n:hover{background:rgba(255,255,255,.12);border-color:var(--line-3)} .lb-x{top:26px;right:26px} .lb-p{left:26px;top:50%;transform:translateY(-50%)} .lb-n{right:26px;top:50%;transform:translateY(-50%)} /* ---------- 18b. 弹层（AI 免责声明等） ---------- */ .modal{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:32px; background:rgba(3,6,12,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .modal.open{display:flex} .modal-backdrop{position:absolute;inset:0} .modal-box{position:relative;width:min(640px,94vw);max-height:86vh;overflow:auto;background:var(--panel); border:1px solid var(--line-2);border-radius:var(--r);padding:36px 38px;box-shadow:0 30px 80px rgba(0,0,0,.5); animation:modalIn .26s ease;margin:0} @keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .modal-box h3{font-size:20px;line-height:1.4;margin-bottom:14px} .modal-box p{font-size:14px;line-height:1.85;color:var(--txt-2);margin:0 0 14px} .modal-box p:last-child{margin-bottom:0} .modal-box .ml-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:var(--r-sm); background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--txt);cursor:pointer;font-size:18px; display:grid;place-items:center;transition:background .18s ease} .modal-box .ml-close:hover{background:rgba(255,255,255,.12)} .modal-box .ml-note{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm); background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:12.5px;color:var(--txt-3);line-height:1.7} /* ---------- 19. 导航 ---------- */ /* 由通栏改为「居中内嵌悬浮条」：条自身窄于视口，浮在内容之上。 构图取自 Command Bar / Animated Top Dock（品牌左 · Dock 中 · 动作右）， 但只借它的版式与「就近吸附」机制 —— 那个组件的 retro / glass 变体依赖 WebGL shader 与 Three.js，与本站零依赖静态站的定位不符，不引入。 悬浮感来自「条明显窄于视口 + 圆角 + 描边 + 底部投影」，不来自发光。 */ .nav{ --dock-pad:20px;--dock-gap:24px; position:fixed;top:14px;left:50%;z-index:90; width:min(1720px,calc(100vw - var(--dock-gap)*2)); transform:translateX(-50%); border-radius:18px; /* 高透玻璃：底色只留 .28，靠 backdrop-filter 承担全部隔断职责。 模糊开到 34px 是关键 —— 透明度要靠"背后内容被彻底化开"来兑现， 而不是靠加深底色（那样只是半透明塑料片，不是玻璃）。 */ background:rgba(10,11,15,.28); backdrop-filter:blur(34px) saturate(210%) brightness(1.22); -webkit-backdrop-filter:blur(34px) saturate(210%) brightness(1.22); border:1px solid rgba(255,255,255,.10); box-shadow:0 20px 52px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07); transition:top .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1), opacity .22s ease,background .34s ease,border-radius .34s ease, border-color .34s ease,box-shadow .34s ease; } /* 玻璃质感的三层光学：顶部内亮线 + 条下沿折射亮边 + 左右边缘羽化。 这三层是 backdrop-filter 本身给不了的，靠伪元素补。 */ .nav::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background: linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 46%), linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,0) 12%,rgba(255,255,255,0) 88%,rgba(255,255,255,.05)); mix-blend-mode:screen; } .nav::after{ content:"";position:absolute;left:10%;right:10%;bottom:-1px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); } /* 向下滚动 → 整条向上滑出视口并淡出；向上滚动 → 立刻回到原位。 pointer-events:none 保证隐藏期间不挡住内容点击。 位移量给足（-100% 再减 28px），确保圆角和投影完全离开画面， 不会在视口顶部留下一条"细边"。 */ .nav.is-hidden{ transform:translateX(-50%) translateY(calc(-100% - 28px)); opacity:0;pointer-events:none; } /* 滚动后：玻璃反而更透（.28→.20），因为此时背景内容在快速移动， 需要更强的模糊来抵消运动带来的干扰，否则文字会晃眼。 */ .nav.scrolled{ top:9px;border-radius:14px; background:rgba(9,10,13,.20); backdrop-filter:blur(40px) saturate(220%) brightness(1.18); -webkit-backdrop-filter:blur(40px) saturate(220%) brightness(1.18); border-color:rgba(255,255,255,.13); box-shadow:0 26px 64px -28px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.06); } /* 页首（未滚动）时条内元素保持清晰，滚动后略微提亮，补偿背景变暗 */ .nav .nav-item > a,.nav .nav-login,.nav .btn{transition:color .3s ease,background .3s ease} /* 条内不再受 .wrap 的 1440 宽度上限与 32px 内边距约束。 必须带上 .wrap--wide 才压得住 .wrap--wide{max-width:1440px}——它的 特异性 (0,2,0) 高于 .nav > .wrap 的 (0,1,1)。 */ .nav > .wrap.wrap--wide{max-width:none;padding:0} /* 三列栅格。两边用等宽 1fr，Dock 才会严格居中于整条， 而不是「在剩余空间里居中」—— 后者会随品牌与动作区的宽度差偏移。 */ .nav-inner{ display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr); align-items:center;gap:22px;height:66px;padding:0 var(--dock-pad); position:relative;z-index:1; /* 抬到 .nav::before 高光层之上 */ } .brand{display:flex;align-items:center;gap:11px;flex:none;justify-self:start} .brand img{width:34px;height:34px;border-radius:var(--r-sm);transition:width .3s ease,height .3s ease} .nav.scrolled .brand img{width:30px;height:30px} .brand .bn{display:flex;flex-direction:column;line-height:1.15} .brand .b1{font-size:15.5px;font-weight:700;letter-spacing:.01em;color:var(--txt)} .brand .b2{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;color:var(--txt-3);text-transform:uppercase} .menu{display:flex;align-items:center;gap:2px;justify-self:center} .nav-item{position:relative} /* 40px 高胶囊（与 .btn--sm 同高，视觉基线对齐）。 原来是 70px 满高、靠底部 2px 蓝线标选中 —— 那是通栏时代的做法： 条有底边，文字可以倚靠。悬浮条里没有底边可倚，改胶囊。 */ .nav-item > a{ display:flex;align-items:center;gap:6px;height:40px;padding:0 13px;white-space:nowrap; border-radius:11px;border:1px solid transparent; font-size:14px;font-weight:500;color:var(--txt-2); transform-origin:50% 50%; transition:color .22s ease,background .22s ease,border-color .22s ease; } .nav-item > a:hover{color:var(--txt);background:rgba(255,255,255,.045)} .nav-item.active > a{ color:var(--txt); background:rgba(47,123,246,.13); border-color:rgba(108,155,240,.22); } .nav-item > a .cv{width:13px;height:13px;transition:transform .25s ease;opacity:.65} .nav-item:hover > a .cv{transform:rotate(180deg)} .drop{ position:absolute;top:calc(100% + 14px);left:0;min-width:290px; padding:10px;border-radius:var(--r); background:rgba(16,18,24,.98);border:1px solid var(--line-2); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); box-shadow:0 34px 70px -28px rgba(0,0,0,.95); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s ease,transform .22s ease,visibility .22s; } /* 透明桥：补上「菜单项 → 下拉面板」之间的那段空隙。 ⚠️ 这条死区是悬浮条改版带出来的副作用 —— 通栏时代 .nav-item 是 70px 满高、 面板 top:100% 正好贴着条底边，零空隙；改成 40px 胶囊后为拉开视觉间距加了 30px 偏移，于是空隙里谁也命不中：指针一离开胶囊，.nav-item:hover 立刻失效， 面板在 220ms 淡出里就消失了 —— 表现为「鼠标移过去就没了，点不到」。 ::before 属于 .drop，指针落在桥上时 :hover 仍会向上传到 .nav-item，面板保持展开。 桥宽取面板全宽：指针斜向移动时，在空隙带里的位置可能已横向偏离胶囊很远了。 桥高 24px > 偏移 14px，留出冗余 —— 快速移动时一帧能跳过 20px 以上。 ⚠️ 必须 position:absolute：.drop--wide/.drop--grp 是 display:grid， 静态定位的 ::before 会成为一个 grid item 顶掉第一格，把链接排错位。 */ .drop::before{ content:"";position:absolute;left:0;right:0;top:-24px;height:24px; } .nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)} .drop a{display:block;padding:11px 14px;border-radius:var(--r-xs);transition:background .18s ease} .drop a:hover{background:rgba(255,255,255,.05)} /* ⚠️ .dt / .dd 必须显式 block：它们是 ，默认 inline。 窄面板（290px）时描述会自然折行掩盖这个问题，但分组面板有 648px， 标题与描述会并排挤在一行上。 */ .drop a .dt{display:block;font-size:14px;font-weight:600;color:var(--txt)} .drop a .dd{display:block;font-size:12px;color:var(--txt-3);margin-top:3px;line-height:1.55} .drop--wide{min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:2px} .drop--right{left:auto;right:0;min-width:300px} /* 分组下拉（栏目合并后用）：两列 + 小标题。 合并后子项从 5 涨到 8，平铺会变成「八行无结构列表」——分组比等分网格好扫读。 小标题不用等宽大写：这里是中文，等宽字距会把「订阅与交付」拆得难认。 */ .drop--grp{min-width:648px;gap:16px;padding:14px} .drop--grp .dc{min-width:0} .drop--grp .dc + .dc{padding-left:16px;border-left:1px solid var(--line)} .drop--grp h6{ margin:0 0 4px;padding:0 14px; font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--txt-4); } .nav-act .nav-item > a{padding:0 10px} .nav-act{ position:relative;display:flex;align-items:center;gap:12px; justify-self:end;flex:none; } /* 与 Dock 之间的分组发丝线。 只靠 22px 间距时，菜单末项「关于我们」会和「登录/注册」粘成一片； 一根竖线比继续加宽间距更省空间，也更接近工程语汇里的「分区」。 ⚠️ 必须绝对定位：否则 ::before 会成为 flex item 占掉一格。 */ .nav-act::before{ content:"";position:absolute;left:-12px;top:50%;width:1px;height:20px; margin-top:-10px;background:var(--line-2); } .icon-btn{ width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center; background:transparent;border:1px solid var(--line);color:var(--txt-2);cursor:pointer; transition:all .2s ease; } .icon-btn:hover{background:rgba(255,255,255,.05);color:var(--txt);border-color:var(--line-3)} .icon-btn svg{width:17px;height:17px} .nav-sep{width:1px;height:22px;background:var(--line)} .nav-login{font-size:14.5px;font-weight:500;color:var(--txt-2);white-space:nowrap} .nav-login:hover{color:var(--txt)} .burger{display:none} /* 抽屉打开时汉堡变 ✕。 抽屉是覆盖层，条上的汉堡是唯一的手动关闭入口；形态不同步，用户就 不知道还能点它。两条线从 scaleX(0) 张开，与全站其它动效同一套缓动。 绝对定位是必须的 —— 否则 ::before/::after 会成为 grid item 占掉格子。 */ .burger{position:relative} .burger::before,.burger::after{ content:"";position:absolute;left:50%;top:50%;width:15px;height:1.6px;border-radius:1px; background:currentColor;transform:translate(-50%,-50%) rotate(45deg) scaleX(0); transition:transform .26s cubic-bezier(.22,1,.36,1); } .burger::after{transform:translate(-50%,-50%) rotate(-45deg) scaleX(0)} .burger svg{transition:opacity .2s ease} .burger[aria-expanded="true"] svg{opacity:0} .burger[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg) scaleX(1)} .burger[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg) scaleX(1)} /* 指针游标：一根贴在条底内沿的细线，跟随指针横向平移。 存在的理由 —— 就近吸附只对「指针附近的项」产生反馈，指针落在 两项之间时吸附量趋近 0，屏幕上什么也不动。游标补上这段连续反馈， 同时明确回答「指针此刻在 Dock 的哪一段」。 */ .dock-cursor{ position:absolute;left:0;bottom:5px;width:2px;height:12px;border-radius:1px; background:linear-gradient(180deg,transparent,rgba(108,155,240,.8)); opacity:0;pointer-events:none; transition:opacity .3s ease; will-change:transform; } .nav.dock-live .dock-cursor{opacity:1} /* 移动抽屉 */ /* z-index 必须低于悬浮条(90)。 抽屉唯一的手动关闭入口就是条上的汉堡按钮——抽屉若盖住条，用户打开后 只能靠点里面某个链接跳走才能关掉（原为 95 > 90，属既存缺陷）。 padding-top 让内容从条下方展开，视觉上是「面板从条底下推出来」。 */ .drawer{ position:fixed;inset:0;z-index:85;display:none; background:rgba(9,10,13,.99);backdrop-filter:blur(20px); padding:104px 26px 40px;overflow-y:auto; } .drawer.open{display:block} .drawer .dg{margin-bottom:26px} .drawer .dg h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--txt-4);margin-bottom:12px;font-weight:600} .drawer .dg a{display:block;padding:12px 0;font-size:16px;color:var(--txt-2);border-bottom:1px solid var(--line)} .drawer .dg a:hover{color:var(--blue-lt)} .drawer .dact{display:grid;gap:12px;margin-top:32px} /* ---------- 20. 杂项 ---------- */ .note{ padding:18px 20px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.76; background:rgba(47,111,228,.06);border:1px solid rgba(108,155,240,.2);border-left-width:2px;border-left-color:var(--blue); color:var(--txt-2); } .note--warn{background:rgba(217,83,79,.07);border-color:rgba(217,83,79,.24);border-left-color:var(--warn);color:#E8A5A3} .light .note{background:#F0F4FD;border-color:rgba(47,111,228,.18);border-left-color:var(--blue);color:var(--ink-2)} .placeholder-note{ display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600; padding:4px 9px;border-radius:var(--r-xs);letter-spacing:.02em; background:rgba(217,83,79,.1);border:1px solid rgba(217,83,79,.26);color:#E58A87; } .light .placeholder-note{background:#FEF2F2;border-color:#FBD5D5;color:#B4262A} .qr{width:132px;height:132px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);border:1px solid var(--line); display:grid;place-items:center;color:var(--txt-3);font-size:12px;text-align:center;line-height:1.6;padding:12px} .qr.has-img{padding:8px;background:#fff;color:var(--ink)} .qr.has-img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:calc(var(--r-sm) - 5px)} .foot-qr{display:flex;flex-direction:column;gap:10px;margin-top:22px} .foot-qr .qr{box-shadow:0 8px 26px rgba(0,0,0,.35)} .foot-qr p{font-size:12.5px;color:var(--txt-3);margin:0;line-height:1.5} .foot-qr .tiny{display:block;color:var(--txt-5);font-size:11px;margin-top:3px} .ai-disc-link{color:var(--blue-lt);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .ai-disc-link:hover{color:var(--txt)} .map-ph{ height:280px;border-radius:var(--r-sm);border:1px solid var(--line);overflow:hidden;position:relative; background: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px), var(--panel); background-size:44px 44px,44px 44px,100% 100%; display:grid;place-items:center; } .map-ph .mp{text-align:center;font-size:13.5px;color:var(--txt-3);line-height:1.8} .map-ph .mp b{display:block;font-size:15px;color:var(--txt);margin-bottom:6px} .progress{height:3px;background:rgba(255,255,255,.09);overflow:hidden} .progress i{display:block;height:100%;background:var(--blue)} .timeline{display:grid;gap:0} .timeline > div{display:grid;grid-template-columns:96px 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--line);position:relative} .timeline > div:first-child{border-top:1px solid var(--line)} .timeline .ty{font-family:var(--mono);font-size:13px;color:var(--blue-lt);letter-spacing:.04em;padding-top:3px} .timeline h4{margin-bottom:8px} .timeline p{font-size:14px;line-height:1.74;color:var(--txt-2);margin:0} .light .timeline > div{border-color:var(--paper-line)} .light .timeline .ty{color:var(--blue-dk)} .light .timeline p{color:var(--ink-2)} .logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .logos span{ display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--r-xs); background:transparent;border:1px solid var(--line); font-size:13.5px;font-weight:600;color:var(--txt-2); } .light .logos span{background:#fff;border-color:var(--paper-line);color:var(--ink-2)} /* ---------- 21. 动效 ---------- */ /* 编辑体入场：位移更短、时长更快，靠紧密编排而非大位移制造节奏 */ .reveal{opacity:0;transform:translateY(16px)} .no-js .reveal,.revealed .reveal{opacity:1;transform:none} .js-on .reveal{transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)} .js-on .reveal.revealed{opacity:1;transform:none} /* --------------------------------------------------------------- 21b. 呼吸层 — 「活着的仪表」而非「在动的装饰」 原则（依 bx-motion-design / 建议书 §6）： · 时长落在 2.6–8s 的「呼吸区间」，远慢于交互反馈，不抢注意力 · 只动 transform / opacity / 自定义属性，不触发布局重排 · 持续循环动效只给「有信息含义」的元素：实时状态、数据刻度、环境光 · 全部登记在 prefers-reduced-motion 降级清单里 --------------------------------------------------------------- */ /* ① 环境光 —— 【已移除自发呼吸】 原实现是 11s 无限循环的 opacity+scale 呼吸。它不承载任何信息： 既不代表状态变化，也不由用户动作引起，只是「页面自己在动」。 这正是循环装饰动效的典型形态，已整段删除。 现在 .orb 只保留静态冷光，位移交给 initAmbient() 按指针驱动。 */ /* ② 状态点 —— 【已移除脉动】指示灯保持常亮静态。 呼吸脉动会让「在线」这个静态事实看起来像在实时变化，属于编造状态。 */ /* ②b AI 悬浮球信标 —— 【改为悬停才出现】 常驻脉冲环等于一个永远在喊「看这里」的元素，而它只是一个客服入口。 现在只在指针靠近时才给出静态描边，反馈由用户动作触发。 */ .ai-fab::after{ content:"";position:absolute;inset:-6px;border-radius:var(--r-lg); border:1px solid rgba(108,155,240,.28); opacity:0;transition:opacity .22s ease; } .ai-fab:hover::after{opacity:1} /* ③ 数据刻度 —— 【已移除扫光】 原实现在 KPI 进度条上挂一条 7.2s 无限横移的高光，注释称「暗示数据仍在采集」。 这些数字是静态成果值，不是实时采集流 —— 动效在暗示一个不存在的事实。整段删除。 */ /* ④ 首屏网格 —— 【已移除「对齐扫描」】底纹保持静止。 静态的工程网格本身就是可读的语汇，不需要靠位移证明它在工作。 */ /* ⑤ 产品截图 —— 【已移除待机呼吸】截图是静态图，就该静止。 */ /* ⑥ 编号索引 —— 【已移除亮度呼吸】 编号是「第几项」的标识，恒定可读即可。原实现让它在 .42–.72 之间反复明灭， 最淡的一刻低于可读阈值，属于用动效制造问题再自己解释。 */ /* ⑦ 案例大数字 —— 【已移除脉动】数字由 initNumbers() 做一次滚动到位，之后静止。 */ /* ⑧ 聚焦环 —— 【改为静态】键盘聚焦需要的是「现在焦点在这里」， 不是一圈持续扩散的光环。静态实心环同样醒目，且不制造视觉噪音。 */ .btn--primary:focus-visible{box-shadow:0 0 0 3px rgba(47,111,228,.30)} /* ⑨ 链接下划线的「待触」预热 —— 仅指针设备，悬停前不动 */ @media (hover:hover){ .prod-row .pr-arrow{animation:none} .prod-row:hover .pr-arrow{transition:transform .19s cubic-bezier(.16,1,.3,1); transform:translate3d(4px,0,0)} } /* ⑩ 强制降级：所有循环呼吸动效在 reduce 下彻底停止（不只是加速） */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal{opacity:1!important;transform:none!important} .hero-veil,.ai-fab::after,.ai-head .as::before, .card--idx .idx,.case-item.ci-live .ci-num,.prod-shot img,.btn--primary:focus-visible{ animation:none!important;transform:none!important;opacity:1!important; } /* .orb 不进上面那条：它的常态 opacity 是 .13，被 !important 拉到 1 会变成一块实心蓝斑。降级时保持原透明度，只去掉位移即可 （transform 由 JS 驱动，REDUCE 下 initAmbient 根本不启动）。 */ .orb{animation:none!important;transform:none!important} .kpi .bar i::after{display:none} .prod-shot img{will-change:auto} } /* ⑪ 小屏降幅：建议书 §6「移动端降低复杂效果」 —— 屏幕小、距离近，同样的位移幅度会被放大成「抖」。 这一块原本调的是各循环动效的时长，但那些循环动效已全部删除 （详见 21b 节），留着就是一堆指向不存在动画的死声明。 现在改调真正还在生效的量：入场位移幅度与视差深度。 注意 .fx-fade / [data-depth] 定义在 26 节的 @media (prefers-reduced-motion:no-preference) 里， 所以降幅声明必须写在该节之后才能压住，见文末 26.7 节。 */ /* ⑫ 省电模式：116 个 blur(120px) 图层是全站最贵的一笔 GPU 开销。 省电时直接不画，而不是「画得慢一点」——少画永远比慢画省电。 */ @media (prefers-reduced-data:reduce){ .orb{display:none} } /* ---------- 22. 响应式 ---------- */ /* 低于 1280 收起主导航，改用抽屉。 上一版是 1440，理由是「8 项菜单 803px + 动作区 279px 挤不下」。栏目合并后 菜单降到 553px（实测 1440），省下 250px，下半档因此整体下移： 1280 视口实测「品牌 116 + 菜单 553 + 动作区 266 + 两条 18px 间隙」= 971px， 悬浮条可用 1220px —— 余量 249px，比合并前 1440 那档还宽。 故本档直接取 PRD §11 的最小适配 1280 作下限：只有真的更窄才走抽屉。 */ @media (max-width:1279px){ .nav{--dock-pad:10px;--dock-gap:12px} /* ⚠️ 这里必须写 .nav-act .nav-item(0,2,0)，不能写 .nav-login(0,1,0)： 登录链接是 .nav-item > a，那条 display:flex 的特异性是 (0,1,1)， 普通类名压不过它，登录项会照常显示出来。隐藏外层的 .nav-item 顺带把它的下拉面板也一起收掉。 */ .menu,.nav-act .nav-item,.nav-sep,.nav-act::before{display:none} .burger{display:grid} .nav-act{gap:10px} /* ⚠️ 菜单 display:none 之后就不再是 grid item —— 动作区会顶替它掉进 中间的 auto 列，整个右侧动作跑到条中央、右边空出一大片（实测 473px）。 这里把栅格降为两列，动作区重新落回最右。 */ .nav-inner{grid-template-columns:minmax(0,1fr) auto;gap:14px} } @media (max-width:1500px){ /* 合并后菜单只有 6 项，这一档不再是「挤不下」的补救，只是让 1440 附近的字距更松。实测 1440 下剩余横向空间 146px（合并前 21px）。 */ .nav{--dock-pad:14px;--dock-gap:16px} .brand .b2{display:none} .nav-inner{gap:18px} .nav-item > a{padding:0 10px;font-size:13.4px} .nav-act{gap:9px} } @media (min-width:1680px){ .brand .b2{display:flex} } /* 「免费试用」只在 ≥1440 出现。 合并前门槛是 1680 —— 那时动作区每收窄 90px，Dock 才能向几何中心多靠 45px。 合并后菜单省下 250px，1440 实测「品牌 116 + 菜单 553 + 动作区 384（含免费 试用）+ 间隙 36」= 1089px，可用 1380px，放得下。PRD §5.1 要求的右侧固定 CTA 四件套因此从 1680 提前到 1440 就能凑齐。 */ @media (max-width:1439px){ .nav-act .btn--ghost{display:none} } @media (max-width:1180px){ :root{--pad-sec:88px} .g5,.g6{grid-template-columns:repeat(3,1fr)} .plans{grid-template-columns:repeat(2,1fr)} .band{grid-template-columns:repeat(2,1fr)} .flow--8{grid-template-columns:repeat(4,1fr)} .foot-top{grid-template-columns:1.4fr 1fr 1fr;gap:38px} .hero-inner{padding-top:118px;padding-bottom:84px} .hero-grid{gap:44px} } @media (max-width:1000px){ .hero-grid{grid-template-columns:1fr;gap:44px} .hero-stack{margin-left:0;max-width:none} .hero-inner{padding-top:104px;padding-bottom:72px} .hero-bg img{object-position:center 30%} .split,.split--wide,.split--narrow{grid-template-columns:1fr;gap:40px} .g4{grid-template-columns:repeat(2,1fr)} .flow--5,.flow--6{grid-template-columns:repeat(3,1fr)} .mosaic,.mosaic--6{grid-template-columns:repeat(3,1fr)} .estimator{grid-template-columns:1fr;gap:28px} .est-out{position:static} .portal-lay{grid-template-columns:1fr;gap:24px} .portal-nav{position:static} .sec-head--row{flex-direction:column;align-items:flex-start;gap:24px} .dl > div{grid-template-columns:1fr;gap:8px} } @media (max-width:760px){ :root{--pad-sec:66px;--gap:18px} .nav-act{gap:8px} .nav-act .btn--ghost{display:none} .nav-act .btn--sm{height:36px;padding:0 15px;font-size:13.5px} .nav-inner{gap:14px} .brand img{width:30px;height:30px} .brand .b1{font-size:14.5px} .wrap{padding:0 22px} .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr} .plans{grid-template-columns:1fr} .pstrip{grid-template-columns:1fr;gap:14px} .pstrip figure{height:210px} .mosaic,.mosaic--3,.mosaic--6{grid-template-columns:repeat(2,1fr);gap:12px} .band{grid-template-columns:1fr 1fr} .flow--4,.flow--5,.flow--6,.flow--8{grid-template-columns:repeat(2,1fr)} .form-row{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr 1fr;gap:32px} .foot-brand{grid-column:1/-1;max-width:none} .timeline > div{grid-template-columns:1fr;gap:10px} .hero-inner{padding-top:96px;padding-bottom:60px} .hero h1{font-size:clamp(28px,7.6vw,38px)} /* 三 CTA 在窄屏：主按钮独占一行，两个次级并排。 原 `flex:1` 让 .btn--text（无边框文字链）也撑成满宽方块，行节奏被打乱。 */ .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px} .hero-cta .btn{min-width:0;width:100%} .hero-cta .btn--primary{grid-column:1/-1} .hero-cta .btn--text{height:48px;justify-content:center;border:1px solid var(--line-2)} /* AI 咨询用虚线边，和实边的「免费试用」区分开——它唤起浮层，不是跳转页 */ .hero-cta .btn--text{border-style:dashed;border-color:rgba(108,155,240,.42);color:var(--blue-lt)} /* 全屏舞台在窄屏：网格底图收窄、右栏索引改为折叠在正文下方， 并放宽最小高度——手机上 100vh 会被地址栏吃掉一截，用 svh 兜底。 */ .phead{min-height:auto;padding:0} .phead > .wrap{grid-template-columns:1fr;gap:34px;padding-top:126px;padding-bottom:96px} .ph-side{max-width:none} .phead--solo > .wrap{padding-bottom:104px} .ph-bg img{height:124%;object-position:64% 50%} .ph-bg::after{ background: linear-gradient(180deg, rgba(8,9,12,.86) 0%, rgba(8,9,12,.62) 34%, rgba(8,9,12,.74) 62%, rgba(8,9,12,.93) 88%, var(--abyss) 100%); } .ph-num{font-size:min(46vw,240px);bottom:-4%} .ph-crop{display:none} .ph-foot-in{padding-top:13px;padding-bottom:14px} .ph-cue i{height:20px} .ai-panel{right:14px;left:14px;bottom:84px;width:auto;max-width:none} .ai-fab{right:16px;bottom:16px;width:50px;height:50px} .lb{padding:16px} .lb-p{left:10px}.lb-n{right:10px} .foot-bot{flex-direction:column;gap:14px} } @media (max-width:430px){ .icon-btn{width:34px;height:34px} .brand .b2{display:none} .nav-act .btn--sm{padding:0 13px;font-size:13px} .hero-cta{grid-template-columns:1fr} .hero-cta .btn--primary{grid-column:auto} } /* 轻提示（原型交互反馈） */ .toast{ position:fixed;left:50%;bottom:34px;transform:translate(-50%,16px); max-width:min(460px,calc(100vw - 40px)); padding:13px 20px;border-radius:var(--r-sm); background:rgba(18,20,26,.98);border:1px solid var(--line-2); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:0 24px 60px -24px rgba(0,0,0,.95); color:var(--txt);font-size:14px;line-height:1.6;text-align:center; opacity:0;visibility:hidden;transition:opacity .28s ease,transform .28s ease,visibility .28s; z-index:220; } .toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)} /* ===================================================================== 23. 全站滚动动效层（2026-10-10） 目标：让「动」成为全站每一页的默认状态，而不是只有首页才有。 纪律（依建议书 §六「动效用于解释业务关系」/ §十「高级感不依赖特效」）： · 动效必须解释结构：读到哪一节、页面前进了多少、影像比文字更远还是更近 · 禁：无意义粒子、持续闪烁、大面积扫描线、动画布局属性、bounce 缓动 · 只动 transform / opacity；滚动取值一律走 rAF 合并，不在 scroll 里读布局 · 全部登记在 §23c 降级清单 ===================================================================== */ /* ---------- 23a. 阅读进度发丝线 ---------- 一条 2px 的顶部线，长度 = 已读比例。它是全站唯一「永远在动」的全局元素， 作用是回答「这一页还有多长」——这是解释性动效，不是装饰。 */ .scroll-bar{ position:fixed;left:0;top:0;height:2px;width:100%;z-index:130; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--blue-dk),var(--blue-lt)); pointer-events:none;will-change:transform; } .light .scroll-bar{background:linear-gradient(90deg,var(--blue-dk),var(--blue))} /* ---------- 23b. 区块标题的「起笔线」---------- .sec-head 上方原来直接就是大标题，进入视口时只有整块淡入； 加一条从左侧画出的发丝线，让「新的一节开始」这件事有起势。 排除 --row（它是 flex，::before 会变成 flex item 破坏两端对齐）。 */ .sec-head:not(.sec-head--row)::before{ content:"";display:block;width:54px;height:1px;background:var(--line-3); margin-bottom:22px;transform:scaleX(0);transform-origin:0 50%; transition:transform .92s cubic-bezier(.22,.61,.36,1); } .sec-head--center:not(.sec-head--row)::before{margin-left:auto;margin-right:auto} .sec-head.is-in:not(.sec-head--row)::before{transform:scaleX(1)} .light .sec-head:not(.sec-head--row)::before{background:var(--paper-line)} /* ---------- 23c. 降级与省电（新动效一并登记） ---------- */ @media (prefers-reduced-motion:reduce){ .scroll-bar{display:none} .ph-cue i::after{animation:none!important;opacity:.5;top:10px} .ph-bg img,.ph-blue i{transform:none!important;will-change:auto} .sec-head:not(.sec-head--row)::before{transform:scaleX(1)!important} .ph-idx a::before{transition:none} } @media (max-width:760px){ /* 小屏把视差幅度交给 JS 自行收敛（见 site.js PARALLAX_AMP）， 这里只把纯装饰的刻度尺收紧，避免视觉噪声。 */ .ph-ruler{opacity:.4} } /* ---------- 24. 多维筛选器 → 工程分节标签行 ---------- 原来是「一排排等宽胶囊按钮 + 蓝色实底选中态」， 这是通用 SaaS 后台的默认长相，也是子页面「一眼 AI」的主要来源之一。 改为「仪表分节」：左侧等宽维度名 + 发丝分隔 + 右侧下划线式标签， 选中态只亮一条下线与字色，不再整块填蓝。 */ .filters--group{display:grid;gap:0;margin-bottom:26px} .filters--group > div{ display:flex;flex-wrap:wrap;align-items:center;gap:2px 2px; padding:9px 0;border-bottom:1px solid var(--line); } .filters--group > div:first-child{border-top:1px solid var(--line)} .filters--group .fk{ flex:0 0 108px;min-width:0;padding:0;margin-right:10px; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--txt-4); } .filters--group button{ height:30px;padding:0 14px;border:0;border-radius:0;background:none; position:relative;font-size:13.5px;font-weight:500;color:var(--txt-3); transition:color .2s ease; } .filters--group button::after{ content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px; background:var(--blue-lt);transform:scaleX(0);transform-origin:0 50%; transition:transform .34s cubic-bezier(.22,.61,.36,1); } .filters--group button:hover{color:var(--txt);border:0} .filters--group button:hover::after{transform:scaleX(.34)} .filters--group button[aria-pressed="true"]{ background:none;border:0;color:var(--txt);font-weight:600; } .filters--group button[aria-pressed="true"]::after{transform:scaleX(1)} .light .filters--group{border-color:var(--paper-line)} .light .filters--group > div{border-color:var(--paper-line)} .light .filters--group button{background:none;border:0;color:var(--ink-3)} .light .filters--group button[aria-pressed="true"]{background:none;border:0;color:var(--ink)} .light .filters--group .fk{color:var(--ink-3)} .filter-hint{margin:0 0 34px} /* ---------- 25. 全屏舞台的中间断点 ---------- 1100–1280 之间两栏开始挤，索引列收窄字号而不是整块隐藏 （索引是这一版页头的核心装置，能留就留）。 */ @media (max-width:1180px){ .phead > .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.58fr);gap:44px} .ph-idx span{font-size:13.5px} .phead-meta{gap:8px 20px} } @media (max-width:980px){ .phead > .wrap{grid-template-columns:1fr;gap:34px;padding-top:146px;padding-bottom:110px} .phead h1,.phead .lead{max-width:760px} .ph-side{max-width:620px} } /* ============================================================ §25 开屏动画（仅首页 index.html） ------------------------------------------------------------ 2026-10-11 重做：上一版被用户评为「模糊很丑」。根因是两个 AI 味陷阱： ① radial-gradient 的 mask-image 把工程网格中心柔化成一片糊； ② logo 上的 drop-shadow(…蓝色) 把整标识变成发光贴纸。 新版走「精密仪器归零」路线：全锐角、无柔光、无发光、无装饰性模糊。 元素：工程网格 → 中心十字准线 → 四角基准标 → 取景框 → 品牌标识 → 校准光束扫掠 → 底线落定 → 向上揭开。 ⚠️ 骨架（定位 / 底色 / 兜底自动揭开）内联在 index.html 的 ， 原因见那边的注释。这里只放动画细节。 ⚠️ 内联兜底的 delay 是 2.9s，必须晚于 site.js 的 MAX_MS(2.4s)。 否则 JS 加 .is-done 时兜底动画已经启动，那条 animation:none 会把 clip-path 弹回全屏再收一次 —— 画面上就是「揭开 → 突然全开 → 再收」。 改时间点必须两边一起改。 ============================================================ */ .sp-grid{ position:absolute;inset:0; background-image: linear-gradient(rgba(127,160,220,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(127,160,220,.04) 1px,transparent 1px); background-size:48px 48px; /* 旧版 radial-gradient mask-image 是「模糊」感的最大来源，已删。 工业网格就该是等距、清晰的，不需要靠中心柔光来收边。 */ opacity:0; animation:sp-grid .5s cubic-bezier(.16,1,.3,1) forwards; } @keyframes sp-grid{from{opacity:0}to{opacity:1}} /* 中心十字准线：像精密仪器归零。从中心向两端生长，一秒建立「校准」语感。 */ .sp-reticle{ position:absolute;left:50%;top:50%; background:rgba(108,155,240,.45); transform:translate(-50%,-50%) scale(0); animation:sp-reticle .34s cubic-bezier(.16,1,.3,1) .12s forwards; } .sp-reticle--h{width:90px;height:1px;transform-origin:50% 50%} .sp-reticle--v{width:1px;height:90px;transform-origin:50% 50%;animation-delay:.22s} @keyframes sp-reticle{to{transform:translate(-50%,-50%) scale(1)}} /* 四角基准标：从角点向外「印」出，不是缩放弹出。 每条边只保留靠近角点的两条，配合 clip-path 从角点向对角生长。 */ .sp-crop{ position:absolute;width:18px;height:18px;border:0; opacity:0; animation:.38s cubic-bezier(.16,1,.3,1) forwards; } .sp-crop--tl{top:34px;left:34px;border-top:1px solid rgba(127,160,220,.55);border-left:1px solid rgba(127,160,220,.55);animation-name:sp-crop-tl;animation-delay:.05s} .sp-crop--tr{top:34px;right:34px;border-top:1px solid rgba(127,160,220,.55);border-right:1px solid rgba(127,160,220,.55);animation-name:sp-crop-tr;animation-delay:.12s} .sp-crop--bl{bottom:34px;left:34px;border-bottom:1px solid rgba(127,160,220,.55);border-left:1px solid rgba(127,160,220,.55);animation-name:sp-crop-bl;animation-delay:.19s} .sp-crop--br{bottom:34px;right:34px;border-bottom:1px solid rgba(127,160,220,.55);border-right:1px solid rgba(127,160,220,.55);animation-name:sp-crop-br;animation-delay:.26s} @keyframes sp-crop-tl{from{clip-path:inset(0 100% 100% 0);opacity:0}to{clip-path:inset(0);opacity:1}} @keyframes sp-crop-tr{from{clip-path:inset(0 0 100% 100%);opacity:0}to{clip-path:inset(0);opacity:1}} @keyframes sp-crop-bl{from{clip-path:inset(100% 100% 0 0);opacity:0}to{clip-path:inset(0);opacity:1}} @keyframes sp-crop-br{from{clip-path:inset(100% 0 0 100%);opacity:0}to{clip-path:inset(0);opacity:1}} .sp-inner{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:38px; transition:transform .62s cubic-bezier(.65,0,.35,1),opacity .52s ease; } .sp-core{ position:relative;display:grid;place-items:center;width:min(42vw,380px); padding:22px; } /* 极细取景框：围绕 logo 的四条边依次亮起 */ .sp-core::before{ content:"";position:absolute;inset:0; border:1px solid rgba(108,155,240,.22); clip-path:inset(0 100% 100% 0); animation:sp-frame .6s cubic-bezier(.16,1,.3,1) .34s forwards; } @keyframes sp-frame{ 0% {clip-path:inset(0 100% 100% 0)} 50% {clip-path:inset(0 0 100% 0)} 100%{clip-path:inset(0 0 0 0)} } /* 品牌标识：干净、锐利。删除 drop-shadow 蓝光晕（那是 AI 味的主要来源）， 改用极轻微的上移完成「落定」。 */ .sp-lockup{ display:block;width:100%;height:auto; opacity:0;transform:translateY(16px); /* 保持边缘清晰，避免浏览器在透明 PNG 缩放动画中过度柔化 */ image-rendering:-webkit-optimize-contrast; backface-visibility:hidden; animation:sp-lock .72s cubic-bezier(.16,1,.3,1) .4s forwards; } @keyframes sp-lock{to{opacity:1;transform:translateY(0)}} /* 横向扫掠：一条极细的校准光束自上而下扫过一次，作为「成像完成」的落款。 颜色用品牌点蓝，不再用 cyan，避免和周围冷光混在一起糊成一片。 */ .sp-sweep{ position:absolute;left:50%;top:50%;width:110%;height:1px;margin:-.5px 0 0 -55%; background:linear-gradient(90deg,transparent,rgba(47,111,228,.9),transparent); opacity:0; animation:sp-sweep .55s cubic-bezier(.4,0,.2,1) .92s forwards; } @keyframes sp-sweep{ 0%{opacity:0;transform:translateY(-46px) scaleX(.45)} 18%{opacity:1} 82%{opacity:1} 100%{opacity:0;transform:translateY(46px) scaleX(1)} } .sp-rule{ width:180px;height:1px; background:rgba(127,160,220,.45); transform:scaleX(0); animation:sp-rule .5s cubic-bezier(.16,1,.3,1) 1.18s forwards; } @keyframes sp-rule{to{transform:scaleX(1)}} /* 揭开：遮罩向上收起，内容同步淡出，不做二次位移（上次上移会让 logo 显得飘）。 animation:none 取消内联兜底动画，避免重复收起。 */ #splash.is-done{ animation:none; clip-path:inset(0 0 100% 0); transition:clip-path .62s cubic-bezier(.65,0,.35,1); } #splash.is-done .sp-inner{opacity:0} @media (max-width:640px){ .sp-core{width:min(72vw,300px);padding:16px} .sp-rule{width:140px} .sp-reticle--h{width:64px} .sp-reticle--v{height:64px} } @media print{ .nav,.ai-fab,.ai-panel,.foot::before,.orb{display:none!important} body{background:#fff;color:#000} .scroll-bar{display:none} } /* ============================================================ §26 动效与鼠标灵动层（motion.js 驱动） ------------------------------------------------------------ 为什么单独一节：站内既有的 reveal / stag 是「一次性入场」， 而这一层负责的是「持续关系」——指针在哪、元素朝哪偏、 卡片被照亮的位置、滚动进度走到哪。它们共用同一组令牌， 不新增第二套配色与圆角。 铁律（与 impeccable 动效规范一致，违反即视为 bug）： · 时长 100 / 300 / 500 三档，不出现第四档 · 缓动只用 ease-out-quart / ease-out-expo，禁用弹跳与回弹 · 只动 transform 与 opacity；高度类用 grid-rows 或 clip-path · 入场 500-800ms，离场取入场 75% · prefers-reduced-motion 下全部降级为静态，本节不写例外 ============================================================ */ @media (prefers-reduced-motion:no-preference){ :root{ --dur-1:120ms; /* 即时反馈：按下、勾选 */ --dur-2:280ms; /* 状态变化：悬停、展开 */ --dur-3:520ms; /* 入场：区块、卡片 */ --e-quart:cubic-bezier(.25,1,.5,1); --e-expo:cubic-bezier(.16,1,.3,1); } /* ---------- 26.1 自定义指针 ---------- */ /* 两层：内点即时跟随，外环带阻尼迟滞。迟滞是「灵动」的全部来源， 线性跟随反而会显得死板且廉价。 */ .fx-cursor,.fx-cursor-ring{ position:fixed;top:0;left:0;pointer-events:none;z-index:205; border-radius:999px;will-change:transform;opacity:0; transition:opacity var(--dur-2) var(--e-quart); } .fx-cursor{ width:6px;height:6px;margin:-3px 0 0 -3px; background:var(--blue-lt);mix-blend-mode:difference; } .fx-cursor-ring{ width:34px;height:34px;margin:-17px 0 0 -17px; border:1px solid var(--line-2); transition:opacity var(--dur-2) var(--e-quart), width var(--dur-2) var(--e-quart), height var(--dur-2) var(--e-quart), margin var(--dur-2) var(--e-quart), background-color var(--dur-2) var(--e-quart), border-color var(--dur-2) var(--e-quart); } /* 悬停可交互元素：环变实心蓝、点隐藏，形成「点击热点」的直觉 */ .fx-cur-hover .fx-cursor-ring{ width:52px;height:52px;margin:-26px 0 0 -26px; background:var(--blue-soft);border-color:var(--blue); } .fx-cur-hover .fx-cursor{opacity:0} /* 带标签的悬停（如「拖动」「查看」）：环更大、显示等宽标签 */ .fx-cur-label .fx-cursor-ring{ width:74px;height:74px;margin:-37px 0 0 -37px; background:var(--blue);border-color:transparent; } .fx-cur-label .fx-cursor-ring::after{ content:attr(data-label); position:absolute;inset:0;display:grid;place-items:center; font:500 11px/1 var(--mono);letter-spacing:.08em;color:#fff; white-space:nowrap; } /* 按下：环收缩，给出「按实了」的物理感（100-120ms 反馈档） */ .fx-cur-down .fx-cursor-ring{width:40px;height:40px;margin:-20px 0 0 -20px} body.fx-on,body.fx-on *{cursor:none !important} /* ---------- 26.2 磁性元素 ---------- */ /* 元素朝指针偏移一点再回弹。幅度刻意小：0.28 就够，多了就廉价。 */ [data-mag]{will-change:transform} [data-mag].fx-mag-active{transition:transform var(--dur-1) var(--e-quart)} /* ---------- 26.3 卡片聚光 ---------- */ /* 高光位置由 JS 写入 --mx/--my，径向渐变只改 background 位置， 不触发重排。一处光照，整张卡被点亮，层次立刻起来。 */ .fx-spot{position:relative;isolation:isolate} .fx-spot::before{ content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(47,111,228,.16),transparent 62%); opacity:0;transition:opacity var(--dur-2) var(--e-quart); } .fx-spot:hover::before{opacity:1} /* ---------- 26.4 滚动进度 + 反向高亮 ---------- */ .fx-progress{ position:fixed;top:0;left:0;right:0;height:2px;z-index:206; background:linear-gradient(90deg,var(--blue),var(--blue-lt)); transform:scaleX(0);transform-origin:0 50%;opacity:0; transition:opacity var(--dur-2) var(--e-quart); } body.fx-on .fx-progress{opacity:.9} /* ---------- 26.5 遮罩揭示（clip-path 只走复合属性） ---------- */ .fx-mask{clip-path:inset(0 0 100% 0);will-change:clip-path} .fx-mask.is-in{clip-path:inset(0 0 0 0); transition:clip-path 720ms var(--e-expo)} /* 入场揭示带一道极轻的 blur 交叉溶解：从「虚」到「实」比单纯位移更接近 光学上的聚焦，观感更贵气。blur 上限 6px —— 再大就会在读的瞬间糊掉内容。 */ .fx-fade{opacity:0;transform:translateY(26px);filter:blur(6px)} .fx-fade.is-in{opacity:1;transform:none;filter:blur(0); transition:opacity 520ms var(--e-quart) var(--fx-d,0ms), transform 520ms var(--e-quart) var(--fx-d,0ms), filter 520ms var(--e-quart) var(--fx-d,0ms)} /* 逐字揭示：整词换行问题由 JS 按词处理，字母级只用于短标题 */ .fx-word{display:inline-block;overflow:hidden;vertical-align:top} .fx-word>span{display:inline-block;transform:translateY(105%); transition:transform 620ms var(--e-expo)} .fx-word.is-in>span{transform:none} /* ---------- 26.5b 跨页溶解（View Transitions） ---------- 43 个页面的静态站，换页原本是「白闪一下」，锚点感被切断。 这里给它一次交叉溶解：旧页轻微下沉淡出，新页从微虚中落定。 它承载的是真实状态（页面确实在切换），不是装饰循环动画。 「进慢出快」：出场 220ms 让路，入场 340ms 从容落定。 不支持的浏览器整段忽略，退化成原来的直接跳转。 */ @view-transition{navigation:auto} ::view-transition-old(root){animation:vt-out 220ms cubic-bezier(.4,0,1,1) both} ::view-transition-new(root){animation:vt-in 340ms cubic-bezier(.16,1,.3,1) both} @keyframes vt-out{ to{opacity:0;transform:translate3d(0,-10px,0) scale(.994)} } /* 入场只给 6px 模糊：整页快照的 blur 很贵，再大就拖慢换页手感 */ @keyframes vt-in{ from{opacity:0;filter:blur(6px);transform:translate3d(0,8px,0)} to {opacity:1;filter:blur(0);transform:none} } /* ---------- 26.6 数据长廊（无缝滚动） ---------- */ .fx-marquee{ position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .fx-marquee-track{display:flex;gap:0;width:max-content;will-change:transform} .fx-marquee:hover .fx-marquee-track{ animation-play-state:paused; /* 悬停停住是可用性，不是偷懒 */ } .fx-marquee-track>*{flex-shrink:0} /* ---------- 26.7 行内横扫（列表项悬停，扫线语汇） ---------- */ .fx-sweep{position:relative;overflow:hidden} .fx-sweep::after{ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,var(--blue-soft),transparent 72%); transform:translateX(-101%); transition:transform 460ms var(--e-expo); } .fx-sweep:hover::after{transform:none} /* ---------- 26.8 数字墙 ---------- */ .fx-num{font-family:var(--mono);font-variant-numeric:tabular-nums; transition:color var(--dur-2) var(--e-quart)} .fx-num-row:hover .fx-num{color:var(--blue-lt)} /* ---------- 26.9 视差层 ---------- */ .fx-par{will-change:transform} /* ---------- 26.10 强调环（悬停时从中心扩散的描边） ---------- */ .fx-ring{position:relative} .fx-ring::before{ content:'';position:absolute;inset:-1px;border-radius:inherit; border:1px solid var(--blue);opacity:0; transform:scale(.985); transition:opacity var(--dur-2) var(--e-quart), transform 420ms var(--e-expo); } .fx-ring:hover::before{opacity:1;transform:none} } /* 降级：不只是「关掉」，而是换成不产生位移的等价表现 */ @media (prefers-reduced-motion:reduce){ .fx-cursor,.fx-cursor-ring,.fx-progress{display:none !important} body.fx-on,body.fx-on *{cursor:auto !important} .fx-fade{opacity:1 !important;transform:none !important;filter:none !important} .fx-mask{clip-path:none !important} .fx-word>span{transform:none !important} .fx-marquee-track{transform:none !important} /* 换页也一样：不做溶解，直接跳，避免整页位移与模糊 */ ::view-transition-old(root),::view-transition-new(root){animation:none !important} } /* ---------- 26.7 小屏降幅（见 21b 节 ⑪ 的说明） ---------- */ @media (max-width:760px) and (prefers-reduced-motion:no-preference){ .fx-fade{transform:translateY(14px)} } /* 触屏/无精确指针：磁性、聚光、自定义指针一律不启用 */ @media (hover:none),(pointer:coarse){ .fx-cursor,.fx-cursor-ring,.fx-progress{display:none !important} body.fx-on,body.fx-on *{cursor:auto !important} } /* 键盘可达性：焦点环必须比指针更醒目 */ .fx-ring:focus-visible,.fx-spot:focus-visible{ outline:2px solid var(--blue);outline-offset:3px } /* ============================================================ §27 首页新增板块（实景长廊 / 智能体矩阵 / 数据网络画布） —— 与 §26 同源：只用既有令牌，不引入新色相与新圆角 ============================================================ */ /* ---------- 27.1 Hero 数据网络画布 ---------- 指针附近的节点会被点亮并与邻近节点连线：既有工业感， 又和鼠标产生了真实关系（不是循环播放的装饰动画）。 */ .fx-net{ position:absolute;inset:0;width:100%;height:100%; z-index:1;pointer-events:none;opacity:.55; transition:opacity var(--dur-2) var(--e-quart); } .hero-bg .fx-net+.hero-veil{z-index:2} @media (prefers-reduced-motion:reduce){.fx-net{display:none}} /* ---------- 27.2 实景长廊 ---------- 每张卡固定宽度，靠轨道位移实现无缝。悬停停表由 §26 负责。 */ .fx-marquee .fx-shot{ width:clamp(320px,30vw,460px);flex-shrink:0;margin-right:20px; transition:transform 420ms var(--e-expo); } .fx-marquee .fx-shot:hover{transform:translateY(-4px)} .fx-marquee .shot-bar{ display:flex;align-items:center;gap:6px;padding:10px 14px; font:400 12px/1 var(--mono);color:var(--txt-3); border-bottom:1px solid var(--line); } .fx-marquee .shot-bar i{ width:7px;height:7px;border-radius:2px;background:var(--line-2); } .fx-marquee .shot-bar i:first-child{background:var(--blue)} .fx-marquee .shot-bar span{margin-left:8px} .fx-marquee img{ display:block;width:100%;height:250px;object-fit:cover; border-radius:0 0 var(--r) var(--r); } .fx-marquee .shot{ border:1px solid var(--line);border-radius:var(--r); background:var(--deep);overflow:hidden; } /* ---------- 27.3 智能体矩阵 ---------- 数字在左、说明在右：扫读时先读到量级，再读到解释。 */ .fx-agent{ position:relative;padding:26px 22px 22px; border:1px solid var(--paper-line);border-radius:var(--r); background:var(--paper); transition:transform 420ms var(--e-quart), box-shadow 420ms var(--e-quart), border-color 280ms var(--e-quart); } .fx-agent:hover{ transform:translateY(-4px); box-shadow:var(--sh-lift); border-color:rgba(47,111,228,.42); } .fx-agent-i{ display:inline-grid;place-items:center; width:38px;height:38px;border-radius:var(--r-sm); background:var(--ink);color:var(--paper); font:600 16px/1 var(--sans);margin-bottom:14px; transition:background 280ms var(--e-quart),transform 420ms var(--e-expo); } .fx-agent:hover .fx-agent-i{background:var(--blue);transform:translateY(-2px)} .fx-agent h3{font-size:16px;margin-bottom:8px} .fx-agent p{font-size:13.5px;color:var(--ink-3);line-height:1.75;min-height:72px} .fx-agent-m{ display:flex;align-items:baseline;gap:8px; margin-top:16px;padding-top:14px;border-top:1px solid var(--paper-line); } .fx-agent-m .fx-num{ font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.01em; } .fx-agent:hover .fx-agent-m .fx-num{color:var(--blue)} .fx-agent-m small{font-size:12px;color:var(--ink-3)} .fx-agent .fx-spot::before{z-index:0} .fx-agent>*{position:relative;z-index:1} /* ---------- 27.4 版式辅助类（自检要求类名必须落地） ---------- */ /* 智能体矩阵：悬停时整列微微联动，静止时保持安静 */ .fx-matrix{gap:var(--gap)} @media (prefers-reduced-motion:no-preference){ .fx-matrix .fx-agent{transition:transform 420ms var(--e-quart), box-shadow 420ms var(--e-quart),border-color 280ms var(--e-quart)} } /* Hero 右侧指标组：错峰淡入的挂载点（时间轴由 site.js 主导， 这里只保证不与之争抢 transform） */ .fx-stagger{position:relative;z-index:1} /* =================================================================== 27. 「进慢出快」—— 双向同速是模板手感最大的破绽 ------------------------------------------------------------------- 悬停进入（enter）给 260–300ms 的减速曲线，让它从容落定； 移出（exit）压到 130–160ms 快速让路，不拖泥带水。 依据 transitions.dev 的时长铁律：退场必须比入场快 —— 退场元素已经完成了它的任务，用户的注意力已经离开， 让它慢慢消失等于强行把注意力拽回来。 实现要点：写在基础规则上的 transition 同时管进出两个方向， 所以「快」给基础规则、「慢」给 :hover 规则。:hover 特异性更高， 只在指针进入那一刻生效；移出时自动回落到基础规则的快速档。 这里只改 duration / timing-function，不碰 transition-property —— 各变体自己的属性清单（玻璃按钮还有 box-shadow 与 transform） 必须原样保留，重设 shorthand 会把它们悄悄抹掉。 =================================================================== */ .btn{transition-duration:.14s} .btn:hover,.btn:focus-visible{transition-duration:.28s;transition-timing-function:var(--e-expo)} .btn--glass,.btn--glass-arrow{transition-duration:.16s} .btn--glass:hover,.btn--glass-arrow:hover, .btn--glass:focus-visible,.btn--glass-arrow:focus-visible{ transition-duration:.30s;transition-timing-function:var(--e-expo)} /* 文字按钮的 gap 原本没进属性清单，悬停时箭头是「跳」出去的 */ .btn--text{transition-property:background,border-color,color,gap;transition-duration:.16s} .btn--text:hover{transition-duration:.28s;transition-timing-function:var(--e-expo)} /* 顺手修一个既有缺陷：.nav .nav-item > a 的 transition 清单只有 color 与 background（特异性 (0,2,1) 压住了下面 (0,1,1) 那条）， 导致 .nav-item.active > a 的 border-color 是硬切、没有过渡。 这里补上 border-color 并一并应用进慢出快。 */ .nav .nav-item > a,.nav .nav-login,.nav .btn{ transition-property:color,background,border-color; transition-duration:.13s;transition-timing-function:ease; } .nav .nav-item > a:hover,.nav .nav-login:hover,.nav .btn:hover{ transition-duration:.24s;transition-timing-function:var(--e-quart); } @media (prefers-reduced-motion:reduce){ .btn,.btn:hover,.btn:focus-visible, .nav .nav-item > a,.nav .nav-item > a:hover{transition-duration:.01ms} }