/* 字体自托管（2026-10-15） -------------------------------------------------------------------------- 原来是 `@import url("https://fonts.googleapis.com/...")`。大陆访客不一定能取到 fonts.googleapis.com，取不到就退浏览器默认字体 —— 而全站 30 处 `font-family:"Space Grotesk"` 原来没写兜底，大标题会明显走形。 改成把 woff2 放在 assets/fonts/ 里本地加载：两家都是可变字体，一个文件覆盖 400~700，四个文件合计 94KB（比原来跨站请求还快）。unicode-range 原样保留， 浏览器只在页面真的用到时才下 latin-ext。 */ @font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dmsans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dmsans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} :root{ --bg:#f7f3eb; --bg2:#eee6d8; --ink:#1d1a16; --muted:#817668; --line:rgba(141,110,72,.18); --light:#f8f4ec; --gold:#d99a53; --gold2:#f1d79f; --gold3:#b96f2e; --white:#fffaf1; --cream:#f6e5c0; --ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--light);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;overflow-x:hidden} a{color:inherit;text-decoration:none} .noise{position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")} .cursor-glow{position:fixed;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(24,118,255,.14),transparent 68%);transform:translate(-50%,-50%);pointer-events:none;z-index:999;mix-blend-mode:screen} .scroll-line{position:fixed;left:0;top:0;width:3px;height:0;background:#e1a65f;z-index:1001} .nav{position:fixed;top:0;left:0;right:0;height:78px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;z-index:100;background:linear-gradient(to bottom,rgba(7,17,29,.92),rgba(7,17,29,0));color:#fff} .brand{display:flex;align-items:center;gap:12px;font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;letter-spacing:.03em} .brand-dot{color:#e1a65f} .brand-mark{width:24px;height:18px;display:flex;gap:3px;align-items:flex-end} .brand-mark i{display:block;width:5px;background:#fff;transform:skewX(-25deg)} .brand-mark i:nth-child(1){height:9px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:18px} .nav-links{display:flex;gap:36px;font-size:15px;color:rgba(255,255,255,.75)} .nav-links a{transition:.35s}.nav-links a:hover{color:#fff} .nav-cta{font-size:12px;padding:10px 15px;border:1px solid rgba(255,255,255,.25);border-radius:999px;transition:.35s} .nav-cta:hover{background:#fff;color:#080706;border-color:#fff} .hero{min-height:100vh;position:relative;background:#080706;color:#fff;overflow:hidden} #hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.62} .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px, transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,rgba(0,0,0,1),transparent 85%)} .hero-copy{position:absolute;left:8vw;top:24%;z-index:3;max-width:760px} .eyebrow,.section-kicker{font-size:11px;letter-spacing:.2em;font-weight:700;opacity:.72} .eyebrow span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e8bd78;box-shadow:0 0 15px #e8bd78;margin-right:8px} /* 首屏眉标放大 —— 客户 2026-09 反馈要求。 注意上面那行是 .eyebrow 和 .section-kicker 共用的，不能直接改： 各板块的「01 / 为什么存在」那类小标题也吃那条规则，会被一起放大。 所以这里只给 .eyebrow 单独覆盖字号。2026-10-15 客户再提一次「放大到 合适的大小」，13px → 16px（旁边 .hero-lead 是 17px，眉标略小于它就对了）。 */ .eyebrow{font-size:16px} .hero h1{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(72px,11vw,180px);line-height:.82;letter-spacing:-.07em;margin:26px 0 28px;font-weight:600} .hero h1 em{display:block;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.78);font-style:normal} .hero-lead{max-width:520px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.68)} .hero-actions{display:flex;gap:14px;margin-top:34px} /* 客户：这个按钮看着没居中。病根是「文字 + 20px 的 gap + 箭头」三段太散 —— 箭头才 8px 宽，孤零零挂在右边，整块内容读起来是往左偏的。gap 收到 8px， 再把箭头塞进一个 1em 的方框里居中：↗ 的字形是画在 em 框左上角的， 不居中就直接用，它右边会凭空多出 5px 空白，等于又加了一层右偏。 gap 试过 8 / 12 / 20，12 是「读成一整块」和「不挤」的平衡点。 */ .btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;padding:15px 20px;font-size:13px;font-weight:600;transition:.45s var(--ease)} .btn span{display:inline-block;width:1em;text-align:center} .btn-primary{background:#fff;color:#080706}.btn-primary:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(255,255,255,.16)} .btn-ghost{border:1px solid rgba(255,255,255,.22);color:#fff}.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)} .hero-object{position:absolute;right:5vw;top:18%;width:45vw;height:70vh;display:grid;place-items:center} .object-core{width:28vw;height:28vw;border-radius:50%;position:relative;background:radial-gradient(circle at 45% 42%,#1e4c7a 0 6%,#0a2037 26%,#080706 62%);box-shadow:0 0 120px rgba(43,126,255,.18),inset 0 0 120px rgba(255,255,255,.04)} .core-ring{position:absolute;inset:18%;border:1px solid rgba(128,191,255,.38);border-radius:50%;box-shadow:0 0 40px rgba(73,154,255,.15)} .probe{position:absolute;width:24%;height:7%;border-radius:999px;background:linear-gradient(90deg,#aab5be,#fff,#9ba6b1);box-shadow:0 0 25px rgba(255,255,255,.22)} .probe:after{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:#d9edf9;box-shadow:0 0 16px #69afff} .probe-a{left:-10%;top:35%;transform:rotate(-18deg)} .probe-b{right:-10%;top:58%;transform:rotate(20deg)} .probe-c{left:29%;bottom:-2%;transform:rotate(92deg)} .orbit{position:absolute;border:1px solid rgba(118,180,255,.16);border-radius:50%;transform:rotate(-25deg)} .orbit-1{width:72%;height:32%;}.orbit-2{width:95%;height:44%;transform:rotate(42deg)}.orbit-3{width:55%;height:78%;transform:rotate(60deg)} .hero-tag{position:absolute;font:11px "Space Grotesk",Arial,sans-serif;letter-spacing:.12em;color:#9bd0ff;padding:10px 12px;border:1px solid rgba(127,184,255,.18);border-radius:12px;background:rgba(5,15,27,.5);backdrop-filter:blur(12px)} .tag-a{left:3%;top:24%}.tag-b{right:2%;top:25%}.tag-c{right:7%;bottom:14%} .hero-footer{position:absolute;bottom:30px;left:8vw;right:6vw;display:flex;align-items:center;gap:18px;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.46);z-index:3} .scroll-arrow{font-size:18px;color:#fff;animation:float 1.8s ease-in-out infinite} .hero-note{margin-left:auto;text-align:right;letter-spacing:0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.4)} .hero-note strong{color:#fff;font-weight:500} @keyframes float{50%{transform:translateY(6px)}} .section-dark{background:#080706;color:#fff} .section-light{background:#f4eee5;color:#080706} .section-blue{background:#b66d2e;color:#fff} .manifesto{padding:18vh 8vw 19vh} .manifesto-line{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(58px,9vw,140px);line-height:.88;letter-spacing:-.06em;font-weight:600;margin-top:60px;display:flex;flex-direction:column} .outline-text{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.56)} .manifesto-sub{max-width:560px;margin:60px 0 0 auto;color:rgba(255,255,255,.5);line-height:1.7;font-size:16px} .products{padding:14vh 8vw} .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:80px} .section-head h2,.technology h2,.company h2{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(54px,7vw,110px);line-height:.9;letter-spacing:-.06em;margin:18px 0 0} .section-head h2 span,.technology h2 span,.company h2 span{color:#8d7b65} .section-head p{max-width:380px;color:#796d61;line-height:1.65} .section-head.light p{color:rgba(255,255,255,.5)} .product-stage{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} /* 原来是 flex + justify-content:space-between，图画用绝对定位钉在 inset:90px 30px 230px —— 底下那 230px 是「给文案预留的固定高度」。 文案一旦超过 230px（窄屏 h3 折两行、描述折四五行的那几档），文字就 直接压到图上。客户截图里 04/05/06 三张卡叠字就是这个。 改成三行网格：卡头 auto / 图画 1fr / 文案 auto。图画拿「文案之外 剩下的全部高度」，文案再长也只是把图画那块挤小；挤到装不下画布时， 1fr 的下限是内容最小高度，卡片会自己长高，不会再叠。 `grid-template-columns:minmax(0,1fr)` 这一条不能省。单列网格的隐式轨道是 auto，最小值取所有项目的最小内容宽度 —— 而 .pv-pcb 是写死的 width:300px， 窄到卡片内容区装不下 300px 时，轨道会被撑到 300px 宽，于是卡片里**所有** 东西（连右上角的「定制 · CUSTOM」和正文）都按 300px 排版、右边一截被 overflow:hidden 切掉。minmax(0,1fr) 把轨道钉死在容器宽度上，超出的部分 由 .pv-pcb 自己对称溢出（它那三条按档缩放的媒体查询本来就是为这个写的）。 */ .product-card{min-height:650px;border-radius:28px;overflow:hidden;position:relative;padding:26px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;transition:transform .65s var(--ease),box-shadow .65s var(--ease)} .product-card:hover{transform:translateY(-12px);box-shadow:0 35px 80px rgba(0,0,0,.16)} .product-card-dark{background:#101c2a;color:#fff}.product-card-blue{background:#b96f2e;color:#fff}.product-card-white{background:#dfe8f1} .card-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.18em;opacity:.58} .product-visual{display:flex;align-items:center;justify-content:center} /* 上面这两行原来是 display:grid;place-items:center。网格的隐式轨道是 auto， 最小宽度取项目的最小内容宽度 —— 画布是写死的 300px，窄屏上轨道会被撑到 300px 并整条往右溢出容器，项目在轨道里是"居中"的，相对卡片却整体偏右 （1100px 时实测偏 29px，客户看到的就是"模型没有视觉居中"）。 换成 flex：没有轨道可涨，justify-content:center 让 300px 的画布在窄容器里 两侧对称溢出。> * 锁 flex:none，否则画布会被 flex-shrink 压窄， 而它的零件是按固定坐标绝对定位的，压窄只会让居中基准跑掉。 */ .product-visual > *{flex:none} .probe-stack{display:flex;gap:11px;transform:rotate(-13deg)} .probe-stack span{display:block;width:18px;height:240px;border-radius:12px;background:linear-gradient(90deg,#6f7985,#f2f7fb,#707b85);box-shadow:0 15px 30px rgba(0,0,0,.18)} .scan-line{position:absolute;width:72%;height:1px;background:linear-gradient(90deg,transparent,#6faeff,transparent);top:54%;animation:scan 2.7s infinite} @keyframes scan{50%{transform:translateY(100px);opacity:.15}} .wafer-disc{width:290px;height:290px;border-radius:50%;background:repeating-radial-gradient(circle at center,#17365d 0 7px,#2d6fa9 8px 9px);box-shadow:0 30px 80px rgba(0,0,0,.28),inset 0 0 60px rgba(255,255,255,.15)} .wafer-disc:after{content:"";position:absolute;width:78px;height:18px;border-radius:0 0 18px 18px;background:#b96f2e;bottom:7%;left:50%;transform:translateX(-50%)} .network-grid{width:100%;height:100%;background-image:linear-gradient(rgba(7,17,29,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(7,17,29,.1) 1px,transparent 1px);background-size:30px 30px} .network-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:#bd7b39;box-shadow:0 0 0 10px rgba(12,95,216,.12);animation:pulse 2.4s infinite} .dot-1{left:28%;top:25%}.dot-2{right:18%;top:36%;animation-delay:.4s}.dot-3{left:46%;bottom:23%;animation-delay:.8s}.dot-4{right:32%;bottom:36%;animation-delay:1.2s} @keyframes pulse{50%{box-shadow:0 0 0 18px rgba(12,95,216,.03)}} .card-bottom h3{font:600 38px "Space Grotesk",Arial,sans-serif;letter-spacing:-.04em;margin:0 0 12px} .card-bottom p{max-width:330px;line-height:1.55;color:rgba(255,255,255,.62);font-size:13px}.product-card-white .card-bottom p{color:#65584c} .card-bottom a{display:inline-block;margin-top:20px;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:5px} .applications{padding:14vh 8vw 12vh;overflow:hidden} .application-rail{display:flex;gap:18px;align-items:stretch} /* 三张卡等分板块的内容宽，左右各留 8vw —— 跟上面的标题、正文落在同一条边线上。 原来是固定 31vw：3 张 + 2 个 18px 间距 = 93vw + 36px，比内容宽（84vw）多出 9vw + 36px，被 .applications 的 overflow:hidden 整个切在右边，看着就是 「左边有留白、右边顶到头」。 宽度 = (84vw - 2 x 18px) / 3 = 28vw - 12px。 */ .application-card{width:calc(28vw - 12px);min-width:calc(28vw - 12px);min-height:610px;border-radius:26px;overflow:hidden;position:relative;background:#0d1b2b;border:1px solid rgba(255,255,255,.09);transition:.7s var(--ease)} .application-card:hover,.application-card.active{transform:translateY(-10px)} .app-image{position:absolute;inset:0;opacity:.68;background-size:cover;background-position:center} .app-semiconductor{background:radial-gradient(circle at 55% 35%,#4b9fff 0 4%,transparent 5%),radial-gradient(circle at 40% 62%,#3f8de8 0 2%,transparent 3%),linear-gradient(145deg,#091827,#14375b 50%,#06101d)} .app-automotive{background:radial-gradient(circle at 36% 30%,#8bd6ff 0 4%,transparent 5%),linear-gradient(140deg,#0a1521,#173f69,#080706)} .app-electronics{background:linear-gradient(135deg,#0a1828,#14558d,#080706)} .app-harness{background:radial-gradient(circle at 58% 46%,rgba(130,195,255,.7) 0 7%,transparent 8%),linear-gradient(145deg,#080706,#173b60)} .application-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(2,8,14,.95) 10%,rgba(2,8,14,.15) 62%,rgba(2,8,14,.2))} .app-number{position:absolute;top:24px;left:24px;z-index:2;font-size:11px;color:rgba(255,255,255,.55)} .app-content{position:absolute;left:26px;right:26px;bottom:26px;z-index:2} .app-tag{font-size:10px;letter-spacing:.18em;color:#7cb9ff} .app-content h3{font:600 44px "Space Grotesk",Arial,sans-serif;letter-spacing:-.04em;margin:10px 0} /* 卡宽从 31vw（=93vw+36px 里每张）缩到 28vw-12px 之后，标题要同比缩 —— 不然 1520px 以下「每一个器件都算数。」（9 个字，含字距约 8.64em）会折成 两行：卡宽 446 时装得下，缩到 391 就装不下了。 字号取 min(44px, 卡内容宽 / 10.1)： - 10.1 是这行字加余量后的宽度系数，除下来永远不折行（实测 961~1826 全 1 行）； - 上限 44px 保证 1826px 及以上字号一点没变（(28vw-64)/10.1 在那儿 = 44.3）。 只作用在 >960px —— 那以下是另一套卡宽（72vw / 86vw），字号沿用原来的。 顺带：改之前 EN 的第 3 张标题（Make manufacturing intelligent.）在所有宽度 下都折行，那是原本就有的，这次没动它。 */ @media (min-width:961px){ .app-content h3{font-size:min(44px, calc((28vw - 64px) / 10.1))} } .app-content p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.58);max-width:370px}.app-content a{display:inline-block;margin-top:14px;color:#fff;font-size:12px;text-decoration:underline;text-underline-offset:5px} .technology{padding:16vh 8vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:#f4eee5} .tech-left p{max-width:430px;color:#796d61;line-height:1.7;font-size:16px;margin-top:42px} .tech-right{border-top:1px solid #d8c8ae} .metric{display:grid;grid-template-columns:60px 1fr auto;gap:30px;align-items:center;padding:28px 0;border-bottom:1px solid #d8c8ae} .metric strong{font-size:10px;color:#998a78;letter-spacing:.12em}.metric span{font:500 28px "Space Grotesk",Arial,sans-serif;letter-spacing:-.03em}.metric b{font:500 15px "Space Grotesk",Arial,sans-serif} .company{padding:15vh 8vw 10vh} .company-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:9vw} .company-copy{padding-top:80px}.company-copy .large{font:500 32px "Space Grotesk",Arial,sans-serif;line-height:1.15;letter-spacing:-.03em;margin:0 0 25px}.company-copy p:not(.large){color:#796d61;line-height:1.7}.text-link{display:inline-block;margin-top:24px;text-decoration:underline;text-underline-offset:6px;font-size:13px;font-weight:700} .worldline{position:relative;height:160px;margin-top:120px;border-top:1px solid #d8c8ae} .worldline-track{position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#b89b74 15%,#b89b74 85%,transparent)} .worldpoint{position:absolute;top:-7px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:13px;font-size:9px;letter-spacing:.17em;color:#7c6d5d} .worldpoint i{width:12px;height:12px;border:1px solid #1b73ea;background:#f4eee5;border-radius:50%;box-shadow:0 0 0 6px rgba(27,115,234,.08)} .p1{left:15%}.p2{left:53%}.p3{left:84%} .contact{min-height:75vh;padding:14vh 8vw;position:relative;overflow:hidden} .contact h2{font:600 clamp(70px,9vw,150px) "Space Grotesk",Arial,sans-serif;line-height:.88;letter-spacing:-.07em;margin:35px 0 25px} .contact h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75)} .contact p{font-size:17px;color:rgba(255,255,255,.68);margin-bottom:38px} /* 「一句导语 + 一枚按钮」并成一条动作带，下面压一道细线，联系方式卡片退到 线下面自成一块。原来按钮是跟在卡片后面的，而且两者之间是 0 间距 —— .btn 是 inline-flex，行盒的顶边正好落在上一个块的底边上，卡片底边就是 按钮顶边（实测 1918x900 是 0px，1918x1080 是 -1px，直接压上去）。 顺带把 1611px 宽的卡片条上面那枚孤零零的小药丸收进头部，视觉上不再是掉的。 */ .contact-head{display:flex;align-items:center;flex-wrap:wrap;gap:20px 28px; padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.18)} .contact-head p{margin:0} .btn-light{background:#fff;color:#754319}.btn-light:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.15)} .contact-glow{position:absolute;width:55vw;height:55vw;border-radius:50%;right:-20vw;top:-10vw;background:radial-gradient(circle,rgba(107,181,255,.45),transparent 67%);filter:blur(18px);pointer-events:none} .footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:28px 8vw;background:#080706;color:rgba(255,255,255,.4);font-size:10px;letter-spacing:.04em}.footer-brand{font:700 18px "Space Grotesk",Arial,sans-serif;color:#fff}.footer-brand span{color:#e1a65f} .reveal{opacity:0;transform:translateY(35px);transition:opacity .95s var(--ease),transform .95s var(--ease)} .reveal.visible{opacity:1;transform:none} @media (max-width: 960px){ .nav-links{display:none} .hero-object{right:-13vw;width:70vw;opacity:.72}.hero-copy{left:7vw;top:26%}.hero h1{font-size:20vw} .product-stage{grid-template-columns:1fr}.product-card{min-height:590px} .application-card{min-width:72vw;width:72vw} .technology,.company-grid{grid-template-columns:1fr}.company-copy{padding-top:10px} .section-head{display:block}.section-head p{margin-top:30px} .footer{flex-direction:column;align-items:flex-start} } @media (max-width: 620px){ .nav{padding:0 18px}.nav-cta{font-size:10px;padding:9px 11px} .hero-copy{left:18px;right:18px;top:23%}.hero-lead{font-size:14px} .hero-actions{flex-direction:column;align-items:flex-start}.hero-object{right:-28vw;top:18%;width:88vw} .hero-footer{left:18px;right:18px}.hero-note{display:none} .products,.applications,.technology,.company,.contact,.manifesto{padding-left:18px;padding-right:18px} .manifesto-line{font-size:17vw}.section-head h2,.technology h2,.company h2{font-size:18vw} .product-card{min-height:520px}.card-bottom h3{font-size:32px} .application-card{min-width:86vw;width:86vw;min-height:540px}.app-content h3{font-size:36px} .metric{grid-template-columns:40px 1fr;gap:15px}.metric b{grid-column:2}.worldline{margin-top:70px} } .brand-logo{width:42px;height:42px;object-fit:contain;display:block;filter:drop-shadow(0 0 12px rgba(226,162,91,.12))} .brand-name{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;letter-spacing:.05em} .brand-name span{color:#d99a53} .nav-cta{border-color:rgba(217,154,83,.38)} .nav-cta:hover{background:#f6e5c0;color:#17110a;border-color:#f6e5c0} .hero{background: radial-gradient(circle at 82% 44%, rgba(187,116,47,.15), transparent 25%), radial-gradient(circle at 64% 68%, rgba(238,203,148,.08), transparent 23%), #080706} .hero-grid{background-image:linear-gradient(rgba(239,208,163,.038) 1px, transparent 1px),linear-gradient(90deg,rgba(239,208,163,.038) 1px, transparent 1px)} .hero h1 em{color:transparent;-webkit-text-stroke:1px rgba(239,210,163,.72)} .eyebrow span{background:#e8bd78;box-shadow:0 0 15px rgba(232,189,120,.65)} .object-core{background: radial-gradient(circle at 42% 38%,#e9bb77 0 5%,#8d552b 17%,#2e1b0d 34%,#080706 67%); box-shadow:0 0 120px rgba(197,121,45,.16),inset 0 0 100px rgba(255,245,220,.05)} .core-ring{border-color:rgba(239,209,157,.36);box-shadow:0 0 40px rgba(219,153,78,.12)} .probe{background:linear-gradient(90deg,#6c553e,#f8e6bf,#a56b35);box-shadow:0 15px 34px rgba(0,0,0,.22)} .probe:after{background:#f4d99f;box-shadow:0 0 18px rgba(236,187,107,.8)} .orbit{border-color:rgba(239,210,163,.14)} .hero-tag{color:#efd19a;border-color:rgba(232,190,123,.22);background:rgba(21,15,10,.55)} .section-dark{background:#080706} .section-light{background:#f4eee5} .section-blue{background:linear-gradient(135deg,#9e5c28,#d18b43 48%,#8c4e24)} .outline-text{color:transparent;-webkit-text-stroke:1px rgba(239,210,163,.58)} .product-card-dark{background:linear-gradient(145deg,#17120d,#0d0b09);color:#fffaf1} .product-card-blue{background:linear-gradient(145deg,#9b5c2a,#cb8a45);color:#fffaf1} .product-card-white{background:#e9ddca} .product-card-white .card-bottom p{color:#655548} .product-card:hover{box-shadow:0 35px 80px rgba(102,62,28,.2)} .scan-line{background:linear-gradient(90deg,transparent,#efd09a,transparent)} .wafer-disc{background:repeating-radial-gradient(circle at center,#4d321d 0 7px,#ad7138 8px 9px);box-shadow:0 30px 80px rgba(61,36,16,.28),inset 0 0 60px rgba(255,234,199,.12)} .wafer-disc:after{background:#b96f2e} .network-dot{background:#af6b31;box-shadow:0 0 0 10px rgba(175,107,49,.12)} .applications{background:#080706} .application-card{background:#15110d;border-color:rgba(236,205,160,.1)} .app-semiconductor{background:radial-gradient(circle at 55% 35%,#e3ad69 0 4%,transparent 5%),radial-gradient(circle at 40% 62%,#9a5f2f 0 2%,transparent 3%),linear-gradient(145deg,#100c08,#3c2411 50%,#080706)} .app-automotive{background:radial-gradient(circle at 36% 30%,#f2d8a8 0 4%,transparent 5%),linear-gradient(140deg,#0c0a08,#4b2d16,#080706)} .app-electronics{background:linear-gradient(135deg,#110c08,#67401f,#080706)} .app-harness{background:radial-gradient(circle at 58% 46%,rgba(240,202,145,.7) 0 7%,transparent 8%),linear-gradient(145deg,#080706,#412514)} .app-tag{color:#e5b978} .technology{background:#f4eee5} .company{background:#f4eee5} .contact-glow{background:radial-gradient(circle,rgba(247,206,143,.35),transparent 67%)} /* ===== JINQIE DAYLIGHT THEME ===== */ body{background:#f8f4ec;color:#1d1a16} .noise{opacity:.018} .cursor-glow{background:radial-gradient(circle,rgba(213,158,82,.13),transparent 68%);mix-blend-mode:multiply} .nav{ background:rgba(248,244,236,.78); color:#1d1a16; backdrop-filter:blur(18px); border-bottom:1px solid rgba(120,95,62,.08); } .nav-links{color:rgba(29,26,22,.62)} .nav-links a:hover{color:#1d1a16} .brand-name span{color:#b97835} .nav-cta{color:#6e4828;border-color:rgba(185,120,53,.34)} .nav-cta:hover{background:#b97835;color:#fffaf1;border-color:#b97835} .brand-mark i{background:#1d1a16} .hero{ color:#1d1a16; background: radial-gradient(circle at 78% 36%,rgba(219,171,106,.18),transparent 22%), radial-gradient(circle at 58% 74%,rgba(246,226,191,.75),transparent 26%), linear-gradient(180deg,#fbf8f2,#f2eade); } .hero-grid{ background-image: linear-gradient(rgba(112,84,48,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(112,84,48,.045) 1px,transparent 1px); mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 88%); } .hero-copy{z-index:4} .eyebrow{color:#755639} .eyebrow span{background:#c98b45;box-shadow:0 0 14px rgba(201,139,69,.3)} .hero h1 em{ color:transparent; -webkit-text-stroke:1px rgba(122,91,55,.6); } .hero-lead{color:#6d6358} .btn-primary{background:#b97835;color:#fffaf1} .btn-primary:hover{box-shadow:0 14px 40px rgba(177,117,54,.18)} .btn-ghost{border-color:rgba(117,86,48,.25);color:#4c3c2d} .btn-ghost:hover{border-color:#b97835;background:rgba(185,120,53,.06)} .hero-object{opacity:.96} .object-core{ background: radial-gradient(circle at 43% 37%,#f1d59f 0 5%,#c78543 17%,#8f592f 31%,#ead8bc 48%,rgba(255,255,255,.2) 52%,rgba(255,255,255,0) 67%); box-shadow: 0 40px 90px rgba(120,76,33,.16), inset 0 0 90px rgba(255,255,255,.7); } .core-ring{border-color:rgba(176,117,53,.35);box-shadow:0 0 38px rgba(187,124,57,.12)} .probe{background:linear-gradient(90deg,#9f8a73,#fff5df,#b8793d);box-shadow:0 15px 30px rgba(110,77,44,.18)} .probe:after{background:#f3d49e;box-shadow:0 0 16px rgba(205,146,73,.42)} .orbit{border-color:rgba(154,112,63,.18)} .hero-tag{ color:#8a5b2e; border-color:rgba(172,113,48,.18); background:rgba(255,250,242,.72); box-shadow:0 10px 26px rgba(102,67,35,.05); } .hero-footer{color:rgba(74,61,48,.45)} .hero-note{color:rgba(74,61,48,.45)} .hero-note strong{color:#4c3825} .section-dark{ /* 原来是 #f0e7d8，跟首屏渐变的收尾 #f2eade 只差 RGB 2~6， 两块之间完全看不出分界。压深一档到 #e7dac4， 首屏→01 的分界就出来了；顺带让 02 产品→03 应用 的交替也清晰起来。 */ background:#e7dac4; color:#201c17; } .manifesto .section-kicker,.section-kicker{color:#7a5c3c} .manifesto-line{color:#1f1a15} .outline-text{ color:transparent; -webkit-text-stroke:1px rgba(132,97,57,.46); } .manifesto-sub{color:#776b5d} .section-light{background:#f8f4ec;color:#1d1a16} .section-head p{color:#7b6f62} .section-head h2 span,.technology h2 span,.company h2 span{color:#9a8b79} .products{background:#f8f4ec} .product-card{ box-shadow:0 18px 50px rgba(100,72,43,.07); } .product-card-dark{ background:linear-gradient(145deg,#fcf8f0,#eadfcb); color:#201c17; border:1px solid rgba(133,98,56,.12); } .product-card-blue{ background:linear-gradient(145deg,#c88a47,#e3b36f); color:#fffaf2; } .product-card-white{ background:#efe7da; border:1px solid rgba(125,95,61,.1); } .product-card-dark .card-top, .product-card-dark .card-bottom p{color:rgba(65,53,41,.66)} .product-card-blue .card-bottom p{color:rgba(255,248,235,.78)} .product-card-white .card-bottom p{color:#66594d} .product-card:hover{box-shadow:0 30px 70px rgba(105,75,39,.13)} .scan-line{background:linear-gradient(90deg,transparent,#bc7d39,transparent)} .probe-stack span{background:linear-gradient(90deg,#8f7d67,#fff4dc,#b97b3e);box-shadow:0 15px 26px rgba(92,61,30,.15)} .wafer-disc{ background:repeating-radial-gradient(circle at center,#eee1cb 0 7px,#c89a63 8px 9px); box-shadow:0 30px 70px rgba(106,73,38,.16),inset 0 0 60px rgba(255,255,255,.52); } .wafer-disc:after{background:#b97835} .network-grid{ background-image:linear-gradient(rgba(87,65,43,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(87,65,43,.09) 1px,transparent 1px); } .network-dot{background:#b97835;box-shadow:0 0 0 10px rgba(185,120,53,.08)} .applications{ background:#eee5d6; color:#1f1b17; } .section-head.light h2{color:#1f1b17} .section-head.light p{color:#75695c} /* 客户 2026-10-15：底色改成跟「02 / 产品」里第 2、5 号卡（.product-card-blue） 同一套琥珀渐变。原来是一块米色板加一层深色压底，跟产品区那两张卡站在一起 不搭。压底那层留着但收得很轻 —— 琥珀本身够深，白字压上去就够读。 */ .application-card{ background:linear-gradient(145deg,#c88a47,#e3b36f); border:1px solid rgba(120,74,26,.18); box-shadow:0 18px 50px rgba(120,78,34,.16); } .application-card:after{ background:linear-gradient(to top,rgba(74,42,14,.42) 6%,rgba(74,42,14,.06) 58%,transparent); } .app-content p{color:rgba(255,250,242,.92)} .app-tag{color:rgba(255,244,224,.85)} .app-semiconductor{ background: radial-gradient(circle at 55% 35%,#e9bd7e 0 4%,transparent 5%), radial-gradient(circle at 40% 62%,#ba7b3e 0 2%,transparent 3%), linear-gradient(145deg,#d6c4a8,#ead8bb 50%,#c5ac8d); } .app-automotive{ background: radial-gradient(circle at 36% 30%,#f4d6a1 0 4%,transparent 5%), linear-gradient(140deg,#d7c8b2,#ead9bd,#c9b293); } .app-electronics{background:linear-gradient(135deg,#d7c5a9,#ebdcc5,#c7b195)} .app-harness{ background: radial-gradient(circle at 58% 46%,rgba(240,202,145,.7) 0 7%,transparent 8%), linear-gradient(145deg,#d0b998,#e8d2af,#c4a580); } .technology{ background:#f8f4ec; border-top:1px solid rgba(124,93,55,.08); } .tech-left p{color:#786d61} .tech-right{border-top:1px solid #ddd0bc} .metric{border-bottom:1px solid #ddd0bc} .metric strong{color:#9b8770} .metric b{color:#6f5840} .company{ background:#f2e9db; } .company-copy .large{color:#252019} .company-copy p:not(.large){color:#776b5e} .worldline{border-top-color:#d8c8ae} .worldline-track{background:linear-gradient(90deg,transparent,#c7a676 15%,#c7a676 85%,transparent)} .worldpoint{color:#7b6852} .worldpoint i{border-color:#bb8043;background:#f2e9db;box-shadow:0 0 0 6px rgba(187,128,67,.08)} /* ===== JINQIE CONTENT BLOCKS (added, template design unchanged) ===== */ .nav-right{display:flex;align-items:center;gap:14px} .lang-toggle{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(185,120,53,.34);border-radius:999px} .lang-toggle button{appearance:none;background:none;border:0;cursor:pointer;font:600 11px "Space Grotesk",Arial,sans-serif;letter-spacing:.06em;padding:6px 12px;border-radius:999px;color:#6e4828;transition:.35s var(--ease)} .lang-toggle button:hover{color:#b97835} .lang-toggle button.active{background:#b97835;color:#fffaf1} /* CJK display type needs more leading than the Latin-tuned originals, otherwise full-width glyphs collide; and full-width glyphs are ~1.4x wider than Latin caps, so display sizes are scaled ~0.78x to keep the same visual block. Applies only while lang=zh (English mode is untouched). */ html[lang="zh-CN"] .hero h1{line-height:1.04;font-size:clamp(58px,8.6vw,142px)} html[lang="zh-CN"] .manifesto-line{line-height:1.06} html[lang="zh-CN"] .section-head h2, html[lang="zh-CN"] .technology h2, html[lang="zh-CN"] .company h2{line-height:1.08} html[lang="zh-CN"] .contact h2{line-height:1.06} @media (max-width: 960px){ html[lang="zh-CN"] .hero h1{font-size:15.6vw} } @media (max-width: 620px){ html[lang="zh-CN"] .hero h1{font-size:15.6vw} html[lang="zh-CN"] .manifesto-line{font-size:13.2vw} html[lang="zh-CN"] .section-head h2, html[lang="zh-CN"] .technology h2, html[lang="zh-CN"] .company h2{font-size:13vw} html[lang="zh-CN"] .contact h2{font-size:14vw} } .company-news{margin-top:120px} .company-news-head{display:flex;justify-content:space-between;align-items:baseline;gap:30px;margin-bottom:26px} .company-news-head .text-link{margin-top:0} @media (max-width: 960px){ .lang-toggle{order:-1} } @media (max-width: 620px){ .nav-right{gap:8px} .lang-toggle button{padding:5px 8px;font-size:10px} .company-news{margin-top:70px} .metric span{font-size:20px} } .contact{ background: radial-gradient(circle at 82% 30%,rgba(255,234,196,.32),transparent 24%), linear-gradient(135deg,#b87331,#d39a5e 52%,#b36e2d); } .contact-glow{ background:radial-gradient(circle,rgba(255,242,216,.46),transparent 67%); } .btn-light{background:#fff8ee;color:#81511f} .btn-light:hover{box-shadow:0 20px 60px rgba(104,65,31,.18)} .footer{background:#e8decd;color:#6d6052;border-top:1px solid rgba(113,82,48,.08)} .footer-brand{color:#33291f} .footer-brand span{color:#b97835} /* ========================================================================== HERO PROBE MODEL (替换 hero 原有的球体 / 轨道装饰) 设计画布 720 × 660 单位，1 单位 = 0.01em。 根节点 font-size 取 min(宽度约束, 高度约束)，所以模型永远等比、永远放得下。 全部类名用 pm- 前缀，与模板既有的 .probe / .orbit / .object-core 不冲突。 ========================================================================== */ .hero-probe{ position:relative; width:7.2em;height:6.6em; /* 720 × 660 单位 */ font-size:min(6.25vw,10.606vh); /* = min(45vw/720, 70vh/660) × 100 */ /* 这里放 transform 会被「桌面端」那段覆盖（同特异性、它在后面）， 而且会让手机/平板也长出一层合成层。视差的 transform 只在 ≥961px 合成。 */ /* 黄铜圆柱的横向打光：左暗 → 高光 → 反光 → 右暗 */ --pm-cyl:linear-gradient(90deg, #4a3420 0%,#6d4e2c 6%,#a67c44 16%,#d0aa6e 27%,#ecd6a8 36%,#fdf3dd 42%, #edd7a9 49%,#d4b075 60%,#b98d4e 72%,#966f3a 82%,#6f512c 92%,#4a3420 100%); --pm-cyl-soft:linear-gradient(90deg, #5d4227 0%,#8a6538 10%,#bd8f52 24%,#edd39d 36%,#fff8e8 42%, #e8c894 55%,#c1945a 72%,#8e6a3a 88%,#5d4227 100%); --pm-pin:linear-gradient(90deg,#6f512c,#fffdf5 46%,#966f3a); } /* ---- PCB ---- */ .pm-board{ position:absolute;left:1.35em;bottom:0.2em; width:5em;height:3.1em; transform:perspective(9em) rotateX(50deg); transform-origin:center bottom; border-radius:0.1em; background: radial-gradient(ellipse 46% 62% at 30% 44%,rgba(120,196,148,.16),transparent 68%), radial-gradient(ellipse 34% 50% at 78% 62%,rgba(120,196,148,.12),transparent 70%), linear-gradient(155deg,#3c8259 0%,#2e6b4a 38%,#22553a 70%,#183f2b 100%); box-shadow: 0 0.30em 0.50em rgba(72,53,28,.22), 0 0 0 1px rgba(255,255,255,.09) inset, 0 0.02em 0 rgba(255,255,255,.16) inset; } .pm-board::after{ /* 板厚 */ content:"";position:absolute;left:0;right:0;bottom:-0.08em;height:0.08em; border-radius:0 0 0.1em 0.1em; background:linear-gradient(180deg,#123322,#0b2317); } .pm-trace{ position:absolute;height:0.04em;border-radius:0.02em; background:linear-gradient(90deg,rgba(214,170,102,.18),rgba(243,214,158,.85),rgba(214,170,102,.18)); box-shadow:0 0 0.07em rgba(240,208,148,.3); } .pm-t1{left:5%;right:5%;bottom:22%;transform:rotate(-2deg)} .pm-t2{left:9%;right:22%;bottom:44%;transform:rotate(-2deg);opacity:.6} .pm-t3{left:16%;right:6%;bottom:66%;transform:rotate(-2deg);opacity:.4} .pm-pad{ position:absolute;width:0.3em;height:0.3em;border-radius:0.06em; background:linear-gradient(140deg,#fbecca,#d3a463 44%,#a2763b); box-shadow:0 0 0.13em rgba(240,208,148,.55),0 1px 2px rgba(0,0,0,.25); } /* 探针落点焊盘：坐标由实测解算得出，改探针位置后需重算 */ .pm-pad-810{bottom:32.71%;left:17.33%} .pm-pad-823{bottom:45.2%;left:77.52%} .pm-pad-c1{bottom:38%;left:30%;transform:scale(.7)} .pm-pad-c2{bottom:20%;left:48%;transform:scale(.7)} .pm-pad-c3{bottom:56%;left:62%;transform:scale(.62)} .pm-via{position:absolute;width:0.09em;height:0.09em;border-radius:50%; background:radial-gradient(circle at 40% 35%,#e6c68d,#8a6538 65%,#4f3720); box-shadow:0 1px 2px rgba(0,0,0,.3)} .pm-v1{bottom:34%;left:22%} .pm-v2{bottom:50%;left:60%} .pm-v3{bottom:70%;left:36%} .pm-v4{bottom:12%;left:68%} .pm-ufl{ /* 插接件 (U.FL) */ position:absolute;bottom:5%;left:1.5%;width:0.46em;height:0.38em;border-radius:0.06em; background:linear-gradient(155deg,#f7e6bf,#c99a5a 42%,#9c7139 74%,#6f4d2a); box-shadow:0 0.03em 0.08em rgba(0,0,0,.35),0 0 0 1px rgba(255,240,210,.3) inset; } .pm-ufl::before{ content:"";position:absolute;inset:22% 26%;border-radius:0.05em; background:linear-gradient(160deg,#fdf3dd,#c99a5a 55%,#7e5b33); box-shadow:0 1px 0.03em rgba(0,0,0,.4); } .pm-ufl::after{ content:"";position:absolute;left:50%;top:50%;width:0.09em;height:0.09em;margin:-0.045em 0 0 -0.045em; border-radius:50%; background:radial-gradient(circle at 36% 30%,#fffdf5,#d9b478 52%,#8a6538); box-shadow:0 0 0.06em rgba(255,240,210,.5); } /* ---- 黄铜圆柱的横向打光 ---- */ .pm-810,.pm-823{position:absolute;display:flex;flex-direction:column;align-items:center} .pm-seg{flex:none;position:relative;z-index:1} .pm-cap::before{ /* 圆柱端面 */ content:"";position:absolute;left:0;right:0;top:0;height:0.09em; border-radius:50%;z-index:2; background:radial-gradient(circle at 50% 50%,#fffaf0,#e0b478 55%,#a97a3d 100%); } /* ---- JQ-HFP-810：细长 ---- */ .pm-810{left:2.34em;bottom:0.88em} .pm-810-head{width:0.27em;height:0.46em;border-radius:0.05em 0.05em 0.02em 0.02em;background:var(--pm-cyl)} .pm-810-head i{ /* 顶部侧向开槽 */ position:absolute;right:0.045em;top:0.116em;width:0.08em;height:0.14em;border-radius:0.02em;z-index:3; background:linear-gradient(90deg,#3d2b17,#6d4e2c 40%,#a67c44); box-shadow:inset 0 0 0.03em rgba(0,0,0,.6); } .pm-810-barrel{width:0.27em;height:2.55em;background:var(--pm-cyl)} .pm-810-step{width:0.32em;height:0.12em;border-radius:0.03em;background:var(--pm-cyl-soft); box-shadow:0 0.03em 0.08em rgba(92,61,30,.24)} .pm-810-mid{width:0.22em;height:0.93em;background:var(--pm-cyl)} .pm-810-collar{width:0.27em;height:0.12em;border-radius:0.03em;background:var(--pm-cyl-soft)} .pm-810-stem{width:0.15em;height:0.59em;background:var(--pm-cyl)} .pm-810-taper{width:0.15em;height:0.30em;background:var(--pm-cyl); clip-path:polygon(0 0,100% 0,67% 100%,33% 100%)} .pm-810-needle{width:0.05em;height:0.30em;background:var(--pm-pin)} .pm-810-point{width:0.05em;height:0.23em;background:var(--pm-pin); clip-path:polygon(0 0,100% 0,50% 100%)} /* ---- JQ-HFP-823：短粗 + 安装法兰 ---- */ .pm-823{left:4.65em;bottom:1.08em} /* 顶上原来是「中空杯口」：一块 0.34em 宽 0.19em 高的深色椭圆压在端面上。 用的是 circle 渐变套在扁椭圆里，暗心被推到左上，读出来不是「一个圆孔」， 而是像被磕掉一块 —— 客户说这个缺口很违和。去掉，回到跟 810 一样的 实心柱顶，端面高光由共用的 .pm-cap::before 给。 */ .pm-823-socket{width:0.50em;height:0.62em;border-radius:0.06em 0.06em 0.03em 0.03em;background:var(--pm-cyl)} .pm-823-cup{width:0.39em;height:0.14em;border-radius:0.03em;background:var(--pm-cyl-soft)} .pm-823-flange{width:1.10em;height:0.23em;border-radius:0.07em; background:linear-gradient(180deg,#f7e6bf,#c99a5a 40%,#a3763f 72%,#6f512c); box-shadow:0 0.05em 0.10em rgba(92,61,30,.26)} .pm-823-flange i{ /* 两个安装孔 */ position:absolute;top:0.06em;width:0.12em;height:0.12em;border-radius:50%; background:radial-gradient(circle at 42% 34%,#4a3420,#7e5b33); box-shadow:inset 0 1px 0.03em rgba(0,0,0,.65),0 1px 0 rgba(255,240,210,.45)} .pm-823-flange i:nth-child(1){left:0.15em} .pm-823-flange i:nth-child(2){right:0.15em} .pm-823-body{width:0.50em;height:1.26em;background:var(--pm-cyl)} .pm-823-shoulder{width:0.50em;height:0.30em;background:var(--pm-cyl); clip-path:polygon(0 0,100% 0,72% 100%,28% 100%)} .pm-823-stem{width:0.17em;height:0.52em;background:var(--pm-cyl)} .pm-823-taper{width:0.17em;height:0.28em;background:var(--pm-cyl); clip-path:polygon(0 0,100% 0,68% 100%,32% 100%)} .pm-823-point{width:0.06em;height:0.25em;background:var(--pm-pin); clip-path:polygon(0 0,100% 0,50% 100%)} /* 接触影 */ .pm-shadow{position:absolute;border-radius:50%;filter:blur(0.04em); background:radial-gradient(ellipse,rgba(14,34,22,.6),transparent 72%)} /* ---- hero 规格标签：改到模型内部，随模型一起缩放 ---- */ /* 注意：标签自身设了 font-size，标签上的 em 会按它自己的字号解析， 所以定位一律用 %（相对 .hero-probe 的 720×660），字号/内边距才用 em。 */ .hero-probe .hero-tag{ font-family:"Space Grotesk",Arial,sans-serif;font-size:0.125em;font-weight:600; letter-spacing:.12em;white-space:nowrap; padding:0.89em 1.07em;border-radius:1.07em; } .hero-probe .tag-a{left:83.33%;right:auto;top:24.24%;bottom:auto} /* 12 GHz → 射频探针 823 */ .hero-probe .tag-b{left:20.14%;right:auto;top:28.79%;bottom:auto} /* ±3000 A → 大电流 810 */ .hero-probe .tag-c{left:2.78%;right:auto;top:auto;bottom:15.91%} /* Ø0.15→1mm → 板面落点 */ /* ===== 响应式：模型挪到 h1 右手边那块空档 ===== 为什么在右边、不在下面： 1) h1 每行只有 2~3 个字（实测最宽一行到「文案左边距 + 0.44×屏宽」就断了）， 从「眉标底下」一直到「正文顶上」的右上角整块是空的。模型放这儿正好填空， 也不必缩小 —— 原来塞右下角是被正文挤的，不是那儿好看。 2) ≤620 时 .hero-copy{left:18px;right:18px}，正文和按钮都是满宽的， 所以模型放下面**必然**压字，只能靠 opacity 硬扛；放右边则从几何上让开了。 实测各段间距（在整段宽度区间里都是常数，所以可以写死进 calc）： 眉标高 16px；h1 盒顶 = copy顶 + 42；h1 盒高 = 0.487×屏宽（永远 3 行）； 正文顶 = h1 盒底 + 28。 于是空档 = 高 (0.487×屏宽 + 38) × 宽 (屏宽 − h1右缘 − 左右留白)。 高度那一项永远比宽度那项宽裕，所以字号只由宽度定 —— 跟 h1 一样是「跟宽度走」的， 矮屏反而不吃亏（原来按 vh 定尺寸，900×1000 / 960×800 这种宽而矮的窗口必撞）。 上下位置：不顶在空档上沿，而是**把模型居中到 h1 那一段**上。h1 高 0.487×屏宽、 模型高 6.6em = 6.6×(0.06528×屏宽−1.389px)，两者都跟宽度成正比，于是 「模型顶 = h1 顶 + (h1 高 − 模型高)/2」里的屏宽项几乎抵消，只剩一个常数： ≤620 → 文案顶 + 55px ；621-960 → 文案顶 + (46.6px + 2.81vw) （两式都是把上面的式子代入化简的结果，不是凑出来的。） */ @media (max-width: 960px){ /* width/height:auto —— 盒子贴着模型。模板原来是 width:45vw;height:70vh + place-items:center，模型被居中后会往上抬 (70vh−模型高)/2，白占一截。 盒子收成实际尺寸后，top/right 才是模型真正的上边和右边。 */ .hero-object{left:auto;right:2vw;top:calc(26% + 46.6px + 2.81vw);bottom:auto;width:auto;height:auto;opacity:.62} /* (98vw − 7vw[文案左边距] − 44vw[h1 最宽行] − 10px[间隙]) / 7.2em */ .hero-probe{font-size:calc(6.528vw - 1.389px)} .hero-probe .hero-tag{font-size:0.22em} /* 标签相对变大后会压到 810 针管上，往左让开 */ .hero-probe .tag-b{left:7%} } @media (max-width: 620px){ /* (97vw − 18px[文案左边距] − 44vw − 10px) / 7.2em */ .hero-object{right:3vw;top:calc(23% + 55px)} .hero-probe{font-size:calc(7.361vw - 3.889px)} .hero-probe .hero-tag{display:none} } /* ===== 桌面端：布局重排（≥961px，手机/平板完全不受影响） ===== 1) 顶部留白收窄：hero 文案和模型一起从 24% 提到 17%。 2) 模型尺寸跟着「左侧文案块」走，而不是只跟 vw 走。 之前只按 vw 缩放，文案块里却有眉标/正文/按钮这些固定高度的部分， 所以大屏上模型会明显高出文案一截（1920 下顶端冒 51px、底端还多 16px）。 文案块高（眉标顶→按钮底）实测 = 2.44 × clamp(72px,11vw,180px) + 209.4px └ h1 三行 × line-height .82 模型可见高 = 6.2785 × 字号（0.1215em 是画布顶部留白，6.4em 是板子下沿）。 这里取 0.85 倍：不顶满整块文案，上半段那两根细探针杆就不会显得太空， 然后整体在文案块里垂直居中。 */ @media (min-width: 961px){ .hero-copy{top:17%} .hero-object{top:17%} /* 跟文案同一个顶，模型才有统一锚点 */ .hero-probe{ position:absolute; left:50%; top:0; /* 锚在 .hero-object 顶（也就是 17vh） */ /* 字号 = 0.85 × 文案块高 / 6.2785 = 0.3303 × clamp(...) + 28.35px translateY = 文案块高/2 − 3.26075em，3.26075em 是模型可见区的中心到画布顶 */ font-size:calc(28.35px + clamp(23.78px, 3.633vw, 59.45px)); transform:translateX(-50%) translateY(calc(1.22 * clamp(72px, 11vw, 180px) + 104.7px - 3.26075em)) translate(var(--pm-px,0px),var(--pm-py,0px)); } /* 英文正文比中文多折一行（3 行 vs 2 行，+27.2px），文案块整体高 27.2px， 所以字号补 27.2×0.85/6.2785 ≈ 3.68px、居中偏移补 13.6px。 */ html[lang="en"] .hero-probe{ font-size:calc(32.03px + clamp(23.78px, 3.633vw, 59.45px)); transform:translateX(-50%) translateY(calc(1.22 * clamp(72px, 11vw, 180px) + 118.3px - 3.26075em)) translate(var(--pm-px,0px),var(--pm-py,0px)); } } /* ========================================================================== 「技术，触手可及。」标题 → 产品卡片 的间距 模板原来 .section-head{margin-bottom:80px}，标题和卡片之间空得有点散， 这里收到 48px。只作用于 products 板块，applications 板块仍是 80px （那里标题和卡片的关系不一样，没跟着改；要一起收就说一声）。 ========================================================================== */ .products .section-head{margin-bottom:48px} /* ========================================================================== 产品卡：客户 6 类产品的 CSS 绘制图 -------------------------------------------------------------------------- 客户没提供产品照片（assets/ 里只有一张 logo），所以这 6 张图全部用纯 CSS 搭， 跟 hero 那个探针模型同一个思路：不依赖图片资源、任意分辨率都清晰、 也不会出现图裂或加载慢。以后客户给了实拍图，把 .product-visual 里的 结构换成 即可，外层盒子的尺寸不用动。 卡片布局沿用模板的 .product-stage{grid-template-columns:repeat(3,1fr)}， 6 张卡自然排成 3 列 × 2 行，不需要改栅格。 ========================================================================== */ /* 参数徽标 —— 每张卡底部的关键技术指标。 客户 PPT 里的真参数（120μm / 75A / 4.3mm / FAKRA…），比形容词有说服力。 */ .card-spec{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:999px; font-size:11px;letter-spacing:.04em; background:rgba(255,255,255,.13);color:rgba(255,255,255,.9)} /* 客户：第一列的参数徽标看不见（01 最小120μm、04 IGBT 62mm）。 浅金渐变卡（.product-card-dark 在主题里被改成 #fcf8f0→#eadfcb）上， 基础样式的「白 13% 底 + 白 90% 字」等于白底白字。跟第三列（平米色卡） 用同一套暖棕。 */ .product-card-white .card-spec, .product-card-dark .card-spec{background:rgba(124,88,44,.15);color:#6b5334} /* 01 半导体微针 —— 一排高度起伏的细针（微间距接触的直观表达） */ .pv-needles{display:flex;gap:10px;align-items:flex-end;transform:rotate(-9deg)} .pv-needles i{display:block;width:3px;border-radius:2px; background:linear-gradient(180deg,#f8e6bf,#c98b45 55%,#8a5527); box-shadow:0 0 14px rgba(236,187,107,.3)} .pv-needles i:nth-child(1){height:118px} .pv-needles i:nth-child(2){height:150px} .pv-needles i:nth-child(3){height:186px} .pv-needles i:nth-child(4){height:206px} .pv-needles i:nth-child(5){height:186px} .pv-needles i:nth-child(6){height:150px} .pv-needles i:nth-child(7){height:118px} /* 02 ICT / FCT —— 宣传册里抠的真图（JQ100，1.00mm 间距标准型）。 原来是一板 CSS 画的触点，客户要换成一款真探针、倾斜着放。 -12° 跟 01(-9°) 是同一套倾斜语言（04/05/06 客户要求摆正，不在此列）。 卡片底色是暖橙渐变、探针也是金色，两者明度接近，所以给一层深色投影 把它从底上拔起来，顺便落个地。 */ .pv-ict{transform:rotate(-12deg)} .pv-ict img{display:block;height:300px;width:auto; filter:drop-shadow(0 22px 26px rgba(64,28,0,.45))} /* 06 更多定制化产品 —— 客户给的 D3y 定制板。 板子是斜着往右上抬的轴测视角，这里不用 rotate，用 matrix 做投影： 板面在「板材平面」里画（X 沿板长 0~300、Y 从远边 0 到近边 46）， matrix(1, -.23, 0, 1, 0, 93) a=1 板长 1:1 落在屏幕上，b=-.23 是「越往右越高」那条上升线，d=1 表示 板宽方向在屏幕上就是竖直的。参考图远边实测 -0.32、近边 -0.25，两条边 不平行（带透视收分），matrix 是仿射做不出来，所以取了个偏缓的值：把 总高压到 118px，长高比 300/118=2.54，跟参考图的 289/109=2.65 接近。 （上一版取 -.25，算出来 2.37，叠在参考图旁边看就是又短又胖。） 配色两处来自参考图取的色： - **板厚（端面）才是最亮的青**（#0ad0cf 一档），板面本身是中性偏暗的 青绿（#047272 一档）。 - 黑面板四周一圈银灰描边（#c8c7c4），近侧那条还要宽一点。 近侧那条露出来的青绿带只占板宽的 27%（面板 61% + 银灰 6%），这个比例 是照参考图逐像素量出来的，宽一点整块板就显得笨。 */ .pv-pcb{position:relative;width:300px;height:150px} .pcb-plane{position:absolute;left:0;top:0;width:0;height:0; transform-origin:0 0;transform:matrix(1,-.23,0,1,0,93)} .pcb-plane i{position:absolute;display:block} /* 板厚：整层往近边挪 3（平面里 +Y 就是屏幕上往下），先画，被板面盖住， 只在近边和两端露出一条亮青 —— 这条亮青是参考图里最跳的一笔。 */ .pcb-edge{background:linear-gradient(180deg,#0cd6d2,#00a0a6)} .pcb-edge.e-t{left:0;top:3px;width:30px;height:46px; clip-path:polygon(100% 0,100% 100%,0 50%)} .pcb-edge.e-a{left:30px;top:3px;width:270px;height:46px} .pcb-edge.e-c{left:196px;top:39px;width:104px;height:20px} /* 板面：中性偏暗的青绿。上面那截反正被黑面板盖住，渐变只为了让近侧那条 露出面收一点暗边，不至于整条平到底。 收口段（f-t）**不用亮青** —— 参考图里亮青是端面，正面还是普通板色。 */ .pcb-face{background:linear-gradient(180deg,#0a4a4a 0%,#0a4a4a 44%, #036a6a 61%,#037a7a 66%,#037a7a 96%,#046060 100%)} .pcb-face.f-t{left:0;top:0;width:30px;height:46px; clip-path:polygon(100% 0,100% 100%,0 50%); background:linear-gradient(180deg,#0a6d6d 0%,#068080 55%,#00b4b4 100%)} .pcb-face.f-a{left:30px;top:0;width:270px;height:46px} /* 右三分之一朝观众鼓出来的一块：近边比主板低 10。颜色必须和 f-a 近侧那条 完全一样，否则两条渐变在交界处会出现一道横缝，看着像两块板拼的。 */ .pcb-face.f-c{left:196px;top:36px;width:104px;height:20px;background:#037a7a} /* 台阶的端面：板上 X 恒定的那一条窄立面，比板面暗一档，台阶才立得起来 */ .pcb-step{left:191px;top:46px;width:6px;height:10px;background:#024a52} /* 近侧那条靛蓝的缝：参考图右半段最扎眼的一笔 */ .pcb-seam{height:2px;background:#332fe0;opacity:.6} .pcb-seam.s-a{left:30px;top:44px;width:270px} .pcb-seam.s-c{left:196px;top:54px;width:104px} /* 黑面板：参考图 #363636 中性深灰，四周一圈银灰描边 —— 没有这条银边整块 板就糊成一团黑。近侧那道三像素的落影就是参考图里更宽的那条银灰。 */ /* 银灰描边单独一块垫在面板下面（大两圈），不用 border —— 小数边框在 transform 过的元素上会抖出一排锯齿，近看很难看。 */ .pcb-trim{left:60px;top:0;width:194px;height:32px;background:#c8c7c4} .pcb-panel{background:#363636} .pcb-panel.pa{left:62px;top:0;width:190px;height:30px} /* 右端那块白钢板：压在板子远侧，上面两个铜螺柱 */ .pcb-plate{left:252px;top:0;width:48px;height:20px; background:linear-gradient(166deg,#fdfdfd,#cfcfcd);border-radius:1px; box-shadow:0 3px 0 rgba(120,120,116,.5)} .pcb-plate:before,.pcb-plate:after{content:"";position:absolute;border-radius:50%; background:radial-gradient(circle,#6f5a2e 24%,#cbb075 40%,#8d763c 64%,transparent 68%)} .pcb-plate:before{left:7px;top:5px;width:9px;height:9px} .pcb-plate:after{left:27px;top:6px;width:9px;height:9px} /* 右上方那个金属挂钩：从远边探出去的一截弹性片 */ .pcb-hook{left:258px;top:-16px;width:30px;height:18px; background:linear-gradient(160deg,#fbfbfa,#b9b9b6); clip-path:polygon(0 100%,0 46%,58% 0,100% 26%,74% 62%,74% 100%)} /* 左端那块带孔的白色压板，骑在远边上 */ .pcb-brk{left:24px;top:-8px;width:30px;height:15px; background:linear-gradient(166deg,#fdfdfd,#d2d1cd);border-radius:1px; box-shadow:0 0 0 1px rgba(96,96,90,.45),0 3px 0 rgba(120,120,116,.5)} .pcb-brk:before{content:"";position:absolute;left:15px;top:4px;width:8px;height:8px; border-radius:50%;background:radial-gradient(circle at 38% 34%,#d4624e,#5c2419)} /* 红按钮（参考图板面上最饱和的一处） */ .pcb-btn{left:28px;top:32px;width:15px;height:9px;border-radius:50%; background:radial-gradient(circle at 38% 32%,#e2695c,#c0392b 60%,#8c2318); box-shadow:0 1px 0 rgba(0,44,48,.45)} /* 左尖上的金手指：收口那段只有半宽，所以它跟着往中间靠 */ .pcb-finger{left:8px;top:19px;width:15px;height:9px; background:repeating-linear-gradient(90deg,#d9b268 0 2px,#8a6a30 2px 3.4px); clip-path:polygon(0 26%,100% 0,100% 100%,0 74%)} /* 近边上那一排小件：一颗蓝的排线座、一颗蓝 IC、几颗贴片、一排金引脚 */ .pcb-conn{left:60px;top:34px;width:32px;height:7px;border-radius:1px; background:linear-gradient(180deg,#4a48c0,#2c2a86)} .pcb-ic{left:98px;top:34px;width:14px;height:7px;border-radius:1px; background:linear-gradient(180deg,#4a5f86,#232f45)} .pcb-comp{background:#2b2925;border-radius:1px; box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} .pcb-comp.c1{left:82px;top:36px;width:11px;height:6px} .pcb-comp.c2{left:118px;top:36px;width:13px;height:6px} .pcb-comp.c3{left:142px;top:34px;width:10px;height:7px} .pcb-pins{left:54px;top:43px;width:62px;height:3px; background:repeating-linear-gradient(90deg,#d9b268 0 2px,transparent 2px 4.6px)} /* 薄荷绿的焊盘：近边上一串，右端鼓出来的那块近边上也有一串 */ .pcb-pad{background:linear-gradient(180deg,#5ee3b0,#25a578);border-radius:1px; box-shadow:inset 0 1px 0 rgba(226,255,244,.6)} .pcb-pad.g1{left:46px;top:42px;width:9px;height:4px} .pcb-pad.g2{left:126px;top:42px;width:9px;height:4px} .pcb-pad.g3{left:158px;top:42px;width:9px;height:4px} .pcb-pad.g4{left:210px;top:50px;width:9px;height:4px} .pcb-pad.g5{left:250px;top:50px;width:9px;height:4px} .pcb-pad.g6{left:34px;top:42px;width:9px;height:4px} /* 这张画布是固定 300px 宽，三列挤压区（961~1300）里 .product-visual 只剩 203~298px，会被卡片的 overflow:hidden 切掉两端，所以按档缩一下。 只缩绘制、不影响占位，不会把卡片撑开。 */ @media (min-width:961px) and (max-width:1100px){.pv-pcb{transform:scale(.66)}} @media (min-width:1101px) and (max-width:1300px){.pv-pcb{transform:scale(.78)}} @media (max-width:620px){.pv-pcb{transform:scale(.78)}} /* 04 射频 —— 浮动测试模组（浮动治具）。 画法沿用 05 实验台 / 06 设备那两张：绝对定位的重块 + 金铜渐变 + 一点倾角。 零件和坐标是从客户给的实物照片上量的（599x417 那张），按 0.4173 统一缩放 映射到 250x174 的画布，所以高低关系和实物一致。画布比例（1.44）也跟着 实物走 —— 硬套 05/06 的 230x210 会把这个矮宽的方块拉瘦。 三处是照着实物照片调的，不是随手给的： - 圆角一律压到 2~4px。第一版按 05/06 的习惯给了 5~14px， 出来一排药丸，不像机加工件 —— 实物全是硬边。 - 导轨从滑块底下一直通到右块（不是单独一块小垫片）。 - 夹块脸上点四个螺丝孔。照片上那四个点很清楚，有它们才像治具。 颜色上有一处刻意的取舍：照片里夹块和导轨是银白的（不锈钢 / 镀铬）， 这套视觉全是金铜色阶，插两块冷灰进去会很突兀。所以把这两处放到色阶 最亮的一端当「亮金属」，铝件压到中间调、暗件压到最暗，靠明度差拉层次。 */ /* 04/05/06 三张摆正，不倾斜 —— 客户要的（01/02/03 那三张保持原来的倾角） */ .pv-rf{position:relative;width:250px;height:174px} .pv-rf i{position:absolute;display:block} /* 底座（两级台阶）+ 三只脚 */ .rf-base{left:34px;width:214px;bottom:16px;height:30px;border-radius:2px; background:linear-gradient(180deg,#cca06a,#633f1c)} .rf-plinth{left:34px;width:158px;bottom:10px;height:9px;border-radius:2px; background:linear-gradient(180deg,#b07a3c,#5a3a1c)} .rf-foot{width:8px;height:6px;bottom:4px;background:#5a3a1c} .rf-foot.f1{left:60px}.rf-foot.f2{left:116px}.rf-foot.f3{left:196px} /* 线性滑轨（亮条，从滑块底下通到右块） + 滑块（照片里最暗的一块） */ .rf-rail{left:86px;width:118px;bottom:28px;height:9px;border-radius:2px; background:linear-gradient(180deg,#fff8e6,#c98b45)} .rf-car{left:73px;width:64px;bottom:37px;height:26px;border-radius:3px; background:linear-gradient(180deg,#8a5527,#33200c)} /* 中块（夹块底下那块）和右块 */ .rf-mid{left:54px;width:90px;bottom:46px;height:56px;border-radius:3px; background:linear-gradient(180deg,#d9b075,#6c4a29)} .rf-rgt{left:198px;width:50px;bottom:46px;height:52px;border-radius:3px; background:linear-gradient(180deg,#d9b075,#6c4a29)} /* 弹簧：中块和右块之间横着盘，两头正好顶住。跟爆炸图那截弹簧一样， 横带子要密到能读出一圈一圈，稀疏的大色块会看成一摞圆盘。 */ .rf-spr{left:144px;width:54px;bottom:62px;height:30px;border-radius:4px; background:repeating-linear-gradient(100deg, #4a3018 0 1.8px,#f7e6c2 1.8px 4.6px,#b07a3c 4.6px 6.4px)} /* 夹块：最高的那块。照片上它脸上有四个螺丝孔，点出来才像治具 */ .rf-clamp{left:50px;width:59px;bottom:104px;height:67px;border-radius:3px; background:linear-gradient(160deg,#fff8e6,#e3bd85 42%,#c98b45)} .rf-clamp:before{content:"";position:absolute;left:13px;top:15px;width:7px;height:7px; border-radius:50%;background:#7d4c25;box-shadow:26px 0 0 #7d4c25, 0 36px 0 #7d4c25,26px 36px 0 #7d4c25} /* 探针：横穿夹块的圆柱，右端伸到右块边上，左端细一截。 端头给 1px 圆角 —— 圆柱侧看端面是一条竖线，给药丸圆角就不像金属棒了。 */ .rf-probe{left:5px;width:162px;height:23px;bottom:116px;border-radius:1px; background:linear-gradient(180deg,#f7e6c2,#a56b35 58%,#7d4c25)} /* 探针上那两处台阶：左端粗一截的滚花头，中段一个凸环。 照片上这两处最显眼，是它们让这根棒读成「针」而不是一块板。 */ .rf-tip{left:5px;width:35px;height:18px;bottom:119px;border-radius:1px; background:linear-gradient(180deg,#fbeed4,#8a5527)} .rf-collar{left:112px;width:11px;height:29px;bottom:113px;border-radius:1px; background:linear-gradient(180deg,#fff8e6,#b07a3c 55%,#6c4a29)} /* -------------------------------------------------------------------------- 05 IGBT 实验台与工装治具 / 06 带视觉拍照的自动化探针生产设备 两张都改成按客户发的实物图建模（原来 05 是「双立柱+横梁」的通用台架、 06 是「立式机架+镜头」的抽象示意，都不是他们真实的机器）。 尺寸都是从参考图上量的：把机器在图上框出来，取一个统一系数缩放到画布， 再换算成「从底边往上量」。所以两台机器的高低关系和实物一致： 05 是台瘦高的压机（画布 145x232），06 是台矮胖的整机（190x232）。 两处刻意的取舍： - 画布都卡在 232px 高。.product-visual 实测只有 210~242px 高 （桌面 236、≤620 是 210），超过就会压到底下的文案上。 ≤620 再统一缩到 0.86，见文件末尾。 - 06 上那两个彩色件（顶部三色灯、空压机电机）用了真的信号色， 没并进金铜色阶 —— 三色灯的意义就在颜色上，全画成金色等于没画。 但都调低了饱和度（#b5544a / #d9a44e / #7d8c5a），免得跳出整套视觉。 -------------------------------------------------------------------------- */ /* 05 IGBT 实验台 —— 深色机柜 + 菱形散热网 + Z 轴立柱 + 顶端电机 + 夹具 */ .pv-bench{position:relative;width:145px;height:232px} .pv-bench i{position:absolute;display:block} .bench-body{left:0;width:145px;bottom:0;height:53px;border-radius:2px; background:linear-gradient(180deg,#5c3f24,#140c04)} /* 菱形散热网：旋转 45° 的方块 + 两组斜线交织成网 */ /* 网面用浅金底 + 深色斜格，压在深机柜上才看得见 */ .bench-vent{width:27px;height:27px;bottom:12px;transform:rotate(45deg);border-radius:2px; background: repeating-linear-gradient(45deg,rgba(12,7,1,.9) 0 1.2px,transparent 1.2px 4.4px), repeating-linear-gradient(-45deg,rgba(12,7,1,.9) 0 1.2px,transparent 1.2px 4.4px), linear-gradient(160deg,#f0d5a4,#b07a3c); box-shadow:inset 0 0 0 2px rgba(20,12,4,.55)} .bench-vent.v1{left:15px}.bench-vent.v2{left:58px} .bench-lamp{left:108px;width:12px;height:12px;bottom:11px;border-radius:50%; background:radial-gradient(circle at 40% 34%,#fbeed4,#c98b45 58%,#7d4c25); box-shadow:0 0 14px rgba(236,187,107,.5)} .bench-key{left:110px;width:9px;height:9px;bottom:30px;border-radius:50%; background:radial-gradient(circle at 38% 32%,#f7e6c2,#8a5527 62%,#4a3018)} /* 台面：比机柜亮一档，左右各出一点边 */ .bench-top{left:-3px;width:151px;bottom:49px;height:8px;border-radius:2px; background:linear-gradient(180deg,#f0d5a4,#a56b35)} /* Z 轴立柱：亮面在左三分之一，做出铝型材的圆柱感 */ /* 立柱用停点式渐变而不是平滑过渡 —— 平滑的高光带看着像圆锥， 停点画法才有「一根等宽的型材」的感觉 */ .bench-column{left:59px;width:26px;bottom:99px;height:102px;border-radius:2px; background:linear-gradient(90deg, #7d5a34 0 2px,#fff3da 3px 9px,#e3bd85 10px 18px,#b07a3c 19px 23px,#4a3018 24px)} .bench-fix{left:49px;width:44px;bottom:66px;height:34px;border-radius:2px; background:linear-gradient(180deg,#c98b45,#5a3a1c)} .bench-fix:after{content:"";position:absolute;left:5px;right:5px;top:13px;height:7px; border-radius:1px;background:linear-gradient(180deg,#fff8e6,#e3bd85)} .bench-motor{left:62px;width:21px;bottom:198px;height:31px;border-radius:3px 3px 2px 2px; background:linear-gradient(90deg,#140c04 0 3px,#8a6844 4px 8px,#4a3018 9px 17px,#140c04 18px)} .bench-motor:after{content:"";position:absolute;left:4px;right:4px;top:-4px;height:5px; border-radius:2px;background:#4a3018} /* 06 自动化设备 —— 白色整机 + 两扇观察窗 + 三色灯 + 控制面板 + 显示器键盘 + 脚边空压机 */ .pv-machine{position:relative;width:190px;height:232px} .pv-machine i{position:absolute;display:block} /* 脚轮（先画，压在机身下面） */ .mach-cast{width:7px;height:7px;bottom:0;border-radius:50%;background:#3a2410} .mach-cast.c1{left:58px}.mach-cast.c2{left:110px}.mach-cast.c3{left:166px} /* 空压机：横卧的储气罐 + 顶上红色的泵头（照片里就这一处红） */ .mach-tank{left:0;width:68px;bottom:32px;height:29px;border-radius:8px; background:linear-gradient(180deg,#5a3a1c,#180f06)} .mach-pump{left:16px;width:30px;height:21px;bottom:59px;border-radius:4px; background:linear-gradient(180deg,#b5544a,#57200f)} .mach-pump:after{content:"";position:absolute;left:5px;right:5px;top:-3px;height:4px; border-radius:2px;background:#7d8c5a} /* 显示器 + 键盘 */ .mach-kbd{left:8px;width:50px;bottom:95px;height:7px;border-radius:2px;background:#4a3018} .mach-mon{left:0;width:48px;bottom:104px;height:36px;border-radius:3px; background:linear-gradient(180deg,#4a3018,#1c1108)} .mach-scr{left:4px;width:40px;bottom:108px;height:28px;border-radius:2px; background:linear-gradient(155deg,#fff3da,#e3bd85 55%,#b07a3c)} /* 机身：正白，右侧面压暗一档做体积 */ /* 机身提亮到接近白 —— 参考图上它是台白机器，压成米黄就糊进卡片底色里了。 再给一圈极淡的描边，不然白色跟浅底也分不开。 */ .mach-body{left:50px;width:132px;bottom:2px;height:193px;border-radius:3px; background:linear-gradient(180deg,#fffdf6,#f7ecd8 58%,#e8d7b8); box-shadow:inset 0 0 0 1px rgba(124,88,44,.22),0 6px 18px rgba(105,75,39,.13)} .mach-side{left:170px;width:14px;bottom:2px;height:193px;border-radius:0 3px 3px 0; background:linear-gradient(90deg,#c98b45,#8a5527)} /* 上下两段的接缝 */ .mach-seam{left:50px;width:132px;bottom:72px;height:2px;background:rgba(124,88,44,.4)} /* 两扇观察窗：深色玻璃 + 一圈亮边 */ /* 观察窗往下降一档：参考图上窗顶离机身上沿还留了约两成的空 */ .mach-win{width:42px;bottom:112px;height:62px;border-radius:2px; background:linear-gradient(180deg,#3a2410,#140c04); box-shadow:inset 0 0 0 2px rgba(200,168,120,.6),0 0 0 4px rgba(124,88,44,.13)} .mach-win.w1{left:62px}.mach-win.w2{left:112px} /* 窗里透出来的机构：一竖一横 */ .mach-rod{left:82px;width:4px;bottom:116px;height:52px;background:#e3bd85;opacity:.75} .mach-arm{left:78px;width:30px;bottom:150px;height:4px;background:#f0d5a4;opacity:.75} /* 下段两扇门的拉手 */ .mach-hdl{width:4px;height:16px;bottom:40px;border-radius:2px;background:#4a3018} .mach-hdl.h1{left:80px}.mach-hdl.h2{left:130px} /* 控制面板：小触摸屏 + 一排按钮 */ .mach-panel{left:53px;width:21px;bottom:143px;height:24px;border-radius:2px; background:linear-gradient(180deg,#4a3018,#1c1108); box-shadow:inset 0 0 0 1.5px rgba(247,230,194,.5)} .mach-btns{left:53px;width:30px;bottom:135px;height:5px;border-radius:2px; background:linear-gradient(180deg,#c98b45,#8a5527)} /* 三色报警灯：立杆 + 三段。这三段用了真的信号色，见文件头的取舍说明 */ /* 立杆加粗到 4px、灯往中间挪一点 —— 原来那根 3px 的杆在浅身上几乎看不见， 灯看着像浮在半空 */ .mach-pole{left:134px;width:4px;bottom:196px;height:18px;background:#6c4a29} .mach-tower{left:128px;bottom:213px;width:16px;height:19px;border-radius:3px; background:linear-gradient(180deg, #b5544a 0 33.3%,#d9a44e 33.3% 66.6%,#7d8c5a 66.6%); box-shadow:0 0 10px rgba(217,164,78,.35)} /* 6 张卡排两行，单卡矮一点才不会把产品板块拉得过长。 注意必须裹在媒体查询里：这一整块追加在文件末尾，如果裸写 .product-card{min-height:...}，会**连模板在 ≤960 / ≤620 里写的 590px / 520px 一起覆盖掉**（同特异性、源码顺序在后就赢）， 单列布局就白改了。 */ @media (min-width:961px){ .product-card{min-height:580px} } /* 窄屏单列。这里原来还有三条 .product-visual{inset:…} 的手调下边界 —— 改成三行网格之后，图画的高度由文案反推，不用再逐个断点猜数字了。 */ @media (max-width:620px){ .product-card{min-height:560px} /* ≤620 时可视区只有 210px 高，两个 232px 的画布会顶到底下的文案上。 缩放只影响绘制，不影响占位，所以不会把卡片撑开。 */ .pv-bench,.pv-machine{transform:scale(.80)} } /* ========================================================================== 资质认证区块（在公司介绍板块内） -------------------------------------------------------------------------- 不直接嵌证书扫描件：扫描件缩略后看不清编号，原图又有 1–2MB，会拖慢首屏。 改成结构化展示关键信息（名称 / 范围 / 编号 / 有效期），徽标用纯 CSS 画。 以后要换成扫描件缩略图，把 .cert-mark 换成 即可，外层尺寸不用动。 ========================================================================== */ .cert-block{margin-top:76px} .cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px} /* align-items 从 flex-start 改成 center：原来徽标钉在卡片顶边，专利那张卡 正文长一倍，徽标下面就空出一大块。 */ .cert-card{display:flex;gap:20px;align-items:center;padding:26px 24px;border-radius:20px; background:rgba(255,255,255,.6);border:1px solid rgba(124,88,44,.14); cursor:zoom-in; transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .cert-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(102,62,28,.13)} .cert-card:focus-visible{outline:2px solid #b97835;outline-offset:3px} .cert-mark{position:relative;flex:0 0 auto;width:76px;height:76px;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; background:radial-gradient(circle at 36% 30%,#fbeed4,#e0b276 55%,#b07a3c); box-shadow:0 12px 30px rgba(150,102,48,.22)} .cert-mark i{position:absolute;inset:6px;border-radius:50%;border:1.5px dashed rgba(90,58,24,.32)} .cert-mark b{font:700 18px "Space Grotesk",Arial,sans-serif;color:#4a3117;line-height:1;letter-spacing:.02em} .cert-mark em{font:600 10px "Space Grotesk",Arial,sans-serif;font-style:normal;color:rgba(74,49,23,.68);letter-spacing:.16em} /* 专利那枚换个冷一点的金，跟 ISO 区分开 */ .cert-mark-patent{background:radial-gradient(circle at 36% 30%,#f6e6cf,#cfa267 55%,#8a5527)} .cert-body{min-width:0} .cert-body h3{font-size:16px;font-weight:700;margin:0 0 8px;line-height:1.45;color:#2c2318} .cert-body p{font-size:13px;line-height:1.6;color:#6b5a45;margin:0 0 12px} .cert-meta{display:flex;flex-wrap:wrap;gap:8px} .cert-meta span{font-size:11px;letter-spacing:.02em;padding:4px 10px;border-radius:999px; background:rgba(124,88,44,.1);color:#6b5334} /* ========================================================================== 证书预览 / 放大 (added 2026-10-14) 客户：点卡片要能跳出证书扫描件，鼠标悬停时以光标为中心显示一份预览， 移开立刻关掉。 两套东西： .cert-peek 跟着光标走的浮层，只在真有鼠标的设备上出现（hover:hover + pointer:fine），pointer-events:none 免得它自己挡住 pointerleave 让浮层闪。 .cert-modal 点击 / 回车打开的放大视图，也是触摸设备上唯一的入口。 图片用 data-cert-zh / data-cert-en 两套路径（ISO 那张有中英两版扫描件， 专利只有中文版，两套填同一个文件），打开时才按当前 挑一张 —— 没有走 applyLang，因为语言切换时浮层/弹窗本来就不该开着。 ========================================================================== */ .cert-peek{position:fixed;left:0;top:0;z-index:1150;width:210px; display:none;pointer-events:none; border-radius:10px;overflow:hidden;background:#fff; box-shadow:0 18px 46px rgba(58,36,14,.34),0 0 0 1px rgba(124,88,44,.2)} .cert-peek.on{display:block} .cert-peek img{display:block;width:100%;height:auto} .cert-modal{position:fixed;inset:0;z-index:1200;display:none; align-items:center;justify-content:center;gap:0; padding:3.5vh 4vw; background:rgba(26,17,8,.7); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); overscroll-behavior:contain} .cert-modal.on{display:flex} .cert-modal figure{margin:0;display:flex;flex-direction:column;align-items:center; gap:14px;min-height:0;max-width:min(760px,100%)} .cert-modal img{display:block;max-width:100%;max-height:76vh;width:auto;height:auto; border-radius:6px;background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.45)} .cert-modal figcaption{font-size:13px;line-height:1.5;text-align:center; color:rgba(255,246,232,.9);max-width:640px} .cert-modal-close{position:absolute;right:max(3vw,18px);top:max(3vh,14px); width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,246,232,.35); background:rgba(255,246,232,.1);color:#fff6e8;font-size:19px;line-height:1; cursor:pointer;transition:.3s var(--ease)} .cert-modal-close:hover{background:#fff6e8;color:#5a3410;border-color:#fff6e8} /* 手机上证书是竖长条，光靠 max-height 会缩到看不清 —— 允许在弹窗里上下滚 */ @media (max-width:700px){ .cert-peek{display:none!important} .cert-modal{padding:2.5vh 4vw;align-items:flex-start;overflow-y:auto} .cert-modal img{max-height:none} } @media (max-width:860px){ .cert-grid{grid-template-columns:1fr} .cert-block{margin-top:56px} } @media (max-width:420px){ .cert-card{flex-direction:column;gap:16px} } /* ========================================================================== 应用板块：3 张场景卡的 CSS 绘制图 -------------------------------------------------------------------------- 2026-10-15 照客户给的三张渲染图重画。配色按客户说的「和站内风格保持一致」 —— 参考图那层蓝是渲染图的打光和背景，不搬；只搬结构。 三张卡共用一套「舞台」：底部发光板 + 深色中间板 + 中央光圈；上半部分的 装配各自不同（爆炸堆叠的板 / 立着探针的治具 / 线束插进接插件）。 板子都是 perspective(560px) rotateX(56deg) + transform-origin:50% 100%： 底边不动、上边压扁到 h*cos56≈0.559h。竖件（探针、螺柱、接插件）的落点 都按这个换出来的「视觉上边界」摆，接缝才对得上，不会悬空。 */ /* 画布定位改成「绝对定位 + 四边归零 + margin:auto」。 原来是 display:grid + place-items:center —— 客户手机上实测模型整体偏左 64px（卡片本身是居中的，量的出来），我这边同宽度复现不出，判断是某个 引擎上 grid 的隐式轨道/对齐解析有差异。这条写法是 CSS 2.1 就有的绝对定位 居中，四边都给定值 + margin:auto，任何引擎都只会算出正中间，没有解释空间。 bottom:168px 是「把视觉重心往上抬、给底下文案让位」——原来挂在下方的 padding-bottom 上，现在直接写进定位里。窄屏那两档各自覆盖 bottom。 */ .app-art{position:absolute;inset:0;pointer-events:none;z-index:1} .art-scene{position:absolute;left:0;right:0;top:0;bottom:168px;margin:auto; width:250px;height:262px; --as-deep:#241c14; --as-gold:#e9c98d; --as-gold2:#b0863f; --as-silver:#efeae0; --as-silver2:#b3aa9b; } .art-scene i{position:absolute;display:block} /* ---- 舞台三件套 ---- */ /* 底下的散光 */ .as-aura{left:18px;right:18px;bottom:0;height:62px;border-radius:50%; background:radial-gradient(ellipse at 50% 50%,rgba(246,207,148,.55),rgba(246,207,148,0) 72%); filter:blur(9px)} /* 发光底板：视觉 y205..249 */ .as-base{left:20px;right:20px;bottom:6px;height:80px;border-radius:15px; transform:perspective(560px) rotateX(56deg);transform-origin:50% 100%; background:linear-gradient(165deg,rgba(255,240,210,.95),rgba(233,178,106,.75) 52%,rgba(176,118,52,.82)); box-shadow:0 0 28px rgba(240,190,120,.55),inset 0 0 22px rgba(255,255,255,.6)} .as-base:after{content:"";position:absolute;inset:0;border-radius:15px; border:1px solid rgba(255,246,225,.9)} /* 深色中间板：视觉 y151..200（底边 62 + 88*0.559） */ .as-mid{left:26px;right:26px;bottom:62px;height:88px;border-radius:13px; transform:perspective(560px) rotateX(56deg);transform-origin:50% 100%; background:linear-gradient(168deg,#4c3b29,#241c14 62%); box-shadow:0 16px 28px rgba(72,48,22,.36),inset 0 1px 0 rgba(255,236,206,.24)} .as-mid:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px; border-radius:0 0 13px 13px;background:linear-gradient(180deg,#191309,#0f0b06)} /* 中央光圈：贴在深色板面上 */ .as-ring{left:50%;bottom:74px;width:86px;height:36px;margin-left:-43px;border-radius:50%; border:2px solid rgba(250,214,156,.8); box-shadow:0 0 14px rgba(246,200,132,.65),inset 0 0 12px rgba(246,200,132,.5); transform:perspective(560px) rotateX(56deg);transform-origin:50% 100%} /* 竖件共用：一排金针（做成一整条带子，靠 mask 让两端淡出） */ .as-field{left:0;right:0; background:repeating-linear-gradient(90deg, rgba(233,201,141,0) 0 7px,var(--as-gold) 7px 9px, rgba(233,201,141,0) 9px 19px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)} /* 针尖的高光 */ .as-field:after{content:"";position:absolute;left:0;right:0;top:0;height:4px; background:repeating-linear-gradient(90deg, rgba(255,246,224,0) 0 7px,rgba(255,246,224,.95) 7px 9px, rgba(255,246,224,0) 9px 19px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)} /* ---- 01 电子测试：电路板 + 针座 ---- 上：一块真的电路板（绿色阻焊 + 金焊盘 + 黑色元件），悬在针座上方 下：一个针座 —— 深色座体 + 密集的金针阵向上顶着电路板 + 座体下面露针尾 板面视觉 y52..104，针阵 y96..158 顶住板底又插进座体，座体视觉 y158..188。 */ .as-1 .as-top{left:24px;right:24px;top:8px;height:96px;border-radius:11px; transform:perspective(560px) rotateX(56deg);transform-origin:50% 100%; background: /* 焊盘：近边一排 + 远边一排 */ repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 11px,rgba(233,198,130,.95) 11px 15px, rgba(0,0,0,0) 15px 26px), /* 走线 */ repeating-linear-gradient(74deg, rgba(212,178,112,.28) 0 1px,rgba(0,0,0,0) 1px 9px), linear-gradient(168deg,#3f8a5e,#2b6647 46%,#1c4a33 78%,#143526); background-size:auto 12px,auto auto,auto; background-position:0 100%,0 0,0 0; background-repeat:repeat-x,repeat,no-repeat; box-shadow:0 16px 30px rgba(40,30,14,.42),inset 0 1px 0 rgba(190,235,205,.35)} .as-1 .as-top:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px; border-radius:0 0 11px 11px;background:linear-gradient(180deg,#12321f,#0b2317)} /* 板上的黑色元件：中间一颗大 IC，两边各一颗小的 */ .as-1 .as-parts{left:88px;right:88px;top:44px;height:30px;border-radius:3px; transform:perspective(560px) rotateX(56deg);transform-origin:50% 100%; background:linear-gradient(180deg,#3d3831,#14110d);box-shadow:0 2px 0 rgba(0,0,0,.45)} .as-1 .as-parts:before{content:"";position:absolute;left:-38px;top:5px;width:26px;height:22px; border-radius:2px;background:linear-gradient(180deg,#484239,#191612)} .as-1 .as-parts:after{content:"";position:absolute;right:-38px;top:3px;width:28px;height:26px; border-radius:2px;background:linear-gradient(180deg,#4c463e,#1b1814)} /* 针阵：上顶电路板底（y104）、下插进座体（y158）。 左右收在座体的投影范围内 —— 原来铺到 left/right:8px，座体两侧会露出一排 悬空的针（客户圈掉的就是那些）。 */ .as-1 .as-field{left:52px;right:52px;top:96px;height:62px} /* 座体：深色塑料块，顶面排着接触点（针座的样子），边上有一圈反光 */ .as-1 .as-socket{left:44px;right:44px;bottom:74px;height:54px;border-radius:7px; transform:perspective(560px) rotateX(56deg);transform-origin:50% 100%; background: radial-gradient(circle,rgba(233,201,141,.92) 1.5px,rgba(0,0,0,0) 2px) 0 3px/14px 15px, linear-gradient(168deg,#4a453d,#26221c 58%,#14110d); box-shadow:0 14px 26px rgba(40,30,14,.42),inset 0 1px 0 rgba(255,240,214,.28)} .as-1 .as-socket:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px; border-radius:0 0 7px 7px;background:linear-gradient(180deg,#100d09,#080605)} /* 座体下面露出来的针尾 */ .as-1 .as-tail{left:52px;right:52px;bottom:48px;height:24px; background:repeating-linear-gradient(90deg, rgba(233,201,141,0) 0 8px,var(--as-gold2) 8px 10px, rgba(233,201,141,0) 10px 21px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)} /* ---- 02 连接器测试：银色安装板 + 板上立着的探针 / 螺柱 / 针座 ---- 银板视觉上边界 = 117 + 64*0.559 ≈ 153 → 板面在 y109..145，正好浮在深色板 （y151 起）上方。竖件的底边一律落在 y118~122 —— 板面靠上一点， 看着才是「立在板子上」而不是「飘在板子上」。 */ .as-2 .as-top{left:30px;right:30px;bottom:117px;height:64px;border-radius:9px; transform:perspective(560px) rotateX(56deg);transform-origin:50% 100%; background: radial-gradient(ellipse 8px 5px at 17% 66%,rgba(96,79,55,.55),transparent 72%), radial-gradient(ellipse 8px 5px at 83% 66%,rgba(96,79,55,.55),transparent 72%), linear-gradient(168deg,#fbf9f5,#e0d9cd 58%,#b8af9f); box-shadow:0 14px 26px rgba(72,48,22,.3),inset 0 1px 0 #fff} .as-2 .as-top:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px; border-radius:0 0 9px 9px;background:linear-gradient(180deg,#b0a695,#867d70)} /* 板上的针阵：底边压在板面上 */ .as-2 .as-field{left:34px;right:34px;top:64px;height:54px} .as-2 .as-post{width:14px;bottom:144px;border-radius:3px 3px 2px 2px; background:linear-gradient(90deg,#8d8477,#f7f3ec 38%,#cdc5b7 62%,#8a8175); box-shadow:0 5px 12px rgba(72,48,22,.3)} .as-2 .as-post:after{content:"";position:absolute;left:-1px;right:-1px;top:0;height:7px; border-radius:3px;background:linear-gradient(90deg,#9c9385,#fffdf8 40%,#b6ad9e)} .as-2 .as-post.p1{left:146px;height:96px;bottom:144px} .as-2 .as-post.p2{left:170px;height:76px;bottom:144px} .as-2 .as-block{left:58px;width:38px;height:32px;bottom:140px;border-radius:3px; background:linear-gradient(180deg,#f0d59c,#b0863f 70%,#8a6630); box-shadow:0 5px 12px rgba(72,48,22,.32)} .as-2 .as-block:before{content:"";position:absolute;left:5px;right:5px;top:-26px;height:26px; background:repeating-linear-gradient(90deg, var(--as-gold) 0 3px,rgba(233,201,141,0) 3px 9px)} .as-2 .as-block:after{content:"";position:absolute;left:7px;right:7px;bottom:-20px;height:20px; background:repeating-linear-gradient(90deg, var(--as-gold) 0 3px,rgba(233,201,141,0) 3px 9px)} /* ---- 03 线束测试：线束垂下来，对着下面的测试针床 ---- 照客户手绘草图（线体 → 线头 → 针脚 → 测试针床）建，配色跟另外两张一致。 位置：线体 y0..84 → 线头 y76..124 → 针脚 y118..146 → 床面针 y146..168 → 床身 y168..196。床身坐在深色中间板（视觉 y151..200）上。 */ .as-3 .as-threads{left:108px;width:34px;top:0;height:84px;border-radius:4px 4px 2px 2px; background: repeating-linear-gradient(90deg,rgba(255,240,214,.18) 0 1px,rgba(0,0,0,0) 1px 8px), linear-gradient(90deg,#211d18,#48413a 34%,#2e2822 66%,#17140f); box-shadow:inset 0 0 10px rgba(0,0,0,.6)} /* 线头：接插件本体，比线束粗一截，底边收成台肩 */ .as-3 .as-head{left:86px;width:78px;top:76px;height:48px;border-radius:5px 5px 3px 3px; background:linear-gradient(180deg,#4c443a,#241f19 56%,#131009); box-shadow:0 10px 20px rgba(40,30,14,.42),inset 0 1px 0 rgba(255,240,214,.22)} .as-3 .as-head:after{content:"";position:absolute;left:6px;right:6px;bottom:-4px;height:4px; border-radius:0 0 3px 3px;background:linear-gradient(180deg,#100d09,#080605)} /* 针脚：线头底下垂下来的一排金针 */ .as-3 .as-pins{left:98px;right:98px;top:120px;height:28px; background:repeating-linear-gradient(90deg, var(--as-gold) 0 3px,rgba(233,201,141,0) 3px 8px)} /* 床面针：高低不齐，两层叠出参差感 */ .as-3 .as-bedpins{left:58px;right:58px;bottom:94px;height:22px; background: repeating-linear-gradient(90deg,var(--as-gold) 0 3px,rgba(233,201,141,0) 3px 17px) 5px 100%/100% 22px no-repeat, repeating-linear-gradient(90deg,var(--as-gold2) 0 3px,rgba(233,201,141,0) 3px 11px) 0 100%/100% 15px no-repeat} /* 床身：黄铜块 */ .as-3 .as-bed{left:50px;right:50px;bottom:66px;height:50px;border-radius:5px; transform:perspective(560px) rotateX(56deg);transform-origin:50% 100%; background:linear-gradient(168deg,#f6dcab,#c99a52 56%,#8f6a30); box-shadow:0 14px 26px rgba(40,30,14,.42),inset 0 1px 0 rgba(255,250,236,.45)} .as-3 .as-bed:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px; border-radius:0 0 5px 5px;background:linear-gradient(180deg,#6d4f22,#4a3517)} /* 窄屏：三张卡竖着排。 客户 2026-10-15：「手机模式下只能看见卡 1，看不到卡 2、3」。 根因是模板那两条 .application-card{width:72vw / 86vw} 只把卡做窄，轨道本身 没有 overflow-x —— 卡片照排到 258vw 宽，被外层 .applications 的 overflow:hidden 整个切掉，右边两张既看不到也滑不动。 改单列之后三张都在文档流里，滚下去就能看全（应用子页 ≤620 也是这么排的）。 */ @media (max-width:960px){ .application-rail{display:grid;grid-template-columns:1fr;gap:16px} .application-card{width:auto;min-width:0} .art-scene{bottom:150px;transform:scale(.88)} } @media (max-width:620px){ /* 单列之后卡片有 354px 宽（比桌面的 391 窄不了多少），图形别缩太狠， 否则卡面上方空一大片。 */ .art-scene{bottom:120px;transform:scale(.92)} } /* ========================================================================== 首屏在小屏上的高度问题（客户 2026-09 反馈：滚动提示压在文字下面） -------------------------------------------------------------------------- 两个症状是同一个根源： 文案块 .hero-copy 是绝对定位，从 top:23% 往下自然流； 滚动提示 .hero-footer 是绝对定位，钉在 bottom:30px。 h1 是 20vw —— 320 宽下字高 64px、三行就吃掉 157px，整块文案会一直长到 滚动提示底下，于是既跟提示文字叠住，末尾按钮还被 .hero{overflow:hidden} 切掉。 实测：320×568 切 7px/叠 61px，320×480 切 74px/叠 128px，360×640 叠 25px， 375 及以上正常。 只在 ≤400px 生效（375 及以上不动，那是我之前验收过的状态）： - h1 20vw → 17vw，三行省 23px - h1 上下边距 26/28 → 16/18，省 20px - 按钮组上边距 34 → 22，省 12px - 文案整体 23% → 20%，省 17px 合计约 72px，正好把 320×568 让开。 ========================================================================== */ @media (max-width:400px){ .hero-copy{top:20%} .hero h1{font-size:17vw;margin:16px 0 18px} .hero-actions{margin-top:22px} } /* 320 这一档还得再收：上面那组只让开 360，320×568 仍差 11px。 */ @media (max-width:345px){ .hero-copy{top:19%} .hero h1{margin:14px 0 15px} .hero-actions{margin-top:16px} } /* 极矮屏：滚动提示是装饰性的，这种尺寸下直接不显示，别去压按钮。 注意只按高度判断 —— 横屏手机同样是矮屏，提示一样没地方放。 */ @media (max-height:540px){ .hero-footer{display:none} } /* 320×480（iPhone 4 时代的分辨率）又窄又矮：上面几档收完还差 12px。 必须「窄 + 矮」同时满足才生效 —— 只按高度会让横屏（宽度大、高度小） 也吃到这条，而横屏是另一个问题（h1 按 20vw 算会更大），别混在一起。 */ @media (max-width:345px) and (max-height:520px){ .hero h1{font-size:15vw;margin:12px 0 14px} .hero-actions{margin-top:14px} } /* ========================================================================== h1 加高度上限 —— 修「宽而矮」窗口下首屏整体穿模 -------------------------------------------------------------------------- h1 原来只跟宽度走（≥961 是 11vw、≤960 是 20vw），窗口一矮就出问题： 文案块从 top:17~26% 往下流，h1 三行 ×2.46 倍字号，很容易长过 钉在 bottom:30px 的滚动提示，末尾按钮还会被 .hero{overflow:hidden} 切掉。 浏览器没最大化时（1440×700、960×800 这类）就是这个情况。 实测穿模区间（重叠px / 切出屏px）： 768 宽 620高:193/127 700高:134/68 800高:60/0 960 宽 620高:287/221 700高:228/162 800高:154/88 900高:80/14 1440宽 620高:150/84 700高:84/18 800高:1/0 约束式按实测推的，不是估的： · .hero-copy 实际宽 520px（绝对定位元素收缩到内容宽，被 .hero-lead 的 max-width:520px 卡住，不是 .hero-copy 自己写的 760px）—— h1 在这 520px 里折行，三行的实际高度是 3.11×字号（实测行高 1.04em，不是 .hero h1 上写的 .82） · 文案块其余部分（眉标+副标题+按钮+外边距）实测约 213px · 所以 文案总高 ≈ 213px + 3.11×字号 要让 文案底 ≤ 视口高×83% − 66px（让开 top:17% 和底部的滚动提示）， 解出 字号 ≤ 30vh − 114px。 这个式子会自我失效 —— 视口够高时算出来比 11vw 还大，min() 取 11vw， 等于不生效，所以 1440×900 这类原本正常的尺寸基本不受影响。 -------------------------------------------------------------------------- ⚠ 选择器必须写成 html[lang="zh-CN"] .hero h1，不能只写 .hero h1 —— 中文版走的是上面那条 CJK 规则（第 395 行，特异性 0,2,2）， 而裸的 .hero h1 只有 0,1,1，**加在文件末尾也压不过它**。 踩过这个坑：系数改了两版都没生效，因为一直是被覆盖的一方。 ========================================================================== */ html[lang="zh-CN"] .hero h1{font-size:clamp(58px, min(8.6vw, calc(30vh - 118px)), 142px)} /* ≤960 那档的系数要单独推 —— 它用的是 .hero-copy{top:26%}（不是 17%）， 起始位置更低、可用高度更少。 可用 = 视口高 ×(1−26%) − 66px（让开滚动提示），文案总高 ≈ 213px + 3.11×字号 → 字号 ≤ 23.8vh − 90px。 验证：768×1024 时该式给 153px，而 15.6vw 只有 120px，min() 取 120 —— 也就是平板上完全不受影响；960×900 时给 124px 才真正开始收。 */ @media (max-width:960px){ html[lang="zh-CN"] .hero h1{font-size:min(15.6vw, calc(23.8vh - 90px))} } /* 英文模式不套用 CJK 那组规则，走的是基础值（≥961 是 11vw、≤960 是 20vw， 行高 .82 而不是中文的 1.04），所以系数也得另算一份。 */ @media (min-width:961px){ .hero h1{font-size:clamp(72px, min(11vw, calc(30vh - 118px)), 180px)} } @media (max-width:960px){ .hero h1{font-size:min(20vw, calc(28vh - 110px))} } /* ========================================================================== 子页面（产品 / 应用 / 技术实力 / 公司介绍） -------------------------------------------------------------------------- 首页那 4 个 block 保持原样不动，子页面是它们的展开版： 首页负责「讲清楚是什么」，子页面负责「把细节和参数摊开」。 复用同一份 style.css 和 script.js。script.js 里所有 DOM 查询都带存在性 判断，子页面缺的元素会自动跳过；分屏滚动那段用 main > section 判断， 子页面同样满足，所以滚动行为跟首页一致（这是有意的）。 ========================================================================== */ /* 页头横幅 —— 跟首页首屏同一套底：同底色 + 粒子 canvas + 网格。 粒子 canvas 用同一个 id（#hero-canvas），script.js 里那段已经做了 存在性判断，子页面缺元素也不会再让整个脚本崩掉。 不要再另画一层 :before 网格 —— .hero-grid 已经提供了，叠起来会出现双层网格。 也注意 z-index 别写 .page-hero>* —— 那样会把 canvas 和网格一起设成 position:relative，它们就压到正文上去了。只给真正的文字元素设层级。 */ .page-hero{ position:relative;padding:158px 8vw 76px;overflow:hidden; color:#1d1a16; /* 跟首页 .hero 完全同一套底 —— 浅金渐变 + 两团暖色光晕。 一开始这里写的是 #080706 深色，是照着模板基础样式抄的， 没注意主题层（style.css 第 230 行附近）已经把首页 hero 覆盖成浅色了， 结果子页面顶着一条浅色半透明导航、压在一块黑底上，很突兀。 改样式前先确认主题层的覆盖，别再照基础样式抄。 */ background: radial-gradient(circle at 78% 36%,rgba(219,171,106,.18),transparent 22%), radial-gradient(circle at 58% 74%,rgba(246,226,191,.75),transparent 26%), linear-gradient(180deg,#fbf8f2,#f2eade); } .page-hero>.section-kicker,.page-hero>h1,.page-hero>p,.page-hero>.crumb{position:relative;z-index:1} .page-hero .section-kicker{color:#755639;opacity:1} .page-hero h1{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(38px,5.4vw,86px); line-height:1.04;letter-spacing:-.05em;margin:18px 0 22px;max-width:15em} .page-hero h1 em{color:transparent;-webkit-text-stroke:1px rgba(122,91,55,.6);font-style:normal} .page-hero p{max-width:640px;font-size:15px;line-height:1.75;color:#6b5a45} .page-hero .crumb{margin-top:34px;font-size:12px;letter-spacing:.08em;color:#8a7a63} .page-hero .crumb a{color:#a8752f} .page-hero .crumb a:hover{color:#1d1a16} /* 内容区 */ .page-section{padding:10vh 8vw} /* 色值直接取首页在用的那几个，不要自己另起一套： 首页 sections 的实测底色是 manifesto #e7dac4 / products·technology #f8f4ec / applications #eee5d6 / company #f2e9db，主题层在文件后段逐个覆盖过。 原来这里写的 #f4eee5 / #e9ddca 是自己另编的，跟首页对不上。 .page-section.dark（纯黑 #080706）已删除 —— 首页上根本不存在黑色板块。 */ .page-section.light{background:#f8f4ec;color:#080706} .page-section.cream{background:#e7dac4} .page-head{margin-bottom:46px} .page-head h2{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(30px,3.6vw,54px); line-height:1.08;letter-spacing:-.04em;margin:12px 0 0} .page-head h2 span{color:#8d7b65} .page-head p{max-width:640px;color:#6b5a45;line-height:1.75;font-size:15px;margin-top:14px} .page-section.dark .page-head p{color:rgba(255,255,255,.58)} .page-section.dark .page-head h2 span{color:#8d7b65} /* 产品分块 —— 每类产品一段，左侧编号右侧内容 */ .pblock{padding:52px 0;border-top:1px solid rgba(141,110,72,.2)} .pblock:first-of-type{border-top:0;padding-top:0} .pblock-grid{display:grid;grid-template-columns:76px 1fr;gap:26px} .pblock-num{font:600 13px "Space Grotesk",Arial,sans-serif;color:#b97835;letter-spacing:.16em;padding-top:7px} .pblock h3{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(25px,2.7vw,38px); letter-spacing:-.03em;margin:0 0 16px;line-height:1.14} .pblock h3 b{font-weight:600;color:#8d7b65;font-size:.62em;letter-spacing:.06em; display:block;margin-bottom:6px} .pblock-desc{max-width:780px;line-height:1.8;color:#5c5145;font-size:15px} /* 应用场景 / 技术亮点 小卡 */ .plist{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;margin-top:26px} .pitem{padding:22px;border-radius:16px;background:rgba(255,255,255,.66); border:1px solid rgba(124,88,44,.14)} .pitem h4{font-size:15px;margin:0 0 9px;color:#2c2318} .pitem p{font-size:13px;line-height:1.72;color:#6b5a45;margin:0} .pitem.solo{background:rgba(185,111,46,.08);border-color:rgba(185,111,46,.2)} /* .pitem 里放链接的地方（404 页的「换条路走走」）—— 不加这条就是浏览器默认蓝 */ .pitem a{display:inline-block;margin-top:10px;font-size:12px;font-weight:700; color:#b97835;text-decoration:underline;text-underline-offset:5px;transition:.3s} .pitem a:hover{color:#8a5527} /* 型号 + 规格参数表 */ .spec-block{margin-top:30px} .spec-model{display:inline-block;margin-bottom:12px;padding:6px 14px;border-radius:999px; background:rgba(185,111,46,.13);color:#8a5320;font:600 13px "Space Grotesk",Arial,sans-serif;letter-spacing:.02em} .spec-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .spec-table{width:100%;border-collapse:collapse;font-size:13px;min-width:460px} .spec-table th,.spec-table td{padding:11px 14px;text-align:left;vertical-align:top; border-bottom:1px solid rgba(141,110,72,.18)} .spec-table th{font-size:11px;letter-spacing:.1em;color:#8a7358; background:rgba(124,88,44,.07);font-weight:700;white-space:nowrap} .spec-table td:first-child{font-weight:600;color:#3c3328;white-space:nowrap} .spec-table td{color:#5c5145} .spec-table tr:last-child td{border-bottom:0} /* 型号并排（同系列多个型号） */ .spec-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:26px} @media (max-width:860px){ .pblock-grid{grid-template-columns:1fr;gap:10px} .pblock-num{padding-top:0} } @media (max-width:620px){ .page-hero{padding:118px 18px 56px} .page-section{padding:8vh 18px} .page-hero p,.pblock-desc,.page-head p{font-size:14px} } /* 网格 / 弹性子项默认 min-width:auto，里面放 min-width:460px 的规格表时 会撑破容器，.spec-wrap 的 overflow-x:auto 也就不起作用了 —— 结果整页在手机上横向溢出（实测 390 宽溢出 88px）。 给这些容器显式 min-width:0，内部的横向滚动才会真正生效。 */ .spec-block,.pblock-grid>*,.spec-row>*,.pitem{min-width:0} .spec-wrap{max-width:100%} /* ========================================================================== 子页面组件（公司介绍页用到） ========================================================================== */ /* 双栏分块 —— 成立背景 / 研发能力这类并列内容 */ .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} .split h3{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(22px,2.2vw,32px); letter-spacing:-.03em;margin:12px 0 16px} .split p{line-height:1.8;color:#5c5145;font-size:15px} /* 关键数字：标签靠左、数值靠右，左右对称，中间留空 */ .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px} .stat{padding:22px 24px;border-radius:16px;background:rgba(255,255,255,.66); border:1px solid rgba(124,88,44,.14); display:flex;align-items:center;justify-content:space-between;gap:14px} /* 原来是「数值在上、标签在下」，卡片右边整片空着。改成左右对称之后 数值得让位给标签的宽度，所以从 22px 收到 18px —— 22px 的 「2022.11.03」跟旁边 12px 的标签放一行会显得头重脚轻。 */ /* 数值大小跟着视口走：四列排布下卡片宽 ≈ 0.21*视口-13，900px 时只剩 175px， 固定 18px 的「2022.11.03」会把标签挤成一列一个字。clamp 到 13.5px 就还剩 4px 余量（≈ 一个汉字的四分之一）。521~860 是两列，卡片宽得多，所以 下限不会摸到。 */ .stat strong{font:600 clamp(13.5px,1.45vw,18px) "Space Grotesk",Arial,sans-serif;color:#b97835; letter-spacing:-.01em;text-align:right;white-space:nowrap} /* 改成左右对称之后卡片的最小宽度变大了（标签 + gap + 数值 + 内边距）， 研发能力那块是 inline 写死的 repeat(3,1fr)，390px 下 1fr 的 auto 下限被 撑到 377px，整页就多出 5px 横向溢出。让英文小注可以在词内断行， 下限就回落到「一个汉字 + 一个数字」的宽度。 */ .stat-label{min-width:0;overflow-wrap:anywhere} .stat-label span{display:block;font-size:12px;line-height:1.45;color:#6b5a45} .stat-label em{display:block;font-style:normal;font-size:10px;letter-spacing:.1em; color:#a08a6e;margin-top:3px} /* ○ 列表 */ .qa-list{list-style:none;margin:22px 0 0;padding:0} .qa-list li{position:relative;padding-left:22px;margin-bottom:11px; font-size:14px;line-height:1.7;color:#5c5145} .qa-list li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px; border-radius:50%;border:1.5px solid #c08a4a} /* 实验室设备清单 */ .lab-list{margin-top:30px;border-top:1px solid rgba(141,110,72,.2)} .lab-item{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:20px 0; border-bottom:1px solid rgba(141,110,72,.2)} .lab-num{font:600 12px "Space Grotesk",Arial,sans-serif;color:#b97835;letter-spacing:.14em;padding-top:4px} .lab-item h4{font-size:15px;margin:0 0 6px;color:#2c2318} .lab-item p{font-size:13px;line-height:1.7;color:#6b5a45;margin:0} /* 子页面底部的联系块 */ .contact-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;margin-top:32px} .contact-item{padding:22px;border-radius:16px;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14)} .contact-item h4{font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5); margin:0 0 10px;font-weight:700} .contact-item p{margin:0;font-size:14px;line-height:1.7;color:#fff} .contact-item a:hover{color:#efd19a} /* 研发能力那块只有 3 张卡，而且整块待在 .split 的**右半栏**里 —— 1440 时 半栏 573（每张 179），1200 时 474（每张 146），再窄每张就装不下 「东京大学博士 + 数字」了（实测要 ~139px 卡片才刚好排得下）。 以前数值在上面一行，标签独享整行宽度，挤一点也看不出来；改成左右对称 之后标签只剩下 ~50px，会折成两个字一行、英文小注还会被词内断开。 所以 ≤1200 直接改成单列，每张卡占满半栏，读起来像一张参数表。 */ .stat-row-3{grid-template-columns:repeat(3,1fr)} @media (max-width:1200px){ .stat-row-3{grid-template-columns:1fr;gap:12px} .stat-row-3 .stat{padding:18px 22px} } /* 861~1100 是四列排布最挤的一段（卡片只有 175~217px）。收一下内边距和 卡片间距，把宽度让给内容 —— 实测 900px 那档「成立年份 + 2022.11.03」 差 6px，不收的话标签会折成「成立年 / 份」。 */ @media (min-width:861px) and (max-width:1100px){ .stat-row{gap:12px} .stat{padding:20px;gap:12px} } @media (max-width:860px){ .split{grid-template-columns:1fr;gap:40px} .stat-row{grid-template-columns:repeat(2,1fr)} } /* 再窄一点就放不下「标签靠左、数值靠右」了：卡片要装下「成立年份」48px + gap + 「2022.11.03」82px + 内边距 48px，算下来卡片得 ≥192px，也就是 视口 ≥480px 左右。低于这个宽度退回上下排（数值在上），跟改动前一致。 */ @media (max-width:520px){ .stat{flex-direction:column;align-items:flex-start;gap:0} .stat strong{order:-1;font-size:22px;text-align:left} .stat-label span{margin-top:8px} } @media (max-width:620px){ .lab-item{grid-template-columns:1fr;gap:6px} .lab-num{padding-top:0} } .page-section.gold{background:linear-gradient(135deg,#9e5c28,#d18b43 48%,#8c4e24);color:#fff} .page-section.gold .section-kicker{color:rgba(255,248,238,.8);opacity:1} .page-section.gold .page-head h2 span{color:rgba(255,248,238,.62)} .page-section.gold .page-head p{color:rgba(255,255,255,.76)} .page-section.gold .btn-primary{background:#fff;color:#8c4e24} /* 锚点跳转的位置补偿 —— 导航是 position:fixed;height:78px， 直接跳 #p01 会让标题压在导航下面，scroll-margin-top 把落点往下让开。 */ .pblock{scroll-margin-top:104px} /* 子页面里的场景卡：首页那套是横向出血轨道 —— .application-card 固定 31vw， 三张排开约 1375px，超出内容区后被 body{overflow-x:hidden} 裁掉， 第三张只露一半，是刻意的「可横向滚动」暗示。首页那样用没问题。 但子页面是内容页，卡被裁掉一半会显得像坏了，所以改成自适应网格： 宽屏一行三张，窄屏自动折行。卡片本身的样式（渐变、CSS 绘制图、文字） 完全沿用首页那一套，只是布局容器换掉。 */ .page-section .application-rail{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } /* 用固定 3 列而不是 auto-fit —— 场景正好 3 张，auto-fit 在 1440 下会算出 4 列，第四列空着，卡片被挤窄。 */ @media (max-width:900px){.page-section .application-rail{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.page-section .application-rail{grid-template-columns:1fr}} .page-section .application-card{width:auto;min-width:0;min-height:520px} /* 子页面里的轴线是板块收尾，下面没有内容接续。 .worldpoint 是绝对定位，从 top:-7px 起只有 圆点(12px) + 间距(13px) + 标签(约 11px) ≈ 36px，而 .worldline 高度是模板写死的 160px， 剩下 120 多 px 全是空的。首页那里轴线下面紧跟着新闻块，所以看不出来； 子页面收尾就空出一大截。这里按内容高度收。 选择器限定在 .page-section 内，首页不受影响。 */ .page-section .worldline{height:58px;margin-top:96px} /* ========================================================================== 01 / 为什么存在 —— 补右半屏 -------------------------------------------------------------------------- 这块原来只有左侧三行大字 + 右下角一段小字，右半屏整片空白。 站三支真探针，就是产品页那 11 张抠图里的三张（宣传册第 5 / 8 / 10 页， 1.27 / 1.91 / 2.54mm 三个间距系列各取标准型）。先做过一版 CSS 画的爆炸图， 客户说「它也没说有弹簧」—— 宣传册上确实只写了线材、没给任何弹簧尺寸， 于是不再画结构，直接上真图。 高度按宣传册标注的真实总长，共用一个比例（12.04px/mm，JQ050 画满 520px）： JQ050 43.20mm -> 520px 针管 Ø0.78mm，三支里最高最细 JQ075 33.20mm -> 400px 针管 Ø1.02mm JQ100 33.35mm -> 401px 针管 Ø1.36mm，三支里最粗 注意 JQ075 和 JQ100 只差 0.15mm，并排看就是等高的 —— 那是宣传册上的真数字， 不是没排开。三支里只有 JQ050 明显高出一截。 宽度不另给：让图片按自己的宽高比跟高度走，粗细关系也跟着真图走。 ========================================================================== */ .manifesto-body{ display:grid; grid-template-columns:minmax(0,1fr) 460px; gap:40px; align-items:center; margin-top:60px; /* 原来是 .manifesto-line 自己的 margin-top，挪到这一层 */ } .manifesto-body .manifesto-line{margin-top:0} .mf-visual{position:relative;display:grid;place-items:center;min-height:0} /* 三支聚成一组、居中、共基线。 高度写死，不用 height:100% —— 要的就是让真实的长短差露出来； align-items:flex-end 让三支站在同一条基线上。 必须收紧（不铺满整栏）：探针真身是 1:30 的细长条，按真实比例画出来只有 15~21px 宽，铺满 460px 的栏会散成三根游离的竖线；但也不能靠边 —— 靠右的时候整组挤在栏的最右边，左边空一大片，看着是偏心而不是居中。 */ .mf-set{position:relative;z-index:1;display:flex;align-items:flex-end; justify-content:center;gap:46px;width:100%} /* 基线：三支共用一条细线，两头对称渐隐。跟卡条那套一样， 没有它就不知道它们站在哪。 */ .mf-set:after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:1px; background:linear-gradient(90deg,transparent,rgba(124,88,44,.3) 20%, rgba(124,88,44,.3) 80%,transparent)} .mf-p{position:relative;display:block;flex:0 0 auto} .mf-p img{display:block;height:100%;width:auto} /* 落地阴影。宽度按各支的粗细单独给 —— 跟着图片宽度算会悬殊得离谱 （针身只有 15px 宽，2.2 倍左右才是正常的地影）。 */ .mf-p:before{content:"";position:absolute;left:50%;bottom:-2px;height:7px; transform:translateX(-50%);border-radius:50%; background:radial-gradient(closest-side,rgba(120,80,40,.3),transparent 78%)} .mf-p:nth-child(1){height:401px} /* JQ100 33.35mm，最粗 */ .mf-p:nth-child(1):before{width:46px} .mf-p:nth-child(2){height:400px} /* JQ075 33.20mm */ .mf-p:nth-child(2):before{width:37px} .mf-p:nth-child(3){height:520px} /* JQ050 43.20mm，最高最细 */ .mf-p:nth-child(3):before{width:34px} @media (max-width:1180px){ .manifesto-body{grid-template-columns:minmax(0,1fr) 340px;gap:36px} .mf-visual{min-height:400px} /* 栏变窄，三支按同一比例一起缩，长短关系不变（仍是 12.04px/mm 那份） */ .mf-p:nth-child(1){height:340px} .mf-p:nth-child(1):before{width:39px} .mf-p:nth-child(2){height:339px} .mf-p:nth-child(2):before{width:31px} .mf-p:nth-child(3){height:441px} .mf-p:nth-child(3):before{width:29px} } @media (max-width:900px){ .manifesto-body{grid-template-columns:1fr;gap:40px} .mf-visual{min-height:360px} /* 单列时整栏很宽，gap 放大一点免得三支挤在一起 */ .mf-set{gap:60px} } /* ========================================================================== 弹簧探针全系列 —— 横向自动滚动卡片条（嵌在产品页 02 ICT/FCT 板块内） -------------------------------------------------------------------------- 数据出自客户《产品宣传册》(JQ.pdf) 第 4~17 页，11 款型号的完整参数。 为什么横着滚而不是竖着排：11 款 × 每款 7 行参数，竖排要再给 02 板块加两屏， 横滚一屏看完，鼠标悬停暂停（逻辑在 script.js 末尾）。 探针图是从宣传册 PDF 里抠的真图（.claude/tools/extract_probes.py）—— 之前是纯 CSS 画的，客户说「不太像」。 图高按同一系数从原图换算，11 张之间的长短关系跟宣传册印出来的一致 （注意跟真实毫米数不是等比的：等比的话最短的 JQ039 只有 1.3px 宽）。 ========================================================================== */ .probe-rail-block{margin-top:56px;padding-top:46px;border-top:1px solid rgba(141,110,72,.2)} .prb-head h4{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(19px,1.9vw,26px); line-height:1.22;letter-spacing:-.02em;margin:10px 0 0;color:#3c3328} .prb-head p{max-width:780px;color:#6b5a45;line-height:1.8;font-size:14px;margin-top:12px} /* 滚动容器。滚动条藏掉 —— 这台机器上滚条是件很吵的东西。 不用 mask 渐隐：卡片自带阴影，加遮罩会连阴影一起削掉。 通到页面左右边缘。原来是停在板块的文字栏里，左边第一张卡被从中间切断， 看着像排版事故；现在容器外框正好等于 body 宽，卡片从页面右边进来、 从页面左边出去。 两边的外扩量不一样，因为祖先的内边距不一样：.page-section 有 8vw 内边距， .pblock-grid 左边还有 76px 序号栏 + 26px 间距（≤860px 网格变单列，就只剩 8vw；≤620px 内边距改 18px）。所以不能用 calc(50% - 50vw) —— 父级（网格右栏）的中心比页面中心右偏 51px，50% 那套算出来是错的。 也刻意不用 100vw：宽屏上 body 比 100vw 少一条滚动条，100vw 会撑出横向滚动。 （--prb-bleed-* 在这里定义、在 .probe-track 里继承使用。） */ .probe-rail{ --prb-bleed-l:calc(8vw + 102px); --prb-bleed-r:8vw; margin-left:calc(-1 * var(--prb-bleed-l)); margin-right:calc(-1 * var(--prb-bleed-r)); overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch} .probe-rail::-webkit-scrollbar{display:none} .probe-rail:focus-visible{outline:2px solid #b97835;outline-offset:6px;border-radius:12px} /* width:max-content 是关键：不加的话 flex 容器会被压到容器宽， 卡片一挤扁就不滚了。上下留白给卡片阴影，否则被 overflow 削平。 左右留白取容器外扩的那个量，首卡就落在文字栏的左边界上。 */ .probe-track{display:flex;gap:16px;width:max-content; padding:8px var(--prb-bleed-r) 22px var(--prb-bleed-l)} .probe-card{flex:0 0 220px;display:flex;flex-direction:column; padding:18px 18px 16px;border-radius:18px; background:#fffdf8;border:1px solid rgba(124,88,44,.16); box-shadow:0 10px 26px rgba(105,75,39,.06)} .pc-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px; padding-bottom:12px;border-bottom:1px solid rgba(124,88,44,.14)} .pc-model{font:600 17px/1.1 "Space Grotesk",Arial,sans-serif;letter-spacing:.01em;color:#3c3328} .pc-pitch{flex:0 0 auto;text-align:right} .pc-pitch b{display:block;font:600 13px/1.25 "Space Grotesk",Arial,sans-serif;color:#8a5527} .pc-pitch em{display:block;font-style:normal;font-size:10px;letter-spacing:.03em;color:#a08a70} /* 探针图。图片是 PDF《产品宣传册》里抠出来的真图（带透明通道， 见 .claude/tools/extract_probes.py）。之前是纯 CSS 画的，客户说「不太像」—— 真实的锯齿冠、倒角、台阶确实画不出来。 底部对齐：所有型号站在同一条基线上，高度差就读成「谁更长」。 --h 是每款的显示高度，按同一系数从原图换算，11 张之间的长短关系 跟宣传册印出来的一致（注意跟真实毫米数不是等比的 —— 等比的话 最短的 JQ039 只有 1.3px 宽，什么都看不见）。 */ .pc-fig{position:relative;height:256px;margin:14px 0 16px; display:flex;flex-direction:column;align-items:center;justify-content:flex-end} .pc-fig img{display:block;height:var(--h);width:auto;max-width:100%} /* 落地阴影。原图是白底渲染，没有影子，压上来会像悬空。 宽度写死 30px —— 探针本身才 5~11px 宽，跟着它算会悬殊得离谱。 */ .pc-fig::before{content:"";position:absolute;left:50%;bottom:-1px; width:30px;height:7px;transform:translateX(-50%);border-radius:50%; background:radial-gradient(closest-side,rgba(120,80,40,.28),transparent 78%)} /* 基线：11 支探针共用一条细线。没有它的话，短款上方会留出一大块看不出 意图的空白，有了基线就读成一张对比图。 */ .pc-fig::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,rgba(124,88,44,.3) 16%,rgba(124,88,44,.3) 84%,transparent)} /* 参数行。值允许换行 —— 套管那行的 "R100NA · R100C · R100W · R100S" 在 232px 的卡里放不下，靠 · 前后的空格自然断行。 */ .pc-spec{list-style:none;margin:0;padding:0;border-top:1px solid rgba(124,88,44,.14)} .pc-spec li{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:6px 0;font-size:11.5px;line-height:1.4; border-bottom:1px solid rgba(124,88,44,.07)} .pc-spec li:last-child{border-bottom:0;padding-bottom:0} .pc-spec span{color:#8a7358;white-space:nowrap} .pc-spec b{font-weight:600;color:#3c3328;text-align:right} /* 全系列共用的那几项单独拎出来，11 张卡上就不用各写一遍 */ .prb-common{margin-top:26px;padding:18px 20px;border-radius:16px; background:rgba(255,255,255,.6);border:1px solid rgba(124,88,44,.12)} .prb-common p{margin:0;font-size:12.5px;line-height:1.75;color:#6b5a45} .prb-common p + p{margin-top:8px;font-size:12px;color:#8a7358} /* 选型规则 JQ-100-33 20-291 */ .prb-order{margin-top:30px;padding:24px;border-radius:18px; background:rgba(124,88,44,.07);border:1px solid rgba(124,88,44,.14)} .prb-code{font:600 clamp(19px,2.2vw,28px)/1.2 "Space Grotesk",Arial,sans-serif; letter-spacing:.02em;color:#8a5527;margin:10px 0 18px} .prb-code b{color:#3c3328} .prb-legend{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:10px 20px} .prb-legend li{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:#6b5a45} .prb-legend b{font:600 13px "Space Grotesk",Arial,sans-serif;color:#8a5527;min-width:34px;flex:0 0 auto} .prb-eg{margin-top:16px;font-size:12.5px;color:#8a7358} @media (max-width:900px){ .probe-card{flex-basis:216px} } /* ≤860px 时 .pblock-grid 变单列，左边那 102px 的序号栏没有了 */ @media (max-width:860px){ .probe-rail{--prb-bleed-l:8vw;--prb-bleed-r:8vw} } @media (max-width:620px){ .probe-rail-block{margin-top:42px;padding-top:34px} .probe-card{flex-basis:206px;padding:16px 15px 14px} .pc-fig{height:178px} .probe-track{gap:14px} .prb-order{padding:20px} .prb-head p{font-size:13px} /* ≤620px 时 .page-section 的内边距从 8vw 变成 18px */ .probe-rail{--prb-bleed-l:18px;--prb-bleed-r:18px} } /* ========================================================================== 空心字的笔画接缝（首页 hero / 宣言 / 联系，以及四个子页首屏） -------------------------------------------------------------------------- 症状：空心字的笔画之间全是线，看着像线框图。 原因不在 CSS，在字体。中文显示字体（本机落到 Noto Sans SC，也就是思源黑体） 是**按笔画分别建轮廓**的：「制」的一横和一竖是两个各自闭合的路径，叠在一起。 普通 fill 走 nonzero 规则取并集，看着是完整的一个字；但 -webkit-text-stroke 会**逐条轮廓描边**，笔画之间的接缝就全被描出来了。 修法：paint-order: stroke fill —— 让填充画在描边**之上**，接缝被填充盖住， 只剩最外一圈。这在任何字体上都成立，不用换字体。 描边宽度要翻倍写 2px：描边以轮廓为中心线，一半在外一半在内，填充只盖掉 内侧那一半，外露的才是想要的 1px。字的内孔（口、日、O 的圈里）仍然会被 描到 —— 那部分填充盖不着，跟原来的观感一致。 ⚠ 填充色必须写**板块背景的原值**，不是量出来的屏幕色。全站盖着一层 opacity .018 的噪点（.noise），填充和背景吃的是同一层，所以两边都用原值 才对得上；用截图取色反而会差三四个数。 背景一改，下面这几个值要跟着改。 ========================================================================== */ /* 首页 hero 与子页 .page-hero 用的是同一套底（浅金渐变 + 两团暖色光晕） */ .hero h1 em, .page-hero h1 em{ color:#f7f2e9; /* = 渐变在标题那一带的值 */ -webkit-text-stroke:2px rgba(122,91,55,.6); paint-order:stroke fill; } /* 首页 01 宣言「我们不只制造接触」—— 底色是 .section-dark 的 #e7dac4 */ .outline-text{ color:#e7dac4; -webkit-text-stroke:2px rgba(132,97,57,.46); paint-order:stroke fill; } /* 首页联系板块「把最难的问题交给我们」—— 金色斜向渐变 */ .contact h2 em{ color:#cf9258; /* = 渐变在标题那一带的取值 */ -webkit-text-stroke:2px rgba(255,255,255,.75); paint-order:stroke fill; } /* ========================================================================== ICP 备案号（页脚） 模板页脚是「品牌 / 口号 / 版权」三个 flex 子项 space-between。直接加第 4 个 子项，三项的间距会全部重排；拆成两行又会把页脚撑高 12px。所以把 「版权 · 备案号」并进同一个子项里，仍是三个子项、仍是一行 —— 页脚高度和分配比例都不动。 字号 / 字距沿用页脚既有的 10px / .04em；悬停色取主金色 #b97835 （和 .pblock-num / .lab-num 同一个值）。 ========================================================================== */ /* nowrap 是量出来的：EN 版权行本来就长（"…TECHNOLOGY CO., LTD." ≈320px）， 加上备案号后 1000px 宽会把整块挤成两行、页脚从 80px 涨到 91px。 改成 nowrap 让版权文字自己折行（跟改之前的行为一致），页脚高度不动。 */ .footer-legal{display:flex;align-items:center;gap:6px;flex-wrap:nowrap} .footer-sep{opacity:.5} .footer-icp{white-space:nowrap} .footer-icp:hover{color:#b97835}