/* ============================================================ SZKARE — Shared Styles 全局样式：变量 / 字体 / 重置 / 导航 / 页脚 / 通用组件 / Hero / 卡片等 原 HTML 模板的 shared.css + 首页 inline 样式合并而来 ============================================================ */ /* ===== v1.4.6 a11y: skip link + screen-reader-text（跟 WP 官方 twentytwentyx 主题同款）===== .skip-link 默认藏起，键盘 Tab 到时定位左上角浮出 — WCAG 2.4.1 Bypass Blocks */ .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, .skip-link:focus { background-color: var(--paper, #FAFBFA); color: var(--jade-ink, #042522); clip: auto !important; clip-path: none; display: block; font-size: 14px; font-weight: 700; height: auto; left: 8px; line-height: normal; padding: 14px 22px; text-decoration: underline; top: 8px; width: auto; z-index: 100000; box-shadow: 0 2px 6px rgba(0,0,0,.15); } :root{ /* ===== Imperial Jade tokens（与 imperial-jade.css 对齐；这层是主信号） ===== */ --jade:#0B4A42; --jade-deep:#06332D; --jade-ink:#042522; --jade-br:#1A8C72; --jade-mist:#E7F0EC; --jade-mist2:#F2F6F4; --amber:#F5A623; --amber-d:#D88C0A; --paper:#FAFBFA; --serif:'Fraunces', serif; /* ===== karewash 兼容别名 → 重映射到 Imperial Jade ===== widgets/* 与历史 shared.css 规则都通过这些别名读色。 改这一层就能让继承自 karewash 的视觉换肤，不用碰每个 widget。 */ --bg:#FAFBFA; /* was var(--paper) cream → paper */ --bg-2:#F2F6F4; /* was var(--jade-mist2) → jade-mist2 */ --ink:#10211D; /* was #111110 → 带绿调的近黑 */ --ink-dim:#3D514B; /* was #5a554c → ink-2 muted teal */ --ink-mute:#74867F; /* was #9a948a → muted */ --line:#DCE6E1; /* was #e5e1d4 → 淡 teal */ --line-strong:#C2D2CB; /* was #c8c2b0 → 强 teal */ --accent:#F5A623; /* was var(--accent) industrial yellow → amber */ --accent-2:#D88C0A; /* was #D88C0A orange → amber-d */ --card:#FFFFFF; --card-hover:#F2F6F4; /* jade-mist2 */ --dark:#042522; /* was var(--jade-ink) near-black → jade-ink */ --success:#0a7d2a; --danger:#c0392b; } /* v0.9.5: 删了 karewash 老 body 全局规则。imperial-jade.css L36-44 的 body 是 szkare-html 原版（var(--body) Instrument Sans + font-size:16px + line-height:1.6 + 干净 paper 底）。 旧的 shared.css body{ } 漏 font-size/line-height（导致行距塌陷文字挤紧）+ 强加 radial-gradient 双色渐变 + body::before SVG 噪点 grain overlay（fixed 全屏 35% opacity 杂质感），完全偏离 szkare-html 干净简洁的设计稿。 现在删了让 imperial-jade.css 独占 body 权威。 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} ← 同样在 imperial-jade.css L34 有定义，shared.css 这层冗余但不冲突，保留兼容。 */ a{color:inherit;text-decoration:none} img{max-width:100%;display:block;height:auto} ::selection{background:var(--accent);color:var(--ink)} /* v0.1.109: WP 标准 a11y 工具类 — 视觉隐藏但 screen reader 可读 原本以为 WP 主题父级自带，实测 szkare 没定义；新加之前先 grep 过项目内仅模态相关用到 */ .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .screen-reader-text:focus{position:static;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal} /* ============ 顶部 Ticker Bar ============ */ .ticker-bar{ background:var(--jade-ink);color:var(--accent);padding:8px 0;overflow:hidden;position:relative;z-index:50; border-bottom:2px solid var(--accent); font-family:'DM Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em; } .ticker-track{display:flex;gap:60px;white-space:nowrap;animation:tick 40s linear infinite;width:max-content} .ticker-track span{display:flex;align-items:center;gap:14px} .ticker-track span::before{content:"●";color:var(--accent);font-size:8px} @keyframes tick{to{transform:translateX(-50%)}} /* ============ 导航 ============ v0.9.4：删了 karewash 时代 .nav / .logo / .logo-mark / .site-nav / .nav-cta / .nav-toggle / .lang 等 独立基础样式。这些 class 在 szkare-html 设计稿里都另有 imperial-jade.css 权威定义 （5 列 footer / .hero-cine / .nav-in 等），shared.css 旧版覆盖反而把 .foot 强制做成 4 列、 .nav 强制做成 jade-ink sticky 黑底 — 用户截图的"页脚错排"就是这层覆盖造成的。 保留 header.site-header 选择器只是兼容旧 widget；当前 header.php 用
，没用 .site-header。 .mobile-nav-extras / .nav-toggle 是 karewash 时代手机端 burger 配合的 class，szkare-html 用 .nav-burger 不需要这些。 ============ */ /* ============ 多语言切换器（顶部导航 EN 按钮的下拉菜单版本） ============ */ .lang-switcher{position:relative;display:inline-block} .lang-toggle{ display:inline-flex;align-items:center;gap:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.85); padding:6px 10px; border-radius:2px; font-family:'DM Mono',monospace; font-size:11px;font-weight:700;letter-spacing:.06em; cursor:pointer; transition:all .18s; } .lang-toggle:hover{ background:rgba(245,166,35,.12); border-color:var(--accent); color:#fff; } .lang-toggle .lang-flag{font-size:14px;line-height:1} .lang-toggle svg{transition:transform .2s;flex-shrink:0} .lang-switcher.is-open .lang-toggle{ background:var(--accent); border-color:var(--accent); color:var(--ink); } .lang-switcher.is-open .lang-toggle svg{transform:rotate(180deg)} .lang-dropdown{ position:absolute; top:calc(100% + 8px); right:0; min-width:200px; max-height:340px;overflow-y:auto; background:var(--jade-ink); border:1px solid var(--accent); list-style:none; padding:6px 0; margin:0; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s,transform .15s,visibility .15s; z-index:100; box-shadow:6px 6px 0 var(--accent); } .lang-switcher.is-open .lang-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .lang-option{ display:flex; align-items:center; gap:10px; padding:9px 14px; color:rgba(255,255,255,.7); font-family:'DM Mono',monospace; font-size:11px;font-weight:600;letter-spacing:.04em; transition:all .15s; border-left:2px solid transparent; text-decoration:none; } .lang-option:hover{ background:rgba(245,166,35,.1); color:var(--accent); border-left-color:var(--accent); } .lang-option.is-current{ color:var(--accent); background:rgba(245,166,35,.06); font-weight:700; } .lang-option .lang-flag{font-size:16px;line-height:1;flex-shrink:0} .lang-option .lang-native{flex:1;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500} .lang-option .lang-code{ color:rgba(255,255,255,.4); font-size:10px; letter-spacing:.08em; } .lang-option.is-current .lang-code{color:var(--accent)} .btn-quote{ background:var(--accent);color:var(--ink);padding:11px 20px;font-weight:700;font-size:13px;letter-spacing:.04em; border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .2s; clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); display:inline-block;text-decoration:none; } .btn-quote:hover{background:#fff;color:var(--ink);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--accent)} /* v0.9.5：删了 karewash 的 .btn-primary / .btn-secondary / .btn-yellow / .btn-amber 通用按钮（大写 uppercase 块状）。 szkare-html .btn 设计完全不同（imperial-jade.css 定义了 .btn / .btn-amber / .btn-line / .btn-white 全套， 小写圆角现代风），shared.css 旧版覆盖把所有 .btn-amber 都做成 karewash 大写块状了。 */ /* v0.9.5：删了 karewash 整段 HERO 区 CSS（.hero-wrap / .hero-wrap::before / .hero-wrap::after / .hero / .hero-grid / .hero-meta / .hero-meta .dot / @keyframes pulse / .hero h1 / .hero h1 .sub / .hero h1 em / .hero-right / .hero-right p / .hero-right p strong / .stats / .stat / .stat-num / .stat-label / .hero-cta / .hero-deco / .hero-stamp / .hero-stamp::before / .hero-stamp strong / .hero .btn-primary）。 v0.9.0 sz_hero widget 已重写为 szkare-html `.hero-cine` 结构（imperial-jade.css L185-265 定义全套）， 旧 `.hero / .hero-grid / .hero-stamp` markup 已不再渲染；老 CSS 也不需要了。 */ /* ============ 通用 Section Head ============ */ .section-head{max-width:1480px;margin:0 auto;padding:120px 40px 60px;display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:end;position:relative;z-index:2} .section-label{font-family:'DM Mono',monospace;font-size:11px;color:var(--ink);letter-spacing:.2em;display:flex;align-items:center;gap:10px;background:var(--accent);padding:6px 12px;align-self:start} .section-label::before{content:"";width:18px;height:1px;background:var(--jade-ink)} .section-head h2{font-family:'Familjen Grotesk',sans-serif;font-size:clamp(40px,5vw,72px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)} .section-head h2 em{font-style:normal;color:var(--ink);background:var(--accent);padding:.02em .12em .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone} .section-head h2 .sub{ display:block;font-family:'DM Mono',monospace;font-weight:500; font-size:.18em;color:var(--ink-dim); margin-top:24px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;max-width:520px; padding-left:24px;border-left:2px solid var(--accent); } .section-head .head-meta{text-align:right;font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-dim);line-height:1.8} /* ============ 跑马灯（黄字描边） ============ */ .marquee-wrap{ border-top:2px solid var(--accent);border-bottom:2px solid var(--accent); background:var(--jade-ink); overflow:hidden;padding:28px 0;position:relative;z-index:2; } .marquee{display:flex;gap:60px;white-space:nowrap;animation:slide 50s linear infinite;width:max-content;font-family:'Familjen Grotesk',sans-serif;font-size:42px;text-transform:uppercase;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px var(--accent)} .marquee span{display:flex;align-items:center;gap:60px} .marquee span::after{content:"✦";color:var(--accent);-webkit-text-stroke:0;font-size:24px} @keyframes slide{to{transform:translateX(-50%)}} /* ============ 面包屑 ============ */ .breadcrumb{ max-width:1480px;margin:0 auto;padding:32px 40px 0;font-family:'DM Mono',monospace; font-size:11px;letter-spacing:.08em;color:var(--ink-dim);text-transform:uppercase; position:relative;z-index:2; } .breadcrumb a{color:var(--ink-dim);transition:color .2s} .breadcrumb a:hover{color:var(--ink)} .breadcrumb .sep{margin:0 10px;color:var(--ink-mute)} .breadcrumb .current{color:var(--ink);font-weight:700} /* ============ 通用页面 Hero（小尺寸 - 子页面用） ============ */ /* ============ FOOTER ============ */ footer.site-footer{background:var(--jade-ink);color:#fff;padding:80px 40px 40px;position:relative;z-index:2} /* v0.9.4：删了 karewash 时代 .foot / .foot-brand / .foot-col / .foot-bottom 旧定义。 szkare-html .foot 是普通 footer（无 grid），.foot-top 才是 grid 5 列 (1.6fr 1fr 1fr 1fr 1.2fr) — 旧 .foot{display:grid; grid-template-columns:2fr 1fr 1fr 1fr} 直接覆盖 imperial-jade.css 的 5 列 .foot-top， 导致用户截图里 footer 4 列挤成一坨 + 文字换行错乱。.foot-brand / .foot-col 是 karewash 用过的 class， szkare-html 用 .foot-about（已在 imperial-jade.css 定义）— 旧 class 留着也无害但删了更干净。 .foot-bottom 旧版用 max-width:1480px + gray text 跟新版 jade-ink 兼容容器布局冲突，已删。 */ /* v1.3.0 删了 .sz-cta-auto-wrap — auto-inject 路径已废，sz_cta widget 自带 margin 接管空气。 */ /* ── CTA 表单 flash 提示（提交后回跳显示） ── */ /* ============ 文章/页面正文（the_content） ============ */ .sz-article{max-width:880px;margin:0 auto;padding:80px 40px 120px;position:relative;z-index:2;font-size:16px;line-height:1.8;color:var(--ink)} /* ============ 产品/分类列表 archive 容器 ============ */ .sz-archive{max-width:1480px;margin:0 auto;padding:60px 40px 120px;position:relative;z-index:2} .sz-archive-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:0;padding:0} .sz-article h2{font-family:'Familjen Grotesk',sans-serif;font-size:36px;letter-spacing:-.02em;text-transform:uppercase;margin:48px 0 16px} .sz-article h3{font-family:'Familjen Grotesk',sans-serif;font-size:24px;text-transform:uppercase;margin:32px 0 12px} .sz-article p{margin-bottom:18px} .sz-article ul,.sz-article ol{margin:0 0 18px 20px} .sz-article a{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:1px} .sz-article a:hover{background:var(--accent);color:var(--ink)} /* ============ 入场动画 ============ */ @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} .animate-up{animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) backwards} .cat,.kit{animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) backwards} .cat-1{animation-delay:.05s}.cat-2{animation-delay:.1s}.cat-3{animation-delay:.15s} .cat-4{animation-delay:.2s}.cat-5{animation-delay:.25s}.cat-6{animation-delay:.3s} /* ============================================================ SZkare widgets — 与 szkare-html/index.html 同步 ============================================================ */ /* ---- 6 大分类卡片（Category Grid widget）—— v0.1.81: 全部 scope 到 .categories 父，避免跟 /products/ overview 的 .cat-grid 撞冲 ---- */ /* cursor:pointer 只对真链接生效（widget 没填 link 时渲染成
，避免误导） */ /* 6 个色板变体 */ /* signature 卡 widget 不渲染 .cat-icon / .cat-svg — 这两类规则在 cat-6 上无效，已删 */ /* hover：锁文字色不被通用 .cat:hover 覆盖 */ /* ---- Signature Kits（Kit Grid widget） ---- */ /* margin-top 交给 Elementor Container 的 gap / padding-top 控制 — 这里只管 widget 自己的内 padding */ .kit-inner{max-width:1480px;margin:0 auto;padding:0 40px;position:relative;z-index:2} /* 嵌入在 .kit-inner 内的 .section-head：去默认 padding（kit-inner 已有 40px 水平 padding + kit-section 100px 垂直），保留底部间距 */ .kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px} .kit{ /* v0.5.1: karewash 黑棕子层 → Imperial Jade 深 jade 子层 */ background:var(--jade-deep);border:1px solid rgba(255,255,255,.08);padding:40px 32px;position:relative;overflow:hidden; transition:all .3s;min-height:360px;display:flex;flex-direction:column; text-decoration:none;color:inherit; } a.kit{cursor:pointer} .kit:hover{border-color:var(--accent);transform:translateY(-6px);background:var(--jade-ink)} .kit-badge{ position:absolute;top:0;right:0;background:var(--accent);color:var(--ink);padding:6px 14px; font-family:'DM Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em; } .kit-num{font-family:'Familjen Grotesk',sans-serif;font-size:48px;color:rgba(255,255,255,.18);line-height:1;margin-bottom:24px} .kit h4{font-family:'Familjen Grotesk',sans-serif;font-size:22px;text-transform:uppercase;margin-bottom:6px;color:#fff;line-height:1.1} .kit h4 .sub{display:block;font-family:'Instrument Sans',sans-serif;font-size:13px;color:rgba(255,255,255,.5);font-weight:600;margin-top:8px;letter-spacing:.02em;text-transform:none} .kit p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.7;margin:18px 0;flex-grow:1} .kit p strong{color:var(--accent)} .kit-feature{display:flex;align-items:center;gap:10px;font-family:'DM Mono',monospace;font-size:11px;color:var(--accent);margin-top:auto;padding-top:16px;border-top:1px solid #2f2c27} .kit-feature::before{content:"▸"} /* ---- B2B Services（B2B Services widget） ---- */ /* margin-top 交给 Elementor Container；保留 max-width + 水平 padding 让内容居中 */ .b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start} .b2b-left h2{font-family:'Familjen Grotesk',sans-serif;font-size:clamp(48px,6vw,88px);line-height:1.2;text-transform:uppercase;letter-spacing:-.02em;color:var(--ink)} .b2b-left h2 em{ font-style:normal;color:var(--ink);background:var(--accent);padding:.02em .12em .08em; box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.2; } .b2b-left h2 .sub{ display:block;font-family:'DM Mono',monospace;font-weight:500;font-size:.16em;color:var(--ink-dim); margin-top:28px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7; max-width:520px;padding-left:24px;border-left:2px solid var(--accent); } .b2b-left p{font-size:15px;line-height:1.8;color:var(--ink-dim);margin-top:32px;max-width:480px} .b2b-services{display:grid;gap:0;border-top:2px solid var(--ink)} .service{ border-bottom:1px solid var(--line-strong);padding:28px 0;display:grid;grid-template-columns:60px 1fr auto;gap:20px; align-items:start;transition:all .3s; } /* hover 视觉强调（左偏移 + 淡黄渐变 + 文字加深 + 图标旋转）— 不加 cursor:pointer 因为 service 不可点击；只是「看到哪一项」的视觉反馈 */ .service:hover{padding-left:16px;background:linear-gradient(90deg,rgba(245,166,35,.1),transparent)} .service:hover .service-num{color:var(--ink)} .service-num{font-family:'DM Mono',monospace;font-size:12px;color:var(--ink-dim);padding-top:4px;letter-spacing:.1em;transition:color .3s} .service-body h4{font-size:18px;font-weight:700;margin-bottom:6px;color:var(--ink);line-height:1.3} .service-body h4 .sub{display:block;font-family:'Instrument Sans',sans-serif;font-size:12px;color:var(--ink-dim);font-weight:500;margin-top:4px} .service-body p{font-size:13px;color:var(--ink-dim);line-height:1.6;margin-top:10px} .service-icon{color:var(--ink-dim);transition:all .3s} .service:hover .service-icon{color:var(--ink);transform:rotate(45deg)} /* ---- Product Catalog（左 sticky 导航 + 右产品分组目录） ---- */ .detail-grid{ display:grid;grid-template-columns:280px 1fr;gap:60px; /* align-items:start 关键 — 防 grid 行被拉伸导致 sticky 失效 */ align-items:start; } .detail-nav{ position:sticky;top:100px;align-self:start; border-left:2px solid var(--ink);padding-left:24px; max-height:calc(100vh - 120px);overflow-y:auto;will-change:transform; } .detail-nav::-webkit-scrollbar{width:4px} .detail-nav::-webkit-scrollbar-track{background:transparent} .detail-nav::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:2px} .detail-nav-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-dim);letter-spacing:.15em;margin-bottom:20px} .detail-nav ul{list-style:none;padding:0;margin:0} .detail-nav li{border-bottom:1px solid var(--line);transition:all .2s} .detail-nav li:hover{padding-left:8px} .detail-nav li a{ display:flex;justify-content:space-between;align-items:center; padding:10px 0;font-size:13px;color:var(--ink);text-decoration:none; } .detail-nav li:hover a{color:var(--ink)} .detail-nav li span:last-child{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-dim)} /* scrollspy 当前可见分类高亮（IntersectionObserver 切换 .active） */ /* ▸ 必须放在第一个 span 内 — 直接挂 li::before 会被 a (display:flex) 推到独立行 */ .detail-nav li.active a{color:var(--ink);font-weight:700} .detail-nav li.active a span:first-child::before{content:"▸ ";color:var(--ink)} .detail-content{display:grid;gap:80px;min-width:0} .product-block{position:relative;scroll-margin-top:100px} .pb-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px;padding-bottom:20px;border-bottom:2px solid var(--ink);flex-wrap:wrap;gap:16px} .pb-head h3{font-family:'Familjen Grotesk',sans-serif;font-size:36px;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);line-height:1.1} .pb-head h3 .sub{display:block;font-family:'Instrument Sans',sans-serif;font-size:14px;color:var(--ink-dim);font-weight:600;margin-top:8px;letter-spacing:.02em;text-transform:none} .pb-id{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;background:var(--accent);color:var(--ink);padding:6px 10px;white-space:nowrap} /* v0.1.83: .prod widget (Product Catalog widget) 全部 scope 到 .prod-list 父，避免 .prod-icon/.prod-num/.prod-name 跟其他 widget 撞 */ .prod-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .prod-list .prod{ background:var(--card);border:1px solid var(--line);padding:24px;position:relative; transition:all .3s;text-decoration:none;color:inherit;display:block; } .prod-list a.prod{cursor:pointer} .prod-list .prod:hover{border-color:var(--ink);background:#fff;transform:translateY(-2px);box-shadow:4px 4px 0 var(--accent)} .prod-list .prod:hover .prod-arrow{opacity:1;transform:translateX(0)} .prod-list .prod-num{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-dim);margin-bottom:16px;letter-spacing:.1em} .prod-list .prod-icon{height:64px;margin-bottom:20px;display:flex;align-items:center} .prod-list .prod-icon svg{width:48px;height:48px;color:var(--ink-dim)} .prod-list .prod:hover .prod-icon svg{color:var(--ink)} .prod-list .prod-name{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:6px;color:var(--ink)} .prod-list .prod-spec{font-size:12px;color:var(--ink-dim);line-height:1.5} .prod-list .prod-arrow{ position:absolute;top:24px;right:24px;width:20px;height:20px;color:var(--ink); opacity:0;transform:translateX(-8px);transition:all .3s; } /* ============================================================ 产品列表页 / 详情页（archive-product / single-product） ============================================================ */ /* v0.1.83: 分类页 .cat-page — 全部 scope 对齐 HTML 模板 pages/category.html 原老 unscoped .cat-page / .filters / .filter-opt / .prod-card 已 scope 到 .cat-page 父 原老小卡 .prod-card 设计搬到 .related-grid 父独立（single-product.php 相关产品用） */ /* ---- SKU 列表页 .cat-page (HTML 模板 pages/category.html L219-268 对齐) ---- */ .cat-page{max-width:1480px;margin:0 auto;padding:0 40px;position:relative;z-index:2} .cat-page .cat-layout{display:grid;grid-template-columns:280px 1fr;gap:60px;margin-top:60px;align-items:start} /* 左侧筛选 sidebar */ .cat-page .filters{position:sticky;top:100px;align-self:start;border-left:2px solid var(--ink);padding-left:24px;max-height:calc(100vh - 120px);overflow-y:auto} .cat-page .filters::-webkit-scrollbar{width:4px} .cat-page .filters::-webkit-scrollbar-thumb{background:var(--line-strong)} .cat-page .filter-group{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--line)} .cat-page .filter-group:last-of-type{border-bottom:none} .cat-page .filter-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink);letter-spacing:.15em;margin-bottom:14px;display:block;text-transform:uppercase;font-weight:700} .cat-page .filter-opt{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--ink);cursor:pointer;transition:color .2s} .cat-page .filter-opt:hover{color:var(--ink)} .cat-page .filter-opt input{accent-color:var(--accent);width:14px;height:14px;flex-shrink:0;cursor:pointer} .cat-page .filter-opt > span:not(.count){flex-grow:1} .cat-page .filter-opt .count{margin-left:auto;font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-dim);flex-shrink:0} .cat-page .filter-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px} /* 右侧 toolbar + 产品网格 */ .cat-page .cat-toolbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:2px solid var(--ink);margin-bottom:32px;flex-wrap:wrap;gap:16px} .cat-page .cat-toolbar-info{font-family:'DM Mono',monospace;font-size:12px;color:var(--ink-dim);letter-spacing:.06em} .cat-page .cat-toolbar-info strong{color:var(--ink)} .cat-page .cat-toolbar-right{display:flex;gap:14px;align-items:center} .cat-page .cat-toolbar-right form{margin:0} /* v0.1.87: sort form 默认 margin 清掉，原 markup 用 inline style */ .cat-page .sort-select{font-family:'DM Mono',monospace;font-size:12px;padding:10px 14px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);letter-spacing:.04em;cursor:pointer} .cat-page .sort-select:focus{outline:none;border-color:var(--ink)} /* v1.4.6 a11y: 键盘 Tab 焦点兜底（WCAG 2.4.7 Focus Visible）— 鼠标 focus 不显 ring，键盘 focus 显 */ .cat-page .sort-select:focus-visible{outline:2px solid var(--amber);outline-offset:2px} .cat-page .sz-empty-state{font-size:14px;color:var(--ink-dim);text-align:center;padding:60px 20px} /* v0.1.87: have_posts() else 分支用，原 markup 用 inline style */ .cat-page .products-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .cat-page .prod-card{background:var(--card);border:1px solid var(--line);padding:28px 24px;position:relative;transition:all .3s;cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column} .cat-page .prod-card:hover{border-color:var(--ink);background:#fff;transform:translateY(-2px);box-shadow:4px 4px 0 var(--accent)} .cat-page .prod-sku{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-dim);letter-spacing:.1em;margin-bottom:18px} .cat-page .prod-card .prod-icon{height:140px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);margin:0 -24px 20px;border-bottom:1px solid var(--line);overflow:hidden} .cat-page .prod-card:hover .prod-icon{background:var(--bg)} .cat-page .prod-card .prod-icon svg{width:80px;height:80px;color:var(--ink-dim)} .cat-page .prod-card .prod-icon img{max-width:100%;max-height:100%;object-fit:contain;display:block;padding:10px} .cat-page .prod-card:hover .prod-icon svg{color:var(--ink)} .cat-page .prod-card h3{font-size:16px;font-weight:700;line-height:1.4;margin-bottom:8px;color:var(--ink);font-family:'Instrument Sans',sans-serif;text-transform:none;letter-spacing:0} .cat-page .prod-card .prod-desc{font-size:12px;color:var(--ink-dim);line-height:1.5;margin-bottom:16px;flex-grow:1} .cat-page .prod-card .prod-meta{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap} .cat-page .prod-card .meta{font-family:'DM Mono',monospace;font-size:9px;color:var(--ink);padding:3px 8px;border:1px solid var(--line-strong);letter-spacing:.05em;background:var(--bg)} .cat-page .prod-card .prod-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--line);font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-dim)} .cat-page .prod-card .prod-foot strong{color:var(--ink)} .cat-page .prod-card .prod-foot .arrow{color:var(--ink-dim);transition:all .3s} .cat-page .prod-card:hover .prod-foot .arrow{color:var(--ink);transform:translateX(4px)} /* v0.1.89 A5: single-product.php 相关产品 — 改成 .related 父 + 4 列 .related-grid + 简化卡（HTML 模板 pages/product-detail.html L282-287 对齐） 旧 .related-grid-section / .related-grid .prod-card 多字段卡设计已删（markup 不再用） */ .related .prod-card{background:var(--card);border:1px solid var(--line);padding:24px;text-decoration:none;color:inherit;transition:all .3s;cursor:pointer;display:flex;flex-direction:column} .related .prod-card:hover{border-color:var(--ink);box-shadow:4px 4px 0 var(--accent)} .related .prod-card .pi{height:120px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);margin:0 -24px 16px;border-bottom:1px solid var(--line);overflow:hidden} .related .prod-card .pi svg{width:60px;height:60px;color:var(--ink-dim)} .related .prod-card .pi img{max-width:100%;max-height:100%;object-fit:contain;display:block;padding:10px} .related .prod-card .prod-sku{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-dim);letter-spacing:.1em;margin-bottom:6px} /* v0.1.101 D10 */ .related .prod-card h3{font-size:15px;font-weight:700;line-height:1.4;color:var(--ink);font-family:'Instrument Sans',sans-serif;text-transform:none;letter-spacing:0;margin-bottom:6px} /* v0.1.101: 15px 对齐 HTML 模板 L513 inline style */ .related .prod-card .prod-desc{font-size:12px;color:var(--ink-dim);line-height:1.5} /* ---- pagination ---- */ .pagination{display:flex;justify-content:center;gap:8px;margin-top:48px;font-family:'DM Mono',monospace;font-size:12px} .pagination a,.pagination span{display:grid;place-items:center;min-width:36px;height:36px;padding:0 12px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);text-decoration:none;letter-spacing:.04em;transition:all .2s} .pagination a:hover{border-color:var(--ink);background:var(--accent);color:var(--ink)} .pagination .current{border-color:var(--ink);background:var(--jade-ink);color:var(--accent);font-weight:700} .pagination .dots{border:none;background:transparent} /* ============================================================ 产品列表 v0.1.77 — CATEGORY OVERVIEW (/products/) 对齐 szkare-html/pages/products.html 设计： · feature-bar 4 列 stats（上下黑边框） · section-head 3 列（label / h2+sub / head-meta 右上时间戳） · cat-grid 12 列不对称：cat-1=7 + cat-2=5 / cat-3=4 + cat-4=4 + cat-5=4 / cat-6=12 全宽黑底 · 卡：cat-num 黑黑Archivo 13px + 右上 cat-arrow SVG + 大横向 cat-icon SVG(200x120) + h3 含 sub + desc + cat-tags + 右下绝对定位 cat-count ============================================================ */ /* feature-bar — 4 列 stats */ .feature-bar{max-width:1480px;margin:60px auto 0;padding:0 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);position:relative;z-index:2} .feature{padding:32px 24px;border-right:1px solid var(--line-strong);display:flex;flex-direction:column;gap:10px} .feature:last-child{border-right:none} .feature-num{font-family:'Familjen Grotesk',sans-serif;font-size:36px;line-height:1;color:var(--ink)} .feature-num span{color:var(--accent)} .feature-label{font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase} .feature-desc{font-size:13px;color:var(--ink-dim);line-height:1.6;margin-top:6px} /* section-head — 3 列（label / h2+sub / head-meta） */ .section-head{max-width:1480px;margin:0 auto;padding:120px 40px 60px;display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:end;position:relative;z-index:2} .section-label{font-family:'DM Mono',monospace;font-size:11px;color:var(--ink);letter-spacing:.2em;display:flex;align-items:center;gap:10px;background:var(--accent);padding:6px 12px;align-self:start} .section-label::before{content:"";width:18px;height:1px;background:var(--jade-ink)} .section-head h2{font-family:'Familjen Grotesk',sans-serif;font-size:clamp(40px,5vw,72px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)} .section-head h2 em{font-style:normal;color:var(--ink);background:var(--accent);padding:.02em .12em .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone} .section-head h2 .sub{display:block;font-family:'DM Mono',monospace;font-weight:500;font-size:.18em;color:var(--ink-dim);margin-top:24px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;max-width:520px;padding-left:24px;border-left:2px solid var(--accent)} .section-head .head-meta{text-align:right;font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-dim);line-height:1.8} /* products-grid 容器 */ .products-grid{max-width:1480px;margin:0 auto;padding:0 40px;position:relative;z-index:2} /* cat-grid — 12 列不对称 grid */ .cat-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px} .cat{background:var(--card);border:1px solid var(--line);padding:36px 32px 32px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.2,.8,.2,1);cursor:pointer;display:flex;flex-direction:column;min-height:420px;text-decoration:none;color:inherit} .cat:hover{border-color:var(--ink);background:var(--card-hover,var(--paper));transform:translateY(-4px);box-shadow:8px 8px 0 var(--accent)} .cat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line-strong)} .cat:hover::before{background:var(--jade-ink)} .cat-num{font-family:'Familjen Grotesk',sans-serif;font-size:13px;color:var(--ink-dim);letter-spacing:.1em} .cat-arrow{position:absolute;top:32px;right:32px;width:32px;height:32px;color:var(--ink-dim);transition:all .3s} .cat:hover .cat-arrow{transform:translate(8px,-8px);color:var(--ink);background:var(--accent)} .cat-icon{margin:32px 0 28px;height:90px;display:flex;align-items:center} .cat-icon svg{width:100%;height:100%;color:var(--ink-dim);max-width:200px} .cat:hover .cat-icon svg{color:var(--ink)} .cat h3{font-family:'Familjen Grotesk',sans-serif;font-size:26px;line-height:1.1;text-transform:uppercase;margin-bottom:8px;color:var(--ink)} .cat h3 .sub{display:block;font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-dim);font-weight:500;margin-top:10px;letter-spacing:.06em;text-transform:uppercase} .cat-desc{font-size:13px;color:var(--ink-dim);line-height:1.7;margin:14px 0 20px;flex-grow:1} .cat-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto} .cat-tag{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink);padding:5px 10px;border:1px solid var(--line-strong);letter-spacing:.05em;background:var(--bg)} /* v0.9.6：删 .cat-count（karewash 老 cat-grid 卡上的右下角 sku 数文字定位）— imperial-jade.css 已定义 szkare-html .cat-count */ /* 12 列分布 */ .cat-1{grid-column:span 7;background:linear-gradient(135deg,#ffffff 0%,var(--paper) 60%)} .cat-2{grid-column:span 5} .cat-3,.cat-4,.cat-5{grid-column:span 4} .cat-6{grid-column:span 12;background:var(--dark,var(--jade-ink));border-color:var(--dark,var(--jade-ink));color:#fff;min-height:340px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:48px} .cat-6 .cat-num{color:var(--accent)} .cat-6 h3{color:#fff;font-size:42px;margin-top:24px} /* v0.1.87: margin-top 从 inline style 搬过来 */ .cat-6 h3 .sub{color:rgba(255,255,255,.6)} .cat-6 .cat-desc{color:rgba(255,255,255,.7);font-size:15px} /* v0.1.87: font-size 从 inline style 搬过来 */ .cat-6 .cat-tag{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)} .cat-6:hover{background:var(--jade-ink);box-shadow:8px 8px 0 var(--accent);border-color:var(--ink)} .cat-6:hover .cat-num{color:var(--accent)} .cat-6 .cat-arrow{position:static;display:inline-block;margin-top:24px;width:48px;height:48px;background:transparent;color:var(--accent)} .cat-6::before{background:var(--accent)} .cat-6 .cat-desc strong{color:#fff} /* v0.1.79 — 普通 strong 用白色（避免跟黑底 inverted 看不见） */ .cat-6 .cat-desc strong.cat-callout{color:var(--accent)} /* v0.1.79 — signature_callout 强调黄字 */ /* v0.1.81: 重复的 `.page-hero h1 em` 已删 — 规则在上方 L302 已定义 */ .chip-outline{display:inline-block;font-family:'DM Mono',monospace;font-size:9px;color:var(--ink-dim);padding:3px 8px;border:1px solid var(--line-strong);letter-spacing:.08em;text-transform:uppercase;background:transparent} /* ============================================================ 产品列表 v0.1.73 — SKU LIST (/product-category/*/) ============================================================ */ /* v0.1.83: .sku-* + .prod-card-v2 整套已删 — 重构成 .cat-page 命名空间对齐 HTML 模板 pages/category.html 保留 .btn-apply / .btn-clear（filter form 按钮，scope-free 通用） */ .btn-apply{background:var(--jade-ink);color:var(--accent);padding:12px;border:none;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;cursor:pointer;text-transform:uppercase;font-weight:700;transition:all .2s} .btn-apply:hover{background:var(--accent);color:var(--ink)} .btn-clear{display:inline-block;text-align:center;padding:10px;border:1px solid var(--line-strong);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--ink-dim);text-decoration:none;background:transparent;transition:all .2s} .btn-clear:hover{border-color:#c0392b;color:#c0392b} @media (max-width:1024px){ /* v0.1.83: .cat-page 响应式 */ .cat-page .cat-layout{grid-template-columns:1fr;gap:32px;margin-top:32px} .cat-page .filters{position:static;border-left:none;border-top:2px solid var(--ink);padding:24px 0 0;max-height:none;overflow:visible} .cat-page .products-list{grid-template-columns:repeat(2,1fr)} .cat-page .cat-toolbar{flex-direction:column;align-items:flex-start;gap:14px} } @media (max-width:640px){ .cat-page .products-list{grid-template-columns:1fr} } /* ============================================================ 产品详情页 .pd-* (single-product.php) ============================================================ */ .pd-section{max-width:1480px;margin:60px auto 0;padding:0 40px;position:relative;z-index:2} .pd-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start} .pd-gallery{position:sticky;top:100px} .pd-main-img{background:var(--card);border:1px solid var(--line);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative} .pd-main-img img{width:100%;height:100%;object-fit:contain;padding:40px} /* v0.1.102 #1: 主图区域细网格背景 — 对齐 HTML 模板 pages/product-detail.html L226 .pd-main-img::after */ .pd-main-img::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px),linear-gradient(90deg, rgba(0,0,0,.02) 1px, transparent 1px);background-size:40px 40px;pointer-events:none} .pd-badge{position:absolute;top:18px;left:18px;background:var(--accent);color:var(--ink);padding:6px 12px;font-family:'DM Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;z-index:2} .pd-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px} /* v0.1.90 B11: .pd-thumb 从
改