89 lines
9.3 KiB
CSS
89 lines
9.3 KiB
CSS
/* 11-02 效果稿 V6 · 合并版：在 V4 基础上压矮卡堆、去掉「大家在聊」标签行，下面接「其他妈妈也在搜」 */
|
||
#gcHome.gv4.gv6 .g4-stage{height:248px}
|
||
#gcHome.gv4.gv6 .g4-tt{font-size:15px}
|
||
#gcHome.gv4.gv6 .g4-s-t{margin-top:8px;font-size:22px}
|
||
#gcHome.gv4.gv6 .g4-s-d{margin-top:4px;font-size:12px}
|
||
#gcHome.gv4.gv6 .g4-s-n{margin-top:2px}
|
||
#gcHome.gv4.gv6 .g4-s-avs{display:none}
|
||
#gcHome.gv4.gv6 .g4-tags{display:none}
|
||
#gcHome.gv4.gv6 .g6-ms{margin-top:20px;padding-top:16px;border-top:1px dashed #F1DED6}
|
||
#gcHome.gv4.gv6 .g6-mh{display:flex;align-items:center;gap:8px;margin-bottom:2px}
|
||
#gcHome.gv4.gv6 .g6-mt{margin:0;font-size:17px;font-weight:900;letter-spacing:.3px;color:#2A1E1E}
|
||
#gcHome.gv4.gv6 .g6-mt span{background:linear-gradient(transparent 58%,#FFE066 58%,#FFE066 92%,transparent 92%);padding:0 3px}
|
||
#gcHome.gv4.gv6 .g6-wk{margin-left:auto;padding:2px 9px;border-radius:99px;background:#FFEDE6;color:#E0573A;font-size:11.5px;font-weight:700}
|
||
#gcHome.gv4.gv6 .ms-it{padding:10px 2px}
|
||
#gcHome.gv4.gv6 .ms-q{font-size:15px}
|
||
#gcHome.gv4.gv6 .g4-foot{margin-top:8px}
|
||
html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0}
|
||
#gcHome.gv4.gv6 .g4-s-r{margin-top:10px}
|
||
/* 11-02 用户：图片上的文字不够明显 → 遮罩更早开始、底部更深，标题加大加粗、阴影加重，作者行加大 */
|
||
#gcHome.gv4.gv6 .st::after{background:linear-gradient(180deg,rgba(0,0,0,0) 22%,rgba(30,12,12,.35) 48%,rgba(22,8,8,.9) 100%)}
|
||
#gcHome.gv4.gv6 .g4-bot{padding:0 14px 14px}
|
||
#gcHome.gv4.gv6 .g4-tt{font-size:17.5px;line-height:1.38;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.45)}
|
||
#gcHome.gv4.gv6 .g4-by{font-size:12.5px;margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
|
||
#gcHome.gv4.gv6 .g4-by i{background:rgba(255,255,255,.28);font-size:11.5px}
|
||
#gcHome.gv4.gv6 .g4-k{font-size:12px;height:24px}
|
||
|
||
/* 11-02 用户：孕妈广场里放两个测试 —— 两张并排卡，在卡堆和「其他妈妈也在搜」之间
|
||
11-02 用户：「颜色有点太多、和下面雷同、显得乱」→ 去掉紫/橙底和彩色标签：白卡 + 细边，上半是插画横幅，
|
||
下半深色标题 + 灰色信息，只留一个品牌粉「开始测 ›」；两块小标题统一成同一种样式，不再用黄色荧光笔 */
|
||
#gcHome.gv4.gv6 .g6-qz{margin-top:20px}
|
||
#gcHome.gv4.gv6 .g6-qh,#gcHome.gv4.gv6 .g6-mt{display:flex;align-items:baseline;gap:6px;margin:0 0 10px;font-size:16px;font-weight:900;letter-spacing:.3px;color:#2A1E1E}
|
||
#gcHome.gv4.gv6 .g6-mt{margin:0}
|
||
#gcHome.gv4.gv6 .g6-mt span{background:none;padding:0}
|
||
#gcHome.gv4.gv6 .g6-qh small{font-size:12px;font-weight:500;color:#A8928C}
|
||
#gcHome.gv4.gv6 .g6-qa{margin-left:auto;align-self:center;padding:3px 10px;border-radius:99px;background:#FFF0EC;color:#F2533A;font-size:12px;font-weight:800;letter-spacing:0;text-decoration:none;white-space:nowrap}
|
||
#gcHome.gv4.gv6 .g6-qr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
||
#gcHome.gv4.gv6 .g6-q{display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;border:1px solid #F3E6E0;text-decoration:none;color:#2A1E1E;box-shadow:0 6px 16px -14px rgba(150,90,80,.5)}
|
||
#gcHome.gv4.gv6 .g6-q img{display:block;width:100%;height:84px;object-fit:cover;object-position:60% 45%;background:#FBF3EF}
|
||
#gcHome.gv4.gv6 .g6-qb{display:flex;flex-direction:column;gap:4px;padding:9px 11px 11px}
|
||
#gcHome.gv4.gv6 .g6-qt{font-size:14.5px;font-weight:800;line-height:1.38}
|
||
#gcHome.gv4.gv6 .g6-qf{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:11.5px;color:#A8928C}
|
||
#gcHome.gv4.gv6 .g6-qg{flex:none;font-weight:800;color:#E0566F}
|
||
html.night #gcHome.gv4.gv6 .g6-qh,html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0}
|
||
html.night #gcHome.gv4.gv6 .g6-q{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#F3E8F0}
|
||
#gcHome.gv4.gv6 .g6-qt{text-wrap:balance}
|
||
/* 测一测 · 第 2 版「小胶囊」：并排两颗矮胶囊，圆形插画 + 两行字，浅米底无边框，只有一个灰色箭头 */
|
||
#gcHome.gv4.gv6 .qv2 .g6-c{display:flex;align-items:center;gap:9px;padding:9px 8px 9px 9px;border-radius:18px;background:#FBF3EF;text-decoration:none;color:#2A1E1E}
|
||
#gcHome.gv4.gv6 .qv2 .g6-c img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 8px -4px rgba(150,90,80,.45)}
|
||
#gcHome.gv4.gv6 .qv2 .g6-cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
|
||
#gcHome.gv4.gv6 .qv2 .g6-cb b{font-size:13.5px;font-weight:800;line-height:1.35;text-wrap:balance}
|
||
#gcHome.gv4.gv6 .qv2 .g6-cb small{font-size:11px;color:#A8928C}
|
||
#gcHome.gv4.gv6 .qv2 .g6-c i{flex:none;font-style:normal;font-size:16px;color:#D3B9B2}
|
||
/* 测一测 · 第 3 版「你 & 他」：一张合体卡，左右各一个圆头像，中间 & 连起来，底部一句组合文案 */
|
||
#gcHome.gv4.gv6 .qv3 .g6-v{border-radius:20px;background:linear-gradient(180deg,#FFF8F4,#fff);border:1px solid #F3E6E0;padding:14px 10px 10px;box-shadow:0 6px 16px -14px rgba(150,90,80,.5)}
|
||
#gcHome.gv4.gv6 .qv3 .g6-vr{display:flex;align-items:flex-start}
|
||
#gcHome.gv4.gv6 .qv3 .g6-vc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;text-decoration:none;color:#2A1E1E}
|
||
#gcHome.gv4.gv6 .qv3 .g6-vc img{width:66px;height:66px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 5px 12px -6px rgba(150,90,80,.5);margin-bottom:4px}
|
||
#gcHome.gv4.gv6 .qv3 .g6-vc small{font-size:11px;color:#A8928C;letter-spacing:1px}
|
||
#gcHome.gv4.gv6 .qv3 .g6-vc b{font-size:14px;font-weight:800;line-height:1.35}
|
||
#gcHome.gv4.gv6 .qv3 .g6-vc em{margin-top:3px;font-style:normal;font-size:12px;font-weight:800;color:#E0566F}
|
||
#gcHome.gv4.gv6 .qv3 .g6-amp{flex:none;align-self:center;margin-top:-34px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #F3E6E0;font-size:14px;font-weight:900;color:#D9A79B}
|
||
#gcHome.gv4.gv6 .qv3 .g6-vf{margin:10px 0 0;padding-top:9px;border-top:1px dashed #F1DED6;text-align:center;font-size:11.5px;color:#A8928C}
|
||
html.night #gcHome.gv4.gv6 .qv2 .g6-c,html.night #gcHome.gv4.gv6 .qv3 .g6-v{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#F3E8F0}
|
||
html.night #gcHome.gv4.gv6 .qv3 .g6-vc{color:#F3E8F0}
|
||
/* 测一测 · 下面 3 个小列表（三版共用）：圆形小插画 + 标题 + 灰色题数人数 + 描边「去测」；不用序号，和下面热搜榜区分开 */
|
||
#gcHome.gv4.gv6 .g6-ql{margin-top:10px;padding:2px 12px;border-radius:16px;background:#FBF5F2}
|
||
#gcHome.gv4.gv6 .g6-li{display:flex;align-items:center;gap:10px;padding:10px 0;text-decoration:none;color:#2A1E1E;border-bottom:1px dashed #EEDDD6}
|
||
#gcHome.gv4.gv6 .g6-li:last-child{border-bottom:0}
|
||
#gcHome.gv4.gv6 .g6-li img{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:#F3E6E0;border:2px solid #fff}
|
||
#gcHome.gv4.gv6 .g6-lb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
||
#gcHome.gv4.gv6 .g6-lb b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
#gcHome.gv4.gv6 .g6-lb small{font-size:11px;color:#A8928C}
|
||
#gcHome.gv4.gv6 .g6-li em{flex:none;font-style:normal;height:24px;padding:0 10px;border-radius:99px;display:flex;align-items:center;font-size:12px;font-weight:800;color:#E0566F;border:1px solid #F4C4CE;background:#fff}
|
||
html.night #gcHome.gv4.gv6 .g6-ql{background:rgba(255,255,255,.05)}
|
||
html.night #gcHome.gv4.gv6 .g6-li{color:#F3E8F0;border-color:rgba(255,255,255,.1)}
|
||
/* 11-02 测一测挪到「其他妈妈也在搜」下面：上面加一道同样的虚线分隔 */
|
||
#gcHome.gv4.gv6 .g6-qz{margin-top:18px;padding-top:16px;border-top:1px dashed #F1DED6}
|
||
/* 测一测 · 第 4 版「彩色卡」（11-02 用户要更明显，拿回最早那版紫/橙底试试） */
|
||
#gcHome.gv4.gv6 .qv4 .g6-k{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:146px;padding:12px 12px 12px;border-radius:18px;text-decoration:none;color:#2A1E1E;background:linear-gradient(160deg,var(--q1),var(--q2));box-shadow:0 8px 18px -12px var(--qs)}
|
||
#gcHome.gv4.gv6 .qv4 .g6-k img{position:absolute;right:-12px;bottom:-14px;width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.8)}
|
||
#gcHome.gv4.gv6 .qv4 .g6-kk{align-self:flex-start;height:20px;padding:0 8px;border-radius:99px;display:flex;align-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--qc)}
|
||
#gcHome.gv4.gv6 .qv4 .g6-kt{position:relative;margin-top:8px;font-size:15px;font-weight:900;line-height:1.35;text-wrap:balance}
|
||
#gcHome.gv4.gv6 .qv4 .g6-kn{position:relative;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--qc)}
|
||
#gcHome.gv4.gv6 .qv4 .g6-kg{position:relative;margin-top:auto;align-self:flex-start;height:28px;padding:0 12px;border-radius:99px;display:flex;align-items:center;font-size:12.5px;font-weight:800;color:#fff;background:var(--qc);box-shadow:0 4px 10px -4px var(--qs)}
|
||
/* 11-02 用户：「查看全部 50 个问题」不用那么明显、别占那么大篇幅 → 去掉浅橙大底块，改成列表下方一行居中小灰字链接 */
|
||
#gcHome.gv4.gv6 .g6-all{display:flex;align-items:center;justify-content:center;gap:2px;width:auto;margin:2px auto 0;padding:6px 10px;border-radius:0;background:none;font-size:12.5px;font-weight:600;color:#B0948D}
|
||
#gcHome.gv4.gv6 .g6-all.hide{display:none}
|
||
html.night #gcHome.gv4.gv6 .g6-all{background:none;color:#B9A6B1}
|