/*
* 易班工作站 UI 增强样式文件
* 包含图标系统、交互效果、新UI组件等
* 基于蓝白主题色彩体系
*/
/* ========================================
全局图标增强样式 - 对比度优化版本
======================================== */
/* 基础图标增强 - 提升对比度 */
.fas, .fab, .far, .fal, .fad {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
transition: all 0.3s ease !important;
filter: contrast(1.4) brightness(1.2) saturate(1.1) !important;
position: relative;
font-weight: 600 !important;
}
/* 图标背景增强 - 提升可见性 */
.fas::before, .fab::before, .far::before, .fal::before, .fad::before {
position: relative;
z-index: 2;
}
/* 导航栏图标特殊优化 - 增强对比度 */
.navbar .fas, .navbar .fab {
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
filter: contrast(1.5) brightness(1.3) saturate(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
font-weight: 700 !important;
}
/* 深色背景上的图标优化 - 增强白色轮廓 */
.footer .fas, .footer .fab,
.bg-dark .fas, .bg-dark .fab,
.hero .fas, .hero .fab,
.page-header .fas, .page-header .fab {
text-shadow:
0 0 2px rgba(255, 255, 255, 0.8),
0 2px 8px rgba(0, 0, 0, 0.9),
0 0 4px rgba(255, 255, 255, 0.6) !important;
filter: contrast(1.6) brightness(1.4) saturate(1.3) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)) !important;
font-weight: 700 !important;
}
/* 浅色背景上的图标优化 - 增强深色轮廓 */
.bg-light .fas, .bg-light .fab,
.card .fas, .card .fab {
text-shadow:
0 0 1px rgba(0, 0, 0, 0.8),
0 1px 3px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.6) !important;
filter: contrast(1.4) brightness(0.8) saturate(1.2) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)) !important;
font-weight: 600 !important;
}
/* 带背景的图标 */
.icon-with-bg {
background: rgba(255, 255, 255, 0.1);
padding: 6px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 特定区域图标增强 */
.card i, .hero i, .value-icon i, .timeline i, .honor-icon i {
filter: contrast(1.3) brightness(1.1) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
/* 按钮内图标 */
.btn i {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
}
/* 卡片头部图标 */
.card-header i {
background: rgba(46, 123, 255, 0.1);
padding: 4px;
border-radius: 4px;
color: var(--primary-color) !important;
border: 1px solid rgba(46, 123, 255, 0.2);
}
/* ========================================
图标系统增强
======================================== */
/* 图标基础样式 */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-style: normal;
line-height: 1;
transition: var(--transition-fast);
}
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.5rem; }
.icon-xl { font-size: 2rem; }
.icon-2xl { font-size: 2.5rem; }
.icon-3xl { font-size: 3rem; }
/* 图标容器 - 专业精美版 */
.icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-full);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1);
}
.icon-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.icon-wrapper:hover {
transform: translateY(-8px) scale(1.05);
border-color: rgba(255, 255, 255, 0.3);
}
.icon-wrapper:hover::after {
opacity: 1;
}
.icon-wrapper-sm {
width: 2rem;
height: 2rem;
font-size: 0.875rem;
}
.icon-wrapper-md {
width: 2.5rem;
height: 2.5rem;
font-size: 1rem;
}
.icon-wrapper-lg {
width: 3rem;
height: 3rem;
font-size: 1.25rem;
}
.icon-wrapper-xl {
width: 4rem;
height: 4rem;
font-size: 1.5rem;
}
/* 图标颜色变体 - 专业精美版 */
.icon-primary {
color: var(--primary-color);
text-shadow: 0 2px 8px rgba(46, 123, 255, 0.4);
filter: drop-shadow(0 2px 4px rgba(46, 123, 255, 0.3));
}
.icon-secondary {
color: var(--text-primary);
text-shadow: 0 2px 6px rgba(30, 41, 59, 0.3);
filter: drop-shadow(0 1px 3px rgba(30, 41, 59, 0.2));
}
.icon-success {
color: var(--success-color);
text-shadow: 0 2px 8px rgba(0, 184, 148, 0.4);
filter: drop-shadow(0 2px 4px rgba(0, 184, 148, 0.3));
}
.icon-warning {
color: var(--warning-color);
text-shadow: 0 2px 8px rgba(253, 203, 110, 0.5);
filter: drop-shadow(0 2px 4px rgba(253, 203, 110, 0.4));
}
.icon-danger {
color: var(--danger-color);
text-shadow: 0 2px 8px rgba(232, 67, 147, 0.4);
filter: drop-shadow(0 2px 4px rgba(232, 67, 147, 0.3));
}
.icon-info {
color: var(--info-color);
text-shadow: 0 2px 8px rgba(116, 185, 255, 0.4);
filter: drop-shadow(0 2px 4px rgba(116, 185, 255, 0.3));
}
.icon-light {
color: var(--text-light);
text-shadow: 0 2px 6px rgba(203, 213, 225, 0.4);
}
.icon-dark {
color: var(--text-primary);
text-shadow: 0 2px 6px rgba(30, 41, 59, 0.3);
}
/* FontAwesome 图标默认颜色系统 */
.fa, .fas, .fab, .far, .fal {
color: var(--primary-color);
}
/* ========================================
专业精美图标颜色系统 - 七个核心图标重新设计
======================================== */
/* 1. 服务学生图标 - 深蓝色系（高对比度） */
.fa-users {
color: #1a365d !important;
filter: drop-shadow(0 3px 8px rgba(26, 54, 93, 0.6)) !important;
text-shadow: 0 2px 4px rgba(26, 54, 93, 0.5) !important;
}
/* 2. 举办活动图标 - 深青色系（高对比度） */
.fa-calendar-check {
color: #0d5257 !important;
filter: drop-shadow(0 3px 8px rgba(13, 82, 87, 0.6)) !important;
text-shadow: 0 2px 4px rgba(13, 82, 87, 0.5) !important;
}
/* 3. 获得荣誉图标 - 深金橙系（高对比度） */
.fa-trophy {
color: #b7791f !important;
filter: drop-shadow(0 3px 8px rgba(183, 121, 31, 0.7)) !important;
text-shadow: 0 2px 4px rgba(183, 121, 31, 0.6) !important;
}
/* 4. 满意度图标 - 深粉红系（高对比度） */
.fa-heart {
color: #c53030 !important;
filter: drop-shadow(0 3px 8px rgba(197, 48, 48, 0.6)) !important;
text-shadow: 0 2px 4px rgba(197, 48, 48, 0.5) !important;
animation: heartbeat 2s ease-in-out infinite;
}
/* 5. 学业指导图标 - 深蓝色系（高对比度） */
.fa-graduation-cap {
color: #2b6cb0 !important;
filter: drop-shadow(0 3px 8px rgba(43, 108, 176, 0.6)) !important;
text-shadow: 0 2px 4px rgba(43, 108, 176, 0.5) !important;
}
/* 6. 志愿服务图标 - 深绿色系（高对比度） */
.fa-hands-helping {
color: #2f855a !important;
filter: drop-shadow(0 3px 8px rgba(47, 133, 90, 0.6)) !important;
text-shadow: 0 2px 4px rgba(47, 133, 90, 0.5) !important;
}
/* 7. 平台建设图标 - 深科技蓝系（高对比度） */
.fa-network-wired {
color: #553c9a !important;
filter: drop-shadow(0 3px 8px rgba(85, 60, 154, 0.6)) !important;
text-shadow: 0 2px 4px rgba(85, 60, 154, 0.5) !important;
}
/* 心跳动画效果 */
@keyframes heartbeat {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* 其他功能图标保持原有设计 */
.fa-lightbulb {
color: #ffeaa7 !important;
text-shadow: 0 2px 4px rgba(255, 234, 167, 0.4) !important;
filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 4px rgba(255, 234, 167, 0.3)) !important;
}
.fa-crown {
color: #f39c12;
text-shadow: 0 2px 4px rgba(243, 156, 18, 0.5) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-user-tie {
color: #6c5ce7 !important;
text-shadow: 0 2px 4px rgba(108, 92, 231, 0.4) !important;
filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 4px rgba(108, 92, 231, 0.3)) !important;
}
.fa-user-graduate {
color: #74b9ff !important;
filter: drop-shadow(0 3px 8px rgba(116, 185, 255, 0.4)) !important;
text-shadow: 0 2px 4px rgba(116, 185, 255, 0.3) !important;
}
.fa-edit {
color: var(--info-color);
text-shadow: 0 2px 4px rgba(116, 185, 255, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-code {
color: #6c5ce7;
text-shadow: 0 2px 4px rgba(108, 92, 231, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-bullhorn {
color: var(--warning-color);
text-shadow: 0 2px 4px rgba(253, 203, 110, 0.5) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-headset {
color: #00b894 !important;
filter: drop-shadow(0 3px 8px rgba(0, 184, 148, 0.4)) !important;
text-shadow: 0 2px 4px rgba(0, 184, 148, 0.3) !important;
}
.fa-medal {
color: #e17055;
text-shadow: 0 2px 4px rgba(225, 112, 85, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-star {
color: #FFD700;
text-shadow: 0 2px 4px rgba(255, 215, 0, 0.5) !important;
filter: contrast(1.2) brightness(1.1) !important;
}
.fa-award {
color: #a29bfe;
text-shadow: 0 2px 4px rgba(162, 155, 254, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-gem {
color: #fd79a8;
text-shadow: 0 2px 4px rgba(253, 121, 168, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-map-marker-alt {
color: var(--danger-color);
text-shadow: 0 2px 4px rgba(232, 67, 147, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-phone {
color: var(--success-color);
text-shadow: 0 2px 4px rgba(0, 184, 148, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-envelope {
color: var(--info-color);
text-shadow: 0 2px 4px rgba(116, 185, 255, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-clock {
color: var(--warning-color);
text-shadow: 0 2px 4px rgba(253, 203, 110, 0.5) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-search, .fa-calendar-alt {
color: #1E88E5;
text-shadow: 0 2px 4px rgba(30, 136, 229, 0.4) !important;
filter: contrast(1.3) brightness(1.2) !important;
}
.fa-calendar-check {
color: #00BCD4;
text-shadow: 0 2px 4px rgba(0, 188, 212, 0.4) !important;
filter: contrast(1.3) brightness(1.2) !important;
}
.fa-filter {
color: var(--primary-color);
text-shadow: 0 2px 4px rgba(46, 123, 255, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-sort {
color: var(--text-secondary);
text-shadow: 0 2px 4px rgba(71, 85, 105, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-calendar {
color: #74b9ff !important;
text-shadow: 0 2px 4px rgba(116, 185, 255, 0.4) !important;
filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 4px rgba(116, 185, 255, 0.3)) !important;
}
.fa-eye, .fa-user-friends {
color: #00b894 !important;
text-shadow: 0 2px 4px rgba(0, 184, 148, 0.4) !important;
filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 4px rgba(0, 184, 148, 0.3)) !important;
}
.fa-download {
color: #fd79a8 !important;
text-shadow: 0 2px 4px rgba(253, 121, 168, 0.4) !important;
filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 4px rgba(253, 121, 168, 0.3)) !important;
}
.fa-link {
color: #a29bfe !important;
text-shadow: 0 2px 4px rgba(162, 155, 254, 0.4) !important;
filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 4px rgba(162, 155, 254, 0.3)) !important;
}
.fa-file {
color: var(--text-secondary);
text-shadow: 0 2px 4px rgba(71, 85, 105, 0.4) !important;
filter: contrast(1.3) brightness(1.1) !important;
}
.fa-image {
color: #e17055 !important;
text-shadow: 0 2px 4px rgba(225, 112, 85, 0.4) !important;
filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 4px rgba(225, 112, 85, 0.3)) !important;
}
/* 社交媒体图标颜色 - 对比度优化版本 */
.fa-weixin {
color: #07c160;
text-shadow: 0 2px 4px rgba(7, 193, 96, 0.4) !important;
filter: contrast(1.3) brightness(1.1) drop-shadow(0 1px 3px rgba(7, 193, 96, 0.3)) !important;
}
.fa-weibo {
color: #e6162d;
text-shadow: 0 2px 4px rgba(230, 22, 45, 0.4) !important;
filter: contrast(1.3) brightness(1.1) drop-shadow(0 1px 3px rgba(230, 22, 45, 0.3)) !important;
}
.fa-qq {
color: #12b7f5;
text-shadow: 0 2px 4px rgba(18, 183, 245, 0.4) !important;
filter: contrast(1.3) brightness(1.1) drop-shadow(0 1px 3px rgba(18, 183, 245, 0.3)) !important;
}
.fa-github {
color: #333333;
text-shadow: 0 2px 4px rgba(51, 51, 51, 0.6) !important;
filter: contrast(1.4) brightness(1.2) drop-shadow(0 1px 3px rgba(51, 51, 51, 0.4)) !important;
}
.fa-twitter {
color: #1da1f2;
text-shadow: 0 2px 4px rgba(29, 161, 242, 0.4) !important;
filter: contrast(1.3) brightness(1.1) drop-shadow(0 1px 3px rgba(29, 161, 242, 0.3)) !important;
}
.fa-facebook {
color: #1877f2;
text-shadow: 0 2px 4px rgba(24, 119, 242, 0.4) !important;
filter: contrast(1.3) brightness(1.1) drop-shadow(0 1px 3px rgba(24, 119, 242, 0.3)) !important;
}
.fa-instagram {
color: #e4405f;
text-shadow: 0 2px 4px rgba(228, 64, 95, 0.4) !important;
filter: contrast(1.3) brightness(1.1) drop-shadow(0 1px 3px rgba(228, 64, 95, 0.3)) !important;
}
.fa-youtube {
color: #ff0000;
text-shadow: 0 2px 4px rgba(255, 0, 0, 0.4) !important;
filter: contrast(1.3) brightness(1.1) drop-shadow(0 1px 3px rgba(255, 0, 0, 0.3)) !important;
}
.fa-linkedin {
color: #0077b5;
text-shadow: 0 2px 4px rgba(0, 119, 181, 0.4) !important;
filter: contrast(1.3) brightness(1.1) drop-shadow(0 1px 3px rgba(0, 119, 181, 0.3)) !important;
}
/* 箭头和导航图标 */
.fa-arrow-left, .fa-arrow-right, .fa-arrow-up, .fa-arrow-down {
color: var(--primary-color);
}
.fa-chevron-left, .fa-chevron-right, .fa-chevron-up, .fa-chevron-down {
color: var(--text-secondary);
}
/* 动作图标 - 明亮版本 */
.fa-plus {
color: #4CAF50;
text-shadow: 0 2px 4px rgba(76, 175, 80, 0.4) !important;
filter: contrast(1.3) brightness(1.2) !important;
}
.fa-minus, .fa-times, .fa-trash {
color: #F44336;
text-shadow: 0 2px 4px rgba(244, 67, 54, 0.4) !important;
filter: contrast(1.3) brightness(1.2) !important;
}
.fa-check {
color: #4CAF50;
text-shadow: 0 2px 4px rgba(76, 175, 80, 0.4) !important;
filter: contrast(1.3) brightness(1.2) !important;
}
.fa-save, .fa-share {
color: #1E88E5;
text-shadow: 0 2px 4px rgba(30, 136, 229, 0.4) !important;
filter: contrast(1.3) brightness(1.2) !important;
}
.fa-pencil-alt {
color: #FF9800;
text-shadow: 0 2px 4px rgba(255, 152, 0, 0.4) !important;
filter: contrast(1.3) brightness(1.2) !important;
}
.fa-copy {
color: #1E88E5;
text-shadow: 0 2px 4px rgba(30, 136, 229, 0.4) !important;
filter: contrast(1.3) brightness(1.2) !important;
}
/* 状态图标 */
.fa-exclamation-triangle { color: var(--warning-color); }
.fa-info-circle {
color: #74b9ff !important;
text-shadow: 0 2px 4px rgba(116, 185, 255, 0.4) !important;
filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 4px rgba(116, 185, 255, 0.3)) !important;
}
.fa-check-circle { color: var(--success-color); }
.fa-times-circle { color: var(--danger-color); }
.fa-question-circle { color: var(--primary-color); }
/* 悬停效果增强 - 专业精美版本 */
i[class*="fa-"]:hover {
transform: scale(1.15) rotate(5deg);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
filter: contrast(1.3) brightness(1.3) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)) !important;
}
/* 特定图标的特殊悬停效果 */
.fa-users:hover {
animation: bounce 0.6s ease;
}
.fa-calendar-check:hover {
animation: pulse 0.8s ease;
}
.fa-trophy:hover {
animation: swing 0.8s ease;
}
.fa-heart:hover {
animation: heartbeat 0.6s ease;
}
.fa-graduation-cap:hover {
animation: wobble 0.8s ease;
}
.fa-hands-helping:hover {
animation: shake 0.6s ease;
}
.fa-network-wired:hover {
animation: flash 0.8s ease;
}
/* 动画关键帧 */
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0,0,0) scale(1.15);
}
40%, 43% {
transform: translate3d(0,-8px,0) scale(1.15);
}
70% {
transform: translate3d(0,-4px,0) scale(1.15);
}
90% {
transform: translate3d(0,-2px,0) scale(1.15);
}
}
@keyframes pulse {
0% {
transform: scale(1.15);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1.15);
}
}
@keyframes swing {
20% {
transform: rotate3d(0, 0, 1, 15deg) scale(1.15);
}
40% {
transform: rotate3d(0, 0, 1, -10deg) scale(1.15);
}
60% {
transform: rotate3d(0, 0, 1, 5deg) scale(1.15);
}
80% {
transform: rotate3d(0, 0, 1, -5deg) scale(1.15);
}
100% {
transform: rotate3d(0, 0, 1, 0deg) scale(1.15);
}
}
@keyframes wobble {
0% {
transform: translate3d(0, 0, 0) scale(1.15);
}
15% {
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) scale(1.15);
}
30% {
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) scale(1.15);
}
45% {
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) scale(1.15);
}
60% {
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) scale(1.15);
}
75% {
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) scale(1.15);
}
100% {
transform: translate3d(0, 0, 0) scale(1.15);
}
}
@keyframes shake {
0%, 100% {
transform: translate3d(0, 0, 0) scale(1.15);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-2px, 0, 0) scale(1.15);
}
20%, 40%, 60%, 80% {
transform: translate3d(2px, 0, 0) scale(1.15);
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
transform: scale(1.15);
}
25%, 75% {
opacity: 0.8;
transform: scale(1.2);
}
}
/* 按钮内图标悬停效果 */
.btn:hover i[class*="fa-"] {
filter: contrast(1.3) brightness(1.3) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
/* 卡片内图标悬停效果 */
.card:hover i[class*="fa-"] {
filter: contrast(1.2) brightness(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
/* 导航链接图标悬停效果 */
.nav-menu a:hover i[class*="fa-"] {
filter: contrast(1.4) brightness(1.3) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)) !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}
/* 特殊背景下的图标对比度增强 */
.hero-section i[class*="fa-"],
.timeline i[class*="fa-"],
.honors-section i[class*="fa-"] {
filter: contrast(1.3) brightness(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
/* 白色背景上的深色图标增强 */
.bg-white i[class*="fa-"],
.bg-light i[class*="fa-"] {
filter: contrast(1.4) brightness(0.8) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2)) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
/* 渐变背景上的图标增强 */
[style*="gradient"] i[class*="fa-"],
.bg-gradient i[class*="fa-"] {
filter: contrast(1.4) brightness(1.3) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)) !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
}
/* 按钮内图标颜色继承 */
.btn i[class*="fa-"] {
color: inherit;
}
/* 导航栏图标 */
.nav-menu i[class*="fa-"] {
color: var(--primary-color);
margin-right: var(--spacing-2);
}
/* 图标背景变体 - 专业渐变设计 */
.icon-bg-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #FFFFFF;
box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
/* 确保icon-bg-primary内的图标为白色 */
.icon-bg-primary i {
color: #FFFFFF !important;
}
.icon-bg-primary::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.icon-bg-primary:hover::before {
opacity: 1;
}
.icon-bg-success {
background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
color: #FFFFFF;
box-shadow: 0 8px 32px rgba(0, 184, 148, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
/* 确保icon-bg-success内的图标为白色 */
.icon-bg-success i {
color: #FFFFFF !important;
}
.icon-bg-success::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.icon-bg-success:hover::before {
opacity: 1;
}
.icon-bg-warning {
background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
color: #FFFFFF;
box-shadow: 0 8px 32px rgba(253, 203, 110, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
/* 确保icon-bg-warning内的图标为白色 */
.icon-bg-warning i {
color: #FFFFFF !important;
}
.icon-bg-warning::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.icon-bg-warning:hover::before {
opacity: 1;
}
.icon-bg-danger {
background: linear-gradient(135deg, #e84393 0%, #fd79a8 100%);
color: #FFFFFF;
box-shadow: 0 8px 32px rgba(232, 67, 147, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.icon-bg-danger::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.icon-bg-danger:hover::before {
opacity: 1;
}
.icon-bg-info {
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
color: #FFFFFF;
box-shadow: 0 8px 32px rgba(116, 185, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.icon-bg-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.icon-bg-info:hover::before {
opacity: 1;
}
/* 图标动画效果 */
.icon-spin {
animation: iconSpin 1s linear infinite;
}
.icon-pulse {
animation: iconPulse 2s infinite;
}
.icon-bounce {
animation: iconBounce 1s infinite;
}
.icon-shake {
animation: iconShake 0.5s infinite;
}
@keyframes iconSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
}
@keyframes iconBounce {
0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
40%, 43% { transform: translateY(-8px); }
70% { transform: translateY(-4px); }
90% { transform: translateY(-2px); }
}
@keyframes iconShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
/* 卡片样式增强 - 适配白蓝渐变背景（更新版本） */
.card {
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 25%, #e6f1ff 50%, #f0f8ff 75%, #ffffff 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(46, 123, 255, 0.15);
border-radius: var(--border-radius-lg);
box-shadow: 0 8px 32px rgba(46, 123, 255, 0.12);
transition: var(--transition-base);
overflow: hidden;
position: relative;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(46, 123, 255, 0.18);
border-color: rgba(46, 123, 255, 0.25);
background: linear-gradient(135deg, #ffffff 0%, #e6f1ff 25%, #dae8ff 50%, #e6f1ff 75%, #ffffff 100%);
}
/* 导航栏logo文字颜色 */
.logo-text {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: var(--font-weight-bold);
}
/* 页面标题区域优化 */
.page-header {
background: var(--primary-gradient), url('path/to/image');
background-blend-mode: overlay;
position: relative;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(46, 123, 255, 0.8) 0%, rgba(79, 156, 249, 0.6) 100%);
z-index: 1;
}
.page-header .container {
position: relative;
z-index: 2;
}
/* 侧边栏组件优化 */
.widget {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(46, 123, 255, 0.1);
border-radius: var(--border-radius-lg);
box-shadow: 0 8px 32px rgba(46, 123, 255, 0.1);
margin-bottom: var(--spacing-6);
overflow: hidden;
}
.widget-title {
background: var(--primary-gradient);
color: white;
margin: 0;
padding: var(--spacing-4);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
}
/* 新闻卡片优化 */
.news-card {
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 25%, #e6f1ff 50%, #f0f8ff 75%, #ffffff 100%);
backdrop-filter: blur(15px);
border: 1px solid rgba(46, 123, 255, 0.15);
border-radius: var(--border-radius-lg);
overflow: hidden;
transition: var(--transition-base);
}
.news-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 64px rgba(46, 123, 255, 0.25);
border-color: rgba(46, 123, 255, 0.3);
background: linear-gradient(135deg, #ffffff 0%, #e6f1ff 25%, #dae8ff 50%, #e6f1ff 75%, #ffffff 100%);
}
/* 统计数字颜色增强 */
.stat-number {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 按钮增强效果 */
.cta-button, .btn-primary {
background: var(--primary-gradient);
border: none;
color: white;
padding: var(--spacing-4) var(--spacing-8);
border-radius: var(--border-radius-full);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition-base);
box-shadow: 0 8px 32px rgba(46, 123, 255, 0.3);
}
.cta-button:hover, .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 48px rgba(46, 123, 255, 0.4);
background: var(--primary-gradient-hover);
}
/* 英雄区域内容优化 */
.hero-title {
text-shadow: 2px 2px 4px rgba(46, 123, 255, 0.3);
}
.hero-subtitle {
text-shadow: 1px 1px 2px rgba(46, 123, 255, 0.2);
} */
/* 按钮基础样式增强 */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-6);
border: none;
border-radius: var(--border-radius);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: var(--transition-fast);
position: relative;
overflow: hidden;
line-height: var(--line-height-tight);
user-select: none;
}
.btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(46, 123, 255, 0.2);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* 按钮尺寸变体 */
.btn-xs {
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-xs);
gap: var(--spacing-1);
}
.btn-sm {
padding: var(--spacing-2) var(--spacing-4);
font-size: var(--font-size-sm);
gap: var(--spacing-1);
}
.btn-lg {
padding: var(--spacing-4) var(--spacing-8);
font-size: var(--font-size-lg);
gap: var(--spacing-3);
}
.btn-xl {
padding: var(--spacing-5) var(--spacing-10);
font-size: var(--font-size-xl);
gap: var(--spacing-3);
}
/* 按钮颜色变体 */
.btn-primary {
background: var(--primary-gradient);
color: var(--text-inverse);
box-shadow: var(--shadow-colored);
}
.btn-primary:hover {
background: var(--primary-gradient-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-colored-lg);
}
.btn-secondary {
background: var(--gray-500);
color: var(--text-inverse);
}
.btn-secondary:hover {
background: var(--gray-600);
transform: translateY(-1px);
}
.btn-success {
background: var(--success-color);
color: var(--text-inverse);
}
.btn-success:hover {
background: var(--success-light);
transform: translateY(-1px);
}
.btn-warning {
background: var(--warning-color);
color: var(--text-primary);
}
.btn-warning:hover {
background: var(--warning-light);
transform: translateY(-1px);
}
.btn-danger {
background: var(--danger-color);
color: var(--text-inverse);
}
.btn-danger:hover {
background: var(--danger-light);
transform: translateY(-1px);
}
/* 轮廓按钮 */
.btn-outline-primary {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline-primary:hover {
background: var(--primary-color);
color: var(--text-inverse);
transform: translateY(-1px);
}
.btn-outline-secondary {
background: transparent;
border: 2px solid var(--gray-500);
color: var(--gray-500);
}
.btn-outline-secondary:hover {
background: var(--gray-500);
color: var(--text-inverse);
}
/* 幽灵按钮 */
.btn-ghost {
background: transparent;
color: var(--primary-color);
padding: var(--spacing-3) var(--spacing-4);
}
.btn-ghost:hover {
background: var(--primary-lightest);
transform: translateY(-1px);
}
/* 按钮形状变体 */
.btn-rounded {
border-radius: var(--border-radius-full);
}
.btn-circle {
border-radius: 50%;
width: 3rem;
height: 3rem;
padding: 0;
}
.btn-square {
border-radius: 0;
}
/* 按钮加载状态 */
.btn-loading {
position: relative;
color: transparent !important;
}
.btn-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1rem;
height: 1rem;
margin: -0.5rem 0 0 -0.5rem;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: buttonSpin 1s linear infinite;
}
@keyframes buttonSpin {
to { transform: rotate(360deg); }
}
/* 按钮发光效果 */
.btn-glow {
position: relative;
overflow: visible;
}
.btn-glow::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
border-radius: inherit;
filter: blur(8px);
opacity: 0;
transition: var(--transition-fast);
z-index: -1;
}
.btn-glow:hover::before {
opacity: 0.3;
}
/* ========================================
增强的卡片组件
======================================== */
.card {
background: var(--bg-primary);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: var(--transition-base);
border: 1px solid var(--border-color);
position: relative;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-light);
}
/* 卡片变体 */
.card-elevated {
box-shadow: var(--shadow-lg);
}
.card-elevated:hover {
box-shadow: var(--shadow-2xl);
}
.card-flat {
box-shadow: none;
border: 1px solid var(--border-color);
}
.card-flat:hover {
box-shadow: var(--shadow-md);
}
.card-glass {
background: var(--bg-glass);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-gradient {
background: var(--primary-gradient);
color: var(--text-inverse);
border: none;
}
/* 卡片内容区域 */
.card-header {
padding: var(--spacing-6);
border-bottom: 1px solid var(--border-color);
background: var(--bg-secondary);
}
.card-body {
padding: var(--spacing-6);
}
.card-footer {
padding: var(--spacing-6);
border-top: 1px solid var(--border-color);
background: var(--bg-secondary);
}
/* 卡片图片 */
.card-image {
position: relative;
overflow: hidden;
}
.card-image img {
width: 100%;
height: auto;
transition: var(--transition-slow);
}
.card:hover .card-image img {
transform: scale(1.05);
}
.card-image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-overlay);
opacity: 0;
transition: var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.card:hover .card-image-overlay {
opacity: 1;
}
/* ========================================
增强的表单组件
======================================== */
.form-group {
margin-bottom: var(--spacing-6);
position: relative;
}
.form-label {
display: block;
margin-bottom: var(--spacing-2);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.form-control {
width: 100%;
padding: var(--spacing-3) var(--spacing-4);
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
font-size: var(--font-size-base);
transition: var(--transition-fast);
background: var(--bg-primary);
color: var(--text-primary);
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(46, 123, 255, 0.1);
background: var(--bg-primary);
}
.form-control:invalid {
border-color: var(--danger-color);
}
.form-control:invalid:focus {
box-shadow: 0 0 0 3px rgba(232, 67, 147, 0.1);
}
/* 浮动标签效果 */
.form-floating {
position: relative;
}
.form-floating .form-control {
padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
}
.form-floating .form-label {
position: absolute;
top: 0;
left: var(--spacing-4);
padding: var(--spacing-4) 0 var(--spacing-2);
pointer-events: none;
transition: var(--transition-fast);
transform-origin: 0 0;
color: var(--text-muted);
}
.form-floating .form-control:focus ~ .form-label,
.form-floating .form-control:not(:placeholder-shown) ~ .form-label {
transform: scale(0.85) translateY(-0.5rem);
color: var(--primary-color);
}
/* 输入框图标 */
.form-icon {
position: relative;
}
.form-icon .form-control {
padding-left: var(--spacing-10);
}
.form-icon .icon {
position: absolute;
left: var(--spacing-3);
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.form-icon .form-control:focus ~ .icon {
color: var(--primary-color);
}
/* ========================================
通知和提示组件
======================================== */
.alert {
padding: var(--spacing-4) var(--spacing-6);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-4);
border-left: 4px solid;
position: relative;
display: flex;
align-items: flex-start;
gap: var(--spacing-3);
}
.alert-primary {
background: var(--primary-lightest);
border-color: var(--primary-color);
color: var(--primary-darker);
}
.alert-success {
background: rgba(0, 184, 148, 0.1);
border-color: var(--success-color);
color: var(--success-color);
}
.alert-warning {
background: rgba(253, 203, 110, 0.1);
border-color: var(--warning-color);
color: var(--warning-color);
}
.alert-danger {
background: rgba(232, 67, 147, 0.1);
border-color: var(--danger-color);
color: var(--danger-color);
}
.alert-info {
background: rgba(116, 185, 255, 0.1);
border-color: var(--info-color);
color: var(--info-color);
}
/* 吐司通知 */
.toast {
position: fixed;
top: var(--spacing-6);
right: var(--spacing-6);
background: var(--bg-primary);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--spacing-4);
z-index: var(--z-index-tooltip);
transform: translateX(100%);
transition: var(--transition-base);
border-left: 4px solid var(--primary-color);
min-width: 300px;
}
.toast.show {
transform: translateX(0);
}
.toast-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-2);
font-weight: var(--font-weight-medium);
}
.toast-close {
background: none;
border: none;
font-size: var(--font-size-lg);
cursor: pointer;
color: var(--text-muted);
padding: 0;
line-height: 1;
}
/* ========================================
进度指示器
======================================== */
.progress {
width: 100%;
height: 8px;
background: var(--bg-secondary);
border-radius: var(--border-radius-full);
overflow: hidden;
position: relative;
}
.progress-bar {
height: 100%;
background: var(--primary-gradient);
border-radius: var(--border-radius-full);
transition: width var(--transition-base);
position: relative;
overflow: hidden;
}
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: progressShine 2s infinite;
}
@keyframes progressShine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* 圆形进度条 */
.progress-circle {
position: relative;
width: 80px;
height: 80px;
}
.progress-circle svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}
.progress-circle-bg {
fill: none;
stroke: var(--bg-secondary);
stroke-width: 8;
}
.progress-circle-bar {
fill: none;
stroke: var(--primary-color);
stroke-width: 8;
stroke-linecap: round;
transition: stroke-dasharray var(--transition-base);
}
/* ========================================
徽章和标签
======================================== */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: 1;
border-radius: var(--border-radius-full);
text-transform: uppercase;
letter-spacing: 0.025em;
}
.badge-primary {
background: var(--primary-color);
color: var(--text-inverse);
}
.badge-secondary {
background: var(--gray-500);
color: var(--text-inverse);
}
.badge-success {
background: var(--success-color);
color: var(--text-inverse);
}
.badge-warning {
background: var(--warning-color);
color: var(--text-primary);
}
.badge-danger {
background: var(--danger-color);
color: var(--text-inverse);
}
.badge-info {
background: var(--info-color);
color: var(--text-inverse);
}
.badge-light {
background: var(--gray-200);
color: var(--text-primary);
}
.badge-dark {
background: var(--gray-800);
color: var(--text-inverse);
}
/* 轮廓徽章 */
.badge-outline-primary {
background: transparent;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
/* 点状徽章 */
.badge-dot {
position: relative;
padding-right: var(--spacing-5);
}
.badge-dot::before {
content: '';
position: absolute;
right: var(--spacing-2);
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ========================================
工具提示
======================================== */
.tooltip {
position: relative;
cursor: help;
}
.tooltip::before,
.tooltip::after {
position: absolute;
opacity: 0;
pointer-events: none;
transition: var(--transition-fast);
z-index: var(--z-index-tooltip);
}
.tooltip::before {
content: attr(data-tooltip);
background: var(--bg-dark);
color: var(--text-inverse);
padding: var(--spacing-2) var(--spacing-3);
border-radius: var(--border-radius);
font-size: var(--font-size-sm);
white-space: nowrap;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
}
.tooltip::after {
content: '';
border: 4px solid transparent;
border-top-color: var(--bg-dark);
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
}
/* ========================================
响应式网格增强
======================================== */
.grid {
display: grid;
gap: var(--spacing-6);
}
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
/* Flexbox 工具类 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
/* 间距工具类 */
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }
/* ========================================
响应式断点
======================================== */
/* ========================================
简洁统计卡片样式 - 匹配参考设计
======================================== */
/* 简洁统计卡片容器 */
.stats-cards-simple {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
}
/* 简洁统计卡片样式 */
.stat-card-simple {
background: #ffffff;
border-radius: 20px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.04);
position: relative;
overflow: hidden;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.stat-card-simple::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.stat-card-simple:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
}
.stat-card-simple:hover::before {
opacity: 1;
}
.stat-card-simple:hover .redesigned-stats-icon {
transform: scale(1.1);
}
/* 简洁卡片中的图标样式调整 */
.stat-card-simple .redesigned-stats-icon {
margin: 0 auto 20px;
width: 80px;
height: 80px;
}
/* 简洁卡片中的数字样式 */
.stat-card-simple .stat-number {
font-size: 3.5rem;
font-weight: 700;
color: #2563eb;
margin-bottom: 8px;
line-height: 1;
font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
/* 简洁卡片中的标签样式 */
.stat-card-simple .stat-label {
font-size: 1.1rem;
font-weight: 500;
color: #374151;
margin: 0;
line-height: 1.2;
font-family: 'Inter', 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
/* 响应式调整 */
@media (max-width: 768px) {
.stats-cards-simple {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 15px 0;
}
.stat-card-simple {
padding: 24px 16px;
min-height: 160px;
}
.stat-card-simple .redesigned-stats-icon {
width: 60px;
height: 60px;
margin-bottom: 16px;
}
.stat-card-simple .redesigned-stats-icon .icon-symbol i {
font-size: 1.5rem !important;
}
.stat-card-simple .stat-number {
font-size: 2.5rem;
}
.stat-card-simple .stat-label {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.stats-cards-simple {
grid-template-columns: 1fr;
gap: 16px;
}
.stat-card-simple {
padding: 20px 16px;
min-height: 140px;
}
.stat-card-simple .redesigned-stats-icon {
width: 50px;
height: 50px;
margin-bottom: 12px;
}
.stat-card-simple .redesigned-stats-icon .icon-symbol i {
font-size: 1.25rem !important;
}
.stat-card-simple .stat-number {
font-size: 2rem;
}
.stat-card-simple .stat-label {
font-size: 0.85rem;
}
}
/* ========================================
重新设计的图标样式 - 匹配设计参考
======================================== */
/* 统计数据图标样式 */
.redesigned-stats-icon {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.redesigned-stats-icon::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, rgba(255,255,255,0.3), transparent);
border-radius: 50%;
z-index: 1;
}
.redesigned-stats-icon .icon-symbol {
font-size: 2rem;
z-index: 2;
position: relative;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* 统计图标具体样式 */
.stats-users-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.stats-activity-icon {
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}
.stats-trophy-icon {
background: linear-gradient(135deg, #ff9a85 0%, #f7931e 100%);
}
.stats-satisfaction-icon {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}
/* 服务类别图标样式 */
.redesigned-service-icon {
width: 80px;
height: 80px;
border-radius: 15px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.redesigned-service-icon .icon-symbol {
font-size: 2rem;
z-index: 2;
position: relative;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
/* 服务图标具体样式 */
.service-education-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.service-volunteer-icon {
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}
.service-platform-icon {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
/* 悬停动画效果 */
.card:hover .redesigned-stats-icon,
.card:hover .redesigned-service-icon {
animation: pulse-redesigned 2s infinite;
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0,0,0,0.2);
}
@keyframes pulse-redesigned {
0%, 100% {
transform: translateY(-2px) scale(1);
}
50% {
transform: translateY(-2px) scale(1.05);
}
}
/* 响应式调整 */
@media (max-width: 768px) {
.redesigned-stats-icon,
.redesigned-service-icon {
width: 60px;
height: 60px;
}
.redesigned-stats-icon .icon-symbol,
.redesigned-service-icon .icon-symbol {
font-size: 1.5rem;
}
}
@media (max-width: 640px) {
.grid-cols-2,
.grid-cols-3,
.grid-cols-4,
.grid-cols-5,
.grid-cols-6 {
grid-template-columns: 1fr;
}
.btn-lg {
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--font-size-base);
}
.card:hover {
transform: none;
}
}
@media (max-width: 768px) {
.grid-cols-3,
.grid-cols-4,
.grid-cols-5,
.grid-cols-6 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.grid-cols-4,
.grid-cols-5,
.grid-cols-6 {
grid-template-columns: repeat(3, 1fr);
}
}
/* ========================================
表单和输入元素增强 - 蓝白主题
======================================== */
/* 输入框样式 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(46, 123, 255, 0.2);
border-radius: var(--border-radius);
padding: var(--spacing-3) var(--spacing-4);
font-size: var(--font-size-base);
transition: var(--transition-fast);
backdrop-filter: blur(10px);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(46, 123, 255, 0.2);
background: rgba(255, 255, 255, 0.95);
}
/* 搜索按钮增强 */
.search-input-group {
position: relative;
display: flex;
}
.search-input-group button {
background: var(--primary-gradient);
border: none;
padding: var(--spacing-3);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
color: white;
cursor: pointer;
transition: var(--transition-fast);
}
.search-input-group button:hover {
background: var(--primary-gradient-hover);
transform: scale(1.05);
}
.search-input-group input {
border-radius: var(--border-radius) 0 0 var(--border-radius);
border-right: none;
}
/* 选择下拉框增强 */
.sort-select {
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(46, 123, 255, 0.2);
padding: var(--spacing-2) var(--spacing-4);
border-radius: var(--border-radius);
cursor: pointer;
transition: var(--transition-fast);
}
.sort-select:hover {
border-color: var(--primary-color);
background: rgba(255, 255, 255, 0.95);
}
/* 分类链接增强 */
.category-link {
background: rgba(255, 255, 255, 0.8);
border-left: 4px solid transparent;
transition: var(--transition-fast);
}
.category-link:hover,
.category-link.active {
background: rgba(46, 123, 255, 0.1);
border-left-color: var(--primary-color);
}
/* ========================================
首页板块标题样式优化
======================================== */
/* 首页专用的小标题样式 */
.section-title {
font-size: 1.75rem !important; /* 从默认的2rem缩小到1.75rem */
font-weight: var(--font-weight-semibold);
text-align: center;
margin-bottom: var(--spacing-8);
color: var(--text-primary);
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--primary-gradient);
border-radius: 2px;
}
/* 新闻卡片标题 */
.news-title {
font-size: 1.125rem !important; /* 从1.25rem缩小 */
line-height: 1.4;
margin-bottom: var(--spacing-3);
}
/* 服务卡片标题 */
.services-section h3 {
font-size: 1.25rem !important; /* 从1.5rem缩小 */
margin-bottom: var(--spacing-4);
}
/* 快速导航卡片标题 */
.link-card h3 {
font-size: 1.125rem !important; /* 从1.25rem缩小 */
margin-bottom: var(--spacing-2);
}
/* ========================================
导航栏黑色主题样式
======================================== */
/* 导航栏文字颜色 */
.navbar .nav-menu a {
color: white !important;
transition: var(--transition-fast);
}
.navbar .nav-menu a:hover {
color: var(--primary-color) !important;
}
.navbar .logo-text {
color: white !important;
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: unset !important;
}
/* 导航栏图标彩色化 - 明亮版本 */
.navbar .fa-home { color: #4CAF50 !important; } /* 绿色首页 */
.navbar .fa-info-circle { color: #2196F3 !important; } /* 蓝色信息 */
.navbar .fa-newspaper { color: #FF9800 !important; } /* 橙色新闻 */
.navbar .fa-calendar-alt { color: #E91E63 !important; } /* 粉色活动 */
.navbar .fa-users { color: #9C27B0 !important; } /* 紫色成员 */
.navbar .fa-download { color: #00BCD4 !important; } /* 青色下载 */
.navbar .fa-cog { color: #607D8B !important; } /* 灰色管理 */
/* 移动端菜单按钮 */
.nav-toggle span {
background: white !important;
}
/* ========================================
页脚黑色主题样式
======================================== */
/* 重写页脚样式 */
.footer {
background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #333333 100%) !important;
color: white !important;
}
.footer h3,
.footer h4 {
color: white !important;
font-size: var(--font-size-lg) !important;
}
.footer p,
.footer li,
.footer a {
color: rgba(255, 255, 255, 0.8) !important;
font-size: var(--font-size-sm) !important;
}
.footer a:hover {
color: white !important;
}
.footer-bottom {
font-size: var(--font-size-xs) !important;
}
.footer-bottom a {
font-size: var(--font-size-xs) !important;
}
/* 页脚社交图标彩色化 - 高对比度版本 */
.footer .fa-weixin {
color: #07c160 !important;
background: rgba(7, 193, 96, 0.4) !important;
box-shadow: 0 2px 8px rgba(7, 193, 96, 0.4) !important;
border: 2px solid rgba(7, 193, 96, 0.6) !important;
}
.footer .fa-weibo {
color: #e6162d !important;
background: rgba(230, 22, 45, 0.4) !important;
box-shadow: 0 2px 8px rgba(230, 22, 45, 0.4) !important;
border: 2px solid rgba(230, 22, 45, 0.6) !important;
}
.footer .fa-qq {
color: #12b7f5 !important;
background: rgba(18, 183, 245, 0.4) !important;
box-shadow: 0 2px 8px rgba(18, 183, 245, 0.4) !important;
border: 2px solid rgba(18, 183, 245, 0.6) !important;
}
/* 页脚联系信息图标彩色化 - 高对比度版本 */
.footer .fa-map-marker-alt {
color: #e84393 !important;
text-shadow: 0 1px 3px rgba(232, 67, 147, 0.5) !important;
background: rgba(232, 67, 147, 0.15) !important;
padding: 4px;
border-radius: 4px;
}
.footer .fa-phone {
color: #00b894 !important;
text-shadow: 0 1px 3px rgba(0, 184, 148, 0.5) !important;
background: rgba(0, 184, 148, 0.15) !important;
padding: 4px;
border-radius: 4px;
}
.footer .fa-envelope {
color: #74b9ff !important;
text-shadow: 0 1px 3px rgba(116, 185, 255, 0.5) !important;
background: rgba(116, 185, 255, 0.15) !important;
padding: 4px;
border-radius: 4px;
}
/* ========================================
水平直线时间轴样式 - 完全匹配参考图布局
======================================== */
.timeline-container-horizontal {
padding: 40px 0 60px 0;
max-width: 1200px;
margin: 0 auto;
}
/* 年份标题行 */
.timeline-years {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 40px;
}
.year-label {
text-align: center;
font-weight: bold;
font-size: 20px;
line-height: 1.2;
}
.year-label small {
font-size: 12px;
opacity: 0.8;
font-weight: normal;
}
/* 年份颜色主题 */
.year-orange { color: #ff6b35; }
.year-red { color: #ff4757; }
.year-blue { color: #3742fa; }
.year-green { color: #2ed573; }
.year-purple { color: #5352ed; }
.year-teal { color: #20bf6b; }
.year-gradient { color: #667eea; }
/* 时间轴线条容器 */
.timeline-line-container {
position: relative;
margin: 0 40px 40px 40px;
height: 20px;
}
/* 时间轴主线条 - 彩色渐变曲线 */
.timeline-curved-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
height: 20px;
transform: translateY(-50%);
overflow: visible;
z-index: 1;
}
.timeline-curved-line path {
vector-effect: non-scaling-stroke;
}
/* 完全隐藏原直线样式 */
.timeline-line {
display: none !important;
}
/* 时间轴圆点容器 */
.timeline-dots {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
z-index: 2;
}
/* 时间轴圆点 */
.timeline-dot-horizontal {
width: 20px;
height: 20px;
border-radius: 50%;
border: 4px solid white;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
position: relative;
transition: transform 0.3s ease;
}
/* 圆点沿曲线的位置微调 - 更好地对齐新曲线 */
.timeline-dot-horizontal:nth-child(1) { transform: translateY(0px); }
.timeline-dot-horizontal:nth-child(2) { transform: translateY(-3px); }
.timeline-dot-horizontal:nth-child(3) { transform: translateY(-5px); }
.timeline-dot-horizontal:nth-child(4) { transform: translateY(-3px); }
.timeline-dot-horizontal:nth-child(5) { transform: translateY(0px); }
.timeline-dot-horizontal:nth-child(6) { transform: translateY(-2px); }
.timeline-dot-horizontal:nth-child(7) { transform: translateY(0px); }
/* 圆点颜色 - 匹配参考图 */
.timeline-dot-horizontal.dot-orange { background-color: #ff6b35; }
.timeline-dot-horizontal.dot-red { background-color: #ff4757; }
.timeline-dot-horizontal.dot-blue { background-color: #3742fa; }
.timeline-dot-horizontal.dot-green { background-color: #2ed573; }
.timeline-dot-horizontal.dot-purple { background-color: #5352ed; }
.timeline-dot-horizontal.dot-teal { background-color: #20bf6b; }
.timeline-dot-horizontal.dot-gradient { background-color: #667eea; }
/* 内容卡片行 */
.timeline-cards-row {
display: flex;
justify-content: space-between;
gap: 15px;
padding: 0 40px;
align-items: flex-start;
}
/* 矩形卡片样式 - 匹配参考图 */
.timeline-card-rect {
flex: 1;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border: 2px solid transparent;
transition: all 0.3s ease;
min-height: 280px;
display: flex;
flex-direction: column;
}
/* 卡片主题颜色 */
.card-theme-orange { border-color: #ff6b35; }
.card-theme-red { border-color: #ff4757; }
.card-theme-blue { border-color: #3742fa; }
.card-theme-green { border-color: #2ed573; }
.card-theme-purple { border-color: #5352ed; }
.card-theme-teal { border-color: #20bf6b; }
.card-theme-gradient { border-color: #667eea; }
.timeline-card-rect:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
/* 卡片图标 */
.timeline-card-rect .card-icon {
text-align: center;
margin-bottom: 15px;
}
.timeline-card-rect .card-icon i {
font-size: 32px;
color: inherit;
}
.card-theme-orange .card-icon i { color: #ff6b35; }
.card-theme-red .card-icon i { color: #ff4757; }
.card-theme-blue .card-icon i { color: #3742fa; }
.card-theme-green .card-icon i { color: #2ed573; }
.card-theme-purple .card-icon i { color: #5352ed; }
.card-theme-teal .card-icon i { color: #20bf6b; }
.card-theme-gradient .card-icon i { color: #667eea; }
/* 卡片内容 */
.timeline-card-rect .card-content {
flex-grow: 1;
}
.timeline-card-rect h3 {
font-size: 18px;
font-weight: 600;
color: #2c3e50;
margin: 0 0 12px 0;
text-align: center;
}
.timeline-card-rect p {
color: #666;
line-height: 1.6;
font-size: 14px;
margin: 0 0 15px 0;
text-align: left;
}
/* 卡片标签 */
.timeline-card-rect .card-tags {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-top: auto;
}
.timeline-card-rect .card-tags span {
padding: 4px 12px;
border-radius: 15px;
font-size: 11px;
font-weight: 500;
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* 标签颜色匹配主题 */
.card-theme-orange .card-tags span { background-color: #ff6b35; }
.card-theme-red .card-tags span { background-color: #ff4757; }
.card-theme-blue .card-tags span { background-color: #3742fa; }
.card-theme-green .card-tags span { background-color: #2ed573; }
.card-theme-purple .card-tags span { background-color: #5352ed; }
.card-theme-teal .card-tags span { background-color: #20bf6b; }
.card-theme-gradient .card-tags span { background-color: #667eea; }
/* 响应式布局 */
@media (max-width: 1200px) {
.timeline-container-horizontal {
padding: 30px 20px 40px 20px;
}
.timeline-years,
.timeline-line-container,
.timeline-cards-row {
padding: 0 20px;
}
.timeline-cards-row {
gap: 12px;
}
.timeline-card-rect {
padding: 15px;
min-height: 260px;
}
.year-label {
font-size: 18px;
}
}
@media (max-width: 768px) {
.timeline-years {
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.year-label {
font-size: 16px;
min-width: 80px;
}
.timeline-line-container {
display: none;
}
.timeline-cards-row {
flex-direction: column;
gap: 20px;
align-items: center;
}
.timeline-card-rect {
max-width: 400px;
width: 100%;
}
}
/* ========================================
新的曲线时间轴样式 - 参考R.png设计（保留备用）
======================================== */
.curved-timeline-container {
position: relative;
padding: 60px 0;
min-height: 400px;
overflow: visible;
}
/* 曲线路径容器 */
.curved-timeline-path {
position: absolute;
top: 50px;
left: 0;
right: 0;
height: 120px;
z-index: 1;
}
.timeline-curve {
width: 100%;
height: 100%;
}
/* 时间轴节点容器 */
.timeline-nodes {
position: relative;
z-index: 2;
height: 350px;
}
/* 单个时间节点 */
.timeline-node {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
animation: fadeInUp 0.8s ease forwards;
opacity: 0;
transform: translateY(30px);
}
/* 节点动画延迟 */
.timeline-node:nth-child(1) { animation-delay: 0.2s; }
.timeline-node:nth-child(2) { animation-delay: 0.4s; }
.timeline-node:nth-child(3) { animation-delay: 0.6s; }
.timeline-node:nth-child(4) { animation-delay: 0.8s; }
.timeline-node:nth-child(5) { animation-delay: 1.0s; }
.timeline-node:nth-child(6) { animation-delay: 1.2s; }
.timeline-node:nth-child(7) { animation-delay: 1.4s; }
/* 时间轴圆点 */
.timeline-dot {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
position: relative;
z-index: 3;
margin-bottom: 20px;
transition: all 0.3s ease;
cursor: pointer;
border: 4px solid white;
}
/* 圆点颜色变体 */
.dot-orange { background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); }
.dot-red { background: linear-gradient(135deg, #ff4757 0%, #ff3838 100%); }
.dot-blue { background: linear-gradient(135deg, #3742fa 0%, #2f3542 100%); }
.dot-green { background: linear-gradient(135deg, #2ed573 0%, #1e90ff 100%); }
.dot-purple { background: linear-gradient(135deg, #5352ed 0%, #3742fa 100%); }
.dot-teal { background: linear-gradient(135deg, #20bf6b 0%, #26de81 100%); }
.dot-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.timeline-dot:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
/* 年份文字 */
.timeline-year {
font-size: 14px;
font-weight: bold;
letter-spacing: 0.5px;
}
/* 内容卡片 */
.timeline-content-card {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
width: 280px;
margin-left: -140px;
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.timeline-content-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, transparent, currentColor, transparent);
opacity: 0.3;
}
/* 卡片颜色变体 */
.card-orange { border-color: #ff6b35; color: #ff6b35; }
.card-red { border-color: #ff4757; color: #ff4757; }
.card-blue { border-color: #3742fa; color: #3742fa; }
.card-green { border-color: #2ed573; color: #2ed573; }
.card-purple { border-color: #5352ed; color: #5352ed; }
.card-teal { border-color: #20bf6b; color: #20bf6b; }
.card-gradient { border-color: #667eea; color: #667eea; }
.timeline-content-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
border-width: 3px;
}
/* 卡片标题区域 */
.timeline-content-card .card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.timeline-content-card .card-header i {
font-size: 20px;
opacity: 0.8;
}
.timeline-content-card h3 {
font-size: 18px;
font-weight: 600;
margin: 0;
color: #2c3e50;
}
/* 卡片内容文字 */
.timeline-content-card p {
color: #666;
line-height: 1.6;
margin: 0 0 15px 0;
font-size: 14px;
}
/* 标签区域 */
.timeline-content-card .timeline-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* 不同颜色的标签 */
.tag-orange { background: linear-gradient(135deg, #ff6b35, #f7931e); color: white; }
.tag-red { background: linear-gradient(135deg, #ff4757, #ff3838); color: white; }
.tag-blue { background: linear-gradient(135deg, #3742fa, #2f3542); color: white; }
.tag-green { background: linear-gradient(135deg, #2ed573, #1e90ff); color: white; }
.tag-purple { background: linear-gradient(135deg, #5352ed, #3742fa); color: white; }
.tag-teal { background: linear-gradient(135deg, #20bf6b, #26de81); color: white; }
.tag-gradient { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
.timeline-content-card .timeline-tags span {
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.timeline-content-card {
width: 240px;
margin-left: -120px;
}
}
@media (max-width: 768px) {
.curved-timeline-container {
padding: 40px 0;
}
.timeline-nodes {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
height: auto;
padding: 20px 0;
}
.timeline-node {
position: static;
width: 100%;
max-width: 300px;
}
.timeline-content-card {
width: 100%;
margin: 0;
}
.curved-timeline-path {
display: none;
}
}
/* ========================================
横向发展历程样式 - 曲线时间轴设计（保留原版本）
======================================== */
.timeline-horizontal {
position: relative;
padding: var(--spacing-xl) 0 var(--spacing-2xl) 0; /* 增加底部空间防止遮挡霓虹灯 */
overflow: visible;
}
/* 曲线时间轴 */
.timeline-track {
position: absolute;
top: 35%;
left: 5%;
right: 5%;
height: 6px;
background: linear-gradient(90deg,
var(--primary-color) 0%,
var(--secondary-blue) 16.66%,
var(--success-color) 33.33%,
var(--warning-color) 50%,
var(--danger-color) 66.66%,
var(--info-color) 83.33%,
var(--primary-color) 100%);
border-radius: 50px;
z-index: 1;
box-shadow:
0 4px 20px rgba(46, 123, 255, 0.4),
0 0 40px rgba(46, 123, 255, 0.2);
animation: timeline-glow 3s ease-in-out infinite alternate;
}
/* 曲线轨道装饰点 */
.timeline-track::before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: radial-gradient(circle, #2e7bff 0%, #74b9ff 100%);
border-radius: 50%;
box-shadow: 0 0 20px rgba(46, 123, 255, 0.8);
}
.timeline-track::after {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: radial-gradient(circle, #2e7bff 0%, #74b9ff 100%);
border-radius: 50%;
box-shadow: 0 0 20px rgba(46, 123, 255, 0.8);
}
.timeline-items-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 固定为4列确保对齐 */
gap: var(--spacing-md); /* 减少间距 */
position: relative;
z-index: 2;
margin-bottom: var(--spacing-xl); /* 为霓虹灯效果预留空间 */
}
/* 优化后的时间卡片 - 更紧凑且多彩 */
.timeline-card {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(240, 248, 255, 0.9) 25%,
rgba(230, 241, 255, 0.85) 50%,
rgba(240, 248, 255, 0.9) 75%,
rgba(255, 255, 255, 0.95) 100%);
backdrop-filter: blur(15px);
border-radius: var(--border-radius-lg); /* 减少圆角 */
padding: var(--spacing-4); /* 减少内边距 */
box-shadow:
0 8px 32px rgba(46, 123, 255, 0.15),
0 0 20px rgba(46, 123, 255, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.8);
border: 1px solid rgba(46, 123, 255, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
max-height: 280px; /* 限制最大高度 */
}
/* 卡片渐变背景变体 */
.timeline-card:nth-child(4n+1) {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(116, 140, 171, 0.05) 100%);
border-color: rgba(102, 126, 234, 0.3);
}
.timeline-card:nth-child(4n+2) {
background: linear-gradient(135deg,
rgba(240, 147, 251, 0.1) 0%,
rgba(245, 87, 108, 0.05) 100%);
border-color: rgba(240, 147, 251, 0.3);
}
.timeline-card:nth-child(4n+3) {
background: linear-gradient(135deg,
rgba(79, 172, 254, 0.1) 0%,
rgba(0, 242, 254, 0.05) 100%);
border-color: rgba(79, 172, 254, 0.3);
}
.timeline-card:nth-child(4n+4) {
background: linear-gradient(135deg,
rgba(67, 233, 123, 0.1) 0%,
rgba(56, 249, 215, 0.05) 100%);
border-color: rgba(67, 233, 123, 0.3);
}
.timeline-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: var(--transition-base);
transform-origin: left;
border-radius: 2px;
}
.timeline-card:hover {
transform: translateY(-12px) scale(1.03);
box-shadow:
0 20px 60px rgba(46, 123, 255, 0.25),
0 0 40px rgba(46, 123, 255, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.9);
border-color: rgba(46, 123, 255, 0.4);
}
.timeline-card:hover::before {
transform: scaleX(1);
}
.timeline-icon {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin: 0 auto var(--spacing-4);
border-radius: var(--border-radius-full);
position: relative;
}
.timeline-icon .icon-bg {
width: 100%;
height: 100%;
border-radius: var(--border-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-xl);
box-shadow: var(--shadow-lg);
transition: var(--transition-base);
}
.timeline-card:hover .timeline-icon .icon-bg {
transform: scale(1.1);
box-shadow: var(--shadow-colored-lg);
}
.bg-gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bg-gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.bg-gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.bg-gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.bg-gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.bg-gradient-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.timeline-date {
text-align: center;
margin-bottom: var(--spacing-4);
}
.timeline-date .year {
display: block;
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--primary-color);
line-height: 1;
}
.timeline-date .month {
display: block;
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-top: var(--spacing-1);
}
.timeline-content h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--spacing-2);
text-align: center;
}
.timeline-content p {
color: var(--text-secondary);
line-height: 1.6;
text-align: center;
margin-bottom: var(--spacing-4);
}
.timeline-tags {
display: flex;
justify-content: center;
gap: var(--spacing-2);
flex-wrap: wrap;
}
.timeline-tag {
background: var(--primary-gradient);
color: white;
padding: var(--spacing-1) var(--spacing-3);
border-radius: var(--border-radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.025em;
box-shadow: var(--shadow-sm);
}
/* ========================================
横向荣誉墙样式
======================================== */
.honors-grid-horizontal {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
max-width: 1200px; /* 与统计卡片对齐 */
margin-left: auto;
margin-right: auto;
}
.honor-card-modern {
background: var(--bg-primary);
border-radius: var(--border-radius-xl);
overflow: hidden;
position: relative;
transition: var(--transition-base);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
}
.honor-card-modern:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: var(--shadow-2xl);
border-color: var(--primary-color);
}
.honor-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.03;
z-index: 1;
}
.honor-pattern {
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 25% 25%, var(--primary-color) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, var(--secondary-blue) 1px, transparent 1px);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
}
.honor-content {
position: relative;
z-index: 2;
padding: var(--spacing-6);
display: flex;
align-items: flex-start;
gap: var(--spacing-4);
}
.honor-icon {
flex-shrink: 0;
}
.icon-container {
width: 80px;
height: 80px;
border-radius: var(--border-radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-2xl);
color: white;
box-shadow: var(--shadow-lg);
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.icon-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0.1) 100%);
transform: translateX(-100%) translateY(-100%) rotate(45deg);
transition: var(--transition-slow);
}
.honor-card-modern:hover .icon-container::before {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
.trophy-gold { background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); }
.medal-silver { background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%); }
.star-bronze { background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%); }
.award-blue { background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%); }
.gem-purple { background: linear-gradient(135deg, #9c27b0 0%, #e1bee7 100%); }
.crown-rainbow { background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%); }
.honor-info {
flex: 1;
}
.honor-info h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--spacing-2);
line-height: 1.3;
}
.honor-year {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--primary-color);
margin-bottom: var(--spacing-2);
}
.honor-desc {
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: var(--spacing-3);
font-size: var(--font-size-sm);
}
.honor-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
background: var(--primary-gradient);
color: white;
padding: var(--spacing-1) var(--spacing-3);
border-radius: var(--border-radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.025em;
}
.honors-stats {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
border-radius: var(--border-radius-xl);
padding: var(--spacing-xl);
margin-top: var(--spacing-xl);
}
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-lg);
}
.stat-item-honor {
display: flex;
align-items: center;
gap: var(--spacing-4);
background: var(--bg-primary);
padding: var(--spacing-6);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition-base);
border: 1px solid var(--border-color);
}
.stat-item-honor:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.stat-item-honor .stat-icon {
width: 50px;
height: 50px;
background: rgba(46, 123, 255, 0.2);
border-radius: var(--border-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-lg);
box-shadow: var(--shadow-sm);
}
.stat-item-honor .stat-content {
flex: 1;
}
.stat-item-honor .stat-number {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--primary-color);
line-height: 1;
margin-bottom: var(--spacing-1);
}
.stat-item-honor .stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: var(--font-weight-medium);
}
/* ========================================
成员展示页面横向布局样式
======================================== */
.members-intro-section {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
border-radius: var(--border-radius-xl);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
text-align: center;
}
.intro-content h2 {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--spacing-4);
}
.intro-content p {
font-size: var(--font-size-lg);
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto var(--spacing-xl);
line-height: 1.6;
}
.team-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--spacing-lg);
max-width: 600px;
margin: 0 auto;
}
.stat-box {
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 25%, #e6f1ff 50%, #f0f8ff 75%, #ffffff 100%);
border-radius: var(--border-radius-lg);
padding: var(--spacing-6);
box-shadow:
var(--shadow-md),
0 0 20px rgba(46, 123, 255, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.8);
transition: var(--transition-base);
border: 1px solid rgba(46, 123, 255, 0.2);
position: relative;
overflow: hidden;
}
.stat-box::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
#2e7bff, #4f9cf9, #74b9ff, #a4c7ff,
#2e7bff, #4f9cf9, #74b9ff, #a4c7ff);
background-size: 400% 400%;
border-radius: var(--border-radius-lg);
z-index: -1;
opacity: 0;
animation: gradient-shift 3s ease infinite;
transition: opacity 0.3s ease;
}
.stat-box:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
var(--shadow-xl),
0 0 40px rgba(46, 123, 255, 0.6),
0 0 60px rgba(46, 123, 255, 0.4),
inset 0 1px 1px rgba(255, 255, 255, 0.9);
border-color: rgba(46, 123, 255, 0.4);
}
.stat-box:hover::before {
opacity: 1;
}
.stat-number {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--primary-color);
line-height: 1;
margin-bottom: var(--spacing-1);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: var(--font-weight-medium);
}
.department-filter-modern {
background: var(--bg-primary);
border-radius: var(--border-radius-xl);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
}
.filter-header {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.filter-header h3 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--spacing-2);
}
.filter-header p {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.filter-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-4);
}
.filter-btn-modern {
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 25%, #e6f1ff 50%, #f0f8ff 75%, #ffffff 100%);
border: 2px solid rgba(46, 123, 255, 0.2);
border-radius: var(--border-radius-lg);
padding: var(--spacing-4) var(--spacing-6);
cursor: pointer;
transition: var(--transition-base);
position: relative;
overflow: hidden;
text-align: center;
min-height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
box-shadow:
0 4px 16px rgba(46, 123, 255, 0.15),
0 0 20px rgba(46, 123, 255, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.filter-btn-modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2e7bff 0%, #4f9cf9 25%, #74b9ff 50%, #a4c7ff 75%, #2e7bff 100%);
transition: var(--transition-base);
z-index: 1;
}
.filter-btn-modern::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
#2e7bff, #4f9cf9, #74b9ff, #a4c7ff,
#2e7bff, #4f9cf9, #74b9ff, #a4c7ff);
background-size: 400% 400%;
border-radius: var(--border-radius-lg);
z-index: -1;
opacity: 0;
animation: gradient-shift 3s ease infinite;
transition: opacity 0.3s ease;
}
.filter-btn-modern:hover::before,
.filter-btn-modern.active::before {
left: 0;
}
.filter-btn-modern:hover::after,
.filter-btn-modern.active::after {
opacity: 1;
}
.filter-btn-modern:hover,
.filter-btn-modern.active {
border-color: rgba(46, 123, 255, 0.4);
transform: translateY(-4px) scale(1.02);
box-shadow:
0 8px 32px rgba(46, 123, 255, 0.3),
0 0 40px rgba(46, 123, 255, 0.5),
0 0 60px rgba(46, 123, 255, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
.filter-btn-modern > * {
position: relative;
z-index: 2;
transition: var(--transition-fast);
}
.filter-btn-modern i {
font-size: var(--font-size-xl);
color: var(--primary-color);
}
.filter-btn-modern span {
font-weight: var(--font-weight-medium);
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.filter-btn-modern .member-count {
background: var(--primary-color);
color: white;
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--border-radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
min-width: 30px;
}
.filter-btn-modern:hover,
.filter-btn-modern.active {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.filter-btn-modern:hover i,
.filter-btn-modern.active i,
.filter-btn-modern:hover span,
.filter-btn-modern.active span {
color: white;
}
.filter-btn-modern:hover .member-count,
.filter-btn-modern.active .member-count {
background: rgba(255, 255, 255, 0.2);
color: white;
}
/* 修复部门筛选按钮图标可见性 */
.filter-btn-modern[data-department="service"] i {
color: #1abc9c !important;
filter: drop-shadow(0 2px 4px rgba(26, 188, 156, 0.3)) !important;
text-shadow: 0 1px 2px rgba(26, 188, 156, 0.5) !important;
}
.filter-btn-modern[data-department="service"]:hover i,
.filter-btn-modern[data-department="service"].active i {
color: white !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
/* 为所有部门按钮增强图标可见性 */
.filter-btn-modern[data-department="leadership"] i {
color: #f39c12 !important;
filter: drop-shadow(0 2px 4px rgba(243, 156, 18, 0.3)) !important;
}
.filter-btn-modern[data-department="tech"] i {
color: #667eea !important;
filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3)) !important;
}
.filter-btn-modern[data-department="promotion"] i {
color: #e74c3c !important;
filter: drop-shadow(0 2px 4px rgba(231, 76, 60, 0.3)) !important;
}
.members-grid-horizontal {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.member-category {
background: var(--bg-primary);
border-radius: var(--border-radius-xl);
padding: var(--spacing-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
transition: var(--transition-base);
}
.member-category:hover {
box-shadow: var(--shadow-2xl);
border-color: var(--primary-light);
}
/* 部门高亮效果 */
.member-category.highlight-department {
animation: departmentHighlight 2s ease-in-out;
border-color: var(--primary-color);
box-shadow: 0 0 20px rgba(46, 123, 255, 0.3), var(--shadow-2xl);
}
@keyframes departmentHighlight {
0% {
transform: scale(1);
box-shadow: var(--shadow-lg);
}
50% {
transform: scale(1.02);
box-shadow: 0 0 30px rgba(46, 123, 255, 0.4), var(--shadow-2xl);
}
100% {
transform: scale(1);
box-shadow: 0 0 20px rgba(46, 123, 255, 0.3), var(--shadow-2xl);
}
}
.category-header {
display: flex;
align-items: center;
gap: var(--spacing-4);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-lg);
border-bottom: 2px solid var(--border-color);
}
.category-icon {
width: 60px;
height: 60px;
background: rgba(46, 123, 255, 0.2);
border-radius: var(--border-radius-xl);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-4);
box-shadow: var(--shadow-md);
}
.category-header h3 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin: 0;
}
.category-header p {
color: var(--text-secondary);
margin: 0;
font-size: var(--font-size-sm);
}
.members-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--spacing-lg);
}
.member-card-modern {
background: var(--bg-secondary);
border-radius: var(--border-radius-xl);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
position: relative;
}
/* 为不同部门添加特色背景和装饰 */
.member-category[data-category="leadership"] .member-card-modern {
background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 25%, #ffeaa7 75%, #fdcb6e 100%);
border: 1px solid rgba(253, 203, 110, 0.3);
}
.member-category[data-category="leadership"] .member-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.1) 2px, transparent 2px),
radial-gradient(circle at 80% 80%, rgba(255, 193, 7, 0.08) 1px, transparent 1px);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
pointer-events: none;
z-index: 1;
}
.member-category[data-category="tech"] .member-card-modern {
background: linear-gradient(135deg, #e8f2ff 0%, #d1e7ff 25%, #a4c7ff 75%, #667eea 100%);
border: 1px solid rgba(102, 126, 234, 0.3);
}
.member-category[data-category="tech"] .member-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(102, 126, 234, 0.1) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(118, 75, 162, 0.08) 1px, transparent 1px);
background-size: 35px 35px;
background-position: 0 0, 17px 17px;
pointer-events: none;
z-index: 1;
}
.member-category[data-category="content"] .member-card-modern {
background: linear-gradient(135deg, #fef0ff 0%, #fce7ff 25%, #f5d0fe 75%, #f093fb 100%);
border: 1px solid rgba(240, 147, 251, 0.3);
}
.member-category[data-category="content"] .member-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 30% 30%, rgba(240, 147, 251, 0.1) 2px, transparent 2px),
radial-gradient(circle at 70% 70%, rgba(245, 87, 108, 0.08) 1px, transparent 1px);
background-size: 45px 45px;
background-position: 0 0, 22px 22px;
pointer-events: none;
z-index: 1;
}
.member-category[data-category="promotion"] .member-card-modern {
background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 25%, #ffb3ba 75%, #ff6b7a 100%);
border: 1px solid rgba(255, 107, 122, 0.3);
}
.member-category[data-category="promotion"] .member-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 15% 15%, rgba(255, 107, 122, 0.1) 2px, transparent 2px),
radial-gradient(circle at 85% 85%, rgba(255, 179, 186, 0.08) 1px, transparent 1px);
background-size: 38px 38px;
background-position: 0 0, 19px 19px;
pointer-events: none;
z-index: 1;
}
.member-category[data-category="service"] .member-card-modern {
background: linear-gradient(135deg, #e8fff8 0%, #d1f2eb 25%, #a3e4d7 75%, #1abc9c 100%);
border: 1px solid rgba(26, 188, 156, 0.3);
}
.member-category[data-category="service"] .member-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 35% 35%, rgba(26, 188, 156, 0.1) 2px, transparent 2px),
radial-gradient(circle at 65% 65%, rgba(22, 160, 133, 0.08) 1px, transparent 1px);
background-size: 42px 42px;
background-position: 0 0, 21px 21px;
pointer-events: none;
z-index: 1;
}
.member-card-modern:hover {
transform: translateY(-12px) scale(1.03);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
border-color: var(--primary-color);
}
/* 部门特色悬浮效果 */
.member-category[data-category="leadership"] .member-card-modern:hover {
box-shadow: 0 20px 60px rgba(253, 203, 110, 0.3), 0 8px 20px rgba(255, 215, 0, 0.2);
border-color: #fdcb6e;
}
.member-category[data-category="tech"] .member-card-modern:hover {
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3), 0 8px 20px rgba(118, 75, 162, 0.2);
border-color: #667eea;
}
.member-category[data-category="content"] .member-card-modern:hover {
box-shadow: 0 20px 60px rgba(240, 147, 251, 0.3), 0 8px 20px rgba(245, 87, 108, 0.2);
border-color: #f093fb;
}
.member-category[data-category="promotion"] .member-card-modern:hover {
box-shadow: 0 20px 60px rgba(255, 107, 122, 0.3), 0 8px 20px rgba(255, 179, 186, 0.2);
border-color: #ff6b7a;
}
.member-category[data-category="service"] .member-card-modern:hover {
box-shadow: 0 20px 60px rgba(26, 188, 156, 0.3), 0 8px 20px rgba(22, 160, 133, 0.2);
border-color: #1abc9c;
}
/* 悬浮时的背景动画效果 */
.member-card-modern:hover::before {
animation: backgroundPulse 2s ease-in-out infinite;
}
@keyframes backgroundPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.member-avatar {
position: relative;
height: 280px;
overflow: hidden;
}
.member-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.member-card-modern:hover .member-avatar img {
transform: scale(1.1);
}
/* Circular avatar style for member cards - keeps hover/overlay behaviors */
.member-card-modern .member-avatar {
/* Center the avatar and make it responsive */
width: clamp(120px, 60%, 220px);
height: auto; /* override fixed height */
aspect-ratio: 1 / 1; /* perfect square -> perfect circle with radius below */
margin: var(--spacing-6) auto 0; /* top spacing and horizontal centering */
border-radius: 50%;
overflow: hidden; /* ensure circular clipping */
}
.member-card-modern .member-avatar img {
width: 100%;
height: 100%;
object-fit: cover; /* keep image covering circle */
}
/* Leadership-only circular avatar; reset others to rectangular */
.member-category[data-category="leadership"] .member-card-modern .member-avatar {
width: clamp(120px, 60%, 220px);
height: auto;
aspect-ratio: 1 / 1;
margin: var(--spacing-6) auto 0;
border-radius: 50%;
overflow: hidden;
}
.member-category[data-category="leadership"] .member-card-modern .member-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Reset non-leadership member avatars to original rectangular style */
.member-category:not([data-category="leadership"]) .member-card-modern .member-avatar {
width: 100%;
height: 280px;
aspect-ratio: auto;
margin: 0;
border-radius: 0;
}
.avatar-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-overlay);
opacity: 0;
transition: var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.member-card-modern:hover .avatar-overlay {
opacity: 1;
}
.avatar-overlay .social-links {
display: flex;
gap: var(--spacing-3);
}
.avatar-overlay .social-links a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-lg);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.avatar-overlay .social-links a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--primary-color);
border-radius: 50%;
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1;
}
.avatar-overlay .social-links a:hover {
color: white;
transform: scale(1.15) rotate(5deg);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
border-color: var(--primary-color);
}
.avatar-overlay .social-links a:hover::before {
transform: scale(1);
}
.position-badge {
position: absolute;
bottom: var(--spacing-3);
right: var(--spacing-3);
background: var(--primary-gradient);
color: white;
padding: var(--spacing-2) var(--spacing-3);
border-radius: var(--border-radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
display: flex;
align-items: center;
gap: var(--spacing-1);
box-shadow: var(--shadow-md);
z-index: 10;
}
/* 针对领导层圆形头像的职位标签特殊定位 */
.member-category[data-category="leadership"] .position-badge {
/* 将标签定位到圆形头像的底部中央 */
bottom: 8px;
left: 50%;
right: auto;
transform: translateX(-50%);
/* 确保标签在圆形区域内 */
max-width: calc(100% - 32px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 移动端优化 */
@media (max-width: 768px) {
.member-category[data-category="leadership"] .position-badge {
bottom: 6px;
font-size: 10px;
padding: 4px 8px;
max-width: calc(100% - 24px);
}
.member-card-modern {
margin-bottom: var(--spacing-4);
}
.member-info {
padding: var(--spacing-3);
}
.member-name {
font-size: var(--font-size-lg);
}
.member-stats {
flex-direction: column;
gap: var(--spacing-2);
}
.member-stats .stat {
flex-direction: row;
justify-content: center;
min-width: auto;
}
.member-skills {
justify-content: center;
}
.skill-tag {
font-size: 11px;
padding: 1px var(--spacing-1);
}
/* 移动端照片区域优化 */
.member-avatar {
height: 240px;
}
.member-category:not([data-category="leadership"]) .member-card-modern .member-avatar {
height: 240px;
}
}
.position-badge.leadership {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
color: var(--text-primary);
}
.position-badge.tech {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.position-badge.content {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
/* 修复副站长和联络部图标可见性 */
.position-badge.service {
background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
color: white;
}
/* 确保所有位置徽章内的图标具有良好对比度 */
.position-badge.leadership i {
color: #2c3e50 !important; /* 深色图标在金色背景上 */
filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.5)) !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}
.position-badge.tech i {
color: white !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.position-badge.content i {
color: white !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.position-badge.service i {
color: white !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.member-info {
padding: var(--spacing-4);
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
}
/* 为每个部门添加装饰性图标 */
.member-category[data-category="leadership"] .member-info::after {
content: '\f521'; /* crown icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
color: rgba(253, 203, 110, 0.2);
z-index: 0;
}
.member-category[data-category="tech"] .member-info::after {
content: '\f121'; /* code icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
color: rgba(102, 126, 234, 0.2);
z-index: 0;
}
.member-category[data-category="content"] .member-info::after {
content: '\f303'; /* edit icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
color: rgba(240, 147, 251, 0.2);
z-index: 0;
}
.member-category[data-category="promotion"] .member-info::after {
content: '\f53f'; /* palette icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
color: rgba(255, 107, 122, 0.2);
z-index: 0;
}
.member-category[data-category="service"] .member-info::after {
content: '\f2b5'; /* handshake icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
color: rgba(26, 188, 156, 0.2);
z-index: 0;
}
/* 为每个部门添加装饰性图标 */
.member-category[data-category="leadership"] .member-info::before {
content: '\f521'; /* crown icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: -15px;
right: 20px;
font-size: 24px;
color: rgba(253, 203, 110, 0.3);
z-index: -1;
}
.member-category[data-category="tech"] .member-info::before {
content: '\f121'; /* code icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: -15px;
right: 20px;
font-size: 24px;
color: rgba(102, 126, 234, 0.3);
z-index: -1;
}
.member-category[data-category="content"] .member-info::before {
content: '\f303'; /* edit icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: -15px;
right: 20px;
font-size: 24px;
color: rgba(240, 147, 251, 0.3);
z-index: -1;
}
.member-category[data-category="promotion"] .member-info::before {
content: '\f53f'; /* palette icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: -15px;
right: 20px;
font-size: 24px;
color: rgba(255, 107, 122, 0.3);
z-index: -1;
}
.member-category[data-category="service"] .member-info::before {
content: '\f2b5'; /* handshake icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: -15px;
right: 20px;
font-size: 24px;
color: rgba(26, 188, 156, 0.3);
z-index: -1;
}
.member-name {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--spacing-1);
text-align: center;
position: relative;
padding-bottom: var(--spacing-1);
}
.member-name::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: var(--primary-gradient);
border-radius: 1px;
}
.member-position {
color: var(--primary-color);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-2);
font-size: var(--font-size-base);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
}
.member-description {
color: var(--text-secondary);
line-height: 1.4;
margin-bottom: var(--spacing-3);
font-size: var(--font-size-sm);
text-align: justify;
padding: 0 var(--spacing-1);
}
.member-skills {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-1);
margin-bottom: var(--spacing-3);
justify-content: center;
padding: var(--spacing-2) 0;
position: relative;
}
.member-skills::before {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}
.member-skills::after {
content: '';
position: absolute;
bottom: 0;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}
.skill-tag {
background: var(--bg-tertiary);
color: var(--text-secondary);
padding: 2px var(--spacing-2);
border-radius: var(--border-radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border: 1px solid var(--border-color);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
position: relative;
overflow: hidden;
}
.skill-tag::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.skill-tag:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.skill-tag:hover::before {
left: 100%;
}
.skill-tag.leadership {
background: rgba(255, 215, 0, 0.1);
color: #b8860b;
border-color: rgba(255, 215, 0, 0.3);
}
.skill-tag.tech {
background: rgba(102, 126, 234, 0.1);
color: #4f46e5;
border-color: rgba(102, 126, 234, 0.3);
}
.skill-tag.content {
background: rgba(240, 147, 251, 0.1);
color: #c026d3;
border-color: rgba(240, 147, 251, 0.3);
}
.member-stats {
display: flex;
gap: var(--spacing-2);
justify-content: center;
padding: var(--spacing-2);
background: rgba(0, 0, 0, 0.02);
border-radius: var(--border-radius-lg);
margin: var(--spacing-2) 0 0 0;
}
.member-stats .stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: var(--font-size-xs);
color: var(--text-secondary);
padding: var(--spacing-1);
border-radius: var(--border-radius-md);
transition: all 0.3s ease;
min-width: 50px;
}
.member-stats .stat:hover {
background: rgba(var(--primary-color-rgb), 0.1);
transform: translateY(-2px);
}
.member-stats .stat i {
color: var(--primary-color);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-1);
}
.member-stats .stat span {
font-weight: var(--font-weight-medium);
text-align: center;
line-height: 1.2;
}
.join-us-section-modern {
background: linear-gradient(135deg, #ffffff 0%, #e6f1ff 25%, #a4c7ff 75%, #2e7bff 100%);
border-radius: var(--border-radius-xl);
padding: var(--spacing-xl);
margin-top: var(--spacing-xl);
position: relative;
overflow: hidden;
color: var(--text-primary);
border: 1px solid rgba(46, 123, 255, 0.2);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 10px 40px rgba(46, 123, 255, 0.15);
}
/* 悬停时的整体效果 */
.join-us-section-modern:hover {
transform: translateY(-2px);
box-shadow: 0 15px 50px rgba(46, 123, 255, 0.2);
border-color: rgba(46, 123, 255, 0.3);
}
.join-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.1;
z-index: 1;
}
.join-pattern {
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 25% 25%, white 2px, transparent 2px),
radial-gradient(circle at 75% 75%, white 1px, transparent 1px);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
.join-content {
position: relative;
z-index: 2;
}
.join-header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.join-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-blue));
border-radius: var(--border-radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-2xl);
color: white !important; /* 确保图标颜色为白色 */
margin: 0 auto var(--spacing-4);
backdrop-filter: blur(10px);
border: 2px solid var(--primary-color);
box-shadow: 0 8px 32px rgba(46, 123, 255, 0.3);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 确保握手图标为白色 */
.join-icon i {
color: white !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* 增强悬停效果 */
.join-icon:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 40px rgba(46, 123, 255, 0.4);
}
.join-header h2 {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-4);
}
.join-header p {
font-size: var(--font-size-lg);
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.join-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.benefit-card {
background: rgba(255, 255, 255, 0.8);
border-radius: var(--border-radius-lg);
padding: var(--spacing-6);
backdrop-filter: blur(10px);
border: 1px solid rgba(46, 123, 255, 0.2);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 4px 20px rgba(46, 123, 255, 0.1);
position: relative;
overflow: hidden;
}
/* 添加卡片光效 */
.benefit-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: rotate(45deg);
transition: all 0.6s ease;
opacity: 0;
}
.benefit-card:hover::before {
opacity: 1;
animation: shimmer 1.5s ease-in-out;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.benefit-card:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-6px) scale(1.02);
border-color: var(--primary-color);
box-shadow: 0 12px 40px rgba(46, 123, 255, 0.25);
}
/* 增强福利图标动画 */
.benefit-card:hover .benefit-icon {
transform: translateY(-2px) rotate(5deg);
box-shadow: 0 6px 20px rgba(46, 123, 255, 0.4);
}
.benefit-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-blue));
border-radius: var(--border-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xl);
color: white;
margin-bottom: var(--spacing-4);
border: 1px solid var(--primary-color);
box-shadow: 0 4px 16px rgba(46, 123, 255, 0.3);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
/* 福利图标脉冲效果 */
.benefit-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
}
.benefit-card:hover .benefit-icon::after {
width: 100%;
height: 100%;
}
/* 加入我们福利图标白色主题 */
.benefit-icon i {
color: white !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.benefit-content h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-3);
}
.benefit-content p {
opacity: 0.9;
line-height: 1.5;
margin-bottom: var(--spacing-3);
font-size: var(--font-size-sm);
}
.benefit-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.benefit-content ul li {
position: relative;
padding-left: var(--spacing-5);
margin-bottom: var(--spacing-2);
font-size: var(--font-size-sm);
opacity: 0.8;
}
.benefit-content ul li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: white;
font-weight: bold;
background: var(--primary-color);
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.join-actions {
display: flex;
justify-content: center;
gap: var(--spacing-4);
flex-wrap: wrap;
}
.join-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-4) var(--spacing-6);
border-radius: var(--border-radius-lg);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: var(--transition-base);
min-width: 160px;
justify-content: center;
}
.join-btn.primary {
background: var(--success-color); /* 绿色，强调申请动作 */
color: var(--text-inverse);
box-shadow: var(--shadow-lg);
border: 2px solid transparent;
font-weight: var(--font-weight-semibold);
}
.join-btn.primary:hover {
filter: brightness(1.05);
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
/* 次按钮采用清晰可见的蓝色渐变，保证足够对比度 */
.join-btn.secondary {
background: var(--primary-gradient);
color: var(--text-inverse);
border: 2px solid transparent;
box-shadow: var(--shadow-md);
}
.join-btn.secondary:hover {
filter: brightness(1.05);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* 加入我们按钮移动端优化 */
@media (max-width: 768px) {
.join-actions {
flex-direction: column;
gap: var(--spacing-3);
}
.join-btn {
width: 100%;
min-width: auto;
padding: var(--spacing-4) var(--spacing-5);
font-size: var(--font-size-base);
}
.join-btn.secondary {
background: rgba(255, 255, 255, 0.25); /* 移动端增加背景透明度 */
border: 2px solid rgba(255, 255, 255, 0.6); /* 移动端增加边框透明度 */
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); /* 移动端增强文字阴影 */
}
.join-btn.secondary:hover,
.join-btn.secondary:active {
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.8);
}
.join-icon {
width: 60px;
height: 60px;
font-size: var(--font-size-xl);
}
}
/* ========================================
首页快速导航横向布局
======================================== */
.quick-links {
padding: var(--spacing-16) 0;
background: var(--bg-secondary);
}
.links-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-6);
margin-top: var(--spacing-8);
}
/* 快速导航横向布局 */
.link-card {
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 25%, #e6f1ff 50%, #f0f8ff 75%, #ffffff 100%);
backdrop-filter: blur(15px);
border: 1px solid rgba(46, 123, 255, 0.15);
border-radius: var(--border-radius-lg);
padding: var(--spacing-6);
text-align: center;
text-decoration: none;
color: var(--text-primary);
transition: var(--transition-base);
box-shadow: 0 8px 32px rgba(46, 123, 255, 0.12);
position: relative;
overflow: hidden;
}
.link-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s;
}
.link-card:hover::before {
left: 100%;
}
.link-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 64px rgba(46, 123, 255, 0.25);
border-color: rgba(46, 123, 255, 0.3);
color: var(--text-primary);
text-decoration: none;
background: linear-gradient(135deg, #ffffff 0%, #e6f1ff 25%, #dae8ff 50%, #e6f1ff 75%, #ffffff 100%);
}
.link-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-4);
display: flex;
align-items: center;
justify-content: center;
background: rgba(46, 123, 255, 0.2);
border-radius: var(--border-radius-full);
color: white;
font-size: 2rem;
box-shadow: 0 8px 24px rgba(46, 123, 255, 0.2);
transition: var(--transition-base);
}
.link-card:hover .link-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 36px rgba(46, 123, 255, 0.3);
}
/* 快速导航特定图标颜色 */
.link-card:nth-child(1) .link-icon {
background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3);
}
.link-card:nth-child(2) .link-icon {
background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
box-shadow: 0 8px 24px rgba(255, 152, 0, 0.3);
}
.link-card:nth-child(3) .link-icon {
background: linear-gradient(135deg, #E91E63 0%, #F06292 100%);
box-shadow: 0 8px 24px rgba(233, 30, 99, 0.3);
}
.link-card:nth-child(4) .link-icon {
background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
box-shadow: 0 8px 24px rgba(156, 39, 176, 0.3);
}
.link-card:nth-child(1):hover .link-icon {
box-shadow: 0 12px 36px rgba(76, 175, 80, 0.4);
}
.link-card:nth-child(2):hover .link-icon {
box-shadow: 0 12px 36px rgba(255, 152, 0, 0.4);
}
.link-card:nth-child(3):hover .link-icon {
box-shadow: 0 12px 36px rgba(233, 30, 99, 0.4);
}
.link-card:nth-child(4):hover .link-icon {
box-shadow: 0 12px 36px rgba(156, 39, 176, 0.4);
}
.link-card h3 {
font-size: 1.25rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-2);
color: var(--text-primary);
}
.link-card p {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.links-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-4);
}
}
@media (max-width: 640px) {
.links-grid {
grid-template-columns: 1fr;
gap: var(--spacing-4);
}
.link-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
/* ========================================
关于我们页面专用样式
======================================== */
/* 英雄区域样式 */
.about-intro-section {
padding: var(--spacing-20) 0;
background: linear-gradient(135deg, rgba(46, 123, 255, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
position: relative;
overflow: hidden;
}
.about-intro-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 40%;
height: 200%;
background: radial-gradient(circle, rgba(46, 123, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.about-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-16);
align-items: center;
position: relative;
z-index: 2;
}
.about-hero-content {
padding-right: var(--spacing-8);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
background: rgba(46, 123, 255, 0.1);
border: 1px solid rgba(46, 123, 255, 0.2);
border-radius: var(--border-radius-full);
color: var(--primary-color);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-bottom: var(--spacing-6);
}
.about-title {
font-size: 3.5rem;
font-weight: var(--font-weight-bold);
line-height: 1.1;
margin-bottom: var(--spacing-4);
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-tagline {
font-size: 1.5rem;
color: var(--text-secondary);
font-weight: var(--font-weight-medium);
margin-bottom: var(--spacing-6);
letter-spacing: 2px;
}
.about-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: var(--spacing-8);
}
.hero-stats {
display: flex;
gap: var(--spacing-8);
margin-bottom: var(--spacing-10);
}
.stat-item {
text-align: center;
}
.stat-item .stat-number {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: var(--spacing-1);
}
.stat-item .stat-label {
font-size: var(--font-size-sm);
color: var(--text-muted);
font-weight: var(--font-weight-medium);
}
.hero-actions {
display: flex;
gap: var(--spacing-4);
}
/* 英雄图片区域 */
.about-hero-image {
position: relative;
}
.image-container {
position: relative;
border-radius: var(--border-radius-xl);
overflow: hidden;
box-shadow: 0 20px 60px rgba(46, 123, 255, 0.2);
}
.image-container img {
width: 100%;
height: auto;
transition: var(--transition-base);
}
/* 关于我们 - 右侧头图容器的边框与阴影优化（仅作用于该页面的头图） */
.about-hero-image .image-container {
/* 使用品牌色的柔和描边，避免喧宾夺主 */
border: 1.5px solid rgba(46, 123, 255, 0.18);
/* 渐变描边 + 纯白填充，确保在深浅背景下对比良好 */
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, rgba(46, 123, 255, 0.35), rgba(79, 156, 249, 0.35)) border-box;
border-radius: var(--border-radius-xl);
/* 分层阴影，贴合全站蓝白风格 */
box-shadow:
0 20px 60px rgba(46, 123, 255, 0.22),
0 8px 24px rgba(15, 23, 42, 0.08);
transition: var(--transition-base);
}
.about-hero-image .image-container img {
display: block;
border-radius: inherit; /* 让图片与容器圆角一致，避免溢出锯齿 */
}
.about-hero-image .image-container:hover {
transform: translateY(-2px);
box-shadow:
0 28px 70px rgba(46, 123, 255, 0.25),
0 12px 32px rgba(15, 23, 42, 0.12);
}
@media (max-width: 768px) {
.about-hero-image .image-container {
border-width: 1px;
box-shadow:
0 16px 40px rgba(46, 123, 255, 0.20),
0 6px 20px rgba(15, 23, 42, 0.08);
}
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
padding: var(--spacing-6);
color: white;
opacity: 0;
transition: var(--transition-base);
}
.image-container:hover .image-overlay {
opacity: 1;
}
.overlay-content {
display: flex;
align-items: center;
gap: var(--spacing-3);
font-size: 1.125rem;
font-weight: var(--font-weight-medium);
}
/* 浮动卡片 */
.floating-cards {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.floating-card {
position: absolute;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(46, 123, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--spacing-4);
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
box-shadow: 0 8px 32px rgba(46, 123, 255, 0.15);
animation: float 3s ease-in-out infinite;
}
.floating-card i {
color: var(--primary-color);
}
.card-1 {
top: 20%;
right: -10%;
animation-delay: 0s;
}
.card-2 {
bottom: 30%;
left: -15%;
animation-delay: 1s;
}
.card-3 {
top: 60%;
right: -5%;
animation-delay: 2s;
}
/* 核心价值观区域 */
.values-section {
padding: var(--spacing-20) 0;
background: var(--bg-secondary);
position: relative;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-16);
}
.section-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
background: rgba(46, 123, 255, 0.1);
border: 1px solid rgba(46, 123, 255, 0.2);
border-radius: var(--border-radius-full);
color: var(--primary-color);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--spacing-4);
}
.section-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-8);
}
.value-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(46, 123, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: var(--spacing-8);
text-align: center;
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: var(--transition-base);
}
.value-card:hover::before {
transform: scaleX(1);
}
.value-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(46, 123, 255, 0.2);
border-color: rgba(46, 123, 255, 0.3);
}
.value-icon {
margin-bottom: var(--spacing-6);
}
.icon-bg {
width: 80px;
height: 80px;
margin: 0 auto;
border-radius: var(--border-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.bg-gradient-1 { background: linear-gradient(135deg, #e84393, #fd79a8); }
.bg-gradient-2 { background: linear-gradient(135deg, #fdcb6e, #f39c12); }
.bg-gradient-3 { background: linear-gradient(135deg, #6c5ce7, #a29bfe); }
.bg-gradient-4 { background: linear-gradient(135deg, #fd79a8, #fdcb6e); }
.value-card h3 {
font-size: 1.5rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-4);
color: var(--text-primary);
}
.value-card p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--spacing-6);
}
.value-features {
display: flex;
justify-content: center;
gap: var(--spacing-2);
flex-wrap: wrap;
}
.feature-tag {
padding: var(--spacing-1) var(--spacing-3);
background: rgba(46, 123, 255, 0.1);
border: 1px solid rgba(46, 123, 255, 0.2);
border-radius: var(--border-radius-full);
font-size: var(--font-size-xs);
color: var(--primary-color);
font-weight: var(--font-weight-medium);
}
/* 团队架构区域 */
.team-structure-section {
padding: var(--spacing-20) 0;
background: linear-gradient(135deg, rgba(46, 123, 255, 0.02) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.org-structure {
max-width: 1000px;
margin: 0 auto;
}
.org-tier {
display: flex;
justify-content: center;
gap: var(--spacing-6);
margin-bottom: var(--spacing-10);
position: relative;
}
.org-tier::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: linear-gradient(to bottom, var(--primary-color), transparent);
}
.org-tier:last-child::after {
display: none;
}
.org-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(46, 123, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: var(--spacing-6);
text-align: center;
transition: var(--transition-base);
position: relative;
min-width: 200px;
box-shadow: 0 8px 32px rgba(46, 123, 255, 0.1);
}
.leadership-card {
position: relative;
overflow: hidden;
}
.card-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(46, 123, 255, 0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
.org-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(46, 123, 255, 0.2);
border-color: rgba(46, 123, 255, 0.3);
}
.org-avatar {
margin: 0 auto var(--spacing-4);
}
.avatar-bg {
width: 80px;
height: 80px;
border-radius: var(--border-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.bg-leadership { background: linear-gradient(135deg, #f39c12, #e67e22); }
.bg-management { background: linear-gradient(135deg, #e67e22, #d35400); }
.bg-tech { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.bg-content { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.bg-dev { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.bg-promo { background: linear-gradient(135deg, #f1c40f, #f39c12); }
.bg-service { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.org-card h3 {
font-size: 1.25rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-2);
color: var(--text-primary);
}
.org-role {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-4);
}
.org-responsibilities {
display: flex;
justify-content: center;
gap: var(--spacing-1);
flex-wrap: wrap;
}
.responsibility-tag {
padding: var(--spacing-1) var(--spacing-2);
background: rgba(46, 123, 255, 0.1);
border-radius: var(--border-radius);
font-size: var(--font-size-xs);
color: var(--primary-color);
}
.team-count {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-1);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
/* 团队亮点 */
.team-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-6);
margin-top: var(--spacing-16);
}
.highlight-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-4);
padding: var(--spacing-6);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(46, 123, 255, 0.1);
border-radius: var(--border-radius-lg);
transition: var(--transition-base);
}
.highlight-item:hover {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(46, 123, 255, 0.2);
transform: translateY(-2px);
}
.highlight-icon {
width: 50px;
height: 50px;
background: var(--primary-gradient);
border-radius: var(--border-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
flex-shrink: 0;
}
/* 团队亮点图标白色主题 */
.highlight-icon i {
color: white !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.highlight-content h4 {
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-2);
color: var(--text-primary);
}
.highlight-content p {
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
/* 动画效果 */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes timeline-glow {
0% {
box-shadow:
0 4px 20px rgba(46, 123, 255, 0.4),
0 0 40px rgba(46, 123, 255, 0.2);
}
100% {
box-shadow:
0 6px 30px rgba(46, 123, 255, 0.6),
0 0 60px rgba(46, 123, 255, 0.4);
}
}
/* ========================================
活动日历现代化样式
======================================== */
/* 侧边栏容器 */
.sidebar {
display: flex;
flex-direction: column;
gap: 32px;
}
/* 日历小部件容器 */
.calendar-widget {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(46, 123, 255, 0.1);
border-radius: 20px;
padding: 24px;
box-shadow:
0 8px 32px rgba(46, 123, 255, 0.1),
0 4px 16px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.calendar-widget::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #2e7bff, #4f9cf9, #74b9ff);
border-radius: 20px 20px 0 0;
}
.calendar-widget:hover {
transform: translateY(-4px);
box-shadow:
0 12px 48px rgba(46, 123, 255, 0.15),
0 8px 24px rgba(0, 0, 0, 0.08);
}
/* 小部件标题 */
.widget-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 20px;
text-align: center;
position: relative;
}
.widget-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: linear-gradient(90deg, #2e7bff, #74b9ff);
border-radius: 2px;
}
/* 活动日历容器 */
.activity-calendar {
width: 100%;
}
/* 日历头部 */
.calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding: 12px 16px;
background: linear-gradient(135deg, #f8fafc 0%, #e6f1ff 100%);
border-radius: 12px;
border: 1px solid rgba(46, 123, 255, 0.1);
}
/* 日历导航按钮 */
.calendar-nav {
width: 36px;
height: 36px;
border: none;
border-radius: 10px;
background: rgba(46, 123, 255, 0.1);
color: var(--primary-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.calendar-nav:hover {
background: var(--primary-color);
color: white;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(46, 123, 255, 0.3);
}
.calendar-nav:active {
transform: scale(0.95);
}
/* 日历标题 */
.calendar-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
text-align: center;
flex: 1;
margin: 0 16px;
}
/* 日历网格 */
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
background: rgba(46, 123, 255, 0.05);
border-radius: 12px;
padding: 8px;
overflow: hidden;
}
/* 日历日期头部 */
.calendar-day-header {
padding: 12px 4px;
text-align: center;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
background: rgba(46, 123, 255, 0.1);
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* 日历日期单元格 */
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: 500;
background: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
color: var(--text-primary);
}
.calendar-day:hover {
background: rgba(46, 123, 255, 0.1);
transform: scale(1.05);
color: var(--primary-color);
font-weight: 600;
}
/* 当前日期 */
.calendar-day.today {
background: var(--primary-color);
color: white;
font-weight: 700;
box-shadow: 0 2px 8px rgba(46, 123, 255, 0.4);
}
.calendar-day.today:hover {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
/* 有活动的日期 */
.calendar-day.has-event {
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
color: #856404;
font-weight: 600;
position: relative;
}
.calendar-day.has-event::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: #ff6b6b;
border-radius: 50%;
animation: pulse 2s infinite;
}
.calendar-day.has-event:hover {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
transform: scale(1.1);
}
/* 其他月份的日期 */
.calendar-day.other-month {
color: var(--text-muted);
background: rgba(255, 255, 255, 0.5);
}
.calendar-day.other-month:hover {
background: rgba(46, 123, 255, 0.05);
color: var(--text-secondary);
}
/* 选中的日期 */
.calendar-day.selected {
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
color: white;
font-weight: 700;
box-shadow: 0 4px 12px rgba(46, 123, 255, 0.4);
transform: scale(1.05);
}
.calendar-day.selected:hover {
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
color: white;
transform: scale(1.1);
}
/* 响应式设计 */
@media (max-width: 768px) {
.calendar-widget {
padding: 20px;
border-radius: 16px;
}
.calendar-header {
padding: 10px 12px;
margin-bottom: 16px;
}
.calendar-nav {
width: 32px;
height: 32px;
font-size: 0.8rem;
}
.calendar-title {
font-size: 1rem;
margin: 0 12px;
}
.calendar-grid {
gap: 1px;
padding: 6px;
}
.calendar-day-header {
padding: 8px 2px;
font-size: 0.7rem;
}
.calendar-day {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.calendar-widget {
padding: 16px;
}
.widget-title {
font-size: 1.1rem;
margin-bottom: 16px;
}
.calendar-day-header {
padding: 6px 1px;
font-size: 0.65rem;
}
.calendar-day {
font-size: 0.75rem;
}
.calendar-day.has-event::after {
width: 4px;
height: 4px;
bottom: 1px;
}
}
/* ========================================
报名表单模态框现代化样式
======================================== */
/* 模态框遮罩层 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-index-modal);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal[style*="block"], .modal.open {
opacity: 1;
visibility: visible;
}
/* 模态框背景遮罩 */
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
cursor: pointer;
}
/* 模态框内容容器 */
.modal-content {
position: relative;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow:
0 20px 60px rgba(46, 123, 255, 0.15),
0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(46, 123, 255, 0.1);
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow: hidden;
transform: scale(0.9) translateY(20px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal[style*="block"] .modal-content, .modal.open .modal-content {
transform: scale(1) translateY(0);
}
/* 模态框头部 */
.modal-header {
padding: 24px 32px 20px;
border-bottom: 1px solid rgba(46, 123, 255, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #f8fafc 0%, #e6f1ff 100%);
position: relative;
}
.modal-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #2e7bff, #4f9cf9, #74b9ff);
border-radius: 24px 24px 0 0;
}
.modal-header h2 {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 12px;
}
.modal-header h2::before {
content: '\f4c4'; /* FontAwesome 报名图标 */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: var(--primary-color);
font-size: 1.25rem;
}
/* 关闭按钮 */
.modal-close {
width: 40px;
height: 40px;
border: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.8);
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.modal-close:hover {
background: rgba(255, 107, 107, 0.1);
color: #ff6b6b;
transform: scale(1.1);
}
/* 模态框主体 */
.modal-body {
padding: 32px;
max-height: calc(90vh - 120px);
overflow-y: auto;
}
/* 报名表单样式 */
.register-form {
display: flex;
flex-direction: column;
gap: 24px;
}
/* 表单组 */
.register-form .form-group {
position: relative;
}
.register-form .form-group label {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
/* 为不同字段添加图标 */
.register-form label[for="participantName"]::before {
content: '\f007'; /* 用户图标 */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: var(--primary-color);
font-size: 0.9rem;
}
.register-form label[for="participantEmail"]::before {
content: '\f0e0'; /* 邮箱图标 */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: var(--primary-color);
font-size: 0.9rem;
}
.register-form label[for="participantPhone"]::before {
content: '\f095'; /* 电话图标 */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: var(--primary-color);
font-size: 0.9rem;
}
.register-form label[for="participantClass"]::before {
content: '\f19d'; /* 学校图标 */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: var(--primary-color);
font-size: 0.9rem;
}
.register-form label[for="participantNote"]::before {
content: '\f249'; /* 备注图标 */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: var(--primary-color);
font-size: 0.9rem;
}
/* 表单输入框 */
.register-form input,
.register-form textarea {
width: 100%;
padding: 14px 16px;
border: 2px solid rgba(46, 123, 255, 0.2);
border-radius: 12px;
font-size: 1rem;
font-family: inherit;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(46, 123, 255, 0.05);
}
.register-form input:focus,
.register-form textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow:
0 0 0 4px rgba(46, 123, 255, 0.1),
0 4px 16px rgba(46, 123, 255, 0.15);
background: rgba(255, 255, 255, 1);
transform: translateY(-1px);
}
.register-form textarea {
resize: vertical;
min-height: 80px;
font-family: inherit;
}
/* 表单操作按钮 */
.form-actions {
display: flex;
gap: 16px;
margin-top: 8px;
justify-content: flex-end;
}
.cancel-btn,
.submit-btn {
padding: 14px 28px;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
min-width: 120px;
justify-content: center;
}
/* 取消按钮 */
.cancel-btn {
background: rgba(108, 117, 125, 0.1);
color: var(--text-secondary);
border: 2px solid rgba(108, 117, 125, 0.2);
}
.cancel-btn:hover {
background: rgba(108, 117, 125, 0.15);
color: var(--text-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}
.cancel-btn::before {
content: '\f00d'; /* 取消图标 */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 0.9rem;
}
/* 提交按钮 */
.submit-btn {
background: linear-gradient(135deg, #2e7bff 0%, #4f9cf9 100%);
color: white;
box-shadow: 0 4px 16px rgba(46, 123, 255, 0.3);
}
.submit-btn:hover {
background: linear-gradient(135deg, #1c6ef7 0%, #3d8bfc 100%);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(46, 123, 255, 0.4);
}
.submit-btn::before {
content: '\f00c'; /* 确认图标 */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 0.9rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.modal-content {
width: 95%;
margin: 16px;
border-radius: 20px;
}
.modal-header {
padding: 20px 24px 16px;
}
.modal-header h2 {
font-size: 1.3rem;
}
.modal-body {
padding: 24px;
}
.register-form {
gap: 20px;
}
.form-actions {
flex-direction: column;
gap: 12px;
}
.cancel-btn,
.submit-btn {
width: 100%;
padding: 16px 24px;
}
}
@media (max-width: 480px) {
.modal-content {
width: 98%;
margin: 8px;
border-radius: 16px;
}
.modal-header {
padding: 16px 20px 12px;
}
.modal-header h2 {
font-size: 1.2rem;
}
.modal-body {
padding: 20px;
}
.register-form input,
.register-form textarea {
padding: 12px 14px;
font-size: 0.95rem;
}
}
/* ========================================
活动中心界面现代化重设计
======================================== */
/* 活动卡片现代化样式 */
.activity-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(46, 123, 255, 0.1);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(46, 123, 255, 0.1),
0 4px 16px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
transform-style: preserve-3d;
}
.activity-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: left;
z-index: 2;
}
.activity-card:hover {
transform: translateY(-12px) rotateX(5deg);
box-shadow:
0 20px 60px rgba(46, 123, 255, 0.2),
0 8px 32px rgba(0, 0, 0, 0.1);
border-color: rgba(46, 123, 255, 0.3);
}
.activity-card:hover::before {
transform: scaleX(1);
}
/* 活动图片增强 */
.activity-image {
position: relative;
overflow: hidden;
border-radius: 16px 16px 0 0;
height: 220px;
}
.activity-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
filter: brightness(1.1) contrast(1.05);
}
.activity-card:hover .activity-image img {
transform: scale(1.08);
}
/* 活动日期标签现代化 */
.activity-date {
position: absolute;
top: 16px;
left: 16px;
background: rgba(46, 123, 255, 0.95);
backdrop-filter: blur(10px);
color: white;
padding: 8px 12px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 16px rgba(46, 123, 255, 0.3);
z-index: 3;
}
.activity-date .day {
display: block;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
}
.activity-date .month {
display: block;
font-size: 0.75rem;
font-weight: 500;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* 活动状态徽章 */
.activity-badge {
position: absolute;
top: 16px;
right: 16px;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
z-index: 3;
}
.activity-badge:contains("即将开始") {
background: rgba(255, 152, 0, 0.9);
color: white;
box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
}
.activity-badge:contains("进行中") {
background: rgba(76, 175, 80, 0.9);
color: white;
box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
}
.activity-badge:contains("已结束") {
background: rgba(158, 158, 158, 0.9);
color: white;
box-shadow: 0 4px 16px rgba(158, 158, 158, 0.3);
}
/* 活动内容区域现代化 */
.activity-content {
padding: 24px;
position: relative;
}
.activity-category {
display: inline-block;
background: linear-gradient(135deg, #E6F1FF 0%, #A4C7FF 100%);
color: var(--primary-dark);
padding: 4px 12px;
border-radius: 16px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.activity-title {
margin: 0 0 12px 0;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.activity-title a {
color: var(--text-primary);
text-decoration: none;
transition: color 0.3s ease;
}
.activity-title a:hover {
color: var(--primary-color);
}
.activity-description {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 活动详情信息现代化 */
.activity-details {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
padding: 16px;
background: rgba(46, 123, 255, 0.05);
border-radius: 12px;
border-left: 4px solid var(--primary-color);
}
.detail-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--text-secondary);
}
.detail-item i {
width: 16px;
color: var(--primary-color);
font-size: 0.9rem;
}
/* 活动操作按钮现代化 */
.activity-actions {
display: flex;
gap: 8px;
align-items: center;
}
.register-btn {
flex: 1;
background: var(--primary-gradient);
color: white;
border: none;
padding: 12px 20px;
border-radius: 12px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 16px rgba(46, 123, 255, 0.3);
}
.register-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(46, 123, 255, 0.4);
background: var(--primary-gradient-hover);
}
.share-btn, .favorite-btn {
width: 44px;
height: 44px;
border: none;
border-radius: 12px;
background: rgba(46, 123, 255, 0.1);
color: var(--primary-color);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.share-btn:hover, .favorite-btn:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(46, 123, 255, 0.3);
}
.favorite-btn.active {
background: #E91E63;
color: white;
}
/* 推荐活动轮播现代化 */
.featured-activities {
margin-bottom: 48px;
padding: 32px 0;
background: linear-gradient(135deg, rgba(46, 123, 255, 0.05) 0%, rgba(79, 156, 249, 0.05) 100%);
border-radius: 24px;
position: relative;
overflow: hidden;
}
.featured-activities::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.featured-slider {
position: relative;
overflow: hidden;
border-radius: 16px;
}
.featured-activity {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 48px rgba(46, 123, 255, 0.15);
transition: all 0.4s ease;
}
.featured-activity:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(46, 123, 255, 0.25);
}
/* 活动网格布局现代化 */
.activities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 32px;
padding: 24px 0;
}
/* 活动筛选器现代化 */
.activity-filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
padding: 24px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(46, 123, 255, 0.1);
}
.filter-btn {
padding: 8px 16px;
border: 2px solid rgba(46, 123, 255, 0.2);
background: transparent;
color: var(--text-secondary);
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.filter-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--primary-gradient);
transition: left 0.3s ease;
z-index: -1;
}
.filter-btn:hover,
.filter-btn.active {
color: white;
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(46, 123, 255, 0.3);
}
.filter-btn:hover::before,
.filter-btn.active::before {
left: 0;
}
/* 活动状态指示器 */
.activity-status {
position: absolute;
top: 16px;
right: 16px;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
z-index: 3;
}
.activity-status.hot {
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
color: white;
box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);
animation: pulse 2s infinite;
}
.activity-status.new {
background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
color: white;
box-shadow: 0 4px 16px rgba(78, 205, 196, 0.4);
}
.activity-status.featured {
background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
color: white;
box-shadow: 0 4px 16px rgba(255, 217, 61, 0.4);
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* 活动加载动画 */
.activity-loading {
display: flex;
justify-content: center;
align-items: center;
padding: 48px;
}
.loading-spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(46, 123, 255, 0.1);
border-top: 4px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 响应式设计优化 */
@media (max-width: 768px) {
.activities-grid {
grid-template-columns: 1fr;
gap: 24px;
padding: 16px 0;
}
.activity-card {
border-radius: 16px;
}
.activity-content {
padding: 20px;
}
.activity-details {
padding: 12px;
}
.activity-actions {
flex-direction: column;
gap: 12px;
}
.share-btn, .favorite-btn {
width: 100%;
height: 40px;
}
.activity-filters {
padding: 16px;
gap: 8px;
}
.filter-btn {
font-size: 0.8rem;
padding: 6px 12px;
}
}
@media (max-width: 480px) {
.activity-image {
height: 180px;
}
.activity-date {
top: 12px;
left: 12px;
padding: 6px 10px;
}
.activity-date .day {
font-size: 1.25rem;
}
.featured-activities {
margin-bottom: 32px;
padding: 24px 0;
}
}
/* ========================================
联系我们模块 - 现代化重设计
======================================== */
.contact-section {
padding: var(--spacing-20) 0;
background: linear-gradient(135deg,
rgba(46, 123, 255, 0.03) 0%,
rgba(255, 255, 255, 0.98) 50%,
rgba(116, 185, 255, 0.03) 100%);
position: relative;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.contact-section .container {
position: relative;
z-index: 2;
}
.contact-section .section-title {
font-size: 2.75rem;
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--spacing-16);
position: relative;
}
.contact-section .section-title::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--primary-gradient);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(46, 123, 255, 0.3);
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-16);
align-items: start;
}
/* 联系信息区域 */
/* 页脚联系信息 - 移除白色卡片背景，保持页脚一致性 */
.footer .contact-info {
background: transparent;
backdrop-filter: none;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
position: relative;
overflow: visible;
}
/* 独立页面的联系信息保持原有样式 */
.contact-section .contact-info {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(46, 123, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: var(--spacing-10);
box-shadow: 0 20px 60px rgba(46, 123, 255, 0.1);
position: relative;
overflow: hidden;
}
/* 页脚联系信息 - 移除装饰性伪元素 */
.footer .contact-info::before {
display: none;
}
/* 独立页面的联系信息保持装饰性伪元素 */
.contact-section .contact-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-6);
padding: var(--spacing-6);
margin-bottom: var(--spacing-4);
border-radius: var(--border-radius-lg);
transition: var(--transition-base);
position: relative;
}
.contact-item:hover {
background: rgba(46, 123, 255, 0.05);
transform: translateX(8px);
box-shadow: 0 8px 32px rgba(46, 123, 255, 0.1);
}
.contact-item:last-child {
margin-bottom: 0;
}
.contact-icon {
width: 60px;
height: 60px;
background: var(--primary-gradient);
border-radius: var(--border-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
box-shadow: 0 8px 24px rgba(46, 123, 255, 0.3);
position: relative;
overflow: hidden;
}
.contact-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
animation: rotate 10s linear infinite;
}
.contact-icon i {
position: relative;
z-index: 2;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}
.contact-details h3 {
font-size: 1.25rem;
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--spacing-2);
line-height: 1.4;
}
.contact-details p {
font-size: 1rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.6;
font-weight: var(--font-weight-medium);
}
/* 联系表单区域 */
.contact-form {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(46, 123, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: var(--spacing-10);
box-shadow: 0 20px 60px rgba(46, 123, 255, 0.1);
position: relative;
overflow: hidden;
}
.contact-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--success-color), var(--info-color));
}
.contact-form .form {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
.contact-form .form-group {
position: relative;
}
.contact-form .form-group label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--spacing-2);
transition: var(--transition-fast);
}
.contact-form .form-group input,
.contact-form .form-group textarea {
width: 100%;
padding: var(--spacing-4) var(--spacing-5);
border: 2px solid rgba(46, 123, 255, 0.2);
border-radius: var(--border-radius-lg);
font-size: var(--font-size-base);
font-family: inherit;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
transition: var(--transition-fast);
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(46, 123, 255, 0.05);
}
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(46, 123, 255, 0.1), 0 4px 16px rgba(46, 123, 255, 0.15);
background: rgba(255, 255, 255, 1);
}
.contact-form .form-group input:focus + label,
.contact-form .form-group textarea:focus + label {
color: var(--primary-color);
}
.contact-form .form-group textarea {
resize: vertical;
min-height: 120px;
font-family: inherit;
}
.submit-btn {
background: var(--primary-gradient);
color: white;
border: none;
padding: var(--spacing-4) var(--spacing-8);
border-radius: var(--border-radius-lg);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: var(--transition-base);
box-shadow: 0 8px 24px rgba(46, 123, 255, 0.3);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: var(--transition-base);
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(46, 123, 255, 0.4);
}
.submit-btn:hover::before {
left: 100%;
}
.submit-btn:active {
transform: translateY(0);
box-shadow: 0 4px 16px rgba(46, 123, 255, 0.3);
}
/* 响应式设计 */
@media (max-width: 1024px) {
.about-hero {
grid-template-columns: 1fr;
gap: var(--spacing-12);
text-align: center;
}
.about-hero-content {
padding-right: 0;
}
.about-title {
font-size: 2.5rem;
}
.floating-cards {
display: none;
}
.org-tier {
flex-wrap: wrap;
gap: var(--spacing-4);
}
.contact-content {
grid-template-columns: 1fr;
gap: var(--spacing-12);
}
.contact-section .section-title {
font-size: 2.25rem;
}
}
@media (max-width: 640px) {
.about-title {
font-size: 2rem;
}
.hero-stats {
flex-direction: column;
gap: var(--spacing-4);
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.values-grid {
grid-template-columns: 1fr;
gap: var(--spacing-6);
}
.team-highlights {
grid-template-columns: 1fr;
gap: var(--spacing-4);
}
.highlight-item {
text-align: center;
flex-direction: column;
}
/* 联系模块移动端优化 */
.contact-section {
padding: var(--spacing-16) 0;
}
.contact-section .section-title {
font-size: 2rem;
margin-bottom: var(--spacing-12);
}
.contact-content {
gap: var(--spacing-8);
}
.contact-info,
.contact-form {
padding: var(--spacing-8);
}
.contact-item {
flex-direction: column;
text-align: center;
gap: var(--spacing-4);
padding: var(--spacing-5);
}
.contact-item:hover {
transform: translateY(-4px);
}
.contact-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.contact-details h3 {
font-size: 1.125rem;
}
.contact-details p {
font-size: 0.9rem;
}
.contact-form .form-group input,
.contact-form .form-group textarea {
padding: var(--spacing-3) var(--spacing-4);
font-size: 16px; /* 防止iOS自动缩放 */
}
.submit-btn {
width: 100%;
padding: var(--spacing-4);
font-size: var(--font-size-base);
}
}
/* 超小屏幕优化 */
@media (max-width: 480px) {
.contact-section {
padding: var(--spacing-12) 0;
}
.contact-section .section-title {
font-size: 1.75rem;
margin-bottom: var(--spacing-10);
}
.contact-info,
.contact-form {
padding: var(--spacing-6);
margin: 0 var(--spacing-2);
}
.contact-item {
padding: var(--spacing-4);
margin-bottom: var(--spacing-3);
}
.contact-icon {
width: 45px;
height: 45px;
font-size: 1.125rem;
}
.contact-details h3 {
font-size: 1rem;
}
.contact-details p {
font-size: 0.875rem;
}
}