/** * ========================================= * MSS v3.0 Design System * 美术史作品库设计系统 * ========================================= * * 设计哲学： * - 极简主义艺术风格 * - 博物馆级视觉体验 * - 明暗双主题支持 * - 优雅、克制、永恒 */ /* ========================================= CSS 自定义属性 (Design Tokens) ========================================= */ :root { /* ----------------- 色彩系统 ----------------- */ /* 主色调 - 赭石色系 (艺术/历史感) */ --ochre-50: #fdf8f3; --ochre-100: #f9ece0; --ochre-200: #f2d5c0; --ochre-300: #e8b896; --ochre-400: #da9465; --ochre-500: #c9743e; --ochre-600: #a65a2e; --ochre-700: #8b4513; /* 主强调色 - 赭石 */ --ochre-800: #6d3510; --ochre-900: #4a240b; /* 中性色 - 米白至深灰 */ --neutral-0: #ffffff; --neutral-50: #faf9f7; /* 主背景色 */ --neutral-100: #f0efed; --neutral-200: #e5e4e2; --neutral-300: #d4d3d1; --neutral-400: #a8a6a3; --neutral-500: #787674; --neutral-600: #575553; --neutral-700: #42413f; --neutral-800: #2d2c2a; --neutral-900: #1a1918; /* 主文字色 */ --neutral-950: #0d0c0c; /* 语义化颜色 - 亮色主题 */ --color-bg-primary: var(--neutral-50); --color-bg-secondary: var(--neutral-0); --color-bg-tertiary: var(--neutral-100); --color-bg-elevated: var(--neutral-0); --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-tertiary: var(--neutral-400); --color-text-inverse: var(--neutral-0); --color-accent: var(--ochre-700); --color-accent-hover: var(--ochre-800); --color-accent-light: var(--ochre-100); --color-accent-subtle: var(--ochre-50); --color-border: var(--neutral-200); --color-border-subtle: var(--neutral-100); --color-border-strong: var(--neutral-300); /* 功能色 */ --color-success: #10b981; --color-success-light: #d1fae5; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-error: #ef4444; --color-error-light: #fee2e2; --color-info: #3b82f6; --color-info-light: #dbeafe; /* 阴影系统 */ --shadow-color: 0 0% 0%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.05); --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.08), 0 1px 2px hsl(var(--shadow-color) / 0.04); --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.08), 0 2px 4px -2px hsl(var(--shadow-color) / 0.04); --shadow-lg: 0 10px 15px -3px hsl(var(--shadow-color) / 0.08), 0 4px 6px -4px hsl(var(--shadow-color) / 0.04); --shadow-xl: 0 20px 25px -5px hsl(var(--shadow-color) / 0.08), 0 8px 10px -6px hsl(var(--shadow-color) / 0.04); --shadow-2xl: 0 25px 50px -12px hsl(var(--shadow-color) / 0.25); --shadow-inner: inset 0 2px 4px hsl(var(--shadow-color) / 0.05); /* 卡片悬浮专用阴影 */ --shadow-card: 0 2px 8px hsl(var(--shadow-color) / 0.06); --shadow-card-hover: 0 12px 24px hsl(var(--shadow-color) / 0.12); /* ----------------- 字体系统 ----------------- */ /* 字体家族 */ --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', 'STSong', serif; --font-sans: 'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace; /* 字体大小 - 使用完美四度比例 (1.333) */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem); /* 13px */ --text-sm: clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem); /* 14px */ --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem); /* 16px */ --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 18px */ --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem); /* 22px */ --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem); /* 28px */ --text-3xl: clamp(1.875rem, 1.65rem + 1vw, 2.25rem); /* 36px */ --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem); /* 48px */ --text-5xl: clamp(3rem, 2.5rem + 2vw, 4rem); /* 64px */ /* 字重 */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* 行高 */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* 字间距 */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ----------------- 间距系统 ----------------- */ /* 基础单位 4px */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ----------------- 尺寸系统 ----------------- */ /* 圆角 */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-full: 9999px; /* ----------------- 动效系统 ----------------- */ /* 缓动函数 */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 持续时间 */ --duration-instant: 0ms; --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --duration-slower: 400ms; --duration-slowest: 500ms; /* 预设过渡 */ --transition-colors: color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out); --transition-transform: transform var(--duration-normal) var(--ease-out); --transition-opacity: opacity var(--duration-fast) var(--ease-in-out); --transition-shadow: box-shadow var(--duration-normal) var(--ease-in-out); --transition-all: all var(--duration-normal) var(--ease-in-out); /* 卡片悬浮过渡 */ --transition-card: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out); /* ----------------- 布局系统 ----------------- */ /* 容器 */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-max: 1600px; /* 响应式断点 (供JS使用) */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1440px; /* Z-index 层级 */ --z-negative: -1; --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; --z-lightbox: 900; /* ----------------- 专注模式 ----------------- */ /* 用于灯箱等沉浸式体验 */ --focus-backdrop: hsl(var(--neutral-950) / 0.95); } /* ========================================= 暗色主题 (Dark Mode) ========================================= */ [data-theme="dark"] { /* 背景色反转 */ --color-bg-primary: var(--neutral-900); --color-bg-secondary: var(--neutral-800); --color-bg-tertiary: var(--neutral-700); --color-bg-elevated: var(--neutral-800); /* 文字色反转 */ --color-text-primary: var(--neutral-100); --color-text-secondary: var(--neutral-400); --color-text-tertiary: var(--neutral-500); --color-text-inverse: var(--neutral-900); /* 强调色调整 */ --color-accent: var(--ochre-500); --color-accent-hover: var(--ochre-400); --color-accent-light: var(--ochre-900); --color-accent-subtle: var(--ochre-950); /* 边框调整 */ --color-border: var(--neutral-700); --color-border-subtle: var(--neutral-800); --color-border-strong: var(--neutral-600); /* 阴影调整 - 暗色模式阴影更柔和 */ --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.3); --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.4), 0 1px 2px hsl(var(--shadow-color) / 0.2); --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.4), 0 2px 4px -2px hsl(var(--shadow-color) / 0.2); --shadow-lg: 0 10px 15px -3px hsl(var(--shadow-color) / 0.4), 0 4px 6px -4px hsl(var(--shadow-color) / 0.2); --shadow-xl: 0 20px 25px -5px hsl(var(--shadow-color) / 0.4), 0 8px 10px -6px hsl(var(--shadow-color) / 0.2); --shadow-2xl: 0 25px 50px -12px hsl(var(--shadow-color) / 0.5); --shadow-card: 0 2px 8px hsl(var(--shadow-color) / 0.3); --shadow-card-hover: 0 12px 24px hsl(var(--shadow-color) / 0.4); /* 专注模式背景 */ --focus-backdrop: hsl(var(--neutral-950) / 0.98); } /* ========================================= 高对比度模式支持 ========================================= */ @media (prefers-contrast: high) { :root { --color-border: var(--neutral-900); --color-text-secondary: var(--neutral-800); --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.2); --shadow-md: 0 4px 6px hsl(var(--shadow-color) / 0.25); } [data-theme="dark"] { --color-border: var(--neutral-400); --color-text-secondary: var(--neutral-300); } } /* ========================================= 减少动画偏好支持 ========================================= */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --duration-slowest: 0ms; --transition-colors: none; --transition-transform: none; --transition-opacity: none; --transition-shadow: none; --transition-all: none; --transition-card: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================= 打印样式 ========================================= */ @media print { :root { --color-bg-primary: white; --color-bg-secondary: white; --color-text-primary: black; --color-text-secondary: #333; --shadow-card: none; --shadow-card-hover: none; } .no-print { display: none !important; } }