diff --git a/frontend/src/features/auth/views/ProfileView.vue b/frontend/src/features/auth/views/ProfileView.vue index 55ef11b5..116038a4 100644 --- a/frontend/src/features/auth/views/ProfileView.vue +++ b/frontend/src/features/auth/views/ProfileView.vue @@ -692,31 +692,6 @@ async function savePassword() { padding: 10px 0 40px; } -.profile-hero { - display: flex; - align-items: center; - gap: 18px; - padding: 30px 34px; - border: 1px solid #eef1f5; - border-radius: 18px; - background: linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(37, 99, 235, 0.08)), #ffffff; - box-shadow: 0 16px 36px rgba(23, 35, 61, 0.08); -} - -.profile-hero.is-quality-owner { - border-color: #d8c9fb; - background: - radial-gradient(circle at 86% 0%, rgba(245, 158, 11, 0.15), transparent 34%), - linear-gradient(135deg, #f3edff 0%, #ffffff 58%, #fff8e8 100%); - box-shadow: 0 16px 42px rgba(109, 40, 217, 0.12); -} - -.profile-hero.is-quality-owner .hero-avatar { - background: linear-gradient(135deg, #5b21b6 0%, #9333ea 62%, #f59e0b 100%); - box-shadow: 0 8px 20px rgba(109, 40, 217, 0.22); -} - -.hero-avatar, .avatar-preview { display: grid; place-items: center; @@ -727,228 +702,12 @@ async function savePassword() { font-weight: 900; } -.hero-avatar { - width: 74px; - height: 74px; - font-size: 28px; - flex-shrink: 0; -} - -.hero-avatar img, .avatar-preview img { width: 100%; height: 100%; object-fit: cover; } -.hero-copy { - min-width: 0; - flex: 1; -} - -.eyebrow { - color: #ff6a00; - font-size: 13px; - font-weight: 900; - text-transform: uppercase; -} - -.hero-copy h1 { - margin: 8px 0 0; - color: #17233d; - font-size: 34px; - line-height: 1.2; -} - -.hero-title-row { - display: flex; - align-items: center; - gap: 10px; - flex-wrap: wrap; -} - -.hero-quality-chip { - display: inline-flex; - align-items: center; - gap: 5px; - min-height: 26px; - padding: 0 10px; - border: 1px solid #d8b4fe; - border-radius: 999px; - background: #f5f3ff; - color: #6d28d9; - font-size: 12px; - font-weight: 900; -} - -.hero-copy p { - margin: 10px 0 0; - color: #64748b; - font-size: 15px; - font-weight: 700; -} - -.hero-realname { - display: inline-flex; - align-items: center; - gap: 8px; - min-height: 40px; - padding: 0 14px; - border: none; - border-radius: 999px; - font-size: 14px; - font-weight: 900; - cursor: pointer; -} - -.hero-realname.is-verified, -.account-card dd.is-verified { - background: #ecfdf3; - color: #16a34a; -} - -.hero-realname.is-pending, -.account-card dd.is-pending { - background: #fff7ed; - color: #f97316; -} - -.hero-realname.is-rejected, -.account-card dd.is-rejected { - background: #fff1f2; - color: #e11d48; -} - -.hero-realname.is-unverified, -.account-card dd.is-unverified { - background: #eff6ff; - color: #2563eb; -} - -.quality-owner-spotlight { - display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; - align-items: center; - gap: 16px; - margin-top: 18px; - padding: 17px 20px; - border: 1px solid #e1d7fa; - border-radius: 14px; - background: linear-gradient(110deg, #faf7ff 0%, #ffffff 62%, #fffaf0 100%); -} - -.quality-owner-spotlight-mark { - display: grid; - width: 46px; - height: 46px; - place-items: center; - border-radius: 12px; - background: linear-gradient(135deg, #5b21b6 0%, #9333ea 65%, #f59e0b 100%); - color: #fff; -} - -.quality-owner-spotlight-copy { - display: grid; - gap: 3px; -} - -.quality-owner-spotlight-copy > span { - color: #7c3aed; - font-size: 10px; - font-weight: 900; - letter-spacing: 0.08em; -} - -.quality-owner-spotlight-copy strong { - color: #2e1065; - font-size: 17px; - font-weight: 900; -} - -.quality-owner-spotlight-copy p { - margin: 0; - color: #70677f; - font-size: 12px; - line-height: 1.55; -} - -.quality-owner-spotlight-benefits { - display: flex; - gap: 7px; - flex-wrap: wrap; - justify-content: flex-end; -} - -.quality-owner-spotlight-benefits span { - padding: 5px 9px; - border-radius: 999px; - background: #f5f3ff; - color: #6d28d9; - font-size: 11px; - font-weight: 800; -} - -.profile-layout { - display: grid; - grid-template-columns: minmax(0, 1fr) 360px; - gap: 22px; - margin-top: 22px; -} - -.edit-panel, -.account-card { - border: 1px solid #eef1f5; - border-radius: 16px; - background: #ffffff; - box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06); -} - -.edit-panel { - padding: 28px; -} - -.panel-head { - display: flex; - align-items: center; - gap: 14px; - margin-bottom: 26px; -} - -.panel-icon { - display: grid; - width: 48px; - height: 48px; - place-items: center; - border-radius: 12px; - background: #fff3e8; - color: #ff6a00; - font-size: 24px; -} - -.panel-head h2 { - margin: 0; - color: #17233d; - font-size: 22px; -} - -.panel-head p { - margin: 6px 0 0; - color: #64748b; - font-size: 14px; - line-height: 1.6; -} - -.avatar-editor { - display: flex; - align-items: center; - gap: 18px; - max-width: 640px; - padding: 20px; - border-radius: 14px; - background: #f8fafc; - border: 1px solid #e2e8f0; -} - .avatar-preview { position: relative; width: 82px; @@ -1028,73 +787,6 @@ async function savePassword() { box-shadow: 0 10px 20px rgba(255, 106, 0, 0.18); } -.account-card { - padding: 24px; -} - -.card-kicker { - color: #8b9cb5; - font-size: 13px; - font-weight: 900; -} - -.account-card dl { - display: grid; - gap: 12px; - margin: 18px 0 0; -} - -.account-card dl div { - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - min-height: 48px; - padding: 0 14px; - border-radius: 10px; - background: #f8fafc; -} - -.account-card dt { - color: #8b9cb5; - font-size: 13px; - font-weight: 800; -} - -.account-card dd { - margin: 0; - color: #334155; - font-size: 14px; - font-weight: 900; - text-align: right; -} - -.account-card dd.growth-level { - color: #7c3aed; -} - -.realname-shortcut { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - min-height: 44px; - margin-top: 18px; - padding: 0 14px; - border: 1px solid #e2e8f0; - border-radius: 10px; - background: #ffffff; - color: #475569; - font-size: 14px; - font-weight: 900; - cursor: pointer; -} - -.realname-shortcut:hover { - border-color: #ff6a00; - color: #ff6a00; -} - .password-hint { margin: 0 0 12px; color: #8b9cb5; @@ -1102,146 +794,6 @@ async function savePassword() { line-height: 1.6; } -.quality-owner-card { - margin-top: 22px; - padding: 26px 28px; - border: 1px solid #e8e4f4; - border-radius: 16px; - background: linear-gradient(135deg, #faf8ff 0%, #ffffff 68%); - box-shadow: 0 10px 28px rgba(76, 29, 149, 0.06); -} - -.points-entry-card { - display: flex; - align-items: center; - justify-content: space-between; - gap: 18px; - margin-top: 18px; - padding: 20px 24px; - border: 1px solid #ffd6bf; - border-radius: 14px; - background: linear-gradient(135deg, #fff8f3 0%, #fff 72%); -} - -.points-entry-card div { - display: grid; - gap: 4px; -} - -.points-entry-card span { - color: #ff6a00; - font-size: 10px; - font-weight: 900; -} - -.points-entry-card strong { - color: #c2410c; - font-size: 19px; -} - -.points-entry-card p { - margin: 0; - color: #6b7280; - font-size: 12px; -} - -.points-entry-card :deep(.el-button--primary) { - border: 1px solid #ff6a00 !important; - background: #ff6a00 !important; - box-shadow: 0 6px 14px rgba(255, 106, 0, 0.2) !important; -} - -.quality-owner-card.is-active { - border-color: #c4b5fd; -} - -.quality-owner-heading, -.quality-owner-actions { - display: flex; - align-items: center; - justify-content: space-between; - gap: 18px; -} - -.quality-owner-heading h2 { - margin: 6px 0 0; - color: #312e81; - font-size: 24px; -} - -.quality-owner-heading p { - max-width: 680px; - margin: 8px 0 0; - color: #6b7280; - font-size: 13px; - font-weight: 700; - line-height: 1.7; -} - -.quality-owner-status { - flex-shrink: 0; - padding: 6px 12px; - border-radius: 999px; - background: #f1f5f9; - color: #64748b; - font-size: 12px; - font-weight: 900; -} - -.quality-owner-card.is-active .quality-owner-status { - background: #ede9fe; - color: #6d28d9; -} - -.quality-owner-metrics { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 10px; - margin-top: 20px; -} - -.quality-owner-metrics div { - display: grid; - gap: 6px; - padding: 14px; - border: 1px solid #ede9fe; - border-radius: 10px; - background: rgba(255, 255, 255, 0.82); -} - -.quality-owner-metrics span, -.quality-owner-actions span { - color: #7b8492; - font-size: 12px; - font-weight: 700; -} - -.quality-owner-metrics strong { - color: #312e81; - font-size: 18px; - font-weight: 900; -} - -.quality-owner-actions { - margin-top: 16px; -} - -.quality-owner-actions :deep(.el-button--primary) { - border: none; - background: #7c3aed; -} - -.quality-owner-action-buttons { - display: flex; - gap: 10px; - flex-wrap: wrap; - justify-content: flex-end; -} - -.quality-owner-action-buttons :deep(.el-button) { - margin-left: 0; -} - .quality-owner-agreement-body { display: grid; gap: 16px; @@ -1321,41 +873,6 @@ async function savePassword() { font-size: 13px; } -@media (max-width: 1100px) { - .profile-layout { - grid-template-columns: 1fr; - } - - .quality-owner-metrics { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (max-width: 640px) { - .quality-owner-heading, - .quality-owner-actions { - align-items: flex-start; - flex-direction: column; - } - - .quality-owner-action-buttons { - justify-content: flex-start; - } - - .quality-owner-metrics { - grid-template-columns: 1fr; - } - - .quality-owner-spotlight { - grid-template-columns: auto minmax(0, 1fr); - } - - .quality-owner-spotlight-benefits { - grid-column: 1 / -1; - justify-content: flex-start; - } -} - /* Account center layout */ .profile-page { width: min(1120px, 100%);