/* 思源字体：整站字体来源，必须放在样式表最前（@import 规则的位置限制）。 走 jsDelivr 的 @fontsource 包——思源黑体 Noto Sans SC（正文）+ 思源宋体 Noto Serif SC（点睛）。 两个包都已按 unicode-range 切成上百个分片：浏览器只下载本页实际用到的那几片， 不会把整包 8–10MB 拉下来；font-display:swap 由源包自带，字体未就绪时先用系统字体顶上，不阻塞渲染。 若要改为完全自托管：把子集化后的 woff2 放进 /assets/fonts/，再取消 style.css 里 「自托管思源字体」那三行 @font-face 注释——本地声明在后面，会覆盖 CDN 的同一字体族。 */ @import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5/index.css'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc@5/index.css'); /* ============================================ SUNMIZE — Material Design 3 (M3) Design System Based on Google's latest open-source design system https://m3.material.io ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================ M3 DESIGN TOKENS + INTERACTION SYSTEM ============================================ */ :root { /* --- M3 Color Scheme (Light) --- */ /* Primary: Tech electric blue, seed = #0B5FFF */ --md-sys-color-primary: #0B5FFF; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D7E6FF; --md-sys-color-on-primary-container: #001D42; /* Secondary: Cool grey-blue */ --md-sys-color-secondary: #545F71; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #D8E3F8; --md-sys-color-on-secondary-container: #111C2B; /* Tertiary: Sky-blue/cyan accent */ --md-sys-color-tertiary: #00BFFF; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #C5F4FB; --md-sys-color-on-tertiary-container: #001F26; /* Error */ --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; /* Surface & Background */ --md-sys-color-surface: #FAF9FC; --md-sys-color-on-surface: #1A1C20; --md-sys-color-surface-variant: #E1E2EC; --md-sys-color-on-surface-variant: #44474E; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F3F3F8; --md-sys-color-surface-container: #EDEEF3; --md-sys-color-surface-container-high: #E7E8ED; --md-sys-color-surface-container-highest: #E2E3E8; --md-sys-color-surface-tint: #0B5FFF; /* Outline */ --md-sys-color-outline: #74777F; --md-sys-color-outline-variant: #C4C6D0; --md-sys-color-outline-subtle: rgba(0,0,0,0.06); /* Inverse */ --md-sys-color-inverse-surface: #2F3036; --md-sys-color-inverse-on-surface: #F1F0F4; --md-sys-color-inverse-primary: #A3C6FF; /* Footer（深灰收底：延续联系区的灰调，只比它深一档） */ --md-sys-color-footer-surface: #F4F5F9; /* 排版：正文用无衬线（黑体），衬线仅用于编号 / 数字 / 金句点睛。 字体策略：走主流系统字体栈，不依赖外网（Google Fonts 在国内常不可达）。 排序原则：拉丁字体必须写在中文字体之前——SimSun 等中文字体自带拉丁字形， 一旦排在前面，数字与英文会被中文衬线接管，观感发旧（这是原先「字体怪」的主因）。 · system-ui / -apple-system / Segoe UI：先匹配各系统原生 UI 字体 · PingFang SC(macOS)、HarmonyOS Sans SC(鸿蒙)、MiSans(小米)、 Microsoft YaHei(Windows)：覆盖主流中文环境 字体实际来源：文件顶部 @import 的思源黑体 / 思源宋体（已按 unicode-range 分片按需加载）。 若要改为完全自托管（不依赖 CDN）：把子集化后的 woff2 放进 /assets/fonts/， 再取消下面两行注释——本地声明在后面，会覆盖 CDN 的同一字体族，无需改动字体栈。 @font-face { font-family: 'Noto Sans SC'; src: url('/assets/fonts/noto-sans-sc.woff2') format('woff2'); font-weight: 300 700; font-display: swap; } @font-face { font-family: 'Noto Serif SC'; src: url('/assets/fonts/noto-serif-sc.woff2') format('woff2'); font-weight: 400 700; font-display: swap; } */ /* 思源黑体优先，后面是各系统原生字体作为兜底（CDN 不可达时页面不会掉字体） */ --font-sans: 'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Hiragino Sans GB', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif; /* 思源宋体优先（中英文同一套字形，数字与中文观感统一），再降级到系统衬线 */ --font-serif: 'Noto Serif SC', Georgia, 'Times New Roman', 'Source Han Serif SC', 'Songti SC', STSong, SimSun, serif; --md-sys-color-footer-on-surface: #2F3036; /* --- M3 Elevation (Surface Tint + Shadow) --- */ --md-sys-elevation-0: none; --md-sys-elevation-1: 0px 1px 2px rgba(0,0,0,0.08), 0px 1px 3px rgba(0,0,0,0.04); --md-sys-elevation-2: 0px 1px 2px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.06); --md-sys-elevation-3: 0px 4px 8px rgba(0,0,0,0.12), 0px 1px 4px rgba(0,0,0,0.06); --md-sys-elevation-4: 0px 8px 16px rgba(0,0,0,0.12), 0px 3px 8px rgba(0,0,0,0.06); --md-sys-elevation-5: 0px 12px 24px rgba(0,0,0,0.14), 0px 4px 12px rgba(0,0,0,0.08); /* --- M3 Shape Scale --- */ --md-sys-shape-none: 0px; --md-sys-shape-extra-small: 4px; --md-sys-shape-small: 8px; --md-sys-shape-medium: 12px; --md-sys-shape-large: 16px; --md-sys-shape-extra-large: 28px; --md-sys-shape-full: 9999px; /* --- M3 Spacing Scale (8dp grid) --- */ --md-sp-4: 4px; --md-sp-8: 8px; --md-sp-12: 12px; --md-sp-16: 16px; --md-sp-20: 20px; --md-sp-24: 24px; --md-sp-32: 32px; --md-sp-40: 40px; --md-sp-48: 48px; --md-sp-56: 56px; --md-sp-64: 64px; /* Layout */ --max-width: 1200px; /* --- M3 Motion --- */ --md-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0); --md-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0); --md-duration-short1: 50ms; --md-duration-short2: 100ms; --md-duration-short3: 150ms; --md-duration-medium1: 200ms; --md-duration-medium2: 250ms; --md-duration-medium3: 300ms; --md-duration-long1: 350ms; --md-duration-long2: 400ms; } /* ============================================ 标题分级与间距统一（全站一致） H1 承载页面主张，H2 承载章节；间距一律走 8dp 栅格 ============================================ */ h1.md-headline-large { font-weight: 700; letter-spacing: -0.8px; line-height: 1.16; } h2.md-headline-large { font-weight: 600; letter-spacing: -0.2px; margin-bottom: var(--md-sp-16); } h2.md-headline-medium { font-weight: 600; letter-spacing: -0.2px; margin-bottom: var(--md-sp-14); } /* H2 之后紧跟说明段 / 内容块时的标准间距 */ /* H2 之上的渐变短线：给每个章节一个统一的视觉起点 （与首页承诺区、子页速览栏同属一套语言，克制不加图标） */ .section h2.md-headline-large::before, .section h2.md-headline-medium::before { content: ''; display: block; width: 36px; height: 3px; border-radius: 2px; margin-bottom: 16px; background: linear-gradient(90deg, var(--md-sys-color-primary), color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-tertiary) 65%)); } /* 章节标题下的说明段：与标题之间留 8px、与下方内容留出 48px （原先只写了 md-headline-medium 一种，导致用 md-headline-large 的页面 只吃到

的默认 16px 边距，看起来"文字贴着卡片"； 标题与说明行贴得太近，是 FAQ 分组头最先暴露出来的） */ .section h2.md-headline-large + .page-lead, .section h2.md-headline-medium + .page-lead, .section h2 + p.page-lead { margin-top: var(--md-sp-8); margin-bottom: var(--md-sp-48); } h2.md-headline-large + .panel-grid, h2.md-headline-large + .scene-grid, h2.md-headline-large + .process-steps, h2.md-headline-large + .deliver-grid, h2.md-headline-large + .promise-band, h2.md-headline-large + .reveal-stagger { margin-top: var(--md-sp-36); } /* ============================================ M3 DARK THEME ============================================ */ @media (prefers-color-scheme: dark) { :root { --md-sys-color-primary: #6BAAFF; --md-sys-color-on-primary: #001535; --md-sys-color-primary-container: #003B8C; --md-sys-color-on-primary-container: #D6E6FF; --md-sys-color-secondary: #BCC7DB; --md-sys-color-on-secondary: #273141; --md-sys-color-secondary-container: #3D4858; --md-sys-color-on-secondary-container: #D8E3F8; /* Tertiary: Sky-blue/cyan accent */ --md-sys-color-tertiary: #67E8F9; --md-sys-color-on-tertiary: #003640; --md-sys-color-tertiary-container: #004E5C; --md-sys-color-on-tertiary-container: #C5F4FB; --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; --md-sys-color-surface: #121316; --md-sys-color-on-surface: #E2E3E8; --md-sys-color-surface-variant: #44474E; --md-sys-color-on-surface-variant: #C4C6D0; --md-sys-color-surface-container-lowest: #0D0E12; --md-sys-color-surface-container-low: #1A1C20; --md-sys-color-surface-container: #1E2024; --md-sys-color-surface-container-high: #282A2F; --md-sys-color-surface-container-highest: #33353A; --md-sys-color-surface-tint: #6BAAFF; --md-sys-color-outline: #8E9099; --md-sys-color-outline-variant: #44474E; --md-sys-color-outline-subtle: rgba(255,255,255,0.08); --md-sys-color-inverse-surface: #E2E3E8; --md-sys-color-inverse-on-surface: #2F3036; --md-sys-color-footer-surface: #1A1B20; --md-sys-color-footer-on-surface: #EDEEF3; --md-sys-color-inverse-primary: #0B5FFF; --md-sys-elevation-1: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px rgba(0,0,0,0.2); --md-sys-elevation-2: 0px 1px 2px rgba(0,0,0,0.4), 0px 2px 6px rgba(0,0,0,0.25); --md-sys-elevation-3: 0px 4px 8px rgba(0,0,0,0.4), 0px 1px 4px rgba(0,0,0,0.25); --md-sys-elevation-4: 0px 8px 16px rgba(0,0,0,0.4), 0px 3px 8px rgba(0,0,0,0.3); --md-sys-elevation-5: 0px 12px 24px rgba(0,0,0,0.5), 0px 4px 12px rgba(0,0,0,0.35); } } html { scroll-behavior: smooth; scroll-padding-top: 64px; font-size: 16px; } body { font-family: var(--font-sans); color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } /* ============================================ M3 TYPOGRAPHY SCALE Display → Headline → Title → Body → Label ============================================ */ /* Display Large: Hero main heading */ .md-display-large { font-size: clamp(2.5rem, 6vw, 3.5625rem); /* M3: 57sp */ font-weight: 400; letter-spacing: -0.25px; line-height: 1.12; } /* Headline Large: Section headings */ .md-headline-large { font-size: clamp(1.8rem, 4.5vw, 2rem); /* M3: 32sp */ font-weight: 400; letter-spacing: 0px; line-height: 1.25; } /* Headline Medium: Sub-section headings */ .md-headline-medium { font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* M3: 28sp */ font-weight: 400; letter-spacing: 0px; line-height: 1.29; } /* Title Large: Card titles */ .md-title-large { font-size: 1.375rem; /* M3: 22sp */ font-weight: 400; letter-spacing: 0px; line-height: 1.27; } /* Title Medium: Sub-titles, nav items */ .md-title-medium { font-size: 1rem; /* M3: 16sp */ font-weight: 500; letter-spacing: 0.15px; line-height: 1.5; } /* Title Small: Smaller labels */ .md-title-small { font-size: 0.875rem; /* M3: 14sp */ font-weight: 500; letter-spacing: 0.1px; line-height: 1.43; } /* Body Large: Intro paragraphs */ .md-body-large { font-size: 1rem; /* M3: 16sp */ font-weight: 400; letter-spacing: 0.5px; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); } /* Body Medium: Standard body */ .md-body-medium { font-size: 0.875rem; /* M3: 14sp */ font-weight: 400; letter-spacing: 0.25px; line-height: 1.43; color: var(--md-sys-color-on-surface-variant); } /* Body Small: Captions, footnotes */ .md-body-small { font-size: 0.75rem; /* M3: 12sp */ font-weight: 400; letter-spacing: 0.4px; line-height: 1.33; color: var(--md-sys-color-on-surface-variant); } /* Label Large: Buttons */ .md-label-large { font-size: 0.875rem; /* M3: 14sp */ font-weight: 500; letter-spacing: 0.1px; line-height: 1.43; } /* Label Medium: Cards labels */ .md-label-medium { font-size: 0.75rem; /* M3: 12sp */ font-weight: 500; letter-spacing: 0.5px; line-height: 1.33; } /* Label Small: Tiny labels */ .md-label-small { font-size: 0.6875rem; /* M3: 11sp */ font-weight: 500; letter-spacing: 0.5px; line-height: 1.45; text-transform: uppercase; } /* Gradient text — M3: use Primary color role */ .md-gradient-text { background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-tertiary) 40%) 50%, var(--md-sys-color-tertiary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } /* ============================================ M3 FOCUS RING — Keyboard accessibility ============================================ */ :focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--md-sys-shape-extra-small); } :focus:not(:focus-visible) { outline: none; } /* Skip to content (hidden until focused) */ .skip-link { position: fixed; top: -100%; left: var(--md-sp-16); z-index: 1000; padding: var(--md-sp-12) var(--md-sp-24); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-size: 0.875rem; font-weight: 500; border-radius: var(--md-sys-shape-full); text-decoration: none; transition: top 0.2s var(--md-easing-standard); } .skip-link:focus-visible { top: var(--md-sp-16); } /* ============================================ M3 RIPPLE EFFECT ============================================ */ .ripple-container { position: relative; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); } .ripple-effect { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%); transform: scale(0); animation: ripple-expand 0.6s var(--md-easing-emphasized) forwards; pointer-events: none; } @keyframes ripple-expand { to { transform: scale(4); opacity: 0; } } /* Dark ripple for light surfaces */ .ripple-effect.ripple-dark { background: radial-gradient(circle, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 70%); } /* Colored ripple for outlined/text buttons */ .btn-outlined .ripple-effect, .btn-text .ripple-effect { background: radial-gradient(circle, color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent) 0%, transparent 70%); } /* ============================================ M3 SCROLL PROGRESS BAR ============================================ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); z-index: 200; width: 0%; transition: width 0.1s linear; border-radius: 0 2px 2px 0; } /* ============================================ M3 BACK-TO-TOP FAB ============================================ */ .fab-back-top { position: fixed; bottom: var(--md-sp-24); right: var(--md-sp-24); width: 48px; height: 48px; border-radius: var(--md-sys-shape-medium); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 99; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.3s var(--md-easing-standard), transform 0.3s var(--md-easing-standard), box-shadow 0.3s var(--md-easing-standard); box-shadow: var(--md-sys-elevation-2); } .fab-back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .fab-back-top:hover { box-shadow: var(--md-sys-elevation-4); background: color-mix(in srgb, var(--md-sys-color-primary-container) 88%, #000); } .fab-back-top:active { box-shadow: var(--md-sys-elevation-1); } /* ============================================ M3 STAGGERED REVEAL ============================================ */ .reveal-stagger > * { opacity: 0; transform: translateY(32px); transition: opacity 0.5s var(--md-easing-emphasized), transform 0.5s var(--md-easing-emphasized); } .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; } .reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; } .reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; } .reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; } .reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.4s; } .reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.5s; } .reveal-stagger.visible > * { opacity: 1; transform: translateY(0); } /* ============================================ 首屏科技底纹：隐含格子 + 原子浮动节点 + 浮动卡片 （借鉴新版首页设计，只作用于首屏，不影响其他区块） ============================================ */ /* 隐含的格子：只在右上区域晕开，营造「工程感」但不抢文案 */ .hero-bg-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 78% at 70% 42%, #000 18%, transparent 72%); mask-image: radial-gradient(ellipse 70% 78% at 70% 42%, #000 18%, transparent 72%); } /* 右侧视觉：承载原子浮动节点网络（画布尺寸由 JS 按 devicePixelRatio 设定）。 硬约束：浮动原子与便签都不得进入顶部菜单区。 导航栏高 64px：用渐变遮罩把顶部 72px（64 + 8 余量）完全隐去， 再在 72–168px 之间淡入——原先用 clip-path 硬裁，节点会沿裁切线 被齐刷刷切断、形成一条可见横线；改成渐变后是自然淡出。 画布仍按整屏尺寸绘制、坐标无需换算，只是顶部这一段不参与显示； app.js 里的 TOP_MARGIN 与此值保持一致，让节点在淡出区下方回弹。 */ .hero-visual { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; /* 顶部淡出（避开导航），底部再淡出一次： 原先只做顶部淡出，原子网络在首屏底边被硬切，和下方内容之间没有过渡。 现在两端都收干净——所有动态原子都收在首屏之内、分割线以上。 */ -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 72px, #000 168px, #000 calc(100% - 150px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, transparent 72px, #000 168px, #000 calc(100% - 150px), transparent 100%); } .hero-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* 移动端隐藏原子网络画布，避免小屏背景过杂 */ @media (max-width: 1024px) { .hero-visual { display: none; } } /* ============================================ M3 PARALLAX SCROLL ============================================ */ .parallax-slow { transform: translateY(0); will-change: transform; } /* ============================================ M3 COUNTER ANIMATION ============================================ */ .stat-counter { display: inline-block; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ============================================ M3 METRICS ROW ============================================ */ .metrics-row { display: flex; justify-content: center; gap: var(--md-sp-48); flex-wrap: wrap; margin-top: var(--md-sp-40); } .metric-item { text-align: center; min-width: 120px; } .metric-item .number { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 400; letter-spacing: -0.25px; color: var(--md-sys-color-primary); line-height: 1.1; } .metric-item .label-metric { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.5px; color: var(--md-sys-color-on-surface-variant); margin-top: var(--md-sp-4); } /* ============================================ M3 LAYOUT ============================================ */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--md-sp-24); } @media (min-width: 905px) { .container { padding: 0 var(--md-sp-40); } } .section { padding: var(--md-sp-64) 0; } .section-tight { padding: var(--md-sp-48) 0; } .section-dark { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); } /* ============================================ M3 NAVIGATION BAR (Top App Bar) ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0 var(--md-sp-16); height: 64px; display: flex; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); transition: background 0.3s var(--md-easing-standard), box-shadow 0.3s var(--md-easing-standard), border-color 0.3s var(--md-easing-standard); } .nav.scrolled { background: color-mix(in srgb, var(--md-sys-color-surface-container) 85%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--md-sys-elevation-1); border-bottom-color: var(--md-sys-color-outline-variant); } .nav-inner { max-width: var(--max-width); margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; text-decoration: none; } .nav-logo img { height: 40px; width: auto; display: block; } .nav-links { display: flex; gap: var(--md-sp-8); list-style: none; align-items: center; } .nav-links a { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1px; color: var(--md-sys-color-on-surface-variant); text-decoration: none; padding: var(--md-sp-4) var(--md-sp-12); border-radius: var(--md-sys-shape-full); transition: background 0.2s var(--md-easing-standard), color 0.2s var(--md-easing-standard); position: relative; } .nav-links a:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); color: var(--md-sys-color-on-surface); } .nav-links a.active-link { color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); } .nav-links a.active-link::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 16px; height: 3px; background: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); border-radius: 3px; opacity: 1; transition: opacity 0.2s var(--md-easing-standard); } .nav-cta.active-link::after { display: none; } .nav-cta { background-color: var(--md-sys-color-primary) !important; background-image: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%) !important; color: var(--md-sys-color-on-primary) !important; padding: var(--md-sp-8) var(--md-sp-20) !important; font-weight: 500; box-shadow: 0 4px 14px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); } .nav-cta:hover { filter: brightness(0.94); box-shadow: 0 6px 18px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent); } /* Mobile nav */ .nav-mobile-btn { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: var(--md-sp-12); z-index: 101; min-width: 48px; min-height: 48px; /* M3 touch target */ align-items: center; justify-content: center; } .nav-mobile-btn span { display: block; width: 20px; height: 2px; background: var(--md-sys-color-on-surface); transition: 0.3s var(--md-easing-standard); border-radius: 1px; } .nav-mobile-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-mobile-btn.active span:nth-child(2) { opacity: 0; } .nav-mobile-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ============================================ M3 HERO SECTION ============================================ */ .hero { min-height: 100vh; padding: 0; display: flex; align-items: center; /* 底色只保留一层「正中」的极淡晕染，与正中的图形标底纹同轴， 让视觉重心落在中央；原先偏右的两处径向渐变（90% / 75% 位置） 会与图形标叠成「首屏右侧多出一团」，已一并去掉。 */ background: radial-gradient(ellipse 46% 58% at 50% 54%, color-mix(in srgb, var(--md-sys-color-primary) 9%, transparent) 0%, transparent 70%), var(--md-sys-color-surface); position: relative; overflow: hidden; } /* 右侧大光晕（.hero::after）已移除： 它与正中图形标底纹在首屏右侧叠成一团、像是「多出来一张 LOGO」， 现只保留正中的淡图形标轮廓，右侧不再有独立色团。 */ /* 首屏左侧：让光带向左渐隐，保证文案区域干净可读 */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--md-sys-color-surface) 0%, color-mix(in srgb, var(--md-sys-color-surface) 96%, transparent) 32%, color-mix(in srgb, var(--md-sys-color-surface) 70%, transparent) 50%, color-mix(in srgb, var(--md-sys-color-surface) 20%, transparent) 68%, transparent 78%); } .hero-logo-mist { /* 图形标水平居中并略微下移，作为背景呼吸感；transform 保证居中位置稳定。 */ position: absolute; left: 50%; right: auto; top: 56%; transform: translate(-50%, -50%); width: 52%; height: 88%; pointer-events: none; z-index: 1; /* 数值沿革：0.045/26px → 0.09/16px → 0.10/18px。 */ opacity: 0.1; filter: blur(18px); /* 保持 visible：图形标画布四周是透明留白，溢出部分本身不可见， 裁切反而会把模糊后的边缘切成一块方形底纹。 */ overflow: visible; } .hero-logo-mist img { width: 100%; height: 100%; object-fit: contain; object-position: center; /* 必须保留放大：logo-imageonly.png 是 1600×1600 画布， 图形本体只占中间约 667×715（四周是透明留白）。 按 1:1 缩放到盒子后图形只剩约 300px，几乎看不见； 放大 2 倍后图形约 670px，才呈现为「淡淡的 LOGO 轮廓」。 */ transform: scale(2); transform-origin: center; } .hero-grid { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 70vh; padding: 92px 0 76px; gap: var(--md-sp-40); } .hero-content { max-width: 720px; margin-left: auto; margin-right: auto; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; /* 眉标字号：由固定的 13px 改为流体字号（17–20px）， 小屏也不再被断点缩回 12px——原先「太小太小」的主因即在此。 */ font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--md-sys-color-primary); } .hero-eyebrow::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--md-sys-color-tertiary); /* 呼吸灯：光点自身明暗起伏，同时向外扩散一圈逐渐消散的光晕 （参考 Apple 设备待机指示灯的节奏，周期 2.8s，幅度克制） */ animation: eyebrowBreath 2.8s ease-in-out infinite; } @keyframes eyebrowBreath { 0%, 100% { opacity: 1; /* 第一层是常驻柔光，第二层向外扩散并逐渐消散（呼吸的那一下） */ box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-tertiary) 20%, transparent), 0 0 0 4px color-mix(in srgb, var(--md-sys-color-tertiary) 45%, transparent); } 50% { opacity: 0.8; box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-tertiary) 20%, transparent), 0 0 0 14px color-mix(in srgb, var(--md-sys-color-tertiary) 0%, transparent); } } .hero h1 { font-size: clamp(2.25rem, 5.2vw, 3.5rem); font-weight: 800; letter-spacing: -1.2px; line-height: 1.12; margin-bottom: 24px; color: var(--md-sys-color-on-surface); } .hero h1 strong { color: var(--md-sys-color-primary); font-weight: 800; } .hero h1 .gradient-blue { background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-weight: 800; letter-spacing: -1.2px; font-size: 1em; display: inline; } .mobile-break { display: none; } @media (min-width: 640px) { .hero h1 { white-space: nowrap; } } .hero-desc { margin-bottom: var(--md-sp-32); margin-left: auto; margin-right: auto; max-width: 520px; } .hero-desc-lead { margin: 0; /* 与放大的眉标保持比例：19–22px 流体字号 */ font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: 0; color: var(--md-sys-color-on-surface-variant); } .hero .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .hero .hero-actions .btn { padding: 14px 28px; font-size: 1rem; min-height: 48px; } /* ============================================ M3 BUTTONS Filled / Filled Tonal / Outlined / Text ============================================ */ .btn { display: inline-flex; align-items: center; gap: var(--md-sp-8); padding: 10px 24px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1px; line-height: 1.43; border-radius: var(--md-sys-shape-full); text-decoration: none; cursor: pointer; border: none; min-height: 40px; transition: all 0.2s var(--md-easing-standard); position: relative; overflow: hidden; } /* Filled (Primary) —— 统一为「主色 → 青色」渐变，与首屏标题/数据条同源 */ .btn-filled { background-color: var(--md-sys-color-primary); background-image: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); color: var(--md-sys-color-on-primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent); } .btn-filled:hover { filter: brightness(0.94); box-shadow: 0 10px 26px color-mix(in srgb, var(--md-sys-color-primary) 32%, transparent); } .btn-filled:active { filter: brightness(0.88); box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent); } /* Filled Tonal */ .btn-filled-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .btn-filled-tonal:hover { background: color-mix(in srgb, var(--md-sys-color-secondary-container) 88%, #000); box-shadow: var(--md-sys-elevation-1); } /* Outlined —— 描边统一为「主色 → 青色」渐变，与实底按钮、标题同一套渐变。 用 mask 只留下 1px 的边框环，内里完全透明，不遮挡背后的格子与节点。 */ .btn-outlined, .btn-outline { background: transparent; color: var(--md-sys-color-primary); border: 1px solid transparent; } .btn-outlined::after, .btn-outline::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* 悬停时填充同一渐变（并隐去那圈渐变描边，避免出现双边框） */ .btn-outlined:hover, .btn-outline:hover { background-image: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); color: var(--md-sys-color-on-primary); } .btn-outlined:hover::after, .btn-outline:hover::after { opacity: 0; } /* Text */ .btn-text { background: transparent; color: var(--md-sys-color-primary); padding: 10px 12px; } .btn-text:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } /* Legacy aliases */ .btn-primary { background-color: var(--md-sys-color-primary); background-image: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); color: var(--md-sys-color-on-primary); padding: 10px 24px; } .btn-primary:hover { filter: brightness(0.94); box-shadow: var(--md-sys-elevation-1); } /* Arrow link */ .btn-arrow { display: inline-flex; align-items: center; gap: var(--md-sp-4); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1px; color: var(--md-sys-color-primary); text-decoration: none; transition: gap 0.25s var(--md-easing-standard); cursor: pointer; padding: var(--md-sp-4) 0; } .btn-arrow:hover { gap: var(--md-sp-12); } .btn-arrow svg { width: 18px; height: 18px; transition: transform 0.25s var(--md-easing-standard); } .btn-arrow:hover svg { transform: translateX(4px); } /* Scroll hint */ .scroll-hint { position: absolute; bottom: var(--md-sp-32); left: 50%; transform: translateX(-50%); z-index: 2; animation: fadeBounce 2.5s var(--md-easing-emphasized) infinite; } /* 向下滚动提示：原先 svg 自身 opacity 0.3 与容器动画 0.3~0.7 相乘， 实际只有 0.09~0.21，几乎看不见（这不是设计意图，是两层透明度叠加）。 现在透明度只交给容器动画一层，并整体调亮调大： 24 → 28px、描边 2 → 2.4、颜色由中性灰改为品牌蓝。 */ .scroll-hint svg { width: 28px; height: 28px; opacity: 1; color: var(--md-sys-color-primary); stroke-width: 2.4; } @keyframes fadeBounce { 0%, 100% { opacity: 0.55; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.95; transform: translateX(-50%) translateY(8px); } } /* ============================================ 首页层次感：交替底色 + 极淡网格纹理 + 带宽区块 （不引入新色，全部由蓝板变量派生） ============================================ */ .band { padding: 88px 0; } .band-tinted { background: color-mix(in srgb, var(--md-sys-color-primary) 3%, var(--md-sys-color-surface)); border-top: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent); } /* 极淡网格：只在区块顶部晕开，营造"工程感"而不抢戏 */ .grid-texture { position: relative; } .grid-texture::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent) 1px, transparent 1px); background-size: 68px 68px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 10%, transparent 72%); } .band > .container { position: relative; z-index: 1; } @media (max-width: 900px) { .band { padding: 62px 0; } } /* ============================================ M3 SECTION LABELS ============================================ */ .section-label { display: flex; align-items: center; gap: var(--md-sp-12); margin-bottom: var(--md-sp-12); } .section-label span { font-family: var(--font-serif); font-size: 0.9375rem; font-weight: 600; letter-spacing: 2px; line-height: 1.33; color: var(--md-sys-color-primary); flex: 0 0 auto; } .section-label .line { flex: 1; height: 1px; background: var(--md-sys-color-outline-variant); } .products { background: var(--md-sys-color-surface-container-low); position: relative; overflow: hidden; } .products::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(11,95,255,0.05) 0%, transparent 70%); pointer-events: none; } .products::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(0,191,255,0.04) 0%, transparent 70%); pointer-events: none; } .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md-sp-16); position: relative; z-index: 1; } .product-card { background: var(--md-sys-color-surface-container-lowest); border-radius: var(--md-sys-shape-large); border: 1px solid var(--md-sys-color-outline-variant); transition: all 0.4s var(--md-easing-emphasized); position: relative; overflow: hidden; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); border-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, var(--md-sys-color-outline-variant)); } .product-card.featured { border: 1px solid var(--md-sys-color-outline-variant); position: relative; } .product-card.featured::before { display: none; } @keyframes featured-shimmer { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } .product-card .card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; display: block; clip-path: inset(0 0 10% 0); } .product-card .card-body { padding: var(--md-sp-16) var(--md-sp-16) var(--md-sp-20); } .product-card .tag { display: inline-block; font-size: 1rem; font-weight: 500; letter-spacing: 0.5px; background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--md-sp-8); } .product-card h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: 0px; margin-bottom: var(--md-sp-8); color: var(--md-sys-color-on-surface); line-height: 1.33; } .product-card p { font-size: 0.875rem; letter-spacing: 0.25px; color: var(--md-sys-color-on-surface-variant); line-height: 1.43; } /* ============================================ M3 FOUNDER SECTION ============================================ */ .founder-section { background: var(--md-sys-color-surface-container-low); } /* 说明：原 .founder-grid / .founder-credentials 等旧版「创始人栅格」样式已删除。 这些元素在改版后不再出现在任何页面中（已逐一核实 HTML 零出现）。 */ /* ============================================ M3 CONTACT SECTION ============================================ */ .contact-inner { max-width: 640px; margin: 0 auto; text-align: center; } .contact-inner h2 { color: var(--md-sys-color-on-surface); } .contact-inner .md-body-large { color: var(--md-sys-color-on-surface); opacity: 0.7; margin-bottom: var(--md-sp-24); } .contact-cards { display: flex; gap: var(--md-sp-16); justify-content: center; flex-wrap: wrap; } .contact-card { flex: 1; min-width: 180px; max-width: 240px; background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); border-radius: var(--md-sys-shape-medium); padding: var(--md-sp-16); text-align: center; transition: all 0.3s var(--md-easing-standard); cursor: default; position: relative; overflow: hidden; } .contact-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); opacity: 0; transition: opacity 0.3s var(--md-easing-standard); } .contact-card:hover::before { opacity: 1; } .contact-card:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 25%, transparent); box-shadow: var(--md-sys-elevation-2); } .contact-card .icon { font-size: 1.5rem; margin-bottom: var(--md-sp-12); opacity: 0.9; } .contact-card .label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.5px; color: var(--md-sys-color-on-surface); opacity: 0.6; margin-bottom: var(--md-sp-4); } .contact-card .value { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1px; background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; word-break: break-all; } .contact-card .hint { font-size: 0.75rem; letter-spacing: 0.4px; color: var(--md-sys-color-on-surface); opacity: 0.5; margin-top: var(--md-sp-8); } .contact-card .qr-img { margin-top: var(--md-sp-12); width: 120px; height: 120px; border-radius: var(--md-sys-shape-small); border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent); object-fit: contain; background: #fff; padding: 4px; } .contact-form { max-width: 580px; margin: 0; /* 左对齐：与卡片标题同一条起始线 */ } .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md-sp-12); margin-bottom: var(--md-sp-12); } .contact-form .form-input { flex: 1; height: 46px; padding: 12px 16px; font-size: 0.9375rem; font-family: inherit; letter-spacing: 0.2px; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container-lowest); border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); border-radius: 10px; outline: none; box-sizing: border-box; line-height: 1; transition: border-color 0.2s var(--md-easing-standard), box-shadow 0.2s var(--md-easing-standard); } .contact-form .form-input:hover { border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent); } .contact-form .form-input:focus { border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 13%, transparent); } .contact-form .form-input::placeholder { color: var(--md-sys-color-on-surface); opacity: 0.42; } .contact-form .form-textarea { width: 100%; height: auto; min-height: 80px; resize: vertical; } .contact-form select.form-input { cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235F636B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; background-color: var(--md-sys-color-surface-container-lowest); border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); } .contact-form select.form-input:invalid { color: var(--md-sys-color-on-surface); opacity: 0.4; } .contact-form select.form-input option { color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container-high); } @media (max-width: 768px) { .contact-form .form-row { grid-template-columns: 1fr; } } /* ============================================ M3 FOOTER ============================================ */ .pledge-band { position: relative; padding: var(--md-sp-40) 0; background: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent); border-top: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); text-align: center; } .pledge-band .pledge-band-text { font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 600; letter-spacing: 0.3px; line-height: 1.5; color: var(--md-sys-color-on-surface); margin-bottom: var(--md-sp-8); } .pledge-band .pledge-band-sub { font-size: 0.875rem; line-height: 1.7; color: var(--md-sys-color-on-surface-variant); } .footer { background: var(--md-sys-color-footer-surface); border-top: 1px solid color-mix(in srgb, var(--md-sys-color-footer-on-surface) 12%, transparent); padding: var(--md-sp-40) 0 var(--md-sp-24); text-align: center; color: var(--md-sys-color-footer-on-surface); } .footer-brand { font-size: 0.9375rem; letter-spacing: 0.3px; margin-bottom: var(--md-sp-8); } .footer-desc { font-size: 0.8125rem; line-height: 1.75; opacity: 0.6; max-width: 620px; margin: 0 auto var(--md-sp-20); } .footer-contact { font-size: 0.8125rem; opacity: 0.7; margin-bottom: var(--md-sp-16); } .footer-policy { font-size: 0.75rem; line-height: 1.7; opacity: 0.5; max-width: 620px; margin: 0 auto var(--md-sp-16); } .footer-contact a { color: var(--md-sys-color-footer-on-surface); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-footer-on-surface) 30%, transparent); } .footer-copy { font-size: 0.75rem; letter-spacing: 0.4px; opacity: 0.45; } .footer-copy .icp-link { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-footer-on-surface) 25%, transparent); } .footer-copy .icp-link:hover { opacity: 0.8; } .footer .footer-gradient { background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 500; } .footer a { color: var(--md-sys-color-footer-on-surface); text-decoration: none; } /* 页脚：多栏固定结构（参考商汤） */ .footer-inner { text-align: left; } .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--md-sp-48); max-width: 660px; margin: 0 auto; padding-bottom: var(--md-sp-32); } /* 页脚二维码（参考混沌页尾：右侧公众号） */ .footer-qr { justify-self: end; text-align: center; } .footer-qr img { width: 108px; height: 108px; padding: 5px; border-radius: 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--md-sys-color-footer-on-surface) 14%, transparent); object-fit: contain; display: block; margin: 0 auto; } .footer-qr-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2px; color: var(--md-sys-color-footer-on-surface); margin: 12px 0 5px; } .footer-qr-note { font-size: 0.75rem; line-height: 1.7; color: var(--md-sys-color-footer-on-surface); opacity: 0.55; white-space: nowrap; } .footer-col-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.4px; color: var(--md-sys-color-on-surface); margin-bottom: var(--md-sp-12); } .footer-links { list-style: none; margin: 0; padding: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { font-size: 0.8125rem; opacity: 0.72; transition: opacity 0.2s var(--md-easing-standard), color 0.2s var(--md-easing-standard); } .footer-links a:hover { opacity: 1; color: var(--md-sys-color-primary); } .footer-note { font-size: 0.75rem; line-height: 1.75; opacity: 0.62; margin: 0 0 10px; } .footer-bottom { border-top: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); padding-top: var(--md-sp-24); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr auto; gap: var(--md-sp-24); max-width: none; } .footer-qr { justify-self: end; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { align-items: center; } .footer-copy { font-size: 0.6875rem; } } /* 移动端首屏：hero 不再强制占满一屏，按钮竖排通栏 */ @media (max-width: 700px) { .hero { min-height: auto; padding: 104px 0 60px; } /* 关键：.hero-grid 是 flex column + align-items:center，子项默认收缩到 max-content 宽度。按钮行 max-content 约 418px，超过手机屏宽会被裁切， 这里显式给 width:100%，打破该循环，再让按钮竖排通栏。 */ .hero-content { width: 100%; } .hero .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; } .hero .hero-actions .btn { justify-content: center; width: 100%; } } /* ============================================ 承诺区（首页）：三栏卡片式，替代通栏文字带 ============================================ */ /* 承诺：编辑式分栏（顶部渐变短线 + 渐变编号，不做表格竖线） */ .promise-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 0; background: none; } .promise-item { position: relative; padding-top: 28px; transition: transform 0.4s var(--md-easing-emphasized); } /* 顶部渐变短线：替代竖线分隔，是这一栏的视觉锚点 */ .promise-item::before { content: ''; position: absolute; left: 0; top: 0; width: 52px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--md-sys-color-primary), color-mix(in srgb, var(--md-sys-color-primary) 40%, var(--md-sys-color-tertiary) 60%)); transition: width 0.5s var(--md-easing-emphasized); } .promise-item:hover { transform: translateY(-3px); } .promise-item:hover::before { width: 92px; } /* 数字类元素：等宽 + 现代（lining）字形。 ① 计数动画时数字宽度不再左右跳动； ② 衬线字体的旧式数字高低不齐（0/1 明显偏小），观感发旧，强制走现代数字。 */ .hero .proof-num, .about-stats .proof-num, .brief-fact b, .process-step .p-num, .section-label span { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; } /* 步骤卡编号式样（合作 / 服务页）。 2026-09-13：首页承诺区不再用 01/02/03（改为图标芯片）， 故 .promise-num 已下线，此处只保留 .p-num。 */ .process-step .p-num { display: block; font-family: var(--font-serif); font-size: 1.875rem; font-weight: 600; line-height: 1; letter-spacing: 0.5px; background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .promise-item h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.1px; line-height: 1.45; color: var(--md-sys-color-on-surface); margin: 0 0 10px; } .promise-item p { font-size: 0.9375rem; line-height: 1.85; color: var(--md-sys-color-on-surface-variant); margin: 0; } @media (max-width: 900px) { .promise-band { grid-template-columns: 1fr; gap: 34px; } .promise-item { padding-top: 24px; } .promise-item:hover { transform: none; } } /* ============================================ 子页通用：页面头部 / 速览标签 / 内容卡片 目的：把长段落改为要点块，提升可扫读性与设计感 ============================================ */ .page-head { padding-top: 96px; /* 底部留白：原先只有 4px，导致页首速览（上海 / 90+ / 3 个 这类） 紧贴下一区块的底色边缘，观感发挤。改为与正文区块同级的呼吸量。 */ padding-bottom: var(--md-sp-40); } .page-head .breadcrumb { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); margin-bottom: 14px; } .page-head .breadcrumb a { color: inherit; text-decoration: none; } .page-head h1 { margin-bottom: 18px; } .page-head .page-lead { font-size: 1.0625rem; line-height: 1.9; color: var(--md-sys-color-on-surface-variant); margin: 0; } .page-lead strong { color: var(--md-sys-color-on-surface); font-weight: 600; } /* ============================================ 子页页首速览：细分隔线 + 衬线数值栏 （替代胶囊标签堆叠，让页首这块区域真正被设计过） ============================================ */ .page-brief { display: flex; flex-wrap: wrap; gap: 28px 36px; margin-top: 40px; padding-top: 0; /* 顶部分隔横线已去掉（用户确认观感不佳）： 速览栏靠留白和左侧渐变条自身立住，不再需要一条通栏细线。 */ border-top: none; } .brief-fact { position: relative; display: flex; flex-direction: column; gap: 8px; padding-left: 14px; flex: 1 1 148px; /* 平分容器宽度，项数少也铺满 */ min-width: 0; } .brief-fact::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--md-sys-color-primary), color-mix(in srgb, var(--md-sys-color-tertiary) 65%, transparent)); } .brief-fact b { font-family: var(--font-serif); font-size: 1.625rem; font-weight: 600; line-height: 1; letter-spacing: 0.2px; color: var(--md-sys-color-primary); } .brief-fact span { font-size: 0.875rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); } @media (max-width: 700px) { .page-brief { gap: 20px var(--md-sp-16); } .brief-fact { flex: 1 1 calc(50% - var(--md-sp-16)); } .brief-fact b { font-size: 1.25rem; } } /* ============================================ 子页「分块」体系：把每页读成一组独立区块 （参考商汤「关于」页：松紧交替、标题归标题、内容归内容） 仅在加了 .page-blocks 的页面生效，不影响首页 / 常见问题 / 业务咨询 ============================================ */ /* 区块垂直节奏：拉起大区块之间的留白，长页不再「一堵到底」。 统一为 64px（原先 .section 88 / .band 104 两套节奏， 相邻两块相加 176 / 208px，比关于页首尾相接的 120px 明显偏大）。 现在全站 page-blocks 页面区块间距一律 64 + 64 = 128px，与关于页对齐。 */ .page-blocks .section { padding: var(--md-sp-64) 0; } .page-blocks .band { padding: var(--md-sp-64) 0; } /* 说明段宽度统一：原先限宽 780px，会让说明段比下方卡片窄一截、左右边缘对不齐。 现统一交给容器宽度决定，与卡片、标题同宽。 */ .page-blocks .page-head .page-lead, .page-blocks .section .page-lead { max-width: none; } /* 关于页首「症结」句：与上面三条现状拉开距离，独立成行 */ .page-statement { margin-top: 18px; /* 与正文卡片同宽（原先限 780px，句子会在离容器右缘还很远的地方折行） */ max-width: none; font-size: 1.0625rem; line-height: 1.9; color: var(--md-sys-color-on-surface-variant); } .page-statement strong { color: var(--md-sys-color-on-surface); font-weight: 600; } /* 区块收尾注脚：与上方卡片拉开距离 + 细分隔线收口， 形成清晰的「正文内容 → 补充说明」两层结构 */ .section-note { margin-top: 40px; padding-top: 22px; /* 与上方卡片同宽：限宽 780px 时，收口横线和左右边缘都会比卡片窄一截 */ max-width: none; border-top: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); font-size: 0.9375rem; line-height: 1.9; color: var(--md-sys-color-on-surface-variant); } .section-note strong { color: var(--md-sys-color-on-surface); font-weight: 600; } .section-note a { color: var(--md-sys-color-primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent); } @media (max-width: 900px) { .page-blocks .section { padding: var(--md-sp-48) 0; } .page-blocks .band { padding: var(--md-sp-48) 0; } } .panel-grid { display: grid; gap: 24px; } .panel-grid.two { grid-template-columns: repeat(2, 1fr); } .panel-grid.three { grid-template-columns: repeat(3, 1fr); } /* 卡片统一材质：与 .process-step 同源（白面 + 细边框 + 悬停抬升 / 描边变色）， 让全站卡片（行业卡 / 合作规则 / 步骤卡）保持同一套视觉语言。 图标卡与数字卡并列为两种"卡头"：数字卡是大号渐变衬线数字， 图标卡是同尺寸、同位置的品牌蓝线性图标（不再套蓝底渐变方块）。 */ .panel { position: relative; display: flex; flex-direction: column; background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 22px; padding: 32px 30px; transition: transform 0.4s var(--md-easing-emphasized), box-shadow 0.4s var(--md-easing-emphasized), border-color 0.4s var(--md-easing-emphasized); } .panel:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); border-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, var(--md-sys-color-outline-variant)); } /* 卡头图标：尺寸对齐 .p-num 的字号，位置对齐其外边距 */ .panel .panel-icon { display: inline-flex; align-items: center; color: var(--md-sys-color-primary); margin-bottom: 18px; } .panel .panel-icon svg { width: 28px; height: 28px; } .panel h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: 0.1px; line-height: 1.35; color: var(--md-sys-color-on-surface); margin: 0 0 10px; } .panel > p { font-size: 0.9375rem; line-height: 1.9; color: var(--md-sys-color-on-surface-variant); margin: 0 0 16px; } .panel ul { list-style: none; margin: 0; padding: 0; } .panel li { position: relative; padding-left: 20px; font-size: 0.9375rem; line-height: 1.85; color: var(--md-sys-color-on-surface-variant); margin-bottom: 11px; } .panel li:last-child { margin-bottom: 0; } .panel li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--md-sys-color-primary); opacity: 0.5; } .panel li strong { color: var(--md-sys-color-on-surface); font-weight: 600; } .panel-figure { margin-top: 24px; border-radius: 22px; overflow: hidden; line-height: 0; } .panel-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .page-figure { margin: 0; border-radius: 24px; overflow: hidden; line-height: 0; } .page-figure img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; } .note-list { list-style: none; margin: 0; padding: 0; } .note-list li { position: relative; padding-left: 22px; font-size: 0.9375rem; line-height: 1.9; color: var(--md-sys-color-on-surface-variant); margin-bottom: 12px; } .note-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--md-sys-color-primary); opacity: 0.5; } .note-list li strong { color: var(--md-sys-color-on-surface); font-weight: 600; } @media (max-width: 1100px) { .panel-grid.three { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .panel-grid.two { grid-template-columns: 1fr; gap: 24px; } .promise-item .promise-icon { margin-bottom: 12px; } .page-figure img { aspect-ratio: 16 / 10; } } @media (max-width: 768px) { .panel-grid.two, .panel-grid.three { grid-template-columns: 1fr; } .page-head { padding-top: 84px; } .panel { padding: 26px 22px; } .panel h3 { font-size: 1.25rem; } } /* 三列卡片（首页三段服务） */ .hub-cards.three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .hub-cards.three { grid-template-columns: 1fr; } } /* 紧凑能力标签：首页概览用，避免与子页卡片重复 */ .mini-tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .mini-tag { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-radius: 14px; background: var(--md-sys-color-surface-container-low); border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); font-size: 0.9375rem; font-weight: 600; color: var(--md-sys-color-primary); transition: transform 0.3s var(--md-easing-emphasized), box-shadow 0.3s var(--md-easing-emphasized); } .mini-tag:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11, 95, 255, 0.12); } .mini-tag svg { flex: 0 0 auto; } /* 卡片统一细描边：浅底上边界清晰，窄屏单列时不糊成一片 */ .scene-card, .panel, .hub-card { border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } @media (max-width: 640px) { .scene-grid { gap: 18px; } .scene-card { padding: 20px; } .promise-band { gap: 24px; } } /* ============================================ 业务咨询：两条联系路径（加微信 / 留联系方式） ============================================ */ .contact-way { padding: 30px 32px; border-radius: 22px; background: var(--md-sys-color-surface-container-low); border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent); } .contact-way + .contact-way { margin-top: 18px; } .contact-way-head { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: start; margin-bottom: 26px; } /* 带二维码的路径：编号 | 文字 | 二维码 */ .contact-way-head.has-qr { grid-template-columns: auto 1fr auto; gap: 0 34px; margin-bottom: 0; align-items: start; } .contact-way-head.has-qr .contact-way-qr { text-align: center; } /* 补充说明列表（填实左侧留白） */ .contact-way-points { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; max-width: 460px; } .contact-way-points li { position: relative; padding-left: 18px; font-size: 0.875rem; line-height: 1.75; color: var(--md-sys-color-on-surface-variant); } .contact-way-points li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--md-sys-color-primary); opacity: 0.7; } .contact-way-points li strong { color: var(--md-sys-color-on-surface); font-weight: 600; } .contact-way-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); } .contact-way-title { font-size: 1.1875rem; font-weight: 700; letter-spacing: 0.1px; color: var(--md-sys-color-on-surface); margin: 0 0 6px; } .contact-way-desc { font-size: 0.9375rem; line-height: 1.85; color: var(--md-sys-color-on-surface-variant); margin: 0; } .contact-way-desc strong { color: var(--md-sys-color-primary); font-weight: 600; } .contact-way-body { padding-left: 60px; } .contact-way .qr-img { width: 148px; height: 148px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); object-fit: contain; display: block; } .contact-way .qr-caption { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); margin: 12px 0 0; } @media (max-width: 900px) { .contact-way-head.has-qr { grid-template-columns: auto 1fr; gap: 0 18px; } .contact-way-head.has-qr .contact-way-qr { grid-column: 2; margin-top: 22px; text-align: left; } } @media (max-width: 620px) { .contact-way { padding: 26px 22px; } .contact-way-body { padding-left: 0; } .contact-way-head { gap: 0 14px; } } /* 面板图标：浅蓝底 + 蓝色线性图标（与「交付四样」同一套视觉语言） */ .panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: var(--md-sp-16); border-radius: 12px; background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); color: var(--md-sys-color-primary); flex: 0 0 auto; } /* 创始区块头部：圆形头像 + 姓名 + 职位（参考企业官网常见做法） */ .founder-head { display: flex; align-items: center; gap: 18px; margin-bottom: var(--md-sp-24); } .founder-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); background: var(--md-sys-color-surface-container-low); } .founder-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .founder-role { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); } @media (max-width: 560px) { .founder-avatar { width: 64px; height: 64px; } } /* 隐私政策等文本页 */ .legal-doc { max-width: 860px; } .legal-doc h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.1px; color: var(--md-sys-color-on-surface); margin: var(--md-sp-40) 0 12px; } .legal-doc h2:first-child { margin-top: 0; } .legal-doc p { font-size: 0.9375rem; line-height: 1.95; color: var(--md-sys-color-on-surface-variant); margin: 0 0 12px; } .legal-doc ul { margin: 0 0 14px; padding-left: 20px; list-style: none; } .legal-doc li { position: relative; font-size: 0.9375rem; line-height: 1.9; color: var(--md-sys-color-on-surface-variant); padding-left: 16px; margin-bottom: 6px; } .legal-doc li::before { content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--md-sys-color-primary); opacity: 0.7; } .legal-doc strong { color: var(--md-sys-color-on-surface); font-weight: 600; } .legal-doc a { color: var(--md-sys-color-primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent); } .legal-updated { margin-top: var(--md-sp-40) !important; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); font-size: 0.8125rem !important; color: var(--md-sys-color-on-surface-variant); } /* ============================================ 场景卡：6 个落地场景（替代扁平 tag） ============================================ */ .scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .scene-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 26px; border-radius: 22px; background: var(--md-sys-color-surface-container-low); border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent); transition: transform 0.3s var(--md-easing-emphasized), border-color 0.3s var(--md-easing-emphasized), box-shadow 0.3s var(--md-easing-emphasized); } .scene-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--md-sys-color-primary) 38%, transparent); box-shadow: var(--md-sys-elevation-2); } .scene-card .scene-head { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; letter-spacing: 0.1px; color: var(--md-sys-color-on-surface); } .scene-card .scene-head svg { flex: 0 0 auto; color: var(--md-sys-color-primary); } .scene-card .scene-from { font-size: 0.875rem; line-height: 1.8; color: var(--md-sys-color-on-surface-variant); margin: 0; } .scene-card .scene-from em { font-style: normal; font-family: var(--font-serif); font-weight: 600; color: var(--md-sys-color-primary); } @media (max-width: 1100px) { .scene-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .scene-grid { grid-template-columns: 1fr; } } /* 行业纵深引导条（与上方标签区分层级） */ .note-band { margin-top: 28px; padding: 26px 28px; border-radius: 18px; background: color-mix(in srgb, var(--md-sys-color-primary) 5%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); } .note-band .note-band-title { font-size: 1rem; font-weight: 700; letter-spacing: 0.1px; color: var(--md-sys-color-primary); margin: 0 0 10px; } .note-band p { font-size: 0.9375rem; line-height: 1.85; color: var(--md-sys-color-on-surface-variant); margin: 0 0 14px; max-width: 820px; } .note-band a { font-size: 0.875rem; font-weight: 600; color: var(--md-sys-color-primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent); } /* 交付物网格 */ .deliver-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .deliver-item { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 28px; border-radius: 22px; background: var(--md-sys-color-surface-container-low); border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent); transition: transform 0.3s var(--md-easing-emphasized), border-color 0.3s var(--md-easing-emphasized), box-shadow 0.3s var(--md-easing-emphasized); } .deliver-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--md-sys-color-primary) 38%, transparent); box-shadow: var(--md-sys-elevation-2); } .deliver-item .deliver-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 9%, transparent); } .deliver-item .deliver-name { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.1px; line-height: 1.5; color: var(--md-sys-color-on-surface); } .deliver-item .deliver-note { font-size: 0.8125rem; line-height: 1.75; color: var(--md-sys-color-on-surface-variant); margin: 0; } @media (max-width: 1100px) { .deliver-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .mini-tags { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mini-tags, .deliver-grid { grid-template-columns: 1fr; } } /* ============================================ 场景卡（首页与场景页共用）：图标 + 标题 + 一句话 ============================================ */ .scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .scene-card { display: flex; flex-direction: column; padding: 26px 26px 24px; background: var(--md-sys-color-surface-container-low); border-radius: 20px; transition: transform 0.35s var(--md-easing-emphasized), box-shadow 0.35s var(--md-easing-emphasized); } .scene-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(11, 95, 255, 0.12); } .scene-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); color: var(--md-sys-color-primary); margin-bottom: 16px; } .scene-card h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.1px; line-height: 1.45; color: var(--md-sys-color-primary); margin: 0 0 6px; } .scene-card p { font-size: 0.875rem; line-height: 1.7; color: var(--md-sys-color-on-surface-variant); margin: 0; } /* ============================================ 卡片材质统一：场景卡与交付卡对齐「步骤卡 / 行业卡」 —— 白面 + 1px 细边框 + 悬停抬升与描边变色。 刻意放在两组 .scene-card 定义之后：用同权重的单类选择器覆盖 旧的浅灰底（surface-container-low）与各自的圆角 / 阴影， 避免去改动那两处定义而牵动别的属性。 ============================================ */ .scene-card, .deliver-item { background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 22px; transition: transform 0.4s var(--md-easing-emphasized), border-color 0.4s var(--md-easing-emphasized), box-shadow 0.4s var(--md-easing-emphasized); } .scene-card:hover, .deliver-item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, var(--md-sys-color-outline-variant)); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); } @media (max-width: 1100px) { .scene-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .scene-grid { grid-template-columns: 1fr; } } /* ============================================ 首页重点引导列表（每行：图标 + 标题 + 关键信息 + 入口） 设计语言：渐变细描边卡 + 左侧数据导轨 + 右上角点阵纹理 + 悬停辉光。 ============================================ */ .guide-list { display: grid; /* 2×2 商务卡：每张卡里只有一条竖向信息流，避免原来「一行三列文字」的密集感 */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .guide-row { position: relative; /* 卡内两列：左列是图标导轨（跨满全部行），右列是标题 / 描述 / 入口。 描述行取 1fr，把入口行压到卡片底部，同排两张卡的入口自然对齐。 */ display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 22px; align-content: start; padding: 30px 32px 26px; border: 1px solid transparent; border-radius: 20px; /* 渐变细描边：底层渐变铺在 border-box 透出 1px，上层底色铺在 padding-box 盖住中间 */ background: linear-gradient(var(--md-sys-color-surface-container-lowest), var(--md-sys-color-surface-container-lowest)) padding-box, linear-gradient(115deg, color-mix(in srgb, var(--md-sys-color-primary) 36%, transparent) 0%, color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent) 46%, color-mix(in srgb, var(--md-sys-color-tertiary) 32%, transparent) 100%) border-box; text-decoration: none; color: inherit; overflow: hidden; isolation: isolate; transition: transform 0.45s var(--md-easing-emphasized), box-shadow 0.45s var(--md-easing-emphasized); } /* 左侧「数据导轨」：一条渐变竖线，悬停时加亮加粗，暗示这是一条待选的路径 */ .guide-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); opacity: 0.35; transition: opacity 0.4s var(--md-easing-standard), width 0.4s var(--md-easing-emphasized); } .guide-row:hover::before { opacity: 1; width: 4px; } /* 右上角点阵纹理：科技感来源，边缘用遮罩化开，悬停时浮现 */ .guide-row::after { content: ""; position: absolute; top: -24px; right: -18px; width: 200px; height: 150px; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--md-sys-color-primary) 26%, transparent) 1px, transparent 1.5px); background-size: 12px 12px; opacity: 0.45; -webkit-mask-image: radial-gradient(circle at 74% 26%, #000 4%, transparent 66%); mask-image: radial-gradient(circle at 74% 26%, #000 4%, transparent 66%); transition: opacity 0.45s var(--md-easing-standard); } .guide-row:hover::after { opacity: 1; } .guide-row:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow-lift); } /* 图标芯片：默认浅蓝渐变底 + 蓝色线性图标（与行业卡 / 交付卡同一套语言）， 悬停时翻转为品牌渐变实底 + 白色图标。 */ .guide-icon { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 18px; color: var(--md-sys-color-primary); background: linear-gradient(150deg, color-mix(in srgb, var(--md-sys-color-primary) 17%, transparent), color-mix(in srgb, var(--md-sys-color-tertiary) 9%, transparent)); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent); box-shadow: 0 10px 24px color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent); transition: transform 0.4s var(--md-easing-emphasized), box-shadow 0.4s var(--md-easing-emphasized), background 0.4s var(--md-easing-standard), color 0.4s var(--md-easing-standard); } .guide-row:hover .guide-icon { transform: translateY(-2px) scale(1.06); color: #fff; background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); box-shadow: 0 14px 30px color-mix(in srgb, var(--md-sys-color-primary) 34%, transparent); } .guide-row h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.1px; line-height: 1.5; color: var(--md-sys-color-on-surface); margin: 0; transition: color 0.2s var(--md-easing-standard); } .guide-row:hover h3 { color: var(--md-sys-color-primary); } .guide-row .guide-desc { font-size: 0.9375rem; line-height: 1.75; color: var(--md-sys-color-on-surface-variant); margin: 0; } .guide-row .guide-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--md-sys-color-primary); white-space: nowrap; } /* 入口箭头：独立圆形芯片，悬停时填充品牌渐变并向右推进 */ .guide-row .guide-arrow svg { box-sizing: border-box; width: 26px; height: 26px; padding: 5px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent); background: color-mix(in srgb, var(--md-sys-color-primary) 9%, transparent); transition: background 0.35s var(--md-easing-standard), border-color 0.35s var(--md-easing-standard), color 0.35s var(--md-easing-standard), transform 0.35s var(--md-easing-emphasized), box-shadow 0.35s var(--md-easing-emphasized); } .guide-row:hover .guide-arrow svg { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); transform: translateX(3px); box-shadow: 0 6px 16px color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent); } /* 卡内元素落位：图标占左列并跨满全部行，其余依次落在右列 */ .guide-icon { grid-column: 1; grid-row: 1 / -1; align-self: start; } .guide-row h3 { grid-column: 2; grid-row: 1; margin-bottom: 10px; } .guide-row .guide-desc { grid-column: 2; grid-row: 2; } /* 入口行：整幅宽 + 上分隔线，读作一张卡片的「操作区」而不是散落的链接 */ .guide-row .guide-arrow { grid-column: 2; grid-row: 3; width: 100%; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--md-sys-color-outline-variant); } @media (max-width: 900px) { .guide-list { grid-template-columns: minmax(0, 1fr); gap: 16px; } .guide-row { padding: 24px 22px; column-gap: 16px; } } /* ============================================ 首页内容卡片（四块入口） ============================================ */ #hub { padding-top: 96px; padding-bottom: 72px; } .hub-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .hub-card { display: flex; flex-direction: column; min-height: 300px; padding: 34px 30px 30px; background: var(--md-sys-color-surface-container-low); border-radius: 22px; text-decoration: none; color: inherit; transition: transform 0.35s var(--md-easing-emphasized), box-shadow 0.35s var(--md-easing-emphasized), background 0.35s var(--md-easing-standard); } .hub-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(11, 95, 255, 0.13); background: var(--md-sys-color-surface-container); } .hub-card h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.2px; line-height: 1.3; color: var(--md-sys-color-primary); margin: 0 0 18px; } .hub-card p { flex: 1; font-size: 0.9375rem; line-height: 1.9; color: var(--md-sys-color-on-surface-variant); margin: 0 0 28px; } .hub-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 8px; background-color: var(--md-sys-color-primary); background-image: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.3px; transition: filter 0.3s var(--md-easing-standard), transform 0.3s var(--md-easing-standard); } .hub-card:hover .hub-btn { filter: brightness(0.94); transform: translateX(2px); } @media (max-width: 1100px) { .hub-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { #hub { padding-top: 64px; padding-bottom: 48px; } .hub-card { min-height: auto; padding: 28px 24px 26px; } .hub-card h3 { font-size: 1.25rem; } } @media (max-width: 560px) { .hub-cards { grid-template-columns: 1fr; gap: 16px; } } /* ============================================ M3 SCROLL REVEAL ANIMATION ============================================ */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.6s var(--md-easing-emphasized), transform 0.6s var(--md-easing-emphasized); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ============================================ SUNMIZE — SCENARIO GRID ============================================ */ .scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md-sp-16); } .scenario-card { background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-large); padding: var(--md-sp-24); transition: all 0.4s var(--md-easing-emphasized); position: relative; overflow: hidden; } .scenario-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(11,95,255,0.05) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .scenario-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); border-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, var(--md-sys-color-outline-variant)); transform: translateY(-4px); } .scenario-card:hover::before { opacity: 1; } .scenario-card .s-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; margin-bottom: var(--md-sp-16); box-shadow: 0 4px 12px rgba(0, 129, 201, 0.2); position: relative; z-index: 1; } .deliverable-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--md-sp-16); } .deliverable-item { display: flex; gap: var(--md-sp-16); align-items: flex-start; padding: var(--md-sp-20) var(--md-sp-24); background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(243,243,248,0.75) 100%); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-large); transition: transform 0.3s var(--md-easing-emphasized), box-shadow 0.3s var(--md-easing-emphasized); } .deliverable-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11, 95, 255, 0.08); } .deliverable-item .d-check { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); color: #fff; box-shadow: 0 4px 12px rgba(0, 129, 201, 0.2); } .deliverable-item .d-body h3 { font-size: 1rem; font-weight: 600; color: var(--md-sys-color-on-surface); margin-bottom: 6px; } .deliverable-item .d-body p { font-size: 0.875rem; line-height: 1.7; color: var(--md-sys-color-on-surface-variant); } .scenario-card h3 { font-size: 1.0625rem; font-weight: 500; margin-bottom: var(--md-sp-8); color: var(--md-sys-color-on-surface); } .scenario-card p { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.5; } /* ============================================ SUNMIZE — PROCESS STEPS ============================================ */ .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* 同一组件用于「三段服务链路」（services）时的三列变体。 刻意用单类名（而非 .process-steps.three）：选择器权重与下方 1024 / 768 断点的 .process-steps 相同、位置更前， 这样断点规则仍能正常接管，不会因权重更高锁死在 3 列。 */ .steps-3 { grid-template-columns: repeat(3, 1fr); } .process-step { background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 22px; padding: var(--md-sp-32) var(--md-sp-24); transition: all 0.4s var(--md-easing-emphasized); position: relative; overflow: hidden; } .process-step::before { content: ''; position: absolute; bottom: -30px; left: -30px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(11,95,255,0.05) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .process-step:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); border-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, var(--md-sys-color-outline-variant)); transform: translateY(-4px); } .process-step:hover::before { opacity: 1; } /* 视觉式样见上文「卡片编号统一式样」，此处只声明本组件的间距 */ .process-step .p-num { margin-bottom: var(--md-sp-16); } /* 流程化变体（.flow）：把「并排的步骤卡」读成一条链—— 卡片背后穿一条渐变连线，卡片不透明，连线只在卡片间隙里露出来。 只作用于加了 .flow 的容器（服务页三段链路 / 合作方式四步）， 不影响其它使用 .process-steps 的位置；窄屏折行后连线失去意义，1024px 以下隐藏。 */ .process-steps.flow { position: relative; } .process-steps.flow::before { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent), color-mix(in srgb, var(--md-sys-color-tertiary) 55%, transparent)); opacity: 0.45; pointer-events: none; z-index: 0; } .process-steps.flow .process-step { z-index: 1; } @media (max-width: 1024px) { .process-steps.flow::before { display: none; } } /* 品牌图形带已撤下（用户确认「没必要」）： 服务内容 / 合作方式 / 关于盛迈斯 / 业务咨询 4 页的 SVG 连线区及其样式一并移除。 */ .process-step .p-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.3px; color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); vertical-align: middle; } .process-step h3 { font-size: 1.0625rem; font-weight: 500; margin-bottom: var(--md-sp-8); color: var(--md-sys-color-on-surface); } .process-step p { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.5; } /* ============================================ UI 收敛补充：墨为主、蓝点睛 ============================================ */ /* H2 里的单个蓝色关键词（替代整句渐变） */ .accent-blue { color: var(--md-sys-color-primary); } /* 衬线小标：分区标题上方的编辑式标签 */ .eyebrow { display: block; font-family: var(--font-serif); font-size: 0.875rem; font-weight: 600; letter-spacing: 2px; color: var(--md-sys-color-primary); margin-bottom: 12px; } /* ============================================ 创始人板块：左右分栏（身份卡 + 简介正文） 视觉语言与首屏同源：玻璃面 + 渐变细线 + 隐现细网格 ============================================ */ .founder-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--md-sp-40); align-items: start; margin-top: var(--md-sp-24); } .founder-card { position: relative; overflow: hidden; padding: var(--md-sp-32) var(--md-sp-24) var(--md-sp-24); border-radius: 24px; background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 78%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 48px color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); } /* 装饰层压在内容之下 */ .founder-card > * { position: relative; z-index: 1; } /* 顶部渐变细线 */ .founder-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 0; background: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); } /* 右上角隐现细网格：只留一角，不抢文字 */ .founder-card::after { content: ''; position: absolute; top: -30px; right: -30px; width: 200px; height: 200px; z-index: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(circle at 68% 32%, #000 0%, transparent 68%); mask-image: radial-gradient(circle at 68% 32%, #000 0%, transparent 68%); } /* 头像：渐变描边环 */ .founder-avatar-ring { display: inline-flex; flex: 0 0 auto; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); box-shadow: 0 6px 18px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent); } .founder-avatar-ring .founder-avatar { border: none; background: var(--md-sys-color-surface-container-lowest); } .founder-name { display: block; font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600; letter-spacing: 0.2px; color: var(--md-sys-color-on-surface); margin-bottom: 8px; } /* 简介正文：段间细线分隔 + 渐变短标记，避免五段连成一整块文字。 正文本身不加粗、不改色，靠结构与留白拉开层次。 */ .founder-body p { position: relative; padding-left: var(--md-sp-20); font-size: 1rem; line-height: 1.95; color: var(--md-sys-color-on-surface-variant); } .founder-body p + p { margin-top: var(--md-sp-16); padding-top: var(--md-sp-16); border-top: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .founder-body p::before { content: ''; position: absolute; left: 0; top: 0.95em; width: 8px; height: 2px; border-radius: 1px; opacity: 0.75; background: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); } /* 段间有上内边距，标记需同步下移才对得住首行文字 */ .founder-body p + p::before { top: calc(var(--md-sp-16) + 0.95em); } @media (max-width: 900px) { .founder-layout { grid-template-columns: 1fr; gap: var(--md-sp-24); } } /* 区块小标题（note-band 等）：衬线点睛 */ .note-band .note-band-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.3px; } /* ============================================ 首页收尾 CTA：浅蓝卡片（替代原来的裸标题 + 双按钮） ============================================ */ /* CTA：无框居中 + 背景同心圆装饰（科技感，不压内容） */ .cta-card { max-width: 720px; margin: 0 auto; padding: 34px 24px 6px; text-align: center; position: relative; } /* 两圈同心圆：以标题为圆心向外扩散，极淡 */ .cta-card::before, .cta-card::after { content: ""; position: absolute; left: 50%; top: 96px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); transform: translate(-50%, -50%); pointer-events: none; } .cta-card::before { width: 430px; height: 430px; } .cta-card::after { width: 660px; height: 660px; border-color: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent); } .cta-card > * { position: relative; } .cta-card h2 { display: inline-block; margin-bottom: var(--md-sp-16); font-size: clamp(1.75rem, 3.4vw, 2.25rem); background: linear-gradient(120deg, var(--md-sys-color-primary) 15%, var(--md-sys-color-tertiary) 85%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* 全站那根 h2 小横条默认左对齐；CTA 是居中版式， 照搬会变成"悬在标题左上的一根斜杠"。这里单独居中、拉长到 48px， 并在两端做淡出 + 一层品牌辉光，读作「节拍点」而不是一根杂线。 */ .cta-card h2.md-headline-large::before { width: 48px; margin: 0 auto 18px; background: linear-gradient(90deg, transparent, var(--md-sys-color-primary) 35%, var(--md-sys-color-tertiary) 100%); box-shadow: 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent); } .cta-card .md-body-large { color: var(--md-sys-color-on-surface-variant); max-width: 560px; margin: 0 auto 36px; } .cta-card .btn { padding: 15px 34px; font-size: 1rem; box-shadow: 0 8px 26px rgba(11, 95, 255, 0.26); transition: transform 0.25s var(--md-easing-emphasized), box-shadow 0.25s var(--md-easing-emphasized); } .cta-card .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(11, 95, 255, 0.38); } .cta-note { margin: 20px 0 0; font-size: 0.8125rem; letter-spacing: 0.3px; color: var(--md-sys-color-on-surface-variant); } @media (max-width: 900px) { .cta-card::before { width: 320px; height: 320px; } .cta-card::after { width: 480px; height: 480px; } } @media (max-width: 640px) { .cta-card::before, .cta-card::after { display: none; } .cta-card { padding: 12px 18px 6px; } .cta-card .btn { padding: 14px 28px; } } @media (max-width: 700px) { .cta-card { padding: 40px 24px 36px; border-radius: 22px; } } /* ============================================ 页首要点分栏：无图三栏，撑满容器（编辑式粗线分栏） ============================================ */ .figure-split-title { font-size: 1.1875rem; font-weight: 700; letter-spacing: 0.1px; line-height: 1.55; color: var(--md-sys-color-on-surface); margin: 0 0 26px; } .figure-split-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .figure-split-points li { padding: 18px 0 0; border-top: 2px solid color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent); font-size: 0.9375rem; line-height: 1.8; color: var(--md-sys-color-on-surface-variant); } .figure-split-points li strong { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.1px; color: var(--md-sys-color-on-surface); margin: 0 0 8px; } @media (max-width: 900px) { .figure-split-points { grid-template-columns: 1fr; gap: 22px; } .figure-split-points li { padding-top: 14px; } } /* ============================================ 关于页：创始人引言（衬线 + 渐变竖条）+ 身份卡内的可信度数据条 ============================================ */ .founder-pullquote { position: relative; margin: var(--md-sp-20) 0 0; padding-left: var(--md-sp-16); font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.72; letter-spacing: 0.2px; color: var(--md-sys-color-on-surface); } /* 渐变竖条取代原先整块左边框 */ .founder-pullquote::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); } /* 身份卡内的数据条：2×2 排布（卡片宽度有限），数字沿用渐变衬线 */ .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 14px; margin-top: var(--md-sp-24); padding-top: var(--md-sp-20); border-top: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); } .about-stats .proof-item { display: flex; flex-direction: column; gap: 6px; } .about-stats .proof-num { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .about-stats .proof-label { font-size: 0.8125rem; letter-spacing: 0.2px; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); } /* ============================================ FAQ ============================================ */ /* 「结论 / 关键信息」加粗：加粗 + 用正文色（正文段是次级色）， 扫读时先看到结论，再决定要不要细读。 只作用于 FAQ 答案段与首页引导卡描述，不影响其它 。 */ .faq-item p strong, .guide-desc strong { font-weight: 600; color: var(--md-sys-color-on-surface); } .faq-item { padding: 26px 0; border-bottom: 1px solid var(--md-sys-color-outline-subtle); } .faq-item:first-child { border-top: 1px solid var(--md-sys-color-outline-subtle); } /* 页面收尾与答案段落与容器右缘对齐（不再单独限宽，保证上下右边界一致） */ /* 页首三栏分栏与下文之间不留整段 section 底距 */ .section:has(> .container > .figure-split) { padding-bottom: 0; } .faq-item h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--md-sys-color-on-surface); margin-bottom: 10px; cursor: default; } /* --- 手风琴：点击标题展开 --- */ .faq-item.collapsible h3 { display: flex; align-items: center; gap: 0; cursor: pointer; margin-bottom: 0; padding: 4px 0; transition: color 0.2s var(--md-easing-standard); } .faq-item.collapsible h3:hover { color: var(--md-sys-color-primary); } .faq-item.collapsible h3::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid var(--md-sys-color-primary); border-bottom: 2px solid var(--md-sys-color-primary); transform: rotate(45deg); transition: transform 0.28s var(--md-easing-emphasized), margin 0.28s var(--md-easing-emphasized); opacity: 0.85; } .faq-item.open h3::after { transform: rotate(-135deg); margin-top: 5px; } .faq-item.collapsible > p { display: none; margin-top: var(--md-sp-12); } .faq-item.collapsible.open > p { display: block; animation: faqReveal 0.28s var(--md-easing-emphasized); } @keyframes faqReveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } .faq-item h3::before { content: "Q："; color: var(--md-sys-color-primary); } .faq-item p { font-size: 0.9375rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.85; padding-left: 26px; } .faq-item p::before { content: "A："; color: var(--md-sys-color-tertiary); font-weight: 600; } /* ============================================ M3 RESPONSIVE ============================================ */ @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .scenario-grid { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: repeat(2, 1fr); } .deliverable-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { html { scroll-padding-top: 56px; } .nav { height: 56px; padding: 0 var(--md-sp-8); } .nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--md-sys-color-surface-container-lowest); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); flex-direction: column; justify-content: center; align-items: center; gap: var(--md-sp-16); z-index: 100; } .nav-links.active { display: flex; } .nav-links a { font-size: 1.25rem; color: var(--md-sys-color-on-surface); padding: var(--md-sp-12) var(--md-sp-24); } .nav-cta { background-color: var(--md-sys-color-primary) !important; background-image: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%) !important; color: var(--md-sys-color-on-primary) !important; padding: var(--md-sp-12) var(--md-sp-32) !important; font-size: 1rem !important; } .nav-mobile-btn { display: flex; } .process-steps { grid-template-columns: 1fr; } .deliverable-grid { grid-template-columns: 1fr; } .hero-grid { padding: 80px 0 52px; gap: var(--md-sp-24); align-items: center; text-align: center; } .hero-content { max-width: 100%; margin-left: auto; margin-right: auto; } .hero-eyebrow { font-size: 1rem; margin-bottom: 18px; } .hero h1 { font-size: clamp(2rem, 7.5vw, 2.75rem); margin-bottom: var(--md-sp-24); letter-spacing: -0.8px; } .hero h1 .gradient-blue { font-size: 1em; } .hero-desc { margin-bottom: var(--md-sp-28); } .hero-desc-lead { font-size: 1rem; } .hero .hero-actions .btn { font-size: 0.9375rem; padding: 12px 22px; min-height: 44px; } .hero::before { background: linear-gradient(90deg, rgba(250,249,252,0.98) 0%, rgba(250,249,252,0.9) 45%, rgba(250,249,252,0.6) 72%, rgba(250,249,252,0) 100%); } .contact-cards { flex-direction: column; align-items: center; } .contact-card { max-width: 100%; width: 100%; } .section { padding: var(--md-sp-48) 0; } .section-tight { padding: var(--md-sp-32) 0; } } @media (max-width: 639px) { .mobile-break { display: block; } } /* ============================================ M3 MOTION — Standard & Emphasized Easing (Placed before all usage for variable resolution) ============================================ */ /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ============================================ 无障碍：用户偏好减少动效时的降级 ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; } .hero-visual canvas { display: none; } } /* ============================================ 全站视觉优化（2026-09-13）— 纯装饰层 ------------------------------------------------------------ 范围：除首页首屏（.hero）外的所有区块。 气质参考：SenseTime「关于我们 / 合作伙伴」页—— 大留白、柔和光晕、渐变细描边、卡片分层、克制的悬停微动效。 硬性约束：本区块只增加装饰（伪元素 / 背景 / 描边 / 阴影 / 图形水印 / 图片水印）， 不新增任何文字节点，也不改动任何文案。 配色：一律由既有 M3 变量派生（color-mix），深色模式自动跟随。 模块：1 变量 · 2 页首 · 3 卡片体系 · 4 图标芯片 · 5 联系路径 · 8 创始人 · 9 页脚 · 10 收尾 CTA · 11 承诺区 · 12 动效修正 （6 步骤卡节点水印、7 图形带柔光已按确认移除，编号保留占位） 注：页首速览（.page-brief）与 FAQ（.faq-item）保持原有版式， 不再套卡片外框（试作后确认原版更耐看，已回退）。 ============================================ */ /* ---------- 1. 通用层次变量 ---------- */ :root { --ui-glow-a: color-mix(in srgb, var(--md-sys-color-primary) 13%, transparent); --ui-glow-b: color-mix(in srgb, var(--md-sys-color-tertiary) 11%, transparent); --ui-hairline: color-mix(in srgb, var(--md-sys-color-primary) 15%, var(--md-sys-color-outline-variant)); --ui-shadow-soft: 0 12px 30px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); --ui-shadow-lift: 0 20px 46px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); } /* ---------- 2. 子页页首：柔和光晕 + 右上隐现细网格 ---------- */ .page-head { position: relative; } .page-head > .container { position: relative; z-index: 2; } .page-head::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 44% 46% at 12% 6%, var(--ui-glow-a), transparent 66%), radial-gradient(ellipse 38% 42% at 88% 0%, var(--ui-glow-b), transparent 68%); } .page-head::after { content: ""; position: absolute; inset: -20px 0 0; z-index: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent) 1px, transparent 1px); background-size: 58px 58px; -webkit-mask-image: radial-gradient(ellipse 58% 74% at 86% 0%, #000 2%, transparent 70%); mask-image: radial-gradient(ellipse 58% 74% at 86% 0%, #000 2%, transparent 70%); } /* ---------- 3. 卡片体系：悬停顶边渐变 + 品牌色投影 ---------- */ /* 关键：顶边渐变条必须被卡片圆角裁切，否则两头会冒出圆角之外。 故给这几类卡片统一 overflow: hidden——卡片自身的外投影不受影响，只裁内部装饰。 */ .panel, .scene-card, .deliver-item, .process-step, .contact-way { position: relative; overflow: hidden; } .panel::after, .scene-card::after, .deliver-item::after, .process-step::after, .contact-way::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); transform: scaleX(0); transform-origin: left center; transition: transform 0.5s var(--md-easing-emphasized); pointer-events: none; } .panel:hover::after, .scene-card:hover::after, .deliver-item:hover::after, .process-step:hover::after, .contact-way:hover::after { transform: scaleX(1); } .panel:hover, .scene-card:hover, .deliver-item:hover, .process-step:hover, .guide-row:hover { box-shadow: var(--ui-shadow-lift); } /* ---------- 4. 图标芯片：品牌渐变底 + 轻投影（面板卡 / 交付卡 / 场景卡） ---------- */ .panel .panel-icon, .deliver-item .deliver-icon { width: 46px; height: 46px; border-radius: 14px; color: var(--md-sys-color-primary); background: linear-gradient(150deg, color-mix(in srgb, var(--md-sys-color-primary) 17%, transparent), color-mix(in srgb, var(--md-sys-color-tertiary) 9%, transparent)); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent); box-shadow: 0 8px 20px color-mix(in srgb, var(--md-sys-color-primary) 13%, transparent); transition: transform 0.4s var(--md-easing-emphasized), box-shadow 0.4s var(--md-easing-emphasized); } .panel:hover .panel-icon, .deliver-item:hover .deliver-icon { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent); } .scene-card .scene-head svg { width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 11px; background: linear-gradient(150deg, color-mix(in srgb, var(--md-sys-color-primary) 17%, transparent), color-mix(in srgb, var(--md-sys-color-tertiary) 9%, transparent)); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent); } /* ---------- 5. 联系路径：更完整的卡片材质 ---------- */ .contact-way { background: linear-gradient(160deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 94%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-low) 90%, transparent)); border: 1px solid var(--ui-hairline); box-shadow: var(--ui-shadow-soft); transition: box-shadow 0.35s var(--md-easing-emphasized), border-color 0.35s var(--md-easing-emphasized); } .contact-way:hover { border-color: color-mix(in srgb, var(--md-sys-color-primary) 32%, var(--md-sys-color-outline-variant)); box-shadow: var(--ui-shadow-lift); } .contact-way-num { box-shadow: 0 8px 20px color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent); } /* ---------- 6.（原「步骤卡角落节点水印」已按确认移除） ---------- */ /* 首屏与正文之间：一条两端淡出的细线，给上下一个「隐约的分割感」。 不用整条实线，避免把通透感压死；中间略实、两端消散， 与首屏原子网络的收尾接得上。 */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent) 16%, color-mix(in srgb, var(--md-sys-color-outline-variant) 78%, transparent) 50%, color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent) 84%, transparent 100%); } /* ---------- 7.（原「品牌图形带柔光」已随该区块一并移除） ---------- */ /* ---------- 8. 创始人区：柔光底 + 身份卡浮起 ---------- */ .founder-section { background: radial-gradient(ellipse 46% 72% at 8% 4%, var(--ui-glow-a), transparent 62%), radial-gradient(ellipse 40% 62% at 96% 100%, var(--ui-glow-b), transparent 66%), var(--md-sys-color-surface-container-low); } .founder-card { transition: transform 0.45s var(--md-easing-emphasized), box-shadow 0.45s var(--md-easing-emphasized); } .founder-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent); } /* ---------- 9. 页脚：渐变顶线 + 品牌图形图片水印 ---------- */ .footer { position: relative; overflow: hidden; } .footer .container { position: relative; z-index: 1; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--md-sys-color-primary), var(--md-sys-color-tertiary), transparent); opacity: 0.5; } /* 2026-09-13：页脚右下角的品牌水印（.footer::after，360×360、 5% 透明的 logo）已删除——用户确认该位置不该出现 LOGO。 版权行已足够收尾，多一个淡 logo 只会和"回到顶部"按钮挤在一起。 */ /* ---------- 10. 首页收尾 CTA：底部柔光衬托同心圆 ---------- */ #cta { position: relative; overflow: hidden; } #cta > .container { position: relative; z-index: 1; } #cta::after { content: ""; position: absolute; left: 50%; bottom: -46%; width: 118%; height: 150%; transform: translateX(-50%); background: radial-gradient(ellipse 40% 44% at 50% 50%, var(--ui-glow-a), transparent 70%); pointer-events: none; } /* ---------- 11. 首页承诺区：悬停柔光 + 内容抬到装饰层之上 ---------- */ .promise-item > * { position: relative; z-index: 1; } .promise-item::after { content: ""; position: absolute; left: -14px; top: -10px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, var(--ui-glow-a), transparent 70%); opacity: 0; transition: opacity 0.4s var(--md-easing-standard); pointer-events: none; } .promise-item:hover::after { opacity: 1; } /* ---------- 12. 动效修正：悬停不受入场 stagger 延迟影响 ---------- */ .reveal-stagger.visible > *:hover { transition-delay: 0s; } /* ============================================ 服务页「能落地的 6 个场景」：卡片正文升级为三段式 ------------------------------------------------------------ 每张卡在「适合从这开始」之后补三块信息：常见卡点 / 我们怎么做 / 做完的样子。用 dl 承载，不改动标题与钩子句， 目的是让这一节从「一句话列表」变成能读完的内容。 ============================================ */ .scene-card .scene-detail { margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); } /* 三个标签（痛点 / 结果 / 交付物）视觉隐藏—— 6 张卡 × 3 个 = 18 个重复词，太吵。改为用视觉语言区分： ① 痛点 = 灰正文 + 左侧中性细线（「现在的状况」） ② 结果 = 正文色 + 左侧品牌渐变细线（「做完的样子」） ③ 交付物 = 浅品牌底圆角块 + 包裹符号 + 品牌色粗体（「拿到什么」） 标签本身仍留在 DOM 里（只是视觉隐藏），读屏、搜索引擎与 AI 摘要 依旧能读到「痛点：…／结果：…／交付物：…」，可访问性与 GEO 都不损失。 */ .scene-card .scene-detail dt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .scene-card .scene-detail dd { position: relative; margin: 0; padding-left: 14px; font-size: 0.8438rem; line-height: 1.8; color: var(--md-sys-color-on-surface-variant); } /* ① 痛点：偏青的细线（tertiary = #00BFFF / 深色模式 #67E8F9）。 原来用中性灰——等于告诉客户"这一条不重要"，而痛点恰恰是客户第一眼 要认出来的东西。现在与「结果」同族：色相偏青、明度更淡、且上浓下淡， 与下方 primary → tertiary 的渐变线既有区分，又在同一套语言里。 */ .scene-card .scene-detail dd:nth-of-type(1)::before { content: ""; position: absolute; left: 0; top: 0.45em; bottom: 0.45em; width: 2px; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-tertiary) 80%, transparent), color-mix(in srgb, var(--md-sys-color-tertiary) 48%, transparent)); } /* ② 结果：品牌渐变细线 + 正文色，明显比痛点「亮」 */ .scene-card .scene-detail dd:nth-of-type(2) { margin-top: 14px; color: var(--md-sys-color-on-surface); } .scene-card .scene-detail dd:nth-of-type(2)::before { content: ""; position: absolute; left: 0; top: 0.45em; bottom: 0.45em; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); } /* ③ 交付物：从「段落」变成「一栏实物」——浅品牌底 + 圆角 + 包裹符号 */ .scene-card .scene-detail dd:nth-of-type(3) { margin-top: 16px; padding: 10px 14px 10px 34px; border-radius: 12px; background: color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); color: var(--md-sys-color-primary); font-weight: 600; } .scene-card .scene-detail dd:nth-of-type(3)::before { content: ""; position: absolute; left: 13px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border: 1.6px solid currentColor; border-radius: 3px; opacity: 0.9; } .scene-card .scene-detail dd:nth-of-type(3)::after { content: ""; position: absolute; left: 13px; top: 50%; width: 11px; height: 1.6px; margin-top: -0.8px; background: currentColor; opacity: 0.9; } /* ============================================ 全站「垂直节奏 + 交替底色」一致性收敛（2026-09-13） ------------------------------------------------------------ 症状（用户截图）：区块之间的空隙有大有小，灰白底色的边界处理不统一。 根因有三处—— ① .band（88px）与 .section（64px）两套节奏并存，services / process 的区块同时挂着这两个类，谁生效取决于定义顺序； ② 各页用行内 style 覆盖 padding-top（56 / 48 / 40 / 64 混用）， 于是「页首 → 首区块」的间距每页都不同（104 / 128 / 88 三种）； ③ 灰底区块的上下 1px 边界线只有 .band-tinted 有，.founder-section 没有。 收敛规则（此后改垂直间距只改 --sec-pad 一处）： · 所有区块共用 --sec-pad → 相邻区块之间恒定 = 2 × --sec-pad， 「页首 → 首区块」也是 2 × --sec-pad，全站一个值； · 灰底只有一个来源（--flt-layer-alt），边界线统一； · 区块内「标题 → 导语」统一 16px（原先 18 / 16 / 14 三种）。 ============================================ */ :root { /* 2026-09-13 三次收紧：实测确认全站一致（页首 → 首区块 = 2 × --sec-pad， 且 head.bottom === sec.top，无任何多余外边距）， 因此只需继续调小这一个值：144 → 96 → 64。 */ --sec-pad: 32px; --sec-head-gap: 16px; --sec-body-gap: 20px; } @media (max-width: 900px) { :root { --sec-pad: 24px; } } /* 三种区块类收敛为同一节奏；.section-tight 保留为别名（ 它原意是"更紧"，但那正是本页要消除的不可解释差异）。 */ .band, .section, .section-tight { padding: var(--sec-pad) 0; } /* 页首底部 + 首区块顶部 = 2 × --sec-pad，与其他区块之间完全一致 */ .page-head { padding-top: 96px; padding-bottom: var(--sec-pad); } /* 灰底：全站唯一来源 + 统一的上下边界线 */ .band-tinted, .founder-section, .section-dark { background-color: var(--flt-layer-alt); border-top: 1px solid var(--flt-stroke-subtle); border-bottom: 1px solid var(--flt-stroke-subtle); } /* 区块内「标题 → 导语」：页首标题、区块标题、面包屑统一 16px */ .page-head .breadcrumb, .page-head h1, .section-head { margin-bottom: var(--sec-head-gap); } /* 子页容器（.page-blocks）里另有一套更高优先级的写死值（64 / 48）， 优先级高于上面的 .section / .band，必须在这里一并收敛， 否则子页根本不跟随 --sec-pad。 */ .page-blocks .section, .page-blocks .band { padding: var(--sec-pad) 0; } /* 区块内「导语 → 内容」：原先 faq 三处写 20px、其余为 0（靠元素自带外边距）， 统一为一个值。页首导语不受影响（.page-head 不是 .section）。 */ .section .page-lead { margin-bottom: var(--sec-body-gap); } /* ============================================ M3 校准层（2026-09-13） ------------------------------------------------------------ 依据 Material Design 3 规范对全站做一次校准。本层有意置于文件末尾： 历史上同类规则被重复定义过多次（焦点环 4 套、悬停抬升 3 套、 表单输入框 2 套），逐条回溯修改风险高，故先用一层明确的覆盖把 「已经能确定」的问题钉死，再逐步删除被覆盖的旧规则。 本层处理四项： ① 补全缺失的 M3 色彩角色：scrim / shadow / surface-dim / surface-bright ② 统一键盘焦点环——原先 4 处定义（2px ↔ 3px、offset 1 ↔ 2 ↔ 3） 互相覆盖，最终生效取决于书写顺序。 ③ 状态层（state layer）：M3 规定 hover 8% / pressed 10%， 且应当是「叠加一层 on-color」而不是只改颜色。 这里用 background-color 叠加 currentColor 实现——比 ::before 更安全 （这些组件里 ::before/::after 已被顶边渐变、柔光占用），且可过渡。 ④ 触控目标 48px（M3 最小触控目标）：页脚链接、FAQ 行原先不达标。 ============================================ */ /* ---------- ① 补全色彩角色 ---------- */ :root { --md-sys-color-scrim: rgba(0, 0, 0, 0.32); --md-sys-color-shadow: #000000; --md-sys-color-surface-dim: color-mix(in srgb, var(--md-sys-color-surface) 92%, #000); --md-sys-color-surface-bright: color-mix(in srgb, var(--md-sys-color-surface) 94%, #fff); } @media (prefers-color-scheme: dark) { :root { --md-sys-color-scrim: rgba(0, 0, 0, 0.5); --md-sys-color-surface-dim: color-mix(in srgb, var(--md-sys-color-surface) 86%, #000); --md-sys-color-surface-bright: color-mix(in srgb, var(--md-sys-color-surface) 88%, #fff); } } /* ---------- ② 键盘焦点环：全站唯一一处 ---------- */ :focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; } /* ---------- ③ 状态层：hover 8% / pressed 10%（叠加 currentColor） ---------- */ .nav-links a, .faq-item.collapsible > h3, .footer-links a, .footer .icp-link { transition: background-color var(--md-duration-short3) var(--md-easing-standard); } .nav-links a:hover, .faq-item.collapsible > h3:hover, .footer-links a:hover, .footer .icp-link:hover { background-color: color-mix(in srgb, currentColor 8%, transparent); } .nav-links a:active, .faq-item.collapsible > h3:active, .footer-links a:active, .footer .icp-link:active { background-color: color-mix(in srgb, currentColor 10%, transparent); } /* 页脚链接做成胶囊状状态层，视觉上不至于突然出现一个方块 */ .footer-links a, .footer .icp-link { border-radius: 6px; padding: 0 6px; margin: 0 -6px; } /* ---------- ④ 触控目标 ≥48px ---------- */ .footer-links a { min-height: 48px; display: inline-flex; align-items: center; } /* FAQ 行原先 padding 4px 0（约 30px 高），改为 13px 0 以满足 48px */ .faq-item.collapsible > h3 { padding: 13px 0; } /* ---------- ⑤ 按钮统一为品牌渐变（与导航「业务咨询」同款） ---------- 根因：.btn-filled 在文件中定义过两次——L908 给了 135° 渐变， L4231 又用 background 覆盖回单色，所以首屏「免费初步沟通」是纯蓝， 而导航按钮是蓝→青渐变，两者观感不一致。 这里把主按钮（filled）与导航 CTA 统一为同一条渐变； tonal / outlined / text 三种保持不带渐变——M3 的层级正是靠 「filled > tonal > outlined > text」表达主次，全做成渐变会把这个层级抹平。 */ .btn-filled, .nav-cta { background-color: var(--md-sys-color-primary); background-image: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); } /* ---------- ⑥ 首屏底层 LOGO 再虚化一档 ---------- 用 filter: opacity() 做「乘算」而非重写 opacity： 这样不依赖它原本的数值，也不会覆盖容器上已有的柔化处理。 */ .hero-logo-mist img { filter: opacity(0.72); } /* ---------- ⑦ 向下滚动提示恢复灰色 ---------- 上一轮改成了品牌蓝，用户确认还是要原来的灰。 保留「加大到 28px + 描边 2.4 + 去掉两层透明度相乘」的修正， 只把颜色退回中性灰。 */ .scroll-hint svg { color: var(--md-sys-color-on-surface-variant); } /* ---------- ⑧ 区块脚注（.section-note）改版：与 .note-band 统一 ---------- 问题一（用户截图）：左侧那条短竖条与文字没对齐。 算一下就知道为什么——正文 15px × line-height 1.9 = 28.5px 行盒， 首行中心距块顶 ≈ 22px(padding-top) + 14.25px ≈ 36.3px； 而竖条是 top:22px + height:18px，中心 31px → 差 5.3px。 悬空短条要跟首行基线对齐，本质上就是脆的：字号、行高、 padding 任何一处改动都会再次错位。 问题二（用户判断）：通栏渐变线 + 悬空短条 = 两个元素互相抢， 读起来"廉价"。 解法不是去微调那个 top 值，而是**删掉这两个元素**，改用站内本来就 已有、且更高级的那一套语言——.note-band 的「浅品牌底 + 圆角 + 内边距」。 这样同时也完成了用户要求的"统一成一致"：全站脚注此后只有一种样子。 改动覆盖 5 处：services.html(195/220/250)、process.html:116、about.html:149。 ============================================ */ .section-note { position: relative; margin-top: 28px; margin-left: 0; padding: 20px 26px; border-radius: 16px; background: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent); font-size: 0.875rem; line-height: 1.85; letter-spacing: 0.1px; color: var(--md-sys-color-on-surface-variant); } /* 取消「通栏渐变线」与「悬空短竖条」——对齐问题连根消失 */ .section-note::before, .section-note::after { display: none; } /* .note-band 收敛到同一组数值，两种脚注此后完全一致 */ .note-band { margin-top: 28px; padding: 22px 26px; border-radius: 16px; background: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent); } /* ---------- ⑨ 收尾 CTA 标题上方那条装饰短线：删除 ---------- 来源：.cta-card h2.md-headline-large::before（L2984，48px 宽的居中渐变线）。 为什么删而不是换个样式： · 这个区块已经有**同心圆背景 + 渐变标题 + 主按钮**三条视觉线索， 再加一条不携带任何信息的悬空短线，属于"为装饰而装饰"； · 参考 Fluent 2 的做法：Card / CTA 的重心由**留白与字号层级**承担， 装饰只用于传达状态或信息（badge / accent bar 都带语义）， 不用无信息量的短线、箭头这类元素； · 顺带收紧了纵向节奏——原 ::before 自带 18px 下边距，删掉后标题更贴近 卡片顶部（配合此前"空隙过大"的反馈，方向一致）。 若日后想让这里"有点东西"，建议用带语义的 M3 assist chip （例如「怎么开始」胶囊）而不是恢复短线——但当前信息已由标题和 下方那行「免费 · 不需要准备材料 · 一般 2 个工作日内联系」承担，无需重复。 */ .cta-card h2.md-headline-large::before { display: none; } /* ---------- ⑩ 区块脚注改版（第二稿，supersedes ⑧） ---------- 用户反馈：⑧的「浅底圆角框」更糟——加框等于把"一句注释"变成了 "又一个组件"，视觉重量反而不降。要求：不要框、要有科技感的高级感、 并且与上方内容贴得更近。 本稿的思路：**放弃一切容器与装饰线，改用「行内标注」的排版语言**—— · 无背景、无描边、无圆角、无通栏线； · 字号降到 13px、字距放宽到 0.3px、行高 1.8 → 读起来是"技术附注"而不是"又一段正文"，这是高级感的来源 （靠排版层级，而不是靠加装饰）； · 行首一个 6px 品牌渐变小方块作为"标注符"。 关键：它是 **inline-block**，参与文字行内布局 → 天生与首行对齐， 不存在前两版（绝对定位的悬空竖条、固定 top 的短条）那种基线错位问题。 · 与上方内容的间距 28px → 14px（用户明确要求"更贴近"）。 同时把旧的 ::before 通栏渐变线与 ::after 悬空竖条一并作废。 */ .section-note { position: relative; margin-top: 14px; margin-left: 0; padding: 0 0 0 16px; border: 0; background: none; border-radius: 0; font-size: 0.8125rem; letter-spacing: 0.3px; line-height: 1.8; color: var(--md-sys-color-on-surface-variant); } /* 行首标注符：行内小方块（不是绝对定位的悬浮条） */ .section-note::before { content: ""; position: static; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 1.5px; background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); vertical-align: 1px; } /* 旧的悬空竖条彻底作废 */ .section-note::after { display: none; } /* ---------- ⑪ 脚注排版精修：从"文字本身"做科技感 + 收紧间距 ---------- （承 ⑩，用户反馈：空隙仍大、文字缺设计感） 一是间距：.panel-grid / .deliver-grid 实测都没有 margin-bottom， 所以那处 40~50px 不是网格造成的；这里做两件事—— · 脚注自身 margin-top 14px → 10px； · 把可能叠加的多余下边距一并清零（防止"网格下边距 + 脚注上边距"叠加）。 二是文字设计感，靠三重排版手段，而不是加装饰： · 悬挂缩进：标记悬在正文外侧，多行时正文左边缘严格对齐 （这是书刊/技术文档的经典排法，比首行缩进干净）； · 等宽字体 + 放宽字距：拉丁字母与数字（AI、SOP、编号）呈等宽， 中文自动回落到系统 CJK，因此整体读起来像"工程附注"而非常规正文； · 行首渐变方块保留（inline，天生与首行对齐）。 */ :root { --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; } .panel-grid, .deliver-grid, .process-grid, .scene-grid, .contact-ways, .reveal-stagger { margin-bottom: 0; } .section-note { margin-top: 10px; padding-left: 15px; text-indent: -15px; /* 悬挂缩进：与上行的 padding-left 配对使用 */ font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.3px; line-height: 1.85; color: var(--md-sys-color-on-surface-variant); } /* 悬挂缩进会作用于首行的行内方块：用 margin-right 定位，避免它被顶到行外 */ .section-note::before { margin-right: 9px; } /* 关键词：品牌色 + 略加字距，与全站渐变文字语言呼应（不改成渐变，避免像链接） */ .section-note strong { color: var(--md-sys-color-primary); font-weight: 600; letter-spacing: 0.2px; } /* ---------- ⑫ 全站数字排版：制表数字 + 斜杠零 + 指标等宽 ---------- 对数据型站点来说，这是最划算的"科技感"来源：不改文案、不改配色， 只改字体的数字部分。三项都是 OpenType 特性，字体不支持时浏览器 直接忽略，不会报错、不会变形，因此属于零风险改动。 · tabular-nums：所有数字等宽 → 指标、编号、日期左右对齐， 数字变化时宽度不跳动（避免动效过程里"左右抖"）； · slashed zero（"zero" 1）：0 带斜杠，工程文档的经典记号； · 指标数值改用等宽族 → 读起来像"仪表读数"，而不是普通正文。 撤销方式：删除本段即可，其他样式不依赖它。 */ body { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1, "zero" 1; } /* 指标数值：页首速览（6 个 / 3 段 / 4 项）、首屏与关于页的统计数字 */ /* ---------- ⑬ 指标数值：等宽 + 微放大 + 品牌渐变（A 方案） ---------- 用户选定 A，但要求"只放大一点点"。放大用显式值而不是 em/百分比： · .brief-fact b —— 原 1.625rem（26px）→ 1.75rem（28px），+8% · .about-stats .proof-num —— 原 1.5rem（24px）→ 1.625rem（26px），+8% · .hero .proof-num —— 字号来源不确定（可能是 clamp）， 为避免把流体缩放压掉，**只换字体与渐变、不动字号**。 +8% 是"看得见但不夸张"的幅度；两处恰好也落在 M3 的相邻刻度上。 渐变与站内标题、速览数值栏共用同一条 120° 品牌渐变，语言一致。 */ .brief-fact b, .hero .proof-num, .about-stats .proof-num { font-family: var(--font-mono); letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1, "zero" 1; background-image: linear-gradient(120deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .brief-fact b { font-size: 1.75rem; } /* 26 → 28px */ .about-stats .proof-num { font-size: 1.625rem; } /* 24 → 26px */ /* ---------- ⑭ 首屏滚动提示：整体再淡一档 ---------- 用户觉得当前略抢眼，要求"更淡一点点"。 因为此前已经修掉「内层 opacity × 容器动画透明度」的相乘问题， 现在整条链路上只有**一个**旋钮——就是下面这组关键帧的透明度， 改这一处即可，不必碰尺寸（28px）与描边（2.4），那两项是上一轮 为了解决"几乎看不见"专门加上去的，反向调会退回原问题。 同时保留 translateX(-50%)：它承担居中定位，删掉会失去水平居中。 */ @keyframes fadeBounce { 0%, 100% { opacity: 0.42; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.78; transform: translateX(-50%) translateY(8px); } } /* ---------- ⑮ 「症结」段左侧的蓝色竖线：作废 ---------- 位置：about.html:82 的

。 判定依据：该

内部没有任何子元素，而全文检索 border-left 为 0 处， 所以这条线只能是伪元素（::before / ::after）画的——因此直接关掉伪元素 即可，不必去找它在哪一行定义（历史规则里同类标记被重复定义过多次）。 说明：早些时候「说明段起始标记」已针对 .page-lead 移除过（用户确认 观感不佳），但 .page-statement 漏掉了；这里一并关闭，避免同类视觉 元素在别的页面再冒出来。 */ .page-statement::before, .page-statement::after, .page-lead::before, .page-lead::after { display: none; } /* ---------- ⑯ 对比度修正 + 状态色令牌化（据设计审计 P0 / P1） ---------- 【P0 对比度】文字类渐变的终点是 tertiary #00BFFF，在浅底上的对比度约 2.1:1—— 连大号文本 3:1 的 AA 门槛都不到，属于真实的可访问性缺陷（不是我方审美问题）。 修正思路：**只收深文字渐变的终点，不动装饰性渐变**。 · 受影响的是"渐变文字"：.gradient-blue / .md-gradient-text（标题强调词）、 以及指标数值（⑥③ 那批）。它们必须满足对比度； · 不受影响的是"渐变底 + 白字"（按钮、导航 CTA）——那里是白字压在渐变上， 对比度由白字与渐变的关系决定，与本次修改无关，保持原样； · 只在**浅色模式**下修正：深色模式的底色是 #121316，原本的亮青反而对比充足， 收深会削弱科技感却没有任何收益； · 终点改为 primary 与 tertiary 的混色（约 24% 青）：既保住"蓝→青"的品牌方向， 又把对比度提到约 3.7:1，稳过大号文本的 3:1 门槛。 【P1 状态色】表单成功态原为内联硬编码 #16a34a 草绿，脱离品牌色板—— 补 M3 语义角色 success / info（含深色模式），供全局复用。 */ :root { --grad-text-end: color-mix(in srgb, var(--md-sys-color-tertiary) 24%, var(--md-sys-color-primary)); --md-sys-color-success: #1A7F37; --md-sys-color-on-success: #FFFFFF; --md-sys-color-info: #0B5FFF; } @media (prefers-color-scheme: dark) { :root { --grad-text-end: color-mix(in srgb, var(--md-sys-color-tertiary) 62%, var(--md-sys-color-primary)); --md-sys-color-success: #4ADE80; --md-sys-color-on-success: #07220F; --md-sys-color-info: #6BAAFF; } } @media (prefers-color-scheme: light) { .gradient-blue, .md-gradient-text, .brief-fact b, .hero .proof-num, .about-stats .proof-num { background-image: linear-gradient(120deg, var(--md-sys-color-primary) 0%, var(--grad-text-end) 100%); } /* 首屏标题的强调词用的是后代选择器 .hero h1 .gradient-blue（0,2,1）， 优先级高于上面那条（0,1,0）——不单独列出来的话， 最该修的首屏反而不会生效。此处与其同优先级、但位置更靠后，故可覆盖。 */ .hero h1 .gradient-blue, h1 .gradient-blue, h2 .gradient-blue, h3 .gradient-blue { background-image: linear-gradient(120deg, var(--md-sys-color-primary) 0%, var(--grad-text-end) 100%); } } /* ---------- ⑰ 多端显示测试修正（2026-09-13） ---------- 测试方式：用 iframe 在 390 / 768 / 1440 三档宽度逐页实测， 检测「横向溢出 + 越界元素 + 触控目标尺寸」。 实测结论： · 横向溢出：全站 6 页 × 3 档 = 18 次检测，**全部无溢出**； · 唯一越界元素是首页 hero 的装饰性图形标（logo-imageonly）， 它在 .hero 的裁剪范围内、不产生滚动条，属于有意出血，不动； · 真正的问题只有一类——**触控目标过小**（实测尺寸）： 页脚邮箱链接 134×18、ICP 备案链接 130×17、 面包屑「首页」26×19、首屏滚动提示 28×33， 全部低于 40px 的可用底线（M3 要求 48×48）。 修法：**只扩大透明的可点区域，不改任何文案与视觉**—— 行内文本链接用上下 padding：行内元素的 padding 不参与行高计算， 因此排版与观感完全不变，但点击/触摸区变大（这是移动端最实际的可用性修复）。 */ .footer-note a, .footer .icp-link, .page-head .breadcrumb a { padding-top: 13px; padding-bottom: 13px; } /* 滚动提示是绝对定位元素：加内边距会把它整体上移， 因此底边距补偿同样的值，保持视觉位置完全不动。 */ .scroll-hint { padding: 8px; bottom: calc(var(--md-sp-32) - 8px); } /* ---------- ⑱ 业务咨询页：移动端二维码可用性（2026-09-14） ---------- 实测（390px 宽）：二维码被渲染成 219×199，整个头部区块高 551px—— 手机上的核心问题是"**无法扫自己屏幕上的码**"，却占掉了半屏。 用户决定：**移动端继续保留二维码**（不隐藏），同时补上可用路径。 因此本层做两件事： ① 补「微信号 + 一键复制」：手机用户可搜索微信号添加， 桌面用户不想扫码时也能直接复制——两端都受益； ② 小屏（≤640px）把二维码收到 132px：二维码保留，但不再占半屏， 头部区块高度随之回落，首屏能多露出一部分表单。 微信号用等宽字体呈现——便于逐字核对与手动输入，也符合站内 "数据/标识用等宽"的既有语言（--font-mono 已在 ⑫ 定义）。 */ .contact-way .qr-id { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--md-sys-color-on-surface-variant); } .contact-way .qr-id b { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.3px; color: var(--md-sys-color-primary); user-select: all; /* 点一下即全选，方便手动复制 */ } .contact-way .qr-copy { display: inline-block; margin-top: 8px; padding: 6px 14px; min-height: 44px; /* 实测 32px 时低于 40px 可点底线，改为 44 */ border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent); color: var(--md-sys-color-primary); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background-color var(--md-duration-short3) var(--md-easing-standard); } .contact-way .qr-copy:hover { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } @media (max-width: 640px) { .contact-way-head.has-qr { gap: 0 20px; } .contact-way .qr-img { width: 132px; height: 132px; } } /* ---------- ⑲ 「团队规模」下拉框边框偏浅的正因（2026-09-14） ---------- 用户反馈：下拉框的线比另外几个输入框浅，要求与其他几个颜色一致。 排查结果：**边框颜色本来就是一致的**——所有 .form-input 共用同一条 border: 1px solid var(--md-sys-color-outline); （L4643，M3 校准后的定义） 真正的原因是 L1333 这一条： .contact-form select.form-input:invalid { opacity: 0.4; } 下拉框带 required 且默认停在占位项（value 为空），因此**始终命中 :invalid**， 于是整个控件——边框、文字、右侧箭头——被统一降到 40% 不透明度， 看上去就是"这条线比别处浅"。 它的本意只是"让占位文字显得淡一些"，但 opacity 作用于元素整体， 必然连同描边一起变淡。 正确做法：**淡化只作用于文字颜色**（M3 的占位文字本就用 on-surface-variant）， 控件整体保持不透明，描边与其它输入框完全一致。 用与源规则相同的选择器、更靠后的位置覆盖，优先级确定可胜出。 */ .contact-form select.form-input:invalid { opacity: 1; color: var(--md-sys-color-on-surface-variant); } /* 同一个问题还有第二层根因（实测发现）： 下拉框的**静置边框**并不是来自 M3 校准层那条 .contact-form .form-input { border: 1px solid var(--md-sys-color-outline); }（0,2,0） 而是一条更早的旧规则 .contact-form select.form-input（0,2,1）—— 它多了一个标签选择器，优先级更高，把下拉框钉在旧配方 border: 1px solid color-mix(in srgb, on-surface 20%, transparent) 上。这恰好解释了为什么只有**静置时**发浅： 悬停 / 聚焦的规则带伪类（0,3,0），优先级反超旧规则，所以一动鼠标就恢复正常。 修法：用同等选择器（0,2,1）+ 更靠后的位置，把下拉框的边框拉回统一令牌。 */ .contact-form select.form-input { border: 1px solid var(--md-sys-color-outline); } /* ---------- ⑳ 表单控件描边加深 + 主按钮统一（2026-09-14） ---------- 用户反馈两点： ① 「团队规模」下拉框的线仍显得浅，要求加深并与其他几个一致。 （⑲ 已修掉两处根因：整控件降透明度、旧规则优先级覆盖； 这里再把**四个控件的描边整体加深一档**： outline(#74777F) → on-surface-variant(#44474E)，边界更明确。 四个控件共用同一条规则，杜绝再跑偏。） ② 「预约初步沟通」太窄太长，且要求所有同类按钮统一为**品牌渐变**—— "不要风格那么多"。 · 尺寸：所有 .btn 统一 min-height 44px + 相同左右内边距（原来 40px 偏扁）； · 填充：filled / tonal / 表单提交统一使用与导航「业务咨询」同款的 135° 品牌渐变——此前 tonal 是纯色，正是"风格太多"的来源之一； · outlined / text 两种保留：它们承担次要操作，全做渐变成会把主次抹平。 如仍要统一，改这一处即可。 */ :root { --ui-field-stroke: var(--md-sys-color-on-surface-variant); } .contact-form .form-input, .contact-form select.form-input { border: 1px solid var(--ui-field-stroke); } /* 主按钮：统一高度与内边距 */ .btn { min-height: 44px; padding-left: var(--md-sp-24); padding-right: var(--md-sp-24); } /* 主按钮：统一品牌渐变（与导航 CTA 同款） */ .btn-filled, .btn-filled-tonal { background-color: var(--md-sys-color-primary); background-image: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); color: var(--md-sys-color-on-primary); } /* ============================================ 首页「从哪开始看」：由 2×2 卡片改为紧凑链接行 ------------------------------------------------------------ 原因：卡片的四段描述与子页内容高度重复，且占据大量首屏下方高度。 现卡片外框、图标、描述全部下线，只留四行「问题 + 入口」文字链接， 让首页的高度给到下方「能先拿到什么」的实质内容。 注：上方 .guide-* 的卡片样式（渐变描边 / 数据导轨 / 点阵纹理 / 图标芯片） 随之失效，本区块以单行覆盖为准。 ============================================ */ .guide-list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--md-sys-color-outline-variant); } .guide-row { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sp-24); min-height: 64px; padding: 18px 4px; border: 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); border-radius: 0; background: none; box-shadow: none; } /* 下线原来挂在 ::before / ::after 上的左侧导轨与右上点阵 */ .guide-row::before, .guide-row::after { display: none; } .guide-row:hover { box-shadow: none; transform: none; } .guide-row h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--md-sys-color-on-surface); } .guide-row .guide-arrow { width: auto; margin-top: 0; margin-left: auto; padding-top: 0; border-top: 0; justify-content: flex-end; color: var(--md-sys-color-primary); transition: gap var(--md-duration-medium2) var(--md-easing-emphasized); } .guide-row:hover .guide-arrow { gap: 12px; } /* ============================================ Fluent 2 强项融合层（2026-09-13 · 路径 B） ------------------------------------------------------------ 保留现有圆润品牌调性（圆角、胶囊按钮、渐变描边一律不动）， 只吸收 Fluent 2 中不依赖方形圆角的长处： B1 分层底色：用底色层级承担层次，减少静置阴影 B2 双色焦点环：品牌色外圈 + 底色内圈留白 B3 动效曲线：进入 decelerate、离开 accelerate B4 描边令牌：把散落的 7%/8%/10%/12% 收敛为三级 B5 正文行高：1.9 → 1.8，收紧节奏更耐读 ============================================ */ /* ---------- B0. Fluent 令牌 ---------- */ :root { /* B1 三层底色：canvas 最底 → layer 上浮（卡片）→ layer-alt（交替区块） */ --flt-canvas: var(--md-sys-color-surface); --flt-layer: var(--md-sys-color-surface-container-lowest); --flt-layer-alt: var(--md-sys-color-surface-container-low); /* B2 焦点环双色 */ --flt-focus-outer: var(--md-sys-color-primary); --flt-focus-inner: var(--md-sys-color-surface); /* B3 动效曲线（对应 Fluent curveDecelerateMid / curveAccelerateMid） */ --flt-curve-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1); --flt-curve-accelerate: cubic-bezier(0.7, 0, 1, 0.5); /* B4 描边三级：subtle 分区线 / default 卡片描边 / strong 强调 */ --flt-stroke-subtle: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); --flt-stroke-default: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); --flt-stroke-strong: color-mix(in srgb, var(--md-sys-color-on-surface) 24%, transparent); } /* ---------- B1. 分层底色：层次交给底色差，静置不再靠阴影 ---------- */ body { background: var(--flt-canvas); } /* 卡片一律落在 layer（纯白）上，靠 1px 描边与底色差表达边界。 注：.faq-item 是「分隔线列表」不是卡片，保持透明，不参与分层。 */ /* 注：.brief-fact（页首速览的数值列）不是卡片，必须保持透明—— 铺纯白会在文字底下露出一块白底，在浅底上反而"有颜色"、更难看。 */ .panel, .scene-card, .deliver-item, .process-step, .contact-way, .founder-card { background-color: var(--flt-layer); } .contact-way { background-image: none; } /* 交替区块落在 layer-alt，长页因此有分层而不是一堆投影 */ .band-tinted, .founder-section { background-color: var(--flt-layer-alt); } /* 去掉两处静置投影（原先卡片"浮"着，与底色分层重复表达层次） */ .brief-fact, .contact-way { box-shadow: none; } /* 创始人卡保留一点点高度，但不再靠大投影压场 */ .founder-card { box-shadow: 0 2px 8px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } /* ---------- B2. 双色焦点环：外圈品牌色 + 内圈底色留白 ---------- */ :focus-visible { outline: 2px solid var(--flt-focus-outer); outline-offset: 1px; box-shadow: 0 0 0 1px var(--flt-focus-inner); } /* ---------- B3. 动效曲线：进入减速、离开加速 ---------- */ .btn, .nav-links a, .guide-row, .guide-row .guide-arrow, .scene-card, .deliver-item, .panel, .process-step, .faq-item, .brief-fact, .contact-way, .founder-card, .mini-tag, .hub-card { transition-timing-function: var(--flt-curve-accelerate); } .btn:hover, .nav-links a:hover, .guide-row:hover, .guide-row:hover .guide-arrow, .scene-card:hover, .deliver-item:hover, .panel:hover, .process-step:hover, .faq-item:hover, .brief-fact:hover, .contact-way:hover, .founder-card:hover, .mini-tag:hover, .hub-card:hover { transition-timing-function: var(--flt-curve-decelerate); } /* ---------- B4. 描边令牌收敛（三级，替换散落的 7/8/10/12%） ---------- */ .band-tinted, .contact-way, .guide-row, .faq-item { border-color: var(--flt-stroke-subtle); } .panel, .scene-card, .deliver-item, .process-step, .brief-fact, .founder-body p + p, .footer-bottom, .about-stats { border-color: var(--flt-stroke-default); } .nav.scrolled, .section-note, .note-list, .page-brief { border-color: var(--flt-stroke-subtle); } /* 悬停时描边升到"强调"级，反馈更明确 */ .panel:hover, .scene-card:hover, .deliver-item:hover, .process-step:hover, .contact-way:hover, .brief-fact:hover, .faq-item:hover { border-color: var(--flt-stroke-strong); } /* ---------- B5. 正文行高收敛：1.9 → 1.8 ---------- */ .page-lead, .page-head .page-lead, .page-blocks .page-head .page-lead, .page-blocks .section .page-lead { line-height: 1.8; } .page-statement, .section-note { line-height: 1.8; } .panel li, .note-list li, .founder-body p, .contact-way-points li { line-height: 1.8; } .faq-item p { line-height: 1.78; } /* ============================================ 首页区块头：标题左、入口右同排 ------------------------------------------------------------ 原首页每个区块都是「section-label 小标签 + 大标题 + 说明 + 内容 + 注脚」， 五件套重复三遍，加上顶部导航区块，整体显得碎。 现在区块头为「标题（+ 可选说明）」，与服务页的 「标题 + 说明 + 内容」节奏对齐，首页只留三层：场景 / 承诺 / 沟通。 2026-09-13：场景区入口「看全部 6 个场景」下移为卡片下方的主按钮， 区块头不再放右对齐小字链接，故 .section-more 一并下线。 ============================================ */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--md-sp-12) var(--md-sp-24); flex-wrap: wrap; margin-bottom: var(--md-sp-16); } .section-head h2 { margin-bottom: 0; } @media (max-width: 700px) { .section-head { align-items: flex-start; } } /* ============================================ 正文语块的设计化（2026-09-13） ------------------------------------------------------------ 问题：章节说明段、收尾注脚、要点列表此前都是「裸段落 + 一条灰线」， 没有任何视觉锚点，是整页最缺设计感的地方。 做法：不套卡片、不改左右对齐，只加三样轻量手段—— ① 标记槽：在文字左侧的留白里放一个品牌色标记， 用负外边距抵消缩进，所以文字左缘仍与上方卡片严丝合缝对齐； ② 分隔线：由实心灰线改为品牌渐变淡出线； ③ 层级：字号 / 行高 / 字距按 M3 type scale 收紧。 ============================================ */ /* ---------- ① 章节说明段（.page-lead）：起始方块锚点 ---------- */ .page-lead, .page-head .page-lead, .page-blocks .page-head .page-lead, .page-blocks .section .page-lead { /* 说明段不再加起始方块标记（用户确认观感不佳）； 设计感交由排版本身承担：字号/行高/字距 + 自然断行。 */ font-size: 1.0625rem; line-height: 1.9; letter-spacing: 0.2px; color: var(--md-sys-color-on-surface-variant); text-wrap: pretty; } .page-lead strong, .page-head .page-lead strong { color: var(--md-sys-color-on-surface); font-weight: 600; } /* ---------- ② 收尾注脚（.section-note）：渐变淡出线 + 竖条标记 ---------- */ .section-note { position: relative; margin-top: 40px; padding: 22px 0 0 22px; margin-left: -22px; border-top: none; /* 顶线改由 ::before 绘制 */ font-size: 0.9375rem; line-height: 1.9; letter-spacing: 0.15px; color: var(--md-sys-color-on-surface-variant); } /* 顶部分隔线：品牌色起笔、向右淡出，比整条灰线更像「设计过的收口」 */ .section-note::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--md-sys-color-primary) 0%, color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent) 18%, color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent) 46%, transparent 100%); } /* 左侧竖条标记：与说明段的方块不同形，用来区分「正文说明」与「补充注脚」 */ .section-note::after { content: ""; position: absolute; left: 0; top: 22px; width: 3px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); } /* ---------- ③ 强调句（.page-statement）：全高渐变轨 ---------- */ .page-statement { position: relative; padding-left: 22px; margin-left: -22px; line-height: 1.9; } .page-statement::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); } /* ---------- ④ 要点列表（.note-list）：标记升级为品牌渐变圆点 ---------- */ .note-list { margin-top: 4px; } .note-list li { padding-left: 20px; /* 与其他语块共用 20px 标记槽，左缘对齐一致 */ line-height: 1.95; margin-bottom: 14px; } .note-list li::before { top: 0.72em; left: 0; width: 7px; height: 7px; opacity: 1; background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 9%, transparent); } /* ---------- ⑤ 首页承诺区：短线升级为「品牌起笔 + 长距淡出」的通栏细线 ---------- */ .promise-item::before { left: 0; right: 0; top: 0; width: auto; height: 1px; border-radius: 0; background: linear-gradient(90deg, var(--md-sys-color-primary) 0, var(--md-sys-color-primary) 5%, color-mix(in srgb, var(--md-sys-color-outline-variant) 85%, transparent) 26%, color-mix(in srgb, var(--md-sys-color-outline-variant) 30%, transparent) 100%); } .promise-item:hover::before { width: auto; } /* 取消原来的加宽动画，改由悬停辉光承担 */ /* ============================================ M3 对齐层（2026-09-13） ------------------------------------------------------------ 依据 Material Design 3 基线规范，把系统在「交互反馈 / 排版比例 / 组件规格」三方面拉回 M3 的正式定义。只做规范化，不再新增装饰。 A 状态层 · B 排版 · C 按钮 · D 芯片 · E 文本框 · F 顶栏 · G 触达与动效 ============================================ */ /* ---------- A. M3 状态层（State layer）---------- M3 规定：hover 8% / focus 10% / pressed 10% / dragged 16%， 由组件前景色（currentColor）叠加而成，而不是改色或位移。 这里统一用 ::before 铺一层纯色，opacity 由状态驱动。 */ :root { --md-state-hover: 0.08; --md-state-focus: 0.1; --md-state-pressed: 0.1; --md-state-dragged: 0.16; --md-state-disabled-content: 0.38; --md-state-disabled-container: 0.12; } .btn::before, .nav-links a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-duration-short3) var(--md-easing-standard); } .btn:hover::before, .nav-links a:hover::before { opacity: var(--md-state-hover); } .btn:focus-visible::before, .nav-links a:focus-visible::before { opacity: var(--md-state-focus); } .btn:active::before, .nav-links a:active::before { opacity: var(--md-state-pressed); } .btn:disabled::before { opacity: 0; } /* 禁用态：M3 = 内容 38% / 容器 12% */ .btn:disabled { opacity: 1; cursor: not-allowed; box-shadow: none; filter: none; background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-state-disabled-container), transparent); background-image: none; color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-state-disabled-content), transparent); } /* 顶栏导航项：状态层取代原先的 8% 底色改色（同一语义，交给统一机制） */ .nav-links a:hover { background: transparent; color: var(--md-sys-color-on-surface); } .nav-links a.active-link:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); } /* ---------- B. 排版：按 M3 type scale 精确对齐 ---------- 规范来源（sp→px）：Display L 57/64/-0.25 · Headline L 32/40/0 · Headline M 28/36/0 · Title L 22/28/0 · Title M 16/24/+0.15 · Label L 14/20/+0.1 · Body L 16/24/+0.5 · Body M 14/20/+0.25。 说明：中文标题在 400 字重下偏细，汉字按可读性保留 600（西文数字仍是 400 基线）， 这是本系统对 M3 的唯一有意偏离，字距/行高一律按规范。 */ .md-display-large { line-height: 1.12; letter-spacing: -0.25px; } .md-headline-large { line-height: 1.25; /* 32/40 */ letter-spacing: 0; /* M3：Headline 系列字距为 0 */ } .md-headline-medium { line-height: 1.29; /* 28/36 */ letter-spacing: 0; } .md-title-large { line-height: 1.27; letter-spacing: 0; } /* 22/28 */ .md-title-medium { line-height: 1.5; letter-spacing: 0.15px; } /* 16/24 */ .md-headline-large, .md-headline-medium, .md-title-large { font-weight: 600; } /* 中文可读性保留（见上） */ /* 页面主标题：M3 用 Display/Headline 承载主张，统一走 Headline Large 的比例 */ h1.md-headline-large { line-height: 1.16; letter-spacing: -0.8px; } /* 眉标 / 全大写小标签：M3 Label Small 11/16/+0.5 */ .section-label span, .eyebrow { font-size: 0.6875rem; line-height: 1.45; letter-spacing: 0.5px; } /* 分隔线统一为 M3 Divider：1dp outline-variant（原先混用 10%~12% on-surface） */ .section-note, .page-brief, .about-stats, .footer-bottom { border-top-color: var(--md-sys-color-outline-variant); } .faq-item { border-bottom-color: var(--md-sys-color-outline-variant); } .faq-item:first-child { border-top-color: var(--md-sys-color-outline-variant); } /* ---------- C. 按钮：对齐 M3 规格 ---------- M3 按钮：高 40dp、圆角 full、label-large（14/500/+0.1）； Filled 静置无阴影，Elevated 静置 level-1、悬停 level-2。 原实现用 filter: brightness() 做悬停/按下，属于色彩 hack，已移除， 统一交给上面的状态层；阴影只保留 M3 允许的层级。 */ .btn { min-height: 40px; padding: 0 var(--md-sp-24); border-radius: var(--md-sys-shape-full); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1px; line-height: 20px; transition: box-shadow var(--md-duration-medium2) var(--md-easing-standard), background-color var(--md-duration-medium2) var(--md-easing-standard); } .btn-filled { background-color: var(--md-sys-color-primary); background-image: none; /* M3 Filled 为纯色容器 */ color: var(--md-sys-color-on-primary); box-shadow: none; /* M3 Filled 静置无高度 */ } .btn-filled:hover { box-shadow: var(--md-sys-elevation-1); } .btn-filled:active { box-shadow: none; } .btn-filled-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); box-shadow: none; } .btn-filled-tonal:hover { background: var(--md-sys-color-secondary-container); box-shadow: var(--md-sys-elevation-1); } .btn-outlined, .btn-outline { box-shadow: none; } /* M3 Outlined：1dp outline 描边（原先为品牌渐变描边环） */ .btn-outlined::after, .btn-outline::after { background: none; border: 1px solid var(--md-sys-color-outline); -webkit-mask: none; mask: none; padding: 0; } .btn-outlined:hover::after, .btn-outline:hover::after { border-color: var(--md-sys-color-primary); } .btn-text { padding: 0 var(--md-sp-12); } /* ---------- D. 芯片：对齐 M3 Assist chip ---------- M3 chip：高 32dp、圆角 8dp、label-large、1dp outline-variant 描边。 */ .process-step .p-tag { height: 32px; display: inline-flex; align-items: center; padding: 0 var(--md-sp-12); margin-left: var(--md-sp-12); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-small); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1px; color: var(--md-sys-color-primary); background: transparent; } /* ---------- E. 文本框：对齐 M3 Outlined text field ---------- M3 规格：容器高 56dp、圆角 extra-small(4dp)、1dp outline 描边； 悬停描边转 on-surface，聚焦描边升为 2dp 且转 primary。 */ .contact-form .form-input { height: 56px; padding: 0 var(--md-sp-16); font-size: 1rem; /* M3 Body Large 16/24 */ line-height: 24px; letter-spacing: 0.5px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-extra-small); background: transparent; /* M3 outlined 容器不带填充 */ transition: border-color var(--md-duration-short3) var(--md-easing-standard), box-shadow var(--md-duration-short3) var(--md-easing-standard); } .contact-form .form-input:hover { border-color: var(--md-sys-color-on-surface); } /* 聚焦：1dp 边框 + 1dp 外环 = 视觉 2dp，与 M3「描边升为 2dp」等价且不引起位移 */ .contact-form .form-input:focus { border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 1px var(--md-sys-color-primary); } .contact-form .form-input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; } /* 错误态：M3 规定描边转 error，且仅在用户交互后才提示（:user-invalid 语义） */ .contact-form .form-input:user-invalid, .contact-form .form-input:user-invalid:focus { border-color: var(--md-sys-color-error); box-shadow: 0 0 0 1px var(--md-sys-color-error); } .contact-form .form-textarea { height: auto; min-height: 112px; padding: var(--md-sp-16); resize: vertical; } .contact-form select.form-input { background-color: transparent; background-position: right 16px center; padding-right: 48px; } /* ---------- F. 顶栏：对齐 M3 Small top app bar ---------- M3 规定：静置无高度、无分隔线；滚动后容器转 surface-container 并升到 level-2。 */ .nav { border-bottom-color: transparent; } .nav.scrolled { background: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-2); border-bottom-color: var(--md-sys-color-outline-variant); } .nav-links a { display: inline-flex; align-items: center; min-height: 40px; /* 指针设备 40dp；触屏见下方 48dp 规则 */ padding: 0 var(--md-sp-12); } .nav-links a.active-link::after { background: var(--md-sys-color-primary); } /* ---------- G. 触达尺寸 / 焦点 / 动效 ---------- */ /* M3：触屏目标 ≥48dp。指针设备不受影响（媒体查询只在粗指针下生效）。 */ @media (pointer: coarse) { .nav-links a, .faq-item.collapsible h3, .footer a, .guide-row .guide-arrow svg { min-height: 48px; } .nav-links a { padding: 0 var(--md-sp-16); } } /* 触屏点击去抖：消除 300ms 延迟并抑制高亮块 */ a, button, .faq-item.collapsible h3 { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* M3 焦点环：3dp primary（已被 :focus-visible 定义），补上偏移与圆角跟随 */ :focus-visible { outline-width: 3px; outline-offset: 2px; } /* 收尾 CTA 的按钮：2026-09-13 起与首屏完全对齐—— 原先这里单独去掉了彩色投影，导致同一页两个主按钮的投影不一致。 现在统一走 .btn-filled 的品牌投影，不再单独覆盖。 */ /* 移动端导航：折叠菜单里恢复 M3 的纵向留白（避免桌面规则覆盖断点规则） */ @media (max-width: 768px) { .nav-links a { min-height: 48px; padding: var(--md-sp-12) var(--md-sp-24); } } /* 动效统一走 M3 duration token（原实现散落 0.2s/0.25s/0.3s 等魔数） */ .nav, .nav-links a, .btn, .guide-row, .guide-row::before, .guide-row::after, .guide-icon, .guide-row .guide-arrow svg, .faq-item { transition-duration: var(--md-duration-medium2); transition-timing-function: var(--md-easing-standard); } /* ============================================ 首页「先看清这四件事」导览卡（2026-09-13 重做） ------------------------------------------------------------ 为什么改：原先首页列 6 个场景，点进去又只是摘要——等于让客户 白点一次。真正有用的是按他的阅读顺序把他送到那四页。 所以这一区改为四张「带结论」的导览卡，每张末尾一个「了解更多」。 与其他页最大的区别：这一区刻意「去框」。 子页一律是「白面卡片 + 描边 + 投影」；首页只留一条底部分隔线， 靠留白、图片和列距分区，避免整站都是同一种块状观感。 版式（参考内容型卡片的成熟结构）： 标签条（可扫读的规格）+ 标题 + 结论段 + 入口 + 右侧一张方图。 两点刻意的偏离参考： ① 用 2 列而不是 4 列——窄卡塞图会把文字压到只剩一百多像素； ② 四张图用场景实拍（画面里有人），再统一叠一层品牌淡染—— 参考里的四色是四个产品的 logo，各自独立；我们只有一个品牌。 动效（首页专属，子页没有这一套）： ① --mx / --my 由 app.js 写入 → 悬停时光标追光（无矩形底，故不产生「框」） ② --tilt-x / --tilt-y 由 app.js 写入 → 卡片轻微 3D 倾斜 ③ 底边一条渐变扫光，悬停时才跑 ④ 悬停时右图轻微放大 触屏 / 减少动效：app.js 不写变量，卡片退化为静态 + 常规悬停。 注：本区块有意放在文件末尾——需覆盖更早的卡片与 .reveal 定义。 ============================================ */ .hub-entries { display: grid; /* 2×2：借「图在右」的宽卡结构；列距 48px 承担分区，不靠外框 */ grid-template-columns: repeat(2, minmax(0, 1fr)); /* 列距只给 12px：其余靠格子内边距（左右各 18px）补足到 48px 视觉间距。 好处是「光斑的画布」比内容大一圈，内容与光斑边缘之间才有间隙。 */ gap: 10px 12px; /* 负外边距抵消内边距：内容左右缘仍与容器对齐 */ margin: 28px -18px 0; } .hub-entry { position: relative; /* 兜底裁切：现在光是「淡入淡出」而不是撞到边缘被切，正常不会再露到卡外 */ overflow: hidden; display: flex; /* 顶对齐：同一行两张卡的标签、标题、图片都在一条线上 */ align-items: flex-start; gap: 22px; padding: 12px 18px 22px; text-decoration: none; color: inherit; /* 首页彻底「去框」：没有底色、没有描边、没有投影，连底部那条细细的分隔线也不留。 分区完全交给留白与 48px 列距；于是「平时屏幕上什么都不多」， 只有鼠标停在某一格时，才有一条光沿着它的底边走过。 */ /* 3D 倾斜：角度由 JS 按指针位置写入；未启用时保持 0 */ transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-style: preserve-3d; transition: transform 0.2s var(--md-easing-standard); } /* 文字列 */ .hub-entry-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* 标签条：顶部 chips，给每张卡一个可扫读的「规格」。 min-height 固定住整条的高度：四张卡即使有的 chip 折行， 标题也仍落在同一条基线上（对齐是这一区的硬要求）。 */ .hub-entry-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 28px; margin-bottom: 14px; } /* 每个 chip：品牌渐变底 + 微内高光 + 品牌淡投影， 前面带一个渐变小点，三个 chip 读起来像同一套「规格刻度」。 */ .hub-entry-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--md-sys-shape-full); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1px; line-height: 1.4; white-space: nowrap; color: var(--md-sys-color-primary); background-image: linear-gradient(135deg, color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent), color-mix(in srgb, var(--md-sys-color-tertiary) 7%, transparent)); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), 0 2px 6px color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent); transition: border-color 0.3s var(--md-easing-standard), box-shadow 0.3s var(--md-easing-standard); } .hub-entry-tags span::before { content: ""; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); } .hub-entry:hover .hub-entry-tags span { border-color: color-mix(in srgb, var(--md-sys-color-primary) 38%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), 0 4px 12px color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent); } /* 右侧方图：实拍照片 + 一层品牌淡染（把四张不同出处的图统一到同一色调）。 用实拍而不用抽象图形：画面里有人、有场景，客户更容易对号入座。 */ .hub-entry-fig { position: relative; flex: 0 0 160px; width: 160px; height: 160px; border-radius: 16px; overflow: hidden; background: var(--md-sys-color-surface-container-low); box-shadow: 0 10px 26px color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); transition: transform 0.45s var(--md-easing-emphasized); } .hub-entry-fig img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 品牌淡染 + 右上一点高光：四张图统一色调，又不至于糊成一片蓝 */ .hub-entry-fig::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 76% 14%, color-mix(in srgb, #fff 28%, transparent), transparent 58%), linear-gradient(150deg, color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent), color-mix(in srgb, var(--md-sys-color-tertiary) 7%, transparent)); pointer-events: none; } .hub-entry:hover .hub-entry-fig { transform: scale(1.035) rotate(-1deg); } .hub-entry:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 3px; } /* ① 光标追光：只有跟着指针的柔光斑，不铺整块的浅色底。 原先那层矩形底（负 inset 外扩的圆角块）会被读成「白框」， 而它只比内容大 16/20px，文字、图片和按钮就显得贴着边。 去掉矩形只留光斑，就没有「框」和「贴边」这回事了。 */ .hub-entry::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent), transparent 72%); opacity: 0; transition: opacity 0.4s var(--md-easing-standard); pointer-events: none; } .hub-entry:hover::before { opacity: 1; } /* ③ 底边扫光：一段光贴着格子底边从左滑到右。 三点都是按反馈重做的： ① 行程只在本格宽度内（0% → 66%）——不撞到边缘，就不会出现「被切掉」的硬边； ② 动画自带淡入淡出（头尾 opacity:0），所以是「淡化消失」，不是戛然而止； ③ 开关用 filter 而不是 opacity——动画要独占 opacity， 悬停时 filter 由 0 到 1，两者相乘：平时绝对看不见，移开自然淡出。 */ .hub-entry::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--md-sys-color-primary), var(--md-sys-color-tertiary), transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent); filter: opacity(0); animation: hubSweep 3.6s linear infinite; transition: filter 0.35s var(--md-easing-standard); pointer-events: none; } .hub-entry:hover::after { filter: opacity(1); } @keyframes hubSweep { 0% { transform: translateX(0); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(66%); opacity: 0; } } /* 卡片内容抬到装饰层之上 */ .hub-entry > * { position: relative; z-index: 1; } .hub-entry h3 { margin: 0 0 12px; font-size: 1.1875rem; font-weight: 700; letter-spacing: 0.1px; color: var(--md-sys-color-on-surface); transition: color 0.35s var(--md-easing-standard); } .hub-entry:hover h3 { color: var(--md-sys-color-primary); } .hub-entry p { margin: 0 0 22px; font-size: 0.9375rem; line-height: 1.85; color: var(--md-sys-color-on-surface-variant); } /* 次级入口胶囊（首页「了解更多」+ FAQ 段末的「看…→」）： 与导航「业务咨询」、主按钮共用同一套渐变（135° 主色 → 青色）。 margin-top:auto 让同一行四张卡的按钮底对齐。 */ .hub-entry-more, .faq-cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 9px 18px; border-radius: var(--md-sys-shape-full); font-size: 0.875rem; font-weight: 600; text-decoration: none; color: var(--md-sys-color-on-primary); background-color: var(--md-sys-color-primary); background-image: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%); border: 1px solid transparent; box-shadow: 0 6px 16px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent); transition: filter 0.3s var(--md-easing-standard), box-shadow 0.3s var(--md-easing-standard), gap 0.3s var(--md-easing-standard); } .hub-entry-more:hover, .faq-cta:hover { gap: 12px; filter: brightness(0.94); box-shadow: 0 10px 24px color-mix(in srgb, var(--md-sys-color-primary) 32%, transparent); } /* FAQ 的入口跟在段末：与文字留一点间距，不要贴住 */ .faq-cta { margin: 6px 0 0 6px; } /* ---------- 承诺区：编号 → 图标芯片 ---------- */ .promise-item .promise-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; color: var(--md-sys-color-primary); background: linear-gradient(150deg, color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent), color-mix(in srgb, var(--md-sys-color-tertiary) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); box-shadow: 0 10px 24px color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent); transition: transform 0.45s var(--md-easing-emphasized), box-shadow 0.45s var(--md-easing-emphasized); } .promise-item:hover .promise-icon { transform: translateY(-3px); box-shadow: 0 14px 30px color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent); } /* 顶部分栏短线：由实心小段改为向两端淡出，与图标芯片搭配更利落 */ .promise-item::before { width: 76px; background: linear-gradient(90deg, var(--md-sys-color-primary), color-mix(in srgb, var(--md-sys-color-tertiary) 70%, transparent) 55%, transparent); } .promise-item:hover::before { width: 124px; } @media (max-width: 900px) { .promise-item .promise-icon { margin-bottom: 12px; } } @media (max-width: 980px) { /* 单列：卡片变宽，图仍在右，文字有足够裕量 */ .hub-entries { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .hub-entries { gap: 24px; } .hub-entry { gap: 16px; padding: 0 0 18px; } .hub-entry-fig { flex-basis: 108px; width: 108px; height: 108px; } .hub-entry h3 { font-size: 1.125rem; } } /* ============================================ 行内链接统一配色（2026-09-13） ------------------------------------------------------------ 正文句子里的链接不做成胶囊（会打断阅读），改用与按钮同一套 「主色 → 青色」渐变下划线，悬停加粗。 注：.faq-cta / .btn 已升级为胶囊按钮，必须排除， 否则会被这条文本规则拉回文字样式。 ============================================ */ .section-note a:not(.btn):not(.faq-cta), .note-band a:not(.btn):not(.faq-cta), .contact-way-desc a:not(.btn):not(.faq-cta), .page-lead a:not(.btn):not(.faq-cta), .faq-item p a:not(.btn):not(.faq-cta) { color: var(--md-sys-color-primary); text-decoration: none; border-bottom: 0; padding-bottom: 2px; background-image: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); background-repeat: no-repeat; background-size: 100% 1.5px; background-position: 0 100%; transition: background-size 0.25s var(--md-easing-standard); } .section-note a:not(.btn):not(.faq-cta):hover, .note-band a:not(.btn):not(.faq-cta):hover, .contact-way-desc a:not(.btn):not(.faq-cta):hover, .page-lead a:not(.btn):not(.faq-cta):hover, .faq-item p a:not(.btn):not(.faq-cta):hover { background-size: 100% 2px; } /* 21. form stroke + primary buttons unify (2026-09-14). Same declarations exist 4+ times in this file, so position alone cannot win; higher specificity (duplicated class/tag) is used here instead of !important. */ .contact-form input.form-input,.contact-form select.form-input,.contact-form textarea.form-input{border:1px solid var(--md-sys-color-on-surface-variant);} .btn.btn-filled,.btn.btn-filled-tonal{min-height:44px;background-image:linear-gradient(135deg,var(--md-sys-color-primary),var(--md-sys-color-tertiary));color:var(--md-sys-color-on-primary);} /* 22. FAQ answer CTA: from filled pill button to an inline emphasis link (2026-09-14). A filled gradient pill inside an answer paragraph reads too heavy; the answer already has emphasis, the entry point only needs to be a clear link. Keeps brand color + underline, drops fill/pill/shadow. Scoped to .faq-item so other usages are untouched. */ .faq-item .faq-cta{display:inline;margin:0 0 0 4px;padding:0;border:0;border-radius:0;background:none;background-image:none;box-shadow:none;font:inherit;font-weight:600;filter:none;color:var(--md-sys-color-primary);border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-primary) 40%,transparent);} .faq-item .faq-cta:hover{filter:none;box-shadow:none;gap:0;border-bottom-color:var(--md-sys-color-primary);} /* ---------- 23. 表单隐私告知（2026-09-14） ---------- 表单收集手机号与公司名，此前全页没有用途告知——《个人信息保护法》要求以显著 方式、清晰易懂的语言真实准确完整地告知处理目的与方式。补一行即可， 属合规必需、不涉业务判断。 文案刻意保守：只声明"用于本次沟通 / 不作他用 / 不提供第三方"， 不含任何效果或服务承诺，与站内既有的"不承诺"基调一致。 */ .form-privacy { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.7; color: var(--md-sys-color-on-surface-variant); opacity: 0.9; } /* ---------- 24. FAQ 答案可读性：行宽 + 段间距（2026-09-14） ---------- 用户要求「拆分、优化显示结构」。结构拆分需要改标记（下一步逐条做）， 这里先做两件不依赖标记、立即可见的改善： ① 限制行宽到 68ch 以内：答案目前跑在约 900px 的容器里，中文一行 能到 60 字以上，换行位置难以预判，扫读时容易串行； ② 统一段间距与行高，为下一步「拆成多段 / 多要点」提供稳定的阅读节奏 （拆完之后不需再调间距）。 */ .faq-item p { /* 2026-09-14 修正：先前设的 max-width: 68ch 反而让中文换行过早。 原因：ch 以拉丁字体的“0”字宽为基准，而中文字宽约为它的 2 倍， 68ch 只装得下约 34 个汉字，于是右侧留下大片空白。 中文行宽若需限制应改用 em（1em ≈ 1 个汉字），本次直接交回容器宽度。 */ line-height: 1.85; } .faq-item p + p { margin-top: 12px; } /* 25. remove the underline under the ICP filing link (2026-09-14). User reported a stray short line under the copyright row; source is border-bottom on .footer .icp-link. Higher specificity is used because this property is also declared on .footer-copy .icp-link. */ .footer .footer-copy .icp-link{border-bottom:0;padding-bottom:0;} /* 26. footer alignment pass (2026-09-14). User feedback: contact column and QR column do not line up vertically, and asked for a nicer look. Fixes: (1) force both columns to align on the top edge; (2) slightly reduce QR so the right column height gets closer to the left one; (3) tighten caption margins so the caption reads as one block with the QR; (4) unify the contact column line rhythm. Conservative on purpose - a real redesign of this block needs a visual review. */ .footer-grid{align-items:start;} .footer-qr img{width:96px;height:96px;} .footer-qr-title{margin:10px 0 4px;} .footer-qr-note{white-space:normal;max-width:180px;margin-left:auto;margin-right:auto;} .footer-contact{margin-bottom:0;} .footer-contact p{margin:0 0 6px;line-height:1.75;} /* 27. footer QR note: restore single line + bottom-align the contact column (2026-09-14). The previous max-width:180px forced the QR note onto two lines - reverted. For the requested bottom alignment, .footer-contact is aligned to the end of its grid row so its last line sits level with the QR caption's last line. Other columns are unaffected. */ .footer-qr-note{white-space:nowrap;max-width:none;} .footer-contact{align-self:end;} /* 28. footer brand logo (2026-09-14). Adds the brand lockup above the contact column; per user decision the footer gains a brand anchor. Sized 112px wide; height auto so any aspect ratio of the asset is respected. */ .footer-logo{display:block;width:112px;height:auto;margin:0 0 12px;} /* 29. footer: bottom-align the QR column (2026-09-14). After the brand logo was added, the contact column became the tallest one, so align-self:end on it had no effect and the two columns ended 28px apart. Aligning the shorter QR column to the row end makes both bottom edges coincide, which is what the user asked for. */ .footer-qr{align-self:end;} /* 30. footer columns: revert the previous align-self attempt (2026-09-14). Measuring showed align-self:end aligns to the GRID ROW bottom, which is taller than either column, pushing the QR block 105px below the contact column - a visible regression. Reverted to normal flow so both columns share the same top edge. The remaining height gap is closed by making the QR slightly larger and tightening the contact line rhythm instead. */ .footer-qr{align-self:auto;} .footer-contact{align-self:auto;} .footer-qr img{width:116px;height:116px;} .footer-contact p{margin:0 0 4px;} /* 31. footer logo sits LEFT of the contact title (2026-09-14). User expects the brand mark beside the title, not stacked above it. Both are block siblings inside the footer column, so making them inline-block puts them on one line with vertical centering. The logo asset has generous internal white padding, so it is also enlarged a bit to stay visible. */ .footer-logo{display:inline-block;width:132px;height:auto;margin:0 10px 0 0;vertical-align:middle;} .footer-col-title{display:inline-block;vertical-align:middle;margin-bottom:10px;} /* 32. Card photos read as hazy rather than crisp. The old .hub-entry-fig::after laid a 28% white radial plus a 15%/7% blue-cyan wash across the whole photo. The photos are already brand-neutral, so the white highlight is dropped and the tone wash reduced to a barely-there 5%/3%. */ .hub-entry-fig::after{background:linear-gradient(150deg,color-mix(in srgb, var(--md-sys-color-primary) 5%, transparent),color-mix(in srgb, var(--md-sys-color-tertiary) 3%, transparent));} /* 33. Footer columns align to the bottom edge (2026-09-14). The grid was top-aligned, so the left column (logo row + 3 lines) and the QR column ended at different heights. align-items:end makes both bottoms sit on one baseline; the trailing margins of each column's last child are zeroed so the alignment is exact, not 5px off. */ .footer-grid{align-items:end;} .footer-qr-title{margin-bottom:0;} .footer-note:last-child{margin-bottom:0;} /* 34. Footer title promoted to a real heading (2026-09-14), borrowing the reference footer. The reference leads with a large section title plus a short accent underline, which gives the footer a clear entry point; ours was a 13px label floating next to the logo. The QR border also moves from neutral grey to a brand tint so the logo and the QR read as one brand family. NOTE: unlike the reference, our footer stays BOTTOM-aligned (user request, 2026-09-14), not top-aligned. */ .footer-col-title{font-size:1.5rem;line-height:1.2;letter-spacing:0;font-weight:600;margin-bottom:10px;} .footer-col-title::after{content:'';display:block;width:40px;height:3px;border-radius:2px;margin-top:10px;background:linear-gradient(90deg,var(--md-sys-color-primary),var(--md-sys-color-tertiary));} .footer-qr img{border-color:color-mix(in srgb, var(--md-sys-color-primary) 38%, transparent);} /* 35. Footer columns align at BOTH ends (2026-09-14). User requires the two columns to line up top AND bottom. Bottom-alignment alone cannot do that when the columns differ in height, so the grid now stretches both columns to one height and the QR column distributes its two children (code image, caption) to the two ends. The left column keeps its natural block flow, so the logo stays on the same line as the section title. */ .footer-grid{align-items:stretch;} .footer-qr{display:flex;flex-direction:column;justify-content:space-between;} /* 36. Footer logo sizing after the transparent-padding crop (2026-09-14). logo-shuban.png is 94.4% transparent: the real mark is only 591x729 inside a 2134x1268 canvas, so at width:132px the visible mark was about 37px wide - effectively invisible. The asset is now cropped to the mark (logo-shuban-tight.png), which is portrait (0.81:1), so the footer logo is sized by HEIGHT instead of width. */ .footer-logo{width:auto;height:104px;} /* 37. Footer logo becomes a LEFT column for the whole contact module (2026-09-14). Previously the logo was inline-block so only the title sat beside it; the following block paragraphs started at the left margin and OVERLAPPED the 120px-tall logo. A float reserves space for every following line box, so the title AND all three info lines now sit to the right of the logo, while flow-root keeps the float from escaping the column. Logo height is raised to 120px so it visually matches the height of the four-line text block beside it. */ .footer-grid > div:first-child{display:flow-root;} .footer-logo{float:left;width:auto;height:120px;margin:0 16px 0 0;} .footer-col-title{display:block;vertical-align:baseline;} /* 38. QR caption line-height matched to the footer note (2026-09-14). Both columns are stretched to one height, but their last lines still ended 12px apart because the note uses line-height 1.75 while the caption used ~1.2 - the ink bottoms sit at different places even when the boxes match. Giving the caption the same line-height makes the two bottom edges coincide visually. */ .footer-qr-title{line-height:1.75;} /* 39. Logo height set to equalise the two footer columns (2026-09-14). Stretching boxes to one height does NOT align the last lines when the contents differ: the left column measured 135px (text block) while the QR column measured 155px (120px code box + caption), leaving 13px of slack under the left column. The logo is the natural height driver of the left column, so it is raised to 155px - exactly the QR column height - which makes both columns 155px and both top and bottom edges land on 0px. Side effect: the brand mark is now clearly visible, matching the area the user circled. */ .footer-logo{height:155px;} /* 40. Footer column heights matched for real (2026-09-14). Corrected maths: it is the TEXT block and the QR column that must end on the same line, so the height driver must be the text block (135px), not the logo. Previous attempt set the logo to 155px, which pushed the last text line 19px above the QR caption. Now the logo is 135px - the exact height of the four-line text block beside it - and the QR image is trimmed from 108px to 88px, which brings the QR column (88 + 10 padding + 2 border + 12 margin + caption line) to 134.75px against the left column's 135px. */ .footer-logo{height:135px;} .footer-qr img{width:88px;height:88px;} /* 41. Accent bar placed under the title text, and logo ink-aligned with the module (2026-09-14). Two faults: (1) the ::after accent bar is a BLOCK box, so it was laid out from the column's left edge - i.e. behind the floated logo - while the title text was pushed right by the float. Giving the title a margin-left equal to the float's footprint (103px logo + 16px gap) makes the title's block box start where its text starts, so the bar lands directly under the words. (2) The text block measures 135px BOX but only about 126px of INK (line-height 1.75 adds ~4.5px of leading above and below), so the 135px logo stuck out at both ends; the logo is now 126px with a 4px top offset, which lines up with the first line's ink top and the last line's ink bottom. Mobile: the logo stacks above instead. */ .footer-col-title{margin-left:119px;} .footer-logo{float:left;width:auto;height:126px;margin:4px 16px 0 0;} @media (max-width:640px){.footer-col-title{margin-left:0;} .footer-logo{float:none;display:block;margin:0 0 10px;}} /* 42. Final logo/module alignment trim (2026-09-14). Measured after rule 41: the accent bar now sits exactly under the title (delta 0px), but the logo sat 8px low at the top and stopped 3px short at the bottom. The module's text spans 137px of range box, so the logo is set to 132px with no top offset: its top lands 4px under the title's range top and its bottom 1px past the last line's range bottom. Title margin-left is kept equal to the float footprint (108px logo + 16px gap) so the accent bar stays flush with the title text. */ .footer-logo{height:132px;margin:0 16px 0 0;} .footer-col-title{margin-left:124px;} /* 43. Logo centred on the module's middle line + larger QR (2026-09-14). The user now wants: (a) the logo slightly smaller and aligned on the CENTRE line of the contact module rather than stretched top-to-bottom, and (b) a larger QR image. A float cannot be vertically centred, so the left column becomes a 2-column grid: the logo spans all four text rows and align-self:center puts its middle exactly on the module's middle. Text items are placed in column 2, which also removes the earlier margin-left patch (the grid column boundary defines where the text starts, so the accent bar stays flush with the title automatically). QR is enlarged from 88px to 112px and both footer columns are centred against each other. */ .footer-grid{align-items:center;} .footer-grid > div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;} .footer-logo{float:none;display:block;grid-column:1;grid-row:1 / span 4;align-self:center;width:auto;height:118px;margin:0;} .footer-col-title{display:block;grid-column:2;margin-left:0;} .footer-note{grid-column:2;} .footer-qr img{width:112px;height:112px;} @media (max-width:640px){.footer-grid > div:first-child{display:block;} .footer-logo{display:block;grid-row:auto;margin:0 0 10px;}} /* 44. Logo/text gap widened from 16px to 26px (2026-09-14) - user found the logo sitting too close to the contact module. Only the grid column-gap changes: the accent bar and text column follow automatically because the grid boundary defines where the text starts. */ .footer-grid > div:first-child{column-gap:26px;} /* 45. Footer content spread to 80% of the container (2026-09-14). The user wants the left group (logo + contact module) pushed left and the QR pushed right, with 10% of empty space on each side measured against the bottom rule. The bottom rule spans the .container content width, and the grid is its sibling, so setting the grid to 80% (centred) yields exactly 10% on each side. Below 900px the grid returns to full width so small screens keep usable space. */ .footer-grid{max-width:80%;} @media (max-width:900px){.footer-grid{max-width:100%;}} /* 46. Logo/text gap widened again 26px -> 36px (2026-09-14). The logo must not move, only the contact module shifts right - which is exactly what column-gap does in this grid, since the logo is anchored to column 1. */ .footer-grid > div:first-child{column-gap:36px;} /* 49. Hero block given room to breathe (2026-09-14). Diagnosis from the screenshot: the headline ran at line-height 1.12, which is tuned for Latin capitals and reads as cramped for CJK glyphs; it also carried -1.2px letter-spacing, which squeezes Chinese characters rather than tightening Latin. The value line (diagnose / pilot / subscribe) was painted in on-surface-variant, i.e. styled as secondary information, so it could not carry the company promise. Fixes: line-height 1.22 and letter-spacing -0.4px on the headline (global, safe at every size); the value line is promoted to on-surface; and the vertical rhythm between eyebrow, headline, value line and button is opened up on desktop only, so the mobile media queries keep their own tighter values. */ .hero h1{line-height:1.22;letter-spacing:-0.4px;} .hero h1 .gradient-blue{letter-spacing:-0.4px;} .hero-desc-lead{color:var(--md-sys-color-on-surface);} @media (min-width:901px){.hero-grid{padding:100px 0 84px;} .hero-eyebrow{margin-bottom:26px;} .hero h1{margin-bottom:30px;} .hero-desc{margin-bottom:40px;} .hero .hero-actions .btn{font-size:1rem;padding:15px 32px;}} /* 50. Scroll hint removed (2026-09-14): the user does not want it. The element is deleted from the markup; this rule stays as a guard in case a page is restored from an older copy. */ .scroll-hint{display:none !important;} /* 51. Generic retrieval terms restored beside the scene names (2026-09-14). GEO audit finding: the six scene names are four-character brand coinages (固化流程 / 智控项目 / ...) that neither users nor AI search for, so the site body contained 知识库 0 times and HR 0 times while the titles still advertised them. The generic term is added as a small, visually subordinate suffix rather than an inline parenthesis so the card header keeps its rhythm - the brand name stays the headline, the searchable term rides along. */ .scene-alias{font-size:.72em;font-weight:500;color:var(--md-sys-color-on-surface-variant);margin-left:9px;letter-spacing:0;} /* 52. The A: label now appears only on the first paragraph of each answer (2026-09-14). It was a ::before on every paragraph, so a five-paragraph answer repeated 'A:' five times - pure noise, and it visually chopped one answer into five separate replies. The label stays on the first paragraph, which is what marks the block as an answer; the rest read as continuation of the same answer. */ .faq-item > p:not(:first-of-type)::before{visibility:hidden;} /* 53. Scene card body text raised to the site standard (2026-09-14). The cards were the only place running body copy at 13.5px (0.8438rem) while every other page uses 15px (0.9375rem, e.g. .faq-item p), so the scenes page read noticeably smaller and denser than the rest of the site. The body text, the delivery block and the generic-term suffix are all lifted to match. */ .scene-card .scene-detail dd{font-size:.9375rem;} .scene-alias{font-size:.8em;} .scene-card .scene-detail dd:nth-of-type(3){font-size:.9375rem;}