/* p3.57 B1:封面 3D 化(iOS 26 图标质感)——squircle 轮廓 + 多层光影。 加载制:这个文件只在 cover3dEnabled 开着且风格一时被 header.php 链 接(和 liquid-nav.css 同一个判定模式),开关关着 = 一行不下发,旧封 面观感逐字节保留。选择器仍统一带 [data-theme-style="appstore"] 双保 险(风格二新拟态有自己的封面体系,不叠加)。 构成(总指挥对 iOS 26 图标的研究结论,web 侧纯 CSS 手绘): ① squircle(超椭圆)轮廓——不是普通 border-radius 圆弧,是曲率连续 的 superellipse,圆角"流"进边缘,这是"和 iOS 系统对齐"的关键细 节。两档实现:原生 corner-shape(Chromium 139+,box-shadow 天然跟 随轮廓,零结构改动);不支持的浏览器(Safari 旧版/Firefox)用 SVG mask 兜底(preserveAspectRatio="none" 拉伸适配任意长宽比),mask 会裁掉元素自己的 box-shadow,兜底档把外投影转成 drop-shadow(filter 先于 mask 生效,剪影取未裁切的盒子,柔和大模糊下形状差异不可辨)。 ② 光影四层(全部落在 .cover::before 一个伪元素上,多层 background + inset box-shadow 合成,零新增 DOM):顶部定向主光(radial,光源左上) + 顶边高光带(linear)+ 底部柔和暗部(同族深色,暗示材质厚度)+ 四圈内嵌棱线(1px inset,顶亮底暗=玻璃/材质厚度感)。 ③ emoji 投影在 P3.42 贴纸化三层的基础上强化:主投影加深 + 接触影压 实,让字形"浮"在材质上。高光/反射是点缀不是主体,字形本身保持清 晰。 ④ 卡片柔和外投影(story/hero/文章页图标)——卡片浮起感。 边界:P3.42-49 的封面渐变配方和取色逻辑(--h/--bar-h/cover-bar.js) 一行不动,这层是纯叠加;CoverKit 模板封面(:has(> .coverkit))不加 光影层(模板有自己的设计语言),squircle 轮廓照样生效。 */ /* ==================== ② 光影层(两种 squircle 路径共用) ==================== */ /* 光影盖在最上层(z4:img/tint/watermark z0、噪点 ::after z1、scrim z2、 叠字 z3)——光扫过整个封面材质包括字形,底部暗部恰好也垫在叠字/信息 条后面,顺带提升可读性。pointer-events 关掉,不挡点击。 */ html[data-theme-style="appstore"] .cover:not(:has(> .coverkit))::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: /* 顶部定向主光:光源在左上,fresnel 式衰减 */ radial-gradient(140% 100% at 24% -12%, rgb(255 255 255 / .30), transparent 56%), /* 顶边高光带 */ linear-gradient(180deg, rgb(255 255 255 / .13), transparent 20%), /* 底部柔和暗部:同族深色(跟封面自己的色相),不发灰 */ linear-gradient(0deg, hsl(var(--h, 220) 46% 8% / .20), transparent 24%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), /* 顶棱线(折射亮边) */ inset 1px 0 0 rgb(255 255 255 / .09), /* 左右微亮边 */ inset -1px 0 0 rgb(255 255 255 / .09), inset 0 -1px 0 hsl(var(--h, 220) 55% 16% / .28); /* 底棱线(厚度) */ } html[data-theme-style="appstore"][data-theme="light"] .cover:not(:has(> .coverkit))::before { /* 浅色封面底色本身亮,主光/棱线要再收一点,底暗部稍提才有厚度可读 */ background: radial-gradient(140% 100% at 24% -12%, rgb(255 255 255 / .36), transparent 52%), linear-gradient(180deg, rgb(255 255 255 / .18), transparent 18%), linear-gradient(0deg, hsl(var(--h, 220) 46% 20% / .16), transparent 22%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 1px 0 0 rgb(255 255 255 / .14), inset -1px 0 0 rgb(255 255 255 / .14), inset 0 -1px 0 hsl(var(--h, 220) 50% 34% / .20); } /* 分类集锦卡跑马灯的 app 图标砖(.collection-card__icon,不是 .cover 结 构,单独一份简化光影)——它们本来就是按"一排 app 图标"设计的(p3.25), 是最该有 iOS 图标质感的位置之一。 */ html[data-theme-style="appstore"] .collection-card__icon { position: relative; } html[data-theme-style="appstore"] .collection-card__icon::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; /* 原生档跟随 squircle 角;兜底档由 mask 统一裁 */ background: radial-gradient(120% 90% at 25% -10%, rgb(255 255 255 / .34), transparent 56%), linear-gradient(0deg, rgb(0 0 0 / .12), transparent 30%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 -1px 0 rgb(0 0 0 / .14); } /* 砖内 emoji 字形的贴地影(只有水合成 img.fe 后才投,原生文本态不投); p3.58 B2:图标砖的内联 SVG 同待遇。 */ html[data-theme-style="appstore"] .collection-card__icon .fe, html[data-theme-style="appstore"] .collection-card__icon--svg svg { filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .22)); } /* ==================== ③ emoji 投影强化(P3.42 贴纸化之上) ==================== */ /* 只调三档大/中/小卡的主投影与接触影深度,不动贴纸白膜边(那是 P3.42 定 下的识别特征)。尺寸分档和 base.css 一一对应。 */ html[data-theme-style="appstore"] .cover--row .cover-emoji, html[data-theme-style="appstore"] .cover--mini .cover-emoji { filter: drop-shadow(0 0 1px rgb(255 255 255 / .65)) drop-shadow(0 3px 7px hsl(var(--h) 48% 22% / .38)) drop-shadow(0 1px 2px hsl(var(--h) 50% 12% / .26)); } html[data-theme-style="appstore"] .cover--story-half .cover-emoji, html[data-theme-style="appstore"] .cover--story-wide .cover-emoji { filter: drop-shadow(0 0 1.5px rgb(255 255 255 / .75)) drop-shadow(0 10px 22px hsl(var(--h) 48% 24% / .42)) drop-shadow(0 2px 5px hsl(var(--h) 52% 12% / .28)); } html[data-theme-style="appstore"] .cover--hero .cover-emoji { filter: drop-shadow(0 0 2px rgb(255 255 255 / .80)) drop-shadow(0 16px 32px hsl(var(--h) 48% 22% / .46)) drop-shadow(0 4px 8px hsl(var(--h) 52% 12% / .30)); } html[data-theme-style="appstore"] .cover--icon .cover-emoji { filter: drop-shadow(0 0 1.2px rgb(255 255 255 / .70)) drop-shadow(0 8px 16px hsl(var(--h) 48% 22% / .40)) drop-shadow(0 2px 4px hsl(var(--h) 52% 12% / .26)); } html[data-theme-style="appstore"] .cover--playlist .cover-emoji { filter: drop-shadow(0 0 1.5px rgb(255 255 255 / .75)) drop-shadow(0 9px 18px hsl(var(--h) 48% 22% / .42)) drop-shadow(0 2px 4px hsl(var(--h) 52% 12% / .26)); } /* p3.58 B2:图标封面的符号投影同步强化——和上面 emoji 五档同一套深度, 只是白膜边保持细(线性图标边缘干净,不需要贴纸包边),见 base.css 的 图标封面块。 */ html[data-theme-style="appstore"] .cover--row .cover-icon, html[data-theme-style="appstore"] .cover--mini .cover-icon { filter: drop-shadow(0 0 0.5px rgb(255 255 255 / .60)) drop-shadow(0 3px 7px hsl(var(--h) 48% 22% / .38)) drop-shadow(0 1px 2px hsl(var(--h) 50% 12% / .26)); } html[data-theme-style="appstore"] .cover--story-half .cover-icon, html[data-theme-style="appstore"] .cover--story-wide .cover-icon { filter: drop-shadow(0 0 1px rgb(255 255 255 / .70)) drop-shadow(0 10px 22px hsl(var(--h) 48% 24% / .42)) drop-shadow(0 2px 5px hsl(var(--h) 52% 12% / .28)); } html[data-theme-style="appstore"] .cover--hero .cover-icon { filter: drop-shadow(0 0 1.5px rgb(255 255 255 / .75)) drop-shadow(0 16px 32px hsl(var(--h) 48% 22% / .46)) drop-shadow(0 4px 8px hsl(var(--h) 52% 12% / .30)); } html[data-theme-style="appstore"] .cover--icon .cover-icon { filter: drop-shadow(0 0 1px rgb(255 255 255 / .65)) drop-shadow(0 8px 16px hsl(var(--h) 48% 22% / .40)) drop-shadow(0 2px 4px hsl(var(--h) 52% 12% / .26)); } html[data-theme-style="appstore"] .cover--playlist .cover-icon { filter: drop-shadow(0 0 1px rgb(255 255 255 / .70)) drop-shadow(0 9px 18px hsl(var(--h) 48% 22% / .42)) drop-shadow(0 2px 4px hsl(var(--h) 52% 12% / .26)); } /* ==================== ④ 卡片柔和外投影(浮起) ==================== */ /* story 大卡:card-depth 的三层不动,只在 hover 外加一层大而软的环境光 影(原生路径直接加在 box-shadow 列表里;兜底路径整条转 drop-shadow, 见下)。hero 本来没有自己的外投影,补一层和 story 同族但更大的。 */ /* 手机端 hero 是全出血通栏(实测 border-radius 0),squircle 和外投影都 只在它有卡形态的桌面断点(≥700px)生效 */ @media (min-width: 700px) { html[data-theme-style="appstore"] .hero { box-shadow: 0 2px 6px rgb(0 0 0 / .16), 0 18px 44px rgb(0 0 0 / .20); } html[data-theme-style="appstore"][data-theme="light"] .hero { box-shadow: 0 2px 6px rgb(0 0 0 / .08), 0 18px 44px rgb(0 0 0 / .12); } } /* 文章页/展开态 app 图标:原来零外投影,补一层带封面色相的柔影 */ html[data-theme-style="appstore"] .post-icon { box-shadow: 0 2px 6px hsl(var(--h, 220) 40% 16% / .18), 0 12px 28px hsl(var(--h, 220) 42% 14% / .22); } /* ==================== ① squircle:原生 corner-shape 档 ==================== */ /* Chromium 139+(2025-08 起)。corner-shape 只改角部曲率,圆的"半径"数 字沿用各处既有值(18px 卡 / 12px 行 / 22.37% 图标 / 8px 歌单),轮廓 从圆弧变成连续曲率的超椭圆;box-shadow 天然跟随新轮廓,一行都不用动。 */ @supports (corner-shape: squircle) { html[data-theme-style="appstore"] .story-card, html[data-theme-style="appstore"] .cover--row, html[data-theme-style="appstore"] .attr-icon, html[data-theme-style="appstore"] .post-icon, html[data-theme-style="appstore"] .cover--icon, html[data-theme-style="appstore"] .collection-card__icon, html[data-theme-style="appstore"] .playlist-card .cover--playlist { corner-shape: squircle; } @media (min-width: 700px) { html[data-theme-style="appstore"] .hero { corner-shape: squircle; } } } /* ==================== ① squircle:SVG mask 兜底档(仅方形小砖) ==================== */ /* Safari 旧版/Firefox 没有 corner-shape 时的兜底。教训(P3.57 实测截图实 锤):单一 superellipse 用 preserveAspectRatio="none" 拉伸到宽卡上,角 部挖空跟着宽度等比放大,5:3 的卡直接变成透镜/叶子形——所以兜底档 **只给正方形语境**(行砖 56px / 迷你砖 40px / 文章图标 128px / 歌单卡 1:1 / 集锦马赛克砖 40px)上 mask,均匀缩放无形变、即真 squircle;宽卡 (story/hero)在兜底档保留既有 border-radius 圆弧+全部 3D 光影,等浏览 器的 corner-shape 原生支持(Safari 26 代已随 iOS 26 的 squircle 推进落 地)自动升级。 两个结构性配套: ① 被 mask 的元素自己的 border-radius 清零——否则可见形状是 "mask ∩ 圆角裁切"的交集,角尖会被旧圆弧削掉,不是纯 squircle; ② mask 作用于元素整体渲染(含它自己的 box-shadow),外投影转成 drop-shadow(filter 先于 mask 生效,剪影取未裁切盒;小砖阴影都 很小,差异不可辨)。 */ @supports not (corner-shape: squircle) { html[data-theme-style="appstore"] { --ask-squircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100.0 50.0L99.9 33.1L99.7 27.0L99.2 22.6L98.6 19.0L97.9 15.9L96.9 13.3L95.8 10.9L94.4 8.9L92.9 7.1L91.1 5.6L89.1 4.2L86.7 3.1L84.1 2.1L81.0 1.4L77.4 0.8L73.0 0.3L66.9 0.1L50.0 0.0L33.1 0.1L27.0 0.3L22.6 0.8L19.0 1.4L15.9 2.1L13.3 3.1L10.9 4.2L8.9 5.6L7.1 7.1L5.6 8.9L4.2 10.9L3.1 13.3L2.1 15.9L1.4 19.0L0.8 22.6L0.3 27.0L0.1 33.1L0.0 50.0L0.1 66.9L0.3 73.0L0.8 77.4L1.4 81.0L2.1 84.1L3.1 86.7L4.2 89.1L5.6 91.1L7.1 92.9L8.9 94.4L10.9 95.8L13.3 96.9L15.9 97.9L19.0 98.6L22.6 99.2L27.0 99.7L33.1 99.9L50.0 100.0L66.9 99.9L73.0 99.7L77.4 99.2L81.0 98.6L84.1 97.9L86.7 96.9L89.1 95.8L91.1 94.4L92.9 92.9L94.4 91.1L95.8 89.1L96.9 86.7L97.9 84.1L98.6 81.0L99.2 77.4L99.7 73.0L99.9 66.9Z' fill='%23000'/%3E%3C/svg%3E"); } html[data-theme-style="appstore"] .cover--row, html[data-theme-style="appstore"] .attr-icon, html[data-theme-style="appstore"] .post-icon, html[data-theme-style="appstore"] .cover--icon, html[data-theme-style="appstore"] .collection-card__icon, html[data-theme-style="appstore"] .playlist-card .cover--playlist { -webkit-mask-image: var(--ask-squircle); mask-image: var(--ask-squircle); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; border-radius: 0; } /* 外投影转换:元素自身阴影被 mask 裁掉,转成 drop-shadow */ html[data-theme-style="appstore"] .article-row__cover { box-shadow: none; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .25)); } html[data-theme-style="appstore"] .collection-card__icon { box-shadow: none; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .18)); } html[data-theme-style="appstore"] .post-icon { box-shadow: none; filter: drop-shadow(0 2px 6px hsl(220 40% 16% / .18)) drop-shadow(0 12px 28px hsl(220 42% 14% / .22)); } html[data-theme-style="appstore"] .playlist-card .cover--playlist, html[data-theme-style="appstore"] .playlist-card:hover .cover--playlist { box-shadow: none; } html[data-theme-style="appstore"] .playlist-card .cover--playlist { filter: drop-shadow(var(--shadow-card, 0 4px 12px rgb(0 0 0 / .12))); } @media (hover: hover) { html[data-theme-style="appstore"] .playlist-card:hover .cover--playlist { filter: drop-shadow(var(--shadow-card-hover, 0 10px 24px rgb(0 0 0 / .18))); } } /* .post-icon 的 overflow:hidden+radius 裁切已由自身 mask 接管 */ html[data-theme-style="appstore"] .post-icon { overflow: visible; } } /* ==================== ⑤ p3.58 B3b:透明模式封面真玻璃 ==================== 和 B1 光影按模式切换,不打架:不透明模式 = 上面 ② 的四层光影;透明模式 (data-glass-mode="on",含天气主题临时接管)= 这里换一套液态玻璃材质, 和 P3.56 导航栏同源的五层思路: ① 半透明 + blur 真透出——glass-mode.css 已有的底子(极淡色相蒂 + blur(28px) saturate,身后有常驻氛围光斑可透),这层不动; ② 折射——backdrop-filter: url(#ask-cover-refract),早期 Chromium 独占,新 Firefox 也已实装(P3.58 实测渲染正常);cover-glass.js 探测通过才加 ask-cover-refract 类,下面的折射规则才生效; Safari/老浏览器探测不到,停在 ① + ③④ 的"高质量 blur + 手绘 高光/色散"兜底,不碎不闪——这是设计好的兜底,不是残缺; ③ 色散——玻璃边缘的彩色镜边:左上暖谱/右下冷谱两条对角色谱 fringe, 模拟棱镜分光,角度和导航 dock 的高光方位一致(光源在左上); ④ 高光——顶亮底暗:inset 棱线比 ② 的实底版更亮更白(玻璃切割边), 底暗部改中性灰不再染封面色相——玻璃上"颜色身份"交给 backdrop 借入的身后场景,棱线再染色就脏了; ⑤ 颜色均衡——saturate() 拉伸把身后低饱和场景的色彩拉出来(深色主题 拉到 220%,和 glass-mode.css 同一数字),封面顺应背景场景变色。 选择器特异性全部压过 glass-mode.css 的同名规则(它加载顺序在后), 玻璃模式下 ② 的四层光影被本块整体替换,不存在两套叠加。 */ /* ---- ③④ ::before 换玻璃配方(色散 fringe + 切割边高光 + 中性底暗) ---- */ html[data-theme-style="appstore"][data-glass-mode="on"] .cover:not(:has(> .coverkit))::before { background: /* 色散:两条对角低不透明色谱带,只在角落可见,像玻璃边缘的分光 */ linear-gradient(115deg, rgb(255 118 88 / .10), transparent 24%), linear-gradient(295deg, rgb(96 158 255 / .12), transparent 24%), /* 顶边高光带:玻璃切割边最亮的一线,比实底版更白 */ linear-gradient(180deg, rgb(255 255 255 / .24), transparent 16%), /* 底边暗部:中性灰暗示玻璃厚度,不染封面色相 */ linear-gradient(0deg, rgb(0 0 0 / .16), transparent 20%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .50), /* 顶棱线 */ inset 1px 0 0 rgb(255 255 255 / .16), /* 左右微亮边 */ inset -1px 0 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(0 0 0 / .22); /* 底棱线(中性) */ } html[data-theme-style="appstore"][data-theme="light"][data-glass-mode="on"] .cover:not(:has(> .coverkit))::before { /* 浅色玻璃:身后场景亮,高光再提、底暗部加深才有"边缘"可读 */ background: linear-gradient(115deg, rgb(255 118 88 / .12), transparent 22%), linear-gradient(295deg, rgb(96 158 255 / .14), transparent 22%), linear-gradient(180deg, rgb(255 255 255 / .38), transparent 15%), linear-gradient(0deg, rgb(0 0 0 / .20), transparent 18%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), inset 1px 0 0 rgb(255 255 255 / .22), inset -1px 0 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(0 0 0 / .26); } /* ---- ② 折射:渐进增强(只有 Chromium 的探测通过才命中) ---- */ html.ask-cover-refract[data-theme-style="appstore"][data-glass-mode="on"] .cover:not(:has(> .coverkit)) { backdrop-filter: url(#ask-cover-refract) blur(28px) saturate(160%); /* -webkit- 前缀那条在 glass-mode.css,不带 url——Chrome 两条都认时 后写的标准属性生效,和 liquid-nav.css 同一个叠加模式 */ } html.ask-cover-refract[data-theme-style="appstore"][data-theme="dark"][data-glass-mode="on"] .cover:not(:has(> .coverkit)) { backdrop-filter: url(#ask-cover-refract) blur(28px) saturate(220%); } /* ---- ① 的另一半:hero 在玻璃模式下拿掉自己的深色底 ---- .hero 是 P3.46 定下的"深色卡"(深浅色主题都深)——不透明模式下它是封 面身后合理的衬托;但玻璃模式下它挡在封面和页面之间,封面 backdrop 只能借到一块平的深色渐变,模糊平色 = 平色,这正是"只是降颜色,不是 真透明感"的最大来源。玻璃模式下把它拿掉,hero 封面直接借页面氛围光 斑/天气特效,真透出。可读性不受影响:标题/eyebrow 站在 .hero__content 自带的底部深色渐变信息条上(P3.46 的另一半,不动),圆点/左右箭头是 .glass 控件自带玻璃底。 */ html[data-theme-style="appstore"][data-glass-mode="on"] .hero { background: none; }