69 lines
6.6 KiB
CSS
69 lines
6.6 KiB
CSS
/* 首页「孕妈广场」效果稿 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}
|