/* ========================================================================== 归浦AI 官网 V6.4 · 视觉重构层（gp11） -------------------------------------------------------------------------- 针对四组反馈的整体重做： ① 大蓝块太丑 —— 高饱和蓝铺底全部退场 ② 平板菜单消失 —— 见 gp10-shell.css（断点 1024 → 767） ③ 静态感 —— 入场 + 呼吸 + 视差 + 磁吸 + 指针光晕 ④ 图标太抽象 —— 换成真实大模型家族的几何标识 新的视觉主张（对齐 dropship.io / Lucian Farmer 的克制美学）： · 大区块不再用品牌蓝铺底，改用「极淡中性底 + 深色收尾」制造节奏 · 品牌蓝收回到小面积：主按钮、链接、图标、强调词 —— 稀缺才高级 · 深色收尾块用近黑蓝（与页脚同色系），让整站首尾呼应 排在 gp10-page.css 之后加载，同特异性后置覆盖。 ========================================================================== */ /* ========================================================================== 00 · 导航：PC 与平板都在「顶部居中」显示功能菜单 -------------------------------------------------------------------------- 问题：一级菜单在 1024px 及以下被收进汉堡，iPad 横屏（1024）与竖屏（768） 全都没有顶部功能菜单，与「功能显示在顶部居中」的诉求相反。 根因：v5.css 里有两条遗留规则比 gp10-shell.css 更晚生效 / 带 !important—— · v5.css:1406 @media (max-width:1024px) { .nav-menu{display:none} } · v5.css:2824 @media (max-width:1240px) { body .nav .nav-menu{display:none!important} body .nav .burger{display:flex!important} } 后者特异性为 (0,2,1) 且带 !important，必须在这里用更高特异性 (0,3,2) + !important 才能覆盖。 策略：≥768px 一律展开顶栏菜单并隐藏汉堡；768~1023px 走紧凑档压缩尺寸， 保证 9 项菜单仍完整落在顶栏内、居中排列。 ========================================================================== */ @media (min-width:768px){ html:not(.dark7) body .nav .nav-menu{display:flex !important} html:not(.dark7) body .nav .burger{display:none !important} } /* 768~1023px：紧凑档（iPad 竖屏 / 小尺寸平板） */ @media (min-width:768px) and (max-width:1023px){ html:not(.dark7) .nav-inner{padding:0 14px;gap:4px;height:64px} html:not(.dark7) .nav .brand img{height:20px} html:not(.dark7) .nav-menu{gap:0;flex:1;min-width:0;justify-content:center} html:not(.dark7) .nav-menu>a, html:not(.dark7) .nav-top{height:34px;padding:0 5px;font-size:12.5px;letter-spacing:-.03em} html:not(.dark7) .nav-menu>a>svg, html:not(.dark7) .nav-top>svg{width:11px;height:11px} html:not(.dark7) .nav-menu div.nav-item{padding:0 5px} html:not(.dark7) .nav-acts{gap:6px} html:not(.dark7) .nav-acts .btn{padding:0 10px;font-size:12.5px;height:34px} html:not(.dark7) .nav-drop-in{grid-template-columns:1fr;gap:8px;width:min(560px,calc(100vw - 28px))} html:not(.dark7) .mm-quick{grid-column:auto;grid-template-columns:1fr 1fr} } /* 768~899px：超紧凑档（iPad 竖屏 / 小平板）—— 实测这里菜单会溢出 19~28px， 靠「缩小品牌 + 收窄内边距 + 降一档字号」把 9 项完整留在顶栏内。 */ @media (min-width:768px) and (max-width:899px){ html:not(.dark7) .nav-inner{padding:0 8px;gap:2px;height:62px} html:not(.dark7) .nav .brand{gap:6px} html:not(.dark7) .nav .brand img{height:18px} html:not(.dark7) .nav-menu>a, html:not(.dark7) .nav-top{height:32px;padding:0 4px;font-size:12px;letter-spacing:-.04em} html:not(.dark7) .nav-menu>a>svg, html:not(.dark7) .nav-top>svg{width:10px;height:10px} html:not(.dark7) .nav-menu div.nav-item{padding:0 4px} html:not(.dark7) .nav-acts{gap:5px} html:not(.dark7) .nav-acts .btn{padding:0 9px;font-size:12px;height:32px} } /* 1024~1240px：中档（iPad 横屏 / iPad Air / iPad Pro 11"） 实测 1024 时 logo(146) + 菜单(622) + 按钮(78) + 间距 在 1024 视口正好溢出， 菜单会把 logo 压住。这里把 logo 收到 20px、间距压到 6px。 */ @media (min-width:1024px) and (max-width:1240px){ html:not(.dark7) .nav-inner{padding:0 14px;gap:6px;height:64px} html:not(.dark7) .nav .brand{min-width:0;overflow:hidden} html:not(.dark7) .nav .brand img{height:20px} html:not(.dark7) .nav-menu{gap:0;justify-content:center} html:not(.dark7) .nav-menu>a, html:not(.dark7) .nav-top{height:36px;padding:0 8px;font-size:13px;letter-spacing:-.02em} html:not(.dark7) .nav-menu div.nav-item{padding:0 8px} html:not(.dark7) .nav-acts{gap:8px} html:not(.dark7) .nav-acts .btn{padding:0 12px;font-size:13px;height:36px} html:not(.dark7) .nav-drop-in{grid-template-columns:250px 240px;gap:10px} html:not(.dark7) .mm-quick{grid-column:1 / -1;grid-template-columns:1fr 1fr} } /* ========================================================================== 01 · 首屏：中央光柱去蓝 原来是 #2B5BE8 的实心蓝光柱，面积大、饱和高，是「太丑」的主因之一。 现在只保留一层几乎看不见的中性光晕，作用是把视线引向下方拱形。 ========================================================================== */ html:not(.dark7) .gp-flow-funnel{ background: radial-gradient(52% 46% at 50% 96%, rgba(15,23,42,.062) 0%, rgba(15,23,42,.030) 34%, rgba(15,23,42,0) 70%) !important; } html:not(.dark7) .gp-flow-funnel::before{ background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.035) 45%, rgba(15,23,42,.085)) !important; filter:blur(30px) !important; } /* 中央品牌图标：保留蓝色，但收小描边、加一点旋转呼吸 */ html:not(.dark7) .gp-flow-core{ animation:gpFloat 6s ease-in-out infinite, gpGlow 4.2s ease-in-out infinite; } @keyframes gpGlow{ 0%,100%{box-shadow: 0 0 0 9px rgba(255,255,255,.72), 0 26px 54px -18px rgba(43,91,232,.55), inset 0 1px 0 rgba(255,255,255,.5)} 50%{box-shadow: 0 0 0 13px rgba(255,255,255,.62), 0 32px 64px -18px rgba(43,91,232,.72), inset 0 1px 0 rgba(255,255,255,.5)} } /* ========================================================================== 02 · 蓝色拱形产品带 → 浅色拱形 + 细网格 拱形轮廓保留（这是参考站的标志性构图），但底色从蓝改为极淡的冷灰， 内部用细网格纹理提供质感 —— 网格不会跟标题抢注意力。 ========================================================================== */ html:not(.dark7) .gp-arch{ background: radial-gradient(46% 46% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,.92) 26%, rgba(255,255,255,0) 62%), linear-gradient(180deg,#F6F8FC 0%, #F1F5FB 44%, #F8FAFE 100%) !important; color:var(--gp-ink) !important; } /* 细网格纹理（替代原来的白色椭圆光带） */ html:not(.dark7) .gp-arch::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-color:transparent; background-image: linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,.05) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(74% 90% at 50% 100%, #000 0%, transparent 76%); mask-image:radial-gradient(74% 90% at 50% 100%, #000 0%, transparent 76%); } /* 拱形上沿的一道细高光，强化立体边缘 */ html:not(.dark7) .gp-arch::after{ content:"";position:absolute;left:7%;right:7%;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(43,91,232,.20),transparent); pointer-events:none;z-index:1; } html:not(.dark7) .gp-arch h2{color:var(--gp-ink) !important} html:not(.dark7) .gp-arch p{color:var(--gp-ink-3) !important} /* ========================================================================== 03 · 工具方块：彩色实心块 → 白玻璃卡 + 品牌色标识 10 个高饱和色块连成一排是廉价感的来源。改成白底 + 品牌色线条标识后， 整排看起来像一排「App 图标」，hover 才填充品牌色。 ========================================================================== */ html:not(.dark7) .gp-tool{ background:#fff !important; border:1px solid var(--gp-line-2) !important; color:var(--bc, var(--gp-brand)) !important; box-shadow: 0 10px 24px -14px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.9) !important; transition: transform .5s var(--gp-spring), box-shadow .3s, background-color .26s, color .26s, border-color .26s !important; } html:not(.dark7) .gp-tool svg{width:50%;height:50%} @media (hover:hover){ html:not(.dark7) .gp-tool:hover{ background:var(--bc, var(--gp-brand)) !important; color:#fff !important; border-color:transparent !important; transform:translateY(-6px) scale(1.06) !important; box-shadow:0 22px 42px -16px rgba(15,23,42,.40) !important; } /* 悬停其中一个时，其余轻微退后，制造景深 */ html:not(.dark7) .gp-tools:hover .gp-tool:not(:hover){ opacity:.62;transform:scale(.95); } } /* 各工具沿用对应大模型家族的品牌特征色 */ html:not(.dark7) .gp-tool[data-c="5"] {--bc:#10A37F} /* OpenAI / ChatGPT */ html:not(.dark7) .gp-tool[data-c="2"] {--bc:#D97757} /* Claude / Anthropic */ html:not(.dark7) .gp-tool[data-c="3"] {--bc:#4285F4} /* Gemini / Google */ html:not(.dark7) .gp-tool[data-c="6"] {--bc:#20B8CD} /* Perplexity */ html:not(.dark7) .gp-tool[data-c="7"] {--bc:#4D6BFE} /* DeepSeek */ html:not(.dark7) .gp-tool[data-c="8"] {--bc:#0064E1} /* Meta / Llama */ html:not(.dark7) .gp-tool[data-c="9"] {--bc:#615CED} /* Qwen / 通义 */ html:not(.dark7) .gp-tool[data-c="10"]{--bc:#0A0E1A} /* Grok / xAI */ html:not(.dark7) .gp-tool[data-c="4"] {--bc:#2E6BE6} /* 文心 ERNIE */ html:not(.dark7) .gp-tool[data-c="1"] {--bc:#00A99D} /* Kimi / Moonshot */ /* 气泡提示：工具变白后，气泡改深色才有对比 */ html:not(.dark7) .gp-tool-tip{ background:var(--gp-ink) !important; color:#fff !important; box-shadow:0 16px 34px -14px rgba(11,16,32,.55) !important; } html:not(.dark7) .gp-tool-tip::after{background:var(--gp-ink) !important} /* 错落的上下位移保留，但幅度收一点，避免像散落的碎片 */ html:not(.dark7) .gp-tool:nth-child(2n){transform:translateY(-4px)} html:not(.dark7) .gp-tool:nth-child(3n){transform:translateY(3px)} /* ========================================================================== 04 · 指标行：四个数字统一 原「17+」的 + 在 外，字号与「8 维 / 8 大 / 30s」不一致。 现在单位统一包进 ，用同一套字号与基线规则。 ========================================================================== */ /* 指标行：一律去掉伪元素与卡片底。 v5 遗留的 .metric::before/::after（顶部彩条、色块）仍在参与布局， 会把第 1 个指标撑到 133px、其余 119px —— 这正是「17+ 跟别的不一样」。 统一归零后四个指标 79.25px 完全等高。 */ html:not(.dark7) .hero-stats .metric::before, html:not(.dark7) .hero-stats .metric::after{ content:none !important;display:none !important; } html:not(.dark7) .hero-stats .metric{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 12px !important; min-width:0; overflow:visible; } /* 四个指标必须像素级一致。 坑：big 若用 inline-flex，内部 span 会被当成 flex item，「17」独占一行、 「+」换到第二行 —— 第一个指标被撑高 14px，数字底部被 overflow:hidden 裁掉。 正解：big 保持 block，内部用 inline 排成一行，单位用 降一档字号做下标感。 */ html:not(.dark7) .hero-stats .metric big{ display:block !important; white-space:nowrap; font-size:clamp(22px,2.4vw,30px); font-weight:700;letter-spacing:-.04em; color:var(--gp-ink) !important; -webkit-text-fill-color:currentColor !important; background:none !important; line-height:1.1; font-variant-numeric:tabular-nums; } html:not(.dark7) .hero-stats .metric big>span{ display:inline !important; font-size:inherit;font-weight:inherit;letter-spacing:inherit; color:inherit;margin:0;line-height:inherit; } html:not(.dark7) .hero-stats .metric big i{ display:inline !important; font-style:normal; font-size:.56em;font-weight:600;letter-spacing:0; color:var(--gp-brand); margin-left:.10em; vertical-align:baseline; } html:not(.dark7) .hero-stats .metric>span{ display:block; font-size:12.5px;color:var(--gp-ink-4); font-weight:500;letter-spacing:0;line-height:1.4; margin-top:6px; } /* ========================================================================== 05 · 首屏副文案：三行逐行淡入 用 --l 变量做「强调行」：最后一行是结论，加深一级颜色与字重。 ========================================================================== */ html:not(.dark7) .hero-sub{ display:flex;flex-direction:column;gap:2px; line-height:1.62; } html:not(.dark7) .hero-sub .hs-l{ display:block; opacity:0;transform:translate3d(0,7px,0); } html:not(.dark7) .hero-sub .hs-l:last-child{ color:var(--gp-ink-2); font-weight:560; } html:not(.dark7) .hero-sub.gp-in .hs-l{ animation:hsLine .58s var(--gp-ease) forwards; } html:not(.dark7) .hero-sub.gp-in .hs-l:nth-child(1){animation-delay:.10s} html:not(.dark7) .hero-sub.gp-in .hs-l:nth-child(2){animation-delay:.26s} html:not(.dark7) .hero-sub.gp-in .hs-l:nth-child(3){animation-delay:.42s} @keyframes hsLine{to{opacity:1;transform:none}} /* ========================================================================== 06 · AI 搜索区：蓝光栅 → 中性淡栅 ========================================================================== */ html:not(.dark7) .gp-search::before{ background: repeating-linear-gradient(90deg, rgba(15,23,42,.032) 0 1px, rgba(15,23,42,0) 1px 54px), radial-gradient(60% 70% at 50% 18%, rgba(15,23,42,.045), transparent 70%) !important; } /* ========================================================================== 07 · 扩展坞托盘：蓝 → 深色玻璃 ========================================================================== */ html:not(.dark7) .gp-ext-art .dock{ background:linear-gradient(180deg,#1C2440 0%,#141B30 46%,#0B1020 100%) !important; box-shadow: 0 -20px 60px -34px rgba(11,16,32,.50), inset 0 1px 0 rgba(255,255,255,.14) !important; } html:not(.dark7) .gp-ext-art .dock::after{ background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 34%) !important; } /* ========================================================================== 08 · 启动 CTA：大蓝块 → 近黑蓝（与页脚同色系，首尾呼应） ========================================================================== */ html:not(.dark7) .gp-ready{ background: radial-gradient(64% 74% at 50% 0%, #1E2748 0%, #151D34 44%, #0B1020 100%) !important; } html:not(.dark7) .gp-ready::before{ background:radial-gradient(50% 100% at 50% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 28%, rgba(255,255,255,0) 68%) !important; } /* CTA 主按钮：白底深色字，在深底上更清楚 */ html:not(.dark7) .gp-ready .gp-btn--white{ background:#fff !important;color:var(--gp-ink) !important; border:1px solid #fff !important; box-shadow:0 16px 34px -14px rgba(0,0,0,.5) !important; } @media (hover:hover){ html:not(.dark7) .gp-ready .gp-btn--white:hover{ background:var(--gp-brand) !important; border-color:var(--gp-brand) !important; color:#fff !important; } } /* ========================================================================== 09 · 动效增强：卡片呼吸 / 视差 / 磁吸 / 指针光晕 ========================================================================== */ /* 指标行数字：进场后轻微弹性。 ⚠ 弹性只能用 opacity（不改 transform）： .metric 上任何 transform 都会让子元素脱离「整行等宽」的 flex 基线， 导致第一个指标被撑高 14px、数字底部被 overflow:hidden 裁掉。 */ html:not(.dark7) .hero-stats.gp-in .metric{ animation:gpFade .55s var(--gp-ease) backwards; } html:not(.dark7) .hero-stats.gp-in .metric:nth-child(1){animation-delay:.30s} html:not(.dark7) .hero-stats.gp-in .metric:nth-child(2){animation-delay:.38s} html:not(.dark7) .hero-stats.gp-in .metric:nth-child(3){animation-delay:.46s} html:not(.dark7) .hero-stats.gp-in .metric:nth-child(4){animation-delay:.54s} @keyframes gpFade{ from{opacity:0} to{opacity:1} } /* 双栏卡插画：整组缓慢呼吸，避免画面死板。 ⚠ 只给 .gp-radar 加，不能给 .gp-tray —— gpFloat 的 translateY(-6px) 会覆盖 .gp-tray 用来水平居中的 translateX(-50%)， 托盘整体右移 190px、沉到插画底部之外。托盘本身的色块各自呼吸就够了。 */ html:not(.dark7) .gp-duo-card .gp-radar{ animation:gpFloat 7s ease-in-out infinite; } html:not(.dark7) .gp-duo-card:nth-child(2) .gp-radar{animation-delay:-2.4s} /* 优势卡插画：hover 时轻微上浮 */ html:not(.dark7) .gp-perk .art svg{ transition:transform .6s var(--gp-spring); } @media (hover:hover){ html:not(.dark7) .gp-perk:hover .art svg{transform:translateY(-5px) scale(1.03)} } /* 视差元素：由 JS 写入 --py，这里只负责应用变换 */ html:not(.dark7) [data-parallax]{ transform:translate3d(0, var(--py, 0px), 0); will-change:transform; } /* 磁吸按钮：由 JS 写入 --mx / --my */ html:not(.dark7) [data-magnetic]{ transform:translate3d(var(--mx, 0px), var(--my, 0px), 0); transition:transform .35s var(--gp-spring); } /* 指针光晕：跟随鼠标的柔和蓝色光斑，给静态区块一点「活气」 */ html:not(.dark7) .gp-spotlight{ position:absolute;width:520px;height:520px;border-radius:50%; left:0;top:0;pointer-events:none;z-index:0; background:radial-gradient(circle, rgba(43,91,232,.10) 0%, rgba(43,91,232,0) 62%); transform:translate3d(var(--sx, -999px), var(--sy, -999px), 0) translate(-50%,-50%); transition:opacity .4s var(--gp-ease); opacity:0; } html:not(.dark7) .gp-spotlight.on{opacity:1} /* ========================================================================== 10 · 长句断行：中文段落一律用 pretty 算法，避免末行只剩两三个字 （CSS 支持时优先，不支持则回退为普通断行，无副作用） ========================================================================== */ html:not(.dark7) .gp-launch p, html:not(.dark7) .gp-track p, html:not(.dark7) .gp-search p, html:not(.dark7) .gp-arch p, html:not(.dark7) .gp-sec--head p, html:not(.dark7) .gp-ext p, html:not(.dark7) .gp-copy p{ text-wrap:pretty; } html:not(.dark7) .gp-launch p{max-width:600px} /* 卡片指针高光：卡片自身跟随鼠标的一层极淡径向渐变 */ html:not(.dark7) .gp-perk, html:not(.dark7) .gp-duo-card, html:not(.dark7) .gp-stage-card, html:not(.dark7) .gp-post{ position:relative; isolation:isolate; } html:not(.dark7) .gp-perk::after, html:not(.dark7) .gp-duo-card::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit; background:radial-gradient(220px 220px at var(--sx,50%) var(--sy,50%), rgba(43,91,232,.055) 0%, rgba(43,91,232,0) 68%); opacity:0;transition:opacity .38s var(--gp-ease); } @media (hover:hover){ html:not(.dark7) .gp-perk:hover::after, html:not(.dark7) .gp-duo-card:hover::after{opacity:1} } /* 降低动效偏好：关掉所有持续动画 */ @media (prefers-reduced-motion: reduce){ html:not(.dark7) .gp-flow-core, html:not(.dark7) .gp-duo-card .gp-tray, html:not(.dark7) .gp-duo-card .gp-radar, html:not(.dark7) .gp-tray .tile, html:not(.dark7) .gp-radar .bub{animation:none !important} html:not(.dark7) [data-parallax]{transform:none !important} } /* ========================================================================== 11 · 语义断行：大标题按「意群」分行，不交给浏览器自动折 ========================================================================== */ html:not(.dark7) .gp-search h2 .gp-h2-l{display:block} @media (min-width:900px){ /* 宽屏时两段仍排成一行，靠 inline 恢复（保留语义分组，方便以后单独调） */ html:not(.dark7) .gp-search h2 .gp-h2-l{display:inline} html:not(.dark7) .gp-search h2 .gp-h2-l+.gp-h2-l{margin-left:.34em} } /* 搜索输入框内的长提示词：手机端允许折行，不被裁 */ @media (max-width:640px){ html:not(.dark7) .gp-askbar input{font-size:13.5px} html:not(.dark7) .gp-search p{font-size:15px;max-width:340px;text-wrap:balance} } /* 追踪区标题同样按意群断行 */ @media (max-width:899px){ html:not(.dark7) .gp-track h2 .gp-h2-l{display:block} html:not(.dark7) .gp-track h2 .gp-h2-l+.gp-h2-l{margin-left:0} } @media (min-width:900px){ html:not(.dark7) .gp-track h2 .gp-h2-l{display:inline} html:not(.dark7) .gp-track h2 .gp-h2-l+.gp-h2-l{margin-left:0} }