/** Shopify CDN: Minification failed Line 6997:0 Unexpected "}" **/ /* ========================================================================== Comu custom sections — scoped styles (all contained under .comu-section to avoid polluting the global theme) ========================================================================== z-index 层级约定（2026-08-11 全面梳理，新增浮层请对照这张表，不要「谁大谁上」地加码） ┌── 全局固定层（position: fixed，在根层叠上下文里互相比较） │ 99999 .comu-qv 商品快速查看弹窗。数值夸张但**别动**—— │ 客服气泡等第三方组件常用极高 z-index，压低会被它们盖住 │ 1001 .comu-fsub__overlay 悬浮订阅弹窗遮罩（主动打开，压住抽屉是对的） │ 999 Impact 的 drawer/popover 购物车抽屉、菜单抽屉。**上游值，不可改** │ 998 .comu-sticky-bar 悬浮加购条，有意压在抽屉之下 │ 997 .comu-fsub__btn 悬浮订阅按钮（常驻入口，不该盖住任何主动打开的东西） │ 60 .comu-info-bar__region-menu 信息条地区下拉。打开时 portal 到， │ 故在根层比较：高于 header、低于加购条与抽屉 │ 10 Impact header 上游值 │ 9 .comu-info-bar 有意低于 header │ 5 .comu-quick-nav 吸顶快捷导航，必须低于 header └── 区块内部的 z-index（.ckm-* 的 99/28/24、.qr-tooltip 的 100 等）都被各自祖先的层叠上下文封顶，与上表不在同一个比较域，不必跟全局值对齐——但**新建时要确认祖先确实是层叠上下文**，否则数值会漏到全局去压住 header。 ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); .comu-section { --cp-color-primary: #2277FF; --cp-color-primary-hover: color-mix(in srgb, var(--cp-color-primary) 80%, #000); --cp-color-bg: transparent; --cp-color-bg-base: #FFFFFF; --cp-color-bg-alt: #F8F9FD; --cp-color-text-main: #191C1D; --cp-color-text-muted: color-mix(in srgb, var(--cp-color-text-main) 62%, #FFFFFF); --cp-color-border: #E5E7EB; --cp-color-border-hover: #D1D5DB; --cp-max-width: 1128px; --cp-rounded-pill: 999px; --cp-shadow-md: 0 10px 30px rgba(16, 24, 40, 0.05); --cp-transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1); --cp-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--cp-color-text-main); -webkit-font-smoothing: antialiased; } .comu-section *, .comu-section *::before, .comu-section *::after { box-sizing: border-box; } .comu-section h1, .comu-section h2, .comu-section h3, .comu-section p { margin: 0; } /* ---------- 通用布局 ---------- */ .comu-section .cp-container { /* 本 section 根元素不带 .comu-section，拿不到 --cp-max-width，必须给回退值 */ width: min(100% - 48px, var(--cp-max-width, 1128px)); margin: 0 auto; } .comu-section.cp-section { padding: var(--cp-section-pad-top, 96px) 0 var(--cp-section-pad-bottom, 96px); background: var(--cp-color-bg); } @media (max-width: 768px) { .comu-section.cp-section { padding: var(--cp-section-pad-top-mobile, var(--cp-section-pad-top, 96px)) 0 var(--cp-section-pad-bottom-mobile, var(--cp-section-pad-bottom, 96px)); } } /* ---------- 通用区块标题 ---------- */ /* 标题区到内容的间距：设计稿是 37px，预热页沿用 56px，由各 section 的「标题下间距」设置决定（0 = 用默认 56px）。 */ .comu-section .section-heading { text-align: center; max-width: 720px; margin: 0 auto var(--cp-heading-gap, 56px) auto; } .comu-section .section-heading h2 { font-size: 24px; font-weight: 600; line-height: 32px; margin-bottom: 11px; } .comu-section .section-heading p { color: var(--cp-color-text-muted); font-size: 14px; line-height: 23px; } /* 设计稿默认隐藏小标题（.eyebrow 也是 display:none）；勾选「显示小标题」后才按设计稿样式展示 */ .comu-section .section-heading .cp-eyebrow { display: none; color: var(--cp-color-primary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } .comu-section .section-heading .cp-eyebrow--visible { display: block; } /* ---------- 按钮 ---------- */ .comu-section .cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; border-radius: var(--cp-rounded-pill); font-size: 14px; font-weight: 600; font-family: inherit; text-decoration: none; border: 0; cursor: pointer; transition: all var(--cp-transition-fast); } .comu-section .cp-btn--primary { background-color: #FFFFFF; color: #1A1C1D; box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15); } .comu-section .cp-btn--primary:hover { background-color: #F3F4F6; transform: translateY(-1px); } .comu-section .cp-btn--ghost { background-color: rgba(255, 255, 255, 0.1); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); } .comu-section .cp-btn--ghost:hover { background-color: rgba(255, 255, 255, 0.2); border-color: #FFFFFF; } .comu-section .cp-btn--large { padding: 14px 36px; font-size: 15px; } /* ========================================================================== 区块一 · Hero（视频背景 + 悬浮文字）高度模式：adaptive（默认）| full_viewport | compact | custom ========================================================================== */ .shopify-section--comu-hero { margin-top: 0; } .comu-section.comu-hero { position: relative; height: auto; min-height: 0; display: block; padding: 0; box-sizing: border-box; color: var(--cp-color-text-main, #FFFFFF); background-color: var(--cp-color-bg, transparent); overflow: hidden; --hero-content-bottom-gap: clamp(48px, 10%, 480px); } .comu-section.comu-hero.comu-hero--height-full_viewport { --comu-hero-block-height: var(--comu-hero-viewport-height-desktop, 90svh); --comu-hero-block-min-height: 0; } .comu-section.comu-hero.comu-hero--height-compact { --comu-hero-block-height: clamp(400px, 42svh, 520px); --comu-hero-block-min-height: 0; } .comu-section.comu-hero.comu-hero--height-custom { --comu-hero-block-height: var(--comu-hero-height-desktop, 720px); --comu-hero-block-min-height: 0; } .comu-section.comu-hero.comu-hero--height-full_viewport, .comu-section.comu-hero.comu-hero--height-compact, .comu-section.comu-hero.comu-hero--height-custom { height: var(--comu-hero-block-height); min-height: var(--comu-hero-block-min-height, 0); } .comu-section.comu-hero.comu-hero--height-adapt_to_image .hero-media, .comu-section.comu-hero.comu-hero--height-full_viewport .hero-media, .comu-section.comu-hero.comu-hero--height-compact .hero-media, .comu-section.comu-hero.comu-hero--height-custom .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; } .comu-section.comu-hero.comu-hero--height-adapt_to_image .hero-media--yt, .comu-section.comu-hero.comu-hero--height-full_viewport .hero-media--yt, .comu-section.comu-hero.comu-hero--height-compact .hero-media--yt, .comu-section.comu-hero.comu-hero--height-custom .hero-media--yt { aspect-ratio: auto; } .comu-section.comu-hero.comu-hero--height-adapt_to_image .hero-video, .comu-section.comu-hero.comu-hero--height-full_viewport .hero-video, .comu-section.comu-hero.comu-hero--height-compact .hero-video, .comu-section.comu-hero.comu-hero--height-custom .hero-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; } .comu-section.comu-hero.comu-hero--height-adapt_to_image .hero-video--yt, .comu-section.comu-hero.comu-hero--height-full_viewport .hero-video--yt, .comu-section.comu-hero.comu-hero--height-compact .hero-video--yt, .comu-section.comu-hero.comu-hero--height-custom .hero-video--yt { width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; } .comu-section .hero-media { position: relative; width: 100%; line-height: 0; } .comu-section .hero-media--yt { aspect-ratio: 16 / 9; } .comu-section.comu-hero .cp-container { position: absolute; inset: 0; z-index: 3; width: 100%; max-width: none; display: flex; align-items: flex-end; justify-content: center; padding-inline: max(24px, calc((100% - var(--cp-max-width)) / 2)); box-sizing: border-box; pointer-events: none; } .comu-section .hero-video { position: relative; top: auto; left: auto; display: block; width: 100%; height: auto; transform: none; object-fit: cover; z-index: 1; } .comu-section .hero-video--yt { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; min-width: 0; object-fit: cover; border: 0; pointer-events: none; } .comu-section .hero-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2; } .comu-section .hero-content { position: relative; z-index: 3; width: min(100%, var(--comu-hero-content-max-width, 1000px)); max-width: var(--comu-hero-content-max-width, 1000px); margin-left: auto; margin-right: auto; padding-bottom: var(--hero-content-bottom-gap, clamp(48px, 10%, 480px)); text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); pointer-events: auto; } /* 投影默认开（预热页是视频背景，白字靠它压住）；浅色背景 + 深色文字的场景（设计稿首页）由 hero 的「文字投影」开关关掉。 */ .comu-section.comu-hero:not(.comu-hero--shadow) .hero-content { text-shadow: none; } .comu-section .hero-eyebrow { font-size: var(--comu-hero-eyebrow-size, 16px); font-weight: var(--comu-hero-eyebrow-weight, 600); text-transform: uppercase; letter-spacing: var(--comu-hero-eyebrow-tracking, 0.15em); margin: 0 0 12px; color: var( --comu-hero-eyebrow-color, color-mix(in srgb, var(--cp-color-text-main, #FFFFFF) 70%, transparent) ); opacity: 1; } .comu-section .hero-eyebrow-inner { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; max-width: 100%; } .comu-section .hero-eyebrow--has-badge { color: var(--comu-hero-eyebrow-color, var(--cp-color-text-main, #FFFFFF)); } .comu-section .hero-eyebrow-text { line-height: 1.2; } .comu-section .hero-eyebrow-badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: var(--cp-rounded-pill); background-color: var(--comu-hero-eyebrow-badge-bg, #F3EBDD); color: var(--comu-hero-eyebrow-badge-text, #6F5F4A); font-size: calc(var(--comu-hero-eyebrow-size, 16px) * 0.875); font-weight: 600; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; } .comu-section .hero-title { font-size: var(--comu-hero-heading-size, 62px); font-weight: 700; line-height: 1.15; margin-bottom: 16px; color: var(--comu-hero-heading-color, var(--cp-color-text-main, #FFFFFF)); } .comu-section .hero-copy { font-size: var(--comu-hero-copy-size, 18px); line-height: 28px; margin-bottom: 24px; color: var( --comu-hero-copy-color, color-mix(in srgb, var(--cp-color-text-main, #FFFFFF) 85%, transparent) ); max-width: 600px; margin-left: auto; margin-right: auto; } .comu-section .hero-copy p { margin: 0; } .comu-section .hero-actions { display: flex; justify-content: center; gap: 16px; } .comu-section.comu-hero .cp-btn--primary { background-color: var(--comu-hero-primary-btn-bg, var(--cp-color-primary, #FFFFFF)); color: var(--comu-hero-primary-btn-text, #1A1C1D); border: 1px solid var(--comu-hero-primary-btn-border, transparent); /* 发光（投影）默认关闭，由「按钮发光」开关加 .comu-hero--glow 后再打开。见文件末尾的 .comu-hero--glow 规则。 */ box-shadow: none; } .comu-section.comu-hero .cp-btn--primary:hover { background-color: var( --comu-hero-primary-btn-bg-hover, color-mix(in srgb, var(--comu-hero-primary-btn-bg, var(--cp-color-primary, #FFFFFF)) 92%, #000000) ); color: var(--comu-hero-primary-btn-text-hover, var(--comu-hero-primary-btn-text, #1A1C1D)); border-color: var(--comu-hero-primary-btn-border-hover, var(--comu-hero-primary-btn-border, transparent)); transform: translateY(-1px); } .comu-section.comu-hero .cp-btn--ghost { background-color: var(--comu-hero-secondary-btn-bg, rgba(255, 255, 255, 0.1)); color: var(--comu-hero-secondary-btn-text, var(--cp-color-text-main, #FFFFFF)); border: 1px solid var( --comu-hero-secondary-btn-border, color-mix(in srgb, var(--cp-color-text-main, #FFFFFF) 25%, transparent) ); backdrop-filter: blur(8px); } .comu-section.comu-hero .cp-btn--ghost:hover { background-color: var(--comu-hero-secondary-btn-bg-hover, rgba(255, 255, 255, 0.2)); color: var(--comu-hero-secondary-btn-text-hover, var(--comu-hero-secondary-btn-text, var(--cp-color-text-main, #FFFFFF))); border-color: var( --comu-hero-secondary-btn-border-hover, var(--comu-hero-secondary-btn-border, var(--cp-color-text-main, #FFFFFF)) ); } @media (min-width: 1900px) { .comu-section.comu-hero { --hero-content-bottom-gap: clamp(48px, 12%, 680px); } .comu-section .hero-content { max-width: var(--comu-hero-content-max-width, 1000px); width: min(100%, var(--comu-hero-content-max-width, 1000px)); } /* ≥1900px 这一档的用意是「把标题的两行并成一行」——靠隐藏手动换行符 .hero-br 就够了。原来还加了 white-space: nowrap，那是有害的：一旦标题的自然宽度超过「文案区最大宽度」，文字既不换行、又被 .comu-hero 的 overflow: hidden 裁掉。实测改动前首页与 About 在 1900/2400 宽屏上标题就已经被裁，不需要运营改任何设置。去掉 nowrap 后：能一行放下的仍是一行（并行的效果不变），放不下的自动换行。 */ .comu-section .hero-br { display: none; } } /* Hero · 矮视口 PC（≤760px 高）：短视频时改为顶部锚定文案，避免 bottom 定位溢出 */ @media (max-height: 760px) and (min-width: 1025px) { .comu-section.comu-hero .cp-container { align-items: flex-start; padding-top: clamp(24px, 4svh, 48px); } .comu-section .hero-content { padding-bottom: clamp(24px, 5%, 48px); } } /* ========================================================================== 区块二 · Benefits（左侧三列权益 + 右侧产品图） ========================================================================== */ .comu-section.comu-benefits { --cp-section-pad-top: 58px; --cp-section-pad-bottom: 14px; } .comu-section .benefits-showcase { padding: 24px 0 19px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; transform: translateX(30px); } .comu-section .benefits-showcase-left { display: flex; flex-direction: column; gap: 36px; } .comu-section .benefits-showcase-left h2 { font-size: 24px; font-weight: 700; line-height: 32px; color: var(--cp-color-text-main); letter-spacing: 0; } .comu-section .benefits-icons-row { display: flex; gap: 32px; align-items: flex-start; } .comu-section .benefit-icon-col { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; } .comu-section .benefit-icon-col:not(:last-child)::after { content: ''; position: absolute; right: -16px; top: 15%; bottom: 15%; width: 1px; background-color: rgba(25, 28, 29, 0.08); } .comu-section .b-icon-box { color: var(--cp-color-primary); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; } .comu-section .b-icon-box img, .comu-section .b-icon-box svg { width: 52px; height: 52px; } .comu-section .benefit-icon-col p { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--cp-color-text-main); } .comu-section .benefits-showcase-right { display: flex; justify-content: flex-end; } .comu-section .benefits-showcase-right img { max-height: 430px; width: 100%; max-width: 500px; object-fit: contain; display: block; transform: scale(1.1) translateY(20px); } /* ========================================================================== 区块三 · Subscribe（订阅卡片） ========================================================================== */ .comu-section.comu-subscribe { --cp-section-pad-top: 41px; --cp-section-pad-bottom: 63px; /* #subscribe 锚点落位时给吸顶导航留出高度 */ scroll-margin-top: 96px; } .comu-section .subscribe-card { background: linear-gradient(135deg, var(--cp-subscribe-card-a, #F3F5F9) 0%, var(--cp-subscribe-card-b, #E8EDF5) 100%); border-radius: 20px; padding: 48px 56px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; box-sizing: border-box; width: 100%; max-width: 100%; overflow: visible; } .comu-section .subscribe-card-left, .comu-section .subscribe-card-right, .comu-section .comu-subscribe-form-wrap { min-width: 0; } .comu-section .subscribe-card-left h3 { font-size: 24px; font-weight: 700; line-height: 32px; color: var(--cp-color-text-main); letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .comu-section .comu-subscribe-form { display: flex; flex-direction: column; gap: 12px; width: 100%; } .comu-section .comu-subscribe-form-wrap { width: 100%; } .comu-section .comu-subscribe-fields { display: flex; flex-direction: column; gap: 12px; width: 100%; } .comu-section .subscribe-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; background-color: var(--cp-subscribe-input-bg, #FFFFFF); border-radius: var(--cp-rounded-pill); padding: 6px; border: 1px solid rgba(25, 28, 29, 0.08); } .comu-section .subscribe-input-wrapper input { flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 16px; font-size: 14px; color: var(--cp-color-text-main); outline: none; } .comu-section .subscribe-input-wrapper input::placeholder { color: var(--cp-color-text-muted); } .comu-section .subscribe-submit { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; background-color: var(--cp-subscribe-btn-bg, #161B28); color: var(--cp-subscribe-btn-fg, #FFFFFF); border: none; border-radius: 50%; cursor: pointer; transition: background-color var(--cp-transition-fast); flex-shrink: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .comu-section .subscribe-submit:hover { background-color: color-mix(in srgb, var(--cp-subscribe-btn-bg, #161B28) 85%, #000); } .comu-section .subscribe-submit:disabled { opacity: 0.85; cursor: wait; } .comu-section .subscribe-submit-icon, .comu-section .subscribe-submit-spinner { display: grid; place-items: center; width: 20px; height: 20px; } .comu-section .subscribe-submit-icon svg, .comu-section .subscribe-submit-spinner svg { width: 20px; height: 20px; } .comu-section .subscribe-submit-spinner { display: none; } .comu-section .subscribe-submit.is-loading .subscribe-submit-icon { display: none; } .comu-section .subscribe-submit.is-loading .subscribe-submit-spinner { display: grid; } .comu-section .subscribe-submit-spinner svg { animation: comu-subscribe-spin 0.8s linear infinite; } @keyframes comu-subscribe-spin { to { transform: rotate(360deg); } } .comu-section .comu-subscribe-form .banner, .comu-section .comu-subscribe-success .banner { text-align: left; } .comu-section .comu-subscribe-success .banner { width: 100%; } .comu-section .comu-subscribe-feedback { display: grid; gap: 12px; } .comu-section .comu-subscribe-fields[hidden], .comu-section .comu-subscribe-success[hidden] { display: none; } .comu-section .subscribe-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--cp-color-text-muted); line-height: 15px; cursor: pointer; user-select: none; } .comu-section .subscribe-consent input[type="checkbox"] { margin-top: 2px; accent-color: var(--cp-subscribe-btn-bg, #161B28); } .comu-section .subscribe-consent a { color: var(--cp-color-text-main); text-decoration: underline; } /* ========================================================================== 响应式（≤1024px，平板：showcase 堆叠，图标保持横排） ========================================================================== */ @media (max-width: 1024px) { .comu-section .benefits-showcase { grid-template-columns: 1fr; padding: 24px 0; text-align: center; gap: 40px; transform: none; } .comu-section .benefits-showcase-left { align-items: center; gap: 28px; } .comu-section .benefits-icons-row { justify-content: center; } .comu-section .benefit-icon-col { align-items: center; text-align: center; } .comu-section .benefits-showcase-right { justify-content: center; } .comu-section .benefits-showcase-right img { max-height: 380px; } } /* ========================================================================== Hero · 平板 / 手机（≤1024px） adaptive：全屏 + cover；其余固定高度模式同步移动断点 token ========================================================================== */ @media (max-width: 1024px) { .shopify-section--comu-hero { margin-top: calc(-1 * var(--sticky-area-height, 0px)); } .comu-section.comu-hero.comu-hero--height-adaptive { height: var(--comu-hero-viewport-height-mobile, 90svh); min-height: 0; --hero-content-inset-top: clamp(40px, 7svh, 96px); --hero-content-bottom-gap: min( clamp(32px, 8svh, 80px), calc(var(--comu-hero-viewport-height-mobile, 90svh) - var(--sticky-area-height, 72px) - 32px - 240px) ); } .comu-section.comu-hero.comu-hero--height-full_viewport { --comu-hero-block-height: var(--comu-hero-viewport-height-mobile, 90svh); --hero-content-inset-top: clamp(40px, 7svh, 96px); --hero-content-bottom-gap: min( clamp(32px, 8svh, 80px), calc(var(--comu-hero-viewport-height-mobile, 90svh) - var(--sticky-area-height, 72px) - 32px - 240px) ); } .comu-section.comu-hero.comu-hero--height-compact { --comu-hero-block-height: clamp(460px, 58svh, 620px); --comu-hero-block-min-height: 0; height: var(--comu-hero-block-height); --hero-content-inset-top: clamp(32px, 6svh, 72px); --hero-content-bottom-gap: clamp(24px, 6svh, 56px); } .comu-section.comu-hero.comu-hero--height-custom { --comu-hero-block-height: var(--comu-hero-height-mobile, 600px); height: var(--comu-hero-block-height); --hero-content-inset-top: clamp(32px, 6svh, 72px); --hero-content-bottom-gap: clamp(24px, 6svh, 56px); } .comu-section.comu-hero.comu-hero--height-adaptive .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; } .comu-section.comu-hero.comu-hero--height-adaptive .hero-media--yt { aspect-ratio: auto; } .comu-section.comu-hero.comu-hero--height-adaptive .hero-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; } .comu-section.comu-hero.comu-hero--height-adaptive .hero-video--yt { width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; } .comu-section.comu-hero .cp-container { align-items: flex-start; justify-content: center; padding-top: calc(var(--sticky-area-height, 72px) + env(safe-area-inset-top, 0px) + var(--hero-content-inset-top)); padding-inline: 16px; } .comu-section .hero-content { max-width: 100%; width: 100%; padding-top: 0; padding-bottom: var(--hero-content-bottom-gap); margin: 0 auto; text-shadow: none; } .comu-section .hero-eyebrow { margin-top: 0; } .comu-section .hero-title { font-size: var(--comu-hero-heading-size-mobile, var(--comu-hero-heading-size, 32px)); line-height: 1.25; } .comu-section .hero-copy { font-size: var(--comu-hero-copy-size-mobile, var(--comu-hero-copy-size, 14px)); line-height: 1.5; margin-bottom: 20px; padding: 0 10px; } .comu-section .hero-actions { justify-content: center; flex-wrap: wrap; gap: 12px; } } /* ========================================================================== 响应式（≤768px） ========================================================================== */ @media (max-width: 768px) { .comu-section.comu-hero.comu-hero--height-adaptive, .comu-section.comu-hero.comu-hero--height-full_viewport { --hero-content-inset-top: clamp(28px, 5.5svh, 72px); } .comu-section.comu-hero.comu-hero--height-compact, .comu-section.comu-hero.comu-hero--height-custom { --hero-content-inset-top: clamp(24px, 5svh, 56px); } .comu-section .hero-title { font-size: var(--comu-hero-heading-size-mobile, 28px); line-height: 1.25; } .comu-section .hero-copy { font-size: var(--comu-hero-copy-size-mobile, 13px); line-height: 1.5; margin-bottom: 20px; padding: 0 10px; } .comu-section.comu-hero .hero-actions .cp-btn, .comu-section.comu-hero .hero-actions .cp-btn--large { padding: 12px 20px; font-size: 14px; } .comu-section .benefits-showcase { grid-template-columns: 1fr; padding: 24px 0; text-align: center; gap: 40px; transform: none; } .comu-section .benefits-showcase-left { align-items: center; gap: 28px; } .comu-section .benefits-icons-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 12px; width: 100%; align-items: start; } .comu-section .benefit-icon-col { align-items: center; width: 100%; text-align: center; } .comu-section .benefit-icon-col:not(:last-child)::after { display: none; } .comu-section .benefits-showcase-right { justify-content: center; } .comu-section .benefits-showcase-right img { max-height: 280px; } .comu-section .subscribe-card { grid-template-columns: 1fr; padding: 32px 20px; gap: 24px; text-align: center; } .comu-section.comu-subscribe .cp-container { width: min(100% - 32px, var(--cp-max-width)); } .comu-section .subscribe-card-left h3 { font-size: 22px; line-height: 30px; padding-inline: 4px; } .comu-section .subscribe-input-wrapper { padding: 4px; } .comu-section .subscribe-input-wrapper input { font-size: 16px; padding: 10px 12px; } .comu-section .subscribe-submit { width: 40px; height: 40px; } .comu-section .subscribe-consent { text-align: left; } } @media (max-width: 390px) { .comu-section .subscribe-card { padding: 28px 16px; gap: 20px; } .comu-section .subscribe-card-left h3 { font-size: 20px; line-height: 28px; } .comu-section .subscribe-input-wrapper input { padding: 10px 10px; } } /* ========================================================================== 区块五 · AI Key 模块（Say what you need. Get work done.） ========================================================================== */ .comu-section { --ckm-ink: #050B18; --ckm-soft: #5F6B7A; --ckm-blue: var(--cp-color-primary); --ckm-ease: cubic-bezier(0.22, 1, 0.36, 1); } .comu-section.comu-ai-key .section-heading { margin-bottom: 24px; } .comu-section .ckm-module, .comu-section .ckm-module * { box-sizing: border-box; } .comu-section .ckm-module { width: 100%; max-width: 1464px; height: 750px; overflow: visible; clip-path: inset(-150px -150px 0 -150px); position: relative; margin: 0 auto; color: var(--ckm-ink); background: transparent; box-shadow: none; } .comu-section .ckm-tabs { position: absolute; top: 20px; left: 50%; z-index: 28; display: flex; gap: 12px; transform: translateX(-50%); } .comu-section .ckm-tab { display: inline-flex; align-items: center; background-color: var(--cp-color-bg-alt); border: 1px solid var(--cp-color-border); border-radius: var(--cp-rounded-pill); padding: 10px 22px; font-size: 13px; font-weight: 600; color: var(--cp-color-text-muted); cursor: pointer; transition: all var(--cp-transition-fast); } .comu-section .ckm-tab:hover { border-color: color-mix(in srgb, var(--cp-color-primary) 35%, transparent); color: var(--cp-color-primary); } .comu-section .ckm-tab.is-active { background-color: color-mix(in srgb, var(--cp-color-primary) 6%, transparent); border-color: color-mix(in srgb, var(--cp-color-primary) 65%, transparent); color: var(--cp-color-primary); box-shadow: 0 8px 22px color-mix(in srgb, var(--cp-color-primary) 8%, transparent); } .comu-section .ckm-command { position: absolute; top: 82px; left: 50%; z-index: 24; display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 420px; max-width: 680px; padding: 14px 20px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--cp-rounded-pill); background: rgba(255, 255, 255, 0.88); box-shadow: 0 12px 35px rgba(25, 54, 105, 0.05); backdrop-filter: blur(24px); transform: translateX(-50%); } .comu-section .ckm-command-dot { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--ckm-blue); margin-right: 4px; } @keyframes soundwave { 0%, 100% { transform: scaleY(0.7); } 50% { transform: scaleY(1.3); } } .comu-section .record-icon-svg, .comu-section .record-icon-img { width: var(--ckm-wave-icon-size, 36px); height: var(--ckm-wave-icon-size, 36px); flex-shrink: 0; } .comu-section .record-icon-svg { overflow: visible; } .comu-section .record-icon-img { object-fit: contain; display: block; } .comu-section .wave-line { transform-box: fill-box; transform-origin: center; animation: soundwave 1s ease-in-out infinite; } .comu-section .wave-1, .comu-section .wave-5 { animation-delay: 0s; } .comu-section .wave-2, .comu-section .wave-4 { animation-delay: 0.2s; } .comu-section .wave-3 { animation-delay: 0.4s; } .comu-section .ckm-command span:last-child { color: #111827; font-size: 17px; font-weight: 680; white-space: nowrap; } .comu-section .ckm-stage { position: absolute; top: 172px; left: 50%; z-index: 10; width: 1160px; height: 400px; perspective: 1500px; transform: translateX(-50%); } .comu-section .ckm-slide { position: absolute; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgba(255, 255, 255, 0.86); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78)); box-shadow: 0 30px 80px rgba(17, 48, 94, 0.13), 0 2px 10px rgba(17, 48, 94, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.56); opacity: 0; filter: blur(12px); backdrop-filter: blur(24px); } .comu-section .ckm-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: inherit; } .comu-section .ckm-slide-main { top: 0; left: 270px; z-index: 6; width: 620px; transform: translateY(76px) scale(0.965); animation: ckm-mainIn 0.86s var(--ckm-ease) forwards; } .comu-section .ckm-slide-left { top: 80px; left: 20px; z-index: 2; width: 400px; transform: translateY(88px) rotate(-7deg) scale(0.95); animation: ckm-leftIn 0.86s var(--ckm-ease) 0.12s forwards; } .comu-section .ckm-slide-right { top: 80px; right: 20px; z-index: 2; width: 400px; transform: translateY(88px) rotate(7deg) scale(0.95); animation: ckm-rightIn 0.86s var(--ckm-ease) 0.17s forwards; } @keyframes ckm-mainIn { to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } } @keyframes ckm-leftIn { to { opacity: 0.5; filter: blur(0); transform: translateY(0) rotate(-7deg) scale(1); } } @keyframes ckm-rightIn { to { opacity: 0.5; filter: blur(0); transform: translateY(0) rotate(7deg) scale(1); } } .comu-section .ckm-device-zone { position: absolute; right: 0; bottom: -15px; left: 0; z-index: 99; height: 320px; overflow: visible; pointer-events: none; transform: translateZ(10px); } .comu-section .ckm-device-shadow { position: absolute; bottom: 18px; left: 50%; width: 560px; height: 64px; border-radius: 50%; background: radial-gradient(ellipse, rgba(13, 28, 50, 0.25), transparent 68%); filter: blur(16px); transform: translateX(-50%); } .comu-section .ckm-device-wrap { position: absolute; bottom: -400px; left: 50%; width: 650px; height: 650px; transform: translateX(-50%); } .comu-section .ckm-device-img { display: block; width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 30px 45px rgba(7, 18, 38, 0.35)); } .comu-section .ckm-ai-hotspot { position: absolute; top: 25px; left: 413px; z-index: 5; width: 106px; height: 66px; } .comu-section .ckm-ai-glow { position: absolute; inset: -7px -7px -13px -13px; border-radius: 100px; background: radial-gradient(ellipse, color-mix(in srgb, var(--cp-color-primary) 85%, transparent), color-mix(in srgb, var(--cp-color-primary) 35%, transparent) 44%, transparent 72%); animation: ckm-breath 2s ease-in-out infinite; } @keyframes ckm-breath { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.3); } } .comu-section .ckm-ripple { position: absolute; top: calc(50% + 3px); left: calc(50% - 3px); width: 80px; height: 50px; border: 2px solid color-mix(in srgb, #1E90FF 95%, transparent); box-shadow: 0 0 12px color-mix(in srgb, #1E90FF 80%, transparent), inset 0 0 12px color-mix(in srgb, #1E90FF 80%, transparent); border-radius: 100px; opacity: 0; transform: translate(-50%, -50%) scale(0.5); } .comu-section .ckm-ripple-one { animation: ckm-ripple 1.9s infinite; } .comu-section .ckm-ripple-two { animation: ckm-ripple 1.9s 0.6s infinite; } .comu-section .ckm-ripple-three { animation: ckm-ripple 1.9s 1.2s infinite; } @keyframes ckm-ripple { 0% { opacity: 1; border-width: 3px; box-shadow: 0 0 24px color-mix(in srgb, #1E90FF 100%, transparent), inset 0 0 24px color-mix(in srgb, #1E90FF 100%, transparent); transform: translate(-50%, -50%) scale(0.6); } 100% { opacity: 0; border-width: 0; box-shadow: 0 0 0 color-mix(in srgb, #1E90FF 0%, transparent), inset 0 0 0 color-mix(in srgb, #1E90FF 0%, transparent); transform: translate(-50%, -50%) scale(2.6); } } .comu-section .ckm-finger-img { position: absolute; top: -5.7%; left: 55.1%; z-index: 20; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(88, 48, 30, 0.18)); } @media (prefers-reduced-motion: reduce) { .comu-section .ckm-slide, .comu-section .ckm-slide-main, .comu-section .ckm-slide-left, .comu-section .ckm-slide-right { animation: none; opacity: 1; filter: none; } .comu-section .ckm-ai-glow, .comu-section .ckm-ripple-one, .comu-section .ckm-ripple-two, .comu-section .ckm-ripple-three { animation: none; } } @media (max-width: 1024px) { .comu-section .ckm-module { height: 750px; } .comu-section .ckm-stage { width: 940px; } .comu-section .ckm-slide-main { left: 240px; width: 460px; } .comu-section .ckm-slide-left { left: 80px; width: 300px; } .comu-section .ckm-slide-right { right: 80px; width: 300px; } } @media (max-width: 768px) { .comu-section .ckm-module { height: 520px; overflow: hidden; } .comu-section .ckm-tabs { top: 20px; gap: 8px; max-width: calc(100% - 24px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .comu-section .ckm-tabs::-webkit-scrollbar { display: none; } .comu-section .ckm-tab { padding: 6px 20px; font-size: 12px; height: auto; white-space: nowrap; } .comu-section .ckm-command { top: 76px; width: min(86vw, 520px); min-width: 0; } .comu-section .ckm-command span:last-child { font-size: 14px; white-space: normal; } .comu-section .ckm-stage { top: 166px; width: 92%; height: 260px; } .comu-section .ckm-slide-main { left: 50%; width: min(100%, 520px); transform: translateX(-50%) translateY(76px) scale(0.965); animation-name: ckm-mobileMain; } @keyframes ckm-mobileMain { to { opacity: 1; filter: blur(0); transform: translateX(-50%) translateY(0) scale(1); } } .comu-section .ckm-slide-left, .comu-section .ckm-slide-right { display: none; } .comu-section .ckm-device-wrap { bottom: auto; top: 100px; width: 100vw; max-width: 570px; height: 100vw; max-height: 570px; } .comu-section .ckm-ai-hotspot { top: 3.86%; left: 63.68%; width: 16.14%; height: 10%; } .comu-section .ckm-ripple { width: 76.92%; height: 76.92%; } } /* ========================================================================== 区块 · Feature Map（From Capture to Action，1:1 图） ========================================================================== */ .comu-section .feature-map-figure { width: 100%; margin: 0 auto; border-radius: 12px; overflow: hidden; } .comu-section .feature-map-figure img { width: 100%; height: auto; display: block; } .comu-section .feature-map-figure picture { display: block; width: 100%; } /* ========================================================================== 区块 · Scenarios（Ready for Every Conversation，focus 画廊） ========================================================================== */ .comu-section .scenario-focus-gallery { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; align-items: stretch; gap: clamp(12px, 1.4vw, 22px); overflow: visible; padding: 8px 0 0; } .comu-section .scenario-photo { position: relative; flex: 1; height: 380px; min-width: 0; border-radius: 14px; overflow: hidden; border: 0; opacity: 0.65; box-shadow: 0 10px 25px rgba(16, 24, 40, 0.06); cursor: pointer; transition: flex 850ms cubic-bezier(0.16, 1, 0.3, 1), height 850ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease, box-shadow 500ms ease; } .comu-section .scenario-photo img { width: 100%; height: 100%; display: block; object-fit: cover; } .comu-section .scenario-photo.active { flex: 3.2; box-shadow: 0 20px 45px rgba(16, 24, 40, 0.12); opacity: 1; z-index: 2; } .comu-section .scenario-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 50%, transparent 100%); display: flex; align-items: flex-end; justify-content: flex-start; padding: 24px; color: #FFFFFF; pointer-events: none; opacity: 0.85; text-align: left; transition: opacity 0.5s ease; } .comu-section .scenario-photo.active .scenario-overlay { opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.28) 60%, transparent 100%); } .comu-section .scenario-meta { display: flex; flex-direction: column; } .comu-section .scenario-meta h3 { margin: 0; font-size: 20px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.02em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); text-align: left; } .comu-section .scenario-desc { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); max-width: 320px; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(10px); text-align: left; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 0s; } .comu-section .scenario-photo.active .scenario-desc { opacity: 1; max-height: 120px; margin-top: 6px; transform: translateY(0); transition-delay: 0.12s; } @media (prefers-reduced-motion: reduce) { .comu-section .scenario-photo { transition: none; } } @media (max-width: 768px) { .comu-section .scenario-focus-gallery { width: 100%; margin-left: 0; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 12px; padding: 0; overflow: visible; /* 固定总高度，避免手风琴展开/收起时页面上下跳动 */ height: calc(280px + (var(--scenario-count, 4) - 1) * 92px); min-height: calc(280px + (var(--scenario-count, 4) - 1) * 92px); } .comu-section .scenario-photo { width: 100%; flex: 0 0 auto; height: 80px; opacity: 0.85; transition: height 450ms cubic-bezier(0.25, 1, 0.5, 1), opacity 300ms ease, box-shadow 300ms ease; } .comu-section .scenario-photo.active { height: 280px; opacity: 1; box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12); } .comu-section .scenario-overlay { padding: 20px; align-items: flex-end; transition: background-color 400ms ease; } .comu-section .scenario-photo:not(.active) .scenario-overlay { background: linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 100%); } .comu-section .scenario-photo.active .scenario-overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.28) 60%, transparent 100%); } .comu-section .scenario-photo:not(.active) .scenario-desc { transition-delay: 0s; } .comu-section .scenario-photo.active .scenario-desc { transition-delay: 0s; } .comu-section .scenario-photo img { transition: filter 400ms ease; } .comu-section .scenario-photo:not(.active) img { filter: brightness(0.65) contrast(0.95); } .comu-section .scenario-photo.active img { filter: brightness(1) contrast(1); } } /* ========================================================================== 区块 · Compliance（Privacy and Compliance You Can Trust） ========================================================================== */ .comu-section .compliance-badges-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin: 0 0 8px 0; background: transparent; } .comu-section .compliance-badge-item { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; font-size: 20px; font-weight: 700; color: var(--cp-compliance-badge-text, var(--cp-color-text-main, #111827)); } .comu-section .compliance-badge-item img { width: 84px; height: 84px; object-fit: contain; flex: 0 0 auto; } .comu-section .compliance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; } .comu-section .compliance-card--icon { display: flex; flex-direction: column; align-items: center; padding: 32px 24px; } .comu-section .compliance-card__icon { width: 40px; height: 40px; margin-bottom: 24px; color: var(--cp-compliance-icon-color, var(--cp-color-text-main, #111827)); flex: 0 0 auto; } .comu-section .compliance-card { background-color: var(--cp-compliance-card-bg, #F8FAFC); border: none; border-radius: var(--cp-rounded-block, 20px); /* 纵向内边距走变量：About 页这一节设计稿是 22px，首页是 48px，同一个 section 两处用法不同，只能交给设置项。原来只有 .compliance-card--icon 认这个变量，普通徽章卡写死 48px，改了设置也不动。 */ padding: var(--cp-compliance-card-pad, 48px) 24px; text-align: center; box-shadow: none; } .comu-section .compliance-card img { height: 108px; width: auto; margin: 0 auto 20px auto; display: block; } .comu-section .compliance-card h3 { margin-bottom: 4px; font-size: 20px; font-weight: 700; line-height: var(--cp-compliance-title-lh, 1.6); color: var(--cp-color-text-main); } .comu-section .compliance-status { line-height: var(--cp-compliance-status-lh, normal); font-size: 12px; color: var(--cp-color-primary); font-weight: 600; margin-bottom: 8px; } .comu-section .compliance-desc { font-size: 13px; line-height: var(--cp-compliance-desc-lh, 1.5); color: var(--cp-color-text-muted); } @media (max-width: 768px) { .comu-section .compliance-badges-banner { grid-template-columns: repeat(2, 1fr); gap: 12px; } .comu-section .compliance-badge-item { padding: 12px; font-size: 16px; gap: 8px; } .comu-section .compliance-badge-item img { width: 56px; height: 56px; } .comu-section.comu-compliance .compliance-grid { /* ⚠️ 设计稿移动端是「2 列换行网格」（grid-template-columns: repeat(2,1fr); gap:12px），不是横向滚动。之前做成 flex + overflow-x:auto 与设计稿不符，已改回。 */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; overflow-x: visible; } .comu-section.comu-compliance .compliance-grid::-webkit-scrollbar { display: none; } .comu-section.comu-compliance .compliance-grid .compliance-card { min-width: 0; padding: 20px 12px; } .comu-section.comu-compliance .compliance-card img { height: 72px; } .comu-section.comu-compliance .cp-container { overflow: visible; } } /* 合规 · 图标链接 */ .comu-section .compliance-badge-link { display: inline-block; line-height: 0; transition: transform var(--cp-transition-fast, 160ms cubic-bezier(0.4, 0, 0.2, 1)); } .comu-section .compliance-badge-link:hover { transform: scale(1.04); } /* 合规 · 轮播 */ .comu-section .compliance-carousel { position: relative; } .comu-section .compliance-carousel__viewport { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px; scroll-behavior: smooth; } .comu-section .compliance-carousel__viewport::-webkit-scrollbar { display: none; } .comu-section .compliance-carousel .compliance-card { flex: 0 0 auto; width: min(100%, 360px); scroll-snap-align: center; } .comu-section .cp-carousel-btn { position: absolute; top: 108px; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cp-color-border); background: var(--cp-color-bg-base); color: var(--cp-color-text-main); font-size: 20px; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08); transition: all var(--cp-transition-fast, 160ms cubic-bezier(0.4, 0, 0.2, 1)); } .comu-section .cp-carousel-btn:hover { border-color: var(--cp-color-primary); color: var(--cp-color-primary); } .comu-section .cp-carousel-prev { left: -8px; } .comu-section .cp-carousel-next { right: -8px; } @media (max-width: 768px) { .comu-section.comu-compliance .compliance-carousel__viewport { gap: 12px; padding: 4px 24px 12px 24px; margin-left: -24px; margin-right: -24px; scroll-padding-left: 24px; } .comu-section.comu-compliance .compliance-carousel .compliance-card { flex: 0 0 47%; width: auto; min-width: 0; scroll-snap-align: start; padding: 28px 16px; } .comu-section.comu-compliance .compliance-carousel .compliance-card img { height: 72px; } .comu-section .cp-carousel-btn { display: none; } } /* ========================================================================== 区块 · Compare（See How Comu Action Pro Compares） ========================================================================== */ .comu-section .comparison-scroll-wrapper { width: 100%; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; margin-bottom: 20px; padding: 10px 4px; } .comu-section .comparison-scroll-wrapper::-webkit-scrollbar { -webkit-appearance: none; height: 8px; } .comu-section .comparison-scroll-wrapper::-webkit-scrollbar-track { background: transparent; } .comu-section .comparison-scroll-wrapper::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 10px; } .comu-section .comparison-cards-container { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 16px; align-items: stretch; width: 100%; min-width: 950px; } .comu-section .comparison-features-col { display: flex; flex-direction: column; } .comu-section .comp-feature-header { height: 140px; display: flex; align-items: flex-end; padding-bottom: 24px; font-size: 15px; font-weight: 700; color: var(--cp-color-text-main); border-bottom: 2px solid var(--cp-color-border); } .comu-section .comp-feature-cell { height: 52px; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--cp-color-text-main); border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding-right: 12px; } .comu-section .comp-feature-cell:nth-child(even) { background-color: rgba(0, 0, 0, 0.015); } .comu-section .comparison-card { background-color: var(--cp-color-bg-base); border: 1px solid var(--cp-color-border); border-radius: 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; overflow: hidden; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; } .comu-section .comparison-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07); } .comu-section .comparison-card.featured { border: 2px solid var(--cp-color-primary); box-shadow: 0 8px 30px color-mix(in srgb, var(--cp-color-primary) 8%, transparent); } .comu-section .comparison-card.featured:hover { box-shadow: 0 16px 45px color-mix(in srgb, var(--cp-color-primary) 16%, transparent); } .comu-section .comp-card-header { height: 140px; padding: 20px 12px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-bottom: 2px solid var(--cp-color-border); background-color: var(--cp-compare-header-bg, var(--cp-color-bg-alt)); text-align: center; } .comu-section .comparison-card.featured .comp-card-header { background-color: color-mix(in srgb, var(--cp-color-primary) 3%, transparent); border-bottom-color: color-mix(in srgb, var(--cp-color-primary) 15%, transparent); } .comu-section .comp-card-img { width: auto; max-width: 100%; height: 48px; object-fit: contain; margin-bottom: 8px; } .comu-section .comp-badge { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; padding: 4px 10px; border-radius: 100px; line-height: 1; } .comu-section .comparison-card.featured .comp-badge { background-color: var(--cp-color-primary); color: var(--cp-compare-badge-text, #FFFFFF); } .comu-section .comp-badge.competitor { background-color: rgba(0, 0, 0, 0.05); color: var(--cp-color-text-muted); } .comu-section .comp-card-title { font-size: 13px; font-weight: 700; color: var(--cp-color-text-main); margin: 0; } .comu-section .comparison-card.featured .comp-card-title { color: var(--cp-color-primary); } .comu-section .comp-val-cell { height: 52px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .comu-section .comp-val-cell:last-child { border-bottom: 0; } .comu-section .comp-val-cell:nth-child(even) { background-color: rgba(0, 0, 0, 0.015); } .comu-section .comparison-card.featured .comp-val-cell.yes { background-color: color-mix(in srgb, var(--cp-color-primary) 1.5%, transparent); } .comu-section .comparison-card.featured .comp-val-cell:nth-child(even).yes { background-color: color-mix(in srgb, var(--cp-color-primary) 3.5%, transparent); } .comu-section .check-icon, .comu-section .cross-icon { display: inline-flex; align-items: center; justify-content: center; /* 设计稿 product-sections.css 是 18px / 图案 11px；主题历来用 22px / 13px。走变量，由 comu-plans 的「表格行高=紧凑」切到设计稿值，不动 comu-compare 等既有用法。 */ width: var(--cp-check-size, 22px); height: var(--cp-check-size, 22px); border-radius: 50%; vertical-align: middle; } .comu-section .check-icon { background-color: var(--cp-color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: var(--cp-check-mark, 13px) var(--cp-check-mark, 13px); background-repeat: no-repeat; background-position: center; } /* 仅对比表：改用 mask 取形状 + background-color 上色，笔画色才能跟设置走。 comu-plans 也用 .check-icon，但它靠基础规则的 background-image 出对勾、自己只改底色（第 3 列还换成深色对勾），所以这套不能做成全局规则。 */ .comu-section.comu-compare .check-icon { background-image: none; } .comu-section.comu-compare .check-icon::after { content: ''; width: 13px; height: 13px; background-color: var(--cp-compare-check-mark, #ffffff); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px 13px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px 13px no-repeat; } .comu-section .cross-icon::after { content: '✕'; font-size: 13px; color: var(--cp-compare-cross, #C8CDD6); line-height: 1; } .comu-section .comp-val-text { font-size: 12.5px; font-weight: 500; color: var(--cp-color-text-muted); text-align: center; line-height: 1.35; padding: 0 8px; } .comu-section .comparison-card.featured .comp-val-cell .comp-val-text { color: var(--cp-color-primary); font-weight: 700; } @media (max-width: 768px) { .comu-section.comu-compare .comparison-scroll-wrapper { margin-left: 0; margin-right: 0; width: 100%; overflow-x: hidden; padding: 0 3px; box-sizing: border-box; scrollbar-width: none; } .comu-section.comu-compare .comparison-scroll-wrapper::-webkit-scrollbar { display: none; height: 0; } .comu-section.comu-compare .comparison-cards-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; width: 100%; min-width: 0; gap: 2px; padding: 0; box-sizing: border-box; } .comu-section.comu-compare .comparison-features-col { position: relative; left: auto; z-index: auto; background-color: transparent; box-shadow: none; transform: none; width: auto; } .comu-section.comu-compare .comp-feature-header { height: 70px; margin-top: 2px; padding: 4px 2px; font-size: 11px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: transparent; } .comu-section.comu-compare .comp-card-header { height: 70px; padding: 4px 2px; gap: 2px; } .comu-section.comu-compare .comp-card-header .comp-card-img, .comu-section.comu-compare .comp-card-header img { width: auto; height: 24px; margin-bottom: 2px; object-fit: contain; } .comu-section.comu-compare .comp-card-icon { height: 24px; width: 24px; margin-bottom: 2px; display: flex; align-items: center; justify-content: center; } .comu-section.comu-compare .comp-card-icon svg { width: 24px; height: 24px; } .comu-section.comu-compare .comp-card-title { font-size: 9px; line-height: 1.1; text-align: center; word-break: break-word; } .comu-section.comu-compare .comp-badge { font-size: 8px; padding: 2px 4px; } .comu-section.comu-compare .comp-feature-cell { height: 52px; font-size: 9px; line-height: 1.2; padding: 4px; text-align: left; word-break: break-word; } .comu-section.comu-compare .comp-feature-cell:nth-child(even) { background-color: var(--cp-color-bg-alt); } .comu-section.comu-compare .comp-val-cell { height: 52px; font-size: 9px; line-height: 1.2; padding: 0 4px; text-align: center; } .comu-section.comu-compare .comp-val-text { font-size: 9px; line-height: 1.2; padding: 0 2px; word-break: break-word; } .comu-section.comu-compare .check-icon, .comu-section.comu-compare .cross-icon { width: 18px; height: 18px; } .comu-section.comu-compare .check-icon { background-size: 11px 11px; } .comu-section.comu-compare .cross-icon::after { font-size: 11px; } .comu-section.comu-compare .comparison-card { border-radius: 12px; } .comu-section.comu-compare .comparison-card:hover { transform: none; } } /* ========================================================================== 区块 · Timeline（Join the Pre-Sale 预售时间线） ========================================================================== */ .comu-section .timeline { position: relative; max-width: 1200px; margin: 0 auto; --timeline-node-center-y: 95px; display: grid; grid-template-columns: repeat(var(--timeline-cols, 4), 1fr); gap: 20px; align-items: stretch; } .comu-section .timeline-row { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; text-align: center; } .comu-section .timeline-row::after { content: ''; position: absolute; top: var(--timeline-node-center-y); left: 50%; width: calc(100% + 20px); height: 2px; background-image: repeating-linear-gradient(to right, rgba(102, 112, 133, 0.3) 0, rgba(102, 112, 133, 0.3) 6px, transparent 6px, transparent 14px); z-index: 0; } .comu-section .timeline-row:last-child::after { display: none; } .comu-section .timeline-date { width: 100%; text-align: center; margin-bottom: 24px; height: 48px; display: flex; flex-direction: column; justify-content: flex-end; } .comu-section .timeline-date span { display: block; font-size: 12px; line-height: 18px; color: #A0AAB5; font-weight: 500; transition: color var(--cp-transition-fast); } .comu-section .timeline-date strong { display: block; font-size: 20px; font-weight: 600; color: #8C94A1; line-height: 26px; margin-top: 2px; transition: color var(--cp-transition-fast); } .comu-section .timeline-row:hover:not(.active) .timeline-date strong { color: #555E6D; } .comu-section .timeline-row:hover:not(.active) .timeline-date span { color: #8C94A1; } .comu-section .timeline-node { position: relative; width: 46px; height: 46px; margin: 0 auto 24px auto; background-color: var(--cp-color-bg-base); border: 2px solid rgba(102, 112, 133, 0.3); border-radius: 50%; z-index: 2; display: grid; place-items: center; color: var(--cp-color-text-main); transition: all var(--cp-transition-normal); } .comu-section .timeline-node svg { width: 20px; height: 20px; stroke-width: 1.8; } .comu-section .timeline-card { min-height: 76px; background-color: var(--cp-color-bg-alt); border: 1px solid transparent; border-radius: 20px; padding: 16px 18px; transition: all var(--cp-transition-normal); text-align: left; width: 100%; flex-grow: 1; display: flex; flex-direction: column; } .comu-section .timeline-card p { color: var(--cp-color-text-muted); font-size: 11px; font-weight: 600; margin-bottom: 4px; } .comu-section .timeline-card h3 { font-size: 14px; line-height: 20px; margin-bottom: 4px; min-height: 40px; color: var(--cp-color-text-main); } .comu-section .timeline-card span { display: block; font-size: 12px; line-height: 18px; color: var(--cp-color-text-muted); } .comu-section .timeline-row.active .timeline-node { background-color: var(--cp-color-primary); border-color: var(--cp-color-primary); color: #FFFFFF; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-color-primary) 15%, transparent); } .comu-section .timeline-row.active .timeline-card { border-color: color-mix(in srgb, var(--cp-color-primary) 65%, transparent); background-color: color-mix(in srgb, var(--cp-color-primary) 6%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--cp-color-primary) 8%, transparent); } .comu-section .timeline-row.active .timeline-date strong { color: var(--cp-color-primary); } .comu-section .timeline-row.active .timeline-date span { color: var(--cp-color-primary); opacity: 0.8; } .comu-section .timeline-row.active .timeline-card p, .comu-section .timeline-row.active .timeline-card span { color: var(--cp-color-primary); opacity: 0.85; } .comu-section .timeline-row.active .timeline-card h3 { color: var(--cp-color-primary); } @media (max-width: 768px) { .comu-section .timeline { padding-left: 0; max-width: 100%; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } .comu-section .timeline-row { margin-bottom: 0; } .comu-section .timeline-row::after { display: none; } .comu-section .timeline-date { margin-bottom: 12px; height: auto; } .comu-section .timeline-date strong { font-size: 18px; line-height: 1.3; } .comu-section .timeline-node { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 16px auto; } .comu-section .timeline-card { padding: 14px 16px; width: 100%; box-sizing: border-box; } } /* ========================================================================== 区块 · Audience（What Works for You? 人群自动轮播） ========================================================================== */ .comu-section .audience-rotator { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr); align-items: stretch; gap: clamp(42px, 5vw, 76px); margin-top: clamp(28px, 4vw, 56px); } .comu-section .audience-visual { width: 100%; height: 100%; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%); } .comu-section .audience-visual-image { position: absolute; left: 8%; width: 84%; height: 56%; display: block; object-fit: cover; border-radius: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transition: opacity 450ms cubic-bezier(0.25, 1, 0.5, 1), transform 450ms cubic-bezier(0.25, 1, 0.5, 1), filter 450ms cubic-bezier(0.25, 1, 0.5, 1); } .comu-section .audience-visual-image.active { top: 50%; transform: translateY(-50%) scale(1); z-index: 3; opacity: 1; filter: none; height: auto; aspect-ratio: 1 / 1; } .comu-section .audience-visual-image.prev { top: 0; transform: scale(0.9) translateY(0); transform-origin: top center; z-index: 1; opacity: 0.4; filter: blur(4px); } .comu-section .audience-visual-image.next { bottom: 0; transform: scale(0.9) translateY(0); transform-origin: bottom center; z-index: 2; opacity: 0.4; filter: blur(4px); } .comu-section .audience-visual-image.is-changing { opacity: 0.15; } .comu-section .audience-visual-image.active.is-changing { transform: translateY(-50%) scale(0.92); filter: blur(2px); } .comu-section .audience-visual-image.prev.is-changing { transform: scale(0.85) translateY(10px); } .comu-section .audience-visual-image.next.is-changing { transform: scale(0.85) translateY(-10px); } .comu-section .audience-list { display: flex; flex-direction: column; gap: 0; max-height: clamp(460px, 38vw, 580px); overflow-y: auto; padding: 90px 0; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); } .comu-section .audience-list::-webkit-scrollbar { display: none; } .comu-section .audience-item { display: block; flex: 0 0 auto; width: 100%; box-sizing: border-box; padding: 22px 16px; border: 0; border-bottom: 1px dashed rgba(25, 28, 29, 0.08); background: transparent; color: var(--cp-color-text-muted); text-align: left; cursor: pointer; transition: background-color var(--cp-transition-fast), color var(--cp-transition-fast); } .comu-section .audience-item:last-child { border-bottom: none; } .comu-section .audience-item:hover { background-color: color-mix(in srgb, var(--cp-color-primary) 4%, transparent); color: var(--cp-color-text-main); } .comu-section .audience-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .comu-section .audience-role-badge { position: relative; isolation: isolate; display: inline-flex; align-items: center; padding: 0 0 6px 0; color: var(--cp-color-text-muted); margin-bottom: 2px; } .comu-section .audience-role-badge::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, #0A69FE, #32E8D6); transform: scaleX(0); transform-origin: left; border-radius: var(--cp-rounded-pill); opacity: 0; transition: opacity var(--cp-transition-fast); } .comu-section .audience-role { position: relative; z-index: 1; font-size: 14px; line-height: 1.2; font-weight: 700; color: inherit; text-transform: uppercase; letter-spacing: 0.04em; } .comu-section .audience-copy > strong { font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--cp-color-text-main); margin-top: 4px; } .comu-section .audience-copy > span:last-child { display: block; max-width: 440px; font-size: 16px; line-height: 1.6; color: var(--cp-color-text-muted); margin-top: 4px; } .comu-section .audience-item.active .audience-role-badge { color: var(--cp-color-primary); } .comu-section .audience-item.active .audience-role-badge::after { opacity: 1; animation: comuAudienceLine var(--audience-delay, 5400ms) linear forwards; } @keyframes comuAudienceLine { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .comu-section .audience-visual-image { transition: none; } .comu-section .audience-item.active .audience-role-badge::after { animation: none; transform: scaleX(1); } } @media (max-width: 1024px) { .comu-section .audience-rotator { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr); gap: 44px; } } @media (max-width: 768px) { .comu-section .audience-rotator { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; } .comu-section.comu-audience .cp-container { overflow: visible; } .comu-section .audience-visual { height: auto; aspect-ratio: 1 / 1; border-radius: 20px; -webkit-mask-image: none !important; mask-image: none !important; } .comu-section .audience-visual-image.active { width: 100% !important; left: 0 !important; } .comu-section .audience-visual-image.prev, .comu-section .audience-visual-image.next { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .comu-section .audience-list { display: flex; flex-direction: row; overflow-x: auto; overflow-y: visible; overscroll-behavior: auto; max-height: none; padding: 16px 40px 16px 20px; margin-left: -20px; margin-right: -20px; gap: 16px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; } .comu-section .audience-list::-webkit-scrollbar { display: none; } .comu-section .audience-item { flex: 0 0 calc(100% - 40px); width: calc(100% - 40px); min-width: 0; scroll-snap-align: center; min-height: auto; padding: 20px; border: 1px solid var(--cp-color-border); border-radius: 20px; background-color: var(--cp-color-bg-base); color: var(--cp-color-text-muted); } .comu-section .audience-item:last-child { border-bottom: 1px solid var(--cp-color-border); } .comu-section .audience-item:hover { background-color: var(--cp-color-bg-base); color: var(--cp-color-text-muted); } .comu-section .audience-item.active { background-color: var(--cp-color-bg-base); color: var(--cp-color-text-main); } .comu-section .audience-role-badge { min-height: auto; padding: 0 0 6px 0; } .comu-section .audience-role { font-size: 11px; } .comu-section .audience-copy { gap: 6px; } .comu-section .audience-item.active .audience-role-badge { color: var(--cp-color-primary); } .comu-section .audience-copy > strong { font-size: 16px; margin-top: 0; } .comu-section .audience-copy > span:last-child { font-size: 13px; line-height: 1.45; margin-top: 0; } } /* ========================================================================== 区块 · Media Marquee（Logo 无限横向滚动） ========================================================================== */ .comu-section .section-heading--tight { margin-bottom: 24px; } .comu-section .media-quote-box { display: flex; align-items: flex-start; justify-content: center; max-width: 900px; margin: 0 auto 12px; padding: 0; gap: 16px; text-align: center; border: 0; } .comu-section .media-quote-box .quote-mark { font-family: Georgia, serif; font-size: 36px; font-weight: 900; line-height: 1; color: var(--cp-media-quote-mark, #9ca3af); flex: 0 0 auto; } .comu-section .media-quote-box .quote-text { margin: 0; padding-top: 4px; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--cp-media-quote, #374151); transition: opacity 0.2s ease-in-out; } .comu-section .media-logo-item { display: flex; align-items: center; flex: 0 0 auto; } .comu-section .media-logo-item[data-comu-quote] { cursor: pointer; } .comu-section .media-logo-marquee { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; padding: 24px 0; } .comu-section .media-logo-track { display: flex; align-items: center; width: max-content; animation: comuMediaScroll var(--comu-marquee-duration, 38s) linear infinite; } .comu-section .media-logo-set { display: flex; align-items: center; gap: var(--cp-logo-gap, 140px); padding-right: var(--cp-logo-gap, 140px); flex: 0 0 auto; } .comu-section .media-logo { height: var(--comu-logo-h, 100px); width: auto; flex: 0 0 auto; display: block; } .comu-section .media-logo--sm { height: 48px; } @keyframes comuMediaScroll { from { transform: translateX(0); } to { transform: translateX(-20%); } } @media (prefers-reduced-motion: reduce) { .comu-section .media-logo-track { animation: none; } } @media (max-width: 768px) { .comu-section .media-quote-box .quote-text { font-size: 16px; } .comu-section .media-logo-set { gap: 72px; padding-right: 72px; } .comu-section .media-logo { height: calc(var(--comu-logo-h, 100px) * 0.64); } /* --sm 不复用 --comu-logo-h 的桌面值，否则「降低高度」开关会被打穿 */ .comu-section .media-logo--sm { height: 34px; } } /* ========================================================================== Comu Plans（订阅套餐对比表） ========================================================================== */ .comu-section.comu-plans .cp-container { overflow: visible; } /* 表格 min-width 是 900px，容器在 900~1200 这一段比它窄，overflow: visible 会把整页撑出横滚（预热页 1200/900、App 下载页 900 都因此中招；设计稿同样如此）。改成 overflow-x: auto 让表格在自己的框里横滑——下面那几条滚动条样式本来就是给它准备的，只是一直没生效。表头是 position: relative 不是 sticky，不受影响。 */ .comu-section.comu-plans .plan-table-wrap { overflow-x: auto; overflow-y: visible; padding-top: 0; padding-bottom: 10px; /* 把表头的 z-index:10 关在这个盒子里。表头写 10 只是为了压住高亮列的底色，但它和吸顶 header 的 z-index 打平，而表格在 DOM 里排在 header 之后——平局时后者赢，滚到套餐表时表头会盖住站点头部（预热页 PC 实测复现）。isolation 建一个层叠上下文，内部次序不变、也不外泄。 */ isolation: isolate; } .comu-section.comu-plans .plan-table-wrap::-webkit-scrollbar { -webkit-appearance: none; height: 8px; } .comu-section.comu-plans .plan-table-wrap::-webkit-scrollbar-track { background: transparent; } .comu-section.comu-plans .plan-table-wrap::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 10px; } .comu-section.comu-plans .plan-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; text-align: left; } .comu-section.comu-plans .plan-table th, .comu-section.comu-plans .plan-table td { /* 设计稿是 line-height: normal；主题默认继承 1.6，20 行累计高出约 100px。默认保持现状（预热页/comu-app 页已按 1.6 排版），由 cell_density 切换。 */ line-height: var(--cp-plans-cell-lh, inherit); padding: 12px 16px; /* Impact 的 theme.css 给全局 td 加了 border-top: 1px，设计稿那边不加载 theme.css 所以没有——每行因此高 1px，24 行累计 24px，而且和下一行的 border-bottom 叠成双线。紧凑档把它去掉；标准档保持现状，免得动到预热页与 comu-app 页。 */ border-top: var(--cp-plans-cell-bt, 1px) solid transparent; border-bottom: 1px dashed rgba(0, 0, 0, 0.08); font-size: calc(var(--cp-plans-fs-table, 13px) * var(--cp-plans-fs, 1)); vertical-align: middle; } .comu-section.comu-plans .plan-table th { font-weight: 700; background-color: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); position: relative; z-index: 10; padding: 16px; } .comu-section.comu-plans .plan-table th:first-child { font-size: calc(var(--cp-plans-fs-rowlabel, 18px) * var(--cp-plans-fs, 1)); color: #1e293b; width: 26%; } .comu-section.comu-plans .plan-table th:nth-child(2) { width: 20%; } .comu-section.comu-plans .plan-table th:nth-child(3) { width: 24%; } .comu-section.comu-plans .plan-table th:nth-child(4) { width: 30%; } .comu-section.comu-plans .plan-table th:not(:first-child) { text-align: center; } .comu-section.comu-plans .plan-header-flex { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; } .comu-section.comu-plans .plan-header-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; } .comu-section.comu-plans .plan-header-icon.bg-blue { background-color: var(--cp-color-primary); box-shadow: 0 4px 10px rgba(34, 119, 255, 0.2); } .comu-section.comu-plans .plan-header-icon.bg-teal { background-color: var(--cp-plans-col4, #7c3aed); box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2); } .comu-section.comu-plans .plan-header-icon.bg-gold { background-color: #FAE7CF; box-shadow: 0 4px 10px rgba(250, 231, 207, 0.3); } .comu-section.comu-plans .plan-header-icon svg { width: 20px; height: 20px; } .comu-section.comu-plans .plan-header-icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .comu-section.comu-plans .plan-header-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .comu-section.comu-plans .plan-header-text strong { font-size: calc(var(--cp-plans-fs-planname, 16px) * var(--cp-plans-fs, 1)); font-weight: 700; } .comu-section.comu-plans .plan-header-text.text-blue strong { color: var(--cp-color-primary); } .comu-section.comu-plans .plan-header-text.text-teal strong { color: var(--cp-plans-col4, #7c3aed); } .comu-section.comu-plans .plan-header-text.text-gold strong { color: #191c1d; } .comu-section.comu-plans .plan-header-text span { font-size: calc(11px * var(--cp-plans-fs, 1)); color: #64748b; font-weight: 400; margin-top: 2px; line-height: 1.3; } /* Recommended 角标已按新设计移除；保留选择器避免旧缓存样式残留 */ .comu-section.comu-plans .best-value-badge { display: none !important; } .comu-section.comu-plans .best-value-badge__compact { display: none; } .comu-section.comu-plans .plan-table th:nth-child(4), .comu-section.comu-plans .plan-table td:nth-child(4), .comu-section.comu-plans .plan-table tr:not(.group-row):not(.unified-highlight-row):not(.progressive-highlight-row) td:nth-child(4) { background-color: #ffffff; } .comu-section.comu-plans .plan-table th.elite-col { position: relative; overflow: visible; } .comu-section.comu-plans .plan-table tr:last-child td:nth-child(4) { border-radius: 0; } .comu-section.comu-plans .plan-table td:nth-child(3) small { color: var(--cp-plans-col3, #a37a28); } .comu-section.comu-plans .plan-table td:nth-child(4) small { color: var(--cp-plans-col4, #7c3aed); } .comu-section.comu-plans .plan-table tr:not(.group-row):not(.unified-highlight-row):not(.progressive-highlight-row) td:nth-child(1) { font-weight: 600; } .comu-section.comu-plans .plan-table tr:not(.group-row):not(.unified-highlight-row):not(.progressive-highlight-row) td:nth-child(2), .comu-section.comu-plans .plan-table tr:not(.group-row):not(.unified-highlight-row):not(.progressive-highlight-row) td:nth-child(3), .comu-section.comu-plans .plan-table tr:not(.group-row):not(.unified-highlight-row):not(.progressive-highlight-row) td:nth-child(4) { text-align: center; } .comu-section.comu-plans .plan-table tr:not(.group-row):not(.unified-highlight-row):not(.progressive-highlight-row) td:nth-child(4) { font-weight: 700; } .comu-section.comu-plans .plan-table td small { display: block; font-size: calc(11px * var(--cp-plans-fs, 1)); color: var(--cp-color-text-muted); margin-top: 2px; } .comu-section.comu-plans .plan-table td span { font-size: calc(11px * var(--cp-plans-fs, 1)); color: var(--cp-color-text-muted); } .comu-section.comu-plans .price-val { font-size: calc(var(--cp-plans-fs-price, 16px) * var(--cp-plans-fs, 1)); font-weight: 800; color: var(--cp-color-text-main); } .comu-section.comu-plans .price-val.text-gold, .comu-section.comu-plans .text-gold { color: var(--cp-plans-col3, #a37a28); } .comu-section.comu-plans .plan-table td:nth-child(3) span.text-gold, .comu-section.comu-plans .plan-table td:nth-child(3) small.text-gold, .comu-section.comu-plans .plan-table td:nth-child(3) .price-val.text-gold { color: var(--cp-plans-col3, #a37a28); } .comu-section.comu-plans .price-val.text-teal, .comu-section.comu-plans .text-teal, .comu-section.comu-plans .text-teal strong { color: var(--cp-plans-col4, #7c3aed); } .comu-section.comu-plans .plan-table td:nth-child(4) span.text-teal, .comu-section.comu-plans .plan-table td:nth-child(4) small.text-teal, .comu-section.comu-plans .plan-table td:nth-child(4) .price-val.text-teal { color: var(--cp-plans-col4, #7c3aed); } .comu-section.comu-plans .plan-table tr.group-row td { background-color: #f8fafc; color: #475569; font-weight: 800; font-size: calc(11px * var(--cp-plans-fs, 1)); text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .comu-section.comu-plans .plan-table tr.group-row td.elite-col-group { background-color: #f8fafc; } .comu-section.comu-plans .plan-table tr.unified-highlight-row td, .comu-section.comu-plans .plan-table tr.progressive-highlight-row td { padding: 14px 16px; border-bottom: 1px dashed rgba(0, 0, 0, 0.08); background: transparent; } .comu-section.comu-plans .plan-table tr.unified-highlight-row td, .comu-section.comu-plans .plan-table tr.unified-highlight-row td strong { color: #191C1D; } .comu-section.comu-plans .plan-table tr.unified-highlight-row td:first-child, .comu-section.comu-plans .plan-table tr.progressive-highlight-row td:first-child { background: var(--cp-color-bg-alt); } .comu-section.comu-plans .plan-table tr.unified-highlight-row td:nth-child(2), .comu-section.comu-plans .plan-table tr.progressive-highlight-row td:nth-child(2) { background: rgba(34, 119, 255, 0.15); } .comu-section.comu-plans .plan-table tr.unified-highlight-row td:nth-child(3), .comu-section.comu-plans .plan-table tr.progressive-highlight-row td:nth-child(3) { background: rgba(250, 231, 207, 0.2); } .comu-section.comu-plans .plan-table tr.unified-highlight-row td:nth-child(4), .comu-section.comu-plans .plan-table tr.progressive-highlight-row td:nth-child(4) { background: rgba(124, 58, 237, 0.2); font-weight: 800; } .comu-section.comu-plans .plan-table tr.unified-highlight-row td:not(:first-child), .comu-section.comu-plans .plan-table tr.progressive-highlight-row td:not(:first-child) { font-size: calc(15px * var(--cp-plans-fs, 1)); font-weight: 700; text-align: center; } .comu-section.comu-plans .plan-table tr.progressive-highlight-row td:nth-child(3) { font-weight: 600; } .comu-section.comu-plans .plan-table tr.progressive-highlight-row td:nth-child(4) { font-size: calc(15px * var(--cp-plans-fs, 1)); } .comu-section.comu-plans .plan-table td:nth-child(2) .check-icon { background-color: var(--cp-color-primary); box-shadow: 0 2px 6px rgba(34, 119, 255, 0.2); } .comu-section.comu-plans .plan-table td:nth-child(3) .check-icon { background-color: #FAE7CF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191c1d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); box-shadow: 0 2px 6px rgba(250, 231, 207, 0.4); } .comu-section.comu-plans .plan-table td:nth-child(4) .check-icon { background-color: var(--cp-plans-col4, #7c3aed); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); box-shadow: 0 2px 6px rgba(124, 58, 237, 0.2); } .comu-section.comu-plans .plan-footnote { font-size: calc(12px * var(--cp-plans-fs, 1)); color: var(--cp-color-text-muted); margin-top: 16px; text-align: center; } @media (max-width: 768px) { .comu-section.comu-plans { overflow: visible; } .comu-section.comu-plans .cp-container { overflow: visible; width: min(100% - 24px, var(--cp-max-width)); } .comu-section.comu-plans .plan-table-wrap { overflow: visible; padding-top: 0; padding-bottom: 15px; padding-inline: 0; } .comu-section.comu-plans .plan-table { min-width: 0; table-layout: fixed; } .comu-section.comu-plans .plan-table th:first-child, .comu-section.comu-plans .plan-table td:first-child { width: 25%; font-size: calc(9px * var(--cp-plans-fs, 1)); line-height: 1.2; word-break: break-word; white-space: normal; padding-left: 2px; padding-right: 2px; } .comu-section.comu-plans .plan-table th:not(:first-child), .comu-section.comu-plans .plan-table td:not(:first-child) { width: 25%; padding-left: 1px; padding-right: 1px; font-size: calc(9px * var(--cp-plans-fs, 1)); text-align: center; word-break: break-word; } .comu-section.comu-plans .plan-table tr.group-row td { font-size: calc(8px * var(--cp-plans-fs, 1)); padding-left: 4px; } .comu-section.comu-plans .plan-header-flex { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; } .comu-section.comu-plans .plan-header-icon, .comu-section.comu-plans .plan-header-text span { display: none; } .comu-section.comu-plans .plan-header-text { align-items: center; width: 100%; text-align: center; } .comu-section.comu-plans .plan-header-text strong { font-size: calc(10px * var(--cp-plans-fs, 1)); display: block; width: 100%; text-align: center; } .comu-section.comu-plans .plan-table th.elite-col { overflow: visible; vertical-align: middle; padding-top: 16px; } .comu-section.comu-plans .plan-table td span, .comu-section.comu-plans .plan-table td small { font-size: calc(7px * var(--cp-plans-fs, 1)); line-height: 1.1; } .comu-section.comu-plans .price-val { font-size: calc(11px * var(--cp-plans-fs, 1)); } .comu-section.comu-plans .plan-table td .check-icon { display: block; margin: 0 auto; } /* Unlimited 行：保持移动端原有 11px（与 progressive Unlimited 一致），靠收紧内边距避免换行 */ .comu-section.comu-plans .plan-table tr.unified-highlight-row td { padding: 10px 2px; } .comu-section.comu-plans .plan-table tr.unified-highlight-row td:not(:first-child), .comu-section.comu-plans .plan-table tr.unified-highlight-row td:not(:first-child) strong, .comu-section.comu-plans .plan-table tr.progressive-highlight-row td:not(:first-child) { font-size: calc(11px * var(--cp-plans-fs, 1)); line-height: 1.15; } .comu-section.comu-plans .plan-table tr.unified-highlight-row td:not(:first-child), .comu-section.comu-plans .plan-table tr.unified-highlight-row td:not(:first-child) strong { white-space: nowrap; } .comu-section.comu-plans .plan-table tr.progressive-highlight-row td:nth-child(4) { font-size: calc(9px * var(--cp-plans-fs, 1)); line-height: 1.1; } } @media (max-width: 470px) { .comu-section.comu-plans .cp-container { width: min(100% - 16px, var(--cp-max-width)); } .comu-section.comu-plans .plan-table th:first-child, .comu-section.comu-plans .plan-table td:first-child { padding-left: 1px; padding-right: 1px; } .comu-section.comu-plans .plan-table th:not(:first-child), .comu-section.comu-plans .plan-table td:not(:first-child) { padding-left: 0; padding-right: 0; } .comu-section.comu-plans .plan-table tr.unified-highlight-row td { padding: 8px 1px; } /* 小屏不再把 Unlimited 从 11px 压到 8px，继续靠内边距防换行 */ .comu-section.comu-plans .plan-table tr.unified-highlight-row td:not(:first-child), .comu-section.comu-plans .plan-table tr.unified-highlight-row td:not(:first-child) strong { font-size: calc(11px * var(--cp-plans-fs, 1)); line-height: 1.15; white-space: nowrap; } } /* ========================================================================== Hero 内容定位（对齐 Impact Slideshow 的 Mobile/Desktop content position）类由 comu-hero.liquid 按设置输出：--d-* 桌面，--m-* 移动。默认值（d: bottom-center / m: top-center）复现历史视觉，不新增规则。置于文件末尾以覆盖前面的默认布局，勿上移。 ========================================================================== */ @media (min-width: 1025px) { .comu-section.comu-hero--d-v-top .cp-container { align-items: flex-start; } .comu-section.comu-hero--d-v-middle .cp-container { align-items: center; } .comu-hero--d-v-top .hero-content, .comu-hero--d-v-middle .hero-content { padding-bottom: 0; padding-top: clamp(24px, 4svh, 48px); } .comu-hero--d-h-left .hero-content { margin-left: 0; text-align: left; } .comu-hero--d-h-left .hero-copy { margin-left: 0; } .comu-hero--d-h-left .hero-actions { justify-content: flex-start; } .comu-hero--d-h-right .hero-content { margin-right: 0; text-align: right; } .comu-hero--d-h-right .hero-copy { margin-right: 0; } .comu-hero--d-h-right .hero-actions { justify-content: flex-end; } } @media (max-width: 1024px) { .comu-section.comu-hero--m-v-top .cp-container { align-items: flex-start; padding-top: calc(var(--sticky-area-height, 72px) + env(safe-area-inset-top, 0px) + var(--hero-content-inset-top)); } .comu-section.comu-hero--m-v-middle .cp-container { align-items: center; padding-top: 0; } .comu-section.comu-hero--m-v-bottom .cp-container { align-items: flex-end; padding-top: 0; } .comu-section.comu-hero--m-v-middle .hero-content, .comu-section.comu-hero--m-v-bottom .hero-content { padding-bottom: var(--hero-content-bottom-gap, clamp(32px, 8%, 80px)); } .comu-section.comu-hero--m-h-left { text-align: left; } .comu-hero--m-h-left .hero-content { margin-left: 0; } .comu-hero--m-h-left .hero-copy { margin-left: 0; padding-left: 0; } .comu-hero--m-h-left .hero-actions { justify-content: flex-start; } .comu-section.comu-hero--m-h-right { text-align: right; } .comu-hero--m-h-right .hero-content { margin-right: 0; } .comu-hero--m-h-right .hero-copy { margin-right: 0; padding-right: 0; } .comu-hero--m-h-right .hero-actions { justify-content: flex-end; } } /* ========================================================================== Comu Image Grid — 图片网格（1/2/3/4 列，可选图注） ========================================================================== */ .comu-section.comu-image-grid .comu-image-grid__list { display: grid; grid-template-columns: repeat(var(--cp-grid-columns, 2), minmax(0, 1fr)); gap: var(--cp-grid-gap, 24px); } .comu-image-grid__item { display: flex; flex-direction: column; align-items: center; margin: 0; } .comu-image-grid__image { width: 100%; height: auto; display: block; border-radius: var(--cp-grid-radius, 20px); object-fit: cover; } .comu-image-grid__caption { margin-top: 16px; font-size: 18px; line-height: 23px; font-weight: 500; text-align: center; color: var(--cp-color-text-main); } .comu-section.comu-image-grid .section-heading { margin-bottom: 40px; } @media (max-width: 768px) { .comu-section.comu-image-grid .comu-image-grid__list { grid-template-columns: repeat(var(--cp-grid-columns-mobile, 2), minmax(0, 1fr)); /* 单列（agent stack）保持设计稿的 24px，多列（hardware grid）才收到 16px */ gap: var(--cp-grid-gap-mobile, var(--cp-grid-gap, 24px)); } .comu-image-grid__caption { margin-top: 12px; font-size: 14.4px; line-height: 23px; } } /* ========================================================================== Comu Image Carousel — 整幅图轮播（复用主题 slideshow-carousel / page-dots） ========================================================================== */ .comu-image-carousel__wrapper { position: relative; } .comu-image-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--cp-carousel-radius, 24px); } .comu-image-carousel__track::-webkit-scrollbar { display: none; } .comu-image-carousel__slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; } .comu-image-carousel__image { width: 100%; height: auto; display: block; object-fit: cover; } .comu-image-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .comu-image-carousel__nav:hover { background: rgba(0, 0, 0, 0.25); } .comu-image-carousel__nav svg { width: 20px; height: 20px; } .comu-image-carousel__nav--prev { left: 24px; } .comu-image-carousel__nav--next { right: 24px; } .comu-image-carousel__dots { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; } .comu-image-carousel__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background-color: rgba(17, 24, 39, 0.2); cursor: pointer; transition: background-color 0.3s, transform 0.3s; } .comu-image-carousel__dot[aria-current='true'] { background-color: #111827; transform: scale(1.2); } .comu-section.comu-image-carousel .section-heading { margin-bottom: 40px; } /* 设计稿圆角断点是 900px（radius-system.css），移动端收到 16px */ @media (max-width: 900px) { .comu-image-carousel__track { border-radius: var(--cp-carousel-radius-mobile, 16px); } } @media (max-width: 768px) { /* 设计稿移动端不隐藏箭头，而是整体缩小并贴边 */ .comu-image-carousel__nav { width: 24px; height: 24px; } .comu-image-carousel__nav svg { width: 14px; height: 14px; } .comu-image-carousel__nav--prev { left: 4px; } .comu-image-carousel__nav--next { right: 4px; } .comu-image-carousel__dot { width: 4px; height: 4px; } } /* ========================================================================== Comu Video Tabs — 标签页 + 视频（复用主题 video-media） ========================================================================== */ .comu-video-tabs__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; width: fit-content; max-width: 100%; margin: 0 auto 32px auto; } .comu-video-tabs__tab { display: inline-flex; align-items: center; padding: 10px 22px; border: 1px solid var(--cp-color-border); border-radius: var(--cp-rounded-pill); background: var(--cp-color-bg-alt); color: var(--cp-color-text-muted); font-size: 13px; font-weight: 600; line-height: 20px; cursor: pointer; white-space: nowrap; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .comu-video-tabs__tab:hover { border-color: color-mix(in srgb, var(--cp-color-primary) 35%, transparent); background: var(--cp-color-bg-alt); color: var(--cp-color-primary); } /* 设计稿是浅蓝底 + 蓝边 + 蓝字的轻量选中态，不是实心蓝按钮 */ .comu-video-tabs__tab.is-active { background: color-mix(in srgb, var(--cp-color-primary) 6%, transparent); border-color: color-mix(in srgb, var(--cp-color-primary) 65%, transparent); color: var(--cp-color-primary); box-shadow: none; } /* PC 端所有 Tab 等宽，视觉是整齐一排 */ @media (min-width: 901px) { .comu-video-tabs__tab { width: 170px; justify-content: center; padding-left: 0; padding-right: 0; } } .comu-video-tabs__panel[hidden] { display: none; } /* 面板底色 + 强制 16:9，避免仅有封面图时切 Tab 高度跳动 */ .comu-video-tabs__panels { position: relative; width: 100%; overflow: hidden; border-radius: var(--cp-video-radius, 20px); background: #f9fafb; } .comu-video-tabs__media--poster { position: relative; width: 100%; aspect-ratio: 16 / 9; } .comu-video-tabs__media--poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* 图片型标签页（首页 #app）。默认强制 16:9 与视频面板一致； media_fit=natural 时按图片原始比例，需要图组内比例一致否则切换会跳高度。 */ .comu-video-tabs__media--image { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; } .comu-video-tabs__media--image > img { width: 100%; height: 100%; display: block; object-fit: cover; } .comu-video-tabs--fit-natural .comu-video-tabs__media--image { aspect-ratio: auto; } .comu-video-tabs--fit-natural .comu-video-tabs__media--image > img { height: auto; object-fit: contain; } /* 标题区间距：设计稿 24px（interactive 区块 18px），不是全局的 56px */ .comu-video-tabs .section-heading { margin-bottom: 24px; } #interactive-features .section-heading { margin-bottom: 18px; } /* video-showcase 型区块（TVC / 精工）标题放大到 32px */ #tvc-wrapper .section-heading h2, #precision-engineering .section-heading h2 { font-size: 32px; font-weight: 700; line-height: 40px; color: var(--cp-color-text-main, #1f2937); margin-bottom: 11px; } /* TVC 视频框：黑底 + 常驻遮罩（hover 加深）+ 外投影 */ #tvc-wrapper .comu-video-tabs__media { position: relative; background-color: #000000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); cursor: pointer; } #tvc-wrapper .comu-video-tabs__media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.25); pointer-events: none; transition: background 0.3s ease; } #tvc-wrapper .comu-video-tabs__media:hover::after { background: rgba(0, 0, 0, 0.4); } #tvc-wrapper .comu-video-tabs__media video, #tvc-wrapper .comu-video-tabs__media img { transition: transform 0.3s ease; } #tvc-wrapper .comu-video-tabs__media:hover video, #tvc-wrapper .comu-video-tabs__media:hover img { transform: scale(1.02); } .comu-video-tabs__media { display: block; width: 100%; overflow: hidden; border-radius: var(--cp-video-radius, 24px); /* 把播放按钮的 z-index 关在视频框内，避免盖住 fixed 的悬浮加购条（.product-quick-add，z-index: 2） */ isolation: isolate; } .comu-video-tabs__media video, .comu-video-tabs__media img, .comu-video-tabs__media iframe { width: 100%; height: 100%; display: block; object-fit: cover; border: 0; } .comu-video-play-btn { position: absolute; top: 24px; right: 24px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.85); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); color: #ffffff; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } video-media:hover > .comu-video-play-btn, .comu-video-tabs__media--inset:hover > .comu-video-play-btn { background: #000000; transform: scale(1.05); } .comu-video-play-btn svg { width: 26px; height: 26px; } .comu-video-play-btn__play { margin-left: 5px; } .comu-video-play-btn__pause, .comu-video-play-btn[data-playing='true'] .comu-video-play-btn__play { display: none; } .comu-video-play-btn[data-playing='true'] .comu-video-play-btn__pause { display: block; } @media (max-width: 768px) { .comu-video-play-btn { top: 16px; right: 16px; width: 53px; height: 53px; } .comu-video-play-btn svg { width: 22px; height: 22px; } /* 设计稿移动端是三列等宽网格，不是横向滚动 */ .comu-video-tabs__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 100%; margin-bottom: 16px; overflow: visible; text-align: center; } .comu-video-tabs__tab { display: flex; align-items: center; justify-content: center; margin: 0; padding: 8px 4px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: normal; } /* 之前这里写死了 white-space: nowrap，长文案（Speaker-Labeled & Searchable AI Notes）在窄屏必然溢出。设计稿是 white-space: normal + 换行，字号 12px。 */ .comu-video-tabs__nav { grid-template-columns: repeat(var(--cp-vt-tab-cols-m, 3), minmax(0, 1fr)); } .comu-video-tabs--tabs-equal .comu-video-tabs__nav { display: grid; max-width: 100%; } .comu-video-tabs--tabs-equal .comu-video-tabs__tab { height: auto; min-height: 40px; padding: 8px 6px; font-size: 12px; } #tvc-wrapper .section-heading h2, #precision-engineering .section-heading h2 { font-size: 24px; line-height: 32px; } .comu-video-play-btn__play { margin-left: 4px; } /* Video Tabs 的播放键在移动端另有一档，比通用值小得多。设计稿 product-first-section.css 移动端共三档：通用 .video-play-btn → 53×53 / 上右 16 / svg 22（App 下载页的视频展示模块用这档） .hp-video-carousel .video-play-btn → 34×34 / 上右 10 / svg 14（首页 Why Choose Comu?） .cap-features-tabs / .cap-hero-video → 同上 34 档（商品页 Just Record and Ask、 Precision Engineering、TVC）我们所有 comu-video-tabs 实例都对应后两类，所以整体走 34 档； comu-video-showcase（App 下载页）不在这里，继续用通用的 53 档。图标的 margin-left 也要归零——设计稿在这一档显式写了 0， 34px 的圆里再偏移 4px 会明显偏心。 */ .comu-video-tabs .comu-video-play-btn { top: 10px; right: 10px; width: 34px; height: 34px; } .comu-video-tabs .comu-video-play-btn svg { width: 14px; height: 14px; } .comu-video-tabs .comu-video-play-btn__play { margin-left: 0; } } /* Hero 纯图片模式：object-position 可配，其余定位复用 .hero-video 既有规则 */ .comu-section.comu-hero .hero-media-image { object-position: var(--cp-hero-img-pos, center); } @media (max-width: 767.98px) { .comu-section.comu-hero .hero-media-image { object-position: var(--cp-hero-img-pos-m, var(--cp-hero-img-pos, center)); } } .comu-section.comu-subscribe .subscribe-card-subtext { margin-top: 8px; color: var(--cp-color-text-muted); font-size: 15px; line-height: 1.6; } .comu-section.comu-subscribe .subscribe-card-subtext p { margin: 0; } /* --- Comu Scenarios · 横滑卡片布局（layout=cards）------------------------ 源自设计稿 product-sections.css:1582-1672。全部加 .comu-scenarios 前缀，避免与其他模块串味；右侧 breakout 那两行是卡片贴屏幕右缘的关键，勿删。 */ .comu-section.comu-scenarios .comu-scenarios__wrapper { margin-top: 48px; } .comu-section.comu-scenarios .comu-scenarios__track { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 21px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* 左侧跟随容器，右侧出血到屏幕边缘 */ margin-right: calc(50% - 50vw); padding-right: max(24px, calc(50vw - 50%)); } .comu-section.comu-scenarios .comu-scenarios__track::-webkit-scrollbar { display: none; } .comu-section.comu-scenarios .scenario-card-new { flex: 0 0 min(85vw, var(--cp-scenario-card-w, 340px)); scroll-snap-align: start; display: flex; flex-direction: column; gap: 20px; } .comu-section.comu-scenarios .scenario-image { width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #f3f4f6; transform: translateZ(0); } .comu-section.comu-scenarios .scenario-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .comu-section.comu-scenarios .scenario-card-new:hover .scenario-image img { transform: scale(1.05); } .comu-section.comu-scenarios .scenario-text-new { padding: 0 8px; font-size: 16px; line-height: 1.6; color: var(--cp-color-text-muted); } .comu-section.comu-scenarios .scenario-text-new strong { display: block; margin-bottom: 6px; color: var(--cp-color-text-main); font-size: 20px; font-weight: 600; } .comu-section.comu-scenarios .comu-scenarios__controls { display: flex; justify-content: center; gap: 16px; margin-top: 21px; } .comu-section.comu-scenarios .comu-scenarios__nav { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 50%; background: #f3f4f6; color: #111827; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; } .comu-section.comu-scenarios .comu-scenarios__nav:hover { background: #e5e7eb; } .comu-section.comu-scenarios .comu-scenarios__nav[disabled] { opacity: 0.5; cursor: not-allowed; } .comu-section.comu-scenarios .comu-scenarios__nav svg { width: 20px; height: 20px; } /* ========================================================================== Comu Bento Benefits — 购买保障网格（设计稿 #bento-benefits-container）卡面只显示图标+标题+底图；正文与支付图标是弹窗的数据源，卡面上隐藏。 ========================================================================== */ /* 设计稿是 `display:grid; grid-template-columns: repeat(4,1fr)`，这里刻意改用 flex：设计稿固定 4 列，而这个 section 的列数由运营配置决定，空列会被 Liquid 跳过。 grid 的固定 4 轨会在只配 3 列时留一道空白，flex + `flex:1` 则自然均分。 ≤900px 仍按设计稿切回 2 列 grid。勿按设计稿字面值改回 grid。 */ .comu-section.comu-bento .bento-grid-masonry { display: flex; gap: var(--cp-bento-gap, 12px); align-items: stretch; } .comu-section.comu-bento .bento-col { display: flex; flex-direction: column; gap: var(--cp-bento-gap, 12px); flex: 1; min-width: 0; } .comu-section.comu-bento .bento-card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; overflow: hidden; min-height: 0; padding: 17px 24px 32px; border-radius: var(--cp-bento-radius, 12px); background: var(--cp-bento-card-bg, #f8f9fa); cursor: pointer; transition: background-color 0.2s ease; } .comu-section.comu-bento .bento-card:hover, .comu-section.comu-bento .bento-card:focus-visible { background: var(--cp-bento-card-bg-hover, #f1f3f5); } .comu-section.comu-bento .bento-content { position: relative; z-index: 2; width: 100%; } /* ⚠️ 卡面不显示图标：设计稿 site-sections.css:393-398 明确把 .bento-icon 与 .bento-body、 .bento-payments 一起隐藏，卡面只留标题 + 底图。图标存在 DOM 里只是为了给弹窗当数据源（comu-sections.js 的 initBentoModule 会克隆它并改类名为 .comu-bento-modal__icon）。运营上传 SVG 图标后若发现卡面冒出图标，是这条规则被删了，不是配错。 */ .comu-section.comu-bento .bento-heading { margin: 0; font-size: 17.6px; font-weight: 600; line-height: 1.3; color: var(--cp-color-text-main); } .comu-section.comu-bento .bento-heading--long { font-size: 14.6px; } /* 数字强调卡 */ .comu-section.comu-bento .bento-heading--stat { display: flex; flex-direction: column; gap: 2px; } /* 设计稿 site-sections.css:614-625 —— 数字与支付主字是渐变描字，不是纯色。用 background-clip:text 实现；-webkit-text-fill-color 必须一起写，否则 Safari 不透明。 */ .comu-section.comu-bento .bento-stat-value, .comu-section.comu-bento .bento-pay-main { font-weight: 800; line-height: 1.1; letter-spacing: -0.8px; background: var(--cp-bento-gradient, linear-gradient(135deg, #0062ff 0%, #00c6ff 45%, #36e4da 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .comu-section.comu-bento .bento-stat-value { display: block; font-size: 44px; margin-bottom: 6px; } .comu-section.comu-bento .bento-stat-label { display: block; font-size: 17.6px; font-weight: 600; letter-spacing: 0.2px; color: var(--cp-color-text-main); } /* 支付保障卡 */ .comu-section.comu-bento .bento-heading--payment { display: flex; flex-direction: column; gap: 2px; } .comu-section.comu-bento .bento-pay-top, .comu-section.comu-bento .bento-pay-bottom { display: block; font-size: 17.6px; font-weight: 600; letter-spacing: 0.2px; color: var(--cp-color-text-main); } /* 主字与图标并排（设计稿 .payment-main-row） */ .comu-section.comu-bento .bento-pay-row { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0; } .comu-section.comu-bento .bento-pay-icon { height: 48px; width: auto; flex-shrink: 0; } .comu-section.comu-bento .bento-pay-main { font-size: 42px; } /* 数字卡与支付卡整卡居中（设计稿用 :has()，这里直接挂在 card_style 类上，兼容性更好） */ .comu-section.comu-bento .bento-card--stat, .comu-section.comu-bento .bento-card--payment { justify-content: center; align-items: center; padding: 24px; text-align: center; } .comu-section.comu-bento .bento-heading--stat, .comu-section.comu-bento .bento-heading--payment { align-items: center; text-align: center; width: 100%; } /* 设计稿 site-sections.css:569 —— 底图是「整卡铺满、贴底裁切」的背景层，不是流式排在底部的一张图。z-index 1 压在 .bento-content(2) 之下。 */ .comu-section.comu-bento .bento-bottom-img { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: block; object-position: center bottom; border-radius: inherit; z-index: 1; pointer-events: none; object-fit: cover; } /* ⚠️ 设计前提：正文、支付图标只作为弹窗的数据源，卡面上不显示。勿删这条。 */ .comu-section.comu-bento .bento-icon, .comu-section.comu-bento .bento-body, .comu-section.comu-bento .bento-payments { display: none; } /* 支付徽章：设计稿按品牌配色，类名由文案 | handle 生成。运营在「支付方式」里填的文案决定类名，例如 "Apple Pay" → .payment-badge--apple-pay。填了未收录的品牌名会落到下面的默认深色样式，不会破版。 */ /* ⚠️ 只给弹窗里的徽章排版。卡面上的 .bento-payments 必须保持 display:none （设计稿卡面只有「Secure and flexible / Payment / Protection」三行）。这里如果把 .bento-payments 一起写进来，会覆盖上面的隐藏规则，徽章就会跑到卡面上并把渐变主字挤出卡片——本项目已经因此出过一次问题。 */ .comu-bento-modal__payments { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .payment-badge { padding: 2px 8px; height: 22px; min-width: 50px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #2e2e2e; border-radius: 4px; background-color: #1a1a1a; color: #888; font-size: 9px; font-weight: 800; text-transform: uppercase; user-select: none; } .payment-badge--amazon, .payment-badge--amazon-pay { background-color: #fff; color: #000; border-color: #e5e5e5; } .payment-badge--amex { background-color: #1b75bc; color: #fff; border-color: #1b75bc; } .payment-badge--apple-pay { background-color: #fff; color: #000; border-color: #e5e5e5; } .payment-badge--diners, .payment-badge--diners-club { background-color: #0079c1; color: #fff; border-color: #0079c1; } .payment-badge--discover { background-color: #f68620; color: #fff; border-color: #f68620; } .payment-badge--google-pay { background-color: #fff; color: #444; border-color: #e5e5e5; } .payment-badge--mastercard { background-color: #1c1c1c; color: #ff5f00; border-color: #2e2e2e; } .payment-badge--paypal { background-color: #fff; color: #003087; border-color: #e5e5e5; } .payment-badge--shop-pay { background-color: #5a31f4; color: #fff; border-color: #5a31f4; } .payment-badge--visa { background-color: #1a1f71; color: #fff; border-color: #1a1f71; } /* --- 弹窗（由 comu-sections.js 动态建