/* Theme Name: KMFURNILA v6 Theme URI: https://www.kmfurnila.com/ Description: KMFURNILA 家具品牌独立站主题。极简直角版式（参照 Anker 设计语言），黑白灰中性色系 + 小面积强调色，为家具类目优化的转化型设计。独立实现，不依赖任何父主题。 Author: KMFURNILA Version: 8.0.0 License: GNU General Public License v2 or later Text Domain: kmfurnila Tags: e-commerce, furniture, custom-colors, custom-menu, featured-images */ /* ========================================================================== 1. 设计令牌 ★★ 2026-10-07 第八轮「Anker 化」重定向 ★★ 参照 www.anker.com 实测规格（HTML 2.02MB + 主 CSS 940KB + Playwright 计算样式）重构： · 色彩：纯白底 + 冷灰阶（#f5f5f7 / #f1f3f5）+ 近黑正文（#1d1d1f） + 强调黑（#080a0f） · 按钮：★ 黑底白字直角（不再是彩色底）—— Anker 的「高级感」 有相当部分来自「不用彩色按钮」 · 圆角：全部 0（Anker 按钮/卡片/图片容器实测 border-radius:0px） · 阴影：全部去掉，用背景色差 + 1px 细线分隔 · 字体：单一无衬线 + 负字距；正文 14px/500，标题 700 · 强调色：降级为小面积点缀（标签/图标/勾选/星级），不再刷按钮底 令牌名全部保留（clay/pine 等名字不变，含义重定义）—— 40+ 处引用零改动，diff 最小化。 ========================================================================== */ :root { /* 移动端抽屉上沿（= 页头实测底边）。 由 assets/kmfurnila.js 的 initMobileNav → syncTop() 在运行时写入 documentElement 的内联样式覆盖此默认值；这里给一份静态回退， 保证 JS 未执行或执行前抽屉也不会盖住页头。 ★ 2026-10-08 第十轮：页头从「公告条 36 + 顶栏 64 + 搜索行 61 = 161px」 收敛为「公告条 34 + 顶栏 103 = 137px」，回退值同步下调。 */ --kmf-drawer-top: 137px; /* -------------------------------------------------------------------------- 强调色 —— ★ 第八轮：由「松柏绿」整体重指向 Anker 强调黑。 变更理由（2026-10-08 目检发现）： · 上一版只把按钮底色换成黑，但 pine 绿色仍在 50+ 处生效 —— hero 的 1-2 days / Free / 30 days 三个数字、链接 hover、 焦点环、已选变体边框、NEW 徽章、星级、勾选图标全是绿的， 与 Anker 全站「只黑/白/灰，无彩色」的观感直接冲突。 · 50+ 处逐个改 diff 太大且易漏，改为**令牌层重指向**： 令牌名不变（引用零改动），值从绿改为近黑 #1d1d1f。 链接 hover / 焦点环 / 选中态用黑，与 Anker 实测一致 （Anker 链接 hover 就是加深的黑，不用彩色）。 · NEW 徽章随之变黑底白字 —— 与 Anker 的黑色标签同形。 保留：--kmf-ok / --kmf-warn / --kmf-err 三个语义色独立，不受影响 （表单校验、库存告警等仍需可辨识的红/绿语义）。 -------------------------------------------------------------------------- */ --kmf-pine: #1d1d1f; /* Anker 正文黑（原 #1b5e4a 松柏绿） */ --kmf-pine-d: #080a0f; /* hover 加深 → Anker 强调黑 */ --kmf-pine-l: #424245; /* 次级 → Anker 次级灰 */ --kmf-pine-wash: #f1f3f5; /* 浅底 → Anker 瓷砖灰（原绿洗底 e9efec） */ /* 强调黑 —— 原「赤陶橘」槽位。Anker 全站 CTA / 大标题 / 徽章用 #080a0f（比正文更深更冷）。这里作为新的按钮底色与强调色。 */ --kmf-clay: #080a0f; --kmf-clay-d: #000000; --kmf-clay-l: #7db79f; --kmf-clay-wash: #f1f3f5; /* 大面积深色表面专用（公告条 / 类目墙 / 横幅 / 页脚） */ --kmf-ink-deep: #080a0f; /* 中性色 —— ★ 第八轮：对齐 Anker 冷灰阶 （原 #ffffff/#f4f5f4/#171a1c/#41474a/#737a7d） Anker 实测：正文 #1d1d1f、次级底 #f5f5f7 / #f1f3f5、 灰阶 accent-3..6 = #999/#888/#666/#444 */ --kmf-ink: #1d1d1f; --kmf-ink-2: #424245; --kmf-ink-3: #6e6e73; --kmf-line: #e8e8ed; --kmf-line-2: #d2d2d7; --kmf-bg: #ffffff; --kmf-bg-2: #f5f5f7; --kmf-surface: #ffffff; /* 新增：Anker 的「瓷砖底 / 次级按钮底」冷调浅灰 */ --kmf-tile: #f1f3f5; /* 语义色 */ --kmf-ok: #15803d; --kmf-warn: #b45309; --kmf-err: #b91c1c; --kmf-info: #1e5f8a; /* 字体 —— 单一无衬线家族（Anker 全站仅 MontForAnker 一种）。 本站用 Inter + 系统栈逼近其几何无衬线观感： 靠字重（正文 500、标题 700）与负字距制造「精密感」， 而非更换字体。 */ --kmf-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --kmf-font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kmf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ★ 字距 —— Anker 连正文都收紧（-0.32px / 14px ≈ -0.023em）， 标题更紧（-0.04em）。这是「精密感」的关键细节。 */ --kmf-ls-body: -0.011em; --kmf-ls-title: -0.032em; /* 尺度 —— Anker 内容区 1280px / 全宽叙事区 1440px。 本站沿用 1440 作为宽容器（与既有四/五轮宽屏成果一致）， 新增 1280 作为「内容型页面」（博客式正文、图文块）的窄档。 */ --kmf-wrap: 1440px; --kmf-wrap-wide: 1680px; --kmf-wrap-narrow: 760px; /* Anker 网格 gap 实测 12-16px（紧凑）/ 24px（常规） */ --kmf-gap: 24px; --kmf-pad: clamp(20px, 3.2vw, 44px); /* 圆角 —— ★ 第八轮：全面直角化（Anker 实测 border-radius: 0px）。 仅头像/胶囊标签等必要圆形另行处理。 */ --kmf-r-sm: 0px; --kmf-r: 0px; --kmf-r-lg: 0px; /* 阴影 —— ★ 第八轮：全部去掉（Anker 实测 box-shadow: none）。 层次靠背景色差（白 ↔ #f5f5f7）+ 1px 细线（#e8e8ed）表达。 保留变量名以兼容既有引用，值置为 none。 */ --kmf-shadow: none; --kmf-shadow-lg: none; /* 动效 */ --kmf-ease: cubic-bezier(.4, 0, .2, 1); --kmf-dur: .22s; } /* -------------------------------------------------------------------------- 1b. 旧令牌兼容层 -------------------------------------------------------------------------- 为什么需要：inc/ 下 7 个功能模块（nb-pdp / nb-variant-page / nb-seo / nb-geo / nb-search / nb-cart / nb-page-nav，合计约 8800 行）在输出 HTML 时 硬编码了 260+ 个 nb-* 类名，这些结构对应的是**已上线的商品详情页**， 每一处都经过实测校对，重命名风险远大于收益。 因此这里把旧令牌名映射到新设计系统：模块 HTML 不动，但它们读到的 颜色 / 圆角 / 阴影 / 字体全部跟随 :root 的当前语义 —— 第六轮起是「冷灰白中性 + 松柏绿强调 + 黑铬 CTA」的欧美零售语言。 换句话说 —— 结构复用，视觉全新。这正是「同功能、不同模板」的落点。 -------------------------------------------------------------------------- */ :root { /* 品牌色 */ --nb-primary: var(--kmf-pine); --nb-primary-d: var(--kmf-pine-d); --nb-primary-l: var(--kmf-pine-wash); --nb-accent: var(--kmf-clay); --nb-accent-d: var(--kmf-clay-d); /* 中性色 —— ★ 第八轮：对齐 Anker 冷灰阶 */ --nb-ink: #1d1d1f; --nb-ink-2: #333336; --nb-body: #424245; --nb-text: #424245; --nb-muted: #6e6e73; --nb-line: #e8e8ed; --nb-line-warm: #f1f3f5; --nb-soft: #f5f5f7; --nb-cream: #f5f5f7; /* 语义色 */ --nb-ok: #15803d; --nb-star: #d97706; /* 阴影 —— ★ 第八轮：全部去掉（Anker 实测 box-shadow: none）， 层次改由背景色差 + 1px 细线表达。变量名保留、值置 none。 */ --nb-sh-sm: none; --nb-sh-md: none; --nb-sh-lg: none; /* 圆角 —— ★ 第八轮：全面直角化（Anker 实测 0px） */ --nb-r-sm: 0px; --nb-r: 0px; --nb-r-lg: 0px; --nb-pill: 0px; /* 布局 */ --nb-wrap: 1280px; --nb-gutter: 24px; --nb-sec: 72px; --nb-card-ratio: 1 / 1; /* 字体 —— 标题衬线、正文 Inter，跨模块统一 */ --nb-font: var(--kmf-font-body); --nb-font-head: var(--kmf-font-head); /* 过渡 */ --nb-t: .22s cubic-bezier(.4, 0, .2, 1); } /* ========================================================================== 2. 基础重置 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--kmf-font-body); font-size: 15px; line-height: 1.65; color: var(--kmf-ink); background: var(--kmf-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--kmf-pine); text-decoration: none; transition: color var(--kmf-dur) var(--kmf-ease); } a:hover { color: var(--kmf-pine-l); } h1, h2, h3, h4, h5 { font-family: var(--kmf-font-head); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--kmf-ink); margin: 0 0 .6em; } h1 { font-size: clamp(30px, 4.2vw, 46px); } h2 { font-size: clamp(24px, 3vw, 34px); } h3 { font-size: clamp(19px, 2.2vw, 24px); } h4 { font-size: 17px; } p { margin: 0 0 1.1em; } ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--kmf-pine); outline-offset: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kmf-wrap { width: 100%; max-width: var(--kmf-wrap); margin: 0 auto; /* 横向内边距改为随视口缩放的变量：窄屏 20px 保证可读， 宽屏放到 44px，避免内容贴边显局促。 */ padding: 0 var(--kmf-pad); } /* 宽版容器：给需要「比正文更铺开」的区块用（通栏横幅、品牌故事等）。 */ .kmf-wrap-wide { max-width: var(--kmf-wrap-wide); } .kmf-wrap-narrow { max-width: var(--kmf-wrap-narrow); } /* ========================================================================== 3. 排版工具类 ========================================================================== */ .kmf-eyebrow { font-family: var(--kmf-font-body); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--kmf-clay); margin-bottom: 12px; } .kmf-lede { font-size: 17px; line-height: 1.7; color: var(--kmf-ink-2); } .kmf-divider { height: 1px; background: var(--kmf-line); border: 0; margin: 0; } .kmf-section { /* ★ 2026-10-07 第四轮：原为 clamp(48px, 7vw, 88px)。 88px 在 1440 视口下偏大，且 vw 系数导致 1920 下顶到上限、节奏失真。 改为「以视口宽度的 5.4% 为基准，480px 起跳、上限 96px」， 宽屏得到更舒展的分段感，窄屏不塌成一条。 */ padding: clamp(48px, 5.4vw, 96px) 0; } .kmf-section-tight { padding: clamp(32px, 4vw, 52px) 0; } /* ========================================================================== 4. 按钮 ★ 第八轮：按 Anker 实测规格重做。 · 主按钮 = 黑底白字（不再用彩色底）—— Anker 全站 CTA 均为 #080a0f · 圆角 0（Anker 实测 border-radius: 0px） · padding 11px 20px 10px、字 14px/700、高约 38px · 无阴影、无边框；悬停只轻微加深底色 · 强调色（松柏绿）降级为小面积点缀，不再用于按钮底 ========================================================================== */ .kmf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* Anker 实测 padding: 11px 20px 10px（下边少 1px 补偿视觉重心） */ padding: 11px 22px 10px; font-size: 14px; font-weight: 700; letter-spacing: -.005em; line-height: 1.35; border: 1px solid transparent; border-radius: 0; cursor: pointer; text-align: center; text-decoration: none; transition: background var(--kmf-dur) var(--kmf-ease), border-color var(--kmf-dur) var(--kmf-ease), color var(--kmf-dur) var(--kmf-ease), opacity var(--kmf-dur) var(--kmf-ease); } /* ★ 主按钮 —— Anker 式黑底白字直角 */ .kmf-btn-primary { background: var(--kmf-clay); border-color: var(--kmf-clay); color: #fff; } .kmf-btn-primary:hover { background: var(--kmf-clay-d); border-color: var(--kmf-clay-d); color: #fff; } /* 强调按钮（保留槽位；第八轮与主按钮同款，强调色不再刷按钮底） */ .kmf-btn-accent { background: var(--kmf-clay); border-color: var(--kmf-clay); color: #fff; } .kmf-btn-accent:hover { background: var(--kmf-clay-d); border-color: var(--kmf-clay-d); color: #fff; } /* ★ 次按钮 —— Anker 实测浅灰底 + 深字（#f5f6f7 / #1e2024） */ .kmf-btn-ghost { background: var(--kmf-tile); border-color: var(--kmf-tile); color: var(--kmf-ink); } .kmf-btn-ghost:hover { background: #e6e9eb; border-color: #e6e9eb; color: var(--kmf-ink); } /* 描边按钮 —— 用于浅色底上的第三层级动作 */ .kmf-btn-outline { background: transparent; border-color: var(--kmf-line-2); color: var(--kmf-ink); } .kmf-btn-outline:hover { background: var(--kmf-clay); border-color: var(--kmf-clay); color: #fff; } .kmf-btn-block { display: flex; width: 100%; } /* 大号：仅用于 hero 等需要更强存在感的场景，克制使用 */ .kmf-btn-lg { padding: 14px 28px 13px; font-size: 15px; } .kmf-btn-sm { padding: 8px 16px 7px; font-size: 13px; } .kmf-btn[disabled], .kmf-btn.is-disabled { opacity: .4; pointer-events: none; } /* ========================================================================== 5. 公告条 ========================================================================== */ .kmf-announce { /* ★ 第六轮：松柏绿 → 炭黑。欧美零售 promo bar 常规是黑/深灰。 */ background: var(--kmf-ink-deep); color: #fff; font-size: 12.5px; letter-spacing: .04em; text-align: center; padding: 0; /* ★ 可滚动提示：窄屏下顶条是横向滑动的，但原生滚动条已隐藏， 用户看不出「右边还有内容」。这里用一层右侧渐隐做视觉暗示。 渐隐层用 ::after 挂在 .kmf-announce 上（而非 .kmf-wrap 内部 —— 后者是滚动容器，放在里面会跟着内容一起滑走）。 pointer-events:none 保证不挡滑动与点击。 宽屏（≥783px）下内容不溢出，渐隐没有意义也会误导入， 因此在下方断点里关掉。 */ position: relative; } .kmf-announce::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(to right, rgba(21, 25, 27, 0), var(--kmf-ink-deep)); } @media (min-width: 783px) { .kmf-announce::after { display: none; } } /* ★★ 2026-10-07 重写：公告条由「文字自然换行」改为「flex 单行 + 横向滑动」★★ 改之前的实测数据（同一份 HTML，只变视口）： 1440px → 41px 高 / 1 行 834px → 65px 高 / 2 行 390px → 112px 高 / 4 行 360px → 130px 高 / 4 行（末项 "Support …" 自身还折了 2 行） 根因两条： 1. `.kmf-wrap` 是 display:block，4 个 `.kmf-announce-item`（inline-flex）靠行内流自然换行， 容器一窄就逐项往下掉；项内文字也还能再折，于是 360px 下变成 4 行 + 项内折行。 2. 每个 item 原来带 margin-inline:20px（左右各 20px），4 项在 350px 容器里光外边距就吃掉 160px。 改法： - 作用域限定在 `.kmf-announce .kmf-wrap`，不碰全站共用的 `.kmf-wrap`； - 改 flex，间距交给 gap（不再用 margin-inline），横向内边距按视口收窄； - 桌面 nowrap 居中平铺，窄屏 nowrap + overflow-x:auto 横向滑动 —— 高度恒为单行， 不再随视口变化，也不会出现项内二次折行。 - `-webkit-overflow-scrolling: touch` + 隐藏滚动条，移动端滑动更顺。 */ .kmf-announce .kmf-wrap { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 40px; max-width: none; padding: 9px 20px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .kmf-announce .kmf-wrap::-webkit-scrollbar { display: none; } .kmf-announce a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== 6. 站点头 ========================================================================== */ .kmf-header { background: var(--kmf-surface); border-bottom: 1px solid var(--kmf-line); position: sticky; top: 0; /* ★ 2026-10-07：200 → 950。移动端抽屉(.kmf-nav)是 z-index 900、遮罩 890。 页头若低于二者，汉堡按钮会被遮罩/抽屉盖住 —— 抽屉一打开就再也点不到关闭按钮， 是死锁式交互缺陷。页头提到 950 后：抽屉与遮罩均在其下， 抽屉从页头下沿展开、汉堡始终可点。 */ z-index: 950; } .kmf-header-inner { display: flex; align-items: center; gap: 24px; height: 68px; } .kmf-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-family: var(--kmf-font-head); font-size: 21px; font-weight: 700; letter-spacing: .06em; color: var(--kmf-ink); } .kmf-brand:hover { color: var(--kmf-pine); } .kmf-brand img { height: 32px; width: auto; } /* 主导航 ★ 2026-10-07：去掉 margin-left:auto —— 页头已改为三栏网格（.kmf-header-top）， 导航所在的是中间的 1fr 栏，用 justify-self:center 做视觉居中； 保留 margin-left:auto 会在网格里叠加出一段多余左侧空隙，故移除。 */ .kmf-nav { margin-left: 0; justify-self: center; min-width: 0; } .kmf-nav ul { display: flex; align-items: center; /* ★ 2026-10-07：原为 gap:26px。当时导航项 的 padding 是「22px 0」， 水平内边距为 0 —— 实测每个顶级项的点击热区只有文字宽度（「商店」仅 28px， WCAG 2.2 建议最小 24×24 已勉强，触屏上极易点错；F字间距靠 26px 空白硬撑）。 现改为「
  • 提供水平内边距 + gap 收窄」，热区变大而视觉间距不变。 */ gap: 4px; margin: 0; padding: 0; list-style: none; } .kmf-nav li { position: relative; } /* 点击热区：水平 12px 内边距（两侧共 24px 热区），配合 gap:4px 形成 32px 视觉间距 */ .kmf-nav > ul > li { padding: 0 12px; } .kmf-nav > ul > li > a { font-size: 14px; font-weight: 500; color: var(--kmf-ink-2); padding: 22px 0; display: block; position: relative; } /* 下划线严格贴合文字宽度（不含
  • 的水平内边距）， 所以 left/right 用 -0 而非继承 li 的 padding 区 */ .kmf-nav > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kmf-clay); transform: scaleX(0); transform-origin: left; transition: transform var(--kmf-dur) var(--kmf-ease); } .kmf-nav > ul > li > a:hover, .kmf-nav > ul > li.current-menu-item > a, .kmf-nav > ul > li.current-menu-parent > a { color: var(--kmf-pine); } .kmf-nav > ul > li > a:hover::after, .kmf-nav > ul > li.current-menu-item > a::after, .kmf-nav > ul > li.current-menu-parent > a::after { transform: scaleX(1); } /* 二级菜单 */ .kmf-nav ul.sub-menu { position: absolute; top: 100%; left: -12px; min-width: 210px; background: var(--kmf-surface); border: 1px solid var(--kmf-line); border-top: 2px solid var(--kmf-pine); padding: 6px 0; flex-direction: column; align-items: stretch; gap: 0; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all var(--kmf-dur) var(--kmf-ease); z-index: 210; } .kmf-nav li:hover > ul.sub-menu, .kmf-nav li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .kmf-nav ul.sub-menu li a { display: block; padding: 9px 16px; font-size: 13.5px; color: var(--kmf-ink-2); } .kmf-nav ul.sub-menu li a:hover { background: var(--kmf-pine-wash); color: var(--kmf-pine); } /* 三级菜单转为侧向展开 */ .kmf-nav ul.sub-menu ul.sub-menu { top: -6px; left: 100%; border-top: 1px solid var(--kmf-line); border-left: 1px solid var(--kmf-line); } /* 头部动作区 */ .kmf-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; justify-self: end; /* 三栏网格的第 3 栏，右对齐 */ } /* ★ 页头里的 Account / Help 链接（2026-10-07 修复） 问题：这两条链接复用了 .kmf-head-link 这个类名，而该类名是给「区块标题行的 更多链接」设计的（只剩 border-bottom 下划线、无 display:flex）。 放进页头后后果有两条： 1. SVG 图标与 文字是行内元素，没有 gap，图标与文字直接贴在一起甚至重叠； 2. 下划线（border-bottom）贴在整个链接盒底部，视觉上像一条游离的横线。 修法：在 .kmf-header-actions 作用域内重定义 —— flex 布局 + gap 6px + 内边距， 并把下划线改成 hover 时才出现（与导航项一致），不再常驻。 */ .kmf-header-actions .kmf-head-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 0; border-radius: var(--kmf-r); font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--kmf-ink-2); white-space: nowrap; transition: background var(--kmf-dur) var(--kmf-ease), color var(--kmf-dur) var(--kmf-ease); } .kmf-header-actions .kmf-head-link svg { width: 17px; height: 17px; flex-shrink: 0; } .kmf-header-actions .kmf-head-link:hover { background: var(--kmf-pine-wash); color: var(--kmf-pine); } /* 窄屏只留图标，去掉文字，避免与导航抢空间 */ @media (max-width: 1180px) { .kmf-header-actions .kmf-head-link span { display: none; } .kmf-header-actions .kmf-head-link { padding: 7px 8px; } } .kmf-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid transparent; border-radius: var(--kmf-r); background: transparent; color: var(--kmf-ink-2); cursor: pointer; transition: all var(--kmf-dur) var(--kmf-ease); } .kmf-icon-btn:hover { background: var(--kmf-pine-wash); color: var(--kmf-pine); } .kmf-icon-btn svg { width: 19px; height: 19px; } .kmf-cart-count { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--kmf-clay); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; border-radius: 9px; } /* 移动端菜单按钮 */ .kmf-burger { display: none; width: 38px; height: 38px; border: 1px solid var(--kmf-line); border-radius: var(--kmf-r); background: transparent; cursor: pointer; padding: 0; position: relative; } .kmf-burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--kmf-ink); transition: all var(--kmf-dur) var(--kmf-ease); } .kmf-burger span:nth-child(1) { top: 13px; } .kmf-burger span:nth-child(2) { top: 18px; } .kmf-burger span:nth-child(3) { top: 23px; } .kmf-burger.is-open span:nth-child(1) { top: 18px; transform: rotate(45deg); } .kmf-burger.is-open span:nth-child(2) { opacity: 0; } .kmf-burger.is-open span:nth-child(3) { top: 18px; transform: rotate(-45deg); } /* ========================================================================== 7. Hero ========================================================================== */ /* ★★ 2026-10-07 第四轮重构：Hero 由「容器内两栏」改为「满宽出血（full-bleed）」★★ 改之前的实测问题（1440px 视口）： 1. 右侧图片只占容器的一半左右，但 .kmf-hero 的背景色铺满整个视口宽 —— 图片右边缘到视口右边缘之间出现一大片空底色，两侧留白不对称。 2. 文案块与图片垂直居中对齐，但文案内容比图片矮很多， 结果 stats 指标条下方还有一大段空白，视觉重心上浮。 3. 整体被 1240px 容器箍住，1440 视口下两侧各留 100px，气势不足。 改法（现代宽屏电商常见做法）： - Hero 本身作为满宽舞台，内部用「左文案 + 右图」两栏； - 左文案通过 clamp 内边距贴齐全站容器左边界（与下方区块左边缘对齐）； - 右图突破容器、直接贴到视口右边缘，并撑满 hero 全高（object-fit: cover）； - 两栏高度对齐（stretch），文案区自身用 flex 纵向分布， 让 eyebrow 顶到上、stats 沉到底，消除中间空档。 - 图片给 4/5 → 改为自适应高度（由文案高度驱动）， 保证桌面端 hero 高度稳定、移动端回落为「图上文下」。 */ .kmf-hero { position: relative; background: var(--kmf-bg-2); overflow: hidden; } .kmf-hero-inner { display: grid; /* 左文案稍宽，给标题足够的行长；右侧图片可压缩。 */ grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: stretch; max-width: var(--kmf-wrap-wide); margin: 0 auto; /* 左侧内边距 = 让 box 内容起点与 .kmf-wrap 的左内边距对齐： (视口 - 容器宽)/2 + 容器内边距。用 max() 兜住「视口小于容器」的情况。 */ padding-left: max(var(--kmf-pad), calc((100vw - var(--kmf-wrap)) / 2 + var(--kmf-pad))); padding-right: 0; padding-top: clamp(36px, 4.2vw, 64px); padding-bottom: clamp(36px, 4.2vw, 64px); } .kmf-hero-copy { min-width: 0; display: flex; flex-direction: column; /* 文案内部纵向铺开：eyebrow 顶、stats 底，中间自然留白。 */ justify-content: center; gap: 0; } .kmf-hero h1 { /* ★ 2026-10-07 第五轮收紧：原 clamp(34px, 3.5vw, 58px) 在 1440 视口下 解析为 50.4px，配合 max-width:16ch 把 "Furniture and everyday essentials that arrive this week, not next month." 排成 5 行（截图 h01 可见），左侧文案柱被拉得过高、与右侧图失衡。 新档位按「1440 视口下占 3 行、1920 下占 3 行」定： 1440 → 3.05vw = 43.9px 1680 → 51.2px（封顶 52） max-width 同步从 16ch 放宽到 19ch —— 允许每行多容纳 2-3 个字符， 避免因字号变小反而行数不变。 */ font-size: clamp(32px, 3.05vw, 52px); line-height: 1.1; margin-bottom: 22px; letter-spacing: -.026em; max-width: 19ch; } /* 只给 hero 的导语段落设大字号。 不要写成 .kmf-hero p —— 那会把 eyebrow、指标条里的 .kmf-hero-stat-l / .kmf-hero-stat-n 一并放大打乱版式。 */ .kmf-hero-copy > p.kmf-lede { font-size: clamp(15.5px, 1.05vw, 17.5px); line-height: 1.68; color: var(--kmf-ink-2); margin-bottom: 30px; max-width: 54ch; } .kmf-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 0; } /* stats 沉到文案区底部：用 margin-top:auto 吃掉剩余空间， 这样无论标题几行，指标条都稳定贴在与图片底边对齐的位置。 */ .kmf-hero-stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 46px); padding-top: 28px; margin-top: auto; border-top: 1px solid var(--kmf-line-2); } /* 右侧图片：突破容器、贴视口右缘、撑满 hero 全高 */ .kmf-hero-media { position: relative; overflow: hidden; border-radius: 0; min-height: 100%; } .kmf-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .kmf-hero-stat-n { font-family: var(--kmf-font-head); font-size: 25px; font-weight: 700; /* ★ 第八轮：令牌已重指向 Anker 正文黑（原松柏绿 #1b5e4a）。 负字距跟随全站标题规则，制造 Anker 式的「精密感」。 */ color: var(--kmf-pine); line-height: 1.1; letter-spacing: var(--kmf-ls-title); } .kmf-hero-stat-l { font-size: 12.5px; color: var(--kmf-ink-3); letter-spacing: .02em; } /* ========================================================================== 8. 区块标题 ========================================================================== */ /* ★★ 2026-10-07 第四轮修复：区块标题的三个子元素被横向摊开 ★★ HTML 有两种写法混用： · 多数区块：
    · Best Sellers：

    —— 三个元素**平级**，没有内层包裹 div。 .kmf-head 是 flex + justify-content:space-between， 于是平级写法下 eyebrow / h2 / 说明 被强行拉到左中右三点， 渲染成「小字在左、标题居中、说明在右」的散落布局（截图可见，基线还互不齐）。 修法：不再依赖「有没有内层 div」，改用两条兜底规则： 1. 子元素默认按列方向排（把平级的 eyebrow/h2/p 收成一列）； 2. 内部的 div 分组保持原样（分组自然竖排，因为它是块级）。 再让所有直接子元素在交叉轴按起点对齐，消灭基线错位。 */ .kmf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 4vw, 44px); flex-wrap: wrap; } /* 平级写法兜底：eyebrow / h2 / p 直接挂在 .kmf-head 下时，收成一列。 用 :not(:last-child) 之外的通用规则会误伤右侧按钮，故只针对这三个标签。 */ .kmf-head > .kmf-eyebrow, .kmf-head > h1, .kmf-head > h2 { flex: 1 1 100%; margin-bottom: 0; } .kmf-head > .kmf-eyebrow { margin-bottom: 8px; } .kmf-head > h2 { margin-bottom: 0; } /* 平级写法下 h2 与说明同占一行：说明自动换到第二行（flex 100% 起新行） */ .kmf-head > p:not(.kmf-eyebrow) { flex: 1 1 100%; margin: 8px 0 0; } /* 有内层 div 的写法：让分组占据剩余宽度，按钮贴右 */ .kmf-head > div { flex: 1 1 auto; min-width: 0; } .kmf-head h2 { margin-bottom: 0; } .kmf-head p { margin: 8px 0 0; color: var(--kmf-ink-3); font-size: 14.5px; } .kmf-head-link { font-size: 13.5px; font-weight: 600; white-space: nowrap; padding-bottom: 2px; border-bottom: 1px solid var(--kmf-pine); flex: 0 0 auto; align-self: flex-end; } /* ========================================================================== 9. 品类网格（.kmf-cats / .kmf-cat） -------------------------------------------------------------------------- ★ 2026-10-07 第四轮重做：由「3:4 竖长图卡」改为「紧凑内容卡」。 改之前实测到的四个问题（1440px 视口）： 1. 卡片 3:4 竖长，但内容（名称/描述/按钮）全挤在底部 1/3， 上半部分是一大块只有图标的空区，卡片显得又高又空； 2. 该区块高度 1259px，11 张卡排成 5+5+1 —— 最后一行只 1 张，右边空 4 格； 3. 首字母水印 em 定位在 bottom:-14px，被 overflow:hidden 裁掉下半截， 渲染出一排脏兮兮的巨大字母残影（H / K / S / P）； 4. 每张卡描述文案重复（多张都是 "Quality essentials at a fair price."）， 在窄卡里被折成两行还占位，信息量却是零。 重做要点： - 固定 4 列（1440 容器下每张约 330px，足够放下类目名一行）； - 卡片改为「图标靠上 + 文字区在下」的紧凑纵向结构，取消 3:4 拉伸， 高度由内容决定，用 aspect-ratio 兜一个下限即可； - 水印从「右下被裁」改为「右上完整圆角浮水印」，同时降到极低透明度； - 描述钳制两行，超出省略，避免长短不一撑歪卡片。 ========================================================================== */ .kmf-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); /* ★ 2026-10-07 第五轮：让同一行的卡片严格等高。 grid 默认 align-items:stretch 已把每行卡片拉到等高， 但 .kmf-cat 内部是 flex column + margin-top:auto， 内容多的卡（标题折两行 + 描述两行）会把「行高」顶上去， 于是同排四张卡下沿参差（截图 h02 第 1 行：Kitchen 比 Sports 高 15px）。 用 grid-auto-rows:1fr 让所有行等分，配合 .kmf-cat{height:100%} 锁死。 */ grid-auto-rows: 1fr; } .kmf-cat { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--kmf-r-lg); /* 高度由 grid-auto-rows:1fr 统一决定；height:100% 让卡片撑满网格单元。 min-height 只作为单列布局（<640px）时的兜底下限。 */ height: 100%; min-height: 232px; /* ★ 第六轮：深绿底 → 炭黑底（--kmf-ink-deep）。 欧美家居站的类目瓦片是黑/白/灰 + 图，彩色大面积铺底会显「主题化」。 */ background: var(--kmf-ink-deep); color: #fff; text-decoration: none; isolation: isolate; transition: transform var(--kmf-dur) var(--kmf-ease), box-shadow var(--kmf-dur) var(--kmf-ease); } .kmf-cat:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15, 18, 20, .22); } /* 媒体区：绝对铺满卡片，作为裁切框 —— 这样图片无论原始比例如何都被 cover */ .kmf-cat-media { position: absolute; inset: 0; z-index: 0; } .kmf-cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--kmf-ease); } .kmf-cat:hover .kmf-cat-media img { transform: scale(1.05); } /* 无缩略图时的设计化兜底（★ 2026-10-07 新增，第四轮调整） 替代 WooCommerce 的灰白占位图。品牌松柏绿渐变底 + 类目图标 + 类目名首字母水印。 配图到位后（thumbnail_id 有值）这段自动不再生效，无需改代码。 第四轮改动：图标不再用 place-items:center 顶在正中（竖向长卡时代正中是空的， 紧凑卡里正中会与文字打架），改为「顶部留白 + 图标左上」，与右侧水印形成对角平衡。 */ .kmf-cat-fallback { position: absolute; inset: 0; display: block; /* ★ 第八轮：深色渐变 → Anker 式浅灰底。 原为 radial + linear 双层深色渐变（#343b3e→#1e2326→ink-deep）， 是「炭黑瓦片」观感的真正来源 —— 它铺满整卡并盖住 ::after 遮罩。 Anker 实测类目瓷砖用 #f5f5f7 浅灰底承托内容，故整体校正。 */ color: var(--kmf-ink); background: var(--kmf-tile); } .kmf-cat-fallback .kmf-cat-ico { position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; opacity: .82; /* ★ 第八轮：投影在浅灰底上无意义，去掉；描边靠 svg 自身 currentColor */ filter: none; transition: transform .4s var(--kmf-ease); } .kmf-cat:hover .kmf-cat-fallback .kmf-cat-ico { transform: scale(1.08); } /* 首字母水印：右上角大字，只作肌理。 ★ 2026-10-07 第五轮降噪：透明度 .10 → .055，字号 96 → 88，并轻微右移出血。 原因：截图 h02 里 H / K / S / O 四个 96px 字母在松柏绿底上对比过强， 与左上角类目图标各占一角，整张卡像「两个元素在抢位」， 视觉重心从类目名被拉走。降到 .055 后只剩隐约肌理，不参与构图。 */ .kmf-cat-fallback em { position: absolute; right: 10px; top: -2px; font-family: var(--kmf-font-head); font-size: 88px; font-style: normal; font-weight: 700; line-height: 1; /* ★ 第八轮：白水印 → 深色水印（浅灰底上白字不可见） */ color: rgba(29, 29, 31, .05); pointer-events: none; user-select: none; } /* 底部渐变遮罩，保证白色文字在任何底图上都可读。 紧凑卡里文字只占下半，遮罩高度收到 78% 让过渡更平缓。 */ .kmf-cat::after { content: ""; position: absolute; inset: auto 0 0 0; height: 78%; z-index: 1; background: linear-gradient(to top, rgba(13,16,18,.92), rgba(13,16,18,.42) 52%, rgba(13,16,18,0)); pointer-events: none; } .kmf-cat-body { position: relative; z-index: 2; margin-top: auto; padding: 20px 22px 21px; display: flex; flex-direction: column; gap: 7px; color: #fff; } /* 名称 + 计数同一行，两端对齐（计数靠右），彻底解决 "Home & Furniture45" 粘连 ★ 修正：名称改为允许折两行（长类目名如 "Kitchen & Appliances" 单行放不下， 早期用 nowrap + ellipsis 会截成 "Kitchen & Appli…"，可读性反而更差）。 计数徽章固定不压缩，靠 baseline 对齐。 */ .kmf-cat-name { display: flex; /* ★ 2026-10-07 第五轮修复：baseline → flex-start。 原因：.kmf-cat-name > span:first-child 是 -webkit-box（多行钳制）， 这类元素的 baseline 由最后一个行盒决定，标题折成两行时 baseline 会掉到第二行底部，把计数徽章一起拽下去 —— 截图 h02 里 "Outdoor & Garden" 的徽章掉到了标题右下外侧。 改用 flex-start 后徽章稳定贴第一行顶部，与标题首行对齐。 */ align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0; font-size: 18.5px; line-height: 1.22; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); letter-spacing: -.01em; } .kmf-cat-name > span:first-child { /* ★ 2026-10-07 第五轮修复：补 flex:1 1 auto。 原写法只有 min-width:0，但 flex 子项默认 flex:0 1 auto， -webkit-box 的 max-content 宽度会把「Outdoor & Garden」 这种长标题撑到占满整行，徽章被挤到第二行（截图 h02 可见）。 给 flex:1 1 auto + min-width:0 后，标题让出徽章所需宽度， 自己折成两行（line-clamp:2 兜住）。 */ flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kmf-cat-count { flex: 0 0 auto; /* flex-start 对齐后，徽章顶边与标题首行顶边齐平； 标题行高 1.22 × 18.5px ≈ 22.6px，徽章行高 1.7 × 11.5px ≈ 19.6px， 差 ~3px。补 2px 让它视觉上落在首行中线附近。 */ margin-top: 2px; font-family: var(--kmf-font-body); font-size: 11.5px; font-weight: 700; line-height: 1.7; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; opacity: 1; text-shadow: none; } .kmf-cat-sub { margin: 0; font-size: 13px; line-height: 1.48; color: rgba(255,255,255,.84); /* 钳两行：文案长短不一时卡片高度仍一致 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* ★ 2026-10-07 第五轮修复：固定占 2 行高度。 实测（diag_cat.js）：只写 line-clamp 时， 描述正好一行的卡片（Outdoor & Garden「Patio, garden and backyard living made easy.」）subH=19px，两行的卡片 subH=38px。 .kmf-cat-body 是 margin-top:auto 贴底 → 一行的卡片整体内容 下沉 19px，同排四张卡的标题基线因此错位（1207 vs 1226）。 用 min-height 锁死 2 行高度，让所有卡的正文块等高。 */ min-height: calc(1.48em * 2); } .kmf-cat-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; font-weight: 700; /* ★ 第八轮：白字 → 近黑（浅灰底上白字不可读） */ color: var(--kmf-ink); letter-spacing: .03em; text-transform: uppercase; } .kmf-cat-go svg { width: 14px; height: 14px; transition: transform var(--kmf-dur) var(--kmf-ease); } .kmf-cat:hover .kmf-cat-go svg { transform: translateX(3px); } /* 「Shop All Products」收尾卡片：无缩略图，用深色底 + 大箭头做视觉终止符 */ .kmf-cat-all { background: linear-gradient(145deg, #2a3033, var(--kmf-ink-deep)); } .kmf-cat-all::after { display: none; } .kmf-cat-all .kmf-cat-fallback { display: none; } .nb-tile-arrow { position: absolute; left: 22px; top: 22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; transition: background var(--kmf-dur) var(--kmf-ease); } .nb-tile-arrow svg { width: 21px; height: 21px; transition: transform var(--kmf-dur) var(--kmf-ease); } .kmf-cat-all:hover .nb-tile-arrow { background: rgba(255,255,255,.28); } .kmf-cat-all:hover .nb-tile-arrow svg { transform: translateX(3px); } /* 窄屏：两列，标题收一档 */ @media (max-width: 1100px) { .kmf-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 782px) { .kmf-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kmf-cat { min-height: 196px; } .kmf-cat-name { font-size: 15.5px; } .kmf-cat-sub { display: none; } .kmf-cat-body { padding: 15px 16px 16px; } .kmf-cat-fallback .kmf-cat-ico { left: 16px; top: 16px; width: 32px; height: 32px; } .kmf-cat-fallback em { font-size: 72px; right: 10px; } .nb-tile-arrow { left: 16px; top: 16px; width: 38px; height: 38px; } } /* -------------------------------------------------------------------------- 「按空间逛」卡片网格（.nb-rooms / .nb-room） ★ 2026-10-07 新增 —— 这是本轮发现的**布局塌陷**： functions.php 的 [nb_rooms] 短代码输出了 .nb-rooms / .nb-room / .nb-room-img / .nb-room-go 这一整组类名，但 style.css 里从来没有任何一条对应规则。 后果：     只是行内元素，4 张卡片纵向堆叠、每张被图片的 width="800" 属性撑到 1192×656，整个区块从预期的 ~700px 涨到 2886px， 首页因此出现 2 个异常高区块（Shop by Space 2886px、Best Sellers 2403px）。 卡片视觉与 .kmf-cat 做区分：那边是「图片铺满 + 图上压字」， 这里是「图片在上 + 白底文案区在下」，避免全站卡片形态同质。 -------------------------------------------------------------------------- */ .nb-rooms { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .nb-rooms-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nb-rooms-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nb-room { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--kmf-line); border-radius: var(--kmf-r-lg); background: var(--kmf-surface); color: inherit; text-decoration: none; transition: border-color var(--kmf-dur) var(--kmf-ease), box-shadow var(--kmf-dur) var(--kmf-ease), transform var(--kmf-dur) var(--kmf-ease); } .nb-room:hover { border-color: var(--kmf-pine); box-shadow: var(--kmf-shadow); transform: translateY(-3px); } /* 图片区固定 4:3。 ★★ 2026-10-07 第五轮修复 —— 这里此前同时写了 `height:auto` 和 `aspect-ratio:3/2`，是**无效组合**： 带 width="800" height="533" 属性时属于「有内在纵横比的替换元素」，`height:auto` 会让它按源图比例 撑高，"aspect-ratio" 只是「若无内在比例时生效的建议值」，被完全忽略。 四张源图实际比例不一（living-room / outdoor / bedroom / office）， 于是卡片图片高度参差 —— 截图中 Outdoor & Patio 明显矮一截， Home Office 也矮，整排卡片下沿锯齿状。 修法：给 .nb-room 显式声明 flex 基准，图片用 `flex: 0 0 auto` + `width:100%` + `height:auto` 之外的确定高度来源 —— 即用 `aspect-ratio` 配合**清掉 height 属性影响**的 `height:auto !important` 不可行，故改用最稳的「百分比高度锚定」：父级 .nb-room 不设高度， 图片自身用 `aspect-ratio:4/3` + `min-height:0`， 并显式写 `height:auto` 的同时**覆盖内在尺寸**——靠 `object-fit:cover` 在 aspect-ratio 生效后裁切。关键在 aspect-ratio 必须能生效： 对 而言，只有当 CSS 的 height 解析为 auto **且** 未从 HTML 属性取到确定值时才会启用。实测该项目 WP 会给图片加 `style="height:auto"` 或 `width/height` 属性，因此**最可靠的做法是 给图片套 aspect-ratio 的同时把图片设为 `position:absolute; inset:0`， 由父级伪元素撑出比例**。见下方 .nb-room-media 方案。 */ .nb-room-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kmf-bg-2); flex: 0 0 auto; } .nb-room-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s var(--kmf-ease); } .nb-room:hover .nb-room-img { transform: scale(1.04); } /* 文案区：h3 + p + Explore，纵向排开，Explore 沉到卡片底部 */ .nb-room h3 { margin: 14px 16px 6px; font-size: 17.5px; line-height: 1.3; color: var(--kmf-ink); } .nb-room p { margin: 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--kmf-ink-2); flex: 1 1 auto; } .nb-room-go { display: inline-flex; align-items: center; gap: 6px; margin: 14px 16px 16px; font-size: 13px; font-weight: 700; color: var(--kmf-clay); letter-spacing: .01em; } .nb-room-go svg { width: 14px; height: 14px; transition: transform var(--kmf-dur) var(--kmf-ease); } .nb-room:hover .nb-room-go svg { transform: translateX(3px); } /* -------------------------------------------------------------------------- 通栏横幅（.nb-band） ★★ 2026-10-07 第四轮新增 —— 又一个「有 HTML 无 CSS」的塌陷区块。★★ functions.php 输出
    内含 （背景图）+
    +
    （eyebrow / h2 / p / 按钮 / .nb-band-points 清单）， 但 style.css 里 nb-band / nb-band-bg / nb-band-copy / nb-band-points **一条规则都没有**（grep 命中 0）。 后果：背景图以 width=1200 的原始尺寸挤在文字上方当普通插图， 文案块贴着图下方排成一行普通文字，整个区块 1103px 高、毫无横幅感。 本次补齐：背景图绝对铺满 + 深色遮罩、文案浮在图上（左对齐、垂直居中）、 标题放大到宽屏尺度、要点清单横排打勾。 -------------------------------------------------------------------------- */ .nb-band { position: relative; overflow: hidden; isolation: isolate; /* ★ 第六轮：深绿底 → 炭黑（遮罩同步转黑），绿只留给按钮与要点图标 */ background: var(--kmf-ink-deep); color: #fff; min-height: clamp(380px, 42vw, 620px); display: flex; align-items: center; } .nb-band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } /* 遮罩：左侧深、右侧透，让文字压在图上仍清楚 */ .nb-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(13,16,18,.80) 0%, rgba(13,16,18,.60) 38%, rgba(13,16,18,.24) 72%, rgba(13,16,18,.06) 100%); pointer-events: none; } .nb-band .kmf-wrap { position: relative; z-index: 2; width: 100%; } .nb-band-copy { max-width: 640px; } .nb-band-copy .kmf-eyebrow { color: rgba(255,255,255,.80); margin-bottom: 14px; } .nb-band-copy h2 { margin: 0 0 18px; font-family: var(--kmf-font-head); font-size: clamp(30px, 3.4vw, 52px); line-height: 1.14; letter-spacing: -.024em; color: #fff; max-width: 18ch; } .nb-band-copy > p { margin: 0 0 28px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.66; color: rgba(255,255,255,.88); max-width: 52ch; } .nb-band .kmf-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; } .nb-band-points { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; } .nb-band-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.92); } .nb-band-points li svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--kmf-clay-l); stroke: var(--kmf-clay-l); } @media (max-width: 900px) { .nb-band { min-height: clamp(340px, 70vw, 460px); } .nb-band-copy { max-width: none; } .nb-band-copy h2 { max-width: none; } .nb-band::after { background: linear-gradient(to top, rgba(13,16,18,.92) 0%, rgba(13,16,18,.70) 55%, rgba(13,16,18,.34) 100%); } } @media (max-width: 1100px) { .nb-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .nb-rooms, .nb-rooms-2, .nb-rooms-3, .nb-rooms-4 { grid-template-columns: 1fr; gap: 14px; } .nb-room h3 { font-size: 16.5px; } } /* ========================================================================== 10. 商品网格与卡片 ========================================================================== */ .kmf-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .kmf-products.cols-3 { grid-template-columns: repeat(3, 1fr); } .kmf-products.cols-2 { grid-template-columns: repeat(2, 1fr); } /* -------------------------------------------------------------------------- 10a. 真实商品循环接驳层 -------------------------------------------------------------------------- 背景：上面的 .kmf-products / .kmf-card 全套样式原本只服务于自建标记， 但线上列表页（/shop/、类目页、首页 [products] 短代码）全部走 WooCommerce 原生循环，输出的是