/* ============================================================ 方向 B ·「货架」 Shelf ------------------------------------------------------------ 视觉主张：这是个卖货的站，货物从中国来、到门店里。所以视觉 用"货架 + 标签"的语言：几何无衬线、饱和的货架蓝、色块分区、 粗字重短句、编号做成货签。不假装是媒体，直接是商铺。 与方向 A 的差异（SOP 要求覆盖字体、字号层级、图像处理、质感）： - 字体：几何无衬线（Space Grotesk 标题）vs A 的衬线 - 字号层级：B 用 5 级且落差小（52/32/22/17/13），靠字重分层； A 只有 3 级且落差大，靠留白分层 - 图像处理：B 用色块 + 大号数字水印制造视觉锚点； A 无图形，纯排版 + 规则线 - 质感：B 冷白 + 饱和蓝 + 圆角 + 阴影（数字感）； A 暖白 + 墨黑 + 方角 + 无阴影（纸面感） ============================================================ */ :root{ /* 栅格沿用 G2 冻结值，不改版式 */ --gutter: 24px; --maxw: 1200px; --pad-d: 64px; --col: calc((var(--maxw) - var(--gutter) * 11) / 12); --r1: 12px; --r2: 24px; --r3: 56px; --r4: 104px; --r5: 152px; /* 方向 B 字号：五级，相邻落差小，靠字重和色块分层 */ --f1: 52px; --f2: 32px; --f3: 17px; --f4: 13px; --f5: 22px; --lh1: 1.06; /* 无衬线大标题可以更紧 */ --lh2: 1.18; --lh3: 1.55; --lh4: 1.45; /* 冷白 + 货架蓝 */ --ink: #0e1116; --ink-2: #3d444e; --ink-3: #666e79; --line: #dee3ea; --line-2: #eceff4; --bg: #ffffff; --bg-2: #f3f6fa; --brand: #1b4fd8; /* 主色：货架蓝 */ --brand-deep: #14379a; --brand-wash: #e8eefc; --accent: #d8541b; /* 次色：橙，只用于极少量标记 */ --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } *,*::before,*::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--f3); line-height: var(--lh3); -webkit-font-smoothing: antialiased; } img{ max-width: 100%; display: block; } a{ color: inherit; } h1,h2,h3,.h1,.h2,.h3{ font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; } .h1{ font-size: var(--f1); line-height: var(--lh1); } .h2{ font-size: var(--f2); line-height: var(--lh2); } .h3{ font-size: var(--f5); line-height: 1.25; } .eyebrow, .k{ font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); } .lede{ font-size: 18px; line-height: 1.5; color: var(--ink-2); } .body{ font-size: var(--f3); line-height: var(--lh3); } .small{ font-size: var(--f4); line-height: var(--lh4); color: var(--ink-3); } .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-d); } .grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } .section{ padding: var(--r4) 0; } /* 区块之间用一条极浅的分带收口：读图曾指出卡片行与下一段"几乎没有分隔" */ .section + .section{ border-top: 1px solid var(--line-2); } .tint{ background: var(--bg-2); } /* header：白底 + 细线，右侧 CTA 用主色实心 */ .site-head{ border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 50; } .site-head .wrap{ display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand{ font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; } .brand::after{ content: ""; display: inline-block; width: 6px; height: 6px; background: var(--brand); margin-left: 4px; vertical-align: super; } .nav{ display: flex; gap: 24px; } .nav a{ font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink-2); padding: 4px 0; } .nav a[aria-current="page"]{ color: var(--brand); font-weight: 600; } .burger{ display: none; } .drawer{ position: fixed; top:0; bottom:0; right:-100%; width: 86%; max-width: 360px; background: var(--bg); z-index: 100; display: flex; flex-direction: column; padding: 20px; border-left: 1px solid var(--line); } .drawer[data-open="true"]{ right: 0; } .overlay{ position: fixed; inset: 0; background: rgba(14,17,22,.4); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .overlay[data-open="true"]{ opacity: 1; pointer-events: auto; } body[data-lock="true"]{ overflow: hidden; } /* ---------- 首屏：色块分区，右侧大号水印数字 ---------- */ .hero{ padding: 88px 0 72px; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--brand-wash) 0%, var(--bg) 78%); } .hero::after{ /* 大号水印：制造视觉锚点，是 B 独有的图像处理手法（无照片的图像性） */ content: "01"; position: absolute; right: -20px; top: 40px; font-family: var(--font-display); font-size: 280px; font-weight: 700; color: rgba(27,79,216,.06); line-height: 1; pointer-events: none; letter-spacing: -0.04em; } .hero .wrap{ position: relative; z-index: 1; } .hero .h1{ max-width: 17em; } .hero .lede{ margin-top: 24px; max-width: 33em; font-size: 19px; } .ways{ margin-top: var(--r3); padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); box-shadow: 0 1px 3px rgba(14,17,22,.07), 0 8px 20px -8px rgba(14,17,22,.10); } .ways-sentence{ margin: 0; font-size: 16px; font-weight: 500; } .ways-sentence + .ways-sentence{ margin-top: 6px; } /* ---------- 预售四步 ---------- 原先 grid-template-columns: 48px 1fr，但 HTML 每步只有一个 div， 序号列恒空、文字被挤进 48px 窄列（实测 body 宽仅 48px、右侧空 1004px， 四步高度 262/368/341/394px，序号完全不显示）。 现改为：ol/li 语义列表 + 真实序号列 + 文字占满剩余宽度。 */ .steps{ list-style: none; margin: 0; padding: 0; counter-reset: none; border-top: 1px solid var(--line); } .steps .step{ display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 24px; align-items: start; padding: 26px 4px; border-bottom: 1px solid var(--line-2); } .steps .step-n{ display: block; font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1.6; letter-spacing: .06em; color: var(--brand); width: 30px; height: 30px; border-radius: 50%; background: var(--brand-wash); text-align: center; padding-top: 4px; } .steps .step .body{ margin: 0; max-width: 62ch; } /* 避免注释最后一行只剩一个孤词（Safari 17.5+ / Chrome 117+ 支持，其余忽略） */ #reserve p.small{ text-wrap: pretty; } .cta-row{ margin-top: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .btn{ display: inline-flex; flex-direction: column; align-items: flex-start; padding: 13px 24px; text-decoration: none; font-size: 15px; font-weight: 600; border: 1px solid var(--brand); background: var(--brand); color: #fff; border-radius: 8px; } .btn.ghost{ background: #fff; color: var(--brand); } .btn-bi{ line-height: 1.3; } .btn-bi .zh{ font-weight: 500; opacity: .9; } /* ---------- 卡片：白卡 + 阴影 + 圆角，是 B 的"货架格" ---------- */ .section-head{ margin-bottom: var(--r3); } .cards-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card{ background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px 26px 26px; box-shadow: 0 1px 2px rgba(14,17,22,.06), 0 6px 16px -6px rgba(14,17,22,.10); } .card .h3{ margin-bottom: 4px; } .card .small{ margin-bottom: 20px; color: var(--brand); font-weight: 600; } /* ---------- 链路：圆点 + 连线，货签编号 ---------- */ .chain{ position: relative; padding-left: 8px; } .chain .step{ display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 18px 0 18px 0; position: relative; } .chain .step::before{ /* 竖线：连接各步骤 */ content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 2px; background: var(--line); } .chain .step:first-child::before{ top: 22px; } .chain .step:last-child::before{ bottom: calc(100% - 22px); } .chain .n{ position: relative; z-index: 1; width: 52px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; border-radius: 15px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; align-self: start; margin-top: 2px; } .chain .t, .chain .who{ font-size: 17px; line-height: 1.5; font-weight: 500; } .split{ display: grid; grid-template-columns: 3fr 8fr; gap: var(--r3); align-items: start; } .split-wide{ grid-template-columns: 4fr 7fr; } .split-tall{ align-items: stretch; } .split-tall > div:first-child{ padding-right: var(--gutter); position: sticky; top: 96px; align-self: start; border-right: 2px solid var(--brand-wash); } /* ---------- 预售四步 ---------- */ /* ---------- 深色区：深蓝，B 的品牌色延伸 ---------- */ .dark{ background: var(--brand-deep); color: #eaf0ff; } .dark .h2{ color: #fff; } .dark .lede{ color: rgba(234,240,255,.72); } .dark .body{ color: rgba(234,240,255,.88); } /* 审查实测 rgba(...,.55) 在 #14379a 上只有 3.835，未达 AA 正文 4.5； 提到 .72 后为 5.435。这是 11px 全大写小标签，属正文级，必须过线。 */ .dark .eyebrow{ color: rgba(234,240,255,.72); } /* ---------- 页脚 ---------- */ .site-foot{ border-top: 1px solid var(--line); padding: var(--r3) 0 var(--r2); background: var(--bg-2); } .site-foot .cols{ display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: var(--gutter); } .site-foot .grp .k{ margin-bottom: 12px; } .site-foot ul{ list-style: none; margin: 0; padding: 0; } .site-foot li{ margin-bottom: 8px; font-size: 14px; } .site-foot .legal{ margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); } /* ---------- 语言切换 ---------- */ .lang-switch{ display: inline-flex; align-items: center; border: 0; background: none; padding: 0; margin: 0; font: inherit; } .lang-switch button{ border: 0; background: none; padding: 2px; margin: 0; font: inherit; color: var(--ink-3); cursor: pointer; line-height: 1; border-bottom: 1px solid transparent; } .lang-switch button[aria-pressed="true"]{ color: var(--brand); font-weight: 700; border-bottom-color: var(--brand); } .lang-switch .sep{ color: var(--ink-3); padding: 0 3px; } .site-foot .lang-switch button[aria-pressed="true"]{ color: var(--brand); } html[data-lang="en"] .zh{ display: none !important; } html[data-lang="zh"] .en{ display: none !important; } /* ---------- 移动 ---------- */ @media (max-width: 720px){ :root{ --pad-d: 20px; --f1: 33px; --f2: 24px; --f3: 16px; --f4: 13px; --r4: 64px; --r3: 40px; --gutter: 16px; } .nav{ display: none; } .burger{ display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; border-radius: 8px; } .hero{ padding: 52px 0 44px; } .hero::after{ font-size: 160px; top: 20px; right: -10px; } .cards-3{ grid-template-columns: 1fr; gap: 14px; } .card{ padding: 22px 20px; } .split, .split-wide{ grid-template-columns: 1fr; gap: var(--r2); } .split-tall > div:first-child{ border-right: 0; padding-right: 0; padding-bottom: 16px; border-bottom: 2px solid var(--brand-wash); position: static; } .site-foot .cols{ display: flex; flex-wrap: wrap; gap: 26px; } .chain .step{ grid-template-columns: 44px 1fr; gap: 14px; } .chain .step::before{ left: 21px; } .chain .n{ width: 44px; height: 26px; border-radius: 13px; font-size: 11px; } } /* ---------- 焦点态（键盘可达性）---------- 原先两方向都没有定义 :focus，键盘用户看不到焦点在哪 —— 这是实际缺陷。 方向 B：主色外框 + 圆角，与货架风格一致。 */ a:focus-visible, button:focus-visible, summary:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; } :focus:not(:focus-visible){ outline: none; } /* ---------- 品牌标记 ---------- logo 只用图形，wordmark 交给 HTML 文本。 方向 B 原本用 .brand::after 点了个小方块，有真标记后那个点多余，去掉。 */ .brand{ display: inline-flex; align-items: center; } /* gap 只在 logo 与文字之间；wordmark 内部两个着色 span 必须紧贴，否则读成两个词 */ .brand-mark{ margin-right: 8px; } .brand .w1, .brand .w2{ margin: 0; padding: 0; display: inline; } .brand-mark{ width: 28px; height: 28px; flex: 0 0 auto; display: block; } /* 深色区反白：先 brightness(0) 压成纯黑再 invert，与原始颜色无关 */ .dark .brand-mark{ filter: brightness(0) invert(1); } .drawer .brand-mark{ width: 24px; height: 24px; } .brand::after{ content: none; } /* ---------- wordmark 双色 ---------- cashcity 近黑、shop 用主色蓝： - 保住 "cashcityshop" 读成一个词（两段之间 0 间距，见上方说明） - "shop" 是类目后缀，用主色点出来，与 logo 的蓝呼应 - 蓝对白 6.65，20px/700 属大字（门槛 3.0），达标 - 若将来页脚改深蓝底，蓝字对深蓝只有 1.55，必须改为白色 */ .brand .w1{ color: var(--ink); } .brand .w2{ color: var(--brand); } /* ---------- WhatsApp 图标（官方标志）---------- 用官方 SVG（Wikimedia Commons，Public domain / 商标权归 WhatsApp）。 原先是自制近似图形 + currentColor 单色，现改为官方绿色 #25D366。 仍无号码：aria-disabled + 不响应指针，仅作"将来会加"的占位。 注意：官方标志的品牌规范要求不改色、不旋转、不叠加。此处只缩放。 */ /* ---------- WhatsApp 图标（官方标志，未改动）---------- 文件：assets/whatsapp-official.svg 来源：Wikimedia Commons "File:WhatsApp.svg" credit = Derivative of WhatsApp logo.svg, extracted from official website 版权 Public domain；**商标权归 WhatsApp/Meta，标记 Restrictions: trademarked** 为什么直接用官方原文件、不做"扁平化改造"：WhatsApp 品牌规范不允许改动标志 （不改色、不旋转、不叠加、不改比例）。我曾尝试提取路径重建成纯色版， 过程中还把气泡底与听筒层搞反过；后来实测官方文件在 20px 仍清晰、16px 才糊， 所以重建没有必要 —— 直接缩放使用即可。 状态：仍无号码。aria-disabled + pointer-events:none，不响应点击、无 href， 仅作"将来会加"的占位。 */ .wa{ width: 22px; height: 22px; flex: 0 0 auto; display: block; pointer-events: none; } /* ---------- 移动端 WhatsApp 图标 ---------- 桌面端图标在 .nav 内；移动端 .nav{display:none}，图标因此消失（实测 0×0）。 这不是有意为之 —— S3 要求"保留 WhatsApp 图标"，桌面有移动无属不一致。 复制一份到 header 内、汉堡左侧，仅移动端显示。 */ .wa-mobile{ display: none; } @media (max-width: 720px){ .wa-mobile{ display: block; width: 22px; height: 22px; flex: 0 0 auto; margin-right: 10px; pointer-events: none; } } /* ---------- 预售四步 · 移动端 ---------- 桌面 52px 序号列 + 24px 间距在 390px 下会挤掉正文宽度，收窄到 34px + 12px。 */ @media (max-width: 720px){ .steps .step{ grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 20px 0; } .steps .step-n{ font-size: 12px; width: 26px; height: 26px; padding-top: 3px; } } /* ---------- 首屏地理关系示意 ---------- 首屏说"从中国运到乔治敦"，但读者不知道乔治敦在哪。这里给一条极简航线， 不画世界地图： - 不引入外部地图文件，无授权问题、无外链请求 - 不用真实海岸线轮廓 —— 简化轮廓画错了比不画更糟，抽象航线不会错 - 两端点名（中国 / 乔治敦·圭亚那），中间标海运，就是全部信息 深色区反白规则见下方 .dark .geo */ .geo-wrap{ align-self: end; padding-bottom: 4px; } .geo{ width: 100%; height: auto; display: block; --geo-line: var(--brand); --geo-ink: var(--ink-2); } .geo-path{ fill: none; stroke: var(--geo-line); stroke-width: 2.5; stroke-dasharray: 7 5; opacity: 1; } .geo-dot{ fill: var(--geo-line); } .geo-arrowhead{ fill: var(--geo-line); } .geo-dot-end{ fill: var(--accent); } .geo-ring{ fill: none; stroke: var(--geo-line); stroke-width: 1.5; opacity: .35; } .geo-ring-end{ stroke: var(--accent); } .geo-label{ font-family: var(--font-display); font-size: 21px; font-weight: 700; fill: var(--ink); letter-spacing: .01em; } .geo-sub{ font-size: 16px; fill: var(--ink-2); font-weight: 500; } .geo-mid{ font-size: 15px; fill: var(--ink-2); letter-spacing: .05em; } @media (max-width: 900px){ .geo-wrap{ display: none; } } /* ---------- 进度时间线 ---------- 原先 .track / .node 没有任何样式（纯靠内联），三个状态只是并排的文本块。 改成横向时间线：一条轴，三个节点，节点用实心/空心区分"已完成/还没"。 事实口径见 S3 A-4：只有"已签合同、货已进店"两件完成，预售批次未完成。 */ .track{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--r3); position: relative; } .track::before{ content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--line); } .track .node{ position: relative; padding: 40px 24px 0 0; } .track .node::before{ content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg-2); } .track .node.done::before{ background: var(--brand); border-color: var(--brand); } .track .node.done::after{ content: ""; position: absolute; left: 4px; top: 8px; width: 5px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .track .mark{ margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .track .node.done .mark{ color: var(--brand); } .track .node .body{ margin-top: 8px; } @media (max-width: 720px){ .track{ grid-template-columns: 1fr; } .track::before{ left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .track .node{ padding: 0 0 28px 32px; } .track .node::before{ top: 4px; left: 1px; } .track .node.done::after{ top: 9px; left: 5px; } } /* ---------- 首屏地理背景 ---------- 经纬网格 + 大西洋航线，纯装饰层。 - 不用真实海岸线：简化轮廓画错国界比不画更糟；网格与航线不表达任何主权信息 - 极低透明度，必须不干扰正文可读性（正文对比度按"最深可能的背景"复核） - pointer-events:none，不拦截点击；aria-hidden，读屏跳过 - 移动端隐藏：390px 下背景细节既看不清又增加渲染负担 */ .hero{ position: relative; overflow: hidden; } .hero-map{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; filter: saturate(.55); color: var(--brand); opacity: .075; } .hero > .wrap{ position: relative; z-index: 1; } @media (max-width: 720px){ .hero-map{ display: none; } } /* ---------- 生成图（S5 素材）---------- 三类：海图纹理（首屏背景）、货箱（预售区）、门店（about，标示意）。 - 门店图必须带 figcaption 示意标注：读图实测"容易被当成真实门店" - 与全站直角/大圆角调性一致；不加阴影避免和图库感叠加 */ .fig{ margin: 0 0 var(--r2); } .fig img{ display: block; width: 100%; height: auto; border-radius: 10px; } .fig-boxes{ margin-bottom: 28px; } .fig-boxes img{ aspect-ratio: 21 / 8; object-fit: cover; object-position: center 62%; } .fig-shop{ margin-bottom: 40px; } .fig-cargo{ margin-bottom: 36px; } .fig-cargo img{ aspect-ratio: 21 / 9; object-fit: cover; object-position: center 45%; } .fig-shop img{ aspect-ratio: 21 / 9; object-fit: cover; object-position: center 55%; } /* 示意图标注必须显眼：about 页通篇在讲"什么是真的"， 一个像实拍的示意图若标注被忽略，会反过来伤害可信度。 */ /* 标注放在图片上方：先读到"这是示意"，再看图。 下方小字实测被读图判为"容易被忽略"。 */ .fig-cap{ margin: 0 0 8px; padding: 9px 12px; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--ink-2); background: var(--bg-2); border-left: 3px solid var(--ink-3); } /* ---------- 首页首屏全幅大图 ---------- 用户 2026-10-19：「首页按理有个大图作为背景图才合适」。 全幅照片 + 压暗遮罩 + 反白文字。 - 不复用 .dark：那个类会铺深蓝底色，遮掉照片；且它的 .dark .brand-mark{filter:brightness(0) invert(1)} 是给深蓝块用的 - 遮罩做两层：整体压暗 + 左侧加强暗角（标题在左，右侧让给照片细节） - 反白色的对比度已实测（见素材清单 §9） */ .hero-photo{ position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; } .hero-photo picture{ display: contents; } .hero-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; z-index: 0; pointer-events: none; } .hero-scrim{ position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8,11,18,.88) 0%, rgba(8,11,18,.74) 38%, rgba(8,11,18,.42) 62%, rgba(8,11,18,.30) 100%), linear-gradient(180deg, rgba(8,11,18,.55) 0%, rgba(8,11,18,.10) 35%, rgba(8,11,18,.45) 100%); } .hero-photo > .wrap{ position: relative; z-index: 2; width: 100%; } /* 反白 */ .hero-photo .h1{ color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); } .hero-photo .eyebrow{ color: rgba(255,255,255,.62); } .hero-photo .hero-sub{ color: rgba(255,255,255,.78); } .hero-photo .ways{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(3px); } .hero-photo .ways-sentence{ color: rgba(255,255,255,.92); } .hero-photo .small{ color: rgba(255,255,255,.88); } .hero-photo .btn{ box-shadow: 0 2px 12px rgba(0,0,0,.28); } /* 航线图反白：深底上不能用深蓝/砖红 */ .hero-photo .geo-wrap{ padding: 18px 20px 14px; border-radius: 12px; background: rgba(8,11,18,.52); backdrop-filter: blur(6px); } .hero-photo .geo{ --geo-line: rgba(255,255,255,.55); --geo-ink: rgba(255,255,255,.8); } .hero-photo .geo-path{ stroke: rgba(255,255,255,.5); } .hero-photo .geo-dot{ fill: #fff; } .hero-photo .geo-dot-end{ fill: #ff9c6e; } .hero-photo .geo-ring{ stroke: rgba(255,255,255,.4); } .hero-photo .geo-ring-end{ stroke: #ff9c6e; } .hero-photo .geo-arrowhead{ fill: rgba(255,255,255,.6); } .hero-photo .geo-label{ fill: #fff; } .hero-photo .geo-sub{ fill: rgba(255,255,255,.72); } .hero-photo .geo-mid{ fill: rgba(255,255,255,.65); } @media (max-width: 720px){ /* 手机竖屏改用 9:16 竖版货箱图（gen-hero-portrait.jpg）。 横图竖屏只能看到 36% 宽度（实测缩放后 1085px 宽、容器 390px）， 箱子在右侧被裁掉大半，可视区平均亮度只有 53.9/255，看起来一片黑。 竖版图箱子居中且受光，遮罩可以放宽一点，让货箱真的看得见。 */ .hero-photo{ min-height: 0; padding-top: 92px; padding-bottom: 44px; } .hero-bg{ object-position: center top; } .hero-scrim{ background: linear-gradient(180deg, rgba(8,11,18,.78) 0%, rgba(8,11,18,.66) 40%, rgba(8,11,18,.52) 100%); } } /* 中文标题避免末行只剩一两个字（"货。" 这类孤行）。 text-wrap: pretty 会让浏览器优先均衡末行，Chrome 117+ / Safari 17.5+ 支持； 不支持的浏览器退回正常断行，不产生副作用。 */ /* 中文标题末行只剩"货。"的孤行问题，试过两种办法都不理想： - text-wrap:pretty：本机 Chrome 未改变断行（实测末行仍 165px） - max-width:620px：宽度生效了，但断点仍在"，"之后，末行还是 165px 原因不是 CSS，是这句中文 22 字在 707px / 52px 字号下的自然结果。 强改会把句子断在不该断的位置，故保持原样。 若用户认为必须改，只能动 S3 文案（改字数），不在视觉层解决。 */ .h1{ text-wrap: pretty; } /* 补回 S4 design-v2.css:379 的移动端页脚顺序：说明组提到联系组之前。 S5 重构时漏了这条，属于回归。 */ @media (max-width: 720px){ .site-foot .grp:nth-child(4){ order: 2; } } /* ---------- 移动端抽屉：完整重写（2026-10-20） ---------- 原状态几乎没样式：只有定位和 brand-mark 尺寸，抽屉内的