/* Member Portfolio — Public Styles */ /* ─── Theme Variables ───────────────────────────────────────── * Dark is default. Apply .mp-theme-light to for the * light variant. All plugin elements inherit from these vars. * ────────────────────────────────────────────────────────────── */ /* Dark theme (default — no class required) */ body, body.mp-theme-dark { --mp-primary: #60a5fa; --mp-primary-dark: #3b82f6; --mp-danger: #f87171; --mp-success: #4ade80; --mp-border: #334155; --mp-bg: #1e293b; --mp-card-bg: #1e293b; --mp-page-bg: #0f172a; --mp-input-bg: #0f172a; --mp-nav-bg: #0f172a; --mp-nav-border: #1e293b; --mp-text: #f1f5f9; --mp-text-muted: #94a3b8; --mp-radius: 8px; --mp-shadow: 0 1px 8px rgba(0, 0, 0, .5); --mp-unread-bg: rgba(96, 165, 250, .12); --mp-success-bg: rgba(74, 222, 128, .1); --mp-error-bg: rgba(248, 113, 113, .1); --mp-success-border: rgba(74, 222, 128, .3); --mp-error-border: rgba(248, 113, 113, .3); } /* Light theme */ body.mp-theme-light { --mp-primary: #1a73e8; --mp-primary-dark: #1557b0; --mp-danger: #d93025; --mp-success: #188038; --mp-border: #e0e0e0; --mp-bg: #f8f9fa; --mp-card-bg: #ffffff; --mp-page-bg: #ffffff; --mp-input-bg: #ffffff; --mp-nav-bg: #ffffff; --mp-nav-border: #e0e0e0; --mp-text: #202124; --mp-text-muted: #5f6368; --mp-radius: 8px; --mp-shadow: 0 1px 4px rgba(0, 0, 0, .12); --mp-unread-bg: #e8f0fe; --mp-success-bg: #e6f4ea; --mp-error-bg: #fce8e6; --mp-success-border: #b7dfbe; --mp-error-border: #f5b7b1; } /* ─── Buttons ────────────────────────────────────────────────── */ .mp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: var(--mp-radius); border: none; font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, opacity .15s, color .15s; } .mp-btn-primary { background: var(--mp-primary); color: #fff; } .mp-btn-primary:hover { background: var(--mp-primary-dark); color: #fff; } .mp-btn-secondary { background: transparent; color: var(--mp-primary); border: 2px solid var(--mp-primary); } .mp-btn-secondary:hover { background: var(--mp-primary); color: #fff; } .mp-btn-ghost { background: transparent; color: var(--mp-text-muted); border: 1px solid var(--mp-border); } .mp-btn-ghost:hover { border-color: var(--mp-text-muted); color: var(--mp-text); } .mp-btn-danger { background: var(--mp-danger); color: #fff; } .mp-btn-lg { padding: 12px 28px; font-size: 1.05rem; } .mp-btn-sm { padding: 5px 14px; font-size: .85rem; } /* ─── Avatars ────────────────────────────────────────────────── */ .mp-avatar { border-radius: 50%; object-fit: cover; } .mp-avatar-lg { width: 120px; height: 120px; } .mp-avatar-sm { width: 48px; height: 48px; } .mp-avatar-xs { width: 36px; height: 36px; } .mp-avatar-placeholder { border-radius: 50%; background: var(--mp-border); } /* ─── Profile page — establish color context ─────────────────── */ .mp-profile-page { color: var(--mp-text); background-color: var(--mp-profile-bg, var(--mp-page-bg)); position: relative; min-height: 80vh; } /* Hide the theme's post title, author line, and date meta on profile pages */ .mp-profile-page .entry-title, .mp-profile-page h1.page-title, .mp-profile-page .wp-block-post-title, .mp-profile-page .post-meta, .mp-profile-page .entry-meta, .mp-profile-page .posted-on, .mp-profile-page .byline, .mp-profile-page .page-header { display: none !important; } /* ─── Profile Banner ─────────────────────────────────────────── */ .mp-profile-banner { width: 100%; height: 220px; background: linear-gradient(135deg, var(--mp-primary-dark) 0%, #0d9488 100%); background-size: cover; background-position: center; position: relative; } .mp-profile-avatar-wrap { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); } .mp-profile-header { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 70px 40px 24px; text-align: center; } .mp-profile-name { font-size: 2rem; margin: 0; color: var(--mp-text); text-align: center; } .mp-profile-title { font-size: .95rem; font-weight: 400; color: var(--mp-text-muted); text-align: center; margin: 4px 0 0; letter-spacing: .01em; } .mp-profile-meta-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .mp-profile-nicknames { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; align-items: center; } .mp-nickname { font-size: .78rem; color: var(--mp-text-muted); background: var(--mp-input-bg); border: 1px solid var(--mp-border); border-radius: 20px; padding: 2px 10px; } .mp-profile-expertise { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; align-items: center; } .mp-profile-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; align-items: center; justify-content: center; } .mp-skills-label { font-size: .78rem; font-weight: 600; opacity: .5; letter-spacing: .03em; margin-right: 2px; } .mp-expertise-tag { font-size: .78rem; color: var(--mp-primary); background: rgba(96, 165, 250, .12); border: 1px solid rgba(96, 165, 250, .35); border-radius: 20px; padding: 2px 10px; } .mp-follower-count { color: var(--mp-text-muted); font-size: .9rem; margin: 4px 0; } .mp-profile-bio { max-width: 640px; color: var(--mp-text); line-height: 1.6; text-align: center; margin: 0 auto; padding: 0 40px; font-size: 0.85rem; } .mp-profile-header-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ─── Social Links ───────────────────────────────────────────── */ .mp-social-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .mp-social-links-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 12px 40px 0; } .mp-social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--mp-input-bg); border: 1px solid var(--mp-border); border-radius: 50%; color: var(--mp-text-muted); text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .mp-social-link svg { width: 16px; height: 16px; display: block; flex-shrink: 0; } .mp-social-link:hover { background: var(--mp-primary); color: #fff; border-color: transparent; } /* Smaller icons in directory cards */ .mp-social-links-sm .mp-social-link { width: 28px; height: 28px; } .mp-social-links-sm .mp-social-link svg { width: 13px; height: 13px; } /* Social link tooltip (analytics-style hover popover) */ .mp-social-link-wrap { position: relative; display: inline-flex; } .mp-social-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 6px; padding: 5px 10px; font-size: .75rem; white-space: nowrap; color: var(--mp-text); box-shadow: var(--mp-shadow); z-index: 200; pointer-events: none; } .mp-social-link-wrap:hover .mp-tooltip, .mp-social-link-wrap:hover .mp-social-tooltip { display: block; } /* Social link rows in profile edit form */ .mp-social-link-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .mp-social-link-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .mp-social-link-icon svg { width: 18px; height: 18px; display: block; } .mp-social-link-label { font-size: 0.85em; color: var(--mp-text-muted); min-width: 90px; } .mp-social-link-desc { flex: 0 1 180px; font-size: 0.85em; } .mp-add-social-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; } /* ─── Badges ─────────────────────────────────────────────────── */ .mp-badge-list { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .mp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: 20px; font-size: .8rem; font-weight: 600; color: var(--mp-text); } /* ─── Create row + pill button ───────────────────────────────── */ .mp-profile-create-row { padding: 12px 40px 0; display: flex; justify-content: flex-end; } .mp-create-post-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 20px; border-radius: 999px; border: 1.5px solid var(--mp-primary); background: transparent; color: var(--mp-primary); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; } .mp-create-post-pill::before { content: '+'; font-size: 1rem; line-height: 1; font-weight: 400; } .mp-create-post-pill:hover { background: var(--mp-primary); color: #fff; } /* ─── Profile Background — light/dark mode ───────────────────── */ .mp-bg-light { --mp-text: #111111; --mp-text-muted: #444444; --mp-border: rgba(0,0,0,0.15); --mp-input-bg: rgba(0,0,0,0.06); --mp-card-bg: rgba(255,255,255,0.7); --mp-texture-color: rgba(0,0,0,0.18); } .mp-bg-dark { --mp-texture-color: rgba(255,255,255,0.18); } /* ─── Profile Background — texture overlays ─────────────────── */ /* Textures use background-image layered over background-color */ .mp-profile-page[class*="mp-texture-"]::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.3; } .mp-profile-page > * { position: relative; z-index: 1; } .mp-profile-page.mp-texture-dots::before { background-image: radial-gradient(circle, var(--mp-texture-color, rgba(255,255,255,0.18)) 1.5px, transparent 1.5px); background-size: 18px 18px; } .mp-profile-page.mp-texture-grid::before { background-image: linear-gradient(var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 1px), linear-gradient(90deg, var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 1px); background-size: 28px 28px; } .mp-profile-page.mp-texture-diagonal::before { background-image: repeating-linear-gradient( 45deg, var(--mp-texture-color, rgba(255,255,255,0.18)), var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 0, transparent 14px ); } .mp-profile-page.mp-texture-crosshatch::before { background-image: repeating-linear-gradient(45deg, var(--mp-texture-color, rgba(255,255,255,0.18)), var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 0, transparent 10px), repeating-linear-gradient(-45deg, var(--mp-texture-color, rgba(255,255,255,0.18)), var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 0, transparent 10px); } .mp-profile-page.mp-texture-stripes::before { background-image: repeating-linear-gradient( 45deg, transparent, transparent 6px, var(--mp-texture-color, rgba(255,255,255,0.18)) 6px, var(--mp-texture-color, rgba(255,255,255,0.18)) 10px ); } .mp-profile-page.mp-texture-rings::before { background-image: radial-gradient(circle at 50% 50%, transparent 10px, var(--mp-texture-color, rgba(255,255,255,0.18)) 10px, var(--mp-texture-color, rgba(255,255,255,0.18)) 11px, transparent 11px); background-size: 28px 28px; } .mp-profile-page.mp-texture-waves::before { background-image: repeating-radial-gradient( circle at 0 50%, transparent 0, transparent 12px, var(--mp-texture-color, rgba(255,255,255,0.18)) 12px, var(--mp-texture-color, rgba(255,255,255,0.18)) 13px ); background-size: 26px 26px; } /* ─── Organic textures ───────────────────────────────────────── */ .mp-profile-page.mp-texture-marble::before { background-image: repeating-linear-gradient(-65deg, transparent, transparent 40px, var(--mp-texture-color, rgba(255,255,255,0.18)) 40px, var(--mp-texture-color, rgba(255,255,255,0.18)) 41px), repeating-linear-gradient(-55deg, transparent, transparent 28px, var(--mp-texture-color, rgba(255,255,255,0.18)) 28px, var(--mp-texture-color, rgba(255,255,255,0.18)) 29px), repeating-linear-gradient(-75deg, transparent, transparent 55px, var(--mp-texture-color, rgba(255,255,255,0.18)) 55px, var(--mp-texture-color, rgba(255,255,255,0.18)) 56px); } .mp-profile-page.mp-texture-linen::before { background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, var(--mp-texture-color, rgba(255,255,255,0.18)) 3px, var(--mp-texture-color, rgba(255,255,255,0.18)) 4px), repeating-linear-gradient(90deg, transparent, transparent 3px, var(--mp-texture-color, rgba(255,255,255,0.18)) 3px, var(--mp-texture-color, rgba(255,255,255,0.18)) 4px); } .mp-profile-page.mp-texture-bubbles::before { background-image: radial-gradient(circle at 25% 30%, transparent 8px, var(--mp-texture-color, rgba(255,255,255,0.18)) 8px, var(--mp-texture-color, rgba(255,255,255,0.18)) 9px, transparent 9px), radial-gradient(circle at 75% 70%, transparent 6px, var(--mp-texture-color, rgba(255,255,255,0.18)) 6px, var(--mp-texture-color, rgba(255,255,255,0.18)) 7px, transparent 7px), radial-gradient(circle at 50% 10%, transparent 4px, var(--mp-texture-color, rgba(255,255,255,0.18)) 4px, var(--mp-texture-color, rgba(255,255,255,0.18)) 5px, transparent 5px), radial-gradient(circle at 10% 80%, transparent 10px, var(--mp-texture-color, rgba(255,255,255,0.18)) 10px, var(--mp-texture-color, rgba(255,255,255,0.18)) 11px, transparent 11px), radial-gradient(circle at 85% 40%, transparent 5px, var(--mp-texture-color, rgba(255,255,255,0.18)) 5px, var(--mp-texture-color, rgba(255,255,255,0.18)) 6px, transparent 6px); background-size: 80px 80px; } /* ─── Artistic / abstract textures ──────────────────────────── */ .mp-profile-page.mp-texture-chevron::before { background-image: repeating-linear-gradient(120deg, transparent, transparent 14px, var(--mp-texture-color, rgba(255,255,255,0.18)) 14px, var(--mp-texture-color, rgba(255,255,255,0.18)) 15px), repeating-linear-gradient(60deg, transparent, transparent 14px, var(--mp-texture-color, rgba(255,255,255,0.18)) 14px, var(--mp-texture-color, rgba(255,255,255,0.18)) 15px); background-size: 24px 42px; } .mp-profile-page.mp-texture-circuit::before { background-image: linear-gradient(var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 1px), linear-gradient(90deg, var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 1px), radial-gradient(circle, var(--mp-texture-color, rgba(255,255,255,0.18)) 2px, transparent 2px); background-size: 40px 40px, 40px 40px, 40px 40px; background-position: 0 0, 0 0, 19px 19px; } .mp-profile-page.mp-texture-starburst::before { background-image: repeating-conic-gradient( from 0deg at 50% 50%, var(--mp-texture-color, rgba(255,255,255,0.18)) 0deg 2deg, transparent 2deg 18deg ); background-size: 60px 60px; } .mp-profile-page.mp-texture-mosaic::before { background-image: repeating-linear-gradient(90deg, var(--mp-texture-color, rgba(255,255,255,0.18)) 0, var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 1px, transparent 30px), repeating-linear-gradient(0deg, var(--mp-texture-color, rgba(255,255,255,0.18)) 0, var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 1px, transparent 15px), repeating-linear-gradient(90deg, var(--mp-texture-color, rgba(255,255,255,0.18)) 0, var(--mp-texture-color, rgba(255,255,255,0.18)) 1px, transparent 1px, transparent 30px); background-size: 60px 30px, 60px 30px, 60px 30px; background-position: 0 0, 0 0, 30px 15px; } .mp-profile-page.mp-texture-confetti::before { background-image: repeating-linear-gradient(15deg, transparent, transparent 18px, var(--mp-texture-color, rgba(255,255,255,0.18)) 18px, var(--mp-texture-color, rgba(255,255,255,0.18)) 19px), repeating-linear-gradient(75deg, transparent, transparent 24px, var(--mp-texture-color, rgba(255,255,255,0.18)) 24px, var(--mp-texture-color, rgba(255,255,255,0.18)) 25px), repeating-linear-gradient(-30deg, transparent, transparent 14px, var(--mp-texture-color, rgba(255,255,255,0.18)) 14px, var(--mp-texture-color, rgba(255,255,255,0.18)) 15px); } /* ─── Background editor — edit profile ──────────────────────── */ .mp-bg-mode-toggle { display: flex; gap: 12px; } .mp-bg-mode-option { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; } .mp-bg-mode-option input { cursor: pointer; } .mp-bg-swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; } .mp-bg-swatch { width: 34px; height: 34px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0; transition: transform .12s, box-shadow .12s; } .mp-bg-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255,255,255,0.4); } .mp-bg-swatch.mp-bg-swatch-selected { transform: scale(1.1); box-shadow: 0 0 0 3px var(--mp-primary); } .mp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .mp-texture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; margin-top: 4px; } .mp-texture-option { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; font-size: .78rem; color: var(--mp-text-muted); } .mp-texture-option.mp-texture-selected .mp-texture-swatch, .mp-texture-option:hover .mp-texture-swatch { border-color: var(--mp-primary); box-shadow: 0 0 0 2px var(--mp-primary); } .mp-texture-swatch { width: 64px; height: 48px; border-radius: 6px; border: 2px solid var(--mp-border); background-color: #2a2a3e; transition: border-color .15s, box-shadow .15s; } /* Swatch previews */ .mp-texture-swatch-none { background-image: none; } .mp-texture-swatch-dots { background-image: radial-gradient(circle, rgba(255,255,255,0.4) 1.5px, transparent 1.5px); background-size: 10px 10px; } .mp-texture-swatch-grid { background-image: linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px); background-size: 12px 12px; } .mp-texture-swatch-diagonal { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 1px, transparent 0, transparent 8px); } .mp-texture-swatch-crosshatch { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 1px, transparent 0, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 1px, transparent 0, transparent 6px); } .mp-texture-swatch-stripes { background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 6px); } .mp-texture-swatch-rings { background-image: radial-gradient(circle at 50% 50%, transparent 6px, rgba(255,255,255,0.3) 6px, rgba(255,255,255,0.3) 7px, transparent 7px); background-size: 16px 16px; } .mp-texture-swatch-waves { background-image: repeating-radial-gradient(circle at 0 50%, transparent 0, transparent 8px, rgba(255,255,255,0.3) 8px, rgba(255,255,255,0.3) 9px); background-size: 14px 14px; } /* Organic */ .mp-texture-swatch-marble { background-image: repeating-linear-gradient(-65deg, transparent, transparent 10px, rgba(255,255,255,0.35) 10px, rgba(255,255,255,0.35) 11px), repeating-linear-gradient(-55deg, transparent, transparent 7px, rgba(255,255,255,0.25) 7px, rgba(255,255,255,0.25) 8px), repeating-linear-gradient(-75deg, transparent, transparent 14px, rgba(255,255,255,0.2) 14px, rgba(255,255,255,0.2) 15px); } .mp-texture-swatch-linen { background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.3) 2px, rgba(255,255,255,0.3) 3px), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.3) 2px, rgba(255,255,255,0.3) 3px); background-size: 5px 5px; } .mp-texture-swatch-bubbles { background-image: radial-gradient(circle at 25% 30%, transparent 5px, rgba(255,255,255,0.35) 5px, rgba(255,255,255,0.35) 6px, transparent 6px), radial-gradient(circle at 75% 70%, transparent 4px, rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 5px, transparent 5px), radial-gradient(circle at 10% 80%, transparent 7px, rgba(255,255,255,0.25) 7px, rgba(255,255,255,0.25) 8px, transparent 8px); background-size: 40px 40px; } /* Artistic / abstract */ .mp-texture-swatch-chevron { background-image: repeating-linear-gradient(120deg, transparent, transparent 7px, rgba(255,255,255,0.35) 7px, rgba(255,255,255,0.35) 8px), repeating-linear-gradient(60deg, transparent, transparent 7px, rgba(255,255,255,0.35) 7px, rgba(255,255,255,0.35) 8px); background-size: 12px 21px; } .mp-texture-swatch-circuit { background-image: linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,0.5) 2px, transparent 2px); background-size: 16px 16px, 16px 16px, 16px 16px; background-position: 0 0, 0 0, 8px 8px; } .mp-texture-swatch-starburst { background-image: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.35) 0deg 3deg, transparent 3deg 20deg); background-size: 32px 32px; } .mp-texture-swatch-mosaic { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0, rgba(255,255,255,0.3) 1px, transparent 1px, transparent 15px), repeating-linear-gradient(0deg, rgba(255,255,255,0.3) 0, rgba(255,255,255,0.3) 1px, transparent 1px, transparent 8px), repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0, rgba(255,255,255,0.3) 1px, transparent 1px, transparent 15px); background-size: 30px 16px; background-position: 0 0, 0 0, 15px 8px; } .mp-texture-swatch-confetti { background-image: repeating-linear-gradient(15deg, transparent, transparent 9px, rgba(255,255,255,0.3) 9px, rgba(255,255,255,0.3) 10px), repeating-linear-gradient(75deg, transparent, transparent 12px, rgba(255,255,255,0.25) 12px, rgba(255,255,255,0.25) 13px), repeating-linear-gradient(-30deg, transparent, transparent 7px, rgba(255,255,255,0.35) 7px, rgba(255,255,255,0.35) 8px); } /* ─── Background editor two-column layout ────────────────────── */ .mp-bg-editor-layout { display: grid; grid-template-columns: 1fr 220px; gap: 28px; align-items: start; } .mp-bg-editor-controls { min-width: 0; } .mp-bg-editor-preview { position: sticky; top: 16px; } .mp-bg-editor-preview .mp-field-label { font-size: 0.8rem; font-weight: 600; color: var(--mp-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } @media (max-width: 680px) { .mp-bg-editor-layout { grid-template-columns: 1fr; } .mp-bg-editor-preview { position: static; } } /* ─── Background preview panel ───────────────────────────────── */ .mp-bg-preview-box { border-radius: var(--mp-radius); overflow: hidden; display: flex; flex-direction: column; background-color: #1a1a2e; transition: background-color .3s; position: relative; min-height: 340px; } /* Texture overlay spans the full box */ .mp-bg-preview-box::before { content: ''; position: absolute; inset: 0; opacity: 0.3; pointer-events: none; z-index: 0; } /* Banner strip — mirrors the real profile banner */ .mp-bg-preview-banner { width: 100%; height: 100px; flex-shrink: 0; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.12); position: relative; z-index: 1; } /* Avatar centered on the bottom edge of the banner */ .mp-bg-preview-avatar, .mp-bg-preview-avatar-img { position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%); width: 72px; height: 72px; border-radius: 50%; } .mp-bg-preview-avatar { background: rgba(128,128,128,0.5); box-shadow: 0 0 0 3px rgba(255,255,255,0.35); } .mp-bg-preview-avatar-img { object-fit: cover; border: 3px solid rgba(255,255,255,0.55); box-shadow: 0 2px 8px rgba(0,0,0,0.35); } /* Content below the banner — top padding clears avatar overflow */ .mp-bg-preview-content { flex: 1; text-align: center; padding: 48px 20px 24px; position: relative; z-index: 1; } .mp-bg-preview-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; color: #fff; } .mp-bg-preview-role { font-size: .75rem; font-weight: 400; opacity: .8; margin-bottom: 8px; color: #fff; } .mp-bg-preview-bio { font-size: .72rem; opacity: .62; margin-bottom: 14px; color: #fff; } .mp-bg-preview-social-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; } .mp-bg-preview-social-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; cursor: default; } .mp-bg-preview-btn-row { display: flex; gap: 8px; justify-content: center; } .mp-bg-preview-pill { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 4px 14px; font-size: .75rem; color: #fff; } /* ─── Swatch group labels ─────────────────────────────────────── */ .mp-swatch-group-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mp-text-muted); margin: 10px 0 4px; } /* ─── Tabs ───────────────────────────────────────────────────── */ .mp-profile-tabs { margin: 0 40px 40px; } .mp-tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--mp-border); flex-wrap: wrap; } .mp-tab-btn { padding: 12px 20px; background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; font-size: .95rem; color: var(--mp-text-muted); transition: color .15s, border-color .15s; } .mp-tab-btn:hover { color: var(--mp-primary); } .mp-tab-btn.mp-tab-active { color: var(--mp-primary); border-bottom-color: var(--mp-primary); font-weight: 600; } .mp-tab-panel { padding: 24px 0; } .mp-tab-hidden { display: none; } /* ─── Gallery ────────────────────────────────────────────────── */ .mp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .mp-gallery-item { border-radius: var(--mp-radius); overflow: hidden; box-shadow: var(--mp-shadow); } .mp-gallery-item img { width: 100%; height: 200px; object-fit: cover; display: block; } .mp-gallery-caption { padding: 8px 12px; background: var(--mp-card-bg); color: var(--mp-text); font-size: .85rem; } .mp-gallery-placeholder { width: 100%; height: 200px; background: var(--mp-bg); display: flex; align-items: center; justify-content: center; color: var(--mp-text-muted); } /* ─── Post Cards ─────────────────────────────────────────────── */ .mp-posts-list { display: flex; flex-direction: column; gap: 20px; } .mp-post-card { display: flex; gap: 20px; background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: visible; position: relative; } .mp-post-thumb { overflow: hidden; border-radius: var(--mp-radius) 0 0 var(--mp-radius); } .mp-post-thumb img { width: 180px; height: 140px; object-fit: cover; } .mp-post-card-body { padding: 16px; } .mp-post-card-body h3 a { color: var(--mp-text); text-decoration: none; } .mp-post-card-body h3 a:hover { color: var(--mp-primary); } .mp-post-date { color: var(--mp-text-muted); font-size: .85rem; margin: 4px 0; } .mp-post-card-body p { color: var(--mp-text-muted); } /* ─── Analytics icon + popover ───────────────────────────────── */ .mp-analytics-popover-wrap { position: relative; display: inline-flex; align-items: center; } .mp-analytics-icon-btn { background: transparent; border: 1px solid var(--mp-border); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--mp-text-muted); cursor: pointer; transition: border-color .15s, color .15s; padding: 0; } .mp-analytics-icon-btn:hover, .mp-analytics-popover-wrap:hover .mp-analytics-icon-btn { border-color: var(--mp-primary); color: var(--mp-primary); } .mp-analytics-popover { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 12px 16px; min-width: 160px; box-shadow: var(--mp-shadow); z-index: 200; } .mp-analytics-popover-wrap:hover .mp-analytics-popover { display: block; } .mp-analytics-popover-title { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mp-text-muted); margin: 0 0 8px; } .mp-analytics-popover-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .mp-analytics-popover-list li { display: flex; align-items: baseline; gap: 6px; font-size: .82rem; color: var(--mp-text); } .mp-analytics-popover-list li span { font-weight: 700; font-size: 1rem; color: var(--mp-primary); min-width: 28px; text-align: right; } /* ─── Profile Edit ───────────────────────────────────────────── */ .mp-profile-edit-page { max-width: 800px; margin: 40px auto; padding: 0 20px; color: var(--mp-text); } .mp-edit-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .mp-edit-header h1 { color: var(--mp-text); margin: 0; } .mp-edit-header-actions { display: flex; align-items: center; gap: 10px; } .mp-header-visibility-label { font-size: .85rem; color: var(--mp-text-muted); white-space: nowrap; } .mp-header-visibility-select { font-size: .85rem; padding: 4px 8px; } .mp-edit-section { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--mp-border); } .mp-edit-section h2 { font-size: 1.3rem; margin-bottom: 16px; color: var(--mp-text); } .mp-field-group { margin-bottom: 20px; } .mp-field-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; color: var(--mp-text); } .mp-field-group input[type=text], .mp-field-group input[type=email], .mp-field-group input[type=url], .mp-field-group input[type=tel], .mp-field-group input[type=password], .mp-field-group textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); font-size: .95rem; box-sizing: border-box; background: var(--mp-input-bg); color: var(--mp-text); transition: border-color .15s; } .mp-field-group input:focus, .mp-field-group textarea:focus { outline: none; border-color: var(--mp-primary); } .mp-edit-footer { margin-top: 24px; } .mp-nickname-row, .mp-expertise-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .mp-nickname-row input, .mp-expertise-row input { flex: 1; } .mp-image-uploads { display: flex; gap: 32px; flex-wrap: wrap; } .mp-upload-field { display: flex; flex-direction: column; gap: 10px; } .mp-banner-thumb { width: 320px; height: 100px; object-fit: cover; border-radius: var(--mp-radius); } .mp-banner-placeholder { width: 320px; height: 100px; background: var(--mp-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); } /* ─── Custom Tabs Edit ───────────────────────────────────────── */ .mp-custom-tab-item { display: flex; gap: 12px; align-items: flex-start; background: var(--mp-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 16px; margin-bottom: 12px; } .mp-tab-drag-handle { cursor: grab; font-size: 1.2rem; color: var(--mp-text-muted); padding-top: 4px; } .mp-tab-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; } .mp-tab-fields input { padding: 8px; border: 1px solid var(--mp-border); border-radius: 4px; background: var(--mp-input-bg); color: var(--mp-text); } .mp-tab-content-editor { padding: 8px; border: 1px solid var(--mp-border); border-radius: 4px; width: 100%; box-sizing: border-box; background: var(--mp-input-bg); color: var(--mp-text); } .mp-custom-tab-item.mp-dragging { opacity: .5; } /* ─── Directory ──────────────────────────────────────────────── */ .mp-directory-page { max-width: 1100px; margin: 40px auto; padding: 0 20px; color: var(--mp-text); } .mp-directory-header { margin-bottom: 24px; } .mp-directory-header h1 { color: var(--mp-text); } .mp-directory-search { display: flex; gap: 10px; margin-bottom: 32px; } .mp-directory-search input { flex: 1; padding: 10px 16px; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); font-size: .95rem; background: var(--mp-input-bg); color: var(--mp-text); } .mp-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .mp-member-card { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; box-shadow: var(--mp-shadow); display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; } .mp-member-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.18); transform: translateY(-2px); } .mp-member-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } .mp-member-card-footer { padding: 0 16px 16px; display: flex; justify-content: center; } .mp-member-card-footer .mp-follow-btn { background: transparent; border: 1px solid var(--mp-border); color: var(--mp-text-muted); font-weight: 400; border-radius: 999px; padding: 4px 16px; font-size: .8rem; } .mp-member-card-footer .mp-follow-btn:hover { border-color: var(--mp-primary); color: var(--mp-primary); background: transparent; } .mp-member-card-footer .mp-follow-btn.mp-following { border-color: var(--mp-border); color: var(--mp-text-muted); background: transparent; } .mp-member-card-footer .mp-follow-btn.mp-following:hover { border-color: var(--mp-danger); color: var(--mp-danger); background: transparent; } .mp-member-card-banner { position: relative; height: 120px; background: var(--mp-primary); background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0; } .mp-member-card-banner-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); border-radius: 0; } .mp-member-card-avatar { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--mp-card-bg); margin-bottom: -36px; background: var(--mp-border); } .mp-member-card-avatar-placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; color: #fff; background: var(--mp-primary); text-decoration: none; } .mp-member-card-body { padding: 44px 16px 20px; flex: 1; text-align: center; } .mp-member-card-body h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--mp-text); } .mp-bio-snippet { font-size: .85rem; color: var(--mp-text-muted); margin: 0 0 10px; } .mp-social-links-sm { justify-content: center; } /* ─── Members Blog ───────────────────────────────────────────── */ .mp-members-blog-page { max-width: 1100px; margin: 40px auto; padding: 0 20px; } .mp-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } .mp-blog-card { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; box-shadow: var(--mp-shadow); } .mp-blog-card-thumb { position: relative; } .mp-blog-card-thumb img { width: 100%; height: 200px; object-fit: cover; display: block; } .mp-members-only-badge { position: absolute; top: 10px; right: 10px; background: var(--mp-primary); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; } .mp-blog-card-body { padding: 20px; background: var(--mp-card-bg); } .mp-blog-card-body h2 { margin: 0 0 8px; font-size: 1.1rem; } .mp-blog-card-body h2 a { color: var(--mp-text); text-decoration: none; } .mp-blog-card-body h2 a:hover { color: var(--mp-primary); } .mp-blog-card-body p { color: var(--mp-text-muted); font-size: .9rem; } .mp-blog-byline { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: .85rem; color: var(--mp-text-muted); } .mp-blog-author { font-weight: 600; color: var(--mp-primary); text-decoration: none; } /* ─── Registration / Invite ──────────────────────────────────── */ .mp-invite-register-page, .mp-form { max-width: 520px; margin: 60px auto; padding: 0 20px; color: var(--mp-text); } .mp-invite-header { margin-bottom: 32px; } .mp-invite-header h1 { color: var(--mp-text); } .mp-form .mp-field-group { margin-bottom: 22px; } .mp-privacy-notice { font-size: .82rem; color: var(--mp-text-muted); background: var(--mp-bg); border-left: 3px solid var(--mp-primary); padding: 8px 12px; border-radius: 4px; margin-top: 6px; } .mp-required { color: var(--mp-danger); } .mp-or { text-align: center; color: var(--mp-text-muted); font-size: .9rem; margin: -8px 0; } /* ─── Messages ───────────────────────────────────────────────── */ .mp-message { padding: 10px 16px; border-radius: var(--mp-radius); font-size: .9rem; margin-bottom: 16px; } .mp-success { background: var(--mp-success-bg); color: var(--mp-success); border: 1px solid var(--mp-success-border); } .mp-error { background: var(--mp-error-bg); color: var(--mp-danger); border: 1px solid var(--mp-error-border); } .mp-empty { color: var(--mp-text-muted); font-style: italic; } /* ─── Combined Posts page (/member-posts/) ───────────────────── */ .mp-posts-page { max-width: 1100px; margin: 0 auto; padding: 0 16px 80px; } .mp-posts-page-header { display: flex; justify-content: flex-end; padding-top: 16px; } .mp-posts-tabs { display: flex; gap: 4px; border-bottom: 2px solid rgba(255,255,255,.1); margin-bottom: 28px; padding-top: 16px; } .mp-posts-tab { padding: 8px 18px; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--mp-text-muted, rgba(255,255,255,.5)); font-size: .9rem; font-weight: 500; cursor: pointer; transition: color .15s, border-color .15s; } .mp-posts-tab:hover { color: var(--mp-text, #fff); } .mp-posts-tab.is-active { color: var(--mp-accent, #a78bfa); border-bottom-color: var(--mp-accent, #a78bfa); } .mp-posts-tab-panel { display: block; } .mp-posts-tab-panel[hidden] { display: none; } .mp-posts-load-more-wrap { text-align: center; margin: 24px 0; } .mp-posts-empty, .mp-posts-loading { text-align: center; padding: 40px 0; color: var(--mp-text-muted, rgba(255,255,255,.5)); font-size: .9rem; } /* Card grid */ .mp-posts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } /* Post card */ .mp-post-card { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; } .mp-post-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.22); } .mp-post-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px; gap: 8px; } .mp-post-card-byline { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--mp-text-muted); } .mp-post-card-author { font-weight: 600; color: var(--mp-primary); text-decoration: none; } .mp-post-card-author:hover { text-decoration: underline; } .mp-post-card-date { opacity: .7; } .mp-post-card-title { font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.3; } .mp-post-card-title a { color: var(--mp-text); text-decoration: none; } .mp-post-card-title a:hover { color: var(--mp-primary); } .mp-post-card-excerpt { font-size: .82rem; color: var(--mp-text-muted); margin: 0; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .mp-post-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--mp-border); } /* Heart / like button */ .mp-post-like-btn { display: flex; align-items: center; gap: 5px; background: transparent; border: none; color: var(--mp-text-muted); font-size: .8rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: color .15s, background .15s; } .mp-post-like-btn:hover { color: #f87171; background: rgba(248,113,113,.1); } .mp-post-like-btn.mp-liked { color: #f87171; } .mp-post-like-count { min-width: 12px; } /* Edit button on card */ .mp-post-card-edit { margin-left: auto; } /* Media preview in card */ .mp-post-card-media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; cursor: pointer; background: #0d1117; } .mp-post-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .mp-post-card:hover .mp-post-card-media img { transform: scale(1.03); } .mp-post-card-media-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0); transition: background .2s; } .mp-post-card-media:hover .mp-post-card-media-overlay { background: rgba(0,0,0,.45); } .mp-post-card-media-overlay > * { opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; } .mp-post-card-media:hover .mp-post-card-media-overlay > * { opacity: 1; transform: scale(1); } .mp-media-audio .mp-post-card-media-overlay, .mp-media-video .mp-post-card-media-overlay { background: rgba(0,0,0,.35); } .mp-media-audio .mp-post-card-media-overlay > *, .mp-media-video .mp-post-card-media-overlay > * { opacity: 1; transform: scale(1); } .mp-media-audio { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); } .mp-media-zoom-icon { font-size: 1.5rem; color: #fff; } .mp-media-bg-img { opacity: .3; } /* Lightbox overlay */ .mp-lb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 99990; display: flex; align-items: center; justify-content: center; } .mp-lb-overlay[hidden] { display: none; } .mp-lb-content { position: relative; max-width: min(90vw, 1100px); max-height: 85vh; display: flex; align-items: center; justify-content: center; } .mp-lb-img { max-width: 100%; max-height: 85vh; border-radius: 6px; display: block; object-fit: contain; } .mp-lb-iframe { width: min(80vw, 900px); aspect-ratio: 16/9; border: none; border-radius: 6px; } .mp-lb-close { position: fixed; top: 16px; right: 20px; background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 1.2rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; z-index: 99991; display: flex; align-items: center; justify-content: center; transition: background .15s; } .mp-lb-close:hover { background: rgba(255,255,255,.25); } .mp-lb-prev, .mp-lb-next { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 2.2rem; width: 48px; height: 64px; cursor: pointer; z-index: 99991; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background .15s; line-height: 1; } .mp-lb-prev { left: 12px; } .mp-lb-next { right: 12px; } .mp-lb-prev:hover, .mp-lb-next:hover { background: rgba(255,255,255,.25); } body.mp-lb-open { overflow: hidden; } .mp-lb-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; } .mp-lb-post-link { color: rgba(255,255,255,.75); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; transition: color .15s; white-space: nowrap; } .mp-lb-post-link:hover { color: #fff; } /* Floating audio player bar */ .mp-audio-bar { position: fixed; bottom: 64px; /* above member nav */ left: 50%; transform: translateX(-50%); width: min(500px, calc(100vw - 32px)); background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.4); padding: 12px 16px; z-index: 9990; display: flex; align-items: center; gap: 12px; } .mp-audio-bar[hidden] { display: none; } .mp-audio-bar-info { flex: 1; min-width: 0; } .mp-audio-bar-title { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mp-text); margin-bottom: 6px; } .mp-audio-bar audio { width: 100%; height: 32px; } .mp-audio-bar-close { flex-shrink: 0; background: transparent; border: none; color: var(--mp-text-muted); font-size: 1rem; cursor: pointer; padding: 4px; border-radius: 4px; } .mp-audio-bar-close:hover { color: var(--mp-text); } @media (max-width: 600px) { .mp-posts-list { grid-template-columns: 1fr; } } /* ─── Notifications ──────────────────────────────────────────── */ .mp-notification-wrap { position: relative; display: inline-block; } #mp-notification-count { position: absolute; top: -6px; right: -6px; background: var(--mp-danger); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } #mp-notification-list { list-style: none; margin: 0; padding: 0; } .mp-notif-item { padding: 12px 16px; border-bottom: 1px solid var(--mp-border); font-size: .88rem; cursor: pointer; color: var(--mp-text); } .mp-notif-unread { background: var(--mp-unread-bg); font-weight: 600; } .mp-notif-item:last-child { border-bottom: none; } /* ─── Featured Member Block ──────────────────────────────────── */ .mp-featured-member { display: flex; gap: 0; align-items: stretch; background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; box-shadow: var(--mp-shadow); color: var(--mp-text); margin: 0; } .mp-featured-avatar { flex: 0 0 42%; max-width: 42%; } .mp-featured-avatar a { display: block; height: 100%; } .mp-featured-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } .mp-featured-info { flex: 1; padding: 28px 28px 28px 28px; display: flex; flex-direction: column; justify-content: center; } .mp-featured-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mp-primary); font-weight: 700; margin: 0 0 6px; } .mp-featured-name { font-size: 1.6rem; font-weight: 600; margin: 0 0 10px; color: var(--mp-text); } .mp-featured-name a { color: inherit; text-decoration: none; } .mp-featured-name a:hover { color: var(--mp-primary); } .mp-featured-bio { color: var(--mp-text-muted); margin-bottom: 16px; line-height: 1.6; font-size: .95rem; } .mp-featured-recent-posts { display: flex; gap: 8px; margin-bottom: 16px; } .mp-featured-recent-post { display: block; width: 100px; height: 100px; flex: 0 0 100px; overflow: hidden; border-radius: 6px; background: var(--mp-border); text-decoration: none; } .mp-featured-recent-post img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; transition: opacity .2s; } .mp-featured-recent-post:hover img { opacity: .85; } .mp-featured-recent-post-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2rem; font-weight: 700; color: var(--mp-text-muted); background: var(--mp-border); border-radius: 6px; } @media (max-width: 600px) { .mp-featured-member { flex-direction: column; } .mp-featured-avatar { flex: none; max-width: 100%; height: 220px; } .mp-featured-info { padding: 20px; } .mp-featured-recent-post { width: 80px; height: 80px; flex: 0 0 80px; } } /* ─── Member Directory Block ─────────────────────────────────── */ .wp-block-member-portfolio-member-directory .mp-member-grid, .wp-block-member-portfolio-member-directory { margin: 0; } /* ─── Plugin Custom Pages ────────────────────────────────────── */ .mp-page-main { display: block; width: 100%; box-sizing: border-box; background: var(--mp-page-bg); color: var(--mp-text); } .mp-page-content { max-width: var(--wp--style--global--content-size, 1200px); margin-inline: auto; padding: clamp(24px, 5vw, 60px) clamp(16px, 4vw, 40px); box-sizing: border-box; } /* ─── Member Nav Bar ─────────────────────────────────────────── */ .mp-member-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--mp-nav-bg); border-top: 1px solid var(--mp-nav-border); box-shadow: 0 -2px 10px rgba(0, 0, 0, .3); display: flex; align-items: center; padding: 0 24px; gap: 24px; z-index: 9990; font-size: .9rem; } body.mp-has-member-nav { padding-bottom: 56px !important; } .mp-nav-brand { font-weight: 700; color: var(--mp-text); text-decoration: none; font-size: 1rem; white-space: nowrap; flex-shrink: 0; } .mp-nav-brand:hover { color: var(--mp-primary); } .mp-nav-links { display: flex; gap: 20px; flex: 1; } .mp-nav-link { color: var(--mp-text-muted); text-decoration: none; font-weight: 500; transition: color .15s; white-space: nowrap; } .mp-nav-link:hover, .mp-nav-link.mp-nav-active { color: var(--mp-primary); } .mp-nav-link { position: relative; } .mp-nav-badge { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; } .mp-card-declined { opacity: 0.35; filter: grayscale(60%); pointer-events: none; transition: opacity .3s, filter .3s; } .mp-decline-contest-btn, .mp-decline-poll-btn { background: none; border: none; color: var(--mp-text-muted); font-size: 0.78rem; cursor: pointer; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; opacity: 0.7; transition: opacity .15s; } .mp-decline-contest-btn:hover, .mp-decline-poll-btn:hover { opacity: 1; } .mp-contest-card-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mp-nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } /* Notification bell */ .mp-nav-icon-btn { position: relative; background: transparent; border: none; cursor: pointer; color: var(--mp-text-muted); padding: 6px; border-radius: 50%; display: flex; align-items: center; transition: background .15s, color .15s; } .mp-nav-icon-btn:hover { background: var(--mp-bg); color: var(--mp-primary); } .mp-notif-badge { position: absolute; top: 0; right: 0; background: var(--mp-danger); color: #fff; font-size: .65rem; font-weight: 700; border-radius: 50%; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px; pointer-events: none; } /* Notification panel */ .mp-notif-panel { position: fixed; bottom: calc(56px + 14px); /* nav height + gap */ right: 16px; width: min(320px, calc(100vw - 32px)); max-height: min(400px, calc(100svh - 90px)); background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); box-shadow: 0 -4px 20px rgba(0, 0, 0, .3); overflow-y: auto; z-index: 9991; } .mp-notif-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--mp-border); font-weight: 600; font-size: .88rem; position: sticky; top: 0; background: var(--mp-card-bg); color: var(--mp-text); } .mp-notif-mark-all-btn { background: transparent; border: none; font-size: .8rem; color: var(--mp-primary); cursor: pointer; } .mp-notif-mark-all-btn:hover { text-decoration: underline; } .mp-notif-list { list-style: none; margin: 0; padding: 0; } .mp-notif-item { padding: 12px 16px; border-bottom: 1px solid var(--mp-border); font-size: .85rem; line-height: 1.4; cursor: pointer; color: var(--mp-text); } .mp-notif-item:last-child { border-bottom: none; } .mp-notif-unread { background: var(--mp-unread-bg); font-weight: 600; } .mp-notif-empty { color: var(--mp-text-muted); cursor: default; } /* Theme toggle — show sun in dark mode, moon in light mode (JS also enforces this) */ body.mp-theme-dark .mp-theme-toggle .mp-icon-sun { display: block; } body.mp-theme-dark .mp-theme-toggle .mp-icon-moon { display: none; } body.mp-theme-light .mp-theme-toggle .mp-icon-sun { display: none; } body.mp-theme-light .mp-theme-toggle .mp-icon-moon { display: block; } /* Theme toggle button */ .mp-theme-toggle { background: transparent; border: 1px solid var(--mp-border); color: var(--mp-text-muted); border-radius: 20px; padding: 4px 10px; font-size: .78rem; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap; transition: border-color .15s, color .15s; } .mp-theme-toggle:hover { border-color: var(--mp-primary); color: var(--mp-primary); } /* Nav avatar */ .mp-nav-avatar-link { display: flex; align-items: center; } .mp-nav-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mp-border); transition: border-color .15s; } .mp-nav-avatar-link:hover .mp-nav-avatar { border-color: var(--mp-primary); } .mp-nav-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: var(--mp-border); display: block; } .mp-nav-edit-btn { white-space: nowrap; } @media (max-width: 600px) { .mp-nav-brand { display: none; } .mp-nav-links { display: none; } .mp-nav-edit-btn { display: none; } .mp-member-nav { justify-content: flex-end; } .mp-mobile-menu-btn { display: inline-flex; } } @media (min-width: 601px) { .mp-mobile-menu-btn { display: none; } .mp-mobile-sheet-backdrop { display: none !important; } .mp-mobile-sheet { display: none !important; } } /* ─── Directory badge ────────────────────────────────────────── */ .mp-owner-indicators { display: flex; align-items: center; gap: 8px; } .mp-dir-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; } .mp-dir-badge-public { background: rgba(74,222,128,.15); color: #4ade80; border-color: rgba(74,222,128,.35); } .mp-dir-badge-private { background: rgba(148,163,184,.12); color: var(--mp-text-muted); border-color: var(--mp-border); } /* ─── Post status icon badges ────────────────────────────────── */ .mp-status-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; cursor: default; vertical-align: middle; } .mp-status-icon svg { width: 100%; height: 100%; display: block; } .mp-sicon-neutral { color: var(--mp-text-muted); } .mp-sicon-draft { color: var(--mp-text-muted); opacity: .7; } .mp-sicon-pending { color: #fbbf24; } .mp-sicon-approved { color: #4ade80; } .mp-sicon-public { color: var(--mp-primary); } .mp-sicon-rejected { color: var(--mp-danger); } /* Tooltip */ .mp-status-icon .mp-status-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--mp-card-bg, #1e293b); color: var(--mp-text, #f1f5f9); font-size: .72rem; font-weight: 500; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--mp-border); pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 100; } .mp-status-icon:hover .mp-status-tooltip { opacity: 1; } /* ─── Tab post cards ─────────────────────────────────────────── */ .mp-tab-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; } .mp-tab-post-card .mp-post-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .mp-tab-post-card .mp-post-date { font-size: .75rem; color: var(--mp-text-muted); } /* ─── Post card footer & love button ────────────────────────── */ .mp-post-card-footer { padding: 8px 16px 12px; display: flex; align-items: center; gap: 6px; } .mp-love-wrap { position: relative; display: inline-flex; align-items: center; gap: 3px; } .mp-love-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; cursor: pointer; color: var(--mp-text-muted); transition: color .15s, transform .15s; line-height: 1; } .mp-love-btn:disabled { cursor: default; opacity: .4; } .mp-love-btn:not(:disabled):hover { color: #f87171; transform: scale(1.15); } .mp-love-icon { fill: none; transition: fill .2s, stroke .2s; } /* Heart turns red + fills whenever the post has any loves */ .has-loves .mp-love-btn { color: #f87171; } .has-loves .mp-love-icon { fill: #f87171; stroke: #f87171; } /* Slightly brighter pulse when the current user has loved it */ .is-loved .mp-love-btn { color: #ef4444; } .is-loved .mp-love-icon { fill: #ef4444; stroke: #ef4444; } /* Badge: "+", "10+", "100+", "1K+" */ .mp-love-badge { font-size: .72rem; font-weight: 700; color: #f87171; line-height: 1; letter-spacing: -.01em; pointer-events: none; user-select: none; } /* Tooltip: shown on hover of the whole love-wrap */ .mp-love-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--mp-card-bg, #1e2130); border: 1px solid var(--mp-border); border-radius: 8px; padding: 8px 12px; min-width: 120px; max-width: 220px; z-index: 200; box-shadow: 0 4px 16px rgba(0,0,0,.3); pointer-events: none; white-space: nowrap; } .mp-love-wrap:hover .mp-love-tooltip { display: block; } .mp-love-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--mp-border); } .mp-love-tooltip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .mp-love-tooltip-list li { font-size: .78rem; color: var(--mp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ─── Create Post modal ──────────────────────────────────────── */ body.mp-modal-open { overflow: hidden; } .mp-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 20px; } .mp-modal-container { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: calc(var(--mp-radius) * 1.5); width: 100%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; } .mp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; border-bottom: 1px solid var(--mp-border); flex-shrink: 0; } .mp-modal-header h2 { margin: 0; font-size: 1.1rem; color: var(--mp-text); } .mp-modal-close { background: transparent; border: none; color: var(--mp-text-muted); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; transition: color .15s; } .mp-modal-close:hover { color: var(--mp-text); } .mp-modal-form { overflow-y: auto; padding: 20px 24px; flex: 1; } /* Editor toolbar */ .mp-editor-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: var(--mp-input-bg); border: 1px solid var(--mp-border); border-bottom: none; border-radius: var(--mp-radius) var(--mp-radius) 0 0; padding: 6px 10px; } .mp-editor-cmd { background: transparent; border: 1px solid transparent; color: var(--mp-text-muted); cursor: pointer; padding: 3px 7px; border-radius: 4px; font-size: .82rem; transition: background .1s, color .1s; } .mp-editor-cmd:hover { background: var(--mp-border); color: var(--mp-text); } .mp-editor-sep { width: 1px; height: 16px; background: var(--mp-border); margin: 0 4px; } .mp-editor-media-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--mp-border); color: var(--mp-text-muted); cursor: pointer; padding: 3px 9px; border-radius: 4px; font-size: .78rem; transition: border-color .15s, color .15s; } .mp-editor-media-btn:hover { border-color: var(--mp-primary); color: var(--mp-primary); } /* Contenteditable area */ .mp-editor-content { min-height: 200px; max-height: 340px; overflow-y: auto; background: var(--mp-input-bg); border: 1px solid var(--mp-border); border-radius: 0 0 var(--mp-radius) var(--mp-radius); padding: 12px 14px; color: var(--mp-text); font-size: .9rem; line-height: 1.6; outline: none; transition: border-color .15s; } .mp-editor-content:focus { border-color: var(--mp-primary); } .mp-editor-content.mp-editor-empty::before { content: attr(data-placeholder); color: var(--mp-text-muted); pointer-events: none; } /* ── Editor media blocks ─────────────────────────────────────────────────── */ .mp-media-block { position: relative; display: block; margin: 8px 0; border-radius: 6px; overflow: hidden; background: var(--mp-card-bg); border: 1px dashed var(--mp-border); } .mp-media-block img, .mp-media-block audio, .mp-media-block .mp-video-embed { display: block; width: 100%; margin: 0; } .mp-remove-block { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; border: none; font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; z-index: 2; } .mp-media-block:hover .mp-remove-block { opacity: 1; } .mp-editor-content img, .mp-editor-content video, .mp-editor-content audio { max-width: 100%; margin: 8px 0; border-radius: 4px; } /* Tab checkboxes */ .mp-tab-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .mp-tab-checkbox-label { display: inline-flex; align-items: center; gap: 5px; background: var(--mp-input-bg); border: 1px solid var(--mp-border); border-radius: 20px; padding: 4px 12px; font-size: .82rem; color: var(--mp-text-muted); cursor: pointer; transition: border-color .15s, color .15s; } .mp-tab-checkbox-label:has(input:checked) { border-color: var(--mp-primary); color: var(--mp-primary); background: rgba(96,165,250,.1); } .mp-tab-checkbox-label input { display: none; } /* Visibility options — pills that expand on selection */ .mp-visibility-options { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; margin-top: 6px; overflow-x: auto; padding-bottom: 2px; /* room for focus ring */ } .mp-visibility-label { display: inline-flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; padding: 6px 14px; border: 1px solid var(--mp-border); border-radius: 999px; cursor: pointer; color: var(--mp-text-muted); transition: border-color .2s, color .2s, background .2s, border-radius .2s; } .mp-visibility-label:has(input:checked) { border-color: var(--mp-primary); background: rgba(96,165,250,.12); color: var(--mp-primary); border-radius: 14px; } .mp-visibility-label input[type=radio] { display: none; } .mp-visibility-title { font-size: .85rem; font-weight: 600; white-space: nowrap; } .mp-visibility-desc { font-size: .76rem; color: var(--mp-text-muted); line-height: 1.4; white-space: normal; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; /* on hide: fade out first, then collapse */ transition: opacity .12s ease 0s, max-height .2s ease .1s, margin-top .2s ease .1s; } .mp-visibility-label:has(input:checked) .mp-visibility-desc { max-height: 80px; opacity: 1; margin-top: 4px; /* on show: expand first, then fade in */ transition: max-height .2s ease 0s, margin-top .2s ease 0s, opacity .2s ease .15s; } .mp-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--mp-border); margin-top: 20px; } #mp-delete-post-btn { margin-right: auto; } /* Video URL embed bar */ /* ── Audio upload drop zone panel ───────────────────────────────────────── */ .mp-audio-upload-panel { border: 1px solid var(--mp-border); border-top: none; border-radius: 0 0 var(--mp-radius) var(--mp-radius); background: var(--mp-input-bg); padding: 16px; } .mp-audio-drop-zone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; border: 2px dashed var(--mp-border); border-radius: var(--mp-radius); cursor: pointer; transition: border-color .15s, background .15s; color: var(--mp-text-muted); text-align: center; } .mp-audio-drop-zone.mp-drop-active { border-color: var(--mp-primary); background: rgba(96,165,250,.07); color: var(--mp-primary); } .mp-audio-drop-label { margin: 0; font-size: .9rem; font-weight: 500; } .mp-audio-drop-or { margin: 0; font-size: .78rem; opacity: .5; } .mp-audio-drop-hint { margin: 0; font-size: .72rem; opacity: .45; letter-spacing: .02em; } /* Progress bar */ .mp-audio-progress-bar { height: 6px; background: var(--mp-border); border-radius: 999px; overflow: hidden; margin-bottom: 10px; } .mp-audio-progress-fill { height: 100%; width: 0; background: var(--mp-primary); border-radius: 999px; transition: width .2s ease; } .mp-audio-progress-label { text-align: center; font-size: .82rem; color: var(--mp-text-muted); margin: 0; } .mp-audio-panel-footer { display: flex; justify-content: flex-end; margin-top: 10px; } .mp-video-url-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--mp-input-bg); border: 1px solid var(--mp-border); border-top: none; border-radius: 0 0 var(--mp-radius) var(--mp-radius); } .mp-video-url-bar input[type=url] { flex: 1; min-width: 0; background: transparent; border: 1px solid var(--mp-border); border-radius: 6px; padding: 5px 10px; font-size: .84rem; color: var(--mp-text); } .mp-video-url-bar input[type=url]::placeholder { color: var(--mp-text-muted); } .mp-video-url-bar input[type=url]:focus { outline: none; border-color: var(--mp-primary); } /* Embedded video responsive wrapper */ .mp-video-embed { margin: 1em 0; border-radius: var(--mp-radius); overflow: hidden; } .mp-video-embed iframe { border: 0; } /* xs button variant for post-card actions */ .mp-btn-xs { font-size: .72rem; padding: 2px 8px; border-radius: 4px; } /* Directory visibility selector */ .mp-directory-visibility-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .mp-select { appearance: none; -webkit-appearance: none; background: var(--mp-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); color: var(--mp-text); font-size: .9rem; padding: 8px 34px 8px 12px; cursor: pointer; min-width: 120px; flex-shrink: 0; } .mp-select:focus { outline: none; border-color: var(--mp-primary); } .mp-directory-visibility-desc { font-size: .82rem; color: var(--mp-text-muted); line-height: 1.5; margin: 0; padding-top: 10px; } /* Single member post — Edit Post action bar */ /* Member post author byline (shown in archive listing and on single post) */ .mp-post-byline { display: flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--mp-text-muted); margin-bottom: 10px; } .mp-post-byline-label { flex-shrink: 0; } .mp-post-byline-link, .mp-post-byline-name { font-weight: 600; color: var(--mp-primary); text-decoration: none; } .mp-post-byline-link:hover { text-decoration: underline; } .mp-single-post-actions { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--mp-border); } /* Report widget — deliberately tiny and unobtrusive */ .mp-report-wrap { position: relative; display: inline-flex; } .mp-report-trigger { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 2px 4px; font-size: .72rem; color: var(--mp-text-muted); opacity: .55; cursor: pointer; border-radius: 4px; transition: opacity .15s; } .mp-report-trigger:hover, .mp-report-trigger[aria-expanded="true"] { opacity: 1; } .mp-report-trigger svg { flex-shrink: 0; } .mp-report-trigger:disabled { opacity: .35; cursor: default; } .mp-report-popover { position: absolute; bottom: calc(100% + 6px); right: 0; background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); padding: 10px 12px; min-width: 200px; z-index: 200; } .mp-report-question { font-size: .75rem; font-weight: 600; color: var(--mp-text-muted); margin: 0 0 8px; white-space: nowrap; } .mp-report-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .mp-report-option { width: 100%; text-align: left; background: none; border: none; padding: 5px 6px; font-size: .8rem; color: var(--mp-text); border-radius: 4px; cursor: pointer; transition: background .12s; } .mp-report-option:hover { background: var(--mp-input-bg); } /* ─── Misc ───────────────────────────────────────────────────── */ .mp-invite-section { background: var(--mp-bg); border-radius: var(--mp-radius); padding: 32px; margin-top: 40px; } .mp-success-panel { text-align: center; padding: 40px 20px; color: var(--mp-text); } .mp-pagination { text-align: center; margin-top: 32px; } /* ─── Contests ───────────────────────────────────────────────── */ .mp-contests-page { max-width: 1100px; margin: 40px auto; padding: 0 20px; } .mp-contests-header { margin-bottom: 32px; } .mp-contests-header h1 { color: var(--mp-text); margin-bottom: 6px; } .mp-contests-header p { color: var(--mp-text-muted); } .mp-section-heading { font-size: 1.1rem; font-weight: 600; color: var(--mp-text); margin-bottom: 16px; } .mp-contest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .mp-contest-card { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 20px; box-shadow: var(--mp-shadow); display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s; } .mp-contest-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.15); } .mp-contest-card.mp-contest-closed { opacity: .85; } .mp-contest-card-status { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mp-primary); } .mp-contest-closed .mp-contest-card-status, .mp-contest-closed-label { color: var(--mp-text-muted) !important; } .mp-contest-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mp-primary); animation: mp-pulse 1.8s ease-in-out infinite; } @keyframes mp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } } .mp-contest-card-title { margin: 0; font-size: 1.05rem; } .mp-contest-card-title a { color: var(--mp-text); text-decoration: none; } .mp-contest-card-title a:hover { color: var(--mp-primary); } .mp-contest-card-prompt { font-size: .85rem; color: var(--mp-text-muted); margin: 0; flex: 1; } .mp-contest-card-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: var(--mp-text-muted); } .mp-contest-sub-type { background: var(--mp-input-bg); border-radius: 4px; padding: 1px 6px; font-size: .72rem; } /* Contest card prize panel */ .mp-contest-card { flex-direction: row; align-items: stretch; } .mp-contest-card-main { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; } .mp-contest-card-prize { display: flex; flex-direction: column; gap: 6px; min-width: 130px; max-width: 150px; padding: 12px 14px; margin: -20px -20px -20px 16px; border-left: 1px solid var(--mp-border); border-radius: 0 var(--mp-radius) var(--mp-radius) 0; background: var(--mp-input-bg); } .mp-contest-prizes-heading { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mp-text-muted); margin-bottom: 2px; } .mp-contest-prize-row { display: flex; align-items: baseline; gap: 5px; } .mp-contest-prize-medal { font-size: 1rem; flex-shrink: 0; } .mp-contest-prize-place { font-size: .7rem; color: var(--mp-text-muted); white-space: nowrap; } .mp-contest-prize-value { font-size: .78rem; font-weight: 700; color: var(--mp-text); margin-left: auto; text-align: right; } /* Single contest page */ .mp-contest-page { max-width: 1100px; margin: 32px auto; padding: 0 20px; } .mp-contest-breadcrumb { font-size: .85rem; margin-bottom: 24px; } .mp-contest-breadcrumb a { color: var(--mp-text-muted); text-decoration: none; } .mp-contest-breadcrumb a:hover { color: var(--mp-primary); } /* Single contest page — prize box */ .mp-contest-info-has-prize { display: flex; align-items: flex-start; gap: 20px; } .mp-contest-info-main { flex: 1; min-width: 0; } .mp-contest-single-prize { flex-shrink: 0; width: 180px; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); align-self: flex-start; } .mp-contest-single-prize-heading { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mp-text-muted); margin-bottom: 2px; } .mp-contest-single-prize-row { display: flex; align-items: flex-start; gap: 8px; } .mp-contest-single-prize-medal { font-size: 1.3rem; line-height: 1.1; flex-shrink: 0; } .mp-contest-single-prize-info { display: flex; flex-direction: column; gap: 1px; } .mp-contest-single-prize-place { font-size: .68rem; font-weight: 600; color: var(--mp-text-muted); text-transform: uppercase; letter-spacing: .05em; } .mp-contest-single-prize-value { font-size: .88rem; font-weight: 700; color: var(--mp-text); line-height: 1.3; } @media ( max-width: 600px ) { .mp-contest-info-has-prize { flex-direction: column; } .mp-contest-single-prize { width: auto; align-self: stretch; flex-direction: row; flex-wrap: wrap; gap: 10px; } .mp-contest-card { flex-direction: column; } .mp-contest-card-prize { min-width: unset; max-width: unset; margin: 12px -20px -20px; border-left: none; border-top: 1px solid var(--mp-border); border-radius: 0 0 var(--mp-radius) var(--mp-radius); flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 10px 16px; } } /* Account settings toggle */ .mp-toggle-label { display: flex; align-items: center; gap: 10px; font-size: .9375rem; cursor: pointer; } .mp-toggle-label input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--mp-primary); } /* Skip to voting link */ .mp-skip-to-voting { margin: 16px 0 0; text-align: center; } .mp-btn-link { background: none; border: none; padding: 0; color: var(--mp-text-muted); font-size: .875rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .mp-btn-link:hover { color: var(--mp-text); } /* Votes remaining notice */ .mp-votes-remaining-notice { font-size: .9rem; color: var(--mp-text-muted); margin-bottom: 16px; } .mp-contest-entries-section { margin-bottom: 48px; } .mp-contest-entries-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .mp-contest-entries-header h2 { margin: 0; } .mp-entry-count { font-size: .85rem; font-weight: 400; color: var(--mp-text-muted); } .mp-contest-results-label { background: var(--mp-primary); color: #fff; border-radius: 20px; padding: 2px 10px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; } .mp-entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .mp-entry-card { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; box-shadow: var(--mp-shadow); position: relative; display: flex; flex-direction: column; } .mp-entry-card.mp-entry-winner { border-color: gold; box-shadow: 0 0 0 2px rgba(255,215,0,.4), var(--mp-shadow); } .mp-entry-card.mp-entry-pending-own { border-style: dashed; opacity: .85; } .mp-entry-pending-badge { display: inline-block; background: var(--mp-border); color: var(--mp-text-muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; margin-bottom: 10px; } .mp-winner-crown { position: absolute; top: 8px; left: 8px; font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .mp-entry-img { width: 100%; height: 200px; object-fit: cover; display: block; } .mp-entry-audio-wrap { padding: 20px; background: var(--mp-input-bg); } .mp-entry-audio { width: 100%; } .mp-entry-video { margin: 0; } .mp-entry-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .mp-entry-submitter { font-weight: 600; font-size: .9rem; } .mp-entry-desc { font-size: .85rem; color: var(--mp-text-muted); margin: 0; } .mp-entry-vote-row { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; } .mp-vote-count { font-size: 1.4rem; font-weight: 700; color: var(--mp-primary); line-height: 1; } .mp-vote-label { font-size: .7rem; font-weight: 400; color: var(--mp-text-muted); display: block; } .mp-voted-badge { font-size: .75rem; background: var(--mp-primary); color: #fff; border-radius: 20px; padding: 2px 8px; } /* Contest info section */ .mp-contest-info-section { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 28px; box-shadow: var(--mp-shadow); } .mp-contest-info-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .mp-contest-title { margin: 0; font-size: 1.5rem; } .mp-contest-badges { display: flex; gap: 8px; flex-wrap: wrap; } .mp-contest-status-badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 20px; } .mp-status-open { background: rgba(34,197,94,.15); color: #16a34a; } .mp-status-voting { background: rgba(99,102,241,.15); color: #6366f1; } .mp-status-closed { background: var(--mp-input-bg); color: var(--mp-text-muted); } .mp-vis-public { background: rgba(251,191,36,.15); color: #b45309; } .mp-contest-dates { color: var(--mp-text-muted); font-size: .9rem; margin-bottom: 16px; } .mp-contest-prompt { background: var(--mp-input-bg); border-left: 3px solid var(--mp-primary); border-radius: 0 var(--mp-radius) var(--mp-radius) 0; padding: 14px 16px; margin-bottom: 16px; } .mp-contest-prompt h3 { margin: 0 0 8px; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mp-text-muted); } /* ─── Entry submission form ───────────────────────────────────── */ .mp-submit-entry-wrap { margin-top: 20px; } .mp-entry-form { background: var(--mp-input-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); margin-top: 16px; overflow: hidden; } /* Title + Description — side-by-side, edge-to-edge */ .mp-entry-header-row { display: grid; grid-template-columns: 1fr 1.5fr; border-bottom: 1px solid var(--mp-border); } .mp-entry-header-col { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; } .mp-entry-header-col:first-child { border-right: 1px solid var(--mp-border); } .mp-entry-header-col label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mp-text-muted); } .mp-entry-header-col .mp-input, .mp-entry-header-col .mp-textarea { border: none; background: transparent; padding: 0; box-shadow: none; resize: none; font-size: .95rem; color: var(--mp-text); outline: none; width: 100%; } .mp-entry-header-col-desc { flex: 1; } .mp-entry-header-col .mp-textarea { flex: 1; min-height: 60px; } /* Tab nav */ .mp-entry-type-nav { display: flex; border-bottom: 1px solid var(--mp-border); } .mp-entry-type-btn { flex: 1; padding: 12px 10px; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -1px; font-size: .88rem; font-weight: 500; color: var(--mp-text-muted); cursor: pointer; transition: color .12s, border-color .12s; } .mp-entry-type-btn:hover { color: var(--mp-text); } .mp-entry-type-btn.mp-type-active { color: var(--mp-primary); border-bottom-color: var(--mp-primary); font-weight: 600; } /* Tab panels */ .mp-entry-tab-panel { padding: 24px 20px; } /* Drop zone */ .mp-entry-upload-preview { margin-bottom: 14px; } .mp-entry-upload-preview img { max-width: 100%; max-height: 200px; border-radius: 8px; display: block; } .mp-entry-upload-preview audio { width: 100%; } .mp-entry-drop-zone { border: 2px dashed var(--mp-border); border-radius: var(--mp-radius); padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: border-color .15s, background .15s; } .mp-entry-drop-zone:hover, .mp-entry-drop-zone.mp-drag-over { border-color: var(--mp-primary); background: rgba(99,102,241,.04); } .mp-entry-drop-icon { color: var(--mp-text-muted); margin-bottom: 4px; } .mp-entry-drop-label { margin: 0; font-size: .95rem; font-weight: 500; color: var(--mp-text); } .mp-entry-drop-or { font-size: .82rem; color: var(--mp-text-muted); margin: 0; } /* Video panel */ #mp-entry-video-panel label { display: block; margin-bottom: 8px; font-size: .85rem; font-weight: 600; color: var(--mp-text-muted); } /* Footer — centered */ .mp-entry-form-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; border-top: 1px solid var(--mp-border); } .mp-entry-submitted-note { color: var(--mp-text-muted); font-style: italic; margin-top: 16px; } .mp-entries-empty { text-align: center; padding: 40px 0; } @media (max-width: 600px) { .mp-entry-header-row { grid-template-columns: 1fr; } .mp-entry-header-col:first-child { border-right: none; border-bottom: 1px solid var(--mp-border); } } /* ─── Polls ──────────────────────────────────────────────────── */ .mp-polls-page { max-width: 900px; margin: 40px auto; padding: 0 20px; } .mp-polls-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .mp-polls-header h1 { margin: 0; flex: 1; } .mp-polls-header p { color: var(--mp-text-muted); width: 100%; margin: -4px 0 0; } .mp-submit-poll-form { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 20px 24px; margin-bottom: 28px; box-shadow: var(--mp-shadow); } .mp-submit-poll-form h3 { margin-top: 0; } .mp-submit-poll-form .mp-input { margin-bottom: 8px; } .mp-form-note { font-size: .82rem; color: var(--mp-text-muted); margin-top: 0; } .mp-polls-grid { display: flex; flex-direction: column; gap: 20px; } .mp-poll-card { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 24px; box-shadow: var(--mp-shadow); } .mp-poll-card.mp-poll-closed { opacity: .85; } .mp-poll-question { font-size: 1.1rem; font-weight: 600; color: var(--mp-text); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .mp-poll-closed-tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--mp-input-bg); color: var(--mp-text-muted); padding: 2px 8px; border-radius: 20px; } .mp-poll-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .mp-poll-option-btn { width: 100%; text-align: left; background: var(--mp-input-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 10px 14px; font-size: .95rem; color: var(--mp-text); cursor: pointer; transition: border-color .12s, background .12s, transform .1s; } .mp-poll-option-btn:hover:not(:disabled) { border-color: var(--mp-primary); background: rgba(99,102,241,.08); transform: translateX(3px); } .mp-poll-option-btn:disabled, .mp-poll-option-disabled { opacity: .55; cursor: default; } .mp-poll-login-note { font-size: .82rem; color: var(--mp-text-muted); margin-top: 8px; } .mp-poll-login-note a { color: var(--mp-primary); } /* Poll results */ .mp-poll-results { display: flex; flex-direction: column; gap: 14px; } .mp-poll-chart { max-width: 260px; margin: 0 auto; } .mp-poll-bars { display: flex; flex-direction: column; gap: 10px; } .mp-poll-bar-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 10px; } .mp-poll-bar-label { font-size: .88rem; } .mp-poll-bar-track { height: 10px; background: var(--mp-input-bg); border-radius: 5px; overflow: hidden; } .mp-poll-bar-fill { height: 100%; background: var(--mp-primary); border-radius: 5px; transition: width .6s cubic-bezier(.4,0,.2,1); } .mp-poll-bar-pct { font-size: .8rem; font-weight: 600; white-space: nowrap; } .mp-poll-bar-votes { font-weight: 400; color: var(--mp-text-muted); } .mp-poll-total { font-size: .8rem; color: var(--mp-text-muted); margin: 0; text-align: right; } .mp-poll-footer { font-size: .75rem; color: var(--mp-text-muted); margin-top: 12px; border-top: 1px solid var(--mp-border); padding-top: 10px; } /* ── Invite Widget ─────────────────────────────────────────────────────────── */ .mp-invite-widget-wrap { margin-top: 40px; text-align: center; padding: 0 16px 40px; } .mp-invite-nudge { background: none; border: none; color: var(--mp-text-muted); font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; transition: color .2s; } .mp-invite-nudge:hover { color: var(--mp-primary); } .mp-invite-widget { display: flex; justify-content: center; margin-top: 16px; } .mp-invite-widget[hidden] { display: none; } .mp-invite-widget-inner { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 24px; width: 100%; max-width: 420px; text-align: left; } .mp-invite-widget-title { font-size: 1rem; font-weight: 600; margin: 0 0 4px; color: var(--mp-text); } .mp-invite-widget-note { font-size: .85rem; color: var(--mp-text-muted); margin: 0 0 16px; } .mp-invite-widget-actions { display: flex; gap: 8px; margin-top: 12px; } .mp-or { font-size: .82rem; color: var(--mp-text-muted); text-align: center; margin: 8px 0; } /* ── Profile URL slug field ────────────────────────────────────────────────── */ .mp-slug-field-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .mp-slug-prefix, .mp-slug-suffix { font-size: .85rem; color: var(--mp-text-muted); white-space: nowrap; } .mp-slug-field-row input[type="text"] { flex: 1; min-width: 120px; } /* ── Member-since text ──────────────────────────────────────────────────────── */ .mp-profile-joined { text-align: center; font-size: .8rem; color: var(--mp-text-muted); font-weight: 400; margin: 6px 0 0; opacity: .9; } .mp-badge-joined-label { opacity: .65; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; } /* ── AKA label ──────────────────────────────────────────────────────────────── */ .mp-aka-label { font-size: .78rem; font-weight: 600; opacity: .5; margin-right: 2px; align-self: center; line-height: 1; } /* ── Poll voter names ───────────────────────────────────────────────────────── */ .mp-poll-voter-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; grid-column: 1 / -1; } .mp-poll-voter { font-size: .75rem; background: color-mix(in srgb, var(--mp-primary) 12%, transparent); color: var(--mp-text-muted); border-radius: 999px; padding: 1px 8px; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════ RESPONSIVE — Tablet & Mobile ══════════════════════════════════════════════════════════════ */ /* Single post content: prevent images/videos/tables from overflowing */ .member_post .entry-content img, .member_post .entry-content video, .member_post .entry-content iframe, .member_post .entry-content table, .type-member_post .entry-content img, .type-member_post .entry-content video, .type-member_post .entry-content iframe, .type-member_post .entry-content table, .single-member_post .entry-content img, .single-member_post .entry-content video, .single-member_post .entry-content iframe, .mp-single-post-actions ~ * img, .hentry.type-member_post img { max-width: 100%; height: auto; } .single-member_post .entry-content, .type-member_post .entry-content { overflow-wrap: break-word; word-break: break-word; } @media (max-width: 768px) { /* Profile banner & avatar */ .mp-profile-banner { height: 160px; } .mp-profile-avatar-wrap { bottom: -50px; } .mp-avatar-lg { width: 96px; height: 96px; } /* Profile header */ .mp-profile-header { padding: 64px 20px 20px; } .mp-profile-name { font-size: 1.5rem; } .mp-profile-bio { max-width: 100%; } .mp-badge-list { justify-content: center; } /* Tabs: allow horizontal scroll instead of wrapping */ .mp-profile-tabs { margin: 0 16px 32px; } .mp-tab-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .mp-tab-btn { flex-shrink: 0; padding: 10px 14px; font-size: .88rem; } /* Profile edit page */ .mp-image-uploads { flex-direction: column; } .mp-edit-section { padding-bottom: 24px; margin-bottom: 24px; } .mp-slug-field-row { flex-direction: column; align-items: flex-start; } .mp-slug-prefix { font-size: .78rem; } /* Directory grid */ .mp-members-grid { grid-template-columns: repeat(2, 1fr); } /* Contests & polls */ .mp-contest-grid { grid-template-columns: 1fr; } .mp-entry-grid { grid-template-columns: repeat(2, 1fr); } .mp-polls-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* Tighter avatar positioning */ .mp-profile-banner { height: 130px; } .mp-profile-header { padding-top: 60px; } /* Directory: single column */ .mp-members-grid { grid-template-columns: 1fr; } /* Entry grid: single column */ .mp-entry-grid { grid-template-columns: 1fr; } /* Buttons wrap naturally — do not force full-width */ .mp-profile-header-actions { flex-wrap: wrap; gap: 8px; } } /* ── Mobile slide-up menu sheet ─────────────────────────────────────────────── */ .mp-mobile-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 9992; opacity: 0; transition: opacity .25s ease; } .mp-mobile-sheet-backdrop.mp-sheet-open { display: block; opacity: 1; } .mp-mobile-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--mp-card-bg); border-top: 1px solid var(--mp-border); border-radius: 20px 20px 0 0; z-index: 9993; transform: translateY(100%); transition: transform .3s cubic-bezier(.32, .72, 0, 1); padding: 0 0 calc(56px + env(safe-area-inset-bottom)) 0; max-height: 85vh; overflow-y: auto; } .mp-mobile-sheet.mp-sheet-open { transform: translateY(0); } .mp-mobile-sheet-handle { width: 36px; height: 4px; background: var(--mp-border); border-radius: 2px; margin: 14px auto 20px; } .mp-mobile-sheet-links { display: flex; flex-direction: column; padding: 0 0 8px; } .mp-mobile-sheet-link { display: block; padding: 16px 24px; color: var(--mp-text); text-decoration: none; font-size: 1.1rem; font-weight: 500; border-bottom: 1px solid var(--mp-border); transition: background .15s, color .15s; } .mp-mobile-sheet-link:last-child { border-bottom: none; } .mp-mobile-sheet-link:hover, .mp-mobile-sheet-link:active { background: var(--mp-input-bg); color: var(--mp-primary); } /* ── Frontend admin panel (polls/contests management for admins) ─────────── */ .mp-admin-panel { background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 20px 24px; margin-bottom: 32px; } .mp-admin-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .mp-admin-panel-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--mp-text); text-transform: uppercase; letter-spacing: .06em; opacity: .6; } .mp-admin-form { border-top: 1px solid var(--mp-border); padding-top: 20px; margin-top: 4px; display: flex; flex-direction: column; gap: 14px; } .mp-admin-form-row { display: flex; flex-direction: column; gap: 6px; } .mp-admin-form-row label { font-size: .82rem; font-weight: 600; color: var(--mp-text-muted); text-transform: uppercase; letter-spacing: .04em; } .mp-admin-form-row .mp-input, .mp-admin-form-row .mp-textarea, .mp-admin-form-row select { width: 100%; } .mp-admin-form-row select { background: var(--mp-input-bg); border: 1px solid var(--mp-border); border-radius: 6px; color: var(--mp-text); padding: 8px 12px; font-size: .9rem; } .mp-admin-form-footer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .mp-fp-option-row, .mp-fc-option-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .mp-fp-option-row .mp-input, .mp-fc-option-row .mp-input { flex: 1; } .mp-poll-admin-actions { display: flex; gap: 6px; margin-top: 8px; } .mp-contest-admin-actions { display: flex; gap: 6px; margin-top: 8px; } .mp-btn-xs { padding: 3px 10px; font-size: .78rem; } .mp-btn-danger { background: transparent; border: 1px solid rgba(248,113,113,.5); color: #f87171; } .mp-btn-danger:hover { background: rgba(248,113,113,.1); border-color: #f87171; } /* ========================================================= Promos section ========================================================= */ .mp-promos-section { display: flex; gap: 28px; align-items: flex-start; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); margin: 0 0 24px; } .mp-promos-qr-wrap { flex-shrink: 0; text-align: center; } .mp-promos-qr { display: block; border-radius: 8px; background: #fff; padding: 6px; } .mp-promos-qr-label { margin: 6px 0 0; font-size: .75rem; opacity: .6; } .mp-promos-list { flex: 1; min-width: 0; } .mp-promos-heading { font-size: 1rem; font-weight: 600; margin: 0 0 12px; } .mp-promo-item { border: 1px solid var(--mp-border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; background-color: var(--mp-profile-bg, var(--mp-page-bg)); } .mp-promo-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,.04); border: none; cursor: pointer; font-size: .95rem; font-weight: 500; color: inherit; text-align: left; } .mp-promo-toggle:hover { background: rgba(255,255,255,.08); } .mp-promo-chevron { flex-shrink: 0; transition: transform .2s; } .mp-promo-toggle[aria-expanded="true"] .mp-promo-chevron { transform: rotate(180deg); } .mp-promo-body { padding: 14px 16px; font-size: .9rem; line-height: 1.6; border-top: 1px solid rgba(255,255,255,.08); } @media (max-width: 600px) { .mp-promos-section { flex-direction: column; align-items: center; } .mp-promos-list { width: 100%; } } /* Standalone promos page */ .mp-member-promos-page { max-width: 680px; margin: 0 auto; padding: 24px 16px 60px; } .mp-promos-hero { display: flex; justify-content: center; padding: 32px 0 28px; } .mp-promos-qr-hint { margin: 4px 0 0; font-size: .78rem; opacity: .5; text-align: center; } .mp-promos-list-page { max-width: 640px; margin: 0 auto; padding: 8px 24px 40px; } .mp-promos-list-page .mp-promos-heading { font-size: 1.15rem; margin: 0 0 16px; } .mp-promo-body img, .mp-promo-body audio, .mp-promo-body video, .mp-promo-body iframe { max-width: 100%; height: auto; display: block; margin: 8px 0; } /* Ensure WP media library always floats above the create-post modal */ .media-modal-backdrop { z-index: 999980 !important; } .media-modal { z-index: 999990 !important; } /* Audio player on post cards */ .mp-post-card-audio { width: 100%; margin: 8px 0 0; display: block; } /* ─── Promo page (profile layout) ───────────────────────── */ /* QR accordion wrapper — centered, ~half the promo list width */ .mp-qr-accordion-wrap { display: flex; justify-content: center; padding: 16px 24px 40px; } .mp-qr-accordion { width: min(320px, 100%); border: 1px solid var(--mp-border); border-radius: 10px; overflow: hidden; } .mp-qr-accordion-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; background: var(--mp-card-bg); border: none; color: var(--mp-text); font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left; transition: background .15s; } .mp-qr-accordion-toggle:hover { background: var(--mp-input-bg); } .mp-qr-accordion-chevron { flex-shrink: 0; transition: transform .2s; } .mp-qr-accordion-toggle[aria-expanded="true"] .mp-qr-accordion-chevron { transform: rotate(180deg); } .mp-qr-accordion-body { background: var(--mp-input-bg); border-top: 1px solid var(--mp-border); } .mp-qr-accordion-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 16px; } .mp-qr-accordion-inner .mp-promos-qr { display: block; border-radius: 10px; background: #fff; padding: 8px; } .mp-qr-warning { font-size: .76rem; line-height: 1.55; color: var(--mp-text-muted); text-align: center; margin: 0; border: 1px solid rgba(251,191,36,.35); border-radius: 7px; padding: 10px 12px; background: rgba(251,191,36,.07); } .mp-qr-warning strong { color: #fbbf24; display: block; margin-bottom: 4px; font-size: .8rem; letter-spacing: .04em; } .mp-promos-empty { text-align: center; padding: 24px 16px 40px; color: var(--mp-text-muted); } /* Promo broken-flag */ .mp-promo-flag-wrap { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); } .mp-promo-flag-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: transparent; color: var(--mp-text-muted, rgba(255,255,255,.45)); font-size: .75rem; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .mp-promo-flag-btn:hover { color: #f87171; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); } .mp-promo-flag-btn.is-flagged { color: #f87171; border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.1); } .mp-promo-flag-btn:disabled { opacity: .5; cursor: not-allowed; } .mp-promo-flag-count { font-size: .72rem; color: var(--mp-text-muted, rgba(255,255,255,.4)); } /* Promo carousel */ .mp-promos-carousel-wrap { padding: 24px 0 48px; max-width: 680px; margin: 0 auto; } .mp-promos-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 0; -ms-overflow-style: none; scrollbar-width: none; } .mp-promos-carousel::-webkit-scrollbar { display: none; } .mp-promo-slide { flex: 0 0 100%; scroll-snap-align: start; background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; } .mp-promo-slide-img { width: 100%; max-height: 280px; object-fit: cover; display: block; } .mp-promo-slide-body { padding: 20px 24px 24px; } .mp-promo-slide-title { margin: 0 0 10px; font-size: 1.15rem; } .mp-promo-slide-content { font-size: .95rem; color: var(--mp-text-muted); line-height: 1.6; } .mp-promos-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; } .mp-carousel-prev, .mp-carousel-next { background: transparent; border: 1px solid var(--mp-border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--mp-text-muted); transition: border-color .15s, color .15s; } .mp-carousel-prev:hover, .mp-carousel-next:hover { border-color: var(--mp-primary); color: var(--mp-primary); } .mp-carousel-dots { display: flex; gap: 6px; } .mp-carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--mp-border); cursor: pointer; padding: 0; transition: background .15s; } .mp-carousel-dot.mp-dot-active { background: var(--mp-primary); } /* ─── Member Login Block ─────────────────────────────────── */ .mp-login-block { max-width: 420px; margin: 0 auto; padding: 40px 32px; background: var(--mp-surface, var(--mp-card-bg)); border-radius: 12px; border: 1px solid var(--mp-border); } .mp-login-logo { text-align: center; margin-bottom: 28px; } .mp-login-logo img { max-width: 160px; max-height: 100px; object-fit: contain; } .mp-login-form .mp-field { margin-bottom: 16px; } .mp-login-form label { display: block; font-size: .85rem; margin-bottom: 4px; color: var(--mp-text-muted); } .mp-field-row { display: flex; align-items: center; justify-content: space-between; } .mp-field-row label { margin-bottom: 0; display: flex; align-items: center; gap: 6px; } .mp-forgot-link { font-size: .8rem; color: var(--mp-text-muted); } .mp-forgot-link:hover { color: var(--mp-primary); } .mp-btn-full { width: 100%; margin-top: 8px; } .mp-login-already { text-align: center; padding: 32px; }