/* Theme Name: 军屹微电子官网 Theme URI: https://junyijs.com Author: 军屹微电子 Author URI: https://junyijs.com Description: 江苏军屹微电子有限公司官网主题 v2 — 边缘计算领域专家。深色科技风，全站双语（Polylang），产品中心（CPT+系列/应用分类）、行业方案、服务支持表单（询价/样品/定制 AJAX）、混合搜索（产品/新闻/下载/页面）、下载中心与质检查询遗留页深色适配、登录页品牌化。 Version: 2.1.8 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: junyi-micro */ /* ============================================================ 军屹微电子 · 官网深化版 设计系统 — 嵌入硬件 / 边缘计算 专属视觉语言 ============================================================ */ :root{ /* 色彩令牌 */ --bg: #070B14; /* 深蓝炭黑 — 主背景 */ --bg-2: #0C1322; /* 次级表面 */ --bg-3: #111A2E; /* 卡片 */ --bg-4: #16203A; /* 卡片悬停 */ --line: #1E2C4A; /* 描边 */ --line-2: #2A3C61; /* 亮描边 */ --text: #EAEFF7; /* 主文本 */ --text-2: #9FACc6; /* 次文本 */ --text-3: #61708F; /* 弱文本 */ --cyan: #22D3EE; /* 电路青 — 主强调 */ --cyan-soft: #67E8F9; --cyan-dim: #0E7490; --amber: #F5B944; /* 琥珀 — 稀有点缀 */ --green: #4ADE80; /* 状态绿 */ /* 字体令牌 */ --sans: "Noto Sans SC", "Source Han Sans SC", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --disp: "Space Grotesk", "Noto Sans SC", sans-serif; /* 间距 / 尺寸 */ --maxw: 1200px; --pad: clamp(20px, 5vw, 48px); --sec: clamp(64px, 9vw, 120px); --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --ease: cubic-bezier(.2,.7,.2,1); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:rgba(34,211,238,.28);color:#fff;} a{color:inherit;text-decoration:none;} img,svg{display:block;max-width:100%;} ul{list-style:none;} /* 工程网格底纹 — 全局氛围 */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: linear-gradient(rgba(42,60,97,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(42,60,97,.06) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 75%); } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1;} /* ============================================================ 顶栏 ============================================================ */ .topbar{ background:linear-gradient(90deg,#0A1120,#0C1526); border-bottom:1px solid var(--line); font-size:13px;color:var(--text-3); position:relative;z-index:60; } .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:40px;} .topbar__left{display:flex;align-items:center;gap:10px;} .topbar__dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2.4s infinite;} @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}} .topbar__tel{font-family:var(--mono);color:var(--text-2);letter-spacing:.5px;white-space:nowrap;} .topbar__right{display:flex;align-items:center;gap:16px;flex:none;} .topbar__auth{white-space:nowrap;flex:none;} .topbar__tel b{color:var(--cyan);font-weight:500;} .topbar__social{display:flex;gap:14px;align-items:center;} .topbar__social a{color:var(--text-3);transition:color .2s;display:flex;align-items:center;} .topbar__social a:hover{color:var(--cyan);} .topbar__social a svg{width:15px;height:15px;fill:currentColor;display:block;} @media(max-width:720px){.topbar__social{display:none;}.topbar__welcome{display:none;}} /* ============================================================ 导航 ============================================================ */ .nav{ position:sticky;top:0;z-index:55; background:rgba(7,11,20,.82); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s; } .nav.is-stuck{border-color:var(--line);background:rgba(7,11,20,.95);} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;} .brand{display:flex;align-items:center;gap:12px;flex:none;} .brand__logo{height:42px;width:auto;display:block;} .footer__brand .brand__logo{height:48px;} .brand__mark{ width:42px;height:42px;border-radius:10px;flex:none; background:radial-gradient(120% 120% at 30% 20%,#12324A,#0A1626); border:1px solid var(--line-2); display:grid;place-items:center;position:relative;overflow:hidden; } .brand__mark svg{width:32px;height:32px;} .brand__txt{display:flex;flex-direction:column;line-height:1.15;} .brand__cn{font-weight:900;font-size:18px;letter-spacing:1px;} .brand__en{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:2px;} .menu{display:flex;align-items:center;gap:6px;} .menu a{ position:relative;padding:8px 14px;font-size:15px;font-weight:500;color:var(--text-2); border-radius:8px;transition:color .2s;white-space:nowrap; } .nav__cta{white-space:nowrap;flex:none;} .menu a::after{ content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px; background:var(--cyan);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease); } .menu a:hover,.menu a.active,.menu a[aria-current="page"]{color:var(--text);} .menu a:hover::after,.menu a.active::after,.menu a[aria-current="page"]::after{transform:scaleX(1);} .nav__actions{display:flex;align-items:center;gap:14px;} .lang{font-family:var(--mono);font-size:13px;color:var(--text-3);border:1px solid var(--line);padding:6px 10px;border-radius:6px;cursor:pointer;} .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--sans);font-weight:700;font-size:14px; padding:11px 22px;border-radius:9px;cursor:pointer;border:1px solid transparent; transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s; } .btn--primary{background:var(--cyan);color:#04121A;box-shadow:0 6px 22px -8px rgba(34,211,238,.7);} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(34,211,238,.85);} .btn--ghost{background:transparent;color:var(--text);border-color:var(--line-2);} .btn--ghost:hover{border-color:var(--cyan);color:var(--cyan);} .btn--amber{background:var(--amber);color:#1A1204;} .btn--amber:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(245,185,68,.6);} /* 移动端菜单 */ .menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;} .menu-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s;} @media(max-width:1080px){ .menu-toggle{display:flex;} .menu{ position:fixed;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--bg-2);border-bottom:1px solid var(--line); padding:10px var(--pad) 18px;transform:translateY(-130%);transition:transform .4s var(--ease),visibility .4s;visibility:hidden; max-height:calc(100vh - 112px);overflow:auto; } .menu.open{transform:translateY(0);visibility:visible;} .menu a{padding:13px 10px;font-size:16px;border-bottom:1px solid var(--line);} .menu a::after{display:none;} .lang{display:none;} } /* ============================================================ 通用区块标题 ============================================================ */ .section{padding:var(--sec) 0;position:relative;} .sec-head{margin-bottom:52px;max-width:720px;} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center;} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:12.5px;font-weight:500; letter-spacing:3px;text-transform:uppercase;color:var(--cyan); margin-bottom:18px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--cyan);display:inline-block;} .eyebrow .idx{color:var(--text-3);} .sec-title{font-size:clamp(28px,4.4vw,44px);font-weight:900;line-height:1.2;letter-spacing:-.5px;} .sec-sub{color:var(--text-2);font-size:16.5px;margin-top:14px;} @media(max-width:640px){.sec-head{margin-bottom:38px;}} /* 滚动浮现 */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease);} .reveal.in{opacity:1;transform:none;} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* ============================================================ 英雄区 ============================================================ */ .hero{ position:relative;padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,88px); overflow:hidden; } .hero__glow{ position:absolute;top:-20%;right:-10%;width:60%;height:120%;z-index:0;pointer-events:none; background:radial-gradient(circle at center,rgba(34,211,238,.16),transparent 62%); filter:blur(10px); } .hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;} .hero__badge{ display:inline-flex;align-items:center;gap:9px; font-family:var(--mono);font-size:12px;letter-spacing:1.5px;color:var(--text-2); background:var(--bg-2);border:1px solid var(--line);border-radius:100px; padding:7px 15px;margin-bottom:26px; } .hero__badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 2s infinite;} .hero h1{ font-size:clamp(40px,7.4vw,78px);font-weight:900;line-height:1.05;letter-spacing:-1.5px; } .hero h1 .hl{ background:linear-gradient(120deg,var(--cyan) 0%,#a5f3fc 45%,var(--cyan) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero__lead{font-size:clamp(16px,1.8vw,20px);color:var(--text-2);margin:24px 0 8px;max-width:520px;} .hero__lead b{color:var(--text);font-weight:700;} .hero__specs{ display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 34px; font-family:var(--mono);font-size:13px;color:var(--text-3); } .hero__specs span{display:flex;align-items:center;gap:8px;} .hero__specs span::before{content:"";width:8px;height:8px;border:1px solid var(--cyan-dim);border-radius:2px;background:rgba(34,211,238,.12);} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;} /* 电路芯片视觉 — 标志性元素 */ .hero__visual{position:relative;z-index:1;display:grid;place-items:center;} .chip-stage{position:relative;width:100%;max-width:480px;aspect-ratio:1;} .chip-stage svg{width:100%;height:100%;filter:drop-shadow(0 0 40px rgba(34,211,238,.18));} /* 脉冲沿走线 */ .trace{stroke:var(--cyan-dim);stroke-width:1.4;fill:none;opacity:.55;} .trace.hot{stroke:var(--cyan);opacity:.85;filter:drop-shadow(0 0 6px rgba(34,211,238,.6));} .pin{stroke:var(--line-2);stroke-width:2;} .node{fill:var(--cyan);opacity:.7;} .pulse{fill:var(--cyan-soft);filter:drop-shadow(0 0 6px var(--cyan));} .chipcore{fill:url(#coreGrad);stroke:var(--cyan);stroke-width:1.5;} .chiptxt{fill:var(--text);font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:2px;} .chiptxt2{fill:var(--text-3);font-family:var(--mono);font-size:8px;letter-spacing:1px;} /* 浮动标签卡 */ .float-card{ position:absolute;background:rgba(12,19,34,.9);border:1px solid var(--line-2); border-radius:12px;padding:12px 16px;backdrop-filter:blur(6px); box-shadow:0 18px 40px -18px rgba(0,0,0,.8); font-family:var(--mono);z-index:3; } .float-card .fc-l{font-size:10px;color:var(--text-3);letter-spacing:1px;} .float-card .fc-v{font-size:18px;font-weight:700;color:var(--cyan);margin-top:2px;} .float-card .fc-v small{font-size:11px;color:var(--text-2);font-weight:400;} .fc-1{top:6%;left:-2%;animation:floaty 6s ease-in-out infinite;} .fc-2{bottom:8%;right:-4%;animation:floaty 7s ease-in-out infinite .8s;} .fc-3{top:44%;right:-8%;animation:floaty 6.5s ease-in-out infinite .4s;} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @media(prefers-reduced-motion:reduce){.float-card{animation:none;}} @media(max-width:1080px){ .hero__grid{grid-template-columns:1fr;gap:20px;} .hero__visual{order:-1;margin-bottom:12px;} .chip-stage{max-width:360px;} .fc-3{display:none;} } /* ============================================================ 数据指标条 ============================================================ */ .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);position:relative;z-index:1;} .stats .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0;} .stat{ padding:38px 22px;text-align:center;position:relative; } .stat:not(:last-child)::after{content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;background:var(--line);} .stat__num{font-family:var(--mono);font-size:clamp(30px,3.6vw,44px);font-weight:700;color:var(--text);line-height:1;letter-spacing:-1px;} .stat__num .u{color:var(--cyan);font-size:.6em;margin-left:2px;} .stat__lab{font-size:13.5px;color:var(--text-3);margin-top:12px;letter-spacing:.5px;} @media(max-width:820px){ .stats .wrap{grid-template-columns:repeat(2,1fr);} .stat:nth-child(2)::after{display:none;} .stat{padding:28px 16px;} .stat:nth-child(odd)::after{content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;background:var(--line);} } @media(max-width:420px){.stats .wrap{grid-template-columns:1fr;}.stat::after{display:none!important;}} /* ============================================================ 产品矩阵 ============================================================ */ .products__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .pcard{ position:relative;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-lg); padding:28px;overflow:hidden;transition:border-color .3s,transform .3s var(--ease),background .3s; } .pcard::before{ content:"";position:absolute;inset:0;border-radius:var(--r-lg); background:radial-gradient(120% 90% at 80% 0%,rgba(34,211,238,.1),transparent 55%); opacity:0;transition:opacity .3s;pointer-events:none; } .pcard:hover{border-color:var(--line-2);transform:translateY(-6px);background:var(--bg-4);} .pcard:hover::before{opacity:1;} .pcard--wide{grid-column:span 1;} .pcard__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;} .pcard__illu{ width:100%;height:150px;border-radius:12px;overflow:hidden; background:linear-gradient(160deg,#0B1526,#0A1120);border:1px solid var(--line); display:grid;place-items:center;position:relative;margin-bottom:22px; } .pcard__illu svg{width:78%;height:78%;} .pcard__no{font-family:var(--mono);font-size:12px;color:var(--text-3);letter-spacing:1px;} .pcard__tag{ font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--cyan); border:1px solid var(--cyan-dim);background:rgba(34,211,238,.08); padding:3px 9px;border-radius:100px; } .pcard__name{font-size:20px;font-weight:900;letter-spacing:.3px;} .pcard__desc{color:var(--text-2);font-size:14.5px;margin:10px 0 18px;line-height:1.7;} .pcard__chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;} .pcard__chips li{ font-family:var(--mono);font-size:11.5px;color:var(--text-2); background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:4px 9px; } .pcard__link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--cyan);transition:gap .2s;} .pcard__link:hover{gap:12px;} @media(max-width:900px){.products__grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:600px){.products__grid{grid-template-columns:1fr;}} /* ============================================================ 核心优势 ============================================================ */ .adv{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .adv__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .acard{ position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg); padding:32px 26px;transition:border-color .3s,transform .3s var(--ease);overflow:hidden; } .acard:hover{border-color:var(--cyan-dim);transform:translateY(-5px);} .acard__ico{ width:54px;height:54px;border-radius:13px;display:grid;place-items:center;margin-bottom:22px; background:linear-gradient(150deg,rgba(34,211,238,.16),rgba(34,211,238,.04)); border:1px solid var(--cyan-dim); } .acard__ico svg{width:26px;height:26px;stroke:var(--cyan);fill:none;stroke-width:1.8;} .acard__no{position:absolute;top:26px;right:26px;font-family:var(--mono);font-size:13px;color:var(--line-2);} .acard__t{font-size:19px;font-weight:900;margin-bottom:10px;} .acard__d{color:var(--text-2);font-size:14.5px;line-height:1.7;} @media(max-width:900px){.adv__grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.adv__grid{grid-template-columns:1fr;}} /* ============================================================ 解决方案 ============================================================ */ .sol__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .scard{ position:relative;border:1px solid var(--line);border-radius:var(--r-md); padding:26px;background:var(--bg-3);overflow:hidden;transition:border-color .3s,background .3s; } .scard::after{ content:"";position:absolute;left:0;top:0;width:100%;height:3px; background:linear-gradient(90deg,var(--cyan),transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease); } .scard:hover{border-color:var(--line-2);background:var(--bg-4);} .scard:hover::after{transform:scaleX(1);} .scard__ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;background:var(--bg-2);border:1px solid var(--line);} .scard__ico svg{width:24px;height:24px;stroke:var(--cyan);fill:none;stroke-width:1.7;} .scard__t{font-size:18px;font-weight:900;margin-bottom:8px;} .scard__d{font-size:14px;color:var(--text-2);line-height:1.7;margin-bottom:16px;} .scard__p{display:flex;flex-wrap:wrap;gap:6px;} .scard__p li{font-family:var(--mono);font-size:11px;color:var(--text-3);border:1px solid var(--line);border-radius:5px;padding:3px 8px;} .sol__cta{ margin-top:34px;padding:26px 30px;border:1px dashed var(--line-2);border-radius:var(--r-md); display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; background:linear-gradient(90deg,rgba(34,211,238,.05),transparent); } .sol__cta p{font-size:16px;color:var(--text-2);} .sol__cta p b{color:var(--text);font-family:var(--mono);} @media(max-width:860px){.sol__grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:540px){.sol__grid{grid-template-columns:1fr;}} /* ============================================================ 服务流程（真实序列 — 编号合理） ============================================================ */ .process{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .proc__track{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-top:10px;} .proc__track::before{ content:"";position:absolute;top:26px;left:6%;right:6%;height:2px; background:linear-gradient(90deg,transparent,var(--cyan-dim) 12%,var(--cyan-dim) 88%,transparent); } .step{position:relative;text-align:center;padding:0 8px;} .step__dot{ width:54px;height:54px;border-radius:50%;margin:0 auto 18px;position:relative;z-index:2; background:var(--bg-3);border:2px solid var(--line-2); display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:18px;color:var(--cyan); transition:border-color .3s,background .3s,transform .3s; } .step:hover .step__dot{border-color:var(--cyan);background:var(--bg-4);transform:scale(1.08);} .step__t{font-size:15px;font-weight:700;margin-bottom:6px;} .step__d{font-size:12.5px;color:var(--text-3);line-height:1.55;} @media(max-width:900px){ .proc__track{grid-template-columns:repeat(4,1fr);gap:30px 0;} .proc__track::before{display:none;} } @media(max-width:560px){.proc__track{grid-template-columns:repeat(2,1fr);gap:26px 0;}} /* ============================================================ 制造能力 ============================================================ */ .mfg__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .mfg__vis{ position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line); background:linear-gradient(160deg,#0C1830,#080E1C);aspect-ratio:4/3; display:grid;place-items:center; } .mfg__vis svg{width:82%;height:auto;opacity:.92;} .mfg__vis::after{ content:"";position:absolute;inset:0; background:linear-gradient(transparent 60%,rgba(7,11,20,.6)); } .mfg__list{display:grid;gap:18px;margin-top:30px;} .mfg__item{display:flex;gap:16px;align-items:flex-start;} .mfg__item .mk{ flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center; background:rgba(34,211,238,.1);border:1px solid var(--cyan-dim); } .mfg__item .mk svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:1.8;} .mfg__item h4{font-size:16.5px;font-weight:700;margin-bottom:3px;} .mfg__item p{font-size:14px;color:var(--text-2);} @media(max-width:880px){.mfg__grid{grid-template-columns:1fr;gap:36px;}} /* ============================================================ 新闻 ============================================================ */ .news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .ncard{ background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; transition:border-color .3s,transform .3s var(--ease);display:flex;flex-direction:column; } .ncard:hover{border-color:var(--line-2);transform:translateY(-5px);} .ncard__cov{height:170px;position:relative;overflow:hidden;background:var(--bg-2);} .ncard__cov svg{width:100%;height:100%;} .ncard__cov img{width:100%;height:100%;object-fit:cover;} .ncard__cov .cat{ position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:11px;letter-spacing:1px; color:var(--cyan);background:rgba(7,11,20,.7);border:1px solid var(--cyan-dim); padding:4px 10px;border-radius:100px;backdrop-filter:blur(4px); } .ncard__body{padding:24px;flex:1;display:flex;flex-direction:column;} .ncard__date{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-bottom:10px;} .ncard__t{font-size:17px;font-weight:700;line-height:1.45;margin-bottom:12px;} .ncard__t a:hover{color:var(--cyan);} .ncard__d{font-size:14px;color:var(--text-2);line-height:1.7;flex:1;} .ncard__more{margin-top:18px;font-size:13.5px;font-weight:700;color:var(--cyan);display:inline-flex;gap:6px;align-items:center;transition:gap .2s;} .ncard:hover .ncard__more{gap:11px;} @media(max-width:860px){.news__grid{grid-template-columns:1fr;}} /* ============================================================ 联系 / CTA ============================================================ */ .contact{position:relative;overflow:hidden;} .contact__glow{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 80% at 50% 30%,rgba(34,211,238,.1),transparent 70%);pointer-events:none;} .contact__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start;} .contact__info h2{font-size:clamp(28px,4vw,40px);font-weight:900;line-height:1.2;letter-spacing:-.5px;} .contact__info .lead{color:var(--text-2);margin:18px 0 30px;font-size:16px;} .cinfo{display:grid;gap:16px;margin-bottom:34px;} .cinfo__row{display:flex;align-items:center;gap:15px;font-size:15px;} .cinfo__row .ic{flex:none;width:44px;height:44px;border-radius:11px;background:var(--bg-3);border:1px solid var(--line);display:grid;place-items:center;} .cinfo__row .ic svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:1.7;} .cinfo__row .lab{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:1px;display:block;} .cinfo__row .val{color:var(--text);font-weight:500;} .cinfo__row .val a:hover{color:var(--cyan);} /* 表单 */ .form{ background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg); padding:34px;position:relative;overflow:hidden; } .form::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),transparent);} .form h3{font-size:20px;font-weight:900;margin-bottom:6px;} .form .fsub{font-size:14px;color:var(--text-3);margin-bottom:24px;} .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .field{margin-bottom:16px;} .field label{display:block;font-family:var(--mono);font-size:12px;color:var(--text-2);letter-spacing:.5px;margin-bottom:8px;} .field label .req{color:var(--amber);} .field input,.field select,.field textarea{ width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px; padding:13px 15px;color:var(--text);font-family:var(--sans);font-size:14.5px;transition:border-color .2s,box-shadow .2s; } .field textarea{resize:vertical;min-height:96px;} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.14); } .field select{cursor:pointer;} .form .btn{width:100%;justify-content:center;margin-top:6px;font-size:15px;padding:15px;} .form__note{font-size:12px;color:var(--text-3);margin-top:14px;text-align:center;} .form__msg{display:none;margin-top:14px;padding:11px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;} .form__msg.ok{display:block;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.4);color:var(--green);} .form__msg.err{display:block;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.4);color:#F87171;} .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;} @media(max-width:880px){.contact__grid{grid-template-columns:1fr;gap:36px;}} @media(max-width:520px){.frow{grid-template-columns:1fr;}.form{padding:26px;}} /* ============================================================ 页脚 ============================================================ */ .footer{background:#05080F;border-top:1px solid var(--line);padding:56px 0 0;position:relative;z-index:1;} .footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;} .footer__brand .brand__mark{width:48px;height:48px;} .footer__brand .brand__mark svg{width:38px;height:38px;} .footer__brand p{color:var(--text-3);font-size:14px;margin:18px 0;line-height:1.8;max-width:300px;} .footer__social{display:flex;gap:10px;} .footer__social a{width:38px;height:38px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;transition:border-color .2s,background .2s;} .footer__social a:hover{border-color:var(--cyan-dim);background:var(--bg-3);} .footer__social a svg{width:18px;height:18px;fill:var(--text-2);} .footer h5{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--text-3);text-transform:uppercase;margin-bottom:20px;} .footer__links{display:grid;gap:12px;} .footer__links a{font-size:14.5px;color:var(--text-2);transition:color .2s,padding-left .2s;} .footer__links a:hover{color:var(--cyan);padding-left:5px;} .footer__contact li{font-size:14px;color:var(--text-2);margin-bottom:12px;display:flex;gap:10px;line-height:1.5;} .footer__contact li svg{width:16px;height:16px;stroke:var(--cyan);fill:none;stroke-width:1.7;flex:none;margin-top:3px;} .footer__bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--text-3);} .footer__bottom .icp{font-family:var(--mono);letter-spacing:.5px;} .footer__bottom .icp a{display:inline-flex;align-items:center;gap:6px;} .footer__bottom .icp .icp__badge{width:14px;height:14px;flex:none;fill:rgba(34,211,238,.10);stroke:var(--cyan);stroke-width:1.5;stroke-linejoin:round;} .footer__bottom .icp .icp__tick{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .footer__bottom .icp a:hover{color:var(--cyan);} @media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;gap:32px;}} @media(max-width:520px){.footer__grid{grid-template-columns:1fr;}.footer__bottom{justify-content:center;text-align:center;}} /* 回到顶部 */ .totop{ position:fixed;bottom:26px;right:26px;z-index:50;width:46px;height:46px;border-radius:12px; background:var(--bg-3);border:1px solid var(--line-2);display:grid;place-items:center;cursor:pointer; opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s; } .totop.show{opacity:1;transform:none;pointer-events:auto;} .totop:hover{background:var(--cyan);border-color:var(--cyan);} .totop:hover svg{stroke:#04121A;} .totop svg{width:20px;height:20px;stroke:var(--text);fill:none;stroke-width:2;} /* 焦点可见性（无障碍） */ a:focus-visible,.btn:focus-visible,input:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--cyan);outline-offset:2px; } @media(prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto!important;} .reveal{opacity:1;transform:none;transition:none;} } /* ============================================================ WordPress 扩展 — 内页 / 文章 / 列表 / 分页 / 评论 ============================================================ */ /* 管理员工具栏下的 sticky 偏移 */ body.admin-bar .nav{top:32px;} @media(max-width:782px){body.admin-bar .nav{top:46px;}} /* 菜单面板 top:100% 跟随 .nav（backdrop-filter 使其成为 fixed 包含块），无需 admin-bar 补偿 */ @media(max-width:600px){body.admin-bar .nav{position:absolute;}} /* 内页头部 */ .page-head{padding:clamp(48px,6.5vw,88px) 0 clamp(28px,4vw,44px);position:relative;} .page-head .crumb{font-family:var(--mono);font-size:12.5px;color:var(--text-3);letter-spacing:1px;margin-bottom:16px;} .page-head .crumb a:hover{color:var(--cyan);} .page-head .crumb .sep{margin:0 8px;color:var(--line-2);} .page-head h1{font-size:clamp(28px,4.6vw,44px);font-weight:900;line-height:1.2;letter-spacing:-.5px;} .page-head .meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--text-3);} .page-head .meta .m-item{display:inline-flex;align-items:center;gap:7px;} .page-head .meta .m-item svg{width:14px;height:14px;stroke:var(--cyan);fill:none;stroke-width:1.8;} /* 正文排版 */ .entry-wrap{max-width:860px;margin:0 auto;padding:0 var(--pad) clamp(64px,8vw,110px);position:relative;z-index:1;} .entry-cover{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin-bottom:36px;background:var(--bg-2);} .entry-cover img{width:100%;height:auto;} .entry-content{font-size:16.5px;color:var(--text-2);line-height:1.85;} .entry-content>*+*{margin-top:1.15em;} .entry-content h2,.entry-content h3,.entry-content h4{color:var(--text);font-weight:900;line-height:1.3;} .entry-content h2{font-size:clamp(22px,3vw,28px);margin-top:1.8em;padding-left:14px;border-left:3px solid var(--cyan);} .entry-content h3{font-size:clamp(18px,2.4vw,22px);margin-top:1.6em;} .entry-content h4{font-size:17px;margin-top:1.4em;} .entry-content a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--cyan-dim);} .entry-content a:hover{text-decoration-color:var(--cyan);} .entry-content strong{color:var(--text);font-weight:700;} .entry-content ul,.entry-content ol{padding-left:1.4em;} .entry-content ul{list-style:disc;} .entry-content ol{list-style:decimal;} .entry-content li+li{margin-top:.45em;} .entry-content li::marker{color:var(--cyan);} .entry-content blockquote{ border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:0 var(--r-md) var(--r-md) 0; background:var(--bg-2);padding:18px 22px;color:var(--text-2);font-size:15.5px; } .entry-content img{border-radius:var(--r-md);border:1px solid var(--line);} .entry-content figure{margin-top:1.6em;} .entry-content figcaption{font-family:var(--mono);font-size:12.5px;color:var(--text-3);text-align:center;margin-top:10px;} .entry-content table{width:100%;border-collapse:collapse;font-size:15px;margin-top:1.6em;} .entry-content th,.entry-content td{border:1px solid var(--line);padding:11px 14px;text-align:left;} .entry-content th{background:var(--bg-2);color:var(--text);font-weight:700;} .entry-content tr:nth-child(even) td{background:rgba(17,26,46,.4);} .entry-content code{font-family:var(--mono);font-size:.88em;background:var(--bg-2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--cyan-soft);} .entry-content pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;overflow:auto;} .entry-content pre code{background:none;border:none;padding:0;font-size:13.5px;line-height:1.7;} .entry-content hr{border:none;border-top:1px solid var(--line);margin:2.2em 0;} .entry-content iframe,.entry-content video{max-width:100%;border-radius:var(--r-md);} .entry-content .wp-caption{max-width:100%;} /* 文章标签 / 上下篇 */ .entry-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;} .entry-tags a{font-family:var(--mono);font-size:12px;color:var(--text-2);border:1px solid var(--line);background:var(--bg-2);border-radius:100px;padding:5px 13px;transition:border-color .2s,color .2s;} .entry-tags a:hover{border-color:var(--cyan-dim);color:var(--cyan);} .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px;} .post-nav a{border:1px solid var(--line);background:var(--bg-3);border-radius:var(--r-md);padding:18px 20px;transition:border-color .25s,background .25s;} .post-nav a:hover{border-color:var(--line-2);background:var(--bg-4);} .post-nav .pn-lab{font-family:var(--mono);font-size:11.5px;color:var(--text-3);letter-spacing:1px;display:flex;align-items:center;gap:6px;} .post-nav .pn-lab svg{width:13px;height:13px;stroke:var(--cyan);fill:none;stroke-width:2.2;} .post-nav .pn-t{font-size:14.5px;font-weight:700;color:var(--text);margin-top:8px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .post-nav .pn-next{text-align:right;} .post-nav .pn-next .pn-lab{justify-content:flex-end;} @media(max-width:640px){.post-nav{grid-template-columns:1fr;}} /* 文章列表（博客页 / 归档 / 搜索） */ .list-head{padding:clamp(48px,6.5vw,84px) 0 40px;} .posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:20px;} @media(max-width:960px){.posts-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:620px){.posts-grid{grid-template-columns:1fr;}} .pagination{display:flex;justify-content:center;align-items:center;gap:8px;padding:44px 0 clamp(56px,7vw,96px);flex-wrap:wrap;} .pagination .page-numbers{ font-family:var(--mono);font-size:14px;min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:9px;color:var(--text-2);background:var(--bg-3);transition:border-color .2s,color .2s;padding:0 12px; } .pagination .page-numbers:hover{border-color:var(--cyan-dim);color:var(--cyan);} .pagination .page-numbers.current{background:var(--cyan);border-color:var(--cyan);color:#04121A;font-weight:700;} .no-posts{padding:60px 0 90px;text-align:center;color:var(--text-3);} .no-posts .np-ico{width:76px;height:76px;margin:0 auto 22px;border-radius:20px;border:1px solid var(--line);background:var(--bg-3);display:grid;place-items:center;} .no-posts .np-ico svg{width:34px;height:34px;stroke:var(--cyan-dim);fill:none;stroke-width:1.6;} .no-posts p{font-size:15.5px;margin-bottom:24px;} /* 404 */ .err404 .e404-box{max-width:640px;margin:0 auto;padding:clamp(80px,12vh,140px) var(--pad) clamp(64px,10vh,120px);text-align:center;position:relative;z-index:1;} .e404-box .code{font-family:var(--mono);font-size:clamp(80px,14vw,140px);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--cyan-dim);letter-spacing:4px;} .e404-box h1{font-size:clamp(24px,3.6vw,34px);font-weight:900;margin:22px 0 12px;} .e404-box p{color:var(--text-2);margin-bottom:32px;} /* 评论区（深色适配，默认不启用） */ .comments-area{max-width:860px;margin:56px auto 0;padding:0 var(--pad) clamp(56px,7vw,90px);} .comments-area .comments-title{font-size:20px;font-weight:900;margin-bottom:26px;} .comment-list{display:grid;gap:18px;} .comment-list .comment{border:1px solid var(--line);background:var(--bg-3);border-radius:var(--r-md);padding:18px 20px;} .comment-author{font-weight:700;font-size:14.5px;} .comment-metadata{font-family:var(--mono);font-size:12px;color:var(--text-3);margin:4px 0 10px;} .comment-metadata a{color:var(--text-3);} .comment-metadata a:hover{color:var(--cyan);} .comment-content{font-size:14.5px;color:var(--text-2);} .comment-reply-link{font-size:12.5px;color:var(--cyan);margin-top:8px;display:inline-block;} .comment-respond{margin-top:30px;} .comment-respond .comment-reply-title{font-size:17px;font-weight:900;margin-bottom:16px;} .comment-form-comment label,.comment-form-author label,.comment-form-email label,.comment-form-url label{display:block;font-family:var(--mono);font-size:12px;color:var(--text-2);margin-bottom:8px;} .comment-form-comment input,.comment-form-comment textarea,.comment-form-author input,.comment-form-email input,.comment-form-url input{ width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--sans);font-size:14.5px;margin-bottom:14px; } .comment-form-comment input:focus,.comment-form-comment textarea:focus,.comment-form-author input:focus,.comment-form-email input:focus,.comment-form-url input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.14);} .form-submit .submit{background:var(--cyan);color:#04121A;font-weight:700;font-size:14px;border:none;border-radius:9px;padding:12px 26px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s;} .form-submit .submit:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(34,211,238,.8);} .comment-notes,.logged-in-as{font-size:13px;color:var(--text-3);margin-bottom:14px;} .comment-notes a,.logged-in-as a{color:var(--cyan);} .comment-form-cookies-consent{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-3);margin-bottom:14px;} /* 全宽空白模板 */ .template-blank main .entry-wrap{max-width:none;} /* 搜索表单（备用） */ .search-form{display:flex;gap:10px;max-width:480px;} .search-form .search-field{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 15px;color:var(--text);font-family:var(--sans);font-size:14.5px;} .search-form .search-field:focus{outline:none;border-color:var(--cyan);} .search-form .search-submit{background:var(--cyan);color:#04121A;border:none;border-radius:9px;padding:12px 22px;font-weight:700;cursor:pointer;} /* WP 区块兼容 */ .wp-block-image img{border-radius:var(--r-md);} .wp-block-button__link{border-radius:9px!important;font-weight:700;} .wp-block-quote{border-left:3px solid var(--cyan);} /* ============================================================ v2 — 顶栏登录态 ============================================================ */ .topbar__auth{display:flex;align-items:center;gap:10px;} .topbar__auth a{color:var(--text-2);transition:color .2s;} .topbar__auth a:hover{color:var(--cyan);} .topbar__hello{color:var(--text-2);} .topbar__sep{color:var(--line-2);} @media(max-width:720px){.topbar__hello{display:none;}} /* ============================================================ v2 — 主导航（WP 菜单 + 二级下拉） ============================================================ */ .menu__list{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;} .menu__list > .menu-item{position:relative;} .menu-item-has-children > a{padding-right:26px!important;} .menu-item-has-children > a::before{ content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-58%); font-size:10px;color:var(--text-3);transition:color .2s,transform .25s; } .menu-item-has-children:hover > a::before{color:var(--cyan);} .sub-menu{ position:absolute;top:calc(100% + 6px);left:0;min-width:224px;z-index:70; background:rgba(12,19,34,.98);border:1px solid var(--line-2);border-radius:12px; padding:8px;box-shadow:0 26px 52px -20px rgba(0,0,0,.75);backdrop-filter:blur(10px); display:grid;gap:2px;list-style:none;margin:0; opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; } .menu-item:hover > .sub-menu,.menu-item:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;} .sub-menu a{display:block;padding:10px 14px;font-size:14px;color:var(--text-2);border-radius:8px;transition:background .2s,color .2s;} .sub-menu a::after{display:none;} .sub-menu a:hover{background:var(--bg-3);color:var(--cyan);} .sub-menu .current-menu-item > a,.sub-menu .current_page_item > a{color:var(--cyan);} /* 子菜单展开按钮（仅移动端显示，由 main.js 注入） */ .sub-toggle{ display:none;position:absolute;right:6px;top:7px;width:36px;height:36px;z-index:2; border:1px solid var(--line);background:var(--bg-3);border-radius:8px; align-items:center;justify-content:center;cursor:pointer;color:var(--text-2); } .sub-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .25s;} .menu-item.open > .sub-toggle svg{transform:rotate(180deg);} @media(max-width:1080px){ .menu__list{width:100%;flex-direction:column;align-items:stretch;gap:0;} .menu__list > .menu-item > a{padding:13px 46px 13px 10px;font-size:16px;border-bottom:1px solid var(--line);} .menu-item-has-children > a::before{display:none;} .sub-toggle{display:flex;} .sub-menu{ position:static;display:none;opacity:1;visibility:visible;transform:none; background:transparent;border:none;border-left:1px solid var(--line-2);border-radius:0; box-shadow:none;backdrop-filter:none;min-width:0;padding:2px 0 6px 12px;margin:0 0 6px 10px; } .menu-item.open > .sub-menu{display:grid;} .sub-menu a{padding:10px 12px;font-size:14.5px;border-bottom:none;} } /* ============================================================ v2 — 导航动作区（搜索按钮 / 语言切换 / CTA） ============================================================ */ .icon-btn{ width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2); display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s;flex:none; } .icon-btn svg{width:17px;height:17px;stroke:var(--text-2);fill:none;stroke-width:2;transition:stroke .2s;} .icon-btn:hover{border-color:var(--cyan-dim);background:var(--bg-3);} .icon-btn:hover svg{stroke:var(--cyan);} .lang-switch{ display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px; border:1px solid var(--line);border-radius:7px;padding:6px 10px;color:var(--text-3); transition:border-color .2s,color .2s;flex:none; } .lang-switch b{color:var(--text);font-size:13px;font-weight:700;} .lang-switch:hover{border-color:var(--cyan-dim);color:var(--cyan);} .lang-switch:hover b{color:var(--cyan);} @media(max-width:1080px){.lang-switch span{display:none;}} @media(max-width:640px){.nav__cta{display:none;}} /* ---- 搜索面板 ---- */ .search-panel{ position:fixed;inset:0;z-index:90;background:rgba(5,8,15,.88);backdrop-filter:blur(10px); display:grid;place-items:start center;padding:16vh var(--pad) 0; opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s; } .search-panel.open{opacity:1;visibility:visible;} .search-panel .wrap{width:100%;max-width:720px;position:relative;} .search-panel__close{ position:absolute;top:-54px;right:0;width:38px;height:38px;border-radius:9px; border:1px solid var(--line-2);background:var(--bg-2);display:grid;place-items:center;cursor:pointer; } .search-panel__close svg{width:16px;height:16px;stroke:var(--text-2);fill:none;stroke-width:2;} .search-panel__close:hover svg{stroke:var(--cyan);} .search-panel__title{font-family:var(--mono);font-size:12.5px;color:var(--text-3);letter-spacing:1.5px;margin-bottom:16px;} .jy-search{display:flex;gap:10px;max-width:none;} .jy-search__scope{ flex:none;background:var(--bg-2);border:1px solid var(--line);border-radius:10px; padding:0 12px;color:var(--text-2);font-family:var(--sans);font-size:14px;cursor:pointer; } .jy-search__scope:focus{outline:none;border-color:var(--cyan);} .jy-search .search-field{font-size:16px;padding:15px 18px;} .jy-search .btn{flex:none;} @media(max-width:600px){ .jy-search{flex-wrap:wrap;} .jy-search .search-field{flex:1 1 100%;order:-1;} .jy-search__scope{flex:1;} } /* ============================================================ v2 — 首页补丁（定制 CTA 卡 / 方案卡链接化） ============================================================ */ .pcard--cta{ border-style:dashed;border-color:var(--line-2);display:flex;flex-direction:column; background:linear-gradient(160deg,rgba(34,211,238,.05),transparent 55%),var(--bg-3); } .pcard--cta .pcard__name{margin-top:12px;} .pcard--cta .pcard__desc{flex:1;} .pcard__no--hl{color:var(--amber);font-size:13px;} a.scard{display:block;color:inherit;} /* ============================================================ v2 — 产品归档 / 系列 / 应用（prgrid + prcard） ============================================================ */ .prod-archive{padding-bottom:clamp(56px,8vw,100px);position:relative;z-index:1;} .pa-sec{margin-bottom:54px;} .pa-sec:last-child{margin-bottom:0;} .pa-head{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line); } .pa-head h2{font-size:clamp(20px,2.6vw,26px);font-weight:900;} .pa-more{font-family:var(--mono);font-size:13px;color:var(--cyan);white-space:nowrap;} .pa-more:hover{text-decoration:underline;} .pa-grid,.prgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:900px){.pa-grid,.prgrid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.pa-grid,.prgrid{grid-template-columns:1fr;}} .prcard{ display:flex;flex-direction:column;background:var(--bg-3);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;transition:border-color .3s,transform .3s var(--ease),background .3s; } .prcard:hover{border-color:var(--line-2);transform:translateY(-5px);background:var(--bg-4);} .prcard__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(160deg,#0B1526,#0A1120);} .prcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease);} .prcard__img svg{width:100%;height:100%;} .prcard:hover .prcard__img img{transform:scale(1.05);} .prcard__status{ position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:1px; color:var(--green);background:rgba(7,11,20,.78);border:1px solid rgba(74,222,128,.4); padding:3px 9px;border-radius:100px;backdrop-filter:blur(4px); } .prcard__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;} .prcard__cap{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:1px;margin-bottom:7px;} .prcard__model{font-family:var(--mono);font-size:12.5px;color:var(--cyan);margin-bottom:7px;} .prcard__title{font-size:16.5px;font-weight:700;line-height:1.45;color:var(--text);} .prcard__more{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--cyan);transition:gap .2s;} .prcard:hover .prcard__more{gap:10px;} /* 系列 / 应用分类页 */ .tax-body{padding-bottom:clamp(40px,6vw,80px);position:relative;z-index:1;} .tax-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px;} .tax-chips a{ display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px; color:var(--text-2);background:var(--bg-2);border:1px solid var(--line);border-radius:100px; padding:8px 15px;transition:border-color .2s,color .2s; } .tax-chips a span{font-size:11px;color:var(--text-3);background:var(--bg-3);border-radius:100px;padding:1px 7px;} .tax-chips a:hover{border-color:var(--cyan-dim);color:var(--cyan);} /* ============================================================ v2 — 产品详情 ============================================================ */ .prod-head{padding-bottom:clamp(20px,3vw,32px);} .m-item--badge{ color:var(--green)!important;border:1px solid rgba(74,222,128,.4);background:rgba(74,222,128,.08); border-radius:100px;padding:2px 11px;font-size:11.5px; } .prod-wrap{max-width:1000px;} .prod-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:start;margin-bottom:48px;} .prod-hero__img{ border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(160deg,#0B1526,#0A1120);aspect-ratio:4/3; } .prod-hero__img img{width:100%;height:100%;object-fit:cover;} .prod-hero__img svg{width:100%;height:100%;} .prod-apps{margin-bottom:18px;} .prod-apps__lab{display:block;font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:1.5px;margin-bottom:9px;} .prod-apps ul{display:flex;flex-wrap:wrap;gap:8px;} .prod-apps li a{ display:inline-block;font-size:12.5px;color:var(--cyan-soft);border:1px solid var(--cyan-dim); background:rgba(34,211,238,.07);border-radius:100px;padding:5px 13px;transition:background .2s; } .prod-apps li a:hover{background:rgba(34,211,238,.16);} .prod-lead{font-size:16px;color:var(--text-2);line-height:1.8;margin-bottom:16px;} .prod-custom{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--green);margin-bottom:10px;} .prod-custom svg{stroke:var(--green);flex:none;} .prod-inqcopy{font-size:14px;color:var(--text-3);margin-bottom:20px;} .prod-cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0;} .prod-files{border-top:1px solid var(--line);padding-top:20px;} .prod-files__lab{display:block;font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:1.5px;margin-bottom:11px;} .prod-files__btns{display:flex;flex-wrap:wrap;gap:10px;} .file-btn{ display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text-2); background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:10px 16px; transition:border-color .2s,color .2s; } .file-btn svg{stroke:var(--cyan);flex:none;} .file-btn:hover{border-color:var(--cyan-dim);color:var(--cyan);} .file-btn--sm{padding:6px 13px;font-size:12.5px;} @media(max-width:880px){.prod-hero{grid-template-columns:1fr;}} /* 规格表 */ .spec-block{margin-bottom:44px;} .spec-block__t{font-size:clamp(19px,2.4vw,23px);font-weight:900;margin-bottom:18px;padding-left:13px;border-left:3px solid var(--cyan);} .spec-table{width:100%;border-collapse:collapse;font-size:14.5px;} .spec-table th,.spec-table td{border:1px solid var(--line);padding:12px 16px;text-align:left;vertical-align:top;} .spec-table th{width:220px;background:var(--bg-2);color:var(--text-2);font-weight:600;font-family:var(--mono);font-size:13px;} .spec-table td{color:var(--text);} .spec-table tr:nth-child(even) td{background:rgba(17,26,46,.35);} @media(max-width:640px){.spec-table th{width:120px;}} /* 底部 CTA 横幅 */ .prod-band{ margin-top:56px;padding:28px 32px;border:1px solid var(--line-2);border-radius:var(--r-lg); background:linear-gradient(90deg,rgba(34,211,238,.07),transparent 60%); display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; } .prod-band h3{font-size:19px;font-weight:900;margin-bottom:5px;} .prod-band p{font-size:13px;color:var(--text-3);font-family:var(--mono);} .prod-band__btns{display:flex;gap:12px;flex-wrap:wrap;} /* ============================================================ v2 — 搜索结果（范围过滤 + 混合列表） ============================================================ */ .search-body{padding-bottom:clamp(40px,6vw,80px);position:relative;z-index:1;} .scope-bar{display:flex;flex-wrap:wrap;gap:8px;} .scope-bar a{ font-family:var(--mono);font-size:12.5px;color:var(--text-3);border:1px solid var(--line); background:var(--bg-2);border-radius:100px;padding:6px 15px;transition:color .2s,border-color .2s,background .2s; } .scope-bar a:hover{color:var(--cyan);border-color:var(--cyan-dim);} .scope-bar a.on{color:#04121A;background:var(--cyan);border-color:var(--cyan);font-weight:700;} .reslist{display:grid;gap:12px;} .resrow{ display:flex;align-items:flex-start;gap:16px;background:var(--bg-3);border:1px solid var(--line); border-radius:var(--r-md);padding:18px 22px;transition:border-color .25s,transform .25s var(--ease),background .25s; } .resrow:hover{border-color:var(--line-2);background:var(--bg-4);transform:translateX(4px);} .resrow__badge{ flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--text-3); border:1px solid var(--line);background:var(--bg-2);border-radius:6px;padding:4px 9px;margin-top:3px; } .resrow__badge--prod{color:var(--cyan);border-color:var(--cyan-dim);background:rgba(34,211,238,.07);} .resrow__badge--dl{color:var(--amber);border-color:rgba(245,185,68,.4);background:rgba(245,185,68,.06);} .resrow__main{flex:1;min-width:0;display:grid;gap:5px;} .resrow__t{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px;flex-wrap:wrap;} .resrow__lock{stroke:var(--amber);flex:none;} .resrow__model{font-family:var(--mono);font-size:12.5px;font-style:normal;color:var(--cyan);} .resrow__d{font-size:13.5px;color:var(--text-2);line-height:1.7;} .resrow__date{font-family:var(--mono);font-size:11.5px;color:var(--text-3);} .resrow__arr{flex:none;stroke:var(--text-3);margin-top:5px;transition:stroke .2s,transform .2s;} .resrow:hover .resrow__arr{stroke:var(--cyan);transform:translateX(3px);} /* ============================================================ v2 — 静态页（子页卡片网格 / 支持表单页） ============================================================ */ .child-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px;} @media(max-width:640px){.child-grid{grid-template-columns:1fr;}} .child-card{ display:block;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-md); padding:22px 24px;transition:border-color .25s,transform .25s var(--ease),background .25s; } .child-card:hover{border-color:var(--line-2);background:var(--bg-4);transform:translateY(-3px);} .child-card h3{font-size:16.5px;font-weight:700;margin-bottom:8px;color:var(--text);} .child-card p{font-size:13.5px;color:var(--text-2);line-height:1.7;margin-bottom:12px;} .child-card__go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--cyan);font-family:var(--mono);} .support-form-sec{padding-bottom:clamp(56px,8vw,100px);position:relative;z-index:1;} .support-alt{ margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px; color:var(--text-3);border:1px dashed var(--line-2);border-radius:var(--r-md);padding:16px 20px; } .support-alt a{color:var(--cyan);font-family:var(--mono);} .support-alt a:hover{text-decoration:underline;} /* ============================================================ v2 — WP-Members 登录 / 注册表单深色适配 ============================================================ */ html body.junyi-page .wpmem_form{ max-width:520px;margin:8px auto 0;background:var(--bg-2);border:1px solid var(--line); border-radius:var(--r-lg);padding:34px;position:relative;overflow:hidden; } html body.junyi-page .wpmem_form::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),transparent);} html body.junyi-page .wpmem_form label{display:block;font-family:var(--mono);font-size:12px;color:var(--text-2);letter-spacing:.5px;margin:16px 0 8px;} html body.junyi-page .wpmem_form input[type="text"], html body.junyi-page .wpmem_form input[type="password"], html body.junyi-page .wpmem_form input[type="email"], html body.junyi-page .wpmem_form input[type="url"], html body.junyi-page .wpmem_form input[type="tel"], html body.junyi-page .wpmem_form input[type="number"], html body.junyi-page .wpmem_form select, html body.junyi-page .wpmem_form textarea{ width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px; padding:13px 15px;color:var(--text);font-family:var(--sans);font-size:14.5px; } html body.junyi-page .wpmem_form input:focus, html body.junyi-page .wpmem_form select:focus, html body.junyi-page .wpmem_form textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.14);} html body.junyi-page .wpmem_form input[type="submit"], html body.junyi-page .wpmem_form .btn, html body.junyi-page .wpmem_form .button{ width:100%;margin-top:20px;background:var(--cyan);color:#04121A;border:none;border-radius:9px; padding:14px 26px;font-weight:700;font-size:15px;font-family:var(--sans);cursor:pointer; text-shadow:none;box-shadow:0 6px 22px -8px rgba(34,211,238,.7);transition:transform .2s var(--ease),box-shadow .2s; } html body.junyi-page .wpmem_form input[type="submit"]:hover, html body.junyi-page .wpmem_form .btn:hover, html body.junyi-page .wpmem_form .button:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(34,211,238,.85);color:#04121A;} html body.junyi-page .wpmem_form a{color:var(--cyan);} html body.junyi-page .wpmem_form a:hover{text-decoration:underline;} html body.junyi-page .wpmem_form .req,html body.junyi-page .wpmem_form .wpmem-required{color:var(--amber);} html body.junyi-page .wpmem_form .link-text,html body.junyi-page .wpmem_form .forgot_pw{font-size:13px;color:var(--text-3);margin-top:12px;} html body.junyi-page .wpmem_msg, html body.junyi-page .wpmem_alert, html body.junyi-page .wpmem_status{ background:var(--bg-3);border:1px solid var(--line-2);border-left:3px solid var(--cyan); border-radius:0 var(--r-md) var(--r-md) 0;color:var(--text-2);padding:14px 18px;margin:0 0 18px;font-size:14px; } html body.junyi-page .wpmem_err,html body.junyi-page .wpmem_error{color:#F87171;} html body.junyi-page .wpmem_form fieldset{border:none;padding:0;margin:0;} html body.junyi-page .wpmem_form legend{color:var(--text);font-weight:700;} /* ============================================================ v2 — 遗留页面深色覆盖总表 旧页面内容自带