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

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-04 06:36:23 +00:00
parent 0f73b85f10
commit dca1b69eff
13 changed files with 47 additions and 38 deletions

View File

@@ -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:白色抠图 → 深可可棕字 + 白描边 + 轻投影,跟底栏「记一下」贴纸同一套语言,压在橙底上一眼可见、又不花。
做法:img 留着撑尺寸(透明),::before 用同一张 PNG 当 mask 填棕色;描边/投影是 h1 上的 drop-shadow 叠出来的。
· 倒计时胶囊:半透明白框 → 实心白胶囊、棕红字,「92」用主题橙红加大 —— 头图里唯一一块「白底深字」,层次一下拉开。
· (同日撤回)LOGO 深棕白描边、倒计时白胶囊 —— 用户:「太扎眼」「加背景框也不好」。LOGO 回白字;倒计时去掉框,见下一段。
· 大孕周:白字加一道棕色实投影(贴纸厚度感);「周」「像西葫芦」换奶油色;「+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}}