/* ========================================================================== Xijie Floral Wholesale — 主样式 设计: 干净的 B2B 风格, 深绿(植物) + 米白 + 金色点缀 ========================================================================== */ :root{ --green-900:#12301f; --green-800:#1a4530; --green-700:#226042; --green-600:#2d7a54; --green-500:#3d9468; --green-100:#e6f2eb; --sand-50:#faf8f3; --sand-100:#f3efe6; --sand-200:#e5ddcd; --gold:#c9a961; --gold-dark:#a88a45; --ink:#1c2420; --ink-2:#485349; --ink-3:#7a857c; --line:#e2e6e1; --white:#fff; --red:#c0392b; /* ★ 主题派生色 —— 换主题时一起覆盖，消除 main.css 里的硬编码色值 */ --green-glow:#2f6b4c; /* hero 渐变右端 */ --green-on-dark:#e8f1ec; /* 深绿底上的浅文字 */ --green-on-dark-2:#a8c4b6; /* 深绿底上次浅文字 */ --gold-rgba:201,169,97; /* 金色 rgba 用的 RGB 三值 */ --gold-on:#3d3116; /* 金底上的深字 */ --gold-on-2:#2a2415; /* 金底上更深的字（徽章等） */ --green-arrow:#b9cfc2; /* 顶栏下拉箭头的浅色调 */ --radius:8px; --radius-lg:14px; --shadow-sm:0 1px 3px rgba(18,48,31,.06); --shadow:0 4px 16px rgba(18,48,31,.08); --shadow-lg:0 12px 40px rgba(18,48,31,.14); --maxw:1280px; /* ══════════════════════════════════════════════════════════════════ ★★★ 设计令牌层（2026-10-15 张总："界面非常不和谐，有没有办法一次性解决"） 为什么建这一层：改版前每个板块各自写死自己的 padding / 栅格列数 / 卡片图片比例 / 色块，于是「宽窄不一、色块乱序、比例参差」—— 而且**每加一个新板块就会多冒出一处不协调**。 这一层的唯一目的：**让"不和谐"变成不可能发生的错误**。 ⚠️ 本层所有数值都是**从现网实测值反推归一**的，不是新设计的 —— 所以「令牌化」这一步本身像素级零变化，只有后续显式改比例才会动视觉。 （曾把 --sec-pad-2 写成 88px，而现网 .sec 是 72px；.sec 被 28 个页面 复用，一绑定就是全站每段 +32px。故此处必须等于现网值。） 三条硬规矩，任何板块都不得违反： 1. 段内距只能取 --sec-pad-1/2/3 三档，不得自己写数字； 2. 卡片图比例一律用 --ratio-* 三个**按角色分档**的令牌， 不许自定义长宽比，也**不许用单一比例**（1/1 与 4/5 数学上互斥）； 3. 深色块只用 --surface-dark（即 var(--green-900)）， 它跟随后台主题（植物绿/商务蓝/活力橙…）自动变，**不许写死色值**。 ══════════════════════════════════════════════════════════════════ */ /* ── 段内距三档 ── 数值 = 改版前现网实测值，故令牌化本身零像素变化 */ --sec-pad-1:48px; /* .sec-tight 紧凑段（trial / cta） */ --sec-pad-2:72px; /* .sec 标准段，全站 28 页共用这一档 */ --sec-pad-3:112px; /* 大段（cats / cert 等需要呼吸感的） */ /* 视频段原本是内联 padding:56px 0，属第 4 个值 —— 已删除， 让它回到 --sec-pad-2，杜绝"内联覆盖令牌"这类静默失效。 */ /* ── 三个语义表面 ── 换主题时随之变，板块不得引用具体色值 */ --surface-0:var(--white); /* 纯白段 */ --surface-1:var(--sand-50); /* 浅沙段（与白色交替用） */ --surface-dark:var(--green-900); /* 深色段 */ /* ── 图片比例按角色分三档 ── 这三档不是审美选择，是**源图实测结果**（PIL 量过全部图片）： static/img/home/cat-*.jpg 800x800 = 1:1 static/img/home/factory-*.jpg 1600x900 = 16:9 static/img/home/scene-*.jpg 1600x900 = 16:9 static/media/sku 下的 *.jpg 53.7% 是 3:4 竖构图，32.7% 是 0.6~0.9 ★ 2026-10-21：上面原写的那串「斜杠＋星号」，在注释里会**又开一层注释**， 导致这条注释永远合不上（实测差 1 个）⇒ 已改写成「下的 星号.jpg」。 ⇒ 用单一比例（比如 16/10）会保证每张图都被裁： 1:1 源进 16:10 框 ⇒ 每边裁 18.75%，仿真树树冠和花盆同时被切。 所以必须按"图的角色"分档，每一档都对上自己的源图比例。 */ --ratio-landscape:16/9; /* 横构图实拍：hero / factory / scene / why / video */ --ratio-square:1/1; /* 方形：cat-*.jpg 源图零裁切 */ --ratio-tall:4/5; /* 竖构图商品图：3:4 主流源，每边只裁 3.1% */ /* ── 卡片几何 ── */ --card-pad:24px; /* 宽卡内边距 */ --card-pad-sm:16px; /* 窄卡内边距（cert 列宽只有 150px，24 会挤到只剩 102px 文字宽） */ --card-radius:var(--radius-lg); /* 卡片唯一圆角 = 14px */ --grid-gap:24px; /* 栅格间距基线（全站统一；移动端另有更小的例外，见 .pcards 的媒体查询） */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:'Inter','Segoe UI','Helvetica Neue',Arial, 'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif; color:var(--ink); background:var(--white); line-height:1.6; font-size:var(--fs-15); } html[dir="rtl"] body{font-family:'Noto Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif} img{max-width:100%; height:auto; display:block} a{color:inherit; text-decoration:none} button,input,select,textarea{font:inherit; color:inherit} h1,h2,h3,h4{margin:0 0 .5em; line-height:1.25; font-weight:700; letter-spacing:-.01em} h1{font-size:2.5rem} h2{font-size:1.75rem} h3{font-size:1.15rem} p{margin:0 0 1em} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} /* ---------- 顶部条 ---------- */ /* 语言建议条 —— 只在 IP 判定国家与当前语言不一致时出现, 12 秒自动淡出 */ .lang-tip{background:var(--gold); color:var(--gold-on); font-size:var(--fs-sm); padding:6px 0; transition:opacity .4s ease, max-height .4s ease; overflow:hidden; max-height:60px} .lang-tip.out{opacity:0; max-height:0; padding:0} .lang-tip .wrap{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap} .lang-tip-txt b{font-weight:600} .lang-tip-act{display:flex; align-items:center; gap:10px} .lang-tip-go{background:var(--green-900); color:#fff; text-decoration:none; font-weight:500; padding:5px 13px; border-radius:20px; white-space:nowrap} .lang-tip-go:hover{background:var(--green-700)} .lang-tip-x{background:none; border:none; color:var(--gold-on); font-size:var(--fs-20); line-height:1; cursor:pointer; padding:0 4px; opacity:.6} .lang-tip-x:hover{opacity:1} @media(max-width:640px){.lang-tip .wrap{justify-content:center; text-align:center}} /* ---------- 节日祝福条 ---------- */ /* ★ 只在节日当天出现（判据在 app.festival_banner()，模板只判 FESTIVAL 是否为 None）。 位置在顶栏**之上**，全站一条。高度压到 ~32px、颜色只用主色深档 + 点缀色文字， **不抢 CTA 的视线**，而且随时可关。 */ .fest-bar{background:var(--green-900); color:var(--green-on-dark); font-size:var(--fs-sm); padding:5px 0; transition:opacity .35s ease, max-height .35s ease; overflow:hidden; max-height:44px} /* 收起用 max-height 过渡（照 .lang-tip.out），别让页面布局突然跳一下 */ .fest-bar.out{opacity:0; max-height:0; padding:0} .fest-bar .wrap{display:flex; align-items:center; gap:10px} .fest-box{flex:1 1 auto; overflow:hidden; white-space:nowrap} /* 无缝循环：文案在模板里放两份，位移 -50% 正好一圈。 用 transform（走 GPU）而不是 left —— 微信内置浏览器/老安卓上 left 会掉帧。 */ .fest-run{display:inline-block; white-space:nowrap; will-change:transform; animation:xj-fest-scroll 22s linear infinite} .fest-sep{opacity:.5; padding:0 8px} @keyframes xj-fest-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}} .fest-x{background:none; border:none; color:var(--green-on-dark); font-size:var(--fs-19); line-height:1; cursor:pointer; padding:0 4px; opacity:.65; flex:0 0 auto} .fest-x:hover{opacity:1} /* ★ RTL（阿拉伯语）：**不滚动、居中静态**。 CSS 动画是物理方向，镜像过来阿语长句读起来更费劲，不如静态。 */ html[dir="rtl"] .fest-run{animation:none} html[dir="rtl"] .fest-dup{display:none} html[dir="rtl"] .fest-box{text-align:center} /* ★ 无障碍：系统里开了「减少动态效果」就必须停 —— 这是全站第一条 prefers-reduced-motion（原来一条都没有），顺手把这道短板补上。 */ @media (prefers-reduced-motion: reduce){ .fest-run{animation:none} .fest-dup{display:none} .fest-box{text-align:center} } @media(max-width:820px){ .fest-bar{font-size:var(--fs-xs); padding:4px 0; max-height:36px} } .topbar{background:var(--green-900); color:#cfe0d6; font-size:var(--fs-sm); padding:7px 0} .topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap} .topbar a:hover{color:#fff} .topbar-l{display:flex; gap:18px; align-items:center; flex-wrap:wrap} .topbar-r{display:flex; gap:14px; align-items:center} /* ★ 2026-10-16（第 1297 批 · 桌面按族收口；规格 §4.4：指针目标 24×24）： 官网顶栏右侧那一串（索取报价 / 批发 / 免费样品 / 🔑 登录）是**独立入口**， 不是句内链接（句内那种才适用 WCAG 2.2 AA 的「句内目标」明文豁免）⇒ 真改： 它们以前只有 52×21，矮 3px。一处顶 9 页。 ★ 这里用 `min-height` 而**不是**垂直 `padding`：`.topbar-r` 是 flex，它的子项被 blockify ⇒ 行内元素那条「垂直 padding 不进 line-height」的经验在这里**不成立**， 两者都会让顶栏长高同样的 3px；min-height 更好读。 ★ 窄屏那份 `.topbar-r .tb-link{display:none}` 权重更高（0,2,0 对 0,1,1）且源顺序在后 ⇒ 手机端照旧按七专家评审的精简口径隐藏，一个像素不变。 */ .topbar-r a{display:inline-flex; align-items:center; min-height:24px} /* ★ 顶栏里的 select 必须显式改底色/文字色。 否则浏览器默认渲染成白底, 又因为全局 color:inherit 继承成浅色字 -> 白底白字完全看不见 (这是截图验收时发现的 P0 问题) */ .topbar select{ appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.10); color:var(--green-on-dark); border:1px solid rgba(255,255,255,.26); border-radius:6px; padding:4px 26px 4px 10px; font-size:var(--fs-xs); line-height:1.35; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--green-arrow) 50%), linear-gradient(135deg,var(--green-arrow) 50%,transparent 50%); background-position:calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; transition:background-color .15s, border-color .15s; } .topbar select:hover{background-color:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42)} .topbar select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(var(--gold-rgba),.28)} .topbar select option{background:#fff; color:#1d2b23} /* ---------- 头部 ---------- */ .hdr{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50} .hdr .wrap{display:flex; align-items:center; gap:28px; min-height:70px; height:auto; padding-block:8px} .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; color:var(--green-800); white-space:nowrap} .logo-mark{width:34px;height:34px;border-radius:50%;flex:none;display:block; object-fit:contain;background:none} /* 2026-10-18: the brand mark is now a PNG (tools/_logo_build.py). Kept the old size/rounding so the header layout does not move. */ .logo small{display:block;font-size:var(--fs-2xs);font-weight:500;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase} .nav{display:flex; gap:4px; margin-inline-start:auto; align-items:center} .nav a{padding:8px 14px; border-radius:6px; font-size:var(--fs-md); font-weight:500; color:var(--ink-2); white-space:nowrap} .nav a:hover{background:var(--green-100); color:var(--green-800)} .nav a.on{background:var(--green-700); color:#fff; font-weight:650; padding:10px 18px} .nav a.on:hover{background:var(--green-800); color:#fff} .nav .cta{background:var(--green-700); color:#fff; padding:10px 18px; margin-inline-start:8px} .nav .cta:hover{background:var(--green-800); color:#fff} /* ★★ 2026-10-17（张总批注「点击哪里的板块就 背景块到哪里」）： ① 当前页给**同款绿底块** —— 原来 `.on` 只是变绿加粗，而"块"只出现在常驻的「联系」上， 于是不管点哪个板块，看起来都像「联系」被选中； ② 因此「联系」改**描边款**，与"你在这"区分开。 ★ 描边为什么用 `inset box-shadow` 而不是 `border`：border 会把盒子撑高 3px， 而且下面 1340 / 1180 两处响应式里都有 `.cta` 的 padding 覆盖， 用 border 就得跟着改好几处；inset 阴影不占布局，**盒子尺寸一点不变**。 */ .nav .cta-ghost{background:transparent; color:var(--green-700); box-shadow:inset 0 0 0 1.5px var(--green-700)} .nav .cta-ghost:hover{background:var(--green-700); color:#fff; box-shadow:none} .burger{display:none; background:none; border:1px solid var(--line); border-radius:6px; padding:8px 11px; cursor:pointer; margin-inline-start:auto} .hdr-tools{display:flex;gap:10px;align-items:center} .sel{border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:var(--fs-sm); background:var(--white); cursor:pointer} /* ---------- 按钮 ---------- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:var(--radius); font-weight:600; font-size:var(--fs-15); border:1.5px solid transparent; cursor:pointer; transition:.18s; text-align:center; line-height:1; /* ★ 2026-10-15 9 门外语窄屏：俄/印尼等语种的长单词（如"Получить коммерческое предложение"）在 375px 排不下，按钮被 inline-flex 的 nowrap 撑出整页 横向滚动条。按钮文字允许折行，且不让子元素撑破父框。 */ max-width:100%; min-width:0; overflow-wrap:break-word; white-space:normal} .btn > *{min-width:0} .btn-primary{background:var(--green-700); color:#fff} .btn-primary:hover{background:var(--green-800); transform:translateY(-1px); box-shadow:var(--shadow)} .btn-outline{border-color:var(--green-700); color:var(--green-700); background:transparent} .btn-outline:hover{background:var(--green-100)} .btn-gold{background:var(--gold); color:var(--gold-on-2)} .btn-gold:hover{background:var(--gold-dark); color:#fff} .btn-ghost{color:var(--ink-2); border-color:var(--line); background:var(--white)} .btn-ghost:hover{border-color:var(--green-600); color:var(--green-700)} .btn-sm{padding:8px 15px; font-size:var(--fs-sm)} .btn-lg{padding:15px 32px; font-size:var(--fs-16)} .btn-block{width:100%} .btn:disabled{opacity:.5; cursor:not-allowed; transform:none} /* ---------- 通用块 ---------- */ /* ★ 2026-10-15 视觉统一：这三个值全部改吃 --sec-pad-* 令牌。 令牌数值刻意等于改版前的现网值，所以这一步本身像素级零变化 —— 目的是"从此以后只有一个地方能改段内距"，而不是现在就变样。 注意 --sec-pad-2 是 72px 不是 88px：.sec 被全站 28 个页面复用， 绑错档位就是全站每段 +32px。 */ .sec{padding:var(--sec-pad-2) 0} .sec-tight{padding:var(--sec-pad-1) 0} .sec-sand{background:var(--surface-1)} .sec-green{background:var(--surface-dark); color:var(--green-on-dark)} /* ★★ 2026-10-15 自检第 4 遍抓到的**致命漏洞**（改完模板才发现）： 模板已把写死的 `sec sec-green` / `sec sec-sand` 全改成 `sec sec-{{ sec_surface('xxx') }}`，而 section_surface() 的取值是 plain / sand / **dark** —— 但 CSS 里只有 .sec-sand 和 .sec-green， **.sec-plain 与 .sec-dark 从来没定义过**。 后果：深色段渲染成 class="sec sec-dark"，浏览器找不到规则 ⇒ 深绿背景整块失效、整段退回白底，而金色 eyebrow 和白字 h3 留在深色假设上 ⇒ 白底白字，肉眼直接看不见内容。 —— 这就是"数据库里有数据 ≠ 落地"的典型：值灌对了，**消费端没接线**。 修法：把三档色块收敛成 .sec-plain/.sec-sand/.sec-dark 三个真类， 旧的 .sec-green/.sec-sand 保留（其余 27 个页面还在用，不能删）。 —— 深色档用 :is() 一次性带上原来 .sec-green 的所有子选择器规则， 以后调深色段只需改这一处，plain/sand/dark 三档永远同步。 */ .sec-plain{background:var(--surface-0)} .sec-dark{background:var(--surface-dark); color:var(--green-on-dark)} :is(.sec-dark,.sec-green) h2{color:var(--green-on-dark)} :is(.sec-dark,.sec-green) .sec-hd p{color:var(--green-on-dark-2)} :is(.sec-dark,.sec-green) .sec-hd .eyebrow{color:var(--gold)} /* #fff 是这行里仅存的硬编码白色；.sec-green 自身的 color 已经是 --green-on-dark， 只有 h2 漏了。改后三套主题对比度都达标（14.3/14.5/11.6:1），且删掉一处硬编码。 */ .sec-green h2{color:var(--green-on-dark)} .sec-hd{text-align:center; max-width:720px; margin:0 auto 44px} .sec-hd .eyebrow{font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dark); font-weight:700; margin-bottom:10px} .sec-hd p{color:var(--ink-2); font-size:var(--fs-16)} .sec-green .sec-hd p{color:var(--green-on-dark-2)} /* ★ 2026-10-15：深色段上的 eyebrow 必须换回 --gold。 浅底段（白/沙）吃 --gold-dark 只有 3.29:1（green）/ 2.45:1（blue、orange）， 低于 WCAG AA 正文 4.5:1；而 eyebrow 是 --fs-xs 小字 + 700 字重，不享受大字豁免。 改版前靠模板逐段内联 `color:var(--gold)` 救回来（index.html 三处）， 那种补丁正是"令牌层没落地"的后果 —— 现在收进样式表。 */ .sec-green .sec-hd .eyebrow{color:var(--gold)} .grid{display:grid; gap:var(--grid-gap)} /* ★ 「宽窄不和谐」的另一半根因：固定列数 + 数量不匹配的条目 = 末行空洞 （承诺墙 5 条排 g3 → 3+2，右侧空出一整格约 891px）。 ★ 列数**由模板按条目数算出来**（sec.grid_cols，见 app.py::grid_cols）， CSS 这里只负责"收到几列就画几列"—— auto-fit/minmax 治不了这个问题：它按**宽度**算，不知道有 5 条， 1440 宽下照样给 3 列（还是 3+2）。唯一正解是同时知道宽度和条目数。 */ .gfit{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} @media (max-width:560px){ .gfit{grid-template-columns:1fr} } /* 网格容器列数由 app.py::grid_cols 依据条目数算出，写成 inline style： .grid-N —— N 为 1..5。用 inline 而不是新加一堆类， 是为了让"这一段到底该几列"只有一个决定点（Python 侧），CSS 不再猜。 */ .grid-1{grid-template-columns:1fr} .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-5{grid-template-columns:repeat(5,1fr)} /* ★★ 降列的铁律：**只在能整除时才降**，否则宁可保持原列数。 反例（本批实测踩到）：.grid-4 在 1080px 断点降到 3 列 —— 4 条卡于是排成 3+1，右侧空一整格，**"宽窄不和谐"在断点处原样复发**； 而 996px 宽下 4 列每列仍有 245px，完全放得下，没必要降。 ⇒ 每条降列规则都写成 N → N' 的**整除**映射（4→2→1、3→1、5→1）。 */ @media (max-width:820px){ .grid-4{grid-template-columns:repeat(2,1fr)} } @media (max-width:700px){ .grid-3,.grid-5{grid-template-columns:1fr} } @media (max-width:560px){ .grid-2{grid-template-columns:1fr} } .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)} /* ---------- Hero ---------- */ .hero{background:linear-gradient(135deg,var(--green-900) 0%,var(--green-700) 55%,var(--green-glow) 100%); color:#fff; padding:88px 0 72px; position:relative; overflow:hidden} .hero::after{content:'';position:absolute;top:-30%;right:-15%;width:70%;height:160%; background:radial-gradient(ellipse at center,rgba(var(--gold-rgba),.14),rgba(var(--gold-rgba),0) 68%); pointer-events:none} /* ★ 2026-10-15 首屏主视觉：实拍展厅图铺底+ 轻遮罩 —— 首屏原本是纯CSS 渐变，视觉上没有"工厂"实感；铺实拍后信任感立刻上来。 —— 遮罩强度见下方"张总：透明一点"说明：对比度改由文字描边承担，不再靠压暗图片。 */ .hero.has-visual{background: linear-gradient(100deg,rgba(var(--green-900-rgba),.30) 0%,rgba(var(--green-900-rgba),.15) 42%,rgba(var(--green-900-rgba),.03) 100%), url('/static/img/home/hero-main.jpg') center/cover no-repeat; } .hero.has-visual::before{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(var(--green-900-rgba),.22) 0%,transparent 30%,transparent 76%,rgba(var(--green-900-rgba),.34) 100%); pointer-events:none;z-index:0} /* ──────────────────────────────────────────────────────────────── ★★ 磨砂：斑块跟随文字（2026-10-15 张总："跟随文字和图片范围， 深浅和面积合理变化，不要大面积堆砌，要有自然融合"） —— 问题：旧版是一条横向渐变铺满左半屏，磨砂面积= 屏幕矩形， h1 上方的空白也在糊 ⇒ 视觉上是"糊了一层纱"。 —— 现状：.hero-frost 降级为 **no-JS 兜底**；JS 就绪后 html加 .js-frost-on把它隐藏，只留 .hero-frost-blob 斑块。 ──────────────────────────────────────────────────────────────── */ .js-frost-on .hero-frost{display:none} .hero.has-visual .hero-frost{ position:absolute; inset:0; z-index:0; pointer-events:none; backdrop-filter:blur(6px) saturate(1.12); -webkit-backdrop-filter:blur(6px) saturate(1.12); background:linear-gradient(100deg,rgba(var(--green-900-rgba),.22) 0%,rgba(var(--green-900-rgba),.10) 45%,transparent 68%); } /* 薄暗纱：只留一点点主对比度，斑块负责"按需起雾" */ .hero.has-visual .hero-frost + .hero-veil{ position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(100deg,rgba(var(--green-900-rgba),.20) 0%,rgba(var(--green-900-rgba),.08) 44%,transparent 66%); } /* ── 斑块层：位置/尺寸全部由 site.js 量文字后动态生成 ── */ .hero-frost-layer{position:absolute; inset:0; z-index:0; pointer-events:none; contain:strict} .hero-frost-blob{ position:absolute; /* ★ 模糊强度与暗纱浓度全部来自下面三档 class 写入的 CSS 变量， 这样"深浅"可在 CSS 一处调，不用碰 JS、不用碰模板。 */ --fb-blur:7px; --fb-a:.20; backdrop-filter:blur(var(--fb-blur)) saturate(1.12); -webkit-backdrop-filter:blur(var(--fb-blur)) saturate(1.12); background:rgba(var(--green-900-rgba),var(--fb-a)); border-radius:26px; /* ★ 自然融合的关键：四周用椭圆 mask 渐隐到全透明， 没有硬边 ⇒ 斑块边界"化"进图里，而不是切出一块。 */ -webkit-mask-image:radial-gradient(ellipse at center,#000 42%,rgba(0,0,0,.78) 60%,rgba(0,0,0,.28) 80%,transparent 94%); mask-image:radial-gradient(ellipse at center,#000 42%,rgba(0,0,0,.78) 60%,rgba(0,0,0,.28) 80%,transparent 94%); } /* 强弱分级：重点（h1）稍重，次要（小字/eyebrow）稍轻 —— 由 JS 加 class */ .hero-frost-blob.lv-strong{--fb-blur:9px; --fb-a:.26} .hero-frost-blob.lv-mid{--fb-blur:7px; --fb-a:.20} .hero-frost-blob.lv-soft{--fb-blur:5px; --fb-a:.14} /* ──────────────────────────────────────────────────────────────── ★★ 2026-10-16 张总批注：「这个文字地方还是要整块磨砂遮罩 跟随字的面积大小变化」 —— 昨夜那版（JS 量文字 → 生成多个 .hero-frost-blob 斑块）**被否**： 张总要的是**一整块**，而且要跟随文字面积。 ⇒ 改挂到 `.hero-copy` 自己的 ::before 上：`inset` 向外扩一圈， 面积由**文字块本身**决定 ⇒ 内容多少 / 语种长短（俄语德语更长）/ 手机换行，全部自动跟随，**不需要 JS 量尺寸**。 ★★ 两个坑（动手前想清楚，别踩）： ① `.hero-copy` 必须保持 `position:relative` + **z-index:auto**（不创建 stacking context）—— 否则 ::before 的 `backdrop-filter` 只能糊到 hero-copy 自己的透明背景，**糊不到 .hero 那张实拍图**。 ② 文字压在遮罩之上用 `.hero-copy > *{z-index:1}`，**不用 z-index:-1** —— 负值会把遮罩沉到 .hero 背景图**下面**，直接看不见。 ──────────────────────────────────────────────────────────────── */ .hero.has-visual .hero-copy{position:relative} .hero.has-visual .hero-copy::before{ content:''; position:absolute; z-index:0; inset:-22px -26px; border-radius:28px; pointer-events:none; backdrop-filter:blur(10px) saturate(1.10); -webkit-backdrop-filter:blur(10px) saturate(1.10); /* 白纱（不是压黑）：张总 10-15 已定调「遮盖太深了，可以透明一点」， 白字可读性由既有 text-shadow 承担，遮罩只负责"起雾"。 */ background:rgba(255,255,255,.12); box-shadow:0 10px 40px rgba(6,26,18,.10); } .hero.has-visual .hero-copy > *{position:relative; z-index:1} /* 斑块方案停用：JS 与 CSS 都留着（可回看），但不再产生视觉 */ .js-frost-on .hero-frost-layer{display:none} /* 文字描边 —— 背景透亮的前提是字自己站得住 */ /* ★ 2026-10-15 张总："遮盖太深了，可以透明一点" 原来靠加深背景(.94→.62)来保证白字对比度，代价是把展厅实拍全吃掉。 改为：背景大幅调浅，白字可读性改由文字自身 text-shadow 承担。 */ /* 文字描边 —— 背景透亮的前提是字自己站得住 */ .hero.has-visual h1{text-shadow:0 2px 20px rgba(6,26,18,.62),0 1px 4px rgba(6,26,18,.50)} /* 正文色比标题更浅、更细，对比度要求更高：描边加重 + 字色提亮 */ .hero.has-visual .lead{color:#eaf4ee; text-shadow:0 1px 14px rgba(6,26,18,.72),0 1px 4px rgba(6,26,18,.45)} .hero.has-visual .hero-stat span{color:#dfeae3; text-shadow:0 1px 12px rgba(6,26,18,.65),0 1px 3px rgba(6,26,18,.40)} /* 卡片原本半透明白，改用更深的底+ 更强的模糊，避免背景透上来显脏 */ .hero.has-visual .hero-card{background:rgba(var(--green-900-rgba),.42);border-color:rgba(255,255,255,.20); backdrop-filter:blur(10px) saturate(1.1)} .hero.hero-plain::after{display:none} .hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center} /* ★★ 2026-10-15 张总「这个块不要了 影响大局」—— 删掉首屏右侧 .hero-card 之后， 两栏网格的右栏空了，主图被迫压到左半屏，主视觉反而变小 ⇒ 收回单栏。 ★ 只在 .hero-solo 上生效：samples / trial 两页仍有 .hero-card， .hero .wrap 的两栏默认**一行都不能动**，否则那两页会丢右栏。 文字块限宽 720px：单栏铺满 1440px 会让 h1 和 .lead 的行长过长、难读； 限宽后是"左对齐的一栏文字 + 右侧整幅实拍图"，主图当主角。 */ .hero.hero-solo .wrap{grid-template-columns:1fr; gap:0} .hero.hero-solo .hero-copy{max-width:720px} .hero.hero-solo .lead{max-width:600px} .hero h1{font-size:3.1rem; color:#fff; margin-bottom:18px} .hero .lead{font-size:var(--fs-18); color:var(--green-on-dark-2); margin-bottom:30px; max-width:560px} .hero-actions{display:flex; gap:14px; flex-wrap:wrap} .hero-stats{display:flex; gap:40px; margin-top:44px; padding-top:28px; border-top:1px solid rgba(255,255,255,.16); flex-wrap:wrap} .hero-stat b{display:block; font-size:2rem; color:var(--gold); line-height:1.1; font-weight:800} .hero-stat span{font-size:var(--fs-sm); color:var(--green-on-dark-2)} /* ★ 移动端: Hero 数据改为 2×2 网格, 避免 flex 换行挤成一团 (七专家评审 P0) */ @media(max-width:640px){ .hero-stats{display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; margin-top:32px; padding-top:24px} .hero-stat b{font-size:1.7rem} } .hero-card{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg); padding:28px; backdrop-filter:blur(6px)} /* ---------- Hero 大图轮播（2026-10-15 张总："大图轮播呢"） ★ 图片 URL 不在 CSS 里 —— 由模板从 web_section_image 渲进 inline style， 后台改图即生效，无需改代码。 ★ 遮罩层（.hero.has-visual 自身的 background 渐变）叠在轮播之上： 渐变是 .hero 的背景，轮播是 .hero-slides 的子元素， 所以顺序上遮罩在上、文字在下，文字始终清晰。 */ .hero{position:relative; overflow:hidden} .hero-slides{position:absolute; inset:0; z-index:0} .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 1.1s ease; will-change:opacity; } .hero-slide.is-on{opacity:1} /* 轮播时把 .hero 原有的静态图铺底撤掉，改由轮播层负责； 若轮播层因故没显示，仍保留 hero-main.jpg 兜底 */ .hero-carousel{background-image: linear-gradient(100deg,rgba(var(--green-900-rgba),.30) 0%,rgba(var(--green-900-rgba),.15) 42%,rgba(var(--green-900-rgba),.03) 100%) !important} /* 控制条：左右箭头 + 圆点 */ .hero-slider-ui{ position:absolute; z-index:3; left:50%; transform:translateX(-50%); bottom:26px; display:flex; align-items:center; gap:16px; } .hero-arrow{ width:38px; height:38px; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.42); background:rgba(var(--green-900-rgba),.42); color:#fff; font-size:15px; line-height:1; backdrop-filter:blur(8px); transition:.2s; } .hero-arrow:hover{background:rgba(198,160,74,.85); border-color:var(--gold); color:#2a2415} .hero-dots{display:flex; gap:9px; align-items:center} .hero-dot{ width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.65); background:rgba(255,255,255,.28); transition:.25s; } .hero-dot.is-on{background:var(--gold); border-color:var(--gold); width:26px; border-radius:5px} @media(max-width:640px){ .hero-slider-ui{bottom:16px; gap:11px} .hero-arrow{width:32px; height:32px; font-size:13px} .hero-dot{width:7px; height:7px} .hero-dot.is-on{width:19px} } /* ---------- 商品卡 ---------- */ .pcards{display:grid; grid-template-columns:repeat(4,1fr); gap:22px} .pcard{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; transition:.2s; display:flex; flex-direction:column; position:relative} .pcard:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--green-500)} /* ★ 2026-10-15 视觉统一：1/1 → --ratio-tall(4/5)。 依据：static/media/sku 下 1837 张商品图实测，53.7% 是 3:4 竖构图。 3:4 源进 1:1 框每边裁 12.5%（削掉仿真树树梢）；进 4:5 只裁 3.1%。 ⚠️ 平板（≤1080）回正到 1/1：820px 档是 2 列且列宽达 374px， 4/5 会把图拉到 467px 高（近半屏），该段凭空 +561px。 */ .pcard-img{aspect-ratio:var(--ratio-tall); background:var(--sand-100); overflow:hidden; position:relative} .pcard-img img{width:100%;height:100%;object-fit:cover; transition:.35s} .pcard:hover .pcard-img img{transform:scale(1.05)} .pcard-badge{position:absolute; top:10px; inset-inline-start:10px; background:var(--gold); color:var(--gold-on-2); font-size:var(--fs-2xs); font-weight:700; padding:4px 9px; border-radius:4px; letter-spacing:.04em} .pcard-body{padding:15px 16px 17px; flex:1; display:flex; flex-direction:column; gap:6px} .pcard-code{font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.04em; font-family:ui-monospace,monospace} .pcard-name{font-size:var(--fs-md); font-weight:600; line-height:1.4; flex:1; /* ★ 2026-10-16（第 1300 批 · 桌面按族收口；规格 §4.4：指针目标 24×24）： 商品名就是**进详情页的入口**（独立一行，不是句内链接）⇒ 真改。 真现场（`tools/_b1299_small_ctl_census.py` 普查 @1440）：**21 处 / 2 页**、258×20 —— 只有"整行都是单行名"的那种行才矮，两行名的行本来就有 ~40px。 `min-height` 只会把**那些行**抬高 4px；网格是 stretch、同一行卡片一起长 ⇒ 不会参差。 */ min-height:24px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .pcard-price{font-size:1.22rem; font-weight:800; color:var(--green-700)} .pcard-price small{font-size:var(--fs-xs); font-weight:500; color:var(--ink-3)} .pcard-meta{font-size:var(--fs-xs); color:var(--ink-3); display:flex; gap:10px; flex-wrap:wrap} .pcard-add{margin-top:8px} /* ---------- 加购反馈（张总 2026-09-30：「有一个动画动作流向购物车里」，且**不自动弹抽屉**）---------- .xj-fly = 从被点的按钮/卡片飞向购物车的那一小块（有商品图就用图，没有就是白方块） .xj-bump = 购物车按钮被"命中"时轻轻弹一下 [data-add-quote].in-cart = 已进车的那颗按钮（文案变成「✓ <原本文案>」，颜色换成绿色） ★ 全部是**纯反馈**：不改变任何数据，动画失败也不影响加购（JS 侧套了 try）。 */ .xj-fly{position:fixed;width:44px;height:44px;border-radius:9px;background:#fff center/cover no-repeat; border:1px solid var(--line); box-shadow:0 8px 20px rgba(0,0,0,.18); z-index:99999; pointer-events:none; transform:translate(-50%,-50%); transition:transform .6s cubic-bezier(.35,0,.25,1), opacity .6s ease-in} @keyframes xjBump{0%{transform:scale(1)} 35%{transform:scale(1.16)} 100%{transform:scale(1)}} .xj-bump{animation:xjBump .55s ease} /* 已进车：按钮上加个 ✓（**不改文字**，文字归"按板块换文案"那两处管），行轻轻高亮 */ [data-add-quote].in-cart, .rfq-add.in-cart, .sp-add.in-cart{ background:var(--green-700); border-color:var(--green-700)} [data-add-quote].in-cart::before, .rfq-add.in-cart::before, .sp-add.in-cart::before{ content:'✓ '} tr.in-cart{background:var(--sand-100)} /* ---------- 购物车抽屉「最大化」（张总 2026-09-30：「购物车可以窗口最大化」）---------- ★ 默认态**一个字都不改**（还是右侧窄抽屉 380–420px）；这里只定义**最大化态**。 ★ 为什么用 !important：抽屉默认态的定位/宽度由既有规则给（position/transform/width）， 最大化要**盖过**它们；写成 `.quote-bar.qb-max` + !important 是最不容易跟旧规则打架的做法， 而且全部收在这个类里 —— 去掉这个类就逐字回到原样。 */ .quote-bar.qb-max{position:fixed !important; inset:12px !important; width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; transform:none !important; z-index:9998; border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.28)} .quote-bar.qb-max .qb-body{max-height:none !important} .qb-max-btn{background:none; border:none; cursor:pointer; font-size:var(--fs-17); line-height:1; padding:4px 6px; margin-inline-end:2px; color:inherit; opacity:.7} .qb-max-btn:hover{opacity:1} /* 手机/窄屏：抽屉本来就是全屏，不需要这颗按钮 */ @media (max-width:760px){ .qb-max-btn{display:none} } /* ---------- 收藏（张总 2026-09-30 B5：「不想加购可以收藏，下次来还能看」）---------- ★ 位置/形状刻意与"添加到报价单"拉开：卡片**图片右上角**一颗圆钮、♡→♥ 两种状态。 （并排两颗同形状按钮 ⇒ 客户一定点错，这是本仓"两个动作要能一眼分开"的老规矩。） */ .pcard-fav{position:absolute; top:8px; inset-inline-end:8px; z-index:2; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--ink-3); cursor:pointer; font-size:var(--fs-16); line-height:1; padding:0} .pcard-fav:hover{border-color:#e0533d; color:#e0533d} .pcard-fav.on{color:#e0533d; border-color:#e0533d} /* ---------- 分类/筛选 ---------- *//* ★ 首页品类卡片 (七专家评审: 移动端品类丰富度 + 横滑体验) ★★ 2026-09-30（张总：「这里太突兀 横排排列铺满 没有满的 最后一个放完整目录」）： 原来 `.cat-tile` 是 `flex:0 0 150px` **固定宽** ⇒ 桌面下只有 2 个分类 + 1 张 「完整目录」时，三张卡挤在左边、右边留一大片空白（张总说的"太突兀"）。 现在分两档： · **桌面（>760px）**：一排**铺满整行**（可伸缩 + 允许换行）； 最后一张（内容上固定是「完整目录」）**吃余量** —— 分类数不足时由它补满。 · **窄屏（≤760px）**：退回**横滑**（与 2026-09-30 之前逐字一致）—— 手机上横滑本来是对的，不能为了"铺满"把卡片压成细条。 */ /* ★ 2026-10-15 视觉统一（张总："宽窄不和谐"）： 原来最后一张「完整目录」有 flex-grow:2，实测三张卡宽 278 / 278 / 396 —— 最宽的比最窄的多 42%，是全站最刺眼的一处不等宽。 改为 flex-basis:0 + grow:1 ⇒ **所有卡严格等宽**（余量平分）。 ★ 刻意保留 flex 而不改成 grid：≤760px 的横滑（overflow-x + scroll-snap + flex:0 0 150px）在 grid 容器上是完全惰性的，会**静默杀掉**手机横滑 且不报任何错。要等宽 + 要横滑，flex 是唯一两者兼得的写法。 */ .cat-scroll{display:flex; flex-wrap:wrap; gap:var(--grid-gap); padding-bottom:8px; scrollbar-width:none} .cat-scroll::-webkit-scrollbar{display:none} .cat-scroll .cat-tile{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); text-align:center; transition:.2s; min-height:140px; justify-content:center} .cat-scroll .cat-tile:hover{border-color:var(--green-500); box-shadow:var(--shadow); transform:translateY(-2px)} .cat-scroll .cat-tile .ic{font-size:var(--fs-34); line-height:1} .cat-scroll .cat-tile b{font-size:var(--fs-md); color:var(--ink)} .cat-scroll .cat-tile span{font-size:var(--fs-xs); color:var(--green-700); font-weight:650} /* 窄屏：横滑（旧口径原样保留） */ @media (max-width:760px){ .cat-scroll{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; gap:14px} .cat-scroll .cat-tile{flex:0 0 168px; scroll-snap-align:start} } /* ---------- 分类卡配图（2026-10-15 张总："这个也纳入整体考虑"） ★ 原来只有 emoji + 纯白底，和首屏/为什么选我们的实拍感脱节。 —— 改为同一套模式：有配图 → 图铺卡面（顶部），emoji 缩小成角标； 没配图 → 回落原样（.has-img 不存在就是原样式）。 ★ 「完整目录」那张（.cat-tile-all）2026-10-15 口径是不参与配图； 2026-10-16 张总批注「放上图片 后台可以换」⇒ 已给**专属图位 home_cats_all** （IMAGE_SETS ⑥），有图时走与分类卡同一套 .has-img 结构（图铺卡面+🔍角标）。 */ .cat-scroll .cat-tile.has-img{padding:0; align-items:stretch; text-align:start; justify-content:flex-start; gap:0; overflow:hidden; position:relative} /* ★ 2026-10-15 视觉统一：16/10 → --ratio-square(1/1)。 依据：static/img/home/cat-*.jpg 实测 800x800 = 1:1， 进 16/10 框每边裁 18.75% —— 树冠和花盆底座同时被切， 而 background-position:center 保证它从正中切，最不能切的位置正是主体。 改 1/1 后零裁切，且移动端那条"150px 宽只剩 94px 高像压扁色带"的 旧抱怨（main.css:481 注释）自动消失。 */ .cat-tile-img{display:block; width:100%; aspect-ratio:var(--ratio-square); background-size:cover; background-position:center; flex:none} /* 分类卡角标：这里**只管定位**（压在图的左上角）； 尺寸/底色/圆角/描边统一由文末的全局 .cat-scroll .cat-tile.has-img .ic 决定。 ★ 之前两处各写一遍尺寸，结果文末那条把这条的 34px 覆盖成了 38px， 分工不清就是样式走样的起点。 */ .cat-scroll .cat-tile.has-img .ic{position:absolute; top:10px; inset-inline-start:10px; z-index:1; margin-bottom:0!important; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)} .cat-scroll .cat-tile.has-img b{padding:14px 14px 0} .cat-scroll .cat-tile.has-img span:last-child{padding:6px 14px 16px} /* 完整目录卡：与分类卡同构（2026-10-15 张总"风格统一"） —— 原来是纯绿实底大块，夹在两张实拍图卡旁边像另一个网站的组件。 —— 改为深色浅底 + 同圆角描边，只靠**底色深浅**区分"兜底入口"， 不再用"另一个形状语言"。flex-grow:2 吃余量的原口径保持不动。 ★★ 全部走主题变量：--green-900 在四套皮肤里分别是绿/蓝/橙/深灰， 语义是"主色最深档"。这里**绝不能写死绿色值**，否则换皮肤会脱节 （张总："不能只考虑绿色 后台有皮肤 要考虑适配 统筹到全局"）。 */ /* ★★ 2026-10-15 截图验收后修正（张总「色块不 harmonious/色块不和谐」的真凶）： 这块原来是**整块深绿实底**，在实拍图卡旁边像"另一个网站的组件"， 而且它是首页除报价流程外**第二块深色**—— 与"深色只留 1 块"直接冲突。 改为与 .cat-tile 完全同构的浅沙底 + 同描边，只靠一个虚线箭头图标 表达"这是兜底入口"。深绿留给 .sec-dark 那唯一一段。 */ .cat-scroll .cat-tile-all{background:var(--surface-1); border-style:dashed; border-color:var(--green-700)} /* ★ 2026-10-16 张总批注「放上图片」：带图态把虚线收成实线 —— 虚线的语义是"这里缺东西"，既然有图了就别再说它缺； 与分类卡（实线描边）完全同构。 */ .cat-scroll .cat-tile-all.has-img{border-style:solid; border-color:var(--line)} .cat-scroll .cat-tile-all:hover{border-color:var(--gold); box-shadow:var(--shadow); transform:translateY(-2px)} .cat-scroll .cat-tile-all b{color:var(--ink)} .cat-scroll .cat-tile-all span{color:var(--ink-2)} .cat-scroll .cat-tile-all .ic{font-size:var(--fs-30)!important; color:var(--green-700)} /* ---------- 双基地卡（2026-10-15 张总"这两块统筹考虑 风格统一起来"） ★ 与 .why-card / .cat-tile 完全同构：图铺上方 + emoji 缩成角标 + 同圆角描边。 —— 原来这里是 emoji + 纯白面板，下方还另挂一排 200px 高的小图， 同一板块两套语言；现已删掉那排小图（同图放进卡片语义更清楚）。 —— 图比例取 21:9（比 16:9 更扁），两块并排时页面不会被图撑得太长。 */ .base-card{padding:0; margin:0; overflow:hidden; display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease} .base-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,40,32,.12)} /* ★ 2026-10-15 视觉统一：21/9 → --ratio-landscape(16/9)。 依据：static/img/home/factory-*.jpg 实测 1600x900 = 16:9， 进 21/9 框左右各裁 11.9%，16/9 是零裁切。 */ .base-card-img{width:100%; aspect-ratio:var(--ratio-landscape); background-size:cover; background-position:center; flex:none} .base-card.has-img .base-card-bd{background:linear-gradient(180deg,rgba(255,255,255,.92),#fff 26px)} .base-card-bd{padding:26px; flex:1; display:flex; flex-direction:column} /* 角标样式见上方全局 .why-ico/.base-ico/.cat-tile.has-img .ic 合并规则 */ /* ★ 2026-10-15 视觉统一：这条原来在 ≤640px 改成 16/7（2.286）， 比基线 21/9（2.333）**更扁** —— 方向是反的：屏幕越窄图越扁， 而源图是 1600x900 横构图，基线改 16/9 后本就是零裁切。 改回 16/9：手机端保留全幅横图（1 列铺满屏宽），不再压成色带。 */ @media (max-width:640px){ .base-card-img{aspect-ratio:var(--ratio-landscape)} } /* ════════ 配图版的三处移动端适配（2026-10-15 张总："手机适配 不要忽略"）════════ ① 分类卡横滑时宽度从 150px 放宽到 168px —— 150px 放 16:10 的图之后 图只剩 94px 高，看着像一条压扁的色带，看不出是什么。 ② 为什么选我们g4 在 ≤640px 是 2×2，但图版卡片比纯文字卡高， 2×2 会把页面撑得很长 ⇒ ≤640px 改成 1 列（本来就是竖读） —— 既有 2026-09-30 定的"手机上横滑是对的"这条不动，只调宽度。 */ @media (max-width:760px){ .cat-scroll .cat-tile{flex:0 0 168px} /* ★ 手机端角标缩小：必须用**更靠后的选择器权重**或 !important， 否则会被文末那条全局 .cat-scroll .cat-tile.has-img .ic 的 38px 盖掉 （这是本文件里"媒体查询写在中间、全局规则写在末尾"的结构性坑）。 */ .cat-scroll .cat-tile.has-img .ic{top:8px; inset-inline-start:8px; width:30px!important; height:30px!important; font-size:var(--fs-16)!important} } @media (max-width:640px){ /* 图版卡片：1 列铺满，图能横着铺满屏宽，比 2×2 小方块好看得多 */ /* 2026-10-15 张总"手机适配不要忽略"： 为什么选我们在 ≤1080px 是 2×2；加了 16:9 配图后 2×2 会把手机页撑得很长， 手指要滑很久才到下一个板块 ⇒ 手机上改 1 列。纯文字卡的 2×2 语义不变。 */ .why-card{margin-bottom:14px} /* ★ 2026-10-15：原来这里在 ≤640px 反而改成 21/9（更扁）， 与"越窄越扁"是同一个反向病根。1 列铺满时用基线 16/9 才够看。 */ .why-card-img{aspect-ratio:var(--ratio-landscape)} /* 真正把 2×2 改成 1×4：只加 margin 的话卡片还是并排两列 */ #sec-home_why .g4{grid-template-columns:1fr} } @media (max-width:420px){ .cat-scroll .cat-tile{flex:0 0 152px} } .filters{display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); margin-bottom:30px} .chips{display:flex; gap:8px; flex-wrap:wrap} .chip{padding:7px 15px; border:1px solid var(--line); border-radius:100px; font-size:var(--fs-sm); background:#fff; cursor:pointer; white-space:nowrap; transition:.15s} .chip:hover{border-color:var(--green-600); color:var(--green-700)} .chip.on{background:var(--green-700); color:#fff; border-color:var(--green-700)} /* ★★ 2026-09-30（张总「这里切换品类跳转就在框内」）：样品板 / 报价板的类目 chip 是**服务端链接**（整页刷新、URL 可分享），href 带 `#sec-…_board` 让刷新后停回这一板。 `.hdr` 是 `position:sticky; top:0`、70px 高 ⇒ 不留这一段 margin，跳过去的标题会被 站头压住，"停在框内"会变成"停在一板看不见的标题上"。84 = 70 + 14 呼吸位。 */ #sec-samples_board,#sec-rfq_board{scroll-margin-top:84px} .searchbox{position:relative; margin-inline-start:auto} .searchbox input{padding:9px 14px 9px 36px; border:1px solid var(--line); border-radius:100px; width:230px; font-size:var(--fs-sm)} html[dir="rtl"] .searchbox input{padding:9px 36px 9px 14px} .searchbox::before{content:'⌕'; position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:var(--fs-16)} /* ---------- 分页 ---------- */ .pager{display:flex; gap:8px; justify-content:center; margin-top:44px; flex-wrap:wrap} .pager a,.pager span{padding:9px 15px; border:1px solid var(--line); border-radius:6px; font-size:var(--fs-md); background:#fff} .pager a:hover{border-color:var(--green-600); color:var(--green-700)} .pager .on{background:var(--green-700); color:#fff; border-color:var(--green-700)} /* ---------- 表格 ---------- */ .tbl{width:100%; border-collapse:collapse; font-size:var(--fs-md)} .tbl th{text-align:start; padding:12px 14px; background:var(--sand-100); font-weight:650; font-size:var(--fs-sm); letter-spacing:.02em; border-bottom:1px solid var(--line); white-space:nowrap} .tbl td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tbody tr:hover{background:var(--sand-50)} .tbl .num{text-align:end; font-variant-numeric:tabular-nums} .tbl-wrap{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff} .tbl-wrap.scroll{overflow-x:auto} /* ---------- 阶梯价表 ---------- */ .tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden} .tier{background:#fff; padding:14px 12px; text-align:center} .tier:nth-child(1){background:var(--green-100)} .tier b{display:block; font-size:1.32rem; color:var(--green-800); font-weight:800; font-variant-numeric:tabular-nums} .tier span{font-size:var(--fs-xs); color:var(--ink-3)} .tier em{display:block; font-size:var(--fs-2xs); font-style:normal; color:var(--gold-dark); font-weight:700} /* ---------- 表单 ---------- */ .form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px} .field{display:flex; flex-direction:column; gap:6px} .field.full{grid-column:1/-1} .field label{font-size:var(--fs-sm); font-weight:600; color:var(--ink-2)} .field label .req{color:var(--red)} .field input,.field select,.field textarea{ padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; font-size:var(--fs-md); transition:.15s; width:100%} .field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(45,122,84,.12)} .field textarea{resize:vertical; min-height:110px} .field .hint{font-size:var(--fs-xs); color:var(--ink-3)} .field.err input,.field.err select,.field.err textarea{border-color:var(--red); background:#fff7f6} .form-note{font-size:var(--fs-xs); color:var(--ink-3); margin-top:4px} .alert{padding:13px 16px; border-radius:var(--radius); font-size:var(--fs-md); margin-bottom:18px; display:none} .alert.show{display:block} .alert-ok{background:var(--green-100); color:var(--green-800); border:1px solid #b8dcc8} .alert-err{background:#fdecea; color:#a83226; border:1px solid #f5c6c0} /* ---------- 卡片/面板 ---------- */ /* ★ 2026-10-15 9 门外语窄屏：`.panel` 是 grid 容器，直接子项（无 class 的列 div） 默认 `min-width:auto`，长词语种（俄/印尼）单列内容撑到 176px 并把整页顶出 34px 横向滚动条。逐个子项封 min-width:0，让长词折行而不是撑破。 —— 只在 ≤820px（面板变两列时）改列定义，桌面维持原有单列排版。 */ .panel{border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; background:#fff} .panel > *{min-width:0} @media (max-width:820px){ .panel{grid-template-columns:repeat(2,minmax(0,1fr))} } .panel-sand{background:var(--sand-50); border-color:var(--sand-200)} .panel h3{margin-bottom:14px} /* ---------- 「为什么选我们」卡片配图（2026-10-15 张总："这块区域也对应图片"） ★ 原来 4 张卡片只有 emoji + 纯白底，和首屏的实拍感完全脱节。 —— 有配图时：图铺卡片顶部（16:9），正文压在下半部分； padding:0 + 内部 .why-card-bd 补回内边距 ⇒ 图能真正顶到卡片边缘。 —— 无配图时：.has-img 不存在，卡片退回原来 .panel 的样子（emoji + 白底）， 所以后台清空图片也不会开天窗。 */ .why-card{padding:0; overflow:hidden; display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease} .why-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,40,32,.12)} .why-card-img{width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; flex:none} /* 图上到正文之间加一条极淡的渐变，让过渡不生硬 */ .why-card.has-img .why-card-bd{background:linear-gradient(180deg,rgba(255,255,255,.92),#fff 26px)} .why-card-bd{padding:26px; flex:1; display:flex; flex-direction:column} /* 配图后 emoji 缩小当角标：保留功能识别度，但不抢实拍的戏。 ★★ 全局唯一一份（2026-10-15 张总"统筹到全局"）： 为什么选我们 / 双基地 / 分类卡三类卡的角标**长得完全一样**， 所以必须共用同一个类 —— 之前是三处各写一遍，改一处忘两处就会走样。 ★ 色值全部走主题变量：--green-900 在四套皮肤里是绿/蓝/橙/深灰， 写死绿色会换皮肤即脱节。 */ .why-ico.is-on-img, .base-ico.is-on-img, .cat-scroll .cat-tile.has-img .ic{ font-size:var(--fs-22)!important; margin-bottom:10px!important; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--green-900); opacity:.9; /* 角标压在实拍图上，必须自带描边才能在任何亮度的图上被看见 */ box-shadow:0 2px 8px rgba(0,0,0,.28) } /* ---------- 视频看厂占位（有实拍图时用图当封面） —— 无图才保留虚线框（= "确实缺东西"的诚实表达）； 有图则是"实拍车间 + 播放引导"，可信度高得多。 */ .video-poster{position:relative; overflow:hidden; text-decoration:none} .video-poster-img{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0} /* ★ 2026-10-15 实拍图换上后立刻暴露的问题：文字原本是 flex 居中压在**图中间**， 而车间实拍本身就亮（中灰墙面 + 白色货架）⇒ "工厂视频即将上线"那行直接被吃掉。 两处一起改才根治： ① 暗纱加强并**加重下方**，把对比度集中在文字所在的底部； ② 文字改为**底部左对齐**（海报惯例），不再压在图像主体上。 暗纱刻意不加到"看不清图"的程度 —— 实拍信息本身就是这版要卖的东西。 */ .video-poster.has-img{align-items:flex-end; justify-content:flex-start} .video-poster.has-img::after{content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(var(--green-900-rgba),.18) 0%,rgba(var(--green-900-rgba),.30) 42%,rgba(var(--green-900-rgba),.86) 100%); pointer-events:none} .video-poster.has-img{border-style:solid; border-color:rgba(255,255,255,.18)} .video-poster.has-img .video-poster-txt{position:relative; z-index:1; width:100%; justify-content:flex-start; text-align:start} .video-poster-txt{display:flex; align-items:center; justify-content:center; gap:14px} /* ══════════ 共用「视频看厂」片段 .fv（2026-10-16 张总批「视频窗口太丑」）══════════ 模板：`partials/_factory_video.html` —— **首页视频段与工厂页共用一份**， 改一次两处同步（真源唯一，不会再"改了工厂页忘了首页"）。 ★★ 为什么不做成裸 `