/* 本文件由 scripts/split_css.py 从原 main.css 切分而来，级联顺序不变。 */ /* ============================================ CERT-WINGS - Apple Frosted Glass Design System ============================================ */ /* ---------- Design Tokens ---------- */ :root { /* Apple Colors */ --apple-blue: #007AFF; --apple-blue-hover: #0051D5; --apple-blue-light: rgba(0, 122, 255, 0.1); --apple-green: #34C759; --apple-red: #FF3B30; --apple-orange: #FF9500; --apple-purple: #AF52DE; --apple-pink: #FF2D55; --apple-teal: #5AC8FA; --apple-indigo: #5856D6; /* Background - 渐变背景增加层次感 */ --bg-primary: #f0f2f5; --bg-secondary: rgba(255, 255, 255, 0.9); --bg-tertiary: rgba(255, 255, 255, 0.7); --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --bg-gradient-soft: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%); /* Frosted Glass - 极致玻璃质感 v4.0 */ --glass-bg: rgba(255, 255, 255, 0.35); --glass-bg-heavy: rgba(255, 255, 255, 0.5); --glass-bg-light: rgba(255, 255, 255, 0.25); --glass-bg-ultra-light: rgba(255, 255, 255, 0.15); --glass-border: rgba(255, 255, 255, 0.5); --glass-border-light: rgba(255, 255, 255, 0.7); --glass-border-dark: rgba(0, 0, 0, 0.08); --glass-blur: blur(50px) saturate(200%); --glass-blur-heavy: blur(70px) saturate(220%); --glass-blur-ultra: blur(100px) saturate(250%); /* 多层阴影营造玻璃厚度感 */ --glass-shadow: 0 1px 2px rgba(255, 255, 255, 0.6) inset, 0 -1px 1px rgba(0, 0, 0, 0.03) inset, 0 4px 16px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.08); --glass-shadow-hover: 0 1px 2px rgba(255, 255, 255, 0.8) inset, 0 -1px 1px rgba(0, 0, 0, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.08), 0 20px 60px rgba(0, 0, 0, 0.12); /* 玻璃高光反射 */ --glass-highlight: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%); --glass-reflection: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 40%); /* Text */ --text-primary: #1d1d1f; --text-secondary: #6e6e73; --text-tertiary: #86868b; --text-quaternary: #aeaeb2; /* Border - 更细更透明 */ --border-light: rgba(0, 0, 0, 0.04); --border-medium: rgba(0, 0, 0, 0.08); /* Radius - 更大圆角 */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-full: 9999px; /* Shadow - 更柔和更大范围 */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06); --shadow-glow: 0 0 20px rgba(0, 122, 255, 0.15); /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Transition - 更流畅的动画 */ --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Layout */ --sidebar-width: 260px; --sidebar-collapsed: 80px; --topbar-height: 64px; } /* ---------- Reset & Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: /* 实验室相关SVG图案层 - 透明隐隐显现 */ url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E .lab-icon %7B fill: %23007AFF; opacity: 0.025; %7D %3C/style%3E%3C/defs%3E%3Cg class='lab-icon'%3E%3Ccircle cx='100' cy='100' r='8'/%3E%3Ccircle cx='140' cy='80' r='6'/%3E%3Ccircle cx='160' cy='120' r='7'/%3E%3Ccircle cx='120' cy='140' r='5'/%3E%3Cline x1='100' y1='100' x2='140' y2='80' stroke='%23007AFF' stroke-width='2'/%3E%3Cline x1='140' y1='80' x2='160' y2='120' stroke='%23007AFF' stroke-width='2'/%3E%3Cline x1='160' y1='120' x2='120' y2='140' stroke='%23007AFF' stroke-width='2'/%3E%3Cline x1='120' y1='140' x2='100' y2='100' stroke='%23007AFF' stroke-width='2'/%3E%3C/g%3E%3Cg class='lab-icon'%3E%3Crect x='350' y='60' width='12' height='80' rx='6'/%3E%3Crect x='346' y='55' width='20' height='8' rx='2'/%3E%3Cpath d='M350 100 Q356 110 362 100 L362 135 Q356 145 350 135 Z'/%3E%3C/g%3E%3Cg class='lab-icon'%3E%3Cpath d='M80 300 L80 360 Q80 380 100 380 L140 380 Q160 380 160 360 L160 300' fill='none' stroke='%23007AFF' stroke-width='3'/%3E%3Crect x='75' y='290' width='90' height='12' rx='3'/%3E%3Cpath d='M90 340 Q120 355 150 340 L150 360 Q120 375 90 360 Z'/%3E%3C/g%3E%3Cg class='lab-icon'%3E%3Cpath d='M400 280 Q420 300 400 320 Q380 340 400 360 Q420 380 400 400' fill='none' stroke='%23007AFF' stroke-width='3'/%3E%3Cpath d='M440 280 Q420 300 440 320 Q460 340 440 360 Q420 380 440 400' fill='none' stroke='%23007AFF' stroke-width='3'/%3E%3Cline x1='410' y1='290' x2='430' y2='290' stroke='%23007AFF' stroke-width='2'/%3E%3Cline x1='410' y1='310' x2='430' y2='310' stroke='%23007AFF' stroke-width='2'/%3E%3Cline x1='410' y1='330' x2='430' y2='330' stroke='%23007AFF' stroke-width='2'/%3E%3Cline x1='410' y1='350' x2='430' y2='350' stroke='%23007AFF' stroke-width='2'/%3E%3Cline x1='410' y1='370' x2='430' y2='370' stroke='%23007AFF' stroke-width='2'/%3E%3Cline x1='410' y1='390' x2='430' y2='390' stroke='%23007AFF' stroke-width='2'/%3E%3C/g%3E%3Cg class='lab-icon'%3E%3Crect x='80' y='480' width='120' height='80' fill='none' stroke='%23007AFF' stroke-width='2'/%3E%3Crect x='95' y='520' width='15' height='30'/%3E%3Crect x='120' y='500' width='15' height='50'/%3E%3Crect x='145' y='510' width='15' height='40'/%3E%3Crect x='170' y='490' width='15' height='60'/%3E%3C/g%3E%3Cg class='lab-icon'%3E%3Crect x='380' y='470' width='60' height='10' rx='3'/%3E%3Crect x='400' y='440' width='20' height='30'/%3E%3Ccircle cx='410' cy='430' r='12'/%3E%3Crect x='425' y='420' width='25' height='8' rx='2'/%3E%3C/g%3E%3Cg class='lab-icon'%3E%3Ccircle cx='250' cy='250' r='6'/%3E%3Cellipse cx='250' cy='250' rx='40' ry='15' fill='none' stroke='%23007AFF' stroke-width='1.5'/%3E%3Cellipse cx='250' cy='250' rx='40' ry='15' fill='none' stroke='%23007AFF' stroke-width='1.5' transform='rotate(60 250 250)'/%3E%3Cellipse cx='250' cy='250' rx='40' ry='15' fill='none' stroke='%23007AFF' stroke-width='1.5' transform='rotate(120 250 250)'/%3E%3C/g%3E%3Cg class='lab-icon'%3E%3Ccircle cx='520' cy='200' r='20' fill='none' stroke='%23007AFF' stroke-width='2.5'/%3E%3Crect x='515' y='175' width='10' height='8' rx='2'/%3E%3Crect x='515' y='217' width='10' height='8' rx='2'/%3E%3Crect x='497' y='195' width='8' height='10' rx='2'/%3E%3Crect x='535' y='195' width='8' height='10' rx='2'/%3E%3C/g%3E%3Cg class='lab-icon'%3E%3Crect x='500' y='450' width='50' height='65' rx='3' fill='none' stroke='%23007AFF' stroke-width='2'/%3E%3Cline x1='510' y1='465' x2='540' y2='465' stroke='%23007AFF' stroke-width='1.5'/%3E%3Cline x1='510' y1='478' x2='540' y2='478' stroke='%23007AFF' stroke-width='1.5'/%3E%3Cline x1='510' y1='491' x2='530' y2='491' stroke='%23007AFF' stroke-width='1.5'/%3E%3Cline x1='510' y1='504' x2='540' y2='504' stroke='%23007AFF' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E"), /* 多层渐变背景 - 增加色彩层次让玻璃效果更突出 */ radial-gradient(ellipse at 20% 20%, rgba(102, 126, 234, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(118, 75, 162, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(0, 122, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 90% 90%, rgba(90, 200, 250, 0.06) 0%, transparent 50%), linear-gradient(135deg, #e3e8f0 0%, #eef1f6 25%, #e8ecf3 50%, #f0f3f8 75%, #e5e9f2 100%); background-attachment: fixed; background-size: 600px 600px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; color: var(--text-primary); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow-x: hidden; } /* 背景装饰性渐变光斑 */ body::before { content: ''; position: fixed; top: -20%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 122, 255, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; animation: float 20s ease-in-out infinite; } body::after { content: ''; position: fixed; bottom: -15%; left: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(175, 82, 222, 0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; animation: float 25s ease-in-out infinite reverse; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(0.95); } } a { color: var(--apple-blue); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--apple-blue-hover); }