首页星座牌改实体卡片，按火土风水四象上色 (v26100430)

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:26100429 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100430 缓存版本标记：改 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 = '26100429';
+  var VER = '26100430';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 

js/hero-fx.js

@@ -89,6 +89,8 @@
     zEl.innerHTML = '<i>' + (window.zodiacIcon ? window.zodiacIcon(pair[0][2], 10, 2.6) : '') + '</i>' +
       '<b>' + pair.map(x => x[2]).join('·') + '宝宝</b>';
     zNames = pair.map(x => x[2]);
+    // 实体卡片按「象」上色（火 / 土 / 风 / 水，同弹窗主题；见 css .hero-zod.el-*）
+    zEl.className = 'hero-zod el-' + ((window.ZODIAC_ELEMENT || {})[zNames[0]] || 'fire') + ' is-on';
     zEl.setAttribute('aria-label', zNames.join('·') + '宝宝，点开看看');
     zEl.classList.add('is-on');
   }

mama-box.css

@@ -4598,3 +4598,17 @@ a.skip:focus{left:16px;top:16px}
 .svc-grid{display:flex;padding:16px 4px}
 .svc-grid .svc{flex:1 1 0;min-width:0}
 .svc-grid .sv-t{white-space:nowrap;font-size:12px}
+
+/* 星座牌 二版：实体卡片（2026-10-04 用户：「水瓶宝宝、射手宝宝那个用一个实体的卡片，颜色根据水象、火象这种来做」）
+   原来是磨砂半透明胶囊，在羊水上发虚。改成实心圆角小卡：按四象上渐变（同 #modalZodiac 头部的四套色，
+   这里每套取深一档，白字才压得住）+ 顶部一道高光 + 同色投影；左边白底小方块里放对应星座图标（象的主色）。 */
+.hero-zod{height:24px;padding:0 9px 0 4px;gap:6px;border-radius:8px;border:0;
+  -webkit-backdrop-filter:none;backdrop-filter:none;
+  background:var(--zg,linear-gradient(135deg,#FF9A6B,#D9533B));
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 .5px rgba(255,255,255,.35),0 4px 12px var(--zs,rgba(170,60,40,.32))}
+.hero-zod i{width:16px;height:16px;border-radius:5px;background:#fff;color:var(--zk,#D9583C);box-shadow:0 1px 2px rgba(0,0,0,.08)}
+.hero-zod b{font-size:11px;font-weight:700;letter-spacing:1px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.14)}
+.hero-zod.el-fire {--zg:linear-gradient(135deg,#FF9A6B 0%,#EE6744 55%,#CF4A38 100%);--zk:#D9583C;--zs:rgba(190,60,40,.34)}
+.hero-zod.el-earth{--zg:linear-gradient(135deg,#CDB283 0%,#A78A5A 55%,#857048 100%);--zk:#8E7448;--zs:rgba(110,85,45,.32)}
+.hero-zod.el-air  {--zg:linear-gradient(135deg,#9FBDF0 0%,#8796E0 55%,#7378CC 100%);--zk:#6A79CC;--zs:rgba(90,95,190,.32)}
+.hero-zod.el-water{--zg:linear-gradient(135deg,#5DC0D3 0%,#3A90C2 55%,#2E6AA4 100%);--zk:#2F7FAD;--zs:rgba(40,100,160,.34)}