225 lines
8.8 KiB
CSS
225 lines
8.8 KiB
CSS
|
/* 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);
|
||
|
|
}
|