/* ========================================================================== hero-apple-v0915.css · 浅色白玻璃版 竖屏首屏 —— Apple 浅色模式。附加样式，不修改任何原有 CSS 文件。 回滚方式 把 index.html 里的 link 换回 hero-ambient-v0915.css（深蓝氛围版）， 或整行删掉恢复原始状态。三个版本互不干扰。 本版取向 —— Apple 的浅色模式（#f5f5f7 + 白玻璃），不用黑色 ├ 留白色调：炭灰 → 近白浅灰。做法是在氛围模糊的 background 堆栈里叠一层 │ 白纱再统一模糊，这样两张素材（近纯白 / 高饱和蓝）都能被拉到 │ 同一个浅色区间，不用靠 brightness 数值去硬凑。 ├ 玻璃参数：apple.com 浅色模式线上实际值 │ background: rgba(251, 251, 253, 0.72) │ backdrop-filter: saturate(180%) blur(20px) ├ 控件内容：白色 → Apple 深灰 #1d1d1f，配浅色留白。 └ CTA： 品牌蓝实心胶囊 var(--hg-color-brand) + 980px 圆角。 浅底上白色胶囊对比不足，实心蓝才立得住。 ⚠ 作用域说明 留白区只出现在 #heroSlide3（十周年）和 #heroSlide2（顺风车视频）这两屏。 #heroSlide1（骑行）是深色照片满幅铺底，控件必须保持原来的白色。 因此所有「深色内容」的控件样式都用 :has(#heroSlideN.active) 精确限定到 前两屏，不会污染骑行那屏。 仅在 (orientation: portrait) 生效；横屏与桌面端完全不受影响。 ========================================================================== */ @media (orientation: portrait) { /* 顶栏实测高度（393x852 与 375x667 上均为 66px）。 第 3 帧的媒体定位和白 bar 高度都依赖它：header 是不透明白，视频上沿必须 被夹在它下面，否则短屏上会被整段盖住。 ⚠ 站点没有现成的 header 高度 token（各 CSS 里都是硬编码 66/72px）。 若日后调整顶栏高度，这里必须同步改，否则第 3 帧会重新出现遮挡或白缝。 */ .page-home-v0723 { --hero-header-h: 66px; } /* ====================================================================== 1 · 浅色氛围底层 ::before 的 background 是「白纱 + 素材」两层堆栈，一起被 blur()， 白纱保证下限落在浅色区，素材保证留白区仍是画面自身的延伸而非死色。 ====================================================================== */ .page-home-v0723 #heroSlide3, .page-home-v0723 #heroSlide2 { overflow: hidden; background: #f5f5f7; } .page-home-v0723 #heroSlide3::before, .page-home-v0723 #heroSlide2::before { content: ""; position: absolute; inset: -14%; z-index: 0; background-repeat: no-repeat; background-position: center, center; background-size: cover, cover; transform: scale(1.12); pointer-events: none; } /* 十周年：素材本身近纯白，薄白纱即可，保留一点原有的浅蓝调 */ .page-home-v0723 #heroSlide3::before { background-image: linear-gradient(rgba(250, 250, 252, 0.46), rgba(250, 250, 252, 0.46)), url("../images/home-hero-anniversary-mobile-v0914.webp"); filter: blur(64px) saturate(1.05) brightness(1.04); } /* 顺风车：素材是大面积高饱和蓝，白纱加厚才能拉到同一浅色区间 */ .page-home-v0723 #heroSlide2::before { background-image: linear-gradient(rgba(250, 250, 252, 0.82), rgba(250, 250, 252, 0.82)), url("../images/home-hero-hitch-portrait-v0914.webp"); filter: blur(64px) saturate(0.55) brightness(1.10); } /* 装饰层全部撤掉：无暗角、无光晕、无品牌色薄纱 */ .page-home-v0723 #heroSlide3::after, .page-home-v0723 #heroSlide2::after { content: none; } .page-home-v0723 #heroSlide3 > .hero-glow, .page-home-v0723 #heroSlide2 > .hero-glow { display: none; } /* ====================================================================== 2 · 媒体盒锁定 + 羽化 #heroSlide2 的媒体是 inset:0 + contain，黑边高度随视口比例浮动， 必须先把元素盒锁到素材自身的 9:16，羽化才落在画面真实上下沿。 ====================================================================== */ @media (max-aspect-ratio: 9 / 16) { .page-home-v0723 #heroSlide2 > picture, .page-home-v0723 #heroSlide2 .hero-slide-video { /* 2026-09-15 修复 iPhone SE(375x667) 遮挡： 原实现是「垂直居中」——top 由 50% + translateY(-50%) 得到，实际等于 calc(50% - 50vw*16/9)。这个值随视口比例浮动，在 375x667（比例几乎 正好 9:16）上算出 0.17px，于是视频从 y≈0 起画，被 66px 高的不透明白 header 整段盖住，"哈啰顺风车"大标题正好在那个位置。 改法：把居中改成显式 top，并用 max() 夹住下界 —— 视频上沿永远不高于 header 下沿。同时 height 也要减掉 header 高度，否则 SE 上视频会向下 溢出 65.7px 被 overflow:hidden 裁掉，而底部烘死的免责声明小字就在那里 （合规文案，不能裁）。 对正常机型无任何变化：393x852 下 max(66, 76.66)=76.66、 min(786, 698.7)=698.7，与改动前实测的 mediaTop=77 / mediaH=699 一致。 代价：SE 上媒体盒变成 375x601（比例 0.624 宽于 9:16），contain 下 左右各留约 18px，由 ::before 氛围模糊填充。 */ inset: max(var(--hero-header-h), calc(50% - 50vw * 16 / 9)) 0 auto 0; height: min(calc(100% - var(--hero-header-h)), calc(100vw * 16 / 9)); transform: none; /* 2026-09-15 改动：顶部羽化取消，改为硬边 + 顶部纯白 bar（见下方 ::after）。 底部 28px 短羽化保留不动 —— 视频底部烘死了免责声明小字（约距下沿 36–50px），那是合规文案，长羽化会把它淡到看不清。 */ -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) calc(100% - 28px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0px, rgba(0, 0, 0, 1) calc(100% - 28px), rgba(0, 0, 0, 0) 100%); } /* 第 3 帧顶部白色 bar。 高度正好等于媒体盒上方的留白，所以不会压住画面：媒体盒 height = 100vw*16/9 且垂直居中 → 上方留白 = 50% - 50vw*16/9。 max(0px, …) 兜底：视口正好 9:16 时留白为 0，避免负值让整条声明失效。 这里要覆盖前面「装饰层全部撤掉」的 ::after { content: none }， 靠的是同特异度下的后置顺序，不要把这段挪到那条规则之前。 */ .page-home-v0723 #heroSlide2::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: max(var(--hero-header-h), calc(50% - 50vw * 16 / 9)); z-index: 1; background: #fff; pointer-events: none; } } /* 视频就绪后必须隐藏海报图。海报与视频同尺寸叠放，视频羽化后的上下沿是 半透明的，会把海报的大标题和底部二维码条透出来压在画面上。 */ .page-home-v0723 #heroSlide2:has(.hero-slide-video.is-ready) > picture { opacity: 0; transition: opacity 260ms ease; } /* 十周年：素材 1440x2560（9:16），且【文案「哈啰十年国民之选」是烘在图片里的】。 原 CSS 给的盒子是 inset:80px 0 110px，即 100vw x (100vh-190px)， 盒子比例随机型浮动、永远对不上素材的 9:16，object-fit:contain 于是 总在左右留白 —— 屏幕越短越严重（375x667 上 375px 宽的屏只画 268px）。 按视口比例分两种处理： - 比 9:16 更窄更高（所有手机）：按【宽度】锁定，横向必定铺满。 - 比 9:16 更宽（平板竖屏、矮屏）：按【高度】锁定，宁可左右留白也不裁掉 画面内的文案；留白区由底层氛围模糊填充，不会露出死色。 羽化上下不对称：顶部 112px 走长过渡；底部只给 24px，因为烘死的文案距 下沿约 53px，长羽化会把它淡到看不清。 */ @media (max-aspect-ratio: 9 / 16) { .page-home-v0723 #heroSlide3 > picture { inset: 50% 0 auto 0; height: calc(100vw * 16 / 9); transform: translateY(-50%); } .page-home-v0723 #heroSlide3 .hero-slide-img { object-fit: cover; object-position: center; } } @media (min-aspect-ratio: 9 / 16) { .page-home-v0723 #heroSlide3 > picture { inset: 0; height: 100%; transform: none; } .page-home-v0723 #heroSlide3 .hero-slide-img { object-fit: contain; object-position: center; } } /* 2026-09-15 改动：第 1 帧（十周年）羽化遮罩已移除，按需求改为硬边。 原实现是 mask-image 上下渐隐（顶部 112px / 底部 24px）。 回滚：把下面这条 mask-image: none 换回原来的 linear-gradient 即可。 */ .page-home-v0723 #heroSlide3 > picture { -webkit-mask-image: none; mask-image: none; } /* 2026-09-15 改动：第 1 帧上下留白从「氛围模糊」改为纯色 —— 上蓝下白。 为什么必须改：模糊层是同一张图放大 1.12 倍再 blur(64px)，左侧糊成蓝白、 右侧糊成暖灰（黄渤的西装），而画面上沿是整幅均匀的淡蓝。羽化时代靠 112px 渐变把这个色差藏住了，改硬边后就直接露出来。 色值来源与预期效果： - 上沿 #D8E9FF 取自图片自身第 0–24 行主色，所以上边界是【完全无缝】的。 换成品牌蓝会按色差程度显出一条有意的色带，不是 bug。 - 下沿图片底边本身是蓝(#94C0FD)+深褐(#7B6F67)+米色(#D3C9BF)三段， 任何单一纯色都填不平，白色会留一条清晰硬边 —— 这是设计取舍， 换来的是圆点/下滑箭头在白底上的对比度。 只作用于 max-aspect-ratio: 9/16（手机）。平板竖屏走 contain 左右留白的 另一分支，仍用氛围模糊，没有上下接缝问题。 */ @media (max-aspect-ratio: 9 / 16) { .page-home-v0723 #heroSlide3 { /* 改蓝色只动这一行 */ --hero-f1-top: #d8e9ff; --hero-f1-bottom: var(--hn-surface, #f4f7fa); /* 2026-09-15 与下方统计区(.metrics-section)统一色带，实测 --hn-surface 在本元素可解析 */ /* 硬分界正好落在媒体盒上沿：媒体 height = 100vw*16/9 且垂直居中 → 上沿 = 50% - 50vw*16/9。分界以上蓝、以下白；中间被画面盖住， 所以白色实际只在画面下沿以下可见。 */ background: linear-gradient(180deg, var(--hero-f1-top) 0, var(--hero-f1-top) calc(50% - 50vw * 16 / 9), var(--hero-f1-bottom) calc(50% - 50vw * 16 / 9), var(--hero-f1-bottom) 100%); } /* 撤掉氛围模糊层，否则它会盖在纯色带上 */ .page-home-v0723 #heroSlide3::before { display: none; } } /* ====================================================================== 3 · 顶栏 —— 白玻璃，apple.com 浅色模式线上实际参数 只在前两屏生效；骑行那屏是深色照片，顶栏保持原样。 ====================================================================== */ .page-home-v0723:has(#heroSlide3.active) .hg-header.hg-header--overlay:not(.is-scrolled):not(.is-open), .page-home-v0723:has(#heroSlide2.active) .hg-header.hg-header--overlay:not(.is-scrolled):not(.is-open) { color: #1d1d1f; background: rgba(251, 251, 253, 0.72); border-bottom: 1px solid rgba(0, 0, 0, 0.08); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: none; transition: background 400ms cubic-bezier(0.4, 0, 0.2, 1); } /* 2026-09-15：第 3 帧顶部要的是「一整条白 bar」。 上面那条共用规则给的是玻璃底 + 1px 底边线，叠在 ::after 的纯白上会被 那条线切成两截，视觉上就是「header 下面多了一块白的」。 所以第 3 帧单独覆盖成纯白、去掉底边线、去掉毛玻璃，让 header 与 ::after 合成一条连续白 bar。第 1 帧（十周年）不动，仍是玻璃底。 */ .page-home-v0723:has(#heroSlide2.active) .hg-header.hg-header--overlay:not(.is-scrolled):not(.is-open) { background: #fff; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ====================================================================== 4 · 底部控件 —— 去容器、缩尺寸、浅底配深色内容 ====================================================================== */ /* 撤掉玻璃药丸，回到裸露细条。 .hero-dot 本身是 52x44 的透明点击热区，可见细条是它的 ::before， 背景必须加在 ::before 上，加在按钮上会把整个热区填成色块。 */ .page-home-v0723 .hero-indicators { padding: 0; gap: 4px; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .page-home-v0723 .hero-dot { background: transparent; border: 0; box-shadow: none; } .page-home-v0723 .hero-dot::before, .page-home-v0723 .hero-dot-progress { height: 2px; } /* 前两屏是浅色留白 → 圆点与箭头改深灰 */ .page-home-v0723:has(#heroSlide3.active) .hero-dot::before, .page-home-v0723:has(#heroSlide2.active) .hero-dot::before { background: rgba(0, 0, 0, 0.16); } .page-home-v0723:has(#heroSlide3.active) .hero-dot-progress, .page-home-v0723:has(#heroSlide2.active) .hero-dot-progress { background: rgba(29, 29, 31, 0.82); } /* 下滑提示：撤掉玻璃圆钮，只留一条细线箭头 */ .page-home-v0723 .scroll-hint { display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; opacity: 0.6; } .page-home-v0723 .scroll-hint svg { width: 22px; height: 22px; stroke-width: 1.4; } .page-home-v0723:has(#heroSlide3.active) .scroll-hint svg, .page-home-v0723:has(#heroSlide2.active) .scroll-hint svg { stroke: rgba(29, 29, 31, 0.62); } /* 播放 / 暂停：64px → 44px 白玻璃，深灰图标 */ .page-home-v0723 #heroSlide2 .hero-play-btn { width: 44px; height: 44px; border: 1px solid rgba(0, 0, 0, 0.06); background: rgba(251, 251, 253, 0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); transition: background 400ms cubic-bezier(0.4, 0, 0.2, 1); } .page-home-v0723 #heroSlide2 .hero-play-btn:hover { background: rgba(255, 255, 255, 0.88); } .page-home-v0723 #heroSlide2 .hero-play-btn svg { width: 17px; height: 17px; fill: #1d1d1f; } /* CTA：品牌蓝实心胶囊。浅底上白胶囊对比不足，实心蓝才立得住 */ .page-home-v0723 #heroSlide2 .hero-content--cta-only .btn-hero-primary { padding: 11px 22px; color: #fff; background: var(--hg-color-brand, #008cff); border: 0; border-radius: 980px; font-weight: 400; letter-spacing: -0.01em; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: background 400ms cubic-bezier(0.4, 0, 0.2, 1); } .page-home-v0723 #heroSlide2 .hero-content--cta-only .btn-hero-primary:hover { color: #fff; background: var(--hg-color-brand-strong, #006fd6); } /* ====================================================================== 5 · 不支持 backdrop-filter 的浏览器兜底 ====================================================================== */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .page-home-v0723:has(#heroSlide3.active) .hg-header.hg-header--overlay:not(.is-scrolled):not(.is-open), .page-home-v0723:has(#heroSlide2.active) .hg-header.hg-header--overlay:not(.is-scrolled):not(.is-open) { background: rgba(251, 251, 253, 0.94); } /* 2026-09-15 修复：上面这条兜底在文件里排在 B4 之后、特异度相同， 会把第 3 帧的纯白 header 拉回 0.94 半透明，于是 header 与 ::after 的 纯白 bar 又差出一个色阶 —— 正是要消除的那个「多一块」。 第 3 帧在任何 backdrop-filter 支持情况下都必须是纯白。 */ .page-home-v0723:has(#heroSlide2.active) .hg-header.hg-header--overlay:not(.is-scrolled):not(.is-open) { background: #fff; } .page-home-v0723 #heroSlide2 .hero-play-btn { background: rgba(251, 251, 253, 0.94); } } }