/* Theme Name: CNBoxHome Theme URI: https://cnboxhome.com Author: CNBoxHome Author URI: https://cnboxhome.com Description: CNBoxHome 官方主题。代码自定义主题，版式对齐 boxhouse.com；内建产品管理、询盘收件与可复用积木。可与 SEO / 多语言 / 缓存 / 统计类插件并存，请勿安装 Elementor / Divi 等页面构建器。 Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.8 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: cnboxhome Tags: business, custom-colors, custom-menu, featured-images, translation-ready */ /* ========================================================================== CNBoxHome — 站点样式 设计基准：boxhouse.com 实测拆解（见 06_boxhouse拆解/00_boxhouse设计规范.md） ========================================================================== */ :root{ --navy:#002136; --navy-2:#0a3350; --orange:#f06800; --orange-dark:#d95f00; --orange-lite:#ff7f1f; --teal:#53a5a0; --green:#0d8259; --green-dark:#0a6a49; --beige:#e8e5dd; --beige-2:#dedad0; --light:#f4f4f4; --ink:#212121; --ink-2:#4a5560; --line:#e0ddd4; --white:#fff; --display:'Archivo','Helvetica Neue',Arial,sans-serif; --body:'Inter','Helvetica Neue',Arial,sans-serif; --container:1272px; --radius:15px; --radius-sm:8px; --pill:50px; --t:.2s ease; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--white);color:var(--ink); font-family:var(--body);font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4,.display{ font-family:var(--display);font-weight:500;font-stretch:112%; letter-spacing:1px;margin:0;color:var(--navy);line-height:1.08; } p{margin:0} /* ---------- 布局 ---------- */ .wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 36px} .section{padding:110px 0} .section--sm{padding:80px 0} .section--tight{padding:60px 0} .center{text-align:center} .bg-beige{background:var(--beige)} .bg-light{background:var(--light)} .bg-navy{background:var(--navy)} .bg-white{background:var(--white)} .lead{font-size:20px;line-height:1.5;color:var(--ink)} .lead--navy{color:var(--navy)} .muted{color:var(--ink-2)} /* 区块标题 */ .h-sec{font-size:44px;line-height:1.3;letter-spacing:1px} .h-sec--sm{font-size:34px;line-height:1.2} .h-card{font-size:30px;line-height:1.1} /* 色彩工具类定义见文件末尾（集中放在最后，保证能覆盖区块默认色） */ /* 细分割线（区块标题下的通栏细线） */ .rule{height:1px;background:var(--line);border:0;margin:26px 0} /* ---------- 按钮 ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:1px; text-transform:uppercase;border-radius:var(--pill);border:1.5px solid transparent; padding:16px 32px;cursor:pointer;transition:var(--t);white-space:nowrap; } .btn--orange{background:var(--orange);color:#fff} .btn--orange:hover{background:var(--orange-dark);transform:translateY(-2px)} .btn--green{background:var(--green);color:#fff;padding:13px 26px} .btn--green:hover{background:var(--green-dark);transform:translateY(-2px)} .btn--navy{background:var(--navy);color:#fff} .btn--navy:hover{background:var(--navy-2);transform:translateY(-2px)} .btn--outline{border-color:var(--navy);color:var(--navy);background:transparent} .btn--outline:hover{background:var(--navy);color:#fff} .btn--sm{padding:11px 22px;font-size:12px} /* ---------- 导航 ---------- */ .nav{ position:sticky;top:0;z-index:200;background:#fff; border-bottom:1px solid transparent;transition:var(--t); } .nav.scrolled{border-bottom-color:var(--line);box-shadow:0 2px 16px rgba(0,33,54,.06)} .nav__inner{ max-width:var(--container);margin:0 auto;padding:0 36px;height:63px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .brand{display:flex;align-items:center;gap:10px;flex:none} .brand svg{width:34px;height:30px;flex:none} .brand__text{font-family:var(--display);font-weight:700;font-stretch:112%; font-size:22px;letter-spacing:.2px;color:var(--navy)} .brand__text em{font-style:normal;color:var(--orange)} .nav__menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0} .nav__item{position:relative} .nav__link{ font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase; color:var(--navy);padding:22px 0;display:inline-flex;align-items:center;gap:6px; transition:var(--t); } .nav__link:hover{color:var(--orange)} .nav__item.active .nav__link{color:var(--orange)} .nav__link .caret{width:9px;height:9px;flex:none;transition:transform var(--t)} .nav__item:hover .caret{transform:rotate(180deg)} .dropdown{ position:absolute;top:100%;left:-18px;min-width:250px;background:#fff; border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px; box-shadow:0 16px 40px rgba(0,33,54,.13); opacity:0;visibility:hidden;transform:translateY(-6px);transition:var(--t); } .nav__item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)} .dropdown a{ display:block;padding:11px 14px;border-radius:6px;font-size:14px;color:var(--navy); transition:var(--t); } .dropdown a:hover{background:var(--beige);color:var(--orange)} .dropdown a small{display:block;font-size:12px;color:var(--ink-2);letter-spacing:0;text-transform:none} .nav__toggle{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;padding:9px} .nav__toggle span{display:block;height:2px;background:var(--navy);margin:5px 0;transition:var(--t)} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;background:var(--navy)} .hero__media{position:absolute;inset:0} .hero__media img{width:100%;height:100%;object-fit:cover} .hero__media::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(0,33,54,.55),rgba(0,33,54,.12) 60%,rgba(0,33,54,.2))} .hero__inner{ position:relative;z-index:2;max-width:var(--container);margin:0 auto; padding:96px 36px 96px;min-height:470px;display:flex;align-items:center; } .hero--tall .hero__inner{min-height:560px} .hero--page .hero__inner{min-height:420px;justify-content:center;text-align:center} .hero--page .hero__media::after{background:rgba(0,33,54,.44)} .hero-card{ width:412px;max-width:100%;border-radius:var(--radius); background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); padding:30px 34px 32px;overflow:hidden; } .hero-card--wide{width:640px;text-align:center} .hero-card--wide .hero-card__logo{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px} .hero-card--wide .hero-card__logo svg{width:52px;height:46px} .hero-card__logo-txt{font-family:var(--display);font-weight:700;font-stretch:112%; font-size:40px;color:#fff;letter-spacing:.5px} /* 跑马灯大标题 */ .marquee{overflow:hidden;width:100%;margin-bottom:6px} .marquee__track{display:flex;gap:34px;width:max-content;animation:marquee 16s linear infinite} .marquee span{ font-family:var(--display);font-weight:600;font-stretch:112%; font-size:46px;line-height:1;letter-spacing:1px;text-transform:uppercase; color:var(--orange);white-space:nowrap; } @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marquee:hover .marquee__track{animation-play-state:paused} .hero-card h1{font-size:40px;line-height:1.05;color:#fff;margin:0 0 14px} .hero-card p{color:rgba(255,255,255,.92);font-size:19px;line-height:1.45;margin-bottom:24px} .hero-card .hero-card__title{font-size:40px;line-height:1.05;color:#fff;margin:0 0 12px;font-family:var(--display);font-weight:500;letter-spacing:1px} .hero-card .hero-card__sub{font-size:19px;line-height:1.45;color:rgba(255,255,255,.92);margin-bottom:22px} /* ---------- 卡片 ---------- */ .card{ background:var(--beige);border-radius:var(--radius);padding:24px; transition:transform .3s ease,background .3s ease; } .card:hover{transform:translateY(-4px)} .card__media{border-radius:10px;overflow:hidden;background:var(--beige-2);margin-bottom:20px} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .card:hover .card__media img{transform:scale(1.04)} /* 用途卡（2×2 大卡，图片 + 底部文字） */ .usecase{ background:var(--beige);border-radius:var(--radius);padding:24px; display:flex;flex-direction:column;justify-content:flex-end;min-height:340px; position:relative;overflow:hidden;transition:transform .3s ease; } .usecase:hover{transform:translateY(-4px)} .usecase__bg{position:absolute;inset:0} .usecase__bg img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .usecase:hover .usecase__bg img{transform:scale(1.05)} /* 用米色渐变把图片压到下半部，保证藏青文字始终可读 */ .usecase::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom, rgba(232,229,221,0) 0%, rgba(232,229,221,.42) 38%, rgba(232,229,221,.90) 66%, #e8e5dd 88%, #e8e5dd 100%); } .usecase__body{position:relative;z-index:2} .usecase h3{font-size:30px;margin-bottom:10px} .usecase p{font-size:16px;line-height:1.5;color:var(--navy)} /* 特性卡（图标 + 绿标题） */ .feature{background:var(--beige);border-radius:var(--radius);padding:26px} .feature__icon{display:block;width:46px;height:46px;margin-bottom:18px;color:var(--navy)} .feature__icon svg{width:100%;height:100%;stroke:var(--navy);fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .feature h3{font-size:26px;color:var(--green);margin-bottom:12px;line-height:1.15} .feature p{font-size:16px;line-height:1.5;color:var(--navy)} /* 产品卡 */ .model-card{ background:var(--beige);border-radius:var(--radius);padding:24px; display:flex;flex-direction:column;transition:transform .3s ease; } .model-card:hover{transform:translateY(-4px)} .model-card__media{border-radius:10px;overflow:hidden;background:var(--beige-2); aspect-ratio:4/3;margin-bottom:22px} .model-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .model-card:hover .model-card__media img{transform:scale(1.04)} .model-card h3{font-size:30px;margin-bottom:14px} .model-card h3 span{color:#8496a8;font-weight:600} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .tag{background:#fff;border-radius:var(--pill);padding:8px 16px;font-size:13px; color:var(--navy);white-space:nowrap} .model-card p{font-size:16px;line-height:1.5;color:var(--navy);margin-bottom:20px;flex:1} .model-card .btn{align-self:flex-start} /* 规格胶囊 */ .spec-pill{background:var(--beige);border-radius:var(--radius);padding:20px 22px} .spec-pill dt{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px} .spec-pill dd{margin:0;font-family:var(--display);font-weight:600;font-stretch:110%; font-size:22px;color:var(--navy);letter-spacing:.5px} /* 外墙色号样板（无标注，纯纹理） */ .swatch{border-radius:var(--radius);overflow:hidden;background:var(--beige); transition:transform .3s ease} .swatch:hover{transform:translateY(-4px)} .swatch img{width:100%;height:auto;aspect-ratio:5/2;object-fit:cover} /* ---------- 栅格 ---------- */ .grid{display:grid;gap:24px} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} .grid--2x3{grid-template-columns:repeat(2,1fr)} .grid--gap16{gap:16px} /* 媒体 + 文字 两栏 */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .split--wide-left{grid-template-columns:1.05fr .95fr} .split--media{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:64px;align-items:start} /* ---------- 视频 / 播放按钮 ---------- */ .video{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--beige-2); aspect-ratio:16/8;cursor:pointer} .video img{width:100%;height:100%;object-fit:cover;filter:blur(3px);transform:scale(1.06); transition:filter .4s ease,transform .4s ease} .video:hover img{filter:blur(1px);transform:scale(1.03)} .video__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(0,33,54,.12)} .video__logo{display:flex;align-items:center;gap:16px} .video__logo svg{width:56px;height:50px} .video__logo span{font-family:var(--display);font-weight:700;font-stretch:112%; font-size:58px;color:var(--navy);letter-spacing:.5px} .play{ width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.85); border:3px solid #fff;display:flex;align-items:center;justify-content:center; position:absolute;transition:transform var(--t);box-shadow:0 8px 28px rgba(0,33,54,.2); } .play::after{content:"";display:block;width:0;height:0;border-style:solid; border-width:13px 0 13px 22px;border-color:transparent transparent transparent var(--navy);margin-left:6px} .video:hover .play{transform:scale(1.08)} /* ---------- 统计 ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 auto} .stat{text-align:center} .stat__num{font-family:var(--display);font-weight:700;font-stretch:112%;font-size:34px; letter-spacing:.5px;color:var(--teal);margin-bottom:10px} .stat__label{font-size:14px;line-height:1.5;color:var(--navy)} /* ---------- 深色区块 ---------- */ .dark{position:relative;overflow:hidden;background:var(--navy);color:#fff} .dark::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(118deg,transparent 32%,rgba(255,255,255,.045) 32.2%,rgba(255,255,255,.045) 44%,transparent 44.2%), linear-gradient(118deg,transparent 58%,rgba(255,255,255,.035) 58.2%,rgba(255,255,255,.035) 74%,transparent 74.2%), radial-gradient(120% 90% at 12% 0%,#16496b 0%,#002136 62%); } .dark > *{position:relative;z-index:2} /* 说明：深色区块的文字颜色由 HTML 上的 .c-white / .c-navy 工具类显式指定， 不在 CSS 里用 .dark p 批量覆盖，避免误伤区块内的米色卡片。 */ /* ---------- 证言轮播 ---------- */ .quotes{position:relative;max-width:900px;margin:0 auto;text-align:center} .quote{display:none} .quote.on{display:block;animation:fade .5s ease} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .quote p{font-size:20px;line-height:1.5;color:#fff;margin:0 auto 30px;max-width:660px} .quote cite{display:block;font-style:normal;font-family:var(--display);font-weight:700; font-stretch:112%;font-size:20px;color:#fff;letter-spacing:.5px} .quote small{display:block;font-size:15px;color:rgba(255,255,255,.72);margin-top:6px} .dots{display:flex;gap:10px;justify-content:center;margin-top:34px} .dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer; background:rgba(255,255,255,.35);transition:var(--t)} .dots button.on{background:var(--orange);width:26px;border-radius:6px} /* ---------- 橙色 CTA 带 ---------- */ .cta{position:relative;overflow:hidden;background:var(--orange);color:#fff} .cta__wm{position:absolute;right:-90px;bottom:-70px;width:440px;opacity:.5;pointer-events:none} .cta__wm svg{width:100%;height:auto} .cta__inner{position:relative;z-index:2;padding:82px 0} .cta h2{color:#fff;font-size:44px;line-height:1.2;max-width:620px;margin-bottom:18px} .cta p{color:var(--navy);font-size:18px;line-height:1.5;max-width:520px;margin-bottom:28px} /* ---------- 表格 ---------- */ .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff} table.cmp{border-collapse:collapse;width:100%;min-width:940px;font-size:14px} table.cmp th,table.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)} table.cmp thead th{ font-family:var(--display);font-weight:600;font-stretch:110%;font-size:15px; color:var(--orange);letter-spacing:.2px;border-bottom:2px solid var(--line);white-space:nowrap; } table.cmp thead th:first-child{color:var(--ink-2);font-family:var(--body);font-size:13px; letter-spacing:1px;text-transform:uppercase;font-weight:600} table.cmp tbody tr:hover{background:var(--beige)} table.cmp tbody td:first-child{font-size:13px;letter-spacing:.5px;text-transform:uppercase; color:var(--ink-2);font-weight:500} table.cmp tbody td{color:var(--navy)} table.cmp tbody tr:last-child td{border-bottom:0} /* ---------- 图 + INDEX 侧栏 ---------- */ .viewer{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start} .viewer__stage{background:var(--light);border-radius:var(--radius);padding:26px;position:relative} .viewer__stage img{width:100%;border-radius:8px;background:#fff} .viewer__tools{position:absolute;left:26px;top:26px;display:flex;gap:6px} .viewer__tools button{width:34px;height:34px;border:0;border-radius:6px;background:#fff; cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:var(--t)} .viewer__tools button.on{background:var(--orange);color:#fff} .viewer__label{position:absolute;left:26px;bottom:26px;background:#fff;border-radius:6px; padding:9px 14px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy)} .viewer__cap{margin-top:22px} .viewer__cap h3{font-size:26px;margin-bottom:8px} .viewer__cap p{font-size:14px;color:var(--ink-2)} .index{list-style:none;margin:0;padding:0} .index__title{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px} .index li{margin-bottom:8px} .index button{ width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-left:3px solid transparent; border-radius:6px;padding:14px 16px;font-family:var(--body);font-size:14px;color:var(--navy); cursor:pointer;transition:var(--t); } .index button:hover{border-color:var(--beige-2);background:var(--beige)} .index button.on{border-color:var(--orange);border-left-color:var(--orange);color:var(--orange);font-weight:600} /* ---------- 图库轮播 ---------- */ .gallery{position:relative} .gallery__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;padding-bottom:4px} .gallery__track::-webkit-scrollbar{display:none} .gallery__item{flex:0 0 clamp(260px,32%,420px);scroll-snap-align:start; border-radius:var(--radius);overflow:hidden;background:var(--beige-2);aspect-ratio:4/3} .gallery__item img{width:100%;height:100%;object-fit:cover} .gallery__nav{display:flex;gap:10px;justify-content:flex-end;margin-top:20px} .gallery__nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--navy); background:transparent;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center; transition:var(--t);font-size:16px} .gallery__nav button:hover{background:var(--navy);color:#fff} /* ---------- 表单 ---------- */ .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;text-align:left} .field{display:flex;flex-direction:column;gap:7px} .field--full{grid-column:1/-1} .field label{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2);font-weight:500} .field input,.field select,.field textarea{ font-family:var(--body);font-size:15px;color:var(--navy);background:#fff; border:1.5px solid var(--line);border-radius:8px;padding:14px 16px;transition:var(--t); } .field input:focus,.field select:focus,.field textarea:focus{ outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,104,0,.12)} .field textarea{min-height:130px;resize:vertical} /* ---------- Footer ---------- */ .footer{background:var(--navy);color:#fff;padding:66px 0 40px} .footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px} .footer h4{font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.6px; text-transform:none;color:var(--orange);margin-bottom:18px} .footer ul{list-style:none;margin:0;padding:0} .footer li{margin-bottom:12px} .footer a{font-size:15px;color:rgba(255,255,255,.9);transition:var(--t)} .footer a:hover{color:var(--orange)} .footer__tag{font-size:15px;color:rgba(255,255,255,.9);margin:16px 0 18px;max-width:280px} .footer__contact a{display:block;color:var(--orange);font-size:15px;margin-bottom:8px} .social{display:flex;gap:10px;margin-top:20px} .social a{width:34px;height:34px;border-radius:7px;background:var(--orange); display:flex;align-items:center;justify-content:center;transition:var(--t)} .social a:hover{background:#fff} .social svg{width:17px;height:17px;fill:var(--navy)} .footer__bottom{margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14); display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px; color:rgba(255,255,255,.6)} .legal{color:rgba(255,255,255,.55);font-size:13px} /* ---------- 滚动入场 ---------- 默认可见（无 JS / JS 出错时内容照样能看）； 只在 存在时才启用初始隐藏状态。 */ .reveal{transition:opacity .7s ease,transform .7s ease} html.anim .reveal{opacity:0;transform:translateY(22px)} html.anim .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html.anim .reveal{opacity:1;transform:none;transition:none} } /* ---------- 工具类 ---------- */ .tagline{color:#fff;font-size:28px;line-height:1.25;font-family:var(--display);font-weight:600; font-stretch:112%;letter-spacing:1.5px;text-align:center;margin:0} .mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px} .mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px} .mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-40{margin-bottom:40px} .maxw-475{max-width:475px}.maxw-620{max-width:620px}.maxw-720{max-width:720px} .mx-auto{margin-left:auto;margin-right:auto} .row-between{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .eyebrow{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-2);font-weight:500} /* ---------- 响应式 ---------- */ @media (max-width:1100px){ .wrap,.nav__inner,.hero__inner{padding-left:24px;padding-right:24px} .grid--4{grid-template-columns:repeat(2,1fr)} .footer__grid{grid-template-columns:1fr 1fr;gap:36px} .split,.split--media{grid-template-columns:1fr;gap:36px} .viewer{grid-template-columns:1fr} .h-sec{font-size:36px} .cta h2{font-size:36px} } @media (max-width:820px){ .nav__menu{ position:fixed;inset:63px 0 0 0;background:#fff;flex-direction:column;align-items:stretch; gap:0;padding:16px 24px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease; } .nav__menu.open{transform:none} .nav__link{padding:18px 0;border-bottom:1px solid var(--line);justify-content:space-between;font-size:15px} .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none; border:0;padding:0 0 10px 12px;min-width:0;display:none} .nav__item.open .dropdown{display:block} .nav__toggle{display:block} .nav__cta{display:none} .grid--2,.grid--3,.grid--2x3,.form-grid{grid-template-columns:1fr} .stats{grid-template-columns:1fr;gap:34px} .h-sec{font-size:30px} .h-card,.usecase h3,.model-card h3{font-size:24px} .hero__inner{min-height:420px;padding-top:56px;padding-bottom:56px} .hero-card,.hero-card--wide{width:100%;padding:24px} .hero-card h1,.hero-card .hero-card__title{font-size:30px} .marquee span{font-size:34px} .video__logo span{font-size:34px} .cta__wm{width:260px;right:-70px;bottom:-50px} .section{padding:70px 0} .section--sm{padding:56px 0} .footer__grid{grid-template-columns:1fr} } /* ========================================================================== WordPress 适配层 —— 让核心区块、编辑器内容、后台工具条与本站设计语言一致 ========================================================================== */ /* 无障碍：屏幕阅读器专用文本（WP 主题规范要求） */ .screen-reader-text{ border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px; overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important; } .screen-reader-text:focus{ background:#fff;clip:auto!important;clip-path:none;color:var(--navy);display:block; font-size:14px;font-weight:600;height:auto;left:16px;line-height:normal;padding:14px 20px; text-decoration:none;top:16px;width:auto;z-index:100000;border-radius:8px; box-shadow:0 8px 28px rgba(0,33,54,.2); } .skip-link{position:absolute;left:-9999px} /* 登录状态下的后台工具条，避免压住吸顶导航 */ body.admin-bar .nav{top:32px} body.admin-bar .nav__menu{top:95px} @media screen and (max-width:782px){ body.admin-bar .nav{top:46px} body.admin-bar .nav__menu{inset:109px 0 0 0} } /* ---------- 文章 / 页面正文（the_content 输出） ---------- */ .entry-content{font-size:17px;line-height:1.7;color:var(--ink)} .entry-content > *{margin-bottom:1.2em} .entry-content > *:last-child{margin-bottom:0} .entry-content h2{margin-top:1.6em;font-size:32px} .entry-content h3{margin-top:1.4em;font-size:24px} .entry-content h4{margin-top:1.3em;font-size:20px} .entry-content ul,.entry-content ol{padding-left:24px} .entry-content li{margin-bottom:.5em} .entry-content a{color:var(--orange);text-decoration:underline;text-underline-offset:3px} .entry-content img,.entry-content iframe,.entry-content video{border-radius:var(--radius);max-width:100%} .entry-content blockquote{ border-left:3px solid var(--orange);margin:1.6em 0;padding:6px 0 6px 24px; font-size:20px;line-height:1.5;color:var(--navy); } .entry-content table{width:100%;border-collapse:collapse;font-size:15px} .entry-content table th,.entry-content table td{border:1px solid var(--line);padding:12px 14px;text-align:left} .entry-content table th{background:var(--beige);font-weight:600;color:var(--navy)} .entry-content code{background:var(--light);padding:2px 6px;border-radius:4px;font-size:.92em} .entry-content pre{background:var(--navy);color:#fff;padding:20px;border-radius:var(--radius);overflow:auto} /* ---------- 核心区块适配 ---------- */ .wp-block-button__link{ background:var(--orange);color:#fff;border-radius:var(--pill); padding:16px 32px;font-family:var(--body);font-size:13px;font-weight:600; letter-spacing:1px;text-transform:uppercase;transition:var(--t); } .wp-block-button__link:hover{background:var(--orange-dark);transform:translateY(-2px)} .wp-block-button.is-style-outline .wp-block-button__link{ background:transparent;color:var(--navy);border:1.5px solid var(--navy); } .wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--navy);color:#fff} .wp-block-buttons{gap:14px} .wp-block-image img{border-radius:var(--radius)} .wp-block-columns{gap:24px} .wp-block-group.has-background{border-radius:var(--radius);padding:24px} .wp-block-separator{border:0;border-top:1px solid var(--line);margin:32px 0} .wp-block-quote{border-left:3px solid var(--orange);padding-left:24px;margin:32px 0} /* 站点级卡片/区块类，套在核心区块上时不要被核心默认间距破坏 */ .card.wp-block-group,.feature.wp-block-group,.usecase.wp-block-group, .model-card.wp-block-group,.spec-pill.wp-block-group{ box-sizing:border-box; } .card.wp-block-group > *:last-child,.feature.wp-block-group > *:last-child, .model-card.wp-block-group > *:last-child{margin-bottom:0} /* ---------- 归档 / 博客列表 ---------- */ .page-head{padding:64px 0 8px} .page-head h1{font-size:44px} .page-head .eyebrow{margin-bottom:10px} .archive-loop{padding:48px 0 110px} .archive-loop .grid{grid-template-columns:repeat(3,1fr)} .post-card{ background:var(--beige);border-radius:var(--radius);padding:24px; display:flex;flex-direction:column;transition:transform .3s ease; } .post-card:hover{transform:translateY(-4px)} .post-card__media{border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:var(--beige-2); margin-bottom:18px;display:block} .post-card__media img{width:100%;height:100%;object-fit:cover} .post-card h3{font-size:22px;line-height:1.25;margin-bottom:10px} .post-card h3 a:hover{color:var(--orange)} .post-card p{font-size:15px;line-height:1.55;color:var(--navy);margin-bottom:16px;flex:1} .post-card .meta{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px} /* 分页 */ .pagination{display:flex;gap:8px;justify-content:center;margin-top:56px;flex-wrap:wrap} .pagination .page-numbers{ min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:0 14px; font-size:14px;color:var(--navy);transition:var(--t); } .pagination .page-numbers:hover{border-color:var(--navy)} .pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff} /* ---------- 表单反馈 ---------- */ .form-note{margin-top:14px;font-size:14px;line-height:1.6} .form-note.is-ok{color:var(--green)} .form-note.is-error{color:#b3261e} .field .required{color:var(--orange)} .notice{ background:var(--beige);border-left:3px solid var(--orange);border-radius:var(--radius-sm); padding:18px 20px;font-size:15px;color:var(--navy);margin-bottom:24px; } /* 蜜罐 + 无障碍隐藏（防垃圾询盘） */ .hp-field{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden} /* ---------- 兼容：无 JS 时汉堡菜单不挡内容 ---------- */ .no-js .nav__toggle{display:none} /* ---------- 打印 ---------- */ @media print{ .nav,.cta,.footer,.nav__toggle{display:none!important} body{color:#000} } /* ========================================================================== 主题补充层 —— WordPress 动态输出需要的、静态站没有的样式 ========================================================================== */ /* ---------- 站头 / 页脚：品牌与 WP 菜单状态 ---------- */ .brand--footer .brand__text{color:#fff} .brand--footer .brand__text em{color:var(--orange)} .nav__item.current-menu-item>.nav__link, .nav__item.current-menu-ancestor>.nav__link, .nav__item.current_page_item>.nav__link{color:var(--orange)} .footer__contact .legal{display:block;margin-bottom:6px} .footer__col{min-width:0} /* ---------- 面包屑 ---------- */ .breadcrumb{background:var(--light);border-bottom:1px solid var(--line);font-size:13px} .breadcrumb .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding-top:14px;padding-bottom:14px;color:var(--ink-2)} .breadcrumb a{color:var(--ink-2)} .breadcrumb a:hover{color:var(--orange)} .breadcrumb span[aria-current]{color:var(--navy);font-weight:500} /* ---------- 内页页头（WP 动态标题用） ---------- */ .page-head{padding:56px 0 8px} .page-head h1{font-family:var(--display);font-weight:600;font-stretch:112%; font-size:44px;line-height:1.15;letter-spacing:-.4px;color:var(--navy);margin:0 0 14px} .page-head .lead{max-width:720px} /* ---------- 内容容器（page.php / single.php 用） ---------- */ .entry-wrap{max-width:840px;margin:0 auto;padding:0 36px 80px} @media (max-width:1100px){.entry-wrap{padding-left:24px;padding-right:24px}} .entry-head{padding:56px 0 24px} .entry-head h1{font-family:var(--display);font-weight:600;font-stretch:112%; font-size:44px;line-height:1.15;letter-spacing:-.4px;color:var(--navy);margin:0 0 14px} .entry-meta{font-size:13px;color:var(--ink-2);margin-bottom:24px} .entry-thumb{margin:0 0 36px;border-radius:var(--radius);overflow:hidden} .entry-thumb img{width:100%;height:auto;display:block} /* ---------- 规格表（产品页用） ---------- */ .spec-table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 28px} .spec-table th,.spec-table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left} .spec-table th{width:34%;font-weight:600;color:var(--navy);background:var(--light)} .spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0} .spec-table td{color:var(--ink)} .spec-cap{font-size:13px;color:var(--ink-2);margin-top:-16px} /* ---------- 询盘表单：提交中 / 成功卡 ---------- */ form[data-inquiry].is-busy{opacity:.65;pointer-events:none} .form-success{ background:var(--beige);border:1px solid var(--line);border-left:4px solid var(--green); border-radius:var(--radius-sm);padding:28px 30px; } .form-success h3{color:var(--navy);margin:0 0 10px} .form-success p{margin:0;color:var(--ink)} .btn.is-busy{opacity:.7;pointer-events:none} .form-grid__full{grid-column:1/-1} /* ---------- 模板补充：表单卡 / 标签 / 规格胶囊 / 列表 ---------- */ /* 询盘表单外层白卡 */ .form-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:44px 48px;box-shadow:0 18px 50px rgba(0,33,54,.06);max-width:920px; } @media (max-width:820px){.form-card{padding:28px 22px}} .form-card h2{text-align:center} .inquiry .form-grid{max-width:none} .field--full{grid-column:1/-1} /* * 白底描边标签（About 页工艺步骤用）。 * 等价于静态基准站写在这些 上的 inline style，舍掉它每格会矮 1px。 */ .tag--outline{background:#fff;border:1px solid var(--line)} /* * 工艺检验清单：等价于静态基准站在该