diff --git a/src/app/globals.css b/src/app/globals.css index 40951a6..4199c12 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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) {