208 lines
7.9 KiB
CSS
208 lines
7.9 KiB
CSS
/* 视觉设计师作品集 - 柔和优雅配色主题 */
|
|
|
|
:root {
|
|
/* ===== 柔和的黑灰红色彩系统 ===== */
|
|
|
|
/* 黑色系 - 柔和深邃 */
|
|
--black-pure: #000000;
|
|
--black-soft: #0D0D0D;
|
|
--black-warm: #1A1616;
|
|
--black-medium: #242020;
|
|
--black-light: #2E2828;
|
|
|
|
/* 灰色系 - 温暖中性 */
|
|
--gray-dark: #3A3535;
|
|
--gray-medium-dark: #4A4545;
|
|
--gray-medium: #5A5555;
|
|
--gray-neutral: #6A6565;
|
|
--gray-warm: #7A7575;
|
|
--gray-light: #8A8585;
|
|
--gray-lighter: #9A9595;
|
|
--gray-pale: #AAA5A5;
|
|
--gray-soft: #BAB5B5;
|
|
--gray-mist: #CAC5C5;
|
|
--gray-cloud: #DAD5D5;
|
|
--gray-white: #EAE5E5;
|
|
|
|
/* 红色系 - 低饱和度 */
|
|
--red-deepest: #2A1515; /* 极深酒红 */
|
|
--red-deeper: #3A2020; /* 深酒红 */
|
|
--red-deep: #4A2525; /* 暗红褐 */
|
|
--red-dark: #5A3030; /* 暗红 */
|
|
--red-muted: #6A3535; /* 柔红 */
|
|
--red-medium: #7A4040; /* 中红 */
|
|
--red-soft: #8A4545; /* 软红 */
|
|
--red-warm: #9A5050; /* 暖红 */
|
|
--red-light: #AA5555; /* 浅红 */
|
|
--red-pale: #BA6060; /* 淡红 */
|
|
|
|
/* 白色系 */
|
|
--white-pure: #FFFFFF;
|
|
--white-soft: #FAF8F8;
|
|
--white-warm: #F5F0F0;
|
|
|
|
/* ===== 柔和光影系统 ===== */
|
|
|
|
/* 高光效果 - 更柔和 */
|
|
--highlight-white-subtle: rgba(255, 255, 255, 0.02);
|
|
--highlight-white-soft: rgba(255, 255, 255, 0.04);
|
|
--highlight-white-medium: rgba(255, 255, 255, 0.08);
|
|
--highlight-white-strong: rgba(255, 255, 255, 0.12);
|
|
|
|
--highlight-red-subtle: rgba(122, 64, 64, 0.05);
|
|
--highlight-red-soft: rgba(122, 64, 64, 0.1);
|
|
--highlight-red-medium: rgba(122, 64, 64, 0.15);
|
|
--highlight-red-strong: rgba(122, 64, 64, 0.2);
|
|
|
|
--highlight-gray: rgba(150, 145, 145, 0.1);
|
|
|
|
/* 辉光效果 - 更内敛 */
|
|
--glow-white: 0 0 15px rgba(255, 255, 255, 0.05),
|
|
0 0 30px rgba(255, 255, 255, 0.03);
|
|
|
|
--glow-red: 0 0 15px rgba(122, 64, 64, 0.2),
|
|
0 0 30px rgba(122, 64, 64, 0.1),
|
|
0 0 45px rgba(122, 64, 64, 0.05);
|
|
|
|
--glow-gray: 0 0 15px rgba(150, 145, 145, 0.1),
|
|
0 0 30px rgba(150, 145, 145, 0.05);
|
|
|
|
/* 内发光 - 微妙 */
|
|
--inner-glow-white: inset 0 0 20px rgba(255, 255, 255, 0.03),
|
|
inset 0 0 40px rgba(255, 255, 255, 0.01);
|
|
|
|
--inner-glow-red: inset 0 0 20px rgba(122, 64, 64, 0.08),
|
|
inset 0 0 40px rgba(122, 64, 64, 0.04);
|
|
|
|
/* ===== 阴影系统 - 更柔和 ===== */
|
|
|
|
/* 标准阴影 */
|
|
--shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.2),
|
|
0 0 1px rgba(255, 255, 255, 0.01) inset;
|
|
|
|
--shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.25),
|
|
0 1px 2px rgba(0, 0, 0, 0.2);
|
|
|
|
--shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.3),
|
|
0 2px 4px rgba(0, 0, 0, 0.25),
|
|
0 0 1px rgba(255, 255, 255, 0.02);
|
|
|
|
--shadow-strong: 0 8px 16px rgba(0, 0, 0, 0.35),
|
|
0 4px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 1px rgba(255, 255, 255, 0.03);
|
|
|
|
--shadow-intense: 0 12px 24px rgba(0, 0, 0, 0.4),
|
|
0 6px 12px rgba(0, 0, 0, 0.35),
|
|
0 0 2px rgba(255, 255, 255, 0.04);
|
|
|
|
/* 彩色阴影 - 低饱和 */
|
|
--shadow-red-soft: 0 2px 8px rgba(122, 64, 64, 0.15),
|
|
0 1px 4px rgba(122, 64, 64, 0.1);
|
|
|
|
--shadow-red-medium: 0 4px 16px rgba(122, 64, 64, 0.2),
|
|
0 2px 8px rgba(122, 64, 64, 0.15);
|
|
|
|
--shadow-gray: 0 2px 8px rgba(150, 145, 145, 0.15),
|
|
0 1px 4px rgba(150, 145, 145, 0.1);
|
|
|
|
/* 浮动阴影 */
|
|
--shadow-float: 0 10px 30px rgba(0, 0, 0, 0.3),
|
|
0 5px 15px rgba(0, 0, 0, 0.25),
|
|
0 0 1px rgba(255, 255, 255, 0.02) inset;
|
|
|
|
/* 凹陷阴影 */
|
|
--shadow-inset-soft: inset 0 1px 2px rgba(0, 0, 0, 0.3),
|
|
inset 0 0 1px rgba(0, 0, 0, 0.2);
|
|
|
|
--shadow-inset-deep: inset 0 2px 4px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
|
|
/* 文字阴影 */
|
|
--text-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
|
|
--text-shadow-glow: 0 0 5px rgba(122, 64, 64, 0.3),
|
|
0 0 10px rgba(122, 64, 64, 0.1);
|
|
|
|
/* ===== 渐变系统 - 低饱和度 ===== */
|
|
|
|
/* 黑灰渐变 */
|
|
--gradient-black-gray: linear-gradient(135deg, #0D0D0D 0%, #3A3535 100%);
|
|
--gradient-gray: linear-gradient(135deg, #3A3535 0%, #6A6565 100%);
|
|
--gradient-gray-soft: linear-gradient(135deg, #5A5555 0%, #9A9595 100%);
|
|
|
|
/* 红色渐变 - 柔和 */
|
|
--gradient-red: linear-gradient(135deg, #3A2020 0%, #7A4040 50%, #8A4545 100%);
|
|
--gradient-red-dark: linear-gradient(135deg, #2A1515 0%, #4A2525 100%);
|
|
--gradient-red-soft: linear-gradient(135deg, #6A3535 0%, #9A5050 100%);
|
|
|
|
/* 混合渐变 */
|
|
--gradient-black-red: linear-gradient(135deg, #0D0D0D 0%, #3A2020 50%, #5A3030 100%);
|
|
--gradient-gray-red: linear-gradient(135deg, #3A3535 0%, #5A5555 50%, #7A4040 100%);
|
|
--gradient-tricolor: linear-gradient(135deg, #0D0D0D 0%, #4A4545 33%, #6A3535 66%, #2E2828 100%);
|
|
|
|
/* 径向渐变 */
|
|
--gradient-radial-red: radial-gradient(circle, rgba(122, 64, 64, 0.1) 0%, transparent 70%);
|
|
--gradient-radial-gray: radial-gradient(circle, rgba(150, 145, 145, 0.15) 0%, transparent 70%);
|
|
--gradient-radial-mixed: radial-gradient(circle at 30% 50%, rgba(122, 64, 64, 0.08) 0%, transparent 50%),
|
|
radial-gradient(circle at 70% 50%, rgba(150, 145, 145, 0.1) 0%, transparent 50%);
|
|
|
|
/* 网格渐变 */
|
|
--gradient-mesh: radial-gradient(at 20% 30%, rgba(122, 64, 64, 0.06) 0%, transparent 40%),
|
|
radial-gradient(at 60% 70%, rgba(150, 145, 145, 0.08) 0%, transparent 40%),
|
|
radial-gradient(at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
|
|
radial-gradient(at 40% 80%, rgba(122, 64, 64, 0.04) 0%, transparent 40%);
|
|
|
|
/* ===== 材质效果 ===== */
|
|
|
|
/* 玻璃效果 */
|
|
--glass-dark: rgba(13, 13, 13, 0.7);
|
|
--glass-gray: rgba(58, 53, 53, 0.5);
|
|
--glass-red: rgba(122, 64, 64, 0.08);
|
|
--glass-blur: blur(16px);
|
|
--glass-blur-strong: blur(32px);
|
|
|
|
/* 噪点纹理 */
|
|
--noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
|
|
|
|
/* 扫光效果 */
|
|
--shine: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
|
|
--shine-red: linear-gradient(105deg, transparent 40%, rgba(122, 64, 64, 0.1) 50%, transparent 60%);
|
|
|
|
/* ===== 动画时长 ===== */
|
|
--duration-instant: 100ms;
|
|
--duration-fast: 200ms;
|
|
--duration-normal: 300ms;
|
|
--duration-medium: 400ms;
|
|
--duration-slow: 600ms;
|
|
--duration-slower: 800ms;
|
|
--duration-slowest: 1200ms;
|
|
|
|
/* ===== 动画缓动 ===== */
|
|
--ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
|
|
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
--ease-bounce: cubic-bezier(0.87, -0.41, 0.19, 1.44);
|
|
|
|
/* ===== 字体系统 ===== */
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', sans-serif;
|
|
--font-mono: 'SF Mono', 'JetBrains Mono', monospace;
|
|
--font-display: 'SF Pro Display', -apple-system, sans-serif;
|
|
|
|
/* ===== 间距系统 ===== */
|
|
--space-0: 0;
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
--space-16: 4rem;
|
|
--space-20: 5rem;
|
|
--space-24: 6rem;
|
|
--space-32: 8rem;
|
|
--space-40: 10rem;
|
|
--space-48: 12rem;
|
|
} |