). */ body.page-community { /* deep purple base */ --cmv-ink0: #140c26; /* deepest — image dissolves into this */ --cmv-base: #1a1030; --cmv-base2: #221540; --cmv-base3: #2a1a52; /* violet accents */ --cmv-violet: #8b5cf6; --cmv-violet2: #a855f7; --cmv-violet-soft: #b794f6; /* coral + warm pink */ --cmv-coral: #ff6b6b; --cmv-coral2: #ff7a59; --cmv-pink: #f472b6; /* near-neutral dark glass — only a whisper of the accent hue */ --cmv-glass: linear-gradient(168deg, rgba(139,92,246,0.05), rgba(24,15,42,0.55) 58%, rgba(20,12,36,0.66)); --cmv-glass-strong: linear-gradient(168deg, rgba(139,92,246,0.06), rgba(26,16,46,0.8)); --cmv-line: rgba(168,132,255,0.12); --cmv-line-soft: rgba(168,132,255,0.07); /* hairline card edge — a faint violet-tinted 1px line (no bright ring) */ --cmv-border: linear-gradient(150deg, rgba(168,132,255,0.16), rgba(168,132,255,0.05)); --cmv-border-hot: linear-gradient(150deg, rgba(200,150,255,0.20), rgba(168,132,255,0.06)); /* ONE soft shadow at rest; gentle deepen + a FAINT accent ambient on hover */ --cmv-shadow: 0 16px 38px -22px rgba(6,3,16,0.72), 0 2px 8px rgba(0,0,0,0.30); --cmv-glow-violet: 0 24px 50px -26px rgba(6,3,16,0.72), 0 0 26px -8px rgba(139,92,246,0.16); --cmv-glow-coral: 0 24px 50px -26px rgba(6,3,16,0.72), 0 0 26px -8px rgba(255,107,107,0.13); /* soft top-light used across every card */ --cmv-toplight: inset 0 1px 0 rgba(255,255,255,0.06); } /* reveal + count-up shared motion */ .cm2-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .cm2-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cm2-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ 1 · SECTION SCAFFOLDING + SIGNATURE EYEBROW ============================================================ */ .cm2-section { margin: 0 0 48px; } .cm2-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; } .cm2-head .kick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cmv-violet-soft); } .cm2-head h2 { font-size: clamp(22px, 2.6vw, 31px); font-weight: 820; letter-spacing: -0.028em; margin: 0; line-height: 1.05; color: var(--ink); } .cm2-head .sub { flex-basis: 100%; font-size: 14px; color: var(--ink-muted); margin: 3px 0 0; line-height: 1.58; max-width: 760px; } .cm2-head .more { margin-left: auto; font-size: 13px; font-weight: 660; color: var(--ink-muted); text-decoration: none; white-space: nowrap; align-self: center; transition: color .18s var(--ease); } .cm2-head .more:hover { color: var(--cmv-coral); } /* signature eyebrow: a small glowing VIOLET dot (coral on alternating heads) */ .cm2-head .kick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--cmv-violet2); box-shadow: 0 0 10px 1px rgba(168,85,247,0.9), 0 0 3px rgba(244,114,182,0.8); } /* every other section head leans coral, so the palette reads as a duo */ .cm2-section:nth-of-type(even) .cm2-head .kick { color: var(--cmv-coral); } .cm2-section:nth-of-type(even) .cm2-head .kick::before { background: var(--cmv-coral); box-shadow: 0 0 10px 1px rgba(255,107,107,0.9), 0 0 3px rgba(244,114,182,0.7); } .cm2-head .kick:has(.cm2-live-dot)::before { display: none; } .cm2-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cmv-coral); box-shadow: 0 0 0 0 rgba(255,107,107,0.6); animation: cm2Pulse 2s var(--ease-out) infinite; } @keyframes cm2Pulse { 0% { box-shadow: 0 0 0 0 rgba(255,107,107,0.55); } 70% { box-shadow: 0 0 0 8px rgba(255,107,107,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); } } @media (prefers-reduced-motion: reduce) { .cm2-live-dot { animation: none; } } /* ============================================================ 2 · CINEMATIC HERO ============================================================ */ .cm2-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-l); border: 1px solid transparent; margin: 10px 0 42px; padding: 64px 52px 54px; min-height: 340px; background: radial-gradient(680px 400px at 12% 2%, rgba(168,85,247,0.30), transparent 60%), radial-gradient(760px 500px at 98% 20%, rgba(255,107,107,0.22), transparent 62%), radial-gradient(600px 460px at 78% 108%, rgba(244,114,182,0.16), transparent 60%), linear-gradient(162deg, #241548 0%, #180e2e 56%, #140c26 100%); box-shadow: var(--cmv-glow-violet); } /* gradient glass border on the hero */ .cm2-hero::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1px; background: var(--cmv-border); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .cm2-hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; background-image: linear-gradient(rgba(183,148,246,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(183,148,246,0.06) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask: radial-gradient(130% 100% at 68% 16%, #000 18%, transparent 74%); mask: radial-gradient(130% 100% at 68% 16%, #000 18%, transparent 74%); } .cm2-hero-glow { position: absolute; width: 500px; height: 500px; right: -100px; top: -150px; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,0.32), rgba(255,107,107,0.12) 45%, transparent 70%); filter: blur(26px); animation: cm2Glow 20s ease-in-out infinite; } @keyframes cm2Glow { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,26px) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .cm2-hero-glow { animation: none; } } .cm2-hero-inner { position: relative; z-index: 3; max-width: 680px; } .cm2-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono, monospace); font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cmv-violet-soft); } .cm2-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--cmv-pink), var(--cmv-violet2)); box-shadow: 0 0 12px 2px rgba(168,85,247,0.9); animation: cm2DotPulse 2.4s var(--ease-out) infinite; } @keyframes cm2DotPulse { 0%,100% { box-shadow: 0 0 12px 2px rgba(168,85,247,0.85); } 50% { box-shadow: 0 0 18px 4px rgba(244,114,182,0.9); } } @media (prefers-reduced-motion: reduce) { .cm2-eyebrow::before { animation: none; } } .cm2-title { font-size: clamp(38px, 6vw, 68px); font-weight: 840; letter-spacing: -0.035em; line-height: 1.0; margin: 16px 0 0; color: #fff; } .cm2-title em { font-style: normal; background: linear-gradient(115deg, #f9d3ea 0%, var(--cmv-pink) 30%, var(--cmv-violet2) 62%, var(--cmv-coral) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cm2-sub { font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); margin: 18px 0 0; max-width: 560px; } .cm2-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; } /* recolor the primary CTA to the section identity (violet -> coral) */ .cm2-hero-cta { font-size: 15px; padding: 13px 26px; border: 0; color: #fff; background: linear-gradient(120deg, var(--cmv-violet2) 0%, var(--cmv-violet) 40%, var(--cmv-coral) 130%); box-shadow: 0 14px 34px -10px rgba(168,85,247,0.6), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.18); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s var(--ease-out); } .cm2-hero-cta:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); box-shadow: 0 20px 46px -10px rgba(255,107,107,0.55), 0 8px 22px -8px rgba(168,85,247,0.5), inset 0 1px 0 rgba(255,255,255,0.45); } .cm2-hero-ghost { font-size: 14px; font-weight: 660; color: var(--ink-soft); text-decoration: none; transition: color .18s var(--ease); } .cm2-hero-ghost:hover { color: var(--cmv-pink); } .cm2-hero-ghost span { transition: transform .2s var(--ease-out); display: inline-block; } .cm2-hero-ghost:hover span { transform: translateX(4px); } .cm2-hero-stats { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 34px; } .cm2-hstat { display: flex; flex-direction: column; gap: 2px; } .cm2-hstat .n { font-size: 28px; font-weight: 820; letter-spacing: -0.02em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .cm2-hstat .n.gold { background: linear-gradient(120deg, var(--cmv-violet-soft), var(--cmv-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cmv-violet-soft); } .cm2-hstat .l { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); } .cm2-hstat + .cm2-hstat { padding-left: 30px; border-left: 1px solid var(--cmv-line); } /* floating build-thumb collage on the right of the hero — dissolves into purple */ .cm2-hero-collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .cm2-hero-collage .cm2-float { position: absolute; border-radius: 18px; overflow: hidden; border: 1px solid rgba(183,148,246,0.28); box-shadow: 0 30px 66px -20px rgba(10,4,24,0.85), var(--cmv-toplight); animation: cm2Float 9s ease-in-out infinite; } .cm2-hero-collage .cm2-float .thumb { width: 100%; height: 100%; } .cm2-hero-collage .cm2-float::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, transparent 34%, rgba(26,16,48,0.72)); } .cm2-hero-collage .f1 { width: 196px; height: 152px; right: 40px; top: 52px; transform: rotate(-4deg); } .cm2-hero-collage .f2 { width: 152px; height: 120px; right: 214px; top: 170px; transform: rotate(5deg); animation-delay: .8s; } .cm2-hero-collage .f3 { width: 126px; height: 102px; right: 20px; bottom: 40px; transform: rotate(6deg); animation-delay: 1.6s; } @keyframes cm2Float { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-13px) rotate(var(--r,0deg)); } } .cm2-hero-collage .f1 { --r: -4deg; } .cm2-hero-collage .f2 { --r: 5deg; } .cm2-hero-collage .f3 { --r: 6deg; } @media (prefers-reduced-motion: reduce) { .cm2-hero-collage .cm2-float { animation: none; } } @media (max-width: 960px) { .cm2-hero-collage { display: none; } } @media (max-width: 640px) { .cm2-hero { padding: 42px 24px 38px; border-radius: 22px; min-height: 0; } .cm2-title { font-size: 40px; } .cm2-hero-cta { width: 100%; } .cm2-hero-actions { gap: 14px; } .cm2-hero-stats { gap: 22px; margin-top: 28px; } .cm2-hstat + .cm2-hstat { padding-left: 22px; } } /* ============================================================ 3 · PRESTIGE CREATOR / COLLECTOR CARDS ============================================================ */ .cm2-collector-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 272px !important; gap: 18px; overflow-x: auto; padding: 6px 2px 16px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--cmv-line) transparent; } .cm2-collector-strip::-webkit-scrollbar { height: 8px; } .cm2-collector-strip::-webkit-scrollbar-thumb { background: var(--cmv-line); border-radius: 999px; } .cm2-collector-strip::-webkit-scrollbar-thumb:hover { background: rgba(168,132,255,0.32); } .cm2-collector { position: relative; scroll-snap-align: start; border-radius: var(--radius-l); overflow: hidden; border: 1px solid transparent; background: radial-gradient(150% 120% at 0% 0%, rgba(168,85,247,0.16), transparent 55%), var(--cmv-glass); background-clip: padding-box; display: flex; flex-direction: column; text-align: left; box-shadow: var(--cmv-shadow), var(--cmv-toplight); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out); } .cm2-collector::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; padding: 1px; background: var(--cmv-border); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.7; transition: opacity .45s var(--ease-out); } .cm2-collector:hover { transform: translateY(-6px); box-shadow: var(--cmv-glow-violet), var(--cmv-toplight); } .cm2-collector:hover::before { opacity: 1; background: var(--cmv-border-hot); } .cm2-collector-cover { position: relative; aspect-ratio: 16/8; overflow: hidden; } .cm2-collector-cover .thumb { width: 100%; height: 100%; transition: transform 1s var(--ease-out); } .cm2-collector:hover .cm2-collector-cover .thumb { transform: scale(1.07); } /* cover image dissolves into the card's purple base */ .cm2-collector-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(139,92,246,0.06) 0%, transparent 24%, rgba(26,16,48,0.55) 68%, rgba(20,12,36,0.92)); } .cm2-collector-rank { position: absolute; top: 11px; left: 11px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, rgba(168,85,247,0.45), rgba(255,107,107,0.35)); backdrop-filter: var(--glass-blur, blur(10px)); -webkit-backdrop-filter: var(--glass-blur, blur(10px)); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 4px 14px -4px rgba(10,4,24,0.7), inset 0 1px 0 rgba(255,255,255,0.25); font-family: var(--font-mono, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: #fff; } .cm2-collector-body { position: relative; padding: 0 16px 16px; margin-top: -28px; z-index: 2; } .cm2-collector-av { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); border: 2px solid rgba(183,148,246,0.35); box-shadow: 0 10px 24px -6px rgba(10,4,24,0.7), 0 0 0 4px rgba(139,92,246,0.10), inset 0 1px 0 rgba(255,255,255,0.3); } .cm2-collector-name { display: flex; align-items: center; gap: 5px; font-size: 15.5px; font-weight: 800; letter-spacing: -0.012em; margin: 12px 0 1px; color: var(--ink); } .cm2-collector-name svg { color: var(--cmv-violet2); } .cm2-collector-theme { font-size: 12px; color: var(--cmv-pink); font-weight: 680; } .cm2-collector-metrics { display: flex; gap: 16px; margin: 13px 0 14px; padding: 13px 0 0; border-top: 1px solid var(--cmv-line-soft); } .cm2-collector-metric { display: flex; flex-direction: column; gap: 1px; } .cm2-collector-metric .mn { font-size: 15px; font-weight: 820; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); } .cm2-collector-metric .mn.gold { color: var(--cmv-violet-soft); } .cm2-collector-metric .ml { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); } .cm2-collector-actions { display: flex; gap: 8px; } .cm2-collector-actions .btn { flex: 1; } /* ============================================================ 4 · PREMIUM BUILD / POST CARDS ============================================================ */ .cm2-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; } @media (max-width: 720px) { .cm2-feed { grid-template-columns: 1fr; gap: 18px; } } .post-card.cm2-card { position: relative; border-radius: var(--radius-l); overflow: hidden; border: 1px solid transparent; background: radial-gradient(160% 130% at 0% 0%, rgba(168,85,247,0.14), transparent 52%), linear-gradient(168deg, rgba(38,23,70,0.82) 0%, rgba(24,14,44,0.92) 60%, rgba(20,12,36,0.96) 100%); background-clip: padding-box; box-shadow: var(--cmv-shadow), var(--cmv-toplight); display: flex; flex-direction: column; margin: 0; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out); } /* gradient glass border, tinted with the section accent */ .post-card.cm2-card::before { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; padding: 1px; background: var(--cmv-border); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.65; transition: opacity .45s var(--ease-out), background .45s var(--ease-out); } .post-card.cm2-card:hover { transform: translateY(-7px); box-shadow: var(--cmv-glow-violet), var(--cmv-toplight); } .post-card.cm2-card:hover::before { opacity: 1; } .post-card.cm2-card.is-milestone::before { background: var(--cmv-border-hot); opacity: 0.85; } .post-card.cm2-card.is-milestone:hover { box-shadow: var(--cmv-glow-coral), var(--cmv-toplight); } .cm2-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; } .cm2-card-media .thumb, .cm2-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); } .post-card.cm2-card:hover .cm2-card-media .thumb, .post-card.cm2-card:hover .cm2-card-media img { transform: scale(1.07); } /* top-light + cinematic dissolve of the image bottom into the purple card base */ .cm2-card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 14%, transparent 40%, rgba(26,16,48,0.5) 74%, rgba(20,12,36,0.96) 100%); } .cm2-badge-row { position: absolute; top: 13px; left: 13px; right: 13px; z-index: 3; display: flex; align-items: center; gap: 8px; } /* premium capsule badges (tinted glass + inner light + icon dot) */ .cm2-type-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; background: linear-gradient(160deg, rgba(40,24,74,0.72), rgba(24,14,44,0.82)); backdrop-filter: var(--glass-blur, blur(10px)); -webkit-backdrop-filter: var(--glass-blur, blur(10px)); border: 1px solid rgba(183,148,246,0.28); box-shadow: 0 4px 14px -4px rgba(10,4,24,0.65), inset 0 1px 0 rgba(255,255,255,0.14); font-size: 11px; font-weight: 760; letter-spacing: 0.015em; color: #fff; } .cm2-type-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px 1px currentColor; background: currentColor; } .cm2-type-pill.t-moc { color: var(--cmv-violet-soft); border-color: rgba(168,85,247,0.5); } .cm2-type-pill.t-milestone { color: var(--cmv-coral); border-color: rgba(255,107,107,0.5); } .cm2-type-pill.t-build { color: var(--cmv-pink); border-color: rgba(244,114,182,0.5); } .cm2-type-pill.t-moc, .cm2-type-pill.t-milestone, .cm2-type-pill.t-build { } .cm2-staff { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,122,89,0.9), rgba(244,114,182,0.85)); border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 5px 16px -4px rgba(255,107,107,0.6), inset 0 1px 0 rgba(255,255,255,0.4); font-size: 10.5px; font-weight: 820; letter-spacing: 0.03em; color: #fff; text-shadow: 0 1px 2px rgba(120,20,40,0.35); } .cm2-card-theme { position: absolute; left: 14px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: rgba(20,12,36,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(183,148,246,0.22); font-size: 11px; font-weight: 680; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); } .cm2-card-body { position: relative; z-index: 2; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 0; flex: 1; margin-top: -2px; } .cm2-card-author { display: flex; align-items: center; gap: 11px; position: relative; } .cm2-card-author .post-author { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; min-width: 0; } .cm2-card-author .post-avatar { width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); border: 1.5px solid rgba(183,148,246,0.3); box-shadow: 0 0 0 3px rgba(139,92,246,0.10), inset 0 1px 0 rgba(255,255,255,0.28); } .cm2-card-author .post-author-name { display: block; font-size: 14px; font-weight: 760; letter-spacing: -0.01em; color: var(--ink); } .cm2-card-author .post-author:hover .post-author-name { color: var(--cmv-pink); } .cm2-card-author .post-meta { display: block; font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; } .cm2-card-title { font-size: 16.5px; font-weight: 800; letter-spacing: -0.018em; line-height: 1.3; margin: 14px 0 0; color: var(--ink); } .cm2-card-desc { font-size: 13.5px; line-height: 1.56; color: var(--ink-soft); margin: 7px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cm2-card-stats { display: flex; gap: 18px; margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid var(--cmv-line-soft); } .cm2-card-stats .st { display: flex; flex-direction: column; gap: 1px; } .cm2-card-stats .st b { font-size: 15px; font-weight: 820; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); } .cm2-card-stats .st span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); } /* engagement bar — floating glass controls (keeps every delegated hook) */ .post-card.cm2-card .post-actions { display: flex; align-items: center; gap: 6px; margin: 15px 0 0; padding: 8px; border: 1px solid var(--cmv-line-soft); border-radius: 15px; background: linear-gradient(160deg, rgba(139,92,246,0.10), rgba(20,12,36,0.35)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .post-card.cm2-card .post-like-btn, .post-card.cm2-card .post-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--ink-muted); font-size: 12.5px; font-weight: 680; cursor: pointer; transition: color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease-out); } .post-card.cm2-card .post-like-btn svg, .post-card.cm2-card .post-action-btn svg { width: 16px; height: 16px; transition: transform .28s var(--ease-out); } .post-card.cm2-card .post-like-btn:hover, .post-card.cm2-card .post-action-btn:hover { color: var(--ink); background: rgba(168,85,247,0.14); border-color: rgba(168,85,247,0.3); transform: translateY(-1px); } .post-card.cm2-card .post-like-btn:hover svg, .post-card.cm2-card .post-action-btn:hover svg { transform: scale(1.18); } .post-card.cm2-card .post-like-btn:active svg, .post-card.cm2-card .post-action-btn:active svg { transform: scale(0.9); } .post-card.cm2-card .post-like-btn.liked { color: var(--cmv-coral); } .post-card.cm2-card .post-like-btn.liked svg { animation: cm2HeartPop .42s var(--ease-out); } @keyframes cm2HeartPop { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 60% { transform: scale(0.86); } 100% { transform: scale(1); } } .post-card.cm2-card .post-action-btn.saved { color: var(--cmv-pink); } .post-card.cm2-card .post-actions .cm2-spacer { margin-left: auto; } @media (prefers-reduced-motion: reduce) { .post-card.cm2-card .post-like-btn, .post-card.cm2-card .post-action-btn, .post-card.cm2-card .post-like-btn svg, .post-card.cm2-card .post-action-btn svg { transition: none; } .post-card.cm2-card .post-like-btn.liked svg { animation: none; } } .post-card.cm2-card .post-comments { margin-top: 14px; border-top: 1px solid var(--cmv-line-soft); padding-top: 12px; } /* author hover card (keeps follow hook) — retinted glass */ .cm2-card-author .author-hover-card { position: absolute; top: 50px; left: 0; z-index: 20; width: 242px; padding: 14px; border-radius: 16px; background: linear-gradient(168deg, rgba(42,26,82,0.96), rgba(24,14,44,0.98)); border: 1px solid rgba(183,148,246,0.28); box-shadow: 0 30px 70px -20px rgba(10,4,24,0.8), var(--cmv-toplight); backdrop-filter: var(--glass-blur, blur(14px)); -webkit-backdrop-filter: var(--glass-blur, blur(14px)); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; } .cm2-card-author:hover .author-hover-card { opacity: 1; visibility: visible; transform: none; } .cm2-card-author .author-hover-card .post-avatar { border-radius: 12px; } .cm2-card-author .author-hover-name { font-size: 14px; font-weight: 780; margin-top: 8px; color: var(--ink); } .cm2-card-author .author-hover-meta { font-size: 12px; color: var(--ink-muted); margin-top: 2px; } @media (hover: none) { .cm2-card-author .author-hover-card { display: none; } } /* ============================================================ 5 · LIVE ACTIVITY RAIL ============================================================ */ .cm2-activity { position: relative; border-radius: var(--radius-l); border: 1px solid transparent; background: radial-gradient(120% 140% at 0% 0%, rgba(168,85,247,0.12), transparent 55%), var(--cmv-glass); background-clip: padding-box; box-shadow: var(--cmv-shadow), var(--cmv-toplight); padding: 6px 22px; } .cm2-activity::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px; background: var(--cmv-border); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.6; } .cm2-act { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--cmv-line-soft); transition: transform .3s var(--ease-out); } .cm2-act:last-child { border-bottom: none; } .cm2-act:hover { transform: translateX(3px); } .cm2-act-av { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); border: 1.5px solid rgba(183,148,246,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.26); } .cm2-act-ico { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--cmv-violet-soft); background: rgba(139,92,246,0.16); border: 1px solid rgba(168,85,247,0.3); } .cm2-act-ico.k-like { color: var(--cmv-coral); background: rgba(255,107,107,0.16); border-color: rgba(255,107,107,0.32); } .cm2-act-ico.k-build { color: var(--cmv-pink); background: rgba(244,114,182,0.16); border-color: rgba(244,114,182,0.32); } .cm2-act-ico.k-moc { color: var(--cmv-violet2); background: rgba(168,85,247,0.16); border-color: rgba(168,85,247,0.34); } .cm2-act-ico svg { width: 15px; height: 15px; } .cm2-act-body { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); } .cm2-act-body b { color: var(--ink); font-weight: 760; } .cm2-act-body a { color: inherit; text-decoration: none; } .cm2-act-body a:hover b { color: var(--cmv-pink); } .cm2-act-body a:hover .cm2-act-title { color: var(--cmv-violet-soft); } .cm2-act-body .cm2-act-title { color: var(--ink); transition: color .18s var(--ease); } .cm2-act-time { flex-shrink: 0; font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .cm2-act-ico { display: none; } .cm2-act-time { display: none; } .cm2-activity { padding: 4px 16px; } } /* count-up starts blank to avoid a flash of the 0 seed */ [data-cmcount] { font-variant-numeric: tabular-nums; } /* ============================================================ 6 · OVERFLOW SAFETY + PRESS FEEDBACK ============================================================ */ .cm2-feed > *, .cm2-collector-strip > * { min-width: 0; } .cm2-card-title, .cm2-card-desc, .cm2-act-body { overflow-wrap: anywhere; } .cm2-collector-name { min-width: 0; } .cm2-card-author .post-author > div { min-width: 0; } .cm2-card-author .post-author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm2-collector:active, .post-card.cm2-card:active { transform: translateY(-3px); } .cm2-hero-cta:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .cm2-collector:active, .post-card.cm2-card:active, .cm2-hero-cta:active, .cm2-act:hover { transform: none; } } /* --- section rhythm --- */ .page-cm2 .cm2-section { margin-bottom: 60px; } .page-cm2 .cm2-section:last-of-type { margin-bottom: 8px; } .page-cm2 .cm2-head { margin-bottom: 24px; } @media (max-width: 640px) { .page-cm2 .cm2-section { margin-bottom: 44px; } } /* build card: signal that media + title open the discussion */ .cm2-card-media[role="button"] { cursor: pointer; } .cm2-card-title[data-cm-open] { cursor: pointer; transition: color .16s var(--ease); } .cm2-card-title[data-cm-open]:hover { color: var(--cmv-pink); } .cm2-card-media[role="button"]:focus-visible { outline: 2px solid var(--cmv-violet2); outline-offset: -3px; } .cm2-card-title[data-cm-open]:focus-visible { outline: 2px solid var(--cmv-violet2); outline-offset: 3px; border-radius: 4px; } /* ============================================================ 7 · DISCUSSION MODAL (retinted to the purple identity) ============================================================ */ .cm2-post-modal { max-width: 660px; padding: 22px; } /* deepen the modal panel into the purple base so the section identity carries through */ .cm2-pm-overlay .modal-panel.cm2-post-modal { background: radial-gradient(140% 90% at 0% 0%, rgba(168,85,247,0.14), transparent 55%), linear-gradient(168deg, rgba(38,23,70,0.98), rgba(22,13,40,0.99)); border: 1px solid rgba(183,148,246,0.24); box-shadow: 0 40px 90px -24px rgba(6,2,16,0.9), var(--cmv-toplight); } .cm2-pm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .cm2-pm-author { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; min-width: 0; } .cm2-pm-av { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); border: 1.5px solid rgba(183,148,246,0.3); box-shadow: 0 0 0 3px rgba(139,92,246,0.1), inset 0 1px 0 rgba(255,255,255,0.26); } .cm2-pm-ameta { min-width: 0; display: flex; flex-direction: column; } .cm2-pm-name { font-size: 14.5px; font-weight: 780; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .cm2-pm-author:hover .cm2-pm-name { color: var(--cmv-pink); } .cm2-pm-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; } .cm2-post-modal .modal-close { align-self: flex-start; } .cm2-pm-media { position: relative; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16/10; margin-bottom: 16px; } .cm2-pm-media .thumb, .cm2-pm-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cm2-pm-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 20%, rgba(22,13,40,0.62) 78%, rgba(20,12,36,0.9)); pointer-events: none; } .cm2-pm-media .cm2-type-pill { position: absolute; top: 12px; left: 12px; z-index: 2; } .cm2-pm-theme { position: absolute; bottom: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: rgba(20,12,36,0.5); border: 1px solid rgba(183,148,246,0.24); font-size: 11.5px; font-weight: 680; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); } .cm2-pm-title { font-size: 19px; font-weight: 820; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 8px; overflow-wrap: anywhere; color: var(--ink); } .cm2-pm-desc { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 4px; overflow-wrap: anywhere; } .cm2-pm-stats { display: flex; gap: 24px; margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--cmv-line-soft); border-bottom: 1px solid var(--cmv-line-soft); } .cm2-pm-stats .st { display: flex; flex-direction: column; gap: 1px; } .cm2-pm-stats .st b { font-size: 16px; font-weight: 820; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); } .cm2-pm-stats .st span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); } .cm2-pm-actions { display: flex; gap: 8px; margin: 14px 0 4px; } .cm2-pm-actions .post-like-btn, .cm2-pm-actions .post-action-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 12px; border: 1px solid var(--cmv-line); background: rgba(139,92,246,0.08); color: var(--ink-soft); font-size: 13px; font-weight: 680; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease-out); } .cm2-pm-actions .post-like-btn svg, .cm2-pm-actions .post-action-btn svg { width: 16px; height: 16px; transition: transform .28s var(--ease-out); } .cm2-pm-actions .post-like-btn:hover, .cm2-pm-actions .post-action-btn:hover { color: var(--ink); border-color: rgba(168,85,247,0.4); background: rgba(168,85,247,0.16); transform: translateY(-1px); } .cm2-pm-actions .post-like-btn:hover svg, .cm2-pm-actions .post-action-btn:hover svg { transform: scale(1.15); } .cm2-pm-actions .post-like-btn.liked { color: var(--cmv-coral); border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.12); } .cm2-pm-actions .post-like-btn.liked svg { animation: cm2HeartPop .42s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .cm2-pm-actions .post-like-btn, .cm2-pm-actions .post-action-btn, .cm2-pm-actions .post-like-btn svg, .cm2-pm-actions .post-action-btn svg { transition: none; } .cm2-pm-actions .post-like-btn.liked svg { animation: none; } } .cm2-pm-discussion { margin-top: 18px; } .cm2-pm-dhead { font-size: 13px; font-weight: 780; letter-spacing: 0.01em; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; color: var(--ink); } .cm2-pm-dhead span { color: var(--cmv-violet-soft); font-weight: 700; } .cm2-pm-form { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .cm2-pm-form .cm2-cmt-av { width: 36px; height: 36px; } .cm2-pm-form input, .cm2-cmt-reply-form input { flex: 1; min-width: 0; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--cmv-line); background: rgba(20,12,36,0.5); color: var(--ink); font-size: 13.5px; font-family: inherit; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); } .cm2-pm-form input::placeholder, .cm2-cmt-reply-form input::placeholder { color: var(--ink-muted); } .cm2-pm-form input:focus, .cm2-cmt-reply-form input:focus { outline: none; border-color: rgba(168,85,247,0.55); box-shadow: 0 0 0 3px rgba(139,92,246,0.18); } .cm2-pm-form .btn, .cm2-cmt-reply-form .btn { flex-shrink: 0; } /* recolor primary buttons inside the discussion to the section identity */ .cm2-post-modal .btn-primary { background: linear-gradient(120deg, var(--cmv-violet2), var(--cmv-violet) 45%, var(--cmv-coral) 135%); border: 0; color: #fff; box-shadow: 0 8px 22px -8px rgba(168,85,247,0.55), inset 0 1px 0 rgba(255,255,255,0.3); } .cm2-post-modal .btn-primary:hover { filter: saturate(1.08) brightness(1.04); box-shadow: 0 12px 28px -8px rgba(255,107,107,0.5), inset 0 1px 0 rgba(255,255,255,0.4); } .cm2-pm-comments { display: flex; flex-direction: column; gap: 18px; } .cm2-pm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--ink-muted); padding: 20px 12px 14px; } .cm2-pm-empty-ico { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 13px; color: var(--cmv-violet-soft); background: rgba(139,92,246,0.14); border: 1px solid rgba(168,85,247,0.3); } .cm2-pm-empty-ico svg { width: 19px; height: 19px; } /* new comment/reply lands in a live thread — brief violet highlight */ @keyframes cm2Flash { 0% { background: rgba(168,85,247,0.22); } 100% { background: transparent; } } .cm2-flash { animation: cm2Flash 1.3s var(--ease-out); border-radius: 10px; } @media (prefers-reduced-motion: reduce) { .cm2-flash { animation: none; } } .cm2-cmt { display: flex; gap: 11px; } .cm2-cmt-av { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); } .cm2-cmt-main { flex: 1; min-width: 0; } .cm2-cmt-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .cm2-cmt-name { font-size: 13px; font-weight: 740; letter-spacing: -0.005em; color: var(--ink); } .cm2-cmt-time { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .cm2-cmt-text { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 2px; overflow-wrap: anywhere; } .cm2-cmt-reply-btn { margin-top: 6px; background: none; border: none; padding: 0; font-size: 11.5px; font-weight: 680; color: var(--ink-muted); cursor: pointer; transition: color .16s var(--ease); } .cm2-cmt-reply-btn:hover { color: var(--cmv-pink); } .cm2-cmt-replies { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; padding-left: 14px; border-left: 1px solid var(--cmv-line); } .cm2-cmt-child .cm2-cmt-av { width: 28px; height: 28px; font-size: 11px; border-radius: 9px; } .cm2-cmt-reply-form { display: flex; gap: 8px; margin-top: 10px; } .cm2-cmt-reply-form[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .cm2-card-title[data-cm-open], .cm2-pm-form input, .cm2-cmt-reply-form input, .cm2-cmt-reply-btn { transition: none; } } @media (max-width: 480px) { .cm2-post-modal { padding: 18px; } .cm2-pm-actions { flex-wrap: wrap; } } /* ============================================================ 8 · REDUCED-MOTION SAFETY NET Kill the lifts, image zooms and transitions site-consistently. ============================================================ */ @media (prefers-reduced-motion: reduce) { .cm2-collector, .cm2-collector-cover .thumb, .post-card.cm2-card, .cm2-card-media .thumb, .cm2-card-media img, .cm2-hero-cta, .cm2-act { transition: none !important; } .cm2-collector:hover, .post-card.cm2-card:hover, .cm2-hero-cta:hover { transform: none !important; } .cm2-collector:hover .cm2-collector-cover .thumb, .post-card.cm2-card:hover .cm2-card-media .thumb, .post-card.cm2-card:hover .cm2-card-media img, .cm2-hero-collage .cm2-float { transform: none !important; } } /* ============================================================ 9 · RESTRAINT PASS — temper the identity to Marketplace calm ------------------------------------------------------------ Appended last so it wins. Subtractive: purple stays only as small HIGHLIGHTS (eyebrow dot, faint hover ambient, a quiet indicator, a hovered title/name tint). Neutralized here: big tinted hero/panels, coral+violet gradient-FILLED badges, glowing avatar rings, multiple glowing borders, the loud engagement box, and the gold active tab. ============================================================ */ /* --- Section heads: unify to one calm violet accent, quiet the dot --- */ .cm2-head .kick, .cm2-section:nth-of-type(even) .cm2-head .kick { color: var(--cmv-violet-soft); } .cm2-head .kick::before, .cm2-section:nth-of-type(even) .cm2-head .kick::before { background: var(--cmv-violet2); box-shadow: 0 0 6px rgba(168,85,247,0.5); } .cm2-head .more:hover { color: var(--cmv-violet-soft); } .cm2-live-dot { background: var(--cmv-violet2); box-shadow: 0 0 0 0 rgba(139,92,246,0.55); } @keyframes cm2Pulse { 0% { box-shadow: 0 0 0 0 rgba(139,92,246,0.45); } 70% { box-shadow: 0 0 0 7px rgba(139,92,246,0); } 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); } } /* --- HERO: neutralize the big tinted panel + colored glows --- */ .cm2-hero { background: radial-gradient(600px 340px at 12% 0%, rgba(139,92,246,0.13), transparent 60%), radial-gradient(680px 460px at 98% 18%, rgba(139,92,246,0.07), transparent 62%), linear-gradient(162deg, #1c1338 0%, #160d2a 58%, #140c26 100%); border: 1px solid var(--glass-border); box-shadow: var(--cmv-shadow), var(--cmv-toplight); } .cm2-hero::before { display: none; } /* drop the gradient ring */ .cm2-hero-grid { opacity: 0.28; } .cm2-hero-glow { background: radial-gradient(circle, rgba(139,92,246,0.15), transparent 66%); opacity: 0.65; } .cm2-eyebrow { color: var(--cmv-violet-soft); } .cm2-eyebrow::before { background: var(--cmv-violet2); box-shadow: 0 0 8px rgba(168,85,247,0.55); animation: none; } .cm2-title em { background: linear-gradient(115deg, var(--cmv-violet-soft), var(--cmv-pink) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cm2-hero-cta { background: linear-gradient(120deg, var(--cmv-violet2), var(--cmv-violet)); box-shadow: 0 12px 28px -14px rgba(139,92,246,0.5), inset 0 1px 0 rgba(255,255,255,0.26); } .cm2-hero-cta:hover { filter: brightness(1.04); box-shadow: 0 16px 34px -14px rgba(139,92,246,0.55), inset 0 1px 0 rgba(255,255,255,0.32); } .cm2-hero-ghost:hover { color: var(--cmv-violet-soft); } .cm2-hstat .n.gold { background: none; -webkit-text-fill-color: currentColor; color: var(--cmv-violet-soft); } .cm2-hero-collage .cm2-float { border-color: rgba(139,92,246,0.20); box-shadow: var(--cmv-shadow); } /* --- Card edges: one calm hairline; no bright/hot ring, no milestone glow --- */ .cm2-collector::before, .post-card.cm2-card::before, .cm2-activity::before { background: var(--cmv-border); opacity: 0.55; } .cm2-collector:hover::before, .post-card.cm2-card:hover::before { opacity: 0.8; background: var(--cmv-border); } .post-card.cm2-card.is-milestone::before { background: var(--cmv-border); opacity: 0.55; } .post-card.cm2-card.is-milestone:hover { box-shadow: var(--cmv-glow-violet), var(--cmv-toplight); } /* --- Card surfaces: drop the bright radial accent tint, keep calm dark glass --- */ .cm2-collector, .cm2-activity { background: var(--cmv-glass); } .post-card.cm2-card { background: linear-gradient(168deg, rgba(30,20,52,0.72) 0%, rgba(22,14,40,0.90) 60%, rgba(20,12,36,0.96) 100%); } /* --- BADGES: quiet glass pills, no gradient fills/glows, one accent dot --- */ .cm2-collector-rank { background: rgba(16,10,30,0.62); border: 1px solid var(--cmv-line); box-shadow: 0 2px 8px -3px rgba(0,0,0,0.5); color: var(--ink-soft); font-weight: 680; } .cm2-type-pill { background: rgba(16,10,30,0.60); border: 1px solid var(--cmv-line); box-shadow: none; color: var(--ink); font-weight: 680; } .cm2-type-pill.t-moc, .cm2-type-pill.t-milestone, .cm2-type-pill.t-build { color: var(--ink); border-color: var(--cmv-line); } .cm2-type-pill::before { background: var(--cmv-violet-soft); box-shadow: none; width: 6px; height: 6px; } .cm2-type-pill.t-milestone::before { background: var(--cmv-coral); } /* tiny warmth cue */ .cm2-staff { background: rgba(16,10,30,0.62); border: 1px solid var(--cmv-line); box-shadow: 0 2px 8px -3px rgba(0,0,0,0.5); color: var(--ink-soft); font-weight: 700; text-shadow: none; } .cm2-card-theme { background: rgba(16,10,30,0.48); border-color: var(--cmv-line); font-weight: 620; } .cm2-pm-theme { border-color: var(--cmv-line); } /* --- AVATARS: keep the gradient identity, drop the glowing rings --- */ .cm2-collector-av { border: 2px solid rgba(255,255,255,0.12); box-shadow: 0 6px 16px -8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.20); } .cm2-card-author .post-avatar { border: 1.5px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20); } .cm2-pm-av { border-color: rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20); } .cm2-act-av { border-color: rgba(255,255,255,0.12); } /* --- Accent as HIGHLIGHT only: violet name/title tints, calmer metadata --- */ .cm2-collector-theme { color: var(--cmv-violet-soft); font-weight: 620; } .cm2-collector-metric .mn.gold { color: var(--cmv-violet-soft); } .cm2-card-author .post-author:hover .post-author-name { color: var(--cmv-violet-soft); } .cm2-card-title[data-cm-open]:hover { color: var(--cmv-violet-soft); } .cm2-card-stats .st b, .cm2-collector-metric .mn, .cm2-pm-stats .st b { font-weight: 720; } /* --- ENGAGEMENT: quiet inline controls (no tinted floating box) --- */ .post-card.cm2-card .post-actions { background: none; border: none; box-shadow: none; border-radius: 0; padding: 4px 0 0; margin-top: 10px; } .post-card.cm2-card .post-like-btn:hover, .post-card.cm2-card .post-action-btn:hover { background: rgba(139,92,246,0.10); border-color: transparent; color: var(--ink); } .post-card.cm2-card .post-action-btn.saved { color: var(--cmv-violet-soft); } /* --- Live activity rail: calm icons + violet hover --- */ .cm2-act-ico, .cm2-act-ico.k-build, .cm2-act-ico.k-moc { color: var(--cmv-violet-soft); background: rgba(139,92,246,0.10); border-color: var(--cmv-line); } .cm2-act-ico.k-like { color: var(--cmv-coral); background: rgba(255,107,107,0.10); border-color: rgba(255,107,107,0.22); } .cm2-act-body a:hover b, .cm2-act-body a:hover .cm2-act-title { color: var(--cmv-violet-soft); } /* --- Filter tabs: retint the gold active tab (from community-polish) to violet --- */ body.page-community .cm-filter-row .tab-btn.active, body.page-community .cm2-filter-row .tab-btn.active { color: #fff; border-color: rgba(139,92,246,0.40); box-shadow: inset 0 -2px 0 rgba(139,92,246,0.6); } body.page-community .cm2-filter-row .tab-btn:hover { border-color: rgba(139,92,246,0.35); } /* --- Discussion modal: calm neutral glass, violet accents only --- */ .cm2-pm-overlay .modal-panel.cm2-post-modal { background: linear-gradient(168deg, rgba(30,20,52,0.98), rgba(20,12,36,0.99)); border: 1px solid var(--glass-border); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.80), var(--cmv-toplight); } .cm2-pm-author:hover .cm2-pm-name, .cm2-pm-dhead span, .cm2-cmt-reply-btn:hover { color: var(--cmv-violet-soft); } .cm2-post-modal .btn-primary { background: linear-gradient(120deg, var(--cmv-violet2), var(--cmv-violet)); border: 0; color: #fff; box-shadow: 0 8px 20px -10px rgba(139,92,246,0.5), inset 0 1px 0 rgba(255,255,255,0.25); } .cm2-post-modal .btn-primary:hover { filter: brightness(1.04); box-shadow: 0 12px 26px -10px rgba(139,92,246,0.55), inset 0 1px 0 rgba(255,255,255,0.32); } .cm2-pm-actions .post-like-btn.liked { color: var(--cmv-coral); } /* ============================================================ 10 · PROFILE MATERIAL — final unifying pass (wins by source order) ------------------------------------------------------------ Replicates the profile.css card recipe exactly, swapping only the accent to purple: neutral translucent SMOKED GLASS surfaces (no colored fill), near-invisible WHITE-translucent borders, a soft inset TOP-LIGHT via --glass-shadow, soft ambient elevation, calm radius + spacing, quiet type. Purple survives ONLY as small highlights (eyebrow dot, tiny indicators, value/label tints, icon chips, hovered name/title, a faint violet hover ambient, the active filter tab). Nothing here changes layout, data, IDs or behaviour. ============================================================ */ /* local neutral-material aliases (purple = #8b5cf6 / #a855f7 accent) */ body.page-community { --pm-glass: linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); --pm-glass-lead: linear-gradient(150deg, rgba(139,92,246,0.10), rgba(255,255,255,0.02) 60%); --pm-ambient: 0 0 30px rgba(139,92,246,0.08); /* faint violet hover ambient */ } /* ---- CREATOR / COLLECTOR CARDS → dark glass object ---- */ .cm2-collector { border-radius: var(--radius-m); border: 1px solid var(--glass-border); background: var(--pm-glass); box-shadow: var(--glass-shadow); transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); } .cm2-collector::before { display: none; } /* drop the gradient ring — border does the work */ .cm2-collector:hover { transform: translateY(-3px); border-color: var(--border-hover); box-shadow: var(--shadow-hover), var(--pm-ambient); } /* cover fade → neutral, dissolving into the glass beneath the overlapping avatar */ .cm2-collector-cover::after { background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 22%, rgba(16,16,18,0.55) 70%, rgba(16,16,18,0.9)); } /* ---- BUILD / POST CARDS → one unified glass object ---- */ .post-card.cm2-card { border-radius: var(--radius-m); border: 1px solid var(--glass-border); background: var(--pm-glass); box-shadow: var(--glass-shadow); transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); } .post-card.cm2-card::before { display: none; } .post-card.cm2-card:hover { transform: translateY(-3px); border-color: var(--border-hover); box-shadow: var(--shadow-hover), var(--pm-ambient); } /* milestone lead card: only a WHISPER of accent on the surface, still calm border */ .post-card.cm2-card.is-milestone { background: var(--pm-glass-lead); border-color: var(--glass-border); } .post-card.cm2-card.is-milestone::before { display: none; } .post-card.cm2-card.is-milestone:hover { border-color: var(--border-hover); box-shadow: var(--shadow-hover), var(--pm-ambient); } /* media: gentle top sheen + soft neutral bottom vignette (no opaque purple slab) */ .cm2-card-media::after { background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 16%, transparent 60%, rgba(16,16,18,0.42) 100%); } /* ---- LIVE ACTIVITY RAIL → quiet glass panel ---- */ .cm2-activity { border-radius: var(--radius-m); border: 1px solid var(--glass-border); background: var(--pm-glass); box-shadow: var(--glass-shadow); } .cm2-activity::before { display: none; } .cm2-act { border-bottom: 1px solid var(--line-soft); } /* icon chips: profile recipe — accent text on faint accent fill + hairline accent border */ .cm2-act-ico, .cm2-act-ico.k-build, .cm2-act-ico.k-moc { color: var(--cmv-violet-soft); background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.22); } .cm2-act-ico.k-like { color: var(--cmv-violet-soft); background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.22); } /* ---- HERO: lead surface — dark glass with a whisper of accent, soft top-light ---- */ .cm2-hero { background: radial-gradient(560px 320px at 12% 0%, rgba(139,92,246,0.10), transparent 62%), linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .cm2-hero-glow { background: radial-gradient(circle, rgba(139,92,246,0.12), transparent 66%); opacity: 0.5; } .cm2-hero-grid { opacity: 0.22; } /* hero stat values: quiet near-white, purple only as a supporting tint */ .cm2-hstat .n { color: var(--ink); } .cm2-hstat .n.gold { color: var(--cmv-violet-soft); background: none; -webkit-text-fill-color: currentColor; } .cm2-hstat + .cm2-hstat { border-left: 1px solid var(--line-soft); } .cm2-hero-collage .cm2-float { border: 1px solid var(--glass-border); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.10); } /* ---- BADGES: quiet neutral glass pills; purple only as the small dot ---- */ .cm2-collector-rank, .cm2-type-pill, .cm2-staff { background: rgba(16,16,18,0.6); border: 1px solid var(--glass-border); box-shadow: none; color: var(--ink-soft); font-weight: 680; text-shadow: none; } .cm2-type-pill { color: var(--ink); } .cm2-type-pill.t-moc, .cm2-type-pill.t-milestone, .cm2-type-pill.t-build { color: var(--ink); border-color: var(--glass-border); } .cm2-type-pill::before { background: var(--cmv-violet-soft); box-shadow: none; width: 6px; height: 6px; } .cm2-type-pill.t-milestone::before { background: var(--cmv-violet2); } .cm2-card-theme, .cm2-pm-theme { background: rgba(16,16,18,0.5); border: 1px solid var(--glass-border); font-weight: 620; } /* ---- ICON CHIP: verified tick / rank stays a small purple highlight ---- */ .cm2-collector-name svg { color: var(--cmv-violet2); } /* ---- AVATARS: keep initials gradient identity; calm the rings, add soft top-light ---- */ .cm2-collector-av { border: 2px solid rgba(255,255,255,0.12); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.20); } .cm2-card-author .post-avatar, .cm2-pm-av { border: 1.5px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20); } .cm2-act-av { border: 1.5px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } /* ---- ACCENT-AS-HIGHLIGHT: value / label / hover tints ---- */ .cm2-collector-theme { color: var(--cmv-violet-soft); font-weight: 620; } .cm2-collector-metric .mn { color: var(--ink); font-weight: 720; } .cm2-collector-metric .mn.gold { color: var(--cmv-violet-soft); } .cm2-collector-metrics { border-top: 1px solid var(--line-soft); } .cm2-card-stats, .post-card.cm2-card .post-comments { border-top: 1px solid var(--line-soft); } .cm2-card-stats .st b { color: var(--ink); font-weight: 720; } .cm2-card-author .post-author:hover .post-author-name, .cm2-card-title[data-cm-open]:hover { color: var(--cmv-violet-soft); } /* ---- ENGAGEMENT: quiet inline stats, no tinted box ---- */ .post-card.cm2-card .post-actions { background: none; border: none; box-shadow: none; border-radius: 0; padding: 4px 0 0; margin-top: 10px; } .post-card.cm2-card .post-like-btn:hover, .post-card.cm2-card .post-action-btn:hover { background: rgba(139,92,246,0.10); border-color: transparent; color: var(--ink); } .post-card.cm2-card .post-like-btn.liked, .post-card.cm2-card .post-action-btn.saved { color: var(--cmv-violet-soft); } /* ---- FILTER TABS: active tab = calm purple underline highlight ---- */ body.page-community .cm2-filter-row .tab-btn.active { color: #fff; border-color: rgba(139,92,246,0.40); box-shadow: inset 0 -2px 0 rgba(139,92,246,0.6); } body.page-community .cm2-filter-row .tab-btn:hover { border-color: rgba(139,92,246,0.32); } /* ---- DISCUSSION MODAL: neutral smoked glass, purple accents only ---- */ .cm2-pm-overlay .modal-panel.cm2-post-modal { background: linear-gradient(155deg, rgba(30,29,33,0.98), rgba(19,19,22,0.99)); border: 1px solid var(--glass-border); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.80), inset 0 1px 0 rgba(255,255,255,0.08); } .cm2-pm-stats, .cm2-pm-media { border-color: var(--line-soft); } .cm2-pm-stats .st b { color: var(--ink); font-weight: 720; } .cm2-pm-media::after { background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 18%, rgba(16,16,18,0.5) 78%, rgba(16,16,18,0.9)); } .cm2-pm-author:hover .cm2-pm-name, .cm2-pm-dhead span, .cm2-cmt-reply-btn:hover, .cm2-cmt-name a:hover { color: var(--cmv-violet-soft); } .cm2-pm-empty-ico, .cm2-act-ico { color: var(--cmv-violet-soft); } .cm2-pm-empty-ico { background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.22); } .cm2-pm-form input, .cm2-cmt-reply-form input { border: 1px solid var(--line-soft); background: rgba(255,255,255,0.03); } .cm2-pm-form input:focus, .cm2-cmt-reply-form input:focus { border-color: rgba(139,92,246,0.5); box-shadow: 0 0 0 3px rgba(139,92,246,0.16); } .cm2-cmt-replies { border-left: 1px solid var(--line-soft); } .cm2-post-modal .btn-primary { background: linear-gradient(120deg, var(--cmv-violet2), var(--cmv-violet)); border: 0; color: #fff; box-shadow: 0 8px 20px -10px rgba(139,92,246,0.5), inset 0 1px 0 rgba(255,255,255,0.25); } .cm2-post-modal .btn-primary:hover { filter: brightness(1.04); box-shadow: 0 12px 26px -10px rgba(139,92,246,0.55), inset 0 1px 0 rgba(255,255,255,0.32); } .cm2-pm-actions .post-like-btn.liked, .cm2-pm-actions .post-action-btn.saved { color: var(--cmv-violet-soft); border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.12); } /* ---- reduced-motion: nothing new to animate; existing net (§8) covers lifts ---- */ @media (prefers-reduced-motion: reduce) { .cm2-collector, .post-card.cm2-card { transition: none !important; } .cm2-collector:hover, .post-card.cm2-card:hover { transform: none !important; } } /* ============================================================ MI-BENCHMARK ALIGNMENT — Community (Purple) Wins by source order. Repoints the section material tokens at the exact Market Intelligence card recipe — a solid, purple-tinted graphite FLOOR (padding-box) under an accent-woven hairline border (border-box), the MI layered shadow stack, an 18px radius and a long ease-out lift with a faint purple ambient on hover. Every community card (build/post, creator/collector, activity rail) inherits it. Purple stays a highlight — border weave, avatars, chips, hover ambient — never a flat fill. Premium yet social; no markup, IDs, data flows, layout or the discussion modal behaviour changes. ============================================================ */ body.page-community { --pm-glass: radial-gradient(120% 85% at 50% 125%, rgba(150,100,248,0.30), rgba(150,100,248,0.07) 42%, transparent 68%) padding-box, linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.013)) padding-box, linear-gradient(150deg, rgba(255,255,255,0.20), rgba(255,255,255,0.03) 50%, rgba(139,92,246,0.16)) border-box; --pm-glass-hover: radial-gradient(120% 92% at 50% 125%, rgba(150,100,248,0.42), rgba(150,100,248,0.10) 44%, transparent 70%) padding-box, linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)) padding-box, linear-gradient(150deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04) 50%, rgba(139,92,246,0.24)) border-box; --pm-glass-lead: radial-gradient(120% 88% at 50% 125%, rgba(150,100,248,0.36), rgba(150,100,248,0.09) 42%, transparent 68%) padding-box, linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.013)) padding-box, linear-gradient(150deg, rgba(255,255,255,0.20), rgba(255,255,255,0.03) 50%, rgba(139,92,246,0.22)) border-box; --pm-ambient: 0 0 32px rgba(139,92,246,0.10); --pm-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 40px rgba(0,0,0,0.34), 0 3px 10px rgba(0,0,0,0.26); --pm-shadow-h: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 46px rgba(0,0,0,0.40), var(--pm-ambient); } /* CINEMATIC IMAGE DISSOLVE — build/MOC photo bottom melts into the purple graphite floor (26,20,36) with a faint purple top-light, like MI. */ .cm2-card-media::after { background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 24%), linear-gradient(180deg, transparent 48%, rgba(18,18,21,0.55) 80%, #17171b 100%) !important; } /* Card shells: transparent border so the accent weave shows; MI shadow + lift */ .post-card.cm2-card, .cm2-collector, .cm2-activity { border: 1px solid transparent; border-radius: var(--radius-m); background: var(--pm-glass); box-shadow: var(--pm-shadow); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background .45s var(--ease); } .post-card.cm2-card:hover, .cm2-collector:hover { transform: translateY(-6px); border-color: transparent; background: var(--pm-glass-hover); box-shadow: var(--pm-shadow-h); } .post-card.cm2-card.is-milestone { background: var(--pm-glass-lead); border-color: transparent; } .post-card.cm2-card.is-milestone:hover { background: var(--pm-glass-hover); box-shadow: var(--pm-shadow-h); } /* Creator/activity icon chips → MI accent-lit chip (gradient fill + inset top-light) */ .cm2-act-ico, .cm2-act-ico.k-build, .cm2-act-ico.k-moc, .cm2-act-ico.k-like, .cm2-pm-empty-ico { color: var(--cmv-violet-soft); background: linear-gradient(160deg, rgba(139,92,246,0.20), rgba(139,92,246,0.06)); border: 1px solid rgba(196,160,255,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } /* Stat / metric values: MI weight + rhythm */ .cm2-card-stats .st b, .cm2-collector-metric .mn, .cm2-hstat .n { font-weight: 800; letter-spacing: -0.018em; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .post-card.cm2-card, .cm2-collector, .cm2-activity { transition: none !important; } .post-card.cm2-card:hover, .cm2-collector:hover { transform: none !important; } }