/* ========================================================================== 两条方案线的差异化主题 -------------------------------------------------------------------------- 基准风格（版式栅格 / 组件结构 / 动效 / 字号 / 间距）全站保持一致，只调三个维度，保证「一眼能分开，但仍属同一套设计语言」： ① 强调色与底色色温 ② 圆角语言（圆角令牌整体缩放） ③ 纹理与编号气质 AI 解决方案 = 决策 · 数据 · 流动 → 青绿冷调 / 大圆角 / 数据网格机器人解决方案 = 执行 · 工业 · 精密 → 橙调暖石墨 / 小圆角 / 工程栅格 + 等宽编号挂载方式：或 ========================================================================== */ /* ========================================================================== AI 解决方案 —— 冷调 · 柔和 · 数据感 ========================================================================== */ body.theme-ai { /* 强调色：青绿（数据 / 智能），次级数据色：冷蓝 */ --accent: #7ce0c8; --accent-hi: #9debd9; --accent-lo: #45bfa0; --accent-rgb: 124, 224, 200; --on-accent: #04121a; /* 强调色变浅，文字翻转为深色保证对比度 */ --data: #8ab4ff; --data-rgb: 138, 180, 255; /* 底色：近黑偏冷 */ --bg: #060910; --bg-alt: #090d15; --surface: #0b1017; --surface-2: #101724; /* 圆角：保持默认的大圆角（柔和 / 软件感） */ --r-md: 14px; --r-lg: 22px; --r-xl: 32px; } /* 数据网格：更密，读起来像数据流矩阵 */ body.theme-ai .page-hero-bg::after { background-size: 48px 48px; } /* 视觉框：点阵叠加，强化"由数据构成"的观感 */ body.theme-ai .visual-frame { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.07), rgba(255, 255, 255, 0.01)); } body.theme-ai .visual-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: radial-gradient(circle, rgba(var(--accent-rgb), 0.5) 1px, transparent 1.5px); background-size: 22px 22px; opacity: 0.32; mask-image: linear-gradient(to bottom right, #000, transparent 68%); -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 68%); } /* 卡片悬停：柔光扩散 */ body.theme-ai .scenario-card:hover, body.theme-ai .advantage-card:hover, body.theme-ai .pain-card:hover { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb), 0.22), 0 0 34px -12px rgba(var(--accent-rgb), 0.45); } /* ========================================================================== 机器人解决方案 —— 暖调 · 硬朗 · 工业感 ========================================================================== */ body.theme-robotics { /* 强调色：橙（能量 / 执行），次级数据色：琥珀 */ --accent: #ff5c39; --accent-hi: #ff7554; --accent-lo: #e0431f; --accent-rgb: 255, 92, 57; --on-accent: #ffffff; --data: #ffb86b; --data-rgb: 255, 184, 107; /* 底色：近黑偏暖的石墨 */ --bg: #090807; --bg-alt: #0c0a08; --surface: #12100d; --surface-2: #191612; /* 圆角：整体收小（硬朗 / 工业感）。--r-sm 与 --r-pill 不动，避免标签变形 */ --r-md: 5px; --r-lg: 7px; --r-xl: 9px; } /* 工程斜线栅格：替掉通用网格，读起来像图纸 / 机加工面 */ body.theme-robotics .page-hero-bg::after { background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 10px ); background-size: auto; } /* 视觉框：硬化描边 + 顶部刻度尺 */ body.theme-robotics .visual-frame { border-color: rgba(var(--accent-rgb), 0.22); background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.05), rgba(255, 255, 255, 0.01)); } body.theme-robotics .visual-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 12px ); background-size: calc(100% - 24px) 5px; background-repeat: no-repeat; background-position: 12px 12px; opacity: 0.55; } /* 编号与标签改用等宽字体：工业编号 / 仪表读数感 */ body.theme-robotics .eyebrow, body.theme-robotics .crumbs, body.theme-robotics .pain-index, body.theme-robotics .scenario-num, body.theme-robotics .delivery-n, body.theme-robotics .arch-tag, body.theme-robotics .metric-value { font-family: var(--font-mono); letter-spacing: 0.06em; } /* 卡片悬停：硬边位移，不做柔光 */ body.theme-robotics .scenario-card:hover, body.theme-robotics .advantage-card:hover, body.theme-robotics .pain-card:hover { box-shadow: 6px 6px 0 -2px rgba(var(--accent-rgb), 0.35), var(--shadow-md); } /* ========================================================================== 首页两张方案线卡片：提前预告各自的主题色，降低跳转后的割裂感（只作用于首页卡片内部，不影响全站） ========================================================================== */ .line-card { --card-accent: var(--accent); --card-accent-rgb: var(--accent-rgb); } .line-card.line-ai { --card-accent: #7ce0c8; --card-accent-rgb: 124, 224, 200; --accent: #7ce0c8; --accent-rgb: 124, 224, 200; } .line-card.line-robotics { --card-accent: #ff5c39; --card-accent-rgb: 255, 92, 57; --accent: #ff5c39; --accent-rgb: 255, 92, 57; } /* 卡片顶部一条 3px 色带，作为方案线的视觉身份 */ .line-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, rgba(var(--card-accent-rgb), 0.25), var(--card-accent)); pointer-events: none; }