Initial commit: 12个专业个人简历作品集项目
This commit is contained in:
521
个人简历_大健康/.superdesign/design_iterations/default_ui_darkmode.css
Normal file
521
个人简历_大健康/.superdesign/design_iterations/default_ui_darkmode.css
Normal 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;
|
||||
}
|
||||
}
|
||||
54
个人简历_大健康/.superdesign/design_iterations/health_theme_1.css
Normal file
54
个人简历_大健康/.superdesign/design_iterations/health_theme_1.css
Normal 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;
|
||||
}
|
||||
225
个人简历_大健康/.superdesign/design_iterations/health_theme_elegant.css
Normal file
225
个人简历_大健康/.superdesign/design_iterations/health_theme_elegant.css
Normal 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);
|
||||
}
|
||||
117
个人简历_大健康/.superdesign/design_iterations/health_theme_modern.css
Normal file
117
个人简历_大健康/.superdesign/design_iterations/health_theme_modern.css
Normal 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;
|
||||
}
|
||||
2418
个人简历_大健康/.superdesign/design_iterations/modern_health_resume_5.html
Normal file
2418
个人简历_大健康/.superdesign/design_iterations/modern_health_resume_5.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user