/** * CSS 变量定义 * TSF研究所 - ACG文化兴趣部落 * * 设计规范：温暖现代风格 * - 主色：暖灰 #4A4A4A * - 强调色：珊瑚橙 #FF6B6B * - 背景色：米白 #FAF8F5 */ :root { /* ========================================== 颜色变量 ========================================== */ /* 主色调 - 暖灰色系 */ --color-primary: #4A4A4A; /* 暖灰 - 标题、重要元素 */ --color-primary-light: #6B6B6B; /* 浅暖灰 */ --color-primary-dark: #2D2D2D; /* 深暖灰 */ /* 强调色 - 珊瑚橙 */ --color-accent: #FF6B6B; /* 珊瑚橙 - 链接、按钮、悬停效果 */ --color-accent-light: #FF8E8E; /* 浅珊瑚 */ --color-accent-dark: #EE5A5A; /* 深珊瑚 */ --color-accent-soft: rgba(255, 107, 107, 0.15); /* 柔和珊瑚 */ /* 辅助色 */ --color-terracotta: #C17F59; /* 陶土色 */ --color-sage: #8BAA91; /* 鼠尾草绿 */ --color-lavender: #A8A4CE; /* 薰衣草紫 */ --color-cream: #F5E6D3; /* 奶油色 */ --color-mint: #7ECEC1; /* 薄荷绿 */ /* 背景色 - 暖调 */ --color-bg-primary: #FAF8F5; /* 米白主背景 */ --color-bg-secondary: #F5F2ED; /* 暖灰次背景 */ --color-bg-tertiary: #EDE8E1; /* 更暖的灰 */ --color-bg-card: #FFFFFF; /* 纯白卡片 */ /* 文字色 */ --color-text-primary: #3D3D3D; /* 深暖灰主文字 */ --color-text-secondary: #7A7A7A; /* 中灰副文字 */ --color-text-tertiary: #A8A8A8; /* 浅灰辅助文字 */ --color-text-white: #FFFFFF; /* 白色文字 */ --color-text-muted: #9B9B9B; /* 柔和灰 */ /* 边框/分割线 */ --color-border: #E8E4DF; /* 暖调边框 */ --color-border-light: #F0ECE7; /* 浅边框 */ --color-border-accent: rgba(255, 107, 107, 0.3); /* 强调边框 */ /* 标签颜色 */ --color-tag-animation: #FF6B6B; /* 动画标签 - 珊瑚 */ --color-tag-game: #7ECEC1; /* 游戏标签 - 薄荷 */ --color-tag-comic: #C17F59; /* 漫画标签 - 陶土 */ --color-tag-culture: #8BAA91; /* 文化标签 - 鼠尾草 */ /* ========================================== 字体变量 ========================================== */ /* 标题字体 */ --font-family-heading: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN', serif; --font-weight-heading: 600; --font-weight-heading-bold: 700; /* 正文字体 */ --font-family-body: 'Noto Sans SC', 'Source Han Sans SC', 'Source Han Sans CN', -apple-system, sans-serif; --font-weight-body: 400; --font-weight-body-medium: 500; /* 代码/特殊文本字体 */ --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; /* 字体大小 */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 1.875rem; /* 30px */ --font-size-3xl: 2.5rem; /* 40px */ --font-size-4xl: 3.5rem; /* 56px */ /* 行高 */ --line-height-tight: 1.25; --line-height-normal: 1.7; --line-height-relaxed: 1.8; /* ========================================== 间距变量 ========================================== */ /* 容器内边距 */ --spacing-container-mobile: 20px; --spacing-container-desktop: 32px; /* 大区块间距 */ --spacing-section-desktop: 100px; --spacing-section-mobile: 60px; /* 小组件间距 */ --spacing-component: 28px; --spacing-element: 20px; --spacing-small: 10px; /* 卡片内边距 */ --spacing-card-padding: 28px; /* ========================================== 布局变量 ========================================== */ /* 容器宽度 */ --container-max-width: 1160px; --container-width-narrow: 800px; /* 网格间距 */ --grid-gap: 24px; /* ========================================== 圆角变量 ========================================== */ --radius-xs: 4px; /* 微圆角 */ --radius-sm: 8px; /* 小圆角 - 按钮、标签 */ --radius-md: 16px; /* 中圆角 - 卡片 */ --radius-lg: 24px; /* 大圆角 - 大卡片 */ --radius-xl: 32px; /* 超大圆角 */ --radius-full: 9999px; /* 完全圆形 */ /* ========================================== 阴影变量 ========================================== */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1); --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.12); /* 悬停阴影 */ --shadow-hover: 0 8px 30px rgba(255, 107, 107, 0.15); --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12); /* ========================================== 过渡动画变量 ========================================== */ --transition-fast: 0.15s ease; --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 0.4s cubic-bezier(0.22, 1, 0.36, 1); --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* ========================================== Z-index 层级变量 ========================================== */ --z-dropdown: 100; --z-navbar: 1000; --z-modal-overlay: 2000; --z-modal: 2001; --z-tooltip: 3000; /* ========================================== 玻璃拟态变量 ========================================== */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-light: rgba(255, 255, 255, 0.45); --glass-blur: blur(20px); --glass-blur-heavy: blur(40px); --glass-border: 1px solid rgba(255, 255, 255, 0.25); /* ========================================== 渐变变量 ========================================== */ --gradient-hero: linear-gradient(160deg, #FAF8F5 0%, #F5F2ED 50%, #EDE8E1 100%); --gradient-accent: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%); --gradient-warm: linear-gradient(135deg, #FF6B6B 0%, #C17F59 100%); --gradient-mint: linear-gradient(135deg, #7ECEC1 0%, #8BAA91 100%); --gradient-lavender: linear-gradient(135deg, #A8A4CE 0%, #C4B8E8 100%); --gradient-subtle: linear-gradient(180deg, transparent 0%, rgba(255, 107, 107, 0.03) 100%); /* 装饰性渐变 */ --gradient-blob-1: radial-gradient(ellipse at 20% 30%, rgba(255, 107, 107, 0.08) 0%, transparent 50%); --gradient-blob-2: radial-gradient(ellipse at 80% 70%, rgba(126, 206, 193, 0.08) 0%, transparent 50%); --gradient-blob-3: radial-gradient(ellipse at 50% 50%, rgba(168, 164, 206, 0.06) 0%, transparent 60%); /* ========================================== 断点变量 ========================================== */ --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; }