/* ======================================== FULLPAGE - 首页整屏滚动（自研，无第三方依赖） - 每个版块占一屏，滚轮/触摸/键盘/圆点整屏跳转 - 版块内容超过一屏时：先在屏内滚动，到边界再跳上/下一屏 - 平移用 JS requestAnimationFrame 逐帧设置 transform（不用 CSS transition） - 仅在 时生效；脚本失败则回退普通滚动 ======================================== */ html.fp-on, html.fp-on body { margin: 0; height: 100%; overflow: hidden; } #fpRoot { position: fixed; inset: 0; z-index: 1; /* 粒子背景 z-index:0 之上，头部 z-index:1000 之下 */ } #fpRoot .fp-panel { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100dvh; /* 移动端动态视口高，避开地址栏抖动 */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* 覆盖版块自带的 transition: all，只对 transform 做整屏平移过渡 */ transition: transform 0.7s cubic-bezier(0.83, 0, 0.17, 1) !important; } /* 隐藏屏内滚动条（仍可滚） */ #fpRoot .fp-panel::-webkit-scrollbar { width: 0; height: 0; } #fpRoot .fp-panel { scrollbar-width: none; } /* 整屏模式下隐藏"回到顶部"（已有圆点导航代替） */ html.fp-on .back-to-top { display: none !important; } /* hero 轮播 banner 被抽成独立一屏：占满整屏、去掉原本在 hero 里的全宽负边距 */ html.fp-on .hero-banner-section { background: var(--bg-dark, #060b18); } html.fp-on .hero-banner-section .hero-banner { width: 100%; left: 0; right: 0; margin: 0; } html.fp-on .hero-banner-section .hero-banner-track { height: 100vh; height: 100dvh; } html.fp-on .hero-banner-section .hero-banner::after { display: none; } /* 不需要底部淡出 */ /* 合作伙伴 + 准备开始(CTA) + 页脚 合并为一屏：纵向堆叠、压缩留白、页脚钉到底部 */ html.fp-on .fp-merged { display: flex; flex-direction: column; } html.fp-on .fp-merged > .section { padding: 44px 0; } html.fp-on .fp-merged > .partners-section { padding-top: 64px; } html.fp-on .fp-merged > .cta-section { padding-bottom: 32px; } html.fp-on .fp-merged .section-header { margin-bottom: 32px; } html.fp-on .fp-merged > .footer { margin-top: auto; } /* 页脚推到屏底 */ /* 右侧圆点导航 */ .fp-dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 900; display: flex; flex-direction: column; gap: 14px; align-items: center; } .fp-dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); background: transparent; cursor: pointer; position: relative; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .fp-dot:hover { border-color: var(--primary, #4facfe); } .fp-dot.active { background: var(--primary, #4facfe); border-color: var(--primary, #4facfe); transform: scale(1.3); box-shadow: 0 0 12px rgba(79, 172, 254, 0.6); } .fp-dot-label { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: rgba(0, 0, 0, 0.65); color: #fff; padding: 4px 11px; border-radius: 7px; font-size: 12px; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .fp-dot:hover .fp-dot-label { opacity: 1; } @media (max-width: 768px) { .fp-dots { right: 12px; gap: 11px; } .fp-dot { width: 9px; height: 9px; } .fp-dot-label { display: none; } }