/* ========================================================================== 玥耀 FPGA — Design Tokens（设计令牌） Version 1.0 | 深色工程科技风格 所有颜色、字号、间距、圆角、阴影均在此定义，组件层不得出现硬编码值。 ========================================================================== */ :root { /* ------------------------------------------------------------------ COLOR / 表面层 —— 深黑蓝 & 石墨黑 ------------------------------------------------------------------ */ --c-bg-900: #080B12; /* 页面基底 */ --c-bg-800: #0B0F18; /* 区块背景 */ --c-bg-700: #111827; /* 卡片背景 */ --c-bg-600: #151D2E; /* 卡片悬停 / 次级表面 */ --c-bg-500: #1B2436; /* 输入框 / 内嵌面板 */ --c-bg-glass: rgba(11, 15, 24, 0.72); /* 悬浮导航玻璃层（克制使用） */ /* ------------------------------------------------------------------ COLOR / 品牌与强调 ------------------------------------------------------------------ */ --c-brand-50: #EFF6FF; --c-brand-200: #BFDBFE; --c-brand-300: #93C5FD; --c-brand-400: #60A5FA; --c-brand-500: #3B82F6; /* 品牌主色 · 月光蓝 */ --c-brand-600: #2563EB; --c-brand-700: #1D4ED8; --c-accent-300: #67E8F9; --c-accent-400: #22D3EE; /* 辅助高亮 · 冷青 */ --c-accent-500: #06B6D4; --c-violet-500: #7C3AED; /* 紫色光晕 · 仅装饰，禁止用于文字层级 */ /* ------------------------------------------------------------------ COLOR / 文字（均基于 --c-bg-900 校验 WCAG AA） ------------------------------------------------------------------ */ --c-text-100: #F8FAFC; /* 主标题 / 关键数值 —— 18.4:1 */ --c-text-200: #CBD5E1; /* 正文（长文） —— 12.6:1 */ --c-text-300: #94A3B8; /* 次要说明 / 标签 —— 7.5:1 */ --c-text-400: #64748B; /* 仅限 ≥24px 大字 / 装饰线，禁止用于正文 —— 4.0:1 */ /* ------------------------------------------------------------------ COLOR / 语义状态 ------------------------------------------------------------------ */ --c-success: #34D399; --c-warning: #FBBF24; --c-danger: #F87171; --c-info: #60A5FA; /* ------------------------------------------------------------------ COLOR / 边框与分隔 ------------------------------------------------------------------ */ --c-border: rgba(148, 163, 184, 0.18); --c-border-soft: rgba(148, 163, 184, 0.10); --c-border-strong: rgba(148, 163, 184, 0.34); --c-border-brand: rgba(59, 130, 246, 0.55); --c-border-accent: rgba(34, 211, 238, 0.50); /* ------------------------------------------------------------------ COLOR / 光效（克制：单层、低透明度） ------------------------------------------------------------------ */ --glow-brand: 0 0 0 1px rgba(59, 130, 246, 0.28), 0 0 24px -6px rgba(59, 130, 246, 0.42); --glow-accent: 0 0 0 1px rgba(34, 211, 238, 0.28), 0 0 22px -6px rgba(34, 211, 238, 0.36); --glow-inset: inset 0 1px 0 0 rgba(248, 250, 252, 0.05); /* ------------------------------------------------------------------ FONT / 字族 ------------------------------------------------------------------ */ --font-sans: "MiSans", "HarmonyOS Sans SC", "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; --font-display: "Space Grotesk", "Exo 2", var(--font-sans); --font-mono: "IBM Plex Mono", "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace; /* ------------------------------------------------------------------ FONT / 字号阶梯（正文最小 16px） ------------------------------------------------------------------ */ --fs-caption: 0.8125rem; /* 13px —— 仅限角标 / 表格表头等短文本 */ --fs-sm: 0.875rem; /* 14px —— 辅助说明 */ --fs-body: 1rem; /* 16px —— 正文基准（下限） */ --fs-lead: 1.125rem; /* 18px —— 导语 */ --fs-h4: 1.25rem; /* 20px */ --fs-h3: 1.5rem; /* 24px */ --fs-h2: 2rem; /* 32px */ --fs-h1: 2.75rem; /* 44px */ --fs-display: 3.5rem; /* 56px —— Hero 主标题（≥1024px） */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55; --lh-loose: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.06em; --ls-wider: 0.14em; /* 全大写英文小标签 */ /* ------------------------------------------------------------------ SPACE / 间距（4px 基准） ------------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* 区块垂直节奏 */ --section-y: 96px; --section-y-sm: 64px; /* ------------------------------------------------------------------ RADIUS / 圆角（10–16px 区间为卡片主区间） ------------------------------------------------------------------ */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ------------------------------------------------------------------ SHADOW / 层级 ------------------------------------------------------------------ */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-md: 0 8px 24px -10px rgba(0, 0, 0, 0.7); --sh-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.85); /* ------------------------------------------------------------------ TRANSITION / 动效（克制，150–400ms） ------------------------------------------------------------------ */ --t-fast: 150ms cubic-bezier(0.2, 0.6, 0.3, 1); --t-base: 240ms cubic-bezier(0.2, 0.6, 0.3, 1); --t-slow: 400ms cubic-bezier(0.2, 0.6, 0.3, 1); /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --container-max: 1240px; /* 1440 视口下的内容宽度 */ --gutter: var(--sp-6); /* 24px 栅格间距 */ --nav-h: 68px; --z-nav: 100; --toolbar-h: 56px; /* 产品中心粘性工具条高度 */ --catalog-rail-w: 236px; /* 产品中心分类栏固定宽度 */ --card-gap: var(--sp-5); /* 产品卡片栅格间距 */ --z-drawer: 200; --z-bg: -1; /* 动态背景层：位于画布之上、所有内容之下 */ /* ------------------------------------------------------------------ COLOR / 动态背景层（黑/白两套值，见 [data-theme="light"] 与 theme.css） 全部前台页面启用（由 tools/theme-site.py 注入主题能力）。 ------------------------------------------------------------------ */ --bg-canvas: #080B12; --bg-grid: rgba(148, 163, 184, 0.055); --bg-aurora-1: rgba(59, 130, 246, 0.20); --bg-aurora-2: rgba(34, 211, 238, 0.13); --bg-aurora-3: rgba(124, 58, 237, 0.14); --bg-trace: rgba(59, 130, 246, 0.34); --bg-veil: rgba(8, 11, 18, 0.46); /* 让原生控件（下拉列表、滚动条、日期选择器）跟随主题 */ color-scheme: dark; } /* 平板 */ @media (max-width: 1023px) { :root { --fs-display: 2.5rem; /* 40px */ --fs-h1: 2.125rem; /* 34px */ --fs-h2: 1.75rem; /* 28px */ --section-y: 72px; --gutter: var(--sp-5); } } /* 移动 */ @media (max-width: 767px) { :root { --fs-display: 2rem; /* 32px */ --fs-h1: 1.75rem; /* 28px */ --fs-h2: 1.5rem; /* 24px */ --fs-h3: 1.3125rem; /* 21px */ --section-y: 56px; --gutter: var(--sp-4); --container-max: 100%; } } /* ========================================================================== THEME / 浅色主题（白） -------------------------------------------------------------------------- 仅当 时生效；未设置该属性的页面保持深色主题， 因此后台与其余前台内页完全不受影响。 所有色值均已核算对比度（基准：白卡 #FFFFFF / 画布 #F2F5FA）： text-100 18.40:1 text-200 13.03:1 text-300 6.15:1 text-400 4.97:1 brand-300/600 5.17:1（白字填充亦 5.17:1） accent-400 5.36:1 success 5.48:1 warning 5.02:1 danger 6.47:1 info 6.70:1 ========================================================================== */ [data-theme="light"] { /* --- 表面：画布微带蓝调，卡片纯白，靠边框与阴影建立层级 --- */ --c-bg-900: #F2F5FA; /* 页面画布（让动态背景可见） */ --c-bg-800: #FFFFFF; /* 区块 / 表头 */ --c-bg-700: #FFFFFF; /* 卡片 */ --c-bg-600: #F5F8FC; /* 卡片悬停 / 次级表面 */ --c-bg-500: #FFFFFF; /* 输入框（纯白 + 边框，保证占位符对比度达标） */ --c-bg-glass: rgba(255, 255, 255, 0.78); /* --- 品牌与强调：低阶色整体加深，保证在白底上仍可作文字与图标用色 --- */ --c-brand-50: #EFF6FF; --c-brand-200: #BFDBFE; --c-brand-300: #2563EB; /* 图标 / 小字 —— 5.17:1 */ --c-brand-400: #1D4ED8; /* 强调文字 —— 6.70:1 */ --c-brand-500: #3B82F6; /* 边框 / 图形 —— 3.68:1（仅图形） */ --c-brand-600: #2563EB; /* 按钮填充：白字 5.17:1 */ --c-brand-700: #1E40AF; --c-accent-300: #0E7490; /* 5.36:1 */ --c-accent-400: #0E7490; --c-accent-500: #155E75; --c-violet-500: #6D28D9; /* 仅装饰 —— 7.10:1 */ /* --- 文字 --- */ --c-text-100: #0C1424; /* 18.40:1 */ --c-text-200: #253148; /* 13.03:1 */ --c-text-300: #55627A; /* 6.15:1 */ --c-text-400: #667085; /* 4.97:1 —— 浅色主题下也可承载正文级文字 */ /* --- 语义状态 --- */ --c-success: #047857; --c-warning: #B45309; --c-danger: #B91C1C; --c-info: #1D4ED8; /* --- 边框：由「浅色半透明」改为「深墨半透明」 --- */ --c-border: rgba(17, 30, 56, 0.14); --c-border-soft: rgba(17, 30, 56, 0.08); --c-border-strong: rgba(17, 30, 56, 0.24); --c-border-brand: rgba(37, 99, 235, 0.42); --c-border-accent: rgba(14, 116, 144, 0.40); /* --- 光效：白底不能靠发光，改为「描边 + 柔和投影」 --- */ --glow-brand: 0 0 0 1px rgba(37, 99, 235, 0.20), 0 10px 26px -12px rgba(37, 99, 235, 0.34); --glow-accent: 0 0 0 1px rgba(14, 116, 144, 0.20), 0 10px 24px -12px rgba(14, 116, 144, 0.28); --glow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.9); /* --- 阴影：白底需要更柔更长，否则卡片像贴纸 --- */ --sh-sm: 0 1px 2px rgba(19, 31, 58, 0.06); --sh-md: 0 10px 28px -16px rgba(19, 31, 58, 0.26); --sh-lg: 0 30px 68px -30px rgba(19, 31, 58, 0.32); /* --- 动态背景层：白色画布上的蓝图网格与冷色光晕 --- */ --bg-canvas: #F2F5FA; --bg-grid: rgba(22, 48, 96, 0.065); --bg-aurora-1: rgba(59, 130, 246, 0.16); --bg-aurora-2: rgba(34, 211, 238, 0.15); --bg-aurora-3: rgba(124, 58, 237, 0.09); --bg-trace: rgba(37, 99, 235, 0.30); --bg-veil: rgba(242, 245, 250, 0.55); color-scheme: light; } [data-theme="dark"] { color-scheme: dark; }