/** * UXDivi · BuddyBoss ReadyLaunch Theme * Versión: 1.0.0 * * Estrategia: * - BB ReadyLaunch usa custom properties --bb-rl-* en :root. * - Las redefinimos dentro de `body.bb-readylaunch-template`, que tiene * mayor specificity que :root y se cascade hacia todos los descendientes. * - Mappeo: brand BB (#3E34FF) → UXDivi brand (#014DFD), text/background/ * border → tokens dark del DS. * - Tipografía: Inter (body) + Bricolage Grotesque (headings) + JetBrains Mono. * - Solo colores + tipografía · NO tocamos paddings, sizes, layouts. */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap'); /* ============================================================ 1 · Override de custom properties de BB ReadyLaunch ============================================================ */ body.bb-readylaunch-template { /* Brand · BB usa #3E34FF · mappeamos al brand UXDivi */ --bb-rl-primary-color: #014DFD; --bb-rl-secondary-color: #62E5FF; --bb-rl-brand-primary-color: #014DFD; --bb-rl-background-brand-primary-color: #014DFD; --bb-rl-background-brand-primary-hover-color: #4A7EFF; --bb-rl-background-brand-secondary-color: rgba(98, 229, 255, 0.10); --bb-rl-background-brand-secondary-hover-color: rgba(98, 229, 255, 0.18); --bb-rl-background-brand-disabled-color: rgba(1, 77, 253, 0.20); --bb-rl-text-brand-primary-color: #62E5FF; --bb-rl-text-brand-secondary-color: #62E5FF; --bb-rl-icon-brand-primary-color: #62E5FF; --bb-rl-icon-brand-secondary-color: #62E5FF; --bb-rl-icon-brand-disabled-color: rgba(98, 229, 255, 0.35); --bb-rl-border-brand-primary-color: #62E5FF; --bb-rl-border-brand-secondary-color: rgba(98, 229, 255, 0.25); --bb-rl-link-primary-hover-color: #8CEEFF; /* Backgrounds · dark del DS */ --bb-rl-background-color: #040814; --bb-rl-background-secondary-color: #070C1C; --bb-rl-background-secondary-hover-color: #10172B; --bb-rl-background-tertiary-color: #0A0F1E; --bb-rl-background-tertiary-hover-color: #10172B; --bb-rl-background-hover-color: #10172B; --bb-rl-background-disabled-color: #0A0F1E; --bb-rl-background-black-color: #040814; /* Text · ink del DS */ --bb-rl-text-color: #C6D2E8; --bb-rl-text-secondary-color: #8894B3; --bb-rl-text-tertiary-color: #566080; --bb-rl-text-disabled-color: #566080; --bb-rl-text-white-color: #F5F8FF; /* Borders · cyan-line del DS */ --bb-rl-border-color: rgba(98, 229, 255, 0.10); --bb-rl-border-secondary-color: rgba(98, 229, 255, 0.25); --bb-rl-border-tertiary-color: rgba(98, 229, 255, 0.10); --bb-rl-border-quaternary-color: rgba(98, 229, 255, 0.08); --bb-rl-border-quinery-color: rgba(98, 229, 255, 0.05); --bb-rl-border-disabled-color: rgba(255, 255, 255, 0.05); /* Icons · ink del DS */ --bb-rl-icon-color: #C6D2E8; --bb-rl-icon-primary-color: #F5F8FF; --bb-rl-icon-secondary-color: #8894B3; --bb-rl-icon-tertiary-color: #566080; --bb-rl-icon-disabled-color: #566080; /* Estados positive (success) · verde del DS */ --bb-rl-background-positive-primary-color: #42BC42; --bb-rl-background-positive-primary-hover-color: #54C854; --bb-rl-background-positive-secondary-color: rgba(66, 188, 66, 0.12); --bb-rl-background-positive-secondary-hover-color: rgba(66, 188, 66, 0.20); --bb-rl-text-positive-primary-color: #42BC42; --bb-rl-text-positive-secondary-color: #42BC42; --bb-rl-icon-positive-primary-color: #42BC42; --bb-rl-icon-positive-secondary-color: #42BC42; --bb-rl-border-positive-primary-color: #42BC42; --bb-rl-border-positive-secondary-color: rgba(66, 188, 66, 0.35); /* Tipografía · Inter para body */ --bb-rl-font-family-base: 'Inter', system-ui, -apple-system, sans-serif; } /* ============================================================ 2 · Tipografía global · refuerzo (algunas reglas BB hardcodean) ============================================================ */ body.bb-readylaunch-template, body.bb-readylaunch-template input, body.bb-readylaunch-template button, body.bb-readylaunch-template select, body.bb-readylaunch-template textarea { font-family: 'Inter', system-ui, -apple-system, sans-serif; } body.bb-readylaunch-template h1, body.bb-readylaunch-template h2, body.bb-readylaunch-template h3, body.bb-readylaunch-template h4, body.bb-readylaunch-template h5, body.bb-readylaunch-template h6, body.bb-readylaunch-template .bb-rl-page-heading, body.bb-readylaunch-template .bb-rl-card-heading, body.bb-readylaunch-template .bb-rl-entry-heading, body.bb-readylaunch-template .bb-rl-section-heading { font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif !important; letter-spacing: -0.01em; } body.bb-readylaunch-template code, body.bb-readylaunch-template pre, body.bb-readylaunch-template kbd, body.bb-readylaunch-template samp { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; } /* ============================================================ 3 · Body / shell de fondo (refuerzo por si la var no aplica) ============================================================ */ body.bb-readylaunch-template { background-color: #040814 !important; color: #C6D2E8; } /* ============================================================ 4 · Logo wrapper (mismo issue que en el LD player) ============================================================ */ body.bb-readylaunch-template .bb-rl-logo, body.bb-readylaunch-template .bb-rl-brand-logo, body.bb-readylaunch-template .bb-rl-header-logo { background-color: transparent !important; } /* ============================================================ 5 · Selección ============================================================ */ body.bb-readylaunch-template ::selection { background-color: rgba(98, 229, 255, 0.28); color: #F5F8FF; } /* ============================================================ 6 · "Volver al Dashboard" — link custom de bb_rl_custom_links movido al TOP del sidebar (BB lo renderiza al fondo por default) ============================================================ */ body.bb-readylaunch-template #secondary.bb-rl-left-panel { display: flex; flex-direction: column; } body.bb-readylaunch-template #secondary .bb-rl-left-panel-widget:has(.bb-bottom-readylaunchpanel-menu) { order: -10; } /* Ocultamos el h2 "Links" genérico — para 1 solo item el label sobra */ body.bb-readylaunch-template .bb-rl-list h2 { display: none; } /* El link de retorno · más prominente que un menu item normal */ body.bb-readylaunch-template .bb-bottom-readylaunchpanel-menu .bb-rl-left-panel-menu-link { color: var(--bb-rl-text-brand-primary-color, #62E5FF) !important; font-weight: 600; } body.bb-readylaunch-template .bb-bottom-readylaunchpanel-menu .bb-rl-left-panel-menu-link:hover { color: #8CEEFF !important; } /* ============================================================ 7 · Mobile · convertir .bb-rl-left-panel en drawer cerrable El default de BB lo deja siempre visible (position:fixed, left:0) ocupando 300px de los 375px del viewport. Lo escondemos por default y abrimos con el botón hamburger nativo (.bb-rl-left-panel-mobile) más una clase de toggle que mete el JS. ============================================================ */ @media (max-width: 992px) { /* Duplicación de clase (.x.x) en el body para subir specificity y ganar contra reglas internas de BB que también afectan transform · mismo patrón que usamos contra `.ld-primary-background` en el LD player. */ body.bb-readylaunch-template.bb-readylaunch-template .bb-rl-left-panel { transform: translateX(-100%) !important; transition: transform 250ms cubic-bezier(0.2,0.7,0.2,1) !important; box-shadow: 8px 0 32px -12px rgba(0,0,0,0.6); } body.bb-readylaunch-template.uxdivi-rl-panel-open.uxdivi-rl-panel-open .bb-rl-left-panel { transform: translateX(0) !important; } /* Backdrop · solo visible cuando uxdivi-rl-panel-open */ body.bb-readylaunch-template .uxdivi-rl-backdrop { position: fixed; inset: 0; z-index: 1029; background: rgba(4,8,20,0.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 250ms cubic-bezier(0.2,0.7,0.2,1); } body.bb-readylaunch-template.uxdivi-rl-panel-open .uxdivi-rl-backdrop { opacity: 1; pointer-events: auto; } } /* ============================================================ 8 · Scrollbar dark ============================================================ */ body.bb-readylaunch-template ::-webkit-scrollbar { background-color: #070C1C; width: 8px; height: 8px; } body.bb-readylaunch-template ::-webkit-scrollbar-track { background-color: #070C1C; } body.bb-readylaunch-template ::-webkit-scrollbar-thumb { background-color: #10172B; } body.bb-readylaunch-template ::-webkit-scrollbar-thumb:hover { background-color: #18213E; } body.bb-readylaunch-template { scrollbar-color: #10172B #070C1C; scrollbar-width: thin; } /* ============================================================ 9 · Topbar navegación · botón "Volver al dashboard" + ocultar search ============================================================ */ /* Ocultar el buscador "community" del topbar (los miembros usan el buscador del dashboard interno para encontrar contenido del curso). */ body.bb-readylaunch-template .bb-rl-header .bb-rl-button.bb-rl-header-search, body.bb-readylaunch-template .bb-rl-network-search-modal { display: none !important; } /* Botón "Volver al dashboard" inyectado vía JS en el topbar de BB. */ body.bb-readylaunch-template .uxdivi-rl-back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin-right: 12px; background: linear-gradient(135deg, #014DFD 0%, #4A7EFF 100%); color: #ffffff !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 13px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 24px -8px rgba(1,77,253,0.5); transition: transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 250ms cubic-bezier(0.2, 0.7, 0.2, 1); line-height: 1; white-space: nowrap; } body.bb-readylaunch-template .uxdivi-rl-back-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 40px -8px rgba(1,77,253,0.55); color: #ffffff !important; text-decoration: none; } body.bb-readylaunch-template .uxdivi-rl-back-btn svg { flex-shrink: 0; } @media (max-width: 768px) { body.bb-readylaunch-template .uxdivi-rl-back-btn span { display: none; } body.bb-readylaunch-template .uxdivi-rl-back-btn { padding: 8px 10px; } } /* ============================================================ 10 · Sidebar BB · convertir "Volver al Dashboard" en botón visual ============================================================ La option bb_rl_custom_links inyecta el link con título "← Volver al Dashboard" dentro de la sección "Links" del sidebar. Lo destacamos visualmente como botón primario para que sea claro que es la vía de salida principal de BB ReadyLaunch hacia el dashboard. */ body.bb-readylaunch-template #secondary.bb-rl-left-panel a[href$="/dashboard/"] { background: linear-gradient(135deg, #014DFD 0%, #4A7EFF 100%) !important; color: #ffffff !important; border-radius: 999px !important; padding: 12px 18px !important; margin: 10px 14px !important; font-weight: 600 !important; box-shadow: 0 8px 24px -8px rgba(1,77,253,0.5) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important; max-width: calc(100% - 28px) !important; transition: transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 250ms cubic-bezier(0.2, 0.7, 0.2, 1) !important; } body.bb-readylaunch-template #secondary.bb-rl-left-panel a[href$="/dashboard/"]:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 40px -8px rgba(1,77,253,0.55) !important; color: #ffffff !important; } /* BB inyecta un ícono cadena (::before) en los custom_links del sidebar. Lo quitamos para que el botón solo muestre el texto "← Volver al Dashboard". */ body.bb-readylaunch-template #secondary.bb-rl-left-panel a[href$="/dashboard/"]::before, body.bb-readylaunch-template #secondary.bb-rl-left-panel a[href$="/dashboard/"]::after { content: none !important; display: none !important; background: none !important; }