/* ========================================================== 0.005类茶 官网样式（WordPress 主题版） 墨绿为骨 · 金色为礼 · 米白为境 跟 preview/assets/style.css 一模一样，只改了两处： 1. 首屏背景图不再写死 url(../img/hero.jpg)，改由后台「首屏大图」卡片控制 （functions.php 会输出 .hero-bg{background-image:url(...)}） 2. 文件末尾补了几条 WordPress 版专用规则 ========================================================== */ :root{ --forest:#1E3A2F; --forest-deep:#152A21; --forest-ink:#12241C; --gold:#C9A227; --gold-soft:#D9C9A3; --cream:#F6F2E9; --cream-2:#FBF8F1; --line:rgba(43,59,51,.14); --ink:#22312A; --ink-2:#5E6E64; --paper:#F2EDE2; --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",SimSun,serif; --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{display:block;max-width:100%} a{text-decoration:none;color:inherit} ul{list-style:none;margin:0;padding:0} h1,h2,h3,h4,p{margin:0} .wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 48px} /* * 「读列」：正文那一栏整体居中。 * * /origin/ 早就是这么做的 —— 那个页面的正文容器同时带着 .wrap 和 .og-narrow， * .wrap 给的 margin:0 auto 加上窄一点的 max-width，这一栏自然落在页面正中间。 * /brand/ 和 /news/（列表 + 详情）原来只写了 max-width、没写 auto，所以一边倒贴在左边。 * 这里把同一种做法抽成一个类，三处共用。 * * 关键是「居中」的是栏，不是字：栏里的文字仍然左对齐（text-align 一个字没动）。 * 通栏大图、页脚不进读列 —— /origin/ 的横幅大图也是通栏的。 */ .read-col{width:100%;max-width:45em;margin-left:auto;margin-right:auto} .read-col.wide{max-width:62em} /* ---------- 导航 ---------- */ .nav{ position:sticky;top:0;z-index:60;background:var(--forest); border-bottom:1px solid rgba(217,201,163,.32); } /* * Logo 和菜单是一组，一起摆在整条栏的正中。 * 不是各贴一头 —— 右边那个电话删掉以后，中间空出四百多像素，看着像断成两截； * 也不是把 Logo 压在菜单上面，两者之间留着 gap，各占自己的位置。 */ .nav-inner{height:76px;display:flex;align-items:center;justify-content:center;gap:72px} .logo{ font-family:var(--serif);font-size:23px;letter-spacing:2px;color:var(--gold); white-space:nowrap; } .logo span{font-size:16px;opacity:.9;margin-left:4px} .menu{display:flex;gap:42px} .menu a{ position:relative;font-size:15px;letter-spacing:1.5px;color:#EDE7DA; padding:6px 0;transition:color .25s; } .menu a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--gold);transition:right .3s ease; } .menu a:hover{color:var(--gold)} .menu a:hover::after{right:0} /* * 当前所在的那一项：金色和那条下划线一直挂着，鼠标移开也不退。 * 其他项仍是上面的 hover 动画，两边互不影响。 * class 由 functions.php 的 tea5_nav_cur_attr() 按地址算出来（不按第几个）。 */ .menu a.cur{color:var(--gold)} .menu a.cur::after{right:0} .nav-tel{ font-size:15px;letter-spacing:1px;color:var(--gold); border:1px solid rgba(201,162,39,.55);padding:9px 18px;transition:.25s; } .nav-tel:hover{background:var(--gold);color:var(--forest-deep)} .mnav-toggle{display:none} .mnav-btn{display:none} /* ---------- 屏1 头图 ---------- */ /* * 首屏的「压暗」全走下面这些变量，默认值 = 设计稿原来的样子。 * 后台「首屏大图 → 压暗」或前台右键首屏图片改完， * 由 functions.php 的 #tea5-dynamic 把新值盖上去（变量会往下继承，伪元素也认）。 * --hf1..5 电脑：两层渐变的五个色停（左 / 中间 / 右 / 顶部 / 透明端） * --hs1..3 手机：改成纵向一条，上亮下暗 * --hfb 图片亮度（.86 = 原设计） * --hfsat 图片鲜艳度（.8 = 原设计） */ .hero{ --hf1:rgba(18,36,28,.95); --hf2:rgba(18,36,28,.87); --hf3:rgba(18,36,28,.55); --hf4:rgba(18,36,28,.45); --hf5:rgba(18,36,28,0); --hs1:rgba(18,36,28,.55); --hs2:rgba(18,36,28,.82); --hs3:rgba(18,36,28,.94); --hfb:.86; --hfsat:.8; position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden } /* * 首屏底图分两层，图片地址都来自 .hero 上的 --hero-img（后台「首屏大图」写入）： * .hero-blur 铺满整屏的同一张图，虚化压暗，当「垫底」 * .hero-bg 真正的照片，尺寸和位移可调 * 缩小时照片会小于框架，空出来的地方露的是虚化的同图，不是一块浅灰底色。 */ .hero-blur{ position:absolute;inset:-60px; background-image:var(--hero-img,none); background-position:center;background-size:cover;background-repeat:no-repeat; filter:blur(32px) brightness(.45) saturate(var(--hfsat,.8)); transform:translateZ(0); } .hero-bg{ position:absolute;inset:0; /* * 照片层。尺寸与位移不再用 transform:scale —— * 那样「缩小」只是把已经裁好的画面整体缩小，两边露出底色，看不到原图左右的内容。 * 现在由 functions.php 的 tea5_fit_js() 按「cover × 倍数」算出具体像素， * 写进 --fit-bgsize（照片多大）/ --fit-bgpos（照片在框里往哪挤）： * 100% = 铺满框架（= 原来的 cover），往下调就是照片变小、看到原图更多部分。 * 位移必须走 background-position，不能走 transform：transform 挪的是「这一层」， * 层只有一屏宽，一挪右边就露出底下的虚化图，照片明明还有一大截没显示。 */ background-image:var(--hero-img,none); background-position:var(--fit-bgpos,50% 50%);background-size:var(--fit-bgsize,cover);background-repeat:no-repeat; transform:scale(1.02); filter:saturate(var(--hfsat,.8)) brightness(var(--hfb,.86)); } .hero::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg,var(--hf1) 0%,var(--hf2) 38%,var(--hf3) 100%), linear-gradient(180deg,var(--hf4) 0%,var(--hf5) 30%); } .hero-inner{position:relative;z-index:2;padding:150px 0 130px} .eyebrow{ font-size:14px;letter-spacing:5px;color:var(--gold-soft); display:flex;align-items:center;gap:14px; } .eyebrow::before{content:"";width:40px;height:1px;background:var(--gold)} .hero h1{ font-family:var(--serif);font-weight:600; font-size:clamp(34px,4.4vw,62px);line-height:1.34;letter-spacing:3px; color:#fff;margin:26px 0 0;max-width:15em; } .hero h1 em{font-style:normal;color:var(--gold)} .hero-sub{ margin-top:24px;font-size:17px;letter-spacing:2px;color:rgba(255,255,255,.78); } .hero-actions{display:flex;gap:18px;margin-top:48px} .btn{ display:inline-flex;align-items:center;justify-content:center; height:54px;padding:0 36px;font-size:15px;letter-spacing:3px; border:1px solid var(--gold);transition:.3s; } .btn-gold{background:var(--gold);color:#14251C;border-color:var(--gold)} .btn-gold:hover{background:#dcb63a;border-color:#dcb63a} .btn-ghost{color:var(--gold-soft);border-color:rgba(217,201,163,.5)} .btn-ghost:hover{color:var(--forest-deep);background:var(--gold-soft);border-color:var(--gold-soft)} .scroll-hint{ position:absolute;left:50%;bottom:38px;transform:translateX(-50%);z-index:2; font-size:12px;letter-spacing:4px;color:rgba(255,255,255,.55); display:flex;flex-direction:column;align-items:center;gap:10px; } .scroll-hint span{display:block;width:1px;height:46px;background:linear-gradient(180deg,transparent,var(--gold))} /* ---------- 通用区块 ---------- */ .section{padding:132px 0;scroll-margin-top:76px} /* * 屏里正文这一层统一抬到 2。 * * 为什么要有这一条：空白处新增的自由块是整页一层（.tea-free）， * 想让右键「往下叠一层」真的能把块压到文字下面，正文就得有个明确的层级 —— * 块沉到 1，就落在正文（2）下面、屏背景（auto）上面。 * 首屏 .hero-inner 本来就是 2，这里不重复给；hero 里有自己的底图和遮罩，不能碰。 * 已经查过：.section / .proof 的直接子元素都是普通排版块（.wrap 这类）， * 底下那几个绝对定位的装饰（时间轴圆点、品牌横线）都挂在自身 relative 的元素上， * 这里补 position:relative 不会让它们跑位。 */ .section > *,.proof > *{position:relative;z-index:2} .cream{background:var(--cream);color:var(--ink)} .dark{background:var(--forest);color:#E9E3D6} .ink{background:var(--forest-ink);color:#E9E3D6} .kicker{ font-size:13px;letter-spacing:5px;color:var(--gold); display:flex;align-items:center;gap:12px;margin-bottom:22px; } .kicker::before{content:"";width:26px;height:1px;background:var(--gold)} .kicker.light{color:var(--gold-soft)} .kicker.light::before{background:var(--gold-soft)} .h2{ font-family:var(--serif);font-weight:600; font-size:clamp(30px,3.2vw,46px);line-height:1.42;letter-spacing:2px; } /* * pre-line：后台导语 / 卡片描述是 textarea，可以敲多行。 * 页面渲染时 tea5_multi() 会把换行变成
，看着没问题； * 但前端双击改字时编辑器写回去的是纯文本里的 \n， * white-space 默认值会把它当空格折掉 —— 一进编辑状态两行就粘成一行。 * pre-line 让 \n 也当换行显示，编辑态和保存后看到的一样。 * （只折叠空格、不保留源码里的缩进，所以模板排版不受影响） */ .lead{margin-top:26px;font-size:17px;line-height:2;color:var(--ink-2);white-space:pre-line} .body{font-size:16px;line-height:2.1;color:var(--ink-2);margin-top:22px} .dark .body,.ink .body{color:rgba(233,227,214,.72)} /* ---------- 屏2 五条标准 ---------- */ .standards{ display:grid;grid-template-columns:repeat(5,1fr); margin-top:78px;border-top:1px solid var(--line); } .std{padding:40px 26px 44px;border-right:1px solid var(--line);transition:background .3s} .std:last-child{border-right:0} .std:hover{background:var(--cream-2)} .std .num{ display:block;font-family:var(--serif);font-size:40px;line-height:1; color:var(--gold);opacity:.9; } .std h3{ font-family:var(--serif);font-size:19px;letter-spacing:1px; margin:22px 0 14px;font-weight:600; } .std p{font-size:14px;line-height:1.95;color:var(--ink-2);white-space:pre-line} /* ---------- 屏3 产地 ---------- */ .origin-grid{ display:grid;grid-template-columns:0.92fr 1.08fr;gap:96px;align-items:center; } .origin-photo{margin:0} .origin-photo img{ width:100%;aspect-ratio:3/4;object-fit:cover; filter:saturate(.82) brightness(.95) contrast(1.02); } /* * 图片 + 说明文字的外层。它才是网格里那一格， * 里面图 figure 与说明 .origin-cap 是兄弟 —— 前端编辑里各动各的，谁拖都不带对方。 * min-width:0：网格子项默认最小宽是内容宽，不写的话拖窄了不肯变。 */ .origin-fig{min-width:0} .origin-cap{ margin-top:16px;font-size:12px;letter-spacing:1.5px;color:rgba(233,227,214,.5); } .dark .h2{color:#F3EEE2} .timeline{margin-top:40px;border-left:1px solid rgba(217,201,163,.28);padding-left:26px} .timeline li{position:relative;padding:0 0 22px} .timeline li:last-child{padding-bottom:0} .timeline li::before{ content:"";position:absolute;left:-31px;top:8px; width:9px;height:9px;border:1px solid var(--gold);border-radius:50%; background:var(--forest); } .timeline b{ display:block;font-family:var(--serif);font-size:20px;color:var(--gold); letter-spacing:2px;margin-bottom:6px;font-weight:600; } .timeline span{font-size:14px;line-height:1.9;color:rgba(233,227,214,.65)} /* 第 157 轮：列数跟着「没被删掉的那几块」走（模板在 .stats 上写 style="--n:N"）。 写死 repeat(4,1fr) 的话，删掉一两块会留下 1/4 的空档和一条悬空的竖线。 一块不剩时模板根本不会输出 .stats，这里的 --n 只是个兼容默认值。 */ .stats{ display:grid;grid-template-columns:repeat(var(--n,4),1fr); margin-top:96px;border-top:1px solid rgba(217,201,163,.22); border-bottom:1px solid rgba(217,201,163,.22); } .stat{text-align:center;padding:44px 12px;border-right:1px solid rgba(217,201,163,.16)} .stat:last-child{border-right:0} .stat .v{ font-family:var(--serif);font-size:clamp(30px,3vw,44px);color:var(--gold); line-height:1;letter-spacing:1px; } .stat .v i{font-style:normal;font-size:16px;margin-left:4px;opacity:.85} .stat .k{margin-top:16px;font-size:13px;letter-spacing:3px;color:rgba(233,227,214,.55)} /* ---------- 屏4 品牌故事 ---------- */ .story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:96px;align-items:center} .story-text blockquote{ margin:40px 0 0;padding-left:26px;border-left:2px solid var(--gold); font-family:var(--serif);font-size:21px;line-height:1.95;letter-spacing:1px;color:var(--ink); } .sign{margin-top:26px;font-size:14px;letter-spacing:1px;color:var(--ink-2)} .link-more{ display:inline-flex;align-items:center;gap:10px;margin-top:34px; font-size:15px;letter-spacing:2px;color:var(--ink); border-bottom:1px solid var(--gold);padding-bottom:8px; } .link-more i{font-style:normal;color:var(--gold);transition:transform .25s} .link-more:hover i{transform:translateX(6px)} /* 深绿底上的变体（茶园溯源那一屏的「查看完整演化史」）：深色字看不见，改成浅字 */ .link-more.light{color:#F3EEE2} .story-photo{margin:0} .story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover} /* ---------- 屏5 产品 ---------- */ .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;flex-wrap:wrap} .sec-note{ max-width:320px;font-size:14px;line-height:1.95; color:rgba(233,227,214,.55);border-left:1px solid rgba(217,201,163,.3);padding-left:20px; white-space:pre-line; /* 跟前端编辑配合：这个字段是多行的，\n 要当换行显示 */ } .ink .h2{color:#F3EEE2} /* 电脑版一行 4 个（原来 3 个）：卡窄了，内边距和价格跟着收一点 */ .products{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:72px} .pcard{ background:#1A2D24;border:1px solid rgba(217,201,163,.16); transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease; } .pcard:hover{ transform:translateY(-8px);border-color:rgba(217,201,163,.5); box-shadow:0 24px 50px -20px rgba(0,0,0,.65); } .pimg{ background:var(--paper);padding:26px; display:flex;align-items:center;justify-content:center; aspect-ratio:1/1;overflow:hidden; } .pimg img{max-height:100%;width:auto;object-fit:contain} .pbody{padding:28px 24px 30px} .pbody h3{ font-family:var(--serif);font-size:21px;letter-spacing:2px;font-weight:600;color:#F3EEE2; } .spec{margin-top:12px;font-size:13px;letter-spacing:1.5px;color:rgba(233,227,214,.5)} .price{ font-family:var(--serif);font-size:32px;color:var(--gold);margin-top:22px;letter-spacing:1px; } .price i{font-style:normal;font-size:17px;margin-right:4px;vertical-align:6px} .pmore{ display:inline-block;margin-top:24px;font-size:13px;letter-spacing:3px; color:rgba(233,227,214,.65);border-bottom:1px solid rgba(217,201,163,.35); padding-bottom:7px;transition:.3s; } .pcard:hover .pmore{color:var(--gold);border-color:var(--gold)} /* ---------- 屏6 617 ---------- */ .proof{ background:var(--forest);text-align:center;padding:124px 0; border-top:1px solid rgba(217,201,163,.18); } .proof-kicker{font-size:13px;letter-spacing:6px;color:rgba(233,227,214,.5)} .proof-big{ font-family:var(--serif);font-size:clamp(96px,13vw,168px);line-height:1; color:var(--gold);letter-spacing:6px;margin:14px 0 6px; } .proof-text{font-size:19px;letter-spacing:3px;color:#EDE7DA} .btn-outline-gold{ margin-top:44px;height:52px;padding:0 40px; border:1px solid rgba(217,201,163,.55);color:var(--gold-soft); } .btn-outline-gold:hover{background:var(--gold);color:var(--forest-deep);border-color:var(--gold)} /* ---------- 屏7 动态 ---------- */ .news{margin-top:64px;border-top:1px solid var(--line)} .news li{border-bottom:1px solid var(--line)} .news a{ display:grid;grid-template-columns:170px 1fr auto;gap:40px;align-items:center; padding:36px 8px;transition:.3s; } .news a:hover{background:var(--cream-2);padding-left:20px} .news a:hover h3{color:#8A6E14} .news time{font-family:var(--serif);font-size:15px;letter-spacing:2px;color:var(--ink-2)} .news h3{ font-family:var(--serif);font-size:21px;letter-spacing:1px;font-weight:600; transition:color .3s; } .news p{margin-top:12px;font-size:14px;line-height:1.9;color:var(--ink-2);max-width:62em} .news .src{ font-size:12px;letter-spacing:2px;color:var(--ink-2); border:1px solid var(--line);padding:7px 14px;white-space:nowrap; } /* * 右边那一列：栏目小牌 + 来源，竖着摞。 * 栏目小牌本来顶在标题上方，每条都被它撑高一截，标题也跟左边的日期对不齐； * 挪到右列跟来源配成一竖：左日期 / 中标题 / 右身份，三段一眼到底。 */ .nt-side{ display:flex;flex-direction:column;align-items:flex-end;gap:9px; } /* * 标题跟下面那句简言之间留点空。 * 以前的距离靠 .news p 的 margin-top：只对「里面带

的摘要」生效， * 后台直接写的一句纯文字没有

，于是标题和简言完全贴在一起。 * 这里给整块摘要加上边距，两种写法都有呼吸；带格式时首段不再叠一层。 */ .news .nt > .tea-rt{ margin-top:14px;font-size:14px;line-height:1.9;color:var(--ink-2);max-width:62em; } .news .nt > .tea-rt > :first-child{margin-top:0} /* * 置顶：日期那一列，年月日上面挂一块金色小牌。 * 放在日期正上方是列表里最不抢眼的位置 —— 不压标题、不挤来源， * 但一眼扫下去又能马上看出哪一条是顶上去的。 */ .nt-date{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .nt-top{ display:inline-block;padding:5px 9px; font-size:11px;line-height:1;letter-spacing:2px; color:var(--forest-deep);background:var(--gold); } /* * 「茶事动态」单独页（/news/）。 * 排版跟首页那一屏完全一样，只多两样： * 1) 没有原文链接的条目不用 （避免点了跳回页顶），但位置尺寸要一模一样 → .nt-row * 2) 「共 N 条」和底部「回首页」 */ .news .nt-row{ display:grid;grid-template-columns:170px 1fr auto;gap:40px;align-items:center; padding:36px 8px; } .news-total{ margin-top:20px;font-size:13px;letter-spacing:2px;color:var(--ink-2); } /* * 列表页的页头（眉标 + 大标题）压在读列正中。 * * 照 /origin/ 的 .og-head 那样用 text-align 居中，不靠元素上的拖拽偏移量（--tx）凑： * 偏移是照旧版面算死的像素数，读列一换宽度，+324px 就变成「歪出去一截」。 * 居中的仍然只是这一栏里的一行字；筛选、条目列表照旧左对齐。 */ .news-hero .read-col > .kicker{justify-content:center} .news-hero .read-col > .h2{text-align:center} .news-back{margin-top:44px;font-size:13px;letter-spacing:2px} .news-back a{color:var(--gold);border-bottom:1px solid rgba(201,162,39,.45);padding-bottom:3px} .news-back a:hover{color:#8A6E14} /* * 栏目筛选（/news/?tea_cat=story|news）。 * 这一页是全站文章的总出口：默认全部，顶上三颗按钮挑着看。 */ .news-filter{ display:flex;flex-wrap:wrap;gap:10px; margin:36px 0 0;padding:0;list-style:none; } .news-filter a{ display:inline-flex;align-items:center;gap:8px; padding:8px 16px;border:1px solid var(--line); font-size:13px;letter-spacing:2px;color:var(--ink-2);transition:.25s; } .news-filter a:hover{border-color:rgba(201,162,39,.6);color:#8A6E14} .news-filter a.is-on{background:var(--gold);border-color:var(--gold);color:var(--forest-deep)} .news-filter em{font-style:normal;font-size:11px;opacity:.75} /* 列表里那个「栏目」小牌（现在挪到右列、来源上方，间距由 .nt-side 的 gap 管） */ .nt-cat{ display:inline-block; font-size:11px;letter-spacing:2px;line-height:1; color:var(--ink-2);border:1px solid var(--line);padding:5px 9px; } .nt-cat.is-story{ color:#8A6E14;border-color:rgba(201,162,39,.55);background:rgba(201,162,39,.08); } /* 详情页：面包屑的分隔符 + 栏目小牌（现在跟来源凑成一竖、靠右） */ .news-crumb-sep{margin:0 10px;color:var(--ink-2);opacity:.45} .news-dcat{ display:inline-block; font-size:11px;letter-spacing:3px; color:#8A6E14;border:1px solid rgba(201,162,39,.55);background:rgba(201,162,39,.08); padding:5px 11px; } /* 产品中心独立页（/products/）底部的「回首页」 */ .products-back{margin-top:56px;font-size:13px;letter-spacing:2px} .products-back a{color:var(--gold);border-bottom:1px solid rgba(201,162,39,.45);padding-bottom:3px} .products-back a:hover{color:#E3CB8A} /* ========================================================== 茶园溯源独立页（/origin/） 首页那一屏只露出前 3 条时间线，完整版在这里： 深绿段（居中标题头 → 横幅大图 → 限宽引言 → 完整时间轴 → 四个数据） + 米白段（演化史七章 + 结语的正文）。 ========================================================== */ /* 标题头：眉标 / 大标题 / 副标题，全部居中 */ .og-head{text-align:center} .og-head .kicker{justify-content:center} .og-head .kicker::before{display:none} .og-sub{ margin:28px auto 0;max-width:36em; font-size:17px;line-height:2.05;letter-spacing:1px;color:rgba(233,227,214,.72); white-space:pre-line; } /* 横幅大图 */ .og-cover{margin-top:72px} .og-cover figure{margin:0} .og-cover img{ width:100%;aspect-ratio:16/9;object-fit:cover; filter:saturate(.82) brightness(.95) contrast(1.02); } .og-cover figcaption, .og-cover .og-cap{ margin-top:16px;text-align:center; font-size:12px;letter-spacing:1.5px;color:rgba(233,227,214,.5); } /* 引言 + 时间轴：限宽居中，长文读着舒服 */ .og-narrow{max-width:820px} .og-lead{margin-top:72px} .og-narrow .og-lead + .og-lead{margin-top:26px} /* 完整时间轴：比首页那三条稍微放大 */ .otl{margin-top:88px} .otl li{padding-bottom:30px} .otl b{font-size:22px;letter-spacing:3px} .otl span{font-size:15px} /* * 这一年的故事：展开在那一年下面。 * 竖线只留时间轴那一条（.timeline 自己的 border-left），故事块不再自己画线、不再缩进， * 正文跟上面的年份 / 简述同一个左边缘，靠字号、颜色和段首缩进分层次。 */ .otl-story{margin-top:20px} .otl-story p{ margin:0 0 1.05em;text-indent:2em; font-size:15px;line-height:2.05;color:rgba(233,227,214,.72); } .otl-story p:last-child{margin-bottom:0} /* * 故事小标题：米白衬线字体、比年份小一号。 * 不能再用金色 —— 年份已经是金色，两个金叠在一起就看不出主次了。 */ .otl-story h4{ margin:1.7em 0 .7em;text-indent:0; font-family:var(--serif);font-weight:600;font-size:18px; letter-spacing:2px;color:#E9E3D6; } .otl-story h4:first-child{margin-top:0} /* 演化史章节（米白底） */ .ochapters{max-width:820px} .och{padding:64px 0;border-bottom:1px solid var(--line)} .och:first-child{padding-top:0} .och:last-child{border-bottom:0} .och-label{ display:flex;align-items:center;gap:12px;margin-bottom:18px; font-size:12px;letter-spacing:4px;color:#8A6E14; } .och-label::before{content:"";width:26px;height:1px;background:rgba(201,162,39,.6)} .och h3{ font-family:var(--serif);font-weight:600; font-size:clamp(22px,2.2vw,30px);line-height:1.5;letter-spacing:1.5px;color:var(--ink); } .och-body{margin-top:24px;font-size:16px;line-height:2.15;color:var(--ink);white-space:pre-line} .och-body p{margin:0 0 1.1em;text-indent:2em} .och-body p:last-child{margin-bottom:0} /* 「← 回首页」（米白底上，用深金棕，浅金看不到） */ .origin-back{margin-top:64px;font-size:13px;letter-spacing:2px} .origin-back a{color:#8A6E14;border-bottom:1px solid rgba(201,162,39,.45);padding-bottom:3px} .origin-back a:hover{color:#6B5510} /* 现在它在深绿底上（米白章节块已经并进时间轴），浅金才看得见 */ .origin-back.on-dark a{color:var(--gold);border-bottom-color:rgba(217,201,163,.35)} .origin-back.on-dark a:hover{color:var(--gold-soft)} /* * 页尾「总述」区（/origin/）：深绿时间轴之后那块米白段（演化特征 / 未来展望 / 结语）。 * 读列 820px 居中，跟上面时间轴同宽，眉标 / 章节 / 「回首页」一条竖线对齐。 */ .osum-sec .osum-col{max-width:820px;margin:0 auto} .osum-sec .kicker{margin-bottom:48px} @media (max-width:960px){ .og-cover{margin-top:48px} .og-lead{margin-top:48px} .otl{margin-top:64px} .och{padding:48px 0} .och-body{margin-top:18px} } @media (max-width:782px){ .og-head .h2{font-size:27px} .og-sub{margin-top:20px;font-size:15px} .og-cover img{aspect-ratio:4/3} .otl b{font-size:19px;letter-spacing:2px} .otl span{font-size:14px} .otl-story{margin-top:16px} .otl-story p{font-size:14px;line-height:1.95} .otl-story h4{font-size:16px} .och h3{font-size:20px} .och-body{font-size:15px;line-height:2} .osum-sec .kicker{margin-bottom:32px} .origin-back{margin-top:44px} } /* * 单条消息的详情页（/news/n/{id}/）。 * 跟列表页同一套色 / 字体，只把版面换成「一大块正文」： * 上面是日期 + 大标题，中间一段导语，下面正文（后台富文本编辑器里写的那些 p / h3 / 图 / 引文）。 * body 里那个 div 是 wp_kses 放行过的内容，排版样式全写在这里， * 不能让默认样式上台 —— 不然图上光秃秃、引文跟普通段一模一样。 */ .news-crumb{margin-bottom:44px;font-size:13px;letter-spacing:2px} .news-crumb a{color:var(--gold);border-bottom:1px solid rgba(201,162,39,.45);padding-bottom:3px} .news-crumb a:hover{color:#8A6E14} .news-ddate{display:block;font-family:var(--serif);font-size:15px;letter-spacing:2px;color:var(--ink-2)} /* 详情页大标题上方那块「置顶」金牌（只有置顶过的文章才有） */ .news-dtop{ display:inline-block;margin:0 0 14px;padding:5px 10px; font-size:11px;line-height:1;letter-spacing:2px; color:var(--forest-deep);background:var(--gold); } .news-dtitle{ margin:14px 0 0; font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.42; font-weight:600;letter-spacing:1px;color:var(--ink); } /* * 标题下面那一竖：栏目小牌在上、来源在下，整块靠右。 * 跟列表页右边那一列一个规矩（左日期 / 中标题 / 右身份）， * 栏目牌不再顶在正文最上面，标题也不必被它往下压一截。 */ .news-dmeta{ display:flex;flex-direction:column;align-items:flex-end;gap:12px; margin-top:22px; } .news-dsrc{margin:0;font-size:12px;letter-spacing:2px;color:var(--ink-2)} /* 宽度交给外面的 .read-col（跟 /brand/ 一个道理） */ .news-dlead{ margin-top:34px;padding-left:18px;border-left:2px solid rgba(201,162,39,.45); font-size:16px;line-height:2;color:var(--ink-2); } .news-body{margin-top:44px;font-size:16px;line-height:2.05;color:var(--ink)} /* 正文每段首行空两个字（导语、引用、图注不缩） */ .news-body p{margin:0 0 1.2em;text-indent:2em} .news-body blockquote p{text-indent:0} .news-body h2{font-family:var(--serif);font-size:24px;letter-spacing:1px;margin:1.8em 0 .8em} .news-body h3{font-family:var(--serif);font-size:20px;letter-spacing:1px;margin:1.6em 0 .6em} .news-body h4{font-size:17px;margin:1.4em 0 .5em} .news-body ul,.news-body ol{margin:0 0 1.2em;padding-left:1.5em} .news-body ul{list-style:disc} .news-body ol{list-style:decimal} .news-body li{margin:.35em 0} .news-body blockquote{ margin:1.6em 0;padding:14px 22px;border-left:2px solid var(--gold); background:var(--cream-2);color:var(--ink-2); } .news-body img{max-width:100%;height:auto;display:block;margin:1.6em 0} /* * 图组（欧盟检测报告那种整页扫描件，一页一张 figure）： * figure 自己已经隔开了，里面的 img 不用再带上下留白， * 否则图和下面那行「第 X 页」之间会空出一大截。 * 加一圈细边，白纸才不像直接糊在米色底上。 */ .news-body figure{margin:2em 0} .news-body figure img{margin:0 auto;border:1px solid rgba(31,58,42,.14);background:#fff} .news-body figcaption{margin-top:10px;font-size:12px;letter-spacing:1px;color:var(--ink-2);text-align:center} .news-body a{color:var(--gold);border-bottom:1px solid rgba(201,162,39,.45)} .news-body a:hover{color:#8A6E14} .news-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0} @media (max-width:782px){ .news-dtitle{font-size:26px} .news-dlead{font-size:15px;margin-top:26px} .news-body{margin-top:32px;font-size:15px;line-height:1.95} .news-crumb{margin-bottom:32px} } /* * 品牌故事独立页（/brand/）。 * * 版面：眉标 → 大标题 → 日期 / 来源 → 通栏大图 → 导语 → 七章正文 → 落款 → 底部两个链接。 * 正文标签（h3 / p / blockquote）跟 /news/ 详情页一样是富文本里写出来的， * 所以排版规则必须写在这里：不写的话 h3 会跟段落一样大、五种标准的引文也看不出是引文。 */ .brand-title{ margin:0;max-width:24em; font-family:var(--serif);font-weight:600; font-size:clamp(32px,3.8vw,50px);line-height:1.32;letter-spacing:2px;color:var(--ink); } .brand-meta{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin-top:22px;font-size:12px;letter-spacing:2px;color:var(--ink-2); } .brand-meta time{font-family:var(--serif);font-size:15px;letter-spacing:2px} .brand-dot{opacity:.45} .brand-photo{margin:44px 0 0} .brand-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} /* 宽度交给外面的 .read-col，这里不再各自限宽（限了就会在居中的栏里贴到左边去） */ .brand-lead{ margin:40px 0 0;padding-left:20px;border-left:2px solid rgba(201,162,39,.45); font-family:var(--serif);font-size:17px;line-height:2.05; letter-spacing:1px;color:var(--ink); } .brand-body{margin-top:44px;font-size:16px;line-height:2.1;color:var(--ink)} /* 正文每段首行空两个字（导语、引用、图注不缩） */ .brand-body p{margin:0 0 1.15em;text-indent:2em} .brand-body blockquote p{text-indent:0} .brand-body h2{font-family:var(--serif);font-size:25px;letter-spacing:1px;margin:1.9em 0 .8em} .brand-body h3{ font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:2px; margin:2em 0 .7em;padding-top:1.2em;border-top:1px solid var(--line); } .brand-body h3:first-child{margin-top:0;padding-top:0;border-top:0} .brand-body h4{font-size:17px;margin:1.4em 0 .5em} .brand-body ul,.brand-body ol{margin:0 0 1.2em;padding-left:1.5em} .brand-body ul{list-style:disc} .brand-body ol{list-style:decimal} .brand-body li{margin:.35em 0} .brand-body blockquote{ margin:1.6em 0;padding:16px 24px;border-left:2px solid var(--gold); background:var(--cream-2);color:var(--ink-2); } .brand-body blockquote p{margin:0 0 .55em} .brand-body blockquote p:last-child{margin-bottom:0} .brand-body img{max-width:100%;height:auto;display:block;margin:1.6em auto} .brand-body figure{margin:1.6em 0} .brand-body figcaption{margin-top:8px;font-size:12px;letter-spacing:1px;color:var(--ink-2);text-align:center} .brand-body a{color:var(--gold);border-bottom:1px solid rgba(201,162,39,.45)} .brand-body a:hover{color:#8A6E14} .brand-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0} .brand-sign{ margin:60px 0 0;text-align:right; font-family:var(--serif);font-size:15px;line-height:2;letter-spacing:1px;color:var(--ink-2); } /* * 落款上方那条金色短线。 * 以前是 .brand-sign::before 伪元素，DOM 里没这个节点，前端编辑模式永远点不到； * 现在模板里画一个真实元素 ，能拖、能右键删掉。 * 删了落款照旧右对齐，版面不晃。 */ .brand-rule{ display:block;position:relative;width:40px;height:1px; margin:0 0 18px auto;background:var(--gold); } /* * 主题会在 head 里给带 data-tea5-mv 的元素输出 width:var(--sw,auto)， * 那条规则特异性是 0,2,0 而且排在 site.css 后面，会把这里的 40px 顶成 100%（整行宽）。 * 多带一层 [data-tea5-mv] 变成 0,3,0 才盖得住，跟 .tea5-kefu 的处理是同一个道理。 */ .brand-sign .brand-rule[data-tea5-mv]{width:40px} /* 1px 的线本身太难点中：往外扩一圈看不见的点击区，视觉不变 */ .brand-rule::after{ content:"";position:absolute;left:-10px;right:-10px;top:-9px;bottom:-9px; } .brand-back{ display:flex;gap:40px;flex-wrap:wrap;margin-top:64px; font-size:13px;letter-spacing:2px; } .brand-back a{color:var(--gold);border-bottom:1px solid rgba(201,162,39,.45);padding-bottom:3px} .brand-back a:hover{color:#8A6E14} @media (max-width:960px){ .brand-photo img{aspect-ratio:4/3} } @media (max-width:782px){ .brand-title{font-size:27px;letter-spacing:1px} .brand-meta{margin-top:18px} .brand-photo{margin-top:30px} .brand-lead{margin-top:28px;font-size:15px;line-height:1.95;padding-left:16px} .brand-body{margin-top:32px;font-size:15px;line-height:2} .brand-body h3{font-size:19px;letter-spacing:1px} .brand-sign{margin-top:42px;font-size:14px} .brand-back{margin-top:44px;gap:24px} } /* ---------- 页脚 ---------- */ .footer{background:var(--forest-deep);color:#DCD6C7} .footer-grid{ display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:80px; padding:88px 48px 64px; } .footer .logo.big{font-size:26px} .fcol.brand p{margin-top:22px;font-size:14px;line-height:2;color:rgba(220,214,199,.55)} .fcol h4{ font-size:13px;letter-spacing:4px;color:var(--gold);font-weight:400;margin-bottom:26px; } .fcol a,.fcol p{ display:block;font-size:14px;line-height:2.2;color:rgba(220,214,199,.7); transition:color .25s; } .fcol a:hover{color:var(--gold)} .footer-bottom{ display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; padding:26px 48px 34px;border-top:1px solid rgba(217,201,163,.14); font-size:12px;letter-spacing:1px;color:rgba(220,214,199,.4); } .mobile-bar{display:none} /* ---------- 响应式 ---------- */ @media (max-width:1100px){ .wrap{padding:0 32px} .origin-grid,.story-grid{gap:56px} .footer-grid{gap:48px} /* 屏幕不够宽了：4 个排不下，退成 3 个 */ .products{grid-template-columns:repeat(3,1fr);gap:20px} } @media (max-width:960px){ .nav-tel{display:none} .nav-inner{height:64px} .mnav-btn{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:26px;height:26px;cursor:pointer; } .mnav-btn i{display:block;height:1px;background:var(--gold-soft);transition:.3s} .mnav-toggle:checked ~ .nav-inner .mnav-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)} .mnav-toggle:checked ~ .nav-inner .mnav-btn i:nth-child(2){opacity:0} .mnav-toggle:checked ~ .nav-inner .mnav-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .menu{ display:flex;flex-direction:column;gap:0; position:absolute;top:100%;left:0;right:0; background:var(--forest-deep); border-bottom:1px solid rgba(217,201,163,.25); box-shadow:0 24px 34px -20px rgba(0,0,0,.55); max-height:0;overflow:hidden;transition:max-height .38s ease; } .mnav-toggle:checked ~ .nav-inner .menu{max-height:440px} .menu a{padding:17px 24px;border-bottom:1px solid rgba(217,201,163,.12);font-size:15px} .menu a::after{display:none} .wrap{padding:0 22px} .section{padding:76px 0} .hero{min-height:78vh} .hero-inner{padding:96px 0 88px} .hero::after{ background:linear-gradient(180deg,var(--hs1) 0%,var(--hs2) 55%,var(--hs3) 100%); } .hero h1{letter-spacing:1px} .hero-actions{gap:14px} .btn{height:48px;padding:0 24px;letter-spacing:2px;font-size:14px} .scroll-hint{display:none} .standards{grid-template-columns:1fr;margin-top:48px;border-top:0} .std{border-right:0;border-top:1px solid var(--line);padding:28px 4px} .std .num{font-size:30px} .origin-grid,.story-grid{grid-template-columns:1fr;gap:40px} .origin-photo img{aspect-ratio:4/3} .stats{grid-template-columns:1fr 1fr;margin-top:56px} .stat{border-bottom:1px solid rgba(217,201,163,.16)} .stat:nth-child(2n){border-right:0} .products{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px} .pimg{aspect-ratio:1/1;padding:14px} .pbody{padding:18px 14px 22px} .pbody h3{font-size:16px;letter-spacing:1px} .spec{margin-top:8px;font-size:11.5px;letter-spacing:.5px} .price{font-size:23px;margin-top:12px;letter-spacing:0} .price i{font-size:13px;vertical-align:3px} .pmore{margin-top:14px;font-size:11.5px;letter-spacing:1.5px;padding-bottom:5px} .sec-note{max-width:none;margin-top:24px} .news a,.news .nt-row{grid-template-columns:1fr;gap:12px;padding:26px 4px} .news .nt-side{justify-self:start;align-items:flex-start} .news a:hover{padding-left:4px} .news-filter{gap:8px;margin-top:28px} .news-filter a{padding:7px 12px;font-size:12px;letter-spacing:1px} .footer-grid{grid-template-columns:1fr;gap:40px;padding:56px 22px 40px} .footer-bottom{padding:22px 22px 90px;justify-content:flex-start;gap:10px} .mobile-bar{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70; background:rgba(21,42,33,.97);border-top:1px solid rgba(217,201,163,.28); backdrop-filter:blur(6px); } .mobile-bar a{ flex:1;text-align:center;padding:14px 0;font-size:13px;letter-spacing:.5px; color:var(--gold-soft);white-space:nowrap; } .mobile-bar a+a{border-left:1px solid rgba(217,201,163,.2)} } @media (max-width:520px){ .hero h1{font-size:30px;line-height:1.45} .hero-sub{font-size:14px;letter-spacing:1px} .btn{padding:0 18px;font-size:13px;letter-spacing:1px} .proof-big{letter-spacing:2px} } /* ========================================================== WordPress 主题版补充（后台能调的东西靠这几条生效） ========================================================== */ /* 导航条高度 / 菜单间距 / Logo 字号字距：由 functions.php 输出具体数值， 这里只负责把内联变量接到原来的样式上，移动端的值照旧 */ .nav{background:var(--tea-nav-bg,var(--forest))} .nav-inner{height:var(--tea-nav-h,76px)} .menu{gap:var(--tea-gap,42px)} /* 上面三条写在文件末尾，会盖掉上面媒体查询里的小屏值，这里补回来 */ @media (max-width:960px){ /* 手机上是「Logo 靠左、汉堡靠右」的两头排法，不能跟着居中 */ .nav-inner{height:64px;justify-content:space-between;gap:16px} .menu{gap:0} } /* 后台允许「主标题第二行前面故意留空格」用来排版，普通 HTML 会把首尾空格吃掉 */ .h2,.hero h1,.hero-sub{white-space:pre-wrap} /* * 前端编辑时，产品卡不能保留悬停上浮： * .pcard:hover 的 transform 特异性比 [data-tea5-mv] 高，鼠标一放上去 * 拖过的偏移就被它盖掉，卡片会往上跳 8px。编辑时直接取消上浮。 */ body.tea5-editing .pcard{transition:none} body.tea5-editing .pcard:hover{ transform:translate(var(--tx,0px),var(--ty,0px)); box-shadow:none; } @media (max-width:782px){ body.tea5-editing .pcard:hover{transform:translate(var(--sx,0px),var(--sy,0px))} } /* 产品卡的「了解详情」现在是真链接 */ a.pmore{display:inline-block} /* 后台没填手机条微信链接时，仍然是一行两栏 */ .mobile-bar a{display:block} /* * ========== 前端「空白处右键新增」的自由元素 ========== * * 这一层铺在整页上面，但本身不占位置（absolute + height:0）， * 也不会挡住鼠标：只有里面那几块能点（pointer-events:auto）， * 空白处点下去还是点到下面的正文。 * * 每块的坐标来自 --tx/--ty（电脑）与 --sx/--sy（手机）两个变量， * 由模板内联写进 style，和 [data-tea5-mv] 那套 transform 完全共用： * 所以在编辑器里它们能拖、能拉大小，存回去也还是同一结构。 */ .tea-free{ position:absolute; left:0; top:0; width:100%; height:0; pointer-events:none; } /* * 注意：这一层不能写 z-index（以前写的是 30）。 * 一写，整层就成了独立的层叠上下文，块自己的 z-index 只在这一层内部比大小， * 跟屏里的标题 / 图片永远没有可比性 —— 表现就是「往下叠一层」点了画面不动。 * 去掉之后块直接参与全页比较：z:1 落到正文（.section>* 是 2）下面， * 又还在屏背景（auto）上面，正好是「文字压图片」。 * 整层本身还是 absolute + height:0、不挡鼠标，这些都保持原样。 */ .tea-free .tf{ pointer-events:auto; box-sizing:border-box; max-width:calc(100vw - 24px); } .tf-text{ font:15px/1.9 var(--sans); color:rgba(246,242,233,.84); white-space:pre-line; word-break:break-word; } .tf-title{ font-family:var(--serif); font-size:clamp(24px,2.6vw,40px); line-height:1.35; letter-spacing:2px; color:var(--cream); white-space:pre-line; } .tf-badge{ display:inline-block; font-size:12px; letter-spacing:2px; color:var(--gold); border:1px solid rgba(201,162,39,.55); border-radius:2px; padding:4px 10px; background:rgba(201,162,39,.08); white-space:pre-line; } .tf-quote{ font-family:var(--serif); font-size:17px; line-height:2; color:rgba(246,242,233,.78); border-left:2px solid var(--gold); padding:2px 0 2px 16px; white-space:pre-line; } .tf-btn a{ display:inline-block; padding:13px 30px; border:1px solid var(--gold); color:var(--gold); font-size:14px; letter-spacing:2px; line-height:1.2; background:transparent; transition:.3s; } .tf-btn a:hover{ background:var(--gold); color:#14251C; } .tf-img img{ display:block; width:100%; height:auto; border-radius:2px; } .tf-ph{ display:flex; align-items:center; justify-content:center; width:100%; height:130px; border:1px dashed rgba(201,162,39,.6); background:rgba(201,162,39,.1); color:var(--gold-soft); font-size:13px; letter-spacing:1px; } .tf-line{ width:100%; height:1px; background:var(--gold); } .tf-box{ width:100%; min-height:80px; background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.25); border-radius:2px; } /* ========================================================= 客服悬浮卡（全站右下角） 后台「客服设置」配二维码图 + 一行提示；主题在 wp_footer 输出（tea5_kefu_markup）。 没配就不画这段，所以默认跟从前一模一样。 两个要点： 1) 宽度写在 .kf-img 上而不是卡片上 —— 卡片带 data-tea5-mv， 动态 CSS 那条 [data-tea5-mv]{width:var(--tw,auto)} 会把卡片自己的 width 顶成 auto； 图片定宽 + 卡片 shrink-to-fit，拖边框改大小（--tw）也照样好使。 2) 拖拽微调不碰 right/bottom，走全站同一套 --tx/--ty transform（编辑模式拖完存 tea_pos）。 ========================================================= */ .tea5-kefu{ position:fixed; right:24px; bottom:32px; z-index:65; padding:12px 12px 10px; background:#fff; border:1px solid rgba(30,58,47,.12); border-radius:10px; box-shadow:0 8px 28px rgba(18,36,28,.18); text-align:center; } .tea5-kefu .kf-img{ display:block; width:108px; height:auto; margin:0 auto; border-radius:6px; } .tea5-kefu .kf-txt{ margin:8px 0 0; max-width:150px; font-size:12px; line-height:1.7; letter-spacing:1px; color:#1E3A2F; } /* 收起后的「客服」小条：只在手机端、卡片带了 .is-mini 时才露出来（JS 加的类） */ .tea5-kefu .kf-mini{ display:none; } .tea5-kefu .kf-mini b{ font-weight:400; } @media (max-width:782px){ /* bottom 抬到 88px：手机底下有条固定导航栏 .mobile-bar（高约 50px，z-index:70），别压在它下面 */ .tea5-kefu{ right:12px; bottom:88px; padding:9px 9px 8px; } .tea5-kefu .kf-img{ width:84px; } .tea5-kefu .kf-txt{ font-size:11px; margin-top:6px; } /* * 收起态：3 秒后贴到最右边，只剩一个半透明小条。 * 手机上这张卡一直杵在右下角，会把正文阅读区压掉一大块，所以进页面先露 3 秒 * （让人知道这儿有客服），然后收成一个「客服」二字竖排的小按钮； * 点一下展开、点页面别处收回。宽度直接给死 38px，是因为展开态的宽度是 auto * （而且可能被拖拽留下的 --tw 接管），auto→定值没法做过渡，就没给它加 transition。 * * 选择器为什么带 [data-tea5-mv]： * 主题在 head 里输出一段动态 CSS： * [data-tea5-mv]:not([data-tea5-free]){ width:var(--sw,auto); min-height:var(--sh,auto) } * 它也是 0,2,0（属性 + :not 里的属性），而且排在 site.css 后面， * 光写 .tea5-kefu.is-mini 会被它的 width:auto 顶掉（实测：宽度变成内容宽 14px）。 * 多带一个 [data-tea5-mv] 就是 0,3,0，稳稳盖住它； * 高度没这个问题（动态那块用的是 min-height，与 height 不冲突）。 */ .tea5-kefu{ transition:opacity .3s ease, right .3s ease, border-radius .3s ease, background-color .3s ease, box-shadow .3s ease, padding .3s ease; } .tea5-kefu[data-tea5-mv].is-mini{ right:0; width:38px; height:48px; padding:0; border-radius:12px 0 0 12px; overflow:hidden; background:rgba(255,255,255,.34); border-color:rgba(30,58,47,.10); box-shadow:0 3px 10px rgba(18,36,28,.07); opacity:.68; cursor:pointer; } .tea5-kefu.is-mini .kf-img, .tea5-kefu.is-mini .kf-txt{ display:none; } .tea5-kefu.is-mini .kf-mini{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; font-size:11px; line-height:1.15; letter-spacing:1px; color:#1E3A2F; } /* 手指按下去那一瞬间提亮，确认点到了 */ .tea5-kefu.is-mini:active{ opacity:1; } } /* --------------------------------- 电脑端右上角的方向键 + 收起态（第 156 轮） 从前电脑端这张卡是永远展开的，没人能收。现在右上角给一颗方向键： 点一下收到右侧边缘（right:0），只剩一条 40px 的小条，点小条再展开。 两个尺寸上的坑： 1) 按钮挂卡片外沿（top/right 负值）——卡片内边距只有 12px，塞进去必然盖住 二维码右上角那个「回」字定位方块，扫不出码； 2) 收起态的宽度选择器要带 [data-tea5-mv]，否则被动态 CSS 的 width:var(--tw,auto) 顶掉，跟手机端那条是同一个道理。 --------------------------------- */ .tea5-kefu .kf-tog{ position:absolute; top:-9px; right:-9px; width:22px; height:22px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(30,58,47,.16); border-radius:50%; background:#fff; color:#4C6A5D; cursor:pointer; box-shadow:0 2px 6px rgba(18,36,28,.16); transition:background .2s,color .2s,border-color .2s,opacity .2s; } .tea5-kefu .kf-tog:hover, .tea5-kefu .kf-tog:focus-visible{ background:#1E3A2F; border-color:#1E3A2F; color:#fff; outline:none; } .tea5-kefu .kf-tog svg{ display:block; } /* 编辑模式不跑收起那套脚本，按钮先藏起来，免得点了没反应 */ body.tea5-editing .tea5-kefu .kf-tog{ display:none; } @media (max-width:782px){ /* 手机端有「进页面 3 秒自动收 + 点开」那套，不需要这颗键 */ .tea5-kefu .kf-tog{ display:none; } } @media (min-width:783px){ .tea5-kefu{ transition:opacity .3s ease,right .3s ease,border-radius .3s ease, background-color .3s ease,box-shadow .3s ease,padding .3s ease; } .tea5-kefu[data-tea5-mv].is-mini{ right:0; width:40px; height:52px; padding:0; border-radius:12px 0 0 12px; overflow:hidden; background:rgba(255,255,255,.62); border-color:rgba(30,58,47,.16); box-shadow:0 2px 10px rgba(18,36,28,.12); opacity:.94; cursor:pointer; } .tea5-kefu.is-mini .kf-img, .tea5-kefu.is-mini .kf-txt, .tea5-kefu.is-mini .kf-tog{ display:none; } .tea5-kefu.is-mini .kf-mini{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; font-size:12px; line-height:1.25; letter-spacing:1px; color:#2F4E40; } .tea5-kefu.is-mini:hover{ opacity:1; background:#fff; } } /* ========================================================== 后台富文本在前端的样子 后台所有多行文字现在都能加粗、改字体 / 字号 / 颜色、插图， 存下来就是一小段 HTML，带 .tea-rt 的容器把这段 HTML 原样吐出来。 几件事说在前头： 1) 容器从

换成了

：HTML 里 p 不能套 p，后台一旦写成两段， 浏览器会自己把结构拆开，字就全挤到外面去了。 2) 下面只管「多段落」该有的间距。只写一段、没加任何格式的时候， 看到的跟以前完全一样（全局 h1,h2,h3,h4,p{margin:0} 还在）。 3) 字体 / 字号 / 颜色 / 对齐都是写在标签的 style 里，内联优先级高， 不会被这里的规则盖掉 —— 这里只做兵底。 ========================================================== */ .tea-rt p{ margin:0 0 .85em } .tea-rt p:last-child{ margin-bottom:0 } .tea-rt h2,.tea-rt h3,.tea-rt h4{ margin:1.5em 0 .6em;font-weight:600;line-height:1.5;letter-spacing:1px; } .tea-rt h2{ font-size:1.4em } .tea-rt h3{ font-size:1.2em } .tea-rt h4{ font-size:1.05em } .tea-rt h2:first-child,.tea-rt h3:first-child,.tea-rt h4:first-child{ margin-top:0 } .tea-rt ul,.tea-rt ol{ margin:0 0 .85em;padding-left:1.7em } .tea-rt ul{ list-style:disc } .tea-rt ol{ list-style:decimal } .tea-rt li{ margin:.2em 0 } .tea-rt img{ margin:.7em 0;border-radius:2px } .tea-rt a{ color:var(--gold);text-decoration:underline;text-underline-offset:3px } .tea-rt hr{ margin:1.8em 0;border:0;border-top:1px solid var(--line) } .tea-rt blockquote{ margin:1.1em 0;padding-left:1em; border-left:2px solid var(--gold-soft);color:var(--ink-2); } .tea-rt sub,.tea-rt sup{ font-size:.75em } /* 时间轴里的故事 / 年份下面那行说明：段落间距比正文里紧一点 */ .otl-story.tea-rt p{ margin:0 0 .9em } .otl-story.tea-rt p:last-child{ margin-bottom:0 } .otl-story.tea-rt h4{ margin:1.5em 0 .6em } /* * 时间轴上「那一年发生了什么」 * 以前那行字是个 （只能装纯字）；现在后台那个框能加粗 / 改字号颜色 / 分段， * span 装不下

，所以换成了

。 * 字体字号颜色照旧（跟原来 .timeline span 一样），行距略松一点，段与段之间留点空。 */ .timeline .otl-text{ font-size:14px;line-height:1.9;color:rgba(233,227,214,.65); } .timeline .otl-text p{ margin:0 0 .7em } .timeline .otl-text p:last-child{ margin-bottom:0 } .timeline .otl-text h2, .timeline .otl-text h3, .timeline .otl-text h4{ color:#E9E3D6;font-weight:600 } /* 里面自己换的颜色 / 字号写在标签的 style 里，内联优先，上面这几条盖不住 */ /* ========================================================== 第 132 轮：手机端精修（A + B②③） · 所有视觉改动都写在 ≤782px 里，电脑端（≥783px）一行不受影响 · 783–960 只做「平板归位」：去掉桌面坐标的横向偏移，避免 834 宽横向溢出 ========================================================== */ /* 窄屏兜底：不让整页能左右滑（平板竖屏/个别被拖宽的元素） */ @media (max-width:1100px){ html{overflow-x:hidden} } @supports (overflow:clip){ @media (max-width:1100px){ html{overflow-x:clip} } } /* * 平板（783–960）：桌面坐标 --tx 是按 1240 宽算的，到这个宽度会把文字/图片推出屏幕 * （实测 834 宽首页右溢 87px、/origin/ 右溢 190px）。 * 让带坐标的元素回到自然流：横向偏移归零、宽度回父级宽度。 * 纵向 --ty 必须留着：/origin/ 那张通栏图靠 --ty:48px 往下避副标题， * 一并抹掉会直接压在副标题上（1024 实测过）。 * 品牌落款那条 1px 金线（.brand-rule）宽度写死 40px，单独放过。 */ @media (min-width:783px) and (max-width:960px){ [data-tea5-mv]:not([data-tea5-free]):not(.brand-rule){ transform:translateY(var(--ty,0px))!important;width:auto!important;min-height:0!important; } } /* * /origin/ 顶部通栏图单独补一条：1024 宽（iPad 横屏）时它的桌面坐标 --tx/--tw * 会把图推出屏幕 10px（实测 sw 1034 / cw 1024）。只把这一个 figure 归位，其它不动。 * 同样只抹横向 --tx、保留纵向 --ty，否则图会往上跑盖住副标题。 */ @media (min-width:961px) and (max-width:1100px){ .og-cover figure[data-tea5-mv]{transform:translateY(var(--ty,0px))!important;width:auto!important} } /* 首屏下方三格数据条：只在手机上出现，桌面/平板完全不占位 */ .m-stats{display:none} @media (max-width:782px){ /* ---------- 1. 首屏 ---------- */ /* 原来 .hero-inner 用 padding:96px 0 88px，把 .wrap 的左右 22px 覆盖成 0，字贴屏幕边 */ /* * 手机首屏要和「电脑上的手机壳」逐像素一致，就不能让版式跟着屏幕尺寸走。 * * 原来：.hero{min-height:72svh} + 垂直居中 * 文字位置 = 72% × 视口高 ÷ 2。而 svh 每台机器都不同 * （同一台 iPhone：微信 852、Safari 745，安卓又一个数）， * 不同品牌宽度也不同（360/375/390/393/430）。 * 于是手机浏览器、微信、电脑上的手机壳，三者各差一截（实测 55～80px）。 * * 现在： * 1) 正文不再居中，改成距首屏顶部固定 193px（= 顶栏 65 + 128）； * 2) 首屏高度由内容撑开，min-height 只做下限保护。 * => 位置只由 CSS 常量决定，与视口高度、宽度都无关， * 360 / 390 / 430 宽、700 / 852 / 932 高都落在同一个像素上。 */ /* 下面两条和 functions.php 的 tea5_hero_lock_css() 是同一份规则： 页面里内联一份（微信的样式表缓存拦不住它），这里留一份兜底。改数字要两处一起改。 */ .hero{min-height:520px;align-items:flex-start} .hero-inner{padding:193px 22px 44px} .hero .eyebrow{font-size:12px;letter-spacing:3px;gap:10px} .hero .eyebrow::before{width:24px} .hero h1{margin-top:18px;font-size:30px;line-height:1.42;letter-spacing:.5px;max-width:none} .hero-sub{margin-top:14px;font-size:14px;line-height:1.75;letter-spacing:.5px} .hero-actions{display:flex;gap:10px;margin-top:28px} .hero-actions .btn{flex:1;width:auto;height:46px;padding:0 10px;font-size:13px;letter-spacing:1px} /* ---------- 2. 区块节奏 / 正文 ---------- */ .section{padding:52px 0;scroll-margin-top:70px} .kicker{font-size:12px;letter-spacing:4px;gap:9px;margin-bottom:14px} .kicker::before{width:20px} .h2{font-size:26px;line-height:1.45;letter-spacing:1px} .lead{margin-top:16px;font-size:15px;line-height:1.9} .body{margin-top:14px;font-size:15px;line-height:1.92} .tea-rt img{max-width:100%;height:auto} /* ---------- 3. 首屏下三格数据条 ---------- */ /* * 列数跟着实际有几格走（现在每一格都能在手机编辑里单独删）： * 写 repeat(3,1fr) 的话，删掉一格会剩下两个各占 1/3、右边空一大块； * 改成 auto-flow:column + auto-columns:1fr，剩两格就各占一半。 */ .m-stats{ display:grid;grid-auto-flow:column;grid-auto-columns:1fr; background:var(--cream-2,#EFEADC);border-bottom:1px solid var(--line); } .m-stats > div{padding:15px 4px 14px;text-align:center;border-right:1px solid var(--line)} .m-stats > div:last-child{border-right:0} .m-stats b{ display:block;font-family:var(--serif);font-weight:600; font-size:22px;line-height:1.1;letter-spacing:.5px;color:#8A6E14; } .m-stats b em{font-style:normal;font-size:11px;margin-left:1px;color:var(--ink-2)} .m-stats span{display:block;margin-top:5px;font-size:11px;letter-spacing:.5px;color:var(--ink-2)} /* ---------- 4. 屏2 五条标准：2 列小卡，第 5 条通栏（B②） ---------- */ .standards{grid-template-columns:1fr 1fr;gap:10px;margin-top:30px;border-top:0} .std{ border:1px solid var(--line);border-radius:10px;background:#fff; padding:18px 14px 20px; /* 序号与标题并成一行：只改卡内排布，卡片外框与栅格位置一律不动 */ display:flex;flex-wrap:wrap;align-items:baseline; } .std:last-child{grid-column:1/-1} .std .num{font-size:22px;flex:0 0 auto;margin-right:8px} .std h3{font-size:15px;margin:0;letter-spacing:.5px;flex:1 1 auto;min-width:0} .std p,.std .tea-rt{font-size:12.5px;line-height:1.8;flex:1 1 100%;margin-top:10px} /* ---------- 5. 屏3 产地 ---------- */ .origin-grid{gap:26px} .origin-photo img{aspect-ratio:4/3} .origin-cap{margin-top:10px;font-size:11.5px;letter-spacing:.5px;color:rgba(233,227,214,.62)} .timeline{margin-top:26px;padding-left:20px} .timeline li{padding-bottom:18px} .timeline li::before{left:-25px;top:7px;width:8px;height:8px} .timeline b{font-size:18px;letter-spacing:1px;margin-bottom:4px} .timeline span,.timeline .otl-text{font-size:13.5px;line-height:1.8} .stats{margin-top:34px} .stat{padding:20px 6px} .stat .v{font-size:26px} .stat .k{margin-top:9px;font-size:11.5px;letter-spacing:1px} /* ---------- 6. 屏4 品牌故事 ---------- */ .story-grid{gap:26px} .story-text blockquote{ margin-top:22px;padding-left:16px;font-size:17px;line-height:1.85;letter-spacing:.3px; word-break:normal;overflow-wrap:break-word;text-wrap:pretty; } .story-photo img{aspect-ratio:4/3} .sign{margin-top:16px;font-size:13px} .link-more{margin-top:22px;font-size:14px;padding-bottom:6px} /* ---------- 7. 屏5 产品：圆角 + 4:5 统一图（B③） ---------- */ #products.section{padding-top:48px} .sec-head{gap:12px} .sec-note{margin-top:14px;padding-left:12px;font-size:13px;line-height:1.8} .products{grid-template-columns:1fr 1fr;gap:12px;margin-top:26px} .pcard{border-radius:12px;overflow:hidden} .pimg{aspect-ratio:4/5;padding:0;background:#F1EBDE} .pimg img{width:100%;height:100%;object-fit:cover} .pbody{padding:14px 12px 16px} .pbody h3{font-size:15px;letter-spacing:.5px} .spec{margin-top:6px;font-size:11px;letter-spacing:.2px} .price{margin-top:8px;font-size:20px} .price i{font-size:11px;vertical-align:2px} .pmore{margin-top:10px;font-size:11px;letter-spacing:1px;padding-bottom:4px} /* ---------- 8. 屏6 617 ---------- */ .proof{padding:60px 0} .proof-kicker{font-size:11.5px;letter-spacing:3px} .proof-big{font-size:clamp(82px,25vw,104px);letter-spacing:1px;margin:8px 0 4px} .proof-text{font-size:14px;line-height:1.75;letter-spacing:1px} .btn-outline-gold{margin-top:26px;height:44px;padding:0 24px;font-size:13px} /* ---------- 9. 屏7 茶事动态 ---------- */ .news{margin-top:30px} .news a,.news .nt-row{gap:8px;padding:20px 2px} .news time,.news .nt-date{font-family:var(--sans);font-size:11.5px;letter-spacing:1px;color:var(--ink-2);gap:6px} .news h3{font-size:17px;line-height:1.5;letter-spacing:.3px} .news .nt-side{flex-direction:row;align-items:center;gap:7px} .news .src,.nt-cat{font-size:10.5px;letter-spacing:.5px;padding:4px 8px} .news-total{margin-top:14px;font-size:12px} .nt-top{font-size:10px;padding:4px 7px} /* 摘要压到 2 行；前端编辑态不裁，免得改字时看不到后半句 */ body:not(.tea5-editing) .news .nt > .tea-rt, body:not(.tea5-editing) .news p{ margin-top:8px;font-size:13px;line-height:1.75; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* ---------- 10. 页脚：栏目并成 2 列 ---------- */ .footer-grid{grid-template-columns:1fr 1fr;column-gap:18px;row-gap:26px;padding:44px 22px 24px} .fcol.brand{grid-column:1/-1} .footer .logo.big{font-size:22px} .fcol.brand p{margin-top:12px;font-size:13px;line-height:1.8} .fcol h4{margin-bottom:10px;font-size:11.5px;letter-spacing:3px} .fcol a,.fcol p{font-size:13px;line-height:2} .footer-bottom{padding:16px 22px calc(58px + env(safe-area-inset-bottom));font-size:11px;line-height:1.7} /* ---------- 11. 底栏（5 项，含安全区） ---------- 第 162 轮由 4 项改成 5 项（首页 / 产品中心 / 品牌故事 / 动态 / 电话咨询）。 360 宽下每项只剩 72px：字号压到 11.5px、字距收到 0.2px、不换行， 四个字的「产品中心 / 品牌故事 / 电话咨询」才放得下。 */ .mobile-bar{padding-bottom:env(safe-area-inset-bottom);background:rgba(18,36,28,.98)} .mobile-bar a{padding:12px 0 11px;font-size:11.5px;letter-spacing:.2px;line-height:1.2;white-space:nowrap} .mobile-bar a+a{border-left:0} .mobile-bar a:not(:first-child){border-left:1px solid rgba(217,201,163,.16)} .mobile-bar a.is-on{color:var(--gold)} /* ---------- 12. 客服卡：贴右侧留 8px，别压内容 ---------- */ .tea5-kefu{right:8px;bottom:calc(64px + env(safe-area-inset-bottom))} .tea5-kefu[data-tea5-mv].is-mini{ right:8px;width:44px;height:48px;border-radius:12px;background:rgba(255,255,255,.42); } /* ---------- 13. 其它页面的间距微调 ---------- */ .og-cover{margin-top:34px} .og-lead{margin-top:38px} .otl{margin-top:46px} .otl li{padding-bottom:24px} .och{padding:34px 0} .och-body{font-size:15px;line-height:1.95} .osum-sec .kicker{margin-bottom:26px} .origin-back{margin-top:36px} .news-hero .read-col > .h2{text-align:left} .news-crumb{margin-bottom:26px} .news-dlead{margin-top:22px;padding-left:14px;font-size:14.5px;line-height:1.85} .news-dmeta{margin-top:14px;gap:8px} .news-body{margin-top:26px;font-size:15px;line-height:1.95} .news-body h3{font-size:18px} .news-body figure{margin:1.6em 0} .brand-title{font-size:26px;line-height:1.4} .brand-photo{margin-top:24px} .brand-lead{margin-top:24px;font-size:15px;line-height:1.85;padding-left:14px} .brand-body{margin-top:26px;font-size:15px;line-height:1.95} .brand-back{margin-top:34px;gap:20px} .news-filter{margin-top:22px} } /* 触摸设备不保留 hover 上浮，避免点一下卡片停在半空 */ @media (hover:none){ .pcard:hover{transform:none;box-shadow:none} .pcard:hover .pmore{color:rgba(233,227,214,.65);border-color:rgba(217,201,163,.35)} } /* ============================================================ 手机端第二轮修补（2026-10-28） 1. 首屏第二个按钮 .btn-ghost 是浅金细字+淡金边框，压在浅色茶汤 背景上等于看不见，手机上补深色底，不用改 HTML 2. 521-782（小平板 / 手机横屏）按钮别被 flex 拉成一整条长条 3. 783-960 平板：首屏标题左右贴边（.hero-inner 的左右 padding 是 0 覆盖了 .wrap 的 48px）；五条标准单列太长；正文一行 45 字太宽 4. 客服卡更低调：贴边、更窄、更透 ============================================================ */ @media (max-width:782px){ .hero-actions .btn-ghost{ background:rgba(16,35,26,.46); border-color:rgba(242,235,216,.62); color:#F2EBD8; } .hero-actions .btn-ghost:active{background:rgba(16,35,26,.68)} } @media (min-width:521px) and (max-width:782px){ .hero-actions{gap:12px;max-width:560px} .hero-actions .btn{flex:0 0 auto;width:auto;min-width:168px;padding:0 24px} } @media (min-width:783px) and (max-width:960px){ .hero-inner{padding-left:22px;padding-right:22px} .standards{grid-template-columns:1fr 1fr;gap:0 52px;margin-top:44px} .std{padding:24px 0 26px} .og-narrow{max-width:720px} .body{line-height:1.95} .tea5-kefu{width:88px} .tea5-kefu .kf-img{width:88px;height:88px} } @media (max-width:782px){ .tea5-kefu[data-tea5-mv].is-mini{ right:0;width:42px;height:46px;border-radius:14px 0 0 14px;background:rgba(255,255,255,.28); } } /* ============================================================ 首屏文字块：右边缘统一到同一条竖线上（第 156 轮） 原来的做法：第二行靠 6 个半角空格缩进（后台允许故意留空格，见文件上面 .h2,.hero h1{white-space:pre-wrap} 那条），眉标和按钮靠 --tx 硬挪 （眉标 +238px、两颗按钮 +142px），硬把三条右边缘凑到 620～631 之间。 为什么现在又歪了：空格宽度是跟着字号走的（62px 时一个空格约 35px、 56px 时约 31px），而主标题的框被拖拽定死在 537px、--tx 又是不变的像素值。 窗口一拉宽拉窄，字号变了、字宽变了，框和像素却没变 —— 三层一叠加， 1280 宽就差 45px，1024 宽差 135px。手调对齐注定对不住。 现在的做法： 1) .hero-inner 改成单列 grid，列宽 = max-content（=最宽那一行，也就是主标题）， justify-items:end 让每个子元素都贴这一列的右边缘； 2) 主标题改 text-align:right，两行自然齐右，不再依赖空格（pre-line 会把 行首行尾的空格吃掉，后台就算改回空格也不影响）； 3) 第 197 轮改回来：--tx 重新生效。第 156 轮为了「永远对住」把横向位移 （--tx）在电脑端写死成 0，结果前端编辑里这几个元素只能上下拖、拖不动左右， 用户要自己微调时完全没辙。对齐交给 1) 2) 的 grid 就够，位移该听用户的： --tx 默认 0（等于还是齐右），一旦拖过就按拖出来的像素走。 为什么只从 961px 起：960 以下（平板 / 手机）是另一套手工排的版 （--sx/--sy、按钮 flex:1、首屏左右 padding 22px），一行都不动。 ============================================================ */ @media (min-width:961px){ .hero-inner{ display:grid; grid-template-columns:max-content; justify-content:start; justify-items:end; } .hero h1{ text-align:right; white-space:pre-line; } /* 后台填了引言才会出现的 .hero-sub，同样齐右（pre-line 吃掉行尾空格） */ .hero .hero-sub{ text-align:right; white-space:pre-line; } /* 第 197 轮：改回完整的 translate(x,y)，横向拖动才真的会动。 scale 保留（拉框改大小时 --tsc 还要用），别写成只有 translateY。 */ .hero .eyebrow[data-tea5-mv], .hero h1[data-tea5-mv], .hero .hero-sub[data-tea5-mv], .hero .hero-actions [data-tea5-mv="btn1"], .hero .hero-actions [data-tea5-mv="btn2"]{ transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--tsc,1)) !important; } } /* ============================================================ 手机端（≤782px）：首屏两颗按钮「上下排、左对齐」，位置由 CSS 钉死。 为什么不再用拖拽的位移： 按钮宽度是跟着屏幕宽伸缩的（360 宽各 153px，414 宽各 180px）， 而手机编辑里拖出来的 --sx / --sy 是固定像素（现在 btn1 是 0,-47，btn2 是 -178,17）。 两个东西一叠加，第二颗按钮的左边缘就变成了「屏幕宽的减法」： 电脑手机壳（360）：比第一颗偏左 15px； 手机浏览器（385）：差 2.5px，看着几乎齐； 微信（414）：又偏右 12px。 所以同一个页面在壳里、在浏览器里、在微信里各是一个样，改多少轮都对不上。 现在改成：容器竖排 + 固定 18px 缝，两颗按钮宽度各占一半， 横向就永远从 22px 内边距开始，与屏幕宽、与拖拽数据都无关。 margin-top 的 -19px 是为了把整组按钮成回原来那颗黄色按钮的位置 （原来 28px 外边距 + btn1 向上 -47px = 28 - 47）。 代价：在手机编辑里左右 / 上下拖这两颗按钮都不再改变位置（数据还在，只是不再输出）， 以后要调间距直接改这里的两三个数字，改完全端一致。 ============================================================ */ @media (max-width:782px){ .hero-actions{ display:flex;flex-direction:column;align-items:flex-start; gap:18px;margin-top:-19px; } .hero-actions .btn{ flex:0 0 auto;width:calc(50% - 5px)!important;min-width:0; } .hero .hero-actions [data-tea5-mv="btn1"], .hero .hero-actions [data-tea5-mv="btn2"]{ transform:none!important; } } /* ============================================================ 手机端（≤782px）：页脚左上那块「0.005 姣月茶业 + 一杯干净的茶」，整块居中。 为什么不再靠拖拽的位移： 页脚在手机上是一列（.footer-grid 1fr 1fr，品牌那块 grid-column:1/-1）， 品牌那块本身是占满整行的。手机编辑里把 logo 往右拖了 94px、把品牌语往右拖了 59px （--sx:94 / --sx:59）想把它「拖到中间」，可这两个数是死的像素： 390 屏：logo 落在 116～257，品牌语 81～293，看着像居中； 414 屏：整组左偏 20px；360 屏：又偏右。 而且拖出来的只是「盒子」往右挪，盒子里的字仍然靠左排—— 两行长短差一倍（91px / 208px），行首却齐齐对着，看着就是「还是靠左对齐」。 现在改成：这一块文字居中（text-align:center），宽 / 位移一律不用， 盒子回到整列宽，两行自然各自居中；屏幕宽、拖拽数据都不再影响位置。 在手机编辑里这两块拖不动了（数据还在，只是不再输出）—— 以后要改，就改这里的两行，改完全端（壳里 / 浏览器 / 微信）一致。 ============================================================ */ @media (max-width:782px){ .fcol.brand{text-align:center} .fcol.brand [data-tea5-mv]{ transform:none!important; width:auto!important; } } /* ============================================================ 手机端（≤782px）：整页自适应 —— 不再靠拖拽出来的死像素排版。 症状（第 169 轮实测 320/360/375/390/414/430 六档）： 手机编辑里把标题、说明往右拖到「看着居中」，存下来的是 --sx 固定像素 （眉标 +66、主标题 +75、产地说明 +47、产地标题 +88、故事眉标 +118、 故事标题 +91、产品眉标 +98、动态眉标 +102、动态标题 +33、617 说明 -17、 页脚联系栏 +90 / 地址 -29）。这些数是照着 390 宽的屏调出来的： 360 宽：整组左偏 15px，动态标题右边被切 25px； 430 宽：整组左偏 20～35px； 320 宽：617 那段说明定宽 380px，直接顶出屏幕（整页能左右拖）。 而且拖出来的只是「盒子」右移，盒子里的字仍按 390 那一版折行， 换个宽度怎么看都不对。 现在改成： 1) 这些块丢掉横向位移（--sx），横向交给 CSS： 宽还是用拖出来的 --sw（折行位置不变），margin-left/right:auto 让盒子 在自己那一行里居中；max-width:100% 保证再窄的屏也不顶出去； 纵向的 --sy 保留（上下留白的微调，不影响左右）。 2) 眉标 .kicker 是 flex（前面带一条金线），文字居中要 justify-content:center。 3) 产品那段的 .sec-head 是 flex，眉标外面还包了一层收缩到内容宽的 div， 得让这层 div 居中，眉标才真的居中。 4) 页脚整块改成「一列 + 居中」：品牌、联系、地址、底栏三行全部按屏幕居中。 原来联系栏被拖到 112～233（390 屏偏左 22px、430 屏偏左 37px）。 5) 底栏原来 justify-content:space-between + wrap，第三项「ICP 备案申请中」 在 390 掉到左边、到 430 又跳到最右边；改成一列三行居中。 代价：手机上这些块不能再靠拖拽横向移动（数据还在，只是不再输出）。 要调位置改这里，改完全端（手机壳 / 浏览器 / 微信）一致。 ============================================================ */ @media (max-width:782px){ [data-tea5-mv="ab-kicker"],[data-tea5-mv="ab-title"], [data-tea5-mv="og-cap"],[data-tea5-mv="og-title"], [data-tea5-mv="st-kicker"],[data-tea5-mv="st-title"], [data-tea5-mv="pr-kicker"],[data-tea5-mv="pf-text"], [data-tea5-mv="nw-kicker"],[data-tea5-mv="nw-title"]{ transform:translateY(var(--sy,0px))!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; text-align:center; } /* 眉标是 flex：金线和文字作为一个整体居中 */ [data-tea5-mv="ab-kicker"],[data-tea5-mv="st-kicker"], [data-tea5-mv="pr-kicker"],[data-tea5-mv="nw-kicker"]{justify-content:center} /* 617 那段说明在 430 以下会折成两行：让两行长短匀一点， 否则按默认折行会把「签发」拆开（上一行剩个“签”，下一行“发）”） */ [data-tea5-mv="pf-text"]{text-wrap:balance} /* 产品那段：眉标外面那层收缩到内容宽的 div 居中 */ .sec-head > div:first-child{margin-left:auto!important;margin-right:auto!important} /* 页脚：一列居中（品牌 / 联系 / 地址 / 底栏） */ .footer-grid .fcol{grid-column:1/-1;text-align:center} .footer [data-tea5-mv]{ transform:translateY(var(--sy,0px))!important; width:auto!important; max-width:100%!important; } .footer-bottom{display:block;text-align:center} .footer-bottom [data-tea5-mv]{display:block} }