/* --- 全局与基础样式 --- */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Orbitron:wght@400;700&display=swap'); :root { --primary-color: #9f5dff; /* 辉光紫 */ --secondary-color: #0d0a1a; /* 深空蓝黑 */ --text-color: #e0e0e0; --glow-color: rgba(159, 93, 255, 0.8); --font-tech: 'Orbitron', sans-serif; --font-body: 'Roboto', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-snap-type: y mandatory; } /* 针对 OPPO 设备：UA 检测后在 上加 .ua-oppo - 降级 scroll-behavior，避免平滑滚动与延迟吸附叠加导致的抖动 - 将 mandatory 改为 proximity，减轻强吸附 - 将每个 section 的 snap-stop 放宽为 normal */ html.ua-oppo { scroll-behavior: auto; scroll-snap-type: y proximity; } html.ua-oppo section.scroll-section { scroll-snap-stop: normal; } /* 特例：Join 作为聚合页，继续保持能进入页脚但不强吸附 */ html.ua-oppo #join.scroll-section { scroll-snap-align: start; } body { font-family: var(--font-body); background-color: var(--secondary-color); color: var(--text-color); overflow-x: hidden; } /* Global: hide page scrollbars visually (still scrollable) */ html, body { -ms-overflow-style: none; scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } section.scroll-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; scroll-snap-align: start; /* 进入视口时吸附到起始位置 */ scroll-snap-stop: always; /* 更稳的吸附停靠 */ } /* 将 join 与 footer 视为一体： - 放宽 join 的停靠强度，便于继续滚动进入 footer - 明确禁止 footer 成为吸附点 */ .container { width: 90%; max-width: 1200px; margin: 0 auto; text-align: center; } h2 { font-family: var(--font-tech); font-size: 2.5rem; color: var(--primary-color); margin-bottom: 40px; text-shadow: 0 0 10px var(--glow-color); } /* Hero区域的h2不应用打字机效果 */ #hero h2 { border-right: none; } /* 打字机效果(仅应用于非Hero区域的h2) */ .typewriter { overflow: visible; white-space: nowrap; display: inline-block; border-right: 3px solid var(--primary-color); animation: typewriter-cursor 0.75s step-end infinite; padding: 0 10px; opacity: 0; } .typewriter.typing-complete { border-right: none; animation: none; } .typewriter.typing-active { opacity: 1; } @keyframes typewriter-cursor { 0%, 100% { border-color: var(--primary-color); } 50% { border-color: transparent; } } p { font-size: 1.1rem; line-height: 1.8; max-width: 800px; margin: 0 auto 20px auto; } /* --- 移动端拖拽指示器 --- */ #drag-indicator { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background: rgba(159, 93, 255, 0.9); color: white; padding: 12px 24px; border-radius: 25px; font-family: var(--font-tech); font-size: 0.9rem; z-index: 9998; pointer-events: none; opacity: 0; transition: all 0.3s ease; box-shadow: 0 0 20px rgba(159, 93, 255, 0.6); display: flex; align-items: center; gap: 8px; } #drag-indicator.visible { transform: translateX(-50%) translateY(0); opacity: 1; } #drag-indicator::before { content: '⬇'; font-size: 1.2rem; animation: bounce 1s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* --- 回到顶部按钮 --- */ #back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: linear-gradient(135deg, var(--primary-color), #7a3fd9); border: none; border-radius: 50%; color: white; font-size: 24px; cursor: pointer; z-index: 9997; opacity: 0; transform: translateY(100px); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(159, 93, 255, 0.4); display: flex; align-items: center; justify-content: center; } #back-to-top.visible { opacity: 1; transform: translateY(0); } #back-to-top:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 6px 20px rgba(159, 93, 255, 0.6); } #back-to-top::before { content: '↑'; font-weight: 900; font-family: 'Arial Black', sans-serif; font-size: 16px; } /* --- Section 1: Hero Section --- */ #hero { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; background: radial-gradient(circle at center, #000104 0%, #000111 100%); } /* 背景星星层 */ #hero::before, #hero::after { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; } /* 小星星层 - 使用box-shadow创建150颗小星星 */ #hero::before { width: 1px; height: 1px; background: transparent; box-shadow: 79vw 23vh 1px 0px white, 15vw 87vh 1px 0px white, 91vw 45vh 1px 0px white, 23vw 67vh 1px 0px white, 56vw 12vh 1px 0px white, 34vw 89vh 1px 0px white, 67vw 34vh 1px 0px white, 12vw 56vh 1px 0px white, 89vw 78vh 1px 0px white, 45vw 23vh 1px 0px white, 78vw 56vh 1px 0px white, 23vw 45vh 1px 0px white, 56vw 89vh 1px 0px white, 34vw 12vh 1px 0px white, 67vw 67vh 1px 0px white, 12vw 34vh 1px 0px white, 89vw 12vh 1px 0px white, 45vw 78vh 1px 0px white, 78vw 45vh 1px 0px white, 23vw 89vh 1px 0px white, 56vw 23vh 1px 0px white, 34vw 56vh 1px 0px white, 67vw 12vh 1px 0px white, 12vw 78vh 1px 0px white, 89vw 34vh 1px 0px white, 45vw 67vh 1px 0px white, 78vw 89vh 1px 0px white, 23vw 12vh 1px 0px white, 71vw 38vh 1px 0px white, 26vw 94vh 1px 0px white, 83vw 51vh 1px 0px white, 38vw 73vh 1px 0px white, 94vw 26vh 1px 0px white, 51vw 83vh 1px 0px white, 17vw 62vh 1px 0px white, 62vw 17vh 1px 0px white, 73vw 94vh 1px 0px white, 26vw 51vh 1px 0px white, 83vw 17vh 1px 0px white, 38vw 38vh 1px 0px white, 94vw 62vh 1px 0px white, 51vw 73vh 1px 0px white, 17vw 26vh 1px 0px white, 62vw 83vh 1px 0px white, 73vw 51vh 1px 0px white, 26vw 17vh 1px 0px white, 83vw 94vh 1px 0px white, 38vw 62vh 1px 0px white, 8vw 41vh 1px 0px white, 53vw 19vh 1px 0px white, 97vw 72vh 1px 0px white, 41vw 53vh 1px 0px white, 19vw 97vh 1px 0px white, 72vw 8vh 1px 0px white, 53vw 41vh 1px 0px white, 8vw 72vh 1px 0px white, 97vw 19vh 1px 0px white, 41vw 8vh 1px 0px white, 19vw 53vh 1px 0px white, 72vw 97vh 1px 0px white, 64vw 29vh 1px 0px white, 29vw 64vh 1px 0px white, 86vw 7vh 1px 0px white, 7vw 86vh 1px 0px white, 43vw 92vh 1px 0px white, 92vw 43vh 1px 0px white, 14vw 71vh 1px 0px white, 71vw 14vh 1px 0px white, 57vw 36vh 1px 0px white, 36vw 57vh 1px 0px white, 93vw 86vh 1px 0px white, 86vw 93vh 1px 0px white, 21vw 14vh 1px 0px white, 14vw 21vh 1px 0px white, 79vw 57vh 1px 0px white, 57vw 79vh 1px 0px white, 5vw 48vh 1px 0px white, 48vw 5vh 1px 0px white, 95vw 91vh 1px 0px white, 91vw 95vh 1px 0px white, 32vw 68vh 1px 0px white, 68vw 32vh 1px 0px white, 77vw 24vh 1px 0px white, 24vw 77vh 1px 0px white, 11vw 59vh 1px 0px white, 59vw 11vh 1px 0px white, 88vw 88vh 1px 0px white, 44vw 44vh 1px 0px white, 66vw 22vh 1px 0px white, 22vw 66vh 1px 0px white, 99vw 3vh 1px 0px white, 3vw 99vh 1px 0px white, 55vw 77vh 1px 0px white, 77vw 55vh 1px 0px white, 33vw 11vh 1px 0px white, 11vw 33vh 1px 0px white, 84vw 66vh 1px 0px white, 66vw 84vh 1px 0px white, 18vw 92vh 1px 0px white, 92vw 18vh 1px 0px white, 50vw 50vh 1px 0px white, 25vw 75vh 1px 0px white, 75vw 25vh 1px 0px white, 13vw 39vh 1px 0px white, 39vw 13vh 1px 0px white, 87vw 61vh 1px 0px white, 61vw 87vh 1px 0px white, 6vw 96vh 1px 0px white, 96vw 6vh 1px 0px white, 42vw 58vh 1px 0px white, 58vw 42vh 1px 0px white, 70vw 30vh 1px 0px white, 30vw 70vh 1px 0px white, 85vw 15vh 1px 0px white, 15vw 85vh 1px 0px white, 47vw 93vh 1px 0px white, 93vw 47vh 1px 0px white, 9vw 69vh 1px 0px white, 69vw 9vh 1px 0px white, 81vw 81vh 1px 0px white, 27vw 27vh 1px 0px white, 63vw 63vh 1px 0px white, 37vw 37vh 1px 0px white, 90vw 90vh 1px 0px white, 10vw 10vh 1px 0px white, 54vw 54vh 1px 0px white, 76vw 76vh 1px 0px white, 20vw 20vh 1px 0px white, 65vw 65vh 1px 0px white, 31vw 31vh 1px 0px white, 80vw 80vh 1px 0px white, 46vw 46vh 1px 0px white, 98vw 98vh 1px 0px white, 2vw 2vh 1px 0px white, 52vw 52vh 1px 0px white, 74vw 74vh 1px 0px white, 16vw 16vh 1px 0px white, 60vw 60vh 1px 0px white, 35vw 35vh 1px 0px white, 82vw 82vh 1px 0px white, 28vw 28vh 1px 0px white, 49vw 49vh 1px 0px white, 4vw 4vh 1px 0px white, 40vw 40vh 1px 0px white; } /* 中星星层 - 使用box-shadow创建50颗中等星星 */ #hero::after { width: 2px; height: 2px; background: transparent; box-shadow: 88vw 32vh 1px 0px white, 32vw 88vh 1px 0px white, 76vw 19vh 1px 0px white, 19vw 76vh 1px 0px white, 54vw 67vh 1px 0px white, 67vw 54vh 1px 0px white, 21vw 43vh 1px 0px white, 43vw 21vh 1px 0px white, 95vw 8vh 1px 0px white, 8vw 95vh 1px 0px white, 65vw 91vh 1px 0px white, 91vw 65vh 1px 0px white, 12vw 24vh 1px 0px white, 24vw 12vh 1px 0px white, 78vw 85vh 1px 0px white, 85vw 78vh 1px 0px white, 36vw 49vh 1px 0px white, 49vw 36vh 1px 0px white, 97vw 56vh 1px 0px white, 56vw 97vh 1px 0px white, 7vw 71vh 1px 0px white, 71vw 7vh 1px 0px white, 83vw 27vh 1px 0px white, 27vw 83vh 1px 0px white, 44vw 94vh 1px 0px white, 94vw 44vh 1px 0px white, 15vw 58vh 1px 0px white, 58vw 15vh 1px 0px white, 69vw 13vh 1px 0px white, 13vw 69vh 1px 0px white, 92vw 79vh 1px 0px white, 79vw 92vh 1px 0px white, 25vw 38vh 1px 0px white, 38vw 25vh 1px 0px white, 61vw 6vh 1px 0px white, 6vw 61vh 1px 0px white, 87vw 52vh 1px 0px white, 52vw 87vh 1px 0px white, 33vw 75vh 1px 0px white, 75vw 33vh 1px 0px white, 48vw 17vh 1px 0px white, 17vw 48vh 1px 0px white, 96vw 84vh 1px 0px white, 84vw 96vh 1px 0px white, 9vw 41vh 1px 0px white, 41vw 9vh 1px 0px white, 72vw 63vh 1px 0px white, 63vw 72vh 1px 0px white; } /* 星星显示动画 */ #hero.stars-visible::before, #hero.stars-visible::after { animation: starFadeIn 1.5s ease-out forwards, starTwinkle 8s ease-in-out infinite 1.5s; } @keyframes starFadeIn { from { opacity: 0; } to { opacity: 0.8; } } @keyframes starTwinkle { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.4; } } #star-particles { position: absolute; inset: 0; z-index: 1; opacity: 1; will-change: transform; } .hero-container { position: relative; z-index: 3; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 20px; will-change: auto; } .hero-title-group { position: absolute; top: 12%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; white-space: nowrap; will-change: transform, opacity; } #hero h1, #hero h2, .btn-explore { opacity: 0; } #hero h1 { font-family: var(--font-tech); font-size: 3.5rem; margin-bottom: 15px; } #hero h2 { font-family: var(--font-tech); font-size: 1.8rem; color: var(--primary-color); font-style: normal; text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color); } /* Hero标题显示后保持可见 */ #hero h1.reveal-in, #hero h2.reveal-in { opacity: 1; } .btn-explore { font-family: var(--font-tech); padding: 18px 40px; border: 2px solid var(--primary-color); border-radius: 50px; color: var(--text-color); text-decoration: none; font-size: 1.3rem; transition: all 0.3s ease; box-shadow: 0 0 15px var(--glow-color); position: absolute; top: 48%; transform: translate(-50%, -50%); z-index: 10; will-change: transform, opacity; } .btn-explore:hover { background-color: var(--primary-color); color: var(--secondary-color); box-shadow: 0 0 25px var(--glow-color), 0 0 50px var(--glow-color); transform: translate(-50%, -50%) scale(1.05); } .btn-explore.reveal-in { opacity: 1; } /* 响应式调整 */ @media (max-width: 768px) { #hero h1 { font-size: 2.6rem; } #hero h2 { font-size: 1.2rem; } .btn-explore { font-size: 1.1rem; padding: 15px 30px; } .hero-title-group { top: 10%; white-space: nowrap; width: 90%; } } /* Mobile: shrink section headings and subtitles */ @media (max-width: 768px) { #about h2, #projects h2, #members h2, #join h2 { font-size: 1.6rem; } #about .container p, #projects .container p, #members .container p, #join .container p { font-size: 0.95rem; } } /* Loading Screen */ #loading-screen { position: fixed; inset: 0; background: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 9999; transition: none; overflow: hidden; /* 使用圆形剪切蒙版，初始状态为完整可见 */ clip-path: circle(200% at 50% 50%); } /* Loading 淡出时启动圆形收缩动画 */ #loading-screen.loading-fade-out { animation: loading-clip-shrink 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards; } /* 圆形剪切蒙版收缩动画 */ @keyframes loading-clip-shrink { 0% { clip-path: circle(200% at 50% 50%); } 100% { clip-path: circle(0% at 50% 50%); } } .loading-content { width: min(480px, 80%); text-align: center; color: #0d1117; position: relative; z-index: 9999; } .loading-text { font: 700 24px/1.2 var(--font-tech); margin-bottom: 18px; opacity: 0; transform: translateY(10px); animation: loadingFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; } .loading-bar { height: 4px; width: 33%; background: #d0d0d0; border-radius: 999px; overflow: hidden; margin: 0 auto; opacity: 0; transform: scale(0.8); animation: loadingFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; } .loading-bar-fill { height: 100%; width: 0%; background: #000000; border-radius: inherit; transition: width .2s ease-out; } /* Loading 内容缓入动画 */ @keyframes loadingFadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* Reveal Animations - 标题入场动画 */ .reveal-in { animation: revealFadeIn 0.6s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes revealFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* --- Section 2: About Us --- */ #about { background: linear-gradient(to bottom, var(--secondary-color), #110e23); } .about-cards { display: flex; justify-content: space-around; gap: 30px; pointer-events: auto; opacity: 1; transition: opacity .25s ease; flex-wrap: wrap; } #section-dots.visible { opacity: 1; pointer-events: auto; } .about-cards .card { background: rgba(255, 255, 255, 0.05); padding: 40px; border-radius: 15px; width: 30%; min-width: 300px; border: 1px solid rgba(159, 93, 255, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .about-cards .card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .about-cards .icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; } .about-cards h3 { font-family: var(--font-tech); font-size: 1.5rem; margin-bottom: 15px; } /* --- Section 3: Project Matrix --- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; justify-items: center; /* 网格内项目居中，配合卡片宽度限位 */ } .project-card { background: #1a162d; border-radius: 10px; overflow: hidden; text-align: center; /* 所有内容居中 */ transition: transform 0.3s ease; border: 1px solid transparent; max-width: 420px; /* 卡片宽度限位 */ width: 100%; margin: 0 auto; /* 保障在更宽的格子里也能居中 */ } .project-card:hover { transform: scale(1.05); border-color: var(--primary-color); } .project-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; /* 固定比例，自适应高度 */ object-fit: cover; /* 保持铺满且裁剪 */ display: block; } .project-card h4 { font-family: var(--font-tech); font-size: 1.4rem; padding: 15px 20px 5px 20px; } .project-card p { font-size: 1rem; padding: 0 20px 15px 20px; } .project-card .tags { padding: 0 20px 15px 20px; display: flex; /* 居中对齐标签 */ justify-content: center; gap: 8px; flex-wrap: wrap; } .project-card .tags span { background: var(--primary-color); color: var(--secondary-color); padding: 5px 10px; border-radius: 5px; font-size: 0.8rem; margin-right: 5px; } .project-card .links { padding: 0 20px 20px 20px; display: flex; /* 居中对齐链接/按钮 */ justify-content: center; gap: 10px; } .project-card .links a { color: var(--primary-color); text-decoration: none; font-weight: bold; } .project-card.special .btn-primary { background: var(--primary-color); color: white; padding: 10px 15px; border-radius: 5px; text-decoration: none; display: inline-block; margin-top: 10px; } /* --- Section 4: Honor Wall - 动态照片墙 --- */ #honor { position: relative; overflow: hidden; } #honor .container { position: relative; z-index: 10; pointer-events: none; } #honor .container h2, #honor .container p { pointer-events: auto; } /* 居中覆盖的荣誉文本框 */ .honor-overlay { position: relative; z-index: 20; width: min(920px, 94%); margin: 0 auto; padding: 24px 22px; background: rgba(10, 8, 20, 0.8); border: 1px solid rgba(159, 93, 255, 0.35); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 40px rgba(159, 93, 255, 0.15) inset; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: auto; } .honor-overlay h2 { margin-bottom: 8px; } .honor-overlay .intro { margin-bottom: 12px; opacity: 0.9; } .honor-awards-list { list-style: none; padding: 0; margin: 0; text-align: center; max-height: 40vh; overflow-y: auto; overflow-x: hidden; /* 隐藏滚动条（兼容主流浏览器，旧版不支持则降级为细滚动条） */ scrollbar-width: none; /* Firefox 新版 */ -ms-overflow-style: none; /* IE 10+ */ } .honor-awards-list::-webkit-scrollbar { display: none; } /* WebKit */ .honor-awards-list li { padding: 3px 0; line-height: 1.2; white-space: pre; /* 保留空格且不换行 */ } .honor-awards-list li:last-child { border-bottom: none; } /* 单行中不同字段的样式 */ .honor-award-title { font-weight: 700; } .honor-award-sub { opacity: .85; } .honor-award-grade { color: var(--primary-color); font-family: var(--font-tech); font-weight: 700; letter-spacing: .2px; } /* 提升优先级，确保主题色生效 */ .honor-awards-list .honor-award-grade { color: var(--primary-color); } /* 响应式：移动端缩小字号，并允许按空格换行 */ @media (max-width: 768px) { .honor-overlay { width: 94%; padding: 16px 14px; } .honor-overlay h2 { font-size: 1.4rem; } /* 覆盖打字机的 nowrap 以允许换行 */ .honor-overlay h2.typewriter { white-space: normal; border-right: none; } .honor-overlay .intro { font-size: .95rem; } .honor-awards-list { max-height: 52vh; } .honor-awards-list li { white-space: normal; /* 允许换行 */ word-break: keep-all; /* 尽量只在空格处换行 */ line-height: 1.35; font-size: .95rem; } .honor-award-title { font-weight: 700; } .honor-award-sub { opacity: .9; } .honor-award-grade { color: var(--primary-color); font-family: var(--font-tech); font-weight: 700; } } .honor-wall-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; } .honor-wall { position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center; display: flex; gap: 20px; will-change: transform; pointer-events: auto; justify-content: center; } .honor-column { flex-shrink: 0; width: 280px; display: flex; flex-direction: column; gap: 20px; will-change: transform; } .honor-column.move-down { animation: moveDown 30s linear infinite; } .honor-column.move-up { animation: moveUp 30s linear infinite; } @keyframes moveDown { 0% { transform: translateY(-60%); } 100% { transform: translateY(0); } } @keyframes moveUp { 0% { transform: translateY(0); } 100% { transform: translateY(-60%); } } .honor-item { position: relative; width: 280px; height: 200px; flex-shrink: 0; overflow: hidden; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .honor-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .honor-item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; pointer-events: none; } .honor-item:hover .honor-item-overlay, .honor-item.active .honor-item-overlay { opacity: 1; } .honor-item:hover, .honor-item.active { transform: translateY(-10px) scale(1.05); z-index: 10; box-shadow: 0 10px 30px rgba(159, 93, 255, 0.5); } .honor-item:hover img, .honor-item.active img { transform: scale(1.1); } .honor-item-title { color: white; font-size: 1.1rem; font-weight: bold; line-height: 1.4; text-align: left; font-family: 'SimHei', '黑体', sans-serif; word-wrap: break-word; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); } .honor-item-award { color: var(--primary-color); font-size: 1.5rem; font-weight: bold; text-align: right; font-family: var(--font-tech); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); } /* 响应式调整 */ @media (max-width: 768px) { .honor-column { width: 220px; } .honor-item { width: 220px; height: 160px; } .honor-item-title { font-size: 0.9rem; } .honor-item-award { font-size: 1.2rem; } } /* --- Section 5: Core Members --- */ .member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .member-card { background: #1a162d; padding: 30px; border-radius: 15px; transition: all 0.3s ease; } .member-card:hover { transform: translateY(-10px); background: #2a244d; } .member-card .member-avatar { font-size: 5rem; line-height: 1; margin-bottom: 20px; filter: drop-shadow(0 0 10px var(--glow-color)); } .member-card h5 { font-size: 1.5rem; font-family: var(--font-tech); } .member-card p { color: var(--primary-color); font-size: 1rem; margin-bottom: 10px; } .member-card span { font-style: italic; } .member-card .social-links { margin-top: 15px; } .member-card .social-links a { color: var(--text-color); text-decoration: none; font-weight: bold; } /* --- Section 6: Join Us --- */ #join { background: linear-gradient(to top, var(--secondary-color), #110e23); } /* 让 join-footer 贴着 section 底部 */ #join.scroll-section { display: flex; flex-direction: column; justify-content: flex-start; /* 内容从上开始排列 */ padding-bottom: 0; /* 去掉底部内边距，避免与底部产生缝隙 */ } #join.scroll-section > .container { flex: 1 0 auto; /* 在去掉底部 join-footer 后的剩余空间里居中内容 */ display: flex; flex-direction: column; justify-content: center; /* 垂直居中 */ align-items: center; /* 水平居中（保障按钮/二维码等也居中） */ } #join .join-footer { margin-top: auto; /* 将 join-footer 推到容器底部 */ } /* Join 内部的 Footer 区块（替代原独立 footer） */ #join .join-footer { background: #0a0814; padding: 40px 0; text-align: center; margin-top: auto; /* 覆盖上方定义，确保贴底 */ scroll-snap-align: none; /* 不作为吸附点 */ } #join .join-footer p { margin-bottom: 10px; font-size: 0.9rem; } #join .join-footer a { color: var(--primary-color); text-decoration: none; } #join .join-footer .social-media a { margin: 0 15px; font-size: 1.2rem; color: var(--text-color); transition: color 0.3s ease; } #join .join-footer .social-media a:hover { color: var(--primary-color); } .btn-join { display: inline-block; font-family: var(--font-tech); padding: 20px 40px; background: var(--primary-color); color: white; text-decoration: none; font-size: 1.5rem; border-radius: 10px; margin: 30px 0; transition: all 0.3s ease; box-shadow: 0 0 20px var(--glow-color); } .btn-join:hover { transform: scale(1.1); box-shadow: 0 0 30px var(--glow-color), 0 0 60px var(--glow-color); } .qr-code img { width: 150px; height: 150px; margin-top: 20px; } /* --- Footer --- */ footer { background: #0a0814; padding: 40px 0; text-align: center; } footer p { margin-bottom: 10px; font-size: 0.9rem; } footer a { color: var(--primary-color); text-decoration: none; } .social-media a { margin: 0 15px; font-size: 1.2rem; color: var(--text-color); transition: color 0.3s ease; } .social-media a:hover { color: var(--primary-color); } /* --- Animations --- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } /* --- Developer Panel --- */ /* Right-side section dots navigation */ #section-dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 10010; display: flex; flex-direction: column; gap: 10px; pointer-events: none; opacity: 0; transition: opacity .25s ease; } #section-dots.visible { opacity: 1; pointer-events: auto; } #section-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(8, 8, 8, 0.126); border: 1px solid rgba(255, 255, 255, 0.6); cursor: pointer; transition: all .2s ease; } #section-dots .dot:hover { background: rgba(255,255,255,0.6); } #section-dots .dot.active { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,0.7); } @media (max-width: 768px) { /* 将右侧竖排的导航点改到底部居中，横向排列，提升触控体验 */ #section-dots { right: auto; left: 50%; top: auto; bottom: 14px; transform: translateX(-50%); flex-direction: row; gap: 10px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 6px 10px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #section-dots .dot { width: 10px; height: 10px; } } /* Members 3D ring */ #members .member-grid { display: none; } #members .members-ring-wrapper { position: relative; width: 100%; height: 600px; margin-top: 20px; perspective: 1000px; max-width: 100%; overflow: hidden; /* 不要超出 section 可视宽度 */ } #members .members-ring-stage { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; z-index: 1; } .ring-card { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; will-change: transform; translate: -50% -50%; width: 220px; height: auto; pointer-events: none; } .ring-card .social-links { display: none !important; } /* 移除GitHub按钮（如存在） */ .ring-card a[href*="github" i] { display: none !important; } /* 3D环卡片内层样式 */ .ring-card-inner{ background: rgba(26, 22, 45, 0.9); border: 1px solid rgba(159, 93, 255, 0.35); border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 22px rgba(159,93,255,.15) inset; text-align: center; transform: translateZ(2px); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .ring-avatar{ font-size: 40px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 0 10px var(--glow-color)); } .ring-name{ font-family: var(--font-tech); font-size: 1.1rem; margin-bottom: 4px; } .ring-role{ font-size: .9rem; color: var(--primary-color); opacity: .9; } @media (max-width: 768px) { /* 关于区卡片在手机端自动换行并占满可用宽度 */ .about-cards { justify-content: center; gap: 16px; } .about-cards .card { width: 100%; min-width: 0; } #members .members-ring-wrapper { height: 500px; } .ring-card { width: 180px; } } /* 将成员区标题居中到整个 section 中心 */ #members { position: relative; } #members .container { position: static; /* 让 h2 绝对定位参照 #members，而不是 container */ width: 100%; max-width: 100%; height: 100%; /* 与 section 高度一致，避免产生额外空白 */ } #members h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 2; pointer-events: none; width: auto; white-space: nowrap; } #nebula-dev-panel { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); width: 380px; max-height: 90vh; background: rgba(13, 10, 26, 0.95); border: 2px solid var(--primary-color); border-radius: 12px; box-shadow: 0 0 30px rgba(159, 93, 255, 0.5); z-index: 10000; font-family: var(--font-tech); color: var(--text-color); overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: slideInRight 0.3s ease-out; } @keyframes slideInRight { from { transform: translateY(-50%) translateX(100%); opacity: 0; } to { transform: translateY(-50%) translateX(0); opacity: 1; } } .dev-panel-header { background: linear-gradient(135deg, #9f5dff, #7a3fd9); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--primary-color); } .dev-panel-header h3 { margin: 0; font-size: 1.2rem; color: white; } .dev-header-controls { display: flex; align-items: center; gap: 15px; } .dev-toggle-label { display: flex; align-items: center; gap: 8px; color: white; font-size: 0.85rem; cursor: pointer; -webkit-user-select: none; user-select: none; } .dev-toggle-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .dev-toggle-label span { white-space: nowrap; } .dev-close-btn { background: rgba(255, 255, 255, 0.2); border: none; color: white; font-size: 24px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; line-height: 1; } .dev-close-btn:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); } .dev-panel-content { padding: 15px; max-height: calc(90vh - 60px); overflow-y: auto; } /* 滚动条样式 - Firefox */ @supports (scrollbar-width: thin) { .dev-panel-content { scrollbar-width: thin; scrollbar-color: var(--primary-color) rgba(255, 255, 255, 0.1); } } /* 滚动条样式 - WebKit (Chrome, Safari, Edge) */ .dev-panel-content::-webkit-scrollbar { width: 8px; } .dev-panel-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } .dev-panel-content::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; } .dev-section { margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; border: 1px solid rgba(159, 93, 255, 0.2); } .dev-section h4 { margin: 0 0 12px 0; font-size: 1rem; color: var(--primary-color); text-transform: uppercase; letter-spacing: 1px; } .dev-control-group { margin-bottom: 15px; } .dev-control-group label { display: block; margin-bottom: 6px; font-size: 0.85rem; color: var(--text-color); } .dev-control-group { display: grid; grid-template-columns: 1fr 2fr 80px; gap: 8px; align-items: center; } .dev-control-group label { margin-bottom: 0; } .dev-slider { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; outline: none; -webkit-appearance: none; appearance: none; } .dev-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--primary-color); border-radius: 50%; cursor: pointer; box-shadow: 0 0 8px rgba(159, 93, 255, 0.6); transition: all 0.2s ease; } .dev-slider::-moz-range-thumb { width: 16px; height: 16px; background: var(--primary-color); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 0 8px rgba(159, 93, 255, 0.6); transition: all 0.2s ease; } .dev-slider::-webkit-slider-thumb:hover { background: #b885ff; transform: scale(1.2); box-shadow: 0 0 12px rgba(159, 93, 255, 0.8); } .dev-slider::-moz-range-thumb:hover { background: #b885ff; transform: scale(1.2); box-shadow: 0 0 12px rgba(159, 93, 255, 0.8); } .dev-slider::-webkit-slider-runnable-track { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .dev-slider::-moz-range-track { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .dev-number { width: 100%; padding: 6px 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(159, 93, 255, 0.3); border-radius: 4px; color: white; font-family: 'Courier New', monospace; font-size: 0.85rem; text-align: center; } .dev-number:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 6px rgba(159, 93, 255, 0.4); } .dev-section label { display: block; margin-bottom: 10px; font-size: 0.85rem; color: var(--text-color); } .dev-section input[type="number"], .dev-section input[type="color"] { width: 100%; padding: 6px 10px; margin-top: 4px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(159, 93, 255, 0.3); border-radius: 4px; color: white; font-family: 'Courier New', monospace; font-size: 0.9rem; } .dev-section input[type="color"] { height: 40px; cursor: pointer; padding: 4px; } .dev-actions { display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; } .dev-btn { flex: 1; min-width: 100px; padding: 10px 15px; background: linear-gradient(135deg, #9f5dff, #7a3fd9); border: none; border-radius: 6px; color: white; font-family: var(--font-tech); font-size: 0.85rem; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .dev-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(159, 93, 255, 0.4); } .dev-btn:active { transform: translateY(0); } .dev-copy-btn { background: linear-gradient(135deg, #4CAF50, #45a049); } .dev-copy-btn:before { content: ''; } .dev-reset-btn { background: linear-gradient(135deg, #f44336, #da190b); } .dev-reset-btn:before { content: ''; } #dev-output { width: 100%; min-height: 200px; padding: 10px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(159, 93, 255, 0.3); border-radius: 6px; color: #00ff00; font-family: 'Courier New', monospace; font-size: 0.75rem; resize: vertical; line-height: 1.4; } #dev-output:focus { outline: none; border-color: var(--primary-color); }