@import "tailwindcss"; @custom-variant dark (&:where(.dark, .dark *)); html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Deliberately no plain `body { background: ... }` rule here — it lives in layout.tsx's className instead (bg-white dark:bg-black). A plain CSS rule here would sit outside Tailwind's cascade layers and silently override every dark: utility on regardless of specificity, breaking dark mode for the whole page background. */ .scrollbar-none::-webkit-scrollbar { display: none; } .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; } /* Like button pop animation */ @keyframes like-pop { 0% { transform: scale(1); } 15% { transform: scale(0.8); } 40% { transform: scale(1.45); } 65% { transform: scale(0.9); } 85% { transform: scale(1.08); } 100% { transform: scale(1); } } .animate-like-pop { animation: like-pop 520ms cubic-bezier(0.18, 0.89, 0.32, 1.28); transform-origin: center; } /* Ring that expands outward from the heart at the moment of liking */ @keyframes like-ring { 0% { transform: scale(0.3); opacity: 0.75; border-width: 5px; } 100% { transform: scale(2.1); opacity: 0; border-width: 1px; } } .like-ring { animation: like-ring 500ms cubic-bezier(0.2, 0.7, 0.4, 1) forwards; } /* Small burst of particles behind the heart when liking */ @keyframes burst-particle { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } } .like-burst span { animation: burst-particle 500ms ease-out forwards; } /* Inline reply box sliding open under a comment */ @keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Scrolling "now playing" track title on a story, TikTok-style */ @keyframes marquee { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(calc(-100% + 220px)); } } /* ===== Animated reply-thread connectors ===== A soft base line with a light pulse travelling along it, plus a blinking midpoint dot. Ported from the supplied design. */ .thread-base { fill: none; stroke: rgba(140, 235, 255, .25); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(140, 235, 255, .35)); } .thread-pulse { fill: none; stroke: #8cf3ff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 12 88; filter: drop-shadow(0 0 6px #8cf3ff) drop-shadow(0 0 16px rgba(140, 243, 255, .55)); animation: thread-flow 2.6s linear infinite; } .thread-dot { fill: #eaffff; filter: drop-shadow(0 0 8px #8cf3ff); animation: thread-blink 2.6s ease-in-out infinite; } @keyframes thread-flow { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } } @keyframes thread-blink { 0%, 100% { opacity: .15 } 50% { opacity: .9 } } /* In light mode the cyan glow is too hot against white — dim it a little. */ @media (prefers-color-scheme: light) { .thread-base { stroke: rgba(56, 189, 248, .35); } .thread-pulse { stroke: #0ea5e9; filter: drop-shadow(0 0 5px rgba(14, 165, 233, .7)); } .thread-dot { fill: #0ea5e9; filter: drop-shadow(0 0 6px rgba(14, 165, 233, .8)); } } /* ===== Post action bar — icon animations ===== Ported from the supplied design. Icons are neutral gray by default; only the active state picks up color. The comment icon's dots always animate like someone typing. */ :root { /* Brand tokens, available everywhere. The admin panel used to be the only place these were defined, which left every primary button on the public site invisible. */ --primary: #e63946; --primary-hover: #d12b39; --primary-soft: #fde8ea; --success: #10b981; --warning: #f59e0b; --info: #3b82f6; --spring: cubic-bezier(.34, 1.56, .64, 1); } .pa-btn { position: relative; display: flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; padding: 6px 10px; border-radius: 9999px; color: #8f8f8f; transition: transform .15s, background .2s; } .pa-btn:hover { background: rgba(148, 163, 184, .14); } .pa-btn:active { transform: scale(.94); } .pa-btn svg { width: 24px; height: 24px; overflow: visible; } /* ---- LIKE ---- */ .pa-like .pa-stroke { fill: none; stroke: #8f8f8f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pa-like .pa-fill { fill: url(#gHeart); stroke: url(#gHeart); transform-box: fill-box; transform-origin: center; } .pa-like.liked { color: #ff3c6e; } .pa-like.liked .pa-fill { animation: pa-popIn .6s cubic-bezier(.25, 1.75, .45, .95) forwards, pa-heartbeat 2.4s ease-in-out 1.4s infinite; filter: drop-shadow(0 0 7px rgba(255, 60, 110, .65)); } @keyframes pa-popIn { 0% { transform: scale(0) rotate(20deg) } 55% { transform: scale(1.28) rotate(-6deg) } 75% { transform: scale(.94) } 100% { transform: scale(1) } } @keyframes pa-heartbeat { 0%, 100% { transform: scale(1) } 12% { transform: scale(1.12) } 24% { transform: scale(1) } 36% { transform: scale(1.07) } 48% { transform: scale(1) } } .pa-flash { position: absolute; inset: -11px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 120, 150, .55), transparent 70%); animation: pa-flashA .5s ease-out; } @keyframes pa-flashA { 0% { transform: scale(.2); opacity: 1 } 100% { transform: scale(1.7); opacity: 0 } } .pa-ring { position: absolute; border-radius: 50%; pointer-events: none; } .pa-r1 { inset: -4px; border: 2px solid rgba(255, 80, 120, .9); animation: pa-ringA .55s ease-out; } .pa-r2 { inset: -4px; border: 1.5px solid rgba(255, 170, 190, .7); animation: pa-ringA .65s .12s ease-out; } @keyframes pa-ringA { 0% { opacity: 1; transform: scale(.2) } 100% { opacity: 0; transform: scale(2) } } .pa-ray { position: absolute; left: 50%; top: 50%; width: 2.5px; height: 8px; border-radius: 2px; pointer-events: none; background: linear-gradient(#ffd0d6, #ff5a7a); opacity: 0; animation: pa-rayA .55s ease-out forwards; } @keyframes pa-rayA { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) translateY(-8px) scaleY(0) } 30% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) translateY(-13px) scaleY(1) } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) translateY(-23px) scaleY(.4) } } .pa-mini { position: absolute; left: 50%; top: 20%; pointer-events: none; color: #ff5a7a; font-size: 12px; animation: pa-miniA .95s ease-out forwards; } @keyframes pa-miniA { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4) } 20% { opacity: 1 } 100% { opacity: 0; transform: translate(calc(-50% + var(--mx)), -36px) scale(.95) rotate(var(--mrot)) } } /* ---- COMMENT ---- neutral gray, dots always typing */ .pa-comment .pa-bubble { fill: none; stroke: #8f8f8f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pa-comment .pa-dot { fill: #a9a9a9; stroke: none; transform-box: fill-box; transform-origin: center; animation: pa-tdot 1.1s ease-in-out infinite; } .pa-comment .pa-dot:nth-of-type(2) { animation-delay: .14s } .pa-comment .pa-dot:nth-of-type(3) { animation-delay: .28s } @keyframes pa-tdot { 0%, 100% { transform: translateY(0); opacity: .5 } 40% { transform: translateY(-2.5px); opacity: 1 } } .pa-comment.talking svg { animation: pa-talk .55s ease; } @keyframes pa-talk { 0%, 100% { transform: rotate(0) } 30% { transform: rotate(-12deg) scale(1.1) } 70% { transform: rotate(10deg) } } /* ---- REPOST ---- */ .pa-repost svg { stroke: #8f8f8f; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pa-repost.on { color: #2fd573; } .pa-repost.on svg { stroke: #2fd573; } .pa-repost.spin svg { animation: pa-spin .6s cubic-bezier(.34, 1.4, .64, 1); } @keyframes pa-spin { from { transform: rotate(0) } to { transform: rotate(360deg) } } /* ---- SAVE ---- */ .pa-bookmark .pa-stroke { fill: none; stroke: #8f8f8f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pa-bookmark .pa-fill { fill: url(#gMark); stroke: url(#gMark); transform-box: fill-box; transform-origin: center; } .pa-bookmark.saved { color: #933cf0; } .pa-bookmark.saved svg { filter: drop-shadow(0 0 7px rgba(147, 60, 240, .6)); } .pa-bookmark.savepop svg { animation: pa-stamp .6s cubic-bezier(.3, 1.6, .4, 1); } @keyframes pa-stamp { 0% { transform: scale(1) } 30% { transform: scale(1.3) rotate(-8deg) } 55% { transform: scale(.9) rotate(4deg) } 75% { transform: scale(1.08) } 100% { transform: scale(1) } } .pa-bookmark.unpop svg { animation: pa-unshrink .4s ease; } @keyframes pa-unshrink { 0% { transform: scale(1) } 40% { transform: scale(.65) } 100% { transform: scale(1) } } .pa-bring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(147, 60, 240, .9); pointer-events: none; animation: pa-ringA .55s ease-out; } /* ---- LIKER STACK ---- */ .pa-wav { animation: pa-avin .5s cubic-bezier(.3, 1.8, .4, 1) both; transition: margin .25s, transform .25s; } @keyframes pa-avin { from { transform: scale(0) } to { transform: scale(1) } } .pa-wholiked:hover .pa-wav { margin-left: -2px; } .pa-likefloat { position: absolute; top: -6px; color: #ff5a7a; font-size: 11px; pointer-events: none; animation: pa-lf 1s ease-out forwards; } @keyframes pa-lf { to { transform: translateY(-22px); opacity: 0 } } /* ---- EDITED ---- */ .pa-edited { display: flex; gap: 5px; align-items: center; font-size: 12.5px; animation: pa-writeIn .9s ease .5s both; } @keyframes pa-writeIn { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 -5% 0 0) } } .pa-pencil { width: 12px; height: 12px; stroke: #8f8f8f; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: pa-pencilWig 6s ease-in-out 2s infinite; } @keyframes pa-pencilWig { 0%, 86%, 100% { transform: rotate(0) } 90% { transform: rotate(-14deg) } 94% { transform: rotate(10deg) } } .pa-etxt { background: linear-gradient(90deg, #9a9a9a 42%, #fff 50%, #9a9a9a 58%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pa-shine 5.5s linear 1.5s infinite; } @keyframes pa-shine { 0% { background-position: 130% 0 } 100% { background-position: -130% 0 } } /* ---- COMMENT PILL ---- */ .pa-pill { background: #f3f4f6 !important; border-radius: 14px !important; padding: 5px 11px !important; } .dark .pa-pill { background: #1a1a1a !important; } .pa-pill.in { animation: pa-pin .45s var(--spring); } .pa-pill.out { animation: pa-pout .38s ease forwards; } @keyframes pa-pin { from { opacity: 0; transform: translateY(12px) scale(.94) } to { opacity: 1; transform: none } } @keyframes pa-pout { to { opacity: 0; transform: translateY(-12px) scale(.96) } } /* ===== Story ring frames ===== Animated rings for the story avatar. Each is pure CSS — a rotating conic gradient plus, on some, an RGB-split fringe and irregular slice glitch. The three layers deliberately run at different speeds so the effect never looks like a synced loop. */ .sf { position: relative; display: block; border-radius: 9999px; padding: 3px; isolation: isolate; } .sf::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; animation: sf-spin 3s linear infinite; } .sf > * { position: relative; z-index: 1; } @keyframes sf-spin { to { transform: rotate(360deg) } } @keyframes sf-spin-slow { to { transform: rotate(360deg) } } @keyframes sf-breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.06) } } @keyframes sf-flicker { 0%, 100% { opacity: 1 } 45% { opacity: .78 } 55% { opacity: 1 } 70% { opacity: .85 } } /* Chromatic fringe — two offset copies of the ring in R and C */ .sf-rgb::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; background: inherit; filter: blur(1px); animation: sf-split 1.4s steps(2, end) infinite; } @keyframes sf-split { 0%, 100% { transform: translate(0, 0); opacity: .55 } 25% { transform: translate(-2px, 1px); opacity: .8 } 50% { transform: translate(2px, -1px); opacity: .5 } 75% { transform: translate(-1px, -2px); opacity: .75 } } /* Irregular horizontal band displacement */ .sf-glitch > * { animation: sf-slice 3.7s steps(1, end) infinite; } @keyframes sf-slice { 0%, 92%, 100% { clip-path: none; transform: translateX(0) } 93% { clip-path: inset(22% 0 61% 0); transform: translateX(-3px) } 94% { clip-path: none; transform: translateX(0) } 96% { clip-path: inset(58% 0 24% 0); transform: translateX(3px) } 97% { clip-path: none; transform: translateX(0) } } /* 1. Neon Pulse */ .sf-neon::before { background: conic-gradient(#ff6a00, #ff2d95, #a12bff, #2de2ff, #6aff6a, #ff6a00); } .sf-neon { animation: sf-breathe 2.6s ease-in-out infinite; } /* 2. Glitch */ .sf-glitchframe::before { background: conic-gradient(#ff2d95, #2de2ff, #a12bff, #ff2d95); animation: sf-spin 1.8s linear infinite; } /* 3. Aurora */ .sf-aurora::before { background: conic-gradient(#43e97b, #38f9d7, #4facfe, #a56bff, #43e97b); filter: blur(2px) saturate(1.3); animation: sf-spin 7s linear infinite; } /* 4. VHS */ .sf-vhs::before { background: conic-gradient(#ff004d, #00e5ff, #ff004d); animation: sf-spin 2.4s linear infinite; } .sf-vhs::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); animation: sf-roll 4s linear infinite; } @keyframes sf-roll { to { background-position: 0 12px } } /* 5. Holographic */ .sf-holo::before { background: conic-gradient(#fff, #ffd6f6, #b8f2ff, #d9c6ff, #fff5cc, #fff); animation: sf-spin 4s linear infinite; } .sf-holo::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%); background-size: 250% 100%; animation: sf-sheen 3.2s ease-in-out infinite; } @keyframes sf-sheen { 0% { background-position: 140% 0 } 100% { background-position: -140% 0 } } /* 6. Ember */ .sf-ember::before { background: conic-gradient(#ff3d00, #ff9100, #ffd600, #ff6d00, #ff3d00); animation: sf-spin 2.2s linear infinite, sf-flicker 900ms ease-in-out infinite; } /* 7. Electric */ .sf-electric::before { background: conic-gradient(#eaffff, #2de2ff, #0066ff, #eaffff, #2de2ff); animation: sf-spin 1.2s linear infinite, sf-zap 2.4s steps(1, end) infinite; } @keyframes sf-zap { 0%, 88%, 100% { filter: brightness(1) } 90% { filter: brightness(2.2) } 92% { filter: brightness(1) } 95% { filter: brightness(1.9) } } /* 8. Sunset */ .sf-sunset::before { background: conic-gradient(#ff9a3c, #ff4e8a, #a24bcf, #ff9a3c); animation: sf-spin 5s linear infinite; } /* 9. Matrix */ .sf-matrix::before { background: conic-gradient(#00ff6a, #003b1a, #7dffb0, #00ff6a); animation: sf-spin 2.8s linear infinite; } .sf-matrix::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(0,255,106,.25) 0 1px, transparent 1px 4px); } /* 10. Candy */ .sf-candy::before { background: repeating-conic-gradient(#ff6ec7 0 12deg, #fff 12deg 24deg, #6ec7ff 24deg 36deg); animation: sf-spin 6s linear infinite; } /* Tendril crawling around a story ring */ @keyframes sr-travel { to { stroke-dashoffset: -1000 } } @keyframes rx-in { from { transform: rotateY(95deg) scale(.2) translateY(8px); opacity: 0 } to { transform: rotateY(0) scale(1) translateY(0); opacity: 1 } } @keyframes rx-pop { 0% { transform: scale(0) rotate(-180deg) } 60% { transform: scale(1.2) rotate(10deg) } 100% { transform: scale(1) rotate(0) } } @keyframes rx-beat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.18)} 30%{transform:scale(1)} 45%{transform:scale(1.1)} 60%{transform:scale(1)} } @keyframes rx-fireA { 0%,100%{transform:scale(1) rotate(-3deg)} 25%{transform:scale(1.12,.95) rotate(3deg)} 50%{transform:scale(.95,1.1) rotate(-2deg)} 75%{transform:scale(1.08,1.02) rotate(2deg)} } @keyframes rx-thumbA { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-3px) rotate(-6deg)} } @keyframes rx-laughA { 0%,100%{transform:rotate(0) scale(1)} 20%{transform:rotate(-8deg) scale(1.05)} 40%{transform:rotate(7deg)} 60%{transform:rotate(-5deg) scale(1.04)} 80%{transform:rotate(4deg)} } @keyframes rx-partyA { 0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-4px) rotate(-8deg)} 50%{transform:translateY(0)} 75%{transform:translateY(-4px) rotate(8deg)} } @keyframes rx-wowA { 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} } @keyframes rx-sadA { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(3px) rotate(-4deg)} } @keyframes rx-angryA { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-1px)} 75%{transform:translateX(1px)} } @keyframes rx-toast { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.85) } 15% { opacity: 1; transform: translate(-50%, 0) scale(1) } 75% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -12px) } } @keyframes rx-flashA { 0% { opacity: 0 } 30% { opacity: 1 } 100% { opacity: 0 } } @keyframes rx-bigA { 0% { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0 } 50% { transform: translate(-50%, -50%) scale(1.25) rotate(8deg); opacity: 1 } 100% { transform: translate(-50%, -140%) scale(.8) rotate(-6deg); opacity: 0 } }/* ===== Reactions ===== */ .rx-picker { position: absolute; bottom: calc(100% + 2px); left: 0; display: flex; gap: 4px; background: rgba(28,28,30,.96); backdrop-filter: blur(12px); padding: 7px 9px; border-radius: 9999px; margin-bottom: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.45); z-index: 40; } .rx-picker span { font-size: 26px; cursor: pointer; line-height: 1; display: block; transform-origin: bottom center; transition: transform .18s cubic-bezier(.3,1.6,.4,1); animation: rx-in .45s cubic-bezier(.3,1.6,.4,1) both; animation-delay: calc(var(--i) * .04s); } .rx-picker span:hover { transform: scale(1.45) translateY(-6px); } .rx-picker span.sel { filter: drop-shadow(0 0 6px currentColor); transform: scale(1.2); } @keyframes rx-in { from { transform: rotateY(95deg) scale(.2) translateY(8px); opacity: 0 } to { transform: rotateY(0) scale(1) translateY(0); opacity: 1 } }/* Chosen reaction shown on the action bar */ .rx-chip { font-size: 20px; line-height: 1; display: inline-block; animation: rx-pop .5s cubic-bezier(.3,1.8,.4,1); } @keyframes rx-pop { 0% { transform: scale(0) rotate(-180deg) } 60% { transform: scale(1.2) rotate(10deg) } 100% { transform: scale(1) rotate(0) } }.rx-heart { animation: rx-pop .5s cubic-bezier(.3,1.8,.4,1), rx-beat 1.3s ease-in-out .5s infinite; } .rx-fire { animation: rx-pop .5s cubic-bezier(.3,1.8,.4,1), rx-fireA 1.3s ease-in-out .5s infinite; } .rx-thumb { animation: rx-pop .5s cubic-bezier(.3,1.8,.4,1), rx-thumbA 1.6s ease-in-out .5s infinite; } .rx-laugh { animation: rx-pop .5s cubic-bezier(.3,1.8,.4,1), rx-laughA 1.5s ease-in-out .5s infinite; } .rx-party { animation: rx-pop .5s cubic-bezier(.3,1.8,.4,1), rx-partyA 1.6s ease-in-out .5s infinite; } .rx-wow { animation: rx-pop .5s cubic-bezier(.3,1.8,.4,1), rx-wowA 1.8s ease-in-out .5s infinite; } .rx-sad { animation: rx-pop .5s cubic-bezier(.3,1.8,.4,1), rx-sadA 2s ease-in-out .5s infinite; } .rx-angry { animation: rx-pop .5s cubic-bezier(.3,1.8,.4,1), rx-angryA .3s ease-in-out .5s infinite; } @keyframes rx-beat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.18)} 30%{transform:scale(1)} 45%{transform:scale(1.1)} 60%{transform:scale(1)} } @keyframes rx-fireA { 0%,100%{transform:scale(1) rotate(-3deg)} 25%{transform:scale(1.12,.95) rotate(3deg)} 50%{transform:scale(.95,1.1) rotate(-2deg)} 75%{transform:scale(1.08,1.02) rotate(2deg)} } @keyframes rx-thumbA { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-3px) rotate(-6deg)} } @keyframes rx-laughA { 0%,100%{transform:rotate(0) scale(1)} 20%{transform:rotate(-8deg) scale(1.05)} 40%{transform:rotate(7deg)} 60%{transform:rotate(-5deg) scale(1.04)} 80%{transform:rotate(4deg)} } @keyframes rx-partyA { 0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-4px) rotate(-8deg)} 50%{transform:translateY(0)} 75%{transform:translateY(-4px) rotate(8deg)} } @keyframes rx-wowA { 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} } @keyframes rx-sadA { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(3px) rotate(-4deg)} } @keyframes rx-angryA { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-1px)} 75%{transform:translateX(1px)} }/* Giant reaction burst over the media */ .rx-big { position: absolute; left: 50%; top: 50%; font-size: 110px; pointer-events: none; z-index: 8; filter: drop-shadow(0 14px 28px rgba(0,0,0,.5)); } .rx-flash { position: absolute; inset: 0; pointer-events: none; z-index: 7; } /* ===== Share sheet — 3D tilting tiles ===== */ .sh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; perspective: 700px; } .sh-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; border: 0; background: none; } .sh-ico { width: 56px; height: 56px; border-radius: 17px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; transform-style: preserve-3d; transition: transform .22s cubic-bezier(.3,1.5,.4,1), box-shadow .22s; box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28); } .sh-tile:hover .sh-ico { transform: translateZ(14px) rotateX(-14deg) rotateY(14deg) scale(1.07); box-shadow: 0 16px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4); } .sh-tile:active .sh-ico { transform: scale(.93); } .sh-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(140deg, rgba(255,255,255,.45), transparent 55%); pointer-events: none; } .sh-lbl { font-size: 11px; font-weight: 600; } .sh-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 80; background: #111; color: #fff; padding: 10px 18px; border-radius: 9999px; font-size: 13px; font-weight: 600; animation: rx-toast 1.8s ease forwards; } @keyframes rx-toast { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.85) } 15% { opacity: 1; transform: translate(-50%, 0) scale(1) } 75% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -12px) } } @keyframes rx-flashA { 0% { opacity: 0 } 30% { opacity: 1 } 100% { opacity: 0 } } @keyframes rx-bigA { 0% { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0 } 50% { transform: translate(-50%, -50%) scale(1.25) rotate(8deg); opacity: 1 } 100% { transform: translate(-50%, -140%) scale(.8) rotate(-6deg); opacity: 0 } } .pwrap.idle .ptrack { border-style: dashed; } .pwrap.idle .pcol:hover .ptrack { border-color: #38bdf8; box-shadow: 0 0 14px rgba(56,189,248,.18); } @keyframes psheen { 0%, 55% { transform: translateX(-100%) } 100% { transform: translateX(100%) } } @keyframes pghostA { 0%, 100% { height: 12% } 50% { height: 46% } } .pwrap.voted .pghost { opacity: 0 } .pwrap.voted .ptrack { border-style: solid } @keyframes handB { 0%,100% { transform: translateY(0) rotate(-8deg) } 50% { transform: translateY(-8px) rotate(6deg) } } @keyframes piconP { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } } .rx-picker::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* ===== Save button (ported from the supplied design) ===== */ .saveBtn { position: relative; } .saveBtn .icon-wrap { position: relative; width: 24px; height: 24px; display: block; transition: transform .15s; } .saveBtn:active .icon-wrap { transform: scale(.82); } .bookmark-i { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .bookmark-i * { stroke: #8f8f8f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; transform-origin: center; transition: stroke .2s, fill .2s; } /* The plain colour after the url() is an SVG paint fallback: if the gradient is ever missing the icon still shows, instead of disappearing entirely. */ .saveBtn.saved .bookmark-i * { stroke: url(#saveGrad) #7b2ff7; fill: url(#saveGrad) #7b2ff7; } .saveBtn.saved .bookmark-i { filter: drop-shadow(0 0 7px rgba(147,60,240,.6)); } .saveBtn.savepop .bookmark-i { animation: stampA .6s cubic-bezier(.3,1.6,.4,1); } @keyframes stampA { 0%{transform:scale(1)} 30%{transform:scale(1.3) rotate(-8deg)} 55%{transform:scale(.9) rotate(4deg)} 75%{transform:scale(1.08)} 100%{transform:scale(1)} } .saveBtn.unpop .bookmark-i { animation: unShrinkA .4s ease; } @keyframes unShrinkA { 0%{transform:scale(1)} 40%{transform:scale(.65)} 100%{transform:scale(1)} } .saveBtn .bring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(147,60,240,.9); opacity: 0; transform: scale(.2); pointer-events: none; animation: bringA .55s ease-out; } @keyframes bringA { 0%{opacity:1;transform:scale(.2)} 100%{opacity:0;transform:scale(2)} } .saveBtn .toast { position: absolute; bottom: calc(100% + 8px); left: 50%; background: #1d1d1d; border: 1px solid #333; color: #ddd; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; pointer-events: none; white-space: nowrap; z-index: 20; animation: toastA 1.2s ease forwards; } @keyframes toastA { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8) } 15% { opacity: 1; transform: translate(-50%, 0) scale(1) } 70% { opacity: 1; transform: translate(-50%, 0) } 100% { opacity: 0; transform: translate(-50%, -10px) } } /* ===== Poll — vertical stats chart (ported from the reference) ===== */ .picon { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #2fd573, #0ba864); display: flex; align-items: center; justify-content: center; flex: none; animation: piconP 2.2s ease-in-out infinite; box-shadow: 0 0 12px rgba(47, 213, 115, .35); } @keyframes piconP { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.12) } } .picon svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ptotal { color: #777; font-size: 10.5px; margin-left: auto; flex: none; } .pwrap { position: relative; } /* ===== Poll — vertical stats chart ===== */ .pchart { display: flex; gap: 12px; padding-top: 8px; justify-content: center; height: 200px; max-width: 100%; overflow-x: auto; padding-bottom: 6px; } /* Columns shrink to fit rather than overflowing the card. */ .pchart .pcol { flex: 1 1 0; min-width: 34px; max-width: 58px; }.pcol { max-width: 58px; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; position: relative; transition: transform .2s; min-width: 34px; background: none; border: 0; padding: 0; } .pcol:hover { transform: translateY(-3px); } .ptrack { width: 100%; flex: 1; background: #f2f3f5; border: 1px solid #e3e5e8; border-radius: 9px; position: relative; overflow: hidden; transition: border-color .3s, box-shadow .2s, background .3s; } .dark .ptrack { background: #141414; border-color: #242424; } .pcol:hover .ptrack { border-color: #c3c7cc; } .dark .pcol:hover .ptrack { border-color: #3a3a3a; } .idle .ptrack { border: 1px dashed #cfd3d8; background: linear-gradient(180deg, #f6f7f9, #eef0f3); } .dark .idle .ptrack { border-color: #34343a; background: linear-gradient(180deg, #121216, #0d0d10); } .idle .pcol:hover .ptrack { border-color: #38bdf8aa; box-shadow: 0 0 12px rgba(56, 189, 248, .18); }.ptrack::before { content: ''; position: absolute; inset: 0; border-radius: 11px; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%); transform: translateX(-100%); animation: psheen2 2.8s ease-in-out infinite; } .dark .ptrack::before { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%); } @keyframes psheen2 { 0%, 55% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }.pghost { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 11px; opacity: .22; animation: ghost 2.4s ease-in-out infinite; transition: opacity .5s; } @keyframes ghost { 0%, 100% { height: 12% } 50% { height: 46% } }.pcol:nth-child(2) .pghost { animation-delay: .4s; animation-duration: 2s; } .pcol:nth-child(3) .pghost { animation-delay: .7s; animation-duration: 2.6s; } .pcol:nth-child(4) .pghost { animation-delay: .2s; animation-duration: 1.9s; } .voted .pghost { opacity: 0 } .voted .ptrack { border-style: solid; }.chartHint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; transition: opacity .4s, transform .4s; color: #0284c7; font-size: 11px; font-weight: 700; } .dark .chartHint { color: #bfe9ff; text-shadow: 0 0 12px rgba(140, 243, 255, .4); } .chartHint .hand { font-size: 18px; animation: handB 1.2s ease-in-out infinite; } @keyframes handB { 0%, 100% { transform: translateY(0) rotate(-8deg) } 50% { transform: translateY(-7px) rotate(6deg) } }.pwrap.voted .chartHint { opacity: 0; transform: scale(.8); } .pfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; border-radius: 11px; overflow: hidden; transition: height 1s cubic-bezier(.2, .9, .3, 1); opacity: .92; } .pfill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 45%); } .ppct { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0%; color: #0284c7; font-size: 10px; font-weight: 800; z-index: 2; white-space: nowrap; transition: bottom 1s cubic-bezier(.2, .9, .3, 1); text-shadow: 0 1px 3px rgba(255,255,255,.9); } .dark .ppct { color: #eaffff; text-shadow: 0 1px 4px rgba(0,0,0,.8), 0 0 8px rgba(140,243,255,.6); } .plabel { font-size: 16px; line-height: 1; } .pname2 { font-size: 9.5px; font-weight: 600; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6b7280; } .pcol.win .ptrack { border-color: #38bdf8aa !important; box-shadow: 0 0 14px rgba(56, 189, 248, .25); } .pcol.win .plabel::after { content: ' ✓'; color: #16a34a; font-size: 11px; } .pcol.lead .plabel::before { content: '👑 '; font-size: 11px; } .phint { color: #9ca3af; font-size: 10px; margin-top: 12px; text-align: center; } /* Animated connector in the likers popup: avatar ---> emoji */ .lk-arrow { position: relative; display: flex; align-items: center; width: 46px; height: 12px; flex: none; overflow: hidden; } .lk-dash { position: absolute; left: 0; right: 10px; top: 50%; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, #9ca3af 0 5px, transparent 5px 10px); background-size: 10px 2px; animation: lkFlow .6s linear infinite; } .dark .lk-dash { background-image: repeating-linear-gradient(90deg, #6b7280 0 5px, transparent 5px 10px); } @keyframes lkFlow { to { background-position: 10px 0 } } .lk-head { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 9px; color: #9ca3af; animation: lkNudge 1.2s ease-in-out infinite; } .dark .lk-head { color: #6b7280; } @keyframes lkNudge { 0%, 100% { transform: translate(0, -50%) } 50% { transform: translate(3px, -50%) } } .lk-emoji { font-size: 20px; line-height: 1; flex: none; animation: lkPop .45s cubic-bezier(.3, 1.7, .4, 1) both; } @keyframes lkPop { from { transform: scale(0) rotate(-25deg) } to { transform: scale(1) rotate(0) } } /* Follow button — same stamp/ring/toast language as Save */ .followpop { animation: stampA .6s cubic-bezier(.3, 1.6, .4, 1); } .followring { position: absolute; inset: -4px; border-radius: 9999px; border: 2px solid rgba(147, 60, 240, .9); opacity: 0; transform: scale(.2); pointer-events: none; animation: bringA .55s ease-out; } .followtoast { position: absolute; bottom: calc(100% + 8px); left: 50%; background: #1d1d1d; border: 1px solid #333; color: #ddd; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; pointer-events: none; white-space: nowrap; z-index: 20; animation: toastA 1.2s ease forwards; } /* ===== Feed sections: People you may know + Reels (ported) ===== */ .fs-sec { margin-top: 4px; padding: 14px 16px 4px; border-top: 1px solid #e5e7eb; } .dark .fs-sec { border-color: #1c1c1c; } .fs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .fs-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; position: relative; } .fs-icon svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fs-icon.reels { background: linear-gradient(135deg, #ff3cac, #7b2ff7); animation: iconWig 2.6s ease-in-out infinite; box-shadow: 0 0 12px rgba(255, 60, 172, .35); } @keyframes iconWig { 0%,100% { transform: rotate(0) } 20% { transform: rotate(-8deg) scale(1.06) } 40% { transform: rotate(6deg) } 60% { transform: rotate(0) } } .fs-icon.friends { background: linear-gradient(135deg, #00c6ff, #0072ff); animation: iconPulse 2.2s ease-in-out infinite; box-shadow: 0 0 12px rgba(0, 198, 255, .35); } @keyframes iconPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } } .fs-icon::after { content: ''; position: absolute; inset: -3px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.35); opacity: 0; animation: iconRing 2.6s ease-out infinite; } @keyframes iconRing { 0% { transform: scale(.8); opacity: .7 } 70% { transform: scale(1.25); opacity: 0 } 100% { opacity: 0 } } .fs-title { font-size: 16px; font-weight: 800; } .fs-sub { color: #777; font-size: 11.5px; } .fs-nav { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #d4d4d4; background: #fafafa; color: #666; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all .2s; flex: none; } .dark .fs-nav { border-color: #333; background: #161616; color: #bbb; } .fs-nav:hover { color: #0ea5e9; border-color: #0ea5e955; box-shadow: 0 0 12px rgba(56,189,248,.25); } .fs-row { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: none; scroll-behavior: smooth; } .fs-row::-webkit-scrollbar { display: none; } .fs-person { flex: 0 0 calc((100% - 48px) / 5); background: #fafafa; border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .25s, border-color .25s, box-shadow .25s; min-width: 0; position: relative; } .dark .fs-person { background: #111; border-color: #222; } .fs-person:hover { transform: translateY(-5px); border-color: #cfcfcf; box-shadow: 0 12px 30px rgba(0,0,0,.16); } .dark .fs-person:hover { border-color: #3a3a3a; box-shadow: 0 12px 30px rgba(0,0,0,.5); } .fs-av { width: 54px; height: 54px; border-radius: 50%; position: relative; flex: none; } .fs-av::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; background: conic-gradient(from 0deg, #ff3cac, #7b2ff7, #00e5ff, #ff3cac) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fsPulse 2.4s ease-in-out infinite; } @keyframes fsPulse { 0%,100% { opacity: .5; transform: scale(1) } 50% { opacity: 1; transform: scale(1.05) } } .fs-name { font-size: 12px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-mut { color: #777; font-size: 10.5px; } .fs-add { position: relative; margin-top: 2px; border: none; border-radius: 999px; background: linear-gradient(90deg, #7b2ff7, #d43cae); color: #fff; font-size: 11px; font-weight: 700; padding: 7px 12px; cursor: pointer; transition: transform .2s, filter .2s; white-space: nowrap; } .fs-add:hover { transform: scale(1.06); filter: brightness(1.15); } .fs-add.done { background: #eafaec; color: #16a34a; border: 1px solid #2fd57355; } .dark .fs-add.done { background: #1d2b1d; color: #7dff8a; } .fs-reel { flex: 0 0 calc((100% - 48px) / 5); aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; position: relative; cursor: pointer; background-size: 200% 200%; animation: gradMove 8s ease infinite; transition: transform .25s, box-shadow .25s; border: 1px solid #e5e7eb; min-width: 0; display: block; } .dark .fs-reel { border-color: #262626; } @keyframes gradMove { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } } .fs-reel:hover { transform: scale(1.05) rotate(-1deg); box-shadow: 0 14px 34px rgba(0,0,0,.35); } .fs-remoji { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); font-size: 40px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); animation: fsFloaty 3.5s ease-in-out infinite; } @keyframes fsFloaty { 0%,100% { transform: translate(-50%,-54%) } 50% { transform: translate(-50%,-46%) } } .fs-play { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; opacity: .9; transition: transform .2s; pointer-events: none; } .fs-reel:hover .fs-play { transform: translate(-50%,-50%) scale(1.15); } .fs-views { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px; backdrop-filter: blur(4px); } .fs-dur { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); color: #ddd; font-size: 9px; font-weight: 600; padding: 3px 6px; border-radius: 999px; } .fs-user { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 18px 8px 8px; background: linear-gradient(transparent, rgba(0,0,0,.8)); } .fs-uname { color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 700px) { .fs-person, .fs-reel { flex-basis: calc((100% - 24px) / 3) } } /* ===== Firework burst (Save / Add Friend) ===== */ .fw-flash { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border-radius: 50%; pointer-events: none; z-index: 3; } .fw-ring { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; pointer-events: none; z-index: 3; } .fw-star { position: absolute; pointer-events: none; z-index: 4; transform: translate(-50%,-50%); animation: fwStar .9s ease forwards; } @keyframes fwStar { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(0) } 40% { opacity: 1; transform: translate(-50%,-50%) scale(1.2) rotate(90deg) } 100% { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(180deg) } } /* Particles must escape the button's rounded box */ .fs-add, .saveBtn .icon-wrap { overflow: visible; }.pt { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; z-index: 3; } /* ===== Reels: create button + search ===== */ .reel-create-btn { position: relative; width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #ff3cac, #7b2ff7); box-shadow: 0 6px 18px rgba(255,60,172,.45), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .25s cubic-bezier(.3,1.6,.4,1); } .reel-create:hover .reel-create-btn { transform: scale(1.12) rotate(90deg); } .reel-create:active .reel-create-btn { transform: scale(.92); } /* Pulsing halo so the button reads as the primary action */ .reel-create-btn::after { content: ''; position: absolute; inset: -5px; border-radius: 18px; border: 2px solid rgba(255,60,172,.55); opacity: 0; animation: reelHalo 2.4s ease-out infinite; } @keyframes reelHalo { 0% { transform: scale(.85); opacity: .8 } 70% { transform: scale(1.3); opacity: 0 } 100% { opacity: 0 } } /* Offset copies behind, giving the TikTok "stacked note" look */ .reel-create-btn::before { content: ''; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(135deg, #00e5ff, #2fd573); z-index: -1; transform: translateX(-4px); opacity: .85; } .tt-search { position: relative; } .tt-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, 88vw); background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.18); z-index: 60; animation: ttIn .28s cubic-bezier(.3,1.5,.4,1); } .dark .tt-panel { background: #101010; border-color: #232323; box-shadow: 0 24px 60px rgba(0,0,0,.7); } @keyframes ttIn { from { opacity: 0; transform: translateY(-8px) scale(.97) } to { opacity: 1; transform: none } } .tt-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; background: #f3f4f6 !important; color: #374151; transition: background .18s; } .dark .tt-chip { background: #1a1a1a !important; color: #d4d4d8; } .tt-chip:hover { background: #e5e7eb !important; } .dark .tt-chip:hover { background: #262626 !important; } .tt-rank { width: 20px; font-size: 13px; font-weight: 900; text-align: center; flex: none; } .tt-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 10px; cursor: pointer; transition: background .18s; } .tt-row:hover { background: rgba(148,163,184,.14); } /* ===== Create Post modal (ported from the reference) ===== */ .cp-modal { animation: cpIn .45s cubic-bezier(.2,1.2,.3,1); } @keyframes cpIn { from { opacity: 0; transform: translateY(34px) scale(.94) } to { opacity: 1; transform: none } } .cp-title { position: relative; font-weight: 800; font-size: 15px; } .cp-title::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -7px; width: 38px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #8b3cf0, #ff3cac); box-shadow: 0 0 10px rgba(139,60,240,.7); } .cp-post { border: none; border-radius: 999px; padding: 8px 20px; background: #e5e5e5; color: #999; font-weight: 800; font-size: 13px; cursor: not-allowed; transition: all .25s; } .dark .cp-post { background: #2a2a2a; color: #666; } .cp-post.ready { background: linear-gradient(90deg, #7b2ff7, #d43cae); color: #fff; cursor: pointer; animation: cpReady 1.6s ease-in-out infinite; } @keyframes cpReady { 0%,100% { box-shadow: 0 6px 18px rgba(123,47,247,.4) } 50% { box-shadow: 0 6px 26px rgba(212,58,202,.75) } } .cp-aud { background: #f3f4f6; border: 1px solid #e5e7eb; color: #666; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; cursor: pointer; transition: all .2s; } .dark .cp-aud { background: #1a1a1a; border-color: #2a2a2a; color: #999; } .cp-aud:hover { filter: brightness(.97); } .cp-aud.pop { animation: cpAud .3s cubic-bezier(.3,1.6,.4,1); } @keyframes cpAud { 0% { transform: scale(.8) } 100% { transform: scale(1) } } .cp-count { font-size: 11px; font-weight: 700; color: #9ca3af; transition: color .2s; } .cp-count.warn { color: #f5b400 } .cp-count.max { color: #ff4d4d } .cp-chip { display: flex; align-items: center; gap: 10px; background: #f7f7f8; border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; animation: cpChip .35s cubic-bezier(.3,1.5,.4,1); } .dark .cp-chip { background: #161616; border-color: #2a2a2a; } @keyframes cpChip { from { opacity: 0; transform: scale(.85) translateY(8px) } to { opacity: 1; transform: none } } .cp-eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; } .cp-eq i { width: 3px; background: #2fd573; border-radius: 2px; animation: cpEq 1s ease-in-out infinite; } .cp-eq i:nth-child(1) { height: 60% } .cp-eq i:nth-child(2) { animation-delay: .2s; height: 100% } .cp-eq i:nth-child(3) { animation-delay: .4s; height: 50% } @keyframes cpEq { 0%,100% { transform: scaleY(.4) } 50% { transform: scaleY(1) } } .cp-tool { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; color: #888; font-size: 9.5px; font-weight: 700; transition: transform .2s, color .2s; animation: cpTool .4s both; } .cp-tool:nth-child(1) { animation-delay: .05s } .cp-tool:nth-child(2) { animation-delay: .1s } .cp-tool:nth-child(3) { animation-delay: .15s } .cp-tool:nth-child(4) { animation-delay: .2s } .cp-tool:nth-child(5) { animation-delay: .25s } .cp-tool:nth-child(6) { animation-delay: .3s } @keyframes cpTool { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } .cp-tib { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: #f3f4f6; border: 1px solid #e5e7eb; transition: all .2s; } .dark .cp-tib { background: #1a1a1a; border-color: #2a2a2a; } .cp-tool:hover { transform: translateY(-3px); color: #444; } .dark .cp-tool:hover { color: #ddd; } .cp-tool:hover .cp-tib { border-color: var(--c); box-shadow: 0 0 14px var(--g); transform: scale(1.06); } .cp-tool:active .cp-tib { transform: scale(.9); } .cp-tool.on .cp-tib { border-color: var(--c); box-shadow: 0 0 14px var(--g); } .cp-opt { width: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 8px; outline: none; transition: border-color .2s; } .dark .cp-opt { background: #101010; border-color: #262626; color: #eee; } .cp-opt:focus { border-color: #7b2ff7; } .cp-addopt { background: none; border: 1px dashed #d4d4d4; color: #888; font-size: 11.5px; font-weight: 700; padding: 7px 12px; border-radius: 10px; cursor: pointer; transition: all .2s; } .dark .cp-addopt { border-color: #333; } .cp-addopt:hover { color: #0ea5e9; border-color: #0ea5e955; } .cp-emoji span { font-size: 20px; cursor: pointer; padding: 4px 6px; border-radius: 10px; transition: transform .15s; display: inline-block; } .cp-emoji span:hover { transform: scale(1.3) rotate(-8deg); background: rgba(148,163,184,.18); } .cp-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-60px); background: #1d1d1d; border: 1px solid #333; color: #7dff8a; font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 999px; z-index: 99; transition: transform .4s cubic-bezier(.3,1.4,.4,1); } .cp-toast.show { transform: translateX(-50%) translateY(0); } .pvoters { display: flex; align-items: center; margin-bottom: 4px; height: 16px; } .pvoters > span { border-radius: 999px; box-shadow: 0 0 0 2px #fff; } .dark .pvoters > span { box-shadow: 0 0 0 2px #000; } .pvmore { font-size: 9px; font-weight: 800; color: #6b7280; margin-left: 3px; } /* Percentage shown before you've voted, so results are visible either way */ .ppct-pre { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: #0284c7; z-index: 2; } .dark .ppct-pre { color: #8cf3ff; text-shadow: 0 0 8px rgba(140,243,255,.5); } /* ===== Neon storm avatar effect (clipped inside the frame) ===== */ .ns { position: relative; display: inline-block; } .ns-clip { position: relative; display: block; border-radius: 50%; overflow: hidden; isolation: isolate; } .ns-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; } /* Magenta wisps — broad, soft, sweeping */ .ns-wisp-glow, .ns-wisp { fill: none; stroke-linecap: round; transform-origin: 50% 50%; animation: nsOrbit linear infinite; } .ns-wisp-glow { stroke: #e838c8; opacity: .22; filter: blur(2px); } .ns-wisp { stroke: #ff6ae6; opacity: .7; filter: blur(.5px) drop-shadow(0 0 3px rgba(255,60,220,.9)); } @keyframes nsOrbit { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } /* Green lightning — three stacked strokes for a hot core inside a bloom */ .ns-bolt-glow, .ns-bolt, .ns-bolt-core { fill: none; stroke-linejoin: miter; stroke-linecap: butt; animation: nsFlicker ease-in-out infinite; } .ns-bolt-glow { stroke: #4dff2a; stroke-width: 3.2; opacity: .4; filter: blur(1.8px); } .ns-bolt { stroke: #7bff4d; stroke-width: 1.3; filter: drop-shadow(0 0 2px #4dff2a) drop-shadow(0 0 5px rgba(77,255,42,.9)); } .ns-bolt-core { stroke: #f2fff0; stroke-width: .5; opacity: .95; } @keyframes nsFlicker { 0% { opacity: .25 } 8% { opacity: 1 } 16% { opacity: .4 } 26% { opacity: 1 } 44% { opacity: .3 } 60% { opacity: .95 } 76% { opacity: .35 } 90% { opacity: .85 } 100% { opacity: .25 } } /* Selected conversation — rotating rainbow border. The element itself must NOT rotate: it's a wide rectangle, so rotating it sweeps the border off the row. Instead the conic gradient's own angle is animated, which keeps the frame locked to the row's shape. */ @property --conv-ang { syntax: ""; initial-value: 0deg; inherits: false; } .conv-sel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--conv-ang), #ff6b35, #ff1744, #d500f9, #00e5ff, #76ff03, #ff6b35 ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: convRot 3s linear infinite; pointer-events: none; } @keyframes convRot { to { --conv-ang: 360deg } } /* Soft bloom behind the row */ .conv-sel::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; background: radial-gradient(circle at 50% 50%, rgba(213,0,249,.18), transparent 70%); filter: blur(7px); pointer-events: none; } /* ===== Messages — two-pane layout (ported from the reference) ===== */ .mg-app { display: flex; width: 100%; height: 100vh; max-height: none; border: 0; border-radius: 0; overflow: hidden; animation: mgIn .6s cubic-bezier(.2,.9,.3,1); background: #fff; } .dark .mg-app { background: #0c0c0c; border-color: #1f1f1f; } @keyframes mgIn { from { opacity: 0; transform: translateY(20px) scale(.97) } to { opacity: 1; transform: none } } .mg-side { width: 340px; flex: none; border-right: 1px solid #eee; display: flex; flex-direction: column; background: #fafafa; } .dark .mg-side { border-color: #1c1c1c; background: #0a0a0a; } .mg-badge { background: #f0f0f0; border: 1px solid #e5e7eb; color: #0284c7; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; } .dark .mg-badge { background: #1a1a1a; border-color: #2a2a2a; color: #8cf3ff; } .mg-new { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: none; background: linear-gradient(135deg, #7b2ff7, #d43cae); color: #fff; font-size: 16px; cursor: pointer; transition: transform .25s; box-shadow: 0 4px 14px rgba(123,47,247,.4); display: flex; align-items: center; justify-content: center; } .mg-new:hover { transform: rotate(90deg) scale(1.1); } .mg-search { margin: 0 16px 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; transition: border-color .2s; } .dark .mg-search { background: #141414; border-color: #242424; } .mg-search:focus-within { border-color: #7b2ff788; } .mg-search input { flex: 1; background: none; border: none; outline: none; font-size: 12.5px; min-width: 0; } .mg-convs { flex: 1; overflow-y: auto; padding: 6px 10px; } .mg-dot { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #2fd573; border: 2.5px solid #fafafa; } .dark .mg-dot { border-color: #0a0a0a; } .mg-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #2fd573; animation: mgPulse 1.6s ease-out infinite; } @keyframes mgPulse { 0% { transform: scale(.7); opacity: 1 } 100% { transform: scale(1.9); opacity: 0 } } @keyframes mgUn { 0%,100% { box-shadow: 0 0 0 0 rgba(225,29,72,.5) } 50% { box-shadow: 0 0 0 6px rgba(225,29,72,0) } } .mg-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; } .mg-hav { position: relative; } @keyframes mgSpin { to { transform: rotate(360deg) } } .mg-act { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; color: #666; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; } .dark .mg-act { border-color: #2a2a2a; background: #161616; color: #bbb; } .mg-act:hover { transform: translateY(-2px) scale(1.08); border-color: #7b2ff788; color: #7b2ff7; box-shadow: 0 0 12px rgba(123,47,247,.3); } .mg-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: radial-gradient(800px 300px at 85% -10%, rgba(123,47,247,.06), transparent); } .mg-day { align-self: center; background: #f3f4f6; border: 1px solid #e5e7eb; color: #888; font-size: 10px; font-weight: 700; padding: 4px 12px; border-radius: 999px; } .dark .mg-day { background: #151515; border-color: #242424; } .mg-msg { max-width: 72%; margin-bottom: 4px; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; position: relative; cursor: pointer; transition: transform .15s; animation: mgMsg .45s cubic-bezier(.3,1.4,.4,1) both; } .mg-msg:active { transform: scale(.96); } @keyframes mgMsg { from { opacity: 0; transform: translateY(14px) scale(.85) } to { opacity: 1; transform: none } } .mg-msg.in { align-self: flex-start; background: #f0f0f2; border: 1px solid #e6e6e8; border-bottom-left-radius: 5px; } .dark .mg-msg.in { background: #1f1f22; border-color: #2a2a2e; color: #ececee; } .mg-msg.out { align-self: flex-end; background: #111114; color: #fff; border: 1px solid #111114; border-bottom-right-radius: 5px; box-shadow: 0 3px 10px rgba(0,0,0,.18); } .dark .mg-msg.out { background: #000; border-color: #1a1a1a; } .mg-time { display: block; font-size: 9px; opacity: .6; margin-top: 4px; text-align: right; } .mg-tick { font-size: 9px; margin-left: 4px; transition: color .4s, text-shadow .4s; } .mg-tick.read { color: #38bdf8; text-shadow: none; } .mg-react { position: absolute; top: -10px; left: -6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; font-size: 10px; padding: 2px 6px; animation: mgRPop .4s cubic-bezier(.3,1.8,.4,1); } .dark .mg-react { background: #1d1d1d; border-color: #333; } .mg-msg.out .mg-react { left: auto; right: -6px; } @keyframes mgRPop { from { transform: scale(0) } to { transform: scale(1) } } .mg-typing { align-self: flex-start; background: #f3f4f6; border: 1px solid #e9e9e9; border-radius: 16px; border-bottom-left-radius: 5px; padding: 12px 16px; display: flex; gap: 4px; } .dark .mg-typing { background: #161616; border-color: #222; } .mg-typing i { width: 6px; height: 6px; border-radius: 50%; background: #888; animation: mgTdot 1s infinite; } .mg-typing i:nth-child(2) { animation-delay: .15s } .mg-typing i:nth-child(3) { animation-delay: .3s } @keyframes mgTdot { 0%,100% { transform: translateY(0); opacity: .5 } 40% { transform: translateY(-4px); opacity: 1 } } .mg-bar { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid #eee; position: relative; } .dark .mg-bar { border-color: #1c1c1c; } .mg-ico { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; color: #666; cursor: pointer; transition: all .2s; flex: none; display: flex; align-items: center; justify-content: center; } .dark .mg-ico { border-color: #2a2a2a; background: #161616; color: #bbb; } .mg-ico:hover { transform: translateY(-2px); border-color: #cfcfcf; } .mg-in { flex: 1; background: #f3f4f6; border: 1px solid #e9e9e9; border-radius: 999px; padding: 11px 16px; font-size: 13.5px; outline: none; transition: border-color .2s; min-width: 0; } .dark .mg-in { background: #141414; border-color: #242424; color: #eee; } .mg-in:focus { border-color: #7b2ff788; } .mg-send { width: 44px; height: 44px; border-radius: 50%; border: none; background: #e5e5e5; color: #999; cursor: not-allowed; transition: all .25s; flex: none; display: flex; align-items: center; justify-content: center; } .dark .mg-send { background: #2a2a2a; color: #666; } .mg-send.ready { background: linear-gradient(135deg, #7b2ff7, #d43cae); color: #fff; cursor: pointer; animation: mgReady 1.6s ease-in-out infinite; } @keyframes mgReady { 0%,100% { box-shadow: 0 6px 16px rgba(123,47,247,.4) } 50% { box-shadow: 0 6px 24px rgba(212,58,202,.7) } } .mg-emo { position: absolute; bottom: calc(100% + 6px); left: 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 8px; display: flex; gap: 2px; flex-wrap: wrap; width: 220px; z-index: 10; animation: mgMsg .3s both; } .dark .mg-emo { background: #151515; border-color: #2a2a2a; } .mg-emo span { font-size: 19px; cursor: pointer; padding: 3px 5px; border-radius: 8px; transition: transform .15s; } .mg-emo span:hover { transform: scale(1.3) rotate(-8deg); background: rgba(148,163,184,.18); } @media (max-width: 760px) { .mg-side { width: 88px } .mg-side .mg-hide { display: none } } /* ===== Custom scrollbars ===== Slim, rounded, gradient thumb that only tints on hover — replaces the default chrome everywhere without hiding the affordance entirely. */ * { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .45) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(148,163,184,.55), rgba(148,163,184,.3)); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; transition: background .2s; } *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a855f7, #ec4899); background-clip: content-box; } *::-webkit-scrollbar-corner { background: transparent; } /* Horizontal rails: thumb appears on hover so rows stay clean at rest */ .rail { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; } .rail > * { scroll-snap-align: start; } .rail::-webkit-scrollbar { height: 6px; } .rail::-webkit-scrollbar-thumb { background: transparent; background-clip: content-box; } .rail:hover::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #a855f7, #ec4899); background-clip: content-box; } /* ===== Community cards ===== */ .cm-card { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; transition: transform .28s cubic-bezier(.3,1.3,.4,1), box-shadow .28s, border-color .28s; } .dark .cm-card { background: #0f0f0f; border-color: #232323; } .cm-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.16); border-color: #d4d4d8; } .dark .cm-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.6); border-color: #3a3a3a; } .cm-cover { position: relative; height: 88px; } .cm-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); transform: translateX(-100%); } .cm-card:hover .cm-cover::after { animation: cmSheen .9s ease; } @keyframes cmSheen { to { transform: translateX(100%) } } .cm-kind { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; } .cm-avatars { display: flex; } .cm-avatars > span { border-radius: 999px; box-shadow: 0 0 0 2px #fff; } .dark .cm-avatars > span { box-shadow: 0 0 0 2px #0f0f0f; } /* Frost variant — cyan bolts over gold wisps (premium accounts) */ .ns-frost .ns-wisp-glow { stroke: #ffb347; opacity: .22; } .ns-frost .ns-wisp { stroke: #ffd479; opacity: .7; filter: blur(.5px) drop-shadow(0 0 3px rgba(255,190,80,.9)); } .ns-frost .ns-bolt-glow { stroke: #2ad4ff; } .ns-frost .ns-bolt { stroke: #7be9ff; filter: drop-shadow(0 0 2px #2ad4ff) drop-shadow(0 0 5px rgba(42,212,255,.9)); } .ns-frost .ns-bolt-core { stroke: #f0fdff; } /* ===== Poll over a photo ===== */ .poll-over { position: absolute; inset: auto 0 0 0; height: calc(100% - 2.2rem); z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.55) 100%); backdrop-filter: blur(1px); } /* On a photo everything needs to read light, whatever the image behind it. */ .poll-over .pname2, .poll-over .phint { color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.8); } .poll-over .ppct, .poll-over .ppct-pre, .poll-over .prow-pct { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.9); } .poll-over .ptrack, .poll-over .ptrack-h { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); } .poll-over .chartHint { color: #eaffff; text-shadow: 0 0 10px rgba(0,0,0,.9); } .poll-over .pvoters > span { box-shadow: 0 0 0 2px rgba(0,0,0,.55); } /* ===== Poll — horizontal rows ===== */ .prow { display: block; width: 100%; text-align: left; cursor: pointer; transition: transform .2s; } .prow:hover { transform: translateX(2px); } .ptrack-h { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 11px; border-radius: 10px; overflow: hidden; background: #f2f3f5; border: 1px solid #e3e5e8; transition: border-color .3s, box-shadow .2s; } .dark .ptrack-h { background: #141414; border-color: #242424; } .prow:hover .ptrack-h { border-color: #9ca3af; } .idle .ptrack-h { border-style: dashed; } .pghost-h { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; opacity: .22; animation: ghostH 2.4s ease-in-out infinite; } @keyframes ghostH { 0%, 100% { width: 12% } 50% { width: 46% } } .prow:nth-child(2) .pghost-h { animation-delay: .3s; animation-duration: 2.1s } .prow:nth-child(3) .pghost-h { animation-delay: .6s; animation-duration: 2.7s } .prow:nth-child(4) .pghost-h { animation-delay: .15s; animation-duration: 1.9s } .voted .pghost-h { opacity: 0 } .pfill-h { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 9px; transition: width 1s cubic-bezier(.2,.9,.3,1); opacity: .92; } .pfill-h::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 45%); } .prow-label { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; min-width: 0; flex: 1; } .prow-pct { position: relative; z-index: 2; font-size: 12px; font-weight: 800; color: #0284c7; } .dark .prow-pct { color: #8cf3ff; } .prow.win .ptrack-h { border-color: #38bdf8 !important; box-shadow: 0 0 14px rgba(56,189,248,.28); } /* ===== Match / dating ===== */ .mt-deck { position: relative; width: 100%; max-width: 380px; aspect-ratio: 3/4.2; margin: 0 auto; } .mt-card { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 50px rgba(0,0,0,.28); transform-origin: 50% 120%; will-change: transform, opacity; } /* Cards behind the top one peek out, giving the deck depth. */ .mt-card.s1 { transform: scale(.95) translateY(10px); filter: brightness(.9); } .mt-card.s2 { transform: scale(.9) translateY(20px); filter: brightness(.8); } .mt-card.in { animation: mtIn .45s cubic-bezier(.3,1.3,.4,1); } @keyframes mtIn { from { transform: scale(.9) translateY(24px); opacity: 0 } to { opacity: 1 } } .mt-card.go-like { animation: mtLike .5s cubic-bezier(.4,0,.2,1) forwards; } .mt-card.go-pass { animation: mtPass .5s cubic-bezier(.4,0,.2,1) forwards; } .mt-card.go-super { animation: mtSuper .55s cubic-bezier(.4,0,.2,1) forwards; } @keyframes mtLike { to { transform: translateX(130%) rotate(22deg); opacity: 0 } } @keyframes mtPass { to { transform: translateX(-130%) rotate(-22deg); opacity: 0 } } @keyframes mtSuper { to { transform: translateY(-130%) scale(.9); opacity: 0 } } .mt-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.88) 100%); } .mt-stamp { position: absolute; top: 26px; font-size: 26px; font-weight: 900; letter-spacing: 2px; padding: 6px 14px; border-radius: 10px; border: 4px solid; opacity: 0; transform: rotate(-14deg); } .mt-stamp.like { left: 20px; color: #2fd573; border-color: #2fd573; text-shadow: 0 0 14px rgba(47,213,115,.7) } .mt-stamp.nope { right: 20px; color: #ff4d6a; border-color: #ff4d6a; transform: rotate(14deg); text-shadow: 0 0 14px rgba(255,77,106,.7) } .mt-btn { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.14); background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.18); cursor: pointer; transition: transform .2s cubic-bezier(.3,1.6,.4,1), box-shadow .2s; } .dark .mt-btn { background: #151515; } .mt-btn:hover { transform: translateY(-4px) scale(1.08); } .mt-btn:active { transform: scale(.9); } .mt-btn.pass { color: #ff4d6a } .mt-btn.like { color: #2fd573 } .mt-btn.super { color: #38bdf8 } .mt-btn.big { width: 66px; height: 66px; } /* Match celebration */ .mt-pop { animation: mtPop .6s cubic-bezier(.3,1.6,.4,1); } @keyframes mtPop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } } .mt-chip { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,.25); } .mt-chip.shared { background: rgba(47,213,115,.28); border-color: rgba(47,213,115,.5); } /* ===== Post lightbox ===== */ .lb-back { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: lbFade .22s ease; } @keyframes lbFade { from { opacity: 0 } to { opacity: 1 } } .lb-shell { display: flex; width: min(1100px, 96vw); height: min(86vh, 780px); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: lbIn .35s cubic-bezier(.2,1.1,.3,1); } .dark .lb-shell { background: #0c0c0c; } @keyframes lbIn { from { opacity: 0; transform: translateY(22px) scale(.96) } to { opacity: 1; transform: none } } .lb-media { flex: 1 1 auto; min-width: 0; background: #000; display: flex; align-items: center; justify-content: center; position: relative; } .lb-media img { max-width: 100%; max-height: 100%; object-fit: contain; } .lb-side { width: 380px; flex: none; display: flex; flex-direction: column; border-left: 1px solid #eee; min-height: 0; } .dark .lb-side { border-color: #1c1c1c; } .lb-close { position: absolute; top: 14px; right: 14px; z-index: 80; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: transform .2s, background .2s; } .lb-close:hover { transform: scale(1.1) rotate(90deg); background: rgba(0,0,0,.75); } @media (max-width: 860px) { .lb-shell { flex-direction: column; height: 92vh; } .lb-side { width: 100%; border-left: none; border-top: 1px solid #eee; flex: 1 1 auto; } .lb-media { flex: 0 0 42%; } } /* ===== News rail ===== */ .nw-item { display: flex; gap: 10px; padding: 9px 4px; border-radius: 12px; transition: background .2s; animation: nwIn .55s cubic-bezier(.2,1.1,.3,1) both; } .nw-item:hover { background: rgba(148,163,184,.12); } @keyframes nwIn { from { opacity: 0; transform: translateY(-14px) scale(.96) } to { opacity: 1; transform: none } } /* The item leaving the bottom fades out as the new one drops in on top */ .nw-item.leaving { animation: nwOut .45s ease forwards; } @keyframes nwOut { to { opacity: 0; transform: translateY(10px) scale(.96); height: 0; padding: 0 } } .nw-thumb { width: 52px; height: 52px; border-radius: 10px; flex: none; overflow: hidden; background: linear-gradient(135deg, #7b2ff7, #d43cae); position: relative; } .nw-thumb img { width: 100%; height: 100%; object-fit: cover; } .nw-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); transform: translateX(-100%); animation: nwSheen 4s ease-in-out infinite; } @keyframes nwSheen { 0%, 65% { transform: translateX(-100%) } 100% { transform: translateX(100%) } } .nw-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nw-meta { font-size: 10.5px; color: #9ca3af; margin-top: 3px; } .nw-tab { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; transition: all .2s; } .nw-tab.on { background: linear-gradient(90deg, #7b2ff7, #d43cae); color: #fff; } .nw-tab:not(.on) { color: #9ca3af; } .nw-tab:not(.on):hover { background: rgba(148,163,184,.14); } .nw-live { width: 6px; height: 6px; border-radius: 50%; background: #2fd573; animation: nwPulse 1.8s ease-in-out infinite; } @keyframes nwPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(47,213,115,.6) } 50% { box-shadow: 0 0 0 5px rgba(47,213,115,0) } } /* ===== UV / weather widget (ported from the supplied design) ===== */ .uvw { --bg: #ffffff; --txt: #111111; --sub: #8e8e93; --track: #e4e4e9; --badgebg: #ffffff; background: var(--bg); color: var(--txt); border-radius: 20px; padding: 16px; border: 1px solid #e5e7eb; transition: background .5s, color .5s; animation: uvIn .6s cubic-bezier(.2,.9,.3,1); } .dark .uvw { --bg: #1c1c1e; --txt: #ffffff; --sub: #98989d; --track: #3a3a3c; --badgebg: #2c2c2e; border-color: #2a2a2c; } @keyframes uvIn { from { opacity: 0; transform: translateY(24px) scale(.96) } to { opacity: 1; transform: none } } .uvh { display: flex; align-items: center; gap: 10px; } .uv-cloud { font-size: 28px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); } .uv-loc b { display: flex; align-items: center; gap: 4px; color: var(--txt); font-size: 14px; font-weight: 700; line-height: 1.2; } .uv-loc span { color: var(--sub); font-size: 12px; font-weight: 600; } .uv-icons { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 14px; } .uv-icons span { transition: transform .2s; cursor: default; } .uv-icons span:hover { transform: scale(1.25) rotate(-6deg); } .uv-icons .off { filter: grayscale(1); opacity: .45; } .uvbody { display: flex; gap: 12px; margin-top: 14px; align-items: stretch; } .uv-panel-wrap { flex: 0 0 45%; border-radius: 16px; position: relative; overflow: hidden; display: flex; } .uv-panel-wrap .uv-panel { flex: 1; } /* Soft coloured wash behind the glass, tinted by the condition */ .uv-panel-wrap::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--panel-wash, linear-gradient(150deg,#6b7a8f,#475569)); } /* Frosted dark panel — 40% black with a blur, per the brief. */ .uv-panel { flex: 0 0 45%; border-radius: 16px; padding: 14px 12px; color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(0, 0, 0, .40); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16); } .uv-ptop { display: flex; justify-content: space-between; gap: 6px; } .uv-lvl { font-size: 13px; font-weight: 800; } .uv-panel > * { position: relative; z-index: 1; } .uv-cond-ico { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); } .uv-temp { font-size: 42px; font-weight: 900; line-height: 1; text-shadow: 0 4px 14px rgba(0,0,0,.45); } .uv-hilo { font-size: 11.5px; font-weight: 700; opacity: .92; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .uv-num { font-size: 40px; font-weight: 900; line-height: 1.05; text-shadow: 0 4px 14px rgba(0,0,0,.25); } .uv-col2 { font-size: 10px; font-weight: 600; display: flex; flex-direction: column; gap: 1px; } .uv-col2 b { font-size: 12px; font-weight: 800; } .uv-col2 .lab { opacity: .85; } .uv-pbar { position: relative; height: 5px; border-radius: 3px; margin-top: 12px; background: linear-gradient(90deg, #43a047, #f4b400, #ef6c00, #d32f2f, #8e24aa); } .uv-pdot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: left .8s cubic-bezier(.3,1.2,.4,1); } .uv-bars { flex: 1; display: flex; gap: 6px; justify-content: space-between; } .uv-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; padding: 0; } .uv-track { position: relative; width: 22px; flex: 1; min-height: 104px; border-radius: 999px; background: var(--track); transition: box-shadow .3s, transform .3s; } .uv-bar:hover .uv-track { transform: translateY(-3px); } .uv-bar.sel .uv-track { box-shadow: 0 0 0 2px var(--txt), 0 8px 20px rgba(0,0,0,.25); } .uv-fill { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 999px; height: 0%; transition: height .9s cubic-bezier(.25,1.2,.4,1); } .uv-badge { position: absolute; left: 50%; transform: translate(-50%, 50%); bottom: 0%; width: 24px; height: 24px; border-radius: 50%; background: var(--badgebg); color: var(--txt); border: 3px solid #43a047; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; box-shadow: 0 3px 10px rgba(0,0,0,.25); transition: bottom .9s cubic-bezier(.25,1.2,.4,1), border-color .4s; } .uv-day { color: var(--sub); font-size: 11px; font-weight: 700; } .uv-dayico { font-size: 15px; line-height: 1; } .uv-daytemp { font-size: 10.5px; font-weight: 800; color: var(--txt); } .uv-loc-row { display: flex; align-items: center; gap: 4px; } .uv-bar.sel .uv-day { color: var(--txt); } /* Sun: glowing disc with slowly rotating rays */ .wx-sun { position: absolute; right: -14px; top: -14px; width: 84px; height: 84px; } .wx-sun::before { content: ''; position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle, #fff9c4, #fde047 62%, #facc15); box-shadow: 0 0 22px rgba(253,224,71,.75); animation: wxPulse 3.2s ease-in-out infinite; } .wx-sun::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(253,224,71,.55) 8% 12%, transparent 12% 100%); animation: wxSpin 14s linear infinite; } @keyframes wxSpin { to { transform: rotate(360deg) } } @keyframes wxPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.07) } } /* Clouds drifting across */ .wx-cloud { position: absolute; border-radius: 999px; background: rgba(255,255,255,.28); filter: blur(1px); animation: wxDrift linear infinite; } @keyframes wxDrift { from { transform: translateX(-40px) } to { transform: translateX(300px) } } /* Rain / snow falling */ .wx-drop { position: absolute; top: -10px; width: 1.6px; height: 11px; border-radius: 2px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.85)); animation: wxFall linear infinite; } @keyframes wxFall { to { transform: translateY(150px) } } .wx-flake { position: absolute; top: -8px; border-radius: 50%; background: rgba(255,255,255,.9); animation: wxFlake linear infinite; } @keyframes wxFlake { 0% { transform: translate(0, 0) } 100% { transform: translate(14px, 150px) } } /* Lightning flash for storms */ .wx-flash { position: absolute; inset: 0; background: rgba(255,255,255,.55); opacity: 0; animation: wxFlash 6s steps(1,end) infinite; pointer-events: none; } @keyframes wxFlash { 0%, 88%, 100% { opacity: 0 } 89% { opacity: .8 } 90% { opacity: 0 } 92% { opacity: .5 } 93% { opacity: 0 } } .wx-day { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; border-radius: 10px; padding: 7px 3px; background: rgba(255,255,255,.12); transition: transform .2s, background .2s; } .wx-day:hover { transform: translateY(-2px); background: rgba(255,255,255,.2); } /* ===== Markets widget (ported from the supplied design) ===== */ .mkw { border-radius: 20px; padding: 14px; border: 1px solid #e5e7eb; background: #fff; animation: uvIn .7s cubic-bezier(.2,.9,.3,1) .15s both; } .dark .mkw { background: #0c0c0c; border-color: #1f1f1f; } .mk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .dark .mk-title { color: #f4f4f5; } .mk-live { display: flex; align-items: center; gap: 5px; background: rgba(47,213,115,.12); border: 1px solid rgba(47,213,115,.4); color: #2fd573; font-size: 9px; font-weight: 900; padding: 3px 8px; border-radius: 999px; letter-spacing: 1px; } .mk-live i { width: 6px; height: 6px; border-radius: 50%; background: #2fd573; animation: mkLp 1.4s ease-in-out infinite; } @keyframes mkLp { 0%,100% { box-shadow: 0 0 0 0 rgba(47,213,115,.5) } 50% { box-shadow: 0 0 0 5px rgba(47,213,115,0) } } .mk-btn { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fafafa; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; } .dark .mk-btn { border-color: #2a2a2a; background: #161616; } .mk-btn:hover { transform: scale(1.1); border-color: #7b2ff7aa; } .mk-upd { color: #9ca3af; font-size: 9.5px; font-weight: 600; text-align: right; margin-bottom: 8px; } .mk-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 14px; border: 1px solid #eaeaea; background: #fafafa; margin-bottom: 8px; transition: border-color .3s, box-shadow .3s, transform .2s; } .dark .mk-row { border-color: #222; background: #101010; } .mk-row:hover { transform: translateX(3px); } .mk-row.up { border-color: rgba(47,213,115,.6); box-shadow: 0 0 16px rgba(47,213,115,.18); } .mk-row.down { border-color: rgba(255,77,90,.6); box-shadow: 0 0 16px rgba(255,77,90,.18); } .mk-coin { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #fff; background: var(--c); box-shadow: 0 0 10px var(--c); } .mk-info { flex: 1; min-width: 0; } .mk-info b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-info span { color: #9ca3af; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; } .mk-spark { width: 58px; height: 26px; flex: none; } .mk-p { display: block; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .mk-p.tick-up { animation: mkTUp .6s } .mk-p.tick-down { animation: mkTDn .6s } @keyframes mkTUp { 0% { color: #2fd573; transform: translateY(4px) } 100% { transform: none } } @keyframes mkTDn { 0% { color: #ff4d5a; transform: translateY(-4px) } 100% { transform: none } } .mk-cn { font-size: 9.5px; font-weight: 900; } .mk-cn.up { color: #2fd573 } .mk-cn.down { color: #ff4d5a } .mk-del { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #ef444455; color: #ef4444; background: none; font-size: 12px; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; transition: all .2s; } .mk-del:hover { background: #ef444422; transform: scale(1.1); } .mk-add { width: 100%; border: 1px dashed #d4d4d4; color: #9ca3af; font-size: 11.5px; font-weight: 700; padding: 8px; border-radius: 12px; cursor: pointer; transition: all .2s; } .dark .mk-add { border-color: #333; } .mk-add:hover { color: #7b2ff7; border-color: #7b2ff7aa; } .mk-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border-radius: 10px; cursor: pointer; transition: background .2s; text-align: left; background: none; border: 0; } .mk-opt:hover { background: rgba(148,163,184,.14); } .mk-move { width: 20px; height: 20px; border-radius: 6px; border: 1px solid #d4d4d8; background: none; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; } .dark .mk-move { border-color: #333; color: #9ca3af; } .mk-move:hover:not(:disabled) { border-color: #7b2ff7aa; color: #7b2ff7; transform: scale(1.1); } .mk-move:disabled { opacity: .3; cursor: not-allowed; } /* ===== Trending topics — animated rows ===== */ .tr-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; overflow: hidden; width: 100%; border: 1px solid transparent; background: none; cursor: pointer; transition: transform .22s cubic-bezier(.3,1.3,.4,1), border-color .25s; animation: trIn .5s cubic-bezier(.2,1.1,.3,1) both; } .tr-row:nth-child(1) { animation-delay: .04s } .tr-row:nth-child(2) { animation-delay: .1s } .tr-row:nth-child(3) { animation-delay: .16s } .tr-row:nth-child(4) { animation-delay: .22s } .tr-row:nth-child(5) { animation-delay: .28s } @keyframes trIn { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } } /* Each topic carries its own tint, faint at rest and stronger on hover */ .tr-row::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--tint); opacity: .10; transition: opacity .25s; } .tr-row:hover::before { opacity: .22; }.tr-row:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } /* Light sweep across the row on hover */ .tr-row::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-100%); } .tr-row:hover::after { animation: trSweep .75s ease; } @keyframes trSweep { to { transform: translateX(100%) } } .dark .tr-row::after { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%); } .tr-rank { position: relative; z-index: 2; width: 22px; text-align: center; flex: none; font-size: 13px; font-weight: 900; color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); } .tr-body { position: relative; z-index: 2; flex: 1; min-width: 0; text-align: left; } .tr-tag { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-count { display: block; font-size: 10.5px; color: #9ca3af; font-weight: 600; } /* Tiny animated bar chart hinting at momentum */ .tr-spark { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; } .tr-spark i { width: 3px; border-radius: 2px; background: var(--accent); opacity: .85; animation: trBar 1.8s ease-in-out infinite; } @keyframes trBar { 0%, 100% { transform: scaleY(.55) } 50% { transform: scaleY(1) } } .tr-flame { position: relative; z-index: 2; flex: none; animation: trFlame 1.4s ease-in-out infinite; transform-origin: bottom center; } @keyframes trFlame { 0%, 100% { transform: scale(1) rotate(-4deg) } 50% { transform: scale(1.18) rotate(4deg) } } /* ===== Popular marketplace items ===== */ .mp-row { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 12px; transition: background .2s, transform .2s; } .mp-row:hover { background: rgba(148,163,184,.12); transform: translateX(3px); } .mp-rank { width: 16px; text-align: center; flex: none; font-size: 12px; font-weight: 900; color: #9ca3af; } .mp-thumb { width: 40px; height: 40px; border-radius: 10px; flex: none; overflow: hidden; background: linear-gradient(135deg, #2fd573, #0ea5e9); display: flex; align-items: center; justify-content: center; } .mp-thumb img { width: 100%; height: 100%; object-fit: cover; } .mp-ph { color: #fff; font-weight: 900; font-size: 15px; } .mp-price { flex: none; font-size: 11px; font-weight: 800; color: #059669; } .dark .mp-price { color: #34d399; } .nw-glyph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 20px; } /* Avatar decoration frame — sits above the photo, ignores clicks */ .av-deco { position: absolute; z-index: 5; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); } /* ===== Avatar frame picker ===== */ .deco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 232px; overflow-y: auto; padding: 6px 4px 6px 2px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fafafa; } .dark .deco-grid { border-color: #232323; background: #0d0d0d; } .deco-grid::-webkit-scrollbar { width: 6px; } .deco-grid::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a855f7, #ec4899); border-radius: 999px; } .deco-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 12px; padding: 7px 3px; cursor: pointer; border: 1.5px solid transparent; background: none; transition: background .18s, border-color .18s, transform .18s; } .deco-cell:hover { background: rgba(148,163,184,.14); transform: translateY(-2px); } .deco-cell.sel { border-color: #a855f7; background: rgba(168,85,247,.10); box-shadow: 0 0 0 1px rgba(168,85,247,.35); } .deco-thumb { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; } .deco-label { font-size: 9.5px; font-weight: 700; color: #6b7280; text-align: center; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .deco-label { color: #9ca3af; } .deco-cell.sel .deco-label { color: #a855f7; } /* ===== Scroll controls ===== */ .sc-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; border: 1.5px solid #d4d4d8; background: #fff; color: #52525b; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: all .22s cubic-bezier(.3,1.3,.4,1); } .dark .sc-btn { border-color: #262626; background: #141414; color: #a1a1aa; } .sc-btn:hover { transform: translateY(-2px) scale(1.08); color: #a855f7; border-color: #a855f766; box-shadow: 0 4px 14px rgba(168,85,247,.25); } .sc-btn:active { transform: scale(.92); } .sc-hidden { opacity: 0; pointer-events: none; transform: scale(.6); } .sc-on { background: linear-gradient(135deg, #a855f7, #ec4899); color: #fff; border-color: transparent; animation: scPulse 1.8s ease-in-out infinite; } @keyframes scPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,.5) } 50% { box-shadow: 0 0 0 7px rgba(168,85,247,0) } } /* Auto-scroll button when it sits on the dark reel rail */ .sc-rail { width: 38px; height: 38px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; box-shadow: none; } .sc-rail:hover { background: rgba(255,255,255,.26); color: #fff; } /* Sticky search header in the right rail — fully opaque so cards scrolling underneath never show through, with a soft fade at its lower edge. */ .rail-sticky { background: #f5f5f5; } .dark .rail-sticky { background: #000000; } .rail-sticky::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; background: linear-gradient(#f5f5f5, rgba(245,245,245,0)); } .dark .rail-sticky::after { background: linear-gradient(#000, rgba(0,0,0,0)); } /* Count of stories a person has posted today */ .story-count { position: absolute; right: -1px; top: -1px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; z-index: 6; background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); } .dark .story-count { border-color: #000; } /* ===== Search page ===== */ .srch-head { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; margin-bottom: 10px; } .srch-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; background: #fff; border: 1px solid #e5e7eb; cursor: pointer; transition: all .2s cubic-bezier(.3,1.3,.4,1); } .dark .srch-chip { background: #111; border-color: #262626; } .srch-chip:hover { transform: translateY(-2px); border-color: #a855f766; } .srch-chip.on { background: #111; color: #fff; border-color: #111; } .dark .srch-chip.on { background: #fff; color: #111; border-color: #fff; } .srch-user { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #f0f0f0; transition: background .2s; } .dark .srch-user { border-color: #1a1a1a; } .srch-user:last-child { border-bottom: 0; } .srch-user:hover { background: rgba(148,163,184,.10); } .srch-trend { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; overflow: hidden; width: 100%; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; transition: transform .22s cubic-bezier(.3,1.3,.4,1), border-color .22s; } .dark .srch-trend { background: #0f0f0f; border-color: #232323; } .srch-trend::before { content: ''; position: absolute; inset: 0; background: var(--accent); opacity: .07; transition: opacity .22s; } .srch-trend:hover { transform: translateY(-3px); border-color: var(--accent); } .srch-trend:hover::before { opacity: .16; } .srch-trend > * { position: relative; z-index: 1; } .srch-rank { width: 22px; text-align: center; font-size: 14px; font-weight: 900; color: var(--accent); flex: none; } .srch-sugg { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; border: 1px solid #e5e7eb; background: #fff; transition: transform .2s, box-shadow .2s; } .dark .srch-sugg { background: #0f0f0f; border-color: #232323; } .srch-sugg:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.10); } .srch-mutual { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; color: #0284c7; background: rgba(2,132,199,.12); padding: 2px 7px; border-radius: 999px; } .srch-follow { display: inline-flex; align-items: center; gap: 4px; flex: none; border-radius: 999px; padding: 7px 13px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #7b2ff7, #d43cae); transition: transform .2s, filter .2s; position: relative; } .srch-follow:hover { transform: scale(1.05); filter: brightness(1.1); } .srch-follow.done { background: #eafaec; color: #16a34a; } .dark .srch-follow.done { background: #12281a; color: #7dff8a; } .srch-more { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e5e7eb; color: #6b7280; transition: all .2s; } .dark .srch-more { background: #111; border-color: #262626; color: #a1a1aa; } .srch-more:hover { color: #a855f7; border-color: #a855f766; transform: scale(1.08); } .dark .hov-card { background: #0f0f0f; border-color: #262626; box-shadow: 0 20px 50px rgba(0,0,0,.6); } @keyframes hovIn { from { opacity: 0; transform: translateY(6px) scale(.97) } } .hov-card[style*="translateY(-100%)"] { animation: none; } .hov-cover { display: block; height: 62px; } .hov-body { padding: 0 14px 14px; } .hov-name { display: block; margin-top: 8px; font-size: 15px; font-weight: 800; } .hov-name:hover { text-decoration: underline; } .hov-handle { display: block; font-size: 12px; color: #6b7280; } .dark .hov-handle { color: #9ca3af; } .hov-bio { font-size: 12.5px; line-height: 1.45; margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hov-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: #6b7280; } .dark .hov-stats { color: #9ca3af; } .hov-stats b { color: inherit; font-weight: 800; } .dark .hov-stats b { color: #f4f4f5; } .hov-follow { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-top: 6px; border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #7b2ff7, #d43cae); transition: transform .2s, filter .2s; position: relative; } .hov-follow:hover { transform: scale(1.05); filter: brightness(1.1); } .hov-follow.done { background: #eafaec; color: #16a34a; } .dark .hov-follow.done { background: #12281a; color: #7dff8a; } /* ===== Sidebar footer profile + mini wallet (ported) ===== */ .sbp { border-top: 1px solid #e5e7eb; padding-top: 12px; margin-top: 8px; } .dark .sbp { border-color: rgba(255,255,255,.08); } .sbp-row { display: flex; align-items: center; gap: 10px; } .sbp-av { position: relative; width: 42px; height: 42px; flex: none; } .sbp-name { font-size: 14.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sbp-handle { font-size: 12px; color: #64748b; } .dark .sbp-handle { color: #94a3b8; } .sbp-edit { width: 30px; height: 30px; border-radius: 50%; flex: none; background: #f1f5f9; border: 1px solid #e5e7eb; color: #64748b; display: flex; align-items: center; justify-content: center; transition: all .2s; } .dark .sbp-edit { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.09); color: #94a3b8; } .sbp-edit:hover { color: #8b5cf6; background: rgba(139,92,246,.16); } .sbp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 11px; } .sbp-stat { text-align: center; border-radius: 10px; padding: 6px 2px; background: #f8fafc; border: 1px solid #eef2f7; } .dark .sbp-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); } .sbp-stat b { display: block; font-size: 12.5px; font-weight: 800; line-height: 1.2; } .sbp-stat span { display: block; font-size: 9px; color: #64748b; font-weight: 600; } .dark .sbp-stat span { color: #94a3b8; } .sbp-wallet { margin-top: 10px; border-radius: 14px; padding: 11px; background: linear-gradient(135deg, rgba(6,182,212,.10), rgba(139,92,246,.10)); border: 1px solid rgba(139,92,246,.20); } .sbp-wallet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .sbp-wallet-label { font-size: 10.5px; color: #64748b; font-weight: 600; } .dark .sbp-wallet-label { color: #94a3b8; } .sbp-coins { display: flex; } .sbp-coin { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; border: 1.5px solid #fff; margin-left: -5px; } .dark .sbp-coin { border-color: #0a0a0a; } .sbp-coin:first-child { margin-left: 0; } .sbp-balance { font-size: 19px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 9px; } .sbp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sbp-btn { border-radius: 9px; padding: 7px; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 4px; transition: transform .18s, filter .18s; } .sbp-btn:hover { transform: translateY(-1px); filter: brightness(1.08); } .sbp-btn.topup { background: linear-gradient(135deg, #06b6d4, #8b5cf6); color: #fff; } .sbp-btn.up { background: #eef2f7; color: #334155; } .dark .sbp-btn.up { background: rgba(255,255,255,.08); color: #e2e8f0; } /* ===== Messages: right profile pane ===== */ .mg-pane { width: 340px; flex: none; border-left: 1px solid #eee; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; animation: paneIn .28s cubic-bezier(.2,1.1,.3,1); } .dark .mg-pane { border-color: #1c1c1c; } @keyframes paneIn { from { opacity: 0; transform: translateX(18px) } } .mg-pane-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f1f1f1; } .dark .mg-pane-head { border-color: #1a1a1a; } .mg-pane-body { padding: 18px 16px; text-align: center; } .mg-pane-name { font-size: 16px; font-weight: 800; margin-top: 10px; } .mg-pane-handle { font-size: 12.5px; color: #6b7280; } .dark .mg-pane-handle { color: #9ca3af; } .mg-pane-seen { font-size: 11.5px; color: #9ca3af; margin-top: 3px; } .mg-pane-bio { font-size: 12.5px; line-height: 1.5; margin-top: 10px; } .mg-pane-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .mg-pane-btn { border-radius: 10px; padding: 9px; font-size: 12.5px; font-weight: 800; transition: transform .18s, filter .18s; } .mg-pane-btn:hover { transform: translateY(-1px); filter: brightness(1.06); } .mg-pane-btn.solid { background: #111; color: #fff; } .dark .mg-pane-btn.solid { background: #fff; color: #111; } .mg-pane-btn.outline { border: 1px solid #e5e7eb; } .dark .mg-pane-btn.outline { border-color: #2a2a2a; } .mg-sec { border-top: 1px solid #f1f1f1; padding: 14px 16px; text-align: left; } .dark .mg-sec { border-color: #1a1a1a; } .mg-sec h4 { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; color: #9ca3af; margin-bottom: 8px; } .mg-sec p { font-size: 12.5px; color: #9ca3af; } .mg-fact { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 5px 0; } .mg-fact span { color: #9ca3af; } .mg-fact b { font-weight: 800; } .mg-online { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #16a34a; } .mg-online i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: mgPulse 1.8s ease-in-out infinite; } @media (max-width: 1100px) { .mg-pane { display: none } } /* Segmented control: one track, the active item lifts out of it. */ .mg-toolbar { display: flex; align-items: center; gap: 2px; margin: 0 14px 10px; padding: 3px; border-radius: 12px; background: #f1f5f9; } .dark .mg-toolbar { background: #141414; } .dark .mg-filter { color: #94a3b8; } .mg-filter:hover { color: #334155; } .dark .mg-filter:hover { color: #e2e8f0; } .mg-filter.on { background: #fff; color: #0f172a; font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.03); } .dark .mg-filter.on { background: #262626; color: #fff; box-shadow: none; } .mg-actions { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; } .mg-act-on { border-color: #7b2ff7 !important; color: #7b2ff7 !important; background: rgba(123,47,247,.10) !important; } .mg-pane-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 13px; } .mg-pane-stat { border-radius: 11px; padding: 8px 3px; text-align: center; background: #f8fafc; border: 1px solid #eef2f7; transition: transform .18s; } .dark .mg-pane-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); } .mg-pane-stat:hover { transform: translateY(-2px); } .mg-pane-stat b { display: block; font-size: 13.5px; font-weight: 800; } .mg-pane-stat span { display: block; font-size: 9.5px; color: #64748b; font-weight: 600; } .dark .mg-pane-stat span { color: #94a3b8; } .mg-ico-sm { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; transition: all .18s; } .dark .mg-ico-sm { background: #141414; border-color: #262626; color: #a1a1aa; } .mg-ico-sm:hover { color: #7b2ff7; border-color: #7b2ff766; transform: scale(1.08); } .mg-status-dot { width: 11px; height: 11px; border-radius: 50%; display: block; } .mg-status-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 268px; z-index: 60; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.16); animation: hovIn .2s both; } .dark .mg-status-menu { background: #101010; border-color: #262626; } .mg-status-menu h5 { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; color: #9ca3af; margin-bottom: 6px; } .mg-status-item { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 7px 6px; border-radius: 10px; text-align: left; transition: background .18s; } .mg-status-item:hover { background: rgba(148,163,184,.14); } .mg-status-item i { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: none; } .mg-status-item b { display: block; font-size: 12.5px; font-weight: 700; } .mg-status-item em { display: block; font-style: normal; font-size: 10.5px; color: #9ca3af; line-height: 1.35; margin-top: 1px; } .mg-actions-inline { display: flex; align-items: center; gap: 7px; margin-left: auto; } .mg-status-sep { height: 1px; background: #f1f5f9; margin: 8px -10px; } .dark .mg-status-sep { background: #1f1f1f; } .mg-toggle { width: 34px; height: 19px; border-radius: 999px; background: #d4d4d8; flex: none; position: relative; transition: background .22s; margin-top: 2px; } .dark .mg-toggle { background: #3a3a3c; } .mg-toggle i { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .22s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .mg-toggle.on { background: #7b2ff7; } .mg-toggle.on i { transform: translateX(15px); } .mg-away-input { width: 100%; border-radius: 10px; padding: 8px 10px; font-size: 12px; background: #f8fafc; border: 1px solid #e5e7eb; outline: none; resize: none; } .dark .mg-away-input { background: #161616; border-color: #262626; color: #eee; } .mg-away-input:focus { border-color: #7b2ff788; } .mg-away-hint { font-size: 10px; color: #9ca3af; text-align: right; margin-top: 3px; } /* ===== New message modal ===== */ .nm-back { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,.35); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: lbFade .2s ease; } .nm-card { width: min(560px, 96vw); max-height: 78vh; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.28); animation: hovIn .26s cubic-bezier(.2,1.1,.3,1) both; } .dark .nm-card { background: #101010; } .nm-head { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f1f1f1; } .dark .nm-head { border-color: #1c1c1c; } .nm-x { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #6b7280; transition: background .18s; } .nm-x:hover { background: rgba(148,163,184,.16); } .nm-title { flex: 1; text-align: center; font-size: 16px; font-weight: 800; } .nm-search { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #f1f1f1; } .dark .nm-search { border-color: #1c1c1c; } .nm-list { flex: 1; overflow-y: auto; padding: 6px; } .nm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; transition: background .18s; } .nm-row:hover { background: rgba(148,163,184,.14); } .mg-away-save { border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #7b2ff7, #d43cae); transition: transform .18s, filter .18s; } .mg-away-save:hover { transform: scale(1.05); filter: brightness(1.08); } .mg-msg.in .mg-react-btn { right: -34px; } .mg-msg.out .mg-react-btn { left: -34px; } .mg-msg:hover .mg-react-btn { opacity: 1; } .mg-react-btn > button { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e5e7eb; color: #6b7280; box-shadow: 0 2px 6px rgba(0,0,0,.10); transition: transform .18s; } .dark .mg-react-btn > button { background: #1a1a1a; border-color: #2a2a2a; color: #a1a1aa; } .mg-react-btn > button:hover { transform: scale(1.14); color: #7b2ff7; } .mg-react-pop { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 5px 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; box-shadow: 0 8px 22px rgba(0,0,0,.16); animation: hovIn .18s both; } .dark .mg-react-pop { background: #161616; border-color: #2a2a2a; } .mg-react-pop button { font-size: 16px; line-height: 1; padding: 3px; border-radius: 50%; transition: transform .16s; } .mg-react-pop button:hover { transform: scale(1.3); } /* Reaction badge below the bubble, with a pop-in */ .mg-react-badge { position: absolute; bottom: -11px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; font-size: 12px; line-height: 1; padding: 3px 7px; box-shadow: 0 2px 6px rgba(0,0,0,.12); z-index: 4; animation: reactPop .45s cubic-bezier(.3,1.7,.4,1) both; } .dark .mg-react-badge { background: #1d1d1d; border-color: #333; } .mg-msg.in .mg-react-badge { left: 12px; } .mg-msg.out .mg-react-badge { right: 12px; } @keyframes reactPop { 0% { transform: scale(0) rotate(-25deg); opacity: 0 } 55% { transform: scale(1.35) rotate(8deg); opacity: 1 } 100% { transform: scale(1) rotate(0) } } .mg-react-badge:hover { animation: reactWiggle .5s ease; } @keyframes reactWiggle { 0%,100% { transform: rotate(0) scale(1) } 30% { transform: rotate(-12deg) scale(1.18) } 60% { transform: rotate(12deg) scale(1.18) } } /* Conversation row menu */ .mg-conv-menu { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #64748b; transition: background .18s, color .18s; z-index: 6; } .dark .mg-conv-menu { color: #a1a1aa; } .mg-conv-menu:hover { background: rgba(148,163,184,.22); color: #111; } .dark .mg-conv-menu:hover { background: rgba(255,255,255,.12); color: #fff; } .mg-conv-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: 132px; display: flex; flex-direction: column; padding: 4px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.16); animation: hovIn .16s both; } .dark .mg-conv-pop { background: #161616; border-color: #2a2a2a; } .mg-conv-pop button { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; text-align: left; transition: background .16s; } .mg-conv-pop button:hover { background: rgba(148,163,184,.16); } .mg-conv-pop button.danger { color: #ef4444; } /* Menu text must stay readable on the dark surface. */ .dark .mg-conv-pop button { color: #f4f4f5; } .dark .mg-conv-pop button.danger { color: #f87171; } /* Group creation modal */ .nm-next { border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 800; background: #111; color: #fff; transition: transform .18s, opacity .18s; } .dark .nm-next { background: #fff; color: #111; } .nm-next:hover { transform: scale(1.04); } .nm-next.off { opacity: .35; cursor: not-allowed; transform: none; } .nm-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #f1f1f1; } .dark .nm-chips { border-color: #1c1c1c; } .nm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #f1f5f9; font-size: 12.5px; font-weight: 700; animation: hovIn .2s both; } .dark .nm-chip { background: #1c1c1c; } .nm-chip button { color: #9ca3af; transition: color .18s; } .nm-chip button:hover { color: #ef4444; } .nm-details { padding: 22px 20px; overflow-y: auto; } .nm-photo { position: relative; width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f1f5f9; transition: transform .2s; } .dark .nm-photo { background: #1c1c1c; } .nm-photo:hover { transform: scale(1.04); } .nm-photo img { width: 100%; height: 100%; object-fit: cover; } .nm-photo-cam { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; } .nm-label { display: block; font-size: 12.5px; font-weight: 800; color: #64748b; margin-bottom: 6px; } .nm-field { width: 100%; border-radius: 12px; padding: 12px 14px; font-size: 14px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; } .dark .nm-field { background: #161616; border-color: #262626; color: #eee; } .nm-field:focus { border-color: #7b2ff788; } .nm-count { font-size: 10.5px; color: #9ca3af; text-align: right; margin: 4px 0 14px; } .mg-group-av { width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #7b2ff7, #d43cae); } .mg-group-av img { width: 100%; height: 100%; object-fit: cover; } /* Group member stacks */ .mg-members { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: #f1f5f9; font-size: 12px; font-weight: 700; color: #475569; transition: background .18s, transform .18s; } .dark .mg-members { background: rgba(255,255,255,.07); color: #cbd5e1; } .mg-members:hover { transform: translateY(-1px); background: #e2e8f0; } .dark .mg-members:hover { background: rgba(255,255,255,.12); } .mg-hdr-members { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: #64748b; transition: color .18s; } .dark .mg-hdr-members { color: #94a3b8; } .mg-hdr-members:hover { color: #7b2ff7; } .mg-plus { font-size: 10px; font-weight: 800; color: #64748b; background: #e2e8f0; border-radius: 999px; padding: 1px 5px; margin-left: 3px; } .dark .mg-plus { background: rgba(255,255,255,.12); color: #cbd5e1; } /* Unread above, timestamp pinned to the bottom-right of the row. */ .mg-conv-meta { position: absolute; right: 8px; bottom: 7px; display: flex; align-items: center; gap: 6px; } /* Quoted reply, WhatsApp style */ .mg-quote { display: block; border-left: 3px solid #7b2ff7; padding: 5px 9px; border-radius: 6px; margin-bottom: 6px; background: rgba(0,0,0,.06); } .mg-msg.out .mg-quote { background: rgba(255,255,255,.18); border-left-color: #ffe08a; } .dark .mg-quote { background: rgba(255,255,255,.08); } .mg-quote b { display: block; font-size: 11px; font-weight: 800; color: #7b2ff7; } .mg-msg.out .mg-quote b { color: #ffe08a; } .mg-quote span { display: block; font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .mg-reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px 0; animation: hovIn .18s both; } .mg-reply-bar .mg-quote { margin-bottom: 0; flex: 1; } .mg-reply-bar > button { color: #9ca3af; transition: color .18s; } .mg-reply-bar > button:hover { color: #ef4444; } /* Emoji reaction button revealed on bubble hover */ .mg-react-btn { position: absolute; top: 50%; transform: translateY(-50%); opacity: .55; transition: opacity .18s; z-index: 5; display: flex; flex-direction: column; gap: 4px; } .mg-msg-search { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-bottom: 1px solid #f1f1f1; animation: hovIn .18s both; } .dark .mg-msg-search { border-color: #1c1c1c; } .mg-rec { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; animation: recPulse 1.4s ease-in-out infinite; } @keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55) } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0) } } .mg-admin-badge { font-size: 8px; font-weight: 900; letter-spacing: .4px; color: #ef4444; background: rgba(239,68,68,.14); border-radius: 4px; padding: 1px 4px; flex: none; } .rl-tool { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 66px; padding: 11px 4px; border-radius: 14px; font-size: 10px; font-weight: 700; color: #64748b; background: #f8fafc; border: 1px solid #eef2f7; transition: all .2s; } .dark .rl-tool { background: #111; border-color: #232323; color: #a1a1aa; } .rl-tool:hover { transform: translateY(-2px); color: #7b2ff7; } .rl-tool.on { background: #111; color: #fff; border-color: #111; } .dark .rl-tool.on { background: #fff; color: #111; border-color: #fff; } .rl-drop { position: absolute; inset: 12px; border-radius: 18px; border: 2px dashed rgba(255,255,255,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #fff; background: rgba(0,0,0,.18); transition: background .2s; } .rl-drop:hover { background: rgba(0,0,0,.3); } .rl-drop-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .rl-drop b { font-size: 15px; font-weight: 800; } .rl-drop span:last-child { font-size: 11px; opacity: .8; } .rl-clear:hover { transform: scale(1.1) rotate(90deg); } .rl-desc-preview { position: absolute; left: 12px; right: 12px; bottom: 14px; color: #fff; font-size: 12.5px; line-height: 1.45; text-shadow: 0 1px 6px rgba(0,0,0,.8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rl-panel { width: 250px; flex: none; border-radius: 18px; padding: 14px; background: #fff; border: 1px solid #e5e7eb; align-self: flex-start; animation: hovIn .24s both; } .dark .rl-panel { background: #0d0d0d; border-color: #232323; } .rl-panel h3 { font-size: 12px; font-weight: 800; margin-bottom: 9px; } .rl-filter { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; color: #64748b; } .rl-filter.on { color: #7b2ff7; } .rl-filter-swatch { width: 100%; aspect-ratio: 1; border-radius: 10px; border: 2px solid transparent; transition: transform .18s, border-color .18s; } .rl-filter:hover .rl-filter-swatch { transform: scale(1.06); } .rl-filter.on .rl-filter-swatch { border-color: #7b2ff7; } .rl-sound { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 11px; font-size: 12px; font-weight: 600; transition: background .18s; } .rl-sound:hover { background: rgba(148,163,184,.14); } .rl-sound.on { background: rgba(123,47,247,.12); color: #7b2ff7; font-weight: 800; } .rl-field { width: 100%; border-radius: 12px; padding: 10px 12px; font-size: 13px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; } .dark .rl-field { background: #161616; border-color: #262626; color: #eee; } .rl-field:focus { border-color: #7b2ff788; } .rl-count { font-size: 10px; color: #9ca3af; text-align: right; margin-top: 3px; } .rl-summary { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 11px; border-radius: 11px; background: #f8fafc; font-size: 11.5px; font-weight: 700; color: #64748b; } .dark .rl-summary { background: #161616; color: #a1a1aa; } /* Reel music picker */ .rl-music-search { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef2f7; margin-bottom: 8px; } .dark .rl-music-search { background: #161616; border-color: #262626; } .rl-track, .rl-track-picked { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 7px; border-radius: 10px; transition: background .16s; } .rl-track:hover { background: rgba(148,163,184,.14); } .rl-track.on { background: rgba(123,47,247,.12); } .rl-track img, .rl-track-picked img, .rl-track-ph { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex: none; } .rl-track-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#a855f7,#ec4899); color: #fff; } .rl-track b, .rl-track-picked b { display: block; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-track em, .rl-track-picked em { display: block; font-style: normal; font-size: 10px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-track-picked { background: rgba(123,47,247,.12); margin-bottom: 8px; } .rl-track-picked > button { color: #9ca3af; transition: color .18s; } .rl-track-picked > button:hover { color: #ef4444; } /* Publish celebration */ .rl-done { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); animation: lbFade .25s ease; } .rl-done-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 44px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.35); animation: hovIn .4s cubic-bezier(.2,1.3,.3,1) both; } .dark .rl-done-card { background: #121212; } .rl-done-check { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 8px 24px rgba(34,197,94,.45); animation: donePop .5s cubic-bezier(.3,1.6,.4,1) both; } @keyframes donePop { from { transform: scale(0) rotate(-30deg) } } .rl-done-card b { font-size: 17px; font-weight: 800; } .rl-done-card span:last-child { font-size: 12.5px; color: #9ca3af; } /* Reel audio mixer */ .rl-mixer { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f7; } .dark .rl-mixer { border-color: #232323; } .rl-mixer label { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: #64748b; margin-bottom: 5px; } .dark .rl-mixer label { color: #a1a1aa; } .rl-mixer label span { display: inline-flex; align-items: center; gap: 5px; } .rl-mixer label b { font-weight: 800; color: #111; } .dark .rl-mixer label b { color: #f4f4f5; } .rl-range { width: 100%; height: 4px; border-radius: 999px; appearance: none; background: linear-gradient(90deg, #a855f7, #ec4899); cursor: pointer; } .rl-range:disabled { background: #d4d4d8; cursor: not-allowed; } .dark .rl-range:disabled { background: #333; } .rl-range::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #a855f7; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .rl-range:disabled::-webkit-slider-thumb { border-color: #9ca3af; } /* ===== Community management ===== */ .cm-cover-btn, .cm-gear { position: absolute; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); transition: transform .2s, background .2s; } .cm-cover-btn { left: 50%; top: 50%; transform: translate(-50%, -50%); } .cm-cover-btn:hover { transform: translate(-50%, -50%) scale(1.12); background: rgba(0,0,0,.62); } .cm-gear { right: 10px; top: 10px; } .cm-gear:hover { transform: rotate(45deg) scale(1.1); background: rgba(0,0,0,.62); } .cm-mbtn { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; color: #64748b; transition: all .18s; } .dark .cm-mbtn { border-color: #2a2a2a; color: #a1a1aa; } .cm-mbtn:hover { border-color: #9ca3af; color: #111; } .dark .cm-mbtn:hover { color: #fff; } .cm-mbtn.danger:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.08); } .cm-pending { border: 1px solid #fde68a; background: #fffbeb; border-radius: 16px; padding: 12px; margin-bottom: 14px; } .dark .cm-pending { border-color: #422006; background: #1c1503; } .cm-pending h3 { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #b45309; margin-bottom: 9px; } .dark .cm-pending h3 { color: #fbbf24; } .cm-pending-row { display: flex; align-items: center; gap: 9px; padding: 7px; border-radius: 11px; background: rgba(255,255,255,.7); margin-bottom: 6px; } .dark .cm-pending-row { background: rgba(255,255,255,.05); } .cm-approve { display: inline-flex; align-items: center; gap: 4px; flex: none; border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 800; color: #fff; background: #16a34a; transition: filter .18s, transform .18s; } .cm-approve:hover { filter: brightness(1.1); transform: scale(1.04); } .cm-decline { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #ef4444; border: 1px solid #fca5a5; transition: background .18s; } .cm-decline:hover { background: rgba(239,68,68,.12); } .cm-toggle-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid #e5e7eb; transition: background .18s; } .dark .cm-toggle-row { border-color: #262626; } .cm-toggle-row:hover { background: rgba(148,163,184,.08); } .cm-toggle-row b { display: block; font-size: 12.5px; font-weight: 700; } .cm-toggle-row em { display: block; font-style: normal; font-size: 11px; color: #9ca3af; line-height: 1.4; margin-top: 2px; } /* Cover upload progress */ .cm-upload { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 10px 14px; background: linear-gradient(transparent, rgba(0,0,0,.65)); animation: hovIn .2s both; } .cm-upload-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; } .cm-upload-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #ec4899); transition: width .25s ease; position: relative; } .cm-upload-bar span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: upShine 1.1s linear infinite; } @keyframes upShine { from { transform: translateX(-100%) } to { transform: translateX(100%) } } .cm-upload-label { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); } /* ===== Marketplace ===== */ .mk-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; transition: transform .25s cubic-bezier(.3,1.2,.4,1), box-shadow .25s, border-color .25s; } .dark .mk-card { background: #0f0f0f; border-color: #232323; } .mk-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.14); border-color: #d4d4d8; } .dark .mk-card:hover { box-shadow: 0 14px 32px rgba(0,0,0,.55); } .mk-thumb { position: relative; aspect-ratio: 1; overflow: hidden; background: linear-gradient(135deg, #2fd573, #0ea5e9); display: flex; align-items: center; justify-content: center; } .mk-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .mk-card:hover .mk-thumb img { transform: scale(1.06); } .mk-ph { color: #fff; font-size: 30px; font-weight: 900; } .mk-sold { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: 2px; } .mk-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; }.mk-price { text-align: right; flex: none; font-size: 14px; font-weight: 900; color: #059669; } .dark .mk-price { color: #34d399; } /* The heading is a row: icon then words. A -webkit-box here overrode the flex the markup asks for and stacked the icon above the text. */ .mk-title { font-size: 12.5px; font-weight: 600; color: #111827; line-height: 1.3; } /* The clamp belongs on an asset's name, not on the heading. */ .mk-row .mk-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mk-meta { font-size: 10.5px; color: #9ca3af; margin-top: 2px; } /* Seller storefront */ .sl-card { border-radius: 20px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; } .dark .sl-card { background: #0f0f0f; border-color: #232323; } .sl-banner { height: 96px; background: linear-gradient(120deg, #2fd573, #0ea5e9, #7b2ff7); } .sl-name { font-size: 19px; font-weight: 900; } .sl-name:hover { text-decoration: underline; } .sl-bio { font-size: 12.5px; color: #6b7280; margin-top: 2px; } .dark .sl-bio { color: #9ca3af; } .sl-msg { display: inline-flex; align-items: center; gap: 5px; flex: none; border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #059669, #0ea5e9); transition: transform .2s, filter .2s; } .sl-msg:hover { transform: scale(1.04); filter: brightness(1.08); } .sl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; } .sl-stats > div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 4px; border-radius: 14px; background: #f8fafc; border: 1px solid #eef2f7; color: #64748b; transition: transform .2s; } .dark .sl-stats > div { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); } .sl-stats > div:hover { transform: translateY(-2px); } .sl-stats b { font-size: 15px; font-weight: 900; color: #111; } .dark .sl-stats b { color: #f4f4f5; } .sl-stats span { font-size: 9.5px; font-weight: 700; } /* Marketplace discovery controls */ .mk-controls { border-radius: 18px; padding: 14px; margin-bottom: 16px; border: 1px solid #e5e7eb; background: #fff; } .dark .mk-controls { background: #0f0f0f; border-color: #232323; }.mk-search { width: 100%; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 999px; padding: 10px 15px; font-size: 12px; outline: none; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; transition: border-color .2s; } .dark .mk-search { background: #161616; border-color: #262626; color: #eee; } .mk-search:focus-within { border-color: #059669aa; } .mk-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 700; background: #f1f5f9; color: #475569; transition: all .18s cubic-bezier(.3,1.3,.4,1); } .dark .mk-chip { background: #161616; color: #a1a1aa; } .mk-chip:hover { transform: translateY(-2px); } .mk-chip.on { background: linear-gradient(90deg, #059669, #0ea5e9); color: #fff; } .mk-sort { border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9; transition: all .18s; } .dark .mk-sort { background: #161616; color: #a1a1aa; } .mk-sort.on { background: #111; color: #fff; } .dark .mk-sort.on { background: #fff; color: #111; } .mk-toggle-hide { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #64748b; cursor: pointer; } .mk-toggle-hide input { accent-color: #059669; } /* ===== Marketplace: notr-style layout ===== */ .mkp-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .mkp-brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 900; flex: none; } .mkp-searchbar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 11px 16px; background: #f1f5f9; border: 1px solid transparent; transition: border-color .2s, background .2s; } .dark .mkp-searchbar { background: #141414; } .mkp-searchbar:focus-within { border-color: #059669aa; background: #fff; } .dark .mkp-searchbar:focus-within { background: #0d0d0d; } .mkp-add { display: inline-flex; align-items: center; gap: 6px; flex: none; border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #059669, #0ea5e9); box-shadow: 0 6px 18px rgba(5,150,105,.28); transition: transform .2s, filter .2s; } .mkp-add:hover { transform: translateY(-2px); filter: brightness(1.08); } .mkp-layout { display: flex; gap: 16px; align-items: flex-start; } .mkp-cats { width: 216px; flex: none; border-radius: 18px; padding: 8px; border: 1px solid #e5e7eb; background: #fff; } .dark .mkp-cats { background: #0f0f0f; border-color: #232323; } .mkp-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; transition: background .18s; } .mkp-cat:hover { background: rgba(148,163,184,.14); } .mkp-cat.on { background: rgba(148,163,184,.18); font-weight: 800; } .mkp-cat span:last-child { margin-left: auto; font-size: 11.5px; color: #9ca3af; font-weight: 700; } /* Hero carousel */ .mkp-hero { flex: 1; min-width: 0; position: relative; border-radius: 20px; overflow: hidden; display: flex; min-height: 300px; border: 1px solid #e5e7eb; background: #fff; } .dark .mkp-hero { background: #0f0f0f; border-color: #232323; } .mkp-hero-text { flex: 1; min-width: 0; padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; gap: 9px; } .mkp-badge { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; border-radius: 999px; padding: 5px 12px; font-size: 10.5px; font-weight: 900; letter-spacing: 1px; background: rgba(148,163,184,.18); } .mkp-hero-title { font-size: 30px; font-weight: 900; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mkp-hero-desc { font-size: 13.5px; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dark .mkp-hero-desc { color: #9ca3af; } .mkp-hero-price { font-size: 30px; font-weight: 900; } .mkp-hero-btn { align-self: flex-start; margin-top: 6px; border-radius: 999px; padding: 11px 24px; font-size: 13.5px; font-weight: 800; background: #111; color: #fff; transition: transform .2s; } .dark .mkp-hero-btn { background: #fff; color: #111; } .mkp-hero-btn:hover { transform: scale(1.05); } .mkp-hero-img { width: 46%; flex: none; position: relative; overflow: hidden; } .mkp-hero-img img { width: 100%; height: 100%; object-fit: cover; } .mkp-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px); z-index: 3; transition: transform .2s, background .2s; } .mkp-hero-nav:hover { background: rgba(0,0,0,.65); transform: translateY(-50%) scale(1.1); } .mkp-dots { position: absolute; left: 30px; bottom: 20px; display: flex; gap: 6px; z-index: 3; } .mkp-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(148,163,184,.5); transition: all .25s; } .mkp-dot.on { width: 22px; background: #059669; } /* Sellers rail */ .mkp-seller { display: flex; align-items: center; gap: 11px; flex: none; border-radius: 16px; padding: 11px 16px 11px 11px; border: 1px solid #e5e7eb; background: #fff; transition: transform .22s, box-shadow .22s; } .dark .mkp-seller { background: #0f0f0f; border-color: #232323; } .mkp-seller:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.12); } .mkp-seller-count { text-align: center; padding-left: 12px; margin-left: 4px; border-left: 1px solid #eef2f7; } .dark .mkp-seller-count { border-color: #232323; } .mkp-seller-count b { display: block; font-size: 19px; font-weight: 900; line-height: 1; } .mkp-seller-count span { font-size: 9.5px; color: #9ca3af; font-weight: 700; } /* Sort tabs */ .mkp-sort { font-size: 14px; font-weight: 700; color: #9ca3af; padding-bottom: 7px; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; } .mkp-sort.on { color: inherit; font-weight: 800; border-color: currentColor; } /* Product card */ .mkp-card { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; transition: transform .25s cubic-bezier(.3,1.2,.4,1); } .mkp-card:hover { transform: translateY(-4px); } .mkp-img { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #2fd573, #0ea5e9); } .mkp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .mkp-card:hover .mkp-img img { transform: scale(1.07); } .mkp-views { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 8px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); } .mkp-fav { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); transition: transform .2s, background .2s; } .mkp-fav:hover { transform: scale(1.14); background: rgba(0,0,0,.7); } .mkp-fav.on { background: #ef4444; } .mkp-info { padding: 9px 2px 0; display: flex; flex-direction: column; gap: 1px; } .mkp-name { font-size: 13.5px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .mkp-spec { font-size: 11.5px; color: #9ca3af; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mkp-cost { font-size: 16px; font-weight: 900; margin-top: 4px; } /* Seller reviews */ .sl-rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12.5px; transition: opacity .18s; } .sl-rating:hover { opacity: .75; } .sl-rating b { font-weight: 900; } .sl-rating span { color: #9ca3af; } .sl-breakdown { display: flex; gap: 24px; align-items: center; border-radius: 16px; padding: 18px; margin-bottom: 14px; border: 1px solid #e5e7eb; background: #fff; } .dark .sl-breakdown { background: #0f0f0f; border-color: #232323; } .sl-score { text-align: center; flex: none; } .sl-score b { display: block; font-size: 38px; font-weight: 900; line-height: 1; } .sl-score span { display: block; font-size: 11px; color: #9ca3af; margin-top: 4px; } .sl-bar-row { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #9ca3af; font-weight: 700; margin-bottom: 4px; } .sl-bar { flex: 1; height: 7px; border-radius: 999px; background: #eef2f7; overflow: hidden; } .dark .sl-bar { background: #232323; } .sl-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #f59e0b); transition: width .6s ease; } .sl-write { border-radius: 16px; padding: 16px; margin-bottom: 14px; border: 1px solid #e5e7eb; background: #fff; } .dark .sl-write { background: #0f0f0f; border-color: #232323; } .sl-write h4 { font-size: 13px; font-weight: 800; margin-bottom: 9px; } .sl-star-btn { color: #d4d4d8; transition: transform .18s, color .18s; } .sl-star-btn:hover { transform: scale(1.18); } .sl-star-btn.on { color: #fbbf24; } .sl-field { width: 100%; border-radius: 12px; padding: 10px 13px; font-size: 13px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; resize: none; } .dark .sl-field { background: #161616; border-color: #262626; color: #eee; } .sl-field:focus { border-color: #059669aa; } .sl-submit { margin-top: 9px; border-radius: 999px; padding: 8px 20px; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #059669, #0ea5e9); transition: transform .2s, opacity .2s; } .sl-submit:hover { transform: scale(1.04); } .sl-submit.off { opacity: .4; cursor: not-allowed; transform: none; } .sl-review { display: flex; gap: 11px; border-radius: 14px; padding: 13px; border: 1px solid #e5e7eb; background: #fff; } .dark .sl-review { background: #0f0f0f; border-color: #232323; } /* ===== Marketplace v2 — hero, tiles, rich cards ===== */ .mv-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .mv-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; border-radius: 14px; padding: 12px 18px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .dark .mv-search { background: #131316; border-color: #26262b; } .mv-search:focus-within { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.12); } .mv-post { display: inline-flex; align-items: center; gap: 7px; flex: none; border-radius: 12px; padding: 11px 20px; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 6px 20px rgba(109,40,217,.35); transition: transform .2s, filter .2s; } .mv-post:hover { transform: translateY(-2px); filter: brightness(1.1); } .mv-icobtn { width: 42px; height: 42px; border-radius: 12px; flex: none; position: relative; display: flex; align-items: center; justify-content: center; background: #f4f4f7; color: #52525b; transition: all .2s; } .dark .mv-icobtn { background: #18181b; color: #a1a1aa; } .mv-icobtn:hover { background: #ede9fe; color: #6d28d9; transform: translateY(-2px); } .mv-icobtn b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .mv-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,255,255,.07); } .mv-hero::before { content: ''; position: absolute; right: 90px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.05); } .mv-hero h1 { font-size: 44px; font-weight: 900; line-height: 1.05; letter-spacing: -1px; } .mv-hero h1 em { font-style: normal; color: #fbbf24; display: block; } .mv-hero-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: 14px; color: #111; } .mv-hero-go:hover { transform: scale(1.05); } @keyframes mvFloat { 0%,100% { transform: translateY(-50%) } 50% { transform: translateY(-58%) } } /* Category tiles */ .mv-tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 18px; } .mv-tile:hover { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(0,0,0,.12); } .mv-sechead h2 { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 900; } .dark .mv-pill { background: #18181b; color: #a1a1aa; } .mv-pill:hover { transform: translateY(-2px); } /* Listing card */ .mv-card { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid #e9e9ee; background: #fff; transition: transform .28s cubic-bezier(.3,1.2,.4,1), box-shadow .28s, border-color .28s; } .dark .mv-card { background: #121215; border-color: #26262b; } .mv-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.16); border-color: #c4b5fd; } .mv-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .mv-card:hover .mv-photo img { transform: scale(1.08); } .mv-heart { position: absolute; right: 11px; top: 11px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #a1a1aa; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .2s, color .2s; } .mv-heart:hover { transform: scale(1.14); color: #ef4444; } .mv-heart.on { color: #ef4444; } /* Price sits bottom-right over the photo, per the reference */ .mv-price { position: absolute; right: 11px; bottom: 11px; border-radius: 999px; padding: 6px 14px; font-size: 15px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 4px 14px rgba(76,29,149,.45); } .mv-stars { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #71717a; } .mv-seller { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding-top: 2px; } .mv-seller:hover { color: #6d28d9; } .mv-btn:hover { transform: translateY(-2px); } .mv-btn.ghost { background: #f4f4f7; color: #52525b; } .dark .mv-btn.ghost { background: #1c1c20; color: #d4d4d8; } .mv-panel { border-radius: 18px; padding: 16px; border: 1px solid #e9e9ee; background: #fff; } .dark .mv-panel { background: #121215; border-color: #26262b; } .mv-panel h3 { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 900; margin-bottom: 12px; } .mv-rank { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 13px; transition: background .18s; } .mv-rank:hover { background: rgba(124,58,237,.08); } .mv-crown { margin-left: auto; font-size: 17px; } .mv-promo { border-radius: 18px; padding: 22px; color: #fff; position: relative; overflow: hidden; background: linear-gradient(135deg, #7c3aed, #4f46e5); } .mv-promo::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.10); } .mv-promo h4 { font-size: 21px; font-weight: 900; line-height: 1.15; position: relative; z-index: 2; } .mv-promo p { font-size: 12.5px; opacity: .85; margin-top: 7px; position: relative; z-index: 2; } .mv-promo a { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; border-radius: 999px; padding: 9px 18px; font-size: 12.5px; font-weight: 800; background: #fbbf24; color: #422006; position: relative; z-index: 2; transition: transform .2s; } .mv-promo a:hover { transform: translateX(3px); } .mv-viewall:hover { transform: translateX(2px); background: rgba(109,40,217,.18); } .mv-select { position: relative; display: inline-flex; align-items: center; } .mv-select select { appearance: none; border-radius: 999px; padding: 9px 34px 9px 16px; font-size: 12.5px; font-weight: 700; background: #fff; border: 1px solid #e5e7eb; color: inherit; cursor: pointer; outline: none; } .dark .mv-select select { background: #131316; border-color: #26262b; } .mv-select svg { position: absolute; right: 12px; pointer-events: none; color: #a1a1aa; } .mv-viewtoggle { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: #f4f4f7; } .dark .mv-viewtoggle { background: #18181b; } .mv-viewtoggle button { width: 32px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #71717a; transition: all .18s; } .mv-viewtoggle button.on { background: #6d28d9; color: #fff; } .mv-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f1f4; } .dark .mv-foot { border-color: #1f1f23; } .mv-foot .mv-seller { flex: 1; min-width: 0; padding-top: 0; } .mv-save { color: #a1a1aa; transition: color .18s, transform .18s; flex: none; } .mv-save:hover { color: #6d28d9; transform: scale(1.14); } .mv-save.on { color: #6d28d9; } /* ===== Marketplace v3 ===== */ /* House rule: buttons use rounded corners, not pills or circles. */ .mv-post, .mv-btn, .mv-viewall, .mv-icobtn, .mv-hero-go, .mv-pill, .mv-select select, .mv-navitem, .mv-sellbtn, .mv-follow, .mv-catnav { border-radius: 12px !important; } .dark .mv-navitem { color: #a1a1aa; } .mv-catnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #fff; color: #3f3f46; border: 1px solid #e5e7eb; box-shadow: 0 3px 12px rgba(0,0,0,.14); transition: transform .2s; } .dark .mv-catnav { background: #1a1a1e; color: #e4e4e7; border-color: #2a2a30; } .mv-catnav:hover { transform: translateY(-50%) scale(1.1); }.mv-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 8px; border-radius: 16px; font-size: 12.5px; font-weight: 800; border: 1px solid transparent; transition: transform .25s cubic-bezier(.3,1.3,.4,1), box-shadow .25s; flex: 0 0 132px; } /* Dark mode tiles were rendering white — force a dark surface. */ .dark .mv-tile { background: #17171b !important; color: #d4d4d8 !important; border-color: #26262b; } .mv-priceline { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; } .mv-bigprice { font-size: 20px; font-weight: 900; letter-spacing: -.4px; } .mv-loc { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #a1a1aa; font-weight: 600; } .dark .mv-sellerrow { border-color: #1f1f23; } .mv-sellerrow .mv-stars { margin-left: 2px; } .mv-follow:hover { background: rgba(109,40,217,.2); } .mv-follow.on { background: #dcfce7; color: #15803d; } .dark .mv-follow.on { background: rgba(34,197,94,.18); color: #86efac; } /* Condition badges, per the reference palette */ .mv-cond { position: absolute; left: 11px; top: 11px; border-radius: 9px; padding: 4px 11px; font-size: 10.5px; font-weight: 900; background: #fff; color: #111; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .mv-cond.new { background: #dcfce7; color: #15803d; } .mv-cond.like-new { background: #ede9fe; color: #6d28d9; } .mv-cond.used { background: #fef3c7; color: #b45309; } .mv-cond.fair { background: #ffe4e6; color: #9f1239; } .mv-sellbtn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); transform: translateX(-100%); animation: sellShine 2.6s ease-in-out infinite; } @keyframes sellShine { 0%, 55% { transform: translateX(-100%) } 100% { transform: translateX(100%) } } .mv-sellbtn:hover { transform: translateY(-2px); } @keyframes sellPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(109,40,217,.4) } 50% { box-shadow: 0 0 0 10px rgba(109,40,217,0) } } /* Compact side lists */ .mv-mini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; transition: background .18s; } .mv-mini:hover { background: rgba(109,40,217,.07); } .mv-mini-img { width: 44px; height: 44px; border-radius: 9px; flex: none; overflow: hidden; background: linear-gradient(135deg, #7c3aed, #4f46e5); display: flex; align-items: center; justify-content: center; color: #fff; } .mv-mini-img img { width: 100%; height: 100%; object-fit: cover; } .mv-mini b { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-mini span { display: block; font-size: 11px; color: #a1a1aa; font-weight: 700; } /* ===== Marketplace v4 ===== */ /* Nav sits flush with the hero and the rows sit closer together. */ /* Tighter category tiles */ .mv-tile span:first-child { font-size: 28px; line-height: 1; } /* Right column */ .mv-side { width: 320px; flex: none; display: flex; flex-direction: column; gap: 14px; position: sticky; align-self: flex-start; } /* Richer side list rows */ .mv-h3ico { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; } .mv-h3ico.sold { background: linear-gradient(135deg, #10b981, #059669); } .mv-count { margin-left: auto; min-width: 22px; height: 22px; border-radius: 8px; background: #f4f4f7; color: #71717a; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 6px; } .dark .mv-count { background: #1f1f23; color: #a1a1aa; } .mv-rich { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 13px; transition: background .2s, transform .2s; } .dark .mv-rich-rank { color: #7c3aed; } .mv-rich-img { position: relative; width: 48px; height: 48px; border-radius: 11px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); } .mv-rich-img img { width: 100%; height: 100%; object-fit: cover; } .mv-rich-img.sold img { filter: grayscale(.5) brightness(.75); } .mv-rich-sold { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 900; letter-spacing: .5px; font-style: normal; background: rgba(0,0,0,.45); } .mv-rich b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-rich-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .mv-rich-meta i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #a1a1aa; } /* Hero */ .mv-hero { position: relative; border-radius: 22px; overflow: hidden; padding: 38px 40px; background: linear-gradient(120deg, #4c1d95 0%, #6d28d9 45%, #7e22ce 100%); color: #fff; display: flex; align-items: center; justify-content: center; } .mv-hero-inner { position: relative; z-index: 2; max-width: 520px; text-align: center; margin: 0 auto; } .mv-hero-search { display: flex; align-items: center; gap: 10px; margin-top: 22px; border-radius: 999px; padding: 7px 7px 7px 20px; background: #fff; max-width: 430px; margin: 22px auto 0; } .mv-hero p { font-size: 14.5px; opacity: .85; margin-top: 12px; line-height: 1.5; max-width: 400px; margin-left: auto; margin-right: auto; } .mv-hero-emoji { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); font-size: 104px; z-index: 2; filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); animation: mvFloat 4s ease-in-out infinite; } /* Save button beside Follow, with a pop on select */ .mv-savebtn { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 30px; border-radius: 12px; color: #a1a1aa; background: #f4f4f7; transition: color .2s, background .2s, transform .2s; } .dark .mv-savebtn { background: #1f1f23; } .mv-savebtn:hover { color: #6d28d9; transform: translateY(-2px); } .dark .mv-savebtn.on { color: #c4b5fd; background: rgba(139,92,246,.2); } @keyframes savePop { 0% { transform: scale(1) } 45% { transform: scale(1.35) rotate(-8deg) } 100% { transform: scale(1) } } /* Sell CTA */ .mv-sellbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; font-size: 14px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #e11d48, #be123c); position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(225,29,72,.35); } .mv-sellwrap { animation: sellPulseRed 2.4s ease-in-out infinite; border-radius: 12px; } @keyframes sellPulseRed { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,.4) } 50% { box-shadow: 0 0 0 10px rgba(225,29,72,0) } } /* Plain single-colour action buttons */ .mv-btn.solid { background: #e11d48; color: #fff; } .mv-btn.solid:hover { background: #be123c; } .mv-hero-go { display: inline-flex; align-items: center; gap: 6px; flex: none; border-radius: 999px; padding: 10px 20px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #e11d48, #be123c); transition: transform .2s; } .mv-navitem.on { background: linear-gradient(135deg, #e11d48, #be123c); color: #fff; font-weight: 800; box-shadow: 0 5px 16px rgba(225,29,72,.3); } .mv-navitem:hover { background: rgba(225,29,72,.09); color: #e11d48; } .dark .mv-navitem:hover { background: rgba(244,63,94,.14); color: #fda4af; } .mv-follow { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto; padding: 6px 11px; font-size: 11px; font-weight: 800; color: #e11d48; background: rgba(225,29,72,.10); transition: all .18s; } .dark .mv-follow { background: rgba(244,63,94,.16); color: #fda4af; } .mv-savebtn:hover, .mv-savebtn.on { color: #e11d48; }.mv-savebtn.on { color: #6d28d9; background: rgba(225,29,72,.14); animation: savePop .45s cubic-bezier(.3,1.7,.4,1); } .mv-rich-meta em { font-style: normal; font-size: 13px; font-weight: 900; color: #e11d48; } .dark .mv-rich-meta em { color: #fda4af; } .mv-rich-rank { width: 20px; text-align: center; flex: none; font-size: 13px; font-weight: 900; color: #fda4af; } .mv-h3ico.saved { background: linear-gradient(135deg, #e11d48, #be123c); } .mv-tile.on { border-color: #e11d48; box-shadow: 0 8px 22px rgba(0,0,0,.14); } .dark .mv-tile.on { background: rgba(225,29,72,.20) !important; color: #fecdd3 !important; border-color: #e11d48; } .mv-iconsort button:hover { color: #e11d48; } .mv-pill.on { background: #ffe4e6; color: #be123c; } .dark .mv-pill.on { background: rgba(225,29,72,.25); color: #fecdd3; } .mv-rich:hover { background: rgba(225,29,72,.07); transform: translateX(3px); } .dark .mv-rich:hover { background: rgba(244,63,94,.12); } /* Marketplace v2 refinements */ .mv-viewall { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 800; color: #e11d48; background: rgba(225,29,72,.10); transition: transform .2s, background .2s; } .dark .mv-viewall { background: rgba(244,63,94,.16); color: #fda4af; } /* Calmer card typography */ .mv-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -.1px; } /* Left in-page nav */ .mv-nav { width: 188px; flex: none; display: flex; flex-direction: column; gap: 0; padding-top: 0; justify-content: space-between; align-self: stretch; } .dark .sb-menu { background: #141416; border-color: #26262b; } .sb-menu a, .sb-menu button { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; font-size: 13px; font-weight: 600; text-align: left; transition: background .16s; } .sb-menu a:hover, .sb-menu button:hover { background: rgba(148,163,184,.16); } .sb-menu button.danger { color: #ef4444; } .sb-menu-sep { height: 1px; margin: 4px 6px; background: #f1f1f4; } .dark .sb-menu-sep { background: #26262b; } /* ===== Marketplace v7 ===== */ /* Heart on the photo for the watchlist */ .mv-photoheart { position: absolute; right: 10px; top: 10px; z-index: 3; cursor: pointer; width: 32px; height: 32px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.34); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); transition: transform .2s, background .2s, color .2s; } .mv-photoheart:hover { transform: scale(1.12); background: rgba(0,0,0,.5); } /* Smaller action buttons */ .mv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 10px; padding: 7px 5px; font-size: 10.5px; font-weight: 800; transition: transform .2s, filter .2s; } /* Sort + view: icons only */ .mv-iconsort { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: #f4f4f7; } .dark .mv-iconsort { background: #18181b; } .mv-iconsort button { width: 34px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #71717a; transition: all .18s; background: transparent; } .mv-iconsort button:not(.on):hover { background: rgba(0,0,0,.05); color: #3f3f46; } .dark .mv-iconsort button:not(.on):hover { background: rgba(255,255,255,.06); color: #e4e4e7; }.mv-iconsort button.on { background: #e11d48; color: #fff; } /* Categories align with the cards below */ /* List view: description, and actions stacked on the right */ .mv-desc { font-size: 12.5px; line-height: 1.5; color: #71717a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dark .mv-desc { color: #a1a1aa; } .mv-card.row .mv-body > *:not(.mv-actions) { flex: 1; min-width: 0; } .mv-photocell { position: relative; aspect-ratio: 1; border-radius: 11px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); transition: transform .22s cubic-bezier(.3,1.3,.4,1); } .mv-photocell:hover { transform: scale(1.06); z-index: 2; } .mv-photocell img { width: 100%; height: 100%; object-fit: cover; } .mv-photocell.sold img { filter: grayscale(.45) brightness(.75); } .mv-photocell > i { position: absolute; top: 5px; left: 5px; font-style: normal; font-size: 8px; font-weight: 900; letter-spacing: .5px; padding: 2px 5px; border-radius: 6px; background: #10b981; color: #fff; } /* Only the illustration — the supplied banner's own copy is cropped away so it can't double up with the live text and working search field. */ /* Fill the whole banner with the artwork so its own backdrop sits behind the copy — no seam between a solid panel and the image. */ /* The full banner at its native 2.92:1 — the container matches that aspect, so the whole composition stays intact with no cropping. */ .mv-hero2-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; object-fit: fill; } .mv-hero2::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: none; } .mv-hero2-inner { position: relative; z-index: 3; padding: 26px 32px; max-width: 48%; } .mv-hero2 h1 { font-size: 34px; font-weight: 900; line-height: 1.03; letter-spacing: -1px; } .mv-hero2 h1 em { font-style: normal; color: #fbbf24; display: block; } .mv-hero2 p { font-size: 12.5px; opacity: .88; margin-top: 8px; line-height: 1.45; max-width: 290px; } .mv-hero2-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 12.5px; color: #111; } .mv-hero2-go:hover { transform: scale(1.05); } @media (max-width: 1100px) { .mv-hero2-inner { max-width: 100%; } .mv-hero2::after { background: rgba(45,20,105,.85); } } /* Photo grids for saved / sold */ .mv-photogrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .mv-photocell > span { position: absolute; left: 5px; right: 5px; bottom: 5px; border-radius: 8px; padding: 5px 7px; font-size: 12px; font-weight: 900; color: #fff; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Frosted price, bottom-right over the photo */ .mv-glassprice { position: absolute; right: 10px; bottom: 10px; z-index: 3; border-radius: 12px; padding: 7px 13px; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.2px; background: rgba(0,0,0,.55); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 6px 18px rgba(0,0,0,.4); border-color: rgba(255,255,255,.3); } /* ===== Listing detail ===== */ .ld-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-radius: 14px; padding: 13px 18px; margin-bottom: 14px; font-size: 13px; background: #fff; border: 1px solid #e9e9ee; } .dark .ld-crumbs { background: #121215; border-color: #26262b; } .ld-crumbs a { color: #e11d48; font-weight: 600; } .ld-crumbs a:hover { text-decoration: underline; } .ld-crumbs > span:last-child { font-weight: 800; } .ld-crumbs svg { color: #d4d4d8; flex: none; } @media (max-width: 1100px) { .ld-grid { grid-template-columns: 1fr; } } .dark .ld-stage { background: #17171b; } .ld-stage img { width: 100%; height: 100%; object-fit: cover; } .ld-empty { color: #c4c4cc; } .ld-badge { position: absolute; left: 16px; top: 16px; border-radius: 10px; padding: 6px 14px; font-size: 11px; font-weight: 900; letter-spacing: .6px; } .ld-badge.new { background: #10b981; color: #fff; } .ld-badge.like-new { background: #7c3aed; color: #fff; } .ld-badge.used { background: #f59e0b; color: #fff; } .ld-badge.fair { background: #e11d48; color: #fff; } .ld-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #fff; color: #3f3f46; box-shadow: 0 4px 16px rgba(0,0,0,.2); transition: transform .2s; } .ld-nav:hover { transform: translateY(-50%) scale(1.1); } .ld-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; } .ld-thumb { width: 84px; height: 64px; border-radius: 11px; overflow: hidden; flex: none; border: 2px solid transparent; transition: border-color .2s, transform .2s; } .ld-thumb img { width: 100%; height: 100%; object-fit: cover; } .ld-thumb:hover { transform: translateY(-2px); } .ld-thumb.on { border-color: #e11d48; } .dark .ld-section { background: #121215; border-color: #26262b; } .ld-section h2 { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 900; margin-bottom: 12px; } .ld-section p { font-size: 14px; line-height: 1.7; color: #52525b; white-space: pre-wrap; } .dark .ld-section p { color: #a1a1aa; } .ld-price { font-size: 32px; font-weight: 900; color: #e11d48; letter-spacing: -1px; margin-top: 8px; } .ld-seller { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #f1f1f4; } .dark .ld-seller { border-color: #26262b; } .ld-loc { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #e11d48; font-weight: 600; margin-top: 2px; } .ld-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 18px; } .ld-msg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 14px; font-size: 14px; font-weight: 800; color: #fff; background: #e11d48; transition: background .2s, transform .2s; } .ld-msg:hover { background: #be123c; transform: translateY(-2px); } .ld-save { display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; padding: 14px 18px; font-size: 14px; font-weight: 800; background: #f4f4f7; color: #3f3f46; transition: all .2s; } .dark .ld-save { background: #1f1f23; color: #d4d4d8; } .ld-save.on { background: rgba(225,29,72,.12); color: #e11d48; } .ld-buy { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; border-radius: 12px; padding: 15px; margin-top: 10px; font-size: 15px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 22px rgba(16,185,129,.32); transition: transform .2s, filter .2s; } .ld-buy:hover { transform: translateY(-2px); filter: brightness(1.07); } .ld-sold { margin-top: 10px; border-radius: 12px; padding: 14px; text-align: center; font-size: 13.5px; font-weight: 800; background: #f4f4f7; color: #71717a; } .dark .ld-sold { background: #1f1f23; color: #a1a1aa; } .ld-facts { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #f1f1f4; } .dark .ld-facts { border-color: #26262b; } .ld-facts span { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #71717a; } .dark .ld-facts span { color: #a1a1aa; } .ld-facts svg { color: #e11d48; flex: none; } /* ===== Category chips (from the supplied HTML) ===== */ .mv-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.10); } .mv-chip.tech { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } .mv-chip.fashion { background: linear-gradient(135deg, #fce7f3, #fbcfe8); } .mv-chip.home { background: linear-gradient(135deg, #d1fae5, #a7f3d0); } .mv-chip.sports { background: linear-gradient(135deg, #fee2e2, #fecaca); } .mv-chip.books { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); } .mv-chip.beauty { background: linear-gradient(135deg, #fae8ff, #f5d0fe); } .mv-chip.toys { background: linear-gradient(135deg, #fef3c7, #fde68a); } .mv-chip.other { background: linear-gradient(135deg, #f4f4f5, #e4e4e7); } .dark .mv-chip.tech, .dark .mv-chip.fashion, .dark .mv-chip.home, .dark .mv-chip.sports, .dark .mv-chip.books, .dark .mv-chip.beauty, .dark .mv-chip.toys, .dark .mv-chip.other { background: #1b1b20; color: #d4d4d8; } .mv-chip.active { background: linear-gradient(135deg, #e11d48, #be123c) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(225,29,72,.32); } /* Live search sits over the banner's own field */ .mv-hero2-search { display: flex; align-items: center; gap: 8px; margin-top: 16px; border-radius: 999px; padding: 0 0 0 16px; background: #fff; max-width: 330px; position: absolute; z-index: 3; left: 4%; bottom: 14%; width: 34%; margin: 0; height: 18%; } .mv-hero2-go { display: inline-flex; align-items: center; gap: 5px; flex: none; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #e11d48, #be123c); transition: transform .2s; height: 78%; } /* Dark theme: give the chips a real surface so they read clearly. */ .dark .mv-catwrap { background: #131317; border-color: #2a2a31; } .dark .mv-chip { color: #e4e4e7 !important; background: #212128 !important; border-color: #32323a; } .dark .mv-chip:hover { background: #2b2b34 !important; border-color: #45454f; box-shadow: 0 4px 14px rgba(0,0,0,.5); } .dark .mv-chip.active { background: linear-gradient(135deg, #e11d48, #be123c) !important; color: #fff !important; border-color: transparent; } /* ===== Marketplace hero (supplied artwork) ===== */ .mv-hero2 { position: relative; border-radius: 18px; overflow: hidden; color: #fff; aspect-ratio: 2.92 / 1; display: flex; align-items: center; background: linear-gradient(115deg, #2e1a8f 0%, #4c1d95 38%, #6d28d9 100%); width: 100%; } /* Category strip with arrows */ .mv-catwrap { position: relative; margin-top: 14px; padding-left: 2px; border-radius: 20px; padding: 12px 40px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: visible; } /* Categories wrap — no horizontal scrolling anywhere. */ .mv-catrail { display: flex !important; flex-wrap: nowrap !important; gap: 8px; overflow: visible !important; padding: 0; padding-left: 0; overflow-x: auto !important; scroll-behavior: smooth; scrollbar-width: none; } .mv-catrail::-webkit-scrollbar { display: none; } .mv-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #f4f4f7; color: #52525b; border: 1px solid #e9e9ee; transition: all .18s; } .dark .mv-arrow { background: #212128; color: #d4d4d8; border-color: #32323a; } .mv-arrow.left { left: 8px; } .mv-arrow.right { right: 8px; } .mv-arrow:hover { background: #e11d48; color: #fff; border-color: #e11d48; transform: translateY(-50%) scale(1.1); }.mv-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid transparent; border-radius: 14px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all .3s; background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(236,72,153,.1)); color: #27272a; white-space: nowrap; } .mv-chip span { font-size: 15px; line-height: 1; } /* Nav: smaller badges, tighter rows so the last item lines up with the banner. */ .mv-navitem { display: flex; align-items: center; gap: 11px; padding: 8px 11px; font-size: 13px; font-weight: 600; color: #52525b; transition: all .18s; flex: 1; } /* Smaller nav badges so the rows can sit closer */ .mv-navitem b { min-width: 15px; height: 15px; font-size: 9px; border-radius: 5px; padding: 0 3px; margin-left: auto; background: #ef4444; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; } /* Card v3 */ .mv-photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(135deg, #7c3aed, #4f46e5); } .mv-body { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 7px; flex: 1; } /* Contact and Offer side by side */ .mv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 0; padding-top: 0; } /* On narrower screens the banner gets shorter than the nav's natural height, so tighten the rows to keep the last item level with the banner's base. */ @media (max-width: 1560px) { .mv-navitem { padding: 4px 10px; font-size: 12px; gap: 10px; } .mv-navitem svg { width: 15px; height: 15px; } } @media (max-width: 1400px) { .mv-navitem { padding: 2px 9px; font-size: 11.5px; } } /* ===== Admin: marketplace settings ===== */ .ams { padding: 4px 0 40px; display: flex; flex-direction: column; gap: 16px; } .ams-head { display: flex; align-items: center; gap: 14px; } .ams-back { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f4f4f7; color: #3f3f46; transition: background .18s; flex: none; } .dark .ams-back { background: #1f1f23; color: #d4d4d8; } .ams-back:hover { background: #e4e4e7; } .ams-head h1 { font-size: 21px; font-weight: 900; } .ams-head p { font-size: 12.5px; color: #71717a; margin-top: 1px; } .ams-save { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 10px 18px; font-size: 13px; font-weight: 800; color: #fff; background: #e11d48; transition: background .2s, transform .2s; flex: none; } .ams-save:hover { background: #be123c; transform: translateY(-1px); } .ams-save:disabled { opacity: .6; } .ams-error { border-radius: 12px; padding: 11px 14px; font-size: 13px; background: #fef2f2; color: #b91c1c; } .dark .ams-error { background: rgba(185,28,28,.15); color: #fca5a5; } .ams-card { border-radius: 18px; padding: 20px; background: #fff; border: 1px solid #e9e9ee; } .dark .ams-card { background: #121215; border-color: #26262b; } .ams-card h2 { font-size: 16px; font-weight: 900; margin-bottom: 4px; } .ams-hint { font-size: 12.5px; color: #71717a; margin-bottom: 14px; } .ams-cats { display: flex; flex-direction: column; gap: 8px; } .ams-cat { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #fafafa; border: 1px solid #efeff2; } .dark .ams-cat { background: #18181b; border-color: #26262b; } .ams-emoji { width: 46px; text-align: center; font-size: 17px; border-radius: 10px; padding: 8px 0; background: #fff; border: 1px solid #e5e7eb; outline: none; } .dark .ams-emoji { background: #101013; border-color: #2a2a30; } .ams-field { border-radius: 10px; padding: 9px 12px; font-size: 13px; background: #fff; border: 1px solid #e5e7eb; outline: none; color: inherit; } .dark .ams-field { background: #101013; border-color: #2a2a30; } .ams-field:focus { border-color: #e11d48aa; } .ams-del { width: 32px; height: 32px; border-radius: 10px; display: flex; flex: none; align-items: center; justify-content: center; color: #a1a1aa; transition: all .18s; } .ams-del:hover { background: rgba(239,68,68,.12); color: #ef4444; } .ams-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; border-radius: 12px; padding: 9px 16px; font-size: 12.5px; font-weight: 800; border: 1px dashed #d4d4d8; color: #71717a; transition: all .18s; } .ams-add:hover { border-color: #e11d48; color: #e11d48; } .ams-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid #f4f4f7; } .dark .ams-row { border-color: #1f1f23; } .ams-row:last-child { border-bottom: 0; } .ams-row b { display: block; font-size: 13.5px; font-weight: 700; } .ams-row em { display: block; font-style: normal; font-size: 12px; color: #a1a1aa; margin-top: 2px; } .ams-toggle { width: 42px; height: 24px; border-radius: 999px; background: #d4d4d8; flex: none; margin-left: auto; position: relative; transition: background .22s; } .dark .ams-toggle { background: #3a3a42; } .ams-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .22s; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .ams-toggle.on { background: #e11d48; } .ams-toggle.on i { transform: translateX(18px); } .ams-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .ams-grid label, .ams-label { display: block; } .ams-grid label span, .ams-label { display: block; font-size: 12px; font-weight: 700; color: #71717a; margin-bottom: 5px; } .ams-grid input { width: 100%; } /* ===== Seller profile (from the supplied design) ===== */ .sp-wrap { padding: 0; } .sp-cover { height: 150px; border-radius: 22px 22px 0 0; background: linear-gradient(120deg, #6366f1, #a855f7 48%, #ec4899); position: relative; } .sp-card { border-radius: 0 0 22px 22px; padding: 0 26px 24px; background: #fff; border: 1px solid #e9e9ee; border-top: 0; } .dark .sp-card { background: #121215; border-color: #26262b; } .sp-header { display: flex; gap: 22px; align-items: flex-start; margin-top: -52px; } .sp-avatar { position: relative; flex-shrink: 0; } .sp-avatar > span:first-child { display: block; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 8px 24px rgba(99,102,241,.35); position: relative; z-index: 2; background: #fff; } .dark .sp-avatar > span:first-child { border-color: #121215; background: #121215; } .sp-online { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; background: #22c55e; border: 4px solid #fff; } .dark .sp-online { border-color: #121215; } .sp-top { flex: 1; min-width: 0; padding-top: 58px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sp-name { font-size: 25px; font-weight: 900; letter-spacing: -.5px; } .sp-verified { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #10b981, #059669); } .sp-acts { display: flex; gap: 9px; margin-left: auto; } .sp-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; padding: 11px 20px; font-size: 13.5px; font-weight: 800; color: #fff; transition: transform .2s, filter .2s; } .sp-btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .sp-btn.msg { background: linear-gradient(135deg, #6366f1, #4f46e5); } .sp-btn.follow { background: linear-gradient(135deg, #ec4899, #db2777); } .sp-btn.follow.on { background: linear-gradient(135deg, #10b981, #059669); } .sp-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; flex: none; align-items: center; justify-content: center; background: #f4f4f7; color: #52525b; transition: all .2s; } .dark .sp-icon { background: #1f1f23; color: #d4d4d8; } .sp-icon:hover { background: #e4e4e7; transform: translateY(-2px); } .sp-bio { font-size: 14.5px; line-height: 1.65; margin-top: 16px; color: #3f3f46; } .dark .sp-bio { color: #d4d4d8; } .sp-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f1f4; font-size: 12.5px; font-weight: 600; color: #6366f1; } .dark .sp-meta { border-color: #26262b; color: #a5b4fc; } .sp-meta span { display: inline-flex; align-items: center; gap: 6px; } /* Stats */ .sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; } .dark .sp-stat { background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(236,72,153,.14)); border-color: rgba(99,102,241,.22); } .sp-stat:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.3); box-shadow: 0 8px 20px rgba(0,0,0,.08); } .sp-stat span { display: block; font-size: 12.5px; color: #71717a; margin-top: 3px; } .dark .sp-stat span { color: #a1a1aa; } /* Ratings */ .sp-rating { display: grid; grid-template-columns: auto 1fr; gap: 32px; padding: 24px; margin-top: 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(236,72,153,.05)); border: 1px solid rgba(99,102,241,.1); align-items: center; } .dark .sp-rating { background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(236,72,153,.12)); border-color: rgba(99,102,241,.2); } .sp-rating-big { font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -2px; } .sp-rating-count { font-size: 13px; color: #71717a; } .sp-bars { display: flex; flex-direction: column; gap: 10px; } .sp-bar-row { display: flex; align-items: center; gap: 12px; font-size: 13px; } .sp-bar-label { width: 60px; color: #71717a; font-weight: 500; } .sp-bar-bg { display: block; flex: 1; height: 8px; border-radius: 8px; background: rgba(0,0,0,.06); overflow: hidden; } .dark .sp-bar-bg { background: rgba(255,255,255,.08); } .sp-bar-fill { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width 1s ease; } .sp-bar-pct { width: 42px; text-align: right; font-weight: 700; } /* Stat icons: solid chip with a bold white glyph — thin strokes were nearly invisible on the coloured background, especially in light mode. */ /* ===== Seller profile v2 (flat cards, matching the reference) ===== */ .sp-card2 { border-radius: 20px; padding: 20px 24px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 10px rgba(0,0,0,.05); } .dark .sp-card2 { background: #121215; border-color: #26262b; } .sp-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sp-back { width: 34px; height: 34px; border-radius: 11px; display: flex; flex: none; align-items: center; justify-content: center; background: #f4f4f7; color: #52525b; transition: all .18s; } .dark .sp-back { background: #1f1f23; color: #d4d4d8; } .sp-back:hover { background: #e4e4e7; transform: translateX(-2px); } .sp-avatar2 { position: relative; flex: none; } .sp-avatar2 > span:first-child { display: block; border-radius: 50%; } .sp-online2 { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; border: 3px solid #fff; } .dark .sp-online2 { border-color: #121215; } .sp-name2 { font-size: 23px; font-weight: 900; letter-spacing: -.5px; } .dark .sp-metrics { background: #121215; border-color: #26262b; } .sp-stat-icon svg { color: #fff; } /* ===== Most saved list (from the reference) ===== */ .ms-list { display: flex; flex-direction: column; } .dark .ms-row { border-color: #1f1f23; } .ms-row:last-child { border-bottom: 0; } .dark .ms-row:hover { background: rgba(139,92,246,.10); } .ms-thumb img { width: 100%; height: 100%; object-fit: cover; } .ms-row b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-row em { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: #6d28d9; margin-top: 2px; } .dark .ms-row em { color: #c4b5fd; } .dark .ms-count { color: #c4b5fd; background: rgba(139,92,246,.16); } /* Empty-review celebration */ .sp-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px; text-align: center; } .sp-empty-art { position: relative; width: 108px; height: 108px; } .sp-empty-art .ring { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(236,72,153,.16)); animation: emptyPulse 2.6s ease-in-out infinite; } .sp-empty-art .cup { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; animation: emptyLift 2.6s ease-in-out infinite; } .sp-empty-art i { position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: 0; animation: emptyConfetti 2.6s ease-in-out infinite; } .sp-empty-art i:nth-child(3) { left: 10%; top: 28%; background: #6366f1; animation-delay: .1s; } .sp-empty-art i:nth-child(4) { right: 12%; top: 22%; background: #ec4899; animation-delay: .5s; } .sp-empty-art i:nth-child(5) { left: 22%; bottom: 18%; background: #f59e0b; animation-delay: .9s; } .sp-empty-art i:nth-child(6) { right: 18%; bottom: 24%; background: #10b981; animation-delay: 1.3s; } @keyframes emptyPulse { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.08); opacity: 1 } } @keyframes emptyLift { 0%,100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-7px) rotate(3deg) } } @keyframes emptyConfetti { 0% { opacity: 0; transform: translateY(6px) rotate(0) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(-22px) rotate(180deg) } } .sp-empty b { font-size: 14.5px; font-weight: 800; } .sp-empty span { font-size: 12.5px; color: #71717a; max-width: 240px; line-height: 1.5; } /* ===== Seller listings card, tabs, toast and report ===== */ .sp-listcard { border-radius: 20px; padding: 18px; margin-top: 14px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 10px rgba(0,0,0,.05); } .dark .sp-listcard { background: #121215; border-color: #26262b; } .sp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f1f1f4; } .dark .sp-tabs { border-color: #1f1f23; } .sp-tab { display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; padding: 9px 15px; font-size: 13px; font-weight: 700; color: #52525b; background: #f4f4f7; transition: all .2s; } .dark .sp-tab { background: #1b1b20; color: #a1a1aa; } .sp-tab:hover { transform: translateY(-1px); color: #6366f1; } .sp-tab.on { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; } .sp-tab-count { min-width: 20px; height: 20px; border-radius: 7px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; background: rgba(0,0,0,.07); } .dark .sp-tab-count { background: rgba(255,255,255,.09); } .sp-tab.on .sp-tab-count { background: rgba(255,255,255,.24); } .sp-toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 90; border-radius: 12px; padding: 12px 22px; font-size: 13.5px; font-weight: 700; color: #fff; background: #18181b; box-shadow: 0 12px 32px rgba(0,0,0,.28); animation: hovIn .25s cubic-bezier(.2,1.2,.3,1) both; } .sp-reason { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; font-size: 13px; font-weight: 600; text-align: left; border: 1px solid #e9e9ee; transition: all .18s; } .dark .sp-reason { border-color: #26262b; } .sp-reason:hover { border-color: #a5b4fc; } .sp-reason.on { border-color: #6366f1; background: rgba(99,102,241,.08); color: #4f46e5; } .dark .sp-reason.on { color: #a5b4fc; } .sp-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d4d4d8; flex: none; } .sp-report-send { width: 100%; border-radius: 12px; padding: 12px; font-size: 13.5px; font-weight: 800; color: #fff; background: #e11d48; transition: all .2s; } .sp-report-send:hover { background: #be123c; } .sp-report-send.off { opacity: .4; cursor: not-allowed; } /* Verified tick: solid blue disc with a white check, per the reference. */ .mv-tick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 15px; height: 15px; border-radius: 50%; background: #1a80ff; color: #fff; } /* ===== Create listing modal ===== */ .cl-card { width: min(720px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.3); animation: hovIn .26s cubic-bezier(.2,1.1,.3,1) both; } .dark .cl-card { background: #101013; } .cl-head { display: flex; align-items: center; padding: 16px 20px 12px; } .cl-title { flex: 1; font-size: 18px; font-weight: 900; } .cl-tabs { display: flex; gap: 8px; padding: 0 20px 14px; border-bottom: 1px solid #f1f1f4; } .dark .cl-tabs { border-color: #1f1f23; } .cl-tab { display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: #52525b; background: #f4f4f7; transition: all .2s; } .dark .cl-tab { background: #1b1b20; color: #a1a1aa; } .cl-tab:hover { transform: translateY(-1px); } .cl-tab.on { background: #e11d48; color: #fff; box-shadow: 0 4px 14px rgba(225,29,72,.3); } .cl-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 15px; } .cl-section { display: flex; flex-direction: column; } .cl-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: #3f3f46; margin-bottom: 7px; } .dark .cl-label { color: #d4d4d8; } .cl-badge { border-radius: 6px; padding: 2px 7px; font-size: 9.5px; font-weight: 900; letter-spacing: .3px; background: rgba(225,29,72,.12); color: #e11d48; } .dark .cl-badge { background: rgba(244,63,94,.2); color: #fda4af; } .cl-field { width: 100%; border-radius: 12px; padding: 11px 13px; font-size: 13.5px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; color: inherit; } .dark .cl-field { background: #17171b; border-color: #26262b; } .cl-field:focus { border-color: #e11d48aa; } .cl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cl-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 620px) { .cl-grid2, .cl-grid3 { grid-template-columns: 1fr; } } .cl-price, .cl-loc { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 0 12px; background: #f8fafc; border: 1px solid #eef2f7; } .dark .cl-price, .dark .cl-loc { background: #17171b; border-color: #26262b; } .cl-price:focus-within, .cl-loc:focus-within { border-color: #e11d48aa; } .cl-price span { font-size: 14px; font-weight: 800; color: #71717a; } .cl-price input, .cl-loc input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 11px 0; font-size: 13.5px; color: inherit; } .cl-loc button { color: #e11d48; padding: 4px; transition: transform .18s; } .cl-loc button:hover { transform: scale(1.15); } /* Media preview */ .cl-preview { margin-bottom: 10px; } .cl-hero { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; background: #f4f4f7; } .dark .cl-hero { background: #17171b; } .cl-hero img, .cl-hero video { width: 100%; height: 100%; object-fit: cover; } .cl-tag { position: absolute; left: 10px; top: 10px; border-radius: 8px; padding: 4px 9px; font-size: 9.5px; font-weight: 900; letter-spacing: .5px; color: #fff; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); } .cl-remove { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); transition: background .18s, transform .18s; } .cl-remove:hover { background: #e11d48; transform: scale(1.1); } .cl-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; } .cl-thumb.cover { border-color: #e11d48; } .cl-thumb img { width: 100%; height: 100%; object-fit: cover; } .cl-thumb button { position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.6); transition: background .18s; } .cl-thumb button:hover { background: #e11d48; } .dark .cl-media-btns button { color: #a1a1aa; border-color: #2f2f36; } .cl-media-btns button:hover { border-color: #e11d48; color: #e11d48; } .cl-toggle2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cl-toggle2 button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; padding: 12px; font-size: 13.5px; font-weight: 800; color: #52525b; background: #f4f4f7; transition: all .2s; } .dark .cl-toggle2 button { background: #1b1b20; color: #a1a1aa; } .cl-toggle2 button.on { background: #e11d48; color: #fff; } .dark .cl-error { background: rgba(185,28,28,.16); color: #fca5a5; } .cl-foot { padding: 14px 20px 18px; border-top: 1px solid #f1f1f4; } .dark .cl-foot { border-color: #1f1f23; } .cl-post { width: 100%; border-radius: 12px; padding: 14px; font-size: 14.5px; font-weight: 900; color: #fff; background: #e11d48; transition: background .2s, transform .2s; } .cl-post:hover { background: #be123c; transform: translateY(-2px); } .cl-post:disabled { opacity: .6; transform: none; } .cl-upload-bar { height: 8px; border-radius: 999px; background: #f1f1f4; overflow: hidden; } .dark .cl-upload-bar { background: #1f1f23; } .cl-upload-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #e11d48, #f43f5e); transition: width .25s ease; position: relative; overflow: hidden; } .cl-upload-bar span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: upShine 1.1s linear infinite; } .cl-upload p { font-size: 12.5px; font-weight: 600; color: #71717a; margin-top: 9px; text-align: center; } .dark .sp-backlink { background: rgba(244,63,94,.16); color: #fda4af; } .sp-backlink:hover { transform: translateX(-2px); background: rgba(225,29,72,.16); } /* Selected heart: solid red disc, white glyph */ .mv-photoheart.on { color: #fff; background: #e11d48; border-color: #e11d48; animation: savePop .45s cubic-bezier(.3,1.7,.4,1); } .mv-photoheart.on svg { fill: #fff; stroke: #fff; } /* Bigger media boxes; badge sits over the video box */ .cl-media-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cl-media-btns button { display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; padding: 26px 13px; font-size: 13.5px; font-weight: 700; color: #52525b; border: 2px dashed #d4d4d8; transition: all .2s; flex-direction: column; position: relative; } .cl-media-btns button svg { width: 24px; height: 24px; } .cl-media-btns button:last-child::after { content: 'Recommended'; position: absolute; top: 9px; right: 10px; border-radius: 6px; padding: 3px 9px; font-size: 9.5px; font-weight: 900; letter-spacing: .3px; background: #e11d48; color: #fff; }.cl-thumb { position: relative; width: 72px; height: 60px; border-radius: 10px; flex: none; overflow: hidden; border: 2px solid transparent; cursor: pointer; } .cl-thumb video { width: 100%; height: 100%; object-fit: cover; } .cl-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.35); } .cl-thumb span[role="button"] { position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.6); } .cl-thumb span[role="button"]:hover { background: #e11d48; } /* Price drop: old price struck through above the new one */ .mv-glassprice s { display: block; font-size: 10.5px; font-weight: 700; opacity: .65; text-decoration-thickness: 1.5px; margin-bottom: 1px; } .mv-reduced { position: absolute; left: 10px; bottom: 10px; z-index: 3; border-radius: 8px; padding: 4px 9px; font-size: 9.5px; font-weight: 900; letter-spacing: .3px; color: #fff; background: #16a34a; box-shadow: 0 3px 10px rgba(22,163,74,.4); animation: dropPulse 2.4s ease-in-out infinite; } @keyframes dropPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } } .ld-actions3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 18px; } .ld-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; padding: 12px 10px; font-size: 12.5px; font-weight: 800; transition: transform .2s, background .2s; } .ld-act:hover { transform: translateY(-2px); } .ld-act.msg { background: #e11d48; color: #fff; } .ld-act.msg:hover { background: #be123c; } .ld-act.offer { background: #fff7ed; color: #b45309; border: 1.5px solid #fcd34d; } .dark .ld-act.offer { background: rgba(251,191,36,.12); color: #fbbf24; border-color: #78350f; } .ld-act.save { background: #f4f4f7; color: #3f3f46; padding: 12px 16px; } .dark .ld-act.save { background: #1f1f23; color: #d4d4d8; } .ld-act.save.on { background: rgba(225,29,72,.12); color: #e11d48; } .dark .ld-sellermeta { color: #a1a1aa; } .ld-sellermeta i { width: 3px; height: 3px; border-radius: 50%; background: #d4d4d8; } .dark .ld-safety { background: #121215; border-color: #26262b; } .ld-safety h2 { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 900; margin-bottom: 14px; color: #16a34a; } .dark .ld-safety-card { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.2); } .ld-safety-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(22,163,74,.14); } .dark .ld-safety-card b { color: #86efac; } .dark .ld-safety-card em { color: #a1a1aa; } /* Stats and ratings live in one card */ .sp-metrics { border-radius: 20px; padding: 20px; margin-top: 14px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 10px rgba(0,0,0,.05); display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 16px; align-items: stretch; } .sp-metrics .sp-stats { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 12px; } .sp-metrics .sp-rating { margin-top: 0; height: 100%; grid-template-columns: 1fr; align-content: start; gap: 16px; position: relative; } .sp-rating-overall { text-align: left; } .sp-rating-stars { color: #f59e0b; font-size: 20px; margin: 8px 0 6px; justify-content: flex-start; display: flex; } .sp-feedback-tag { position: absolute; right: 20px; top: 20px; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: #6366f1; } .dark .sp-feedback-tag { color: #a5b4fc; } @media (max-width: 1050px) { .sp-metrics { grid-template-columns: 1fr; } } /* Stat tiles read as a row: icon left, number and label right. */ .sp-stat { border-radius: 16px; padding: 16px; text-align: left; background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(236,72,153,.08)); border: 1px solid rgba(99,102,241,.1); transition: all .3s; display: flex; align-items: center; gap: 14px; } /* Filled-look icon chips so the glyph reads clearly */ .sp-stat-icon { width: 44px; height: 44px; border-radius: 12px; margin: 0 !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.2); color: #fff; flex: none; } .sp-stat b { display: block; font-size: 24px; font-weight: 900; letter-spacing: -.7px; } .el-buyer { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; border: 1px solid #e9e9ee; transition: all .18s; } .dark .el-buyer { border-color: #26262b; } .el-buyer:hover { border-color: #fda4af; } .el-buyer.on { border-color: #e11d48; background: rgba(225,29,72,.07); color: #e11d48; } .el-drop { font-size: 11px; font-weight: 700; color: #16a34a; margin-top: 5px; } /* Most saved rows sit closer together */ .ms-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f1f1f4; transition: background .18s; animation: msIn .45s cubic-bezier(.2,1,.3,1) both; position: relative; } @keyframes msIn { from { opacity: 0; transform: translateX(-10px) } }.ms-row:hover { background: rgba(109,40,217,.05); transform: translateX(4px); } .ms-row:hover .ms-thumb { transform: scale(1.07) rotate(-2deg); }.ms-thumb { width: 46px; height: 46px; border-radius: 11px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #7c3aed, #5b21b6); transition: transform .28s cubic-bezier(.3,1.3,.4,1); } .ms-row:hover .ms-count { background: #e11d48; color: #fff; }.ms-count { display: inline-flex; align-items: center; gap: 5px; flex: none; border-radius: 11px; padding: 6px 11px; font-size: 12px; font-weight: 600; color: #6d28d9; background: rgba(109,40,217,.09); transition: background .2s, color .2s; } @keyframes cdUp { from { transform: translateY(100%) } } .cd.min { width: 268px; } .cd-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, #e11d48, #be123c); color: #fff; cursor: pointer; } .cd-head b { display: block; font-size: 13.5px; font-weight: 800; } .cd-head em { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 10.5px; opacity: .9; } .cd-head em i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; } .cd-head button { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; transition: background .18s; } .cd-head button:hover { background: rgba(255,255,255,.22); } .cd-body { height: 300px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fafafa; } .dark .cd-body { background: #0d0d10; } .cd-empty { font-size: 12px; color: #a1a1aa; text-align: center; margin: auto; } .cd-msg { max-width: 78%; border-radius: 14px; padding: 9px 13px; font-size: 13px; line-height: 1.45; animation: hovIn .2s both; } .cd-msg.in { align-self: flex-start; background: #efeff3; border-bottom-left-radius: 5px; } .dark .cd-msg.in { background: #1f1f23; } .cd-msg.out { align-self: flex-end; background: #e11d48; color: #fff; border-bottom-right-radius: 5px; } .cd-msg img { border-radius: 10px; max-width: 100%; display: block; } .cd-bar { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-top: 1px solid #f1f1f4; } .dark .cd-bar { border-color: #1f1f23; } .cd-bar input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13px; color: inherit; } .cd-bar button { color: #a1a1aa; transition: color .18s, transform .18s; flex: none; } .cd-bar button:hover { color: #e11d48; transform: scale(1.12); } .cd-send { width: 30px; height: 30px; border-radius: 10px !important; display: flex; align-items: center; justify-content: center; background: #e11d48; color: #fff !important; } .cd-send:hover { background: #be123c; } .cd-send:disabled { opacity: .4; } /* Offer chips */ .of-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .of-chip { border-radius: 12px; padding: 11px 6px; font-size: 13px; font-weight: 800; background: #f4f4f7; transition: all .2s; } .dark .of-chip { background: #1b1b20; } .of-chip em { display: block; font-style: normal; font-size: 10px; font-weight: 700; color: #16a34a; margin-top: 2px; } .of-chip:hover { transform: translateY(-2px); } .of-chip.on { background: #e11d48; color: #fff; } .of-chip.on em { color: #fecdd3; } /* Bigger stage with thumbnails floating over it */ .cd-stars { color: #ffd76b; letter-spacing: -1px; margin-right: 3px; } .dark .ld-desc { color: #a1a1aa; } .dark .ld-pricebox { background: linear-gradient(135deg, rgba(225,29,72,.16), rgba(244,63,94,.08)); border-color: rgba(244,63,94,.24); } .dark .ld-pricebox b { color: #fb7185; } .ld-pricebox s { font-size: 15px; font-weight: 700; color: #a1a1aa; } .ld-rule { border: 0; border-top: 1px solid #f1f1f4; margin: 16px 0; } .dark .ld-rule { border-color: #26262b; } .ld-follow { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-left: auto; border-radius: 11px; padding: 8px 14px; font-size: 12px; font-weight: 800; color: #e11d48; background: rgba(225,29,72,.10); transition: all .18s; } .dark .ld-follow { background: rgba(244,63,94,.18); color: #fda4af; } .ld-follow:hover { transform: translateY(-1px); background: rgba(225,29,72,.18); } .ld-follow.on { background: #dcfce7; color: #15803d; } .dark .ld-follow.on { background: rgba(34,197,94,.18); color: #86efac; } /* Four facts, two per row */ .ld-facts4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #f1f1f4; } .dark .ld-facts4 { border-color: #26262b; } .ld-facts4 > span { display: flex; flex-direction: column; gap: 3px; border-radius: 13px; padding: 13px; background: #f8fafc; border: 1px solid #eef2f7; transition: transform .2s, border-color .2s; } .dark .ld-facts4 > span { background: #17171b; border-color: #26262b; } .ld-facts4 > span:hover { transform: translateY(-2px); border-color: #fda4af; } .ld-facts4 svg { color: #e11d48; } .ld-facts4 b { font-size: 13.5px; font-weight: 800; } .ld-facts4 em { font-style: normal; font-size: 11px; color: #a1a1aa; font-weight: 600; } /* Six safety cards in a single row */ .ld-safety-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } @media (max-width: 1400px) { .ld-safety-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .ld-safety-grid { grid-template-columns: repeat(2, 1fr); } }.ld-safety-card { border-radius: 14px; padding: 13px; background: #f0fdf4; border: 1px solid #dcfce7; transition: transform .22s, box-shadow .22s; } .ld-safety-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; margin-bottom: 8px; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); } .ld-safety-card b { display: block; font-size: 12.5px; font-weight: 800; color: #15803d; } .ld-safety-card em { display: block; font-style: normal; font-size: 11px; line-height: 1.5; color: #4d7c5f; margin-top: 4px; } /* Nearby widget */ .mv-h3ico.nearby { background: linear-gradient(135deg, #0ea5e9, #0284c7); } .nb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .nb-cell { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #0ea5e9, #4f46e5); transition: transform .24s cubic-bezier(.3,1.3,.4,1); } .nb-cell:hover { transform: scale(1.05); z-index: 2; } .nb-cell img { width: 100%; height: 100%; object-fit: cover; } .nb-price { position: absolute; right: 6px; bottom: 6px; border-radius: 8px; padding: 3px 8px; font-size: 11px; font-weight: 900; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); } .nb-loc { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 9px; font-weight: 800; color: #fff; background: rgba(0,0,0,.5); border-radius: 6px; padding: 2px 6px; backdrop-filter: blur(6px); } .cl-req { font-style: normal; color: #e11d48; font-weight: 900; } /* Validation message pinned so it stays visible while scrolling the form. */ .cl-error { border-radius: 10px; padding: 10px 13px; font-size: 12.5px; background: #fef2f2; color: #b91c1c; position: sticky; top: 0; z-index: 5; } /* ===== Listing detail v3 ===== */ /* Photo fills the left column now that the copy has moved right. */ .ld-grid { display: grid; grid-template-columns: 1fr 430px; gap: 16px; align-items: stretch; } /* Thumbnails centred at the bottom, on a stronger scrim so they read. */ .ld-thumbs.over { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 14px 14px; z-index: 3; background: linear-gradient(transparent, rgba(0,0,0,.72)); justify-content: center; gap: 10px; } .ld-thumbs.over .ld-thumb { width: 74px; height: 56px; border-color: rgba(255,255,255,.55); border-width: 2.5px; box-shadow: 0 3px 12px rgba(0,0,0,.5); } .ld-thumbs.over .ld-thumb:hover { border-color: #fff; transform: translateY(-3px); }.ld-thumbs.over .ld-thumb.on { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225,29,72,.4), 0 3px 12px rgba(0,0,0,.5); } /* Price centred in its box */ .ld-pricebox { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-radius: 14px; padding: 18px; margin-top: 14px; background: linear-gradient(135deg, rgba(225,29,72,.08), rgba(244,63,94,.05)); border: 1px solid rgba(225,29,72,.16); flex-direction: row; justify-content: center; text-align: center; } .ld-pricebox b { font-size: 32px; font-weight: 900; color: #e11d48; letter-spacing: -1.2px; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .ld-pricebox em { font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: #16a34a; border-radius: 7px; padding: 3px 9px; margin-left: 0; } /* Seller row on a single line */ .ld-sellerline { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .ld-sellermeta { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #71717a; margin-top: 0; white-space: nowrap; flex: none; } /* Location tile links to a map */ .ld-fact-map { display: flex; flex-direction: column; gap: 3px; border-radius: 13px; padding: 13px; background: #f8fafc; border: 1px solid #eef2f7; transition: transform .2s, border-color .2s, background .2s; } .dark .ld-fact-map { background: #17171b; border-color: #26262b; } .ld-fact-map:hover { transform: translateY(-2px); border-color: #e11d48; background: rgba(225,29,72,.05); } .ld-fact-map svg { color: #e11d48; } .ld-fact-map b { font-size: 13.5px; font-weight: 800; } .ld-fact-map em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: #a1a1aa; font-weight: 600; } /* ===== Listing detail v5 ===== */ /* Hard ceiling on the photo — it must never run past the right panel. */ .ld-gallery { position: relative; height: 100%; display: flex; flex-direction: column; } /* ===== Listing detail v2 ===== */ /* Hero reduced ~30% — 4:3 was dominating the page. */ .ld-stage { aspect-ratio: auto; max-height: 620px !important; position: relative; border-radius: 18px; overflow: hidden; background: #f4f4f7; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 360px; } /* Description clamped to six lines with a red "Read more". */ .ld-descwrap { margin-top: 10px; position: relative; }.ld-desc { font-size: 13.5px; line-height: 1.6; color: #52525b; margin-top: 0; white-space: pre-wrap; } .ld-more:hover { opacity: .75; } /* Facts: large icon left, text right. */ .ld-fact { display: flex !important; flex-direction: row !important; align-items: center; gap: 11px; border-radius: 13px; padding: 13px; background: #f8fafc; border: 1px solid #eef2f7; transition: transform .2s, border-color .2s; } .dark .ld-fact { background: #17171b; border-color: #26262b; } .ld-fact:hover { transform: translateY(-2px); border-color: #fda4af; } .ld-fact > i { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #e11d48, #be123c); } .ld-fact > i svg { color: #fff; } /* Safety tips */ .ld-safety { border-radius: 18px; padding: 20px 22px; margin-top: 16px; background: #fff; border: 1px solid #e9e9ee; } .ld-section { border-radius: 18px; padding: 20px 22px; margin-top: 16px; background: #fff; border: 1px solid #e9e9ee; scroll-margin-top: 24px; } /* ===== Listing detail v6 ===== */ .ld-title { font-size: 22px; font-weight: 900; line-height: 1.25; display: flex; align-items: flex-start; gap: 10px; } .ld-titleicon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; flex: none; margin-top: 2px; color: #fff; background: linear-gradient(135deg, #e11d48, #be123c); } .ld-subhead { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: #71717a; margin-bottom: 6px; } .dark .ld-subhead { color: #a1a1aa; } .ld-subhead svg { color: #e11d48; } /* Four lines, then "Read more". */ .ld-desc.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Sits at the end of the third line, over a fade of the panel colour. */ .ld-more { position: absolute; right: 0; bottom: 0; font-size: 13px; font-weight: 900; color: #e11d48; transition: opacity .18s; padding-left: 30px; line-height: 1.6; background: linear-gradient(90deg, transparent, var(--ld-panel-bg) 26%); } .dark .ld-more { color: #fb7185; } .ld-pricelabel { font-size: 20px; font-weight: 700; letter-spacing: -.2px; text-transform: none; color: #18181b; } .dark .ld-pricelabel { color: #fafafa; } .ld-pricelabel::after { content: " :"; opacity: .45; font-weight: 500; } /* The three non-location tiles were cramped — same padding and gap as the map one. */ .ld-facts4 > span.ld-fact, .ld-facts4 > a.ld-fact { padding: 14px 13px; gap: 12px; align-items: center; }.ld-fact > span { display: flex; flex-direction: column; min-width: 0; gap: 2px; justify-content: center; } .ld-fact b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .ld-fact em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: #a1a1aa; font-weight: 600; line-height: 1.2; } /* Panel background, so the floated "Read more" blends with the card. */ .ld-panel { border-radius: 18px; padding: 22px; background: #fff; border: 1px solid #e9e9ee; position: sticky; top: 12px; --ld-panel-bg: #fff; } .dark .ld-panel { background: #121215; border-color: #26262b; --ld-panel-bg: #121215; } /* Push the float onto the final visible line. */ /* A sold listing can't be edited. */ .mv-btn-off { opacity: .45; cursor: not-allowed; } .mv-btn-off:hover { transform: none; } /* Listing card: stars beside the seller, rule before the actions. */ .mv-cardstars { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; font-weight: 700; color: #71717a; flex: none; white-space: nowrap; } .dark .mv-cardstars { color: #a1a1aa; } .mv-rule { border: 0; height: 1px; flex: none; width: 100%; background: #ececf0; margin: 4px 0 5px; } .dark .mv-rule { background: #2a2a31; }.mv-sellerrow { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding-top: 0; border-top: 0; } /* ===== Leave feedback modal ===== */ .fb-card { position: relative; width: min(440px, 94vw); padding: 30px 28px 26px; background: #fff; border-radius: 24px; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.3); animation: hovIn .3s cubic-bezier(.2,1.15,.3,1) both; } .dark .fb-card { background: #121215; } .fb-x { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #a1a1aa; transition: background .18s; } .fb-x:hover { background: rgba(148,163,184,.16); } .fb-head { display: flex; flex-direction: column; align-items: center; gap: 9px; } .fb-head b { font-size: 19px; font-weight: 900; margin-top: 4px; } .fb-head span { font-size: 12.5px; color: #71717a; max-width: 300px; line-height: 1.5; } .dark .fb-head span { color: #a1a1aa; } .fb-stars { display: flex; justify-content: center; gap: 6px; margin-top: 20px; } .fb-star { color: #d4d4d8; transition: transform .2s cubic-bezier(.3,1.6,.4,1), color .2s; } .dark .fb-star { color: #3f3f46; } .fb-star:hover { transform: scale(1.22) rotate(-6deg); } .fb-star.on { color: #fbbf24; } .fb-word { height: 22px; margin-top: 8px; font-size: 14px; font-weight: 800; color: #f59e0b; opacity: 0; transform: translateY(4px); transition: all .22s; } .fb-word.show { opacity: 1; transform: translateY(0); } .fb-text { width: 100%; border-radius: 14px; padding: 13px 15px; margin-top: 14px; font-size: 13.5px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; resize: none; color: inherit; text-align: left; } .dark .fb-text { background: #17171b; border-color: #26262b; } .fb-text:focus { border-color: #fbbf24aa; } .fb-send { width: 100%; border-radius: 14px; padding: 14px; margin-top: 14px; font-size: 14.5px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #f59e0b, #e11d48); box-shadow: 0 8px 22px rgba(225,29,72,.3); transition: transform .2s, filter .2s; } .fb-send:hover { transform: translateY(-2px); filter: brightness(1.07); } .fb-send.off { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .fb-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 6px; } .fb-done-icon { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 10px 28px rgba(34,197,94,.45); animation: donePop .5s cubic-bezier(.3,1.6,.4,1) both; } .fb-done b { font-size: 21px; font-weight: 900; } .fb-done span { font-size: 13px; color: #71717a; max-width: 290px; line-height: 1.55; } .dark .fb-done span { color: #a1a1aa; } .sl-open-feedback { display: inline-flex; align-items: center; gap: 8px; border-radius: 14px; padding: 13px 22px; margin-bottom: 14px; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f59e0b, #e11d48); box-shadow: 0 6px 20px rgba(225,29,72,.28); transition: transform .2s, filter .2s; } .sl-open-feedback:hover { transform: translateY(-2px); filter: brightness(1.08); } .sl-reviewed { display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; padding: 10px 16px; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; color: #15803d; background: #dcfce7; } .dark .sl-reviewed { color: #86efac; background: rgba(34,197,94,.16); } /* Section header + sort */ .mv-sechead { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; overflow: visible; padding: 3px 0; } .mv-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 700; background: #f4f4f7; color: #52525b; transition: all .2s; will-change: transform; } /* The inner glyph was swallowing clicks meant for the heart button. */ .mv-photoheart svg { pointer-events: none; } .mv-savebtn svg { pointer-events: none; } /* Sold listings show status rather than buyer actions. */ .mv-soldtag { grid-column: span 2; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; padding: 9px; font-size: 12px; font-weight: 800; color: #52525b; background: #f4f4f7; } .dark .mv-soldtag { color: #a1a1aa; background: #1f1f23; } /* Back link at the end of the seller meta row */ .sp-backlink { display: inline-flex; align-items: center; gap: 6px; margin-left: 0; border-radius: 10px; padding: 5px 12px; font-size: 12px; font-weight: 800; color: #e11d48; background: rgba(225,29,72,.09); transition: all .18s; margin-right: 4px; } .dark .sp-tool { background: #1f1f23; color: #d4d4d8; } .sp-tool:hover { transform: translateY(-2px); background: #e11d48; color: #fff; } /* ===== Login: demo account picker ===== */ .lg-demo { margin-top: 26px; padding: 14px; border-radius: 16px; border: 1px dashed #d4d4d8; background: rgba(148,163,184,.05); } .dark .lg-demo { border-color: #2f2f36; background: rgba(255,255,255,.02); } .lg-demo-head { font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #a1a1aa; margin-bottom: 9px; text-align: center; } .lg-demo-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; text-align: left; transition: all .18s; } .lg-demo-row:hover { background: rgba(148,163,184,.14); } .lg-demo-row b { display: block; font-size: 13px; font-weight: 800; } .lg-demo-row em { display: block; font-style: normal; font-size: 11px; color: #a1a1aa; margin-top: 1px; } .lg-demo-row span { flex: 1; min-width: 0; } .lg-demo-row i { font-style: normal; font-size: 10.5px; font-weight: 900; color: #71717a; border-radius: 8px; padding: 4px 10px; background: rgba(148,163,184,.18); flex: none; } .lg-demo-row:hover i { background: #111; color: #fff; } .dark .lg-demo-row:hover i { background: #fff; color: #111; } .lg-demo-row.admin b::after { content: "ADMIN"; margin-left: 7px; font-size: 8.5px; font-weight: 900; letter-spacing: .5px; color: #fff; background: #e11d48; border-radius: 5px; padding: 2px 6px; vertical-align: middle; } .lg-demo-foot { font-size: 11px; color: #a1a1aa; text-align: center; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(148,163,184,.2); } /* Owner tools with labels */ /* Inline wallet */ .wp-balance { display: flex; align-items: center; gap: 14px; border-radius: 16px; padding: 18px 20px; background: linear-gradient(135deg, rgba(225,29,72,.09), rgba(244,63,94,.05)); border: 1px solid rgba(225,29,72,.16); } .dark .wp-balance { background: linear-gradient(135deg, rgba(225,29,72,.16), rgba(244,63,94,.08)); border-color: rgba(244,63,94,.24); } .wp-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #e11d48, #be123c); } .wp-balance em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: #a1a1aa; } .wp-balance b { display: block; font-size: 27px; font-weight: 900; letter-spacing: -.8px; } .wp-full { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; flex: none; border-radius: 11px; padding: 8px 14px; font-size: 12px; font-weight: 800; color: #e11d48; background: rgba(225,29,72,.10); transition: all .18s; } .wp-full:hover { background: rgba(225,29,72,.2); transform: translateY(-1px); } .wp-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 13px; border: 1px solid #f1f1f4; } .dark .wp-row { border-color: #26262b; } .wp-dir { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 10px; } .wp-dir.in { background: #dcfce7; color: #15803d; } .wp-dir.out { background: #fee2e2; color: #b91c1c; } .dark .wp-dir.in { background: rgba(34,197,94,.16); color: #86efac; } .dark .wp-dir.out { background: rgba(239,68,68,.16); color: #fca5a5; } .wp-row b { display: block; font-size: 13px; font-weight: 700; } .wp-row em { display: block; font-style: normal; font-size: 11px; color: #a1a1aa; } .wp-amt { font-size: 13.5px; font-weight: 900; flex: none; } .wp-amt.in { color: #16a34a; } .wp-amt.out { color: #71717a; } /* ===== Activity ===== */ .ac-card { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .dark .ac-card { background: #121215; border-color: #26262b; } .ac-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #f1f1f4; } .dark .ac-tabs { border-color: #1f1f23; } .ac-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 15px; font-size: 14px; font-weight: 700; color: #71717a; transition: background .18s, color .18s; } .ac-tab:hover { background: rgba(148,163,184,.07); } .ac-tab.on { color: inherit; font-weight: 800; } .ac-tab.on::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 48px; height: 3px; border-radius: 3px 3px 0 0; background: #e11d48; } .ac-tab b { min-width: 19px; height: 19px; border-radius: 7px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 900; color: #fff; background: #e11d48; } .ac-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid #f6f6f8; transition: background .18s; } .dark .ac-row { border-color: #1b1b1f; } .ac-row:last-child { border-bottom: 0; } .ac-row:hover { background: rgba(148,163,184,.06); } .ac-row.unread { background: rgba(225,29,72,.04); } .dark .ac-row.unread { background: rgba(244,63,94,.07); } .ac-row.unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #e11d48; } .ac-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 10px; color: #fff; } .ac-icon.rose { background: linear-gradient(135deg, #fb7185, #e11d48); } .ac-icon.sky { background: linear-gradient(135deg, #38bdf8, #0284c7); } .ac-icon.violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); } .ac-icon.emerald { background: linear-gradient(135deg, #34d399, #059669); } .ac-icon.amber { background: linear-gradient(135deg, #fbbf24, #d97706); } .ac-line { font-size: 13.5px; line-height: 1.5; } .ac-line b { font-weight: 800; } .ac-line > span { color: #52525b; } .dark .ac-line > span { color: #a1a1aa; } .ac-time { color: #a1a1aa !important; font-size: 12px; } .ac-tick { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: #1a80ff; color: #fff; margin-left: 3px; vertical-align: middle; } .ac-admin { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .3px; color: #e11d48; border: 1px solid currentColor; border-radius: 5px; padding: 1px 5px; margin-left: 5px; vertical-align: middle; } .ac-x { width: 26px; height: 26px; border-radius: 9px; flex: none; opacity: 0; display: flex; align-items: center; justify-content: center; color: #a1a1aa; transition: all .18s; } .ac-row:hover .ac-x { opacity: 1; } .ac-x:hover { background: rgba(239,68,68,.12); color: #ef4444; } .ac-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 20px; text-align: center; color: #a1a1aa; } .ac-empty b { font-size: 15px; font-weight: 800; color: #52525b; } .dark .ac-empty b { color: #d4d4d8; } .ac-empty span { font-size: 12.5px; max-width: 260px; line-height: 1.5; } /* Owner dashboard tools on your own storefront. */ .sp-tool { display: inline-flex; align-items: center; justify-content: center; flex: none; width: auto; height: auto; border-radius: 12px; color: #52525b; background: #f4f4f7; transition: all .2s; flex-direction: column; gap: 3px; padding: 9px 10px; min-width: 62px; } .sp-tool em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .2px; } .sp-tool.on { background: #e11d48; color: #fff; } /* ===== Activity: header, grouping ===== */ .ac-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; } .ac-head h1 { font-size: 20px; font-weight: 900; } .ac-markall { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border-radius: 10px; padding: 7px 13px; font-size: 12px; font-weight: 800; color: #6366f1; background: rgba(99,102,241,.10); transition: all .18s; } .dark .ac-markall { color: #a5b4fc; background: rgba(99,102,241,.18); } .ac-markall:hover { background: rgba(99,102,241,.2); transform: translateY(-1px); } .ac-group { position: sticky; top: 0; z-index: 2; padding: 9px 18px; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #a1a1aa; background: rgba(250,250,252,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #f1f1f4; } .dark .ac-group { background: rgba(12,12,14,.92); border-color: #1f1f23; } /* ===== Seller header: compact stats ===== */ .sp-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .sp-minibox { display: inline-flex; align-items: center; gap: 8px; border-radius: 13px; padding: 9px 14px; background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(236,72,153,.07)); border: 1px solid rgba(99,102,241,.12); transition: transform .2s, border-color .2s; } .dark .sp-minibox { background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(236,72,153,.12)); border-color: rgba(99,102,241,.22); } .sp-minibox:hover { transform: translateY(-2px); border-color: rgba(99,102,241,.32); } .sp-minibox i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 9px; color: #fff; } .sp-minibox b { font-size: 16px; font-weight: 900; letter-spacing: -.3px; } .sp-minibox em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #71717a; } .dark .sp-minibox em { color: #a1a1aa; } .sp-minibox.rating { margin-left: auto; } .sp-minibox.rating b { color: #f59e0b; } /* Unfilled stars need a visible outline, not 30% opacity. */ .sp-minibox .lucide-star, .sp-rating-stars .lucide-star, .mv-cardstars svg { stroke-width: 2.4; } /* Listing being discussed, pinned above the chat. */ .cd-listing { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f1f1f4; background: #fafafa; transition: background .18s; } .dark .cd-listing { background: #17171b; border-color: #1f1f23; } .cd-listing:hover { background: #f4f4f7; } .dark .cd-listing:hover { background: #1c1c21; } .cd-listing-img { width: 40px; height: 40px; border-radius: 10px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); } .cd-listing-img img { width: 100%; height: 100%; object-fit: cover; } .cd-listing b { display: block; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cd-listing em { display: block; font-style: normal; font-size: 12px; font-weight: 800; color: #e11d48; margin-top: 1px; } .dark .cd-listing em { color: #fb7185; } /* Filled stars only — the unfilled ones keep their grey outline. */ .sp-rating-stars .fill-amber-400 { color: #f59e0b; } /* Unfilled stars: solid grey outline, readable on white. */ .sp-star-off { color: #c2c2cc !important; fill: none !important; } .dark .sp-star-off { color: #4a4a53; } /* ===== Docked chat ===== */ .cd { position: fixed; right: 22px; bottom: 16px; z-index: 80; width: 340px; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e9e9ee; border-bottom: 1px solid #e9e9ee; box-shadow: 0 -6px 34px rgba(0,0,0,.20); animation: cdUp .3s cubic-bezier(.2,1.2,.3,1) both; } .dark .cd { background: #121215; border-color: #26262b; border-bottom-color: #26262b; } /* ===== Reviews tab ===== */ .rv-summary { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 26px 20px; margin-bottom: 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(245,158,11,.06), rgba(225,29,72,.05)); border: 1px solid rgba(245,158,11,.16); } .dark .rv-summary { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(225,29,72,.08)); border-color: rgba(245,158,11,.22); } .rv-score { display: flex; flex-direction: column; align-items: center; gap: 7px; } .rv-score b { font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -2px; } .rv-score span { font-size: 12.5px; color: #71717a; font-weight: 600; } .dark .rv-score span { color: #a1a1aa; } .rv-bars { display: flex; flex-direction: column; gap: 7px; width: min(420px, 100%); } .rv-bar-row { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #a1a1aa; } .rv-bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(0,0,0,.07); overflow: hidden; } .dark .rv-bar { background: rgba(255,255,255,.08); } .rv-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width .8s ease; } .rv-pct { width: 38px; text-align: right; } .rv-item { display: flex; gap: 13px; padding: 16px; border-radius: 16px; border: 1px solid #e9e9ee; background: #fff; transition: border-color .2s; } .dark .rv-item { background: #121215; border-color: #26262b; } .rv-item:hover { border-color: #fcd34d; } .rv-item-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rv-name { font-size: 14px; font-weight: 800; } .rv-name:hover { text-decoration: underline; } .rv-date { margin-left: auto; font-size: 11.5px; color: #a1a1aa; font-weight: 600; } .rv-text { font-size: 13.5px; line-height: 1.6; color: #52525b; margin-top: 7px; } .dark .rv-text { color: #a1a1aa; } /* The sidebar owns a stacking context above page content. */ aside.md\:flex { z-index: 90; } .mv-side, .mv-nav, .mv-catwrap { position: relative; z-index: 1; } /* Listings and their tabs sit in a card, matching the categories strip. */ .mv-listwrap { border-radius: 20px; padding: 16px; margin-top: 14px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 10px rgba(0,0,0,.05); } .dark .mv-listwrap { background: #121215; border-color: #26262b; } .mv-listwrap .mv-sechead { margin: 0 0 14px; padding-bottom: 13px; border-bottom: 1px solid #f1f1f4; } .dark .mv-listwrap .mv-sechead { border-color: #1f1f23; } /* Card-level confirmation toast. */ .mv-note { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; white-space: nowrap; border-radius: 10px; padding: 7px 14px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(24,24,27,.92); backdrop-filter: blur(6px); animation: hovIn .2s both; } /* ===== Listing card v2: price beside title, distance, list view ===== */ .mv-titlerow { display: flex; align-items: flex-start; gap: 10px; } .mv-titlerow .mv-title { flex: 1; min-width: 0; } .mv-pricetag { flex: none; border-radius: 10px; padding: 5px 11px; font-size: 13.5px; font-weight: 900; color: #fff; background: #e11d48; letter-spacing: -.2px; box-shadow: 0 2px 8px rgba(225,29,72,.3); } .mv-pricetag s { display: block; font-size: 9.5px; font-weight: 700; opacity: .7; text-align: right; } .mv-away { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #71717a; } .dark .mv-away { color: #a1a1aa; } .mv-away svg { color: #e11d48; } /* Make Offer: neutral surface rather than amber */ .mv-btn.outline { background: #eef0f4; color: #3f3f46; border: 0; } .dark .mv-btn.outline { color: #d4d4d8; border-color: #78350f; background: #23232a; } .mv-btn.outline:hover { background: #e2e5ea; } .dark .mv-btn.outline:hover { background: #2c2c34; } /* List view */ .mv-card.row { flex-direction: row; align-items: stretch; } .mv-card.row .mv-photo { width: 240px; flex: none; aspect-ratio: auto; } .mv-card.row .mv-title { -webkit-line-clamp: 2; font-size: 15px; } /* Only list view has room for the description. */ .mv-desc-line { display: none; } .dark .mv-card.row .mv-desc-line { color: #a1a1aa; } .mv-card.row .mv-rule { display: none; } /* ===== List view: one row, actions top-right ===== */ .mv-card.row .mv-body { flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; justify-content: center; padding: 16px 18px 16px 18px; position: relative; } .mv-card.row .mv-actions { max-width: none; display: flex; flex-direction: column; width: auto; flex: none; margin-top: 4px; align-self: center; grid-template-columns: auto auto; position: absolute; right: 18px; top: 16px; gap: 8px; margin: 0; } .mv-card.row .mv-actions .mv-btn { padding: 8px 14px; white-space: nowrap; }.mv-card.row .mv-titlerow { align-items: center; padding-right: 320px; } .mv-card.row .mv-desc-line { display: -webkit-box; font-size: 12.5px; color: #71717a; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 320px; } /* Heart moves onto the photo in list view. */ .mv-card.row .mv-photoheart { right: auto; top: 12px; left: 12px; } .mv-card.row .mv-sellerrow { border: 0; margin: 0; padding: 0; border-top: 0; padding-top: 0; margin-top: 4px; } @media (max-width: 1200px) { .mv-card.row .mv-actions { position: static; margin-top: 10px; } .mv-card.row .mv-titlerow, .mv-card.row .mv-desc-line { padding-right: 0; } } /* Message tabs: badge sits over the label instead of pushing it. */ .mg-filter { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 9px; padding: 7px 6px; font-size: 11.5px; font-weight: 700; color: #64748b; transition: color .18s, background .18s, box-shadow .18s; position: relative; } /* Unread badge: smaller, and clear of the 3-dot menu. */ .mg-unread { background: #e11d48; color: #fff; font-size: 9px; font-weight: 900; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; animation: mgUn 1.6s ease-in-out infinite; } /* Top-right of the conversation row rather than beside the timestamp. */ .mg-unread-top { position: absolute; right: 34px; top: 11px; z-index: 2; } /* Tab counts share the badge styling. */ .mg-filter-count { background: #7b2ff7; color: #fff; min-width: 15px; height: 15px; border-radius: 999px; font-size: 8.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; position: absolute; top: -4px; right: -4px; } /* Photo queued for sending. */ .mg-photo-preview { position: absolute; left: 14px; bottom: calc(100% + 10px); width: 96px; height: 96px; border-radius: 12px; overflow: hidden; z-index: 5; border: 2px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.24); } .dark .mg-photo-preview { border-color: #26262b; } .mg-photo-preview img { width: 100%; height: 100%; object-fit: cover; } .mg-photo-x { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.6); transition: background .18s; } .mg-photo-x:hover { background: #e11d48; } /* ===== Groups & Pages listing (from GROUP_LISTING.html) ===== */ /* No right column here, so the page runs full width. */ .gl-page { width: 100%; min-width: 0; padding: 18px 24px 40px; } .gl-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .gl-tabs { display: flex; gap: 4px; border-radius: 14px; padding: 5px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .dark .gl-tabs { background: #121215; border-color: #26262b; } .gl-tab { display: inline-flex; align-items: center; gap: 8px; border-radius: 11px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: #71717a; transition: all .2s; } .gl-tab:hover { color: #6d28d9; } .gl-tab.on { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; box-shadow: 0 4px 14px rgba(109,40,217,.28); } .gl-count { min-width: 20px; height: 20px; border-radius: 7px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; background: rgba(0,0,0,.07); } .dark .gl-count { background: rgba(255,255,255,.09); } .gl-tab.on .gl-count { background: rgba(255,255,255,.24); } .gl-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; } .gl-search { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 10px 15px; min-width: 240px; background: #fff; border: 1px solid #e9e9ee; } .dark .gl-search { background: #121215; border-color: #26262b; } .gl-search:focus-within { border-color: #7c3aed88; } .gl-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13.5px; color: inherit; } .gl-view { display: inline-flex; gap: 3px; padding: 4px; border-radius: 12px; background: #f4f4f7; } .gl-view button { width: 34px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #71717a; transition: all .18s; } .gl-view button.on { background: #7c3aed; color: #fff; } .gl-create { display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 11px 18px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 5px 16px rgba(109,40,217,.3); transition: transform .2s, filter .2s; } .gl-create:hover { transform: translateY(-2px); filter: brightness(1.08); } .gl-chips { display: flex; gap: 10px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .gl-chips::-webkit-scrollbar { display: none; } .gl-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; color: #52525b; background: #fff; border: 1px solid #e9e9ee; transition: all .2s; } .dark .gl-chip { background: #121215; border-color: #26262b; color: #a1a1aa; } .gl-chip:hover { transform: translateY(-2px); border-color: #c4b5fd; } .gl-chip.on { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; border-color: transparent; } .gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .gl-list { display: flex; flex-direction: column; gap: 12px; } .gl-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e9e9ee; transition: transform .28s cubic-bezier(.3,1.2,.4,1), box-shadow .28s, border-color .28s; } .gl-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.14); border-color: #c4b5fd; } .gl-banner { position: relative; display: block; height: 130px; overflow: hidden; } .gl-banner img { width: 100%; height: 100%; object-fit: cover; } .gl-banner-fill { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #7c3aed, #4f46e5 55%, #ec4899); } .gl-badge { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 11px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); } .gl-badge i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: mgUn 1.8s ease-in-out infinite; } .gl-avatar { position: absolute; left: 16px; bottom: -22px; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #f59e0b, #ec4899); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.2); } .dark .gl-avatar { border-color: #121215; } .gl-body { display: flex; flex-direction: column; gap: 7px; padding: 30px 16px 16px; } .gl-title { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; } .gl-verified { color: #3b82f6; flex: none; } .gl-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gl-cat { border-radius: 8px; padding: 3px 10px; font-size: 11px; font-weight: 800; color: #6d28d9; background: rgba(109,40,217,.10); } .dark .gl-cat { color: #c4b5fd; background: rgba(139,92,246,.18); } .gl-members { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #a1a1aa; } .gl-desc { font-size: 13px; line-height: 1.55; color: #71717a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dark .gl-desc { color: #a1a1aa; } .gl-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid #f1f1f4; } .dark .gl-foot { border-color: #1f1f23; } .gl-owner { font-size: 12px; color: #a1a1aa; font-weight: 600; } .gl-join.on { background: #dcfce7; color: #15803d; } .dark .gl-join.on { background: rgba(34,197,94,.18); color: #86efac; } .gl-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; font-size: 13.5px; color: #a1a1aa; } /* List view */ .gl-list .gl-card { flex-direction: row; } .gl-list .gl-banner { width: 200px; height: auto; flex: none; } .gl-list .gl-avatar { display: none; } .gl-list .gl-body { flex: 1; padding: 16px 18px; } /* Page heading replaces the Groups/Pages tab pair. */ .gl-heading { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; } .gl-heading svg { color: #7c3aed; } .gl-heading .gl-count { font-size: 12px; height: 22px; min-width: 22px; background: rgba(109,40,217,.12); color: #6d28d9; } .dark .gl-heading .gl-count { background: rgba(139,92,246,.2); color: #c4b5fd; } /* ===== Group / Page details (from GROUP_DETAILS.html) ===== */ .gd-hero-img { display: block; width: 100%; height: 260px; object-fit: cover; } .gd-hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.78) 100%); } .gd-hero-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 26px; color: #fff; } .gd-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .gd-hero-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 13px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.16); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); } .gd-hero-badge i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: mgUn 1.8s ease-in-out infinite; } .gd-hero-title { font-size: 34px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; text-shadow: 0 2px 16px rgba(0,0,0,.4); } .gd-hero-sub { font-size: 14px; line-height: 1.55; opacity: .92; margin-top: 8px; max-width: 640px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gd-infobar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .dark .gd-logo { border-color: #0a0a0a; } .gd-name { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 900; letter-spacing: -.4px; } .gd-verified { color: #3b82f6; flex: none; } .gd-metarow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: #71717a; font-weight: 600; } .dark .gd-metarow { color: #a1a1aa; } .gd-metarow span { display: inline-flex; align-items: center; gap: 5px; } .gd-metarow i { width: 3px; height: 3px; border-radius: 50%; background: #d4d4d8; } .dark .gd-metarow i { background: #3f3f46; } .gd-hero { position: relative; } /* Tabs sit inside the card, on a divider. */ .gd-card > .flex.gap-2 { margin: 0 !important; padding: 14px 22px; border-top: 1px solid #f1f1f4; border-bottom: 1px solid #f1f1f4; overflow-x: auto; scrollbar-width: none; } .dark .gd-card > .flex.gap-2 { border-color: #1f1f23; } .gd-card > .flex.gap-2::-webkit-scrollbar { display: none; } .gd-card > .flex.gap-2 > button { flex: none; text-transform: capitalize; } /* Tab content gets padding inside the card. */ .gd-card > *:not(.gd-hero):not(.flex) { padding-left: 22px; padding-right: 22px; } /* ===== Listing page: one white card, like the details page ===== */ .gl-card-wrap { border-radius: 22px; padding: 20px 22px 24px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.06); } /* Dark mode: lighter than the page behind it so the card is still readable. */ .dark .gl-card-wrap { background: #16161a; border-color: #2b2b33; box-shadow: 0 2px 14px rgba(0,0,0,.4); } .gl-card-wrap .gl-toolbar { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f1f1f4; } .dark .gl-card-wrap .gl-toolbar { border-color: #26262b; } /* Inner surfaces step up again so they read against the card. */ .dark .gl-tabs, .dark .gl-search, .dark .gl-chip { background: #1e1e24; border-color: #33333c; }.dark .gl-view { background: #1e1e24; } .dark .gl-card { background: #1c1c22; border-color: #32323b; } .dark .gl-card:hover { border-color: #8b5cf6; } /* Details page matches in dark mode. */ .dark .gd-card { background: #16161a; border-color: #2b2b33; } @media (max-width: 1280px) { .cm-mgrid { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 980px) { .cm-mgrid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 620px) { .cm-mgrid { grid-template-columns: repeat(2, 1fr); } } .dark .cm-mcard { background: #1c1c22; border-color: #32323b; } .cm-mcard:hover { transform: translateY(-3px); border-color: #c4b5fd; box-shadow: 0 8px 20px rgba(0,0,0,.1); } .cm-mlink { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; width: 100%; } .cm-mcard em { font-style: normal; font-size: 11px; color: #a1a1aa; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-mowner { border-radius: 7px; padding: 3px 9px; font-size: 9px; font-weight: 900; letter-spacing: .5px; color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed); } .cm-mactions .cm-mbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 9px; padding: 6px 4px; font-size: 10px; font-weight: 800; color: #52525b; background: #efeff2; transition: all .18s; } .dark .cm-mactions .cm-mbtn { background: #2a2a32; color: #d4d4d8; } .cm-mactions .cm-mbtn:hover { background: #e4e4e7; } .cm-mactions .cm-mbtn.danger:hover { background: #fee2e2; color: #dc2626; } .dark .cm-mactions .cm-mbtn.danger:hover { background: rgba(220,38,38,.2); color: #fca5a5; } .cm-mempty { grid-column: 1 / -1; padding: 40px 0; text-align: center; font-size: 13px; color: #a1a1aa; } /* ===== Sidebar: Twitter-like sizing, in a card ===== */ /* Group / page detail cover controls */ .gd-camera { position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); transition: transform .2s, background .2s; } .gd-camera:hover { transform: scale(1.08); background: rgba(0,0,0,.75); } .gd-logo-wrap { position: relative; flex: none; z-index: 4; } .gd-logo-camera { position: absolute; right: -4px; bottom: -4px; z-index: 6; width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; background: #18181b; border: 2px solid #fff; transition: transform .2s; } .dark .gd-logo-camera { border-color: #16161a; background: #fafafa; color: #18181b; } .gd-logo-camera:hover { transform: scale(1.12); } /* ===== Members as a grid, 8 per row ===== */ .cm-mgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 4px 0 8px; } @media (max-width: 1280px) { .cm-mgrid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 900px) { .cm-mgrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .cm-mgrid { grid-template-columns: repeat(2, 1fr); } }.cm-mcard { display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: 16px; padding: 20px 12px 14px; text-align: center; background: #fafafa; border: 1px solid #efeff2; transition: all .22s; } .cm-mcard b { font-size: 13.5px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-mactions { display: flex; gap: 8px; width: 100%; justify-content: center; } .cm-micon { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: #18181b; transition: transform .2s, background .2s; } .dark .cm-micon { background: #3f3f46; } .cm-micon:hover { transform: translateY(-2px); background: #000; } .cm-micon.danger { background: #dc2626; } .cm-micon.danger:hover { background: #b91c1c; } /* ===== Profile hover card ===== */ .hov-card { position: fixed; z-index: 9998; width: 300px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 20px 50px rgba(0,0,0,.20); animation: hovIn .22s cubic-bezier(.2,1.1,.3,1) both; margin-top: -4px; } /* ===== Members as rows (right column is back, so width is tight) ===== */ .cm-mrows { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; } .cm-mrow { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 10px 14px; background: #fafafa; border: 1px solid #efeff2; transition: all .2s; } .dark .cm-mrow { background: #1c1c22; border-color: #32323b; } .cm-mrow:hover { border-color: #c4b5fd; transform: translateX(3px); } .cm-mrow .cm-mlink { flex-direction: row; align-items: center; gap: 12px; flex: 1; width: auto; text-align: left; } .cm-mrow b { display: block; font-size: 13.5px; font-weight: 700; } .cm-mrow em { display: block; font-style: normal; font-size: 11.5px; color: #a1a1aa; } .cm-mrow .cm-mactions { width: auto; margin-left: auto; } .cm-mrow .cm-mowner { margin-left: auto; } /* The logo can hold an uploaded image. */ .gd-logo { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; margin-top: -44px; border-radius: 20px; font-size: 26px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #f59e0b, #ec4899); border: 4px solid #fff; box-shadow: 0 8px 22px rgba(0,0,0,.22); position: relative; z-index: 3; overflow: hidden; } .gd-logo img { width: 100%; height: 100%; object-fit: cover; } /* ===== Details page: everything in one card, no right rail ===== */ .gd-page { flex: 1 1 auto; min-width: 0; padding: 18px 24px 40px; } .gd-card { border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.06); min-height: 520px; display: flex; flex-direction: column; } .gd-card > *:last-child { padding-bottom: 22px; flex: 1; } /* Build marker — tells you at a glance whether the latest zip is running. */ .sb-build { font-size: 10px; color: #a1a1aa; padding: 0 12px 6px; letter-spacing: .3px; } /* ===== Page About tab: contact and hours ===== */ .pg-about { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 0 10px; } @media (max-width: 900px) { .pg-about { grid-template-columns: 1fr; } } .pg-info { border-radius: 16px; padding: 18px; background: #fafafa; border: 1px solid #efeff2; } .dark .pg-info { background: #1c1c22; border-color: #32323b; } .pg-info h3 { font-size: 13px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: #a1a1aa; margin-bottom: 14px; } .pg-inforow { display: flex; align-items: center; gap: 12px; padding: 9px 0; } .pg-infoicon { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); } .pg-inforow em { display: block; font-style: normal; font-size: 11px; color: #a1a1aa; font-weight: 700; } .pg-inforow b { display: block; font-size: 13.5px; font-weight: 700; word-break: break-word; } .pg-hour { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px solid #f1f1f4; } .dark .pg-hour { border-color: #26262b; } .pg-hour:last-child { border-bottom: 0; } .pg-hour span { color: #71717a; font-weight: 600; } .dark .pg-hour span { color: #a1a1aa; } .pg-hour b { font-weight: 800; } .pg-empty { font-size: 12.5px; color: #a1a1aa; padding: 6px 0; } .cm-legend { font-size: 12px; font-weight: 800; color: #a1a1aa; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; } .cm-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f1f1f4; } .dark .cm-section { border-color: #26262b; } /* Join / follow on a listing card shouldn't feel like a link. */ .gl-join { margin-left: auto; border-radius: 10px; padding: 7px 16px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); cursor: pointer; transition: transform .18s, filter .18s; } .gl-join:hover { transform: translateY(-1px); filter: brightness(1.08); } /* Wide screens: let it breathe rather than leaving a gap before the rail. */ @media (min-width: 1500px) { .app-col { max-width: 760px; } } /* Opening-hours editor */ .cm-hourrow { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; margin-bottom: 7px; } .cm-hourrow span { font-size: 12.5px; font-weight: 700; color: #71717a; } .dark .cm-hourrow span { color: #a1a1aa; } /* ===== Theme switch: circular wipe from the toggle ===== */ ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; } @keyframes themeOut { to { opacity: 0; transform: scale(1.015); filter: blur(3px); } } @keyframes themeIn { from { opacity: 0; transform: scale(.99); filter: blur(3px); } }::view-transition-old(root) { animation: themeOut .42s cubic-bezier(.4,0,.2,1) both; z-index: 1; } ::view-transition-new(root) { animation: themeIn .42s cubic-bezier(.4,0,.2,1) both; z-index: 2; } .dark::view-transition-old(root) { z-index: 2; } .dark::view-transition-new(root) { z-index: 1; } /* ===== Profile stat tiles ===== */ .pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; } .pf-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; border-radius: 16px; padding: 14px 8px; background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(236,72,153,.07)); border: 1px solid rgba(99,102,241,.12); transition: transform .22s, border-color .22s; } .dark .pf-stat { background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(236,72,153,.12)); border-color: rgba(99,102,241,.22); } .pf-stat:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.34); } .pf-stat-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 11px; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.16); } .pf-stat b { font-size: 19px; font-weight: 900; letter-spacing: -.4px; } .pf-stat em { font-style: normal; font-size: 11px; font-weight: 700; color: #71717a; } .dark .pf-stat em { color: #a1a1aa; } .pf-cover img { width: 100%; height: 100%; object-fit: cover; } .pf-cover-fill { display: block; width: 100%; height: 100%; background: linear-gradient(120deg, #6366f1, #a855f7 45%, #ec4899); } .pf-cover-btn { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; padding: 9px 15px; font-size: 12.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.24); transition: all .2s; } .pf-cover-btn:hover { background: rgba(0,0,0,.72); transform: translateY(-2px); } .pf-upload { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 14px 18px; background: linear-gradient(transparent, rgba(0,0,0,.72)); } .pf-upload-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; } .pf-upload-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #ec4899); transition: width .25s ease; } .pf-upload p { font-size: 11.5px; font-weight: 800; color: #fff; margin-top: 7px; text-align: center; } .dark .cn-card { background: #16161a; } .dark .cn-tab { background: #1e1e24; color: #a1a1aa; } .cn-tab.on { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; } .dark .cn-search { background: #1c1c22; border-color: #32323b; } .cn-search:focus { border-color: #a78bfa; } .cn-row:hover { background: #fafafa; } .dark .cn-row:hover { background: #1c1c22; } .dark .cn-person i { color: #a1a1aa; } .cn-follow:hover { transform: translateY(-1px); filter: brightness(1.08); } .cn-follow.on { background: #dcfce7; color: #15803d; } .dark .cn-follow.on { background: rgba(34,197,94,.18); color: #86efac; } .dark .cn-msg { background: #1e1e24; color: #d4d4d8; } .cn-msg:hover { background: #7c3aed; color: #fff; } /* Clickable stat tiles */ .pf-stat.clickable { cursor: pointer; } .pf-stat:disabled { cursor: default; } /* ===== Connections modal ===== */ .cn-card { width: min(400px, 92vw); max-height: 82vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.3); animation: hovIn .26s cubic-bezier(.2,1.1,.3,1) both; } .cn-head { display: flex; align-items: center; padding: 15px 17px 9px; } .cn-title { flex: 1; font-size: 15.5px; font-weight: 900; } .cn-tabs { display: flex; gap: 4px; padding: 0 17px 9px; } .cn-tab { flex: 1; border-radius: 9px; padding: 7px; font-size: 12px; font-weight: 700; color: #71717a; background: #f4f4f7; transition: all .2s; } .cn-search { margin: 0 17px 6px; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; color: inherit; } .cn-list { flex: 1; overflow-y: auto; padding: 2px 9px 12px; } .cn-row { display: flex; align-items: center; gap: 9px; padding: 7px; border-radius: 11px; transition: background .18s; } .cn-person { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; } .cn-person b { display: block; font-size: 13px; font-weight: 800; } .cn-person em { display: block; font-style: normal; font-size: 11px; color: #a1a1aa; } .cn-person i { display: none; font-style: normal; font-size: 11.5px; color: #71717a; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cn-actions { display: flex; align-items: center; gap: 5px; flex: none; } .cn-follow { display: inline-flex; align-items: center; gap: 5px; border-radius: 9px; padding: 6px 11px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); transition: all .2s; } .cn-msg { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; color: #52525b; background: #f4f4f7; transition: all .2s; } .cn-msg svg { width: 13px; height: 13px; }.cn-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 28px 0; font-size: 12.5px; color: #a1a1aa; } /* ===== Profile right column: About and Friends ===== */ .pf-side { width: 340px; flex: none; padding: 18px 24px 40px 0; display: flex; flex-direction: column; gap: 14px; } @media (max-width: 1180px) { .pf-side { display: none; } } .pa-card { border-radius: 18px; padding: 16px 18px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 10px rgba(0,0,0,.05); } .dark .pa-card { background: #16161a; border-color: #2b2b33; } .pa-card h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; margin-bottom: 12px; } .pa-edit { width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #71717a; background: #f4f4f7; margin-left: auto; transition: all .18s; } .dark .pa-edit { background: #1e1e24; color: #a1a1aa; } .pa-edit:hover { background: #7c3aed; color: #fff; } .pa-count { border-radius: 7px; padding: 2px 8px; font-size: 11px; font-weight: 900; background: rgba(109,40,217,.10); color: #6d28d9; } .dark .pa-count { background: rgba(139,92,246,.2); color: #c4b5fd; } .pa-all { margin-left: auto; font-size: 12px; font-weight: 800; color: #6d28d9; } .dark .pa-all { color: #c4b5fd; } .pa-all:hover { text-decoration: underline; } .pa-bio { font-size: 13px; line-height: 1.6; color: #52525b; margin-bottom: 12px; } .dark .pa-bio { color: #d4d4d8; } .pa-row { display: flex; align-items: center; gap: 11px; padding: 7px 0; } .pa-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); } .pa-row em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: #a1a1aa; } .pa-row b { display: block; font-size: 13px; font-weight: 700; word-break: break-word; } .pa-empty { font-size: 12.5px; color: #a1a1aa; line-height: 1.5; } .pa-friends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pa-friend { display: flex; flex-direction: column; align-items: center; gap: 5px; transition: transform .2s; } .pa-friend:hover { transform: translateY(-3px); } .pa-friend span { font-size: 11px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Edit form */ .pa-form { display: flex; flex-direction: column; gap: 10px; } .pa-form label span { display: block; font-size: 11px; font-weight: 800; color: #a1a1aa; margin-bottom: 4px; } .pa-form input, .pa-form textarea { width: 100%; border-radius: 10px; padding: 9px 11px; font-size: 13px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; color: inherit; resize: none; } .dark .pa-form input, .dark .pa-form textarea { background: #1c1c22; border-color: #32323b; } .pa-form input:focus, .pa-form textarea:focus { border-color: #a78bfa; } .pa-formbtns { display: flex; gap: 8px; margin-top: 2px; } .pa-save, .pa-cancel { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; padding: 9px; font-size: 12.5px; font-weight: 800; transition: all .18s; } .pa-save { color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); } .pa-cancel { color: #71717a; background: #f4f4f7; } .dark .pa-cancel { background: #1e1e24; color: #a1a1aa; } /* Three profile actions */ .pf-act { display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; padding: 9px 16px; font-size: 13px; font-weight: 800; color: #3f3f46; background: #f4f4f7; transition: all .2s; } .dark .pf-act { background: #1e1e24; color: #d4d4d8; } .pf-act:hover { transform: translateY(-2px); } .pf-act.primary { color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 5px 16px rgba(109,40,217,.3); } .pf-act.primary.on { background: #dcfce7; color: #15803d; box-shadow: none; } .dark .pf-act.primary.on { background: rgba(34,197,94,.18); color: #86efac; } .pf-tab.on { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; box-shadow: 0 5px 16px rgba(109,40,217,.28); } .pf-tabcount { min-width: 20px; height: 20px; border-radius: 7px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; background: rgba(0,0,0,.07); } .dark .pf-tabcount { background: rgba(255,255,255,.09); } .pf-tab.on .pf-tabcount { background: rgba(255,255,255,.24); } .pf-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 14px 0; } .pf-mediacell { aspect-ratio: 1; border-radius: 12px; overflow: hidden; } .pf-mediacell img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .pf-mediacell:hover img { transform: scale(1.06); } .pf-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 0; } @media (max-width: 900px) { .pf-people { grid-template-columns: repeat(2, 1fr); } } .pf-person { display: flex; flex-direction: column; align-items: center; gap: 8px; border-radius: 16px; padding: 18px 12px; background: #fafafa; border: 1px solid #efeff2; transition: all .22s; } .dark .pf-person { background: #1c1c22; border-color: #32323b; } .pf-person:hover { transform: translateY(-3px); border-color: #c4b5fd; } .pf-personlink { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; width: 100%; } .pf-person b { font-size: 13px; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-person em { font-style: normal; font-size: 11px; color: #a1a1aa; } .pf-personbtn { display: inline-flex; align-items: center; gap: 5px; border-radius: 10px; padding: 7px 14px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); transition: all .2s; } .pf-personbtn:hover { filter: brightness(1.1); } .pf-tabempty { grid-column: 1 / -1; padding: 46px 0; text-align: center; font-size: 13px; color: #a1a1aa; } /* Presence dot with a soft pulse. */ .pf-dot { position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; border-radius: 50%; background: #a1a1aa; border: 3px solid #fff; } .dark .pf-dot { border-color: #0a0a0a; } .pf-dot.on { background: #22c55e; animation: pfPulse 2s ease-in-out infinite; } @keyframes pfPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55) } 50% { box-shadow: 0 0 0 7px rgba(34,197,94,0) } } .dark .pf-count { background: #1e1e24; } .pf-count:hover { transform: translateY(-2px); background: #ebebf0; } .dark .pf-count:hover { background: #26262e; } .pf-count b { font-size: 14.5px; font-weight: 900; } .dark .pf-count em { color: #a1a1aa; } .pf-facepile { display: inline-flex; align-items: center; } .dark .pf-facepile > * { border-color: #1e1e24; } .pf-facepile > *:first-child { margin-left: 0; } /* ===== Profile: settings icon, compact counts ===== */ .pf-settings { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; color: #71717a; background: #f4f4f7; margin-left: 4px; transition: all .2s; } .dark .pf-settings { background: #1e1e24; color: #a1a1aa; } .pf-settings:hover { background: #7c3aed; color: #fff; transform: rotate(45deg); } /* Counts sit under the name, compact with icons. */ .pf-count em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #71717a; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .pf-count em b { font-size: 13.5px; font-weight: 900; } .pf-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); }.pf-facepile > * { margin-left: -7px; border: 2px solid #f4f4f7; border-radius: 50%; } .pf-facemore { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 9.5px; font-weight: 900; color: #fff; background: #7c3aed; margin-left: -7px; border: 2px solid #f4f4f7; } .dark .pf-facemore { border-color: #1e1e24; } /* ===== Avatar frame picker: one line with arrows ===== */ .deco-carousel { display: flex; align-items: center; gap: 8px; } .deco-rail { flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px; } .deco-rail::-webkit-scrollbar { display: none; } .deco-rail .deco-cell { flex: none; width: 78px; } .deco-arrow { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 10px; color: #52525b; background: #f4f4f7; transition: all .18s; } .dark .deco-arrow { background: #1e1e24; color: #d4d4d8; } .deco-arrow:hover { background: #7c3aed; color: #fff; } /* Name and counts share one row, starting level with the avatar. */ @media (max-width: 1000px) { .pf-idrow { align-items: flex-start; flex-direction: column; } .pf-counts { margin-left: 0; margin-top: 8px; } } /* Stronger blur behind the story viewer. */ .hl-viewer-back { backdrop-filter: blur(18px) saturate(1.1); background: rgba(0,0,0,.72); } /* The name row starts where the online dot sits, not at the avatar's edge. */ @media (max-width: 1000px) { .pf-idrow { padding-left: 0; } } /* ===== Identity row sits beside the avatar, not beneath it ===== */ /* Followers / following / mutual row */ .pf-counts { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-top: 0; margin-left: 6px; flex: 1; min-width: 0; overflow: visible; } .pf-counts::-webkit-scrollbar { display: none; }.pf-count { display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; padding: 6px 11px; background: #f4f4f7; transition: all .2s; flex: none; } @media (max-width: 1080px) { .pf-idrow { padding-left: 0; margin-top: 12px; flex-wrap: wrap; } } /* Settings gear on the avatar, beside the presence dot. */ .pf-avatargear { position: absolute; right: 16px; top: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.24); transition: all .2s; } .pf-avatargear:hover { background: rgba(0,0,0,.72); } /* Settings tab panel */ .pf-settingspanel { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; } .pf-setrow { display: flex; align-items: center; gap: 13px; border-radius: 14px; padding: 14px 16px; text-align: left; background: #fafafa; border: 1px solid #efeff2; transition: all .2s; } .dark .pf-setrow { background: #1c1c22; border-color: #32323b; } .pf-setrow:hover { transform: translateX(3px); border-color: #c4b5fd; } .pf-seticon { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); } .pf-setrow b { display: block; font-size: 14px; font-weight: 800; } .pf-setrow em { display: block; font-style: normal; font-size: 12px; color: #a1a1aa; margin-top: 2px; } /* Sidebar account menu */ .sb-menu { position: absolute; bottom: calc(100% - 26px) !important; left: 0; right: 0; z-index: 9999; display: flex; flex-direction: column; padding: 5px; border-radius: 14px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 14px 36px rgba(0,0,0,.16); animation: hovIn .18s both; min-width: 190px; } /* ===== Badges ===== */ .bdg-row { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .bdg { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .1px; box-shadow: 0 2px 8px rgba(0,0,0,.16); transition: transform .2s; } .bdg:hover { transform: translateY(-2px) scale(1.04); } .bdg-sm { padding: 4px; border-radius: 50%; } /* ===== Badge admin ===== */ .ab-page { padding: 22px 26px 44px; } .ab-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .ab-head h1 { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; } .ab-head h1 svg { color: #7c3aed; } .ab-new { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border-radius: 12px; padding: 10px 17px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 5px 16px rgba(109,40,217,.3); transition: all .2s; } .ab-new:hover { transform: translateY(-2px); filter: brightness(1.08); } .ab-intro { font-size: 13px; color: #71717a; max-width: 640px; line-height: 1.6; margin-bottom: 20px; } .ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .ab-card { border-radius: 18px; padding: 16px; background: #fff; border: 1px solid #e9e9ee; transition: all .22s; } .dark .ab-card { background: #16161a; border-color: #2b2b33; } .ab-card:hover { transform: translateY(-3px); border-color: #c4b5fd; } .ab-card.off { opacity: .5; } .ab-preview { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 800; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.18); } .ab-desc { font-size: 12.5px; color: #71717a; line-height: 1.5; margin-top: 10px; } .ab-rule { font-size: 11px; font-weight: 800; color: #6d28d9; margin-top: 8px; } .dark .ab-rule { color: #c4b5fd; } .ab-award { display: flex; gap: 6px; margin-top: 12px; } .ab-award input { flex: 1; min-width: 0; border-radius: 10px; padding: 8px 11px; font-size: 12.5px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; color: inherit; } .dark .ab-award input { background: #1c1c22; border-color: #32323b; } .ab-award button { width: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: #16a34a; flex: none; } .ab-award button:hover { background: #15803d; } .ab-cardbtns { display: flex; gap: 6px; margin-top: 10px; } .dark .ab-edit { background: #1e1e24; color: #d4d4d8; } .ab-del { width: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #dc2626; background: #fef2f2; } .dark .ab-del { background: rgba(220,38,38,.16); color: #fca5a5; } .ab-icons { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .ab-icon { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 10px; color: #52525b; background: #f4f4f7; transition: all .18s; } .dark .ab-icon { background: #1e1e24; color: #d4d4d8; } .ab-icon.on { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; } .ab-color { width: 100%; height: 40px; border-radius: 10px; border: 1px solid #eef2f7; background: none; cursor: pointer; } .dark .ab-color { border-color: #32323b; } /* Profile cover: rounded, and columns given room to breathe. */ aside.md\:flex + .flex .app-col, .flex > .app-col { margin-left: 14px; } /* ===== One column definition for every three-column page ===== */ /* Centred wrapper. The feed stays a fixed 600px and the two rails absorb whatever is left, so nothing is wasted on a wide screen. */ .app-shell { width: 100%; max-width: 1267px; margin: 0 auto; } .app-col { flex: none; width: 600px; max-width: 100%; min-width: 0; margin: 0 20px 0 0; /* flush to the left rail, 20px to the widgets */ padding-top: 16px; } @media (max-width: 1280px) { .app-col { flex: 1; width: auto; } } @media (max-width: 767px) { .app-col { margin: 0; } } /* Badge holders picker */ .ab-face { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 12px; font-size: 14px; font-weight: 900; color: #fff; } .ab-give { border-radius: 10px; padding: 7px 14px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); flex: none; transition: all .18s; } .ab-give:hover { filter: brightness(1.1); } .ab-give.on { background: #fef2f2; color: #dc2626; } .dark .ab-give.on { background: rgba(220,38,38,.18); color: #fca5a5; } .ab-give.auto { background: #dcfce7; color: #15803d; cursor: not-allowed; } .dark .ab-give.auto { background: rgba(34,197,94,.18); color: #86efac; }.ab-edit { flex: 1; border-radius: 10px; padding: 8px; font-size: 12.5px; font-weight: 800; color: #52525b; background: #f4f4f7; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* Story tap zones. Low z-index so the header, stickers and reply bar win. */ .sv-tap { position: absolute; top: 64px; bottom: 84px; z-index: 8; background: transparent; -webkit-tap-highlight-color: transparent; } .sv-tap-prev { left: 0; width: 33%; } .sv-tap-next { right: 0; width: 67%; } /* ===== Live notification toasts ===== */ .lt-stack { position: fixed; right: 20px; top: 20px; z-index: 9995; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .lt-toast { display: flex; align-items: center; gap: 11px; width: 340px; pointer-events: auto; border-radius: 16px; padding: 12px 14px; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border: 1px solid #e9e9ee; box-shadow: 0 14px 40px rgba(0,0,0,.16); animation: ltIn .42s cubic-bezier(.2,1.2,.3,1) both; } .dark .lt-toast { background: rgba(20,20,24,.94); border-color: #2b2b33; box-shadow: 0 14px 40px rgba(0,0,0,.5); } .lt-toast:hover { transform: translateX(-3px); } @keyframes ltIn { from { opacity: 0; transform: translateX(40px) scale(.94); } } .lt-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 10px; color: #fff; } .lt-icon.like { background: linear-gradient(135deg,#f43f5e,#e11d48); } .lt-icon.comment, .lt-icon.message { background: linear-gradient(135deg,#3b82f6,#2563eb); } .lt-icon.follow { background: linear-gradient(135deg,#8b5cf6,#6d28d9); } .lt-icon.repost { background: linear-gradient(135deg,#10b981,#059669); } .lt-icon.tip { background: linear-gradient(135deg,#f59e0b,#d97706); } .lt-icon.sale, .lt-icon.offer { background: linear-gradient(135deg,#ec4899,#db2777); } .lt-toast b { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-toast em { display: block; font-style: normal; font-size: 12px; color: #71717a; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dark .lt-toast em { color: #a1a1aa; } .lt-x { flex: none; width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #a1a1aa; transition: all .18s; } .lt-x:hover { background: rgba(148,163,184,.2); color: #52525b; } @media (max-width: 640px) { .lt-stack { left: 12px; right: 12px; top: 12px; } .lt-toast { width: auto; } } /* A story reply shows what it's answering. */ .mg-storyref { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; padding: 7px 9px; border-radius: 12px; background: rgba(255,255,255,.16); border-left: 3px solid rgba(255,255,255,.55); } .mg-in .mg-storyref, .cd-msg.in .mg-storyref { background: rgba(0,0,0,.05); border-left-color: #7c3aed; } .dark .mg-in .mg-storyref { background: rgba(255,255,255,.07); } .mg-storythumb { width: 34px; height: 44px; border-radius: 7px; flex: none; background: linear-gradient(135deg, #7c3aed, #ec4899); background-size: cover; background-position: center; } .mg-storyref em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; opacity: .8; } .mg-storyref b { display: block; font-size: 11.5px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; } .pf-coveracts .pf-act { background: rgba(0,0,0,.5); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); } .pf-coveracts .pf-act:hover { background: rgba(0,0,0,.72); } .pf-coveracts .pf-act.primary { background: linear-gradient(135deg,#7c3aed,#4f46e5); border-color: transparent; } .pf-coveracts .pf-act.on { background: rgba(22,163,74,.92); color: #fff; border-color: transparent; } .pf-coveracts button[class*="rounded-full"] { background: rgba(0,0,0,.5); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); } /* "What's on your mind" — owner only */ .pf-composer { display: flex; align-items: center; gap: 12px; width: 100%; border-radius: 16px; padding: 13px 16px; margin: 14px 0; background: #fff; border: 1px solid #e9e9ee; transition: all .2s; } .dark .pf-composer { background: #16161a; border-color: #2b2b33; } .pf-composer:hover { border-color: #c4b5fd; transform: translateY(-1px); } .pf-composer span { flex: 1; text-align: left; font-size: 14.5px; color: #a1a1aa; } /* The first post had no rule above it, unlike the rest. */ .pf-postlist > *:first-child { border-top: 1px solid #f1f1f4; } .dark .pf-postlist > *:first-child { border-top-color: #1f1f23; } /* ===== Profile: actions on the cover, composer, post separator ===== */ .pf-coveracts { position: absolute; right: 16px; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 8px; } .pf-coveracts .absolute { z-index: 40; } /* ===== Profile settings: menu left, form right ===== */ .ps-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 16px 0; } @media (max-width: 900px) { .ps-wrap { grid-template-columns: 1fr; } } .ps-menu { display: flex; flex-direction: column; gap: 3px; } @media (max-width: 900px) { .ps-menu { flex-direction: row; overflow-x: auto; } } .ps-menuitem { display: flex; align-items: center; gap: 10px; flex: none; border-radius: 11px; padding: 10px 13px; font-size: 13.5px; font-weight: 700; color: #52525b; text-align: left; transition: all .18s; white-space: nowrap; } .dark .ps-menuitem { color: #a1a1aa; } .ps-menuitem:hover { background: #f4f4f7; } .dark .ps-menuitem:hover { background: #1e1e24; } .ps-menuitem.on { background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; } .ps-menuitem.danger { color: #dc2626; } .ps-menuitem.danger.on { background: #dc2626; color: #fff; } .ps-panel { border-radius: 18px; padding: 22px; background: #fff; border: 1px solid #e9e9ee; } .dark .ps-panel { background: #16161a; border-color: #2b2b33; } .ps-panel h3 { font-size: 18px; font-weight: 900; margin-bottom: 6px; } .ps-hint { font-size: 12.5px; color: #71717a; line-height: 1.6; margin-bottom: 18px; max-width: 520px; } .dark .ps-hint { color: #a1a1aa; } .ps-field { display: block; margin-bottom: 14px; } .ps-field > span { display: block; font-size: 12px; font-weight: 800; color: #a1a1aa; margin-bottom: 5px; } .ps-field input, .ps-field select, .ps-field textarea { width: 100%; border-radius: 11px; padding: 10px 13px; font-size: 13.5px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; color: inherit; resize: none; } .dark .ps-field input, .dark .ps-field select, .dark .ps-field textarea { background: #1c1c22; border-color: #32323b; } .ps-field input:focus, .ps-field textarea:focus, .ps-field select:focus { border-color: #a78bfa; } .ps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .ps-row { grid-template-columns: 1fr; } } .ps-save { display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; padding: 11px 20px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); margin-top: 6px; box-shadow: 0 5px 16px rgba(109,40,217,.28); transition: all .2s; } .ps-save:hover { transform: translateY(-2px); filter: brightness(1.08); } .ps-save.off { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .ps-delete { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 11px 20px; font-size: 13.5px; font-weight: 800; color: #fff; background: #dc2626; transition: all .2s; } .ps-delete:hover { background: #b91c1c; } .ps-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 150px; border-radius: 14px; border: 2px dashed #d4d4d8; color: #71717a; overflow: hidden; transition: all .2s; } .dark .ps-upload { border-color: #33333c; color: #a1a1aa; } .ps-upload:hover { border-color: #7c3aed; color: #7c3aed; } .ps-upload img { width: 100%; height: 100%; object-fit: cover; } .ps-upload b { font-size: 13px; font-weight: 800; } .ps-upload em { font-style: normal; font-size: 11px; } .ps-plan { display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 16px; margin-bottom: 10px; background: #fafafa; border: 1px solid #efeff2; } .dark .ps-plan { background: #1c1c22; border-color: #32323b; } .ps-plan.current { border-color: #7c3aed; background: rgba(124,58,237,.05); } .ps-plan b { display: block; font-size: 14.5px; font-weight: 900; } .ps-plan em { display: block; font-style: normal; font-size: 12.5px; color: #71717a; margin-top: 3px; } .ps-plan i { font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: #7c3aed; border-radius: 7px; padding: 4px 10px; margin-left: auto; } .ps-upgrade { margin-left: auto; border-radius: 11px; padding: 9px 18px; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#f59e0b,#e11d48); } .ps-store { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 14px 18px; background: #18181b; color: #fff; transition: transform .2s; } .ps-store:hover { transform: translateY(-2px); } .ps-store em { display: block; font-style: normal; font-size: 10.5px; opacity: .75; } .ps-store b { display: block; font-size: 15px; font-weight: 800; } .ps-addr { display: flex; gap: 8px; } .ps-addr input { flex: 1; } .ps-addr button { width: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); } .ps-addrlist { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .ps-addrrow { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 11px 14px; font-size: 13px; background: #fafafa; border: 1px solid #efeff2; } .dark .ps-addrrow { background: #1c1c22; border-color: #32323b; } .ps-addrrow button { flex: none; border-radius: 9px; padding: 6px 11px; font-size: 11.5px; font-weight: 800; color: #dc2626; background: #fef2f2; } .dark .ps-addrrow button { background: rgba(220,38,38,.16); color: #fca5a5; } .ps-addrrow em { font-style: normal; color: #a1a1aa; font-size: 12px; } /* Details slides up from the bottom, like the other reel panels. */ .rl-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 78%; overflow-y: auto; padding: 32px 16px 16px; border-radius: 20px 20px 0 0; color: #fff; background: rgba(0,0,0,.6); backdrop-filter: blur(20px); animation: rlUp .3s cubic-bezier(.2,1.1,.3,1) both; } .rl-sheet-x:hover { background: rgba(255,255,255,.28); } @keyframes rlUp { from { transform: translateY(100%); } } .rl-sheet input, .rl-sheet textarea { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.16) !important; color: #fff !important; } .rl-sheet input::placeholder, .rl-sheet textarea::placeholder { color: rgba(255,255,255,.45); } .rl-sheet .rl-music-tab { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); } .rl-sheet .rl-music-tab.on { background: linear-gradient(135deg,#7b2ff7,#4f46e5); color: #fff; } .rl-sheet .rl-music-search { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); } /* Voice recording */ .mg-recbar { position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px); z-index: 6; display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: #fff; background: #dc2626; box-shadow: 0 8px 24px rgba(220,38,38,.35); } .mg-recdot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: mgUn 1.2s ease-in-out infinite; } .mg-recbar button { margin-left: auto; border-radius: 9px; padding: 5px 14px; font-size: 11.5px; font-weight: 900; color: #dc2626; background: #fff; } .mg-recerr { position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px); z-index: 6; border-radius: 12px; padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: #fff; background: #52525b; } .mg-ico.mg-rec { color: #fff; background: #dc2626; } .mg-audio { width: 220px; max-width: 100%; height: 38px; margin-bottom: 4px; } /* Tool rail sits over the video on the right, like the story editor. */ .rl-preview { position: relative; height: min(88vh, 860px); aspect-ratio: 10/16; max-width: 95vw; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,.22); } /* ===== Reel creator ===== */ .rl-rail { display: flex; flex-direction: column; gap: 10px; flex: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 15; } .rl-rail .rl-tool { width: 54px; padding: 9px 4px; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); } .dark .rl-rail .rl-tool { background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.14); } .rl-rail .rl-tool:hover { background: rgba(0,0,0,.7); color: #fff; } .rl-rail .rl-tool.on { background: linear-gradient(135deg,#7b2ff7,#4f46e5); border-color: transparent; } .rl-rail .rl-tool span { font-size: 9px; } /* ===== Settings: About tab, map picker, nicer toast ===== */ .ps-about { position: relative; } .ps-about textarea { width: 100%; border-radius: 14px; padding: 15px 17px; font-size: 15px; line-height: 1.65; background: #f8fafc; border: 1px solid #eef2f7; outline: none; color: inherit; resize: none; } .dark .ps-about textarea { background: #1c1c22; border-color: #32323b; } .ps-about textarea:focus { border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167,139,250,.14); } .ps-count { position: absolute; right: 14px; bottom: 12px; font-size: 11px; font-weight: 800; color: #a1a1aa; } .ps-count.near { color: #e11d48; } .ps-preview { margin: 18px 0; } .ps-previewlabel { font-size: 11px; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 7px; } .ps-previewcard { border-radius: 14px; padding: 15px 17px; font-size: 14px; line-height: 1.65; color: #52525b; background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(236,72,153,.05)); border: 1px solid rgba(124,58,237,.14); } .dark .ps-previewcard { color: #d4d4d8; background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(236,72,153,.1)); border-color: rgba(124,58,237,.24); } .ps-mapbtn:hover { transform: translateY(-2px); filter: brightness(1.08); } /* A toast with more presence than the plain pill. */ .ps-note { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 9996; display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 13px 22px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#16a34a,#059669); box-shadow: 0 14px 40px rgba(22,163,74,.4); animation: psNote .5s cubic-bezier(.2,1.3,.3,1) both; } .ps-note::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.24); font-size: 13px; } @keyframes psNote { from { opacity: 0; transform: translate(-50%, 24px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* Map picker */ .am-card { width: min(560px, 96vw); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.3); animation: hovIn .26s cubic-bezier(.2,1.1,.3,1) both; } .dark .am-card { background: #16161a; } .am-map { position: relative; height: 340px; overflow: hidden; cursor: grab; background: #e8e8ec; touch-action: none; } .am-map:active { cursor: grabbing; } .am-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: #e11d48; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); pointer-events: none; z-index: 5; } .am-zoom { position: absolute; right: 12px; top: 12px; z-index: 5; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.2); } .am-zoom button { width: 32px; height: 32px; font-size: 17px; font-weight: 800; color: #3f3f46; background: #fff; } .am-zoom button:hover { background: #f4f4f7; } .am-locate { position: absolute; right: 12px; bottom: 12px; z-index: 5; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #0ea5e9; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); } .am-foot { display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-wrap: wrap; } .am-label { flex: 1; min-width: 180px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #52525b; } .dark .am-label { color: #d4d4d8; } .am-foot .ps-save { margin-top: 0; } /* Verification queue */ .av-pending { margin-left: auto; border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 900; color: #fff; background: #f59e0b; } .av-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .av-card { border-radius: 18px; padding: 16px; background: #fff; border: 1px solid #e9e9ee; } .dark .av-card { background: #16161a; border-color: #2b2b33; } .av-card.done { opacity: .65; } .av-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .av-who b { display: block; font-size: 14px; font-weight: 800; } .av-who em { display: block; font-style: normal; font-size: 12px; color: #a1a1aa; } .av-status { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 4px 10px; font-size: 10.5px; font-weight: 900; } .av-status.pending { color: #b45309; background: #fef3c7; } .av-status.approved { color: #fff; background: #3b82f6; } .av-status.rejected { color: #b91c1c; background: #fee2e2; } .av-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .av-photo { position: relative; aspect-ratio: 4/3; border-radius: 11px; overflow: hidden; } .av-photo img { width: 100%; height: 100%; object-fit: cover; } .av-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px; font-size: 9.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.55); } .av-info { font-size: 12.5px; color: #71717a; line-height: 1.55; margin-top: 10px; } .av-actions { display: flex; gap: 8px; margin-top: 12px; } .av-approve, .av-reject { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 11px; padding: 9px; font-size: 12.5px; font-weight: 800; transition: all .18s; } .av-approve { color: #fff; background: #16a34a; } .av-approve:hover { background: #15803d; } .av-reject { color: #dc2626; background: #fef2f2; } .dark .av-reject { background: rgba(220,38,38,.16); color: #fca5a5; } .av-zoom { max-width: 90vw; max-height: 90vh; border-radius: 16px; } /* Reel music tabs, matching the story editor. */ .rl-music-tabs { display: flex; gap: 6px; margin: 10px 0 8px; } .rl-music-tab { flex: 1; border-radius: 10px; padding: 7px; font-size: 11.5px; font-weight: 800; color: #71717a; background: #f4f4f7; transition: all .18s; } .dark .rl-music-tab { background: #1e1e24; color: #a1a1aa; } .rl-music-tab.on { background: linear-gradient(135deg,#7b2ff7,#4f46e5); color: #fff; } /* Publish progress */ .rl-uploading { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 9996; width: min(360px, 92vw); border-radius: 16px; padding: 14px 18px; background: rgba(20,20,24,.95); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0,0,0,.4); animation: hovIn .3s both; } .rl-uploading p { font-size: 12px; font-weight: 700; color: #fff; margin-top: 9px; text-align: center; } /* Story controls, grouped top-right */ .sv-controls { display: flex; align-items: center; gap: 6px; } .sv-controls button { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.4); backdrop-filter: blur(6px); transition: all .18s; } .sv-controls button:hover { background: rgba(0,0,0,.68); transform: scale(1.08); } .sv-controls .sv-del:hover { background: #dc2626; } /* Address picked from the map */ .ps-picked { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; background: rgba(14,165,233,.08); border: 1px solid rgba(14,165,233,.22); } .dark .ps-picked { background: rgba(14,165,233,.14); border-color: rgba(14,165,233,.3); } .ps-picked svg { color: #0ea5e9; flex: none; } /* Profile tabs need contrast in light mode. */ .pf-tab { display: inline-flex; align-items: center; gap: 7px; flex: none; border-radius: 12px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; color: #3f3f46; background: #eceff4; transition: all .2s; } .dark .pf-tab { background: #1e1e24; color: #a1a1aa; } .pf-tab:hover { transform: translateY(-2px); color: #6d28d9; background: #e2e6ee; } .dark .pf-tab:hover { background: #26262e; } /* The 3-dot menu must clear the card below it. */ .pf-coveracts, .pf-coveracts * { z-index: 60; } .pf-cover img, .pf-cover-fill { border-radius: 20px 20px 0 0; } .rl-sheet-save:hover { filter: brightness(1.12); } /* Details: less air between the fields. */ .rl-sheet .rl-field { margin-bottom: 4px; } .rl-sheet .rl-count { margin-bottom: 10px; }.rl-sheet h3 { font-size: 11.5px; font-weight: 900; color: rgba(255,255,255,.6); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; } /* Volume stays visible while the sheet is open. */ .rl-sheet .rl-volume { position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(transparent, rgba(0,0,0,.5) 40%); } /* Share sits on the video, in one colour. */ .rl-share-on-video { position: absolute; right: 12px; bottom: 12px; z-index: 16; display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; padding: 11px 20px; font-size: 13.5px; font-weight: 800; color: #fff; background: #7c3aed; box-shadow: 0 6px 20px rgba(124,58,237,.4); transition: all .2s; } .rl-share-on-video:hover { background: #6d28d9; transform: translateY(-2px); } .rl-share-on-video:disabled { opacity: .5; }.rl-clear { position: absolute; top: 12px; right: auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: transform .2s; left: 12px; } /* Badges: icon-only and no-background variants. */ .bdg-icon { padding: 5px; border-radius: 50%; } .bdg-plain { background: none !important; box-shadow: none; padding: 2px; } .bdg-plain:hover { transform: scale(1.15); } /* A long surname shouldn't push the counts out of the card. */ .pf-idrow h1 { flex: none; min-width: 0; font-size: 19px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1200px) { .pf-idrow h1 { max-width: 180px; } } /* ===== Reel sheet header: Save beside Close ===== */ .rl-sheet-head { position: relative; right: auto; top: auto; display: flex; align-items: center; gap: 10px; z-index: 3; margin: -18px 0 14px; } .rl-sheet-title { font-size: 11.5px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.55); }.rl-sheet-save { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 14px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#7b2ff7,#4f46e5); transition: filter .18s; margin: 0 auto; } .rl-sheet-x { position: static; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.15); transition: background .18s; } /* Four tracks visible, then scroll — leaves room for the volume control. */ .rl-music-list { max-height: 208px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } /* Gap before the map button, as asked. */ .ps-mapbtn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 11px 18px; margin-bottom: 22px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#0ea5e9,#4f46e5); box-shadow: 0 5px 16px rgba(14,165,233,.28); transition: all .2s; } /* Saved page and profile content sit in white cards. */ .sv-page, .app-col > .saved-wrap { border-radius: 20px; padding: 20px; background: #fff; border: 1px solid #e9e9ee; } .dark .sv-page, .dark .app-col > .saved-wrap { background: #16161a; border-color: #2b2b33; } /* ===== Profile About tab ===== */ .pf-about { padding: 16px 0; } .dark .pf-aboutbio { background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(236,72,153,.1)); border-color: rgba(124,58,237,.24); } @media (max-width: 700px) { .pf-aboutgrid { grid-template-columns: 1fr; } } /* Delete your own reel */ .rp-delete { position: static; right: 14px; top: 14px; z-index: 20; width: auto; height: auto; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #f87171; background: none; box-shadow: none; transition: all .2s; flex-direction: column; } .rp-delete:hover { background: none; transform: scale(1.1); color: #dc2626; } .rp-confirm { width: min(360px, 92vw); border-radius: 22px; padding: 26px 24px; text-align: center; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.3); animation: hovIn .26s cubic-bezier(.2,1.1,.3,1) both; } .dark .rp-confirm { background: #16161a; } .rp-confirm-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: #dc2626; background: #fef2f2; margin-bottom: 14px; } .dark .rp-confirm-icon { background: rgba(220,38,38,.16); } .rp-confirm h3 { font-size: 18px; font-weight: 900; margin-bottom: 7px; } .rp-confirm p { font-size: 13px; line-height: 1.6; color: #71717a; margin-bottom: 20px; } .dark .rp-confirm p { color: #a1a1aa; } .rp-confirm-btns { display: flex; gap: 9px; } .rp-cancel, .rp-confirmdel { flex: 1; border-radius: 12px; padding: 11px; font-size: 13.5px; font-weight: 800; transition: all .18s; } .rp-cancel { color: #52525b; background: #f4f4f7; } .dark .rp-cancel { background: #1e1e24; color: #d4d4d8; } .rp-confirmdel { color: #fff; background: #dc2626; } .rp-confirmdel:hover { background: #b91c1c; } /* Marketplace location picker */ .cl-locpick { display: flex; align-items: center; gap: 10px; width: 100%; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; background: #f8fafc; border: 1px solid #eef2f7; transition: all .18s; } .dark .cl-locpick { background: #1c1c22; border-color: #32323b; } .cl-locpick:hover { border-color: #a78bfa; } .cl-locpick svg { color: #e11d48; flex: none; } .cl-locpick i { font-style: normal; font-size: 11.5px; font-weight: 800; color: #6d28d9; flex: none; } .rp-desc { display: block; width: 100%; text-align: left; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.88); margin-bottom: 6px; } .rp-desc.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rp-more { font-weight: 800; color: rgba(255,255,255,.65); margin-left: 5px; } /* Profile content in white cards */ /* ===== Reel caption and description ===== */ .rp-caption { font-size: 14px; font-weight: 700; line-height: 1.35; margin-bottom: 2px; margin-top: 6px; } /* ===== About tab: highlights first, softer cards ===== */ .pf-about > div:first-child { margin-bottom: 18px; }.pf-aboutgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pf-aboutrow { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 16px 18px; background: #fff; border: 1px solid #edeef2; transition: all .2s; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .dark .pf-aboutrow { background: #1a1a20; border-color: #2b2b33; box-shadow: none; } .pf-aboutrow:hover { transform: translateY(-2px); border-color: #c4b5fd; box-shadow: 0 8px 22px rgba(124,58,237,.12); } .pf-abouticon { display: flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); } .pf-aboutrow em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: #a1a1aa; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; } .pf-aboutrow b { display: block; font-size: 14.5px; font-weight: 800; word-break: break-word; } .pf-aboutbio { border-radius: 18px; padding: 20px 22px; margin-bottom: 14px; font-size: 15.5px; line-height: 1.75; background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(236,72,153,.05)); border: 1px solid rgba(124,58,237,.14); } /* Camera on the avatar replaces the cover settings button. */ .pf-avatarcam { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; } .pf-avatarwrap:hover .pf-avatarcam { opacity: 1; } .dark .pf-card { background: #16161a; border-color: #2b2b33; } /* The cover is the card's top edge, so it needs no radius of its own. */ /* The image is clipped, not the cover, so dropdowns can overflow it. */ .pf-cover img, .pf-cover-fill { border-radius: 20px 20px 0 0; } .pf-cover > img, .pf-cover > .pf-cover-fill { overflow: hidden; } /* Everything below the cover shares one padding. */ .pf-body { padding: 0 20px; } .pf-body:last-child { padding-bottom: 22px; } /* ===== Profile identity row ===== */ .pf-idrow { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-top: 10px; padding-left: 4px; position: relative; z-index: 2; } .pf-avatarwrap { position: relative; display: inline-block; z-index: 4; } /* ===== Profile tabs ===== */ .pf-tabs { display: flex; gap: 6px; margin-top: 16px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; margin: 16px 0 0; padding: 0 0 2px; } .pf-tabs::-webkit-scrollbar { display: none; } /* Tabs and content share one card, aligned with the cover. */ /* ===== Profile: one card holding cover, identity, tabs and content ===== */ .pf-card { border-radius: 20px; overflow: visible; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 12px rgba(0,0,0,.05); } /* ===== Profile cover ===== */ .pf-cover { position: relative; height: 210px; overflow: visible; border-radius: 20px 20px 0 0; } /* ===== Pinned conversations ===== */ .mg-pinhead { display: flex; align-items: center; gap: 5px; padding: 6px 10px 4px; font-size: 10px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #a1a1aa; } .mg-pinhead svg { color: #7c3aed; } .mg-pinmark { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: #7c3aed; } /* ===== Admin settings ===== */ .as-words { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .as-word { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 8px 6px 13px; font-size: 12.5px; font-weight: 700; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; } .dark .as-word { color: #fca5a5; background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.3); } .as-word.perk { color: #6d28d9; background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.22); } .dark .as-word.perk { color: #c4b5fd; background: rgba(124,58,237,.18); } .as-word button { display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(0,0,0,.08); transition: background .18s; } .as-word button:hover { background: rgba(0,0,0,.2); } .as-preview { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 12px 16px; margin: 14px 0; font-size: 13px; font-weight: 700; } .as-preview.info { color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; } .as-preview.warn { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; } .as-preview.success { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; } .dark .as-preview.info { color: #93c5fd; background: rgba(37,99,235,.16); border-color: rgba(37,99,235,.3); } .dark .as-preview.warn { color: #fcd34d; background: rgba(217,119,6,.16); border-color: rgba(217,119,6,.3); } .dark .as-preview.success { color: #86efac; background: rgba(22,163,74,.16); border-color: rgba(22,163,74,.3); } /* Site-wide announcement banner */ .site-banner { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; font-size: 13px; font-weight: 700; } .site-banner.info { color: #fff; background: linear-gradient(90deg,#2563eb,#4f46e5); } .site-banner.warn { color: #fff; background: linear-gradient(90deg,#d97706,#dc2626); } .site-banner.success { color: #fff; background: linear-gradient(90deg,#16a34a,#059669); } /* ===== Admin money ===== */ .am-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 6px; } .am-stat { display: flex; flex-direction: column; gap: 5px; border-radius: 16px; padding: 16px; border: 1px solid #edeef2; } .dark .am-stat { border-color: #2b2b33; } .am-stat.blue { background: rgba(59,130,246,.06); border-color: rgba(59,130,246,.18); } .am-stat.green { background: rgba(22,163,74,.06); border-color: rgba(22,163,74,.18); } .am-stat.amber { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.2); } .am-stat.purple { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.18); } .am-stat-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; margin-bottom: 3px; } .am-stat.blue .am-stat-icon { background: #3b82f6; } .am-stat.green .am-stat-icon { background: #16a34a; } .am-stat.amber .am-stat-icon { background: #f59e0b; } .am-stat.purple .am-stat-icon { background: #7c3aed; } .am-stat b { font-size: 21px; font-weight: 900; letter-spacing: -.5px; } .am-stat em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #71717a; } .dark .am-stat em { color: #a1a1aa; } .am-methods { display: flex; gap: 8px; flex-wrap: wrap; } .am-method { border-radius: 11px; padding: 9px 16px; font-size: 12.5px; font-weight: 800; color: #71717a; background: #f4f4f7; transition: all .18s; } .dark .am-method { background: #1e1e24; color: #a1a1aa; } .am-method.on { background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; } .am-wlist { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; } .am-wrow { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 13px 16px; background: #fafafa; border: 1px solid #efeff2; flex-wrap: wrap; } .dark .am-wrow { background: #1c1c22; border-color: #32323b; } .am-wrow.done { opacity: .62; } .am-wuser { font-size: 13.5px; font-weight: 800; } .am-wuser em { font-style: normal; font-weight: 600; color: #a1a1aa; font-size: 12px; } .am-wdest { font-size: 11.5px; color: #a1a1aa; margin-top: 2px; } .am-wamount { font-size: 15px; font-weight: 900; flex: none; } .am-wstatus { border-radius: 8px; padding: 4px 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; flex: none; } .am-wstatus.pending { color: #b45309; background: #fef3c7; } .am-wstatus.approved { color: #1d4ed8; background: #dbeafe; } .am-wstatus.paid { color: #15803d; background: #dcfce7; } .am-wstatus.declined { color: #b91c1c; background: #fee2e2; } .am-wbtns { display: flex; gap: 6px; flex: none; } .am-wbtns .av-approve, .am-wbtns .av-reject { flex: none; padding: 8px 13px; } .am-markpaid { border-radius: 10px; padding: 8px 14px; font-size: 12px; font-weight: 800; color: #fff; background: #16a34a; flex: none; } .am-gifts { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; } .am-gift { display: flex; align-items: center; gap: 11px; border-radius: 14px; padding: 11px 14px; background: #fafafa; border: 1px solid #efeff2; } .dark .am-gift { background: #1c1c22; border-color: #32323b; } .am-gift.off { opacity: .5; } .am-giftemoji { font-size: 24px; } .am-giftname { flex: 1; min-width: 0; border-radius: 9px; padding: 8px 11px; font-size: 13px; background: #fff; border: 1px solid #eef2f7; outline: none; color: inherit; } .dark .am-giftname { background: #16161a; border-color: #32323b; } .am-giftprice { width: 84px; border-radius: 9px; padding: 8px 11px; font-size: 13px; font-weight: 800; background: #fff; border: 1px solid #eef2f7; outline: none; color: inherit; } .dark .am-giftprice { background: #16161a; border-color: #32323b; } /* ===== Withdraw panel ===== */ .wd-card { border-radius: 18px; padding: 20px; margin-top: 14px; background: #fff; border: 1px solid #e9e9ee; } .dark .wd-card { background: #16161a; border-color: #2b2b33; } .wd-card h3 { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 900; margin-bottom: 12px; } .wd-card h3 svg { color: #16a34a; } .wd-avail { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; } .wd-avail b { font-size: 26px; font-weight: 900; letter-spacing: -.6px; } .wd-avail em { font-style: normal; font-size: 12px; color: #a1a1aa; } .wd-form { display: flex; flex-direction: column; gap: 10px; } .wd-input { width: 100%; border-radius: 12px; padding: 11px 14px; font-size: 14px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; color: inherit; } .dark .wd-input { background: #1c1c22; border-color: #32323b; } .wd-input:focus { border-color: #16a34a; } .wd-methods { display: flex; gap: 7px; flex-wrap: wrap; } .wd-method { flex: 1; min-width: 90px; border-radius: 11px; padding: 9px; font-size: 12.5px; font-weight: 800; color: #71717a; background: #f4f4f7; transition: all .18s; } .dark .wd-method { background: #1e1e24; color: #a1a1aa; } .wd-method.on { background: linear-gradient(135deg,#16a34a,#059669); color: #fff; } .wd-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#16a34a,#059669); box-shadow: 0 5px 16px rgba(22,163,74,.28); transition: all .2s; } .wd-submit:hover { transform: translateY(-2px); } .wd-submit:disabled { opacity: .45; transform: none; box-shadow: none; } .wd-note { font-size: 12.5px; font-weight: 700; color: #16a34a; margin-top: 10px; text-align: center; } .wd-list { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f1f4; } .dark .wd-list { border-color: #26262b; } .wd-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .wd-status { display: inline-flex; align-items: center; gap: 4px; border-radius: 7px; padding: 3px 9px; font-size: 10px; font-weight: 900; text-transform: uppercase; } .wd-status.pending { color: #b45309; background: #fef3c7; } .wd-status.approved { color: #1d4ed8; background: #dbeafe; } .wd-status.paid { color: #15803d; background: #dcfce7; } .wd-status.declined { color: #b91c1c; background: #fee2e2; } /* ===== Locked (paid) posts ===== */ .pc-locked { display: flex; flex-direction: column; align-items: center; gap: 7px; border-radius: 16px; padding: 30px 20px; margin-top: 10px; text-align: center; background: linear-gradient(135deg, rgba(124,58,237,.07), rgba(236,72,153,.05)); border: 1px dashed rgba(124,58,237,.3); } .dark .pc-locked { background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(236,72,153,.1)); border-color: rgba(124,58,237,.4); } .pc-lockicon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); margin-bottom: 4px; } .pc-locked b { font-size: 15.5px; font-weight: 900; } .pc-locked em { font-style: normal; font-size: 12.5px; color: #71717a; } .dark .pc-locked em { color: #a1a1aa; } .pc-unlock { margin-top: 8px; border-radius: 12px; padding: 11px 24px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow: 0 5px 16px rgba(124,58,237,.3); transition: all .2s; } .pc-unlock:hover { transform: translateY(-2px); filter: brightness(1.08); } .pc-lockerr { font-size: 12px; font-weight: 700; color: #dc2626; margin-top: 6px; } /* ===== Gift modal ===== */ .gm-card { width: min(440px, 94vw); border-radius: 22px; padding-bottom: 20px; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.3); animation: hovIn .26s cubic-bezier(.2,1.1,.3,1) both; } .dark .gm-card { background: #16161a; } .gm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 6px 20px 16px; } .gm-gift { display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 16px; padding: 14px 6px; background: #fafafa; border: 2px solid transparent; transition: all .2s; } .dark .gm-gift { background: #1c1c22; } .gm-gift:hover { transform: translateY(-3px); } .gm-gift.on { border-color: #7c3aed; background: rgba(124,58,237,.07); } .gm-emoji { font-size: 30px; } .gm-gift b { font-size: 11.5px; font-weight: 800; } .gm-gift em { font-style: normal; font-size: 11px; color: #a1a1aa; font-weight: 700; } .gm-send { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 40px); margin: 0 20px; border-radius: 13px; padding: 13px; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#f59e0b,#ec4899); box-shadow: 0 6px 18px rgba(236,72,153,.3); transition: all .2s; } .gm-send:hover { transform: translateY(-2px); } .gm-send.off { opacity: .45; transform: none; box-shadow: none; } .gm-done { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 32px 20px; text-align: center; } .gm-done span { font-size: 52px; } .gm-done b { font-size: 18px; font-weight: 900; } .gm-done em { font-style: normal; font-size: 13px; color: #a1a1aa; } /* ===== Advertiser dashboard ===== */ .ad-head { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; } .ad-head h1 { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; } .ad-head h1 svg { color: #7c3aed; } .ad-new { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border-radius: 12px; padding: 10px 17px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow: 0 5px 16px rgba(124,58,237,.28); transition: all .2s; } .ad-new:hover { transform: translateY(-2px); } .ad-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .ad-card { border-radius: 18px; padding: 17px 19px; background: #fff; border: 1px solid #e9e9ee; } .dark .ad-card { background: #16161a; border-color: #2b2b33; } .ad-top { display: flex; align-items: center; gap: 10px; } .ad-top b { font-size: 15px; font-weight: 800; flex: 1; min-width: 0; } .ad-status { border-radius: 8px; padding: 4px 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; } .ad-status.pending { color: #b45309; background: #fef3c7; } .ad-status.running { color: #15803d; background: #dcfce7; } .ad-status.paused { color: #52525b; background: #f4f4f7; } .ad-status.finished { color: #1d4ed8; background: #dbeafe; } .ad-status.rejected { color: #b91c1c; background: #fee2e2; } .ad-body { font-size: 13px; color: #71717a; line-height: 1.55; margin-top: 6px; } .dark .ad-body { color: #a1a1aa; } .ad-metrics { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; font-weight: 700; color: #71717a; } .dark .ad-metrics { color: #a1a1aa; } .ad-metrics span { display: inline-flex; align-items: center; gap: 5px; } .ad-bar { height: 6px; border-radius: 999px; background: rgba(0,0,0,.07); overflow: hidden; margin-top: 11px; } .dark .ad-bar { background: rgba(255,255,255,.09); } .ad-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#7c3aed,#ec4899); transition: width .5s ease; } /* Subscribed state on the profile */ .pf-act.on { background: rgba(245,158,11,.9) !important; color: #fff !important; } /* ===== Events listing ===== */ .ev-head { display: flex; align-items: center; gap: 14px; margin: 18px 0 12px; } .ev-head h1 { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; } .ev-head h1 svg { color: #7c3aed; } .ev-new { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border-radius: 12px; padding: 10px 17px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow: 0 5px 16px rgba(124,58,237,.28); transition: all .2s; } .ev-new:hover { transform: translateY(-2px); } .ev-tabs { display: flex; gap: 6px; margin-bottom: 18px; } .ev-tab { border-radius: 12px; padding: 9px 18px; font-size: 13.5px; font-weight: 700; color: #52525b; background: #eceff4; transition: all .2s; } .dark .ev-tab { background: #1e1e24; color: #a1a1aa; } .ev-tab.on { background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; } .ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; padding-bottom: 30px; } .ev-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e9e9ee; transition: transform .26s cubic-bezier(.3,1.2,.4,1), box-shadow .26s, border-color .26s; } .dark .ev-card { background: #16161a; border-color: #2b2b33; } .ev-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.14); border-color: #c4b5fd; } .ev-cover { position: relative; display: block; height: 128px; } .ev-cover img { width: 100%; height: 100%; object-fit: cover; } .ev-date { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; align-items: center; border-radius: 12px; padding: 7px 11px; background: rgba(255,255,255,.95); box-shadow: 0 4px 12px rgba(0,0,0,.18); } .ev-date b { font-size: 18px; font-weight: 900; line-height: 1; color: #18181b; } .ev-date em { font-style: normal; font-size: 9.5px; font-weight: 900; color: #7c3aed; letter-spacing: .5px; } .ev-price { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); } .ev-body { display: flex; flex-direction: column; gap: 7px; padding: 14px 15px 15px; } .ev-title { font-size: 15px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ev-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #71717a; font-weight: 600; } .dark .ev-meta { color: #a1a1aa; } .ev-meta i { width: 3px; height: 3px; border-radius: 50%; background: #d4d4d8; } .ev-foot { display: flex; align-items: center; gap: 7px; margin-top: 3px; padding-top: 11px; border-top: 1px solid #f1f1f4; } .dark .ev-foot { border-color: #1f1f23; } .ev-host { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-going { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: #6d28d9; } .dark .ev-going { color: #c4b5fd; } /* ===== Event detail ===== */ .ed-card { border-radius: 20px; overflow: hidden; margin: 18px 0 30px; background: #fff; border: 1px solid #e9e9ee; } .dark .ed-card { background: #16161a; border-color: #2b2b33; } .ed-cover { position: relative; height: 220px; } .ed-cover img { width: 100%; height: 100%; object-fit: cover; } .ed-back { position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); } .ed-cancelled { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px; font-size: 11.5px; font-weight: 900; color: #fff; background: #dc2626; } .ed-body { position: relative; padding: 20px 22px 24px; } .ed-when { position: absolute; right: 22px; top: -34px; display: flex; flex-direction: column; align-items: center; border-radius: 14px; padding: 9px 15px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18); } .dark .ed-when { background: #1c1c22; } .ed-when b { font-size: 23px; font-weight: 900; line-height: 1; } .ed-when em { font-style: normal; font-size: 10px; font-weight: 900; color: #7c3aed; letter-spacing: .5px; } .ed-title { font-size: 25px; font-weight: 900; letter-spacing: -.6px; padding-right: 90px; } .ed-facts { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; } .ed-facts span { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #52525b; } .dark .ed-facts span { color: #d4d4d8; } .ed-facts svg { color: #7c3aed; flex: none; } .ed-actions { display: flex; gap: 9px; margin-top: 20px; flex-wrap: wrap; } .ed-going, .ed-interested { display: inline-flex; align-items: center; gap: 7px; border-radius: 13px; padding: 12px 22px; font-size: 13.5px; font-weight: 800; transition: all .2s; } .ed-going { color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow: 0 6px 18px rgba(124,58,237,.3); } .ed-going:hover { transform: translateY(-2px); } .ed-going.on { background: linear-gradient(135deg,#16a34a,#059669); box-shadow: 0 6px 18px rgba(22,163,74,.3); } .ed-interested { color: #52525b; background: #f4f4f7; } .dark .ed-interested { background: #1e1e24; color: #d4d4d8; } .ed-interested.on { background: #fef3c7; color: #b45309; } .dark .ed-interested.on { background: rgba(245,158,11,.2); color: #fcd34d; } .ed-share { width: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #52525b; background: #f4f4f7; } .dark .ed-share { background: #1e1e24; color: #d4d4d8; } .ed-error { font-size: 12.5px; font-weight: 700; color: #7c3aed; margin-top: 10px; } .ed-join { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 12px 20px; margin-top: 14px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#0ea5e9,#4f46e5); } .ed-desc { font-size: 14.5px; line-height: 1.7; color: #52525b; margin-top: 20px; white-space: pre-wrap; } .dark .ed-desc { color: #d4d4d8; } .ed-host { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 14px 16px; margin-top: 20px; background: #fafafa; border: 1px solid #efeff2; } .dark .ed-host { background: #1c1c22; border-color: #32323b; } .ed-host em { display: block; font-style: normal; font-size: 11px; color: #a1a1aa; font-weight: 700; } .ed-host b { font-size: 14.5px; font-weight: 800; } .ed-host b:hover { text-decoration: underline; } .ed-attendees { margin-top: 22px; } .ed-attendees h3 { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; color: #a1a1aa; margin-bottom: 12px; } .ed-faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } @media (max-width: 640px) { .ed-faces { grid-template-columns: repeat(4, 1fr); } } .ed-face { display: flex; flex-direction: column; align-items: center; gap: 5px; transition: transform .2s; } .ed-face:hover { transform: translateY(-3px); } .ed-face span { font-size: 11px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== Content & access admin ===== */ .cp-list { display: flex; flex-direction: column; gap: 9px; } .cp-row { display: flex; align-items: center; gap: 11px; border-radius: 14px; padding: 13px 16px; background: #fafafa; border: 1px solid #efeff2; } .dark .cp-row { background: #1c1c22; border-color: #32323b; } .cp-row b { display: block; font-size: 14px; font-weight: 800; } .cp-row em { display: block; font-style: normal; font-size: 11.5px; color: #a1a1aa; } .cp-state { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 4px 10px; font-size: 10.5px; font-weight: 900; color: #71717a; background: #f4f4f7; flex: none; } .dark .cp-state { background: #26262e; color: #a1a1aa; } .cp-state.on { color: #15803d; background: #dcfce7; } .dark .cp-state.on { background: rgba(22,163,74,.2); color: #86efac; } .cp-row .ab-edit { flex: none; padding: 8px 15px; } .cp-blk { margin-bottom: 22px; } .cp-groups { display: flex; flex-direction: column; gap: 12px; } .cp-group { border-radius: 16px; padding: 16px; background: #fafafa; border: 1px solid #efeff2; } .dark .cp-group { background: #1c1c22; border-color: #32323b; } .cp-ghead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .cp-gdot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .cp-gname { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; background: none; border: 0; outline: none; color: inherit; } .cp-default { border-radius: 7px; padding: 3px 10px; font-size: 10px; font-weight: 900; color: #fff; background: #7c3aed; flex: none; } .cp-makedefault { border-radius: 8px; padding: 5px 12px; font-size: 11px; font-weight: 800; color: #6d28d9; background: rgba(124,58,237,.1); flex: none; } .cp-perms { display: flex; flex-wrap: wrap; gap: 6px; } .cp-perm { display: inline-flex; align-items: center; gap: 5px; border-radius: 9px; padding: 6px 11px; font-size: 11.5px; font-weight: 700; color: #a1a1aa; background: #f1f1f4; transition: all .18s; } .dark .cp-perm { background: #26262e; } .cp-perm.on { color: #15803d; background: #dcfce7; } .dark .cp-perm.on { background: rgba(22,163,74,.2); color: #86efac; } /* ===== Public static page ===== */ .sp-page { border-radius: 20px; padding: 34px 38px; margin: 18px 0 30px; background: #fff; border: 1px solid #e9e9ee; } .dark .sp-page { background: #16161a; border-color: #2b2b33; } .sp-page h1 { font-size: 28px; font-weight: 900; letter-spacing: -.6px; margin-bottom: 20px; } .sp-page p { font-size: 15px; line-height: 1.8; color: #52525b; margin-bottom: 16px; } .dark .sp-page p { color: #d4d4d8; } .sp-updated { font-size: 12.5px; color: #a1a1aa; margin-top: 26px; padding-top: 18px; border-top: 1px solid #f1f1f4; } .dark .sp-updated { border-color: #26262b; } /* ===== Admin tools ===== */ .tl-audiences { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; } .dark .tl-audience { background: #1c1c22; } .tl-audience:hover { transform: translateY(-2px); } .tl-audience.on { border-color: #7c3aed; background: rgba(124,58,237,.06); } .tl-audience svg { color: #7c3aed; margin-bottom: 3px; } .tl-audience b { font-size: 13.5px; font-weight: 800; } .tl-audience em { font-style: normal; font-size: 11px; color: #a1a1aa; } .tl-audience i { position: absolute; right: 12px; top: 12px; font-style: normal; font-size: 15px; font-weight: 900; color: #7c3aed; } .tl-exports { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; } .tl-export { display: flex; align-items: center; gap: 9px; border-radius: 14px; padding: 13px 16px; background: #fafafa; border: 1px solid #efeff2; } .dark .tl-export { background: #1c1c22; border-color: #32323b; } .tl-export b { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; } .tl-dl { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; padding: 8px 15px; font-size: 12px; font-weight: 800; color: #15803d; background: #dcfce7; transition: all .18s; } .dark .tl-dl { background: rgba(22,163,74,.2); color: #86efac; } .tl-dl:hover { transform: translateY(-1px); } .tl-dl.json { color: #1d4ed8; background: #dbeafe; } .dark .tl-dl.json { background: rgba(37,99,235,.2); color: #93c5fd; } /* ===== Admin tools ===== */ .tl-audience { position: relative; display: grid; flex-direction: column; gap: 9px; border-radius: 14px; padding: 14px; text-align: left; background: #fafafa; border: 2px solid transparent; transition: all .2s; grid-template-columns: 1fr 1fr; margin-top: 7px; } @media (max-width: 700px) { .tl-audience { grid-template-columns: 1fr; } } .tl-aud { display: flex; align-items: center; gap: 11px; border-radius: 14px; padding: 13px 15px; text-align: left; background: #fafafa; border: 2px solid transparent; transition: all .18s; } .dark .tl-aud { background: #1c1c22; } .tl-aud:hover { transform: translateY(-2px); } .tl-aud.on { border-color: #7c3aed; background: rgba(124,58,237,.06); } .tl-aud svg { color: #7c3aed; flex: none; } .tl-aud b { display: block; font-size: 13.5px; font-weight: 800; } .tl-aud em { display: block; font-style: normal; font-size: 11.5px; color: #a1a1aa; } .tl-tables { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; } .tl-table { display: flex; align-items: center; gap: 13px; border-radius: 14px; padding: 14px 16px; background: #fafafa; border: 1px solid #efeff2; transition: all .2s; } .dark .tl-table { background: #1c1c22; border-color: #32323b; } .tl-table:hover { transform: translateX(3px); border-color: #c4b5fd; } .tl-tableicon { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg,#0ea5e9,#4f46e5); } .tl-table b { display: block; font-size: 14px; font-weight: 800; } .tl-table em { display: block; font-style: normal; font-size: 12px; color: #a1a1aa; } /* ===== Search ===== */ .se-bar { display: flex; align-items: center; gap: 11px; border-radius: 15px; padding: 14px 18px; margin: 18px 0 14px; background: #fff; border: 1px solid #e9e9ee; } .dark .se-bar { background: #16161a; border-color: #2b2b33; } .se-bar:focus-within { border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167,139,250,.13); } .se-bar input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 15.5px; color: inherit; } .se-tabs { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; } .se-tabs::-webkit-scrollbar { display: none; } .se-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; border-radius: 12px; padding: 9px 15px; font-size: 13px; font-weight: 700; color: #52525b; background: #eceff4; transition: all .18s; } .dark .se-tab { background: #1e1e24; color: #a1a1aa; } .se-tab.on { background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; } .se-count { min-width: 18px; height: 18px; border-radius: 6px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 900; background: rgba(0,0,0,.08); } .se-tab.on .se-count { background: rgba(255,255,255,.24); } .se-section { margin-bottom: 26px; } .se-section h3 { font-size: 11.5px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #a1a1aa; margin-bottom: 11px; } .se-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 700px) { .se-people { grid-template-columns: 1fr; } } .se-person { display: flex; align-items: center; gap: 12px; border-radius: 15px; padding: 13px 15px; background: #fff; border: 1px solid #e9e9ee; transition: all .2s; } .dark .se-person { background: #16161a; border-color: #2b2b33; } .se-person:hover { transform: translateY(-2px); border-color: #c4b5fd; } .se-person b { display: block; font-size: 14px; font-weight: 800; } .se-person em { display: block; font-style: normal; font-size: 12px; color: #a1a1aa; } .se-person i { display: block; font-style: normal; font-size: 11.5px; color: #71717a; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .se-rows { display: flex; flex-direction: column; gap: 9px; } .se-row { display: flex; align-items: center; gap: 13px; border-radius: 15px; padding: 11px 14px; background: #fff; border: 1px solid #e9e9ee; transition: all .2s; } .dark .se-row { background: #16161a; border-color: #2b2b33; } .se-row:hover { transform: translateX(3px); border-color: #c4b5fd; } .se-thumb { width: 52px; height: 52px; border-radius: 13px; flex: none; overflow: hidden; } .se-thumb img { width: 100%; height: 100%; object-fit: cover; } .se-row b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .se-row em { display: block; font-style: normal; font-size: 12px; color: #a1a1aa; } .se-price { flex: none; font-size: 15px; font-weight: 900; color: #e11d48; } .se-thumb-listing { background: linear-gradient(135deg,#7c3aed,#4f46e5); } /* Turn off the away message */ .ps-cancelaway { border-radius: 12px; padding: 11px 20px; font-size: 13.5px; font-weight: 800; color: #52525b; background: #f4f4f7; margin-top: 6px; } .dark .ps-cancelaway { background: #1e1e24; color: #d4d4d8; } /* Play marker on community video thumbnails */ .cm-playmark { position: absolute; right: 7px; bottom: 7px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); } /* ===== Account recovery ===== */ .rc-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .rc-card { width: min(420px, 100%); border-radius: 22px; padding: 34px 32px; text-align: center; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 20px 50px rgba(0,0,0,.08); } .dark .rc-card { background: #16161a; border-color: #2b2b33; } .rc-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; margin-bottom: 16px; background: linear-gradient(135deg,#7c3aed,#4f46e5); } .rc-icon.done { background: linear-gradient(135deg,#16a34a,#059669); } .rc-card h1 { font-size: 22px; font-weight: 900; margin-bottom: 8px; } .rc-card p { font-size: 13.5px; line-height: 1.6; color: #71717a; margin-bottom: 20px; } .dark .rc-card p { color: #a1a1aa; } .rc-input { width: 100%; border-radius: 12px; padding: 12px 15px; margin-bottom: 10px; font-size: 14.5px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; color: inherit; } .dark .rc-input { background: #1c1c22; border-color: #32323b; } .rc-input:focus { border-color: #a78bfa; } .rc-mono { font-family: ui-monospace, monospace; letter-spacing: 1px; } .rc-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: 12px; padding: 13px; margin-top: 6px; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow: 0 6px 18px rgba(124,58,237,.28); transition: all .2s; } .rc-submit:hover { transform: translateY(-2px); } .rc-submit:disabled { opacity: .45; transform: none; box-shadow: none; } .rc-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 700; color: #a1a1aa; } .rc-error { font-size: 13px; font-weight: 700; color: #dc2626; margin-bottom: 14px; } .rc-code { display: block; border-radius: 12px; padding: 16px; margin-bottom: 20px; font-family: ui-monospace, monospace; font-size: 19px; font-weight: 800; letter-spacing: 2px; color: #6d28d9; background: rgba(124,58,237,.08); border: 1px dashed rgba(124,58,237,.3); } .dark .rc-code { color: #c4b5fd; background: rgba(124,58,237,.16); } .lg-forgot { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; color: #a1a1aa; text-align: center; } .lg-forgot:hover { color: #7c3aed; } /* An app-store button with no link yet */ .ps-store.soon { opacity: .5; cursor: default; pointer-events: none; } /* --- Page furniture, shared by every admin page --- */ .ab-page { padding: 0; } .ab-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .ab-head h1 { display: flex; align-items: center; gap: 11px; font-size: 24px; font-weight: 900; letter-spacing: -.5px; } .ab-intro { max-width: 620px; } /* Cards used across admin pages */ .ps-panel { border-radius: 16px; padding: 24px; background: #fff; border: 1px solid #e6e8ef; box-shadow: 0 1px 3px rgba(16,24,40,.04); } .dark .ps-panel { background: #131318; border-color: #24242c; box-shadow: none; } .ps-menu { gap: 2px; } .ps-menuitem { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; } /* --- Admin: single-section pages (sidebar replaces the in-page menu) --- */ .ps-solo { display: block; } .ps-solo .ps-panel { max-width: 980px; } /* --- Analytics --- */ .an-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 1240px) { .an-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .an-cards { grid-template-columns: repeat(2, 1fr); } } .an-card { border-radius: 14px; padding: 16px; background: #fff; border: 1px solid #e6e8ef; box-shadow: 0 1px 3px rgba(16,24,40,.04); } .dark .an-card { background: #131318; border-color: #24242c; box-shadow: none; } .an-cardicon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; margin-bottom: 9px; color: #7c3aed; background: rgba(124,58,237,.1); } .an-card b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.6px; } .an-card em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: #a1a1aa; margin-top: 1px; } .an-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 900px) { .an-split { grid-template-columns: 1fr; } } .an-split .ps-panel { max-width: none; } .an-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 900; margin-bottom: 4px; } .an-title svg { color: #7c3aed; } .an-chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; margin-top: 16px; } .an-bar { flex: 1; display: flex; align-items: flex-end; height: 100%; border-radius: 4px; background: #f2f4f9; overflow: hidden; } .dark .an-bar { background: #1b1b22; } .an-bar i { display: block; width: 100%; border-radius: 4px; background: linear-gradient(180deg,#7c3aed,#4f46e5); transition: height .4s ease; } .an-bar:hover i { filter: brightness(1.15); } .an-legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; font-weight: 700; color: #a1a1aa; } .an-money { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .an-moneyrow { display: flex; align-items: center; gap: 11px; border-radius: 11px; padding: 11px 13px; font-size: 13px; font-weight: 600; background: #f8f9fc; } .dark .an-moneyrow { background: #1b1b22; } .an-moneyrow b { font-size: 14.5px; font-weight: 900; } .an-moneyicon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; color: #16a34a; background: rgba(22,163,74,.1); flex: none; } .an-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .an-row { display: flex; align-items: center; gap: 11px; border-radius: 11px; padding: 10px 12px; transition: background .15s; } .an-row:hover { background: #f4f6fa; } .dark .an-row:hover { background: #1b1b22; } .an-rank { display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 7px; font-size: 11px; font-weight: 900; color: #7c3aed; background: rgba(124,58,237,.1); } .an-row b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .an-row em { display: block; font-style: normal; font-size: 11.5px; color: #a1a1aa; } .an-metric { flex: none; font-size: 13px; font-weight: 900; color: #7c3aed; } /* --- Admin events list --- */ .ae-facts { display: flex; align-items: center; gap: 13px; flex: none; font-size: 12px; font-weight: 700; color: #71717a; } .ae-facts > span { display: inline-flex; align-items: center; gap: 4px; } .cp-row.off { opacity: .55; } /* --- Admin: single user editor --- */ .au-back { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 11px; color: #52525b; background: #eceff4; } .dark .au-back { background: #1b1b22; color: #a6a9b8; } .au-handle { font-size: 14px; font-weight: 600; color: #a1a1aa; } .au-tag { border-radius: 7px; padding: 4px 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; } .au-tag.admin { color: #fff; background: #7c3aed; } .au-tag.premium { color: #fff; background: linear-gradient(135deg,#f59e0b,#e11d48); } .au-tag.banned { color: #fff; background: #dc2626; } .au-manage { border-radius: 9px; padding: 7px 13px; font-size: 12px; font-weight: 800; color: #6d28d9; background: rgba(124,58,237,.1); flex: none; } .au-manage:hover { background: rgba(124,58,237,.2); } .au-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; } @media (max-width: 1100px) { .au-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .au-stats { grid-template-columns: repeat(2, 1fr); } } .au-stat { display: flex; flex-direction: column; gap: 2px; border-radius: 12px; padding: 13px 15px; background: #fff; border: 1px solid #e6e8ef; } .dark .au-stat { background: #131318; border-color: #24242c; } .au-stat svg { color: #9aa0b0; margin-bottom: 3px; } .au-stat b { font-size: 19px; font-weight: 900; letter-spacing: -.4px; } .au-stat em { font-style: normal; font-size: 11px; font-weight: 700; color: #a1a1aa; text-transform: capitalize; } .au-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; } @media (max-width: 1000px) { .au-grid { grid-template-columns: 1fr; } } .au-grid .ps-panel { max-width: none; } .au-side { display: flex; flex-direction: column; gap: 16px; } .au-side .cm-toggle-row b { display: flex; align-items: center; gap: 7px; } .au-danger { border-color: rgba(220,38,38,.25) !important; } .dark .au-danger { border-color: rgba(220,38,38,.35) !important; } .au-tx { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f1f4; } .dark .au-tx { border-color: #26262b; } .au-txrow { display: flex; align-items: center; gap: 10px; font-size: 12px; } .au-txrow b.up { color: #16a34a; } .au-txrow b.down { color: #dc2626; } /* ===== Admin tables (shared by the list pages) ===== */ .at-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .at-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; max-width: 320px; padding: 9px 13px; border-radius: 11px; background: #fff; border: 1px solid #e6e8ef; } .dark .at-search { background: #131318; border-color: #24242c; } .at-search svg { color: #a1a1aa; flex: none; } .at-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13.5px; color: inherit; } .at-select { padding: 9px 13px; border-radius: 11px; font-size: 13px; background: #fff; border: 1px solid #e6e8ef; outline: none; color: inherit; } .dark .at-select { background: #131318; border-color: #24242c; } .at-count { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #a1a1aa; } .at-wrap { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #e6e8ef; overflow-x: auto; } .dark .at-wrap { background: #131318; border-color: #24242c; } .at-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .at-table th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #9aa0b0; background: #f8f9fc; border-bottom: 1px solid #e6e8ef; white-space: nowrap; } .dark .at-table th { background: #17171d; border-color: #24242c; color: #6b6f7e; } .at-table td { padding: 13px 16px; border-bottom: 1px solid #f1f2f6; vertical-align: middle; } .dark .at-table td { border-color: #1f1f26; } .at-table tr:last-child td { border-bottom: 0; } .at-table tbody tr:hover { background: #fafbfd; } .dark .at-table tbody tr:hover { background: #17171d; } .at-actionhead, .at-actions { text-align: right; white-space: nowrap; } .at-actions { display: table-cell; } .at-actions button, .at-actions a { display: inline-flex; align-items: center; gap: 5px; } .at-user { font-weight: 800; } .at-user:hover { color: #7c3aed; } .at-link { font-size: 12.5px; font-weight: 700; color: #7c3aed; } .at-link:hover { text-decoration: underline; } .at-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #52525b; } .dark .at-text { color: #a6a9b8; } .at-dim { font-size: 12.5px; color: #a1a1aa; } .at-people { display: flex; flex-direction: column; gap: 2px; } .at-amount.up { color: #16a34a; } .at-amount.down { color: #dc2626; } .at-stars { color: #f59e0b; letter-spacing: 1px; } .at-stars i { color: #d4d4d8; font-style: normal; } .at-pill { display: inline-block; border-radius: 7px; padding: 3px 9px; font-size: 10.5px; font-weight: 900; text-transform: capitalize; white-space: nowrap; } .at-pill.green { color: #15803d; background: #dcfce7; } .at-pill.grey { color: #52525b; background: #f1f2f6; } .at-pill.blue { color: #1d4ed8; background: #dbeafe; } .at-pill.purple { color: #6d28d9; background: rgba(124,58,237,.12); } .at-pill.amber { color: #b45309; background: #fef3c7; } .dark .at-pill.grey { background: #24242c; color: #a6a9b8; } .at-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; border-radius: 14px; background: #fff; border: 1px solid #e6e8ef; color: #a1a1aa; } .dark .at-empty { background: #131318; border-color: #24242c; } .at-empty p { font-size: 13.5px; } /* Crowdfunding cards */ .ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .ac-card { border-radius: 16px; padding: 18px; background: #fff; border: 1px solid #e6e8ef; } .dark .ac-card { background: #131318; border-color: #24242c; } .ac-card.paused { opacity: .6; } .ac-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .ac-top b { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; } .ac-progress { height: 7px; border-radius: 999px; background: #f1f2f6; overflow: hidden; margin: 14px 0 8px; } .dark .ac-progress { background: #24242c; } .ac-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#16a34a,#059669); } .ac-figures { font-size: 12.5px; color: #71717a; } .ac-actions { display: flex; gap: 7px; margin-top: 14px; } .ac-actions .ab-edit { flex: 1; } /* Conversation viewer */ .ax-thread { max-height: 60vh; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .ax-msg { border-radius: 12px; padding: 11px 14px; background: #f8f9fc; } .dark .ax-msg { background: #1b1b22; } .ax-from { font-size: 11.5px; font-weight: 900; color: #7c3aed; } .ax-msg p { font-size: 13.5px; line-height: 1.5; margin: 4px 0; } .ax-msg em { color: #a1a1aa; } .ax-att { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; border-radius: 6px; padding: 2px 7px; font-size: 10.5px; font-weight: 800; color: #6d28d9; background: rgba(124,58,237,.1); } .ax-when { font-size: 10.5px; color: #a1a1aa; } /* --- Admin: shared collection listing --- */ .ac-total { border-radius: 8px; padding: 4px 11px; font-size: 12px; font-weight: 900; color: #6d28d9; background: rgba(124,58,237,.1); } .dark .ac-total { color: #c4b5fd; background: rgba(124,58,237,.2); } .ac-search { display: flex; align-items: center; gap: 8px; margin-left: auto; width: min(280px, 40vw); padding: 9px 13px; border-radius: 11px; background: #fff; border: 1px solid #e6e8ef; } .dark .ac-search { background: #131318; border-color: #24242c; } .ac-search:focus-within { border-color: #a78bfa; } .ac-search svg { color: #a1a1aa; flex: none; } .ac-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13px; color: inherit; } .ac-list { display: flex; flex-direction: column; gap: 8px; } .ac-row { display: flex; align-items: center; gap: 13px; border-radius: 13px; padding: 12px 15px; background: #fff; border: 1px solid #e6e8ef; transition: border-color .16s; } .dark .ac-row { background: #131318; border-color: #24242c; } .ac-row:hover { border-color: #c4b5fd; } .ac-thumb { display: block; flex: none; width: 46px; height: 46px; border-radius: 11px; overflow: hidden; background: #eceff4; } .dark .ac-thumb { background: #1b1b22; } .ac-thumb img, .ac-thumb video { width: 100%; height: 100%; object-fit: cover; } .ac-row b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-row > span > em { display: block; font-style: normal; font-size: 12px; color: #a1a1aa; margin-top: 2px; } .ac-author { font-weight: 700; color: #7c3aed; } .ac-stat { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 52px; } .ac-stat b { font-size: 14px; font-weight: 900; } .ac-stat em { font-style: normal; font-size: 10px; font-weight: 700; color: #a1a1aa; text-transform: capitalize; } .ac-amount { flex: none; font-size: 14px; font-weight: 900; } .ac-amount.up { color: #16a34a; } .ac-amount.down { color: #dc2626; } .ac-when { flex: none; font-size: 11.5px; font-weight: 600; color: #a1a1aa; white-space: nowrap; } .ac-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; font-size: 12.5px; font-weight: 700; color: #71717a; } .ac-pager button { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #52525b; background: #fff; border: 1px solid #e6e8ef; transition: all .16s; } .dark .ac-pager button { background: #131318; border-color: #24242c; color: #a6a9b8; } .ac-pager button:hover:not(:disabled) { border-color: #7c3aed; color: #7c3aed; } .ac-pager button:disabled { opacity: .4; } .am-wstatus.active { color: #15803d; background: #dcfce7; } .am-wstatus.cancelled, .am-wstatus.hidden { color: #71717a; background: #f4f4f7; } /* --- Admin: email settings --- */ .em-state { border-radius: 8px; padding: 5px 12px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; } .em-state.on { color: #15803d; background: #dcfce7; } .em-state.off { color: #b45309; background: #fef3c7; } .em-problem { display: flex; align-items: center; gap: 7px; margin-top: 12px; border-radius: 10px; padding: 10px 13px; font-size: 12.5px; font-weight: 700; color: #b91c1c; background: #fef2f2; } .dark .em-problem { color: #fca5a5; background: rgba(220,38,38,.14); } .em-providers { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; } .em-provider { border-radius: 11px; padding: 11px 13px; text-align: left; background: #f8f9fc; border: 1px solid #eef0f6; transition: all .16s; } .dark .em-provider { background: #1b1b22; border-color: #2a2a34; } .em-provider:hover { border-color: #a78bfa; transform: translateX(2px); } .em-provider b { display: block; font-size: 13px; font-weight: 800; } .em-provider em { display: block; font-style: normal; font-size: 11.5px; color: #a1a1aa; } .em-provider i { display: block; font-style: normal; font-size: 11px; color: #7c3aed; font-weight: 700; margin-top: 2px; } /* --- Admin: storage --- */ .st-drivers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } @media (max-width: 640px) { .st-drivers { grid-template-columns: 1fr; } } .st-driver { border-radius: 13px; padding: 15px; text-align: left; background: #f8f9fc; border: 2px solid transparent; transition: all .18s; } .dark .st-driver { background: #1b1b22; } .st-driver:hover { transform: translateY(-2px); } .st-driver.on { border-color: #7c3aed; background: rgba(124,58,237,.06); } .st-driver svg { color: #7c3aed; margin-bottom: 8px; } .st-driver b { display: block; font-size: 14px; font-weight: 800; } .st-driver em { display: block; font-style: normal; font-size: 11.5px; color: #a1a1aa; margin-top: 2px; } .st-notes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .st-notes li { font-size: 12.5px; line-height: 1.6; color: #71717a; padding-left: 15px; position: relative; } .dark .st-notes li { color: #a1a1aa; } .st-notes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #7c3aed; } .st-notes code { font-size: 11.5px; padding: 1px 5px; border-radius: 4px; background: rgba(124,58,237,.1); color: #6d28d9; } /* --- Admin: social login --- */ .so-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .so-head .an-title { margin-bottom: 0; flex: 1; } .so-redirect { font-family: ui-monospace, monospace; font-size: 11.5px !important; } .so-console { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #7c3aed; margin-top: 4px; } .so-console:hover { text-decoration: underline; } /* Sign-in buttons on the login page */ .sl-buttons { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; } .sl-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; font-size: 11.5px; font-weight: 700; color: #a1a1aa; } .sl-divider::before, .sl-divider::after { content: ""; flex: 1; height: 1px; background: #e6e8ef; } .dark .sl-divider::before, .dark .sl-divider::after { background: #2a2a34; } .sl-btn { display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 700; background: #fff; border: 1px solid #e0e3ec; transition: all .18s; } .dark .sl-btn { background: #1b1b22; border-color: #2a2a34; color: #e4e4e7; } .sl-btn:hover { transform: translateY(-1px); border-color: #a78bfa; } /* --- Captcha --- */ .cap-box { display: flex; justify-content: center; margin-top: 16px; } .cap-providers { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .cap-provider { border-radius: 12px; padding: 13px 15px; text-align: left; background: #f8f9fc; border: 2px solid transparent; transition: all .18s; } .dark .cap-provider { background: #1b1b22; } .cap-provider:hover { transform: translateX(2px); } .cap-provider.on { border-color: #7c3aed; background: rgba(124,58,237,.06); } .cap-provider b { display: block; font-size: 13.5px; font-weight: 800; } .cap-provider em { display: block; font-style: normal; font-size: 12px; color: #a1a1aa; margin-top: 2px; } /* --- Themes --- */ .th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .th-card { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e6e8ef; transition: all .22s; } .dark .th-card { background: #131318; border-color: #24242c; } .th-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.1); } .th-card.off { opacity: .5; } .th-preview { display: flex; align-items: center; justify-content: center; height: 120px; border-bottom: 3px solid; } .th-pcard { display: flex; flex-direction: column; gap: 6px; width: 62%; border-radius: 10px; padding: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .th-pcard i { display: block; width: 26px; height: 26px; border-radius: 8px; } .th-pcard em { display: block; height: 6px; border-radius: 3px; width: 100%; } .th-body { padding: 14px 16px 16px; } .th-title { display: flex; align-items: center; gap: 8px; } .th-title b { font-size: 15px; font-weight: 800; flex: 1; min-width: 0; } .th-price { border-radius: 7px; padding: 3px 9px; font-size: 11px; font-weight: 900; color: #fff; background: linear-gradient(135deg,#f59e0b,#e11d48); } .th-desc { font-size: 12.5px; color: #a1a1aa; line-height: 1.5; margin-top: 5px; } .th-stats { display: flex; gap: 14px; margin: 11px 0; font-size: 11.5px; font-weight: 700; color: #71717a; } .th-stats span { display: inline-flex; align-items: center; gap: 5px; } .th-tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 16px; } .th-token { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; } .th-token input { width: 38px; height: 30px; border-radius: 8px; border: 1px solid #e6e8ef; background: none; cursor: pointer; flex: none; } /* Theme picker in profile settings */ .tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 13px; margin-top: 8px; } .tp-card { border-radius: 14px; overflow: hidden; text-align: left; background: #fff; border: 2px solid #eceff4; transition: all .2s; } .dark .tp-card { background: #16161a; border-color: #2b2b33; } .tp-card:hover { transform: translateY(-3px); } .tp-card.on { border-color: #7c3aed; } .tp-card .th-preview { height: 92px; border-bottom-width: 2px; } .tp-name { display: flex; align-items: center; gap: 7px; padding: 11px 13px 0; } .tp-name b { font-size: 13.5px; font-weight: 800; flex: 1; min-width: 0; } .tp-using { font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: #7c3aed; border-radius: 6px; padding: 3px 8px; } .tp-owned { font-style: normal; font-size: 10px; font-weight: 900; color: #15803d; background: #dcfce7; border-radius: 6px; padding: 3px 8px; } .tp-price { font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: linear-gradient(135deg,#f59e0b,#e11d48); border-radius: 6px; padding: 3px 8px; } .tp-desc { display: block; font-style: normal; font-size: 11.5px; color: #a1a1aa; padding: 4px 13px 13px; line-height: 1.45; } /* --- Admin: payment gateways --- */ .gw-warn { font-size: 12px; line-height: 1.55; color: #71717a; margin: 12px 0; padding: 11px 13px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; } .dark .gw-warn { color: #fcd34d; background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.3); } .gw-warn code { font-size: 11px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.07); } .gw-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; } .gw-actions .ab-edit { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 16px; } /* --- Wallet top-up --- */ .tu-card { border-radius: 18px; padding: 20px; margin-top: 14px; background: #fff; border: 1px solid #e9e9ee; } .dark .tu-card { background: #16161a; border-color: #2b2b33; } .tu-card h3 { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 900; } .tu-card h3 svg { color: #7c3aed; } .tu-hint { font-size: 12.5px; color: #a1a1aa; margin: 5px 0 14px; } .tu-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .tu-preset { border-radius: 11px; padding: 11px; font-size: 14px; font-weight: 800; color: #52525b; background: #f4f4f7; transition: all .18s; } .dark .tu-preset { background: #1e1e24; color: #d4d4d8; } .tu-preset.on { background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; } .tu-buttons { display: flex; gap: 9px; margin-top: 10px; } .tu-pay, .tu-paypal { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px; font-size: 13.5px; font-weight: 800; transition: all .2s; } .tu-pay { color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow: 0 5px 16px rgba(124,58,237,.28); } .tu-paypal { color: #003087; background: #ffc439; } .tu-pay:hover, .tu-paypal:hover { transform: translateY(-2px); } .tu-pay:disabled, .tu-paypal:disabled { opacity: .45; transform: none; box-shadow: none; } /* --- Admin: lists and categories --- */ .tx-group { margin-bottom: 14px; } .tx-group .adm-heading { padding: 0 10px 6px; } .tx-count { margin-left: auto; font-size: 10.5px; font-weight: 900; color: #a1a1aa; background: rgba(0,0,0,.06); border-radius: 6px; padding: 2px 7px; } .ps-menuitem.on .tx-count { background: rgba(255,255,255,.24); color: #fff; } .tx-add { display: flex; gap: 8px; margin: 14px 0 18px; } .tx-add input { flex: 1; min-width: 0; border-radius: 11px; padding: 10px 13px; font-size: 13.5px; background: #f8fafc; border: 1px solid #eef2f7; outline: none; color: inherit; } .dark .tx-add input { background: #1c1c22; border-color: #32323b; } .tx-add .tx-icon { flex: none; width: 56px; text-align: center; font-size: 17px; } .tx-add button { flex: none; width: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg,#7c3aed,#4f46e5); } .tx-list { display: flex; flex-direction: column; gap: 6px; } .tx-row { display: flex; align-items: center; gap: 10px; border-radius: 11px; padding: 8px 12px; background: #fafafa; border: 1px solid #efeff2; } .dark .tx-row { background: #1c1c22; border-color: #32323b; } .tx-row.off { opacity: .45; } .tx-move { display: flex; flex-direction: column; gap: 1px; flex: none; } .tx-move button { display: flex; align-items: center; justify-content: center; width: 20px; height: 15px; border-radius: 4px; color: #a1a1aa; } .tx-move button:hover:not(:disabled) { background: rgba(124,58,237,.12); color: #7c3aed; } .tx-move button:disabled { opacity: .3; } .tx-emoji { font-size: 17px; flex: none; } .tx-label { flex: 1; min-width: 0; text-align: left; font-size: 13.5px; font-weight: 600; padding: 3px 0; } .tx-label:hover { color: #7c3aed; } .tx-edit { flex: 1; min-width: 0; border-radius: 8px; padding: 5px 9px; font-size: 13.5px; background: #fff; border: 1px solid #a78bfa; outline: none; color: inherit; } .dark .tx-edit { background: #16161a; } .tx-vis { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #a1a1aa; background: rgba(0,0,0,.05); } .tx-vis.on { color: #16a34a; background: #dcfce7; } .dark .tx-vis.on { background: rgba(22,163,74,.2); color: #86efac; } /* ============================================================ Admin panel — built to the supplied design ============================================================ */ .adm { --bg: #f4f6fb; --surface: #ffffff; --surface-2: #f8f9fc; --border: #e6e8ef; --text: #1a1d29; --text-muted: #6b7280; --text-soft: #9ca3af; --sidebar: #0f1220; --sidebar-2: #161a2e; --sidebar-text: #a7adbf; --sidebar-active: #ffffff; --primary: #e63946; --primary-hover: #d12b39; --primary-soft: #fde8ea; --success: #10b981; --success-soft: #d1fae5; --warning: #f59e0b; --warning-soft: #fef3c7; --info: #3b82f6; --info-soft: #dbeafe; --purple: #8b5cf6; --purple-soft: #ede9fe; --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(16,24,40,.04); --shadow: 0 4px 16px rgba(16,24,40,.06); --shadow-lg: 0 12px 32px rgba(16,24,40,.08); --transition: .2s cubic-bezier(.4,0,.2,1); display: flex; flex: 1; width: 100%; min-width: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; } .dark .adm { --bg: #0b0d16; --surface: #141827; --surface-2: #1a1f31; --border: #242a3d; --text: #e8eaf2; --text-muted: #9aa2b8; --text-soft: #6b7490; --primary-soft: rgba(230,57,70,.16); --success-soft: rgba(16,185,129,.16); --warning-soft: rgba(245,158,11,.16); --info-soft: rgba(59,130,246,.16); --purple-soft: rgba(139,92,246,.16); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.45); } /* ── Sidebar ───────────────────────────────────────── */ .adm-side { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 100; display: flex; flex-direction: column; overflow-y: auto; background: var(--sidebar); color: var(--sidebar-text); } .adm-side::-webkit-scrollbar { width: 5px; } .adm-side::-webkit-scrollbar-thumb { background: #2a3050; border-radius: 3px; } .adm-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px 18px; } .adm-brandmark { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; background: var(--primary); box-shadow: 0 4px 12px rgba(230,57,70,.3); } .adm-brand b { display: block; font-size: 15.5px; font-weight: 800; color: var(--sidebar-active); letter-spacing: -.2px; } .adm-brand em { display: block; font-style: normal; font-size: 11px; color: #5a6080; font-weight: 500; } .adm-closenav { display: none; margin-left: auto; color: var(--sidebar-text); } .adm-nav { flex: 1; padding: 4px 10px 16px; } .adm-group { margin-bottom: 14px; } .adm-heading { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; color: #5a6080; text-transform: uppercase; padding: 0 8px 8px; } .adm-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 2px 0; border-radius: var(--radius-sm); color: var(--sidebar-text); font-size: 13.5px; font-weight: 500; transition: var(--transition); } .adm-item svg { width: 17px; height: 17px; flex: none; opacity: .85; } .adm-item:hover { background: var(--sidebar-2); color: var(--sidebar-active); } .adm-item.on { color: var(--sidebar-active); background: linear-gradient(90deg, rgba(230,57,70,.18), rgba(230,57,70,0)); } .adm-item.on svg { color: var(--primary); opacity: 1; } .adm-badge { margin-left: auto; min-width: 20px; text-align: center; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; color: #fff; background: var(--primary); } .adm-me { display: flex; align-items: center; gap: 11px; margin: auto 10px 14px; padding: 11px; border-radius: var(--radius-sm); background: var(--sidebar-2); transition: var(--transition); } .adm-meavatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(135deg,#667eea,#764ba2); } .adm-me b { display: block; font-size: 13px; font-weight: 600; color: var(--sidebar-active); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-me em { display: block; font-style: normal; font-size: 11px; color: #5a6080; } /* ── Main column ───────────────────────────────────── */ .adm-main { flex: 1; min-width: 0; margin-left: 260px; display: flex; flex-direction: column; } .adm-top { position: sticky; top: 0; z-index: 50; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--border); } .adm-burger { display: none; color: var(--text); } .adm-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); } .adm-crumbs span { font-weight: 600; color: var(--text); } .adm-topicon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); transition: var(--transition); } .adm-topicon:hover { color: var(--primary); border-color: var(--primary); } .adm-visit { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: #fff; background: var(--success); box-shadow: 0 4px 12px rgba(16,185,129,.25); transition: var(--transition); } .adm-visit:hover { background: #059669; } .adm-content { flex: 1; padding: 28px; } .adm-scrim { position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,.5); } @media (max-width: 1000px) { .adm-side { transform: translateX(-100%); transition: transform .3s; } .adm-side.open { transform: none; } .adm-main { margin-left: 0; } .adm-burger, .adm-closenav { display: flex; } .adm-content { padding: 20px 16px; } } /* ── Page furniture ────────────────────────────────── */ .ab-page { display: block; } .ab-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .ab-head h1 { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 800; letter-spacing: -.5px; } .ab-head h1 svg { color: var(--primary); } .ab-sub { width: 100%; font-size: 13.5px; color: var(--text-muted); margin: -14px 0 20px; } .ab-intro { font-size: 13.5px; color: var(--text-muted); max-width: 680px; margin-bottom: 22px; } /* Cards */ .card, .ps-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .ps-panel { padding: 22px; } .ps-panel h3, .an-title { font-size: 15px; font-weight: 700; color: var(--text); } .ps-hint { font-size: 13px; color: var(--text-muted); } /* Buttons */ .btn, .ps-save, .ab-new, .cl-post { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; transition: var(--transition); white-space: nowrap; } .ps-save, .ab-new, .cl-post, .btn-primary { color: #fff; background: var(--primary); box-shadow: 0 4px 12px rgba(230,57,70,.25); } .ps-save:hover, .ab-new:hover, .btn-primary:hover { background: var(--primary-hover); } .ps-save:disabled { opacity: .55; box-shadow: none; } .btn-ghost, .ab-edit { background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 8px 15px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; transition: var(--transition); } .btn-ghost:hover, .ab-edit:hover { border-color: var(--primary); color: var(--primary); } /* Tabs — underline, as in the design */ .set-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; } .set-tabs::-webkit-scrollbar { display: none; } .set-tab { flex: none; padding: 12px 18px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; transition: var(--transition); } .set-tab:hover { color: var(--text); } .set-tab.on { color: var(--primary); border-bottom-color: var(--primary); } /* Fields */ .ps-field { display: block; margin-bottom: 16px; } .ps-field > span, .cl-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; } .ps-field input, .ps-field select, .ps-field textarea, .cl-field { width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13.5px; outline: none; transition: var(--transition); } .ps-field input:focus, .ps-field select:focus, .ps-field textarea:focus { border-color: var(--primary); background: var(--surface); } .sf-hint { display: block; font-style: normal; font-size: 11.5px; color: var(--text-soft); margin-top: 6px; } .ps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .ps-row { grid-template-columns: 1fr; } } /* Toggle rows */ .cm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 16px; margin-bottom: 8px; text-align: left; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); transition: var(--transition); } .cm-toggle-row:hover { border-color: var(--primary); } .cm-toggle-row:last-of-type { margin-bottom: 0; } .cm-toggle-row b { display: block; font-size: 13.5px; font-weight: 600; } .cm-toggle-row em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 2px; } .mg-toggle { position: relative; width: 44px; height: 24px; flex: none; border-radius: 20px; background: var(--border); transition: var(--transition); } .mg-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,.2); } .mg-toggle.on { background: var(--primary); } .mg-toggle.on i { transform: translateX(20px); } /* Status pills */ .am-wstatus, .status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 600; } .am-wstatus.active, .am-wstatus.paid, .am-wstatus.approved { color: var(--success); background: var(--success-soft); } .am-wstatus.pending { color: var(--warning); background: var(--warning-soft); } .am-wstatus.banned, .am-wstatus.declined, .am-wstatus.rejected { color: var(--primary); background: var(--primary-soft); } .am-wstatus.cancelled, .am-wstatus.hidden { color: var(--text-muted); background: var(--surface-2); } /* ── Blogs ─────────────────────────────────────────── */ .bl-head { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; } .bl-head h1 { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; } .bl-head h1 svg { color: #e63946; } .bl-write { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border-radius: 10px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: #fff; background: #e63946; box-shadow: 0 4px 12px rgba(230,57,70,.25); transition: all .2s; } .bl-write:hover { background: #d12b39; transform: translateY(-1px); } .bl-cats { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 20px; scrollbar-width: none; } .bl-cats::-webkit-scrollbar { display: none; } .bl-cat { flex: none; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #6b7280; background: #f1f3f8; transition: all .18s; } .dark .bl-cat { background: #1a1f31; color: #9aa2b8; } .bl-cat.on { color: #fff; background: #e63946; } .bl-list { display: flex; flex-direction: column; gap: 14px; padding-bottom: 30px; } .bl-card { display: flex; gap: 16px; border-radius: 20px; padding: 14px; background: #fff; border: 1px solid #e6e8ef; transition: all .25s; } .dark .bl-card { background: #141827; border-color: #242a3d; } .bl-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(16,24,40,.08); border-color: #e63946; } .bl-cover { flex: none; width: 168px; height: 118px; border-radius: 14px; overflow: hidden; } @media (max-width: 640px) { .bl-cover { width: 104px; height: 92px; } } .bl-cover img { width: 100%; height: 100%; object-fit: cover; } .bl-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .bl-cattag { align-self: flex-start; border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 700; color: #e63946; background: #fde8ea; } .dark .bl-cattag { background: rgba(230,57,70,.16); } .bl-title { font-size: 16.5px; font-weight: 800; line-height: 1.35; margin: 8px 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bl-excerpt { font-style: normal; font-size: 13px; line-height: 1.55; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bl-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 11px; } .bl-author { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bl-meta { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11.5px; font-weight: 600; color: #9ca3af; } .bl-foot-btns { display: flex; gap: 10px; } .bl-draft { flex: none; border-radius: 10px; padding: 13px 22px; font-size: 14px; font-weight: 700; color: #1a1d29; background: #f1f3f8; } .dark .bl-draft { background: #1a1f31; color: #e8eaf2; } .bl-article { border-radius: 20px; overflow: hidden; margin: 18px 0 30px; background: #fff; border: 1px solid #e6e8ef; } .dark .bl-article { background: #141827; border-color: #242a3d; } .bl-artcover { position: relative; height: 260px; } .bl-artcover img { width: 100%; height: 100%; object-fit: cover; } .bl-artbody { padding: 26px 34px 34px; } .bl-artbody h1 { font-size: 30px; font-weight: 900; letter-spacing: -.7px; line-height: 1.2; margin: 12px 0 20px; } .bl-artbody p { font-size: 16px; line-height: 1.8; color: #374151; margin-bottom: 18px; } .dark .bl-artbody p { color: #cbd2e0; } .bl-byline { display: flex; align-items: center; gap: 11px; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid #e6e8ef; } .dark .bl-byline { border-color: #242a3d; } .bl-byline b { display: block; font-size: 14px; font-weight: 700; } .bl-byline em { display: block; font-style: normal; font-size: 12px; color: #9ca3af; } /* ── Dashboard ─────────────────────────────────────── */ .adm .dash-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } @media (max-width: 1200px) { .adm .dash-quick { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .adm .dash-quick { grid-template-columns: 1fr; } } .adm .dash-quickcard { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: var(--transition); } .adm .dash-quickcard:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); } .adm .dash-quickcard b { display: grid; place-items: center; flex: none; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; color: #fff; } .adm .dash-quickcard.red b { background: var(--primary); } .adm .dash-quickcard.green b { background: var(--success); } .adm .dash-quickcard.amber b { background: var(--warning); } .adm .dash-quickcard.blue b { background: var(--info); } .adm .dash-quickcard span { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; } .adm .dash-quickcard svg { flex: none; color: var(--text-soft); } /* Money boxes */ .adm .money-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } @media (max-width: 1200px) { .adm .money-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .adm .money-grid { grid-template-columns: 1fr; } } .adm .money-card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: var(--transition); } .adm .money-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .adm .money-icon { width: 48px; height: 48px; flex: none; border-radius: var(--radius); display: grid; place-items: center; color: #fff; } .adm .money-icon.blue { background: linear-gradient(135deg,#3b82f6,#60a5fa); } .adm .money-icon.green { background: linear-gradient(135deg,#10b981,#34d399); } .adm .money-icon.amber { background: linear-gradient(135deg,#f59e0b,#fbbf24); } .adm .money-icon.indigo { background: linear-gradient(135deg,#8b5cf6,#a78bfa); } .adm .money-label { display: block; font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 2px; } .adm .money-value { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.4px; } /* Two-column row for the chart and the pending list */ .adm .an-split { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 24px; align-items: start; } @media (max-width: 1100px) { .adm .an-split { grid-template-columns: 1fr; } } .adm .an-title { display: flex; align-items: center; gap: 8px; } .adm .an-title svg { color: var(--primary); } /* Chart */ .adm .chart-head { display: flex; justify-content: flex-end; margin-top: 12px; } .adm .chart-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; margin: 12px 0 16px; border-radius: var(--radius-sm); background: var(--surface-2); width: fit-content; max-width: 100%; } .adm .chart-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); transition: var(--transition); } .adm .chart-tab i { width: 7px; height: 7px; border-radius: 50%; flex: none; } .adm .chart-tab:hover { color: var(--text); } .adm .chart-tab.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .adm .chart-box { position: relative; height: 240px; } .adm .chart-svg { width: 100%; height: 100%; overflow: visible; } .adm .chart-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; } .adm .chart-hits { position: absolute; inset: 0; display: flex; } .adm .chart-hit { flex: 1; border-radius: 3px; transition: background .15s; } .adm .chart-hit:hover { background: var(--primary-soft); } .adm .chart-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); pointer-events: none; } .adm .chart-tip { position: absolute; top: 8px; z-index: 3; min-width: 165px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); pointer-events: none; transform: translateX(-50%); } .adm .chart-tip b { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; white-space: nowrap; } .adm .chart-tip em { display: flex; align-items: center; gap: 8px; font-style: normal; font-size: 11.5px; color: var(--text-muted); padding: 2px 0; } .adm .chart-tip em i { width: 7px; height: 7px; border-radius: 50%; flex: none; } .adm .chart-tip em span { margin-left: auto; font-weight: 700; color: var(--text); } /* Pending actions */ .adm .dash-pending { display: flex; flex-direction: column; margin-top: 6px; } .adm .dash-pendrow { display: flex; align-items: center; gap: 13px; padding: 14px 0; font-size: 13.5px; font-weight: 500; border-bottom: 1px solid var(--border); transition: var(--transition); } .adm .dash-pendrow:last-child { border-bottom: 0; } .adm .dash-pendrow:hover { padding-left: 6px; } .adm .dash-pendrow svg { flex: none; color: var(--text-soft); } .adm .dash-count { display: grid; place-items: center; flex: none; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--primary); } .adm .dash-count.zero { color: var(--text-muted); background: var(--surface-2); } /* Day breakdown popup */ .adm .day-card { width: min(380px, 94vw); border-radius: var(--radius-lg); padding-bottom: 10px; background: var(--surface); box-shadow: var(--shadow-lg); } .adm .day-rows { display: flex; flex-direction: column; padding: 4px 22px; } .adm .day-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); } .adm .day-row:last-child { border-bottom: 0; } .adm .day-row i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .adm .day-row b { font-size: 15px; font-weight: 700; } .adm .day-total { display: flex; align-items: center; margin: 8px 22px 14px; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13.5px; font-weight: 600; } .adm .day-total b { font-size: 17px; font-weight: 800; color: var(--primary); } /* Ranked lists */ .adm .an-list { display: flex; flex-direction: column; margin-top: 8px; } .adm .an-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); transition: var(--transition); } .adm .an-row:last-child { border-bottom: 0; } .adm .an-row:hover { padding-left: 4px; } .adm .an-rank { width: 40px; height: 40px; flex: none; border-radius: var(--radius); display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#667eea,#764ba2); } .adm .an-row b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm .an-row em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); } .adm .an-metric { display: flex; align-items: center; gap: 5px; flex: none; font-size: 16px; font-weight: 700; } .adm .an-heart { color: var(--primary); } .adm .an-people { color: var(--info); } .adm .an-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); } /* ── Settings forms ────────────────────────────────── */ /* Module switches, shown as a grid */ .adm .mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 16px 0 22px; } .adm .mod-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; text-align: left; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); transition: var(--transition); } .adm .mod-card:hover { border-color: var(--primary); } .adm .mod-card.on { background: var(--primary-soft); border-color: rgba(230,57,70,.3); } .adm .mod-card b { font-size: 13.5px; font-weight: 600; } /* ── User editor ───────────────────────────────────── */ .adm .au-headbtns { display: flex; align-items: center; gap: 10px; margin-left: auto; } .adm .au-signin { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--primary); background: var(--primary-soft); transition: var(--transition); } .adm .au-signin:hover { background: var(--primary); color: #fff; } .adm .au-back { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); } .adm .au-handle { font-size: 14px; color: var(--text-muted); } .adm .au-tag { padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .adm .au-tag.admin { color: #fff; background: var(--info); } .adm .au-tag.premium { color: #fff; background: linear-gradient(135deg,#f59e0b,#e63946); } .adm .au-tag.banned { color: #fff; background: var(--primary); } .adm .au-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; } @media (max-width: 1100px) { .adm .au-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .adm .au-stats { grid-template-columns: repeat(2, 1fr); } } .adm .au-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .adm .au-stat svg { color: var(--text-soft); margin-bottom: 4px; } .adm .au-stat b { font-size: 19px; font-weight: 800; letter-spacing: -.4px; } .adm .au-stat em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: capitalize; } .adm .au-tx { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .adm .au-txrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; } .adm .au-txrow b.up { color: var(--success); } .adm .au-txrow b.down { color: var(--primary); } .adm .au-danger { border-color: rgba(230,57,70,.3) !important; } .adm .ps-delete { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: #fff; background: var(--primary); } /* Users list view counts */ .adm .uv-count { margin-left: 7px; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: var(--surface-2); color: var(--text-muted); } .adm .set-tab.on .uv-count { background: var(--primary-soft); color: var(--primary); } /* ── Themes ────────────────────────────────────────── */ .adm .th-active { display: flex; align-items: center; gap: 20px; margin-top: 16px; } .adm .th-active .th-preview { width: 200px; height: 120px; flex: none; border-radius: var(--radius); border-bottom-width: 3px; } @media (max-width: 700px) { .adm .th-active { flex-direction: column; align-items: stretch; } .adm .th-active .th-preview { width: 100%; } } .adm .th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .adm .th-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: var(--transition); } .adm .th-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .adm .th-card.off { opacity: .55; } .adm .th-preview { display: grid; place-items: center; height: 124px; border-bottom: 3px solid; } .adm .th-pcard { display: flex; flex-direction: column; gap: 6px; width: 62%; padding: 13px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .adm .th-pcard i { display: block; width: 26px; height: 26px; border-radius: 8px; } .adm .th-pcard em { display: block; height: 6px; border-radius: 3px; width: 100%; } .adm .th-body { padding: 15px 17px 17px; } .adm .th-title { display: flex; align-items: center; gap: 9px; } .adm .th-title b { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; } .adm .th-price { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; color: #fff; background: var(--primary); } .adm .th-free { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; color: var(--success); background: var(--success-soft); } .adm .th-desc { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-top: 6px; } .adm .th-stats { display: flex; gap: 15px; margin: 12px 0; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .adm .th-stats span { display: inline-flex; align-items: center; gap: 5px; } .adm .th-default { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px; margin-top: 8px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; color: var(--primary); background: var(--primary-soft); transition: var(--transition); } .adm .th-default:hover { background: var(--primary); color: #fff; } .adm .cp-default { padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--info); } /* Fields sitting directly under a toggle row need separating from it. */ .adm .sf-fields { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 22px; } .adm .sf-fields .ps-field { margin-bottom: 16px; } .adm .sf-fields .cm-toggle-row { margin-bottom: 0; } .adm .ps-panel > .ps-field:first-of-type { margin-top: 14px; } /* Grouped toggles, shown as a grid like the module switches. */ /* Toggle grids. Density follows what each card carries: a short label fits four across, a description needs three, and a card owning its own control takes the full row. */ .adm .toggle-grid { display: grid; gap: 10px; margin: 16px 0 22px; grid-template-columns: repeat(4, 1fr); } .adm .toggle-grid.wide { grid-template-columns: repeat(3, 1fr); } .adm .toggle-grid .cm-toggle-row { margin-bottom: 0; align-items: flex-start; } .adm .toggle-grid .cm-toggle-row .mg-toggle { margin-top: 1px; } .adm .toggle-grid .full { grid-column: 1 / -1; } @media (max-width: 1200px) { .adm .toggle-grid { grid-template-columns: repeat(3, 1fr); } .adm .toggle-grid.wide { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .adm .toggle-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .adm .toggle-grid, .adm .toggle-grid.wide { grid-template-columns: 1fr; } } /* A card that owns a dropdown or key field keeps it inside. */ .adm .toggle-card-extra { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); } .adm .toggle-card-extra .cm-toggle-row { padding: 0; margin: 0; border: 0; background: none; } .adm .toggle-card-extra .cm-toggle-row:hover { border: 0; } .adm .toggle-card-extra .ps-field { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); } /* ── Home sidebar, at the measured sizes ───────────── */ /* The menu sits on a white card, matching the widgets on the right. */ .sb-card { background: #fff; border-radius: 16px; padding: 8px 10px 12px; border: .8px solid #e6e8ef; } .dark .sb-card { background: #16181c; border-color: #242a3d; } .sb-nav-item { display: flex; align-items: center; gap: 20px; height: 50px; min-height: 50px; padding: 0 20px 0 12px; border-radius: 999px; font-size: 20px; font-weight: 700; width: fit-content; max-width: 100%; transition: background .18s; } .sb-nav-item svg { width: 27px; height: 27px; flex: none; } .sb-nav-item:hover { background: rgba(0,0,0,.045); } .dark .sb-nav-item:hover { background: rgba(255,255,255,.07); } .sb-nav-item.on { font-weight: 700; } /* B4 — only the first few show; the rest slide in behind a chevron. */ /* The nav scrolls inside a fixed window. The rail height never changes, so the profile block below it never moves. */ .sb-navwrap { height: 350px; overflow: hidden auto; scrollbar-width: none; scroll-behavior: smooth; } .sb-navwrap::-webkit-scrollbar { display: none; } .sb-chev { display: flex; align-items: center; justify-content: center; width: 100%; height: 24px; margin-top: -4px; flex: none; color: #536471; transition: color .18s; } .sb-chev:hover { color: #0f1419; } .dark .sb-chev { color: #8b98a5; } .dark .sb-chev:hover { color: #e7e9ea; } .sb-toggle { display: flex; align-items: center; gap: 20px; height: 50px; padding: 0 16px; border-radius: 999px; font-size: 20px; font-weight: 700; color: inherit; width: fit-content; transition: background .18s; } .sb-toggle:hover { background: rgba(0,0,0,.05); } .dark .sb-toggle:hover { background: rgba(255,255,255,.07); } .sb-toggle svg { width: 27px; height: 27px; flex: none; transition: transform .3s; } .sb-toggle.open svg { transform: rotate(180deg); } /* ── Right column cards, at the measured values ────── */ /* Widget cards only. The search wrapper and the footer are not cards. */ .app-shell aside > .rr-card { border-radius: 16px; padding: 20px; border-width: 0.8px; } .rr-search { padding: 17px 0 8px; border: 0; border-radius: 0; background: none; } .rr-footer { padding: 4px 0 0 4px; border: 0; border-radius: 0; background: none; } /* The middle column's first card meets the top of the viewport, so only its lower corners are rounded. */ .app-col > *:first-child.rounded-2xl { border-radius: 24px 24px 0 0; } /* B6 — the weather card clipped its own text. Room on each side, and a little more at the bottom so the reading sits clear of the edge. */ /* B6 — the card clipped its own text at the edges. Room on each side and a little more below, so the reading and the range sit clear. */ .uvw { padding: 16px 20px 22px !important; } /* The place name runs past the card, so every text node in the header truncates with an ellipsis rather than being sliced mid-word. */ .uvw .uvh { min-width: 0; } .uvw .uvh, .uvw .uvh * { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Rails share what's left after the fixed 600px feed, roughly 42/58 — the proportion notr uses, so both grow together on a wider screen. */ .sb-rail { flex: 42 1 0; min-width: 208px; max-width: 290px; /* 16px matches the feed column's top padding, so the menu card starts on the same line as the tab strip and the search box. */ padding: 16px 6px 12px 12px; } .rr-rail { flex: 58 1 0; min-width: 316px; max-width: 400px; padding: 0 20px 20px 0; } /* The rail spaces its cards 16px apart, but the search pill should sit right on top of the first card. A flex gap ignores margins, so the gap itself is removed and each card carries its own spacing instead. */ .rr-rail { gap: 0 !important; } .rr-rail > * + * { margin-top: 16px; } .rr-rail > .rr-search + * { margin-top: 4px; } @media (max-width: 1280px) { .sb-rail { flex: none; width: 208px; } .rr-rail { flex: none; width: 316px; } } /* Create button — fixed 200px, deliberately not filling the rail. */ .sb-create { display: flex; align-items: center; justify-content: center; gap: 12px; width: 200px; height: 50px; padding: 0; margin: 12px 0 4px; border-radius: 9999px; border: .8px solid #0f1419; background: transparent; color: inherit; font-size: 20px; font-weight: 600; transition: background .18s; } .sb-create:hover { background: rgba(0,0,0,.045); } .dark .sb-create { border-color: #536471; } .dark .sb-create:hover { background: rgba(255,255,255,.07); } .sb-create.compact { width: 50px; padding: 0; justify-content: center; } /* 4 — every tab the same height, in a band under the header. */ .feed-tabs { display: flex; align-items: center; gap: 4px; height: 60px; padding: 0 12px; margin-bottom: 10px; background: #fff; border: .8px solid #e6e8ef; border-radius: 16px; } .dark .feed-tabs { background: #16181c; border-color: #242a3d; } .feed-tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #0f1419; transition: all .18s; } .dark .feed-tab { color: #e7e9ea; } .feed-tab svg { width: 14px; height: 14px; } .feed-tab:hover { background: rgba(0,0,0,.04); } .dark .feed-tab:hover { background: rgba(255,255,255,.06); } .feed-tab.on { font-weight: 700; color: #0f1419; background: #f1f1f1; } .dark .feed-tab.on { color: #e7e9ea; background: #22262c; } /* 5 — one rule for every widget card, so none is left out. */ .rr-rail > * { border-radius: 16px !important; } .rr-rail > .rr-card, .rr-rail > .uvw, .rr-rail > .mkw, .rr-rail > div:not(.rr-search):not(.rr-footer) { padding: 20px !important; } /* Matches the tab strip above the feed: same height, same border, same sticky behaviour, so the two line up as one row across the page. */ .rr-search { display: flex; align-items: center; height: 60px; margin-top: 4px; padding: 0 12px !important; margin-bottom: 10px; border-radius: 16px !important; border: .8px solid #e6e8ef !important; background: #fff !important; } .dark .rr-search { background: #141827 !important; border-color: #242a3d !important; } .rr-search > * { width: 100%; } /* The pill inside loses its own fill — the card is the surface now. */ .rr-search input, .rr-search .fsb-box { background: transparent !important; border: 0 !important; } .rr-footer { padding: 17px 0 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } .rr-footer { padding: 4px 0 0 4px !important; } /* 7 — the feed frame fills the column, top corners only. */ .app-col { padding-left: 0 !important; padding-right: 0 !important; } .app-col > .feed-frame { border-radius: 24px 24px 0 0; } /* A save button in the page header, so long forms don't need scrolling. */ .adm .ab-save-top { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: #fff; background: var(--primary); box-shadow: 0 4px 12px rgba(230,57,70,.25); transition: var(--transition); } .adm .ab-save-top:hover { background: var(--primary-hover); } .adm .ab-save-top:disabled { opacity: .55; box-shadow: none; } .adm .ps-panelhead { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; } .adm .ps-panelhead .an-title { flex: 1; min-width: 0; } /* The bottom block is a card like the menu above it. */ .sb-pinned.sb-card { padding: 8px; margin-top: 10px; } .sb-pinned.sb-card > button:first-child { border-radius: 12px; } /* Rails sit below modals. Without this the sidebar shows through a full-screen overlay like the story composer. */ .app-shell > aside, .sb-rail, .rr-rail { z-index: 10; } .nm-back, .fixed.inset-0.z-50 { z-index: 100 !important; } /* Public-site buttons, using the shared tokens above. */ .cl-post, .ab-new, .ps-save { color: #fff; background: var(--primary); box-shadow: 0 4px 12px rgba(230,57,70,.25); } .cl-post:hover, .ab-new:hover, .ps-save:hover { background: var(--primary-hover); } .cl-post:disabled, .ps-save:disabled { opacity: .5; box-shadow: none; } /* Approval queue rows */ .adm .ac-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); } .adm .ac-row:last-child { border-bottom: 0; } .adm .ac-row b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm .ac-row em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 2px; } .adm .ab-approve, .adm .ab-reject { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; transition: var(--transition); } .adm .ab-approve { color: #fff; background: var(--success); } .adm .ab-approve:hover { filter: brightness(.94); } .adm .ab-reject { color: var(--primary); background: var(--primary-soft); } .adm .ab-reject:hover { background: var(--primary); color: #fff; } /* Buying a listing — the primary action on the page. */ .ld-buy { display: block; width: 100%; margin: 14px 0 10px; padding: 13px; border-radius: 999px; font-size: 15px; font-weight: 800; color: #fff; background: var(--primary); box-shadow: 0 4px 14px rgba(230,57,70,.28); transition: all .2s; } .ld-buy:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); } .ld-buy:disabled { opacity: .55; box-shadow: none; } /* The announcement banner spans the page above the columns. It used to be a flex child of the column row, which squeezed it into the left margin. */ /* Fixed rather than sticky: it sits inside the three-column row, so as a flex item it ended up beside the sidebar instead of above the page. */ .site-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.06); } /* Everything below moves down by its height. */ body:has(.site-banner) .app-shell { padding-top: 42px; } .site-banner.info { color: #1e40af; background: #dbeafe; } .site-banner.warning { color: #92400e; background: #fef3c7; } .site-banner.success { color: #065f46; background: #d1fae5; } .site-banner a { text-decoration: underline; } .site-banner button { margin-left: 8px; opacity: .6; } .site-banner button:hover { opacity: 1; } /* The like count beside the heart, and the filled state when liked. */ /* Against its icon, so each pair reads as one thing. */ .pa-count { font-size: 13px; font-weight: 600; margin-left: 4px; } .pa-like.on .pa-stroke { fill: #e63946; stroke: #e63946; } .pa-like.on .pa-count { color: #e63946; } /* The time-of-day greeting above the feed. */ .feed-greeting { font-size: 19px; font-weight: 800; letter-spacing: -.3px; padding: 4px 2px 12px; } /* 85 — the marketplace overflowed its column on a phone. Nothing inside a grid cell may force the row wider than the screen. */ @media (max-width: 640px) { .mv-grid, .mv-list { grid-template-columns: 1fr !important; } .mv-grid > *, .mv-list > * { min-width: 0; } .mv-hero2, .mv-hero2-art { max-width: 100%; } .mv-filters, .mv-cats { overflow-x: auto; scrollbar-width: none; } .mv-filters::-webkit-scrollbar, .mv-cats::-webkit-scrollbar { display: none; } .ld-grid { grid-template-columns: 1fr !important; } .ld-grid > * { min-width: 0; } } /* Nothing on a phone should scroll the whole page sideways. */ @media (max-width: 640px) { html, body { overflow-x: hidden; } .app-col, .app-shell { max-width: 100vw; } } /* A spent or expired invitation code. */ .as-word.spent { opacity: .45; text-decoration: line-through; } /* Footer links to the static pages. */ .site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px 24px 30px; font-size: 12.5px; color: #9ca3af; } .site-footer a:hover { color: #0f1419; } .dark .site-footer a:hover { color: #e7e9ea; } .site-footer-mark { margin-left: auto; } @media (max-width: 767px) { .site-footer { padding-bottom: 90px; } } /* ── Themes ──────────────────────────────────────────── A bought theme sets --theme-* on the document. These rules are what make that visible — without them the tokens were applied and nothing changed. */ body:has(:root) { } html[style*="--theme-bg"] body, html[style*="--theme-bg"] .app-shell { background: var(--theme-bg); color: var(--theme-text); } html[style*="--theme-bg"] .sb-card, html[style*="--theme-bg"] .rr-card, html[style*="--theme-bg"] .feed-tabs, html[style*="--theme-bg"] .feed-frame, html[style*="--theme-bg"] .bl-card, html[style*="--theme-bg"] .uvw, html[style*="--theme-bg"] .mkw { background: var(--theme-card) !important; border-color: var(--theme-border) !important; color: var(--theme-text); } html[style*="--theme-bg"] .sb-nav-item, html[style*="--theme-bg"] .feed-tab { color: var(--theme-text); } html[style*="--theme-bg"] .sb-nav-item:hover, html[style*="--theme-bg"] .feed-tab:hover { background: var(--theme-border); } html[style*="--theme-bg"] .sb-nav-item.on, html[style*="--theme-bg"] .feed-tab.on { background: var(--theme-accent); color: var(--theme-bg); } html[style*="--theme-bg"] .bl-excerpt, html[style*="--theme-bg"] .bl-meta, html[style*="--theme-bg"] .text-neutral-500 { color: var(--theme-muted) !important; } html[style*="--theme-bg"] .cl-post, html[style*="--theme-bg"] .bl-write, html[style*="--theme-bg"] .ld-buy { background: var(--theme-accent) !important; color: var(--theme-bg) !important; } /* Storefront wording, over the hero art rather than baked into it. */ .mv-hero2-words { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 clamp(20px, 5vw, 56px); pointer-events: none; } .mv-hero2-words b { font-size: clamp(24px, 4vw, 42px); font-weight: 900; letter-spacing: -1px; line-height: 1.1; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4); } .mv-hero2-words em { font-style: normal; font-size: clamp(13px, 1.6vw, 17px); font-weight: 600; color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(0,0,0,.4); } /* Top-up options and bank details. */ .tp-option { display: block; width: 100%; margin-top: 8px; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700; border: 1px solid var(--border, #e6e8ef); transition: all .18s; } .tp-option:hover { border-color: var(--primary); color: var(--primary); } .tp-bank { margin-top: 12px; font-size: 13px; } .tp-bank summary { cursor: pointer; font-weight: 700; padding: 10px 0; } .tp-bank dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 4px 0 10px; } .tp-bank dt { color: #9ca3af; } .tp-bank dd { font-weight: 600; } .tp-bank p { color: #6b7280; line-height: 1.5; } /* The app's own confirmation dialog. */ .cf-card { width: min(400px, 92vw); padding: 26px; border-radius: 18px; text-align: center; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: hovIn .22s cubic-bezier(.2,1.1,.3,1) both; } .dark .cf-card { background: #141827; } .cf-warn { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; color: #e63946; background: #fde8ea; } .dark .cf-warn { background: rgba(230,57,70,.16); } .cf-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; } .cf-card p { font-size: 13.5px; line-height: 1.55; color: #6b7280; } .dark .cf-card p { color: #9aa2b8; } .cf-actions { display: flex; gap: 10px; margin-top: 22px; } .cf-actions button { flex: 1; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700; transition: all .18s; } .cf-cancel { background: #f1f3f8; color: #1a1d29; } .dark .cf-cancel { background: #1a1f31; color: #e8eaf2; } .cf-danger { color: #fff; background: #e63946; } .cf-danger:hover { background: #d12b39; } .cf-go { color: #fff; background: #2563eb; } /* Offers waiting on the seller. */ .ld-offers { margin: 14px 0; padding: 16px; border-radius: 16px; background: #f8f9fc; border: 1px solid #e6e8ef; } .dark .ld-offers { background: #1a1f31; border-color: #242a3d; } .ld-offers h3 { font-size: 13px; font-weight: 800; margin-bottom: 10px; } .ld-offer { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #e6e8ef; } .dark .ld-offer { border-color: #242a3d; } .ld-offer:first-of-type { border-top: 0; } .ld-offer b { display: block; font-size: 15px; font-weight: 800; } .ld-offer em { display: block; font-style: normal; font-size: 12px; color: #6b7280; margin-top: 1px; } .ld-accept, .ld-decline { flex: none; padding: 7px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700; transition: all .18s; } .ld-accept { color: #fff; background: #10b981; } .ld-accept:hover:not(:disabled) { filter: brightness(.94); } .ld-decline { color: #6b7280; background: transparent; } .ld-decline:hover { color: #e63946; } /* Contact form */ .ct-card { margin: 18px 0 30px; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid #e6e8ef; } .dark .ct-card { background: #141827; border-color: #242a3d; } .ct-card h1 { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; margin-bottom: 6px; } .ct-card h1 svg { color: #e63946; } .ct-intro { font-size: 13.5px; color: #6b7280; margin-bottom: 20px; } .ct-done { display: flex; align-items: center; gap: 10px; padding: 18px 0; font-size: 14.5px; font-weight: 600; color: #10b981; } /* ── Support ───────────────────────────────────────── */ .sp-head { display: flex; align-items: center; gap: 14px; margin: 18px 0 16px; } .sp-head h1 { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; } .sp-head h1 svg { color: #e63946; } .sp-new { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: #fff; background: #e63946; } .sp-new:hover { background: #d12b39; } .sp-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 30px; } .sp-row { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: 16px; background: #fff; border: 1px solid #e6e8ef; transition: all .2s; } .dark .sp-row { background: #141827; border-color: #242a3d; } .sp-row:hover { border-color: #e63946; } .sp-row b { display: block; font-size: 14.5px; font-weight: 700; } .sp-row em { display: block; font-style: normal; font-size: 12px; color: #9ca3af; margin-top: 3px; } .sp-status { flex: none; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: capitalize; } .sp-status.open { color: #d97706; background: #fef3c7; } .sp-status.answered { color: #059669; background: #d1fae5; } .sp-status.closed { color: #6b7280; background: #f1f3f8; } .sp-thread { display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto; padding: 4px 0; } .sp-msg { padding: 13px 16px; border-radius: 14px; background: #f8f9fc; border: 1px solid #e6e8ef; } .dark .sp-msg { background: #1a1f31; border-color: #242a3d; } .sp-msg.staff { background: #fde8ea; border-color: rgba(230,57,70,.2); } .dark .sp-msg.staff { background: rgba(230,57,70,.12); } .sp-msg p { font-size: 14px; line-height: 1.6; white-space: pre-wrap; } .sp-msg em { display: block; font-style: normal; font-size: 11.5px; color: #9ca3af; margin-top: 7px; } .sp-reply { display: flex; gap: 10px; align-items: center; } .sp-reply .cl-field { flex: 1; } .sp-reply .cl-post { flex: none; width: auto; padding: 13px 18px; } /* ── Photo editor ──────────────────────────────────── */ .pe-back { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.75); backdrop-filter: blur(6px); } .pe-shell { --pe-tools: 80px; --pe-bar: 58px; position: relative; display: flex; flex-direction: column; width: min(520px, 100%); /* A definite height, so the stage has real space to fill. With only a max-height the shell sized to its content and a flex-basis-0 stage collapsed to nothing. */ height: 94vh; max-height: 94vh; border-radius: 20px; overflow: hidden; background: #16181c; color: #e7e9ea; } .pe-bar { position: relative; z-index: 10; display: flex; flex: none; align-items: center; gap: 14px; height: var(--pe-bar); padding: 0 14px; border-bottom: 1px solid #242a3d; background: #16181c; } .pe-bar span { flex: 1; font-size: 15px; font-weight: 700; } .pe-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #e7e9ea; } .pe-x:hover { background: rgba(255,255,255,.1); } .pe-done { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff; background: #e63946; } .pe-done:hover:not(:disabled) { background: #d12b39; } .pe-done:disabled { opacity: .55; } /* flex-basis 0 with min-height 0 lets the stage shrink to whatever the shell has left; without that a flex child refuses to go below its content and the photo overflows. */ .pe-stage { position: relative; flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden; background: #000; display: grid; place-items: center; touch-action: none; } .pe-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: filter .25s, transform .25s; } .pe-overlay { position: absolute; transform: translate(-50%, -50%); cursor: grab; white-space: nowrap; user-select: none; touch-action: none; font-weight: 800; padding: 2px 6px; border-radius: 8px; } .pe-overlay.text, .pe-overlay.mention { text-shadow: 0 2px 10px rgba(0,0,0,.6); } .pe-overlay.on { outline: 2px dashed rgba(255,255,255,.6); outline-offset: 3px; } .pe-overlay:active { cursor: grabbing; } .pe-track { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); } /* Floats over the photo, but stops short of the tool bar so switching tools is always possible. --pe-tools is the bar's height. */ /* Part of the column rather than floating over the photo: opening it shrinks the picture instead of hiding its lower half, so every part of the photo stays reachable — the bottom crop handles especially. */ .pe-panel { position: relative; flex: 0 0 auto; max-height: 34vh; overflow-y: auto; padding: 14px; border-top: 1px solid #242a3d; background: #1a1f31; } .pe-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .pe-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #a7adbf; background: #242a3d; } .pe-chip.on { color: #fff; background: #e63946; } .pe-filters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .pe-filters::-webkit-scrollbar { display: none; } .pe-filter { flex: none; width: 66px; } .pe-filter img { width: 66px; height: 66px; object-fit: cover; border-radius: 10px; border: 2px solid transparent; } .pe-filter.on img { border-color: #e63946; } .pe-filter em { display: block; font-style: normal; font-size: 10.5px; color: #a7adbf; margin-top: 5px; } .pe-filter.on em { color: #fff; font-weight: 700; } .pe-stickers { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; } .pe-stickers button { font-size: 26px; padding: 6px; border-radius: 10px; } .pe-stickers button:hover { background: #242a3d; } @media (max-width: 480px) { .pe-stickers { grid-template-columns: repeat(6, 1fr); } } .pe-text input, .pe-search input { width: 100%; padding: 11px 14px; border-radius: 12px; font-size: 14px; color: #e7e9ea; background: #242a3d; } .pe-colours { display: flex; gap: 8px; margin: 12px 0; } .pe-colour { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; } .pe-colour.on { border-color: #fff; } .pe-add { width: 100%; padding: 11px; border-radius: 12px; font-size: 14px; font-weight: 700; color: #fff; background: #e63946; } .pe-add:disabled { opacity: .45; } .pe-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: #242a3d; color: #a7adbf; } .pe-search input { background: none; padding: 11px 0; } .pe-person, .pe-song { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 4px; text-align: left; border-radius: 10px; } .pe-person:hover, .pe-song:hover { background: #242a3d; } .pe-person b, .pe-song b { display: block; font-size: 13.5px; font-weight: 600; } .pe-person em, .pe-song em { display: block; font-style: normal; font-size: 12px; color: #a7adbf; } .pe-song img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .pe-track-current { display: flex; align-items: center; gap: 8px; width: 100%; margin: 10px 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: #fff; background: #e63946; } .pe-track-current svg:last-child { margin-left: auto; } /* Its own row above the tool bar, so it never covers the photo. */ .pe-selected { position: relative; z-index: 8; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-top: 1px solid #242a3d; background: #1a1f31; } .pe-selected input { flex: 1; accent-color: #e63946; } .pe-selected button { color: #e63946; } .pe-tools { position: relative; z-index: 9; display: flex; flex: none; gap: 4px; height: var(--pe-tools); padding: 10px; border-top: 1px solid #242a3d; background: #16181c; overflow-x: auto; scrollbar-width: none; } .pe-tools::-webkit-scrollbar { display: none; } .pe-tool { flex: 1 0 62px; min-width: 62px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border-radius: 12px; color: #a7adbf; transition: all .18s; } .pe-tool svg { width: 19px; height: 19px; flex: none; } .pe-tool em { font-style: normal; font-size: 10.5px; font-weight: 600; } .pe-tool:hover { color: #e7e9ea; background: #242a3d; } .pe-tool.on { color: #fff; background: #e63946; } /* ── Crop box ──────────────────────────────────────── */ /* Sized to the photo itself rather than the stage, so cropping a wide picture doesn't include the letterboxing. */ .cr-frame { position: absolute; inset: 0; touch-action: none; display: grid; place-items: center; } .cr-shade { position: absolute; left: 0; right: 0; background: rgba(0,0,0,.55); pointer-events: none; } .cr-box { position: absolute; cursor: move; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); } .cr-box.on { box-shadow: inset 0 0 0 1px #fff; } .cr-third { position: absolute; background: rgba(255,255,255,.28); pointer-events: none; opacity: 0; transition: opacity .2s; } .cr-box.on .cr-third { opacity: 1; } .cr-third.v { top: 0; bottom: 0; width: 1px; } .cr-third.h { left: 0; right: 0; height: 1px; } .cr-handle { position: absolute; width: 22px; height: 22px; } .cr-handle::before { content: ""; position: absolute; width: 20px; height: 20px; border: 3px solid #fff; } .cr-handle.nw { top: 0; left: 0; cursor: nwse-resize; } .cr-handle.nw::before { border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; } .cr-handle.ne { top: 0; right: 0; cursor: nesw-resize; } .cr-handle.ne::before { right: 0; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; } .cr-handle.sw { bottom: 0; left: 0; cursor: nesw-resize; } .cr-handle.sw::before { bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 3px; } .cr-handle.se { bottom: 0; right: 0; cursor: nwse-resize; } .cr-handle.se::before { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; } /* Text being typed, shown on the photo before it's committed. */ .pe-overlay.draft { pointer-events: none; opacity: .85; outline: 2px dashed rgba(255,255,255,.45); outline-offset: 3px; font-size: 20px; } .pe-selected-label { font-size: 12px; font-weight: 700; color: #a7adbf; } .pe-none { padding: 14px 4px; font-size: 13px; color: #a7adbf; text-align: center; } /* A small sticker still needs to be grabbable. */ .pe-overlay { min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; } /* The track badge on a photo post. */ .pm-badge { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 9px; max-width: min(70%, 260px); padding: 7px 12px 7px 7px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.6); backdrop-filter: blur(10px); transition: background .2s; } .pm-badge:hover { background: rgba(0,0,0,.75); } .pm-badge img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; } .pm-badge img.spin { animation: pmSpin 7s linear infinite; } @keyframes pmSpin { to { transform: rotate(360deg); } } .pm-badge b { display: block; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-badge em { display: block; font-style: normal; font-size: 10.5px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-badge svg { flex: none; } /* Music results with a preview button. */ .pe-play { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: #fff; background: #e63946; } .pe-play:hover { background: #d12b39; } .pe-use { flex: none; padding: 6px 13px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #a7adbf; background: #242a3d; } .pe-use:hover { color: #fff; background: #e63946; } /* The photo and its overlays share one box, so screen and canvas agree. */ .pe-photo { position: relative; display: block; max-width: 100%; max-height: 100%; line-height: 0; } /* The photo box shrinks to the picture, so overlay positions and the picture agree, and the whole photo is always visible. */ /* Sized in pixels by the editor, so the box and the picture are the same rectangle and overlay percentages mean what they look like. */ .pe-photo { position: relative; display: block; line-height: 0; } .pe-photo img { display: block; width: 100%; height: 100%; object-fit: contain; } .pe-add-tag { flex: none; padding: 6px 13px; margin-right: -6px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #fff; background: #e63946; } .pe-add-tag:hover { background: #d12b39; } /* Edit and remove, over the photo attached to a post. */ .cp-photo-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; } .cp-photo-tools button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); transition: background .18s; } .cp-photo-tools button:hover { background: rgba(0,0,0,.85); } .cp-photo-tools button:last-child:hover { background: #e63946; } /* ── A photo on a post ───────────────────────────────── The picture is never trimmed. A tall one would otherwise sit small in a half-empty column, so an enlarged blurred copy of itself fills the space behind it. */ .pf-frame { position: relative; display: block; width: 100%; max-height: 620px; aspect-ratio: 4 / 5; margin-top: 12px; border-radius: 16px; overflow: hidden; background: #0b0d12; } .pf-blur { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(26px) saturate(1.35) brightness(.72); transform: scale(1.12); } .pf-photo { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; } /* A wide photo doesn't need the frame's height — it takes its own. */ .pf-frame.wide { aspect-ratio: auto; } .pf-frame.wide .pf-photo { height: auto; } /* An approximate price in the reader's own money, under the real one. */ .lc-local { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: #9ca3af; margin-top: 1px; } /* Changing the site currency. */ .adm .cc-panel { margin-bottom: 18px; } .adm .cc-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--text-muted); } .adm .cc-now { padding: 9px 18px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 800; color: var(--text); background: var(--surface-2, #f1f3f8); } .adm .cc-row select { padding: 9px 14px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; border: 1px solid var(--border); } .adm .cc-done { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: #065f46; background: #d1fae5; } /* The composer preview: the same treatment as the post, a little shorter so the composer doesn't become all photo. */ .pf-frame.preview { margin-top: 0; max-height: 340px; } /* ── Repost menu ─────────────────────────────────────── Rendered into the body, so a card with hidden overflow can't clip it. */ .rp-catch { position: fixed; inset: 0; z-index: 190; } .rp-menu { position: fixed; z-index: 200; min-width: 186px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid #e6e8ef; box-shadow: 0 14px 40px rgba(0,0,0,.16); animation: rpIn .14s cubic-bezier(.2,1.1,.3,1) both; } .dark .rp-menu { background: #141827; border-color: #242a3d; } @keyframes rpIn { from { opacity: 0; transform: translateY(-5px) scale(.97); } } .rp-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; text-align: left; transition: background .15s; } .rp-item:hover { background: #f4f6fb; } .dark .rp-item:hover { background: #1a1f31; } .rp-item.undo { color: #10b981; } .rp-btn.on { color: #10b981; } .rp-btn.on .pa-count { color: #10b981; } /* ── Quote ─────────────────────────────────────────── */ .qt-card { width: min(560px, 94vw); max-height: 90vh; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; } .dark .qt-card { background: #141827; } .qt-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e6e8ef; } .dark .qt-head { border-color: #242a3d; } .qt-head span { font-size: 16px; font-weight: 800; } .qt-body { flex: 1; overflow-y: auto; padding: 16px; } .qt-write { display: flex; gap: 12px; } .qt-write textarea { flex: 1; font-size: 16px; line-height: 1.5; resize: none; background: none; outline: none; } .qt-original { margin-top: 14px; padding: 13px; border-radius: 14px; border: 1px solid #e6e8ef; } .dark .qt-original { border-color: #242a3d; } .qt-who { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .qt-who b { font-size: 13.5px; font-weight: 700; } .qt-who em { font-style: normal; font-size: 12.5px; color: #9ca3af; } .qt-original p { font-size: 14px; line-height: 1.5; color: #6b7280; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .qt-original img { margin-top: 9px; border-radius: 10px; max-height: 190px; width: 100%; object-fit: cover; } .qt-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 16px; border-top: 1px solid #e6e8ef; } .dark .qt-foot { border-color: #242a3d; } .qt-ring { width: 24px; height: 24px; transform: rotate(-90deg); } .qt-track { fill: none; stroke: #e6e8ef; stroke-width: 2.5; } .dark .qt-track { stroke: #242a3d; } .qt-fill { fill: none; stroke: #e63946; stroke-width: 2.5; stroke-dasharray: 62.8; stroke-linecap: round; transition: stroke-dashoffset .2s; } .qt-ring.low .qt-fill { stroke: #f59e0b; } .qt-left { font-size: 12.5px; font-weight: 700; color: #f59e0b; } /* A quoted post inside another. */ /* Tinted, so it's obvious at a glance which words are the poster's and which belong to the post they're quoting. */ .pc-quoted { margin-top: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e8ef; background: #f7f9fa; } .dark .pc-quoted { border-color: #242a3d; background: #1a1f31; } .pc-quoted:hover { background: #eef1f4; } .dark .pc-quoted:hover { background: #1f2537; } .pc-quoted .qt-who { margin-bottom: 6px; } /* Lighter than the post's own words — it's someone else's, and quoting it shouldn't shout over what was written about it. */ .pc-quoted p { font-size: 14px; line-height: 1.5; color: #6b7280; } .dark .pc-quoted p { color: #9aa2b8; } .pc-quoted img { margin-top: 8px; border-radius: 10px; width: 100%; max-height: 260px; object-fit: cover; } /* The repost menu sits above its button, so it can't fall off the bottom. */ .rp-menu { transform: translateY(-100%); transform-origin: bottom left; } @keyframes rpIn { from { opacity: 0; transform: translateY(calc(-100% + 5px)) scale(.97); } } /* ── The post's own menu ─────────────────────────────── Labels left, icons right — the opposite of the repost menu, so the two read as different things at a glance. */ .pm-trigger { display: grid; place-items: center; width: 26px; height: 26px; padding: 4px; border-radius: 50%; color: #0f1419; transition: background .15s; } .pm-trigger:hover { background: rgba(0,0,0,.06); } .dark .pm-trigger { color: #e7e9ea; } .dark .pm-trigger:hover { background: rgba(255,255,255,.08); } .pm-catch { position: fixed; inset: 0; z-index: 9998; } .pm-panel { position: fixed; z-index: 9999; width: 300px; padding: 12px 0; border-radius: 16px; background: #fff; border: .8px solid #eff3f4; box-shadow: 0 8px 32px rgba(0,0,0,.2); overflow: hidden; animation: pmIn .14s cubic-bezier(.2,1.1,.3,1) both; } .dark .pm-panel { background: #141827; border-color: #242a3d; } @keyframes pmIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } } .pm-row { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 12px 20px; font-size: 15px; font-weight: 600; color: #0f1419; transition: background .14s; } .dark .pm-row { color: #e7e9ea; } .pm-row:hover { background: #f7f9fa; } .dark .pm-row:hover { background: #1a1f31; } .pm-row.danger, .pm-row.danger svg { color: #f66f75; } .pm-row svg { flex: none; } /* Follow, on the card header. Only shown when the reader doesn't already follow the author — there is no "Following" state here. */ .pc-follow { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 50px; font-size: 12.5px; font-weight: 700; background: transparent; border: .8px solid #e5e5e5; color: inherit; white-space: nowrap; transition: all .18s; } .dark .pc-follow { border-color: #2f3441; } .pc-follow:hover { border-color: #e63946; color: #e63946; } /* Comment sorting — three plain choices rather than a hidden dropdown. */ .ct-sorts { display: flex; align-items: center; gap: 2px; } .ct-sort { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #9ca3af; transition: all .16s; } .ct-sort:hover { color: #0f1419; background: rgba(0,0,0,.04); } .dark .ct-sort:hover { color: #e7e9ea; background: rgba(255,255,255,.06); } .ct-sort.on { color: #0f1419; font-weight: 700; background: #f1f1f1; } .dark .ct-sort.on { color: #e7e9ea; background: #22262c; } .ct-hide { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #9ca3af; } .ct-hide:hover { background: rgba(0,0,0,.05); } /* The brand sits inside the menu card. */ .sb-brand { display: block; padding: 4px 12px 10px; } /* ── Story ring ──────────────────────────────────────── A thin neon line with a glow around it, rather than a thick band — magenta through white to green, as in the reference. */ .st-ring { position: relative; border-radius: 50%; padding: 2px; background: conic-gradient(from 210deg, #ff2fd0 0deg, #ff6ec7 60deg, #ffffff 130deg, #7cf03d 200deg, #2ee86a 280deg, #ff2fd0 360deg); } .st-ring::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: inherit; filter: blur(7px); opacity: .55; z-index: -1; } .st-ring > * { border-radius: 50%; background: #fff; padding: 2px; } .dark .st-ring > * { background: #0f1115; } /* Once it's been watched the glow goes and the line greys out. */ .st-ring.seen { background: #d5d8e0; } .dark .st-ring.seen { background: #2f3441; } .st-ring.seen::before { display: none; } /* Every story tile is the same size, including the one that adds one. */ .stb-item { width: 72px; flex: none; } .stb-add .st-ring { background: none; padding: 0; } .stb-add .st-ring::before { display: none; } /* The story ring: a thin lit line with a glow behind it. */ .st-line { border-radius: 50%; background: conic-gradient(from 210deg, #ff2fd0 0deg, #ff6ec7 55deg, #ffffff 125deg, #8bf24a 195deg, #2ee86a 275deg, #ff2fd0 360deg); animation: stSpin 7s linear infinite; } .st-line::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: inherit; filter: blur(8px); opacity: .5; z-index: -1; } @keyframes stSpin { to { transform: rotate(360deg); } } .st-line.seen { background: #d5d8e0; animation: none; } .dark .st-line.seen { background: #2f3441; } .st-line.seen::after { display: none; } /* ── Comments in their own window ────────────────────── A long conversation scrolls on its own rather than pushing the feed away, and the box to write in stays reachable at the bottom. */ .cm-back { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); } .cm-shell { display: flex; flex-direction: column; width: min(600px, 100%); max-height: min(88vh, 780px); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.3); } .dark .cm-shell { background: #141827; } .cm-bar { display: flex; align-items: center; justify-content: center; position: relative; flex: none; height: 56px; padding: 0 16px; border-bottom: 1px solid #e6e8ef; } .dark .cm-bar { border-color: #242a3d; } .cm-bar span { font-size: 16px; font-weight: 800; } .cm-x { position: absolute; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #536471; } .cm-x:hover { background: rgba(0,0,0,.06); } .dark .cm-x:hover { background: rgba(255,255,255,.08); } .cm-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px; } /* Room for the composer, so the last reply isn't cut off behind it. */ .cm-scroll > :last-child { padding-bottom: 20px; } /* One line of context above the conversation. */ .cm-context { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 9px 12px; border-radius: 12px; font-size: 13px; color: #6b7280; background: #f7f9fa; } .dark .cm-context { background: #1a1f31; color: #9aa2b8; } .cm-context b { flex: none; font-weight: 700; color: #0f1419; } .dark .cm-context b { color: #e7e9ea; } .cm-context span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* The composer sits at the bottom of the window rather than the screen. */ .cm-scroll .fixed.bottom-0 { position: sticky !important; bottom: 0; left: auto; right: auto; margin: 0 -16px -16px; } @media (max-width: 640px) { .cm-back { padding: 0; } .cm-shell { width: 100%; height: 100dvh; border-radius: 0; } } /* The comment preview beside the post actions. Without a limit a long comment pushed the pill out past the card's edge. */ .pa-pill { min-width: 0; max-width: 260px; overflow: hidden; } .pa-pill > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 1100px) { .pa-pill { max-width: 180px; } } /* The row that holds it must be allowed to shrink, or the cap never comes into play. */ .pa-pill, .pa-pill * { min-width: 0; } a:has(> .pa-pill) { min-width: 0; max-width: 100%; overflow: hidden; } /* Nothing inside a post card may push past its edge. */ .app-col .relative > .flex { min-width: 0; } .app-col img, .app-col video { max-width: 100%; } /* The follower count, in the same shape as the trending spark column. */ .tf-count { display: inline-flex; align-items: center; gap: 4px; flex: none; position: relative; z-index: 1; padding: 4px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: var(--accent); background: #fff; border: 1px solid rgba(0,0,0,.05); } .dark .tf-count { background: #16181c; border-color: rgba(255,255,255,.07); } /* The empty note sits with the conversation, above the box you type in. */ .ct-empty { padding: 22px 4px; font-size: 13.5px; color: #9ca3af; text-align: center; } /* The profile tab row scrolls; the chevron says so. */ .pf-tabwrap { position: relative; } .pf-tabs { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .pf-tabs::-webkit-scrollbar { display: none; } .pf-tabmore { position: absolute; right: 0; top: 16px; bottom: 0; display: grid; place-items: center; width: 44px; padding-left: 14px; color: #536471; background: linear-gradient(90deg, transparent, #fff 34%); } .dark .pf-tabmore { color: #9aa2b8; background: linear-gradient(90deg, transparent, #0f1115 34%); } .pf-tabmore:hover { color: #e63946; } /* Following, once you do. */ .pc-follow.on { color: #10b981; border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.08); } .pc-follow.on:hover { color: #e63946; border-color: rgba(230,57,70,.35); background: rgba(230,57,70,.08); } /* ── The action row ──────────────────────────────────── Pairs of icon-and-number, evenly spaced, with who reacted beside the share button rather than on its own line above. */ .pa-row { display: flex; align-items: center; gap: 18px; } .pa-row .pa-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; transition: background .15s, color .15s; } .pa-row .pa-btn:hover { background: rgba(0,0,0,.04); } .dark .pa-row .pa-btn:hover { background: rgba(255,255,255,.06); } .pa-row .pa-count { margin-left: 0; } /* Straight after share and staying there — pushed right, they moved whenever the comment preview beside them changed width. */ .pa-wholiked { margin: 0 0 0 4px !important; flex: none; } /* The comment preview takes the leftover room instead. */ .pa-row a:has(> .pa-pill) { margin-left: auto; } /* ── Arranging the sidebar widgets ─────────────────── */ .adm .wd-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--border); cursor: grab; transition: all .16s; } .adm .wd-row:last-child { border-bottom: 0; } .adm .wd-row:hover { background: var(--surface-2, #f7f9fc); } .adm .wd-row.lifting { opacity: .4; cursor: grabbing; } .adm .wd-row.off b, .adm .wd-row.off em { opacity: .45; } .adm .wd-grip { color: var(--text-muted); flex: none; } .adm .wd-row b { display: block; font-size: 13.5px; font-weight: 700; } .adm .wd-row em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 2px; } .adm .wd-eye { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; color: var(--text-muted); } .adm .wd-eye:hover { color: var(--primary); background: var(--primary-soft); } /* Views, and reading in your own language. */ .pa-views { display: inline-flex; align-items: center; gap: 4px; padding: 4px; color: inherit; } .pa-right { margin-left: auto; } .pa-translate.on { color: #e63946; } .pa-translated { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; font-weight: 600; color: #9ca3af; } .adm .wd-moves { display: flex; flex-direction: column; gap: 1px; flex: none; } .adm .wd-move { display: grid; place-items: center; width: 26px; height: 20px; border-radius: 6px; color: var(--text-muted); } .adm .wd-move:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); } .adm .wd-move:disabled { opacity: .25; } .adm .ps-note-inline { font-size: 13px; font-weight: 600; color: #059669; } /* ── The foot of the right-hand column ─────────────── */ .rf-card { padding: 4px 6px 24px; } .rf-copy { font-size: 12px; color: #9ca3af; margin-bottom: 10px; } .rf-links { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 14px; } .rf-links a { font-size: 12.5px; color: #6b7280; } .dark .rf-links a { color: #8d94a8; } .rf-links a:hover { color: #e63946; text-decoration: underline; } .rf-langs { display: flex; flex-wrap: wrap; gap: 7px; } .rf-lang { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #6b7280; border: 1px solid #e6e8ef; transition: all .16s; } .dark .rf-lang { color: #8d94a8; border-color: #242a3d; } .rf-lang:hover { border-color: #e63946; color: #e63946; } .rf-lang.on { color: #0f1419; font-weight: 700; border-color: #0f1419; } .dark .rf-lang.on { color: #e7e9ea; border-color: #e7e9ea; } .rf-lang i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* A YouTube video played in the post. */ .pv-embed { position: relative; margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; } .pv-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* A count of posts waiting, above the feed. */ .np-banner { position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; margin: 0 auto 10px; padding: 9px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff; background: #e63946; box-shadow: 0 6px 22px rgba(230,57,70,.35); animation: npIn .25s cubic-bezier(.2,1.1,.3,1) both; } .np-banner:hover { background: #d12b39; } @keyframes npIn { from { opacity: 0; transform: translateY(-8px); } } /* The translate button catches the eye once, then settles. */ .pa-translate { animation: paTr 2.4s ease-in-out 2; } @keyframes paTr { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.16) rotate(-6deg); } 16% { transform: scale(1) rotate(0); } } /* Follow, on a row in the reactor list. */ .lk-follow { flex: none; padding: 6px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: #e63946; transition: all .18s; } .lk-follow:hover { background: #d12b39; } .lk-follow.on { color: #10b981; background: rgba(16,185,129,.1); } .lk-follow.on:hover { color: #e63946; background: rgba(230,57,70,.1); } /* The post's words, with a small translate button at the bottom right — where the reference puts it, out of the way of the first line. */ .pc-body { position: relative; padding-bottom: 2px; } .pc-body .pa-translate { position: absolute; right: 2px; bottom: -4px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 8px; color: #9ca3af; } .pc-body .pa-translate svg { width: 17px; height: 17px; } .pc-body .pa-translate:hover { color: #e63946; background: rgba(230,57,70,.08); } .pc-body .pa-translate.on { color: #e63946; } .pc-body > p { padding-right: 34px; } /* The translation, under what was actually written. */ .pc-translation { margin: 10px 1px 2px; padding: 10px 13px; border-left: 3px solid #e6e8ef; } .dark .pc-translation { border-color: #2f3441; } .pc-tlabel { display: block; font-size: 11.5px; font-weight: 700; color: #9ca3af; margin-bottom: 4px; } .pc-translation p { font-size: 15px; line-height: 1.55; white-space: pre-wrap; } /* ── The bar at the top of the feed ────────────────── */ .cpt { padding: 4px 2px 10px; } .cpt-top { display: flex; align-items: center; gap: 13px; } .cpt-ask { flex: 1; min-width: 0; text-align: left; } .cpt-ask b { display: block; font-size: 17px; font-weight: 700; } .cpt-ask b i { font-style: normal; color: #e63946; } .cpt-ask em { display: block; font-style: normal; font-size: 13px; color: #9ca3af; margin-top: 2px; } .cpt-post { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: #e63946; transition: background .18s; } .cpt-post:hover { background: #d12b39; } .cpt-tools, .cpt-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .cpt-extra { padding-top: 10px; border-top: 1px solid #eef0f5; animation: cptIn .18s ease both; } .dark .cpt-extra { border-color: #242a3d; } @keyframes cptIn { from { opacity: 0; transform: translateY(-4px); } } .cpt-tool { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 96px; justify-content: center; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600; background: #f4f6fb; transition: all .18s; } .dark .cpt-tool { background: #1a1f31; } .cpt-tool svg { color: var(--tone, #9ca3af); } .cpt-tool:hover { background: #eaeef7; } .dark .cpt-tool:hover { background: #222840; } .cpt-more { flex: none; min-width: 0; border: 1px solid #e6e8ef; background: transparent; } .dark .cpt-more { border-color: #2f3441; } @media (max-width: 620px) { .cpt-tool { min-width: 0; padding: 10px; } .cpt-tool { font-size: 0; gap: 0; } .cpt-tool svg { width: 21px; height: 21px; } } /* The leaderboard, in a card like every other page. */ .lb-page { width: 100%; max-width: 760px; padding: 16px 12px 40px; } .lb-card { padding: 22px; border-radius: 18px; background: #fff; border: .8px solid #e6e8ef; } .dark .lb-card { background: #141827; border-color: #242a3d; } /* Translate, on a comment: small and at the end of its actions. */ .ct-translate { float: right; margin-top: -4px; } .ct-translate .pa-translate { width: 24px; height: 24px; padding: 0; border-radius: 7px; color: #9ca3af; } .ct-translate .pa-translate svg { width: 15px; height: 15px; } .ct-translation { margin: 8px 0 4px; padding: 8px 11px; } .ct-translation p { font-size: 14px; } /* What went wrong, said out loud rather than silently. */ .pa-tproblem { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; padding: 7px 11px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #fff; background: #0f1419; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .dark .pa-tproblem { background: #2f3441; } .adm .tt-results { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .adm .tt-results p { padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.5; } .adm .tt-ok { color: #065f46; background: #d1fae5; } .adm .tt-bad { color: #991b1b; background: #fee2e2; } .adm .tt-note { color: var(--text-muted); background: var(--surface-2, #f4f6fb); } /* ── The admin menu ──────────────────────────────────── Groups open and close; the one you're in opens itself, so a page is never hidden behind a closed heading. */ .adm-headbtn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8b93a7; text-align: left; transition: color .15s; } .adm-headbtn:hover { color: #cbd2e0; } .adm-headbtn.open { color: #cbd2e0; } .adm-chev { margin-left: auto; transition: transform .22s ease; opacity: .6; } .adm-headbtn.open .adm-chev { transform: rotate(180deg); } .adm-headcount { padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fff; background: #e63946; } /* One inner wrapper, because grid-template-rows: 0fr only sizes the first row — with one item per link the rest stayed at full height and nothing collapsed. */ .adm-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.3,1,.4,1); } .adm-items.open { grid-template-rows: 1fr; } .adm-inner { overflow: hidden; min-height: 0; } /* ── Categories under a module ─────────────────────── */ .adm .cat-add { display: flex; gap: 10px; } .adm .cat-add input { flex: 1; padding: 11px 14px; border-radius: 10px; font-size: 14px; border: 1px solid var(--border); background: var(--surface); } .adm .cat-head, .adm .cat-row { display: grid; align-items: center; gap: 12px; grid-template-columns: 34px 1fr 44px 36px; padding: 11px 4px; border-bottom: 1px solid var(--border); } .adm .cat-head { margin-top: 18px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); } .adm .cat-list { display: flex; flex-direction: column; } .adm .cat-row:last-child { border-bottom: 0; } .adm .cat-row.off b { opacity: .45; } .adm .cat-moves { display: flex; flex-direction: column; gap: 1px; flex: none; } .adm .cat-moves button { display: grid; place-items: center; width: 24px; height: 18px; border-radius: 5px; color: var(--text-muted); } .adm .cat-moves button:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); } .adm .cat-moves button:disabled { opacity: .25; } .adm .cat-name { flex: 1; min-width: 0; text-align: left; } .adm .cat-name b { display: block; font-size: 14px; font-weight: 600; } .adm .cat-name em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-muted); } .adm .cat-edit { flex: 1; padding: 8px 12px; border-radius: 8px; font-size: 14px; border: 1px solid var(--primary); background: var(--surface); } .adm .cat-eye, .adm .cat-del { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--text-muted); } .adm .cat-eye:hover { color: var(--primary); background: var(--primary-soft); } .adm .cat-del:hover { color: #dc2626; background: #fee2e2; } /* ── Plugins ───────────────────────────────────────── */ .adm .pl-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--border); } .adm .pl-row:last-child { border-bottom: 0; } .adm .pl-row b { display: block; font-size: 14px; font-weight: 700; } .adm .pl-row em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .adm .pl-state { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); background: var(--surface-2, #f1f3f8); } .adm .pl-state.on { color: #059669; background: #d1fae5; } .adm .shop-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .adm .shop-card { display: block; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: all .18s; } .adm .shop-card:hover { border-color: var(--primary); transform: translateY(-2px); } .adm .shop-card b { display: block; font-size: 15px; font-weight: 800; } .adm .shop-card em { display: block; font-style: normal; font-size: 13px; color: var(--text-muted); margin: 6px 0 14px; line-height: 1.5; } .adm .shop-go { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--primary); } /* ── Themes ────────────────────────────────────────── */ .adm .th-table { padding: 0 !important; overflow: hidden; } .adm .th-head, .adm .th-row { display: grid; align-items: center; gap: 14px; grid-template-columns: 76px 1fr 130px 100px 150px 44px; padding: 12px 18px; } .adm .th-head { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); } .adm .th-row { border-bottom: 1px solid var(--border); } .adm .th-row:last-child { border-bottom: 0; } .adm .th-row.is-default { background: var(--primary-soft, #fef2f3); } .adm .th-thumb img, .adm .th-thumb i { display: block; width: 64px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); } .adm .th-name b { display: block; font-size: 14px; font-weight: 700; } .adm .th-name em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-muted); } .adm .th-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--primary); background: #fff; } .adm .th-make, .adm .th-pick { padding: 6px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: var(--surface-2, #f1f3f8); } .adm .th-make:hover { color: var(--primary); background: var(--primary-soft); } .adm .th-pick { display: inline-flex; align-items: center; gap: 5px; } .adm .th-pick.on { color: #059669; background: #d1fae5; } /* Update: quiet until there is something to install. */ .adm .th-update { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: var(--surface-2, #f1f3f8); } .adm .th-update:hover { color: var(--primary); background: var(--primary-soft); } .adm .th-update.has-new { color: #fff; background: var(--primary); } .adm .th-update.has-new:hover { color: #fff; filter: brightness(1.06); } .adm .th-update:disabled { opacity: .6; } .adm .th-none { color: var(--text-muted); font-size: 13px; } .adm .th-note { margin: 0 0 14px; padding: 11px 15px; border-radius: 12px; font-size: 13px; color: var(--primary); background: var(--primary-soft, #fef2f3); } .adm .th-update .spin { animation: thSpin 1s linear infinite; } @keyframes thSpin { to { transform: rotate(360deg); } } @media (max-width: 820px) { .adm .th-head { display: none; } .adm .th-row { grid-template-columns: 64px 1fr auto; row-gap: 8px; } .adm .th-head, .adm .th-row { gap: 10px; } } /* ── Memberships ───────────────────────────────────── */ .adm .sub-earned { padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #059669; background: #d1fae5; } .adm .tier-grid { display: grid; gap: 14px; margin-bottom: 4px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .adm .tier-card { padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); } .adm .tier-card.paid { border-color: var(--primary); } .adm .tier-card b { display: block; font-size: 16px; font-weight: 800; } .adm .tier-price { display: block; font-size: 13px; color: var(--text-muted); margin: 3px 0 12px; } .adm .tier-card ul { display: flex; flex-direction: column; gap: 7px; } .adm .tier-card li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); } .adm .tier-card li svg { flex: none; margin-top: 2px; color: #10b981; } .adm .sub-found, .adm .sub-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); } .adm .sub-row:last-child { border-bottom: 0; } .adm .sub-found b, .adm .sub-row b { display: block; font-size: 14px; font-weight: 700; } .adm .sub-found em, .adm .sub-row em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); } .adm .sub-give { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--primary); } .adm .sub-tier { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; text-transform: capitalize; color: var(--primary); background: var(--primary-soft); } .adm .sub-tier.lapsed { color: var(--text-muted); background: var(--surface-2, #f1f3f8); } .adm .sub-revoke { flex: none; padding: 6px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .adm .sub-revoke:hover { color: #dc2626; background: #fee2e2; } /* ── Withdrawals ───────────────────────────────────── */ .adm .wd-owed { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #b45309; background: #fef3c7; } .adm .wd-tabs { display: flex; gap: 6px; margin-bottom: 14px; } .adm .wd-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); background: var(--surface-2, #f1f3f8); } .adm .wd-tab.on { color: #fff; background: var(--primary); } .adm .wd-tab b { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(0,0,0,.08); } .adm .wd-tab.on b { background: rgba(255,255,255,.22); } .adm .wd-table { padding: 0 !important; } .adm .wd-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .adm .wd-row:last-child { border-bottom: 0; } .adm .wd-row b { display: block; font-size: 14px; font-weight: 700; } .adm .wd-row em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); } .adm .wd-method { flex: none; min-width: 120px; text-transform: capitalize; } .adm .wd-method em { text-transform: none; } .adm .wd-amount { flex: none; font-size: 16px; font-weight: 800; } .adm .wd-actions { display: flex; gap: 7px; flex: none; } .adm .wd-pay { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: #10b981; } .adm .wd-pay:hover { background: #059669; } .adm .wd-refuse { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text-muted); } .adm .wd-refuse:hover { color: #dc2626; background: #fee2e2; } .adm .wd-state { flex: none; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; } .adm .wd-state.paid { color: #059669; background: #d1fae5; } .adm .wd-state.refused { color: #991b1b; background: #fee2e2; } @media (max-width: 900px) { .adm .wd-row { flex-wrap: wrap; } .adm .wd-method { min-width: 0; } } /* ── Funding ───────────────────────────────────────── */ .adm .fd-total { padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #059669; background: #d1fae5; } .adm .fd-note { margin-bottom: 12px; font-size: 13px; color: var(--text-muted); } .adm .fd-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .adm .fd-row:last-child { border-bottom: 0; } .adm .fd-about { flex: 1; min-width: 0; } .adm .fd-about b { font-size: 14.5px; font-weight: 700; } .adm .fd-about b:hover { color: var(--primary); } .adm .fd-about em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 2px; } .adm .fd-bar { display: block; height: 6px; margin: 9px 0 6px; border-radius: 999px; background: var(--surface-2, #eef1f6); overflow: hidden; } .adm .fd-bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width .4s ease; } .adm .fd-bar i.met { background: #10b981; } .adm .fd-figures { display: flex; align-items: center; gap: 4px; font-weight: 600; } .adm .fd-state { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface-2, #f1f3f8); } .adm .fd-state.met { color: #059669; background: #d1fae5; } .adm .fd-state.short { color: #b45309; background: #fef3c7; } /* ── Earnings ──────────────────────────────────────── */ .adm .ea-total { display: inline-flex; align-items: center; gap: 7px; padding: 8px 17px; border-radius: 999px; font-size: 15px; font-weight: 800; color: #059669; background: #d1fae5; } .adm .ea-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .adm .ea-card { padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); } .adm .ea-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; margin-bottom: 12px; } .adm .ea-card b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .adm .ea-card em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .adm .ea-bar { display: block; height: 4px; margin: 12px 0 7px; border-radius: 999px; background: var(--surface-2, #eef1f6); overflow: hidden; } .adm .ea-bar i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; } .adm .ea-share { font-size: 11.5px !important; } .adm .ea-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); } .adm .ea-row:last-child { border-bottom: 0; } .adm .ea-dot { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; color: #fff; } .adm .ea-row b { display: block; font-size: 13.5px; font-weight: 700; } .adm .ea-row em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm .ea-when { flex: none; font-size: 12px; color: var(--text-muted); } .adm .ea-amount { flex: none; min-width: 76px; text-align: right; font-size: 14.5px; font-weight: 800; color: #059669; } .adm .th-top { display: flex; align-items: center; gap: 10px; } .adm .th-buy { display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); } .adm .th-buy:hover { color: var(--primary); border-color: var(--primary); } /* Editing a tier's name and price in place. */ .adm .tier-name-in { width: 100%; font-size: 16px; font-weight: 800; padding: 4px 8px; margin: -4px -8px 0; border-radius: 8px; background: transparent; border: 1px solid transparent; } .adm .tier-name-in:hover, .adm .tier-name-in:focus { border-color: var(--border); background: var(--surface); } .adm .tier-price-in { display: flex; align-items: baseline; gap: 5px; margin: 4px 0 12px; } .adm .tier-price-in input { width: 74px; padding: 4px 8px; border-radius: 8px; font-size: 13px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); } .adm .tier-price-in em { font-style: normal; font-size: 13px; color: var(--text-muted); } /* A membership badge beside a name. */ .tier-badge { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 8px; line-height: 1; color: #fff; vertical-align: middle; } .tier-badge.pro { background: linear-gradient(135deg, #f59e0b, #f97316); } .tier-badge.ultra { background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 0 0 2px rgba(139,92,246,.18); } /* The upgrade card, white like the rest of the column rather than grey. */ .rr-rail .rr-card { background: #fff !important; } .dark .rr-rail .rr-card { background: #141827 !important; } /* ── An advert in the feed ───────────────────────────── Marked plainly. A post that looks like a post but isn't is the thing people resent most, and honesty costs nothing. */ .ad-slot { display: block; margin: 8px 0; padding: 16px; border-radius: 16px; border: 1px solid #e6e8ef; background: #fff; transition: border-color .18s; } .dark .ad-slot { background: #141827; border-color: #242a3d; } .ad-slot:hover { border-color: #e63946; } .ad-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; } .ad-head b { display: block; font-size: 14px; font-weight: 700; } .ad-head em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9ca3af; } .ad-out { margin-left: auto; color: #9ca3af; } .ad-title { font-size: 15px; font-weight: 700; line-height: 1.4; } .ad-body { font-size: 14px; line-height: 1.55; color: #6b7280; margin-top: 4px; } .dark .ad-body { color: #9aa2b8; } .ad-image { margin-top: 12px; border-radius: 12px; width: 100%; max-height: 300px; object-fit: cover; } /* ── Writing on a colour ───────────────────────────── */ .cp-inbox { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 7px; } .cp-tool { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #6b7280; border: 1px solid #e6e8ef; background: #fff; transition: all .16s; } .dark .cp-tool { background: #1a1f31; border-color: #2f3441; color: #9aa2b8; } .cp-tool:hover { color: #e63946; border-color: #e63946; } .cp-tool.on { color: #fff; background: #e63946; border-color: #e63946; } .cp-colours { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; } .cp-colour { width: 34px; height: 34px; border-radius: 10px; border: 2px solid transparent; transition: transform .16s; } .cp-colour:hover { transform: scale(1.08); } .cp-colour.on { border-color: #0f1419; } .dark .cp-colour.on { border-color: #fff; } /* The post itself, written on a colour. */ .pc-bg { display: grid; place-items: center; min-height: 200px; margin-top: 12px; padding: 30px 26px; border-radius: 16px; font-size: 22px; font-weight: 700; line-height: 1.4; text-align: center; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.2); white-space: pre-wrap; } .pc-bg.bg-sunset { background: linear-gradient(135deg,#f97316,#ec4899); } .pc-bg.bg-ocean { background: linear-gradient(135deg,#0ea5e9,#6366f1); } .pc-bg.bg-forest { background: linear-gradient(135deg,#10b981,#0d9488); } .pc-bg.bg-berry { background: linear-gradient(135deg,#8b5cf6,#d946ef); } .pc-bg.bg-ember { background: linear-gradient(135deg,#dc2626,#f59e0b); } .pc-bg.bg-slate { background: linear-gradient(135deg,#334155,#0f172a); } .pc-body.on-colour > p { padding-right: 0; } /* Adverts waiting on approval. */ .adm .ad-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--border); } .adm .ad-row:last-child { border-bottom: 0; } .adm .ad-row b { display: block; font-size: 14px; font-weight: 700; } .adm .ad-row em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); } .adm .ad-copy { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm .ad-numbers { flex: none; min-width: 52px; text-align: center; } .adm .ad-numbers b { font-size: 16px; font-weight: 800; } .adm .ad-numbers em { font-size: 11px; } .adm .ad-pause { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-muted); background: var(--surface-2, #f1f3f8); } .adm .ad-pause:hover { color: #b45309; background: #fef3c7; } /* Announcements in the admin panel. */ .adm .an-fields { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } @media (max-width: 700px) { .adm .an-fields { grid-template-columns: 1fr; } } .adm .an-item { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border); } .adm .an-item:last-child { border-bottom: 0; } .adm .an-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; } .adm .an-dot.info { background: #3b82f6; } .adm .an-dot.warning { background: #f59e0b; } .adm .an-dot.success { background: #10b981; } .adm .an-item b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm .an-item em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .adm .an-live { font-weight: 800; color: #059669; } /* ── Create post, built to the reference ─────────────── A header, one large writing box with its tools in the corner, then a row of named tools and who can see it. */ .cp-header { display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 16px; border-bottom: 1px solid #eef0f5; } .dark .cp-header { border-color: #242a3d; } .cp-close { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: #0f1419; background: #f1f3f8; transition: background .16s; } .dark .cp-close { color: #e7e9ea; background: #1a1f31; } .cp-close:hover { background: #e5e8f0; } .cp-header .cp-title { flex: 1; text-align: center; font-size: 19px; font-weight: 800; } .cp-header .cp-post { flex: none; padding: 11px 26px; border-radius: 999px; font-size: 15px; font-weight: 700; color: #fff; background: #cbd0dc; } .cp-header .cp-post.ready { background: #e63946; } .cp-header .cp-post.ready:hover { background: #d12b39; } /* The writing box: one bordered area with its tools in the corner, as in the reference — rather than floating loose in the panel. */ .cp-write { position: relative; margin: 16px; padding: 16px 16px 60px; border-radius: 14px; border: 1px solid #e6e8ef; transition: background .25s; } /* On a colour: what's typed is centred and white, so what you see while writing is what the post will look like. */ .cp-write.on-colour { border-color: transparent; } .cp-write.on-colour textarea { min-height: 190px; color: #fff; font-size: 22px; font-weight: 700; text-align: center; } .cp-write.on-colour textarea::placeholder { color: rgba(255,255,255,.75); } .cp-write[data-bg="sunset"] { background: linear-gradient(135deg,#f97316,#ec4899); } .cp-write[data-bg="ocean"] { background: linear-gradient(135deg,#0ea5e9,#6366f1); } .cp-write[data-bg="forest"] { background: linear-gradient(135deg,#10b981,#0d9488); } .cp-write[data-bg="berry"] { background: linear-gradient(135deg,#8b5cf6,#d946ef); } .cp-write[data-bg="ember"] { background: linear-gradient(135deg,#dc2626,#f59e0b); } .cp-write[data-bg="slate"] { background: linear-gradient(135deg,#334155,#0f172a); } /* The tools stay readable on any of them. */ .cp-write.on-colour .cp-tool { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.28); color: #fff; } .cp-write.on-colour .cp-tool.on { background: #fff; color: #0f1419; } .dark .cp-write { border-color: #2f3441; } .cp-write textarea { width: 100%; min-height: 150px; font-size: 17px; line-height: 1.5; resize: none; background: none; outline: none; } .cp-inbox { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; } /* The named tools. */ .cp-bar { display: flex; align-items: center; gap: 16px; flex: none; padding: 14px 16px; border-top: 1px solid #eef0f5; } .dark .cp-bar { border-color: #242a3d; } .cp-tools { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 2px; min-width: 0; } .cp-tools::-webkit-scrollbar { display: none; } .cp-tool-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; padding: 4px 6px; font-size: 11.5px; font-weight: 600; color: #536471; transition: color .16s; } .dark .cp-tool-btn { color: #9aa2b8; } .cp-tool-box { display: grid; place-items: center; width: 42px; height: 38px; border-radius: 12px; border: 1px solid #e6e8ef; background: #fff; transition: all .16s; } .dark .cp-tool-box { background: #1a1f31; border-color: #2f3441; } .cp-tool-btn:hover { color: #e63946; } .cp-tool-btn:hover .cp-tool-box { border-color: #e63946; } .cp-tool-btn.on { color: #e63946; } .cp-tool-btn.on .cp-tool-box { color: #fff; background: #e63946; border-color: #e63946; } /* Who can see it, separated by a rule as in the reference. */ .cp-audience { flex: 0 0 auto; padding-left: 14px; border-left: 1px solid #eef0f5; } .dark .cp-audience { border-color: #242a3d; } .cp-audience select { padding: 10px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; border: 1px solid #e6e8ef; background: #fff; cursor: pointer; } .dark .cp-audience select { background: #1a1f31; border-color: #2f3441; } .cp-audience select:hover { border-color: #e63946; } @media (max-width: 640px) { .cp-bar { flex-direction: column; align-items: stretch; gap: 12px; } .cp-audience { padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid #eef0f5; } .cp-audience select { width: 100%; } } /* Who can see it, beside the writing tools rather than in the row below. */ .cp-who select { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; border: 1px solid #e6e8ef; background: #fff; cursor: pointer; } .dark .cp-who select { background: #1a1f31; border-color: #2f3441; } .cp-write.on-colour .cp-who select { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.28); color: #fff; } .cp-inbox { align-items: center; } /* The bottom row: icons on one line, no labels. */ .cp-bar { padding: 12px 16px; } .cp-tools { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; } .cp-tools::-webkit-scrollbar { display: none; } .cp-tool-btn { display: grid; place-items: center; width: 42px; height: 42px; flex: none; padding: 0; border-radius: 12px; border: 1px solid #e6e8ef; background: #fff; color: #536471; font-size: 0; } .dark .cp-tool-btn { background: #1a1f31; border-color: #2f3441; color: #9aa2b8; } .cp-tool-btn:hover { color: #e63946; border-color: #e63946; } .cp-tool-btn.on { color: #fff; background: #e63946; border-color: #e63946; } /* The emoji picker: a fixed grid rather than a list that runs off. */ .cp-emoji { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-height: 190px; overflow-y: auto; margin: 0 16px 8px; padding: 10px; border-radius: 12px; border: 1px solid #e6e8ef; } .dark .cp-emoji { border-color: #2f3441; } .cp-emoji button { display: grid; place-items: center; height: 34px; border-radius: 8px; font-size: 21px; } .cp-emoji button:hover { background: #f1f3f8; } .dark .cp-emoji button:hover { background: #242a3d; } /* The character count, when there's a reason to look at it. */ .cp-count { position: absolute; right: 26px; bottom: 74px; font-size: 12px; font-weight: 700; color: #9ca3af; } /* The audience picker: no gap between the word and its arrow. */ .cp-who select { height: 34px; padding: 0 26px 0 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; border: 1px solid #e6e8ef; background: #fff; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23536471' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } .dark .cp-who select { background-color: #1a1f31; border-color: #2f3441; } .cp-write.on-colour .cp-who select { background-color: rgba(0,0,0,.28); border-color: rgba(255,255,255,.28); color: #fff; } /* White among the colours, with a border so it's visible on white. */ .cp-colour[style*="#ffffff"] { border-color: #d5d8e0; } /* ── The composer's newer tools ────────────────────── */ .cp-attached { position: relative; margin: 0 16px 12px; border-radius: 14px; overflow: hidden; background: #000; } .cp-attached video { display: block; width: 100%; max-height: 300px; } .cp-attached.audio { padding: 14px; background: #f4f6fb; } .dark .cp-attached.audio { background: #1a1f31; } .cp-attached audio { width: 100%; } .cp-attached > button { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.6); } .cp-linkbox { display: flex; align-items: center; gap: 10px; margin: 0 16px 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid #e6e8ef; } .dark .cp-linkbox { border-color: #2f3441; } .cp-linkbox input { flex: 1; font-size: 14px; background: none; outline: none; } .cp-linkbox button { flex: none; padding: 7px 15px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff; background: #e63946; } .cp-linkbox button:disabled { opacity: .4; } .cp-feelings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 16px 12px; padding: 12px; border-radius: 12px; border: 1px solid #e6e8ef; } .dark .cp-feelings { border-color: #2f3441; } .cp-feelings button { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; } .cp-feelings button span { font-size: 18px; } .cp-feelings button:hover { background: #f1f3f8; } .dark .cp-feelings button:hover { background: #242a3d; } .cp-feelings button.on { color: #fff; background: #e63946; } @media (max-width: 560px) { .cp-feelings { grid-template-columns: repeat(2, 1fr); } } .cp-feeling-now { display: flex; align-items: center; gap: 8px; margin: 0 16px 12px; padding: 9px 14px; border-radius: 999px; width: fit-content; font-size: 13px; font-weight: 600; background: #f1f3f8; } .dark .cp-feeling-now { background: #1a1f31; } .cp-feeling-now button { color: #9ca3af; } .cp-feeling-now button:hover { color: #e63946; } /* Beside the name, on the post. */ .pc-feeling { font-size: 14px; font-weight: 400; color: #536471; } .dark .pc-feeling { color: #8d94a8; } .pc-place { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: #536471; } .dark .pc-place { color: #8d94a8; } /* Smaller boxes, the icons unchanged. */ .cp-tool-btn { width: 36px; height: 36px; border-radius: 10px; } /* An uploaded clip or track on a post. */ .pc-video { display: block; width: 100%; max-height: 480px; margin-top: 12px; border-radius: 16px; background: #000; } .pc-audio { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f4f6fb; } .dark .pc-audio { background: #1a1f31; } .pc-audio audio { flex: 1; height: 34px; } .pc-audio svg { color: #e63946; flex: none; } /* The feeling in the writing box: a label, not text. */ .cp-feeling-chip { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: #536471; background: #f1f3f8; } .dark .cp-feeling-chip { color: #9aa2b8; background: #1a1f31; } .cp-write.on-colour .cp-feeling-chip { color: #fff; background: rgba(0,0,0,.28); } .cp-feeling-chip b { font-weight: 700; } .cp-feeling-chip button { display: grid; place-items: center; margin-left: 2px; opacity: .6; } .cp-feeling-chip button:hover { opacity: 1; color: #e63946; } /* On the post, the feeling reads as part of the sentence. */ .pc-feeling b { font-weight: 700; color: #0f1419; } .dark .pc-feeling b { color: #e7e9ea; } /* Choosing where you are. */ .cp-place { margin: 0 16px 12px; } .cp-place .cp-linkbox { margin: 0; } .cp-places { display: flex; flex-direction: column; margin-top: 6px; border-radius: 12px; border: 1px solid #e6e8ef; overflow: hidden; } .dark .cp-places { border-color: #2f3441; } .cp-places button { display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 13.5px; text-align: left; border-bottom: 1px solid #eef0f5; } .dark .cp-places button { border-color: #242a3d; } .cp-places button:last-child { border-bottom: 0; } .cp-places button:hover { background: #f4f6fb; } .dark .cp-places button:hover { background: #1a1f31; } .cp-places svg { color: #e63946; flex: none; } /* ── What a badge means ──────────────────────────────── A symbol beside a name is only useful if people can find out what it stands for, and nobody reads a legend page. */ .bt-holder { display: inline-flex; align-items: center; position: relative; z-index: 5; } /* Above the profile card's own hover, which otherwise swallows it. */ .bt-tip { z-index: 10000; } .bt-tip { position: fixed; z-index: 9999; transform: translate(-50%, -100%); margin-top: -10px; max-width: 250px; padding: 9px 13px; border-radius: 11px; color: #fff; background: #0f1419; box-shadow: 0 8px 26px rgba(0,0,0,.28); pointer-events: none; animation: btIn .14s ease both; } .dark .bt-tip { background: #2f3441; } @keyframes btIn { from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)); } } .bt-tip b { display: block; font-size: 12.5px; font-weight: 800; } .bt-tip em { display: block; font-style: normal; font-size: 11.5px; line-height: 1.45; opacity: .78; margin-top: 3px; } /* A small arrow pointing at the badge. */ .bt-tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0f1419; } .dark .bt-tip::after { border-top-color: #2f3441; } /* Support: long text wrapped rather than running past the card. */ .sp-msg p, .ac-row b, .ac-row em { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; } .ac-row { align-items: flex-start; } .ac-row b { white-space: normal; } /* How many are waiting, on an approvals tab. */ .adm .ap-count { margin-left: 7px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: #e63946; } /* Verification photos: large enough to actually check, and clickable for the full size. One without the other proves nothing, so both show. */ .adm .ac-photos { display: flex; gap: 10px; flex: none; } .adm .ac-photos a { display: block; position: relative; } .adm .ac-photos img { display: block; width: 96px; height: 96px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); transition: transform .18s; } .adm .ac-photos a:hover img { transform: scale(1.03); } .adm .ac-photos em { display: block; margin-top: 4px; font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); text-align: center; } @media (max-width: 720px) { .adm .ac-photos img { width: 72px; height: 72px; } } /* Instagram is tall, like a reel. */ .pv-embed.instagram { aspect-ratio: 4 / 5; max-height: 620px; } /* A tall video sits in a soft field rather than an empty column. */ .pv-frame { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 12px; aspect-ratio: 4 / 5; max-height: 640px; border-radius: 16px; overflow: hidden; background: #0b0d12; } .pv-glow { position: absolute; inset: -20%; background: radial-gradient(50% 50% at 30% 25%, rgba(236,72,153,.45), transparent 70%), radial-gradient(50% 50% at 72% 70%, rgba(99,102,241,.4), transparent 70%), #0d1220; filter: blur(46px); } .pv-frame .pv-embed { position: relative; height: 100%; margin: 0; border-radius: 14px; box-shadow: 0 14px 44px rgba(0,0,0,.5); } .pv-frame .pv-embed.instagram { aspect-ratio: 9 / 16; max-height: none; } /* Instagram's embed carries a comment and share bar beneath the video. Scaling past the frame crops that away and leaves the video itself. */ .pv-embed.instagram { overflow: hidden; } .pv-embed.instagram iframe { width: 116%; height: 128%; margin-left: -8%; margin-top: -9%; border: 0; } /* Facebook's plugin sizes itself; this keeps it filling the frame. */ .pv-embed iframe[src*="facebook"] { width: 100%; height: 100%; border: 0; } /* A Facebook post can be any height, so it isn't forced to 16:9. */ .pv-embed.fb-post { aspect-ratio: auto; min-height: 420px; } /* ── The shop ────────────────────────────────────────── Themes and plugins, given room to look like something worth buying rather than a list of filenames. */ .adm .sh-skeleton { height: 200px; border-radius: 18px; margin-bottom: 18px; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2, #eef1f6) 50%, var(--surface) 70%); background-size: 220% 100%; animation: shShimmer 1.3s linear infinite; } @keyframes shShimmer { to { background-position: -220% 0; } } /* One thing given room, when the catalogue marks it. */ .adm .sh-featured { display: grid; grid-template-columns: 42% 1fr; gap: 0; margin-bottom: 20px; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); } .adm .sh-featured img { width: 100%; height: 100%; object-fit: cover; min-height: 230px; } .adm .sh-feat-body { padding: 26px; display: flex; flex-direction: column; justify-content: center; } .adm .sh-flag { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 4px 11px; margin-bottom: 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--primary); } .adm .sh-feat-body b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } .adm .sh-feat-body em { display: block; font-style: normal; font-size: 14px; color: var(--text-muted); margin-top: 4px; } .adm .sh-feat-body p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin-top: 12px; } .adm .sh-feat-foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; } @media (max-width: 860px) { .adm .sh-featured { grid-template-columns: 1fr; } .adm .sh-featured img { min-height: 180px; max-height: 220px; } } .adm .sh-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); } .adm .sh-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: all .2s; } .adm .sh-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.09); } .adm .sh-card.have { opacity: .78; } .adm .sh-card.have:hover { transform: none; border-color: var(--border); } .adm .sh-shot { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; } .adm .sh-shot.placeholder { display: grid; place-items: center; color: rgba(255,255,255,.6); background: linear-gradient(135deg, #6366f1, #ec4899); } .adm .sh-body { display: flex; flex-direction: column; flex: 1; padding: 15px; } .adm .sh-title { display: flex; align-items: baseline; gap: 8px; } .adm .sh-title b { font-size: 15px; font-weight: 800; } .adm .sh-title i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-muted); } .adm .sh-body em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; } .adm .sh-by { font-size: 11.5px !important; margin-top: 2px !important; } .adm .sh-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; } .adm .sh-install { padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: var(--primary); } .adm .sh-install:hover { background: #d12b39; } .adm .sh-price { font-size: 14px; font-weight: 800; } .adm .sh-have { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #059669; background: #d1fae5; } /* The key, asked for once something has been chosen. */ .adm .sh-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(15,20,25,.55); backdrop-filter: blur(3px); animation: shIn .16s ease both; } @keyframes shIn { from { opacity: 0; } } .adm .sh-modal { position: relative; width: 100%; max-width: 430px; padding: 28px; border-radius: 20px; background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: shUp .2s cubic-bezier(.2,1,.3,1) both; } @keyframes shUp { from { transform: translateY(10px); opacity: 0; } } .adm .sh-modal b { display: block; font-size: 19px; font-weight: 800; } .adm .sh-modal em { display: block; font-style: normal; font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 6px 0 18px; } .adm .sh-modal .cp-linkbox { margin: 0; } .adm .sh-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-muted); } .adm .sh-close:hover { background: var(--surface-2, #f1f3f8); } .adm .sh-go { width: 100%; justify-content: center; margin-top: 16px; } .adm .sh-problem { margin-top: 12px; padding: 10px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: #991b1b; background: #fee2e2; } .adm .sh-done { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 12px 15px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: #065f46; background: #d1fae5; } .adm .sh-offline { display: flex; align-items: flex-start; gap: 11px; } .adm .sh-offline b { display: block; font-size: 14px; } .adm .sh-offline em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; } .adm .sh-offline svg { flex: none; margin-top: 2px; color: #b45309; } /* ── Choosing a theme ─────────────────────────────── */ .ts-back { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(15, 20, 25, .5); backdrop-filter: blur(3px); animation: tsIn .16s ease both; } @keyframes tsIn { from { opacity: 0; } } .ts-panel { position: relative; width: 100%; max-width: 400px; padding: 26px; border-radius: 22px; background: #fff; box-shadow: 0 26px 70px rgba(0, 0, 0, .28); animation: tsUp .2s cubic-bezier(.2, 1, .3, 1) both; } .dark .ts-panel { background: #141827; } @keyframes tsUp { from { transform: translateY(10px); opacity: 0; } } .ts-panel > b { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; } .ts-panel > em { display: block; font-style: normal; font-size: 13px; color: #6b7280; margin: 6px 0 18px; line-height: 1.5; } .ts-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #9ca3af; } .ts-close:hover { background: #f1f3f8; } .ts-list { display: flex; flex-direction: column; gap: 8px; } .ts-option { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 14px; text-align: left; border: 1px solid #e6e8ef; transition: all .18s; } .dark .ts-option { border-color: #2f3441; } .ts-option:hover { border-color: #e63946; transform: translateY(-1px); } .ts-option.on { border-color: #e63946; background: rgba(230, 57, 70, .05); } .ts-option b { display: block; font-size: 14.5px; font-weight: 700; } .ts-option em { display: block; font-style: normal; font-size: 11.5px; color: #9ca3af; margin-top: 1px; } .ts-option svg { color: #e63946; flex: none; } /* The tile beside each theme's name. Wide rather than square, because what it now holds is a picture of a page: a 40px square could only ever be a colour. The gradient stays as the backdrop, so a theme shipping no preview -- and one whose preview fails to load -- still shows something deliberate instead of a hole. */ .ts-swatch { position: relative; width: 78px; height: 52px; flex: none; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #6366f1, #ec4899); box-shadow: inset 0 0 0 1px rgba(15, 20, 25, .08); } .ts-swatch.default { background: linear-gradient(135deg, #e63946, #0f1419); } .ts-swatch[data-theme="golden"] { background: linear-gradient(135deg, #FF4B5C, #F6F5F2); } .ts-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .dark .ts-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); } /* A preview is a picture of a light page; on the selected row the coral ring is what marks the choice, so the tile itself needs no highlight. */ .ts-option.on .ts-swatch { box-shadow: inset 0 0 0 1px rgba(230, 57, 70, .35); } .ts-none { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: #9ca3af; } /* ===== Primary buttons: an honest disabled state ===== .cl-post (Publish, Post, Create listing, Save…) faded the red button to half opacity, which reads as pale pink with white text on it — you can't tell whether it's a button, and you can't read the label. A disabled button now looks disabled: grey, no shadow, no lift. */ .cl-post:disabled, .ps-save:disabled, .ab-new:disabled, .btn-primary:disabled, .bl-draft:disabled { opacity: 1; background: #ececf1; color: #a1a1aa; box-shadow: none; transform: none; cursor: not-allowed; } .dark .cl-post:disabled, .dark .ps-save:disabled, .dark .ab-new:disabled, .dark .btn-primary:disabled, .dark .bl-draft:disabled { background: #23232b; color: #6b6b76; } /* Beside "Save draft" it stretched the whole width of the dialog. */ .bl-foot-btns .cl-post { width: auto; flex: 1 1 auto; } /* ===== Blogs: a grid, and a "most read" column beside it ===== The list was one article per full-width row, each opening with a block of loud gradient where a cover should be. */ .bl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; padding-bottom: 30px; } @media (max-width: 1100px) { .bl-cols { grid-template-columns: minmax(0, 1fr); } } .bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 760px) { .bl-grid { grid-template-columns: minmax(0, 1fr); } } /* The card becomes a tile: cover on top, text under it. */ .bl-grid .bl-card { display: flex; flex-direction: column; gap: 13px; padding: 14px; } .bl-grid .bl-cover { width: 100%; height: 168px; } .bl-nocover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #a1a1aa; background: #f4f4f7; } .dark .bl-nocover { background: #1b1b21; color: #6b6b76; } .bl-nocover svg { color: #c7c7cf; } .dark .bl-nocover svg { color: #3f3f46; } .bl-side { position: sticky; top: 96px; } .bl-sidecard { border-radius: 20px; padding: 16px 16px 8px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); } .dark .bl-sidecard { background: #16161a; border-color: #2b2b33; } .bl-sidecard h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 8px; } .bl-sideempty { font-size: 13px; color: #a1a1aa; padding: 6px 0 12px; } .bl-sirow { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid #f1f1f4; } .dark .bl-sirow { border-color: #26262b; } .bl-sirow:last-child { border-bottom: 0; } .bl-sirow > b { font-size: 13px; font-weight: 700; color: #c7c7cf; width: 12px; flex: none; } .bl-sirow > span { flex: 1; min-width: 0; } .bl-sirow em { display: block; font-style: normal; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bl-sirow i { display: block; font-style: normal; font-size: 11.5px; color: #a1a1aa; margin-top: 3px; } .bl-sireads { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11.5px; font-weight: 700; color: #71717a; } .bl-sirow:hover em { color: #e63946; } /* ===== A community's "say something" row ===== It was a bare bordered strip the width of the page with a violet pill floating at the end. Now it reads as a composer: a card, a rounded field, and the button beside it. */ .cm-composer { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin-bottom: 14px; border-radius: 20px; text-align: left; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); transition: border-color .2s, box-shadow .2s, transform .2s; } .cm-composer:hover { border-color: #dcdce4; box-shadow: 0 8px 22px rgba(0,0,0,.07); } .dark .cm-composer { background: #16161a; border-color: #2b2b33; box-shadow: 0 2px 14px rgba(0,0,0,.4); } .dark .cm-composer:hover { border-color: #3a3a44; } .cm-composer-pill { flex: 1; min-width: 0; height: 44px; line-height: 44px; padding: 0 16px; border-radius: 999px; background: #f4f4f7; color: #a1a1aa; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .2s; } .cm-composer:hover .cm-composer-pill { background: #eeeef3; } .dark .cm-composer-pill { background: #1b1b21; color: #71717a; } .dark .cm-composer:hover .cm-composer-pill { background: #22222a; } /* ===== Leaderboard: a podium, then the table ===== Was one flat list with a trophy beside the first three. */ .lb-page { width: 100%; max-width: 1000px; margin: 0 auto; padding: 18px 12px 40px; display: flex; flex-direction: column; gap: 18px; } .lb-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); } .dark .lb-head { background: #16161a; border-color: #2b2b33; } .lb-headtext { flex: 1; min-width: 200px; } .lb-headtext h1 { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; } .lb-headtext h1 svg { color: #f0a93b; } .lb-headtext p { font-size: 13.5px; color: #8a857e; margin-top: 3px; } .lb-filters { display: flex; gap: 8px; flex-wrap: wrap; } .lb-filter { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #6b665f; background: #f4f4f7; transition: transform .2s, background .2s, color .2s; } .dark .lb-filter { background: #1b1b21; color: #a1a1aa; } .lb-filter:hover { transform: translateY(-2px); } .lb-filter.on { color: #fff; background: #14161a; } .dark .lb-filter.on { color: #14161a; background: #ededea; } .lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; padding: 14px 0 8px; } @media (max-width: 720px) { .lb-podium { grid-template-columns: 1fr; } } .lb-pod { display: flex; flex-direction: column; align-items: center; padding: 22px 18px; border-radius: 26px; text-align: center; border: 1px solid #e9e9ee; background: #fff; box-shadow: 0 18px 40px rgba(20,22,26,.07); transition: box-shadow .25s, translate .25s; } .dark .lb-pod { background: #16161a; border-color: #2b2b33; box-shadow: 0 18px 40px rgba(0,0,0,.45); } .lb-pod:hover { box-shadow: 0 26px 54px rgba(20,22,26,.13); } .lb-pod.gold { background: linear-gradient(165deg, #FFF8E8, #FFFFFF); border-color: rgba(240,169,59,.28); } .dark .lb-pod.gold { background: linear-gradient(165deg, #241f14, #16161a); border-color: rgba(240,169,59,.3); } .lb-pod.silver { background: linear-gradient(165deg, #F5F6F8, #FFFFFF); border-color: rgba(20,22,26,.10); } .dark .lb-pod.silver { background: linear-gradient(165deg, #1b1d22, #16161a); } .lb-pod.bronze { background: linear-gradient(165deg, #FDF1E7, #FFFFFF); border-color: rgba(205,127,50,.24); } .dark .lb-pod.bronze { background: linear-gradient(165deg, #241b14, #16161a); border-color: rgba(205,127,50,.28); } .lb-medal { font-size: 26px; line-height: 1; } .lb-podface { display: block; margin-top: 10px; } .lb-podname { display: block; margin-top: 12px; font-size: 16px; font-weight: 700; } .lb-podhandle { display: block; font-style: normal; font-size: 12.5px; color: #8a857e; margin-top: 3px; } .lb-podscore { display: block; margin-top: 10px; font-size: 20px; font-weight: 800; } .lb-pod.gold .lb-podscore { color: #E0A020; } .lb-pod.silver .lb-podscore { color: #7A7F87; } .lb-pod.bronze .lb-podscore { color: #C1783C; } .lb-podunit { display: block; font-style: normal; font-size: 11.5px; color: #a29c94; } .lb-row { display: flex; align-items: center; gap: 14px; padding: 11px 8px; border-bottom: 1px solid #f1f1f4; border-radius: 14px; transition: background .2s; } .dark .lb-row { border-color: #26262b; } .lb-row:last-child { border-bottom: 0; } .lb-row:hover { background: #fbfbfd; } .dark .lb-row:hover { background: #1b1b21; } .lb-rank { width: 26px; flex: none; font-size: 13.5px; font-weight: 700; color: #c9c3ba; text-align: center; } .lb-who { flex: 1; min-width: 0; } .lb-who b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; } .lb-who em { display: block; font-style: normal; font-size: 11.5px; color: #8a857e; } .lb-crown { font-style: normal; font-size: 12px; } .lb-score { flex: none; text-align: right; font-size: 15px; font-weight: 700; } .lb-score em { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; color: #a29c94; } .lb-only { padding: 18px 0 6px; text-align: center; font-size: 13px; color: #a1a1aa; } /* ===== Wallet ===== */ .wa-page { width: 100%; max-width: 1000px; margin: 0 auto; padding: 18px 12px 40px; display: flex; flex-direction: column; gap: 18px; } .wa-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; } @media (max-width: 860px) { .wa-top { grid-template-columns: minmax(0, 1fr); } } .wa-balance { position: relative; overflow: hidden; padding: 26px; border-radius: 26px; color: #fff; background: linear-gradient(155deg, #14161A, #2A2438 62%, #3A2440); box-shadow: 0 22px 54px rgba(20,22,26,.24); } .wa-bloom { position: absolute; top: -80px; right: -40px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,75,92,.40), rgba(255,75,92,0) 68%); } .wa-balance-in { position: relative; } .wa-label { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); } .wa-amount { font-size: 44px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; } .wa-amount span { font-size: 20px; font-weight: 700; color: rgba(255,255,255,.7); } .wa-who { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; } .wa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .wa-act { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 15px; font-size: 13.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); transition: transform .2s, background .2s; } .wa-act:hover { transform: translateY(-2px); background: rgba(255,255,255,.2); } .wa-act.primary { color: #14161A; background: #fff; } .wa-act.primary:hover { background: #fff; } .wa-chart { padding: 22px; border-radius: 26px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); display: flex; flex-direction: column; } .dark .wa-chart { background: #16161a; border-color: #2b2b33; } .wa-chart h2 { font-size: 14.5px; font-weight: 700; } .wa-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 18px; flex: 1; } .wa-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; } .wa-bar span { display: block; width: 100%; border-radius: 8px; background: linear-gradient(180deg, #FF6B76, #FFD0D5); } .wa-bar em { font-style: normal; font-size: 10.5px; color: #8a857e; } .wa-charttotal { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f1f4; } .dark .wa-charttotal { border-color: #26262b; } .wa-charttotal b { font-size: 20px; font-weight: 800; } .wa-charttotal span { font-size: 12px; color: #8a857e; } .wa-error { font-size: 13px; color: #e11d48; background: #fef2f3; border-radius: 12px; padding: 10px 14px; } .dark .wa-error { background: rgba(225,29,72,.12); } .wa-premium, .wa-history { padding: 18px 22px; border-radius: 22px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); } .dark .wa-premium, .dark .wa-history { background: #16161a; border-color: #2b2b33; } .wa-histhead { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .wa-upgrade { flex: none; border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 700; color: #fff; background: #14161a; } .dark .wa-upgrade { color: #14161a; background: #ededea; } /* ===== Crowdfunding: four to a row, and what's already funded ===== */ .cf-page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px 12px 40px; display: flex; flex-direction: column; gap: 18px; } .cf-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); } .dark .cf-head { background: #16161a; border-color: #2b2b33; } .cf-headtext { flex: 1; min-width: 200px; } .cf-headtext h1 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; } .cf-headtext p { font-size: 13.5px; color: #8a857e; margin-top: 3px; } .cf-new { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 11px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff; background: #14161a; transition: transform .2s; } .dark .cf-new { color: #14161a; background: #ededea; } .cf-new:hover:not(:disabled) { transform: translateY(-2px); } .cf-new:disabled { opacity: 1; background: #ececf1; color: #a1a1aa; cursor: not-allowed; } .dark .cf-new:disabled { background: #23232b; color: #6b6b76; } .cf-empty { padding: 60px 0; text-align: center; font-size: 14px; color: #a1a1aa; } .cf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; } @media (max-width: 1180px) { .cf-cols { grid-template-columns: minmax(0, 1fr); } } .cf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 1000px) { .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .cf-grid { grid-template-columns: minmax(0, 1fr); } } .cf-card { display: flex; flex-direction: column; gap: 9px; padding: 16px; width: 100%; min-width: 0; justify-self: stretch; box-sizing: border-box; overflow-wrap: anywhere; border-radius: 20px; text-align: left; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; } .dark .cf-card { background: #16161a; border-color: #2b2b33; } .cf-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.10); } /* The tag sits above the title: side by side, a four-across card left the title two clipped words wide. */ .cf-cardtop { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; } .cf-cardtop b { font-size: 15px; font-weight: 700; line-height: 1.3; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cf-tag { align-self: flex-start; font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: #71717a; background: #f4f4f7; } .dark .cf-tag { background: #1f1f26; color: #a1a1aa; } .cf-desc { font-size: 13px; color: #8a857e; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* The cover photo, edge to edge across the top of the card. A campaign with no picture gets its initial on the same green the progress bar uses, so a row of cards keeps one height instead of stepping up and down depending on who uploaded what. */ .cf-art { position: relative; display: block; height: 140px; margin: -16px -16px 6px; border-radius: 20px 20px 0 0; overflow: hidden; background: #f4f4f7; } .dark .cf-art { background: #1f1f26; } .cf-art img { display: block; width: 100%; height: 100%; object-fit: cover; } .cf-artfall { display: grid; place-items: center; width: 100%; height: 100%; font-size: 38px; font-weight: 800; color: #fff; letter-spacing: -.02em; background: linear-gradient(140deg, #34d399, #14b8a6); } .cf-art .cf-tag { position: absolute; left: 10px; bottom: 10px; color: #14161a; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(0,0,0,.14); } .dark .cf-art .cf-tag { color: #14161a; background: rgba(255,255,255,.9); } /* The card grew a picture, so its own body needs the room back. */ .cf-card { overflow: hidden; } .cf-card:hover .cf-art img { transform: scale(1.04); } .cf-art img { transition: transform .3s cubic-bezier(.2,.8,.2,1); } .cf-bar { display: block; height: 8px; border-radius: 999px; overflow: hidden; background: #f1f1f4; } .dark .cf-bar { background: #1f1f26; } .cf-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #34d399, #14b8a6); } .cf-nums { display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; } .cf-nums b { font-weight: 700; } .cf-nums em { font-style: normal; font-weight: 400; color: #a1a1aa; } .cf-nums i { font-style: normal; font-size: 12px; color: #a1a1aa; } .cf-by { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .cf-by em { font-style: normal; font-size: 11.5px; color: #8a857e; } .cf-side { position: sticky; top: 96px; } .cf-sidecard { padding: 16px 16px 10px; border-radius: 20px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); } .dark .cf-sidecard { background: #16161a; border-color: #2b2b33; } .cf-sidecard h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 8px; } .cf-sideempty { font-size: 13px; color: #a1a1aa; padding: 6px 0 10px; } .cf-sirow { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 0; text-align: left; border-bottom: 1px solid #f1f1f4; } .dark .cf-sirow { border-color: #26262b; } .cf-sirow:last-child { border-bottom: 0; } .cf-sibadge { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 12px; color: #10b981; background: rgba(16,185,129,.12); } .cf-siwho { flex: 1; min-width: 0; } .cf-siwho b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cf-siwho em { display: block; font-style: normal; font-size: 11.5px; color: #a1a1aa; margin-top: 3px; } /* ===== The blog editor ===== */ .rt { border: 1px solid #e4e4ea; border-radius: 14px; overflow: hidden; background: #fff; } .dark .rt { background: #101216; border-color: #2b2b33; } .rt-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 7px 8px; border-bottom: 1px solid #f1f1f4; background: #fafafc; } .dark .rt-bar { background: #16161a; border-color: #26262b; } .rt-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #52525b; transition: background .16s, color .16s; } .dark .rt-btn { color: #a1a1aa; } .rt-btn:hover { background: #ececf1; color: #18181b; } .dark .rt-btn:hover { background: #23232b; color: #ededea; } .rt-btn:disabled { opacity: .5; } .rt-sep { width: 1px; height: 20px; margin: 0 6px; background: #e4e4ea; } .dark .rt-sep { background: #2b2b33; } .rt-area { min-height: 240px; max-height: 46vh; overflow-y: auto; padding: 14px 16px; font-size: 15px; line-height: 1.65; outline: none; } .rt-area:empty::before { content: attr(data-placeholder); color: #a1a1aa; } .rt-area h2 { font-size: 20px; font-weight: 700; margin: 14px 0 6px; } .rt-area blockquote { margin: 12px 0; padding: 6px 0 6px 14px; border-left: 3px solid #e63946; color: #52525b; } .dark .rt-area blockquote { color: #a1a1aa; } .rt-area ul, .rt-area ol { margin: 10px 0 10px 22px; list-style: revert; } .rt-area a { color: #e63946; text-decoration: underline; } .rt-area img { max-width: 100%; border-radius: 12px; margin: 10px 0; } .bl-cover-add { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #52525b; background: #f4f4f7; border: 1px dashed #d4d4dc; transition: background .18s; } .dark .bl-cover-add { background: #1b1b21; color: #a1a1aa; border-color: #33333c; } .bl-cover-add:hover { background: #ececf1; } .bl-cover-pick { position: relative; border-radius: 14px; overflow: hidden; } .bl-cover-pick img { display: block; width: 100%; max-height: 220px; object-fit: cover; } .bl-cover-pick button { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #18181b; background: rgba(255,255,255,.92); box-shadow: 0 6px 16px rgba(0,0,0,.16); } /* The article, as written. */ .bl-rich h2 { font-size: 22px; font-weight: 700; margin: 22px 0 8px; } .bl-rich h3 { font-size: 18px; font-weight: 700; margin: 18px 0 6px; } .bl-rich p { margin: 0 0 14px; } .bl-rich ul, .bl-rich ol { margin: 0 0 14px 22px; list-style: revert; } .bl-rich blockquote { margin: 16px 0; padding: 8px 0 8px 16px; border-left: 3px solid #e63946; color: #52525b; } .dark .bl-rich blockquote { color: #a1a1aa; } .bl-rich img { max-width: 100%; border-radius: 16px; margin: 16px 0; } .bl-rich a { color: #e63946; text-decoration: underline; } /* ===== Friend requests, in the rail ===== */ .fr-card { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); } .dark .fr-card { background: #16161a; border-color: #2b2b33; } .fr-head { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; margin-bottom: 10px; } .fr-head svg { color: #6c5ce7; } .fr-count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #fff; background: #6c5ce7; border-radius: 999px; padding: 2px 8px; } .fr-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 1px solid #f1f1f4; } .dark .fr-row { border-color: #26262b; } .fr-row:last-child { border-bottom: 0; } .fr-who { flex: 1; min-width: 0; } .fr-who b { display: block; font-size: 13.5px; font-weight: 600; } .fr-who em { display: block; font-style: normal; font-size: 11.5px; color: #8a857e; } .fr-acts { display: flex; gap: 7px; margin-top: 8px; } .fr-yes, .fr-no { flex: 1; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; transition: filter .18s, transform .18s; } .fr-yes { color: #fff; background: #e63946; } .fr-no { color: #52525b; background: #f4f4f7; } .dark .fr-no { color: #d4d4d8; background: #1f1f26; } .fr-yes:hover, .fr-no:hover { transform: translateY(-1px); } .fr-yes:disabled, .fr-no:disabled { opacity: .6; transform: none; } /* ===== Story strip: people to follow, where the stories run out ===== */ /* 76px, matching a story tile exactly — these sit in the same row and were reading as two different sizes. */ .st-sug { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 76px; } .st-sug-face { display: block; line-height: 0; border-radius: 999px; padding: 2px; border: 2px dashed #d4d4dc; transition: border-color .2s; } .dark .st-sug-face { border-color: #33333c; } .st-sug-face:hover { border-color: #e63946; } .st-sug-name { font-size: 12px; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-sug-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: #e63946; transition: transform .18s; } .st-sug-btn:hover { transform: translateY(-1px); } /* ===== Weather: seven days inside the card ===== The forecast went from five days to seven, and the columns are a fixed 22px each — so the last two hung out over the card's edge. They share the room now instead of demanding it. */ .uvbody { min-width: 0; } .uv-panel-wrap { flex: 0 0 38%; } .uv-bars { gap: 4px; min-width: 0; } .uv-bar { min-width: 0; flex: 1 1 0; } .uv-track { width: 100%; max-width: 20px; } .uv-badge { width: 21px; height: 21px; font-size: 9px; } .uv-dayico { font-size: 11px; } .uv-day { font-size: 10px; } /* The search field reads as a search field: a pill, like every other search box on the site. */ .se-bar { border-radius: 999px; padding-left: 22px; padding-right: 22px; } .se-tabs { padding-left: 2px; } /* ===== Membership: the upgrade page ===== */ .pm-page { width: 100%; max-width: 760px; margin: 0 auto; padding: 18px 12px 48px; display: flex; flex-direction: column; gap: 16px; } .pm-hero, .pm-plans, .pm-features, .pm-buy { padding: 24px 26px; border-radius: 22px; background: #fff; border: 1px solid #e9e9ee; box-shadow: 0 2px 14px rgba(0,0,0,.05); } .dark .pm-hero, .dark .pm-plans, .dark .pm-features, .dark .pm-buy { background: #16161a; border-color: #2b2b33; } .pm-hero { text-align: center; } .pm-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b45309; background: #fef3c7; } .dark .pm-eyebrow { color: #fbbf24; background: rgba(251,191,36,.14); } .pm-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-top: 12px; } .pm-hero > p { font-size: 14px; color: #8a857e; margin: 8px auto 0; max-width: 440px; line-height: 1.55; } .pm-status { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .pm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #57534e; background: #f4f4f5; } .dark .pm-chip { color: #d4d4d8; background: #232329; } .pm-chip.on { color: #047857; background: #d1fae5; } .dark .pm-chip.on { color: #34d399; background: rgba(52,211,153,.14); } .pm-chip.quiet { color: #8a857e; background: transparent; border: 1px solid #e9e9ee; } .dark .pm-chip.quiet { border-color: #2b2b33; } /* The two plans, picked like a switch. */ .pm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .pm-plans { grid-template-columns: 1fr; } } .pm-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 20px 20px 18px; text-align: left; border-radius: 18px; background: #fafafa; border: 2px solid transparent; transition: border-color .2s, background .2s, transform .2s; } .dark .pm-plan { background: #1c1c21; } .pm-plan:hover { transform: translateY(-2px); } .pm-plan.on { background: #fff; border-color: #14161a; box-shadow: 0 10px 30px rgba(20,22,26,.10); } .dark .pm-plan.on { background: #202027; border-color: #ededea; } .pm-planname { font-size: 13px; font-weight: 700; color: #8a857e; } .pm-price { font-size: 30px; font-weight: 800; letter-spacing: -.03em; } .pm-price em { font-style: normal; font-size: 13px; font-weight: 600; color: #8a857e; } .pm-permonth { font-size: 12.5px; color: #8a857e; } .pm-best { position: absolute; top: -11px; right: 16px; font-style: normal; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #FF6B76, #F59E0B); } .pm-yours { margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #047857; background: #d1fae5; } .dark .pm-yours { color: #34d399; background: rgba(52,211,153,.14); } /* What you get, one row each. */ .pm-features { padding: 8px 26px; } .pm-feature { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid #f1f1f4; } .dark .pm-feature { border-color: #26262b; } .pm-features .pm-feature:last-child { border-bottom: 0; } .pm-feature.off { opacity: .45; } .pm-fico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #14161a; background: #f4f4f5; } .dark .pm-fico { color: #ededea; background: #232329; } .pm-ftext { flex: 1; min-width: 0; } .pm-ftext b { display: block; font-size: 14.5px; font-weight: 700; } .pm-ftext em { display: block; font-style: normal; font-size: 12.5px; color: #8a857e; margin-top: 2px; } .pm-tick { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; color: #a1a1aa; border: 1px solid #e9e9ee; } .dark .pm-tick { border-color: #2b2b33; } .pm-tick.on { color: #fff; background: #14161a; border-color: #14161a; } .dark .pm-tick.on { color: #14161a; background: #ededea; border-color: #ededea; } /* Buying it. */ .pm-buy { text-align: center; } .pm-cta { display: block; width: 100%; padding: 17px 20px; border-radius: 999px; font-size: 16px; font-weight: 700; color: #fff; background: #14161a; transition: transform .2s, opacity .2s; } .pm-cta:hover { transform: translateY(-2px); } .dark .pm-cta { color: #14161a; background: #ededea; } .pm-cta:disabled { opacity: .45; transform: none; cursor: default; } .pm-fine { font-size: 12.5px; color: #8a857e; margin-top: 10px; line-height: 1.5; } .pm-fine a { font-weight: 600; text-decoration: underline; } .pm-error { font-size: 13px; color: #e11d48; background: #fef2f3; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; } .dark .pm-error { background: rgba(225,29,72,.12); } .pm-ok { font-size: 13px; color: #047857; background: #d1fae5; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; } .dark .pm-ok { color: #34d399; background: rgba(52,211,153,.14); } /* ===== Profile header, rebuilt ===== Avatar, who they are and what you can do with them on one row, sitting over the bottom of the cover — instead of an avatar alone on one line and a name fighting it for space on the next. */ .pf-head { position: relative; z-index: 3; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding: 16px 2px 4px; } /* Only the avatar climbs onto the cover — a name over a photograph is a name nobody can read. */ .pf-avatarwrap { flex: none; margin-top: -78px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 14px 34px rgba(20,22,26,.16); } .dark .pf-avatarwrap { background: #16161a; } .pf-headmain { flex: 1 1 220px; min-width: 0; padding-bottom: 2px; } .pf-name { display: flex; align-items: center; gap: 8px; font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .pf-name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; } .pf-handle { font-size: 13.5px; color: #8a857e; margin-top: 3px; } .pf-bio { font-size: 13.5px; line-height: 1.55; color: #57534e; margin-top: 9px; max-width: 520px; } .dark .pf-bio { color: #c4c4cc; } .pf-headmain .pf-counts { margin-top: 14px; padding-left: 0; } .pf-headacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; padding-top: 2px; } .pf-headacts .pf-acts { display: flex; } .pf-headacts .pf-acts > div { margin-bottom: 0; } /* A cover with nothing in it should still look deliberate. */ .pf-cover-fill { background: radial-gradient(720px 300px at 12% 0%, rgba(255,255,255,.34), transparent 60%), radial-gradient(560px 320px at 88% 110%, rgba(255,255,255,.20), transparent 62%), linear-gradient(120deg, #6366f1, #a855f7 46%, #ec4899); } /* The tab row divides the header from the content. */ .pf-tabwrap { border-top: 1px solid #f1f1f4; margin-top: 16px; } .dark .pf-tabwrap { border-color: #26262b; } @media (max-width: 720px) { .pf-head { gap: 14px; } .pf-avatarwrap { margin-top: -58px; } .pf-headacts { margin-left: 0; width: 100%; } .pf-name > span { max-width: 100%; } } /* Bio and counts get their own line under the name row. */ .pf-headfoot { flex: 1 0 100%; margin-top: 4px; } .pf-headfoot .pf-bio { max-width: 640px; margin-top: 0; } .pf-headfoot .pf-counts { margin-top: 14px; padding-left: 0; } /* Marks beside the name, and the line of facts under the bio. */ .pf-tick { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 999px; color: #fff; background: #1d9bf0; } .pf-mark { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 999px; color: #fff; background: #64748b; } .pf-mark.admin { background: linear-gradient(135deg, #0f172a, #475569); } .pf-name .bdg-row { display: inline-flex; align-items: center; gap: 5px; } .pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: #8a857e; } .pf-meta span, .pf-meta a { display: inline-flex; align-items: center; gap: 6px; } .pf-meta a { color: #6d28d9; } .pf-meta a:hover { text-decoration: underline; } .dark .pf-meta a { color: #a78bfa; } /* ===== Admin > Update ===== White cards, one idea each: where you are, what is happening, what is safe. The progress list is the important one — it is the only thing telling the owner the site is still working. */ .up-wrap { display: flex; flex-direction: column; gap: 18px; max-width: 860px; } .up-head h1 { font-size: 22px; font-weight: 700; } .up-head p { margin-top: 4px; font-size: 14px; color: #8a857e; } .up-card { background: #fff; border: 1px solid #ece9e4; border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(16, 14, 12, .04); } .dark .up-card { background: #171717; border-color: #2b2b2b; box-shadow: none; } .up-h2 { font-size: 15px; font-weight: 650; margin-bottom: 10px; } .up-versions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .up-ver { display: flex; flex-direction: column; gap: 2px; } .up-verlabel { font-size: 12px; color: #8a857e; } .up-ver strong { font-size: 20px; font-weight: 700; } .up-new { color: #16a34a; } .dark .up-new { color: #4ade80; } .up-arrow { font-size: 20px; color: #d6d1c9; } .up-arrow.on { color: #16a34a; } .dark .up-arrow { color: #3a3a3a; } .dark .up-arrow.on { color: #4ade80; } .up-actions { margin-left: auto; display: flex; gap: 8px; } .up-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: opacity .15s, background .15s; } .up-btn:disabled { opacity: .45; cursor: not-allowed; } .up-btn.ghost { border-color: #ece9e4; background: #fff; } .up-btn.ghost:hover:not(:disabled) { background: #faf9f7; } .dark .up-btn.ghost { border-color: #2b2b2b; background: #171717; color: #e9e7e4; } .dark .up-btn.ghost:hover:not(:disabled) { background: #202020; } .up-btn.primary { background: #6d28d9; color: #fff; } .up-btn.primary:hover:not(:disabled) { background: #5b21b6; } .up-warn, .up-ok { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 13px; padding: 9px 12px; border-radius: 10px; } .up-warn { color: #b45309; background: #fffbeb; } .up-ok { color: #15803d; background: #f0fdf4; } .dark .up-warn { color: #fbbf24; background: rgba(120, 53, 15, .25); } .dark .up-ok { color: #4ade80; background: rgba(20, 83, 45, .25); } /* --- the live progress list --- */ .up-steps { display: flex; flex-direction: column; gap: 2px; } .up-step { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; overflow: hidden; transition: background .2s, opacity .2s; opacity: .45; } .up-step.running, .up-step.done, .up-step.failed { opacity: 1; } .up-step.running { background: #f6f4ff; } .dark .up-step.running { background: rgba(109, 40, 217, .16); } .up-dot { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #f2efeb; color: #8a857e; } .dark .up-dot { background: #262626; color: #9b968f; } .up-step.running .up-dot { background: #6d28d9; color: #fff; } .up-step.done .up-dot { background: #16a34a; color: #fff; } .up-step.failed .up-dot { background: #dc2626; color: #fff; } .up-steptext { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .up-steplabel { font-size: 14px; font-weight: 550; } .up-stepdetail { font-size: 12px; color: #8a857e; } .up-pct { margin-left: auto; font-size: 12px; font-weight: 650; color: #6d28d9; font-variant-numeric: tabular-nums; } .dark .up-pct { color: #a78bfa; } /* The fill sits along the bottom edge of its own row, so the row itself reads as the bar and nothing jumps as steps appear. */ .up-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(109, 40, 217, .15); } .up-bar i { display: block; height: 100%; background: #6d28d9; transition: width .25s ease; } /* A running step breathes, so a long download never looks frozen. */ .up-step.running .up-steplabel { animation: upPulse 1.6s ease-in-out infinite; } @keyframes upPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* --- the finished panel --- */ .up-done { margin-top: 16px; padding: 16px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; } .dark .up-done { background: rgba(20, 83, 45, .2); border-color: rgba(74, 222, 128, .25); } .up-done h3 { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: #15803d; } .dark .up-done h3 { color: #4ade80; } .up-done p { margin-top: 7px; font-size: 13px; line-height: 1.55; } .up-done ol { margin: 10px 0 0 18px; font-size: 13px; line-height: 1.9; } .up-done code, .up-small code { font-family: ui-monospace, monospace; font-size: 12px; background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; } .dark .up-done code, .dark .up-small code { background: rgba(255, 255, 255, .1); } .up-small { font-size: 12px; color: #8a857e; line-height: 1.6; } .up-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; } .up-table th { text-align: left; font-weight: 600; color: #8a857e; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid #ece9e4; } .up-table td { padding: 9px 8px; border-bottom: 1px solid #f4f2ef; } .dark .up-table th { border-color: #2b2b2b; } .dark .up-table td { border-color: #222; } .up-safe { display: grid; gap: 7px; font-size: 13px; } .up-safe li { display: flex; align-items: center; gap: 8px; color: #57534e; } .up-safe li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; } .dark .up-safe li { color: #b9b5ae; } /* --- Update page tabs --- */ .up-tabs { display: flex; gap: 6px; border-bottom: 1px solid #ece9e4; } .dark .up-tabs { border-color: #2b2b2b; } .up-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; font-size: 14px; font-weight: 600; color: #8a857e; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; } .up-tab:hover:not(:disabled) { color: #57534e; } .up-tab.on { color: #6d28d9; border-bottom-color: #6d28d9; } .up-tab:disabled { opacity: .5; cursor: not-allowed; } .dark .up-tab:hover:not(:disabled) { color: #d6d3ce; } .dark .up-tab.on { color: #a78bfa; border-bottom-color: #a78bfa; } /* The count of things waiting on that tab. */ .up-tabdot { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; font-style: normal; display: inline-grid; place-items: center; } .up-dim { color: #8a857e; } .up-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; } .up-pill.on { background: #f0fdf4; color: #15803d; } .up-pill.off { background: #f5f5f4; color: #8a857e; } .dark .up-pill.on { background: rgba(20, 83, 45, .3); color: #4ade80; } .dark .up-pill.off { background: #262626; color: #9b968f; } /* --- Licence key row on the Update page --- */ .up-keyrow { display: flex; gap: 8px; margin: 12px 0 10px; flex-wrap: wrap; } .up-key { flex: 1 1 260px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid #ece9e4; background: #fff; font-size: 14px; font-family: ui-monospace, monospace; } .up-key:focus { outline: 2px solid #6d28d9; outline-offset: -1px; } .dark .up-key { border-color: #2b2b2b; background: #101010; color: #e9e7e4; } /* --- Update page: restart notice, licence status, key warning --- */ .up-restart { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; } .dark .up-restart { background: rgba(120, 53, 15, .22); border-color: rgba(251, 191, 36, .28); } .up-restart h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #b45309; } .dark .up-restart h3 { color: #fbbf24; } .up-restart p { margin-top: 7px; font-size: 13px; line-height: 1.6; } .up-restart ol { margin: 10px 0 0 18px; font-size: 13px; line-height: 1.9; } .up-restart code { font-family: ui-monospace, monospace; font-size: 12px; background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; } .dark .up-restart code { background: rgba(255, 255, 255, .1); } /* Licence status block. Green when it is genuinely verified, because that is the one thing a customer wants to see at a glance. */ .up-lic { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 12px; border: 1px solid; } .up-lic.ok { background: #f0fdf4; border-color: #bbf7d0; } .up-lic.warn { background: #fffbeb; border-color: #fde68a; } .dark .up-lic.ok { background: rgba(20, 83, 45, .22); border-color: rgba(74, 222, 128, .26); } .dark .up-lic.warn { background: rgba(120, 53, 15, .22); border-color: rgba(251, 191, 36, .26); } .up-licbadge { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; } .up-lic.ok .up-licbadge { background: #16a34a; } .up-lic.warn .up-licbadge { background: #d97706; } .up-lic strong { display: block; font-size: 14px; font-weight: 650; } .up-lic.ok strong { color: #15803d; } .up-lic.warn strong { color: #b45309; } .dark .up-lic.ok strong { color: #4ade80; } .dark .up-lic.warn strong { color: #fbbf24; } .up-lic p { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: #6b6660; } .dark .up-lic p { color: #a8a39c; } .up-lic code { font-family: ui-monospace, monospace; font-size: 12px; background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; } .dark .up-lic code { background: rgba(255, 255, 255, .1); } /* The don't-share warning. Red, because it is the one thing on this page that costs a customer money if they ignore it. */ .up-notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626; } .dark .up-notice { background: rgba(127, 29, 29, .22); border-color: rgba(248, 113, 113, .28); border-left-color: #ef4444; } .up-noticeicon { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #dc2626; color: #fff; } .up-notice strong { display: block; font-size: 14px; font-weight: 700; color: #b91c1c; letter-spacing: .01em; } .dark .up-notice strong { color: #fca5a5; } .up-notice p { margin-top: 5px; font-size: 12.5px; line-height: 1.65; color: #7f1d1d; } .dark .up-notice p { color: #fecaca; } /* ===== Confirmation dialog ===== Named cfd-, deliberately: .cf-card is also a crowdfunding card further up this file, and because that rule comes later it was overriding the old dialog's width and padding — which is why the panel spanned the screen. A prefix nothing else uses is cheaper than policing the order. If these rules ever go missing the dialog renders position:static at full width and flattens the page around it, so keep them with the component. */ .cfd-back { position: fixed; inset: 0; z-index: 9995; display: grid; place-items: center; padding: 20px; background: rgba(17, 15, 13, .45); backdrop-filter: blur(3px); animation: cfdFade .16s ease-out; } .cfd-card { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 26px 26px 22px; text-align: center; box-shadow: 0 24px 60px rgba(16, 14, 12, .26); animation: cfdPop .18s cubic-bezier(.2, .9, .3, 1.2); } .dark .cfd-card { background: #171717; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); } @keyframes cfdFade { from { opacity: 0; } } @keyframes cfdPop { from { opacity: 0; transform: translateY(8px) scale(.97); } } .cfd-icon { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 14px; border-radius: 50%; background: #f4f1ff; color: #6d28d9; } .cfd-icon.danger { background: #fef2f2; color: #dc2626; } .dark .cfd-icon { background: rgba(109, 40, 217, .2); color: #a78bfa; } .dark .cfd-icon.danger { background: rgba(220, 38, 38, .18); color: #f87171; } .cfd-card h3 { font-size: 17px; font-weight: 750; margin-bottom: 7px; } .cfd-card p { font-size: 13.5px; line-height: 1.6; color: #6b6660; white-space: pre-line; } .dark .cfd-card p { color: #a8a39c; } .cfd-actions { display: flex; gap: 10px; margin-top: 22px; } .cfd-actions button { flex: 1; height: 44px; border-radius: 12px; font-size: 14px; font-weight: 650; transition: background .15s, transform .1s; } .cfd-actions button:active { transform: scale(.985); } .cfd-cancel { background: #f4f2ef; color: #2b2724; } .cfd-cancel:hover { background: #ebe8e4; } .dark .cfd-cancel { background: #262626; color: #e9e7e4; } .dark .cfd-cancel:hover { background: #303030; } .cfd-go { background: #6d28d9; color: #fff; } .cfd-go:hover { background: #5b21b6; } .cfd-go.danger { background: #dc2626; } .cfd-go.danger:hover { background: #b91c1c; } @media (max-width: 420px) { .cfd-actions { flex-direction: column-reverse; } } @media (prefers-reduced-motion: reduce) { .cfd-back, .cfd-card { animation: none; } } /* --- Update page: one card per theme / plugin, matching the script card --- */ .up-lead { font-size: 13px; color: #8a857e; line-height: 1.6; margin: -4px 0 2px; } .dark .up-lead { color: #9b968f; } .up-item { display: flex; flex-direction: column; gap: 3px; min-width: 190px; flex: 1 1 190px; } .up-itemname { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; } .up-itemkind { font-size: 12px; color: #8a857e; line-height: 1.45; } .dark .up-itemkind { color: #9b968f; } /* --- Update page: backup delete, empty state, built-in note --- */ .up-del { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #a8a39c; transition: background .15s, color .15s; } .up-del:hover:not(:disabled) { background: #fef2f2; color: #dc2626; } .up-del:disabled { opacity: .5; cursor: not-allowed; } .dark .up-del:hover:not(:disabled) { background: rgba(127, 29, 29, .3); color: #f87171; } .up-empty { text-align: center; padding: 18px 12px; } .up-emptyicon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; background: #f4f2ef; color: #8a857e; } .dark .up-emptyicon { background: #262626; color: #9b968f; } .up-empty strong { display: block; font-size: 15px; font-weight: 650; } .up-empty p { max-width: 460px; margin: 7px auto 0; font-size: 13px; line-height: 1.6; color: #8a857e; } .dark .up-empty p { color: #9b968f; } /* The line that replaces version columns for a theme baked into the script. */ .up-builtin { flex: 1 1 260px; font-size: 12.5px; line-height: 1.55; color: #8a857e; padding-left: 4px; } .dark .up-builtin { color: #9b968f; } /* ── Pinned columns ───────────────────────────────────*/ /* A side column that's taller than the window scrolls inside itself, but without a bar: the page had one down the left menu and one down each right rail, which read as three broken panes rather than as columns that keep up with you. The wheel and touch still work. */ .rail-pin { scrollbar-width: none; -ms-overflow-style: none; } .rail-pin::-webkit-scrollbar { width: 0; height: 0; } /* ===== One stacking order, at the end so it settles the file ========== * * The bug: opening the followers / following / mutuals list from a * profile put it UNDERNEATH the profile hover card. Two rules written far * apart disagreed about who was on top -- * * .nm-back, .fixed.inset-0.z-50 { z-index: 100 !important; } (dialogs) * .hov-card { z-index: 9998; } .bt-tip { z-index: 9999; } (hovers) * * -- so every dialog in the site sat two orders of magnitude below a * hover card, a badge tooltip and the sidebar's account menu. The 100 was * only ever meant to clear the rails at 10; it was never meant to be a * ceiling, and the !important made it one. * * The order that actually makes sense, and the only one this block sets: * * rails, page furniture 10 (already set above) * hover cards, tooltips, ~9999 (already set above) * dropdown menus * dialogs and their scrims 10000 <- must cover everything it dims * toasts 10050 <- must stay readable over a dialog * * Nothing is lowered here: hover cards and menus keep the values they * had, and only the two layers that were provably too low move. Anything * a dialog opens inside itself keeps working, because a scrim starts its * own stacking context -- the numbers within it are unaffected. */ :root { --z-dialog: 10000; --z-toast: 10050; } /* Every full-screen scrim, whichever component owns it. !important because the rule these override carries it too. */ .nm-back, .fixed.inset-0.z-50, .ts-back, .cm-back, .pe-back, .cfd-back, .lb-back, .rl-done, .adm .sh-back { z-index: var(--z-dialog) !important; } /* A toast reports what just happened -- often what happened in the dialog still open in front of the reader. Hidden behind the scrim it is no report at all. */ .lt-stack, .sp-toast { z-index: var(--z-toast); } /* ===== Friends or followers: the admin's choice ====================== * Two cards rather than a dropdown, because the difference between the * two models is a paragraph each -- and picking the wrong one changes * what every profile on the site says. The explanation belongs next to * the choice, not behind it. */ .cm-choice { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .cm-choice-card { position: relative; text-align: left; padding: 16px 18px 16px 44px; border-radius: 16px; border: 1px solid #e6e8ef; background: #fff; transition: border-color .18s, background .18s; } .dark .cm-choice-card { background: #14141a; border-color: #2f3441; } .cm-choice-card:hover { border-color: #c4b5fd; } .cm-choice-card.on { border-color: #7c3aed; background: rgba(124, 58, 237, .04); } .dark .cm-choice-card.on { background: rgba(124, 58, 237, .12); } .cm-choice-card b { display: block; font-size: 15px; font-weight: 800; } .cm-choice-card em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.55; color: #6b7280; margin-top: 5px; } .dark .cm-choice-card em { color: #9ca3af; } /* The radio mark, drawn rather than an so it matches the cards. */ .cm-choice-dot { position: absolute; left: 16px; top: 19px; width: 17px; height: 17px; border-radius: 50%; border: 2px solid #cbd0dc; transition: all .18s; } .dark .cm-choice-dot { border-color: #414757; } .cm-choice-card.on .cm-choice-dot { border-color: #7c3aed; border-width: 5px; } /* A friend request that has been sent but not answered. It is not a connection yet, so it must not wear the same solid colour as one -- otherwise "Requested" and "Friends" look identical at a glance. */ .pf-act.primary.pending { background: #f4f4f7; color: #52525b; box-shadow: none; } .dark .pf-act.primary.pending { background: #26262e; color: #d4d4d8; } .pf-act.primary.pending:hover { background: #ebebf0; } .dark .pf-act.primary.pending:hover { background: #33333d; } /* ===== Story strip: the suggestion tile's action ===================== * The action used to be a labelled pill under the name, which made a * suggestion tile noticeably taller than a story tile -- the row grew to * fit it and pushed the composer down. It also repeated the same two * words under every face in the row. * * It is a badge on the avatar now, in the corner, the way an unread count * sits on a conversation. Same tap target, no extra row, and the tiles * line up with the stories beside them again. */ .st-sug-facewrap { position: relative; display: inline-block; line-height: 0; } .st-sug-badge { position: absolute; top: -1px; right: -1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; color: #fff; background: #e63946; /* Reads as a badge sitting on the photo, not a hole cut out of it. */ border: 2px solid #fff; box-shadow: 0 2px 6px rgba(230, 57, 70, .35); transition: transform .16s, background .16s; } .dark .st-sug-badge { border-color: #0c0c0c; } .st-sug-badge:hover { transform: scale(1.12); background: #cc2f3b; } .st-sug-badge:active { transform: scale(.96); } .st-sug-badge:focus-visible { outline: 2px solid #e63946; outline-offset: 2px; } /* The pill is gone; the tile is avatar + name, the same height as a story. */ .st-sug { gap: 7px; } /* ===== Friend requests: the answer sits beside the name ============= * Accept and Decline used to be a full-width row underneath, which made * every request three lines tall -- four of them filled the rail on their * own. They are on the name's row now. * * Icons rather than words because of the arithmetic: the rail is about * 276px inside its padding, and "Confirm" + "Decline" as text leaves * roughly 70px for the person's name. Both buttons carry title and * aria-label, so the words are still there on hover and for a screen * reader -- they are just not taking the name's room. */ .fr-row { align-items: center; } .fr-acts { display: flex; gap: 6px; flex: none; /* It shared the name column before, so it needed to be pushed down. */ margin-top: 0; } .fr-yes, .fr-no { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border-radius: 10px; } /* ===== The composer's writing box ================================== * Two things: the feelings grid spilled out of the card, and the box had * more air inside it than it needed. * * The overflow was grid's default `min-width: auto` on the buttons -- a * long word like "celebrating" refuses to shrink below its own width, so * a fixed 4-column grid grew wider than the panel holding it instead of * the columns getting narrower. Columns that size themselves, plus * buttons allowed to shrink, keeps it inside. */ .cp-feelings { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); /* Never wider than the panel, whatever is in it. */ max-width: 100%; } .cp-feelings button { /* The line that actually stops the overflow. */ min-width: 0; } .cp-feelings button span { flex: none; } /* The word gives way before the card does. */ .cp-feelings button::after { content: ""; } .cp-feelings button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Less air inside the writing box. The bottom keeps enough room for the tools pinned in its corner (34px tall, sitting 12px up) -- trimming that too far would have them overlapping what you type. */ .cp-write { padding: 12px 12px 54px; } /* ===== Import from Sngine ========================================== * A destructive action needs to look like one, so the confirm line and * the report are given real room rather than being tucked away. */ .im-drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .im-pick { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #52525b; background: #f4f4f7; border: 1px dashed #cbd0dc; transition: all .18s; } .dark .im-pick { background: #1e1e24; color: #d4d4d8; border-color: #414757; } .im-pick:hover { border-color: #7c3aed; color: #7c3aed; } .im-file { font-size: 13px; font-weight: 600; color: #16a34a; } .im-confirm { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; } .dark .im-confirm { color: #fcd34d; background: rgba(120, 53, 15, .22); border-color: #78350f; } .im-confirm input { margin-top: 2px; flex: none; } .im-confirm span { display: flex; align-items: flex-start; gap: 7px; } .im-confirm svg { flex: none; margin-top: 1px; } .im-error, .im-ok { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; } .im-error { color: #dc2626; } .im-ok { color: #16a34a; } /* The importer's own report, verbatim. Monospace because it is a column of counts, and those only line up in a fixed-width font. */ .im-log { margin-top: 12px; padding: 14px 16px; border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-x: auto; max-height: 460px; color: #d4d4d8; background: #14141a; } /* ===== Transfer scripts ============================================ * Two boxes side by side, each a short wizard. The point of the layout is * that an admin sees the whole job at once -- two sources, two steps each * -- rather than a form that reveals what it wants one field at a time. */ .tr-grid { display: grid; gap: 18px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } .tr-box { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #e6e8ef; } .dark .tr-box { background: #14141a; border-color: #2f3441; } .tr-box.soon { opacity: .72; } .tr-box-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; } .tr-box-head b { display: block; font-size: 16px; font-weight: 800; } .tr-box-head em { display: block; font-style: normal; font-size: 12.5px; color: #8a857e; margin-top: 2px; } .tr-logo { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; font-size: 20px; font-weight: 900; color: #fff; } .tr-logo.sngine { background: linear-gradient(135deg, #7c3aed, #4f46e5); } .tr-logo.wo { background: linear-gradient(135deg, #0ea5e9, #0369a1); } .tr-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; padding: 12px 14px; border-radius: 13px; background: #f7f8fa; } .dark .tr-steps { background: #1a1a22; } .tr-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #8a857e; } .tr-steps li span { display: grid; place-items: center; flex: none; width: 21px; height: 21px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #8a857e; background: #e6e8ef; } .dark .tr-steps li span { background: #2f3441; } .tr-steps li.now { color: #0f1419; font-weight: 700; } .dark .tr-steps li.now { color: #f4f4f5; } .tr-steps li.now span { color: #fff; background: #7c3aed; } .tr-steps li.done { color: #16a34a; } .tr-steps li.done span { color: #fff; background: #16a34a; } .tr-check { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; font-size: 12.5px; line-height: 1.55; color: #6b7280; } .dark .tr-check { color: #9ca3af; } .tr-check input { margin-top: 2px; flex: none; } .tr-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 12px; border-radius: 13px; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 8px 20px rgba(124, 58, 237, .28); transition: all .18s; } .tr-go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(124, 58, 237, .34); } .tr-go:disabled { background: #ececf1; color: #a1a1aa; box-shadow: none; } .dark .tr-go:disabled { background: #26262e; color: #6b7280; } /* ---- the bar ---- * Two states on purpose. When the script counts its work the fill is the * real fraction of it. When it cannot, the bar sweeps and shows no number * -- a percentage nobody measured is a decoration that lies. */ .tr-running { margin-top: 16px; } .tr-bar { position: relative; height: 10px; border-radius: 999px; background: #ececf1; overflow: hidden; } .dark .tr-bar { background: #26262e; } .tr-bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #4f46e5); transition: width .35s ease; } .tr-bar-fill.sweep { width: 40%; animation: trSweep 1.15s ease-in-out infinite; } @keyframes trSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } .tr-bar-pct { position: absolute; right: 0; top: -20px; font-size: 11.5px; font-weight: 800; color: #7c3aed; } .tr-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: #6b7280; } .dark .tr-status { color: #9ca3af; } /* ---- the reward ---- */ .tr-win { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px; border-radius: 15px; text-align: center; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; animation: trPop .4s cubic-bezier(.2, 1.1, .3, 1) both; } .dark .tr-win { background: rgba(20, 83, 45, .22); border-color: #166534; color: #86efac; } .tr-win.big { padding: 28px 18px; } .tr-win b { font-size: 17px; font-weight: 900; } .tr-win.big b { font-size: 20px; } .tr-win em { font-style: normal; font-size: 12.5px; opacity: .85; } @keyframes trPop { from { opacity: 0; transform: scale(.94) translateY(6px); } } .tr-figures { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; } .tr-figures span { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; background: rgba(255, 255, 255, .72); } .dark .tr-figures span { background: rgba(0, 0, 0, .25); } .tr-figures b { font-size: 13px; font-weight: 900; } .tr-leftover { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 13px 15px; border-radius: 13px; font-size: 12.5px; line-height: 1.55; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; } .dark .tr-leftover { color: #fcd34d; background: rgba(120, 53, 15, .22); border-color: #78350f; } .tr-leftover svg { flex: none; margin-top: 1px; } .tr-leftover button { flex: none; align-self: center; } /* The log is still here for when the summary is not enough -- which is exactly when something has gone wrong. */ .tr-details { margin-top: 14px; font-size: 12px; font-weight: 700; color: #7c3aed; text-decoration: underline; } /* The one field nothing starts without. */ .tr-req { margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #b91c1c; background: #fee2e2; } .dark .tr-req { color: #fca5a5; background: rgba(127, 29, 29, .35); } /* The step list doubles as navigation, so a reload no longer strands you on step one with no way to reach step two but redoing step one. */ .tr-steps.clickable li { padding: 0; } .tr-steps.clickable li button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-size: 13px; color: inherit; padding: 3px 0; border-radius: 8px; transition: opacity .15s; } .tr-steps.clickable li button:hover:not(:disabled) { opacity: .72; } .tr-steps.clickable li button:disabled { cursor: default; } /* The awkward-case routes, out of the way until someone needs them. */ .tr-fallbacks { margin-top: 14px; padding: 14px 16px; border-radius: 13px; background: #f7f8fa; border: 1px solid #e6e8ef; animation: trPop .25s ease both; } .dark .tr-fallbacks { background: #1a1a22; border-color: #2f3441; } /* ===== Jobs & Offers ==================================================== One set of tokens for both boards, defined here and overridden once for dark. The first version of this block hardcoded white and grey with var(--x, #fff) fallbacks, which meant every card, label and input stayed light when the site went dark. Naming the colours once fixes all of it, including the modals — those render into document.body through a portal, so anything scoped to the page itself would have missed them. */ :root { --jb-card: #ffffff; --jb-line: #e9e9ee; --jb-line-soft: #f1f1f4; --jb-text: #18181b; --jb-dim: #71717a; --jb-soft: #f6f6f8; --jb-field: #ffffff; --jb-field-line: #d8d8e0; --jb-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05); --jb-accent: #4f46e5; --jb-accent-hi: #4338ca; --jb-accent-soft: #eef2ff; --of-accent: #c2410c; --of-accent-hi: #9a3412; --of-accent-soft: #fff4ed; } .dark { --jb-card: #121215; --jb-line: #26262b; --jb-line-soft: #1f1f24; --jb-text: #e7e7ea; --jb-dim: #a1a1aa; --jb-soft: #18181b; --jb-field: #131316; --jb-field-line: #32323a; --jb-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --jb-accent: #6366f1; --jb-accent-hi: #818cf8; --jb-accent-soft: #1e1b3a; --of-accent: #ea8a3d; --of-accent-hi: #f5a962; --of-accent-soft: #2a1c10; } /* --- page frame: content column plus a rail --- */ .jb-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; max-width: 1120px; /* A flex item with no width shrinks to its content, so the page sat in a narrow band with a gap between it and the menu. It takes the column it is given and caps at 1120. */ width: 100%; margin: 0 auto; padding: 18px 16px 60px; color: var(--jb-text); } @media (max-width: 1000px) { .jb-page { grid-template-columns: 1fr; } .jb-rail { display: none; } } .jb-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; } .jb-rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; } /* Everything sits on a card. */ .jb-panel { background: var(--jb-card); border: 1px solid var(--jb-line); border-radius: 16px; box-shadow: var(--jb-shadow); } .jb-pad { padding: 16px 18px; } /* --- the banner --- */ .jb-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-radius: 16px; background: linear-gradient(120deg, #312e81 0%, #4f46e5 55%, #6366f1 100%); color: #fff; box-shadow: 0 10px 30px rgba(79, 70, 229, .25); } .jb-hero.offers { background: linear-gradient(120deg, #7c2d12 0%, #c2410c 55%, #ea8a3d 100%); box-shadow: 0 10px 30px rgba(194, 65, 12, .25); } .jb-h1 { display: flex; align-items: center; gap: 9px; font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -.01em; } .jb-sub { margin: 5px 0 0; opacity: .88; font-size: 13.5px; } /* --- buttons --- */ .jb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 11px; font-size: 14px; font-weight: 650; cursor: pointer; white-space: nowrap; transition: transform .14s var(--spring, ease), box-shadow .2s, background .2s; } .jb-btn:active { transform: scale(.97); } .jb-btn:disabled { opacity: .55; cursor: default; transform: none; } /* On the banner: white on colour. */ .jb-btn.onhero { background: #fff; color: #312e81; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); } .jb-btn.onhero:hover { background: #f8f8ff; box-shadow: 0 6px 20px rgba(0, 0, 0, .24); } .jb-hero.offers .jb-btn.onhero { color: #7c2d12; } /* Anywhere else: the module's colour. */ .jb-btn.primary { background: var(--jb-accent); color: #fff; box-shadow: 0 4px 14px rgba(79, 70, 229, .3); } .jb-btn.primary:hover { background: var(--jb-accent-hi); box-shadow: 0 6px 20px rgba(79, 70, 229, .38); } .jb-btn.offers { background: var(--of-accent); box-shadow: 0 4px 14px rgba(194, 65, 12, .3); } .jb-btn.offers:hover { background: var(--of-accent-hi); box-shadow: 0 6px 20px rgba(194, 65, 12, .38); } .jb-btn.wide { width: 100%; } .jb-btn.big { padding: 13px 22px; font-size: 15px; } .jb-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--jb-field-line); border-radius: 10px; background: var(--jb-card); font-size: 13.5px; font-weight: 550; color: var(--jb-text); cursor: pointer; transition: background .15s, border-color .15s; } .jb-ghost:hover { background: var(--jb-soft); } .jb-ghost.danger { color: #dc2626; border-color: #f3c9c9; } .dark .jb-ghost.danger { color: #f87171; border-color: #4c1d1d; } .jb-ghost.ok { color: #15803d; border-color: #bbe7c9; } .dark .jb-ghost.ok { color: #4ade80; border-color: #14532d; } .jb-ghost:disabled { opacity: .45; cursor: default; } /* --- filters --- */ .jb-bar { display: flex; gap: 10px; flex-wrap: wrap; } .jb-search { flex: 1 1 220px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--jb-field-line); border-radius: 11px; background: var(--jb-field); color: var(--jb-dim); } .jb-search:focus-within { border-color: var(--jb-accent); } .jb-search input { flex: 1; border: 0; outline: 0; background: none; padding: 11px 0; font-size: 14px; color: var(--jb-text); } .jb-search input::placeholder { color: var(--jb-dim); } .jb-select { padding: 11px 13px; border: 1px solid var(--jb-field-line); border-radius: 11px; background: var(--jb-field); font-size: 14px; color: var(--jb-text); cursor: pointer; } .jb-scopes { display: flex; gap: 7px; flex-wrap: wrap; } .jb-scope { padding: 8px 15px; border: 1px solid var(--jb-line); border-radius: 999px; background: var(--jb-card); font-size: 13px; font-weight: 550; color: var(--jb-dim); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .jb-scope:hover { color: var(--jb-text); } .jb-scope.on { background: var(--jb-accent); border-color: transparent; color: #fff; } .jb-scope.on.offers { background: var(--of-accent); } .jb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .of-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .jb-empty { padding: 44px 20px; text-align: center; color: var(--jb-dim); font-size: 14px; } .jb-empty.small { padding: 20px 0; } .jb-empty a { color: var(--jb-accent); } /* --- job card --- */ .jb-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--jb-line); border-radius: 15px; background: var(--jb-card); overflow: hidden; box-shadow: var(--jb-shadow); transition: transform .22s cubic-bezier(.3, 1.2, .4, 1), box-shadow .22s, border-color .22s; } .jb-card:hover { transform: translateY(-3px); border-color: var(--jb-accent); box-shadow: 0 14px 32px rgba(16, 24, 40, .12); } .jb-card.closed { opacity: .6; } .jb-cardlink { display: block; padding: 16px 17px 12px; color: inherit; text-decoration: none; } .jb-cardtop { display: flex; align-items: flex-start; gap: 12px; } .jb-logo { flex: 0 0 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--jb-accent-soft); color: var(--jb-accent); overflow: hidden; } .jb-logo img { width: 100%; height: 100%; object-fit: cover; } .jb-headings { min-width: 0; flex: 1; } .jb-title { margin: 0; font-size: 16px; font-weight: 660; line-height: 1.3; color: var(--jb-text); } .jb-poster { margin: 3px 0 0; font-size: 13px; color: var(--jb-dim); } .jb-closed { font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: #fee2e2; color: #991b1b; } .dark .jb-closed { background: #3f1d1d; color: #fca5a5; } .jb-closed.big { font-size: 12.5px; padding: 5px 12px; } .jb-desc { margin: 11px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--jb-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jb-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .jb-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--jb-soft); color: var(--jb-dim); } .jb-cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 17px 14px; border-top: 1px solid var(--jb-line-soft); } .jb-pay { font-size: 14.5px; font-weight: 700; color: var(--jb-text); } .jb-pay.muted { font-weight: 450; color: var(--jb-dim); font-size: 13px; } .jb-cardacts { display: flex; align-items: center; gap: 11px; } .jb-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--jb-dim); } .jb-save { border: 0; background: none; padding: 3px; cursor: pointer; color: var(--jb-dim); border-radius: 7px; } .jb-save:hover { background: var(--jb-soft); color: var(--jb-accent); } .jb-save.on { color: var(--jb-accent); } /* --- offer card --- */ .of-card { border: 1px solid var(--jb-line); border-radius: 15px; background: var(--jb-card); overflow: hidden; box-shadow: var(--jb-shadow); transition: transform .22s cubic-bezier(.3, 1.2, .4, 1), box-shadow .22s, border-color .22s; } .of-card:hover { transform: translateY(-3px); border-color: var(--of-accent); box-shadow: 0 14px 32px rgba(16, 24, 40, .12); } .of-card.expired { opacity: .58; } .of-cardlink { display: block; color: inherit; text-decoration: none; } .of-art { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(135deg, #fed7aa, #fdba74); color: #9a3412; overflow: hidden; } .dark .of-art { background: linear-gradient(135deg, #3a2412, #4a2d13); color: #f5a962; } .of-art img { width: 100%; height: 100%; object-fit: cover; } .of-deal { position: absolute; left: 11px; bottom: 11px; padding: 6px 12px; border-radius: 9px; background: var(--of-accent); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); } .dark .of-deal { color: #1a1207; } .of-deal.big { position: static; font-size: 17px; padding: 9px 18px; } .of-over { position: absolute; top: 11px; right: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 11px; font-weight: 650; } .of-body { padding: 14px 15px 10px; } .of-title { margin: 0; font-size: 15px; font-weight: 660; line-height: 1.3; color: var(--jb-text); } .of-desc { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--jb-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .of-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; } .of-was { font-size: 13px; text-decoration: line-through; color: var(--jb-dim); } .of-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--jb-soft); color: var(--jb-dim); } .of-tag.gone { background: #fee2e2; color: #991b1b; } .dark .of-tag.gone { background: #3f1d1d; color: #fca5a5; } .of-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 15px 13px; border-top: 1px solid var(--jb-line-soft); } .of-by { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--jb-dim); text-decoration: none; } .of-by:hover { color: var(--jb-text); } .of-acts { display: flex; align-items: center; gap: 10px; } .of-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--jb-dim); } .of-save { border: 0; background: none; padding: 3px; cursor: pointer; color: var(--jb-dim); border-radius: 7px; } .of-save:hover { background: var(--jb-soft); color: var(--of-accent); } .of-save.on { color: var(--of-accent); } /* --- rail --- */ .jb-railtitle { margin: 0 0 11px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--jb-dim); } .jb-cats { display: flex; flex-direction: column; gap: 1px; } .jb-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; font-size: 13.5px; text-align: left; color: var(--jb-text); cursor: pointer; } .jb-cat:hover { background: var(--jb-soft); } .jb-cat.on { background: var(--jb-accent-soft); color: var(--jb-accent); font-weight: 600; } .jb-cat.on.offers { background: var(--of-accent-soft); color: var(--of-accent); } .jb-catn { font-size: 12px; color: var(--jb-dim); } /* --- detail --- */ .jb-hero-img { width: 100%; max-height: 260px; object-fit: cover; display: block; } .of-detailart { position: relative; aspect-ratio: 21 / 7; display: grid; place-items: center; gap: 10px; background: linear-gradient(135deg, #fed7aa, #fdba74); color: #9a3412; overflow: hidden; } .dark .of-detailart { background: linear-gradient(135deg, #3a2412, #4a2d13); color: #f5a962; } .of-detailart img { width: 100%; height: 100%; object-fit: cover; } .of-detailart.expired { filter: grayscale(.65); } .jb-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 0; } .jb-dtitle { margin: 0; font-size: 24px; font-weight: 720; line-height: 1.22; letter-spacing: -.015em; color: var(--jb-text); } .jb-dby { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 13.5px; color: var(--jb-dim); text-decoration: none; } .jb-dby:hover { color: var(--jb-text); } .jb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 20px 0 0; background: var(--jb-line); border-top: 1px solid var(--jb-line); border-bottom: 1px solid var(--jb-line); } .jb-fact { display: flex; flex-direction: column; gap: 4px; padding: 13px 22px; background: var(--jb-card); } .jb-flabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--jb-dim); font-weight: 600; } .jb-fvalue { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; font-weight: 620; color: var(--jb-text); } .jb-body { padding: 20px 22px; font-size: 14.5px; line-height: 1.7; color: var(--jb-text); } .jb-body p { margin: 0 0 13px; } .jb-body p:last-child { margin: 0; } /* The action bar at the foot of the advert — where Apply lives. */ .jb-dfoot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--jb-line); background: var(--jb-soft); } .jb-dfoot .jb-owner { display: flex; gap: 8px; flex-wrap: wrap; } .jb-applied { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #15803d; } .dark .jb-applied { color: #4ade80; } /* --- the poster's card in the rail --- */ .jb-who { display: flex; align-items: center; gap: 11px; } .jb-whoname { font-size: 14.5px; font-weight: 620; color: var(--jb-text); } .jb-whohandle { font-size: 12.5px; color: var(--jb-dim); } .jb-stat { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13.5px; } .jb-stat + .jb-stat { border-top: 1px solid var(--jb-line-soft); } .jb-statk { color: var(--jb-dim); } .jb-statv { font-weight: 620; color: var(--jb-text); } /* --- modals: create, apply, applications --- */ .jb-modal { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; background: var(--jb-card); border: 1px solid var(--jb-line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); color: var(--jb-text); } .jb-mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--jb-line); } .jb-mtitle { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 17px; font-weight: 680; } .jb-mx { border: 0; background: none; color: var(--jb-dim); cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; } .jb-mx:hover { background: var(--jb-soft); color: var(--jb-text); } .jb-mbody { padding: 18px 20px; overflow-y: auto; } .jb-mfoot { padding: 14px 20px; border-top: 1px solid var(--jb-line); background: var(--jb-soft); } .jb-sec + .jb-sec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--jb-line-soft); } .jb-label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 620; color: var(--jb-text); } .jb-label + .jb-field, .jb-label + .jb-row { margin-bottom: 14px; } .jb-req { color: #dc2626; } .dark .jb-req { color: #f87171; } .jb-opt { font-weight: 450; color: var(--jb-dim); font-size: 12px; } .jb-hint { font-size: 12.5px; color: var(--jb-dim); margin: -8px 0 14px; } .jb-field { width: 100%; padding: 11px 13px; border: 1px solid var(--jb-field-line); border-radius: 10px; background: var(--jb-field); font-size: 14px; font-family: inherit; color: var(--jb-text); transition: border-color .15s, box-shadow .15s; } .jb-field:focus { outline: 0; border-color: var(--jb-accent); box-shadow: 0 0 0 3px var(--jb-accent-soft); } .jb-field::placeholder { color: var(--jb-dim); } textarea.jb-field { resize: vertical; min-height: 90px; line-height: 1.55; } .jb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 520px) { .jb-row { grid-template-columns: 1fr; } } /* The salary range: two boxes with a bar between them, so it reads as one control rather than two inputs floating on a white page. */ .jb-range { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 6px; } @media (max-width: 560px) { .jb-range { grid-template-columns: 1fr; } } .jb-rangebar { width: 1px; height: 22px; background: var(--jb-field-line); } @media (max-width: 560px) { .jb-rangebar { display: none; } } .jb-money { position: relative; display: flex; align-items: center; } .jb-cur { position: absolute; left: 12px; font-size: 14px; font-weight: 600; color: var(--jb-dim); pointer-events: none; } .jb-money .jb-field { padding-left: 28px; } .jb-chips { display: flex; flex-wrap: wrap; gap: 8px; } .jb-chip { padding: 9px 15px; border: 1px solid var(--jb-field-line); border-radius: 10px; background: var(--jb-field); font-size: 13.5px; font-weight: 550; color: var(--jb-text); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .jb-chip:hover { border-color: var(--jb-accent); } .jb-chip.on { background: var(--jb-accent); border-color: transparent; color: #fff; } .jb-chip.on.offers { background: var(--of-accent); } .jb-chip.offers:hover { border-color: var(--of-accent); } .jb-q { border: 1px solid var(--jb-line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--jb-soft); } .jb-qtop { display: grid; grid-template-columns: 1fr 156px 36px; gap: 8px; align-items: center; } @media (max-width: 560px) { .jb-qtop { grid-template-columns: 1fr; } } .jb-qdel { border: 0; background: none; color: #dc2626; cursor: pointer; padding: 7px; border-radius: 8px; } .jb-qdel:hover { background: rgba(220, 38, 38, .1); } .jb-addq { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1px dashed var(--jb-field-line); border-radius: 10px; background: none; font-size: 13.5px; color: var(--jb-dim); cursor: pointer; } .jb-addq:hover { border-color: var(--jb-accent); color: var(--jb-accent); } .jb-cover { width: 100%; max-height: 170px; object-fit: cover; border-radius: 11px; margin-top: 10px; } .jb-error { margin: 14px 0 0; padding: 10px 13px; border-radius: 10px; background: #fee2e2; color: #991b1b; font-size: 13.5px; } .dark .jb-error { background: #3f1d1d; color: #fca5a5; } .jb-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 4px 0 14px; color: var(--jb-text); } /* --- applications, in their own window --- */ .jb-apps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .jb-app { border: 1px solid var(--jb-line); border-radius: 13px; padding: 14px; background: var(--jb-card); } .jb-app.declined { opacity: .55; } .jb-app.shortlisted { border-color: #86efac; } .dark .jb-app.shortlisted { border-color: #166534; } .jb-apphead { display: flex; align-items: center; gap: 10px; } .jb-apphead strong { display: block; font-size: 14.5px; color: var(--jb-text); } .jb-appwhen { font-size: 11.5px; color: var(--jb-dim); } .jb-status { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--jb-soft); color: var(--jb-dim); text-transform: capitalize; } .jb-status.shortlisted { background: #dcfce7; color: #15803d; } .dark .jb-status.shortlisted { background: #14532d; color: #86efac; } .jb-status.declined { background: #fee2e2; color: #991b1b; } .dark .jb-status.declined { background: #3f1d1d; color: #fca5a5; } .jb-appcontact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--jb-dim); } .jb-appcontact a, .jb-appcontact span { display: inline-flex; align-items: center; gap: 5px; color: inherit; } .jb-appcontact a:hover { color: var(--jb-accent); } .jb-appwork { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--jb-dim); } .jb-answer { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--jb-text); } .jb-answer span { display: block; font-weight: 620; color: var(--jb-dim); font-size: 11.5px; margin-bottom: 2px; } .jb-cv { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--jb-accent); } .jb-appacts { display: flex; gap: 8px; margin-top: 12px; } .jb-pill { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--jb-accent-soft); color: var(--jb-accent); font-weight: 650; } /* ===== Theme switcher — picture tiles ================================== Was a list: a 40px swatch, a name, a tick. You cannot choose a *look* from a list of names, so the preview is now the option itself, at a size where the layout is actually legible. */ /* The earlier rule caps this at 400px, which is right for a list of names and too narrow for pictures — the tiles stacked one per row. */ /* Wide enough for two tiles side by side and no wider — the 400px cap above suits a list of names, not pictures. */ .ts-panel { width: min(560px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px)); } .ts-grid { display: grid; /* auto-fit, not auto-fill: with two themes installed, auto-fill left an empty third column and a band of white down the side. */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 13px; margin-top: 14px; max-height: 62vh; overflow-y: auto; padding: 2px; } .ts-tile { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; /* The ring lives here so it never clips against the image's corners. */ box-shadow: 0 0 0 1px var(--jb-line); transition: box-shadow .18s, transform .18s; } .ts-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--jb-accent), 0 12px 26px rgba(16, 24, 40, .14); } .ts-tile.on { box-shadow: 0 0 0 2px var(--jb-accent), 0 10px 24px rgba(79, 70, 229, .22); } .ts-shot { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; background: var(--jb-soft); } .ts-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* No picture shipped: the old gradient, so the tile still says something. */ .ts-shot.noshot { background: linear-gradient(135deg, #a5b4fc, #6366f1); } .ts-shot.noshot[data-theme="default"] { background: linear-gradient(135deg, #e2e8f0, #94a3b8); } .ts-shot.noshot[data-theme="golden"] { background: linear-gradient(135deg, #fcd9b6, #f0a06a); } /* The name, on the picture. */ .ts-plate { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; text-align: left; background: linear-gradient(to top, rgba(9, 9, 12, .86) 32%, transparent); color: #fff; } .ts-plate b { display: block; font-size: 14.5px; font-weight: 680; line-height: 1.25; } .ts-plate em { display: block; font-style: normal; font-size: 11.5px; opacity: .72; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ts-mark { position: absolute; top: 9px; right: 9px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--jb-accent); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); } .ts-mark.busy { background: rgba(9, 9, 12, .7); } /* A real screenshot on Settings → Themes, where only a sketch was drawn. */ .th-preview.has-shot { padding: 0; overflow: hidden; border-color: transparent; } .th-preview.has-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* ===== Theme list (admin) ============================================= A row per theme: the picture, what it is, and every switch on one line. The card grid this replaced gave two themes a whole screen and left most of it empty. */ .tlist { padding: 6px; } .tlist-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; } .tlist-row + .tlist-row { border-top: 1px solid var(--jb-line-soft); } .tlist-row:hover { background: var(--jb-soft); } .tlist-row.is-default { background: var(--jb-accent-soft); } /* Big enough to recognise the layout, small enough to stay a row. */ .tlist-shot { flex: 0 0 132px; height: 82px; border-radius: 9px; overflow: hidden; background: var(--jb-soft); border: 1px solid var(--jb-line); } .tlist-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .tlist-shot i { display: block; width: 100%; height: 100%; border-left: 3px solid; } .tlist-name { flex: 1; min-width: 0; } .tlist-name b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 660; color: var(--jb-text); } .tlist-name em { display: block; font-style: normal; font-size: 12.5px; color: var(--jb-dim); margin-top: 3px; } .tlist-flag { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; background: var(--jb-accent); color: #fff; font-size: 12.5px; font-weight: 650; } .tlist-acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } .tlist-acts button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--jb-field-line); border-radius: 9px; background: var(--jb-card); font-size: 12.5px; font-weight: 550; color: var(--jb-text); cursor: pointer; } .tlist-acts button:hover { background: var(--jb-soft); } .tlist-make { background: var(--jb-accent) !important; border-color: transparent !important; color: #fff !important; } .tlist-make:hover { background: var(--jb-accent-hi) !important; } .tlist-pick.on { color: #15803d; border-color: #bbe7c9; } .dark .tlist-pick.on { color: #4ade80; border-color: #14532d; } .tlist-update.has-new { color: var(--jb-accent); border-color: var(--jb-accent); } .tlist-del { padding: 7px 9px !important; color: #dc2626; border-color: transparent !important; } .tlist-del:hover { background: rgba(220, 38, 38, .1) !important; } .tlist-del:disabled { opacity: .3; cursor: default; } .dark .tlist-del { color: #f87171; } @media (max-width: 720px) { .tlist-row { flex-wrap: wrap; } .tlist-acts { width: 100%; justify-content: flex-start; } } /* Golden's request panel: the buttons belong on the name's row. They were nested inside the name column, so each request took three lines and the panel showed one person at a time. */ .gv-reqrow { align-items: center; } .gv-reqacts { display: flex; gap: 6px; flex: none; margin-left: auto; } .gv-req-yes, .gv-req-no { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; cursor: pointer; } .gv-req-yes:disabled, .gv-req-no:disabled { opacity: .5; cursor: default; } /* The reel-of-the-day clip fills its frame like the still it replaced, and the play badge steps back once it is actually playing. */ .gv-reelday-art video { width: 100%; height: 100%; object-fit: cover; display: block; } .gv-play { transition: opacity .22s, transform .22s; } .gv-play.playing { opacity: 0; transform: scale(.85); } /* ===== Reels: step up and down ========================================= Beside the reel, in the black — not on top of it. A control laid over the video covers the thing you are trying to watch, and on a reel the subject is usually dead centre. */ .rl-nav { position: fixed; right: max(24px, calc(50vw - 420px)); top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px; } .rl-navbtn { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background .16s, transform .16s, opacity .16s; } .rl-navbtn:hover { background: rgba(255, 255, 255, .18); } .rl-navbtn:active { transform: scale(.93); } .rl-navbtn:disabled { opacity: .25; cursor: default; } .rl-navbtn:disabled:hover { background: rgba(255, 255, 255, .08); } .rl-navcount { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .55); } /* No room for them on a narrow screen, and a thumb scrolls anyway. */ @media (max-width: 900px) { .rl-nav { display: none; } } /* ===== Reels: one screen, and it stays there ===== The player fills the viewport and scrolls inside itself. The document must not scroll too, or the page slides up past the black and shows the site's white background underneath it. Only while the page is open. */ html.reels-locked, body.reels-locked { height: 100%; overflow: hidden; overscroll-behavior: none; } /* Anything that does show through is black, not white. */ body.reels-locked { background: #000; } /* A site banner normally pushes the whole shell down 42px. Added to a full-height player that made the page 42px taller than the screen — which is the scroll this is here to remove. The player gives up the height instead of the page growing. */ body.reels-locked .app-shell { padding-top: 0; } @media (min-width: 768px) { .rl-stage { height: 100dvh; } body:has(.site-banner) .rl-stage { height: calc(100dvh - 42px); margin-top: 42px; } } /* ── The submit button on the create popups ─────────── Group, Page, Listing, Event, Article — they all end in .cl-post. It had turned into a flat red slab with its label shoved against the left edge: an early rule made it a full-width block, a much later one redefined it as an inline-flex for the admin pages and never said to centre the contents. This puts it back together as one button. */ .cl-post { justify-content: center; text-align: center; } .cl-foot .cl-post { width: 100%; padding: 13px 20px; border-radius: 14px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #fff; background-color: var(--primary, #e11d48); /* A little light across the top, so it reads as a raised button rather than a painted rectangle. */ background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 62%); box-shadow: 0 8px 20px rgba(225, 29, 72, .26); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s; } .cl-foot .cl-post:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 13px 28px rgba(225, 29, 72, .34); } .cl-foot .cl-post:active:not(:disabled) { transform: translateY(0); } .cl-foot .cl-post:disabled { opacity: .45; box-shadow: none; transform: none; } /* Blogs puts "Save draft" beside it; the pair should match in height. */ .bl-foot-btns .bl-draft { padding: 13px 22px; border-radius: 14px; font-size: 15px; font-weight: 700; transition: background .2s, transform .2s; } .bl-foot-btns .bl-draft:hover { transform: translateY(-2px); } /* The repost spin. Same curve as the reels player's, so pressing repost feels the same wherever you do it. */ .rp-btn.spinning svg { animation: pa-spin .6s cubic-bezier(.34, 1.4, .64, 1); } .rp-btn svg { transition: transform .18s; } .rp-btn:hover svg { transform: rotate(-12deg) scale(1.08); } /* ── People you may know, at story size ─────────────── The cards were a fifth of the column each and taller than they were wide, so a strip of five loomed over the stories directly above them. Square, and near enough the same tile as a story. */ .fs-person { /* A story tile measures 76x108 — ring plus label. These are meant to read as the same size, so they sit at 80x108: four extra pixels of width for the button, which a story does not have. */ flex: 0 0 80px; width: 80px; /* A fixed height, not aspect-ratio: the contents were taller than a square and simply pushed past it, so the tiles came out 100x110 and the row looked unfinished. */ height: 108px; padding: 8px 5px; gap: 2px; border-radius: 18px; justify-content: center; overflow: hidden; } .fs-av { width: 46px; height: 46px; flex: none; } .fs-name { font-size: 10.5px; line-height: 1.25; } /* No room for it at this size, and it was the least useful line. */ .fs-person .fs-mut { display: none; } .fs-add { margin-top: 1px; padding: 4px 8px; font-size: 9.5px; } /* ── A post's words, and the fold ───────────────────── Replaces the utility classes the paragraph used to carry, so the fold and the type live in one place. */ .pc-text { margin-top: 8px; padding: 0 4px; font-size: 15px; line-height: 1.625; white-space: pre-wrap; overflow-wrap: anywhere; } .pc-text.folded { display: -webkit-box; -webkit-line-clamp: var(--pc-lines, 4); -webkit-box-orient: vertical; overflow: hidden; } /* The accent, so it reads as the one thing here you can press. */ .pc-more { margin: 2px 0 0 4px; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.625; color: var(--primary, #e11d48); background: none; transition: opacity .18s; } .pc-more:hover { opacity: .75; text-decoration: underline; } /* ── The action icons ───────────────────────────────── They were 24px at stroke 2 — heavy enough that five of them read as a band of black rather than five things you can press. Smaller, lighter, and the count in the same grey as the icon beside it. */ .pa-row .pa-btn svg { width: 20px; height: 20px; stroke-width: 1.7; } .pa-row .pa-btn { color: #536471; font-size: 13.5px; font-weight: 500; } .dark .pa-row .pa-btn { color: #8b98a5; } .pa-row .pa-count { font-size: 13.5px; font-weight: 500; letter-spacing: 0; } .pa-views svg { width: 20px; height: 20px; stroke-width: 1.7; } .pa-views { color: #536471; } .dark .pa-views { color: #8b98a5; } /* ── The left menu, uncased ─────────────────────────── It sat in a white card with a border, which made the navigation look like another panel of content rather than the frame around it. The card goes; the rail is just the rows, and the active one keeps its pill. */ .sb-rail .sb-card { background: none; border: 0; padding: 8px 0 12px; } .sb-rail .sb-pinned.sb-card { padding: 4px 0; margin-top: 6px; } .sb-rail .sb-brand { padding-left: 8px; } /* ── The rows, measured off the reference ──────────── I shrank these to 17px on 48px by eye last time and it made the menu worse: the Create button below kept its width and so came to dominate rows that had got smaller. Measured properly, the reference sits at 50px rows, a 20px label at 600 (700 on the current page), a 27px icon and a #f1f1f1 pill — which is what this menu already had before I touched it. Back to it. */ .sb-rail .sb-nav-item { height: 50px; min-height: 50px; padding: 0 20px 0 12px; gap: 20px; font-size: 20px; font-weight: 600; } .sb-rail .sb-nav-item svg { width: 27px; height: 27px; } .sb-rail .sb-nav-item.on { font-weight: 700; } /* ── Create, deliberately quieter than the rows ─────── The reference button is the same 200x50 as its rows, which reads as a seventh menu item rather than an action. Ours is shorter, with a smaller label and icon, so it sits under the list instead of competing with it. */ .sb-rail .sb-create { /* An explicit width, not auto: this is a flex element in a block container, so auto would stretch it across the whole rail — the opposite of the point. */ width: 176px; max-width: 100%; height: 44px; gap: 9px; padding: 0 20px; margin: 14px 0 4px; font-size: 16px; font-weight: 600; } .sb-rail .sb-create svg { width: 20px; height: 20px; } /* Seven rows of 50px, so nothing is sliced above the chevron. */ .sb-rail .sb-navwrap { height: 350px; } /* The active row was a pale grey pill, which worked while the menu sat on a white card. On the page's own grey it disappeared — so it is white now, which is the same idea the other way up. */ .sb-rail .sb-nav-item.on { background: #fff !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .07); } .dark .sb-rail .sb-nav-item.on { background: #1c1f26 !important; box-shadow: none; } /* ── "Read more", on the last line ──────────────────── It was a line of its own under the text, which pushed the fold open by a line and read as a separate thing. Sitting it at the end of the last visible line means the clamp's own ellipsis runs straight into it. It has to be positioned rather than inline: an inline element at the end of a clamped paragraph is clipped along with the text it follows. */ .pc-textwrap { position: relative; display: block; } .pc-body .pc-text { padding-right: 34px; } .pc-more { position: absolute; right: 4px; bottom: 0; margin: 0; padding: 0 0 0 34px; /* Fades out of the paper so it never lands mid-word. */ background: linear-gradient(to right, transparent, var(--pc-paper, #fff) 28px); } .dark { --pc-paper: #16181c; } .gv { --pc-paper: var(--gv-surface); } /* ── Most read, lined up ────────────────────────────── Titles wrapped to two lines, which made every row a different height and left the view count floating at whatever the middle of that row happened to be. One line each, and the count sits on the title's line at the right where it can be compared down the column. */ .bl-sirow { align-items: flex-start; gap: 10px; padding: 10px 0; } .bl-sirow > b { width: 14px; text-align: center; line-height: 1.35; padding-top: 1px; } .bl-sirow em { display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bl-sirow > .bl-sireads { /* .bl-sirow > span sets flex:1, and it matched this span too — the chip was stretching across the leftover width. Invisible until it had a background. */ flex: none; align-self: flex-start; gap: 5px; padding: 3px 8px; border-radius: 8px; font-size: 11.5px; color: #71717a; background: #f4f4f7; } .dark .bl-sireads { color: #a1a1aa; background: #1f1f26; } .gv .bl-sireads { color: var(--gv-ink-muted); background: var(--gv-input); } /* A chevron with nowhere to go fades rather than leaving, so nothing under it moves as the menu scrolls. */ .sb-chev:disabled { opacity: 0; pointer-events: none; } /* The composer's shortcut row is the theme's call. Off here; Golden turns it back on, where it is part of the design rather than an extra row under the box. */ .cpt-tools { display: none; } /* ── The rail, closer in ────────────────────────────── Measured against the reference: its rail is 256px, ours was 290. The rows inside are fit-content in both, so those extra 34px were dead space between the last letter of a menu label and the edge of the feed. */ .sb-rail { max-width: 256px; } /* ── The current page's icon is filled ──────────────── The reference draws the active row's icon solid — fill set to the text colour, no stroke — and every other one as a 2px outline. It is what makes that menu read as modern rather than as a list of glyphs. */ .sb-rail .sb-nav-item svg { stroke-width: 2; } .sb-rail .sb-nav-item.on svg { fill: currentColor; stroke: currentColor; stroke-width: 2.5; } /* The leaderboard, in the shared frame. It used to be a 1000px page of its own. In the feed column it has to be able to shrink, and two things stopped it: the podium is a three-track grid, and a 1fr track will not go below its own content unless told; and the header text carried a 200px floor. Without both, the page pushed the whole layout sideways and put a scrollbar under the window. */ /* The width has to be stated here: .lb-page's own "width: 100%" comes later in this file than .app-col's 600px, so it won. 100% of a flex parent is the whole row, which is how the page came to be a thousand pixels wide inside a six-hundred pixel column. */ .app-col.lb-page { width: 600px; max-width: 100%; min-width: 0; margin: 0 20px 0 0; padding: 18px 0 40px; } .app-col.lb-page > * { min-width: 0; } .lb-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lb-pod { min-width: 0; } .lb-podname, .lb-podhandle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-col.lb-page .lb-headtext { min-width: 0; } /* ── Sticky side columns, not shoved down ───────────── .jb-rail, .bl-side and .cf-side were all "sticky; top: 76-96px", a number chosen for a fixed site header. Sticky does not only hold an element back — when `top` is larger than where the element naturally sits, it pushes it DOWN to meet it. These columns start 18px from the top of their page, so a 76px offset dropped them 58px below the column beside them and they never lined up. Offset matched to where they actually start; the theme with a fixed header sets its own below. */ .jb-rail, .bl-side, .cf-side { top: 18px; } .gv .jb-rail, .gv .bl-side, .gv .cf-side { top: 96px; } /* The funding page's left column, so its empty state and its grid share one track rather than the message spanning the whole page. */ .cf-colmain { min-width: 0; } .cf-colmain .cf-empty { padding: 40px 0; } /* The menu's scroll chevrons sit over the menu, not over the rail. The rail is 256px but its rows and the Create button are a ~176px block down the left of it, so a chevron centred on the full width looked shoved to the right of everything above it. */ .sb-rail .sb-chev { width: 176px; }