105 lines
11 KiB
CSS
105 lines
11 KiB
CSS
/* 11-02 首页「孕妈广场」效果稿 V4 · 故事卡堆（翻一翻） —— 全部限定在 #gcHome.gv4 */
|
||
#gcHome.gv4{margin:16px -26px 0;border-radius:26px;position:relative;z-index:0;padding:18px 26px 14px;background:linear-gradient(180deg,#FFFDFB 0%,#FFF7F2 100%);box-shadow:0 10px 26px -18px rgba(190,110,110,.45);overflow:hidden}
|
||
#gcHome.gv4 button{font:inherit;-webkit-tap-highlight-color:transparent}
|
||
#gcHome.gv4 .g4-head{display:flex;align-items:center;gap:8px}
|
||
#gcHome.gv4 .g4-title{flex:none;margin:0;font-size:21px;font-weight:900;letter-spacing:.5px;color:#2A1E1E}
|
||
#gcHome.gv4 .g4-title span{background:linear-gradient(transparent 58%,#FFD0DC 58%,#FFD0DC 92%,transparent 92%);padding:0 3px}
|
||
#gcHome.gv4 .g4-cat{margin-left:auto;display:flex;padding:2px;border-radius:99px;background:rgba(240,222,214,.7)}
|
||
#gcHome.gv4 .g4-cat button{height:24px;padding:0 8px;border:0;border-radius:99px;background:none;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11.5px;font-weight:700;color:#9A7F78;white-space:nowrap;transition:background .2s,color .2s}
|
||
#gcHome.gv4 .g4-cat button.on{background:#fff;color:#D9466A;box-shadow:0 1px 4px rgba(190,110,120,.18)}
|
||
#gcHome.gv4 .g4-cat button[data-cat=family].on{color:#E0566F}
|
||
#gcHome.gv4 .g4-cat button[data-cat=work].on{color:#3A72B8}
|
||
#gcHome.gv4 .g4-cat button[data-cat=baby].on{color:#2E8A7C}
|
||
#gcHome.gv4 .g4-sub{display:flex;align-items:center;gap:8px;margin:18px 0 2px;padding:6px 6px 6px 8px;border-radius:99px;background:linear-gradient(90deg,#FFEFF2,#FFE3EA);border:1px solid #FFD6E0;font-size:12px;color:#9A817C;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
|
||
#gcHome.gv4 .g4-sub:active{transform:scale(.98)}
|
||
#gcHome.gv4 .g4-st{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
#gcHome.gv4 .g4-st b{font-weight:900;color:#E0566F}
|
||
#gcHome.gv4 .g4-in{flex:none;height:26px;padding:0 7px 0 11px;border-radius:99px;background:linear-gradient(135deg,#FF8A9E,#F2627E);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:1px;box-shadow:0 4px 10px -4px rgba(242,98,126,.7)}
|
||
#gcHome.gv4 .g4-in i{font-style:normal;font-size:15px;line-height:1;margin-top:-1px}
|
||
|
||
#gcHome.gv4 .g4-avs{display:flex}
|
||
#gcHome.gv4 .g4-avs img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-5px;background:#FFE3D3}
|
||
#gcHome.gv4 .g4-avs img:first-child{margin-left:0}
|
||
|
||
/* 卡堆舞台：左边卡堆，右边露页码 + 箭头 */
|
||
#gcHome.gv4 .g4-stage{position:relative;display:flex;align-items:stretch;gap:6px;margin:14px 0 0;height:296px}
|
||
#gcHome.gv4 .g4-deck{position:relative;flex:1;min-width:0;margin:0 8px 0 0;touch-action:pan-y;user-select:none;-webkit-user-select:none;overscroll-behavior-x:contain}
|
||
#gcHome.gv4 .g4-card{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#F3E6E0;cursor:pointer;
|
||
box-shadow:0 14px 24px -16px rgba(120,60,60,.55),0 2px 6px rgba(120,60,60,.08);border:3px solid #fff;
|
||
transform-origin:50% 90%;transition:transform .42s cubic-bezier(.2,.8,.25,1),opacity .35s,filter .35s;will-change:transform}
|
||
#gcHome.gv4 .g4-card[data-d="0"]{transform:none}
|
||
#gcHome.gv4 .g4-card[data-d="1"]{transform:translate(12px,4px) rotate(4deg) scale(.95);filter:brightness(.96)}
|
||
#gcHome.gv4 .g4-card[data-d="2"]{transform:translate(-9px,8px) rotate(-3.5deg) scale(.91);filter:brightness(.93)}
|
||
#gcHome.gv4 .g4-card[data-d="3"]{transform:translate(-9px,8px) rotate(-3.5deg) scale(.91);opacity:0;pointer-events:none}
|
||
#gcHome.gv4 .g4-card[data-d="out"]{transform:translate(-135%,26px) rotate(-16deg);opacity:0;pointer-events:none}
|
||
#gcHome.gv4 .g4-deck.deal .g4-card{transform:translate(40px,30px) rotate(8deg) scale(.86)!important;opacity:0;transition:none}
|
||
#gcHome.gv4 .g4-deck.reset .g4-card{transition:transform .34s ease,opacity .2s}
|
||
#gcHome.gv4 .g4-card.drag{transition:none}
|
||
#gcHome.gv4 .g4-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
|
||
#gcHome.gv4 .st::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(40,18,18,.25) 58%,rgba(30,12,12,.78) 100%);pointer-events:none}
|
||
#gcHome.gv4 .g4-k{position:absolute;left:12px;top:12px;z-index:1;height:22px;padding:0 9px;border-radius:99px;display:flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.5px;color:#fff;background:var(--k,#E0566F);box-shadow:0 3px 8px -3px rgba(0,0,0,.35)}
|
||
#gcHome.gv4 .c-family{--k:#E0566F}
|
||
#gcHome.gv4 .c-work{--k:#3A72B8}
|
||
#gcHome.gv4 .c-baby{--k:#2E8A7C}
|
||
#gcHome.gv4 .g4-bot{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0 14px 13px;color:#fff}
|
||
#gcHome.gv4 .g4-tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;font-weight:900;line-height:1.4;letter-spacing:.2px;text-shadow:0 1px 6px rgba(0,0,0,.3)}
|
||
#gcHome.gv4 .g4-by{display:flex;align-items:center;gap:5px;margin-top:9px;font-size:11.5px;min-width:0}
|
||
#gcHome.gv4 .g4-by img{flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.9)}
|
||
#gcHome.gv4 .g4-by em{flex:0 1 auto;font-style:normal;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
|
||
#gcHome.gv4 .g4-by i{flex:none;font-style:normal;padding:0 5px;height:17px;line-height:17px;border-radius:99px;background:rgba(255,255,255,.22);font-size:11px}
|
||
#gcHome.gv4 .g4-like{margin-left:auto;flex:none;display:flex;align-items:center;gap:3px;font-weight:700;font-variant-numeric:tabular-nums}
|
||
#gcHome.gv4 .g4-like svg{width:14px;height:14px;fill:#FF7A93}
|
||
|
||
/* 最后一张：轮到你了 */
|
||
#gcHome.gv4 .sub{display:flex;flex-direction:column;align-items:flex-start;padding:18px 18px 16px;background:radial-gradient(120% 70% at 100% 0%,#FFE1D2 0%,rgba(255,225,210,0) 60%),linear-gradient(160deg,#FFF6EE 0%,#FFE7EC 100%);color:#3A2626}
|
||
#gcHome.gv4 .g4-s-k{height:22px;padding:0 9px;border-radius:99px;display:flex;align-items:center;font-size:11px;font-weight:800;color:#F4593C;background:#fff;box-shadow:0 2px 6px rgba(244,89,60,.15)}
|
||
#gcHome.gv4 .g4-s-t{margin-top:16px;font-size:28px;font-weight:900;letter-spacing:1px;line-height:1.2}
|
||
#gcHome.gv4 .g4-s-d{margin-top:6px;font-size:13px;line-height:1.5;color:#8E7068}
|
||
#gcHome.gv4 .g4-s-r{display:flex;align-items:center;gap:8px;margin-top:16px}
|
||
#gcHome.gv4 .g4-s-r>span{display:flex;align-items:baseline;gap:2px;padding:6px 10px;border-radius:12px;background:#fff;box-shadow:0 4px 10px -6px rgba(244,89,60,.5)}
|
||
#gcHome.gv4 .g4-s-r b{font-size:20px;font-weight:900;color:#F4593C;font-variant-numeric:tabular-nums}
|
||
#gcHome.gv4 .g4-s-r i{font-style:normal;font-size:11px;font-weight:700;color:#B0756A}
|
||
#gcHome.gv4 .g4-s-r em{font-style:normal;font-weight:900;color:#E9A090}
|
||
#gcHome.gv4 .g4-s-n{margin-top:6px;font-size:11px;color:#B0948D}
|
||
#gcHome.gv4 .g4-s-go{margin-top:auto;height:34px;padding:0 18px;border-radius:99px;display:flex;align-items:center;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,#FF8A5B,#F4593C);box-shadow:0 8px 16px -8px #F4593C}
|
||
#gcHome.gv4 .g4-s-avs{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
|
||
#gcHome.gv4 .g4-s-avs{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;width:120px}
|
||
#gcHome.gv4 .g4-s-avs img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-6px}
|
||
#gcHome.gv4 .g4-s-avs i{width:100%;text-align:right;font-style:normal;font-size:11px;color:#B0948D;white-space:nowrap}
|
||
|
||
/* 右侧小栏 */
|
||
#gcHome.gv4 .g4-rail{flex:none;width:34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding-bottom:2px}
|
||
#gcHome.gv4 .g4-pg{padding-bottom:6px;display:flex;flex-direction:column;align-items:center;line-height:1;color:#C9AAA2;font-variant-numeric:tabular-nums}
|
||
#gcHome.gv4 .g4-pg b{font-size:24px;font-weight:900;color:#2A1E1E}
|
||
#gcHome.gv4 .g4-pg i{margin-top:4px;font-style:normal;font-size:12px;font-weight:700}
|
||
#gcHome.gv4 .g4-arr{width:34px;height:34px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 0 2px;font-size:22px;line-height:1;font-weight:700;background:#fff;color:#D9466A;box-shadow:0 4px 12px -4px rgba(190,110,120,.4)}
|
||
#gcHome.gv4 .g4-arr.next{background:linear-gradient(135deg,#FF8A9E,#F2627E);color:#fff}
|
||
#gcHome.gv4 .g4-arr:disabled{opacity:.4}
|
||
#gcHome.gv4 .g4-arr:active{transform:scale(.92)}
|
||
|
||
/* 话题入口 + 底栏 */
|
||
#gcHome.gv4 .g4-tags{display:flex;align-items:center;gap:6px;margin:18px -26px 0;padding:0 26px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
|
||
#gcHome.gv4 .g4-tags::-webkit-scrollbar{display:none}
|
||
#gcHome.gv4 .g4-tags::after{content:"";flex:none;width:10px}
|
||
#gcHome.gv4 .g4-tl{flex:none;font-size:11px;font-weight:700;color:#B59A93}
|
||
#gcHome.gv4 .g4-tags button{flex:none;height:24px;padding:0 9px;border:0;border-radius:99px;background:#FFF0EC;font-size:11.5px;font-weight:700;color:#C2506A;white-space:nowrap}
|
||
#gcHome.gv4 .g4-tags button:active{background:#FFE0E6}
|
||
#gcHome.gv4 .g4-foot{display:flex;align-items:center;margin-top:10px}
|
||
#gcHome.gv4 .g4-all{border:0;background:none;padding:4px 0;font-size:12.5px;font-weight:800;color:#F2627E}
|
||
#gcHome.gv4 .g4-mark{margin-left:auto;font-size:11px;color:#C8BAB6}
|
||
|
||
@media (prefers-reduced-motion: reduce){
|
||
#gcHome.gv4 .g4-card,#gcHome.gv4 .g4-cat button{transition:none!important}
|
||
}
|
||
|
||
/* 11-03 首次进首页的「可以左右滑」提示：小手 + 气泡，压在卡堆中间偏右 */
|
||
#gcHome.gv4 .g4-hint{position:absolute;left:0;right:40px;top:50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;transform:translateY(-50%);transition:opacity .25s}
|
||
#gcHome.gv4 .g4-hint.off{opacity:0}
|
||
#gcHome.gv4 .g4-hand{width:46px;height:46px;margin-left:70px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(80,30,20,.28)}
|
||
#gcHome.gv4 .g4-hand svg{width:26px;height:26px;fill:none;stroke:#E2694A;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||
#gcHome.gv4 .g4-hint b{padding:6px 12px;border-radius:99px;background:rgba(42,30,30,.72);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.5px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
|
||
/* 11-03 右上角分类取消 → 一句小 slogan（靠右、轻量，左边一个小爱心点缀） */
|
||
#gcHome.gv4 .g4-slg{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#C08A86;letter-spacing:.5px;white-space:nowrap}
|
||
#gcHome.gv4 .g4-slg i{width:9px;height:9px;flex:none;background:#F2879C;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 018-2.8A4.5 4.5 0 0120 10c0 6-8 11-8 11z'/%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 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 018-2.8A4.5 4.5 0 0120 10c0 6-8 11-8 11z'/%3E%3C/svg%3E") center/contain no-repeat}
|
||
html.night #gcHome.gv4 .g4-slg{color:#B79A9E}
|