/* 首页头图倒计时(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}}