/* =================================================================== * 元序界官网 样式表 * YuanXuJie Official Website Stylesheet * 设计：高端商务白（默认）+ 暗色夜间模式 * 主题切换： 由 main.js 控制 * =================================================================== */ /* ---------- 设计令牌 · Light（默认） ---------- */ :root { /* 品牌主色 —— 沉稳商务蓝 */ --c-primary: #1d4ed8; --c-primary-strong: #1e40af; --c-primary-soft: #eff4ff; --c-primary-on: #ffffff; /* 强调与次色 */ --c-secondary: #1d4ed8; --c-accent: #1d4ed8; --c-success: #047857; --c-warning: #b45309; --c-danger: #b91c1c; /* 中性背景 / 表面 */ --c-bg: #ffffff; --c-bg-2: #f7f9fc; --c-bg-3: #eef2f7; --c-surface: #ffffff; --c-surface-2: #f7f9fc; --c-surface-hover: #f1f5f9; /* 边框 */ --c-border: #e5e7eb; --c-border-strong: #cbd5e1; --c-border-hover: #1d4ed8; /* 文本 */ --c-text: #0f172a; /* 标题 / 主文本 */ --c-text-2: #475569; /* 次要文字 */ --c-text-3: #94a3b8; /* 辅助 / 占位 */ --c-text-on-primary: #ffffff; /* 兼容旧变量别名（HTML 内联样式引用） */ --primary: var(--c-primary); --secondary: var(--c-primary); --accent: var(--c-primary); --border: var(--c-border); --border-hover: var(--c-border-strong); --text-primary: var(--c-text); --text-secondary: var(--c-text-2); --text-muted: var(--c-text-3); /* "渐变" 全部退化为单色或极淡氛围 */ --gradient-hero: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); --gradient-accent: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); --gradient-card: #ffffff; /* 阴影 */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.05); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10); --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); --shadow-glow: 0 0 0 4px rgba(29, 78, 216, 0.12); /* 形状 */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; /* 布局 */ --container: 1200px; --container-narrow: 1040px; --nav-h: 68px; --easing: cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- 设计令牌 · Dark ---------- */ [data-theme="dark"] { --c-primary: #3b82f6; --c-primary-strong: #60a5fa; --c-primary-soft: rgba(59, 130, 246, 0.12); --c-primary-on: #ffffff; --c-secondary: #3b82f6; --c-accent: #60a5fa; --c-success: #10b981; --c-warning: #f59e0b; --c-danger: #f87171; --c-bg: #0b0f17; --c-bg-2: #0f1422; --c-bg-3: #131a2c; --c-surface: #131a2c; --c-surface-2: #182135; --c-surface-hover: #1d273e; --c-border: #1f2937; --c-border-strong: #374151; --c-border-hover: #3b82f6; --c-text: #e5e7eb; --c-text-2: #9ca3af; --c-text-3: #6b7280; --c-text-on-primary: #ffffff; --gradient-hero: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); --gradient-accent: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); --gradient-card: #131a2c; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-glow: 0 0 0 4px rgba(59, 130, 246, 0.25); } /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; background: var(--c-bg); color: var(--c-text); line-height: 1.65; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .25s var(--easing), color .25s var(--easing); } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--c-primary); text-decoration: none; transition: color .2s var(--easing); } a:hover { color: var(--c-primary-strong); } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; } /* ---------- 通用布局 ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; } .section { padding: 80px 0; position: relative; } .section-sm { padding: 56px 0; } .section + .section { padding-top: 0; } .section-header { text-align: center; margin-bottom: 56px; max-width: 760px; margin-left: auto; margin-right: auto; } .section-tag { display: inline-block; padding: 4px 12px; background: var(--c-primary-soft); border-radius: 4px; color: var(--c-primary); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; margin-bottom: 16px; text-transform: uppercase; } .section-title { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; line-height: 1.25; color: var(--c-text); margin-bottom: 14px; letter-spacing: -0.5px; } .section-subtitle { font-size: 16px; color: var(--c-text-2); max-width: 720px; margin: 0 auto; line-height: 1.7; } .section-sub-title { font-size: 18px; font-weight: 700; color: var(--c-text); margin: 32px 0 16px; padding-left: 12px; border-left: 3px solid var(--c-primary); letter-spacing: -0.2px; } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 24px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all .2s var(--easing); border: 1px solid transparent; white-space: nowrap; line-height: 1.4; letter-spacing: 0.2px; } .btn-primary { background: var(--c-primary); color: var(--c-primary-on); box-shadow: var(--shadow-xs); } .btn-primary:hover { background: var(--c-primary-strong); color: var(--c-primary-on); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .btn-secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); } .btn-secondary:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-soft); } .btn-ghost { background: transparent; color: var(--c-text-2); border-color: transparent; } .btn-ghost:hover { color: var(--c-primary); background: var(--c-primary-soft); } /* ---------- 导航栏 ---------- */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; z-index: 100; transition: background-color .25s var(--easing), border-color .25s var(--easing), box-shadow .25s var(--easing); } [data-theme="dark"] .navbar { background: rgba(11, 15, 23, 0.78); } .navbar.scrolled { border-bottom-color: var(--c-border); box-shadow: var(--shadow-xs); } .nav-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 16px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--c-text); } .logo:hover { color: var(--c-text); } .logo-icon { width: 36px; height: 36px; background: url('images/logo.png') center/contain no-repeat; flex-shrink: 0; } .logo-text { display: flex; flex-direction: column; line-height: 1.1; } .logo-text span { font-size: 17px; letter-spacing: 0.5px; font-weight: 700; } .logo-text small { font-size: 9.5px; color: var(--c-text-3); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 2px; } .nav-menu { display: flex; gap: 2px; align-items: center; } .nav-menu > li { display: flex; align-items: center; } .nav-menu a { color: var(--c-text-2); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 500; transition: all .2s var(--easing); position: relative; } .nav-menu a:hover { color: var(--c-text); background: var(--c-surface-2); } .nav-menu a.active { color: var(--c-primary); background: var(--c-primary-soft); } .nav-cta { padding: 9px 18px !important; background: var(--c-primary) !important; color: var(--c-primary-on) !important; border-radius: var(--radius-sm) !important; font-weight: 600; margin-left: 6px; } .nav-cta:hover { background: var(--c-primary-strong) !important; color: var(--c-primary-on) !important; transform: translateY(-1px); } /* 主题切换按钮 */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-2); background: transparent; border: 1px solid var(--c-border); margin-left: 4px; transition: all .2s var(--easing); flex-shrink: 0; } .theme-toggle:hover { color: var(--c-primary); border-color: var(--c-primary); background: var(--c-primary-soft); } .theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } .nav-toggle { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; font-size: 22px; color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } /* ---------- Hero ---------- */ .hero { min-height: calc(100vh - 60px); display: flex; align-items: center; padding: calc(var(--nav-h) + 60px) 0 60px; position: relative; overflow: hidden; background: var(--c-bg); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(29, 78, 216, 0.05), transparent 70%); pointer-events: none; } [data-theme="dark"] .hero::before { background: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(59, 130, 246, 0.10), transparent 70%); } /* 旧 orb 全部隐去 */ .hero-orb, .hero-orb-2 { display: none !important; } /* ---------- Hero 动态背景 ---------- */ .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: var(--c-primary); /* 所有 currentColor 取主题主色 */ } .hero-bg-svg { width: 100%; height: 100%; display: block; } /* 网格层 */ .hero-bg-grid { opacity: 0.07; } [data-theme="dark"] .hero-bg-grid { opacity: 0.10; } /* 网络连线 */ .hero-edges { opacity: 0.12; } [data-theme="dark"] .hero-edges { opacity: 0.18; } /* 节点呼吸光环 */ .hero-halo { transform-origin: center; transform-box: fill-box; animation: heroHaloPulse 3.6s ease-in-out infinite; will-change: opacity, r; } .hero-halo.h1 { animation-delay: -0.2s; } .hero-halo.h2 { animation-delay: -1.4s; } .hero-halo.h3 { animation-delay: -0.8s; } .hero-halo.h4 { animation-delay: -2.4s; } .hero-halo.h5 { animation-delay: -1.8s; } .hero-halo.h6 { animation-delay: -3.0s; } @keyframes heroHaloPulse { 0%, 100% { r: 6; opacity: 0; } 50% { r: 26; opacity: 1; } } /* 漂浮光晕（缓速漂移 + 微缩放） */ .hero-blob { transform-origin: center; transform-box: fill-box; will-change: transform; } .hero-blob.blob-a { animation: heroBlobA 26s ease-in-out infinite alternate; } .hero-blob.blob-b { animation: heroBlobB 32s ease-in-out infinite alternate; animation-delay: -8s; } .hero-blob.blob-c { animation: heroBlobC 22s ease-in-out infinite alternate; animation-delay: -4s; } @keyframes heroBlobA { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(80px, 60px) scale(1.12); } } @keyframes heroBlobB { 0% { transform: translate(0, 0) scale(1.05); } 100% { transform: translate(-90px, -50px) scale(0.95); } } @keyframes heroBlobC { 0% { transform: translate(0, 0) scale(0.95); } 100% { transform: translate(60px, -70px) scale(1.10); } } /* 流动光带 —— 用 dashoffset 实现"沿曲线流动" */ .hero-beam { stroke-dasharray: 120 1900; stroke-dashoffset: 2020; will-change: stroke-dashoffset; } .hero-beam.beam-1 { animation: heroBeamFlow 9s linear infinite; } .hero-beam.beam-2 { animation: heroBeamFlow 13s linear infinite; animation-delay: -5s; } @keyframes heroBeamFlow { from { stroke-dashoffset: 2020; } to { stroke-dashoffset: -100; } } /* 适配 reduced motion */ @media (prefers-reduced-motion: reduce) { .hero-blob, .hero-halo, .hero-beam { animation: none !important; } .hero-halo { opacity: 0.4; } } .hero-content { max-width: 880px; text-align: center; margin: 0 auto; position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--c-primary-soft); border: 1px solid transparent; border-radius: 999px; color: var(--c-primary); font-size: 13px; font-weight: 500; margin-bottom: 28px; } .hero-badge .dot { width: 6px; height: 6px; background: var(--c-primary); border-radius: 50%; } .hero-title { font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.18; margin-bottom: 24px; letter-spacing: -1.2px; color: var(--c-text); } .hero-title .highlight { color: var(--c-primary); } .hero-subtitle { font-size: 17px; color: var(--c-text-2); margin: 0 auto 36px; line-height: 1.75; max-width: 760px; } .hero-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hero-buttons .btn { padding: 12px 28px; font-size: 15px; } .hero-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 64px; max-width: 880px; margin-left: auto; margin-right: auto; } .metric { padding: 24px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); text-align: center; transition: all .2s var(--easing); } .metric:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .metric-num { font-size: 30px; font-weight: 700; color: var(--c-primary); margin-bottom: 4px; letter-spacing: -0.5px; line-height: 1.2; } .metric-label { color: var(--c-text-2); font-size: 13px; letter-spacing: 0.3px; } /* ---------- 内页头部 Banner ---------- */ .page-banner { padding: calc(var(--nav-h) + 64px) 0 56px; text-align: center; position: relative; background: var(--c-bg-2); border-bottom: 1px solid var(--c-border); } .page-banner h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; color: var(--c-text); margin-bottom: 12px; letter-spacing: -0.6px; } .page-banner p { color: var(--c-text-2); font-size: 16px; max-width: 720px; margin: 0 auto; } .breadcrumb { margin-top: 18px; font-size: 13px; color: var(--c-text-3); } .breadcrumb a { color: var(--c-text-2); } .breadcrumb a:hover { color: var(--c-primary); } .breadcrumb span { margin: 0 8px; color: var(--c-text-3); } /* ---------- 卡片网格通用 ---------- */ .grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); counter-reset: card-counter; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { padding: 28px 26px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: all .2s var(--easing); position: relative; counter-increment: card-counter; } .card:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--c-text); letter-spacing: -0.2px; } .card p { color: var(--c-text-2); font-size: 14.5px; line-height: 1.75; } /* card-icon —— 几何符号统一替换为编号方块（用 CSS counter，符号本身被隐藏） */ .card-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--c-primary-soft); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0; /* 隐藏掉 ◆◈◉◎ 这类几何符号 */ font-weight: 700; margin-bottom: 18px; position: relative; overflow: hidden; } .card-icon::before { content: counter(card-counter, decimal-leading-zero); font-size: 14px; letter-spacing: 0.5px; color: var(--c-primary); } .card-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; color: var(--c-primary); font-size: 14px; font-weight: 600; transition: gap .2s var(--easing); } .card-link:hover { gap: 8px; color: var(--c-primary-strong); } /* CTA 风格"高亮卡片"（用于"需要定制方案？"） */ .card[style*="gradient-hero"], .card[style*="--gradient-hero"] { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-strong) 100%) !important; border-color: transparent !important; color: #fff !important; } .card[style*="gradient-hero"] h3, .card[style*="--gradient-hero"] h3 { color: #fff !important; } .card[style*="gradient-hero"] .card-icon, .card[style*="--gradient-hero"] .card-icon { background: rgba(255,255,255,0.18); } .card[style*="gradient-hero"] .card-icon::before, .card[style*="--gradient-hero"] .card-icon::before { color: #fff; } .card[style*="gradient-hero"] .card-link, .card[style*="--gradient-hero"] .card-link { color: #fff !important; } /* ---------- Hero 页特征区 ---------- */ .feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } /* ---------- 服务对比表 ---------- */ .compare-wrap { overflow-x: auto; padding-top: 24px; } .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: visible; min-width: 900px; } .compare-table th:first-child { border-top-left-radius: var(--radius-md); } .compare-table th:last-child { border-top-right-radius: var(--radius-md); } .compare-table tr:last-child td:first-child { border-bottom-left-radius: var(--radius-md); } .compare-table tr:last-child td:last-child { border-bottom-right-radius: var(--radius-md); } .compare-table th, .compare-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--c-border); font-size: 14px; } .compare-table th { background: var(--c-bg-2); color: var(--c-text); font-weight: 700; font-size: 14.5px; letter-spacing: 0.3px; } .compare-table th.recommended { background: var(--c-primary-soft); color: var(--c-primary); position: relative; } .compare-table th.recommended::before { content: "推荐"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-xs); z-index: 5; } .compare-table td.recommended { background: var(--c-primary-soft); color: var(--c-text); } .compare-table td.label { text-align: left; color: var(--c-text-2); font-weight: 500; } .compare-table tr:last-child td { border-bottom: none; } .compare-table .yes, .compare-table td.yes, .compare-table td.recommended.yes { color: var(--c-success) !important; font-weight: 600; } .compare-table .star, .compare-table td.star, .compare-table td.recommended.star { color: var(--c-primary) !important; font-weight: 600; } .compare-table .no, .compare-table td.no, .compare-table td.recommended.no { color: var(--c-text-3) !important; font-weight: 500; } /* ---------- FAQ ---------- */ .faq-category { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; } .faq-category a { padding: 7px 16px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-2); font-size: 13.5px; font-weight: 500; transition: all .2s var(--easing); } .faq-category a:hover { color: var(--c-primary); border-color: var(--c-primary); } .faq-category a.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } .faq-group { max-width: 920px; margin: 0 auto 32px; padding: 28px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); } .faq-group-header { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--c-border); } .faq-group-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--c-primary-soft); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 0; /* 屏蔽几何符号 */ flex-shrink: 0; position: relative; } .faq-group-icon::before { content: "?"; font-size: 18px; font-weight: 700; } .faq-group-title h3 { font-size: 18px; margin-bottom: 4px; color: var(--c-text); } .faq-group-title p { font-size: 13px; color: var(--c-text-3); } .faq-item { border-bottom: 1px solid var(--c-border); padding: 14px 0; } .faq-item:last-child { border-bottom: none; } .faq-item summary { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 6px 0; list-style: none; transition: color .2s var(--easing); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover .faq-q-text { color: var(--c-primary); } .faq-q-badge { min-width: 36px; height: 26px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 12px; font-weight: 700; border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0.5px; } .faq-q-text { flex: 1; font-size: 15px; font-weight: 500; color: var(--c-text); transition: color .2s var(--easing); } .faq-toggle { width: 22px; height: 22px; position: relative; flex-shrink: 0; transition: transform .25s var(--easing); } .faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; background: var(--c-text-2); top: 50%; left: 50%; transform: translate(-50%, -50%); } .faq-toggle::before { width: 12px; height: 1.6px; } .faq-toggle::after { width: 1.6px; height: 12px; transition: transform .25s var(--easing); } .faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-answer { padding: 14px 0 6px 50px; color: var(--c-text-2); line-height: 1.85; font-size: 14.5px; } .faq-answer p + p { margin-top: 10px; } .faq-answer ul, .faq-answer ol { padding-left: 20px; margin: 10px 0; } .faq-answer li { margin: 5px 0; } .faq-answer b { color: var(--c-text); } /* ---------- About / Team ---------- */ .about-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } .about-intro h2 { font-size: 32px; line-height: 1.3; margin-bottom: 20px; color: var(--c-text); letter-spacing: -0.5px; } .about-intro h2 span { color: var(--c-primary); } .about-intro p { color: var(--c-text-2); font-size: 15px; line-height: 1.85; margin-bottom: 14px; } .about-visual { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-width: 420px; margin: 0 auto; position: relative; } /* 旧 tech-orb 改为简洁圆形 */ .tech-orb { width: 280px; height: 280px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-strong) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 24px 60px rgba(29, 78, 216, 0.20); position: relative; } [data-theme="dark"] .tech-orb { box-shadow: 0 24px 60px rgba(59, 130, 246, 0.30); } .tech-orb::before { content: ""; position: absolute; inset: -20px; border: 1px dashed var(--c-border-strong); border-radius: 50%; } .tech-orb::after { content: ""; position: absolute; inset: -50px; border: 1px dashed var(--c-border); border-radius: 50%; opacity: 0.7; } .tech-orb img { width: 55%; height: 55%; object-fit: contain; filter: brightness(0) invert(1); } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .team-card { padding: 28px 22px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); text-align: center; transition: all .2s var(--easing); } .team-card:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .team-avatar { width: 80px; height: 80px; margin: 0 auto 18px; border-radius: 50%; background: var(--c-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; font-weight: 700; } .team-card h4 { font-size: 17px; margin-bottom: 4px; color: var(--c-text); } .team-role { color: var(--c-primary); font-size: 13px; margin-bottom: 12px; letter-spacing: 0.3px; font-weight: 500; } .team-bio { color: var(--c-text-2); font-size: 13.5px; line-height: 1.75; } /* ---------- Timeline ---------- */ .timeline { max-width: 760px; margin: 0 auto; position: relative; padding: 16px 0; } .timeline::before { content: ""; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: var(--c-border); } .timeline-item { position: relative; padding: 0 0 32px 70px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: 22px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-bg); border: 3px solid var(--c-primary); box-shadow: 0 0 0 3px var(--c-bg); } .timeline-date { color: var(--c-primary); font-weight: 700; margin-bottom: 4px; font-size: 13.5px; letter-spacing: 0.5px; } .timeline-title { font-size: 16px; margin-bottom: 6px; color: var(--c-text); } .timeline-desc { color: var(--c-text-2); font-size: 14px; line-height: 1.8; } /* ---------- Case 卡片 ---------- */ .case-filters, .news-filters { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; } .case-filter, .news-filter { padding: 7px 16px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-2); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all .2s var(--easing); } .case-filter:hover, .news-filter:hover { color: var(--c-primary); border-color: var(--c-primary); } .case-filter.active, .news-filter.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } .cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .case-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; transition: all .2s var(--easing); color: var(--c-text); } .case-card:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--c-text); } .case-cover { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #0a0e1a; /* SVG 内嵌深底，保持 cover 效果 */ } .case-cover svg.case-svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; } .case-cover-icon { display: none; } .case-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; background: rgba(255, 255, 255, 0.95); color: var(--c-primary); font-size: 12px; font-weight: 600; border-radius: var(--radius-xs); z-index: 3; backdrop-filter: blur(4px); } .case-body { padding: 22px; flex: 1; display: flex; flex-direction: column; } .case-industry { color: var(--c-primary); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 8px; text-transform: uppercase; } .case-title { font-size: 17px; margin-bottom: 10px; color: var(--c-text); line-height: 1.45; font-weight: 700; } .case-card:hover .case-title { color: var(--c-primary); } .case-desc { color: var(--c-text-2); font-size: 13.5px; line-height: 1.7; margin-bottom: 18px; flex: 1; } .case-metrics { display: flex; gap: 12px; padding-top: 16px; border-top: 1px solid var(--c-border); } .case-metric { text-align: center; flex: 1; } .case-metric-num { font-size: 18px; font-weight: 700; color: var(--c-primary); margin-bottom: 2px; letter-spacing: -0.3px; } .case-metric-label { font-size: 11px; color: var(--c-text-3); } /* ---------- News 卡片 ---------- */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 0; } .news-card, .news-grid .news-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; transition: all .2s var(--easing); text-decoration: none; color: var(--c-text); } .news-card:hover, .news-grid .news-card:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); } .news-image, .news-grid .news-image { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #0f1422; } .news-image::before { display: none; } .news-image .news-svg, .news-grid .news-image .news-svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; } .news-image-placeholder { color: var(--c-text-3); font-size: 36px; position: relative; z-index: 1; } .news-body, .news-grid .news-body { padding: 22px; flex: 1; } .news-meta, .news-grid .news-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--c-text-3); margin-bottom: 10px; align-items: center; flex-wrap: wrap; } .news-meta .tag, .news-meta .news-category, .news-grid .news-meta .news-category { color: var(--c-primary); font-weight: 600; letter-spacing: 0.3px; } .news-date { color: var(--c-text-3); } .news-tag { display: inline-block; padding: 2px 8px; background: var(--c-primary-soft); color: var(--c-primary); border-radius: var(--radius-xs); font-size: 11px; font-weight: 500; } .news-title, .news-grid .news-title { font-size: 17px; margin-bottom: 10px; line-height: 1.45; color: var(--c-text); font-weight: 700; } .news-body h3 a { color: var(--c-text); } .news-body h3 a:hover, .news-card:hover .news-title, .news-grid .news-card:hover .news-title { color: var(--c-primary); } .news-excerpt, .news-grid .news-excerpt { color: var(--c-text-2); font-size: 13.5px; line-height: 1.75; } .news-body p { color: var(--c-text-2); font-size: 14px; line-height: 1.75; } /* ---------- 文章详情 ---------- */ .article-layout-wrap { background: var(--c-bg); } .article-layout { display: grid; grid-template-columns: 1fr 240px; gap: 56px; max-width: var(--container-narrow); margin: 0 auto; padding: calc(var(--nav-h) + 32px) 24px 80px; } .article-main { min-width: 0; } .article-head { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--c-border); } .article-head .breadcrumb { margin: 0 0 16px; } .article-head h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.3; color: var(--c-text); margin-bottom: 16px; letter-spacing: -0.5px; font-weight: 700; } .article-head .article-meta { color: var(--c-text-3); font-size: 13.5px; } .article-head .article-meta span:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--c-text-3); } .article-cover { margin: 0 0 28px; aspect-ratio: 16 / 7; border-radius: var(--radius-md); overflow: hidden; background: #0f1422; } .article-cover svg { width: 100%; height: 100%; display: block; } .article { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; } .article-header { text-align: center; margin-bottom: 48px; padding-bottom: 28px; border-bottom: 1px solid var(--c-border); } .article-header h1 { font-size: 28px; margin-bottom: 16px; line-height: 1.3; } .article-meta { color: var(--c-text-3); font-size: 13.5px; } .article-meta span { margin: 0 8px; } .article-body { color: var(--c-text); font-size: 15.5px; line-height: 1.85; } .article-body p { margin-bottom: 16px; color: var(--c-text); } .article-body h2 { font-size: 22px; margin: 36px 0 14px; color: var(--c-text); padding-left: 12px; border-left: 3px solid var(--c-primary); font-weight: 700; } .article-body h3 { font-size: 18px; margin: 24px 0 10px; color: var(--c-text); font-weight: 700; } .article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 16px; color: var(--c-text-2); } .article-body ul li, .article-body ol li { margin: 6px 0; } .article-body ol li { list-style: decimal; } .article-body b, .article-body strong { color: var(--c-text); font-weight: 700; } .article-body blockquote { margin: 28px 0; padding: 16px 22px; background: var(--c-bg-2); border-left: 3px solid var(--c-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--c-text); font-style: italic; } .article-body hr { border: none; height: 1px; background: var(--c-border); margin: 28px 0; } /* 文章右侧 TOC */ .article-toc { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; padding: 18px 18px 18px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); } .article-toc-title { font-size: 13px; font-weight: 700; color: var(--c-text-2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; padding-left: 4px; } .article-toc ul { list-style: none; margin: 0; padding: 0; } .article-toc li { margin: 0; padding: 0; list-style: none; } .article-toc a { display: block; padding: 6px 0 6px 12px; color: var(--c-text-2); font-size: 13.5px; border-left: 2px solid transparent; transition: all .2s var(--easing); line-height: 1.5; } .article-toc a:hover { color: var(--c-text); border-left-color: var(--c-primary); padding-left: 14px; } .article-toc a.active { color: var(--c-primary); border-left-color: var(--c-primary); font-weight: 600; } .article-toc .toc-lv3 { padding-left: 24px; font-size: 13px; } .article-toc .toc-lv3:hover, .article-toc .toc-lv3.active { padding-left: 26px; } .article-footer { margin-top: 40px; padding: 24px; background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); text-align: center; } .article-footer h4 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--c-text); } .article-footer p { color: var(--c-text-2); font-size: 14px; margin-bottom: 16px; } /* ---------- Contact form ---------- */ .contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; } .contact-info { padding: 32px 28px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); } .contact-info h3 { font-size: 19px; font-weight: 700; margin-bottom: 22px; color: var(--c-text); } .contact-info ul li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--c-border); color: var(--c-text-2); font-size: 13.5px; line-height: 1.7; } .contact-info ul li:last-child { border-bottom: none; } .contact-info .ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-xs); background: var(--c-primary-soft); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 0; position: relative; } .contact-info .ico::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); } .contact-info strong { color: var(--c-text); display: block; font-size: 14px; margin-bottom: 2px; font-weight: 600; } .contact-form { padding: 32px 28px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); } .contact-form h3 { font-size: 19px; font-weight: 700; margin-bottom: 22px; color: var(--c-text); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-field { margin-bottom: 16px; } .form-field label { display: block; margin-bottom: 6px; color: var(--c-text-2); font-size: 13px; font-weight: 500; } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: 10px 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text); font-size: 14px; transition: all .2s var(--easing); } .form-field textarea { min-height: 110px; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--shadow-glow); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--c-text-3); } /* ---------- Footer ---------- */ .footer { background: var(--c-bg-2); border-top: 1px solid var(--c-border); padding: 56px 0 28px; margin-top: 80px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; margin-bottom: 36px; } .footer-col h4 { font-size: 14px; margin-bottom: 16px; color: var(--c-text); letter-spacing: 0.3px; font-weight: 700; } .footer-col ul li { margin-bottom: 8px; } .footer-col ul li a { color: var(--c-text-2); font-size: 13.5px; } .footer-col ul li a:hover { color: var(--c-primary); } .footer-about p { color: var(--c-text-2); font-size: 13.5px; margin-top: 14px; line-height: 1.75; } .footer-social { display: flex; gap: 8px; margin-top: 18px; } .footer-social a { width: 34px; height: 34px; border: 1px solid var(--c-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-text-2); font-size: 13px; transition: all .2s var(--easing); background: var(--c-surface); } .footer-social a:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } .footer-contact li { display: flex; gap: 10px; color: var(--c-text-2); font-size: 13px; line-height: 1.65; border-bottom: none !important; padding: 5px 0 !important; } .footer-contact .ico { color: var(--c-primary); flex-shrink: 0; width: 16px; font-size: 0; position: relative; height: 16px; margin-top: 3px; } .footer-contact .ico::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--c-primary); } .footer-bottom { padding-top: 22px; border-top: 1px solid var(--c-border); text-align: center; color: var(--c-text-3); font-size: 12.5px; } .footer-bottom a { color: var(--c-text-3); } .footer-bottom a:hover { color: var(--c-primary); } /* ---------- CTA box ---------- */ .cta { padding: 72px 0; } .cta-box { max-width: 920px; margin: 0 auto; padding: 56px 40px; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-strong) 100%); border-radius: var(--radius-lg); text-align: center; color: #fff; box-shadow: 0 20px 60px rgba(29, 78, 216, 0.18); } [data-theme="dark"] .cta-box { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40); } .cta-box h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.3px; color: #fff; } .cta-box p { color: rgba(255,255,255,0.88); font-size: 15.5px; margin-bottom: 28px; max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.7; } .cta-box .btn-primary { background: #fff; color: var(--c-primary); border-color: #fff; } .cta-box .btn-primary:hover { background: #f8fafc; color: var(--c-primary); } .cta-box .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); } .cta-box .btn-secondary:hover { background: rgba(255,255,255,0.10); color: #fff; border-color: #fff; } .cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ---------- Back to top ---------- */ .back-to-top { position: fixed; bottom: 24px; right: 24px; width: 42px; height: 42px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all .25s var(--easing); z-index: 50; box-shadow: var(--shadow-md); } .back-to-top.visible { opacity: 1; pointer-events: auto; } .back-to-top:hover { transform: translateY(-2px); background: var(--c-primary-strong); } /* ---------- Solutions Tab ---------- */ .solution-tabs { padding-top: 12px; } .solution-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 36px; padding: 8px; background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); } .solution-nav-item { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--c-text-2); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all .2s var(--easing); border: 1px solid transparent; text-align: center; } .solution-nav-item:hover { background: var(--c-surface); color: var(--c-text); } .solution-nav-item.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } .solution-nav-item .ico { font-size: 16px; color: inherit; } .solution-nav-item .icon, .solution-nav-item > .icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary); flex-shrink: 0; } .solution-nav-item .icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .solution-nav-item.active .icon { color: #fff; } .solution-nav-item:hover .icon { color: var(--c-primary); } .solution-content { display: none; padding: 8px 0; } .solution-content.active { display: block; animation: fadeIn .35s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .solution-content h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; color: var(--c-text); margin-bottom: 14px; letter-spacing: -0.3px; } .solution-content > p { color: var(--c-text-2); line-height: 1.85; margin-bottom: 22px; font-size: 15px; } .solution-content .btn { margin-top: 20px; } .solution-content .btn + .btn { margin-left: 10px; } .solution-hero { margin: 28px 0 32px; aspect-ratio: 4 / 1; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--c-border); background: #0a0e1a; } .solution-hero svg { width: 100%; height: 100%; display: block; } /* Pain points (4 列) */ .pain-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 28px; } @media (max-width: 1100px) { .pain-points { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pain-points { grid-template-columns: 1fr; } } .pain-point { padding: 18px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: all .2s var(--easing); } .pain-point:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .pain-point svg.icon, .pain-point .icon { width: 22px; height: 22px; color: var(--c-primary); margin-bottom: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pain-point b { display: block; font-size: 14px; margin-bottom: 4px; color: var(--c-text); font-weight: 700; } .pain-point p { font-size: 13px; color: var(--c-text-2); line-height: 1.65; margin: 0; } /* solution points */ .solution-points { display: grid; gap: 14px; margin: 20px 0; } .solution-point { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); align-items: start; transition: all .2s var(--easing); } .solution-point:hover { border-color: var(--c-primary); } .solution-point-num { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--c-primary-soft); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; flex-shrink: 0; } .solution-point h5 { font-size: 15px; margin-bottom: 4px; color: var(--c-text); font-weight: 700; } .solution-point p { font-size: 13.5px; color: var(--c-text-2); line-height: 1.7; margin: 0; } /* target clients */ .target-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 28px; } .target-client { padding: 18px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: all .2s var(--easing); } .target-client:hover { border-color: var(--c-primary); transform: translateY(-2px); } .target-client .tc-ico { width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--c-primary-soft); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0; margin-bottom: 10px; position: relative; } .target-client .tc-ico::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--c-primary); border-radius: 50%; } .target-client h6 { font-size: 14.5px; margin-bottom: 4px; color: var(--c-text); font-weight: 700; } .target-client p { font-size: 13px; color: var(--c-text-2); line-height: 1.6; margin: 0; } /* prompt samples */ .prompt-samples { display: grid; gap: 10px; margin: 14px 0 24px; } .prompt-sample { padding: 14px 16px; background: var(--c-bg-2); border: 1px solid var(--c-border); border-left: 3px solid var(--c-primary); border-radius: var(--radius-sm); color: var(--c-text); font-size: 13.5px; line-height: 1.65; } .ps-tag { display: inline-block; padding: 2px 8px; background: var(--c-primary-soft); color: var(--c-primary); border-radius: var(--radius-xs); font-size: 11px; font-weight: 600; margin-right: 8px; letter-spacing: 0.3px; } /* deliverables */ .deliverable-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 28px; } .deliverable-item { padding: 18px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: all .2s var(--easing); } .deliverable-item:hover { border-color: var(--c-primary); transform: translateY(-2px); } .dl-ico { width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--c-primary-soft); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0; margin-bottom: 10px; position: relative; } .dl-ico::before { content: ""; width: 12px; height: 12px; background: var(--c-primary); transform: rotate(45deg); } .deliverable-item h6 { font-size: 14.5px; margin-bottom: 4px; color: var(--c-text); font-weight: 700; } .deliverable-item p { font-size: 13px; color: var(--c-text-2); line-height: 1.6; margin: 0; } /* solution-meta (统计数字) */ .solution-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; padding: 24px; background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); margin: 24px 0; } .solution-meta-item { text-align: center; } .solution-meta-item .num { font-size: 26px; font-weight: 700; color: var(--c-primary); margin-bottom: 4px; letter-spacing: -0.5px; line-height: 1.2; } .solution-meta-item .label { font-size: 12px; color: var(--c-text-3); letter-spacing: 0.5px; } /* mini-flow */ .mini-flow { display: flex; gap: 8px; align-items: stretch; margin: 18px 0 28px; flex-wrap: wrap; } .mini-flow-step { flex: 1 1 140px; padding: 14px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: all .2s var(--easing); min-width: 140px; } .mini-flow-step:hover { border-color: var(--c-primary); transform: translateY(-2px); } .mini-flow-step .step-num { width: 26px; height: 26px; border-radius: var(--radius-xs); background: var(--c-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-bottom: 8px; } .mini-flow-step strong { display: block; font-size: 13.5px; color: var(--c-text); margin-bottom: 2px; font-weight: 700; } .mini-flow-step small { display: block; font-size: 12px; color: var(--c-text-3); line-height: 1.55; } .mini-flow .arrow { align-self: center; color: var(--c-text-3); font-size: 16px; flex: 0 0 auto; } /* ---------- Resources ---------- */ .resource-card { padding: 24px 22px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: all .2s var(--easing); display: flex; flex-direction: column; height: 100%; } .resource-card:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .resource-type { display: inline-block; padding: 3px 10px; background: var(--c-primary-soft); color: var(--c-primary); border-radius: var(--radius-xs); font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; margin-bottom: 14px; align-self: flex-start; } .resource-card h4 { font-size: 16px; line-height: 1.5; margin-bottom: 10px; color: var(--c-text); font-weight: 700; } .resource-card p { color: var(--c-text-2); font-size: 13.5px; line-height: 1.7; flex: 1; } .resource-meta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-border); color: var(--c-text-3); font-size: 12px; display: flex; justify-content: space-between; } /* ---------- Flow diagram ---------- */ .flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .flow-step { text-align: center; padding: 24px 18px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: all .2s var(--easing); } .flow-step:hover { border-color: var(--c-primary); transform: translateY(-2px); } .flow-num { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; } .flow-step h5 { font-size: 14.5px; margin-bottom: 6px; color: var(--c-text); font-weight: 700; } .flow-step p { font-size: 13px; color: var(--c-text-2); line-height: 1.6; } /* ---------- Pricing 卡片增强 ---------- */ .pricing-card { position: relative; } .pricing-recommended { position: relative; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-strong) 100%) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 12px 40px rgba(29, 78, 216, 0.20); } .pricing-recommended::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #60a5fa, #1d4ed8); border-radius: var(--radius-md) var(--radius-md) 0 0; } .pricing-recommended h3, .pricing-recommended p, .pricing-recommended p b, .pricing-recommended .pricing-meta, .pricing-recommended .pricing-meta b, .pricing-recommended .card-link { color: #fff !important; } .pricing-recommended .card-icon { background: rgba(255,255,255,0.18); } .pricing-recommended .card-icon::before { color: #fff; } .pricing-recommended .card-link:hover { color: #fff !important; opacity: 0.85; } .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; background: var(--c-primary-strong); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; border-radius: 999px; box-shadow: var(--shadow-sm); white-space: nowrap; } .pricing-meta { color: var(--c-text-2); font-size: 13px; margin-top: 8px; } .pricing-meta + .pricing-meta { margin-top: 4px; } .pricing-basic { background: var(--c-surface); } .pricing-basic h3, .pricing-basic p, .pricing-basic .pricing-meta, .pricing-basic .pricing-meta b, .pricing-basic .card-link { color: var(--c-text); } .pricing-basic .pricing-meta { color: var(--c-text-2); } .pricing-basic .card-link { color: var(--c-primary); } /* ---------- Subscribe ---------- */ .subscribe-box { max-width: 760px; margin: 0 auto; padding: 48px 36px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); text-align: center; } .subscribe-eyebrow { display: inline-block; padding: 4px 12px; background: var(--c-primary-soft); color: var(--c-primary); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 14px; } .subscribe-box h3 { font-size: 24px; font-weight: 700; color: var(--c-text); margin-bottom: 10px; letter-spacing: -0.3px; } .subscribe-box p { color: var(--c-text-2); font-size: 14.5px; margin-bottom: 24px; line-height: 1.7; } .subscribe-form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 4px; transition: border-color .2s var(--easing), box-shadow .2s var(--easing); } .subscribe-form:focus-within { border-color: var(--c-primary); box-shadow: var(--shadow-glow); } .subscribe-input { flex: 1; padding: 10px 12px; background: transparent; border: none; color: var(--c-text); font-size: 14px; outline: none; } .subscribe-input::placeholder { color: var(--c-text-3); } .subscribe-btn { padding: 9px 20px; background: var(--c-primary); color: #fff; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s var(--easing); border: none; } .subscribe-btn:hover { background: var(--c-primary-strong); } .subscribe-note { color: var(--c-text-3); font-size: 12px; margin-top: 14px; margin-bottom: 0; } /* ---------- Testimonials ---------- */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; } .testimonial-card { padding: 26px 22px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: all .2s var(--easing); } .testimonial-card:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .testimonial-quote { color: var(--c-text); font-size: 14px; line-height: 1.75; margin-bottom: 18px; quotes: """ """; } .testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--c-border); } .testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .testimonial-author strong { display: block; font-size: 13px; color: var(--c-text); font-weight: 700; } .testimonial-author span { font-size: 11.5px; color: var(--c-text-3); letter-spacing: 0.3px; } /* ---------- Pagination ---------- */ .pagination { display: flex; justify-content: center; gap: 6px; margin-top: 56px; } .pagination a { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text-2); font-size: 13.5px; background: var(--c-surface); transition: all .2s var(--easing); } .pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); } .pagination a.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } /* ---------- 行内提示 / 隐私声明等内联块（cases.html 中） ---------- */ .section > .container > div[style*="linear-gradient"] { background: var(--c-bg-2) !important; border: 1px solid var(--c-border) !important; color: var(--c-text-2) !important; } .section > .container > div[style*="linear-gradient"] b { color: var(--c-primary) !important; } /* ---------- 兼容旧页 inline style 中 padding-left + border-left 的小标题 ---------- */ [style*="border-left: 3px solid var(--c-primary)"], [style*="border-left: 3px solid var(--primary)"], [style*="border-left: 3px solid var(--c-accent)"], [style*="border-left: 3px solid var(--accent)"] { border-left-color: var(--c-primary) !important; } /* article-body 中作为 callout 的 div */ [style*="border-left: 3px solid var(--c-accent)"][style*="background"] { background: var(--c-bg-2) !important; color: var(--c-text) !important; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .about-intro { grid-template-columns: 1fr; gap: 36px; text-align: center; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .article-layout { grid-template-columns: 1fr; gap: 28px; padding: calc(var(--nav-h) + 24px) 20px 60px; } .article-toc { display: none; } } @media (max-width: 768px) { :root { --nav-h: 60px; } .nav-menu { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; background: var(--c-bg); padding: 14px 18px; gap: 4px; border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-md); max-height: 0; overflow: hidden; transition: max-height .3s var(--easing); } .nav-menu.open { max-height: calc(100vh - var(--nav-h)); padding-bottom: 22px; } .nav-menu li { width: 100%; } .nav-menu a { width: 100%; padding: 12px 14px; } .nav-toggle { display: inline-flex; } .theme-toggle { width: 34px; height: 34px; } .hero { padding: calc(var(--nav-h) + 36px) 0 48px; min-height: auto; } .hero-title { font-size: 30px; letter-spacing: -0.6px; } .hero-metrics { grid-template-columns: repeat(2, 1fr); margin-top: 36px; } .section { padding: 56px 0; } .section-header { margin-bottom: 36px; } .section-title { font-size: 24px; } .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .compare-table { min-width: 720px; } .contact-layout { grid-template-columns: 1fr; gap: 24px; } .case-metrics { gap: 8px; } .cta-box { padding: 36px 22px; } .subscribe-box { padding: 32px 20px; } .subscribe-form { flex-direction: column; padding: 8px; } .subscribe-input { text-align: center; padding: 12px 14px; } .subscribe-btn { width: 100%; padding: 12px !important; } .article-head h1 { font-size: 22px; } .solution-nav { grid-template-columns: repeat(2, 1fr); } .mini-flow .arrow { display: none; } } /* ---------- 打印 ---------- */ @media print { .navbar, .back-to-top, .footer-social, .theme-toggle { display: none !important; } body { background: #fff !important; color: #000 !important; } } /* =================================================================== * yxj-geo 主题包追加样式（M1） * 为 yxjcms 主题包新增的组件类 * =================================================================== */ /* ---------- skip link / 无障碍 ---------- */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; background: var(--c-primary); color: var(--c-primary-on); padding: 8px 14px; border-radius: 4px; z-index: 99999; } .skip-link:focus { left: 16px; top: 16px; width: auto; height: auto; } /* ---------- 多行 Hero 副标题（支持 \n 换行） ---------- */ .hero-subtitle--multiline { white-space: pre-line; } /* ---------- 问 AI 按钮（多入口 CTA） ---------- */ .btn-ai { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; background: var(--c-primary-soft); color: var(--c-primary); border: 1px solid transparent; border-radius: var(--radius-md); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all 0.2s var(--easing); text-decoration: none; } .btn-ai:hover { background: var(--c-primary); color: var(--c-primary-on); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ai svg { flex-shrink: 0; } .btn-block { display: flex !important; width: 100%; justify-content: center; } /* ---------- AI 引擎 logo 墙 ---------- */ .engines-strip { padding: 36px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); background: var(--c-bg-2); } .engines-label { text-align: center; color: var(--c-text-2); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; } .engines-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; max-width: 960px; margin: 0 auto; } .engine-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-2); font-size: 14px; font-weight: 500; transition: all 0.2s var(--easing); } .engine-chip:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-1px); } .engine-chip .engine-text { white-space: nowrap; } /* ---------- card-cta（首页 SERVICES 中的定制 CTA 卡片） ---------- */ .card-cta { background: var(--gradient-hero) !important; color: #fff !important; border-color: transparent !important; } .card-cta h3, .card-cta p, .card-cta .card-link { color: #fff !important; } .card-cta p { color: rgba(255, 255, 255, 0.85) !important; } /* ---------- section-more（章节末尾的"查看更多"按钮） ---------- */ .section-more { text-align: center; margin-top: 36px; } /* ---------- page-banner-title / page-banner-subtitle ---------- */ .page-banner-title { font-size: 32px; font-weight: 700; color: var(--c-text); margin: 12px 0 10px; } .page-banner-subtitle { color: var(--c-text-2); font-size: 16px; max-width: 720px; margin: 0 auto; line-height: 1.7; } /* ---------- 案例列表卡片封面兜底 ---------- */ .case-card-body { padding: 18px 20px 20px; } .case-card-body h3 { font-size: 17px; margin-bottom: 8px; color: var(--c-text); } .case-card-body p { font-size: 14px; color: var(--c-text-2); line-height: 1.7; margin-bottom: 12px; } .case-card-body time { font-size: 12.5px; color: var(--c-text-3); } .case-cover-fallback { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: var(--gradient-hero); color: #fff; padding: 20px; text-align: center; } .case-cover-fallback span { font-size: 16px; font-weight: 600; line-height: 1.4; max-width: 80%; } /* ---------- 新闻卡 body ---------- */ .news-card-body { padding: 18px 20px 20px; } .news-card-body time { font-size: 12.5px; color: var(--c-text-3); display: block; margin-bottom: 8px; } .news-card-body h3 { font-size: 17px; margin-bottom: 8px; color: var(--c-text); } .news-card-body p { font-size: 14px; color: var(--c-text-2); line-height: 1.7; } /* ---------- 案例详情指标块（约定 HTML 写在富文本顶部） ---------- */ .case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px; margin: 0 0 32px; background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: var(--radius-lg); } .case-meta .metric { text-align: center; } .case-meta .metric .value { display: block; font-size: 26px; font-weight: 800; color: var(--c-primary); line-height: 1.1; margin-bottom: 6px; } .case-meta .metric .label { font-size: 13px; color: var(--c-text-2); } /* ---------- 案例详情底部 CTA ---------- */ .case-extra-cta { padding: 60px 0; background: var(--c-bg-2); } .case-extra-cta-box { background: var(--gradient-hero); color: #fff; border-radius: var(--radius-xl); padding: 48px 36px; text-align: center; } .case-extra-cta-box h2 { color: #fff; font-size: 26px; margin-bottom: 10px; } .case-extra-cta-box p { color: rgba(255, 255, 255, 0.9); font-size: 15px; margin-bottom: 24px; max-width: 580px; margin-left: auto; margin-right: auto; } .case-extra-cta-buttons { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .case-extra-cta-buttons .btn-ai { background: rgba(255, 255, 255, 0.16); color: #fff; } .case-extra-cta-buttons .btn-ai:hover { background: #fff; color: var(--c-primary); } /* ---------- 文章详情 - sidebar / TLDR ---------- */ .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding: 48px 0; } .article-sidebar { position: sticky; top: 100px; align-self: start; } .article-sidebar-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 24px; } .article-sidebar-card h4 { font-size: 16px; color: var(--c-text); margin-bottom: 8px; } .article-sidebar-card p { font-size: 13.5px; color: var(--c-text-2); margin-bottom: 16px; line-height: 1.7; } .article-sidebar-card .btn { margin-bottom: 10px; } .article-tldr { background: var(--c-primary-soft); border-left: 3px solid var(--c-primary); padding: 14px 18px; margin: 20px 0 28px; border-radius: var(--radius-sm); } .article-tldr strong { display: block; color: var(--c-primary); font-size: 13px; margin-bottom: 4px; letter-spacing: 1px; } .article-tldr p { font-size: 14.5px; color: var(--c-text); line-height: 1.7; margin: 0; } /* ---------- pricing-grid ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; } .pricing-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 28px 24px; transition: all 0.2s var(--easing); } .pricing-card:hover { border-color: var(--c-primary); transform: translateY(-4px); box-shadow: var(--shadow-md); } .pricing-card-highlight { border-color: var(--c-primary); border-width: 2px; box-shadow: var(--shadow-glow); } .pricing-badge { display: inline-block; padding: 4px 12px; background: var(--c-primary); color: var(--c-primary-on); border-radius: 999px; font-size: 12px; font-weight: 600; margin-bottom: 12px; } .pricing-name { font-size: 18px; color: var(--c-text); margin-bottom: 6px; font-weight: 700; } .pricing-price { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--c-border); } .pricing-price-num { font-size: 30px; font-weight: 800; color: var(--c-primary); } .pricing-price-text { font-size: 24px; font-weight: 700; color: var(--c-text); } .pricing-price-unit { font-size: 13px; color: var(--c-text-2); margin-left: 4px; } .pricing-features { list-style: none; padding: 0; margin: 0 0 20px; } .pricing-features li { padding: 6px 0 6px 22px; position: relative; font-size: 13.5px; color: var(--c-text-2); line-height: 1.6; } .pricing-features li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--c-success); font-weight: 700; } /* ---------- solutions-tabs（容器） ---------- */ .solutions-tabs { display: grid; grid-template-columns: 240px 1fr; gap: 32px; margin-top: 32px; } .solutions-tabs .solution-nav { display: flex; flex-direction: column; gap: 4px; } .solutions-content-wrap { min-width: 0; } .solution-bullets { list-style: none; padding: 0; margin: 16px 0 24px; } .solution-bullets li { padding: 8px 0 8px 28px; position: relative; color: var(--c-text-2); font-size: 14.5px; line-height: 1.7; } .solution-bullets li::before { content: "▸"; position: absolute; left: 8px; top: 8px; color: var(--c-primary); font-weight: 700; } /* ---------- timeline-period / timeline-body（about 时间线） ---------- */ .timeline-period { color: var(--c-primary); font-weight: 700; font-size: 13.5px; letter-spacing: 0.5px; margin-bottom: 6px; } .timeline-body h3 { font-size: 16px; margin-bottom: 6px; color: var(--c-text); } .timeline-body p { color: var(--c-text-2); font-size: 14px; line-height: 1.8; } /* ---------- flow-grid / flow-step（合作流程） ---------- */ .flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-top: 32px; } .flow-step-num { display: inline-block; width: 40px; height: 40px; background: var(--c-primary-soft); color: var(--c-primary); border-radius: 50%; font-size: 16px; font-weight: 700; line-height: 40px; text-align: center; margin-bottom: 12px; } .flow-grid .flow-step h3 { font-size: 15px; margin-bottom: 6px; color: var(--c-text); } .flow-grid .flow-step p { font-size: 13px; color: var(--c-text-2); line-height: 1.6; } /* ---------- team-card 增强 ---------- */ .team-card .team-name { font-size: 17px; color: var(--c-text); margin-top: 10px; margin-bottom: 4px; } .team-card .team-role { font-size: 13.5px; color: var(--c-primary); margin-bottom: 10px; } .team-card .team-bio { font-size: 13.5px; color: var(--c-text-2); line-height: 1.7; } .team-avatar-fallback { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--gradient-hero); color: #fff; font-size: 22px; font-weight: 700; border-radius: 50%; } /* ---------- FAQ "没找到答案" CTA ---------- */ .faq-still-have { text-align: center; margin-top: 48px; padding: 36px 24px; background: var(--c-bg-2); border-radius: var(--radius-lg); } .faq-still-have p { color: var(--c-text); font-size: 17px; margin-bottom: 16px; } .faq-still-have .btn { margin: 0 6px 8px; } /* ---------- contact-page 网格 ---------- */ .contact-page .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 0; } .contact-page .contact-info h2 { font-size: 26px; margin-bottom: 16px; } .contact-page .contact-content { color: var(--c-text-2); line-height: 1.8; margin-bottom: 24px; } .contact-page .contact-list { list-style: none; padding: 0; } .contact-page .contact-list li { padding: 10px 0; display: flex; align-items: center; gap: 12px; color: var(--c-text-2); font-size: 14.5px; } .contact-page .contact-list .ico { color: var(--c-primary); font-size: 18px; } .contact-page .contact-form-wrap { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 32px; } .contact-page .contact-form-wrap h3 { font-size: 20px; margin-bottom: 6px; } .contact-page .contact-form-wrap .muted { font-size: 13px; color: var(--c-text-2); margin-bottom: 18px; } /* ---------- CTA 表单容器 ---------- */ .cta-form-wrap { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-lg); padding: 28px 24px; margin: 24px auto; max-width: 640px; } .cta-form-title { color: #fff; font-size: 18px; margin-bottom: 6px; } .cta-form-tip { color: rgba(255, 255, 255, 0.8); font-size: 13.5px; margin-bottom: 18px; } /* ---------- subscribe-block ---------- */ .subscribe-block { margin-top: 48px; padding: 32px; background: var(--c-bg-2); border-radius: var(--radius-lg); text-align: center; } .subscribe-block h3 { font-size: 20px; margin-bottom: 16px; color: var(--c-text); } .subscribe-block .subscribe-form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; } .subscribe-block .subscribe-form input { flex: 1; padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text); font-size: 14px; } /* ---------- generic-list（通用分类列表） ---------- */ .generic-list { display: grid; gap: 16px; margin-top: 24px; } .generic-list-item { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); color: inherit; text-decoration: none; transition: all 0.2s var(--easing); } .generic-list-item:hover { border-color: var(--c-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .generic-list-cover img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); } .generic-list-body h3 { font-size: 17px; margin-bottom: 8px; color: var(--c-text); } .generic-list-body p { font-size: 14px; color: var(--c-text-2); line-height: 1.7; margin-bottom: 8px; } .generic-list-body time { font-size: 12.5px; color: var(--c-text-3); } /* ---------- 404 页 ---------- */ .page-404 { min-height: calc(100vh - var(--nav-h) - 200px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 16px; } .page-404-num { font-size: 120px; font-weight: 900; line-height: 1; background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 16px; } .page-404-title { font-size: 28px; color: var(--c-text); margin-bottom: 10px; } .page-404-subtitle { color: var(--c-text-2); margin-bottom: 28px; max-width: 480px; } .page-404-actions { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ---------- yxjs-leadForm 主题适配 ---------- */ .yxjs-lead-form { display: grid; gap: 12px; } .yxjs-lead-form input, .yxjs-lead-form textarea { width: 100%; padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text); font-size: 14px; font-family: inherit; } .yxjs-lead-form input:focus, .yxjs-lead-form textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--shadow-glow); } .yxjs-lead-form button { padding: 14px 20px; background: var(--c-primary); color: var(--c-primary-on); border: none; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all 0.2s var(--easing); } .yxjs-lead-form button:hover:not(:disabled) { background: var(--c-primary-strong); transform: translateY(-1px); } .yxjs-lead-form button:disabled { opacity: 0.7; cursor: not-allowed; } /* ---------- 响应式补丁 ---------- */ @media (max-width: 980px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } .article-layout { grid-template-columns: 1fr; } .article-sidebar { position: static; } .solutions-tabs { grid-template-columns: 1fr; } .solutions-tabs .solution-nav { flex-direction: row; flex-wrap: wrap; } .contact-page .contact-grid { grid-template-columns: 1fr; gap: 24px; } .case-meta { grid-template-columns: repeat(2, 1fr); } .generic-list-item { grid-template-columns: 140px 1fr; } } @media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } .case-meta { grid-template-columns: repeat(2, 1fr); padding: 16px; } .case-meta .metric .value { font-size: 22px; } .page-404-num { font-size: 80px; } .case-extra-cta-box { padding: 32px 20px; } .case-extra-cta-box h2 { font-size: 22px; } .generic-list-item { grid-template-columns: 1fr; } }