/* ================================ 缔智元科技 · 浅色品牌色样式配色：粉红 → 珊瑚 → 橙 ================================ */ :root { --bg-0: #f9f7f3; /* 落地页底色：柔和暖白（不要纯白） */ --bg-1: #fff8f6; --bg-2: #fff0ec; --surface: #ffffff; --surface-soft: #fef3f0; --border: #f5e0d8; --border-soft: #fbede6; --text-0: #1a0f1f; --text-1: #3a2530; --text-2: #6b4e5b; --text-3: #9c7e8b; --text-4: #c9b1bb; --primary: #ec4899; --primary-deep: #db2777; --rose: #f43f5e; --coral: #fb7185; --orange: #f97316; --amber: #f59e0b; --peach: #fda4af; --grad-1: linear-gradient(135deg, #ec4899 0%, #f97316 100%); --grad-2: linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb7185 100%); --grad-3: linear-gradient(135deg, #f43f5e 0%, #f59e0b 100%); --grad-logo: linear-gradient(180deg, #ec4899 0%, #f43f5e 50%, #f97316 100%); --grad-bg: linear-gradient(135deg, #ffeef0 0%, #ffe4d6 50%, #fff3eb 100%); --shadow-soft: 0 2px 8px rgba(236, 72, 153, 0.06); --shadow-md: 0 8px 30px rgba(236, 72, 153, 0.10); --shadow-lg: 0 20px 60px rgba(236, 72, 153, 0.18); --radius-pill: 100px; --radius-lg: 28px; --radius-xl: 36px; --radius-2xl: 48px; --font-body: 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', -apple-system, sans-serif; } /* ===== 落地页（index）整页统一为「hero 视频背景同款中性近白」#fdfdfd ===== 背景历程：原暖白 #f9f7f3 太暖、把 hero 视频中性白底衬成方框 → 对齐到视频中性近白 #fdfdfd 让视频融入 → 曾按用户色卡改纯白 #ffffff，用户又点名「改回上一版」→ 回到 #fdfdfd。三段视频自带背景是中性近白 #fcfcfc–#fefefe，#fdfdfd 是 252–254 的中点（对任一段差 ≤1 级、肉眼不可见），视频无缝融入、看不出方框。只作用于 .home（index 的）， about/cases 保留各自暖白，互不影响。 */ body.home { --bg-0: #fdfdfd; /* 落地页底色 = hero 视频背景中性近白，让视频融入、看不出方框 */ --bg-1: #fdfdfd; /* 原暖粉白板块（roles/showcase/contact）统一为同色，整页一个底色 */ } /* scenarios/capabilities 原是纯白 #fff（--surface），对齐到同一近白避免极细微亮度差 */ body.home .scenarios, body.home .capabilities { background: #fdfdfd; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 100px; } body { font-family: var(--font-body); background: var(--bg-0); color: var(--text-1); line-height: 1.6; overflow-x: clip; width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg-1); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #fbcfe8, #fed7aa); border-radius: 100px; border: 2px solid var(--bg-1); } /* ============ 鼠标光晕（z-index:99 全站可见） ============ */ .cursor-aura { position: fixed; left: 50vw; top: 50vh; width: 600px; height: 600px; pointer-events: none; z-index: 99; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(236, 72, 153, 0.10) 0%, rgba(244, 63, 94, 0.07) 30%, rgba(249, 115, 22, 0.04) 50%, transparent 70%); mix-blend-mode: multiply; filter: blur(20px); transition: opacity 0.3s; will-change: left, top; opacity: 0; } @media (max-width: 768px) { .cursor-aura { display: none !important; } } /* ============ 全局背景 Blob ============ */ .bg-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; } .blob-1 { top: -200px; right: -200px; width: 700px; height: 700px; background: radial-gradient(circle, #fbcfe8, transparent 70%); animation: blobFloat1 20s ease-in-out infinite; } .blob-2 { top: 40%; left: -300px; width: 600px; height: 600px; background: radial-gradient(circle, #fed7aa, transparent 70%); animation: blobFloat2 25s ease-in-out infinite; } .blob-3 { bottom: -200px; right: 20%; width: 500px; height: 500px; background: radial-gradient(circle, #fecaca, transparent 70%); animation: blobFloat3 22s ease-in-out infinite; } @keyframes blobFloat1 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(-30px,40px) scale(1.1);} 66%{transform:translate(20px,-30px) scale(0.95);} } @keyframes blobFloat2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-50px) scale(1.15);} } @keyframes blobFloat3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-40px,30px) scale(1.1);} } /* ============ 导航栏 ============ */ .navbar { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100; width: calc(100% - 48px); max-width: 1380px; transition: all 0.4s; } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 14px 28px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: 0 4px 20px rgba(236, 72, 153, 0.05); transition: all 0.4s; } .navbar.scrolled .nav-inner { background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 40px rgba(236, 72, 153, 0.10); } .logo { display: inline-flex; align-items: center; height: 40px; font-weight: 800; color: var(--text-0); transition: opacity .3s; } .logo:hover { opacity: 0.82; } .logo-img { height: 40px; width: auto; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; } /* 页脚里 logo 稍大（删板块后整体放大、让页脚不空） */ .footer .logo-img { height: 56px; } @media (max-width: 640px) { .logo-img { height: 34px; } .footer .logo-img { height: 40px; } } .nav-links { list-style: none; display: flex; gap: 6px; } .nav-links a { display: block; padding: 8px 16px; color: var(--text-2); font-size: 14px; font-weight: 500; border-radius: var(--radius-pill); transition: background 0.28s ease, color 0.2s ease, box-shadow 0.28s ease, font-weight 0.2s; } /* hover：粉色实底 + 白字，对比明显但不喧宾夺主（亚于 CTA） */ .nav-links a:hover { color: #ffffff; background: var(--primary); box-shadow: 0 4px 14px rgba(236, 72, 153, 0.28); } /* active（当前页）：粉→橙渐变 + 白字 + 稍强阴影，标识"你在这页"最显眼 */ .nav-links a.active { color: #ffffff; font-weight: 600; background: linear-gradient(135deg, var(--primary) 0%, var(--orange) 100%); box-shadow: 0 6px 18px rgba(236, 72, 153, 0.34), 0 2px 6px rgba(249, 115, 22, 0.18); } .nav-actions { display: flex; align-items: center; gap: 12px; } .nav-link-secondary { font-size: 14px; color: var(--text-2); font-weight: 500; padding: 8px 12px; } .nav-link-secondary:hover { color: var(--text-0); } .cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--text-0); color: white; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; transition: all 0.3s; } .cta-btn:hover { background: var(--primary); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4); } .cta-arrow { transition: transform 0.3s; } .cta-btn:hover .cta-arrow { transform: translate(2px, -2px) rotate(-12deg); } /* ============ 按钮 ============ */ .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: var(--text-0); color: white; border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--grad-1); opacity: 0; transition: opacity 0.4s; z-index: -1; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(236, 72, 153, 0.4); } .btn-primary:hover::before { opacity: 1; } .btn-primary .arrow { transition: transform 0.3s; } .btn-primary:hover .arrow { transform: translateX(4px); } .btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: var(--surface); border: 1px solid var(--border); color: var(--text-0); border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; transition: all 0.3s; } .btn-ghost:hover { border-color: var(--text-0); background: var(--surface-soft); transform: translateY(-2px); } .play-circle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--grad-1); color: white; border-radius: 50%; font-size: 9px; padding-left: 2px; } /* ============ 渐变文字 ============ */ .text-grad { background: var(--grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; display: inline-block; } .text-grad-2 { background: var(--grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; display: inline-block; } /* ============ Hero ============ */ .hero { position: relative; min-height: 100vh; min-height: 100svh; /* iOS/Safari 地址栏：用小视口高，避免 hero 超出可视区（老浏览器回退 100vh） */ padding: 100px 32px 20px; display: flex; align-items: center; z-index: 2; background: var(--bg-0); overflow: hidden; } .hero-decor { position: absolute; top: 50%; right: -120px; width: 600px; height: 600px; z-index: 0; opacity: 0.5; pointer-events: none; animation: slowRotate 60s linear infinite; } .hero-decor svg { width: 100%; height: 100%; display: block; } @keyframes slowRotate { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } /* ============ 旋转虚线圆环装饰 · 可复用组件 ============ 用法：位置/尺寸/不透明度由 .deco-XXX 单独覆盖；旋转方向和速度由 .dr-* 控制 */ .deco-rings { position: absolute; pointer-events: none; z-index: 0; opacity: 0.35; will-change: transform; } .deco-rings svg { width: 100%; height: 100%; display: block; } .deco-rings circle { fill: none; } /* 旋转速度与方向变体 */ .deco-rings.dr-cw-slow { animation: decoSpinCW 80s linear infinite; } .deco-rings.dr-cw-med { animation: decoSpinCW 55s linear infinite; } .deco-rings.dr-ccw-med { animation: decoSpinCCW 60s linear infinite; } .deco-rings.dr-ccw-slow { animation: decoSpinCCW 75s linear infinite; } @keyframes decoSpinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes decoSpinCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* ① Hero 左上 · 大号 · 平衡左侧文字区上方留白 */ .deco-rings.deco-hero-l { width: 520px; height: 520px; top: 4%; left: -160px; opacity: 0.55; } /* ② 产品矩阵右上 · 中号 · 给标题区添质感 */ .deco-rings.deco-showcase { width: 400px; height: 400px; top: 30px; right: -120px; opacity: 0.45; } /* ③ 联系我们左下 · 大号 · 给 section 添氛围 */ .deco-rings.deco-contact { width: 480px; height: 480px; bottom: -120px; left: -140px; opacity: 0.48; } .hero-inner { position: relative; z-index: 2; max-width: 1500px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 24px; align-items: center; } /* 左侧文字必须在 hero-visual 的白光晕之上，否则光晕外延会盖住标题/正文 */ .hero-text { position: relative; z-index: 3; } .hero-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; background: white; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--text-1); margin-bottom: 32px; box-shadow: var(--shadow-soft); } .pill-dot { width: 24px; height: 24px; background: var(--grad-1); border-radius: 50%; position: relative; } .pill-dot::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--grad-1); opacity: 0.3; animation: pulseDot 2s ease-in-out infinite; } @keyframes pulseDot { 0%,100%{transform:scale(1);opacity:.3;} 50%{transform:scale(1.4);opacity:0;} } .hero-title { font-size: clamp(42px, 4.4vw, 64px); font-weight: 800; line-height: 1.05; color: var(--text-0); margin-bottom: 30px; letter-spacing: -1.5px; } .hero-sub { font-size: 18px; color: var(--text-2); line-height: 1.75; margin-bottom: 40px; max-width: 540px; } .hero-actions { display: flex; gap: 14px; margin-bottom: 60px; flex-wrap: wrap; } .hero-meta { display: flex; align-items: center; gap: 16px; } .meta-avatars { display: flex; } .meta-avatars .avatar { width: 44px; height: 44px; border: 2.5px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-1); margin-left: -10px; box-shadow: 0 2px 8px rgba(236, 72, 153, 0.15); } .meta-avatars .avatar:nth-child(1) { background: linear-gradient(135deg, #fbcfe8, #f9a8d4); margin-left: 0; } .meta-avatars .avatar:nth-child(2) { background: linear-gradient(135deg, #fecdd3, #fda4af); } .meta-avatars .avatar:nth-child(3) { background: linear-gradient(135deg, #fed7aa, #fdba74); } .meta-avatars .avatar:nth-child(4) { background: linear-gradient(135deg, #fef08a, #fde047); } .meta-text { display: flex; flex-direction: column; gap: 2px; } .meta-text strong { font-size: 14px; color: var(--text-0); font-weight: 700; } .meta-text span { font-size: 12px; color: var(--text-3); } /* Hero 右侧视频：宽高由 JS 按视口可用空间和原始比例计算，完整显示并尽可能放大。 */ .hero-visual { position: relative; margin: 0 auto; isolation: isolate; width: 405px; height: 720px; } /* 视频四周的柔光晕：颜色跟随页面底色 var(--bg-0)（落地页=视频同款近白），于是光晕与页面、与视频白底完全同色 → 既保留这层柔光过渡特效，又绝不会出现一圈比页面更亮的白色光环（否则会被看成视频周围有个发光方框）。 */ .hero-visual::before { content: ''; position: absolute; inset: -7% -32%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, var(--bg-0) 0 72%, transparent 100%); } .blob-photo-wrap { position: relative; width: 100%; height: 100%; } .blob-photo { position: relative; width: 100%; height: 100%; background: var(--bg-0); overflow: visible; box-shadow: none; } .photo-placeholder { position: relative; width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, #fecdd3 0%, transparent 50%), radial-gradient(circle at 70% 70%, #fed7aa 0%, transparent 50%), linear-gradient(135deg, #fff0f3 0%, #fff3eb 100%); display: flex; align-items: center; justify-content: center; } /* 纯白底与轻微边缘渐隐让视频自然融入页面，同时 contain 保证人物完整。 */ .hero-video { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: var(--bg-0); clip-path: inset(1px round 18px); } /* ============ Hero 视频暂停按钮（Apple Vision Pro 复刻） ============ */ .video-toggle { position: absolute; bottom: 14%; right: 12%; width: 64px; height: 64px; border-radius: 50%; background: none; border: none; cursor: pointer; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 0; color: white; opacity: 0.38; transition: opacity 100ms linear, transform .2s ease; } .video-toggle:hover { opacity: 0.92; } .video-toggle:active { transform: scale(0.95); } .video-toggle:focus-visible { outline: 3px solid #0071e3; outline-offset: 4px; } /* 进度环 SVG · Apple inline-media-ui 同款：灰轨道常驻，白色进度从 12 点顺时针推进 */ .vt-ring { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); pointer-events: none; overflow: visible; } .vt-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; } .vt-track { stroke: rgb(134, 134, 139); } .vt-progress { stroke: rgb(255, 255, 255); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28)); will-change: stroke-dashoffset; } /* 暂停/播放图标 · 简洁线性 SF Symbols 风格 */ .vt-icon { position: relative; width: 34px; height: 34px; z-index: 1; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.32)); transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1); } .vt-icon-play { display: none; } .video-toggle.is-paused .vt-icon-pause { display: none; } .video-toggle.is-paused .vt-icon-play { display: block; } @media (max-width: 1024px) { .video-toggle { width: 54px; height: 54px; bottom: 12%; right: 10%; } .vt-icon { width: 28px; height: 28px; } } @media (max-width: 768px) { .video-toggle { width: 48px; height: 48px; bottom: 10%; right: 8%; } .vt-icon { width: 25px; height: 25px; } } @media (max-width: 640px) { .video-toggle { width: 42px; height: 42px; bottom: 10%; right: 8%; } } .ph-circle { text-align: center; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; } .ph-icon { font-size: 56px; background: var(--grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin-bottom: 8px; animation: gentleRotate 8s ease-in-out infinite; } @keyframes gentleRotate { 0%,100%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(180deg) scale(1.1);} } .ph-title { font-size: 18px; font-weight: 700; color: var(--text-0); letter-spacing: 1px; } .ph-hint { font-size: 12px; color: var(--text-3); line-height: 1.6; } .scroll-hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; /* 抬到 hero 内容层(.hero-inner z:2)之上，否则数字人/装饰会盖住「向下滚动」上方的鼠标图标 */ display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-3); font-size: 11px; font-weight: 500; letter-spacing: 2px; } .mouse-ico { width: 24px; height: 38px; border: 1.5px solid var(--text-3); border-radius: 12px; position: relative; } .wheel { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 8px; background: var(--text-2); border-radius: 2px; animation: scrollWheel 1.8s ease-in-out infinite; } @keyframes scrollWheel { 0%{top:6px;opacity:1;} 50%{top:18px;opacity:.3;} 100%{top:6px;opacity:1;} } /* ============ 通用 Section 标题 ============ */ section.capabilities, section.showcase, section.scenarios, section.partners, section.logos, section.contact { position: relative; z-index: 2; padding: 140px 32px; } .section-head { text-align: center; max-width: 1120px; margin: 0 auto 80px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: 2px; margin-bottom: 24px; } .eyebrow-line { display: inline-block; width: 24px; height: 2px; background: var(--grad-1); border-radius: 2px; } .section-head h2 { font-size: clamp(32px, 4.2vw, 56px); font-weight: 800; color: var(--text-0); line-height: 1.15; margin-bottom: 20px; letter-spacing: -1.5px; } .section-sub { font-size: 17px; color: var(--text-2); line-height: 1.7; } .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ============ 核心能力 ============ */ .capabilities { background: var(--surface); } .cap-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; transform: translateZ(0); } .cap-card { position: relative; padding: 44px 36px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transform: scale(1); transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .5s cubic-bezier(.16,1,.3,1), filter .5s cubic-bezier(.16,1,.3,1); will-change: transform, opacity; } .cap-card::before { content: ''; position: absolute; top: -50%; right: -30%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(244, 63, 94, 0.10), transparent 70%); opacity: 0; transition: opacity .5s; border-radius: 50%; pointer-events: none; } /* 关键修复：只在鼠标真正落在某张卡片上时，其他卡片才缩小变淡 */ .cap-grid:has(.cap-card:hover) .cap-card:not(:hover) { transform: scale(0.96); opacity: 0.55; filter: saturate(0.7); } .cap-grid .cap-card:hover { transform: scale(1.04); opacity: 1; filter: none; border-color: transparent; box-shadow: var(--shadow-lg); z-index: 2; } .cap-card:hover::before { opacity: 1; } .cap-circle { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; transition: transform .4s; } .cap-circle svg { width: 36px; height: 36px; } .cap-card:hover .cap-circle { transform: rotate(-8deg) scale(1.08); } .cap-card h3 { font-size: 22px; font-weight: 700; color: var(--text-0); margin-bottom: 12px; } .cap-card p { color: var(--text-2); font-size: 14.5px; line-height: 1.75; } /* ============ 产品矩阵 ============ */ .showcase { background: var(--bg-1); position: relative; overflow: hidden; } .showcase-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; transform: translateZ(0); } .show-card { position: relative; border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface); border: 1px solid var(--border); cursor: pointer; min-height: 420px; transform: scale(1); transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1), filter .55s cubic-bezier(.16,1,.3,1); will-change: transform, opacity; } .show-card.big { grid-column: span 2; min-height: 520px; } .show-card.wide { grid-column: span 3; min-height: 380px; } /* 关键修复 */ .showcase-grid:has(.show-card:hover) .show-card:not(:hover) { transform: scale(0.97); opacity: 0.6; filter: saturate(0.75); } .showcase-grid .show-card:hover { transform: scale(1.02); opacity: 1; filter: none; box-shadow: var(--shadow-lg); z-index: 2; } .show-mask { position: relative; width: 100%; height: 100%; } .img-ph { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, #fbcfe8 0%, transparent 50%), radial-gradient(circle at 70% 70%, #fed7aa 0%, transparent 50%), linear-gradient(135deg, #fff0f3 0%, #fff3eb 100%); display: flex; align-items: center; justify-content: center; transition: transform .6s; } .show-card:hover .img-ph { transform: scale(1.03); } .img-ph.rounded { border-radius: var(--radius-2xl); } /* 产品矩阵真实照片：覆盖在 .img-ph 之上；onerror 隐藏时占位回填产品矩阵卡片是固定网格大小（不会像服务角色那样横向 flex-grow），所以这里的 1.03 hover scale 就是干净的 3% 放大，不会出现 cover-refit 叠加放大 */ .show-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; user-select: none; -webkit-user-drag: none; transition: transform .6s; } .show-card:hover .show-photo { transform: scale(1.03); } .show-tag { position: absolute; top: 24px; left: 24px; padding: 8px 16px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--primary); z-index: 3; } .show-tag.tag-pink { color: var(--primary-deep); } .show-tag.tag-purple { color: var(--rose); } .show-tag.tag-orange { color: var(--orange); } .show-info-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: none; /* 移除白色渐变遮罩：视频/图片不再被盖住 */ z-index: 3; } .show-card.big .show-info-overlay { padding: 28px; } /* 标题做成磨砂玻璃小标签，浮在媒体上方而不遮挡画面 */ .show-info-overlay h3 { display: inline-block; margin: 0; font-size: 18px; font-weight: 700; color: var(--text-0); background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 10px 18px; border-radius: var(--radius-pill); box-shadow: 0 6px 20px rgba(20, 10, 30, 0.10); } .show-card.big .show-info-overlay h3 { font-size: 22px; padding: 12px 22px; } .show-info-overlay p { color: var(--text-2); font-size: 14px; line-height: 1.7; margin-bottom: 12px; } .card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-0); font-weight: 600; font-size: 14px; transition: gap .3s; } .show-card:hover .card-link { gap: 12px; } /* ============ 服务角色（横向联动卡片组） ============ */ .roles { position: relative; z-index: 2; padding: 80px 32px; background: var(--bg-1); overflow: hidden; isolation: isolate; } .roles-bg-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .rdecor { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; } .rdecor-1 { top: -150px; left: 8%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(236, 72, 153, 0.30), transparent 70%); } .rdecor-2 { bottom: -200px; right: 5%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(249, 115, 22, 0.28), transparent 70%); } .rdecor-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(236, 72, 153, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 72, 153, 0.05) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); } .roles-head { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto 45px; text-align: center; } .roles-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: 2px; margin-bottom: 24px; } .re-line { display: inline-block; width: 24px; height: 2px; background: var(--grad-1); border-radius: 2px; } .roles-title { font-size: clamp(34px, 4.2vw, 54px); font-weight: 800; line-height: 1.18; color: var(--text-0); letter-spacing: -1.2px; margin-bottom: 20px; } .roles-grad { background: var(--grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .roles-sub { font-size: 16px; line-height: 1.8; color: var(--text-2); max-width: 720px; margin: 0 auto; } .roles-track { position: relative; z-index: 2; max-width: 1500px; margin: 0 auto; display: flex; gap: 14px; --role-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --role-motion-duration: 0.48s; --role-card-height: 650px; --role-machine-height: clamp(320px, 26vw, 340px); height: var(--role-card-height); /* 整条 track 高度恒定，不再随激活卡变化 */ align-items: stretch; transform: translateZ(0); } .role-card { position: relative; flex-grow: 1; flex-basis: 0; flex-shrink: 1; min-width: 190px; height: var(--role-card-height); /* 卡片高度恒定，消除 aspect 二次变化 */ border-radius: 32px; overflow: hidden; cursor: pointer; background: white; border: 1px solid var(--border); outline: none; display: flex; flex-direction: column; container-type: inline-size; transform: translate3d(0, 0, 0); /* 只过渡真正在变的 3 个属性，每个用同一条曲线 + 同一时长 */ transition: flex-grow var(--role-motion-duration) var(--role-ease), opacity var(--role-motion-duration) var(--role-ease), filter var(--role-motion-duration) var(--role-ease), box-shadow var(--role-motion-duration) var(--role-ease), border-color var(--role-motion-duration) var(--role-ease); will-change: flex-grow, opacity, filter; } .roles-track .role-card:not(.active) { flex-grow: 1; opacity: 0.96; filter: saturate(0.97); } .role-card.active { flex-grow: 1.28; opacity: 1; filter: none; border-color: rgba(236, 72, 153, 0.18); box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.12), 0 20px 48px rgba(236, 72, 153, 0.14), 0 12px 36px rgba(20, 10, 30, 0.05); } .role-card:focus-visible { outline: 3px solid rgba(236, 72, 153, 0.38); outline-offset: 5px; } .role-bg { position: relative; flex: 1 1 auto; min-height: 0; z-index: 0; overflow: hidden; background: #fff; transition: flex-basis var(--role-motion-duration) var(--role-ease); } /* 四种设备原图比例不同，分别补偿透明留白，使机器主体视觉高度一致。 */ .role-photo { position: absolute; left: 50%; bottom: 0; width: auto; height: var(--role-machine-height); max-width: none; object-fit: contain; object-position: center bottom; transform: translateX(-50%); z-index: 1; user-select: none; -webkit-user-drag: none; transition: filter var(--role-motion-duration) var(--role-ease); } .role-card.active .role-photo { filter: none; } .role-card[data-role="airport"] .role-photo { height: calc(var(--role-machine-height) * 1.05); } .role-card[data-role="office"] .role-photo { height: calc(var(--role-machine-height) * 1.2); } .role-card[data-role="exhibition"] .role-photo { height: calc(var(--role-machine-height) * 1.05); } .role-card[data-role="event"] .role-photo { height: calc(var(--role-machine-height) * 1.04); } /* 大屏端（正方形后台截图）/ 手机端（竖向手机样机）与其它 4 张卡视觉统一：不再特殊处理，一律沿用上面 .role-photo 的「贴底 + contain + 定高 + 水平居中」基础规则，只补各自的高度系数，让「主体」视觉高度和其它卡齐平。这样它们也自然获得同款「上下动」——卡片激活时内容区展开、 .role-bg 收缩、贴底的主体随卡片底边上移（静态贴底、激活上浮），与其它卡完全一致。 ⚠️ 切勿再用 cover + 四向 0 + !important 铺满：那样①主体只缩放不上浮、动效不统一； ②inline 样式被 !important 锁死 → 编辑器里这张图无法拖动 / 改尺寸（与其它卡不一致）。 */ .role-card[data-role="bigscreen"] .role-photo { height: calc(var(--role-machine-height) * 1.05); } .role-card[data-role="mobile"] .role-photo { height: calc(var(--role-machine-height) * 1.15); } .role-img-ph { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; pointer-events: none; } .role-overlay { display: none; } .role-glow { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 95%, rgba(236, 72, 153, 0.12), transparent 56%), linear-gradient(180deg, transparent 0%, rgba(255, 245, 247, 0.16) 100%); opacity: 0; transition: opacity var(--role-motion-duration) var(--role-ease); pointer-events: none; } .role-card.active .role-glow { opacity: 1; } .role-content { position: relative; inset: auto; z-index: 3; flex-shrink: 0; padding: 22px 30px 24px; color: var(--text-0); /* 去掉「了解方案」按钮背后的浅色玻璃面板（白偏粉渐变 + 柔光晕 + 模糊）——按用户要求，只保留按钮等内容，面板透明后内容直接落在卡片白底上，6 张服务角色卡片一致。 */ background: transparent; border-top: none; box-shadow: none; transition: background var(--role-motion-duration) var(--role-ease), box-shadow var(--role-motion-duration) var(--role-ease); } .role-tag { display: inline-block; padding: 6px 12px; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(236, 72, 153, 0.35); border-radius: 100px; font-size: 10.5px; font-weight: 700; letter-spacing: 2.5px; color: var(--primary-deep); margin-bottom: 18px; } .role-title-text { font-size: clamp(22px, 1.8vw, 30px); font-weight: 700; line-height: 1.2; color: var(--text-0); margin-bottom: 0; letter-spacing: -0.5px; } .role-card:not(.active) .role-content { padding-inline: 18px; } .role-card:not(.active) .role-title-text { font-size: 16px; font-size: clamp(13px, 8.8cqw, 19px); line-height: 1.15; letter-spacing: 0; white-space: nowrap; } .role-card:not(.active) .role-title-text br { display: none; } .role-extra { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); transition: max-height .5s var(--role-ease), opacity .35s ease, transform .4s var(--role-ease); pointer-events: none; } .role-card.active .role-extra { max-height: 260px; /* 容下换行后的多行介绍 + 按钮，避免底部被截断 */ opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s; } .role-desc { font-size: clamp(12px, 2.2cqw, 13.5px); line-height: 1.7; color: var(--text-2); margin: 18px 0 22px; max-width: none; white-space: normal; /* 悬停展开时自动换行，完整显示介绍（原 nowrap 会被卡片宽度截断） */ overflow-wrap: anywhere; /* 长串中文/无空格也能断行，不溢出卡片 */ } .role-cta { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 20px; background: var(--grad-1); border-radius: 100px; color: white; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); /* 去掉「了解方案」按钮下方那块淡淡的粉色色块（原 box-shadow 投影，偏下 8px 像一块方块）——按用户要求，6 张卡片一致 */ box-shadow: none; } .role-cta:hover { transform: translateY(-2px); } .role-cta-arrow { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.96); color: var(--primary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.2,.8,.2,1); } .role-cta:hover .role-cta-arrow { transform: translateX(2px) rotate(-12deg); } /* ============ 应用场景 · 图片堆叠 + 悬停展开 + 文案 ============ */ .scenarios { background: var(--surface); padding-top: 80px !important; padding-bottom: 80px !important; } .scenarios .section-head { margin-bottom: 50px; } /* 顶部标签（滑块） */ .scn-tabs { max-width: 900px; margin: 0 auto 30px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 8px; background: var(--bg-1); border-radius: var(--radius-pill); border: 1px solid var(--border); } .scn-tab { padding: 12px 24px; background: transparent; border: none; border-radius: var(--radius-pill); color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .35s cubic-bezier(.2,.8,.2,1); font-family: inherit; white-space: nowrap; } .scn-tab:hover { color: var(--text-0); background: rgba(255, 255, 255, 0.7); } .scn-tab.is-active { background: var(--grad-1); color: white; box-shadow: 0 6px 20px rgba(236, 72, 153, 0.35); } /* 舞台容器：左右两栏，初始 100%/0%，悬停时 50%/50% */ .scn-stage { position: relative; max-width: 1380px; margin: 0 auto; height: 500px; display: grid; /* 始终 50/50：左侧滑动图，右侧文案 */ grid-template-columns: 1.05fr 1fr; border-radius: var(--radius-2xl); overflow: hidden; background: white; border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(236, 72, 153, 0.10); } /* 左右翻页箭头 */ .scn-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1.5px solid var(--border); color: var(--text-1); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; opacity: 0; pointer-events: none; padding: 0; font-family: inherit; box-shadow: 0 8px 24px rgba(236, 72, 153, 0.12); transition: opacity .45s cubic-bezier(.2,.8,.2,1), background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .scn-nav svg { width: 22px; height: 22px; } .scn-nav-prev { left: 18px; } .scn-nav-next { right: 18px; } /* 激活态显示箭头 */ .scn-stage.has-active .scn-nav { opacity: 1; pointer-events: auto; } .scn-nav:hover { background: var(--grad-1); color: white; border-color: transparent; box-shadow: 0 12px 32px rgba(236, 72, 153, 0.45); transform: translateY(-50%) scale(1.08); } .scn-nav:active { transform: translateY(-50%) scale(0.96); } .scn-nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* 左侧：滑动翻页舞台（始终展示一张图） */ .scn-images { position: relative; overflow: hidden; background: var(--bg-1); min-width: 0; } .scn-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; /* 默认：藏在右侧，等待入场 */ transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform .65s cubic-bezier(.5, .15, .25, 1), opacity .45s ease; } .scn-img.is-active { transform: translateX(0); opacity: 1; pointer-events: auto; z-index: 2; } /* 出场：根据箭头方向滑走 */ .scn-img.is-leaving-left { transform: translateX(-100%); opacity: 0; z-index: 1; } .scn-img.is-leaving-right { transform: translateX(100%); opacity: 0; z-index: 1; } /* 入场前瞬时定位（无过渡） */ .scn-img.entering-from-left { transform: translateX(-100%); opacity: 0; transition: none !important; } .scn-img.entering-from-right { transform: translateX(100%); opacity: 0; transition: none !important; } .scn-img-bg { position: relative; width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, #fbcfe8 0%, transparent 55%), radial-gradient(circle at 70% 70%, #fed7aa 0%, transparent 55%), linear-gradient(135deg, #fff0f3 0%, #fff3eb 50%, #ffeae0 100%); background-size: cover; background-position: center; transition: transform .75s cubic-bezier(.2,.8,.2,1); overflow: hidden; } /* 已移除：hover 放大 / 默认呼吸动画 / active 光晕 —— 全部由滑动翻页接管 */ /* 真实照片：完全填满框，cover 自动裁掉超出部分 · onerror 时 display:none 让占位显出来 */ .scn-img-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /* 默认居中（#22 机场&航司用这个） */ z-index: 1; user-select: none; -webkit-user-drag: none; } /* #23 产业园区 · #24 政务问询 · #26 展厅接待 —— 重点露出图片左侧 */ .scn-img[data-key="park"] .scn-img-photo, .scn-img[data-key="gov"] .scn-img-photo, .scn-img[data-key="hall"] .scn-img-photo { object-position: left center; } .scn-img-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); font-size: 12px; text-align: center; padding: 16px; z-index: 0; /* 在真实照片下面 */ } .scn-img-ph .ph-icon { font-size: 36px; background: var(--grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .scn-img-label { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 7px 16px; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(236, 72, 153, 0.25); border-radius: 100px; font-size: 12.5px; font-weight: 700; color: var(--primary-deep); white-space: nowrap; z-index: 2; transition: opacity .35s ease; } /* 非激活图片的隐藏由 .scn-img 默认 translateX(100%) + opacity:0 接管，离场状态由 .is-leaving-left / .is-leaving-right 控制，此处不再用 flex/opacity 强制覆盖（会干扰滑动动画） */ .scn-stage.has-active .scn-img.is-active .scn-img-label { opacity: 0; /* 展开后隐藏小标签，避免与右侧文案重复 */ } /* 右侧：文案区域 */ .scn-copies { position: relative; overflow: hidden; background: white; min-width: 0; } .scn-copy-default, .scn-copy { position: absolute; inset: 0; padding: 56px 56px 48px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .4s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); } .scn-stage:not(.has-active) .scn-copy-default { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: .15s; } .scn-stage.has-active .scn-copy.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: .18s; } /* 文案级联出现：编号 → 标题 → 描述 → 列表项一个接一个滑入 */ .scn-stage.has-active .scn-copy.is-active .scn-num, .scn-stage.has-active .scn-copy.is-active h3, .scn-stage.has-active .scn-copy.is-active > p, .scn-stage.has-active .scn-copy.is-active .scn-list li { animation: scnCopyIn .55s cubic-bezier(.32, 1.35, .42, 1) both; } .scn-stage.has-active .scn-copy.is-active .scn-num { animation-delay: .22s; } .scn-stage.has-active .scn-copy.is-active h3 { animation-delay: .30s; } .scn-stage.has-active .scn-copy.is-active > p { animation-delay: .40s; } .scn-stage.has-active .scn-copy.is-active .scn-list li:nth-child(1) { animation-delay: .50s; } .scn-stage.has-active .scn-copy.is-active .scn-list li:nth-child(2) { animation-delay: .58s; } .scn-stage.has-active .scn-copy.is-active .scn-list li:nth-child(3) { animation-delay: .66s; } @keyframes scnCopyIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .scn-copies .scn-num { font-size: 13px; color: var(--text-3); letter-spacing: 3px; font-weight: 600; margin-bottom: 18px; display: block; text-transform: uppercase; } .scn-copies h3 { font-size: clamp(26px, 2.4vw, 34px); color: var(--text-0); font-weight: 800; line-height: 1.22; letter-spacing: -0.8px; margin-bottom: 18px; } .scn-copies p { color: var(--text-2); font-size: 15px; line-height: 1.85; margin-bottom: 22px; } .scn-copies .scn-list { list-style: none; margin-top: 6px; } .scn-copies .scn-list li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--border-soft); color: var(--text-1); font-size: 14.5px; position: relative; font-weight: 500; } .scn-copies .scn-list li:last-child { border-bottom: none; } .scn-copies .scn-list li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--grad-1); } .scn-hint { margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--primary-deep); font-weight: 600; } /* ============ 合作伙伴 ============ */ .partners { background: var(--surface); } /* ============ 联系我们 ============ */ .contact { background: var(--bg-1); position: relative; overflow: hidden; } .contact-card { position: relative; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; padding: 80px; background: white; border-radius: var(--radius-2xl); box-shadow: 0 40px 100px rgba(236, 72, 153, 0.10); overflow: hidden; } .contact-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: var(--radius-2xl); } .cd-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; } .cd-blob-1 { top: -100px; left: -100px; width: 300px; height: 300px; background: radial-gradient(circle, #fbcfe8, transparent); } .cd-blob-2 { bottom: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, #fed7aa, transparent); } .contact-left, .contact-form { position: relative; z-index: 1; } .contact-left h2 { font-size: clamp(28px, 3.4vw, 44px); color: var(--text-0); font-weight: 800; line-height: 1.15; margin: 20px 0; letter-spacing: -1.5px; } .contact-sub { color: var(--text-2); font-size: 16px; line-height: 1.7; margin-bottom: 40px; } .contact-info { margin-top: 40px; } .info-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-soft); } .info-row:last-child { border-bottom: none; } .info-ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 23px; color: var(--text-0); flex-shrink: 0; } .info-row > div:last-child { display: flex; flex-direction: column; gap: 4px; } .info-label { color: var(--text-3); font-size: 13px; font-weight: 600; } /* 公司信息值：放大加粗、显眼（邮箱/电话见 .info-val-link 更突出） */ .info-val { color: var(--text-0); font-weight: 700; font-size: 18px; letter-spacing: 0.2px; } /* 邮箱/电话可点击链接：最显眼（放大加粗）+ 悬停渐变下划线 */ .info-val-link { font-size: 22px; font-weight: 800; display: inline-block; max-width: 100%; overflow-wrap: anywhere; /* 邮箱够长时换行而非撑破/裁切（窄屏） */ background-image: linear-gradient(90deg, var(--primary), var(--orange)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s cubic-bezier(.2,.8,.2,1), color .25s; } .info-val-link:hover { color: var(--primary-deep); background-size: 100% 1.5px; } /* 窄屏：公司信息适当缩小，避免邮箱/电话撑破或被裁（仍比原来大） */ @media (max-width: 640px) { .info-val { font-size: 17px; } .info-val-link { font-size: 18px; } /* 比原来大；够长的邮箱会优雅换行而非裁切 */ .info-ico { width: 46px; height: 46px; font-size: 20px; } .footer-contact li, .footer-contact a { font-size: 15px; } .footer-contact a { font-size: 16px; } } /* 页脚 ICP 备案号链接 */ .icp-link { color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: 0.3px; transition: color .25s; } .icp-link:hover { color: var(--primary); } .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 16px 20px; background: var(--bg-1); border: 1.5px solid transparent; border-radius: var(--radius-lg); color: var(--text-0); font-size: 14px; font-family: inherit; transition: all .3s; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-3); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.10); } .contact-form textarea { resize: vertical; min-height: 100px; } .form-submit { margin-top: 8px; justify-content: center; width: 100%; } /* ============ 页脚 · 暖色水彩泼墨风 ============ 暖白底 + 右上粉色泼洒 + 左下橙色泼洒 + 中央色彩融合 + 水花飞溅 */ .footer { position: relative; z-index: 2; isolation: isolate; color: var(--text-1); padding: 110px 32px 36px; background: linear-gradient(135deg, #fff8f3 0%, #fff7f0 50%, #fff5ec 100%); overflow: hidden; } /* 主泼洒层：右上粉色巨型泼洒 + 左下橙色巨型泼洒，中间形成融合 */ .footer::before { content: ''; position: absolute; inset: 0; z-index: 0; background: /* 右上：粉红巨型泼洒（覆盖到中心）*/ radial-gradient(ellipse 1600px 1100px at 100% 0%, rgba(236, 72, 153, 0.58) 0%, rgba(236, 72, 153, 0.42) 20%, rgba(244, 63, 94, 0.30) 38%, rgba(244, 63, 94, 0.15) 55%, transparent 75%), /* 左下：橙色巨型泼洒（覆盖到中心）*/ radial-gradient(ellipse 1600px 1100px at 0% 100%, rgba(249, 115, 22, 0.56) 0%, rgba(249, 115, 22, 0.40) 20%, rgba(251, 113, 133, 0.28) 38%, rgba(251, 146, 60, 0.16) 55%, transparent 75%); pointer-events: none; } /* 中央融合层：两团水彩相遇产生的玫瑰-珊瑚色融合，用 multiply 与底层叠加 */ .footer::after { content: ''; position: absolute; inset: 0; z-index: 0; background: /* 中心主融合（玫瑰红）*/ radial-gradient(ellipse 1300px 700px at 50% 50%, rgba(244, 63, 94, 0.35) 0%, rgba(244, 63, 94, 0.18) 30%, transparent 65%), /* 偏右上的融合（粉珊瑚）*/ radial-gradient(ellipse 700px 500px at 65% 35%, rgba(251, 113, 133, 0.32) 0%, transparent 60%), /* 偏左下的融合（暖珊瑚-橙）*/ radial-gradient(ellipse 700px 500px at 35% 65%, rgba(251, 146, 60, 0.32) 0%, transparent 60%); mix-blend-mode: multiply; pointer-events: none; } .footer-inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; } .footer .logo { color: var(--text-0); } .brand-desc { margin-top: 22px; color: var(--text-1); font-size: 16.5px; line-height: 1.85; max-width: 400px; } /* 页脚联系方式 · 可点击邮箱/电话/地址 */ .footer-contact { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; } /* 页脚公司信息：放大加粗、显眼（邮箱/电话链接更突出，见下条 .footer-contact a） */ .footer-contact li, .footer-contact a { display: flex; align-items: center; gap: 12px; color: var(--text-0); font-size: 16px; font-weight: 600; letter-spacing: 0.2px; } .footer-contact a { transition: color .25s ease; font-size: 18px; font-weight: 700; } .footer-contact a:hover { color: var(--primary-deep); } .fc-ico { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.7); color: var(--primary-deep); font-size: 17px; box-shadow: 0 2px 8px rgba(219, 39, 119, 0.12); } /* 页脚 CTA · 预约演示 */ .footer-cta { margin-top: 30px; } /* 删掉「解决方案」一列后从 4 列改 3 列，并整体放大、加大间距，让页脚不空 */ .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; } .footer-cols h4 { color: var(--text-0); font-size: 18px; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 24px; position: relative; padding-bottom: 16px; } .footer-cols h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--grad-1); } .footer-cols a { display: block; color: var(--text-1); font-size: 16.5px; font-weight: 600; padding: 10px 0; transition: color .3s ease, transform .3s ease; position: relative; } .footer-cols a:hover { color: var(--primary-deep); transform: translateX(4px); } /* 二维码区域 · 半透纸质感 */ .qr-placeholder { position: relative; width: 142px; height: 142px; border: 1px dashed rgba(219, 39, 119, 0.40); border-radius: 8px; /* 二维码容器：只要一点点圆角 */ display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 11px; text-align: center; padding: 14px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow: hidden; } .qr-placeholder small { font-size: 10px; color: var(--text-3); display: block; margin-top: 4px; } .qr-fallback { display: block; line-height: 1.5; } /* 真实二维码图覆盖在占位之上；onerror 隐藏时占位回填 */ .qr-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 7px; /* 跟容器一致的小圆角 */ z-index: 1; background: #fff; } /* 关注我们列 · 双二维码并排 */ .footer-qr-col { min-width: 290px; } .qr-pair { display: flex; gap: 22px; flex-wrap: wrap; } .qr-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .qr-caption { font-size: 14.5px; font-weight: 600; color: var(--text-0); letter-spacing: 0.5px; } /* 底部版权 · 渐变分割线 */ .footer-bottom { position: relative; z-index: 1; max-width: 1320px; margin: 70px auto 0; padding-top: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-2); } .footer-bottom-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } /* 返回顶部按钮 */ .back-to-top { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1.5px solid rgba(219, 39, 119, 0.35); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.55); color: var(--primary-deep); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .25s ease; } .back-to-top:hover { background: var(--primary-deep); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(219, 39, 119, 0.28); } .footer-bottom::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.45) 30%, rgba(249, 115, 22, 0.45) 70%, transparent); } /* ============ 图片占位编号徽章 ============ */ .img-num-badge { position: absolute; top: 14px; right: 14px; z-index: 10; padding: 5px 12px; background: rgba(255, 255, 255, 0.97); border: 1.5px solid var(--primary); color: var(--primary-deep); border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: 0.8px; font-family: 'SF Mono', 'Courier New', monospace; box-shadow: 0 4px 14px rgba(236, 72, 153, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.4); pointer-events: none; white-space: nowrap; } /* ============ 响应式 ============ */ @media (max-width: 1024px) { .nav-links { display: none; } .hero-inner { grid-template-columns: 1fr; gap: 60px; } /* .hero-visual 宽高由 JS 在 applyVideoSize() 里按窗口宽度算出 */ .cap-grid { grid-template-columns: repeat(2, 1fr); } .showcase-grid { grid-template-columns: repeat(2, 1fr); } .show-card.big, .show-card.wide { grid-column: span 2; } .scn-stage { height: auto; grid-template-columns: 1fr; } .scn-stage.has-active { grid-template-columns: 1fr; } .scn-images { height: 320px; } /* .scn-img-photo 始终 inset: 0 / 100% × 100% —— 框已贴合图片比例，不需要 inset 留白 */ .scn-copies { min-height: 320px; } .scn-copy-default, .scn-copy { padding: 40px 32px; position: relative; opacity: 1; transform: none; pointer-events: auto; } .scn-copy { display: none; } .scn-stage.has-active .scn-copy.is-active { display: flex; } .scn-stage.has-active .scn-copy-default { display: none; } .scn-nav { width: 42px; height: 42px; } .scn-nav svg { width: 18px; height: 18px; } .scn-nav-prev { left: 8px; } .scn-nav-next { right: 8px; } .partner-grid { grid-template-columns: repeat(2, 1fr); } .logo-wall { grid-template-columns: repeat(4, 1fr); } .contact-card { grid-template-columns: 1fr; padding: 50px; gap: 50px; } .footer-inner { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, 1fr); } .roles { padding: 100px 24px; } .roles-track { --role-card-height: 700px; --role-card-hover-height: 760px; gap: 10px; } .role-card { min-width: 150px; border-radius: 26px; } .role-content { padding: 28px 22px 26px; } } @media (min-width: 769px) { .hero-title, .section-head h2, .roles-title, .contact-left h2, .subpage-title, .intro-text h2, .case-cta-inner h2, .scn-copy-default h3 { white-space: nowrap; } } @media (max-width: 768px) { .roles { padding: 80px 20px; } .roles-track { flex-direction: column; height: auto; gap: 16px; align-items: stretch; } .role-card { flex-grow: 1 !important; flex-basis: auto; height: auto !important; min-width: 0; min-height: 380px; opacity: 1 !important; filter: none !important; border-radius: 28px; box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.12), 0 12px 40px rgba(236, 72, 153, 0.15) !important; } .role-bg { min-height: 460px; } .roles-track { --role-machine-height: 400px; } .role-photo { left: 50%; bottom: 0; width: auto; object-position: center bottom; } .role-desc { white-space: normal; } .role-card .role-extra { max-height: none !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .role-card .role-glow { opacity: 1 !important; } .role-bg { transform: none; } } @media (max-width: 640px) { section.capabilities, section.showcase, section.scenarios, section.partners, section.logos, section.contact { padding: 80px 20px; } .hero { padding: 110px 20px 70px; } .navbar { top: 12px; width: calc(100% - 24px); } .nav-inner { padding: 10px 14px 10px 16px; } .nav-actions .nav-link-secondary { display: none; } /* .hero-visual 宽高由 JS 在 applyVideoSize() 里按窗口宽度算出 */ .cap-grid, .showcase-grid { grid-template-columns: 1fr; } .show-card.big, .show-card.wide { grid-column: span 1; } .partner-grid { grid-template-columns: repeat(2, 1fr); } .contact-card { padding: 36px 24px; } .form-row { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .img-num-badge { top: 10px; right: 10px; padding: 4px 10px; font-size: 10px; } } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .role-card, .role-card .role-bg, .role-card .role-photo, .role-card .role-extra, .role-card .role-glow, .role-cta, .role-cta-arrow { transition: none !important; animation: none !important; } .role-card .role-photo { transform: translateX(-50%); } .role-card .role-extra { max-height: none; opacity: 1; transform: none; pointer-events: auto; } .role-card .role-glow { opacity: 0.6; } } /* ============ 联系我们 · 模式切换标签 ============ */ /* 联系我们：只保留「快速留言」，移除「详细咨询」（隐藏切换栏 + 详细表单；不动 DOM 结构，保编辑器 data-ed-id 稳定） */ .contact-tabs { display: none; } #form-detailed { display: none !important; } .contact-tab { flex: 1; padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.25s; text-align: center; } .contact-tab:hover { border-color: var(--primary); color: var(--primary); background: #fef3f0; } .contact-tab.active { background: var(--grad-1); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(236, 72, 153, 0.28); } /* 双表单切换 */ .contact-form { display: none; } .contact-form.active { display: flex; flex-direction: column; gap: 20px; } .contact-form-wrap { flex: 1; min-width: 0; } /* 快速留言提示 */ .quick-hint { font-size: 13px; color: var(--text-3); margin-bottom: 0; line-height: 1.5; } /* 快速留言分段选择器 */ .quick-field-group { display: flex; flex-direction: column; gap: 8px; } .quick-seg { display: flex; gap: 6px; } .quick-seg-btn { padding: 5px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; } .quick-seg-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--surface-soft); } .quick-seg-btn.active { background: var(--text-0); color: white; border-color: transparent; } /* ============ Toast 浮动通知 ============ */ .contact-toast { position: fixed; top: 100px; right: 24px; z-index: 200; max-width: 400px; padding: 16px 20px; border-radius: var(--radius-lg); font-size: 14px; line-height: 1.5; box-shadow: var(--shadow-lg); opacity: 0; transform: translateX(20px); pointer-events: none; transition: opacity 0.3s, transform 0.3s; } .contact-toast.show { opacity: 1; transform: translateX(0); pointer-events: auto; } .contact-toast.success { background: linear-gradient(135deg, #ec4899, #f97316); color: #fff; } .contact-toast.error { background: #fff; color: var(--text-1); border: 1px solid #fecdd3; } @media (max-width: 640px) { .contact-toast { top: auto; bottom: 24px; left: 20px; right: 20px; max-width: none; transform: translateY(20px); } .contact-toast.show { transform: translateY(0); } } /* ============ Honeypot 隐藏字段 ============ */ .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; tab-index: -1; } /* ============ 技术生态卡片 ============ */ .partner-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .partner-cell { position: relative; text-align: left; padding: 34px 28px 30px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border-soft); overflow: hidden; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .45s; } .partner-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-1); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16,1,.3,1); } .partner-cell:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 60px rgba(236,72,153,0.16); } .partner-cell:hover::before { transform: scaleX(1); } .partner-ico { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: transform .45s cubic-bezier(.16,1,.3,1); } .partner-cell:hover .partner-ico { transform: scale(1.08) rotate(-3deg); } .partner-ico svg { width: 27px; height: 27px; } .partner-cell h3 { font-size: 18px; font-weight: 700; color: var(--text-0); margin: 0 0 10px; letter-spacing: -0.3px; } .partner-cell p { font-size: 14px; line-height: 1.7; color: var(--text-2); margin: 0; } /* ============ 合作伙伴 · Logo 墙 ============ */ .logos { background: var(--bg-1); } .logo-wall { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .logo-cell { position: relative; aspect-ratio: 5 / 2; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .45s; } .logo-cell:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow-md); } .pw-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px 22px; filter: grayscale(1); opacity: 0.72; transition: filter .4s, opacity .4s; } .logo-cell:hover .pw-logo { filter: grayscale(0); opacity: 1; } .logo-ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; font-weight: 500; letter-spacing: .3px; } .logo-ph .img-num-badge { position: static; } @media (max-width: 1024px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } .logo-wall { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } } /* ============ case tag colors for new categories ============ */ .case-tag.tag-airport { background: linear-gradient(135deg, #ec4899, #db2777); color: #fff; } .case-tag.tag-park { background: linear-gradient(135deg, #10b981, #059669); color: #fff; } .case-tag.tag-gov { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; } .case-tag.tag-expo { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; } .case-tag.tag-hall { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; } /* ============================ 占位符清除（2026-06-30） ============================ 用 CSS 隐藏所有开发期占位元素，而非从 HTML 删除 DOM —— 因为三页都有「已发布 overrides」，它们按 editor-runtime.js 的 stamp 顺序用 data-ed-id（e0,e1,…）定位元素；删元素会让后续元素的自动编号整体前移、把用户已发布的编辑套到错的元素上（开发日志坑 #6/#45）。隐藏=零位移、零 override 破坏，访客侧彻底看不到占位；编辑器画布同样不显示（图层树仍可见，属可接受取舍）。 */ .img-num-badge { display: none !important; } /* 所有「#NN」图片编号徽章（三页共 28 处） */ .hero-meta { display: none; } /* 首页 hero 客户头像占位圆圈 #02–#05 + 旁边文案（用户要求整块去掉，圆圈已挪进编辑器「添加/收藏」面板） */ .img-ph .ph-circle { display: none; } /* 「这里添加图片 / XXX · 800×600」占位文字；无图卡片只剩 .img-ph 干净品牌渐变 */