/* iCMS Template Custom Styles */
/* 平滑滚动 */
html { scroll-behavior: smooth; }
/* 自定义动画 */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* 科技感背景动画 */
@keyframes techGrid {
0% { transform: translateX(0) translateY(0); opacity: 0.3; }
50% { opacity: 0.6; }
100% { transform: translateX(-20px) translateY(-20px); opacity: 0.3; }
}
@keyframes particleFloat {
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
25% { transform: translateY(-10px) rotate(90deg); opacity: 0.8; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 0.6; }
75% { transform: translateY(-10px) rotate(270deg); opacity: 0.8; }
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes dataFlow {
0% { transform: translateX(-100%); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
/* 英雄区科技背景 */
.hero-tech-bg { position: relative; background: linear-gradient(-45deg, #1e3a8a, #3b82f6, #1d4ed8, #2563eb); background-size: 400% 400%; animation: gradientShift 8s ease infinite; overflow: hidden; }
.hero-tech-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 50px 50px; animation: techGrid 10s linear infinite; z-index: 1; }
.hero-tech-bg::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%); z-index: 2; }
/* 粒子效果 */
.tech-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; }
.particle { position: absolute; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; animation: particleFloat 6s ease-in-out infinite; }
.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; left: 20%; animation-delay: 1s; }
.particle:nth-child(3) { top: 40%; left: 70%; animation-delay: 2s; }
.particle:nth-child(4) { top: 80%; left: 80%; animation-delay: 3s; }
.particle:nth-child(5) { top: 30%; left: 50%; animation-delay: 4s; }
.particle:nth-child(6) { top: 70%; left: 30%; animation-delay: 5s; }
/* 数据流效果 */
.data-flow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; }
.data-line { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); animation: dataFlow 8s linear infinite; }
.data-line:nth-child(1) { top: 25%; width: 200px; animation-delay: 0s; }
.data-line:nth-child(2) { top: 45%; width: 150px; animation-delay: 2s; }
.data-line:nth-child(3) { top: 65%; width: 180px; animation-delay: 4s; }
.data-line:nth-child(4) { top: 85%; width: 120px; animation-delay: 6s; }
/* 确保英雄区内容在最上层 */
.hero-content { position: relative; z-index: 10; }
@keyframes fadeInLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* 动画类 */
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-fade-in-left { animation: fadeInLeft 0.6s ease-out; }
.animate-fade-in-right { animation: fadeInRight 0.6s ease-out; }
.animate-pulse-slow { animation: pulse 2s infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
/* 渐变背景 */
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* 卡片悬停效果 */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
/* 按钮特效 */
.btn-primary { position: relative; overflow: hidden; transition: all 0.3s ease; }
.btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
.btn-primary:hover::before { left: 100%; }
/* 导航栏效果 */
.navbar-blur { backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.9); }
/* 文档侧边栏 */
.doc-sidebar { max-height: calc(100vh - 120px); overflow-y: auto; }
.doc-sidebar::-webkit-scrollbar { width: 4px; }
.doc-sidebar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 2px; }
.doc-sidebar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 2px; }
.doc-sidebar::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
/* 代码块样式增强 */
.markdown-content pre { position: relative; border-radius: 8px; border: 1px solid #e5e7eb; }
.markdown-content pre::before { content: ''; position: absolute; top: 12px; left: 12px; width: 12px; height: 12px; border-radius: 50%; background: #ff5f56; box-shadow: 20px 0 #ffbd2e, 40px 0 #27ca3f; }
/* 表格样式增强 */
.markdown-content table { border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
/* 引用块样式 */
.markdown-content blockquote { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 8px; padding: 16px; border-left: 4px solid #3b82f6; }
/* 加载动画 */
.loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(59, 130, 246, 0.3); border-radius: 50%; border-top-color: #3b82f6; animation: spin 1s ease-in-out infinite; }
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 响应式增强 */
@media (max-width:768px) {
.hero-title { font-size: 2.5rem; }
.hero-subtitle { font-size: 1.125rem; }
.feature-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.doc-sidebar { position: fixed; top: 64px; left: -100%; width: 280px; height: calc(100vh - 64px); background: white; z-index: 40; transition: left 0.3s ease; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); }
.doc-sidebar.open { left: 0; }
.doc-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 30; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.doc-overlay.open { opacity: 1; visibility: visible; }
}
/* 深色模式支持 */
@media (prefers-color-scheme:dark) {
.dark-mode { background-color: #1a202c; color: #e2e8f0; }
.dark-mode .bg-white { background-color: #2d3748; }
.dark-mode .text-gray-900 { color: #e2e8f0; }
.dark-mode .text-gray-600 { color: #a0aec0; }
.dark-mode .border-gray-200 { border-color: #4a5568; }
}
/* 打印样式 */
@media print {
.no-print { display: none !important; }
.print-break { page-break-before: always; }
.markdown-content { font-size: 12pt; line-height: 1.5; }
.markdown-content h1, .markdown-content h2, .markdown-content h3 { page-break-after: avoid; }
}
/* 可访问性增强 */
.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; }
/* 焦点样式 */
.focus-visible:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
/* 选择文本样式 */
::selection { background-color: #3b82f6; color: white; }
::-moz-selection { background-color: #3b82f6; color: white; }
/* 工具提示 */
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #1f2937; color: #fff; text-align: center; border-radius: 6px; padding: 5px 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; font-size: 12px; }
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #1f2937 transparent transparent transparent; }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
.content-3 { -webkit-line-clamp: 4; text-overflow: ellipsis; white-space: pre-wrap; word-wrap: break-word; letter-spacing: .3px; -webkit-box-orient: vertical; min-height: 5.3em; display: -webkit-box; overflow: hidden; }
.clip { background-clip: text; -webkit-background-clip: text; background-image: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff); background-image: linear-gradient(300deg, #bd34fe 30%, #41d1ff); color: transparent; background-color: rgba(0, 0, 0, 0); }
.dropdown-menu.show { display: block; }
/* 多级导航样式 */
.nav-submenu { overflow-x: hidden; overflow-y: auto;     /* transition: max-height 0.3s ease-in-out; */ max-height: 100vh !important; }
.nav-submenu.show { max-height: 1000px; }
.nav-arrow { transition: transform 0.2s ease-in-out; }
.nav-toggle:hover { background-color: rgba(59, 130, 246, 0.05); }
.nav-toggle:focus {     /* outline: 2px solid #3b82f6; */
/* outline-offset: 2px; */ }
.doc-link:hover { background-color: rgba(59, 130, 246, 0.05); border-color: rgba(59, 130, 246, 0.2); }
.doc-link:focus {     /* outline: 2px solid #3b82f6; */
/* outline-offset: 2px; */ }
.doc-link.active { background-color: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
/* 搜索框样式 */
#doc-search:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
/* 控制按钮样式 */
#expand-all:hover, #collapse-all:hover { background-color: rgba(59, 130, 246, 0.1); color: #1d4ed8; }
/* 响应式设计 */
@media (max-width:1024px) {
.nav-submenu { margin-left: 1rem; }
}
/* 动画效果 */
.nav-group {     /* transition: all 0.2s ease-in-out; */ }
.nav-group:hover {     /* transform: translateX(2px); */ }
/* 加载状态 */
.loading { opacity: 0.6; pointer-events: none; }
/* 滚动条样式 */
.nav-submenu::-webkit-scrollbar { width: 4px; }
.nav-submenu::-webkit-scrollbar-track { background: #f1f5f9; }
.nav-submenu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.nav-submenu::-webkit-scrollbar-thumb:hover { background: #94a3b8; }