/* gera-mobile1018.css — atlas 层（旧模板 286 页）手机端视觉层 (2026-10-18) * * 上一批（mobile1017.css）只覆盖 v6 层：首页 / /category/ / 28 品类页 / /services/ / * /products/。用户 2026-10-17 说「可以的，继续」→ 这批补 atlas 层。 * * 实测（ops/shots-mobile.py，390x844 DPR2，屏蔽分析信标）： * page screens chars chars/screen imgs imgs/screen * /regions/ 8.1 4,509 559 3 0.37 * /region/zhejiang/ 15.4 6,943 451 7 0.45 * /who-we-are/ 8.2 5,169 628 1 0.12 * /pricing/ 7.8 3,824 490 1 0.13 * /data/ 6.1 3,791 616 0 0.00 * /resources/ 8.2 4,899 598 6 0.73 * /contact/ 5.6 2,796 500 0 0.00 * * 块级实测（390px，.gera-content 直接子块）： * /who-we-are/ "What we commit to…" = **2,349px 纯文字，0 图** * "Why we do not own a factory." = 1,667px，0 图 * /regions/ "Which part of China makes what." = 1,492px，0 图 * "Clusters, not suppliers." = 1,217px，0 图 * /data/ "Four tables, all recomputable." = 1,087px，0 图 * * atlas 层的定位是**参考文档**（数据 / 地域 / 价格 / 关于我们）—— 正文就是产品， * 所以这批不做「把字变少」（那要动内容），只做四件 CSS 能做的事： * * ① **首屏给一张图**：9 个枢纽页的 .gera-pagehead 加一条 176px 图片带。 * 按 body.page-id-N 选择，用素材池里**已经存在**的插图，不新增素材、不改模板。 * ② **章节看得见**：.gera-sec 之间补发丝分界 + 加大上下留白，让 6 个 1,000px 级 * 的文字块读起来是 6 章，不是一条 6,000px 的长文。 * ③ **行距**：手机上行距 1.66（atlas.css 保留 19px 字号 —— 字大反而每屏字更少， * 对「信息量太大」是正向的）。 * ④ **已有的图放大**：地图卡片在手机上不再 sticky，地图 SVG 占满宽度；卡片配图 * 由 104px 横条改 16:9。 * * 门禁：ops/gate-mobile1018.py（11 档宽 × 9 页 = 99 次加载，200 / overflowX 0 / CJK 0） * 回滚：functions.php 里 dequeue 'gera-mobile1018'（或删本文件）。 */ /* ============================================================ 1. 枢纽页首屏：一条看得见的图片带 ============================================================ */ @media (max-width: 768px) { body.gera.page-id-38 .gera-pagehead::before, body.gera.page-id-15 .gera-pagehead::before, body.gera.page-id-14 .gera-pagehead::before, body.gera.page-id-18 .gera-pagehead::before, body.gera.page-id-19 .gera-pagehead::before, body.gera.page-id-818 .gera-pagehead::before, body.gera.page-id-27848 .gera-pagehead::before, body.gera.page-id-26464 .gera-pagehead::before, body.gera.page-id-25503 .gera-pagehead::before { content: ""; display: block; height: 176px; margin: 0 0 26px; border-radius: 3px; background: #E7E3DB center / cover no-repeat; } body.gera.page-id-38 .gera-pagehead::before { background-image: url(img/port-480.jpg); } /* /regions/ 货从哪来 */ body.gera.page-id-15 .gera-pagehead::before { background-image: url(img/caliper-480.jpg); } /* /who-we-are/ 我们怎么验 */ body.gera.page-id-14 .gera-pagehead::before { background-image: url(img/brief-480.jpg); } /* /pricing/ 报价单 */ body.gera.page-id-18 .gera-pagehead::before { background-image: url(img/cartons-480.jpg); } /* /contact/ 出货 */ body.gera.page-id-19 .gera-pagehead::before { background-image: url(img/inspect-480.jpg); } /* /faq/ 验货 */ body.gera.page-id-818 .gera-pagehead::before { background-image: url(img/pr-cnc-480.jpg); } /* /product-line/ */ body.gera.page-id-27848 .gera-pagehead::before { background-image: url(img/lab-480.jpg); } /* /data/ */ body.gera.page-id-26464 .gera-pagehead::before { background-image: url(img/housewares-480.jpg); } /* /resources/ */ body.gera.page-id-25503 .gera-pagehead::before { background-image: url(img/pr-press-480.jpg); } /* /industry-belt/ */ } /* ============================================================ 2. 章节分界与节奏 ============================================================ */ @media (max-width: 768px) { body.gera .gera-sec { padding: 56px 0; } body.gera .gera-sec + .gera-sec { border-top: 1px solid var(--line-2); } body.gera .gera-sec > .gera-wrap > .gera-eyebrow:first-child { margin-bottom: 22px; } body.gera .gera-sec > .gera-wrap > h2:first-child { margin-top: 0; } /* 章节内的 h3 也要有落点（长文里 h3 现在和正文一样重） */ body.gera .gera-sec h3 { margin-top: 34px; } body.gera .gera-sec h3:first-child { margin-top: 0; } } /* ============================================================ 3. 行距 ============================================================ */ @media (max-width: 768px) { body.gera .gera-wrap p, body.gera .gera-wrap li { line-height: 1.66; } body.gera .gera-narrow p, body.gera .gera-narrow li { line-height: 1.66; } body.gera .gera-lead, body.gera .gera-pagehead .gera-sub { line-height: 1.58; } body.gera .gera-micro { line-height: 1.55; } body.gera .gera-note { padding: 18px 18px; } } /* ============================================================ 4. 已有的图放大 ============================================================ */ @media (max-width: 768px) { /* 地图：手机上不再 sticky（sticky 会把它钉在视口里占掉半屏），SVG 占满宽度 */ body.gera .gera-mapcard { position: static; } body.gera .gera-mapbox svg, body.gera .gera-map-wrap svg, body.gera .gera-mapcard svg { width: 100%; height: auto; } body.gera .gera-map-wrap { margin-left: 0; margin-right: 0; } /* 卡片顶部配图：104px 横条 → 16:9（手机上 104px 只有拇指宽） */ body.gera .gera-card > .gera-cimg { height: auto; aspect-ratio: 16 / 9; } body.gera .gera-card > .gera-cimg img { width: 100%; height: 100%; object-fit: cover; } /* 正文里的插图：占满内容宽 */ body.gera .gera-fig img, body.gera .gera-band img { width: 100%; height: auto; } body.gera .gera-fig figcaption { font-size: 12.5px; line-height: 1.5; } } /* ============================================================ 5. 480px 收紧 ============================================================ */ @media (max-width: 480px) { body.gera.page-id-38 .gera-pagehead::before, body.gera.page-id-15 .gera-pagehead::before, body.gera.page-id-14 .gera-pagehead::before, body.gera.page-id-18 .gera-pagehead::before, body.gera.page-id-19 .gera-pagehead::before, body.gera.page-id-818 .gera-pagehead::before, body.gera.page-id-27848 .gera-pagehead::before, body.gera.page-id-26464 .gera-pagehead::before, body.gera.page-id-25503 .gera-pagehead::before { height: 156px; margin-bottom: 22px; } body.gera .gera-sec { padding: 48px 0; } }