style(首页头图): LOGO 回白字、倒计时去框；满幅羊水明暗流动，按宝宝轮廓遮罩挖空；孕囊轻浮 (v26100421)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

index.html

@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26100420 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100421 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 <!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100420';
+  var VER = '26100421';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 

js/hero-fx.js

@@ -11,17 +11,17 @@
       不在首页 / 页面隐藏 / 头图滚出视口时停画；系统「减少动态效果」下整块不画（CSS 也隐藏）。 */
 (function () {
   'use strict';
-  // [起始孕周, 静图, GIF（null = 只用静图）, 孕囊倍数 k]   2026-10-04：宝宝在囊里缩到原图的 70%，孕囊不变
+  // [起始孕周, 静图, GIF（null = 只用静图）, 孕囊倍数 k, 宝宝轮廓遮罩（水波/光挖掉宝宝用）]   2026-10-04：宝宝在囊里缩到原图的 70%，孕囊不变
   const STAGES = [
-    [0,  'd953571ad48d.jpg', null, .42],   // 1  4–7 周  胚芽 + 卵黄囊
+    [0,  'd953571ad48d.jpg', null, .42, '91f1472ee58a.png'],   // 1  4–7 周  胚芽 + 卵黄囊
-    [8,  'dd756c516072.jpg', null, .52],   // 2  8–10 周 小豆芽胚胎
+    [8,  'dd756c516072.jpg', null, .52, '5b39ca21a42e.png'],   // 2  8–10 周 小豆芽胚胎
-    [11, 'a6f52893ad1e.jpg', null, .62],   // 3  11–13 周 刚有人形
+    [11, 'a6f52893ad1e.jpg', null, .62, '0dcddb83b038.png'],   // 3  11–13 周 刚有人形
-    [14, '251ec778dc15.jpg', null, .72],   // 4  14–17 周 身子拉长、吮手
+    [14, '251ec778dc15.jpg', null, .72, 'd63b80896e8e.png'],   // 4  14–17 周 身子拉长、吮手
-    [18, 'dcf2ae48e0ec.jpg', null, .86],   // 5  18–23 周 比例接近新生儿、偏瘦
+    [18, 'dcf2ae48e0ec.jpg', null, .86, '0022b97f8cc0.png'],   // 5  18–23 周 比例接近新生儿、偏瘦
-    [24, 'b0e24b10aaee.jpg', null, 1],     // 6  24–27 周 原来那个宝宝
+    [24, 'b0e24b10aaee.jpg', null, 1, 'd75b2a87e805.png'],     // 6  24–27 周 原来那个宝宝
-    [28, '85da5aaebb4f.jpg', null, 1.01],  // 7  28–31 周 大一圈、有胎发
+    [28, '85da5aaebb4f.jpg', null, 1.01, '507e24e95ef0.png'],  // 7  28–31 周 大一圈、有胎发
-    [32, '0780b4698253.jpg', null, 1.02],  // 8  32–35 周 肉嘟嘟、抱腿
+    [32, '0780b4698253.jpg', null, 1.02, '681b0bdb885e.png'],  // 8  32–35 周 肉嘟嘟、抱腿
-    [36, 'ff112c222b1e.jpg', null, 1.03]   // 9  36 周起 足月、撑满羊水囊（头朝上：10-04 用户说头朝下看着不舒服）
+    [36, 'ff112c222b1e.jpg', null, 1.03, '494179795c67.png']   // 9  36 周起 足月、撑满羊水囊（头朝上：10-04 用户说头朝下看着不舒服）
   ];
   const DEFAULT = 5;
   const IMG = 'assets/img/';
@@ -38,11 +38,12 @@
     while (i + 1 < STAGES.length && week >= STAGES[i + 1][0]) i++;
     return i;
   }
-  let cur = -1, seq = 0;
+  let cur = -1, seq = 0, babyMask = null;   // babyMask：当前阶段宝宝轮廓（黑 + alpha），见 frame() 末尾
   function show(i) {
     if (i === cur) return;
     cur = i;
-    const [, png, gif, k] = STAGES[i], my = ++seq;
+    const [, png, gif, k, mk] = STAGES[i], my = ++seq;
+    const mi = new Image(); mi.onload = () => { if (my === seq) babyMask = mi; }; mi.src = IMG + mk;
     box.style.setProperty('--k', k);
     // 先把旧图淡掉再换，避免新旧宝宝叠在一起闪一下
     kid.classList.remove('is-on'); still.classList.remove('is-on');
@@ -73,7 +74,7 @@
   const ctx = cv.getContext('2d');
   const RS = 6;                                   // 光束小画布缩小倍数
   const rc = document.createElement('canvas'), rx = rc.getContext('2d');
-  const CW = 32;                                  // 水波低分辨率宽（越低越柔）
+  const CW = 44;                                  // 水波低分辨率宽（越低越柔）
   const off = document.createElement('canvas'), oc = off.getContext('2d');
   let tick = 0, W = 0, H = 0, dpr = 1, ch = 0, img = null, seen = true, raf = 0, last = 0, prev = 0;
   let SX = 0, SY = 0, SR = 1;                     // 孕囊圆心/半径（CSS px）
@@ -94,26 +95,27 @@
   }
   // 水波：四层不同方向、不同速度的长波叠加，取正半部分 → 一片片柔和的亮斑缓缓流过
   function water(t) {
-    const d = img.data, T = t * .45;
+    /* 2026-10-04 四版（用户：「整个上半部分要有羊水那种动态的感觉，现在还是偏静态」）：
+       明暗两相 —— 波峰处暖白亮斑、波谷处淡淡的暗影，source-over 叠，看起来是光透过流动的水在晃；
+       尺度比上一版小一倍多（一屏能看到好几片），流速加快。仍是极低分辨率放大 → 边缘全是软的，不是网。 */
+    const d = img.data, T = t * .9;
     for (let y = 0; y < ch; y++) {
       for (let x = 0; x < CW; x++) {
-        const u = x / CW * 6, v = y / CW * 6;
+        const u = x / CW * 11, v = y / CW * 11;
-        let w = Math.sin(u * 1.1 + T) + Math.sin(v * 1.3 - T * .8 + u * .4) + Math.sin((u - v) * .9 + T * .6) + Math.sin(Math.hypot(u - 4.5, v - 1) * 1.6 - T * 1.1);
+        let w = Math.sin(u * 1.1 + T) + Math.sin(v * 1.3 - T * .8 + u * .5) + Math.sin((u - v) * .9 + T * .7)
-        w = w / 4; w = w > 0 ? w * w : 0;        // 只留亮的那半，平方让过渡更软
+          + Math.sin(Math.hypot(u - 8, v - 2) * 1.4 - T * 1.2) * 1.2;
-        const X = x / CW * W, Y = y / ch * H;
+        w /= 4.2;
-        const g = guard(X, Y);                   // 宝宝那一圈完全不叠水波
+        const o = (y * CW + x) * 4, fade = 1 - y / ch * .3;
-        const o = (y * CW + x) * 4;
+        if (w > 0) { const k = Math.min(1, w * 1.6); d[o] = 255; d[o + 1] = 240; d[o + 2] = 218; d[o + 3] = k * k * 150 * fade; }
-        d[o] = 255; d[o + 1] = 238; d[o + 2] = 214; d[o + 3] = w * 200 * g * (1 - y / ch * .35);
+        else { const k = Math.min(1, -w * 1.6); d[o] = 150; d[o + 1] = 60; d[o + 2] = 40; d[o + 3] = k * k * 55 * fade; }
       }
     }
     oc.putImageData(img, 0, 0);
   }
   function drawWater() {
-    ctx.globalCompositeOperation = 'lighter';
+    ctx.globalCompositeOperation = 'source-over';
     ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';
-    ctx.globalAlpha = .55;
     ctx.drawImage(off, 0, 0, W, H);
-    ctx.globalAlpha = 1;
   }
   // 柔光束：光源在头图上方偏右画外；每道是一条很宽的渐变扇形，画在小画布上再放大
   const RAYS = [[-.12, .07, .8], [0, .05, .7], [.11, .08, 1], [.23, .06, .7]];
@@ -157,8 +159,8 @@
       if (p.y < -.03) { p.y = 1.03; p.x = Math.random(); }
       if (p.x < -.03) p.x = 1.03; else if (p.x > 1.03) p.x = -.03;
       const X = p.x * W, Y = p.y * H, gd = guard(X, Y);
-      if (gd <= 0) continue;
+      if (gd <= 0 && !babyMask) continue;
-      const al = (.15 + .25 * (.5 + .5 * Math.sin(t * p.sp + p.ph))) * gd;
+      const al = (.15 + .25 * (.5 + .5 * Math.sin(t * p.sp + p.ph))) * (babyMask ? 1 : gd);
       const R = p.r * 2.4, g = ctx.createRadialGradient(X, Y, 0, X, Y, R);
       g.addColorStop(0, 'rgba(255,250,238,' + al.toFixed(3) + ')');
       g.addColorStop(1, 'rgba(255,250,238,0)');
@@ -180,6 +182,14 @@
     drawWater();
     rays(t);
     dots(t, dt);
+    /* 宝宝保护：按当前阶段的宝宝轮廓把这一帧的水波/光束/微粒整块挖掉 ——
+       水在宝宝四周流，宝宝本身一像素都不叠（用户：「水波纹不能影响宝宝的表情，脸不能变」）。
+       孕囊在轻轻上下浮（CSS hbFloat），所以每帧现读位置。 */
+    if (babyMask) {
+      const hr = hero.getBoundingClientRect(), b = box.getBoundingClientRect();
+      ctx.globalCompositeOperation = 'destination-out';
+      ctx.drawImage(babyMask, b.left - hr.left, b.top - hr.top, b.width, b.height);
+    }
   }
   function kick() { if (!raf) raf = requestAnimationFrame(frame); }
   size();

