/* ===== self-hosted fonts (subset, 2026-06-12) — 替代 Google Fonts 外链 ===== */ @font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/noto-sans-sc-300.woff2) format('woff2');} @font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-sans-sc-400.woff2) format('woff2');} @font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-sc-500.woff2) format('woff2');} @font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/noto-sans-sc-700.woff2) format('woff2');} @font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/noto-sans-sc-900.woff2) format('woff2');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/space-grotesk-300.woff2) format('woff2');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-grotesk-400.woff2) format('woff2');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/space-grotesk-500.woff2) format('woff2');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/space-grotesk-600.woff2) format('woff2');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-grotesk-700.woff2) format('woff2');} /* ===== self-hosted fonts end ===== */ /* ===================================================================== westOeast (东西互动) — Shared stylesheet (new design system) Editorial cross-cultural style: black + blue + lime accent Fonts: Noto Sans SC (CJK body) + GoogleSansFlex_9pt (Latin display) ===================================================================== */ /* ---------- Design tokens ---------- */ :root { --blue: #016AFF; --blue-mid: #1E75FF; --blue-dark: #2343FF; --blue-deep: #171717; --green: #67D7CA; --accent: #C8F457; --white: #FFFFFF; --off-white: #F4F3EF; --gray-light: #E8E7E2; --gray-mid: #888780; --gray-dark: #444; --black: #0D0D0D; --card-dark: #111111; --card-dark-hover: #161616; /* 间距体系:全站版块纵向节奏统一引用这两个 */ --sp-section: 96px; /* 标准内容版块 */ --sp-section-lg: 128px; /* CTA / 强调版块 */ } /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: clip; } html { scrollbar-gutter: stable both-edges; } body { font-family: 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--black); color: var(--white); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ===================================================================== NAV (shared across all pages) ===================================================================== */ nav.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 20px 60px; background: rgba(9, 31, 107, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); transition: padding 0.2s, background 0.2s; } nav.site-nav.scrolled { padding: 14px 60px; background: rgba(9,31,107,0.95); } .nav-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo-mark { height: 21px; width: auto; flex-shrink: 0; display: block; } .nav-logo-svg { height: 20px; width: auto; display: block; } .nav-logo-word { display: none; } .nav-logo-o { display: none; } .nav-logo-svg { height: 22px; width: auto; display: block; } .nav-logo sup { display: none; } @media (max-width: 640px) { .nav-logo { gap: 8px; font-size: 20px; } .nav-logo-mark { height: 26px; } } /* [V9] logo 动效:W 标静止(无阴影光),右侧文字青柠柔光扫过,每 10s 循环。 site.js 的 setupNavLogo() 会把 替换成内联结构(白字 + 青柠扫光遮罩层) */ .nav-logo-wrap { position: relative; display: inline-block; height: 22px; line-height: 0; } .nav-logo-svg-inline { height: 22px; width: auto; display: block; } .nav-sweep { position: absolute; inset: 0; pointer-events: none; } .nav-sweep svg { width: 100%; height: 100%; display: block; } .nav-sweep-band { animation: navSweep 8.7s ease-in-out infinite; } @keyframes navSweep { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(1820px); } } /* [V10] 绿 O 与扫光同步:扫光启动时 O 的青柠绿隐掉,扫光结束后隐现,循环 */ .nav-o-green { position: absolute; inset: 0; pointer-events: none; } .nav-o-green svg { width: 100%; height: 100%; display: block; } .nav-o-green-path { opacity: 1; animation: navOGreen 8.7s ease-in-out infinite; } @keyframes navOGreen { 0% { opacity: 1; } 6% { opacity: 0; } 60% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .nav-sweep-band { animation: none; } .nav-o-green-path { animation: none; opacity: 1; } } .nav-links { display: flex; gap: 36px; align-items: center; } .nav-links a { font-size: 14px; color: rgba(255,255,255,0.7); letter-spacing: 0.5px; transition: color 0.2s; position: relative; display: inline-flex; align-items: center; line-height: 1; } .nav-links a:hover { color: var(--accent); } .nav-links a.active { color: var(--white); } /* EN 顶级导航全大写(中文无 case,故仅影响英文;下拉子项/移动端不受影响) */ .lang-en .nav-links > a, .lang-en .nav-links > .nav-dropdown > .nav-parent { text-transform: uppercase; letter-spacing: 0.8px; } .lang-en .nav-dropdown-menu { min-width: 640px; padding: 12px 24px; } .nav-dropdown { position: relative; display: inline-flex; align-items: center; } .nav-dropdown > a::after { content: '\203A'; /* › 收起态朝右 */ font-size: 15px; opacity: 0.55; font-weight: 400; margin-left: 6px; line-height: 1; display: inline-block; transform: rotate(0deg); transition: transform 0.22s ease, opacity 0.2s ease; } .nav-dropdown:hover > a::after, .nav-dropdown.open > a::after { transform: rotate(90deg); /* 展开态转 90° 朝下 ⌄ */ opacity: 0.85; } /* [Lili 11] JS 注入的手机抽屉折叠按钮,桌面默认隐藏(仅 ≤860 抽屉里显示) */ .nav-acc-toggle { display: none; } .nav-dropdown-menu { position: absolute; top: 100%; left: -16px; background: rgba(9,31,107,0.97); border: 1px solid rgba(255,255,255,0.08); padding: 12px; margin-top: 12px; min-width: 520px; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 8px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s; border-radius: 8px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav-dropdown-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-dropdown-menu a { display: block; padding: 8px 20px; font-size: 13px; color: rgba(255,255,255,0.75); white-space: nowrap; } .nav-dropdown-menu a:hover { background: rgba(196,240,42,0.08); color: var(--accent); } .nav-dropdown-framework, .nav-dropdown-divider { grid-column: 1 / -1; } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-lang { display: flex; gap: 8px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 12px; letter-spacing: 1px; } .nav-lang a { color: rgba(255,255,255,0.5); padding: 4px 6px; transition: color 0.2s; } .nav-lang a.active { color: var(--accent); } .nav-lang a:hover { color: var(--white); } .nav-cta { background: var(--accent); color: var(--black); padding: 10px 24px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; transition: transform 0.2s; } .nav-cta:hover { transform: translateY(-1px); } .hamburger { display: none; background: none; border: 0; padding: 10px; width: 44px; height: 44px; flex-direction: column; gap: 5px; justify-content: center; } .hamburger span { display: block; height: 2px; width: 24px; background: var(--white); transition: transform 0.2s, opacity 0.2s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===================================================================== BUTTONS ===================================================================== */ .btn-primary { background: var(--accent); color: var(--black); padding: 18px 56px; font-size: 15px; font-weight: 700; border-radius: 8px; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 12px; border: none; transition: transform 0.2s, box-shadow 0.2s; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,240,42,0.3); } .btn-secondary { background: var(--accent); color: var(--black); padding: 18px 56px; font-size: 15px; font-weight: 700; border-radius: 8px; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 12px; border: none; transition: transform 0.2s, box-shadow 0.2s; } .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,240,42,0.3); } .btn-outline { border: 1px solid rgba(255,255,255,0.3); color: var(--white); padding: 14px 32px; font-size: 14px; font-weight: 600; border-radius: 8px; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 8px; transition: border-color 0.2s, color 0.2s, background 0.2s; } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .star .btn-outline { background: var(--blue); color: var(--white); border-color: var(--blue); padding: 18px 56px; font-size: 15px; font-weight: 700; letter-spacing: 1px; } .star .btn-outline:hover { background: #1E75FF; border-color: #1E75FF; color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(3,106,255,0.3); } /* ===================================================================== SECTION COMMONS ===================================================================== */ section { padding: var(--sp-section) 60px; } .section-label { font-size: 11px; letter-spacing: 4px; color: #666; text-transform: uppercase; margin-bottom: 16px; font-weight: 500; } /* [Lili 回归修复] GEO hero 是蓝底,基础 .section-label 的 #666 灰字在蓝底上看不清 → PC 端提亮为 lime(手机端 @media≤860 已是 lime,此处补 PC,两端一致) */ .page-geo .geo-redesign-hero .section-label { color: var(--accent); } .section-title { font-size: clamp(32px, 4vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: 0; } .section-title .en { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; display: block; font-size: 0.55em; font-weight: 300; letter-spacing: 4px; color: var(--gray-mid); margin-top: 12px; } .container { max-width: 1320px; margin: 0 auto; } /* ===================================================================== HOME — HERO ===================================================================== */ .hero { min-height: 100vh; background: #016aff url("data:image/svg+xml,") no-repeat center center / cover; position: relative; overflow: hidden; display: flex; align-items: center; padding: 120px 60px 80px; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hero-tri { display: none; } .hero-tri-1 { display: none; } .hero-tri-2 { display: none; } .hero-tri-3 { display: none; } .hero-content { position: relative; z-index: 2; max-width: 800px; margin-top: -60px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); padding: 6px 16px; border-radius: 8px; margin-bottom: 32px; } .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .hero-badge span { font-size: 13px; letter-spacing: 1px; color: rgba(255,255,255,0.85); } .hero-title { font-size: clamp(56px, 8vw, 100px); font-weight: 900; line-height: 1.0; letter-spacing: 0; margin-bottom: 32px; color: var(--white); margin-left: -2px; } .hero-title .en { display: none; } .hero-title .accent-word { color: var(--accent); } /* hero 标题用文字 logo SVG 时的尺寸,接近原 hero-title 字号 */ .hero-title .hero-title-logo { display: block; height: clamp(56px, 8vw, 100px); width: auto; max-width: 100%; } .hero-desc { font-size: 18px; line-height: 1.8; color: rgba(255,255,255,0.8); max-width: 560px; margin-bottom: 48px; font-weight: 300; } .hero-actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 16px; } .hero-right { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 2; align-items: flex-end; } .hero-tagline { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: clamp(10px, 1vw, 13px); font-weight: 400; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 16px; text-align: right; } .hero-stat { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); padding: 20px 28px; min-width: 160px; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .hero-stat:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.24); } .hero-stat-num { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; } .hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; } /* ===================================================================== ARROW DIVIDER ===================================================================== */ .arrow-divider { background: var(--blue-deep); display: flex; justify-content: center; align-items: center; padding: 32px 24px; gap: 24px; flex-wrap: wrap; } .arr-sym { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 28px; font-weight: 700; color: var(--accent); opacity: 0.9; } .arr-text { font-size: 13px; letter-spacing: 4px; color: rgba(255,255,255,0.4); text-transform: uppercase; } /* ===================================================================== HOME — ABOUT block ===================================================================== */ .about { background: var(--off-white); color: var(--black); padding-top: 188px; padding-bottom: 188px; } .about-inner { display: grid; grid-template-columns: 1.32fr 1fr; gap: 64px; align-items: start; max-width: 1320px; margin: 0 auto; } .about .section-title .en { color: var(--gray-mid); } .about-desc { font-size: 17px; line-height: 1.9; color: #444; margin-top: 28px; font-weight: 300; } .about-right { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; } .about-pill { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; border-left: 3px solid var(--blue); background: white; } .about-pill-icon { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 22px; font-weight: 700; color: var(--blue); min-width: 32px; } .about-pill-text { font-size: 15px; line-height: 1.6; color: #333; } .about-pill-text strong { display: block; color: var(--black); font-size: 19px; line-height: 1.35; margin-bottom: 5px; } /* ===================================================================== HOME — SERVICES 10-card grid ===================================================================== */ .services { background: #171717; } .services-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; gap: 40px; flex-wrap: wrap; max-width: 1320px; margin-left: auto; margin-right: auto; } .services-header p, .services-header .services-desc { font-size: 16px; } .services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(255,255,255,0.06); max-width: 1320px; margin: 0 auto; } .service-card { background: #1e1e1e; padding: 32px 24px; border-top: 2px solid transparent; border: 1px solid rgba(255,255,255,0.07); transition: border-color 0.3s, background 0.3s, transform 0.3s; display: block; } .service-card:hover { border-color: #1E75FF; background: #111113; box-shadow: 0 0 20px rgba(30,117,255,0.10); } .service-card:hover .service-num { color: #1E75FF; } .service-card:hover .service-desc { color: #1E75FF; } .service-num { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 25px; font-weight: 400; color: rgba(255,255,255,0.08); line-height: 1; margin-bottom: 20px; } .service-en { font-size: 10px; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; } .service-name { font-size: 29px; font-weight: 700; color: #EDEDEF; margin-bottom: 12px; line-height: 1.3; } .service-desc { font-size: 13px; line-height: 1.7; color: rgba(237,237,239,0.45); font-weight: 300; } .services-more { margin-top: 40px; text-align: center; } .services-more a { color: var(--accent); font-size: 14px; letter-spacing: 1px; border-bottom: 1px solid var(--accent); padding-bottom: 4px; } /* ===================================================================== HOME — METHODOLOGY flywheel ===================================================================== */ .method { background: var(--blue-deep); } /* [V4] services 页 .method 区顶部空隙 -10px */ /* [V7] 底部适度加高(原 64 → 96),不再用 scroll-snap(会"吸住"抢滚动) */ .method { padding-top: calc(var(--sp-section) - 40px); padding-bottom: 96px; } .method-title-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; max-width: 1320px; margin-left: auto; margin-right: auto; } .flywheel-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: center; max-width: 1320px; margin: 0 auto; } .flywheel-svg { width: 100%; max-width: 380px; margin: 0 auto; } .method-steps { display: flex; flex-direction: column; gap: 0; } .method-step { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .method-step:last-child { border-bottom: none; } .method-step-code { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 13px; font-weight: 700; color: var(--accent); min-width: 48px; padding-top: 2px; letter-spacing: 1px; } .method-step-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--white); } .method-step-desc { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.6; font-weight: 300; } /* ===================================================================== HOME — STAR MODEL ===================================================================== */ .star { background: #f3f8ff; color: var(--black); padding-top: 48px; padding-bottom: 64px; } .star .section-title .en { color: var(--gray-mid); } .star > .section-label, .star > .section-title { max-width: 1320px; margin-left: auto; margin-right: auto; } .star-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 60px; border: 1px solid var(--gray-light); max-width: 1320px; margin-left: auto; margin-right: auto; } .star-card { padding: 36px 28px; border-right: 1px solid var(--gray-light); position: relative; transition: background 0.3s, color 0.3s; } .star-card:last-child { border-right: none; } .star-card:hover { background: var(--blue); color: var(--white); } .star-code { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 28px; font-weight: 700; color: var(--blue); margin-bottom: 16px; transition: color 0.3s; } .star-card:hover .star-code { color: var(--accent); } .star-cn { font-size: 16px; font-weight: 700; margin-bottom: 8px; transition: color 0.3s; } .star-card:hover .star-cn { color: var(--white); } .star-en { font-size: 11px; letter-spacing: 2px; color: var(--gray-mid); margin-bottom: 12px; transition: color 0.3s; } .star-card:hover .star-en { color: rgba(255,255,255,0.6); } .star-desc { font-size: 13px; line-height: 1.7; color: #555; transition: color 0.3s; } .star-card:hover .star-desc { color: rgba(255,255,255,0.85); } .star-intro { max-width: 900px; margin: 24px 0 0; text-align: left; font-size: 15px; line-height: 1.9; color: #555; font-weight: 300; } .star-hero { display: flex; justify-content: center; margin: 56px auto 0; max-width: 520px; filter: none; box-shadow: none; } .star-hero::after { display: none; } .star-hero-img { width: 100%; height: auto; max-width: 480px; filter: none; } .star-intro strong { color: var(--blue); font-weight: 600; } /* Star "1+4" v2 stage */ .star-v2-stage { max-width: 1320px; margin: 72px auto 0; padding: 0 40px; display: flex; flex-direction: column; gap: 36px; } .star-v2-card { background: var(--white); border: 1px solid var(--gray-light); padding: 44px 44px 40px; position: relative; transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } .star-v2-card:hover { box-shadow: 0 24px 60px rgba(9,31,107,0.08), 0 4px 12px rgba(31,87,245,0.05); transform: translateY(-3px); border-color: rgba(31,87,245,0.25); } .star-v2-card.star-core { background: #091F6B; color: var(--white); border-color: transparent; padding: 56px 52px 52px; } .star-v2-card.star-core::before { content: ""; position: absolute; top: 0; right: 0; width: 220px; height: 220px; background: radial-gradient(circle at top right, rgba(196,240,42,0.18), transparent 70%); pointer-events: none; } .star-v2-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 24px; margin-bottom: 24px; position: relative; } .star-v2-badge { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--gray-light); border-radius: 8px; color: var(--gray-mid); background: var(--off-white); } .star-core .star-v2-badge { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: var(--accent); } .star-v2-code { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 36px; font-weight: 700; letter-spacing: 0; color: var(--blue); line-height: 1; } .star-core .star-v2-code { color: var(--accent); font-size: 42px; } .star-v2-cn { font-size: 22px; font-weight: 700; color: var(--black); line-height: 1.2; } .star-core .star-v2-cn { color: var(--white); font-size: 26px; } .star-v2-en { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 2.2px; color: var(--gray-mid); text-transform: uppercase; margin-left: auto; } .star-core .star-v2-en { color: rgba(255,255,255,0.55); } .star-v2-intro { font-size: 15px; line-height: 1.9; color: #333; font-weight: 300; margin-bottom: 32px; max-width: 980px; } .star-core .star-v2-intro { color: rgba(255,255,255,0.85); font-size: 16px; } .star-pillar-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 28px; } .star-core .star-pillar-list { gap: 32px; } .star-pillar-item { display: flex; gap: 16px; align-items: flex-start; } .star-pillar-idx { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--blue); padding-top: 2px; min-width: 28px; } .star-core .star-pillar-idx { color: var(--accent); } .star-pillar-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--black); line-height: 1.4; } .star-core .star-pillar-title { color: var(--white); } .star-pillar-desc { font-size: 13px; line-height: 1.8; color: #555; font-weight: 300; } .star-core .star-pillar-desc { color: rgba(255,255,255,0.7); } .star-quote { margin: 0; padding: 20px 24px; border-left: 3px solid var(--blue); background: var(--off-white); font-size: 14px; font-style: italic; line-height: 1.7; color: #444; } .star-core .star-quote { border-left-color: var(--accent); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); } .star-v2-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .star-source { max-width: 1320px; margin: 56px auto 0; padding: 18px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 1px dashed var(--gray-light); background: var(--white); border-radius: 8px; font-size: 13px; color: #555; } .star-source-label { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 10px; letter-spacing: 1.8px; color: var(--blue); font-weight: 700; text-transform: uppercase; } .star-source-body { line-height: 1.6; font-weight: 400; } /* ===================================================================== CLIENTS STRIP — logo ribbon shown on home + about ===================================================================== */ .clients-strip { background: var(--white); padding: 160px 0; border-top: 1px solid var(--gray-light); border-bottom: 1px solid var(--gray-light); } .clients-strip-inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; } .clients-strip-head { text-align: center; margin-bottom: 56px; } .clients-strip-head .section-title { color: var(--blue); } .clients-strip-head .section-title .en { color: var(--gray-mid); } .clients-strip-desc { max-width: 760px; margin: 20px auto 0; font-size: 15px; line-height: 1.9; color: #555; font-weight: 300; } .clients-strip-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px 32px; border: none; padding: 24px 16px; max-width: 1320px; margin: 0 auto; } .client-logo-wrap { aspect-ratio: auto; flex: 0 0 auto; width: 140px; height: 60px; display: flex; align-items: center; justify-content: center; padding: 6px 10px; border: none; background: transparent; box-sizing: border-box; transition: transform 0.25s ease, filter 0.25s ease; } .client-logo-wrap:hover { background: var(--off-white); transform: translateY(-2px); } .client-logo-wrap:hover .client-logo { filter: grayscale(0) !important; opacity: 1 !important; } .client-logo { display: block; max-width: 72px; max-height: 36px; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: grayscale(100%) opacity(50%); transition: filter 0.25s ease, opacity 0.25s ease; } .client-logo-text { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 1.4px; color: #999; text-transform: uppercase; } /* Dark variant — rarely used, but supported */ .clients-strip-dark { background: var(--black); border-color: rgba(255,255,255,0.06); } .clients-strip-dark .clients-strip-head .section-title { color: var(--white); } .clients-strip-dark .clients-strip-desc { color: rgba(255,255,255,0.6); } .clients-strip-dark .clients-strip-grid, .clients-strip-dark .client-logo-wrap { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); } .clients-strip-dark .client-logo { filter: brightness(0) invert(1) opacity(0.85); } /* ---- Clients logo wall — multi-row infinite scroll ---- */ .clients-marquee { position: relative; overflow: hidden; border: none; display: flex; flex-direction: column; gap: 18px; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .clients-marquee-track { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; width: max-content !important; max-width: none !important; grid-template-columns: none !important; border: none !important; gap: 0 !important; padding: 0 !important; animation: clients-scroll 40s linear infinite; will-change: transform; } .clients-marquee-track--reverse { animation-direction: reverse; animation-duration: 52s; } .clients-marquee:hover .clients-marquee-track { animation-play-state: paused; } .clients-marquee-track .client-logo-wrap { aspect-ratio: auto; flex: 0 0 auto; width: 200px; height: 96px; border: none !important; background: transparent; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.25s ease, box-shadow 0.25s ease; } .clients-marquee-track .client-logo-wrap:hover { transform: translateY(-4px) scale(1.08); background: var(--white); box-shadow: 0 12px 28px rgba(0,0,0,0.08); z-index: 2; border-radius: 8px; } /* 小红书:整体缩 30%(它本身是实色 app icon,视觉密度比线性 logo 高) */ .client-logo-wrap[title="小红书"] .client-logo { transform: scale(0.7); transform-origin: center; } @keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 600px) { .clients-marquee-track .client-logo-wrap { width: 140px; height: 76px; } .clients-marquee { gap: 12px; } } @media (prefers-reduced-motion: reduce) { .clients-marquee-track { animation: none; } } /* ===================================================================== SHARED CTA (home + inner pages) ===================================================================== */ .cta-section { background: var(--blue); padding: 208px 60px; position: relative; overflow: hidden; text-align: center; } .cta-bg-sym { position: absolute; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 300px; font-weight: 900; color: rgba(255,255,255,0.04); pointer-events: none; user-select: none; line-height: 1; } .cta-bg-sym.left { left: -40px; top: 50%; transform: translateY(-50%); } .cta-bg-sym.right { right: -40px; top: 50%; transform: translateY(-50%); } .cta-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; } .cta-title { font-size: clamp(36px, 5vw, 64px); font-weight: 900; letter-spacing: 0; margin-bottom: 20px; } .cta-desc { font-size: 18px; color: rgba(255,255,255,0.8); margin-bottom: 48px; font-weight: 300; } .cta-actions { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } /* ===================================================================== INNER PAGE HERO (about / services / cases / contact) ===================================================================== */ .inner-hero { background: var(--blue); position: relative; overflow: hidden; padding: 90px 60px 70px; text-align: center; min-height: 360px; display: flex; align-items: center; justify-content: center; } .inner-hero .hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; } .inner-hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; } .inner-hero h1 { font-size: clamp(32px, 3.6vw, 46px); font-weight: 900; line-height: 1.1; letter-spacing: 0; color: var(--white); margin-bottom: 16px; } .inner-hero h1 .en { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; display: block; font-size: 0.4em; font-weight: 300; letter-spacing: 4px; color: rgba(255,255,255,0.7); margin-bottom: 10px; text-transform: uppercase; } .inner-hero p { /* [V5] 加宽以容纳 EN 长描述,单
即可得 2 行 */ font-size: 17px; line-height: 1.8; font-weight: 300; color: rgba(255,255,255,0.85); max-width: 1100px; margin: 0 auto; } .contact-h1-compact { font-size: clamp(30px, 3.2vw, 42px) !important; font-weight: 800; letter-spacing: 0; margin-bottom: 14px; color: var(--white); } /* ===================================================================== ABOUT PAGE ===================================================================== */ .about-mission { background: var(--white); color: var(--black); padding-top: 84px; padding-bottom: 92px; } .about-mission-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: stretch; } .about-mission-text { max-width: 640px; } .about-mission-text .section-label { margin-bottom: 14px; } .about-mission p { font-size: 15.5px; line-height: 1.85; color: #333; font-weight: 300; margin-bottom: 18px; } .about-mission p:first-of-type::first-letter { font-size: 52px; font-weight: 700; color: var(--blue); float: left; line-height: 1; margin: 4px 8px 0 0; } .about-mission-art { position: relative; min-height: 420px; aspect-ratio: 583 / 420; align-self: start; background: var(--off-white); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; will-change: transform; } .about-mission-art-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gray-mid); border: 1px dashed rgba(0,0,0,0.18); padding: 60px 40px; border-radius: 8px; width: 80%; height: 84%; justify-content: center; } .about-mission-art-slot .art-slot-label { font-size: 18px; font-weight: 600; letter-spacing: 0.5px; color: #555; } .about-mission-art-slot .art-slot-hint { font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #999; } /* mission 区轮播（about 页 Our Mission 插图位） */ .mission-carousel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .mission-slides { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .mission-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; transition: opacity .9s ease; } .mission-slide.is-active { opacity: 1; } .mission-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .mission-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; gap: 9px; justify-content: center; } .mission-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.55); box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: background .3s ease, transform .3s ease; } .mission-dot:hover { background: rgba(255,255,255,.85); } .mission-dot.is-active { background: #fff; transform: scale(1.3); } .reveal-up { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); } .reveal-up.is-in { opacity: 1; transform: translateY(0); } @media (max-width: 900px) { .about-mission-inner { grid-template-columns: 1fr; gap: 40px; } .about-mission-art { aspect-ratio: 4 / 3; max-width: 480px; margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1; transform: none; transition: none; } } .offices-section { background: var(--black); } .offices-section > .section-label, .offices-section > .section-title { max-width: 1320px; margin-left: auto; margin-right: auto; } .offices-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.08); margin-top: 60px; max-width: 1320px; margin-left: auto; margin-right: auto; } .office-card { background: var(--card-dark); padding: 40px 28px; text-align: center; border-top: 2px solid transparent; transition: border-color 0.3s, background 0.3s; } .office-card:hover { border-top-color: var(--accent); background: var(--card-dark-hover); } .office-city { font-size: 28px; font-weight: 900; color: var(--white); margin-bottom: 8px; letter-spacing: 0; } .office-city-en { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; } .office-role { font-size: 13px; color: rgba(255,255,255,0.55); } .certs-section { background: var(--blue-deep); padding: 80px 0 96px; } .certs-section > .section-label, .certs-section > .section-title { max-width: 1320px; margin-left: auto; margin-right: auto; } .certs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 80px; width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding: 0; } .cert-card { background: transparent; border: none; border-left: 1px solid rgba(255,255,255,0.12); padding: 56px 48px 56px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; position: relative; min-height: 380px; transition: background .5s ease, transform .5s cubic-bezier(.22,1,.36,1); overflow: hidden; cursor: default; } .cert-card:first-child { border-left: none; padding-left: 20%; } .cert-card + .cert-card { padding-left: 48px; } .cert-card::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--accent); transition: height .6s cubic-bezier(.22,1,.36,1); } .cert-card:first-child::before { display: none; } .cert-card:hover::before { height: 100%; } .cert-card:hover { background: rgba(255,255,255,0.03); transform: translateY(-4px); } .cert-card:hover .cert-badge-chip { transform: scale(1.06) rotate(-3deg); } .cert-card:hover .cert-name { color: var(--accent); } .cert-badge-chip { flex: 0 0 auto; width: 112px; height: 112px; border-radius:8px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; transition: transform .6s cubic-bezier(.22,1,.36,1); box-shadow: 0 12px 36px rgba(0,0,0,0.25); } .cert-badge { width: 100%; height: 100%; object-fit: contain; } .cert-body { width: 100%; } .cert-name { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 28px; font-weight: 700; color: var(--white); margin-bottom: 10px; letter-spacing: 0; line-height: 1.2; transition: color .4s ease; } .cert-en { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 2.4px; color: var(--accent); text-transform: uppercase; margin-bottom: 28px; font-weight: 500; } .cert-desc { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.85; font-weight: 300; max-width: 580px; } @media (max-width: 900px) { .certs-section { padding: 80px 0 96px; } .certs-grid { grid-template-columns: 1fr; padding: 0 20px; } .cert-card { padding: 40px 28px; border-left: none; border-top: 1px solid rgba(255,255,255,0.12); min-height: 0; } .cert-card:first-child { border-top: none; } } .values-section { background: var(--off-white); color: var(--black); } .values-section > .section-label, .values-section > .section-title { max-width: 1320px; margin-left: auto; margin-right: auto; } .values-section .section-title .en { color: var(--gray-mid); } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 60px; max-width: 1320px; margin-left: auto; margin-right: auto; } .value-card { background: var(--white); padding: 40px 32px; border-top: 3px solid var(--blue); transition: transform 0.2s, box-shadow 0.2s; } .value-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(9,31,107,0.08); } .value-icon { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 42px; font-weight: 700; color: var(--blue); margin-bottom: 20px; line-height: 1; } .value-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--black); } .value-desc { font-size: 14px; color: #444; line-height: 1.7; font-weight: 300; } /* ===================================================================== SERVICES PAGE ===================================================================== */ .services-detail { background: var(--black); padding-top: 96px; padding-bottom: 96px; } .services-detail > .container { max-width: 1320px; margin: 0 auto; } .solution-anchor { display: block; position: relative; padding-top: 80px; margin-top: -80px; pointer-events: none; /* 锚点偏移带不得拦截下层链接点击 (fix 2026-06-12) */ } .solution-block { display: grid; grid-template-columns: 180px 1fr; gap: 44px; padding: 44px 52px; background: linear-gradient(160deg, #2a2a2a 0%, #1e1e1e 100%); border: 1px solid rgba(255,255,255,0.10); border-radius:8px; margin-bottom: 24px; align-items: start; transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease; } .solution-block:hover { border-color: rgba(200,244,87,0.5); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.4); } .solution-block:last-child { margin-bottom: 0; } .solution-num { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 96px; font-weight: 900; color: rgba(1,106,255,0.85); line-height: 1; } .solution-tag { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 10px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-top: 16px; } .solution-title { font-size: 32px; font-weight: 900; color: var(--white); margin-bottom: 20px; letter-spacing: 0; line-height: 1.2; } .solution-desc { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.7); font-weight: 300; margin-bottom: 24px; } .solution-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 1px; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 4px; } .solution-cta:hover { color: var(--white); border-color: var(--white); } /* --- Related cases preview inside a solution block --- */ .solution-cases { margin-top: 28px; padding-top: 24px; border-top: 1px dashed rgba(255,255,255,0.12); } .solution-cases-label { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 10px; letter-spacing: 3px; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 14px; } .solution-cases-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .solution-case-chip { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; background: rgba(255,255,255,0.025); transition: transform 0.25s cubic-bezier(.22,1,.36,1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; color: rgba(255,255,255,0.82); text-decoration: none; cursor: pointer; overflow: hidden; } .solution-case-chip::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(135deg, rgba(200,244,87,0.14) 0%, rgba(200,244,87,0) 60%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .solution-case-chip:hover, .solution-case-chip:focus-visible, .solution-case-chip:active { border-color: var(--accent); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(200,244,87,0.10), 0 0 0 1px rgba(200,244,87,0.25); background: rgba(200,244,87,0.04); } .solution-case-chip:hover::before, .solution-case-chip:focus-visible::before, .solution-case-chip:active::before { opacity: 1; } .solution-case-chip:hover .solution-case-client, .solution-case-chip:focus-visible .solution-case-client { color: var(--accent); text-shadow: 0 0 12px rgba(200,244,87,0.35); } .solution-case-chip:hover .solution-case-title, .solution-case-chip:focus-visible .solution-case-title { color: var(--white); } .solution-case-chip.is-primary { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); } /* 修 hover 优先级:.is-primary 在 :hover 后面定义,会覆盖 hover 的 border/bg,这里显式补回 */ .solution-case-chip.is-primary:hover, .solution-case-chip.is-primary:focus-visible, .solution-case-chip.is-primary:active { border-color: var(--accent); background: rgba(200,244,87,0.04); } .solution-case-chip.is-primary .solution-case-client { color: var(--accent); } .solution-case-client { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 17px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); font-weight: 700; } .solution-case-title { font-size: 13px; line-height: 1.4; color: inherit; font-weight: 400; } .solution-case-more { display: inline-flex; align-items: center; gap: 6px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; text-decoration: none; } .solution-case-more:hover { color: var(--white); } /* --- Clickable tag (solution cross-link) --- */ .tag-link { cursor: pointer; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .tag-link:hover { transform: translateY(-1px); filter: brightness(1.15); } /* ===================================================================== CASES LIST PAGE ===================================================================== */ .cases-list { background: var(--off-white); color: var(--black); padding-top: 60px; } .cases-filter { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; align-items: center; max-width: 1320px; margin-left: auto; margin-right: auto; } .cases-filter-label { font-size: 11px; letter-spacing: 3px; color: var(--gray-mid); text-transform: uppercase; font-weight: 500; margin-right: 8px; } .cases-filter select { appearance: none; -webkit-appearance: none; background: var(--white) url("data:image/svg+xml;utf8,") no-repeat right 14px center; border: 1px solid var(--gray-light); border-radius: 8px; padding: 10px 40px 10px 16px; font-size: 14px; font-family: inherit; color: var(--black); min-width: 160px; cursor: pointer; } .cases-filter select:focus { outline: none; border-color: var(--blue); } .cases-count { font-size: 13px; color: var(--gray-mid); margin-left: auto; } .cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1320px; margin: 0 auto; } .case-card { background: var(--white); color: var(--black); border: 1px solid var(--gray-light); display: block; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; position: relative; overflow: hidden; } .case-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(9,31,107,0.08); border-color: var(--blue); } .case-card-image { aspect-ratio: 16 / 9; background: var(--blue-deep, #091F6B); display: block; position: relative; overflow: hidden; } .case-card-image svg { display: block; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .case-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .case-card:hover .case-card-image svg, .case-card:hover .case-card-image img { transform: scale(1.04); } /* Fallback for cards without SVG (edge case) */ .case-card-client { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 28px; font-weight: 700; color: var(--white); letter-spacing: 0; } .case-card-body { padding: 28px 24px; } .case-card-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .tag { display: inline-flex; font-size: 10px; letter-spacing: 2px; padding: 4px 10px; text-transform: uppercase; font-weight: 600; } .tag-blue { background: var(--blue); color: var(--white); } .tag-outline { border: 1px solid var(--gray-light); color: var(--gray-mid); } .tag-lime { background: var(--accent); color: var(--black); } .case-card h3 { font-size: 18px; font-weight: 700; color: var(--black); margin-bottom: 10px; line-height: 1.4; } .case-card p { font-size: 13px; line-height: 1.7; color: #555; font-weight: 300; } .case-card[data-hidden="1"] { display: none; } /* ===================================================================== CASE DETAIL PAGE ===================================================================== */ .case-detail-hero { background: var(--blue-deep); position: relative; overflow: hidden; padding: 160px 60px 80px; } .case-detail-hero .hero-bg { opacity: 0.4; } .case-detail-hero-content { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; } .case-detail-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .case-detail-client { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 13px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; } .case-detail-title { font-size: clamp(36px, 5vw, 60px); font-weight: 900; line-height: 1.1; letter-spacing: 0; color: var(--white); margin-bottom: 20px; } .case-detail-desc { font-size: 18px; line-height: 1.8; font-weight: 300; color: rgba(255,255,255,0.85); max-width: 820px; } .case-stats { background: var(--black); padding: 80px 60px; } .case-stats-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: rgba(255,255,255,0.08); max-width: 1320px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.08); } .case-stat { background: var(--card-dark); padding: 48px 32px; text-align: center; } .case-stat-num { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 64px; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: 0; } .case-stat-num .suffix { font-size: 28px; margin-left: 2px; } .case-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 12px; letter-spacing: 0.5px; } .case-content { background: var(--off-white); color: var(--black); } .case-content-inner { max-width: 880px; margin: 0 auto; } .case-content-block { margin-bottom: 56px; } .case-content-block:last-child { margin-bottom: 0; } .case-content-label { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 4px; color: var(--blue); text-transform: uppercase; margin-bottom: 14px; font-weight: 600; } .case-content-heading { font-size: 28px; font-weight: 900; color: var(--black); margin-bottom: 20px; letter-spacing: 0; } .case-content-text { font-size: 17px; line-height: 1.9; color: #333; font-weight: 300; } .case-content-list { list-style: none; padding: 0; margin-top: 16px; } .case-content-list li { padding: 16px 0 16px 36px; position: relative; border-bottom: 1px solid var(--gray-light); font-size: 16px; line-height: 1.7; color: #333; font-weight: 300; } .case-content-list li:last-child { border-bottom: none; } .case-content-list li::before { content: '▸'; position: absolute; left: 8px; color: var(--blue); font-weight: 700; } .case-related { background: var(--black); } .case-related > .container { max-width: 1320px; margin: 0 auto; } .case-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .case-related .case-card { background: var(--card-dark); color: var(--white); border: 1px solid rgba(255,255,255,0.08); } .case-related .case-card h3 { color: var(--white); } .case-related .case-card p { color: rgba(255,255,255,0.55); } .case-related .case-card:hover { border-color: var(--accent); box-shadow: 0 16px 40px rgba(196,240,42,0.08); } .case-back { background: var(--black); padding: 40px 60px 80px; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); } .case-back a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 1px; color: rgba(255,255,255,0.7); padding: 12px 24px; border: 1px solid rgba(255,255,255,0.15); transition: border-color 0.2s, color 0.2s; } .case-back a:hover { border-color: var(--accent); color: var(--accent); } /* ===================================================================== CONTACT PAGE ===================================================================== */ .contact-section { background: var(--off-white); color: var(--black); padding: 64px 24px 96px; } .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; max-width: 1180px; margin: 0 auto; align-items: start; } @media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; max-width: 720px; } } .contact-form-box { background: var(--white); padding: 56px 48px; border-top: 3px solid var(--accent); border-radius: 6px; /* 不再向上嵌入 banner;让出空间给上方 form-scroll-hint 引导用户下滑 */ margin-top: 0; position: relative; z-index: 5; box-shadow: 0 24px 60px rgba(8,16,50,0.18), 0 4px 12px rgba(13,13,13,0.04); } .form-scroll-hint { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 0 28px; color: var(--gray-mid); font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; font-family: 'Google Sans Flex','Noto Sans SC',sans-serif; } .form-scroll-hint-arrow { display: inline-flex; font-size: 18px; color: var(--blue); animation: formScrollBounce 1.6s ease-in-out infinite; } @keyframes formScrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @media (prefers-reduced-motion: reduce) { .form-scroll-hint-arrow { animation: none; } } @media (max-width: 860px) { .contact-form-box { padding: 40px 24px; margin-top: 0; } } .contact-form-box h2 { font-size: 28px; font-weight: 900; color: var(--black); margin-bottom: 10px; letter-spacing: 0; } .contact-form-box .form-hint { font-size: 13px; color: var(--gray-mid); margin-bottom: 32px; } /* === 右栏:联系方式(图1风格 圆形描边图标 + 应用名+账号名) === */ .contact-aside { background: var(--white); padding: 48px 36px; border-top: 3px solid var(--accent); border-radius: 6px; position: relative; box-shadow: 0 24px 60px rgba(8,16,50,0.10), 0 4px 12px rgba(13,13,13,0.04); position: sticky; top: 120px; } .contact-aside-title { font-size: 22px; font-weight: 900; color: var(--black); margin: 0 0 24px; letter-spacing: 0; } .contact-aside-email { display: flex; align-items: center; gap: 14px; color: var(--black); text-decoration: none; font-family: 'Space Grotesk', var(--font-sans), sans-serif; font-size: 16px; font-weight: 500; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid #e6e8eb; transition: color .2s ease; } .contact-aside-email:hover { color: var(--blue); } .contact-aside-email .contact-aside-email-icon { width: 26px; height: 26px; flex-shrink: 0; } .contact-aside-social { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; } .contact-aside-social li { display: flex; align-items: center; gap: 14px; } .social-circle { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #1a1a1a; background: transparent; color: #1a1a1a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; padding: 0; text-decoration: none; } .social-circle:hover { background: #1a1a1a; color: #fff; transform: translateY(-2px); } .social-circle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .social-circle svg { width: 28px; height: 28px; } .social-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; } .social-name { font-weight: 600; font-size: 14px; color: var(--black); font-family: 'Space Grotesk', var(--font-sans), sans-serif; letter-spacing: 0.2px; } .social-handle { font-size: 12.5px; color: var(--gray-mid); } @media (max-width: 1024px) { .contact-aside { padding: 36px 28px; position: static; top: auto; } } .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 8px; letter-spacing: 0.5px; text-transform: uppercase; } .form-group input, .form-group textarea { width: 100%; padding: 12px 14px; background: var(--off-white); border: 1px solid var(--gray-light); font-family: inherit; font-size: 14px; color: var(--black); border-radius: 8px; transition: border-color 0.2s; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); background: var(--white); } .form-group textarea { resize: vertical; min-height: 120px; } .form-group select { width: 100%; padding: 12px 40px 12px 14px; background-color: var(--off-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; border: 1px solid var(--gray-light); font-family: inherit; font-size: 14px; color: var(--black); border-radius: 8px; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; cursor: pointer; } .form-group select:focus { outline: none; border-color: var(--blue); background-color: var(--white); } .form-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #444; line-height: 1.6; cursor: pointer; } .form-checkbox input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--blue); } .form-checkbox a { color: var(--blue); text-decoration: underline; } .form-submit { width: 100%; margin-top: 12px; background: var(--blue); color: var(--white); padding: 16px; font-size: 15px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; letter-spacing: 1px; transition: background 0.2s, transform 0.2s; } .form-submit:hover:not(:disabled) { background: var(--blue-dark); transform: translateY(-1px); } .form-submit:disabled { opacity: 0.6; cursor: not-allowed; } .form-msg { margin-top: 20px; padding: 14px 18px; font-size: 14px; border-radius: 8px; } .form-msg.success { background: rgba(46,203,161,0.12); color: #1d8a6f; border: 1px solid rgba(46,203,161,0.3); } .form-msg.error { background: rgba(244,67,54,0.12); color: #c6352a; border: 1px solid rgba(244,67,54,0.3); } .contact-info h3 { font-size: 22px; font-weight: 900; color: var(--black); margin-bottom: 8px; letter-spacing: 0; } .contact-info-block { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-light); } .contact-info-block:last-child { border-bottom: none; padding-bottom: 0; } .contact-info-label { font-size: 11px; letter-spacing: 3px; color: var(--gray-mid); text-transform: uppercase; margin-bottom: 10px; font-weight: 600; } .contact-info a.email-link { font-size: 20px; color: var(--blue); font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; border-bottom: 1px solid var(--blue); padding-bottom: 2px; } .contact-info a.email-link:hover { color: var(--accent); border-color: var(--accent); } .contact-info p { font-size: 15px; line-height: 1.7; color: #333; } .contact-socials { display: flex; gap: 12px; } .contact-social-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gray-light); color: var(--gray-dark); transition: border-color 0.2s, color 0.2s, background 0.2s; cursor: pointer; background: transparent; } .contact-social-btn:hover { border-color: var(--blue); color: var(--blue); } /* ===================================================================== POLICY / LEGAL PAGES ===================================================================== */ .policy-page { background: var(--off-white); color: var(--black); } .policy-inner { max-width: 820px; margin: 0 auto; background: var(--white); padding: 60px 48px; border-top: 3px solid var(--blue); } .policy-inner h1 { font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 0; } .policy-inner h2 { font-size: 22px; font-weight: 700; margin-top: 36px; margin-bottom: 14px; color: var(--blue-deep); } .policy-inner p { font-size: 15px; line-height: 1.9; color: #333; margin-bottom: 14px; font-weight: 300; } .policy-inner ul { margin: 12px 0 20px 24px; } .policy-inner li { font-size: 15px; line-height: 1.9; color: #333; font-weight: 300; } /* ===================================================================== FOOTER (shared) ===================================================================== */ footer.site-footer { background: var(--black); padding: 60px 60px 40px; border-top: 1px solid rgba(255,255,255,0.06); } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 48px; gap: 40px; flex-wrap: wrap; max-width: 1320px; margin-left: auto; margin-right: auto; } .footer-logo { display: inline-flex; align-items: center; gap: 12px; } .footer-logo-mark { height: 36px; width: auto; flex-shrink: 0; display: block; filter: drop-shadow(0 0 10px rgba(137,247,254,0.22)); } .footer-logo-svg { height: 22px; width: auto; display: block; } .footer-logo-word { display: none; } .footer-logo-o { display: none; } .footer-tagline { font-size: 13px; color: var(--gray-mid); margin-top: 6px; letter-spacing: 1px; } .footer-links { display: flex; gap: 48px; flex-wrap: wrap; } .footer-col-title { font-size: 11px; letter-spacing: 3px; color: var(--gray-mid); margin-bottom: 16px; text-transform: uppercase; font-weight: 600; } .footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: 10px; transition: color 0.2s; } .footer-col a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: rgba(255,255,255,0.3); gap: 20px; flex-wrap: wrap; max-width: 1320px; margin-left: auto; margin-right: auto; } .footer-bottom a { color: rgba(255,255,255,0.5); } .footer-bottom a:hover { color: var(--accent); } /* ===================================================================== ANIMATIONS (fade-in on scroll) ===================================================================== */ .fade-in { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .hero-content > * { animation: fadeInUp 0.58s ease forwards; opacity: 0; } .hero-content > *:nth-child(1) { animation-delay: 0.1s; } .hero-content > *:nth-child(2) { animation-delay: 0.2s; } .hero-content > *:nth-child(3) { animation-delay: 0.3s; } .hero-content > *:nth-child(4) { animation-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .fade-in, .hero-content > * { opacity: 1 !important; transform: none !important; } } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 1200px) { .services-grid { grid-template-columns: repeat(3, 1fr); } .star-grid { grid-template-columns: repeat(3, 1fr); } .offices-grid { grid-template-columns: repeat(2, 1fr); } .clients-strip-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 900px) { :root { --sp-section: 64px; --sp-section-lg: 88px; } nav.site-nav { padding: 14px 20px; gap: 12px; } nav.site-nav.scrolled { padding: 12px 20px; } .nav-links { position: fixed; top: 0; right: -100%; width: min(380px, 90vw); height: 100vh; background: var(--blue-deep); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 80px 32px 32px; gap: 6px; transition: right 0.3s ease; border-left: 1px solid rgba(255,255,255,0.08); overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-links.open { right: 0; } .nav-links a { font-size: 16px; } .nav-dropdown-menu { position: static; opacity: 1; pointer-events: auto; transform: none; margin-top: 6px; margin-left: 0; padding: 4px 0; background: transparent; border: none; min-width: 0; display: block; } /* override the desktop English-nav 640px width so it doesn't overflow the drawer */ .lang-en .nav-dropdown-menu { min-width: 0; padding: 4px 0; } .nav-dropdown-menu a { padding: 6px 0; font-size: 13px; white-space: normal; overflow-wrap: anywhere; } .hamburger { display: flex; position: relative; z-index: 101; width: 48px; height: 48px; padding: 12px; -webkit-tap-highlight-color: transparent; } /* [Lili] 把 X 的点击热区扩到红框大小:透明 ::after 向外撑 14px → 实际热区 ~76px,不改视觉/不撑高导航 */ .hamburger::after { content: ""; position: absolute; inset: -14px; } .nav-lang { font-size: 11px; gap: 4px; } .nav-cta { padding: 8px 14px; font-size: 12px; } section { padding: var(--sp-section) 24px; } .hero { padding: 108px 24px 60px; } .hero-content { margin-top: 0; } .hero-right { display: none; } .hero-title { letter-spacing: 0; } .about-inner { grid-template-columns: 1fr; gap: 40px; } .services-header { flex-direction: column; align-items: flex-start; } .services-grid { grid-template-columns: repeat(2, 1fr); } .flywheel-wrap { grid-template-columns: 1fr; gap: 32px; } .star-grid { grid-template-columns: repeat(2, 1fr); } .star-card { border-right: 1px solid var(--gray-light); border-bottom: 1px solid var(--gray-light); } .star-card:nth-child(2n) { border-right: none; } .inner-hero { padding: 120px 24px 60px; } .solution-block { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; } .solution-num { font-size: 56px; } .solution-cases-grid { grid-template-columns: 1fr; } .offices-grid { grid-template-columns: 1fr 1fr; } .values-grid { grid-template-columns: 1fr; } .certs-grid { grid-template-columns: 1fr; } .clients-strip { padding: 72px 0 80px; } .clients-strip-inner { padding: 0 24px; } .clients-strip-grid { grid-template-columns: repeat(3, 1fr); } .client-logo-wrap { padding: 18px 20px; } .star-hero { margin-top: 40px; max-width: 420px; } .cases-grid { grid-template-columns: 1fr; } .case-related-grid { grid-template-columns: 1fr; } .case-detail-hero { padding: 120px 24px 60px; } .case-stats { padding: 40px 24px; } .case-stats-inner { grid-template-columns: repeat(2, 1fr); } .case-stat { padding: 32px 16px; } .case-stat-num { font-size: 48px; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-form-box { padding: 32px 24px; } .contact-form .form-row { grid-template-columns: 1fr; gap: 0; } .footer-top { flex-direction: column; gap: 32px; padding: 0 4px; } .footer-links { gap: 24px; } footer.site-footer { padding: 48px 24px 32px; } .cta-section { padding: 80px 24px; } .cta-bg-sym { font-size: 180px; } .policy-inner { padding: 40px 24px; } } @media (max-width: 520px) { /* logo 墙:桌面是固定 190px flex,手机会变成一行一个且过大 → 改两列、缩小 */ .clients-strip-grid { gap: 20px 14px; } .client-logo-wrap { width: 42%; padding: 10px 8px; } .client-logo, .client-logo-wrap[title] .client-logo { max-height: 26px; max-width: 100%; } /* hero 两个按钮:竖排等宽 + 整体缩小 */ /* [m#1] hero 两按钮:缩窄(裹文字)+左对齐,文字/字号不变 */ .hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; max-width: none; } .hero-actions .btn-primary, .hero-actions .btn-secondary { width: auto; align-self: flex-start; justify-content: center; font-size: 14px; } .services-grid { grid-template-columns: 1fr; } .star-grid { grid-template-columns: 1fr; } .star-card { border-right: none; } .offices-grid { grid-template-columns: 1fr; } .case-stats-inner { grid-template-columns: 1fr; } .cases-filter { gap: 10px; } .cases-filter select { flex: 1; min-width: 140px; } .clients-strip-grid { grid-template-columns: repeat(2, 1fr); } .client-logo-wrap { padding: 14px 16px; } } /* ===================================================================== CASE DETAIL — METHODOLOGY (Playbook section) ===================================================================== */ .case-methodology { background: linear-gradient(180deg, var(--off-white) 0%, #fff 100%); color: var(--black); padding: 96px 60px 72px; } .case-methodology .section-title-dark { font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; color: var(--black); line-height: 1.1; letter-spacing: 0; margin-bottom: 12px; } .case-methodology .section-title-dark .en { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; display: block; font-size: 0.4em; font-weight: 400; letter-spacing: 3px; color: var(--blue); margin-top: 6px; } .case-methodology .section-label { color: var(--blue); } .case-methodology .section-sub { font-size: 16px; line-height: 1.8; color: #444; font-weight: 300; max-width: 720px; margin-bottom: 56px; } .method-block { border: 1px solid rgba(9,31,107,0.08); border-radius: 8px; padding: 40px 44px; margin-bottom: 24px; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .method-block:hover { border-color: rgba(9,31,107,0.2); box-shadow: 0 10px 32px rgba(9,31,107,0.06); } .method-head { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px dashed rgba(9,31,107,0.12); } .method-num { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 3px; color: var(--blue); font-weight: 600; padding-top: 6px; min-width: 60px; flex-shrink: 0; } .method-meta { flex: 1; } .method-label { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 3px; color: var(--blue); text-transform: uppercase; font-weight: 600; margin-bottom: 8px; } .method-title { font-size: 24px; font-weight: 800; color: var(--black); letter-spacing: 0; line-height: 1.2; } .method-cta { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; color: var(--blue); text-decoration: none; padding: 10px 18px; border: 1px solid var(--blue); border-radius:8px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .method-cta:hover { background: var(--blue); color: #fff; } .method-lede { font-size: 17px; line-height: 1.7; color: var(--black); font-weight: 500; margin-bottom: 16px; } .method-body { font-size: 15px; line-height: 1.85; color: #444; font-weight: 300; margin-bottom: 28px; } .method-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 24px; background: rgba(31,87,245,0.03); border-radius:8px; margin-bottom: 28px; } .method-pillar { display: flex; gap: 14px; align-items: flex-start; } .method-pillar-idx { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: 1px; flex-shrink: 0; padding-top: 2px; width: 24px; } .method-pillar-body { flex: 1; } .method-pillar-title { font-size: 13.5px; font-weight: 700; color: var(--black); margin-bottom: 4px; letter-spacing: 0; } .method-pillar-text { font-size: 12.5px; line-height: 1.65; color: #555; font-weight: 300; } .method-entities { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; } .method-entities-label { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 2px; color: #888; font-weight: 600; text-transform: uppercase; margin-right: 4px; } .method-entity { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', 'Noto Sans SC', sans-serif; font-size: 11px; font-weight: 500; padding: 4px 10px; background: #fff; border: 1px solid rgba(9,31,107,0.15); border-radius:8px; color: #444; letter-spacing: 0.3px; } .method-cross-links { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 16px; border-top: 1px solid rgba(9,31,107,0.08); } .method-cross-link { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', 'Noto Sans SC', sans-serif; font-size: 13px; font-weight: 500; color: var(--blue); text-decoration: none; transition: transform 0.15s ease; } .method-cross-link:hover { transform: translateX(2px); } /* ===================================================================== CASE DETAIL — FAQ ===================================================================== */ .case-faq { background: var(--off-white); color: var(--black); padding: 80px 60px 96px; } .case-faq .section-title-dark { font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; color: var(--black); line-height: 1.1; letter-spacing: 0; margin-bottom: 12px; } .case-faq .section-title-dark .en { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; display: block; font-size: 0.4em; font-weight: 400; letter-spacing: 3px; color: var(--blue); margin-top: 6px; } .case-faq .section-label { color: var(--blue); } .case-faq .section-sub { font-size: 16px; line-height: 1.8; color: #444; font-weight: 300; max-width: 720px; margin-bottom: 48px; } .faq-group { padding: 32px 0; border-top: 1px solid rgba(9,31,107,0.1); } .faq-group:first-of-type { border-top: none; padding-top: 0; } .faq-group-label { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 12px; letter-spacing: 2.5px; color: var(--blue); font-weight: 600; text-transform: uppercase; margin-bottom: 20px; } .faq-item { padding: 20px 0; border-bottom: 1px solid rgba(9,31,107,0.08); } .faq-item:last-child { border-bottom: none; } .faq-q { font-size: 17px; font-weight: 700; color: var(--black); margin-bottom: 10px; letter-spacing: 0; padding-left: 28px; position: relative; line-height: 1.45; } .faq-q::before { content: 'Q'; position: absolute; left: 0; top: 2px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; color: var(--blue); font-weight: 700; font-size: 15px; letter-spacing: 0; } .faq-a { font-size: 15px; line-height: 1.85; color: #444; font-weight: 300; padding-left: 28px; position: relative; } .faq-a::before { content: 'A'; position: absolute; left: 0; top: 2px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; color: rgba(9,31,107,0.4); font-weight: 700; font-size: 15px; letter-spacing: 0; } /* ------ Mobile: Methodology + FAQ ------ */ @media (max-width: 900px) { .case-methodology { padding: 72px 28px 56px; } .case-faq { padding: 64px 28px 80px; } .method-block { padding: 28px 24px; } .method-head { flex-direction: column; gap: 12px; } .method-num { min-width: auto; padding-top: 0; } .method-cta { align-self: flex-start; } .method-pillars { grid-template-columns: 1fr; padding: 20px; } .method-cross-links { flex-direction: column; gap: 10px; } .faq-q { padding-left: 24px; font-size: 15.5px; } .faq-a { padding-left: 24px; font-size: 14.5px; } } /* ===================================================================== SERVICE ICONS — monochrome SVGs on both home (dark) and services (dark) ===================================================================== */ .sol-icon { width: 64px; height: 64px; color: var(--accent); display: block; } .service-icon { margin: 8px 0 20px; color: rgba(255,255,255,0.78); transition: color 0.3s ease, transform 0.3s ease; } .service-icon .sol-icon { width: 44px; height: 44px; } .service-card:hover .service-icon { color: var(--accent); transform: translateY(-2px); } /* ===================================================================== SERVICES detail — expanded methodology + icon on lead column ===================================================================== */ .solution-block-lead { display: flex; flex-direction: column; gap: 16px; } .sol-icon-wrap { margin-top: 12px; padding: 18px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); border-radius: 8px; color: var(--accent); transition: border-color 0.3s ease, background 0.3s ease; } .sol-icon-wrap .sol-icon { width: 56px; height: 56px; } .solution-block:hover .sol-icon-wrap { border-color: var(--accent); background: rgba(196, 240, 42, 0.06); } .sol-methodology { margin-top: 12px; padding: 24px 28px; background: rgba(255,255,255,0.025); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; } .sol-methodology-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .sol-methodology-label { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); } .sol-methodology-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.75); letter-spacing: 1px; } .sol-principle { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.72); font-weight: 400; margin: 0 0 18px; padding-left: 12px; border-left: 2px solid rgba(196,240,42,0.35); font-style: italic; } .sol-method-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; } .sol-method-step { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 6px; border-top: 1px solid rgba(255,255,255,0.06); } .sol-method-name { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 12px; letter-spacing: 1.5px; color: var(--accent); font-weight: 600; } .sol-method-desc { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.7); font-weight: 300; } @media (max-width: 920px) { .sol-method-list { grid-template-columns: 1fr; } .sol-icon-wrap { width: 80px; height: 80px; padding: 14px; } .sol-icon-wrap .sol-icon { width: 48px; height: 48px; } } /* ===================================================================== HOME — 6-column featured services grid (used in addition to 10-col) ===================================================================== */ .services-grid-6 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .services-grid-6 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .services-grid-6 { grid-template-columns: 1fr; } } /* ===================================================================== HOME — Cases preview (featured case grid before the full listing page) ===================================================================== */ .cases-preview { background: #f6f7fb; padding: var(--sp-section) 60px; } .cases-preview-head { max-width: 1320px; margin: 0 auto 48px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; } .cases-preview-head .section-title { color: var(--black); } .cases-preview-head .section-title .en { color: var(--gray-mid); margin-top: 16px; } .cases-preview-desc { max-width: 420px; font-size: 14px; line-height: 1.8; color: var(--gray-mid); font-weight: 300; text-align: right; } .cases-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1320px; margin: 0 auto; } .cases-preview-more { max-width: 1320px; margin: 48px auto 0; text-align: center; } .cases-preview-more a { display: inline-block; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; color: var(--blue-deep); padding: 14px 28px; border: 1.5px solid var(--blue-deep); transition: background 0.3s ease, color 0.3s ease; } .cases-preview-more a:hover { background: var(--blue-deep); color: var(--white); } @media (max-width: 900px) { .cases-preview { padding: 80px 32px; } .cases-preview-grid { grid-template-columns: repeat(2, 1fr); } .cases-preview-desc { text-align: left; } } @media (max-width: 640px) { .cases-preview-grid { grid-template-columns: 1fr; } } /* ===================================================================== HOME — Star preview (circular graphic + 1-line intro on home) ===================================================================== */ .star-preview { background: #f3f8ff; padding: var(--sp-section) 60px; } .star-preview > .section-label, .star-preview > .section-title { max-width: 1320px; margin-left: auto; margin-right: auto; } .star-preview > .section-title { color: var(--black); } .star-preview > .section-title .en { color: var(--gray-mid); } .star-preview-grid { max-width: 1320px; margin: 24px auto 0; display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: center; } .star-preview-grid--copy-only { grid-template-columns: 1fr; } .star-preview-grid--copy-only .star-preview-copy { max-width: 720px; } .star-preview-copy { max-width: 520px; } .star-preview-desc { font-size: 17px; line-height: 1.85; color: var(--black); font-weight: 300; margin-bottom: 20px; } .star-preview-desc strong { font-weight: 700; color: var(--blue-deep); } .star-preview-source { font-size: 12px; line-height: 1.6; color: var(--gray-mid); font-weight: 400; margin-bottom: 28px; letter-spacing: 0.3px; } .star-preview-cta { display: inline-flex; align-items: center; gap: 10px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 1px; background: var(--blue); color: var(--white); padding: 18px 56px; border: none; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s; } .star-preview-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(3,106,255,0.3); } .star-preview-img { display: flex; align-items: center; justify-content: center; margin-top: -80px; margin-left: -80px; /* 视觉左移 ≈15% of 520px 列宽 */ } .star-preview-img img { width: 100%; max-width: 520px; height: auto; filter: none; } @media (max-width: 960px) { .star-preview { padding: 80px 32px; } .star-preview-grid { grid-template-columns: 1fr; gap: 40px; } .star-preview-img img { max-width: 360px; } } /* ===================================================================== HOME — Method preview (condensed flywheel chips + link) ===================================================================== */ .method-preview { background: var(--blue-deep); color: var(--white); padding: 190px 60px; } .method-preview-inner { max-width: 1320px; margin: 0 auto; text-align: center; } .method-preview .section-label { color: var(--accent); } .method-preview .section-title { color: var(--white); } .method-preview-desc { max-width: 640px; margin: 20px auto 40px; font-size: 15px; line-height: 1.85; color: rgba(255,255,255,0.72); font-weight: 300; } .method-preview-list { list-style: none; padding: 0; margin: 0 0 40px; display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; } .method-preview-chip { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 22px 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); transition: border-color 0.3s, background 0.3s; } /* 步骤间引导箭头 01 → 05(最后一个不加)*/ .method-preview-chip:not(:last-child)::after { content: '\2192'; position: absolute; right: -23px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 20px; font-weight: 700; line-height: 1; } .method-preview-chip:hover { border-color: var(--accent); background: rgba(196,240,42,0.06); } .method-preview-idx { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 13px; letter-spacing: 2px; color: var(--accent); } .method-preview-cn { font-size: 17px; font-weight: 600; color: var(--white); } .method-preview-en { font-size: 13px; letter-spacing: 1px; color: rgba(255,255,255,0.4); text-transform: uppercase; } .method-preview-cta { display: inline-block; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; color: var(--blue-deep); background: var(--accent); padding: 14px 28px; transition: background 0.3s ease, color 0.3s ease; } .method-preview-cta:hover { background: var(--white); } @media (max-width: 760px) { .method-preview { padding: 80px 24px; } .method-preview-list { flex-direction: column; align-items: stretch; } .method-preview-chip:not(:last-child)::after { right: 50%; top: auto; bottom: -27px; transform: translateX(50%) rotate(90deg); } .method-preview-chip { min-width: 0; } } /* ===================================================================== HOME — About CTA button inside the short about block ===================================================================== */ .about-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; background: var(--blue); color: var(--white); padding: 18px 56px; font-size: 15px; font-weight: 700; border-radius: 8px; letter-spacing: 1px; border: none; transition: transform 0.2s, box-shadow 0.2s; } .about-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(1,106,255,0.3); } /* ===================================================================== NAV — Services dropdown: top-of-menu framework links ===================================================================== */ .nav-dropdown-framework { display: flex !important; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); font-weight: 600 !important; color: var(--white) !important; } .nav-dropdown-framework:hover { background: var(--accent) !important; color: var(--black) !important; } .nav-dropdown-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; font-size: 14px; color: var(--accent); background: rgba(255,255,255,0.12); border-radius: 50%; } .nav-dropdown-framework:hover .nav-dropdown-dot { background: rgba(0,0,0,0.15); color: var(--black); } .nav-dropdown-divider { height: 1px; background: var(--gray-light); margin: 6px 0; } /* ===================================================================== UTILITIES ===================================================================== */ .geo-redesign-hero { min-height: 720px; display: flex; align-items: center; background: linear-gradient(90deg, rgba(13,13,13,0.94), rgba(13,13,13,0.72)), linear-gradient(135deg, #06183d 0%, #0d0d0d 52%, #121610 100%); color: var(--white); padding-top: 150px; } .geo-hero-grid { width: min(1320px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr); gap: 72px; align-items: start; } .geo-hero-copy { display: flex; flex-direction: column; align-self: stretch; min-height: 480px; } /* [V10] GEO hero 微调 */ .geo-hero-copy > .section-label { margin-left: 5%; } .geo-hero-copy .hero-actions { margin-top: auto; padding-top: 40px; margin-bottom: 46px; /* [V10] 与右侧 AI answer 白卡垂直居中对齐 */ } .geo-hero-copy h1 { max-width: 760px; font-size: clamp(44px, 6vw, 82px); line-height: 1.1; font-weight: 900; letter-spacing: 0; margin: 18px 0 26px; } .geo-hero-copy p { max-width: 680px; font-size: 18px; line-height: 1.8; color: rgba(255,255,255,0.76); font-weight: 300; } .geo-platforms { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 12px; line-height: 1.8; color: rgba(255,255,255,0.56); letter-spacing: 1.4px; text-transform: uppercase; } .geo-signal-panel { min-height: 450px; display: grid; grid-template-rows: 1fr auto; gap: 22px; } .geo-signal-orbit { position: relative; display: grid; grid-template-rows: repeat(3, 1fr); gap: 12px; padding: 28px; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 42px), rgba(255,255,255,0.035); } .geo-signal-orbit span { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-left: 3px solid var(--accent); background: rgba(1,106,255,0.14); border-radius: 8px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: clamp(16px, 2vw, 24px); font-weight: 800; letter-spacing: 0; } .geo-signal-orbit span::after { content: '→'; color: var(--accent); font-weight: 700; } .geo-answer-card { padding: 28px; background: var(--off-white); color: var(--ink); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; } .geo-answer-card b { color: var(--blue); } .geo-answer-card p { color: rgba(11,20,55,0.72); } .geo-answer-card b { display: block; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 18px; margin-bottom: 8px; } .geo-answer-card p { margin: 0; color: rgba(13,13,13,0.72); line-height: 1.65; } .geo-primer { background: var(--off-white); color: var(--black); } .geo-primer-inner { max-width: 1060px; margin: 0 auto; } .geo-primer p { font-size: 19px; line-height: 1.85; color: #333; max-width: 860px; } .geo-compare-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(13,13,13,0.1); border: 1px solid rgba(13,13,13,0.12); border-radius: 8px; overflow: hidden; } .geo-compare-grid > div { background: #fff; padding: 34px; } .geo-compare-grid span, .geo-step-card span { font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--blue); font-weight: 700; } .geo-compare-grid strong { display: block; font-size: 28px; margin: 12px 0; color: var(--black); } .geo-compare-grid p { font-size: 15px; line-height: 1.7; color: var(--gray-dark); } .geo-playbook { background: var(--black); color: var(--white); } .geo-playbook .section-label { margin-left: -2px; } .geo-primer .section-label { margin-left: -2px; } .geo-step-grid { max-width: 1320px; margin: 48px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .geo-step-card { min-height: 280px; padding: 30px; background: var(--card-dark); border: 1px solid rgba(255,255,255,0.08); transition: transform 0.2s, border-color 0.2s, background 0.2s; } .geo-step-card:hover { transform: translateY(-3px); border-color: rgba(200,244,87,0.45); background: var(--card-dark-hover); } .geo-step-card h3 { margin: 24px 0 14px; font-size: 22px; line-height: 1.25; color: var(--white); letter-spacing: 0; } .geo-step-card p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.65); font-weight: 300; } .insights-redesign-hero { padding-top: 168px; padding-bottom: 96px; background: linear-gradient(90deg, rgba(13,13,13,0.96), rgba(13,13,13,0.76)), linear-gradient(135deg, #071736 0%, #0d0d0d 58%, #181c12 100%); } .insights-redesign-hero h1 { max-width: 900px; font-size: clamp(42px, 6vw, 78px); line-height: 1.02; letter-spacing: 0; color: var(--white); margin: 18px 0 24px; } .insights-redesign-hero h1 span { color: var(--accent); } .insights-redesign-hero p { max-width: 680px; font-size: 18px; line-height: 1.75; color: rgba(255,255,255,0.68); } .insights-redesign-list { background: var(--off-white); color: var(--black); } .insight-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 42.5%); justify-content: space-between; gap: 24px; row-gap: 64px; } .insight-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 300px; background: #fff; border: 1px solid var(--gray-light); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .insight-card.featured { grid-column: 1 / -1; grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr); min-height: 430px; } .insight-card:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 18px 44px rgba(9,31,107,0.08); } .insight-visual { display: block; min-height: 100%; background-color: #091F6B; background-size: cover; background-position: center; } .insight-visual-brief { background-image: url('/assets/insights/westoeast-insights-rewriting-the-b2b-content-brief.svg'); } .insight-visual-drift { background-image: url('/assets/insights/westoeast-insights-citation-drift-the-test-were-running.svg'); } .insight-visual-border { background-image: url('/assets/insights/westoeast-insights-the-hardest-border-is-no-longer-language.svg'); } .insight-visual-thirty-percent { background-image: url('/assets/insights/westoeast-insights-we-shifted-30-percent-seo-to-geo.svg'); } .insight-visual-tiers { background-image: url('/assets/insights/westoeast-insights-why-we-built-a-5-tier-framework.svg'); } .insight-body { padding: 34px; display: flex; flex-direction: column; justify-content: center; } .insight-body h2 { margin: 18px 0 14px; font-size: clamp(22px, 3vw, 40px); line-height: 1.13; letter-spacing: 0; } .insight-card:not(.featured) .insight-body h2 { font-size: 22px; } .insight-body p { font-size: 15px; line-height: 1.8; color: #4a4a4a; } .insight-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 11px; letter-spacing: 2px; color: var(--gray-mid); text-transform: uppercase; } @media (max-width: 980px) { .geo-hero-grid { grid-template-columns: 1fr; gap: 44px; } .geo-signal-panel { min-height: auto; } .geo-hero-copy .hero-actions { margin-bottom: 0; } .geo-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .insight-grid { grid-template-columns: 1fr; } .insight-card, .insight-card.featured { grid-template-columns: 1fr; } /* 单栏后 featured body 的非对称 padding(左18右0)会让文字框偏移→归零,回到卡片对称内边距,居中 */ .insight-card.featured .insight-body { padding-left: 0 !important; padding-right: 0 !important; } .insight-visual { min-height: 260px; } } @media (max-width: 640px) { .geo-redesign-hero, .insights-redesign-hero { padding: 132px 24px 64px; min-height: auto; } .geo-hero-copy h1, .insights-redesign-hero h1 { font-size: clamp(34px, 11vw, 48px); } .geo-compare-grid, .geo-step-grid { grid-template-columns: 1fr; } .geo-step-card { min-height: 0; padding: 24px; } .insights-redesign-list { padding: 64px 24px; } .insight-body { padding: 26px; } .insight-visual { min-height: 210px; } } .text-center { text-align: center; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-48 { margin-bottom: 48px; } /* ===================================================================== LANG-EN — typography overrides for English pages English text runs longer than Chinese and needs looser line-height, neutralized negative letter-spacing, and promoted .en spans where they are the primary heading (not a decorative overline). ===================================================================== */ /* Inner-hero H1 on EN pages: the .en span IS the title, not an overline. Promote it to full heading size + weight instead of 0.4em/300. */ .lang-en .inner-hero h1 { letter-spacing: 0; line-height: 1.1; } .lang-en .inner-hero h1 .en { display: block; font-size: 1em; font-weight: 900; letter-spacing: 0; color: var(--white); margin-bottom: 0; text-transform: uppercase; } /* 品牌字标 westOeast 在全大写标题里保持原始大小写(小写w+大写O是核心识别); 要整个标题全大写(含 WESTOEAST)就删掉这条 */ .lang-en .inner-hero h1 .en .wordmark { text-transform: none; } /* Home hero: loosen the very tight -2px spacing on long English headlines. */ .lang-en .hero-title { letter-spacing: 0; line-height: 1.05; } .lang-en .hero-title .en { letter-spacing: 1px; } /* Section titles: English runs longer, so loosen tracking and lineheight. */ .lang-en .section-title { letter-spacing: 0; line-height: 1.15; } .lang-en .section-title .en { letter-spacing: 2px; } /* Body copy: English reads better with slightly more breathing room. */ .lang-en .hero-desc, .lang-en .inner-hero p { line-height: 1.7; } /* Card titles: English titles often wrap — keep them readable. */ .lang-en .solution-card h3, .lang-en .case-card h3, .lang-en .case-card-caption h3, .lang-en .star-v2-title, .lang-en .method-card h3 { letter-spacing: 0; line-height: 1.3; } /* Nav & buttons: avoid squeezing EN labels. */ .lang-en .btn, .lang-en .cta-btn, .lang-en .form-submit, .lang-en .nav-link { letter-spacing: 0.3px; } /* Stats / numbers: keep tight but loosen label tracking for EN. */ .lang-en .hero-stat-label, .lang-en .stat-label { letter-spacing: 1px; } /* STAR model secondary Chinese label (the .star-v2-en slot holds CN on EN pages as a subtle bilingual accent). Make it smaller & lighter. */ .lang-en .star-v2-en { font-size: 12px; font-weight: 300; letter-spacing: 0; opacity: 0.7; } /* Office secondary Chinese city name on EN pages. */ .lang-en .office-city-en { font-size: 13px; font-weight: 300; opacity: 0.6; letter-spacing: 0; } /* ===================================================================== MOBILE NAV — at <=640px, move language switcher + CTA into the drawer so the header bar doesn't cramp/overlap logo at 375px width. The desktop .nav-right (lang+CTA) hides; .nav-mobile-extras shows inside the drawer. ===================================================================== */ .nav-mobile-extras { display: none; } @media (max-width: 640px) { .nav-right { display: none; } .nav-mobile-extras { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); } .nav-cta-mobile { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--black); padding: 14px 24px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1px; white-space: nowrap; align-self: flex-start; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .nav-cta-mobile:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(196,240,42,0.35); } .nav-lang-mobile { display: flex; align-items: center; gap: 10px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 13px; letter-spacing: 2px; } .nav-lang-mobile a { color: rgba(255,255,255,0.55); text-decoration: none; padding: 4px 2px; transition: color 0.2s ease; } .nav-lang-mobile a.active { color: var(--accent); } .nav-lang-mobile a:hover { color: var(--white); } .nav-lang-sep { color: rgba(255,255,255,0.25); } } /* ===================================================================== MOBILE CASE DETAIL HERO — longer EN titles wrap to 3 lines and get clipped behind the fixed nav at 375px. Increase top padding. ===================================================================== */ @media (max-width: 640px) { .case-detail-hero { padding: 140px 24px 56px; } .case-detail-title { font-size: clamp(28px, 7vw, 36px); line-height: 1.15; letter-spacing: 0; } .case-detail-tags { margin-bottom: 18px; gap: 8px; } .case-detail-tag { font-size: 10px; padding: 5px 10px; letter-spacing: 1.5px; } } /* ===================================================================== MOBILE STAR "1+4" STAGE — the services page pillar cards use 2–3 column grids and generous card padding that overflow at 375px. On mobile we collapse to one column per row and dial padding down so the blue core card fits within the viewport without horizontal scroll. ===================================================================== */ @media (max-width: 900px) { .star-v2-stage { padding: 0 32px; gap: 28px; } .star-v2-card { padding: 32px 28px; } .star-v2-card.star-core { padding: 40px 28px; } .star-pillar-list { grid-template-columns: repeat(2, 1fr); gap: 24px; } .star-v2-pillars { grid-template-columns: 1fr; } } @media (max-width: 640px) { .star-v2-stage { padding: 0 20px; gap: 24px; margin-top: 48px; } .star-v2-card { padding: 28px 20px; } .star-v2-card.star-core { padding: 36px 22px; } .star-v2-card.star-core::before { width: 120px; height: 120px; } .star-v2-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; } .star-v2-code { font-size: 28px; } .star-core .star-v2-code { font-size: 32px; } .star-v2-cn { font-size: 19px; } .star-core .star-v2-cn { font-size: 22px; } .star-v2-en { margin-left: 0; font-size: 10px; letter-spacing: 1.8px; } .star-v2-intro { font-size: 14px; line-height: 1.8; margin-bottom: 24px; } .star-core .star-v2-intro { font-size: 15px; } .star-pillar-list { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; } .star-pillar-item { gap: 14px; } .star-pillar-idx { font-size: 11px; min-width: 24px; } .star-pillar-title { font-size: 14px; } .star-pillar-desc { font-size: 12.5px; line-height: 1.75; } .star-quote { padding: 16px 18px; font-size: 13px; } .star-source { padding: 16px 20px; margin: 40px auto 0; font-size: 12.5px; } } /* ===================================================================== */ /* ==== REVIEW OVERRIDES —— 追加于文件末尾,不改动原规则 ============== */ /* ===================================================================== */ /* [字体铁律] 加载 Google Sans Flex(拉丁/数字),中文回退 Noto Sans SC。 styles.css 早已写满 'Google Sans Flex' 声明,此前因未加载而静默回退系统字体, 加上此 @font-face 后全部生效。 */ /* [GoogleSansFlex_9pt 本地托管] 从 jsdelivr 远程改为本地 woff2,国内服务器稳定加载; 保留 unicode-range:仅英文/数字用 GSF,中文继续走思源黑体。Light300-Black900 六档。 */ @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 300; src: url(/fonts/GoogleSansFlex_9pt-Light.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/GoogleSansFlex_9pt-Regular.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/GoogleSansFlex_9pt-Medium.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/GoogleSansFlex_9pt-SemiBold.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/GoogleSansFlex_9pt-Bold.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 900; src: url(/fonts/GoogleSansFlex_9pt-Black.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'GoogleSansFlex_9pt'; font-style: normal; font-display: swap; font-weight: 300; src: url(/fonts/GoogleSansFlex_9pt-Light.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'GoogleSansFlex_9pt'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/GoogleSansFlex_9pt-Regular.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'GoogleSansFlex_9pt'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/GoogleSansFlex_9pt-Medium.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'GoogleSansFlex_9pt'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/GoogleSansFlex_9pt-SemiBold.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'GoogleSansFlex_9pt'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/GoogleSansFlex_9pt-Bold.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'GoogleSansFlex_9pt'; font-style: normal; font-display: swap; font-weight: 900; src: url(/fonts/GoogleSansFlex_9pt-Black.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* [断句/寡字寡行 — 全站] 中文关键:word-break:keep-all 只在标点处断行, 不再把"价值"这类词拆到两行;line-break:strict 收紧 CJK 断行规则。 text-wrap:pretty 兜底优化末行。 */ p, li, .clients-strip-desc, .star-preview-desc, .star-preview-source, .method-preview-desc, .service-desc, .star-pillar-desc, .star-pillar-title, .hero-sub, .section-sub, [class*="-desc"], [class*="-intro"], [class*="-lead"] { word-break: keep-all; line-break: strict; text-wrap: pretty; } h1, h2, h3, .section-title, .hero-title { text-wrap: balance; word-break: keep-all; } /* [服务页竖排 bug] GLF/PDTF 是半宽卡,内部 3 列被中文 min-content 挤成一字一行。 窄卡(.star-v2-card)里的子项改单列堆叠,整宽的 PMF(.star-core)保持 3 列不变。 */ .star-v2-card .star-pillar-list { grid-template-columns: 1fr; gap: 18px; } /* [Logo 墙] 去边框 + 提升可见度 + 统一尺寸;SAP / OZON 保持原大小,其余放大 20% */ .clients-strip-grid { border: none; } .client-logo-wrap { border: none; } .client-logo { max-height: 36px; /* 其余 logo 放大约 20%(30 → 36) */ max-width: 150px; filter: grayscale(100%); opacity: 0.82; /* 由 50% 提到 82%,解决浅色 logo 看不见 */ } .client-logo-wrap[title="SAP"] .client-logo, .client-logo-wrap[title="OZON"] .client-logo { max-height: 30px; /* SAP / OZON 维持原尺寸 */ max-width: 132px; } /* [服务卡] icon 移右上角缩小;中文在上、英文在下(HTML 已调序) */ .service-card { position: relative; } .service-icon { position: absolute; top: 22px; right: 18px; margin: 0; } .service-icon .sol-icon { width: 26px; height: 26px; } .service-card:hover .service-icon { transform: none; } .service-name { margin-bottom: 4px; } .service-en { margin-top: 0; margin-bottom: 16px; } /* ===================================================================== */ /* ==== REVIEW OVERRIDES —— 追加于文件末尾,不改动原规则 ============== */ /* ===================================================================== */ /* [字体铁律] 加载 Google Sans Flex(拉丁/数字),中文回退 Noto Sans SC。 styles.css 早已写满 'Google Sans Flex' 声明,此前因未加载而静默回退系统字体, 加上此 @font-face 后全部生效。 */ /* [断句/寡字寡行 — 全站] 中文关键:word-break:keep-all 只在标点处断行, 不再把"价值"这类词拆到两行;line-break:strict 收紧 CJK 断行规则。 text-wrap:pretty 兜底优化末行。 */ p, li, .clients-strip-desc, .star-preview-desc, .star-preview-source, .method-preview-desc, .service-desc, .star-pillar-desc, .star-pillar-title, .hero-sub, .section-sub, [class*="-desc"], [class*="-intro"], [class*="-lead"] { word-break: keep-all; line-break: strict; text-wrap: pretty; } h1, h2, h3, .section-title, .hero-title { text-wrap: balance; word-break: keep-all; } /* [服务页竖排 bug] GLF/PDTF 是半宽卡,内部 3 列被中文 min-content 挤成一字一行。 窄卡(.star-v2-card)里的子项改单列堆叠,整宽的 PMF(.star-core)保持 3 列不变。 */ .star-v2-card .star-pillar-list { grid-template-columns: 1fr; gap: 18px; } /* [Logo 墙] 去边框 + 压暗可见 + 逐个微调尺寸 */ .clients-strip-grid { border: none; } .client-logo-wrap { border: none; } .client-logo { max-height: 36px; max-width: 150px; filter: grayscale(100%) brightness(0.5); /* 压暗:浅色 logo 变可见深灰 */ opacity: 0.9; } /* [Logo 墙 v2] 改彩色 + 整体居中(含落单项居中);覆盖上面的灰度与网格 */ .clients-strip-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px 32px; border: none; max-width: 1320px; margin: 0 auto; padding: 24px 16px; } .client-logo-wrap { flex: 0 0 auto; width: 140px; height: 60px; aspect-ratio: auto; padding: 6px 10px; border: none; background: transparent; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .client-logo { filter: none; opacity: 1; } .client-logo-wrap:hover { transform: translateY(-2px); } /* 红框组缩小约 20%(中/英 title 双匹配,ZH+EN 共用) */ .client-logo-wrap[title="DHL"] .client-logo, .client-logo-wrap[title="海信"] .client-logo, .client-logo-wrap[title="Hisense"] .client-logo, .client-logo-wrap[title="派安盈"] .client-logo, .client-logo-wrap[title="Payoneer"] .client-logo { max-height: 29px; max-width: 124px; } .client-logo-wrap[title="OZON"] .client-logo { max-height: 24px; max-width: 110px; } /* 蓝框:ASU 缩小约 10% */ .client-logo-wrap[title="亚利桑那州立大学"] .client-logo, .client-logo-wrap[title="Arizona State University"] .client-logo { max-height: 32px; max-width: 140px; } /* SAP 维持 */ .client-logo-wrap[title="SAP"] .client-logo { max-height: 39px; max-width: 172px; } /* 小红书是 App 图标(方块),跟随全墙灰度统一,仅限制为方形尺寸 */ .client-logo-wrap[title="小红书"] .client-logo { max-height: 58px; max-width: 58px; } .client-logo-wrap[title="汉得"] .client-logo, .client-logo-wrap[title="Hand Enterprise Solutions"] .client-logo { max-height: 60px; max-width: 203px; } /* AliExpress(速卖通)偏小 → 放大 */ .client-logo-wrap[title="速卖通"] .client-logo, .client-logo-wrap[title="AliExpress"] .client-logo { max-height: 91px; max-width: 308px; } /* [英文副标题] .section-title .en 这一层级全站缩小 30%(0.55em → 0.385em) */ .section-title .en { font-size: 0.385em; } /* [Hero] 固定 16:9 横版,不再被拉成整屏高(原 min-height:100vh) */ .hero { min-height: 600px; aspect-ratio: 16 / 9; } @media (max-width: 768px){ .hero { aspect-ratio: auto; min-height: auto; } } /* [按钮统一] 全站按钮一套框(radius/padding/gap/font/hover 一致);颜色按语义:绿=主行动 CTA,蓝=查看更多 */ .star-preview-cta, .about-cta, .cases-preview-more a, .method-preview-cta, .services-more a, .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 10px; font-family: 'Google Sans Flex', 'GoogleSansFlex_9pt', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 1px; padding: 16px 44px; border: none; border-radius: 8px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } /* 绿色:主行动 CTA(hero / 联系) */ .btn-primary, .btn-secondary { background: var(--accent); color: var(--black); } .btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,240,42,0.3); } /* 蓝色:查看完整/全部 → */ .star-preview-cta, .about-cta, .cases-preview-more a, .method-preview-cta, .services-more a { background: var(--blue); color: #fff; } .star-preview-cta:hover, .about-cta:hover, .cases-preview-more a:hover, .method-preview-cta:hover, .services-more a:hover { background: #1E75FF; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(1,106,255,0.3); } /* nav 按钮:保持小尺寸,框(radius 2px)与上面一致 */ .nav-cta, .nav-cta-mobile { border-radius: 8px; } /* [五星图布局] 上提 + 左移到红圈理想位置;两个旋钮:margin-top 调上下、justify-content 调左右 */ .star-preview-img { justify-content: flex-start; margin-top: -110px; transform: translateX(-48px); } .star-preview-img img { max-width: 460px; } @media (max-width: 960px) { .star-preview-img { justify-content: center; margin-top: 16px; } .star-preview-img img { max-width: 330px; } } /* [黑色滚动条] 高度缩约 30%(padding 32→18);保持水平/垂直居中 */ .arrow-divider { padding: 18px 24px; justify-content: center; align-items: center; } /* [版块停靠 / scroll-snap] 干净停靠在每个版块起点(proximity,不强制锁屏)。 scroll-padding-top 由 site.js 实时设为 navbar 当前高度,确保停靠位贴在 navbar 下沿、不露出上一块边缘。 */ html { scroll-snap-type: y proximity; scroll-padding-top: 60px; } .hero, .inner-hero, .about, .about-mission, .offices-section, .certs-section, .clients-strip, .cta-section, .star-preview, .star, .method-preview, .method, .services, .services-detail, .featured, .cases-preview, .cases-list, .arch-section, .contact-section, .contact-cta-banner, .geo-redesign-hero, .geo-primer, .geo-playbook, .case-detail-hero, .case-stats, .case-content, .case-related { scroll-snap-align: start; } /* [服务卡] icon 移右上角缩小;中文在上、英文在下(HTML 已调序) */ .service-card { position: relative; } .service-icon { position: absolute; top: 22px; right: 18px; margin: 0; } .service-icon .sol-icon { width: 26px; height: 26px; } .service-card:hover .service-icon { transform: none; } .service-name { margin-bottom: 4px; } .service-en { margin-top: 0; margin-bottom: 16px; } /* [A6 全局孤行/寡字] 正文自动避免单字掉行;标题尽量均衡断行 —— 一条规则全站生效 */ p, li, .hero-desc, .star-preview-desc, .clients-strip-desc, .cta-desc, .services-desc, .about-desc { text-wrap: pretty; } h1, h2, .section-title, .cta-title, .hero-title { text-wrap: balance; } /* [手机 logo 墙·终版] 放在文件末尾,确保盖过前面 v2 的固定 190px;两列、缩小、尺寸统一 */ @media (max-width: 520px) { .clients-strip-grid { gap: 18px 14px; } .client-logo-wrap { width: 42%; padding: 10px 8px; } .client-logo-wrap[title] .client-logo { max-height: 26px; max-width: 100%; } } /* [手机·五星范式·终版] grid 在窄屏把 copy 撑溢出;直接块级堆叠,copy/正文满宽换行 */ @media (max-width: 960px) { .star-preview .star-preview-grid { display: block; } .star-preview .star-preview-copy { max-width: 100%; margin-bottom: 32px; } .star-preview-desc, .star-preview-source { max-width: 100%; } .star-preview-img { margin-top: 0; } } /* [三区块加高·移动端收口] 桌面 +30% 高度,手机不需要,<=900 收回正常间距 */ @media (max-width: 900px) { .method-preview { padding-top: 64px; padding-bottom: 64px; } .about { padding-top: 64px; padding-bottom: 64px; } .cta-section { padding-top: 80px; padding-bottom: 80px; } } /* [关于页·七城世界地图] 地图为主视觉,城市卡片在下方给角色信息;手机隐藏地图只留卡片 */ .world-map { display: block; width: 100%; max-width: 1080px; margin: 48px auto 12px; } .offices-section .offices-grid { margin-top: 20px; } @media (max-width: 760px) { .world-map { display: none; } .offices-section .offices-grid { margin-top: 40px; } } /* ===================================================================== SERVICE ARCHITECTURE — orbital wireframe (B&W first pass) ===================================================================== */ /* ============== 服务架构 (重做版式:蓝色三列布局，照搬 PPT 设计稿) ============== */ .arch-section { position: relative; background: var(--off-white); color: #1a1a1a; padding: 32px 60px 96px; overflow: hidden; } .arch-section .arch-chev { position: absolute; top: 32px; right: 56px; font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: 56px; font-weight: 500; color: var(--blue); line-height: 1; z-index: 2; pointer-events: none; } .arch-wrap { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 220px 1fr 380px; align-items: center; gap: 48px; } /* 服务架构顶部标题区(恢复:image 3 红框"原本的标题还是要的") */ .arch-header { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto 16px; color: #1a1a1a; } .arch-header .section-label { color: var(--gray-mid); } .arch-header .arch-title { color: var(--black); /* 字号继承默认 .section-title:clamp(32px, 4vw, 52px),和其他 section 标题一致 */ margin: 0 0 18px; } .arch-header .arch-title .en { color: rgba(255,255,255,0.55); } .arch-header .arch-desc { color: #555; font-size: 14.5px; line-height: 1.7; max-width: 720px; margin: 0; font-weight: 300; } .arch-header .arch-desc strong { font-weight: 700; color: inherit; } @media (max-width: 700px) { .arch-header { margin-bottom: 32px; } } /* === 左:三个胶囊标签 + 上下分隔的 ∧ 箭头 === */ .arch-pills { /* 重做：绝对定位每个 pill，让 y 与右侧圆内 label 精确对齐 方案 中心 y≈8%、智能增长飞轮 中心 y≈42%、五星范式 中心 y≈80% */ position: relative; display: block; height: 400px; /* 与 .arch-orbit-stack max-width 400 等高 */ align-self: center; } /* 3 个 pill 各自 y 中心对齐对应 label 的 y 中心 */ .arch-pills > .arch-pill:nth-child(1) { position: absolute; top: 8%; left: 0; right: 0; transform: translateY(-50%); margin: 0; } .arch-pills > .arch-pill:nth-child(3) { position: absolute; top: 42%; left: 0; right: 0; transform: translateY(-50%); margin: 0; } .arch-pills > .arch-pill:nth-child(5) { position: absolute; top: 80%; left: 0; right: 0; transform: translateY(-50%); margin: 0; } /* 2 个 arrow 放在相邻 pill 中点 */ .arch-pills > .arch-pill-arrow:nth-child(2) { position: absolute; top: 25%; left: 0; right: 0; transform: translateY(-50%); margin: 0; } .arch-pills > .arch-pill-arrow:nth-child(4) { position: absolute; top: 61%; left: 0; right: 0; transform: translateY(-50%); margin: 0; } .arch-pill { background: var(--blue); color: #fff; padding: 18px 24px; /* 调整为整偶高度，避免 translateY(-50%) 出现 0.5 像素 */ border-radius: 9999px; /* 真正的 capsule 形状，与高度无关，所有 pill 圆头完整一致 */ text-align: center; font-size: 17px; line-height: 1.4; /* 锁定行高以稳定整数高度 */ font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-sans); box-shadow: 0 4px 18px rgba(1,106,255,0.22); } .arch-pill-arrow { font-size: 22px; color: var(--gray-mid); text-align: center; font-weight: 700; line-height: 1; margin: -2px 0; font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; } /* === 中:三层同心圆 === */ .arch-orbit-stack { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; margin: 0 auto; } .arch-c { position: absolute; border-radius: 50%; } /* 外圆占满父容器,mid/inner 圆贴底排列(三圆底部对齐) */ .arch-c-outer { inset: 0; background: #2849ff; } .arch-c-mid { inset: 22% 11% 0 11%; background: #5b9bff; } .arch-c-inner { inset: 61% 30.5% 0 30.5%; /* 内圆贴底,直径 39%(原 26% 放大 1.5 倍) */ background: var(--accent); } @media (prefers-reduced-motion: reduce) { .arch-dash { transition: none; } } .arch-c-label { position: absolute; left: 50%; transform: translateX(-50%); color: #fff; font-size: clamp(13px, 1.45vw, 17px); font-weight: 600; font-family: var(--font-sans); text-align: center; line-height: 1.2; white-space: nowrap; text-transform: uppercase; } /* 外圆"方案":在中圆顶部上方,约外圆 11% 位置(中圆 inset 11% 顶 = 44px @ 400stack,这里留 4-5% 间隙) */ .arch-c-outer > .arch-c-label { top: 5%; } /* 中圆"智能增长飞轮":中圆内顶部 1/4,即中圆 25% 位置,相对中圆自身高度 */ .arch-c-mid > .arch-c-label { top: 22%; } /* 内圆"五星范式":lime 圆居中 */ .arch-c-inner > .arch-c-label { top: 50%; transform: translate(-50%, -50%); color: #0a1f5c; white-space: normal; } /* === 右:十项解决方案清单 === */ .arch-list { background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 16px 40px rgba(0,0,0,0.12); font-family: var(--font-sans); color: #2a2a2a; /* 在 arch-wrap 整体上移基础上,再单独上移 10% */ transform: translateY(-10%); } /* 左胶囊组:进入视口后,从下到上依次淡入(复用 .fade-in→.visible 机制) */ .arch-pills.fade-in { /* 容器自身不淡入,让子元素分别 stagger */ opacity: 1; transform: none; } .arch-pills.fade-in > * { opacity: 0; /* 注意：pills 用 absolute + translateY(-50%) 居中到对应 label y%， 故 fade-in 起止态必须保留 translateY(-50%) 不被复位 */ transform: translateY(calc(-50% + 18px)); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.22,1,.36,1); } .arch-pills.fade-in.visible > * { opacity: 1; transform: translateY(-50%); } /* nth-child(5)=战略基座 最先现, nth-child(1)=解决方案 最后现 */ .arch-pills.fade-in.visible > *:nth-child(5) { transition-delay: 0s; } .arch-pills.fade-in.visible > *:nth-child(4) { transition-delay: 0.15s; } .arch-pills.fade-in.visible > *:nth-child(3) { transition-delay: 0.3s; } .arch-pills.fade-in.visible > *:nth-child(2) { transition-delay: 0.45s; } .arch-pills.fade-in.visible > *:nth-child(1) { transition-delay: 0.6s; } @media (prefers-reduced-motion: reduce) { .arch-pills.fade-in > * { opacity: 1 !important; transform: translateY(-50%) !important; transition: none !important; } } .arch-list-head { background: #016AFF; color: #fff; padding: 16px 22px; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .arch-list-body { list-style: none; margin: 0; padding: 0; } .arch-list-body li { padding: 13px 22px; border-bottom: 1px solid #eef0f3; font-size: 13px; color: #2a2a2a; line-height: 1.5; } .arch-list-body li:last-child { border-bottom: none; } .arch-li-zh { font-weight: 600; text-transform: uppercase; } .arch-li-en { font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: 9px; color: #6b7280; letter-spacing: 0.08em; margin-left: 6px; } /* responsive */ @media (max-width: 1024px) { .arch-wrap { grid-template-columns: 1fr; gap: 40px; max-width: 560px; } /* 移动端：还原 pills 为正常 flex 流，取消 desktop 的 absolute 定位 用 :nth-child(n) 与 desktop 规则 specificity 对齐，靠 source order 覆盖 */ .arch-pills { max-width: 320px; margin: 0 auto; height: auto; display: flex; flex-direction: column; gap: 12px; } .arch-pills > .arch-pill:nth-child(n), .arch-pills > .arch-pill-arrow:nth-child(n) { position: static; transform: none; top: auto; left: auto; right: auto; margin: 0; } /* fade-in 动画在 mobile 也要把 translateY(-50%) 复位为 0 */ .arch-pills.fade-in > *:nth-child(n) { transform: translateY(18px); } .arch-pills.fade-in.visible > *:nth-child(n) { transform: translateY(0); } .arch-list { max-width: 100%; } } @media (max-width: 700px) { .arch-section { padding: 56px 16px 72px; } .arch-section .arch-chev { top: 16px; right: 18px; font-size: 36px; } } /* ===== [star 卡片抬头层级·按类型重排] ===== badge 绝对定位到右上;CORE = code+cn 在上、en 在下;PILLAR = en eyebrow 在上、code+cn 在下 */ .star-v2-head { padding-right: 140px; } .star-v2-badge { position: absolute; top: 0; right: 0; margin: 0; } .star-v2-en { margin-left: 0; } /* CORE:第一行 缩写+中文,第二行 英文 */ .star-core .star-v2-code { order: 1; } .star-core .star-v2-cn { order: 2; } .star-core .star-v2-en { order: 3; flex-basis: 100%; width: 100%; margin-top: 4px; } /* PILLAR:第一行 英文 eyebrow,第二行 缩写+中文 */ .star-pillar .star-v2-en { order: 1; flex-basis: 100%; width: 100%; margin-bottom: 6px; } .star-pillar .star-v2-code { order: 2; } .star-pillar .star-v2-cn { order: 3; } @media (max-width: 760px) { .star-v2-head { padding-right: 96px; } } /* [star pillar 标题统一用蓝 + 卡内 intro 缩行距] */ .star-pillar .star-v2-cn { color: var(--blue); } .star-v2-intro { line-height: 1.68; } /* [七城卡片·轻盈居中] 去框线/底色,flex 居中,字重调轻 */ .offices-section .offices-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 64px; background: none; max-width: 1080px; margin: 28px auto 0; } .offices-section .office-card { background: none; padding: 0; border-top: none; width: 150px; } .offices-section .office-city { font-weight: 700; font-size: 23px; margin-bottom: 6px; } .offices-section .office-role { color: rgba(255,255,255,0.5); } @media (max-width: 760px) { .offices-section .offices-grid { gap: 30px 40px; } } /* ============================================================ * Global Ecosystem · world-map component (in about / offices) * 追加于 2026-05-31 * ============================================================ */ .offices-section.wo-map-section{ background:#F2F2F2 !important; padding:28px 0 64px; } .offices-section.wo-map-section .section-title{ color:var(--black); margin-top: 0; } .offices-section.wo-map-section .section-label{ color:#6B7080; margin-top: 0; } .wo-stage{ width:100%; max-width:1100px; margin:20px auto 0; padding:0 20px; } .wo-globe{ position:relative; width:100%; aspect-ratio:2.535; overflow:visible; perspective:1500px; perspective-origin:50% 35%; } .wo-floor{ position:absolute; inset:0; transform:rotateX(26deg) translateX(-5%); transform-style:preserve-3d; } .wo-floor .wo-cv{ position:absolute; inset:0; width:100%; height:100%; } .wo-city{ position:absolute; transform:translate(-50%,-50%) rotateX(-26deg); z-index:5; transform-style:preserve-3d; } .wo-city .dot{ position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:#016AFF; box-shadow:0 0 0 1.5px #F2F2F2, 0 0 10px 2px rgba(1,106,255,.30); } .wo-city.hub .dot{ width:12px; height:12px; margin:-6px; box-shadow:0 0 0 2px #F2F2F2, 0 0 18px 4px rgba(1,106,255,.55), 0 0 38px 12px rgba(1,106,255,.20); } .wo-city .ring{ display:none; } .wo-city.hub .ring{ display:block; position:absolute; left:50%; top:50%; width:36px; height:36px; margin:-18px; border-radius:50%; background:radial-gradient(circle, rgba(1,106,255,.35) 0%, rgba(1,106,255,0) 65%); opacity:0; animation:wo-halo 3.2s ease-out infinite; } .wo-city.hub .ring.r2{ animation-delay:1.6s; } @keyframes wo-halo{ 0%{opacity:.7; transform:scale(.5)} 80%{opacity:0; transform:scale(2.2)} 100%{opacity:0} } .wo-city .lbl{ position:absolute; left:50%; white-space:nowrap; font-family:'Source Han Sans CN','Noto Sans SC','PingFang SC',sans-serif; font-size:13px; font-weight:400; color:#016AFF; line-height:1.25; text-align:center; } .wo-city .lbl small{ display:block; font-family:'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-variation-settings:'opsz' 9; font-size:9.5px; font-weight:300; letter-spacing:.14em; color:rgba(1,106,255,.65); text-transform:uppercase; margin-top:2px; } .wo-city .lbl.above{ bottom:18px; transform:translateX(-50%); } .wo-city .lbl.below{ top:18px; transform:translateX(-50%); } .wo-city.hub .lbl{ font-size:13px; font-weight:600; color:#181A23; } .wo-city.hub .lbl small{ color:#6B7080; font-weight:300; } .wo-city.hub .lbl.above{ bottom:30px; } .wo-city.hub .lbl.below{ top:30px; } .wo-strip{ display:flex; justify-content:space-between; align-items:flex-start; margin:32px auto 0; padding:0 80px; width:100%; flex-wrap:wrap; gap:12px; } .wo-strip .ci{ text-align:center; min-width:90px; } .wo-strip .ci .zh{ font-family:'Source Han Sans CN','Noto Sans SC','PingFang SC',sans-serif; font-weight:400; color:#181A23; font-size:11px; line-height:1.3; letter-spacing:.02em; } .wo-strip .ci.major .zh{ font-weight:600; } .wo-strip .ci .en{ font-family:'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-variation-settings:'opsz' 9; font-size:9px; letter-spacing:.16em; color:#6B7080; text-transform:uppercase; margin-top:4px; font-weight:300; } @media (max-width:640px){ .wo-city .lbl{ font-size:11px } .wo-city.hub .lbl{ font-size:13px } .wo-city .lbl small{ display:none } /* [Lili C] 全球布局手机端:动画 canvas 地图 → 静态版 ① 隐藏 .wo-globe(动画点阵+城市环+流光) ② 点阵 PNG 做版块底,20% 透明、撑满 ③ 城市列表竖排、左对齐、每项加蓝色定位针 */ .wo-map-section .wo-globe{ display:none !important; } .wo-map-section .wo-stage{ position:relative; margin-top:6px; padding:18px 20px 4px; } .wo-map-section .wo-stage::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:url(/assets/world-map/world-dots.png) center/contain no-repeat; opacity:.2; } .wo-strip{ position:relative; z-index:1; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:20px; padding:0; } .wo-strip .ci{ text-align:left; min-width:0; padding-left:34px; position:relative; } .wo-strip .ci::before{ content:""; position:absolute; left:0; top:0; width:24px; height:24px; background:url(/assets/icons/pin-blue.svg) center/contain no-repeat; } .wo-strip .ci .zh{ font-size:15px !important; line-height:1.3; } .wo-strip .ci .en{ display:block; font-size:11px; letter-spacing:.06em; margin-top:2px; } } /* ===================================================================== CONTACT — magazine-style right column ===================================================================== */ .contact-info-magazine { display: flex; flex-direction: column; gap: 0; } .contact-info-magazine .ci-block { padding: 56px 48px; position: relative; } .contact-info-magazine .ci-eyebrow { font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: 10px; letter-spacing: 3px; color: var(--gray-mid); font-weight: 500; text-transform: uppercase; margin-bottom: 28px; } .contact-info-magazine .ci-eyebrow-light { color: rgba(255,255,255,0.55); } /* Block 1: Email */ .contact-info-magazine .ci-email-block { background: var(--blue); border: 1px solid rgba(255,255,255,0.18); } .contact-info-magazine .ci-email-block .ci-eyebrow { color: rgba(255,255,255,0.7); } .contact-info-magazine .ci-email-mega { display: block; font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; color: #fff; text-decoration: none; margin-bottom: 24px; line-height: 1.15; letter-spacing: -0.3px; word-break: break-all; border-bottom: 2px solid var(--accent); padding-bottom: 12px; transition: color .25s ease; } .contact-info-magazine .ci-email-mega:hover { color: var(--accent); } .contact-info-magazine .ci-email-sub { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.85; font-weight: 300; margin: 0; } /* Block 2: Offices (dark color block) */ .contact-info-magazine .ci-offices-block { background: var(--blue-deep); color: var(--white); } .contact-info-magazine .ci-offices-list { display: flex; flex-direction: column; } .contact-info-magazine .ci-office { display: grid; grid-template-columns: 36px 1fr auto; align-items: baseline; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.08); transition: padding-left .35s cubic-bezier(.22,1,.36,1); } .contact-info-magazine .ci-office:last-child { border-bottom: none; } .contact-info-magazine .ci-office:hover { padding-left: 8px; } .contact-info-magazine .ci-office-num { font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: 11px; color: var(--accent); font-weight: 600; letter-spacing: 1.5px; } .contact-info-magazine .ci-office-cn { font-size: 17px; font-weight: 600; color: var(--white); } .contact-info-magazine .ci-office-en { font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 2px; font-weight: 500; } /* Block 2: Social + Other Ways（突出:焦点卡） */ .contact-info-magazine .ci-social-block { background: var(--white); border: 1px solid #e6e3da; border-top: 3px solid var(--accent); box-shadow: 0 14px 40px rgba(11,20,55,0.10); } .contact-info-magazine .ci-social-block .ci-eyebrow { color: var(--blue); } .contact-info-magazine .ci-social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 36px; } .contact-info-magazine .ci-social-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 12px; background: var(--off-white); border: 1px solid #e6e3da; border-radius: 10px; color: var(--black); text-decoration: none; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; font-size: 13px; font-weight: 600; } .contact-info-magazine .ci-social-card svg { width: 28px; height: 28px; } .contact-info-magazine .ci-social-card:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-4px); box-shadow: 0 10px 24px rgba(1,106,255,0.28); } .contact-info-magazine .ci-other-row { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid #e6e3da; padding-top: 24px; } .contact-info-magazine .ci-other-link { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; text-decoration: none; color: var(--black); border-bottom: 1px solid #efece5; transition: padding-left .3s cubic-bezier(.22,1,.36,1); } .contact-info-magazine .ci-other-link:last-child { border-bottom: none; } .contact-info-magazine .ci-other-link:hover { padding-left: 8px; } .contact-info-magazine .ci-other-arrow { color: var(--blue); font-size: 18px; font-weight: 700; transition: transform .3s ease; } .contact-info-magazine .ci-other-link:hover .ci-other-arrow { transform: translateX(4px); } .contact-info-magazine .ci-other-text { display: flex; flex-direction: column; gap: 2px; } .contact-info-magazine .ci-other-zh { font-size: 14px; font-weight: 600; } .contact-info-magazine .ci-other-en { font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: 11px; letter-spacing: 1px; color: var(--gray-mid); } @media (max-width: 900px) { .contact-info-magazine .ci-block { padding: 36px 28px; } .contact-info-magazine .ci-social-row { grid-template-columns: 1fr 1fr 1fr; } } /* ===================================================================== SERVICES — 智能增长飞轮 (Image 3) + 五星范式说明 (Image 4) ===================================================================== */ .method-intro{ max-width:780px; margin:24px auto 0; text-align:center; font-size:15px; line-height:1.95; color:rgba(255,255,255,0.6); font-weight:300; } .flyhub{ display:grid; grid-template-columns:1fr auto 1fr; gap:44px; align-items:center; max-width:1120px; margin:64px auto 0; } .flyhub-col{ display:flex; flex-direction:column; gap:28px; } .flyhub-card{ background:var(--blue); padding:26px 28px; transition:transform .3s ease, box-shadow .3s ease; } .flyhub-card:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(1,106,255,.32); } .flyhub-card-head{ display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; color:#fff; margin-bottom:10px; } .flyhub-arrow{ color:var(--accent); font-weight:900; font-size:20px; line-height:1; } .flyhub-card-desc{ font-size:13px; line-height:1.75; color:rgba(255,255,255,.82); font-weight:300; } .flyhub-core{ display:flex; align-items:center; justify-content:center; } .flyhub-svg{ width:240px; height:240px; } @media(max-width:860px){ .flyhub{ grid-template-columns:1fr; gap:24px; } .flyhub-core{ order:-1; margin:0 auto 8px; } .flyhub-svg{ width:200px; height:200px; } } .star-notes{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; max-width:1320px; margin:52px auto 0; border:1px solid var(--gray-light); } .star-note{ padding:32px 24px; border-right:1px solid var(--gray-light); transition:background .3s, color .3s; } /* ============================================================ * 5卡竖排左侧 + 五星图右侧 — 左右两栏布局 * ============================================================ */ .star-layout{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; max-width:1320px; margin:12px auto 0; } .star-layout .star-notes{ grid-template-columns:1fr; margin:0; max-width:none; } .star-layout .star-note{ padding:16px 24px; border-right:none; border-bottom:1px solid var(--gray-light); } .star-layout .star-note:last-child{ border-bottom:none; } .star-layout .star-note-code{ display:inline-block; margin-bottom:6px; font-size:18px; } .star-layout .star-note p{ margin:0; font-size:13px; line-height:1.65; } .star-layout .star-hero{ margin:0; max-width:none; display:flex; justify-content:center; } .star-layout .star-hero-img{ max-width:100%; width:auto; transform:scale(0.7); transform-origin:center; } @media(max-width:860px){ .star-layout{ grid-template-columns:1fr; gap:32px; } .star-layout .star-hero{ order:-1; } } .star-note:last-child{ border-right:none; } .star-note:hover{ background:var(--blue); color:#fff; } .star-note-code{ font-family:'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size:22px; font-weight:700; color:var(--blue); display:block; margin-bottom:14px; transition:color .3s; } .star-note:hover .star-note-code{ color:var(--accent); } .star-note p{ font-size:13px; line-height:1.75; color:#555; transition:color .3s; word-break:normal; overflow-wrap:break-word; } .star-note:hover p{ color:rgba(255,255,255,.92); } @media(max-width:860px){ .star-notes{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .star-note:nth-child(odd){ border-right:1px solid var(--gray-light); } } /* ===================================================================== SERVICES — 锚点导航条 + 返回顶部 ===================================================================== */ .svc-anchors{ position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:14px; padding:0; background:transparent; border:none; opacity:0; pointer-events:none; transition:opacity .35s ease; } .svc-anchors.is-visible{ opacity:1; pointer-events:auto; } .svc-anchor{ display:inline-flex; align-items:center; gap:0; padding:9px; border-radius:8px; background:rgba(13,13,13,0.75); border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:rgba(255,255,255,0.92); text-decoration:none; transition:padding .3s ease, background .3s ease, border-color .3s ease, gap .3s ease; white-space:nowrap; } .svc-anchor-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.45); flex-shrink:0; transition:background .25s ease, box-shadow .25s ease; } .svc-anchor-label{ display:inline-block; font-size:13px; font-weight:700; max-width:0; overflow:hidden; opacity:0; transition:max-width .3s ease, opacity .3s ease, margin .3s ease, padding .3s ease; } .svc-anchor:hover{ padding:9px 18px 9px 12px; gap:10px; background:rgba(9,31,107,0.92); border-color:rgba(200,244,87,0.45); } .svc-anchor:hover .svc-anchor-label{ max-width:240px; opacity:1; margin-left:0; padding-right:4px; } .svc-anchor:hover .svc-anchor-dot{ background:var(--accent); } @keyframes svc-anchor-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,244,87,0.55); } 70% { box-shadow: 0 0 0 10px rgba(200,244,87,0); } } .svc-anchor.active .svc-anchor-dot{ background:var(--accent); animation: svc-anchor-pulse 2.2s ease-out infinite; } .svc-anchor.active{ border-color:rgba(200,244,87,0.55); } /* [V7] 根因修复:原 128px 偏移使这三块停靠在导航栏下方 128px,缺口露出上一块底色 (method 上露 arch 浅底=白边;star 上露 method 黑底=黑带)。归零后贴导航栏下沿干净停靠。 导航点击的偏移由 site.js 单独处理(navH+20),与此无关。 */ #arch, #method, #star{ scroll-margin-top:0; } /* 表单锚点:让 h2 标题完整露出在 sticky nav 下方 */ #bookForm{ scroll-margin-top:120px; } @media(max-width:680px){ .svc-anchors{ padding:10px 16px; gap:8px; } .svc-anchor{ font-size:11px; padding:7px 13px; } } .to-top{ display:none !important; position:fixed; right:28px; bottom:28px; z-index:60; width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; background:var(--accent); color:var(--black); font-size:20px; font-weight:800; line-height:1; box-shadow:0 8px 24px rgba(0,0,0,0.32); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s, transform .3s; } .to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); } .to-top:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,0.4); } /* ===================================================================== HOME — 精选服务能力 · 左右结构（左 sticky 介绍 + 右 carousel） ===================================================================== */ .services{ padding:96px 60px; overflow:hidden; background:#F4F3EF; } .svc-layout{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:start; } .svc-side{ max-width:340px; padding-top:6px; } .svc-side .section-label{ margin-bottom:14px; color:#888; } .svc-side .section-title{ margin-bottom:18px; color:#1a1a1a; } .svc-side-lead{ font-size:15px; line-height:1.85; color:#555; font-weight:300; margin:0 0 28px 0; } .svc-side-cta{ display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff; font-size:14px; font-weight:700; padding:14px 24px; border:1px solid var(--blue); border-radius:8px; transition:background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; white-space:nowrap; box-shadow: 0 4px 14px rgba(1,106,255,0.22); } .svc-side-cta:hover{ background:#0050d9; border-color:#0050d9; color:#fff; transform:translateY(-2px); box-shadow: 0 8px 22px rgba(1,106,255,0.32); } .svc-side-cta-arrow{ transition:transform .25s; } .svc-side-cta:hover .svc-side-cta-arrow{ transform:translateX(4px); } /* HOME — 精选服务能力 · 静态 2×5 grid + stagger 入场(替换原 carousel 版) */ .svc-grid-wrap{ width:100%; min-width:0; } .svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .svc-card{ position:relative; display:flex; flex-direction:row; align-items:center; gap:18px; min-height:96px; padding:20px 24px; background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius: 8px; text-decoration:none; color:#1a1a1a; overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; } .svc-card-num{ font-family:'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size:24px; font-weight:800; line-height:1; color:rgba(0,0,0,0.18); letter-spacing:-0.5px; flex:0 0 auto; width:34px; transition:color .25s ease; } .svc-card-body{ flex:1; min-width:0; margin-top:0; } .svc-card-name{ font-size:18px; font-weight:700; color:#1a1a1a; margin-bottom:4px; line-height:1.3; transition:color .25s ease; } .svc-card-en{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#999; font-weight:600; transition:color .25s ease; } .svc-card-arrow{ position:static; font-size:18px; color:rgba(0,0,0,0.25); flex:0 0 auto; transition:color .25s ease, transform .25s ease; } /* hover:VI 蓝色色块 + 字反白(纯色不渐变,符合 VI 铁律) */ .svc-card:hover{ background:var(--blue); border-color:var(--blue); box-shadow:0 12px 28px rgba(1,106,255,0.18); } .svc-card:hover .svc-card-name{ color:#fff; } .svc-card:hover .svc-card-en{ color:rgba(255,255,255,0.6); } .svc-card:hover .svc-card-num{ color:var(--accent); } .svc-card:hover .svc-card-arrow{ color:#fff; transform:translateX(3px); } /* stagger 入场 — 仅用于 .svc-grid 下,覆盖默认 reveal-up transition,用 animation 加 idx 延迟 */ .svc-grid > .svc-card.reveal-up{ opacity:0; transform:translateY(18px); } .svc-grid > .svc-card.reveal-up.is-in{ animation:svcCardIn .55s cubic-bezier(.22,1,.36,1) forwards; animation-delay:0ms; /* 02-10 与 01 对齐:同时入场,不再 stagger */ } @keyframes svcCardIn{ to{ opacity:1; transform:translateY(0); } } /* 旧 carousel 残留 dots 兜底:任何遗留的 .svc-dots/.svc-dot 直接隐藏 */ .svc-dots, .svc-dot, .svc-carousel-wrap .svc-dots{ display:none !important; } @media(max-width:980px){ .svc-layout{ grid-template-columns:1fr; gap:32px; padding:0 30px; } .svc-side{ max-width:none; } .svc-grid{ grid-template-columns:1fr; gap:10px; } .svc-card{ min-height:80px; padding:16px 18px; } } /* ===================================================================== HOME — 精选服务能力 · 灵动 Bento (GEO横幅 + 9卡 + 大数字水印 + stagger) ===================================================================== */ .services{ padding-top:96px; padding-bottom:96px; overflow:hidden; } .svc-bento{ display:grid; grid-template-columns:340px 1fr; gap:56px; max-width:1320px; margin:0 auto; align-items:start; } .svc-bento-left{ position:sticky; top:120px; } .svc-bento-left .section-title{ margin-bottom:22px; } .svc-bento-lead{ font-size:15px; line-height:1.85; color:rgba(255,255,255,0.5); font-weight:300; max-width:300px; margin-bottom:30px; } .svc-bento-cta{ display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff; font-size:15px; font-weight:700; padding:15px 28px; border-radius:8px; transition:background .25s, transform .25s, box-shadow .25s; } .svc-bento-cta:hover{ background:#1E75FF; transform:translateY(-2px); box-shadow:0 12px 30px rgba(1,106,255,0.4); } .svc-bento-cta-arrow{ transition:transform .25s; } .svc-bento-cta:hover .svc-bento-cta-arrow{ transform:translateX(5px); } .svc-bento-right{ display:flex; flex-direction:column; gap:14px; } /* === GEO Feature Banner === */ .bento-feature{ display:flex; align-items:center; gap:28px; position:relative; background:linear-gradient(135deg,#0a3a8c 0%,#06245c 100%); border:1px solid rgba(200,244,87,0.28); border-radius:8px; padding:30px 34px; overflow:hidden; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .bento-feature::before{ content:''; position:absolute; top:-60%; right:-30%; width:80%; height:220%; pointer-events:none; background:radial-gradient(ellipse at center, rgba(200,244,87,0.22) 0%, transparent 60%); animation:feature-glow 7s ease-in-out infinite alternate; } @keyframes feature-glow{ 0% { transform:translate(0,0) scale(1); opacity:.55; } 100% { transform:translate(-32px,18px) scale(1.1); opacity:.95; } } .bento-feature:hover{ transform:translateY(-4px); border-color:rgba(200,244,87,0.65); box-shadow:0 18px 50px rgba(1,106,255,0.28); } .bento-num-big{ font-family:'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size:64px; font-weight:900; line-height:1; color:rgba(200,244,87,0.85); letter-spacing:-2px; position:relative; z-index:1; flex-shrink:0; } .bento-feature-body{ flex:1; position:relative; z-index:1; min-width:0; } .bento-feature-name{ font-size:24px; font-weight:800; color:#fff; margin-bottom:6px; } .bento-feature-en{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:10px; font-weight:600; } .bento-feature-tag{ font-size:14px; line-height:1.6; color:rgba(255,255,255,0.78); font-weight:300; word-break:normal; } .bento-feature-arrow{ font-size:24px; color:var(--accent); position:relative; z-index:1; transition:transform .3s; flex-shrink:0; } .bento-feature:hover .bento-feature-arrow{ transform:translateX(8px); } /* === 9 卡 Grid === */ .bento-grid9{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .bento-card{ position:relative; overflow:hidden; background:var(--card-dark); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:22px 22px 24px; transition:transform .35s ease, border-color .35s ease, background .35s ease; } .bento-card::before{ content:attr(data-num); position:absolute; right:-12px; bottom:-38px; font-family:'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size:130px; font-weight:900; line-height:1; color:rgba(255,255,255,0.04); pointer-events:none; transition:color .35s ease, transform .35s ease; } .bento-card:hover{ transform:translateY(-5px); border-color:rgba(200,244,87,0.5); background:var(--card-dark-hover); } .bento-card:hover::before{ color:rgba(200,244,87,0.10); transform:translate(-4px,-4px); } .bento-card:hover .bento-name{ color:var(--accent); } .bento-num{ font-family:'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size:12px; font-weight:700; letter-spacing:1.2px; color:rgba(255,255,255,0.32); display:block; margin-bottom:14px; position:relative; z-index:1; } .bento-name{ font-size:17px; font-weight:700; color:#fff; margin-bottom:5px; line-height:1.35; transition:color .3s; position:relative; z-index:1; } .bento-en{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); font-weight:600; position:relative; z-index:1; } /* 入场 stagger（基于站点现有 .fade-in→.visible 机制）*/ .bento-feature.fade-in, .bento-card.fade-in{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; } .bento-feature.fade-in.visible, .bento-card.fade-in.visible{ opacity:1; transform:translateY(0); transition-delay:calc(var(--i, 0) * 65ms); } @media(max-width:980px){ .svc-bento{ grid-template-columns:1fr; gap:36px; } .svc-bento-left{ position:static; } .svc-bento-lead{ max-width:none; } .bento-grid9{ grid-template-columns:repeat(2,minmax(0,1fr)); } .bento-feature{ flex-wrap:wrap; gap:16px; } .bento-num-big{ font-size:48px; } } @media(max-width:560px){ .bento-grid9{ grid-template-columns:1fr; } } /* ============================================================ CASES PAGE (#cv22) — 修复全黑背景 + bento stagger 入场 原因:#cv22 body 选择器无效,所以这页继承了 --black 全黑底 ============================================================ */ #cv22 { background: var(--off-white); color: var(--black); display: block; min-height: 100vh; } /* bento-card 依次浮入,节奏放慢一点 */ #cv22 .bento-card.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); } #cv22 .bento-card.reveal.in { opacity: 1; transform: translateY(0); } #cv22 .bento > .bento-card.reveal:nth-child(1).in { transition-delay: 0ms; } #cv22 .bento > .bento-card.reveal:nth-child(2).in { transition-delay: 90ms; } #cv22 .bento > .bento-card.reveal:nth-child(3).in { transition-delay: 180ms; } #cv22 .bento > .bento-card.reveal:nth-child(4).in { transition-delay: 270ms; } #cv22 .bento > .bento-card.reveal:nth-child(5).in { transition-delay: 360ms; } /* case-card 也放慢一点 + cubic-bezier 缓动 */ #cv22 .case-card.reveal { transition: opacity .6s cubic-bezier(.22,1,.36,1); } /* sec-label 在浅底色已经能看清,不再被压暗 */ /* ============================================================ CC-* CARDS — 从 cases 列表页 #cv22 抽出全局版 用于:详情页"同类项目参考"区 + 首页"精选客户案例"区 跟 cases 列表页 30 张卡视觉一致 ============================================================ */ .case-related-grid .case-card, .cases-preview-grid .case-card{ background:#fff; border:none; border-radius:8px; padding:28px 26px 24px; display:flex; flex-direction:column; min-height:300px; box-shadow:0 1px 3px rgba(13,13,13,0.04), 0 8px 24px rgba(13,13,13,0.03); transition:transform 0.2s, box-shadow 0.2s, background 0.2s; color:inherit; text-decoration: none; } @media (hover: hover) { /* [Lili] 仅鼠标设备触发卡片变蓝;手机/触摸端点击不变色,直接跳转(hover 在触摸端会黏住像 bug) */ .case-related-grid .case-card:hover, .cases-preview-grid .case-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(8,16,50,0.18), 0 6px 18px rgba(1,106,255,0.12); background:#0B1437; } .case-related-grid .case-card:hover .cc-logo-text, .cases-preview-grid .case-card:hover .cc-logo-text{ color:#fff; } .case-related-grid .case-card:hover .cc-case, .cases-preview-grid .case-card:hover .cc-case{ color:rgba(255,255,255,0.5); } .case-related-grid .case-card:hover .cc-title, .cases-preview-grid .case-card:hover .cc-title{ color:#fff; } .case-related-grid .case-card:hover .cc-summary, .cases-preview-grid .case-card:hover .cc-summary{ color:rgba(255,255,255,0.82); } .case-related-grid .case-card:hover .tag-soft, .cases-preview-grid .case-card:hover .tag-soft{ background:var(--blue); color:#fff; } .case-related-grid .case-card:hover .cc-arrow, .cases-preview-grid .case-card:hover .cc-arrow{ color:#fff; transform:translateX(3px); } .case-related-grid .case-card:hover .cc-img, .cases-preview-grid .case-card:hover .cc-img{ border-bottom-color:transparent; } } /* end @media(hover:hover) [Lili 案例卡变蓝仅鼠标] */ /* hover 时不给图片加蓝色蒙版,保持图片本身清晰;只让卡背景和文字区变蓝。 原 rgba(1,106,255,0.18) tint 与照片色彩混合后会"脏",已去除。 */ .case-related-grid .cc-img, .cases-preview-grid .cc-img{ margin:-28px -26px 18px; aspect-ratio:16 / 9; border-radius:8px 8px 0 0; background:#EFEEE9; border-bottom:1.5px dashed #D4D3CE; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; position:relative; } .case-related-grid .cc-img img, .cases-preview-grid .cc-img img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:8px 8px 0 0; } /* 有图时去掉容器底色和 dashed 分隔(避免圆角处透出浅灰边) */ .case-related-grid .cc-img:has(img), .cases-preview-grid .cc-img:has(img){ background: transparent; border-bottom: none; } .case-related-grid .cc-img-label, .cases-preview-grid .cc-img-label{ font-size:10.5px; color:#B8B7B2; letter-spacing:0.08em; font-family:'Google Sans Flex','Noto Sans SC',sans-serif; pointer-events:none; user-select:none; } .case-related-grid .cc-top, .cases-preview-grid .cc-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; min-height:42px; } .case-related-grid .cc-logo-wrap, .cases-preview-grid .cc-logo-wrap{ display:flex; align-items:center; height:40px; } .case-related-grid .cc-logo-text, .cases-preview-grid .cc-logo-text{ font-family:'Google Sans Flex','Noto Sans SC',sans-serif; font-size:25px; font-weight:700; color:var(--black); line-height:1.1; transition:color 0.15s; } .case-related-grid .cc-case, .cases-preview-grid .cc-case{ font-family:'Google Sans Flex','Noto Sans SC',sans-serif; font-size:11px; color:rgba(0,0,0,0.18); letter-spacing:0.12em; padding-top:4px; transition:color 0.2s; } .case-related-grid .cc-title, .cases-preview-grid .cc-title{ font-size:15px; font-weight:600; color:#4a4a4a; line-height:1.45; margin-bottom:10px; transition:color 0.2s; } .case-related-grid .cc-summary, .cases-preview-grid .cc-summary{ font-size:12.5px; line-height:1.7; color:#666; font-weight:300; margin-bottom:auto; transition:color 0.2s; } .case-related-grid .cc-foot, .cases-preview-grid .cc-foot{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:22px; } .case-related-grid .cc-tags, .cases-preview-grid .cc-tags{ display:flex; flex-wrap:wrap; gap:6px; } .case-related-grid .tag-lime, .cases-preview-grid .tag-lime{ display:inline-flex; align-items:center; background:var(--accent); color:#2a3a0a; font-size:11px; font-weight:500; padding:5px 13px; border-radius:8px; white-space:nowrap; } .case-related-grid .tag-soft, .cases-preview-grid .tag-soft{ display:inline-flex; align-items:center; background:var(--blue); color:#fff; font-size:11px; font-weight:500; padding:5px 13px; border-radius:8px; white-space:nowrap; transition:background 0.2s, color 0.2s; } .case-related-grid .cc-arrow, .cases-preview-grid .cc-arrow{ font-size:14px; color:rgba(0,0,0,0.15); flex-shrink:0; margin-left:8px; transition:color 0.15s, transform 0.15s; } @media(max-width:860px){ .case-related-grid{ grid-template-columns:1fr !important; } } /* ============================================================ SERVICES 页底部浮窗 + 回到顶部按钮 ============================================================ */ .svc-floating-nav { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(13, 13, 13, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 6px; display: flex; align-items: center; gap: 4px; box-shadow: 0 14px 40px rgba(0,0,0,0.32); z-index: 100; font-family: 'Google Sans Flex', 'Noto Sans SC', sans-serif; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); transition: opacity .35s ease, transform .35s ease; } .svc-floating-nav.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .svc-fn-brand { font-size: 17px; font-weight: 700; color: #fff; padding: 8px 14px 8px 12px; text-decoration: none; letter-spacing: -0.5px; white-space: nowrap; } .svc-fn-brand span { color: var(--accent); } .svc-fn-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.12); margin: 0 4px; } .svc-fn-chips { display: flex; gap: 2px; } .svc-fn-chip { position: relative; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65); padding: 10px 12px; border-radius: 8px; text-decoration: none; letter-spacing: 0.06em; transition: background .2s, color .2s; cursor: pointer; } .svc-fn-chip:hover { background: rgba(255,255,255,0.08); color: #fff; } .svc-fn-chip:hover::after { content: attr(data-title); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: rgba(13,13,13,0.96); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; padding: 7px 11px; border-radius: 8px; white-space: nowrap; pointer-events: none; border: 1px solid rgba(255,255,255,0.08); } .svc-fn-cta { background: var(--accent); color: var(--black); font-size: 12px; font-weight: 700; padding: 10px 18px; border-radius: 8px; text-decoration: none; white-space: nowrap; margin-left: 4px; transition: opacity .2s; } .svc-fn-cta:hover { opacity: 0.88; } /* 左下回到顶部 */ .svc-back-top { position: fixed; bottom: 24px; left: 24px; width: 48px; height: 48px; background: rgba(13, 13, 13, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #fff; font-size: 18px; font-family: inherit; cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease, background .2s; } .svc-back-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .svc-back-top:hover { background: rgba(255,255,255,0.12); } /* mobile:浮窗简化 — 只留 logo + CTA,chip 隐藏 */ @media (max-width: 860px) { .svc-floating-nav { bottom: 16px; padding: 5px; } .svc-fn-chips { display: none; } .svc-fn-divider { display: none; } .svc-back-top { bottom: 16px; left: 16px; width: 44px; height: 44px; } } /* ============================================================ CASES 列表页 — 筛选区 sticky + 字体加大 ============================================================ */ #cv22 .filter-wrap { position: sticky; top: 72px; z-index: 40; background: #fff; /* 横向突破父 .cases-list 40px padding,铺满 viewport;内部用 padding-left/right 把内容缩回原位 */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 20px calc(50vw - 50%) 18px; margin-top: -20px; margin-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.06); } /* navbar 高度从 60→50 缩动画期间的小缝挡板(::before 现在跟随 filter-wrap 同宽,自动铺满 viewport) */ #cv22 .filter-wrap::before { content: ""; position: absolute; top: -22px; left: 0; right: 0; height: 22px; background: #fff; pointer-events: none; z-index: 0; } #cv22 .filter-hint { font-size: 14px; font-weight: 600; color: #2a2a2a; letter-spacing: 0.02em; } #cv22 .fp { font-size: 13.5px; font-weight: 600; padding: 9px 18px; letter-spacing: 0.04em; color: #444; } #cv22 .fp:hover { color: var(--blue); background: #fff; } #cv22 .fp.active { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(1,106,255,0.2); } #cv22 .filter-row2 select { font-size: 13.5px; font-weight: 500; padding: 10px 36px 10px 18px; color: #333; } /* mobile:sticky offset 调小(navbar 在 mobile 会变矮) */ @media (max-width: 860px) { #cv22 .filter-wrap { top: 64px; padding: 16px 0 14px; margin-top: -16px; } } /* ============================================================ CONTACT — CTA banner（PPT 末页设计稿,黑底,作为 contact 页结尾） ============================================================ */ .contact-cta-banner { position: relative; background: #ECEEF1; /* 灰底:与卡片底部社媒图标芯片同色系的浅冷灰 */ padding: var(--sp-section-lg) 40px; margin: 0; } /* 蓝色矩形面板:纯色无斜切,4 张卡片 + 邮箱都居中放在它上面 */ .contact-cta-banner .cta-panel { max-width: 1160px; margin: 0 auto; background: var(--blue); border-radius: 28px; padding: 64px 56px 52px; box-shadow: 0 30px 64px rgba(1, 106, 255, 0.22); } /* 4 张卡片:居中,顶对齐(去掉原 PNG 里的上下交错) */ .contact-cta-banner .cta-cards { display: flex; justify-content: center; align-items: flex-start; gap: 28px; flex-wrap: wrap; } .contact-cta-banner .cta-card { display: block; flex: 1 1 0; max-width: 248px; min-width: 180px; padding: 0; border: none; background: transparent; border-radius: 16px; cursor: pointer; transition: transform .25s cubic-bezier(.22,1,.36,1), filter .25s ease; } .contact-cta-banner .cta-card img { display: block; width: 100%; height: auto; } .contact-cta-banner .cta-card:hover { transform: translateY(-6px); filter: drop-shadow(0 18px 32px rgba(8, 16, 50, 0.28)); } .contact-cta-banner .cta-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } @media (max-width: 860px) { .contact-cta-banner { padding: var(--sp-section) 16px; } .contact-cta-banner .cta-panel { padding: 36px 20px 32px; border-radius: 20px; } .contact-cta-banner .cta-cards { gap: 16px; } .contact-cta-banner .cta-card { flex: 1 1 40%; max-width: none; min-width: 0; } } /* ============== WeChat QR Lightbox ============== */ button.cta-qr { background: transparent; border: none; padding: 0; cursor: pointer; font: inherit; } .wechat-modal[hidden] { display: none; } .wechat-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .wechat-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 16, 50, 0.78); backdrop-filter: blur(4px); cursor: pointer; animation: wechatBackdrop .25s ease; } .wechat-modal-card { position: relative; background: #fff; border-radius: 20px; padding: 40px 36px 32px; max-width: 440px; width: 100%; max-height: 92vh; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.4); animation: wechatCardIn .3s cubic-bezier(.22,1,.36,1); } .wechat-modal-close { position: absolute; top: 12px; right: 16px; background: transparent; border: none; font-size: 32px; line-height: 1; color: #888; cursor: pointer; padding: 4px 10px; border-radius: 50%; transition: background .15s, color .15s; } .wechat-modal-close:hover { background: #f3f4f6; color: #111; } .wechat-modal-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #111; font-family: var(--font-sans); } .wechat-modal-sub { margin: 0 0 22px; font-size: 13px; color: #6b7280; font-weight: 400; } .wechat-modal-qr { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; border-radius: 12px; } @keyframes wechatBackdrop { from { opacity: 0; } to { opacity: 1; } } @keyframes wechatCardIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @media (max-width: 500px) { .wechat-modal-card { padding: 32px 22px 24px; border-radius: 16px; } .wechat-modal-title { font-size: 19px; } .wechat-modal-qr { max-width: 260px; } } /* ============ contact banner 邮箱:可见按钮(lime 信封 + 文字),居中在蓝面板上 ============ */ /* 两个 CTA 按钮:整组居中并排 */ .contact-cta-banner .cta-actions { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 20px; margin: 44px auto 0; } .contact-cta-banner .cta-email, .contact-cta-banner .cta-book { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 0 32px; border-radius: 14px; cursor: pointer; text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } /* 次按钮:邮箱 — 白色描边、透明底 */ .contact-cta-banner .cta-email { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.55); } .contact-cta-banner .cta-email:hover { background: rgba(255, 255, 255, 0.10); border-color: #fff; } .contact-cta-banner .cta-email:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .contact-cta-banner .cta-email-icon { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; } .contact-cta-banner .cta-email-text { font-family: 'Space Grotesk', var(--font-sans), sans-serif; font-size: 20px; font-weight: 500; letter-spacing: .5px; color: #fff; } /* 主按钮:预约咨询 — 青柠实心、深蓝字 */ .contact-cta-banner .cta-book { background: var(--accent); border: 1.5px solid var(--accent); box-shadow: 0 10px 26px rgba(200, 244, 87, 0.30); } .contact-cta-banner .cta-book:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(200, 244, 87, 0.42); } .contact-cta-banner .cta-book:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .contact-cta-banner .cta-book-icon { width: 24px; height: 24px; color: #0a1f5c; flex-shrink: 0; } .contact-cta-banner .cta-book-text { font-family: 'Space Grotesk', var(--font-sans), sans-serif; font-size: 20px; font-weight: 600; letter-spacing: .3px; color: #0a1f5c; } @media (max-width: 860px) { .contact-cta-banner .cta-actions { gap: 14px; flex-direction: column; align-items: center; } .contact-cta-banner .cta-email, .contact-cta-banner .cta-book { width: 100%; max-width: 360px; min-height: 56px; } .contact-cta-banner .cta-email-text, .contact-cta-banner .cta-book-text { font-size: 17px; } .contact-cta-banner .cta-email-icon { width: 22px; height: 22px; } .contact-cta-banner .cta-book-icon { width: 21px; height: 21px; } } .copy-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: rgba(8, 16, 50, 0.94); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; z-index: 2000; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); font-family: var(--font-sans); animation: copyToastIn .3s cubic-bezier(.22,1,.36,1); pointer-events: none; } .copy-toast[hidden] { display: none; } @keyframes copyToastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ============ flyhub 飞轮旋转动画 ============ */ .flyhub-svg .flyhub-ring-spin { transform-origin: 120px 120px; animation: flyhubSpin 14s linear infinite; } @keyframes flyhubSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .flyhub-svg .flyhub-ring-spin { animation: none; } } /* ============== method section v3 (image 2 设计稿: 4 卡环绕中心飞轮) ============== */ .method-header-v3 { max-width: 1280px; margin: 0 auto 80px; } .method-title-v3 { color: #fff; margin: 0 0 24px; } .method-title-v3 .method-colon { color: var(--blue); margin: 0 4px; } .method-lead-v3 { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.95; max-width: 920px; margin: 0; font-weight: 300; } .flywheel-v3 { position: relative; display: grid; grid-template-columns: 1fr 320px 1fr; grid-template-rows: 1fr 1fr; gap: 80px 60px; max-width: 1280px; margin: 0 auto; align-items: start; } .fw-item-tl { grid-column: 1; grid-row: 1; text-align: right; align-self: end; } .fw-item-tr { grid-column: 3; grid-row: 1; text-align: left; align-self: end; } .fw-core { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; } .fw-item-bl { grid-column: 1; grid-row: 2; text-align: right; align-self: start; } .fw-item-br { grid-column: 3; grid-row: 2; text-align: left; align-self: start; } .fw-btn { display: inline-flex; align-items: center; gap: 14px; background: var(--blue); color: #fff; padding: 16px 24px; border-radius: 6px; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 18px; box-shadow: 0 6px 18px rgba(1,106,255,0.25); transition: transform .25s ease, box-shadow .25s ease; } .fw-item:hover .fw-btn { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(1,106,255,0.40); } .fw-desc { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.85; font-weight: 300; max-width: 320px; margin: 0; } .fw-item-tl .fw-desc, .fw-item-bl .fw-desc { margin-left: auto; } .fw-core-svg { display: block; width: 100%; max-width: 280px; /* [Lili 回归修复] 320→280:与 viewBox(280) 1:1,消除放大,中心字回正常大小;手机端 200/108 带 !important 不受影响 */ height: auto; } /* [Lili] 服务页飞轮中心字"智能/增长飞轮":仅 PC/平板(>860)缩小 50%(40→视觉20)。 手机端(≤860)不进此 min-width 块,保持 SVG font-size=40 原状,视觉零影响。 用 scale 而非改 font-size:两行 baseline(y=128/178)固定,单改字号会松散/偏上; scale 以圆心(140,140)等比缩放,字号+行距同步收紧并保持居中。仅 ZH 有 .fw-core-label。 */ @media (min-width: 861px) { .fw-core-label { transform: scale(0.5); transform-origin: 140px 140px; transform-box: view-box; } } .fw-core-svg .fw-spin { transform-origin: 140px 140px; animation: fwSpin 14s linear infinite; } @keyframes fwSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .fw-core-svg .fw-spin { animation: none; } } @media (max-width: 1024px) { .flywheel-v3 { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; gap: 40px; max-width: 480px; } .fw-item-tl, .fw-item-tr, .fw-item-bl, .fw-item-br { grid-column: 1; text-align: center; align-self: auto; } .fw-item-tl { grid-row: 1; } .fw-item-tr { grid-row: 2; } .fw-core { grid-column: 1; grid-row: 3; } .fw-item-bl { grid-row: 4; } .fw-item-br { grid-row: 5; } .fw-item .fw-desc { margin: 0 auto; } } /* arch 解决方案清单 - 每项可点击跳锚 */ .arch-list-body li { padding: 0; } .arch-list-body .arch-li-link { display: block; padding: 13px 22px; text-decoration: none; color: inherit; transition: background .18s ease, padding-left .18s ease; position: relative; } .arch-list-body .arch-li-link:hover { background: rgba(1,106,255,0.06); padding-left: 26px; } .arch-list-body .arch-li-link:hover .arch-li-zh { color: var(--blue); } .arch-list-body .arch-li-link::after { content: "→"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(-6px); opacity: 0; color: var(--blue); font-weight: 700; transition: opacity .18s ease, transform .18s ease; } .arch-list-body .arch-li-link:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } .arch-list-body .arch-li-link:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } /* ========================================================== 2026-06 修订:版头/按钮大写规范 + services 冒号改白 ========================================================== */ /* 1) services 标题里的冒号改白色(原本是蓝色) */ .method-colon { color: #fff !important; } /* 2) 版头(inner-hero) h1 主标题大写 中文字符 text-transform: uppercase 无效果,对中文版安全 wordmark 排除:"westOeast" 保持原 logo 写法 .no-upper 排除:insights 等长句标题不大写 */ .inner-hero h1 { text-transform: uppercase; } .inner-hero h1 .wordmark, .inner-hero h1.no-upper, .inner-hero h1.no-upper * { text-transform: none; } /* 3) 所有主要按钮的英文大写 中文按钮 text-transform: uppercase 无效果,安全 mailto 链接整体排除,保护邮箱地址原样显示 */ .btn-primary, .btn-secondary, .nav-cta, .nav-cta-mobile, .cta-book { text-transform: uppercase; } a[href^="mailto:"] { text-transform: none !important; } /* ====== 服务下拉:十项编号 ====== */ .nav-dropdown-menu a .nav-dropdown-num{ display:inline-block; min-width:1.9em; margin-right:8px; color:rgba(255,255,255,0.32); font-variant-numeric:tabular-nums; font-size:11px; font-weight:600; letter-spacing:0.04em; } .nav-dropdown-menu a:hover .nav-dropdown-num{ color:var(--accent); } /* ====== GEO 方案块:了解更多 ====== */ .solution-title-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:20px; } .solution-title-row .solution-title{ margin-bottom:0; } .solution-title-more{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:#fff; text-decoration:none; padding:6px 15px; border-radius:8px; background:rgba(1,106,255,0.16); border:1px solid rgba(1,106,255,0.75); transition:background .2s, color .2s, border-color .2s; white-space:nowrap; } .solution-title-more:hover{ background:var(--blue); border-color:var(--blue); color:#fff; } /* ====== 浮窗:滚到「十大解决方案」时,层级标签向左收起、序号展开 ====== */ .svc-fn-tier, .svc-fn-solutions{ max-width:160px; overflow:hidden; white-space:nowrap; transition:max-width .42s ease, opacity .3s ease, padding .3s ease, margin .3s ease; } .svc-floating-nav.at-solutions .svc-fn-tier, .svc-floating-nav.at-solutions .svc-fn-solutions{ max-width:0; opacity:0; padding-left:0; padding-right:0; margin:0; pointer-events:none; } .svc-fn-nums{ display:flex; gap:1px; max-width:0; overflow:hidden; opacity:0; transition:max-width .5s ease, opacity .35s ease; } .svc-floating-nav.at-solutions .svc-fn-nums{ max-width:600px; opacity:1; overflow:visible; } .svc-fn-num{ font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); padding:10px 8px; border-radius:8px; text-decoration:none; font-variant-numeric:tabular-nums; transition:background .2s, color .2s; } .svc-fn-num:hover{ background:rgba(255,255,255,0.08); color:var(--accent); } /* ====== 浮窗序号:hover 浮现对应方案标题 ====== */ .svc-fn-num{ position:relative; } .svc-fn-num:hover{ color:var(--accent); } .svc-fn-num:hover::after{ content:attr(data-title); position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%); background:rgba(13,13,13,0.96); color:#fff; font-size:11px; font-weight:500; letter-spacing:0.02em; padding:7px 11px; border-radius:8px; white-space:nowrap; pointer-events:none; border:1px solid rgba(255,255,255,0.08); z-index:10; } /* ====== 联系页:邮箱图标圆圈与社交统一 ====== */ .contact-aside-email-circle{ pointer-events:none; } .contact-aside-email:hover .social-circle{ background:#1a1a1a; color:#fff; } /* --- GEO merged-content helpers (2026-06-10) --- */ .geo-card-list { margin: 14px 0 0; padding: 0 0 0 18px; } .geo-card-list li { font-size: 13.5px; line-height: 1.7; color: var(--gray-light); margin-bottom: 4px; } .geo-note { font-size: 13px; color: var(--gray-mid); margin-top: 28px; text-align: center; } .geo-pill-list { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .geo-pill-list li { font-size: 13px; font-weight: 600; color: var(--black); background: #fff; border: 1px solid rgba(13,13,13,0.15); border-radius: 100px; padding: 8px 18px; } .geo-buyer-quotes { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .geo-buyer-quotes li { font-size: 14.5px; font-style: italic; color: var(--gray-dark); background: #fff; border-left: 3px solid var(--blue); padding: 12px 16px; } @media (max-width: 768px) { .geo-buyer-quotes { grid-template-columns: 1fr; } } .faq-wrap { max-width: 860px; margin: 40px auto 0; } .insight-visual-field-notes { background-image: url('/assets/insights/westoeast-insights-what-ai-search-optimization-means-2026.svg'); } /* ===== GEO service page -> light theme (2026-06-10) ===== */ /* hero: 深色海军蓝 -> 品牌蓝(与首页一致) */ .geo-redesign-hero { background: linear-gradient(135deg, #016aff 0%, #1366ff 55%, #2343ff 100%); } /* 正文深色 section -> 浅色(与 geo-primer 统一成浅底) */ .geo-playbook { background: var(--off-white); color: var(--black); } .geo-playbook .section-title { color: var(--black); } .geo-playbook .section-title .en { color: var(--gray-mid); } /* 深色卡片 -> 白底浅色卡(沿用站内 geo-compare-grid 的白卡风格) */ .geo-step-card { background: #fff; border: 1px solid rgba(13,13,13,0.12); } .geo-step-card:hover { transform: translateY(-3px); border-color: var(--blue); background: #fff; box-shadow: 0 10px 30px rgba(1,106,255,0.10); } .geo-step-card h3 { color: var(--black); } .geo-step-card p { color: var(--gray-dark); } .geo-step-card span { color: var(--blue); } /* ===== GEO light end ===== */ /* ===== insights list hero -> blue (match site, 2026-06-10) ===== */ .insights-redesign-hero { background: linear-gradient(135deg, #016aff 0%, #1366ff 55%, #2343ff 100%) !important; } /* ===== insights list hero end ===== */ /* ===== insights cards: full-card click + image ratio fix (2026-06-10) ===== */ .insight-card { position: relative; } /* 整张卡可点:拉伸链接覆盖全卡(图和正文任意处点击都进文章) */ .insight-card .insight-visual::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* 标题保留可 hover 在最上层 */ .insight-card .insight-body h2 a { position: relative; z-index: 2; } /* 副卡片改成"图在上 + 16:10",不再把宽幅 SVG 裁成竖缝 */ .insight-card:not(.featured) { grid-template-columns: 1fr; grid-template-rows: auto auto; } .insight-card:not(.featured) .insight-visual { aspect-ratio: 16 / 10; min-height: 0; width: 100%; } /* ===== insights cards end ===== */ /* patch:nav-insights-dropdown-20260611 BEGIN 洞察下拉(由 site.js 注入,全站生效):单列紧凑版 */ .nav-dropdown-menu--compact { grid-template-columns: 1fr; min-width: 280px; } .lang-en .nav-dropdown--insights .nav-dropdown-menu { min-width: 340px; padding: 12px; } /* patch:nav-insights-dropdown-20260611 END */ /* patch:insights-layout-20260611 BEGIN 洞察卡统一版式(以后新增洞察内容沿用):左文字组约60% · 右插图约30% · 留白呼吸; hover 引导用品牌色变化(标题变蓝),不用描边变蓝;占位卡透明居中; 滚动吸附对齐蓝/灰交界 */ .insight-card.featured { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 5%; padding: 20px 28px; } .insight-card.featured .insight-body { order: 1; padding: 34px 0 34px 18px; } .insight-card.featured .insight-visual { order: 2; align-self: center; min-height: 340px; width: 100%; } .insight-card:hover { border-color: var(--gray-light); } .insight-card:hover .insight-body h2, .insight-card:hover .insight-body h2 a { color: var(--blue); } .insight-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 24px; background: var(--accent); color: var(--black); font-weight: 700; font-size: 14px; letter-spacing: 0.5px; padding: 12px 28px; border-radius: 8px; position: relative; z-index: 2; transition: transform 0.2s, box-shadow 0.2s; } .insight-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,240,42,0.3); } .insight-card.placeholder { background: transparent; border: none; } .insight-card.placeholder:hover { transform: none; box-shadow: none; } .insight-card.placeholder .insight-body { align-items: center; text-align: center; } .insights-redesign-hero, .insights-redesign-list { scroll-snap-align: start; } .insight-card.featured { scroll-snap-align: none; } /* 防被全站 .featured 吸附规则误命中 */ .insight-card.placeholder { grid-column: 1 / -1; } .insight-card.placeholder .tag { margin-top: 22px; font-size: 14px; letter-spacing: 3px; padding: 9px 22px; } /* patch:insights-layout-20260611 END */ /* patch:nav-cta-refine+contact-aside-collapse-20260611 BEGIN CTA 缩小精致化(去 > 在 site.js);联系页滚到表单时联系方式卡收起只留 icon,表单随列宽展开 */ .nav-cta { padding: 7px 16px; font-size: 12px; } .contact-grid { transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .contact-grid.aside-collapsed { grid-template-columns: minmax(0, 1fr) 84px; } .contact-aside { transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .contact-grid.aside-collapsed .contact-aside { padding: 20px 16px; } .contact-aside-title, .contact-aside-email > span:last-child, .social-meta { transition: opacity 0.25s ease; } .contact-grid.aside-collapsed .contact-aside-title { opacity: 0; visibility: hidden; height: 0; margin: 0; } .contact-grid.aside-collapsed .contact-aside-email > span:last-child, .contact-grid.aside-collapsed .social-meta { opacity: 0; visibility: hidden; } /* patch:nav-cta-refine+contact-aside-collapse-20260611 END */ /* patch:contact-aside-pin-20260611 BEGIN 收起态出现图钉按钮:点击重新展开联系方式卡(钉住);滚回顶部自动复位 */ .aside-pin-btn { display: none; width: 36px; height: 36px; margin: 0 auto 14px; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(11, 20, 55, 0.25); border-radius: 8px; color: var(--ink, #0B1437); cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease, border-color .15s ease; } .aside-pin-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; } .contact-grid.aside-collapsed .aside-pin-btn { display: flex; } .contact-grid.aside-collapsed .contact-aside { position: static; top: auto; } /* patch:contact-aside-pin-20260611 END */ /* patch:en-insights-dropdown-full-20260611 BEGIN EN 下拉六篇:单行省略,悬停原生浮窗(title)显示完整标题+序号 */ .lang-en .nav-dropdown--insights .nav-dropdown-menu { min-width: 420px; max-width: 420px; } .nav-dropdown-menu--compact a:not(.nav-dropdown-framework) { font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* patch:en-insights-dropdown-full-20260611 END */ /* patch:insights-placeholder-scale-20260611 BEGIN “更多洞察即将上线”块整体放大 40% */ .insight-card.placeholder .insight-body h2 { font-size: 31px; margin: 25px 0 20px; } .insight-card.placeholder .insight-body p { font-size: 21px; } .insight-card.placeholder .tag { margin-top: 31px; font-size: 20px; letter-spacing: 4px; padding: 13px 31px; } /* patch:insights-placeholder-scale-20260611 END */ /* patch:insights-list-dark-20260611 BEGIN 洞察列表区灰底换深色(试看,易回退) */ .insights-redesign-list { background: #091F6B; } .insight-card.placeholder .insight-body h2 { color: #fff; } .insight-card.placeholder .insight-body p { color: rgba(255,255,255,0.72); } .insight-card.placeholder .tag-outline { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.75); } /* patch:insights-list-dark-20260611 END */ /* patch:insights-card-badge-20260611 BEGIN 编号徽章移为 HTML 覆层:默认黑,hover/点击变蓝;标题同步 */ .insight-visual { position: relative; } .visual-badge { position: absolute; top: 24px; left: 24px; background: #0D0D0D; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 2px; padding: 9px 14px; line-height: 1; transition: background 0.2s ease; pointer-events: none; z-index: 2; } .insight-card:hover .visual-badge, .insight-card:active .visual-badge { background: var(--blue); } .insight-card.featured .insight-body h2, .insight-card.featured .insight-body h2 a { color: var(--ink, #0B1437); } .insight-card.featured:hover .insight-body h2, .insight-card.featured:hover .insight-body h2 a { color: var(--blue); } /* patch:insights-card-badge-20260611 END */ /* patch:contact-social-hover-20260611 BEGIN social 项标题 hover 变蓝(与邮箱一致) */ .contact-aside-social li { cursor: pointer; } .contact-aside-social li .social-name { transition: color .15s ease; } .contact-aside-social li:hover .social-name { color: var(--blue); } /* patch:contact-social-hover-20260611 END */ /* patch:en-mission-art-shift-20260611 BEGIN EN 关于页轮播下移 20%(列内留白再分配) */ .lang-en .about-mission-art { margin-top: 84px; } /* patch:en-mission-art-shift-20260611 END */ /* patch:insights-list-gray-gap-20260611 BEGIN 列表区底色回 VI 灰;双副卡居中、横向间距收窄约50% */ .insights-redesign-list { background: var(--off-white); } .insight-card.placeholder .insight-body h2 { color: var(--ink, #0B1437); } .insight-card.placeholder .insight-body p { color: #4a4a4a; } .insight-card.placeholder .tag-outline { border-color: rgba(11,20,55,0.35); color: rgba(11,20,55,0.78); } .insight-grid { justify-content: center; column-gap: 7.5%; } /* patch:insights-list-gray-gap-20260611 END */ /* ===== mobile layout fixes (2026-06-12) ===== */ /* services container padding 从内联 style 挪到这里,让断点能覆盖 */ .services-detail > .container { padding: 0 60px; } @media (max-width: 900px) { .services-detail > .container { padding: 0; } /* Chrome 里 backdrop-filter 会为 fixed 子元素创建 containing block, 导致抽屉菜单 right:-100% 永远露 6px 在屏幕右缘;移动端改实色背景 */ nav.site-nav, nav.site-nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(9,31,107,0.97); } .nav-links { visibility: hidden; transition: right 0.3s ease, visibility 0s linear 0.3s; } .nav-links.open { visibility: visible; transition: right 0.3s ease; } } @media (max-width: 640px) { /* 1fr 轨道最小宽=内容宽会被撑爆;minmax(0,1fr) 允许压缩让文字换行 */ .geo-step-grid { grid-template-columns: minmax(0, 1fr); } .geo-compare-grid { grid-template-columns: minmax(0, 1fr); } .geo-step-card { min-width: 0; } } @media (max-width: 900px) { /* solution-block 同样的 1fr 撑爆坑(块内"相关案例"行最小宽压不下去) */ .solution-block { grid-template-columns: minmax(0, 1fr); } .solution-block-lead, .solution-block-body { min-width: 0; } } @media (max-width: 960px) { /* 书封图的桌面装饰性左移在手机上会出血 80px */ .star-preview-img { margin-left: 0; margin-top: 0; } } @media (max-width: 900px) { /* about 页 mission 轮播:基础规则的 min-height:420 + 宽高比把宽度反推到 480,断点里归零 */ .about-mission-art { min-height: 0; max-width: 100%; margin-top: 0; } /* 大字体(微信调大字号)场景:1fr 列被撑爆,列改可压缩 */ .about-mission-inner, .about-inner, .geo-hero-grid { grid-template-columns: minmax(0, 1fr); } .about-mission-text, .geo-hero-copy, .geo-hero-visual { min-width: 0; } /* 正文手动断行在手机上取消,让文字自然换行(大字体下不再被屏幕裁切) */ .about-desc br, .hero-desc br, .method-preview-desc br, .star-preview-desc br, .case-detail-desc br, .cert-desc br, .inner-hero-content p br, .clients-strip-desc br { display: none; } } @media (max-width: 900px) { /* 抽屉内下拉子菜单:从"父标签右侧"改为"堆在标签下方",长标题换行不截断 */ .nav-links .nav-dropdown { flex-direction: column; align-items: flex-start; width: 100%; } .nav-links .nav-dropdown-menu { width: 100%; } /* insights 下拉的桌面固定宽(420px)在抽屉里必须放开 */ .lang-en .nav-dropdown--insights .nav-dropdown-menu, .lang-zh .nav-dropdown--insights .nav-dropdown-menu, .nav-dropdown--insights .nav-dropdown-menu { min-width: 0; max-width: 100%; width: 100%; } } /* ===== mobile fixes end ===== */ /* a11y + mobile form (2026-06-12) */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .contact-form input,.contact-form select,.contact-form textarea{scroll-margin-top:80px} /* === Lili 手机端清单 定点修复 (2026-06-13) — 仅 ≤860px,不动桌面;第三批字阶/间距未做 === */ html { -webkit-text-size-adjust: 100%; } /* [1-1] iOS 字号自动放大兜底 */ .cta-m-br { display: none; } /* [4-9] CTA 移动端换行符,桌面恒隐 */ @media (max-width: 860px) { /* [1-2] 关 scroll-snap(滚动卡顿/回弹) */ html { scroll-snap-type: none !important; } /* [1-2] 100vh 空白:客户 logo 区 160px 内边距 → 收紧 */ .clients-strip { padding: 56px 0 !important; } /* [1-1] 两栏溢出 → 单列;CTA 大标题缩字号(原 clamp 下限 36px 偏大) */ .star-preview-grid { grid-template-columns: 1fr !important; } .star-preview-grid > * { min-width: 0; } .cta-title { font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.18; } /* [1-1] 关键:全站 word-break:keep-all 在窄屏把"无标点长中文句"当一个词撑出屏被裁, 手机端恢复正常 CJK 换行(寡字是桌面顾虑,窄屏应自由换行) */ body, h1, h2, h3, h4, p, li, .section-title, .hero-title, .cta-title, .star-preview-desc { word-break: normal !important; line-break: auto !important; } .cta-title, .hero-title, .section-title { overflow-wrap: anywhere; } /* [1-4] 服务页悬浮"联系我们"条压住内容 → 隐藏(返回顶部按钮 .svc-back-top 保留) */ .svc-floating-nav { display: none !important; } /* [1-5] 黑色"< 东西互动 / WE CONNECT >"分隔带散落 → 收成一行、去掉长英文句 */ .arrow-divider { flex-wrap: nowrap; gap: 10px; padding: 14px 16px; } .arrow-divider .arr-text:last-of-type { display: none; } /* [1-6] 客户 logo 尺寸归一(title 选择器回落不一致 → 统一限高) */ .client-logo-wrap .client-logo, .clients-marquee .client-logo { max-height: 26px !important; width: auto !important; max-width: 120px !important; } /* [2-12] 抽屉:去重复"联系我们"菜单项(留底部 CTA 按钮);CTA 文字白→深色 */ .nav-links > a[href$="/contact/"] { display: none !important; } .nav-cta-mobile { color: var(--black) !important; } /* [2-12] 抽屉:服务/洞察子菜单默认收起(手风琴,配合 site.js 切 .open) */ .nav-links .nav-dropdown-menu { max-height: 0; overflow: hidden; transition: max-height .28s ease; } .nav-links .nav-dropdown.open .nav-dropdown-menu { max-height: 760px; } .nav-links .nav-dropdown > .nav-parent::after { content: " ▾"; font-size: 0.8em; opacity: 0.6; } .nav-links .nav-dropdown.open > .nav-parent::after { content: " ▴"; } /* [2-15] 点击目标 ≥44px */ .footer-col a { padding: 12px 0; } .nav-lang a, .nav-lang-mobile a { min-height: 44px; padding: 11px 8px; box-sizing: border-box; display: inline-flex; align-items: center; } /* [3-fade] 根因修复:移动端部分 .fade-in 的 IntersectionObserver 永不触发, 元素卡在 opacity:0 —— 占着布局高度却隐形,导致首页五星 SVG/about 胶囊、 案例详情"同类项目"卡片整屏空白。复用站内 prefers-reduced-motion 已验证的 安全做法:窄屏直接显形(仅取消入场动画,内容/布局不变),零桌面影响、零回归。 */ .fade-in, .hero-content > * { opacity: 1 !important; transform: none !important; } /* [3-swipe] 同类项目卡片:纵向堆叠 → 横向滑动(贴边、下一张露头),打破手机端纵向过长。 CSS-only,标记结构不动 → 全 30 个案例详情页通用;标题"同类项目参考"保留。 section 侧距 24px,用负 margin 出血到屏幕边、再用 padding 把首卡对回内容左缘。 */ .case-related-grid { display: flex !important; grid-template-columns: none !important; gap: 14px; margin: 28px -22px 0; padding: 2px 22px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-left: 22px; /* [Lili] 滑动前首卡左缘对齐标题:snap 不再把首卡吸到容器边吃掉左 padding */ } .case-related-grid::-webkit-scrollbar { display: none; } .case-related-grid > .case-card { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; } /* ============================================================ [3-type] 第三批 · 移动端字阶 + 间距/页边距统一 + 导航瘦身 仅 ≤860,桌面零影响。解决"导航太厚 / 都太长 / 边距不齐"。 ============================================================ */ /* — 导航瘦身:~73px → ~58px(汉堡 44px tap 区保留,靠收 padding) — */ nav.site-nav { padding: 7px 20px !important; } nav.site-nav.scrolled { padding: 6px 20px !important; } .nav-logo-mark { height: 24px !important; } .nav-logo-svg { height: 22px !important; } /* — 字阶:大标题/区块标题/正文/eyebrow 各降一档 — */ .hero-title { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.08; } .section-title { font-size: clamp(22px, 6vw, 26px) !important; line-height: 1.15; } .section-label { font-size: 12px !important; letter-spacing: 3px; } p, li { font-size: 15px; line-height: 1.7; } /* — 竖向节奏收一档(直接缩短"太长") — */ :root { --sp-section: 44px !important; --sp-section-lg: 64px !important; } .cases-preview, .star-preview, .method-preview { padding-top: 48px !important; padding-bottom: 48px !important; } .cta-section { padding-top: 56px !important; padding-bottom: 56px !important; } /* nav 变薄后 hero 顶距相应收 ~16px,避免导航下方留大空 */ .hero { padding-top: 92px !important; } .inner-hero { padding-top: 104px !important; } .case-detail-hero{ padding-top: 104px !important; } /* — 页边距统一:全站 section 侧距收成 22px(原 16/24/28/32 不齐) — */ section, .cases-preview, .star-preview, .method-preview, .arch-section, .case-methodology, .case-faq, .contact-section, .cta-section { padding-left: 22px !important; padding-right: 22px !important; } /* GEO/洞察 hero 的 h1 用独立类,单独降档 + 顶距随瘦导航收 + 侧距统一 */ .geo-hero-copy h1, .insights-redesign-hero h1 { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.1; } .geo-redesign-hero, .insights-redesign-hero { padding-top: 104px !important; padding-left: 22px !important; padding-right: 22px !important; } /* [3-map] 关于页世界地图:保留地图,但图上城市标签/点 13px 固定值在小图上相对巨大、互压。 ① 地图全宽出血(306→390,更接近 PC 的舒展);② 标签/点/光环等比缩小 → PC 那种"小点+小标签"清爽; canvas 点阵图与连线随容器缩放,底部 .wo-strip 城市清单保证可读。 */ .wo-map-section { overflow-x: hidden; } .wo-globe { width: 100vw !important; margin-left: -22px !important; margin-right: -22px !important; } .wo-strip { padding-left: 38px !important; padding-right: 38px !important; } .wo-city .lbl { font-size: 7px !important; } .wo-city .lbl small { font-size: 4.5px !important; letter-spacing: .05em !important; margin-top: 1px !important; } .wo-city.hub .lbl { font-size: 7.5px !important; } .wo-city .dot { width: 4px !important; height: 4px !important; margin: -2px !important; } .wo-city.hub .dot { width: 7px !important; height: 7px !important; margin: -3.5px !important; } .wo-city.hub .ring { width: 20px !important; height: 20px !important; margin: -10px !important; } .wo-city .lbl.above { bottom: 9px !important; } .wo-city .lbl.below { top: 9px !important; } .wo-city.hub .lbl.above { bottom: 14px !important; } .wo-city.hub .lbl.below { top: 14px !important; } /* ============================================================ [3-x2] 标注批一:缩短/横向/统一(全部 ≤860,PC DOM 与渲染不动) ============================================================ */ /* ① 各 hero 副标题/描述 缩字号(18/17 → 14) */ .hero-desc { font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 28px !important; } .inner-hero p { font-size: 14px !important; line-height: 1.7 !important; } .geo-hero-copy p{ font-size: 14px !important; } /* ② 首页"精选客户案例" → 横向滑动(同案例详情 bleed carousel) */ .cases-preview-grid { display: flex !important; grid-template-columns: none !important; gap: 14px; margin: 24px -22px 0; padding: 2px 22px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; } .cases-preview-grid::-webkit-scrollbar { display: none; } .cases-preview-grid > .case-card { flex: 0 0 80%; min-width: 0; scroll-snap-align: start; } /* ③ 案例页 FEATURED → 恢复 bento 拼图(蚂蚁大模块整宽 + 其余 2 列),一屏可览 */ .bento { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .bento .bento-big { grid-column: span 2 !important; } .bento-card:not(.bento-big) .bento-num { font-size: 26px !important; } /* 半宽卡大数字 46→26,防裁切 */ /* ④ footer 整体缩矮 + logo 缩小 ~50% */ .site-footer { padding-top: 36px !important; padding-bottom: 26px !important; } .footer-top { margin-bottom: 24px !important; gap: 20px !important; } .footer-logo-mark { height: 24px !important; } .footer-logo-svg { height: 15px !important; } /* ⑤ 关于页两个认证 → 横排(认证白卡左列、文字右列) */ .certs-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .cert-card { display: grid !important; grid-template-columns: 72px 1fr !important; column-gap: 16px !important; align-items: start !important; text-align: left !important; padding: 18px 18px !important; } .cert-badge-chip { grid-column: 1 !important; width: 72px !important; height: 72px !important; padding: 12px !important; margin: 2px 0 0 !important; } .cert-body { grid-column: 2 !important; width: auto !important; text-align: left !important; } .cert-card::before { display: none !important; } .cert-card + .cert-card { padding-left: 18px !important; } .cert-card:first-child { padding-left: 18px !important; } /* ⑥ GEO "争取点击 vs 进入答案" → 左右两列 */ .geo-compare-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } /* ============================================================ [4] 第四批 · 服务/GEO/首页/关于 长版块收短 + 统一(全 ≤860,PC 零影响) ============================================================ */ /* [4-1] 服务页"解决方案"清单 → 套首页 svc-card 观感:序号(01-10)+中英上下+常驻箭头。 li 无序号 DOM,用 CSS counter 生成;link 改 grid 三栏(号/文/箭头),不动 HTML/锚点。 */ .arch-list-body { counter-reset: archli; } .arch-list-body li { counter-increment: archli; border-bottom: 1px solid #eef0f3; } .arch-list-body .arch-li-link { display: grid !important; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 18px !important; } .arch-list-body .arch-li-link::before { content: counter(archli, decimal-leading-zero); grid-column: 1; grid-row: 1 / 3; font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: 19px; font-weight: 800; line-height: 1; color: rgba(0,0,0,0.20); letter-spacing: -0.5px; } .arch-list-body .arch-li-zh { grid-column: 2; grid-row: 1; font-size: 15px; text-transform: none; } .arch-list-body .arch-li-en { grid-column: 2; grid-row: 2; margin-left: 0 !important; font-size: 9px; letter-spacing: 0.08em; } /* 常驻箭头(覆盖桌面 hover 才显的 ::after) */ .arch-list-body .arch-li-link::after { position: static !important; grid-column: 3; grid-row: 1 / 3; opacity: 1 !important; transform: none !important; color: rgba(0,0,0,0.25); font-size: 18px; font-weight: 400; } /* [4-2] 服务架构:胶囊组(①)与同心圆(②)左右并排(圆本身不改,随列宽自适应); 解决方案清单整宽落到下一行。覆盖 1024 断点的单列堆叠。 */ .arch-wrap { grid-template-columns: auto 1fr !important; gap: 14px !important; max-width: 100% !important; align-items: center !important; } .arch-pills { max-width: none !important; width: auto !important; margin: 0 !important; gap: 10px !important; } .arch-pill { padding: 12px 10px !important; font-size: 12px !important; letter-spacing: 0.02em !important; } .arch-pill-arrow { font-size: 18px !important; } .arch-orbit-stack { max-width: 70% !important; margin: 0 auto !important; } .arch-list { grid-column: 1 / -1 !important; transform: none !important; margin-top: 10px !important; } .arch-c-label { font-size: 8px !important; } /* [4-3a] 智能增长飞轮 → 收短:核心 SVG 320→200,卡片/描述降档,行距收紧 */ .flywheel-v3 { gap: 24px !important; max-width: 380px !important; } .fw-core-svg { max-width: 200px !important; } .fw-btn { padding: 11px 18px !important; font-size: 15px !important; margin-bottom: 10px !important; } .fw-desc { font-size: 13px !important; line-height: 1.65 !important; } /* [Lili] 手机端四项描述居中:≤860 网格重排后回退到了基础的左/右对齐,这里统一居中 */ .fw-item-tl, .fw-item-tr, .fw-item-bl, .fw-item-br { text-align: center !important; } .fw-item .fw-desc { margin: 0 auto !important; } /* [4-3b] 五星范式 PMF…IRF → 套清单版式参考:缩写(code)在左 + 说明在右 + 细线分隔(去上下堆叠) */ .star-layout { gap: 22px !important; } .star-layout .star-notes { border-top: 1px solid rgba(13,13,13,0.10); } .star-layout .star-note { display: grid !important; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: start; padding: 13px 4px !important; border-bottom: 1px solid rgba(13,13,13,0.10) !important; } .star-layout .star-note-code { margin: 0 !important; font-size: 15px !important; line-height: 1.35 !important; color: var(--blue) !important; } .star-layout .star-note p { margin: 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; } /* [4-4] GEO 卡片组按数量自动分流(规则:能横滑就横滑,不适合就排紧密如清单参考): ≤3 张 → 横滑(bleed carousel);≥4 张 → 紧密清单(序号灰+标题+说明+细线分隔,同 arch-list 参考)。 用 :has() 数子卡,覆盖全 5 个 geo-step-grid;orbit 维持竖排略收。 */ .geo-step-card { min-height: 0 !important; } /* —— ≤3 张:横滑 —— */ .geo-step-grid:not(:has(.geo-step-card:nth-child(4))) { display: flex !important; grid-template-columns: none !important; gap: 12px !important; margin: 24px -22px 0 !important; padding: 2px 22px 8px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; } .geo-step-grid:not(:has(.geo-step-card:nth-child(4)))::-webkit-scrollbar { display: none; } .geo-step-grid:not(:has(.geo-step-card:nth-child(4))) > .geo-step-card { flex: 0 0 82% !important; min-width: 0; scroll-snap-align: start; padding: 22px !important; } .geo-step-grid:not(:has(.geo-step-card:nth-child(4))) .geo-step-card h3 { font-size: 18px !important; } .geo-step-grid:not(:has(.geo-step-card:nth-child(4))) .geo-step-card p { font-size: 13.5px !important; line-height: 1.6 !important; } /* —— ≥4 张:紧密清单(参考 arch-list:序号灰 + 标题 + 说明 + 细线) —— */ .geo-step-grid:has(.geo-step-card:nth-child(4)) { display: block !important; grid-template-columns: none !important; gap: 0 !important; margin: 20px 0 0 !important; border-top: 1px solid rgba(13,13,13,0.10); } .geo-step-grid:has(.geo-step-card:nth-child(4)) > .geo-step-card { display: grid !important; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; padding: 13px 4px !important; background: transparent !important; border: none !important; border-bottom: 1px solid rgba(13,13,13,0.10) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } .geo-step-grid:has(.geo-step-card:nth-child(4)) > .geo-step-card span { grid-column: 1; grid-row: 1 / 3; font-family: 'Google Sans Flex','GoogleSansFlex_9pt',sans-serif; font-size: 18px; font-weight: 800; line-height: 1; color: rgba(13,13,13,0.22) !important; letter-spacing: -0.5px; } .geo-step-grid:has(.geo-step-card:nth-child(4)) > .geo-step-card h3 { grid-column: 2; grid-row: 1; margin: 0 0 2px !important; font-size: 15px !important; line-height: 1.3 !important; } .geo-step-grid:has(.geo-step-card:nth-child(4)) > .geo-step-card p { grid-column: 2; grid-row: 2; margin: 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; } /* ① 出现/被引用/被推荐 orbit:维持竖排,略收 */ .geo-signal-orbit { padding: 16px !important; gap: 10px !important; } .geo-signal-orbit span { padding: 14px 16px !important; font-size: 15px !important; } .geo-signal-panel { min-height: 0 !important; } /* [4-5] 首页 10 项 SOLUTIONS → 维持 2 列(覆盖 980 断点压成单列),保留全 10 项不隐藏。 2 列窄卡:号在上、中名、英文,隐藏箭头(整卡可点) */ .svc-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .svc-card { min-height: 0 !important; padding: 14px 12px !important; gap: 6px !important; flex-direction: column !important; align-items: flex-start !important; } .svc-card-num { font-size: 18px !important; width: auto !important; } .svc-card-name { font-size: 14px !important; margin-bottom: 2px !important; line-height: 1.25 !important; } .svc-card-en { font-size: 8.5px !important; letter-spacing: 1px !important; } .svc-card-arrow { display: none !important; } /* [4-6] Logo 墙尺寸统一 + 收矮(首页/关于/案例 TRUSTED BY 同 .clients-strip 结构): 收 wrap 尺寸与 gap,墙整体变矮;logo 限高沿用 [1-6] 的 26px */ .clients-strip-grid { gap: 18px 20px !important; padding: 14px 8px !important; } .client-logo-wrap { width: 96px !important; height: 42px !important; padding: 4px 8px !important; } /* [4-7] WE CONNECT 带 → 两行居中:第一行「< 东西互动 >」,第二行英文整行居中。 注:英文用 .arr-text+.arr-text 精确选中(:last-of-type 按 span 类型算会落到 arr-sym,失效) */ .arrow-divider { flex-wrap: wrap !important; justify-content: center !important; gap: 6px 10px !important; } .arrow-divider .arr-text + .arr-text { display: block !important; flex-basis: 100% !important; order: 1; text-align: center !important; font-size: 12px !important; opacity: 0.7; } /* [4-8] 关于城市清单(5 城)→ 两行左对齐(3+2,每项 1/3 宽,左缘对齐内容边) */ .wo-strip { justify-content: flex-start !important; gap: 10px 14px !important; padding-left: 22px !important; padding-right: 22px !important; } .wo-strip .ci { flex: 0 0 calc(33.333% - 10px) !important; min-width: 0 !important; text-align: left !important; } .wo-strip .ci .zh { font-size: 11px !important; } /* [4-9] CTA「从战略到执行，我们帮你走完全程」逗号后换行(配 about 页 .cta-m-br) */ .cta-m-br { display: inline !important; } /* ============================================================ [5] 第五批 · 首页/全站标注:统一左对齐 + 字号 + logo归一 + footer收矮 + nav箭头 + 滑动圆点 ============================================================ */ /* [5-1] 统一左对齐 + 左边距(各 section 头部原居中 → 左对齐,与正文左缘一致) */ .section-label, .section-title { text-align: left !important; } .clients-strip-head, .clients-strip-desc { text-align: left !important; } .clients-strip-desc { margin-left: 0 !important; margin-right: 0 !important; } .inner-hero { text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; } .inner-hero p { margin-left: 0 !important; margin-right: 0 !important; } .cta-section { text-align: left !important; } .cta-actions { justify-content: flex-start !important; } .method-preview-inner { text-align: left !important; } .method-intro { text-align: left !important; margin-left: 0 !important; } .cases-preview-desc { text-align: left !important; } .cases-preview-more { text-align: left !important; } .star-preview > .section-label, .star-preview > .section-title { text-align: left !important; } /* [5-2] section 标题字号适当缩小(降一档) */ .section-title { font-size: clamp(19px, 5.2vw, 23px) !important; } /* [5-3] 首页 hero 标题 +15%;内页头 inner-hero 标题 +约50%(服务体系等,不含 geo/insights 专用头) */ .hero-title { font-size: clamp(30px, 8.5vw, 39px) !important; } .inner-hero h1 { font-size: clamp(38px, 11vw, 46px) !important; } /* [5-4] 首页"跨文化营销五星范式"五边形大图 → 手机端隐藏(保留文字说明) */ .star-preview-img { display: none !important; } .star-preview-grid { display: block !important; } /* [5-5] 客户 logo 墙:统一固定高度(大小不一 → 全部等高,视觉一致) */ .client-logo-wrap .client-logo, .clients-marquee .client-logo { height: 22px !important; max-height: 22px !important; width: auto !important; max-width: 112px !important; } /* [5-6] footer 整体再收矮(导航列间距/链接 padding 收紧) */ footer.site-footer { padding-top: 30px !important; padding-bottom: 22px !important; } .footer-top { gap: 18px !important; margin-bottom: 18px !important; } .footer-links { gap: 14px 28px !important; } .footer-col a { padding: 7px 0 !important; } /* [5-7] nav 抽屉下拉箭头做明显(放大 + 满不透明 + 强调青柠色) */ .nav-links .nav-dropdown > .nav-parent::after { content: " ▾" !important; font-size: 0.95em !important; opacity: 1 !important; color: var(--accent); font-weight: 700; margin-left: 5px; } .nav-links .nav-dropdown.open > .nav-parent::after { content: " ▴" !important; } /* [5-8] 横滑区底部小圆点(由 site.js [Lili 5] 注入 .swipe-dots) */ .swipe-dots { display: flex; justify-content: center; gap: 7px; margin: 12px 0 2px; } .swipe-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(128,128,128,0.40); transition: background .2s ease, transform .2s ease; } .swipe-dot.active { background: var(--blue); transform: scale(1.3); } /* ============================================================ [6] 第六批 · 案例详情/关于/案例列表/GEO 标注:内页头收短 + 正文行距字号 + 两端对齐 + 城市竖排 + GEO字号 ============================================================ */ /* [6-1] 内页头(inner-hero)整体收短(去 min-height,收上下 padding) */ .inner-hero { padding-top: 88px !important; padding-bottom: 40px !important; min-height: 0 !important; } /* [6-2] 案例详情正文 行距/字号稍微缩小(客户背景/挑战/策略/执行亮点) */ .case-content-heading { font-size: 18px !important; line-height: 1.3 !important; } .case-content-text { font-size: 13.5px !important; line-height: 1.68 !important; } .case-content-list li { font-size: 13.5px !important; line-height: 1.6 !important; } /* [6-3] "相关案例 / RELATED" 版头在深底上看不清 → 提亮 */ .case-related .section-label { color: rgba(255,255,255,0.62) !important; } .case-related .section-title { color: #fff !important; } .case-related .section-title .en { color: rgba(255,255,255,0.5) !important; } /* [6-4] 整段中文正文两端对齐(justify) */ .about-mission-text p, .case-content-text, .star-preview-desc, .geo-step-card p, .geo-primer p, .inner-hero p, .hero-desc { text-align: justify !important; text-justify: inter-character; } /* [6-5] 关于页城市清单 → 竖排单列(每国一行,中文在上英文在下,左对齐);覆盖 [4-8] 两行 */ .wo-strip { flex-direction: column !important; align-items: flex-start !important; gap: 9px !important; } .wo-strip .ci { flex: none !important; width: 100% !important; text-align: left !important; min-width: 0 !important; } /* [6-6] GEO 页字号整体偏大 → 收小一档(section-title 已由 [5-2] 收;此处收 GEO 专用文字) */ .geo-hero-copy h1, .insights-redesign-hero h1 { font-size: clamp(23px, 6.4vw, 30px) !important; } .geo-hero-copy p { font-size: 14px !important; line-height: 1.7 !important; } .geo-compare-grid strong { font-size: 14px !important; } .geo-compare-grid p, .geo-compare-grid span { font-size: 12.5px !important; line-height: 1.55 !important; } .geo-pill-list span, .geo-pill-list li { font-size: 13px !important; } .geo-answer-card b { font-size: 15px !important; } .geo-answer-card p { font-size: 13px !important; line-height: 1.6 !important; } .geo-buyer-quotes, .geo-buyer-quotes p, .geo-buyer-quotes li { font-size: 13px !important; line-height: 1.6 !important; } .geo-note { font-size: 12px !important; } /* [6-7] 案例页 FEATURED bento:上两卡(ZOLOZ/Alipay+)被拉伸到大卡高度 → 禁止纵向拉伸、复位 row,与下两卡等高 */ .bento { grid-auto-rows: min-content !important; height: auto !important; grid-template-rows: auto !important; } .bento .bento-card { align-self: start !important; grid-row: auto !important; } .bento .bento-big { grid-column: 1 / -1 !important; grid-row: auto !important; align-self: stretch !important; } .bento .bento-card:not(.bento-big) { min-height: 0 !important; } /* [6-8] 案例列表卡片 → 紧凑横排(插图左 + 标题/摘要/标签右),去 min-height:300,不占地方 */ #cv22 .cases-grid { grid-template-columns: 1fr !important; gap: 12px !important; } #cv22 .case-card { display: grid !important; grid-template-columns: 72px 1fr !important; column-gap: 14px !important; row-gap: 2px !important; align-items: start !important; min-height: 0 !important; padding: 8px 12px !important; } /* [m#6b→m#6c] 插图贴合内容高度(去 min-height:96 的撑高,白框降高去留白),图片 cover 居中自适应 */ #cv22 .case-card .cc-img { grid-column: 1 !important; grid-row: 1 / 6 !important; width: 72px !important; height: auto !important; align-self: stretch !important; min-height: 0 !important; margin: 0 !important; border-radius: 6px; overflow: hidden; } #cv22 .case-card .cc-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } #cv22 .case-card .cc-top, #cv22 .case-card .cc-title, #cv22 .case-card .cc-summary, #cv22 .case-card .cc-foot { grid-column: 2 !important; } #cv22 .case-card .cc-title { font-size: 13px !important; font-weight: 500 !important; margin: 1px 0 !important; line-height: 1.35 !important; } /* [m#5b] logo 主名(DHL等)缩小减重,不再偏大偏粗 */ #cv22 .case-card .cc-logo-text { font-size: 16px !important; font-weight: 600 !important; } /* 0615 图4:卡片高度缩短 → 去掉描述摘要那段 */ #cv22 .case-card .cc-summary { display: none !important; } #cv22 .case-card .cc-foot { margin-top: 4px !important; } /* [m#8] 副标题+标签上移贴近 logo 行:去掉 cc-top 桌面残留的 margin-bottom:26 / min-height:42 空隙; logo 行收矮 → 配合上面图缩小+卡 padding 收窄,白卡整体高度约 -30% */ #cv22 .case-card .cc-top { margin-bottom: 0 !important; min-height: 0 !important; } #cv22 .case-card .cc-logo-wrap { height: 30px !important; } /* 0615 图3 真 bug 修复:上面 #cv22 .case-card 的 display:grid !important 把页面原生 [data-hidden]{display:none}(无 important) 盖掉了 → 手机端筛选设了 data-hidden 但卡片不隐藏。 补回高优先级隐藏规则,筛选才真正生效。 */ #cv22 .case-card[data-hidden="1"] { display: none !important; } /* [6-9] 关于页两个认证 (0615 图5):改回单列全宽(徽标左 + 名称/EN/说明右), 和标题左对齐(去掉 certs-grid 的 20px 额外缩进),说明文字完整显示(2 列太窄会截断)。 */ .certs-grid { grid-template-columns: 1fr !important; gap: 16px !important; padding-left: 0 !important; padding-right: 0 !important; } .cert-card { display: grid !important; grid-template-columns: 52px 1fr !important; column-gap: 18px !important; align-items: start !important; padding: 16px 0 !important; } .cert-card:first-child, .cert-card + .cert-card { padding-left: 0 !important; } .cert-badge-chip { width: 52px !important; height: 52px !important; padding: 7px !important; margin: 0 !important; } .cert-badge { width: 100% !important; height: 100% !important; } .cert-body { grid-column: 2 !important; } .cert-name { font-size: 15px !important; line-height: 1.3 !important; } .cert-en { font-size: 9px !important; } .cert-desc { font-size: 12.5px !important; line-height: 1.6 !important; margin-top: 6px !important; max-width: none !important; } /* [6-10] 案例筛选标签太占地方 → 默认收起,点提示展开(配 site.js [Lili 6])。 0615 批注:选中的标签不收起、其余收起;行业/场景两个 select 常驻一直在。 */ .filter-wrap.filter-collapsed .filter-pills .fp:not(.active) { display: none !important; } .filter-hint { cursor: pointer; } .fh-arrow { display: inline-block; transition: transform .2s ease; } .filter-wrap:not(.filter-collapsed) .fh-arrow { transform: rotate(180deg); } /* ============================================================ [7] 第七批 · nav logo 缩小 + 洞察列表/文章页(页边距统一/行距字号/作者bio/书卡置顶放大) ============================================================ */ /* [7-1] 导航栏 westOeast logo 偏大 → 整体缩小约30%(符号+字标),PC 不动 */ .nav-logo-mark { height: 18px !important; width: auto !important; } .nav-logo-svg-inline, .nav-logo-wrap { height: 15px !important; } /* [7-2] 洞察列表 featured 书卡 → 封面置顶并放大(去左右排,书放大) */ .insight-card.featured { grid-template-columns: 1fr !important; } .insight-card.featured .insight-visual { order: -1; min-height: 340px !important; background-size: contain !important; background-position: center !important; } /* [7-3] 洞察 hero / "更多洞察" 段落 行距字号稍缩 */ .insights-redesign-hero p { font-size: 14px !important; line-height: 1.7 !important; } .insight-card.placeholder .insight-body p { font-size: 14px !important; line-height: 1.7 !important; } /* [7-4] 洞察文章页:页边距统一(.wrap 60→24,与 hero 对齐) + 版块收短 + 作者bio行距字号缩 + 书介竖排 */ .block .wrap { padding-left: 24px !important; padding-right: 24px !important; } .block { padding-top: 48px !important; padding-bottom: 48px !important; } .authors .author { grid-template-columns: 60px 1fr !important; gap: 14px !important; } .authors .author .photo { width: 60px !important; height: 60px !important; } .authors .author h3 { font-size: 16px !important; } .authors .author p { font-size: 13px !important; line-height: 1.6 !important; } .book-intro { grid-template-columns: 1fr !important; gap: 24px !important; } /* ============================================================ [8] 首页手机端批注批量(0615-02) · 仅手机生效,全走 display/CSS,不删 HTML(PC 零影响) ============================================================ */ /* [8-1] #9 首页"10 项"预览栅格手机隐藏;保留"查看完整 10 项"按钮入口(完整 10 项在 /zh/services/ 详情页,不违背铁律本意) */ .services .svc-grid-wrap { display: none !important; } /* [8-2] #21 GET IN TOUCH 邮箱青柠按钮(.cta-actions .btn-secondary)手机隐藏;"立即咨询"(btn-primary)保留 */ .cta-actions .btn-secondary { display: none !important; } /* [8-3] #23 footer 底部重复行 "< We Connect the East and West >" 手机隐藏;版权行保留(该行是唯一带 inline style 的 span) */ .footer-bottom span[style] { display: none !important; } /* [8-4] #3 顶部 arrow-divider 黑条:缩字号 + 收行距 + 高度约-20%(padding 14→11) */ .arrow-divider { padding-top: 11px !important; padding-bottom: 11px !important; gap: 4px 8px !important; } .arrow-divider .arr-text { font-size: 11px !important; letter-spacing: 1px !important; } .arrow-divider .arr-sym { font-size: 13px !important; } /* [8-5] #6 logo 大小不一(AliExpress 明显偏小):纯 CSS 无解 —— max-height 不 binding(宽扁logo受max-width约束), transform scale 从中心放大会把左侧顶出格子裁掉、往右放又撞邻列。彻底拉齐需重裁该 SVG 内部留白(资产层另案,不在本批)。 故本批不强行处理,保持原样,待重裁 SVG 后再统一。 */ /* [8-6] #22 footer 导航篇幅过大 → 收行距/列距,整体变矮 */ .footer-links { gap: 10px 28px !important; } .footer-col a { padding: 4px 0 !important; } .footer-col-title { margin-bottom: 4px !important; } /* [8-7] 字号适当缩小(批注 #8/#13/#16/#17/#18/#20) */ .svc-side-lead { font-size: 14px !important; line-height: 1.6 !important; } .star-preview-desc { font-size: 13.5px !important; line-height: 1.65 !important; } .star-preview-source { font-size: 13.5px !important; line-height: 1.65 !important; } .method-preview-desc { font-size: 13.5px !important; line-height: 1.65 !important; } .about-desc { font-size: 14px !important; line-height: 1.7 !important; } .about-pill-text { font-size: 13px !important; line-height: 1.5 !important; } .about-pill-text strong { font-size: 16px !important; } .cta-desc { font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 32px !important; } /* [m#3] 案例横滑:去掉旧[8-8]的左侧归零 → 恢复 ≤860 的左右对称出血(margin/padding 各 22), 卡片改 scroll-snap-align:center 居中吸附,左右 peek 对称,消除"中间卡左侧被切/遮挡"。 (以本轮"滑动时左卡遮挡"反馈为准,取代旧"首卡贴左"做法) */ .cases-preview-grid > .case-card { scroll-snap-align: center !important; } /* [8-9] 首页"内容增长飞轮"预览块(.method-preview,纯文字预览,无图形)手机整段隐藏。 注:服务页是 .method/.flywheel-v3(真旋转飞轮),不受影响;完整飞轮方法论入口在 /zh/services/#method */ .method-preview { display: none !important; } /* ============================================================ [9] #6 logo 墙 AliExpress 偏小:它是宽扁+留白多的 logo,96px marquee 格子太窄、26px 高度一刀切把它压小。 不动 marquee 结构,只给它单独加宽格子 + 放开 max-h/max-w,匹配 PC 观感(PC 给它 91h/308w)。 ============================================================ */ .client-logo-wrap[title="速卖通"], .client-logo-wrap[title="AliExpress"] { width: 138px !important; } .client-logo-wrap[title="速卖通"] .client-logo, .client-logo-wrap[title="AliExpress"] .client-logo { width: 116px !important; height: auto !important; max-width: 128px !important; max-height: none !important; } /* ============================================================ [10] 服务体系页 0615:① 五星范式清单化 ② 智能增长飞轮左中右(四 button 环绕圆) ============================================================ */ /* [10-1] 五星:手机隐藏五边形 SVG(同首页),5 条做成全宽单列清单(缩写左+说明右),修描述被裁(图5) */ .star-layout .star-hero { display: none !important; } .star-notes { grid-template-columns: 1fr !important; } .star-layout .star-note { grid-template-columns: 60px 1fr !important; padding: 12px 2px !important; } .star-layout .star-note-code { font-size: 16px !important; } .star-layout .star-note p { font-size: 13px !important; line-height: 1.55 !important; } /* [10-2] 智能增长飞轮 → 左中右(图6):左列 个性化/内容多触点 + 中圆 + 右列 明确品牌/内容实时迭代 */ .flywheel-v3 { display: grid !important; grid-template-columns: 1fr auto 1fr !important; grid-template-areas: "tl core bl" "tr core br" !important; column-gap: 6px !important; row-gap: 16px !important; align-items: center !important; max-width: none !important; } .fw-item-tl { grid-area: tl !important; } .fw-item-tr { grid-area: tr !important; } .fw-item-bl { grid-area: bl !important; } .fw-item-br { grid-area: br !important; } .fw-core { grid-area: core !important; } .fw-item-tl, .fw-item-tr, .fw-item-bl, .fw-item-br { text-align: center !important; align-self: center !important; position: static !important; } .fw-core-svg { max-width: 108px !important; } .fw-btn { padding: 7px 6px !important; font-size: 10.5px !important; margin-bottom: 5px !important; } .fw-btn-text { white-space: nowrap !important; } .fw-desc { font-size: 9px !important; line-height: 1.4 !important; margin-left: 0 !important; } /* ============================================================ [11] 导航抽屉重做(0615-285/363): ① 折叠三角移到行右端;文字点击=跳转,箭头点击=展开/收起(分离逻辑见 site.js [Lili 11]) ② 背景做层次(参考网易云"我的"):抽屉底色脱离死黑#171717→#141414, 展开的子菜单收进"抬升的圆角卡片块"(底色提一层)+ 行内细分隔线,字号分层 ============================================================ */ /* ① 三角移右:dropdown 行改 flex,文字占左、注入按钮贴右,子菜单换行铺满 */ .nav-links .nav-dropdown { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; width: 100% !important; } .nav-links .nav-dropdown > .nav-parent { flex: 1 1 auto !important; min-width: 0 !important; } /* 去掉旧的贴字 ::after 三角(箭头改由独立按钮承载,可单独点);含 open 态,避免展开时重复出现 */ .nav-links .nav-dropdown > .nav-parent::after, .nav-links .nav-dropdown.open > .nav-parent::after { content: none !important; } .nav-acc-toggle { display: inline-flex !important; flex: 0 0 auto !important; margin-left: auto !important; width: 44px !important; height: 44px !important; padding: 0 !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; cursor: pointer !important; color: var(--accent) !important; font-size: 15px !important; line-height: 1 !important; -webkit-tap-highlight-color: transparent; } .nav-acc-toggle::before { content: "\203A"; display: block; transition: transform .25s ease; } .nav-links .nav-dropdown.open .nav-acc-toggle::before { transform: rotate(90deg); } .nav-links .nav-dropdown > .nav-dropdown-menu { flex: 0 0 100% !important; width: 100% !important; } /* ② 背景层次 */ .nav-links { background: rgba(20,20,20,0.98) !important; } /* 顶级项字号分层:主项略大略粗 */ .nav-links > a, .nav-links .nav-dropdown > .nav-parent { font-size: 16.5px !important; font-weight: 600 !important; } /* 展开的子菜单 = 抬升圆角卡片块(比抽屉底色亮一层) */ .nav-links .nav-dropdown.open > .nav-dropdown-menu { background: rgba(255,255,255,0.05) !important; border-radius: 8px !important; padding: 2px 14px !important; margin-top: 8px !important; margin-bottom: 4px !important; } /* 折叠态:padding/margin 归零,确保真正 0 高,避免露出首行 sliver(否则收起态会有一条横线) */ .nav-links .nav-dropdown:not(.open) > .nav-dropdown-menu { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; } /* 卡片内每行用细线分隔(网易云那种行层次),首行不画线;仅展开态生效,避免折叠时漏 1px 横线 */ .nav-links .nav-dropdown.open .nav-dropdown-menu a { border-top: 1px solid rgba(255,255,255,0.07) !important; padding: 11px 0 !important; font-size: 13.5px !important; } .nav-links .nav-dropdown.open .nav-dropdown-menu a:first-child { border-top: none !important; } /* 框架行(★五星/↻飞轮)字号略大于编号清单,做主次 */ /* [Lili] 去掉特殊项自带的 rgba(.05) 矩形底:与展开卡片底叠加成"多一层矩形",透明后与其它行齐平 */ .nav-links .nav-dropdown-menu .nav-dropdown-framework { font-size: 14.5px !important; font-weight: 600 !important; background: transparent !important; } /* 原显式分隔 div 改为不占位(行边线已承担分隔) */ .nav-links .nav-dropdown-menu .nav-dropdown-divider { display: none !important; } /* ============================================================ [12] 服务页批量收尾(0615,scope=.page-services,仅服务主页,不影响 GEO/其他内页): ① 内页头黑条 -40% ② BLUEPRINT 标题缩 ③ 同心圆 -30% ④ 架构清单(十项)行间距 -30% ⑤ 飞轮标题缩 ⑥ 十大解决方案卡缩小 ============================================================ */ /* ① 内页头(navy 黑条)高度收 ~40%:大幅收 padding(顶部保留导航避让) */ .page-services .inner-hero { padding-top: 72px !important; padding-bottom: 26px !important; } .page-services .inner-hero h1 { margin-bottom: 10px !important; } .page-services .inner-hero p { font-size: 13px !important; line-height: 1.55 !important; margin: 0 !important; } /* ② BLUEPRINT 标题(东西互动服务架构)字号缩 */ .page-services .arch-title { font-size: clamp(17px, 4.6vw, 20px) !important; margin-bottom: 12px !important; } /* ③ 三层同心圆整体缩 ~30%(70%→49%);仅 ZH:中文 label 短放得下, EN 英文 label 长(SOLUTIONS/GROWTH FLYWHEEL/FIVE-STAR PARADIGM)需更大圆,保持原 70% */ .lang-zh.page-services .arch-orbit-stack { max-width: 49% !important; } /* ④ 架构内"解决方案清单"(arch-list 十项)行间距 -30%(14px→10px) */ .page-services .arch-list-body .arch-li-link { padding-top: 10px !important; padding-bottom: 10px !important; } /* ⑤ 飞轮标题(服务中台:智能增长飞轮)字号缩 */ .page-services .method-title-v3 { font-size: clamp(17px, 4.6vw, 20px) !important; margin-bottom: 16px !important; } /* ⑥ 十大解决方案"卡"缩小:序号、上下间距、标题、描述都收 */ .page-services .solution-block { padding-top: 26px !important; padding-bottom: 26px !important; } .page-services .solution-num { font-size: 40px !important; } .page-services .solution-title { font-size: 18px !important; margin-bottom: 12px !important; } .page-services .solution-desc { font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 16px !important; } /* ============================================================ [13] GEO 页批量(0615,scope=.page-geo): ①各段标题→VI蓝 ②hero h1+标题字号缩 ③hero eyebrow提亮(蓝底太暗) ④hero两button缩短(满宽→自适应) ⑤compare矩形并列框去描边 ⑥"GEO能带来什么"(5)/"双AI生态"(4)做左滑卡 ⑦FAQ答案白底做层次 ============================================================ */ /* ① 各段标题统一 VI 蓝(整页浅底,对比度足);EN 副标签保持灰 */ .page-geo .geo-primer .section-title, .page-geo .geo-playbook .section-title { color: var(--blue) !important; } .page-geo .geo-primer .section-title .en, .page-geo .geo-playbook .section-title .en { color: var(--gray-mid) !important; } /* ② 字号缩:hero h1 + 各段标题(比 [6-6] 现状再小一档) */ .page-geo .geo-redesign-hero h1, .page-geo .geo-hero-copy h1 { font-size: clamp(20px, 5.6vw, 25px) !important; line-height: 1.22 !important; } .page-geo .geo-primer .section-title, .page-geo .geo-playbook .section-title { font-size: clamp(17px, 4.6vw, 21px) !important; } /* ③ hero eyebrow(GEO·AEO)在蓝底上太暗 → 提亮为青柠 */ .page-geo .geo-redesign-hero .section-label { color: var(--accent) !important; opacity: 1 !important; } /* ④ hero 两个 button 缩短:满宽 → 自适应内容宽、左对齐 */ .page-geo .geo-hero-copy .hero-actions { width: auto !important; max-width: none !important; align-items: flex-start !important; } .page-geo .geo-hero-copy .hero-actions .btn-primary, .page-geo .geo-hero-copy .hero-actions .btn-secondary { width: auto !important; padding: 11px 22px !important; font-size: 13.5px !important; } /* ⑤ compare 矩形并列框去描边:去外框 + 去 gap 分隔线底色,每卡改独立细边圆角 */ .page-geo .geo-compare-grid { border: none !important; background: transparent !important; gap: 12px !important; margin-top: 28px !important; } .page-geo .geo-compare-grid > div { border: 1px solid rgba(13,13,13,0.10) !important; border-radius: 8px !important; padding: 20px !important; } .page-geo .geo-compare-grid strong { font-size: 19px !important; margin: 8px 0 !important; } /* ⑥ "GEO能带来什么"(5)/"双AI生态"(4)→ 左滑卡(横向 scroll-snap,露下一张) */ .page-geo .geo-cards-swipe { display: flex !important; grid-template-columns: none !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none; padding-bottom: 2px !important; } .page-geo .geo-cards-swipe::-webkit-scrollbar { display: none; } .page-geo .geo-cards-swipe > div { flex: 0 0 80% !important; scroll-snap-align: start !important; } /* ⑦ FAQ 答案加白底块做层次(原本直接铺在浅底上) */ .page-geo .faq-a { background: #fff !important; border-radius: 8px !important; padding: 14px 16px 14px 40px !important; margin-top: 8px !important; } /* ⑧ 字太浅修复:geo-card-list 项原是 --gray-light(#E8E7E2),浅色重构后落白卡上几乎看不见 → 加深 */ .page-geo .geo-card-list li { color: var(--gray-dark) !important; } /* ⑨ compare 卡描述去两端对齐(geo-primer p 的 justify 把窄卡内中文撑散) */ .page-geo .geo-compare-grid p { text-align: left !important; } /* ===== [第三批 · 字阶定稿 2026-06-15] 统一手机字阶;更高特异性+靠后顺序,压过前两批打架的 [5-2]/[5-3] ===== */ :root { --fs-body: 15px; } /* 首页主标题"东西互动"特例 50px(仅 ZH;EN 首页 hero 是 logo 图,不在此 scope 内) */ .lang-zh .hero-title { font-size: 50px !important; line-height: 1.06 !important; font-weight: 700 !important; } /* 内页头标题(about/cases/contact/insights/services 等内页) */ .inner-hero h1 { font-size: 30px !important; line-height: 1.18 !important; font-weight: 700 !important; } /* 区块标题 */ .section-title { font-size: 22px !important; line-height: 1.2 !important; font-weight: 700 !important; } /* 正文 v1 基准 15px/Regular;更具体的次级 14px 规则(如 .inner-hero p)特异性更高,自动保留 */ p, li, .cases-preview-desc { font-size: var(--fs-body) !important; line-height: 1.7 !important; } /* 备用档:已建 token,默认未绑定任何元素 —— 加粗正文 16/Medium、次级小灰 14/Normal */ .body-strong { font-size: 16px !important; font-weight: 500 !important; line-height: 1.65 !important; } .text-caption { font-size: 14px !important; font-weight: 400 !important; color: var(--gray-mid) !important; } /* ===== [第三批 · 页面级修复 2026-06-15] ===== */ /* [首页] 精选服务能力左右边距:svc-layout 不再额外加 padding(.services 已供 22px 版块边距); 之前 32 是叠加在 .services 之上→比 .cases-preview 多缩 32px。归零后 svc-side 落回 22px,与精选客户标题左对齐 */ .services .svc-layout { padding-left: 0 !important; padding-right: 0 !important; } /* [首页] hero 蓝区拉满一屏(去掉桌面 aspect-ratio 限制) */ .hero { aspect-ratio: auto !important; min-height: 100svh !important; } /* [服务页] 飞轮黑区顶部留白(手机 padding-top 经 --sp-section 算下来仅≈4px,贴顶) */ .page-services .method { padding-top: 40px !important; } /* [服务页] 飞轮卡文字被二批砍到 9px → 放大到可读 */ .page-services .fw-desc { font-size: 12px !important; line-height: 1.55 !important; } .page-services .fw-btn { padding: 8px 12px !important; font-size: 13px !important; } .page-services .fw-btn-text { font-size: 13px !important; } /* [抽屉 N1] 顶级板块做略亮圆角色块,板块间留空,形成层次(参考分组卡片) */ .nav-links > a, .nav-links > .nav-dropdown { background: rgba(255,255,255,0.05) !important; border-radius: 10px !important; margin-bottom: 2px !important; } .nav-links > a { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 13px 16px !important; } .nav-links > .nav-dropdown { padding: 2px 6px 4px 16px !important; } /* [抽屉 N2] 折叠箭头视觉放大(tap 区仍 44×44) */ .nav-acc-toggle { font-size: 20px !important; } .nav-acc-toggle::before { font-size: 21px !important; } /* [首页 clients-strip] 单 logo 视觉量调平:DHL/海信/OZON/ASU 顶满 ~112px 宽显大→缩 40%; 汉得只 ~44px 宽显小→放大 50%。基准渲染高 22px,绿框 ×0.6≈13px,红框 ×1.5=33px。中英 title 同覆盖 */ .clients-strip .client-logo-wrap[title="DHL"] .client-logo, .clients-strip .client-logo-wrap[title="海信"] .client-logo, .clients-strip .client-logo-wrap[title="Hisense"] .client-logo, .clients-strip .client-logo-wrap[title="OZON"] .client-logo, .clients-strip .client-logo-wrap[title="亚利桑那州立大学"] .client-logo, .clients-strip .client-logo-wrap[title="Arizona State University"] .client-logo { max-height: 16px !important; } .clients-strip .client-logo-wrap[title="汉得"] .client-logo, .clients-strip .client-logo-wrap[title="Hand Enterprise Solutions"] .client-logo { height: 33px !important; max-height: 33px !important; width: auto !important; } /* [服务页·arch 红框] 同心圆图区上下增加呼吸:上=图区与标题间,下=图区与蓝条间(首版,按需微调) */ .page-services .arch-wrap { margin-top: 16px !important; } .page-services .arch-list { margin-top: 26px !important; } /* [服务页·飞轮卡] 文字用字阶最小档 14px + 全部左对齐 */ .page-services .fw-item { text-align: left !important; } .page-services .fw-btn { justify-content: flex-start !important; } .page-services .fw-item .fw-desc { font-size: 14px !important; line-height: 1.6 !important; text-align: center !important; margin: 0 !important; max-width: none !important; } /* [服务页·五星范式列表] 每条独立成框、分开(直角,VI 卡片不圆角) */ .page-services .star-layout .star-notes { border-top: none !important; } .page-services .star-layout .star-note { border: 1px solid rgba(13,13,13,0.14) !important; margin-bottom: 10px !important; padding: 14px 14px !important; } .page-services .star-layout .star-note:last-child { margin-bottom: 0 !important; } /* [服务页·十大方案卡] 去掉背景矩形框(深灰渐变+边框) */ .page-services .solution-block { background: none !important; border: none !important; box-shadow: none !important; } .page-services .solution-block:hover { transform: none !important; border: none !important; box-shadow: none !important; } /* [服务页·方案卡] 相关案例只展示前 2 个,其余靠"查看全部"链接 */ .page-services .solution-cases-grid .solution-case-chip:nth-child(n+3) { display: none !important; } /* [服务页·五星范式] 大标题下方放静态五星图(参考五星模型页手机端同为静态,不旋转——带 PMF 等矢量标签,旋转会倒) */ .page-services .star-layout .star-hero { display: block !important; order: -1 !important; margin: 6px auto 20px !important; text-align: center !important; } .page-services .star-layout .star-hero-img { max-width: 200px !important; width: 200px !important; transform: none !important; margin: 0 auto !important; } } /* === Lili 修复 END === */ /* ============================================================ [m] 手机端批注修复 pass (2026-06-16) — 仅 @media(max-width:640px) 不影响 PC/平板/GEO;不改 DOM、URL、head、表单、cookie ============================================================ */ @media (max-width: 640px) { /* [m#2] 全站主行动/查看更多按钮高度统一≈hero青柠按钮高(48px),只统一高度,不强制宽度(通栏CTA保留原宽) */ .btn-primary, .btn-secondary, .star-preview-cta, .about-cta, .cases-preview-more a, .method-preview-cta, .services-more a, .svc-side-cta, .svc-bento-cta, .cta-book { min-height: 48px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* [m#7→#N4] inner-hero 蓝带:版心缩短(354→300)+ 内容垂直居中消除空底;眉标用 VI lime(对齐洞察页) */ .inner-hero { min-height: 300px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .inner-hero-content .section-label { color: var(--accent) !important; } /* [m#11] 关于页全球布局:手机隐藏点阵地图(.wo-globe),保留城市清单(.wo-strip) */ .wo-globe { display: none !important; } .wo-stage { min-height: 0 !important; gap: 0 !important; } /* [m#12] logo墙:DHL/海信/OZON 偏大,缩30%与其余拉齐 */ .client-logo-wrap[title="DHL"] .client-logo, .client-logo-wrap[title="海信"] .client-logo, .client-logo-wrap[title="OZON"] .client-logo { transform: scale(0.7); } /* [m#4] 服务页智能增长飞轮:手机端压扁三栏 → 改竖排居中堆叠,中心圆水平居中、与四标签对齐 */ .page-services .flywheel-v3 { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 22px !important; max-width: 340px !important; margin: 0 auto !important; grid-template-columns: none !important; grid-template-rows: none !important; } .page-services .flywheel-v3 .fw-item { text-align: center !important; align-self: center !important; } .page-services .flywheel-v3 .fw-item .fw-desc { margin: 0 auto !important; max-width: 280px !important; } .page-services .flywheel-v3 .fw-core { justify-self: center !important; align-self: center !important; } /* [m#5] 五星范式清单:去外框左右(及底)竖边"脏线",仅留顶线+行分隔 */ .page-services .star-layout .star-notes { border-left: none !important; border-right: none !important; border-bottom: none !important; } /* [m#6] 十大方案:虚线从"块内(desc↔相关案例)"移到"块间(01↔02)"分隔 + 收紧块内文字间距 */ .page-services .solution-cases { border-top: none !important; margin-top: 12px !important; padding-top: 0 !important; } .page-services .solution-block { border-bottom: 1px dashed rgba(255,255,255,0.18) !important; border-radius: 0 !important; padding-bottom: 26px !important; margin-bottom: 26px !important; } .page-services .solution-block:last-child { border-bottom: none !important; } .page-services .solution-title { margin-bottom: 8px !important; } .page-services .solution-desc { margin-bottom: 12px !important; } } /* === [N4-N7 批 2026-06-16] 仅手机端 === */ @media (max-width: 640px) { /* [m#N7] 关于页全球布局城市清单字号偏小 → 提到同层级(zh 14 / en 10.5) */ .wo-strip .ci .zh { font-size: 14px !important; line-height: 1.35 !important; } .wo-strip .ci.major .zh { font-weight: 600 !important; } .wo-strip .ci .en { font-size: 10.5px !important; } } /* === [认证说明文字缺失修复 2026-06-16] 仅手机端 === */ @media (max-width: 640px) { /* 根因:全站 word-break:keep-all,而手机端 normal 复位只覆盖 p/li/标题, .cert-desc/.cert-name/.cert-en 是 div 未被复位 → 中文长句不换行右溢被裁。 这里恢复正常 CJK 换行 + 让 grid 1fr 列可压缩(min-width:0)。 */ .cert-body { min-width: 0 !important; } .cert-desc, .cert-name, .cert-en { word-break: normal !important; line-break: auto !important; overflow-wrap: anywhere !important; } } /* === [GEO 页排版收束 2026-06-16] 仅手机端,scope .page-geo,不动 PC === */ @media (max-width: 640px) { /* ① hero 眉标 GEO·AEO 左对齐(去 5% 缩进,与 h1 齐) */ .page-geo .geo-hero-copy > .section-label { margin-left: 0 !important; } /* ② 平台清单字符与上方正文一致:去大写+字距(大小/字重本就 14/300 相同) */ .page-geo .geo-platforms { text-transform: none !important; letter-spacing: 0 !important; } /* ③ 内容正文统一 14px/400(原 primer 15 / 引用 13/14.5 / note 12/13 混用;hero 正文保持不动) */ .page-geo .geo-primer-inner p, .page-geo .geo-buyer-quotes li, .page-geo .geo-note { font-size: 14px !important; font-weight: 400 !important; } /* ④ 卡片标题统一 16px/600(原 15/18/19 三种) */ .page-geo .geo-step-grid:not(:has(.geo-step-card:nth-child(4))) .geo-step-card h3, .page-geo .geo-compare-grid strong, .page-geo .geo-answer-card b { font-size: 16px !important; font-weight: 600 !important; } /* ⑤ 卡片正文/次要统一 13px/400(原 12.5/13/13.5 + 700 混用) */ .page-geo .geo-step-grid:not(:has(.geo-step-card:nth-child(4))) .geo-step-card p, .page-geo .geo-answer-card p, .page-geo .geo-card-list li, .page-geo .geo-compare-grid span { font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; } /* ⑥ 横滑卡首卡左缘与标题对齐(scroll-padding 抵消 22 内边距,snap 不再把卡吸到边缘) */ .page-geo .geo-step-grid, .page-geo .geo-cards-swipe { scroll-padding-left: 22px !important; } } /* === [卡片阴影去掉 2026-06-16] 仅手机端,PC 保留 === */ @media (max-width: 640px) { /* 联系页:表单卡 + 联系方式卡;服务页:解决方案十项卡 — 去掉浮起投影 */ .contact-form-box, .contact-aside, .arch-list { box-shadow: none !important; } } /* === [手机端定点 2026-06-16 批2] === */ /* #4 微信弹窗关闭按钮:弹窗打开自动 focus 触发浏览器默认焦点框(蓝色破损) → 去掉,仅键盘留干净焦点环 */ .wechat-modal-close { outline: none; -webkit-tap-highlight-color: transparent; } .wechat-modal-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; } @media (max-width: 640px) { /* #1 GEO primer:FROM RANKINGS TO ANSWERS(en 副标)与下方正文间距太近 → 加间距 */ .page-geo .geo-primer .section-title { margin-bottom: 22px !important; } /* #3 表单输入字号 14→16px:iOS Safari 对 <16px 输入框聚焦会自动放大(表单"填满整屏") */ .contact-form input, .contact-form select, .contact-form textarea, .form-group input, .form-group select, .form-group textarea { font-size: 16px !important; } } /* [Lili 洞察书介卡] 标题/正文 手机端专属排版(PC 不动) ---------------------- */ .insight-body h2 .bk-m { display: none; } /* PC:显示带《》原标题,隐藏手机版 */ @media (max-width: 640px) { .insight-body h2 .bk-pc { display: none; } /* 手机:隐藏带《》版 */ .insight-body h2 .bk-m { display: inline; } /* 手机:显示无《》+断行版 */ .insight-body p .bk-br { display: block; margin-top: .45em; } /* 手机:"基于…"另起一行 */ } /* ============================================================ [Lili 本轮 ⑤⑥ 手机端] services 黑底带灰 + 1-10 浮窗条上手机 ============================================================ */ @media (max-width: 640px) { /* ⑤ 十大解决方案区背景:死黑(#0D0D0D) → 带灰度的深色(仅手机端,PC 不动) */ .services-detail { background: #1a1b20 !important; } /* ⑥ 服务页底部 1-10 浮窗条上手机:打开整条 + 只显示 01-10 + 联系我们; 文字 chip(服务架构/中台/基座/十大解决方案)继续隐藏;手机省掉 logo 腾地方, 条放在左下"返回顶部 ↑"右侧、同一行,不重叠。PC 那条原样不动。 */ .svc-floating-nav { display: flex !important; left: 60px; right: 10px; bottom: 16px; transform: translateY(16px); max-width: none; padding: 5px 6px; gap: 4px; } .svc-floating-nav.visible { transform: translateY(0); } .svc-fn-brand { display: none !important; } /* 顶部已有 logo,条里省掉 */ .svc-fn-divider { display: none !important; } .svc-fn-chips { display: flex !important; flex: 1 1 auto; min-width: 0; margin: 0; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .svc-fn-chips::-webkit-scrollbar { display: none; } .svc-fn-chip { display: none !important; } /* 文字 chip 隐藏 */ .svc-fn-nums { display: flex !important; max-width: none !important; opacity: 1 !important; overflow: visible !important; gap: 0; flex: 0 0 auto; } .svc-fn-num { font-size: 11px !important; padding: 8px 5px !important; } .svc-fn-num::after { display: none !important; } /* 手机端不弹 hover tooltip */ .svc-fn-cta { font-size: 11px !important; padding: 9px 12px !important; flex: 0 0 auto; margin-left: 4px; } } /* ============================================================ [Lili] GEO 常见问题(FAQ)改横滑卡片(参考上方左滑样式) —— 仅手机端 .faq-wrap 仅 GEO 页用;每个 Q&A 一张白卡,横向滚动吸附;dots 由 site.js 注入 ============================================================ */ @media (max-width: 640px) { .geo-primer .faq-wrap { display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 14px; margin: 22px -22px 0; padding: 2px 22px 12px; max-width: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-left: 22px; } .geo-primer .faq-wrap::-webkit-scrollbar { display: none; } .geo-primer .faq-wrap .faq-item { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; background: #fff; border: none !important; border-radius: 8px; padding: 22px 20px !important; margin: 0 !important; box-shadow: 0 1px 3px rgba(13,13,13,0.04), 0 8px 24px rgba(13,13,13,0.04); display: flex; flex-direction: column; } .geo-primer .faq-wrap .faq-q { padding-left: 26px; font-size: 16px; margin-bottom: 12px; } /* 答案不再单独白卡(整个 item 已是卡),去掉内层白底,贴卡内排版 */ .geo-primer .faq-wrap .faq-a { background: transparent !important; border-radius: 0 !important; padding: 0 0 0 26px !important; margin-top: 0 !important; font-size: 14px; line-height: 1.7; } } /* ============================================================ [Lili 浮窗条微调] 出现时机=滑到解决方案区 · 数字松一点 · 联系我们缩小 · ↑与条对齐 ============================================================ */ @media (max-width: 640px) { /* A1 出现太早 → 改为滑到"十大解决方案"区(#solutions 居中)才淡入;之前只要 scrollY>400 就冒出来 */ .svc-floating-nav.visible { opacity: 0 !important; pointer-events: none !important; transform: translateY(16px) !important; } .svc-floating-nav.at-solutions { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } /* A3 ↑ 与条做成等高(44)、同圆角(8)、同底边(16)的一对 → 顶边对齐、倒角一致 */ .svc-floating-nav { height: 44px !important; min-height: 0 !important; align-items: center; padding: 0 6px !important; } .svc-back-top { width: 44px !important; height: 44px !important; border-radius: 8px !important; bottom: 16px !important; left: 16px !important; } /* A2 数字留气口(靠 gap、不加宽) + "联系我们"再缩,确保 01-10 全部放得下 */ .svc-fn-nums { gap: 3px; } .svc-fn-num { padding: 8px 5px !important; } .svc-fn-cta { font-size: 10px !important; padding: 7px 10px !important; } }