/* ========================================================================== AiRecMark V3 - Global Shared CSS (common.css) Theme: Developer-Grade Model Matrix / Light Mode ========================================================================== */ /* 1. 外部字体引入 (Google Fonts) */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); /* 2. 全局 Design Tokens & CSS 变量 */ :root { /* 品牌主色系 (Primary Violet) */ --primary: #6d28d9; --primary-hover: #5b21b6; --primary-subtle: #ede9fe; --primary-surface: #f5f3ff; --primary-border: #ddd6fe; /* 背景与表面层级 (Surfaces) */ --surface-canvas: #faf8ff; --surface-card: #ffffff; --surface-low: #f2f3ff; --surface-muted: #f9fafb; --surface-dark: #0b0f19; /* 文字与排版色彩 (Text Colors) */ --text-main: #0f172a; --text-muted: #64748b; --text-subtle: #94a3b8; --text-code: #38bdf8; /* 边框系统 (Borders) */ --border-subtle: #e2e8f0; --border-medium: #cbd5e1; --border-dark: #1e293b; /* 状态与跑分信号 (Status Signals) */ --status-green: #10b981; --status-green-bg: #ecfdf5; --status-green-border: #a7f3d0; --status-amber: #f59e0b; --status-red: #ef4444; /* 字体家族 */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* 圆角规范 */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* 阴影规范 */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03); --shadow-hover: 0 10px 15px -3px rgba(109, 40, 217, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-terminal: 0 20px 25px -5px rgba(15, 23, 42, 0.3), 0 8px 10px -6px rgba(15, 23, 42, 0.2); } /* 3. 页面全局基础设定 */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); background-color: var(--surface-canvas); color: var(--text-main); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { margin: 0; padding: 0; line-height: 1.5; min-height: 100vh; } /* 等宽数字与代码字体 (金融与遥测标准) */ .font-mono, code, kbd, samp, pre { font-family: var(--font-mono); font-feature-settings: 'tnum' on, 'zero' on; } /* 4. 全局通用按钮规范 */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: var(--radius-sm); background-color: var(--primary); color: #ffffff !important; border: 1px solid transparent; transition: all 0.2s ease; text-decoration: none; cursor: pointer; } .btn-primary:hover { background-color: var(--primary-hover); box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25); transform: translateY(-1px); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: var(--radius-sm); background-color: var(--surface-card); color: var(--text-main); border: 1px solid var(--border-subtle); transition: all 0.2s ease; text-decoration: none; cursor: pointer; } .btn-secondary:hover { background-color: var(--surface-low); border-color: var(--primary-border); color: var(--primary); } /* 5. 通用卡片微交互 (Hover Card) */ .stat-card, .model-card, .doc-card, .feature-card { background-color: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover, .model-card:hover, .feature-card:hover { border-color: var(--primary-border); box-shadow: var(--shadow-hover); transform: translateY(-2px); } /* 6. 统一动态进度条 (Progress Bars) */ .bar-track { width: 100%; height: 6px; background-color: #f1f5f9; border-radius: var(--radius-full); overflow: hidden; position: relative; } .bar-fill { height: 100%; background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%); border-radius: var(--radius-full); transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .bar-fill.green { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); } /* 7. 30天直方图 (Histograms / Sparklines) */ .histogram-container { display: flex; align-items: flex-end; gap: 3px; height: 28px; } .histogram-bar { flex: 1; background-color: #ede9fe; border-radius: 2px; transition: all 0.2s ease; cursor: pointer; } .histogram-bar:hover, .histogram-bar.active { background-color: var(--primary); } /* 8. 实时遥测黑色终端视窗 (Telemetry Terminal) */ .telemetry-terminal { background-color: var(--surface-dark); border: 1px solid var(--border-dark); border-radius: var(--radius-md); box-shadow: var(--shadow-terminal); font-family: var(--font-mono); color: #f8fafc; overflow: hidden; } .terminal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background-color: #111827; border-bottom: 1px solid #1f2937; font-size: 0.75rem; } .terminal-dots { display: flex; gap: 6px; } .terminal-dot { width: 9px; height: 9px; border-radius: 50%; } .terminal-dot.red { background-color: #ef4444; } .terminal-dot.yellow { background-color: #f59e0b; } .terminal-dot.green { background-color: #10b981; } .terminal-body { padding: 0.75rem; font-size: 0.75rem; line-height: 1.6; max-height: 320px; overflow-y: auto; } /* 9. 状态脉冲与在线绿灯 (Live Pulse Badge) */ .live-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: var(--status-green); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: pulse-ring 2s infinite cubic-bezier(0.66, 0, 0, 1); } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* 10. 密码学验真证明徽章 (Merkle Audit Badge) */ .merkle-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-xs); font-size: 0.6875rem; font-weight: 600; font-family: var(--font-mono); background-color: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } /* 11. 无障碍适配 (Accessibility / Reduced Motion) */ @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; } }

/* ==== 全站共用基础样式（来自 18 页一致的 <style> 块） ==== */
@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}