/* ============================================================ 方向 A ·「编辑部」 Editorial ------------------------------------------------------------ 视觉主张：这是一个还没上线的、正在筹备的生意，所以视觉上 不假装成熟。用书刊排版的克制感（衬线标题 + 大字距小标签 + 细规则线 + 大量留白）表达"我们在认真写清楚，不吹"。 与方向 B 的差异（SOP 要求覆盖字体、字号层级、图像处理、质感）： - 字体：衬线标题（Source Serif）vs B 的无衬线几何标题 - 字号层级：A 只有 3 级且落差大（56/28/16）；B 有 5 级且密集 - 图像处理：A 无照片，用纯排版 + 规则线；B 用大面积色块/渐变 - 质感：A 纸面感（暖白 #FCFBF8 + 墨黑）；B 数字感（冷白 + 饱和色） ============================================================ */ :root{ /* 栅格沿用 G2 冻结值，不改版式 */ --gutter: 24px; --maxw: 1200px; --pad-d: 64px; --col: calc((var(--maxw) - var(--gutter) * 11) / 12); --r1: 16px; --r2: 32px; --r3: 64px; --r4: 120px; --r5: 168px; /* 方向 A 字号：三级，落差大。 衬线标题需要比无衬线更大才不显弱，故 H1 提到 56px。 段落只有 16px 一档，辅助文字 13px —— 刻意少级别，靠留白分层。*/ --f1: 56px; --f2: 28px; --f3: 16px; --f4: 13px; --lh1: 1.14; /* 衬线需要更松的行高 */ --lh2: 1.3; --lh3: 1.7; /* 正文行高偏松，纸面阅读感 */ --lh4: 1.5; /* 纸面暖白 + 墨黑。不用纯黑：纯黑在暖白上偏硬 */ --ink: #1a1815; --ink-2: #4a4540; --ink-3: #716860; --line: #d9d3c9; --line-2: #ebe6dd; --bg: #fcfbf8; --bg-2: #f4f1ea; /* 方向 A 唯一的"色"：一个深赭红，只用在极小面积（当前项、强调线） */ --accent: #7a3b2e; --font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Songti SC", "Noto Serif SC", 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; text-rendering: optimizeLegibility; } img{ max-width: 100%; display: block; } a{ color: inherit; } /* 标题一律衬线：这是本方向最容易被识别的特征 */ h1,h2,h3,.h1,.h2,.h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; margin: 0; } .h1{ font-size: var(--f1); line-height: var(--lh1); letter-spacing: -0.02em; } .h2{ font-size: var(--f2); line-height: var(--lh2); } .h3{ font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; } /* 小标签：全大写 + 字距拉开，是编辑部风格的第二特征 */ .eyebrow, .k{ font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .lede{ font-size: 18px; line-height: 1.55; 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); } /* ---------- 布局骨架（与 G2 一致，只换色/字） ---------- */ .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; } .tint{ background: var(--bg-2); } /* 规则线是编辑器风格的主要分隔手段，不用卡片阴影 */ .site-head{ border-bottom: 1px solid var(--line); background: var(--bg); } .site-head .wrap{ display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand{ font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; } .nav{ display: flex; gap: 28px; } .nav a{ font-size: 14px; text-decoration: none; color: var(--ink-2); padding-bottom: 2px; border-bottom: 1px solid transparent; } .nav a[aria-current="page"]{ color: var(--ink); border-bottom-color: var(--accent); } /* 抽屉 / 汉堡：结构不改，只换视觉 */ .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(26,24,21,.42); 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: 104px 0 88px; } .hero .eyebrow{ margin-bottom: 22px; } .hero .h1{ max-width: 18em; } .hero .lede{ margin-top: 26px; max-width: 34em; } /* 三条路径：编辑部风格用竖线起始，不用卡片 */ .ways{ margin-top: var(--r3); padding-top: 28px; border-top: 1px solid var(--line); } .ways-sentence{ margin: 0; font-size: 17px; } .ways-sentence + .ways-sentence{ margin-top: 8px; } /* ---------- 预售四步 ---------- 原先 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; border-top: 1px solid var(--ink); } .steps .step{ display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 24px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line-2); } .steps .step-n{ display: block; font-family: var(--font-display); font-style: normal; font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--accent); } .steps .step .body{ margin: 0; max-width: 62ch; } /* 避免注释最后一行只剩一个孤词（Safari 17.5+ / Chrome 117+ 支持，其余忽略） */ #reserve p.small{ text-wrap: pretty; } .cta-row{ margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } /* 按钮：方角、细边框，编辑部不用大圆角 */ .btn{ display: inline-flex; flex-direction: column; align-items: flex-start; padding: 13px 22px; text-decoration: none; font-size: 15px; font-weight: 600; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 0; letter-spacing: 0.01em; } .btn.ghost{ background: transparent; color: var(--ink); } .btn-bi{ line-height: 1.3; } .btn-bi .zh{ font-weight: 500; opacity: .88; } /* ---------- 卡片区 ---------- */ .section-head{ margin-bottom: var(--r3); } .section-head .h2{ max-width: 24em; } .cards-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); } .card{ padding: 28px 28px 28px 0; border-right: 1px solid var(--line-2); } .card:last-child{ border-right: 0; padding-right: 0; } .card .h3{ margin-bottom: 6px; } .card .small{ margin-bottom: 22px; } /* ---------- 链路：左竖线 + 序号，不用圆点 ---------- */ .chain{ border-left: 1px solid var(--line); padding-left: 0; } .chain .step{ display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0 22px 24px; border-bottom: 1px solid var(--line-2); } .chain .step:first-child{ border-top: 1px solid var(--line-2); } .chain .n{ font-family: var(--font-display); font-size: 14px; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .chain .t, .chain .who{ font-family: var(--font-body); font-size: 17px; line-height: 1.5; font-weight: 500; } /* split 版式（G2 冻结）：左标签 sticky */ .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{ border-right: 1px solid var(--line-2); padding-right: var(--gutter); position: sticky; top: 96px; align-self: start; } /* ---------- 预售四步 ---------- */ /* ---------- 深色区（渠道说明）：A 用墨黑不用蓝黑 ---------- */ .dark{ background: #1a1815; color: #f2efe8; } .dark .h2, .dark .h1{ color: #fff; } .dark .lede{ color: rgba(242,239,232,.7); } .dark .body{ color: rgba(242,239,232,.86); } .dark .eyebrow{ color: rgba(242,239,232,.5); } /* ---------- 页脚 ---------- */ .site-foot{ border-top: 1px solid var(--ink); padding: var(--r3) 0 var(--r2); background: var(--bg); } .site-foot .cols{ display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: var(--gutter); } .site-foot .grp .k{ margin-bottom: 14px; } .site-foot ul{ list-style: none; margin: 0; padding: 0; } .site-foot li{ margin-bottom: 8px; font-size: 14px; } .site-foot .legal{ margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-2); 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(--ink); font-weight: 600; border-bottom-color: var(--accent); } .lang-switch .sep{ color: var(--ink-3); padding: 0 3px; } .site-foot .lang-switch button{ color: var(--ink-3); } .site-foot .lang-switch button[aria-pressed="true"]{ color: var(--ink); border-bottom-color: var(--accent); } 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: 34px; --f2: 23px; --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: none; border-radius: 0; } .hero{ padding: 56px 0 48px; } .cards-3{ grid-template-columns: 1fr; border-top: 1px solid var(--ink); } .card{ border-right: 0; border-bottom: 1px solid var(--line-2); padding: 24px 0; } .split, .split-wide{ grid-template-columns: 1fr; gap: var(--r2); } .split-tall > div:first-child{ border-right: 0; border-bottom: 1px solid var(--line-2); padding-right: 0; padding-bottom: 20px; position: static; } .site-foot .cols{ display: flex; flex-wrap: wrap; gap: 28px; } .chain .step{ grid-template-columns: 36px 1fr; padding-left: 16px; } .h2{ font-size: var(--f2); } } /* ---------- 焦点态（键盘可达性）---------- 原先两方向都没有定义 :focus，键盘用户看不到焦点在哪 —— 这是实际缺陷。 方向 A：细实线外框 + 2px 偏移，与纸面风格一致，不用发光。 */ a:focus-visible, button:focus-visible, summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } /* 鼠标点击不显示焦点环，键盘操作才显示 */ :focus:not(:focus-visible){ outline: none; } /* ---------- 品牌标记 ---------- logo 只用图形，wordmark 交给 HTML 文本：文本在任何尺寸都清晰， 标记可独立缩放。深色底（页脚）用 filter 反白，避免再存一套白版文件。 */ .brand{ display: inline-flex; align-items: center; } /* gap 只在 logo 与文字之间；wordmark 内部两个着色 span 必须紧贴 */ .brand-mark{ margin-right: 8px; } .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; } /* ---------- wordmark 双色 ---------- cashcity 墨黑、shop 用砖红（与 logo 店身同色），呼应纸面印刷的双色感。 砖红对暖白 5.90，20px/600 属大字（门槛 3.0），达标。 */ .brand .w1{ color: var(--ink); } .brand .w2{ color: #9c4a32; } /* ---------- 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; } /* 2026-10-20：首屏遮罩在右侧放开之后，首屏右栏的航线标签压在货轮上对比度不足。 只给首屏内的图解加浅底，其它页面的图解不受影响（那三页本来就是白底）。 */ .hero-sea .geo-wrap{ background: rgba(255,255,255,.84); padding: 10px 14px; border-radius: 3px; } .geo{ width: 100%; height: auto; display: block; --geo-line: var(--accent); --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); opacity: .55; } .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(--accent); border-color: var(--accent); } .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(--accent); } .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(--accent); opacity: .09; } .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: 0; } .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); } /* ---------- A 首页首屏：海洋 ---------- 用户 2026-10-19：「A可以使用海洋的图」。 与 B 的货箱照片形成两种气质：B 深色厚重（白字+暗遮罩）， A 浅色开阔（深字+白遮罩）。这才是 A/B 真正的差异，不只是换字体。 遮罩是白色且很重（.80→.95），因为 A 的正文是深色 --ink-3 #716860， 压在照片暗处时对比度会掉到 2.07（实测）。必须压到足够白。 代价是海面偏淡 —— 但 A 本就是浅色编辑部路线，偏淡是它要的。 */ .hero-sea{ position: relative; overflow: hidden; min-height: 620px; display: flex; align-items: center; } .hero-sea picture{ display: contents; } .hero-ocean{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; z-index: 0; pointer-events: none; } .hero-veil{ position: absolute; inset: 0; z-index: 1; pointer-events: none; /* 停点按实测反推，不是估的。 实测（2026-10-19，1400 视口）：.ways-sentence 占满 wrap 的 1072px， wrap 居中后其右边缘落在 1236px，1236/1400 = 0.883 —— 这就是"正文最右"。 （曾有人按页面内容宽 1072/1400=0.766 估算，那是错的：遮罩铺满 hero， 不是只铺 wrap，参照系必须是 hero 宽度。） 该处横向须 ≥ .82，否则深色小字压在海面暗处只有 3.32（AA 正文要 4.5）。 所以 .86 之前保持 .90，只在最后 14% 放开让海面透出来。 最右 14% 无正文，故允许降到 .62。 */ /* 2026-10-20 用户反馈「A 的 PC 首页不是移动端那样的大海货轮配图」。 实测原因有两条： ① 桌面用的 gen-ocean.jpg 里根本没有货轮（只有海面和远处小剪影）， 当初修移动端时只换了竖版，横版没跟着换 —— 已换成货轮横版； ② 桌面前一版遮罩从 0% 到 86% 全程 .90~.95，只在最右 14% 放到 .62， 和移动端修复前是同一个毛病：图在，但被洗白到看不见。 改法：文字收进左侧 620px（右缘落在约 51%），遮罩在文字区之后放开， 右侧约三分之一让海面与货轮透出来。 对比度依据（2026-10-20 实测，1400 视口，canvas 逐点采样图片像素）： 文字块实际占 x=164~784，即 12%~56%。遮罩必须覆盖到 56% 之后， 首版在 55% 就放到 .88，实测最差 4.35（--ink-3，需 ≥4.5）未过 AA； 改为 58% 之前保持 .90 再放开，复测通过。 */ background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.93) 45%, rgba(255,255,255,.90) 58%, rgba(255,255,255,.52) 70%, rgba(255,255,255,.22) 84%, rgba(255,255,255,.10) 100%), linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,.22) 100%); } /* 首屏文字收进左栏，给右侧的货轮让出画面（仅桌面；移动端规则在下面另行覆盖） */ .hero-sea .h1, .hero-sea .eyebrow, .hero-sea .ways-sentence, .hero-sea .ways, .hero-sea .cta-row{ max-width: 620px; } .hero-sea > .wrap{ position: relative; z-index: 2; width: 100%; } .hero-sea .h1{ color: var(--ink); } .hero-sea .eyebrow{ color: var(--accent); } @media (max-width: 720px){ /* 移动端大图编排（2026-10-20 用户反馈「首页没有采用跟pc端一致的大图做背景」）。 原方案上下都是 .84~.94 的白遮罩，实测读图判「heavily washed out」—— 图在，但看不见，等于没有背景图。而且底部 .84 压暗海面时 ink3 只有 4.00， 本来就没过 AA（此前只按亮海面估过，漏了暗海面）。 改法：hero 抬高，内容压到下半部，上半部只铺 .28 让海面显出来； 文字所在的下半部仍保持 .90 以上保对比度。 */ /* 手机竖屏改用 9:16 竖版货轮图（gen-ocean-portrait.jpg）， 不再拿横图硬裁——横图在竖屏只能看到约 30% 宽度， 读图判「像天空不是海」，因为地平线和浪的走向都被裁掉了。 竖版图地平线在上部，货轮在下半部，遮罩只需盖住上半部的文字区。 */ /* 竖版货轮图（gen-ocean-portrait.jpg）。地平线在上部、船在下半部。 实测文字分布 13%~93%，几乎占满整屏，所以遮罩没法只盖上半部 ——盖满就看不见船，不盖满文字就压在海浪上（读图判「lower text difficult to read over the waves」）。 解法：把辅助小字移出 hero（见 .hero-sea .small 的 mobile 规则）， 文字只占到约 78%，下 22% 留给海面。 */ /* 给 hero 一个最小高度，让它比文字高，下沿才能露出货轮。 实测文字区块约 430px 高，hero 定 620px 时下方有约 190px 留给海面。 */ /* 关键取舍：白遮罩与"看得见船"在手机上本质冲突。 整幅遮罩压到能保文字（.93）时船被冲淡；压到能看船时文字不达标。 解法：不再整幅压白，改成"文字区用一层半透明白底卡片"， 遮罩只做很轻的过渡，船和海就能透出来。 */ /* 卡片实测 547px 高、距顶 76px，底边在 623px。 hero 给 860px → 卡片下方约 237px 露图；hero 本身约 1.1 屏高。 */ .hero-sea{ min-height: 860px; padding-top: 76px; padding-bottom: 0; } .hero-ocean{ object-position: center top; } .hero-veil{ background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.22) 40%, rgba(255,255,255,.10) 100%); } /* 卡片收紧：原 padding 26/22 + margin 12 让卡片 547px 高，读图判 「very tall and crowds the ship」。收到 padding 18/16、字号降一档。 */ .hero-sea > .wrap{ background: rgba(255,255,255,.91); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; padding: 18px 16px 16px; margin: 0 10px; } .hero-sea .eyebrow{ font-size: 12px; } /* 英文标题 81 字符，34px 下折 7 行（实测 305px 高），是卡片过高的主因。 降到 27px + 行高 1.26，英文约 5 行、中文约 2 行。 */ .hero-sea .h1{ font-size: 27px; line-height: 1.26; letter-spacing: -0.01em; } .hero-sea .ways-sentence{ font-size: 15px; line-height: 1.6; } .hero-sea .ways{ margin-top: 14px; } .hero-sea .cta-row{ margin-top: 18px; } /* 移动端首屏只保留标题 + 三条路径 + 主按钮； "即将上线"那行与"How it works"链接移到 hero 之外（插在首屏之后）， 这样文字只占到约 78%，下 22% 留给海面露出货轮。 */ .hero-sea .cta-row .small{ display: none; } /* "How it works" 链接在移动端移到首屏之外，避免压在海面上 */ .hero-sea > .wrap > p.small{ display: none; } .hero-sea .cta-row{ margin-top: 22px; } .hero-sea .ways{ margin-top: 18px; } } /* 中文标题避免末行只剩一两个字（"货。" 这类孤行）。 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; } }@media (max-width: 720px){ /* 竖版货轮图（gen-ocean-portrait.jpg）在手机上占满宽度。 前几版都失败：整幅白遮罩会冲淡船；半透明卡片浮在中间会挡住船。 最终做法（移动端常见形态）：hero 上半部让图完整露出（约 46vh）， 文字全部收进下半部的实色白区，两者不重叠。这样船看得见、 文字对比度也不必靠遮罩硬压。 */ .hero-sea{ position: relative; min-height: 0; padding: 0; display: block; } .hero-sea picture{ display: contents; } .hero-ocean{ position: relative; inset: auto; width: 100%; height: 46vh; min-height: 260px; max-height: 380px; object-fit: cover; object-position: center 40%; display: block; z-index: 0; } .hero-veil{ display: none; } .hero-sea > .wrap{ position: relative; z-index: 2; width: auto; background: var(--bg); margin: -22px 0 0; padding: 26px 20px 30px; border-radius: 14px 14px 0 0; } .hero-sea .eyebrow{ font-size: 12px; } .hero-sea .h1{ font-size: 27px; line-height: 1.26; letter-spacing: -0.01em; } .hero-sea .ways-sentence{ font-size: 15px; line-height: 1.6; } .hero-sea .ways{ margin-top: 14px; } .hero-sea .cta-row{ margin-top: 18px; } .hero-sea .cta-row .small{ display: none; } .hero-sea > .wrap > p.small{ display: none; } } /* 移动端首屏只保留标题 + 三条路径 + 主按钮； "即将上线"那行与"How it works"链接移到 hero 之外（插在首屏之后）， 这样文字只占到约 78%，下 22% 留给海面露出货轮。 */ .hero-sea .cta-row .small{ display: none; } /* "How it works" 链接在移动端移到首屏之外，避免压在海面上 */ .hero-sea > .wrap > p.small{ display: none; } .hero-sea .cta-row{ margin-top: 22px; } .hero-sea .ways{ margin-top: 18px; } } /* 中文标题避免末行只剩一两个字（"货。" 这类孤行）。 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 尺寸，抽屉内的