/* =========================================== contact_us.css — Contact 页面专用样式视图：information/contact/contact_us.html 布局结构（两块独立区域，背景交替）： 1. contact-section--form — 纯白底 #fff 2. contact-section--benefits — 浅暖灰底 var(--color-bg)，与白色可区分页底收束：components/editorial_cta.css（模板 include）布局令牌见 information.css :root 注意：page-contact 在，勿写 .page-contact.info-page--marketing（无效） =========================================== */ /* ── 主内容区：解除 1200px 限制，由 section 自行控制 ── */ body.page-contact .info-page--marketing .lp-main--full { max-width: none; padding: 0; } body.page-contact .info-page--marketing .lp-content--full { background: transparent; border: none !important; box-shadow: none !important; padding: 0; } body.page-contact .info-page--marketing { min-height: auto; } body.page-contact .lp-content--full section[id] { margin-bottom: 0; } /* 内层内容宽度 1200px */ .contact-section__inner { max-width: var(--lp-content-max, 1200px); margin: 0 auto; padding: 0 var(--lp-spacing-lg, 24px); } .contact-section__inner--center { text-align: center; } /* ── Hero：与 Legal/FAQ 同阶矮高（Contact 母版是 page-contact，不吃 page-info 规则）── */ body.page-contact .lp-hero--marketing:not(.lp-hero--has-bg) { margin-bottom: 0; min-height: clamp(200px, 28vw, 300px); padding: clamp(48px, 6vw, 72px) var(--lp-spacing-lg, 24px); box-sizing: border-box; background: linear-gradient( 160deg, var(--color-primary, #333) 0%, #5f5b54 45%, var(--color-accent, #205058) 100% ); } body.page-contact .lp-hero--marketing.lp-hero--has-bg .lp-hero__bg { margin-bottom: 0; min-height: clamp(200px, 28vw, 300px); padding: clamp(48px, 6vw, 72px) 0; box-sizing: border-box; } body.page-contact .lp-hero--marketing:not(.lp-hero--has-bg)::before { background: rgba(15, 23, 42, 0.08); } body.page-contact .lp-hero--marketing .lp-hero-icon { display: none; } body.page-contact .lp-hero--marketing .lp-hero-content { max-width: var(--lp-content-max, 1200px); margin: 0 auto; font-family: var(--font-sans); } body.page-contact .lp-hero--marketing .lp-hero-title { font-family: var(--font-sans); font-size: var(--lp-font-size-hero-title, clamp(1.75rem, 3.5vw, 2.5rem)); font-weight: var(--lp-font-weight-heading, 400); line-height: 1.25; letter-spacing: -0.01em; color: #fff; } body.page-contact .lp-hero--marketing .lp-hero-subtitle { max-width: 720px; font-family: var(--font-sans); font-size: var(--lp-font-size-hero-sub, clamp(1rem, 1.6vw, 1.125rem)); font-weight: 400; line-height: var(--lp-line-height-body, 1.5); color: rgba(255, 255, 255, 0.92); } /* ════════════════════════════════════════════ 区域一：表单 + 侧栏联系方式全宽背景色块 → 内层 1200px → 左右白卡片（阴影） ════════════════════════════════════════════ */ .contact-section { width: 100%; margin: 0; } .contact-section--form { padding: clamp(56px, 8vw, 80px) 0; background: var(--color-surface, #fff); scroll-margin-top: var(--lp-marketing-hero-offset, calc(72px + 46px)); } .contact-section--benefits { padding: clamp(56px, 8vw, 80px) 0 clamp(56px, 7vw, 72px); background: var(--color-bg, #f7f6f4); } /* 双栏：左表单略宽 */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: var(--lp-spacing-xl, 32px); align-items: stretch; } /* 白底 section 上的卡片：加强阴影以便与白底区分 */ .contact-form-panel, .contact-side-panel { padding: clamp(28px, 4vw, 40px); background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e0dc); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-lg, 0 20px 48px rgba(44, 41, 38, 0.12)); } /* ── 提交中：按钮内 spinner + Sending… ── */ .contact-submit-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: contact-submit-spin 0.75s linear infinite; flex-shrink: 0; } .contact-form-submit.is-loading { pointer-events: none; opacity: 0.92; } .contact-submit-text { display: inline; } .contact-submit-loading { display: none; align-items: center; justify-content: center; gap: 8px; } .contact-form-submit.is-loading .contact-submit-text { display: none; } .contact-form-submit.is-loading .contact-submit-loading { display: inline-flex; } @keyframes contact-submit-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .contact-submit-spinner { animation-duration: 1.5s; } } .contact-heading { margin: 0 0 var(--lp-spacing-md, 16px); font-family: var(--font-sans); font-size: var(--lp-font-size-h2, 1.5rem); font-weight: var(--lp-font-weight-heading, 400); line-height: 1.333; color: var(--lp-text-primary, #202124); } .contact-heading--center { text-align: center; } .contact-lead { margin: 0 0 var(--lp-spacing-lg, 24px); font-family: var(--font-sans); font-size: var(--lp-font-size-body, 1rem); font-weight: 400; color: var(--lp-text-secondary, #5f6368); line-height: var(--lp-line-height-body, 1.5); } .contact-lead--center { text-align: center; max-width: 40rem; margin-left: auto; margin-right: auto; } .contact-form-note, .contact-response-note { font-size: 0.875rem; color: var(--lp-text-muted, #80868b); line-height: 1.6; } .contact-form-note { margin: 0 0 var(--lp-spacing-lg, 24px); } .contact-required { color: #d93025; } .contact-form { display: grid; gap: var(--lp-spacing-md, 16px); } .contact-form-row { display: grid; gap: var(--lp-spacing-md, 16px); } .contact-form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-form-field { display: grid; gap: 6px; } .contact-form-field span { font-size: 0.875rem; font-weight: 500; color: var(--lp-text-primary, #202124); } .contact-form-field input, .contact-form-field textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 0.9375rem; color: var(--lp-text-primary, #202124); background: #fff; border: 1px solid var(--lp-border, #dadce0); border-radius: 8px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .contact-form-field textarea { resize: vertical; min-height: 140px; } .contact-form-field input:focus, .contact-form-field textarea:focus { outline: none; border-color: var(--color-accent, #205058); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15); } .contact-form-consent { width: 100%; } .contact-checkbox-row { display: flex; align-items: flex-start; gap: 10px; } .contact-checkbox-row > input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-accent, #205058); -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; } .contact-checkbox-row__body { flex: 1; min-width: 0; } .contact-checkbox-label { display: block; font-size: 0.8125rem; line-height: 1.5; color: #5f6368; cursor: pointer; user-select: none; -webkit-user-select: none; } .contact-consent-summary { font-weight: 500; color: #2c3e50; } .contact-consent-summary a, .contact-form-legal a { color: #5c5650; text-decoration: underline; text-underline-offset: 2px; } .contact-consent-summary a:hover, .contact-form-legal a:hover { color: var(--color-accent-hover, #174248); } .contact-form-legal { margin: 6px 0 0; padding: 0; font-size: 0.6875rem; line-height: 1.5; color: #9aa0a6; } /* TikTok Lead Form：同意区在上，全宽主按钮在下 */ .contact-form-submit-area { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--lp-border-light, #e8eaed); } .contact-form-submit { width: 100%; min-height: 48px; padding: 14px 20px; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 10px; } .contact-response-note { margin: var(--lp-spacing-lg, 24px) 0 0; padding-top: var(--lp-spacing-lg, 24px); border-top: 1px solid var(--lp-border-light, #e8eaed); } .contact-side-block { margin-top: var(--lp-spacing-lg, 24px); padding-top: var(--lp-spacing-lg, 24px); border-top: 1px solid var(--lp-border-light, #e8eaed); } .contact-side-block:first-of-type { margin-top: var(--lp-spacing-md, 16px); } .contact-side-block h4 { margin: 0 0 var(--lp-spacing-sm, 8px); font-family: var(--font-sans); font-size: var(--lp-font-size-h4, 1.125rem); font-weight: var(--lp-font-weight-subhead, 500); color: var(--lp-text-primary, #202124); } .contact-side-block p { margin: 0 0 4px; font-family: var(--font-sans); font-size: var(--lp-font-size-body, 1rem); line-height: var(--lp-line-height-body, 1.5); color: var(--lp-text-secondary, #5f6368); } .contact-side-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .contact-side-link { color: var(--color-accent-hover, #174248); text-decoration: none; font-weight: 500; } .contact-side-link:hover { text-decoration: underline; } .contact-side-highlight { margin-top: var(--lp-spacing-md, 16px); padding: var(--lp-spacing-md, 16px); background: var(--color-bg, #f7f6f4); border: 1px solid var(--color-border, #e2e0dc); border-radius: 8px; } .contact-side-highlight h5 { margin: 0 0 4px; font-family: var(--font-sans); font-size: var(--lp-font-size-nav, 0.875rem); font-weight: var(--lp-font-weight-subhead, 500); } .contact-side-highlight p { margin: 0; font-family: var(--font-sans); font-size: var(--lp-font-size-nav, 0.875rem); line-height: var(--lp-line-height-body, 1.5); color: var(--lp-text-secondary, #5f6368); } /* ════════════════════════════════════════════ 区域二：A few ways to begin（浅暖灰底 + 白卡片 · 三卡一行） ════════════════════════════════════════════ */ .contact-benefits-header { max-width: 40rem; margin: 0 auto var(--lp-spacing-xl, 32px); text-align: center; } .contact-benefits-header .contact-heading { margin: 0 0 var(--lp-spacing-sm, 8px); } .contact-benefits-header .contact-lead { margin: 0; } .contact-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-spacing-lg, 24px); text-align: center; } /* 卡片：与 About Values 一致 — 图标 / 标题 / 正文居中 */ .contact-value-card { display: flex; flex-direction: column; align-items: center; padding: var(--lp-spacing-xl, 32px) var(--lp-spacing-lg, 24px); background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e0dc); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-md, 0 8px 24px rgba(44, 41, 38, 0.08)); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .contact-value-card:hover { border-color: var(--color-accent-light, #b8a898); box-shadow: var(--shadow-md, 0 8px 24px rgba(44, 41, 38, 0.1)); transform: translateY(-3px); } .contact-value-card__icon { width: 52px; height: 52px; margin-bottom: var(--lp-spacing-md, 16px); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent-light, #b8a898) 0%, var(--color-accent, #205058) 100%); color: #fff; } .contact-value-card h3 { margin: 0 0 var(--lp-spacing-sm, 8px); font-family: var(--font-sans); font-size: var(--lp-font-size-h3, 1.25rem); font-weight: var(--lp-font-weight-subhead, 500); line-height: 1.4; } .contact-value-card p { margin: 0; max-width: 280px; font-family: var(--font-sans); font-size: var(--lp-font-size-body, 1rem); line-height: var(--lp-line-height-body, 1.5); color: var(--lp-text-secondary, #5f6368); } @media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; } .contact-value-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .contact-form-row--2 { grid-template-columns: 1fr; } .contact-form-panel, .contact-side-panel { padding: var(--lp-spacing-lg, 24px); } /* iOS Safari：<16px 聚焦缩放 → 收起后横向滚动 / 页面被撑大 */ .contact-form-field input, .contact-form-field textarea { font-size: 16px; touch-action: manipulation; } }