/* ============================================================ AI 现代风主题层（首页专用，深色 / 清爽浅色 两套） - 只作用于首页：
- 顶部导航 / 页脚通过 body:has(...) 与首页风格联动 - 主题由后台「网站主题」决定： - :root = 清爽浅色（与站点默认值一致）；html[data-theme="dark"] 覆盖为深色 - 在 style.css / components.css 之后加载 - 断点：1280 / 1080 / 992 / 860 / 768 / 640 / 480 ============================================================ */ /* ============================================================ 0. 主题变量 ============================================================ */ :root { /* 基底 */ --ai-bg: #f5f8fd; --ai-bg-alt: #ffffff; --ai-hero-bg: linear-gradient(180deg, #ffffff 0%, #f1f6ff 52%, #f5f8fd 100%); --ai-footer-bg: #ffffff; --ai-footer-text: #5b6b85; --ai-heading: #0b1220; --ai-text: #17233b; --ai-muted: #5b6b85; --ai-dim: #8595ae; /* 线条与卡片 */ --ai-line: rgba(15, 35, 80, 0.09); --ai-line-strong: rgba(15, 35, 80, 0.16); --ai-card-bg: #ffffff; --ai-card-bg-hover: #ffffff; --ai-card-border: rgba(15, 35, 80, 0.09); --ai-card-border-hover: rgba(43, 94, 233, 0.35); --ai-card-shadow: 0 1px 2px rgba(16, 35, 80, 0.04), 0 12px 32px rgba(16, 35, 80, 0.07); /* 品牌与强调色 */ --ai-brand: #2b5ee9; --ai-accent: #0ea5b7; --ai-violet: #7c3aed; --ai-grad: linear-gradient(120deg, #2b5ee9 0%, #4f7df0 45%, #7c3aed 100%); --ai-grad-soft: linear-gradient(120deg, rgba(43, 94, 233, 0.08), rgba(124, 58, 237, 0.08)); --ai-eyebrow: #1d4ed8; --ai-glow-1: rgba(43, 94, 233, 0.16); --ai-glow-2: rgba(124, 58, 237, 0.12); --ai-glow-3: rgba(14, 165, 183, 0.1); --ai-grid-line: rgba(15, 35, 80, 0.055); /* 标签 / 按钮 */ --ai-chip-bg: rgba(255, 255, 255, 0.86); --ai-chip-border: rgba(15, 35, 80, 0.12); --ai-chip-text: #45536b; --ai-ghost-bg: #ffffff; --ai-ghost-border: rgba(15, 35, 80, 0.16); --ai-ghost-text: #17233b; --ai-icon-tile-bg: linear-gradient(140deg, rgba(43, 94, 233, 0.12), rgba(14, 165, 183, 0.1)); --ai-icon-tile-border: rgba(43, 94, 233, 0.18); --ai-icon-tile-color: #1d4ed8; /* 控制台（Hero 右侧） */ --ai-console-bg: linear-gradient(160deg, #ffffff 0%, #f4f8ff 100%); --ai-console-border: rgba(15, 35, 80, 0.1); --ai-console-shadow: 0 30px 70px rgba(21, 45, 105, 0.16); --ai-tile-bg: rgba(43, 94, 233, 0.05); --ai-tile-border: rgba(15, 35, 80, 0.06); --ai-bar-from: rgba(43, 94, 233, 0.95); --ai-bar-to: rgba(34, 211, 238, 0.35); --ai-agent-bg: linear-gradient(120deg, rgba(43, 94, 233, 0.08), rgba(124, 58, 237, 0.1)); --ai-agent-border: rgba(124, 58, 237, 0.22); --ai-agent-icon-bg: rgba(124, 58, 237, 0.12); --ai-agent-icon-color: #6d28d9; --ai-float-bg: rgba(255, 255, 255, 0.96); --ai-float-border: rgba(15, 35, 80, 0.1); --ai-float-shadow: 0 18px 40px rgba(21, 45, 105, 0.16); --ai-dot-off: rgba(15, 35, 80, 0.16); --ai-live-bg: rgba(14, 165, 183, 0.12); --ai-live-text: #0e7490; /* 客户墙 / 资讯封面 */ --ai-logo-tile-bg: #ffffff; --ai-logo-tile-bg-hover: #ffffff; --ai-logo-tile-border: rgba(15, 35, 80, 0.08); --ai-logo-tile-shadow: 0 10px 26px rgba(21, 45, 105, 0.12); --ai-logo-text: #334155; --ai-thumb-chip-bg: rgba(255, 255, 255, 0.92); --ai-thumb-chip-text: #17233b; --ai-thumb-chip-border: rgba(15, 35, 80, 0.08); /* 尺寸 */ --ai-radius-sm: 12px; --ai-radius: 20px; --ai-radius-lg: 28px; --ai-shadow: 0 18px 50px rgba(21, 45, 105, 0.12); --ai-shadow-glow: 0 24px 70px rgba(43, 94, 233, 0.22); } html[data-theme="dark"] { --ai-bg: #060c1c; --ai-bg-alt: #0a1428; --ai-hero-bg: linear-gradient(180deg, #070e20 0%, #060c1c 100%); --ai-footer-bg: #04091a; --ai-footer-text: #9fb0cd; --ai-heading: #ffffff; --ai-text: #eaf1ff; --ai-muted: #9fb0cd; --ai-dim: #6d7f9e; --ai-line: rgba(255, 255, 255, 0.08); --ai-line-strong: rgba(255, 255, 255, 0.16); --ai-card-bg: rgba(255, 255, 255, 0.035); --ai-card-bg-hover: rgba(255, 255, 255, 0.055); --ai-card-border: rgba(255, 255, 255, 0.08); --ai-card-border-hover: rgba(110, 168, 254, 0.45); --ai-card-shadow: 0 18px 50px rgba(2, 6, 20, 0.55); --ai-accent: #22d3ee; --ai-grad: linear-gradient(120deg, #6ea8fe 0%, #22d3ee 45%, #a78bfa 100%); --ai-grad-soft: linear-gradient(120deg, rgba(110, 168, 254, 0.18), rgba(124, 58, 237, 0.16)); --ai-eyebrow: #22d3ee; --ai-glow-1: rgba(43, 94, 233, 0.75); --ai-glow-2: rgba(124, 58, 237, 0.6); --ai-glow-3: rgba(34, 211, 238, 0.4); --ai-grid-line: rgba(255, 255, 255, 0.045); --ai-chip-bg: rgba(255, 255, 255, 0.05); --ai-chip-border: rgba(255, 255, 255, 0.16); --ai-chip-text: #9fb0cd; --ai-ghost-bg: rgba(255, 255, 255, 0.04); --ai-ghost-border: rgba(255, 255, 255, 0.16); --ai-ghost-text: #eaf1ff; --ai-icon-tile-bg: linear-gradient(140deg, rgba(43, 94, 233, 0.35), rgba(34, 211, 238, 0.18)); --ai-icon-tile-border: rgba(110, 168, 254, 0.28); --ai-icon-tile-color: #67e8f9; --ai-console-bg: linear-gradient(160deg, rgba(18, 30, 58, 0.92), rgba(8, 14, 30, 0.9)); --ai-console-border: rgba(255, 255, 255, 0.16); --ai-console-shadow: 0 30px 70px rgba(2, 6, 20, 0.5); --ai-tile-bg: rgba(255, 255, 255, 0.04); --ai-tile-border: rgba(255, 255, 255, 0.08); --ai-bar-from: rgba(110, 168, 254, 0.95); --ai-bar-to: rgba(34, 211, 238, 0.25); --ai-agent-bg: linear-gradient(120deg, rgba(110, 168, 254, 0.18), rgba(124, 58, 237, 0.16)); --ai-agent-border: rgba(124, 58, 237, 0.35); --ai-agent-icon-bg: rgba(255, 255, 255, 0.1); --ai-agent-icon-color: #e9d5ff; --ai-float-bg: rgba(10, 18, 38, 0.92); --ai-float-border: rgba(255, 255, 255, 0.16); --ai-float-shadow: 0 18px 40px rgba(2, 6, 20, 0.5); --ai-dot-off: rgba(255, 255, 255, 0.16); --ai-live-bg: rgba(34, 211, 238, 0.12); --ai-live-text: #22d3ee; --ai-logo-tile-bg: #f2f6fd; --ai-logo-tile-bg-hover: #ffffff; --ai-logo-tile-border: rgba(255, 255, 255, 0.06); --ai-logo-tile-shadow: 0 16px 34px rgba(3, 8, 24, 0.45); --ai-logo-text: #334155; --ai-thumb-chip-bg: rgba(6, 12, 28, 0.72); --ai-thumb-chip-text: #ffffff; --ai-thumb-chip-border: rgba(255, 255, 255, 0.18); --ai-shadow: 0 18px 50px rgba(2, 6, 20, 0.55); --ai-shadow-glow: 0 24px 70px rgba(43, 94, 233, 0.28); } /* ============================================================ 1. 首页底色 & 顶栏 / 页脚联动 ============================================================ */ body:has(main.page-home-ai) { background: var(--ai-bg); background-image: none; } body:has(main.page-home-ai) .site-header { background: color-mix(in srgb, var(--ai-bg) 82%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--ai-line); } body:has(main.page-home-ai) .logo, body:has(main.page-home-ai) .logo:hover { color: var(--ai-heading); } body:has(main.page-home-ai) .logo__mark { background: linear-gradient(135deg, var(--ai-brand), #4f8ef7); box-shadow: 0 8px 22px rgba(43, 94, 233, 0.32); } body:has(main.page-home-ai) .main-nav ul li a { color: var(--ai-chip-text); font-weight: 500; } body:has(main.page-home-ai) .main-nav ul li a:hover, body:has(main.page-home-ai) .main-nav ul li a.is-active { color: var(--ai-heading); } body:has(main.page-home-ai) .header-search input, body:has(main.page-home-ai) .lang-switch { background: var(--ai-card-bg); border: 1px solid var(--ai-line); color: var(--ai-text); } body:has(main.page-home-ai) .lang-switch .active { color: var(--ai-heading); } body:has(main.page-home-ai) .site-footer { background: var(--ai-footer-bg); border-top: 1px solid var(--ai-line); color: var(--ai-footer-text); } body:has(main.page-home-ai) .site-footer h4 { color: var(--ai-heading); } body:has(main.page-home-ai) .site-footer a { color: var(--ai-footer-text); } body:has(main.page-home-ai) .site-footer a:hover { color: var(--ai-heading); } /* ============================================================ 2. 通用组件：按钮 / 标签 / 区块标题 / 卡片 ============================================================ */ .page-home-ai .ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 28px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease; } .page-home-ai .ai-btn--primary { background: linear-gradient(135deg, var(--ai-brand), #3b82f6); color: #fff; box-shadow: 0 12px 30px rgba(43, 94, 233, 0.32); } .page-home-ai .ai-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(43, 94, 233, 0.44); } .page-home-ai .ai-btn--ghost { background: var(--ai-ghost-bg); border-color: var(--ai-ghost-border); color: var(--ai-ghost-text); } .page-home-ai .ai-btn--ghost:hover { color: var(--ai-heading); border-color: rgba(43, 94, 233, 0.5); background: rgba(43, 94, 233, 0.08); transform: translateY(-2px); } .page-home-ai .ai-btn--white { background: #fff; color: #0b1220; } .page-home-ai .ai-btn--white:hover { color: #0b1220; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(3, 8, 24, 0.4); } .page-home-ai .ai-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px; background: var(--ai-chip-bg); border: 1px solid var(--ai-chip-border); color: var(--ai-chip-text); font-size: 13px; line-height: 1.2; backdrop-filter: blur(6px); } .page-home-ai .ai-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ai-accent) 18%, transparent); animation: ai-pulse 2.4s ease-in-out infinite; } .page-home-ai .ai-grad { background: var(--ai-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-home-ai .ai-section { position: relative; padding: 104px 0; background: var(--ai-bg); } .page-home-ai .ai-section--alt { background: var(--ai-bg-alt); border-top: 1px solid var(--ai-line); border-bottom: 1px solid var(--ai-line); } .page-home-ai .ai-section__head { max-width: 760px; margin: 0 auto 56px; text-align: center; } .page-home-ai .ai-eyebrow { display: inline-block; margin-bottom: 16px; color: var(--ai-eyebrow); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .page-home-ai .ai-section__head h2, .page-home-ai .ai-about__body h2 { color: var(--ai-heading); } .page-home-ai .ai-section__head h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.24; letter-spacing: -0.01em; } .page-home-ai .ai-section__head p { margin-top: 16px; color: var(--ai-muted); font-size: 16px; line-height: 1.8; } .page-home-ai .ai-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px; border-radius: var(--ai-radius); background: var(--ai-card-bg); border: 1px solid var(--ai-card-border); box-shadow: var(--ai-card-shadow); overflow: hidden; transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease; } .page-home-ai .ai-card::after { content: ""; position: absolute; inset: -1px -1px auto; height: 2px; background: var(--ai-grad); opacity: 0; transition: opacity 0.28s ease; } .page-home-ai .ai-card:hover { transform: translateY(-6px); background: var(--ai-card-bg-hover); border-color: var(--ai-card-border-hover); box-shadow: var(--ai-shadow); } .page-home-ai .ai-card:hover::after { opacity: 1; } .page-home-ai a.ai-card { color: inherit; } .page-home-ai .ai-card__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px; background: var(--ai-icon-tile-bg); border: 1px solid var(--ai-icon-tile-border); color: var(--ai-icon-tile-color); font-size: 24px; line-height: 1; } .page-home-ai .ai-card__icon svg { width: 24px; height: 24px; } .page-home-ai .ai-card__banner { width: 100%; height: 152px; padding: 0; overflow: hidden; background: linear-gradient(135deg, rgba(43, 94, 233, 0.45), rgba(124, 58, 237, 0.4)); } .page-home-ai .ai-card__banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .page-home-ai .ai-card:hover .ai-card__banner img { transform: scale(1.05); } .page-home-ai .ai-card h3 { color: var(--ai-heading); font-size: 18px; line-height: 1.5; } .page-home-ai .ai-card p { margin-top: 10px; color: var(--ai-muted); font-size: 14px; line-height: 1.75; } .page-home-ai .ai-card__more { margin-top: auto; padding-top: 20px; color: var(--ai-eyebrow); font-size: 14px; font-weight: 600; } /* ============================================================ 3. Hero ============================================================ */ .page-home-ai .ai-hero { position: relative; padding: 92px 0 132px; background: var(--ai-hero-bg); overflow: hidden; isolation: isolate; } .page-home-ai .ai-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .page-home-ai .ai-hero__grid { position: absolute; inset: -20% -10% auto; height: 140%; background-image: linear-gradient(var(--ai-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ai-grid-line) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(70% 60% at 50% 18%, #000 25%, transparent 78%); -webkit-mask-image: radial-gradient(70% 60% at 50% 18%, #000 25%, transparent 78%); } .page-home-ai .ai-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.75; } .page-home-ai .ai-orb--1 { width: 520px; height: 520px; top: -180px; left: -120px; background: radial-gradient(circle at 40% 40%, var(--ai-glow-1), transparent 68%); } .page-home-ai .ai-orb--2 { width: 460px; height: 460px; top: -80px; right: -100px; background: radial-gradient(circle at 50% 50%, var(--ai-glow-2), transparent 66%); } .page-home-ai .ai-orb--3 { width: 420px; height: 420px; bottom: -220px; left: 38%; background: radial-gradient(circle at 50% 50%, var(--ai-glow-3), transparent 68%); } .page-home-ai .ai-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 64px; } .page-home-ai .ai-hero__title { margin: 26px 0 0; font-size: clamp(36px, 4.4vw, 62px); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; color: var(--ai-heading); } .page-home-ai .ai-hero__title span { display: block; } .page-home-ai .ai-hero__sub { max-width: 560px; margin-top: 24px; color: var(--ai-muted); font-size: 17px; line-height: 1.9; } .page-home-ai .ai-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .page-home-ai .ai-hero__trust { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--ai-line); } .page-home-ai .ai-hero__trust li { display: flex; flex-direction: column; gap: 4px; } .page-home-ai .ai-hero__trust strong { font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--ai-heading); } .page-home-ai .ai-hero__trust span { color: var(--ai-dim); font-size: 13px; } /* ---------- AI 控制台（Hero 右侧） ---------- */ .page-home-ai .ai-hero__visual { position: relative; } .page-home-ai .ai-console { position: relative; padding: 22px; border-radius: var(--ai-radius-lg); background: var(--ai-console-bg); border: 1px solid var(--ai-console-border); box-shadow: var(--ai-console-shadow); } .page-home-ai .ai-console__bar { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--ai-line); } .page-home-ai .ai-dots { display: inline-flex; gap: 6px; } .page-home-ai .ai-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ai-dot-off); } .page-home-ai .ai-dots i:first-child { background: #ff5f57; } .page-home-ai .ai-dots i:nth-child(2) { background: #febc2e; } .page-home-ai .ai-dots i:last-child { background: #28c840; } .page-home-ai .ai-console__title { color: var(--ai-heading); font-size: 14px; font-weight: 600; } .page-home-ai .ai-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 12px; border-radius: 999px; background: var(--ai-live-bg); color: var(--ai-live-text); font-size: 12px; } .page-home-ai .ai-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .page-home-ai .ai-console__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .page-home-ai .ai-kpi { padding: 16px; border-radius: 16px; background: var(--ai-tile-bg); border: 1px solid var(--ai-tile-border); } .page-home-ai .ai-kpi__label { display: block; color: var(--ai-dim); font-size: 12px; } .page-home-ai .ai-kpi strong { display: block; margin-top: 8px; font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 22px; font-weight: 700; color: var(--ai-heading); } .page-home-ai .ai-trend { display: inline-block; margin-top: 8px; color: #16a34a; font-size: 11px; font-style: normal; } .page-home-ai .ai-console__chart { margin-top: 16px; padding: 18px; border-radius: 16px; background: var(--ai-tile-bg); border: 1px solid var(--ai-tile-border); } .page-home-ai .ai-chart__head { display: flex; align-items: center; justify-content: space-between; color: var(--ai-muted); font-size: 12px; } .page-home-ai .ai-chart__head span:last-child { color: var(--ai-live-text); } .page-home-ai .ai-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 16px; } .page-home-ai .ai-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--ai-bar-from), var(--ai-bar-to)); } .page-home-ai .ai-console__agent { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--ai-agent-bg); border: 1px solid var(--ai-agent-border); } .page-home-ai .ai-agent__icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; background: var(--ai-agent-icon-bg); color: var(--ai-agent-icon-color); font-size: 14px; } .page-home-ai .ai-console__agent strong { display: block; color: var(--ai-heading); font-size: 13px; font-weight: 600; } .page-home-ai .ai-console__agent span { display: block; margin-top: 4px; color: var(--ai-muted); font-size: 12px; } .page-home-ai .ai-float { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border-radius: 16px; background: var(--ai-float-bg); border: 1px solid var(--ai-float-border); box-shadow: var(--ai-float-shadow); color: var(--ai-muted); font-size: 12px; } .page-home-ai .ai-float strong { font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 20px; font-weight: 700; color: var(--ai-heading); } .page-home-ai .ai-float--1 { top: -52px; left: -40px; animation: ai-float 6s ease-in-out infinite; } .page-home-ai .ai-float--2 { right: -18px; bottom: -30px; animation: ai-float 7s ease-in-out infinite reverse; } /* ============================================================ 4. 网格 ============================================================ */ .page-home-ai .ai-grid { display: grid; gap: 22px; } .page-home-ai .ai-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-home-ai .ai-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .page-home-ai .ai-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-home-ai .ai-card--capability p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ 5. 关于智领 ============================================================ */ .page-home-ai .ai-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 72px; } .page-home-ai .ai-about__media { position: relative; padding: 26px; border-radius: var(--ai-radius-lg); background: linear-gradient(150deg, rgba(43, 94, 233, 0.16), rgba(124, 58, 237, 0.12)); border: 1px solid var(--ai-line-strong); box-shadow: var(--ai-shadow); } .page-home-ai .ai-about__media img { width: 100%; border-radius: var(--ai-radius-sm); } .page-home-ai .ai-about__badge { position: absolute; right: -18px; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 22px; border-radius: 18px; background: linear-gradient(140deg, var(--ai-brand), var(--ai-violet)); box-shadow: var(--ai-shadow-glow); } .page-home-ai .ai-about__badge strong { font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 26px; font-weight: 700; color: #fff; } .page-home-ai .ai-about__badge span { color: rgba(255, 255, 255, 0.88); font-size: 12px; } .page-home-ai .ai-about__body h2 { margin-top: 14px; font-size: clamp(28px, 3vw, 38px); line-height: 1.28; } .page-home-ai .ai-about__body > p { margin-top: 20px; color: var(--ai-muted); font-size: 16px; line-height: 1.9; } .page-home-ai .ai-checks { margin-top: 28px; display: grid; gap: 16px; } .page-home-ai .ai-checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--ai-text); font-size: 15px; line-height: 1.7; } .page-home-ai .ai-checks .ai-check { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; margin-top: 3px; border-radius: 50%; background: color-mix(in srgb, var(--ai-accent) 16%, transparent); color: var(--ai-eyebrow); font-size: 12px; } .page-home-ai .ai-about__actions { margin-top: 34px; } /* ============================================================ 6. 合作流程 ============================================================ */ .page-home-ai .ai-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .page-home-ai .ai-steps::before { content: ""; position: absolute; top: 47px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(43, 94, 233, 0.4), transparent); z-index: 0; } .page-home-ai .ai-step { position: relative; z-index: 1; padding: 28px; border-radius: var(--ai-radius); background: var(--ai-bg-alt); border: 1px solid var(--ai-card-border); box-shadow: var(--ai-card-shadow); transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } .page-home-ai .ai-step:hover { transform: translateY(-6px); border-color: var(--ai-card-border-hover); box-shadow: var(--ai-shadow); } .page-home-ai .ai-step__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 20px; border-radius: 12px; background: linear-gradient(140deg, var(--ai-brand), #38bdf8); font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 700; color: #fff; } .page-home-ai .ai-step h3 { color: var(--ai-heading); font-size: 17px; line-height: 1.5; } .page-home-ai .ai-step p { margin-top: 10px; color: var(--ai-muted); font-size: 14px; line-height: 1.75; } /* ============================================================ 7. 资讯 ============================================================ */ .page-home-ai .ai-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .page-home-ai .ai-news-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--ai-radius); background: var(--ai-card-bg); border: 1px solid var(--ai-card-border); box-shadow: var(--ai-card-shadow); overflow: hidden; transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } .page-home-ai .ai-news-card:hover { transform: translateY(-6px); border-color: var(--ai-card-border-hover); box-shadow: var(--ai-shadow); } .page-home-ai .ai-news-card__thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(43, 94, 233, 0.5), rgba(124, 58, 237, 0.45)); overflow: hidden; } .page-home-ai .ai-news-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .page-home-ai .ai-news-card:hover .ai-news-card__thumb img { transform: scale(1.05); } .page-home-ai .ai-news-card__cat { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 999px; background: var(--ai-thumb-chip-bg); border: 1px solid var(--ai-thumb-chip-border); color: var(--ai-thumb-chip-text); font-size: 12px; backdrop-filter: blur(8px); } .page-home-ai .ai-news-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; } .page-home-ai .ai-news-card__meta { display: flex; gap: 10px; color: var(--ai-dim); font-size: 12px; } .page-home-ai .ai-news-card__body h3 { margin-top: 12px; font-size: 18px; line-height: 1.5; } .page-home-ai .ai-news-card__body h3 a { color: var(--ai-heading); } .page-home-ai .ai-news-card__body h3 a:hover { color: var(--ai-eyebrow); } .page-home-ai .ai-news-card__body p { margin-top: 10px; color: var(--ai-muted); font-size: 14px; line-height: 1.75; } .page-home-ai .ai-news-card__more { margin-top: auto; padding-top: 20px; color: var(--ai-eyebrow); font-size: 14px; font-weight: 600; } .page-home-ai .ai-section__foot { margin-top: 44px; text-align: center; } /* ============================================================ 8. 合作客户 ============================================================ */ .page-home-ai .ai-customers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 196px)); justify-content: center; gap: 18px; } .page-home-ai .ai-customer { display: flex; align-items: center; justify-content: center; height: 88px; padding: 14px; border-radius: 16px; background: var(--ai-logo-tile-bg); border: 1px solid var(--ai-logo-tile-border); transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .page-home-ai .ai-customer:hover { transform: translateY(-4px); background: var(--ai-logo-tile-bg-hover); box-shadow: var(--ai-logo-tile-shadow); } .page-home-ai .ai-customer img { max-width: 100%; max-height: 52px; object-fit: contain; } .page-home-ai .ai-customer span { color: var(--ai-logo-text); font-size: 15px; font-weight: 600; text-align: center; } /* ============================================================ 9. CTA ============================================================ */ /* ---------- 资质与专利：首页信任背书条 ---------- */ .page-home-ai .ai-trust { padding: 72px 0; } .page-home-ai .ai-trust__head { margin-bottom: 32px; text-align: center; } .page-home-ai .ai-trust__head h2 { margin-top: 10px; color: var(--ai-heading); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; } .page-home-ai .ai-trust__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .page-home-ai .ai-trust__item { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 999px; border: 1px solid var(--ai-card-border); background: var(--ai-card-bg); box-shadow: var(--ai-card-shadow); transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease; } .page-home-ai .ai-trust__item:hover { transform: translateY(-3px); border-color: var(--ai-card-border-hover); box-shadow: var(--ai-shadow); } .page-home-ai .ai-trust__logo { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; overflow: hidden; background: #fff; } .page-home-ai .ai-trust__logo img { width: 100%; height: 100%; object-fit: contain; } .page-home-ai .ai-trust__logo--icon { background: var(--ai-icon-tile-bg); border: 1px solid var(--ai-icon-tile-border); font-size: 17px; } .page-home-ai .ai-trust__name { color: var(--ai-text); font-size: 14px; font-weight: 500; white-space: nowrap; } @media (max-width: 640px) { .page-home-ai .ai-trust { padding: 56px 0; } .page-home-ai .ai-trust__item { padding: 8px 16px 8px 8px; } .page-home-ai .ai-trust__name { white-space: normal; font-size: 13px; } } .page-home-ai .ai-cta { padding: 40px 0 112px; background: var(--ai-bg); } .page-home-ai .ai-cta__card { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; align-items: center; gap: 36px; padding: 56px 60px; border-radius: var(--ai-radius-lg); background: radial-gradient(600px 300px at 12% 10%, rgba(110, 168, 254, 0.35), transparent 60%), linear-gradient(120deg, #16307a 0%, #2b5ee9 45%, #7c3aed 100%); box-shadow: var(--ai-shadow-glow); overflow: hidden; } .page-home-ai .ai-cta__card h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); line-height: 1.28; } .page-home-ai .ai-cta__card p { margin-top: 14px; color: rgba(255, 255, 255, 0.82); font-size: 16px; line-height: 1.8; } .page-home-ai .ai-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; } .page-home-ai .ai-cta__card .ai-btn--ghost { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); color: #fff; } .page-home-ai .ai-cta__card .ai-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); border-color: #fff; color: #fff; } /* ============================================================ 10. 动效 ============================================================ */ @keyframes ai-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ai-accent) 18%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ai-accent) 6%, transparent); } } @keyframes ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes ai-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .page-home-ai .ai-hero__copy > *, .page-home-ai .ai-hero__visual { animation: ai-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .page-home-ai .ai-hero__copy > *:nth-child(2) { animation-delay: 0.06s; } .page-home-ai .ai-hero__copy > *:nth-child(3) { animation-delay: 0.12s; } .page-home-ai .ai-hero__copy > *:nth-child(4) { animation-delay: 0.18s; } .page-home-ai .ai-hero__copy > *:nth-child(5) { animation-delay: 0.24s; } .page-home-ai .ai-hero__visual { animation-delay: 0.16s; } } /* ============================================================ 11. 响应式 ============================================================ */ @media (max-width: 1280px) { .page-home-ai .ai-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-home-ai .ai-customers { grid-template-columns: repeat(auto-fit, minmax(146px, 186px)); } } @media (max-width: 1080px) { .page-home-ai .ai-hero__inner { gap: 40px; } .page-home-ai .ai-about { gap: 44px; } .page-home-ai .ai-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-home-ai .ai-news { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-home-ai .ai-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-home-ai .ai-steps::before { display: none; } } @media (max-width: 992px) { .page-home-ai .ai-hero { padding: 64px 0 96px; } .page-home-ai .ai-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; } .page-home-ai .ai-hero__sub { max-width: none; } .page-home-ai .ai-hero__visual { max-width: 620px; } .page-home-ai .ai-float--1 { left: auto; right: 0; top: -52px; } .page-home-ai .ai-float--2 { right: auto; left: -12px; bottom: -30px; } .page-home-ai .ai-about { grid-template-columns: minmax(0, 1fr); gap: 40px; } .page-home-ai .ai-about__badge { right: 18px; } .page-home-ai .ai-section { padding: 80px 0; } .page-home-ai .ai-cta__card { grid-template-columns: minmax(0, 1fr); padding: 44px 40px; } } @media (max-width: 860px) { .page-home-ai .ai-customers { grid-template-columns: repeat(auto-fit, minmax(140px, 180px)); } } @media (max-width: 768px) { .page-home-ai .ai-hero { padding: 44px 0 84px; } .page-home-ai .ai-hero__title { margin-top: 20px; } .page-home-ai .ai-hero__actions .ai-btn { flex: 1 1 auto; } .page-home-ai .ai-hero__trust { gap: 18px 28px; margin-top: 36px; padding-top: 24px; } .page-home-ai .ai-hero__trust strong { font-size: 24px; } .page-home-ai .ai-console { padding: 18px; } .page-home-ai .ai-console__kpis { gap: 8px; } .page-home-ai .ai-kpi { padding: 12px; } .page-home-ai .ai-kpi strong { font-size: 18px; } .page-home-ai .ai-bars { height: 76px; } .page-home-ai .ai-section { padding: 64px 0; } .page-home-ai .ai-section__head { margin-bottom: 36px; text-align: left; } .page-home-ai .ai-grid, .page-home-ai .ai-news, .page-home-ai .ai-steps, .page-home-ai .ai-grid--2, .page-home-ai .ai-grid--3, .page-home-ai .ai-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 16px; } .page-home-ai .ai-card { padding: 24px; } .page-home-ai .ai-card--capability p { -webkit-line-clamp: unset; } .page-home-ai .ai-cta { padding: 24px 0 76px; } .page-home-ai .ai-cta__card { padding: 32px 24px; border-radius: var(--ai-radius); } .page-home-ai .ai-customers { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } .page-home-ai .ai-customer { height: 84px; } } @media (max-width: 480px) { .page-home-ai .ai-hero__trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .page-home-ai .ai-float--1, .page-home-ai .ai-float--2 { display: none; } .page-home-ai .ai-btn { width: 100%; } .page-home-ai .ai-hero__actions { gap: 12px; } } /* ============================================================ 12. 首页顶部导航：平板区间补丁 （站点原有移动端导航只在 ≤640 生效，641–992 会把菜单挤成竖排文字） ============================================================ */ @media (min-width: 641px) and (max-width: 992px) { body:has(main.page-home-ai) .site-header .container { height: 64px; } body:has(main.page-home-ai) .logo { font-size: 19px; } body:has(main.page-home-ai) .nav-toggle { display: block; } body:has(main.page-home-ai) .main-nav { position: fixed; top: 64px; left: 0; right: 0; padding: 12px 0 20px; background: var(--ai-bg-alt); border-bottom: 1px solid var(--ai-line); box-shadow: var(--ai-shadow); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease; } body:has(main.page-home-ai) .main-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; } body:has(main.page-home-ai) .main-nav ul { flex-direction: column; align-items: stretch; gap: 4px; padding: 0 20px; } body:has(main.page-home-ai) .main-nav a { padding: 12px 16px; border-radius: 10px; } body:has(main.page-home-ai) .main-nav a.is-active { background: rgba(43, 94, 233, 0.1); color: var(--ai-heading); } body:has(main.page-home-ai) .header-search { display: none; } } @media (max-width: 640px) { body:has(main.page-home-ai) .site-header .container { gap: 10px; } body:has(main.page-home-ai) .logo { font-size: 18px; gap: 8px; } body:has(main.page-home-ai) .logo__mark { width: 34px; height: 34px; } body:has(main.page-home-ai) .header-search input { width: 104px; padding: 8px 10px; font-size: 13px; } body:has(main.page-home-ai) .header-search button { padding: 0 8px; } }