4287 lines
328 KiB
CSS
4287 lines
328 KiB
CSS
|
||
/* ============ 妈妈盒子 · H5 ============ */
|
||
:root{
|
||
--brand:#F4593C;
|
||
--brand-lt:#FF7C5C;
|
||
--brand-dk:#E04A2E;
|
||
/* 设计稿 hero 是「越往下越浅」的暖橘（顶 #FC7A60 → 底 #FAAE9B），
|
||
之前写成了越往下越深，气泡插画一放上去边缘就发暗，这里按取样值改回来 */
|
||
--grad:linear-gradient(150deg,#E85D41 0%,#EC6A4A 45%,#EF7B55 75%,#F0906C 100%);
|
||
--bg:#F8F3EF;
|
||
--card:#fff;
|
||
--ink:#2B2320;
|
||
--ink-2:#6B615B;
|
||
--muted:#72665E;
|
||
--line:#EFE7E1;
|
||
--green:#6E9A56;
|
||
--alert:#D2402A; /* 卡片 warn 标红（胎动偏低/宫缩达阈值/产检过期） */
|
||
--purple:#8B6FE0;
|
||
--blue:#4E85C7;
|
||
/* ---- 「妈妈」这个身份的颜色 ----
|
||
本批从蓝(--blue #4E85C7)换成绿。用户原话：
|
||
「妈妈回信那个背景色，现在不是浅蓝吗？可以变成偏绿色一点。」
|
||
⚠️ 为什么另起一个变量、而不是把 --blue 的值直接改成绿：
|
||
--blue 是**调色板**里的颜色名，把叫 blue 的变量填成绿色，
|
||
以后每个读到它的人都会被骗一次。--mom 是**语义**变量（谁的颜色），
|
||
换色时只动它，调色板保持诚实。
|
||
⚠️ 内置来信屏删除后，回信气泡那套浅绿底（原来的 --mom-bg-1/2）已一并下线；
|
||
这个变量现在只剩 .sec-title.c-blue::before（绿色竖色条）一个消费者。 */
|
||
--mom:#3F7551;
|
||
--r-lg:24px;
|
||
--r-md:18px;
|
||
--r-sm:12px;
|
||
--sh:0 8px 24px rgba(188,120,96,.10);
|
||
--sh-lg:0 14px 40px rgba(180,110,86,.16);
|
||
/* ---- 工具区背后的「妈妈」大字水印 ----
|
||
首页工具区（.tool-dock）的白底上躺着两个很大、很粗、很淡的「妈妈」，
|
||
压在内容底下。它不是纹理，是一枚印章：下半截整个沉在工具卡背后，
|
||
露出来的上面六成刚好够人一眼认出「哦，是妈妈两个字」。
|
||
|
||
⚠️ **全站只有这一枚。** 上一稿三块白底各放一枚，被否了 ——
|
||
三枚同样的字顺着首页排下来，本身又成了一种重复。一枚是印章，三枚是底纹。
|
||
别再往 .today-line / .shelf 上加回去；尺寸怎么定的见 .wm 那条规则。
|
||
|
||
⚠️ 这块地方已经推翻过两版底纹，两版都是被同一句话否掉的：
|
||
第一批「脚丫/星/云/爱心 四种图案散铺」→「太碎了，页面看着特别乱。」
|
||
第二批「等距波点，列距 36px」 →「那个小碎点看着还是太乱。」
|
||
两版的毛病是同一个：**满屏都是小东西**。小东西一多，眼睛就要挨个去认，
|
||
认的过程就是分心的过程。第三版索性反过来 —— 整块地方只放**一个**大东西，
|
||
大到不必去认，扫一眼就过去了。
|
||
**想再往这三块白底上撒任何细碎图案之前，先回头读这三行。**
|
||
|
||
⚠️ 为什么是 DOM 里一个 <span>，不是接着用 background-image：
|
||
前两版走的是 --pat 内联 SVG 背景（这一批已整个删掉）。换成大字之后，
|
||
SVG 背景那条路要靠 <text> 渲染中文 —— 而背景图里的 SVG 拿不到页面的
|
||
字体栈，只能听系统的；万一那台机器在这个渲染上下文里没有中文字体，
|
||
结果是**静悄悄什么都不显示**，页面看着和没做过一样。
|
||
这块地方已经被否两次了，再来一次「用户什么都没看见」太贵。
|
||
DOM 里的普通文字走的是 body 那套字体栈，不会有这种失败方式。
|
||
|
||
⚠️ 颜色别顺手调深。12px 的灰字（--muted #A79C95）在纯白上对比度是 2.68，
|
||
压到 #F9F3EE 上掉到 2.44，再深一档 #F7EFE8 就只剩 2.36。
|
||
水印和前两版底纹不是一回事 —— 它是一大片实心色，**正压在**
|
||
.dock-note 那行小灰字底下，不像波点只是零星擦过去。
|
||
另一头是：大面积本来就比小图案显眼得多，所以颜色可以、也应该
|
||
比波点那版更淡。深浅只改这一个变量。 */
|
||
--wm-color:#F9F3EE;
|
||
--wm-size:132px;
|
||
--tabh:78px; /* 悬浮药丸 58px + 底部留白 14px + 余量 */
|
||
--ease:cubic-bezier(.32,.72,0,1);
|
||
/* 宝宝写的字：挑系统自带里最「歪歪扭扭」的手写/卡通体。
|
||
翩翩体（HanziPen SC）是 iOS/macOS 自带的儿童手写体，笔画有粗细起伏、
|
||
字面故意不方正，最像小朋友写的；手札体（Hannotate）次之；
|
||
Windows 退到华文彩云/幼圆；一路兜底到圆体，绝不掉进宋体。
|
||
⚠️ 内置来信屏删除后，这个变量现在只剩首页 slogan（.hero-slogan）在用。 */
|
||
--font-kid:"HanziPen SC","翩翩体-简","HanziPen TC","Hannotate SC","手札体-简",
|
||
"Yuanti SC",YouYuan,"幼圆","Hiragino Maru Gothic ProN",
|
||
"PingFang SC","Microsoft YaHei",sans-serif;
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
|
||
html,body{height:100%}
|
||
body{
|
||
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
|
||
background:#E8DED6;color:var(--ink);-webkit-font-smoothing:antialiased;
|
||
display:flex;align-items:center;justify-content:center;overflow:hidden;
|
||
}
|
||
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
|
||
svg{fill:currentColor}
|
||
b{font-weight:700}
|
||
em{font-style:normal}
|
||
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
|
||
|
||
/* ---------- 无障碍 / 触控 / 动效（WK 审计补齐） ---------- */
|
||
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
|
||
html,body,button,a,input,textarea,select{-webkit-touch-callout:none;touch-action:manipulation}
|
||
button,a,input,textarea,select,summary,[tabindex]{transition:box-shadow .15s ease}
|
||
:focus{outline:none}
|
||
:focus-visible{outline:3px solid rgba(244,89,60,.55);outline-offset:2px;border-radius:6px}
|
||
.modal,.sheet,.search-layer,.scrim{overscroll-behavior:contain}
|
||
a.skip{position:absolute;left:-9999px;top:auto;z-index:2000;background:var(--brand);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700}
|
||
a.skip:focus{left:16px;top:16px}
|
||
/* 橙渐变上的白字：加深对比 + 轻微投影提可读性 */
|
||
.page-hero,.me-top,.home-hero,.hero-main,.week-num,.hd-card,.lc-title,.lc-prev{text-shadow:0 1px 3px rgba(120,30,10,.28)}
|
||
@media (prefers-reduced-motion:reduce){
|
||
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
|
||
}
|
||
|
||
/* ---------- 手机外框 ---------- */
|
||
.phone{
|
||
position:relative;width:430px;height:932px;max-height:100vh;
|
||
background:var(--bg);overflow:hidden;
|
||
border-radius:46px;box-shadow:0 40px 90px rgba(120,70,50,.28),0 0 0 11px #16110f,0 0 0 13px #2e2724;
|
||
}
|
||
@media (max-width:520px),(max-height:940px){
|
||
.phone{width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;box-shadow:none}
|
||
}
|
||
|
||
/* ---------- 屏幕容器 ---------- */
|
||
.screens{position:absolute;inset:0}
|
||
.screen{
|
||
position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
|
||
-webkit-overflow-scrolling:touch;background:var(--bg);
|
||
padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 24px);
|
||
opacity:0;visibility:hidden;transform:scale(.985);
|
||
transition:opacity .28s ease,transform .32s var(--ease),visibility .28s;
|
||
}
|
||
.screen::-webkit-scrollbar{display:none}
|
||
.screen.is-active{opacity:1;visibility:visible;transform:none;z-index:2}
|
||
|
||
/* ============ 通用 ============ */
|
||
.icon-btn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;position:relative;color:#fff;transition:transform .18s,background .2s}
|
||
.icon-btn.glass{background:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
|
||
.icon-btn.plain{background:none;font-size:20px}
|
||
.icon-btn:active{transform:scale(.9)}
|
||
/* .icon-btn.has-dot 已删：全站唯一的使用者是首页右上角那个消息圆钮，钮没了规则也没人用 */
|
||
.chev{font-style:normal;color:#C9BFB8;font-size:19px;line-height:1}
|
||
|
||
/* 模块主标题：前面加一根竖色条做修饰，并把上间距从 26 拉到 36，
|
||
让相邻模块之间有明显的呼吸感，用户一眼能看出这是几个独立模块 */
|
||
.sec-title{
|
||
font-size:17.5px;font-weight:800;letter-spacing:-.2px;margin:36px 0 14px;
|
||
display:flex;align-items:center;gap:8px;
|
||
}
|
||
.sec-title::before{
|
||
content:"";flex:0 0 auto;width:4px;height:18px;border-radius:3px;
|
||
background:var(--brand);box-shadow:0 2px 6px rgba(244,89,60,.35);
|
||
}
|
||
.sec-title.c-green::before{background:var(--green);box-shadow:0 2px 6px rgba(110,154,86,.35)}
|
||
.sec-title.c-purple::before{background:var(--purple);box-shadow:0 2px 6px rgba(139,111,224,.35)}
|
||
.sec-title.c-blue::before{background:var(--mom);box-shadow:0 2px 6px rgba(63,117,81,.35)}
|
||
/* 标题后面挂的「（必填）」。目前只有「我的 → 孕期信息」一处在用。
|
||
⚠️ 用 --brand 不用 --muted：这是一句**要求**不是附注，灰掉就没人填了。
|
||
⚠️ letter-spacing 显式归 0 —— .sec-title 自己带 -.2px，那是给 17.5px 大字收紧用的，
|
||
12px 的小字再收会把括号和字挤在一起。
|
||
⚠️ 不设 margin-left：靠 .sec-title 的 gap:8 拉开；.sec-more 那条 margin-left:auto
|
||
会把「编辑 ›」推到最右，中间的空档全归它。 */
|
||
.sec-req{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--brand);letter-spacing:0}
|
||
.sec-more{margin-left:auto;font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap}
|
||
.sec-more:active{opacity:.5}
|
||
/* 这里原来还有一条 .sec-sub（挂在 .sec-title 底下的一句灰色说明）。
|
||
全站只有首页那四处在用，首页换骨架之后四句说明各自搬进了模块内部
|
||
（.dock-note / .tl-h-note / .ab-foot i / .sh-note），这条就成了死规则，删掉。
|
||
⚠️ .sec-title 本身不能删 —— 「我的」页还有两处在用。 */
|
||
|
||
.ripple{position:relative;overflow:hidden;transition:transform .16s var(--ease)}
|
||
.ripple:active{transform:scale(.975)}
|
||
.rp{position:absolute;border-radius:50%;background:rgba(244,89,60,.16);transform:translate(-50%,-50%) scale(0);animation:rp .55s ease-out forwards;pointer-events:none}
|
||
@keyframes rp{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
|
||
|
||
.chips-row{display:flex;gap:9px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
|
||
.chips-row.wrap{flex-wrap:wrap;overflow:visible}
|
||
.chips-row::-webkit-scrollbar{display:none}
|
||
.chip{
|
||
flex:0 0 auto;padding:8px 17px;border-radius:20px;background:#fff;
|
||
font-size:14px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);
|
||
transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
|
||
}
|
||
.chip.is-active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 5px 14px rgba(244,89,60,.3)}
|
||
.chip:active{transform:scale(.94)}
|
||
/* 「收藏」不是分类，用金色星号和左边那几个分类 chip 拉开一点区别 */
|
||
.chip-fav{color:#B8912C}
|
||
.chip-fav.is-active{color:#fff;background:var(--brand);border-color:var(--brand)}
|
||
|
||
/* ============ 首页 · Hero ============
|
||
全部坐标取自设计稿 ______v25（857px 宽 = 428.5pt @2x），CSS px = 设计 px ÷ 2：
|
||
品牌「妈妈盒子」 x33 y27..58 → left 16.5 top 13.5 ≈21px
|
||
（设计稿右上角还有个消息圆钮 x762.7..827.3 y20.7..86，已删，见 index.html）
|
||
进度环 圆心(202,188) 外径158 描边8 → left 61.5 top 54.5 79×79 描边4
|
||
「+3天」 x293..338 y187..205 → left 146.5 top 93.5 ≈13px
|
||
天数文案 x67 y297..314 → left 33.5 top 148.5 ≈15px
|
||
气泡宝宝插画 x424..810 y46..348 → right 23 top 23 193×151
|
||
hero 橙色区底缘：中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px
|
||
⚠️ 上面这些是**设计稿**的数，不是现在的实现值。设计稿里没有 slogan，
|
||
加进去之后品牌字以下整列都下移了，实际纵向排布以 .home-hero 里那笔账为准。 */
|
||
/* 2026-09-30 头图 = 孕 25 周（母婴作图 v7，替代 v6：用户否了 v6 的背对造型，改回 v5 姿势——侧身、闭眼睡、
|
||
小手在嘴边、正脸可见；画风稍卡通，脐带从囊壁右上方垂下、更清晰、全程不动；不规则羊水囊、暖桃底；镜头固定）。
|
||
画幅 16:9（静帧 1280×720），构图、囊位置和 v6 一致，所以摆位数全部沿用。
|
||
背景 assets/img/5aec5c71b009.jpg（1560×750 = 3 倍图 520×250）= 静帧 yun25w-still.png 缩到 .88，
|
||
截取块中心 (656,360) 摆在 (1240,375)；左/上/下不够的地方按边缘色拉伸补齐并羽化。
|
||
图高钉死 = 橙区高、右对齐，屏宽 ≤520 都铺得满；再宽就露底色 #dc8569（=图左缘色）。
|
||
会动的宝宝是叠在上面的同源 GIF，见 .hero-baby。
|
||
上面叠一层很淡的暖色左深右透渐变，只为让左边白字（孕周环、天数卡）再稳一点。
|
||
形状（高度、底部椭圆弧）不变。 */
|
||
.home-hero{
|
||
position:relative;color:#fff;overflow:hidden;
|
||
background:
|
||
linear-gradient(90deg,rgba(150,55,35,.20) 0%,rgba(150,55,35,.07) 38%,rgba(150,55,35,0) 58%),
|
||
url(assets/img/5aec5c71b009.jpg) right center/auto 100% no-repeat,
|
||
#dc8569;
|
||
padding:env(safe-area-inset-top) 15px 0 16px;
|
||
/* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的，
|
||
现在气泡补全成整圆（高 189.5），橙区必须够高才不会被 overflow:hidden 切掉。
|
||
|
||
── 现在是 250：slogan 挪到品牌字右边之后重算的 ──
|
||
这一竖列是一笔连着的账，橙区高度是账的**结果**，不是可以随手调的数字：
|
||
hero-top 10 + 32 → 42 品牌字 + slogan 并排的那一排
|
||
hero-main 28 + 79 → 149 孕周环
|
||
hero-days 17 + 52 → 218 天数玻璃卡
|
||
letter-card 橙区底 −16 → 234 「宝宝来信」卡顶
|
||
卡顶 234 − 卡底 218 = 16px 安全间隙（旧版 13，同一个量级）。
|
||
|
||
⚠️ 橙区**没能**跟着 slogan 一起缩回 236，是被气泡拖住的：
|
||
slogan 从「独占两行」变成「和品牌字同一行」，本来省出 32px。
|
||
但同一行意味着字底落到 y=34，而气泡圆顶原来就在 y=26 ——
|
||
字会直接压在气泡上。（量过 hero-art.png 的 alpha：那是实心硬边整圆，
|
||
α≥8 和 α≥220 的左缘只差 1px，没有可以压上去的透明薄边。）
|
||
于是气泡整体下移 26→40，下缘跟着从 215.5 走到 229.5，
|
||
而下缘必须留在「宝宝来信」卡顶之上（旧版留 4.5px，这里同样留 4.5）：
|
||
229.5 + 4.5 = 234 = 卡顶 = 橙区高 − 16 → 橙区至少 250。
|
||
省下的 32px 里只有 2px 能还给橙区（252→250），
|
||
另外 30px 退回给中间两处空隙（hero-main 10→28、hero-days 8→17），
|
||
也就是回到没有 slogan 那一版的疏密感。
|
||
⚠️ 动 slogan 的字号/行高、动气泡的 top、动上面任一个 margin，
|
||
都要把这四行连同上面这段气泡账一起重算。 */
|
||
height:calc(250px + env(safe-area-inset-top));
|
||
border-radius:0 0 50% 50% / 0 0 44px 44px;
|
||
}
|
||
.petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
|
||
.petals i{position:absolute;width:8px;height:8px;background:rgba(255,255,255,.5);border-radius:60% 0 60% 0;animation:petal linear infinite}
|
||
@keyframes petal{0%{transform:translateY(-20px) rotate(0);opacity:0}15%{opacity:.8}100%{transform:translateY(340px) rotate(320deg);opacity:0}}
|
||
.hero-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;height:32px;margin-top:10px}
|
||
.hero-brand{font-size:21px;font-weight:800;letter-spacing:.5px;line-height:1}
|
||
.hero-brand{margin:0;display:flex}
|
||
/* LOGO 高 30（10-01 用户嫌 40 太大、不协调，缩到 30），比 .hero-top 的 32 矮，居中放，这一排的竖向账（见 .home-hero 注释）不动。
|
||
投影和头图白字的 text-shadow 同色系，压在浅色羊水囊光晕上也看得清。 */
|
||
.hero-logo{display:block;height:30px;width:auto;margin:0;filter:drop-shadow(0 1px 3px rgba(120,30,10,.28))}
|
||
/* slogan 对齐 LOGO 的中文那一行（中文在上、拼音在下，整块中线偏低）。用 relative 挪，不进布局，气泡那笔账不受影响 */
|
||
.home-hero .hero-slogan{position:relative;top:-2px}
|
||
/* 三个二级页的左上角标题已删除，这一排只剩右侧按钮。
|
||
.hero-top 是 space-between 且与首页共用（首页左边还有「妈妈盒子」），
|
||
所以不能改父级对齐，只能让按钮组自己靠右 */
|
||
.hero-actions{display:flex;gap:8px;margin-left:auto}
|
||
|
||
/* 品牌字**右边**的 slogan（以前是它下面的两行，这一批挪上来了）。
|
||
|
||
⚠️ margin-right:auto 是这条规则的关键，不是随手加的间距。
|
||
父级 .hero-top 是 space-between 且四页共用，不能动它的对齐；
|
||
auto 边距把那一排的富余空间全吃掉，第二个孩子就不会被甩到最右边，
|
||
而是紧贴着品牌字排。删了它，slogan 会跑到屏幕右上角、压在气泡上。
|
||
（同一个路子见上面的 .hero-actions{margin-left:auto}。）
|
||
|
||
⚠️ nowrap 必须留着。CJK 可以在任意两字之间换行，一旦允许浏览器自己挑，
|
||
10 个字会折成两行 —— 而这一排是写死的 height:32，第二行会直接溢出，
|
||
并且横着压到气泡上（气泡只让开了一行的高度，见 .home-hero 那笔账）。
|
||
|
||
⚠️ 字号 13 / 行高 16 都写死成 px，不是倍数：橙区那笔竖列账和
|
||
「字底 y=34 < 气泡顶 y=40」这条净空都是按这两个数算的。
|
||
|
||
字体走 --font-kid（翩翩体 / 手札体那套手写体）—— 用户要「不要那种规规矩矩的
|
||
字体」。这套字体栈全站共用一份（原先来信正文也用它），不新写几乎一样的第二套：
|
||
两套栈只要有一套漏了某个平台，就会出现「同一台机器上两处手写体长得不一样」，
|
||
而这种漂移没人会去对。手写体笔画细，白字压在橙色渐变上容易发虚，
|
||
所以 font-weight 提到 700、opacity 给到 .92（比旧版 .88 实一点）。 */
|
||
.hero-slogan{position:relative;z-index:3;margin:0 auto 0 9px;
|
||
font-family:var(--font-kid);
|
||
font-size:13px;line-height:16px;font-weight:700;letter-spacing:.3px;
|
||
opacity:.92;white-space:nowrap}
|
||
|
||
/* margin-top 曾被 slogan 压到 10，slogan 挪到品牌字右边后退回 28
|
||
（比原始的 24 还多 4，是气泡下移之后腾出来要填的空）。
|
||
见 .home-hero 里那笔竖列账 —— 这个数不是独立的，改它要连着改橙区高度。 */
|
||
.hero-main{position:relative;z-index:3;display:flex;align-items:flex-start;gap:6px;margin:28px 0 0 45.5px}
|
||
.week-ring{position:relative;width:79px;height:79px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.07)}
|
||
.ring-svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
|
||
.ring-bg{fill:none;stroke:rgba(255,255,255,.26);stroke-width:6}
|
||
.ring-fg{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.4s var(--ease)}
|
||
.week-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
|
||
.week-num b{font-size:38px;font-weight:800;line-height:1;letter-spacing:-1px}
|
||
.week-num span{font-size:12px;opacity:.92;margin-top:3px}
|
||
.week-plus{font-size:13px;font-weight:600;opacity:.95;margin-top:37px}
|
||
/* 首页 hero 主插画：取自设计稿像素。设计稿里气泡下缘被白卡遮住，
|
||
已按拟合圆（设计坐标 圆心 620.1,246.3 半径 187.4）补全为整圆，
|
||
378px 图 → 189.5 CSS px。
|
||
|
||
⚠️ top 由 26 改成 40，是被 slogan 逼的，不是调构图。
|
||
slogan 挪到品牌字右边之后，字底落在 y=34；气泡圆顶原来就在 y=26，
|
||
白字会直接盖在气泡上。解过这张 PNG 的 alpha 通道确认过：
|
||
这幅画就是**实心整圆、边缘是硬的**（α≥8 与 α≥220 的左缘只差 1px），
|
||
没有可以让字压上去的透明薄边，所以只能整幅往下让。
|
||
下移之后圆心 (屏宽−25−94.75, 134.75)、下缘 40+189.5=229.5，
|
||
必须留在「宝宝来信」卡顶（234）之上 —— 这就是橙区高必须 ≥250 的来源。
|
||
改 top 前先读 .home-hero 里那笔竖列账。 */
|
||
/* 会动的宝宝（2026-10-01，v8，静帧同 v7）：GIF assets/img/250bb167b0f1.gif = 原 GIF（800×450，12fps，4 秒无缝循环）
|
||
截 x185 y0 起 450×450（整高），不缩放，按首帧原调色板无抖动重映射，2.1MB。v8 动作加了整体摇摆，
|
||
宝宝区域约在原 GIF x290..530 y95..390；实测运动像素全在遮罩 80% 实心半径 180px 内（之外只有囊壁极淡噪点），包得住。
|
||
摆位：背景里静帧缩了 .88（静帧是 GIF 的 1.6 倍），这块 = 静帧 720 → 634 画布像素，左上角落在 (923,58)，
|
||
换算成橙区高 H：宽高 634/750 = .8453H，顶 58/750 = .0773H，右 (1560−1557)/750 ≈ .004H。
|
||
背景就是同一画面的静帧、镜头固定，所以只需一圈宽羽化遮罩（80%→100%）把方块边化掉，
|
||
囊里光点在羽化圈冻结成静帧也看不出来。加载完之前 opacity:0，JS 收到 load 再淡入，
|
||
没加载出来就一直是背景那一帧。用户要求：囊不动，只让宝宝自己动 —— 所以这一层没有任何 transform 动画。 */
|
||
.hero-baby{position:absolute;z-index:2;
|
||
top:calc((250px + env(safe-area-inset-top)) * .0773);
|
||
right:calc((250px + env(safe-area-inset-top)) * .004);
|
||
width:calc((250px + env(safe-area-inset-top)) * .8453);
|
||
height:calc((250px + env(safe-area-inset-top)) * .8453);
|
||
pointer-events:none;user-select:none}
|
||
.hero-kid{position:absolute;inset:0;width:100%;height:100%;
|
||
object-fit:cover;background:transparent;opacity:0;transition:opacity .8s ease;
|
||
-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);
|
||
mask-image:radial-gradient(closest-side,#000 80%,transparent 100%)}
|
||
.hero-kid.is-on{opacity:1}
|
||
/* 系统开了「减少动态效果」就全部停下：这类装饰性循环动画是前庭不适的常见诱因 */
|
||
@media (prefers-reduced-motion:reduce){
|
||
.hero-kid{display:none}
|
||
}
|
||
|
||
/* 天数文案：一张毛玻璃小卡，不再是裸字浮在橙底上。
|
||
⚠️ 这块的高度是有硬预算的，改字号前先算一遍：
|
||
橙区固定 250px，而「宝宝来信」卡 margin-top:-16 → 卡顶落在 y=234，
|
||
且它横跨 x 75..324，和这张小卡（x 17.5..~158）左半边是重叠的。
|
||
往上推：hero-top 42 + hero-main(28+79) = 149，本块 margin-top 17 → 顶在 166。
|
||
所以卡身高度必须 ≤ 68px 才留得出安全间隙。
|
||
行高全部写死成 px 而不是倍数，就是为了让这笔账可算、不随字体变。
|
||
当前：padding 7+8 + who 16 + gap 1 + tail 20 = 52 → 底边 218，离 234 还有 16px。
|
||
（margin-top 曾为 slogan 压到 8，slogan 挪走后退回 17，见 .home-hero 里的竖列账） */
|
||
.hero-days{position:relative;z-index:3;margin:17px 0 0;padding-left:17.5px;max-width:196px}
|
||
.hd-card{display:inline-flex;flex-direction:column;gap:1px;padding:7px 13px 8px;border-radius:16px;
|
||
background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3);
|
||
box-shadow:0 6px 18px rgba(163,60,38,.13);
|
||
-webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25)}
|
||
/* 不支持 backdrop-filter 的机器上，半透明白会发灰、字浮不起来，
|
||
把底色调实一点把对比度补回来 */
|
||
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
|
||
.hd-card{background:rgba(255,255,255,.26)}
|
||
}
|
||
/* gap 从 5px 改成 0，那 5px 挪到 .hd-heart 的 margin-right 上：
|
||
现在这一行是「♥ 小名 + 在妈妈肚子里」，小名和后半句必须**贴着**，
|
||
留着 gap:5px 会在中间豁开一道缝，读起来像两个词。 */
|
||
.hd-who{display:flex;align-items:center;gap:0;font-size:13px;font-weight:700;opacity:.95;line-height:16px;min-width:0}
|
||
/* ⚠️ 小名那格是 maxlength="12"。12 字 ×14px = 168px，加上 ♥ 和「在妈妈肚子里」
|
||
远超 .hero-days 的 max-width:196px。这一行是 flex（默认不换行），
|
||
不给截断就会直接溢出到旁边的插画上。
|
||
截断的优先级放在**小名**上而不是后半句：小名被截成「小汤圆宝宝…」还认得出，
|
||
后半句被截掉则整句话不成话。 */
|
||
.hd-who b{font-size:14px;font-weight:800;letter-spacing:.2px;
|
||
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
/* 后半句不参与压缩，永远完整 */
|
||
.hd-where{flex:0 0 auto}
|
||
.hd-heart{flex:0 0 auto;display:block;margin-right:5px}
|
||
/* 整体 nowrap：这张卡就是按这一行的宽度定的，断行会把数字甩下去 */
|
||
.hd-tail{white-space:nowrap;font-size:12.5px;opacity:.88;line-height:20px}
|
||
.hd-tail b{font-size:17px;font-weight:800;letter-spacing:-.3px;opacity:1;margin:0 1px}
|
||
|
||
/* ===== 头部左侧 2026-10-01 改版：倒计时胶囊 / 大孕周 / 水果进度条 / 玻璃卡（结构与竖向账见 index.html .hero-pane 注释）=====
|
||
旧的 .hero-main / .week-ring / .hero-days 已不在页面上，相关规则保留无害。 */
|
||
.hero-pane{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;
|
||
width:172px;margin:12px 0 0 8px;text-shadow:0 1px 3px rgba(120,30,10,.28)}
|
||
.hi-due{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px 0 8px;border-radius:999px;
|
||
font-size:11.5px;font-weight:700;white-space:nowrap;
|
||
background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.35)}
|
||
.hi-due b{font-size:13.5px;font-weight:900;margin:0 1px;color:#FFF3C4}
|
||
.hi-heart{flex:0 0 auto;display:block;animation:hiBeat 1.6s ease-in-out infinite}
|
||
@keyframes hiBeat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.25)}30%{transform:scale(.95)}}
|
||
.hi-week{display:flex;align-items:flex-end;height:50px;margin-top:6px}
|
||
.hi-week b{font-size:54px;font-weight:900;line-height:46px;letter-spacing:-2px;font-variant-numeric:tabular-nums}
|
||
.hi-unit{display:flex;flex-direction:column;justify-content:flex-end;margin:0 0 3px 5px;line-height:1}
|
||
.hi-unit em{font-style:normal;font-size:17px;font-weight:800}
|
||
.hi-unit span{margin-top:3px;font-size:12px;font-weight:700;opacity:.92}
|
||
.hi-prog{display:flex;align-items:center;gap:8px;width:100%;height:16px;margin-top:8px}
|
||
.hi-bar{position:relative;flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.28)}
|
||
.hi-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;
|
||
background:linear-gradient(90deg,rgba(255,255,255,.7),#fff);box-shadow:0 0 8px rgba(255,255,255,.55);
|
||
transition:width 1.4s var(--ease)}
|
||
.hi-knob{position:absolute;right:-9px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
|
||
display:grid;place-items:center;font-size:12px;line-height:1;text-shadow:none;
|
||
background:#fff;box-shadow:0 2px 6px rgba(150,50,30,.3);animation:hiBob 2.4s ease-in-out infinite}
|
||
.hi-knob:empty{display:none}
|
||
@keyframes hiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
|
||
.hi-size{flex:0 0 auto;font-size:11.5px;font-weight:700;opacity:.95;white-space:nowrap}
|
||
.hi-size:empty{display:none}
|
||
.hero-pane .hd-card{margin-top:10px;padding:7px 12px 8px}
|
||
.hero-pane .hd-who{font-size:12.5px}
|
||
.hero-pane .hd-who b{font-size:13.5px;margin-right:1px}
|
||
/* 产后：「已出生」三个字当主角太宽，收一号；单位留空 */
|
||
.hero-pane.is-born .hi-week b{font-size:40px;letter-spacing:0}
|
||
@media (prefers-reduced-motion:reduce){.hi-heart,.hi-knob{animation:none}.hi-fill{transition:none}}
|
||
/* 2026-10-01 二次调整（用户：「LOGO 下边、小孩左边太拥挤」）：四层减成三层，留白拉开。
|
||
去掉底下那张「晓晓在妈妈肚子里 / 已经生活了 N 天」玻璃卡 —— 223 天 = 31 周 +6 天，和大数字是同一件事说两遍，
|
||
还多一个边框。DOM 保留（JS 照写 heroWho/heroDays，产后态也不用改），只是不显示。
|
||
剩下：倒计时胶囊 → 大孕周 → 水果进度条，整组往下放一点、间距加大，竖向落在 LOGO 和「宝宝来信」卡之间的中段。 */
|
||
.hero-pane{margin-top:20px}
|
||
.hero-pane .hd-card{display:none}
|
||
.hi-week{margin-top:12px}
|
||
.hi-prog{margin-top:14px}
|
||
|
||
/* 「宝宝来信」卡：设计稿 x150..648 → left 75 · 宽 249 · 高 80。
|
||
气泡补全成整圆后下缘到 215.5，卡顶必须 ≥215.5 才不会再压住宝宝，
|
||
故上移量由 34.5 改为 16（橙区 252 − 16 = 卡顶 236）。
|
||
橙区因 slogan 从 236 加到 252 之后，卡顶跟着从 220 落到 236，
|
||
离气泡下缘 215.5 更远了，这一条只会更安全，不用动。 */
|
||
.letter-card{
|
||
position:relative;z-index:6;display:flex;align-items:center;gap:9px;
|
||
width:249px;height:80px;margin:-16px 0 0 75px;
|
||
background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
|
||
border-radius:20px;padding:0 12px 0 13.5px;box-shadow:0 10px 26px rgba(150,60,40,.16);
|
||
}
|
||
/* 没有未读时整张收起来（hideLetterCard() 挂的类）。
|
||
这个库里没有全局 .hide，都是逐个元素声明的（.moment.hide / .rl-gift.hide 同一个路子）。 */
|
||
.letter-card.hide{display:none}
|
||
/* 信封外面包一层，只为了给「有新回信」的小红点一个定位参照 */
|
||
.lc-envwrap{position:relative;flex:0 0 auto;line-height:0}
|
||
.lc-env{width:64px;height:auto;display:block;filter:drop-shadow(0 4px 8px rgba(200,90,70,.22))}
|
||
.letter-card.has-new .lc-envwrap::after{
|
||
content:"";position:absolute;top:2px;right:-1px;width:10px;height:10px;border-radius:50%;
|
||
background:var(--brand);box-shadow:0 0 0 2.5px #fff;animation:newPulse 1.6s var(--ease) infinite;
|
||
}
|
||
@keyframes newPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
|
||
/* 卡内正文固定三行：标题 / 摘要 / 去看看。overflow:hidden 兜底，
|
||
哪行文案再长也不会挤出第四行 */
|
||
.lc-body{min-width:0;flex:1;overflow:hidden}
|
||
.lc-title{font-size:16px;font-weight:800;color:var(--ink);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.lc-desc{font-size:11.5px;color:var(--ink-2);margin:4px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
/* 尖括号必须跟文字同行：宝宝回信后这行会变长，之前它会被挤到下一行单独站着 */
|
||
.lc-link{display:flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;color:var(--brand);white-space:nowrap}
|
||
.lc-link span{min-width:0;overflow:hidden;text-overflow:ellipsis}
|
||
.lc-link i{flex:0 0 auto;font-style:normal}
|
||
|
||
/* ============ 首页 · body ============ */
|
||
.home-body{padding:0 26px}
|
||
/* ⚠️ 这两条原来挂在 .sec-title 上。首页不再有 .sec-title 了，选择器必须跟着换到
|
||
新的第一块 .tool-dock —— 忘了换不会报错，只会静默失效（来信卡收起来时
|
||
头图底下那 64px 的洞补不回来），所以 smoke 里专门钉了一条。 */
|
||
/* 这两条写成「谁是第一块就给谁」：2026-09-30 曾在工具区前加过「孕期每日小打卡」，
|
||
同日按用户要求删掉，第一块又回到 .tool-dock。 */
|
||
.home-body>:first-child{margin-top:21px}
|
||
/* 来信卡收起来时，它原本占的 64px 流高（margin-top:-16 + height:80）没了，
|
||
只剩这 21px 顶着一大片橙色头图，太挤。补到 30px。
|
||
走类名而不是 :has()，老一点的移动端浏览器上 :has() 不一定有。 */
|
||
.home-body.no-letter>:first-child{margin-top:30px}
|
||
.page-body{padding:0 18px;margin-top:-46px;position:relative;z-index:5}
|
||
.page-body.no-top{margin-top:8px}
|
||
|
||
/* ============ 首页三大块的公共外壳 ============ */
|
||
/* 上一稿这三块各造了一种底：米色托盘 / 没有容器 / 白气泡 + 糖果卡，
|
||
四种表面语言堆在一屏里，结果就是「不规矩」。
|
||
这一稿收敛成一条规矩：**结构可以各不相同，表面必须一模一样**。
|
||
三块统一是「白色通栏色块」—— 左右各吃掉 .home-body 的 26px 内边距顶到屏幕边缘，
|
||
块与块之间露出米色页底当缝。结构上的差别（宫格 / 时间线 / 横向卡带）一点没动，
|
||
变化留在骨架里，表面不掺和，这样才是既不单调又不乱。
|
||
颜色只允许出现在小构件上：工具图标块、书封、时间线圆点、AI 气泡、各种胶囊。
|
||
|
||
⚠️ padding 左右必须正好等于 26，抵回负外边距，里面的内容才和页面其余部分对齐 ——
|
||
对齐的是内容，出血的是底色，这两件事要分开。
|
||
⚠️ 三块的圆角、底色、左右内边距改成在这里一处定义。以后要调，改这一条，
|
||
别再回到各自的规则里单独写，那正是上一稿乱掉的原因。 */
|
||
.tool-dock,.game-promo,.preg-tips,.today-line,.shelf{
|
||
margin:0 -26px;padding:16px 26px 18px;border-radius:26px;
|
||
background-color:#fff;
|
||
/* ⚠️ 这两条是一对，缺一不可，而且必须一起看：
|
||
它们让每一块自己成为一个**层叠上下文**，好让块里那枚 .wm（大字水印）
|
||
用 z-index:-1 停在「白底之上、内容之下」这一层。
|
||
position:relative 单写不够 —— z-index 是 auto 时不建层叠上下文，
|
||
-1 就会一路掉到这块白底的**后面**去，水印整个消失。
|
||
所以这里的 z-index:0 看着像句废话，其实是水印能不能显示的开关。 */
|
||
position:relative;z-index:0;
|
||
}
|
||
/* 块间距。给后两块，第一块的上间距另有规则（来信卡收放要用）。
|
||
⚠️ 这是**块与块之间**的缝。某一块自己内部觉得挤，要调的是那块的 padding，
|
||
不是这里 —— 改这里会把三块的关系一起改掉。 */
|
||
.tool-dock,.game-promo,.preg-tips,.today-line,.shelf{margin-top:16px}
|
||
|
||
/* ===== 后两块的暖色渐变底（本批新增）=====
|
||
用户原话：「在那个宝宝的今日脚印那块，稍微给背景它加一点渐变」
|
||
「本周孕育指南的也是……但不用加那么重」
|
||
—— 所以两块同一套形状、不同强度；.tool-dock **保持纯白**，用户没提，
|
||
而且它背后压着那枚「妈妈」大字水印，底色一动水印的浓淡就得重调。
|
||
|
||
⚠️⚠️ 角度必须是 90deg，而且左边 32% 必须保持**纯白**。这不是审美选择，
|
||
是被「今日脚印」那条时间线的实现方式逼出来的硬约束：
|
||
时间线是一条 1.5px 的竖线（.today-line::before），线上那些圆点靠
|
||
**一圈不透明的外壳底色**把线「咬断」，一共四处，全部写死 #fff：
|
||
.tl-h-dot box-shadow 0 0 0 3.5px #fff … 0 0 0 8px #fff（还负责盖住线头）
|
||
.st-dot box-shadow 0 0 0 3px #fff
|
||
.ab-dot box-shadow 0 0 0 3px #fff
|
||
.ai-bubble::after background:#fff（把最后一个点以下那截线擦掉）
|
||
这四处全都钉在竖线那一列（--tl-x ≈ 63.5px，算上光晕最远到 x≈76px）。
|
||
底色一旦在那一列变成暖色，这四处就成了四块**白斑**压在暖底上 ——
|
||
而且是「看着像渲染没刷新」的那种，不是「颜色不好看」。
|
||
90deg 的渐变颜色**只跟 x 有关、与 y 和卡高无关**，才给得出一句
|
||
可验证的保证：x < 32% 之内恒为 #fff。斜着走（比如 150deg）就不行 ——
|
||
同一列的顶部和底部会落在渐变的不同位置，卡一变高约束就悄悄破了。
|
||
余量账（最窄的 320 屏，外壳出血后宽 336px）：
|
||
白区 = 336 × 32% = 107.5px，光晕最远 76px，余 31.5px。
|
||
屏越宽白区越宽（390 屏 130px），320 是最紧的一档，够。
|
||
⚠️ 要改角度或起止位置，先把上面四处 #fff 一起解决掉，否则一定出白斑。
|
||
|
||
⚠️ .shelf 那块**没有**这个约束（它的书卡各自带不透明底色，叠压头像描的边
|
||
走 --sb-bg，都不依赖外壳）。这里仍写成同样的 32% 白区，纯粹是为了让上下
|
||
相邻的两块「渐变从同一个位置开始」—— 起点不齐会看着像没对齐的意外。
|
||
别把它当成 .shelf 自己的技术要求。
|
||
|
||
⚠️ 用 background-image 而不是 background 简写：简写会把上面那条公共规则里的
|
||
background-color:#fff 一起清掉，渐变要是哪天被覆盖或不支持，就直接透出
|
||
页面的米色底了。分开写，白底始终在最下面兜着。 */
|
||
.today-line{
|
||
background-image:
|
||
/* 右上角一点柔光，让它不只是「从左到右变暖」。放在 x=96%，
|
||
离竖线那一列（x≈63.5px）远得很，不参与上面那笔账。 */
|
||
radial-gradient(130px 90px at 96% 3%, rgba(255,206,178,.30), rgba(255,206,178,0) 72%),
|
||
linear-gradient(90deg,#fff 0%,#fff 32%,#FFF9F4 64%,#FFF2E7 100%);
|
||
}
|
||
/* 「不用加那么重」：同样的 90deg、同样的 32% 白区，终点浅一半
|
||
（#FFF8F3 之于 #FFF2E7），也不加那道柔光。 */
|
||
.shelf{
|
||
background-image:linear-gradient(90deg,#fff 0%,#fff 32%,#FFFCFA 64%,#FFF8F3 100%);
|
||
}
|
||
|
||
/* 大字水印「兜爸」（2026-10-01 用户要求由「妈妈」改成品牌名；下面「动手的是妈妈」那段是改之前的取字理由，留作历史）。**全站只有一枚，在工具区（.tool-dock）。**
|
||
|
||
⚠️ 上一稿是三块各放一枚，被否了：「今日成长脚印和本周孕育指南那两个去掉，
|
||
只保留工具那个。」三枚同样的字顺着首页排下来，本身又成了一种重复 ——
|
||
一枚是印章，三枚是底纹，而底纹这个方向已经翻过两次车了。
|
||
**别再往 .today-line / .shelf 上加回去。**
|
||
|
||
⚠️ 它和标题是一对：标题写着「小汤圆的孕育工具」（跟着小名走），
|
||
水印压在后面写着「妈妈」。工具是给宝宝用的，动手的是妈妈。
|
||
所以水印这两个字**不跟小名变**，它本来就不是在说宝宝。
|
||
|
||
尺寸和位置是按「露出多少」倒推的，不是随手填的：
|
||
· 工具区从块顶到宫格之间只有约 75px 是透空的（16 内边距 + 抬头行 + 说明行），
|
||
往下整片都被不透明的工具卡铺满（.mini-card 是实心渐变底）。
|
||
· 132px 的字，字面高约 113px，于是**露出上面六成，下面四成沉到卡片背后** ——
|
||
「可以被数胎动、孕期体重那些卡挡住，只保留露出部分就行」，说的就是这个。
|
||
· 再往大调会好看，但露出的比例会跟着掉；掉到一半以下时，「妈妈」两个字
|
||
只剩上半截，就认不出来了。调 --wm-size 之前先想清楚这笔交换。
|
||
|
||
⚠️ letter-spacing 用 em 不用 px：跟着字号缩放，改 --wm-size 时不用再回来改这行。
|
||
负值是要的 —— 两个字挨紧才像一枚印章，松开就散成两个字了。
|
||
⚠️ pointer-events:none：工具卡整张都是可点区域，水印绝不能吃掉点击。
|
||
z-index:-1 本来也轮不到它接事件，但这行是白纸黑字的保险。 */
|
||
.wm{
|
||
position:absolute;top:0;right:16px;z-index:-1;
|
||
font-size:var(--wm-size);font-weight:900;line-height:1;letter-spacing:-.04em;
|
||
color:var(--wm-color);
|
||
pointer-events:none;user-select:none;-webkit-user-select:none;
|
||
}
|
||
/* 水印比抬头那条透空带高，得有人把它裁在圆角里，否则字面顶部会从块的
|
||
上边缘冒出去，糊在头图底下。裁在这块自己身上就够 —— 只有它有水印。
|
||
（宫格四周有 26px 内边距，工具卡的投影够不到边缘，裁掉不了任何东西。） */
|
||
.tool-dock{overflow:hidden}
|
||
|
||
/* 三块的抬头用同一套字号和间距。上一稿我给三个「更多」入口做了三种样子
|
||
（白胶囊 / 灰字 / 灰字），毫无理由地不一致 —— 同一层级的东西就该长一样。
|
||
⚠️ .dock-all 原来是白底胶囊，托盘变白之后白底压白底会直接消失，
|
||
顺手一起并进这条统一规则里了。 */
|
||
.dock-title,.tl-h-title,.sh-title{font-size:16.5px;font-weight:800;letter-spacing:-.2px}
|
||
.dock-all,.tl-h-all,.sh-all{
|
||
margin-left:auto;flex:0 0 auto;white-space:nowrap;
|
||
font-size:12px;font-weight:600;color:var(--muted);
|
||
}
|
||
.dock-all:active,.tl-h-all:active,.sh-all:active{opacity:.5}
|
||
/* 三块的说明也用同一套。上一稿 .dock-note 是半透明白 chip、另两条是灰字，
|
||
同样是没道理的三选一 —— chip 那个样子是为了在深色托盘上读得清，
|
||
底一变白，chip 的白底就没意义了，统一回灰字最干净。 */
|
||
.dock-note,.sh-note,.tl-h-note{font-size:12px;color:var(--muted);line-height:1.5}
|
||
|
||
/* ============ 宝宝消消乐 · 推广入口（2026-09-30）============
|
||
糖果色渐变大卡：左边名字 + 一句玩法 + 「开始玩」胶囊，右边 3×3 小棋盘循环演示「三连消除」，
|
||
角上三颗星星闪烁。整张卡是一个按钮。动效在 prefers-reduced-motion 下关掉。 */
|
||
.game-promo.hide{display:none}
|
||
.gp-card{position:relative;display:flex;align-items:center;gap:10px;width:100%;overflow:hidden;
|
||
border:0;border-radius:22px;padding:16px 14px 16px 18px;text-align:left;font:inherit;color:#fff;
|
||
background:linear-gradient(125deg,#FF8FA3 0%,#FFB07C 55%,#FFD36E 100%);
|
||
box-shadow:0 10px 24px rgba(255,130,120,.28)}
|
||
.gp-card::before{content:"";position:absolute;left:-40px;bottom:-60px;width:160px;height:160px;border-radius:50%;
|
||
background:rgba(255,255,255,.16)}
|
||
.gp-card:active{transform:scale(.98)}
|
||
.gp-new{position:absolute;left:0;top:0;font-size:10.5px;font-weight:800;color:#E4476A;background:#FFF3C4;
|
||
border-radius:0 0 12px 0;padding:3px 10px 3px 12px;letter-spacing:.5px}
|
||
.gp-text{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding-top:8px}
|
||
.gp-name{font-size:21px;font-weight:900;letter-spacing:.5px;text-shadow:0 2px 0 rgba(214,86,86,.35)}
|
||
.gp-sub{margin-top:5px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.95)}
|
||
.gp-cta{margin-top:10px;display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:6px 14px;
|
||
font-size:13px;font-weight:800;color:#E4476A;background:#fff;box-shadow:0 4px 10px rgba(200,70,70,.2);
|
||
animation:gpBeat 2.2s ease-in-out infinite}
|
||
@keyframes gpBeat{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.08)}90%{transform:scale(.97)}}
|
||
.gp-board{position:relative;flex:0 0 auto;display:grid;grid-template-columns:repeat(3,30px);gap:4px;padding:6px;
|
||
border-radius:14px;background:rgba(255,255,255,.35);transform:rotate(4deg)}
|
||
.gp-board i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;
|
||
font-style:normal;font-size:18px;line-height:1;box-shadow:0 2px 0 rgba(220,120,100,.25);
|
||
transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s}
|
||
.gp-board i.is-pop{transform:scale(1.3);opacity:0}
|
||
.gp-board i.is-in{animation:gpDrop .45s cubic-bezier(.3,1.5,.5,1)}
|
||
@keyframes gpDrop{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
|
||
.gp-board i.is-hint{background:#FFF6D6;box-shadow:0 0 0 2px #FFD36E}
|
||
.gp-spark{position:absolute;color:#fff;font-size:12px;animation:gpTw 1.8s ease-in-out infinite;opacity:0}
|
||
.gp-spark.s1{right:12px;top:8px}.gp-spark.s2{right:120px;top:14px;animation-delay:.6s;font-size:9px}
|
||
.gp-spark.s3{right:16px;bottom:10px;animation-delay:1.2s;font-size:10px}
|
||
@keyframes gpTw{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
|
||
@media (prefers-reduced-motion:reduce){.gp-cta,.gp-spark{animation:none}.gp-spark{opacity:.8}}
|
||
|
||
/* ============ 3D 婴儿房 · 页面上的一道空隙（2026-10-01 三版）============
|
||
这一块**故意没有底色、没有圆角卡片**：它是页面上开的缝，里面是铺在整页背后的房间。
|
||
.nyp-layer 的 height / transform 由 JS 按 .screen 可视区每帧写入（见 app.js nurseryInit），这里别再给它写 top/transform。
|
||
::after = 上下模块压在房间上的阴影，要盖在图层之上、按钮之下。 */
|
||
.ny-peek{position:relative;margin:16px -26px 0;height:340px;overflow:hidden;background:#E6EEF3}
|
||
.nyp-layer{position:absolute;left:0;top:0;width:100%;height:812px;will-change:transform;
|
||
display:flex;align-items:center;justify-content:center;background:#E6EEF3}
|
||
.nyp-layer img{display:block;width:88%;max-width:420px;height:auto;margin-top:-40px}
|
||
/* 2026-10-01h：封面改成满幅远景（天空/远山/田野铺满整张图），不再是「纯色底上一栋房子」→ 图铺满缝宽、不羽化，
|
||
左右下沿不会再露底色；底色只在图片加载前兜底，取图顶天色 */
|
||
.nyp-layer img{width:100%;max-width:none;margin-top:30px}
|
||
/* 上下沿融进页面底色（2026-10-01 用户反馈：和上面孕期小知识、下面今日脚印「衔接得有点硬」）：
|
||
原来是两道向内的阴影 = 一条硬切口；改成上下各一段 --bg → 透明 的渐隐，房子像从页面里慢慢浮出来、再沉回去。 */
|
||
.ny-peek::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
|
||
background:linear-gradient(var(--bg) 0,rgba(248,243,239,.82) 18px,rgba(248,243,239,0) 78px),
|
||
linear-gradient(0deg,var(--bg) 0,rgba(248,243,239,.85) 14px,rgba(248,243,239,0) 64px)}
|
||
.nyp-chip{position:absolute;left:26px;top:16px;z-index:2;font-size:11px;font-weight:800;color:#E0708A;letter-spacing:.3px;
|
||
background:rgba(255,255,255,.86);border-radius:999px;padding:3px 10px;box-shadow:0 2px 8px rgba(224,112,138,.15)}
|
||
.nyp-bar{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;align-items:center;gap:10px;
|
||
padding:10px 10px 10px 14px;border-radius:18px;background:rgba(255,255,255,.82);
|
||
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(160,90,90,.16)}
|
||
.nyp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
||
.nyp-txt b{font-size:15px;font-weight:900;color:#5A3E37;letter-spacing:.3px}
|
||
.nyp-txt span{font-size:11.5px;color:#8A6C63;line-height:1.4}
|
||
.nyp-txt span em{font-style:normal;color:#E0708A;font-weight:900}
|
||
.nyp-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;border:0;border-radius:999px;padding:8px 14px;font:inherit;
|
||
font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F9B4C1,#F18DA2);box-shadow:0 4px 10px rgba(224,112,138,.32);
|
||
animation:nypNudge 2.8s ease-in-out infinite}
|
||
.nyp-btn:active{transform:scale(.96)}
|
||
@keyframes nypNudge{0%,80%,100%{transform:translateX(0)}86%{transform:translateX(3px)}92%{transform:translateX(0)}}
|
||
/* 夜间：JS 换成开灯版图，底色跟着换成图边的 #2C3350 */
|
||
.ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:#2D3559}
|
||
/* 夜间：浅底色渐隐进深色夜景容易发灰，渐隐段收短一半，像夜里从门缝透出来 */
|
||
.ny-peek.is-night::after{background:linear-gradient(var(--bg) 0,rgba(248,243,239,.6) 10px,rgba(248,243,239,0) 40px),
|
||
linear-gradient(0deg,var(--bg) 0,rgba(248,243,239,.6) 8px,rgba(248,243,239,0) 34px)}
|
||
.ny-peek.is-night .nyp-bar{background:rgba(30,36,60,.78)}
|
||
.ny-peek.is-night .nyp-txt b{color:#FFF3F5}
|
||
.ny-peek.is-night .nyp-txt span{color:#D9C5D0}
|
||
.ny-peek.is-night .nyp-txt span em{color:#FFB3C3}
|
||
@media (prefers-reduced-motion:reduce){.nyp-btn{animation:none}}
|
||
|
||
/* ============ 孕期小知识（2026-09-30）============
|
||
外壳是公共白色通栏。里面三层：
|
||
① .pt-today 今日小知识大卡：暖粉渐变 + 右上角一颗慢慢浮动的「宝宝大小」emoji（本周水果）；
|
||
底部 7 个圆点是本周第 1–7 天，今天实心、以前可回看、以后锁着。
|
||
② .pt-grid 四张马卡龙色小卡：宝宝 / 妈妈 / 饮食 / 注意，进入视口时依次浮上来。
|
||
③ .pt-foot 一行免责小字。
|
||
动效全部在 prefers-reduced-motion 下关掉。 */
|
||
.preg-tips.hide{display:none}
|
||
.pt-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
|
||
.pt-title{font-size:16.5px;font-weight:800;letter-spacing:-.2px}
|
||
.pt-when{margin-left:auto;font-size:12px;font-weight:700;color:var(--brand);
|
||
background:#FFF0EA;border-radius:999px;padding:3px 10px}
|
||
.pt-today{position:relative;overflow:hidden;border-radius:20px;padding:14px 16px 12px;
|
||
background:linear-gradient(135deg,#FFE9E1 0%,#FFF1E6 55%,#FFF7EE 100%)}
|
||
.pt-today::after{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;
|
||
background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);pointer-events:none}
|
||
.pt-float{position:absolute;right:14px;top:10px;font-size:34px;line-height:1;z-index:1;
|
||
animation:ptFloat 3.6s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(200,110,80,.18))}
|
||
@keyframes ptFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
|
||
.pt-badge{display:inline-block;font-size:11px;font-weight:700;color:#fff;border-radius:999px;padding:2px 9px;
|
||
background:linear-gradient(90deg,#F4593C,#FF8A66)}
|
||
.pt-body{min-height:88px;padding-right:44px}
|
||
.pt-body.is-in{animation:ptIn .42s var(--ease)}
|
||
@keyframes ptIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||
.pt-t{margin-top:8px;font-size:16px;font-weight:800;color:#5A2E22;letter-spacing:-.2px}
|
||
.pt-d{margin-top:5px;font-size:13px;line-height:1.65;color:#6B4B40}
|
||
.pt-days{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(224,74,46,.18)}
|
||
.pt-day{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;
|
||
background:none;border:0;padding:0;font:inherit;color:#B08A7C}
|
||
.pt-day i{display:block;width:26px;height:26px;border-radius:50%;line-height:26px;text-align:center;
|
||
font-style:normal;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.75);color:#C07A64;
|
||
transition:transform .2s var(--ease),background .2s}
|
||
.pt-day span{font-size:10px}
|
||
.pt-day.is-past i{background:#fff;color:#E0725A}
|
||
.pt-day.is-today i{background:linear-gradient(135deg,#F4593C,#FF8A66);color:#fff;
|
||
box-shadow:0 0 0 3px rgba(244,89,60,.18);animation:ptPulse 2.4s ease-in-out infinite}
|
||
.pt-day.is-today span{color:var(--brand);font-weight:700}
|
||
@keyframes ptPulse{0%,100%{box-shadow:0 0 0 3px rgba(244,89,60,.18)}50%{box-shadow:0 0 0 6px rgba(244,89,60,.06)}}
|
||
.pt-day.is-sel i{transform:scale(1.14)}
|
||
.pt-day.is-sel:not(.is-today) i{background:#FFD9CC;color:#C24A30}
|
||
.pt-day.is-lock i{background:rgba(255,255,255,.45);color:#D9BDB2}
|
||
.pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
|
||
.pt-card{position:relative;border-radius:16px;padding:11px 12px 12px;min-width:0}
|
||
.pt-card b{display:block;font-size:13px;font-weight:800;margin-top:4px}
|
||
.pt-card p{margin:4px 0 0;font-size:12px;line-height:1.55;color:var(--ink-2)}
|
||
.pt-ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.8);font-size:17px}
|
||
.pc-baby{background:linear-gradient(160deg,#FFF1E8,#FFE6DA)} .pc-baby b{color:#C4583C}
|
||
.pc-mom{background:linear-gradient(160deg,#FCEFF5,#F8E1EC)} .pc-mom b{color:#B3547E}
|
||
.pc-eat{background:linear-gradient(160deg,#EFF7EA,#E3F0DB)} .pc-eat b{color:#4F7F3E}
|
||
.pc-care{background:linear-gradient(160deg,#EEF3FB,#E1EAF7)} .pc-care b{color:#4A6FA6}
|
||
/* 进入视口依次浮上来（JS 给 .pt-grid 加 .is-shown；不支持 IntersectionObserver 时直接加） */
|
||
.pt-grid .pt-card{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .6s var(--ease)}
|
||
.pt-grid.is-shown .pt-card{opacity:1;transform:none}
|
||
.pt-grid.is-shown .pt-card:nth-child(2){transition-delay:.08s}
|
||
.pt-grid.is-shown .pt-card:nth-child(3){transition-delay:.16s}
|
||
.pt-grid.is-shown .pt-card:nth-child(4){transition-delay:.24s}
|
||
.pt-foot{margin-top:9px;font-size:11px;color:var(--muted);text-align:center}
|
||
|
||
|
||
@media (prefers-reduced-motion:reduce){
|
||
.pt-float,.pt-day.is-today i{animation:none!important}
|
||
.pt-grid .pt-card{opacity:1;transform:none;transition:none}
|
||
}
|
||
|
||
/* ============ 模块一 · 工具 ============ */
|
||
.dock-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
|
||
/* 说明行仍是 inline-flex：前面那枚小图标要和文字同行居中，
|
||
但不能撑满整行（撑满的话图标会被推到左边很远）。 */
|
||
.dock-note{display:inline-flex;align-items:center;gap:5px;margin-bottom:11px}
|
||
.dock-note svg{flex:0 0 auto;color:var(--brand);opacity:.8}
|
||
|
||
/* Bento */
|
||
/* 卡进了白底容器，各自那圈阴影就没用了 —— 白底上叠浅阴影只会显脏，
|
||
五份糊在一起反而看不出是五张卡。圆角同步收一档，配小一号的画幅。 */
|
||
.tool-dock .mini-card{box-shadow:none;border-radius:18px}
|
||
/* 第三列从 .96fr 提到 1fr（第一列 1.3 补回来）：这一列底下新添了「更多工具」，
|
||
四个字加一个 ›，按老比例在 320px 视口下这列只有 71px，减掉内边距剩 55px，
|
||
正好差一点点会顶出去。 */
|
||
.bento{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
|
||
.bento-col{display:flex;flex-direction:column;gap:10px}
|
||
.mini-card{position:relative;border-radius:20px;padding:14px;overflow:hidden;box-shadow:var(--sh)}
|
||
.mc-title{font-size:19px;font-weight:800;letter-spacing:-.3px}
|
||
.mc-title.sm{font-size:15px}
|
||
.mc-sub{font-size:12px;color:var(--ink-2);margin-top:3px}
|
||
.mc-btn{display:inline-block;margin-top:12px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;padding:6px 15px;border-radius:14px;box-shadow:0 4px 10px rgba(244,89,60,.3)}
|
||
.mc-art{position:absolute;width:52px;height:auto;right:6px;bottom:2px;filter:drop-shadow(0 5px 10px rgba(160,90,70,.18))}
|
||
.mc-art.big{position:static;width:74px;display:block;margin:2px auto 6px}
|
||
.mc-big{font-size:22px;font-weight:800;margin-top:2px}
|
||
.mc-big small{font-size:13px;font-weight:700}
|
||
/* 卡片第二行（上游 sub 的落点）：只有 kick / weight 两张卡有富余空间 —— 其余三张是
|
||
固定高度（fweight 64 / cal 88 / curve 80）且列很窄（≈73px 文本宽），放不下第二行；
|
||
要显示它们的 sub，得先重排 .bento 那笔高度账（158+10+64=232），别硬塞。
|
||
:empty 时整行不占位，所以没数据时卡面与改动前完全一致。 */
|
||
/* 工具卡的状态行：固定高度 bento 只留了**一个**状态位，而上游的 text 可能比卡宽
|
||
（数宫缩卡那列文本宽只有 ≈73px，上游给「最近间隔 4分12秒」）→ 一律单行省略，别撑破卡面。
|
||
⚠️ 只作用于 .bento 里的卡，别外溢到页面其它 .mc-sub。 */
|
||
.bento .mc-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
|
||
/* 孕检日历卡略高（88px，扣掉内边距与标题还剩 ≈36px），允许两行 ——
|
||
上游过期未记时给「待补记 · 9月26日」，一行放不下会把日期省略掉，那就丢了关键信息。 */
|
||
.mini-card.cal .mc-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
|
||
|
||
.mc-extra{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35;
|
||
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
.mc-extra:empty{display:none}
|
||
/* 上游 warn（胎动偏低 / 宫缩达到临产阈值 / 产检已过期未记）：数字与文案一起标红。
|
||
颜色另起 --alert，不复用 --brand-dk：品牌深橘在这套暖底上读起来只是"强调"，不像告警。 */
|
||
.mini-card.is-warn .mc-sub,.mini-card.is-warn .mc-sub b,
|
||
.mini-card.is-warn .mc-big,.mini-card.is-warn .mc-big small,
|
||
.mini-card.is-warn .mc-extra{color:var(--alert)}
|
||
/* 四张工具卡的渐变跨度收窄到原来的一半左右：
|
||
渐变落差太大时整块颜色被拉花，模块边界反而看不清 */
|
||
.mini-card.kick{background:linear-gradient(150deg,#FFE2D6,#FFD7CA);height:158px}
|
||
.mini-card.kick .mc-art{width:74px;right:2px;bottom:0}
|
||
/* 胎儿估重（这张卡原来是「胎心记录」，本批换了内容；类名 .heart → .fweight，
|
||
下面那条 .mc-art 跟着改。除类名外，这里的数值一个都没动）。
|
||
版式是「名字 + 状态两行叠着，插画退到右下角」，和 .cal / .curve 同一套 ——
|
||
这一列窄，横排（图标 + 名字 + 右边状态）塞不下，标题会被挤成竖排。
|
||
底色浅蓝不是随手挑的：正上方「数胎动」是粉的，两块粉挨着分不出是两张卡；
|
||
插画又是珊瑚红的（原来是心，现在是表盘指针），压在粉底上糊成一片，浅蓝才托得住。
|
||
内边距上下收到 12（别处是 14）：这一格只有 64px 高，
|
||
14 + 名字 20 + 间距 3 + 状态 16 + 14 = 67，会超三个像素。 */
|
||
.mini-card.fweight{background:linear-gradient(150deg,#E7EFFA,#DDE8F8);height:64px;padding:12px 14px}
|
||
.mini-card.weight{background:linear-gradient(160deg,#FFE9E1,#FFDDD3);display:flex;flex-direction:column;justify-content:center;text-align:center}
|
||
.mini-card.weight .mc-title{font-size:16px}
|
||
.mini-card.cal{background:linear-gradient(150deg,#ECF3DE,#E4F0D4);height:88px}
|
||
/* 生长曲线原来是 flex:1，把第三列剩下的高度全吃了（约 134px），
|
||
可它的内容和上面的孕检日历一样多，白撑着。压到 80px，
|
||
省下的 54px 给下面的「更多工具」。
|
||
⚠️ 这三张卡的高度是硬凑的：88 + 10 + 80 + 10 + 44 = 232，
|
||
左边那一列是 158 + 10 + 64 = 232，两列必须一样高，中间那张「孕期体重」
|
||
才不会比别人矮一截。动其中任何一个数，另一列要跟着补回来。
|
||
80 是这套竖排的下限：内边距 28 + 名字 20 + 间距 3 + 状态 16 = 67，再矮就贴边了。 */
|
||
.mini-card.curve{background:linear-gradient(150deg,#ECE5FA,#E5DCF9);height:80px}
|
||
.mini-card.cal .mc-art,.mini-card.curve .mc-art{width:42px;right:6px;bottom:4px}
|
||
/* 这张卡的插画得单独摆一份，不能跟着上面 .cal / .curve 那条走。
|
||
① 尺寸 38 而不是 42：日历、曲线那两张 png 画面里自带内部留白，
|
||
这里的表盘是满幅的圆，同样宽度看着会比它俩大一圈。
|
||
② 位置 right:11 / bottom:10：圆的最宽处顶在画布边缘，.mini-card 又是
|
||
overflow:hidden，按别处的 6 / 4 摆会被圆角啃掉一小块。这两个数当初是
|
||
为那颗同样满幅的心量出来的，换成圆表盘照样成立，所以原样留着。
|
||
③ 滤镜只留 drop-shadow：原来前面还挂着 saturate(.82) brightness(1.04)，
|
||
那是专为 q-heart.png 那颗高饱和珊瑚红压色的 —— 它比 app-* 那几张低饱和的
|
||
奶油粉 / 淡紫 / 浅绿都要「喊」。现在这枚表盘是自己画的 SVG，配色一开始
|
||
就落在同一档里，不需要再压；继续挂着反而会把指针洗淡。
|
||
投影值照抄 .mc-art 的原值不动：打光要跟邻居一致。 */
|
||
.mini-card.fweight .mc-art{width:38px;right:11px;bottom:10px;
|
||
filter:drop-shadow(0 5px 10px rgba(160,90,70,.18))}
|
||
/* 2026-09-30 工具卡改版：白字 + 各工具 LOGO 里的图形（取自点进去那个工具页左上角的 LOGO：
|
||
数胎动 .brand-logo、孕期体重 img.brand-logo、孕检日历 .hero-brand i、胎儿估重 .lg、数宫缩 svg.brand-logo）。
|
||
用户要求只留 LOGO 里面的图形、不要外面的圆角方块 / 圆环底，并且要高清：
|
||
数胎动 / 胎儿估重 / 数宫缩的原 LOGO 本身是 SVG，直接删掉底板那一层；
|
||
孕期体重（128px webp）和孕检日历（100px png）原图是小位图、放大就糊，照原图重画成矢量。
|
||
都在 assets/img/*.svg，工具页换 LOGO 时这里要重新取。
|
||
用户随后反馈五个彩色图标「抢、太乱，满屏都是图标」：图标只是装饰，于是统一成
|
||
**白色单色**（原来的彩色细节改用镂空表达），半透明、放大、斜压在右下角并出血到卡边外，
|
||
退成卡面的底纹，让标题和数字当主角。
|
||
卡底色取点进去那个工具页的主色系、饱和度再深一档（各工具页 theme-color / 主色见每行注释），
|
||
这样从卡片点进去颜色是连着的。
|
||
只换皮：上面那笔高度账（158+10+64 / 88+10+80+10+44）和版式一个数没动，
|
||
所以这里只覆盖颜色、字色和插画尺寸。渐变收尾色压得够深，白字在最浅的那一端也读得清。
|
||
「更多工具」仍是灰米出口，不参与。 */
|
||
.bento .mini-card:not(.more){color:#fff}
|
||
.bento .mini-card:not(.more) .mc-title{text-shadow:0 1px 2px rgba(0,0,0,.12)}
|
||
.bento .mini-card:not(.more) .mc-sub{color:rgba(255,255,255,.9)}
|
||
.bento .mini-card:not(.more) .mc-extra{color:rgba(255,255,255,.78)}
|
||
.mini-card.kick{background:linear-gradient(160deg,#EE9B70,#D8683F)} /* 数胎动页：暖杏底 #F7E8DE、橙红 #E2694A */
|
||
.mini-card.weight{background:linear-gradient(160deg,#F49A88,#E4656A)} /* 孕期体重页：桃粉底 #FFE9E1、珊瑚 #F2856D */
|
||
.mini-card.cal{background:linear-gradient(160deg,#94B568,#62893C)} /* 孕检日历页：浅绿底 #EFF4EB、草绿 #86A362 */
|
||
.mini-card.fweight{background:linear-gradient(160deg,#86A5DA,#5472B4)} /* 胎儿估重页：浅蓝底 #E2ECF9、藏青 #3E5488 */
|
||
.mini-card.curve{background:linear-gradient(160deg,#A08DD8,#7560B6)} /* 数宫缩页：淡紫底 #E7E1F3、紫 #7E68BC */
|
||
.bento .mc-btn{background:#fff;color:#C95A36;box-shadow:0 3px 8px rgba(120,50,20,.2)}
|
||
/* 水印式图标：五张统一 18% 白（10-01 用户嫌乍眼，从 28% 降下来、尺寸同时缩到约 8 成）、转 -12°、右下角出血（.mini-card 本身 overflow:hidden 负责裁边）。
|
||
⚠️ 文字层必须压在水印上面：除 .mc-art 外的子元素一律 relative + z-index:1。
|
||
⚠️ 孕期体重那张原来是「图在上、字在下」的竖排，图标改成 absolute 退出文档流后，
|
||
标题和数字靠卡片自身的 flex 居中落在正中，不用另调。 */
|
||
.bento .mini-card:not(.more)>*:not(.mc-art):not(.rp){position:relative;z-index:1}
|
||
.bento .mini-card:not(.more) .mc-art{filter:none;opacity:.18;transform:rotate(-12deg);pointer-events:none}
|
||
.mini-card.kick .mc-art{width:50px;right:-6px;bottom:-8px}
|
||
.mini-card.weight .mc-art.big{position:absolute;width:58px;right:-9px;bottom:-8px;margin:0}
|
||
.mini-card.cal .mc-art,.mini-card.curve .mc-art{width:34px;right:-4px;bottom:-5px}
|
||
.mini-card.fweight .mc-art{width:32px;right:-4px;bottom:-7px}
|
||
/* 告警（胎动偏低 / 宫缩达阈值 / 产检过期）：糖果色底上 --alert 红看不清，换成亮黄字 */
|
||
.bento .mini-card.is-warn .mc-sub,.bento .mini-card.is-warn .mc-sub b,
|
||
.bento .mini-card.is-warn .mc-big,.bento .mini-card.is-warn .mc-big small,
|
||
.bento .mini-card.is-warn .mc-extra{color:#FFF08A}
|
||
/* 「更多工具」：通往「记一下」弹层里那十几个工具。
|
||
故意不给糖果色 —— 它不是第六个工具，是个出口。素底 + 一行小字，
|
||
扫过去不会被当成工具卡数进去。
|
||
高度 44 是按手指来的（再矮一点更好看，但这是这一屏唯一通往其余工具的门，
|
||
点不准的代价太大），不是按内容 —— 一行 11.5px 的字只要 16px。 */
|
||
/* ⚠️ 底色必须跟着容器走：容器是白的就用灰米（现在这样），容器要是改成米色底，
|
||
这里得反过来提亮，否则浅底压浅底整张卡会直接消失。 */
|
||
.mini-card.more{background:#EFE7DA;height:44px;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 6px}
|
||
.mc-more-t{font-size:11.5px;font-weight:700;color:#8A7A66;white-space:nowrap}
|
||
.mini-card.more .chev{font-style:normal;font-size:13px;font-weight:700;color:#A3937F;line-height:1}
|
||
|
||
/* 模块二 · 今天的动线 */
|
||
/* 上一版这里是两个独立模块：AI 小结一张渐变卡（左边 4px 色条 + 40px 大引号），
|
||
下面「今日成长脚印」一张白卡装的时间轴。两块都是「米色页面上摆一张卡」，
|
||
和上面的工具、下面的指南是同一种容器语言，四段叠起来才显得那么直筒。
|
||
|
||
这一版合成一条线，容器语言换成「没有容器，只有一条线」：
|
||
.tl-head 起点节点（今天 · 大圆点 · 今日成长脚印 · 查看全部）
|
||
.steps 四条记录（白卡撤了，只剩内容本身）
|
||
.ai-bubble 收尾节点（AI 徽标代替时间 · 圆点 · 一只气泡）
|
||
AI 那句话总结的就是它正上方那四条记录，本来就该挨着，不该隔着一整套抬头分开摆。
|
||
|
||
竖线的画法也换了。原来是每个 .step::before 各画一小段，
|
||
靠 :first-child{top:50%} / :last-child{bottom:50%} 拼出来 ——
|
||
那样只能在 .steps 内部拼，跨不到 .tl-head 和 .ai-bubble 上。
|
||
三条规则全删，改成这里一条从头贯到尾。
|
||
|
||
⚠️ 底色、圆角、左右内边距在上面的「公共外壳」里统一定义，这里只管线和节点。
|
||
——「咬线」的那几圈外圈颜色必须等于这块的底色（现在是 #fff），
|
||
跟着外壳走，外壳改底色这里就得一起改，见下面几处标注。 */
|
||
/* 这一块的几何全部由下面几个变量推出来，别再往下面的规则里写死像素。
|
||
三行（.tl-head / .step / .ai-bubble）必须是同构的三列：
|
||
[ 时间列 --tl-time ][ --tl-gap ][ 圆点 9px ][ --tl-gap ][ 正文 ]
|
||
只要有一列的宽度或间距在某一行上写得不一样，那一行的圆点就会离开竖线。
|
||
⚠️ 之前就是这么错的：.st-time 写的是 width:42px（可被 flex 压缩），
|
||
而 .tl-h-when / .ab-badge 写的是 flex:0 0 42px（不可压缩）。
|
||
320px 视口下 .step 一行内容总宽约 311 > 可用 264，flex 就去压唯一压得动的时间列，
|
||
把它压到约 36px，圆点跟着左移，看上去就是「时间贴到竖线上」。
|
||
现在三处统一 flex:0 0 var(--tl-time)，谁都不许缩。 */
|
||
/* 引导占位（今天没有任何足迹时）：**沿用 AI 气泡那套语言** —— 左列 + 圆点 + 带尖角的气泡，
|
||
与时间轴共用同一条竖线，不再是一张横跨整块的白卡（用户反馈那样突兀）。
|
||
⚠️ 底色用白（用户指定）：所以要**加一圈描边**才看得出气泡边界 ——
|
||
AI 气泡靠暖渐变区分，白气泡压白底只剩阴影会糊成一片。
|
||
⚠️ 尖角用「旋转 45° 的小方块 + 同色描边」，这样描边能跟着拐过去；纯 border 三角做不出描边。 */
|
||
.tl-guide{position:relative;display:flex;align-items:flex-start;gap:var(--tl-gap);
|
||
width:100%;padding:10px var(--tl-pad) 0}
|
||
.tl-guide-bubble{display:block;position:relative;background:#fff;border:1px solid var(--line);
|
||
border-radius:4px 16px 16px 16px;padding:11px 14px 12px}
|
||
.tl-guide-bubble::before{content:"";position:absolute;left:-5px;top:11px;width:9px;height:9px;
|
||
background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
|
||
transform:rotate(45deg);border-radius:0 0 0 2px}
|
||
.tl-guide-t{display:block;font-size:15px;font-weight:600;line-height:1.55;color:#403430}
|
||
.tl-guide-s{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.6}
|
||
/* 引导里可点的应用芯片（名字来自接口 unused[]；identifier 是 box_app 按 App 表 url 路径解析的） */
|
||
.tl-guide-apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
|
||
.tl-guide-apps:empty{display:none}
|
||
.tl-chip{font:inherit;font-size:12.5px;font-weight:700;color:var(--brand-dk);
|
||
background:#FFF1EC;border:1px solid #FFDFD5;border-radius:999px;padding:7px 13px;line-height:1}
|
||
.tl-chip.is-plain{color:var(--muted);background:#F6F1ED;border-color:var(--line)}
|
||
/* 接口说这句"需要标红"时（digest.warn）整句变告警色 */
|
||
.today-line.ai-warn .ab-say{color:var(--alert)}
|
||
/* 没有真实事件的当天不显示 AI 气泡：那句话里的次数是**写死的**（见 index.html 的注释），
|
||
今天没记 / 未关联时显示它等于编数据。拿到真实事件（fpApply('rows')）时才摘掉这个类。 */
|
||
.today-line.no-ai .ai-bubble{display:none}
|
||
|
||
.today-line{
|
||
position:relative;
|
||
--tl-time:44px; /* 时间列宽：够放 "13:00" 还余一点 */
|
||
--tl-gap:13px; /* 三列之间的间距。从 10 提到 13，给时间和竖线之间让出空气 */
|
||
--tl-pad:2px; /* 每行自身的左右内边距 */
|
||
--tl-top:22px; /* 这一块的上留白 */
|
||
--tl-bot:24px; /* 这一块的下留白 */
|
||
/* 竖线中心 = 左内边距 + 时间列 + 间距 + 圆点半径(4.5) */
|
||
--tl-x:calc(var(--tl-pad) + var(--tl-time) + var(--tl-gap) + 4.5px);
|
||
/* 正文左缘 = 竖线中心 + 圆点半径 + 间距 */
|
||
--tl-text:calc(var(--tl-x) + 4.5px + var(--tl-gap));
|
||
padding-top:var(--tl-top);padding-bottom:var(--tl-bot);
|
||
}
|
||
/* 一整条，不掐头也不去尾：上端由 .tl-h-dot 的不透明外圈盖掉，
|
||
下端由 .ai-bubble::after 那块底色橡皮擦掉。
|
||
这两处都只依赖各自圆点的位置（我自己定死的），不依赖气泡里文字排了几行 ——
|
||
要是改成算 bottom 的像素值，文案一变或字体一换线就会拖长一截或者短一截。
|
||
⚠️ top/bottom 必须正好等于这一块的上下留白，**不能写 0**。
|
||
绝对定位是相对 padding box 算的，写 0 会让线从留白最顶端画起，
|
||
而 .tl-h-dot 的外圈只盖得住自己周围 12.5px —— 上下各会露出一截悬空的线头。
|
||
用同一组变量绑死，以后调留白线会跟着走。 */
|
||
.today-line::before{content:"";position:absolute;left:calc(var(--tl-x) - .75px);
|
||
top:var(--tl-top);bottom:var(--tl-bot);width:1.5px;background:#F0E2D9}
|
||
|
||
/* 起点节点。三列宽度全部走变量，圆点才落得进竖线。 */
|
||
.tl-head{display:flex;align-items:center;gap:var(--tl-gap);padding:0 var(--tl-pad);position:relative}
|
||
.tl-h-when{flex:0 0 var(--tl-time);font-size:13px;font-weight:700;color:var(--brand)}
|
||
/* 起点点得比途中的记录点更醒目，但**盒子仍然是 9px** —— 大小全靠 box-shadow 往外扩，
|
||
一改 width 就会把圆心推离 --tl-x，线和点就错位了。
|
||
三层 shadow 由外到内：底色 → 品牌色细圈 → 底色。⚠️ 最外层必须是不透明的容器底色（#fff），
|
||
它同时负责把 .tl-head 上方那截线头盖掉；写成半透明或写错色，线头就会露出来。 */
|
||
.tl-h-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--brand);
|
||
box-shadow:0 0 0 3.5px #fff,0 0 0 5.5px rgba(244,89,60,.30),0 0 0 8px #fff}
|
||
/* ⚠️ 两个标题现在都含用户填的小名，而小名输入框是 maxlength="12"。
|
||
12 个全角字 + 「的孕育工具」＝ 17 字 ≈ 277px，工具区那行留给标题的位置只有约
|
||
310px —— 塞得下，但只剩 30px 余量，字体或按钮文案一动就会把「所有工具 ›」挤出去。
|
||
与其赌那 30px，不如让标题自己先省略号收尾。.tl-h-title 本来就有这套，
|
||
.dock-title 是这次跟着一起挂上来的。 */
|
||
.tl-h-title,.dock-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
/* 说明缩进到 73px，和下面 .st-txt 的左边缘对齐（2+42+10+9+10），
|
||
看着像是挂在这条线右侧的一句注脚，不是又一行贴边灰字。 */
|
||
.tl-h-note{margin:5px 0 2px var(--tl-text)}
|
||
|
||
/* 它自己不再是一张卡了（背景/阴影/圆角/左右内边距都归外壳管），
|
||
.step 的左边缘因此和 .tl-head / .ai-bubble 对齐，三块共用同一条线。 */
|
||
.steps{padding:2px 0;cursor:pointer}
|
||
.step{display:flex;align-items:center;gap:var(--tl-gap);padding:11px var(--tl-pad);position:relative;font-size:14.5px}
|
||
/* ⚠️ 必须是 flex:0 0（不可压缩），只写 width 会被 flex 压缩 —— 见本块开头那段说明。 */
|
||
.st-time{flex:0 0 var(--tl-time);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
|
||
/* ⚠️ 外圈用来「咬断」竖线，所以它必须是**圆点背后那块底**的颜色 = 外壳的 #fff。 */
|
||
.st-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);z-index:2;box-shadow:0 0 0 3px #fff}
|
||
.st-txt{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
/* 数据来源标签：做成浅色小胶囊，一眼看出这条记录是哪个孕期工具同步过来的。
|
||
⚠️ 底色要和它贴着的那块底拉开差距 —— 而这一版**外壳底真的变了**，
|
||
上一版注释里假设的那件事发生了，所以这条跟着压深了一档：
|
||
胶囊 #F1E8E1 → #EADDD3，字 #9A8A7E → #8D7C6F
|
||
账（胶囊底 vs 它背后的外壳底，比值越大边界越清楚）：
|
||
旧：#F1E8E1 压在纯白上 = 1.209
|
||
本批不改的话：#F1E8E1 压在 #FFF2E7 上 = 1.077 ← 几乎看不见，只剩一行浮着的字
|
||
改完：#EADDD3 压在 #FFF2E7 上 = 1.211 ← 回到旧版的清晰度
|
||
⚠️ 它 margin-left:auto 贴在行的最右端，正好落在渐变**最深的那一头**，
|
||
所以必须按终点色 #FFF2E7 算，按平均色算会算松。
|
||
⚠️ 字色一起压深是为了补回胶囊变深吃掉的那点对比（2.50 → 3.01）。
|
||
这两个值是一对，别只动一个。 */
|
||
.st-from{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-size:11.5px;color:#8D7C6F;
|
||
background:#EADDD3;border-radius:9px;padding:3px 8px;line-height:1.35}
|
||
|
||
/* 收尾节点。三个直接子元素和 .step 同构（42 的左格 + 9 的点 + 剩下的），
|
||
圆点才落在同一条线上。align-items 用 flex-start 而不是 center ——
|
||
气泡是多行的，居中的话点会飘到气泡中腰，看着不像是从这个点说出来的。
|
||
徽标和点的 margin-top 是配着气泡第一行（标签行）算的：
|
||
气泡上内边距 11 + 标签行半高 7 = 18，加上 .ai-bubble 自己的 10 上内边距 = 28。 */
|
||
.ai-bubble{position:relative;display:flex;align-items:flex-start;gap:var(--tl-gap);
|
||
width:100%;text-align:left;padding:10px var(--tl-pad) 0;cursor:pointer}
|
||
.ab-badge{flex:0 0 var(--tl-time);margin-top:12.5px;
|
||
font-size:10.5px;font-weight:800;letter-spacing:.4px;color:var(--brand);line-height:1}
|
||
.ab-dot{flex:0 0 auto;width:9px;height:9px;margin-top:13.5px;border-radius:50%;
|
||
background:var(--brand);z-index:2;box-shadow:0 0 0 3px #fff}
|
||
.ab-body{flex:1;min-width:0}
|
||
/* 一只气泡，不是「又一张卡」：左上角削平 + 一个指回竖线的小尖角，
|
||
语气是「有人在说话」。原来那套左色条 + 40px 大引号不要了 ——
|
||
引号是在给一张卡补语气，有了尖角就不需要了。
|
||
⚠️ 底色沿用上一版 AI 小结卡那道暖渐变，不能用白：外壳已经是白的，
|
||
白气泡压白底就只剩一圈阴影，看不出是「在说话」。
|
||
这也是整块里唯一允许上色的地方 —— 时间线上其余部分都是白底黑字，
|
||
颜色留给「谁在说话」这一件事。 */
|
||
.ab-bubble{display:block;position:relative;background:linear-gradient(135deg,#FDF2E9,#FBE9DE);
|
||
border-radius:4px 16px 16px 16px;padding:11px 14px 12px}
|
||
/* ⚠️ 尖角的颜色要对上气泡渐变在**左上角**的那一端（#FDF2E9），不是取平均色 */
|
||
.ab-bubble::before{content:"";position:absolute;left:-7px;top:12px;width:0;height:0;
|
||
border:6px solid transparent;border-right:7px solid #FDF2E9;border-left:0}
|
||
/* 模块名降级成气泡里的一枚小标签。它和说明、「往期小结 ›」挤在同一行是塞不下的
|
||
（320px 下可用 197，三段要 212），所以标签进气泡、另两段留在落款行。 */
|
||
.ab-tag{display:block;font-size:11px;font-weight:800;letter-spacing:.2px;
|
||
color:var(--brand);opacity:.85;margin-bottom:5px}
|
||
.ab-say{display:block;font-size:15px;font-weight:600;line-height:1.6;color:#403430}
|
||
.ab-say b{color:var(--brand)}
|
||
.ab-foot{display:flex;align-items:center;gap:8px;margin-top:8px;padding-left:2px}
|
||
/* 这里原来还有一条 .ab-foot i（左边那句「AI自动汇总你每日记录」的样式）。
|
||
那句按用户要求删掉了，规则跟着删 —— 不留只被注释引用的死样式。
|
||
下面 em 的 margin-left:auto 是它现在还贴右的原因，别当成冗余清掉。 */
|
||
.ab-foot em{margin-left:auto;flex:0 0 auto;font-style:normal;white-space:nowrap;
|
||
font-size:11.5px;font-weight:700;color:var(--brand)}
|
||
/* 底色橡皮：把圆点以下那截线擦掉，线就停在这个点上，不会从气泡旁边一直拖到模块底。
|
||
top 只跟圆点走（圆心 28 + 半径 4.5 ≈ 32），和气泡有多高无关。
|
||
left/width 刚好盖住 58 那条线，够不着 x≥73 的气泡。
|
||
⚠️ 颜色 = 外壳底色 #fff，跟着外壳走。 */
|
||
.ai-bubble::after{content:"";position:absolute;left:calc(var(--tl-x) - 2.75px);
|
||
top:32px;bottom:0;width:5.5px;background:#fff}
|
||
/* ⚠️ 这两块的圆点是「长在」竖线上的，.ripple 默认的按下缩放会把点从线上拽下来
|
||
（线不跟着缩）。改成压透明度做反馈，涟漪照旧。 */
|
||
.steps,.ai-bubble{transition:opacity .16s var(--ease)}
|
||
.steps:active,.ai-bubble:active{transform:none;opacity:.6}
|
||
|
||
/* 模块三 · 书架卡带 */
|
||
/* 上一版这里是「1 张大卡 + 底下两张小卡」的九宫格式排布，卡都是竖着堆的，
|
||
和上面的工具区在视觉上是同一种东西 —— 一屏里第二次看到「大块 + 两个小块」。
|
||
这一版改成**横向卡带**：三张等宽的卡横着排，滑动查看，右边故意露出下一张的一角。
|
||
竖着滚的页面里插一段横着滑的内容，是打破直筒感最直接的办法，
|
||
而且资源本来就是「一排书」，横着摆比竖着堆更贴合它自己的样子。 */
|
||
/* 抬头和另两块一样：标题 + 右侧灰字入口 + 底下一句说明，字号间距全走公共规则。
|
||
上一稿这里额外加了一条 2px 的「书架横杆」压在标题底下 —— 另两块都没有，
|
||
纯粹是我给这一块单造的花样，正是「乱」的来源之一，去掉。 */
|
||
.shelf-bar{display:flex;align-items:center;gap:8px;margin-bottom:7px}
|
||
.sh-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.sh-note{margin-bottom:12px}
|
||
|
||
/* 卡带出血到屏幕边缘，和上面的工具托盘用同一招，理由不一样：
|
||
托盘是为了让底色成为一个「区」，这里是为了让卡能滑出屏幕、露出下一张。
|
||
要是卡带停在 26px 栏内，右边缘会硬生生切一刀，看着像没排版好而不是「可以滑」。
|
||
⚠️ padding 左右 = 26 抵回负外边距，第一张卡才和页面其余内容左对齐；
|
||
scroll-padding-left 必须跟着写，否则吸附会把卡吸到屏幕边缘（x=0）而不是 26。 */
|
||
.shelf-rail{
|
||
display:flex;gap:11px;margin:0 -26px;padding:2px 26px 6px;
|
||
overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:26px;
|
||
-webkit-overflow-scrolling:touch;
|
||
}
|
||
.shelf-rail::-webkit-scrollbar{display:none}
|
||
/* 78%：375 宽下卡是 292，右边正好剩 45px 露出下一张的边 —— 够让人知道还能滑，
|
||
又不至于露出半张让人以为是排版错位。用百分比而不是定宽，窄屏上会自己收。
|
||
等高不用写 min-height：flex 容器默认 align-items:stretch，三张自动拉齐到最高的那张，
|
||
再靠 .sb-row{margin-top:auto} 把底行压到卡底。 */
|
||
.shelf-book{
|
||
flex:0 0 78%;scroll-snap-align:start;
|
||
display:flex;flex-direction:column;text-align:left;
|
||
border-radius:20px;padding:14px;
|
||
}
|
||
/* 三张各自的糖果色沿用上一版那三张卡的配色，认得出是同一批东西。
|
||
⚠️ 不带阴影 —— 和 .tool-dock .mini-card 同一个道理：糖果色卡摆在白外壳上，
|
||
本身已经和底分得很开，再加阴影只会显脏。这一屏的规矩是
|
||
「白外壳负责分区，色块负责分内容，阴影一个都不要」。 */
|
||
/* --sb-bg 是这张卡**底部**的颜色（渐变的收尾色）。底行的叠压头像要用它描白边，
|
||
描的必须是所处位置的实际底色，写死 #fff 会在糖果色上留一圈亮边。 */
|
||
.shelf-book.sb-book{background:linear-gradient(150deg,#FFEEE2,#FCE3D3);--sb-bg:#FCE3D3}
|
||
.shelf-book.sb-food{background:linear-gradient(150deg,#EEF5E5,#E2EFD5);--sb-bg:#E2EFD5}
|
||
.shelf-book.sb-music{background:linear-gradient(150deg,#F0EAFB,#E5DBF8);--sb-bg:#E5DBF8}
|
||
/* 封面从「左边一张小图」改成「上面一张大图」，卡才像一本立在架上的书。
|
||
统一按高度 76 缩放：三张原图宽高比不一样（书是竖的，另两个是方图标），
|
||
锁高不锁宽，它们的视觉重量才差不多。margin 左右 auto 是在列向 flex 里做水平居中。 */
|
||
/* ⚠️ 封面必须占一个**固定的框**，而不是按图自身尺寸摆。
|
||
三张原图比例差很远（书是竖的窄长条，另两个是方图标），
|
||
上一稿只锁高度 76、宽度随意，于是三张卡的封面宽窄不一、视觉重量也不一样。
|
||
现在给统一的 width:100% + height:80px + object-fit:contain：
|
||
框一样大，图在框里等比缩放并居中，谁也不变形。 */
|
||
.sb-cover{width:100%;height:80px;display:block;object-fit:contain;margin:0 0 11px;
|
||
filter:drop-shadow(0 8px 15px rgba(180,120,80,.26))}
|
||
/* 标题一行封顶。三张的标题长短不一，放任换行会把下面的简介顶到不同高度。 */
|
||
.sb-title{font-size:15px;font-weight:800;line-height:1.4;letter-spacing:-.2px;
|
||
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
/* 简介最多两行。现有三条文案在 320px 下都是一行，这里是防以后换了长文案
|
||
把某一张卡撑高、连累另外两张一起变高（卡带是等高的）。 */
|
||
.sb-desc{font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:5px;
|
||
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
/* margin-top:auto 把底行压到卡底，三张卡的底行因此始终在同一条水平线上，
|
||
哪怕上面的简介行数不一样。
|
||
gap:7px 是「头像 ↔ 人数」的距离，它俩是同一件事的两半，贴紧念着才连贯；
|
||
「免费」靠自己的 margin-left:auto 甩到最右，不吃这个 gap。 */
|
||
.sb-row{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px}
|
||
/* ⚠️ min-width:0 —— flex 子项默认 min-width:auto，光有 overflow/ellipsis 是不生效的，
|
||
窄屏（320）下这行会顶着「免费」把它挤出卡外。缩要缩在这儿，别缩头像。 */
|
||
.sb-got{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap;
|
||
overflow:hidden;text-overflow:ellipsis;min-width:0}
|
||
|
||
/* ---- 领取用户的叠压头像 ----
|
||
纯 CSS：assets/ 里没有人像图，为这点装饰新增 6 张图片不划算，
|
||
也会把单文件产物撑大。每个 <i> 是一个圆底，::before 画头、::after 画肩。
|
||
⚠️ 这一行的宽度非常紧，加大任何一个数之前先把账算一遍：
|
||
.shelf-book 是 flex-basis:78%，78% 算的是 .shelf-rail 的**内容盒**
|
||
（= 屏宽 - 52），不是屏宽。卡内可用宽度 = 0.78*(W-52) - 28：
|
||
W=320 → 181px W=375 → 224px W=390 → 236px
|
||
这一行要装：头像叠 + 7 + 人数 + 7 + 「免费」≈41。
|
||
⚠️ 人数那截这一版变长了：旧文案 6 个字 ≈69 → 「12.8 万妈妈已领取」≈88（+19）。
|
||
（这里不照抄旧文案原文：test/smoke.js 有一条「旧写法一处都不剩」的全文 grep，
|
||
跑在**构建产物**上，而 CSS 注释是会被 build.js 原样内联进去的 ——
|
||
在注释里写一遍旧文案，就会把那条 grep 打红。）
|
||
（11px 字号下，汉字按 11px、数字按 5.5px、点和空格按 2.75px 估。）
|
||
于是 = 头像叠 + 143：
|
||
→ 375 给头像的预算 224-143 = 81px，6 个（17px 叠 5px，含 padding-left:5）共 77px，仍放得下；
|
||
→ 320 预算只剩 181-143 = 38px。4 个要 53px、3 个要 46px，都装不下，只有 2 个（34px）行。
|
||
人数才是这行的主角，不能让它吃省略号 —— 按「要砍先砍装饰」，
|
||
窄屏这一版从收成 4 个改成收成 2 个，见文件下方那条媒体查询。 */
|
||
.sb-faces{display:flex;flex:0 0 auto;padding-left:5px}
|
||
.sb-faces i{
|
||
width:17px;height:17px;border-radius:50%;
|
||
margin-left:-5px; /* 一个压一个 */
|
||
position:relative;overflow:hidden;
|
||
/* 用 box-shadow 而不是 border 描白边：border 会吃掉 17px 里的内径，
|
||
把本来就只有 17px 的圆挤小；box-shadow 画在盒子外面，不影响布局。
|
||
白边的作用是把叠在一起的两颗头分开，颜色必须跟卡片底色一致。 */
|
||
box-shadow:0 0 0 1.5px var(--sb-bg,#fff);
|
||
}
|
||
/* 后面的盖住前面的，视觉上像一叠卡片从左往右码过来 */
|
||
.sb-faces i:nth-child(1){background:#F0A18C}
|
||
.sb-faces i:nth-child(2){background:#E9BE7C}
|
||
.sb-faces i:nth-child(3){background:#A9C79C}
|
||
.sb-faces i:nth-child(4){background:#8FB4D8}
|
||
.sb-faces i:nth-child(5){background:#BFA0D8}
|
||
.sb-faces i:nth-child(6){background:#EE9A9A}
|
||
/* 头 + 肩，最简剪影。半透明白而不是纯白：压在糖果色底上太扎眼。 */
|
||
.sb-faces i::before,.sb-faces i::after{
|
||
content:'';position:absolute;left:50%;transform:translateX(-50%);
|
||
background:rgba(255,255,255,.9);
|
||
}
|
||
.sb-faces i::before{top:3px;width:6px;height:6px;border-radius:50%}
|
||
.sb-faces i::after{bottom:-1px;width:11px;height:7px;border-radius:6px 6px 0 0}
|
||
/* 窄屏收成 2 个头像。见上面那笔账：320 宽下卡内只有 181px，
|
||
人数文案改长（+19px）之后，留给头像的预算从 57px 掉到 38px ——
|
||
原来收成 4 个（要 53px）已经不够了，只有 2 个（34px）塞得进去。
|
||
头像是装饰，人数是信息，要砍先砍装饰：宁可少两颗球，
|
||
也不能让「12.8 万妈妈已领取」吃省略号变成「12.8 万妈妈已…」。
|
||
360 是这一叠 6 个能完整放下的最小屏宽，所以断点还是 359。 */
|
||
@media (max-width:359px){
|
||
.sb-faces i:nth-child(n+3){display:none}
|
||
}
|
||
|
||
/* 「免费」甩到最右。文件末尾还有一条全局 .pill-free{margin-left:auto}，
|
||
这里显式再写一次：靠一条几百行外的规则来决定这里的排版太脆，
|
||
而且上一版为了不让它靠右，正是在这个位置写了 margin-left:0。
|
||
⚠️ 底色必须写死成不透明白：文件末尾那条 .pill-free 用的是
|
||
rgba(110,154,86,.14)（半透明绿，为详情页的白底列表调的），
|
||
它在本文件里排在下面、同样是单类名，会盖掉上面那条 #E3F0D8。
|
||
半透明绿铺在三张糖果色卡上会各自被染成三种脏色 —— 挪到右边孤零零一颗之后
|
||
尤其明显。白底 + 绿字在粉/绿/紫三张卡上都干净，且三张长一个样。 */
|
||
.sb-row .pill-free{margin-left:auto;flex:0 0 auto;
|
||
background:#fff;color:var(--green);padding:3px 9px;border-radius:8px}
|
||
.pill-free{background:#E3F0D8;color:#5E8646;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:9px}
|
||
/* .pill-get（橙色「立即领取」胶囊）已删：它只在首页书架第一张卡上用过一次，
|
||
那颗假按钮连同这条规则一起去掉了。领取动作在资源详情页底部的 #rdGet。 */
|
||
.unlock{text-align:center;font-size:12.5px;color:var(--muted);margin:16px 0 4px}
|
||
.unlock a{color:var(--brand);font-weight:600}
|
||
|
||
/* ============ 通用页头（档案） ============ */
|
||
.page-hero{padding:calc(env(safe-area-inset-top) + 16px) 20px 62px;color:#fff;background:var(--grad);position:relative;overflow:hidden}
|
||
.page-hero::after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.09);top:-70px;right:-60px}
|
||
.hero-info{display:flex;align-items:center;gap:14px;margin-top:20px;position:relative;z-index:2}
|
||
.hero-info>div:first-child{flex:1;min-width:0}
|
||
.hero-h1{font-size:27px;font-weight:800;letter-spacing:-.5px;margin-bottom:9px}
|
||
.hero-p{font-size:13.5px;opacity:.93;line-height:1.6}
|
||
/* 第二行是「查得到就行」的信息，压一档字号和透明度，
|
||
让标题和第一行先被读到，橙区不再是三行齐平的一堵字 */
|
||
.hero-p.sub{font-size:12px;opacity:.72;margin-top:1px}
|
||
/* 档案页那两行左边站着一个「这周宝宝多大了」的 emoji。
|
||
垫一层半透明白底圆盘，emoji 才不会直接糊在橘色上；
|
||
两行文字整体让开一个图标的位置 —— 就是「往右一点点」那个意思。
|
||
min-width:0 是给里面那个文字 div 的，不然长小名会把圆盘挤扁 */
|
||
.ar-lines{display:flex;align-items:center;gap:11px;margin-top:2px}
|
||
.ar-lines>div{min-width:0}
|
||
.ar-size{flex:0 0 auto;width:44px;height:44px;border-radius:50%;
|
||
background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:25px;line-height:1}
|
||
|
||
/* ---------- 档案页 hero（重排过一次） ----------
|
||
.hero-info 是共用的（.page-hero 现在只有档案页在用）；
|
||
档案页是自上而下四层，所以只在这里把 flex 关掉，不动共用那条。 */
|
||
.ar-hero{display:block}
|
||
/* 页面名。上一版是 .ar-eyebrow —— 13px、opacity .78 的一行小字，
|
||
为了把字号让给孕周。方向没错，但让过头了：这行是整页唯一出现宝宝小名的地方，
|
||
13px 的半透明白压在橙色渐变上，扫过去根本注意不到。
|
||
这一版不用字号抢（25px 还是归 .ar-week），改用「材质」抢：
|
||
半透明白底 + 一圈亮描边 + 毛玻璃，从橙色里浮起来一层 ——
|
||
字还是小的，但边界一有就跳出来了。
|
||
inline-flex 而不是 block：牌子宽度得跟着小名长短走，
|
||
撑满整行就成了色块，不像牌子。max-width 兜住超长小名。
|
||
gap 用 0 + 图标自己挂 margin：三个 flex item 统一 gap 会把
|
||
「小汤圆」和「的成长档案」也撑开 6px，读起来断成两截。
|
||
h1 默认的加粗和外边距在这里全部自己接管。 */
|
||
.ar-title{
|
||
display:inline-flex;align-items:center;gap:0;max-width:100%;
|
||
margin:0 0 12px;padding:5px 12px 5px 10px;
|
||
border-radius:99px;background:rgba(255,255,255,.18);
|
||
border:1px solid rgba(255,255,255,.3);
|
||
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
|
||
font-weight:600;letter-spacing:.2px;
|
||
}
|
||
.ar-t-ico{flex:0 0 auto;margin-right:6px;opacity:.9}
|
||
/* 小名是这枚牌子的重点，比后半句大两档半。省略号是给超长小名兜底的 ——
|
||
它是 flex item，不给 min-width:0 就不肯缩，会把牌子顶出屏幕。 */
|
||
.ar-t-name{font-size:15px;font-weight:800;letter-spacing:-.2px;line-height:1.3;
|
||
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.ar-t-rest{flex:0 0 auto;font-size:12.5px;opacity:.8;white-space:nowrap}
|
||
/* 孕周接手了原来 .hero-h1 的位置。27px 太挤（右边不再有环，但左边多了 44px 圆盘），
|
||
收到 25px，正好和 .ar-size 的高度配平。 */
|
||
.ar-week{font-size:25px;font-weight:800;letter-spacing:-.5px;line-height:1.2}
|
||
/* 孕程细条。i 的宽度由 JS 现写（syncPregnancy），
|
||
过渡时间和进度环那条对齐，两页切过去动感是一样的。 */
|
||
.ar-prog{margin-top:18px;height:5px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
|
||
.ar-prog>i{display:block;height:100%;width:0;border-radius:99px;background:#fff;
|
||
transition:width 1.4s var(--ease)}
|
||
.ar-foot{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;opacity:.86}
|
||
.ar-foot b{font-weight:800;font-size:12.5px}
|
||
/* 四层竖排比原来「两行文字 + 右边一个环」高了约 34px。
|
||
橙区本来就不小，再长一截就压得下面没地方了，所以把底部留白从 62 收到 44。
|
||
.page-body 的负外边距要跟着改同样的数（-46 → -28），
|
||
这两个数的差值才是「白卡顶边离橙区内容的距离」，一直是 16px，
|
||
只改一边白卡就会爬上去盖住「已陪伴 N 天」那行。 */
|
||
#screen-archive .page-hero{padding-bottom:44px}
|
||
#screen-archive .page-body{margin-top:-28px}
|
||
|
||
/* 自动归档卡 */
|
||
.auto-card{background:#fff;border-radius:22px;padding:18px;box-shadow:var(--sh-lg)}
|
||
/* 标题行左边是「● 正在自动归档」，右边顶着当前周次角标 */
|
||
.ac-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:17px;font-weight:800}
|
||
.ac-h-l{display:flex;align-items:center;gap:9px;min-width:0}
|
||
.live-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#5EBE6B;position:relative}
|
||
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(94,190,107,.5);animation:pulse 1.8s ease-out infinite}
|
||
@keyframes pulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
|
||
/* 统计胶囊现在排在生成入口下面，所以间距从这儿给 */
|
||
.ac-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
|
||
.chip-stat{background:#F6F1EC;border-radius:10px;padding:6px 11px;font-size:12px;color:var(--ink-2)}
|
||
.chip-stat b{color:var(--brand)}
|
||
|
||
/* ---- 生成档案入口（周档案 / 完整档案）：并入自动归档卡内 ---- */
|
||
.gen-badge{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--brand);background:rgba(244,89,60,.1);padding:5px 10px;border-radius:9px}
|
||
/* 上面那句说明段落删掉了，这里自己把上间距补回来 */
|
||
.gen-btns{display:flex;gap:10px;margin-top:15px}
|
||
.gen-btn{
|
||
flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;
|
||
background:#F7F1EB;border-radius:16px;padding:12px;color:var(--ink);
|
||
}
|
||
.gen-btn svg{flex:0 0 auto;color:var(--brand)}
|
||
.gen-btn span{display:flex;flex-direction:column;gap:3px;min-width:0}
|
||
.gen-btn b{font-size:14px;font-weight:800;line-height:1.35}
|
||
/* 副标题：原先卡片上那句笼统的说明拆到了这里，每个入口自己解释自己 */
|
||
.gen-btn em{font-size:10.5px;color:var(--muted);font-style:normal;font-weight:600;line-height:1.3;white-space:nowrap}
|
||
|
||
/* ---- 档案图片预览 ---- */
|
||
/* 抬头卡：暖色底 + 白底方形图标，先告诉你手里这张是什么 */
|
||
.pst-hero{display:flex;align-items:flex-start;gap:14px;border-radius:22px;padding:18px;margin-bottom:12px;
|
||
background:linear-gradient(140deg,#FFF3EA,#FAE3D6)}
|
||
.pst-ico{flex:0 0 auto;width:46px;height:46px;border-radius:15px;background:#fff;color:var(--brand);
|
||
display:grid;place-items:center;box-shadow:0 6px 14px rgba(196,110,80,.18)}
|
||
.pst-h-txt{min-width:0}
|
||
.pst-h-title{font-size:18px;font-weight:800;color:#3A2C24}
|
||
.pst-lead{font-size:13px;color:#8B6E5E;line-height:1.7;margin:6px 0 0}
|
||
/* 这张图里装了什么：条数、天数、成图尺寸 */
|
||
.pst-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
|
||
.pst-chip{background:#fff;border-radius:11px;padding:7px 11px;font-size:11.5px;color:var(--ink-2);box-shadow:var(--sh)}
|
||
.pst-chip b{color:var(--brand);font-weight:800;margin-left:3px}
|
||
/* 分享卡的三颗样式胶囊。用站内通用的 .chip，只在这儿管排版。
|
||
320 屏上 .detail-body 内宽 276：三颗 chip 各是 padding 34 + 文字
|
||
（信纸 28 / 成长足迹 56 / 比大小 42）= 62 + 90 + 76 = 228，
|
||
加两道 8px 间距共 244，比 276 富余 32px，不用横滚也不会折行。
|
||
⚠️ 加第四套样式前先按这个算式量一遍，超了就要给这行补 overflow-x:auto。 */
|
||
.pst-tpl{display:flex;gap:8px;margin-bottom:13px}
|
||
/* 完整档案是一页一张 A4，屏幕上就一张张纸往下摞，纸和纸之间留条缝 */
|
||
.pst-pages{display:flex;flex-direction:column;gap:14px}
|
||
/* 白色卡纸把图裱起来，再压一道虚线裁切位，像张待印的样张 */
|
||
.pst-frame{position:relative;padding:10px;border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg);background:#fff;line-height:0}
|
||
.pst-frame::after{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(150,110,88,.2);border-radius:16px;pointer-events:none}
|
||
/* canvas 用 2 倍像素画，这里按容器宽显示 */
|
||
.pst-frame canvas{width:100%;height:auto;display:block;border-radius:12px}
|
||
.pst-tip{font-size:11.5px;color:var(--muted);line-height:1.7;margin:13px 0 0}
|
||
|
||
/* 打印时只留这几张档案图，其它一概不出现在纸上 */
|
||
@media print{
|
||
/* 页边距已经画进画布里了（左边还留了装订边），浏览器不要再套一圈 */
|
||
@page{size:A4;margin:0}
|
||
body *{visibility:hidden}
|
||
#detailPoster,#detailPoster .detail-body,#detailPoster .pst-pages,#detailPoster .pst-frame,#detailPoster canvas{visibility:visible}
|
||
#detailPoster{position:absolute;inset:0;transform:none;overflow:visible;background:#fff}
|
||
#detailPoster .detail-bar,#detailPoster .pst-hero,#detailPoster .pst-chips,#detailPoster .pst-tip,#pstCta{display:none}
|
||
#detailPoster .detail-body{overflow:visible;padding:0}
|
||
/* 卡纸、裁切虚线、纸间缝隙都只是屏幕上的装饰，纸上不要 */
|
||
.pst-pages{display:block;gap:0}
|
||
.pst-frame{box-shadow:none;border-radius:0;padding:0;margin:0}
|
||
.pst-frame::after{display:none}
|
||
.pst-frame canvas{border-radius:0}
|
||
/* 一张画布 = 一张纸。最后一张后面不再断页，否则会多吐一张白纸 */
|
||
#detailPoster .pst-frame{page-break-after:always;break-after:page}
|
||
#detailPoster .pst-frame:last-child{page-break-after:auto;break-after:auto}
|
||
}
|
||
|
||
/* 分段控件 */
|
||
/* 三个分栏各自那行 sec-title 已删（和标签文字重复），
|
||
它原本提供的下间距改由这里给，否则内容会贴着分段控件 */
|
||
.segmented{position:relative;display:flex;background:#EFE7E0;border-radius:20px;padding:5px;margin:22px 0 16px}
|
||
.seg-thumb{position:absolute;top:5px;bottom:5px;left:5px;background:#fff;border-radius:16px;box-shadow:0 3px 10px rgba(150,100,80,.14);transition:transform .38s var(--ease),width .38s var(--ease);z-index:1}
|
||
.seg-btn{position:relative;z-index:2;flex:1;text-align:center;padding:11px 4px;font-size:15px;font-weight:600;color:var(--ink-2);transition:color .25s,font-weight .2s;white-space:nowrap}
|
||
.seg-btn.is-active{color:var(--ink);font-weight:800}
|
||
.seg-btn i{font-style:normal;font-size:12px;color:var(--brand)}
|
||
.seg-panel{display:none}
|
||
.seg-panel.is-active{display:block;animation:fadeUp .38s var(--ease)}
|
||
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
|
||
|
||
/* 成长数据空态（未建档）：.is-empty 由 syncPregnancy 的 pregEmpty 分支挂上。
|
||
演示数字（体重 58.2kg / 日均胎动 31 次 / 双顶径 6.1cm / 体重曲线…）全部无接口数据源，
|
||
对未建档用户是纯假数据，整块隐藏改显示引导；健康态下这层完全不参与，原型观感不变。 */
|
||
.data-empty{display:none;font-size:13px;color:var(--ink-2);line-height:1.9;text-align:center;padding:26px 18px;background:#fff;border-radius:22px;box-shadow:var(--sh)}
|
||
.seg-panel[data-panel="data"].is-empty .data-demo{display:none}
|
||
.seg-panel[data-panel="data"].is-empty .data-empty{display:block}
|
||
|
||
/* 时光轴 */
|
||
.tl-card{background:#fff;border-radius:22px;padding:20px 18px 6px;box-shadow:var(--sh)}
|
||
.tl-item{position:relative;padding:0 0 24px 22px}
|
||
.tl-item::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--brand);z-index:2}
|
||
.tl-item::after{content:"";position:absolute;left:5px;top:14px;bottom:-2px;width:1.6px;background:#F6E1D8}
|
||
.tl-item:last-child::after{display:none}
|
||
.tl-date{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:7px}
|
||
.tl-item:first-child .tl-date{color:var(--brand)}
|
||
.tl-text{font-size:15.5px;line-height:1.78;color:#39302C}
|
||
.tl-text b{color:var(--brand)}
|
||
.tl-from{display:inline-block;margin-top:9px;background:#F6F1EC;border-radius:8px;padding:5px 10px;font-size:11.5px;color:var(--muted)}
|
||
.tl-item.hide{display:none}
|
||
|
||
/* 成长数据 */
|
||
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
|
||
.stat-card{background:#fff;border-radius:16px;padding:13px 12px 8px;box-shadow:var(--sh)}
|
||
.sc-label{font-size:12px;color:var(--ink-2)}
|
||
.sc-value{font-size:24px;font-weight:800;letter-spacing:-.6px;margin:5px 0 3px}
|
||
.sc-value small{font-size:12px;font-weight:700}
|
||
.sc-trend{font-size:12px;font-weight:700;color:var(--brand)}
|
||
.sc-trend.ok{color:var(--green)}
|
||
.sc-trend.purple{color:var(--purple)}
|
||
.spark{width:100%;height:auto;margin-top:8px;display:block}
|
||
.spark polyline{stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1.1s .2s var(--ease) forwards}
|
||
@keyframes draw{to{stroke-dashoffset:0}}
|
||
|
||
.chart-card{background:#fff;border-radius:22px;padding:18px;margin-top:12px;box-shadow:var(--sh)}
|
||
.cc-title{font-size:16px;font-weight:800;margin-bottom:14px}
|
||
.chart{width:100%;height:auto;display:block;overflow:visible}
|
||
.chart .grid{stroke:#F2ECE7;stroke-width:1}
|
||
.chart .band{fill:rgba(160,196,130,.24)}
|
||
.chart .area{fill:rgba(244,89,60,.08)}
|
||
.chart .line{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.3s .15s var(--ease) forwards}
|
||
.chart .pt{fill:#fff;stroke:var(--brand);stroke-width:3}
|
||
.chart .pt.fill{fill:var(--brand);stroke:#fff}
|
||
.cc-x{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:9px;padding:0 2px}
|
||
.cc-legend{display:flex;gap:18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
|
||
.lg{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
|
||
.lg::before{content:"";width:16px;height:4px;border-radius:2px}
|
||
.lg-line::before{background:var(--brand)}
|
||
.lg-band::before{background:rgba(160,196,130,.5)}
|
||
|
||
.meas-card{background:#fff;border-radius:22px;padding:6px 18px;margin-top:12px;box-shadow:var(--sh)}
|
||
.meas{display:flex;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
|
||
.meas:last-child{border:0}
|
||
.m-name{font-size:16px;font-weight:800;flex:0 0 62px}
|
||
.m-bar{flex:1;height:9px;border-radius:5px;background:#E9EFE1;position:relative}
|
||
.m-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--p);background:linear-gradient(90deg,#DCE8CE,#C6DCB0);border-radius:5px}
|
||
.m-bar::after{content:"";position:absolute;left:var(--p,50%);top:50%;width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid var(--brand);transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.12)}
|
||
.m-val{text-align:right;flex:0 0 58px}
|
||
.m-val small{font-size:12px}
|
||
.m-val em{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
|
||
.m-val{font-size:19px;font-weight:800}
|
||
|
||
/* 珍贵时刻 */
|
||
.moment-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
||
.moment{background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--sh);padding-bottom:12px}
|
||
.mo-art{height:104px;display:grid;place-items:center;position:relative}
|
||
/* 扁平图标统一规格：46px、线宽 2.4、圆角端点；
|
||
.f = 半透明白底（让图形从渐变里浮出来），.s = 描边，.d = 实心点 */
|
||
.mo-art svg{width:46px;height:46px;display:block;color:currentColor}
|
||
.mo-art svg .f{fill:#fff;opacity:.66}
|
||
.mo-art svg .s{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
|
||
.mo-art svg .d{fill:currentColor}
|
||
.mo-art.a1{background:linear-gradient(140deg,#EDE7F8,#E3D9F5);color:#6B54BE}
|
||
.mo-art.a2{background:linear-gradient(140deg,#FCE9E4,#FADCD3);color:#D0563F}
|
||
.mo-art.a3{background:linear-gradient(140deg,#E9F2E0,#DDEBD0);color:#5A8A41}
|
||
.mo-art.a4{background:linear-gradient(140deg,#FBEDE4,#F7E0D2);color:#CE6F35}
|
||
.mo-art.a5{background:linear-gradient(140deg,#E2EDF7,#D4E4F4);color:#3C6DA8}
|
||
.mo-art.a6{background:linear-gradient(140deg,#FDEAE0,#FADCCC);color:#C4632F}
|
||
.star{position:absolute;top:8px;right:9px;font-size:17px;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.15);transition:transform .25s var(--ease),color .2s}
|
||
.star.is-on{color:#FFC93C}
|
||
.star:active{transform:scale(1.35)}
|
||
.mo-title{font-size:14.5px;font-weight:800;margin:11px 12px 5px}
|
||
.mo-meta{font-size:11.5px;color:var(--muted);margin:0 12px 7px}
|
||
.mo-from{display:inline-block;margin:0 12px;background:#F6F1EC;border-radius:7px;padding:4px 8px;font-size:11px;color:var(--muted)}
|
||
.moment.hide{display:none}
|
||
|
||
/* 纪念册 */
|
||
.album-card{display:flex;gap:15px;width:100%;background:linear-gradient(120deg,#FCEDE1,#F9E0D0);border-radius:22px;padding:18px;margin-top:22px;box-shadow:var(--sh)}
|
||
.al-book{flex:0 0 82px;height:110px;border-radius:5px 10px 10px 5px;background:linear-gradient(150deg,#F2795A,#E04E2E);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;box-shadow:0 10px 20px rgba(190,80,50,.32),inset 4px 0 0 rgba(255,255,255,.22)}
|
||
.al-leaf{font-size:28px}
|
||
.al-tag{font-size:11.5px;font-weight:800;text-align:center;line-height:1.35}
|
||
.al-title{font-size:17px;font-weight:800}
|
||
.al-title em{font-size:12.5px;color:var(--brand);margin-left:6px}
|
||
.al-desc{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin:7px 0 11px}
|
||
.al-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.75);overflow:hidden}
|
||
.al-bar i{display:block;height:100%;width:var(--p);background:linear-gradient(90deg,#FF8A68,#F0563A);border-radius:4px}
|
||
.al-meta{font-size:11.5px;color:var(--ink-2);margin-top:8px}
|
||
|
||
/* ============ 我的 ============ */
|
||
.me-top{padding:calc(env(safe-area-inset-top) + 18px) 18px 26px;background:var(--grad);border-radius:0 0 32px 32px;color:#fff;position:relative;overflow:hidden}
|
||
.me-top::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);top:-80px;right:-60px}
|
||
/* 齿轮按钮直接挂在 .hero-top 上，没有 .hero-actions 包着，
|
||
够不到那条 margin-left:auto，所以这里单独把这一排改成靠右 */
|
||
.me-top .hero-top{margin-bottom:18px;justify-content:flex-end}
|
||
/* 半透明玻璃压在橘色渐变上永远发灰、发脏，文字也只能跟着用白的，读起来累。
|
||
改成一张实心暖白卡：橘色只做底衬，卡内回到正常的深色文字层级，
|
||
和页面下方的 .preg-card / .list-card 是同一种白卡语言。
|
||
── 底纹改成横向，这是第三版，前两版都被同一句话打回来 ──
|
||
⚠️ 用户为这张卡提过**两次**同样的意见（「加一点渐变，不要纯白色」
|
||
「现在纯白色不好看」）。两次我都只是把色标往深里调 ——
|
||
#FFF7F3 → 加个 52% 中间标 → #FFE9DB，两次都没解决。
|
||
**问题从来不在颜色深浅，在暖色铺到的面积。**
|
||
150deg 是斜的：暖色只落在右下那个角，而卡是 ~300×100 的扁盒子，
|
||
对角线方向上「右下角」小得可怜，正中间和左上恒定是白的。
|
||
色标再往深调，只会把那个小角调脏，卡整体照样读作白。
|
||
→ 所以这一版换成 90deg 横向，让暖色从右边**整片**压过来，
|
||
白区收在左边 20%（正好留给头像）。终点 #FFE4D4 其实只比上一版
|
||
#FFE9DB 深一点点，但观感差别很大 —— 差在面积，不在那点色差。
|
||
→ 下次若还嫌白，**别再动色标**，先想面积和方向。
|
||
⚠️ 横向渐变顺带解开了上一版那条「不能再往深里调」的限制：
|
||
当时的顾虑是终点会和 .me-avatar 的底（linear-gradient(140deg,#FFE6DA,#FBCFBF)）
|
||
糊在一起。那是 150deg 才有的问题 —— 斜渐变把暖色送到了头像所在的左侧中部。
|
||
现在头像坐在左边 20% 的纯白区里，暖色在它右边，两者根本不相邻。
|
||
⚠️ 白区 20% 是给头像留的，别收窄：.me-avatar 是 66px 宽、左边距 18px，
|
||
在 ~300px 的卡上占到约 28%。白区若缩到 20% 以下，头像右半边会开始
|
||
压在暖色上，那圈 box-shadow 的白边就废了（它就是靠白底才划得出边界的）。
|
||
对比度复核（这次是实算的，见下面那笔更正）：底色取渐变终点 #FFE4D4，
|
||
再叠上右上角那团柔光（rgba(255,196,160,.34)）算最坏情况：
|
||
--ink #2B2320 11.70:1 ✓ 远超 AA
|
||
--ink-2 #6B615B 4.58:1 ✓ 刚过 AA 4.5（余量很薄，见下）
|
||
--brand #F4593C 2.52:1 ✗ 不过 AA
|
||
⚠️ 上一版这段注释写着「.me-info p b 用 --brand 约 3.3:1」—— **那个数是错的**，
|
||
3.31:1 是 --brand 压在**纯白**上的值，不是压在 #FFE9DB 上的。
|
||
实算：压 #FFE9DB 是 2.83:1，压现在的 #FFE4D4+柔光是 2.52:1。
|
||
也就是说「已连续记录 **42** 天」那个品牌色数字，**在这一版之前就已经不过 AA**，
|
||
不是这次改坏的，但这次又薄了 0.3。没有一并修，是因为改它要动全站品牌色的
|
||
用法（--brand 压浅底到处都是这个量级），不该夹在一次底纹调整里顺手做。
|
||
要修的话：给 .me-info p b 单独配一个压深版品牌色（约 #C9401F 起步才够 4.5）。
|
||
⚠️ --ink-2 那 4.58 只比 4.5 高 0.08，**别再加深终点或加大柔光**：
|
||
终点走到 #FFE0CC、或柔光提到 .42，它就掉到 4.5 以下了（实算 4.44 / 4.45）。 */
|
||
.me-card{display:flex;align-items:center;gap:14px;border-radius:26px;padding:17px 18px;
|
||
background-color:#fff;
|
||
/* 两层：底下一条横向暖色渐变（白区留给左边的头像），
|
||
上面右上角一团柔光，免得整块暖色看着像一条平铺的色带。
|
||
和首页 .today-line 是同一套手法（那边也是 radial 柔光 + 90deg 渐变）。 */
|
||
background-image:
|
||
radial-gradient(128px 92px at 94% 6%, rgba(255,196,160,.34), rgba(255,196,160,0) 72%),
|
||
linear-gradient(90deg,#fff 0%,#fff 20%,#FFF1E6 58%,#FFE4D4 100%);
|
||
color:var(--ink);
|
||
box-shadow:0 14px 32px rgba(140,56,34,.22),0 2px 6px rgba(140,56,34,.10);
|
||
position:relative;z-index:2;overflow:hidden;cursor:pointer;transition:transform .18s var(--ease)}
|
||
.me-card:active{transform:scale(.985)}
|
||
/* 尖括号跟全站 .chev 一个灰度，别再用白色 */
|
||
.me-chev{margin-left:auto;flex:0 0 auto;font-style:normal;font-size:24px;line-height:1;color:#C9BFB8}
|
||
/* 头像底从「白蒙版 + 白描边」换成暖橘底 + 品牌色剪影（与 .pc-ico 同一套配色）。
|
||
⚠️ 外圈本批从 #FFF3EC 改回了纯 #fff。那圈浅橘白光晕本来是照着
|
||
「卡是白的」调的 —— 卡一变暖（终点 #FFE9DB），#FFF3EC 就夹在
|
||
卡色和头像底色中间，三层暖色叠在一起，那道圈等于消失了。
|
||
用纯白才重新和两边都拉开，头像才有一条清楚的边界。
|
||
别跟着卡的渐变把它也调暖，那就白改了。 */
|
||
.me-avatar{width:66px;height:66px;border-radius:50%;
|
||
background:linear-gradient(140deg,#FFE6DA,#FBCFBF);
|
||
display:grid;place-items:center;color:#EE7C5F;border:0;
|
||
box-shadow:0 0 0 3px #fff,0 6px 14px rgba(196,110,80,.20);
|
||
flex:0 0 auto;position:relative}
|
||
/* 上传头像后用 <img> 盖掉默认剪影；没图时 img 不占位 */
|
||
.me-avatar img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
|
||
.me-avatar.has-img img{display:block}
|
||
.me-avatar.has-img>svg{visibility:hidden}
|
||
/* 白卡上再放白角标会糊掉，所以反过来：品牌色实心 + 白图标，
|
||
外面镶一圈白边，压在头像和卡面的交界处也读得出来 */
|
||
.av-edit{position:absolute;right:-2px;bottom:-2px;width:21px;height:21px;border-radius:50%;
|
||
background:var(--brand);color:#fff;display:grid;place-items:center;
|
||
box-shadow:0 0 0 2px #fff,0 3px 8px rgba(196,80,52,.38)}
|
||
.me-info{flex:1;min-width:0}
|
||
.me-name{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
|
||
/* 原来靠 opacity 压层级，在白底上只会发灰，换成正经的次级文字色 */
|
||
.me-info p{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:5px}
|
||
.me-info p b{color:var(--brand);font-weight:800}
|
||
/* ⚠️ 这里原来有一条 .me-bio（一句话签名的单行截断）。签名整块已按用户要求删掉，
|
||
这条规则跟着删了 —— DOM 里再没有 .me-bio 这个元素。
|
||
留一条永远选不中东西的规则，下一个人读 CSS 会以为页面上还有这行内容，
|
||
然后跑去 JS 里找是谁把它藏起来了。
|
||
要加回签名，四处一起加：#pfBio 输入框 / #meBio 展示行 / syncBio() / 这条规则。 */
|
||
.sec-title.dark{color:var(--ink)}
|
||
|
||
/* ---- 孕期信息卡 ----
|
||
原来是纯白卡，夹在橘色 .me-top 和下面那张暖橘福利卡中间，自己反倒最没存在感。
|
||
⚠️ 这里**不能**也换成暖橘：一页上两张暖卡挨着，等于谁都没被突出，
|
||
而且福利卡（讲「白送你一件东西」）本就该是全页最跳的那张。
|
||
所以这张必须靠色系和邻居错开，两张卡才各自站得住。
|
||
|
||
配色改到第五版了，把前四版为什么被打回来写清楚，别再走一遍：
|
||
v1 纯白 —— 没存在感
|
||
v2 雾蓝 #F2F7FD→#E6EEF9 —— 打回，原话「颜色不是很好」
|
||
v3 薰衣草紫→藕荷粉 #E7DDFA→#F7E4F0 —— 又打回，原话「需要有设计感一些」
|
||
v4 深靛→紫→玫 #4E3FA8→#7C4FCB→#B0417F —— 打回，原话「那个紫太扎眼了」
|
||
⚠️ 复盘的关键在这里：v2 和 v3 是**同一个错**，我第二次才看出来。
|
||
v2 我归因成「两端色相拉得太近」，于是 v3 把色相从 2° 拉到 61°，
|
||
结果还是被打回 —— 说明色相差不是真正的病根。
|
||
**v2 和 v3 都是「浅色水洗」**：三通道全在 220 以上，
|
||
不管两端离多远，整张卡在手机上都只是一小片淡色，
|
||
而它上面就压着一整条饱和橘色的 .me-top。淡色卡贴在浓色条下面，
|
||
再怎么调色相也只会显得虚。所以 v4 不再在浅色里挑颜色，
|
||
直接换成**深色卡 + 白字**：靠明度对比站住，而不是靠色相。
|
||
v4 深靛→紫→玫 #4E3FA8→#7C4FCB→#B0417F —— 打回，原话「那个紫太扎眼了」
|
||
v4 的深色思路**是对的**（打回的是色相，不是明度），所以 v5 原样保留
|
||
「深色卡 + 白字」，只把紫换成绿：
|
||
v5：墨绿 #1E5A46 → 绿 #2C6B4C → 草绿 #3E6B30，白字。
|
||
· 色相 160.0° / 149.6° / 105.8°，仍全在暖橘带（10°–60°）之外，
|
||
和福利卡错开的原始目的没丢；
|
||
· 首尾跨 54.2°，比 v4 的 77.9° 窄，但**远远大于 v2 死掉时的 2°**，
|
||
渐变看得见就够了；
|
||
· 明度上和上下两张浅色卡彻底分开 —— v4 挣来的那一半没退。
|
||
⚠️ 换色时白字对比度**变好了，不是凑合过**（实测，白 #FFF 压在三个色标上）：
|
||
v4 紫 8.08 / 5.47 / 5.37 → 最低 5.37
|
||
v5 绿 8.06 / 6.34 / 6.27 → 最低 6.27
|
||
.pc-sub / .pc-stage 那种 78% 白的副文同理：v4 最低 3.90 → v5 最低 4.54。
|
||
末档特意从更漂亮的 #4A7C3C（白字只有 4.95，**比紫还差**）压深到 #3E6B30，
|
||
就是为了不拿可读性换颜色。改这三个值之前先把这两组数重量一遍。
|
||
⚠️ 别把它调浅回去凑「温柔」。真要调，先想清楚怎么解决
|
||
「淡色卡压在饱和橘条下面显虚」这件事，那是 v2/v3 死掉的地方。
|
||
⚠️ 也别顺手把它调成 --mom 那支绿（#3F7551）。那支是「妈妈这个人」的语义色，
|
||
挪来当一张信息卡的底，等于宣布这张卡属于妈妈 —— 它讲的是宝宝的孕周。
|
||
|
||
⚠️ 换底色必须连带把卡里**所有**彩色件一起换掉，这张卡的坑比别的卡多，
|
||
因为它的零件散在三个地方：
|
||
· 这里（图标底、进度槽、进度条、三段文字、标题、副文）
|
||
· index.html 的 SVG presentation attribute（进度环 + 宝宝，共 4 处）
|
||
· 全局规则里两个**会被继承进来**的颜色 —— 见下面 .chev / .rp 两条
|
||
只改背景会得到「深紫底配浅紫环」，比原来的纯白更难看。 */
|
||
.preg-card{display:block;width:100%;
|
||
/* 两层背景：上层是右上角那点高光，下层才是主渐变。
|
||
⚠️ 用多重背景而不是 ::before 画高光，是为了躲开一个真实的层序坑：
|
||
这张卡带 .ripple（position:relative 但 z-index:auto，**不产生层叠上下文**），
|
||
绝对定位的 ::before 会画在普通流子元素**上面**，高光正好糊住标题；
|
||
改用 z-index:-1 又会穿到祖先背景后面去，还得再补 isolation。
|
||
高光本来就只是背景的一部分，写成背景层这些问题一个都不存在。 */
|
||
background:
|
||
radial-gradient(110px 80px at 86% 6%, rgba(255,255,255,.20), rgba(255,255,255,0) 72%),
|
||
linear-gradient(140deg,#1E5A46 0%,#2C6B4C 46%,#3E6B30 100%);
|
||
border-radius:22px;padding:18px;
|
||
/* 阴影跟着卡片自己的色相走，不用全局那个中性灰 var(--sh)：
|
||
深色卡投一片灰影会显脏，投同色系的影才像这张卡「浮」起来。
|
||
⚠️ 这就是「跟着色相走」的代价：换底色时它**必须一起换**。
|
||
本批之前是 rgba(78,63,168,.30)（v4 紫的 rgb），底换成绿而影还是紫的话，
|
||
卡下面会渗出一圈淡紫 —— 在浅色页面上看得见，但很容易当成「本来就有的氛围」。
|
||
下面这个是 v5 首档 #1E5A46 的 rgb。 */
|
||
box-shadow:0 10px 24px rgba(30,90,70,.30)}
|
||
.pc-row{display:flex;align-items:center;gap:13px}
|
||
.pc-ico{width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:0 0 auto}
|
||
/* ⚠️ 标题这行原来不写 color，靠继承拿到深墨色。底一换成深色，
|
||
不显式写白就是「深紫底上的深墨字」—— 等于没有字。 */
|
||
.pc-title{font-size:21px;font-weight:800;letter-spacing:-.4px;color:#fff}
|
||
.pc-sub{font-size:12.5px;color:rgba(255,255,255,.78);margin-top:4px}
|
||
.pc-main{flex:1;min-width:0}
|
||
/* ⚠️ 这两条挡的是**继承进来的**全局颜色，是这次换色最容易漏的一处 ——
|
||
它们不在这个模块的代码里，grep「preg」「pc-」一个都搜不到：
|
||
· .chev 全局是 #C9BFB8（浅灰），画在深紫底上基本看不见；
|
||
· .rp（涟漪）全局是 rgba(244,89,60,.16)，橘色 16% 铺在深紫上是一团脏影。
|
||
两条都只在这张卡里覆盖，不动全局 —— 别的卡还是浅底，全局值在那儿是对的。 */
|
||
.preg-card .chev{color:rgba(255,255,255,.75)}
|
||
.preg-card .rp{background:rgba(255,255,255,.22)}
|
||
/* 底槽和进度条都改成白的透明度分级：深色卡上再挑一个「更深的紫」当底槽，
|
||
在 9px 高的条子上根本分不出层次 */
|
||
.pc-bar{height:9px;border-radius:5px;background:rgba(255,255,255,.22);margin:16px 0 10px;overflow:hidden}
|
||
.pc-bar i{display:block;height:100%;width:var(--p);background:linear-gradient(90deg,rgba(255,255,255,.85),#fff);border-radius:5px}
|
||
.pc-stage{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.85)}
|
||
/* 当前段从「换个字色」升级成一颗白药丸：深色卡上只靠白色深浅分主次，
|
||
11.5px 的小字拉不开差距；反白一块才一眼看得出走到哪一段了。
|
||
⚠️ margin 上下各 -3px 抵掉 padding，保证这一行的高度和没药丸时一样 ——
|
||
不然这张卡会因为「当前段」比兄弟高 6px 而整体长高。
|
||
⚠️ .cur 是 syncPregnancy() 按孕周在三段之间**搬来搬去**的，
|
||
药丸可能落在第一段或第三段（贴着卡的左右内边）。space-between
|
||
三段都放得下：早/晚期 3 字≈34.5px、中期「孕中期 · 当前」7 字≈80px，
|
||
加内边距最宽 98px，三段合计 167px < 可用 248px。 */
|
||
/* ⚠️ 药丸里的字色是**卡底渐变的首档**，不是随便一个深色 ——
|
||
白药丸是从卡上「挖」出来的，字色取卡自己的深色才像同一张卡上的东西。
|
||
本批底色换绿，这里跟着从 #4E3FA8 换成 #1E5A46（白底上 8.06:1）。
|
||
漏改的话：绿卡上一颗白药丸、里面躺着一个紫字，这是全卡最后一处紫。 */
|
||
.pc-stage .cur{color:#1E5A46;background:#fff;font-weight:700;
|
||
padding:3px 9px;margin:-3px 0;border-radius:99px}
|
||
|
||
/* ---- 试用装福利卡（企业微信入口）----
|
||
和 .preg-card 同样的大圆角，是「我的」页上第二张真正的卡；
|
||
刻意不长得像下面 .list-card 里那些行 —— 它不是一条设置项。
|
||
底色从纯白换成暖渐变：这张卡现在讲的是「白送你一件东西」，
|
||
跟周围一水儿的白底卡拉开，福利感才立得住。 */
|
||
/* ⚠️ 这一版是**竖向三段**（不是四段，别照旧记忆数）：
|
||
.wx-top 角标行（右对齐）/ .wx-body 图文行 / .wx-cta 通栏按钮。
|
||
标题行 .wx-head **不是**卡的直接子元素，它在 .wx-body 的右列 .wx-main 里，
|
||
和价格共用同一条左缘 —— 那是用户要的「放到到手价上边、跟到手价对齐」。
|
||
演化：左右两列 → 三段（标题独占一行）→ 四段（角标再提一行）
|
||
→ 又回到三段（标题行搬进右列）。每一步都是被账或被用户原话逼的。
|
||
⚠️ 两笔账的**分母不一样**，别混用：
|
||
角标行量的是**卡内净宽 248**（320 − 36 − 36）；
|
||
标题行量的是**右列 160**（248 − 图 76 − gap 12）。
|
||
拿 248 去算标题行会得出「宽得很，都塞得下」的反结论。
|
||
角标为什么必须自己占一行（按现在的 160 算）：
|
||
商品名「可心柔婴儿纸巾」7 × 16 = 112，
|
||
再塞 gap 6 + 「限量福利」角标 60 = 178 > 160 ✗ 差 18px。
|
||
而且这还是 1.0 倍；微信字体滑块最大档 1.35 倍下商品名自己就占 151.2，
|
||
160 里只剩 8.8px，角标连一个字都进不去。
|
||
所以角标只能自己占一行、右对齐 —— 那也正是用户要的「放到右上角」。
|
||
⚠️ .wx-card 的 flex-direction 是 column，**不是** row。
|
||
谁改回 row（或删掉 direction 退回默认），三段会并排挤成一条，
|
||
而且**不报错**，只是难看。smoke 钉了一条。
|
||
⚠️ 也别加 flex-wrap：竖排容器里 wrap 只在高度溢出时生效，在这儿是纯噪声，
|
||
还会让下一个人以为有换行逻辑。 */
|
||
.wx-card{display:flex;flex-direction:column;width:100%;
|
||
background:linear-gradient(135deg,#FFF4EC,#FFE6D9);
|
||
border-radius:22px;padding:16px 18px;box-shadow:var(--sh)}
|
||
|
||
/* ---- 第一段：角标行 ----
|
||
⚠️ 用 justify-content:flex-end 把角标推到右上角，**不是** position:absolute。
|
||
这是硬约束不是风格选择：.wx-card 挂着 .ripple，.ripple 带 overflow:hidden
|
||
（style.css:135），任何骑边（绝对定位 / top 负值）的角标都会被裁掉半截 ——
|
||
用户上一轮说的「限量福利被切了」正是这么来的。
|
||
修法也**不是**给卡加 overflow:visible：那会把涟漪放出圆角卡外。
|
||
走正常流 + 右对齐，物理上就不存在被裁的可能。
|
||
⚠️ 这一行只装角标一件，看着「浪费」了一行高度。别为了省它把角标并进别处：
|
||
角标 4×10.5 + 内边 18 = 60px，塞进现在只有 160px 的右列必然溢出，
|
||
而溢出的表现是商品名被省略号啃掉、且不报错。
|
||
18px 行高换商品名完整可见，这笔划算。 */
|
||
.wx-top{display:flex;justify-content:flex-end;margin-bottom:8px}
|
||
|
||
/* ---- 第二段：图文行（图 + 右列） ----
|
||
⚠️ align-items 必须是 **stretch**，不能是 center。这是用户「左边整个的位置
|
||
都是留给图片」那句话的**全部实现**：只有父容器 stretch，下面 .wx-fig 的
|
||
align-self:stretch 才有效，图片才会长满左列整个高度。
|
||
改回 center 的话图片缩回自己的内容高，左边空出一块，
|
||
而且**不报错、不溢出** —— 只有真机上看得出来。smoke 里有断言钉着这条。
|
||
gap 13 → 12：右列从 147px 加宽到 160px，这 1px 也是凑出来的（见 .wx-main）。 */
|
||
.wx-body{display:flex;align-items:stretch;gap:12px;margin-top:12px}
|
||
/* 商品占位图（现在是内联 SVG 抽纸，待换真图）。
|
||
⚠️ 宽度写死在容器上而不是交给里面的 svg/img 自己撑：换成真实商品图那天，
|
||
图的原始比例不会把这一格顶大、把右边标题挤没。
|
||
⚠️ 但**高度故意不写死**，用 align-self:stretch + min-height:92px：
|
||
stretch 让图跟着右列一起长 —— 这是用户「左边整个的位置都是留给图片」
|
||
那句要求的**实现本身**。父级 .wx-body 必须同时是 align-items:stretch，
|
||
缺一条图就缩回自己的内容高，而且不报错、只在真机上看得出来
|
||
（smoke 里两条都钉着）。
|
||
⚠️ min-height:92 本批起**已经不再起作用**，留着只是个地板。
|
||
标题行改竖排之后右列变高了：
|
||
.wx-head = 20.8(标题 16×1.3) + gap 3 + 14.95(限领 11.5×1.3) = 38.75
|
||
+ gap 5 + 26(价格) + gap 5 + 18.1(副文一行) ≈ **92.9**
|
||
（副文折两行时 ≈ 111）
|
||
92.9 恒大于 92，撑高度的活已经全归 stretch 了。别看到这个数就以为
|
||
它还在管事，也别为了「对齐」把它调成 93 —— 调了没有任何效果。
|
||
88 → 76：这是上一版**横排**标题行留下的数（那时右列要塞 152px 的商品名 + 限领）。
|
||
⚠️ 竖排之后这条约束没了：现在右列最宽的是副文 138px，图理论上能回到 88
|
||
（右列剩 148，仍 ≥ 138）。本批**没有改回去** —— 余量会从 22px 掉到 10px，
|
||
而用户这次并没有说图小了。真要动先把下面 .wx-main 那笔账重算一遍。
|
||
⚠️ background 不能省。里面是**内联 svg**，object-fit 对它**不生效** ——
|
||
生效的是 preserveAspectRatio（默认 xMidYMid meet ＝ contain）。
|
||
64×64 的方图进 76×92 的框会上下各留 8px 空条，露出卡的橙色渐变。
|
||
#FFF1E6 取的是 svg 自己那张 <rect> 的颜色，接缝就看不见了。
|
||
别改成 slice（cover）—— 那会把抽纸盒裁掉头尾。 */
|
||
.wx-fig{flex:0 0 76px;width:76px;align-self:stretch;min-height:92px;
|
||
background:#FFF1E6;line-height:0;border-radius:16px;overflow:hidden}
|
||
.wx-fig>svg,.wx-fig>img{display:block;width:100%;height:100%;object-fit:cover}
|
||
/* 角标本体。⚠️ 它现在住在 .wx-top 里（卡的右上角），**不再**是 .wx-main 的
|
||
第一件。别再给它 align-self:flex-start —— 那是它待在右列时用来「缩成胶囊」的，
|
||
现在父容器是 justify-content:flex-end 的单件行，那条已经没有意义。
|
||
⚠️ 这里**永远**不要出现 position:absolute / top 负值，理由见 .wx-top 上面那段。
|
||
「电商化」这一版给它换成了品牌色斜向渐变 + 稍重的投影：促销角标本来就该比
|
||
正文更跳，但仍克制在一枚小胶囊里，不做成撕裂丝带那种廉价样式。 */
|
||
.wx-badge{font-size:10.5px;font-weight:800;
|
||
color:#fff;background:linear-gradient(135deg,#E86A3E,#D8452F);
|
||
border-radius:9px;padding:3px 9px;
|
||
letter-spacing:.3px;box-shadow:0 2px 6px rgba(216,95,56,.32)}
|
||
/* 图文行的右列：竖排 标题行 / 价格 / 副文。
|
||
⚠️ 本批把 .wx-head（商品名 + 限领）**搬进了这一列**，排在 .wx-price 之前。
|
||
用户的原话是「商品名放到到手价上边，跟到手价那个对齐」——
|
||
同属这一列 = 共用同一条左缘 = 「对齐」。别再把它提回卡的直接子元素。
|
||
⚠️ CTA 和角标仍然**不在**这一列（在卡的直接子元素 / .wx-top），别在这儿找。
|
||
⚠️ 320 屏上这一列是 **160px**：
|
||
320 − 页边距 36 − 卡内边距 36 − 图 76 − 一道 gap 12 = 160
|
||
标题行本批起**竖排**，两件各占一整行、互不抢宽度：
|
||
商品名「可心柔婴儿纸巾」7×16 = 112 ✓ 余 48px
|
||
「限领一份」 4×11.5 = 46 ✓ 余 114px
|
||
价格行「到手价」3×11.5 = 34.5 + gap 5 + 「¥0」≈ 26 ≈ 66 ✓ 余 94px
|
||
副文「加小汤圆的孕育顾问领取」11×12.5 ≈ 138 ✓ 余 22px（允许折两行）
|
||
⚠️ 全列最紧的一行现在是**副文**（138/160，余 22px），不再是标题行。
|
||
上一版标题行横排、只余 8px，微信那个全局字体滑块一调大就把商品名啃成
|
||
「可心柔婴儿纸…」—— 那正是用户本批报的 bug，别把它装回来。
|
||
justify-content:center 保留：右列自己现在就有 92.9px 高、和图基本齐平，
|
||
正常情况下居中不产生位移；它兜的是「以后图被调高」那种情形。 */
|
||
.wx-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px}
|
||
/* ---- 标题行（住在 .wx-main 里，右列的第一件） ----
|
||
⚠️ 对齐用的是 flex-end（底对齐），**不是** baseline，虽然 baseline 才是
|
||
两段不同字号文字并排的正解。原因是 .wx-title 带 overflow:hidden
|
||
（ellipsis 必须的）—— 按 CSS Inline / Flexbox 的规定，overflow 非 visible
|
||
的块容器**没有可用基线**，浏览器会拿它的 border box 底边合成一条，
|
||
结果就是「限领一份」被顶到标题上方去，看着像上标。
|
||
这个坑不会报错、只在真机上看得出来。
|
||
底对齐的残留误差（字号降了之后重算过）：标题 15px/1.3 = 19.5 高，
|
||
基线离底边 (19.5−15)/2 + 0.12×15 ≈ 4.05px；限领 10.5px/1.3 = 13.65 高，
|
||
基线离底边 (13.65−10.5)/2 + 0.12×10.5 ≈ 2.84px。
|
||
两条基线差 ≈ 1.2px —— 肉眼看不出来，比 baseline 塌掉那种错法小一个量级。
|
||
gap 6 → 5：右列 160px 里要塞 105 + 42 = 147，gap 只能给 5 才留得下 8px 余量。
|
||
|
||
==== 本批改成竖排，上面这整段横排的账作废（留着是为了说明为什么不能改回去）====
|
||
用户报「商品名被切成『可心柔婴儿纸…』」。真因不是写错了，是那 8px 余量本身：
|
||
它是按 15px 字号**死算**出来的，而微信有一个全局字体大小滑块，用户一旦调大，
|
||
105px 的商品名当场涨到 130+，8px 余量瞬间蒸发，ellipsis 就啃掉了商品名。
|
||
横排方案的根子问题是「两件抢同一条 160px」，再怎么调字号都只是把临界点往后推。
|
||
竖排之后标题独占整行，商品名可用宽度从 113(160−5−42) 变成 160，
|
||
放大 1.5 倍都还装得下 —— 宽度争抢从根上消失了。
|
||
⚠️ 别改回 flex-direction:row 去「省一行高度」，那等于把这个 bug 装回来。
|
||
⚠️ align-items:flex-start 不能省：默认 stretch 会把两个 span 拉成满列宽，
|
||
「限领一份」的灰底/间距一旦以后加上去就会横贯整列。 */
|
||
.wx-head{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
|
||
/* ---- 标题行的两件 ----
|
||
⚠️ 上一版这两件横排、抢同一条 160px，所以配过一组「伸缩性相反」的规则
|
||
（.wx-title flex:1 1 auto 可压缩，.wx-lim flex:0 0 auto 不可压缩，
|
||
意思是「真溢出时宁可啃商品名，也不让那句话消失」）。
|
||
**本批改竖排之后那组 flex 规则已经全部删掉**：两件各占一整行，
|
||
「谁先被压缩」这个问题根本不存在了。
|
||
⚠️ 别再照着那套旧描述往回加 flex:1 1 auto / flex:0 0 auto ——
|
||
在 column 容器里它们管的是**高度**，加上去只会让这两行开始互相挤压。
|
||
⚠️ min-width:0 保留，配合 max-width:100%。.wx-head 现在是 column flex，
|
||
这两个 span 在交叉轴上仍会被长内容撑出去；两条一起才能保证超长商品名
|
||
在本列内触发 ellipsis，而不是把整张卡顶宽。
|
||
⚠️ 字号 15 → 16。上一版压到 15 是横排时被 160px 挤的（16.5 会当场溢出）；
|
||
竖排之后标题独占整行，7 字 × 16 = 112 ≤ 160，还剩 48px ——
|
||
够微信字体滑块放大到 1.42 倍仍不触发省略号。
|
||
没直接回到 16.5 是留一档安全余量：16.5 时只剩 1.38 倍。
|
||
⚠️ ellipsis 三件套（overflow/text-overflow/white-space）保留当兜底。
|
||
现在它基本不该再触发 —— 真触发了说明字号又被谁调大了，去看上面那笔账。 */
|
||
.wx-title{max-width:100%;min-width:0;font-size:16px;font-weight:700;color:var(--ink);
|
||
line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
/* 「限领一份」。本批按用户要求移到商品名**下面独占一行**（原来并排在右侧）。
|
||
它是商品名的附注，不该和商品名一样重，所以仍是小字。
|
||
⚠️ 字号 10.5 → 11.5，和资源库 banner 的 .rlg-lim 对齐。
|
||
这是补一个真实的不一致：用户早先要求两张卡「一模一样」，但上一版
|
||
这边被 160px 逼到 10.5、那边是 11.5 —— 文案逐字相同、**字号却差一档**，
|
||
并排看得出来。竖排腾出宽度后没有理由再小一档了。
|
||
（smoke 那条断言只比对文案字符串，比不出字号差，所以它一直是绿的。）
|
||
⚠️ 文案和 .rlg-lim **必须逐字相同**，smoke 里有断言钉着。改这句就得同时改那句。
|
||
⚠️ 现在这行有整整 160px，「（每人限领一份）」8 字 × 11.5 = 92 也放得下 ——
|
||
但本批**不擅自改回长文案**：用户这次只要求挪位置，没说要改字。
|
||
⚠️ 别把这句合回 .wx-title 凑成一个字符串：合成一个字符串就只剩一个字号，
|
||
「限领」不再是商品名底下那行灰色小字，用户要的那个视觉层级整个没了。
|
||
颜色比 --ink-2(#6B615B) 再淡一档。这里写死不用变量：全站没有 --ink-3，
|
||
var(--ink-3,#…) 那种写法会让人误以为存在这么个变量。 */
|
||
/* ⚠️ 这里**没有** align-self:flex-start，是特意删掉的，别再加回来：
|
||
父级 .wx-head 已经写着 align-items:flex-start，子项上再写一遍是句空话。
|
||
变异测试把它删掉时一条断言都不红 —— 不是断言漏了，是它本来就不产生效果。
|
||
（.rlg-lim 那处一模一样，也一并删了。） */
|
||
.wx-lim{white-space:nowrap;font-size:11.5px;color:#8E827C;line-height:1.3}
|
||
/* ---- 价格行 ----
|
||
这一版「电商化」唯一新增的语义件：一个小号「到手价」+ 一个大号「¥0」。
|
||
⚠️ 只有到手价，**没有划掉的原价**。原价得编一个数字，而这是真实品牌的
|
||
真实商品，划线价属于价格宣称，编一个就是虚假标价。
|
||
「¥0」不是新承诺 —— 它就是这张卡从第一版起写着的「立即免费领取」
|
||
换成电商的排版语言再说一遍。
|
||
⚠️ <i> 必须显式 font-style:normal：浏览器默认样式会把它斜过来，
|
||
中文没有真正的斜体，浏览器只能几何倾斜，糊得厉害。
|
||
这里用 <i>/<b> 而不是两个 <span>，是为了在 HTML 里一眼能分出主次。 */
|
||
/* ⚠️ margin-top 去掉了：.wx-main 现在是 justify-content:center 的竖列，
|
||
价格和副文靠 gap:5px 拉开。留着 margin-top 会和 gap 叠加，把这一列顶偏。
|
||
这里 align-items:baseline 是**安全**的（和 .wx-head 那处相反）：
|
||
这两件都是普通行盒，没有 overflow:hidden，基线是真实存在的。 */
|
||
.wx-price{display:flex;align-items:baseline;gap:5px}
|
||
.wx-price>i{font-style:normal;font-size:11.5px;color:var(--ink-2)}
|
||
.wx-price>b{font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.5px;line-height:1}
|
||
/* ⚠️ 这一行装的是「加<小名>的孕育顾问领取」，而小名那格是 maxlength="12"，
|
||
整句能到 20 字上下。
|
||
所以必须是两行截断，不能沿用原来的单行省略 ——
|
||
单行会把后半截（含小名）整个吃掉，而 textContent 不受 CSS 截断影响，
|
||
测试里那条 /小汤圆/ 照样绿，屏幕上却什么都看不见。这是个静默失败。 */
|
||
/* ⚠️ margin-top 同样去掉了，理由和 .wx-price 一样：父列已经有 gap:5px。 */
|
||
.wx-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
|
||
font-size:12.5px;color:var(--ink-2);line-height:1.45;overflow:hidden}
|
||
/* ---- 第四段：通栏 CTA ----
|
||
用实心按钮而不是一个 › ：这张卡要的是「点我」，不是「还有下一层」。
|
||
现在它是 .wx-card 的**直接子元素**，靠 column 容器的 stretch 铺满整卡 248px
|
||
（上一版只占右列 159px）。整卡宽的实心按钮是电商卡的标准收尾。
|
||
⚠️ 别再给它 flex:0 0 100%。那是更早一版配合 .wx-card 的 flex-wrap 用的；
|
||
在 column 容器里 flex-basis 作用于**高度**，会把这条按钮拉成整卡高。
|
||
⚠️ text-align:center 不能省：全局 button{text-align:left}（style.css:80）
|
||
会一路继承下来，不写死的话文字贴在左边，看着像一条被拉长的标签。 */
|
||
.wx-cta{margin-top:13px;text-align:center;font-size:15.5px;font-weight:800;color:#fff;
|
||
background:linear-gradient(135deg,#E86A3E,#D8452F);
|
||
border-radius:14px;padding:12px;letter-spacing:.3px;
|
||
box-shadow:0 4px 12px rgba(216,95,56,.3)}
|
||
|
||
.list-card{background:#fff;border-radius:22px;padding:0 16px;box-shadow:var(--sh)}
|
||
.li{display:flex;align-items:center;gap:13px;width:100%;padding:16px 0;border-bottom:1px solid var(--line)}
|
||
.li:last-child{border:0}
|
||
/* 列表图标已全部换成扁平描边矢量，各自给一个与底色同系的描边色 */
|
||
.li-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
|
||
.li-ico.y{background:#F4F0D8;color:#9A8A2E}
|
||
.li-ico.p{background:#EFE9FA;color:#7B5FD4}
|
||
.li-ico.o{background:#FBEDE3;color:#DE7443}
|
||
.li-ico.b{background:#E6EFF8;color:#4478BC}
|
||
.li-ico.r{background:#FBE9E7;color:#C33A2E}
|
||
.li-t{font-size:16.5px;font-weight:700}
|
||
.li-v{margin-left:auto;font-size:13px;color:var(--brand);font-weight:600}
|
||
.li .chev{margin-left:auto}
|
||
.li-v + .chev{margin-left:6px}
|
||
|
||
/* ============ 详情页 ============ */
|
||
.detail{
|
||
position:absolute;inset:0;z-index:80;background:var(--bg);
|
||
transform:translateX(100%);transition:transform .38s var(--ease);
|
||
display:flex;flex-direction:column;
|
||
}
|
||
.detail.show{transform:none;box-shadow:-10px 0 30px rgba(0,0,0,.1)}
|
||
.detail-bar{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 14px) 18px 12px;background:rgba(248,243,239,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
|
||
.dt-back{font-size:32px;line-height:.7;color:var(--ink);width:34px}
|
||
.dt-title{font-size:17px;font-weight:800}
|
||
.dt-star{margin-left:auto;font-size:23px;color:var(--muted);transition:transform .25s var(--ease)}
|
||
.dt-star.on{color:#FFC93C}
|
||
.dt-star:active{transform:scale(1.3)}
|
||
.detail-body{flex:1;overflow-y:auto;padding:22px 22px 40px}
|
||
.detail-body::-webkit-scrollbar{display:none}
|
||
.dl-btn{flex:1;text-align:center;padding:15px;border-radius:22px;font-size:15.5px;font-weight:700;transition:transform .16s}
|
||
.dl-btn:active{transform:scale(.96)}
|
||
.dl-btn.ghost{background:#fff;color:var(--ink-2);box-shadow:var(--sh)}
|
||
.dl-btn.main{background:var(--brand);color:#fff;box-shadow:0 10px 22px rgba(244,89,60,.34)}
|
||
|
||
.dt-plain{margin-left:auto;line-height:1;color:var(--ink-2);width:30px;height:30px;display:grid;place-items:center}
|
||
.dt-plain:active{opacity:.5}
|
||
.d-sec{display:flex;align-items:center;font-size:16.5px;font-weight:800;color:var(--ink);margin:26px 0 13px}
|
||
.d-sec .sec-more{font-size:12.5px}
|
||
|
||
/* ============ 设置与服务 二级页 ============ */
|
||
.st-lead{font-size:13.5px;line-height:1.75;color:var(--ink-2);margin-bottom:4px}
|
||
.st-card{background:#fff;border-radius:22px;padding:0 16px;box-shadow:var(--sh)}
|
||
.st-card:first-child{margin-top:16px}
|
||
.st-row{display:flex;align-items:center;gap:12px;width:100%;padding:15px 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
|
||
.st-row:last-child{border-bottom:0}
|
||
.st-rt{font-size:15.5px;font-weight:700;min-width:0}
|
||
/* 副标题挂在标题下面，em 撑成块级，行内不会把开关挤走 */
|
||
.st-rt em{display:block;font-size:12px;font-weight:500;font-style:normal;color:var(--muted);margin-top:3px;line-height:1.5}
|
||
.st-rv{margin-left:auto;font-size:12.5px;color:var(--muted);flex:0 0 auto;max-width:52%;text-align:right}
|
||
.st-row .chev{margin-left:auto;color:var(--muted)}
|
||
.st-rv + .chev{margin-left:6px}
|
||
/* 注意：不能叫 .st-txt —— 首页「今日成长脚印」的文字已经占了这个名字，
|
||
同名会把 padding 和分隔线漏到首页去，所以这里用 .st-para */
|
||
.st-para{font-size:14px;line-height:1.85;color:var(--ink-2);padding:15px 0;border-bottom:1px solid var(--line)}
|
||
.st-para:last-child{border-bottom:0}
|
||
/* 开关：轨道 40×24，圆点 18，开时右移 16px（40-18-2×3） */
|
||
.st-row.sw{cursor:pointer}
|
||
.sw-track{margin-left:auto;flex:0 0 auto;width:40px;height:24px;border-radius:12px;background:#E2DAD3;position:relative;transition:background .24s var(--ease)}
|
||
.sw-track b{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .24s var(--ease)}
|
||
.st-row.sw.on .sw-track{background:var(--brand)}
|
||
.st-row.sw.on .sw-track b{transform:translateX(16px)}
|
||
/* 关于页的品牌头 */
|
||
.st-about{text-align:center;padding:14px 0 22px}
|
||
.st-logo{width:78px;height:78px;margin:0 auto 14px;border-radius:22px;background:linear-gradient(140deg,#FDE3D6,#F9C9B4);display:grid;place-items:center;box-shadow:var(--sh)}
|
||
.st-logo svg{width:46px;height:46px}
|
||
.st-appname{font-size:20px;font-weight:800;letter-spacing:-.3px}
|
||
.st-ver{font-size:12.5px;color:var(--muted);margin-top:6px}
|
||
|
||
/* ============ AI 小结详情 ============
|
||
页面节奏：深 → 浅 → 线。
|
||
① 今日卡是全页唯一的深色块，一进来眼睛就落在它上面；
|
||
② 三条建议是白卡，靠左侧分类色条区分主题；
|
||
③ 往期是一条时间轴，弱化成背景信息。
|
||
原来三段都是同一种白卡罗列，谁也不比谁重要，所以看着散。 */
|
||
.ai-body{background:linear-gradient(180deg,#FFF6F1 0%,var(--bg) 240px)}
|
||
|
||
/* ---- ① 今日卡 ---- */
|
||
.ai-today{position:relative;overflow:hidden;border-radius:26px;padding:20px 20px 6px;
|
||
background:linear-gradient(145deg,#4A3A34 0%,#6B4A3C 55%,#8A5340 100%);
|
||
box-shadow:0 18px 34px rgba(90,58,44,.3)}
|
||
/* 两团柔光，让深色底不至于死板；纯 CSS，不额外加图 */
|
||
.ai-glow{position:absolute;width:190px;height:190px;border-radius:50%;pointer-events:none;
|
||
background:radial-gradient(circle,rgba(255,166,120,.5),transparent 70%);top:-96px;right:-54px}
|
||
.ai-glow.b{width:150px;height:150px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);
|
||
top:auto;right:auto;bottom:-72px;left:-40px}
|
||
.ai-t-top{position:relative;display:flex;align-items:center;gap:8px}
|
||
.ai-week{font-size:12.5px;font-weight:800;color:#FFD9C4;background:rgba(255,255,255,.14);
|
||
padding:5px 10px;border-radius:8px}
|
||
.ai-date{margin-left:auto;font-size:12px;color:rgba(255,255,255,.62)}
|
||
/* 今日状态：一枚小圆点 + 两个字，替掉原来那个撑场面的大引号 */
|
||
.ai-mood{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:16px;
|
||
font-size:12.5px;font-weight:800;color:#FFC9A8;letter-spacing:1px}
|
||
.ai-mood::before{content:"";width:7px;height:7px;border-radius:50%;background:#7BD3A0;
|
||
box-shadow:0 0 0 4px rgba(123,211,160,.22)}
|
||
.ai-hero-txt{position:relative;font-size:19px;font-weight:700;line-height:1.75;color:#fff;
|
||
margin:9px 0 0;letter-spacing:.2px}
|
||
.ai-stats{position:relative;display:flex;margin-top:18px}
|
||
.ai-st{flex:1;text-align:center;padding:14px 4px 16px;position:relative}
|
||
/* 竖分隔线用伪元素，比 border 好控制：首列不画，避免左边多一道 */
|
||
.ai-st+.ai-st::before{content:"";position:absolute;left:0;top:16px;bottom:18px;width:1px;
|
||
background:rgba(255,255,255,.16)}
|
||
.ai-st b{display:block;font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px}
|
||
.ai-st span{display:block;font-size:11.5px;color:rgba(255,255,255,.6);margin-top:5px}
|
||
/* 和昨天比的涨跌，只是补充信息，做得很轻 */
|
||
.ai-st em{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;margin-left:4px;
|
||
color:#8FDCB0;vertical-align:2px}
|
||
.ai-st em.dn{color:#FFB59B}
|
||
.ai-st em.eq{color:rgba(255,255,255,.45)}
|
||
|
||
/* ---- 段落小标题：序号 + 标题 + 一条延伸到底的细线 ---- */
|
||
.ai-sec{display:flex;align-items:center;gap:9px;margin:26px 0 13px}
|
||
.ai-sec-n{font-size:11px;font-weight:800;color:var(--brand);background:rgba(244,89,60,.1);
|
||
padding:3px 7px;border-radius:6px;letter-spacing:.5px}
|
||
.ai-sec h3{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.2px}
|
||
.ai-sec-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(0,0,0,.09),transparent)}
|
||
|
||
/* ---- ② 三条建议：每张卡一个主题色 ---- */
|
||
.ai-tips{display:flex;flex-direction:column;gap:11px}
|
||
.ai-tip{position:relative;overflow:hidden;background:#fff;border-radius:18px;
|
||
padding:15px 17px 16px 19px;box-shadow:var(--sh)}
|
||
/* 左边一道竖色条，四张卡换四种颜色，扫一眼就知道在讲哪方面 */
|
||
.ai-tip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
|
||
/* 右上角一个巨大的浅色序号，纯装饰，撑住卡片右侧的空 */
|
||
.at-n{position:absolute;top:-8px;right:10px;font-size:52px;font-weight:800;line-height:1;
|
||
color:var(--c);opacity:.09;pointer-events:none;user-select:none}
|
||
.ai-tip.c-p{--c:#F2795A}
|
||
.ai-tip.c-g{--c:#5AB98C}
|
||
.ai-tip.c-b{--c:#5E93D8}
|
||
.ai-tip.c-y{--c:#E0A63C}
|
||
.ai-tip.c-r{--c:#D9739B}
|
||
.at-cat{display:inline-block;font-size:11px;font-weight:800;color:var(--c);
|
||
background:color-mix(in srgb,var(--c) 12%,#fff);padding:4px 9px;border-radius:7px;letter-spacing:.5px}
|
||
/* color-mix 不支持的老浏览器上，上一行整条声明会被丢弃、底色变透明，
|
||
所以先垫一层带透明度的同色底作为兜底 */
|
||
@supports not (background:color-mix(in srgb,red 10%,#fff)){
|
||
.at-cat{background:rgba(0,0,0,.05)}
|
||
}
|
||
.at-head{font-size:15.5px;font-weight:800;line-height:1.6;color:var(--ink);margin:10px 0 5px;
|
||
padding-right:24px}
|
||
.at-txt{font-size:13.5px;line-height:1.75;color:var(--ink-2)}
|
||
|
||
/* ---- ③ 往期：一条竖线串起来的时间轴 ---- */
|
||
.ai-logs{position:relative;display:flex;flex-direction:column;gap:8px;padding-left:22px}
|
||
.ai-logs::before{content:"";position:absolute;left:5px;top:16px;bottom:16px;width:2px;
|
||
border-radius:2px;background:linear-gradient(180deg,#F6D8C8,rgba(246,216,200,0))}
|
||
.ai-log{position:relative;display:block;width:100%;text-align:left;background:#fff;
|
||
border-radius:16px;padding:13px 15px;box-shadow:var(--sh)}
|
||
.al-dot{position:absolute;left:-21px;top:19px;width:9px;height:9px;border-radius:50%;
|
||
background:#fff;border:2px solid #EFC7B4;transition:.2s}
|
||
/* 原来点一条会把它标成 .is-on（当前正在看的那天）。现在点了是弹窗，
|
||
看完就关，不存在「停留在某一天」，高亮改成按下去的一瞬间 */
|
||
.ai-log:active{background:#FFF6F1;box-shadow:0 8px 18px rgba(214,120,86,.16)}
|
||
.ai-log:active .al-dot{border-color:var(--brand);background:var(--brand);
|
||
box-shadow:0 0 0 4px rgba(244,89,60,.15)}
|
||
.al-date{font-size:13.5px;font-weight:700;color:var(--ink)}
|
||
.al-week{font-size:11.5px;color:var(--brand);margin-left:8px;font-weight:600}
|
||
.al-txt{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
|
||
/* ============ 资源列表 / 资源内容 ============ */
|
||
/* ---- 试用装福利 banner ----
|
||
和「我的」页那张 .wx-card 同一件事、同一套暖色、结构也一样
|
||
（标题行 / 图文行 / 通栏 CTA 三段竖排），但仍然**不复用**它的类：
|
||
两边的尺寸账不同（图 68×60 vs 88×88、字号各小一档、页边距也不一样），
|
||
共用一个类只会逼出一堆 .detail-body .wx-card{...} 的覆盖规则。
|
||
⚠️ 两套类名各自独立，所以**改一边要记得改另一边** —— 角标裁切这个 bug
|
||
当初就是只在这边被发现、那边照抄了同样的写法又犯一次。
|
||
⚠️ 布局同 .wx-card：**竖向三段** —— .rlg-head 标题行 / .rlg-body 图文行
|
||
/ .rlg-cta 通栏按钮。所以 flex-direction 是 column，不是 row。
|
||
⚠️ 320 屏上的宽度账（**这一版重算过**）：
|
||
卡内净宽 = 320 − 页边距 44（.detail-body 左右各 22）− 卡内边距 28 = 248，
|
||
和「我的」页那张卡一样宽（那边是 320 − 36 − 36）。两边数字撞在一起是巧合，
|
||
别当成一个可以共享的常量。
|
||
标题行（本批起**竖排**，跟 .wx-card 同步，两件各占一整行）：
|
||
「可心柔婴儿纸巾」7 × 16 = 112 ≤ 248 ✓ 余 136px
|
||
「限领一份」 4 × 11.5 = 46 ≤ 248 ✓ 余 202px
|
||
图文行右列 = 248 − 图 68 − gap 10 = 170px：
|
||
角标「福利」2 × 10 + 内边 16 = 36 ✓
|
||
价格行「到手价」3 × 11 = 33 + gap 5 + 「¥0」19px 两个半角 ≈ 21 → 59 ✓
|
||
副文「加小汤圆的孕育顾问领取」11 × 12 = 132 ✓（且允许折两行）
|
||
CTA 通栏 248px（上一版只有 170px）。
|
||
⚠️ 为什么当初要拆成「标题行升到卡的直接子元素」这个结构：更早那一版是
|
||
左右两列、标题挤在 170px 的右列里，横排的商品名 + 限领要 218px，放不下。
|
||
标题行升上来拿到通栏 248px 才排得开。
|
||
⚠️ 本批标题行又从横排改成了竖排（跟 .wx-card 同步，理由见那边），
|
||
于是 218px 那笔账作废了 —— 但**结构不要退回去**：退回右列之后
|
||
商品名只剩 170px，和「我的」页那张的 160px 一样会被字体滑块顶爆。
|
||
⚠️ 尺度刻意比 .wx-card 小一号（图不放大到 88、字号各降一档）：
|
||
那边四周是空的，这条 banner 下面紧跟着 128 条资源列表，
|
||
照搬那边的尺寸会把资源列表整个顶出首屏。 */
|
||
.rl-gift{display:flex;flex-direction:column;width:100%;text-align:left;
|
||
background:linear-gradient(135deg,#FFF4EC,#FFE2D2);
|
||
border-radius:20px;padding:12px 14px;margin:0 0 14px;box-shadow:var(--sh)}
|
||
/* ⚠️ 用逐元素的 .rl-gift.hide，不引入全局 .hide，更不用 hidden 属性：
|
||
全项目零处使用 hidden，而 .letter-card.hide / .moment.hide 这套
|
||
逐元素写法是既有惯例，跟着走。
|
||
（测试里两条都断言：既查 .hide 类，也查算出来的 display —— jsdom
|
||
自带 [hidden]{display:none}，光量 display 的话用 hidden 属性
|
||
也能蒙混过关。） */
|
||
.rl-gift.hide{display:none}
|
||
/* ⚠️ 和 .wx-badge 同一个故事：上一版是 position:absolute;top:-7px 骑在卡上边缘，
|
||
被 .rl-gift 身上 .ripple 的 overflow:hidden（style.css:135）裁掉一半，
|
||
「福利」两个字只露出下半截。这是**比 .wx-badge 更早**就存在的老问题。
|
||
改成流内标签之后不可能再被裁。别改回绝对定位。 */
|
||
.rlg-badge{align-self:flex-start;font-size:10px;font-weight:700;
|
||
color:#fff;background:var(--brand);border-radius:8px;padding:2px 8px;
|
||
letter-spacing:.5px;box-shadow:0 2px 6px rgba(216,95,56,.28)}
|
||
/* ---- 第一段：标题行 ----
|
||
⚠️ align-items 用 flex-end 不用 baseline，理由和 .wx-head 一模一样：
|
||
.rlg-title 带 overflow:hidden，按规范它没有可用基线，浏览器会拿
|
||
border box 底边合成一条，「（每人限领一份）」会被顶成上标。
|
||
改这条之前先读 .wx-head 上面那段注释。
|
||
|
||
==== 本批同样改成竖排，上面那段 flex-end 的理由随横排一起作废 ====
|
||
这一张其实排得下（248px 通栏，横排余 30px），改它纯粹是为了和「我的」页那张
|
||
保持一致 —— 用户早先要求两张卡「一模一样」，一张横排一张竖排并排看就是两个东西。
|
||
竖排之后也不再有「没有可用基线」那个坑：两件不在同一行，压根不需要对基线。
|
||
⚠️ 别只改一边。这两张卡的标题行是**成对**的，动一张就得动另一张。 */
|
||
.rlg-head{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
|
||
/* ---- 第二段：图文行 ---- */
|
||
.rlg-body{display:flex;align-items:center;gap:10px;margin-top:9px}
|
||
/* 同时管占位的 <svg> 和以后换上的 <img>，换真图时这段不用动 */
|
||
.rlg-fig{flex:0 0 auto;width:68px;height:60px;display:block;border-radius:12px;
|
||
object-fit:cover;background:#FFF9F5}
|
||
/* 图文行的右列：竖向，默认 stretch，所以价格行/副文自动满列宽；
|
||
只有角标 align-self:flex-start 缩成胶囊。
|
||
⚠️ 标题和 CTA 已经不在这一列里了（升到 .rlg-head 和卡的直接子元素）。 */
|
||
.rlg-main{flex:1;min-width:0;display:flex;flex-direction:column}
|
||
/* ⚠️ 竖排之后两件不再抢同一条宽度，「谁先被压缩」这个问题整个消失了。
|
||
ellipsis 三件套留着当兜底，正常不该触发。字号 15 → 16，和 .wx-title 同步。 */
|
||
.rlg-title{max-width:100%;min-width:0;font-size:16px;font-weight:700;color:var(--ink);
|
||
line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
/* 「限领一份」，和「我的」页 .wx-lim 同一句、同样是小字、
|
||
本批起同样排在商品名**下面独占一行**（原来在标题右侧）。
|
||
⚠️ 这两条规则现在字号也一致了（都 11.5）。上一版这边 11.5、那边被挤到 10.5，
|
||
文案逐字相同但字号差一档 —— 那种「几乎一样」比明显不同更难发现。 */
|
||
/* 同 .wx-lim：不写 align-self，父级 .rlg-head 的 align-items:flex-start 已经管了。 */
|
||
.rlg-lim{white-space:nowrap;font-size:11.5px;color:#8E827C;line-height:1.3}
|
||
/* 价格行，和 .wx-price 同构、字号各降一档。同样只有到手价、没有编出来的划线价。
|
||
⚠️ <i> 得显式 font-style:normal，否则浏览器默认样式把中文几何倾斜，糊得厉害。 */
|
||
.rlg-price{display:flex;align-items:baseline;gap:5px;margin-top:6px}
|
||
.rlg-price>i{font-style:normal;font-size:11px;color:var(--ink-2)}
|
||
.rlg-price>b{font-size:19px;font-weight:800;color:var(--brand);letter-spacing:-.5px;line-height:1}
|
||
/* 副标题只讲「怎么领」，**不再兼当 CTA** —— 下面有真按钮了。
|
||
⚠️ 从单行省略改成了两行截断。这行现在由 syncBabyWords() 写入
|
||
「加<小名>的孕育顾问领取」，小名 maxlength="12"，整句能到 20 字 ≈ 240px，
|
||
而右列只有 170px —— 再用 nowrap+ellipsis 会把「领取」连同小名一起吃掉，
|
||
偏偏 textContent 查得到，测试还是绿的。和 .wx-sub 栽的是同一个坑。 */
|
||
.rlg-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
|
||
font-size:12px;color:var(--ink-2);margin-top:5px;line-height:1.45;overflow:hidden}
|
||
/* ---- 第三段：通栏 CTA ----
|
||
⚠️ 和 .wx-cta 同款但字号小一号（这条 banner 整体比「我的」页那张卡矮）。
|
||
⚠️ 现在是 .rl-gift 的直接子元素，靠 column 容器的 stretch 铺满 248px。
|
||
别给它 flex:0 0 100% —— 在 column 容器里 flex-basis 作用于**高度**。
|
||
⚠️ 必须 text-align:center：全局 button{text-align:left} 会继承下来，
|
||
而且 .rl-gift 自己还写了一遍 text-align:left，不覆盖就贴左边。 */
|
||
.rlg-cta{margin-top:11px;text-align:center;font-size:14px;font-weight:700;color:#fff;
|
||
background:var(--brand);border-radius:12px;padding:9px 10px;
|
||
box-shadow:0 4px 10px rgba(216,95,56,.24)}
|
||
|
||
.rl-lead{font-size:13px;color:var(--ink-2);margin:0 0 14px}
|
||
.rl-lead b{color:var(--brand);font-size:15px}
|
||
.res-list{display:flex;flex-direction:column;gap:11px}
|
||
.res-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border-radius:18px;padding:11px;box-shadow:var(--sh)}
|
||
.ri-thumb{flex:0 0 auto;width:62px;height:62px;border-radius:14px;display:grid;place-items:center;overflow:hidden}
|
||
.ri-thumb img{width:74%;height:74%;object-fit:contain;display:block}
|
||
.ri-thumb.o{background:#FDEBE2}.ri-thumb.g{background:#E8F1E2}
|
||
.ri-thumb.p{background:#EFE8F6}.ri-thumb.b{background:#E4EDF9}
|
||
.ri-body{min-width:0;flex:1}
|
||
.ri-title{display:block;font-size:15px;font-weight:800;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.ri-desc{display:block;font-size:12px;color:var(--ink-2);margin:4px 0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.ri-row{display:flex;align-items:center;gap:6px}
|
||
.ri-row em{font-style:normal;font-size:11px;line-height:1}
|
||
/* 状态标顶到最右（原来 margin-left:auto 挂在「8 分钟读完」上）。
|
||
⚠️ 2026-09-19：这一格原来还有「已领 ✓」这个状态（.pill-got），
|
||
9.19 需求取消「已领」概念后只剩「免费」，相关样式一并删除。 */
|
||
.pill-free{margin-left:auto}
|
||
.pill-free{background:rgba(110,154,86,.14);color:var(--green);font-weight:700;padding:3.5px 7px;border-radius:6px}
|
||
.ri-cat{background:rgba(244,89,60,.1);color:var(--brand);font-weight:700;padding:3.5px 7px;border-radius:6px}
|
||
/* 适用孕周，顶掉了原来的「几分钟读完」。不给底色 —— 左边已经有一个实心分类标，
|
||
再来一个就成了两个胶囊抢注意力，而它只是补充说明。
|
||
nowrap：「孕24-28周」这种断在中间比溢出还难看 */
|
||
.ri-ga{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
|
||
/* ---- 已领的资源：整块已删除（2026-09-19） ----
|
||
.pill-got / .ri-got-tick / .res-item.is-got / .chip-got 都随「已领」概念一起删了
|
||
（9.19 需求：资料由顾问在微信里直接发，H5 不再有「立即领取即到手」这个动作）。
|
||
⚠️ .ri-thumb 的 position:relative 曾经挂在这一块里给角标定位用 —— 现在没有角标了，
|
||
也就不需要；若以后要往里放绝对定位元素，记得自己加回来。 */
|
||
|
||
.res-list.slim .ri-thumb{width:50px;height:50px;border-radius:12px}
|
||
.res-list.slim .ri-title{font-size:14px}
|
||
|
||
.rd-cover{height:168px;border-radius:22px;display:grid;place-items:center;background:#FDEBE2;margin-bottom:16px;overflow:hidden}
|
||
.rd-cover.o{background:linear-gradient(135deg,#FDEEE5,#F9DCCC)}
|
||
.rd-cover.g{background:linear-gradient(135deg,#ECF4E6,#DBE9D0)}
|
||
.rd-cover.p{background:linear-gradient(135deg,#F2EBF8,#E4D9F1)}
|
||
.rd-cover.b{background:linear-gradient(135deg,#E8F0FA,#D6E4F5)}
|
||
.rd-cover img{width:132px;height:132px;object-fit:contain;display:block;filter:drop-shadow(0 8px 18px rgba(140,90,70,.2))}
|
||
.rd-cat{display:inline-block;font-size:11.5px;font-weight:700;color:var(--brand);background:rgba(244,89,60,.1);padding:5px 11px;border-radius:8px}
|
||
.rd-title{font-size:24px;font-weight:800;letter-spacing:-.5px;margin:11px 0 7px;line-height:1.3}
|
||
.rd-desc{font-size:13.5px;color:var(--ink-2);margin:0}
|
||
.rd-meta{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 6px;padding-bottom:18px;border-bottom:1px solid var(--line)}
|
||
.rd-meta span{font-size:11.5px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:5px 10px;border-radius:8px}
|
||
.rd-body h4{font-size:16px;font-weight:800;color:var(--ink);margin:22px 0 9px}
|
||
.rd-body p{font-size:15px;line-height:1.95;color:#4A403A;margin:0}
|
||
/* 「收藏 / 立即领取」吸底浮动：它是 .detail 的直接子元素（不在滚动区里），
|
||
所以正文怎么滑，这条都停在底部。不用 position:fixed —— .detail 自身带
|
||
transform，fixed 会以它为包含块，反而错位。 */
|
||
.rd-cta{
|
||
flex:0 0 auto;display:flex;gap:11px;position:relative;
|
||
padding:12px 22px calc(env(safe-area-inset-bottom) + 14px);
|
||
background:rgba(248,243,239,.94);backdrop-filter:blur(14px);
|
||
border-top:1px solid var(--line);
|
||
}
|
||
/* 上沿渐隐，正文滑到底时不会被硬生生切断 */
|
||
.rd-cta::before{
|
||
content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;pointer-events:none;
|
||
background:linear-gradient(rgba(248,243,239,0),rgba(248,243,239,.94));
|
||
}
|
||
/* ⚠️ 这里原来有一条 .rd-cta .dl-btn.main.got（领过之后按钮变绿）——
|
||
9.19 需求取消「已领」概念后按钮只有一种状态，该条删除。 */
|
||
/* 吸底条已占掉底部空间，滚动区不用再留 40px */
|
||
#detailRes .detail-body,#detailPoster .detail-body{padding-bottom:18px}
|
||
/* 档案预览有三个按钮，挤一点、字小一号 */
|
||
.pst-cta .dl-btn{padding-left:0;padding-right:0;font-size:14px}
|
||
|
||
/* ---- 百度网盘领取弹窗：整块已删除（2026-09-19） ----
|
||
.pan-box / .pan-row / .pan-k / .pan-v / .pan-note 随 #modalPan 一起删
|
||
（9.19 需求：资料由顾问在微信里直接发，H5 不再发网盘链接与提取码）。
|
||
要恢复「H5 自己发链接」，等于把「解锁」概念加回来 —— 先回问需求方。 */
|
||
|
||
/* ---- 加企业微信顾问弹窗 ----
|
||
紧挨着上面的网盘弹窗放：这两个弹窗是同一条领取动线的前后两步
|
||
（先扫码换码，再拿链接）。隔开几百行的话，改动线文案时几乎必然只改到一头。 */
|
||
.wx-qr-box{margin-top:16px;text-align:center}
|
||
/* 这条挂在元素本身（原占位的 <svg>、现在这张真图 <img> 都吃）：换图时一个字都不用动。
|
||
⚠️ 别改成 .wx-qr img 或 svg.wx-qr —— 那样一换成 <img> 尺寸就全丢。 */
|
||
.wx-qr{display:block;width:168px;height:168px;margin:0 auto;border-radius:14px;background:#fff}
|
||
.wx-qr-cap{font-size:12px;color:var(--muted);margin-top:10px}
|
||
/* ⚠️ 这里原来有 .wx-code（兑换码输入框）与 .wx-code.is-err（码错标红）——
|
||
9.19 需求删掉输入框后一并删除。 */
|
||
|
||
/* ⚠️ 2026-09-19（9.19 需求 1.2）：这里原来是 .wx-err（兑换码红字）以及
|
||
is-done / is-gift / is-gate 三模式的收起规则（把 .wx-form 与 #wxOk 藏起来）。
|
||
兑换码输入框和两颗按钮整个删掉之后，这些规则没有对应元素了，一并删除。
|
||
弹窗现在是单态（只剩标题 + 引导语 + 二维码），唯一出口是右上角 .modal-x。 */
|
||
|
||
/* ============ 记一下 弹层 ============ */
|
||
.scrim{position:absolute;inset:0;background:rgba(50,30,22,.42);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .32s,visibility .32s;z-index:90}
|
||
.scrim.show{opacity:1;visibility:visible}
|
||
.sheet{
|
||
position:absolute;left:0;right:0;bottom:0;z-index:95;max-height:92%;
|
||
background:#FAF5F1;border-radius:28px 28px 0 0;
|
||
display:flex;flex-direction:column;
|
||
transform:translateY(100%);transition:transform .42s var(--ease);
|
||
box-shadow:0 -10px 40px rgba(90,50,35,.2);
|
||
}
|
||
.sheet.show{transform:none}
|
||
.sheet.dragging{transition:none}
|
||
.sheet-grip{padding:10px 0 4px;display:grid;place-items:center;cursor:grab;touch-action:none}
|
||
.sheet-grip span{width:42px;height:5px;border-radius:3px;background:#DCD2CA}
|
||
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;padding:8px 22px 14px}
|
||
.sheet-head h2{font-size:26px;font-weight:800;letter-spacing:-.5px}
|
||
.sheet-head p{font-size:13px;color:var(--ink-2);margin-top:8px}
|
||
.sheet-close{width:38px;height:38px;border-radius:50%;background:#EEE7E1;display:grid;place-items:center;font-size:15px;color:var(--ink-2);flex:0 0 auto}
|
||
.sheet-close:active{transform:scale(.9)}
|
||
.sheet-scroll{flex:1;overflow-y:auto;padding:0 18px 8px}
|
||
.sheet-scroll::-webkit-scrollbar{display:none}
|
||
/* ⚠️ 临时隐藏开关（2026-09-22）：「记一下」弹层里的「今天已使用」快捷区 + 日期/今天已记 那行
|
||
**功能尚未实现**（数据是写死的演示值），产品要求先整体隐藏、代码保留。
|
||
用法：在 index.html 对应元素上挂 .tbd-hide。
|
||
恢复：去掉 index.html 里那三处 .tbd-hide 即可（js/app.js 的 dedupeApps 会自动重新生效）。 */
|
||
.tbd-hide{display:none!important}
|
||
|
||
/* 「今日心情」已删除，只剩 3 个工具，所以是 3 列 */
|
||
.quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
|
||
.quick{border-radius:17px;padding:13px 8px;text-align:center;transition:transform .16s}
|
||
.quick:active{transform:scale(.95)}
|
||
.quick.q1{background:#FCE4DA}.quick.q2{background:#FBDDD2}.quick.q3{background:#FCE2DE}
|
||
.q-ico{display:block;width:34px;height:auto;margin:0 auto 7px;object-fit:contain}
|
||
.q-t{display:block;font-size:14px;font-weight:800}
|
||
.q-v{display:block;font-size:12.5px;font-weight:700;color:var(--brand);margin-top:4px}
|
||
.apps-head{display:flex;align-items:center;font-size:15.5px;font-weight:700;color:var(--ink-2);margin:22px 4px 14px}
|
||
.apps-head.first{margin-top:2px}
|
||
.apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px}
|
||
.app{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:transform .16s}
|
||
.app:active{transform:scale(.9)}
|
||
/* 16 宫格磁贴：整块（含圆角底色 + 3D 图标）直接取自设计稿 */
|
||
.a-ico{width:54px;height:54px;display:block;object-fit:contain}
|
||
|
||
|
||
/* ============ 搜索层 ============ */
|
||
.search-layer{position:absolute;inset:0;z-index:85;background:var(--bg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .28s var(--ease),visibility .28s var(--ease),transform .28s var(--ease)}
|
||
.search-layer.show{opacity:1;visibility:visible;transform:none}
|
||
.sl-bar{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 16px) 18px 14px}
|
||
.sl-input{flex:1;display:flex;align-items:center;gap:9px;background:#fff;border-radius:20px;padding:11px 15px;box-shadow:var(--sh)}
|
||
.sl-input input{flex:1;border:0;outline:0;font:inherit;font-size:15px;background:none}
|
||
.sl-cancel{font-size:15px;color:var(--brand);font-weight:600}
|
||
.sl-body{padding:8px 18px}
|
||
.sl-sec{font-size:14px;font-weight:700;color:var(--ink-2);margin:18px 2px 12px}
|
||
.sl-hot .hot{display:flex;align-items:center;gap:12px;width:100%;padding:13px 2px;font-size:15px;border-bottom:1px solid var(--line)}
|
||
.sl-hot .hot i{width:20px;height:20px;border-radius:6px;background:#F0E8E2;color:var(--muted);font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center}
|
||
.sl-hot .hot:nth-child(1) i{background:var(--brand);color:#fff}
|
||
.sl-hot .hot:nth-child(2) i{background:#F79274;color:#fff}
|
||
.sl-hot .hot:nth-child(3) i{background:#F9B9A5;color:#fff}
|
||
|
||
/* ============ 底部导航 ============ */
|
||
/* 设计稿的导航是一枚「悬浮药丸」（x60..791 / y1902..1988 of 857 → 左30 右32 高43.5）。
|
||
药丸形态与位置保持设计稿，但图标与文字按可读性放大：
|
||
图标 24px · 文字 12.5px · 中心圆钮 44px，药丸高度相应提到 58px。 */
|
||
.tabbar{
|
||
position:absolute;left:26px;right:26px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;
|
||
height:58px;border-radius:29px;
|
||
display:flex;align-items:center;padding:0 4px;
|
||
background:rgba(252,249,247,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
|
||
box-shadow:0 10px 30px rgba(150,90,70,.16),0 2px 8px rgba(150,90,70,.08);
|
||
}
|
||
.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;color:#A99D95;transition:color .22s}
|
||
.tab.is-active{color:var(--brand)}
|
||
/* 底部导航图标：设计稿原图转成蒙版，用 currentColor 染色，
|
||
未选中 #B3A79F / 选中 var(--brand)，形状与设计稿逐像素一致 */
|
||
.t-ico{width:24px;height:24px;display:block;position:relative;transition:transform .28s var(--ease);
|
||
background-color:currentColor;
|
||
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
|
||
-webkit-mask-position:center;mask-position:center;
|
||
-webkit-mask-size:contain;mask-size:contain}
|
||
.t-ico.ic-home{-webkit-mask-image:url(assets/img/1afd85e578dd.png);mask-image:url(assets/img/1afd85e578dd.png)}
|
||
.t-ico.ic-archive{-webkit-mask-image:url(assets/img/fa7b793b47e8.png);mask-image:url(assets/img/fa7b793b47e8.png)}
|
||
.t-ico.ic-letter{-webkit-mask-image:url(assets/img/949338312a1f.png);mask-image:url(assets/img/949338312a1f.png)}
|
||
/* ⚠️ 2026-09-19（9.19 需求第 2 条）：底 tab 从「兜爸心选」改回「宝宝来信」，
|
||
用的是上面 .ic-letter（图标资源一直在，没删过）。原来这条 .ic-shop（购物袋图标）
|
||
已随改名删除 —— 商城入口仍在「我的」页服务卡与首页商城主卡上。
|
||
图标源文件 assets/img/b3253e3c7a83.png 保留在仓库里（不引用的二进制无害），
|
||
哪天要再挂一枚商城 tab，把这条规则抄回来即可。 */
|
||
.t-ico.ic-me{-webkit-mask-image:url(assets/img/0ebc7631fea4.png);mask-image:url(assets/img/0ebc7631fea4.png)}
|
||
.tab.is-active .t-ico{transform:translateY(-2px) scale(1.06)}
|
||
/* nowrap：最长的那条是「兜爸心选」（原「宝宝来信」，同为四个汉字），12.5px ≈ 50px，
|
||
320px 视口下每格 tab ≈ 64px，塞得下。但字号一旦被系统放大就会折行，
|
||
而 tab 是固定高度的，折了会把图标顶出去，所以宁可让它溢出也不折。 */
|
||
.t-txt{font-size:12.5px;font-weight:600;line-height:1.1;letter-spacing:.2px;white-space:nowrap}
|
||
/* 角标移到 .tab 上定位——.t-ico 现在是 mask 元素，子元素会被一并遮罩 */
|
||
.t-badge{display:none;position:absolute;top:9px;left:calc(50% + 8px);width:9px;height:9px;background:#FF3B30;border-radius:50%;border:1.5px solid #FCF9F7}
|
||
.t-badge.show{display:block}
|
||
.tab-fab{position:relative}
|
||
/* 「记一下」中心按钮：整枚圆钮直接取自设计稿像素。
|
||
设计稿中它并不「凸出」药丸，而是与其它图标同处一行、只是更大。 */
|
||
.fab{
|
||
flex:0 0 auto;width:38px;height:38px;border-radius:50%;
|
||
display:grid;place-items:center;
|
||
box-shadow:0 6px 16px rgba(244,89,60,.42);
|
||
transition:transform .3s var(--ease);
|
||
}
|
||
.fab img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
|
||
.tab-fab .t-txt{color:var(--brand)}
|
||
.tab-fab:active .fab{transform:scale(.9) rotate(90deg)}
|
||
/* ⚠️ 这条以前写作 `.sheet.show ~ .tabbar .fab`。本批把 <nav class="tabbar"> 移到了
|
||
.phone 最前面（底部 tab 要尽早渲染，见 index.html 里 nav 上方那段），
|
||
而通用兄弟选择器 `~` 只能向**后**选 —— nav 排到 .sheet 前面之后那条规则
|
||
一次都不会再命中，圆钮就再也不转了。改挂在父级状态类上，与文档顺序无关。
|
||
.sheet-open 由 openSheet/closeSheet 和 .sheet 的 .show 成对切（js/app.js）。 */
|
||
.phone.sheet-open .tabbar .fab{transform:rotate(135deg)}
|
||
|
||
/* ============ 通用弹窗（往期小结 / 企业微信 / 我的资料） ============
|
||
z-index 要高于 detail(80)、search(85)、scrim(90)、sheet(95)，
|
||
弹窗要能盖在这些层之上。 */
|
||
.modal-scrim{
|
||
position:absolute;inset:0;z-index:120;background:rgba(50,30,22,.46);backdrop-filter:blur(3px);
|
||
opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
|
||
}
|
||
.modal-scrim.show{opacity:1;visibility:visible}
|
||
.modal{
|
||
position:absolute;left:0;right:0;bottom:0;z-index:125;
|
||
background:#FAF5F1;border-radius:28px 28px 0 0;
|
||
padding:22px 22px calc(20px + env(safe-area-inset-bottom));
|
||
box-shadow:0 -10px 40px rgba(90,50,35,.22);
|
||
/* 和 .sheet 一样只靠 transform 移出屏幕，不用 visibility——
|
||
否则 visibility 会打断 transform 过渡，弹窗会「跳」出来 */
|
||
transform:translateY(102%);transition:transform .4s var(--ease);
|
||
max-height:92%;overflow-y:auto;
|
||
}
|
||
.modal::-webkit-scrollbar{display:none}
|
||
.modal.show{transform:none}
|
||
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
|
||
.modal-head h3{font-size:20px;font-weight:800;letter-spacing:-.3px}
|
||
.modal-x{width:34px;height:34px;border-radius:50%;background:#EEE7E1;display:grid;place-items:center;color:var(--ink-2);flex:0 0 auto}
|
||
.modal-x:active{transform:scale(.9)}
|
||
|
||
/* ---- 往期小结弹窗 ----
|
||
叉挪到内容末尾、居中放大一点：这一屏是一路往下读完的，
|
||
手指最后停在底部，关闭按钮就该在那儿等着 */
|
||
.modal-x-btm{width:44px;height:44px;margin:24px auto 2px;background:#F3ECE6}
|
||
.alog-head{display:flex;align-items:center;gap:9px}
|
||
.alog-week{font-size:12px;font-weight:800;color:var(--brand);background:rgba(244,89,60,.1);border-radius:9px;padding:4px 9px}
|
||
.alog-mood{font-size:12px;font-weight:700;color:var(--ink-2);background:#F3ECE6;border-radius:9px;padding:4px 9px}
|
||
.alog-date{font-size:21px;font-weight:800;letter-spacing:-.3px;margin:12px 0 0}
|
||
.alog-txt{font-size:14.5px;color:var(--ink-2);line-height:1.8;margin:9px 0 0}
|
||
/* .alog-tips 已删（往期不再铺 1/2/3 建议卡），这里的 margin 跟着删。
|
||
.ai-stats 原本长在深色今日卡里，一整套都是白字。搬到浅底弹窗上得翻过来，
|
||
但只能在 .alog-stats 这一层改 —— 今日卡还在用原来那套。
|
||
上边距 14 → 18：它现在是弹窗里最后一块内容，前后都得撑开一点才不局促 */
|
||
.alog-stats{margin-top:18px;background:#FAF5F1;border-radius:18px;padding:2px 0}
|
||
.alog-stats .ai-st+.ai-st::before{background:rgba(120,90,70,.14)}
|
||
.alog-stats .ai-st b{color:var(--ink)}
|
||
.alog-stats .ai-st span{color:var(--muted)}
|
||
.alog-stats .ai-st em{color:#3E9B69}
|
||
.alog-stats .ai-st em.dn{color:#D9603F}
|
||
.alog-stats .ai-st em.eq{color:var(--muted)}
|
||
.modal-lead{font-size:13px;color:var(--ink-2);margin-top:8px;line-height:1.6}
|
||
.modal-lead b{color:var(--brand)}
|
||
/* ⚠️ 这里原来是 .modal-lead .lead-hi（给「全部解锁」四个字加重的 <em>）——
|
||
setLead() 已随三模式删除，该样式一并删除。 */
|
||
|
||
|
||
/* 输入框：必须显式给 font-family，否则 textarea/input 会退回成系统等宽字体 */
|
||
.fld input{
|
||
font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
|
||
border:1.5px solid #EBE1D9;border-radius:16px;width:100%;
|
||
transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none;
|
||
}
|
||
.fld input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,89,60,.12)}
|
||
.fld{display:block;margin-top:14px}
|
||
.fld>span{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
|
||
.fld input{padding:13px 15px;min-height:50px} /* 统一输入框高度：iOS 的 date 控件原生偏矮，与文本框对齐 */
|
||
.fld-row{display:flex;gap:12px}
|
||
.fld-row .fld{flex:1}
|
||
/* 没填预产期时孕周/额外天数不可编辑：置灰 + 禁用光标，一眼看出得先填上面那格 */
|
||
.fld input:disabled{background:#F0E9E3;color:#B4A79C;-webkit-text-fill-color:#B4A79C;
|
||
border-color:transparent;cursor:not-allowed;opacity:1}
|
||
.fld-hint{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}
|
||
/* 性别三选一。用 button 而不是 radio：和弹窗里其它控件的圆角风格统一 */
|
||
.pick-row{display:flex;gap:9px}
|
||
/* 全局 button 被重置成了 text-align:left，这里得显式居中，
|
||
否则「还不知道 / 男孩 / 女孩」都贴在按钮左边 */
|
||
.pick{flex:1;padding:12px 4px;border-radius:15px;background:#fff;font-size:14px;font-weight:700;
|
||
text-align:center;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .16s,color .16s,box-shadow .16s}
|
||
.pick:active{transform:scale(.96)}
|
||
.pick.is-active{color:var(--brand);background:#FDECE7;box-shadow:inset 0 0 0 1.8px var(--brand)}
|
||
.modal-foot{display:flex;align-items:center;gap:10px;margin-top:20px}
|
||
.modal-foot .dl-btn{padding:14px}
|
||
|
||
/* ---- 我的资料 · 换头像 ---- */
|
||
.av-pick{text-align:center;padding:20px 0 6px}
|
||
.av-big{width:92px;height:92px;border-radius:50%;margin:0 auto;display:grid;place-items:center;position:relative;
|
||
background:var(--grad);color:#fff;border:3px solid #fff;box-shadow:var(--sh);transition:transform .18s var(--ease)}
|
||
.av-big:active{transform:scale(.94)}
|
||
.av-big>svg{width:50px;height:50px}
|
||
.av-big img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
|
||
.av-big.has-img img{display:block}
|
||
.av-big.has-img>svg{visibility:hidden}
|
||
.av-cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.18)}
|
||
/* file input 不能 display:none —— 部分安卓 WebView 里隐藏元素的 .click() 不生效，
|
||
所以留在流里但压成 0 尺寸、完全透明 */
|
||
.av-file{position:absolute;width:0;height:0;opacity:0;overflow:hidden;pointer-events:none}
|
||
.av-tip{font-size:12px;color:var(--muted);margin-top:13px}
|
||
/* ⚠️ 「我的资料」这张弹窗本批并进了原「编辑孕期信息」的五个字段
|
||
（小名 / 性别 / 预产期 / 孕周 / 天数），一下长了约 276px。
|
||
.modal 是 max-height:92% + overflow-y:auto，撑爆不会破版 —— 但会把
|
||
「保存」按钮推到折线以下，用户得先滚一下才够得着，那已经是体验问题。
|
||
算下来最窄的 iPhone SE（667 × 92% = 613px）刚好贴线，所以这里把
|
||
**只有这张弹窗**的大头像从 92px 收到 76px，头像块整体省 ~26px。
|
||
收的是头像不是字段：头像在这张弹窗里是配角，92 和 76 都够点；
|
||
而任何一个字段的高度都直接关系到能不能填。
|
||
⚠️ 用 #modalProfile 前缀限定，别改全局 .av-big —— 那条别处也在用。
|
||
⚠️ 图片是 inset:0 铺满的，跟着容器缩，不用另外改 img。 */
|
||
#modalProfile .av-pick{padding:12px 0 4px}
|
||
#modalProfile .av-big{width:76px;height:76px}
|
||
#modalProfile .av-big>svg{width:42px;height:42px}
|
||
#modalProfile .av-tip{margin-top:10px}
|
||
|
||
/* ============ Toast ============ */
|
||
.toast{
|
||
position:absolute;left:50%;bottom:120px;z-index:200;transform:translate(-50%,14px);
|
||
background:rgba(40,26,20,.9);color:#fff;font-size:14px;font-weight:600;
|
||
padding:12px 20px;border-radius:22px;backdrop-filter:blur(10px);
|
||
opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);max-width:78%;text-align:center;
|
||
}
|
||
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
|
||
|
||
/* 数字跳动 */
|
||
.bump{animation:bump .35s var(--ease)}
|
||
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
|
||
|
||
|
||
/* 弹层「全部孕期工具」：无 logo 应用的字母兜底块（与 .a-ico 同尺寸） */
|
||
.apps-grid .a-ico-letter{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:22px;color:#fff;font-size:22px;font-weight:800}
|
||
|
||
/* 弹层宫格限 4 行 × 4 列：超出在宫格内部滚动（不撑长弹层）。
|
||
行高 minmax(92px,auto)：图标54 + 间距8 + 两行名称 ≈ 92，行行等高对齐；
|
||
4行 × 92 + 3 × 行距16 = 416px。 */
|
||
#appsGrid{grid-auto-rows:minmax(92px,auto);max-height:416px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:4px;scrollbar-width:thin;scrollbar-color:#E0CFC5 transparent}
|
||
#appsGrid::-webkit-scrollbar{width:4px}
|
||
#appsGrid::-webkit-scrollbar-thumb{background:#E0CFC5;border-radius:2px}
|
||
#appsGrid::-webkit-scrollbar-track{background:transparent}
|
||
|
||
/* 预产期 date 输入的空值占位（原生 date 不支持 placeholder） */
|
||
.fld-date .due-box{position:relative;display:block}
|
||
/* 占位锚定输入框本身并垂直居中 —— 各内核 date 输入框高度不一，锚 label 底部会错位 */
|
||
.fld-date .date-ph{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:14px;color:#C9B7AC;pointer-events:none;display:block;line-height:1}
|
||
/* 空值时隐藏原生提示（Chrome 会画 mm/dd/yyyy，与占位叠字）：文字透明即隐 */
|
||
.fld-date input.due-empty{color:transparent;-webkit-text-fill-color:transparent}
|
||
|
||
/* 「关于妈妈盒子」页底部版本号 */
|
||
.about-ver{margin-top:24px;padding-bottom:34px;text-align:center;color:#C9BFB8;font-size:11px;letter-spacing:.5px}
|
||
|
||
/* ---- 身份未就绪提示（2026-09-20）----
|
||
宿主没注入 openid 时显示（见 index.html 里那段注释）。绝对定位在 .phone 顶部，
|
||
z-index 高于 tabbar(60)、低于 modal(120+)，避免盖住弹窗。 */
|
||
.id-notice{
|
||
position:absolute;left:26px;right:26px;top:calc(10px + env(safe-area-inset-top));z-index:66;
|
||
display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;
|
||
background:rgba(255,246,232,.97);border:1px solid #F2D8AE;color:#8A5A18;
|
||
box-shadow:0 6px 18px rgba(150,110,60,.16);font-size:12.5px;line-height:1.3;
|
||
}
|
||
.id-notice.hide{display:none}
|
||
.idn-ico{
|
||
flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:#E8A33D;color:#fff;
|
||
font-size:12px;font-weight:800;display:grid;place-items:center;
|
||
}
|
||
.idn-txt{flex:1;min-width:0}
|
||
.idn-retry{
|
||
flex:0 0 auto;border:0;background:#E8A33D;color:#fff;font-weight:700;
|
||
font-size:12px;padding:6px 12px;border-radius:9px;
|
||
}
|
||
.idn-retry:active{transform:scale(.95)}
|
||
|
||
/* =====================================================================
|
||
孕期盲盒 · 首页细横幅（2026-10-01，需求文档 v1.0 三-7）
|
||
一条奶油粉→薰衣草的渐变细卡：左边会晃的礼盒，中间两行字，右边胶囊。
|
||
⚠️ 它是 #homeBody 第一个孩子；隐藏时把首块上间距还给工具托盘（下面两条）。
|
||
动效：礼盒每 3 秒晃一下（只在「有盒子可开」时）+ 一道斜光每 5 秒扫过；减少动态效果时全关。
|
||
===================================================================== */
|
||
.bb-banner{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:66px;
|
||
padding:9px 12px 9px 9px;border:1px solid rgba(255,255,255,.9);border-radius:22px;overflow:hidden;
|
||
text-align:left;font:inherit;color:#5A2E22;
|
||
background:linear-gradient(105deg,#FFF0E2 0%,#FFE3E6 55%,#F1E5FF 100%);
|
||
box-shadow:0 10px 24px rgba(226,120,108,.16)}
|
||
.bb-banner.hide{display:none}
|
||
.home-body>.bb-banner.hide+.tool-dock{margin-top:21px}
|
||
.home-body.no-letter>.bb-banner.hide+.tool-dock{margin-top:30px}
|
||
.bb-banner:active{transform:scale(.985)}
|
||
.bb-gift{position:relative;flex:0 0 auto;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;
|
||
background:radial-gradient(circle at 50% 60%,#fff 0,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 72%)}
|
||
.bb-gift svg{width:44px;height:44px;overflow:visible}
|
||
.bb-banner.is-ready .bb-gift svg{animation:bbWiggle 3s ease-in-out infinite;transform-origin:50% 90%}
|
||
@keyframes bbWiggle{0%,62%,100%{transform:rotate(0) scale(1)}66%{transform:rotate(-10deg) scale(1.06)}
|
||
71%{transform:rotate(9deg) scale(1.08)}76%{transform:rotate(-6deg)}81%{transform:rotate(4deg)}86%{transform:rotate(0)}}
|
||
.bb-badge{position:absolute;left:44px;top:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
|
||
font-size:11px;font-weight:800;line-height:18px;text-align:center;color:#fff;
|
||
background:linear-gradient(135deg,#FF5B6E,#F4593C);box-shadow:0 0 0 2px #fff;animation:bbBadge 1.6s ease-in-out infinite}
|
||
.bb-badge.hide{display:none}
|
||
@keyframes bbBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
|
||
.bb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
|
||
.bb-t{font-size:15.5px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.bb-s{font-size:11.5px;color:#9A6F62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.bb-s b{color:var(--brand);font-weight:800}
|
||
.bb-cta{flex:0 0 auto;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:800;color:#fff;
|
||
background:linear-gradient(135deg,#FF7A5C,#F4593C);box-shadow:0 6px 14px rgba(244,89,60,.3)}
|
||
.bb-banner.is-calm .bb-cta{color:var(--brand);background:#fff;box-shadow:0 3px 10px rgba(226,120,108,.16)}
|
||
.bb-shine{position:absolute;top:-20%;left:-40%;width:28%;height:140%;pointer-events:none;
|
||
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
|
||
transform:skewX(-20deg);animation:bbShine 5s ease-in-out infinite}
|
||
@keyframes bbShine{0%,70%{left:-40%}100%{left:130%}}
|
||
|
||
/* 礼盒 SVG（横幅和舞台共用一份画法，见 app.js giftSVG）：盖子单独一组，开盒时飞起来 */
|
||
.gift .g-lid{transform-box:fill-box;transform-origin:50% 100%}
|
||
.gift .g-body{transform-box:fill-box;transform-origin:50% 100%}
|
||
|
||
/* =====================================================================
|
||
此刻，孕妈们在做什么（2026-10-01，需求文档 v1.0 第二节）
|
||
外壳是首页公共白色通栏。里面三层：
|
||
① 头像叠 + 一个会滚动累加的大数字（进入视口时从 0 数上去，之后每分钟刷新平滑涨）
|
||
② 今日三项：三张浅色小卡，点击进入对应工具
|
||
③ 匿名动态：一行，每 3 秒往上翻一条
|
||
背景两团慢慢漂的柔光 + 左上「此刻」红点呼吸，表达「正在发生」。
|
||
===================================================================== */
|
||
/* 2026-10-01 再改：收进 .tool-dock 底部做轻量条（见 index.html #pulse 注释）。
|
||
不再是独立白卡：浅暖底圆角带，左右不出血，和宫格同宽；字号整体比工具卡小一档，读起来是「附注」不是第二个模块。 */
|
||
.pulse{margin-top:12px;padding:11px 12px 10px;border-radius:18px;background:#FFF6F0}
|
||
.pulse.hide{display:none}
|
||
.pl-head{display:flex;align-items:center;gap:7px;min-width:0}
|
||
.pl-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:#fff;
|
||
background:linear-gradient(135deg,#FF6B57,#F4593C);border-radius:999px;padding:2px 7px 2px 6px}
|
||
.pl-live i{position:relative;width:5px;height:5px;border-radius:50%;background:#fff}
|
||
.pl-live i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid #fff;animation:plPing 1.6s ease-out infinite}
|
||
@keyframes plPing{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}
|
||
.pl-title{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.35}
|
||
.pl-title b{font-size:16px;font-weight:900;letter-spacing:-.3px;color:var(--brand);font-variant-numeric:tabular-nums}
|
||
.pl-feed.hide{display:none}
|
||
.pl-feed{position:relative;margin-top:8px;height:26px;overflow:hidden;
|
||
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
|
||
mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
|
||
.pl-track{will-change:transform}
|
||
.pl-track.is-move{transition:transform .55s var(--ease)}
|
||
.pl-row{display:flex;align-items:center;gap:6px;height:26px;font-size:12px;white-space:nowrap}
|
||
.pl-row .pr-who{flex:0 0 auto;color:var(--muted)}
|
||
.pl-row .pr-do{flex:1;min-width:0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
|
||
.pl-row .pr-do em{font-style:normal;color:var(--brand)}
|
||
|
||
/* =====================================================================
|
||
孕期盲盒 · 详情页（2026-10-01）
|
||
① 舞台：珊瑚→玫瑰渐变 + 缓慢旋转的光芒 + 闪烁星星，礼盒悬浮呼吸；
|
||
点「开启」→ 礼盒越晃越厉害（等接口，最少 1.3 秒）→ 盖子飞起、白光一闪 → 翻卡层。
|
||
② 翻卡层：暗色幕 + 彩纸迸开 + 卡片从背面 3D 翻到正面；闪卡多一层流动的镭射光。
|
||
③ 卡册：按孕早/中/晚期三组，已集的显示插画，可开的在发光，没到的是问号。
|
||
===================================================================== */
|
||
.bx .detail-body{padding:16px 16px 40px}
|
||
.bx-rule-btn{width:auto;font-size:13px;font-weight:700;color:var(--brand)}
|
||
.bx-stage{position:relative;z-index:0;overflow:hidden;border-radius:28px;padding:22px 18px 20px;text-align:center;color:#fff;
|
||
background:linear-gradient(165deg,#FFB08F 0%,#FF8B76 42%,#E9688C 100%);box-shadow:0 16px 36px rgba(233,104,120,.3)}
|
||
.bx-rays{position:absolute;z-index:-1;left:50%;top:46%;width:520px;height:520px;margin:-260px 0 0 -260px;
|
||
background:repeating-conic-gradient(rgba(255,255,255,.16) 0 9deg,rgba(255,255,255,0) 9deg 22.5deg);
|
||
-webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 62%);
|
||
mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 62%);
|
||
animation:bxSpin 24s linear infinite}
|
||
@keyframes bxSpin{to{transform:rotate(360deg)}}
|
||
.bx-sp{position:absolute;z-index:-1;color:#FFF3C4;animation:gpTw 2.2s ease-in-out infinite;opacity:0}
|
||
.bx-sp.s1{left:16%;top:30%;font-size:14px}.bx-sp.s2{right:14%;top:24%;font-size:11px;animation-delay:.5s}
|
||
.bx-sp.s3{left:22%;top:62%;font-size:9px;animation-delay:1.1s}.bx-sp.s4{right:20%;top:58%;font-size:13px;animation-delay:1.6s}
|
||
.bx-week{font-size:13px;font-weight:800;letter-spacing:1px;display:inline-block;padding:4px 12px;border-radius:999px;
|
||
background:rgba(255,255,255,.22);backdrop-filter:blur(4px)}
|
||
.bx-hint{margin-top:8px;font-size:18px;font-weight:900;letter-spacing:.2px;text-shadow:0 2px 0 rgba(190,70,80,.25)}
|
||
.bx-box{display:block;margin:6px auto 0;width:168px;height:168px;border:0;background:none;padding:0;
|
||
animation:bxFloat 3.2s ease-in-out infinite}
|
||
.bx-box.hide,.bx-mini.hide,.bx-open.hide{display:none}
|
||
.bx-box svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 14px rgba(160,50,60,.28))}
|
||
@keyframes bxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
|
||
.bx-shadow{display:block;width:96px;height:12px;margin:-8px auto 0;border-radius:50%;background:rgba(120,30,40,.18);
|
||
animation:bxShadow 3.2s ease-in-out infinite}
|
||
@keyframes bxShadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}
|
||
.bx-stage.is-done .bx-shadow{display:none}
|
||
.bx-stage.is-shaking .bx-box{animation:bxShake .32s ease-in-out infinite}
|
||
.bx-stage.is-shaking .bx-box svg{animation:bxSwell 1.3s ease-in forwards}
|
||
@keyframes bxShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) translateY(-2px)}75%{transform:rotate(7deg) translateY(-2px)}}
|
||
@keyframes bxSwell{to{transform:scale(1.12)}}
|
||
.bx-stage.is-popping .g-lid{animation:bxLid .5s cubic-bezier(.2,.8,.3,1) forwards}
|
||
.bx-stage.is-popping .g-body{animation:bxBody .5s ease-out forwards}
|
||
@keyframes bxLid{to{transform:translate(18px,-90px) rotate(28deg);opacity:0}}
|
||
@keyframes bxBody{40%{transform:scaleY(.86) scaleX(1.08)}100%{transform:scale(.7);opacity:0}}
|
||
.bx-open{position:relative;margin-top:14px;min-width:178px;border-radius:999px;padding:13px 26px;font-size:16px;font-weight:900;
|
||
letter-spacing:1px;color:#E5503C;background:#fff;box-shadow:0 10px 22px rgba(170,50,50,.25),0 0 0 0 rgba(255,255,255,.6);
|
||
animation:bxCta 2s ease-out infinite}
|
||
.bx-open:active{transform:scale(.96)}
|
||
.bx-open[disabled]{opacity:.85;animation:none}
|
||
@keyframes bxCta{0%{box-shadow:0 10px 22px rgba(170,50,50,.25),0 0 0 0 rgba(255,255,255,.55)}
|
||
80%,100%{box-shadow:0 10px 22px rgba(170,50,50,.25),0 0 0 16px rgba(255,255,255,0)}}
|
||
.bx-stage.is-done .bx-open{animation:none;background:rgba(255,255,255,.95)}
|
||
.bx-misc{margin-top:12px;font-size:12px;color:rgba(255,255,255,.9)}
|
||
.bx-misc:empty{display:none}
|
||
.bx-mini{display:block;margin:12px auto 4px;width:150px;border:0;background:none;padding:0;transform:rotate(-4deg);
|
||
animation:bxFloat 3.6s ease-in-out infinite}
|
||
.bx-mini .cf{transform-origin:top left;width:248px;transform:scale(.605);margin-bottom:-130px;height:330px}
|
||
|
||
.bx-pend{margin-top:14px;padding:13px 14px;border-radius:20px;background:#fff;box-shadow:var(--sh)}
|
||
.bx-pend.hide{display:none}
|
||
.bx-pend-t{font-size:14px;font-weight:800}
|
||
.bx-pend-t b{color:var(--brand)}
|
||
.bx-pend-t em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted)}
|
||
.bx-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
|
||
.bx-chip{border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:#C4553E;background:#FFF0EA;
|
||
border:1.5px solid transparent;transition:all .2s var(--ease)}
|
||
.bx-chip.on{color:#fff;background:linear-gradient(135deg,#FF7A5C,#F4593C);box-shadow:0 4px 10px rgba(244,89,60,.28)}
|
||
|
||
.bx-album{margin-top:16px;padding:16px 14px 6px;border-radius:24px;background:#fff;box-shadow:var(--sh)}
|
||
.bx-ah{display:flex;align-items:baseline}
|
||
.bx-ah h3{font-size:16.5px;font-weight:800}
|
||
.bx-cnt{margin-left:auto;font-size:13px;color:var(--muted)}
|
||
.bx-cnt b{font-size:20px;font-weight:900;color:var(--brand)}
|
||
.bx-prog{margin-top:9px;height:8px;border-radius:4px;background:#F5ECE6;overflow:hidden}
|
||
.bx-prog i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#FFB08F,#F4593C,#E9688C);
|
||
transition:width 1s var(--ease)}
|
||
.bx-anote{margin-top:7px;font-size:11.5px;color:var(--muted)}
|
||
.bx-anote:empty{display:none}
|
||
.bx-grp{margin-top:14px}
|
||
.bx-gh{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:8px}
|
||
.bx-gh i{width:6px;height:6px;border-radius:50%;background:var(--c,#F4593C)}
|
||
.bx-gh span{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted)}
|
||
.bx-gh.full span{color:var(--brand)}
|
||
.bx-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
|
||
.bx-t{position:relative;aspect-ratio:3/4;border-radius:11px;overflow:hidden;border:0;padding:0;font:inherit;
|
||
background:#F7F0EB;display:grid;place-items:center}
|
||
.bx-t .wk{position:absolute;left:0;right:0;bottom:0;text-align:center;padding:10px 0 3px;font-size:10.5px;font-weight:800;color:#fff;
|
||
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(90,40,30,.55))}
|
||
.bx-t img{width:100%;height:100%;object-fit:cover}
|
||
.bx-t .fb{font-size:26px}
|
||
.bx-t.got{box-shadow:0 3px 8px rgba(190,120,96,.18)}
|
||
.bx-t.lock{border:1.5px dashed #EADBD2;color:#C9B4A8;font-size:18px;font-weight:900}
|
||
.bx-t.lock .wk{color:#B9A296;background:none}
|
||
.bx-t.can{background:linear-gradient(160deg,#FFE1D4,#FFC2B6);border:0;animation:bxCan 1.8s ease-in-out infinite}
|
||
.bx-t.can svg{width:30px;height:30px;overflow:visible}
|
||
.bx-t.can .wk{color:#C4553E;background:none}
|
||
@keyframes bxCan{0%,100%{box-shadow:0 0 0 0 rgba(244,89,60,.0)}50%{box-shadow:0 0 0 3px rgba(244,89,60,.35)}}
|
||
.bx-t.flash::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
|
||
box-shadow:inset 0 0 0 2px #FFD66E;
|
||
background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.65) 45%,rgba(255,200,240,.4) 52%,transparent 70%) 0 0/250% 250%;
|
||
mix-blend-mode:screen;animation:bxHolo 2.6s linear infinite}
|
||
.bx-t .bf{position:absolute;right:3px;top:3px;font-size:9px;font-weight:800;color:#fff;background:rgba(0,0,0,.25);border-radius:5px;padding:0 3px}
|
||
.bx-t.is-new{animation:bxNewT 1s cubic-bezier(.3,1.6,.5,1)}
|
||
@keyframes bxNewT{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:none;opacity:1}}
|
||
|
||
.bx-rules{margin-top:16px;border-radius:20px;background:#fff;box-shadow:var(--sh);overflow:hidden}
|
||
.bx-rules summary{list-style:none;display:flex;align-items:center;padding:14px 16px;font-size:14px;font-weight:800}
|
||
.bx-rules summary::-webkit-details-marker{display:none}
|
||
.bx-rules summary::after{content:"›";margin-left:auto;color:var(--muted);font-size:18px;transition:transform .25s}
|
||
.bx-rules[open] summary::after{transform:rotate(90deg)}
|
||
.bx-rules-b{padding:0 16px 16px;font-size:12.5px;color:var(--ink-2);line-height:1.7}
|
||
.bx-rules-b h4{margin:10px 0 6px;font-size:12.5px;font-weight:800;color:var(--ink)}
|
||
.bx-pr{display:flex;align-items:center;gap:8px;margin:5px 0}
|
||
.bx-pr span{flex:0 0 auto;width:118px;font-size:12px}
|
||
.bx-pr i{flex:1;height:6px;border-radius:3px;background:#F5ECE6;position:relative;overflow:hidden}
|
||
.bx-pr i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:3px;background:linear-gradient(90deg,#FFB08F,#F4593C)}
|
||
.bx-pr b{flex:0 0 auto;width:34px;text-align:right;font-size:12px;color:var(--brand)}
|
||
.bx-rules-b ul{margin:4px 0 0;padding-left:16px}
|
||
.bx-rules-b .free{margin-top:10px;padding:8px 10px;border-radius:10px;background:#FFF5EF;color:#B5543F;font-weight:700;font-size:12px}
|
||
|
||
/* ---------- 翻卡层 ---------- */
|
||
.bx-reveal{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
|
||
background:rgba(48,22,26,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
|
||
opacity:0;pointer-events:none;transition:opacity .35s}
|
||
.bx-reveal.show{opacity:1;pointer-events:auto}
|
||
.bx-glow{position:absolute;left:50%;top:260px;width:460px;height:460px;margin:-230px 0 0 -230px;pointer-events:none;
|
||
background:repeating-conic-gradient(rgba(255,214,150,.18) 0 8deg,rgba(255,214,150,0) 8deg 20deg);
|
||
-webkit-mask-image:radial-gradient(circle,#000 0,transparent 65%);mask-image:radial-gradient(circle,#000 0,transparent 65%);
|
||
animation:bxSpin 30s linear infinite;opacity:0;transition:opacity .6s .4s}
|
||
.bx-reveal.show .bx-glow{opacity:1}
|
||
.bx-reveal.is-flash .bx-glow{background:repeating-conic-gradient(rgba(255,150,220,.2) 0 8deg,rgba(150,220,255,.12) 8deg 14deg,rgba(255,240,150,0) 14deg 20deg)}
|
||
.bx-flash{position:absolute;left:50%;top:260px;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
|
||
background:radial-gradient(circle,#fff 0,rgba(255,255,255,.8) 40%,rgba(255,255,255,0) 70%);opacity:0;pointer-events:none}
|
||
.bx-reveal.is-burst .bx-flash{animation:bxFlash .8s ease-out}
|
||
@keyframes bxFlash{0%{transform:scale(.2);opacity:1}100%{transform:scale(7);opacity:0}}
|
||
.bx-confetti{position:absolute;left:50%;top:260px;width:0;height:0;pointer-events:none}
|
||
.bx-confetti i{position:absolute;left:0;top:0;width:8px;height:12px;border-radius:2px;background:var(--c);opacity:0;
|
||
animation:bxBurst 1.4s cubic-bezier(.15,.7,.3,1) var(--d) forwards}
|
||
.bx-confetti i.r{border-radius:50%;width:8px;height:8px}
|
||
@keyframes bxBurst{0%{transform:translate(0,0) rotate(0) scale(.6);opacity:1}
|
||
70%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);opacity:0}}
|
||
.bx-rv-in{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:calc(env(safe-area-inset-top) + 64px) 24px 40px}
|
||
.bx-tag{font-size:14px;font-weight:900;letter-spacing:1px;color:#FFE8B8;opacity:0;transform:translateY(-8px);transition:all .4s .5s}
|
||
.bx-reveal.show .bx-tag{opacity:1;transform:none}
|
||
.bx-reveal.is-flash .bx-tag{background:linear-gradient(90deg,#FFD66E,#FF9AD5,#9ADFFF,#FFD66E) 0 0/300% 100%;
|
||
-webkit-background-clip:text;background-clip:text;color:transparent;font-size:16px;animation:bxHolo 2.4s linear infinite}
|
||
.bx-persp{margin-top:14px;perspective:1100px}
|
||
.bx-card3d{position:relative;width:248px;height:330px;transform-style:preserve-3d;
|
||
transform:rotateY(180deg) scale(.35) translateY(90px);transition:transform 1.05s cubic-bezier(.2,.9,.25,1.12)}
|
||
.bx-card3d.is-flip{transform:rotateY(0) scale(1)}
|
||
.bx-card3d.no-anim{transition:none}
|
||
.bx-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:20px}
|
||
.bx-back{transform:rotateY(180deg);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
|
||
background:radial-gradient(circle at 50% 42%,#FFB08F 0,#F4593C 60%,#D9466E 100%);border:4px solid #FFE3D6;color:#fff}
|
||
.bx-back::before{content:"";position:absolute;inset:10px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.5)}
|
||
.bx-back::after{content:"";position:absolute;inset:0;opacity:.25;
|
||
background:radial-gradient(circle,#fff 1.4px,transparent 1.6px) 0 0/18px 18px}
|
||
.bx-back svg{width:96px;height:96px;overflow:visible}
|
||
.bx-back b{position:relative;z-index:1;font-size:13px;letter-spacing:3px}
|
||
.bx-dev{max-width:290px;margin-top:16px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.88);text-align:center;
|
||
opacity:0;transform:translateY(10px);transition:all .45s}
|
||
.bx-dev:empty{display:none}
|
||
.bx-reveal.is-done .bx-dev{opacity:1;transform:none;transition-delay:.15s}
|
||
.bx-reward{width:100%;max-width:300px;margin-top:14px;opacity:0;transform:translateY(24px) scale(.96);transition:all .5s var(--ease)}
|
||
.bx-reward:empty{display:none}
|
||
.bx-reveal.is-done .bx-reward{opacity:1;transform:none;transition-delay:.3s}
|
||
.bx-rw{position:relative;border-radius:20px;padding:14px 16px 15px;background:#FFFBF6;color:var(--ink);text-align:left;
|
||
box-shadow:0 14px 30px rgba(0,0,0,.25)}
|
||
.bx-rw::before{content:"";position:absolute;left:18px;top:-7px;width:14px;height:14px;transform:rotate(45deg);background:#FFFBF6}
|
||
.bx-rw-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#C4553E}
|
||
.bx-rw-h i{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:15px;
|
||
background:linear-gradient(135deg,#FFE0D2,#FFC8BA)}
|
||
.bx-rw-h em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;color:#B8A094;background:#F6EEE8;border-radius:999px;padding:2px 8px}
|
||
.bx-rw-t{margin-top:9px;font-size:15px;font-weight:800}
|
||
.bx-rw-p{margin-top:5px;font-size:13.5px;line-height:1.75;color:#5E4A42;font-family:var(--font-kid)}
|
||
.bx-keep{margin-top:20px;min-width:200px;border-radius:999px;padding:13px 28px;font-size:15.5px;font-weight:900;color:#fff;
|
||
background:linear-gradient(135deg,#FF7A5C,#F4593C);box-shadow:0 10px 24px rgba(244,89,60,.4);
|
||
opacity:0;transform:translateY(16px);transition:all .45s}
|
||
.bx-reveal.is-done .bx-keep{opacity:1;transform:none;transition-delay:.55s}
|
||
.bx-keep:active{transform:scale(.96)}
|
||
|
||
/* ---------- 宝宝卡正面 ---------- */
|
||
.cf{position:relative;width:248px;height:330px;border-radius:20px;padding:10px;overflow:hidden;background:#FFFDF9;
|
||
box-shadow:0 18px 40px rgba(0,0,0,.28);text-align:left;color:var(--ink)}
|
||
.cf-img{position:relative;width:228px;height:200px;border-radius:14px;overflow:hidden;background:#FFF4EC;display:grid;place-items:center}
|
||
.cf-img img{width:100%;height:100%;object-fit:cover}
|
||
.cf-fb{display:grid;place-items:center;width:100%;height:100%;font-size:86px;
|
||
background:radial-gradient(circle at 50% 45%,#fff 0,#FFEADF 55%,#FFD9CB 100%)}
|
||
.cf-row{display:flex;align-items:baseline;margin-top:10px;padding:0 4px}
|
||
.cf-wk{font-size:13px;font-weight:800;color:var(--muted)}
|
||
.cf-wk b{font-size:24px;font-weight:900;color:var(--brand);margin:0 2px;letter-spacing:-.5px}
|
||
.cf-size{margin-left:auto;font-size:12px;color:var(--ink-2)}
|
||
.cf-size b{color:var(--ink);font-weight:800}
|
||
.cf-say{margin-top:6px;padding:8px 10px;border-radius:12px;background:#FFF3EC;font-size:13px;line-height:1.55;color:#7A4A3B;
|
||
font-family:var(--font-kid);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
.cf-say:empty{display:none}
|
||
.cf-no{position:absolute;right:16px;top:16px;font-size:10px;font-weight:800;letter-spacing:.5px;color:#fff;
|
||
background:rgba(90,46,34,.35);border-radius:999px;padding:2px 8px;backdrop-filter:blur(2px)}
|
||
.cf-tag{display:none}
|
||
.cf.v-flash{background:linear-gradient(135deg,#FFE7A3,#FFC6E5 35%,#C6E8FF 65%,#FFE7A3);padding:12px}
|
||
.cf.v-flash .cf-img{width:224px;height:196px}
|
||
.cf.v-flash .cf-row,.cf.v-flash .cf-say{position:relative}
|
||
.cf.v-flash .cf-say{background:rgba(255,255,255,.75)}
|
||
.cf.v-flash .cf-tag{display:block;position:absolute;left:16px;top:16px;z-index:2;font-size:11px;font-weight:900;color:#8A5A00;
|
||
background:linear-gradient(90deg,#FFE58A,#FFF6D0,#FFD66E);border-radius:999px;padding:2px 9px;box-shadow:0 2px 6px rgba(160,110,0,.3)}
|
||
.cf-holo{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;display:none;
|
||
background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.7) 38%,rgba(255,170,230,.45) 46%,rgba(150,225,255,.45) 54%,transparent 72%) 0 0/250% 250%;
|
||
mix-blend-mode:soft-light;animation:bxHolo 3s linear infinite}
|
||
.cf.v-flash .cf-holo{display:block}
|
||
@keyframes bxHolo{from{background-position:120% 0}to{background-position:-120% 0}}
|
||
|
||
@media (prefers-reduced-motion:reduce){
|
||
.bb-banner .bb-gift svg,.bb-badge,.bb-shine,.pl-live i::after,.bx-rays,.bx-sp,.bx-box,.bx-shadow,.bx-open,.bx-mini,
|
||
.bx-t.can,.bx-t.flash::after,.bx-glow,.cf-holo{animation:none!important}
|
||
.bb-shine{display:none}
|
||
.bx-card3d{transition-duration:.2s}
|
||
}
|
||
.bx-t .fb{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#fff 0,#FFE6DA 70%)}
|
||
.bx-keep,.bx-open{text-align:center}
|
||
|
||
/* 此刻 · 同孕周（A+B 改版，2026-10-01）：人物头像表现「人」，不用应用 logo，和上面工具卡（色块 + logo）拉开。 */
|
||
.pl-row .pr-ava,.pp-avs i{flex:0 0 auto;display:block;border-radius:50%;overflow:hidden;background:#FFE3D3}
|
||
.pl-row .pr-ava{width:18px;height:18px}
|
||
.pr-ava svg,.pp-avs svg{display:block;width:100%;height:100%}
|
||
.pp-avs{flex:0 0 auto;display:flex}
|
||
.pp-avs:empty{display:none}
|
||
.pp-avs i{width:22px;height:22px;margin-left:-7px;border:1.5px solid #FFF6F0}
|
||
.pp-avs i:first-child{margin-left:0}
|
||
.pp-doing.hide{display:none}
|
||
.pp-doing{display:flex;flex-direction:column;margin-top:10px}
|
||
.pp-do{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--ink-2)}
|
||
.pp-dt{flex:0 0 auto;white-space:nowrap}
|
||
.pp-dt b{font-size:15px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
|
||
.pp-me{flex:0 0 auto;font:inherit;font-size:12px;font-weight:800;border:0;border-radius:999px;padding:4px 11px;white-space:nowrap}
|
||
.pp-me.todo{color:#fff;background:linear-gradient(135deg,#FF7A5C,#F4593C)}
|
||
.pp-me.todo:active{transform:scale(.95)}
|
||
.pp-me.ok{color:#4E8A43;background:#EAF5E6}
|
||
|
||
/* 孕期小知识 · 压缩版（2026-10-01：标题前带孕周；今日卡、7 天圆点、四张小卡都收紧，四卡改一行横滑） */
|
||
.pt-head{margin-bottom:8px;align-items:center}
|
||
.pt-title{display:flex;align-items:center;gap:6px;font-size:15.5px}
|
||
.pt-wk{display:inline-block;font-size:12.5px;font-weight:800;color:#fff;border-radius:8px;padding:2px 8px;
|
||
background:linear-gradient(135deg,#F4593C,#FF8A66);box-shadow:0 3px 8px rgba(244,89,60,.25);letter-spacing:0}
|
||
.pt-when{font-size:11px;padding:2px 8px}
|
||
.pt-today{padding:11px 14px 9px}
|
||
.pt-float{font-size:28px;top:8px}
|
||
.pt-body{min-height:0;padding-right:36px}
|
||
.pt-t{margin-top:6px;font-size:15px}
|
||
.pt-d{margin-top:3px;font-size:12.5px;line-height:1.6}
|
||
.pt-days{margin-top:8px;padding-top:7px}
|
||
.pt-day{gap:1px}
|
||
.pt-day i{width:22px;height:22px;line-height:22px;font-size:11px}
|
||
.pt-day span{font-size:9.5px}
|
||
.pt-grid{display:flex;gap:8px;margin:8px -26px 0;padding:0 26px 2px;overflow-x:auto;scroll-snap-type:x mandatory;
|
||
-webkit-overflow-scrolling:touch;scrollbar-width:none}
|
||
.pt-grid::-webkit-scrollbar{display:none}
|
||
.pt-card{flex:0 0 152px;scroll-snap-align:start;padding:9px 11px 10px;border-radius:14px;
|
||
display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center}
|
||
.pt-ico{width:24px;height:24px;border-radius:8px;font-size:14px}
|
||
.pt-card b{margin:0;font-size:12.5px}
|
||
.pt-card p{grid-column:1/-1;margin-top:5px;font-size:11.5px;line-height:1.5;
|
||
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
|
||
.pt-grid .pt-card{transform:translateX(16px)}
|
||
.pt-grid.is-shown .pt-card{transform:none}
|
||
.pt-foot{margin-top:6px;font-size:10.5px}
|
||
.pt-card.is-open p{-webkit-line-clamp:unset;display:block}
|
||
.pt-grid{scroll-padding:0 26px}
|
||
.li.hide{display:none}
|
||
|
||
/* 孕期小知识 · 字号放大（2026-10-01 用户反馈：下面的文字太小看着累）。正文统一 ≥13px，次要信息 ≥11px */
|
||
.pt-when{font-size:12px}
|
||
.pt-t{font-size:16px}
|
||
.pt-d{font-size:14px;line-height:1.7;color:var(--ink-2)}
|
||
.pt-day i{width:24px;height:24px;line-height:24px;font-size:12px}
|
||
.pt-day span{font-size:11px}
|
||
.pt-card{flex-basis:178px;padding:11px 12px 12px}
|
||
.pt-ico{width:26px;height:26px;font-size:15px}
|
||
.pt-card b{font-size:14px}
|
||
.pt-card p{font-size:13px;line-height:1.6;margin-top:6px}
|
||
.pt-foot{font-size:11.5px}
|
||
/* 首页四个入口（2026-10-01 用户要求：首页不放卡片文字，点进详情页）：图标 + 标题，一行四个 */
|
||
.pt-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
|
||
.pt-chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 2px 10px;border:0;border-radius:14px;
|
||
font:inherit;font-size:12.5px;font-weight:700;min-width:0;cursor:pointer;transition:transform .16s}
|
||
.pt-chip:active{transform:scale(.95)}
|
||
.pt-chip i{font-style:normal;font-size:20px;line-height:1}
|
||
.pt-chip span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.pt-chip.pc-baby span{color:#C4583C}.pt-chip.pc-mom span{color:#B3547E}.pt-chip.pc-eat span{color:#4F7F3E}.pt-chip.pc-care span{color:#4A6FA6}
|
||
|
||
/* 详情页 #detailTips：四张卡竖排、全文不截断 */
|
||
.pt-page{padding:16px 16px 40px}
|
||
.pt-page .pt-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
|
||
.pt-page .pt-card{display:block;padding:14px 16px 15px;border-radius:18px;transform:translateY(10px)}
|
||
.pt-page .pt-grid.is-shown .pt-card{transform:none}
|
||
.pt-page .pt-card b{display:inline-block;margin-left:8px;font-size:15px;vertical-align:middle}
|
||
.pt-page .pt-ico{width:30px;height:30px;font-size:17px;vertical-align:middle}
|
||
.pt-page .pt-card p{margin-top:8px;font-size:14.5px;line-height:1.75;display:block;-webkit-line-clamp:unset}
|
||
.pt-page .pt-foot{margin-top:16px;text-align:center}
|
||
/* 详情页 · 本周每日小知识列表 */
|
||
#ptToday{cursor:pointer}
|
||
.pt-sub{margin:22px 2px 10px;font-size:16px;font-weight:800;color:var(--ink)}
|
||
.pt-page .pt-sub:first-child{margin-top:4px}
|
||
.pt-list{display:grid;gap:10px}
|
||
.pt-li{border-radius:18px;padding:13px 16px 14px;background:#fff;box-shadow:var(--sh)}
|
||
.pt-li.is-today{background:linear-gradient(135deg,#FFE9E1 0%,#FFF1E6 55%,#FFF7EE 100%);box-shadow:none}
|
||
.pt-li-tag{display:inline-block;font-size:11.5px;font-weight:800;color:var(--brand);background:#FFF0EA;border-radius:999px;padding:2px 9px}
|
||
.pt-li.is-today .pt-li-tag{color:#fff;background:linear-gradient(135deg,#FF8A5C,#F4593C)}
|
||
.pt-li-t{margin-top:7px;font-size:16px;font-weight:800;color:#5A2E22}
|
||
.pt-li-d{margin-top:4px;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
|
||
.pt-li.is-lock{padding:11px 16px;font-size:13px;color:var(--ink-3,#A99);background:transparent;border:1px dashed #EBD9D0;box-shadow:none;text-align:center}
|
||
.pt-card.is-hit{animation:ptHit 1.2s ease}
|
||
@keyframes ptHit{0%,100%{box-shadow:0 0 0 0 rgba(244,89,60,0)}30%{box-shadow:0 0 0 3px rgba(244,89,60,.35)}}
|
||
|
||
/* ============ 孕期盲盒 · 价值感改造（2026-10-01）：下周预告 / 待解锁任务 / 集齐奖励 / 宝宝周记 ============ */
|
||
/* 下周预告：卡片剪影（同一张插画压成纯色）+ 倒计时 */
|
||
.bx-next{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:20px;background:#fff;box-shadow:var(--sh)}
|
||
.bx-next.hide{display:none}
|
||
.bx-next-img{flex:none;width:46px;height:58px;border-radius:10px;overflow:hidden;background:#F4E9E3;display:grid;place-items:center}
|
||
.bx-next-img img{width:100%;height:100%;object-fit:cover;filter:brightness(0) opacity(.18)}
|
||
.bx-next-img .cf-fb{font-size:24px;filter:grayscale(1) opacity(.35)}
|
||
.bx-next-t{flex:1;min-width:0}
|
||
.bx-next-t b{display:block;font-size:14px;font-weight:800}
|
||
.bx-next-t span{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
|
||
.bx-next-cd{flex:none;text-align:center;padding:6px 10px;border-radius:14px;background:#FFF0EA}
|
||
.bx-next-cd b{display:block;font-size:20px;line-height:1.1;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
|
||
.bx-next-cd span{font-size:10.5px;font-weight:700;color:#C4553E}
|
||
|
||
/* 待解锁 */
|
||
.bx-lock{margin-top:14px;padding:14px;border-radius:20px;background:#fff;box-shadow:var(--sh)}
|
||
.bx-lock.hide{display:none}
|
||
.bx-lock-h{display:flex;gap:10px;align-items:flex-start}
|
||
.bx-lock-ico{flex:none;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-size:17px;background:#F3EEFF}
|
||
.bx-lock-h b{font-size:14.5px;font-weight:800}
|
||
.bx-lock-h b em{font-style:normal;color:#7B61D9}
|
||
.bx-lock-h p{margin-top:2px;font-size:12px;color:var(--muted)}
|
||
.bx-chip.lk{color:#6A55B8;background:#F3EEFF}
|
||
.bx-chip.lk.on{color:#fff;background:linear-gradient(135deg,#9A85F0,#7B61D9);box-shadow:0 4px 10px rgba(123,97,217,.28)}
|
||
.bx-tasks{margin-top:12px;display:flex;flex-direction:column;gap:8px}
|
||
.bx-tk{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 11px;border-radius:16px;background:#FAF6F3}
|
||
.bx-tk.is-ready{background:#FFF3EC;box-shadow:inset 0 0 0 1.5px #FFC9B5}
|
||
.bx-tk-i{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:16px;background:#fff}
|
||
.bx-tk-m{flex:1;min-width:0}
|
||
.bx-tk-m b{display:block;font-size:13.5px;font-weight:800}
|
||
.bx-tk-m>span{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}
|
||
.bx-tk-pr{display:flex;align-items:center;gap:6px;margin-top:5px}
|
||
.bx-tk-p{flex:1;max-width:110px;height:5px;border-radius:3px;background:#EEE3DC;overflow:hidden}
|
||
.bx-tk-p s{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#FFB08F,#F4593C)}
|
||
.bx-tk-pr em{font-style:normal;font-size:11px;font-weight:700;color:#C4553E}
|
||
.bx-tk-b{flex:none;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;color:#C4553E;background:#fff;box-shadow:inset 0 0 0 1.2px #FFC9B5}
|
||
.bx-tk-b.go{color:#fff;background:linear-gradient(135deg,#FF7A5C,#F4593C);box-shadow:0 4px 10px rgba(244,89,60,.28)}
|
||
.bx-tk-b.done{color:#B9A296;background:none;box-shadow:none}
|
||
.bx-tk-b:disabled{opacity:.6}
|
||
|
||
/* 卡册里的待解锁格子 */
|
||
.bx-t.lockd{background:#F6F2FF;border:1.5px dashed #CFC2F5}
|
||
.bx-t.lockd .li{font-size:17px;line-height:1}
|
||
.bx-t.lockd .wk{color:#7B61D9;background:none}
|
||
|
||
/* 集齐奖励 */
|
||
.bx-goal{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||
.bx-goal:empty{display:none}
|
||
.bx-gl{padding:10px 11px;border-radius:14px;background:#FAF6F3}
|
||
.bx-gl.all{grid-column:1/-1;background:linear-gradient(135deg,#FFF6E2,#FFEBD9)}
|
||
.bx-gl.got{background:#FFF3EC}
|
||
.bx-gl-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px}
|
||
.bx-gl-h b{font-size:13px;font-weight:800}
|
||
.bx-gl-h em{font-style:normal;font-size:11.5px;font-weight:700;color:#C98A1E}
|
||
.bx-gl-l,.bx-gl-s{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
|
||
.bx-gl-l b{color:var(--brand);font-size:13px}
|
||
.bx-gl-s{font-weight:800;color:#E07B2E}
|
||
.bx-gl-s.sent{color:#3EA27A}
|
||
.bx-gl-s.off{font-weight:600;color:#B9A296}
|
||
.bx-gl-b{margin-left:auto;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#FF7A5C,#F4593C)}
|
||
.bx-gl-bar{display:block;margin-top:7px;height:5px;border-radius:3px;background:rgba(0,0,0,.06);overflow:hidden}
|
||
.bx-gl-bar s{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#FFD36E,#F4593C);transition:width .6s var(--ease)}
|
||
|
||
/* 翻卡层里的宝宝周记 */
|
||
.bx-diary{width:100%;max-width:300px;margin-top:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.14);text-align:left;
|
||
opacity:0;transform:translateY(16px);transition:all .45s}
|
||
.bx-diary:empty{display:none}
|
||
.bx-reveal.is-done .bx-diary{opacity:1;transform:none;transition-delay:.22s}
|
||
.bx-dy-h{font-size:12px;font-weight:800;color:#FFE3A6;margin-bottom:4px}
|
||
.bx-diary p{font-size:13.5px;line-height:1.7;color:#fff;font-family:var(--font-kid)}
|
||
|
||
/* 集齐庆祝弹层 + 收货表单 */
|
||
.bx-prize{text-align:center}
|
||
.bx-prize-ico{font-size:46px;line-height:1;margin:6px 0 8px}
|
||
.bx-prize h3{font-size:18px;font-weight:900}
|
||
.bx-prize p{margin:8px 4px 4px;font-size:14px;line-height:1.7;color:var(--ink-2)}
|
||
.bx-addr-tip{margin:-2px 0 12px;font-size:13px;line-height:1.6;color:var(--ink-2)}
|
||
/* 集齐奖励：三段一排（每格窄，名称 / 奖励 / 状态竖排），全集独占一行横排 */
|
||
.bx-goal{grid-template-columns:repeat(3,1fr);gap:7px}
|
||
.bx-gl:not(.all) .bx-gl-h{flex-direction:column;align-items:flex-start;gap:2px}
|
||
.bx-gl:not(.all) .bx-gl-l,.bx-gl:not(.all) .bx-gl-s,.bx-gl:not(.all) .bx-gl-b{margin-left:0}
|
||
.bx-gl:not(.all){padding:9px 10px}
|
||
|
||
/* ================= 「我的」页改版（2026-10-01）=================
|
||
配色：头部蜜桃 → 珊瑚柔光渐变（和首页 hero 同一家族）；兜豆兑换卡用兑换商城自己的
|
||
奶白 → 粉 + berry（见下），是全页最跳的一张；孕期卡回到白底 + 珊瑚进度（上一版深绿和全站暖色打架）；
|
||
心选商城 / 常用服务都是白卡，退到背景里。
|
||
⚠️ 本段写在文件末尾，靠层叠覆盖上面的旧规则（.me-top / .me-card / .preg-card …），
|
||
旧规则的注释讲的是旧版的取舍，看这里为准。 */
|
||
.me-top.me-v2{
|
||
padding:calc(env(safe-area-inset-top) + 14px) 20px 58px;border-radius:0 0 34px 34px;
|
||
background:
|
||
radial-gradient(180px 140px at 8% 0%, rgba(255,170,190,.55), rgba(255,170,190,0) 70%),
|
||
radial-gradient(200px 160px at 100% 85%, rgba(255,206,130,.55), rgba(255,206,130,0) 70%),
|
||
linear-gradient(160deg,#FF9F7E 0%,#F8775A 52%,#EE6248 100%)}
|
||
.me-top.me-v2::after{display:none}
|
||
.mt-glow{position:absolute;border-radius:50%;pointer-events:none}
|
||
.mt-glow.g1{width:210px;height:210px;right:-70px;top:-90px;background:rgba(255,255,255,.12)}
|
||
.mt-glow.g2{width:120px;height:120px;left:-40px;bottom:-60px;background:rgba(255,255,255,.08)}
|
||
.mt-stars{position:absolute;left:96px;top:calc(env(safe-area-inset-top) + 12px);width:150px;height:75px;pointer-events:none}
|
||
.me-top.me-v2 .hero-top{margin-bottom:6px;position:relative;z-index:2}
|
||
.me-v2 .me-card{background:none;box-shadow:none;padding:0 2px;border-radius:0;gap:15px;overflow:visible}
|
||
.me-v2 .me-avatar{width:70px;height:70px;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 8px 18px rgba(150,50,30,.28)}
|
||
.me-v2 .av-edit{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(150,50,30,.3)}
|
||
.me-v2 .me-name{color:#fff;font-size:23px;text-shadow:0 1px 6px rgba(150,50,30,.2)}
|
||
.me-tag{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;
|
||
color:#fff;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
|
||
.me-tag.hide{display:none}
|
||
.me-v2 .me-info p{color:rgba(255,255,255,.92);margin-top:6px;font-size:12.5px}
|
||
.me-v2 .me-info p b{color:#FFF3B0;font-size:15px}
|
||
.me-v2 .me-chev{color:rgba(255,255,255,.8)}
|
||
|
||
/* 兜豆兑换卡：半压在头部底边上。配色跟兑换商城走（商城侧给的视觉：berry #D9577A / 深 #B83F62，
|
||
点缀金 #FFC857，深棕字 #4A3530，底 #FFF8F1），图标就是商城那颗粉色兜豆（内联，不多一次请求）。 */
|
||
#screen-me .page-body.no-top{margin-top:-40px}
|
||
.bean-card{position:relative;overflow:hidden;width:100%;display:block;text-align:left;
|
||
padding:14px 14px 14px 10px;border-radius:24px;color:#4A3530;
|
||
background:
|
||
radial-gradient(150px 110px at 100% 0%, rgba(255,200,87,.38), rgba(255,200,87,0) 70%),
|
||
linear-gradient(118deg,#FFF8F1 0%,#FFEAF0 55%,#FFD6E2 100%);
|
||
box-shadow:0 14px 30px rgba(184,63,98,.20),inset 0 0 0 1px rgba(255,255,255,.75);transition:transform .18s var(--ease)}
|
||
.bean-card:active{transform:scale(.985)}
|
||
.bc-pattern{position:absolute;inset:0;pointer-events:none;opacity:.55;
|
||
background-image:radial-gradient(circle at 1px 1px, rgba(217,87,122,.28) 1px, transparent 1.4px);background-size:12px 12px;
|
||
-webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 100%);mask-image:linear-gradient(100deg,transparent 40%,#000 100%)}
|
||
.bc-top{display:flex;align-items:center;gap:10px;position:relative}
|
||
.bc-coin{flex:0 0 58px;filter:drop-shadow(0 5px 6px rgba(217,87,122,.25))}
|
||
.bc-coin svg{display:block}
|
||
.bc-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
|
||
.bc-kick{font-size:10.5px;font-weight:800;color:#fff;background:#D9577A;padding:2px 8px;border-radius:99px;letter-spacing:.5px}
|
||
.bc-title{font-size:19px;font-weight:900;letter-spacing:-.3px;color:#4A3530}
|
||
.bc-sub{font-size:12.5px;font-weight:700;color:#B83F62}
|
||
.bc-cta{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:9px 13px;border-radius:99px;
|
||
font-size:13.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#E8708F,#D9577A 60%,#B83F62);
|
||
box-shadow:0 6px 14px rgba(184,63,98,.35)}
|
||
.bc-cta i,.ms-go i,.es-go i{font-style:normal;font-size:16px;line-height:1;margin-left:1px}
|
||
.bc-drop{display:block;position:relative;margin:12px 0 0 4px;padding:10px;border-radius:16px;background:rgba(255,255,255,.72)}
|
||
.bc-drop.hide{display:none}
|
||
.bd-head{display:block;font-size:11.5px;font-weight:800;color:#B83F62;margin-bottom:8px}
|
||
.bd-head::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#E8344E;margin-right:6px;vertical-align:1px;
|
||
box-shadow:0 0 0 3px rgba(232,52,78,.18)}
|
||
.bd-goods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
|
||
.bd-it{display:flex;flex-direction:column;gap:3px;min-width:0}
|
||
.bd-it img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#FFF1F4}
|
||
.bd-nm{font-size:11.5px;color:#4A3530;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.bd-it b{font-size:11.5px;font-weight:900;color:#D9577A}
|
||
|
||
/* 孕期信息卡：白底 + 珊瑚进度 */
|
||
#screen-me .preg-card{color:var(--ink);
|
||
background:radial-gradient(200px 120px at 100% 0%, #FFEDE4, rgba(255,237,228,0) 70%),#fff;
|
||
box-shadow:var(--sh)}
|
||
#screen-me .pc-ico{background:#FFF0EA}
|
||
#screen-me .pc-title{color:var(--ink)}
|
||
#screen-me .pc-sub{color:var(--ink-2)}
|
||
#screen-me .preg-card .chev{color:#C9BFB8}
|
||
#screen-me .preg-card .rp{background:rgba(244,89,60,.1)}
|
||
#screen-me .pc-bar{background:#FBE7DE}
|
||
#screen-me .pc-bar i{background:linear-gradient(90deg,#FFB08F,#F4593C)}
|
||
#screen-me .pc-stage{color:#A0928A}
|
||
#screen-me .pc-stage .cur{color:#fff;background:linear-gradient(135deg,#F7845E,#E85A3C)}
|
||
|
||
/* 心选商城横幅 */
|
||
.mall-strip{width:100%;display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:20px;text-align:left;
|
||
background:#fff;box-shadow:var(--sh)}
|
||
.ms-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;color:#E8603F;
|
||
background:linear-gradient(140deg,#FFEDE5,#FFD9CA)}
|
||
.ms-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
||
.ms-main b{font-size:15.5px;font-weight:800;color:var(--ink)}
|
||
.ms-main span{font-size:12px;color:var(--ink-2)}
|
||
.ms-go{display:flex;align-items:center;font-size:13px;font-weight:700;color:var(--brand)}
|
||
|
||
/* 常用服务四宫格 */
|
||
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 6px;border-radius:22px;background:#fff;box-shadow:var(--sh)}
|
||
.svc{position:relative;overflow:visible!important;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0}
|
||
.svc.hide{display:none}
|
||
.sv-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center}
|
||
.sv-ico.o{background:#FFEFE6;color:#E8703F}
|
||
.sv-ico.p{background:#F1EBFB;color:#7B5FD4}
|
||
.sv-ico.b{background:#E7F0FA;color:#4478BC}
|
||
.sv-t{font-size:12.5px;font-weight:700;color:var(--ink)}
|
||
.sv-badge{position:absolute;top:-6px;left:50%;margin-left:10px;padding:1px 6px;white-space:nowrap;border-radius:99px;font-size:10px;font-weight:800;
|
||
color:#fff;background:var(--brand);box-shadow:0 0 0 2px #fff}
|
||
.sv-badge:empty{display:none}
|
||
.me-logout{display:block;width:100%;margin-top:14px;padding:14px;border-radius:18px;background:#fff;
|
||
font-size:14.5px;font-weight:700;color:#C33A2E;text-align:center;box-shadow:var(--sh)}
|
||
.me-ver{text-align:center;font-size:11.5px;color:#B5A9A1;margin:18px 0 6px}
|
||
|
||
/* 首页 · 兜豆兑换商城入口条（婴儿房下面） */
|
||
.exch-strip{width:100%;display:flex;align-items:center;gap:11px;margin-top:12px;padding:12px 14px;border-radius:20px;text-align:left;
|
||
background:radial-gradient(120px 80px at 100% 0%, rgba(255,200,87,.35), rgba(255,200,87,0) 70%),linear-gradient(118deg,#FFF8F1,#FFEAF0 60%,#FFD6E2);
|
||
box-shadow:0 10px 22px rgba(184,63,98,.16),inset 0 0 0 1px rgba(255,255,255,.75)}
|
||
.es-coin{flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(217,87,122,.25))}
|
||
.es-coin svg{display:block}
|
||
.es-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
||
.es-main b{font-size:15px;font-weight:900;color:#4A3530}
|
||
.es-main span{font-size:12px;font-weight:700;color:#B83F62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.es-go{flex:0 0 auto;display:flex;align-items:center;padding:7px 12px;border-radius:99px;font-size:13px;font-weight:800;color:#fff;
|
||
background:linear-gradient(135deg,#E8708F,#D9577A 60%,#B83F62);box-shadow:0 5px 12px rgba(184,63,98,.3)}
|
||
|
||
/* ================= 「我的资料」弹窗改版（2026-10-01）=================
|
||
目标：好填。实时结果条在最上面；预产期三种填法；孕周用大号步进按钮，不用敲键盘；
|
||
头像缩进「妈妈」卡和昵称并排；每组一张白卡，读起来是三件事，不是一长串输入框。 */
|
||
.pf-modal{padding-bottom:0}
|
||
.pf-lead{font-size:12.5px;color:var(--ink-2);margin-top:4px}
|
||
.pf-sum{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:20px;color:#fff;
|
||
background:linear-gradient(135deg,#C9BEB6,#B2A69D);transition:background .3s}
|
||
.pf-sum.is-set{background:radial-gradient(140px 90px at 100% 0%, rgba(255,214,150,.45), rgba(255,214,150,0) 70%),linear-gradient(135deg,#FF9A7A,#F2664A);
|
||
box-shadow:0 10px 22px rgba(240,100,70,.28)}
|
||
.ps-ico{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:0 0 auto}
|
||
.ps-main{display:flex;flex-direction:column;gap:2px;min-width:0}
|
||
.ps-main b{font-size:19px;font-weight:900;letter-spacing:-.3px}
|
||
.ps-main span{font-size:12.5px;opacity:.92}
|
||
.pf-card{margin-top:12px;padding:14px 14px 16px;border-radius:20px;background:#fff;box-shadow:0 4px 14px rgba(160,110,90,.08)}
|
||
.pf-ct{font-size:15px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px}
|
||
.pf-ct em{font-style:normal;font-size:11px;font-weight:800;color:#fff;background:var(--brand);padding:1px 7px;border-radius:99px}
|
||
.seg{display:flex;margin-top:12px;padding:4px;border-radius:14px;background:#F5EEE9}
|
||
.seg-b{flex:1;padding:9px 2px;border-radius:11px;font-size:13px;font-weight:700;color:var(--ink-2);transition:all .2s}
|
||
.seg-b.is-active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(160,90,60,.14)}
|
||
.pg-pane{display:none;margin-top:12px}
|
||
.pg-pane.is-on{display:block}
|
||
.pg-tip{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
|
||
.date-btn{position:relative;display:flex;align-items:center;gap:10px;padding:0 14px;min-height:54px;border-radius:16px;
|
||
background:#FFF6F2;box-shadow:inset 0 0 0 1.5px #F6D6CA;cursor:pointer}
|
||
.date-btn.is-set{background:#FDECE7;box-shadow:inset 0 0 0 1.8px var(--brand)}
|
||
.db-ico{color:var(--brand);display:grid;place-items:center}
|
||
.db-txt{flex:1;font-size:16px;font-weight:700;color:#B4A79C}
|
||
.date-btn.is-set .db-txt{color:var(--ink)}
|
||
/* 原生日期控件整块盖在按钮上、透明：点哪儿都能唤起系统日期选择器 */
|
||
.date-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;-webkit-appearance:none;appearance:none;cursor:pointer}
|
||
.date-btn input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
|
||
.stp-row{display:flex;gap:10px}
|
||
.stp{flex:1;min-width:0}
|
||
.stp-l{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
|
||
.stp-ctl{display:flex;align-items:center;height:54px;border-radius:16px;background:#FFF6F2;box-shadow:inset 0 0 0 1.5px #F6D6CA;overflow:hidden}
|
||
.stp-b{flex:0 0 44px;height:100%;font-size:22px;font-weight:700;color:var(--brand)}
|
||
.stp-b:active{background:#FBE2D9}
|
||
.stp-ctl input{flex:1;min-width:0;width:100%;height:100%;border:0;background:none;text-align:center;font-size:22px;font-weight:900;color:var(--ink);
|
||
-moz-appearance:textfield;padding:0}
|
||
.stp-ctl input::-webkit-outer-spin-button,.stp-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
|
||
.stp-ctl input:focus{outline:none}
|
||
.pf-fld{margin-top:12px}
|
||
.nm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
|
||
.nm-c{padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:700;color:#B4573E;background:#FFF1EB}
|
||
.nm-c:active{transform:scale(.95)}
|
||
.pf-me{display:flex;align-items:flex-end;gap:14px}
|
||
.pf-me .av-pick{padding:0;flex:0 0 auto}
|
||
.pf-me .av-big{width:64px;height:64px}
|
||
.pf-me .av-big>svg{width:36px;height:36px}
|
||
.pf-me .fld{flex:1;margin-top:0}
|
||
.pf-foot{position:sticky;bottom:0;margin:14px -22px 0;padding:12px 22px calc(14px + env(safe-area-inset-bottom));
|
||
background:linear-gradient(rgba(250,245,241,0),#FAF5F1 30%)}
|
||
.pf-foot .dl-btn.ghost{flex:0 0 96px}
|
||
.pf-me .av-cam{width:24px;height:24px;right:-4px;bottom:-4px}
|
||
.pf-me .av-cam svg{width:12px;height:12px}
|
||
|
||
/* 首页 · 兜豆兑好物模块：头部一条 + 横滑商品（2026-10-01 用户：「需要调出几个商品，不能直接是一条信息」） */
|
||
.exch-mod{margin-top:12px;padding:6px 6px 12px;border-radius:24px;
|
||
background:radial-gradient(160px 110px at 100% 0%, rgba(255,200,87,.32), rgba(255,200,87,0) 70%),linear-gradient(160deg,#FFF8F1,#FFEAF0 60%,#FFDCE6);
|
||
box-shadow:0 10px 24px rgba(184,63,98,.14),inset 0 0 0 1px rgba(255,255,255,.75)}
|
||
.exch-mod .exch-strip{margin-top:0;background:none;box-shadow:none;padding:8px 8px 6px}
|
||
.ex-goods{display:flex;gap:9px;overflow-x:auto;padding:6px 8px 2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
|
||
.ex-goods::-webkit-scrollbar{display:none}
|
||
.ex-goods.hide{display:none}
|
||
.ex-it{flex:0 0 96px;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;padding:6px 6px 8px;border-radius:16px;background:#fff;
|
||
box-shadow:0 4px 10px rgba(184,63,98,.08);cursor:pointer}
|
||
.ex-it:active{transform:scale(.97)}
|
||
.gi-pic{position:relative;display:block}
|
||
.gi-pic img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#FFF1F4}
|
||
.gi-badge{position:absolute;left:4px;top:4px;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#E8344E;padding:1px 6px;border-radius:99px}
|
||
.gi-left{position:absolute;left:4px;right:4px;bottom:4px;text-align:center;font-style:normal;font-size:10px;font-weight:800;color:#fff;
|
||
background:rgba(74,53,48,.62);padding:1px 0;border-radius:8px}
|
||
.ex-it .bd-nm{font-size:12px;color:#4A3530;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
|
||
.ex-it b{font-size:12px;font-weight:900;color:#D9577A}
|
||
|
||
/* 「我的」页：孕期卡和兜豆卡对调 —— 孕期卡半压在头部底边，阴影加深一点才「浮」得起来 */
|
||
#screen-me .page-body.no-top>.preg-card:first-of-type{box-shadow:0 14px 30px rgba(140,56,34,.18),0 2px 6px rgba(140,56,34,.08)}
|
||
.seg-b{text-align:center;white-space:nowrap}
|
||
.stp-b{width:48px;min-width:48px;display:grid;place-items:center;padding:0}
|
||
.stp-ctl input{width:0}
|
||
|
||
/* ================= 宝宝消消乐卡压矮（2026-10-01 用户：「高度可以降一降」）================= */
|
||
.gp-card{padding:11px 12px 11px 16px;border-radius:20px}
|
||
.gp-text{padding-top:10px}
|
||
.gp-name{font-size:18px}
|
||
.gp-sub{margin-top:3px;font-size:11.5px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
|
||
.gp-cta{margin-top:7px;padding:4px 12px;font-size:12px}
|
||
.gp-board{grid-template-columns:repeat(3,22px);gap:3px;padding:5px;border-radius:12px}
|
||
.gp-board i{width:22px;height:22px;border-radius:7px;font-size:13px}
|
||
.gp-card::before{width:120px;height:120px;bottom:-56px}
|
||
|
||
/* ================= 今日脚印 2026-10-01 改版（.fp2）=================
|
||
一张奶油色的「手账」：撕页日历 + 一左一右的小脚丫沿虚线往下走 + 宝宝写给妈妈的便签。
|
||
⚠️ 写在文件末尾，靠 .today-line.fp2 覆盖上面那套旧的时间轴列宽变量（--tl-*）布局。 */
|
||
.today-line.fp2{padding:16px 16px 16px;
|
||
background-color:#fff;
|
||
background-image:
|
||
radial-gradient(160px 110px at 100% 0%, rgba(255,214,190,.45), rgba(255,214,190,0) 70%),
|
||
radial-gradient(140px 120px at 0% 100%, rgba(255,226,236,.55), rgba(255,226,236,0) 70%),
|
||
linear-gradient(180deg,#FFFCF8,#FFF6EF)}
|
||
.today-line.fp2::before{display:none}
|
||
.fp-head{display:flex;align-items:center;gap:12px}
|
||
.fp-cal{position:relative;flex:0 0 56px;height:60px;border-radius:14px;overflow:hidden;background:#fff;
|
||
box-shadow:0 6px 14px rgba(200,110,80,.16),inset 0 0 0 1px #F6E3DA;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px}
|
||
.fp-cal::before{content:"";position:absolute;left:0;right:0;top:0;height:17px;background:linear-gradient(135deg,#FF8E6E,#F4593C)}
|
||
.fc-ring{position:absolute;top:-3px;left:14px;right:14px;height:9px;
|
||
background:radial-gradient(circle,#fff 2.2px,transparent 2.6px) 0 50%/14px 9px repeat-x}
|
||
.fp-cal b{font-size:23px;font-weight:900;line-height:1;color:#3A2C27;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
|
||
.fp-cal span{font-size:9.5px;font-weight:700;color:#A08C82;margin-top:3px;white-space:nowrap}
|
||
.fp-ht{flex:1;min-width:0}
|
||
.fp2 .tl-h-title{font-size:18px;font-weight:900;color:var(--ink);letter-spacing:-.3px}
|
||
.fp-poem{margin-top:4px;font-size:12px;color:#A57F70;font-family:var(--font-kid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.fp-all{flex:0 0 auto;align-self:flex-start;margin-top:4px;display:flex;align-items:center;gap:1px;font-size:12.5px;font-weight:700;color:var(--muted)}
|
||
.fp-all i{font-style:normal;font-size:15px;line-height:1}
|
||
|
||
/* 脚印行：左边一只小脚丫（交替左右、交替颜色），沿一条虚线往下；右边一张小卡 */
|
||
.fp2 .fp-steps{position:relative;margin-top:14px;padding:0}
|
||
.fp2 .fp-steps::before{content:"";position:absolute;left:13px;top:16px;bottom:16px;border-left:2px dashed #F3D6CA}
|
||
.fp2 .step{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px}
|
||
.fp2 .st-dot{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
|
||
background:#FFEDE6;color:#F4704F;box-shadow:0 0 0 3px #FFF8F3;z-index:1}
|
||
.fp2 .step:nth-child(odd) .st-dot svg{transform:scaleX(-1) rotate(-8deg)}
|
||
.fp2 .step:nth-child(even) .st-dot svg{transform:rotate(8deg) translateY(1px)}
|
||
.fp2 .step:nth-child(3n+2) .st-dot{background:#FDE8F0;color:#D9577A}
|
||
.fp2 .step:nth-child(3n) .st-dot{background:#FFF3D6;color:#E0A126}
|
||
.st-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.9);
|
||
box-shadow:0 3px 10px rgba(190,120,95,.08),inset 0 0 0 1px #F7EAE3}
|
||
.fp2 .st-txt{font-size:14.5px;font-weight:700;color:#3A2C27;white-space:normal;line-height:1.45}
|
||
.fp2 .st-txt b{font-size:17px;font-weight:900;color:var(--brand);margin:0 2px;font-variant-numeric:tabular-nums}
|
||
.st-meta{display:flex;align-items:center;gap:6px;min-width:0}
|
||
.fp2 .st-time{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#B09A8F}
|
||
.fp2 .st-from{margin:0;font-size:10.5px;font-weight:700;color:#C0704F;background:#FFF0E8;border-radius:99px;padding:1px 8px}
|
||
.fp2 .st-from:empty{display:none}
|
||
.st-det{font-size:11px;color:#B09A8F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
|
||
/* 还没脚印：一行小脚丫走过来 + 引导语（童趣字体）+ 带 logo 的应用芯片 */
|
||
.fp2 .fp-guide{display:block;margin-top:14px;padding:14px 14px 16px;border-radius:18px;text-align:center;
|
||
background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1.5px #F6E1D8;border:0}
|
||
.fp2 .fp-guide::before,.fp2 .fp-guide::after{display:none}
|
||
.fg-walk{display:flex;justify-content:center;align-items:flex-end;gap:12px;height:30px;color:#F6B39D}
|
||
.fg-walk i{display:block;line-height:0}
|
||
.fg-walk i:nth-child(odd){transform:translateY(-8px) scaleX(-1) rotate(-12deg)}
|
||
.fg-walk i:nth-child(even){transform:rotate(12deg)}
|
||
.fg-walk .fw0{opacity:.3}.fg-walk .fw1{opacity:.45}.fg-walk .fw2{opacity:.6}.fg-walk .fw3{opacity:.8}.fg-walk .fw4{color:var(--brand);animation:fpStep 1.6s ease-in-out infinite}
|
||
@keyframes fpStep{0%,100%{transform:rotate(12deg)}50%{transform:rotate(12deg) translateY(-3px) scale(1.12)}}
|
||
.fp2 .tl-guide-t{display:block;margin-top:10px;font-family:var(--font-kid);font-size:16.5px;font-weight:700;line-height:1.55;color:#4A3530}
|
||
.fp2 .tl-guide-s{display:block;margin-top:4px;font-size:12px;color:#A08C82}
|
||
.fp2 .tl-guide-apps{justify-content:center;gap:7px;margin-top:12px}
|
||
.fp2 .tl-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 5px;border-radius:99px;border:0;
|
||
font-size:12.5px;font-weight:700;color:#4A3530;background:#fff;box-shadow:0 2px 8px rgba(190,110,85,.14),inset 0 0 0 1px #F6E1D8}
|
||
.fp2 .tl-chip img{width:20px;height:20px;border-radius:6px;object-fit:cover}
|
||
.fp2 .tl-chip.is-plain{padding-left:11px}
|
||
@media (prefers-reduced-motion:reduce){.fg-walk .fw4{animation:none}}
|
||
|
||
/* 宝宝的便签：信纸横线 + 胶带 + 落款 */
|
||
.fp2 .fp-note{position:relative;display:block;width:100%;margin-top:14px;padding:16px 16px 12px;text-align:left;border-radius:6px 18px 18px 18px;
|
||
overflow:visible;background:#FFFDF7;box-shadow:0 8px 20px rgba(200,120,90,.14),inset 0 0 0 1px #F5E4DA}
|
||
.fp2 .fp-note::after{content:"";position:absolute;left:50%;top:-8px;width:64px;height:16px;margin-left:-32px;transform:rotate(-3deg);
|
||
background:rgba(255,190,160,.55);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
|
||
.fn-top{display:flex;align-items:center;gap:7px}
|
||
.fp2 .ab-badge{flex:0 0 auto;margin:0;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:900;color:#fff;
|
||
background:linear-gradient(135deg,#FF8E6E,#F4593C);letter-spacing:.5px}
|
||
.fp2 .ab-tag{margin:0;font-size:12.5px;font-weight:800;color:#C0573C;opacity:1}
|
||
.fp2 .ab-say{display:block;margin-top:8px;font-family:var(--font-kid);font-size:16.5px;font-weight:700;line-height:30px;color:#4A3530;
|
||
background-image:repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(232,180,160,.38) 29px,rgba(232,180,160,.38) 30px)}
|
||
.fn-foot{display:flex;align-items:center;gap:8px;margin-top:6px}
|
||
.fn-sign{font-family:var(--font-kid);font-size:13px;color:#C0704F}
|
||
.fn-foot em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--brand)}
|
||
.today-line.fp2.no-ai .fp-note{display:none}
|
||
|
||
/* ================= 本周孕育指南 → 孕周专属福利（.shelf.gift2，2026-10-01）=================
|
||
礼盒抬头 + 三张「福利券」：孕周角标、免费印章、撕券虚线（两侧半圆缺口）、底行免费领。 */
|
||
.shelf.gift2{background-image:
|
||
radial-gradient(170px 110px at 100% 0%, rgba(255,200,170,.38), rgba(255,200,170,0) 70%),
|
||
linear-gradient(180deg,#FFFDFB,#FFF7F1)}
|
||
.gb-bar{align-items:center;gap:10px;margin-bottom:12px}
|
||
.gb-gift{flex:0 0 42px;height:42px;border-radius:14px;display:grid;place-items:center;
|
||
background:linear-gradient(145deg,#FFF1E6,#FFE1D2);box-shadow:inset 0 0 0 1px #FBD9C8}
|
||
.gb-gift svg{animation:gbWiggle 3.2s ease-in-out infinite;transform-origin:50% 90%}
|
||
@keyframes gbWiggle{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-9deg)}90%{transform:rotate(8deg)}94%{transform:rotate(-4deg)}}
|
||
.gb-ht{flex:1;min-width:0}
|
||
.gift2 .sh-title{font-size:18px;font-weight:900;color:var(--ink)}
|
||
.gift2 .sh-title [data-wk]{color:#F4593C}
|
||
.gift2 .sh-note{margin:3px 0 0;font-size:12.5px;color:#A08C82}
|
||
.gift2 .sh-note b{color:#E8344E;font-weight:800}
|
||
.gift2 .sh-all{align-self:flex-start;margin-top:4px}
|
||
|
||
.gift2 .shelf-book{position:relative;overflow:hidden;padding:14px 14px 12px}
|
||
.sb-tag{position:absolute;left:0;top:0;z-index:1;padding:4px 10px 4px 12px;border-radius:20px 0 14px 0;
|
||
font-size:11px;font-weight:800;color:#fff;letter-spacing:.3px;background:linear-gradient(135deg,#FF8E6E,#F4593C)}
|
||
.sb-stamp{position:absolute;right:12px;top:12px;z-index:1;width:44px;height:44px;border-radius:50%;
|
||
display:grid;place-items:center;text-align:center;font-size:11px;font-weight:900;line-height:1.15;color:#E8344E;
|
||
border:2px solid rgba(232,52,78,.75);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),inset 0 0 0 3.5px rgba(232,52,78,.35);
|
||
background:rgba(255,255,255,.55);transform:rotate(14deg)}
|
||
.gift2 .sb-cover{margin-top:10px}
|
||
/* 撕券线：虚线 + 左右两个半圆缺口（缺口颜色取外壳底色，近白） */
|
||
.gift2 .sb-row{position:relative;margin-top:auto;padding-top:11px;border-top:1.5px dashed rgba(170,110,80,.28)}
|
||
.gift2 .sb-row::before,.gift2 .sb-row::after{content:"";position:absolute;top:-8px;width:15px;height:15px;border-radius:50%;background:#FFFAF6}
|
||
.gift2 .sb-row::before{left:-22px}
|
||
.gift2 .sb-row::after{right:-22px}
|
||
.gift2 .sb-desc{margin-bottom:12px}
|
||
.gift2 .sb-row .pill-free{margin-left:auto;padding:5px 11px;border-radius:99px;font-size:12px;font-weight:800;
|
||
color:#fff;background:linear-gradient(135deg,#FF7A5C,#E8344E);box-shadow:0 4px 10px rgba(232,52,78,.22)}
|
||
.gift2 .unlock{display:block;text-align:center;margin:14px 0 2px;padding:9px 12px;border-radius:14px;
|
||
background:#FFF1E8;color:#8A6A5E;font-size:12.5px}
|
||
.gift2 .unlock b{color:#E8344E;font-size:15px;font-weight:900;margin:0 1px}
|
||
.ul-gift{display:inline-block;vertical-align:-3px;margin-right:5px;width:16px;height:16px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='12' rx='2.5' fill='%23FF7A5C'/%3E%3Crect x='2' y='7' width='20' height='4.5' rx='2' fill='%23FF9474'/%3E%3Crect x='10.6' y='7' width='2.8' height='14' fill='%23FFD36E'/%3E%3C/svg%3E")}
|
||
@media (prefers-reduced-motion:reduce){.gb-gift svg{animation:none}}
|
||
.gift2 .sb-faces i:nth-child(n+4){display:none}
|
||
.gift2 .sb-row .pill-free{padding:5px 10px}
|
||
.gift2 .unlock a{white-space:nowrap}
|
||
|
||
/* 今日脚印 · 无记录时的两条示例（.is-demo） */
|
||
.fp-demo-t{display:flex;align-items:center;gap:6px;margin:14px 0 -4px;font-size:12.5px;font-weight:700;color:#A57F70}
|
||
.fp-demo-t i{font-style:normal;color:#F4A08A}
|
||
.fp-demo-t em{font-style:normal;margin-left:auto;font-size:10.5px;font-weight:800;color:#C0704F;background:#FFF0E8;border-radius:6px;padding:2px 7px}
|
||
.fp2 .fp-steps.is-demo .step{opacity:.72}
|
||
.fp2 .fp-steps.is-demo .st-card{position:relative;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px #F6DDD2;border:0;
|
||
background-image:repeating-linear-gradient(135deg,rgba(255,236,226,.5) 0 6px,transparent 6px 12px)}
|
||
.st-demo{position:absolute;right:8px;top:8px;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#F4A08A;border-radius:6px;padding:1px 6px}
|
||
.fp2 .fp-steps.is-demo + .fp-guide{margin-top:10px}
|
||
|
||
/* ================= 底部导航 2026-10-01 改版 =================
|
||
白色磨砂药丸 + 选中项一颗暖色胶囊托底（图标+字一起包住，带一点弹跳）；
|
||
中间「记一下」升起成一颗带白圈的大圆钮，白圈和药丸同色 → 看着像从药丸里鼓出来的；圆钮外一圈呼吸光环。 */
|
||
.tabbar{left:16px;right:16px;height:62px;border-radius:31px;padding:0 6px;
|
||
background:rgba(255,255,255,.94);
|
||
box-shadow:0 12px 32px rgba(170,90,60,.18),0 2px 6px rgba(170,90,60,.08),inset 0 0 0 1px rgba(255,220,205,.6)}
|
||
.tab{gap:2px;color:#B4A79F;z-index:0}
|
||
.tab::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:62px;height:50px;margin:-25px 0 0 -31px;border-radius:20px;
|
||
background:linear-gradient(160deg,#FFF0E8,#FFE0D3);box-shadow:inset 0 0 0 1px rgba(255,190,165,.45);
|
||
opacity:0;transform:scale(.6);transition:opacity .25s,transform .4s cubic-bezier(.3,1.6,.5,1)}
|
||
.tab.is-active::before{opacity:1;transform:scale(1)}
|
||
.tab.is-active{color:#F4593C}
|
||
.tab.is-active .t-ico{transform:translateY(-1px);animation:tabPop .45s cubic-bezier(.3,1.6,.5,1)}
|
||
@keyframes tabPop{0%{transform:scale(.7)}100%{transform:translateY(-1px) scale(1)}}
|
||
.tab.is-active .t-txt{font-weight:800}
|
||
.tab-fab::before{display:none}
|
||
.tab-fab{justify-content:flex-end;padding-bottom:8px}
|
||
.tab-fab .fab{position:absolute;left:50%;top:-22px;width:52px;height:52px;margin-left:-26px;
|
||
border:4px solid #fff;box-sizing:content-box;background:#fff;
|
||
box-shadow:0 -4px 10px rgba(170,90,60,.08),0 8px 18px rgba(244,89,60,.38)}
|
||
.tab-fab .fab::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(244,89,60,.45);
|
||
animation:fabHalo 2.4s ease-out infinite;pointer-events:none}
|
||
@keyframes fabHalo{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
|
||
.tab-fab .t-txt{font-weight:800;color:#F4593C}
|
||
.t-badge{top:6px;left:calc(50% + 9px);border-color:#fff;box-shadow:0 0 0 2px rgba(255,59,48,.18)}
|
||
@media (prefers-reduced-motion:reduce){.tab-fab .fab::after,.tab.is-active .t-ico{animation:none}}
|
||
|
||
/* 首页兜豆兑好物：和其它模块同一套白色外壳（出血 26px、圆角 26、暖色渐变底） */
|
||
.exch-wrap{margin:16px -26px 0;padding:16px 26px 18px;border-radius:26px;position:relative;z-index:0;
|
||
background-color:#fff;background-image:radial-gradient(170px 110px at 100% 0%, rgba(255,214,190,.38), rgba(255,214,190,0) 70%),linear-gradient(180deg,#FFFDFB,#FFF7F3)}
|
||
.exch-wrap .exch-mod{margin-top:0}
|
||
/* 2026-10-01 用户：选中项不要背景圆圈/底色，只靠颜色+加粗+图标弹一下 + 下方小圆点 */
|
||
.tab::before{display:none}
|
||
.tab::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#F4593C;opacity:0;transform:scale(0);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
|
||
.tab.is-active::after{opacity:1;transform:scale(1)}
|
||
.tab-fab::after{display:none}
|
||
|
||
/* ================= 首页底部三模块拉开色相（2026-10-01）=================
|
||
用户：脚印 / 消消乐 / 福利三块都是珊瑚桃色，视觉疲劳。按功能各给一个色系，饱和度和明度保持同一档，
|
||
整页还是暖调、和品牌橙不打架：
|
||
· 今日脚印 = 「成长」薄荷绿（便签保持奶油白，暖色落在宝宝的话上）
|
||
· 宝宝消消乐 = 「糖果」紫（整页唯一的冷色块，游戏感最强，也最跳）
|
||
· 孕周专属福利 = 「礼物」蜂蜜金（金色 = 福利/礼包；「免费领」按钮仍用红，保留紧迫感） */
|
||
|
||
/* —— 今日脚印：薄荷绿 —— */
|
||
.today-line.fp2{background-color:#fff;background-image:
|
||
radial-gradient(180px 120px at 100% 0%, rgba(178,232,208,.55), rgba(178,232,208,0) 70%),
|
||
radial-gradient(150px 120px at 0% 100%, rgba(206,240,226,.6), rgba(206,240,226,0) 70%),
|
||
linear-gradient(180deg,#F8FDFA,#EEF8F3)}
|
||
.fp-cal{box-shadow:0 6px 14px rgba(60,150,115,.16),inset 0 0 0 1px #D8EEE4}
|
||
.fp-cal::before{background:linear-gradient(135deg,#5FCB9F,#2FA57C)}
|
||
.fp-poem{color:#5E9580}
|
||
.fp2 .fp-steps::before{border-left-color:#BFE3D2}
|
||
.fp2 .st-dot{background:#DDF3E9;color:#2FA57C;box-shadow:0 0 0 3px #F3FBF7}
|
||
.fp2 .step:nth-child(3n+2) .st-dot{background:#FDE8F0;color:#D9577A}
|
||
.fp2 .step:nth-child(3n) .st-dot{background:#FFF3D6;color:#E0A126}
|
||
.st-card{box-shadow:0 3px 10px rgba(60,140,110,.08),inset 0 0 0 1px #E1F1E9}
|
||
.fp2 .st-from{color:#2C8E6B;background:#E3F5EC}
|
||
.fp2 .st-txt b{color:#23946C}
|
||
.fp-demo-t{color:#5E9580}.fp-demo-t i{color:#5FCB9F}
|
||
.fp2 .fp-steps.is-demo .st-card{box-shadow:inset 0 0 0 1.5px #CBE8DA;
|
||
background-image:repeating-linear-gradient(135deg,rgba(220,243,232,.6) 0 6px,transparent 6px 12px)}
|
||
.st-demo{background:#7CC9A7}
|
||
.fg-walk{color:#A9DCC4}.fg-walk .fw4{color:#2FA57C}
|
||
.fp2 .fp-guide{box-shadow:inset 0 0 0 1.5px #D3EBDF}
|
||
.fp2 .tl-chip{box-shadow:0 2px 8px rgba(60,140,110,.14),inset 0 0 0 1px #D3EBDF}
|
||
.fp2 .fp-note{box-shadow:0 8px 20px rgba(60,130,100,.13),inset 0 0 0 1px #E6EFE6}
|
||
.fp2 .fp-note::after{background:rgba(130,214,176,.55)}
|
||
.fp2 .ab-badge{background:linear-gradient(135deg,#5FCB9F,#2FA57C)}
|
||
.fp2 .ab-tag{color:#2C8E6B}
|
||
.fn-sign{color:#4E9A7D}.fn-foot em{color:#23946C}
|
||
.fp-all{color:#5E8576}
|
||
|
||
/* —— 宝宝消消乐：糖果紫 —— */
|
||
.gp-card{background:linear-gradient(120deg,#8C7BFF 0%,#B18CFF 52%,#FF9BD0 100%);
|
||
box-shadow:0 10px 24px rgba(130,100,240,.30)}
|
||
.gp-card::after{content:"";position:absolute;right:-30px;top:-50px;width:150px;height:150px;border-radius:50%;
|
||
background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);pointer-events:none}
|
||
.gp-name{text-shadow:0 2px 0 rgba(90,60,200,.35)}
|
||
.gp-new{color:#6B4FE0;background:#FFE58A}
|
||
.gp-cta{color:#6B4FE0;box-shadow:0 4px 10px rgba(80,50,190,.25)}
|
||
.gp-board{background:rgba(255,255,255,.28)}
|
||
.gp-board i{box-shadow:0 2px 0 rgba(110,80,210,.28)}
|
||
.gp-board i.is-hint{background:#FFF6D6;box-shadow:0 0 0 2px #FFD36E}
|
||
|
||
/* —— 孕周专属福利：蜂蜜金 —— */
|
||
.shelf.gift2{background-color:#fff;background-image:
|
||
radial-gradient(180px 120px at 100% 0%, rgba(255,214,120,.42), rgba(255,214,120,0) 70%),
|
||
linear-gradient(180deg,#FFFDF5,#FFF7E3)}
|
||
.gb-gift{background:linear-gradient(145deg,#FFF4D2,#FFE7A8);box-shadow:inset 0 0 0 1px #F8DC95}
|
||
.gift2 .sh-title [data-wk]{color:#D88A0B}
|
||
.sb-tag{background:linear-gradient(135deg,#FFC84A,#F29A12);color:#fff;text-shadow:0 1px 1px rgba(160,90,0,.25)}
|
||
.gift2 .sb-row{border-top-color:rgba(200,150,60,.32)}
|
||
.gift2 .sb-row::before,.gift2 .sb-row::after{background:#FFF9EA}
|
||
.gift2 .unlock{background:#FFF0C8;color:#8A6A3A}
|
||
/* 2026-10-01 用户：兜豆兑好物是标题，字放大 */
|
||
.exch-wrap .es-main b{font-size:18px;letter-spacing:-.2px;line-height:1.25}
|
||
.exch-wrap .es-main{gap:3px}
|
||
|
||
/* ================= 盲盒横幅提亮（2026-10-01 用户：颜色和背景融在一起，不突出）=================
|
||
原来奶油粉→薰衣草，和上面橙色大图、米色页面底同一个明度，一眼找不到。
|
||
改成高饱和莓红→紫罗兰的深色条 + 白字 + 金色胶囊：和上面的珊瑚橙拉开色相，又同是暖粉一路，不突兀。 */
|
||
.bb-banner{color:#fff;border:0;
|
||
background:
|
||
radial-gradient(120px 80px at 88% -10%, rgba(255,214,110,.45), rgba(255,214,110,0) 70%),
|
||
linear-gradient(105deg,#FF4F7B 0%,#E0409A 48%,#8B5CF6 100%);
|
||
box-shadow:0 12px 26px rgba(214,64,140,.36),inset 0 0 0 1px rgba(255,255,255,.22)}
|
||
.bb-gift{background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 52%,rgba(255,255,255,0) 72%)}
|
||
.bb-t{color:#fff;text-shadow:0 1px 2px rgba(120,20,70,.3)}
|
||
.bb-s{color:rgba(255,255,255,.88)}
|
||
.bb-s b{color:#FFE27A}
|
||
.bb-cta,.bb-banner.is-calm .bb-cta{color:#9A2A5E;background:linear-gradient(180deg,#FFE88A,#FFC93C);
|
||
box-shadow:0 5px 12px rgba(120,20,70,.28),inset 0 -2px 0 rgba(210,140,0,.25)}
|
||
.bb-badge{box-shadow:0 0 0 2px #fff}
|
||
.bb-shine{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0))}
|
||
/* 2026-10-01 用户：slogan 要「规规矩矩的字体」→ 不用手写体，换系统黑体（苹方/微软雅黑），中等字重、略加字距 */
|
||
.hero-slogan{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
|
||
font-size:13px;font-weight:500;letter-spacing:1.2px;opacity:.95}
|
||
|
||
/* ================= 首页「宝宝来信」卡（2026-10-02 二版）=================
|
||
用户：一版的航空斜纹边 + 邮戳 + 信纸横线太乱、和整页不协调。
|
||
二版收敛：白色磨砂卡 + 一圈很淡的粉边，左边信封落在一团浅粉圆底上（未读数气泡挂信封角），
|
||
标题用页面统一的黑体，只留一处品牌色：右侧「读读…›」。 */
|
||
.letter-card{padding:0 12px 0 10px;gap:10px;
|
||
background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,248,246,.97));
|
||
box-shadow:0 10px 26px rgba(150,60,40,.15),inset 0 0 0 1px rgba(255,205,200,.55)}
|
||
.lc-envwrap{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
|
||
background:radial-gradient(circle at 50% 45%,#FFE9EC 0,#FFE1E4 60%,#FFD6DB 100%)}
|
||
.lc-env{width:46px;filter:drop-shadow(0 3px 5px rgba(200,90,90,.2))}
|
||
.letter-card.has-new .lc-env{animation:lcFloat 3.2s ease-in-out infinite}
|
||
@keyframes lcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
|
||
.letter-card.has-new .lc-envwrap::after{display:none}
|
||
.lc-num{position:absolute;top:-2px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
|
||
font-size:10.5px;font-weight:800;line-height:18px;text-align:center;color:#fff;font-style:normal;
|
||
background:#F4593C;box-shadow:0 0 0 2px #fff}
|
||
.lc-num:empty{display:none}
|
||
.lc-stamp{display:none}
|
||
.lc-title{font-size:15.5px;font-weight:800;color:var(--ink);text-shadow:none}
|
||
.lc-desc{font-size:11.5px;color:#8A7A72;margin:3px 0 4px}
|
||
.lc-link{font-size:12px;color:var(--brand)}
|
||
@media (prefers-reduced-motion:reduce){.letter-card.has-new .lc-env{animation:none}}
|
||
|
||
/* ================= 去「胶囊雷同」（2026-10-02 用户截图：此刻 / 你今天还没数 / 孕30周 / 今日小知识 / 本周第3天
|
||
全是「彩底圆角胶囊」，一屏看下来同一种视觉、抓不住重点）=================
|
||
原则：一块里只留**一个**实心胶囊 = 真正要点的动作；其余标签降级成纯文字层级（颜色/字重/字号区分），不再加底色。
|
||
· 此刻：红色呼吸点 + 红字，去底色；整条去掉桃色底，改为工具区底部一条细分隔线下的「附注」
|
||
· 你今天还没数：保留实心（全块唯一 CTA）
|
||
· 孕30周：标题前的彩块改成品牌色大号数字「孕30周」+ 细竖线 + 标题
|
||
· 本周第3天：灰色纯文字
|
||
· 今日小知识：卡内角标改成小号字距文字「✦ 今日小知识」
|
||
· 7 天圆点：只有「今天」是实心圆，其余只留数字 */
|
||
.pulse{background:none;border-radius:0;margin-top:14px;padding:12px 2px 2px;border-top:1px solid rgba(200,150,130,.18)}
|
||
.pl-live{background:none;color:#F4593C;padding:0;font-size:12px;gap:6px;letter-spacing:.5px}
|
||
.pl-live i{width:6px;height:6px;background:#F4593C}
|
||
.pl-live i::after{border-color:#F4593C}
|
||
.pl-live::after{content:"";width:1px;height:12px;background:rgba(160,120,100,.3);margin-left:3px}
|
||
|
||
.pt-wk{background:none;box-shadow:none;padding:0;border-radius:0;color:var(--brand);font-size:17px;font-weight:900;letter-spacing:-.3px}
|
||
.pt-title{gap:8px}
|
||
.pt-title .pt-wk::after{content:"";display:inline-block;width:1px;height:14px;margin-left:8px;vertical-align:-1px;background:rgba(160,120,100,.35)}
|
||
.pt-when{background:none;padding:0;color:#A08C82;font-weight:600;font-size:12px}
|
||
|
||
.pt-badge{background:none;padding:0;border-radius:0;color:#E0603F;font-size:11.5px;font-weight:800;letter-spacing:1.5px}
|
||
.pt-badge::before{content:"✦ "}
|
||
|
||
.pt-day i,.pt-day.is-past i,.pt-day.is-lock i{background:none;box-shadow:none}
|
||
.pt-day.is-past i{color:#D0735A}
|
||
.pt-day.is-lock i{color:#D9C2B8}
|
||
.pt-day.is-sel:not(.is-today) i{background:none;color:#C24A30;text-decoration:underline;text-underline-offset:3px}
|
||
.pt-badge{display:inline-flex;align-items:center;gap:6px}
|
||
.pt-badge::before{content:"";width:6px;height:6px;border-radius:1.5px;background:#F4593C;transform:rotate(45deg)}
|
||
|
||
/* ================= 今日脚印 · 今日待办（2026-10-02）=================
|
||
今天一个工具都没用时：一张待办清单，每行 = 空心勾选框 + 一句要做的事（粗）+ 怎么做（细）+ 应用图标 + 「去完成」。 */
|
||
.fp2 .fp-todo{text-align:left;padding:14px 14px 12px}
|
||
.td-head{display:flex;align-items:baseline;gap:8px}
|
||
.td-head b{font-size:15px;font-weight:900;color:var(--ink)}
|
||
.td-cnt{font-size:12px;font-weight:700;color:#2FA57C;font-variant-numeric:tabular-nums}
|
||
.fp2 .td-lead{display:block;margin-top:4px;font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.55;color:#6E8A7E}
|
||
.fp2 .td-list{display:flex;flex-direction:column;gap:0;margin-top:8px}
|
||
.td-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;border:0;background:none;font:inherit;text-align:left;
|
||
border-top:1px dashed rgba(90,160,130,.22)}
|
||
.td-row:first-child{border-top:0}
|
||
.td-box{flex:0 0 18px;width:18px;height:18px;border-radius:6px;border:2px solid #9BD3BA;background:#fff}
|
||
.td-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
||
.td-txt b{font-size:14px;font-weight:800;color:#3A2C27}
|
||
.td-txt em{font-style:normal;font-size:11.5px;color:#9A8A82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.td-ico{flex:0 0 24px;width:24px;height:24px;border-radius:7px;object-fit:cover}
|
||
.td-go{flex:0 0 auto;font-size:12px;font-weight:800;color:#23946C}
|
||
.td-go::after{content:" ›"}
|
||
.td-row:active .td-box{background:#DDF3E9}
|
||
.fp2 .td-foot{display:block;margin-top:6px;padding-top:9px;border-top:1px solid rgba(90,160,130,.15);font-size:11.5px;color:#8FA89D;text-align:center}
|
||
|
||
/* ================= 首页「宝宝来信」卡 三版（2026-10-02 用户：二版太单薄，要简洁但有设计感）=================
|
||
结构：左侧一块玫瑰渐变「封口」色块，信封从色块里探出卡片上沿（有纵深）；
|
||
右侧文字三行（标题 + 未读说明 + 读读…）；最右一颗实心圆箭头。整卡只用玫瑰一种强调色。 */
|
||
.letter-card{gap:12px;padding:0 12px 0 0;overflow:visible;
|
||
background:#fff;box-shadow:0 14px 30px rgba(170,70,70,.18),0 2px 6px rgba(170,70,70,.06)}
|
||
.lc-envwrap{align-self:stretch;width:74px;height:auto;border-radius:20px 0 0 20px;display:block;position:relative;
|
||
background:linear-gradient(150deg,#FF8DA1 0%,#F25C7A 100%)}
|
||
.lc-envwrap::before{content:"";position:absolute;right:-10px;top:0;bottom:0;width:20px;border-radius:0 50% 50% 0/0 50% 50% 0;
|
||
background:inherit}
|
||
.lc-envwrap::after{content:"";position:absolute;inset:0;border-radius:20px 0 0 20px;pointer-events:none;
|
||
background:radial-gradient(60px 40px at 20% 100%,rgba(255,255,255,.28),rgba(255,255,255,0) 70%)}
|
||
.lc-env{position:absolute;left:8px;top:-14px;width:60px;z-index:1;filter:drop-shadow(0 6px 8px rgba(150,30,60,.3))}
|
||
.letter-card.has-new .lc-env{animation:lcFloat 3.2s ease-in-out infinite}
|
||
@keyframes lcFloat{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-3px)}}
|
||
.lc-num{top:auto;bottom:8px;left:8px;right:auto;z-index:2;background:#fff;color:#E2456A;box-shadow:0 2px 6px rgba(150,30,60,.25);
|
||
font-size:11px;min-width:20px;height:20px;line-height:20px;border-radius:10px}
|
||
.lc-body{padding-left:6px}
|
||
.lc-title{font-size:16px;font-weight:900;color:var(--ink);letter-spacing:.2px}
|
||
.lc-desc{font-size:11.5px;color:#9A8880;margin:3px 0 3px}
|
||
.lc-link{font-size:12px;font-weight:700;color:#E2456A}
|
||
.lc-link i{display:none}
|
||
.lc-arrow{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;
|
||
background:linear-gradient(135deg,#FF8DA1,#E2456A);box-shadow:0 5px 12px rgba(226,69,106,.32)}
|
||
@media (prefers-reduced-motion:reduce){.letter-card.has-new .lc-env{animation:none}}
|
||
.lc-envwrap{width:64px}
|
||
.lc-envwrap::before{display:none}
|
||
.lc-env{left:4px;top:-12px;width:56px}
|
||
.letter-card{gap:10px;padding-right:10px}
|
||
.lc-body{padding-left:0}
|
||
.lc-arrow{flex-basis:26px;width:26px;height:26px}
|
||
.lc-arrow svg{width:14px;height:14px}
|
||
.lc-env-v{left:9px;top:-10px;width:48px;height:36px;filter:drop-shadow(0 6px 8px rgba(150,30,60,.28))}
|
||
|
||
/* ================= 此刻 · 陪伴版 + 同周悄悄话（2026-10-02） =================
|
||
头像一排 7 个单独成行；「还没数」改成邀请式文字链；悄悄话是一条横滑的小纸条带，四种淡色轮换。 */
|
||
.pulse .pl-title{white-space:normal}
|
||
.pp-crowd{display:flex;align-items:center;gap:9px;margin-top:9px;min-width:0}
|
||
.pp-crowd .pp-avs i{width:24px;height:24px;margin-left:-8px;border:2px solid #fff;box-shadow:0 1px 3px rgba(120,70,50,.12)}
|
||
.pp-crowd .pp-avs i:first-child{margin-left:0}
|
||
.pp-crowd-t{flex:1;min-width:0;font-size:12.5px;color:var(--muted);line-height:1.35}
|
||
.pp-crowd-t b{font-size:14px;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
|
||
.pp-doing{margin-top:8px}
|
||
.pp-me{display:inline-flex;align-items:center;gap:5px;padding:0;background:none;border-radius:0;font-size:13px;font-weight:700}
|
||
.pp-me.todo{color:#E5533A;background:none}
|
||
.pp-me.todo i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#FFE5DC}
|
||
.pp-me.todo i svg{width:11px;height:11px}
|
||
.pp-me.todo:active{opacity:.7;transform:none}
|
||
.pp-me.ok{color:#4E8A43;background:none;font-weight:600}
|
||
.pp-me.ok svg{width:15px;height:15px}
|
||
|
||
.pulse.has-wh .pl-feed{display:none}
|
||
.wh-wall.hide{display:none}
|
||
.wh-wall{margin-top:13px}
|
||
.wh-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
|
||
.wh-t{font-size:14px;font-weight:800;color:var(--ink);display:flex;align-items:baseline;gap:7px;min-width:0}
|
||
.wh-t em{font-style:normal;font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.wh-say{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:12.5px;font-weight:700;color:#E5533A;
|
||
background:none;border:0;padding:4px 0}
|
||
.wh-say::before{content:"";width:14px;height:14px;background:currentColor;
|
||
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 12.5l.6-2.6 7-7a1.4 1.4 0 012 2l-7 7z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
|
||
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 12.5l.6-2.6 7-7a1.4 1.4 0 012 2l-7 7z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
|
||
.wh-say:active{opacity:.6}
|
||
.wh-strip{display:flex;gap:10px;margin:9px -2px 0;padding:4px 2px 6px;overflow-x:auto;scroll-snap-type:x mandatory;
|
||
-webkit-overflow-scrolling:touch;scrollbar-width:none}
|
||
.wh-strip::-webkit-scrollbar{display:none}
|
||
.wh-card{position:relative;flex:0 0 172px;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;
|
||
min-height:104px;padding:12px 12px 10px;border-radius:16px 16px 16px 5px;background:#FFF4EE}
|
||
.wh-card.t0{background:#FFF1EC}
|
||
.wh-card.t1{background:#F3F0FF}
|
||
.wh-card.t2{background:#FFF7E6}
|
||
.wh-card.t3{background:#EEF8F2}
|
||
.wh-card.mine{background:#fff;box-shadow:inset 0 0 0 1.5px #FFC9B8}
|
||
.wh-mine{position:absolute;top:-6px;right:10px;font-size:10px;font-weight:700;color:#fff;background:#F4593C;padding:2px 7px;border-radius:6px}
|
||
.wh-txt{font-size:14px;line-height:1.5;color:var(--ink);font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
|
||
.wh-txt::before{content:"“";color:#E8A08C;font-weight:800;margin-right:1px}
|
||
.wh-txt::after{content:"”";color:#E8A08C;font-weight:800;margin-left:1px}
|
||
.wh-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:9px;font-size:10.5px;color:var(--muted);white-space:nowrap}
|
||
.wh-hug{display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:11px;font-weight:700;color:#C7837A;
|
||
background:rgba(255,255,255,.8);border:0;border-radius:999px;padding:3px 8px 3px 6px;transition:color .2s,background .2s}
|
||
.wh-hug svg,.wh-got svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
|
||
.wh-hug b{font-weight:800;font-variant-numeric:tabular-nums}
|
||
.wh-hug b:empty{display:none}
|
||
.wh-hug.on{color:#fff;background:#F4593C}
|
||
.wh-hug.on svg{fill:currentColor}
|
||
.wh-hug.pop svg{animation:whPop .6s var(--ease)}
|
||
@keyframes whPop{0%{transform:scale(1)}30%{transform:scale(1.5)}60%{transform:scale(.9)}100%{transform:scale(1)}}
|
||
.wh-got{display:inline-flex;align-items:center;gap:3px;color:#E5533A;font-weight:600}
|
||
.wh-got svg{fill:#F4593C;stroke:#F4593C}
|
||
.wh-got b{font-weight:800}
|
||
|
||
.wh-m-lead{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.55}
|
||
.wh-ta-box{position:relative;margin-top:14px}
|
||
.wh-ta{display:block;width:100%;box-sizing:border-box;resize:none;font:inherit;font-size:15px;line-height:1.55;color:var(--ink);
|
||
padding:13px 15px 24px;border:1.5px solid #EADFD8;border-radius:16px;background:#fff}
|
||
.wh-ta:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,89,60,.12)}
|
||
.wh-cnt{position:absolute;right:12px;bottom:8px;font-size:11px;color:#C9B7AC;font-variant-numeric:tabular-nums}
|
||
.wh-m-sub{margin-top:14px;font-size:12px;font-weight:700;color:var(--ink-2)}
|
||
.wh-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
|
||
.wh-pre{font:inherit;font-size:12.5px;color:var(--ink-2);background:#fff;border:1px solid #EFE4DD;border-radius:12px;padding:7px 11px;text-align:left}
|
||
.wh-pre.on{color:#E5533A;border-color:#FFB7A3;background:#FFF3EE}
|
||
.wh-pre:active{transform:scale(.97)}
|
||
.wh-modal .modal-foot{margin-top:18px}
|
||
.wh-left{margin-top:8px;text-align:center;font-size:11.5px;color:var(--muted)}
|
||
@media (prefers-reduced-motion: reduce){.wh-hug.pop svg{animation:none}}
|
||
.wh-modal .modal-foot{flex-direction:column;align-items:stretch;gap:0}
|
||
|
||
/* ================= 来信卡 四版 + 盲盒横幅 素雅版（2026-10-02）=================
|
||
用户：「来信……简洁、素气一点，颜色不要太艳丽；盲盒……也不要太艳丽，有点太扎眼了」。
|
||
两条一起收：白底 + 一根很淡的暖色描边 + 低饱和陶土粉做唯一点缀；去掉大色块、渐变、发光和扫光，
|
||
动效只留盲盒礼物的轻摆（有可开的盒子时）。两张卡同一套语言，叠在一起像一组。 */
|
||
.letter-card{gap:12px;padding:12px 14px 12px 12px;overflow:hidden;background:#fff;
|
||
box-shadow:0 6px 18px rgba(120,80,60,.07),inset 0 0 0 1px #F1E6DF}
|
||
.lc-envwrap{align-self:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:#FAF1EC;display:grid;place-items:center}
|
||
.lc-envwrap::before,.lc-envwrap::after{display:none}
|
||
.lc-env,.lc-env-v{position:static;width:26px;height:20px;filter:none;animation:none!important;transform:none}
|
||
.lc-env-v rect{fill:none;stroke:#C98576;stroke-width:3.4}
|
||
.lc-env-v path{stroke:#C98576;stroke-width:3.4}
|
||
.lc-env-v path:nth-of-type(2){display:none}
|
||
.lc-env-v circle,.lc-env-v path:last-of-type{display:none}
|
||
.lc-num{position:absolute;top:-5px;right:-5px;bottom:auto;left:auto;min-width:17px;height:17px;line-height:17px;padding:0 4px;
|
||
border-radius:9px;font-size:10px;font-weight:700;color:#fff;background:#D9775F;box-shadow:0 0 0 2px #fff}
|
||
.lc-envwrap{position:relative}
|
||
.lc-body{padding-left:0}
|
||
.lc-title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:0}
|
||
.lc-desc{font-size:12px;color:#9C8F88;margin:3px 0 0}
|
||
.lc-link{display:none}
|
||
.lc-arrow{flex:0 0 auto;width:auto;height:auto;background:none;box-shadow:none;color:#C9BCB4;border-radius:0}
|
||
.lc-arrow svg{width:16px;height:16px}
|
||
|
||
.bb-banner{color:var(--ink);min-height:62px;padding:10px 14px 10px 12px;border:0;border-radius:20px;
|
||
background:#fff;box-shadow:0 6px 18px rgba(120,80,60,.07),inset 0 0 0 1px #F1E6DF}
|
||
.bb-gift{width:44px;height:44px;border-radius:14px;background:#FAF1EC}
|
||
.bb-gift svg{width:34px;height:34px;filter:saturate(.55) brightness(1.03)}
|
||
.bb-badge{left:40px;top:5px;background:#D9775F;box-shadow:0 0 0 2px #fff;animation:none;font-weight:700}
|
||
.bb-t{font-size:15px;font-weight:700;color:var(--ink);text-shadow:none;letter-spacing:0}
|
||
.bb-s{color:#9C8F88}
|
||
.bb-s b{color:#C96F58;font-weight:700}
|
||
.bb-cta,.bb-banner.is-calm .bb-cta{padding:6px 12px;font-size:12px;font-weight:700;color:#C2614A;background:#FBEEE8;box-shadow:none}
|
||
.bb-shine{display:none}
|
||
/* 四版：和下面的盲盒横幅同宽对齐（原来 249px 窄卡偏在右边，说明文字总被截断） */
|
||
.letter-card{width:auto;height:auto;min-height:68px;margin-left:26px;margin-right:26px;backdrop-filter:none;-webkit-backdrop-filter:none}
|
||
|
||
/* ================= 此刻 · 三改 + 同周悄悄话全屏页（2026-10-02）=================
|
||
用户：「此刻有一点点乱」→ 头像左、两行字右（人数 / 一句邀请），下面一条细入口；
|
||
悄悄话本身挪进 #whPage「深夜星河」全屏页。 */
|
||
.pp-crowd{align-items:center;gap:11px;margin-top:11px}
|
||
.pp-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
|
||
.pp-col .pp-crowd-t{font-size:12.5px}
|
||
.pp-col .pp-doing{margin:0}
|
||
.pp-col .pp-doing.hide{display:none}
|
||
.pp-col .pp-me{font-size:12.5px}
|
||
.pp-col .pp-me.todo i{width:15px;height:15px}
|
||
.pp-col .pp-me.todo i svg{width:10px;height:10px}
|
||
|
||
.wh-entry{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:10px 12px 10px 10px;
|
||
border-radius:14px;background:linear-gradient(100deg,#2A2550 0%,#3E2F5E 60%,#53365F 100%);color:#fff;text-align:left;
|
||
box-shadow:0 6px 16px -8px rgba(52,36,92,.55);position:relative;overflow:hidden}
|
||
.wh-entry.hide{display:none}
|
||
.wh-entry::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
|
||
background:radial-gradient(1px 1px at 22% 30%,#fff,transparent),radial-gradient(1px 1px at 61% 72%,#fff,transparent),
|
||
radial-gradient(1.2px 1.2px at 84% 22%,#fff,transparent),radial-gradient(1px 1px at 44% 14%,rgba(255,255,255,.7),transparent)}
|
||
.wh-entry:active{transform:scale(.985)}
|
||
.we-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.12);color:#FFD9A8}
|
||
.we-ico svg{width:18px;height:18px}
|
||
.we-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
||
.we-txt b{font-size:11px;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,.6)}
|
||
.we-roll{font-size:13.5px;font-weight:600;color:#FFF4E8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .26s,transform .26s}
|
||
.we-roll.out{opacity:0;transform:translateY(5px)}
|
||
.we-go{flex:none;display:flex;align-items:center;gap:2px;font-size:12px;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
|
||
.we-go i{display:grid;width:14px;height:14px}
|
||
|
||
/* ---------- 全屏页 ---------- */
|
||
.wh-page{position:absolute;inset:0;z-index:110;color:#fff;overflow:hidden;
|
||
background:radial-gradient(120% 60% at 80% 0%,#5A3B72 0%,transparent 60%),radial-gradient(90% 50% at 0% 100%,#4A2C55 0%,transparent 70%),linear-gradient(180deg,#191634 0%,#221C40 45%,#2C1F45 100%);
|
||
opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s}
|
||
.wh-page.show{opacity:1;visibility:visible;transform:none}
|
||
.whp-sky{position:absolute;inset:0;pointer-events:none}
|
||
.whp-sky i.s1,.whp-sky i.s2,.whp-sky i.s3{position:absolute;inset:0;animation:whTw 5s ease-in-out infinite alternate}
|
||
.whp-sky i.s1{background:radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 35% 8%,#fff,transparent),radial-gradient(1.4px 1.4px at 72% 14%,#fff,transparent),radial-gradient(1px 1px at 90% 40%,#fff,transparent),radial-gradient(1px 1px at 8% 62%,#fff,transparent),radial-gradient(1.2px 1.2px at 55% 88%,#fff,transparent)}
|
||
.whp-sky i.s2{animation-delay:-2s;background:radial-gradient(1px 1px at 25% 34%,#fff,transparent),radial-gradient(1.3px 1.3px at 64% 46%,#fff,transparent),radial-gradient(1px 1px at 84% 70%,#fff,transparent),radial-gradient(1px 1px at 18% 84%,#fff,transparent),radial-gradient(1.5px 1.5px at 46% 24%,#FFE2B8,transparent)}
|
||
.whp-sky i.s3{animation-delay:-3.5s;opacity:.6;background:radial-gradient(1px 1px at 5% 30%,#fff,transparent),radial-gradient(1px 1px at 40% 58%,#fff,transparent),radial-gradient(1px 1px at 77% 30%,#fff,transparent),radial-gradient(1px 1px at 95% 92%,#fff,transparent),radial-gradient(1px 1px at 30% 96%,#fff,transparent)}
|
||
.whp-sky i.moon{position:absolute;top:58px;right:-36px;width:150px;height:150px;border-radius:50%;
|
||
background:radial-gradient(circle at 35% 35%,#FFE9C9 0%,#F6C893 45%,rgba(246,200,147,0) 72%);opacity:.28;filter:blur(2px)}
|
||
@keyframes whTw{from{opacity:.35}to{opacity:1}}
|
||
.whp-scroll{position:absolute;inset:0;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 10px) 20px 150px;-webkit-overflow-scrolling:touch}
|
||
.whp-scroll::-webkit-scrollbar{display:none}
|
||
.whp-top{display:flex;align-items:center;justify-content:space-between;height:44px}
|
||
.whp-back{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(6px)}
|
||
.whp-tag{font-size:11.5px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);letter-spacing:.5px}
|
||
.whp-title{margin:26px 0 0;font-size:40px;line-height:1.12;font-weight:800;letter-spacing:1px;color:#fff}
|
||
.whp-title b{font-size:56px;font-weight:900;background:linear-gradient(120deg,#FFE3B5,#FF9E8A);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;margin:0 2px}
|
||
.whp-sub{margin:12px 0 0;font-size:13px;line-height:1.7;color:rgba(255,255,255,.55)}
|
||
.whp-hero{position:relative;margin:34px 0 8px;padding:26px 22px 18px;border-radius:24px;
|
||
background:linear-gradient(150deg,rgba(255,226,190,.16),rgba(255,160,140,.06));border:1px solid rgba(255,226,190,.22);
|
||
box-shadow:0 20px 50px -20px rgba(255,170,130,.35)}
|
||
.whp-hero:empty{display:none}
|
||
.whp-hero::before{content:"“";position:absolute;top:-30px;left:14px;font-size:96px;line-height:1;font-family:Georgia,serif;color:#FFD9A8;opacity:.9}
|
||
.whp-hq{font-size:25px;line-height:1.45;font-weight:800;color:#FFF4E6;letter-spacing:.5px}
|
||
.whp-flow{display:flex;flex-direction:column;gap:14px;margin-top:22px}
|
||
.whp-b{position:relative;max-width:82%;padding:14px 16px 10px;border-radius:20px;
|
||
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);
|
||
animation:whIn .6s var(--ease) both,whBob 6s ease-in-out infinite;animation-delay:calc(var(--i) * 60ms),var(--d)}
|
||
.whp-b.a{align-self:flex-start;border-bottom-left-radius:6px}
|
||
.whp-b.b{align-self:flex-end;border-bottom-right-radius:6px}
|
||
.whp-b.c{align-self:flex-start;margin-left:9%;border-bottom-left-radius:6px}
|
||
.whp-b p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.82);font-weight:500}
|
||
.whp-b.l2{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.16)}
|
||
.whp-b.l2 p{font-size:16.5px;color:#fff;font-weight:600}
|
||
.whp-b.l3{background:linear-gradient(140deg,rgba(255,180,160,.2),rgba(190,150,255,.14));border-color:rgba(255,200,180,.25);box-shadow:0 10px 30px -14px rgba(255,150,130,.5)}
|
||
.whp-b.l3 p{font-size:18px;color:#fff;font-weight:700}
|
||
.whp-b.mine{align-self:flex-end;max-width:86%;background:linear-gradient(140deg,rgba(255,214,150,.26),rgba(255,170,110,.14));border-color:rgba(255,214,150,.45);box-shadow:0 0 0 4px rgba(255,214,150,.06),0 12px 34px -12px rgba(255,190,120,.55)}
|
||
.whp-b.mine p{color:#FFF1DC;font-weight:700;font-size:16.5px}
|
||
.whp-mine{display:inline-block;margin-bottom:6px;font-size:10.5px;font-weight:700;letter-spacing:1px;padding:2px 8px;border-radius:99px;background:#FFD596;color:#5A3714}
|
||
@keyframes whIn{from{opacity:0;transform:translateY(16px)}}
|
||
@keyframes whBob{0%,100%{translate:0 0}50%{translate:0 -4px}}
|
||
.whp-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.45)}
|
||
.whp-hero .whp-meta{margin-top:18px;font-size:12px}
|
||
.whp-hug{position:relative;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 11px;border-radius:99px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
|
||
.whp-hug svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
|
||
.whp-hug b:empty{display:none}
|
||
.whp-hug.on{background:linear-gradient(120deg,#FF8E7A,#FF6F91);color:#fff}
|
||
.whp-hug.on svg{fill:#fff;stroke:#fff}
|
||
.whp-hug.pop svg{animation:whBeat .5s var(--ease)}
|
||
@keyframes whBeat{30%{transform:scale(1.5)}60%{transform:scale(.9)}}
|
||
.whp-got{display:inline-flex;align-items:center;gap:4px;color:#FFD596;font-weight:600}
|
||
.whp-got svg{width:13px;height:13px;fill:#FFD596}
|
||
.whp-fly{position:absolute;left:50%;bottom:60%;width:14px;height:14px;margin-left:-7px;pointer-events:none;animation:whFly 1.1s ease-out both}
|
||
.whp-fly svg{width:100%;height:100%;fill:#FF8FA3}
|
||
@keyframes whFly{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--x),-70px) rotate(var(--r)) scale(1.1)}}
|
||
.whp-end{margin:36px 0 0;text-align:center;font-size:11.5px;letter-spacing:2px;color:rgba(255,255,255,.3)}
|
||
.whp-bar{position:absolute;left:0;right:0;bottom:0;padding:30px 24px calc(14px + env(safe-area-inset-bottom));text-align:center;
|
||
background:linear-gradient(180deg,rgba(28,22,52,0),rgba(28,22,52,.92) 45%)}
|
||
.whp-say{position:relative;width:100%;height:52px;border-radius:99px;font-size:16px;font-weight:800;letter-spacing:2px;color:#3A2312;
|
||
background:linear-gradient(110deg,#FFE3B5,#FFB48F 55%,#FF9AA6);box-shadow:0 10px 30px -8px rgba(255,160,130,.7),inset 0 1px 0 rgba(255,255,255,.6)}
|
||
.whp-say::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:1.5px solid rgba(255,200,160,.5);animation:whRing 2.6s ease-out infinite}
|
||
@keyframes whRing{from{opacity:.9;transform:scale(.96)}to{opacity:0;transform:scale(1.08)}}
|
||
.whp-say:active{transform:scale(.98)}
|
||
.whp-left{margin:9px 0 0;font-size:11.5px;color:rgba(255,255,255,.5)}
|
||
@media (prefers-reduced-motion:reduce){
|
||
.whp-b,.whp-sky i,.whp-say::after{animation:none!important}
|
||
.wh-page{transition:opacity .2s}
|
||
}
|
||
.whp-say{display:grid;place-items:center;text-align:center;padding:0}
|
||
|
||
/* ================= 盲盒挪到页底 + 来信卡居中短版（2026-10-02）=================
|
||
用户：「盲盒放到首页下边，给一个位置就行，不用太明显；宝宝来信不要太长，居中展示」。 */
|
||
.home-body>.bb-banner{margin:22px 0 6px;min-height:52px;padding:8px 12px 8px 8px;gap:10px;border-radius:16px;
|
||
background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px #F1E6DF}
|
||
.home-body>.bb-banner .bb-gift{width:36px;height:36px;border-radius:11px}
|
||
.home-body>.bb-banner .bb-gift svg{width:26px;height:26px;animation:none}
|
||
.home-body>.bb-banner .bb-badge{left:32px;top:3px}
|
||
.home-body>.bb-banner .bb-t{font-size:13.5px;font-weight:600}
|
||
.home-body>.bb-banner .bb-s{font-size:11.5px}
|
||
.home-body>.bb-banner .bb-cta{padding:0;background:none;font-size:12px;font-weight:600;color:#B7A69C}
|
||
.home-body>.bb-banner .bb-cta::after{content:" ›"}
|
||
|
||
.letter-card{width:fit-content;max-width:calc(100% - 64px);min-width:236px;margin-left:auto;margin-right:auto;
|
||
min-height:58px;padding:9px 14px 9px 9px;gap:10px;border-radius:18px}
|
||
.letter-card .lc-envwrap{flex-basis:38px;width:38px;height:38px;border-radius:12px}
|
||
.letter-card .lc-env-v{width:22px;height:17px}
|
||
.letter-card .lc-body{flex:0 1 auto}
|
||
.letter-card .lc-title{font-size:14.5px}
|
||
.letter-card .lc-desc{font-size:11.5px;max-width:170px}
|
||
|
||
/* ================= 标题去红 + 来信卡再短（2026-10-02）=================
|
||
用户：「孕 30 周的颜色不要变成红色，统一一下标题的颜色……整体页面的红色太多了，反而不突出」。
|
||
首页各模块标题里的孕周/数字一律跟标题同色（墨色），红色只留给真正要点的按钮和角标。 */
|
||
.pt-wk,.gift2 .sh-title [data-wk],.pulse .pl-title b{color:var(--ink)}
|
||
.pt-title .pt-wk::after{background:rgba(120,100,90,.3)}
|
||
.letter-card{min-width:0;max-width:250px}
|
||
.letter-card .lc-desc{max-width:150px}
|
||
/* 「此刻」两个字也回墨色，只留前面那颗跳动的小红点表示“正在发生” */
|
||
.pl-live{color:var(--ink)}
|
||
/* 兜豆图标换成统一的豆形金币（2026-10-02，「母婴作图」会话提供 assets/img/dou-coin.svg） */
|
||
.es-coin img{display:block;width:36px;height:36px}
|
||
|
||
/* ================= 兜豆兑好物：拆掉内层粉卡，和其它模块一样铺平（2026-10-02）=================
|
||
用户：「这个模块两边有空隙，别的模块是铺平的，保持一致」。原来是白色外壳里再套一张带阴影的粉卡，
|
||
左右各缩进 26px+6px；现在内层不再画底色/阴影/圆角，标题与「孕育工具」「孕期小知识」同一条 26px 栏线，
|
||
商品横滑像福利书架一样出血到屏幕边缘。 */
|
||
.exch-wrap .exch-mod{padding:0;border-radius:0;background:none;box-shadow:none}
|
||
.exch-wrap .exch-mod .exch-strip{padding:2px 0 4px}
|
||
.exch-wrap .ex-goods{margin:8px -26px 0;padding:6px 26px 4px;scroll-padding-left:26px}
|
||
.exch-wrap .ex-it{background:#FFF6F3;box-shadow:inset 0 0 0 1px #F6E6E0}
|
||
|
||
/* 好物价格：小金币 + 1,800 + 兜豆（对齐兜豆商城「本场好物」.price 的写法） */
|
||
.gi-pr{display:flex;align-items:center;gap:3px;margin-top:1px}
|
||
.gi-pr .gi-coin{flex:none;width:15px;height:15px;background:url(assets/img/dou-coin.svg?v=20261002) center/contain no-repeat}
|
||
.gi-pr span{font-family:"DIN Alternate","DIN Condensed","Bahnschrift","Arial Rounded MT Bold",Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:15px;font-weight:800;color:var(--ink)}
|
||
.gi-pr small{font-size:10.5px;font-weight:600;color:var(--ink);opacity:.55}
|
||
|
||
/* ---------- 同孕周悄悄话 · 三改：星图 + 聚焦卡 + 清单（2026-10-02）----------
|
||
配色不变（用户：「配色没问题」），只换呈现：人多时不再是一堆左右乱飘、大小不一的气泡。 */
|
||
.whp-title{margin-top:18px;font-size:28px;line-height:1.2}
|
||
.whp-title b{font-size:40px}
|
||
.whp-sub{margin-top:8px;font-size:12.5px}
|
||
.whp-sky2{position:relative;height:190px;margin:18px -6px 0}
|
||
.whs-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
|
||
.whs-lines polyline{fill:none;stroke:rgba(255,226,190,.22);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4}
|
||
.whs-star{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;display:grid;place-items:center;border-radius:50%}
|
||
.whs-star i{display:block;width:var(--s);height:var(--s);border-radius:50%;background:#FFF6E6;
|
||
box-shadow:0 0 calc(var(--s) * .8) calc(var(--s) * .2) rgba(255,226,190,.55);animation:whTw2 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--tw) * -1)}
|
||
.whs-star.mine i{background:#FFD596;box-shadow:0 0 14px 4px rgba(255,200,120,.7)}
|
||
.whs-star.on i{background:#fff;animation:none;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 18px 6px rgba(255,214,170,.75)}
|
||
.whs-star.on::after{content:"";position:absolute;inset:2px;border-radius:50%;border:1.5px solid rgba(255,226,190,.7);animation:whRing 2s ease-out infinite}
|
||
@keyframes whTw2{from{opacity:.55;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
|
||
.whp-focus{position:relative;margin-top:14px;padding:16px 18px 14px;border-radius:22px;min-height:150px;
|
||
background:linear-gradient(150deg,rgba(255,226,190,.16),rgba(255,160,140,.06));border:1px solid rgba(255,226,190,.22);
|
||
box-shadow:0 20px 50px -20px rgba(255,170,130,.35)}
|
||
.whp-focus:empty{display:none}
|
||
.whf-top{display:flex;align-items:center;justify-content:space-between}
|
||
.whf-no{font-size:11px;letter-spacing:1px;color:rgba(255,226,190,.7);font-variant-numeric:tabular-nums}
|
||
.whf-no em,.whl-t em{font-style:normal;display:inline-block;margin-right:6px;font-size:10.5px;font-weight:700;letter-spacing:1px;padding:1px 7px;border-radius:99px;background:#FFD596;color:#5A3714;vertical-align:1px}
|
||
.whf-nav{display:flex;gap:6px}
|
||
.whf-nav button{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);font-size:18px;line-height:26px}
|
||
.whf-q{margin:12px 0 0;font-size:23px;line-height:1.45;font-weight:800;color:#FFF4E6;letter-spacing:.5px;min-height:66px}
|
||
.whf-q.in{animation:whFq .45s var(--ease) both}
|
||
@keyframes whFq{from{opacity:0;transform:translateY(8px);filter:blur(3px)}}
|
||
.whp-focus .whp-meta{margin-top:12px}
|
||
.whp-lh{display:flex;align-items:baseline;justify-content:space-between;margin:30px 2px 4px}
|
||
.whp-lh b{font-size:15px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:1px}
|
||
.whp-lh span{font-size:11.5px;color:rgba(255,255,255,.4)}
|
||
.whp-list{display:flex;flex-direction:column}
|
||
.whl{position:relative;padding:14px 0 12px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
|
||
.whl::before{content:"";position:absolute;left:2px;top:22px;width:5px;height:5px;border-radius:50%;background:rgba(255,246,230,.45)}
|
||
.whl.l2::before{background:rgba(255,246,230,.8);box-shadow:0 0 6px rgba(255,226,190,.6)}
|
||
.whl.l3::before{width:7px;height:7px;left:1px;top:21px;background:#fff;box-shadow:0 0 10px 2px rgba(255,214,170,.8)}
|
||
.whl.mine{margin:6px 0;padding-right:12px;border-radius:16px;border-bottom:0;background:linear-gradient(140deg,rgba(255,214,150,.18),rgba(255,170,110,.08));box-shadow:inset 0 0 0 1px rgba(255,214,150,.35)}
|
||
.whl.mine::before{left:6px;background:#FFD596;box-shadow:0 0 8px rgba(255,200,120,.8)}
|
||
.whl.mine .whl-t{padding-left:4px}
|
||
.whl-t{display:block;width:100%;text-align:left;font-size:15.5px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.86)}
|
||
.whl.l3 .whl-t,.whl.mine .whl-t{font-weight:700;color:#fff}
|
||
.whl .whp-meta{margin-top:6px}
|
||
.whl .whp-hug{height:26px;padding:0 10px;font-size:12px}
|
||
@media (prefers-reduced-motion:reduce){.whs-star i,.whs-star.on::after,.whf-q.in{animation:none!important}}
|
||
.whf-nav button{display:grid;place-items:center;padding:0;line-height:1}
|
||
|
||
/* ================= 「记一下」弹窗加厚（2026-10-02）=================
|
||
用户：「点记一下那个弹窗……现在有点单薄」。标题下加日期孕周；宫格上面加「今天卡」和「先记这件」两张大卡。 */
|
||
.sheet-head p.sk-sub{margin-top:6px;font-size:13px;color:#9C8F88;letter-spacing:.2px}
|
||
.sk-today{display:flex;align-items:center;gap:14px;margin:0 4px;padding:14px 16px;border-radius:20px;
|
||
background:linear-gradient(120deg,#FFF3EC,#FDEEF0);box-shadow:inset 0 0 0 1px #F6E2DA}
|
||
.sk-today.hide,.sk-next.hide{display:none}
|
||
.sk-ring{position:relative;flex:none;width:52px;height:52px}
|
||
.sk-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
|
||
.sk-ring circle{fill:none;stroke:#F6DED5;stroke-width:4.5}
|
||
.sk-ring .sk-arc{stroke:#E8836B;stroke-linecap:round;stroke-dasharray:0 113.1;transition:stroke-dasharray .8s var(--ease)}
|
||
.sk-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
|
||
.sk-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
|
||
.sk-tt>b{font-size:15.5px;font-weight:700;color:var(--ink)}
|
||
.sk-tt>span{display:flex;flex-wrap:wrap;gap:5px;font-size:12px;color:#9C8F88;line-height:1.5}
|
||
.sk-tt>span i{font-style:normal;font-size:11.5px;font-weight:600;color:#B0604C;background:#fff;padding:2px 8px 2px 18px;border-radius:99px;position:relative}
|
||
.sk-tt>span i::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:3px;margin-top:-3px;border:solid #E8836B;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)}
|
||
.sk-next .apps-head{margin-top:20px;margin-bottom:10px}
|
||
.sk-hint{margin-left:8px;font-size:12px;font-weight:500;color:#B7A69C}
|
||
.sk-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 4px}
|
||
.sk-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:128px;padding:14px 14px 12px;border-radius:20px;text-align:left;
|
||
background:#fff;box-shadow:0 6px 18px rgba(120,80,60,.07),inset 0 0 0 1px #F1E6DF;overflow:hidden}
|
||
.sk-card.c0{background:linear-gradient(160deg,#FFF6F0,#fff 70%)}
|
||
.sk-card.c1{background:linear-gradient(160deg,#F3F6FF,#fff 70%)}
|
||
.sk-card img,.sk-card .sk-l{width:38px;height:38px;border-radius:12px;object-fit:contain;margin-bottom:6px}
|
||
.sk-card .sk-l{display:grid;place-items:center;background:#F4E5DE;color:#B0604C;font-weight:800}
|
||
.sk-card b{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
|
||
.sk-card em{font-style:normal;font-size:11.5px;line-height:1.45;color:#9C8F88;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
.sk-go{margin-top:auto;padding-top:8px;font-size:12px;font-weight:700;color:#C2614A}
|
||
.sk-card:active{transform:scale(.98)}
|
||
/* 宫格：今天用过的打个小勾 */
|
||
.apps-grid .app{position:relative}
|
||
.apps-grid .app.is-done::after{content:"";position:absolute;top:-3px;right:calc(50% - 33px);width:18px;height:18px;border-radius:50%;
|
||
background:#5BB58A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 0 2px #FAF5F1}
|
||
.apps-head.for-all{margin-top:22px}
|
||
|
||
/* 今日待办：前面的勾选框换成线性图标（墨绿线稿 + 浅薄荷底，和脚印卡的绿底同色系） */
|
||
.td-li{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
|
||
background:#E6F4EC;color:#2F8F68;box-shadow:inset 0 0 0 1px #CFE9DB}
|
||
.td-li svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||
.td-row{gap:12px}
|
||
.td-row:active .td-li{background:#D5EEE1}
|
||
.td-li svg{width:22px;height:22px}
|
||
|
||
/* ===== 2026-10-02 悄悄话全屏页 · 四改：一屏一句竖滑沉浸式 ===== */
|
||
.whv-aura{position:absolute;inset:0;pointer-events:none;overflow:hidden}
|
||
.whv-aura i{position:absolute;width:120vw;height:120vw;max-width:560px;max-height:560px;border-radius:50%;filter:blur(70px);opacity:.55;
|
||
transition:background-color 1.2s ease;animation:whvDrift 14s ease-in-out infinite alternate}
|
||
.whv-aura i:first-child{left:-35%;top:8%}
|
||
.whv-aura i:last-child{right:-40%;bottom:6%;animation-delay:-7s;opacity:.45}
|
||
@keyframes whvDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(12%,-8%) scale(1.15)}}
|
||
.wh-page .whp-sky i.moon{opacity:.5}
|
||
.whv-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
|
||
background:linear-gradient(rgba(20,14,40,.55),transparent)}
|
||
.whv-bars{flex:1;display:flex;gap:3px;transition:opacity .3s}
|
||
.whv-bars.hide{opacity:0}
|
||
.whv-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
|
||
.whv-bars i.done{background:rgba(255,255,255,.7)}
|
||
.whv-bars i.on{background:linear-gradient(90deg,#FFD9A8,#FF9E8A);box-shadow:0 0 6px rgba(255,190,150,.8)}
|
||
.whv-all{margin-left:auto;height:30px;padding:0 13px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;font-size:12.5px;font-weight:700;backdrop-filter:blur(6px)}
|
||
.whv{position:absolute;inset:0;z-index:1;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
|
||
.whv::-webkit-scrollbar{display:none}
|
||
.whv-s{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;
|
||
padding:70px 84px 130px 28px;box-sizing:border-box;user-select:none;-webkit-user-select:none}
|
||
.whv-in{width:100%}
|
||
.whv-cover,.whv-end{padding-right:28px}
|
||
.whv-cover{align-items:flex-start;padding-top:calc(64px + env(safe-area-inset-top))}
|
||
.whv-ct{margin-top:18px;font-size:34px;line-height:1.25;font-weight:900;letter-spacing:1px}
|
||
.whv-ct b{font-size:64px;font-family:"DIN Alternate","DIN",Helvetica,Arial,sans-serif;background:linear-gradient(120deg,#FFE2B8,#FF9E8A);-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
.whv-ct.sm{font-size:28px}
|
||
.whv-cover .whp-sky2{height:200px;margin:14px -8px 0}
|
||
.whv-down{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:2px}
|
||
.whv-down i{width:18px;height:18px;border:solid rgba(255,255,255,.7);border-width:2px 2px 0 0;transform:rotate(-45deg);animation:whvUp 1.6s ease-in-out infinite}
|
||
@keyframes whvUp{0%,100%{transform:translateY(4px) rotate(-45deg);opacity:.4}50%{transform:translateY(-4px) rotate(-45deg);opacity:1}}
|
||
.whv-no{display:flex;align-items:baseline;gap:6px;font-family:"DIN Alternate","DIN",Helvetica,Arial,sans-serif;color:rgba(255,255,255,.45);letter-spacing:1px}
|
||
.whv-no b{font-size:22px;color:rgba(255,226,190,.9)}
|
||
.whv-no span{font-size:13px}
|
||
.whv-no em{margin-left:6px;font-style:normal;font-family:inherit;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:99px;background:#FFD596;color:#5A3510;letter-spacing:0}
|
||
.whv-q{margin:18px 0 0;font-weight:900;line-height:1.35;letter-spacing:1px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
|
||
.whv-q.xl{font-size:40px}.whv-q.l{font-size:32px}.whv-q.m{font-size:26px}
|
||
.whv-q span{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(10px)}
|
||
.whv-s.on .whv-q span{animation:whvCh .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--c) * 55ms + 120ms)}
|
||
@keyframes whvCh{to{opacity:1;filter:blur(0);transform:none}}
|
||
.whv-s.mine .whv-q{background:linear-gradient(120deg,#FFF1D6,#FFC48A);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
|
||
.whv-meta{margin-top:18px;font-size:13px;color:rgba(255,255,255,.6);opacity:0;transition:opacity .6s .5s}
|
||
.whv-tip{display:inline-block;margin-top:22px;font-size:11.5px;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);opacity:0;transition:opacity .6s 1s}
|
||
.whv-s.on .whv-meta,.whv-s.on .whv-tip{opacity:1}
|
||
.whv-rail{position:absolute;right:16px;bottom:150px;display:flex;flex-direction:column;align-items:center;gap:6px}
|
||
.whv-hug.whp-hug{flex-direction:column;justify-content:center;width:58px;height:58px;padding:0;gap:0;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
|
||
.whv-hug.whp-hug svg{width:26px;height:26px}
|
||
.whv-hug.whp-hug b{font-size:11.5px;line-height:1.1}
|
||
.whv-hug.whp-hug.on{box-shadow:0 6px 22px rgba(255,111,145,.5)}
|
||
.whv-hl,.whv-got small{font-size:11px;color:rgba(255,255,255,.55)}
|
||
.whv-got{display:flex;flex-direction:column;align-items:center;gap:2px;color:#FFD596}
|
||
.whv-got svg{width:30px;height:30px;fill:#FFD596;filter:drop-shadow(0 0 10px rgba(255,200,120,.8))}
|
||
.whv-got b{font-size:18px;font-family:"DIN Alternate","DIN",Helvetica,Arial,sans-serif}
|
||
.whv-big{position:absolute;z-index:5;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none;animation:whvBig .9s cubic-bezier(.2,.8,.2,1) forwards}
|
||
.whv-big svg{width:100%;height:100%;fill:#FF6F91;filter:drop-shadow(0 0 18px rgba(255,111,145,.8))}
|
||
@keyframes whvBig{0%{transform:scale(.2) rotate(-12deg);opacity:0}25%{transform:scale(1.15) rotate(6deg);opacity:1}55%{transform:scale(1)}100%{transform:translateY(-70px) scale(1.3);opacity:0}}
|
||
.whd{position:absolute;inset:0;z-index:6;background:rgba(10,6,24,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
|
||
.whd.show{opacity:1;visibility:visible}
|
||
.whd-panel{position:absolute;left:0;right:0;bottom:0;max-height:72%;overflow-y:auto;padding:18px 20px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;
|
||
background:linear-gradient(#2A1F48,#1E1634);box-shadow:0 -10px 40px rgba(0,0,0,.4);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
|
||
.whd.show .whd-panel{transform:none}
|
||
.whd-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
|
||
.whd-head b{font-size:17px}
|
||
.whd-head span{font-size:12px;color:rgba(255,255,255,.5)}
|
||
.whd-x{margin-left:auto;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:13px}
|
||
.wh-page .whp-bar{z-index:2}
|
||
@media (prefers-reduced-motion:reduce){
|
||
.whv-aura i,.whv-down i{animation:none}
|
||
.whv-q span{opacity:1;filter:none;transform:none}
|
||
.whv-s.on .whv-q span{animation:none}
|
||
}
|
||
.whv-s.mine .whv-q{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#FFDDAE;text-shadow:0 0 22px rgba(255,190,120,.55)}
|
||
.whd-x{display:grid;place-items:center}
|
||
.whv-ct b{font-size:60px;margin-right:4px}
|
||
|
||
/* ===== 2026-10-02 悄悄话全屏页 · 五改：流星夜空 ===== */
|
||
.wsk{position:absolute;inset:0;z-index:1}
|
||
.wsk-deco{position:absolute;inset:0;pointer-events:none}
|
||
.wsk-deco i{position:absolute;border-radius:50%;background:#fff;opacity:var(--o);animation:wskTw 4s ease-in-out infinite alternate}
|
||
@keyframes wskTw{from{opacity:var(--o)}to{opacity:calc(var(--o) * .25)}}
|
||
.wsk-deco::before{content:"";position:absolute;left:-20%;right:-20%;top:18%;height:46%;transform:rotate(-24deg);
|
||
background:radial-gradient(ellipse at center,rgba(210,180,255,.13),rgba(255,190,200,.05) 45%,transparent 70%);filter:blur(10px)}
|
||
/* 偶尔划过的无字小流星，只是氛围 */
|
||
.wsk-shoot{position:absolute;top:12%;right:-10%;width:110px;height:1.5px;border-radius:2px;pointer-events:none;opacity:0;
|
||
background:linear-gradient(90deg,#fff,rgba(255,255,255,0));transform:rotate(-28deg);animation:wskShoot 9s linear infinite 2s}
|
||
.wsk-shoot.s2{top:34%;right:-20%;width:80px;animation-duration:13s;animation-delay:6.5s}
|
||
@keyframes wskShoot{0%{opacity:0;translate:0 0}2%{opacity:.9}8%{opacity:0;translate:-320px 170px}100%{opacity:0;translate:-320px 170px}}
|
||
.wsk-bright{position:absolute;inset:0}
|
||
.wsk-st{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:50%;transition:opacity .6s}
|
||
.wsk-st i{display:block;width:var(--s);height:var(--s);border-radius:50%;background:#FFF8EC;
|
||
box-shadow:0 0 6px 2px rgba(255,240,220,.75),0 0 18px 4px rgba(200,180,255,.35);animation:wskGl var(--tw) ease-in-out infinite alternate}
|
||
.wsk-st i::before,.wsk-st i::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--s) * 3.4);height:1px;margin:-.5px 0 0 calc(var(--s) * -1.7);
|
||
background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
|
||
.wsk-st i::after{transform:rotate(90deg)}
|
||
@keyframes wskGl{from{transform:scale(.8);opacity:.75}to{transform:scale(1.1);opacity:1}}
|
||
.wsk-st.mine i{background:#FFD596;box-shadow:0 0 8px 3px rgba(255,200,120,.85),0 0 22px 6px rgba(255,170,90,.4)}
|
||
.wsk-st.seen i{opacity:.4;animation:none;box-shadow:0 0 4px 1px rgba(255,240,220,.4)}
|
||
.wsk-st.seen i::before,.wsk-st.seen i::after{display:none}
|
||
.wsk-st.hint::after,.wsk-st.cur::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid rgba(255,226,190,.75);animation:whRing 2s ease-out infinite}
|
||
.wsk-st.flare i{animation:wskFlare .38s ease-out forwards;opacity:1}
|
||
@keyframes wskFlare{0%{transform:scale(1)}60%{transform:scale(2.6);box-shadow:0 0 20px 10px rgba(255,255,255,.9)}100%{transform:scale(1.6)}}
|
||
.wsk-st.gone{opacity:0}
|
||
.wsk-title{position:absolute;left:24px;right:24px;top:calc(62px + env(safe-area-inset-top));z-index:2;pointer-events:none}
|
||
.wsk-t{font-size:26px;font-weight:900;letter-spacing:1px}
|
||
.wsk-t b{font-size:40px;margin:0 3px;font-family:"DIN Alternate","DIN",Helvetica,Arial,sans-serif;background:linear-gradient(120deg,#FFE2B8,#FF9E8A);-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
.wsk-title p{margin:6px 0 0;font-size:12.5px;color:rgba(255,255,255,.55);letter-spacing:.5px}
|
||
.wh-page .whv-top{background:none}
|
||
.wh-page .whv-top .whp-tag{margin-left:2px}
|
||
/* 流星：白色头 + 一条渐隐的光尾 + 字一个个拖在尾巴上 */
|
||
.wmt{position:absolute;inset:0;z-index:2;pointer-events:none;--bl:0px}
|
||
.wmt-h,.wmt-l,.wmt span{position:absolute;left:0;top:0;will-change:transform}
|
||
.wmt-h{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;transform-origin:center;
|
||
box-shadow:0 0 10px 4px #fff,0 0 30px 12px rgba(220,200,255,.75),0 0 60px 22px rgba(255,180,200,.35)}
|
||
.wmt-l{height:3px;margin-top:-1.5px;transform-origin:0 50%;border-radius:2px;
|
||
background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(225,205,255,.5) 25%,rgba(255,190,200,.15) 70%,transparent);filter:blur(.6px)}
|
||
.wmt span{font-size:var(--fs);font-weight:900;line-height:1;color:#fff;opacity:0;white-space:nowrap;filter:blur(var(--bl));
|
||
text-shadow:0 0 8px rgba(255,255,255,.7),0 0 18px rgba(210,180,255,.6)}
|
||
.wmt.mine .wmt-h{background:#FFF2D8;box-shadow:0 0 10px 4px #FFE2B0,0 0 30px 12px rgba(255,200,120,.75),0 0 60px 22px rgba(255,150,90,.35)}
|
||
.wmt.mine span{color:#FFE4BC;text-shadow:0 0 8px rgba(255,210,150,.8),0 0 18px rgba(255,160,90,.5)}
|
||
/* 内容卡：流星同时出现，保证整句看得清 */
|
||
.wsc{position:absolute;left:16px;right:16px;bottom:calc(132px + env(safe-area-inset-bottom));z-index:3;padding:16px 18px 14px;border-radius:20px;
|
||
background:linear-gradient(140deg,rgba(255,255,255,.13),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px rgba(10,5,30,.35);
|
||
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1),visibility .4s}
|
||
.wsc.show{opacity:1;visibility:visible;transform:none}
|
||
.wsc-q{margin:0;padding-right:64px;font-size:19px;line-height:1.5;font-weight:800}
|
||
.wsc-q em{display:inline-block;margin-right:6px;vertical-align:2px;font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;background:#FFD596;color:#5A3510}
|
||
.wsc-m{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12px;color:rgba(255,255,255,.55)}
|
||
.wsc-next{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:2px;height:28px;padding:0 9px 0 11px;border-radius:99px;
|
||
background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);font-size:12px;font-weight:700}
|
||
@media (prefers-reduced-motion:reduce){
|
||
.wsk-deco i,.wsk-st i,.wsk-shoot{animation:none}
|
||
}
|
||
/* 六改：头窄尾宽的光楔 + 特别亮的头 */
|
||
.wmt-l,.wmt-c{position:absolute;left:0;top:0;transform-origin:0 50%;border-radius:0;will-change:transform,width}
|
||
.wmt-l{clip-path:polygon(0 50%,100% 0,100% 100%);filter:blur(5px);
|
||
background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(220,200,255,.38) 30%,rgba(255,180,200,.16) 70%,transparent)}
|
||
.wmt-c{height:6px;margin-top:-3px;clip-path:polygon(0 50%,100% 0,100% 100%);filter:blur(1px);
|
||
background:linear-gradient(90deg,#fff,rgba(255,255,255,.55) 35%,transparent)}
|
||
.wmt-h{width:16px;height:16px;margin:-8px 0 0 -8px;background:radial-gradient(circle,#fff 45%,rgba(255,255,255,.85) 60%,rgba(255,255,255,0) 72%);
|
||
box-shadow:0 0 12px 6px #fff,0 0 34px 16px rgba(230,215,255,.85),0 0 80px 30px rgba(255,190,210,.45)}
|
||
.wmt-h::before,.wmt-h::after{content:"";position:absolute;left:50%;top:50%;width:70px;height:2px;margin:-1px 0 0 -35px;border-radius:2px;
|
||
background:linear-gradient(90deg,transparent,#fff,transparent)}
|
||
.wmt-h::after{transform:rotate(90deg);width:40px;margin-left:-20px}
|
||
.wmt span{font-weight:900}
|
||
.wmt.mine .wmt-l{background:linear-gradient(90deg,rgba(255,240,210,.8),rgba(255,200,130,.4) 30%,rgba(255,150,90,.16) 70%,transparent)}
|
||
.wsk-st.flare i{animation:wskFlare2 .42s ease-out forwards}
|
||
@keyframes wskFlare2{0%{transform:scale(1)}55%{transform:scale(3.4);box-shadow:0 0 26px 14px #fff,0 0 60px 24px rgba(230,210,255,.7)}100%{transform:scale(2);box-shadow:0 0 20px 10px #fff}}
|
||
.wsk-st.gone{opacity:0;transition:opacity .5s}
|
||
/* 七改：去掉中线；字改细体更清楚；首次提示一闪一闪；内容卡在流星划完才出、改小 */
|
||
.wmt span{font-weight:300;letter-spacing:.5px;text-shadow:0 0 6px rgba(255,255,255,.45),0 0 14px rgba(200,170,255,.45)}
|
||
.wmt.mine span{font-weight:300}
|
||
.wsk-tip{position:absolute;left:0;right:0;top:56%;z-index:3;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;
|
||
font-size:14px;font-weight:300;letter-spacing:2px;color:#FFF3E2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
|
||
text-shadow:0 0 10px rgba(255,220,180,.7)}
|
||
.wsk-tip.show{visibility:visible;animation:wskBlink 1.8s ease-in-out infinite}
|
||
.wsk-tip i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px rgba(255,235,210,.9)}
|
||
@keyframes wskBlink{0%,100%{opacity:.25}50%{opacity:1}}
|
||
.wsc{padding:12px 16px 11px;border-radius:16px}
|
||
.wsc-k{display:block;font-size:11px;color:rgba(255,226,190,.7);letter-spacing:1px}
|
||
.wsc-q{margin-top:4px;font-size:15px;line-height:1.5;font-weight:400;color:rgba(255,255,255,.92);padding-right:70px}
|
||
.wsc-m{margin-top:6px;font-size:11.5px}
|
||
.wsc-next{top:10px;height:26px}
|
||
.wsc .whp-hug{height:26px;padding:0 10px;font-size:12px}
|
||
@media (prefers-reduced-motion:reduce){.wsk-tip.show{animation:none;opacity:1}}
|
||
.wmt-l{filter:blur(9px);background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(220,200,255,.22) 30%,rgba(255,180,200,.08) 70%,transparent)}
|
||
|
||
/* 八改：满天四角星（不再是圆点），亮星同形更大；流星头 = 白色拉长的光滴，不圆、无十字 */
|
||
.wh-page .whp-sky i.s1,.wh-page .whp-sky i.s2,.wh-page .whp-sky i.s3{display:none}
|
||
.wsk-deco i{border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF4E6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFF4E6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;animation:none;opacity:var(--o)}
|
||
.wsk-deco i.tw{animation:wskTw2 3s ease-in-out infinite}
|
||
@keyframes wskTw2{0%,100%{opacity:var(--o);transform:scale(1)}50%{opacity:calc(var(--o) * .2);transform:scale(.55)}}
|
||
.wsk-st i{width:var(--s);height:var(--s);border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF4E6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFF4E6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;box-shadow:none;
|
||
filter:drop-shadow(0 0 4px rgba(255,244,228,.9)) drop-shadow(0 0 10px rgba(210,190,255,.5));animation:wskGl2 var(--tw) ease-in-out infinite alternate}
|
||
.wsk-st i::before,.wsk-st i::after{display:none}
|
||
@keyframes wskGl2{from{transform:scale(.78) rotate(-6deg);opacity:.8}to{transform:scale(1.08) rotate(6deg);opacity:1}}
|
||
.wsk-st.mine i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFC27A' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFC27A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFE2A8'/%3E%3C/svg%3E");box-shadow:none;filter:drop-shadow(0 0 5px rgba(255,210,140,.95)) drop-shadow(0 0 12px rgba(255,170,90,.5))}
|
||
.wsk-st.seen i{opacity:.35;animation:none;box-shadow:none;filter:none}
|
||
.wsk-st.flare i{animation:wskFlare3 .42s ease-out forwards}
|
||
@keyframes wskFlare3{0%{transform:scale(1)}55%{transform:scale(2.4) rotate(20deg);filter:brightness(1.6) drop-shadow(0 0 14px #fff)}100%{transform:scale(1.7) rotate(30deg);filter:drop-shadow(0 0 10px #fff)}}
|
||
.wsk-tip i{width:10px;height:10px;border-radius:0;box-shadow:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF4E6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFF4E6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat}
|
||
.wmt-h{width:38px;height:9px;margin:-4.5px 0 0 -5px;transform-origin:5px 50%;border-radius:50%;
|
||
background:radial-gradient(ellipse 60% 50% at 18% 50%,#fff 0,#fff 35%,rgba(255,255,255,.55) 65%,rgba(255,255,255,0) 100%);
|
||
box-shadow:0 0 12px 3px rgba(255,255,255,.75),0 0 30px 8px rgba(225,210,255,.45)}
|
||
.wmt-h::before,.wmt-h::after{display:none}
|
||
.wmt.mine .wmt-h{background:radial-gradient(ellipse 60% 50% at 18% 50%,#FFF6E4 0,#FFF6E4 35%,rgba(255,220,160,.6) 65%,rgba(255,220,160,0) 100%);box-shadow:0 0 12px 3px rgba(255,226,180,.8),0 0 30px 8px rgba(255,180,110,.45)}
|
||
@media (prefers-reduced-motion:reduce){.wsk-deco i.tw,.wsk-st i{animation:none}}
|
||
.wsk-st.mine i{background-color:transparent}
|
||
.wsk-st i,.wsk-deco i{background-color:transparent}
|
||
/* 尾巴光楔：外层模糊、内层裁形，边缘才是软的 */
|
||
.wmt-l{clip-path:none;background:none;filter:blur(7px)}
|
||
.wmt-l::before{content:"";position:absolute;inset:0;clip-path:polygon(0 50%,100% 0,100% 100%);
|
||
background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(220,200,255,.25) 30%,rgba(255,180,200,.08) 70%,transparent)}
|
||
.wmt.mine .wmt-l{background:none}
|
||
.wmt.mine .wmt-l::before{background:linear-gradient(90deg,rgba(255,240,210,.6),rgba(255,200,130,.28) 30%,rgba(255,150,90,.08) 70%,transparent)}
|
||
/* 九改（用户：「流星头是发光的白色，尾巴、也就是字的两边，也有白色的光，都要亮起来」） */
|
||
.wmt-h{width:44px;height:11px;margin:-5.5px 0 0 -6px;transform-origin:6px 50%;
|
||
background:radial-gradient(ellipse 60% 50% at 16% 50%,#fff 0,#fff 45%,rgba(255,255,255,.75) 70%,rgba(255,255,255,0) 100%);
|
||
box-shadow:0 0 10px 4px #fff,0 0 26px 10px rgba(255,255,255,.85),0 0 60px 22px rgba(235,225,255,.55)}
|
||
.wmt-l{filter:blur(6px)}
|
||
.wmt-l::before{background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.6) 30%,rgba(240,230,255,.3) 65%,rgba(255,255,255,.06) 92%,transparent)}
|
||
.wmt span{color:#fff;text-shadow:0 0 4px #fff,0 0 10px rgba(255,255,255,.9),0 0 22px rgba(255,255,255,.6)}
|
||
.wmt.mine .wmt-l::before{background:linear-gradient(90deg,rgba(255,248,230,.95),rgba(255,230,190,.6) 30%,rgba(255,210,150,.3) 65%,rgba(255,220,170,.06) 92%,transparent)}
|
||
.wmt.mine span{color:#FFF4E0;text-shadow:0 0 4px #FFF4E0,0 0 10px rgba(255,236,200,.9),0 0 22px rgba(255,210,150,.6)}
|
||
.wmt-h{background:linear-gradient(90deg,#fff 0,#fff 55%,rgba(255,255,255,.9) 100%);border-radius:50% 40% 40% 50%/50%;
|
||
clip-path:none;box-shadow:0 0 8px 3px #fff,0 0 22px 9px rgba(255,255,255,.85),0 0 55px 20px rgba(235,225,255,.6)}
|
||
.wmt.mine .wmt-h{background:#FFF8EA}
|
||
.wmt-l{filter:blur(4px)}
|
||
.wmt-l::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,.75) 25%,rgba(245,238,255,.4) 60%,rgba(255,255,255,.08) 92%,transparent)}
|
||
.wmt span{text-shadow:0 0 1px rgba(60,30,110,.95),0 0 3px rgba(60,30,110,.7),0 0 12px rgba(255,255,255,.85),0 0 24px rgba(255,255,255,.5)}
|
||
.wmt.mine span{text-shadow:0 0 1px rgba(110,60,20,.9),0 0 3px rgba(110,60,20,.6),0 0 12px rgba(255,236,200,.85),0 0 24px rgba(255,210,150,.5)}
|
||
|
||
/* 十一改：划走的星消失；点星光波 + 碎星；飞行星尘；声音开关；全部落完 */
|
||
.wsk-st.used{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s,visibility .6s}
|
||
.wsk-st.flare,.wsk-st.flare.used{visibility:visible;opacity:1}
|
||
.wsk-st.flare.gone{opacity:0}
|
||
.wsk-bright.back .wsk-st{animation:wskBack .9s cubic-bezier(.2,.8,.2,1) both}
|
||
@keyframes wskBack{from{opacity:0;transform:translateY(-30px) scale(.3)}to{opacity:1;transform:none}}
|
||
.wfx-ring,.wfx-sp,.wfx-dust{position:absolute;z-index:2;pointer-events:none}
|
||
.wfx-ring{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
|
||
box-shadow:0 0 12px rgba(255,255,255,.8),inset 0 0 8px rgba(255,255,255,.6);animation:wfxRing .8s cubic-bezier(.2,.8,.2,1) forwards}
|
||
.wfx-ring.gold{border-color:rgba(255,220,160,.95);box-shadow:0 0 12px rgba(255,200,120,.8),inset 0 0 8px rgba(255,200,120,.6)}
|
||
@keyframes wfxRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(6);opacity:0;border-width:.5px}}
|
||
.wfx-sp{width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF4E6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFF4E6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;
|
||
filter:drop-shadow(0 0 3px #fff);animation:wfxSp .85s cubic-bezier(.15,.7,.3,1) both}
|
||
.wfx-sp.gold,.wfx-dust.gold{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFC27A' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFC27A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFE2A8'/%3E%3C/svg%3E")}
|
||
@keyframes wfxSp{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(90deg);opacity:0}}
|
||
.wfx-dust{width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF4E6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFF4E6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;animation:wfxDust 1s ease-out forwards}
|
||
@keyframes wfxDust{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:translateY(var(--y)) scale(.3) rotate(60deg)}}
|
||
.whv-snd{display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(6px)}
|
||
.whv-snd .off,.whv-snd.off .on{display:none}
|
||
.whv-snd.off .off{display:inline}
|
||
.whv-snd.off{color:rgba(255,255,255,.55)}
|
||
.whv-snd+.whv-all{margin-left:8px}
|
||
.wsk-done{position:absolute;left:0;right:0;top:34%;z-index:3;text-align:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s,transform .6s,visibility .6s}
|
||
.wsk-done.show{opacity:1;visibility:visible;transform:none}
|
||
.wsk-done p{margin:0;font-size:19px;font-weight:300;letter-spacing:2px;line-height:1.7;color:#FFF3E2;text-shadow:0 0 12px rgba(255,220,180,.6)}
|
||
.wsk-done p span{font-size:13px;color:rgba(255,255,255,.6)}
|
||
.wsk-done button{margin-top:16px;height:34px;padding:0 18px;border-radius:99px;font-size:13px;font-weight:600;color:#fff;
|
||
background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 18px rgba(255,230,200,.25)}
|
||
@media (prefers-reduced-motion:reduce){.wsk-bright.back .wsk-st{animation:none}}
|
||
/* 十二改：白光集中在头后一小段，字所在的尾巴段光变柔，小字不再被白光吃掉 */
|
||
.wmt-l::before{background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.7) 8%,rgba(255,255,255,.32) 22%,rgba(240,230,255,.22) 55%,rgba(255,255,255,.06) 90%,transparent)}
|
||
.wmt.mine .wmt-l::before{background:linear-gradient(90deg,#FFF8EA 0,rgba(255,236,200,.7) 8%,rgba(255,226,180,.32) 22%,rgba(255,210,150,.22) 55%,rgba(255,220,170,.06) 90%,transparent)}
|
||
|
||
/* 首页悄悄话入口：条内一片小星空（四角星一闪一闪）+ 偶尔两道流星，频率很低 */
|
||
.wh-entry::before{display:none}
|
||
.we-ico,.we-txt,.we-go{position:relative;z-index:1}
|
||
.we-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
|
||
.we-sky i{position:absolute;margin:-3px 0 0 -3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF4E6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFF4E6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.75}
|
||
.we-sky i.tw{animation:weTw 2.6s ease-in-out infinite}
|
||
@keyframes weTw{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:.15;transform:scale(.5)}}
|
||
.we-mt{position:absolute;top:-6px;left:62%;width:70px;height:1.5px;border-radius:2px;opacity:0;transform-origin:0 50%;
|
||
background:linear-gradient(90deg,#fff,rgba(255,255,255,.5) 30%,rgba(255,255,255,0));box-shadow:0 0 6px rgba(255,255,255,.7);
|
||
animation:weMt 7s linear infinite 1.5s}
|
||
.we-mt::before{content:"";position:absolute;left:-2px;top:-1.5px;width:5px;height:4.5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #fff}
|
||
.we-mt.m2{left:92%;width:54px;animation-duration:11s;animation-delay:5.2s}
|
||
@keyframes weMt{0%{opacity:0;transform:translate(0,0) rotate(-24deg)}1.5%{opacity:1}9%{opacity:0;transform:translate(-150px,68px) rotate(-24deg)}100%{opacity:0;transform:translate(-150px,68px) rotate(-24deg)}}
|
||
@media (prefers-reduced-motion:reduce){.we-sky i.tw,.we-mt{animation:none}}
|
||
.we-sky i{opacity:.95;filter:drop-shadow(0 0 2px rgba(255,255,255,.8));transform:scale(1.35)}
|
||
@keyframes weTw{0%,100%{opacity:1;transform:scale(1.35)}50%{opacity:.2;transform:scale(.6)}}
|
||
.we-mt{width:96px;height:2px;top:-4px}
|
||
.we-mt.m2{width:70px}
|
||
.we-mt{height:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.75) 30%,rgba(255,255,255,0));box-shadow:0 0 8px 1px rgba(255,255,255,.8)}
|
||
|
||
/* 2026-10-02 3D 婴儿房整块可点：按下时整块轻微压暗 + 按钮跟着缩一下 */
|
||
.ny-peek{cursor:pointer;-webkit-tap-highlight-color:transparent}
|
||
.ny-peek .nyp-layer img{transition:filter .15s}
|
||
.ny-peek:active .nyp-layer img{filter:brightness(.92)}
|
||
.ny-peek:active .nyp-btn{transform:scale(.96)}
|
||
|
||
/* 2026-10-02 用户：入口星星小一点、少一点，别挡住「X周孕妈悄悄话」那行字 —— 星星只放在文字行之间 / 四周空处（见 index.html），不再放大 */
|
||
.we-sky i{transform:scale(1);opacity:.85;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.6))}
|
||
@keyframes weTw{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.2;transform:scale(.55)}}
|
||
|
||
/* ================= 「记一下」弹窗压到半屏以内（2026-10-02 二改）=================
|
||
用户：「弹出的框尽量别超过 1/2」。标题一行、今天卡合成一条细条、宫格 5 列小图标；工具多了宫格自己滚。 */
|
||
.sheet{max-height:50%}
|
||
.sheet-grip{padding:8px 0 2px}
|
||
.sheet-head{align-items:center;padding:4px 18px 10px 22px}
|
||
.sheet-head>div{display:flex;align-items:baseline;gap:10px;min-width:0}
|
||
.sheet-head h2{font-size:19px;letter-spacing:0;flex:none}
|
||
.sheet-head p.sk-sub{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.sheet-close{width:30px;height:30px;font-size:0}
|
||
.sheet-scroll{padding:0 16px calc(12px + env(safe-area-inset-bottom))}
|
||
.sk-today{gap:10px;margin:0 2px 14px;padding:9px 10px 9px 12px;border-radius:16px}
|
||
.sk-ring{width:36px;height:36px}
|
||
.sk-ring circle{stroke-width:5}
|
||
.sk-ring b{font-size:14px}
|
||
.sk-tt{gap:2px}
|
||
.sk-tt>b{font-size:14px}
|
||
.sk-tt>span{display:block;font-size:11.5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.sk-today .sk-go{flex:none;margin:0;padding:0 14px;height:30px;border-radius:99px;font-size:12.5px;font-weight:700;color:#fff;
|
||
background:linear-gradient(135deg,#F09A80,#E07560);box-shadow:0 4px 10px rgba(224,117,96,.28)}
|
||
.sk-today .sk-go.hide{display:none}
|
||
.sk-today .sk-go:active{transform:scale(.94)}
|
||
.apps-grid{grid-template-columns:repeat(5,1fr);grid-auto-rows:auto;gap:14px 4px;align-content:start}
|
||
.apps-grid .app{gap:5px;font-size:11px;min-width:0;line-height:1.25}
|
||
.apps-grid .app .a-ico{width:42px;height:42px}
|
||
.apps-grid .a-ico-letter{width:42px;border-radius:14px;font-size:17px}
|
||
.apps-grid .a-n{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;letter-spacing:-.4px}
|
||
.apps-grid .app.is-done::after{top:-4px;right:calc(50% - 27px);width:15px;height:15px;background-size:10px}
|
||
#appsGrid{grid-auto-rows:auto;max-height:none;overflow:visible;padding:6px 0 0}
|
||
/* 2026-10-02 修：关着的弹窗/弹层都停在屏幕下沿外（translateY(102%)），但向上的 box-shadow 会漏进屏幕底部约 30px，
|
||
六七个叠起来就是底部一条发灰发糊的带子（压在「记一下」最后一行字和首页底部上）。关着时不要阴影。 */
|
||
.modal:not(.show),.sheet:not(.show){box-shadow:none!important}
|
||
/* 2026-10-02 用户：记一下宫格一行还是摆 4 个（列宽够，图标和字回大一号） */
|
||
.apps-grid{grid-template-columns:repeat(4,1fr);gap:14px 6px}
|
||
.apps-grid .app .a-ico{width:48px;height:48px}
|
||
.apps-grid .a-ico-letter{width:48px;border-radius:16px;font-size:19px}
|
||
.apps-grid .a-n{font-size:11.5px;letter-spacing:-.2px}
|
||
.apps-grid .app.is-done::after{right:calc(50% - 30px)}
|
||
|
||
/* ================= 此刻 · 三行使用动态（2026-10-02）=================
|
||
用户：「此刻给我放 3 个使用应用记录」。常驻三行，不再给悄悄话让位；每 3 秒顶上一行淡出、底下补一行。 */
|
||
.pulse.has-wh .pl-feed.pl-feed3{display:block}
|
||
.pulse .pl-feed.pl-feed3.hide{display:none}
|
||
.pl-feed.pl-feed3{height:90px;margin:10px 0 2px;padding:0;-webkit-mask-image:none;mask-image:none}
|
||
.pl-feed3 .pl-row{height:30px;gap:8px;font-size:12.5px;padding:0 2px;border-radius:10px;transition:opacity .45s,background .15s}
|
||
.pl-feed3 .pl-row .pr-ava{width:22px;height:22px;box-shadow:0 0 0 1.5px #fff}
|
||
.pl-feed3 .pl-row .pr-who{font-size:11.5px}
|
||
.pl-feed3 .pl-row .pr-do{color:var(--ink)}
|
||
.pl-feed3 .pl-row .pr-do em{font-weight:700}
|
||
.pl-feed3 .pl-row .pr-go{flex:none;font-style:normal;font-size:15px;line-height:1;color:#D4B8AC;padding:0 4px}
|
||
.pl-feed3 .pl-row.is-go{cursor:pointer}
|
||
.pl-feed3 .pl-row.is-go:active{background:rgba(232,131,107,.08)}
|
||
.pl-feed3 .pl-row.is-out{opacity:0}
|
||
.pl-feed3 .pl-track>.pl-row:last-child:not(:nth-child(-n+3)){animation:plIn .55s var(--ease) both}
|
||
@keyframes plIn{from{opacity:0}to{opacity:1}}
|
||
.pulse.has-wh .wh-entry{margin-top:10px}
|
||
.pl-feed3 .pl-row .pr-ago{flex:none;font-size:11px;color:var(--muted)}
|
||
.pl-feed3 .pl-row .pr-go{padding:0 2px 0 0}
|
||
|
||
/* 2026-10-02 悄悄话页标题改成「每一颗星星，都是一位孕妈的一句话」：两行，字号收一点，「一位孕妈」用暖金渐变 */
|
||
.wsk-t{font-size:23px;line-height:1.38;letter-spacing:1.5px;font-weight:800}
|
||
.wsk-t b{font-size:inherit;margin:0 2px;font-family:inherit;font-weight:900}
|
||
.wsk-title p{margin-top:8px}
|
||
|
||
/* 2026-10-02 用户：slogan 换字体 → 站酷小薇（衬线、规整）。
|
||
字体文件仅含「全家都爱用的孕育平台」10 个字的子集，改文案需重新生成子集 */
|
||
@font-face{font-family:"SloganXiaoWei";src:url(assets/fonts/slogan-xiaowei.d5f456a3.woff2) format("woff2");font-display:swap}
|
||
.hero-slogan{font-family:"SloganXiaoWei",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;font-weight:400;letter-spacing:1.6px;opacity:1;text-shadow:0 1px 2px rgba(150,50,30,.25)}
|
||
|
||
/* 2026-10-02 用户：「孕育工具」「今日孕期小知识」标题的字体字号与「今日脚印」（.fp2 .tl-h-title）一致 */
|
||
.dock-title,.pt-title,.pt-title .pt-wk{font-family:inherit;font-size:18px;font-weight:900;letter-spacing:-.3px;color:var(--ink)}
|
||
.pt-title .pt-wk::after{height:15px}
|
||
|
||
/* 2026-10-02 用户：「记一下那个效果取消掉」→ 去掉中心圆钮外圈一直往外扩散的光环（fabHalo） */
|
||
.tab-fab .fab::after{display:none;animation:none}
|
||
/* 2026-10-02 用户：圆钮白边变小 4px → 2px（content-box，外径 60 → 56，margin-left 跟着取半宽居中） */
|
||
.tab-fab .fab{border-width:2px;margin-left:-28px;top:-20px}
|
||
/* 同日：白边大头其实在切图里（69818ea975da.png 的橙圆只占约 2/3 且偏左，四周一圈白）。
|
||
改成 CSS 画：橙色满圆 + 白色「+」，白边只剩上面那 2px border。切图 <img> 保留但隐藏。 */
|
||
.tab-fab .fab{background:linear-gradient(150deg,#FF8A6E,#F4593C)}
|
||
.tab-fab .fab img{display:none}
|
||
.tab-fab .fab::before{content:"";width:22px;height:22px;
|
||
background:linear-gradient(#fff,#fff) center/100% 3.5px no-repeat,linear-gradient(#fff,#fff) center/3.5px 100% no-repeat;border-radius:2px}
|
||
|
||
/* 2026-10-02 用户：首页兑换模块商品「热门/新品」角标用「去兑换」按钮同款玫红渐变 */
|
||
#homeExchGoods .gi-badge{background:linear-gradient(135deg,#E8708F,#D9577A 60%,#B83F62);box-shadow:0 2px 5px rgba(184,63,98,.3)}
|
||
/* 2026-10-02 用户：首页兑换模块副标题「做孕期任务就能攒兜豆」用灰色字 */
|
||
#homeExchSub{color:#9A8D86;font-weight:600}
|
||
/* 2026-10-02 用户：「记一下」加号变小 22px → 17px，线宽 3.5 → 3 */
|
||
.tab-fab .fab::before{width:17px;height:17px;background:linear-gradient(#fff,#fff) center/100% 3px no-repeat,linear-gradient(#fff,#fff) center/3px 100% no-repeat}
|
||
/* 同日：外圈也缩小 52 → 44（外径含 2px 白边 56 → 48），底边位置不变；加号 17 → 15 */
|
||
.tab-fab .fab{width:44px;height:44px;margin-left:-24px;top:-12px}
|
||
.tab-fab .fab::before{width:15px;height:15px;background:linear-gradient(#fff,#fff) center/100% 2.6px no-repeat,linear-gradient(#fff,#fff) center/2.6px 100% no-repeat}
|
||
|
||
/* ================= 底部导航「推荐版」（2026-10-02）=================
|
||
用户要的方向：图标和页面同一套语言（圆头线稿，同「今日待办」）、只留一个焦点、「记一下」被底栏托住、底栏暖白 + 内容淡出。
|
||
⚠️ 选中态仍按 2026-10-01 用户要求：不加背景胶囊，只靠颜色 + 加粗 + 弹一下 + 下方小圆点；本版只多了「线稿 → 实心」。
|
||
· 缺口：底色挪到 ::before 上用 mask 挖一个圆；阴影改成父级 filter:drop-shadow，才会沿着缺口走（box-shadow 会被 mask 切掉）。
|
||
代价：父级有 filter 后子元素的 backdrop-filter 失效，所以底色改成近不透明的暖白，不再磨砂。
|
||
· 圆钮中心在底栏顶边下 6px，直径 46；缺口半径 = 23 + 5 留白。改圆钮尺寸/位置要同步改 mask 的圆心和半径。 */
|
||
.tabbar{background:none!important;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;
|
||
filter:drop-shadow(0 6px 14px rgba(170,90,60,.12)) drop-shadow(0 0 1px rgba(170,90,60,.18))}
|
||
.tabbar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
|
||
background:linear-gradient(180deg,#FFFDFB,#FFF8F3);box-shadow:inset 0 0 0 1px rgba(255,214,196,.55);
|
||
-webkit-mask:radial-gradient(circle 28px at 50% 6px,transparent 27.5px,#000 28.5px);
|
||
mask:radial-gradient(circle 28px at 50% 6px,transparent 27.5px,#000 28.5px)}
|
||
.tabbar{isolation:isolate}
|
||
.tab-fade{position:absolute;left:0;right:0;bottom:0;z-index:59;pointer-events:none;
|
||
height:calc(96px + env(safe-area-inset-bottom));
|
||
background:linear-gradient(180deg,rgba(248,243,239,0),rgba(248,243,239,.88) 55%,rgba(248,243,239,.96))}
|
||
|
||
/* 线稿图标：.tf 主体（选中时实心填色）、.td 小细节（选中时反白）、.tl 只在主体上的折线（选中时反白） */
|
||
.tab{color:#A3958D}
|
||
.t-ico.t-line{background:none;-webkit-mask:none;mask:none;width:25px;height:25px}
|
||
.t-svg{display:block;width:100%;height:100%;overflow:visible}
|
||
.t-svg .tf,.t-svg .tl{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:fill .25s}
|
||
.t-svg .td{fill:currentColor;stroke:none;transition:fill .25s}
|
||
.tab.is-active .t-svg .tf{fill:currentColor}
|
||
.tab.is-active .t-svg .tl{stroke:#fff}
|
||
.tab.is-active .t-svg .td{fill:#fff}
|
||
|
||
/* 「我的」：有头像就用头像（圆形；未选中不描边——2026-10-03 用户要求去掉那圈灰圈；选中时描一圈橙） */
|
||
.t-ava{display:none;position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;
|
||
background:#F3ECE7}
|
||
.tab.has-ava .t-ava{display:block}
|
||
.tab.has-ava .t-svg{visibility:hidden}
|
||
.tab.has-ava.is-active .t-ava{box-shadow:0 0 0 2px currentColor}
|
||
|
||
/* 「宝宝来信」有新信：信封每 4 秒轻晃一下 */
|
||
#tabLetter.has-new .t-ico{animation:letterWiggle 4s ease-in-out infinite;transform-origin:50% 80%}
|
||
@keyframes letterWiggle{0%,76%,100%{transform:rotate(0)}80%{transform:rotate(-12deg)}84%{transform:rotate(10deg)}88%{transform:rotate(-6deg)}92%{transform:rotate(3deg)}}
|
||
#tabLetter.has-new{color:#8E7F78}
|
||
|
||
/* 「记一下」：圆钮去掉白圈，坐进缺口；文字平时和其它 tab 同色，弹层打开时才变橙 → 底栏只有一个焦点 */
|
||
.tab-fab .fab{border:0;width:46px;height:46px;margin-left:-23px;top:-17px;
|
||
box-shadow:0 3px 8px rgba(244,89,60,.26),inset 0 1px 0 rgba(255,255,255,.25)}
|
||
.tab-fab .t-txt{color:inherit;font-weight:600}
|
||
.phone.sheet-open .tab-fab .t-txt{color:#F4593C;font-weight:800}
|
||
@media (prefers-reduced-motion:reduce){#tabLetter.has-new .t-ico{animation:none}}
|
||
/* 档案的小脚丫：脚趾圆点在脚掌外面，选中时不反白、跟主体同色 */
|
||
.tab[data-tab="archive"].is-active .t-svg .td{fill:currentColor}
|
||
|
||
/* ================= 悄悄话 · 每周话题（2026-10-02）=================
|
||
首页入口三行：小字「30周孕妈悄悄话」/ 本周话题（金色小签 + 话题名）/ 一句轮播；右边「去说一句」。
|
||
全屏页标题下一张话题签；「说一句」弹窗顶上一行话题。话题表在 app.js WH_THEMES。 */
|
||
.we-topic{display:none;align-items:center;gap:6px;min-width:0}
|
||
.wh-entry.has-topic .we-topic{display:flex}
|
||
.we-topic em{flex:none;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.5px;color:#4A2E1E;
|
||
background:linear-gradient(120deg,#FFE2B8,#FFB98F);padding:1px 6px;border-radius:5px;line-height:15px}
|
||
.we-topic strong{font-size:15px;font-weight:900;letter-spacing:.5px;color:#FFE7C7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.wh-entry.has-topic .we-txt{gap:3px}
|
||
.wh-entry.has-topic .we-roll{font-size:12.5px;font-weight:500;color:rgba(255,244,232,.78)}
|
||
.wh-entry.has-topic .we-go{color:#FFE2B8;font-weight:700}
|
||
|
||
.wsk-topic{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 8px;margin-top:12px;padding:8px 14px;
|
||
border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,226,184,.25)}
|
||
.wsk-topic em{font-style:normal;font-size:11px;font-weight:800;color:#4A2E1E;background:linear-gradient(120deg,#FFE2B8,#FFB98F);padding:1px 7px;border-radius:6px}
|
||
.wsk-topic b{font-size:16px;font-weight:900;color:#FFE7C7;letter-spacing:1px}
|
||
.wsk-topic span{flex-basis:100%;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.5px}
|
||
|
||
.wh-m-topic{margin:0 0 6px;font-size:13px;font-weight:800;color:#C2667A}
|
||
|
||
/* 2026-10-02 用户：悄悄话页上半部分文字太占地方、挡住星星 → 标题一行 + 话题一行胶囊，整块高度约减半 */
|
||
.wsk-title{top:calc(66px + env(safe-area-inset-top))}
|
||
.wsk-t{font-size:18px;line-height:1.4;letter-spacing:.5px;font-weight:800;white-space:nowrap;text-shadow:0 1px 8px rgba(20,10,40,.5)}
|
||
.wsk-t b{margin:0 1px}
|
||
.wsk-topic{display:inline-flex;flex-wrap:nowrap;gap:7px;margin-top:9px;padding:4px 12px 4px 4px;border-radius:99px;
|
||
background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,226,184,.22)}
|
||
.wsk-topic em{padding:2px 8px;border-radius:99px;font-size:10.5px}
|
||
.wsk-topic b{font-size:13.5px;letter-spacing:.5px}
|
||
.wsk-topic span{display:none}
|
||
.wh-m-topic{line-height:1.5}
|
||
.wsk-t b{text-shadow:none}
|
||
.wh-m-topic span{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#B59A92}
|
||
|
||
/* 2026-10-02 用户：点黄色大星星（自己的）飞出去时黄色要更亮、往外发光，像流星 → 头改金色多层外发光，尾巴金光加浓，静态星和点击闪光也换暖金 */
|
||
.wsk-st.mine i{filter:brightness(1.12) drop-shadow(0 0 5px rgba(255,220,140,1)) drop-shadow(0 0 14px rgba(255,185,90,.75))}
|
||
.wsk-st.mine.seen i{filter:none}
|
||
.wsk-st.mine.flare i{animation-name:wskFlareGold}
|
||
@keyframes wskFlareGold{0%{transform:scale(1)}55%{transform:scale(2.6) rotate(20deg);filter:brightness(1.7) drop-shadow(0 0 10px #FFE7B0) drop-shadow(0 0 26px rgba(255,180,80,.95))}
|
||
100%{transform:scale(1.8) rotate(30deg);filter:brightness(1.3) drop-shadow(0 0 10px #FFE2A0) drop-shadow(0 0 22px rgba(255,170,70,.8))}}
|
||
.wmt.mine .wmt-h{background:linear-gradient(90deg,#FFFEF6 0,#FFF0C6 45%,#FFD27A 100%);
|
||
box-shadow:0 0 6px 3px #FFF3CC,0 0 18px 8px rgba(255,214,120,.95),0 0 42px 18px rgba(255,180,80,.7),0 0 80px 34px rgba(255,150,60,.32)}
|
||
.wmt.mine .wmt-l{filter:blur(3px) drop-shadow(0 0 8px rgba(255,196,100,.85))}
|
||
.wmt.mine .wmt-l::before{background:linear-gradient(90deg,#FFF6D6 0,rgba(255,220,130,.95) 8%,rgba(255,196,96,.6) 24%,rgba(255,176,80,.32) 55%,rgba(255,160,80,.1) 88%,transparent)}
|
||
.wmt.mine span{color:#FFF3D6;text-shadow:0 0 1px rgba(110,60,20,.9),0 0 3px rgba(110,60,20,.55),0 0 10px rgba(255,220,140,.95),0 0 24px rgba(255,180,90,.65)}
|
||
|
||
/* 2026-10-03 用户：消消乐 banner 左右留白太大 → 和上面「豆豆今天想说」卡片对齐（距屏幕边 16px） */
|
||
.game-promo{padding-left:16px;padding-right:16px}
|
||
|
||
/* ================= 底部导航 · 暖色毛玻璃（2026-10-03）=================
|
||
用户：「按孕期档案（chengzhang-dangan/v7）底部 Tab 的毛玻璃风格改」。对照它的 .anc .ain：
|
||
rgba(255,255,255,.55) + blur(18px) saturate(170%) + 内描白边 + 顶部 1px 高光 + 暖色投影；下方淡出层减弱到 .55，让内容透上来可「磨」。
|
||
· 父级 .tabbar 去掉 filter（filter 会让子元素 backdrop-filter 失效）；玻璃放在 ::before（仍带 mask 缺口），
|
||
投影挪到不带 mask 的 ::after 上用 box-shadow（外投影只画在盒子外面，不会透进玻璃里）。
|
||
· 选中态仍按 2026-10-01 用户要求不加背景胶囊。 */
|
||
.tabbar{filter:none}
|
||
.tabbar::before{background:rgba(255,255,255,.55);
|
||
-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
|
||
box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 0 #fff}
|
||
.tabbar::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
|
||
box-shadow:0 14px 34px rgba(200,100,70,.2),0 2px 6px rgba(200,100,70,.06)}
|
||
.tab-fade{background:linear-gradient(180deg,rgba(255,240,232,0),rgba(255,240,232,.55))}
|
||
.tab-fab .fab{box-shadow:0 6px 14px rgba(244,89,60,.32),inset 0 1px 0 rgba(255,255,255,.3)}
|
||
@media (prefers-reduced-transparency:reduce){.tabbar::before{background:#FFF9F5}}
|
||
|
||
/* 2026-10-03 用户：「进去布置」和下面兑换模块的「去兑换」都是粉玫红，靠色 → 换成和婴儿房外景草坪同色系的青草绿 */
|
||
.nyp-btn{background:linear-gradient(135deg,#8FCF8A,#5DAE6B 60%,#46985A);box-shadow:0 4px 10px rgba(70,152,90,.3)}
|
||
.ny-peek.is-night .nyp-btn{background:linear-gradient(135deg,#9AD69A,#62B474);box-shadow:0 4px 12px rgba(0,0,0,.3)}
|
||
/* 同日：左上角「进去看看」角标也跟按钮统一成青草绿 */
|
||
.nyp-chip{color:#3F8F52;box-shadow:0 2px 8px rgba(70,152,90,.18)}
|
||
/* 2026-10-03 用户选定「B 磨砂颗粒」：首页各白底板块加毛玻璃质感，其他不变。
|
||
半透白 + 左上斜向高光 + 亮白细边 + 极细磨砂颗粒（assets/img/glass-noise.png，白点为主、极少量淡灰点）。
|
||
婴儿房（满幅图）和小游戏（彩色卡）不是白底，不动。
|
||
没加 backdrop-filter：页面底是纯米色，模糊了也看不出来；而且它会让板块里 position:fixed 的子元素改以板块为参照，风险大于收益。 */
|
||
#homeBody>section:not(.ny-peek):not(.game-promo){
|
||
background:url(assets/img/glass-noise.png) repeat,
|
||
linear-gradient(155deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 38%),
|
||
linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,251,248,.58))!important;
|
||
border:1px solid rgba(255,255,255,.95);
|
||
box-shadow:0 10px 30px rgba(190,110,80,.10),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.6)!important}
|