/* Aumetta 全站样式 · 深色单主题（P0 VI 定稿） */ /* ---------- 自托管字体 ---------- */ @font-face{font-family:'Cinzel';font-weight:600;font-display:swap;src:url('../fonts/cinzel-600.woff2') format('woff2')} @font-face{font-family:'Cinzel';font-weight:500;font-display:swap;src:url('../fonts/cinzel-500.woff2') format('woff2')} @font-face{font-family:'Cormorant';font-weight:600;font-display:swap;src:url('../fonts/cormorant-600.woff2') format('woff2')} @font-face{font-family:'Cormorant';font-weight:500;font-display:swap;src:url('../fonts/cormorant-500.woff2') format('woff2')} @font-face{font-family:'Jost';font-weight:300;font-display:swap;src:url('../fonts/jost-300.woff2') format('woff2')} @font-face{font-family:'Jost';font-weight:400;font-display:swap;src:url('../fonts/jost-400.woff2') format('woff2')} @font-face{font-family:'Jost';font-weight:500;font-display:swap;src:url('../fonts/jost-500.woff2') format('woff2')} @font-face{font-family:'NotoSC';font-weight:400;font-display:swap;src:url('../fonts/notosc-400.woff2') format('woff2')} @font-face{font-family:'NotoSC';font-weight:600;font-display:swap;src:url('../fonts/notosc-600.woff2') format('woff2')} @font-face{font-family:'NotoTC';font-weight:400;font-display:swap;src:url('../fonts/nototc-400.woff2') format('woff2')} @font-face{font-family:'NotoTC';font-weight:600;font-display:swap;src:url('../fonts/nototc-600.woff2') format('woff2')} :root{ --disp:'Cinzel',Georgia,serif; --ui:'Jost','Segoe UI',sans-serif; --ground:var(--am-ground);--panel:var(--am-panel);--panel2:var(--am-panel-2);--line:var(--am-line); --gold1:var(--am-gold-1);--gold2:var(--am-gold-2);--ink:var(--am-ink);--muted:var(--am-muted); } html[lang="ru"]{--disp:'Cormorant',Georgia,serif} html[lang="zh-Hans"]{--disp:'NotoSC','Microsoft YaHei','PingFang SC',sans-serif; --ui:'NotoSC','Microsoft YaHei','PingFang SC','Segoe UI',sans-serif} html[lang="zh-Hant"]{--disp:'NotoTC','Microsoft JhengHei','PingFang TC',sans-serif; --ui:'NotoTC','Microsoft JhengHei','PingFang TC','Segoe UI',sans-serif} html[lang="ja"]{--disp:'Yu Gothic UI','Hiragino Sans','Meiryo',sans-serif; --ui:'Yu Gothic UI','Hiragino Sans','Meiryo',sans-serif} html[lang="ar"]{--disp:'Segoe UI','Tahoma','Arial',sans-serif;--ui:'Segoe UI','Tahoma','Arial',sans-serif} html[lang^="zh"] body,html[lang="ja"] body{font-weight:400} html[lang^="zh"] :is(h1,h2,h3),html[lang="ja"] :is(h1,h2,h3){font-weight:600;letter-spacing:.02em} /* 阿拉伯文为连写文字，禁用一切字距拉开 */ html[lang="ar"] body *{letter-spacing:normal} /* RTL 功能性适配（标准档，不做精排） */ html[dir="rtl"] .step::before{left:auto;right:0} html[dir="rtl"] .rfq-grid ul li{padding-left:0;padding-right:22px} html[dir="rtl"] .rfq-grid ul li::before{left:auto;right:0} html[dir="rtl"] .more::after{content:"←"} html[dir="rtl"] .page-head::after{background:linear-gradient(270deg,var(--gold1),var(--gold2),transparent)} .marquee{direction:ltr} /* ---------- 基础 ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--ground);color:var(--ink);font-family:var(--ui);font-weight:300;font-size:16px;line-height:1.7;overflow-x:clip} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} :focus-visible{outline:2px solid var(--gold1);outline-offset:2px} ::selection{background:rgba(233,201,126,.25)} .skip{position:absolute;left:0;top:0;transform:translateY(-220%);background:var(--gold1);color:#141414;padding:8px 16px;z-index:200} .skip:focus{transform:none} .wrap{max-width:1200px;margin:0 auto;padding:0 40px} @media(max-width:640px){.wrap{padding:0 20px}} .eyebrow{font-family:var(--ui);font-size:12px;font-weight:400;letter-spacing:.38em;text-transform:uppercase;color:var(--gold1);display:flex;align-items:center;gap:14px} .eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--gold1),var(--gold2));flex:none} html[lang^="zh"] .eyebrow,html[lang="ru"] .eyebrow,html[lang="ja"] .eyebrow{letter-spacing:.22em} h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:.03em;text-wrap:balance} .h2{font-size:clamp(30px,3.4vw,40px);margin-top:14px} .h3{font-size:24px;margin:12px 0 22px} .sec{padding:118px 0} .pt0{padding-top:0} .mt14{margin-top:14px}.mt26{margin-top:26px}.mb14{margin-bottom:14px} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px} .sec-head h2{font-size:clamp(30px,3.4vw,40px)} .sec-head .kicker{display:flex;flex-direction:column;gap:10px} .more{font-size:13.5px;letter-spacing:.08em;color:var(--gold1);display:inline-flex;align-items:center;gap:8px} .more::after{content:"→";transition:transform .3s} .more:hover::after{transform:translateX(5px)} .muted{color:var(--muted)} .copy{color:#BDBBB4;font-size:15.5px} .maxw{max-width:44em} /* ---------- 导航 ---------- */ .nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px; padding:16px 40px;background:rgba(12,12,14,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .lockup{display:flex;align-items:center;gap:11px} .lockup .name{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:17px;letter-spacing:.13em;color:var(--ink)} .nav .links{display:flex;gap:26px;font-size:13.5px;font-weight:300;letter-spacing:.07em;color:#C4C4C9;margin-left:8px} .nav .links a:hover{color:var(--gold1)} .nav .right{margin-left:auto;display:flex;align-items:center;gap:18px} .langdd{position:relative;font-size:12.5px} .langdd summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;color:#C4C4C9;letter-spacing:.04em;padding:6px 2px} .langdd summary::-webkit-details-marker{display:none} .langdd summary:hover,.langdd[open] summary{color:var(--gold1)} .langmenu{position:absolute;top:calc(100% + 12px);inset-inline-end:0;min-width:158px;z-index:80; background:#121214;border:1px solid var(--line);border-radius:2px;padding:8px 0; display:flex;flex-direction:column;box-shadow:0 18px 40px -12px rgba(0,0,0,.7)} .langmenu a{padding:9px 18px;font-size:13.5px;color:#C4C4C9} .langmenu a:hover{color:var(--gold1);background:#17140E} .langmenu a.on{color:var(--gold1)} .flangs a:hover{color:var(--gold1)} .navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto} .navtoggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .3s} @media(max-width:960px){ .nav{padding:14px 20px;flex-wrap:wrap} .navtoggle{display:block} .nav .links{display:none;flex-direction:column;width:100%;order:9;padding:18px 4px 6px;gap:18px;border-top:1px solid var(--line);margin-top:12px} .nav.open .links{display:flex} .nav .right{margin-left:0} } /* ---------- 按钮 ---------- */ .btn{display:inline-block;position:relative;overflow:hidden;font-family:var(--ui);font-weight:500;font-size:13.5px;letter-spacing:.06em; color:#141414;background:linear-gradient(160deg,var(--gold1),var(--gold2));padding:11px 22px;border-radius:2px;border:0;cursor:pointer;text-align:center} .btn::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-70%;width:36%;transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,250,235,.55),transparent);transition:left .55s ease} .btn:hover::after{left:135%} .btn:hover{filter:brightness(1.07)} .btn.ghost{background:none;color:var(--ink);border:1px solid #3A3A40} .btn.ghost::after{background:linear-gradient(90deg,transparent,rgba(233,201,126,.22),transparent)} .btn.ghost:hover{border-color:var(--gold2);color:var(--gold1);filter:none} .btn.sm{padding:8px 16px;font-size:12.5px} .btn.wfull{width:100%} /* ---------- Hero ---------- */ .hero-cine{position:relative;overflow:hidden} .hero-cine .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.8)} .hero-cine .veil{position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,rgba(12,12,14,.96) 22%,rgba(12,12,14,.62) 58%,rgba(12,12,14,.82)), linear-gradient(to bottom,rgba(12,12,14,.65),transparent 22%,transparent 62%,var(--ground) 96%)} .hero-cine .grain{position:absolute;inset:0;pointer-events:none;opacity:.5; background:radial-gradient(120% 90% at 72% 40%,transparent 40%,rgba(12,12,14,.55) 100%)} .hero{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center; min-height:min(calc(94vh - 74px),820px);align-content:center;padding:88px 0 132px} .hero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.12;margin:20px 0 24px} .hero h1 em{font-style:normal;background:linear-gradient(160deg,var(--gold1),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent} .hero .sub{max-width:34em;color:#BDBBB4;font-size:16.5px} .hero .ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .trust{display:flex;flex-wrap:wrap;gap:8px 0;margin-top:38px;font-size:13px;letter-spacing:.06em;color:var(--muted)} .trust span{display:flex;align-items:center} .trust span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--gold2);margin:0 14px} .coin-stage{display:flex;flex-direction:column;align-items:center;gap:18px} .coin{position:relative;width:min(390px,74vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 38% 30%,#232016 0%,#131109 62%,#0C0C0E 100%); box-shadow:0 0 0 1px #2E2818,0 30px 80px -20px rgba(0,0,0,.8),0 0 90px -20px rgba(233,201,126,.18),inset 0 0 40px rgba(0,0,0,.55); animation:floaty 7s ease-in-out infinite} .coin img{position:absolute;inset:9%;width:82%;height:82%} .coin .sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none; background:conic-gradient(from 0deg,transparent 0 78%,rgba(233,201,126,.14) 87%,transparent 96%); animation:spin 14s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .coin-cap{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} @media(max-width:900px){.hero{grid-template-columns:1fr;padding:56px 0 72px}.coin-stage{order:-1}} .hload{opacity:0;transform:translateY(18px);animation:hrise .9s ease forwards} .hload.d1{animation-delay:.08s}.hload.d2{animation-delay:.2s}.hload.d3{animation-delay:.34s} .hload.d4{animation-delay:.5s}.hload.d5{animation-delay:.66s} @keyframes hrise{to{opacity:1;transform:none}} /* ---------- 类目名滚动带 ---------- */ .marquee{overflow:hidden;border-block:1px solid var(--line);padding:26px 0;display:flex;white-space:nowrap;background:var(--ground)} .mq{font-family:var(--disp);font-weight:500;font-size:clamp(28px,3.6vw,46px);letter-spacing:.14em;text-transform:uppercase; color:transparent;-webkit-text-stroke:1px #35302280;paint-order:stroke;flex:none; animation:mqslide 46s linear infinite;padding-right:.6em} .mq b{font-weight:500;-webkit-text-stroke:0;background:linear-gradient(160deg,var(--gold1),var(--gold2)); -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85} @keyframes mqslide{to{transform:translateX(-100%)}} @media(prefers-reduced-motion:reduce){.mq{animation:none}} /* ---------- 卡片 ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.cards{grid-template-columns:1fr}} .card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden} .card:hover{border-color:var(--gold2);box-shadow:0 24px 50px -24px rgba(0,0,0,.85)} .card .ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#101012} .card .ph::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-80%;width:38%;transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,250,235,.14),transparent);transition:left .7s ease;pointer-events:none} .card:hover .ph::after{left:150%} .card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .card:hover .ph img{transform:scale(1.045)} /* 卡片错峰入场 */ .js .cards .card.rv:nth-child(3n+2){transition-delay:.09s} .js .cards .card.rv:nth-child(3n+3){transition-delay:.18s} .card{transition:border-color .3s,box-shadow .35s ease} .card .body{display:block;padding:20px 22px 22px} .card h3{font-size:18px;letter-spacing:.05em;margin-bottom:6px} .card p{font-size:13.5px;color:var(--muted);margin-bottom:14px} .card .go{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold1)} /* ---------- 工艺 ---------- */ .craft{background:var(--panel);border-block:1px solid var(--line)} .craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px} .craft-grid.three{margin-top:40px} @media(max-width:900px){.craft-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.craft-grid{grid-template-columns:1fr}} .chip{background:var(--ground);border:1px solid var(--line);padding:20px 22px;border-radius:2px} .craft .chip{background:var(--ground)} .wrap>.craft-grid .chip,.chip.lg{background:var(--panel)} .chip b{display:block;font-family:var(--disp);font-weight:500;font-size:15.5px;letter-spacing:.06em;margin-bottom:5px} .chip.lg{padding:26px 26px} .chip.lg b{font-size:18px} .chip span{font-size:13px;color:var(--muted)} .chip.lg span{font-size:14px} .finishes{margin-top:48px} .finishes .label{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:18px} .dots{display:flex;flex-wrap:wrap;gap:26px} .dot{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:12px;color:var(--muted)} .dot i{width:44px;height:44px;border-radius:50%;border:1px solid #2E2E33} .f-gold i{background:radial-gradient(circle at 32% 30%,#F3DDA5,#C89B4B 55%,#8A6426)} .f-silver i{background:radial-gradient(circle at 32% 30%,#F2F4F7,#B9BEC7 55%,#7E848E)} .f-brass i{background:radial-gradient(circle at 32% 30%,#D8BC85,#9A7C46 55%,#5F4A26)} .f-copper i{background:radial-gradient(circle at 32% 30%,#E2A981,#AD6E44 55%,#6E3F22)} .f-nickel i{background:radial-gradient(circle at 32% 30%,#6E7076,#3A3B40 55%,#1B1B1E)} .f-rose i{background:radial-gradient(circle at 32% 30%,#F2CDB9,#C98F73 55%,#8E5B44)} /* ---------- 流程 ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .steps.big{margin-top:12px} @media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.steps{grid-template-columns:1fr}} .step{position:relative;border-top:1px solid var(--line);padding-top:22px} .step::before{content:"";position:absolute;top:-1px;left:0;width:44px;height:1px;background:linear-gradient(90deg,var(--gold1),var(--gold2))} .step .n{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:15px;color:var(--gold1);letter-spacing:.1em} .step b{display:block;font-weight:400;font-size:16.5px;margin:8px 0 6px} .step p{font-size:13.5px;color:var(--muted)} /* ---------- 工厂 ---------- */ .factory{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center} @media(max-width:900px){.factory{grid-template-columns:1fr}} .stats{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap} .stats.big .stat b{font-size:34px} .stat b{display:block;font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:26px;color:var(--gold1)} .stat span{font-size:12.5px;letter-spacing:.08em;color:var(--muted)} .fvideo{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:2px;background:#0A0A0C;object-fit:cover} .fvideo.wide{margin-top:8px} .vcap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px} html[lang^="zh"] .vcap,html[lang="ru"] .vcap,html[lang="ja"] .vcap{letter-spacing:.08em} /* ---------- Shop 带 ---------- */ .shopband{display:flex;align-items:center;gap:28px;justify-content:space-between;flex-wrap:wrap; border:1px solid var(--line);background:linear-gradient(120deg,#17140E,#121214 55%);padding:34px 38px;border-radius:2px} .shopband.tall{padding:48px 44px} .shopband h3{font-size:22px;letter-spacing:.04em;margin-bottom:6px} .shopband p{font-size:13.5px;color:var(--muted);max-width:40em} /* ---------- RFQ / 表单 ---------- */ .rfqband{background:var(--panel);border-block:1px solid var(--line)} .rfq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px} @media(max-width:900px){.rfq-grid{grid-template-columns:1fr}} .rfq-grid ul li{padding-left:22px;position:relative;font-size:14.5px;color:#BDBBB4;margin-bottom:12px} .rfq-grid ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--gold1)} .wa{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-size:14px;color:var(--ink);border:1px solid #2E4A38;background:#101711;padding:11px 18px;border-radius:2px} .wa i{width:8px;height:8px;border-radius:50%;background:#4FC46A} .form{background:var(--ground);border:1px solid var(--line);padding:34px;border-radius:2px;position:relative} .rfqband .form{background:var(--ground)} .wrap .panelform .form{background:var(--panel)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} @media(max-width:600px){.frow{grid-template-columns:1fr}} .fld label{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} html[lang^="zh"] .fld label,html[lang="ru"] .fld label,html[lang="ja"] .fld label{letter-spacing:.1em} .fld input,.fld select,.fld textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:2px; color:var(--ink);font-family:var(--ui);font-weight:300;font-size:14.5px;padding:12px 14px} .fld input::placeholder,.fld textarea::placeholder{color:#5C5C62} .fld :is(input,select,textarea):focus{outline:none;border-color:var(--gold2)} .drop{border:1px dashed #3A3A40;border-radius:2px;padding:18px;text-align:center;font-size:13px;color:var(--muted);margin-bottom:18px} .fnote{font-size:12.5px;color:var(--muted);margin-top:14px} .fsuccess{position:absolute;inset:0;background:var(--panel);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:40px;border-radius:2px} .fsuccess[hidden]{display:none} .fsuccess h3{font-size:24px} .fsuccess p{color:#BDBBB4;font-size:14.5px;max-width:30em} /* ---------- 页脚 ---------- */ footer{padding:72px 0 0;overflow:hidden} .fghost{font-family:'Cinzel',Georgia,serif;font-weight:600;text-align:center;line-height:1;user-select:none; font-size:clamp(64px,13vw,180px);letter-spacing:.1em;margin-top:56px;transform:translateY(18%); background:linear-gradient(180deg,#221D12 0%,#0E0D0C 78%);-webkit-background-clip:text;background-clip:text;color:transparent} .fgrid{display:grid;grid-template-columns:1.2fr .7fr .7fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line)} @media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.fgrid{grid-template-columns:1fr}} .fbrand p{font-size:13.5px;color:var(--muted);max-width:26em;margin-top:16px} footer h4{font-family:var(--ui);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:18px} html[lang^="zh"] footer h4,html[lang="ru"] footer h4,html[lang="ja"] footer h4{letter-spacing:.14em} .flinks{display:flex;flex-direction:column;gap:10px;font-size:14px;color:#C4C4C9} .flinks a:hover{color:var(--gold1)} .fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:12.5px;color:#6E6E74} .fbottom a:hover{color:var(--gold1)} /* ---------- WhatsApp 浮窗 ---------- */ .wafloat{position:fixed;right:26px;bottom:26px;z-index:60;width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center;color:#0C0C0E; background:linear-gradient(160deg,#5AD273,#2E9E4C);box-shadow:0 10px 30px -8px rgba(0,0,0,.6)} .wafloat:hover{filter:brightness(1.08)} /* ---------- 内页通用 ---------- */ .page-head{position:relative;padding:96px 0 56px;max-width:56em} .page-head::after{content:"";display:block;width:64px;height:1px;margin-top:30px; background:linear-gradient(90deg,var(--gold1),var(--gold2),transparent)} .page-head h1{font-size:clamp(34px,4.6vw,54px)} .page-head p{color:#BDBBB4;font-size:16.5px;margin-top:18px;max-width:38em} .page-head .lede{font-family:var(--disp);font-size:21px;color:var(--gold1)} .crumb{font-size:12.5px;letter-spacing:.1em;color:var(--muted);padding:26px 0 0} .crumb b{color:var(--ink);font-weight:400} .crumb a:hover{color:var(--gold1)} .cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:26px 0 44px;flex-wrap:wrap} .cat-head h1{font-size:clamp(30px,4vw,44px)} .cat-head p{max-width:38em;color:#BDBBB4;margin-top:14px;font-size:15.5px} .prose{max-width:44em} .prose p{color:#C9C7C0;font-size:16px;margin-bottom:20px;line-height:1.85} /* ---------- 图库 ---------- */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px} .gallery .g{overflow:hidden;border:1px solid var(--line);border-radius:2px;background:#101012} .gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .gallery .g:hover img{transform:scale(1.04)} .gallery .g.big{grid-column:span 2;grid-row:span 2} .gallery.g1{grid-template-columns:1fr;grid-auto-rows:auto} .gallery.g1 .g img{max-height:520px} .gallery.g2{grid-template-columns:repeat(2,1fr);grid-auto-rows:320px} .gallery.g3{grid-template-columns:repeat(3,1fr);grid-auto-rows:260px} .gallery.g6{grid-template-columns:repeat(3,1fr);grid-auto-rows:220px} @media(max-width:800px){.gallery,.gallery.g3,.gallery.g6{grid-template-columns:repeat(2,1fr)}} /* ---------- 选项/规格 ---------- */ .opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:8px} @media(max-width:800px){.opt-grid{grid-template-columns:1fr}} .fillchips{display:flex;flex-wrap:wrap;gap:10px} .fillchips span{border:1px solid var(--line);background:var(--panel);padding:9px 16px;font-size:13px;color:#C4C4C9;border-radius:2px} .spec{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:22px} .spec td{padding:14px 6px;border-bottom:1px solid #1E1E22;color:#C9C7C0} .spec td:first-child{width:36%;color:var(--muted);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase} html[lang^="zh"] .spec td:first-child,html[lang="ru"] .spec td:first-child,html[lang="ja"] .spec td:first-child{letter-spacing:.06em} .qband{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; background:linear-gradient(120deg,#17140E,#121214 55%);border:1px solid var(--line);padding:38px 42px;border-radius:2px} .qband::before{content:"";position:absolute;right:-40px;top:50%;width:190px;height:190px;transform:translateY(-50%); background:url('../logo/mark.svg') no-repeat center/contain;opacity:.07;pointer-events:none} .qband h3{font-size:24px} .related .cards{grid-template-columns:repeat(3,1fr)} @media(max-width:800px){.related .cards{grid-template-columns:1fr}} /* ---------- FAQ ---------- */ .faqlist{max-width:52em} .faqlist details{border-bottom:1px solid var(--line);padding:4px 0} .faqlist summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px; font-family:var(--disp);font-weight:500;font-size:18px;padding:20px 0} .faqlist summary::-webkit-details-marker{display:none} .faqlist summary::after{content:"+";font-family:var(--ui);font-weight:300;font-size:22px;color:var(--gold1);flex:none} .faqlist details[open] summary::after{content:"–"} .faqlist details p{color:#BDBBB4;font-size:15px;padding:0 0 22px;max-width:44em} /* ---------- 进站铸压开场 ---------- */ .strike-intro{position:fixed;inset:0;z-index:120;background:var(--ground);display:flex;align-items:center;justify-content:center; pointer-events:none;animation:si-out .35s ease 1.05s forwards} .strike-intro .si-coin{width:min(190px,40vw);aspect-ratio:1;border-radius:50%;position:relative; background:radial-gradient(circle at 38% 30%,#232016 0%,#131109 62%,#0C0C0E 100%); box-shadow:0 0 0 1px #2E2818,0 30px 90px -20px rgba(0,0,0,.9); animation:si-press .5s cubic-bezier(.6,0,.2,1) both} .strike-intro .si-coin img{position:absolute;inset:10%;width:80%;height:80%} .strike-intro .si-ring{position:absolute;width:min(190px,40vw);aspect-ratio:1;border-radius:50%; border:1.5px solid var(--gold1);opacity:0;animation:si-ring .6s ease .42s both} @keyframes si-press{from{transform:scale(2.1) translateY(-14vh);opacity:0}60%{opacity:1}to{transform:scale(1) translateY(0);opacity:1}} @keyframes si-ring{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}} @keyframes si-out{to{opacity:0;visibility:hidden}} @media(prefers-reduced-motion:reduce){.strike-intro{display:none}} /* ---------- 卡片高光跟随 ---------- */ .card .ph::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(233,201,126,.16),transparent 65%)} .card:hover .ph::before{opacity:1} /* ---------- 图库 lightbox ---------- */ .lb{position:fixed;inset:0;z-index:110;background:rgba(8,8,10,.93);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center} .lb[hidden]{display:none} .lb img{max-width:min(1100px,88vw);max-height:86vh;object-fit:contain;border:1px solid var(--line);border-radius:2px; box-shadow:0 40px 120px -30px rgba(0,0,0,.9)} .lb button{position:absolute;background:none;border:1px solid #3A3A40;color:var(--ink);cursor:pointer;border-radius:2px; font-family:var(--ui);line-height:1;display:flex;align-items:center;justify-content:center} .lb button:hover{border-color:var(--gold2);color:var(--gold1)} .lb .lb-x{top:22px;right:26px;width:44px;height:44px;font-size:22px} .lb .lb-prev,.lb .lb-next{top:50%;transform:translateY(-50%);width:46px;height:64px;font-size:26px} .lb .lb-prev{left:22px}.lb .lb-next{right:22px} @media(max-width:640px){.lb .lb-prev{left:8px}.lb .lb-next{right:8px}} /* ---------- 工艺页滚动叙事 ---------- */ .craftflow{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start} .cf-media{position:sticky;top:110px;height:min(calc(100vh - 200px),560px);overflow:hidden; border:1px solid var(--line);border-radius:2px;background:#101012} .cf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease; filter:saturate(.92)} .cf-media img.on{opacity:1} .cf-step{min-height:min(62vh,520px);display:flex;flex-direction:column;justify-content:center;padding:32px 0;border-bottom:1px solid #1A1A1E} .cf-step:last-child{border-bottom:none} .cf-num{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:15px;letter-spacing:.22em;color:var(--gold1)} .cf-step h2{font-size:clamp(24px,2.6vw,32px);margin:12px 0 14px} .cf-step p{color:#BDBBB4;font-size:15.5px;max-width:30em} .cf-inline{display:none} @media(max-width:900px){ .craftflow{grid-template-columns:1fr} .cf-media{display:none} .cf-step{min-height:0;padding:40px 0} .cf-inline{display:block;margin-top:22px;border:1px solid var(--line);border-radius:2px;aspect-ratio:3/2;object-fit:cover} } /* ---------- 商城 ---------- */ .shopgrid .pricerow{display:flex;align-items:baseline;gap:8px;margin:2px 0 12px} .pricerow b{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:20px;color:var(--gold1)} .pricerow.big b{font-size:32px} .shipbadge{position:absolute;top:12px;inset-inline-start:12px;z-index:3;font-size:11px;letter-spacing:.08em; background:linear-gradient(160deg,var(--gold1),var(--gold2));color:#141414;padding:5px 10px;border-radius:2px;font-weight:500} .prod-buy h1{font-size:clamp(26px,3vw,36px)} .prod-short{color:#BDBBB4;font-size:15px;margin-top:10px} .prod-buy .pricerow.big{margin:18px 0 6px} .shipnote{font-size:13px;color:var(--muted);margin-bottom:18px} .shipnote.gold{color:var(--gold1)} .orderform{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:24px;position:relative; display:flex;flex-direction:column;gap:14px} .qtyrow{display:flex;gap:8px;align-items:stretch} .qtyrow input{width:80px;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:2px;color:var(--ink);font-family:var(--ui);font-size:15px} .qtyrow input::-webkit-outer-spin-button,.qtyrow input::-webkit-inner-spin-button{-webkit-appearance:none} .qbtn{width:40px;background:var(--panel2);border:1px solid var(--line);border-radius:2px;color:var(--ink);font-size:17px;cursor:pointer} .qbtn:hover{border-color:var(--gold2);color:var(--gold1)} .addonrow{display:flex;align-items:center;gap:10px;font-size:14px;color:#C9C7C0;cursor:pointer} .addonrow input{width:16px;height:16px;accent-color:#A87B32} .subtotal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .subtotal b{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:24px;color:var(--gold1);letter-spacing:0} .paybox{margin-top:18px;border:1px solid var(--line);border-radius:2px;padding:18px 20px;background:#101012} .paybox p{font-size:13.5px;color:#BDBBB4;margin-top:8px} .disclaimer{margin-top:14px;font-size:12px;color:#8A8A90;border-inline-start:2px solid #3A3320;padding-inline-start:12px} /* ---------- 商城 V2 · 1688 式详情页 ---------- */ .prod2{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:44px;padding-top:26px;align-items:start} @media(max-width:960px){.prod2{grid-template-columns:minmax(0,1fr)}} .pg2{position:sticky;top:96px} @media(max-width:960px){.pg2{position:static}} .pg2-main{position:relative;aspect-ratio:1;background:#101012;border:1px solid var(--line);border-radius:2px;overflow:hidden; display:flex;align-items:center;justify-content:center} .pg2-main img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease;transform-origin:center;cursor:zoom-in} .pg2-main video{width:100%;height:100%;object-fit:contain;background:#000} .pg2-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .pt{flex:0 0 74px;width:74px;height:74px;border:1px solid var(--line);border-radius:2px;background:#101012;padding:0; cursor:pointer;overflow:hidden;position:relative;opacity:.72;transition:border-color .2s,opacity .2s} .pt img{width:100%;height:100%;object-fit:cover} .pt.on,.pt:hover{border-color:var(--gold2);opacity:1} .ptv-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#F2F0EB;font-size:18px;background:rgba(0,0,0,.4)} .pricebar{display:flex;align-items:center;gap:14px;margin:16px 0 4px;flex-wrap:wrap} .fsbadge{font-size:11px;letter-spacing:.08em;font-weight:500;color:#141414;border-radius:2px;padding:5px 10px; background:linear-gradient(160deg,var(--gold1),var(--gold2))} .orderform.v2{gap:16px;margin-top:14px} .skuhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .skuhead label{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .skuhead .sm{font-size:12px} .skus{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px} .skus.collapsed{max-height:238px;overflow:hidden;position:relative} .skus.collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px; background:linear-gradient(to bottom,transparent,var(--panel))} .sku{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line); border-radius:2px;padding:8px 5px 7px;cursor:pointer;transition:border-color .15s,box-shadow .15s} .sku img{width:54px;height:54px;object-fit:cover;border-radius:2px} .sku span{font-family:var(--ui);font-size:10.5px;line-height:1.3;color:#B9B9BE;text-align:center;min-height:27px;display:flex;align-items:center;justify-content:center} .sku:hover{border-color:var(--gold2)} .sku.on{border-color:var(--gold1);box-shadow:0 0 0 1px var(--gold1)} .sku.on span{color:var(--gold1)} .skumore{width:100%;margin-top:8px;background:none;border:1px dashed #3A3A40;color:var(--gold1); padding:9px;border-radius:2px;cursor:pointer;font-family:var(--ui);font-size:12.5px;letter-spacing:.04em} .skumore:hover{border-color:var(--gold2)} .qtyline{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .qtyline>label{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .stockdot{margin-left:auto;font-size:12.5px;color:#9CC7A6;display:flex;gap:7px;align-items:center} .stockdot i{width:7px;height:7px;border-radius:50%;background:#4FC46A} .addonrow.v2 img{width:42px;height:42px;object-fit:cover;border-radius:2px;border:1px solid var(--line)} .selline[hidden]{display:none} .selline{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap} .selline b{color:var(--gold1);font-weight:400} .ctarow{display:grid;grid-template-columns:1.45fr 1fr;gap:10px} .promises{display:flex;justify-content:space-between;gap:8px;margin-top:18px;font-size:11.5px;color:var(--muted); border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap} .promises span::before{content:"\2713 ";color:var(--gold1)} .ptabs{position:sticky;top:0;z-index:40;background:rgba(12,12,14,.94);backdrop-filter:blur(10px); border-block:1px solid var(--line);margin-top:64px} .ptabs-in{display:flex;gap:36px} .ptabs a{padding:14px 0 12px;font-size:13.5px;letter-spacing:.08em;color:#C4C4C9;border-bottom:2px solid transparent} .ptabs a.on,.ptabs a:hover{color:var(--gold1);border-color:var(--gold2)} .pblock{padding:56px 0 10px;scroll-margin-top:74px} .attrs2{max-width:780px} .detailflow{display:flex;flex-direction:column;max-width:900px;margin:26px auto 0; background:#101012;border:1px solid var(--line);border-radius:2px;overflow:hidden} .detailflow img{width:100%;display:block} .detailflow video{width:100%;background:#000} .dcopy{max-width:780px;margin:22px auto 0} .mbuybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;justify-content:space-between; gap:14px;padding:10px 18px;background:rgba(12,12,14,.97);border-top:1px solid var(--line)} @media(max-width:960px){.mbuybar{display:flex}} /* ---------- 工厂掠影 / 生产现场 ---------- */ .fgridphotos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:900px){.fgridphotos{grid-template-columns:repeat(2,1fr)}} .fp{margin:0;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#101012} .fp:first-child{grid-column:span 2;grid-row:span 2} .fp img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s} .fp:first-child img{aspect-ratio:auto;min-height:100%} .fp:hover img{transform:scale(1.03)} .fp figcaption{font-family:var(--ui);font-size:11.5px;letter-spacing:.1em;color:var(--muted);padding:9px 12px;border-top:1px solid #1E1E22} .vshorts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px} @media(max-width:700px){.vshorts{grid-template-columns:1fr;max-width:420px}} .vs{margin:0;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#101012} .vs video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block} .vs figcaption{font-family:var(--ui);font-size:11.5px;letter-spacing:.1em;color:var(--muted);padding:9px 12px;border-top:1px solid #1E1E22} /* ---------- 作品库 ---------- */ .wfilters{margin:-8px 0 28px;display:flex;flex-direction:column;gap:14px} .wf-cats{display:flex;flex-wrap:wrap;gap:8px} .wchip{background:var(--panel);border:1px solid var(--line);color:#C4C4C9;border-radius:2px;padding:8px 14px;font-family:var(--ui);font-size:13px;cursor:pointer;display:inline-flex;gap:8px;align-items:center} .wchip i{font-style:normal;font-size:11px;color:var(--muted)} .wchip:hover{border-color:var(--gold2)} .wchip.on{border-color:var(--gold1);color:var(--gold1);background:#17140E} .wchip.on i{color:var(--gold2)} .wf-facets{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end} .wf-sel{display:flex;flex-direction:column;gap:5px} .wf-sel span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .wf-sel select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:2px;padding:8px 10px;font-family:var(--ui);font-size:13px;min-width:150px} .wf-sel select:focus{outline:none;border-color:var(--gold2)} .wreset{background:none;border:1px dashed #3A3A40;color:var(--gold1);border-radius:2px;padding:9px 14px;font-family:var(--ui);font-size:12.5px;cursor:pointer;align-self:flex-end} .wcount{font-size:13px} .wcount b{color:var(--gold1);font-weight:500} .wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px} .wgrid.small{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .wgrid.c5{grid-template-columns:repeat(5,1fr)} @media(max-width:1000px){.wgrid.c5{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.wgrid.c5{grid-template-columns:1fr 1fr}} .wcard{background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s} .wcard:hover{border-color:var(--gold2)} .wcard[hidden]{display:none} .wph{display:block;aspect-ratio:1;background:#F4F3F0;overflow:hidden} .wph img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .wcard:hover .wph img{transform:scale(1.04)} .wbody{padding:12px 13px 13px;display:flex;flex-direction:column;gap:5px} .wbody b{font-family:var(--ui);font-weight:400;font-size:13.5px;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .wmeta{font-size:11px;letter-spacing:.06em;color:var(--muted)} .wtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px} .wtags i{font-style:normal;font-size:10.5px;color:#B9B9BE;border:1px solid #2A2A2E;border-radius:2px;padding:2px 7px} .wempty{padding:60px 0;text-align:center} .pg2-main.wk{background:#fff} .pg2-main.wk img{cursor:default;transform:none!important;object-fit:contain;padding:6%} .prod-buy.wk .wru{font-size:13px;margin-top:6px} .prod-buy.wk .wsku{font-size:11.5px;letter-spacing:.14em;margin-top:4px} .qband.wk{margin-top:26px;padding:24px 26px} /* ---------- 类目页 V3 / 首页作品条 / 子类筛选 ---------- */ .wchip.sm{padding:6px 11px;font-size:12px} .wf-subs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-inline-start:2px solid var(--gold2);background:var(--panel)} .wf-subs[hidden]{display:none} .wstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:800px){.wstrip{grid-template-columns:1fr 1fr}} .cnums{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:2px;margin-top:40px;background:var(--panel)} .cnums div{padding:22px 24px;border-inline-end:1px solid var(--line)} .cnums div:last-child{border-inline-end:0} .cnums b{display:block;font-family:var(--disp);font-weight:500;font-size:32px;color:var(--gold1);line-height:1.1} .cnums b.t{font-size:21px;padding-top:6px} .cnums span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px} html[lang^="zh"] .cnums span,html[lang="ja"] .cnums span,html[lang="ru"] .cnums span,html[lang="ar"] .cnums span{letter-spacing:.04em;text-transform:none} @media(max-width:800px){.cnums{grid-template-columns:1fr 1fr}.cnums div:nth-child(2){border-inline-end:0}.cnums div:nth-child(-n+2){border-bottom:1px solid var(--line)}} .cnums+.gallery{margin-top:40px} .csubs{display:flex;flex-wrap:wrap;gap:8px;margin:-18px 0 26px} .csubs .wchip:hover{color:var(--gold1)} .cspec{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px 32px;margin-top:8px} .cspec h4{font-family:var(--ui);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold1);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)} html[lang="ar"] .cspec h4,html[lang^="zh"] .cspec h4,html[lang="ja"] .cspec h4{letter-spacing:.06em;text-transform:none} .cspec li{display:grid;grid-template-columns:1fr auto;gap:5px 12px;font-size:13.5px;color:#C4C4C9;padding:8px 0} .cspec li em{font-style:normal;color:var(--muted);font-size:12px} .cspec li i{grid-column:1/-1;display:block;height:2px;background:#232326;position:relative} .cspec li i::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:var(--p);background:linear-gradient(90deg,var(--gold1),var(--gold2))} .cfaq{max-width:820px} .cfaq details{border-top:1px solid var(--line);padding:18px 0} .cfaq details:last-child{border-bottom:1px solid var(--line)} .cfaq summary{cursor:pointer;list-style:none;font-size:16px;color:var(--ink);display:flex;justify-content:space-between;gap:20px} .cfaq summary::-webkit-details-marker{display:none} .cfaq summary::after{content:"+";color:var(--gold1);font-size:20px;line-height:1;flex:none} .cfaq details[open] summary::after{content:"–"} .cfaq p{margin-top:12px;color:#BDBBB4;font-size:14.5px;max-width:60em} /* ---------- 工厂页 V2：产线视频墙 ---------- */ .fwall{position:relative;overflow:hidden;min-height:min(88vh,780px);background:#08080A;display:flex;align-items:flex-end;isolation:isolate} .fw-belt{position:absolute;inset:-12% -20% -6%;transform:perspective(1400px) rotateX(16deg) rotateY(-7deg) translateY(var(--shift,0px));transform-origin:50% 60%;display:flex;flex-direction:column;justify-content:center;gap:22px;pointer-events:none;z-index:0} .fw-row{display:flex;gap:18px;width:max-content;pointer-events:auto;animation:fwbelt 70s linear infinite} .fw-row.r2{animation-direction:reverse;animation-duration:84s;margin-left:-160px} @keyframes fwbelt{from{transform:translateX(0)}to{transform:translateX(-50%)}} .fw-tile{position:relative;flex:none;width:clamp(150px,15vw,236px);aspect-ratio:9/16;margin:0;border-radius:3px;overflow:hidden;background:#131316;border:1px solid #2A2A30;box-shadow:0 30px 60px -30px rgba(0,0,0,.9);transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s,border-color .45s;cursor:pointer;will-change:transform} .fw-tile video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.82)} .fw-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#D9D6CC;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .35s} html[lang="ar"] .fw-tile figcaption,html[lang^="zh"] .fw-tile figcaption,html[lang="ja"] .fw-tile figcaption{letter-spacing:.04em;text-transform:none} .fw-tile.on{transform:translateY(-14px) scale(1.06);border-color:var(--gold1);filter:drop-shadow(0 0 22px rgba(233,201,126,.35));z-index:3} .fw-tile.on video{filter:none} .fw-tile.on figcaption{opacity:1} .fwall.focus .fw-tile:not(.on){filter:brightness(.55)} .fwall.focus .fw-row{animation-play-state:paused} .fw-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;mix-blend-mode:screen} .fw-veil{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.05) 35%,rgba(8,8,10,.15) 60%,rgba(8,8,10,.92) 100%),radial-gradient(60% 50% at 18% 78%,rgba(8,8,10,.85),transparent 70%)} .fw-copy{position:relative;z-index:4;padding-top:120px;padding-bottom:64px;pointer-events:none;width:100%} .fw-copy h1{font-size:clamp(38px,5.4vw,66px);margin-top:14px;max-width:11em;text-shadow:0 8px 40px rgba(0,0,0,.6)} .fw-copy .lede{font-family:var(--disp);font-size:clamp(17px,1.7vw,22px);color:var(--gold1);margin-top:16px;max-width:30em} .fw-hint{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid #2A2A30;border-radius:2px;padding:7px 12px;background:rgba(12,12,14,.6)} html[lang="ar"] .fw-hint,html[lang^="zh"] .fw-hint,html[lang="ja"] .fw-hint,html[lang="ru"] .fw-hint{letter-spacing:.04em;text-transform:none} .fw-hint svg{color:var(--gold1)} @media(max-width:860px){ .fwall{min-height:min(78vh,640px)} .fw-belt{inset:-6% -30% -4%;transform:perspective(900px) rotateX(12deg) rotateY(-5deg);gap:12px} .fw-row{gap:10px;animation-duration:50s} .fw-tile{width:120px} .fw-copy{padding-top:90px;padding-bottom:40px} .fw-hint{display:none} } @media(prefers-reduced-motion:reduce){.fw-row{animation:none}.fw-tile{transition:none}} /* 放大舞台 */ .fw-stage{position:fixed;inset:0;z-index:120;background:rgba(6,6,8,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 20px} .fw-stage[hidden]{display:none} .fw-stage video{max-height:min(80vh,820px);max-width:min(92vw,460px);border:1px solid var(--line);border-radius:3px;background:#000} .fw-stagecap{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold1)} html[lang="ar"] .fw-stagecap,html[lang^="zh"] .fw-stagecap,html[lang="ja"] .fw-stagecap{letter-spacing:.04em;text-transform:none} .fw-stage .lb-x{position:absolute;top:18px;right:22px} /* ---------- 六道工序 × 实拍 ---------- */ .fproc{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:64px;align-items:start} .fp-stage{position:sticky;top:104px} .fp-frame{position:relative;aspect-ratio:9/16;max-height:calc(100vh - 150px);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#0E0E11;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)} .fp-frame::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(233,201,126,.12),inset 0 -80px 80px -60px rgba(0,0,0,.7)} .fp-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease} .fp-v.on{opacity:1} .fp-badge{position:absolute;left:14px;top:12px;z-index:2;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.18em;color:var(--gold1);background:rgba(8,8,10,.6);border:1px solid rgba(233,201,126,.35);border-radius:2px;padding:4px 10px} .fp-sparks{position:absolute;left:-40px;right:-40px;top:-40px;bottom:-40px;width:calc(100% + 80px);height:calc(100% + 80px);pointer-events:none;mix-blend-mode:screen} .fp-steps{position:relative;padding-left:44px} .fp-line{position:absolute;left:12px;top:8px;bottom:8px;width:2px;background:#202024;border-radius:2px} .fp-line i{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--gold2),var(--gold1));box-shadow:0 0 14px rgba(233,201,126,.6);transition:height .2s linear} .fp-line i::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);background:var(--gold1);box-shadow:0 0 18px 4px rgba(233,201,126,.55)} .fp-step{position:relative;min-height:min(58vh,440px);display:flex;flex-direction:column;justify-content:center;padding:28px 0;border-bottom:1px solid #1A1A1E;opacity:.42;transition:opacity .4s} .fp-step:last-child{border-bottom:0} .fp-step.on{opacity:1} .fp-step::before{content:"";position:absolute;left:-37px;top:50%;width:12px;height:12px;border-radius:50%;background:#26262B;border:1px solid #3a3a42;transform:translateY(-50%);transition:background .3s,box-shadow .3s} .fp-step.on::before{background:var(--gold1);box-shadow:0 0 12px rgba(233,201,126,.7)} .fp-num{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.22em;color:var(--gold1)} .fp-step h3{font-size:clamp(22px,2.3vw,30px);margin:10px 0 12px} .fp-step p{color:#BDBBB4;font-size:15.5px;max-width:32em} .fp-inline{display:none} @media(max-width:860px){ .fproc{grid-template-columns:1fr;gap:0} .fp-stage{display:none} .fp-steps{padding-left:28px} .fp-line{left:6px} .fp-step{min-height:0;opacity:1;padding:26px 0} .fp-step::before{left:-27px;top:34px;transform:none} .fp-inline{display:block;width:min(100%,300px);aspect-ratio:9/16;object-fit:cover;border:1px solid var(--line);border-radius:3px;margin-top:16px;background:#0E0E11} } /* ---------- 团队 + 厂区胶片条 ---------- */ .fteam{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:40px;align-items:start} .ft-card{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:12px} .ft-img{position:relative;overflow:hidden;border-radius:2px;background:#0E0E11} .ft-img img{width:100%;height:auto;display:block;filter:saturate(.9) contrast(1.02)} .ft-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(8,8,10,.55)),url("data:image/svg+xml;utf8,");mix-blend-mode:overlay} .ft-card figcaption{padding:14px 6px 4px;display:flex;flex-direction:column;gap:4px} .ft-card figcaption b{font-family:var(--disp);font-weight:500;font-size:20px} .ft-card figcaption span{font-size:13.5px;color:var(--muted)} .ft-strip{min-width:0} .ft-film{display:flex;gap:14px;width:max-content;margin-top:22px;animation:ftfilm 60s linear infinite} @keyframes ftfilm{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ft-strip{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ft-frame{margin:0;flex:none;width:200px;background:#0E0E11;border:1px solid var(--line);border-radius:2px;padding:6px 6px 8px} .ft-frame img{width:100%;height:132px;object-fit:cover;display:block;border-radius:1px;filter:saturate(.85) contrast(1.02) brightness(.95)} .ft-frame figcaption{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[lang="ar"] .ft-frame figcaption,html[lang^="zh"] .ft-frame figcaption,html[lang="ja"] .ft-frame figcaption{letter-spacing:.04em;text-transform:none} @media(max-width:860px){.fteam{grid-template-columns:1fr}.ft-card{max-width:440px}} @media(prefers-reduced-motion:reduce){.ft-film{animation:none}} /* ---------- 温州 → 全球航线 ---------- */ .froute{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:48px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:36px 40px} .fr-svg{width:100%;height:auto;display:block} .fr-grid line{stroke:#1C1C21;stroke-width:1} .fr-arc{fill:none;stroke:url(#frg);stroke-width:1.4;stroke-dasharray:700;stroke-dashoffset:700;opacity:.9} .froute.draw .fr-arc{animation:frdraw 1.6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--d)*.18s + .2s)} @keyframes frdraw{to{stroke-dashoffset:0}} .fr-dot{fill:var(--gold1);opacity:0} .froute.draw .fr-dot{animation:frdot .5s ease forwards;animation-delay:calc(var(--d)*.18s + 1.5s)} @keyframes frdot{to{opacity:1}} .fr-lbl{font-family:var(--ui);font-size:11px;letter-spacing:.12em;fill:#9A9AA0;text-transform:uppercase} .fr-lbl.home{fill:var(--gold1);font-size:12px} .fr-home{fill:var(--gold1)} .fr-pulse{fill:none;stroke:var(--gold1);stroke-width:1.2;opacity:0;transform-origin:320px 160px;animation:frpulse 2.4s ease-out infinite} @keyframes frpulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(4.2);opacity:0}} @media(max-width:860px){.froute{grid-template-columns:1fr;padding:26px 22px}} @media(prefers-reduced-motion:reduce){.fr-arc{stroke-dashoffset:0}.fr-dot{opacity:1}.fr-pulse{animation:none}} /* ---------- 合作流程页 V2：3D 徽记四幕 ---------- */ .hw-grid{display:grid;grid-template-columns:minmax(320px,46%) 1fr;gap:60px;align-items:start} .hw-stagecol{position:sticky;top:92px;padding-top:24px} .hw-stage{position:relative;height:min(calc(100vh - 190px),600px);border:1px solid var(--line);border-radius:4px;overflow:hidden; background:radial-gradient(62% 58% at 50% 46%,#1A150D 0%,#0E0D0B 55%,#09090B 100%);box-shadow:0 40px 90px -50px rgba(0,0,0,.9)} .hw-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.9;transition:opacity .9s; background-image:linear-gradient(rgba(233,201,126,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(233,201,126,.10) 1px,transparent 1px);background-size:40px 40px; -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)} .hw-stage:not([data-phase="0"]) .hw-grid-bg{opacity:.18} .hw-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab;touch-action:pan-y} .hw-stage canvas:active{cursor:grabbing} .hw-flat{display:none} .hw-stage.flat canvas{display:none} .hw-stage.flat .hw-flat{display:block;position:absolute;left:50%;top:50%;width:52%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))} .hw-seal{position:absolute;right:26px;top:26px;width:112px;height:112px;border-radius:50%;border:2px solid var(--gold1);box-shadow:inset 0 0 0 4px #0B0B0D,inset 0 0 0 5px var(--gold2); display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-family:var(--disp);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold1); transform:rotate(-14deg) scale(0);opacity:0;transition:transform .55s cubic-bezier(.2,1.5,.4,1),opacity .25s;pointer-events:none} .hw-stage[data-phase="2"] .hw-seal{transform:rotate(-14deg) scale(1);opacity:1} html[lang="ar"] .hw-seal,html[lang^="zh"] .hw-seal,html[lang="ja"] .hw-seal{letter-spacing:.04em;text-transform:none} .hw-qty{position:absolute;left:24px;bottom:22px;opacity:0;transform:translateY(10px);transition:.5s;pointer-events:none} .hw-stage[data-phase="3"] .hw-qty{opacity:1;transform:none} .hw-qty b{display:block;font-family:var(--disp);font-weight:500;font-size:34px;color:var(--gold1);line-height:1} .hw-qty span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px} html[lang="ar"] .hw-qty span,html[lang^="zh"] .hw-qty span,html[lang="ja"] .hw-qty span{letter-spacing:.04em;text-transform:none} .hw-drag{position:absolute;right:16px;bottom:14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);pointer-events:none} .hw-stage.flat .hw-drag{display:none} .hw-phases{display:flex;gap:8px;margin-top:12px} .hw-phase{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.1em;padding:9px 0;cursor:pointer;border-radius:2px;transition:.25s} .hw-phase:hover{color:var(--ink)} .hw-phase.on{border-color:var(--gold1);color:var(--gold1);background:#17140E} .hw-head{min-height:min(72vh,560px);display:flex;flex-direction:column;justify-content:center;gap:16px;padding:70px 0 40px} .hw-head h1{font-size:clamp(36px,4.6vw,58px)} .hw-head .lede{font-family:var(--disp);font-size:clamp(17px,1.6vw,21px);color:var(--gold1);max-width:26em} .hw-head .btn{align-self:flex-start;margin-top:8px} html[dir="rtl"] .hw-head .btn{align-self:flex-end} .hw-step{position:relative;min-height:min(80vh,640px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:36px 0;border-top:1px solid #1A1A1E;opacity:.38;transition:opacity .4s} .hw-step.on{opacity:1} .hw-num{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.26em;color:var(--gold1)} .hw-time{display:inline-block;margin-top:12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);border:1px solid #3d3423;padding:3px 10px;border-radius:2px} html[lang="ar"] .hw-time,html[lang^="zh"] .hw-time,html[lang="ja"] .hw-time,html[lang="ru"] .hw-time{letter-spacing:.04em;text-transform:none} .hw-step h2{font-size:clamp(26px,2.8vw,36px);margin:14px 0 12px} .hw-step p{color:#BDBBB4;font-size:15.5px;max-width:34em} .hw-gg{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;width:100%;max-width:640px} .hw-gg div{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:14px 16px;display:flex;flex-direction:column;gap:6px} .hw-gg b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold1);font-weight:500} html[lang="ar"] .hw-gg b,html[lang^="zh"] .hw-gg b,html[lang="ja"] .hw-gg b{letter-spacing:.04em;text-transform:none} .hw-gg span{font-size:14px;color:#C4C4C9;line-height:1.55} .hw-check{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:12.5px;letter-spacing:.1em;color:var(--gold1)} .hw-check i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--gold1);color:#141414;font-size:12px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(233,201,126,.5)} @media(max-width:860px){ /* 移动端：hero 文案 → 吸顶的 3D 舞台（随后面的四步一起变形）→ 四步 */ .hw-grid{display:flex;flex-direction:column;gap:0;align-items:stretch} .hw-col{display:contents} .hw-head{order:0;min-height:0;padding:56px 0 18px} .hw-stagecol{order:1;position:sticky;top:var(--navh,130px);z-index:5;padding:8px 0 10px;background:var(--ground)} .hw-stage{height:min(38vh,240px)} .hw-phases{margin-top:8px} .hw-phase{padding:6px 0;font-size:12px} .hw-step{order:2;min-height:0;opacity:1;padding:26px 0} .hw-gg{grid-template-columns:1fr} .hw-seal{width:84px;height:84px;font-size:10px;right:14px;top:14px} .hw-qty b{font-size:26px} } /* ---------- 交期估算器 ---------- */ .hw-est{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:28px 30px;display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:26px 44px} .hw-est-form{display:flex;flex-direction:column;gap:12px} .hw-est-form label{display:flex;flex-direction:column;gap:5px} .hw-est-form span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} html[lang="ar"] .hw-est-form span,html[lang^="zh"] .hw-est-form span,html[lang="ja"] .hw-est-form span{letter-spacing:.04em;text-transform:none} .hw-est-form select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:2px;padding:9px 10px;font-family:var(--ui);font-size:14px} .hw-est-form select:focus{outline:none;border-color:var(--gold2)} .hw-gantt{display:flex;flex-direction:column;gap:12px;align-self:center;min-width:0} .hw-bar{position:relative;height:46px;min-width:200px;max-width:100%;border:1px solid #3d3423;border-radius:2px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 14px; background:linear-gradient(90deg,rgba(233,201,126,.26),rgba(168,123,50,.10));transition:width .6s cubic-bezier(.2,.7,.2,1);box-sizing:border-box} .hw-bar b{font-size:13px;font-weight:500;white-space:nowrap} .hw-bar span{font-size:12.5px;color:var(--gold1);white-space:nowrap} .hw-est-out{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:22px 44px;align-items:center;border-top:1px solid var(--line);padding-top:22px} .hw-est-out div{display:flex;flex-direction:column;gap:4px} .hw-est-out span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} html[lang="ar"] .hw-est-out span,html[lang^="zh"] .hw-est-out span,html[lang="ja"] .hw-est-out span{letter-spacing:.04em;text-transform:none} .hw-est-out b{font-family:var(--disp);font-size:26px;color:var(--gold1);font-weight:500;line-height:1.2} .hw-est-out .btn{margin-inline-start:auto} .hw-est .fnote{grid-column:1/-1;margin:0} @media(max-width:860px){.hw-est{grid-template-columns:1fr;padding:20px 18px}.hw-bar{min-width:0}.hw-est-out .btn{margin-inline-start:0;width:100%}} /* ---------- 两次确认时间线 ---------- */ .hw-tl{display:grid;grid-template-columns:repeat(6,1fr);position:relative;list-style:none;margin:0;padding:0} .hw-tl::before{content:"";position:absolute;left:8.3%;right:8.3%;top:13px;height:1px;background:linear-gradient(90deg,var(--gold2),var(--gold1),var(--gold2))} .hw-tl li{position:relative;text-align:center;padding:0 8px} .hw-tl li i{display:block;width:26px;height:26px;margin:0 auto 14px;border-radius:50%;background:var(--ground);border:1px solid var(--gold2);position:relative;z-index:1;font-style:normal} .hw-tl li.chk i{background:var(--gold1);border-color:var(--gold1);box-shadow:0 0 16px rgba(233,201,126,.5)} .hw-tl li.chk i::after{content:"✔";color:#141414;font-size:13px;line-height:24px;font-weight:700} .hw-tl b{display:block;font-size:14px;font-weight:500} .hw-tl span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px} @media(max-width:860px){.hw-tl{grid-template-columns:repeat(3,1fr);gap:26px 0}.hw-tl::before{display:none}} /* ---------- 付款 / 物流卡片 ---------- */ .hw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px} .hw-card{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:16px 14px;display:flex;flex-direction:column;gap:8px;transition:border-color .25s} .hw-card:hover{border-color:var(--gold2)} .hw-card svg{width:26px;height:26px;color:var(--gold1)} .hw-card b{font-size:13.5px;font-weight:500} .hw-card span{font-size:12.5px;color:var(--muted);line-height:1.5} @media(max-width:860px){.hw-cards{grid-template-columns:1fr}} /* ---------- 联系方式：找到我们 ---------- */ .findus{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:28px;align-items:stretch} .fu-info{display:flex;flex-direction:column;gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:24px 26px} .fu-info h4{font-family:var(--ui);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold1);margin-bottom:6px} html[lang="ar"] .fu-info h4,html[lang^="zh"] .fu-info h4,html[lang="ja"] .fu-info h4{letter-spacing:.06em;text-transform:none} .fu-info p{font-size:14.5px;color:#C9C7C0;line-height:1.7} .fu-info a{color:var(--ink)} .fu-info a:hover{color:var(--gold1)} .fu-hint{font-size:13px} .fu-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .fu-fb{display:inline-flex;align-items:center;gap:8px} .fu-map{position:relative;min-height:320px;background:#0E0E11;border:1px solid var(--line);border-radius:3px;overflow:hidden; background-image:linear-gradient(rgba(233,201,126,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(233,201,126,.06) 1px,transparent 1px);background-size:40px 40px} .fu-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.8) contrast(1.05)} .fu-mapbtn{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:var(--ui)} .fu-mapbtn span{font-size:14px;letter-spacing:.1em;border:1px solid var(--gold2);color:var(--gold1);padding:10px 18px;border-radius:2px} .fu-mapbtn small{font-size:12px;color:var(--muted)} .fu-mapbtn:hover span{background:#17140E} .fcontact{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.6;max-width:26em} @media(max-width:860px){.findus{grid-template-columns:1fr}.fu-map{min-height:260px}} /* ---------- 工艺实验台 ---------- */ .cl-hero{display:grid;grid-template-columns:1fr minmax(300px,44%);gap:52px;align-items:center;padding:76px 0 30px} .cl-herocopy{position:relative} .cl-hero h1{font-size:clamp(36px,4.6vw,58px);margin-top:14px} .cl-hero .lede{font-family:var(--disp);font-size:clamp(17px,1.6vw,21px);color:var(--gold1);margin-top:16px;max-width:26em} .cl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .cl-chip{background:var(--panel);border:1px solid var(--line);color:#C4C4C9;border-radius:2px;padding:8px 13px;font-family:var(--ui);font-size:13px;cursor:pointer;display:inline-flex;gap:9px;align-items:center;transition:.25s} .cl-chip i{font-style:normal;font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.1em;color:var(--gold1)} .cl-chip:hover{border-color:var(--gold2);color:var(--ink)} .cl-sound{margin-top:22px;display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:2px;padding:8px 13px;font-family:var(--ui);font-size:12.5px;letter-spacing:.08em;cursor:pointer} .cl-sound.on{border-color:var(--gold1);color:var(--gold1)} .cl-sound:not(.on) .w1,.cl-sound:not(.on) .w2{opacity:.25} .cl-herostage{position:relative;aspect-ratio:1;max-height:520px;border:1px solid var(--line);border-radius:4px;overflow:hidden; background:radial-gradient(62% 58% at 50% 46%,#1A150D 0%,#0E0D0B 55%,#09090B 100%);box-shadow:0 40px 90px -50px rgba(0,0,0,.9)} .cl-herostage canvas,.cl-stage canvas.cl-3d{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab;touch-action:pan-y} .cl-flat{display:none} .flat .cl-flat{display:block;position:absolute;left:50%;top:50%;width:52%;height:auto;transform:translate(-50%,-50%)} .flat canvas.cl-3d,.cl-herostage.flat canvas{display:none} .cl-drag{position:absolute;right:16px;bottom:14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);pointer-events:none} /* 实验台 */ .cl-lab{display:grid;grid-template-columns:minmax(320px,52%) 1fr;gap:52px;align-items:start;padding:76px 0;border-top:1px solid var(--line)} .cl-lab:nth-of-type(even) .cl-stage{order:2} .cl-stage{position:relative;aspect-ratio:4/3;background:radial-gradient(70% 70% at 50% 50%,#17140E,#0B0B0D 72%);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(0,0,0,.9);position:sticky;top:92px} .cl-stage svg{position:absolute;inset:0;width:100%;height:100%} .cl-stage canvas.cl-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;z-index:2} .cl-stage.shake{animation:clshake .32s} @keyframes clshake{0%,100%{transform:none}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,1px)}80%{transform:translate(2px,-1px)}} .cl-stagehint{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);pointer-events:none;z-index:3} html[lang="ar"] .cl-stagehint,html[lang^="zh"] .cl-stagehint,html[lang="ja"] .cl-stagehint,html[lang="ru"] .cl-stagehint{letter-spacing:.04em;text-transform:none} .cl-cooling{opacity:0;transition:opacity .4s} .cl-lab.pouring .cl-cooling{opacity:1} .cl-lab.printed .cl-stagehint:not(.cl-cooling){opacity:0} .cl-num{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.26em;color:var(--gold1)} .cl-info h2{font-size:clamp(28px,3vw,40px);margin:10px 0 6px} .cl-tag{font-family:var(--disp);font-size:18px;color:var(--gold1);margin-bottom:12px} .cl-ctrl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px} .cl-ctrl .btn[disabled]{opacity:.35;cursor:not-allowed;filter:none} .cl-hint{font-size:12.5px;color:var(--muted)} .sp-paint,.sp-relief{pointer-events:none} /* 填过漆的凹槽仍可再点 */ .cl-palette{display:flex;gap:8px;flex-wrap:wrap} .cl-swatch{width:26px;height:26px;border-radius:50%;border:2px solid #0B0B0D;cursor:pointer;box-shadow:0 0 0 1px #3a3a42} .cl-swatch.on{box-shadow:0 0 0 2px var(--gold1)} .cl-rangewrap{display:flex;flex-direction:column;gap:6px;min-width:200px;flex:1} .cl-rangewrap span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} html[lang="ar"] .cl-rangewrap span,html[lang^="zh"] .cl-rangewrap span,html[lang="ja"] .cl-rangewrap span{letter-spacing:.04em;text-transform:none} .cl-range{width:100%;accent-color:var(--gold1)} .cl-range[disabled]{opacity:.35} .cl-finishes{display:flex;flex-wrap:wrap;gap:8px;width:100%} .cl-finish{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid var(--line);border-radius:2px;background:var(--panel);color:#C4C4C9;cursor:pointer;font-family:var(--ui);font-size:13px;transition:.25s} .cl-finish i{width:16px;height:16px;border-radius:50%;display:inline-block;box-shadow:inset -3px -3px 6px rgba(0,0,0,.45),inset 2px 2px 4px rgba(255,255,255,.35)} .cl-finish.on{border-color:var(--gold1);color:var(--ink)} .cl-tt{display:flex;align-items:center;gap:12px;width:100%} .cl-toggle{background:none;border:1px solid var(--line);color:var(--muted);border-radius:2px;padding:7px 12px;font-family:var(--ui);font-size:12.5px;cursor:pointer} .cl-toggle.on{border-color:var(--gold1);color:var(--gold1)} .cl-parts{display:none;gap:6px} .cl-lab.twotone .cl-parts{display:inline-flex} .cl-part{background:var(--panel);border:1px solid var(--line);color:#C4C4C9;border-radius:2px;padding:6px 11px;font-family:var(--ui);font-size:12px;cursor:pointer} .cl-part.on{border-color:var(--gold1);color:var(--gold1)} .cl-uploadrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%} .cl-upload{position:relative;overflow:hidden;cursor:pointer} .cl-upload input{position:absolute;inset:0;opacity:0;cursor:pointer} .cl-lab:not(.haslogo) [data-act=resetlogo]{display:none} .cl-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:24px} .cl-facts div{border-top:1px solid var(--line);padding-top:8px} .cl-facts b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:3px} html[lang="ar"] .cl-facts b,html[lang^="zh"] .cl-facts b,html[lang="ja"] .cl-facts b{letter-spacing:.04em;text-transform:none} .cl-facts span{font-size:14px;color:#C9C7C0} .cl-examples{margin-top:24px} .cl-exgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px} .cl-exgrid a{display:block;aspect-ratio:1;background:#F4F3F0;border:1px solid var(--line);border-radius:2px;overflow:hidden} .cl-exgrid a img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .cl-exgrid a:hover img{transform:scale(1.05)} .cl-exphoto{grid-column:1/-1;display:block;aspect-ratio:16/7;border:1px solid var(--line);border-radius:2px;overflow:hidden} .cl-exphoto img{width:100%;height:100%;object-fit:cover} .cl-enq{display:inline-block;margin-top:20px;color:var(--gold1);font-size:13.5px;letter-spacing:.08em} .cl-enq:hover{text-decoration:underline} .cl-table{overflow-x:auto;border:1px solid var(--line);border-radius:3px} .cl-cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:13.5px} .cl-cmp th{background:var(--panel);color:var(--gold1);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)} html[lang="ar"] .cl-cmp th,html[lang^="zh"] .cl-cmp th,html[lang="ja"] .cl-cmp th{letter-spacing:.04em;text-transform:none} .cl-cmp td{padding:12px 14px;border-bottom:1px solid #1A1A1E;color:#C9C7C0;vertical-align:top} .cl-cmp td:first-child{color:var(--ink);font-weight:500} .cl-cmp tr:last-child td{border-bottom:0} @media(max-width:860px){ .cl-hero{grid-template-columns:1fr;gap:26px;padding-top:56px} .cl-herostage{max-height:340px} .cl-lab{grid-template-columns:1fr;gap:22px;padding:52px 0} .cl-lab:nth-of-type(even) .cl-stage{order:0} .cl-stage{position:relative;top:0;aspect-ratio:1} .cl-facts{grid-template-columns:1fr} .cl-exgrid{grid-template-columns:repeat(4,1fr)} } /* 调试：?solo=key 只显示一台 */ #craftlab.solo .cl-hero,#craftlab.solo .cl-lab:not(.solo-on),#craftlab.solo .sec{display:none} #craftlab.solo .cl-lab.solo-on{border-top:0;padding-top:30px} /* ---------- DIY 工作台（工艺页底部） ---------- */ .diy{scroll-margin-top:90px;border-top:1px solid var(--line);padding-top:72px} .diy-grid{display:grid;grid-template-columns:minmax(360px,56%) 1fr;gap:40px;align-items:start} .diy-stage{position:relative;aspect-ratio:1;max-height:640px;border:1px solid var(--line);border-radius:4px;overflow:hidden; background:radial-gradient(62% 58% at 50% 46%,#1A150D 0%,#0E0D0B 55%,#09090B 100%);box-shadow:0 40px 90px -50px rgba(0,0,0,.9);position:sticky;top:92px} .diy-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab;touch-action:pan-y} .diy-stage.flat canvas{display:none} .diy-line{position:absolute;top:0;bottom:0;left:0;width:0;border-left:1px dashed rgba(233,201,126,.65);pointer-events:none;opacity:0;transition:opacity .3s} .diy.comparing .diy-line{opacity:1} .diy-labels{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#D8D6CF;pointer-events:none;opacity:0;transition:opacity .3s} .diy.comparing .diy-labels{opacity:1} html[lang="ar"] .diy-labels,html[lang^="zh"] .diy-labels,html[lang="ja"] .diy-labels,html[lang="ru"] .diy-labels{letter-spacing:.04em;text-transform:none} .diy-splitwrap{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px} .diy-splitwrap span{align-self:flex-start;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold1);background:rgba(11,11,13,.62);padding:5px 10px;border-radius:2px;border:1px solid rgba(233,201,126,.25)} html[lang="ar"] .diy-splitwrap span,html[lang^="zh"] .diy-splitwrap span,html[lang="ja"] .diy-splitwrap span,html[lang="ru"] .diy-splitwrap span{letter-spacing:.04em;text-transform:none} .diy-split{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;outline:none;cursor:ew-resize;background:linear-gradient(90deg,var(--gold1) 0,var(--gold1) var(--p,22%),#3a3a42 var(--p,22%))} .diy-split::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold1);border:2px solid #0B0B0D;box-shadow:0 0 0 1px var(--gold2),0 4px 14px rgba(0,0,0,.6);cursor:ew-resize} .diy-split::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold1);border:2px solid #0B0B0D;box-shadow:0 0 0 1px var(--gold2),0 4px 14px rgba(0,0,0,.6);cursor:ew-resize} .diy-panel{display:flex;flex-direction:column;gap:22px} .diy-step{border-top:1px solid var(--line);padding-top:16px} .diy-step h3{font-family:var(--ui);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold1);margin-bottom:12px;display:flex;gap:10px;align-items:center} html[lang="ar"] .diy-step h3,html[lang^="zh"] .diy-step h3,html[lang="ja"] .diy-step h3{letter-spacing:.06em;text-transform:none} .diy-step h3 i{font-style:normal;font-family:var(--disp);font-weight:600;font-size:13px;width:22px;height:22px;border:1px solid var(--gold2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center} .diy-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .diy-art,.diy-tech{background:var(--panel);border:1px solid var(--line);color:#C4C4C9;border-radius:2px;padding:8px 13px;font-family:var(--ui);font-size:13px;cursor:pointer;transition:.25s} .diy-art:hover,.diy-tech:hover:not([disabled]){border-color:var(--gold2);color:var(--ink)} .diy-art.on,.diy-tech.on{border-color:var(--gold1);color:var(--gold1);background:#17140E} .diy-tech[disabled]{opacity:.38;cursor:not-allowed} .diy-tech small{display:block;font-size:10px;letter-spacing:.1em;color:var(--muted);margin-top:2px} .diy-upload{position:relative;overflow:hidden;cursor:pointer} .diy-upload input{position:absolute;inset:0;opacity:0;cursor:pointer} .diy-check{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer} .diy-check input{accent-color:var(--gold1)} .diy-hint{font-size:12.5px;color:var(--muted);margin-top:8px;min-height:1.4em} .diy-note{font-size:12px;color:var(--muted)} .diy .cl-finishes{width:auto} .diy-parts{display:none;gap:6px} .diy.twotone .diy-parts{display:inline-flex} .diy-result{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .diy-result .btn{white-space:nowrap} .diy-soon{font-size:12px;color:var(--muted)} .diy-tech-dome{display:none} .diy[data-tech="print"] .diy-tech-dome{display:inline-flex} @media(max-width:860px){.diy-grid{grid-template-columns:1fr;gap:20px}.diy-stage{position:relative;top:0;max-height:none}.diy{padding-top:52px}} /* ---------- DIY 第二档：珐琅色块换色 ---------- */ .diy-colorsrow{display:none;align-items:center;gap:10px;margin-top:12px;position:relative;flex-wrap:wrap} .diy[data-tech="soft"] .diy-colorsrow,.diy[data-tech="hard"] .diy-colorsrow{display:flex} .diy-colorsrow > span{font-size:12px;color:var(--muted)} .diy-colors{display:flex;gap:8px;position:relative} .diy-chip{width:28px;height:28px;border-radius:50%;border:2px solid #0B0B0D;box-shadow:0 0 0 1px #3a3a42;cursor:pointer} .diy-chip:hover{box-shadow:0 0 0 2px var(--gold1)} .diy-pal{position:absolute;left:0;top:36px;z-index:6;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:320px;box-shadow:0 18px 40px -16px rgba(0,0,0,.7)} .diy-pal button{width:24px;height:24px;border-radius:50%;border:2px solid #0B0B0D;box-shadow:0 0 0 1px #3a3a42;cursor:pointer} .diy-pal button.diy-pal-reset{width:auto;height:auto;border-radius:2px;background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--ui);font-size:11.5px;padding:4px 9px;box-shadow:none} /* ---------- DIY 第三档：导出 / 带图询价 / 入口 ---------- */ .diy-result .btn.ghost{white-space:nowrap} .diy-link{display:inline-flex;align-items:center;gap:9px;color:var(--gold1);font-family:var(--ui);font-size:13px;letter-spacing:.06em;padding:12px 2px;border-bottom:1px solid transparent;transition:border-color .25s} .diy-link:hover{border-bottom-color:var(--gold2)} .diy-link i{width:6px;height:6px;border-radius:50%;background:var(--gold1);box-shadow:0 0 10px var(--gold1)} .cat-ctas,.qb-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .fdiy{display:flex;gap:14px;align-items:center;border:1px solid var(--gold2);background:#17140E;border-radius:3px;padding:10px 12px;margin-bottom:14px} .fdiy[hidden],.fdiy-try[hidden]{display:none} .fdiy img{width:72px;height:72px;border-radius:3px;object-fit:cover;background:#0b0b0d;flex:none} .fdiy b{display:block;font-family:var(--ui);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold1);margin-bottom:4px} .fdiy span{font-size:13px;color:#C9C7C0} .fdiy button{margin-left:auto;background:none;border:1px solid var(--line);color:var(--muted);border-radius:2px;padding:6px 10px;font-size:12px;cursor:pointer;font-family:var(--ui);flex:none} .fdiy button:hover{border-color:var(--gold2);color:var(--ink)} .fdiy-try{font-size:12.5px;color:var(--muted);margin:-4px 0 14px} .fdiy-try a{color:var(--gold1)} /* ---------- 精选商城 V3 ---------- */ .sh-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:30px 0 44px} .sh-hero h1{font-size:clamp(34px,4.4vw,52px);margin:10px 0 16px} .sh-hero .copy{max-width:36em;color:#BDBBB4} .sh-prom{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:12.5px;color:var(--muted)} .sh-prom span::before{content:"\2713 ";color:var(--gold1)} .sh-hero-art{position:relative;display:block;aspect-ratio:4/3;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#08080a} .sh-hero-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease} .sh-hero-art:hover img{transform:scale(1.03)} .sh-hero-art::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.5);pointer-events:none} .sh-item{display:grid;grid-template-columns:1.15fr .85fr;background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:18px;transition:border-color .3s} .sh-item:hover{border-color:#3a3a42} .sh-item.flip{grid-template-columns:.85fr 1.15fr} .sh-item.flip .sh-img{order:2} .sh-img{position:relative;display:block;min-height:380px;background:#08080a;overflow:hidden} .sh-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform .8s ease} .sh-img img.b{opacity:0} .sh-item:hover .sh-img img.b{opacity:1} .sh-item:hover .sh-img img.a{transform:scale(1.02)} .sh-pill{position:absolute;top:16px;inset-inline-start:16px;z-index:2;font-size:11px;letter-spacing:.1em;padding:5px 10px;border-radius:2px;background:linear-gradient(160deg,var(--gold1),var(--gold2));color:#141414;font-weight:500} .sh-txt{padding:36px 38px;display:flex;flex-direction:column;gap:12px} .sh-txt h2{font-size:clamp(22px,2.4vw,28px);margin:0;letter-spacing:.02em} .sh-txt .copy{color:#BDBBB4;font-size:14.5px} .sh-meta{font-size:12.5px;color:var(--muted);letter-spacing:.04em} .sh-strip{display:flex;gap:6px;margin:4px 0} .sh-strip img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid #3a3a42} .sh-strip span{width:44px;height:44px;border-radius:50%;border:1px dashed var(--gold2);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--gold1)} .sh-pr{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;flex-wrap:wrap} .price{font-family:'Cinzel',Georgia,serif;font-weight:600;color:var(--gold1)} .sh-pr .price{font-size:30px} .sh-pr small{color:var(--muted);font-size:13px} .sh-pr .btn{margin-inline-start:auto} .sh-band{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:18px;background:var(--panel)} .sh-band img{width:100%;height:100%;object-fit:cover;min-height:260px;display:block} .sh-band-txt{padding:34px 36px;display:flex;flex-direction:column;gap:10px;justify-content:center} .sh-band-txt h3{font-size:24px;margin:0} .sh-band-txt p{color:#BDBBB4;font-size:14px} .sh-band-txt .btn{align-self:flex-start;margin-top:6px} .sh-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px} .sh-trust div{border-top:1px solid var(--line);padding-top:16px} .sh-trust i{width:26px;height:26px;border:1px solid var(--gold2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--disp);font-size:12px;color:var(--gold1);margin-bottom:10px} .sh-trust b{display:block;font-weight:500;font-size:14.5px;margin-bottom:4px} .sh-trust span{font-size:12.5px;color:var(--muted)} .sh-pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:22px 0 44px} .sh-pay .lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-inline-end:6px} .sh-pay span:not(.lab){font-size:11.5px;letter-spacing:.1em;border:1px solid #3A3A40;padding:5px 10px;border-radius:2px;color:#C4C4C9} .sh-diy{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid var(--line);border-radius:3px;padding:26px 30px;margin-bottom:48px;background:linear-gradient(90deg,#141416,#0f0e0c);flex-wrap:wrap} .sh-diy h4{margin:0 0 4px;font-size:18px;font-weight:500} .sh-diy p{margin:0;font-size:13px;color:var(--muted)} /* 商品页 */ .sh-prod{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:44px;padding-top:22px;align-items:start} .sh-gal{display:grid;grid-template-columns:68px 1fr;gap:12px;position:sticky;top:96px} .sh-thumbs{display:flex;flex-direction:column;gap:8px;max-height:640px;overflow:auto;scrollbar-width:none} .sh-thumbs::-webkit-scrollbar{display:none} .sh-thumbs .pt{flex:0 0 68px;width:68px;height:68px;opacity:.75} .sh-main{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#08080a} .sh-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease;cursor:zoom-in} .sh-main img[hidden],.sh-main video[hidden]{display:none} .sh-main video{width:100%;height:100%;object-fit:contain;background:#000} .sh-cap{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);pointer-events:none} .sh-buy h1{font-size:clamp(26px,3vw,34px);margin:0 0 8px} .sh-short{color:#BDBBB4;font-size:14.5px;margin-bottom:14px} .sh-price{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px} .sh-price .price{font-size:34px} .sh-price small{color:var(--muted)} .sh-price .sh-pill{position:static} .sh-ship{font-size:13px;color:var(--muted);margin-bottom:18px} .sh-ship.gold{color:var(--gold1)} .sh-box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:22px;display:flex;flex-direction:column;gap:16px} .sh-box .lab{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:block} .sr-chips{display:flex;gap:8px;flex-wrap:wrap} .sr-chip{font-size:12.5px;border:1px solid var(--line);padding:6px 12px;border-radius:2px;color:#C4C4C9;background:var(--panel2);cursor:pointer;font-family:var(--ui)} .sr-chip:hover{border-color:var(--gold2)} .sr-chip.on{border-color:var(--gold1);color:var(--gold1);background:#17140E} .sh-box .skus{display:flex;gap:8px;flex-wrap:wrap} .sh-box .sku{width:78px;padding:8px 6px;gap:5px} .sh-box .sku.wide{width:118px} .sh-box .sku[hidden]{display:none} .sh-box .sku img{width:54px;height:54px;border-radius:50%} .sh-box .sku span{min-height:0;font-size:11px} .sh-qty{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .sh-qty .lab,.sh-addon-qty .lab{margin:0} .sh-box .q{display:flex;gap:6px} .sh-box .q input{width:64px;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:2px;color:var(--ink);font-family:var(--ui);font-size:15px} .sh-box .q input::-webkit-outer-spin-button,.sh-box .q input::-webkit-inner-spin-button{-webkit-appearance:none} .sh-box .stock{margin-inline-start:auto;font-size:12.5px;color:#9CC7A6;display:flex;gap:7px;align-items:center} .sh-box .stock i{width:7px;height:7px;border-radius:50%;background:#4FC46A} .sh-prog{height:4px;background:#2a2a30;border-radius:2px;overflow:hidden;position:relative;margin-top:-4px} .sh-prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#A87B32,#E9C97E);transition:width .35s ease} .sh-prog.done i{background:#4FC46A} .sh-progt{font-size:12px;color:var(--muted);margin-top:-10px} .sh-addon{border:1px solid var(--line);border-radius:2px;padding:12px 14px;background:var(--panel2);display:flex;flex-direction:column;gap:12px;scroll-margin-top:110px} .sh-addon-row{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:13.5px;color:#C9C7C0} .sh-addon-row input{width:16px;height:16px;accent-color:#A87B32;flex:none} .sh-addon-row img{width:52px;height:52px;object-fit:cover;border-radius:2px;border:1px solid var(--line);flex:none} .sh-addon-row span{display:flex;flex-direction:column;gap:2px} .sh-addon-row b{font-weight:500;color:var(--ink)} .sh-addon-row small{font-size:11.5px;color:var(--muted)} .sh-addon-row a{margin-inline-start:auto;font-size:12px;color:var(--gold1);white-space:nowrap} .sh-addon-qty{display:flex;align-items:center;gap:12px;border-top:1px dashed var(--line);padding-top:12px;flex-wrap:wrap} .sh-addon-qty[hidden]{display:none} .sh-addon-qty .sm{font-size:12px} .sh-sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .sh-sum b#seltext{font-weight:400;color:var(--gold1);letter-spacing:.04em;text-transform:none} .sh-sum .price{font-size:26px;letter-spacing:0;white-space:nowrap} .sh-cta{display:grid;grid-template-columns:1.45fr 1fr;gap:10px} .sh-cta .btn{text-align:center} .sh-step2{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:12px} .sh-step2[hidden],.sh-box .fsuccess[hidden]{display:none} .sh-prod.ordered .sh-cta{display:none} .sh-promises{display:flex;justify-content:space-between;gap:8px;margin-top:18px;font-size:11.5px;color:var(--muted);flex-wrap:wrap} .sh-promises span::before{content:"\2713 ";color:var(--gold1)} .ix-group{margin-top:22px} .ix-group h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold1);font-weight:500;margin:0 0 12px} .ix-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px} .ix-item{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--ui);font-size:11.5px;color:#B9B9BE} .ix-item img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:1px solid #2c2c33;transition:border-color .2s,transform .3s} .ix-item:hover img{border-color:var(--gold2);transform:translateY(-2px)} .ix-item.on img{border-color:var(--gold1);box-shadow:0 0 0 1px var(--gold1)} .sh-detail{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px} .sh-detail img,.sh-detail video{width:100%;display:block;border-radius:3px;border:1px solid var(--line);background:#000} .sh-detail video{grid-column:1/-1} .sh-other{display:grid;grid-template-columns:.4fr .6fr;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel);color:inherit;text-decoration:none;margin-top:14px} .sh-other img{width:100%;height:100%;object-fit:cover;min-height:200px;display:block} .sh-other div{padding:26px 30px;display:flex;flex-direction:column;gap:8px} .sh-other h3{margin:0;font-size:20px} .sh-other p{color:var(--muted);font-size:13.5px;margin:0} .sh-other .price{font-size:22px;margin-top:auto} .sh-lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:24px} .sh-lb[hidden]{display:none} .sh-lb-in{position:relative;max-width:1000px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:16px} .sh-lb-in img{width:100%;border-radius:2px;display:block} .sh-lb-in p{grid-column:1/-1;margin:0;font-size:13px;color:#C9C7C0;text-align:center} .sh-lb-in button{position:absolute;top:-14px;inset-inline-end:-14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#0B0B0D;color:var(--ink);cursor:pointer;font-size:18px} .mbuybar small{display:block;font-size:11px;color:var(--muted);max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mbuybar-space{display:none} @media(max-width:960px){.mbuybar-space{display:block;height:72px}} @media(max-width:960px){.sh-hero,.sh-item,.sh-item.flip,.sh-band,.sh-prod,.sh-other{grid-template-columns:1fr}.sh-item.flip .sh-img{order:0}.sh-img{min-height:0;aspect-ratio:4/3}.sh-trust{grid-template-columns:1fr 1fr}.sh-gal{position:static;grid-template-columns:1fr}.sh-thumbs{flex-direction:row;max-height:none;order:2;overflow-x:auto}.ix-grid{grid-template-columns:repeat(4,1fr)}.sh-detail{grid-template-columns:1fr}.sh-lb-in{grid-template-columns:1fr}.sh-txt{padding:24px 22px}} /* ---------- 渐显 ---------- */ .js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease} .js .rv.in{opacity:1;transform:none} /* ---------- 动效降级 ---------- */ @media(prefers-reduced-motion:reduce){ .hero-cine .bgv{display:none} .coin,.coin .sheen{animation:none} .hload{animation:none;opacity:1;transform:none} .js .rv{transition:none;opacity:1;transform:none} html{scroll-behavior:auto} }