/* 首页「孕妈广场」效果稿 V2 · 广场人群(只在 ?gcv=2 时加载,全部限定在 #gcHome.gv2) */ #gcHome.gv2{padding:16px 26px 12px;background:#fff} #gcHome.gv2 .g2-head{display:flex;align-items:center;justify-content:space-between;gap:8px} #gcHome.gv2 .g2-title{margin:0;font-size:21px;font-weight:900;letter-spacing:.5px;color:#2A1E1E} #gcHome.gv2 .g2-title span{background:linear-gradient(transparent 58%,#FFD0DC 58%,#FFD0DC 92%,transparent 92%);padding:0 3px} #gcHome.gv2 .g2-more{flex:none;display:flex;align-items:center;gap:2px;height:28px;padding:0 12px;border:0;border-radius:14px;background:linear-gradient(120deg,#FF8FA3,#F2627E);color:#fff;font:inherit;font-size:13px;font-weight:800;box-shadow:0 6px 14px -8px #F2627E} #gcHome.gv2 .g2-more i{font-style:normal;font-size:15px;line-height:1;margin-top:-1px} #gcHome.gv2 .g2-sub{display:flex;align-items:center;gap:6px;margin:6px 0 10px;font-size:12px;color:#8A7470} #gcHome.gv2 .g2-sub b{color:#E0566F;font-weight:900;font-size:13px} #gcHome.gv2 .g2-live{width:7px;height:7px;border-radius:50%;background:#3CC48A;box-shadow:0 0 0 3px rgba(60,196,138,.18)} /* 空地:上远下近,暖色地面 + 透视地砖 + 中间一圈浅色圆环 */ #gcHome.gv2 .g2-ground{position:relative;height:330px;margin:0 -12px;border-radius:22px;overflow:hidden; background:radial-gradient(120% 60% at 50% 105%,#FFE3D8 0%,rgba(255,227,216,0) 70%),linear-gradient(180deg,#FFF8F2 0%,#FFF0E8 55%,#FFE8DE 100%); box-shadow:inset 0 0 0 1px rgba(242,98,126,.08)} #gcHome.gv2 .g2-floor{position:absolute;left:-40%;right:-40%;top:18%;bottom:-30%;pointer-events:none;transform:perspective(260px) rotateX(58deg);transform-origin:50% 0; background:repeating-linear-gradient(90deg,rgba(232,150,130,.13) 0 1px,transparent 1px 38px),repeating-linear-gradient(0deg,rgba(232,150,130,.13) 0 1px,transparent 1px 38px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 35%);mask-image:linear-gradient(180deg,transparent,#000 35%)} #gcHome.gv2 .g2-ground::after{content:"";position:absolute;left:50%;top:178px;width:250px;height:100px;margin-left:-125px;border-radius:50%;pointer-events:none; border:2px dashed rgba(244,89,60,.12);background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0))} /* 头像 */ #gcHome.gv2 .g2-mom{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);padding:0;border:0;background:none;z-index:2; animation:g2bob var(--d) ease-in-out var(--dl) infinite;-webkit-tap-highlight-color:transparent} #gcHome.gv2 .g2-mom.near{z-index:3} #gcHome.gv2 .g2-face{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px solid #fff;box-sizing:border-box;background:#F6E3DC; box-shadow:0 4px 10px -4px rgba(150,70,60,.45);transition:transform .35s ease,opacity .35s ease,box-shadow .35s ease} #gcHome.gv2 .g2-face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block} #gcHome.gv2 .g2-mom:not(.near) .g2-face{opacity:.86;filter:saturate(.85)} #gcHome.gv2 .g2-shadow{position:absolute;left:12%;right:12%;bottom:calc(var(--s)*-.16);height:calc(var(--s)*.18);border-radius:50%;background:rgba(170,90,70,.16);filter:blur(2px)} #gcHome.gv2 .g2-mom.talk .g2-face{transform:scale(1.1);box-shadow:0 0 0 2px var(--ring,#F2627E),0 6px 14px -4px rgba(150,70,60,.5)} #gcHome.gv2 .g2-ground.swap .g2-face{opacity:0;transform:scale(.6)} @keyframes g2bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} /* 话题气泡 */ #gcHome.gv2 .g2-bub{position:absolute;width:158px;box-sizing:border-box;padding:7px 9px 8px;border-radius:14px;z-index:5;cursor:pointer; background:linear-gradient(160deg,#fff 30%,var(--bg,#FFF0F3));border:1.5px solid var(--bc,#FFD0DC);box-shadow:0 8px 18px -10px rgba(150,70,60,.45); opacity:0;transform:translateY(6px) scale(.96);transform-origin:var(--tx,50%) 100%;transition:opacity .4s ease,transform .4s ease;pointer-events:none} #gcHome.gv2 .g2-bub.on{opacity:1;transform:none;pointer-events:auto} #gcHome.gv2 .g2-bub-cat{display:block;font-size:11px;font-weight:800;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #gcHome.gv2 .g2-bub-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:2px;font-size:12px;line-height:16px;font-weight:800;color:#2A1E1E} #gcHome.gv2 .g2-tail{position:absolute;left:var(--tx,50%);bottom:-6px;width:10px;height:10px;margin-left:-5px;background:var(--bg,#FFF0F3); border-right:1.5px solid var(--bc,#FFD0DC);border-bottom:1.5px solid var(--bc,#FFD0DC);transform:rotate(45deg);border-bottom-right-radius:3px} /* 空位(投稿入口) */ #gcHome.gv2 .g2-seat{position:absolute;right:10px;bottom:14px;z-index:4;display:flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border:0;border-radius:30px; background:rgba(255,255,255,.72);box-shadow:0 6px 14px -10px rgba(244,89,60,.6);font:inherit;text-align:left;-webkit-tap-highlight-color:transparent} #gcHome.gv2 .g2-seat-o{flex:none;width:40px;height:40px;border-radius:50%;border:2px dashed #F4A08C;box-sizing:border-box;display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:900;color:#F4593C;background:#FFF5F1;animation:g2seat 2.8s ease-in-out infinite} #gcHome.gv2 .g2-seat-t{display:flex;flex-direction:column;line-height:16px} #gcHome.gv2 .g2-seat-t b{font-size:12.5px;font-weight:900;color:#2A1E1E} #gcHome.gv2 .g2-seat-t em{font-style:normal;font-size:11px;font-weight:800;color:#F4593C} @keyframes g2seat{0%,100%{border-color:#F4A08C}50%{border-color:#F4593C}} /* 分类胶囊 */ #gcHome.gv2 .g2-foot{display:flex;align-items:center;gap:8px;margin-top:10px} #gcHome.gv2 .g2-cats{flex:1;min-width:0;display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0} #gcHome.gv2 .g2-cats::-webkit-scrollbar{display:none} #gcHome.gv2 .g2-cats button{flex:none;height:28px;padding:0 13px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #F3E2DC;border-radius:14px;background:#FFFAF7; font:inherit;font-size:12.5px;font-weight:700;color:#8A7470;white-space:nowrap;transition:background .25s,color .25s,border-color .25s} #gcHome.gv2 .g2-cats button.on{background:var(--ck,#F2627E);border-color:var(--ck,#F2627E);color:#fff;font-weight:800;box-shadow:0 5px 12px -8px var(--ck,#F2627E)} #gcHome.gv2 .g2-mark{margin-left:auto;font-size:11px;color:#C4B5B1} @media (prefers-reduced-motion:reduce){ #gcHome.gv2 .g2-mom,#gcHome.gv2 .g2-seat-o{animation:none} #gcHome.gv2 .g2-bub,#gcHome.gv2 .g2-face{transition:none} } #gcHome.gv2 *{text-wrap:balance}