novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dev #25

Merged
zhangxiang merged 46 commits from dev into main 2026-09-01 14:55:21 +08:00
Conversation 0 Commits 46 Files Changed 196
+78 -33
1 changed files with 78 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2af6d01396 - Show all commits
src/app/globals.css
+78 -33
View File
@@ -47,32 +47,49 @@ body {
--color-accent-purple: #8B5CF6;
--color-accent-purple-soft: rgba(139, 92, 246, 0.12);
--color-accent-purple-rgb: 139, 92, 246;
--color-accent-cyan: #06B6D4;
--color-accent-cyan-soft: rgba(6, 182, 212, 0.12);
--color-accent-cyan-rgb: 6, 182, 212;
/* 背景色层级 */
--color-bg-primary: #FFFFFF;
--color-bg-secondary: #F8FAFC;
--color-bg-secondary-rgb: 248, 250, 252;
--color-bg-tertiary: #F1F5F9;
--color-bg-section: #F8FAFC;
--color-bg-hover: #F1F5F9;
--color-bg-elevated: #FFFFFF;
--color-bg-primary-rgb: 255, 255, 255;
/* 文字色层级 */
--color-text-primary: #0A0E14;
--color-text-secondary: #334155;
--color-text-secondary-rgb: 51, 65, 85;
--color-text-tertiary: #475569;
--color-text-muted: #64748B;
--color-text-muted-rgb: 100, 116, 139;
--color-text-subtle: #64748B;
--color-text-placeholder: #64748B;
--color-text-hint: #CBD5E1;
/* 仅用于 ≥24px 大号装饰性文本（如章节序号），对白底 3.41:1，满足 AA 大字 3:1。
正文、占位符、提示文案请改用 --color-text-placeholder（4.76:1）或更深的令牌。 */
--color-text-hint: #7C8CA5;
--color-text-inverse: #FFFFFF;
/* 边框色层级 */
--color-border-primary: #E2E8F0;
/* 边框色层级 —— 中度软化：--color-border-primary 从 #E2E8F0 调整为 #EEF2F7（更淡），
让 20 处 gap-px bg-border-primary 网格线与所有卡片边框都自动弱化（约 50%），
与增强的卡片阴影呼应，视觉从"靠硬边分界"转为"靠阴影分层"。 */
--color-border-primary: #EEF2F7;
--color-border-primary-rgb: 238, 242, 247;
--color-border-secondary: #CBD5E1;
--color-border-secondary-rgb: 203, 213, 225;
--color-border-accent: #0A0E14;
--color-border-accent-rgb: 10, 14, 20;
--color-border-light: #F1F5F9;
--color-border-light-rgb: 241, 245, 249;
--color-border-dark: #334155;
--color-border-dark-rgb: 51, 65, 85;
--color-border-brand: #C41E3A;
--color-border-brand-rgb: 196, 30, 58;
/* 链接色 */
--color-link: #0A0E14;
@@ -83,11 +100,15 @@ body {
--color-success-hover: #15803D;
--color-success-bg: #F0FDF4;
--color-success-rgb: 22, 163, 74;
/* 文字专用：--color-success 仅 3.30:1，作正文色不达 AA；本值 5.02:1（于 success-bg 上 4.79:1） */
--color-success-text: #15803D;
--color-warning: #D97706;
--color-warning-hover: #B45309;
--color-warning-bg: #FFFBEB;
--color-warning-rgb: 217, 119, 6;
/* 文字专用：--color-warning 仅 3.19:1，作正文色不达 AA；本值 5.02:1（于 warning-bg 上 4.84:1） */
--color-warning-text: #B45309;
--color-error: #C41E3A;
--color-error-hover: #A01830;
@@ -95,7 +116,10 @@ body {
--color-error-rgb: 196, 30, 58;
--color-info: #3B82F6;
--color-info-rgb: 59, 130, 246;
--color-info-bg: #EFF6FF;
/* 文字专用：--color-info 仅 3.68:1，作正文色不达 AA；本值 6.70:1（于 info-bg 上 6.16:1） */
--color-info-text: #1D4ED8;
/* 深色调性区域 */
--color-dark-bg: #0A0E14;
@@ -125,10 +149,13 @@ body {
/* 光晕阴影：发光效果（慎用） */
--shadow-glow: 0 0 40px rgba(196, 30, 58, 0.15);
/* 字体系统 */
--font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
/* 字体系统
字族按「逐字符」回退：拉丁字母命中 Geist（无 CJK 字形），
中文自动落到后面的 PingFang SC / 微软雅黑。
var() 必须给回退值，否则 next/font 变量缺失时整条声明会失效。 */
--font-sans: var(--font-geist-sans, ui-sans-serif), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-display: var(--font-geist-sans, ui-sans-serif), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: var(--font-geist-mono, ui-monospace), SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--font-brand: "STKaiti", "KaiTi", "楷体", "SimKai", serif;
--font-calligraphy-system: "STKaiti", "KaiTi", "楷体", "SimKai", serif;
--font-serif: "Songti SC", "STSongti-SC", "Noto Serif CJK SC", "SimSun", "STSong", serif;
@@ -180,14 +207,16 @@ body {
--spacing-5xl: 8rem;
--spacing-6xl: 12rem;
/* 圆角系统（按用途分类） */
--radius-xs: 2px; /* 极小：标签、徽章 */
--radius-sm: 4px; /* 小：按钮、输入框 */
--radius-md: 6px; /* 中：卡片、弹窗 */
--radius-lg: 10px; /* 大：大型卡片、容器 */
--radius-xl: 14px; /* 特大：英雄卡片、特色模块 */
--radius-2xl: 20px; /* 超大：全屏弹窗、大型容器 */
--radius-3xl: 28px; /* 巨大：展示卡片 */
/* 圆角系统（按用途分类）—— 中度软化：4→6/6→8/10→12/14→18，
让"硬边"卡片语言变为"柔边"，与增强的卡片阴影呼应。
注意：SM/MD/LG 同步联动大量 Tailwind 圆角类，全局生效。 */
--radius-xs: 3px; /* 极小：标签、徽章 */
--radius-sm: 6px; /* 小：按钮、输入框 */
--radius-md: 8px; /* 中：卡片、弹窗 */
--radius-lg: 12px; /* 大：大型卡片、容器 */
--radius-xl: 18px; /* 特大：英雄卡片、特色模块 */
--radius-2xl: 24px; /* 超大：全屏弹窗、大型容器 */
--radius-3xl: 32px; /* 巨大：展示卡片 */
--radius-full: 9999px; /* 圆形：头像、圆形按钮 */
/* 过渡系统（按时长分级） */
@@ -234,25 +263,28 @@ body {
--btn-padding-x: 1.5rem;
--btn-font-size: 0.875rem;
/* 卡片 */
/* 卡片 —— 中度软化：阴影加深（透明度 0.06→0.08），新增 y 偏移的 hover 抬升过渡。
让卡片从"靠 1px 硬边分界"变为"靠柔和阴影分层"，与增大圆角呼应。 */
--card-padding: 1.5rem;
--card-padding-lg: 2.5rem;
--card-gap: 1.5rem;
--card-border-radius: var(--radius-lg);
/* Bain 式干净卡片：边框 + 阴影，无复杂光晕 */
--card-shadow: 0 1px 3px rgba(10, 14, 20, 0.06);
--card-shadow-hover: 0 8px 24px rgba(10, 14, 20, 0.1);
--card-border: 1px solid var(--color-border-primary);
--card-shadow: 0 1px 2px rgba(10, 14, 20, 0.04), 0 2px 8px rgba(10, 14, 20, 0.08);
--card-shadow-hover: 0 4px 12px rgba(10, 14, 20, 0.06), 0 12px 32px rgba(10, 14, 20, 0.12);
--card-border: 1px solid var(--color-border-light);
--card-transition: transform var(--transition-normal) var(--ease-out),
box-shadow var(--transition-normal) var(--ease-out),
border-color var(--transition-normal) var(--ease-out);
/* 输入框 */
--input-height: 2.75rem;
--input-padding-x: 1rem;
--input-border-radius: var(--radius-sm);
/* Section 间距 —— Mobile First，默认移动端 */
--section-gap: var(--spacing-3xl);
--section-gap-sm: var(--spacing-2xl);
--section-padding-y: var(--spacing-3xl);
/* Section 间距 —— Mobile First，默认移动端 —— 中度软化：节奏更舒展 */
--section-gap: var(--spacing-4xl);
--section-gap-sm: var(--spacing-3xl);
--section-padding-y: var(--spacing-4xl);
/* === 组件令牌层（Component Tokens）=== */
@@ -340,6 +372,10 @@ body {
html {
scroll-behavior: smooth;
/* 桌面端字号分级（mobile-first 16 → tablet 17 → desktop 18）：
桌面端 18px 根字号使所有 rem 单位放大 12.5%，标题与留白更舒展，
与增强的圆角+阴影形成"软化"语言。
权衡：会覆盖用户浏览器字号缩放设置 —— 经 design review 决定保留视觉一致性。 */
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -612,6 +648,8 @@ body {
--color-text-primary: #000000;
--color-text-secondary: #1a1a1a;
--color-border-primary: #000000;
/* Tailwind border-* 工具类消费 rgb 通道，需同步覆写，否则高对比度模式下边框静默失效 */
--color-border-primary-rgb: 0, 0, 0;
}
}
@@ -1119,15 +1157,22 @@ p, li, span {
word-wrap: break-word;
}
a:not(nav[aria-label="breadcrumb"] a),
button {
min-height: 44px;
min-width: 44px;
}
nav[aria-label="breadcrumb"] a {
min-height: 0;
min-width: 0;
/* WCAG 2.5.5 (AAA): 44×44px 触控目标仅作用于移动端导航/页眉/页脚交互元素。
原全局选择器会撑大正文行内链接，破坏排版节奏与组件自有的尺寸控制。 */
@media (max-width: 768px) {
nav a,
nav button,
header a,
header button,
footer a,
footer button,
[role="menu"] a,
[role="menu"] button,
[data-mobile-menu] a,
[data-mobile-menu] button {
min-height: 44px;
min-width: 44px;
}
}
@media (min-width: 640px) {