37 lines
3.4 KiB
CSS
37 lines
3.4 KiB
CSS
/* 首页头图倒计时（11-03，见 js/hero-cd.js）。只在 .hero-pane.cd 时生效；关掉（未填预产期 / 已出生）就是原来的样子。
|
||
竖向：小标 18 → 数字牌 46 → 时分秒 20 → 孕周一行 20 → 进度条 16，加间距后和旧版总高一样，下面「我的孕期工具」卡不会被顶下去。 */
|
||
.hi-cd{display:none}
|
||
.hero-pane.cd{margin-top:2px}
|
||
.hero-pane.cd .hi-due{display:none}
|
||
.hero-pane.cd .hi-cd{display:flex;flex-direction:column;align-items:flex-start}
|
||
.cd-lb{display:inline-flex;align-items:center;gap:5px;height:18px;font-size:12.5px;font-weight:700;color:#fff;letter-spacing:.5px;white-space:nowrap}
|
||
.cd-lb svg{width:12px;height:12px;color:#FFD9C7;animation:hiBeat 1.6s ease-in-out infinite}
|
||
.cd-row{display:flex;align-items:flex-end;gap:6px;margin-top:5px}
|
||
.cd-d{display:flex;gap:4px}
|
||
/* 一位一块牌：上半亮、下半略暗，中间一道翻页缝 + 两侧小铆点，像机场翻牌钟 */
|
||
.cd-d i{position:relative;display:block;width:34px;height:46px;border-radius:9px;font-style:normal;
|
||
background:linear-gradient(180deg,rgba(255,255,255,.34) 0 50%,rgba(255,255,255,.22) 50% 100%);
|
||
border:1px solid rgba(255,255,255,.45);box-shadow:0 6px 14px -6px rgba(120,30,10,.45),inset 0 1px 0 rgba(255,255,255,.4);
|
||
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden;perspective:200px}
|
||
.cd-d i::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(150,60,35,.28);z-index:2}
|
||
.cd-d i::after{content:"";position:absolute;left:-2px;right:-2px;top:calc(50% - 2px);height:4px;z-index:2;
|
||
background:radial-gradient(circle at 2px 2px,rgba(150,60,35,.35) 1.5px,transparent 2px) left/4px 4px no-repeat,radial-gradient(circle at 2px 2px,rgba(150,60,35,.35) 1.5px,transparent 2px) right/4px 4px no-repeat}
|
||
.cd-d span{display:block;font-size:34px;font-weight:900;line-height:46px;text-align:center;color:#fff;font-variant-numeric:tabular-nums;
|
||
text-shadow:0 2px 0 rgba(140,50,28,.3),0 4px 10px rgba(120,30,10,.22)}
|
||
.cd-d i.flip span{animation:cdFlip .55s cubic-bezier(.3,.7,.4,1)}
|
||
@keyframes cdFlip{0%{transform:rotateX(-90deg);opacity:.2}60%{transform:rotateX(12deg);opacity:1}100%{transform:none}}
|
||
.cd-row em{margin-bottom:3px;font-style:normal;font-size:17px;font-weight:800;color:#FFE6BF}
|
||
/* 时分秒：小毛玻璃格 + 汉字单位 */
|
||
.cd-tk{display:flex;align-items:center;gap:2px;margin-top:6px;height:20px;white-space:nowrap}
|
||
.cd-tk b{min-width:22px;height:20px;padding:0 3px;border-radius:5px;background:rgba(110,35,18,.24);color:#fff;font-size:12.5px;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums;text-shadow:none}
|
||
.cd-tk i{margin:0 3px 0 1px;font-style:normal;font-size:11px;font-weight:700;color:#FFE6BF}
|
||
/* 孕周退成一行小字「孕 26 周 +6天」，不再和倒计时抢主角 */
|
||
.hero-pane.cd .hi-week{height:20px;margin-top:5px;align-items:center}
|
||
.hero-pane.cd .hi-week::before{content:"孕";margin-right:3px;font-size:13px;font-weight:800;color:#FFE6BF}
|
||
.hero-pane.cd .hi-week b{font-size:17px;line-height:20px;letter-spacing:0;text-shadow:0 1px 3px rgba(120,30,10,.28)}
|
||
.hero-pane.cd .hi-unit{flex-direction:row;align-items:center;margin:0 0 0 3px}
|
||
.hero-pane.cd .hi-unit em{font-size:13px}
|
||
.hero-pane.cd .hi-unit span{margin:0 0 0 5px;padding:0 6px;font-size:10.5px;line-height:16px}
|
||
.hero-pane.cd .hi-prog{margin-top:5px}
|
||
@media (prefers-reduced-motion:reduce){.cd-d i.flip span,.cd-lb svg{animation:none}}
|