:root{/* 主题颜色 */ --primary: #1db954; --primary-dark: #1aa34a; --primary-light: #1ed760; --dark: #0a0a0a; --dark-light: #1a1a1a; --text: #ffffff; --text-secondary: #b3b3b3; /* 阴影效果 */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.1); --shadow-md: 0 4px 16px rgba(0,0,0,0.1); --shadow-lg: 0 8px 30px rgba(0,0,0,0.2); /* 动画时间 */ --transition-fast: 0.2s; --transition-normal: 0.3s; --transition-slow: 0.5s;}
/* 基础样式重置和优化 */
*{margin: 0; padding: 0; box-sizing: border-box;}
html{scroll-behavior: smooth; font-size: 16px;}
body{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: var(--dark); color: var(--text); line-height: 1.6; overflow-x: hidden;}
/* 通用按钮样式 */
.btn{display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; border-radius: 2rem; font-weight: 600; text-decoration: none; transition: all var(--transition-normal); position: relative; overflow: hidden;}
.btn::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent); transform: translateX(-100%); transition: var(--transition-normal);}
.btn:hover::after{transform: translateX(100%);}
.btn-primary{background: var(--primary); color: var(--text);}
.btn-primary:hover{background: var(--primary-dark); transform: translateY(-3px); box-shadow: var(--shadow-lg);}
.btn-secondary{background: transparent; color: var(--text); border: 2px solid rgba(255,255,255,0.1);}
.btn-secondary:hover{background: rgba(255,255,255,0.1); transform: translateY(-3px);}
/* 导航栏样式 */
.side-nav{position: fixed; left: 0; top: 0; width: 100%; height: 60px; background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(10px); padding: 0 2rem; display: flex; align-items: center; z-index: 1000;}
.logo{display: flex; align-items: center; gap: 1rem; margin-right: 4rem; padding: 0.5rem 0;}
.logo i{color: var(--primary); font-size: 1.5rem;}
.logo h1{color: var(--text); font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; white-space: nowrap; letter-spacing: 0.1em;}
.nav-links{list-style: none; padding: 0; display: flex; gap: 3rem; align-items: center;}
.nav-links li{min-width: 80px; text-align: center;}
.nav-links a{display: flex; align-items: center; justify-content: center; padding: 0.5rem 0; color: var(--text-secondary); text-decoration: none; transition: all 0.3s; font-size: 0.95rem; font-weight: 500; position: relative; letter-spacing: 0.1em; width: 100%;}
.nav-links a:hover,
.nav-links a.active{color: var(--text);}
.nav-links a::after{content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--primary); transition: width 0.3s ease;}
.nav-links a:hover::after,
.nav-links a.active::after{width: 100%;}
/* 调整主内容区域 */
.main-content{padding-top: 60px; margin-left: 0;}
/* 电脑端样式 */
@media (min-width: 769px){.main-content{margin-left: 200px;}
}
/* 手机端样式 */
@media (max-width: 768px){/* 导航栏 */ .nav-bar{position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: var(--dark); display: flex; justify-content: space-between; align-items: center; padding: 0 16px; z-index: 1000;} .nav-left{display: flex; align-items: center; gap: 8px;} .nav-left i{font-size: 20px; color: var(--primary);} .nav-left h1{font-size: 16px; font-weight: 500;} .menu-toggle{width: 40px; height: 40px; border: none; background: none; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;} /* 导航菜单 */ .nav-menu{position: fixed; top: 50px; left: 0; width: 100%; background: var(--dark); display: flex; flex-direction: column; transform: translateY(-100%); transition: transform 0.3s ease; z-index: 999;} .nav-menu.active{transform: translateY(0);} .nav-menu a{padding: 16px; color: var(--text-secondary); text-decoration: none; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1);} .nav-menu a.active{color: var(--primary);} /* 主内容区域 */ .main-content{padding-top: 50px;} /* 英雄区域 */ .hero{min-height: calc(100vh - 50px); padding: 24px 16px; display: flex; align-items: center;} .hero-content{text-align: center;} .hero-title{font-size: 32px; margin-bottom: 16px;} .hero-description{font-size: 16px; color: var(--text-secondary); margin-bottom: 32px; line-height: 1.5;} .primary-btn{display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; background: var(--primary); color: white; text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: 500;}
}
/* 超小屏幕适配 */
@media (max-width: 480px){.logo h1{display: none;}
}
/* 卡片样式 */
.card{background: linear-gradient(145deg, var(--dark-light), var(--dark)); border-radius: 1.25rem; padding: 2rem; transition: all var(--transition-normal);}
.card:hover{transform: translateY(-0.5rem); box-shadow: var(--shadow-lg);}
/* 动画类 */
.fade-in{opacity: 0; transform: translateY(20px); animation: fadeIn 1s ease forwards;}
.slide-in{opacity: 0; transform: translateX(-100px); animation: slideIn 1s ease forwards;}
/* 响应式布局工具类 */
.container{width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 5%;}
.grid{display: grid; gap: 2rem;}
@media (min-width: 768px){.grid-cols-2{grid-template-columns: repeat(2, 1fr);} .grid-cols-3{grid-template-columns: repeat(3, 1fr);}
}
/* 标签导航样式 */
.nav-tabs{background: var(--dark); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 1rem 0;}
.tab-list{display: flex; list-style: none; gap: 2rem;}
.tab-list a{color: var(--text-secondary); text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: all var(--transition-normal);}
.tab-list a:hover,
.tab-list a.active{color: var(--primary);}
.section-title{font-size: 2.5rem; text-align: center; margin-bottom: 3rem; color: var(--primary); /* 基础颜色作为参考 */ position: relative;}
/* 现浏览器渐变文字 */
@supports (background-clip: text) or (-webkit-background-clip: text){.section-title{background-image: linear-gradient(45deg, var(--primary), var(--primary-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; transition: all var(--transition-normal);}
}
/* 添加发光效果 */
.section-title::after{content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 60px; height: 3px; background: var(--primary); border-radius: 3px; box-shadow: 0 0 10px var(--primary);}
/* 添加悬停效果 */
.section-title:hover{transform: scale(1.02);}
/* 响应式优化 */
@media (max-width: 768px){.section-title{font-size: 2rem;}
}
/* 导航栏响应式样式 */
@media (max-width: 768px){.side-nav{position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: var(--dark); padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; z-index: 1000;} .logo{margin-right: 0;} /* 菜单按钮样式 */ .menu-toggle{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--text-secondary); cursor: pointer;} /* 导航菜单样式 */ .nav-links{position: absolute; top: 50px; left: 0; width: 100%; background: var(--dark); flex-direction: column; padding: 0; transform: scaleY(0); /* 初始状态完全收起 */ transform-origin: top; /* 从顶部开始变换 */ transition: transform 0.3s ease; opacity: 0;} .nav-links.active{transform: scaleY(1); /* 展开状态 */ opacity: 1;} .nav-links li{width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05);} .nav-links a{padding: 1rem; justify-content: center; font-size: 1rem; color: var(--text-secondary);} .nav-links a.active{color: var(--primary); background: rgba(29, 185, 84, 0.1);} /* 移除下划线效果 */ .nav-links a::after{display: none;}
}
/* 超小屏幕适配 */
@media (max-width: 480px){.logo h1{display: none; /* 在超小屏幕上隐藏文字logo */} .nav-links{gap: 0.5rem;} .nav-links li{min-width: 50px;} .nav-links a{letter-spacing: 0.05em;}
}