/* ============================================================================ ① 【历史遗留 · 全局规则】—— 请先读这段再改动 ---------------------------------------------------------------------------- 下面 * 和 body 两条规则，原本写在轮播组件的「内嵌 HTML 文档」里。浏览器的 HTML 解析器会忽略嵌套文档里的第二个 / 标签，把它当成主文档的一部分处理 —— 所以这两条规则其实一直在**全局生效**。实测确认（2026-09-23）： · hello-elementor/reset.css 定义了 body { background-color:#fff; color:#333; font-family:-apple-system,... } · 本文件这条 body 规则在它之后、同权重，因此**当前是这条在赢**。 · 该规则只随首页加载（组件只存在于首页），所以：首页 → 背景 #f3f4f6、文字 #111827、字体 SF Pro 优先内页 → 背景 #ffffff、文字 #333333、字体主题默认 —— 全站首页与内页背景色其实是不一致的。本次改造【原样保留】这两条规则，目的是让渲染结果与改造前完全一致。若将来希望首页与内页统一（首页背景会由浅灰 #f3f4f6 变成白色 #ffffff），把本文件「① 历史遗留」这一段整段删掉即可。 ============================================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif; background-color: #f3f4f6; color: #111827; overflow-x: hidden; } /* ============================================================================ ② 【轮播组件自身样式】—— 以下规则仅作用于 .hero-container 内部 ============================================================================ */ .hero-container { position: relative; width: 100%; height: 580px; overflow: hidden; background: transparent; border-radius: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); } .hero-bg-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .bg-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s cubic-bezier(0.4, 0, 0.2, 1); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: opacity, visibility; } .bg-item.active { opacity: 1; visibility: visible; pointer-events: auto; } .bg-blur-layer { position: absolute; inset: -10px; background-size: cover; background-position: center; filter: blur(25px) brightness(1.1); transform: scale(1.05); z-index: 1; } .bg-full-layer { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2; image-rendering: -webkit-optimize-contrast; image-rendering: high-quality; animation: kenburnsZoom 16s ease-in-out infinite alternate; will-change: transform; } .bg-item::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.15) 100%); pointer-events: none; } .bg-item:not(.active) .bg-full-layer { animation-play-state: paused; } @keyframes kenburnsZoom { 0% { transform: scale(1) translateZ(0); } 100% { transform: scale(1.12) translateZ(0); } } .hero-main-content { position: absolute; bottom: 35px; left: 5%; width: 480px; max-width: 90%; z-index: 5; padding: 14px 20px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04); display: flex; justify-content: space-between; align-items: center; gap: 14px; transition: all 0.3s ease; } .main-text-group { flex: 1; min-width: 0; } .main-tag-wrapper { display: inline-block; margin-bottom: 6px; } .main-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; background: #2563eb; border: none; color: #ffffff; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); } .main-title-wrapper { width: 100%; overflow: hidden; } .main-title { font-size: 18px; line-height: 1.3; font-weight: 700; margin-bottom: 4px; color: #111827; text-shadow: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .main-desc { font-size: 12px; line-height: 1.4; color: #4b5563; text-shadow: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .btn-watch { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #2563eb; color: #ffffff; text-decoration: none; border-radius: 24px; font-weight: 600; font-size: 12px; white-space: nowrap; flex-shrink: 0; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } .btn-watch:hover, .btn-watch:focus, .btn-watch:active { background: #1d4ed8; color: #ffffff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45); } .hero-thumbnails { position: absolute; bottom: 20px; right: 4%; display: flex; gap: 14px; max-width: 52%; overflow-x: auto; overflow-y: visible; padding: 18px 16px 14px 16px; z-index: 5; scrollbar-width: none; scroll-behavior: smooth; mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); } .hero-thumbnails::-webkit-scrollbar { display: none; } .thumb-card { position: relative; min-width: 124px; height: 150px; border-radius: 14px; overflow: hidden; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.06); background-color: #ffffff; transform: translateY(0); transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; opacity: 0.85; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); flex-shrink: 0; will-change: transform, box-shadow; } .thumb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; } .thumb-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.45) 100%); z-index: 2; pointer-events: none; } .thumb-card:hover { opacity: 0.95; transform: translateY(-4px); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .thumb-card:hover .thumb-bg { transform: scale(1.08); } .thumb-card.active { opacity: 1; transform: translateY(-6px); border: 1px solid #2563eb; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), 0 0 16px rgba(37, 99, 235, 0.2); } .thumb-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; z-index: 4; pointer-events: none; } .thumb-tag { font-size: 9.5px; color: #64d2ff; font-weight: 600; margin-bottom: 2px; display: block; letter-spacing: 0.3px; } .thumb-card.active .thumb-tag { color: #ffffff; } .thumb-title { font-size: 10.5px; line-height: 1.3; color: #ffffff; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .thumb-progress { position: absolute; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, #2563eb 0%, #5ac8fa 100%); z-index: 5; box-shadow: 0 1px 6px rgba(37, 99, 235, 0.5); } /* ========== 移动端样式 ========== */ @media (max-width: 768px) { .hero-container { height: auto; aspect-ratio: 16 / 10; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); } .bg-blur-layer { display: none !important; } .bg-full-layer { background-size: cover; background-position: center; animation: mobileZoom 12s ease-in-out infinite alternate; } .bg-item::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%); } .bg-item:not(.active) .bg-full-layer { animation-play-state: paused; } @keyframes mobileZoom { 0% { transform: scale(1); } 100% { transform: scale(1.08); } } /* 介绍卡片：固定宽度，水平居中 */ .hero-main-content { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 340px; max-width: calc(100% - 20px); padding: 10px 14px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); display: flex; justify-content: space-between; align-items: center; gap: 8px; } .main-text-group { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .main-tag-wrapper { margin: 0 0 2px 0; padding: 0; line-height: 1; display: flex; } .main-tag { font-size: 8px; padding: 2px 6px; line-height: 1.1; background: #2563eb; border-radius: 10px; color: #ffffff; box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3); } .main-title-wrapper { width: 100%; overflow: hidden; white-space: nowrap; line-height: 1.1 !important; } .main-title-wrapper.has-marquee { mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%); } .main-title { font-size: 11px; line-height: 1.15 !important; margin: 0; padding: 0; display: inline-block; white-space: nowrap; text-overflow: clip; overflow: visible; text-shadow: none; color: #111827; } .marquee-active { display: inline-flex !important; will-change: transform; animation: marqueeScroll 12s linear infinite; } .marquee-active span { margin-right: 28px; } .hero-main-content:active .marquee-active { animation-play-state: paused; } @keyframes marqueeScroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .main-desc { display: none !important; } .btn-watch { padding: 5px 10px; font-size: 9px; border-radius: 14px; background: #2563eb; box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4); border: none; color: #ffffff; } .btn-watch svg { width: 8px; height: 8px; } .btn-watch:hover, .btn-watch:focus, .btn-watch:active { background: #1d4ed8; color: #ffffff; transform: translateY(-1px); } /* 缩略图容器：与大图距离缩小 */ .hero-thumbnails { position: static; width: 100%; max-width: none; margin: 6px 0 0 0; padding: 6px 12px 8px; gap: 8px; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); overflow-x: auto; overflow-y: visible; z-index: auto; } /* 小卡片浮现动画 */ .thumb-card { min-width: 84px; height: 56px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.06); opacity: 0.85; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); transform: translateY(0); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform; background-color: #ffffff; animation: thumbFloatIn 0.4s ease-out backwards; } @keyframes thumbFloatIn { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 0.85; transform: translateY(0); } } .thumb-card.active { opacity: 1; transform: translateY(-2px); border: 1px solid #2563eb; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 10px rgba(37, 99, 235, 0.25); } .thumb-content { padding: 0 4px 4px 4px; display: flex; flex-direction: column; justify-content: flex-end; } .thumb-tag { display: none !important; } .thumb-title { font-size: 9.5px; line-height: 1.2; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .thumb-progress { height: 2px; background: linear-gradient(90deg, #2563eb 0%, #5ac8fa 100%); box-shadow: 0 1px 4px rgba(37, 99, 235, 0.5); } } @media (min-width: 769px) and (max-width: 1024px) { .hero-main-content { width: 360px; left: 3%; bottom: 100px; } .hero-thumbnails { max-width: 55%; right: 3%; bottom: 15px; } }