Initial commit: 12个专业个人简历作品集项目

This commit is contained in:
KQL
2025-11-15 18:32:08 +08:00
commit b690b4663c
896 changed files with 726841 additions and 0 deletions

View File

@@ -0,0 +1,521 @@
/* ========================================
Dark Mode UI Framework
A beautiful dark mode design system
======================================== */
/* ========================================
CSS Variables & Theme
======================================== */
:root {
/* Dark Mode Color Palette */
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
/* Spacing & Layout */
--radius: 0.625rem;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 0.75rem;
--spacing-lg: 1rem;
--spacing-xl: 1.5rem;
--spacing-2xl: 2rem;
--spacing-3xl: 3rem;
/* Typography */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
}
/* ========================================
Base Styles
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-family);
line-height: 1.6;
min-height: 100vh;
}
html.dark {
color-scheme: dark;
}
/* ========================================
Layout Components
======================================== */
.container {
max-width: 64rem;
margin: 0 auto;
padding: var(--spacing-2xl) var(--spacing-lg);
}
.container-sm {
max-width: 42rem;
}
.container-lg {
max-width: 80rem;
}
.grid {
display: grid;
}
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.text-center {
text-align: center;
}
/* ========================================
Card Components
======================================== */
.card {
background-color: var(--card);
color: var(--card-foreground);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: calc(var(--radius) + 4px);
padding: var(--spacing-xl);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
transition: all 0.2s ease;
}
.card:hover {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
/* ========================================
Button Components
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
white-space: nowrap;
border-radius: var(--radius);
font-size: var(--font-size-sm);
font-weight: 500;
transition: all 0.2s;
border: none;
cursor: pointer;
padding: var(--spacing-sm) var(--spacing-lg);
min-height: 2.25rem;
outline: none;
text-decoration: none;
}
.btn:disabled {
pointer-events: none;
opacity: 0.5;
}
.btn-primary {
background-color: var(--primary);
color: var(--primary-foreground);
}
.btn-primary:hover {
background-color: rgba(236, 236, 236, 0.9);
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--border);
color: var(--foreground);
}
.btn-outline:hover {
background-color: var(--accent);
}
.btn-ghost {
background-color: transparent;
color: var(--foreground);
}
.btn-ghost:hover {
background-color: var(--accent);
}
.btn-destructive {
background-color: var(--destructive);
color: white;
}
.btn-destructive:hover {
background-color: rgba(220, 38, 38, 0.9);
}
/* Button Sizes */
.btn-sm {
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-xs);
min-height: 2rem;
}
.btn-lg {
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-size-base);
min-height: 2.75rem;
}
.btn-icon {
padding: var(--spacing-sm);
width: 2.25rem;
height: 2.25rem;
}
/* ========================================
Form Components
======================================== */
.form-input {
width: 100%;
background: rgba(255, 255, 255, 0.15);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm) var(--spacing-md);
color: var(--foreground);
font-size: var(--font-size-sm);
outline: none;
transition: all 0.2s;
}
.form-input:focus {
border-color: var(--ring);
box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.5);
}
.form-input::placeholder {
color: var(--muted-foreground);
}
/* ========================================
Badge Components
======================================== */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
border: 1px solid;
padding: 0.125rem var(--spacing-sm);
font-size: var(--font-size-xs);
font-weight: 500;
white-space: nowrap;
}
/* Priority Badge Variants */
.badge-priority-high {
background: rgba(127, 29, 29, 0.3);
color: rgb(252, 165, 165);
border: 1px solid rgba(153, 27, 27, 0.5);
}
.badge-priority-medium {
background: rgba(120, 53, 15, 0.3);
color: rgb(252, 211, 77);
border: 1px solid rgba(146, 64, 14, 0.5);
}
.badge-priority-low {
background: rgba(20, 83, 45, 0.3);
color: rgb(134, 239, 172);
border: 1px solid rgba(22, 101, 52, 0.5);
}
/* ========================================
Tab Components
======================================== */
.tab-list {
display: flex;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
}
.tab-button {
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--foreground);
text-transform: capitalize;
font-weight: 500;
transition: all 0.2s ease;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius);
cursor: pointer;
font-size: var(--font-size-sm);
}
.tab-button:hover {
background-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.3);
}
.tab-button.active {
background-color: #f8f9fa !important;
color: #1a1a1a !important;
border-color: #f8f9fa !important;
font-weight: 600;
}
.tab-button.active:hover {
background-color: #e9ecef !important;
border-color: #e9ecef !important;
}
/* ========================================
Typography
======================================== */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-primary { color: var(--primary); }
.text-muted { color: var(--muted-foreground); }
.text-destructive { color: var(--destructive); }
.gradient-text {
background: linear-gradient(to right, var(--primary), rgba(236, 236, 236, 0.6));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ========================================
Icon System
======================================== */
.icon {
width: 1rem;
height: 1rem;
fill: currentColor;
flex-shrink: 0;
}
.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-lg { width: 1.25rem; height: 1.25rem; }
.icon-xl { width: 1.5rem; height: 1.5rem; }
.icon-2xl { width: 2rem; height: 2rem; }
/* ========================================
Interactive Components
======================================== */
.checkbox {
width: 1rem;
height: 1rem;
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
position: relative;
background: rgba(255, 255, 255, 0.15);
transition: all 0.2s;
}
.checkbox:hover {
border-color: var(--ring);
}
.checkbox.checked {
background-color: rgb(22, 163, 74);
border-color: rgb(22, 163, 74);
}
.checkbox.checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 0.75rem;
font-weight: bold;
}
/* ========================================
List Components
======================================== */
.list-item {
display: flex;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background-color 0.2s;
}
.list-item:hover {
background-color: rgba(255, 255, 255, 0.025);
}
.list-item:last-child {
border-bottom: none;
}
.list-item.completed {
opacity: 0.6;
}
/* ========================================
Empty State Component
======================================== */
.empty-state {
text-align: center;
padding: var(--spacing-3xl) var(--spacing-lg);
color: var(--muted-foreground);
}
.empty-state .icon {
width: 3rem;
height: 3rem;
margin: 0 auto var(--spacing-lg);
opacity: 0.5;
}
/* ========================================
Utility Classes
======================================== */
.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-75 { opacity: 0.75; }
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }
.transition-opacity { transition: opacity 0.2s ease; }
/* ========================================
Responsive Design
======================================== */
@media (max-width: 768px) {
.container {
padding: var(--spacing-lg);
}
.grid-cols-auto {
grid-template-columns: 1fr;
}
.flex-col-mobile {
flex-direction: column;
}
.text-center-mobile {
text-align: center;
}
.gap-sm-mobile { gap: var(--spacing-sm); }
.hidden-mobile { display: none; }
.block-mobile { display: block; }
}
@media (max-width: 640px) {
.text-2xl { font-size: var(--font-size-xl); }
.text-3xl { font-size: var(--font-size-2xl); }
.text-4xl { font-size: var(--font-size-3xl); }
.container {
padding: var(--spacing-lg) var(--spacing-sm);
}
}
/* ========================================
Animation Utilities
======================================== */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out;
}
/* ========================================
Focus & Accessibility
======================================== */
.focus-visible:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

