/* ============================================================================ 样张对齐样式（由 _proto/assets/proto.css 机械移植，勿手改） 规则来源：design samples in site/_proto/*.html 全部作用域限定在 .is-sample 之下：只对「按样张渲染」的页面生效， 不影响 products / cases / contact 等仍走 rebuild.css 的页面。 重新生成：php _build/gen_sample.php ========================================================================== */ .is-sample{ --bg:#f6f7f8; --surface:#fff; --ink:#1d2129; --ink-2:#4a4f57; --muted:#8b9098; --line:#e6e8eb; --line-2:#f0f1f3; --radius:2px; /* 深色块统一用「深灰」而不是近黑，和浅灰底更协调 */ --dark:#333941; --dark-2:#272c33; --soft:#eceef1; --shadow:0 1px 2px rgba(29,33,41,.04), 0 8px 24px rgba(29,33,41,.06); --ease:.28s cubic-bezier(.4,0,.2,1); --hh:74px; } .is-sample *{box-sizing:border-box} .is-sample{-webkit-text-size-adjust:100%} .is-sample{margin:0;background:var(--bg);color:var(--ink); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:15px;line-height:1.72;-webkit-font-smoothing:antialiased} .is-sample img{max-width:100%;height:auto;border:0;display:block} .is-sample a{color:inherit;text-decoration:none} .is-sample h1, .is-sample h2, .is-sample h3, .is-sample h4{margin:0} .is-sample p{margin:0} .is-sample ul{margin:0;padding:0;list-style:none} .is-sample .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px} .is-sample .container--wide{max-width:1300px} /* 深色占位块（替代真实照片，标注所需尺寸） */ .is-sample .ph{background:var(--dark);color:rgba(255,255,255,.46);display:flex;align-items:center;justify-content:center; text-align:center;font-size:11px;letter-spacing:.06em;line-height:1.6;padding:12px} .is-sample .ph--2{background:var(--dark-2)} .is-sample .ph span{display:block} .is-sample .ph b{display:block;font-weight:500;color:rgba(255,255,255,.72);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px} .is-sample .samplebar{position:fixed;left:14px;bottom:14px;z-index:150;background:rgba(39,44,51,.95);color:#fff; font-size:12px;padding:9px 14px;border-radius:2px;max-width:360px;line-height:1.55} .is-sample .samplebar b{font-weight:600} .is-sample .samplebar span{opacity:.72;display:block} /* ---------- 顶栏：顶端透明 → 滚动后白底收窄 ---------- */ .is-sample .site-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hh); display:flex;align-items:center;background:transparent; transition:background var(--ease),box-shadow var(--ease),height var(--ease)} .is-sample .site-header .container{display:flex;align-items:center;gap:28px;width:100%} .is-sample .site-header.is-stuck{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--line);height:58px; -webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px)} .is-sample .brand{font-size:19px;font-weight:600;letter-spacing:.16em;color:#fff;transition:color var(--ease)} .is-sample .site-header.is-stuck .brand{color:var(--ink)} .is-sample .mainnav{display:flex;align-items:center;gap:26px;margin-left:auto} .is-sample .mainnav a{font-size:14px;font-weight:500;color:rgba(255,255,255,.88);position:relative;transition:color var(--ease)} .is-sample .site-header.is-stuck .mainnav a{color:var(--ink-2)} .is-sample .mainnav a:hover{color:#fff} .is-sample .site-header.is-stuck .mainnav a:hover{color:var(--ink)} .is-sample .mainnav a.on{color:#fff} .is-sample .site-header.is-stuck .mainnav a.on{color:var(--ink)} .is-sample .mainnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;opacity:.55} .is-sample .hdr-tools{display:flex;align-items:center;gap:14px} .is-sample .hdr-search input{border:0;border-bottom:1px solid rgba(255,255,255,.4);background:transparent; color:rgba(255,255,255,.9);font:inherit;font-size:13px;width:112px;padding:3px 0;outline:none} .is-sample .site-header.is-stuck .hdr-search input{color:var(--ink);border-bottom-color:var(--line)} .is-sample .hdr-search input::placeholder{color:inherit;opacity:.7} .is-sample .btn{display:inline-block;font-size:13px;font-weight:500;padding:10px 22px;border-radius:var(--radius); transition:all var(--ease);white-space:nowrap;cursor:pointer;border:0} .is-sample .btn--light{background:#fff;color:var(--ink)} .is-sample .btn--light:hover{background:rgba(255,255,255,.86)} .is-sample .btn--dark{background:var(--ink);color:#fff} .is-sample .btn--dark:hover{background:var(--ink-2)} .is-sample .burger{display:none;width:22px;height:14px;position:relative} .is-sample .burger i{position:absolute;left:0;right:0;height:1.5px;background:#fff;transition:background var(--ease)} .is-sample .site-header.is-stuck .burger i{background:var(--ink)} .is-sample .burger i:nth-child(1){top:0}.is-sample .burger i:nth-child(2){top:6px}.is-sample .burger i:nth-child(3){top:12px} /* ---------- 上：首屏轮播（深灰底 + 文案） ---------- */ .is-sample .hero{position:relative;height:74vh;min-height:520px;max-height:760px;overflow:hidden;background:var(--dark)} .is-sample .hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;background:var(--dark)} .is-sample .hero__slide:nth-child(2){background:var(--dark-2)} .is-sample .hero__slide.on{opacity:1} .is-sample .hero__slide::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,0) 40%)} .is-sample .hero__bd{position:relative;z-index:2;height:100%;display:flex;align-items:center} .is-sample .hero__tx{max-width:600px;color:#fff} .is-sample .hero__eb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.78;margin-bottom:16px} .is-sample .hero h1{font-size:44px;font-weight:400;letter-spacing:-.014em;line-height:1.22;margin-bottom:16px} .is-sample .hero p{font-size:17px;font-weight:300;line-height:1.65;opacity:.88;margin-bottom:28px;max-width:520px} .is-sample .hero__tag{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none} .is-sample .hero__nav{position:absolute;z-index:3;bottom:34px;left:0;right:0} .is-sample .hero__nav .container{display:flex;align-items:center;gap:20px} .is-sample .hero__dots{display:flex;gap:9px} .is-sample .hero__dots button{width:26px;height:2px;border:0;padding:0;background:rgba(255,255,255,.36);cursor:pointer;transition:background var(--ease)} .is-sample .hero__dots button.on{background:#fff} .is-sample .hero__arrows{display:flex;gap:8px;margin-left:auto} .is-sample .hero__arrows button{width:42px;height:42px;border:1px solid rgba(255,255,255,.42);background:transparent;color:#fff; cursor:pointer;border-radius:50%;font-size:15px;line-height:1;transition:all var(--ease)} .is-sample .hero__arrows button:hover{background:#fff;color:var(--ink);border-color:#fff} /* ---------- 通用区块（节奏收紧） ---------- */ .is-sample .sec{padding:72px 0} .is-sample .sec--white{background:var(--surface)} .is-sample .sec__head{text-align:center;max-width:660px;margin:0 auto 40px} .is-sample .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .is-sample .sec__head h2{font-size:32px;font-weight:400;letter-spacing:-.012em;line-height:1.3;margin-bottom:10px} .is-sample .sec__head p{font-size:16px;font-weight:300;color:var(--ink-2);line-height:1.7} .is-sample .headrow{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px} .is-sample .headrow h2{font-size:30px;font-weight:400;letter-spacing:-.012em} .is-sample .headrow__ctl{display:flex;gap:8px;margin-left:auto} .is-sample .headrow__ctl button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface); cursor:pointer;color:var(--ink);font-size:14px;line-height:1;transition:all var(--ease)} .is-sample .headrow__ctl button:hover{border-color:var(--ink);background:var(--ink);color:#fff} /* ---------- ① 三列故事卡 ---------- */ .is-sample .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px} .is-sample .card3{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--ease),transform var(--ease)} .is-sample .card3:hover{box-shadow:var(--shadow);transform:translateY(-2px)} .is-sample .card3__im{aspect-ratio:1.9/1} /* About 组四个页面（Company Profile / R&D / Quality Control / Certifications）的卡片图改 1:1。 原因：客户的设计原图都是 1:1，不必为了 1.9:1 的容器另外再设计一版。 只限 .is-sample--about，首页那条「三列故事卡」仍是 1.9:1，不受影响。 上传规格同步改成 760 × 760（见 inc/slots_spec.php 的标签与样张占位文字）。 */ .is-sample--about .card3__im{aspect-ratio:1/1} .is-sample .card3__bd{padding:22px 24px 26px} .is-sample .card3__eb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .is-sample .card3 h3{font-size:19px;font-weight:500;letter-spacing:-.006em;margin-bottom:8px} .is-sample .card3 p{font-size:14px;color:var(--ink-2);line-height:1.7} .is-sample .card3__more{display:inline-block;margin-top:14px;font-size:13px;font-weight:500;border-bottom:1px solid var(--line); padding-bottom:2px;transition:border-color var(--ease)} .is-sample .card3:hover .card3__more{border-bottom-color:var(--ink)} /* ---------- ② 大图卡轮播（诗乐 Highlights 版式 → 装案例） ---------- */ .is-sample .hl__track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:6px} .is-sample .hl__track::-webkit-scrollbar{display:none} .is-sample .hl__card{flex:0 0 520px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;transition:box-shadow var(--ease)} .is-sample .hl__card:hover{box-shadow:var(--shadow)} .is-sample .hl__media{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;align-items:center} .is-sample .hl__big{aspect-ratio:1/1} .is-sample .hl__small{aspect-ratio:2/1} .is-sample .hl__bd{padding:4px 22px 22px} .is-sample .hl__bd h3{font-size:18px;font-weight:500;letter-spacing:-.006em;margin-bottom:8px} .is-sample .hl__bd p{font-size:13.5px;color:var(--ink-2);line-height:1.7} .is-sample .hl__link{display:inline-block;margin-top:14px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; font-weight:500;border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color var(--ease)} .is-sample .hl__card:hover .hl__link{border-bottom-color:var(--ink)} /* ---------- ③ 居中引言 ---------- */ .is-sample .quote{padding:80px 0;background:var(--surface)} .is-sample .quote__in{max-width:760px;margin:0 auto;text-align:center} .is-sample .quote blockquote{margin:0;font-size:27px;font-weight:300;line-height:1.55;letter-spacing:-.008em} .is-sample .quote blockquote::before, .is-sample .quote blockquote::after{content:"";display:block;width:34px;height:1px;background:var(--line);margin:0 auto} .is-sample .quote blockquote::before{margin-bottom:26px} .is-sample .quote blockquote::after{margin-top:26px} /* ---------- ④ 通栏视频墙 ---------- */ .is-sample .vwall{position:relative;height:420px;overflow:hidden;background:var(--dark)} .is-sample .vwall__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:18px;color:#fff;text-align:center} .is-sample .vwall__play{width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.12); color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--ease)} .is-sample .vwall__play svg{margin-left:4px} .is-sample .vwall__play:hover{background:#fff;color:var(--dark);border-color:#fff;transform:scale(1.06)} .is-sample .vwall__cap{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.9} .is-sample .vwall__hint{font-size:11.5px;opacity:.55} .is-sample .lbox{position:fixed;inset:0;background:rgba(10,12,16,.9);z-index:200;display:none;align-items:center;justify-content:center;padding:36px} .is-sample .lbox.on{display:flex} .is-sample .lbox__frame{width:100%;max-width:1040px;aspect-ratio:16/9;background:#000;position:relative} .is-sample .lbox__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .is-sample .lbox__x{position:absolute;top:-42px;right:0;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1} /* ---------- ⑤ 大标题 + 引语（诗乐 S-Titanium 段） ---------- */ .is-sample .bigh{padding:84px 0;text-align:center} .is-sample .bigh__h{font-size:40px;font-weight:400;letter-spacing:-.01em;line-height:1.3;max-width:640px;margin:0 auto 16px} .is-sample .bigh__p{font-size:22px;font-weight:300;line-height:1.5;color:var(--ink-2);max-width:600px;margin:0 auto} /* ---------- ⑥ 杂志式错落大图集 ---------- */ .is-sample .mag{display:grid;grid-template-columns:1fr 1fr;gap:22px} .is-sample .mag__a{grid-column:1/3;aspect-ratio:2.6/1} .is-sample .mag__b, .is-sample .mag__c{aspect-ratio:1.55/1} .is-sample .mag figure{margin:0;position:relative;overflow:hidden} .is-sample .mag figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 26px 22px;color:#fff;font-size:15px; font-weight:500;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0))} /* ---------- ⑦ 卡片横滑 ---------- */ .is-sample .rail__track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:4px} .is-sample .rail__track::-webkit-scrollbar{display:none} .is-sample .rail__card{flex:0 0 288px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;transition:box-shadow var(--ease)} .is-sample .rail__card:hover{box-shadow:var(--shadow)} /* 原来是固定 height:146px。桌面卡片 288 宽时是 2:1，正好； 但窄屏（≤767px）卡片变成 78% 宽（约 567px）后，盒子成了约 3.9:1， 而图是 2:1 —— object-fit:cover 会把上下裁掉近一半。 改成「由宽度算高度」，任何宽度下盒子都是 2:1，图永远不会被裁。 （桌面从 146px 变成 144px，肉眼无差。）写法与 .cert__im / .pcard__media 同一套。 */ .is-sample .rail__im{position:relative;aspect-ratio:2/1;height:auto;overflow:hidden} @supports not (aspect-ratio: 2 / 1){ .is-sample .rail__im{ height:0; padding-bottom:50%; } } .is-sample .rail__bd{padding:16px 18px 19px} .is-sample .rail__bd h4{font-size:15px;font-weight:500;margin-bottom:5px} .is-sample .rail__bd p{font-size:12.5px;color:var(--muted);line-height:1.6} /* ---------- 下：CTA（改浅灰，不再是黑块） ---------- */ .is-sample .cta{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:66px 0;text-align:center} .is-sample .cta h2{font-size:29px;font-weight:400;letter-spacing:-.012em;margin-bottom:12px} .is-sample .cta p{font-size:15px;font-weight:300;color:var(--ink-2);max-width:600px;margin:0 auto 26px;line-height:1.7} .is-sample .cta .btn--dark{background:var(--ink);color:#fff} /* ---------- 下：页脚（沿用旧模板的内容与形式） ---------- */ .is-sample .site-footer{background:var(--soft);padding:58px 0 24px} .is-sample .fgrid{display:grid;grid-template-columns:1.6fr 1.4fr 1.2fr 1fr;gap:38px;margin-bottom:38px} .is-sample .fb__tx{font-size:19px;font-weight:600;letter-spacing:.16em;margin-bottom:12px} .is-sample .fb p{font-size:13.5px;color:var(--ink-2);line-height:1.7;max-width:300px} .is-sample .fgrid h4{font-size:13px;font-weight:500;letter-spacing:.02em;margin-bottom:14px} .is-sample .news{display:flex;gap:0;max-width:290px} .is-sample .news input{flex:1;border:1px solid var(--line);border-right:0;background:var(--surface);font:inherit;font-size:13px; padding:10px 12px;outline:none;border-radius:var(--radius) 0 0 var(--radius);min-width:0} .is-sample .news input:focus{border-color:var(--muted)} .is-sample .news button{width:42px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink); border-radius:0 var(--radius) var(--radius) 0;font-size:15px;line-height:1;transition:all var(--ease)} .is-sample .news button:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .is-sample .news__note{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.6} .is-sample .faddr{font-size:13.5px;color:var(--ink-2);line-height:1.9} .is-sample .social{display:flex;gap:9px} .is-sample .social a{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--surface); display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-2);transition:all var(--ease)} .is-sample .social a:hover{background:var(--ink);border-color:var(--ink);color:#fff} /* 社交图标占位：链接后置阶段再填，但外观必须与成品一致（占位≠缺项） */ .is-sample .social__ph{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--surface); display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-2)} .is-sample .fbot{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between; align-items:center;font-size:12.5px;color:var(--muted);gap:16px;flex-wrap:wrap} .is-sample .fbot ul{display:flex;gap:22px} .is-sample .fbot a:hover{color:var(--ink)} /* ---------- 响应式 ---------- */ @media (max-width:1024px){ .is-sample .cards3{grid-template-columns:repeat(2,1fr);gap:28px} .is-sample .fgrid{grid-template-columns:1fr 1fr;gap:30px} .is-sample .mainnav{display:none}.is-sample .burger{display:block;margin-left:auto}.is-sample .hdr-search{display:none} } @media (max-width:767px){ .is-sample .sec{padding:54px 0} .is-sample .cards3{grid-template-columns:1fr;gap:24px} .is-sample .hero{height:auto;min-height:0;max-height:none;padding:118px 0 66px} .is-sample .hero__slide{position:relative;inset:auto} .is-sample .hero__slide:not(.on){display:none} .is-sample .hero h1{font-size:31px} .is-sample .hero p{font-size:15.5px} .is-sample .quote{padding:58px 0} .is-sample .quote blockquote{font-size:21px} .is-sample .bigh{padding:58px 0} .is-sample .bigh__h{font-size:27px} .is-sample .bigh__p{font-size:18px} .is-sample .mag{grid-template-columns:1fr} .is-sample .mag__a, .is-sample .mag__b, .is-sample .mag__c{grid-column:auto} .is-sample .vwall{height:290px} .is-sample .fgrid{grid-template-columns:1fr;gap:26px} .is-sample .sec__head h2{font-size:25px} .is-sample .headrow h2{font-size:23px} .is-sample .rail__card{flex:0 0 78%} .is-sample .hl__card{flex:0 0 86%} .is-sample .hl__media{gap:8px;padding:8px} } /* ========================================================================== 页面样张公共补充：顶条 / 面包屑 / 页头区 / 筛选 / 产品卡 / 详情 / 表单等 ========================================================================== */ /* 顶部「设计样张」提示条，避免被误认成正式页面 */ /* 面包屑 */ .is-sample .crumbs{ font-size: 12.5px; color: var(--muted); padding: 18px 0 0; } .is-sample .crumbs a:hover{ color: var(--ink); } .is-sample .crumbs i{ font-style: normal; padding: 0 7px; opacity: .55; } /* 页头区 */ .is-sample .pagehead{ padding: 26px 0 30px; } .is-sample .pagehead h1{ font-size: 38px; font-weight: 400; letter-spacing: -.014em; line-height: 1.25; margin-bottom: 12px; } .is-sample .pagehead p{ font-size: 16px; font-weight: 300; color: var(--ink-2); max-width: 720px; line-height: 1.7; } .is-sample .pagehead__row{ display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .is-sample .pagehead__act{ margin-left: auto; display: flex; gap: 10px; align-items: center; } /* 筛选芯片 + 计数 + 排序 */ .is-sample .filters{ display: flex; gap: 9px; flex-wrap: wrap; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .is-sample .chip{ display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); transition: all var(--ease); } .is-sample .chip:hover{ border-color: var(--ink-2); color: var(--ink); } .is-sample .chip.on{ background: var(--ink); border-color: var(--ink); color: #fff; } .is-sample .chip em{ font-style: normal; opacity: .6; font-size: 12.5px; } .is-sample .metabar{ display: flex; align-items: center; gap: 16px; padding: 16px 0 22px; flex-wrap: wrap; } .is-sample .metabar__count{ font-size: 13.5px; color: var(--muted); } .is-sample .metabar__sort{ margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); } .is-sample .metabar__sort select{ font: inherit; font-size: 13.5px; padding: 8px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius); } /* 产品网格：4 列，图片 1:1，卡片只有标题 + 一行属性，没有多余图位 */ .is-sample .pgrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; padding-bottom: 8px; } .is-sample .pcard{ display: block; } .is-sample .pcard__media{ position: relative; aspect-ratio: 1 / 1; background: #eef0f2; overflow: hidden; } @supports not (aspect-ratio: 1 / 1){ .is-sample .pcard__media{ height: 0; padding-bottom: 100%; } } .is-sample .pcard__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; } .is-sample .pcard:hover .pcard__media img{ transform: scale(1.035); } .is-sample .pcard__media .ph{ position: absolute; inset: 0; height: auto; border: 0; box-shadow: none; } .is-sample .pcard__badge{ position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .12em; padding: 4px 9px; } .is-sample .pcard__bd{ padding: 13px 2px 0; } .is-sample .pcard__bd h3{ font-size: 15px; font-weight: 500; line-height: 1.45; margin-bottom: 4px; } .is-sample .pcard__bd p{ font-size: 12.5px; color: var(--muted); line-height: 1.55; } .is-sample .pcard:hover .pcard__bd h3{ text-decoration: underline; text-underline-offset: 3px; } /* 产品详情 */ .is-sample .pdp{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 46px; align-items: start; padding: 8px 0 10px; } .is-sample .pdp__main{ position: relative; aspect-ratio: 1 / 1; background: #eef0f2; } @supports not (aspect-ratio: 1 / 1){ .is-sample .pdp__main{ height: 0; padding-bottom: 100%; } } .is-sample .pdp__main img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .is-sample .pdp__thumbs{ display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .is-sample .pdp__thumbs span{ width: 76px; height: 76px; background: #eef0f2; position: relative; overflow: hidden; display: block; } .is-sample .pdp__thumbs img{ width: 100%; height: 100%; object-fit: cover; } .is-sample .pdp h1{ font-size: 30px; font-weight: 400; letter-spacing: -.012em; line-height: 1.3; margin-bottom: 10px; } .is-sample .pdp__meta{ font-size: 13.5px; color: var(--muted); margin-bottom: 20px; } .is-sample .spec{ width: 100%; border-collapse: collapse; margin: 4px 0 22px; } .is-sample .spec th, .is-sample .spec td{ text-align: left; font-size: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); } .is-sample .spec th{ width: 40%; color: var(--muted); font-weight: 400; } .is-sample .spec td{ color: var(--ink); } .is-sample .pdp__act{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } /* 富文本正文 */ .is-sample .prose{ max-width: 780px; } .is-sample .prose h2{ font-size: 26px; font-weight: 400; letter-spacing: -.01em; margin: 34px 0 12px; } .is-sample .prose h3{ font-size: 19px; font-weight: 500; margin: 26px 0 10px; } .is-sample .prose p{ font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--ink-2); margin-bottom: 14px; } .is-sample .prose ul{ list-style: none; margin: 0 0 16px; padding: 0; } .is-sample .prose li{ font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--ink-2); padding-left: 18px; position: relative; } .is-sample .prose li::before{ content: ""; position: absolute; left: 0; top: .78em; width: 7px; height: 1px; background: var(--ink-2); } /* 左正文 + 右要点 */ .is-sample .split{ display: grid; grid-template-columns: 1.25fr 1fr; gap: 52px; align-items: start; } .is-sample .sidenote{ background: var(--surface); border: 1px solid var(--line); padding: 24px 26px; } .is-sample .sidenote h4{ font-size: 15px; font-weight: 500; margin-bottom: 12px; } .is-sample .sidenote li{ font-size: 14px; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--line-2); } .is-sample .sidenote li:last-child{ border-bottom: 0; } /* 数字指标 */ .is-sample .stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; } .is-sample .stats b{ display: block; font-size: 40px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; } .is-sample .stats span{ display: block; font-size: 13px; color: var(--muted); margin-top: 8px; letter-spacing: .04em; } /* 时间线 */ .is-sample .tl{ position: relative; padding-left: 26px; } .is-sample .tl::before{ content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line); } .is-sample .tl__it{ position: relative; padding: 0 0 26px; } .is-sample .tl__it::before{ content: ""; position: absolute; left: -26px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); } .is-sample .tl__y{ font-size: 12.5px; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; } .is-sample .tl__it h3{ font-size: 17px; font-weight: 500; margin-bottom: 6px; } .is-sample .tl__it p{ font-size: 14.5px; color: var(--ink-2); } /* 资质卡片 */ .is-sample .certs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .is-sample .cert{ border: 1px solid var(--line); background: var(--surface); padding: 22px; } .is-sample .cert__im{ aspect-ratio: 3 / 4; background: #eef0f2; position: relative; margin-bottom: 16px; } @supports not (aspect-ratio: 3 / 4){ .is-sample .cert__im{ height: 0; padding-bottom: 133%; } } .is-sample .cert__im img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .is-sample .cert h3{ font-size: 15.5px; font-weight: 500; margin-bottom: 6px; } .is-sample .cert p{ font-size: 13px; color: var(--muted); } /* 表单 */ .is-sample .form{ max-width: 620px; } .is-sample .form .row2{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .is-sample .form label{ display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 7px; } .is-sample .form .input, .is-sample .form .textarea{ width: 100%; font: inherit; font-size: 14.5px; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius); } .is-sample .form .textarea{ min-height: 140px; resize: vertical; } .is-sample .form .input:focus, .is-sample .form .textarea:focus{ outline: none; border-color: var(--ink-2); } .is-sample .form .field{ margin-bottom: 16px; } .is-sample .form__note{ font-size: 12.5px; color: var(--muted); margin-top: 12px; } /* 结果列表 / 空状态 */ .is-sample .results__it{ display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); } .is-sample .results__im{ width: 96px; height: 96px; flex: 0 0 96px; background: #eef0f2; position: relative; overflow: hidden; } .is-sample .results__im img{ width: 100%; height: 100%; object-fit: cover; } .is-sample .results__tx h3{ font-size: 16.5px; font-weight: 500; margin-bottom: 5px; } .is-sample .results__tx p{ font-size: 13.5px; color: var(--muted); } .is-sample .empty{ text-align: center; padding: 60px 20px; color: var(--muted); } /* 响应式补充 */ @media (max-width: 1199px){ .is-sample .pgrid{ grid-template-columns: repeat(3, 1fr); } .is-sample .pdp{ gap: 34px; } } @media (max-width: 991px){ .is-sample .pgrid{ grid-template-columns: repeat(2, 1fr); } .is-sample .pdp{ grid-template-columns: 1fr; gap: 26px; } .is-sample .split{ grid-template-columns: 1fr; gap: 30px; } .is-sample .certs{ grid-template-columns: repeat(2, 1fr); } .is-sample .stats{ grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } .is-sample .pagehead h1{ font-size: 31px; } } @media (max-width: 767px){ .is-sample .pgrid{ grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } .is-sample .certs{ grid-template-columns: 1fr; } .is-sample .form .row2{ grid-template-columns: 1fr; } .is-sample .pdp h1{ font-size: 24px; } .is-sample .results__it{ gap: 14px; } .is-sample .results__im{ width: 74px; height: 74px; flex-basis: 74px; } } /* ========================================================================== 内页补充（products / product / search） 仅新增，不改动上面任何既有规则 —— 首页 home.html 不受影响。 1) 内页首屏没有深色大图，顶栏若保持透明会是「白字落在浅灰底」， 所以带 body.is-inner 的页面顶栏从进入页面起就是白底深字。 2) .btn--ghost 与线上模板（site/products/index.php）同名，补上样式。 ========================================================================== */ .is-sample body.is-inner .site-header{ background: rgba(255,255,255,.97); box-shadow: 0 1px 0 var(--line); } .is-sample body.is-inner .site-header .brand{ color: var(--ink); } .is-sample body.is-inner .site-header .mainnav a{ color: var(--ink-2); } .is-sample body.is-inner .site-header .mainnav a:hover, .is-sample body.is-inner .site-header .mainnav a.on{ color: var(--ink); } .is-sample body.is-inner .site-header .hdr-search input{ color: var(--ink); border-bottom-color: var(--line); } .is-sample body.is-inner .site-header .burger i{ background: var(--ink); } .is-sample body.is-inner .hdr-tools .btn--light{ background: var(--ink); color: #fff; } .is-sample body.is-inner .hdr-tools .btn--light:hover{ background: var(--ink-2); } .is-sample body.is-inner .crumbs{ padding-top: 96px; } /* .pcard__media 是 ，行内元素上的 aspect-ratio 不生效（实测 0×0，图看不见）， 补 display:block 后 1:1 正方形才成立 */ .is-sample .pcard__media{ display: block; } .is-sample .btn--ghost{ background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 9px 21px; } .is-sample .btn--ghost:hover{ border-color: var(--ink); background: var(--soft); } /* ========================================================================== 公共补充（统一收拢到这一处，页面里不要再各自写局部样式） 内页顶栏 / 通用按钮 / 区块基类 ========================================================================== */ /* 首页有深色首屏，顶栏是「透明 → 滚动变白」； 内页是浅灰底，必须用实底白顶栏，否则白字看不清。 内页用法： +
*/ .is-sample body.is-inner{ padding-top: var(--hh); } .is-sample .site-header--solid{ background: #fff; box-shadow: 0 1px 0 var(--line); } .is-sample .site-header--solid .brand{ color: var(--ink); } .is-sample .site-header--solid .mainnav a{ color: var(--ink-2); } .is-sample .site-header--solid .mainnav a:hover, .is-sample .site-header--solid .mainnav a.on{ color: var(--ink); } .is-sample .site-header--solid .hdr-search input{ color: var(--ink); border-bottom-color: var(--line); } .is-sample .site-header--solid .burger i{ background: var(--ink); } /* 次级按钮（描边） */ .is-sample .btn--ghost{ background: transparent; border: 1px solid var(--line); color: var(--ink); } .is-sample .btn--ghost:hover{ border-color: var(--ink); background: transparent; color: var(--ink); } /* 区块基类：与正式站点重建用同一套命名，便于后续落地 */ .is-sample .blk{ padding: 66px 0; } .is-sample .blk + .blk{ border-top: 1px solid var(--line); } .is-sample .blk--white{ background: #fff; } .is-sample .blk--grey{ background: var(--bg); } .is-sample .blk--full{ padding: 0; } .is-sample .blk__head{ max-width: 780px; margin-bottom: 26px; } .is-sample .blk__head--center{ margin-left: auto; margin-right: auto; text-align: center; } .is-sample .blk__title{ font-size: 30px; font-weight: 400; letter-spacing: -.012em; line-height: 1.3; } .is-sample .blk__sub{ font-size: 16px; font-weight: 300; color: var(--ink-2); line-height: 1.7; margin-top: 8px; } /* 产品卡媒体： 是行内元素，不加 display:block 会让 1:1 比例塌成 0 高、图片看不见 */ .is-sample .pcard__media{ display: block; } /* ========================================================================== 品牌 logo（真实素材：250 × 87 PNG 带透明通道） 实测该 logo 为深棕色（平均亮度 87，89% 像素偏深）， 所以压在首页深色首屏上时必须做纯白反白，否则看不清。 ========================================================================== */ .is-sample .brand img{ max-height: 34px; width: auto; display: block; } .is-sample .footer__logo{ max-height: 42px; width: auto; display: block; margin-bottom: 14px; } /* 首页顶栏：未吸顶时压在深色首屏上 -> logo 反白； 吸顶后顶栏变白 -> 还原 logo 本色。 用 filter 反白可以保留 PNG 的透明通道，不需要额外的白色版本素材。 */ .is-sample .site-header--transparent:not(.is-stuck) .brand img{ filter: brightness(0) invert(1); } @media (max-width: 767px){ .is-sample .brand img{ max-height: 28px; } .is-sample .footer__logo{ max-height: 34px; } } /* 待提供素材的占位按钮：保持按钮外观，但明确不可点 */ /* 待提供素材的按钮：外观与成品一致，只是暂不接功能（占位≠缺项） */ .is-sample .btn--soon{ cursor: not-allowed; } /* ========================================================================== 汉堡菜单（1024 以下主导航收起） 这段以前是缺失的：.mainnav 在 1024 以下直接 display:none， 而 .burger 只有样式、没有任何展开逻辑 —— 结果平板与手机上 完全点不出导航，看着像"除了当前页别的页都没做"。 ========================================================================== */ .is-sample button.burger{ background: none; border: 0; padding: 0; } .is-sample .burger{ cursor: pointer; } @media (max-width: 1024px){ /* 顶栏是 fixed，所以面板定位到它的下沿 */ .is-sample .mainnav{ display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; padding: 4px 22px 12px; background: rgba(255, 255, 255, .99); border-top: 1px solid var(--line); box-shadow: 0 14px 30px rgba(16, 24, 40, .12); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); max-height: calc(100vh - var(--hh)); overflow-y: auto; } .is-sample .mainnav.is-open{ display: flex; } /* 白底面板上文字必须是深色，否则看不见 */ .is-sample .mainnav a, .is-sample .site-header--solid .mainnav a, .is-sample body.is-inner .site-header .mainnav a{ color: var(--ink-2) !important; font-size: 15px; padding: 15px 0; border-bottom: 1px solid var(--line-2, #eef1f4); } .is-sample .mainnav a:last-child{ border-bottom: 0; } .is-sample .mainnav a.on, .is-sample .site-header--solid .mainnav a.on, .is-sample body.is-inner .site-header .mainnav a.on{ color: var(--ink) !important; } .is-sample .mainnav a.on::after{ display: none; } .is-sample .mainnav a:hover{ color: var(--ink) !important; } /* 展开时汉堡变成叉 */ .is-sample .burger i{ transition: background var(--ease), transform var(--ease), opacity var(--ease); } .is-sample .burger.is-open i:nth-child(1){ top: 6px; transform: rotate(45deg); } .is-sample .burger.is-open i:nth-child(2){ opacity: 0; } .is-sample .burger.is-open i:nth-child(3){ top: 6px; transform: rotate(-45deg); } } /* ============================================================================ 样张页面修正层（样张没有、但实际站必须显式压掉的规则） ========================================================================== */ /* 默认不预留顶栏高度（首页首屏是全幅通栏，顶栏压在图上）。 内页组会在下面的「组内联样式」里用两组类名把它改成 var(--hh)， 优先级更高，所以不需要 !important，也不会被这份默认值挡住。 */ .is-sample { padding-top: 0; } /* 压掉 bootstrap 的 img{max-width:100%;height:auto}：会改写占位块/图片的自然尺寸 */ .is-sample img { max-width: none; } /* 图集与设备卡放真实图片时，填满容器并 cover 裁切 （样张里这些位置是纯色占位块，没有针对 img 的规则） */ .is-sample .mag figure { overflow: hidden; } /* 关键：给 img 自己定 aspect-ratio + height:auto，不依赖外层 grid/flex 的行为。 上一版写 height:100% 依赖容器高度，实测图集 3 张被横向拉伸变形。 */ .is-sample .mag figure img { width: 100%; height: auto; display: block; object-fit: cover; } /* ★ 关键修正：card3 与 hl 两个卡片的 img 从来没有配过 object-fit， 也从来没有从文档流里拿出去。实测（_build 探针量真实渲染盒）： .card3__im 盒子 361x600（应为 361x190）→ 图被拉成 0.60 的竖图 .hl__big 被撑到 1200x1200 装进约 250 宽的列 → 严重拉伸 根因是 img 以自身固有尺寸参与布局，把 aspect-ratio 顶掉了。 唯一正确写法：盒子交代比例 + img 绝对定位铺满 + object-fit:cover， 即 .cert__im img 一直用的那套（证书图正是这样才正常）。 */ .is-sample .card3__im { position: relative; overflow: hidden; } .is-sample .card3__im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .is-sample .hl__big, .is-sample .hl__small { position: relative; overflow: hidden; } .is-sample .hl__big img, .is-sample .hl__small img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .is-sample .mag__a img { aspect-ratio: 2.6 / 1; } .is-sample .mag__b img, .is-sample .mag__c img { aspect-ratio: 1.55 / 1; } /* 联系页地图：盒子交代比例 + 子元素绝对定位铺满，与 .cert__im 同一套写法。 样张只给 .cmap 定了 aspect-ratio，没给里面的子元素定尺寸， 真图/iframe 会以自然尺寸参与布局把盒子顶破。 */ .is-sample .cmap { position: relative; overflow: hidden; background: #eef1f4; } .is-sample .cmap img, .is-sample .cmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } .is-sample .rail__im img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } /* 视频链接留空时播放键不可点：避免出现「按了没反应」的死按钮 */ .is-sample .vwall[data-video=""] .vwall__play { cursor: default; } /* 样张页头的导航下拉。样张的 .mainnav 是 flex 横排，所以每个顶级项外面包一层 .mainnav__item 用来定位面板；面板是白底深字（顶栏透明，不能用白字）。 */ .is-sample .mainnav__item { position: relative; } .is-sample .mainnav .caret { display: inline-block; width: 0; height: 0; margin-left: 5px; border: 4px solid transparent; border-top-color: currentColor; vertical-align: 2px; } /* 用 display 切换而不用 opacity 淡入：淡入过程中面板是半透明的， 底下的页面标题会透出来，看起来像「两层字叠在一起」。 */ .is-sample .mainnav .subnav { position: absolute; --subgap: 16px; top: calc(100% + var(--subgap)); left: 50%; transform: translateX(-50%); min-width: 214px; padding: 8px 0; background: #fff; border: 1px solid var(--line, #e6e9ee); box-shadow: 0 14px 30px rgba(16,24,40,.14); display: none; z-index: 50; } /* --------------------------------------------------------------------------- 悬停断层修复（客户实测：鼠标从一级项往下移、还没碰到二级项，菜单就消失了） 原因：面板放在 calc(100% + 16px)，也就是离一级项还有 16px 空隙； 而显示条件挂在一级项的 :hover 上（.mainnav__item.has-sub:hover > .subnav）。 鼠标穿过那 16px 时，既不在一级项里、也不在面板里，:hover 立刻失效 → 面板收起。 修法：给面板加一条**透明的桥**，把这段空隙填满。 桥是面板的一部分，而面板本身又是 .mainnav__item 的子元素 —— 所以指针落在桥上时，一级项依然处于 :hover，面板不会收。 间距与桥高共用 --subgap 变量，将来改间距也不会再错位。 两点安全性： · 只在桌面启用（面板是浮层）。窄屏是内嵌列表、面板 position:static， 加了桥反而会跑位，所以用 min-width 限住。 · 面板关闭时是 display:none，桥随之不存在，不会遮挡下面内容的点击。 --------------------------------------------------------------------------- */ @media (min-width: 1025px) { .is-sample .mainnav .subnav::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--subgap)); height: var(--subgap); } } .is-sample .mainnav__item.has-sub:hover > .subnav { display: block; } /* 选择器必须比样张的 .mainnav a 更具体，否则白字落在白面板上看不见 */ .is-sample .mainnav .subnav a { display: block; padding: 9px 18px; font-size: 13.5px; color: var(--ink-2, #4a525c); white-space: nowrap; } .is-sample .mainnav .subnav a:hover { background: var(--line-2, #f2f4f7); color: var(--ink, #14181d); } /* 窄屏：样张把 .mainnav 变成竖向抽屉，浮层面板会溢出，改成内嵌列表 */ @media (max-width: 1024px) { /* 桌面规则用的是 display:none 收起，这里必须显式 display:block 放出来， 否则窄屏上子菜单会一直是隐藏的（抽屉里看不到二级项）。 */ .is-sample .mainnav .subnav { display: block; position: static; transform: none; min-width: 0; padding: 0 0 0 16px; background: none; border: 0; box-shadow: none; } .is-sample .mainnav .subnav a { padding: 10px 0; white-space: normal; } } /* 证书超过首屏张数（后台 certs.front_limit）时收起，点按钮原地展开。 公司简介页与资质认证页共用。JS 失效时由