142 lines
3.9 KiB
CSS
142 lines
3.9 KiB
CSS
/* 环保产业主题配色方案 - 符合现代大学生审美 */
|
|
:root {
|
|
/* 核心环保色彩 */
|
|
--primary-green: oklch(0.7 0.15 145); /* 自然绿 - 主色调 */
|
|
--secondary-green: oklch(0.8 0.12 160); /* 清新薄荷绿 */
|
|
--accent-blue: oklch(0.65 0.18 220); /* 清水蓝 - 点缀色 */
|
|
--earth-brown: oklch(0.55 0.08 80); /* 大地棕 */
|
|
|
|
/* 现代感配色 */
|
|
--background: oklch(0.98 0.005 140); /* 极淡绿白 */
|
|
--surface: oklch(0.95 0.01 140); /* 浅绿灰 */
|
|
--card: oklch(1.0 0 0); /* 纯白卡片 */
|
|
--text-primary: oklch(0.2 0.02 140); /* 深绿灰文字 */
|
|
--text-secondary: oklch(0.45 0.06 140); /* 中绿灰文字 */
|
|
--text-muted: oklch(0.6 0.04 140); /* 浅绿灰文字 */
|
|
|
|
/* 功能色彩 */
|
|
--success: oklch(0.7 0.15 145); /* 成功绿 */
|
|
--warning: oklch(0.75 0.15 85); /* 环保橙 */
|
|
--error: oklch(0.6 0.18 25); /* 温和红 */
|
|
|
|
/* 渐变色彩 */
|
|
--gradient-primary: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
|
|
--gradient-hero: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-blue) 100%);
|
|
--gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(248,254,251,0.95));
|
|
|
|
/* 阴影系统 */
|
|
--shadow-sm: 0 2px 4px rgba(34, 87, 122, 0.08);
|
|
--shadow-md: 0 4px 12px rgba(34, 87, 122, 0.12);
|
|
--shadow-lg: 0 8px 24px rgba(34, 87, 122, 0.15);
|
|
--shadow-xl: 0 12px 40px rgba(34, 87, 122, 0.18);
|
|
|
|
/* 边框 */
|
|
--border-light: oklch(0.9 0.02 140);
|
|
--border-medium: oklch(0.8 0.04 140);
|
|
--border-accent: var(--primary-green);
|
|
|
|
/* 字体系统 */
|
|
--font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
--font-display: 'Poppins', 'Inter', sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Consolas', monospace;
|
|
|
|
/* 圆角系统 */
|
|
--radius-sm: 6px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 18px;
|
|
--radius-xl: 24px;
|
|
--radius-full: 9999px;
|
|
|
|
/* 间距系统 */
|
|
--space-xs: 0.5rem; /* 8px */
|
|
--space-sm: 0.75rem; /* 12px */
|
|
--space-md: 1rem; /* 16px */
|
|
--space-lg: 1.5rem; /* 24px */
|
|
--space-xl: 2rem; /* 32px */
|
|
--space-2xl: 3rem; /* 48px */
|
|
--space-3xl: 4rem; /* 64px */
|
|
|
|
/* 动画曲线 */
|
|
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
--ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
/* 深色模式适配 */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: oklch(0.1 0.02 140);
|
|
--surface: oklch(0.15 0.02 140);
|
|
--card: oklch(0.18 0.02 140);
|
|
--text-primary: oklch(0.9 0.02 140);
|
|
--text-secondary: oklch(0.7 0.04 140);
|
|
--text-muted: oklch(0.5 0.06 140);
|
|
--border-light: oklch(0.25 0.02 140);
|
|
--border-medium: oklch(0.35 0.04 140);
|
|
}
|
|
}
|
|
|
|
/* 全局样式重置和基础设置 */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans) !important;
|
|
background-color: var(--background) !important;
|
|
color: var(--text-primary) !important;
|
|
line-height: 1.6 !important;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* 环保主题特色样式 */
|
|
.eco-gradient-bg {
|
|
background: var(--gradient-primary);
|
|
}
|
|
|
|
.eco-hero-bg {
|
|
background: var(--gradient-hero);
|
|
}
|
|
|
|
.eco-card {
|
|
background: var(--gradient-card);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
.eco-glass {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(15px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.eco-text-primary {
|
|
color: var(--primary-green) !important;
|
|
}
|
|
|
|
.eco-text-accent {
|
|
color: var(--accent-blue) !important;
|
|
}
|
|
|
|
.eco-shadow {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 1rem;
|
|
}
|
|
} |