/* ============================================================ UTON · 子页共享样式(浅色实用页 + contact 暗页) 依赖 tokens.css / main.css 的 .plate .ph .m .btn .pill 等 ============================================================ */ .subpage{padding-top:clamp(120px,13vh,168px);min-height:100vh;} .page-head{margin-bottom:clamp(48px,7vw,96px);} .page-head .m{color:var(--red);display:block;margin-bottom:14px;} .page-head h1{font-size:clamp(40px,6.2vw,92px);line-height:1.0;letter-spacing:-.05em; max-width:16ch;text-wrap:balance;} /* products 页头(2026-07-22 用户定版):主行大字 + 副行略小, 第二行 company 式右错开;入场走全站共享 .is-riser */ .ph-title .rise-ln{display:block;} .ph-title .ph-l1{font-size:clamp(48px,8.2vw,124px);line-height:.95;letter-spacing:-.04em; text-transform:uppercase;} .ph-title .ph-l2{font-size:clamp(19px,2.5vw,38px);line-height:1.15;letter-spacing:-.03em; margin:clamp(10px,1.6vh,18px) 0 0;} .page-head .ph-sub{margin-top:22px;font-size:clamp(16px,1.7vw,21px);line-height:1.35;letter-spacing:-.03em; color:var(--fg-soft);max-width:56ch;text-wrap:pretty;} .sec{margin-bottom:clamp(64px,9vw,132px);} .sec-head{display:flex;align-items:baseline;gap:clamp(14px,1.4vw,22px); margin-bottom:clamp(26px,3vw,40px);border-bottom:1px solid var(--line);padding-bottom:clamp(12px,1.4vw,20px);} .sec-head .no{font-family:var(--mono);font-size:11px;color:var(--fg-soft);opacity:.7;} /* 原来上限只有 30px,和 92px 的页头之间断层太大,章节读起来很局促 */ .sec-head h2{font-size:clamp(24px,3.6vw,52px);line-height:1.05;letter-spacing:-.04em;} /* nav 当前页高亮 */ .nav a.nl.on{color:var(--red);} /* 豁免 .page-head .m 的红色 kicker 规则 */ .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none;} /* 标准表(原 .table-frame / table.data 无定义) */ .table-frame{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;} table.data{width:100%;border-collapse:collapse;min-width:640px;} table.data th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--fg-soft);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);} table.data td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;} table.data tbody tr:last-child td{border-bottom:none;} table.data td.m2{font-family:var(--mono);font-size:12px;} @media (max-width:900px){ } /* ============================================================ products 目录页(2026-07-17,参考站结构映射): 紧凑标题带 + 三入口 + 筛选轨 + 卡片流(网格/列表可切) ============================================================ */ /* 三入口:超大字 + 上标计数 + 一行说明。 原来是三张带边框的卡,里面塞了编号眉、子家族圆点列表和"N PRODUCTS →", 信息层级压得太密。这里只留"名字 / 数量 / 给谁用"三件事。 */ .entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(26px,3.4vw,54px);padding:clamp(8px,1.6vh,20px) 0 clamp(20px,3vh,36px); border-bottom:1px solid var(--line);} .entry{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;} .en-name{font-size:clamp(26px,3.1vw,44px);line-height:1.06;letter-spacing:-.04em; font-weight:500;color:var(--ink);text-wrap:balance; transition:color .25s var(--ease);} /* 计数做上标,不再单占一行 */ .en-n{font-family:var(--mono);font-size:.32em;font-weight:500;letter-spacing:.02em; color:var(--red);vertical-align:super;margin-left:.35em;} .en-who{font-size:14px;line-height:1.6;color:var(--fg-soft);max-width:34ch;} .entry:hover .en-name,.entry:focus-visible .en-name{color:var(--red);} .entry:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:2px;} /* 已选中的入口保持墨色,其余淡出 —— 与参考站同一机制 */ .entries.has-sel .entry:not(.on) .en-name{color:var(--grey-ribbon);} .entries.has-sel .entry:not(.on) .en-who{opacity:.6;} /* 该组暂无产品:点进去是空的,所以说清楚而不是显示一个可点的 0 */ .entry.empty{pointer-events:none;} .entry.empty .en-name{color:var(--grey-ribbon);} .entry.empty .en-n{color:var(--grey-ribbon);} .entry.empty .en-who::after{content:' 素材待客户提供,暂未上架。';color:var(--fg-soft);opacity:.75;} .chips-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;} .chip{font-family:var(--mono);font-size:11px;letter-spacing:.05em;border:1px solid var(--line);border-radius:999px; padding:6px 13px;cursor:pointer;color:var(--fg-soft);user-select:none; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);} .chip:hover{color:var(--red);border-color:var(--red);} .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);} .catalog{display:grid;grid-template-columns:230px 1fr;gap:clamp(18px,3vw,40px);align-items:start;} .filter-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px;} .f-group{display:flex;flex-direction:column;gap:2px;} .f-group > .m{color:var(--fg-soft);letter-spacing:.1em;margin-bottom:6px;} /* 行高 44px:原来只有 22px,远低于触摸目标下限,手机上很难点准。 负外边距让文字仍与分组标题左对齐,视觉密度不变,可点区域翻倍。 */ .f-opt{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;color:var(--fg); min-height:44px;padding:0 8px;margin:0 -8px;border-radius:var(--r); transition:background .18s var(--ease),color .18s var(--ease);} .f-opt:hover{background:var(--paper-deep);} .f-opt input{accent-color:var(--red);width:14px;height:14px;cursor:pointer;flex:none; margin:0;} /* 浏览器默认给复选框 ~4px 外边距,会让它比分组标题右移 */ .f-opt .cnt{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--fg-soft);} /* 该项当前没有任何产品:保留可见(它是真实产品线,只是素材未到), 但置灰禁用,避免点进去筛出一片空白 */ .f-opt.empty{color:var(--grey-ribbon);cursor:default;} .f-opt.empty:hover{background:none;} .f-opt.empty input{pointer-events:none;} .f-opt.empty .cnt::after{content:' 待上架';letter-spacing:0;} .f-clear{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--red);cursor:pointer; background:none;border:none;padding:0;text-align:left;} .cat-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:16px;} .cat-count{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--fg-soft);} .cat-count b{color:var(--ink);} .view-sw{margin-left:auto;display:flex;gap:6px;} .view-sw button{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;border:1px solid var(--line); background:transparent;color:var(--fg-soft);padding:6px 12px;border-radius:var(--r);cursor:pointer; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);} .view-sw button.on{background:var(--ink);color:var(--paper);border-color:var(--ink);} /* 下限 230 在放宽容器后会排成 6 列 x 233px —— 卡片反而比原来小。 算过:300 是拐点,1440 排 3 列 x 349px、1920 排 4 列 x 359px,两档都比原来的 289 大。 */ .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:clamp(14px,1.4vw,22px);} /* ---- 卡片:参考站 /products/ 实测 ---- 卡 352 宽 / 图 352x405(比 0.869)/ 圆角 20 / 图↓名 10 / 名↓元信息 10 / 卡间 20 我们的容器宽度不同,所以尺寸走比例;间距与圆角是绝对值,原样落地 */ .pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit; opacity:1;transition:transform .4s var(--ease),opacity .5s var(--ease);} .pcard.hide{display:none;} /* 不再整卡上背景:参考站的卡是裸的(无边框无底色),悬停只让图片微推 */ .pcard:hover{transform:translateY(-4px);} /* 7/8 = 0.875,对参考站实测的 352/405 = 0.869 */ .pcard .pc-img{aspect-ratio:1/1;overflow:hidden;background:var(--paper-deep); border-radius:var(--r);} .pcard .pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);} .pcard:hover .pc-img img{transform:scale(1.04);} /* 内距归零:参考站卡片文字与图左缘齐平,不再内缩 */ .pcard .pc-body{padding:10px 0 0;display:flex;flex-direction:column;gap:10px;} /* 18/600/lh 1.2。字重 600 而非全站标题的 500:这是密排网格里的 UI 级标题, 与按钮、mono 标签同属"UI 层",字重统一那轮就明确把这一层排除在外了 */ .pcard h3{font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.01em;} /* 元信息:等宽大写两行,与参考站 DM Mono 12/500/lh 1.44 同规格 */ .pc-meta{margin:0;font-family:var(--mono);font-size:12px;font-weight:500; line-height:1.44;letter-spacing:0;text-transform:uppercase;color:var(--fg-soft); display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;} /* 真截断了才补标记 —— data-cut 由 products.js 用 scrollHeight 实测后写入 */ .pc-meta[data-cut]::after{content:" [...]";} /* 列表视图:图缩到 120 方块,文字排右边 */ .card-grid.list{grid-template-columns:1fr;} .card-grid.list .pcard{flex-direction:row;align-items:center;gap:16px;} .card-grid.list .pc-img{width:120px;min-width:120px;aspect-ratio:1/1;} .card-grid.list .pc-body{padding:0;} /* 进场 */ .pcard.rv{opacity:0;transform:translateY(20px);} .pcard.rv.in{opacity:1;transform:none;} /* ============================================================ 产品详情浮层:左图放大 / 右参数(亚克力板 + 背景模糊) 点卡片打开。左 object-fit:contain 完整不裁,右侧型号/品名/属性/颜色。 ⚠ 可见性只由 [hidden] 控制;入场只动 transform,绝不动 opacity —— 动画不跑(冻结/无障碍/CDN 挂)也照常可见,失败方向必须是安全的 ============================================================ */ .pdet{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; padding:clamp(16px,3vw,48px);} .pdet[hidden]{display:none;} /* 背景:压暗 + 模糊,把身后的密排网格推远 */ .pdet-bd{position:absolute;inset:0;background:rgba(16,18,22,.5); backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05); opacity:0;transition:opacity .3s var(--ease);} .pdet.is-in .pdet-bd{opacity:1;} /* 卡:亚克力磨砂。不透明度给到 .92,保证右侧参数在磨砂上仍然清晰 */ .pdet-card{position:relative;z-index:1;width:min(1060px,100%);max-height:88vh;overflow:hidden; display:grid;grid-template-columns:1.12fr .88fr; border-radius:var(--r);border:1px solid rgba(255,255,255,.6); background:rgba(244,243,239,.92); backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3); box-shadow:0 40px 120px -24px rgba(10,12,16,.55);} .pdet.is-in .pdet-card{animation:pdet-rise .34s var(--ease);} @keyframes pdet-rise{from{transform:translateY(14px);}} /* 左:放大的实拍。contain 不裁,看得清细节;底是浅灰给白料留反差 */ .pdet-img{margin:0;background:var(--paper-deep);display:flex;align-items:center;justify-content:center; padding:clamp(16px,2.4vw,36px);min-height:0;} .pdet-img img{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;display:block; border-radius:calc(var(--r) - 8px);} /* 右:参数 */ .pdet-info{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:14px;overflow:auto;} /* --red #e8331f 在磨砂卡上只有 3.77:1,12px 过不了 4.5。用深红 #b02513(已有 token)= 6.2:1 */ .pd-model{color:#b02513;letter-spacing:.14em;font-size:12px;} .pd-name{font-size:clamp(22px,2.3vw,32px);line-height:1.15;letter-spacing:-.02em; color:var(--ink);font-weight:600;} /* 15:1 */ .pd-spec{margin:6px 0 0;display:flex;flex-direction:column;gap:0;} .pd-spec > div{display:flex;justify-content:space-between;gap:16px; padding:11px 0;border-top:1px solid var(--line);} .pd-spec dt{margin:0;color:var(--fg-soft);letter-spacing:.1em;font-size:10.5px;} /* 9.36:1 */ .pd-spec dd{margin:0;color:var(--ink);font-size:14px;text-align:right;letter-spacing:-.01em;} .pd-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;} .pd-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--fg); border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:rgba(255,255,255,.55);} .pd-cta{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:8px;min-height:44px;} .pd-note{color:var(--fg-soft);line-height:1.7;margin:2px 0 0;} /* 9.36:1 */ .pdet-x{position:absolute;top:12px;right:12px;z-index:2;width:42px;height:42px;border-radius:999px; border:1px solid var(--line);background:rgba(255,255,255,.72);color:var(--ink); font-size:22px;line-height:1;cursor:pointer;transition:background .2s var(--ease);} .pdet-x:hover{background:#fff;} .pdet-x:focus-visible,.pd-cta:focus-visible{outline:2px solid var(--red);outline-offset:3px;} @media (max-width:720px){ /* 窄屏改上下:图在上、参数在下,整卡可滚 */ .pdet-card{grid-template-columns:1fr;max-height:92vh;overflow:auto;} .pdet-img{max-height:54vh;} .pdet-img img{max-height:50vh;} } @media (prefers-reduced-motion:reduce){ .pdet-bd{transition:none;} .pdet.is-in .pdet-card{animation:none;} } @media (max-width:900px){ .catalog{grid-template-columns:1fr;} .filter-rail{position:static;flex-direction:row;flex-wrap:wrap;gap:16px;} } @media (prefers-reduced-motion:reduce){ .pcard.rv{opacity:1;transform:none;} .pcard,.entry,.entry .en-name,.pcard .pc-img img{transition:none;} } /* ============================================================ quality · 页头标题:逐字遮罩入场 + 光标邻近变量字重 宽度在 JS 里按基准字重锁死 → 字重变化不引起回流抖动 ============================================================ */ .fx-t .w{display:inline-block;overflow:hidden; padding-bottom:.14em;margin-bottom:-.14em; /* 护住下伸部,遮罩不切字 */ vertical-align:top;} .fx-t .c{display:inline-block;text-align:center;overflow:visible; will-change:transform,font-variation-settings;} .fx-t.is-split .c{transform:translateY(112%);opacity:0;} .fx-t.is-in .c{transform:none;opacity:1; transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .7s var(--ease);} @media (prefers-reduced-motion:reduce){ .fx-t.is-in .c{transform:none;opacity:1;transition:none;} } /* ============================================================ Technology 02 · 日夜对照滑杆 分隔条即"反光条":retro-silver 底,越靠夜侧回光越强(--fire 由 JS 喂) ============================================================ */ .cmp-rig{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden; border-radius:var(--r);border:1px solid var(--line);background:var(--paper-deep); --pos:50%;--fire:.5;touch-action:pan-y;} .cmp-rig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center;display:block;user-select:none;-webkit-user-drag:none;} /* 上层只裁剪,不缩放 —— 两张图必须用同一套 object-fit/position,否则拖动时会错位 */ .cmp-top{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos));} .cmp-strip{position:absolute;top:0;bottom:0;left:var(--pos);width:10px;margin-left:-5px; cursor:ew-resize;touch-action:none;z-index:3; display:flex;align-items:center;justify-content:center;} .cmp-strip::before{content:'';position:absolute;top:0;bottom:0;left:3px;width:4px; background:linear-gradient(to right,#9aa1a6,var(--retro-silver) 42%,#f2f5f7 50%,var(--retro-silver) 58%,#9aa1a6); box-shadow:0 0 calc(6px + var(--fire) * 26px) rgba(255,246,230,calc(var(--fire) * .85));} /* flex:none 不可省:父级只有 10px 宽,抓手会被 flex 压扁到 23px,跌破 44px 触摸下限 */ .cmp-grip{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:999px; background:var(--retro-silver);border:1px solid rgba(22,24,28,.22); display:flex;align-items:center;justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.35);} .cmp-grip svg{width:22px;height:22px;fill:none;stroke:#16181c;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;} .cmp-strip:focus-visible{outline:none;} .cmp-strip:focus-visible .cmp-grip{outline:2px solid var(--red);outline-offset:3px;} .cmp-tag{position:absolute;bottom:14px;padding:7px 13px;border-radius:var(--r);z-index:2; font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; pointer-events:none;} .cmp-tag.on-day{left:14px;background:rgba(244,243,239,.9);color:#16181c;} /* 深墨压浅底 */ .cmp-tag.on-night{right:14px;background:rgba(11,14,20,.72);color:var(--beam);} /* 米光压夜底 */ @media (max-width:700px){ .cmp-rig{aspect-ratio:4/5;} /* 竖屏给衣服留出身长 */ .cmp-tag{font-size:10px;padding:6px 10px;} } @media (prefers-reduced-motion:reduce){ .cmp-strip::before{box-shadow:none;} } /* ============================================================ Technology 01 · 玻璃微珠原理(滚动播放) 满幅暗场 + 虚化材质底 + 亚克力浮层。参考站的机制:背景一张大虚化材质, 信息浮在半透明毛玻璃面板上;此处用我们自己的分段反光条微距做底。 ============================================================ */ .bead-lede{line-height:1.55;max-width:62ch;color:var(--fg-soft);font-size:15px; margin:0 0 clamp(22px,3.5vh,40px);} /* 满幅:从 .wrap 的宽度限制里破出来 */ .bead-rail{position:relative;height:340vh; margin-left:calc(50% - var(--bleed) / 2);margin-right:calc(50% - var(--bleed) / 2);width:var(--bleed);} .bead-sticky{position:sticky;top:0;height:100vh;overflow:hidden;} .bead-bg{position:absolute;inset:-4%;background:url(../assets/img/bead-bg.jpg) center/cover no-repeat; transform:scale(1.06);} /* 压一层暗纱,保证面板上的字始终够对比度(底图右侧偏亮) */ .bead-scrim{position:absolute;inset:0; background:linear-gradient(100deg,rgba(8,10,15,.88) 0%,rgba(8,10,15,.62) 42%,rgba(8,10,15,.78) 100%);} .bead-in{position:relative;height:100%;display:grid; grid-template-columns:minmax(280px,29%) 1fr;align-items:center; gap:clamp(20px,3vw,48px);padding:clamp(20px,4vh,54px) clamp(20px,5vw,88px);} /* 亚克力面板 */ .glass-panel{background:rgba(255,246,230,.06);border:1px solid rgba(255,246,230,.14); border-radius:var(--r);backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15); box-shadow:0 20px 60px rgba(0,0,0,.42);} .bead-steps{list-style:none;margin:0;padding:clamp(14px,2vh,22px); display:flex;flex-direction:column;gap:4px;} .bead-steps li{padding:clamp(13px,1.8vh,20px) clamp(12px,1.4vw,18px);border-radius:var(--r); transition:background .45s var(--ease),opacity .45s var(--ease);opacity:.42;} .bead-steps li.on{background:rgba(255,246,230,.09);opacity:1;} .bead-steps /* --red 在这里过不了:高亮行有 rgba(255,246,230,.09) 底,合成后底色是 rgb(33,35,39), #e8331f 压上去只有 3.69:1 —— 而这恰恰是用户正在读的那一行(普通行反而有 4.53:1)。 提亮到 #f4664f:高亮 5.14:1 / 普通 6.31:1,两态都过,红仍然是红 */ .bs-no{color:#f4664f;letter-spacing:.14em;display:block;margin-bottom:7px;} .bead-steps h3{margin:0 0 7px;font-size:clamp(19px,1.7vw,25px);letter-spacing:-.04em; color:var(--beam);font-weight:500;} .bead-steps p{margin:0;font-size:13.5px;line-height:1.55;color:#c3c7cd; max-height:0;overflow:hidden;opacity:0; transition:max-height .5s var(--ease),opacity .4s var(--ease);} .bead-steps li.on p{max-height:12em;opacity:1;} .bead-stage{position:relative;height:100%;display:flex;align-items:center;justify-content:center;} /* 尾巴已算到收在框内,这里必须裁掉溢出 —— 否则光路会伸到左面板上,并把页面撑出横向滚动条 */ #bead-svg{width:100%;max-width:min(112vh,1000px);height:auto;overflow:hidden;} .bd-bead{stroke:rgba(255,246,230,.34);stroke-width:1.5;} .bd-mirror{fill:none;stroke:var(--retro-silver);stroke-width:7;stroke-linecap:round;opacity:.85;} .bd-ray{fill:none;stroke:var(--beam);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;} #bead-svg.lit .bd-ray{filter:drop-shadow(0 0 9px rgba(255,246,230,.75));} .bd-ghost{fill:none;stroke:rgba(255,246,230,.42);stroke-width:2;stroke-dasharray:7 8; opacity:0;transition:opacity .6s var(--ease);} #bead-svg.show-ghost .bd-ghost{opacity:1;} .bd-mark circle{fill:var(--red);opacity:0;transition:opacity .4s var(--ease);} .bd-mark text{fill:var(--beam);font-family:var(--mono);font-size:17px;opacity:0; transition:opacity .4s var(--ease);} .bd-mark.on circle,.bd-mark.on text{opacity:1;} /* 读数卡:浮在演示区右下 */ .bead-card{position:absolute;right:clamp(20px,5vw,88px);bottom:clamp(20px,4vh,54px); margin:0;padding:clamp(14px,1.8vh,20px) clamp(16px,1.6vw,22px); display:grid;grid-template-columns:repeat(3,auto);gap:6px clamp(16px,2vw,30px); max-width:min(92vw,560px);} .bead-card dt{color:rgba(255,246,230,.5);letter-spacing:.13em;margin:0 0 5px;} .bead-card dd{margin:0;color:var(--beam);font-size:clamp(15px,1.5vw,20px);letter-spacing:.01em;} .bead-note{grid-column:1/-1;margin:8px 0 0;color:rgba(255,246,230,.5); letter-spacing:.05em;text-transform:none;line-height:1.7;} @media (max-width:900px){ .bead-rail{height:300vh;} .bead-in{grid-template-columns:1fr;grid-template-rows:auto 1fr; align-content:start;gap:14px;padding-top:clamp(16px,3vh,28px);} .bead-steps{flex-direction:row;overflow-x:auto;gap:8px;} .bead-steps li{min-width:64vw;} .bead-card{position:static;margin-top:12px;grid-template-columns:repeat(2,auto);} /* 视图框改成 3:2 后,窄列里球只占宽度的 20%,缩得太小。 这里让 SVG 超出列宽再由 overflow 裁掉两端尾巴 —— 球放大到可读, 光线仍是从画面外进、从画面外出,读起来像一个裁切镜头,不损原意 */ .bead-stage{overflow:hidden;} #bead-svg{max-width:none;width:168%;margin-left:-34%;} } @media (prefers-reduced-motion:reduce){ .bead-rail{height:auto;} .bead-sticky{position:static;height:auto;min-height:82vh;} .bead-steps li{opacity:1;} .bead-steps p{max-height:none;opacity:1;} } /* CDN 挂掉时 bead.js:13 见 gsap undefined 直接 return,.on 永远加不上, 三段说明就锁死在 max-height:0;opacity:0 —— 实测确实全不可见。 降级成"三段全展开":动效没了,内容一个字不少。 规则与上面 reduced-motion 那组同值,不另造一套约定 */ html.no-gsap .bead-rail{height:auto;} html.no-gsap .bead-sticky{position:static;height:auto;min-height:82vh;} html.no-gsap .bead-steps li{opacity:1;} html.no-gsap .bead-steps p{max-height:none;opacity:1;} /* backdrop-filter 不支持时退回实底,别让面板变成透明糊字 */ @supports not (backdrop-filter: blur(4px)){ .glass-panel{background:rgba(11,14,20,.86);} } /* ============================================================ Company · 沿革光束(独立满幅暗场章节) 版块标题写着 "The timeline is a beam" —— 这里让它不再是比喻: 滚动驱动一束光沿轨道推进,经过哪个节点,哪段沿革就点亮,前一段退暗。 同屏只有一个里程碑是主角,所以标题能放到 88px 而不拥挤。 为什么主角是名称不是年份:四个年份里三个还是占位符(20—), 放大年份会得到三个巨大的破折号。名称是真内容,所以名称当主角。 ============================================================ */ .beamline{position:relative; margin-left:calc(50% - var(--bleed) / 2);margin-right:calc(50% - var(--bleed) / 2); width:var(--bleed);height:320vh;background:var(--night);color:var(--retro-silver);} /* 高度必须落在 sticky 的直接父级上,否则 sticky 没有行程可走(第一版就是这么不动的) */ .bl-rail{height:100%;} .bl-sticky{position:sticky;top:0;height:100vh;overflow:hidden; display:flex;flex-direction:column;justify-content:center; padding:clamp(72px,10vh,120px) var(--edge) clamp(56px,8vh,96px);} /* 光头附近的环境光:跟着 --p 横向移动,像真有一束光在扫 */ .bl-glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 55% at calc(var(--p,0) * 100%) 62%, rgba(255,246,230,.13),rgba(255,246,230,.04) 42%,transparent 72%);} /* ---- 里程碑:同屏只有一个亮着 ---- */ .bl-stage{position:relative;flex:1;list-style:none;margin:0;padding:0;min-height:0;} /* 宽度上限分开设:22ch 是给大标题换行用的,加在整个 step 上会把段落也勒到 19ch */ .bl-step{position:absolute;inset:auto 0 0 0; opacity:0;transform:translateY(18px); transition:opacity .5s var(--ease),transform .6s var(--ease);} .bl-step.on{opacity:1;transform:none;} .bl-year{display:block;color:var(--red);letter-spacing:.16em;margin-bottom:clamp(14px,2vh,24px);} .bl-year sup{opacity:.6;} .bl-step h3{margin:0;font-size:clamp(38px,6.4vw,88px);line-height:1.02;letter-spacing:-.05em; font-weight:500;color:var(--beam);text-wrap:balance;max-width:16ch; text-shadow:0 0 60px rgba(255,246,230,.18);} .bl-step p{margin:clamp(16px,2.4vh,28px) 0 0;font-size:clamp(15px,1.5vw,19px);line-height:1.6; color:#c3c7cd;max-width:46ch;text-wrap:pretty;} /* ---- 光束轨道 ---- */ .bl-beam{position:relative;height:44px;flex:none;margin-top:clamp(32px,5vh,64px);} .bl-track,.bl-lit{position:absolute;left:0;top:21px;height:2px;} .bl-track{right:0;background:rgba(255,246,230,.16);} .bl-lit{width:calc(var(--p,0) * 100%);background:var(--red);} .bl-head{position:absolute;top:22px;left:calc(var(--p,0) * 100%);width:10px;height:10px; margin:-5px 0 0 -5px;border-radius:50%;background:var(--beam); box-shadow:0 0 12px 3px rgba(255,246,230,.9),0 0 42px 10px rgba(255,246,230,.35);} /* 节点:四等分。--at 是序号,用它算位置,不写死百分比 */ .bl-node{position:absolute;top:22px;left:calc(var(--at) / 3 * 100%); width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%; border:2px solid rgba(255,246,230,.3);background:var(--night); transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);} .bl-node.lit{border-color:var(--red);background:var(--red);transform:scale(1.18);} .bl-foot{flex:none;margin:clamp(20px,3vh,32px) 0 0;color:rgba(255,246,230,.42); letter-spacing:.05em;text-transform:none;} @media (max-width:900px){ .beamline{height:300vh;} .bl-step{max-width:none;} .bl-step h3{font-size:clamp(30px,8vw,52px);} } @media (prefers-reduced-motion:reduce){ /* 不做扫光:改成静态四段,内容一次给全 */ .beamline{height:auto;} .bl-sticky{position:static;height:auto;} .bl-stage{display:flex;flex-direction:column;gap:clamp(32px,5vh,56px);} .bl-step{position:static;opacity:1;transform:none;max-width:60ch;} .bl-step h3{font-size:clamp(28px,4vw,44px);text-shadow:none;} .bl-beam,.bl-glow{display:none;} } /* ---- 03 厂房:满幅大图 + 悬浮深色面板 ---- */ .plant{margin-bottom:clamp(64px,9vw,132px);} /* 图按原比例完整显示:不定死 aspect-ratio、不 cover 裁切。 高度由图自己的 1706x960 决定,厂区一点透视的两侧楼体和消失点都完整在框里。 ⚠ 视差与 scale(1.09) 一并去掉 —— 那套的前提是"裁掉一圈留余量给位移", 与"完整显示"是互斥的:留了余量就不完整,不留余量位移就会露出底边 */ .plant-hero{position:relative;margin:0; margin-left:calc(50% - var(--bleed) / 2);margin-right:calc(50% - var(--bleed) / 2); width:var(--bleed);overflow:hidden;background:var(--night);} .plant-hero img{width:100%;height:auto;display:block;} /* 面板压在左下角,给那一角补一层压暗,免得照片本身够亮时面板边界糊掉 */ .plant-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none; background:linear-gradient(to top,rgba(11,14,20,.5),transparent);} .plant-card{position:absolute;left:var(--edge);bottom:clamp(24px,5vh,56px);z-index:1; margin:0;max-width:min(32ch,86vw);padding:clamp(20px,2.2vw,32px); background:rgba(11,14,20,.82);border:1px solid rgba(255,246,230,.16);border-radius:var(--r); backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1); box-shadow:0 24px 70px rgba(0,0,0,.4);color:var(--retro-silver);} .plant-k{display:block;color:var(--beam);} .plant-addr{margin:clamp(12px,1.6vh,18px) 0 0;font-size:clamp(16px,1.35vw,20px);line-height:1.45;} .plant-meta{display:flex;flex-wrap:wrap;gap:16px 36px; margin:clamp(16px,2vh,24px) 0 0;padding-top:clamp(14px,1.8vh,20px); border-top:1px solid rgba(255,246,230,.14);} .plant-meta dt{margin:0 0 6px;color:rgba(255,246,230,.78);} .plant-meta dd{margin:0;font-size:clamp(17px,1.4vw,21px);color:var(--beam);} @media (max-width:900px){ /* 窄屏面板不再压在图上:面板高度接近整张图,浮上去等于把照片盖没了,改成图下面一块 */ .plant-hero{overflow:visible;} .plant-hero::after{display:none;} .plant-card{position:static;max-width:none;border-radius:0;border-left:none;border-right:none; backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none; background:var(--night); margin-left:calc(50% - var(--bleed) / 2);margin-right:calc(50% - var(--bleed) / 2); width:var(--bleed);padding:clamp(22px,6vw,30px) var(--gutter);} } /* ============================================================ Company 整页重做(2026-07-19)—— 全页只有一套章节语言 决定:巨字**就是** h2 本身,不是 h2 背后的装饰水印层。 背景层做法要么把同一个词在 DOM 里渲染两遍,要么另发明一个水印词 —— 在一个抱怨"字太多"的页面上,两条路都是往页面上加字。 ============================================================ */ .sec-mark{ /* 参考站用 opacity .2。实算:--ink 以 α .2 混 --paper 只有 1.52:1, 连大字号 3:1 都够不到,而这是真标题不是装饰。 .50 实算 3.31:1,过大字门槛且留余量。 "幽灵感"由尺寸 + 字重 500 + 负字距给,不由灰度给 */ --sm-color:var(--fg); --sm-alpha:.50; display:block; /* 上限 140 而非参考站的 170:sub.css 的 .page-head h1 上限只有 92px。 168px 的章节记号会把页面真正的主标题压下去。140 : 92 = 1.52, 且巨字只有半透明度,感知重量落在 h1 之下 —— 层级这才成立。 10vw 与视口成正比:最长词 "After dark"(10 字符)在 -.04em 下约 4.4em, 占用恒为 44vw,而版心可用宽恒为 94vw —— 结构性不溢出,不靠估算常数。 纪律:章节词 ≤ 10 字符,不用全大写 */ font-size:clamp(46px,10vw,140px); line-height:.9; font-weight:500; /* 覆盖 main.css 的 650:巨字要瘦,重了就变喊话 */ letter-spacing:-.05em; /* 与参考站实测同值,全站巨字一个口径 */ color:var(--sm-color); opacity:var(--sm-alpha); /* 光学对齐:首字左侧字身间隙在 140px 下肉眼可见。用 text-indent 不用 margin (会跟 --bleed 变体的左右 margin 打架),也不用 transform(会被视差覆盖) */ text-indent:-.03em; overflow-wrap:break-word; /* 最后兜底:宁可断词,绝不让 body 横向滚 */ /* padding 给横扫揭示留字形余量:line-height .9 时字形高于内容盒,inset(0) 会削掉升部降部。撑开盒子再用等值负 margin 抵消,动画就能老实用 inset(0) 收尾,不必去赌负值 inset() 的浏览器行为 */ padding:.16em .06em; margin:-.16em -.06em calc(clamp(16px,2.6vw,38px) - .16em); } /* 暗场:silver 压 --night 在 .44 实算 3.64:1。比亮场 alpha 低,是因为暗底上 同样 alpha 感知更亮,两套要落在同一视觉重量;取上限档是给 .bl-glow 的扫光 留缓冲 —— 光扫过时背景变亮,对比度会实时下滑 */ .sec-mark--night{--sm-color:var(--retro-silver);--sm-alpha:.44;} /* 首页 CH8 那次全局入夜后 --fg 已是 silver,只需换 alpha */ html.is-night .sec-mark{--sm-alpha:.44;} /* .bl-sticky 是 100vh + overflow:hidden 的 flex column。不给 flex:none 会被 .bl-stage 的 flex:1 压扁;1366x640 那档"巨字 + 88px 里程碑 + 段落 + 光轨 + 脚注"会顶破 100vh,所以再叠一道 10.5vh 上限,矮视口自动让位。 左缘由 .bl-sticky 自己的 padding:… var(--edge) 负责,与 .wrap 内容左缘同线 */ .bl-sticky > .sec-mark{ flex:none;position:relative;z-index:1; /* 压在 .bl-glow 之上 */ font-size:min(clamp(32px,7.4vw,104px),10.5vh); margin-bottom:calc(clamp(10px,1.8vh,26px) - .16em); } /* .beamline 是满幅暗场且自身无下外边距,后面紧跟 140px 巨字会贴住它 */ .beamline + .sec{margin-top:clamp(56px,8vw,120px);} /* 直接挂在满幅出血区上的巨字。本页用不到(Timeline 走 .bl-sticky,其余是流内), 留给 technology / products 复用,免得到时候各写各的对齐 */ .sec-mark--bleed{ margin-left:calc(50% - var(--bleed) / 2);margin-right:calc(50% - var(--bleed) / 2); width:var(--bleed);padding-inline:var(--edge); } /* ============================================================ On record —— 数字章节(参考站机制 B) 四行全是确凿事实,没有占位行:2026-07-19 从现站(en.utontech.cn) 核到了第二座工厂与北美办事处,原方案里"出口国家数"那道空槽因此不需要了。 仍未知的(员工数 / 厂房面积 / 出口国家数)留在脚注,不进正文 ============================================================ */ .rec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,32%); gap:clamp(24px,4vw,72px);align-items:stretch;} .sec-mark + .rec-grid{margin-top:0;} .rec-rows{list-style:none;margin:0;padding:0;} .rec-row{position:relative;padding:clamp(24px,3.4vw,44px) 0; border-bottom:1px solid var(--line);} .rec-row:first-child{border-top:1px solid var(--line);} /* .beamline 那束光的余韵:行点亮时一道 1px 红线沿下边线由左向右画出。 红色配给:整节只有这四条 1px 线和一个链接 */ .rec-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--red);transform:scaleX(0);transform-origin:left center;} /* 胶囊标签。.m 已给 mono/11px/大写/字距,这里只加形状 */ .rec-k{display:inline-block;color:var(--fg-soft); border:1px solid var(--line);border-radius:999px;padding:5px 13px;} /* 遮罩落在 .rec-fig,数字整体在 .rec-clip 上平移。 下伸部保护必须用 px 不能用 em:.rec-fig 没有自己的 font-size,em 会按继承的 16px 算 ≈2.5px,而 "sta[g]es" 的 g 在 34px 下伸约 7px,会被削掉 */ .rec-fig{margin:clamp(14px,1.8vw,22px) 0 -14px;padding-bottom:14px;overflow:hidden;} .rec-clip{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .3em;} /* 全页最大的满对比度字必须是标题,不是一个 "6"。 .page-head h1 是 clamp(40px,6.2vw,92px),所以这里**三档都**要压在它之下: 只压上限不够 —— 6.4vw > 6.2vw 会让数字在中间档反超 h1(实测 1440:90 vs 89.28)。 5.9vw / 上限 86 / 下限 38:全程低于 h1(375 档 38 < h1 的下限 40)。 86 与 .bl-step h3 的 88、.dusk-claim 的 86 同属"章节内容层" */ .rec-n{font-size:clamp(38px,5.9vw,86px);line-height:1;letter-spacing:-.04em;font-weight:650;} /* 词比数字轻一档:数字是可扫读的那一层,词只是单位 */ .rec-w{font-size:clamp(19px,2.3vw,34px);line-height:1.05;letter-spacing:-.02em; font-weight:500;color:var(--fg-soft);} /* --fg-soft 压 paper = 9.36:1 */ .rec-note{margin:clamp(12px,1.6vw,18px) 0 0;font-size:clamp(14px,1.02vw,15.5px); line-height:1.62;color:var(--fg-soft);max-width:66ch;text-wrap:pretty;} /* 机构名与地名走 mono,但绝不能用 .m —— 那是 text-transform:uppercase,会把 Shanghai Fire Research Institute 吃成全大写。这里显式关掉 */ .rec-list{font-family:var(--mono);font-size:12px;line-height:1.9; letter-spacing:.02em;text-transform:none;max-width:68ch;} /* --red 配给:整节唯一一处文字用红 */ .rec-link{display:table;margin-top:14px;font-size:clamp(14px,.95vw,16px); color:var(--red);text-decoration:none; border-bottom:1px solid rgba(232,51,31,.32); transition:border-color .3s var(--ease);} .rec-link:hover,.rec-link:focus-visible{border-bottom-color:var(--red);} .rec-foot{margin:clamp(16px,2.2vw,24px) 0 0;color:var(--fg-soft); letter-spacing:.05em;text-transform:none;line-height:1.7;} /* 右:竖图。高度跟随左栏,不写死 aspect-ratio —— 写死了右图就比左栏矮一截, 两栏底边参差,这类版式最常见的翻车点 */ .rec-shot{margin:0;align-self:stretch;min-height:clamp(340px,42vw,620px); overflow:hidden;border-radius:var(--r);background:var(--bg-2);} /* 62%:把涂布机组和背后的背光窗留在竖框里(机组横跨原图 x≈32%→90%,中心≈62%)。 目标比例窄于 16:9 时 cover 只做横向裁切、竖直用满全高 —— 所以 Y 的 50% 是死参数 */ .rec-shot img{width:100%;height:100%;object-fit:cover;object-position:62% 50%; display:block;clip-path:inset(0);} /* ---- 入场。.is-armed 由 JS 挂 → 无 JS / 无 GSAP / reduced-motion 时内容恒可见。 ⚠ is-armed 与 is-in 两组特指度完全相同,靠源序决定胜负。谁把 is-in 挪到 is-armed 之前,数字会永远停在遮罩下面,且不报任何错 ---- */ .rec.is-armed .rec-clip{transform:translateY(120%);} /* 120% 要盖过 14px 下伸部余量 */ .rec.is-armed .rec-k, .rec.is-armed .rec-note, .rec.is-armed .rec-link, .rec.is-armed .rec-foot{opacity:0;transform:translateY(12px);} .rec.is-armed .rec-shot img{clip-path:inset(100% 0 0 0);} .rec.is-in .rec-clip{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1);} .rec.is-in .rec-k, .rec.is-in .rec-note, .rec.is-in .rec-link, .rec.is-in .rec-foot{opacity:1;transform:none; transition:opacity .8s var(--ease),transform .8s var(--ease);} .rec.is-in .rec-shot img{clip-path:inset(0);transition:clip-path 1.2s cubic-bezier(.16,1,.3,1) .1s;} .rec.is-in .rec-row::after{transform:scaleX(1); transition:transform .9s cubic-bezier(.16,1,.3,1);} /* 逐行错峰:标签早 60ms 到、数字居中、注解晚 80ms 到、红光最后 —— 形成读序。 ⚠ 客户补数据加第 5 行时,记得补 .rec-row:nth-child(5){--d:.46s} */ .rec-row:nth-child(1){--d:.10s;} .rec-row:nth-child(2){--d:.19s;} .rec-row:nth-child(3){--d:.28s;} .rec-row:nth-child(4){--d:.37s;} .rec.is-in .rec-clip{transition-delay:var(--d,0s);} .rec.is-in .rec-k{transition-delay:calc(var(--d,0s) - .06s);} .rec.is-in .rec-note, .rec.is-in .rec-link{transition-delay:calc(var(--d,0s) + .08s);} .rec.is-in .rec-row::after{transition-delay:calc(var(--d,0s) + .18s);} .rec.is-in .rec-foot{transition-delay:.5s;} /* ============================================================ .plant 调整 ============================================================ */ /* ============================================================ 收尾 · After dark ============================================================ */ .dusk{position:relative; margin-left:calc(50% - var(--bleed) / 2);margin-right:calc(50% - var(--bleed) / 2); width:var(--bleed);margin-bottom:0; background:var(--night); overflow:hidden; /* 巨字视差位移不许撑出横向滚动条 */ /* 局部翻主题槽:块内 .btn / .m / 发丝线自动切到夜间取值。 main.css 是 .btn{background:var(--accent);color:var(--bg)} —— 翻槽后按钮 自动成为米光底夜色字,而 .btn:hover{background:var(--red)} 原封不动继续生效。 这比就地写 .dusk .btn{} 稳:后者与 .btn:hover 特异性同为 (0,2,0), 只能靠加载顺序取胜,顺序一改悬停就静默失效 */ --bg:var(--night); --fg:var(--retro-silver); --fg-soft:#aeb3ba; --line:var(--hairline-n); --accent:var(--beam); color:var(--fg); } /* 收尾章直接切全黑,不做渐变过渡(2026-07-19 定)。 原本这里有一条 160–320px 的 .dusk-wash 暮色带(paper→night 五色标)和一条 .dusk-horizon 贴地回光,两个元素连同它们的媒体查询覆盖一起删了 —— 上一节的纸色 与本节的夜色现在硬碰硬。.dusk 自身的 background:var(--night) 就是全部背景。 JS 只引用 #dusk 与 .dusk-claim,删这两个元素不影响行为 */ /* --edge 让内容左缘与页面其余部分严格对齐(同 .bl-sticky) */ .dusk-in{position:relative;z-index:1; padding:clamp(52px,9vh,110px) var(--edge) clamp(64px,11vh,132px);} /* 字号/字距/字重/辉光与 .bl-step h3 同族,两块暗场读起来是一家。 不做引号:没人说过这句话,加引号等于编造一个说话人 */ .dusk-claim{margin:clamp(16px,2.6vh,36px) 0 0; font-size:clamp(34px,5.6vw,86px);line-height:1.04;letter-spacing:-.05em; font-weight:500;color:var(--beam);max-width:18ch;text-wrap:balance;} .dusk-claim .w{display:inline-block;vertical-align:top;} .dusk-claim .k{display:inline-block; text-shadow:0 0 60px rgba(255,246,230,.16); transition:text-shadow .6s var(--ease);} /* 关键:遮罩只在揭示期间存在。text-shadow 由 .k 绘制,若 .w 恒为 overflow:hidden, 60px 辉光会被沿词框硬切成一个个发光矩形(.bl-step h3 能用是因为它没有遮罩)。 .is-masking 由 JS 在补间创建时加上、onComplete 时移除 */ .dusk-claim.is-masking .w{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;} .dusk-claim.is-masking .k{text-shadow:none;} /* 车灯态:JS 只在有精确指针时加 .is-armed。底色 #9aa1a9 压 #0b0e14 = 7.41:1, 远高于 4.5 —— 暗下来的是氛围,不是可读性。不加 transition:JS 每帧已在 lerp */ .dusk-claim.is-armed .k{transition:none; color:color-mix(in srgb,var(--beam) calc(var(--l,0) * 100%),#9aa1a9); text-shadow:0 0 calc(16px + var(--l,0) * 30px) rgba(255,246,230,calc(.10 + var(--l,0) * .62));} @supports not (color:color-mix(in srgb,#000,#fff)){ .dusk-claim.is-armed .k{color:var(--beam);} } .dusk-bar{margin-top:clamp(36px,6vh,76px);padding-top:clamp(20px,3vh,32px); border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center; justify-content:space-between;} .dusk-acts{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;} .dusk-ghost{font-size:14px;font-weight:550;color:var(--retro-silver); text-decoration:none;padding-bottom:2px; border-bottom:1px solid rgba(255,246,230,.28); transition:color .25s var(--ease),border-color .25s var(--ease);} .dusk-ghost:hover{color:var(--beam);border-bottom-color:var(--red);} .dusk a:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:2px;} /* .42 会掉到约 3.8:1,11px 小字过不了 AA;.58 实算 6.45:1 */ .dusk-note{margin:0;color:rgba(255,246,230,.58);} /* ---- 子页页脚 ---- 既有 bug(实测 1.01:1):main.css 的 footer .foot-in 是 rgba(255,246,230,.38), 那是给首页夜场写的,而 css/ 里从来没有任何 .subfoot 规则 —— 于是四个子页的 页脚一直是米色字压米白纸,等于隐形。浅色子页给回墨色,company 走 .at-night */ .subfoot .foot-in{color:var(--fg-soft);} /* 9.36:1 */ .subfoot .foot-in a{color:var(--fg);border-bottom:1px solid var(--line);} .subfoot .foot-in a:hover{color:var(--red);border-bottom-color:var(--red);} .subfoot.at-night{background:var(--night);border-top-color:transparent;} .subfoot.at-night .foot-in{color:rgba(255,246,230,.58);} /* 6.45:1 */ .subfoot.at-night .foot-in a{color:var(--beam); border-bottom:1px solid rgba(255,246,230,.28);} .subfoot.at-night .foot-in a:hover{color:#fff;border-bottom-color:var(--red);} .subfoot .foot-in a:focus-visible{outline:2px solid var(--red);outline-offset:3px;} /* ============================================================ */ @media (max-width:900px){ .sec-mark{font-size:clamp(42px,12vw,88px);} .rec-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,40px);} .rec-rows{order:1;} /* 窄屏先给数字:数字是内容,图是佐证 */ .rec-shot{order:2;align-self:auto;min-height:0;aspect-ratio:4 / 5;} .dusk-claim{font-size:clamp(30px,7.6vw,54px);max-width:none;} .dusk-bar{justify-content:flex-start;gap:20px;} /* 两端对齐会把脚注甩到右下角很远 */ } @media (max-width:640px){ .sec-mark{text-indent:-.02em;} /* 小尺寸下挂边过头会看着往左掉 */ .rec-clip{gap:0 .24em;} .rec-w{font-size:clamp(17px,5.4vw,24px);} .rec-shot{aspect-ratio:1 / 1;} /* 4:5 在手机上要占掉一屏半 */ } @media (prefers-reduced-motion:reduce){ /* 巨字的入场由 sub.js 写内联 clip-path;JS 已提前 return,这是第二道保险 */ .sec-mark{clip-path:none !important;transform:none !important;} .rec.is-armed .rec-clip, .rec.is-armed .rec-k, .rec.is-armed .rec-note, .rec.is-armed .rec-link, .rec.is-armed .rec-foot{transform:none;opacity:1;} .rec.is-armed .rec-shot img{clip-path:inset(0);} .rec-row::after{transform:scaleX(1);} .rec .rec-clip,.rec .rec-k,.rec .rec-note,.rec .rec-link, .rec .rec-shot img,.rec-row::after{transition:none;} .dusk-ghost,.dusk-claim .k{transition:none;} } /* ============================================================ Contact 页(2026-07-19 重做)—— 版式取自参考站 /contact/, 但把提交式表单换成可直接取用的信息行。 表单原本那套"小标签在上 / 大值在下 / 发丝线收底"的节奏原样保留, 所以换掉的是交互模型,不是版式语言。 本页 html.is-night,--fg 等槽位已是夜间取值,不需要就地翻槽 ============================================================ */ .ct-head{padding:clamp(48px,10vh,120px) 0 clamp(36px,6vh,72px);} /* 胶囊 kicker:参考站 12px mono 大写 + 全圆角。这是全站唯一一处胶囊 kicker (规范禁的是"每节都加的小号大写眉",单页一枚品牌化 kicker 是声音不是脚手架) */ .ct-pill{display:inline-block;color:var(--beam); border:1px solid rgba(255,246,230,.28);border-radius:999px;padding:6px 14px;} /* 与 .page-head h1 同档(clamp(40px,6.2vw,92px)),不另起字号 */ .ct-head h1{margin:clamp(20px,3vh,34px) 0 0; font-size:clamp(40px,6.2vw,92px);line-height:1;letter-spacing:-.05em; color:var(--beam);text-wrap:balance;} .ct-sub{margin:clamp(16px,2.4vh,26px) 0 0;font-size:clamp(15px,1.25vw,19px); line-height:1.35;letter-spacing:-.03em;color:var(--fg-soft);max-width:52ch;text-wrap:pretty;} .ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:clamp(32px,5vw,88px);} .ct-block{min-width:0;} /* 分区小标题走 mono,和信息行的标签同族 —— 这一栏整体读作一张表 */ .ct-kicker{margin:0 0 clamp(14px,2vh,22px);color:var(--fg-soft);} .ct-rows{margin:0;padding:0;} .ct-row{padding:clamp(16px,2.2vh,24px) 0;border-bottom:1px solid var(--hairline-n);} .ct-row:first-child{border-top:1px solid var(--hairline-n);} .ct-row dt{margin:0 0 8px;color:var(--fg-soft);} .ct-row dd{margin:0;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline; font-size:clamp(17px,1.5vw,22px);line-height:1.4;letter-spacing:-.03em;} .ct-row dd a{color:var(--beam);text-decoration:none; border-bottom:1px solid rgba(255,246,230,.26); transition:border-color .25s var(--ease),color .25s var(--ease);} .ct-row dd a:hover{color:#fff;border-bottom-color:var(--red);} .ct-row dd a:focus-visible,.ct-copy:focus-visible{outline:2px solid var(--red); outline-offset:3px;border-radius:2px;} .ct-plain{color:var(--retro-silver);} /* 复制按钮:安静到不抢值,但点得到。 视觉上是一枚 53×29 的小胶囊 —— 直接把它撑到 44px 高会喧宾夺主,压过它标注的那个值。 所以视觉尺寸不动,用伪元素把命中区外扩到 ≥44×44(触控目标下限)。 行的上下 padding 有 24px,外扩 7.5px 不会与相邻行的命中区重叠 */ .ct-copy{position:relative;flex:none; font-family:var(--mono);font-size:10.5px;letter-spacing:.07em; text-transform:uppercase;color:var(--fg-soft);background:none;cursor:pointer; border:1px solid var(--hairline-n);border-radius:999px;padding:7px 12px; transition:color .2s var(--ease),border-color .2s var(--ease);} .ct-copy::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:max(100%,44px);height:44px;} .ct-copy:hover{color:var(--beam);border-color:rgba(255,246,230,.4);} /* 复制成功:红色配给的一处。文字不变(变文字会让读屏在焦点期间改名), 靠颜色 + 边框表态,真正的播报走独立的 aria-live 区 */ .ct-copy.is-done{color:var(--red);border-color:var(--red);} .ct-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .ct-hours{margin:clamp(18px,2.6vh,28px) 0 0;font-size:14.5px;line-height:1.55; color:var(--fg-soft);max-width:56ch;text-wrap:pretty;} .ct-hours .m{display:block;margin-bottom:6px;color:rgba(255,246,230,.62);} /* ---- 二维码 ---- */ .ct-scan{margin-top:clamp(64px,11vh,140px);} .ct-qr{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,220px)); gap:clamp(20px,3vw,44px);} .ct-qr li{min-width:0;} /* 与成品二维码同尺寸(现站是 186×186),换图时零位移 */ .ct-qr-slot{aspect-ratio:1 / 1;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:8px;text-align:center; border:1px dashed rgba(255,246,230,.26);border-radius:var(--r); background:rgba(255,246,230,.03);padding:14px;} .ct-qr-slot .ph-id{font-family:var(--mono);font-size:11px;letter-spacing:.08em; color:var(--red);} .ct-qr-slot .ph-what{font-family:var(--mono);font-size:10.5px;line-height:1.6; color:var(--fg-soft);} .ct-qr li .m{margin:12px 0 0;color:var(--retro-silver);} /* 实图态:白底承码(夜场页上二维码必须落在白底上才扫得动), contain 不裁码,内衬 10px 当静区 */ .ct-qr-slot.has-qr{background:#fff;border:1px solid var(--line);padding:10px;} .ct-qr-slot.has-qr img{width:100%;height:100%;object-fit:contain;display:block;} .ct-scan-note{margin:clamp(20px,3vh,32px) 0 0;color:var(--fg-soft); text-transform:none;letter-spacing:.04em;line-height:1.7;} @media (max-width:640px){ .ct-grid{grid-template-columns:1fr;} .ct-qr{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));} } /* ============================================================ COMPANY 整页合稿(2026-07-19)—— CH-A/B/C 三章落地 + 全页节奏统一 ============================================================ */ /* ------------------------------------------------------------ 0 · 页面级钩子与全页唯一一套巨字语言
------------------------------------------------------------ */ /* .about 自带 150px 顶部内距(已含 fixed nav 净空), .subpage 那道 clamp(120px,13vh,168px) 会在铺色块上方留一条纸色空带。 :has 不支持时的退化是"上方多一段纸色留白",不是坏版 */ .subpage:has(> .about){padding-top:0;} /* 全页只有一个"最大的字":章节记号。字号采用实测的 170:1385 版心比 = 12.2744% 内容宽。不用 cqi:container-type 会给 .subpage 上 layout containment, 与 sticky / ScrollTrigger / 满幅负边距同处一层风险太大。 667–1867 之间版心 ≈ 94vw,0.122744 × 94vw = 11.54vw,两端由 clamp 兜住。 三档实算:1920 → 202(封顶,目标 202.3);1440 → 166.2(目标 166.1); 375 → 41(下限接管,目标 41.1)。 只在 .co-page 内生效 → technology / products 的 .sec-mark 一格不动 */ /* ⚠ 这一档是 company 与 technology 共用的巨字尺寸。 只写 .co-page 的话,technology 会静默掉回基类 clamp(46px,10vw,140px) —— 不报错、不掉版,只是"看着小了点",两页立刻不同源。 给 technology 的
挂 .tc-page(页面版式档),不是挂 .co-page(那是页面身份) */ .co-page .sec-mark, .tc-page .sec-mark{ font-size:clamp(41px,11.54vw,202px); line-height:1; /* 实测 170/170 */ letter-spacing:-.05em; /* 实测 -8.5px ÷ 170px */ margin-bottom:calc(clamp(30px,3.5vw,50px) - .16em);/* 实测 记号→内容 50px; .16em 是 .sec-mark 自带的 字形余量 padding,要减掉 */ } /* 节间节奏。.ql 是 padding:60 0,.about 自带 60 的下内距,不再叠。 .beamline 与 .plant 自身都没有上下外边距,各补一道,凑齐节间 120 */ .beamline + .ql{margin-top:clamp(36px,4.2vw,60px);} .ql + .plant{margin-top:clamp(36px,4.2vw,60px);} /* ============================================================ CH-A · ABOUT —— 满幅铺色 hero(1:1 复刻参考站 /company 首节) 实测@1440:section padding 150/0/60;kicker 12px·500·pad 0 8·r19·h19·mb30; h1 80px·500·lh96(1.2)·ls -4px(-.05em);暗卡795+gap20+白卡570=版心1385; 卡片 r20 · 内距50 · 高740。795/570 换成比例,其余绝对值在桌面档(>=1100) 原样落地 —— 不用 vw 反推:vw 版只在 1437px 以上才等于实测值 ============================================================ */ .about{ /* 铺色用 --red(用户 2026-07-19 定)。这是一次**有意识地**打破全站 "红色严格配给" 的规则:参考站那一章的力量来自饱和品牌色满屏铺开, 换成无彩色的灰会读成一块水泥板。代价记在这里 —— 红在本页 hero 之后 不再是稀缺的强调色,页面其余部分的红(focus 轮廓等)相应减弱 */ --ab-flood:var(--red); /* #e8331f · L=.1962 */ /* 胶囊底:红的加深版。原站是 #D13E00:#FF5710 = 1.505:1 亮度比, 这里取 L=.1060,与 --red 的 .1962 成 1.60:1,同一手法同一量级 */ --ab-deep:#b02513; --ab-card:#fbfaf7; /* 站内既有最亮实体面 */ --ab-pad:clamp(22px,4.6vw,50px); --ab-r:var(--r); margin-left:calc(50% - var(--bleed) / 2); margin-right:calc(50% - var(--bleed) / 2); width:var(--bleed); background:var(--ab-flood); color:var(--ink); } /* 内距必须落在内层:--edge 里的 100% 按包含块宽度解析。写在 .about 上时包含块是 .wrap 的内容盒,左缘会与页面其余部分错开。内层包含块才是 .about 本身(= --bleed) */ .about-in{ padding:clamp(88px,12vw,150px) var(--edge) clamp(36px,5vw,60px); } /* ---- kicker 胶囊:12/500/pad 0 8/r19/h19/mb30,六个数一个不改 ---- */ .about-kicker{ display:inline-block;margin:0 0 30px; font-size:12px;font-weight:500; height:19px;line-height:19px; padding:0 8px;border-radius:var(--r); /* 实测 19px。元素高 19,19 与 20 都被夹到 9.5 —— 视觉完全相同,所以收归令牌不损保真 */ letter-spacing:0; /* 换红底之后字色必须从 --ink 翻成 --beam: ink 压 #b02513 只有 2.64:1,12px 小字远不达标;beam 压它是 6.27:1。 (顺带记一笔:12px 的字直接压 --red 本身,ink 4.17:1 / beam 3.98:1 都过不了 4.5 —— 红是中明度色,对小字最不友好,所以胶囊**必须**用加深底) */ background:var(--ab-deep);color:var(--beam); /* 6.27:1 */ } /* ---- 主标题:80 / 500 / 1.2 / -.05em。全页唯一的满对比度显示级字 ---- 字号是本块唯一保留 vw 的量:三行断点写死在 HTML 里,字号不跟着缩, 第一行 28 字符必然溢出。5.56vw 在 >=1439 顶封 80 */ .about-title{ margin:0; /* company 语法:大写巨字、行错开。375 宽实算:最长行 LIGHT THAT KNOWS 15ch × .62em × 34px ≈ 316px < 335px 版心,不折行 */ font-size:clamp(34px,8.6vw,136px); font-weight:500; line-height:.95; letter-spacing:-.04em; text-transform:uppercase; /* 换红底后实算 4.17:1。80px 属大字号(门槛 3:1),过。 沿用参考站的做法:近黑字压饱和品牌色,不是白字 —— 白字压红只有 3.98:1, 比墨字还低,而且会把 hero 推向"促销横幅"的观感 */ color:var(--ink); /* 4.17:1(大字门槛 3:1) */ text-wrap:balance; } .about-title .ab-line:nth-child(2){margin-left:clamp(30px,7vw,150px);} .about-title .ab-line:nth-child(3){margin-left:clamp(14px,3vw,70px);} /* ⚠ 类名从 .line / .word 改为 .ab-line / .ab-w:main.css 里有 #ch4 .beat .word 与 #ch7 .line-b,虽由 ID 隔开,但两个通用名同库共存迟早出事 */ .about-title .ab-line{ display:block;overflow:hidden; padding-bottom:.14em;margin-bottom:-.14em; } .about-title .ab-w{ display:inline-block; --wd:calc(var(--i,0) * .05s + .12s); } /* ---- 两栏:795 : 570,gap 20 ---- */ .about-cards{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:clamp(32px,5vw,60px); } .about-card{ border-radius:var(--ab-r); padding:var(--ab-pad); min-width:0; } /* ---- 桌面档:实测绝对值原样落地。断点 1100 而非 901:901 档白卡内容只剩 229px, 24px 正文约 9ch,读不成句 ---- */ @media (min-width:1100px){ .about-in{padding:150px var(--edge) 60px;} .about{--ab-pad:50px;} .about-cards{ /* 795 : 570 = 58.24 : 41.76(以扣掉 gap 后的 1365 为分母)。 用 fr 不用百分比:fr 先扣 gap 再分配,百分比会连 gap 一起算,1440 档差 12px */ grid-template-columns:58.24fr 41.76fr; margin-top:60px; } .about-card{min-height:740px;} } /* 暗卡占位:唯一合适的 chain-hero.mp4 已被首页占用,而全站不许重复素材, 所以这里按"宁愿空着也不硬放"留等尺寸占位框。占位框与成品同尺寸同圆角, 将来把