/* 首页头图倒计时(11-03,见 js/hero-cd.js)。只在 .hero-pane.cd 时生效;关掉(未填预产期 / 已出生)就是原来的样子。 竖向(11-03 二改):「距离见面」竖排挪到数字牌左边、不再单占一行 → 数字牌 46 → 时分秒 20 → 孕周一行 20 → 进度条 16; 省下的一行高度给孕周和进度条往下挪(用户:「跟上面的天数上下有一点距离」)。整组仍在头图里,下面卡片位置不变。 */ .hi-cd{display:none} .hero-pane.cd{margin-top:14px} .hero-pane.cd .hi-due{display:none} .hero-pane.cd .hi-cd{display:flex;flex-direction:column;align-items:flex-start} .cd-lb{display:flex;flex-direction:column;justify-content:center;gap:3px;height:46px;margin-right:2px} .cd-lb b{font-size:13px;font-weight:800;line-height:1;color:#fff;letter-spacing:1px;white-space:nowrap} .cd-row{display:flex;align-items:flex-end;gap:6px} .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:16px;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:9px} @media (prefers-reduced-motion:reduce){.cd-d i.flip span{animation:none}} /* 11-04 用户:「距离见面多少天,那个多少天字体放小一些」→ 数字牌 34×46 → 28×38、字 34 → 27,「天」17 → 15;省下的 8px 给时分秒上方,下面孕周、进度条位置不动 */ .cd-d i{width:28px;height:38px;border-radius:8px} .cd-d span{font-size:27px;line-height:38px} .cd-lb{height:38px} .cd-row em{font-size:15px;margin-bottom:2px} .cd-tk{margin-top:14px}