You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2470 lines
76 KiB
2470 lines
76 KiB
@import "tailwindcss";
|
|
|
|
/* 排除历史构建备份目录：safe-delete 禁止 rm，这些 dist_bak_* 会残留在项目根，
|
|
Tailwind v4 自动扫描会重新吸入其中的旧色 arbitrary class（如 .text-[#FEEAC9]）。
|
|
用 @source not 显式排除，确保新构建不再被污染。 */
|
|
@source not "../../dist_bak-*/**";
|
|
|
|
/* ===== BaskBuddy Design System — Professional Warm Futurism ===== */
|
|
/* Design Philosophy: 简单明了 + 温暖未来主义
|
|
Reference: AxureShop Tech Corp Template + 2025 Tech Website Trends
|
|
Key: Clarity over decoration, warmth through subtlety */
|
|
|
|
:root {
|
|
/* Core Brand Colors — 主题色 #EBEAF6（浅薰衣草），作为全站冷调基调 */
|
|
--brand-white: #FFFFFF;
|
|
--brand-black: #1A1A1A;
|
|
--brand: #EBEAF6; /* 主题色（浅薰衣草）—— 背景/色块/图标底/浅描边 */
|
|
--brand-cream: #EBEAF6; /* 沿用名 = 主题色 */
|
|
--brand-cream-light: #EBEAF6; /* 主题色更浅一档（hover 底）—— 统一为 #EBEAF6 */
|
|
--brand-cream-deep: #EBEAF6; /* 主题色更深一档（描边/边框）—— 统一为 #EBEAF6 */
|
|
|
|
/* ===== 赛道 Identity — 统一为深色强调（#1A1A1A 深暖黑，与底部黑呼应）=====
|
|
原四赛道色（红/蓝/绿/紫）已统一到 --accent（深黑），全站单一强调锚点。
|
|
强色用于：图标、卡片顶条、产品标签描边、强调点缀；浅色由 color-mix 派生。
|
|
主题色 #EBEAF6（浅薰衣草）承担全站冷调基调：底色、图标底、大色块、导航底。 */
|
|
--track-social: var(--accent); /* 社交赛道 — 统一深色强调 */
|
|
--track-career: var(--accent); /* 职场赛道 — 统一深色强调 */
|
|
--track-payment: var(--accent); /* 支付赛道 — 统一深色强调 */
|
|
--track-ai: var(--accent); /* AI 赛道 — 统一深色强调 */
|
|
|
|
/* ===== 规范 / 语义 token（设计系统约束，杜绝游离硬编码）=====
|
|
· accent: 默认强调色，用于 eyebrow 引导线、统一强调锚点
|
|
· focus-ring: 焦点环颜色——高对比（替代近白 cream，白底上曾不可见）
|
|
· radius-*: 圆角尺度，全站唯一来源（sm8/md10/lg14/xl18，克制圆角：大块面锐利、小元素圆润）
|
|
· status-*: 状态色独立于赛道色，自成中性家族，避免「状态=赛道」混淆
|
|
· 赛道色只此一处定义，浅色一律由 color-mix(强色 N%) 派生 */
|
|
--accent: #1A1A1A; /* 结构性强调色：深暖黑（字/描边/按钮底/引导线/焦点环），与底部黑呼应 */
|
|
/* ===== 品牌蓝 — 对比度分级体系（高级配色铁律：强调色按「显示角色」分档，各档过各自 WCAG 阈值）=====
|
|
品牌蓝 #3d5afe 在纯白底上 5.07:1 已过 AA；导航 / CTA 走 deep 档 #2E40D8（白字 7.4:1）更稳：
|
|
· --brand-accent #3d5afe 大字号展示 / 图标 / 装饰线 / eyebrow（≥18px 或图形，3:1 即可）
|
|
· --brand-accent-deep #2E40D8 小字正文 / 按钮底色（白字 7.4:1，过 AA）★ 导航/CTA 用此档
|
|
· --brand-accent-darker #1B2A9E hover/press 更深一档（白字 11:1，高对比反馈）
|
|
· --brand-accent-ink #1B2A9E 浅底上的蓝字（超高对比，文字选中 / 浅色块内文字）
|
|
· --brand-accent-soft #EBEAF6 浅洗 hover / 选中高亮底 / 点缀底 */
|
|
--brand-accent: #3d5afe;
|
|
--brand-accent-soft: #EBEAF6;
|
|
--brand-accent-deep: #2E40D8;
|
|
--brand-accent-darker: #1B2A9E;
|
|
--brand-accent-ink: #1B2A9E;
|
|
--focus-ring: var(--brand-accent-deep);
|
|
/* 圆角尺度：克制但有圆角（学 asrmicro 锐利公司级版面，但按钮/图标块/标签/胶囊等「该圆角」处恢复圆角）。
|
|
大卡/图带保持相对锐利，小元素明显圆角，形成层次。 */
|
|
--radius-sm: 8px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 18px;
|
|
--status-done: #0E8F6E; /* 已完成 — 青绿 */
|
|
--status-progress: #4F6BED; /* 推进中 — 靛蓝 */
|
|
|
|
/* ICIDP价值观专属色 */
|
|
--icidp-integrity: #667EEA;
|
|
--icidp-courage: #EF4444;
|
|
--icidp-innovation: #8B5CF6;
|
|
--icidp-devotion: #10B981;
|
|
--icidp-passion: #3d5afe; /* 激情 — 品牌蓝（与主题色统一） */
|
|
|
|
/* ===== 责任与价值 · 三方向专属色（2026-08 重构 ESG → 责任与价值）=====
|
|
参考 腾讯「可持续社会价值」/淡马锡 ESG 框架，把抽象 ESG 拆解为三个可感知的方向，
|
|
各方向有独立视觉锚点，避免「状态=赛道」混淆，也避免 ESG 一团灰。
|
|
· --sus-green : 绿色低碳 — 主色绿（用户要求环境用绿色）
|
|
· --sus-blue : 数字普惠 — 品牌蓝（连接普惠入口）
|
|
· --sus-dark : 可信运营 — 深暖黑（与全站 accent 呼应，体现「可信」的稳重）
|
|
浅色档由 color-mix(in oklch, X N%, transparent) 派生。 */
|
|
--sus-green: #10B981;
|
|
--sus-green-soft: color-mix(in oklch, var(--sus-green) 12%, transparent);
|
|
--sus-blue: #3d5afe;
|
|
--sus-blue-soft: color-mix(in oklch, var(--sus-blue) 12%, transparent);
|
|
--sus-dark: var(--accent);
|
|
--sus-dark-soft: color-mix(in oklch, var(--accent) 10%, transparent);
|
|
|
|
/* Semantic Colors */
|
|
--bg-primary: #FAFAFE; /* 冷调近白底：与浅薰衣草主题色呼应 */
|
|
--bg-secondary: var(--brand-cream-light); /* 现为 #EBEAF6 */
|
|
--bg-subtle: #EBEAF6; /* 浅薰衣草交替底 */
|
|
--bg-dark: var(--brand-black);
|
|
--text-primary: var(--brand-black);
|
|
--text-secondary: #4A4A4A;
|
|
--text-muted: #6A6A6A;
|
|
--text-muted-on-dark: rgba(255,255,255,0.65);
|
|
--text-on-dark: var(--brand-white);
|
|
--border-light: rgba(26,26,26,0.06);
|
|
--border-medium: rgba(26,26,26,0.10);
|
|
|
|
/* Typography — Professional hierarchy */
|
|
--font-display: 'Noto Sans SC', 'Noto Sans TC', system-ui, sans-serif;
|
|
--font-body: 'Noto Sans SC', 'Noto Sans TC', system-ui, sans-serif;
|
|
--font-mono: 'Noto Sans SC', 'Noto Sans TC', system-ui, sans-serif;
|
|
|
|
/* ===== Typography Scale — 统一字号阶梯（asrmicro 式干净公司级层级）=====
|
|
全站字号的「单一真相源」。组件内字号必须落到这一阶梯，杜绝 12/13/14/15 散落与
|
|
卡片标题 15~18 不统一。层级：display > h1 > h2 > h3 > body-lg > body > body-sm > micro。
|
|
规则：主阅读文本一律 15(body)，次级描述/图注 14(body-sm)，卡片标题一律 18(h3)，
|
|
区块大标题一律 h2(clamp 20~26)，小节标签/徽章/eyebrow 一律 11(micro)。 */
|
|
--fs-display: clamp(42px, 6.5vw, 78px); /* 首页 Hero slogan */
|
|
--fs-h1: clamp(34px, 4.6vw, 56px); /* 页面/区块大标题（section-title） */
|
|
--fs-h2: clamp(22px, 2.8vw, 30px); /* 区块内主标题（赛道名/CTA/投递） */
|
|
--fs-h3: 20px; /* 卡片标题（一律统一） */
|
|
--fs-body-lg: clamp(17px, 1.2vw, 20px); /* 引导段落 / 宣言 */
|
|
--fs-body: 16px; /* 主阅读正文 */
|
|
--fs-body-sm: 15px; /* 次级描述 / 图注 */
|
|
--fs-micro: 12px; /* 小节标签 / 徽章 / eyebrow */
|
|
|
|
/* Spacing Scale — 8px grid + 流体间距（C. 2026 趋势）
|
|
clamp(min, preferred, max): 小屏紧凑(min ~85%), 中屏接近原值, 大屏松弛(max ~115%)
|
|
preferred = 原值 + vw 调整, 让间距随视口宽度平滑变化 */
|
|
--space-1: clamp(0.4rem, 0.5rem + 0.1vw, 0.6rem);
|
|
--space-2: clamp(0.85rem, 1rem + 0.2vw, 1.15rem);
|
|
--space-3: clamp(1.25rem, 1.5rem + 0.3vw, 1.75rem);
|
|
--space-4: clamp(1.7rem, 2rem + 0.4vw, 2.3rem);
|
|
--space-5: clamp(2.1rem, 2.5rem + 0.5vw, 2.9rem);
|
|
--space-6: clamp(2.5rem, 3rem + 0.6vw, 3.5rem);
|
|
--space-7: clamp(2.9rem, 3.5rem + 0.7vw, 4.1rem);
|
|
--space-8: clamp(3.3rem, 4rem + 0.8vw, 4.7rem);
|
|
--space-9: clamp(4.1rem, 5rem + 1vw, 5.9rem);
|
|
--space-10: clamp(4.9rem, 6rem + 1.2vw, 7.1rem);
|
|
--space-11: clamp(6.5rem, 8rem + 1.6vw, 9.5rem);
|
|
|
|
/* Animation — Professional easing */
|
|
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--duration-fast: 180ms;
|
|
--duration-normal: 350ms;
|
|
--duration-slow: 600ms;
|
|
|
|
/* Shadows — Warm but subtle */
|
|
--shadow-xs: 0 1px 3px rgba(26,26,26,0.04);
|
|
--shadow-sm: 0 2px 8px rgba(26,26,26,0.06), 0 1px 2px rgba(235,234,246,0.06);
|
|
--shadow-md: 0 6px 20px rgba(26,26,26,0.07), 0 2px 6px rgba(235,234,246,0.08);
|
|
--shadow-lg: 0 12px 40px rgba(26,26,26,0.08), 0 4px 12px rgba(235,234,246,0.10);
|
|
--shadow-xl: 0 20px 60px rgba(26,26,26,0.10), 0 8px 24px rgba(235,234,246,0.12);
|
|
--shadow-dark-sm: 0 2px 8px color-mix(in oklch, var(--track-ai) 10%, transparent);
|
|
--shadow-dark-md: 0 6px 24px color-mix(in oklch, var(--track-ai) 12%, transparent);
|
|
--shadow-dark-lg: 0 12px 40px color-mix(in oklch, var(--track-ai) 14%, transparent);
|
|
}
|
|
|
|
/* 文字选中高亮：品牌暖橙淡调（premium 细节，替代默认蓝） */
|
|
::selection {
|
|
background: var(--brand-accent-soft);
|
|
color: var(--brand-black);
|
|
}
|
|
|
|
/* ===== Smooth Scroll + Mobile Safe-Area ===== */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
/* WCAG 2.4.12 Focus Not Obscured: 锚点跳转/获焦不被 sticky header 遮挡（header ~64px + 余量）*/
|
|
scroll-padding-top: 80px;
|
|
-webkit-text-size-adjust: 100%;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
/* 移动端安全边距，防止按钮贴边缘 */
|
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
padding-left: env(safe-area-inset-left, 0);
|
|
padding-right: env(safe-area-inset-right, 0);
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
html { scroll-behavior: auto; }
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(235,234,246,0.35);
|
|
color: var(--brand-black);
|
|
}
|
|
|
|
/* ===== Clean Gradient Mesh Background ===== */
|
|
.gradient-mesh {
|
|
position: relative;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.gradient-mesh::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 60% 40% at 15% 20%, rgba(235,234,246,0.34), transparent 60%),
|
|
radial-gradient(ellipse 40% 30% at 85% 75%, rgba(235,234,246,0.20), transparent 50%),
|
|
radial-gradient(ellipse 35% 25% at 60% 10%, rgba(235,234,246,0.16), transparent 50%);
|
|
animation: meshDrift 40s ease-in-out infinite; /* 25s→40s 降低动画强度 */
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
@keyframes meshDrift {
|
|
0%, 100% { opacity: 0.5; transform: translate(0, 0) scale(1); }
|
|
33% { opacity: 0.6; transform: translate(-0.8%, 0.5%) scale(1.006); } /* 位移减半，缩放大幅降低 */
|
|
66% { opacity: 0.55; transform: translate(0.6%, -0.4%) scale(1.003); }
|
|
}
|
|
|
|
/* ===== Dark Gradient Mesh (Innovation Lab) ===== */
|
|
.gradient-mesh-dark {
|
|
position: relative;
|
|
background: var(--brand-black);
|
|
}
|
|
|
|
.gradient-mesh-dark::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 50% 40% at 20% 30%, color-mix(in oklch, var(--track-ai) 10%, transparent), transparent 50%),
|
|
radial-gradient(ellipse 35% 25% at 80% 70%, color-mix(in oklch, var(--track-career) 6%, transparent), transparent 40%);
|
|
animation: meshDriftDark 50s ease-in-out infinite; /* 30s→50s 降低动画强度 */
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
@keyframes meshDriftDark {
|
|
0%, 100% { opacity: 0.45; transform: translate(0, 0); }
|
|
50% { opacity: 0.55; transform: translate(-1%, 0.6%); } /* 位移大幅降低 */
|
|
}
|
|
|
|
/* ===== Gradient Text — Elegant & Subtle ===== */
|
|
.text-gradient-animated {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--brand-black) 0%,
|
|
var(--brand-black) 30%,
|
|
var(--brand-cream-deep) 55%,
|
|
var(--track-social) 75%,
|
|
var(--brand-black) 100%
|
|
);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: textGradientSlide 14s ease-in-out infinite; /* 8s→14s 降低动画强度，避免视觉疲劳 */
|
|
}
|
|
|
|
@keyframes textGradientSlide {
|
|
0% { background-position: 0% center; }
|
|
50% { background-position: 100% center; }
|
|
100% { background-position: 0% center; }
|
|
}
|
|
|
|
/* ===== 统一按钮/卡片交互层 ===== */
|
|
a, button {
|
|
touch-action: manipulation;
|
|
}
|
|
/* 卡片悬浮微交互 */
|
|
.card-hover {
|
|
transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-xl);
|
|
}
|
|
|
|
|
|
/* ===== Professional Glassmorphism ===== */
|
|
.glass-premium {
|
|
background: rgba(255,255,255,0.80);
|
|
backdrop-filter: blur(16px) saturate(120%);
|
|
border: 1px solid var(--border-light);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.glass-premium-dark {
|
|
background: rgba(26,26,26,0.85);
|
|
backdrop-filter: blur(16px) saturate(120%);
|
|
border: 1px solid rgba(235,234,246,0.06);
|
|
box-shadow: var(--shadow-dark-sm);
|
|
}
|
|
|
|
/* ===== 暖科技玻璃卡 — 全站卡片统一套用（核心升级） =====
|
|
玻璃底色 + 细边 + 柔影；hover 微浮交给元素自带的 Tailwind hover 类，
|
|
避免 transform 冲突，保持单一真相源。 */
|
|
.card-surface {
|
|
background: rgba(255,255,255,0.70);
|
|
-webkit-backdrop-filter: blur(14px) saturate(125%);
|
|
backdrop-filter: blur(14px) saturate(125%);
|
|
border: 1px solid var(--border-light);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.card-surface-soft {
|
|
background: rgba(255,255,255,0.55);
|
|
-webkit-backdrop-filter: blur(10px) saturate(120%);
|
|
backdrop-filter: blur(10px) saturate(120%);
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
/* 科技感网格底纹（极淡，premium 纹理不抢戏） */
|
|
.tech-grid-bg {
|
|
background-image:
|
|
linear-gradient(rgba(26,26,26,0.035) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(26,26,26,0.035) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
background-position: center;
|
|
}
|
|
|
|
/* ===== Scroll Reveal — Smooth & Professional ===== */
|
|
.scroll-reveal {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity var(--duration-slow) var(--ease-out-expo),
|
|
transform var(--duration-slow) var(--ease-out-expo);
|
|
}
|
|
|
|
.scroll-reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.scroll-reveal-left {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
transition: opacity var(--duration-slow) var(--ease-out-expo),
|
|
transform var(--duration-slow) var(--ease-out-expo);
|
|
}
|
|
|
|
.scroll-reveal-left.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.scroll-reveal-right {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
transition: opacity var(--duration-slow) var(--ease-out-expo),
|
|
transform var(--duration-slow) var(--ease-out-expo);
|
|
}
|
|
|
|
.scroll-reveal-right.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* ===== Scroll-driven Animations（2026 规范 · 渐进增强）=====
|
|
浏览器支持 animation-timeline: view() 时，用纯 CSS 替代 JS IntersectionObserver
|
|
揭示。fill-mode: both 保证进入视口前保持 from（隐藏）、滚过后保持 to（可见），
|
|
不依赖 .visible 类即完成揭示；JS 仍作 fallback，互不冲突。
|
|
animation-range: entry 0% cover 30% —— 进入视口 0% 开始，覆盖 30% 时完成，
|
|
比默认 cover 0%-100% 更早完成，更贴合「宁静界面」。
|
|
不做 stagger：scroll-driven 的错峰需平移 animation-range，复杂且违背宁静原则；
|
|
JS 路径仍保留 stagger 作为不支持本特性时的体验 fallback。 */
|
|
@supports (animation-timeline: view()) {
|
|
.scroll-reveal {
|
|
animation: scroll-reveal-up linear both;
|
|
animation-timeline: view();
|
|
animation-range: entry 0% cover 30%;
|
|
}
|
|
.scroll-reveal-left {
|
|
animation: scroll-reveal-left linear both;
|
|
animation-timeline: view();
|
|
animation-range: entry 0% cover 30%;
|
|
}
|
|
.scroll-reveal-right {
|
|
animation: scroll-reveal-right linear both;
|
|
animation-timeline: view();
|
|
animation-range: entry 0% cover 30%;
|
|
}
|
|
@keyframes scroll-reveal-up {
|
|
from { opacity: 0; transform: translateY(24px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes scroll-reveal-left {
|
|
from { opacity: 0; transform: translateX(-30px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
@keyframes scroll-reveal-right {
|
|
from { opacity: 0; transform: translateX(30px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
}
|
|
|
|
/* ===== Hover Effects — Subtle & Elegant ===== */
|
|
.hover-lift {
|
|
transition: transform var(--duration-normal) var(--ease-out),
|
|
box-shadow var(--duration-normal) var(--ease-out);
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.hover-lift-dark:hover {
|
|
box-shadow: var(--shadow-dark-lg);
|
|
}
|
|
|
|
/* ===== Section Divider — Clean ===== */
|
|
.section-divider {
|
|
height: 1px;
|
|
max-width: 80%;
|
|
margin: var(--space-8) auto;
|
|
background: linear-gradient(90deg, transparent, var(--border-medium), transparent);
|
|
}
|
|
|
|
.dark-divider {
|
|
background: linear-gradient(90deg, transparent, rgba(235,234,246,0.10), transparent);
|
|
}
|
|
|
|
/* ===== Timeline Style — 响应式移动端单列布局 ===== */
|
|
.timeline-line {
|
|
position: relative;
|
|
padding-left: 48px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.timeline-line {
|
|
padding-left: 36px;
|
|
}
|
|
}
|
|
|
|
.timeline-line::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: linear-gradient(180deg, transparent, rgba(235,234,246,0.4), color-mix(in oklch, var(--track-ai) 22%, transparent), transparent);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.timeline-line::before {
|
|
left: 14px;
|
|
}
|
|
}
|
|
|
|
.timeline-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 15px;
|
|
border: 2px solid;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.timeline-dot {
|
|
left: 9px;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
}
|
|
|
|
/* ===== Star Field (Innovation Lab) — 降低密度和亮度，保持科技克制感 ===== */
|
|
.star-field {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.star {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
background: var(--brand-cream);
|
|
border-radius: 50%;
|
|
animation: starTwinkle var(--twinkle-duration) ease-in-out infinite;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes starTwinkle {
|
|
0%, 100% { opacity: 0; }
|
|
50% { opacity: 0.35; }
|
|
}
|
|
|
|
/* ===== Neon Elements — Dark pages only ===== */
|
|
.neon-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
animation: neonDotPulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes neonDotPulse {
|
|
0%, 100% { opacity: 0.5; box-shadow: 0 0 3px currentColor; }
|
|
50% { opacity: 1; box-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
|
|
}
|
|
|
|
.neon-line {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--brand-cream), var(--track-ai), transparent);
|
|
animation: neonPulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes neonPulse {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
|
|
/* ===== Flip Card (WCAG 2.1 AA 无障碍：支持键盘/触摸/点击) ===== */
|
|
/* ===== Flip Card (WCAG 2.1 AA 无障碍：支持键盘/触摸/点击) ===== */
|
|
/* Grid Stack 方案：两面叠在同一 grid-cell → 容器高度 = max(正面高, 背面高)
|
|
—— 彻底解决原 absolute inset-0 + 固定 h-[200px] 导致长内容截断的问题
|
|
翻转时使用 3D rotateY(180) + backface-visibility:hidden 隐藏背面，
|
|
不再额外设 visibility:hidden，避免与 3D 逻辑冲突。*/
|
|
.flip-card {
|
|
perspective: 1000px;
|
|
cursor: pointer;
|
|
display: grid;
|
|
container-type: inline-size;
|
|
}
|
|
.flip-card-inner {
|
|
display: grid;
|
|
grid-template-areas: 'stack';
|
|
transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
|
|
transform-style: preserve-3d;
|
|
}
|
|
.flip-card-inner > * { grid-area: stack; }
|
|
|
|
.flip-card-front h3 {
|
|
font-size: var(--fs-body);
|
|
}
|
|
|
|
.flip-card:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 3px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/* 桌面：hover 或 .flipped 类翻转 */
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.flip-card:hover .flip-card-inner {
|
|
transform: rotateY(180deg);
|
|
}
|
|
}
|
|
|
|
/* 键盘点击/触摸点击：.flipped 类控制翻转 (优先级最高) */
|
|
.flip-card.flipped .flip-card-inner {
|
|
transform: rotateY(180deg) !important;
|
|
}
|
|
|
|
.flip-card-front, .flip-card-back {
|
|
backface-visibility: hidden;
|
|
transform-style: preserve-3d;
|
|
/* Grid Stack：每面是独立 grid cell，按内容自然高度撑开 */
|
|
position: relative;
|
|
top: auto; left: auto; right: auto; bottom: auto;
|
|
inset: auto;
|
|
}
|
|
|
|
.flip-card-back {
|
|
/* 初始背面：与正面成 180°，backface-visibility 会隐藏它 */
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
/* ===== Page Enter ===== */
|
|
.page-enter {
|
|
animation: pageEnter 0.6s var(--ease-out-expo) forwards;
|
|
}
|
|
|
|
@keyframes pageEnter {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ===== Route Lazy Loading Fallback（2026 规范 · 宁静界面）=====
|
|
React.lazy chunk 加载时的极简 fallback：居中品牌蓝旋转环，
|
|
不抢戏、不闪烁。aria-live="polite" 供屏读。 */
|
|
.page-loading {
|
|
min-height: 60vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.page-loading::after {
|
|
content: "";
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 2px solid var(--border-medium);
|
|
border-top-color: var(--brand-accent);
|
|
border-radius: 50%;
|
|
animation: pageLoadingSpin 0.8s linear infinite;
|
|
}
|
|
@keyframes pageLoadingSpin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.page-loading::after {
|
|
animation: none;
|
|
border-top-color: var(--brand-accent-deep);
|
|
}
|
|
}
|
|
|
|
/* ===== Cross-Document View Transitions（2026 规范 · 路由交叉淡化）=====
|
|
本站导航用 <a href> 全页重载（非 SPA Link），故采用 Cross-Document VT
|
|
（Chrome 134+ / Safari 18.2+），同源导航自动交叉淡化 0.25s。
|
|
不支持时无副作用（@view-transition 与 ::view-transition-* 被忽略，回退到 .page-enter）。
|
|
支持时抑制 .page-enter 避免双重动画（VT 已涵盖进场过渡）。 */
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
@supports (view-transition-name: root) {
|
|
/* VT 支持：抑制旧 .page-enter，让 VT 接管进场过渡（避免 translateY 与 cross-fade 叠加） */
|
|
.page-enter {
|
|
animation: none;
|
|
}
|
|
::view-transition-old(root) {
|
|
animation: vt-fade-out 0.25s var(--ease-out) both;
|
|
}
|
|
::view-transition-new(root) {
|
|
animation: vt-fade-in 0.25s var(--ease-out) both;
|
|
}
|
|
@keyframes vt-fade-out {
|
|
to { opacity: 0; }
|
|
}
|
|
@keyframes vt-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
@supports (view-transition-name: root) {
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===== Custom Focus Ring ===== */
|
|
:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* WCAG 2.5.8 Target Size Minimum: footer 链接触控目标 ≥24×24 CSS px */
|
|
footer a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 24px;
|
|
}
|
|
|
|
/* WCAG 1.4.6 + 2026 趋势 prefers-contrast: 高对比度偏好增强 */
|
|
@media (prefers-contrast: more) {
|
|
:root {
|
|
--text-muted: #4a4a4a;
|
|
--text-secondary: #2a2a2a;
|
|
}
|
|
:focus-visible {
|
|
outline-width: 3px;
|
|
}
|
|
}
|
|
|
|
/* ===== Innovation Lab — 科技感样式系统 ===== */
|
|
.innovation-lab-container {
|
|
background: linear-gradient(180deg, #0a0a0f 0%, #12121a 30%, #0e0e16 70%, #0a0a0f 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 动态背景网格 */
|
|
.grid-background {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(201,177,255,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(201,177,255,0.03) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
opacity: 0;
|
|
animation: gridFadeIn 2s ease-out 0.5s forwards;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
@keyframes gridFadeIn {
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* 光晕装饰层 */
|
|
.glow-orbs {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.glow-orbs::before,
|
|
.glow-orbs::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(100px);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.glow-orbs::before {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, var(--track-ai)40 0%, transparent 70%);
|
|
top: -200px;
|
|
right: -100px;
|
|
animation: orbFloat1 20s ease-in-out infinite;
|
|
}
|
|
|
|
.glow-orbs::after {
|
|
width: 500px;
|
|
height: 500px;
|
|
background: radial-gradient(circle, var(--track-career)30 0%, transparent 70%);
|
|
bottom: -150px;
|
|
left: -80px;
|
|
animation: orbFloat2 25s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes orbFloat1 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(-30px, 20px) scale(1.1); }
|
|
66% { transform: translate(20px, -15px) scale(0.95); }
|
|
}
|
|
|
|
@keyframes orbFloat2 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
50% { transform: translate(40px, 30px) scale(1.15); }
|
|
}
|
|
|
|
|
|
/* 扫描线 */
|
|
.scan-line {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--track-ai), transparent);
|
|
animation: scanLineMove 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes scanLineMove {
|
|
0% { top: 0; opacity: 0; }
|
|
20% { opacity: 1; }
|
|
80% { opacity: 1; }
|
|
100% { top: 100%; opacity: 0; }
|
|
}
|
|
|
|
/* 动态进度条 */
|
|
.progress-bar {
|
|
width: 0%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--track-ai), var(--track-career));
|
|
border-radius: inherit;
|
|
animation: progressFill 1.5s ease-out 0.5s forwards;
|
|
box-shadow: 0 0 10px var(--track-ai);
|
|
}
|
|
|
|
@keyframes progressFill {
|
|
to { width: 100%; }
|
|
}
|
|
|
|
/* 发光圆点 */
|
|
.neon-dot-glow {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
animation: neonGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.neon-dot-glow-lg {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
animation: neonGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes neonGlow {
|
|
0%, 100% { opacity: 0.6; box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
|
|
50% { opacity: 1; box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
|
|
}
|
|
|
|
/* 科技感时间线 */
|
|
.timeline-tech {
|
|
position: relative;
|
|
padding-left: 52px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.timeline-tech {
|
|
padding-left: 40px;
|
|
}
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-connector {
|
|
position: absolute;
|
|
left: 9px;
|
|
top: 16px;
|
|
width: 2px;
|
|
height: calc(100% - 16px);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.timeline-connector {
|
|
left: 5px;
|
|
}
|
|
}
|
|
|
|
.timeline-node {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: -44px;
|
|
border: 2px solid var(--node-color);
|
|
background: #0a0a0f;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.timeline-node {
|
|
left: -32px;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
.timeline-node.active {
|
|
background: var(--node-color);
|
|
}
|
|
|
|
.timeline-node.upcoming {
|
|
opacity: 0.5;
|
|
border-color: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.timeline-node.upcoming .node-inner {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.timeline-node.upcoming .node-glow {
|
|
opacity: 0;
|
|
}
|
|
|
|
.timeline-node:hover {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
.node-inner {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--node-color);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.timeline-node.active .node-inner {
|
|
opacity: 1;
|
|
box-shadow: 0 0 10px var(--node-color);
|
|
}
|
|
|
|
.node-glow {
|
|
position: absolute;
|
|
inset: -4px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--node-color);
|
|
opacity: 0;
|
|
animation: nodePulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.timeline-node.active .node-glow {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@keyframes nodePulse {
|
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
|
50% { transform: scale(1.5); opacity: 0; }
|
|
}
|
|
|
|
.node-check {
|
|
color: #0a0a0f;
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.timeline-node.active .node-check {
|
|
opacity: 1;
|
|
}
|
|
|
|
.timeline-card {
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.timeline-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ===== Responsive ===== */
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--space-8: 3rem;
|
|
--space-9: 3.5rem;
|
|
--space-10: 4rem;
|
|
--space-11: 5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
:root {
|
|
--space-7: 2.5rem;
|
|
--space-8: 2.5rem;
|
|
--space-9: 3rem;
|
|
--space-10: 3.5rem;
|
|
--space-11: 4rem;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
asrmicro-style section system — 学结构保品牌（温暖未来主义）
|
|
Clean corporate structure, warm brand palette
|
|
============================================================ */
|
|
|
|
/* Section eyebrow + title (形如 asrmicro 的 "ABOUT ASR / 走进翱捷") */
|
|
.section-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--fs-micro);
|
|
font-weight: 500;
|
|
letter-spacing: 0.20em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 14px;
|
|
}
|
|
.section-eyebrow::before {
|
|
content: '';
|
|
width: 28px;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
background: var(--brand-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
.section-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: var(--fs-h1);
|
|
line-height: 1.10;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
text-wrap: balance;
|
|
}
|
|
.section-lead {
|
|
margin-top: 14px;
|
|
font-size: var(--fs-body);
|
|
line-height: 1.8;
|
|
color: var(--text-secondary);
|
|
max-width: 660px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.section-head { margin-bottom: var(--space-7); }
|
|
|
|
/* 板块标题降一档：h2 应小于页面 h1，否则与 Hero 标题视觉权重冲突。
|
|
.section-title 默认按 h1 渲染，仅页面级 Hero 使用；板块内统一降为 h2 尺寸。 */
|
|
.section-head .section-title { font-size: var(--fs-h1); }
|
|
|
|
/* 细线分隔的版式（已并入 .section-eyebrow 统一引导线，保留兼容） */
|
|
|
|
/* ===== Stat band — "翱捷速度" 风格的数据滚动 ===== */
|
|
.stat-band {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1px;
|
|
background: var(--border-light);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
}
|
|
.stat-cell {
|
|
background: var(--bg-primary);
|
|
padding: 32px 20px;
|
|
text-align: center;
|
|
transition: background var(--duration-normal) var(--ease-out);
|
|
}
|
|
.stat-cell:hover { background: var(--bg-secondary); }
|
|
.stat-num {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: clamp(38px, 5.8vw, 60px);
|
|
line-height: 1;
|
|
letter-spacing: -0.01em;
|
|
color: var(--brand-black);
|
|
}
|
|
.stat-suffix { font-size: 0.52em; font-weight: 600; color: var(--track-color, var(--brand-accent-deep)); }
|
|
.stat-value--text { /* 兼容保留：统一字号后无需差异化，空实现避免引用报错 */ }
|
|
.stat-label {
|
|
margin-top: 10px;
|
|
font-size: var(--fs-micro);
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.stat-sub {
|
|
margin-top: 2px;
|
|
font-size: var(--fs-micro);
|
|
color: var(--text-muted);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ===== Hero video wrap (首页) ===== */
|
|
.hero-video {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center 65%;
|
|
/* 不要任何底垫色，只保留视频本身（视频未加载时透出底层页面背景） */
|
|
background: transparent;
|
|
z-index: 0;
|
|
}
|
|
.hero-slogan {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: var(--fs-h1);
|
|
line-height: 1.12;
|
|
letter-spacing: -0.02em;
|
|
color: var(--brand-black);
|
|
white-space: pre-line;
|
|
}
|
|
|
|
/* ===== News / 动态 card (asrmicro 新闻中心风格) ===== */
|
|
.news-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-md);
|
|
padding: 22px 22px 24px;
|
|
transition: transform var(--duration-normal) var(--ease-out),
|
|
box-shadow var(--duration-normal) var(--ease-out),
|
|
border-color var(--duration-normal) var(--ease-out);
|
|
}
|
|
.news-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--brand-cream-deep);
|
|
}
|
|
.news-tag {
|
|
align-self: flex-start;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--fs-micro);
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
background: rgba(235,234,246,0.22);
|
|
color: var(--text-muted);
|
|
border: 1px solid rgba(235,234,246,0.30);
|
|
}
|
|
.news-year {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--fs-micro);
|
|
color: var(--track-career);
|
|
margin-top: 14px;
|
|
}
|
|
.news-title {
|
|
margin-top: 6px;
|
|
font-size: var(--fs-body);
|
|
font-weight: 600;
|
|
line-height: 1.6;
|
|
color: var(--text-primary);
|
|
}
|
|
.news-desc {
|
|
margin-top: 8px;
|
|
font-size: var(--fs-body);
|
|
line-height: 1.7;
|
|
color: var(--text-secondary);
|
|
flex: 1;
|
|
}
|
|
|
|
/* ===== Track / product matrix cards (主营业务风格) ===== */
|
|
.track-card {
|
|
position: relative;
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-lg);
|
|
padding: 28px 26px 30px;
|
|
/* 静态白底，不靠整卡泛彩抢戏；赛道识别交给顶部 4px 满色条 + icon-tile */
|
|
background: var(--bg-primary);
|
|
overflow: hidden;
|
|
transition: transform var(--duration-normal) var(--ease-out),
|
|
box-shadow var(--duration-normal) var(--ease-out),
|
|
border-color var(--duration-normal) var(--ease-out),
|
|
background-color var(--duration-normal) var(--ease-out);
|
|
}
|
|
.track-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: color-mix(in oklch, var(--track-color, var(--track-career)) 45%, transparent);
|
|
background: color-mix(in oklch, var(--track-color, var(--track-career)) 4%, var(--bg-primary));
|
|
}
|
|
|
|
/* ===== 统一图标块（品牌双色体系：#3d5afe ↔ #EBEAF6）=====
|
|
全站图标 tile 共用一套配方：#EBEAF6 浅薰衣草底 + #3d5afe 品牌蓝图标。
|
|
不再依赖 --track-color，统一为品牌双色，保证全站图标视觉一致。 */
|
|
.icon-tile {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-md);
|
|
background: var(--brand); /* #EBEAF6 浅薰衣草底 */
|
|
border: none;
|
|
color: var(--brand-accent); /* #3d5afe 品牌蓝图标（lucide 用 currentColor） */
|
|
flex-shrink: 0;
|
|
box-shadow: 0 2px 10px rgba(61, 90, 254, 0.10);
|
|
transition: transform var(--duration-normal) var(--ease-out),
|
|
box-shadow var(--duration-normal) var(--ease-out),
|
|
background-color var(--duration-normal) var(--ease-out);
|
|
}
|
|
.icon-tile:hover {
|
|
transform: translateY(-2px);
|
|
background: color-mix(in oklch, var(--brand-accent) 8%, var(--brand));
|
|
box-shadow: 0 6px 18px rgba(61, 90, 254, 0.18);
|
|
}
|
|
.icon-tile--lg { width: 48px; height: 48px; }
|
|
.icon-tile--md { width: 40px; height: 40px; }
|
|
.icon-tile--sm { width: 36px; height: 36px; }
|
|
|
|
/* ===== CTA band ===== */
|
|
.cta-band {
|
|
position: relative;
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #1A1A1A 0%, #2a2118 55%, #1A1A1A 100%);
|
|
color: var(--brand-white);
|
|
}
|
|
.cta-band::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 40% 60% at 20% 20%, rgba(235,234,246,0.16), transparent 60%),
|
|
radial-gradient(ellipse 40% 60% at 85% 80%, color-mix(in oklch, var(--track-career) 12%, transparent), transparent 55%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ===== Full-bleed subtle band (中性交替底色，asrmicro 式克制节奏) ===== */
|
|
.band {
|
|
background: var(--bg-subtle);
|
|
background-image:
|
|
linear-gradient(rgba(26,26,26,0.022) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(26,26,26,0.022) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
background-position: center;
|
|
border-top: 1px solid var(--border-light);
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
/* 空状态专用：news.items 为空时去掉薰衣草色和网格，整片纯白 */
|
|
.band--empty {
|
|
background: #fff;
|
|
background-image: none;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* ===== Unified Button System — 单一强调色，全局一致 ===== */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
/* asrmicro「进一步了解」式圆润胶囊按钮（该圆角处恢复圆角） */
|
|
border-radius: 999px;
|
|
padding: 13px 26px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
border: 1px solid transparent;
|
|
text-decoration: none;
|
|
transition: transform var(--duration-fast) var(--ease-out),
|
|
box-shadow var(--duration-fast) var(--ease-out),
|
|
background-color var(--duration-fast) var(--ease-out),
|
|
border-color var(--duration-fast) var(--ease-out),
|
|
color var(--duration-fast) var(--ease-out);
|
|
}
|
|
.btn:active { transform: translateY(0); }
|
|
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
|
|
|
|
.btn-primary {
|
|
background: var(--brand-accent-deep);
|
|
color: #fff;
|
|
box-shadow: 0 6px 18px color-mix(in oklch, var(--brand-accent-deep) 28%, transparent);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
background: var(--brand-accent-darker);
|
|
box-shadow: 0 10px 26px color-mix(in oklch, var(--brand-accent-deep) 36%, transparent);
|
|
}
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
background: var(--brand-accent-darker);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
border-color: var(--border-medium);
|
|
}
|
|
.btn-ghost:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
background: color-mix(in oklch, var(--accent) 6%, transparent);
|
|
}
|
|
|
|
/* 深色背景上的按钮 */
|
|
.btn-light {
|
|
background: var(--brand-cream);
|
|
color: var(--brand-black);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.btn-light:hover { transform: translateY(-2px); filter: brightness(1.04); }
|
|
|
|
.btn-outline-light {
|
|
background: transparent;
|
|
color: var(--brand-cream);
|
|
border-color: rgba(235,234,246,0.35);
|
|
}
|
|
.btn-outline-light:hover { background: rgba(235,234,246,0.10); }
|
|
|
|
.btn-lg { padding: 15px 32px; font-size: var(--fs-body); }
|
|
.btn-sm { padding: 10px 18px; font-size: var(--fs-micro); }
|
|
|
|
/* ===== Light feature row (图文交错) ===== */
|
|
.feature-media {
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-light);
|
|
box-shadow: var(--shadow-md);
|
|
transition: transform var(--duration-normal) var(--ease-out),
|
|
box-shadow var(--duration-normal) var(--ease-out);
|
|
}
|
|
.feature-media:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.feature-media img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: transform var(--duration-slow) var(--ease-out);
|
|
}
|
|
.feature-media:hover img { transform: scale(1.05); }
|
|
|
|
/* ===== 图文卡（asrmicro 式：相关图进卡，图在上、文在下）=====
|
|
用于 Home 四大赛道、Innovation 技术路径：每张卡带一张与赛道强相关的图，
|
|
顶部 4px 赛道色条保留识别度，hover 轻微上浮 + 图片缓放。 */
|
|
.track-media {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
transition: transform var(--duration-normal) var(--ease-out),
|
|
box-shadow var(--duration-normal) var(--ease-out),
|
|
border-color var(--duration-normal) var(--ease-out),
|
|
background-color var(--duration-normal) var(--ease-out);
|
|
}
|
|
.track-media:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: color-mix(in oklch, var(--track-color, var(--track-career)) 45%, transparent);
|
|
background: color-mix(in oklch, var(--track-color, var(--track-career)) 4%, var(--bg-primary));
|
|
}
|
|
.track-media__media {
|
|
position: relative;
|
|
aspect-ratio: 16 / 10;
|
|
overflow: hidden;
|
|
}
|
|
.track-media__media img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: transform var(--duration-slow) var(--ease-out);
|
|
}
|
|
.track-media:hover .track-media__media img { transform: scale(1.06); }
|
|
.track-media__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
padding: 18px 20px 22px;
|
|
}
|
|
|
|
/* ===== 图文并排卡（图在侧、内容在另一侧；赛道大段用）=====
|
|
用于 Business 四大赛道：左侧相关图、右侧标题+产品矩阵；奇偶交替左右。 */
|
|
.track-split {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
transition: box-shadow var(--duration-normal) var(--ease-out),
|
|
border-color var(--duration-normal) var(--ease-out);
|
|
}
|
|
.track-split:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: color-mix(in oklch, var(--track-color, var(--track-career)) 35%, transparent);
|
|
}
|
|
.track-split__media {
|
|
position: relative;
|
|
min-height: 240px;
|
|
overflow: hidden;
|
|
}
|
|
.track-split__media img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform var(--duration-slow) var(--ease-out);
|
|
}
|
|
.track-split:hover .track-split__media img { transform: scale(1.04); }
|
|
.track-split__body { padding: 24px 26px 28px; }
|
|
@media (min-width: 768px) {
|
|
.track-split { grid-template-columns: 0.95fr 1.05fr; }
|
|
.track-split__media { min-height: 100%; }
|
|
.track-split--rev .track-split__media { order: 2; }
|
|
}
|
|
|
|
/* ===== Tech Hero — asrmicro「科技公司」暗色脉搏段（暖米/琥珀点缀，不返红）=====
|
|
用于 Innovation 页首屏：近黑底 + 细网格 + 暖米光晕，给全站中段注入能量与对比。
|
|
网格/光晕用 absolute 限定在本区块内（避免旧 .grid-background 的 fixed 溢出问题）。 */
|
|
.tech-hero {
|
|
position: relative;
|
|
background: linear-gradient(180deg, #0c0c12 0%, #15151f 42%, #0e0e16 100%);
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
}
|
|
.tech-hero-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(rgba(235,234,246,0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(235,234,246,0.05) 1px, transparent 1px);
|
|
background-size: 56px 56px;
|
|
-webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 38%, #000 25%, transparent 82%);
|
|
mask-image: radial-gradient(ellipse 85% 70% at 50% 38%, #000 25%, transparent 82%);
|
|
animation: gridFadeIn 1.6s ease-out forwards;
|
|
}
|
|
.tech-hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
|
|
.tech-hero-glow::before,
|
|
.tech-hero-glow::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(110px);
|
|
opacity: 0.35;
|
|
}
|
|
.tech-hero-glow::before {
|
|
width: 520px; height: 520px;
|
|
background: radial-gradient(circle, rgba(235,234,246,0.18) 0%, transparent 70%);
|
|
top: -160px; right: -80px;
|
|
animation: orbFloat1 22s ease-in-out infinite;
|
|
}
|
|
.tech-hero-glow::after {
|
|
width: 460px; height: 460px;
|
|
background: radial-gradient(circle, rgba(200,132,26,0.22) 0%, transparent 70%);
|
|
bottom: -140px; left: -60px;
|
|
animation: orbFloat2 26s ease-in-out infinite;
|
|
}
|
|
.tech-hero .section-eyebrow { color: rgba(235,234,246,0.78); }
|
|
.tech-hero .section-eyebrow::before { background: var(--brand-accent); }
|
|
.tech-hero .section-title { color: #fff; }
|
|
.tech-hero .section-lead { color: rgba(255,255,255,0.72); }
|
|
|
|
/* 图片悬停轻微放大（已在 .feature-media 内），此处补一处暗场图片呼吸感 */
|
|
@keyframes gridFadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
|
|
/* ===== Typography Utilities — 全站字号统一走 CSS 变量阶梯 ===== */
|
|
@utility text-display { font-size: var(--fs-display); }
|
|
@utility text-h1 { font-size: var(--fs-h1); }
|
|
@utility text-h2 { font-size: var(--fs-h2); }
|
|
@utility text-h3 { font-size: var(--fs-h3); }
|
|
@utility text-body-lg { font-size: var(--fs-body-lg); }
|
|
@utility text-body { font-size: var(--fs-body); }
|
|
@utility text-body-sm { font-size: var(--fs-body-sm); }
|
|
@utility text-micro { font-size: var(--fs-micro); }
|
|
|
|
/* ===== 小巴适 · 动态陪伴助手 ===== */
|
|
/* 进场默认态：藏在屏外右下；.has-entered 后滑入+轻弹跳（时长 ~880ms，JS 端留 1050ms 再开口）。
|
|
基础位置/布局/令牌保留原来语义。 */
|
|
.mascot-root {
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
z-index: 60;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 12px;
|
|
/* 主题色：主体用浅薰衣草；点缀用品牌蓝；车灯与星星用暖琥珀黄（光感闪耀） */
|
|
--mascot-body: var(--brand);
|
|
--mascot-accent: var(--brand-accent);
|
|
--mascot-star: #F5A623;
|
|
transition: transform 0.88s cubic-bezier(0.16, 1, 0.3, 1),
|
|
opacity 0.45s ease;
|
|
transform: translate3d(180px, 60px, 0) rotate(-10deg);
|
|
opacity: 0;
|
|
will-change: transform, opacity;
|
|
}
|
|
.mascot-root.has-entered {
|
|
transform: translate3d(0, 0, 0) rotate(0deg);
|
|
opacity: 1;
|
|
animation: mascotRunInBounce 0.88s cubic-bezier(0.16, 1.25, 0.3, 1);
|
|
}
|
|
.mascot-float {
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
line-height: 0;
|
|
border-radius: 50%;
|
|
transition: transform 0.2s ease;
|
|
user-select: none;
|
|
}
|
|
/* 配色统一主题色：覆盖 SVG 内硬编码填充 */
|
|
.mascot-svg .mascot-body { fill: var(--mascot-body); }
|
|
.mascot-svg .mascot-accent { fill: var(--mascot-accent); }
|
|
.mascot-svg .mascot-light { fill: var(--mascot-star); }
|
|
.mascot-svg .mascot-star { fill: var(--mascot-star); }
|
|
.mascot-float:hover { transform: scale(1.06); }
|
|
.mascot-float:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
|
|
.mascot-svg {
|
|
display: block;
|
|
filter: drop-shadow(0 6px 14px rgba(26, 26, 26, 0.18));
|
|
}
|
|
|
|
.mascot-bubble {
|
|
width: min(300px, calc(100vw - 40px));
|
|
background: var(--brand-white);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-lg);
|
|
padding: 14px 16px;
|
|
box-shadow: 0 12px 30px rgba(26, 26, 26, 0.16);
|
|
position: relative;
|
|
animation: bubbleIn 0.22s ease-out;
|
|
}
|
|
.mascot-bubble::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 28px;
|
|
bottom: -8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: var(--brand-white);
|
|
border-right: 1px solid var(--border-light);
|
|
border-bottom: 1px solid var(--border-light);
|
|
transform: rotate(45deg);
|
|
}
|
|
.mascot-bubble-name {
|
|
font-size: var(--fs-body); /* 16px 与正文同级，作为气泡标题"小巴适"视觉平衡；原 12px 太小，比正文还小 4px */
|
|
line-height: 1.35;
|
|
font-weight: 700;
|
|
/* 品牌蓝（主题强调色），与全站 CTA/导航/链接统一，白底对比 5.07:1 过 AA */
|
|
color: var(--brand-accent);
|
|
margin-bottom: 8px;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.mascot-bubble-text {
|
|
font-size: var(--fs-body);
|
|
line-height: 1.6;
|
|
color: var(--brand-black);
|
|
margin: 0;
|
|
}
|
|
.mascot-bubble-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
justify-content: flex-end;
|
|
}
|
|
.mascot-bubble-btn {
|
|
font-size: 12px;
|
|
padding: 5px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--brand-accent-deep);
|
|
background: var(--brand-accent-deep);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
/* ================================================================
|
|
全站「返回顶部」浮动按钮
|
|
- 固定在右下角、小巴适（Mascot）正上方，避免与可拖动陪伴角色重叠
|
|
- 滚动超过 480px 后淡入上浮；点击平滑回到页首
|
|
- 主题强调色（品牌蓝），hover 微抬升 + 加深阴影
|
|
================================================================ */
|
|
.back-to-top {
|
|
position: fixed;
|
|
right: 24px;
|
|
bottom: 120px;
|
|
z-index: 58;
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
background: var(--brand-accent);
|
|
box-shadow: 0 8px 20px rgba(61, 90, 254, 0.35);
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
pointer-events: none;
|
|
transition: opacity 0.28s ease, transform 0.28s ease, background 0.2s ease;
|
|
}
|
|
.back-to-top.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
.back-to-top:hover {
|
|
background: var(--brand-accent-deep, #2a3fd6);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 26px rgba(61, 90, 254, 0.45);
|
|
}
|
|
.back-to-top:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 3px;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.back-to-top {
|
|
right: 16px;
|
|
bottom: 104px;
|
|
width: 42px;
|
|
height: 42px;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.back-to-top {
|
|
transition: opacity 0.2s ease;
|
|
transform: none;
|
|
}
|
|
.back-to-top:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
.mascot-bubble-btn.ghost {
|
|
background: transparent;
|
|
color: var(--brand-accent-deep);
|
|
}
|
|
.mascot-bubble-btn:hover { opacity: 0.9; }
|
|
|
|
/* ===== 小巴适戳戳动效（老板"有趣"交付物） =====
|
|
进场动画和 keyframes（mascotRunInBounce）已前移到文件顶部 .mascot-root 定义处。 */
|
|
.mascot-float[data-mood="squeeze"] {
|
|
animation: mascotSqueeze 0.62s cubic-bezier(0.16, 1.35, 0.3, 1);
|
|
}
|
|
.mascot-float[data-mood="squeeze"] .mascot-arm {
|
|
transform-box: fill-box;
|
|
transform-origin: 0% 100%;
|
|
animation: mascotWave 0.38s ease-in-out 3;
|
|
}
|
|
.mascot-float[data-mood="squeeze"] .mascot-dots circle,
|
|
.mascot-float[data-mood="squeeze"] .mascot-sparks path {
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
@keyframes mascotRunInBounce {
|
|
0% { transform: translate3d(180px, 60px, 0) rotate(-10deg); }
|
|
60% { transform: translate3d(-10px, -10px, 0) rotate(4deg); }
|
|
78% { transform: translate3d(6px, 4px, 0) rotate(-2deg); }
|
|
100% { transform: translate3d(0, 0, 0) rotate(0deg); }
|
|
}
|
|
@keyframes mascotSqueeze {
|
|
0% { transform: translateY(0) scale(1); }
|
|
28% { transform: translateY(6px) scale(0.92, 1.04); }
|
|
55% { transform: translateY(-16px) scale(1.08, 0.94); }
|
|
80% { transform: translateY(2px) scale(0.98, 1.02); }
|
|
100% { transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
/* 动效仅在用户未要求减少动效时启用 */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.mascot-float { animation: mascotBob 2.8s ease-in-out infinite; }
|
|
.mascot-float[data-mood="wave"] .mascot-arm {
|
|
transform-box: fill-box;
|
|
transform-origin: 0% 100%;
|
|
animation: mascotWave 1s ease-in-out infinite;
|
|
}
|
|
.mascot-float[data-mood="think"] .mascot-dots circle {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: dotPulse 1.4s ease-in-out infinite;
|
|
}
|
|
.mascot-float[data-mood="think"] .mascot-dots circle:nth-child(2) { animation-delay: 0.2s; }
|
|
.mascot-float[data-mood="think"] .mascot-dots circle:nth-child(3) { animation-delay: 0.4s; }
|
|
.mascot-float[data-mood="cheer"] { animation: mascotCheer 0.7s ease-in-out infinite; }
|
|
.mascot-float[data-mood="cheer"] .mascot-sparks path {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: sparkle 1.2s ease-in-out infinite;
|
|
}
|
|
.mascot-float[data-mood="cheer"] .mascot-sparks path:nth-child(2) { animation-delay: 0.3s; }
|
|
}
|
|
|
|
@keyframes mascotBob {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-5px); }
|
|
}
|
|
@keyframes mascotWave {
|
|
0%, 100% { transform: rotate(-12deg); }
|
|
50% { transform: rotate(16deg); }
|
|
}
|
|
@keyframes mascotCheer {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-9px); }
|
|
}
|
|
@keyframes dotPulse {
|
|
0%, 100% { opacity: 0.35; transform: scale(0.8); }
|
|
50% { opacity: 1; transform: scale(1); }
|
|
}
|
|
@keyframes sparkle {
|
|
0%, 100% { opacity: 0; transform: scale(0.4); }
|
|
50% { opacity: 1; transform: scale(1); }
|
|
}
|
|
@keyframes bubbleIn {
|
|
from { opacity: 0; transform: translateY(8px) scale(0.96); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
/* 吉祥物进场/戳戳动效的降级（尊重 prefers-reduced-motion） */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mascot-root {
|
|
transition: opacity 0.2s ease;
|
|
transform: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.mascot-root.has-entered {
|
|
animation: none !important;
|
|
}
|
|
.mascot-float,
|
|
.mascot-float[data-mood="squeeze"],
|
|
.mascot-float[data-mood="wave"] .mascot-arm,
|
|
.mascot-float[data-mood="think"] .mascot-dots circle,
|
|
.mascot-float[data-mood="cheer"],
|
|
.mascot-float[data-mood="cheer"] .mascot-sparks path,
|
|
.mascot-float[data-mood="squeeze"] .mascot-arm,
|
|
.mascot-float[data-mood="squeeze"] .mascot-dots circle,
|
|
.mascot-float[data-mood="squeeze"] .mascot-sparks path {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
/* ================================================================
|
|
Hero 背景：环绕中央玻璃球的精致轨道粒子动画
|
|
- 7 圈轨道（半径 110~275px），明确围绕玻璃球外侧公转
|
|
- 16 颗精致小点（3~6px），白核 + 淡蓝边缘，光晕柔和不抢戏
|
|
- 每点带轻微脉冲（3s，stagger），整体节奏从容
|
|
- 锚点对齐 hero-bg.jpg 中央玻璃球（约 70% / 38%）
|
|
- 仅动 transform / opacity（GPU 友好）
|
|
================================================================ */
|
|
.hero-orbit {
|
|
position: absolute;
|
|
left: 70%;
|
|
top: 46%;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
@media (max-width: 640px) {
|
|
/* 窄屏下图片横向裁切更多，球偏右；轨道中心随之下移以贴近主体 */
|
|
.hero-orbit { left: 77%; top: 48%; }
|
|
}
|
|
.hero-ring {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
transform-origin: 0 0;
|
|
animation: heroOrbitSpin 12s linear infinite;
|
|
}
|
|
.hero-orbit-slot {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
transform-origin: 0 0;
|
|
/* 预旋转到角度 a，再向外推 r —— 父级 .hero-ring 旋转时整圈绕中心公转 */
|
|
transform: rotate(var(--a, 0deg)) translateY(calc(-1 * var(--r, 50px)));
|
|
}
|
|
.hero-orbit-dot {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 50%;
|
|
/* 柔和径向渐变：白核 → 淡蓝雾化 → 透明，告别"硬光球"观感 */
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(255, 255, 255, 0.95) 0%,
|
|
rgba(255, 255, 255, 0.55) 30%,
|
|
rgba(186, 204, 255, 0.32) 60%,
|
|
rgba(186, 204, 255, 0) 80%
|
|
);
|
|
box-shadow:
|
|
0 0 6px rgba(255, 255, 255, 0.55),
|
|
0 0 14px rgba(186, 204, 255, 0.32);
|
|
transform: translate(-50%, -50%);
|
|
will-change: transform, opacity;
|
|
animation: heroOrbitPulse 3.2s ease-in-out infinite;
|
|
}
|
|
|
|
/* 彗星拖尾：沿轨道切线方向（slot 局部 ±X 轴），公转时自然拖在运动后方
|
|
- normal 公转（顺时针）→ 拖尾在 -X（dot 左侧）
|
|
- reverse 公转（逆时针）→ 拖尾镜像到 +X（dot 右侧），见 .is-rev 覆盖
|
|
- 跟随 dot 的 pulse 一起呼吸/缩放，无需单独动画 */
|
|
.hero-orbit-dot::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 50%;
|
|
transform: translateY(-50%);
|
|
width: 22px;
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: linear-gradient(
|
|
to left,
|
|
rgba(255, 255, 255, 0.9) 0%,
|
|
rgba(186, 204, 255, 0.55) 35%,
|
|
rgba(186, 204, 255, 0) 100%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
.hero-ring.is-rev .hero-orbit-dot::before {
|
|
right: auto;
|
|
left: 50%;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(255, 255, 255, 0.9) 0%,
|
|
rgba(186, 204, 255, 0.55) 35%,
|
|
rgba(186, 204, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
@keyframes heroOrbitSpin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 轻微呼吸：相位由 inline animationDelay 注入（每颗错开 0.35s），避免齐刷刷 */
|
|
@keyframes heroOrbitPulse {
|
|
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.85); }
|
|
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
|
|
}
|
|
|
|
/* ===== 轨道粒子 4 色变体（白/蓝/紫/粉）+ 加长彗星拖尾 ===== */
|
|
.hero-orbit-dot.dot-white {
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(255, 255, 255, 0.98) 0%,
|
|
rgba(255, 255, 255, 0.6) 30%,
|
|
rgba(220, 230, 255, 0.35) 60%,
|
|
rgba(220, 230, 255, 0) 82%
|
|
);
|
|
box-shadow: 0 0 8px rgba(255, 255, 255, 0.55), 0 0 18px rgba(210, 220, 255, 0.28);
|
|
}
|
|
.hero-orbit-dot.dot-white::before {
|
|
width: 32px;
|
|
background: linear-gradient(
|
|
to left,
|
|
rgba(255, 255, 255, 0.88) 0%,
|
|
rgba(200, 215, 255, 0.45) 40%,
|
|
rgba(200, 215, 255, 0) 100%
|
|
);
|
|
}
|
|
.hero-ring.is-rev .hero-orbit-dot.dot-white::before {
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(255, 255, 255, 0.88) 0%,
|
|
rgba(200, 215, 255, 0.45) 40%,
|
|
rgba(200, 215, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
.hero-orbit-dot.dot-blue {
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(210, 225, 255, 0.98) 0%,
|
|
rgba(120, 160, 255, 0.62) 32%,
|
|
rgba(70, 110, 255, 0.30) 62%,
|
|
rgba(70, 110, 255, 0) 84%
|
|
);
|
|
box-shadow: 0 0 8px rgba(120, 160, 255, 0.55), 0 0 20px rgba(61, 90, 254, 0.32);
|
|
}
|
|
.hero-orbit-dot.dot-blue::before {
|
|
width: 36px;
|
|
background: linear-gradient(
|
|
to left,
|
|
rgba(170, 198, 255, 0.9) 0%,
|
|
rgba(85, 125, 255, 0.45) 42%,
|
|
rgba(85, 125, 255, 0) 100%
|
|
);
|
|
}
|
|
.hero-ring.is-rev .hero-orbit-dot.dot-blue::before {
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(170, 198, 255, 0.9) 0%,
|
|
rgba(85, 125, 255, 0.45) 42%,
|
|
rgba(85, 125, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
.hero-orbit-dot.dot-violet {
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(232, 220, 255, 0.98) 0%,
|
|
rgba(185, 155, 255, 0.60) 32%,
|
|
rgba(150, 110, 255, 0.28) 62%,
|
|
rgba(150, 110, 255, 0) 84%
|
|
);
|
|
box-shadow: 0 0 8px rgba(185, 155, 255, 0.55), 0 0 20px rgba(150, 110, 255, 0.30);
|
|
}
|
|
.hero-orbit-dot.dot-violet::before {
|
|
width: 34px;
|
|
background: linear-gradient(
|
|
to left,
|
|
rgba(220, 205, 255, 0.9) 0%,
|
|
rgba(160, 130, 255, 0.44) 42%,
|
|
rgba(160, 130, 255, 0) 100%
|
|
);
|
|
}
|
|
.hero-ring.is-rev .hero-orbit-dot.dot-violet::before {
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(220, 205, 255, 0.9) 0%,
|
|
rgba(160, 130, 255, 0.44) 42%,
|
|
rgba(160, 130, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
.hero-orbit-dot.dot-pink {
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(255, 230, 240, 0.98) 0%,
|
|
rgba(255, 170, 205, 0.58) 32%,
|
|
rgba(255, 125, 180, 0.26) 62%,
|
|
rgba(255, 125, 180, 0) 84%
|
|
);
|
|
box-shadow: 0 0 8px rgba(255, 170, 205, 0.52), 0 0 20px rgba(255, 125, 180, 0.28);
|
|
}
|
|
.hero-orbit-dot.dot-pink::before {
|
|
width: 32px;
|
|
background: linear-gradient(
|
|
to left,
|
|
rgba(255, 215, 230, 0.9) 0%,
|
|
rgba(255, 145, 193, 0.42) 42%,
|
|
rgba(255, 145, 193, 0) 100%
|
|
);
|
|
}
|
|
.hero-ring.is-rev .hero-orbit-dot.dot-pink::before {
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(255, 215, 230, 0.9) 0%,
|
|
rgba(255, 145, 193, 0.42) 42%,
|
|
rgba(255, 145, 193, 0) 100%
|
|
);
|
|
}
|
|
|
|
/* ===== 雾化光晕 orb：超大 blur 圆，静止不漂（浅底可见版：透明度×2.2） ===== */
|
|
.hero-glow-orb {
|
|
position: absolute;
|
|
left: var(--orb-x);
|
|
top: var(--orb-y);
|
|
width: calc(var(--orb-sz) * 1.15); /* 尺寸 ×1.15，浅底上更有存在感 */
|
|
height: calc(var(--orb-sz) * 1.15);
|
|
border-radius: 9999px;
|
|
background: radial-gradient(circle, var(--orb-color) 0%, transparent 80%);
|
|
filter: blur(32px); /* 原 28px → 略增大，扩散感更强 */
|
|
opacity: 1.0; /* 原 0.85 → ×1.18，完全可见 */
|
|
mix-blend-mode: multiply;/* 浅底叠加更柔和，不突兀 */
|
|
animation-duration: 18s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
will-change: transform;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
@keyframes hero-orb-float-1 {
|
|
0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
|
|
33% { transform: translate(-50%, -50%) translate(40px, -30px) scale(1.08); }
|
|
66% { transform: translate(-50%, -50%) translate(-30px, 25px) scale(0.94); }
|
|
}
|
|
@keyframes hero-orb-float-2 {
|
|
0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
|
|
40% { transform: translate(-50%, -50%) translate(-36px, 30px) scale(1.05); }
|
|
75% { transform: translate(-50%, -50%) translate(28px, -28px) scale(0.97); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-ring { animation: none; }
|
|
.hero-orbit-dot { animation: none; opacity: 0.82; }
|
|
.hero-glow-orb { animation: none; }
|
|
}
|
|
|
|
/* ===== 方案B：用户不喜欢"游来游去" → 全部停移动，保留呼吸闪烁 ===== */
|
|
.hero-ring {
|
|
animation: none !important;
|
|
}
|
|
.hero-glow-orb {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* 轨道粒子：去掉彗星游动拖尾 → 改成静态"星芒放射"（4 向渐变光线） */
|
|
.hero-orbit-dot::before,
|
|
.hero-ring.is-rev .hero-orbit-dot::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 220%;
|
|
height: 220%;
|
|
border-radius: 9999px;
|
|
background:
|
|
radial-gradient(
|
|
ellipse at 50% 50%,
|
|
rgba(255, 255, 255, 0.0) 0%,
|
|
rgba(255, 255, 255, 0.0) 28%,
|
|
rgba(255, 255, 255, 0.0) 100%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
.hero-orbit-dot.dot-white::before {
|
|
background:
|
|
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.60) 42%, rgba(255,255,255,0.0) 54%),
|
|
linear-gradient(to right, transparent 48%, rgba(255,255,255,0.48) 50%, transparent 52%),
|
|
linear-gradient(to bottom, transparent 48%, rgba(255,255,255,0.48) 50%, transparent 52%),
|
|
linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.30) 50%, transparent 52%),
|
|
linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.30) 50%, transparent 52%);
|
|
}
|
|
.hero-orbit-dot.dot-blue::before {
|
|
background:
|
|
radial-gradient(circle at 50% 50%, rgba(80,125,255,0.0) 30%, rgba(80,125,255,0.60) 42%, rgba(80,125,255,0.0) 54%),
|
|
linear-gradient(to right, transparent 48%, rgba(80,125,255,0.48) 50%, transparent 52%),
|
|
linear-gradient(to bottom, transparent 48%, rgba(80,125,255,0.48) 50%, transparent 52%),
|
|
linear-gradient(45deg, transparent 48%, rgba(80,125,255,0.30) 50%, transparent 52%),
|
|
linear-gradient(-45deg, transparent 48%, rgba(80,125,255,0.30) 50%, transparent 52%);
|
|
}
|
|
.hero-orbit-dot.dot-violet::before {
|
|
background:
|
|
radial-gradient(circle at 50% 50%, rgba(135,100,255,0.0) 30%, rgba(135,100,255,0.60) 42%, rgba(135,100,255,0.0) 54%),
|
|
linear-gradient(to right, transparent 48%, rgba(135,100,255,0.48) 50%, transparent 52%),
|
|
linear-gradient(to bottom, transparent 48%, rgba(135,100,255,0.48) 50%, transparent 52%),
|
|
linear-gradient(45deg, transparent 48%, rgba(135,100,255,0.30) 50%, transparent 52%),
|
|
linear-gradient(-45deg, transparent 48%, rgba(135,100,255,0.30) 50%, transparent 52%);
|
|
}
|
|
.hero-orbit-dot.dot-pink::before {
|
|
background:
|
|
radial-gradient(circle at 50% 50%, rgba(255,105,175,0.0) 30%, rgba(255,105,175,0.60) 42%, rgba(255,105,175,0.0) 54%),
|
|
linear-gradient(to right, transparent 48%, rgba(255,105,175,0.48) 50%, transparent 52%),
|
|
linear-gradient(to bottom, transparent 48%, rgba(255,105,175,0.48) 50%, transparent 52%),
|
|
linear-gradient(45deg, transparent 48%, rgba(255,105,175,0.30) 50%, transparent 52%),
|
|
linear-gradient(-45deg, transparent 48%, rgba(255,105,175,0.30) 50%, transparent 52%);
|
|
}
|
|
|
|
/* HERO 左下文字（h1 / p / a）在浅底 hero-bg.jpg 上的可读阴影，保证不蒙层时也清晰 */
|
|
.hero-text-visible h1.text-white,
|
|
.hero-text-visible p.text-white,
|
|
.hero-text-visible p.text-white\/90,
|
|
.hero-text-visible a.text-white {
|
|
text-shadow:
|
|
0 2px 14px rgba(10, 14, 42, 0.58),
|
|
0 0 36px rgba(10, 14, 42, 0.28);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.hero-text-visible a.text-white {
|
|
text-shadow:
|
|
0 1px 10px rgba(10, 14, 42, 0.65);
|
|
border-bottom-color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hero-glow-orb { filter: blur(18px); opacity: 0.7; }
|
|
}
|
|
|
|
/* ================================================================
|
|
公司概览：中心节点辐射网络图（深色科技感）
|
|
- 中心「巴适伙伴」+ 6 个可点击子节点，SVG 发光线连接
|
|
- 点击节点 → 下方详情面板展开（交互在 OrgNetwork.tsx）
|
|
================================================================ */
|
|
.org-shell {
|
|
position: relative;
|
|
max-width: 720px;
|
|
margin: 28px auto 0;
|
|
padding: 24px;
|
|
border-radius: 32px;
|
|
background:
|
|
radial-gradient(circle at 50% 30%, rgba(61, 90, 254, 0.14), transparent 65%),
|
|
linear-gradient(160deg, #0a0e2a 0%, #14182f 55%, #1d2150 100%);
|
|
box-shadow:
|
|
inset 0 0 80px rgba(61, 90, 254, 0.10),
|
|
0 24px 60px -28px rgba(10, 14, 42, 0.45);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.org-net {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at 50% 50%, rgba(61, 90, 254, 0.18), transparent 62%),
|
|
linear-gradient(135deg, #0a0e2a 0%, #14182f 50%, #1d2150 100%);
|
|
box-shadow: inset 0 0 60px rgba(61, 90, 254, 0.12);
|
|
}
|
|
|
|
.org-lines {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.org-line {
|
|
stroke: rgba(120, 140, 255, 0.32);
|
|
stroke-width: 1.5;
|
|
vector-effect: non-scaling-stroke;
|
|
transition: stroke 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
.org-line.is-active {
|
|
stroke: var(--brand-accent);
|
|
stroke-width: 2.5;
|
|
filter: drop-shadow(0 0 4px rgba(61, 90, 254, 0.9));
|
|
}
|
|
|
|
.org-node {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
padding: 10px 14px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
color: #fff;
|
|
-webkit-backdrop-filter: blur(6px);
|
|
backdrop-filter: blur(6px);
|
|
cursor: pointer;
|
|
transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
|
|
font-size: var(--fs-micro);
|
|
white-space: nowrap;
|
|
}
|
|
.org-node:hover {
|
|
border-color: var(--brand-accent);
|
|
background: rgba(61, 90, 254, 0.18);
|
|
box-shadow: 0 0 18px rgba(61, 90, 254, 0.5);
|
|
}
|
|
.org-node.is-active {
|
|
border-color: var(--brand-accent);
|
|
background: rgba(61, 90, 254, 0.28);
|
|
box-shadow: 0 0 22px rgba(61, 90, 254, 0.7);
|
|
}
|
|
|
|
.org-node-center {
|
|
padding: 16px 22px;
|
|
font-size: var(--fs-body);
|
|
background: rgba(61, 90, 254, 0.25);
|
|
border-color: var(--brand-accent);
|
|
}
|
|
.org-node-title {
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
.org-node-sub {
|
|
font-size: var(--fs-micro);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ===== 无障碍工具类（WCAG 2.4.1 Bypass Blocks + 2.5.8 Target Size）=====
|
|
sr-only：视觉隐藏但屏幕阅读器可读。
|
|
skip-link：默认隐藏，键盘 Tab 聚焦时显现，跳到主内容（绕过重复导航）。
|
|
触控目标：桌面端导航 ≈24px（达 AA 24px 最小值），移动端导航 py-2.5≈44px（达 AAA）。 */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
.skip-link {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 1rem;
|
|
z-index: 100;
|
|
padding: 0.6rem 1rem;
|
|
border-radius: var(--radius-md);
|
|
background: var(--brand-white);
|
|
color: var(--brand-black);
|
|
border: 2px solid var(--focus-ring);
|
|
box-shadow: var(--shadow-md);
|
|
font-weight: 600;
|
|
transform: translateY(-150%);
|
|
transition: transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
.skip-link:focus {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.org-panel {
|
|
max-width: 720px;
|
|
margin: 20px auto 0;
|
|
min-height: 96px;
|
|
padding: 20px 24px;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
color: #e9ecff;
|
|
}
|
|
.org-panel-title {
|
|
font-size: var(--fs-body);
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
.org-panel-desc {
|
|
margin-top: 8px;
|
|
line-height: 1.8;
|
|
color: rgba(233, 236, 255, 0.85);
|
|
font-size: var(--fs-body);
|
|
}
|
|
.org-panel-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 12px;
|
|
color: var(--brand-accent);
|
|
font-weight: 600;
|
|
font-size: var(--fs-body);
|
|
transition: gap 0.2s ease;
|
|
}
|
|
.org-panel-link:hover {
|
|
gap: 10px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.org-net { aspect-ratio: 1 / 1; }
|
|
.org-node {
|
|
font-size: var(--fs-micro);
|
|
padding: 7px 10px;
|
|
}
|
|
.org-node-center {
|
|
font-size: var(--fs-micro);
|
|
padding: 12px 16px;
|
|
}
|
|
}
|
|
|
|
/* ===== 数字生活生态全景图（EcosystemMap · 首页3受众×业务页4赛道 的桥）=====
|
|
依据 business-architecture.md §4 已确认矩阵。同一组 10 产品，赛道/受众双视角。
|
|
动效：中心心跳 + 连接线能量流 + 节点轻浮；prefers-reduced-motion 由全局守卫降级。 */
|
|
.eco-shell {
|
|
max-width: 1120px;
|
|
margin: 0 auto;
|
|
}
|
|
.eco-lens {
|
|
display: inline-flex;
|
|
padding: 4px;
|
|
gap: 4px;
|
|
border-radius: var(--radius-xl);
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-light);
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
.eco-lens-btn {
|
|
appearance: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.5rem 1.1rem;
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--fs-body-sm);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
background: transparent;
|
|
transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
|
|
}
|
|
.eco-lens-btn:hover { color: var(--brand-black); }
|
|
.eco-lens-btn.is-active {
|
|
color: #fff;
|
|
background: var(--brand-accent-deep);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.eco-lens-btn:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.eco-body {
|
|
margin-top: var(--space-5);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-5);
|
|
}
|
|
@media (min-width: 880px) {
|
|
.eco-body { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
|
|
}
|
|
|
|
.eco-stage {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
max-height: 560px;
|
|
border-radius: var(--radius-xl);
|
|
background:
|
|
radial-gradient(ellipse 70% 60% at 50% 50%, rgba(235,234,246,0.55), transparent 70%),
|
|
var(--bg-primary);
|
|
border: 1px solid var(--border-light);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
}
|
|
/* 极淡网格底纹，premium 纹理不抢戏 */
|
|
.eco-stage::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(26,26,26,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(26,26,26,0.03) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
background-position: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.eco-lines {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.eco-line {
|
|
stroke: var(--brand-accent);
|
|
stroke-width: 1.5;
|
|
stroke-dasharray: 3 4;
|
|
vector-effect: non-scaling-stroke;
|
|
opacity: 0.35;
|
|
animation: ecoDash 3.2s linear infinite;
|
|
transition: opacity var(--duration-normal) var(--ease-out), stroke var(--duration-normal) var(--ease-out);
|
|
}
|
|
.eco-line.is-active {
|
|
opacity: 0.9;
|
|
stroke: var(--brand-accent-deep);
|
|
stroke-width: 2;
|
|
animation-duration: 1.6s;
|
|
}
|
|
@keyframes ecoDash {
|
|
to { stroke-dashoffset: -7; }
|
|
}
|
|
|
|
/* 中心枢纽 */
|
|
.eco-hub {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1px;
|
|
padding: 1.1rem 1.4rem;
|
|
border-radius: var(--radius-xl);
|
|
background: var(--brand-black);
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-lg);
|
|
transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
|
|
}
|
|
.eco-hub:hover { transform: translate(-50%, -50%) scale(1.04); }
|
|
.eco-hub:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
|
|
.eco-hub.is-active { box-shadow: 0 0 0 3px var(--brand-accent), var(--shadow-lg); }
|
|
.eco-hub-glow {
|
|
position: absolute;
|
|
inset: -10px;
|
|
border-radius: inherit;
|
|
background: radial-gradient(circle, rgba(235,234,246,0.55) 0%, transparent 70%);
|
|
z-index: -1;
|
|
animation: ecoPulse 3.6s ease-in-out infinite;
|
|
}
|
|
@keyframes ecoPulse {
|
|
0%, 100% { opacity: 0.5; transform: scale(1); }
|
|
50% { opacity: 0.9; transform: scale(1.12); }
|
|
}
|
|
.eco-hub-title { font-size: var(--fs-body); font-weight: 800; letter-spacing: 0.01em; }
|
|
.eco-hub-sub { font-size: var(--fs-micro); opacity: 0.7; letter-spacing: 0.08em; }
|
|
|
|
/* 赛道 / 受众 节点 */
|
|
.eco-node {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 0.6rem 0.85rem;
|
|
border-radius: var(--radius-lg);
|
|
background: rgba(255,255,255,0.85);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--border-light);
|
|
box-shadow: var(--shadow-xs);
|
|
cursor: pointer;
|
|
transition: box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
|
|
animation: ecoFloat 6s ease-in-out infinite;
|
|
animation-delay: var(--dly, 0s);
|
|
}
|
|
.eco-node:hover { box-shadow: var(--shadow-md); border-color: var(--brand-accent); }
|
|
.eco-node:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
|
|
.eco-node.is-active {
|
|
border-color: var(--brand-accent-deep);
|
|
box-shadow: 0 0 0 2px var(--brand-accent), var(--shadow-md);
|
|
}
|
|
/* float 不破坏 translate(-50%,-50%) 居中：完整保留居中分量 */
|
|
@keyframes ecoFloat {
|
|
0%, 100% { transform: translate(-50%, -50%); }
|
|
50% { transform: translate(-50%, calc(-50% - 4px)); }
|
|
}
|
|
.eco-node-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in oklch, var(--brand-accent) 10%, transparent);
|
|
color: var(--brand-accent-deep);
|
|
}
|
|
.eco-node-name { font-size: var(--fs-body); font-weight: 700; color: var(--brand-black); white-space: nowrap; }
|
|
.eco-node-action { font-size: var(--fs-micro); color: var(--brand-accent); font-weight: 600; letter-spacing: 0.06em; }
|
|
.eco-node-count {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
padding: 0 5px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
background: var(--brand-accent-deep);
|
|
color: #fff;
|
|
font-size: var(--fs-micro);
|
|
font-weight: 700;
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
/* 详情面板 */
|
|
.eco-panel {
|
|
padding: var(--space-4);
|
|
border-radius: var(--radius-xl);
|
|
background: rgba(255,255,255,0.7);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--border-light);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.eco-panel-title { margin-top: 0.5rem; font-size: var(--fs-body); font-weight: 800; color: var(--brand-black); }
|
|
.eco-panel-note { margin-top: 0.35rem; font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; }
|
|
.eco-products { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 0.5rem; list-style: none; padding: 0; }
|
|
.eco-product {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
padding: 0.6rem 0.75rem;
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-light);
|
|
transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
.eco-product:hover { border-color: var(--brand-accent); transform: translateX(2px); }
|
|
.eco-product-icon { color: var(--brand-accent-deep); padding-top: 1px; flex-shrink: 0; }
|
|
.eco-product-main { min-width: 0; flex: 1; }
|
|
.eco-product-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
|
|
.eco-product-name { font-size: var(--fs-body); font-weight: 700; color: var(--brand-black); }
|
|
.eco-product-desc { margin-top: 0.15rem; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; }
|
|
|
|
/* 受众标记：C=蓝 B=绿 F=紫（与品牌蓝/状态青绿/创新紫呼应） */
|
|
.eco-aud-dots { display: inline-flex; gap: 3px; margin-left: auto; }
|
|
.eco-dot {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 999px;
|
|
font-size: var(--fs-micro);
|
|
font-weight: 800;
|
|
color: #fff;
|
|
letter-spacing: 0;
|
|
}
|
|
.eco-dot-c { background: var(--brand-accent); }
|
|
.eco-dot-b { background: var(--status-done); }
|
|
.eco-dot-f { background: var(--icidp-innovation); }
|
|
|
|
.eco-legend {
|
|
margin-top: var(--space-4);
|
|
text-align: center;
|
|
font-size: var(--fs-micro);
|
|
color: var(--text-muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* 移动端：舞台缩小、节点紧凑、面板下移 */
|
|
@media (max-width: 879px) {
|
|
.eco-stage { aspect-ratio: 1 / 1; max-height: 440px; }
|
|
.eco-node { padding: 0.45rem 0.6rem; }
|
|
.eco-node-icon { width: 28px; height: 28px; }
|
|
.eco-node-name { font-size: var(--fs-micro); }
|
|
.eco-node-action { font-size: var(--fs-micro); }
|
|
.eco-hub { padding: 0.75rem 1rem; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.eco-node-count { min-width: 18px; height: 18px; font-size: var(--fs-micro); }
|
|
.eco-lens-btn { padding: 0.4rem 0.85rem; }
|
|
}
|
|
|