/* ============================== FIX: LIGHT MODE BG SPLIT (GRAY/WHITE) Forces ONE consistent site background. ============================== */ /* Pick ONE */ :root{ --up-light-bg: #f0f2f5; /* Facebook-ish gray */ /* --up-light-bg: #ffffff; */ /* pure white */ } /* 1) Force the global background everywhere (light mode only) */ html:not(.up-theme-dark) .up-member-footer, html:not(.up-theme-dark) body, html:not(.up-theme-dark) #page{ background: var(--up-light-bg) !important; background-color: var(--up-light-bg) !important; background-image: none !important; } /* UnityPro Dark Mode (site-wide) - Loaded LAST (priority 99) so it overrides legacy whites - Uses html.up-theme-dark class (set early in ) */ /* ========================================================= 1) TOKENS (EDIT THESE FIRST) ========================================================= */ /* Light tokens (kept close to existing UI so default stays the same) */ :root{ --updm-bg:#f3f4f6; --updm-surface:#ffffff; --updm-surface-2:#ffffff; /* surface-3 is used for small pills (messenger input, dropdown hover, etc.) */ --updm-surface-3:#f0f2f5; --updm-text:#111827; --updm-muted:#6b7280; --updm-border:rgba(17,24,39,.12); --updm-link:#1877f2; --updm-link-hover:#165fcb; --updm-shadow:0 1px 1px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06); /* Messenger timestamp tooltip (Facebook-style) User request: even in LIGHT MODE, make the tooltip dark with white text */ --updm-ts-bg:#1c1e21; --updm-ts-text:#ffffff; --updm-ts-border:rgba(0,0,0,.22); --updm-ts-shadow:0 2px 10px rgba(0,0,0,.16); } /* Dark tokens (Skool-like) IMPORTANT: We support multiple dark-mode toggles across themes. UnityPro may set dark mode on OR (or data-theme="dark"). */ html.up-theme-dark, body.up-theme-dark, html[data-theme="dark"], body.dark-mode, body.dark, body.unitypro-dark, body.up-dark{ color-scheme: dark; --updm-bg:#1c1c1d; --updm-surface:#252728; --updm-surfaceB:#222222; --updm-surfacebtn:#454545; --updm-surface-2:#313131; --updm-surface-3:#3a3b3c; /* USED by pill hover + dropdown hover */ --updm-text:#efefef; --updm-text-strong:#ffffff; --updm-textB:#1c68bb; --updm-textG:#979a9d; --updm-textD:#393939; --updm-textD:#393939; --updm-textL:#858585; --updm-muted:rgba(243,244,246,.68); --updm-border:rgba(255,255,255,.10); --updm-borderL:rgba(255,255,255,.10); --updm-link:#979a9d; --updm-link-hover:#9bbcff; --updm-shadow:0 1px 1px rgba(0,0,0,.45),0 12px 30px rgba(0,0,0,.35); /* Messenger timestamp hover (Facebook-ish) */ --updm-ts-bg:#3a3b3c; --updm-ts-text:#f5f6f7; --updm-ts-border:rgba(255,255,255,.10); --updm-ts-shadow:0 2px 12px rgba(0,0,0,.45); /* Re-map common UnityPro vars used across modules */ --up-bg:var(--updm-bg); --up-border:var(--updm-border); --up-border2:var(--updm-border); --up-text:var(--updm-text); --up-text-sub:var(--updm-muted); --up-accent:#3b82f6; /* These are used by many older UI pieces (dropdowns, cards, menus) */ --up-muted:var(--updm-muted); --up-card-bg:var(--updm-surface); --up-page-bg:var(--updm-bg); --up-shadow:var(--updm-shadow); --up-link:var(--updm-link); /* Used by the Challenges tabs + various "pill" wrappers */ --up-pill: rgba(255,255,255,.08); --up-tabs-bg: rgba(255,255,255,.08); /* Challenges category pills (dark mode) */ --up-pill-healing-bg: rgba(16,185,129,.16); --up-pill-healing-border: rgba(16,185,129,.28); --up-pill-healing-text: rgba(209,250,229,.95); --up-pill-discipline-bg: rgba(59,130,246,.16); --up-pill-discipline-border: rgba(59,130,246,.28); --up-pill-discipline-text: rgba(219,234,254,.95); --up-pill-community-bg: rgba(139,92,246,.16); --up-pill-community-border: rgba(139,92,246,.28); --up-pill-community-text: rgba(237,233,254,.95); --up-pill-faith-bg: rgba(245,158,11,.16); --up-pill-faith-border: rgba(245,158,11,.28); --up-pill-faith-text: rgba(255,237,213,.95); --up-pill-generic-bg: rgba(255,255,255,.06); --up-pill-generic-border: rgba(255,255,255,.10); --up-pill-generic-text: rgba(243,244,246,.90); /* Surface aliases (some legacy CSS expects these names) */ --up-surface:var(--updm-surface); --up-surface-1:var(--updm-surface); --up-surface-2:var(--updm-surface-2); --up-surface-3:var(--updm-surface-3); --up-hdr-bg:var(--updm-surface); --up-hdr-border:var(--updm-border); --up-hdr-muted:var(--updm-muted); --up-hdr-shadow:var(--updm-shadow); /* Community module vars */ --upc-card:var(--updm-surface); --upc-border:var(--updm-border); --upc-muted:var(--updm-muted); --upc-hover:var(--updm-surface-2); /* Hover card tokens */ --uphc-bg:#393939; --uphc-text:#e8eef9; --uphc-border:transparent; --uphc-muted:#9aa7bd; --uphc-ring:0 14px 46px rgba(0,0,0,.55); --uphc-btn:#353535; --uphc-btn-text:#e8eef9; /* Header dropdown tokens */ --up-dd-bg:#242526; --up-dd-border:rgba(255,255,255,.06); --up-dd-shadow:0 12px 28px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35); } /* ========================================================= 2) BASE / GLOBAL ========================================================= */ html.up-theme-dark, html.up-theme-dark body{ background:var(--updm-bg) !important; color:var(--updm-text) !important; } html.up-theme-dark a{ color:var(--updm-link) !important; } html.up-theme-dark a:hover{ color:var(--updm-link-hover) !important; } /* ========================================================= Letters from the Past: DARK MODE letter paper + text - The LFTP module intentionally used a light paper by default. - User request: make the actual letter background + text match dark mode. ========================================================= */ html.up-theme-dark .up-lftp__paper, body.up-theme-dark .up-lftp__paper, html[data-theme="dark"] .up-lftp__paper, body.dark-mode .up-lftp__paper, body.dark .up-lftp__paper, body.unitypro-dark .up-lftp__paper, body.up-dark .up-lftp__paper{ border-color: rgba(255,255,255,.14) !important; /* Neutral dark mode (no blue tint) */ background: linear-gradient(180deg, rgba(24,24,24,.98), rgba(44,44,44,.98)), repeating-linear-gradient( 0deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 28px ) !important; } html.up-theme-dark .up-lftp__paperTop, body.up-theme-dark .up-lftp__paperTop, html[data-theme="dark"] .up-lftp__paperTop, body.dark-mode .up-lftp__paperTop, body.dark .up-lftp__paperTop, body.unitypro-dark .up-lftp__paperTop, body.up-dark .up-lftp__paperTop{ border-bottom-color: rgba(255,255,255,.16) !important; } html.up-theme-dark .up-lftp__nav, body.up-theme-dark .up-lftp__nav, html[data-theme="dark"] .up-lftp__nav, body.dark-mode .up-lftp__nav, body.dark .up-lftp__nav, body.unitypro-dark .up-lftp__nav, body.up-dark .up-lftp__nav{ border-top-color: rgba(255,255,255,.16) !important; } html.up-theme-dark .up-lftp__postmark, body.up-theme-dark .up-lftp__postmark, html[data-theme="dark"] .up-lftp__postmark, body.dark-mode .up-lftp__postmark, body.dark .up-lftp__postmark, body.unitypro-dark .up-lftp__postmark, body.up-dark .up-lftp__postmark{ color: rgba(255,255,255,.70) !important; } html.up-theme-dark .up-lftp__to, body.up-theme-dark .up-lftp__to, html[data-theme="dark"] .up-lftp__to, body.dark-mode .up-lftp__to, body.dark .up-lftp__to, body.unitypro-dark .up-lftp__to, body.up-dark .up-lftp__to{ color: rgba(255,255,255,.92) !important; } html.up-theme-dark .up-lftp__from, body.up-theme-dark .up-lftp__from, html[data-theme="dark"] .up-lftp__from, body.dark-mode .up-lftp__from, body.dark .up-lftp__from, body.unitypro-dark .up-lftp__from, body.up-dark .up-lftp__from{ color: rgba(255,255,255,.72) !important; } html.up-theme-dark .up-lftp__title, body.up-theme-dark .up-lftp__title, html[data-theme="dark"] .up-lftp__title, body.dark-mode .up-lftp__title, body.dark .up-lftp__title, body.unitypro-dark .up-lftp__title, body.up-dark .up-lftp__title{ color: rgba(255,255,255,.94) !important; } html.up-theme-dark .up-lftp__content, body.up-theme-dark .up-lftp__content, html[data-theme="dark"] .up-lftp__content, body.dark-mode .up-lftp__content, body.dark .up-lftp__content, body.unitypro-dark .up-lftp__content, body.up-dark .up-lftp__content{ color: rgba(255,255,255,.88) !important; } html.up-theme-dark .up-lftp__sign, body.up-theme-dark .up-lftp__sign, html[data-theme="dark"] .up-lftp__sign, body.dark-mode .up-lftp__sign, body.dark .up-lftp__sign, body.unitypro-dark .up-lftp__sign, body.up-dark .up-lftp__sign{ color: rgba(255,255,255,.88) !important; } html.up-theme-dark .up-lftp__ps, body.up-theme-dark .up-lftp__ps, html[data-theme="dark"] .up-lftp__ps, body.dark-mode .up-lftp__ps, body.dark .up-lftp__ps, body.unitypro-dark .up-lftp__ps, body.up-dark .up-lftp__ps{ color: rgba(255,255,255,.78) !important; } html.up-theme-dark .up-lftp__navBtn, body.up-theme-dark .up-lftp__navBtn, html[data-theme="dark"] .up-lftp__navBtn, body.dark-mode .up-lftp__navBtn, body.dark .up-lftp__navBtn, body.unitypro-dark .up-lftp__navBtn, body.up-dark .up-lftp__navBtn{ border-color: rgba(255,255,255,.14) !important; background: rgba(255,255,255,.07) !important; } html.up-theme-dark .up-lftp__navBtn:hover, body.up-theme-dark .up-lftp__navBtn:hover, html[data-theme="dark"] .up-lftp__navBtn:hover, body.dark-mode .up-lftp__navBtn:hover, body.dark .up-lftp__navBtn:hover, body.unitypro-dark .up-lftp__navBtn:hover, body.up-dark .up-lftp__navBtn:hover{ background: rgba(255,255,255,.10) !important; } html.up-theme-dark .up-lftp__navArrow, body.up-theme-dark .up-lftp__navArrow, html[data-theme="dark"] .up-lftp__navArrow, body.dark-mode .up-lftp__navArrow, body.dark .up-lftp__navArrow, body.unitypro-dark .up-lftp__navArrow, body.up-dark .up-lftp__navArrow{ color: rgba(255,255,255,.78) !important; } html.up-theme-dark .up-lftp__navLabel, body.up-theme-dark .up-lftp__navLabel, html[data-theme="dark"] .up-lftp__navLabel, body.dark-mode .up-lftp__navLabel, body.dark .up-lftp__navLabel, body.unitypro-dark .up-lftp__navLabel, body.up-dark .up-lftp__navLabel{ color: rgba(255,255,255,.55) !important; } html.up-theme-dark .up-lftp__navTitle, body.up-theme-dark .up-lftp__navTitle, html[data-theme="dark"] .up-lftp__navTitle, body.dark-mode .up-lftp__navTitle, body.dark .up-lftp__navTitle, body.unitypro-dark .up-lftp__navTitle, body.up-dark .up-lftp__navTitle{ color: rgba(255,255,255,.90) !important; } /* Make common theme wrappers dark without wrecking layouts */ html.up-theme-dark #page, html.up-theme-dark .site, html.up-theme-dark .site-content, html.up-theme-dark main, html.up-theme-dark .main-container{ background:transparent !important; } /* Swap logo image in dark mode */ html.up-theme-dark .site-logo-img img.custom-logo{ content: url("https://unsently.com/wp-content/uploads/2025/11/UnSentlyFLogoD.png") !important; width: auto !important; height: 62px !important; } /* Placeholders */ html.up-theme-dark ::placeholder{ color:rgba(243,244,246,.55) !important; } /* A few stubborn legacy rules hard-code #252525 on body inside Unsent Letters */ html.up-theme-dark body, html.up-theme-dark .unitypro-unsent-wrap{ color:var(--updm-text) !important; } /* ========================================================= 3) GLOBAL TEXT GROUPS (KEEP ORGANIZED) ========================================================= */ /* Main text targets (core screens) */ html.up-theme-dark .unitypro-dashboard-wrap, html.up-theme-dark .unitypro-unsent-wrap, html.up-theme-dark .unitypro-members-page, html.up-theme-dark .unitypro-notifications-wrap, html.up-theme-dark .unitypro-course-wrap, html.up-theme-dark #up-community, html.up-theme-dark .rank, html.up-theme-dark .nm, html.up-theme-dark .num, html.up-theme-dark .lcp-name, html.up-theme-dark .unitypro-unsent-letter__name, html.up-theme-dark .unitypro-unsent-comment__name, html.up-theme-dark .mh-title, html.up-theme-dark .upp-next, html.up-theme-dark .up-field-title, html.up-theme-dark .up-mbti-head{ color:var(--updm-text) !important; } /* Muted text targets (FIXED broken selector list) */ html.up-theme-dark .cat, html.up-theme-dark .mi, html.up-theme-dark .dotspace, html.up-theme-dark .time, html.up-theme-dark .bio, html.up-theme-dark .up-status, html.up-theme-dark .last-comment, html.up-theme-dark .comment-count, html.up-theme-dark .unitypro-unsent-comment__date, html.up-theme-dark .fa-comment, html.up-theme-dark .up-mbti-line, html.up-theme-dark .up-activity-section__heading, html.up-theme-dark .points-count{ color:var(--updm-textL) !important; } /* Headings / prominent text that you wanted gray-ish */ html.up-theme-dark .pts, html.up-theme-dark .upc-g-title, html.up-theme-dark .upc-g-sub, html.up-theme-dark .up-card__title, html.up-theme-dark .up-quote, html.up-theme-dark .unitypro-unsent-card__name, html.up-theme-dark .up-news__title, html.up-theme-dark .up-news-modal__title, html.up-theme-dark .up-news-modal__item-title, html.up-theme-dark .unitypro-unsent-letter__cat, html.up-theme-dark .uplog-title, html.up-theme-dark .up-title, html.up-theme-dark .up-banner-text, html.up-theme-dark .title, html.up-theme-dark .body, html.up-theme-dark .text, html.up-theme-dark .friend-name, html.up-theme-dark .friend-sub, html.up-theme-dark .up-hdr, html.up-theme-dark .name, html.up-theme-dark .up-label, html.up-theme-dark .upc-report-title, html.up-theme-dark .up-activity-title, html.up-theme-dark .up-help, html.up-theme-dark .up-muted, html.up-theme-dark .up-notifications-title, html.up-theme-dark .up-notifications-desc, html.up-theme-dark .up-notifications-label, html.up-theme-dark .upp-h1{ color:var(--updm-textG) !important; } /* ========================================================= 4) SURFACES / CARDS (ONE PLACE) ========================================================= */ /* Dark mode active tab */ html.up-theme-dark .up-prof-tabbar .up-prof-tab.is-active, body.up-theme-dark .up-prof-tabbar .up-prof-tab.is-active{ background: rgba(255,255,255,.10) !important; color:#ffffff; border-color: rgba(255,255,255,.18); } /* Dark mode non-active tabs (optional but usually needed so active stands out) */ html.up-theme-dark .up-prof-tabbar .up-prof-tab{ color: rgba(255,255,255,.80);border-color: rgba(255,255,255,.58) !important; } /* Dark mode pill on active (optional) */ html.up-theme-dark .up-prof-tabbar .up-prof-tab.is-active .up-pill{ background: rgba(255,255,255,.18); color:#fff; } html.up-theme-dark .up-card, html.up-theme-dark .up-stat, html.up-theme-dark .up-link, html.up-theme-dark .upc-inline-editor, html.up-theme-dark .unitypro-unsent-card, html.up-theme-dark .unitypro-unsent-sidebar, html.up-theme-dark .unitypro-noti-card, html.up-theme-dark .unitypro-course-card, html.up-theme-dark .up-sidebar, html.up-theme-dark .up-main, html.up-theme-dark .up-report-panel, html.up-theme-dark .up-modal, html.up-theme-dark .up-dd, html.up-theme-dark .up-usercard, html.up-theme-dark .up-postcard, html.up-theme-dark .up-prof-tabbar, html.up-theme-dark .upp-card-title, html.up-theme-dark .up-banner, html.up-theme-dark .up-noti-page-inner, html.up-theme-dark .upp-card-compact, html.up-theme-dark .up-activity-card, html.up-theme-dark .up-member{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-quote-share-bubble{ background:var(--updm-surface-2) !important; border-color:#F5F5F5 !important; color:var(--updm-text) !important; border:1px solid #f5f5f5 !important; } html.up-theme-dark .up-dash__title{ color: rgba(255,255,255,.78) !important; } html.up-theme-dark .up-news-modal__item-body h4, html.up-theme-dark .up-news-modal__item-body h5, html.up-theme-dark .up-news-modal__item-body h6{ color: rgba(255,255,255,.88) !important; } html.up-theme-dark .unitypro-unsent-filter{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .unitypro-unsent-filter:hover{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-toast, html.up-theme-dark .divider{ background:var(--updm-surface-2) !important; } html.up-theme-dark .up-activity-card__header{ border-bottom: 1px solid var(--updm-border) !important; } html.up-theme-dark .upcol-item-title{ color:#E4E6EB !important; } /* ========================================================= 5) META ROWS (TEXT + ICONS) ========================================================= */ html.up-theme-dark .meta .row, html.up-theme-dark .meta .row span{ color:#E4E6EB !important; } html.up-theme-dark .meta .row i, html.up-theme-dark .meta .row svg, html.up-theme-dark .meta .row .svg-inline--fa{ color:#B0B3B8 !important; fill:currentColor !important; opacity:.92 !important; } /* keep status dot untouched */ html.up-theme-dark .meta .row .up-dot{ opacity:1 !important; } /* ========================================================= 6) COMMUNITY (STATS / CHIPS / PILLS / MENUS) ========================================================= */ /* Stats bar */ html.up-theme-dark #up-community .upc-g-stats{ background: var(--updm-surface) !important; border-top: 1px solid var(--updm-border) !important; border-bottom: 1px solid var(--updm-border) !important; padding:5px !important; } html.up-theme-dark #up-community .upc-g-stats > div + div{ border-left: 1px solid var(--updm-border) !important; } html.up-theme-dark #up-community .upc-g-stats .num{ color:#fff !important; } html.up-theme-dark #up-community .upc-g-stats .lab{ color:rgba(255,255,255,.70) !important; } /* Community core containers */ html.up-theme-dark #up-community{ background:transparent !important; } html.up-theme-dark .up-pill, html.up-theme-dark #up-community .upc-chip, html.up-theme-dark #up-community .upc-composer-pill, html.up-theme-dark #up-community .upc-composer, html.up-theme-dark #up-community .upc-welcome, html.up-theme-dark #up-community .upc-group, html.up-theme-dark #up-community .upc-leader, html.up-theme-dark #up-community .upc-dialog, html.up-theme-dark #up-community .upc-reply, html.up-theme-dark #up-community .upc-post .menu, html.up-theme-dark #up-community .upc-comment .cmenu, html.up-theme-dark #up-community .upc-dd, html.up-theme-dark #up-community .upc-cfilter .cf-menu, html.up-theme-dark #up-community .upc-cfilter .cf-menu::before, html.up-theme-dark #up-community .upc-comment .cmenu::before, html.up-theme-dark #up-community .upc-modal .modal-body, html.up-theme-dark #up-community .upc-modal .modal-header1, html.up-theme-dark #up-community .modal-innerR, html.up-theme-dark #up-community .upp-card, html.up-theme-dark #up-community .upp-top, html.up-theme-dark #up-community .upp-top-compact, html.up-theme-dark #up-community .upc-c-dialog{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } /* Posts */ html.up-theme-dark .upc-post{ background:var(--updm-surface) !important; border:0 !important; color:var(--updm-text) !important; } html.up-theme-dark .upcol-modal-input{ background:var(--updm-surface-2) !important; border:0 !important; color:var(--updm-text) !important; } html.up-theme-dark .lcp-bubble{ background:var(--updm-surfaceB) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } /* Last comment preview top border only */ html.up-theme-dark #up-community .upc-post > .last-cmt-preview{ border-top-color: var(--updm-border) !important; } /* Chips */ html.up-theme-dark #up-community .upc-chip{ color:var(--updm-text) !important; } html.up-theme-dark #up-community .upc-chip.is-active{ background:#3b82f6 !important; border-color:#3b82f6 !important; color:#fff !important; } /* Settings / Password / Notifications Settings (account pages) */ html.up-theme-dark .up-shell, html.up-theme-dark .unitypro-profile, html.up-theme-dark .unitypro-settings{ color:var(--updm-text) !important; } html.up-theme-dark .up-shell .up-card{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-shell .up-nav a{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.10) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-shell .up-nav li.active a{ background: #F5C75A !important; border-color: rgba(255,255,255,.12) !important; color:#393939 !important; } /* Members Pills */ /* Pills (tabs) */ html.up-theme-dark .up-tab{ background: transparent !important; border-color: var(--updm-border) !important; color: var(--updm-text) !important; } html.up-theme-dark .up-tab:hover{ background: var(--updm-surface-3) !important; border-color: rgba(255,255,255,.18) !important; } html.up-theme-dark .uphlq-card, html.up-theme-dark .up-shell .up-nav a:hover{ background:rgba(255,255,255,.10) !important; } html.up-theme-dark .unitypro-profile input, html.up-theme-dark .unitypro-profile textarea, html.up-theme-dark .unitypro-profile select, html.up-theme-dark .unitypro-settings input, html.up-theme-dark .unitypro-settings textarea, html.up-theme-dark .unitypro-settings select, html.up-theme-dark .up-shell input, html.up-theme-dark .up-shell textarea, html.up-theme-dark .up-shell select{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } /* Facebook-like primary button (dark mode) */ html.up-theme-dark .upcol-btn-primary{ background:#1877f2 !important; /* FB blue */ color:#ffffff !important; border:1px solid rgba(24,119,242,.85) !important; border-radius:12px !important; padding:8px 12px !important; font-weight:600 !important; cursor:pointer !important; box-shadow:none !important; text-decoration:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition:filter .12s ease, transform .12s ease, background .12s ease; } html.up-theme-dark .upcol-btn-primary:hover{ filter:brightness(1.08) !important; } html.up-theme-dark .upcol-btn-primary:active{ transform:scale(.98) !important; filter:brightness(.98) !important; } html.up-theme-dark .upcol-btn-primary:focus, html.up-theme-dark .upcol-btn-primary:focus-visible{ outline:2px solid rgba(24,119,242,.45) !important; outline-offset:2px !important; } html.up-theme-dark .upcol-btn-primary[disabled], html.up-theme-dark .upcol-btn-primary:disabled{ opacity:.55 !important; cursor:not-allowed !important; } html.up-theme-dark .up-h1{ font-weight:600 !important; } html.up-theme-dark .uphlq-quote{color:var(--updm-text) !important;} html.up-theme-dark .uphlq-source{color: #d5d5d5 !important;} html.up-theme-dark .uphlq-meta{color: #858585 !important;} html.up-theme-dark .uphlq-panel-quote{color:var(--updm-text,#e5e7eb)} html.up-theme-dark .uphlq-panel-source{color: #d5d5d5 !important;} html.up-theme-dark .uphlq-panel-sub{color: #858585 !important;} html.up-theme-dark .upc-catbar{ background:transparent !important; border: 0px solid rgba(255,255,255,.08) !important; color:var(--updm-text) !important;} html.up-theme-dark .up-mute-pop{ background:var(--updm-surface-2) !important; border: 0px solid rgba(255,255,255,.08) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-threadinfo-action{ color:#cdcdcd !important; } html.up-theme-dark .up-threadinfo-action:hover{ background:#3b82f6 !important; outline:2px solid rgba(255,255,255,.18) !important; transform:scale(.98) !important; color:#cdcdcd !important; } html.up-theme-dark .up-threadinfo-action:active{ background:#3b82f6 !important; outline:2px solid rgba(255,255,255,.18) !important; transform:scale(.98) !important; } html.up-theme-dark .up-threadinfo-action:focus{ background:#3b82f6 !important; outline:2px solid rgba(255,255,255,.18) !important; outline-offset:2px !important; } html.up-theme-dark .uphlq-card{ background:var(--updm-surface-2) !important; border: 0px solid rgba(255,255,255,.08) !important; color:var(--updm-text) !important;} /* Facebook-like dark mode close button (thin X) */ html.up-theme-dark .uphlq-close{ background:rgba(255,255,255,.08) !important; border:0 !important; color:rgba(229,231,235,.85) !important; width:36px !important; height:36px !important; padding:0 !important; border-radius:9999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; box-sizing:border-box !important; font-weight:300 !important; /* thinner */ font-synthesis-weight:none !important; /* prevent fake bold */ -webkit-text-stroke:0 !important; /* ensure not outlined */ text-shadow:none !important; font-size:28px !important; /* keeps it clean */ cursor:pointer !important; transition:background .12s ease, color .12s ease, transform .12s ease; } html.up-theme-dark .uphlq-close:hover{ background:rgba(255,255,255,.14) !important; color:#ffffff !important; } html.up-theme-dark .uphlq-close:active{ background:rgba(255,255,255,.18) !important; transform:scale(.98) !important; } html.up-theme-dark .uphlq-close:focus, html.up-theme-dark .uphlq-close:focus-visible{ outline:2px solid rgba(255,255,255,.18) !important; outline-offset:2px !important; } /* Facebook-like dark mode close button (thin X) */ html.up-theme-dark .up-modal-x{ background:rgba(255,255,255,.08) !important; border:0 !important; color:rgba(229,231,235,.85) !important; width:36px !important; height:36px !important; padding:0 !important; border-radius:9999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; box-sizing:border-box !important; font-weight:300 !important; /* thinner */ font-synthesis-weight:none !important; /* prevent fake bold */ -webkit-text-stroke:0 !important; /* ensure not outlined */ text-shadow:none !important; font-size:28px !important; /* keeps it clean */ cursor:pointer !important; transition:background .12s ease, color .12s ease, transform .12s ease; } html.up-theme-dark .up-modal-x:hover{ background:rgba(255,255,255,.14) !important; color:#ffffff !important; } html.up-theme-dark .up-modal-x:active{ background:rgba(255,255,255,.18) !important; transform:scale(.98) !important; } html.up-theme-dark .up-modal-x:focus, html.up-theme-dark .up-modal-x:focus-visible{ outline:2px solid rgba(255,255,255,.18) !important; outline-offset:2px !important; } /* Dark mode: Highlight image action buttons (Download / Close image) */ /* FB-like dark mode buttons (Download / Close image) */ html.up-theme-dark .uphlq-panel-image-actions .btn{ background:rgba(255,255,255,.10) !important; /* soft gray pill */ color:rgba(255,255,255,.92) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:none !important; border-radius:12px !important; padding:8px 12px !important; font-weight:600 !important; text-decoration:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition:background .12s ease, transform .12s ease; } html.up-theme-dark .upcol-search{ background:transparent !important; border:0px !important; } html.up-theme-dark .uphlq-panel-image-actions .btn:hover{ background:rgba(255,255,255,.16) !important; } html.up-theme-dark .uphlq-panel-image-actions .btn:active{ background:rgba(255,255,255,.20) !important; transform:scale(.98) !important; } html.up-theme-dark .uphlq-panel-image-actions .btn:focus, html.up-theme-dark .uphlq-panel-image-actions .btn:focus-visible{ outline:2px solid rgba(255,255,255,.18) !important; outline-offset:2px !important; } /* Dark mode: Highlight image action buttons (Download / Close image) */ /* FB-like dark mode buttons (Download / Close image) */ html.up-theme-dark .upcol-item-actions .btn{ background:rgba(255,255,255,.10) !important; /* soft gray pill */ color:rgba(255,255,255,.92) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:none !important; border-radius:12px !important; padding:8px 12px !important; font-weight:600 !important; text-decoration:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition:background .12s ease, transform .12s ease; } html.up-theme-dark .upcol-search{ background:transparent !important; border:0px !important; } html.up-theme-dark .uphlq-panel-image-actions .btn:hover{ background:rgba(255,255,255,.16) !important; } html.up-theme-dark .uphlq-panel-image-actions .btn:active{ background:rgba(255,255,255,.20) !important; transform:scale(.98) !important; } html.up-theme-dark .uphlq-panel-image-actions .btn:focus, html.up-theme-dark .uphlq-panel-image-actions .btn:focus-visible{ outline:2px solid rgba(255,255,255,.18) !important; outline-offset:2px !important; } /* Dark mode buttons (Highlights modal actions) */ html.up-theme-dark .uphlq-panel-actions .btn{ background:var(--updm-surface,#111827); color:var(--updm-text,#e5e7eb); border-color:var(--updm-border,rgba(229,231,235,.14)); box-shadow:none; } html.up-theme-dark .uphlq-panel-actions .btn:hover{ background:rgba(229,231,235,.06); border-color:var(--updm-border,rgba(229,231,235,.20)); box-shadow:none; } html.up-theme-dark .uphlq-panel-actions .btn:focus, html.up-theme-dark .uphlq-panel-actions .btn:focus-visible{ outline:2px solid rgba(229,231,235,.22); outline-offset:2px; } html.up-theme-dark .uphlq-panel-actions .btn:active{ background:rgba(229,231,235,.10); } html.up-theme-dark .up-btn{ background:var(--updm-surface,#111827); border-color:var(--updm-border,rgba(229,231,235,.14)); color:var(--updm-text,#e5e7eb); } /* Modal */ html.up-theme-dark .uphlq-panel{ background:var(--updm-surface-2) !important; border:0px !important; color:var(--updm-text) !important; } html.up-theme-dark .up-inbox-more{ background:#444 !important; border:0px !important; color:var(--updm-text) !important; } html.up-theme-dark .uphl-search{ background:var(--updm-surface) !important; border:0px !important; color:var(--updm-text) !important; } html.up-theme-dark .uphlq-open, html.up-theme-dark .uphlq-copy, html.up-theme-dark .uphlq-share, html.up-theme-dark .uphlq-del, html.up-theme-dark .uphlq-image{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .uphlq-open:hover, html.up-theme-dark .uphlq-copy:hover, html.up-theme-dark .uphlq-share:hover, html.up-theme-dark .uphlq-del:hover, html.up-theme-dark .uphlq-image:hover{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-textG) !important; } /* Inputs */ html.up-theme-dark #up-community .upc-pill-input, html.up-theme-dark #up-community .upc-input, html.up-theme-dark #up-community .upc-comment .editbox, html.up-theme-dark .ir-bubble{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } /* Attach + dropdown button */ html.up-theme-dark #up-community .upc-pill-attach, html.up-theme-dark #up-community .upc-dd-btn{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } /* Pills (tabs) */ html.up-theme-dark #up-community .upc-pill{ background: var(--updm-surface-2) !important; border-color: var(--updm-border) !important; color: var(--updm-text) !important; } html.up-theme-dark #up-community .upc-pill:hover{ background: var(--updm-surface-3) !important; border-color: rgba(255,255,255,.18) !important; } html.up-theme-dark #up-community .upc-pill:active{ filter: brightness(.98) !important; } html.up-theme-dark #up-community .upc-pill.is-active, html.up-theme-dark #up-community .upc-pill.active, html.up-theme-dark #up-community .upc-pill.current, html.up-theme-dark #up-community .upc-pill[aria-current="page"]{ background: #2d53cf !important; border-color: #2d53cf !important; color: #f5f5f5 !important; } /* Post / comment menus (base) */ html.up-theme-dark .cmenu, html.up-theme-dark #up-community .upc-post .menu{ border-radius: 10px !important; padding: 6px 10px !important; color: rgba(255,255,255,.92) !important; font-weight: 600 !important; } /* The modal box itself */ html.up-theme-dark .uplog-item{ background: #333334 !important; /* dark card */ border: 0px solid rgba(255,255,255,.10) !important; } /* Menu items (keep your original classes) */ html.up-theme-dark .hide, html.up-theme-dark .report, html.up-theme-dark .upcol-save, html.up-theme-dark .edit, html.up-theme-dark .delete, html.up-theme-dark #up-community .upc-post .del, html.up-theme-dark #up-community .upc-post .edit{ background:var(--updm-surface) !important; color:#d5d5d5 !important; font-size:13px !important; border-radius:10px !important; } html.up-theme-dark .hide:hover, html.up-theme-dark .report:hover, html.up-theme-dark .upcol-save:hover, html.up-theme-dark .edit:hover, html.up-theme-dark .delete:hover, html.up-theme-dark #up-community .upc-post .del:hover, html.up-theme-dark #up-community .upc-post .edit:hover{ background: rgba(255,255,255,.08) !important; color:#d5d5d5 !important; font-size:13px !important; border-radius:6px !important; } /* Reply input */ html.up-theme-dark .reply-input{ border-radius:5px !important; background: transparent !important; } /* ========================================================= 7) PROFILE (STATS BAR + ACTION BUTTONS) ========================================================= */ html.up-theme-dark .up-profile-actions .stats{ background: var(--updm-surface) !important; border-top: 1px solid var(--updm-border) !important; border-bottom: 1px solid var(--updm-border) !important; padding:5px !important; } html.up-theme-dark .up-profile-actions .stats .metric{ color: var(--updm-text) !important; } html.up-theme-dark .up-profile-actions .stats .metric + .metric{ border-left: 1px solid var(--updm-border) !important; } html.up-theme-dark .up-profile-actions .stats .metric strong{ color:#fff !important; } html.up-theme-dark .up-profile-actions .stats .metric span{ color: rgba(255,255,255,.70) !important; font-weight: 400 !important; font-size:12px !important; } /* Yellow Skool-style for Profile action button (keep your multi-selectors) */ body.up-dark .up-profile-actions a.btn, body.dark .up-profile-actions a.btn, html.dark .up-profile-actions a.btn, .up-dark .up-profile-actions a.btn, .up-profile-actions a.btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:10px 14px !important; border-radius:8px !important; background:#F7C948 !important; color:#111827 !important; border:0px solid rgba(0,0,0,.18) !important; font-weight:600 !important; font-size:13px !important; letter-spacing:.4px !important; text-transform:uppercase !important; text-decoration:none !important; cursor:pointer !important; user-select:none !important; -webkit-tap-highlight-color:transparent !important; } body.up-dark .up-profile-actions a.btn:hover, body.dark .up-profile-actions a.btn:hover, html.dark .up-profile-actions a.btn:hover, .up-dark .up-profile-actions a.btn:hover, .up-profile-actions a.btn:hover{ filter:brightness(.97) !important; } body.up-dark .up-profile-actions a.btn:active, body.dark .up-profile-actions a.btn:active, html.dark .up-profile-actions a.btn:active, .up-dark .up-profile-actions a.btn:active, .up-profile-actions a.btn:active{ filter:brightness(.94) !important; } body.up-dark .up-profile-actions a.btn:focus-visible, body.dark .up-profile-actions a.btn:focus-visible, html.dark .up-profile-actions a.btn:focus-visible, .up-dark .up-profile-actions a.btn:focus-visible, .up-profile-actions a.btn:focus-visible{ outline:none !important; } /* ========================================================= 8) BLOCKQUOTE QUOTE MARK ========================================================= */ blockquote.up-quote .up-quote__text{ position: relative !important; padding-left: 34px !important; } blockquote.up-quote .up-quote__text::before{ content: "“" !important; position: absolute !important; left: 0 !important; top: -6px !important; font-family: "Times New Roman", Times, Georgia, serif !important; font-size: 48px !important; line-height: 1 !important; opacity: .35 !important; color: currentColor !important; pointer-events: none !important; } html.up-theme-dark blockquote.up-quote .up-quote__text::before{ opacity: .8 !important; } /* ========================================================= 9) ULOG / SEE ALL / TABS ========================================================= */ html.up-theme-dark .up-notifications-list{ border-top: 1px solid #393939 !important; padding-top:15px !important; } html.up-theme-dark .up-notifications-row{ border-bottom: 0 !important; } html.up-theme-dark .up-hdr{ background-color: transparent !important; border-bottom: 1px solid #393939 !important; } /* menu list (DE-DUPED) */ html.up-theme-dark .uplog-menu-list{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; padding:5px !important; } html.up-theme-dark .uplog-menu-edit, html.up-theme-dark .uplog-menu-del{ background-color: transparent !important; color: #d5d5d5 !important; } html.up-theme-dark .uplog-menu-edit:hover, html.up-theme-dark .uplog-menu-del:hover{ filter: brightness(1.06) !important; background: #393939 !important; } html.up-theme-dark #up-community .upc-post .kebab-btn, html.up-theme-dark .unitypro-members-page .friend-kebab{ background: transparent !important; border:0px !important; color: var(--updm-text) !important; } /* hover */ html.up-theme-dark #up-community .upc-post .kebab-btn:hover{ background: var(--updm-surface-2) !important; /* slightly lighter than surface-2 */ border-color: rgba(255,255,255,.18) !important; } /* hover */ html.up-theme-dark .unitypro-members-page .friend-kebab:hover{ background: var(--updm-surface) !important; /* slightly lighter than surface-2 */ border-color: rgba(255,255,255,.18) !important; } /* pressed */ html.up-theme-dark #up-community .upc-post .kebab-btn, html.up-theme-dark .unitypro-members-page .friend-kebab:active{ filter: brightness(.98) !important; } /* kebab button */ html.up-theme-dark .uplog-menu-btn{ background-color: transparent !important; border: 0 !important; } html.up-theme-dark .fa-ellipsis{ color: #696969 !important; font-size:18px !important; } html.up-theme-dark .uplog-menu-btn:hover{ filter: brightness(1.06) !important; background: #393939 !important; } html.up-theme-dark .uplog-menu-btn:focus{ box-shadow: 0 0 0 4px rgba(59,130,246,.35), 0 10px 26px rgba(0,0,0,.45) !important; } /* “See all” button (DE-DUPED) */ html.up-theme-dark .seeall, html.up-theme-dark a.up-activity__seeall, html.up-theme-dark .up-activity__seeall{ background: #393939 !important; color:#fff !important; border:0 !important; border-radius: 10px !important; padding: 15px 20px !important; font-weight: 600 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; line-height: 1 !important; width:90% !important; /* keeps your original sizing */ } html.up-theme-dark a.up-activity__seeall:hover, html.up-theme-dark .up-activity__seeall:hover{ filter: brightness(1.06) !important; } /* Tabs */ html.up-theme-dark .up-activity-tab{ color:#fff !important; } html.up-theme-dark .up-activity-tab:hover{ background: #414141 !important; color:#fff !important; border:0 !important; border-radius: 10px !important; } html.up-theme-dark .up-terms-dialog, html.up-theme-dark .up-noti-tab{ background:var(--updm-surface-2) !important; color:#f1f1f1 !important; border:0 !important; border-radius: 10px !important; } html.up-theme-dark .up-noti-tab:hover{ background: #414141 !important; color:#fff !important; border:0 !important; border-radius: 10px !important; } html.up-theme-dark .is-active{ background: #166FE5 !important; color:#fff !important; border:0 !important; border-radius: 10px !important; } html.up-theme-dark button.unitypro-unsent-filter.is-active{ background:#166FE5 !important; color:#fff !important; border:0 !important; border-radius:999px !important; } html.up-theme-dark .unitypro-unsent-card__meta{ color:#fff !important; font-size:12px !important; } /* ========================================================= 10) DASHBOARD (MBTI / BUBBLES / TOP COMPACT) ========================================================= */ html.up-theme-dark .up-mbti-desc, html.up-theme-dark .up-mbti-info, html.up-theme-dark .up-stats .up-stat, html.up-theme-dark .up-links .up-link, html.up-theme-dark .unitypro-unsent-reaction-pill, html.up-theme-dark .up-mention-chip, html.up-theme-dark .up-activity__item{ background:var(--updm-surface-2) !important; border: 0px solid rgba(255,255,255,.08) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-mbti-info{ border: 1px solid rgba(255,255,255,.08) !important; } html.up-theme-dark .up-mbti-desc strong{ color:var(--updm-text) !important; } html.up-theme-dark .bubble{ background: var(--updm-surface-2) !important; border: 0px solid var(--updm-border) !important; border-radius: 14px !important; padding: 8px !important; } /* Top list compact */ html.up-theme-dark .upp-top-compact{ background: var(--updm-surface-2) !important; border: 0px solid var(--updm-border) !important; border-radius: 14px !important; padding: 0px !important; } html.up-theme-dark .upp-top-compact > li{ background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; padding: 10px 12px !important; margin: 5px 0 !important; } html.up-theme-dark .upp-top-compact .nm{ color: rgba(255,255,255,.92) !important; } html.up-theme-dark .upp-top-compact .pts{ color: #fff !important; } html.up-theme-dark .upp-compact-sep{ background: #393939 !important; } html.up-theme-dark .upp-compact-more{ margin-top:10px !important; font-size:13px !important; color: #454545 !important; } html.up-theme-dark .upp-top.upp-top-compact .rank{ background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.90) !important; border-radius: 10px !important; padding: 4px 8px !important; } html.up-theme-dark .upp-top.upp-top-compact .ava{ border: 2px solid rgba(255,255,255,.10) !important; } html.up-theme-dark .level-note{ color:var(--updm-textB) !important; } html.up-theme-dark .up-dash__avatar{ border: 0px solid rgba(255,255,255,.10) !important; } /* ========================================================= 11) MODALS (POINTS + NEWS) ========================================================= */ html.up-theme-dark #upp-modal-points, html.up-theme-dark #up-news-modal{ opacity: 1 !important; filter: none !important; } html.up-theme-dark #upp-modal-points .upp-modal-backdrop{ background: rgba(0,0,0,.65) !important; } html.up-theme-dark #upp-modal-points .upp-modal-box, html.up-theme-dark #up-news-modal .up-news-modal__dialog{ background: #222 !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important; } html.up-theme-dark #upp-modal-points .upp-modal-box, html.up-theme-dark #upp-modal-points .upp-modal-box *{ color: #fff !important; opacity: 1 !important; filter: none !important; } html.up-theme-dark #upp-modal-points .upp-modal-box p{ color: rgba(255,255,255,.86) !important; } html.up-theme-dark #upp-modal-points .upp-levels-grid .it{ border: 0px solid rgba(255,255,255,.08) !important; } html.up-theme-dark #upp-modal-points button.primary{ background:var(--updm-surface-2) !important; border-color: rgba(255,255,255,.12) !important; color: #989898 !important; } html.up-theme-dark .up-danger-text{ color:#e5e5e5 !important; } html.up-theme-dark .up-danger-title, html.up-theme-dark .up-danger-title *{ color:#fff !important; } html.up-theme-dark .up-btn-danger{ background:var(--updm-surface-2) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #989898 !important; } /* Dark mode toggle: gray OFF, green ON */ html.up-theme-dark .up-switch{ color: rgba(255,255,255,.88) !important; } html.up-theme-dark .up-switch label{ color: rgba(255,255,255,.88) !important; } html.up-theme-dark .up-switch input[type="checkbox"][role="switch"]{ appearance:none; -webkit-appearance:none; width:44px; height:24px; border-radius:999px; background: rgba(255,255,255,.14) !important; /* OFF gray */ border: 1px solid rgba(255,255,255,.22); position:relative; vertical-align:middle; cursor:pointer; outline:none; margin-right:10px; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } html.up-theme-dark .up-switch input[type="checkbox"][role="switch"]::after{ content:""; position:absolute; top:50%; left:3px; width:18px; height:18px; border-radius:999px; transform: translateY(-50%); background: rgba(255,255,255,.82) !important; transition: transform .18s ease; } /* ON */ html.up-theme-dark .up-switch input[type="checkbox"][role="switch"]:checked{ background: rgba(34,197,94,.85) !important; /* green */ border-color: rgba(34,197,94,.95) !important; } html.up-theme-dark .up-switch input[type="checkbox"][role="switch"]:checked::after{ transform: translateY(-50%) translateX(20px); } /* Focus ring (green) */ html.up-theme-dark .up-switch input[type="checkbox"][role="switch"]:focus-visible{ box-shadow: 0 0 0 3px rgba(34,197,94,.30) !important; } /* ========================================================= 12) BUTTONS (GENERIC + SEND + LIKE + REACT) ========================================================= */ /* Search icon */ html.up-theme-dark .fa-magnifying-glass{ color:#fff !important; } /* up-btn */ html.up-theme-dark .up-btn{ background:var(--updm-surface-2) !important; } html.up-theme-dark .up-btn:hover{ background:#595959 !important; } /* Send buttons (DE-DUPED: ir-send + send share same styling) */ html.up-theme-dark button.ir-send, html.up-theme-dark button.send{ background: transparent !important; border: 0px solid rgba(255,255,255,.10) !important; border-radius: 9999px !important; width: 38px !important; height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background .12s ease, border-color .12s ease, filter .12s ease !important; } html.up-theme-dark button.ir-send:hover, html.up-theme-dark button.send:hover{ background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.14) !important; } html.up-theme-dark button.ir-send i, html.up-theme-dark button.send i{ color: #1877F2 !important; font-size: 16px !important; } /* Like button (fully round + Skool yellow liked state) */ html.up-theme-dark button.up-like, html.up-theme-dark button.up-like:hover, html.up-theme-dark button.up-like:active, html.up-theme-dark button.up-like:focus, html.up-theme-dark button.up-like:focus-visible, html.up-theme-dark button.up-like.is-liked, html.up-theme-dark button.up-like.is-liked:hover, html.up-theme-dark button.up-like[aria-pressed="true"], html.up-theme-dark button.up-like[aria-pressed="true"]:hover{ border-radius: 9999px !important; } html.up-theme-dark button.up-like{ background: transparent !important; border: 0px solid rgba(255,255,255,.10) !important; color: rgba(255,255,255,.65) !important; padding: 8px 10px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background .12s ease, border-color .12s ease, color .12s ease, filter .12s ease !important; } html.up-theme-dark button.up-like i{ color: inherit !important; } html.up-theme-dark button.up-like:hover{ background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.14) !important; } html.up-theme-dark button.up-like:active{ filter: brightness(.98) !important; } html.up-theme-dark button.up-like.is-liked, html.up-theme-dark button.up-like[aria-pressed="true"]{ background: transparent !important; border-color: rgba(245, 199, 90, .45) !important; color: #f5c75a !important; } html.up-theme-dark button.up-like.is-liked:hover, html.up-theme-dark button.up-like[aria-pressed="true"]:hover{ background: rgba(245, 199, 90, .22) !important; border-color: rgba(245, 199, 90, .60) !important; } /* Reaction main button */ html.up-theme-dark button.up-react-main-btn{ background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(255,255,255,.90) !important; border-radius: 9999px !important; padding: 8px 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; line-height: 1 !important; cursor: pointer !important; transition: background .12s ease, border-color .12s ease, filter .12s ease !important; } html.up-theme-dark button.up-react-main-btn:hover{ background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.14) !important; } html.up-theme-dark .up-react-main-icon{ display: inline-flex !important; align-items: center !important; justify-content: center !important; } html.up-theme-dark .up-react-main-label{ color: inherit !important; font-weight:600 !important; } html.up-theme-dark button.up-react-main-btn.is-active, html.up-theme-dark button.up-react-main-btn[aria-pressed="true"]{ background: transparent !important; border-color: #393939 !important; color: #d5d5d5 !important; } html.up-theme-dark button.up-react-main-btn.is-active:hover, html.up-theme-dark button.up-react-main-btn[aria-pressed="true"]:hover{ background: rgba(245,199,90,.22) !important; border-color: rgba(245,199,90,.60) !important; } /* ========================================================= 13) FORMS (SCOPED) ========================================================= */ html.up-theme-dark .up-react-picker, html.up-theme-dark .unitypro-dashboard-wrap input, html.up-theme-dark .unitypro-dashboard-wrap textarea, html.up-theme-dark .unitypro-dashboard-wrap select, html.up-theme-dark #up-community input, html.up-theme-dark #up-community select, html.up-theme-dark .unitypro-members-page input, html.up-theme-dark .unitypro-members-page textarea, html.up-theme-dark .unitypro-members-page select, html.up-theme-dark .unitypro-notifications-wrap input, html.up-theme-dark .unitypro-notifications-wrap textarea, html.up-theme-dark .unitypro-notifications-wrap select, html.up-theme-dark .unitypro-course-wrap input, html.up-theme-dark .unitypro-course-wrap textarea, html.up-theme-dark .unitypro-course-wrap select, html.up-theme-dark .unitypro-unsent-wrap input, html.up-theme-dark .unitypro-unsent-wrap textarea, html.up-theme-dark .unitypro-unsent-wrap select{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } /* Dark mode: labels + summary */ html.up-theme-dark body.unitypro-app label{ color: rgba(255,255,255,.86) !important; } html.up-theme-dark body.unitypro-app summary{ color: rgba(255,255,255,.92) !important; } html.up-theme-dark body.unitypro-app summary:hover{ color:#fff !important; } /* ========================================================= 14) UNSENT LETTERS (CARDS + COMMENTS FILTER + MENUS) ========================================================= */ html.up-theme-dark .ups-howto details{background:var(--updm-surface)!important;border:1px solid var(--updm-border)!important;border-radius:14px!important;padding:10px 12px!important;box-shadow:0 10px 24px rgba(0,0,0,.45)!important;color:#E4E6EB!important;} html.up-theme-dark .ups-howto summary{list-style:none!important;cursor:pointer;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:8px 8px!important;border-radius:12px!important;color:#E4E6EB!important;} html.up-theme-dark .ups-howto summary::-webkit-details-marker{display:none;} html.up-theme-dark .ups-howto summary:hover{background:rgba(255,255,255,.06)!important;} html.up-theme-dark .ups-howto details[open] summary{background:rgba(255,255,255,.06)!important;} html.up-theme-dark .ups-howto .ups-howto-badge{background:rgba(45,136,255,.18)!important;border:1px solid rgba(45,136,255,.35)!important;color:#E4E6EB!important;padding:4px 10px!important;border-radius:999px!important;font-weight:600!important;font-size:12px!important;white-space:nowrap;} html.up-theme-dark .ups-howto .ups-howto-dos{margin-top:10px!important;color:#E4E6EB!important;} html.up-theme-dark .ups-howto .muted{color:rgba(255,255,255,.68)!important;} html.up-theme-dark .ups-howto .ups-howto-example{margin-top:12px!important;background:rgba(0,0,0,.25)!important;border:1px solid var(--updm-border)!important;border-radius:12px!important;padding:10px 12px!important;} html.up-theme-dark .ups-howto .ups-howto-example .label{font-weight:600!important;font-size:12px!important;color:rgba(255,255,255,.72)!important;margin-bottom:8px!important;text-transform:uppercase;letter-spacing:.3px;} html.up-theme-dark .ups-howto pre{margin:0!important;padding:10px 12px!important;background:#18191A!important;border:1px solid var(--updm-border)!important;border-radius:12px!important;overflow:auto!important;} html.up-theme-dark .ups-howto code{color:#E4E6EB!important;} html.up-theme-dark .ups-howto ul.ups-howto-dos{margin:12px 0 0!important;padding:0!important;list-style:none!important;border-top:1px solid var(--updm-border)!important;padding-top:10px!important;} html.up-theme-dark .ups-howto ul.ups-howto-dos li{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:8px 6px!important;border-radius:10px!important;color:#E4E6EB!important;} html.up-theme-dark .ups-howto ul.ups-howto-dos li:hover{background:rgba(255,255,255,.04)!important;} html.up-theme-dark .ups-howto .emoji{width:18px!important;height:18px!important;flex:0 0 18px!important;filter:brightness(.95)!important;} html.up-theme-dark .unitypro-unsent-wrap{ background:transparent !important; } html.up-theme-dark .unitypro-unsent-wrap *{ color:inherit; } html.up-theme-dark .unitypro-unsent-letter__header{ background:transparent !important; border:0px solid var(--updm-border) !important; color:var(--updm-text) !important; } /* Cards */ html.up-theme-dark .unitypro-unsent-card, html.up-theme-dark .unitypro-unsent-sidebar, html.up-theme-dark .unitypro-unsent-sidebar .card, html.up-theme-dark .unitypro-unsent-letter, html.up-theme-dark .unitypro-unsent-letter__comments, html.up-theme-dark .unitypro-unsent-comment, html.up-theme-dark .unitypro-unsent-comment--reply, html.up-theme-dark .up-related-link, html.up-theme-dark .up-share-help{ background:var(--updm-surface) !important; border:1px solid var(--updm-border) !important; color:var(--updm-text) !important; } /* Related links */ html.up-theme-dark .up-related-link:hover{ background:var(--updm-surface-2) !important; } html.up-theme-dark .up-related-title{ color:var(--updm-text) !important; } html.up-theme-dark .up-related-meta, html.up-theme-dark .up-related-meta a, html.up-theme-dark .up-related-meta em{ color:var(--updm-muted) !important; } /* Share help text */ html.up-theme-dark .up-share-help, html.up-theme-dark .up-share-help *{ color:var(--updm-text) !important; } html.up-theme-dark .up-share-help p, html.up-theme-dark .up-share-help li{ color:var(--updm-muted) !important; } /* Comments header row */ html.up-theme-dark .up-comments-header{ border-color: var(--updm-border) !important; } html.up-theme-dark .up-comments-count, html.up-theme-dark .up-comments-count *{ color: rgba(255,255,255,.85) !important; } /* Newest dropdown toggle */ html.up-theme-dark .up-comments-filter-toggle{ background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(255,255,255,.90) !important; border-radius: 9999px !important; padding: 8px 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; } html.up-theme-dark .up-comments-filter-toggle:hover{ background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.14) !important; } html.up-theme-dark .up-comments-filter-caret{ color: rgba(255,255,255,.70) !important; } /* Dropdown menu */ html.up-theme-dark .up-comments-filter-menu{ background: #242526 !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 12px !important; padding: 6px !important; box-shadow: 0 12px 28px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35) !important; } html.up-theme-dark .up-comments-filter-option{ border-radius: 10px !important; padding: 10px 10px !important; cursor: pointer !important; } html.up-theme-dark .up-comments-filter-option:hover{ background: rgba(255,255,255,.08) !important; } html.up-theme-dark .up-comments-filter-option.is-active{ background: rgba(245,199,90,.14) !important; border: 1px solid rgba(245,199,90,.35) !important; } html.up-theme-dark .up-filter-title{ color: #fff !important; font-weight:600 !important; } html.up-theme-dark .up-filter-sub{ color: rgba(255,255,255,.70) !important; font-size: 12px !important; margin-top: 2px !important; } /* 3-dot more button */ html.up-theme-dark button.unitypro-unsent-comment__more{ background: transparent !important; border: 0px solid rgba(255,255,255,.10) !important; border-radius: 9999px !important; width: 34px !important; height: 34px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background .12s ease, border-color .12s ease, filter .12s ease !important; } html.up-theme-dark button.unitypro-unsent-comment__more:hover{ background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.14) !important; } html.up-theme-dark button.unitypro-unsent-comment__more span{ display:block !important; width: 4px !important; height: 4px !important; border-radius: 9999px !important; background: rgba(255,255,255,.80) !important; margin: 0 1px !important; } /* Dark mode: Skool-yellow primary button */ html.up-theme-dark a.button.primary{ display:inline-flex !important; align-items:center !important; justify-content:center !important; background:#F7C948 !important; color:#111827 !important; border:0px solid rgba(0,0,0,.18) !important; font-weight:600 !important; letter-spacing:.2px !important; text-decoration:none !important; border-radius:8px !important; padding:14px 18px !important; } html.up-theme-dark a.button.primary:hover{ filter:brightness(.97) !important; } html.up-theme-dark a.button.primary:active{ filter:brightness(.94) !important; } html.up-theme-dark a.button.primary:focus-visible{ outline:none !important; } /* Comment dropdown menu */ html.up-theme-dark .unitypro-unsent-comment__menu{ background: #242526 !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 12px !important; padding: 6px !important; box-shadow: 0 12px 28px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35) !important; } html.up-theme-dark .unitypro-unsent-comment__menu button{ width: 100% !important; text-align: left !important; background: transparent !important; border: 0 !important; border-radius: 10px !important; padding: 10px 10px !important; color: rgba(255,255,255,.92) !important; font-weight:600 !important; cursor: pointer !important; } html.up-theme-dark .unitypro-unsent-comment__menu button:hover{ background: rgba(255,255,255,.08) !important; } html.up-theme-dark .unitypro-unsent-comment__menu .upc-delete{ color: rgba(255,140,140,.95) !important; } html.up-theme-dark .unitypro-unsent-comment__menu .upc-delete:hover{ background: rgba(255,80,80,.12) !important; } /* Save button */ html.up-theme-dark button.button.button-primary.upc-edit-save{ background: linear-gradient(180deg,#3b82f6 0%, #2563eb 100%) !important; border: 0px solid rgba(255,255,255,.14) !important; color: #fff !important; border-radius: 10px !important; padding: 10px 16px !important; font-weight:600 !important; line-height: 1 !important; } html.up-theme-dark button.button.button-primary.upc-edit-save:hover{ filter: brightness(1.06) !important; box-shadow: 0 14px 34px rgba(0,0,0,.45) !important; } html.up-theme-dark button.button.button-primary.upc-edit-save:active{ transform: translateY(0) !important; box-shadow: 0 8px 18px rgba(0,0,0,.30) !important; } html.up-theme-dark button.button.button-primary.upc-edit-save:focus, html.up-theme-dark button.button.button-primary.upc-edit-save:focus-visible{ outline: none !important; box-shadow: 0 0 0 4px rgba(59,130,246,.35), 0 10px 26px rgba(0,0,0,.35) !important; } /* Force WP primary buttons (global) */ html.up-theme-dark button.button.button-primary, html.up-theme-dark a.button.button-primary, html.up-theme-dark body.unitypro-app input[type="submit"].button-primary{ background: #393939 !important; border-color: #454545 !important; color: #fff !important; } html.up-theme-dark button.button.button-primary:hover, html.up-theme-dark a.button.button-primary:hover, html.up-theme-dark body.unitypro-app input[type="submit"].button-primary:hover{ background: #505050 !important; border-color: #505050 !important; } /* ========================================= DARK MODE ONLY (extracted + grouped) Scope: html.up-theme-dark … ========================================= */ /* ========================================= DARK MODE: Submit page background "split" fix (forces ONE solid backdrop top-to-bottom) ========================================= */ /* LIGHT MODE */ html:not(.up-theme-dark) .up-myletter-actions .unitypro-btn.unitypro-btn--ghost{ background:rgba(17,24,39,.04) !important; border:1px solid rgba(17,24,39,.12) !important; color:#111827 !important; } html:not(.up-theme-dark) .up-myletter-actions .unitypro-btn.unitypro-btn--ghost:hover{ background:rgba(17,24,39,.08) !important; border-color:rgba(17,24,39,.18) !important; } .up-ul-filterbar__actions .unitypro-btn.unitypro-btn--ghost{ background:rgba(17,24,39,.04) !important; border:1px solid rgba(17,24,39,.12) !important; color:#111827 !important; padding:8px; } .up-ul-filterbar__actions .unitypro-btn.unitypro-btn--ghost:hover{ background:rgba(17,24,39,.08) !important; border-color:rgba(17,24,39,.18) !important; } /* DARK MODE */ html.up-theme-dark .up-ul-filterbar__actions .unitypro-btn.unitypro-btn--ghost{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; color:#e5e7eb !important; padding:8px; } html.up-theme-dark .up-ul-filterbar__actions .unitypro-btn.unitypro-btn--ghost:hover{ background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.22) !important; } html.up-theme-dark .up-ul-filterbar__actions .unitypro-btn.unitypro-btn--ghost, html.up-theme-dark .up-myletter-actions .unitypro-btn.unitypro-btn--ghost{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; color:#e5e7eb !important; } html.up-theme-dark .up-myletter-actions .unitypro-btn.unitypro-btn--ghost:hover{ background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.22) !important; } /* Optional: tighter on mobile */ @media (max-width: 520px){ .up-myletter-actions .unitypro-btn.unitypro-btn--ghost{ padding:6px 9px !important; font-size:11px !important; } } /* ---------- GHOST (Dark) ---------- */ html.up-theme-dark .unitypro-btn--ghost{ background:rgba(255,255,255,.06); color:#e5e7eb; border-color:rgba(255,255,255,.12); } html.up-theme-dark .unitypro-btn--ghost:hover{ background:rgba(255,255,255,.10); } html.up-theme-dark .unitypro-btn--ghost:active{ background:rgba(255,255,255,.14); } html.up-theme-dark .unitypro-btn--ghost:focus{outline:none;} html.up-theme-dark .unitypro-btn--ghost:focus-visible{ outline:2px solid rgba(24,119,242,.55); outline-offset:2px; } /* dark mode */ html.up-theme-dark .up-myletters-actions .unitypro-btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff; } html.up-theme-dark .up-myletters-actions .unitypro-btn--primary{ background:#1877f2; border-color:#1877f2; color:#fff !important; } html.up-theme-dark .up-myletters-actions .unitypro-btn--ghost{ background:var(--updm-surface-2) !important; border: 1px solid rgba(255,255,255,.08) !important; font-weight:500 !important; color:var(--updm-text) !important; } html.up-theme-dark .up-myletters-actions .unitypro-btn--ghost:hover{ background:var(--updm-surface) !important; border: 1px solid rgba(255,255,255,.08) !important; color:var(--updm-text) !important; } /* Optional: make the 3 “next” links look clean */ .upa-next{ display:flex; flex-wrap:wrap; gap:10px; } /* Make sure the fixed ::before backdrop sits ABOVE theme backgrounds */ html.up-theme-dark .unitypro-unsent-submit{ position:relative; z-index:0; /* creates a stacking context */ } /* Override your existing rule and make it cover everything consistently */ html.up-theme-dark .unitypro-unsent-submit::before{ background:#1c1c1d !important; z-index:0 !important; /* IMPORTANT: was -1 */ pointer-events:none; } /* Keep actual page content above the backdrop */ html.up-theme-dark .unitypro-unsent-submit > *{ position:relative; z-index:1; } /* If any theme/Elementor wrappers are painting a background mid-page, kill it */ html.up-theme-dark .unitypro-unsent-submit, html.up-theme-dark .unitypro-unsent-submit .elementor, html.up-theme-dark .unitypro-unsent-submit .elementor-section, html.up-theme-dark .unitypro-unsent-submit .elementor-container, html.up-theme-dark .unitypro-unsent-submit .elementor-widget-wrap{ background:transparent !important; background-image:none !important; } /* ---------- Shared separators ---------- */ html.up-theme-dark .up-letter-break{ background:rgba(255,255,255,.14); } /* ---------- 3-dot (Profile) ---------- */ html.up-theme-dark .up-prof-morebtn:hover, html.up-theme-dark .up-prof-morebtn:active, html.up-theme-dark .up-prof-morebtn:focus, html.up-theme-dark .up-prof-morebtn:focus-visible { background:#757575 !important; color:#333; } html.up-theme-dark .up-prof-moremenu{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-prof-moreitem:hover{background:#565656 !important; color: var(--up-text, #111);} html.up-theme-dark .up-inbox-menu{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-msg-bubble.is-them{ align-self:flex-start; background:#444; color:var(--up-text,#111827); border-bottom-left-radius:6px; } /* Hover / Focus / Active = FB circle hover + same purple icon */ html.up-theme-dark .up-msg-action:hover, html.up-theme-dark .up-msg-action:focus, html.up-theme-dark .up-msg-action:focus-visible, html.up-theme-dark .up-msg-action:active{ background: #444444 !important; color: var(--up-msg-icon-hover) !important; box-shadow: none !important; outline: none !important; transform: none !important; } /* ---------- 3-dot (letter/card) ---------- */ html.up-theme-dark .up-unsent-more-btn:hover{ background:rgba(255,255,255,.08); } html.up-theme-dark .up-unsent-more-menu{ background:var(--updm-surface, #1f2937); } /* ---------- Submit page background ---------- */ html.up-theme-dark .unitypro-unsent-submit::before{ background:#050814; } /* ---------- Submit page card + fields ---------- */ html.up-theme-dark .unitypro-unsent-submit .ups-card{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .unitypro-unsent-submit .ups-subtitle{color:rgba(229,231,235,.75);} html.up-theme-dark .unitypro-unsent-submit label{color:#e5e7eb;} html.up-theme-dark .unitypro-unsent-submit input[type="text"], html.up-theme-dark .unitypro-unsent-submit textarea, html.up-theme-dark .unitypro-unsent-submit select{ background:#111827; color:#e5e7eb; border-color:rgba(255,255,255,.10); box-shadow:none; } html.up-theme-dark .unitypro-unsent-submit input[type="text"]::placeholder, html.up-theme-dark .unitypro-unsent-submit textarea::placeholder{ color:rgba(229,231,235,.55); } html.up-theme-dark .unitypro-unsent-submit input[type="text"]:focus, html.up-theme-dark .unitypro-unsent-submit textarea:focus, html.up-theme-dark .unitypro-unsent-submit select:focus{ border-color:#7c3aed; box-shadow:0 0 0 4px rgba(124,58,237,.18); } html.up-theme-dark .unitypro-unsent-submit .ups-aside{color:rgba(229,231,235,.85);} html.up-theme-dark .unitypro-unsent-submit .ups-aside a{color:#93c5fd;} /* ---------- Modal (dark overrides) ---------- */ html.up-theme-dark .ups-modal__dialog{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-modal-x{ background:rgba(255,255,255,.08); color:#e5e7eb; } html.up-theme-dark .up-modal-x:hover{background:rgba(255,255,255,.14);} html.up-theme-dark .up-modal-x:active{background:rgba(255,255,255,.18);} /* Submit overlay box */ html.up-theme-dark .ups-submit-overlay__box{ background:#0b1220; color:#e5e7eb; } /* ---------- Healing flow cards ---------- */ html.up-theme-dark .up-unsent-grounding{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .upa-card{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .upa-choice{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } /* ---------- Guidance + visibility blocks ---------- */ html.up-theme-dark .ups-radio{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .ups-guidance{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .ups-guidance__subtitle{color:rgba(255,255,255,.75);} html.up-theme-dark .ups-guidance__block{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .ups-guidance__copy{color:rgba(255,255,255,.92);} html.up-theme-dark .ups-hardline{ border-left-color:rgba(255,255,255,.18); } /* Pre-editor */ html.up-theme-dark .unitypro-unsent-submit .ups-pre-editor{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .unitypro-unsent-submit .ups-pre-editor__title{color:#f3f4f6;} html.up-theme-dark .unitypro-unsent-submit .ups-pre-editor__text{color:rgba(243,244,246,.88);} /* More-lines button */ html.up-theme-dark .unitypro-unsent-submit .ups-more-lines{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#f3f4f6; } html.up-theme-dark .unitypro-unsent-submit .ups-more-lines:hover{ background:rgba(255,255,255,.10); } html.up-theme-dark .unitypro-unsent-submit .ups-guidance__morehint{ color:rgba(243,244,246,.70); } html.up-theme-dark .ups-error{ border: 1px solid rgba(248, 113, 113, .45); background: rgba(239, 68, 68, .12); color: #fecaca; /* readable on dark */ } /* Closing chips */ html.up-theme-dark .ups-closing__subtitle{color:rgba(255,255,255,.75);} html.up-theme-dark .ups-chip{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .ups-chip:hover{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .ups-closing__custom input{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } /* Preview */ html.up-theme-dark .ups-preview__paper{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .ups-preview__placeholder{ color:rgba(255,255,255,.65); } /* ---------- My letters section ---------- */ html.up-theme-dark .up-unsent-sep{ border-top-color:rgba(255,255,255,.12); } html.up-theme-dark .up-myletter-panel{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-myletter-release{ border-top-color:rgba(255,255,255,.12); } html.up-theme-dark .up-myletter-card{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-badge{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .upa-title{ margin-top:15px; color:var(--updm-text) !important; } html.up-theme-dark .up-myletter-title a{ color: var(--updm-text) !important; } html.up-theme-dark details.up-myletter-details{ border: 1px solid var(--updm-border) !important; border-radius: 12px !important; padding: 10px !important; background: var(--updm-surface) !important; } html.up-theme-dark details.up-myletter-details[open] > summary{ margin-bottom: 10px !important; } /* ========================================= DARK MODE: Primary button (.unitypro-btn--primary) (FB-ish blue, clean focus ring, disabled states) ========================================= */ html.up-theme-dark .unitypro-btn--primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:#1877f2; color:#fff; font-weight:500; text-decoration:none; cursor:pointer; } html.up-theme-dark .unitypro-btn--primary:hover{ filter:brightness(1.06); } html.up-theme-dark .unitypro-btn--primary:active{ filter:brightness(.96); } html.up-theme-dark .unitypro-btn--primary:focus{outline:none;} html.up-theme-dark .unitypro-btn--primary:focus-visible{ outline:2px solid rgba(24,119,242,.55); outline-offset:2px; } /* Disabled */ html.up-theme-dark .unitypro-btn--primary:disabled, html.up-theme-dark .unitypro-btn--primary[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; filter:none; } /* ========================================================= 15) NOTIFICATIONS (ITEMS + MENUS) ========================================================= */ /* Dark mode: notification item row */ html.up-theme-dark .up-activity-row__main{ background: transparent !important; border: 0px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; padding: 10px 10px !important; } html.up-theme-dark .up-activity-row__main:hover{ background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; } html.up-theme-dark .up-activity-header-menu__dropdown::before, html.up-theme-dark .up-activity-header-menu__dropdown::after, html.up-theme-dark .up-activity-header-menu__dropdown.is-open::before, html.up-theme-dark .up-activity-header-menu__dropdown.is-open::after{ border-color: transparent !important; background: transparent !important; box-shadow: none !important; } html.up-theme-dark .up-activity-header-more span{ display: block !important; width: 4px !important; height: 4px !important; border-radius: 999px !important; background: rgba(255,255,255,.85) !important; } html.up-theme-dark .up-activity-header-more:hover{ background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.18) !important; } /* Dropdown container */ html.up-theme-dark .up-activity-header-menu__dropdown{ background: var(--updm-surface-2) !important; border: 1px solid var(--updm-border) !important; border-radius: 14px !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important; overflow: hidden !important; } /* Menu item */ html.up-theme-dark .up-activity-header-menu__item{ background: transparent !important; color: rgba(255,255,255,.92) !important; border: 0 !important; width: 100% !important; text-align: left !important; padding: 12px 14px !important; font-weight:600 !important; cursor: pointer !important; } html.up-theme-dark .up-activity-header-menu__item:hover{ background: rgba(255,255,255,.06) !important; } html.up-theme-dark .up-activity-header-menu__item:focus{ outline: none !important; background: transparent !important; box-shadow: inset 0 0 0 2px rgba(59,130,246,.45) !important; } html.up-theme-dark .up-noti-body{ padding:10px; } html.up-theme-dark .up-noti-page-header{ border-bottom:1px solid #414141 !important; } /* remove borders/shadows from photo preview */ html.up-theme-dark #up-photo-preview{ border:0 !important; outline:0 !important; box-shadow:none !important; } /* notification row cards */ html.up-theme-dark .unitypro-notifications-wrap .upn-card, html.up-theme-dark .unitypro-notifications-wrap .upn-row, html.up-theme-dark .unitypro-notifications-wrap .upn-filter, html.up-theme-dark .unitypro-notifications-wrap .upn-pane, html.up-theme-dark .unitypro-notifications-wrap .upn-empty{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } /* notification item (DE-DUPED) */ html.up-theme-dark .up-noti-item{ background: transparent !important; border: 0px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; padding: 10px 10px !important; } html.up-theme-dark .up-noti-item:hover{ background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; } html.up-theme-dark .up-noti-item.is-unread{ background: transparent !important; border-color: rgba(24,119,242,.25) !important; } html.up-theme-dark .up-noti-item.is-unread:hover{ background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; } /* Avatar ring */ html.up-theme-dark .up-noti-item .media img{ border-radius: 9999px !important; border: 2px solid rgba(255,255,255,.12) !important; } /* Text + links */ html.up-theme-dark .up-noti-item .text, html.up-theme-dark .up-noti-item .msg, html.up-theme-dark .up-noti-item .msg a{ color: rgba(255,255,255,.92) !important; text-decoration: none !important; } html.up-theme-dark .up-noti-item .msg a:hover{ color:#fff !important; } /* Actor name */ html.up-theme-dark .up-noti-item .up-noti-actor{ color:#fff !important; font-weight:600 !important; } /* Meta time */ html.up-theme-dark .up-noti-item .meta{ color: rgba(255,255,255,.65) !important; } /* Unread dot */ html.up-theme-dark .up-noti-dot{ background: #1877F2 !important; } /* Noti “more” button + menu */ html.up-theme-dark button.up-noti-more-btn, html.up-theme-dark button.up-noti-head-more{ background: transparent !important; border: 0px solid rgba(255,255,255,.10) !important; border-radius: 9999px !important; width: 34px !important; height: 34px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background .12s ease, border-color .12s ease !important; } html.up-theme-dark button.up-noti-more-btn i, html.up-theme-dark button.up-noti-head-more i{ color: rgba(255,255,255,.85) !important; } html.up-theme-dark button.up-noti-more-btn:hover, html.up-theme-dark button.up-noti-head-more:hover{ background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.14) !important; } html.up-theme-dark .up-noti-more-menu, html.up-theme-dark .up-noti-head-menu{ background: #242526 !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 12px !important; padding: 6px !important; box-shadow: 0 12px 28px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35) !important; min-width: 220px !important; } html.up-theme-dark .up-noti-head-menu{ min-width:240px !important; } html.up-theme-dark .up-noti-more-menu .up-noti-act, html.up-theme-dark .up-noti-head-menu .up-noti-act{ width: 100% !important; text-align: left !important; background: transparent !important; border: 0 !important; border-radius: 10px !important; padding: 10px 10px !important; color: rgba(255,255,255,.92) !important; font-weight:600 !important; cursor: pointer !important; } html.up-theme-dark .up-noti-more-menu .up-noti-act:hover, html.up-theme-dark .up-noti-head-menu .up-noti-act:hover{ background: rgba(255,255,255,.08) !important; } html.up-theme-dark .up-noti-more-menu .up-noti-act[data-action="delete"]{ color: rgba(255,160,160,.95) !important; } html.up-theme-dark .up-noti-more-menu .up-noti-act[data-action="delete"]:hover{ background: rgba(255,80,80,.12) !important; } /* activity row text you had */ html.up-theme-dark .up-activity-row__text{ color: rgba(255,255,255,.72) !important; font-weight:600 !important; } html.up-theme-dark .up-activity-row__meta{ color: rgba(255,255,255,.42) !important; } /* ========================================================= 16) COMMENT FILTER (COMMUNITY) ========================================================= */ html.up-theme-dark .upc-cfilter .cf-btn{ background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(255,255,255,.90) !important; border-radius: 9999px !important; padding: 8px 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; transition: background .12s ease, border-color .12s ease, filter .12s ease !important; } html.up-theme-dark .upc-cfilter .cf-btn i{ color: rgba(255,255,255,.70) !important; } html.up-theme-dark .upc-cfilter .cf-btn:hover{ background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.14) !important; } html.up-theme-dark .upc-cfilter .cf-menu{ background: #242526 !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 12px !important; padding: 6px !important; box-shadow: 0 12px 28px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35) !important; } html.up-theme-dark .upc-cfilter .cf-menu button{ width: 100% !important; text-align: left !important; background: transparent !important; border: 0 !important; border-radius: 10px !important; padding: 10px 10px !important; color: rgba(255,255,255,.92) !important; cursor: pointer !important; } html.up-theme-dark .upc-cfilter .cf-menu button:hover{ background: rgba(255,255,255,.08) !important; } html.up-theme-dark .upc-cfilter .cf-menu .t{ color: #fff !important; font-weight:600 !important; } html.up-theme-dark .upc-cfilter .cf-menu .s{ color: rgba(255,255,255,.70) !important; font-size: 12px !important; margin-top: 2px !important; } /* ========================================================= 17) HEADER (ASTRA + UNITYPRO HEADER BUTTONS + DROPDOWN) ========================================================= */ /* Astra header */ html.up-theme-dark .ast-primary-header-bar, html.up-theme-dark .main-header-bar, html.up-theme-dark .site-primary-header-wrap{ background: #242526 !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; } html.up-theme-dark .ast-primary-header-bar, html.up-theme-dark .ast-primary-header-bar a, html.up-theme-dark .ast-primary-header-bar i, html.up-theme-dark .main-header-bar a, html.up-theme-dark .main-header-bar i{ color: rgba(255,255,255,.92) !important; } html.up-theme-dark .ast-primary-header-bar a:hover, html.up-theme-dark .main-header-bar a:hover{ color:#fff !important; } /* Header buttons */ html.up-theme-dark .up-hbtn{ background:rgba(255,255,255,.10) !important; color:var(--updm-text) !important; border:0 !important; } html.up-theme-dark .up-hbtn:hover, html.up-theme-dark .up-hbtn:focus, html.up-theme-dark .up-hbtn:focus-visible{ border-color: transparent !important; outline: none !important; box-shadow: none !important; background:rgba(255,255,255,.15) !important; } html.up-theme-dark .up-hitem:hover{ border:0 !important; } html.up-theme-dark .up-hbtn:focus{ background:rgba(255,255,255,.14) !important; color:var(--updm-text) !important; } html.up-theme-dark .up-hbtn.avatar{ background:transparent !important; box-shadow:0 0 0 1.5px rgba(255,255,255,.25),0 0 0 4px rgba(59,130,246,.55) !important; } /* Header account dropdown (up-dd) */ html.up-theme-dark .up-dd{ background: var(--up-dd-bg) !important; border: 1px solid var(--up-dd-border) !important; border-radius: 12px !important; padding: 8px !important; box-shadow: var(--up-dd-shadow) !important; } html.up-theme-dark .up-dd .up-dd-head{ padding: 6px 6px 8px !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; margin-bottom: 6px !important; } html.up-theme-dark .up-dd a.mitem, html.up-theme-dark .up-dd .mitem{ color: rgba(255,255,255,.92) !important; text-decoration: none !important; border-radius: 10px !important; } html.up-theme-dark .up-dd .menu a.mitem{ display:flex !important; align-items:center !important; gap:10px !important; padding:10px 10px !important; } html.up-theme-dark .up-dd .menu a.mitem:hover{ background: rgba(255,255,255,.08) !important; } html.up-theme-dark .up-dd .sep{ background: rgba(255,255,255,.08) !important; height: 1px !important; margin: 6px 6px !important; } html.up-theme-dark .up-dd .micon--circle{ width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 9999px !important; background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.90) !important; } html.up-theme-dark .up-dd img.avatar{ border: 2px solid rgba(255,255,255,.12) !important; border-radius: 9999px !important; } html.up-theme-dark .up-dd a.mitem[href*="up_logout"]{ color: rgba(255,160,160,.95) !important; } html.up-theme-dark .up-dd a.mitem[href*="up_logout"]:hover{ background: rgba(255,80,80,.12) !important; } /* ========================================================= 18) MEMBERS DIRECTORY + FRIEND MENU ========================================================= */ html.up-theme-dark .unitypro-members-page .friend-card{ background:var(--updm-surface-2) !important; border:0 !important; } html.up-theme-dark .unitypro-members-page .up-search input, html.up-theme-dark .unitypro-members-page .up-ellip{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .upcol-modal-select{ background:var(--updm-surface-2) !important; border:0px !important; border-radius:5px !important; } html.up-theme-dark .upcol-modal-select, html.up-theme-dark .unitypro-members-page .up-search input{ background:var(--updm-surface-2) !important; } /* Friend menu popup */ html.up-theme-dark .friend-menu-pop{ background: #242526 !important; border: 0px solid rgba(255,255,255,.06) !important; border-radius: 12px !important; padding: 6px !important; min-width: 240px !important; box-shadow: 0 6px 48px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35) !important; } html.up-theme-dark .friend-menu-caret{ background: #242526 !important; border-left: 1px solid rgba(255,255,255,.06) !important; border-top: 1px solid rgba(255,255,255,.06) !important; box-shadow: -2px -2px 2px rgba(0,0,0,.18) !important; } html.up-theme-dark .friend-menu-list{ margin: 0 !important; padding: 2px !important; } html.up-theme-dark .friend-menu-list .menu-item{ border-radius: 10px !important; padding: 8px 10px !important; color: rgba(255,255,255,.92) !important; font-weight: 600 !important; } html.up-theme-dark .friend-menu-list .menu-item:hover{ background: rgba(255,255,255,.08) !important; } html.up-theme-dark .friend-menu-list .menu-item a{ color: rgba(255,255,255,.92) !important; text-decoration: none !important; } html.up-theme-dark .media{ background:transparent !important; } /* ========================================================= 19) HOVERCARD ========================================================= */ html.up-theme-dark .uphc-card{ background:var(--uphc-bg) !important; border-color:var(--uphc-border) !important; } html.up-theme-dark .uphc-card *{ color:var(--uphc-text) !important; } html.up-theme-dark .uphc-sub, html.up-theme-dark .uphc-meta, html.up-theme-dark .uphc-user-status, html.up-theme-dark .uphc-loc{ color:var(--uphc-muted) !important; } html.up-theme-dark .uphc-bio{ background:rgba(255,255,255,.06) !important; color:var(--uphc-text) !important; } html.up-theme-dark .uphc-ico{ fill:var(--uphc-text) !important; } html.up-theme-dark .uphc-dot{ box-shadow:0 0 0 2px rgba(0,0,0,.35) inset !important; } html.up-theme-dark .uphc-sec .uphc-sec-head{ font-size:13px !important; } html.up-theme-dark .uphc-info-ico{ color:var(--uphc-text) !important; } /* Hovercard action buttons */ html.up-theme-dark .uphc-btn{ background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.92) !important; border: 0px solid rgba(255,255,255,.14) !important; border-radius: 8px !important; padding: 10px 12px !important; font-weight:600 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } html.up-theme-dark .uphc-btn svg{ width: 18px !important; height: 18px !important; fill: currentColor !important; } html.up-theme-dark .uphc-btn:hover{ background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.18) !important; filter: brightness(1.04) !important; } html.up-theme-dark .uphc-btn:active{ filter: brightness(.98) !important; } html.up-theme-dark .uphc-btn.uphc-msg{ background: rgba(255,255,255,.06) !important; } html.up-theme-dark .uphc-btn.uphc-msg:hover{ background: rgba(255,255,255,.22) !important; } html.up-theme-dark .uphc-btn.uphc-primary{ background: linear-gradient(180deg,#3b82f6 0%, #2563eb 100%) !important; border-color: rgba(255,255,255,.16) !important; color: #fff !important; } html.up-theme-dark .uphc-btn.uphc-btn-follow.is-following{ background: rgba(59,130,246,.65) !important; border-color: rgba(59,130,246,.40) !important; color: #fff !important; } html.up-theme-dark .uphc-btn.uphc-icononly{ padding: 10px !important; width: 40px !important; min-width: 40px !important; } /* Hovercard message bubble tweaks you had */ html.up-theme-dark .uphc-msg{ background:#2a3443 !important; color:var(--uphc-text) !important; } html.up-theme-dark .uphc-msg:hover{ background:#344155 !important; } /* Avatar ring + badge */ html.up-theme-dark .upp-avatar{ position: relative; } html.up-theme-dark .upp-avatar img{ border-radius: 999px !important; border: 2px solid rgba(255,255,255,.10) !important; box-shadow: 0 10px 26px rgba(0,0,0,.45) !important; background: rgba(255,255,255,.03) !important; } html.up-theme-dark .upp-avatar .upp-badge{ border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 10px 22px rgba(0,0,0,.45) !important; } /* ========================================================= 20) LEADERBOARD ========================================================= */ /* Leaderboard (misc/points.css is hard-coded light) */ html.up-theme-dark .unitypro-leaderboard-screen .upp-shell, html.up-theme-dark .unitypro-leaderboard-screen .upp-wrap{ background:transparent !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-hero, html.up-theme-dark .unitypro-leaderboard-screen .upp-card, html.up-theme-dark .unitypro-leaderboard-screen .upp-top, html.up-theme-dark .unitypro-leaderboard-screen .upp-mbti-desc, html.up-theme-dark .unitypro-leaderboard-screen .upp-modal-box, html.up-theme-dark .unitypro-leaderboard-screen .upp-modal-box2, html.up-theme-dark .unitypro-leaderboard-screen .upp-modal-box3{ background:var(--updm-surface) !important; border-color:var(--updm-border) !important; color:var(--updm-text) !important; } html.up-theme-dark .is-locked, html.up-theme-dark .unitypro-leaderboard-screen .is-unlocked{ background:var(--updm-surface-2) !important; border-color:var(--updm-border) !important; color:var(--updm-muted) !important; } html.up-theme-dark .unitypro-leaderboard-screen .current{ background:#f5d364 !important; border-color:var(--updm-border) !important; color:var(--updm-textD) !important; } html.up-theme-dark .up-news-modal__backdrop{ background:rgba(0,0,0,.55) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-title, html.up-theme-dark .upp-name-xl{ color:var(--updm-text) !important; } html.up-theme-dark .unitypro-leaderboard-screen .lvl-title{ color:var(--updm-muted) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-next{ color:var(--updm-muted) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-name, html.up-theme-dark .unitypro-leaderboard-screen .upp-lvl, html.up-theme-dark .unitypro-leaderboard-screen .upp-points{ color:var(--updm-text) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-sub, html.up-theme-dark .unitypro-leaderboard-screen .lvl-sub, html.up-theme-dark .unitypro-leaderboard-screen .upp-joined, html.up-theme-dark .unitypro-leaderboard-screen .upp-activity, html.up-theme-dark .unitypro-leaderboard-screen .upp-mbti-label, html.up-theme-dark .unitypro-leaderboard-screen .upp-totals{ color:var(--updm-muted) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-top li{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.10) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-btn{ background:rgba(59,130,246,.20) !important; border-color:rgba(59,130,246,.35) !important; color:var(--updm-text) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-btn:hover{ background:rgba(59,130,246,.28) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-title, html.up-theme-dark .unitypro-leaderboard-screen .lvl-title, html.up-theme-dark .unitypro-leaderboard-screen .upp-name, html.up-theme-dark .unitypro-leaderboard-screen .upp-lvl, html.up-theme-dark .unitypro-leaderboard-screen .upp-points{ color:var(--updm-text) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-sub, html.up-theme-dark .unitypro-leaderboard-screen .lvl-sub, html.up-theme-dark .unitypro-leaderboard-screen .upp-joined, html.up-theme-dark .unitypro-leaderboard-screen .upp-activity, html.up-theme-dark .unitypro-leaderboard-screen .upp-mbti-label, html.up-theme-dark .unitypro-leaderboard-screen .upp-totals{ color:var(--updm-muted) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-top li{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.10) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-btn{ background:rgba(59,130,246,.20) !important; border-color:rgba(59,130,246,.35) !important; color:var(--updm-text) !important; } html.up-theme-dark .unitypro-leaderboard-screen .upp-btn:hover{ background:rgba(59,130,246,.28) !important; } html.up-theme-dark .unitypro-leaderboard-screen .lvl-row{ background:var(--updm-surface) !important; border:0 !important; color:var(--updm-text) !important; } /* ========================================================= 21) ACTIVITY MENU (ROW 3-DOTS + DROPDOWN) ========================================================= */ html.up-theme-dark .up-activity-row__more{ background: transparent !important; } html.up-theme-dark .up-activity-row__more span{ background: rgba(255,255,255,.72) !important; } html.up-theme-dark .up-activity-row__more:hover{ background: rgba(255,255,255,.08) !important; } html.up-theme-dark .up-activity-row__more:focus, html.up-theme-dark .up-activity-row__more:active, html.up-theme-dark .up-activity-row__more.is-open{ background: rgba(255,255,255,.08) !important; box-shadow:none !important; outline:none !important; } html.up-theme-dark .up-activity-menu{ background: var(--updm-surface-2) !important; border: 1px solid var(--updm-border) !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important; } html.up-theme-dark .up-activity-menu::before{ background: var(--updm-surface-2) !important; border-top: 1px solid var(--updm-border) !important; border-left: 1px solid var(--updm-border) !important; box-shadow: -3px -3px 10px rgba(0,0,0,.28) !important; } html.up-theme-dark .up-activity-menu__item{ color: rgba(255,255,255,.92) !important; } html.up-theme-dark .up-activity-menu__item:hover{ background: rgba(255,255,255,.06) !important; color:#fff !important; } html.up-theme-dark .up-activity-see-all{ background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.92) !important; border: 0px solid rgba(255,255,255,.14) !important; } html.up-theme-dark .up-activity-see-all:hover{ background: rgba(255,255,255,.10) !important; color:#fff !important; } /* ========================================================= 22) COMMUNITY INVITE BUTTON (FORCED) ========================================================= */ #up-community .upc-g-content a.upc-invite, #up-community .upc-g-content .upc-invite{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:10px 14px !important; border-radius:8px !important; background:#F7C948 !important; color:#111827 !important; border:0px solid rgba(0,0,0,.18) !important; width:100% !important; font-weight:600 !important; font-size:13px !important; letter-spacing:.4px !important; text-transform:uppercase !important; text-decoration:none !important; cursor:pointer !important; user-select:none !important; -webkit-tap-highlight-color:transparent !important; } #up-community .upc-g-content a.upc-invite:hover, #up-community .upc-g-content .upc-invite:hover{ filter:brightness(.97) !important; } #up-community .upc-g-content a.upc-invite:active, #up-community .upc-g-content .upc-invite:active{ filter:brightness(.94) !important; } #up-community .upc-g-content a.upc-invite:focus-visible, #up-community .upc-g-content .upc-invite:focus-visible{ outline:none !important; } /* ========================================================= 23) REPORT MODALS + DROPDOWNS (UPR + UPC-DD) ========================================================= */ html.up-theme-dark .upr-inner{ background: var(--updm-surface-2) !important; border: 1px solid var(--updm-border) !important; border-radius: 14px !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important; } html.up-theme-dark .upr-inner p{ color: rgba(255,255,255,.80) !important; } html.up-theme-dark .up-term{ color:#fff !important; } html.up-theme-dark .unitypro-unsent-card__title a, html.up-theme-dark .up-activity-card__title-wrap h1, html.up-theme-dark .upc-select-wrap h6, html.up-theme-dark .up-card h2, html.up-theme-dark .upa-card h4, html.up-theme-dark .upa-card h2, html.up-theme-dark .modal-headerR h4, html.up-theme-dark .up-terms-head h3, html.up-theme-dark .upr-inner h3{ color:#fff !important; } /* Facebook-ish dark dropdown listbox (.upc-dd) */ .upc-dd{ background:#242526; border:1px solid #3E4042; border-radius:12px; padding:6px; box-shadow:0 12px 28px rgba(0,0,0,.55); color:#E4E6EB; outline:none; min-width:220px; } .upc-dd .upc-item{ background:transparent !important; color:#E4E6EB !important; } .upc-dd .upc-item:hover, .upc-dd .upc-item:focus, .upc-dd .upc-item:focus-visible, .upc-dd .upc-item:active{ background:#3A3B3C !important; color:#E4E6EB !important; } .upc-dd .upc-item[aria-selected="true"], .upc-dd .upc-item.active, .upc-dd .upc-item.is-active, .upc-dd .upc-item.is-open{ background:#3A3B3C !important; color:#E4E6EB !important; } .upc-dd .upc-item .label{ font-size:14px; line-height:1.2; color:#E4E6EB; } .upc-dd .upc-item .dot{ width:10px; height:10px; border-radius:999px; background:#65676B; flex:0 0 10px; box-shadow:0 0 0 2px rgba(255,255,255,.06) inset; } .upc-dd .upc-item[aria-selected="true"] .label{ color:#E4E6EB; font-weight:600; } .upc-dd .upc-item[aria-selected="true"] .dot{ background:#2D88FF; box-shadow:none; } .upc-dd .upc-item + .upc-item{ margin-top:2px; } /* Reasons list */ html.up-theme-dark .upr-reasons label{ color: rgba(255,255,255,.88) !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; padding: 10px 12px !important; display: flex !important; align-items: center !important; gap: 10px !important; margin: 8px 0 !important; } html.up-theme-dark .upr-reasons input[type="radio"]{ accent-color: #3b82f6 !important; } html.up-theme-dark textarea.upr-extra{ background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #fff !important; border-radius: 12px !important; } html.up-theme-dark textarea.upr-extra::placeholder{ color: rgba(255,255,255,.55) !important; } html.up-theme-dark .upr-actions .upr-cancel{ background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; color: rgba(255,255,255,.92) !important; border-radius: 12px !important; padding: 10px 14px !important; } html.up-theme-dark .upr-actions .upr-send{ background: linear-gradient(180deg,#3b82f6 0%, #2563eb 100%) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important; border-radius: 12px !important; padding: 10px 14px !important; } html.up-theme-dark .upr-actions .upr-cancel:hover, html.up-theme-dark .upr-actions .upr-send:hover{ filter: brightness(1.06) !important; transform: translateY(-1px) !important; } /* Report user modal (.up-modal) */ html.up-theme-dark .up-modal{ background: var(--updm-surface-2) !important; border: 1px solid var(--updm-border) !important; border-radius: 14px !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important; color: #fff !important; } html.up-theme-dark .modal-headerR, html.up-theme-dark .up-modal .up-modal-head{ background: transparent !important; } html.up-theme-dark .up-modal .up-modal-head{ border-bottom: 1px solid var(--updm-border) !important; background: rgba(255,255,255,.03) !important; border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; } html.up-theme-dark .up-modal .up-modal-head strong{ color:#fff !important; } html.up-theme-dark .up-modal-head strong{ font-size:18px !important; } html.up-theme-dark .up-modal .upm-x{background:transparent!important;border:0!important;color:rgba(255,255,255,.92)!important;border-radius:999px!important;width:34px!important;height:34px!important;line-height:0!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;overflow:hidden!important;} html.up-theme-dark .up-modal .upm-x:hover,html.up-theme-dark .up-modal .upm-x:focus-visible{background:rgba(255,255,255,.10)!important;border-radius:999px!important;} html.up-theme-dark .up-modal .up-modal-body p{ color: rgba(255,255,255,.80) !important; } html.up-theme-dark .up-modal .up-rsn-list label{ color: rgba(255,255,255,.88) !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; padding: 10px 12px !important; margin: 8px 0 !important; } html.up-theme-dark .up-modal .up-rsn-list input[type="radio"]{ accent-color: #3b82f6 !important; } html.up-theme-dark .up-modal textarea.widefat{ background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #fff !important; border-radius: 12px !important; } html.up-theme-dark .up-modal textarea.widefat::placeholder{ color: rgba(255,255,255,.55) !important; } html.up-theme-dark .up-modal .up-modal-foot{ border-top: 1px solid var(--updm-border) !important; background: rgba(255,255,255,.02) !important; border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; } html.up-theme-dark .up-modal .button.button-primary.upm-submit{ background: linear-gradient(180deg,#3b82f6 0%, #2563eb 100%) !important; border: 0px solid rgba(255,255,255,.14) !important; color: #fff !important; border-radius: 12px !important; padding: 10px 14px !important; } html.up-theme-dark .up-modal .button.button-primary.upm-submit:hover{ filter: brightness(1.06) !important; } /* --- Dark mode overrides (matches your html.up-theme-dark pattern) --- */ html.up-theme-dark #up-community .upc-skel{ background: var(--updm-surface-2) !important; border: 1px solid var(--updm-border) !important; border-radius: 14px !important; } /* Use darker base/highlight for shimmer in dark mode */ html.up-theme-dark #up-community{ --upc-skel-base: rgba(255,255,255,.80); --upc-skel-highlight: rgba(255,255,255,.14); } /* Avatar uses the same base var, but keep it explicitly for clarity */ html.up-theme-dark #up-community .upc-skel .upc-skel-avatar{ background:var(--upc-skel-base); } /* Dark mode */ html.up-theme-dark #up-community .upc-empty-card{ background: var(--updm-surface-2) !important; border: 1px solid var(--updm-border) !important; border-radius: 10px !important; } html.up-theme-dark #up-community .upc-empty-title{ color:#f9fafb; } html.up-theme-dark #up-community .upc-empty-sub{ color:rgba(249,250,251,.72); } html.up-theme-dark #up-community .upc-empty-btn{ background:#3b82f6; border:1px solid rgba(255,255,255,.10); } /* Dark mode: Help & Support section background + readable text */ html.up-theme-dark .elementor-element-36e7ccd{ background: var(--updm-surface-2) !important; border: 1px solid var(--updm-border) !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important;} html.up-theme-dark .elementor-element-36e7ccd > .elementor-widget-wrap{background:transparent!important;} html.up-theme-dark .elementor-element-36e7ccd .elementor-heading-title{color:#fff!important;} html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor{color:rgba(255,255,255,.86)!important;} html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor p,html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor li{color:rgba(255,255,255,.86)!important;} html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor h1,html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor h2,html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor h3,html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor h6,html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor h4,html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor h5,html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor strong{color:#fff!important;} html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor a{color:#2D88FF!important;text-decoration:underline!important;} html.up-theme-dark .elementor-element-36e7ccd .elementor-widget-text-editor a:hover{color:#59A7FF!important;} html.up-theme-dark .elementor-widget-text-edito h6{color:rgba(255,255,255,.86)!important;} /* ========================================================== UNITYPRO MESSENGER (POPUP + INBOX) THEME TOKENS Keep ALL messenger dark-mode styling here going forward. ========================================================== */ :root{ /* Popup messenger tokens */ --updm-surface: var(--up-card-bg, #ffffff); --updm-surface-2: var(--up-card-bg, #ffffff); --updm-surface-3: rgba(0,0,0,0.05); --updm-bg: rgba(0,0,0,0.03); --updm-text: var(--up-text, #111827); --updm-muted: var(--up-text-muted, rgba(0,0,0,.55)); --updm-border: var(--up-border, rgba(0,0,0,.08)); /* Recipient bubble (them) */ --updm-bubble-other: #e4e6eb; --updm-bubble-other-text: #111827; /* Inbox "them" bubble */ --up-bubble-bg: #e4e6eb; } /* --------------------------------------------------------- Dark-mode dropdown fixes (Messages + Notifications) Header CSS historically had light-only hard-coded colors. --------------------------------------------------------- */ html.up-theme-dark .up-dd .menu .mitem:hover, body.up-theme-dark .up-dd .menu .mitem:hover, html[data-theme="dark"] .up-dd .menu .mitem:hover, body.dark-mode .up-dd .menu .mitem:hover, body.dark .up-dd .menu .mitem:hover, body.unitypro-dark .up-dd .menu .mitem:hover, body.up-dark .up-dd .menu .mitem:hover{ background: rgba(255,255,255,0.06) !important; } html.up-theme-dark .up-dd .menu .mitem, body.up-theme-dark .up-dd .menu .mitem, html[data-theme="dark"] .up-dd .menu .mitem, body.dark-mode .up-dd .menu .mitem, body.dark .up-dd .menu .mitem, body.unitypro-dark .up-dd .menu .mitem, body.up-dark .up-dd .menu .mitem{ color: var(--updm-text, rgba(255,255,255,0.92)) !important; } html.up-theme-dark .up-noti-item .msg a, body.up-theme-dark .up-noti-item .msg a, html[data-theme="dark"] .up-noti-item .msg a, body.dark-mode .up-noti-item .msg a, body.dark .up-noti-item .msg a, body.unitypro-dark .up-noti-item .msg a, body.up-dark .up-noti-item .msg a{ color: var(--updm-text, rgba(255,255,255,0.92)) !important; } html.up-theme-dark .up-dd .seeall, body.up-theme-dark .up-dd .seeall, html[data-theme="dark"] .up-dd .seeall, body.dark-mode .up-dd .seeall, body.dark .up-dd .seeall, body.unitypro-dark .up-dd .seeall, body.up-dark .up-dd .seeall{ background: rgba(255,255,255,0.06) !important; border-color: var(--updm-border, rgba(255,255,255,0.10)) !important; color: var(--updm-text, rgba(255,255,255,0.92)) !important; } /* ========================================================= Messenger input bar (match iMessage-style pill) ========================================================= */ /* The full pill bar */ .up-msg-inputwrap{ background: var(--updm-surface-3, #f0f2f5) !important; border: 0 !important; border-radius: 999px !important; padding: 10px 12px !important; gap: 10px !important; min-height: 44px !important; } /* The textarea inside */ .up-msg-input{ font-size: 14px !important; line-height: 1.25 !important; padding: 0 2px !important; color:#f5f5f5 !important; } .up-msg-input::placeholder{ color: rgba(17,17,17,.50) !important; } html.up-theme-dark .up-msg-input::placeholder, body.up-theme-dark .up-msg-input::placeholder, html[data-theme="dark"] .up-msg-input::placeholder, body.dark-mode .up-msg-input::placeholder, body.dark .up-msg-input::placeholder, body.unitypro-dark .up-msg-input::placeholder, body.up-dark .up-msg-input::placeholder{ color: rgba(255,255,255,.55) !important; } /* Remove the ugly focus ring / border when clicking */ .up-msg-input:focus, .up-msg-input:focus-visible{ outline: none !important; border-color: transparent !important; box-shadow: none !important; } /* If it's a textarea or input element */ .up-msg-input{ border: none !important; background: transparent !important; -webkit-appearance: none !important; appearance: none !important; } /* Send button becomes the purple paper-plane icon */ .up-msg-send{ background: transparent !important; color: var(--up-accent, #6f43ff) !important; border: 0 !important; width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; /* hide the word 'Send' */ } .up-msg-send::before{ content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") no-repeat center/contain; } .up-msg-send:hover{ background: rgba(111,67,255,.10) !important; } html.up-theme-dark .up-msg-send:hover, body.up-theme-dark .up-msg-send:hover, html[data-theme="dark"] .up-msg-send:hover, body.dark-mode .up-msg-send:hover, body.dark .up-msg-send:hover, body.unitypro-dark .up-msg-send:hover, body.up-dark .up-msg-send:hover{ background: rgba(255,255,255,.06) !important; } /* ===== Challenges (Dark Mode) ===== */ html.up-theme-dark .up-ch-h2{ color:#f5f5f5 !important; font-size:18px; } html.up-theme-dark .up-ch-tabs, body.up-theme-dark .up-ch-tabs, html[data-theme="dark"] .up-ch-tabs, body.dark-mode .up-ch-tabs, body.dark .up-ch-tabs, body.unitypro-dark .up-ch-tabs, body.up-dark .up-ch-tabs{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; } html.up-theme-dark .up-ch-tab, body.up-theme-dark .up-ch-tab, html[data-theme="dark"] .up-ch-tab, body.dark-mode .up-ch-tab, body.dark .up-ch-tab, body.unitypro-dark .up-ch-tab, body.up-dark .up-ch-tab{ color: rgba(255,255,255,.78) !important; } html.up-theme-dark .up-ch-tab.is-on, body.up-theme-dark .up-ch-tab.is-on, html[data-theme="dark"] .up-ch-tab.is-on, body.dark-mode .up-ch-tab.is-on, body.dark .up-ch-tab.is-on, body.unitypro-dark .up-ch-tab.is-on, body.up-dark .up-ch-tab.is-on{ background: #3b82f6 !important; color: #f5f5f5 !important; box-shadow: 0 2px 10px rgba(0,0,0,.25) !important; } html.up-theme-dark .up-ch-bar, body.up-theme-dark .up-ch-bar, html[data-theme="dark"] .up-ch-bar, body.dark-mode .up-ch-bar, body.dark .up-ch-bar, body.unitypro-dark .up-ch-bar, body.up-dark .up-ch-bar{ background: rgba(255,255,255,.10) !important; } html.up-theme-dark .up-ch-bar > i, body.up-theme-dark .up-ch-bar > i, html[data-theme="dark"] .up-ch-bar > i, body.dark-mode .up-ch-bar > i, body.dark .up-ch-bar > i, body.unitypro-dark .up-ch-bar > i, body.up-dark .up-ch-bar > i{ background: #ffffff !important; } html.up-theme-dark .up-ch-btn.primary, body.up-theme-dark .up-ch-btn.primary, html[data-theme="dark"] .up-ch-btn.primary, body.dark-mode .up-ch-btn.primary, body.dark .up-ch-btn.primary, body.unitypro-dark .up-ch-btn.primary, body.up-dark .up-ch-btn.primary{ background: #444 !important; color: #f5f5f5 !important; border-color: rgba(255,255,255,.18) !important; } html.up-theme-dark .up-ch-badge-preview, body.up-theme-dark .up-ch-badge-preview, html[data-theme="dark"] .up-ch-badge-preview, body.dark-mode .up-ch-badge-preview, body.dark .up-ch-badge-preview, body.unitypro-dark .up-ch-badge-preview, body.up-dark .up-ch-badge-preview{ background: rgba(255,255,255,.03) !important; } /* Challenges: locked badge silhouettes (dark mode) */ html.up-theme-dark .up-ch-lock, body.up-theme-dark .up-ch-lock, html[data-theme="dark"] .up-ch-lock, body.dark-mode .up-ch-lock, body.dark .up-ch-lock, body.unitypro-dark .up-ch-lock, body.up-dark .up-ch-lock{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.10); } html.up-theme-dark .up-ch-lock i, body.up-theme-dark .up-ch-lock i, html[data-theme="dark"] .up-ch-lock i, body.dark-mode .up-ch-lock i, body.dark .up-ch-lock i, body.unitypro-dark .up-ch-lock i, body.up-dark .up-ch-lock i{ color:#e5e7eb; } /* Letters from the Past (read-only letters) */ html.up-theme-dark .up-lftp .up-lftp__stack, body.up-theme-dark .up-lftp .up-lftp__stack, html[data-theme="dark"] .up-lftp .up-lftp__stack, body.dark-mode .up-lftp .up-lftp__stack, body.dark .up-lftp .up-lftp__stack, body.unitypro-dark .up-lftp .up-lftp__stack, body.up-dark .up-lftp .up-lftp__stack{ box-shadow: 0 10px 30px rgba(0,0,0,.25); } /* Letters from the Past: address labels should follow theme text color */ .up-lftp__addrLabel{ color: var(--updm-textG) !important; }