/** * 「下班后®」Design System * * 品牌色：#059669 (深翠绿) * 各站强调色： * - 读书会: #c23a22 (朱红) * - AI实践群: #2e609c (蓝灰) * - AI漫游日报: #10b981 (翠绿) * * 使用方式：在页面 中引入此文件，然后覆盖 --site-accent 变量 */ :root { /* ═══════════════════════════════════════════════════════════ 品牌色 BRAND ═══════════════════════════════════════════════════════════ */ --brand: #059669; --brand-light: #10b981; --brand-dark: #047857; --brand-soft: rgba(5, 150, 105, 0.08); --brand-glow: rgba(5, 150, 105, 0.15); /* ═══════════════════════════════════════════════════════════ 各站强调色 SITE ACCENT (需在页面内覆盖) ═══════════════════════════════════════════════════════════ */ --site-accent: var(--brand); --site-accent-light: var(--brand-light); --site-accent-dark: var(--brand-dark); --site-accent-soft: var(--brand-soft); /* ═══════════════════════════════════════════════════════════ 中性色 NEUTRAL ═══════════════════════════════════════════════════════════ */ --bg: #fafaf9; --bg-elevated: #ffffff; --bg-muted: #f4f4f5; --bg-inset: #eaeaeb; --text: #1a1a1a; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --text-inverse: #ffffff; --border: #e5e7eb; --border-strong: #d1d5db; --border-focus: var(--site-accent); /* ═══════════════════════════════════════════════════════════ 功能色 UTILITY ═══════════════════════════════════════════════════════════ */ --success: #16a34a; --success-soft: rgba(22, 163, 74, 0.1); --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.1); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.1); --info: #3b82f6; --info-soft: rgba(59, 130, 246, 0.1); /* ═══════════════════════════════════════════════════════════ 字体 TYPOGRAPHY ═══════════════════════════════════════════════════════════ */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans SC", system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", ui-monospace, monospace; --font-serif: "Noto Serif SC", Georgia, "Songti SC", serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --leading-tight: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.03em; --tracking-normal: 0; --tracking-wide: 0.05em; /* ═══════════════════════════════════════════════════════════ 间距 SPACING (4px 基准) ═══════════════════════════════════════════════════════════ */ --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; /* ═══════════════════════════════════════════════════════════ 圆角 RADIUS ═══════════════════════════════════════════════════════════ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ═══════════════════════════════════════════════════════════ 阴影 SHADOW ═══════════════════════════════════════════════════════════ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1); /* ═══════════════════════════════════════════════════════════ 动画 MOTION ═══════════════════════════════════════════════════════════ */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ═══════════════════════════════════════════════════════════ 布局 LAYOUT ═══════════════════════════════════════════════════════════ */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --nav-height: 64px; /* ═══════════════════════════════════════════════════════════ Z-Index ═══════════════════════════════════════════════════════════ */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; } /* ═══════════════════════════════════════════════════════════ 暗色模式 DARK MODE (如需启用) 注释：如需启用暗色模式，在 HTML 标签添加 .dark class ═══════════════════════════════════════════════════════════ */ /* :root.dark { --bg: #0a0a0a; --bg-elevated: #141414; --bg-muted: #1a1a1a; --bg-inset: #242424; --text: #e5e5e5; --text-secondary: #a1a1aa; --text-tertiary: #71717a; --text-inverse: #0a0a0a; --border: #27272a; --border-strong: #3f3f46; --brand-soft: rgba(16, 185, 129, 0.12); --brand-glow: rgba(16, 185, 129, 0.2); } */ /* ═══════════════════════════════════════════════════════════ 基础重置 RESET ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } a { color: var(--site-accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--site-accent-dark); text-decoration: underline; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ═══════════════════════════════════════════════════════════ 组件：按钮 BUTTON ═══════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); font-weight: 600; line-height: 1; border-radius: var(--radius-md); transition: all var(--duration-fast) var(--ease-out); white-space: nowrap; text-decoration: none; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--site-accent); color: var(--text-inverse); } .btn-primary:hover { background: var(--site-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--border-strong); background: var(--bg-muted); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-muted); color: var(--text); } .btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); } .btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-base); } /* ═══════════════════════════════════════════════════════════ 组件：卡片 CARD ═══════════════════════════════════════════════════════════ */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .card:hover { box-shadow: var(--shadow-md); } .card-interactive:hover { transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════════ 组件：输入框 INPUT ═══════════════════════════════════════════════════════════ */ .input { width: 100%; padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-base); color: var(--text); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .input::placeholder { color: var(--text-tertiary); } .input:focus { outline: none; border-color: var(--site-accent); box-shadow: 0 0 0 3px var(--site-accent-soft); } /* ═══════════════════════════════════════════════════════════ 组件：标签 TAG / BADGE ═══════════════════════════════════════════════════════════ */ .tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--text-secondary); } .tag-primary { background: var(--site-accent-soft); color: var(--site-accent-dark); } .tag-outline { background: transparent; border: 1px solid var(--border); } /* ═══════════════════════════════════════════════════════════ 组件：分隔线 ═══════════════════════════════════════════════════════════ */ .divider { width: 100%; height: 1px; background: var(--border); margin: var(--space-8) 0; } .divider-vertical { width: 1px; height: 100%; background: var(--border); } /* ═══════════════════════════════════════════════════════════ 组件：容器 CONTAINER ═══════════════════════════════════════════════════════════ */ .container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); } .container-sm { max-width: var(--container-sm); } .container-md { max-width: var(--container-md); } .container-lg { max-width: var(--container-lg); } /* ═══════════════════════════════════════════════════════════ 组件：区块 SECTIONS ═══════════════════════════════════════════════════════════ */ .section { padding: var(--space-16) 0; } .section-sm { padding: var(--space-8) 0; } .section-lg { padding: var(--space-24) 0; } /* ═══════════════════════════════════════════════════════════ 工具类 UTILITIES ═══════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .font-mono { font-family: var(--font-mono); } .font-serif { font-family: var(--font-serif); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-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(--text); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-accent { color: var(--site-accent); } .tracking-wide { letter-spacing: var(--tracking-wide); } .tracking-tight { letter-spacing: var(--tracking-tight); } .leading-tight { line-height: var(--leading-tight); } .leading-normal { line-height: var(--leading-normal); } .leading-relaxed { line-height: var(--leading-relaxed); } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .w-full { width: 100%; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } .shadow { box-shadow: var(--shadow-md); } .transition { transition: all var(--duration-base) var(--ease-out); } /* ═══════════════════════════════════════════════════════════ 响应式 RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .container { padding: 0 var(--space-4); } .section { padding: var(--space-12) 0; } .hide-mobile { display: none !important; } .grid-cols-2, .grid-cols-3 { grid-template-columns: 1fr; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* ═══════════════════════════════════════════════════════════ 动画 ANIMATION ═══════════════════════════════════════════════════════════ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-fadeIn { animation: fadeIn var(--duration-slow) var(--ease-out); } .animate-slideUp { animation: slideUp var(--duration-slow) var(--ease-out); } .animate-slideDown { animation: slideDown var(--duration-slow) var(--ease-out); } .animate-scaleIn { animation: scaleIn var(--duration-slow) var(--ease-out); } .animate-pulse { animation: pulse 2s var(--ease-in-out) infinite; } .animate-spin { animation: spin 1s linear infinite; } /* ═══════════════════════════════════════════════════════════ 聚焦状态 FOCUS STATES ═══════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════ 选择状态 SELECTION ═══════════════════════════════════════════════════════════ */ ::selection { background: var(--site-accent-soft); color: var(--site-accent-dark); } /* ═══════════════════════════════════════════════════════════ 滚动条 SCROLLBAR ═══════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-muted); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* ═══════════════════════════════════════════════════════════ 无障碍 ACCESSIBILITY ═══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }