style(首页头图): LOGO 深棕白描边;倒计时白胶囊、孕周层次;光束摆动加大;水波恢复且避开宝宝 (v26100419)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-04 06:28:24 +00:00
parent a031686ec0
commit 55e293874f
4 changed files with 29 additions and 7 deletions

View File

@@ -4477,3 +4477,21 @@ a.skip:focus{left:16px;top:16px}
.t-badge{min-width:17px;width:auto;height:17px;padding:0 4.5px;box-sizing:border-box;top:2px;left:calc(50% + 6px);
border-radius:999px;border:1.5px solid #fff;color:#fff;font:700 10.5px/14px -apple-system,"PingFang SC",sans-serif;text-align:center;
box-shadow:0 2px 6px rgba(255,59,48,.35)}
/* ============ 2026-10-04 头图文字层次(用户:「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}