/* =========================================== trade_program.css — Trade Program 介绍页视图：information/trade/trade_program.html 布局：营销页全宽 section + 1200px 内层 · 图文左右交替分栏媒体：4:3 cover + .nd-media-zoom（选景见摄影总则 §2） Section 背景交替（对齐 Contact）：白 #fff → 浅暖灰 var(--color-bg) → 白 → … 区块之间 margin 为 0；上下留白用 --lp-main-section-pad-y（lp_tokens.css）页底收束：components/editorial_cta.css（模板 include；无配图）注意：page-trade-program 在，勿写 .page-trade-program.info-page--marketing =========================================== */ /* Hero ↔ 内容约 20px */ body.page-trade-program .info-page--marketing .lp-main--full { max-width: none; padding: 20px 0 0; } body.page-trade-program .info-page--marketing .lp-content--full { background: transparent; border: none !important; box-shadow: none !important; padding: 0; } body.page-trade-program .info-page--marketing { min-height: auto; } /* 覆盖 information_article 的 section[id] 仅加 padding-bottom，保证上下对称 */ body.page-trade-program .lp-content--full .trade-section, body.page-trade-program .lp-content--full .trade-section[id] { margin: 0; padding-top: var(--lp-main-section-pad-y); padding-bottom: var(--lp-main-section-pad-y); } /* ── Hero（大地棕渐变，对齐 Contact / About）────────────── */ body.page-trade-program .lp-hero--marketing:not(.lp-hero--has-bg) { margin-bottom: 0; padding: clamp(56px, 8vw, 80px) var(--lp-spacing-lg, 24px); background: linear-gradient( 160deg, var(--color-primary, #333) 0%, #5f5b54 45%, var(--color-accent, #205058) 100% ); } body.page-trade-program .lp-hero--marketing.lp-hero--has-bg .lp-hero__bg { margin-bottom: 0; min-height: 440px; padding: clamp(56px, 8vw, 80px) var(--lp-spacing-lg, 24px); } @media (min-width: 768px) { body.page-trade-program .lp-hero--marketing.lp-hero--has-bg .lp-hero__bg { min-height: 520px; } } @media (min-width: 1024px) { body.page-trade-program .lp-hero--marketing.lp-hero--has-bg .lp-hero__bg { min-height: 600px; } } body.page-trade-program .lp-hero--marketing:not(.lp-hero--has-bg)::before { background: rgba(15, 23, 42, 0.08); } body.page-trade-program .lp-hero--marketing .lp-hero-icon { display: none; } body.page-trade-program .lp-hero--marketing .lp-hero-content { max-width: var(--lp-content-max, 1200px); margin: 0 auto; font-family: var(--lp-font); } body.page-trade-program .lp-hero--marketing .lp-hero-title { font-family: var(--lp-font); font-size: clamp(1.85rem, 3.8vw, 2.65rem); font-weight: var(--lp-font-weight-heading, 400); line-height: 1.2; color: #fff; text-transform: none; letter-spacing: -0.022em; } body.page-trade-program .lp-hero--marketing .lp-hero-subtitle { max-width: 42rem; margin-top: 0.75rem; font-family: var(--lp-font); font-size: clamp(1.05rem, 1.7vw, 1.2rem); font-weight: 400; line-height: 1.6; letter-spacing: 0.005em; color: rgba(255, 255, 255, 0.9); } /* ── Section 通用（白 / 浅灰交替 · 上下 padding 对称）────── */ .trade-section { margin: 0; padding: var(--lp-main-section-pad-y) 0; background: var(--color-surface, #fff); } .trade-section--muted { background: var(--color-bg, #f7f6f4); } .trade-section__inner { max-width: var(--lp-content-max, 1200px); margin: 0 auto; padding: 0 var(--lp-spacing-lg, 24px); } .trade-section__inner--center { text-align: center; } .trade-section-header { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 48px); } .trade-kicker { display: inline-block; margin: 0 0 14px; font-family: var(--lp-font); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent, #205058); } .trade-heading { margin: 0 0 18px; font-family: var(--lp-font); font-size: clamp(1.45rem, 2.4vw, 1.75rem); font-weight: var(--lp-font-weight-heading, 400); line-height: 1.28; letter-spacing: -0.02em; color: var(--color-primary, #1a2f34); } .trade-lead { margin: 0; font-family: var(--lp-font); font-size: clamp(1rem, 1.4vw, 1.0625rem); font-weight: 400; line-height: 1.65; color: var(--lp-text-secondary, #5a6b6e); } .trade-copy { margin: 0 0 18px; font-family: var(--lp-font); font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: var(--lp-text-secondary, #5a6b6e); } .trade-copy:last-child { margin-bottom: 0; } /* ── 图文分栏 ─────────────────────────────────────────────── */ .trade-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: center; } .trade-split--reverse { direction: rtl; } .trade-split--reverse > * { direction: ltr; } .trade-split__media { overflow: hidden; border-radius: var(--radius-lg, 14px); background: linear-gradient(145deg, #f0efec, #d8d5cf); box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; } .trade-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .trade-split__copy { max-width: 520px; } .trade-split--intro .trade-split__copy, .trade-split--qualify .trade-split__copy { max-width: none; } /* ── 权益卡片（杂志向：与 About Values / Contact 举例卡一致，整卡居中）── */ .trade-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .trade-benefit-card { display: flex; flex-direction: column; align-items: center; padding: 24px 20px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e0dc); border-radius: var(--radius-lg, 14px); transition: transform 0.3s ease, box-shadow 0.3s ease; } .trade-section--muted .trade-benefit-card { background: var(--color-surface, #fff); } .trade-benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .trade-benefit-card__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 16px; color: var(--color-accent, #205058); background: rgba(var(--color-accent-rgb), 0.12); border-radius: var(--radius-md, 8px); } .trade-benefit-card h3 { margin: 0 0 10px; font-family: var(--lp-font); font-size: clamp(1.1rem, 1.5vw, 1.2rem); font-weight: var(--lp-font-weight-subhead, 500); line-height: 1.35; letter-spacing: -0.015em; color: var(--color-primary, #1a2f34); } .trade-benefit-card p { margin: 0; max-width: 280px; font-family: var(--lp-font); font-size: 0.975rem; line-height: 1.6; color: var(--lp-text-secondary, #5a6b6e); } /* ── 资格清单 ─────────────────────────────────────────────── */ .trade-checklist { margin: 0; padding: 0; list-style: none; } .trade-checklist li { position: relative; padding: 12px 0 12px 28px; font-family: var(--lp-font); font-size: 1.0625rem; line-height: 1.6; color: var(--lp-text-secondary, #5a6b6e); border-bottom: 1px solid var(--color-border, #e2e0dc); } .trade-checklist li:last-child { border-bottom: none; } .trade-checklist li::before { content: ''; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent, #205058); } /* ── 步骤 ─────────────────────────────────────────────────── */ .trade-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; text-align: left; } .trade-step-card { padding: 28px 24px; background: var(--color-bg, #f7f6f4); border: 1px solid var(--color-border, #e2e0dc); border-radius: var(--radius-lg, 14px); } .trade-section--muted .trade-step-card { background: var(--color-surface, #fff); } .trade-step-card__num { display: inline-block; margin-bottom: 14px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--color-accent, #205058); } .trade-step-card h3 { margin: 0 0 10px; font-family: var(--lp-font); font-size: clamp(1.1rem, 1.5vw, 1.2rem); font-weight: var(--lp-font-weight-subhead, 500); line-height: 1.35; letter-spacing: -0.015em; color: var(--color-primary, #1a2f34); } .trade-step-card p { margin: 0; font-family: var(--lp-font); font-size: 0.975rem; line-height: 1.6; color: var(--lp-text-secondary, #5a6b6e); } /* ── 响应式 ───────────────────────────────────────────────── */ @media (max-width: 1023px) { .trade-benefit-grid { grid-template-columns: repeat(2, 1fr); } .trade-steps { grid-template-columns: 1fr; } } @media (max-width: 768px) { body.page-trade-program .info-page--marketing .lp-main--full { padding: 20px 0 0; } .trade-split, .trade-split--reverse { grid-template-columns: 1fr; direction: ltr; } .trade-split--intro .trade-split__media { order: -1; } .trade-benefit-grid { grid-template-columns: 1fr; } .trade-section__inner--center { text-align: left; } .trade-section-header { text-align: left; } }