/*! * BuddyBoss Theme POC — template_type='3' (ReadyLaunch / Studio) layout patch. * * In RL mode the theme skips BB Theme's `#content > .container > .bb-grid` * wrapper chain (those scaffolds are designed for the 1.0/2.0 grid system and * fight RL's fixed sidebar). The header opens only `#page > main#primary` and * lets the rl-mode templates wrap their own `.bb-rl-companion-content` inside. * * Production version of this merge will fold these rules into the canonical * `template-v3.css` (or similar) under proper scoping. */ /* The RL header is `position: fixed; top: 0; height: 71px; z-index: 1030`. * Platform main.css already handles the page wrapper margin-top (69px) and * the sidebar-margin-shift via `.site.bb-readylaunch` and the sibling * selector `.bb-rl-left-panel ~ .site.bb-readylaunch`. We adopt the * `bb-readylaunch` class on our #page div in header.php to inherit those * rules — no need to duplicate them here. * * Main column padding only — let rl-mode templates' inner * `.bb-rl-companion-content` apply its own max-width. */ body.bb-rl-poc-active main#primary.bb-rl-poc-main { width: auto; max-width: none; min-height: calc(100vh - 71px); padding: var(--bb-rl-space-300, 24px); } @media (max-width: 992px) { body.bb-rl-poc-active main#primary.bb-rl-poc-main { padding: var(--bb-rl-space-200, 16px); } } /* BB Theme adds Bootstrap-style `flex: 0 0 N%` and `max-width: N%` classes * to articles on archive/blog pages (its 1.0/2.0 column system). Inside the * rl-mode `.bb-rl-companion-post-list` CSS Grid those rules collapse cards * to 33%/66% widths instead of filling the grid cell. Override them so each * card naturally fills its grid track. */ body.bb-rl-poc-active .bb-rl-companion-post-list > .bb-rl-companion-card, body.bb-rl-poc-active .bb-rl-companion-related-grid > .bb-rl-companion-related-card { flex: none !important; max-width: none !important; width: auto !important; } /* Card border in RL mode — match the platform's native member/group cards * exactly (#3d3d3d at dark mode). The companion theme used * `var(--bb-rl-border-color)` which resolves to `#2f2f2f` — too close to the * body bg (#242425) to give cards visible "lift". The user's perception of * "cards merging into the background" is actually a border-contrast issue, * not a body-color issue: both body and cards use `#242425` on RL pages too, * but the lighter border (`#3d3d3d`) creates the depth. * * Light mode: the platform uses `#e7e7e7` for the card border — also lighter * than the body bg. We don't override there since the companion theme's * default already works in light mode. */ body.bb-rl-poc-active.bb-rl-dark-mode .bb-rl-companion-card, body.bb-rl-poc-active.bb-rl-dark-mode .bb-rl-companion-article, body.bb-rl-poc-active.bb-rl-dark-mode .bb-rl-companion-related-card, body.bb-rl-poc-active.bb-rl-dark-mode .bb-rl-companion-comments, body.bb-rl-poc-active.bb-rl-dark-mode .bb-rl-companion-comment { border-color: #3d3d3d; } /* Subtle hover shadow in dark mode so cards feel interactive — mirrors what * RL does on hover for member/group cards. Companion theme had this for * light mode but the dark-mode override in the variables zeroed it out. */ body.bb-rl-poc-active.bb-rl-dark-mode .bb-rl-companion-card:hover, body.bb-rl-poc-active.bb-rl-dark-mode .bb-rl-companion-related-card:hover { border-color: #555556; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.4); transition: border-color 120ms ease, box-shadow 120ms ease; } /* Body background — match the platform's native RL pages exactly. * * On `/community/members/` etc. the platform leaves `` transparent * (no `background-color` rule) and sets `color-scheme: dark` (or `light`) * via `body { color-scheme: dark }`. The browser then paints its UA default * for that scheme — Chromium renders dark-scheme `Canvas` as `#1c1c1c`, * which is the slightly-darker grey the user pointed out around the cards. * * The companion theme's `.bb-rl-companion-theme { background-color: * var(--bb-rl-background-color) }` rule was painting body the SAME color * as the cards (`#242425`), causing the "everything blends" effect. Override * here: clear the companion's body bg and let the browser's `color-scheme` * default render through, matching RL natively. */ /* Body bg / color-scheme — adopted from the platform. * * Found in `bp-templates/bp-nouveau/readylaunch/css/main.css`: * - `.bb-rl-dark-mode { color-scheme: dark; scrollbar-color: ... }` (line ~186) * - `.site.bb-readylaunch { background-color: var(--bb-rl-background-secondary-color); ... }` (line 397) * * Our `

` includes the `bb-readylaunch` class (set in * header.php), so the platform's main.css rule applies automatically and * paints our page wrapper to #2f2f2f in dark mode / #f6f6f6 in light mode. * * The companion theme's `.bb-rl-companion-theme { background-color: * var(--bb-rl-background-color) }` rule was making body the SAME color as * cards (#242425). Override that to transparent so the page wrapper's color * is what's visible behind the cards — matching the platform's native pages. */ body.bb-rl-poc-active { background-color: transparent; }