View File

@@ -0,0 +1,54 @@
:root {
/* 大健康产业主题色彩系统 */
--health-primary: #16a34a; /* 健康绿 - 生命力与健康 */
--health-secondary: #0ea5e9; /* 医疗蓝 - 专业与信任 */
--health-accent: #f97316; /* 温暖橙 - 关怀与活力 */
--health-light: #f0fdf4; /* 清新绿白 - 洁净感 */
--health-pure: #ffffff; /* 纯白 - 医疗洁净 */
--health-dark: #052e16; /* 深绿 - 专业稳重 */
/* 功能色彩 */
--health-emergency: #dc2626; /* 紧急红 */
--health-tech: #7c3aed; /* 科技紫 */
--health-data: #06b6d4; /* 数据青 */
--health-success: #10b981; /* 成功绿 */
--health-warning: #eab308; /* 警告黄 */
/* 渐变色 */
--health-gradient-1: linear-gradient(135deg, #16a34a 0%, #0ea5e9 100%);
--health-gradient-2: linear-gradient(135deg, #f0fdf4 0%, #dbeafe 100%);
--health-gradient-3: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
/* 字体系统 */
--font-primary: 'Plus Jakarta Sans', 'PingFang SC', sans-serif;
--font-medical: 'Inter', 'Microsoft YaHei', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* 间距系统 */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-2xl: 4rem;
/* 圆角系统 */
--radius-sm: 0.375rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--radius-full: 9999px;
/* 阴影系统 - 柔和医疗风格 */
--shadow-sm: 0 1px 3px rgba(22, 163, 74, 0.1);
--shadow-md: 0 4px 6px rgba(22, 163, 74, 0.1), 0 2px 4px rgba(22, 163, 74, 0.06);
--shadow-lg: 0 10px 15px rgba(22, 163, 74, 0.1), 0 4px 6px rgba(22, 163, 74, 0.05);
--shadow-xl: 0 20px 25px rgba(22, 163, 74, 0.1), 0 10px 10px rgba(22, 163, 74, 0.04);
--shadow-glow: 0 0 20px rgba(22, 163, 74, 0.3);
/* 动画时长 */
--transition-fast: 150ms;
--transition-base: 300ms;
--transition-slow: 500ms;
--transition-slower: 700ms;
}

View File

@@ -0,0 +1,225 @@
/* Health Industry Elegant Theme - Professional Resume */
:root {
/* Sophisticated Health Industry Color Palette */
--background: oklch(0.1400 0.0350 158.0000); /* 更深邃的青绿背景 - 高级质感 */
--foreground: oklch(0.9500 0.0150 152.0000); /* 高对比度文字 - 更清晰 */
--card: oklch(0.2000 0.0420 152.0000); /* 精致卡片背景 - 层次感 */
--card-foreground: oklch(0.9200 0.0200 152.0000);
--popover: oklch(0.2200 0.0450 152.0000);
--popover-foreground: oklch(0.9200 0.0200 152.0000);
/* Primary - Medical Green with Health Vitality */
--primary: oklch(0.6200 0.1450 145.0000); /* 更柔和的医疗绿 - 高级感 */
--primary-foreground: oklch(0.0800 0.0000 0); /* 深色文字 - 更好对比 */
--primary-hover: oklch(0.6800 0.1550 145.0000); /* 悬停时更亮 - 现代感 */
--primary-glow: oklch(0.6200 0.1450 145.0000 / 0.3); /* 发光效果 */
/* Secondary - Light Sky Blue */
--secondary: oklch(0.2800 0.0520 172.0000); /* 深蓝绿色 */
--secondary-foreground: oklch(0.9200 0.0200 152.0000);
--secondary-hover: oklch(0.3200 0.0620 172.0000);
/* Muted tones */
--muted: oklch(0.1600 0.0350 152.0000); /* 更深的柔和背景 */
--muted-foreground: oklch(0.7000 0.0300 152.0000); /* 可读的柔和文字 */
/* Accent - Elegant Teal */
--accent: oklch(0.6180 0.1180 180.0000); /* Professional teal accent */
--accent-foreground: oklch(0.9890 0.0045 142.5000);
--accent-hover: oklch(0.5680 0.1280 180.0000);
/* Destructive - Sophisticated Red */
--destructive: oklch(0.5580 0.1980 25.8500);
--destructive-foreground: oklch(0.9890 0.0045 142.5000);
/* Border and Input */
--border: oklch(0.3000 0.0400 152.0000); /* 深绿色边框 */
--input: oklch(0.2000 0.0380 152.0000); /* 深色输入框背景 */
--ring: oklch(0.5500 0.1680 142.5000); /* Focus ring matches primary */
/* Chart colors for data visualization */
--chart-1: oklch(0.4890 0.1420 142.5000); /* Primary green */
--chart-2: oklch(0.6180 0.1180 180.0000); /* Teal accent */
--chart-3: oklch(0.7200 0.1080 25.8500); /* Warm orange */
--chart-4: oklch(0.6800 0.0980 280.0000); /* Professional purple */
--chart-5: oklch(0.5800 0.1280 60.0000); /* Sophisticated yellow-green */
/* Sidebar colors */
--sidebar: oklch(0.1600 0.0350 152.0000); /* 深色侧边栏 */
--sidebar-foreground: oklch(0.9200 0.0200 152.0000);
--sidebar-primary: oklch(0.5500 0.1680 142.5000);
--sidebar-primary-foreground: oklch(0.1000 0.0000 0);
--sidebar-accent: oklch(0.2800 0.0520 172.0000);
--sidebar-accent-foreground: oklch(0.9200 0.0200 152.0000);
--sidebar-border: oklch(0.3000 0.0400 152.0000);
--sidebar-ring: oklch(0.5500 0.1680 142.5000);
/* Typography - Professional Health Industry Fonts */
--font-sans: 'Inter', 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
--font-serif: 'Playfair Display', 'Merriweather', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-heading: 'Outfit', 'Plus Jakarta Sans', var(--font-sans);
/* Modern Border Radius System */
--radius: 0.750rem; /* 12px - Modern rounded corners */
--radius-sm: calc(var(--radius) - 0.250rem); /* 8px */
--radius-md: calc(var(--radius) - 0.125rem); /* 10px */
--radius-lg: var(--radius); /* 12px */
--radius-xl: calc(var(--radius) + 0.250rem); /* 16px */
--radius-2xl: calc(var(--radius) + 0.500rem); /* 20px */
/* Sophisticated Shadow System */
--shadow-2xs: 0 1px 2px 0px oklch(0.1520 0.0180 142.5000 / 0.06);
--shadow-xs: 0 1px 3px 0px oklch(0.1520 0.0180 142.5000 / 0.08), 0 1px 2px -1px oklch(0.1520 0.0180 142.5000 / 0.08);
--shadow-sm: 0 1px 3px 0px oklch(0.1520 0.0180 142.5000 / 0.10), 0 1px 2px -1px oklch(0.1520 0.0180 142.5000 / 0.10);
--shadow: 0 1px 3px 0px oklch(0.1520 0.0180 142.5000 / 0.10), 0 1px 2px -1px oklch(0.1520 0.0180 142.5000 / 0.10);
--shadow-md: 0 4px 6px -1px oklch(0.1520 0.0180 142.5000 / 0.08), 0 2px 4px -2px oklch(0.1520 0.0180 142.5000 / 0.08);
--shadow-lg: 0 10px 15px -3px oklch(0.1520 0.0180 142.5000 / 0.08), 0 4px 6px -4px oklch(0.1520 0.0180 142.5000 / 0.08);
--shadow-xl: 0 20px 25px -5px oklch(0.1520 0.0180 142.5000 / 0.08), 0 8px 10px -6px oklch(0.1520 0.0180 142.5000 / 0.08);
--shadow-2xl: 0 25px 50px -12px oklch(0.1520 0.0180 142.5000 / 0.25);
--shadow-inner: inset 0 2px 4px 0 oklch(0.1520 0.0180 142.5000 / 0.05);
/* Professional Spacing System */
--spacing: 0.25rem; /* 4px base unit */
--spacing-xs: calc(var(--spacing) * 0.5); /* 2px */
--spacing-sm: var(--spacing); /* 4px */
--spacing-md: calc(var(--spacing) * 2); /* 8px */
--spacing-lg: calc(var(--spacing) * 4); /* 16px */
--spacing-xl: calc(var(--spacing) * 6); /* 24px */
--spacing-2xl: calc(var(--spacing) * 8); /* 32px */
--spacing-3xl: calc(var(--spacing) * 12); /* 48px */
--spacing-4xl: calc(var(--spacing) * 16); /* 64px */
/* Typography Scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
/* Line Heights */
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* Letter Spacing */
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0em;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* Modern Gradients for Health Industry */
--gradient-primary: linear-gradient(135deg,
oklch(0.6200 0.1450 145.0000) 0%,
oklch(0.7000 0.1300 148.0000) 100%);
--gradient-secondary: linear-gradient(135deg,
oklch(0.2000 0.0420 152.0000) 0%,
oklch(0.2400 0.0480 148.0000) 100%);
--gradient-accent: linear-gradient(135deg,
oklch(0.6180 0.1180 180.0000) 0%,
oklch(0.6800 0.1080 175.0000) 100%);
--gradient-neutral: linear-gradient(135deg,
oklch(0.1400 0.0350 158.0000) 0%,
oklch(0.1800 0.0420 152.0000) 100%);
--gradient-hero: linear-gradient(135deg,
oklch(0.1200 0.0320 160.0000) 0%,
oklch(0.1600 0.0380 155.0000) 50%,
oklch(0.2000 0.0420 150.0000) 100%);
--gradient-glass: linear-gradient(135deg,
oklch(0.2200 0.0450 152.0000 / 0.8) 0%,
oklch(0.2600 0.0520 148.0000 / 0.6) 100%);
/* Interactive States */
--focus-ring: 0 0 0 2px oklch(0.4890 0.1420 142.5000 / 0.20);
--focus-ring-offset: 0 0 0 2px oklch(0.9890 0.0045 142.5000);
/* Animation Timing */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dark mode overrides for accessibility */
@media (prefers-color-scheme: dark) {
:root {
--background: oklch(0.0890 0.0180 142.5000);
--foreground: oklch(0.9520 0.0120 142.5000);
--card: oklch(0.1220 0.0180 142.5000);
--card-foreground: oklch(0.9520 0.0120 142.5000);
--popover: oklch(0.1220 0.0180 142.5000);
--popover-foreground: oklch(0.9520 0.0120 142.5000);
--primary: oklch(0.6890 0.1420 142.5000);
--primary-foreground: oklch(0.0890 0.0180 142.5000);
--secondary: oklch(0.2750 0.0680 142.5000);
--secondary-foreground: oklch(0.9520 0.0120 142.5000);
--muted: oklch(0.1820 0.0180 142.5000);
--muted-foreground: oklch(0.6480 0.0280 142.5000);
--accent: oklch(0.7180 0.1180 180.0000);
--accent-foreground: oklch(0.0890 0.0180 142.5000);
--border: oklch(0.2920 0.0180 142.5000);
--input: oklch(0.1820 0.0180 142.5000);
--ring: oklch(0.6890 0.1420 142.5000);
}
}
/* Utility classes for common patterns */
.health-gradient-primary {
background: var(--gradient-primary);
}
.health-gradient-secondary {
background: var(--gradient-secondary);
}
.health-gradient-accent {
background: var(--gradient-accent);
}
.health-gradient-neutral {
background: var(--gradient-neutral);
}
.health-shadow-soft {
box-shadow: var(--shadow-lg);
}
.health-shadow-strong {
box-shadow: var(--shadow-2xl);
}
.health-focus-ring {
box-shadow: var(--focus-ring-offset), var(--focus-ring);
}
/* Professional typography classes */
.health-heading {
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
}
.health-body {
font-family: var(--font-sans);
font-weight: 400;
letter-spacing: var(--tracking-normal);
line-height: var(--leading-normal);
}
.health-caption {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
line-height: var(--leading-snug);
color: oklch(from var(--muted-foreground) l c h / 0.8);
}

View File

@@ -0,0 +1,117 @@
/* 现代化大健康产业主题 - 符合年轻人审美 */
:root {
/* 主色调 - 现代医疗绿 */
--primary: oklch(0.65 0.18 150); /* 清新薄荷绿 */
--primary-foreground: oklch(0.98 0.01 150);/* 几乎白色 */
--primary-dark: oklch(0.45 0.20 150); /* 深绿色 */
--primary-light: oklch(0.85 0.12 150); /* 浅绿色 */
/* 辅助色系 - 温暖渐变 */
--secondary: oklch(0.75 0.15 25); /* 温暖橙 */
--secondary-foreground: oklch(0.15 0.02 25);
--accent: oklch(0.70 0.25 260); /* 科技紫 */
--accent-foreground: oklch(0.98 0.01 260);
/* 背景色系 - 极简现代 */
--background: oklch(0.99 0.005 150); /* 极浅绿白 */
--background-alt: oklch(0.97 0.01 150); /* 替代背景 */
--surface: oklch(1.00 0 0); /* 纯白表面 */
--surface-hover: oklch(0.98 0.01 150); /* 悬浮状态 */
/* 文字色系 - 高对比度 */
--foreground: oklch(0.15 0.02 150); /* 深色文字 */
--foreground-muted: oklch(0.45 0.03 150); /* 次要文字 */
--foreground-subtle: oklch(0.65 0.02 150);/* 微妙文字 */
/* 边框色系 */
--border: oklch(0.90 0.02 150); /* 主边框 */
--border-light: oklch(0.95 0.01 150); /* 浅边框 */
--border-accent: oklch(0.65 0.18 150); /* 强调边框 */
/* 状态色系 */
--success: oklch(0.60 0.20 140); /* 成功绿 */
--warning: oklch(0.75 0.18 60); /* 警告橙 */
--error: oklch(0.60 0.25 20); /* 错误红 */
--info: oklch(0.65 0.20 220); /* 信息蓝 */
/* 渐变色 - 现代风格 */
--gradient-primary: linear-gradient(135deg,
oklch(0.65 0.18 150) 0%,
oklch(0.70 0.20 160) 50%,
oklch(0.75 0.15 25) 100%);
--gradient-secondary: linear-gradient(135deg,
oklch(0.70 0.25 260) 0%,
oklch(0.65 0.18 150) 100%);
--gradient-surface: linear-gradient(135deg,
oklch(1.00 0 0) 0%,
oklch(0.98 0.01 150) 100%);
--gradient-glass: linear-gradient(135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.05) 100%);
/* 字体系统 - 现代化 */
--font-display: 'Outfit', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
--font-accent: 'Space Grotesk', 'PingFang SC', sans-serif;
/* 尺寸系统 - 8pt网格 */
--spacing-xs: 0.5rem; /* 8px */
--spacing-sm: 0.75rem; /* 12px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
--spacing-2xl: 3rem; /* 48px */
--spacing-3xl: 4rem; /* 64px */
--spacing-4xl: 6rem; /* 96px */
/* 圆角系统 - 现代化 */
--radius-xs: 0.25rem; /* 4px */
--radius-sm: 0.5rem; /* 8px */
--radius-md: 0.75rem; /* 12px */
--radius-lg: 1rem; /* 16px */
--radius-xl: 1.5rem; /* 24px */
--radius-2xl: 2rem; /* 32px */
--radius-full: 9999px; /* 圆形 */
/* 阴影系统 - 深度感 */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
--shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.08);
/* 特殊阴影 - 品牌色 */
--shadow-primary: 0 8px 24px rgba(16, 185, 129, 0.15);
--shadow-accent: 0 8px 24px rgba(139, 92, 246, 0.15);
--shadow-glow: 0 0 40px rgba(16, 185, 129, 0.20);
/* 毛玻璃效果 */
--glass-backdrop: blur(20px) saturate(180%);
--glass-border: 1px solid rgba(255, 255, 255, 0.18);
--glass-bg: rgba(255, 255, 255, 0.08);
/* 动画时长 */
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-slower: 700ms;
/* 缓动函数 */
--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-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* Z-index层级 */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
--z-toast: 1080;
}

File diff suppressed because it is too large Load Diff