mama-box.css

@@ -4479,19 +4479,18 @@ a.skip:focus{left:16px;top:16px}
   box-shadow:0 2px 6px rgba(255,59,48,.35)}
 
 /* ============ 2026-10-04 头图文字层次（用户：「LOGO 不明显，不一定用彩色；天数、孕周全是大白字有点单调」） ============
-   · LOGO：白色抠图 → 深可可棕字 + 白描边 + 轻投影，跟底栏「记一下」贴纸同一套语言，压在橙底上一眼可见、又不花。
+   · （同日撤回）LOGO 深棕白描边、倒计时白胶囊 —— 用户：「太扎眼」「加背景框也不好」。LOGO 回白字；倒计时去掉框，见下一段。
-     做法：img 留着撑尺寸（透明），::before 用同一张 PNG 当 mask 填棕色；描边/投影是 h1 上的 drop-shadow 叠出来的。
-   · 倒计时胶囊：半透明白框 → 实心白胶囊、棕红字，「92」用主题橙红加大 —— 头图里唯一一块「白底深字」，层次一下拉开。
    · 大孕周：白字加一道棕色实投影（贴纸厚度感）；「周」「像西葫芦」换奶油色；「+6天」放进深色小胶囊。 */
-.home-hero .hero-brand{position:relative;filter:drop-shadow(1.3px 0 0 #fff) drop-shadow(-1.3px 0 0 #fff) drop-shadow(0 1.3px 0 #fff) drop-shadow(0 -1.3px 0 #fff) drop-shadow(0 3px 5px rgba(110,30,10,.3))}
-.home-hero .hero-logo{opacity:0;filter:none}
-.home-hero .hero-brand::before{content:"";position:absolute;inset:0;background:#5A2214;
-  -webkit-mask:url(assets/img/db2f99232b39.png) left center/contain no-repeat;mask:url(assets/img/db2f99232b39.png) left center/contain no-repeat}
-.hi-due{height:24px;padding:0 11px 0 9px;background:rgba(255,255,255,.94);border:0;color:#9A3F27;text-shadow:none;box-shadow:0 3px 10px rgba(130,40,20,.18)}
-.hi-due b{color:#E2512E;font-size:15px}
-.hi-heart path{fill:#F0603C}
 .hi-week b{color:#fff;text-shadow:0 2px 0 rgba(140,50,28,.35),0 6px 14px rgba(120,30,10,.25)}
 .hi-unit em{color:#FFE6BF}
 .hi-unit span{display:inline-block;margin-top:4px;padding:1px 6px;border-radius:999px;font-size:11px;opacity:1;background:rgba(110,35,18,.28);color:#FFF1DC;text-shadow:none}
 .hi-unit span:empty{display:none}
 .hi-size{color:#FFE6BF}
+
+/* 2026-10-04 再调：倒计时去掉背景框，只留一行字（♥ + 文案 + 奶油色加大的天数）；孕囊整体轻轻上下浮，配合满幅羊水光影
+   （只是平移，宝宝形状不变；水波遮罩在 hero-fx.js 里每帧现读位置跟着走）。 */
+.hi-due{background:none;border:0;padding:0;height:22px;gap:6px;font-size:12.5px}
+.hi-due b{color:#FFE6BF;font-size:16px}
+.hero-baby{animation:hbFloat 6s ease-in-out infinite}
+@keyframes hbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
+@media (prefers-reduced-motion:reduce){.hero-baby{animation:none}}