/*
* Affiliate Connect — Brand Stylesheet
* Applied over Astra Theme (free) via the affiliate-connect-core plugin.
*
* Colour palette (Section 5 of affiliate_connect_handoff.md — exact hex only):
* Space Navy #030520 — page background
* Deep Navy #02022D — cards, panels, surfaces
* Periwinkle #6869FF — primary accent, buttons, links, Standard tier
* Neon Magenta #FE00FF — hot accent, gradient end, section dividers
* Electric Lime #1EFF00 — live data, earnings, success states
* Amber #F0AD4E — Pro tier, rewards, headings
* White #FFFFFF — all body text, foreground
* Slate #828FA0 — use sparingly; prefer White
*
* Brand Gradient: linear-gradient(135deg, #6869FF, #FE00FF)
* Font: Inter (Google Fonts), all weights
*/
/* ==========================================================================
CSS CUSTOM PROPERTIES
========================================================================== */
:root {
--ac-space-navy: #030520;
--ac-deep-navy: #02022D;
--ac-periwinkle: #6869FF;
--ac-magenta: #FE00FF;
--ac-lime: #1EFF00;
--ac-amber: #F0AD4E;
--ac-white: #FFFFFF;
--ac-slate: #828FA0;
--ac-gradient: linear-gradient(135deg, #6869FF, #FE00FF);
/* Override Astra CSS variables */
--ast-global-color-0: #6869FF;
--ast-global-color-1: #FE00FF;
--ast-global-color-2: #030520;
--ast-global-color-3: #FFFFFF;
--ast-global-color-4: #F0AD4E;
--ast-global-color-5: #1EFF00;
}
/* ==========================================================================
GLOBAL RESETS — font, background, text colour
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body,
.ast-page-builder-template,
.ast-plain-container,
.ast-narrow-container {
background-color: var(--ac-space-navy) !important;
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ==========================================================================
TYPOGRAPHY — Inter for all elements
========================================================================== */
h1, h2, h3, h4, h5, h6,
.ast-blog-post-title,
.entry-title,
.page-title,
.widget-title {
font-family: 'Inter', sans-serif !important;
font-weight: 700;
color: var(--ac-white) !important;
letter-spacing: -0.02em;
line-height: 1.2;
}
/* ==========================================================================
HIDE ASTRA PAGE TITLE HEADINGS
All platform pages use custom headings inside shortcodes and BuddyBoss
components. Astra's default page title block is suppressed site-wide.
The Customizer toggle (Appearance → Customise → Page Title → Display Page
Title → Off) handles WP pages; this CSS catches BuddyBoss screens and any
edge cases the Customizer setting does not reach.
========================================================================== */
.entry-title,
.page-title,
.ast-page-title-wrap,
.ast-archive-description,
.site-main .ast-page-header,
.ast-post-format- .entry-header {
display: none !important;
}
p, li, span, label, input, textarea, select, button, td, th {
font-family: 'Inter', sans-serif !important;
color: var(--ac-white);
}
a {
color: var(--ac-periwinkle);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover,
a:focus {
color: var(--ac-magenta);
text-decoration: none;
}
code, pre, .code, .monospace {
font-family: 'Courier New', Courier, monospace !important;
background-color: var(--ac-deep-navy);
color: var(--ac-lime);
padding: 2px 6px;
border-radius: 4px;
}
/* ==========================================================================
ASTRA HEADER
========================================================================== */
/* --------------------------------------------------------------------------
HIDE ASTRA HEADER SITE-WIDE
BuddyBoss ReadyLaunch provides all navigation via its left sidebar.
The Astra header is hidden on all frontend pages. wp-admin is unaffected
because affiliate-connect-brand.css is only enqueued on the frontend
(wp_enqueue_scripts hook).
-------------------------------------------------------------------------- */
#masthead,
.site-header,
.ast-desktop-header,
.ast-primary-header-bar,
#ast-fixed-header,
.ast-above-header-wrap,
.ast-below-header-wrap,
#ast-hf-header,
.ast-mobile-header-wrap,
#ast-mobile-header {
display: none !important;
}
/* NOTE: do NOT add a bare `.ast-header-break-point` here — Astra puts that
class on at narrow viewports, so it would hide the entire page
on mobile. Use the explicit mobile-header selectors above instead. */
/* Site title / logo */
.site-title a,
.site-title a:hover,
.ast-site-name-link {
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 800;
}
/* Primary navigation links */
.main-navigation a,
.main-header-menu a,
.ast-nav-menu a,
#ast-hf-menu-1 a {
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500;
font-size: 14px;
transition: color 0.2s ease;
}
.main-navigation a:hover,
.main-header-menu a:hover,
.ast-nav-menu a:hover,
#ast-hf-menu-1 a:hover,
.main-navigation .current-menu-item > a,
.ast-nav-menu .current-menu-item > a {
color: var(--ac-periwinkle) !important;
}
/* Mobile menu toggle */
.menu-toggle,
.ast-mobile-menu-trigger,
button.ast-mobile-menu-trigger-fill {
color: var(--ac-white) !important;
background: transparent !important;
}
/* Mobile menu panel */
.ast-mobile-header-nav,
.ast-mobile-header-nav .menu-item a,
#ast-hf-mobile-menu {
background-color: var(--ac-space-navy) !important;
color: var(--ac-white) !important;
}
/* Sub-menus / dropdowns */
.sub-menu,
.ast-nav-menu .sub-menu {
background-color: var(--ac-deep-navy) !important;
border: 1px solid rgba(104, 105, 255, 0.2);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.sub-menu a,
.ast-nav-menu .sub-menu a {
color: var(--ac-white) !important;
}
.sub-menu a:hover,
.ast-nav-menu .sub-menu a:hover {
color: var(--ac-periwinkle) !important;
background-color: rgba(104, 105, 255, 0.1) !important;
}
/* ==========================================================================
ASTRA FOOTER — hidden site-wide; replaced by .ac-site-footer
========================================================================== */
.site-footer,
#colophon,
.ast-footer-area,
.footer-widget-area,
.site-below-footer-wrap {
display: none !important;
}
/* ==========================================================================
ASTRA CONTENT AREAS
========================================================================== */
#content,
.site-content,
.ast-container,
.content-area,
.entry-content,
.ast-article-inner-content {
background-color: var(--ac-space-navy) !important;
color: var(--ac-white) !important;
}
/* Sidebar */
#secondary,
.widget-area,
.ast-sidebar {
background-color: var(--ac-space-navy) !important;
}
.widget,
.widget-default {
background-color: var(--ac-deep-navy) !important;
border: 1px solid rgba(104, 105, 255, 0.15);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}
/* ==========================================================================
CARDS & PANELS
========================================================================== */
.ac-card,
.entry,
.hentry,
.ast-card,
.astra-article,
.postbox,
.bp-list li,
.bp-list .list-wrap {
background-color: var(--ac-deep-navy) !important;
border: 1px solid rgba(104, 105, 255, 0.15);
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ac-card:hover,
.entry:hover {
border-color: rgba(104, 105, 255, 0.4);
box-shadow: 0 4px 24px rgba(104, 105, 255, 0.12);
}
/* ==========================================================================
BUTTONS
========================================================================== */
/* Primary button — gradient */
.ast-button,
.button,
button[type="submit"],
input[type="submit"],
.wp-element-button,
.woocommerce .button,
.comment-reply-link,
.ast-btn,
a.button,
.wp-block-button__link {
background: var(--ac-gradient) !important;
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 24px !important;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.1s ease !important;
text-decoration: none !important;
display: inline-block;
}
.ast-button:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
opacity: 0.88 !important;
transform: translateY(-1px);
color: var(--ac-white) !important;
}
/* Secondary / outline button */
.button-secondary,
.ast-btn-secondary {
background: transparent !important;
border: 1px solid var(--ac-periwinkle) !important;
color: var(--ac-periwinkle) !important;
}
.button-secondary:hover,
.ast-btn-secondary:hover {
background: rgba(104, 105, 255, 0.1) !important;
color: var(--ac-white) !important;
}
/* ==========================================================================
FORMS & INPUTS
========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
background-color: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
border-radius: 8px !important;
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
padding: 10px 14px !important;
transition: border-color 0.2s ease !important;
width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
outline: none !important;
border-color: var(--ac-periwinkle) !important;
box-shadow: 0 0 0 3px rgba(104, 105, 255, 0.2) !important;
}
input::placeholder,
textarea::placeholder {
color: var(--ac-slate) !important;
opacity: 1;
}
label {
color: var(--ac-white) !important;
font-weight: 500;
font-size: 14px;
margin-bottom: 6px;
display: block;
}
/* ==========================================================================
BUDDYBOSS — activity feed, profiles, members directory, groups
========================================================================== */
/* Wrapper / page container */
#buddypress,
.buddypress-wrap,
.bp-wrap,
.bp-container {
background-color: var(--ac-space-navy) !important;
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
}
/* Activity items */
#activity-stream .activity-item,
.bb-activity-inner,
.activity-content,
.bp-activity-list li {
background-color: var(--ac-deep-navy) !important;
border: 1px solid rgba(104, 105, 255, 0.15) !important;
border-radius: 25px !important;
padding: 20px !important;
margin-bottom: 12px !important;
}
/* Activity meta (username, timestamp) */
.activity-meta a,
.bp-activity .who-posted a,
.bb-activity-head .activity-header a {
color: var(--ac-periwinkle) !important;
font-weight: 600;
}
.activity-meta .time-since,
.activity-time-since {
color: var(--ac-slate) !important;
font-size: 12px;
}
/* Activity post text */
.activity-inner p,
.bb-activity-inner p {
color: var(--ac-white) !important;
}
/* Activity feed action buttons — Like and Comment
* Matches All Updates / New Posts filter button style exactly.
* Gradient bg, dark navy text, 8px radius, 34px height.
* Targets BuddyBoss ReadyLaunch (.bb-activity-bottom-links) and
* classic BuddyBoss (.activity-meta .button / .comment-link). */
.bb-activity-bottom-links a,
.bb-reaction-btn,
.activity-meta a.button,
.activity-meta .comment-link,
.activity-meta a.bp-primary-action,
.activity-meta a.bp-secondary-action,
.activity-item .generic-button a {
border-radius: 8px !important;
padding: 7px 16px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--ac-deep-navy) !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
line-height: 13px !important;
height: 34px !important;
box-sizing: border-box !important;
}
/* Icons/emoji inside Like/Comment buttons — dark navy */
.activity-meta .generic-button a *,
.activity-meta .generic-button a span,
.activity-meta .generic-button a svg,
.bb-activity-bottom-links a *,
.bb-activity-bottom-links a svg {
color: var(--ac-deep-navy) !important;
fill: var(--ac-deep-navy) !important;
}
/* Like-count / Comment-count text spans — BB sets 500, force 700 */
.activity-item .generic-button a .like-count,
.activity-item .generic-button a .comment-count,
.activity-item .generic-button a .bp-screen-reader-text,
.activity-meta .like-count,
.activity-meta .comment-count {
font-weight: 700 !important;
color: var(--ac-deep-navy) !important;
}
/* BB icon font ::before inside buttons — constrain to 16px */
.activity-item .generic-button a i::before,
.activity-meta a.button i::before {
font-size: 16px !important;
line-height: 16px !important;
}
/* Gap between Like and Comment buttons — applied to their shared container */
.bb-activity-bottom-links,
.activity-meta,
.bp-generic-meta.activity-meta,
.activity-meta .activity-state {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* Post Activity textarea */
#whats-new-textarea,
#whats-new,
.ac-textarea {
background-color: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
border-radius: 8px !important;
color: var(--ac-white) !important;
}
/* Member cards / directory list */
.members-list li,
.bp-list.members-list li,
#members-list li {
background-color: var(--ac-deep-navy) !important;
border: 1px solid rgba(104, 105, 255, 0.15) !important;
border-radius: 25px !important;
padding: 16px !important;
transition: border-color 0.2s ease !important;
}
.members-list li:hover,
#members-list li:hover {
border-color: rgba(104, 105, 255, 0.4) !important;
}
/* Member display names */
.bp-list .info h3 a,
.bp-list .info h2 a,
.members-list .item-title a {
color: var(--ac-white) !important;
font-weight: 600;
}
.bp-list .info h3 a:hover,
.members-list .item-title a:hover {
color: var(--ac-periwinkle) !important;
}
/* Profile header */
.bp-user-header,
#item-header,
.item-header-avatar,
.bp-cover-image-container {
background-color: var(--ac-deep-navy) !important;
border-bottom: 1px solid rgba(104, 105, 255, 0.2) !important;
}
#item-header-content h1,
#item-header-content .user-nicename,
.bp-member-header-id h1 {
color: var(--ac-white) !important;
font-weight: 700;
}
/* Profile nav tabs */
.item-list-tabs ul li a,
.bp-navs li a,
.bp-single-hnav a,
.bp-subnavs li a {
color: var(--ac-slate) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500;
border-bottom: 2px solid transparent;
padding: 8px 16px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.item-list-tabs ul li.current a,
.bp-navs li.current a,
.item-list-tabs ul li a:hover,
.bp-navs li a:hover {
color: var(--ac-periwinkle) !important;
border-bottom-color: var(--ac-periwinkle) !important;
background: transparent !important;
}
/* Groups list */
#groups-list li,
.groups-list li {
background-color: var(--ac-deep-navy) !important;
border: 1px solid rgba(104, 105, 255, 0.15) !important;
border-radius: 25px !important;
padding: 16px !important;
}
.groups-list .item-title a,
#groups-list .item-title a {
color: var(--ac-white) !important;
font-weight: 600;
}
/* BuddyBoss notification panel */
.bb-header-buttons .notifications-wrap,
.bp-notifications-list,
.bb-notification-dropdown {
background-color: var(--ac-deep-navy) !important;
border: 1px solid rgba(104, 105, 255, 0.2) !important;
border-radius: 25px !important;
}
.bp-notifications-list li {
border-bottom: 1px solid rgba(104, 105, 255, 0.1) !important;
color: var(--ac-white) !important;
}
/* BuddyBoss search bar */
#bp-search-form input,
.bp-search-form input {
background-color: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(104, 105, 255, 0.3) !important;
color: var(--ac-white) !important;
}
/* ==========================================================================
AFFILIATE CONNECT — STAT CARDS
.ac-stat-card used in dashboard widgets and profile fields.
========================================================================== */
.ac-stat-card {
background-color: var(--ac-deep-navy);
border: 1px solid rgba(104, 105, 255, 0.2);
border-radius: 12px;
padding: 20px 24px;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ac-stat-card:hover {
border-color: rgba(104, 105, 255, 0.5);
box-shadow: 0 4px 24px rgba(104, 105, 255, 0.15);
}
.ac-stat-card .ac-stat-value {
font-size: 28px;
font-weight: 800;
color: var(--ac-lime);
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 4px;
}
.ac-stat-card .ac-stat-label {
font-size: 12px;
font-weight: 500;
color: var(--ac-slate);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ==========================================================================
AFFILIATE CONNECT — BADGE TIERS
========================================================================== */
.ac-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ac-badge-bronze { background-color: rgba(205, 127, 50, 0.2); color: #CD7F32; border: 1px solid #CD7F32; }
.ac-badge-silver { background-color: rgba(192, 192, 192, 0.2); color: #C0C0C0; border: 1px solid #C0C0C0; }
.ac-badge-gold { background-color: rgba(255, 215, 0, 0.2); color: #FFD700; border: 1px solid #FFD700; }
.ac-badge-platinum { background-color: rgba(229, 228, 226, 0.2); color: #E5E4E2; border: 1px solid #E5E4E2; }
.ac-badge-diamond { background-color: rgba(185, 242, 255, 0.2); color: #B9F2FF; border: 1px solid #B9F2FF; }
/* Tier labels */
.ac-tier-standard { color: var(--ac-periwinkle); font-weight: 600; }
.ac-tier-professional { color: var(--ac-amber); font-weight: 600; }
/* ==========================================================================
AFFILIATE CONNECT — GRADIENT ACCENTS
========================================================================== */
.ac-gradient-text {
background: var(--ac-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ac-gradient-bg {
background: var(--ac-gradient);
}
.ac-divider {
border: none;
height: 2px;
background: var(--ac-gradient);
border-radius: 2px;
margin: 32px 0;
}
/* Section headings with gradient underline */
.ac-section-title {
font-family: 'Inter', sans-serif;
font-weight: 800;
color: var(--ac-white);
font-size: 22px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid;
border-image: var(--ac-gradient) 1;
}
/* ==========================================================================
AFFILIATE CONNECT — EARNINGS / LIVE DATA (Electric Lime)
========================================================================== */
.ac-earnings,
.ac-live-data,
.ac-success {
color: var(--ac-lime) !important;
font-weight: 700;
}
.ac-earnings-zero {
color: var(--ac-slate) !important;
}
/* ==========================================================================
AFFILIATE CONNECT — LEADERBOARD TABLE
========================================================================== */
.ac-leaderboard-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 4px;
font-family: 'Inter', sans-serif;
}
.ac-leaderboard-table thead th {
color: var(--ac-slate);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid rgba(104, 105, 255, 0.2);
}
.ac-leaderboard-table tbody tr {
background-color: var(--ac-deep-navy);
border-radius: 8px;
transition: background-color 0.2s ease;
}
.ac-leaderboard-table tbody tr:hover {
background-color: rgba(104, 105, 255, 0.08);
}
.ac-leaderboard-table tbody td {
padding: 12px;
color: var(--ac-white);
font-size: 14px;
vertical-align: middle;
}
/* Top 3 highlight */
.ac-rank-1 .ac-rank-num { color: #FFD700; font-weight: 800; }
.ac-rank-2 .ac-rank-num { color: #C0C0C0; font-weight: 800; }
.ac-rank-3 .ac-rank-num { color: #CD7F32; font-weight: 800; }
/* Rank movement arrows */
.ac-rank-up { color: var(--ac-lime); font-size: 12px; }
.ac-rank-down { color: #FF4D4D; font-size: 12px; }
.ac-rank-new { color: var(--ac-magenta); font-size: 12px; }
/* Current user row (shown outside top 10) */
.ac-leaderboard-table .ac-current-user-row {
background-color: rgba(104, 105, 255, 0.12) !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
}
/* ==========================================================================
AFFILIATE CONNECT — PROGRESS BAR (milestone / onboarding)
========================================================================== */
.ac-progress-wrap {
background-color: rgba(255, 255, 255, 0.08);
border-radius: 100px;
height: 8px;
width: 100%;
overflow: hidden;
margin: 8px 0;
}
.ac-progress-bar {
height: 100%;
background: var(--ac-gradient);
border-radius: 100px;
transition: width 0.6s ease;
}
/* ==========================================================================
AFFILIATE CONNECT — AFFILIATE LINK WIDGET
========================================================================== */
.ac-affiliate-link-box {
display: flex;
align-items: center;
gap: 10px;
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(104, 105, 255, 0.3);
border-radius: 8px;
padding: 10px 14px;
}
.ac-affiliate-link-box .ac-link-text {
flex: 1;
color: var(--ac-slate);
font-size: 13px;
font-family: 'Courier New', monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ac-affiliate-link-box .ac-copy-btn {
background: var(--ac-gradient) !important;
color: var(--ac-white) !important;
border: none !important;
border-radius: 6px !important;
padding: 6px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
/* ==========================================================================
EMPTY STATES (Phase 1 — before WHMCS sync)
========================================================================== */
.ac-empty-state {
text-align: center;
padding: 40px 20px;
color: var(--ac-slate);
}
.ac-empty-state .ac-empty-icon {
font-size: 40px;
margin-bottom: 12px;
opacity: 0.5;
}
.ac-empty-state p {
color: var(--ac-slate) !important;
font-size: 14px;
max-width: 360px;
margin: 0 auto;
}
/* ==========================================================================
ASTRA — OVERRIDES (misc components)
========================================================================== */
/* Breadcrumbs */
.ast-breadcrumbs,
.ast-breadcrumbs a {
color: var(--ac-slate) !important;
font-size: 12px;
}
.ast-breadcrumbs a:hover {
color: var(--ac-periwinkle) !important;
}
/* Pagination */
.page-numbers,
.nav-links a {
color: var(--ac-white) !important;
background-color: var(--ac-deep-navy) !important;
border: 1px solid rgba(104, 105, 255, 0.2) !important;
border-radius: 6px !important;
padding: 6px 12px !important;
font-weight: 500;
}
.page-numbers.current,
.page-numbers:hover,
.nav-links a:hover {
background: var(--ac-gradient) !important;
border-color: transparent !important;
color: var(--ac-white) !important;
}
/* Tables (generic) */
table {
color: var(--ac-white) !important;
}
thead th {
background-color: var(--ac-deep-navy) !important;
color: var(--ac-slate) !important;
border-bottom: 1px solid rgba(104, 105, 255, 0.2) !important;
}
tbody tr:nth-child(even) {
background-color: rgba(2, 2, 45, 0.6) !important;
}
tbody td {
border-bottom: 1px solid rgba(104, 105, 255, 0.08) !important;
}
/* Notices / alerts */
.notice,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
background-color: var(--ac-deep-navy) !important;
border-left: 4px solid var(--ac-periwinkle) !important;
color: var(--ac-white) !important;
}
/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ac-space-navy); }
::-webkit-scrollbar-thumb { background: rgba(104, 105, 255, 0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ac-periwinkle); }
/* ==========================================================================
LOGIN / REGISTER PAGE (.ac-auth-page)
========================================================================== */
/* Hide Astra header/footer on the login page so it's a clean full-screen form. */
.page-id-login #masthead,
.page-id-login .site-header,
.page-id-login #colophon,
.page-id-login .site-footer,
body.page-template-default .page-id-login #masthead {
display: none !important;
}
.ac-auth-page {
min-height: 100vh;
background-color: var(--ac-space-navy);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
}
.ac-auth-container {
width: 100%;
max-width: 480px;
background-color: var(--ac-deep-navy);
border: 1px solid rgba(104, 105, 255, 0.2);
border-radius: 16px;
padding: 40px 36px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* Brand header above the form */
.ac-auth-brand {
text-align: center;
margin-bottom: 28px;
}
.ac-auth-logo {
margin-bottom: 8px;
}
.ac-logo-img {
max-height: 48px;
width: auto;
}
.ac-logo-text {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 800;
background: var(--ac-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ac-auth-tagline {
color: var(--ac-slate) !important;
font-size: 13px;
font-weight: 500;
margin: 0;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Tab switcher */
.ac-auth-tabs {
display: flex;
gap: 0;
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(104, 105, 255, 0.2);
border-radius: 10px;
padding: 4px;
margin-bottom: 24px;
}
.ac-tab-btn {
flex: 1;
background: transparent !important;
border: none !important;
border-radius: 7px !important;
color: var(--ac-slate) !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 9px 16px !important;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease !important;
}
.ac-tab-btn.active {
background: var(--ac-gradient) !important;
color: var(--ac-white) !important;
box-shadow: 0 2px 8px rgba(104, 105, 255, 0.3);
}
.ac-tab-btn:hover:not(.active) {
color: var(--ac-white) !important;
background-color: rgba(104, 105, 255, 0.08) !important;
transform: none !important;
}
/* Error / notice banner */
.ac-auth-notice {
margin-bottom: 20px;
}
.ac-form-error {
background-color: rgba(255, 77, 77, 0.12);
border: 1px solid rgba(255, 77, 77, 0.4);
border-radius: 8px;
color: #FF8080 !important;
font-size: 13px;
padding: 10px 14px;
}
.ac-form-error a {
color: var(--ac-periwinkle) !important;
}
.ac-error-icon {
margin-right: 4px;
}
/* Form panel */
.ac-tab-panel {
animation: ac-fade-in 0.2s ease;
}
@keyframes ac-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ac-form-header {
margin-bottom: 24px;
}
.ac-form-title {
font-size: 20px !important;
font-weight: 700 !important;
color: var(--ac-white) !important;
margin: 0 0 4px !important;
padding: 0 !important;
border: none !important;
}
.ac-form-subtitle {
color: var(--ac-slate) !important;
font-size: 13px !important;
margin: 0 !important;
}
/* Form layout */
.ac-form-row--half {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.ac-form-group {
margin-bottom: 16px;
}
.ac-form-group label {
font-size: 13px;
font-weight: 600;
color: var(--ac-white) !important;
margin-bottom: 6px;
}
.ac-required {
color: var(--ac-magenta);
}
/* Password field with toggle */
.ac-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.ac-input-wrap input {
flex: 1;
padding-right: 44px !important;
}
.ac-toggle-password {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
background: transparent !important;
border: none !important;
border-radius: 0 8px 8px 0 !important;
padding: 0 !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--ac-slate);
font-size: 14px;
opacity: 0.7;
transform: none !important;
}
.ac-toggle-password:hover {
opacity: 1;
transform: none !important;
}
/* Checkbox row */
.ac-form-group--checkbox label.ac-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 400;
color: var(--ac-slate) !important;
cursor: pointer;
font-size: 13px;
}
.ac-form-group--checkbox input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
flex-shrink: 0;
accent-color: var(--ac-periwinkle);
padding: 0 !important;
}
/* Submit button */
.ac-submit-btn {
width: 100%;
background: var(--ac-gradient) !important;
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
border: none !important;
border-radius: 10px !important;
padding: 14px 24px !important;
cursor: pointer;
transition: opacity 0.2s ease !important;
margin-top: 8px;
letter-spacing: 0.01em;
}
.ac-submit-btn:hover {
opacity: 0.88 !important;
transform: none !important;
}
/* Inline field errors (JS-added) */
.ac-inline-error {
display: block;
font-size: 12px;
color: #FF8080;
margin-top: 4px;
}
/* Switch tab link */
.ac-auth-switch {
text-align: center;
margin-top: 20px;
margin-bottom: 0;
color: var(--ac-slate) !important;
font-size: 13px;
}
.ac-auth-switch a,
.ac-switch-tab {
color: var(--ac-periwinkle) !important;
font-weight: 600;
}
.ac-auth-switch a:hover,
.ac-switch-tab:hover {
color: var(--ac-magenta) !important;
}
/* ==========================================================================
LEADERBOARD PAGE (.ac-leaderboard-page)
========================================================================== */
.ac-leaderboard-page {
max-width: 1100px;
margin: 0 auto;
padding: 32px 20px 60px;
}
/* Page header */
.ac-lb-page-header {
margin-bottom: 32px;
text-align: center;
}
.ac-lb-page-title {
font-size: 32px !important;
font-weight: 800 !important;
color: var(--ac-white) !important;
margin: 0 0 8px !important;
background: var(--ac-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ac-lb-page-subtitle {
color: var(--ac-slate) !important;
font-size: 15px !important;
margin: 0 !important;
}
/* ---- Category tab bar ---- */
.ac-lb-tabs {
display: flex;
gap: 6px;
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(104, 105, 255, 0.2);
border-radius: 12px;
padding: 6px;
margin-bottom: 28px;
overflow-x: auto;
scrollbar-width: none;
}
.ac-lb-tabs::-webkit-scrollbar { display: none; }
.ac-lb-tab {
flex: 1;
min-width: 110px;
background: transparent !important;
border: none !important;
border-radius: 8px !important;
color: var(--ac-slate) !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 10px 14px !important;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease !important;
}
.ac-lb-tab.active {
background: var(--ac-gradient) !important;
color: var(--ac-white) !important;
box-shadow: 0 2px 12px rgba(104, 105, 255, 0.35);
}
.ac-lb-tab:hover:not(.active) {
background-color: rgba(104, 105, 255, 0.1) !important;
color: var(--ac-white) !important;
transform: none !important;
}
/* ---- Category panel ---- */
.ac-lb-category {
animation: ac-fade-in 0.2s ease;
}
/* ---- Two-board grid ---- */
.ac-lb-boards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* ---- Individual board card ---- */
.ac-lb-board {
background-color: var(--ac-deep-navy);
border: 1px solid rgba(104, 105, 255, 0.18);
border-radius: 14px;
padding: 24px;
overflow: hidden;
}
.ac-lb-board-header {
margin-bottom: 18px;
}
.ac-lb-board-title {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--ac-white) !important;
margin: 0 0 4px !important;
padding: 0 !important;
border: none !important;
}
.ac-lb-board-subtitle {
color: var(--ac-slate) !important;
font-size: 12px !important;
margin: 0 !important;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ac-lb-phase-note {
color: var(--ac-amber) !important;
font-size: 11px !important;
margin: 6px 0 0 !important;
opacity: 0.8;
}
/* ---- Leaderboard table (extends base .ac-leaderboard-table) ---- */
.ac-leaderboard-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 3px;
}
.ac-leaderboard-table thead th {
color: var(--ac-slate);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 6px 8px;
text-align: left;
border-bottom: 1px solid rgba(104, 105, 255, 0.15);
white-space: nowrap;
}
.ac-leaderboard-table thead th.ac-col-score,
.ac-leaderboard-table thead th.ac-col-rank {
text-align: right;
}
.ac-leaderboard-table thead th.ac-col-move {
text-align: center;
width: 48px;
}
.ac-leaderboard-table tbody tr {
background-color: rgba(255, 255, 255, 0.02);
border-radius: 6px;
transition: background-color 0.15s ease;
}
.ac-leaderboard-table tbody tr:hover {
background-color: rgba(104, 105, 255, 0.07);
}
.ac-leaderboard-table tbody td {
padding: 9px 8px;
color: var(--ac-white);
font-size: 13px;
vertical-align: middle;
border-bottom: 1px solid rgba(104, 105, 255, 0.06);
}
/* Top 3 — gold/silver/bronze row highlight */
.ac-lb-row.ac-rank-1 { background-color: rgba(255, 215, 0, 0.04) !important; }
.ac-lb-row.ac-rank-2 { background-color: rgba(192, 192, 192, 0.04) !important; }
.ac-lb-row.ac-rank-3 { background-color: rgba(205, 127, 50, 0.04) !important; }
/* Column widths */
.ac-col-rank { width: 40px; text-align: right; }
.ac-col-member { /* fluid */ }
.ac-col-badge { width: 80px; }
.ac-col-score { width: 90px; text-align: right; font-weight: 700; color: var(--ac-lime); }
.ac-col-move { width: 48px; text-align: center; }
/* Medal emoji */
.ac-medal {
font-size: 18px;
display: block;
text-align: center;
line-height: 1;
}
.ac-rank-num-plain {
font-weight: 700;
color: var(--ac-slate);
font-size: 13px;
}
/* Member cell */
.ac-lb-member-link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none !important;
color: var(--ac-white) !important;
}
.ac-lb-member-link:hover .ac-lb-name {
color: var(--ac-periwinkle) !important;
}
.ac-lb-avatar {
flex-shrink: 0;
}
.ac-lb-avatar-img {
border-radius: 50% !important;
display: block;
}
.ac-lb-name {
font-weight: 600;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 140px;
transition: color 0.15s ease;
}
/* Badge in leaderboard — smaller variant */
.ac-lb-board .ac-badge {
font-size: 10px !important;
padding: 2px 7px !important;
}
/* Rank movement indicators */
.ac-rank-up { color: var(--ac-lime); font-size: 11px; font-weight: 700; }
.ac-rank-down { color: #FF6B6B; font-size: 11px; font-weight: 700; }
.ac-rank-new { color: var(--ac-magenta); font-size: 11px; font-weight: 700; }
.ac-rank-same { color: var(--ac-slate); font-size: 11px; }
/* Current user row (outside top 10) */
.ac-current-user-row {
background-color: rgba(104, 105, 255, 0.1) !important;
outline: 1px solid rgba(104, 105, 255, 0.3);
outline-offset: -1px;
}
/* Your Rank — below the table */
.ac-lb-your-rank {
margin-top: 8px;
padding-top: 4px;
}
.ac-lb-your-rank-divider {
text-align: center;
color: var(--ac-slate);
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 6px;
}
.ac-lb-your-rank-row {
display: flex;
align-items: center;
gap: 10px;
background-color: rgba(104, 105, 255, 0.08);
border: 1px solid rgba(104, 105, 255, 0.25);
border-radius: 8px;
padding: 10px 14px;
font-size: 13px;
}
.ac-lb-your-rank-label {
color: var(--ac-slate);
flex: 1;
}
.ac-lb-your-rank-num {
font-weight: 800;
color: var(--ac-periwinkle);
font-size: 15px;
}
.ac-lb-your-rank-score {
color: var(--ac-lime);
font-weight: 700;
}
/* Loading state */
.ac-lb-loading {
text-align: center;
padding: 40px 20px;
color: var(--ac-slate);
font-size: 14px;
animation: ac-pulse 1.5s ease infinite;
}
@keyframes ac-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ==========================================================================
GAMIPRESS — badge display overrides
GamiPress outputs .gamipress-achievement-item wrappers on profiles and
in shortcode blocks. We restyle them to match AC brand conventions.
========================================================================== */
/* Achievement list container */
.gamipress-achievements-list,
.gamipress-achievements-grid,
.gamipress-achievement-items {
display: flex;
flex-wrap: wrap;
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
/* Individual achievement card */
.gamipress-achievement-item,
.gamipress-achievements-list .gamipress-achievement {
background-color: var(--ac-deep-navy) !important;
border: 1px solid rgba(104, 105, 255, 0.2) !important;
border-radius: 25px !important;
padding: 16px !important;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
min-width: 100px;
}
.gamipress-achievement-item:hover {
border-color: rgba(104, 105, 255, 0.45) !important;
box-shadow: 0 4px 20px rgba(104, 105, 255, 0.15) !important;
}
/* Badge thumbnail / image */
.gamipress-achievement-item img,
.gamipress-achievement-thumbnail {
border-radius: 50%;
width: 64px !important;
height: 64px !important;
object-fit: cover;
}
/* Badge name */
.gamipress-achievement-item .gamipress-achievement-title,
.gamipress-achievement-title {
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
margin-top: 8px !important;
margin-bottom: 0 !important;
}
/* Earned / not-earned states */
.gamipress-achievement-item.gamipress-achievement-earned {
border-color: rgba(104, 105, 255, 0.5) !important;
}
.gamipress-achievement-item.gamipress-achievement-not-earned {
opacity: 0.45;
filter: grayscale(0.7);
}
/* Earned badge glow (active badge) */
.gamipress-achievement-item.ac-badge-active {
border-color: var(--ac-periwinkle) !important;
box-shadow: 0 0 16px rgba(104, 105, 255, 0.4) !important;
}
/* Per-badge border colours matching badge tiers */
.ac-badge-item-bronze { border-color: rgba(205, 127, 50, 0.6) !important; }
.ac-badge-item-silver { border-color: rgba(192, 192, 192, 0.6) !important; }
.ac-badge-item-gold { border-color: rgba(255, 215, 0, 0.6) !important; }
.ac-badge-item-platinum { border-color: rgba(229, 228, 226, 0.6) !important; }
.ac-badge-item-diamond { border-color: rgba(185, 242, 255, 0.6) !important; box-shadow: 0 0 20px rgba(185, 242, 255, 0.25); }
/* GamiPress user-earnings / earners list */
.gamipress-user-earnings,
.gamipress-earners-list {
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
}
.gamipress-earners-list li {
border-bottom: 1px solid rgba(104, 105, 255, 0.1) !important;
padding: 8px 0 !important;
color: var(--ac-white) !important;
}
/* GamiPress congratulations modal / notice */
.gamipress-notification,
.gamipress-achievement-notification {
background-color: var(--ac-deep-navy) !important;
border: 1px solid var(--ac-periwinkle) !important;
border-radius: 25px !important;
color: var(--ac-white) !important;
font-family: 'Inter', sans-serif !important;
box-shadow: 0 8px 40px rgba(104, 105, 255, 0.3) !important;
}
.gamipress-notification-title,
.gamipress-achievement-notification .notification-title {
color: var(--ac-amber) !important;
font-weight: 700 !important;
}
/* GamiPress points display */
.gamipress-points-amount,
.gamipress-user-points {
color: var(--ac-lime) !important;
font-weight: 700 !important;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 768px) {
.ac-stat-card .ac-stat-value {
font-size: 22px;
}
.ac-leaderboard-table tbody td,
.ac-leaderboard-table thead th {
padding: 8px 8px;
font-size: 13px;
}
.ac-affiliate-link-box {
flex-direction: column;
align-items: stretch;
}
.ac-affiliate-link-box .ac-copy-btn {
text-align: center;
}
/* Login page */
.ac-auth-container {
padding: 28px 20px;
}
.ac-form-row--half {
grid-template-columns: 1fr;
gap: 0;
}
/* Leaderboard — stack boards on mobile */
.ac-lb-boards-grid {
grid-template-columns: 1fr;
}
.ac-lb-tab {
font-size: 12px !important;
padding: 8px 10px !important;
min-width: 80px;
}
.ac-lb-name {
max-width: 90px;
}
.ac-col-badge {
display: none; /* Hide badge column on small screens to save space */
}
.ac-lb-page-title {
font-size: 24px !important;
}
}
/* ==========================================================================
LEADERBOARD — Two-Group Tab Layout (v3 — redesigned)
Glass card tab area, segmented time control, pill category tabs,
gradient-border boards, shimmer title, accent bars on board headers.
========================================================================== */
/* --------------------------------------------------------------------------
Page layout
-------------------------------------------------------------------------- */
.ac-leaderboard-page {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 40px 20px;
}
.ac-lb-page-header {
text-align: center;
margin-bottom: 40px;
}
.ac-lb-page-title {
font-size: 2.4rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 8px;
background: linear-gradient(135deg, var(--ac-periwinkle) 0%, var(--ac-magenta) 50%, var(--ac-periwinkle) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: ac-lb-title-shimmer 3s linear infinite;
}
@keyframes ac-lb-title-shimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.ac-lb-page-subtitle {
color: var(--ac-slate);
margin: 0;
}
/* --------------------------------------------------------------------------
Tab groups container — glass card
-------------------------------------------------------------------------- */
.ac-lb-tab-groups {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 32px;
/* Gradient border — matches dashboard cards */
position: relative;
background: var(--ac-deep-navy);
border: none;
border-radius: 25px;
padding: 24px 28px 18px;
}
/* Gradient border via ::before mask */
.ac-lb-tab-groups::before {
content: '';
position: absolute;
inset: 0;
border-radius: 25px;
padding: 2px;
background: linear-gradient(rgba(255,255,255,0.5) 0%, var(--ac-periwinkle) 25%, var(--ac-magenta) 75%, rgba(255,255,255,0.5) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.ac-lb-tab-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.ac-lb-tab-group-label {
font-size: 0.8rem;
font-weight: 700;
color: var(--ac-periwinkle);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 10px;
}
/* Emoji before Time Period label */
.ac-lb-tab-groups > div:first-child .ac-lb-tab-group-label::before {
content: '\1F550\00a0\00a0';
}
/* Emoji before Category label */
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab-group-label::before {
content: '\1F3C6\00a0\00a0';
}
/* --------------------------------------------------------------------------
Base tab styles
-------------------------------------------------------------------------- */
.ac-lb-tab {
border: 2px solid rgba(104, 105, 255, 0.5) !important;
background: rgba(104, 105, 255, 0.04) !important;
color: var(--ac-slate) !important;
padding: 10px 18px !important;
border-radius: 14px !important;
cursor: pointer;
font-family: Inter, sans-serif !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
transition: all 0.25s ease !important;
}
.ac-lb-tab:hover:not(.active) {
color: var(--ac-white) !important;
border-color: rgba(104, 105, 255, 0.75) !important;
background: rgba(104, 105, 255, 0.1) !important;
box-shadow: 0 0 12px rgba(104, 105, 255, 0.15) !important;
}
.ac-lb-tab.active {
background: var(--ac-gradient) !important;
color: var(--ac-white) !important;
font-weight: 700 !important;
border-color: transparent !important;
box-shadow: 0 4px 16px rgba(104, 105, 255, 0.35) !important;
}
/* --------------------------------------------------------------------------
Time Period tabs — 3 equal standalone card buttons
-------------------------------------------------------------------------- */
.ac-lb-tab-groups > div:first-child .ac-lb-tab-group {
display: flex;
flex-wrap: nowrap;
gap: 8px;
margin-bottom: 10px;
}
.ac-lb-tab-groups > div:first-child .ac-lb-tab {
flex: 1 !important;
text-align: center !important;
padding: 12px 14px !important;
}
/* --------------------------------------------------------------------------
Category tabs — 4-col grid, emoji chip buttons, last row centered
-------------------------------------------------------------------------- */
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab {
flex: 0 0 calc(25% - 6px) !important;
text-align: center !important;
font-size: 0.8rem !important;
padding: 10px 8px !important;
}
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab.active {
box-shadow: 0 4px 16px rgba(254, 0, 255, 0.25);
}
/* Category tab emoji icons via ::before */
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab:nth-child(1)::before { content: '\1F4B0\00a0'; }
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab:nth-child(2)::before { content: '\1F48E\00a0'; }
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab:nth-child(3)::before { content: '\1F4C8\00a0'; }
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab:nth-child(4)::before { content: '\2B50\00a0'; }
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab:nth-child(5)::before { content: '\1F525\00a0'; }
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab:nth-child(6)::before { content: '\1F4CB\00a0'; }
.ac-lb-tab-groups > div:nth-child(2) .ac-lb-tab:nth-child(7)::before { content: '\1F451\00a0'; }
/* --------------------------------------------------------------------------
Board panel (full width — not grid)
-------------------------------------------------------------------------- */
.ac-lb-board-panel {
display: block;
}
.ac-lb-board {
position: relative;
background: var(--ac-deep-navy);
border: none;
border-radius: 25px;
padding: 28px;
margin-bottom: 28px;
}
/* Gradient border via ::before mask — matches dashboard cards */
.ac-lb-board::before {
content: '';
position: absolute;
inset: 0;
border-radius: 25px;
padding: 2px;
background: linear-gradient(rgba(255,255,255,0.5) 0%, var(--ac-periwinkle) 25%, var(--ac-magenta) 75%, rgba(255,255,255,0.5) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.ac-lb-board:hover::before {
background: linear-gradient(rgba(255,255,255,0.7) 0%, var(--ac-periwinkle) 25%, var(--ac-magenta) 75%, rgba(255,255,255,0.7) 100%);
}
.ac-lb-board:hover {
box-shadow: 0 8px 32px rgba(104, 105, 255, 0.12);
}
.ac-lb-board-header {
margin-bottom: 20px;
}
.ac-lb-board-title {
color: var(--ac-white);
font-size: 1.3rem;
font-weight: 800;
margin: 0 0 4px;
display: flex;
align-items: center;
gap: 10px;
}
/* Gradient accent bar on board titles */
.ac-lb-board-title::before {
content: '';
display: inline-block;
width: 4px;
height: 22px;
background: var(--ac-gradient);
border-radius: 2px;
flex-shrink: 0;
}
.ac-lb-board-subtitle {
color: var(--ac-slate);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 0 14px;
}
/* --------------------------------------------------------------------------
Leaderboard table
-------------------------------------------------------------------------- */
.ac-leaderboard-table {
width: 100%;
border-collapse: collapse;
}
.ac-leaderboard-table th {
color: var(--ac-slate);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ac-leaderboard-table td {
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
vertical-align: middle;
color: var(--ac-white);
}
.ac-leaderboard-table tr:last-child td {
border-bottom: none;
}
/* --------------------------------------------------------------------------
Top 3 row accents
-------------------------------------------------------------------------- */
.ac-rank-gold td {
background: rgba(236, 152, 33, 0.08);
}
.ac-rank-silver td {
background: rgba(192, 192, 192, 0.06);
}
.ac-rank-bronze td {
background: rgba(205, 127, 50, 0.06);
}
/* --------------------------------------------------------------------------
Current user highlight
-------------------------------------------------------------------------- */
.ac-current-user-row td {
background: rgba(104, 105, 255, 0.1);
font-weight: 600;
}
/* --------------------------------------------------------------------------
Column widths
-------------------------------------------------------------------------- */
.ac-col-rank {
width: 48px;
text-align: center;
}
.ac-col-member {
min-width: 180px;
}
.ac-col-badge {
width: 140px;
}
.ac-col-tier {
width: 110px;
}
.ac-col-score {
width: 120px;
text-align: right;
font-weight: 600;
color: var(--ac-lime);
}
.ac-col-move {
width: 64px;
text-align: center;
}
/* --------------------------------------------------------------------------
Member cell
-------------------------------------------------------------------------- */
.ac-lb-member-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--ac-white);
}
.ac-lb-member-link:hover {
color: var(--ac-periwinkle);
}
.ac-lb-avatar-img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.ac-lb-name {
font-weight: 500;
}
/* --------------------------------------------------------------------------
Badge and tier labels
-------------------------------------------------------------------------- */
.ac-badge {
font-size: 0.8rem;
font-weight: 600;
color: var(--ac-periwinkle);
}
.ac-tier-label {
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 12px;
font-weight: 600;
}
.ac-tier-standard {
background: rgba(104, 105, 255, 0.15);
color: var(--ac-periwinkle);
}
.ac-tier-professional {
background: rgba(236, 152, 33, 0.15);
color: var(--ac-amber);
}
/* --------------------------------------------------------------------------
Movement indicators
-------------------------------------------------------------------------- */
.ac-rank-up {
color: var(--ac-lime);
font-weight: 700;
font-size: 0.85rem;
}
.ac-rank-down {
color: #ff4d6d;
font-weight: 700;
font-size: 0.85rem;
}
.ac-rank-new {
color: var(--ac-periwinkle);
font-weight: 700;
}
.ac-rank-same {
color: var(--ac-slate);
}
.ac-medal {
font-size: 1.2rem;
}
/* --------------------------------------------------------------------------
"Your Rank" section
-------------------------------------------------------------------------- */
.ac-lb-your-rank {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ac-lb-your-rank-divider {
text-align: center;
color: var(--ac-slate);
letter-spacing: 6px;
margin-bottom: 12px;
}
.ac-lb-your-rank-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: rgba(104, 105, 255, 0.08);
border-radius: 8px;
}
.ac-lb-your-rank-label {
color: var(--ac-slate);
font-size: 0.85rem;
}
.ac-lb-your-rank-num {
color: var(--ac-periwinkle);
font-weight: 700;
}
.ac-lb-your-rank-score {
color: var(--ac-lime);
font-weight: 600;
margin-left: auto;
}
/* --------------------------------------------------------------------------
Empty state
-------------------------------------------------------------------------- */
.ac-empty-state {
text-align: center;
padding: 48px 24px;
color: var(--ac-slate);
font-size: 0.95rem;
}
.ac-empty-icon {
font-size: 3rem;
margin-bottom: 12px;
opacity: 0.4;
}
/* --------------------------------------------------------------------------
Loading state (applied by JS during AJAX fetch)
-------------------------------------------------------------------------- */
.ac-lb-loading {
text-align: center;
padding: 40px 20px;
color: var(--ac-slate);
font-size: 0.9rem;
}
/* --------------------------------------------------------------------------
Responsive — 768 px breakpoint
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.ac-lb-tab {
padding: 6px 12px;
font-size: 0.8rem;
}
.ac-lb-tab-groups {
padding: 16px 16px 10px;
border-radius: 16px;
}
.ac-lb-tab-groups > div:first-child .ac-lb-tab-group {
flex-wrap: wrap;
}
.ac-lb-board {
border-radius: 18px;
padding: 20px;
}
.ac-lb-board::before {
border-radius: 18px;
}
.ac-leaderboard-table .ac-col-tier {
display: none;
}
.ac-leaderboard-table .ac-col-badge {
display: none;
}
}
/* ==========================================================================
TRAINING HUB — ac-learndash.php
========================================================================== */
/* Page layout */
.ac-training-page {
max-width: 1200px;
margin: 0 auto;
padding: 32px 16px;
}
.ac-training-header {
text-align: center;
margin-bottom: 40px;
}
.ac-training-title {
font-size: 2rem;
font-weight: 700;
color: var(--ac-white);
margin-bottom: 8px;
}
.ac-training-subtitle {
color: var(--ac-slate);
font-size: 1rem;
margin-bottom: 12px;
}
.ac-training-tier-notice {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ac-deep-navy);
border: 1px solid var(--ac-periwinkle);
border-radius: 6px;
padding: 8px 16px;
font-size: 0.875rem;
color: var(--ac-white);
}
/* Category sections */
.ac-training-category {
margin-bottom: 48px;
}
.ac-training-cat-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--ac-amber);
border-bottom: 2px solid var(--ac-periwinkle);
padding-bottom: 8px;
margin-bottom: 20px;
}
/* Course grid */
.ac-training-course-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
/* Course card */
.ac-course-card {
background: var(--ac-deep-navy);
border: 1px solid rgba(104, 105, 255, 0.3);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s, box-shadow 0.2s;
}
.ac-course-card:hover {
border-color: var(--ac-periwinkle);
box-shadow: 0 4px 20px rgba(104, 105, 255, 0.2);
}
.ac-course-card.ac-course-locked {
border-color: rgba(254, 0, 255, 0.25);
opacity: 0.85;
}
.ac-course-card.ac-course-completed {
border-color: rgba(30, 255, 0, 0.4);
}
/* Thumbnail */
.ac-course-thumb {
position: relative;
width: 100%;
padding-top: 52%; /* 16:8.5 aspect ratio */
background: rgba(104, 105, 255, 0.1);
overflow: hidden;
}
.ac-course-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ac-course-thumb-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
}
.ac-course-lock-overlay {
position: absolute;
inset: 0;
background: rgba(3, 5, 32, 0.75);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--ac-white);
}
.ac-course-lock-icon {
font-size: 1.75rem;
}
.ac-course-lock-label {
font-size: 0.75rem;
font-weight: 600;
background: var(--ac-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ac-course-complete-badge {
position: absolute;
top: 10px;
right: 10px;
background: var(--ac-lime);
color: #030520;
font-size: 0.7rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 20px;
}
/* Card body */
.ac-course-body {
padding: 16px;
flex: 1;
}
.ac-course-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 6px;
}
.ac-course-title a {
color: var(--ac-white);
text-decoration: none;
}
.ac-course-title a:hover {
color: var(--ac-periwinkle);
}
.ac-course-excerpt {
font-size: 0.85rem;
color: var(--ac-slate);
line-height: 1.5;
margin-bottom: 10px;
}
.ac-course-tier-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
margin-bottom: 8px;
}
.ac-course-tier-badge.ac-tier-professional {
background: rgba(236, 152, 33, 0.2);
color: var(--ac-amber);
border: 1px solid var(--ac-amber);
}
/* Progress bar */
.ac-course-progress {
height: 6px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
overflow: hidden;
margin: 8px 0 4px;
}
.ac-course-progress-bar {
height: 100%;
background: var(--ac-gradient);
border-radius: 3px;
transition: width 0.3s;
}
.ac-course-progress-label {
font-size: 0.75rem;
color: var(--ac-slate);
}
/* Card footer */
.ac-course-footer {
padding: 12px 16px;
border-top: 1px solid rgba(104, 105, 255, 0.15);
}
.ac-course-btn {
display: inline-block;
padding: 8px 18px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.2s;
}
.ac-course-btn:hover {
opacity: 0.85;
}
.ac-btn-start,
.ac-btn-continue {
background: var(--ac-gradient);
color: var(--ac-white);
}
.ac-btn-review {
background: rgba(104, 105, 255, 0.2);
color: var(--ac-periwinkle);
border: 1px solid var(--ac-periwinkle);
}
.ac-btn-locked {
background: transparent;
color: var(--ac-slate);
border: 1px solid rgba(130, 143, 160, 0.4);
cursor: default;
}
/* Responsive */
@media (max-width: 768px) {
.ac-training-course-grid {
grid-template-columns: 1fr;
}
.ac-training-title {
font-size: 1.5rem;
}
}
/* ==========================================================================
MEMBER DASHBOARD — ac-dashboard.php
========================================================================== */
/* Page container */
.ac-dashboard-page {
max-width: 1200px;
margin: 0 auto;
padding: 32px 16px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Base widget card */
.ac-dash-widget {
background: var(--ac-deep-navy);
border: 1px solid rgba(104, 105, 255, 0.2);
border-radius: 12px;
padding: 24px;
}
.ac-widget-title {
font-size: 1rem;
font-weight: 700;
color: var(--ac-white);
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ac-widget-sub {
font-size: 0.85rem;
color: var(--ac-slate);
margin: -8px 0 12px;
}
.ac-dash-empty {
color: var(--ac-slate);
font-size: 0.9rem;
}
/* 2-column grid for widget pairs */
.ac-dash-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* --------------------------------------------------------------------------
Widget 1 — Welcome Panel
-------------------------------------------------------------------------- */
.ac-dash-welcome {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.ac-welcome-left {
flex: 1 1 300px;
}
.ac-welcome-right {
flex: 0 0 280px;
}
.ac-welcome-heading {
font-size: 1.6rem;
font-weight: 700;
color: var(--ac-white);
margin: 0 0 12px;
}
.ac-welcome-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.ac-welcome-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255,255,255,0.07);
border: 1px solid var(--badge-color, var(--ac-periwinkle));
color: var(--badge-color, var(--ac-periwinkle));
font-weight: 600;
font-size: 0.875rem;
padding: 4px 12px;
border-radius: 20px;
}
.ac-welcome-join {
font-size: 0.8rem;
color: var(--ac-slate);
}
.ac-zero-stats-notice {
background: rgba(104, 105, 255, 0.1);
border-left: 3px solid var(--ac-periwinkle);
padding: 10px 14px;
border-radius: 0 6px 6px 0;
font-size: 0.875rem;
color: var(--ac-slate);
}
/* Onboarding progress block (welcome panel right column) */
.ac-onboarding-block {
background: rgba(104, 105, 255, 0.07);
border: 1px solid rgba(104, 105, 255, 0.2);
border-radius: 8px;
padding: 16px;
}
.ac-onboarding-label {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
font-weight: 600;
color: var(--ac-white);
margin-bottom: 8px;
}
.ac-onboarding-pct {
color: var(--ac-periwinkle);
}
.ac-onboarding-bar-track {
height: 8px;
background: rgba(255,255,255,0.1);
border-radius: 4px;
overflow: hidden;
margin-bottom: 6px;
}
.ac-onboarding-bar-fill {
height: 100%;
background: var(--ac-gradient);
border-radius: 4px;
transition: width 0.4s ease;
}
.ac-onboarding-sub {
font-size: 0.78rem;
color: var(--ac-slate);
margin: 0;
}
.ac-onboarding-sub a {
color: var(--ac-periwinkle);
text-decoration: none;
}
/* --------------------------------------------------------------------------
Widget 2 — Stats Strip
-------------------------------------------------------------------------- */
.ac-stats-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.ac-stat-card {
background: var(--ac-deep-navy);
border: 1px solid rgba(104, 105, 255, 0.2);
border-radius: 10px;
padding: 20px 16px;
text-align: center;
}
.ac-stat-icon {
font-size: 1.4rem;
margin-bottom: 6px;
}
.ac-stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--ac-white);
line-height: 1.1;
}
.ac-stat-value.ac-stat-earnings {
color: var(--ac-lime);
}
.ac-stat-label {
font-size: 0.75rem;
color: var(--ac-slate);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* --------------------------------------------------------------------------
Widget 3 — Streak
-------------------------------------------------------------------------- */
.ac-streak-atrisk {
background: rgba(236, 152, 33, 0.15);
border: 1px solid var(--ac-amber);
color: var(--ac-amber);
border-radius: 6px;
padding: 10px 14px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 14px;
}
.ac-streak-display {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 10px;
}
.ac-streak-count {
font-size: 3rem;
font-weight: 700;
color: var(--ac-white);
line-height: 1;
}
.ac-streak-unit {
font-size: 1rem;
color: var(--ac-slate);
}
.ac-streak-zero {
color: var(--ac-slate);
font-size: 0.9rem;
font-style: italic;
}
.ac-streak-achievement {
margin-top: 10px;
padding: 8px 12px;
background: rgba(30, 255, 0, 0.1);
border: 1px solid rgba(30, 255, 0, 0.3);
border-radius: 6px;
}
.ac-streak-badge-name {
display: block;
font-weight: 600;
color: var(--ac-lime);
font-size: 0.875rem;
}
.ac-streak-badge-sub {
font-size: 0.75rem;
color: var(--ac-slate);
}
.ac-streak-next {
font-size: 0.78rem;
color: var(--ac-slate);
margin-top: 8px;
}
/* --------------------------------------------------------------------------
Widget 4 — Leaderboard Preview
-------------------------------------------------------------------------- */
.ac-lb-preview-list {
list-style: none;
margin: 0 0 10px;
padding: 0;
}
.ac-lb-preview-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: 6px;
font-size: 0.875rem;
color: var(--ac-white);
transition: background 0.15s;
}
.ac-lb-preview-row.ac-dash-lb-me {
background: rgba(104, 105, 255, 0.15);
border: 1px solid rgba(104, 105, 255, 0.35);
font-weight: 600;
}
.ac-lb-prev-rank {
min-width: 28px;
font-weight: 700;
color: var(--ac-amber);
}
.ac-lb-prev-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ac-lb-prev-badge {
font-size: 0.95rem;
}
.ac-lb-prev-score {
color: var(--ac-lime);
font-weight: 700;
white-space: nowrap;
}
.ac-lb-preview-your-rank {
font-size: 0.85rem;
color: var(--ac-slate);
padding: 6px 10px;
margin-bottom: 8px;
}
.ac-lb-prev-rank-divider {
margin-right: 8px;
opacity: 0.4;
}
.ac-lb-preview-link {
display: inline-block;
font-size: 0.85rem;
color: var(--ac-periwinkle);
text-decoration: none;
font-weight: 600;
margin-top: 4px;
}
.ac-lb-preview-link:hover {
text-decoration: underline;
}
/* --------------------------------------------------------------------------
Widget 5 — Badge Trophy Case
-------------------------------------------------------------------------- */
.ac-trophy-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.ac-badge-slot {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(104, 105, 255, 0.2);
border-radius: 10px;
padding: 16px 10px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.ac-badge-slot.ac-badge-earned {
border-color: rgba(104, 105, 255, 0.5);
background: rgba(104, 105, 255, 0.07);
}
.ac-badge-slot.ac-badge-active {
border-color: var(--badge-color, var(--ac-periwinkle));
box-shadow: 0 0 12px var(--badge-color, var(--ac-periwinkle)),
0 0 24px rgba(104, 105, 255, 0.2);
}
.ac-badge-slot.ac-badge-locked {
opacity: 0.45;
filter: grayscale(0.6);
}
.ac-badge-slot-emoji {
font-size: 1.75rem;
line-height: 1;
position: relative;
}
.ac-badge-lock {
position: absolute;
bottom: -4px;
right: -8px;
font-size: 0.7rem;
}
.ac-badge-slot-name {
font-size: 0.75rem;
font-weight: 600;
color: var(--ac-white);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ac-badge-slot-status {
font-size: 0.7rem;
color: var(--ac-lime);
font-weight: 600;
}
.ac-badge-slot-threshold {
font-size: 0.7rem;
color: var(--ac-slate);
}
.ac-badge-slot-btn {
font-size: 0.7rem;
font-weight: 600;
background: rgba(104, 105, 255, 0.2);
color: var(--ac-periwinkle);
border: 1px solid var(--ac-periwinkle);
border-radius: 4px;
padding: 3px 8px;
cursor: pointer;
transition: background 0.15s;
}
.ac-badge-slot-btn:hover {
background: rgba(104, 105, 255, 0.35);
}
.ac-badge-slot-btn:disabled {
opacity: 0.5;
cursor: default;
}
/* --------------------------------------------------------------------------
Widget 6 — Activity Feed Preview
-------------------------------------------------------------------------- */
.ac-feed-preview-list {
list-style: none;
margin: 0;
padding: 0;
}
.ac-feed-prev-item {
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ac-feed-prev-item:last-child {
border-bottom: none;
}
.ac-feed-prev-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.ac-feed-prev-avatar {
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
flex-shrink: 0;
}
.ac-feed-prev-author {
font-weight: 600;
font-size: 0.85rem;
color: var(--ac-white);
}
.ac-feed-prev-time {
font-size: 0.75rem;
color: var(--ac-slate);
margin-left: auto;
white-space: nowrap;
}
.ac-feed-prev-body {
font-size: 0.82rem;
color: var(--ac-slate);
margin: 0;
padding-left: 36px;
}
.ac-feed-prev-more {
display: inline-block;
margin-top: 10px;
font-size: 0.85rem;
color: var(--ac-periwinkle);
text-decoration: none;
font-weight: 600;
}
.ac-feed-prev-more:hover {
text-decoration: underline;
}
/* --------------------------------------------------------------------------
Widget 7 — Affiliate Link
-------------------------------------------------------------------------- */
.ac-affiliate-link-row {
display: flex;
gap: 8px;
}
.ac-affiliate-link-input {
flex: 1;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(104, 105, 255, 0.3);
border-radius: 6px;
color: var(--ac-white);
font-size: 0.82rem;
padding: 8px 12px;
font-family: Inter, monospace;
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ac-affiliate-copy-btn {
background: var(--ac-gradient);
color: var(--ac-white);
border: none;
border-radius: 6px;
padding: 8px 16px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.2s;
}
.ac-affiliate-copy-btn:hover {
opacity: 0.85;
}
/* --------------------------------------------------------------------------
Widget 8 — Milestone Progress
-------------------------------------------------------------------------- */
.ac-milestone-label {
font-size: 0.9rem;
color: var(--ac-white);
margin-bottom: 10px;
}
.ac-milestone-bar-track {
height: 10px;
background: rgba(255,255,255,0.08);
border-radius: 5px;
overflow: hidden;
margin-bottom: 6px;
}
.ac-milestone-bar-fill {
height: 100%;
background: var(--ac-gradient);
border-radius: 5px;
transition: width 0.4s ease;
}
.ac-milestone-pct {
font-size: 0.78rem;
color: var(--ac-slate);
margin: 0;
}
.ac-milestone-complete {
font-size: 1rem;
font-weight: 600;
color: var(--ac-lime);
}
/* --------------------------------------------------------------------------
Widget 9 — Quick Links
-------------------------------------------------------------------------- */
.ac-dash-quick-links {
padding: 16px 24px;
}
.ac-quick-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.ac-quick-link-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(104, 105, 255, 0.1);
border: 1px solid rgba(104, 105, 255, 0.3);
color: var(--ac-white);
text-decoration: none;
padding: 10px 24px;
border-radius: 30px;
font-size: 0.9rem;
font-weight: 600;
transition: background 0.2s, border-color 0.2s;
}
.ac-quick-link-pill:hover {
background: rgba(104, 105, 255, 0.2);
border-color: var(--ac-periwinkle);
color: var(--ac-white);
}
/* --------------------------------------------------------------------------
Dashboard responsive — 768 px
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.ac-dash-grid {
grid-template-columns: 1fr;
}
.ac-stats-strip {
grid-template-columns: 1fr 1fr;
}
.ac-trophy-grid {
gap: 8px;
}
.ac-badge-slot {
padding: 10px 6px;
}
.ac-badge-slot-emoji {
font-size: 1.4rem;
}
.ac-dash-welcome {
flex-direction: column;
}
.ac-welcome-right {
flex: 1 1 100%;
}
.ac-welcome-heading {
font-size: 1.3rem;
}
.ac-affiliate-link-row {
flex-direction: column;
}
.ac-quick-link-pill {
flex: 1 1 calc(50% - 6px);
justify-content: center;
}
}
@media (max-width: 480px) {
.ac-trophy-grid {
grid-template-columns: repeat(2, 1fr);
}
.ac-stats-strip {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
GLOBAL MOBILE RESPONSIVE — 768px
Covers navigation, BuddyBoss ReadyLaunch overrides, and layout containers.
========================================================================== */
@media (max-width: 768px) {
/* ── Navigation ──────────────────────────────────────────────────────── */
.ac-nav-bar {
flex-wrap: wrap !important;
gap: 6px !important;
padding: 8px 12px !important;
}
.ac-nav-links {
order: 3 !important;
width: 100% !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 4px !important;
}
.ac-nav-link {
font-size: 0.78rem !important;
padding: 6px 10px !important;
}
.ac-nav-user {
order: 2 !important;
margin-left: auto !important;
}
/* ── Auth / Login page ───────────────────────────────────────────────── */
.ac-auth-container {
padding: 24px 16px !important;
margin: 16px !important;
}
.ac-form-row--half {
grid-template-columns: 1fr !important;
}
.ac-auth-tabs {
flex-direction: row !important;
}
/* ── Leaderboard ─────────────────────────────────────────────────────── */
.ac-leaderboard-page {
padding: 12px !important;
}
.ac-lb-tab-nav {
gap: 4px !important;
flex-wrap: wrap !important;
}
.ac-lb-tab-btn {
font-size: 0.75rem !important;
padding: 6px 10px !important;
flex: 1 1 auto !important;
text-align: center !important;
}
.ac-lb-table th,
.ac-lb-table td {
padding: 8px 6px !important;
font-size: 0.78rem !important;
}
/* Hide less-critical columns on small screens */
.ac-lb-col-tier,
.ac-lb-col-change {
display: none !important;
}
/* ── BuddyBoss ReadyLaunch layout overrides ──────────────────────────── */
.bb-rl-header-inner,
.bb-rl-site-header .bb-rl-header-inner {
padding: 0 12px !important;
}
.bb-rl-wrap,
#bb-rl-wrap {
padding: 0 12px !important;
}
/* BuddyBoss member directory grid */
.members-list.grid .list-wrap {
grid-template-columns: repeat(2, 1fr) !important;
}
/* BuddyBoss profile */
#item-header {
flex-direction: column !important;
}
#item-header-avatar {
margin: 0 auto 12px !important;
}
/* Groups grid */
.groups-list.grid .list-wrap {
grid-template-columns: repeat(1, 1fr) !important;
}
/* ── General container ───────────────────────────────────────────────── */
.entry-content,
.ast-container {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* ==========================================================================
GLOBAL MOBILE RESPONSIVE — 480px (small phones)
========================================================================== */
@media (max-width: 480px) {
.ac-nav-links {
gap: 2px !important;
}
.ac-nav-link {
font-size: 0.72rem !important;
padding: 5px 8px !important;
}
/* BuddyBoss member directory — single column */
.members-list.grid .list-wrap {
grid-template-columns: 1fr !important;
}
/* Leaderboard — show only essential columns */
.ac-lb-table th,
.ac-lb-table td {
font-size: 0.72rem !important;
padding: 6px 4px !important;
}
.ac-lb-col-badge {
display: none !important;
}
/* Auth form */
.ac-auth-container {
padding: 20px 12px !important;
margin: 8px !important;
}
.ac-submit-btn {
font-size: 0.9rem !important;
padding: 12px !important;
}
}
/* ==========================================================================
TOUCH TARGETS — minimum 44×44px for interactive elements on mobile
========================================================================== */
@media (max-width: 768px) {
.ac-tab-btn,
.ac-lb-tab-btn,
.ac-submit-btn,
.ac-profile-copy-btn,
.ac-affiliate-copy-btn,
.ac-quick-link-pill,
.ac-badge-activate-btn {
min-height: 44px !important;
min-width: 44px !important;
}
/* Increase checkbox + label tap area */
.ac-checkbox-label {
padding: 8px 0 !important;
cursor: pointer !important;
}
}
/* ==========================================================================
PRINT — hide decorative elements, show readable content only
========================================================================== */
@media print {
.ac-nav-bar,
.ac-quick-links,
.ac-dash-quick-links,
.ac-affiliate-link-widget,
.ac-profile-affiliate-link {
display: none !important;
}
body,
html {
background: #fff !important;
color: #000 !important;
}
}
/* ==========================================================================
AC SITE HEADER — fixed 56px bar, visible for logged-in members only
Controlled by body.ac-has-header (added by ac_header_body_class() in ac-header.php)
========================================================================== */
/* ── Bar shell ────────────────────────────────────────────────────────────── */
.ac-site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 56px !important;
z-index: 99990 !important; /* above BuddyBoss (~9999); below WP admin bar (99999) */
background: var(--ac-deep-navy) !important;
border-bottom: 1px solid rgba(104, 105, 255, 0.2) !important;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
display: flex !important;
align-items: center !important;
}
/* Sit below WP admin bar (32px desktop, 46px mobile) when it's present */
.admin-bar .ac-site-header {
top: 32px !important;
}
@media screen and (max-width: 782px) {
.admin-bar .ac-site-header {
top: 46px !important;
}
}
/* ── Inner layout ─────────────────────────────────────────────────────────── */
.ac-site-header-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
height: 100% !important;
padding: 0 20px !important;
gap: 16px !important;
}
/* ── Logo ─────────────────────────────────────────────────────────────────── */
.ac-header-logo-link {
display: flex !important;
align-items: center !important;
text-decoration: none !important;
flex-shrink: 0 !important;
}
.ac-header-logo-img {
height: 36px !important;
width: auto !important;
display: block !important;
}
.ac-header-logo-text {
font-family: Inter, sans-serif !important;
font-size: 1rem !important;
font-weight: 700 !important;
background: var(--ac-gradient) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
white-space: nowrap !important;
letter-spacing: -0.01em !important;
}
/* ── Centre navigation ────────────────────────────────────────────────────── */
.ac-header-nav {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex: 1 !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure BuddyBoss ReadyLaunch does not suppress the nav */
.bb-rl-wrap .ac-header-nav,
#buddypress .ac-header-nav,
.buddypress .ac-header-nav {
display: flex !important;
visibility: visible !important;
}
.ac-header-nav-link {
font-family: Inter, sans-serif !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.75) !important;
text-decoration: none !important;
padding: 6px 14px !important;
border-radius: 6px !important;
transition: color 0.15s, background 0.15s !important;
white-space: nowrap !important;
}
.ac-header-nav-link:hover {
color: var(--ac-white) !important;
background: rgba(104, 105, 255, 0.12) !important;
}
/* ── Right section ────────────────────────────────────────────────────────── */
.ac-header-right {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-shrink: 0 !important;
}
.ac-header-user {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* Badge pip — single emoji in a fixed-size circle in the header */
.ac-header-badge-pip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: rgba(104, 105, 255, 0.15) !important;
border: 1px solid rgba(104, 105, 255, 0.35) !important;
font-size: 16px !important;
line-height: 1 !important;
flex-shrink: 0 !important;
overflow: hidden !important;
}
/* ==========================================================================
PROFILE PAGE DEFAULT AVATAR — CSS background-image replacement
Hides the grey BuddyBoss default silhouette and shows the site logo.
Targets the profile header wrapper only via its unique ID.
The background is always set; the real avatar img sits on top when loaded.
When BuddyBoss has no real avatar it serves profile-avatar-buddyboss.png
which we hide — revealing the logo background behind it.
========================================================================== */
/* Always set the logo as background on the profile header avatar wrapper */
#bb-rl-item-header-avatar {
background-image: url('https://connect.affiliatehosting.ai/wp-content/uploads/2026/04/ac-default-avatar.png') !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-color: #02022D !important;
border-radius: 50% !important;
}
/* Hide the img when it is the BuddyBoss default silhouette */
#bb-rl-item-header-avatar img[src*="profile-avatar-buddyboss"] {
opacity: 0 !important;
}
/* When a real avatar is uploaded, show it on top of the background */
#bb-rl-item-header-avatar img:not([src*="profile-avatar-buddyboss"]) {
opacity: 1 !important;
position: relative !important;
z-index: 1 !important;
border-radius: 50% !important;
display: block !important;
}
.ac-header-username {
font-family: Inter, sans-serif !important;
font-size: 0.83rem !important;
font-weight: 500 !important;
color: var(--ac-white) !important;
white-space: nowrap !important;
max-width: 160px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: flex !important;
align-items: center !important;
}
/* ── User dropdown ────────────────────────────────────────────────────────── */
/* Make the user area a positioned container for the dropdown panel */
.ac-header-user--has-dropdown {
position: relative !important;
cursor: pointer !important;
padding: 4px 8px !important;
border-radius: 8px !important;
transition: background 0.15s !important;
user-select: none !important;
}
.ac-header-user--has-dropdown:focus,
.ac-header-user--has-dropdown.ac-dropdown-open {
background: rgba(104, 105, 255, 0.12) !important;
outline: none !important;
}
/* Caret arrow — small, subtle */
.ac-header-caret {
font-size: 0.55rem !important;
color: rgba(255, 255, 255, 0.45) !important;
margin-left: 2px !important;
line-height: 1 !important;
transition: transform 0.2s !important;
display: inline-block !important;
}
.ac-header-user--has-dropdown.ac-dropdown-open .ac-header-caret {
transform: rotate(180deg) !important;
color: rgba(255, 255, 255, 0.75) !important;
}
/* Dropdown panel — hidden by default, shown only via .ac-dropdown-open (JS-controlled) */
.ac-header-dropdown {
display: none !important;
position: absolute !important;
top: calc(100% + 4px) !important;
right: 0 !important;
min-width: 180px !important;
background: #0d0e2e !important;
border: 1px solid rgba(104, 105, 255, 0.25) !important;
border-radius: 10px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important;
padding: 6px 0 !important;
z-index: 99999 !important;
overflow: hidden !important;
}
/* Show only when JS adds .ac-dropdown-open — no CSS :hover trigger */
.ac-header-user--has-dropdown.ac-dropdown-open .ac-header-dropdown {
display: block !important;
}
/* Dropdown items */
.ac-header-dropdown-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 16px !important;
font-family: Inter, sans-serif !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.85) !important;
text-decoration: none !important;
transition: background 0.12s, color 0.12s !important;
white-space: nowrap !important;
}
.ac-header-dropdown-item:hover {
background: rgba(104, 105, 255, 0.15) !important;
color: var(--ac-white) !important;
}
.ac-header-dropdown-icon {
font-size: 1rem !important;
line-height: 1 !important;
width: 20px !important;
text-align: center !important;
flex-shrink: 0 !important;
}
/* Divider line */
.ac-header-dropdown-divider {
height: 1px !important;
background: rgba(255, 255, 255, 0.08) !important;
margin: 4px 0 !important;
}
/* Logout item — magenta tint on hover */
.ac-header-dropdown-item--logout {
color: rgba(254, 0, 255, 0.75) !important;
}
.ac-header-dropdown-item--logout:hover {
background: rgba(254, 0, 255, 0.1) !important;
color: #FE00FF !important;
}
/* "← Affiliate Hosting" pill */
.ac-header-back-link {
display: inline-flex !important;
align-items: center !important;
font-family: Inter, sans-serif !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
color: var(--ac-slate) !important;
text-decoration: none !important;
padding: 5px 12px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 20px !important;
white-space: nowrap !important;
transition: color 0.15s, border-color 0.15s !important;
}
.ac-header-back-link:hover {
color: var(--ac-white) !important;
border-color: rgba(104, 105, 255, 0.5) !important;
}
/* ==========================================================================
BODY OFFSET — push all content below the fixed 56px header
Only applied when .ac-has-header is on (logged-in, non-login pages)
========================================================================== */
body.ac-has-header {
padding-top: 56px !important;
}
body.admin-bar.ac-has-header {
padding-top: 88px !important; /* 56 header + 32 admin bar */
}
@media screen and (max-width: 782px) {
body.admin-bar.ac-has-header {
padding-top: 102px !important; /* 56 header + 46 mobile admin bar */
}
}
/* ==========================================================================
BUDDYBOSS READYLAUNCH SIDEBAR ADJUSTMENTS
BuddyBoss ReadyLaunch uses a fixed left sidebar (.bb-rl-sidebar, height: 100vh).
When our header is present, the sidebar must start 56px lower so it doesn't
slide under the header bar.
========================================================================== */
/* Sidebar top offset — no admin bar */
body.ac-has-header .bb-rl-sidebar,
body.ac-has-header #bb-rl-sidebar {
top: 56px !important;
height: calc(100vh - 56px) !important;
}
/* Sidebar top offset — with WP admin bar (desktop 32px) */
body.admin-bar.ac-has-header .bb-rl-sidebar,
body.admin-bar.ac-has-header #bb-rl-sidebar {
top: 88px !important;
height: calc(100vh - 88px) !important;
}
/* Sidebar top offset — with WP admin bar (mobile 46px) */
@media screen and (max-width: 782px) {
body.admin-bar.ac-has-header .bb-rl-sidebar,
body.admin-bar.ac-has-header #bb-rl-sidebar {
top: 102px !important;
height: calc(100vh - 102px) !important;
}
}
/* BuddyBoss fixed navbar / top bar (if present in the active BB theme version) */
body.ac-has-header .bb-rl-header-wrap,
body.ac-has-header #bb-rl-header,
body.ac-has-header .bb-rl-navbar {
top: 56px !important;
}
body.admin-bar.ac-has-header .bb-rl-header-wrap,
body.admin-bar.ac-has-header #bb-rl-header,
body.admin-bar.ac-has-header .bb-rl-navbar {
top: 88px !important;
}
/* ==========================================================================
HEADER — MOBILE (≤768px)
Hide nav links and back pill. Show logo + avatar only.
========================================================================== */
@media (max-width: 768px) {
.ac-header-nav {
display: none !important;
}
.ac-header-back-link {
display: none !important;
}
/* Hide username text on mobile but keep avatar + caret so dropdown still works */
.ac-header-username {
display: none !important;
}
/* Dropdown opens downward on mobile — align to right edge of viewport */
.ac-header-dropdown {
right: 0 !important;
min-width: 160px !important;
}
.ac-site-header-inner {
padding: 0 14px !important;
}
}
/* ==========================================================================
HEADER — PRINT
========================================================================== */
@media print {
.ac-site-header {
display: none !important;
}
body.ac-has-header {
padding-top: 0 !important;
}
}
/* ==========================================================================
MEMBER DASHBOARD — [ac_dashboard] shortcode
========================================================================== */
.ac-dashboard {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
padding: 4px 0 40px !important;
max-width: 1100px !important;
margin: 0 auto !important;
font-family: Inter, sans-serif !important;
}
/* ── Rows ─────────────────────────────────────────────────────────────────── */
.ac-dash-row {
display: grid !important;
gap: 20px !important;
}
.ac-dash-row--top {
grid-template-columns: 1fr 380px !important;
align-items: stretch !important;
}
.ac-dash-row--mid {
grid-template-columns: 1fr 1fr !important;
}
.ac-dash-row--bottom {
grid-template-columns: 1fr 380px !important;
align-items: start !important;
}
/* ── Base widget ──────────────────────────────────────────────────────────── */
.ac-dash-widget {
background: transparent !important;
border: none !important;
border-radius: 25px !important;
padding: 22px 24px !important;
position: relative !important;
isolation: isolate !important;
}
/* Gradient border — uses mask technique to show only the border ring */
.ac-dash-widget::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #6869FF 25%, #FE00FF 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* Inner background */
.ac-dash-widget::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
background: var(--ac-deep-navy) !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* Welcome panel inner background override */
.ac-dash-welcome::after {
background: linear-gradient(135deg, #0a0b2e 0%, var(--ac-deep-navy) 60%) !important;
}
/* Trophy needs overflow visible for emoji glow — stats does NOT */
.ac-dash-trophy {
overflow: visible !important;
}
/* Clip stat cards so gradient borders don't bleed between cards */
.ac-stat-card {
overflow: hidden !important;
}
/* Titan ::after must win over widget ::after */
.ac-trophy-badge[data-badge-slug="titan"]::after {
z-index: 1 !important;
}
.ac-widget-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 16px !important;
}
.ac-widget-title {
font-size: 0.9rem !important;
font-weight: 700 !important;
color: var(--ac-white) !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.ac-widget-subtitle {
font-size: 0.75rem !important;
color: var(--ac-slate) !important;
}
.ac-widget-link {
font-size: 0.78rem !important;
color: var(--ac-periwinkle) !important;
text-decoration: none !important;
font-weight: 500 !important;
}
.ac-widget-link:hover {
color: var(--ac-white) !important;
}
/* ── 1. Welcome Panel ─────────────────────────────────────────────────────── */
.ac-dash-welcome {
display: flex !important;
align-items: center !important;
gap: 24px !important;
position: relative !important;
padding: 24px 28px !important;
}
/* Welcome panel inherits ::before gradient border from .ac-dash-widget */
/* Override ::after to use welcome's own dark gradient background */
.ac-dash-welcome::after {
background: linear-gradient(135deg, #0a0b2e 0%, var(--ac-deep-navy) 60%) !important;
}
/* Hide old HTML accent bar elements */
.ac-welcome-accent-bar {
display: none !important;
}
/* Avatar wrap — larger, with ring */
.ac-welcome-avatar-wrap {
position: relative !important;
flex-shrink: 0 !important;
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
background-image: url('https://connect.affiliatehosting.ai/wp-content/uploads/2026/04/ac-default-avatar.png') !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-color: #02022D !important;
/* Gradient ring */
box-shadow: 0 0 0 3px rgba(104,105,255,0.5), 0 0 20px rgba(104,105,255,0.2) !important;
}
.ac-welcome-avatar-wrap img,
.ac-welcome-avatar-wrap svg {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
display: block !important;
position: relative !important;
z-index: 1 !important;
}
/* Real uploaded photo sits on top of background */
.ac-welcome-avatar-wrap img:not([src*="profile-avatar-buddyboss"]) {
opacity: 1 !important;
}
/* Hide BuddyBoss default silhouette */
.ac-welcome-avatar-wrap img[src*="profile-avatar-buddyboss"] {
opacity: 0 !important;
}
/* Badge emoji pip — bottom-right of avatar, larger and bolder */
.ac-welcome-badge-pip {
position: absolute !important;
bottom: -2px !important;
right: -2px !important;
font-size: 1.2rem !important;
line-height: 1 !important;
background: #0d0e2e !important;
border: 2px solid var(--pip-color, #6869FF) !important;
border-radius: 50% !important;
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: none !important;
z-index: 2 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.ac-welcome-content {
flex: 1 !important;
min-width: 0 !important;
position: relative !important;
z-index: 1 !important;
}
.ac-welcome-greeting {
font-size: 1.5rem !important;
font-weight: 800 !important;
color: var(--ac-white) !important;
margin: 0 0 10px !important;
letter-spacing: -0.02em !important;
}
.ac-welcome-meta {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
font-size: 0.82rem !important;
}
/* Badge pill — coloured background */
.ac-welcome-badge-pill {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 3px 10px !important;
border-radius: 20px !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
color: var(--badge-col, #8BC34A) !important;
background: color-mix(in srgb, var(--badge-col, #8BC34A) 15%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--badge-col, #8BC34A) 40%, transparent) !important;
/* Fallback for browsers without color-mix */
background-color: rgba(139,195,74,0.15) !important;
border-color: rgba(139,195,74,0.35) !important;
}
.ac-welcome-number {
font-size: 0.78rem !important;
color: var(--ac-slate) !important;
font-weight: 600 !important;
font-family: 'Courier New', monospace !important;
}
.ac-welcome-joined {
font-size: 0.78rem !important;
color: var(--ac-slate) !important;
}
.ac-welcome-greeting {
font-size: 1.35rem !important;
font-weight: 700 !important;
color: var(--ac-white) !important;
margin: 0 0 8px !important;
}
.ac-welcome-meta {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
font-size: 0.82rem !important;
color: var(--ac-slate) !important;
}
.ac-welcome-badge-name {
font-weight: 600 !important;
}
.ac-welcome-sep {
color: rgba(255,255,255,0.2) !important;
}
.ac-tier-pill {
font-size: 0.72rem !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 20px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.ac-tier--standard {
background: rgba(104, 105, 255, 0.15) !important;
color: var(--ac-periwinkle) !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
}
.ac-tier--professional {
background: rgba(236, 152, 33, 0.15) !important;
color: var(--ac-amber) !important;
border: 1px solid rgba(236, 152, 33, 0.3) !important;
}
.ac-welcome-sync-notice {
margin: 10px 0 0 !important;
font-size: 0.8rem !important;
color: var(--ac-slate) !important;
font-style: italic !important;
}
/* ── 2. Stats Strip ───────────────────────────────────────────────────────── */
.ac-dash-stats {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* Stats wrapper is a .ac-dash-widget but should have no border of its own */
.ac-dash-stats::before,
.ac-dash-stats::after {
display: none !important;
}
.ac-stat-card {
background: transparent !important;
border: none !important;
border-radius: 25px !important;
padding: 18px 20px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 6px !important;
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
}
/* Gradient border using mask technique */
.ac-stat-card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #6869FF 25%, #FE00FF 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
.ac-stat-card::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
background: var(--ac-deep-navy) !important;
z-index: -1 !important;
pointer-events: none !important;
}
.ac-stat-icon {
font-size: 1.3rem !important;
line-height: 1 !important;
}
.ac-stat-value {
font-size: 1.75rem !important;
font-weight: 800 !important;
color: var(--ac-white) !important;
line-height: 1 !important;
}
.ac-stat-value--money {
color: var(--ac-lime) !important;
}
.ac-stat-label {
font-size: 0.72rem !important;
color: var(--ac-slate) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
/* ── 3. Milestone Progress ────────────────────────────────────────────────── */
.ac-dash-milestone {
padding: 16px 24px !important;
}
.ac-milestone-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 10px !important;
flex-wrap: wrap !important;
}
.ac-milestone-label {
font-size: 0.72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: var(--ac-slate) !important;
}
.ac-milestone-target {
font-size: 0.85rem !important;
font-weight: 600 !important;
color: var(--ac-white) !important;
flex: 1 !important;
}
.ac-milestone-pct {
font-size: 0.82rem !important;
font-weight: 700 !important;
color: var(--ac-white) !important;
background: rgba(104,105,255,0.3) !important;
padding: 2px 8px !important;
border-radius: 20px !important;
}
.ac-milestone-track {
height: 16px !important;
background: #8BC34A !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.ac-milestone-fill {
height: 100% !important;
background: #EC9821 !important;
border-radius: 8px !important;
transition: width 0.6s ease !important;
min-width: 0 !important;
}
.ac-dash-milestone--complete {
text-align: center !important;
}
.ac-milestone-complete-text {
font-size: 0.9rem !important;
color: var(--ac-amber) !important;
font-weight: 600 !important;
}
/* ── 4. Streak Widget ─────────────────────────────────────────────────────── */
.ac-streak-count {
font-size: 3.5rem !important;
font-weight: 800 !important;
color: var(--ac-white) !important;
line-height: 1 !important;
margin-bottom: 4px !important;
}
.ac-streak-unit {
font-size: 1.2rem !important;
font-weight: 600 !important;
color: var(--ac-slate) !important;
margin-left: 4px !important;
}
.ac-streak-label {
font-size: 0.85rem !important;
color: var(--ac-slate) !important;
margin: 0 !important;
}
.ac-streak-warning {
margin-top: 12px !important;
padding: 8px 12px !important;
background: rgba(254, 0, 255, 0.1) !important;
border: 1px solid rgba(254, 0, 255, 0.3) !important;
border-radius: 8px !important;
font-size: 0.8rem !important;
color: var(--ac-magenta) !important;
font-weight: 500 !important;
}
.ac-streak-zero {
text-align: center !important;
padding: 12px 0 !important;
}
.ac-streak-zero-icon {
font-size: 2.5rem !important;
display: block !important;
margin-bottom: 8px !important;
}
.ac-streak-zero p {
font-size: 0.85rem !important;
color: var(--ac-slate) !important;
margin: 0 !important;
}
/* ── 5. Leaderboard Preview ───────────────────────────────────────────────── */
.ac-lb-preview-list {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.ac-lb-preview-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 12px !important;
border-radius: 8px !important;
background: rgba(255,255,255,0.03) !important;
}
.ac-lb-preview-row--me {
background: rgba(104, 105, 255, 0.12) !important;
border: 1px solid rgba(104, 105, 255, 0.25) !important;
}
.ac-lb-preview-row--own-rank {
margin-top: 8px !important;
border-style: dashed !important;
}
.ac-lb-rank {
font-size: 0.85rem !important;
font-weight: 800 !important;
color: var(--ac-slate) !important;
width: 20px !important;
flex-shrink: 0 !important;
text-align: center !important;
}
.ac-lb-rank--1 { color: #FFD700 !important; }
.ac-lb-rank--2 { color: #C0C0C0 !important; }
.ac-lb-rank--3 { color: #CD7F32 !important; }
.ac-lb-badge-pip {
font-size: 1rem !important;
flex-shrink: 0 !important;
}
.ac-lb-name {
flex: 1 !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: var(--ac-white) !important;
}
.ac-lb-stat {
font-size: 0.78rem !important;
color: var(--ac-lime) !important;
font-weight: 600 !important;
}
.ac-lb-empty {
font-size: 0.82rem !important;
color: var(--ac-slate) !important;
text-align: center !important;
padding: 16px 0 !important;
margin: 0 !important;
}
/* ── 6. Badge Trophy Case ─────────────────────────────────────────────────── */
/* ── 6. Badge Trophy Case ─────────────────────────────────────────────────── */
.ac-trophy-grid {
display: grid !important;
grid-template-columns: repeat(8, 1fr) !important;
gap: 12px !important;
}
/* ── Base badge card ── */
.ac-trophy-badge {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
padding: 18px 8px 14px !important;
border-radius: 25px !important;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.85) !important;
text-align: center !important;
position: relative !important;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, opacity 0.2s !important;
}
/* ── Earned ── */
.ac-trophy-badge--earned {
cursor: pointer !important;
background: rgba(255,255,255,0.05) !important;
}
.ac-trophy-badge--earned:hover {
transform: translateY(-3px) !important;
box-shadow: 0 6px 20px rgba(0,0,0,0.35),
0 0 12px rgba(104,105,255,0.2) !important;
border-color: var(--badge-color, #6869FF) !important;
}
/* ── Active ── */
.ac-trophy-badge--active {
border: 1px solid var(--badge-color, #6869FF) !important;
background: rgba(104,105,255,0.08) !important;
box-shadow: 0 0 0 1px var(--badge-color, #6869FF),
0 0 16px rgba(104,105,255,0.2) !important;
}
/* ── Locked ── */
.ac-trophy-badge--locked {
opacity: 0.35 !important;
border: 1px dashed rgba(255,255,255,0.75) !important;
cursor: default !important;
filter: grayscale(50%) !important;
}
.ac-trophy-badge--locked:hover {
opacity: 0.85 !important;
filter: grayscale(0%) !important;
border: 1px solid var(--badge-color, #6869FF) !important;
box-shadow: 0 0 12px rgba(104,105,255,0.2) !important;
}
/* ── Emoji ── */
.ac-trophy-badge-emoji {
font-size: 2rem !important;
line-height: 1 !important;
display: block !important;
position: relative !important;
z-index: 1 !important;
transition: transform 0.25s !important;
}
.ac-trophy-badge--locked:hover .ac-trophy-badge-emoji {
transform: scale(1.3) !important;
}
.ac-trophy-badge--active .ac-trophy-badge-emoji {
filter: drop-shadow(0 0 6px var(--badge-color, #6869FF)) !important;
}
/* ── Badge name ── */
.ac-trophy-badge-name {
font-size: 0.68rem !important;
font-weight: 800 !important;
color: var(--ac-white) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* ── Status label ── */
.ac-trophy-badge-status {
font-size: 0.65rem !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 20px !important;
white-space: nowrap !important;
display: inline-block !important;
}
.ac-trophy-badge-status--count {
color: var(--ac-white) !important;
font-size: 0.75rem !important;
}
.ac-trophy-badge-status--active {
background: var(--badge-color, #6869FF) !important;
color: #fff !important;
}
/* ═══════════════════════════════════════════════
TITAN — special treatment
2px amber border, pulsing radial glow behind emoji
═══════════════════════════════════════════════ */
.ac-trophy-badge[data-badge-slug="titan"] {
border: 2px solid rgba(236,152,33,0.6) !important;
--badge-color: #EC9821 !important;
}
.ac-trophy-badge[data-badge-slug="titan"].ac-trophy-badge--active {
border: 2px solid #EC9821 !important;
box-shadow: 0 0 0 1px #EC9821, 0 0 20px rgba(236,152,33,0.3) !important;
}
/* Radial amber glow disc that pulses behind the emoji */
.ac-trophy-badge[data-badge-slug="titan"]::after {
content: "" !important;
position: absolute !important;
top: 14px !important;
left: 50% !important;
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(236,152,33,0.7) 0%, transparent 72%) !important;
transform: translateX(-50%) !important;
animation: titan-glow 2.2s ease-in-out infinite !important;
pointer-events: none !important;
z-index: 0 !important;
}
@keyframes titan-glow {
0%,100% { opacity: 0.5; transform: translateX(-50%) scale(0.9); }
50% { opacity: 1; transform: translateX(-50%) scale(1.25); }
}
/* ── 7. Activity Feed Preview ─────────────────────────────────────────────── */
.ac-feed-preview-list {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.ac-feed-preview-item {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
}
.ac-feed-preview-avatar img,
.ac-feed-preview-avatar svg,
.ac-feed-preview-avatar .avatar {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
display: block !important;
}
.ac-feed-preview-avatar {
flex-shrink: 0 !important;
width: 36px !important;
height: 36px !important;
}
.ac-feed-preview-body {
flex: 1 !important;
}
.ac-feed-preview-text {
font-size: 0.82rem !important;
color: var(--ac-white) !important;
margin: 0 0 4px !important;
line-height: 1.4 !important;
}
.ac-feed-preview-time {
font-size: 0.72rem !important;
color: var(--ac-slate) !important;
}
.ac-feed-empty {
font-size: 0.82rem !important;
color: var(--ac-slate) !important;
text-align: center !important;
padding: 16px 0 !important;
margin: 0 !important;
}
.ac-feed-empty a {
color: var(--ac-periwinkle) !important;
}
/* ── 8. Affiliate Link ────────────────────────────────────────────────────── */
.ac-affiliate-cta {
font-size: 0.82rem !important;
color: var(--ac-slate) !important;
margin: 0 0 12px !important;
}
.ac-affiliate-link-box {
display: flex !important;
gap: 0 !important;
border-radius: 8px !important;
overflow: hidden !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
}
.ac-affiliate-link-input {
flex: 1 !important;
background: rgba(255,255,255,0.05) !important;
border: none !important;
padding: 10px 12px !important;
font-size: 0.78rem !important;
color: var(--ac-white) !important;
font-family: 'Courier New', monospace !important;
outline: none !important;
min-width: 0 !important;
}
.ac-affiliate-copy-btn {
background: #6869FF !important;
border: none !important;
padding: 10px 16px !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
color: var(--ac-white) !important;
cursor: pointer !important;
white-space: nowrap !important;
font-family: Inter, sans-serif !important;
transition: opacity 0.15s !important;
}
.ac-affiliate-copy-btn:hover {
opacity: 0.85 !important;
}
.ac-affiliate-copy-confirm {
font-size: 0.75rem !important;
color: var(--ac-lime) !important;
margin: 6px 0 0 !important;
min-height: 18px !important;
}
/* ── 9. Quick Links ───────────────────────────────────────────────────────── */
.ac-dash-col-right {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.ac-quick-links-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.ac-quick-link {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 12px !important;
background: #6869FF !important;
border: none !important;
border-radius: 8px !important;
text-decoration: none !important;
color: var(--ac-white) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
transition: opacity 0.15s !important;
}
.ac-quick-link:hover {
opacity: 0.85 !important;
color: var(--ac-white) !important;
}
.ac-quick-link-icon {
font-size: 1.1rem !important;
flex-shrink: 0 !important;
}
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.ac-dash-row--top,
.ac-dash-row--mid,
.ac-dash-row--bottom {
grid-template-columns: 1fr !important;
}
.ac-quick-links-grid {
grid-template-columns: 1fr 1fr !important;
}
.ac-dash-stats {
grid-template-columns: repeat(2, 1fr) !important;
}
.ac-trophy-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
}
@media (max-width: 600px) {
.ac-dash-stats {
grid-template-columns: 1fr 1fr !important;
}
.ac-trophy-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
.ac-dashboard {
padding: 16px 0 24px !important;
}
}
/* Reduce BuddyBoss page content top padding on dashboard page */
body.page-id-dashboard .entry-content,
body .bb-rl-content-wrap,
.bb-rl-wrap .bb-rl-inner {
padding-top: 0 !important;
}
/* Remove all top spacing above dashboard content */
.bb-rl-wrap,
.bb-rl-inner,
.bb-rl-content,
.bb-rl-content-wrap,
#bb-rl-wrap,
.site-main,
.site-content,
.content-area,
#content,
.entry-content,
.ast-container,
.ast-article-inner-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Target exact Astra container causing the gap above dashboard */
.ast-container,
.ast-container > .ast-row,
#primary.content-area,
div#primary,
.hfeed.site,
#page {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Astra single post / page content area top spacing */
.ast-single-post .site-content,
.page-template-default .site-content,
.ast-no-sidebar .site-content,
.ast-plain-container .site-content,
.ast-no-sidebar #primary,
.ast-plain-container #primary {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ==========================================================================
STAT CARDS — enhanced with icon circles, glow, trend arrows
========================================================================== */
/* Icon wrap — coloured circle behind emoji */
.ac-stat-icon-wrap {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.4rem !important;
margin-bottom: 4px !important;
flex-shrink: 0 !important;
}
.ac-stat-icon-wrap--blue { background: rgba(104, 105, 255, 0.2) !important; box-shadow: 0 0 12px rgba(104,105,255,0.3) !important; }
.ac-stat-icon-wrap--purple { background: rgba(254, 0, 255, 0.15) !important; box-shadow: 0 0 12px rgba(254,0,255,0.25) !important; }
.ac-stat-icon-wrap--lime { background: rgba( 30, 255, 0, 0.12) !important; box-shadow: 0 0 12px rgba(30,255,0,0.2) !important; }
/* Card glow matching value colour */
.ac-stat-card--blue { box-shadow: inset 0 -2px 20px rgba(104,105,255,0.08) !important; }
.ac-stat-card--purple { box-shadow: inset 0 -2px 20px rgba(254,0,255,0.08) !important; }
.ac-stat-card--lime { box-shadow: inset 0 -2px 20px rgba(30,255,0,0.08) !important; }
/* Stat value + trend on same row */
.ac-stat-main {
display: flex !important;
align-items: baseline !important;
justify-content: center !important;
gap: 6px !important;
}
/* Larger stat value */
.ac-stat-value {
font-size: 2.2rem !important;
font-weight: 800 !important;
color: var(--ac-white) !important;
line-height: 1 !important;
}
/* Trend arrows */
.ac-stat-trend {
font-size: 0.85rem !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.ac-stat-trend--up { color: var(--ac-lime) !important; }
.ac-stat-trend--down { color: #FF4D4D !important; }
/* ==========================================================================
MEMBER PROFILE PAGE
========================================================================== */
/* 1. Hide the FIRST empty #item-header (BuddyBoss ghost element before ReadyLaunch) */
#buddypress > div > div:first-child > #item-header:not(.bb-rl-profile-header),
#buddypress #item-header:not(.bb-rl-profile-header) {
display: none !important;
}
/* 2. Hide duplicate item-body in primary container — ONLY on profile view page
(not on settings, messages, notifications, forums, or other BP pages) */
body.bp-user:not(.settings):not(.messages):not(.notifications):not(.forums):not(.profile-edit):not(.change-avatar):not(.delete-avatar) .bb-rl-primary-container .item-body {
display: none !important;
}
/* Profile EDIT page — show item-body (the edit form lives inside it) */
body.profile-edit .bb-rl-primary-container .item-body {
display: block !important;
}
/* SETTINGS + MESSAGES + NOTIFICATIONS — hide Details+Activity panel */
body.settings .ac-details-panel,
body.messages .ac-details-panel,
body.notifications .ac-details-panel {
display: none !important;
}
/* SETTINGS + MESSAGES + NOTIFICATIONS — hide the secondary container (profile Details box) */
body.settings .bb-rl-secondary-container,
body.messages .bb-rl-secondary-container,
body.notifications .bb-rl-secondary-container {
display: none !important;
}
/* SETTINGS + MESSAGES + NOTIFICATIONS — fix sidebar position */
body.settings #secondary,
body.messages #secondary,
body.notifications #secondary {
position: fixed !important;
top: 56px !important;
height: calc(100vh - 56px) !important;
left: 0 !important;
z-index: 9999 !important;
overflow-y: auto !important;
width: 240px !important;
}
/* ==========================================================================
SETTINGS PAGE — gradient border card matching leaderboard
========================================================================== */
/* Outer container — no border, just layout */
body.settings .bb-rl-primary-container {
max-width: 900px !important;
margin: 20px auto !important;
padding: 0 !important;
}
/* Content wrapper — remove excess padding */
body.settings .bb-rl-content-wrapper {
padding: 0 !important;
margin: 0 !important;
}
/* Inner settings card — gradient border, 25px radius, deep navy fill */
body.settings .bb-rl-account-settings-section {
position: relative !important;
isolation: isolate !important;
border-radius: 25px !important;
background: var(--ac-deep-navy) !important;
padding: 32px !important;
}
body.settings .bb-rl-account-settings-section::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #6869FF 25%, #FE00FF 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
body.settings .bb-rl-account-settings-section::after {
content: "" !important;
position: absolute !important;
inset: 2px !important;
border-radius: 23px !important;
background: var(--ac-deep-navy) !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* Ensure form content sits above the ::after background */
body.settings .item-body {
position: relative !important;
z-index: 1 !important;
}
/* CENTER: expand content wrapper and center the card */
body.settings .bb-rl-content-wrapper {
width: 100% !important;
max-width: 100% !important;
padding: 20px !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
}
body.settings .bb-rl-primary-container {
max-width: 900px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* ── Notification Settings — fix Enable Notifications header ─────────── */
/* Keep the rounded border container on thead (matches tbody style) */
body.settings .main-notification-settings thead {
background: transparent !important;
border: 0.666667px solid rgb(61, 61, 61) !important;
border-radius: 8px !important;
display: block !important;
}
body.settings .main-notification-settings thead tr {
background: transparent !important;
}
/* Remove individual cell backgrounds and borders — keep text only */
body.settings .main-notification-settings thead th,
body.settings .main-notification-settings thead th.title,
body.settings .main-notification-settings thead th.email {
background: transparent !important;
border: none !important;
border-color: transparent !important;
color: var(--ac-white) !important;
font-weight: 600 !important;
padding: 12px 16px !important;
}
body.settings .main-notification-settings thead ul {
background: transparent !important;
}
/* ── Notification section headings (Mentions, Posts, etc.) — legend-style above border ── */
body.settings .main-notification-settings tr.notification_heading {
display: block !important;
margin: 5px 0 0 0px !important;
position: relative !important;
z-index: 1 !important;
}
body.settings .main-notification-settings tr.notification_heading td.title {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--ac-white) !important;
letter-spacing: 0.01em !important;
padding: 0 8px !important;
background: var(--ac-deep-navy) !important;
display: inline-block !important;
}
/* ── Settings sub-tabs (Preferences / Group Subscriptions) — pill buttons ── */
body.settings .subnav li a {
background: rgba(104, 105, 255, 0.12) !important;
border: 1px solid rgba(104, 105, 255, 0.25) !important;
color: rgba(255, 255, 255, 0.8) !important;
border-radius: 10px !important;
padding: 8px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
font-family: Inter, sans-serif !important;
text-decoration: none !important;
transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
body.settings .subnav li a:hover {
background: rgba(104, 105, 255, 0.25) !important;
border-color: rgba(104, 105, 255, 0.5) !important;
color: #fff !important;
}
body.settings .subnav li.current a,
body.settings .subnav li.selected a {
background: var(--ac-gradient) !important;
border-color: transparent !important;
color: #fff !important;
}
/* ── Privacy page — visibility dropdown fix ──────────────────────────── */
body.settings select.bp-xprofile-visibility {
background-color: transparent !important;
color: var(--ac-white) !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
border-radius: 8px !important;
padding: 8px 32px 8px 12px !important;
/* White arrow, slightly larger */
background-image: url("data:image/svg+xml,") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 14px !important;
}
/* Dark background for dropdown options */
body.settings select.bp-xprofile-visibility option {
background-color: #02022D !important;
color: #fff !important;
padding: 8px 12px !important;
}
/* Expand secondary container to full width */
.bb-rl-secondary-container {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
}
/* 3. Hide the old ac-profile-header-meta — only ac-profile-pills should show */
.ac-profile-header-meta { display: none !important; }
/* 4. Hide the raw BuddyBoss StarterStandardJoined text */
#bb-rl-item-header-content .bb-user-content-wrap > div:not(.ac-profile-pills):not(.ac-profile-badge-panel):not(.item-meta):not(.bb-rl-member-header-actions-wrap) {
display: none !important;
}
/* 5. Profile header card — gradient border */
#buddypress #item-header.bb-rl-profile-header,
.users-header.bb-rl-profile-header {
display: flex !important;
align-items: center !important;
gap: 20px !important;
background: var(--ac-deep-navy) !important;
border-radius: 25px !important;
padding: 20px 28px !important;
margin-bottom: 20px !important;
position: relative !important;
isolation: isolate !important;
width: 100% !important;
box-sizing: border-box !important;
}
#buddypress #item-header.bb-rl-profile-header::before,
.users-header.bb-rl-profile-header::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #6869FF 25%, #FE00FF 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
#buddypress #item-header.bb-rl-profile-header::after,
.users-header.bb-rl-profile-header::after {
content: '' !important;
position: absolute !important;
inset: 2px !important;
border-radius: 23px !important;
background: var(--ac-deep-navy) !important;
z-index: -1 !important;
pointer-events: none !important;
}
#buddypress #item-header.bb-rl-profile-header > *,
.users-header.bb-rl-profile-header > * {
position: relative !important;
z-index: 1 !important;
}
/* Avatar */
#bb-rl-item-header-avatar { flex-shrink: 0 !important; }
#bb-rl-item-header-avatar img {
border-radius: 50% !important;
width: 96px !important;
height: 96px !important;
display: block !important;
}
/* Header content */
#bb-rl-item-header-content { flex: 1 !important; min-width: 0 !important; }
/* Member name */
#bb-rl-item-header-content h2.user-nicename {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #fff !important;
margin: 0 0 6px !important;
display: block !important;
}
/* Our pills */
.ac-profile-pills {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 0 0 8px 0 !important;
}
.ac-pp-badge {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 3px 10px !important;
border-radius: 20px !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.ac-pp-emoji { font-size: 0.85rem !important; line-height: 1 !important; }
.ac-pp-tier {
display: inline-flex !important;
padding: 2px 8px !important;
border-radius: 20px !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.ac-pp-number { font-size: 0.78rem !important; color: #828FA0 !important; font-weight: 600 !important; font-family: "Courier New",monospace !important; }
.ac-pp-date { font-size: 0.78rem !important; color: #828FA0 !important; }
/* Activity row */
#bb-rl-item-header-content .item-meta {
font-size: 0.8rem !important;
color: #828FA0 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
flex-wrap: wrap !important;
margin-bottom: 10px !important;
}
/* Edit Profile button */
.bb-rl-member-header-actions-wrap a,
.bb-rl-member-header-actions-wrap button {
background: #6869FF !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
font-family: Inter, sans-serif !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
padding: 10px 20px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-decoration: none !important;
transition: opacity 0.15s !important;
}
.bb-rl-member-header-actions-wrap a:hover { opacity: 0.85 !important; color: #fff !important; }
/* Hide #object-nav from inside profile card */
#bb-rl-profile-container #object-nav { display: none !important; }
/* Profile nav in sidebar */
#object-nav.ac-in-sidebar {
display: block !important;
margin-bottom: 16px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid rgba(104,105,255,0.2) !important;
}
#object-nav.ac-in-sidebar ul {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#object-nav.ac-in-sidebar ul li a {
display: flex !important;
align-items: center !important;
gap: 8px !important;
background: #6869FF !important;
color: #fff !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
padding: 9px 14px !important;
text-decoration: none !important;
transition: opacity 0.15s !important;
border: none !important;
}
#object-nav.ac-in-sidebar ul li a:hover { opacity: 0.85 !important; }
#object-nav.ac-in-sidebar ul li.current a { background: var(--ac-gradient) !important; }
#object-nav.ac-in-sidebar ul li a .bb-single-nav-item-point { display: inline !important; }
/* Details panel gradient border */
.bb-rl-secondary-container .widget,
.bb-rl-secondary-container .bp-widget,
.bb-rl-primary-container .bb-rl-profile-widget {
background: var(--ac-deep-navy) !important;
border-radius: 25px !important;
padding: 24px !important;
margin-bottom: 20px !important;
position: relative !important;
isolation: isolate !important;
}
.bb-rl-secondary-container .widget::before,
.bb-rl-secondary-container .bp-widget::before,
.bb-rl-primary-container .bb-rl-profile-widget::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #6869FF 25%, #FE00FF 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
.bb-rl-secondary-container .widget::after,
.bb-rl-secondary-container .bp-widget::after,
.bb-rl-primary-container .bb-rl-profile-widget::after {
content: "" !important;
position: absolute !important;
inset: 2px !important;
border-radius: 23px !important;
background: var(--ac-deep-navy) !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* ==========================================================================
PROFILE PAGE — avatar and grey area fixes
========================================================================== */
/* Avatar container — fixed size, circular, centered */
#bb-rl-item-header-avatar {
flex-shrink: 0 !important;
width: 100px !important;
height: 100px !important;
border-radius: 50% !important;
position: relative !important;
overflow: hidden !important;
background-image: url('https://connect.affiliatehosting.ai/wp-content/uploads/2026/04/ac-default-avatar.png') !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-color: #02022D !important;
box-shadow: 0 0 0 3px rgba(104,105,255,0.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Online status dot — keep it visible */
#bb-rl-item-header-avatar .member-status {
position: absolute !important;
bottom: 4px !important;
right: 4px !important;
z-index: 3 !important;
}
/* Uploaded real photo — fills the circle on top of logo */
#bb-rl-item-header-avatar img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
z-index: 2 !important;
background-color: #02022D !important;
}
/* Hide the default BuddyBoss silhouette */
#bb-rl-item-header-avatar img[src*="profile-avatar-buddyboss"] {
opacity: 0 !important;
z-index: 0 !important;
}
/* Grey area below Details — kill all grey backgrounds */
.bb-rl-container,
.bb-rl-primary-container,
.bb-rl-content-wrapper,
.site-main,
#primary,
.bp-wrap,
body.bp-user #primary {
background-color: var(--ac-space-navy) !important;
}
/* Kill any grey background on the item-body area */
#item-body,
.item-body,
.profile.public,
.bb-rl-profile-panel,
.bb-rl-primary-container .item-body {
background-color: var(--ac-space-navy) !important;
}
/* ==========================================================================
PROFILE PAGE — final fixes
========================================================================== */
/* Remove the divider line under Edit Profile button */
#bb-rl-profile-item-header,
.bb-rl-profile-item-header,
#bb-rl-profile-container {
border-bottom: none !important;
}
/* Remove any hr or divider inside profile header */
.bb-rl-profile-header hr,
.bb-rl-profile-header .profile-divider,
#item-header hr {
display: none !important;
}
/* Grey box — target the actual site wrapper */
#page.bb-readylaunch,
.site.bb-readylaunch,
#page,
.site {
background-color: var(--ac-space-navy) !important;
}
/* Grey background from BuddyBoss ReadyLaunch content area */
.bb-rl-container,
.bb-rl-content-wrapper,
.bb-rl-primary-container,
.bp-wrap,
#buddypress,
.buddypress-wrap {
background-color: var(--ac-space-navy) !important;
}
/* ── Left sidebar profile nav buttons — wider, More dropdown centered ──────── */
#object-nav.ac-in-sidebar ul li {
position: relative !important;
}
#object-nav.ac-in-sidebar ul li a {
width: 100% !important;
box-sizing: border-box !important;
justify-content: flex-start !important;
}
/* More dropdown — center it relative to the button */
#object-nav.ac-in-sidebar ul li .bb-rl-main-nav-more-list,
#object-nav.ac-in-sidebar .bb-rl-more-list,
#object-nav.ac-in-sidebar [class*="more-list"],
#object-nav.ac-in-sidebar [class*="dropdown"] {
left: 0 !important;
right: 0 !important;
min-width: 100% !important;
transform: none !important;
}
/* ==========================================================================
PROFILE PAGE — v10 targeted fixes
========================================================================== */
/* ── Starter pill — match dashboard exactly ─────────────────────────────────── */
/* Dashboard uses .ac-welcome-badge-pill with emoji + name, green tint */
.ac-pp-badge {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 3px 10px !important;
border-radius: 20px !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
/* ── Avatar — badge pip overlay bottom-right like dashboard ─────────────────── */
/* The avatar wrapper already has overflow:hidden set,
the pip needs to be OUTSIDE the wrapper */
#bb-rl-profile-item-header .bb-rl-profile-avatar {
position: relative !important;
}
/* Badge pip on profile avatar — same as dashboard .ac-welcome-badge-pip */
#bb-rl-profile-item-header .bb-rl-profile-avatar::after {
content: attr(data-badge-emoji) !important;
position: absolute !important;
bottom: 0px !important;
right: 0px !important;
font-size: 1.1rem !important;
line-height: 1 !important;
background: #0d0e2e !important;
border: 2px solid #8BC34A !important;
border-radius: 50% !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
pointer-events: none !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
/* ── Left sidebar nav — full width buttons ───────────────────────────────────── */
#object-nav.ac-in-sidebar {
width: 100% !important;
}
#object-nav.ac-in-sidebar ul {
width: 100% !important;
}
#object-nav.ac-in-sidebar ul li {
width: 100% !important;
display: block !important;
}
#object-nav.ac-in-sidebar ul li a {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* More button specifically */
#object-nav.ac-in-sidebar .bb-rl-main-nav-more > a,
#object-nav.ac-in-sidebar [class*="more"] > a {
width: 100% !important;
box-sizing: border-box !important;
}
/* More dropdown panel — full width, no left offset */
#object-nav.ac-in-sidebar .bb-rl-main-nav-more-list,
#object-nav.ac-in-sidebar .bb-rl-more-list,
#object-nav.ac-in-sidebar ul li ul {
position: static !important;
width: 100% !important;
min-width: 100% !important;
left: 0 !important;
transform: none !important;
background: var(--ac-deep-navy) !important;
border-radius: 8px !important;
padding: 4px 0 !important;
margin-top: 4px !important;
display: none !important;
}
#object-nav.ac-in-sidebar ul li.sfHover ul,
#object-nav.ac-in-sidebar ul li:focus-within ul,
#object-nav.ac-in-sidebar ul li.open ul {
display: block !important;
}
/* ==========================================================================
PROFILE PAGE — responsive layout fix
========================================================================== */
/* Force the content wrapper to single column always */
.bb-rl-content-wrapper {
flex-direction: column !important;
width: 100% !important;
}
/* Primary container hidden, secondary takes full width at ALL sizes */
.bb-rl-primary-container {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
.bb-rl-secondary-container {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
}
/* Hide primary item-body at ALL breakpoints */
.bb-rl-primary-container .item-body {
display: none !important;
}
/* Profile header inside primary — always full width */
#buddypress #item-header.bb-rl-profile-header {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Profile nav — always visible in sidebar, never hidden */
#object-nav.ac-in-sidebar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
}
/* Override any BuddyBoss responsive hiding of the nav */
@media (max-width: 1200px) {
#object-nav.ac-in-sidebar {
display: block !important;
}
.bb-rl-secondary-container {
width: 100% !important;
flex: 0 0 100% !important;
}
}
@media (max-width: 768px) {
#object-nav.ac-in-sidebar {
display: block !important;
}
.bb-rl-secondary-container {
width: 100% !important;
}
#buddypress #item-header.bb-rl-profile-header {
flex-direction: row !important;
flex-wrap: wrap !important;
}
}
/* ==========================================================================
PROFILE PAGE — force full-width Details at ALL viewport sizes
========================================================================== */
/* Override BuddyBoss grid system that snaps at ~960px+ */
#bb-rl-right-sidebar,
.bb-rl-widget-sidebar,
.bb-rl-widget-sidebar.sm-grid-1-1,
#bb-rl-right-sidebar.sm-grid-1-1 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 1fr !important;
flex: none !important;
}
/* The profile widget inside — full width */
#bb-rl-right-sidebar .widget,
#bb-rl-right-sidebar .bb-rl-profile-widget,
.bb-rl-widget-sidebar .widget,
.bb-rl-widget-sidebar .bb-rl-profile-widget {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Override every BuddyBoss breakpoint for the secondary container */
@media (min-width: 1px) {
.bb-rl-secondary-container {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
}
.bb-rl-content-wrapper {
flex-direction: column !important;
flex-wrap: nowrap !important;
}
.bb-rl-primary-container {
flex: 0 0 100% !important;
max-width: 100% !important;
}
#bb-rl-right-sidebar {
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
}
/* ==========================================================================
PROFILE PAGE — final cleanup
========================================================================== */
/* 1. Remove ALL green circle artifacts on avatar */
#bb-rl-item-header-avatar span:not(.member-status),
#bb-rl-item-header-avatar > span {
display: none !important;
}
/* Keep online status dot */
#bb-rl-item-header-avatar .member-status {
display: block !important;
}
/* 2. More dropdown — gap between items */
#object-nav.ac-in-sidebar ul li ul li {
margin-bottom: 4px !important;
width: 100% !important;
display: block !important;
}
#object-nav.ac-in-sidebar ul li ul li:last-child {
margin-bottom: 0 !important;
}
#object-nav.ac-in-sidebar ul li ul li a {
background: rgba(104,105,255,0.2) !important;
border-radius: 6px !important;
padding: 8px 14px !important;
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
color: #fff !important;
font-weight: 500 !important;
font-size: 0.82rem !important;
}
#object-nav.ac-in-sidebar ul li ul li a:hover {
background: rgba(104,105,255,0.35) !important;
}
/* 3. Show nav on mobile — BuddyBoss hides left panel on small screens */
@media (max-width: 768px) {
#secondary {
display: block !important;
visibility: visible !important;
}
#object-nav.ac-in-sidebar {
display: block !important;
visibility: visible !important;
}
/* Ensure sidebar is accessible on mobile for profile page */
body.bp-user #secondary {
position: relative !important;
display: block !important;
}
}
/* ==========================================================================
PROFILE PAGE — mobile nav + pill size + circle removal
========================================================================== */
/* Remove ALL injected span children from avatar (the green circle) */
#bb-rl-item-header-avatar > span,
#bb-rl-item-header-avatar > span:not(.member-status) {
display: none !important;
visibility: hidden !important;
}
/* Starter pill — smaller to match dashboard */
.ac-pp-badge {
font-size: 0.72rem !important;
padding: 2px 8px !important;
line-height: 1.3 !important;
}
.ac-pp-emoji {
font-size: 0.78rem !important;
}
/* Force BuddyBoss left panel visible at ALL sizes on profile page */
body.bp-user:not(.messages) #secondary,
body.xprofile:not(.messages) #secondary,
body.bbp-user-page:not(.messages) #secondary {
display: block !important;
visibility: visible !important;
position: relative !important;
width: 240px !important;
min-width: 240px !important;
flex-shrink: 0 !important;
}
/* Override BuddyBoss JS that adds display:none to sidebar on mobile */
body.bp-user:not(.messages) .bb-rl-left-panel,
body.xprofile:not(.messages) .bb-rl-left-panel,
body.bbp-user-page:not(.messages) .bb-rl-left-panel {
display: block !important;
transform: none !important;
left: 0 !important;
visibility: visible !important;
}
body.bp-user #object-nav.ac-in-sidebar,
body.xprofile #object-nav.ac-in-sidebar {
display: block !important;
visibility: visible !important;
}
/* ==========================================================================
SIDEBAR NAV — style bottom items to match profile nav buttons
========================================================================== */
/* Target the ReadyLaunch sidebar nav items below the profile nav */
#secondary .bb-rl-left-panel-menu li a,
#secondary .bb-rl-sidebar-menu li a,
#secondary nav li a,
.bb-rl-left-panel .bb-rl-left-panel-menu li a {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 12px 16px !important;
border-radius: 10px !important;
font-family: Inter, sans-serif !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
color: var(--ac-white) !important;
background: rgba(104, 105, 255, 0.12) !important;
border: 1px solid rgba(104, 105, 255, 0.25) !important;
margin-bottom: 6px !important;
transition: background 0.15s, border-color 0.15s !important;
text-decoration: none !important;
}
#secondary .bb-rl-left-panel-menu li a:hover,
#secondary .bb-rl-sidebar-menu li a:hover,
#secondary nav li a:hover,
.bb-rl-left-panel .bb-rl-left-panel-menu li a:hover {
background: rgba(104, 105, 255, 0.25) !important;
border-color: rgba(104, 105, 255, 0.5) !important;
}
/* Active state */
#secondary .bb-rl-left-panel-menu li.current-menu-item a,
#secondary .bb-rl-left-panel-menu li.selected a,
#secondary nav li.current a {
background: var(--ac-gradient) !important;
border-color: transparent !important;
color: var(--ac-white) !important;
}
/* Make the sidebar icon emojis larger to match profile nav */
#secondary .bb-rl-left-panel-menu li a .bb-icon,
#secondary .bb-rl-left-panel-menu li a svg,
#secondary .bb-rl-left-panel-menu li a img,
#secondary .bb-rl-sidebar-menu li a .bb-icon,
#secondary nav li a .bb-icon {
font-size: 1.2rem !important;
width: 24px !important;
height: 24px !important;
flex-shrink: 0 !important;
}
/* Remove the Links section header divider lines */
#secondary .bb-rl-left-panel-menu .menu-title,
#secondary .bb-rl-sidebar-menu .menu-title,
.bb-rl-left-panel .bb-rl-left-panel-menu .menu-title {
color: var(--ac-slate) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
padding: 16px 8px 8px !important;
border: none !important;
}
/* Remove separator lines between sections */
#secondary .bb-rl-left-panel-menu > li.menu-title,
#secondary hr,
#secondary .separator,
.bb-rl-left-panel .separator {
border-top: none !important;
border-bottom: none !important;
}
/* ==========================================================================
SIDEBAR NAV — comprehensive icon + styling fix
========================================================================== */
#secondary a svg,
#secondary a .bb-icon,
#secondary a i,
.bb-rl-left-panel a svg,
.bb-rl-left-panel a .bb-icon,
.bb-rl-left-panel a i {
display: none !important;
width: 0 !important;
height: 0 !important;
}
#secondary .bb-rl-left-panel-menu li a,
#secondary .bb-rl-left-panel-links li a,
#secondary .bb-bottom-readylaunchpanel-menu li a,
.bb-rl-left-panel .bb-rl-left-panel-menu li a,
.bb-rl-left-panel .bb-bottom-readylaunchpanel-menu li a {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 12px 16px !important;
border-radius: 10px !important;
font-family: Inter, sans-serif !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
color: var(--ac-white) !important;
background: rgba(104, 105, 255, 0.12) !important;
border: 1px solid rgba(104, 105, 255, 0.25) !important;
margin-bottom: 6px !important;
transition: background 0.15s, border-color 0.15s !important;
text-decoration: none !important;
}
#secondary .bb-rl-left-panel-menu li a:hover,
#secondary .bb-rl-left-panel-links li a:hover,
#secondary .bb-bottom-readylaunchpanel-menu li a:hover {
background: rgba(104, 105, 255, 0.25) !important;
border-color: rgba(104, 105, 255, 0.5) !important;
}
#secondary h2[data-heading-tag],
#secondary .bb-rl-list h2,
.bb-rl-left-panel-widget h2 {
display: none !important;
}
#secondary .bb-rl-left-panel-widget::before,
#secondary .bb-rl-left-panel-widget::after,
#secondary .bb-rl-list::before,
#secondary .bb-rl-list::after {
display: none !important;
}
/* Nuclear SVG icon removal — overrides all BuddyBoss specificity */
#secondary a svg,
#secondary a i,
#secondary a .bb-icon,
#secondary a .bb-icon-l,
#secondary a .bb-icon-rf,
#secondary a .bb-icon-f,
#secondary a [class*="bb-icon"] {
display: none !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
font-size: 0 !important;
line-height: 0 !important;
}
/* Hide BuddyBoss font-icon spans in sidebar nav */
#secondary .menu-icon,
#secondary span[class*="bb-icons"],
#secondary span.menu-icon {
display: none !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
overflow: hidden !important;
}
/* Hide BuddyBoss ::before icon font on sidebar links */
#secondary .bb-rl-left-panel-menu-link::before,
#secondary .bb-bottom-readylaunchpanel-menu a::before,
.bb-rl-left-panel .bb-rl-left-panel-menu-link::before {
display: none !important;
content: none !important;
}
/* Hide online status circle on profile avatar */
#bb-rl-item-header-avatar .member-status {
display: none !important;
}
/* Hide badge pip circle on profile avatar */
#bb-rl-item-header-avatar::after,
#bb-rl-profile-item-header .bb-rl-profile-avatar::after {
display: none !important;
content: none !important;
}
/* ==========================================================================
PROFILE — overflow fix (from v11 redesign, kept)
========================================================================== */
/* Fix sidebar overlapping profile content */
body.bp-user .bb-rl-content-area,
body.bp-user #buddypress,
body.bp-user .bb-rl-wrap {
overflow: visible !important;
}
/* ==========================================================================
HEADER NAV — emoji pill buttons with magenta active state
========================================================================== */
.ac-header-nav-link {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: rgba(104, 105, 255, 0.12) !important;
border: 1px solid rgba(104, 105, 255, 0.25) !important;
border-radius: 8px !important;
padding: 7px 16px !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.8) !important;
transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.ac-header-nav-link:hover {
background: rgba(104, 105, 255, 0.25) !important;
border-color: rgba(104, 105, 255, 0.5) !important;
color: #fff !important;
}
.ac-header-nav-link--active,
.ac-header-nav-link--active:hover {
background: var(--ac-gradient) !important;
border-color: transparent !important;
color: #fff !important;
border-bottom: none !important;
border-radius: 8px !important;
}
.ac-header-nav-emoji {
font-size: 1rem !important;
line-height: 1 !important;
}
/* ==========================================================================
SIDEBAR — hide duplicate header nav items + consistent width
========================================================================== */
/* Hide Leaderboard, Training, Dashboard from sidebar — already in header */
#secondary li a[href*="/leaderboard"],
#secondary li a[href*="/training"],
#secondary li a[href*="/dashboard"],
.bb-rl-left-panel li a[href*="/leaderboard"],
.bb-rl-left-panel li a[href*="/training"],
.bb-rl-left-panel li a[href*="/dashboard"] {
display: none !important;
}
/* Also hide the parent li to remove empty space */
#secondary li:has(a[href*="/leaderboard"]),
#secondary li:has(a[href*="/training"]),
#secondary li:has(a[href*="/dashboard"]),
.bb-rl-left-panel li:has(a[href*="/leaderboard"]),
.bb-rl-left-panel li:has(a[href*="/training"]),
.bb-rl-left-panel li:has(a[href*="/dashboard"]) {
display: none !important;
}
/* Consistent sidebar width on all BuddyBoss pages */
body.ac-has-header #secondary,
body.ac-has-header .bb-rl-left-panel,
body.ac-has-header #bb-rl-sidebar {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
}
/* Active sidebar item — magenta background to match header */
#secondary .bb-rl-left-panel-menu li.current-menu-item a,
#secondary .bb-rl-left-panel-menu li.selected a,
#secondary .bb-rl-left-panel-menu li.bp-current-nav a,
#secondary li.current a,
#secondary li.selected a,
.bb-rl-left-panel li.current-menu-item a,
.bb-rl-left-panel li.selected a {
background: var(--ac-gradient) !important;
border-color: transparent !important;
color: #fff !important;
}
/* Hide empty Links section container in sidebar */
#secondary .bb-rl-left-panel-widget:last-child,
#secondary .bb-rl-left-panel-widget:has(.bb-bottom-readylaunchpanel-menu),
#secondary .bb-rl-left-panel-widget:has(.bb-rl-list) {
display: none !important;
}
/* ==========================================================================
PROFILE PAGE — standard sidebar + horizontal profile tabs
========================================================================== */
#secondary #object-nav,
#secondary #object-nav.ac-in-sidebar {
display: none !important;
}
#object-nav.ac-profile-tabs {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
isolation: isolate !important;
background: transparent !important;
border: none !important;
border-radius: 25px !important;
padding: 14px 20px !important;
margin: 0 0 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
#object-nav.ac-profile-tabs::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #6869FF 25%, #FE00FF 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
#object-nav.ac-profile-tabs::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
background: var(--ac-deep-navy) !important;
z-index: -1 !important;
pointer-events: none !important;
}
body.bp-user #secondary,
body.xprofile #secondary,
body.bbp-user-page #secondary {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
position: fixed !important;
display: block !important;
visibility: visible !important;
}
body.bp-user .bb-rl-wrap,
body.xprofile .bb-rl-wrap {
display: block !important;
flex-direction: unset !important;
}
/* ==========================================================================
PROFILE SIDEBAR — match community page style exactly
========================================================================== */
/* Remove injected colored emojis on profile sidebar only */
body.bp-user #secondary .ac-sidebar-emoji,
body.xprofile #secondary .ac-sidebar-emoji {
display: none !important;
}
/* Remove BB colored circle icon images on profile sidebar */
body.bp-user #secondary .bb-rl-left-panel-menu li a img,
body.bp-user #secondary .bb-rl-left-panel-menu li a picture,
body.xprofile #secondary .bb-rl-left-panel-menu li a img,
body.xprofile #secondary .bb-rl-left-panel-menu li a picture {
display: none !important;
}
/* Profile sidebar — match community page top spacing */
body.bp-user #secondary .bb-rl-left-panel-menu,
body.bp-user #secondary nav:first-child,
body.xprofile #secondary .bb-rl-left-panel-menu,
body.xprofile #secondary nav:first-child {
padding-top: 30px !important;
}
/* ==========================================================================
PROFILE HEADER — avatar sizing + badge panel
Consolidated from v11, larger avatar, and Option B sections.
========================================================================== */
/* Larger avatar — 130px, centered vertically */
#bb-rl-item-header-avatar {
width: 130px !important;
height: 130px !important;
min-width: 130px !important;
}
#bb-rl-item-header-avatar img {
width: 130px !important;
height: 130px !important;
background-color: #02022D !important;
}
/* Remove ALL green circle spans */
#bb-rl-item-header-avatar > span:not(.member-status),
#bb-rl-item-header-avatar > span[class=""],
#bb-rl-item-header-avatar > span:empty,
.bb-rl-profile-header .item-avatar > span:not(.member-status) {
display: none !important;
}
/* Profile header inner layout — avatar left, meta centre, badge panel right */
#item-header.bb-rl-profile-header {
display: flex !important;
align-items: center !important;
gap: 24px !important;
padding: 20px 28px !important;
position: relative !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* Remove extra bottom space from ALL header content children */
#item-header.bb-rl-profile-header *:last-child {
margin-bottom: 0 !important;
}
#bb-rl-item-header-content,
#bb-rl-item-header-content .bb-user-content-wrap,
.bb-rl-member-header-actions-wrap,
#bb-rl-profile-item-header,
#bb-rl-profile-container {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Force equal top/bottom padding on the outer card */
div#item-header.bb-rl-profile-header {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
/* Pills row — tier + date only */
.ac-profile-pills {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 6px !important;
}
/* ── Animations (referenced by badge emoji + signups count) ── */
@keyframes ac-badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
@keyframes ac-count-glow {
0% { text-shadow: 0 0 10px rgba(30, 255, 0, 0.2); }
100% { text-shadow: 0 0 25px rgba(30, 255, 0, 0.5), 0 0 50px rgba(30, 255, 0, 0.15); }
}
/* Force profile container to full width (BB class "left" constrains it) */
#bb-rl-profile-container {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
position: static !important;
}
/* ── Badge panel — Option B: two tinted cards ── */
/* Header flex row — avatar | content | badge panel */
#bb-rl-profile-item-header {
position: static !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 24px !important;
}
/* Two-card panel — absolutely positioned to far right */
.ac-profile-badge-panel {
margin-left: auto !important;
display: flex !important;
flex-direction: row !important;
gap: 16px !important;
align-items: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.ac-profile-badge-panel::before {
display: none !important;
}
/* Force badge panel to right edge of header card */
/* Anchored to outer card (#item-header.bb-rl-profile-header) via position:static on inner containers */
#item-header.bb-rl-profile-header .ac-profile-badge-panel {
position: absolute !important;
right: 36px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 5 !important;
}
/* Prevent content text from overlapping the badge panel */
#bb-rl-item-header-content {
padding-right: 320px !important;
}
/* ── Badge card ── */
.ac-profile-badge-info {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 4px !important;
background: rgba(139, 195, 74, 0.08) !important;
border: 1px solid rgba(139, 195, 74, 0.25) !important;
border-radius: 14px !important;
padding: 16px 24px !important;
min-width: 120px !important;
min-height: 100px !important;
}
.ac-profile-badge-emoji {
font-size: 4.5rem !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 72px !important;
height: 72px !important;
filter: drop-shadow(0 0 14px var(--badge-color, #8BC34A)) !important;
animation: ac-badge-pulse 2s ease-in-out infinite !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* WordPress converts emojis to ![]()
— target the img inside */
.ac-profile-badge-emoji img,
.ac-profile-badge-emoji img.emoji {
width: 72px !important;
height: 72px !important;
min-width: 72px !important;
min-height: 72px !important;
display: block !important;
}
.ac-profile-badge-name {
font-size: 1rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
color: var(--badge-color, #8BC34A) !important;
}
.ac-profile-badge-label {
font-size: 0.65rem !important;
color: #828FA0 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* ── Signups card ── */
.ac-profile-signups {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
background: rgba(30, 255, 0, 0.06) !important;
border: 1px solid rgba(30, 255, 0, 0.2) !important;
border-radius: 14px !important;
padding: 20px 24px !important;
min-width: 120px !important;
min-height: 100px !important;
text-align: center !important;
width: auto !important;
order: 3 !important;
}
.ac-profile-signups-count {
font-size: 2.5rem !important;
font-weight: 900 !important;
color: #1EFF00 !important;
line-height: 1 !important;
text-shadow: 0 0 20px rgba(30, 255, 0, 0.4) !important;
animation: ac-count-glow 2s ease-in-out infinite alternate !important;
}
.ac-profile-signups-label {
font-size: 0.65rem !important;
color: #828FA0 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
/* ==========================================================================
PROFILE DETAILS — hide Affiliate Referral Code field (4th field)
Will be auto-populated via WHMCS in Phase 2
========================================================================== */
.bb-rl-profile-widget-content.details .bb-rl-profile-widget-field:nth-child(4) {
display: none !important;
}
/* ── Responsive — hide badge panel on mobile ── */
@media (max-width: 700px) {
.ac-profile-badge-panel {
display: none !important;
}
#bb-rl-item-header-content {
padding-right: 0 !important;
}
}/* ── Profile content centering — match #page margin to actual sidebar width ── */
/* BuddyBoss sets #page margin-left: 300px but our sidebar is only 220px.
Reduce margin to match, and equalize content-wrapper padding. */
body.bp-user #page {
margin-left: 230px !important;
margin-right: 10px !important;
}
body.bp-user .bb-rl-content-wrapper {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* ==========================================================================
PROFILE PAGE — Option C: two-column Details + Activity panel
Replaces the default BuddyBoss Details widget.
========================================================================== */
/* Hide the default BuddyBoss Details widget (but keep our custom panel) */
body.bp-user .bb-rl-secondary-container .widget:not(.ac-details-panel),
body.bp-user .bb-rl-secondary-container .bp-widget:not(.ac-details-panel),
body.bp-user .bb-rl-secondary-container .bb-rl-profile-widget:not(.ac-details-panel) {
display: none !important;
}
/* Ensure our custom panel is always visible */
.ac-details-panel {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Show our custom panel instead */
.ac-details-panel {
width: 100% !important;
margin-bottom: 20px !important;
position: relative !important;
isolation: isolate !important;
border-radius: 25px !important;
}
/* Gradient border */
.ac-details-panel::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #6869FF 25%, #FE00FF 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
.ac-details-panel::after {
content: '' !important;
position: absolute !important;
inset: 2px !important;
border-radius: 23px !important;
background: #02022D !important;
z-index: -1 !important;
pointer-events: none !important;
}
.ac-details-panel-inner {
position: relative !important;
z-index: 1 !important;
display: flex !important;
gap: 24px !important;
padding: 28px 32px !important;
font-family: Inter, sans-serif !important;
}
/* ── Column headers ── */
.ac-details-col-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 16px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(104, 105, 255, 0.2) !important;
}
.ac-details-col-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #fff !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.ac-details-edit-link {
font-size: 12px !important;
font-weight: 500 !important;
color: #6869FF !important;
text-decoration: none !important;
}
.ac-details-edit-link:hover {
color: #fff !important;
}
/* ── Left column — Details ── */
.ac-details-left {
flex: 1 !important;
min-width: 0 !important;
}
.ac-details-field {
margin-bottom: 14px !important;
}
.ac-details-field:last-child {
margin-bottom: 0 !important;
}
.ac-details-label {
color: #828FA0 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
margin-bottom: 2px !important;
}
.ac-details-value {
color: #fff !important;
font-size: 15px !important;
font-weight: 600 !important;
}
.ac-details-value--link {
color: #6869FF !important;
font-size: 13px !important;
font-weight: 500 !important;
word-break: break-all !important;
}
/* ── Divider ── */
.ac-details-divider {
width: 1px !important;
background: rgba(104, 105, 255, 0.15) !important;
flex-shrink: 0 !important;
align-self: stretch !important;
}
/* ── Right column — Activity ── */
.ac-details-right {
flex: 1 !important;
min-width: 0 !important;
}
/* Mini stat cards */
.ac-details-stats-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
margin-bottom: 18px !important;
}
.ac-details-mini-stat {
background: rgba(104, 105, 255, 0.08) !important;
border: 1px solid rgba(104, 105, 255, 0.2) !important;
border-radius: 10px !important;
padding: 12px !important;
text-align: center !important;
}
.ac-details-mini-value {
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.ac-details-mini--green { color: #1EFF00 !important; }
.ac-details-mini--blue { color: #6869FF !important; }
.ac-details-mini--amber { color: #F0AD4E !important; }
.ac-details-mini-label {
color: #828FA0 !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin-top: 4px !important;
}
/* Badge progress */
.ac-details-progress {
margin-bottom: 16px !important;
}
.ac-details-progress-header {
display: flex !important;
justify-content: space-between !important;
margin-bottom: 6px !important;
}
.ac-details-progress-label {
color: #828FA0 !important;
font-size: 11px !important;
text-transform: uppercase !important;
}
.ac-details-progress-count {
color: #fff !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.ac-details-progress-track {
height: 8px !important;
background: rgba(255, 255, 255, 0.06) !important;
border-radius: 4px !important;
overflow: hidden !important;
margin-bottom: 6px !important;
}
.ac-details-progress-fill {
height: 100% !important;
background: linear-gradient(90deg, #6869FF, #FE00FF) !important;
border-radius: 4px !important;
transition: width 0.6s ease !important;
}
.ac-details-progress-badges {
display: flex !important;
justify-content: space-between !important;
}
.ac-details-progress-current {
font-size: 11px !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.ac-details-progress-next {
font-size: 11px !important;
color: #828FA0 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
/* Earnings card */
.ac-details-earnings {
background: rgba(30, 255, 0, 0.05) !important;
border: 1px solid rgba(30, 255, 0, 0.15) !important;
border-radius: 10px !important;
padding: 14px !important;
text-align: center !important;
}
.ac-details-earnings-label {
color: #828FA0 !important;
font-size: 11px !important;
text-transform: uppercase !important;
margin-bottom: 4px !important;
}
.ac-details-earnings-value {
color: #1EFF00 !important;
font-size: 26px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.ac-details-earnings-note {
color: #828FA0 !important;
font-size: 11px !important;
margin-top: 6px !important;
font-style: italic !important;
}
/* ── Responsive — stack on mobile ── */
@media (max-width: 700px) {
.ac-details-panel-inner {
flex-direction: column !important;
}
.ac-details-divider {
width: 100% !important;
height: 1px !important;
}
}
/* ==========================================================================
PROFILE PREFERENCES — Timezone selector + Password Reset link
Injected below the Details/Activity panel on the profile page.
========================================================================== */
.ac-profile-preferences {
width: 100% !important;
margin-bottom: 20px !important;
position: relative !important;
isolation: isolate !important;
}
.ac-pref-panel {
position: relative !important;
border-radius: 25px !important;
isolation: isolate !important;
}
/* Gradient border — exact same as Details panel */
.ac-pref-panel::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #6869FF 25%, #FE00FF 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
.ac-pref-panel::after {
content: '' !important;
position: absolute !important;
inset: 2px !important;
border-radius: 23px !important;
background: #02022D !important;
z-index: -1 !important;
pointer-events: none !important;
}
.ac-pref-inner {
position: relative !important;
z-index: 1 !important;
padding: 24px 32px !important;
font-family: Inter, sans-serif !important;
}
/* ── Section layout ── */
.ac-pref-section {
padding: 4px 0 !important;
}
.ac-pref-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 14px !important;
}
.ac-pref-icon {
font-size: 1.4rem !important;
flex-shrink: 0 !important;
width: 28px !important;
text-align: center !important;
}
.ac-pref-title {
font-weight: 700 !important;
font-size: 15px !important;
color: #E0E0FF !important;
line-height: 1.3 !important;
}
.ac-pref-subtitle {
font-size: 12px !important;
color: rgba(224, 224, 255, 0.45) !important;
margin-top: 2px !important;
line-height: 1.3 !important;
}
/* ── Timezone select row ── */
.ac-pref-row {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
.ac-pref-select {
background: rgba(2, 2, 45, 0.6) !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
border-radius: 8px !important;
color: #E0E0FF !important;
padding: 8px 14px !important;
font-size: 14px !important;
min-width: 260px !important;
outline: none !important;
cursor: pointer !important;
transition: border-color 0.2s !important;
}
.ac-pref-select:focus {
border-color: #6869FF !important;
}
.ac-pref-select option,
.ac-pref-select optgroup {
background: #0a0a2e !important;
}
.ac-pref-save-btn {
background: linear-gradient(135deg, #6869FF 0%, #AB47BC 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 8px 22px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: opacity 0.2s !important;
}
.ac-pref-save-btn:hover {
opacity: 0.85 !important;
}
.ac-pref-save-btn:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
}
.ac-pref-status {
font-size: 13px !important;
color: #66BB6A !important;
opacity: 0 !important;
transition: opacity 0.3s !important;
}
.ac-pref-status-error {
color: #EF5350 !important;
}
.ac-pref-current {
margin-top: 10px !important;
font-size: 12px !important;
color: rgba(224, 224, 255, 0.4) !important;
}
.ac-pref-current strong {
color: rgba(224, 224, 255, 0.7) !important;
}
/* ── Divider between sections ── */
.ac-pref-divider {
height: 1px !important;
background: rgba(104, 105, 255, 0.12) !important;
margin: 18px 0 !important;
}
/* ── Password Reset link — clickable row with arrow ── */
.ac-pref-password-link {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 8px !important;
border-radius: 10px !important;
text-decoration: none !important;
color: inherit !important;
transition: background 0.2s !important;
cursor: pointer !important;
}
.ac-pref-password-link:hover {
background: rgba(104, 105, 255, 0.08) !important;
}
.ac-pref-password-link .ac-pref-title {
color: #E0E0FF !important;
}
.ac-pref-password-link .ac-pref-subtitle {
color: rgba(224, 224, 255, 0.4) !important;
}
.ac-pref-arrow {
margin-left: auto !important;
font-size: 24px !important;
color: rgba(104, 105, 255, 0.5) !important;
font-weight: 300 !important;
transition: color 0.2s, transform 0.2s !important;
}
.ac-pref-password-link:hover .ac-pref-arrow {
color: #6869FF !important;
transform: translateX(3px) !important;
}
/* ── Responsive — stack on narrow screens ── */
@media (max-width: 700px) {
.ac-pref-inner {
padding: 18px 16px !important;
}
.ac-pref-select {
min-width: 100% !important;
}
.ac-pref-row {
flex-direction: column !important;
align-items: stretch !important;
}
}
/* ==========================================================================
SHARE STATION — slide-out panel + edge tab (site-wide, logged-in only)
========================================================================== */
/* ── Edge tab — fixed to right side of screen ── */
.ac-share-tab {
position: fixed !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 99980 !important;
background: linear-gradient(180deg, #6869FF, #FE00FF) !important;
color: #fff !important;
border-radius: 12px 0 0 12px !important;
padding: 14px 8px !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
font-family: Inter, sans-serif !important;
box-shadow: -4px 0 20px rgba(104, 105, 255, 0.3) !important;
transition: transform 0.3s ease, opacity 0.3s ease !important;
writing-mode: horizontal-tb !important;
user-select: none !important;
}
.ac-share-tab:hover {
transform: translateY(-50%) translateX(-4px) !important;
box-shadow: -6px 0 28px rgba(104, 105, 255, 0.45) !important;
}
.ac-share-tab.ac-ss-hidden {
transform: translateY(-50%) translateX(100%) !important;
opacity: 0 !important;
pointer-events: none !important;
}
.ac-share-tab-icon {
font-size: 20px !important;
line-height: 1 !important;
}
.ac-share-tab-text {
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
line-height: 1.2 !important;
text-align: center !important;
}
/* ── Slide-out panel ── */
.ac-share-station {
position: fixed !important;
right: 0 !important;
top: 50% !important;
width: 380px !important;
max-width: 90vw !important;
z-index: 99985 !important;
background: #02022D !important;
border: none !important;
border-radius: 25px 0 0 25px !important;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6) !important;
transform: translateX(100%) translateY(-50%) !important;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
overflow: visible !important;
max-height: 90vh !important;
isolation: isolate !important;
}
/* Gradient border using mask technique (border-image kills border-radius) */
.ac-share-station::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
border-radius: 25px 0 0 25px !important;
padding: 2px !important;
padding-right: 0 !important;
background: linear-gradient(180deg, rgba(255,255,255,0.5), #6869FF, #FE00FF, rgba(255,255,255,0.5)) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: -1 !important;
}
.ac-share-station.ac-ss-open {
transform: translateX(0) translateY(-50%) !important;
}
.ac-share-station-inner {
padding: 24px 20px 28px !important;
font-family: Inter, sans-serif !important;
max-height: 90vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(104,105,255,0.4) transparent !important;
border-radius: 25px 0 0 25px !important;
}
/* ── Overlay ── */
.ac-share-overlay {
position: fixed !important;
inset: 0 !important;
z-index: 99982 !important;
background: rgba(3, 5, 32, 0.6) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.3s ease !important;
}
.ac-share-overlay.ac-ss-open {
opacity: 1 !important;
pointer-events: auto !important;
}
/* ── Header ── */
.ac-ss-header {
text-align: center !important;
margin-bottom: 18px !important;
position: relative !important;
}
.ac-ss-title {
font-size: 18px !important;
font-weight: 800 !important;
color: #fff !important;
}
.ac-ss-subtitle {
font-size: 12px !important;
color: #828FA0 !important;
margin-top: 3px !important;
}
.ac-ss-close {
position: absolute !important;
top: 0 !important;
right: 0 !important;
background: transparent !important;
border: none !important;
color: #828FA0 !important;
font-size: 24px !important;
cursor: pointer !important;
padding: 0 8px !important;
line-height: 1 !important;
transition: color 0.15s !important;
}
.ac-ss-close:hover {
color: #fff !important;
transform: none !important;
opacity: 1 !important;
}
/* ── Link row ── */
.ac-ss-link-row {
display: flex !important;
gap: 0 !important;
border-radius: 10px !important;
overflow: hidden !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
margin-bottom: 4px !important;
}
.ac-ss-link-input {
flex: 1 !important;
background: rgba(255,255,255,0.05) !important;
border: none !important;
padding: 11px 14px !important;
font-family: 'Courier New', monospace !important;
font-size: 11px !important;
color: #fff !important;
outline: none !important;
min-width: 0 !important;
}
.ac-ss-copy-btn {
background: linear-gradient(135deg, #6869FF, #FE00FF) !important;
border: none !important;
padding: 11px 20px !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #fff !important;
cursor: pointer !important;
white-space: nowrap !important;
font-family: Inter, sans-serif !important;
border-radius: 0 !important;
min-width: auto !important;
transition: opacity 0.15s !important;
}
.ac-ss-copy-btn:hover {
opacity: 0.85 !important;
transform: none !important;
}
.ac-ss-copy-confirm {
font-size: 11px !important;
color: #1EFF00 !important;
min-height: 18px !important;
margin-bottom: 10px !important;
text-align: center !important;
}
/* ── Quick share row ── */
.ac-ss-quick-row {
display: flex !important;
gap: 8px !important;
justify-content: center !important;
margin-bottom: 6px !important;
}
.ac-ss-quick-btn {
background: rgba(104, 105, 255, 0.15) !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
border-radius: 10px !important;
padding: 10px 12px !important;
text-align: center !important;
cursor: pointer !important;
flex: 1 !important;
font-size: 20px !important;
line-height: 1 !important;
text-decoration: none !important;
transition: background 0.15s, border-color 0.15s !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.ac-ss-quick-btn:hover {
background: rgba(104, 105, 255, 0.3) !important;
border-color: rgba(104, 105, 255, 0.5) !important;
}
.ac-ss-quick-btn--green {
background: rgba(30, 255, 0, 0.08) !important;
border-color: rgba(30, 255, 0, 0.2) !important;
}
.ac-ss-quick-btn--green:hover {
background: rgba(30, 255, 0, 0.15) !important;
}
.ac-ss-quick-label {
color: #828FA0 !important;
font-size: 9px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
text-align: center !important;
margin-bottom: 16px !important;
}
/* ── Tabs ── */
.ac-ss-tabs-wrap {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(104, 105, 255, 0.12) !important;
border-radius: 14px !important;
padding: 14px !important;
margin-bottom: 16px !important;
}
.ac-ss-tab-bar {
display: flex !important;
gap: 4px !important;
background: rgba(255,255,255,0.04) !important;
border-radius: 8px !important;
padding: 3px !important;
margin-bottom: 14px !important;
}
.ac-ss-tab {
flex: 1 !important;
text-align: center !important;
padding: 7px 8px !important;
font-size: 11px !important;
font-weight: 600 !important;
color: #828FA0 !important;
background: transparent !important;
border: none !important;
border-radius: 6px !important;
cursor: pointer !important;
font-family: Inter, sans-serif !important;
transition: background 0.2s, color 0.2s !important;
}
.ac-ss-tab:hover:not(.active) {
color: #fff !important;
transform: none !important;
opacity: 1 !important;
}
.ac-ss-tab.active {
background: linear-gradient(135deg, #6869FF, #FE00FF) !important;
color: #fff !important;
}
/* ── Panels ── */
.ac-ss-panel {
display: none !important;
}
.ac-ss-panel.active {
display: block !important;
}
/* ── Platform grid ── */
.ac-ss-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 6px !important;
}
.ac-ss-platform {
background: rgba(104, 105, 255, 0.08) !important;
border: 1px solid rgba(104, 105, 255, 0.15) !important;
border-radius: 10px !important;
padding: 10px 4px !important;
text-align: center !important;
cursor: pointer !important;
text-decoration: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 3px !important;
transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
}
.ac-ss-platform:hover {
background: rgba(104, 105, 255, 0.2) !important;
border-color: rgba(104, 105, 255, 0.4) !important;
transform: translateY(-2px) !important;
}
.ac-ss-platform--green {
background: rgba(30, 255, 0, 0.06) !important;
border-color: rgba(30, 255, 0, 0.15) !important;
}
.ac-ss-platform--green:hover {
background: rgba(30, 255, 0, 0.12) !important;
}
.ac-ss-platform-icon {
font-size: 22px !important;
line-height: 1 !important;
}
.ac-ss-platform-name {
color: #fff !important;
font-size: 9px !important;
font-weight: 600 !important;
font-family: Inter, sans-serif !important;
}
/* ── Stats strip ── */
.ac-ss-stats {
display: flex !important;
gap: 10px !important;
border-top: 1px solid rgba(104, 105, 255, 0.12) !important;
padding-top: 14px !important;
}
.ac-ss-stat {
flex: 1 !important;
background: rgba(104, 105, 255, 0.06) !important;
border-radius: 10px !important;
padding: 10px !important;
text-align: center !important;
}
.ac-ss-stat-value {
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.ac-ss-stat--blue { color: #6869FF !important; }
.ac-ss-stat--green { color: #1EFF00 !important; }
.ac-ss-stat--amber { color: #F0AD4E !important; }
.ac-ss-stat-label {
color: #828FA0 !important;
font-size: 9px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin-top: 4px !important;
}
/* ── QR Code toggle button (visible at top of panel) ── */
.ac-ss-qr-toggle {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
background: linear-gradient(135deg, rgba(104,105,255,0.2), rgba(254,0,255,0.15)) !important;
border: 1px solid rgba(104, 105, 255, 0.4) !important;
border-radius: 16px !important;
padding: 18px 18px 14px !important;
margin-bottom: 14px !important;
cursor: pointer !important;
font-family: Inter, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #fff !important;
transition: all 0.2s ease !important;
box-shadow: 0 0 20px rgba(104, 105, 255, 0.18), inset 0 1px 0 rgba(255,255,255,0.06) !important;
position: relative !important;
overflow: hidden !important;
}
.ac-ss-qr-toggle::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent) !important;
animation: ac-qr-shimmer 3s ease-in-out infinite !important;
pointer-events: none !important;
}
@keyframes ac-qr-shimmer {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
.ac-ss-qr-toggle:hover {
background: linear-gradient(135deg, rgba(104,105,255,0.35), rgba(254,0,255,0.25)) !important;
border-color: rgba(104, 105, 255, 0.6) !important;
box-shadow: 0 0 28px rgba(104, 105, 255, 0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
transform: translateY(-2px) !important;
opacity: 1 !important;
}
.ac-ss-qr-toggle-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
filter: drop-shadow(0 0 8px rgba(104,105,255,0.4)) !important;
}
.ac-ss-qr-toggle-label {
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
background: linear-gradient(90deg, #fff, #c4c0ff) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-align: center !important;
}
/* ── QR Code modal (inside panel) ── */
.ac-ss-qr-modal {
display: none !important;
background: rgba(104, 105, 255, 0.06) !important;
border: 1px solid rgba(104, 105, 255, 0.2) !important;
border-radius: 14px !important;
margin-bottom: 16px !important;
overflow: hidden !important;
}
.ac-ss-qr-modal.ac-ss-qr-visible {
display: block !important;
}
/* ── Responsive — mobile adjustments ── */
@media (max-width: 480px) {
.ac-share-station {
width: 100vw !important;
max-width: 100vw !important;
}
.ac-ss-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.ac-share-tab {
top: auto !important;
bottom: 100px !important;
transform: translateY(0) !important;
}
.ac-share-tab:hover {
transform: translateX(-4px) !important;
}
.ac-share-tab.ac-ss-hidden {
transform: translateX(100%) !important;
}
}
/* ==========================================================================
COMMUNITY / ACTIVITY FEED — brand styling for BuddyBoss ReadyLaunch
Overrides BB's default gray theme on activity cards, post form, and
hides empty GamiPress injected divs.
========================================================================== */
/* ── Hide GamiPress empty divs (dark blue bars in feed) ───────────────── */
.gamipress-buddyboss-gamipress-elements:empty,
.activity-content.gamipress-buddyboss-gamipress-elements:empty {
display: none !important;
}
/* ── Activity feed cards — gradient border matching dashboard ──────────── */
.activity-item,
li.activity,
.bb-rl-activity-item {
position: relative !important;
background: var(--ac-deep-navy) !important;
border: none !important;
border-radius: 25px !important;
padding: 20px 24px !important;
margin-bottom: 16px !important;
transition: box-shadow 0.2s ease !important;
}
.activity-item::before,
li.activity::before,
.bb-rl-activity-item::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(rgba(255,255,255,0.5) 0%, var(--ac-periwinkle) 25%, var(--ac-magenta) 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
}
.activity-item:hover,
li.activity:hover {
box-shadow: 0 8px 32px rgba(104, 105, 255, 0.12) !important;
}
/* ── Post form — "Share what's on your mind" ──────────────────────────── */
#whats-new-form,
.bb-rl-whats-new-form,
.activity-update-form,
.bb-rl-activity-post-form,
.bb-rl-activity-form {
position: relative !important;
background: var(--ac-deep-navy) !important;
border: none !important;
border-radius: 25px !important;
padding: 16px 20px !important;
margin-bottom: 20px !important;
overflow: hidden !important;
}
/* ── "CREATE A POST" gradient banner (injected via JS) ────────────────── */
.ac-post-form-banner {
text-align: center !important;
font-family: Inter, sans-serif !important;
font-size: 18px !important;
font-weight: 800 !important;
color: var(--ac-periwinkle) !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 14px 24px !important;
background: linear-gradient(135deg, rgba(104,105,255,0.15), rgba(254,0,255,0.08)) !important;
margin: -16px -20px 16px -20px !important;
border-radius: 23px 23px 0 0 !important;
position: relative !important;
z-index: 1 !important;
}
#whats-new-form::before,
.bb-rl-whats-new-form::before,
.activity-update-form::before,
.bb-rl-activity-post-form::before,
.bb-rl-activity-form::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(rgba(255,255,255,0.5) 0%, var(--ac-periwinkle) 25%, var(--ac-magenta) 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
}
/* Post form textarea */
#whats-new,
.bb-rl-whats-new-textarea,
[class*="whats-new"] textarea {
background: rgba(104, 105, 255, 0.06) !important;
border: 1px solid rgba(104, 105, 255, 0.12) !important;
border-radius: 14px !important;
color: var(--ac-white) !important;
padding: 12px 16px !important;
}
/* ── Filter dropdowns ─────────────────────────────────────────────────── */
.bb-rl-dropdown button,
.bb-rl-dropdown select,
.activity-type-filter,
.feed-filter {
background: rgba(104, 105, 255, 0.06) !important;
border: 1px solid rgba(104, 105, 255, 0.2) !important;
border-radius: 10px !important;
color: var(--ac-slate) !important;
}
/* ── Activity filter buttons (All Updates / New Posts) — gradient style ── */
.bb-rl-activity-filters-container {
gap: 10px !important;
}
/* Left-justify the filter buttons (BB defaults margin-left: auto) */
.bb-rl-activity-filters-container .activity-head-bar {
margin-left: 0 !important;
margin-right: auto !important;
justify-content: flex-start !important;
gap: 10px !important;
}
.bb-rl-activity-filters-container .subnav-filters-opener {
background: var(--ac-gradient) !important;
border: none !important;
border-radius: 8px !important;
color: var(--ac-deep-navy) !important;
padding: 7px 16px !important;
font-weight: 700 !important;
font-size: 13px !important;
}
/* Emoji, icons, and text inside filter buttons — dark color */
.bb-rl-activity-filters-container .subnav-filters-opener *,
.bb-rl-activity-filters-container .subnav-filters-opener svg {
color: var(--ac-deep-navy) !important;
fill: var(--ac-deep-navy) !important;
font-weight: 700 !important;
}
/* ── Activity text colors ─────────────────────────────────────────────── */
.activity-inner,
.activity-content p {
color: var(--ac-white) !important;
}
.activity-header,
.activity-header a {
color: var(--ac-white) !important;
}
.activity-header .time-since,
.activity-header .activity-time-since {
color: var(--ac-slate) !important;
}
/* ── Center profile photo images in activity feed cards ───────────────── */
.bb-rl-activity-content-avatar img,
.bb-rl-activity-inner .bb-rl-activity-content-avatar img {
margin-left: auto !important;
margin-right: auto !important;
}
/* ── Like / Comment buttons — dark navy text on gradient, bold ─────────── */
.bb-rl-activity-actions a,
.activity-meta a,
.acomment-reply {
border-radius: 8px !important;
color: var(--ac-deep-navy) !important;
font-weight: 700 !important;
}
/* ── Activity footer — Like left, Comment + count right ────────────────── */
.bb-rl-activity-footer-actions {
justify-content: space-between !important;
gap: 10px !important;
}
/* Stretch activity-meta so Like sits left, Comment pushes right */
.bb-rl-activity-footer-actions .bp-generic-meta.activity-meta,
.bb-rl-activity-footer-actions .activity-meta {
flex: 1 !important;
justify-content: space-between !important;
}
/* Comment count sits next to Comment button with padding */
.bb-rl-activity-footer-actions .activity-state {
margin-left: 0 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* ==========================================================================
SITE FOOTER — copyright bar at bottom of page (normal flow).
Full viewport width on all pages including sidebar layouts.
========================================================================== */
.ac-site-footer {
position: relative !important;
width: 100% !important;
border-top: 1px solid rgba(104, 105, 255, 0.3) !important;
background: var(--ac-deep-navy) !important;
padding: 20px 0 !important;
margin-top: 40px !important;
margin-left: 0 !important;
z-index: 99999 !important;
}
.ac-site-footer-inner {
text-align: center !important;
font-family: Inter, sans-serif !important;
font-size: 13px !important;
color: #828FA0 !important;
letter-spacing: 0.02em !important;
}
/* ==========================================================================
COMMUNITY POST FORM â MAKEOVER + FIXES (v1.2.55)
========================================================================== */
/* ââ Hide BB "Create a post" white header in expanded modal âââââââââââââ */
#bb-rl-activity-header,
.bb-rl-activity-form .bb-rl-bb-model-header {
display: none !important;
}
/* ââ Form header: stack greeting row above textarea âââââââââââââââââââââ */
[data-ac-visible="true"].bb-rl-whats-new-form-header {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
/* ââ Huddle: avatar + greeting side by side âââââââââââââââââââââââââââââ */
[data-ac-visible="true"]#bb-rl-user-status-huddle {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 14px !important;
padding: 4px 0 12px !important;
width: 100% !important;
}
[data-ac-visible="true"] .bb-rl-activity-post-name-status {
display: block !important;
flex: 1 !important;
}
/* ââ Greeting text ââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.ac-greeting-main {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--ac-white) !important;
font-family: Inter, sans-serif !important;
line-height: 1.3 !important;
}
.ac-greeting-sub {
font-size: 12px !important;
color: var(--ac-slate) !important;
font-family: Inter, sans-serif !important;
line-height: 1.3 !important;
margin-top: 2px !important;
}
/* ââ Avatar â 64px with gradient ring âââââââââââââââââââââââââââââââââââ */
[data-ac-visible="true"]#bb-rl-whats-new-avatar .bb-rl-activity-post-avatar-container,
[data-ac-visible="true"]#bb-rl-whats-new-avatar .bb-rl-activity-post-avatar-container a {
width: 64px !important;
height: 64px !important;
}
[data-ac-visible="true"]#bb-rl-whats-new-avatar img,
[data-ac-visible="true"] .bb-rl-activity-post-avatar-container img {
width: 64px !important;
height: 64px !important;
border: 2px solid transparent !important;
background-image: linear-gradient(var(--ac-deep-navy), var(--ac-deep-navy)), linear-gradient(135deg, var(--ac-periwinkle), var(--ac-magenta)) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
border-radius: 50% !important;
}
/* ââ Textarea container â styled box ââââââââââââââââââââââââââââââââââââ */
[data-ac-visible="true"]#bb-rl-whats-new-content {
background: rgba(104, 105, 255, 0.06) !important;
border: 1px solid rgba(104, 105, 255, 0.15) !important;
border-radius: 14px !important;
padding: 10px 16px !important;
min-height: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Textarea â COLLAPSED only: compact single-line */
.bb-rl-focus-in--empty [data-ac-visible="true"] #bb-rl-whats-new-textarea,
.bb-rl-focus-in--empty [data-ac-visible="true"] #bb-rl-whats-new {
min-height: 24px !important;
height: auto !important;
max-height: 40px !important;
line-height: 20px !important;
}
/* Textarea â ALL states: font styling */
[data-ac-visible="true"] #bb-rl-whats-new-textarea,
[data-ac-visible="true"] #bb-rl-whats-new {
color: var(--ac-slate) !important;
font-size: 14px !important;
font-family: Inter, sans-serif !important;
}
/* Textarea â EXPANDED: allow content to grow and scroll */
.bb-rl-activity-form:not(.bb-rl-focus-in--empty) [data-ac-visible="true"] #bb-rl-whats-new-textarea,
.bb-rl-activity-form:not(.bb-rl-focus-in--empty) [data-ac-visible="true"] #bb-rl-whats-new,
.bb-rl-activity-form:not(.bb-rl-focus-in--empty) #bb-rl-whats-new-textarea,
.bb-rl-activity-form:not(.bb-rl-focus-in--empty) #bb-rl-whats-new {
max-height: none !important;
min-height: 80px !important;
overflow-y: auto !important;
}
/* Hide title input in collapsed form */
[data-ac-visible="true"] #bb-rl-whats-new-title {
display: none !important;
}
/* ââ "Post Now!" button row â centered ââââââââââââââââââââââââââââââââââ */
.ac-post-now-row {
display: flex !important;
justify-content: center !important;
padding: 10px 0 0 !important;
}
.ac-post-now-btn {
background: linear-gradient(135deg, var(--ac-periwinkle), var(--ac-magenta)) !important;
color: var(--ac-deep-navy) !important;
font-weight: 700 !important;
font-size: 13px !important;
font-family: Inter, sans-serif !important;
border: none !important;
border-radius: 8px !important;
padding: 7px 16px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
cursor: pointer !important;
letter-spacing: 0.02em !important;
}
.ac-post-now-btn:hover {
opacity: 0.9 !important;
}
/* ââ Filter buttons: "New Posts" aligned right with padding âââââââââââââ */
.bb-rl-activity-filters-container {
padding-left: 20px !important;
padding-right: 20px !important;
border-bottom: none !important;
position: relative !important;
}
.bb-rl-activity-filters-container .activity-head-bar {
justify-content: space-between !important;
width: 100% !important;
margin-right: 0 !important;
}
/* ââ Gradient separator line under filter buttons âââââââââââââââââââââââ */
.bb-rl-activity-filters-container::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, var(--ac-periwinkle) 25%, var(--ac-magenta) 75%, rgba(255,255,255,0.5) 100%) !important;
}
/* ââ Activity card: timestamp on same line as name, right-justified ââââ */
.bb-rl-activity-header {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
flex: 1 !important;
}
.bb-rl-activity-header > p:first-child {
margin: 0 !important;
}
.bb-rl-activity-header > p.activity-date {
margin: 0 0 0 auto !important;
padding-right: 8px !important;
}
.bb-rl-activity-header > p.activity-date a {
font-size: 12px !important;
color: var(--ac-slate) !important;
}
/* Hide the privacy globe â keep clean */
.bb-rl-activity-header .bb-media-privacy-wrap {
display: none !important;
}
/* Parent head row: give header flex:1 */
.bb-rl-activity-head {
width: 100% !important;
}
/* ── Like reaction — clean appearance for both states ─────────────────── */
/* Liked Like button: show icon but remove the dark circle background */
.bp-like-button.unfav .bb-icon-thumbs-up.bb-icon-rf,
.bp-like-button.has-like .bb-icon-thumbs-up.bb-icon-rf,
.bp-like-button.has-reaction .bb-icon-thumbs-up.bb-icon-rf {
display: flex !important;
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
color: var(--ac-deep-navy) !important;
}
.bp-like-button.unfav .bb-icon-thumbs-up.bb-icon-rf::before,
.bp-like-button.has-like .bb-icon-thumbs-up.bb-icon-rf::before,
.bp-like-button.has-reaction .bb-icon-thumbs-up.bb-icon-rf::before {
background: transparent !important;
color: var(--ac-deep-navy) !important;
}
/* Keep .like-count visible inside Like button */
.bp-like-button .like-count {
display: block !important;
font-size: 13px !important;
}
/* Reaction count area: show the white thumbs up icon, hide colored emojis */
.activity-state-reactions .reactions_item {
display: inline-flex !important;
}
.activity-state-reactions .reactions_item img,
.activity-state-reactions img.emoji {
display: none !important;
}
/* ==========================================================================
PROFILE EDIT / CHANGE-AVATAR — Single-page layout (v1.2.56)
========================================================================== */
/* Show item-body on edit/avatar pages */
body.profile-edit .bb-rl-primary-container .item-body,
body.change-avatar .bb-rl-primary-container .item-body,
body.delete-avatar .bb-rl-primary-container .item-body {
display: block !important;
}
/* Hide ALL sidebars */
body.profile-edit #secondary,
body.profile-edit .bb-rl-left-panel,
body.change-avatar #secondary,
body.change-avatar .bb-rl-left-panel,
body.delete-avatar #secondary,
body.delete-avatar .bb-rl-left-panel {
display: none !important;
width: 0 !important;
}
body.profile-edit #page,
body.change-avatar #page,
body.delete-avatar #page {
margin-left: 0 !important;
}
/* Hide Details + Activity panel */
body.profile-edit .ac-details-panel,
body.profile-edit .ac-details-panel-inner,
body.change-avatar .ac-details-panel,
body.change-avatar .ac-details-panel-inner,
body.delete-avatar .ac-details-panel,
body.delete-avatar .ac-details-panel-inner {
display: none !important;
}
/* Full-width content */
body.profile-edit .bb-rl-content-wrapper,
body.change-avatar .bb-rl-content-wrapper,
body.delete-avatar .bb-rl-content-wrapper {
margin-left: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
width: 100% !important;
}
body.profile-edit .bb-rl-inner-container,
body.change-avatar .bb-rl-inner-container,
body.delete-avatar .bb-rl-inner-container {
margin-left: 0 !important;
padding-left: 0 !important;
}
body.profile-edit .bb-rl-primary-container,
body.change-avatar .bb-rl-primary-container,
body.delete-avatar .bb-rl-primary-container {
max-width: 800px !important;
margin: 20px auto !important;
}
/* Hide the subnav links */
body.profile-edit .bb-rl-profile-edit-subnav,
body.change-avatar .bb-rl-profile-edit-subnav,
body.delete-avatar .bb-rl-profile-edit-subnav {
display: none !important;
}
/* Edit profile / change-avatar panel — gradient border */
body.profile-edit .bb-rl-profile-panel,
body.change-avatar .bb-rl-profile-panel,
body.delete-avatar .bb-rl-profile-panel {
position: relative !important;
border-radius: 25px !important;
padding: 16px 20px !important;
background: var(--ac-deep-navy) !important;
overflow: hidden !important;
max-width: 100% !important;
width: 100% !important;
}
body.profile-edit .bb-rl-profile-panel::before,
body.change-avatar .bb-rl-profile-panel::before,
body.delete-avatar .bb-rl-profile-panel::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(rgba(255,255,255,0.5) 0%, var(--ac-periwinkle) 25%, var(--ac-magenta) 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 1 !important;
}
body.profile-edit .bb-rl-profile-edit-wrapper,
body.change-avatar .bb-rl-profile-edit-wrapper,
body.delete-avatar .bb-rl-profile-edit-wrapper {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* Hide Affiliate Code + description */
.editfield.field_affiliate-referral-code {
display: none !important;
}
.editfield.field_affiliate-referral-link p.description {
display: none !important;
}
/* ── Profile Photo panel — Option B banner style ──────────────────────── */
.ac-photo-panel {
position: relative !important;
border-radius: 25px !important;
background: var(--ac-deep-navy) !important;
overflow: hidden !important;
margin-bottom: 16px !important;
max-width: 75% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ac-photo-panel::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
padding: 2px !important;
background: linear-gradient(rgba(255,255,255,0.5) 0%, var(--ac-periwinkle) 25%, var(--ac-magenta) 75%, rgba(255,255,255,0.5) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Banner header — gradient bg like Create a Post */
.ac-photo-banner {
background: linear-gradient(135deg, rgba(104,105,255,0.15), rgba(254,0,255,0.08)) !important;
padding: 12px 24px !important;
text-align: center !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--ac-periwinkle) !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
font-family: Inter, sans-serif !important;
}
/* Body — centered photo + buttons */
.ac-photo-panel-body {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 20px 24px !important;
gap: 16px !important;
}
.ac-photo-avatar {
width: 120px !important;
height: 120px !important;
border-radius: 50% !important;
border: 3px solid transparent !important;
background-image: linear-gradient(var(--ac-deep-navy), var(--ac-deep-navy)), linear-gradient(135deg, var(--ac-periwinkle), var(--ac-magenta)) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
object-fit: cover !important;
}
.ac-photo-actions {
display: flex !important;
flex-direction: row !important;
gap: 10px !important;
}
/* Buttons — gradient pill matching mockup */
.ac-photo-btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 10px 28px !important;
border-radius: 10px !important;
font-size: 15px !important;
font-weight: 700 !important;
font-family: Inter, sans-serif !important;
text-decoration: none !important;
cursor: pointer !important;
color: #000 !important;
background: linear-gradient(135deg, var(--ac-periwinkle), var(--ac-magenta)) !important;
border: none !important;
letter-spacing: 0.02em !important;
}
/* Delete Photo — magenta tint (not red) */
.ac-photo-btn-delete {
background: rgba(254, 0, 255, 0.08) !important;
color: var(--ac-magenta) !important;
border: 1px solid rgba(254, 0, 255, 0.35) !important;
}
.ac-photo-btn:hover {
opacity: 0.9 !important;
}
/* Hide emoji icons inside photo buttons — clean text-only look */
.ac-photo-btn .emoji,
.ac-photo-btn img.emoji {
display: none !important;
}
/* Hide the injected photo panel on the BB change-avatar page (BB shows its own uploader) */
body.change-avatar .ac-photo-panel,
body.delete-avatar .ac-photo-panel {
display: none !important;
}
/* ==========================================================================
CHANGE-AVATAR PAGE — full makeover
========================================================================== */
/* Card — centered, overflow visible so buttons aren't clipped */
body.change-avatar .bb-rl-profile-panel {
max-width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
overflow: visible !important;
height: auto !important;
min-height: auto !important;
padding-bottom: 30px !important;
}
body.change-avatar .bb-rl-profile-edit-wrapper,
body.change-avatar #avatar-upload-form {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* Avatar — larger with gradient ring */
body.change-avatar .bb-rl-avatar-container {
width: 150px !important;
height: 150px !important;
margin: 0 auto !important;
}
body.change-avatar .bb-rl-avatar-photo {
width: 150px !important;
height: 150px !important;
margin: 0 auto !important;
position: relative !important;
}
body.change-avatar .bb-rl-avatar-photo img {
width: 150px !important;
height: 150px !important;
border-radius: 50% !important;
object-fit: cover !important;
box-shadow: 0 0 0 3px rgba(104,105,255,0.5), 0 0 20px rgba(104,105,255,0.2) !important;
}
body.change-avatar .bb-avatar-wrap img,
body.change-avatar #bp-upload-avatar img {
margin: 0 auto !important;
display: block !important;
}
/* Hide the small pencil icon — we inject proper buttons via JS */
body.change-avatar .bb-rl-remove-avatar-button {
display: none !important;
}
/* Hide BB's native unstyled back-to-edit link */
body.change-avatar .bb-rl-profile-edit-wrapper > div:not([class]) {
display: none !important;
}
/* Hide empty progress bar */
body.change-avatar .bp-avatar-status-progress:empty {
display: none !important;
}
/* Expand Plupload moxie-shim to cover full avatar for easier clicking */
body.change-avatar .moxie-shim {
width: 150px !important;
height: 150px !important;
top: 0 !important;
left: 0 !important;
border-radius: 50% !important;
cursor: pointer !important;
z-index: 10 !important;
}
/* Injected action buttons row */
.ac-avatar-actions {
display: flex !important;
justify-content: center !important;
gap: 12px !important;
margin-top: 24px !important;
}
/* Equal-width buttons on change-avatar page */
.ac-avatar-actions .ac-photo-btn {
width: 200px !important;
justify-content: center !important;
}
/* Hide BB's "Profile photo" heading on change-avatar page */
body.change-avatar .bb-rl-image-headline {
display: none !important;
}
/* Hide the "For best results..." caption */
body.change-avatar .bb-rl-image-caption {
display: none !important;
}
/* Hide the horizontal rule / divider under heading */
body.change-avatar .bb-rl-profile-edit-header::after,
body.change-avatar .bb-rl-profile-edit-header hr {
display: none !important;
}
/* Remove divider line under heading */
body.change-avatar .bb-rl-profile-edit-header {
border-bottom: none !important;
}
/* Back-to-edit pill button */
.ac-avatar-back {
text-align: center !important;
margin-top: 20px !important;
}
.ac-avatar-back a {
display: inline-flex !important;
align-items: center !important;
padding: 10px 28px !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
font-family: Inter, sans-serif !important;
text-decoration: none !important;
color: var(--ac-periwinkle) !important;
background: rgba(104, 105, 255, 0.1) !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.ac-avatar-back a:hover {
background: rgba(104, 105, 255, 0.2) !important;
color: #fff !important;
border-color: rgba(104, 105, 255, 0.5) !important;
}
/* ==========================================================================
/* ==========================================================================
MESSAGES PAGE — Hybrid A+B Layout
v1.2.70 | Scoreboard uses position:absolute — works with BB flexbox
============================================================
Body classes: body.messages.my-messages.bb-readylaunch-template
BB ReadyLaunch key selectors:
.bb-rl-messages-container main flex wrapper (BB owns this)
.bb-rl-messages-nav-panel left thread list
.bb-rl-messages-content right chat / compose
Custom injected elements (ac-messages.php):
.ac-msg-hud-bar XP / rank / streak HUD strip
.ac-msg-alert-banner Unread alert banner
.ac-score-panel Scoreboard — position:absolute right edge
.ac-score-panel--open State: panel visible
.ac-score-open State on container: chat shrinks left
========================================================================== */
/* ── Page background ── */
body.messages .bb-rl-container,
body.messages .bb-rl-content-wrap,
body.messages #bb-rl-content {
background-color: var(--ac-space-navy) !important;
}
/* ==========================================================================
MESSAGES — Hide BB ReadyLaunch left nav sidebar (News Feed, Members, etc.)
Expand messages content to full viewport width.
A temp "Messages" button is injected into the header for navigation.
========================================================================== */
body.messages .bb-rl-sidebar,
body.messages #bb-rl-sidebar,
body.messages .bb-rl-left-panel,
body.messages .bb-rl-left-panel-widget,
body.messages .bb-rl-left-panel-menu,
body.messages #secondary,
body.bbp-user-page.messages #secondary,
body.bbp-user-page.messages .bb-rl-left-panel,
body.bp-user.messages #secondary,
body.bp-user.messages .bb-rl-left-panel {
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
flex: 0 0 0 !important;
flex-basis: 0 !important;
}
/* Remove the margin-left that BB reserves for the sidebar */
body.messages #page,
body.messages .bb-rl-content-wrapper,
body.messages .bb-rl-content-wrap,
body.messages #bb-rl-content,
body.messages .bb-rl-container,
body.messages #primary,
body.bbp-user-page.messages #page,
body.bbp-user-page.messages .bb-rl-content-wrapper,
body.bbp-user-page.messages #primary {
margin-left: 0 !important;
padding-left: 0 !important;
max-width: 100% !important;
width: 100% !important;
flex: 1 1 100% !important;
}
/* Ensure messages container uses full width */
body.messages .bb-rl-messages-container {
max-width: 100% !important;
}
/* Temp Messages nav button — injected into AC header */
.ac-temp-messages-btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 14px !important;
border-radius: 8px !important;
background: rgba(104,105,255,0.15) !important;
border: 1px solid rgba(104,105,255,0.3) !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 700 !important;
font-family: 'Inter', sans-serif !important;
text-decoration: none !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
transition: all 0.2s !important;
cursor: pointer !important;
white-space: nowrap !important;
}
.ac-temp-messages-btn:hover {
background: rgba(104,105,255,0.25) !important;
border-color: rgba(104,105,255,0.5) !important;
box-shadow: 0 0 12px rgba(104,105,255,0.2) !important;
color: #fff !important;
text-decoration: none !important;
}
.ac-temp-messages-btn svg {
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
}
/* ── Hide unused subnav ── */
body.messages #subnav,
body.messages #bb-rl-inbox-personal-li,
body.messages #bb-rl-compose-action-personal-li {
display: none !important;
}
/* ==========================================================================
HUD BAR
========================================================================== */
.ac-msg-hud-bar {
display: none !important;
}
.ac-msg-hud-left,
.ac-msg-hud-right {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.ac-msg-hud-right {
margin-left: auto !important;
}
/* HUD left — +NEW MESSAGE moved to compose toolbar row, hide this section */
.ac-msg-hud-left {
display: none !important;
}
/* Hide + NEW MESSAGE toolbar button on compose view (body.compose) */
body.compose .ac-toolbar-new-msg,
body.compose #ac-toolbar-new-msg {
display: none !important;
}
.ac-msg-hud-rank {
color: #c4b5fd;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
background: #2a1060;
border: 1px solid #4c1d95;
border-radius: 20px;
padding: 3px 11px;
}
.ac-msg-hud-xp { color: var(--ac-amber); font-size: 12px; font-weight: 700; }
.ac-msg-hud-streak{ color: #fb923c; font-size: 12px; font-weight: 700; }
.ac-msg-hud-pro {
color: var(--ac-amber);
font-size: 11px; font-weight: 700;
background: rgba(240,173,78,0.12);
border: 1px solid rgba(240,173,78,0.3);
border-radius: 20px; padding: 2px 9px;
}
.ac-msg-hud-unread{
background: #7f1d1d; color: #fca5a5;
font-size: 11px; font-weight: 700;
border-radius: 20px; padding: 3px 11px; letter-spacing: 0.05em;
}
/* SCOREBOARD toggle button */
.ac-msg-score-toggle {
background: #071a10;
border: 2px solid #166534;
border-radius: 9px;
color: var(--ac-lime);
font-family: 'Inter', sans-serif;
font-size: 12px; font-weight: 900;
letter-spacing: 0.06em;
padding: 7px 14px;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: background 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
min-width: 140px;
justify-content: center;
}
.ac-msg-score-toggle:hover { background: #0a2a18; border-color: var(--ac-lime); }
.ac-msg-score-toggle:focus { outline: none !important; box-shadow: none !important; }
.ac-score-toggle-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #6869FF; border-radius: 6px; border: none !important; outline: none !important; box-shadow: none !important; transition: transform 0.2s ease; position: relative; }
.ac-score-toggle-arrow::after { content: ""; display: block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #fff; margin-left: 2px; }
.ac-msg-score-toggle[aria-expanded="true"] .ac-score-toggle-arrow { transform: rotate(90deg); }
.ac-score-toggle-arrow img.emoji { display: none !important; }
/* ==========================================================================
ALERT BANNER
========================================================================== */
/* ── Alert Banner — transparent, no visible edges ── */
.ac-msg-alert-banner {
display: flex;
align-items: center;
gap: 14px;
position: relative;
background: transparent;
border: none;
padding: 12px 18px;
flex-wrap: wrap;
overflow: visible;
animation: acBannerSlideIn 0.35s ease-out;
}
/* Badge — lime/orange gradient with glow ring */
.ac-msg-alert-badge {
position: relative;
background: linear-gradient(135deg, #1EFF00 0%, #F0AD4E 100%);
color: var(--ac-deep-navy, #02022D);
border-radius: 50%; width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 900; flex-shrink: 0;
box-shadow: 0 0 20px rgba(30,255,0,0.3);
z-index: 1;
}
/* Pulsing glow ring around badge */
.ac-msg-alert-badge::before {
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
border: 2px solid rgba(30,255,0,0.3);
animation: acBadgePulse 2s ease-in-out infinite;
pointer-events: none;
}
.ac-msg-alert-text { flex: 0 1 auto; min-width: 0; }
/* Animated gradient line — fills space between text and OPEN NOW.
NO !important on background/background-size so animation can run. */
.ac-msg-alert-line {
flex: 1 1 40px;
height: 3px;
align-self: center;
border-radius: 2px;
background: linear-gradient(90deg, #1EFF00, #F0AD4E, #FE00FF, #1EFF00);
background-size: 300% 100%;
animation: acBorderGlow 4s ease infinite;
min-width: 40px;
}
/* Title — shimmer gradient text */
.ac-msg-alert-title {
background: linear-gradient(90deg, #1EFF00, #F0AD4E, #1EFF00);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: acShimmer 3s linear infinite;
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
}
.ac-msg-alert-sub { color: var(--ac-white); font-size: 13px; font-weight: 600; margin-top: 2px; }
/* CTA — solid lime/orange gradient pill */
.ac-msg-alert-cta {
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%);
border: none; border-radius: 14px;
color: var(--ac-deep-navy, #02022D); font-family: 'Inter', sans-serif;
font-size: 13px; font-weight: 900; letter-spacing: 0.05em;
padding: 10px 22px; cursor: pointer; flex-shrink: 0;
transition: opacity 0.15s ease, transform 0.1s ease;
text-transform: uppercase;
box-shadow: 0 0 16px rgba(30,255,0,0.2);
}
.ac-msg-alert-cta:hover { opacity: 0.9; transform: translateY(-1px); }
/* ── Banner keyframes ── */
@keyframes acBadgePulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30,255,0,0.5); }
50% { transform: scale(1.08); box-shadow: 0 0 12px 4px rgba(30,255,0,0.25); }
}
@keyframes acShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes acBannerSlideIn {
0% { transform: translateY(-100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* ==========================================================================
MESSAGES CONTAINER — let BB keep flexbox, we position panel absolutely
========================================================================== */
body.messages .bb-rl-messages-container {
position: relative !important;
min-height: 520px !important;
border: 1px solid #111940 !important;
background: #060b21 !important;
border-radius: 25px !important;
overflow: hidden !important;
margin-top: 10px !important;
}
/* When scoreboard open — push chat content left to reveal panel */
body.messages .bb-rl-messages-container.ac-score-open .bb-rl-messages-content {
margin-right: 240px !important;
transition: margin-right 0.25s ease !important;
}
/* ==========================================================================
LEFT PANEL — Thread list
========================================================================== */
body.messages .bb-rl-messages-nav-panel {
background: var(--ac-deep-navy) !important;
border-right: 1px solid rgba(104,105,255,0.15) !important;
overflow: hidden !important;
min-width: 220px !important;
margin-right: 0 !important;
flex-shrink: 0 !important;
}
body.messages #bb-rl-messages-threads-list {
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* Hide scrollbar track but keep scrolling */
body.messages #bb-rl-messages-threads-list::-webkit-scrollbar { width: 0; }
body.messages #bb-rl-messages-threads-list { scrollbar-width: none; }
/* + New compose button */
body.messages .bb-rl-messages-nav-panel #bb-rl-compose-personal-li,
body.messages #subnav #bb-rl-compose-personal-li {
display: block !important;
}
body.messages #bb-rl-compose-personal-li a {
display: block !important;
background: #2d1b69 !important;
border: 2px solid #6d28d9 !important;
border-radius: 9px !important;
color: #fff !important;
font-size: 13px !important; font-weight: 900 !important;
letter-spacing: 0.06em !important;
text-align: center !important;
padding: 12px 10px !important;
margin: 11px 10px 8px !important;
text-decoration: none !important;
transition: background 0.15s ease !important;
}
body.messages #bb-rl-compose-personal-li a:hover { background: #4c1d95 !important; }
/* Search input — styled as lime/orange gradient pill button */
body.messages .bb-rl-messages-nav-panel input[type="search"],
body.messages .bb-rl-messages-nav-panel input[type="text"],
body.messages .bb-rl-messages-nav-panel input#user_messages_search {
-webkit-appearance: none !important;
appearance: none !important;
background: rgba(0,0,20,0.6) !important;
border: 1.5px solid rgba(104,105,255,0.25) !important;
border-radius: 10px !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
padding: 9px 12px 9px 14px !important;
text-align: left !important;
cursor: text !important;
box-shadow: none !important;
width: calc(100% - 24px) !important;
margin: 2px 12px 6px !important;
}
/* Hide native browser search magnifying glass */
body.messages input[type="search"]::-webkit-search-decoration,
body.messages input[type="search"]::-webkit-search-cancel-button,
body.messages input[type="search"]::-webkit-search-results-button,
body.messages input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none !important;
display: none !important;
}
/* Placeholder in light muted text */
body.messages .bb-rl-messages-nav-panel input[type="search"]::placeholder,
body.messages .bb-rl-messages-nav-panel input#user_messages_search::placeholder {
color: rgba(255,255,255,0.55) !important;
opacity: 1 !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* On focus — subtle glow border */
body.messages .bb-rl-messages-nav-panel input[type="search"]:focus,
body.messages .bb-rl-messages-nav-panel input#user_messages_search:focus {
-webkit-appearance: none !important;
appearance: none !important;
background: rgba(0,0,20,0.8) !important;
color: #fff !important;
text-align: left !important;
border: 1.5px solid rgba(104,105,255,0.5) !important;
cursor: text !important;
outline: none !important;
padding: 9px 12px 9px 14px !important;
height: auto !important;
font-size: 12px !important;
box-shadow: 0 0 8px rgba(104,105,255,0.15) !important;
}
body.messages .bb-rl-messages-nav-panel input[type="search"]:focus::placeholder,
body.messages .bb-rl-messages-nav-panel input#user_messages_search:focus::placeholder {
color: rgba(255,255,255,0.35) !important;
text-transform: none !important;
font-weight: 400 !important;
}
/* Kill magnifying glass on focus too */
body.messages .bb-rl-messages-nav-panel input[type="search"]:focus::-webkit-search-decoration,
body.messages .bb-rl-messages-nav-panel input[type="search"]:focus::-webkit-search-cancel-button,
body.messages .bb-rl-messages-nav-panel input[type="search"]:focus::-webkit-search-results-button,
body.messages .bb-rl-messages-nav-panel input[type="search"]:focus::-webkit-search-results-decoration {
-webkit-appearance: none !important;
display: none !important;
}
/* Hide BB search submit button — the input itself is the pill */
body.messages .bb-rl-messages-nav-panel #user_messages_search_submit,
body.messages .bb-rl-messages-nav-panel button[type="submit"] {
display: none !important;
}
/* Hide BB search icon that overlaps */
body.messages .bb-rl-messages-nav-panel .bb-icon-search,
body.messages .bb-rl-messages-nav-panel #user_messages_search_submit .bb-icon-l {
display: none !important;
}
/* Hide BB magnifying glass pseudo-element on search wrapper */
body.messages .bp-search::before,
body.messages .bp-search.messages-search::before,
body.messages .messages-search::before {
display: none !important;
content: none !important;
}
/* Filter tabs wrapper — centered (MUST be specific class, not all ULs!) */
body.messages ul.bb-rl-messages-tabs-list {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
padding: 6px 10px 10px !important;
flex-wrap: wrap !important;
list-style: none !important;
}
/* Reset thread list — undo any flex damage from generic selectors */
body.messages ul.bb-rl-message-lists,
body.messages ul#bb-rl-message-threads {
display: block !important;
padding: 0 !important;
gap: 0 !important;
}
/* Filter tabs — now handled by THREAD SIDEBAR REDESIGN section at end of file.
Keeping minimal fallback for tab links within list items. */
body.messages a.bb-rl-messages-tab-link {
font-size: 10px !important; font-weight: 800 !important;
padding: 9px 0 !important; border-radius: 0 !important;
text-decoration: none !important; transition: all 0.25s !important;
color: rgba(255,255,255,0.7) !important;
background: transparent !important;
border: none !important;
display: block !important;
text-align: center !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
margin: 0 !important;
min-width: 0 !important;
line-height: 1.2 !important;
}
body.messages a.bb-rl-messages-tab-link:hover {
color: rgba(255,255,255,0.9) !important;
background: transparent !important;
border-color: transparent !important;
}
body.messages .bb-rl-messages-tab-item.active a.bb-rl-messages-tab-link {
color: #00FF00 !important;
text-shadow: 0 0 10px rgba(0,255,0,0.6) !important;
background: transparent !important;
border: none !important;
}
/* Thread items — now handled by THREAD SIDEBAR REDESIGN section at end of file */
body.messages .bb-rl-messages-nav-panel .bb-rl-thread-item {
background: rgba(255,255,255,0.025) !important;
border-bottom: none !important;
padding: 0 !important;
cursor: pointer !important;
transition: all 0.3s !important;
position: relative !important;
border-radius: 14px !important;
margin-bottom: 4px !important;
border: 1.5px solid rgba(255,255,255,0.04) !important;
}
/* Remove old gradient separator line — new design uses rounded card style */
body.messages .bb-rl-messages-nav-panel .thread-content::after,
body.messages .bb-rl-messages-nav-panel .bb-rl-thread-item:not(.current):not(.ac-thread-active)::after,
body.messages .bb-rl-messages-nav-panel li.thread-item::after {
content: none !important;
display: none !important;
height: 0 !important;
background: linear-gradient(90deg, transparent, rgba(104,105,255,0.25) 20%, rgba(254,0,255,0.2) 50%, rgba(104,105,255,0.25) 80%, transparent) !important;
}
body.messages .bb-rl-messages-nav-panel .thread-content:hover,
body.messages .bb-rl-messages-nav-panel li.thread-item:hover {
background: rgba(104,105,255,0.08) !important;
}
/* ── Active thread highlight — Hybrid system ── */
/* When ANY thread is active, dim all threads */
body.messages .bb-rl-messages-nav-panel.ac-has-active .bb-rl-thread-item,
body.messages .bb-rl-messages-nav-panel.ac-has-active li.thread-item {
opacity: 0.55 !important;
transition: opacity 0.25s ease, background 0.25s ease, transform 0.2s ease !important;
}
/* The active thread pops back to full visibility */
body.messages .bb-rl-messages-nav-panel .bb-rl-thread-item.ac-thread-active,
body.messages .bb-rl-messages-nav-panel li.thread-item.ac-thread-active,
body.messages .bb-rl-messages-nav-panel .thread-content.active,
body.messages .bb-rl-messages-nav-panel li.thread-item.active {
opacity: 1 !important;
background: linear-gradient(90deg, rgba(104,105,255,0.22) 0%, rgba(254,0,255,0.10) 50%, rgba(30,255,0,0.04) 100%) !important;
box-shadow: inset 0 0 20px rgba(104,105,255,0.08), 0 0 12px rgba(104,105,255,0.12) !important;
border-left: none !important;
z-index: 1 !important;
}
/* Gradient accent strip on the left edge */
body.messages .bb-rl-messages-nav-panel .bb-rl-thread-item.ac-thread-active::before,
body.messages .bb-rl-messages-nav-panel li.thread-item.ac-thread-active::before {
content: '' !important;
position: absolute !important;
top: 8px !important;
bottom: 8px !important;
left: 8px !important;
width: 4px !important;
border-radius: 4px !important;
background: linear-gradient(180deg, #6869FF, #FE00FF, #1EFF00) !important;
box-shadow: 0 0 10px rgba(104,105,255,0.6), 0 0 14px rgba(254,0,255,0.4), 0 0 6px rgba(30,255,0,0.3) !important;
animation: ac-strip-glow 2s ease-in-out infinite alternate !important;
}
@keyframes ac-strip-glow {
0% { box-shadow: 0 0 8px rgba(104,105,255,0.5), 0 0 8px rgba(254,0,255,0.3), 0 0 4px rgba(30,255,0,0.2); }
100% { box-shadow: 0 0 16px rgba(104,105,255,0.7), 0 0 16px rgba(254,0,255,0.5), 0 0 8px rgba(30,255,0,0.4); }
}
/* Avatar brightness lift on active thread */
body.messages .bb-rl-messages-nav-panel .bb-rl-thread-item.ac-thread-active img.avatar {
filter: brightness(1.15) !important;
transition: filter 0.25s ease !important;
}
/* Hover on non-active threads brings them back slightly */
body.messages .bb-rl-messages-nav-panel.ac-has-active .bb-rl-thread-item:not(.ac-thread-active):hover,
body.messages .bb-rl-messages-nav-panel.ac-has-active li.thread-item:not(.ac-thread-active):hover {
opacity: 0.8 !important;
background: rgba(104,105,255,0.06) !important;
}
body.messages .bb-rl-messages-nav-panel img.avatar {
border-radius: 50% !important; width: 36px !important; height: 36px !important;
}
/* Hide BB avatar when our circle is injected */
body.messages .bb-rl-thread-item.ac-enhanced .bb-rl-thread-avatar {
display: none !important;
}
body.messages .bb-rl-messages-nav-panel .thread-to,
body.messages .bb-rl-messages-nav-panel .thread-from,
body.messages .bb-rl-messages-nav-panel .user-name {
color: var(--ac-white) !important; font-weight: 600 !important; font-size: 13px !important;
}
body.messages .bb-rl-messages-nav-panel .thread-excerpt,
body.messages .bb-rl-messages-nav-panel .bb-rl-thread-item p {
color: var(--ac-slate) !important; font-size: 12px !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
body.messages .bb-rl-messages-nav-panel .thread-date,
body.messages .bb-rl-messages-nav-panel .bb-rl-thread-date time,
body.messages .bb-rl-messages-nav-panel .bb-rl-thread-date {
color: rgba(255,255,255,0.4) !important;
font-size: 10px !important;
font-weight: 600 !important;
background: none !important;
border-radius: 0 !important;
padding: 0 !important;
display: inline-block !important;
line-height: 1.4 !important;
white-space: nowrap !important;
min-width: 0 !important;
text-align: right !important;
}
body.messages .bb-rl-messages-nav-panel .unread-count {
background: var(--ac-gradient) !important; color: var(--ac-white) !important;
font-size: 11px !important; font-weight: 600 !important;
min-width: 20px !important; height: 20px !important;
border-radius: 50% !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
body.messages .bb-rl-messages-nav-panel .bp-no-messages-msg,
body.messages .bb-rl-messages-nav-panel .no-messages,
body.messages .bb-rl-messages-nav-panel .bp-feedback {
color: var(--ac-slate) !important; text-align: center !important; padding: 40px 20px !important;
}
/* ==========================================================================
RIGHT PANEL — Chat / Compose
========================================================================== */
body.messages .bb-rl-messages-content {
background: var(--ac-deep-navy) !important;
flex: 1 !important;
min-width: 0 !important;
overflow: visible !important;
transition: margin-right 0.25s ease !important;
}
/* Thread header */
body.messages .bb-rl-messages-content .bb-rl-message-header,
body.messages .bb-rl-messages-content > header,
body.messages .bb-rl-messages-content .single-message-thread-header {
background: transparent !important;
border-bottom: 1px solid rgba(104,105,255,0.15) !important;
padding: 0 !important;
}
/* When VS header is present, the header container needs no padding — the halves handle it */
body.messages .bb-rl-messages-content .single-message-thread-header:has(.ac-chat-header) {
padding: 0 !important;
overflow: visible !important;
}
body.messages .bb-rl-messages-content h2,
body.messages .bb-rl-messages-content .thread-title {
color: var(--ac-white) !important; font-size: 15px !important; font-weight: 600 !important; margin: 0 !important;
}
/* "To:" compose field */
body.messages .bb-rl-messages-content .compose-to,
body.messages .bb-rl-messages-content .bb-rl-compose-to {
border-bottom: 1px solid rgba(104,105,255,0.1) !important;
padding: 12px 20px !important; background: transparent !important;
}
body.messages .bb-rl-messages-content input[name="send_to"],
body.messages .bb-rl-messages-content .token-input-list,
body.messages .bb-rl-messages-content .token-input-input-token input {
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(104,105,255,0.3) !important;
border-radius: 14px !important; color: var(--ac-white) !important;
font-size: 13px !important; padding: 10px 14px !important;
}
body.messages .bb-rl-messages-content input:focus,
body.messages .bb-rl-messages-content .token-input-list:focus-within {
border-color: var(--ac-periwinkle) !important;
box-shadow: 0 0 0 3px rgba(104,105,255,0.2) !important; outline: none !important;
}
body.messages .bb-rl-messages-content .token-input-token {
background: rgba(104,105,255,0.15) !important; color: var(--ac-white) !important;
border-radius: 20px !important; padding: 3px 10px !important;
font-size: 12px !important; border: 1px solid rgba(104,105,255,0.3) !important;
}
body.messages .bb-rl-messages-content .token-input-dropdown {
background: #0D0E3A !important; border: 1px solid rgba(104,105,255,0.25) !important;
border-radius: 14px !important; overflow: hidden !important;
}
body.messages .bb-rl-messages-content .token-input-dropdown li {
padding: 10px 14px !important; color: var(--ac-white) !important;
cursor: pointer !important; border-bottom: 1px solid rgba(104,105,255,0.08) !important;
}
body.messages .bb-rl-messages-content .token-input-dropdown li:hover {
background: rgba(104,105,255,0.12) !important;
}
/* Message composer textarea — clean dark bg inside gradient frame */
body.messages .bb-rl-messages-content textarea,
body.messages .bb-rl-messages-content #message_content,
body.messages .bb-rl-messages-content .bb-rl-message-editor,
body.messages .bb-rl-messages-content .medium-editor-element,
body.messages .bb-rl-messages-content [contenteditable="true"] {
background: #080d2a !important;
border: 1px solid rgba(104, 105, 255, 0.15) !important;
border-radius: 12px !important;
color: var(--ac-white) !important;
font-size: 13px !important;
padding: 14px 16px !important;
font-family: 'Inter', sans-serif !important;
min-height: 100px !important;
resize: vertical !important;
}
body.messages .bb-rl-messages-content textarea:focus,
body.messages .bb-rl-messages-content [contenteditable]:focus {
border-color: rgba(254, 0, 255, 0.35) !important;
box-shadow: 0 0 20px rgba(254, 0, 255, 0.12), 0 0 20px rgba(30, 255, 0, 0.08) !important;
outline: none !important;
}
body.messages .bb-rl-messages-content textarea::placeholder { color: rgba(255,255,255,0.35) !important; }
/* Gradient border wrapper — mask technique for rounded corners */
body.messages .bb-rl-messages-content .bb-rl-the-form,
body.messages .bb-rl-messages-content form#send_message_form,
body.messages .bb-rl-messages-content .bp-message-compose {
position: relative !important;
isolation: isolate !important;
background: #080d2a !important;
border-radius: 16px !important;
padding: 12px !important;
margin: 8px 0 !important;
}
/* New Message view — push compose area to bottom of the panel */
body.messages .bb-rl-messages-content form#send_message_form {
padding-left: 0 !important;
padding-right: 0 !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100% !important;
box-sizing: border-box !important;
}
/* ── To: recipient field — wider input with visible placeholder ── */
body.messages form#send_message_form .bp-messages-recipient {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
}
body.messages form#send_message_form .bp-messages-recipient > span:first-child {
flex-shrink: 0 !important;
color: #1EFF00 !important;
font-size: 14px !important;
font-weight: 700 !important;
text-shadow: 0 0 8px rgba(30, 255, 0, 0.4) !important;
}
body.messages form#send_message_form .select2-container {
flex: 1 !important;
min-width: 0 !important;
}
body.messages form#send_message_form .select2-selection--multiple {
background: rgba(30, 255, 0, 0.06) !important;
border: 2px solid rgba(30, 255, 0, 0.5) !important;
border-radius: 12px !important;
box-shadow: 0 0 12px rgba(30, 255, 0, 0.2), inset 0 0 8px rgba(30, 255, 0, 0.05) !important;
min-height: 44px !important;
padding: 4px 12px !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
}
body.messages form#send_message_form .select2-selection--multiple:focus-within {
border-color: rgba(30, 255, 0, 0.7) !important;
box-shadow: 0 0 18px rgba(30, 255, 0, 0.35), inset 0 0 8px rgba(30, 255, 0, 0.08) !important;
}
/* Rendered list — inline flex so pills and cursor sit side by side */
body.messages form#send_message_form .select2-selection--multiple .select2-selection__rendered {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
width: 100% !important;
}
/* Member pill boxes — purple gradient like the All button */
body.messages form#send_message_form .select2-selection__choice {
background: linear-gradient(135deg, #6869FF 0%, #9B30FF 50%, #FE00FF 100%) !important;
color: var(--ac-white, #FFFFFF) !important;
border: none !important;
border-radius: 20px !important;
padding: 5px 14px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
line-height: 1.4 !important;
box-shadow: 0 2px 8px rgba(104, 105, 255, 0.3) !important;
}
/* Style the X remove button — BB uses row-reverse so it already appears on the right */
body.messages form#send_message_form .select2-selection__choice__remove {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 6px !important;
background: none !important;
border: none !important;
}
body.messages form#send_message_form .select2-selection__choice__remove:hover {
color: var(--ac-white, #FFFFFF) !important;
}
/* Remove BB's ::before pseudo on the remove button */
body.messages form#send_message_form .select2-selection__choice__remove::before {
content: none !important;
display: none !important;
}
/* No ::after needed — using the native × character */
/* Avatar + name container inside pill — ensure proper spacing */
body.messages form#send_message_form .bb-rl-select2-selection-user {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
overflow: visible !important;
min-width: 0 !important;
}
/* Avatar image inside pill — round with badge ring border */
body.messages form#send_message_form .select2-user-avatar {
width: 26px !important;
height: 26px !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
object-fit: cover !important;
/* Default ring — Starter periwinkle. JS overrides with badge color via inline style */
border: 2px solid #6869FF !important;
box-shadow: 0 0 6px rgba(104, 105, 255, 0.4) !important;
}
/* Badge ring color classes — matched to AC-Tier-Ring-System-v2.pdf */
body.messages form#send_message_form .select2-user-avatar.ac-badge-starter {
border-color: #6869FF !important;
box-shadow: 0 0 6px rgba(104, 105, 255, 0.4) !important;
}
body.messages form#send_message_form .select2-user-avatar.ac-badge-rising {
border-color: #26C6DA !important;
box-shadow: 0 0 6px rgba(38, 198, 218, 0.4) !important;
}
body.messages form#send_message_form .select2-user-avatar.ac-badge-builder {
border-color: #66BB6A !important;
box-shadow: 0 0 6px rgba(102, 187, 106, 0.4) !important;
}
body.messages form#send_message_form .select2-user-avatar.ac-badge-hustler {
border-color: #F0AD4E !important;
box-shadow: 0 0 6px rgba(240, 173, 78, 0.4) !important;
}
body.messages form#send_message_form .select2-user-avatar.ac-badge-grinder {
border-color: #FF7043 !important;
box-shadow: 0 0 6px rgba(255, 112, 67, 0.4) !important;
}
body.messages form#send_message_form .select2-user-avatar.ac-badge-elite {
border-color: #AB47BC !important;
box-shadow: 0 0 6px rgba(171, 71, 188, 0.4) !important;
}
body.messages form#send_message_form .select2-user-avatar.ac-badge-legend {
border-color: #EF5350 !important;
box-shadow: 0 0 6px rgba(239, 83, 80, 0.4) !important;
}
body.messages form#send_message_form .select2-user-avatar.ac-badge-titan {
border-color: #FFD700 !important;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
}
body.messages form#send_message_form .select2-user-avatar.ac-badge-founder {
border-color: #FE00FF !important;
box-shadow: 0 0 10px rgba(254, 0, 255, 0.4) !important;
}
/* Name text inside pill — prevent overlap */
body.messages form#send_message_form .select2-selection-user__name {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 120px !important;
}
/* Search input — inline, auto width so cursor sits right of pills */
body.messages form#send_message_form .select2-search--inline {
width: auto !important;
display: inline-flex !important;
flex: 1 1 80px !important;
min-width: 80px !important;
}
body.messages form#send_message_form .select2-search__field {
width: 100% !important;
min-width: 80px !important;
color: var(--ac-white, #fff) !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
background: transparent !important;
border: none !important;
outline: none !important;
padding: 4px 0 !important;
}
body.messages form#send_message_form .select2-search__field::placeholder {
color: var(--ac-slate, #828FA0) !important;
opacity: 1 !important;
font-weight: 500 !important;
}
/* Remove blue/purple focus outline from the To: input */
body.messages form#send_message_form .select2-container--focus .select2-selection--multiple,
body.messages form#send_message_form .select2-container--open .select2-selection--multiple,
body.messages form#send_message_form .select2-selection--multiple:focus,
body.messages form#send_message_form .select2-selection--multiple:focus-within {
outline: none !important;
border-color: rgba(30, 255, 0, 0.7) !important;
box-shadow: 0 0 18px rgba(30, 255, 0, 0.35), inset 0 0 8px rgba(30, 255, 0, 0.08) !important;
}
body.messages form#send_message_form .select2-search__field:focus {
outline: none !important;
box-shadow: none !important;
}
/* Error state — red glow when no recipient selected */
body.messages form#send_message_form .select2-selection--multiple.ac-to-error-border {
border-color: #FF3333 !important;
box-shadow: 0 0 16px rgba(255, 51, 51, 0.4), inset 0 0 6px rgba(255, 51, 51, 0.1) !important;
animation: acToShake 0.4s ease !important;
}
body.messages form#send_message_form .select2-search__field.ac-to-error::placeholder {
color: #FF3333 !important;
opacity: 1 !important;
}
@keyframes acToShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
/* Style the Select2 dropdown to match dark theme (don't hide — search results live here) */
body.messages .select2-dropdown.bb-compose-input,
body.messages .select2-container--open .select2-dropdown,
body.messages form#send_message_form ~ .select2-container .select2-dropdown {
background: var(--ac-deep-navy, #02022D) !important;
border: 1px solid rgba(104, 105, 255, 0.25) !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
color: var(--ac-white, #FFFFFF) !important;
overflow: hidden !important;
}
/* Hide the "Start typing a name" placeholder alert inside the dropdown */
body.messages .select2-dropdown .select2-results__message,
body.messages .select2-dropdown .select2-results__option[role="alert"],
body.messages .select2-dropdown .select2-results__option--load-more,
body.messages .select2-container--open .select2-dropdown li.select2-results__option[aria-live="assertive"] {
display: none !important;
}
/* Style the actual search result items in the dropdown */
body.messages .select2-dropdown .select2-results__option {
background: transparent !important;
color: var(--ac-white, #FFFFFF) !important;
padding: 8px 14px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
border-bottom: 1px solid rgba(104, 105, 255, 0.1) !important;
}
body.messages .select2-dropdown .select2-results__option:last-child {
border-bottom: none !important;
}
body.messages .select2-dropdown .select2-results__option--highlighted,
body.messages .select2-dropdown .select2-results__option:hover {
background: rgba(104, 105, 255, 0.2) !important;
color: var(--ac-white, #FFFFFF) !important;
}
/* Style the search input inside the dropdown if present */
body.messages .select2-dropdown .select2-search--dropdown {
background: transparent !important;
padding: 8px !important;
}
body.messages .select2-dropdown .select2-search__field {
background: rgba(104, 105, 255, 0.08) !important;
border: 1px solid rgba(104, 105, 255, 0.2) !important;
border-radius: 8px !important;
color: var(--ac-white, #FFFFFF) !important;
padding: 6px 10px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
}
body.messages .select2-dropdown .select2-search__field::placeholder {
color: var(--ac-slate, #828FA0) !important;
}
/* The compose editor area gets pushed to the bottom */
form#send_message_form #bp-message-content {
margin-top: auto !important;
}
body.messages .bb-rl-messages-content .bb-rl-the-form::before,
body.messages .bb-rl-messages-content form#send_message_form::before,
body.messages .bb-rl-messages-content .bp-message-compose::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: 16px !important;
padding: 2px !important;
background: linear-gradient(90deg, #1EFF00, #F0AD4E 30%, #B33FE0 70%, #FE00FF) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 3 !important;
}
/* On compose page — disable form border to prevent double box */
body.compose .bb-rl-messages-content .bb-rl-the-form::before,
body.compose .bb-rl-messages-content form::before,
body.compose .bb-rl-messages-content .bp-message-compose::before,
body.compose .bb-rl-messages-content .standard-form::before {
display: none !important;
content: none !important;
}
/* Send button — lime/orange gradient pill, no arrow */
body.messages .bb-rl-messages-content input[type="submit"],
body.messages .bb-rl-messages-content button[type="submit"],
body.messages .bb-rl-messages-content .bb-rl-send-message-button,
body.messages .bb-rl-messages-content button[class*="send"],
body.messages .bb-rl-messages-content #bp-messages-send,
body.messages .bb-rl-messages-content #send_reply_button {
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%) !important;
color: #02022D !important; border: none !important;
border-radius: 20px !important; padding: 8px 20px !important;
font-size: 12px !important; font-weight: 700 !important;
font-family: 'Inter', sans-serif !important;
cursor: pointer !important; transition: opacity 0.15s !important;
box-shadow: 0 2px 12px rgba(30, 255, 0, 0.25) !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
-webkit-appearance: none !important;
appearance: none !important;
overflow: visible !important;
width: auto !important;
height: auto !important;
min-width: 80px !important;
text-indent: 0 !important;
line-height: normal !important;
}
/* Hide arrow/send icon inside BB native send button */
body.messages .bb-rl-messages-content #send_reply_button i,
body.messages .bb-rl-messages-content #send_reply_button svg,
body.messages .bb-rl-messages-content #send_reply_button .bb-icon-l,
body.messages .bb-rl-messages-content #send_reply_button .bb-icon-send,
body.messages .bb-rl-messages-content #send_reply_button img,
body.messages .bb-rl-messages-content #bp-messages-send i,
body.messages .bb-rl-messages-content #bp-messages-send svg,
body.messages .bb-rl-messages-content #bp-messages-send .bb-icon-l,
body.messages .bb-rl-messages-content #bp-messages-send .bb-icon-send,
body.messages .bb-rl-messages-content #bp-messages-send img,
body.messages .bb-rl-messages-content .bb-rl-send-message-button i,
body.messages .bb-rl-messages-content .bb-rl-send-message-button svg,
body.messages .bb-rl-messages-content .bb-rl-send-message-button .bb-icon-l {
display: none !important;
}
body.messages .bb-rl-messages-content input[type="submit"]:hover,
body.messages .bb-rl-messages-content button[type="submit"]:hover { opacity: 0.85 !important; }
/* Gradient border on both panels using ::before mask — lime/orange 2px */
body.messages .bb-rl-messages-nav-panel,
body.messages .bb-rl-messages-content {
position: relative !important;
isolation: isolate !important;
border: none !important; outline: none !important; box-shadow: none !important;
}
body.messages .bb-rl-messages-nav-panel::before,
body.messages .bb-rl-messages-content::before {
content: '' !important;
position: absolute !important;
inset: -1px !important;
border-radius: 26px !important;
padding: 3px !important;
background: linear-gradient(180deg, rgba(30,255,0,0.3) 0%, #1EFF00 25%, #F0AD4E 75%, rgba(240,173,78,0.3) 100%) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* ==========================================================================
SCOREBOARD PANEL — absolutely positioned at right edge of container
========================================================================== */
.ac-score-panel {
position: absolute !important;
top: 0 !important;
right: 0 !important;
height: 100% !important;
width: 0 !important;
overflow: hidden !important;
background: #070c22 !important;
border-left: 1px solid #111940 !important;
transition: width 0.25s ease !important;
z-index: 10 !important;
display: flex !important;
flex-direction: column !important;
}
.ac-score-panel--open {
width: 240px !important;
overflow-y: auto !important;
}
.ac-score-panel-inner {
width: 240px;
flex-shrink: 0;
display: flex;
flex-direction: column;
min-height: 100%;
}
/* Panel tabs */
.ac-score-tabs {
background: #0b1035;
border-bottom: 1px solid #111940;
padding: 10px 12px;
display: flex;
gap: 5px;
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 2;
}
.ac-score-tab {
background: transparent;
border: 1px solid #1e2a60;
border-radius: 8px;
color: #3d4d7a;
font-family: 'Inter', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 0.05em;
padding: 5px 10px;
cursor: pointer;
transition: all 0.15s ease;
flex: 1; text-align: center;
}
.ac-score-tab:hover { border-color: var(--ac-periwinkle); color: var(--ac-periwinkle); }
.ac-score-tab--active { background: #4c1d95; border-color: #7c3aed; color: var(--ac-white); }
/* Sections */
.ac-score-section { flex: 1; padding-bottom: 12px; }
.ac-score-section--hidden { display: none; }
.ac-score-section-label { color: rgba(255,255,255,0.65); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 13px 6px; }
/* Live signups */
.ac-score-live-block { background: #0b1035; border-bottom: 1px solid #111940; padding: 14px 13px; text-align: center; }
.ac-score-live-label { color: var(--ac-lime); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 5px; }
.ac-score-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-lime); display: inline-block; flex-shrink: 0; }
.ac-score-live-number { color: var(--ac-lime); font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.ac-score-live-sub { color: #6ee7b7; font-size: 11px; margin-top: 4px; font-weight: 600; }
/* Progress bars */
.ac-score-bar-wrap { background: #111940; border-radius: 4px; height: 5px; overflow: hidden; margin-top: 8px; }
.ac-score-bar-fill { height: 100%; border-radius: 4px; background: var(--ac-lime); transition: width 0.4s ease; }
.ac-score-bar-fill--magenta { background: var(--ac-magenta); }
.ac-score-bar-fill--amber { background: var(--ac-amber); }
.ac-score-bar-fill--lime { background: var(--ac-lime); }
.ac-score-bar-fill--periwinkle{ background: var(--ac-periwinkle); }
/* Leaderboard */
.ac-score-lb-row {
display: flex; align-items: center; gap: 7px;
padding: 7px 13px; border-bottom: 1px solid #0f1540;
transition: background 0.12s ease;
}
.ac-score-lb-row:hover { background: #0f1540; }
.ac-lb-me { background: #170d50 !important; border: 1px solid #4c1d95 !important; border-radius: 7px !important; margin: 4px 8px !important; padding: 7px 10px !important; }
.ac-score-lb-rank { color: rgba(255,255,255,0.55); font-size: 12px; font-weight: 700; width: 18px; flex-shrink: 0; }
.ac-lb-me .ac-score-lb-rank { color: #c4b5fd; }
.ac-score-lb-initials { width: 26px; height: 26px; border-radius: 50%; background: #1e40af; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ac-score-lb-name { color: var(--ac-white); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-lb-me .ac-score-lb-name { color: #e0d7ff; font-weight: 700; }
.ac-score-lb-badge { color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ac-score-lb-count { color: var(--ac-white); font-size: 12px; font-weight: 700; flex-shrink: 0; min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.ac-lb-me .ac-score-lb-count { color: #c4b5fd; font-size: 13px; }
.ac-score-lb-ellipsis { color: rgba(255,255,255,0.4); font-size: 11px; padding: 2px 0 2px 24px; }
.ac-score-lb-nudge { background: #170d50; border: 1px solid #4c1d95; border-radius: 7px; color: #a78bfa; font-size: 11px; font-weight: 600; margin: 6px 10px; padding: 8px 10px; text-align: center; }
/* Online now */
.ac-score-online-row { display: flex; align-items: center; gap: 7px; padding: 6px 13px; }
.ac-score-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-lime); flex-shrink: 0; }
.ac-score-online-initials{ width: 22px; height: 22px; border-radius: 50%; background: #1e3a5f; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ac-score-online-name { color: var(--ac-white); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-score-online-badge { color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 700; flex-shrink: 0; }
/* Stats grid */
.ac-score-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 4px 13px 12px; }
.ac-score-stat { background: #0d1340; border: 1px solid #111940; border-radius: 8px; padding: 9px 8px; text-align: center; }
.ac-score-stat-label { color: rgba(255,255,255,0.6); font-size: 11px; margin-bottom: 3px; }
.ac-score-stat-value { font-size: 26px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ac-score-stat--white { color: var(--ac-white); }
.ac-score-stat--amber { color: var(--ac-amber); }
.ac-score-stat--blue { color: #60a5fa; }
.ac-score-stat--orange { color: #fb923c; }
.ac-score-stat--lime { color: var(--ac-lime); }
.ac-score-stat--periwinkle{ color: var(--ac-periwinkle); }
/* Rank progress */
.ac-score-rank-progress { padding: 4px 13px 12px; }
.ac-score-rank-labels { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.ac-score-rank-current { color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 700; }
.ac-score-rank-next { color: var(--ac-magenta); font-size: 11px; font-weight: 700; }
.ac-score-rank-sub { color: rgba(255,255,255,0.5); font-size: 11px; margin-top: 5px; }
/* Mission items */
.ac-mission-item { background: #0b1035; border: 1px solid #111940; border-radius: 8px; margin: 0 10px 8px; padding: 10px 12px; }
.ac-mission--done { background: #071a10 !important; border-color: #166534 !important; }
.ac-mission--weekly { background: #1a0e4a !important; border-color: #4c1d95 !important; }
.ac-mission-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.ac-mission-label { color: var(--ac-white); font-size: 12px; font-weight: 600; flex: 1; min-width: 0; }
.ac-mission--done .ac-mission-label { color: #34d399; text-decoration: line-through; opacity: 0.75; }
.ac-mission-count { color: var(--ac-amber); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.ac-mission-done-badge { background: #14532d; color: #34d399; border-radius: 10px; font-size: 10px; font-weight: 700; padding: 2px 8px; flex-shrink: 0; }
.ac-mission-xp { color: rgba(255,255,255,0.55); font-size: 11px; margin-top: 5px; }
/* Close × button on alert banner */
.ac-msg-alert-close {
background: transparent;
border: none;
color: var(--ac-slate, #828FA0);
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.15s ease;
font-family: 'Inter', sans-serif;
}
.ac-msg-alert-close:hover { opacity: 1; color: var(--ac-white, #fff); }
/* Hide BB ReadyLaunch loading spinner that bleeds into scoreboard space */
body.messages .bb-rl-messages-content .bb-rl-loading,
body.messages .bb-rl-messages-content .bb-loading,
body.messages .bb-rl-messages-content .loading,
body.messages .bb-rl-messages-content [class*="bb-rl-loader"],
body.messages .bb-rl-messages-content > .bp-feedback.info {
display: none !important;
}
/* ==========================================================================
CHAT THREAD HEADER — member stats bar
Injected by JS after BB renders the thread header.
========================================================================== */
/* Thread header layout — flex with both users + stats below */
.single-message-thread-header {
position: relative !important;
}
/* ── Main flex row: Bill (left) ←→ Phil (right) ── */
.ac-thread-header-flex {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
gap: 12px !important;
}
.ac-thread-header-left {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Keep BB's existing avatar + name inline */
.ac-thread-header-left dl.thread-participants {
display: flex !important;
align-items: center !important;
margin: 0 !important;
}
/* Online/away under the left-side name */
.ac-thread-header-left > .ac-th-online,
.ac-thread-header-left > .ac-th-offline {
margin-left: 8px !important;
white-space: nowrap !important;
}
/* Timezone pill under the left-side name */
.ac-thread-header-left > .ac-th-timezone {
margin-left: 8px !important;
}
/* ── Right side: current user panel — inline row ── */
.ac-thread-header-right {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* Name label in the right panel */
.ac-thread-header-right .ac-th-user-name {
color: #fff !important;
font-size: 14px !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
/* Avatar on the far right — same size as Bill's left avatar */
.ac-th-me-avatar {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
border: 2px solid #6869FF !important;
box-shadow: 0 0 8px rgba(104, 105, 255, 0.3) !important;
object-fit: cover !important;
flex-shrink: 0 !important;
}
.ac-th-me-initials {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
border: 2px solid #6869FF !important;
background: rgba(104, 105, 255, 0.15) !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 800 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
/* ── Stats bar — below the user row ── */
.ac-thread-header-stats {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid rgba(104, 105, 255, 0.1);
}
/* Tier badge pill */
.ac-th-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
border-radius: 20px;
padding: 3px 10px;
white-space: nowrap;
}
/* Pro label */
.ac-th-pro {
background: rgba(240,173,78,0.15);
color: var(--ac-amber);
border: 1px solid rgba(240,173,78,0.4);
font-size: 10px;
font-weight: 800;
border-radius: 20px;
padding: 2px 8px;
letter-spacing: 0.08em;
}
/* Stat items — signups, XP, reply rate */
.ac-th-stat {
color: var(--ac-slate);
font-size: 12px;
font-weight: 600;
}
.ac-th-xp { color: var(--ac-amber) !important; }
/* Online / away indicators */
.ac-th-online {
color: var(--ac-lime);
font-size: 12px;
font-weight: 600;
}
.ac-th-offline {
color: var(--ac-slate);
font-size: 12px;
font-weight: 600;
opacity: 0.6;
}
/* ── Timezone indicator in chat header ── */
.ac-th-timezone {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 500;
color: rgba(224, 224, 255, 0.65);
background: rgba(104, 105, 255, 0.08);
border: 1px solid rgba(104, 105, 255, 0.15);
border-radius: 8px;
padding: 2px 10px;
margin-left: 4px;
white-space: nowrap;
transition: background 0.2s, color 0.2s;
}
.ac-th-timezone:hover {
background: rgba(104, 105, 255, 0.15);
color: rgba(224, 224, 255, 0.85);
}
.ac-th-tz-diff {
color: rgba(224, 224, 255, 0.4);
font-size: 10px;
font-weight: 400;
}
/* ── Timezone tooltip on chat message timestamps ── */
.ac-tz-tooltip {
background: rgba(6, 6, 40, 0.95);
border: 1px solid rgba(104, 105, 255, 0.25);
border-radius: 8px;
padding: 6px 12px;
font-size: 11px;
line-height: 1.6;
color: rgba(224, 224, 255, 0.85);
backdrop-filter: blur(12px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(104, 105, 255, 0.1);
white-space: nowrap;
animation: ac-tz-tip-in 0.15s ease-out;
}
@keyframes ac-tz-tip-in {
from { opacity: 0; transform: translate(-50%, -100%) translateY(4px); }
to { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
}
.ac-tz-tip-you {
color: #1EFF00;
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.ac-tz-tip-them {
color: #6869FF;
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Thread header avatar — green ring matching SCOREBOARD */
.single-message-thread-header .bp-user-avatar img,
#bp-message-thread-header .avatar,
.single-message-thread-header img.avatar {
border-radius: 50% !important;
border: 2px solid #166534 !important;
box-shadow: 0 0 8px rgba(30, 255, 0, 0.2) !important;
}
/* ==========================================================================
MOBILE — single column below 768px
========================================================================== */
@media (max-width: 768px) {
body.messages .bb-rl-messages-container.ac-score-open .bb-rl-messages-content {
margin-right: 0 !important;
}
.ac-score-panel,
.ac-score-panel--open {
position: relative !important;
width: 100% !important;
height: auto !important;
border-left: none !important;
border-top: 1px solid #111940 !important;
}
.ac-score-panel-inner { width: 100% !important; }
.ac-msg-hud-bar { border-radius: 10px 10px 0 0; }
.ac-msg-alert-cta { width: 100%; text-align: center; }
}
/* ==========================================================================
MESSAGES — Hide BB Loading Spinners
v1.2.71
========================================================================== */
.bb-rl-message-header-loading,
.bb-rl-message-header-loading * {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
.bb-rl-messages-content .loading,
.bb-rl-messages-content .bb-rl-loading,
.bp-messages-content .loading,
#bp-message-thread-list .loading,
.bb-rl-messages-container .bb-rl-loader,
.bb-rl-messages-container .bb-loading {
display: none !important;
}
/* BB right-panel spinner — circle loading animation via ::before */
#bb-rl-messages-right-panel {
display: none !important;
}
/* ==========================================================================
MESSAGES — Chat Bubble Incoming / Outgoing
Incoming = left, dark bg | Outgoing = right, purple gradient
BB DOM structure (confirmed via console):
li > .bp-single-message-wrap > .bp-avatar-wrap + .bp-single-message-content
.bp-single-message-content > .message-metadata + .bp-message-content-wrap
========================================================================== */
/* ── Base bubble reset ── */
#bp-message-thread-list li:not(.divider-date) {
list-style: none !important;
padding: 4px 20px !important;
margin: 0 0 10px 0 !important;
background: transparent !important;
border: none !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
z-index: 2 !important;
max-width: 75% !important;
width: fit-content !important;
}
/* ── Outgoing (YOU) = LEFT side, green ── */
#bp-message-thread-list li.ac-bubble-outgoing {
margin-right: auto !important;
align-items: flex-start !important;
}
/* ── Incoming (THEM) = RIGHT side, purple ── */
#bp-message-thread-list li.ac-bubble-incoming {
margin-left: auto !important;
align-items: flex-end !important;
}
/* ── Hide avatars — mockup doesn't show them ── */
#bp-message-thread-list li.ac-bubble-incoming .bp-avatar-wrap,
#bp-message-thread-list li.ac-bubble-outgoing .bp-avatar-wrap {
display: none !important;
}
/* ── Message wrap — simple block ── */
#bp-message-thread-list li.ac-bubble-incoming .bp-single-message-wrap,
#bp-message-thread-list li.ac-bubble-outgoing .bp-single-message-wrap {
display: block !important;
}
/* ── Message content column — flex-column so metadata goes below bubble ── */
#bp-message-thread-list li:not(.divider-date) .bp-single-message-content {
display: flex !important;
flex-direction: column !important;
}
#bp-message-thread-list li.ac-bubble-incoming .bp-single-message-content {
text-align: right !important;
align-items: flex-end !important;
}
#bp-message-thread-list li.ac-bubble-outgoing .bp-single-message-content {
text-align: left !important;
align-items: flex-start !important;
}
/* Bubble comes first (order 0), metadata goes below (order 1) */
#bp-message-thread-list li:not(.divider-date) .bp-message-content-wrap {
order: 0 !important;
}
#bp-message-thread-list li:not(.divider-date) .message-metadata {
order: 1 !important;
}
/* ── Incoming bubble — purple gradient, left tail ── */
#bp-message-thread-list li.ac-bubble-incoming .bp-message-content-wrap {
background: linear-gradient(135deg, #7B5FFF 0%, #B44FFF 40%, #FF00E5 100%) !important;
border: none !important;
border-radius: 18px 18px 18px 4px !important;
padding: 12px 18px !important;
color: #02022D !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
line-height: 1.5 !important;
word-wrap: break-word !important;
display: inline-block !important;
text-align: left !important;
box-shadow: 0 2px 16px rgba(180, 79, 255, 0.4) !important;
}
#bp-message-thread-list li.ac-bubble-incoming .bp-message-content-wrap p,
#bp-message-thread-list li.ac-bubble-incoming .bp-message-content-wrap span,
#bp-message-thread-list li.ac-bubble-incoming .bp-message-content-wrap a {
color: #02022D !important;
}
/* ── Outgoing bubble — lime/orange gradient, right tail ── */
#bp-message-thread-list li.ac-bubble-outgoing .bp-message-content-wrap {
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 80%, #FF8C00 100%) !important;
border: none !important;
border-radius: 18px 18px 4px 18px !important;
padding: 12px 18px !important;
color: #02022D !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
line-height: 1.5 !important;
word-wrap: break-word !important;
box-shadow: 0 2px 12px rgba(30, 255, 0, 0.25) !important;
display: inline-block !important;
text-align: left !important;
}
#bp-message-thread-list li.ac-bubble-outgoing .bp-message-content-wrap p,
#bp-message-thread-list li.ac-bubble-outgoing .bp-message-content-wrap span,
#bp-message-thread-list li.ac-bubble-outgoing .bp-message-content-wrap a {
color: #02022D !important;
}
/* ── Message collapse / expand ── */
/* 12px top padding + one line of text + 12px bottom padding */
.bp-message-content-wrap.ac-msg-collapsed {
max-height: 38px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* ── MORE / LESS pill — base styles ── */
.ac-msg-toggle-pill {
display: inline-block !important;
margin-top: 6px !important;
padding: 3px 14px !important;
border: none !important;
border-radius: 20px !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #02022D !important;
cursor: pointer !important;
transition: opacity 0.2s ease, transform 0.15s ease !important;
line-height: 1.4 !important;
}
.ac-msg-toggle-pill:hover {
opacity: 0.85 !important;
transform: scale(1.04) !important;
}
/* Incoming pill — purple/pink gradient matching incoming bubble */
.ac-toggle-pill-incoming {
background: linear-gradient(135deg, #7B5FFF 0%, #B44FFF 40%, #FF00E5 100%) !important;
}
/* Outgoing pill — lime/orange gradient matching outgoing bubble */
.ac-toggle-pill-outgoing {
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 80%, #FF8C00 100%) !important;
}
/* Align pill to the correct side — outgoing LEFT, incoming RIGHT */
#bp-message-thread-list li.ac-bubble-outgoing .ac-msg-toggle-pill {
float: left !important;
}
#bp-message-thread-list li.ac-bubble-incoming .ac-msg-toggle-pill {
float: right !important;
}
/* ── Metadata → time label below bubble (mockup style) ── */
#bp-message-thread-list li .message-metadata {
order: 1 !important;
font-size: 9px !important;
color: rgba(255,255,255,0.45) !important;
margin-top: 3px !important;
margin-bottom: 0 !important;
padding: 0 6px !important;
}
#bp-message-thread-list li.ac-bubble-outgoing .message-metadata {
text-align: left !important;
}
#bp-message-thread-list li.ac-bubble-incoming .message-metadata {
text-align: right !important;
}
/* Hide sender name — mockup only shows time below bubble */
#bp-message-thread-list li .message-metadata strong,
#bp-message-thread-list li .message-metadata .bp-user-link {
display: none !important;
}
#bp-message-thread-list li .message-metadata time.activity {
color: rgba(255,255,255,0.45) !important;
font-size: 9px !important;
margin-left: 0 !important;
}
/* ── Avatars hidden above — mockup doesn't show them next to bubbles ── */
/* ── Date divider styling — gradient pill centered on divider line ── */
#bp-message-thread-list li.divider-date .bp-message-content-wrap {
text-align: center !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
color: #02022D !important;
background: linear-gradient(90deg, #FF00E5 0%, #B44FFF 30%, #7ACC00 70%, #1EFF00 100%) !important;
border: none !important;
border-radius: 12px !important;
padding: 3px 16px !important;
display: inline-block !important;
margin: 0 auto !important;
box-shadow: 0 2px 10px rgba(180, 79, 255, 0.2), 0 2px 10px rgba(30, 255, 0, 0.15) !important;
line-height: 1.4 !important;
position: relative !important;
z-index: 2 !important;
transform: translateX(7px) !important;
}
/* Pill centering — counteract parent's 24px padding so pill aligns with center divider line */
body.messages #bp-message-thread-list li.divider-date,
#bp-message-thread-list li.divider-date {
text-align: center !important;
padding: 12px 24px !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
max-width: none !important;
width: calc(100% + 48px) !important;
margin-left: -24px !important;
margin-right: -24px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
list-style: none !important;
box-sizing: border-box !important;
}
/* Hide the empty avatar/metadata on date dividers */
#bp-message-thread-list li.divider-date .bp-avatar-wrap,
#bp-message-thread-list li.divider-date .message-metadata {
display: none !important;
}
/* ── XP reward popup (injected by JS) ── */
.ac-xp-popup {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
background: linear-gradient(135deg, rgba(30, 255, 0, 0.15), rgba(30, 255, 0, 0.05)) !important;
border: 1px solid rgba(30, 255, 0, 0.3) !important;
border-radius: 20px !important;
padding: 4px 14px !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
color: var(--ac-lime) !important;
font-style: italic !important;
margin-top: 4px !important;
animation: ac-xp-fade-in 0.4s ease-out !important;
}
@keyframes ac-xp-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Level-up system message (centered in chat) ── */
.ac-level-up-msg {
text-align: center !important;
padding: 8px 0 !important;
margin: 8px 16px !important;
}
.ac-level-up-msg span {
display: inline-block !important;
background: rgba(104, 105, 255, 0.1) !important;
border: 1px solid rgba(104, 105, 255, 0.25) !important;
border-radius: 20px !important;
padding: 6px 18px !important;
font-size: 0.78rem !important;
color: var(--ac-periwinkle) !important;
font-weight: 600 !important;
}
/* ==========================================================================
MESSAGES — Thread List Gamification
Tier-colored avatar rings, badge pills, +XP tags
========================================================================== */
/* ── Tier-colored avatar ring via ::after ── */
.ac-thread-avatar {
position: relative !important;
overflow: visible !important;
width: 40px !important;
height: 40px !important;
}
.ac-thread-avatar::after {
content: "" !important;
position: absolute !important;
top: 0px !important;
left: 0px !important;
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
border: 3px solid var(--tier-color, rgba(104, 105, 255, 0.4)) !important;
pointer-events: none !important;
z-index: 1 !important;
box-sizing: border-box !important;
}
/* BB thread avatar container — ensure ring is visible and centered */
.bb-rl-thread-avatar.ac-thread-avatar {
overflow: visible !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
}
/* Force the avatar image to be perfectly round */
.bb-rl-thread-avatar.ac-thread-avatar img.avatar {
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
object-fit: cover !important;
}
/* BB thread item — allow overflow for pills and rings.
position:relative makes this the containing block for
.bb-rl-thread-date (absolute). BB originally measured
top:18px from the (12px padding-top), so the date
sat ~6px from the link. We must override top to match. */
a.bb-rl-message-link {
overflow: visible !important;
position: relative !important;
}
a.bb-rl-message-link .bb-rl-thread-date {
top: 6px !important;
right: 12px !important;
}
/* Hide BB's "..." more-options button on thread items */
.bb-rl-thread-item .bb_more_options {
display: none !important;
}
.bb-rl-thread-to {
overflow: visible !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
}
/* Badge ring colors — matched to AC-Tier-Ring-System-v2.pdf & AC-Visual-Gamification-Vision-v2.docx */
[data-tier="starter"] .ac-thread-avatar::after { border-color: #6869FF !important; }
[data-tier="rising"] .ac-thread-avatar::after { border-color: #26C6DA !important; }
[data-tier="builder"] .ac-thread-avatar::after { border-color: #66BB6A !important; }
[data-tier="hustler"] .ac-thread-avatar::after { border-color: #F0AD4E !important; }
[data-tier="grinder"] .ac-thread-avatar::after { border-color: #FF7043 !important; }
[data-tier="elite"] .ac-thread-avatar::after { border-color: #AB47BC !important; }
[data-tier="legend"] .ac-thread-avatar::after { border-color: #EF5350 !important; box-shadow: 0 0 10px rgba(239,83,80,0.4) !important; }
[data-tier="titan"] .ac-thread-avatar::after { border-color: #FFD700 !important; box-shadow: 0 0 10px rgba(255,215,0,0.4) !important; }
[data-tier="founder"] .ac-thread-avatar::after { border-image: linear-gradient(135deg, #6869FF, #FE00FF, #FF7043, #1EFF00) 1 !important; box-shadow: 0 0 12px rgba(254,0,255,0.4) !important; }
/* ── Group message (multi-avatar) in thread list — fix text overlap ── */
.bb-rl-thread-item .thread-multiple-avatar {
position: relative !important;
width: 48px !important;
min-width: 48px !important;
height: 40px !important;
flex-shrink: 0 !important;
overflow: visible !important;
}
.bb-rl-thread-item .thread-multiple-avatar img.avatar {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
object-fit: cover !important;
/* Default Starter periwinkle — JS overrides per-member */
border: 2px solid #6869FF !important;
box-shadow: 0 0 4px rgba(104, 105, 255, 0.3) !important;
}
/* Header group avatar — also add badge rings */
.single-message-thread-header .thread-multiple-avatar img.avatar {
border-radius: 50% !important;
border: 2px solid #6869FF !important;
box-shadow: 0 0 4px rgba(104, 105, 255, 0.3) !important;
}
/* ── Default AC logo avatar — navy bg baked into image, keep as fallback ── */
img.avatar[src*="ac-default-avatar"] {
background-color: #02022D !important;
}
/* Group message overlap — solid bg + circle clip for clean overlapping logos */
.thread-multiple-avatar img.avatar[src*="ac-default-avatar"] {
background-color: #02022D !important;
border-radius: 50% !important;
}
/* ── Badge tier pill in thread list ── */
.ac-thread-badge-pill {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
padding: 1px 7px !important;
border-radius: 10px !important;
font-size: 0.62rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
vertical-align: middle !important;
margin-left: 6px !important;
line-height: 1.4 !important;
}
.ac-thread-badge-pill--starter { background: rgba(104,105,255,0.2) !important; color: #6869FF !important; }
.ac-thread-badge-pill--rising { background: rgba(38,198,218,0.2) !important; color: #26C6DA !important; }
.ac-thread-badge-pill--builder { background: rgba(102,187,106,0.2) !important; color: #66BB6A !important; }
.ac-thread-badge-pill--hustler { background: rgba(240,173,78,0.2) !important; color: #F0AD4E !important; }
.ac-thread-badge-pill--grinder { background: rgba(255,112,67,0.2) !important; color: #FF7043 !important; }
.ac-thread-badge-pill--elite { background: rgba(171,71,188,0.2) !important; color: #AB47BC !important; }
.ac-thread-badge-pill--legend { background: rgba(239,83,80,0.2) !important; color: #EF5350 !important; }
.ac-thread-badge-pill--titan { background: rgba(255,215,0,0.2) !important; color: #FFD700 !important; }
.ac-thread-badge-pill--bronze { background: rgba(104,105,255,0.2) !important; color: #6869FF !important; }
.ac-thread-badge-pill--founder { background: linear-gradient(135deg,rgba(104,105,255,0.2),rgba(254,0,255,0.2)) !important; color: #FE00FF !important; }
/* ── +XP tag — inline next to the badge pill (STR, etc.) ── */
.ac-thread-xp-tag {
display: inline-flex !important;
align-items: center !important;
padding: 1px 8px !important;
border-radius: 10px !important;
font-size: 0.6rem !important;
font-weight: 700 !important;
color: var(--ac-lime) !important;
background: rgba(30, 255, 0, 0.1) !important;
border: 1px solid rgba(30, 255, 0, 0.2) !important;
white-space: nowrap !important;
line-height: 1.4 !important;
margin-left: 5px !important;
vertical-align: middle !important;
}
/* ==========================================================================
MESSAGES — Compose Bar Enhancement
SEND +5 XP button + GIF/:)/@ buttons
========================================================================== */
/* ==========================================================================
MESSAGES — Concept 1 "Neon Arena" Compose Area
.ac-neon-wrap is added to .bp-message-content-wrap by JS.
Animated gradient border via ::before, dark inner background,
toolbar contained inside.
========================================================================== */
/* ── Container with animated gradient border ──
Uses a background gradient on the wrapper itself as the "border",
then ::after provides the solid dark fill on top, leaving 2px of
gradient visible around the edges. */
/* Generic neon-wrap — applies to ANY element tagged with .ac-neon-wrap
(Reply view, New Message view, Compose view). */
.ac-neon-wrap {
position: relative !important;
border-radius: 25px !important;
padding: 16px 16px 20px 16px !important;
margin: 12px 20px 6px !important;
background: #030520 !important;
border: none !important;
overflow: visible !important;
display: block !important;
text-align: left !important;
box-shadow: 0 0 20px rgba(30, 255, 0, 0.12) !important;
line-height: normal !important;
}
/* High-specificity selector to beat #bp-message-thread-list li.divider-date rules (Reply view) */
.bp-message-content-wrap.ac-neon-wrap,
#bp-message-thread-list .bp-message-content-wrap.ac-neon-wrap,
#bp-message-thread-list li .bp-message-content-wrap.ac-neon-wrap {
position: relative !important;
border-radius: 25px !important;
padding: 16px 16px 20px 16px !important;
margin: 12px 20px 6px !important;
background: #030520 !important;
border: none !important;
overflow: visible !important;
display: block !important;
text-align: left !important;
box-shadow: 0 0 20px rgba(30, 255, 0, 0.12) !important;
line-height: normal !important;
}
/* Animated gradient border — lives on ::before so !important doesn't block animation.
Sits BEHIND the element, oversized by 3px on each side. */
.ac-neon-wrap::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 21px;
background: linear-gradient(135deg, #1EFF00, #F0AD4E, #FE00FF, #1EFF00);
background-size: 300% 300%;
animation: acBorderGlow 4s ease infinite;
z-index: -1;
pointer-events: none;
}
/* Hide ALL old neon/gradient borders on messages page — mockup uses clean dark theme
NOTE: .ac-neon-wrap::before is EXCLUDED — it gets re-enabled below with animated gradient */
body.messages .bb-rl-messages-nav-panel::before,
body.messages .bb-rl-thread-item::before,
body.messages .bb-rl-thread-item.active::before,
body.messages .bb-rl-thread-item:hover::before,
body.messages .bb-rl-messages-content::before,
body.messages .ac-details-panel::before {
display: none !important;
background: none !important;
content: none !important;
}
body.messages .ac-neon-wrap {
box-shadow: none !important;
border-radius: 25px !important;
margin: auto 14px 10px 14px !important;
padding: 14px 18px 14px 18px !important;
background: #030520 !important;
position: relative !important;
}
/* High-specificity override for the compose area neon-wrap — beats BB + earlier rules */
body.messages #send-reply .message-box .bp-message-content-wrap.ac-neon-wrap,
body.messages .bb-rl-messages-content #send-reply .bp-message-content-wrap.ac-neon-wrap,
body.messages .bp-messages-content-wrapper .bp-message-content-wrap.ac-neon-wrap {
box-shadow: none !important;
border-radius: 25px !important;
margin: 0 10px 0 10px !important;
padding: 14px 18px 14px 18px !important;
background: #030520 !important;
position: relative !important;
overflow: visible !important;
}
/* Kill padding on the form and message-box wrapper too */
body.messages #send-reply,
body.messages form.send-reply {
padding: 0 !important;
margin: 0 !important;
}
body.messages #send-reply .message-box,
body.messages form.send-reply .message-box {
padding: 0 !important;
margin: 0 !important;
}
/* Animated gradient border — sliding color glow
IMPORTANT: background-position has NO !important so keyframes can animate it */
body.messages .ac-neon-wrap::before,
body.messages .bp-message-content-wrap.ac-neon-wrap::before {
content: '' !important;
display: block !important;
position: absolute !important;
inset: -3px !important;
border-radius: 28px !important;
background-image: linear-gradient(90deg,
#1EFF00, #7ACC00, #F0AD4E, #FE00FF, #B44FFF, #6869FF,
#1EFF00, #7ACC00, #F0AD4E, #FE00FF, #B44FFF, #6869FF, #1EFF00) !important;
background-size: 200% 100% !important;
background-position: 0% 50%;
animation: acBorderSlide 3s linear infinite !important;
z-index: 0 !important;
pointer-events: none !important;
filter: none !important;
}
/* Dark fill sits on top of gradient border */
body.messages .ac-neon-wrap::after,
body.messages .bp-message-content-wrap.ac-neon-wrap::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 25px !important;
background: #030520 !important;
z-index: 0 !important;
}
body.messages .bb-rl-messages-nav-panel,
body.messages .bb-rl-thread-item,
body.messages .bb-rl-thread-item.active,
body.messages .bb-rl-messages-content,
body.messages .ac-details-panel {
box-shadow: none !important;
border: none !important;
}
/* Sliding color — moves the wide gradient left continuously */
@keyframes acBorderSlide {
0% { background-position: 0% 50%; }
100% { background-position: -200% 50%; }
}
/* Pulsing glow — filter blur breathes in and out */
@keyframes acBorderPulse {
0% { filter: blur(1px) drop-shadow(0 0 6px rgba(30,255,0,0.35)); }
25% { filter: blur(2.5px) drop-shadow(0 0 14px rgba(254,0,255,0.5)); }
50% { filter: blur(1px) drop-shadow(0 0 8px rgba(180,79,255,0.45)); }
75% { filter: blur(2.5px) drop-shadow(0 0 14px rgba(240,173,78,0.5)); }
100% { filter: blur(1px) drop-shadow(0 0 6px rgba(30,255,0,0.35)); }
}
/* All children sit above */
.ac-neon-wrap > *,
.ac-neon-wrap > label,
.ac-neon-wrap > div,
.ac-neon-wrap > p {
position: relative !important;
z-index: 1 !important;
}
/* ── Hide BB native formatting toolbar + Aa + submit wrapper ──
Our ac-compose-extras toolbar replaces all of these.
Covers both Reply view and New Message / Compose view. */
.ac-neon-wrap #message-reply-form-submit-wrapper,
.ac-neon-wrap #message-form-submit-wrapper,
.ac-neon-wrap #message-reply-new-submit,
.ac-neon-wrap #whats-new-formatting-toolbar,
.ac-neon-wrap #whats-new-messages-toolbar,
.ac-neon-wrap .show-toolbar,
.ac-neon-wrap .bb-rl-separator,
.ac-neon-wrap .submit,
.ac-neon-wrap #send-message-form .submit,
.ac-neon-wrap .bp-message-content_foot_note {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* ── Inner padding for the neon wrap content ── */
.ac-neon-wrap #bp-message-content,
.ac-neon-wrap form,
.ac-neon-wrap #send-message-form,
.ac-neon-wrap #send-reply-form {
padding: 0 !important;
margin: 0 !important;
}
/* ── Textarea inside the neon wrap ── */
.ac-neon-wrap textarea,
.ac-neon-wrap [contenteditable] {
border: 1px solid rgba(30, 255, 0, 0.15) !important;
border-radius: 12px !important;
background: rgba(30, 255, 0, 0.03) !important;
padding: 12px 14px !important;
color: #fff !important;
font-size: 14px !important;
font-family: 'Inter', sans-serif !important;
min-height: 60px !important;
outline: none !important;
transition: border-color 0.2s !important;
box-sizing: border-box !important;
width: 100% !important;
}
.ac-neon-wrap textarea:focus,
.ac-neon-wrap [contenteditable]:focus {
border-color: rgba(30, 255, 0, 0.35) !important;
box-shadow: 0 0 12px rgba(30, 255, 0, 0.08) !important;
}
/* Hide BB foot note inside wrap */
.ac-neon-wrap .bp-message-content_foot_note {
display: none !important;
}
/* ── Toolbar row inside the neon wrap (GIF/:)/@/Aa + SEND REPLY) ── */
.ac-compose-extras {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 10px 0 0 !important;
gap: 12px !important;
background: transparent !important;
border-top: none !important;
}
/* ── Bonus XP row — sits OUTSIDE and below the neon wrap ── */
.ac-bonus-row {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding: 8px 16px !important;
margin: 0 20px !important;
gap: 16px !important;
}
/* .ac-bonus-row .ac-compose-hint — removed, hint text now lives in .ac-compose-extras row */
/* ── SEND REPLY button — gradient pill, same row as toolbar ── */
/* BB targets button[class*="send"] with border-radius:20px !important
inside body.messages .bb-rl-messages-content — we need higher specificity. */
button.ac-send-reply-btn,
.ac-compose-extras button.ac-send-reply-btn,
.ac-neon-wrap button.ac-send-reply-btn,
body.messages .bb-rl-messages-content button.ac-send-reply-btn,
body.messages .ac-compose-extras button.ac-send-reply-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%) !important;
border: none !important;
border-radius: 16px !important;
-webkit-border-radius: 16px !important;
padding: 5px 22px !important;
height: 48px !important;
max-height: 48px !important;
min-height: 48px !important;
line-height: 1 !important;
color: #02022D !important;
font-weight: 800 !important;
font-size: 0.92rem !important;
font-family: 'Inter', sans-serif !important;
cursor: pointer !important;
transition: opacity 0.15s, transform 0.1s !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
box-shadow: 0 0 16px rgba(30, 255, 0, 0.2) !important;
box-sizing: border-box !important;
white-space: nowrap !important;
}
button.ac-send-reply-btn:hover,
#ac-send-reply.ac-send-reply-btn:hover {
opacity: 0.9 !important;
transform: translateY(-1px) !important;
}
.ac-compose-right {
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
.ac-compose-hint {
color: #828FA0 !important;
font-size: 11px !important;
font-weight: 600 !important;
white-space: nowrap !important;
font-family: 'Inter', sans-serif !important;
flex: 1 1 auto !important;
text-align: right !important;
padding-right: 12px !important;
align-self: center !important;
}
.ac-compose-hint b {
color: #fff !important;
}
/* ── Left toolbar — gradient pill container ── */
.ac-compose-btns-left {
display: flex !important;
gap: 5px !important;
align-items: center !important;
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%) !important;
border-radius: 16px !important;
padding: 5px 12px !important;
height: 48px !important;
max-height: 48px !important;
min-height: 48px !important;
box-sizing: border-box !important;
box-shadow: 0 0 18px rgba(30, 255, 0, 0.25) !important;
}
.ac-compose-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 36px !important;
width: auto !important;
min-width: 42px !important;
padding: 0 12px !important;
border-radius: 11px !important;
background: rgba(2, 2, 45, 0.25) !important;
border: none !important;
color: var(--ac-deep-navy) !important;
font-size: 0.92rem !important;
font-weight: 800 !important;
font-family: 'Inter', sans-serif !important;
cursor: pointer !important;
transition: background 0.15s, color 0.15s !important;
}
.ac-compose-btn:hover {
background: rgba(2, 2, 45, 0.4) !important;
color: var(--ac-deep-navy) !important;
}
.ac-compose-btn.ac-btn-active {
background: rgba(2, 2, 45, 0.5) !important;
box-shadow: inset 0 0 6px rgba(30, 255, 0, 0.3) !important;
}
/* ── + NEW MESSAGE button in compose toolbar row — centered between left & right ── */
button.ac-toolbar-new-msg,
.ac-compose-extras button.ac-toolbar-new-msg,
body.messages .ac-compose-extras button.ac-toolbar-new-msg {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%) !important;
border: none !important;
border-radius: 14px !important;
padding: 3px 28px !important;
height: 40px !important;
max-height: 40px !important;
min-height: 40px !important;
line-height: 1 !important;
color: #02022D !important;
font-weight: 800 !important;
font-size: 0.82rem !important;
font-family: 'Inter', sans-serif !important;
cursor: pointer !important;
transition: opacity 0.15s, transform 0.1s !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
box-shadow: 0 0 16px rgba(30, 255, 0, 0.2) !important;
box-sizing: border-box !important;
white-space: nowrap !important;
margin: 0 auto !important;
flex-shrink: 0 !important;
}
button.ac-toolbar-new-msg:hover {
opacity: 0.9 !important;
transform: translateY(-1px) !important;
}
/* ── Utility: hide ── */
.ac-hidden {
display: none !important;
}
/* ── Compose view: wrapper padding so content sits INSIDE the neon border ring ──
The neon border is on .bb-rl-messages-content::before (not the form).
::before has inset: -1px, padding: 3px, border-radius: 26px.
3px wrapper padding + overflow:hidden + matching radius = clean inset. ── */
body.compose.messages .bb-rl-messages-content {
padding: 1px 1px 1px 2px !important;
overflow: hidden !important;
border-radius: 25px !important;
background: #080d2a !important;
}
/* ── Compose view: form resets — wrapper handles the inset now ── */
body.compose.messages .bb-rl-messages-content form#send_message_form,
body.messages .bb-rl-messages-content form#send_message_form.standard-form {
padding: 0 0 14px 0 !important;
margin: 0 !important;
border-radius: 22px !important;
overflow: hidden !important;
}
/* ── Compose view: NEW MESSAGE header — lime-to-orange gradient fill ── */
body.compose .bp-messages-form-header,
body.messages .bp-messages-form-header {
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%) !important;
border: none !important;
border-radius: 22px 22px 0 0 !important;
padding: 12px 20px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: auto !important;
overflow: hidden !important;
}
body.compose .bp-messages-form-header .bp-new-message-heading,
body.messages .bp-messages-form-header .bp-new-message-heading {
color: #02022D !important;
font-family: 'Inter', sans-serif !important;
font-weight: 900 !important;
font-size: 1.3rem !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* Close X button in compose header — position absolute right */
body.compose .bp-messages-form-header .bp-close-compose-form,
body.messages .bp-messages-form-header .bp-close-compose-form {
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: #02022D !important;
opacity: 0.6 !important;
font-size: 18px !important;
text-decoration: none !important;
}
body.compose .bp-messages-form-header .bp-close-compose-form:hover,
body.messages .bp-messages-form-header .bp-close-compose-form:hover {
opacity: 1 !important;
}
/* ── Compose view: To: field — tighten up, reduce wasted space ── */
body.compose .bp-messages-recipient,
body.messages .bp-messages-recipient {
padding: 8px 16px !important;
margin: 0 !important;
border-bottom: 1px solid rgba(104, 105, 255, 0.15) !important;
z-index: 1 !important;
position: relative !important;
}
/* ── GIF dropdown — embedded inside .ac-neon-wrap ── */
.bb-rl-gif-media-search-dropdown {
color: var(--ac-white, #FFFFFF) !important;
background: transparent !important;
border: none !important;
position: relative !important;
/* Smooth grow/shrink animation */
transition: max-height 0.8s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.5s ease,
padding 0.5s ease !important;
overflow: hidden !important;
padding: 0 !important;
margin-bottom: 8px !important;
border-bottom: 1px solid rgba(30, 255, 0, 0.15) !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Collapsed state — used for both entering AND closing */
.bb-rl-gif-media-search-dropdown.ac-gif-collapsed {
max-height: 0 !important;
opacity: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
border-bottom: none !important;
}
/* Fully open state */
.bb-rl-gif-media-search-dropdown.ac-gif-visible {
opacity: 1 !important;
padding: 8px 0 8px !important;
}
/* Push the search input down so it never touches the neon border */
.bb-rl-gif-media-search-dropdown .gif-search-query,
.bb-rl-gif-media-search-dropdown .gif-search-content > *:first-child {
margin-top: 6px !important;
}
/* Constrain GIF content to proper width, left-justified */
.bb-rl-gif-media-search-dropdown .messages-attached-gif-container,
.bb-rl-gif-media-search-dropdown .gif-search-content {
max-width: 400px !important;
width: 400px !important;
margin-left: 0 !important;
margin-right: auto !important;
}
.bb-rl-gif-media-search-dropdown .messages-attached-gif-container {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.bb-rl-gif-media-search-dropdown .gif-search-query {
max-width: 400px !important;
}
.bb-rl-gif-media-search-dropdown .gif-search-results {
max-height: 240px !important;
overflow-y: auto !important;
max-width: 400px !important;
}
.bb-rl-gif-media-search-dropdown .gif-image {
border-radius: 8px !important;
cursor: pointer !important;
object-fit: cover !important;
}
/* Close button in top-right corner — well inside the container border */
.bb-rl-gif-media-search-dropdown .ac-gif-close-btn {
position: absolute !important;
top: 38px !important;
right: 24px !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: var(--ac-white, #FFFFFF) !important;
font-size: 14px !important;
line-height: 22px !important;
text-align: center !important;
cursor: pointer !important;
z-index: 10 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.2s !important;
}
.bb-rl-gif-media-search-dropdown .ac-gif-close-btn:hover {
background: rgba(255, 255, 255, 0.25) !important;
}
/* Neon wrap transition for smooth expand/shrink */
.ac-neon-wrap {
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* NOTE: z-index on neon-wrap breaks the ::before gradient border stacking.
Omitted intentionally — the dark background already covers content visually. */
/* Hide the GIF preview attachments area when empty (no GIF selected).
BB element: #whats-new-messages-attachments > .messages-attached-gif-container */
.ac-neon-wrap #whats-new-messages-attachments {
display: none !important;
}
.ac-neon-wrap #whats-new-messages-attachments:has(img) {
display: block !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
max-height: 150px !important;
overflow: hidden !important;
}
/* Constrain selected GIF preview image so it doesn't push buttons off screen */
.ac-neon-wrap #whats-new-messages-attachments img {
max-height: 120px !important;
width: auto !important;
object-fit: contain !important;
border-radius: 8px !important;
}
/* When GIF picker is open, increase top padding so content clears the neon border.
High-specificity selectors to beat the padding:16px!important rules above. */
.ac-neon-wrap.ac-gif-open,
.bp-message-content-wrap.ac-neon-wrap.ac-gif-open,
#bp-message-thread-list .bp-message-content-wrap.ac-neon-wrap.ac-gif-open,
#bp-message-thread-list li .bp-message-content-wrap.ac-neon-wrap.ac-gif-open {
padding-top: 30px !important;
}
/* Emoji needs less top padding — the category label provides its own spacing */
.ac-neon-wrap.ac-emoji-pad,
.bp-message-content-wrap.ac-neon-wrap.ac-emoji-pad,
#bp-message-thread-list .bp-message-content-wrap.ac-neon-wrap.ac-emoji-pad,
#bp-message-thread-list li .bp-message-content-wrap.ac-neon-wrap.ac-emoji-pad {
padding-top: 8px !important;
}
/* ── Emoji panel — embedded inside .ac-neon-wrap (same pattern as GIF) ── */
.ac-emoji-panel {
color: var(--ac-white, #FFFFFF) !important;
background: transparent !important;
border: none !important;
position: relative !important;
transition: max-height 0.8s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.5s ease,
padding 0.5s ease !important;
overflow: hidden !important;
padding: 0 !important;
margin-bottom: 8px !important;
border-bottom: 1px solid rgba(30, 255, 0, 0.15) !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
.ac-emoji-panel.ac-emoji-collapsed {
max-height: 0 !important;
opacity: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
border-bottom: none !important;
}
.ac-emoji-panel.ac-emoji-visible {
opacity: 1 !important;
padding: 0 0 16px !important;
}
/* Emoji grid layout — constrained to 400px, left-justified */
.ac-emoji-grid {
display: grid !important;
grid-template-columns: repeat(10, 1fr) !important;
gap: 4px !important;
max-width: 400px !important;
width: 400px !important;
margin-left: 0 !important;
margin-right: auto !important;
}
.ac-emoji-cat-label {
grid-column: 1 / -1 !important;
font-size: 11px !important;
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
font-family: Inter, sans-serif !important;
font-weight: 600 !important;
padding: 4px 0 2px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.ac-emoji-cat-border {
border-top: 1px solid rgba(104, 105, 255, 0.15) !important;
}
.ac-emoji-item {
cursor: pointer !important;
font-size: 22px !important;
padding: 4px !important;
border-radius: 6px !important;
text-align: center !important;
transition: background 0.15s !important;
}
.ac-emoji-item:hover {
background: rgba(104, 105, 255, 0.25) !important;
}
/* Reuse the same close-button style from GIF for emoji */
.ac-emoji-panel .ac-gif-close-btn {
position: absolute !important;
top: 12px !important;
right: 24px !important;
}
/* Search input — gradient with embedded dark blue magnifying glass */
.bb-rl-gif-media-search-dropdown input[type="search"],
.bb-rl-gif-media-search-dropdown .search-query-input {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2302022D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 12px center / 16px 16px no-repeat,
linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%) !important;
border: none !important;
border-radius: 8px !important;
color: var(--ac-deep-navy, #02022D) !important;
padding: 8px 12px 8px 36px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 8px !important;
-webkit-appearance: textfield !important;
}
/* Hide the white BB icon-font magnifying glass */
.bb-rl-gif-media-search-dropdown .gif-search-query::before {
content: none !important;
display: none !important;
}
/* Hide the BB .search-icon element — icon is now in input background */
.bb-rl-gif-media-search-dropdown .gif-search-query .search-icon {
display: none !important;
}
/* Hide native browser search input decorations */
.bb-rl-gif-media-search-dropdown input[type="search"]::-webkit-search-decoration,
.bb-rl-gif-media-search-dropdown input[type="search"]::-webkit-search-cancel-button,
.bb-rl-gif-media-search-dropdown input[type="search"]::-webkit-search-results-button,
.bb-rl-gif-media-search-dropdown input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none !important;
display: none !important;
}
.bb-rl-gif-media-search-dropdown input[type="search"]::placeholder {
color: rgba(2, 2, 45, 0.5) !important;
}
.bb-rl-gif-media-search-dropdown .gif-image {
border-radius: 8px !important;
cursor: pointer !important;
}
/* ── Aa Format bar — styled to match the GIF/Aa button row ── */
.ac-format-bar {
display: flex !important;
gap: 6px !important;
align-items: center !important;
padding: 8px 12px !important;
flex-wrap: wrap !important;
}
.ac-format-bar .ac-fmt-btn {
background: linear-gradient(135deg, rgba(30,255,0,0.15) 0%, rgba(240,173,78,0.15) 100%) !important;
border: 1px solid rgba(30, 255, 0, 0.3) !important;
color: var(--ac-white, #FFFFFF) !important;
border-radius: 8px !important;
padding: 6px 12px !important;
cursor: pointer !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
min-width: 36px !important;
text-align: center !important;
transition: all 0.15s ease !important;
line-height: 1.3 !important;
}
.ac-format-bar .ac-fmt-btn:hover {
background: linear-gradient(135deg, rgba(30,255,0,0.3) 0%, rgba(240,173,78,0.3) 100%) !important;
border-color: rgba(30, 255, 0, 0.6) !important;
}
.ac-format-bar .ac-fmt-sep {
width: 1px !important;
height: 24px !important;
background: rgba(104, 105, 255, 0.2) !important;
margin: 0 2px !important;
}
/* ── Medium Editor toolbar dark theme ── */
.medium-editor-toolbar {
background: var(--ac-deep-navy, #02022D) !important;
border: 1px solid rgba(104, 105, 255, 0.3) !important;
border-radius: 10px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
padding: 4px !important;
}
.medium-editor-toolbar .medium-editor-action {
background: transparent !important;
color: var(--ac-white, #FFFFFF) !important;
border: none !important;
border-radius: 6px !important;
min-width: 32px !important;
height: 32px !important;
font-size: 14px !important;
}
.medium-editor-toolbar .medium-editor-action:hover {
background: rgba(104, 105, 255, 0.2) !important;
}
.medium-editor-toolbar .medium-editor-button-active {
background: rgba(104, 105, 255, 0.3) !important;
color: var(--ac-periwinkle, #6869FF) !important;
}
.medium-editor-toolbar::after {
border-top-color: var(--ac-deep-navy, #02022D) !important;
}
/* ── SEND +10 XP button — inline in the toolbar row ── */
/* High specificity to beat BB's button[class*="send"] { border-radius: 20px } */
.ac-send-xp-btn,
.ac-compose-extras button.ac-send-xp-btn,
body.messages .ac-compose-extras button.ac-send-xp-btn,
body.messages .bb-rl-messages-content button.ac-send-xp-btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%) !important;
border: none !important;
border-radius: 16px !important;
-webkit-border-radius: 16px !important;
padding: 5px 16px !important;
height: 48px !important;
color: #02022D !important;
font-weight: 800 !important;
font-size: 0.92rem !important;
cursor: pointer !important;
transition: opacity 0.15s, transform 0.1s !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
box-sizing: border-box !important;
box-shadow: 0 0 18px rgba(30, 255, 0, 0.25) !important;
}
/* ── XP chip inside send button — same color as SEND text ── */
.ac-xp-chip {
background: rgba(2, 2, 45, 0.25) !important;
border-radius: 10px !important;
padding: 4px 10px !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #02022D !important;
}
.ac-send-xp-btn:hover {
opacity: 0.9 !important;
transform: translateY(-1px) !important;
}
.ac-send-xp-btn:active {
transform: translateY(0) !important;
}
/* Native send buttons stay visible — styled as lime/orange pills */
/* ==========================================================================
MESSAGES — Share Station / Scoreboard interaction
Hide floating tab when scoreboard is open; show in-panel button instead
========================================================================== */
/* Hide the floating Share Station tab when scoreboard is open */
.ac-score-open ~ .ac-share-tab,
body.messages .ac-score-panel--open ~ .ac-share-tab,
body.messages.ac-scoreboard-open .ac-share-tab {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Share Station button inside scoreboard panel */
.ac-score-share-station {
padding: 12px 8px 4px !important;
margin-top: auto !important;
border-top: 1px solid rgba(104, 105, 255, 0.15) !important;
}
.ac-score-share-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
width: 100% !important;
background: linear-gradient(135deg, #FE00FF, #6869FF) !important;
border: none !important;
border-radius: 10px !important;
padding: 10px 16px !important;
color: #fff !important;
font-family: Inter, sans-serif !important;
font-weight: 800 !important;
font-size: 0.78rem !important;
letter-spacing: 0.06em !important;
cursor: pointer !important;
transition: opacity 0.15s !important;
text-transform: uppercase !important;
}
.ac-score-share-btn:hover {
opacity: 0.88 !important;
}
/* ==========================================================================
MESSAGES — Mobile overrides for new sections
========================================================================== */
@media (max-width: 768px) {
#bp-message-thread-list li.ac-bubble-incoming .bp-single-message-content,
#bp-message-thread-list li.ac-bubble-outgoing .bp-single-message-content {
max-width: 85% !important;
}
.ac-compose-inner {
padding: 10px !important;
}
.ac-compose-extras {
flex-wrap: wrap !important;
gap: 8px !important;
padding: 10px 0 0 !important;
}
.ac-compose-btns-left {
height: 36px !important;
padding: 3px 8px !important;
}
.ac-compose-btn {
min-width: 30px !important;
padding: 0 8px !important;
font-size: 0.75rem !important;
}
.ac-compose-hint {
display: none !important;
}
.ac-send-xp-btn {
height: 36px !important;
padding: 0 16px !important;
font-size: 0.78rem !important;
}
.ac-thread-badge-pill {
display: none !important;
}
}
/* ==========================================================================
MESSAGES — Compose Hint Text (Enter to Send / Shift+Enter)
========================================================================== */
/* Hide BB native "Enter to Send / Shift+Enter" hint text */
body.messages .bb-rl-messages-content .submit ~ div,
body.messages .bb-rl-messages-content .send-message-info,
body.messages .bb-rl-messages-content [class*="send-info"] {
display: none !important;
}
/* BB puts hints as siblings after the submit div — hide them (NOT .message-box!) */
body.messages .bb-rl-messages-content .submit + div:not(.ac-compose-extras):not(.ac-injected):not(.message-box) {
display: none !important;
}
/* Also target BB rl specific hint containers */
body.messages .bb-rl-messages-content .bb-rl-send-message-info,
body.messages .bb-rl-messages-content .message-send-info {
display: none !important;
}
/* Hide BB "Enter to Send / Shift+Enter" text after submit div */
body.messages .bb-rl-messages-content .submit + div:not(.ac-compose-extras) {
display: none !important;
}
/* Hide BB compose page form hints */
body.messages .bb-rl-messages-content form .submit ~ div:not(.ac-compose-extras):not(.ac-injected):not(.message-box) {
display: none !important;
}
/* Also target the standalone Shift+Enter BB hint on compose page */
body.compose .bb-rl-messages-content .message-send-info,
body.compose .bb-rl-messages-content div:not(.ac-compose-extras):not(.submit) > strong:only-child {
display: none !important;
}
/* ==========================================================================
MESSAGES — Hide BB Native Send Arrow, Keep Pill Button + Aa Toolbar
Thread view: #message-reply-form-submit-wrapper contains formatting toolbar + send button
Compose page: #message-form-submit-wrapper contains formatting toolbar + send button
We keep the wrapper visible (formatting toolbar), keep the .submit div visible
(native send button styled as lime/orange pill), but hide arrow icons inside.
========================================================================== */
/* ── BB native submit wrapper — hidden inside neon wrap, kept in DOM for form submit ── */
body.messages #message-reply-form-submit-wrapper,
body.messages #message-form-submit-wrapper,
body.compose #message-form-submit-wrapper {
display: none !important;
}
/* Hide BB native send arrow */
#message-reply-new-submit::before,
#message-new-submit::before {
display: none !important;
content: none !important;
}
/* ==========================================================================
MESSAGES — Compose Textarea Border (lime/orange)
========================================================================== */
/* Compose form textarea — lime/orange border */
body.messages .bb-rl-messages-content textarea,
body.messages .bb-rl-messages-content [contenteditable],
body.messages .bb-rl-messages-content .bp-message-content,
body.messages .bb-rl-messages-content #message_content,
body.messages .bb-rl-messages-content .ql-editor,
body.messages .bb-rl-messages-content .bp-message-compose textarea {
border: 1px solid rgba(30, 255, 0, 0.3) !important;
border-radius: 14px !important;
background: rgba(30, 255, 0, 0.02) !important;
transition: border-color 0.2s !important;
}
body.messages .bb-rl-messages-content textarea:focus,
body.messages .bb-rl-messages-content [contenteditable]:focus,
body.messages .bb-rl-messages-content #message_content:focus {
border-color: rgba(30, 255, 0, 0.5) !important;
outline: none !important;
box-shadow: 0 0 10px rgba(30, 255, 0, 0.1) !important;
}
/* ==========================================================================
MESSAGES — New Message Box (replaces HUD STARTER + 0 XP)
========================================================================== */
.ac-new-msg-box {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 40%, #F0AD4E 100%) !important;
border: none !important;
border-radius: 12px !important;
padding: 12px 40px !important;
cursor: pointer !important;
transition: all 0.2s !important;
min-width: 280px !important;
box-sizing: border-box !important;
}
.ac-new-msg-box:hover {
opacity: 0.9 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 16px rgba(30, 255, 0, 0.3) !important;
}
.ac-new-msg-title {
color: #02022D !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.ac-new-msg-subtitle {
color: #02022D !important;
font-size: 11px !important;
font-weight: 600 !important;
opacity: 0.7 !important;
}
/* ========================================================================
NEW MESSAGE FLASH BANNER — between filter pills and thread list
======================================================================== */
.ac-unread-flash {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
margin: 10px 12px !important;
padding: 10px 18px !important;
border-radius: 14px !important;
background: linear-gradient(135deg, #1EFF00 0%, #7ACC00 30%, #F0AD4E 60%, #FE00FF 100%) !important;
background-size: 200% 200% !important;
animation: acFlashBg 3s ease infinite, acFlashPulse 2s ease-in-out infinite !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
box-shadow:
0 0 20px rgba(30, 255, 0, 0.4),
0 0 40px rgba(254, 0, 255, 0.2),
inset 0 0 15px rgba(255, 255, 255, 0.15) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.ac-unread-flash:hover {
transform: scale(1.02) !important;
box-shadow:
0 0 30px rgba(30, 255, 0, 0.6),
0 0 60px rgba(254, 0, 255, 0.35),
inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
}
/* Shimmer overlay */
.ac-unread-flash::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 60% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
animation: acFlashShimmer 2.5s ease-in-out infinite !important;
}
/* Count circle */
.ac-unread-flash-count {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: #02022D !important;
color: #1EFF00 !important;
font-size: 18px !important;
font-weight: 800 !important;
flex-shrink: 0 !important;
box-shadow: 0 0 12px rgba(30, 255, 0, 0.5), inset 0 0 6px rgba(30, 255, 0, 0.15) !important;
animation: acCountBounce 1.5s ease infinite !important;
text-shadow: 0 0 8px rgba(30, 255, 0, 0.6) !important;
}
/* NEW text */
.ac-unread-flash-text {
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: #02022D !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}
/* Animations */
@keyframes acFlashBg {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes acFlashPulse {
0%, 100% { box-shadow: 0 0 20px rgba(30, 255, 0, 0.4), 0 0 40px rgba(254, 0, 255, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.15); }
50% { box-shadow: 0 0 35px rgba(30, 255, 0, 0.6), 0 0 60px rgba(254, 0, 255, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.2); }
}
@keyframes acFlashShimmer {
0% { left: -100%; }
50%, 100% { left: 150%; }
}
@keyframes acCountBounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
/* Hidden state */
.ac-unread-flash.ac-flash-hidden {
display: none !important;
}
/* ========================================================================
UNREAD PILL — replaces timestamp on unread threads with pulsing glow
======================================================================== */
/* Hide the default BuddyBoss purple dot completely */
.bb-rl-thread-item.unread a.bb-rl-message-link::before {
display: none !important;
}
/* UNREAD pill — matches .bb-rl-thread-date position and size inside the link.
Solid purple gradient + white text to match Now pill styling. */
.ac-unread-pill {
position: absolute !important;
top: 6px !important;
right: 12px !important;
z-index: 2 !important;
display: inline-block !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
background: linear-gradient(135deg, #7B2FFF 0%, #A347FF 50%, #6C3AE0 100%) !important;
border: none !important;
color: #fff !important;
border-radius: 10px !important;
padding: 4px 10px !important;
line-height: 1.4 !important;
white-space: nowrap !important;
min-width: 90px !important;
text-align: center !important;
animation: ac-unread-pulse 2s ease-in-out infinite !important;
}
@keyframes ac-unread-pulse {
0%, 100% {
box-shadow: inset 0 0 0 1px rgba(163, 71, 255, 0.5),
0 0 6px rgba(163, 71, 255, 0.3), 0 0 12px rgba(163, 71, 255, 0.1);
text-shadow: 0 0 4px rgba(163, 71, 255, 0.3);
}
50% {
box-shadow: inset 0 0 0 1px rgba(163, 71, 255, 0.8),
0 0 16px rgba(163, 71, 255, 0.7), 0 0 32px rgba(163, 71, 255, 0.3);
text-shadow: 0 0 8px rgba(163, 71, 255, 0.6);
}
}
/* "Now" timestamp — purple glow + bounce entrance (high specificity to override BB).
The contains a