/* ============================================================ DTok · 官网重设计预览 · 共享样式设计语言:墨渊深底(#04090f)+ 统一深色面板 + 发丝描边, 玻璃只出现在悬浮层,汐青 --brand 为全站唯一 accent。深底之上有三处「亮卡器物」(hero 拓扑卡 / 控制台窗口 / 方案页图纸), 刻意做明暗对撞,它们共用下方 --card-* 一套独立色板。 ── 主题结构(单一真相)─────────────────────────────── :root = 深色主题(默认,唯一真相)+ 非颜色令牌 + 亮卡色板 [data-theme="light"] = 浅色主题(备用,给加该属性即可整站切换) 组件规则一律只引用变量,不写死颜色 —— 换品牌只改 --brand 三件套, 换亮卡观感只改 --card-* 一组。 ============================================================ */ :root { /* ══ 主题色:深色(默认)══════════════════════════════ */ /* ── 中性色骨架 ── */ --bg: #04090f; --surface: #0b1622; --hover: #10202e; --text: #e9f3f7; --text-body: rgba(233, 243, 247, 0.80); --text-2: rgba(233, 243, 247, 0.62); --text-3: rgba(233, 243, 247, 0.54); /* v2: 提对比,墨渊底上过 WCAG AA 边缘 */ --text-4: rgba(233, 243, 247, 0.42); --faint: rgba(233, 243, 247, 0.20); --hairline: rgba(233, 243, 247, 0.10); --hairline-solid: #14243554; /* 面板间发丝网格填充 */ --track: rgba(233, 243, 247, 0.12); /* ── 品牌色 = 全站唯一 accent(换品牌只改这三件套 + --grad-cta)── */ --brand: #17c3af; --brand-deep: #0fae9b; --brand-tint: rgba(23, 195, 175, 0.14); --brand-tint-dot: rgba(23, 195, 175, 0.5); /* 跑马灯分隔点 */ --brand-glow: #7fe7ff; /* 品牌高光(标签/表头强调),深底上比 --brand 更亮 */ --accent: var(--brand); /* ── 语义色(只做状态语义,不做装饰) ── */ --live: #30d158; --live-ring: rgba(48, 209, 88, 0.5); --heat: #ff8a3d; --heat-bg: rgba(255, 138, 61, 0.14); /* ── 中性叠色(chips / 悬停 / 头像底,随主题翻转明暗) ── */ --tint-soft: rgba(233, 243, 247, 0.06); --tint-mid: rgba(233, 243, 247, 0.07); /* ── 玻璃层(仅导航与悬浮菜单) ── */ --glass: rgba(5, 11, 18, 0.72); --glass-mobile: rgba(5, 11, 18, 0.85); --glass-solid: #081019; /* prefers-reduced-transparency 回退 */ --glass-flat: #04090f; /* prefers-contrast: more 回退 */ --glass-border: rgba(233, 243, 247, 0.4); /* ── 面板描边(深色靠描边界定边界,浅色靠阴影 → 浅主题置空) ── */ --panel-stroke: var(--hairline); /* ── 深色嵌板(cap-stat 证据数字底):随主题翻转 ── */ --fig-bg: #081019; /* ── 按钮 ── */ --btn-primary-ink: #03110f; /* 亮青底 → 深墨字 */ --btn-ghost-bg: rgba(233, 243, 247, 0.05); --btn-ghost-border: rgba(233, 243, 247, 0.18); --btn-ghost-shadow: none; --btn-ghost-hover: rgba(233, 243, 247, 0.10); --btn-light-bg: linear-gradient(120deg, #17c3af, #3b82d8); /* CTA 色块上的主按钮 */ --btn-light-ink: #03110f; --btn-light-glow: 0 6px 28px rgba(23, 195, 175, 0.4); --btn-glass-flat: rgba(233, 243, 247, 0.12); /* 降透明度回退 */ --btn-glass-flat-ink: var(--text); --btn-glass-bg: rgba(233, 243, 247, 0.10); --btn-glass-border: rgba(233, 243, 247, 0.20); --btn-glass-ink: var(--text); --btn-glass-hover: rgba(233, 243, 247, 0.16); /* ── 尾部 CTA 色块 ── */ --grad-cta: linear-gradient(120deg, #17c3af 0%, #3b82d8 100%); --cta-bg: linear-gradient(150deg, #0a1622, #0c1d2c); --cta-ink: var(--text); --cta-ink-2: var(--text-2); --cta-glow: radial-gradient(ellipse 60% 72% at 50% 122%, rgba(23, 195, 175, 0.22), transparent 62%); --cta-orb-a: rgba(23, 195, 175, 0.20); --cta-orb-b: rgba(59, 130, 216, 0.28); /* ── 阴影(两层:贴地 + 弥散) ── */ --sh-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.45); --sh-panel: 0 1px 3px rgba(0, 0, 0, 0.5), 0 18px 46px rgba(0, 0, 0, 0.5); --sh-lift: 0 18px 44px rgba(0, 0, 0, 0.6); --sh-cta: 0 24px 60px rgba(0, 0, 0, 0.55); --sh-bright: 0 1px 3px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5); /* 亮卡专用 */ --sh-bright-hover: 0 1px 3px rgba(0, 0, 0, 0.4), 0 32px 80px rgba(0, 0, 0, 0.6); --sh-nav: 0 1px 12px rgba(0, 0, 0, 0.55); /* 导航滚动后的贴地阴影 */ /* ── 品牌开场 hero 辉光(与 --cta-orb-* 同构) ── */ --hero-orb-a: rgba(23, 195, 175, 0.16); --hero-orb-b: rgba(59, 130, 216, 0.14); --hero-title-grad: linear-gradient(178deg, #fdfeff 56%, #9fd4e6 98%); /* ── 粒子涡旋色系(由 index.html 的 canvas 脚本读取)── */ --vx-1: #15c8b2; /* 汐青 · 内圈 */ --vx-2: #2aa8cf; /* 洋青 · 中圈 */ --vx-3: #3b7fe0; /* 湾蓝 · 外圈 */ --vx-spark: #a8eeff; /* 浪光高光粒子 */ /* ══ 亮卡色板 ═══════════════════════════════════════ 深底上的三处浅色器物共用。不随主题翻转 —— 它们在浅色主题下依然是「一张纸」,只是与地面的对比关系变弱。 ─────────────────────────────────────────────────── */ --card-bg: #ffffff; /* 器物主体底(控制台窗口) */ --card-bg-sunken: #f4f7f8; /* 下沉底(拓扑卡) */ --card-bg-rail: #f7f8f8; /* 侧栏 */ --card-bg-bar: #f5f6f6; /* 浏览器栏 */ --card-bg-paper: #fbfdfd; /* 图纸画布(方案页架构图) */ --card-bg-track: #e9efeb; /* 进度条槽 */ --card-ink: #1d1d1f; /* 主文字 */ --card-ink-2: #37414a; /* 次文字 */ --card-muted: #6b7883; /* 弱文字 */ --card-muted-2: #8b97a1; /* 更弱(脚注) */ --card-muted-3: #a2a6aa; /* 最弱(停用态) */ --card-line: #e6e7e8; /* 分隔线 */ --card-line-2: #d5dde3; /* 器物内描边 */ --card-line-3: #eef0f0; /* 最淡的行分隔 */ --card-accent: #0e8577; /* 亮卡 accent:与品牌汐青同色相,只差明度 */ --card-accent-ink: #0a6357; /* accent 底上的深字 */ --card-accent-soft: #dff2ef; /* accent 浅底 */ --card-accent-wash: rgba(14, 133, 119, 0.10); --card-accent-lite: #4ecdbc; /* 深色节点上的 accent 字 */ --card-risk: #d64550; /* 风险/反例(方案页对比图) */ --card-risk-ink: #b03540; --card-risk-soft: #fdecec; --card-risk-tint: #fbe0e0; --card-warn: #d97a1e; /* 告警(通道波动) */ --card-cool: #3b82d8; /* 第二数据流(湾蓝) */ --card-cool-ink: #2a5da0; --card-cool-sub: #5b83b8; --card-cool-soft: #f0f6fd; --card-cool-tint: #dcebfb; --card-accent-lite2: #f2faf8; /* 极浅青底(通道卡面) */ --card-accent-sub: #3f9285; /* 青色副标 */ --card-neutral: #eef2f5; /* 中性胶囊底 */ --card-standby: #c3ced6; /* 待命虚线 */ --card-track: #d7e8e4; /* 进度条轨道 */ --card-node: #14232e; /* 图中深色节点(网关) */ --card-ok: #07823a; /* 启用态 */ --card-ok-ring: rgba(7, 130, 58, 0.45); --card-dot-r: #ed8f87; /* 浏览器窗口交通灯 */ --card-dot-y: #e6c979; --card-dot-g: #87c991; /* ══ 代码卡色板(终端器物,两个主题都不翻转)══════════════ */ --code-bg: #1d1d1f; --code-bar: rgba(255, 255, 255, 0.04); --code-line: rgba(255, 255, 255, 0.08); --code-ink: #d1d1d6; --code-ink-hi: #f5f5f7; --code-muted: #86868b; --code-str: #8ad0c2; --code-hl: #ff9f0a; --code-accent: #4ecdbc; /* 终端底上的激活态,不随品牌翻转 */ /* ══ 非颜色令牌(两个主题共用,只此一份)═══════════════ */ /* ── 字体 ── */ --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ── 圆角(语义分级,不发明中间值) ── */ --r-pill: 999px; --r-chip: 6px; --r-thumb: 12px; --r-card: 18px; --r-panel: 22px; --r-hero: 26px; /* ── 布局 ── */ --max-grid: 1160px; --pad-x: 22px; --nav-h: 56px; --sec-gap: clamp(56px, 9vw, 104px); /* v2: 放大章节留白,优雅感靠呼吸 */ /* ── 动效 ── */ --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); } /* ══════════════════════════════════════════════════════════ 浅色主题(备用)· 给加 data-theme="light" 即整站切换只覆盖颜色令牌,布局/圆角/动效继承 :root。亮卡色板不覆盖 —— 亮卡在浅色地面上依然成立。 ══════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f5f5f7; --surface: #ffffff; --hover: #fbfbfd; --text: #1d1d1f; --text-body: #424245; --text-2: #6e6e73; --text-3: #6e6e73; /* 浅底上收紧一档,保证 12–13px 细签过 AA */ --text-4: #86868b; --faint: #d2d2d7; --hairline: rgba(0, 0, 0, 0.07); --hairline-solid: #ececee; --track: #e8e8ed; --brand: #0e6b5e; --brand-deep: #0a5248; --brand-tint: rgba(14, 107, 94, 0.08); --brand-tint-dot: rgba(14, 107, 94, 0.5); --brand-glow: #0a5248; --accent: var(--brand); --live: #1a9c3e; --live-ring: rgba(26, 156, 62, 0.5); --heat: #c2410c; --heat-bg: rgba(194, 65, 12, 0.10); --tint-soft: rgba(0, 0, 0, 0.05); --tint-mid: rgba(0, 0, 0, 0.05); --glass: rgba(245, 245, 247, 0.72); --glass-mobile: rgba(245, 245, 247, 0.72); --glass-solid: #ffffff; --glass-flat: #ffffff; --glass-border: rgba(0, 0, 0, 0.35); --panel-stroke: transparent; /* 浅色靠阴影界定边界,不要描边 */ --fig-bg: #eef2f5; --btn-primary-ink: #ffffff; --btn-ghost-bg: rgba(255, 255, 255, 0.8); --btn-ghost-border: rgba(0, 0, 0, 0.08); --btn-ghost-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); --btn-ghost-hover: #ffffff; --btn-light-bg: #ffffff; --btn-light-ink: #0a5248; --btn-light-glow: 0 6px 28px rgba(0, 0, 0, 0.12); --btn-glass-flat: rgba(255, 255, 255, 0.95); --btn-glass-flat-ink: #1d1d1f; --btn-glass-bg: rgba(255, 255, 255, 0.16); --btn-glass-border: rgba(255, 255, 255, 0.22); --btn-glass-ink: #ffffff; --btn-glass-hover: rgba(255, 255, 255, 0.24); --grad-cta: linear-gradient(135deg, #11806f 0%, #0a5248 100%); --cta-bg: var(--grad-cta); --cta-ink: #ffffff; --cta-ink-2: rgba(255, 255, 255, 0.82); --cta-glow: none; --cta-orb-a: rgba(255, 255, 255, 0.18); --cta-orb-b: rgba(126, 200, 185, 0.45); --sh-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05); --sh-panel: 0 1px 3px rgba(0, 0, 0, 0.05), 0 14px 40px rgba(0, 0, 0, 0.05); --sh-lift: 0 12px 32px rgba(0, 0, 0, 0.1); --sh-cta: 0 20px 54px rgba(14, 107, 94, 0.24); --sh-bright: var(--sh-panel); --sh-bright-hover: var(--sh-lift); --sh-nav: 0 1px 12px rgba(0, 0, 0, 0.04); --hero-orb-a: rgba(14, 107, 94, 0.10); --hero-orb-b: rgba(59, 130, 216, 0.08); --hero-title-grad: linear-gradient(178deg, #1d1d1f 56%, #0e6b5e 98%); --vx-1: #0e8577; --vx-2: #2a7f9e; --vx-3: #2c5fa8; --vx-spark: #6fbfd6; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-optical-sizing: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.7; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } img, svg { display: block; max-width: 100%; } /* 示意 SVG 均无 width/height 属性,固有宽 300px 会撑爆窄屏网格轨道——统一按容器宽缩放 */ .topo-svg, .dg-body svg { width: 100%; height: auto; } .wrap { max-width: var(--max-grid); margin: 0 auto; padding: 0 var(--pad-x); } /* ---------- 导航(玻璃只在这里:悬浮于滚动内容之上) ---------- */ .site-nav { position: sticky; top: 0; z-index: 50; background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; /* scroll-edge:置顶时无线 */ transition: border-color 0.3s, box-shadow 0.3s; } .site-nav.scrolled { border-bottom-color: var(--hairline); box-shadow: var(--sh-nav); } .nav-inner { max-width: var(--max-grid); margin: 0 auto; padding: 0 var(--pad-x); height: var(--nav-h); display: flex; align-items: center; gap: 28px; } .brand-mark { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; } .brand-mark:hover { text-decoration: none; } .brand-mark .zh { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .brand-mark .en { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--text-3); } .nav-links { display: flex; gap: 24px; } .nav-links a { color: var(--text-body); font-size: 14px; padding: 4px 0; } .nav-links a:hover { color: var(--text); text-decoration: none; } .nav-links a.on { color: var(--text); font-weight: 600; } .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; } .status-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-2); background: var(--tint-mid); border-radius: var(--r-pill); padding: 5px 12px; } .status-chip:hover { text-decoration: none; color: var(--text); } .status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); --ring: var(--live-ring); animation: pulse-dot 2.2s infinite; } /* 脉冲环由 --ring 驱动:同一个 keyframe 服务两套色板(地面 --live / 亮卡 --card-ok) */ @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 var(--ring); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ---------- 按钮(胶囊,按下即时反馈) ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); height: 36px; padding: 0 18px; font-family: var(--font); font-size: 14px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: transform 0.1s ease-out, background 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart); } .btn::after { /* 视觉 36px,命中区扩到 ≥44px */ content: ''; position: absolute; inset: -4px 0; } .btn:hover { text-decoration: none; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); color: var(--btn-primary-ink); } .btn-primary:hover { background: var(--brand-deep); } .btn-ghost { background: var(--btn-ghost-bg); border: 1px solid var(--btn-ghost-border); box-shadow: var(--btn-ghost-shadow); color: var(--text); font-weight: 550; } .btn-ghost:hover { background: var(--btn-ghost-hover); } .btn-light { background: var(--btn-light-bg); color: var(--btn-light-ink); font-weight: 700; } .btn-light:hover { box-shadow: var(--btn-light-glow); } .btn-glass { /* 仅用于彩色 CTA 之上(玻璃盖在色块上) */ background: var(--btn-glass-bg); border: 1px solid var(--btn-glass-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--btn-glass-ink); font-weight: 550; } .btn-glass:hover { background: var(--btn-glass-hover); } .btn-lg { height: 48px; padding: 0 26px; font-size: 15px; } .nav-login { color: var(--text-body); font-size: 14px; } .nav-login:hover { color: var(--text); text-decoration: none; } .nav-burger { display: none; background: var(--tint-mid); border: none; border-radius: var(--r-pill); width: 44px; height: 44px; font-size: 17px; color: var(--text); cursor: pointer; transition: transform 0.1s ease-out; } .nav-burger:active { transform: scale(0.94); } /* 移动端菜单:被召唤的悬浮层 → 玻璃材质化(blur+位移+透明度同步) */ .nav-mobile { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: 8px var(--pad-x) 18px; background: var(--glass-mobile); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); transform-origin: top center; opacity: 0; transform: translateY(-8px) scale(0.99); visibility: hidden; pointer-events: none; transition: opacity 0.28s var(--ease-out-quart), transform 0.28s var(--ease-out-quart), visibility 0s 0.28s; } .nav-mobile.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 0.4s var(--ease-spring), transform 0.4s var(--ease-spring), visibility 0s; } .nav-mobile a { padding: 12px 0; color: var(--text-body); font-size: 16px; min-height: 44px; display: flex; align-items: center; } .nav-mobile a + a { border-top: 1px solid var(--hairline); } .nav-mobile a:hover { color: var(--text); text-decoration: none; } @media (max-width: 900px) { .nav-links, .nav-cta .nav-login, .nav-cta .status-chip { display: none; } .nav-burger { display: block; } } @media (min-width: 901px) { .nav-mobile { display: none; } } /* 无障碍:三个独立信号 */ @media (prefers-reduced-motion: reduce) { .nav-mobile { transition: opacity 200ms ease; transform: none !important; } .status-chip .dot, .topo-head .live i { animation: none; } .flow-dot, .dg-dot, .dg-anim { display: none; } .btn:active, .nav-burger:active { transform: none; } } @media (prefers-reduced-transparency: reduce) { .site-nav, .nav-mobile, .sol-nav { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } .btn-glass, .bh-ghost { background: var(--btn-glass-flat); color: var(--btn-glass-flat-ink); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { .site-nav, .nav-mobile, .sol-nav { background: var(--glass-flat); border-bottom: 1px solid var(--glass-border); } } /* ---------- 章节骨架 ---------- */ .section { padding: var(--sec-gap) 0; } .sec-no { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--text-3); margin-bottom: 14px; } .sec-title { font-weight: 700; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.2; letter-spacing: -0.02em; max-width: 760px; } .sec-sub { margin-top: 14px; color: var(--text-2); font-size: 16px; line-height: 1.7; max-width: 640px; } .sec-head { margin-bottom: clamp(36px, 5vw, 56px); } .sec-head.center { text-align: center; } .sec-head.center .sec-title, .sec-head.center .sec-sub { margin-left: auto; margin-right: auto; } .sec-head.center .sec-no { justify-content: center; } /* ---------- 首页 · Hero ---------- */ .hero { padding: clamp(48px, 8vw, 88px) 0 var(--sec-gap); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; } .hero-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--text-3); margin-bottom: 18px; } .hero h1 { font-weight: 700; font-size: clamp(32px, 5.2vw, 52px); line-height: 1.12; letter-spacing: -0.025em; } .hero h1 em { font-style: normal; color: var(--accent); } .hero-lead { margin-top: 20px; color: var(--text-2); font-size: 17px; line-height: 1.75; max-width: 480px; } .hero-lead b { color: var(--text-body); } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-note { margin-top: 14px; font-size: 13px; color: var(--text-4); } .hero-stats { display: flex; gap: 36px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); } .hero-stat .num { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); } .hero-stat .num small { font-size: 14px; font-weight: 500; color: var(--text-3); } .hero-stat .lbl { margin-top: 2px; font-size: 13px; color: var(--text-3); } /* Hero 右侧 · 路由拓扑图(亮卡器物之一:深底上的一张纸,明暗对撞更聚焦) 内部一律走 --card-* 色板,不随主题翻转 */ .topo-card { background: var(--card-bg-sunken); color: var(--card-ink); border-radius: var(--r-hero); box-shadow: var(--sh-bright); overflow: hidden; } .topo-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 1px solid var(--card-line); font-family: var(--mono); font-size: 12px; color: var(--card-muted); } .topo-head .live { display: inline-flex; align-items: center; gap: 6px; color: var(--card-ok); } .topo-head .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--card-ok); --ring: var(--card-ok-ring); animation: pulse-dot 2.2s infinite; } .topo-body { padding: 10px 6px 4px; } .topo-foot { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 20px 14px; border-top: 1px solid var(--card-line); font-size: 12.5px; color: var(--card-muted); } .topo-foot .k { display: inline-flex; align-items: center; gap: 6px; } .topo-foot .swatch { width: 14px; height: 3px; border-radius: 2px; background: var(--card-accent); } .topo-foot .swatch.backup { background: repeating-linear-gradient( 90deg, var(--card-line-2) 0 3px, transparent 3px 6px); } /* 拓扑 SVG:节点/连线全部由这里驱动,HTML 里不写死颜色 */ .topo-svg { color: var(--card-accent); } /* currentColor = 主链路 */ .topo-svg text { font-family: var(--mono); } .topo-svg .n-face { fill: var(--card-bg); stroke: var(--card-line-2); } .topo-svg .n-gate { fill: var(--card-ink); } .topo-svg .n-live { fill: var(--card-accent-soft); stroke: var(--card-accent); } .topo-svg .t-gate { fill: var(--card-bg); } .topo-svg .t-gate-sub { fill: var(--card-accent-lite); } .topo-svg .t-ink { fill: var(--card-ink-2); } .topo-svg .t-muted { fill: var(--card-muted); } .topo-svg .t-live { fill: var(--card-accent-ink); } .topo-svg .t-live-sub { fill: var(--card-accent); } .topo-svg .ln-live { stroke: var(--card-accent); } .topo-svg .ln-idle { stroke: var(--card-line-2); } .flow-dot { fill: var(--card-accent); } .flow-dot.alt { fill: var(--heat); } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero-stats { flex-wrap: wrap; gap: 24px; } } /* 面板边界:深色主题靠发丝描边,浅色主题靠阴影(--panel-stroke 置 transparent) */ .metric-band, .uptime-strip, .model-panel, .cap-card, .step-list, .sol-card, .code-card, .benefit-row, .compare-card, .promise-grid, .team-grid, .contact-card { border: 1px solid var(--panel-stroke); } /* ---------- 运行数据带(一块面板 + 发丝网格,拒绝碎片卡) ---------- */ .metric-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline-solid); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; } .metric { background: var(--surface); padding: 28px 26px 24px; } .metric .num { font-size: 38px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); } .metric .num small { font-size: 16px; color: var(--text-3); font-weight: 500; letter-spacing: 0; } .metric .lbl { margin-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--text-body); } .metric .note { margin-top: 3px; font-size: 12.5px; color: var(--text-3); } .metric-caption { margin-top: 14px; font-size: 12.5px; color: var(--text-4); } @media (max-width: 900px) { .metric-band { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .metric-band { grid-template-columns: 1fr; } } /* 30 天可用率条 */ .uptime-strip { margin-top: 22px; background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh-panel); padding: 22px 26px 20px; } .uptime-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .uptime-head .t { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; } .uptime-head .v { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-3); } .uptime-bars { display: flex; justify-content: space-between; align-items: center; height: 22px; padding: 2px 1px; } .uptime-bars i { width: 4px; height: 100%; border-radius: 999px; background: var(--live); opacity: 0.45; transition: opacity 0.2s, transform 0.2s; } .uptime-bars i:hover { opacity: 0.95; transform: scaleY(1.18); } .uptime-bars i.warn { background: var(--heat); opacity: 0.9; } .uptime-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); } .uptime-legend .k { display: inline-flex; align-items: center; gap: 6px; } .uptime-legend .sq { width: 4px; height: 12px; border-radius: 999px; background: var(--live); opacity: 0.5; } .uptime-legend .sq.warn { background: var(--heat); opacity: 0.9; } /* ---------- 模型矩阵(统一面板 + 发丝行) ---------- */ .model-panel { background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; text-align: left; } .model-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px clamp(18px, 3vw, 26px); } .model-row + .model-row { border-top: 1px solid var(--hairline); } .model-row h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; } .model-row h3 .tag { font-size: 11px; font-weight: 550; letter-spacing: 0.06em; color: var(--brand-glow); background: var(--brand-tint); border-radius: var(--r-pill); padding: 3px 10px; } .model-row .desc { margin-top: 5px; font-size: 13.5px; color: var(--text-2); } .model-chips { display: flex; flex-wrap: wrap; gap: 8px; } .model-chips span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--text-body); background: var(--tint-soft); border-radius: var(--r-pill); padding: 5px 12px; } .model-chips i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); } .models-foot { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text-2); } @media (max-width: 800px) { .model-row { grid-template-columns: 1fr; gap: 14px; } } /* ---------- 核心能力(独立对象 + 各带证据数字 → 卡片网格) ---------- */ .cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cap-card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; align-items: center; } .cap-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .cap-card .cap-code { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 10px; } .cap-card p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--text-2); } .cap-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .cap-tags span { font-size: 11.5px; color: var(--text-2); background: var(--tint-soft); border-radius: var(--r-pill); padding: 3px 10px; } /* v2.1: 图示换证据数字 —— 与 metric-band / hero-stats 同一套大数字语言, 深色嵌板保留(维持卡片左右两段的密度对比) */ .cap-stat { background: var(--fig-bg); border: 1px solid var(--panel-stroke); border-radius: var(--r-thumb); padding: 22px 20px; text-align: center; } .cap-stat .num { font-size: 40px; font-weight: 650; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--brand); } .cap-stat .num small { font-size: 17px; font-weight: 550; color: var(--text-3); letter-spacing: 0; } .cap-stat .lbl { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-body); } .cap-stat .note { margin-top: 3px; font-size: 11.5px; color: var(--text-3); } @media (max-width: 960px) { .cap-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .cap-card { grid-template-columns: 1fr; } .cap-stat { justify-self: stretch; } } /* ---------- 接入三步(左:统一面板;右:代码卡) ---------- */ .steps-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; } .step-list { background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; } .step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 20px clamp(18px, 3vw, 24px); } .step + .step { border-top: 1px solid var(--hairline); } .step .no { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--faint); line-height: 1.2; } .step h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; } .step p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); } /* 代码卡:始终是一块「终端」深色器物,两个主题下都不翻转 */ .code-card { background: var(--code-bg); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--sh-panel); } .code-tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--code-line); background: var(--code-bar); } .code-tabs button { font-family: var(--mono); font-size: 12.5px; color: var(--code-muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px 10px; cursor: pointer; transition: color 0.2s var(--ease-out-quart); } .code-tabs button:active { transform: scale(0.97); } .code-tabs button.on { color: var(--code-ink-hi); border-bottom-color: var(--code-accent); } .code-card pre { padding: 22px 24px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.75; color: var(--code-ink); } .code-card .c { color: var(--code-muted); } .code-card .s { color: var(--code-str); } .code-card .k { color: var(--code-ink-hi); } .code-card .hl { color: var(--code-hl); } @media (max-width: 960px) { .steps-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- 方案速览(独立可点对象 → 卡片 + 悬停浮起) ---------- */ .sol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* v2.1: 四卡一字排开 */ gap: 14px; } .sol-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 24px 22px 20px; color: inherit; transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart); } .sol-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sh-lift); } .sol-card .sol-code { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .sol-card .sol-code .core { letter-spacing: 0.04em; color: var(--brand-glow); background: var(--brand-tint); border-radius: var(--r-pill); padding: 2px 9px; } .sol-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .sol-card p { margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); } .sol-card .aud { margin-top: auto; /* 受众+入口贴底,四卡基线对齐 */ padding-top: 14px; font-size: 12px; color: var(--text-4); } .sol-card .go { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent); } @media (max-width: 1080px) { .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .sol-grid { grid-template-columns: minmax(0, 1fr); } } /* 服务型方案横幅(4 产品卡之下的第 5 项,视觉明确区分于产品卡) */ .sol-banner { margin-top: 14px; display: flex; align-items: center; gap: 24px; background: var(--surface); border: 1px solid var(--panel-stroke); border-left: 3px solid var(--brand); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 24px 26px; color: inherit; transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart); } .sol-banner:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sh-lift); } .sol-banner .sb-body { flex: 1; min-width: 0; } .sol-banner .sol-code { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .sol-banner .sol-code .core { letter-spacing: 0.04em; color: var(--brand-glow); background: var(--brand-tint); border-radius: var(--r-pill); padding: 2px 9px; } .sol-banner h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .sol-banner p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); } .sol-banner .aud { margin-top: 10px; font-size: 12px; color: var(--text-4); } .sol-banner .go { flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--accent); } @media (max-width: 560px) { .sol-banner { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ---------- 尾部 CTA(全站唯一色块:玻璃按钮 + 光斑折射) ---------- */ .cta-band { position: relative; overflow: hidden; background: var(--cta-bg); border: 1px solid var(--panel-stroke); border-radius: var(--r-hero); box-shadow: var(--sh-cta); padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px); color: var(--cta-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; } .cta-band::after { /* 底部辉光(浅色主题下 --cta-glow: none) */ content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--cta-glow); } .cta-band .orb { position: absolute; border-radius: 50%; pointer-events: none; } .cta-band .orb.a { width: 280px; height: 280px; background: var(--cta-orb-a); filter: blur(46px); top: -90px; right: -50px; } .cta-band .orb.b { width: 220px; height: 220px; background: var(--cta-orb-b); filter: blur(50px); bottom: -100px; left: 14%; } .cta-band > div { position: relative; z-index: 1; } .cta-band h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .cta-band p { margin-top: 10px; color: var(--cta-ink-2); font-size: 15px; line-height: 1.65; max-width: 480px; } .cta-band .btns { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; } /* ---------- 页脚(回到地面,发丝线分隔) ---------- */ .site-footer { border-top: 1px solid var(--hairline); padding: clamp(40px, 6vw, 56px) 0 28px; margin-top: var(--sec-gap); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .foot-brand p { margin-top: 14px; font-size: 13.5px; line-height: 1.7; color: var(--text-3); max-width: 300px; } .foot-grid h5 { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 14px; } .foot-grid nav { display: flex; flex-direction: column; gap: 10px; } .foot-grid nav a { color: var(--text-3); font-size: 13.5px; } .foot-grid nav a:hover { color: var(--text); text-decoration: none; } .foot-bot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12.5px; color: var(--text-4); } @media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } } /* ============================================================ 解决方案页 ============================================================ */ .page-hero { padding: clamp(48px, 8vw, 80px) 0 clamp(28px, 4vw, 44px); } .page-hero .sec-title { max-width: 820px; } .page-hero h1.sec-title { font-size: clamp(28px, 4.4vw, 44px); letter-spacing: -0.025em; line-height: 1.15; } .sol-nav { position: sticky; top: var(--nav-h); z-index: 30; background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); } .sol-nav-inner { max-width: var(--max-grid); margin: 0 auto; padding: 0 var(--pad-x); display: flex; gap: 8px; overflow-x: auto; } .sol-nav-inner a { flex-shrink: 0; font-size: 13.5px; color: var(--text-2); padding: 13px 14px; min-height: 44px; display: flex; align-items: center; border-bottom: 2px solid transparent; transition: color 0.2s var(--ease-out-quart); } .sol-nav-inner a:hover { color: var(--text); text-decoration: none; } .sol-nav-inner a.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } .sol-section { padding: var(--sec-gap) 0; scroll-margin-top: 120px; } .js-tabs .sol-section { display: none; } .js-tabs .sol-section.is-active { display: block; animation: sol-panel-in 0.34s var(--ease-out-quart); } @keyframes sol-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js-tabs .sol-section.is-active { animation: none; } } .sol-head { max-width: 720px; margin-bottom: clamp(24px, 4vw, 40px); } .sol-head .sec-sub { line-height: 1.85; } .sol-head .pain { margin-top: 16px; padding: 14px 18px; background: var(--tint-soft); border-radius: var(--r-thumb); font-size: 14px; line-height: 1.7; color: var(--text-2); } .sol-head .pain b { color: var(--text); font-weight: 600; } .diagram-card { background: var(--surface); border: 1px solid var(--panel-stroke); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; } .diagram-card .dg-head { padding: 13px 20px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 12px; color: var(--text-3); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* 架构图为浅色「图纸」(亮卡器物之三),外围衬深底 */ .diagram-card .dg-body { padding: 18px 10px 8px; background: var(--fig-bg); } .diagram-card .dg-body svg text { font-family: var(--mono); } .diagram-card .dg-note { padding: 12px 20px 16px; font-size: 13px; color: var(--text-3); border-top: 1px solid var(--hairline); } /* 架构图内所有色值统一走 --card-* 图纸色板 */ .dg-body svg { color: var(--card-accent); } .dg-paper { fill: var(--card-bg-paper); stroke: var(--card-line-2); } .dg-body .n-face { fill: var(--card-bg); stroke: var(--card-line-2); } .dg-body .n-paper { fill: var(--card-bg); } /* 只管底色,描边由 ln-* 决定 */ .dg-body .n-gate { fill: var(--card-node); } .dg-body .n-safe { fill: var(--card-accent-soft); stroke: var(--card-accent); } .dg-body .n-risk { fill: var(--card-risk-soft); stroke: var(--card-risk); } .dg-body .n-risk-tint { fill: var(--card-risk-tint); stroke: var(--card-risk); } .dg-body .t-gate { fill: var(--card-bg); } .dg-body .t-gate-sub { fill: var(--card-accent-lite); } .dg-body .t-ink { fill: var(--card-ink-2); } .dg-body .t-muted { fill: var(--card-muted); } .dg-body .t-dim { fill: var(--card-muted-2); } .dg-body .t-safe { fill: var(--card-accent-ink); } .dg-body .t-risk { fill: var(--card-risk-ink); } .dg-body .t-risk-2 { fill: var(--card-risk); } .dg-body .ln-safe { stroke: var(--card-accent); } .dg-body .ln-risk { stroke: var(--card-risk); } .dg-body .ln-cool { stroke: var(--card-cool); } .dg-body .ln-warn { stroke: var(--card-warn); } .dg-body .ln-idle { stroke: var(--card-line-2); } .dg-body .ln-ctrl { stroke: var(--card-muted-2); } .dg-body .ln-standby { stroke: var(--card-standby); } .dg-body .ar-risk { fill: var(--card-risk); } .dg-body .ar-safe { fill: var(--card-accent); } .dg-body .ar-cool { fill: var(--card-cool); } .dg-body .grid-dot { fill: var(--card-accent); } /* 实心徽标 / 进度条 / 色点 */ .dg-body .n-solid-safe { fill: var(--card-accent); } .dg-body .n-solid-cool { fill: var(--card-cool); } .dg-body .n-risk-fill { fill: var(--card-risk); stroke: var(--card-risk); } .dg-body .n-safe-lite { fill: var(--card-accent-lite2); } .dg-body .n-cool-lite { fill: var(--card-cool-soft); } .dg-body .n-cool-tint { fill: var(--card-cool-tint); } .dg-body .n-neutral { fill: var(--card-neutral); } .dg-body .n-track { fill: var(--card-track); } .dg-body .n-warn { fill: var(--card-warn); stroke: var(--card-warn); } .dg-body .t-safe-sub { fill: var(--card-accent-sub); } .dg-body .t-cool { fill: var(--card-cool-ink); } .dg-body .t-cool-sub { fill: var(--card-cool-sub); } .dg-body .t-warn { fill: var(--card-warn); } /* 架构对比图:流转彩点(SMIL animateMotion)与节点处理高亮 */ .dg-dot.risk { fill: var(--card-risk); } .dg-dot.safe { fill: var(--card-accent); } .dg-dot.cool { fill: var(--card-cool); } .dg-dot.ctrl { fill: var(--card-muted-2); } /* 收益三联(一块面板 + 发丝网格) */ .benefit-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline-solid); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; margin-top: 22px; } .benefit { background: var(--surface); padding: 22px 24px; } .benefit h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; } .benefit p { margin-top: 6px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); } @media (max-width: 800px) { .benefit-row { grid-template-columns: 1fr; } } /* 对比表 */ .compare-card { margin-top: 22px; background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; } .compare-scroll { overflow-x: auto; } table.compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 680px; } table.compare th, table.compare td { padding: 14px 20px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; } table.compare tbody tr:last-child td { border-bottom: none; } table.compare thead th { font-size: 12.5px; font-weight: 600; color: var(--text-3); } table.compare thead th.ours { color: var(--brand-glow); } table.compare td.ours { background: var(--brand-tint); } table.compare .dim { color: var(--text-2); font-size: 13.5px; } /* ✕ 承载「不支持」语义,不能用最淡的灰 —— 给它一个可读的语义色 */ .mark-x { color: var(--heat); font-weight: 600; margin-right: 6px; } .mark-ok { color: var(--accent); font-weight: 600; margin-right: 6px; } /* 方案边界说明块：坦诚话的视觉标记(暖色左描边,与 pain 的中性底区分) */ .sol-bound { margin-top: 22px; padding: 16px 20px; background: var(--heat-bg); border-left: 3px solid var(--heat); border-radius: 0 var(--r-thumb) var(--r-thumb) 0; font-size: 14px; line-height: 1.75; color: var(--text-2); } .sol-bound b { color: var(--text); font-weight: 600; } /* 方案客户之声：带人物头像的引言卡。四重区隔信号 —— 左侧品牌描边条 / 「客户之声」眉标 / 品牌色引号 / 单字圆头像(与关于页团队区同语言) */ .sol-voice { margin-top: 22px; background: var(--surface); border: 1px solid var(--panel-stroke); border-left: 3px solid var(--brand); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 22px 26px 18px; } .sol-voice .vc-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--brand-glow); text-transform: uppercase; } .sol-voice blockquote { margin-top: 10px; font-size: 14.5px; line-height: 1.85; color: var(--text-body); } .sol-voice blockquote::before { content: '“'; font-family: Georgia, 'Times New Roman', serif; font-size: 30px; line-height: 0; vertical-align: -0.32em; margin-right: 5px; color: var(--brand); } .sol-voice figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sol-voice .avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-glow); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .sol-voice .who { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; color: var(--text-2); } .sol-voice .who small { font-size: 11.5px; font-weight: 400; color: var(--text-4); } .sol-voice .stat { margin-left: auto; text-align: right; } .sol-voice .stat b { display: block; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--brand); } .sol-voice .stat small { font-size: 11.5px; color: var(--text-3); } @media (max-width: 620px) { .sol-voice .stat { margin-left: 52px; text-align: left; width: 100%; } } /* 方案落地路径行：CTA 上方一行「要花多少力气」 */ .sol-note { margin-top: 24px; font-size: 13px; color: var(--text-3); } .sol-note b { color: var(--text-2); font-weight: 600; } .sol-cta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; } /* ============================================================ 关于页 ============================================================ */ .about-hero { padding: clamp(48px, 8vw, 88px) 0 var(--sec-gap); } .about-hero .sec-title { max-width: 860px; } .about-hero h1.sec-title { font-size: clamp(28px, 4.4vw, 44px); letter-spacing: -0.025em; line-height: 1.15; } .about-hero .lede { margin-top: 22px; font-size: 17px; line-height: 1.85; color: var(--text-2); max-width: 680px; } .about-hero .lede b { color: var(--text); font-weight: 600; } /* 三个承诺(一块面板 + 发丝网格) */ .promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline-solid); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; } .promise { background: var(--surface); padding: 28px 26px; } .promise .no { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-3); } .promise h3 { margin-top: 12px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .promise p { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--text-2); } @media (max-width: 800px) { .promise-grid { grid-template-columns: 1fr; } } /* 团队(一块面板 + 发丝网格) */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline-solid); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; } .member { background: var(--surface); padding: 24px 18px; text-align: center; } .member .avatar { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--tint-soft); color: var(--text-2); font-weight: 600; font-size: 19px; display: flex; align-items: center; justify-content: center; } .member .nm { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; } .member .rl { margin-top: 3px; font-size: 12.5px; color: var(--text-3); } @media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } /* 联系卡 */ .contact-card { background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh-panel); padding: clamp(28px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: center; } .contact-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; } .contact-card p { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.65; } .contact-ways { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .contact-ways .way { display: flex; align-items: center; gap: 10px; color: var(--text-body); } .contact-ways .way .k { font-size: 12px; font-weight: 600; color: var(--text-4); width: 56px; } /* ---------- 跳转正文(键盘用户第一个 Tab 出现) ---------- */ .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--surface); color: var(--text); border-radius: var(--r-chip); padding: 10px 16px; font-size: 14px; font-weight: 600; box-shadow: var(--sh-lift); transition: top 0.2s var(--ease-out-quart); } .skip-link:focus-visible { top: 12px; text-decoration: none; } /* ============================================================ 主题化补充规则颜色一律由上方 :root / [data-theme="light"] 的令牌驱动, 这里只放「需要额外选择器」的少数几条。 ============================================================ */ ::selection { background: var(--brand-tint); } /* ---------- 首页开场 hero(覆盖内联