/* ============================================================ PROFILE.CSS — CareConnect PH Profile Page Styles ============================================================ */ /* Page */ .profile-page { background: #f5f9f6; scrollbar-gutter: stable; } html { overflow-y: scroll; } /* Override the global `body { overflow-x: hidden }` from auth.css for the profile page only. `overflow-x: hidden` creates a new containing block that breaks `position: sticky` on direct children — meaning `.profile-hero`'s sticky position would pin to rather than the viewport, defeating the whole point. `overflow-x: clip` does the same visual thing (no horizontal scrollbar) WITHOUT creating that containing block, so sticky works. Modern browsers support clip; older ones harmlessly fall back. */ body.profile-page { overflow-x: clip; } /* Hero */ .profile-hero { background: linear-gradient(135deg, #0d1610, #1a2d20 50%, #0d1610); padding: 0; /* Stick the hero to the top of the viewport so the avatar + name + balance stay in view as the user scrolls through Overview / Skills / Documents / Portfolio / etc. tabs. z-index puts it above the tab-nav strip and tab content but below modals (which use z-index 1000+). The existing box-shadow becomes the "lifted" affordance once scrolling begins. */ position: sticky; top: 0; z-index: 50; overflow: hidden; box-shadow: 0 2px 20px rgba(0,0,0,.3); height: 150px; } .profile-hero::before { display: none; } .profile-hero > * { position: relative; z-index: 1; } /* Hero Nav */ .profile-hero-nav { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 12px; color: rgba(255,255,255,.45); } .profile-hero-nav a { text-decoration: none; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.45); transition: color .2s; } .profile-hero-nav a:hover { color: #fff; } /* Nav Logo (legacy, kept for compatibility) */ .profile-nav-logo { display: flex; align-items: center; gap: 8px; } .profile-nav-logo-icon { width: 28px; height: 28px; border-radius: 7px; background: #2ea84a; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(46,168,74,.3); } .profile-nav-logo-icon svg { width: 14px; height: 14px; fill: #fff; } .profile-nav-logo-text { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -.3px; } .profile-nav-logo-text span { color: #4ade80; } /* Nav Actions */ .profile-nav-actions { display: flex; gap: 8px; align-items: center; } .profile-nav-btn { padding: 6px 14px; border-radius: 50px; font-size: 10px; font-weight: 700; cursor: pointer; border: none; font-family: inherit; transition: all .2s; } .profile-nav-btn.g, .profile-nav-btn.btn-green { background: #2ea84a; color: #fff; box-shadow: 0 3px 12px rgba(46,168,74,.3); } .profile-nav-btn.g:hover, .profile-nav-btn.btn-green:hover { background: #1e7a33; } .profile-nav-btn.r, .profile-nav-btn.btn-red { background: rgba(239,68,68,.08); color: #ef4444; border: 1px solid rgba(239,68,68,.12); } .profile-nav-btn.r:hover, .profile-nav-btn.btn-red:hover { background: rgba(239,68,68,.15); } /* Hero Body */ .profile-hero-body { display: flex; align-items: center; gap: 12px; max-width: 900px; margin: 0 auto; padding: 0; box-sizing: border-box; height: calc(150px - 30px); } .profile-avatar-circle { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2ea84a, #1e7a33); color: #fff; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid rgba(255,255,255,.06); } .profile-hero-info { flex: 1; min-width: 0; } .profile-display-name { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.3px; margin: 0; line-height: 1.2; } .profile-display-email { font-size: 10px; color: rgba(255,255,255,.25); margin: 1px 0 0; } /* Hero Badges */ .profile-badge-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; } .profile-header-badge { font-size: 8px; font-weight: 700; padding: 2px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; } .profile-header-badge.v, .profile-header-badge.is-verified { background: rgba(46,168,74,.12); color: #4ade80; } .profile-header-badge.r, .profile-header-badge.is-ranked { background: rgba(59,130,246,.1); color: #60a5fa; } .profile-header-badge.s, .profile-header-badge.is-starred { background: rgba(245,158,11,.1); color: #fbbf24; } /* Hero Stats */ .profile-hero-stats { display: flex; gap: 2px; flex-shrink: 0; } .hero-stat { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; background: rgba(255,255,255,.04); border-radius: 6px; } .hero-stat-val { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; color: #4ade80; letter-spacing: -.3px; } .hero-stat-lbl { font-size: 6px; font-weight: 700; color: rgba(255,255,255,.2); text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; } /* Edit Button */ .profile-edit-btn { padding: 6px 14px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.08); cursor: pointer; transition: all .2s; flex-shrink: 0; font-family: inherit; } .profile-edit-btn:hover { background: rgba(255,255,255,.12); } /* Main Content */ .profile-main-content { max-width: 900px; margin: 14px auto 0; padding: 0 0 60px; position: relative; z-index: 2; } /* Tab Bar */ .profile-tab-bar { display: flex; gap: 2px; background: #fff; border-radius: 10px; padding: 3px; box-shadow: 0 1px 6px rgba(0,0,0,.03); margin-bottom: 14px; border: 1px solid rgba(46,168,74,.04); } .profile-tab-btn { flex: 1; padding: 8px 6px; text-align: center; border-radius: 8px; font-size: 10px; font-weight: 700; color: #6b7c6f; background: transparent; border: none; cursor: pointer; transition: all .2s; font-family: inherit; } .profile-tab-btn:hover { color: #2ea84a; } .profile-tab-btn.active { background: #2ea84a; color: #fff; box-shadow: 0 2px 8px rgba(46,168,74,.2); } /* Tab Panels */ .profile-tab-panel { display: none; min-height: 520px; animation: pfu .25s ease; } .profile-tab-panel.active { display: block; } @keyframes pfu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Section Cards */ .profile-section-card { background: #fff; border-radius: 12px; padding: 16px; border: 1px solid rgba(46,168,74,.03); margin-bottom: 10px; transition: box-shadow .2s; } .profile-section-card:hover { box-shadow: 0 3px 14px rgba(46,168,74,.05); } /* Card Headings */ .profile-card-heading { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; color: #1a1f1b; letter-spacing: -.2px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .profile-card-heading .heading-icon { width: 24px; height: 24px; border-radius: 6px; background: #e8f7ec; display: flex; align-items: center; justify-content: center; font-size: 11px; } .profile-card-heading .tag-badge { margin-left: auto; font-size: 7px; font-weight: 700; padding: 2px 7px; border-radius: 12px; } /* Info Grid */ .profile-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .profile-info-field .field-label { font-size: 8px; font-weight: 800; color: #9aaa9e; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; } .profile-info-field .field-value { font-size: 12px; font-weight: 600; color: #1a1f1b; } .profile-info-field .field-value.text-green { color: #2ea84a; } /* ============================================================ Professional Profile Card ============================================================ */ .pro-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px; } .pro-label { font-size: 8px; font-weight: 800; color: #9aaa9e; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; } .pro-title { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 900; color: #2ea84a; letter-spacing: -.3px; margin: 0 0 8px; } .pro-badge { font-size: 8px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; } .pro-badge.role { background: rgba(59,130,246,.08); color: #3b82f6; } .pro-badge.verified { background: rgba(46,168,74,.08); color: #2ea84a; } .pro-skill-tag { font-size: 9px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: #e8f7ec; color: #1e7a33; } .pro-skill-tag.empty { background: #f5f9f6; color: #9aaa9e; border: 1px solid #dce6df; } .pro-rate { font-size: 12px; font-weight: 600; color: #2ea84a; } .pro-rate-select { padding: 4px 8px; border: 1.5px solid #dce6df; border-radius: 6px; background: #f5f9f6; font-family: inherit; font-size: 10px; font-weight: 700; color: #1a1f1b; cursor: pointer; outline: none; } .pro-stat-val { font-size: 12px; font-weight: 700; margin: 0; } .pro-stat-val.stars { color: #f59e0b; } .pro-stat-val.success { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 900; color: #2ea84a; } /* ============================================================ CV-style Profile Card ============================================================ */ .cv-card { padding: 0; } /* Body */ .cv-body { display: grid; grid-template-columns: 1fr 1fr; } .cv-col-left { padding: 16px 20px; border-right: 1px solid #eef2ef; } .cv-col-right { padding: 16px 20px; } /* Section titles */ .cv-section-title { font-size: 9px; font-weight: 800; color: #2ea84a; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1.5px solid #e8f7ec; } /* Rows */ .cv-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f5f9f6; } .cv-row-last { border-bottom: none; } .cv-label { font-size: 10px; font-weight: 700; color: #9aaa9e; min-width: 100px; flex-shrink: 0; } .cv-value { font-size: 12px; font-weight: 600; color: #1a1f1b; } .cv-value.text-green { color: #2ea84a; } .cv-balance { font-size: 12px; font-weight: 600; color: #2ea84a; } /* Bio */ .cv-bio { font-size: 11px; line-height: 1.5; color: #6b7c6f; margin: 0; font-style: italic; } /* Tags */ .cv-tags { display: flex; gap: 4px; flex-wrap: wrap; } /* Rate row */ .cv-rate-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 0; } /* Experience */ .cv-experience { margin: 0; } .cv-exp-item { padding: 6px 0; border-bottom: 1px solid #f5f9f6; } .cv-exp-item:last-child { border-bottom: none; } .cv-exp-title { font-size: 11px; font-weight: 700; color: #1a1f1b; margin: 0; } .cv-exp-place { font-size: 10px; font-weight: 600; color: #6b7c6f; margin: 1px 0 0; } .cv-exp-date { font-size: 9px; color: #9aaa9e; margin: 1px 0 0; } .cv-exp-empty { font-size: 10px; color: #9aaa9e; font-style: italic; margin: 0; } .cv-exp-remove { font-size: 14px; font-weight: 800; color: #ef4444; cursor: pointer; padding: 0 4px; flex-shrink: 0; } .cv-exp-remove:hover { color: #dc2626; } /* CV Footer — Edit/Save buttons */ .cv-footer { display: flex; gap: 6px; padding: 12px 20px; border-top: 1px solid #eef2ef; } .cv-btn { padding: 8px 16px; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .2s; border: none; display: flex; align-items: center; gap: 4px; } .cv-btn-outline { background: transparent; color: #6b7c6f; border: 1.5px solid #dce6df; } .cv-btn-outline:hover { border-color: #2ea84a; color: #2ea84a; } .cv-btn-green { background: #2ea84a; color: #fff; box-shadow: 0 2px 8px rgba(46,168,74,.2); } .cv-btn-green:hover { background: #1e7a33; } /* Inline edit inputs */ .cv-inline-input { font-family: inherit; font-size: 12px; font-weight: 600; color: #1a1f1b; padding: 4px 8px; border: 1.5px solid #2ea84a; border-radius: 6px; background: #f5f9f6; outline: none; width: 100%; box-sizing: border-box; } .cv-inline-input:focus { border-color: #1e7a33; box-shadow: 0 0 0 2px rgba(46,168,74,.1); } .cv-inline-textarea { font-family: inherit; font-size: 11px; font-weight: 500; color: #1a1f1b; padding: 8px; border: 1.5px solid #2ea84a; border-radius: 6px; background: #f5f9f6; outline: none; width: 100%; box-sizing: border-box; min-height: 60px; resize: vertical; line-height: 1.5; } .cv-inline-textarea:focus { border-color: #1e7a33; box-shadow: 0 0 0 2px rgba(46,168,74,.1); } /* Tag remove button */ .cv-tag-remove { cursor: pointer; font-weight: 800; color: #ef4444; margin-left: 2px; } .cv-tag-remove:hover { color: #dc2626; } /* Add skill/experience rows */ .cv-add-skill, .cv-add-exp { display: flex; gap: 4px; align-items: center; } .cv-mini-btn { padding: 4px 10px; border: none; border-radius: 6px; font-size: 12px; font-weight: 800; cursor: pointer; transition: all .2s; } .cv-mini-btn-green { background: #2ea84a; color: #fff; } .cv-mini-btn-green:hover { background: #1e7a33; } /* Responsive */ @media (max-width: 700px) { .cv-body { grid-template-columns: 1fr; } .cv-col-left { border-right: none; border-bottom: 1px solid #eef2ef; } } /* ============================================================ Documents Tab ============================================================ */ .doc-hint { font-size: 10px; color: #9aaa9e; margin: 0 0 10px; } .doc-status-bar { display: flex; gap: 12px; } .doc-status-item { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 10px; background: #f5f9f6; border-radius: 8px; } .doc-status-num { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 900; color: #1a1f1b; } .doc-status-num.doc-green { color: #2ea84a; } .doc-status-num.doc-yellow { color: #f59e0b; } .doc-status-label { font-size: 9px; font-weight: 700; color: #9aaa9e; text-transform: uppercase; letter-spacing: .4px; } .doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .doc-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f5f9f6; border: 1.5px solid #eef2ef; border-radius: 10px; cursor: pointer; transition: all .15s; } .doc-card:hover { border-color: #2ea84a; background: #eef7f0; } .doc-card.doc-uploaded { border-color: rgba(46,168,74,.2); background: #eef7f0; } .doc-icon { width: 32px; height: 32px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; border: 1px solid #eef2ef; } .doc-info { flex: 1; min-width: 0; } .doc-name { font-size: 11px; font-weight: 700; color: #1a1f1b; margin: 0; } .doc-desc { font-size: 9px; color: #9aaa9e; margin: 1px 0 0; } .doc-badge { font-size: 8px; font-weight: 700; padding: 3px 8px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; } .doc-not-uploaded { background: #f5f5f5; color: #9aaa9e; } .doc-pending { background: rgba(245,158,11,.08); color: #f59e0b; } .doc-verified { background: rgba(46,168,74,.08); color: #2ea84a; } .doc-rejected { background: rgba(239,68,68,.08); color: #ef4444; } .verify-check-row { font-size: 11px; font-weight: 600; color: #6b7c6f; display: flex; align-items: center; gap: 6px; } .verify-icon { font-size: 13px; } .doc-filename { font-size: 8px; color: #6b7c6f; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; } @media (max-width: 700px) { .doc-grid { grid-template-columns: 1fr; } } /* ============================================================ QR Code ============================================================ */ .profile-qr-wrapper { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .profile-qr-code-box { background: #fff; padding: 8px; border-radius: 10px; border: 2px solid rgba(46,168,74,.08); flex-shrink: 0; } .profile-qr-account-id { font-family: monospace; font-size: 10px; color: #2ea84a; font-weight: 700; margin-top: 4px; text-align: center; } /* ============================================================ Agreements ============================================================ */ .agreement-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f5f9f6; border: 1px solid rgba(46,168,74,.03); border-radius: 10px; margin-bottom: 6px; cursor: pointer; transition: all .15s; } .agreement-list-item:hover { border-color: rgba(46,168,74,.12); background: #eef7f0; } .agreement-detail-card { background: #fff; border: 2px solid #2ea84a; border-radius: 12px; padding: 16px; margin-bottom: 12px; } .agreement-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; } .agreement-detail-cell { padding: 8px 10px; background: #f5f9f6; border-radius: 8px; } .agreement-detail-cell .field-label { font-size: 8px; color: #9aaa9e; font-weight: 700; text-transform: uppercase; } .agreement-detail-cell .field-value { font-size: 12px; font-weight: 700; color: #1a1f1b; margin-top: 1px; } /* ============================================================ Credentials & Portfolio ============================================================ */ .credential-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .credential-card { display: flex; align-items: center; gap: 10px; background: #f5f9f6; border: 1px solid rgba(46,168,74,.03); border-radius: 10px; padding: 12px; transition: all .2s; } .credential-card:hover { border-color: rgba(46,168,74,.12); } .credential-card-add { border-style: dashed; border-color: rgba(46,168,74,.12); cursor: pointer; } .credential-card-add:hover { background: #e8f7ec; } .credential-icon { width: 32px; height: 32px; border-radius: 8px; background: #e8f7ec; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .credential-name { font-size: 11px; font-weight: 700; color: #1a1f1b; } .credential-status { font-size: 9px; font-weight: 700; } .credential-status.status-verified { color: #2ea84a; } .credential-status.status-pending { color: #f59e0b; } .credential-filename { font-size: 8px; color: #9aaa9e; } .credential-action-btn { padding: 4px 10px; border-radius: 6px; font-size: 9px; font-weight: 700; background: #fff; color: #6b7c6f; border: 1px solid #dce6df; cursor: pointer; transition: all .2s; flex-shrink: 0; } .credential-action-btn:hover { border-color: #2ea84a; color: #2ea84a; } /* Photo & Portfolio */ .photo-upload-area { width: 100px; height: 100px; border: 2px dashed rgba(46,168,74,.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; overflow: hidden; flex-shrink: 0; } .photo-upload-area:hover { border-color: #2ea84a; background: #e8f7ec; } .photo-upload-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 100%; } .photo-upload-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .portfolio-thumbnail-grid { display: flex; gap: 5px; flex-wrap: wrap; } .portfolio-thumbnail { width: 48px; height: 48px; border-radius: 7px; background: #f3f8f4; border: 1px solid rgba(46,168,74,.03); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all .2s; } .portfolio-thumbnail:hover { transform: scale(1.05); } .portfolio-add-btn { border-style: dashed; border-color: rgba(46,168,74,.12); cursor: pointer; font-size: 16px; color: #2ea84a; font-weight: 800; } .portfolio-add-btn:hover { background: #e8f7ec; } /* ============================================================ Quick Actions ============================================================ */ .profile-quick-actions { display: flex; gap: 6px; flex-wrap: wrap; } .profile-quick-action-btn { flex: 1; min-width: 100px; padding: 9px 14px; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 4px; border: none; } .profile-quick-action-btn.btn-primary { background: #2ea84a; color: #fff; box-shadow: 0 2px 8px rgba(46,168,74,.2); } .profile-quick-action-btn.btn-primary:hover { background: #1e7a33; } .profile-quick-action-btn.btn-outline { background: transparent; color: #6b7c6f; border: 1.5px solid #dce6df; } .profile-quick-action-btn.btn-outline:hover { border-color: #2ea84a; color: #2ea84a; } .profile-quick-action-btn.btn-danger { background: rgba(239,68,68,.03); color: #ef4444; border: 1.5px solid rgba(239,68,68,.08); } .profile-quick-action-btn.btn-danger:hover { background: rgba(239,68,68,.08); } /* ============================================================ Location Settings ============================================================ */ @keyframes locPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } #locLiveToggle:checked + span { background: #2ea84a !important; } #locLiveToggle:checked + span + #locToggleKnob { transform: translateX(16px); } /* Google Places Autocomplete overrides */ .pac-container { z-index: 99999 !important; font-family: inherit !important; border-radius: 8px !important; border: 1px solid #dce6df !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; margin-top: 4px !important; } .pac-item { padding: 8px 12px !important; font-size: 12px !important; cursor: pointer !important; } .pac-item:hover { background: #f5f9f6 !important; } .pac-item-query { font-weight: 600 !important; color: #1a1f1b !important; } gmp-place-autocomplete { flex: 1; --gmpx-color-surface: #f5f9f6; --gmpx-color-on-surface: #1a1f1b; --gmpx-font-family: inherit; --gmpx-font-size-base: 10px; border: none !important; outline: none !important; background: transparent !important; height: auto !important; } gmp-place-autocomplete input { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 10px !important; font-weight: 600 !important; color: #1a1f1b !important; background: transparent !important; border: none !important; outline: none !important; padding: 0 !important; height: auto !important; } gmp-place-autocomplete input::placeholder { color: #9aaa9e !important; font-weight: 500 !important; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 700px) { .profile-hero-nav, .profile-hero-body, .profile-stats-bar { padding-left: 16px; padding-right: 16px; } .profile-hero-body { flex-direction: column; text-align: center; gap: 14px; } .profile-badge-row { justify-content: center; } .profile-avatar-circle { width: 72px; height: 72px; font-size: 26px; } .profile-display-name { font-size: 20px; } .profile-stats-bar { flex-wrap: wrap; } .profile-stat-item { min-width: 45%; } .profile-main-content { padding: 0 10px 40px; } .profile-tab-bar { overflow-x: auto; } .profile-tab-btn { white-space: nowrap; min-width: 70px; flex: none; } .profile-info-grid, .credential-grid, .agreement-detail-grid { grid-template-columns: 1fr; } .profile-quick-actions { flex-direction: column; } .pro-grid { grid-template-columns: 1fr; } } /* ============================================================ SETTINGS TAB — Searchable Settings ============================================================ */ .settings-search-wrap { display: flex; align-items: center; background: #f5f9f6; border: 1.5px solid #dce6df; border-radius: 10px; padding: 4px 10px; transition: border-color .2s; } .settings-search-wrap:focus-within { border-color: #2ea84a; background: #fff; box-shadow: 0 0 0 3px rgba(46,168,74,.08); } .settings-search-icon { font-size: 13px; margin-right: 6px; opacity: .6; } #settingsSearch { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 12px; font-weight: 600; color: #1a1f1b; padding: 8px 0; } #settingsSearch::placeholder { color: #9aaa9e; font-weight: 500; } .settings-search-clear { background: transparent; border: none; color: #9aaa9e; font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 4px; } .settings-search-clear:hover { color: #ef4444; background: rgba(239,68,68,.06); } .settings-search-result { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 600; color: #1a1f1b; background: rgba(46,168,74,.04); border: 1px solid rgba(46,168,74,.08); margin-bottom: 4px; transition: all .15s; } .settings-search-result:hover { background: rgba(46,168,74,.08); border-color: rgba(46,168,74,.2); transform: translateX(2px); } .settings-search-result-path { margin-left: auto; font-size: 9px; color: #9aaa9e; font-weight: 500; } .settings-section { margin-bottom: 12px; } /* 2-column masonry-style layout for settings categories */ .settings-grid { column-count: 2; column-gap: 10px; } .settings-grid .settings-section { margin-bottom: 10px; padding: 14px 16px; break-inside: avoid; display: inline-block; width: 100%; } .settings-grid .settings-section[data-cat="danger"] { column-span: all; } .settings-grid .profile-card-heading { font-size: 12px; font-weight: 800; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eef2ef; letter-spacing: -.2px; } .settings-grid .profile-card-heading .heading-icon { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; } @media (max-width: 700px) { .settings-grid { column-count: 1; } } .settings-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f5f9f6; gap: 10px; min-height: 30px; } .settings-item:last-child { border-bottom: none; } .settings-item-action { cursor: pointer; transition: background .15s, padding-left .15s; margin: 0 -8px; padding: 8px; border-radius: 6px; border-bottom: 1px solid #f5f9f6; } .settings-item-action:last-child { border-bottom: none; } .settings-item-action:hover { background: rgba(46,168,74,.05); padding-left: 12px; } .settings-item-action:hover .settings-arrow { color: #2ea84a; transform: translateX(2px); } .settings-item.settings-highlight { animation: settingsHighlight 2s ease; } @keyframes settingsHighlight { 0%, 100% { background: transparent; } 20%, 60% { background: rgba(46,168,74,.1); box-shadow: 0 0 0 3px rgba(46,168,74,.08); border-radius: 8px; } } .settings-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: #1a1f1b; flex: 1; min-width: 0; } .settings-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; } .settings-value { font-size: 11px; color: #6b7c6f; font-weight: 500; text-align: right; flex-shrink: 0; } .settings-arrow { color: #9aaa9e; font-size: 12px; transition: color .15s, transform .15s; } .settings-select { padding: 4px 8px; border: 1px solid #dce6df; border-radius: 6px; background: #fff; font-family: inherit; font-size: 10px; font-weight: 600; color: #1a1f1b; cursor: pointer; outline: none; } .settings-select:focus { border-color: #2ea84a; } /* Toggle switch */ .settings-toggle { position: relative; display: inline-block; width: 34px; height: 18px; } .settings-toggle input { opacity: 0; width: 0; height: 0; } .settings-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #dce6df; border-radius: 18px; transition: .25s; } .settings-toggle-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .settings-toggle input:checked + .settings-toggle-slider { background: #2ea84a; } .settings-toggle input:checked + .settings-toggle-slider:before { transform: translateX(16px); } /* Hidden sections during search */ .settings-section.settings-hidden { display: none; } .settings-item.settings-hidden { display: none; } /* ==================================================================== DARK-MODE OVERRIDES — Pedro 2026-05-15 ==================================================================== profile.css was originally authored with hardcoded light colors throughout (no CSS variables). This block carries the whole profile view into dark mode by overriding every visible element. Palette matches the rest of the app (see body.dark-mode in clientView.css): #0c1410 page bg #141f17 card surface #1a2820 nested fill (inputs, cells, hover) #232e26 border-hard #eef3f0 text-1 (primary) #9ab0a0 text-2 (secondary) #5a7060 text-3 (muted) ==================================================================== */ /* Page */ body.dark-mode .profile-page { background: #0c1410; } /* Tab nav strip — pill row above the tab panels */ body.dark-mode .profile-tab-bar { background: #141f17; border-color: #232e26; } body.dark-mode .profile-tab-btn { color: #9ab0a0; } body.dark-mode .profile-tab-btn:hover { color: #4ade80; } /* .profile-tab-btn.active stays as the green pill — works on both themes */ /* All card-like containers — sections, cards, list items */ body.dark-mode .profile-section-card, body.dark-mode .settings-section, body.dark-mode .credential-card, body.dark-mode .doc-card, body.dark-mode .agreement-list-item, body.dark-mode .agreement-detail-card, body.dark-mode .cv-card { background: #141f17; border-color: #232e26; color: #eef3f0; } body.dark-mode .profile-section-card:hover { box-shadow: 0 3px 14px rgba(46,168,74,.1); } body.dark-mode .agreement-list-item:hover { background: #1a2820; border-color: rgba(46,168,74,.2); } body.dark-mode .credential-card:hover, body.dark-mode .doc-card:hover { border-color: rgba(46,168,74,.25); } /* Card headings */ body.dark-mode .profile-card-heading, body.dark-mode .settings-grid .profile-card-heading, body.dark-mode .cv-section-title { color: #eef3f0; } body.dark-mode .profile-card-heading .heading-icon, body.dark-mode .settings-grid .profile-card-heading .heading-icon { background: rgba(46,168,74,.14); color: #4ade80; } /* Text — labels (muted) + values (primary) */ body.dark-mode .field-label, body.dark-mode .pro-label, body.dark-mode .cv-label, body.dark-mode .doc-status-label, body.dark-mode .doc-desc, body.dark-mode .doc-hint, body.dark-mode .settings-label, body.dark-mode .credential-filename, body.dark-mode .doc-filename, body.dark-mode .cv-exp-place, body.dark-mode .cv-bio { color: #9ab0a0; } body.dark-mode .field-value, body.dark-mode .pro-title, body.dark-mode .cv-value, body.dark-mode .doc-name, body.dark-mode .credential-name, body.dark-mode .cv-exp-title, body.dark-mode .agreement-detail-cell .field-value { color: #eef3f0; } body.dark-mode .settings-value, body.dark-mode .cv-exp-date, body.dark-mode .cv-exp-empty, body.dark-mode .settings-search-result-path { color: #9ab0a0; } /* Nested fill cells — agreement detail grid, photo upload, skill tags */ body.dark-mode .agreement-detail-cell, body.dark-mode .photo-upload-area, body.dark-mode .pro-skill-tag, body.dark-mode .doc-status-bar { background: #1a2820; border-color: #232e26; color: #eef3f0; } body.dark-mode .agreement-detail-cell .field-label { color: #5a7060; } body.dark-mode .pro-skill-tag.empty { color: #5a7060; } /* Settings rows — bordered list items inside each settings-section */ body.dark-mode .settings-item { border-color: #232e26; } body.dark-mode .settings-item-action:hover { background: rgba(46,168,74,.06); } body.dark-mode .settings-item-action:hover .settings-arrow { color: #4ade80; } body.dark-mode .settings-icon { background: rgba(46,168,74,.14); color: #4ade80; } body.dark-mode .settings-arrow { color: #5a7060; } body.dark-mode .settings-item.settings-highlight { background: rgba(245,158,11,.08); } /* Inputs / search / selects */ body.dark-mode .settings-search-wrap, body.dark-mode .cv-inline-input, body.dark-mode .cv-inline-textarea, body.dark-mode .settings-select { background: #1a2820; border-color: #232e26; color: #eef3f0; } body.dark-mode .settings-search-wrap:focus-within, body.dark-mode .cv-inline-input:focus, body.dark-mode .cv-inline-textarea:focus, body.dark-mode .settings-select:focus { border-color: #2ea84a; box-shadow: 0 0 0 2px rgba(46,168,74,.15); } body.dark-mode .settings-search-icon { color: #5a7060; } body.dark-mode .settings-search-clear { color: #9ab0a0; } body.dark-mode .settings-search-clear:hover { color: #eef3f0; } body.dark-mode .settings-search-result { background: #1a2820; border-color: #232e26; } body.dark-mode .settings-search-result:hover { background: rgba(46,168,74,.08); } /* Buttons — outline / quick-action variants */ body.dark-mode .cv-btn-outline, body.dark-mode .profile-quick-action-btn.btn-outline, body.dark-mode .credential-action-btn, body.dark-mode .cv-mini-btn { background: transparent; border-color: #232e26; color: #eef3f0; } body.dark-mode .cv-btn-outline:hover, body.dark-mode .profile-quick-action-btn.btn-outline:hover, body.dark-mode .credential-action-btn:hover { border-color: #2ea84a; color: #4ade80; } body.dark-mode .profile-quick-action-btn.btn-danger:hover { background: rgba(239,68,68,.12); } /* Document tab specific cards + add affordances */ body.dark-mode .doc-card.doc-uploaded { background: #1a2820; } body.dark-mode .doc-icon { background: rgba(46,168,74,.14); } body.dark-mode .credential-card-add, body.dark-mode .portfolio-add-btn { background: #141f17; border-color: #232e26; color: #9ab0a0; } body.dark-mode .credential-card-add:hover, body.dark-mode .portfolio-add-btn:hover { background: rgba(46,168,74,.08); border-color: #2ea84a; } body.dark-mode .photo-upload-area:hover { background: rgba(46,168,74,.08); } /* CV body rows / experience list */ body.dark-mode .cv-row { border-color: #232e26; } body.dark-mode .cv-exp-item { border-color: #232e26; } body.dark-mode .cv-footer { border-color: #232e26; } /* Portfolio + QR */ body.dark-mode .portfolio-thumbnail { border-color: #232e26; } body.dark-mode .profile-qr-code-box { background: #1a2820; border-color: #232e26; } body.dark-mode .profile-qr-account-id { color: #9ab0a0; } /* Google Places autocomplete dropdown */ body.dark-mode .pac-container { background: #141f17 !important; border-color: #232e26 !important; } body.dark-mode .pac-item { color: #eef3f0 !important; border-color: #232e26 !important; } body.dark-mode .pac-item:hover { background: #1a2820 !important; } body.dark-mode .pac-item-query { color: #eef3f0 !important; } /* Edit affordances — small remove buttons */ body.dark-mode .cv-tag-remove, body.dark-mode .cv-exp-remove { color: #9ab0a0; } /* ──────────────────────────────────────────────────────────────────── Inline-styled white cards — Pedro 2026-05-15 round 2 ──────────────────────────────────────────────────────────────────── These elements use inline `style="background:#fff..."` (or #f5f9f6) so they need !important to override. Each one was a still-light sheet showing through dark mode across the Profile tabs. ──────────────────────────────────────────────────────────────────── */ /* "Get Verified — Trust Badge" banner shown atop every tab */ body.dark-mode #becomeVerifiedCard { background: #141f17 !important; border-color: #232e26 !important; } body.dark-mode #bvBannerTitle { color: #eef3f0 !important; } body.dark-mode #bvBannerStatus { color: #9ab0a0 !important; } body.dark-mode #bvBannerArrow { color: #5a7060 !important; } body.dark-mode #bvDetails { border-top-color: #232e26 !important; } /* Internal "info note" + requirement rows */ body.dark-mode #bvDetails > p { color: #9ab0a0 !important; background: rgba(59,130,246,.10) !important; border-left-color: rgba(59,130,246,.5) !important; } body.dark-mode #bvDetails [id^="bvReq"] p { color: #eef3f0 !important; } body.dark-mode #bvDetails [id^="bvReq"] p span:last-child { color: #9ab0a0 !important; } /* Progress bar track */ body.dark-mode #bvDetails > div[style*="height:4px"] { background: #1a2820 !important; } /* Overview tab — three stat boxes (Wallet Balance / Total Spent / Total Earned). Generated by JS at runtime so we target the container ID and any direct child div. */ body.dark-mode #modeStatsGrid > div { background: #1a2820 !important; border-color: #232e26 !important; } /* Label inside the stat box (uppercase "WALLET BALANCE" etc.) */ body.dark-mode #modeStatsGrid > div > p:first-child { color: #9ab0a0 !important; } /* Value — the dark color (#1a1f1b) gets flipped; greens (#2ea84a) stay readable on dark already. */ body.dark-mode #modeStatsGrid > div > p[style*="color:#1a1f1b"] { color: #eef3f0 !important; } /* Documents tab — Verification Status row. .doc-status-item had background:#f5f9f6 in the base CSS. */ body.dark-mode .doc-status-item { background: #1a2820 !important; } body.dark-mode .doc-status-num { color: #eef3f0; } /* "Requirements for Verified Badge" inner checklist box */ body.dark-mode #verifyChecklist { background: #1a2820 !important; border-color: #232e26 !important; } body.dark-mode #verifyChecklist .verify-text { color: #eef3f0; } body.dark-mode #verifyResult { color: #9ab0a0 !important; } /* Agreements tab — Agreement Registry stats bar + search input row */ body.dark-mode #agreementStatsBar { background: #1a2820 !important; border-color: #232e26 !important; } body.dark-mode #agreementStatsBar > div { color: #eef3f0; } /* Search row container (sibling div with same hardcoded bg) */ body.dark-mode #agreementSearchInput { color: #eef3f0 !important; background: transparent !important; } body.dark-mode #agreementSearchInput::placeholder { color: #5a7060 !important; } /* Both inline-styled wrappers around the search */ body.dark-mode div[id="agreementsList"] ~ div, body.dark-mode #agreementSearchInput { /* placeholder marker; specifics below */ } /* Target the search input's PARENT box (it has inline #f5f9f6 bg) */ body.dark-mode #agreementSearchInput { /* placeholder */ } /* Overview tab — Location Settings */ body.dark-mode #locStatusBanner { background: linear-gradient(180deg, #1a2820 0%, #141f17 100%) !important; border-color: #232e26 !important; } body.dark-mode #locStatusBanner p[style*="color:#1a1f1b"] { color: #eef3f0 !important; } /* The Home/Now toggle pill — white wrapper */ body.dark-mode #locActiveToggle { background: #141f17 !important; border-color: #232e26 !important; } body.dark-mode #locUseHome[style*="background:transparent"], body.dark-mode #locUseCurrent[style*="background:transparent"] { color: #9ab0a0 !important; } /* Current-location search container */ body.dark-mode #locSearchContainer { background: #1a2820 !important; border-color: #232e26 !important; } body.dark-mode #locGoogleSearch { color: #eef3f0 !important; background: transparent !important; } body.dark-mode #locGoogleSearch::placeholder { color: #5a7060 !important; } /* Mini map placeholder background */ body.dark-mode #locMiniMap { background: #1a2820 !important; border-color: #232e26 !important; color: #5a7060 !important; } /* Generic safety net — any element inside #profileView with explicit white/cream inline background that hasn't been covered above gets flipped to the dark surface so no more light sheets sneak through. Targets the most common hardcoded values used in this file. */ body.dark-mode #profileView [style*="background:#fff"]:not(button):not(svg):not(input):not(.coming-notify-btn), body.dark-mode #profileView [style*="background: white"]:not(button):not(svg):not(input), body.dark-mode #profileView [style*="background:#f5f9f6"]:not(button):not(svg):not(input), body.dark-mode #profileView [style*="background:#fafdf8"]:not(button):not(svg):not(input) { background: #1a2820 !important; border-color: #232e26 !important; } /* Flip the dark text (#1a1f1b) used inline throughout the profile. Excludes buttons that need their own colors. */ body.dark-mode #profileView [style*="color:#1a1f1b"]:not(button) { color: #eef3f0 !important; } /* Muted gray inline text (#6b7c6f, #9aaa9e) — readable but slightly bumped on dark for legibility */ body.dark-mode #profileView [style*="color:#6b7c6f"]:not(button) { color: #9ab0a0 !important; } body.dark-mode #profileView [style*="color:#9aaa9e"]:not(button) { color: #5a7060 !important; }