/* ========================================================================== Jump Up Logistics — 站点样式表（Mercury 版底稿） 版式基底：Mercury 规范（近黑画布、石墨卡片、单一行动色、无阴影、 胶囊控件、72px 节奏、整屏摄影 Hero 垫底） 色彩：Jump Up 品牌五色对位 Onyx Canvas → Near Black #0E0F12 画布 Graphite Card → Ink Navy #0A1B33 卡片（比画布亮一档） Obsidian → #15294B 交互面 Ivory Text → Paper #F4F6F9 正文 Cobalt → Jump Blue #1D5BD8 唯一行动色 （Signal Light #7FA3E8 仅用于深底小标签，属同色相，不构成第二强调色） class 名与 Dock 版保持一致，页面结构无需改动 ========================================================================== */ @font-face{ font-family:"General Sans"; src:local("General Sans Variable"),local("GeneralSans-Variable"); font-weight:200 700; } :root{ /* 表面（三级，靠明度差分层，不用阴影） */ --canvas:#0E0F12; /* Near Black */ --surface:#0A1B33; /* Ink Navy — 卡片 */ --surface-2:#15294B; /* 交互面 */ /* 文字 */ --ink:#F4F6F9; /* Paper — 主文字 */ --ink-2:rgba(244,246,249,.78); --ink-3:rgba(244,246,249,.62); --ink-4:rgba(244,246,249,.52); /* 行动色（全站唯一） */ --blue:#1D5BD8; --blue-hover:#3A72E8; --light:#7FA3E8; /* 深底小标签 */ /* 圆点分类标：Jump Blue 同一色阶的三档，不构成第二强调色 */ --dot-a:#7FA3E8; --dot-b:#4C86F0; --dot-c:#F4F6F9; /* 白底切图托板：两套主题下都必须是浅色，故不随主题翻转 */ --plate:#F4F6F9; /* 表格行悬停：比 --surface-2 轻，两套主题下都看得出 */ --row-hover:rgba(244,246,249,.05); /* 描边 */ --hairline:rgba(244,246,249,.14); --hairline-2:rgba(244,246,249,.38); --mist:rgba(244,246,249,.88); /* ghost 按钮描边 */ /* 兼容旧变量名 */ --navy:#0A1B33; --paper:#F4F6F9; --black:#0E0F12; --wash:#15294B; --on-dark:#F4F6F9; --on-dark-2:rgba(244,246,249,.78); --on-dark-3:rgba(244,246,249,.58); --hairline-dark:rgba(244,246,249,.14); /* 字体 */ --sans:"General Sans","Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* 形状：卡片 12，控件胶囊 32/40，结构件 4 */ --r-card:12px; --r-pill:32px; --r-nav:40px; --r-sm:4px; /* 节奏 */ --gap:72px; --pad-card:32px; --max:1200px; --nav-h:76px; /* 缓动与时长：取自 mercury.com 实测 */ --ease:cubic-bezier(0,0,.2,1); /* 减速：悬停变色、揭示 */ --ease-dec:cubic-bezier(0,0,.2,1); --ease-std:cubic-bezier(.4,0,.2,1); /* 标准：菜单、位移、箭头 */ --ease-nav:cubic-bezier(.2,1,.4,1); /* 导航面板展开 */ --ease-big:cubic-bezier(.65,.05,.36,1); /* 大位移、图片缩放 */ --t-fast:.15s; --t-hover:.3s; --t-media:.4s; --t-slow:.5s; /* 主题明暗过渡（Mercury: transition-theme） */ --ease-theme:cubic-bezier(0,0,.6,1); --t-theme:.5s; /* 液态玻璃（Mercury: blur(20px) + 冷调半透明填充 + 同色描边，无阴影） 色相取自 Signal Light 去饱和，属品牌同色系 */ --glass-fill:rgba(150,168,206,.18); --glass-edge:rgba(206,220,244,.46); --glass-fill-strong:rgba(150,168,206,.26); --glass-blur:blur(20px); --glass-blur-soft:blur(8px); /* 下拉面板材质：blur 不加深背景，面板会压在亮图与浅色分区上， 因此填充必须有不透明度下限，磨砂观感由 blur(28px) 承担 */ --mega-fill:linear-gradient(180deg,rgba(12,22,42,.92),rgba(9,18,36,.90)); --mega-edge:rgba(164,180,214,.26); --mega-sheen:rgba(244,246,249,.10); } /* ========================================================================== 明暗切换：整页画布随滚动渐变（Mercury 的 transition-theme）。 [data-zone] 只是触发标记，本身不画背景；主题令牌挂在 上， 脚本按视口中线所处分区切换，全页元素同步过渡 0.5s，因此没有硬边。 ========================================================================== */ html[data-theme="light"]{ --canvas:#F4F6F9; /* Paper */ --surface:#FFFFFF; --surface-2:#E8EEF9; --ink:#0A1B33; /* Ink Navy */ --ink-2:rgba(10,27,51,.74); --ink-3:rgba(10,27,51,.68); --ink-4:rgba(10,27,51,.62); --hairline:rgba(10,27,51,.11); --hairline-2:rgba(10,27,51,.48); --mist:rgba(10,27,51,.20); --light:#1D5BD8; /* 浅底上标签改用 Jump Blue：Signal Light 对比不足 */ --dot-a:#1D5BD8; --dot-b:#4C86F0; --dot-c:#0A1B33; --row-hover:rgba(10,27,51,.05); --glass-fill:rgba(10,27,51,.05); --glass-edge:rgba(10,27,51,.48); --glass-fill-strong:rgba(10,27,51,.08); --mega-fill:linear-gradient(180deg,rgba(255,255,255,.94),rgba(240,243,248,.92)); --mega-edge:rgba(10,27,51,.12); --mega-sheen:rgba(255,255,255,.6); } /* 分区只是标记，绝不自带底色 —— 有底色就会出现硬边 */ [data-zone]{background:transparent} /* 全页主题过渡：整块画布与其上的面、字、线一起渐变，滚动时看不到分界 */ html,body,section,.card,.card-media,.stat,.step,.feature,.feature .txt,.form,.table-wrap, .docket,.mega,.placeholder,.field input,.field select,.field textarea, h1,h2,h3,h4,p,li,td,th,dt,dd,.eyebrow,.lede,.note,.cap,.dot,.mega-col a,.mega-label, .f-col a,.f-col h5,.f-brand p,.f-legal,.hero .trust{ transition:background-color var(--t-theme) var(--ease-theme), color var(--t-theme) var(--ease-theme), border-color var(--t-theme) var(--ease-theme)} /* 悬停仍要跟手：单独把交互态的背景过渡压回 0.3s */ .card-media:hover,.mega-col a:hover,.btn:hover, table tr:hover td{transition-duration:var(--t-hover)} /* 深色元素在浅色分区内保持深色：就地重建深色上下文 */ html[data-theme="light"] .dark-panel,html[data-theme="light"] .cta{ --surface:#15294B; --surface-2:#1B3358; --ink:#F4F6F9; --ink-2:rgba(244,246,249,.78); --ink-3:rgba(244,246,249,.62); --ink-4:rgba(244,246,249,.52); --hairline:rgba(244,246,249,.14); --light:#7FA3E8; /* 玻璃令牌必须一并重建，否则面板内的 .btn-dark 会拿到浅色主题的 深蓝填充与描边，合成到面板自身的深蓝上等于消失 */ --glass-fill:rgba(150,168,206,.18); --glass-edge:rgba(206,220,244,.46); --glass-fill-strong:rgba(150,168,206,.26); background:#0A1B33; color:var(--ink-2)} html[data-theme="light"] .dark-panel h2,html[data-theme="light"] .dark-panel h3, html[data-theme="light"] .cta h2{color:#F4F6F9} html[data-theme="light"] .docket{background:#0E0F12} /* 条纹占位块的底色写死为深色，文字令牌必须跟着就地重建 */ html[data-theme="light"] .placeholder{--ink-4:rgba(244,246,249,.52)} /* 页脚永远是深色收尾，浅色主题下就地重建深色上下文 */ html[data-theme="light"] footer{--ink:#F4F6F9;--ink-2:rgba(244,246,249,.78);--ink-3:rgba(244,246,249,.62); --ink-4:rgba(244,246,249,.52);--hairline:rgba(244,246,249,.14); --glass-fill:rgba(150,168,206,.18);--glass-edge:rgba(206,220,244,.46); --glass-fill-strong:rgba(150,168,206,.26); background:#0E0F12;color:var(--ink-3)} /* ---------- 液态玻璃 ---------- */ .glass{background:var(--glass-fill);border:1px solid var(--glass-edge); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;background:var(--canvas)} body{background:var(--canvas);color:var(--ink-2);font-family:var(--sans); font-size:16px;line-height:1.5;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--light);outline-offset:3px;border-radius:4px} /* ---------- 布局 ---------- */ /* 固定导航会盖住锚点目标的顶部，锚点偏移统一由样式表控制，页面里不写行内值 */ [id]{scroll-margin-top:calc(var(--nav-h) + 24px)} .wrap{max-width:var(--max);margin:0 auto;padding:0 32px} section{padding:var(--gap) 0} section.tight{padding-top:0} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- 字体：中间字重 480，正字距，宽舒的建筑感 ---------- */ h1,h2,h3,h4{color:var(--ink);font-weight:480;text-wrap:balance} h1{font-size:clamp(38px,5.4vw,65px);line-height:1.1;letter-spacing:.008em} h2{font-size:clamp(28px,3.4vw,42px);line-height:1.15;letter-spacing:.01em} h3{font-size:21px;line-height:1.25;letter-spacing:.015em} h4{font-size:16px;line-height:1.35;letter-spacing:.01em} p+p{margin-top:12px} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--light)} .eyebrow .s{color:var(--ink-3);padding:0 .4em} .lede{font-size:18px;line-height:1.45;color:var(--ink-2);max-width:46ch;font-weight:400} .note{font-size:13px;color:var(--ink-3)} .cap{font-size:13px;color:var(--ink-3);margin-top:10px} .sec-head{max-width:62ch;margin-bottom:40px} .sec-head h2{margin-top:14px} .sec-head .lede{margin-top:16px} /* ---------- 按钮：一律胶囊，行动色只有一个 ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:var(--sans); font-size:16px;font-weight:400;line-height:1;padding:15px 24px;border-radius:var(--r-pill); transition:background var(--t-hover) var(--ease-dec),border-color var(--t-hover) var(--ease-dec),color var(--t-hover) var(--ease-dec)} .btn-fill{background:var(--blue);color:#fff} .btn-fill:hover{background:var(--blue-hover)} .btn-ghost{background:var(--glass-fill);color:var(--ink);border:1px solid var(--glass-edge); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)} .btn-ghost:hover{background:var(--glass-fill-strong)} .btn-dark{background:var(--glass-fill-strong);color:var(--ink);border:1px solid var(--glass-edge); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)} .btn-dark:hover{background:rgba(150,168,206,.34)} .btn-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center} /* ---------- 导航：浮在 Hero 上，滚动后磨砂 ---------- */ header.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:0} /* 条形磨砂层：必须放在伪元素上。若把 backdrop-filter 放在 header 本身， header 会成为 backdrop root，其内部的下拉面板就再也糊不动背景。 */ header.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--nav-h); background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none; border-bottom:1px solid transparent;pointer-events:none;z-index:0; transition:background-color var(--t-hover) var(--ease-theme),border-color var(--t-theme) var(--ease-theme)} /* 不透明度下限：导航固定在视口顶部，底下压的是什么完全不受控， 低于此值时条上的文字会随背景图明暗漂移 */ header.nav.scrolled::before{background:rgba(14,15,18,.82); -webkit-backdrop-filter:var(--glass-blur) saturate(1.4);backdrop-filter:var(--glass-blur) saturate(1.4); border-bottom-color:rgba(164,180,214,.18)} header.nav.on-light.scrolled::before{background:rgba(244,246,249,.86);border-bottom-color:rgba(10,27,51,.10)} header.nav > .wrap{position:relative;z-index:1} /* 导航滚到浅色分区上方时整体反色（Mercury 的 transition-theme 时刻） */ header.nav{transition:background-color var(--t-hover) var(--ease-theme),color var(--t-theme) var(--ease-theme), border-color var(--t-theme) var(--ease-theme)} header.nav.on-light{color:#0A1B33} header.nav.on-light .logo,header.nav.on-light nav a,header.nav.on-light .nav-link{color:#0A1B33} header.nav.on-light .tel{color:rgba(10,27,51,.74)} header.nav.on-light .tel b{color:#0A1B33} header.nav.on-light nav a:hover,header.nav.on-light .nav-link.open{background:rgba(10,27,51,.07)} header.nav.on-light nav a[aria-current="page"]{background:rgba(10,27,51,.10)} /* 打开下拉时导航转实底（Mercury：has-[data-state=open]:bg-surface-elevated） */ header.nav[data-open="true"]::before{background:rgba(14,15,18,.72); -webkit-backdrop-filter:var(--glass-blur) saturate(1.4);backdrop-filter:var(--glass-blur) saturate(1.4)} html[data-theme="light"] header.nav[data-open="true"]::before{background:rgba(244,246,249,.74)} /* 只作用于顶栏本身；下拉面板内部也用 .wrap，必须用直接子选择器隔离 */ .nav > .wrap{display:flex;align-items:center;gap:24px;height:var(--nav-h)} .nav .logo{color:var(--ink);transition:opacity var(--t-hover) var(--ease-dec)} .nav .logo:hover{opacity:.72} .nav .logo svg{height:21px;width:auto} .nav nav{display:flex;gap:2px;font-size:16px} .nav nav a,.nav .nav-link{display:inline-flex;align-items:center;gap:7px;color:var(--ink); padding:8px 15px;border-radius:var(--r-nav);white-space:nowrap; transition:background var(--t-hover) var(--ease-dec),color var(--t-hover) var(--ease-dec)} .nav > .wrap > .btn{white-space:nowrap;flex:0 0 auto} .nav .tel{flex:0 0 auto} .nav nav a:hover,.nav .nav-link.open{background:rgba(244,246,249,.10)} .nav nav a[aria-current="page"]{background:rgba(244,246,249,.14)} /* 下拉指示三角：展开时旋转 180° */ .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-1px,-2px);opacity:.6; transition:transform var(--t-hover) var(--ease-std),opacity var(--t-hover) var(--ease-std)} .nav-link.open .caret{transform:rotate(225deg) translate(-2px,-1px);opacity:1} /* ---------- 下拉大菜单 ---------- */ .mega{position:absolute;left:0;right:0;top:100%; background:var(--mega-fill); -webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6); box-shadow:inset 0 1px 0 var(--mega-sheen); border-top:1px solid var(--mega-edge);border-bottom:1px solid var(--mega-edge); opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none; transition:opacity var(--t-hover) var(--ease-dec),transform var(--t-hover) var(--ease-nav),visibility 0s linear var(--t-hover)} .mega.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s} /* 菜单互换时旧面板即时消失，避免两块玻璃叠加 */ .mega.instant{transition:none !important} .mega.instant .mega-col a{transition:none !important} .mega-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr .9fr;gap:40px;padding-top:40px;padding-bottom:44px} .mega-intro .eyebrow{margin-bottom:12px} .mega-intro h4{font-size:21px;line-height:1.25;letter-spacing:.012em;margin-bottom:10px} .mega-intro p{font-size:15px;color:var(--ink-3);line-height:1.5;max-width:30ch} .mega-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:15px;color:var(--light); transition:color var(--t-hover) var(--ease-dec)} .mega-cta span{transition:transform var(--t-hover) var(--ease-std)} .mega-cta:hover{color:var(--ink)} .mega-cta:hover span{transform:translateX(4px)} .mega-col{display:flex;flex-direction:column;gap:4px} .mega-col a{display:block;padding:12px 14px;border-radius:var(--r-sm); /* Mercury 菜单项：opacity + translate，0.15s 标准缓动 */ opacity:0;transform:translateY(6px); transition:opacity var(--t-fast) var(--ease-std),transform var(--t-fast) var(--ease-std), background var(--t-fast) var(--ease-std)} .mega.show .mega-col a{opacity:1;transform:none} .mega.show .mega-col a:nth-child(1){transition-delay:.02s} .mega.show .mega-col a:nth-child(2){transition-delay:.06s} .mega.show .mega-col a:nth-child(3){transition-delay:.10s} .mega.show .mega-col a:nth-child(4){transition-delay:.14s} .mega-col a:hover{background:var(--surface-2)} .mega-col a b{display:block;color:var(--ink);font-weight:480;font-size:15px} .mega-col a span{display:block;color:var(--ink-3);font-size:13.5px;line-height:1.45;margin-top:3px} .mega-side{border-left:1px solid var(--hairline);padding-left:32px} .mega-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-4);margin:0 0 8px 14px} .nav .sp{flex:1} .nav .tel{font-family:var(--mono);font-size:13px;color:var(--ink-2);white-space:nowrap} .nav .tel b{color:var(--ink);font-weight:400} @media (max-width:1180px){.nav .tel{display:none}} @media (max-width:1080px){.nav nav a{padding:8px 11px;font-size:15px}} @media (max-width:920px){ /* 底色回到 ::before 并铺满折行后的整条 header：放在 header 本体上时 它不会跟着 .on-light 翻转，而 ::before 的 76px 高度也盖不住第二行 */ header.nav{position:sticky;background:transparent; -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0} header.nav::before{height:100%; background:rgba(14,15,18,.82); -webkit-backdrop-filter:var(--glass-blur) saturate(1.4); backdrop-filter:var(--glass-blur) saturate(1.4); border-bottom-color:var(--hairline)} header.nav.on-light::before{background:rgba(244,246,249,.88); border-bottom-color:rgba(10,27,51,.10)} /* 折行后顶栏是常驻的，纵向尺寸要压住：控件收一档，六项两行落在 136px 内 */ .nav > .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:8px 16px} /* 折行而不是横滑：横滑会把 Become a driver 与 Contact 静默藏在视口外 */ .nav nav{order:3;width:100%;display:flex;flex-wrap:wrap;overflow:visible;gap:4px 2px} .nav nav a{padding:6px 11px;font-size:14px;white-space:nowrap} .nav > .wrap > .btn{padding:11px 18px;font-size:15px} .mega{display:none} .caret{display:none} /* 顶栏已进入文档流，锚点不再需要为固定导航让位 */ [id]{scroll-margin-top:24px} } /* ---------- 首页 Hero：整屏摄影垫底，文字压在图上 ---------- */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center; overflow:hidden;background:var(--canvas)} .hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} /* 双层遮罩：竖向压暗保证顶部导航与底部衔接，中心径向压暗保证文字可读 */ .hero::after{content:"";position:absolute;inset:0;z-index:1; background: radial-gradient(78% 62% at 50% 46%, rgba(14,15,18,.78) 0%, rgba(14,15,18,.52) 55%, rgba(14,15,18,0) 100%), linear-gradient(180deg,rgba(14,15,18,.80) 0%,rgba(14,15,18,.46) 30%,rgba(14,15,18,.72) 74%,var(--canvas) 100%)} .hero .wrap{position:relative;z-index:2;padding-top:var(--nav-h);padding-bottom:56px;text-align:center;width:100%} .hero h1{margin:20px auto 0;max-width:15ch;color:#fff} .hero .lede{margin:20px auto 0;max-width:52ch;text-align:center;color:var(--ink)} .hero .btn-row{justify-content:center;margin-top:32px} .hero .trust{display:inline-flex;justify-content:center;gap:10px 28px;flex-wrap:wrap;margin-top:40px; padding:14px 26px;border-radius:var(--r-pill); background:var(--glass-fill);border:1px solid var(--glass-edge); -webkit-backdrop-filter:var(--glass-blur-soft);backdrop-filter:var(--glass-blur-soft); font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-2)} .hero .trust b{color:var(--ink);font-weight:400} /* 旧版容器化 Hero 图（Dock 版遗留）在本版中不再使用 */ .hero figure{display:none} /* ---------- 内页页头 ---------- */ .page-head{background:var(--canvas);padding:calc(var(--nav-h) + 72px) 0 56px} .page-head h1{margin-top:16px;max-width:17ch} .page-head .lede{margin-top:20px} .page-head .btn-row{margin-top:32px} /* ---------- 网格 ---------- */ .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} /* ---------- 卡片：石墨面，12px 圆角，32px 内边距，无阴影无描边 ---------- */ .card{background:var(--surface);border-radius:var(--r-card);padding:var(--pad-card)} .card h3{margin-bottom:10px} .card p{font-size:16px;color:var(--ink-2);line-height:1.5} .card-media{background:var(--surface);border-radius:var(--r-card);overflow:hidden;display:block} /* 深底上的摄影统一压一档亮度与饱和，与 Mercury 的冷调克制一致 */ .card-media img,.feature .media img,.split img{filter:saturate(.92) brightness(.9) contrast(1.02)} .card-media img{width:100%;aspect-ratio:16/9;object-fit:cover} .card-media .body{padding:var(--pad-card)} .card-media .body p{font-size:16px;color:var(--ink-2);line-height:1.5;margin-top:10px} .card-media:hover{background:var(--surface-2)} /* 圆点分类标 */ .dot{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:480; letter-spacing:.07em;text-transform:uppercase;color:var(--ink);line-height:1.3} .dot i{width:8px;height:8px;border-radius:50%;flex:0 0 auto} /* 三档点色走令牌，随主题翻转 —— 行内写死的 hex 在某一个主题下必然撞卡片底色 */ .dot i.a{background:var(--dot-a)} .dot i.b{background:var(--dot-b)} .dot i.c{background:var(--dot-c)} /* 四栏卡片里的标签统一占两行高度，避免长短标签造成卡片错位 */ .g4 .card-media .dot{min-height:2.6em;align-items:flex-start;padding-top:1px} /* 数据卡 */ .stat{background:var(--surface);border-radius:var(--r-card);padding:var(--pad-card)} .stat .k{font-size:13px;color:var(--ink-3);letter-spacing:.02em} .stat .v{font-size:clamp(32px,3.4vw,42px);line-height:1.15;font-weight:480;letter-spacing:.01em; margin-top:12px;font-variant-numeric:tabular-nums;color:var(--ink)} .stat .v.b{color:var(--light)} .stat .v small{font-size:.45em;font-weight:400} .stat p{font-size:14px;color:var(--ink-3);margin-top:10px;line-height:1.5} /* ---------- 图文交替块 ---------- */ .feature{background:var(--surface);border-radius:var(--r-card);overflow:hidden; display:grid;grid-template-columns:1fr 1fr} .feature + .feature,.card + .feature{margin-top:16px} .feature .txt{padding:48px var(--pad-card)} .feature .txt h3{margin:16px 0 14px;font-size:28px;line-height:1.2;letter-spacing:.012em} .feature .media{background:var(--surface-2)} .feature .media img{height:100%;width:100%;object-fit:cover;min-height:360px} .feature.flip .media{order:-1} .feature ul{list-style:none;margin-top:24px;border-top:1px solid var(--hairline)} .feature li{padding:13px 0;border-bottom:1px solid var(--hairline);font-size:16px;display:flex;gap:14px;color:var(--ink-2)} .feature li span:first-child{color:var(--light);flex:0 0 auto} /* 标签/值变体（about 的车队规格）：首列定宽，四行的值才对得齐。 箭头列表不受影响，只作用于 ul.defs */ .feature ul.defs li span:first-child{min-width:7.5em} .feature .from{margin-top:22px;font-family:var(--mono);font-size:11.5px;color:var(--ink-4);line-height:1.7} /* ---------- 深色面板（本版中即石墨卡片） ---------- */ .dark-panel{background:var(--surface);border-radius:var(--r-card);padding:56px 48px;position:relative;overflow:hidden} .dark-panel h2,.dark-panel h3{color:var(--ink)} .dark-panel .lede{color:var(--ink-2)} .dark-panel .wm{position:absolute;right:-4%;top:-30%;width:340px;opacity:.05;color:#fff;pointer-events:none} .dark-panel .wm svg{width:100%;height:auto} .dark-panel ul{list-style:none;margin-top:28px} .dark-panel li{padding:14px 0;border-top:1px solid var(--hairline);font-size:16px;color:var(--ink-2)} .dark-panel li b{color:var(--ink);font-weight:480} /* 运单式数据块 */ .docket{background:var(--canvas);border-radius:var(--r-sm);overflow:hidden} .docket .h{display:flex;justify-content:space-between;padding:16px 20px; border-bottom:1px solid var(--hairline);align-items:baseline} .docket .h b{color:var(--ink);font-weight:480;font-size:16px} .docket .h code{font-family:var(--mono);font-size:13px;color:var(--light)} .docket dl{display:grid;grid-template-columns:repeat(3,1fr)} .docket dl>div{padding:16px 20px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} .docket dl>div:nth-child(3n){border-right:0} .docket dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px} .docket dd{font-family:var(--mono);font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums} .docket .bar{background:var(--blue);color:#fff;font-size:11px;font-weight:480;letter-spacing:.1em; text-transform:uppercase;padding:11px 20px;display:flex;justify-content:space-between;gap:12px} .docket .bar span:last-child{font-weight:400;text-transform:none;letter-spacing:.02em;opacity:.85} /* ---------- 表格 ---------- */ .table-wrap{overflow-x:auto;background:var(--surface);border-radius:var(--r-card)} table{width:100%;border-collapse:collapse;font-size:16px;min-width:660px} th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4); font-weight:480;padding:24px 24px 14px;border-bottom:1px solid var(--hairline)} td{padding:16px 24px;border-bottom:1px solid var(--hairline);vertical-align:middle;color:var(--ink-2)} tr:last-child td{border-bottom:0} td.m{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)} td b{color:var(--ink);font-weight:480} /* 白底车型切图：垫一块浅色托板，避免在深色画布上成为白块。 托板必须固定为浅色 —— 跟着 --ink 翻转会在浅色主题下变成深藏青， 而图片自带的白底不会跟着变 */ td img{width:112px;height:64px;object-fit:contain;background:var(--plate); border-radius:var(--r-sm);padding:6px 8px} /* ---------- 步骤 ---------- */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:st} .step{background:var(--surface);border-radius:var(--r-card);padding:var(--pad-card);counter-increment:st} .step .n{font-family:var(--mono);font-size:12px;color:var(--light);letter-spacing:.08em} .step .n::before{content:counter(st,decimal-leading-zero)} .step h3{margin:14px 0 10px;font-size:21px} .step p{font-size:15px;color:var(--ink-3);line-height:1.5} /* ---------- 灰色占位 ---------- */ .placeholder{background:repeating-linear-gradient(135deg,#15294B,#15294B 12px,#122343 12px,#122343 24px); display:flex;align-items:center;justify-content:center;color:var(--ink-4); font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; text-align:center;padding:20px;min-height:220px;border-radius:var(--r-card)} .card-media .placeholder,.feature .placeholder{border-radius:0} .feature .placeholder{min-height:360px;height:100%} .card-media .placeholder{aspect-ratio:16/9;min-height:0} /* ---------- 结尾 CTA：石墨面 + 唯一行动色，不用渐变 ---------- */ .cta{background:var(--surface);border-radius:var(--r-card);padding:88px 48px;text-align:center; position:relative;overflow:hidden} .cta::after{content:"";position:absolute;inset:auto -10% -60% auto;width:520px;height:520px; border-radius:50%;background:radial-gradient(circle,rgba(29,91,216,.30),transparent 68%);pointer-events:none} .cta>*{position:relative;z-index:1} .cta h2{max-width:18ch;margin:0 auto} .cta p{margin:18px auto 0;max-width:48ch;color:var(--ink-2)} .cta .btn-row{justify-content:center;margin-top:32px} /* ---------- 表单：胶囊输入，象牙描边 ---------- */ .form{background:var(--surface);border-radius:var(--r-card);padding:var(--pad-card)} .field{margin-bottom:20px} .field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);font-weight:480;margin-bottom:9px} .field input,.field select,.field textarea{ width:100%;border:1px solid var(--hairline-2);border-radius:var(--r-pill); background:transparent;font-family:var(--mono);font-size:15px;color:var(--ink);padding:14px 20px} .field select{font-family:var(--sans)} .field textarea{font-family:var(--sans);min-height:112px;resize:vertical;border-radius:20px} .field input::placeholder,.field textarea::placeholder{color:var(--ink-4)} /* 键盘焦点保留系统焦点环：只靠 1px 边框变色看不出焦点落在哪 */ .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ border-color:var(--light);outline:2px solid var(--light);outline-offset:2px} .field input:focus:not(:focus-visible),.field select:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible){outline:0;border-color:var(--light)} .field select option{background:var(--surface);color:var(--ink)} /* ---------- 页脚 ---------- */ footer{background:var(--canvas);border-top:1px solid var(--hairline);padding:72px 0 32px;color:var(--ink-3)} .f-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px} .f-brand svg{height:20px;width:auto;color:var(--ink)} .f-brand p{margin-top:20px;font-size:15px;max-width:30ch;line-height:1.55} .f-brand .c{margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--ink-2);line-height:1.9} .f-col h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4); font-weight:480;margin-bottom:16px} .f-col a{display:block;font-size:15px;color:var(--ink-3);padding:6px 0} .f-col a:hover{color:var(--ink)} .f-legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--hairline); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--ink-4);line-height:1.8} /* ---------- 入场与滚动动效 ---------- 强制开启：不设 prefers-reduced-motion 关闭分支，也不提供 UI 开关。 */ .js .rv{opacity:0;transform:translateY(24px); transition:opacity var(--t-slow) var(--ease-dec),transform var(--t-slow) var(--ease-dec)} .js .rv.in{opacity:1;transform:none} /* 组内子元素依次入场（延迟由脚本按序写入） */ .js .rv-child{opacity:0;transform:translateY(18px); transition:opacity var(--t-media) var(--ease-dec),transform var(--t-media) var(--ease-dec)} .js .rv-child.in{opacity:1;transform:none} /* Hero 底图：视差由脚本驱动，这里只声明变换原点与合成层 */ .hero .hero-bg{will-change:transform;transform-origin:50% 40%} /* 悬停：图片在容器内缓慢放大（overflow 已裁切） */ .card-media img,.feature .media img{transition:transform var(--t-slow) var(--ease-big),filter var(--t-media) var(--ease-dec)} .card-media:hover img{transform:scale(1.045)} .feature:hover .media img{transform:scale(1.03)} /* 只有真正可点的元素才给底色反馈：.card / .stat / .step 全站都不是链接， 给它们加悬停变色等于做出一个点不动的承诺 */ .card-media{transition:background var(--t-hover) var(--ease-dec)} /* 表格行悬停：走令牌，写死的浅色叠加在浅色主题下等于没有 */ tbody tr,table tr{transition:background var(--t-fast) var(--ease-std)} table tr:hover td{background:var(--row-hover)} /* 正文内链：站内已手工加了下划线，这里补上悬停反馈 */ .step a:hover,.dark-panel li a:hover,.note a:hover,td a:hover,.f-brand .c a:hover{color:var(--light)} /* ---------- 响应式 ---------- */ @media (max-width:1040px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3,.steps{grid-template-columns:repeat(2,minmax(0,1fr))} .f-grid{grid-template-columns:1fr 1fr 1fr;gap:32px} /* .split 要到 880 才收单列，中间这段窗口里半幅容器再切两列， 输入框只剩 113px 可用宽，placeholder 会被截断 */ .split .g2{grid-template-columns:minmax(0,1fr)} .split .form .field input,.split .form .field select{padding:14px 16px} } @media (max-width:880px){ :root{--gap:56px;--pad-card:24px} .feature{grid-template-columns:1fr} .feature .media{order:-1} .feature .media img{min-height:230px;aspect-ratio:16/8} .feature .placeholder{min-height:210px} .feature .txt{padding:32px 24px} .split{grid-template-columns:1fr;gap:32px} .dark-panel{padding:36px 24px} .cta{padding:56px 24px} .page-head{padding:calc(var(--nav-h) + 48px) 0 40px} /* 窄屏表格靠横滑承载，补一层可供性：首列吸边 + 右缘渐隐 */ .table-wrap{position:relative; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)} .table-wrap th:first-child, .table-wrap td:first-child{position:sticky;left:0;z-index:1;background:var(--surface)} table tr:hover td:first-child{background:var(--surface)} table{min-width:560px} } @media (max-width:560px){ .wrap{padding:0 20px} .g2,.g3,.g4,.steps{grid-template-columns:minmax(0,1fr)} .f-grid{grid-template-columns:1fr 1fr} .docket dl{grid-template-columns:1fr 1fr} .docket dl>div:nth-child(3n){border-right:1px solid var(--hairline)} .docket dl>div:nth-child(2n){border-right:0} .btn-row .btn{width:100%;justify-content:center} .form{padding:24px} .hero .trust{gap:8px 20px;font-size:11px} } /* ≤920 时顶栏从 fixed 转为 sticky，已经占据文档流高度， 为固定导航预留的那一份 nav-h 必须撤掉，否则 nav-h 被算了两遍： Hero 会溢出一屏把信任条切掉，内页页头则先给出近 240px 空白。 放在 880 块之后，让两个区间都取到这里的值。 */ @media (max-width:920px){ .hero{min-height:78svh} .hero .wrap{padding-top:24px;padding-bottom:48px} .page-head{padding:48px 0 40px} }