/* KEYPOP Landing Page - Design width: 2560px * * WordPress 版：原来作用于 * / body / img 的全局 reset 收进 * #keyplay-lite-detail-root，否则 margin:0 与 img{display:block} * 会把主题的导航栏和页脚一起清掉。 * * 外层一律包 :where()，让选择器权重保持为 0——和原来的 * * / body / img 一致。若直接写 #keyplay-lite-detail-root *，权重会 * 涨到 1-0-0，压过下面所有 .kp-* 规则的 margin / padding。 */ :where(#keyplay-lite-detail-root), :where(#keyplay-lite-detail-root) *, :where(#keyplay-lite-detail-root) *::before, :where(#keyplay-lite-detail-root) *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x 必须留在 html/body：画布固定 2560px，缩放后仍可能 溢出零点几像素。clip 不创建滚动容器，不会破坏 puffs 段的 position: sticky——换成 hidden 会让吸顶失效。 */ html, body { width: 100%; overflow-x: clip; } #keyplay-lite-detail-root { background: #fff; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(#keyplay-lite-detail-root) img { display: block; max-width: none; } /* ===== Scaling Container ===== */ .kp-viewport { width: 100%; } .kp-canvas { width: 2560px; position: relative; } /* 首帧即生效的缩放，变量由 内联脚本写入； keyplaylite.js 之后用行内样式覆盖，两者取值一致 */ .kp-canvas--desktop { zoom: var(--kp-zoom-desktop, 1); } .kp-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* ===== Section Base ===== 真实文档流依次排列，position: sticky 才能正常生效 */ .kp-section { position: relative; width: 2560px; height: 1200px; overflow: hidden; } .kp-features-3d { background: #f5f5f5; } /* 高度 = 吸顶画面 1200 + 收缩行程 1560 + 结尾停留 1040 */ .kp-puffs-story { height: 3800px; background: #fff; overflow: visible; } .kp-compact { background: #fff; } .kp-visible-tank { background: #fafafa; } .kp-mesh { background: #fff; } .kp-battery { background: #fdfdfe; } /* 高度 = 吸顶画面 1200 + 发牌行程 1440 + 结尾停留 360 */ .kp-flavors { height: 3000px; background: #c7e9ff; overflow: visible; } .kp-parameters { background: #fff; } /* ===== Typography ===== */ .kp-label { font-size: 40px; font-weight: 700; color: #1ee7e0; text-transform: uppercase; line-height: normal; } .kp-heading { font-size: 72px; font-weight: 900; color: #000; text-transform: uppercase; line-height: 60px; } .kp-body { font-size: 20px; font-weight: 400; color: #000; line-height: 28px; } .kp-body--center { text-align: center; } .kp-text-group { display: flex; flex-direction: column; gap: 5px; } .kp-text-group--center { align-items: center; text-align: center; } /* ===== Section 1: Hero ===== */ .kp-hero-media { width: 2560px; height: 1200px; position: relative; } .kp-hero-media video, .kp-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===== Section 2: 3D Grid ===== */ .kp-grid-3d { position: absolute; left: 480px; top: 130px; width: 1600px; height: 940px; display: flex; gap: 20px; align-items: flex-start; } .kp-grid-col { display: flex; flex-direction: column; gap: 20px; width: 480px; flex-shrink: 0; } .kp-card { position: relative; background: #fff; border-radius: 30px; overflow: hidden; flex-shrink: 0; } /* 悬停时卡片内容轻微放大 */ .kp-card-hover-zoom .kp-card-inner { position: absolute; inset: 0; transform-origin: center center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .kp-card-hover-zoom:hover .kp-card-inner { transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .kp-card-hover-zoom .kp-card-inner { transition: none; } .kp-card-hover-zoom:hover .kp-card-inner { transform: none; } } .kp-card-label { position: absolute; z-index: 2; top: 35px; left: 50%; transform: translateX(-50%); font-size: 24px; font-weight: 900; color: #000; text-transform: uppercase; white-space: nowrap; line-height: normal; pointer-events: none; } .kp-card-sm { width: 480px; height: 300px; } /* 12000 Puffs 小卡片：2s 动画 + 2s 停留，循环 */ .kp-puffs-animate-card { overflow: hidden; } .kp-puffs-animate-bg { z-index: 1; } .kp-puffs-animate-product { z-index: 2; opacity: 1; transform: translateY(0); } .kp-puffs-animate-card:hover .kp-puffs-animate-product { animation: kp-puffs-animate-product 4s cubic-bezier(0.22, 1, 0.36, 1) infinite; will-change: transform, opacity; } @keyframes kp-puffs-animate-product { 0% { opacity: 0; transform: translateY(40%); } 50%, 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .kp-puffs-animate-card:hover .kp-puffs-animate-product { animation: none; opacity: 1; transform: none; } } /* 750mAh Battery 小卡片：悬停时 A实体 → B透明，2s 切换 + 2s 停留，循环 */ .kp-battery-animate-card { overflow: hidden; } .kp-battery-solid { z-index: 1; opacity: 0; } .kp-battery-transparent { z-index: 2; opacity: 1; } .kp-battery-animate-card .kp-card-label { z-index: 3; } .kp-battery-animate-card:hover .kp-battery-solid { animation: kp-battery-solid-fade 4s ease-in-out infinite; will-change: opacity; } .kp-battery-animate-card:hover .kp-battery-transparent { animation: kp-battery-transparent-fade 4s ease-in-out infinite; will-change: opacity; } @keyframes kp-battery-solid-fade { 0% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes kp-battery-transparent-fade { 0% { opacity: 0; } 50%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .kp-battery-animate-card:hover .kp-battery-solid, .kp-battery-animate-card:hover .kp-battery-transparent { animation: none; } .kp-battery-solid { opacity: 0; } .kp-battery-transparent { opacity: 1; } } .kp-card-lg { width: 480px; height: 620px; } .kp-card-360 { width: 600px; height: 940px; flex-shrink: 0; } .kp-360-header { position: absolute; z-index: 2; left: 160px; top: 66.5px; display: flex; align-items: center; gap: 25px; } .kp-360-icon { width: 43px; height: 50px; object-fit: cover; } .kp-360-title { font-size: 24px; font-weight: 900; text-transform: uppercase; color: #000; white-space: nowrap; } .kp-360-product { position: absolute; z-index: 2; left: 35px; top: 197.5px; width: 530px; height: 530px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; } .kp-360-product.is-dragging { cursor: grabbing; } .kp-360-product img { width: 100%; height: 100%; object-fit: cover; } .kp-360-controls { position: absolute; z-index: 2; left: 170.75px; top: 808.5px; display: flex; align-items: flex-start; gap: 56px; } .kp-control-item { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; } .kp-control-item span { font-size: 12px; font-weight: 300; color: #000; text-align: center; } .kp-control-btn { width: 40px; height: 40px; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px 8px; transition: background-color 0.25s ease; } .kp-control-btn--active { background: #000; padding: 10px 5px; } .kp-control-btn img { width: 100%; height: 100%; object-fit: contain; transition: filter 0.25s ease; /* 默认：白底黑图标 */ filter: brightness(0); } /* 选中态：黑底白图标 */ .kp-control-btn--active img { filter: brightness(0) invert(1); } /* 复位键悬停：反色 */ .kp-control-item[data-action="reset"]:hover .kp-control-btn { background: #000; } .kp-control-item[data-action="reset"]:hover .kp-control-btn img { filter: brightness(0) invert(1); } /* ===== Section 3+4: Puffs Story（原生 sticky + GSAP ScrollTrigger） ===== */ .kp-puffs-story-sticky { position: sticky; top: 0; width: 2560px; height: 1200px; background: #fff; } /* 可见框：随滚动收拢，初始为铺满整屏的大图 */ .kp-puffs-story-frame { position: absolute; left: 0; top: 0; width: 2560px; height: 1200px; overflow: hidden; z-index: 1; transform-origin: center center; transform: translate3d(0, 0, 0) scale(1, 1); border-radius: 0; will-change: transform; } /* 反向缩放，抵消外层，保持图片视觉尺寸不变 */ .kp-puffs-story-inner { position: absolute; left: 0; top: 0; width: 2560px; height: 1200px; transform-origin: center center; transform: scale(1, 1) translate3d(0, 0, 0); will-change: transform; } .kp-puffs-story-inner img { width: 2560px; height: 1200px; max-width: none; object-fit: cover; display: block; pointer-events: none; } .kp-puffs-story-text { position: absolute; left: 737px; top: 122px; width: 1086px; display: flex; flex-direction: column; align-items: center; gap: 25px; text-align: center; z-index: 2; pointer-events: none; } /* 初始隐藏在下方，收拢结束后逐行上移浮现 */ .kp-puffs-story-text > * { opacity: 0; transform: translate3d(0, 70px, 0); will-change: transform, opacity; } .kp-puffs-story-text .kp-text-group { width: 721px; } .kp-puffs-story-text .kp-heading { white-space: nowrap; letter-spacing: -0.02em; } .kp-puffs-story-text .kp-body { white-space: nowrap; } /* ===== Section 5: Compact ===== */ .kp-compact-bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2560px; height: 1200px; object-fit: cover; pointer-events: none; } .kp-text-block { position: absolute; top: 50%; transform: translateY(-50%); width: 828px; display: flex; flex-direction: column; gap: 30px; } .kp-text-block--left { left: 480px; } .kp-text-block--right { left: 1347px; width: 733px; text-align: right; } .kp-text-block--right .kp-text-group, .kp-text-block--right .kp-body { align-items: flex-end; text-align: right; } /* ===== Section 6: Visible Tank ===== */ .kp-visible-tank-media, .kp-mesh-media, .kp-battery-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .kp-visible-tank-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* 循环段压在片头之上，交接时把它显出来即可 */ .kp-visible-tank-video--loop { opacity: 0; } .kp-visible-tank-video--loop.is-active { opacity: 1; } .kp-visible-tank-text { position: absolute; left: 737px; top: 122px; width: 1086px; display: flex; flex-direction: column; align-items: center; gap: 25px; text-align: center; z-index: 1; } .kp-visible-tank-text .kp-text-group { width: 922px; } /* ===== Section 7: Mesh ===== */ .kp-mesh-video { width: 100%; height: 100%; object-fit: cover; display: block; } .kp-mesh-text { left: 480px; z-index: 1; } /* ===== Section 8: Battery ===== */ .kp-battery { background: #fdfdfe; } .kp-battery-video { width: 100%; height: 100%; object-fit: cover; display: block; } .kp-battery .kp-text-block { top: 50%; z-index: 1; } /* ===== Section 9: Flavors ===== */ .kp-flavors-sticky { position: sticky; top: 0; width: 2560px; height: 1200px; background: #c7e9ff; overflow: hidden; } .kp-flavors-header { position: absolute; left: 713px; top: 115px; width: 1134px; text-align: center; display: flex; flex-direction: column; gap: 30px; /* 高于发牌卡片，卡片从上方飞入时穿行于标题文字之后 */ z-index: 30; } .kp-flavors-title { font-size: 72px; font-weight: 900; text-transform: uppercase; color: #000; line-height: 71px; white-space: nowrap; letter-spacing: -0.02em; } .kp-flavors-grid { position: absolute; left: 50%; top: 320px; transform: translateX(-50%); width: 1600px; display: flex; flex-direction: column; gap: 30px; } .kp-flavor-row { display: flex; gap: 30px; align-items: center; } .kp-flavor-card { width: 296px; height: 360px; background: #fff; border-radius: 15px; overflow: hidden; flex-shrink: 0; transform-origin: center center; backface-visibility: hidden; will-change: transform, opacity; } .kp-flavor-card img { width: 100%; height: 100%; object-fit: cover; } .kp-flavors-footer { position: absolute; left: 50%; top: 1122px; transform: translateX(-50%); width: 332px; font-size: 20px; line-height: 28px; text-align: center; color: #000; } /* ===== Section 10: Parameters ===== */ .kp-parameters-title { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); font-size: 72px; font-weight: 700; text-transform: uppercase; color: #000; text-align: center; white-space: nowrap; } .kp-parameters-box { position: absolute; left: 50%; top: 240px; transform: translateX(-50%); width: 1600px; height: 720px; border-radius: 35px; overflow: hidden; } .kp-parameters-box img { width: 100%; height: 100%; object-fit: cover; } .kp-parameters-tags { position: absolute; left: 50%; top: 1065px; transform: translateX(-50%); display: flex; gap: 53px; align-items: center; } .kp-tag { width: 400px; height: 45px; border: 2px solid #000; border-radius: 22.5px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 400; text-transform: uppercase; color: #000; white-space: nowrap; padding: 9px 60px 8px; } /* ===== 进入视口后上移浮现 ===== */ .kp-reveal { opacity: 0; transform: translate3d(0, 60px, 0); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--kp-reveal-delay, 0s); will-change: transform, opacity; } .kp-reveal.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); } /* 本身依靠 translateX 居中，需保留水平位移 */ .kp-parameters-title.kp-reveal, .kp-parameters-box.kp-reveal { transform: translate3d(-50%, 60px, 0); } .kp-parameters-title.kp-reveal.is-revealed, .kp-parameters-box.kp-reveal.is-revealed { transform: translate3d(-50%, 0, 0); } @media (prefers-reduced-motion: reduce) { .kp-reveal { opacity: 1; transform: none; transition: none; } .kp-parameters-title.kp-reveal, .kp-parameters-box.kp-reveal { transform: translate3d(-50%, 0, 0); } }