/* ========================================================================== 归浦AI 官网 V8 · 视觉语言重构层 -------------------------------------------------------------------------- 定位：加载在 v7.css 之后，是「最后一层」。v7 负责把全站翻成深色， v8 负责把视觉语言从「通用科技蓝 SaaS」推到「编辑级 · 精密仪表」： —— 暖白文字、紫蓝单一强调色、收紧的字距、更大的圆角、 弹簧缓动的一次性入场、以及可被精确打断的悬停微交互。 取用来源：https://lucianlabs.dev/uxui-prompt/ （Lucian UX/UI Prompt） 只取「设计令牌 + 入场动效 + 悬停微交互」三件事， 刻意不取它的常驻循环动画（漂移 / 呼吸 / 跑马灯）—— 因为本站已确立「滑到哪定在哪」的硬约束：停手后画面必须完全静止。 ⚠ 三条不可违反的约束（改动本文件前务必读一遍） 1. 禁止新增任何 infinite 循环动画（除非处于 body.gp-idle 的暂停名单里） 2. 入场动画一律 animation-fill-mode: backwards + 结束后 animation:none —— 用 both 会让浏览器认为元素「仍在运行」，整页永远有东西在动 3. 禁止 backdrop-filter 与大尺寸 filter:blur()（实测各吃掉 8~12fps） ========================================================================== */ /* ========================================================================== 1. 设计令牌 —— 编辑级 · 精密仪表 -------------------------------------------------------------------------- 与原 v7 的差别，逐项说明为什么改： · 文字：v7 用冷白 #F2F4F8，和满屏的蓝色辉光叠在一起发青。 改暖白 #F4F0E8 后，冷蓝辉光有了色温对照，creen 不再"糊成一片蓝"。 · 强调色：v7 只有蓝 #4C8DFF。单一色相缺少层级，所有东西一样重。 引入紫 #B7A4FF 作为"第二强调"，专门标「新 / 高亮 / 指标」， 蓝紫同源（都偏 260°~250° 色相），不会花。 · 薄荷 #7EE8C0：只用于「正向数据」（涨幅、达标、在线）， 和跌绿涨红的股市约定无关，这里是产品指标语义。 · 圆角：v7 用 11/14px，偏"网页"。改 24/18/12 三档后， 大卡片更"物件"，小控件更"像素"，层级一下拉开。 · 缓动：v7 用 cubic-bezier(.34,1.5,.64,1) 直接写在各处。 收敛成两个命名令牌：u-ease（位移/颜色）、u-spring（弹入/缩放）， 全站只准用这两个，避免每条规则各写一套手感。 ========================================================================== */ html.dark7 { /* ---- 表面阶梯（由深到浅）---- */ --u-page:#07080D; --u-surface:#13141C; --u-surface-2:#1A1B25; --u-surface-3:#252632; /* ---- 文字（暖白，四级）---- */ --u-ink:#F4F0E8; --u-ink-2:rgba(244,240,232,.68); --u-ink-3:rgba(244,240,232,.42); /* ---- 线 ---- */ --u-line:rgba(255,255,255,.08); --u-line-2:rgba(255,255,255,.16); /* ---- 强调 ---- */ --u-accent:#B7A4FF; --u-accent-2:#7DB4FF; --u-accent-soft:rgba(183,164,255,.15); --u-mint:#7EE8C0; --u-warn:#FFB26B; /* ---- 渐变（120°，三停靠点，紫→蓝→薄荷）---- */ --u-grad:linear-gradient(120deg,#B7A4FF 0%,#7DB4FF 55%,#A5F2D3 100%); /* ---- 缓动：全站只准用这两个 ---- */ --u-ease:cubic-bezier(.2,.8,.2,1); --u-spring:cubic-bezier(.34,1.45,.64,1); /* ---- 阴影层级（深底靠"提亮 + 描边"塑形，阴影只做极轻的落位感）---- */ --u-shadow-1:0 1px 2px rgba(0,0,0,.45); --u-shadow-2:0 2px 8px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4); --u-shadow-3:0 8px 28px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4); --u-shadow-4:0 18px 56px rgba(0,0,0,.62),0 4px 12px rgba(0,0,0,.45); /* ---- 圆角三档 ---- */ --u-r-lg:24px; /* 大容器 / 产品外壳 */ --u-r-md:18px; /* 卡片 */ --u-r-sm:12px; /* 按钮 / 标签 / 输入 */ /* ---- 字体：拉丁几何无衬线在前，中文回退在后 ---- */ --u-font:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI", "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; } /* ========================================================================== 2. 全站底色与文字：从冷白切到暖白 -------------------------------------------------------------------------- 只重定义 v5/v7 已被引用的变量，全站一次性跟随，不逐条覆盖组件。 ========================================================================== */ html.dark7 { --bg:var(--u-page); --card:var(--u-surface); --soft:var(--u-surface-2); --soft-2:var(--u-surface-3); --ink:var(--u-ink); --body:rgba(244,240,232,.72); --muted:rgba(244,240,232,.5); } /* ========================================================================== 2b. 品牌色重指向 —— 一处改，全站 34 处跟随 -------------------------------------------------------------------------- v7 里有 34 条规则引用 var(--d-brand) / var(--d-brand-lt)， 散布在链接、eyebrow、数据箭头、步骤编号、时间轴等处。 逐条覆盖既容易漏，也会让 v8 越写越长。 正确做法是直接把这两个变量重指向新的强调色： 蓝系（#4C8DFF / #7BAEFF）→ 紫蓝系（#B7A4FF / #CBAEFF）。 保留 v7 的变量名（不删不弃），这样 v8 被整体移除时， 全站会干净地退回原来的蓝色体系。 ========================================================================== */ html.dark7 { --d-brand:#B7A4FF; --d-brand-lt:#CBAEFF; --d-brand-deep:#8B74F0; --d-brand-soft:rgba(183,164,255,.14); --d-glow:rgba(183,164,255,.26); --d-glow-sm:0 0 24px rgba(183,164,255,.18); --d-glow-md:0 0 64px rgba(183,164,255,.22); } /* ========================================================================== 2c. 分类色降噪 —— 五色杂牌 → 单一色阶 -------------------------------------------------------------------------- v7 给分类标签留了五套色：薄荷绿 / 蓝 / 紫 / 橙 / 粉。 单看每张卡都还行，一屏四张卡叠在一起就成了"彩色便利贴墙"， 而且这五色和大标题、辉光、数据条全都不在一个色温上。 改法：全部收进紫蓝色阶，靠"亮度差"而不是"色相差"区分分类。 —— 四张卡仍是"不同"的（因为亮度不同），但整屏只有一种色相， 视线不再被五个色块反复拽走。这是编辑排版里的"色彩经济"原则： 一屏之内，有彩色相数量 ≤ 2。 ========================================================================== */ html.dark7 { --pk-mint:#1A1626; --pk-mint-t:#A9C7FF; /* 冷 → 蓝紫最亮 */ --pk-blue:#1A1626; --pk-blue-t:#C7B6FF; --pk-violet:#1A1626; --pk-violet-t:#B7A4FF; /* 主强调 */ --pk-orange:#1A1626; --pk-orange-t:#9C8FD6; /* 暖 → 紫中调 */ --pk-pink:#1A1626; --pk-pink-t:#8F86C9; /* 最暗 */ } /* ========================================================================== 2d. --brand 重指向 —— 链接 / 当前态 / 小箭头 -------------------------------------------------------------------------- v5.css 还留着一套浅色时代的品牌蓝（--brand:#1B6BF5）， v7 把它改成了 #4C8DFF。v8 里所有 --d-brand 都已转向紫色， 但 .link-arrow / .nav 当前态 / 输入框 focus 仍读 --brand， 所以会出现「标题紫了、链接还是蓝」的割裂。 这里一并重指向，全站色相才真正统一。 ========================================================================== */ html.dark7 { --brand:#B7A4FF; --brand-deep:#9C87F5; } html.dark7 body{ background:var(--u-page); color:var(--u-ink); font-family:var(--u-font); /* 深色大字号下，字距收紧是"精致感"的主要来源；正文不动，只收标题 */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ========================================================================== 3. 标题排版：收紧字距 + 拉高字重对比 -------------------------------------------------------------------------- v7 的标题是 650 字重、-0.022em 字距，整体偏"网页标题"。 这里把大标题改成 800 / -0.045em：大字收紧后，中文字腔更紧、行更整， 和右侧高密度的产品界面截图形成「疏 ↔ 密」的对照。 中文没有字距调整的传统，但 -0.03em 以内仍可读，超过会粘连。 ⚠ 优先级陷阱（踩过）： v7 用的是 `html.dark7 .hero h1.display`（0,2,3）， 本层若写 `html.dark7 .display`（0,1,2）会被压住，颜色根本不生效。 所以这里必须写作 `html.dark7 body .display` 同等级甚至更高的形式， 并把 h1 单独拎出来写全选择器。 ========================================================================== */ html.dark7 body :is(.section-title,.display,.sec-h2,.page-title), html.dark7 body .hero h1.display, html.dark7 body .hero .hero-type{ font-weight:800; letter-spacing:-.038em; line-height:1.1; color:var(--u-ink); text-wrap:balance; } /* 大标题的字重再压一档：中文 800 在 57px 上会显得厚重， 保持 800 的骨架但把第二行调轻，形成「主张 → 收束」的呼吸 */ html.dark7 body .hero .hero-type .ht-l1{ font-weight:800; letter-spacing:-.04em; } html.dark7 body .hero .hero-type .ht-l2{ font-size:.8em; font-weight:400; letter-spacing:-.01em; color:rgba(244,240,232,.78); } html.dark7 body :is(.hero-sub,.section-sub,.sec-sub,.lead){ color:rgba(244,240,232,.66); line-height:1.75; /* 中文正文 1.7~1.8 是舒适区 */ text-wrap:pretty; } /* 强调词 / 标题里的 ：从"整段渐变文字"改成"文字保持暖白 + 底部一道渐变光带" —— 满屏渐变文字是 AI 味最重的套路之一，而且渐变会把文字的 笔画边缘糊掉、对比度也不稳；改成底部光带后强调更强、字更锐。 实现：background-image 只画渐变 + background-size 压到 2px 高、 定位到 100% 底部，再用 background-repeat:no-repeat —— 文字上不再有渐变， 只有笔画底下一条线。这比再加一个伪元素更省节点。 */ html.dark7 .hl-grad, html.dark7 .display em, html.dark7 .page-head h1 em, html.dark7 .page-title em, html.dark7 .section-title em, html.dark7 .sec-h2 em, html.dark7 .big-cta .display em{ background:var(--u-grad); background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%; -webkit-background-clip:border-box; background-clip:border-box; color:var(--u-ink); -webkit-text-fill-color:currentColor; padding-bottom:.08em; /* 关键：渐变文字会强制合成层，加这个避免每帧重算 */ will-change:auto; } /* ========================================================================== 3b. 首屏轮换词「增长」，从"蓝色高亮块"改成"描边胶囊 + 紫字" -------------------------------------------------------------------------- v7 的写法是：linear-gradient 蓝底(#4C8DFF 16~26%) + 浅蓝字 #8FB8FF。 问题：整站最显眼的一个词，底色和字色都是蓝 —— 在满屏蓝辉光里彻底糊掉，而且和旁边暖白的大标题是两套色温。 改成：透明底 + 1px 紫描边 + 紫字。它变成"一枚被圈出来的印章"， 边界清楚、色温统一，也不抢大标题的视觉重量。 —— 描边用 box-shadow 而非 border：border 会改盒模型， 这个元素在标题行内，加 border 会把整行基线顶歪。 ========================================================================== */ html.dark7 .hero-type .bub, html.dark7 .hero-type .bub.violet, html.dark7 .hero-type .bub.blue, html.dark7 .hero-type .bub.green, html.dark7 .hero-type .bub.pink, html.dark7 .hero-type .bub.mint, html.dark7 .hero-type .bub.amber{ background:rgba(183,164,255,.1); color:var(--u-accent); border-radius:.2em; padding:.02em .16em; margin:0 .03em; box-shadow:inset 0 0 0 1px rgba(183,164,255,.42); -webkit-text-fill-color:currentColor; } /* ========================================================================== 4. 卡片语言：描边优先，阴影退后 -------------------------------------------------------------------------- 深色下靠"阴影"区分层级是无效的（黑叠黑）。真正有效的是： 1 表面比底色亮一档 2 1px 亮描边勾出边界 3 顶部一条极淡的高光（模拟受光） 4 悬停时描边提亮 + 轻微上浮 四条一起用，卡片才有"实体感"，否则就是一块深色方块。 ========================================================================== */ html.dark7 :is(.card,.metric,.case-card,.price-card,.svc-card,.lab-card,.eco-card){ background:var(--u-surface); border:1px solid var(--u-line); border-radius:var(--u-r-md); box-shadow:var(--u-shadow-1); transition:border-color .3s var(--u-ease), background-color .3s var(--u-ease), transform .45s var(--u-spring), box-shadow .3s var(--u-ease); } /* 顶部受光高光：用 :before 一条 1px 渐变线，比 inset shadow 更可控 */ html.dark7 :is(.card,.metric,.case-card,.price-card,.svc-card,.lab-card,.eco-card)::before{ content:""; position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 22%, rgba(255,255,255,.14) 78%,transparent); border-radius:inherit inherit 0 0; pointer-events:none; } html.dark7 :is(.card,.metric,.case-card,.price-card,.svc-card,.lab-card,.eco-card){ position:relative; } /* 悬停：只动 border-color 与 transform，两者都走合成层，不触发重排 */ @media (hover:hover){ html.dark7 :is(.card,.metric,.case-card,.price-card,.svc-card,.lab-card,.eco-card):hover{ border-color:var(--u-line-2); background:var(--u-surface-2); transform:translateY(-3px); box-shadow:var(--u-shadow-3); } } /* ========================================================================== 5. 按钮：从"实心色块"改成"描边 + 光晕" -------------------------------------------------------------------------- ⚠ hero 双按钮等宽由 v6 的 grid 保证，本层绝不覆盖 .hero-actions 的 grid-template-columns / width，只改颜色与描边。 ========================================================================== */ html.dark7 .btn{ border-radius:var(--u-r-sm); font-weight:600; letter-spacing:-.005em; transition:background-color .25s var(--u-ease), border-color .25s var(--u-ease), color .25s var(--u-ease), transform .45s var(--u-spring), box-shadow .25s var(--u-ease); } /* 主按钮：保留高对比度实底（深色站里主 CTA 必须是"最亮的一块"）， 但换成暖白底 + 深色字，比蓝色底更贵，也不会和满屏蓝辉光打架。 ⚠ 踩坑记录：只写 `color:#0B0C12` 是不够的。 v7 里 `.ha-txt b` 自带 color（=--ink 浅色），子元素颜色会覆盖父元素， 结果「暖白底 + 浅色字」＝ 字直接消失（实测首屏主按钮文字不可见）。 所以必须让子元素显式继承父色：.btn-primary .ha-txt, .btn-primary .ha-txt b { color: inherit }。 */ html.dark7 body.gp-home .hero-actions .btn-primary, html.dark7 .hero-actions .btn-primary{ background:var(--u-ink)!important; background-image:none!important; border:1px solid var(--u-ink)!important; color:#0B0C12!important; box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06) inset; } html.dark7 .hero-actions .btn-primary :is(.ha-txt,.ha-txt b,.arw){ color:inherit!important; } html.dark7 .hero-actions .btn-primary .arw{ stroke:currentColor; } html.dark7 body.gp-home .hero-actions .btn-primary:hover, html.dark7 .hero-actions .btn-primary:hover{ background:#fff!important; border-color:#fff!important; transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.55),0 0 32px rgba(183,164,255,.28); } /* 次按钮：描边 + 极淡底，和主按钮形成"实 ↔ 虚"对照而不是"黑 ↔ 蓝" */ html.dark7 .hero-actions .btn-line{ background:rgba(244,240,232,.06); color:var(--u-ink); border:1px solid var(--u-line-2); box-shadow:none; } html.dark7 .hero-actions .btn-line:hover{ background:rgba(244,240,232,.1); border-color:rgba(244,240,232,.34); transform:translateY(-2px); } html.dark7 .hero-actions .btn:active{transform:translateY(0) scale(.985)} /* 通用描边按钮 */ html.dark7 :is(.btn-outline,.btn-ghost,.btn-line):not(.hero-actions .btn-line){ background:rgba(244,240,232,.05); border:1px solid var(--u-line-2); color:var(--u-ink); } html.dark7 :is(.btn-outline,.btn-ghost):hover{ background:rgba(244,240,232,.1); border-color:rgba(244,240,232,.3); } /* ========================================================================== 6. 入场动效 —— 一次性，播完即卸 -------------------------------------------------------------------------- 参考站的 g-rise：opacity 0→1 + translateY 28px + scale .975→1。 它之所以"高级"，是因为位移和缩放同时做，视觉上像"从远处飘近并落定"， 而不是单纯的"从下面滑上来"。 ⚠ 为什么用 backwards 而不是 both： both 会在动画结束后继续锁住终态，浏览器把元素视为"仍在运行"， 整页永远有元素在动（实测 180+ 元素长期 running）。 backwards 只锁起始态，结束后元素回到普通样式 —— 真正静止。 ⚠ 为什么 .is-settled 里写 animation:none： 双保险。animation 属性一旦清空，合成层的动画驱动彻底消失。 ========================================================================== */ @keyframes uRise{ from{opacity:0;transform:translate3d(0,28px,0) scale(.975)} to {opacity:1;transform:translate3d(0,0,0) scale(1)} } html.dark7 body.gp-home .reveal.in, html.dark7 body.gp-page .reveal.in{ animation:uRise .7s var(--u-spring) backwards; } /* 结算标记：入场结束后彻底解除动画 */ html.dark7 body.gp-home .reveal.in.is-settled, html.dark7 body.gp-page .reveal.in.is-settled, html.dark7 [data-wave].wv-in .wv-ch.is-settled, html.dark7 .rv-items.rv-in > *.is-settled{ animation:none; opacity:1; transform:none; } /* 入场后的元素绝不能带 will-change —— 每个 will-change 都是一张独立合成层， 166 个元素各占一层会直接把合成器拖死（实测 15.7fps） */ html.dark7 .reveal.in, html.dark7 [data-wave].wv-in .wv-ch, html.dark7 .rv-items.rv-in > *{ will-change:auto; } /* ========================================================================== 7. 滚动定格保障 —— 通配符兜底，不再逐个罗列 -------------------------------------------------------------------------- gp-idle 由 v6.js 在停手 2.4s 后挂到 body 上；gp-hidden 在切后台时挂上。 早期版本是「逐个把动画加进暂停名单」，结果漏掉了首屏背景漂移 （hb-grid/hb-aurora×3）、标题逐字 htBob、等轴测插画 g3dFloat —— 这些 infinite 动画在停手后还在跑，首屏与插画区块永远有 1万+ 像素在变。 逐个数容易漏，所以这里改用通配符： body.gp-idle * → 停手后，全站所有动画一律暂停 body.gp-hidden * → 切后台后，连环境光一起停 ⚠ 为什么用 !important：基础动画规则（animation: ... infinite）隐含 play-state:running，通配符必须压过它。 ⚠ 为什么安全： · 入场动画是一次性的，跑完即 is-settled（animation:none），不受影响； · 停手时仍在跑的入场（极少见）被冻结，再次滚动即恢复 —— 体验无碍； · JS 驱动的轮播 / 卡轨由各自的 idle 判断停（见 v6.js / v5.js）， CSS 暂停管不到 JS，但两者目标一致。 ========================================================================== */ html.dark7 body.gp-idle *{animation-play-state:paused!important} html.dark7 body.gp-hidden *{animation-play-state:paused!important} /* ========================================================================== 8. 减少动效偏好：一律降级为瞬现 ========================================================================== */ @media (prefers-reduced-motion:reduce){ html.dark7 body.gp-home .reveal.in, html.dark7 body.gp-page .reveal.in{ animation:none; opacity:1; transform:none; } html.dark7 *{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }