/*--------------------------------------------------------------
This is your custom stylesheet.
Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.
Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/
.header-mini-cart ul.cart_list li.mini_cart_item>a.remove {order: unset;margin-right: 10px;}
.woocommerce ul.product_list_widget li a img{order: unset;}
.lms-exercise-list {
max-height: 0; /* Start with zero height */
overflow: hidden; /* Hide overflow content */
transition: max-height 0.2s ease-out; /* Smooth transition for height */
}
.product-name a {text-transform: none;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;max-width: 300px;
white-space: normal;}
.woocommerce table.shop_table_responsive thead, .woocommerce-page table.shop_table_responsive thead{display:none;}
.lms-topic-toggle {
position: absolute;
top: 2px;
left: 7px;
display: inline-block;
width: 35px;
height: 50px;
margin-right: 6px;
cursor: pointer;
}
.lms-topic-toggle i{
display: inline-block;
font-size: 16px;
line-height: 10px;
color: #bdbdbd;
position: relative;
top: 10px;
left: 12px;
-webkit-transition: -webkit-transform .2s;
transition: transform .2s;
transform: rotate(-90deg);
}
.lms-topic-item{
position: relative;
}
.lms-topic-item.turnover .lms-topic-toggle i{
transform: rotate(0);
}
.bb-lesson-topics-count{
max-width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 10px 0 0;
font-size: 12px;
color: var(--bb-alternate-text-color);
}
.exercise .elementor-location-header{
display: none
}
.container.header-3{
max-width: 100%
}
.product .bs-quantity{
display: flex
}
.virtual.product .bs-quantity{
display: none;
}
#content div.product form.cart .button{
margin-left: 0
}
.single-exercise .wp-block-embed.is-type-video .wp-block-embed__wrapper>iframe{
display: block
}
.bb-pages{
visibility: hidden
}
ul.products li.product a .unlock-icon img, .unlock-icon img{
width: 30px;
height: auto
}
ul.products li.product a .unlock-icon{
display: flex;
align-items: center;
justify-content: center
}
.products .button.virtual, .products .add_to_cart_button{
display: none !important
}
.purchased-product{
width: 100%
}
.lms-exercise-list{
margin: 0 !important;
}
.lms-exercise-item .bb-lms-title-wrap{
padding-left: 60px
}
.woocommerce-product-gallery__image a {
pointer-events: none;
}
.lms-exercise-item.current>.bb-lms-title-wrap{
background: rgba(146,164,183,.1)
}
.woocommerce .button.wc-forward{
display: none;
}
.single-product.woocommerce .button.wc-forward{
display: inline-block;
}
.single-product .button img{
height: 25px;
margin-right: 10px
}
.product .back-to-library-btn{
color: black
}
.single-product .back-to-library-btn-wrapper a, .library-button-wrapper a{
background-color: rgba(0, 0, 0, .03);
color: var(--bb-alternate-text-color);
border-radius: var(--bb-button-radius);
font-size: 14px;
-webkit-transition: all linear .2s;
transition: all linear .2s;
width: auto;
text-align: center
}
.back-to-library-btn-wrapper{
margin-top: 30px
}
.single-product .back-to-library-btn-wrapper a, .library-button-wrapper a{
padding: 5px 15px 5px 10px;
font-weight: 600
}
.library-button-wrapper{
text-align: left;
margin-bottom: 20px
}
.single-product .back-to-library-btn-wrapper a:hover, .library-button-wrapper a:hover
{
color: var(--bb-primary-button-border-regular)
}
#wpc-term-taxonomy-product_cat-911 .wpc-term-count, #wpc-term-taxonomy-product_cat-912 .wpc-term-count{
display: none
}
body .wpc-filters-main-wrap li.wpc-term-item.active, body .wpc-filters-main-wrap li.wpc-term-item.active,
body .wpc-filters-main-wrap li.wpc-term-item.active label, body .wpc-filters-main-wrap li.wpc-term-item.active a{
opacity: 1 !important
}
.wcpay-express-checkout-wrapper {
display: none !important;
}
.wcpay-payment-request-wrapper, .woocommerce-notices-wrapper {
display: none !important;
}
.single-product .woocommerce-notices-wrapper{
display:block !important;
}
.single-exercise .header-aside .header-aside-inner .header-cart-link-wrap{
display: none;
}
.product .woocommerce-error,.woocommerce-cart .product-price,.woocommerce-cart button[name="update_cart"]{
display: none !important;
}
.woocommerce-cart .cart-collaterals table.shop_table th {
text-transform: none;
}
.woocommerce #content table.cart td.actions .coupon, .woocommerce table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon
{float: right;}
.woocommerce-cart .cart-collaterals table.shop_table {
float: right !important;
}
.coupon button.button {
padding:0;
height:auto;
}
.learndash-wrapper .ld-content-actions{
justify-content: center
}
.learndash-wrapper .ld-content-actions .learndash_content_wrap{
width: auto !important
}
.wcpay-payment-request-wrapper, #wcpay-express-checkout-button-separator{
display: none
}
.ld-table-list-header{
display: none !important
}
.ld-progress-bar, .ld-progress-percentage.ld-secondary-color.course-completion-rate{
display: none
}
.lms-topic-sidebar-wrapper .lms-topic-sidebar-data{
width: 360px
}
.cart-subtotal, .product-quantity, .product-total{
display: none !important;
}
.wcf-embed-checkout-form table.shop_table thead{
display: none
}
.woocommerce .woocommerce-breadcrumb, .single-product .product_meta{
display: none
}
.single-product .summary.entry-summary{
border: none !important
}
.user-notes img{
height: 19px;
filter: invert(1)
}
.user-notes{
color: white
}
#coin-confirmation-popup{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border: 2px solid #ccc;
border-radius: 6px;
padding: 20px;
z-index: 1000;
width: 500px;
max-width: 100%;
}
#coin-confirmation-popup h3{
font-size: 20px;
text-transform: none !important;
}
#confirm-yes{
margin-right: 10px;
padding: 10px 20px;
background-color: var(--bb-primary-button-border-regular);
color: white;
border: none;
cursor: pointer;
}
#confirm-no{
padding: 10px 20px;
background-color: #f44336;
color: white;
border: none;
cursor: pointer;
}
#coin-confirmation-overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.lms-course-members-list{
display: none
}
#content div.product div.woocommerce-product-gallery.images img,
#content div.product div.woocommerce-product-gallery.images{
border: none !important;
border-radius: 10px
}
.single-product .modal-buttons{
text-align: center
}
body:not(.page-template-page-fullscreen) .site{
overflow-x: hidden
}
.site-header--elementor.icon-fill-in #header-messages-dropdown-elem i, .site-header--elementor.icon-fill-in #header-notifications-dropdown-elem i{
opacity: 1
}
.woocommerce-cart .cart-collaterals table.shop_table {
float: right;
}
.woocommerce-mini-cart span.quantity {
padding-left: 10px;
}
.woocommerce-mini-cart-item a img {
padding-left: 5px;
}
@media(max-width:369px){
#user-notes{
display: none
}
#user-streak{
display: none
}
.product-name {
width: 100px !important;
}
}
body.single-exercise .lms-topic-sidebar-data{
max-height: calc(100vh - 32px);
}
@media(min-width:767px){
body.single-exercise .lms-topic-sidebar-data{
top: 32px
}
}
.bb-sfwd-aside.bb-dark-theme .site-header .header-aside-inner>a i, .bb-sfwd-aside .site-header .header-aside-inner>a i{
opacity: 1 !important
}
body.single-exercise #page #primary{
max-width: 100%
}
.site-header--elementor.icon-fill-in #bb-toggle-theme i, .site-header--elementor.icon-fill-in .course-toggle-view i{
opacity: 1
}
@media(max-width:767px){
.single-exercise #learndash-content div.lms-topic-sidebar-wrapper{
display: flex
}
}
.bb-ld-sticky-sidebar .bb-course-type.bb-course-type-free{
display: none !important
}
/* exercise popup style */
.exercise-buttons {
display: flex;
gap: 20px;
margin-top: 30px;
justify-content: center;
}
.exercise-buttons a {
display: flex;
justify-content: center;
align-items: center;
width: 56px;
height: 56px;
border-radius: 14px;
background-color: rgba(237, 237, 237, 1);
}
.exercise a img {
height: 24px;
width: auto;
}
.help-button.active {
background-color: var(--bb-primary-color);
}
.exercise-buttons .exercise-help{
background-color: var(--bb-primary-color)
}
.exercise-popup{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1300000;
overflow: auto;
padding: 10px;
}
.exercise-popup .popup-content {
max-width: 100%;
width: 800px;
height: 590px;
background: #fff;
border-radius: 16px;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.exercise-popup .popup-header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(222, 222, 222, 1);
padding: 24px;
}
.exercise-popup-title {
display: flex;
align-items: center;
}
.exercise-popup-title svg {
height: 24px;
margin-right: 10px;
}
#exercise-popup svg path{
fill: var(--bb-primary-color)
}
.exercise-popup .close-btn {
cursor: pointer;
}
.exercise-popup .close-btn img {
height: 12px;
}
#exercise-popup .popup-body {
overflow: hidden auto;
max-height: 100%;
height: 480px;
width: 100%;
padding: 20px
}
#exercise-popup .popup-body {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
#exercise-popup.notes-popup .popup-body {
padding: 24px;
max-width: 100%;
width: 490px;
margin: 10px auto;
max-height: 500px;
overflow: hidden auto;
}
.notes-popup .popup-body {
max-width: 100%;
width: 550px !important;
text-align: center;
}
.notes-popup textarea {
max-width: 100%;
width: 100%;
height: 300px;
}
.notes-popup .save-notes-button {
width: 250px;
height: 65px;
font-size: 20px;
font-weight: 600;
border-radius: 10px;
margin-top: 20px;
background-color: var(--bb-primary-color);
color: white;
}
.remove-scroll {
/* `position: fixed` removed - see the note in journey-template.css. It
yanked the recorder dialog to the top of the viewport whenever the
replace-recording confirmation opened. */
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
.notes-popup .save-notes-button:hover{
background-color: var(--bb-primary-color);
}
/* Loader css */
.notes-popup .save-notes-button{
position: relative
}
.button-loader-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
border-radius: 9px;
}
.button-loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #313131;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
}
tr.cart-discount.coupon-jaymo {
display: flex
;
justify-content: flex-end;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.learndash-wrapper .ld-content-actions{
border-top: 0
}
.user-streak img{
height: 20px;
width: auto;
margin-right: 5px
}
.user-streak{
display: flex;
align-items: center;
justify-content: center;
color: white
}
.subscription_link:hover{
color: black !important
}
#mepr-unauthorized-for-resource{
text-align: center;
}
.mp-form-submit .mepr-submit{
line-height: 0 !important;
}
.mp-form-submit .mepr-submit:hover{
background-color: var(--bb-primary-color) !important;
}
.gamipress-buddypress-user-details > .gamipress-buddypress-points{
margin-top: 0
}
.mp_wrapper.mp_invoice tfoot{
display: none
}
table.mp-table{
border-width: 1px !important
}
.mepr-payment-methods-wrapper h3, .mp-form-submit{
text-align: center
}
.have-coupon-link:hover{
color: black !important
}
.product-categories>li>a{
text-transform: none !important
}
.product-categories>li.current-cat{
background-color: var(--bb-primary-color);
color: var(--bb-body-background-color);
}
.product-categories>li.current-cat:hover{
background-color: var(--bb-primary-color);
color: var(--bb-body-background-color);
}
.product-categories>li{
border: 0;
padding: 13px 20px;
border-radius: 6px;
margin-bottom: 5px
}
.product-categories>li:hover{
background-color: var(--bb-content-alternate-background-color)
}
.product-categories>li>a{
line-height: 14px;
font-size: 14px;
letter-spacing: -.24px;
color: #000;
}
.product-categories>li.current-cat>a, .product-categories>li.current-cat #library-product-count{
color: var(--bb-body-background-color);
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button{
font-size: 16px
}
.product-categories>li.current-cat .count{
color: var(--bb-body-background-color) !important
}
.member-video div.video-js .vjs-poster>img{
left: 50%;
transform: translate(-50%);
}
.entry-content .sample-lesson .fluid-width-video-wrapper, .entry-content .sample-lesson img.aligncenter{
margin-top: 0 !important;
margin-bottom: 0 !important
}
.bb-media-model-container video{
background-color: white
}
.bb-item-cover-wrap.bb-video-cover-wrap img{
height: auto;
width: 100%;
min-height: auto !important
}
.keep-open{
display: block !important
}
.overlayDiv{
opacity: 0 !important;
position: fixed;
top: 0;
left: 0;
z-index: 999991;
width: 100%;
height: 100%;
background-color: rgba(250, 251, 253, .9);
box-shadow: 0 6px 24px 0 rgba(18, 43, 70, .1);
}
@media(max-width:980px){
.bbp-user-page nav.bp-navs .bb_more_dropdown.open{
max-height: fit-content;
z-index: 992 !important
}}
@media(max-width:767px){
.single-post .elementor-tab-title{
font-size: 20px !important
}}
button{
text-shadow: none !important
}
.unlock-all{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 250px
}
.unlock-all a{
border: 1px solid black;
border-radius: 50px;
padding: 10px 20px;
color: black;
}
.unlock-all a:hover{
background-color: #cce3c8;
color: #000;
border-color: #000;
box-shadow: 0px 10px 10px 0px rgba(30.599999999999998, 30.267391304347825, 30.267391304347825, 0.2);
}
.unlock-all img{
width: 20px;
height: auto;
margin-right: 10px
}
.unlock-all-button-wrapper{
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%
}
@media(max-width:801px){.notification-dropdown .notification-header .header-view-cart-link{padding-right:10px;}
th.product-name {display: unset !important;text-align: center;}
.woocommerce-cart .product-price{display:unset !important;}
.woocommerce-cart td.product-subtotal {display: none !important;}
tr.woocommerce-cart-form__cart-item.cart_item {display: flex;justify-content: space-between;align-items: center;}
tr.woocommerce-cart-form__cart-item.cart_item {display: flex !important;justify-content: space-between;align-items: center;}
.woocommerce-cart table.cart img {width: 50px;min-width:32px;}
/* The `border-bottom: 0` that used to sit here is GONE - 2026-09-03. Jeremy:
"cart: divider lines shouldn't disappear at smaller viewports (around
801px)". Below this width every row ran into the next with nothing between
them, which is where a cart most needs the lines - the rows are stacked and
taller there, not side by side. */
.woocommerce table.shop_table tbody th{border-top:0px;} .woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item td, .woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item th {max-width: 150px;text-align: center !important;}
.woocommerce-cart .woocommerce {padding: 20px 10px !important;}
.woocommerce-cart .woocommerce table.shop_table td{padding:9px;}.product-name {width: 150px;}
.woocommerce-cart .woocommerce table.shop_table_responsive tr td::before,.woocommerce-cart .woocommerce-page table.shop_table_responsive tr td::before {float:unset !important;}
.woocommerce-cart .woocommerce table.shop_table.shop_table_responsive .product-price::before {display:none;}
}
/* The coupon field is right-aligned at EVERY width - 2026-09-03. Jeremy: at
smaller viewports "the code text field must always stay completely aligned
right ... like the same way it is at every other resolution". It used to be
floated right only from 800px up, so below that it jumped to the left and
looked like a different page. */
.woocommerce-cart .coupon {
float: right !important;
margin-right: 0 !important;
}
@media (min-width: 800px){
.woocommerce table.shop_table tbody th{ border-top: 0px;}
.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item td,.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item th{max-width:150px;text-align: center;}
}
@media(min-width:767px) and (max-width: 820px){
.lms-topic-sidebar-wrapper{
flex: 370px 0 0
}
}
/* "Don't show again" injected into popups that don't have one built in.
Added 2026-08-20 alongside ap_hide_dismissed_popups(). */
.ap-dont-show-again {
display: flex;
align-items: center;
gap: .5em;
margin-top: 1em;
cursor: pointer;
font-size: .9em;
}
.ap-dont-show-again input {
margin: 0;
cursor: pointer;
}
/*
* Forum: the Reply button belongs above the replies at every width.
*
* BuddyBoss already renders TWO reply buttons - one in the narrow sidebar
* beside the scrubber (desktop) and one in the content column above the
* replies, marked `.mobile-only` (small screens). Nothing needs moving or
* rebuilding: show the content-column one everywhere and hide the sidebar
* copy, keeping the Subscribe link that shares that block.
*/
.replies-content .bb-topic-reply-link-wrap.mobile-only {
display: block !important;
}
.single-topic-sidebar-links .bb-topic-reply-link-wrap {
display: none !important;
}
/*
* Forum role labels ("Member", "Administrator") - removed 2026-08-23.
*
* They are WordPress permission names leaking into a community space.
* "Administrator" describes a database capability, not a person, and
* "Member" is true of everyone so it distinguishes nobody. In a room built
* for posting unfinished work, a label that ranks people is the wrong note -
* the same reasoning that removed rank badges.
*
* The name, the avatar, the date and Momentum already say more than either
* word did.
*/
.bbp-author-role {
display: none !important;
}
/*
* Next live session strip, on the Community page.
*
* The markup still lives in Code Snippet 16 and carries inline styles, hence
* the !important - they will come out when that snippet is migrated.
*
* It was rendering as a grey #fafafa box with a #e2e2e2 border, sitting
* directly above BuddyBoss's white cards, so it read as something bolted on
* rather than part of the page. Values below are measured from the real
* "All Discussions" card on the same screen: white, 1px #d6d9dd, 10px radius.
*/
.dk-next-event {
background: #fff !important;
border-color: #d6d9dd !important;
border-radius: 10px !important;
padding: 20px !important;
margin-bottom: 20px !important;
}
/* "NEXT LIVE SESSION" - a label, so it should sit quietly above the title. */
.dk-next-event > div:first-child {
font-size: 12px !important;
letter-spacing: 0.06em !important;
color: #8a8f98 !important;
margin-bottom: 8px !important;
}
/* The countdown is the reason the strip exists; give it the weight. */
.dk-next-event .dk-countdown {
font-size: 16px !important;
margin-bottom: 16px !important;
}
.dk-next-event .button {
padding: 10px 22px !important;
font-size: 15px !important;
}
/* ---- THE HELP CAROUSEL, CENTRED ---- 2026-08-27
Jeremy asked for the carousel to be "aligned center horizontally". Measured
first, and the carousel itself already was: the swiper, its slides, the
image and every wrapper inside all sit at offset 0 in the page.
What is not centred is the TEXT. It is left-aligned across a 1120px block,
so it reads as off-centre against the narrower centred tabs above it and the
centred dots below. That is the only thing on the slide that is not on the
middle line, so it is the thing being seen.
Scoped to `.e-n-carousel` - Elementor's nested carousel widget - rather than
to a page id, because page ids are database values and this site's test and
production copies have already been shown to disagree about those.
ONE WORD TO REVERT: if a left-aligned paragraph was wanted all along, delete
the `text-align` and centre the block with a max-width instead. */
.e-n-carousel .swiper-slide,
.e-n-carousel .swiper-slide p,
.e-n-carousel .swiper-slide h1,
.e-n-carousel .swiper-slide h2,
.e-n-carousel .swiper-slide h3 {
text-align: center;
}
/* The paragraph block itself gets a comfortable measure so centred lines do not
run the full 1120px - centred text is harder to read the wider it gets. */
.e-n-carousel .swiper-slide .elementor-widget-text-editor .elementor-widget-container {
max-width: 44rem;
margin-left: auto;
margin-right: auto;
}
/* ---- SALES PAGE: THE HERO VIDEO SAT LEFT WHENEVER THE COLUMNS STACKED ----
Jeremy: "on sales page hero video should be aligned center on medium
resolution screenport range".
The hero is two columns - words left, video right - and the video widget
carries a 58px left padding that helps it sit in that right-hand column.
Above 1024px the columns are side by side and the padding is 0. At 1024 and
below they stack, the widget becomes the full width of the page, and the
video keeps a 640px maximum with no centring, so it sat against the left
edge with up to 326px of nothing to its right.
TWO CORRECTIONS TO MY FIRST ATTEMPT, both found by measuring rather than
assuming it had worked:
1. It was scoped with `:has(iframe)`. The iframe is LAZY-LOADED, so at the
moment the page lays out there is no iframe inside that div and the rule
matched nothing. It is hung on the wrapper's own inline `max-width`
instead, which is in the markup from the start.
2. The band was 768-1024. Wrong at both ends: the video is off-centre at any
width where the columns have stacked and the container is wider than
640px, which starts well below 768. One `max-width: 1024px` covers it,
and below ~640px the video is full width so centring is a harmless no-op.
Measured after the fix: 64px each side at 767, 130px at 900, 192px at 1024,
and the desktop two-column layout above 1024 is untouched.
Not scoped to an Elementor ELEMENT id - those are database values that
differ between the two sites and die when a block is rebuilt. The page id is
stable and already used elsewhere in this theme. */
@media (max-width: 1024px) {
.elementor-52519 .elementor-widget-html .elementor-widget-container:has(> div[style*="max-width"]) {
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor-52519 .elementor-widget-html .elementor-widget-container > div[style*="max-width"] {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ---- THE HELP CAROUSEL: "Don't show again" was the odd one out ----
The centring rule above reaches the carousel's own slides. This checkbox is
not in the carousel - it is a separate widget below it - so it kept its
left alignment and a 17px label while the caption above it sits centred at
16px. On a phone it read as a different piece of furniture that had wandered
in.
Hung on `.dont_show_again_checkbox`, which is a real class on the input, via
`:has()` - not an Elementor element id, which is a database value that
differs between the two sites and dies when the block is rebuilt. */
.elementor-widget-container:has(.dont_show_again_checkbox) {
text-align: center;
}
label:has(> .dont_show_again_checkbox) {
font-size: 0.875rem;
opacity: 0.75;
}
.dont_show_again_checkbox {
margin-right: 0.4em;
vertical-align: middle;
}
/* ---- PAGE TITLES ARE CENTRED ---- 2026-09-02
Jeremy: "page header 'Library' is aligned left when I want it aligned center
(actually i want to apply this to all current and future pages as a default
that wordpress page title is aligned center rather than left as blanket
rule)."
Written as a default rather than page by page, which is what he asked for -
a page added next month gets it without anybody remembering.
SCOPED TO THE PAGE'S OWN HEADING, not to `.entry-title` everywhere. That
class is also on every card in a list of posts, on forum topic rows and on
activity items; centring those would quietly wreck several screens that
nobody would think to check after a change described as "centre the page
title". `.entry-header` only wraps the heading of the thing you are looking
at, so the blast radius is the one heading intended. */
.entry-header > .entry-title,
.entry-header > .page-title,
.bb-single-page-title {
text-align: center;
}
/* The Library's own heading is no longer rendered at all - Jeremy changed his
mind on 2026-09-02 - so it is not listed above. See
ap_library_title_script(). */
/* The Community forum's title needed no help here after all.
It was hidden by `.post-984 .entry-title{display:none!important}` in the
Custom CSS & JS snippet "custom-css". Jeremy deleted that line at source on
2026-09-02, so the override that was forcing the heading visible is gone too
and there is one rule deciding this again. */
/* ---- NO STRAY COLON IN THE CART ---- 2026-09-02
Jeremy, twice: "':' still incorrectly displaying above product title in
cart".
The first attempt failed for a dull reason worth recording: the rule was put
in assets/css/checkout.css, which is enqueued on `is_checkout()` only. The
cart is a different page, so the stylesheet was never loaded there and the
rule never ran. Right diagnosis, wrong file.
THE CAUSE. WooCommerce's responsive cart table labels each cell from its
`data-title` attribute with a `::before` that appends a colon. Emptying the
"Product" heading - which is what he asked for - left `data-title=""`, so the
colon rendered with nothing in front of it. Confirmed on production by
reading the computed `::before` content, not guessed: `td.product-name`
returns exactly ":".
All four cells are covered, not only the one that showed. The others print
the same orphaned colon whenever their heading is empty, and fixing one and
leaving three is how this comes back. */
.woocommerce-cart td.product-name::before,
.woocommerce-cart td.product-remove::before,
.woocommerce-cart td.product-thumbnail::before,
.woocommerce-cart td.product-total::before,
.woocommerce-cart td.actions::before,
.woocommerce-checkout td.product-name::before {
content: none !important;
}
/* The phone cart/checkout line-item grid was REMOVED 2026-09-02.
Third attempt at this row and the third one that made it worse - Jeremy at
755px: the cart "absolutely fucked up" and the checkout line with "the price
under the X".
The honest reason: viewport emulation does not work in this browser, so every
version of these rules was written from a screenshot and shipped without ever
being seen at the width it targets. Research does not rescue a layout you
cannot look at. Reverted to WooCommerce's own responsive table, which was
merely cramped rather than broken.
Do not re-attempt this without a way to actually view the page at 375-767px. */
/* Sub-menu items in the mobile side panel: no icon.
BuddyBoss gives every custom link a generic "page" glyph, which on
"Continue Journey" and "Daily Keys Collective" reads as a placeholder
somebody forgot to replace. The indent already says these are children, so
the icon is carrying no information and costing horizontal space on the
narrowest screens.
Scoped to depth-1 items inside the panel so the top-level icons - which DO
distinguish Journey from Library from Community - are untouched. */
.bb-mobile-panel-inner .sub-menu > li > a > i,
.bb-mobile-panel-inner .sub-menu > li > a > .bb-icon-l,
#bb-mobile-panel .sub-menu > li > a > i,
#bb-mobile-panel .sub-menu > li > a > .bb-icon-l {
display: none;
}
/* ============================================================
THE CART, 640px TO 900px - 2026-09-04
Jeremy's three reports, all in the band where the layout changes hands:
dividers break up around 800px, the coupon field jumps and lands on top of a
divider around 768px, "Total" prints twice, and the amount stops being
right-aligned above 767px.
THE ROOT OF THE FIRST TWO. Below 801px each `tr.cart_item` is switched to
`display: flex`. A flex row is no longer a table row, so the borders that WERE
drawn by the cells stop lining up - each cell draws its own short segment and
the "line" becomes dashes. The border has to move to the ROW, which is the
only element that still spans the full width.
THE ROOT OF THE SECOND TWO. `shop_table_responsive` prints `data-title` as a
`::before` on every cell so a stacked table still has labels. In the TOTALS
table the `| ` is visible as well, so every line is labelled twice - and the
pseudo-label pushes the amount off its right edge. The totals table is not
stacked, so it does not want those labels at all.
============================================================ */
/* One continuous line per row, drawn by the row itself. */
.woocommerce-cart table.cart tr.cart_item {
border-bottom: 1px solid var(--bb-content-border-color, #e7e9ec) !important;
}
.woocommerce-cart table.cart tr.cart_item > td,
.woocommerce-cart table.cart tr.cart_item > th {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* The coupon row gets its own space and its own line above it, so the field
never sits on the divider belonging to the last item. */
.woocommerce-cart table.cart td.actions {
padding-top: 1.25rem !important;
padding-bottom: 1.25rem !important;
border-top: 0 !important;
overflow: hidden;
}
.woocommerce-cart table.cart td.actions .coupon {
display: flex;
align-items: center;
gap: 0.5rem;
float: right !important;
margin: 0 !important;
}
/* ---- the totals table ---- */
/* No duplicate label. The | is doing that job. */
.woocommerce-cart .cart_totals table.shop_table_responsive td::before,
.woocommerce-cart .cart_totals table.shop_table td::before {
content: none !important;
display: none !important;
}
/* Label left, money right - at every width, so the amounts stack in one
column under each other exactly as they do on a wide screen.
TWO THINGS USED TO BREAK THIS, both found by Jeremy on 2026-09-06 and both
fixed by making one rule apply at every width instead of three rules
disagreeing across breakpoints:
1. Around 800px "Subtotal" and "Total" jumped to the far left. Three
breakpoint blocks in this file set `display: inline-block` on these
cells, which took them out of the table's column grid; below the widest
block they landed at the start of the row instead of above the money.
Those blocks are gone - the table lays out as a table now.
2. Below 768px both labels vanished outright. WooCommerce's own
`woocommerce-smallscreen.css` hides `tbody th` in every responsive shop
table, because on a phone its cart rows repeat the label in a `::before`.
Ours does not - that pseudo-element is switched off just above - so the
label was the only thing naming the number and it was being hidden.
Stating the display explicitly is what keeps it. */
.woocommerce-cart .cart_totals table.shop_table th {
display: table-cell !important;
text-align: left !important;
width: auto !important;
}
.woocommerce-cart .cart_totals table.shop_table td {
display: table-cell !important;
text-align: right !important;
font-variant-numeric: tabular-nums;
}
.woocommerce-cart .cart_totals table.shop_table tr {
display: table-row !important;
}
/* AND THE TABLE KEEPS ITS HALF OF THE ROW AT 800px.
Jeremy, 2026-09-06: at 800x829 the whole totals block jumped to the full
width of the page while every wider viewport kept it in the right-hand half.
AN OFF-BY-ONE BETWEEN TWO BREAKPOINTS, not a design decision. The theme's
own WooCommerce sheet drops this table to `width: 100%; float: none` at
`max-width: 800px`, which INCLUDES exactly 800.
AND 800 IS NOT ONE NUMBER. Restating the desktop layout from exactly 800
upwards was the first fix and Jeremy still saw the jump: a window 800px wide
is a 785px document once the scrollbar is taken out, so "800" means two
different things depending on which one a rule is asking about. Any rule
pinned to that value is a coin toss.
So the knife-edge is removed rather than moved. The totals keep their half
of the row on anything wider than a phone, and only actual phone widths get
the stacked full-width version. There is no longer a width at which one
pixel changes the layout. */
@media (min-width: 601px) {
.woocommerce-cart .cart-collaterals table.shop_table {
float: right;
width: 50%;
}
}
/* ============================================================
LINK HOVER - 2026-09-04
Jeremy: "when hover over hyperlink it changes to white which is invisible in
most situation on site".
WHAT IT ACTUALLY IS. The theme sets `a:hover { color: var(--bb-primary-color) }`
and that variable is #50C450 - a light green. It is not white, but on a white
page it is close enough to washed out to read as white, and on the green
"Unlock all lessons" banner it is the SAME green as the background, so the
link genuinely disappears on hover.
THE SHADE. #2F8F3F, which the Library already uses for a selected category,
so this introduces no new colour. It was chosen to survive both grounds:
readable on white, and still clearly green on the black header, which the
lighter shade was only ever getting away with.
Deliberately NOT !important. Anything that sets its own hover colour - a
button, a nav item on a coloured ground - keeps it; this only replaces the
site-wide default. */
a:hover,
a:focus {
color: #2f8f3f;
}
/* ============================================================
ELEMENTOR POPUPS ON A BIG SCREEN - 2026-09-04
Jeremy, twice now: the popups on Library, Journey home and Journey level 1
are "too small which makes them hard to read and makes videos comically
small", and after the first fix, "still too small at larger viewports".
WHY THE FIRST FIX ONLY HALF-WORKED. Those popups were widened to 92vw, which
is a MOBILE measurement: on a phone 92vw is nearly the whole screen, and on a
1600px monitor Elementor was still capping them at their own fixed width, so
nothing visibly changed on the screens Jeremy actually works on.
Set here rather than per-popup in Elementor on purpose - five popups with the
same job should not have five chances to drift apart, and a sixth one added
later inherits this without anybody remembering.
`min()` keeps it sensible at both ends: three quarters of a wide screen, but
never wider than a comfortable reading measure. */
@media ( min-width: 1025px ) {
.elementor-popup-modal .dialog-widget-content {
width: min( 75vw, 1040px ) !important;
max-width: min( 75vw, 1040px ) !important;
min-width: 640px !important;
}
.elementor-popup-modal .dialog-message {
width: 100% !important;
max-width: 100% !important;
}
}
/* Between tablet and laptop it takes nearly the width and stops there. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
.elementor-popup-modal .dialog-widget-content {
width: 88vw !important;
max-width: 88vw !important;
}
}
/* ============================================================
TWO THINGS THE PARENT THEME PUTS ON SCREEN THAT WE DO NOT WANT
2026-09-07
Both live inside BuddyBoss templates - `template-single-course-sidebar.php`
and `class-bp-core-members-widget.php` - that would have to be forked whole
to change one line in, inheriting every future BuddyBoss change to them by
hand. Neither has a filter. Removing them in CSS is the smallest honest
answer; if either ever grows a proper setting, delete the rule.
============================================================ */
/* "Open Registration" on a course. Jeremy, 2026-09-07: "i don't want any
course to say 'Open Registration' anywhere." It is LearnDash's word for a
course with no enrolment gate, which describes the plumbing rather than
anything a member needs to know - and on this site the memberships decide
access, so it is not even true in the way it sounds. */
.bb-course-type.bb-course-type-open {
display: none !important;
}
/* The Members widget's third tab. Jeremy, 2026-09-07: remove "Popular"
sitewide. BuddyBoss prints it whenever the Connections component is on, and
turning that off to lose a tab would take Connections with it.
The separator before it goes too, or the row ends in a stray bullet. */
.widget_bp_core_members_widget #popular-members,
.widget_bp_core_members_widget .item-options .bp-separator:has(+ #popular-members) {
display: none !important;
}
/* ============================================================
THE HEADER'S JOIN NOW IS A GREEN BUTTON - 2026-09-07
Jeremy: "make header Join Now button green". It shipped as a white outline
pill beside Login, which made the two look like a pair of equal choices when
one of them is the thing the page is for.
Green, white text, 100px radius: the same button as the Join Now in the
promo bar above it and on every gated page, so a visitor meets one button
for one action wherever they are.
============================================================ */
.bb-header-buttons a.signup,
.site-header .bb-header-buttons a.signup {
background: #43b02a !important;
border-color: #43b02a !important;
color: #fff !important;
border-radius: 100px !important;
}
.bb-header-buttons a.signup:hover,
.bb-header-buttons a.signup:focus {
background: #379123 !important;
border-color: #379123 !important;
color: #fff !important;
}
/* ============================================================
THE MOBILE MENU'S CHEVRONS FOLLOW THE SITE'S ONE CONVENTION
2026-09-08
Jeremy: "in the main sidebar navigation the chevron icons again have the same
issue that they are not matching the rest of the site - what I want here is
for them to point right when collapsed and down when expanded".
BuddyBoss ships them pointing DOWN at rest and rotating to UP when open,
which is the opposite arrangement to the Saved page, the practice diary and
the LearnDash course list. One convention, everywhere: right means "there is
more this way", down means "it is below you now".
`.bs-submenu-open` is BuddyBoss's own state class, added to the icon itself.
============================================================ */
.bs-submenu-toggle,
[dir="rtl"] .side-panel-menu .bs-submenu-toggle {
transform: rotate(-90deg) !important;
}
.bs-submenu-toggle.bs-submenu-open,
[dir="rtl"] .side-panel-menu .bs-submenu-toggle.bs-submenu-open {
transform: rotate(0deg) !important;
}
/* ============================================================
THE MOBILE MENU'S CHEVRONS ARE A FULL-SIZE TAP TARGET - 2026-09-11
Jeremy: "the chevron (for expanding menus) are too small for good tap
targets (I end up clicking the parent by mistake most of the time)".
Measured at 390px: 20 x 30 px, sitting INSIDE the parent's link, so a tap a
few pixels off opened the page instead of the menu. Apple's minimum is 44pt,
Google's 48dp, WCAG 2.5.5 asks for 44px. This makes it 48 x 48 - the full
height of the row - pinned to the right edge, with the label kept clear of
it so the two targets never overlap.
Safe because the theme handles the tap on the chevron element itself
(preventDefault, then toggles): a tap anywhere in the bigger box expands the
menu and never follows the link.
Centred with a negative margin, not translateY - `transform` is already the
rotation above, and a square box rotates in place.
============================================================ */
/* Outranks the theme's `.bb-template-v2 .bb-mobile-panel-inner .side-panel-menu
.menu-item > a { padding: 12px 0 12px 15px }`, which zeroed this and left a
long label free to run under the chevron. */
.bb-template-v2 .bb-mobile-panel-wrapper .bb-mobile-panel-inner .side-panel-menu .menu-item-has-children > a {
padding-right: 52px;
}
.bb-mobile-panel-wrapper .menu-item-has-children > a > .bs-submenu-toggle {
position: absolute;
top: 50%;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: -24px 0 0;
border-radius: 50%;
font-size: 20px;
line-height: 1;
-webkit-tap-highlight-color: transparent;
}
/* Something to see under a thumb: the tap registered. */
.bb-mobile-panel-wrapper .menu-item-has-children > a > .bs-submenu-toggle:active {
background: rgba(0, 0, 0, 0.08);
}
/* ============================================================
THE EMPTY NOTICE BOX GOES WITH THE SENTENCE - 2026-09-09
Emptying "You cannot create new discussions." leaves the theme's info panel
behind it: an icon, a border and nothing to read. `:has()` removes the box
only when the paragraph inside it is empty, so the OTHER message that uses
this wrapper - "this forum is closed to new discussions" - still appears if
it is ever true.
============================================================ */
.bbp-no-topic:has(.bp-feedback p:empty) {
display: none !important;
}
/*
* The remove button on an attachment, made visible.
*
* Jeremy, 2026-09-09: "I can't see a way to edit that post and delete the
* attached video file."
*
* There has always been one. BuddyBoss draws an x in the corner of the
* thumbnail - in black, with no backing, over whatever the first frame of the
* video happens to be. His was a Zoom recording, so the control was black on
* black and did not exist as far as anyone could tell. The same is true of any
* dark photo.
*
* A white glyph on a dark disc reads on both a bright thumbnail and a dark
* one, which is the only thing a control in that position can rely on.
*/
/*
* `!important`, and not for want of trying a cleaner selector first. BuddyBoss
* paints this control through chains like
* `.dropzone.video-dropzone div.dz-preview.dz-file-preview .dz-remove::after`
* - four classes deep and repeated for every combination of dropzone and
* state. Matching that here would mean copying the whole set and re-copying it
* after each plugin update; overriding two properties outright does not.
*/
/*
* Nothing here changes what the control DOES. No display mode, no position, no
* hit area - only its colours, its size and where the glyph sits inside it.
* The first version made it a flex container, which is a layout change on
* somebody else's component and not what was asked for.
*
* The glyph is centred with line-height rather than flex for the same reason:
* it is the smallest thing that works on an icon font whose own box is taller
* than the character.
*/
/*
* 2026-09-11, Jeremy on a video in the reply box: "almost impossible to see
* delete X on attachement with dark grey X on dark grey background". The
* white X below never showed on a video: BuddyBoss draws that preview's X at
* 40% opacity (`.dropzone.video-dropzone … .dz-remove::after`), so white read
* as grey on the dark disc. Full opacity, and a slightly larger disc and X -
* it is the one control on the preview, and on a phone it is a thumb target.
*/
.dz-preview a.dz-remove {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border-radius: 50% !important;
background: rgba( 0, 0, 0, .65 ) !important;
box-shadow: 0 0 0 1px rgba( 255, 255, 255, .35 );
text-align: center !important;
text-indent: 0 !important;
}
/*
* Centred by position, not by line-height. An icon font's box is taller than
* its character and carries its own side bearings, so text-align and
* line-height left the x low and to the left of the circle. Pinning the glyph
* to the middle and pulling it back by half its own size is the one method
* that does not depend on the font's metrics - and it changes nothing about
* the control itself, which stays exactly the box BuddyBoss made it.
*/
.dz-preview a.dz-remove::after {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
font-size: 16px !important;
line-height: 1 !important;
opacity: 1 !important;
}
.dz-preview a.dz-remove:hover {
background: rgba( 0, 0, 0, .85 ) !important;
}
/*
* The full-screen photo/video/file view: the picture, and nothing else - at
* every screen size.
*
* Jeremy, 2026-09-11, on a phone: "the whole mostly-white-space sidebar-bottom
* bar is actually totally useless and so this shouldn't display at all, rather
* clicking on an attachment should serve only to open a dialog where it is
* larger". Then 2026-09-14, on a laptop, where it was still a white sidebar
* beside the picture: "when full screen in all viewports i want to see just
* the media larger and nothing else".
*
* The menu inside that panel goes with it. Download and Delete are on the
* attachment itself, in the post.
*
* The min-height reset stays underneath: the panel is still built, and this
* is what stops it reserving 90vh before it is hidden.
*/
.bb-media-model-wrapper .bb-media-info-section {
display: none !important;
}
.bb-media-model-wrapper .bb-media-info-section .activity-list .activity-item {
min-height: 0 !important;
}
.bb-media-model-wrapper .bb-media-section {
width: 100% !important;
max-width: 100% !important;
}
.bb-media-model-wrapper .bb-media-model-inner {
height: 100% !important;
}
/*
* The full-screen view on a phone: a close button a thumb can hit, and a file
* shown big and in the middle of the screen.
*
* Jeremy, 2026-09-14, on an iPhone, with a PDF open: "the X close button in
* top corner is so tiny and close to corner that very difficult to tap on
* mobile", "why is image so small, like can it be bigger?", and the box "should
* be aligned vertically center, not only on top half of screen".
*
* Measured at 390px: the close button was 14x17px, 10px from the corner; the
* file's box kept 30px each side for arrows, sat at the top of the screen
* (BuddyBoss sizes it to half the height), and its picture was 282px wide with
* 20px of padding. Its title is absolutely positioned at the top of the
* screen, so once the box moves it has to join the box.
*
* Close: 44px round target, clear of the corner and the notch, on every kind of
* full-screen view. The file view: 12px margins, the box vertically centred,
* title inside it, picture full width up to the screen's height. The arrows
* (only there when a post has several files) sit over the picture's edges.
*/
@media (max-width: 767px) {
.bb-media-model-wrapper .bb-close-model {
top: max(12px, env(safe-area-inset-top)) !important;
right: 12px !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.6) !important;
z-index: 20 !important;
}
.bb-media-model-wrapper .bb-close-model svg {
width: 18px !important;
height: 18px !important;
}
.bb-media-model-wrapper.document .bb-media-model-container {
margin: 0 12px !important;
width: auto !important;
max-width: none !important;
}
.bb-media-model-wrapper.document .bb-media-model-inner {
top: 0 !important;
height: 100% !important;
display: flex !important;
flex-direction: column;
justify-content: center;
}
.bb-media-model-wrapper.document .bb-media-section.bb-document-section {
flex: 0 0 auto !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
}
.bb-media-model-wrapper.document .document-preview {
width: 100%;
}
.bb-media-model-wrapper.document .document-preview h3 {
position: static !important;
width: auto !important;
}
.bb-media-model-wrapper.document .img-section {
max-height: none !important;
}
.bb-media-model-wrapper.document .img-block-wrap {
height: auto !important;
}
.bb-media-model-wrapper.document .img-section img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: calc(100vh - 150px) !important;
padding: 8px !important;
box-sizing: border-box;
object-fit: contain;
}
.bb-media-model-wrapper.document .theater-command {
z-index: 10;
}
.bb-media-model-wrapper.document .theater-command svg {
padding: 8px 10px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
box-sizing: content-box;
}
}
/*
* On a phone the picture's column also has to be told to fill the height.
* NOT on wider screens: there the same two lines left the full-screen video
* player 0px tall (measured, 2026-09-14) - the column is already a full-height
* flex item beside where the panel was.
*
* And NOT for videos on a phone either. Jeremy, 2026-09-14, on an iPhone: full
* screen video "play sound but video is just black rectangle". The column's
* height:100% makes the player's own height:100% resolve against nothing, so
* the player was 0px tall inside BuddyBoss's 50vh black frame (measured at
* 390px: frame 422px, player 0px; without this rule, player 422px). It had been
* that way since this rule arrived on 2026-09-11, live included.
*
* A video's frame instead takes the screen's height, less room for the close
* button and the player's controls - the same size a file gets. Its bars are
* black: an old rule from before 2026-08-19 paints theatre video white, which
* in a tall frame round a wide video reads as a broken page.
*/
@media (max-width: 767px) {
.bb-media-model-wrapper.video .bb-media-section video {
background-color: #000 !important;
}
.bb-media-model-wrapper:not(.video) .bb-media-section {
height: 100% !important;
flex: 1 1 auto !important;
}
.bb-media-model-wrapper.video .bb-media-section figure {
min-height: calc(100vh - 150px) !important;
max-height: calc(100vh - 150px) !important;
}
@supports (height: 100svh) {
.bb-media-model-wrapper.video .bb-media-section figure {
min-height: calc(100svh - 150px) !important;
max-height: calc(100svh - 150px) !important;
}
}
}
/*
* The phone menu's header: your picture and name, which open your profile -
* and not "My Account" under them.
*
* Jeremy, 2026-09-11: the side menu and the profile dropdown repeat
* themselves - "My Account" and "Account" and "Settings". "My Account" was a
* second link to Settings, which is already in the list below it. It is
* printed by the BuddyBoss theme's own header template with no option to turn
* it off, and copying that whole template into the child theme to remove one
* line would leave a stale copy behind after every theme update - so this is
* the one line hidden. The name keeps its link to the profile.
*/
.bb-mobile-panel-header .my-account-link {
display: none !important;
}
/*
* A link in a post stays readable when you point at it.
*
* Jeremy, 2026-09-09: hovering the Vimeo link in his own post turned it white
* and it vanished.
*
* WHY IT IS WHITE. Elementor's kit sets one hover colour for every link on the
* site - `--e-global-color-76a41b5`, which is #FFFFFF. That is right for the
* header, where the menu sits on black. Everywhere else it is white on white.
*
* The site's own `a:hover` rule was already trying to say otherwise and losing:
* `.elementor-kit-296 a:hover` carries a class the bare selector does not.
*
* SCOPED TO PROSE, deliberately. An id in the selector outranks the kit
* without `!important`, but the same weight would also stamp on buttons that
* legitimately turn their text white - so this reaches only the places a
* member reads sentences: forum posts and activity.
*/
#bbpress-forums .bbp-reply-content a:hover,
#bbpress-forums .bbp-reply-content a:focus,
#bbpress-forums .bbp-topic-content a:hover,
#bbpress-forums .bbp-topic-content a:focus,
#content .bb-activity-content a:hover,
#content .bb-activity-content a:focus,
#content .activity-inner a:hover,
#content .activity-inner a:focus {
color: #2F8F3F;
text-decoration: underline;
}
/* ============================================================
ONE ATTACH BUTTON - THE UPLOADERS BEHIND IT - 2026-09-10
Jeremy: "if I attach a specific file type, like, for example a mp3, to the
left of that attached file appears a add files or drag and drop icon that's
clickable. which I don't want to display for any file type that's uploaded."
He is right, and the reason is bigger than tidiness. That tile is one
uploader's own "add more" - press it and you get another file of THAT kind.
The whole point of the single paperclip is that a member attaches a video
and then sheet music without thinking about which of BuddyBoss's three
systems either belongs to, and a per-type "add more" teaches the opposite.
The paperclip is the only way in, and it takes anything.
An OPEN BUT EMPTY uploader is hidden for the same reason: with the tile
gone it is an empty bordered box, and after the mixed-attachment fix all
three can be open at once. */
#whats-new-attachments .dz-default,
#whats-new-attachments .dz-message {
display: none !important;
}
#whats-new-attachments .dropzone:not(:has(.dz-preview)) {
display: none !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* =========================================================================
NO WORD IS EVER BROKEN WITH A HYPHEN. Jeremy, 2026-09-11, looking at
"Daily Keys: Sep- / tember 2026" on a phone: "no where siteside should
words ever be wrapped in middle of word ... a word should always be kept
on a single line unless Absolutely necessary".
The parent theme switches on `hyphens: auto` in its own bbpress.css,
buddypress.css and lifterlms.css. That is its code, replaced on every theme
update, so it is switched off here, everywhere, once - rather than chased
selector by selector. A word too long for its line even on its own (a
pasted web address) still breaks, because the theme's overflow-wrap is left
alone - but without a hyphen, and only then.
========================================================================= */
*,
*::before,
*::after {
-webkit-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
/*
* Who liked this: "Liked by David and Martin", beside the thumb
* (includes/like-names.php).
*
* WP ULike stacks its likers box under the thumb as a block, and draws the
* list inside it as a flex row - which throws away the spaces between words,
* so the sentence read "Liked byDavid BowerandMartin" until the list was made
* a plain block. The thumb and the sentence share one line while it fits and
* the sentence drops beneath when it does not (a long one on a phone).
* `:has()` so only a box holding our sentence is touched.
*/
.wpulike:has(.ap-likers) {
display: inline-flex !important;
align-items: center;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 4px;
max-width: 100%;
}
.wpulike .wp_ulike_likers_wrapper:has(.ap-likers) {
display: block !important;
flex: 0 1 auto !important;
width: auto !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
.wp-ulike-likers-list.ap-likers {
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-size: 13px;
line-height: 1.4;
color: #8a8d93;
white-space: normal;
}
.wp-ulike-likers-list.ap-likers a,
.wp-ulike-likers-list.ap-likers .ap-likers__you {
color: #122b46;
font-weight: 500;
}
.wp-ulike-likers-list.ap-likers a:hover {
text-decoration: underline;
}
/*
* A video keeps its own shape (includes/forum-video-shape.php).
*
* The player is built as a box of height zero with 56.25% of padding on top -
* the old way of holding a 16:9 space. The two numbers on the box are the
* video's real width and height, so the padding goes and the box is simply
* told its ratio.
*/
.bb-activity-video-elem.ap-vid-shaped .video-js {
height: auto !important;
padding-top: 0 !important;
aspect-ratio: var(--ap-vid-w) / var(--ap-vid-h);
}
/*
* An upright video is as tall as most of the screen and no taller. Across the
* full width of a discussion a phone video would be over a thousand pixels
* tall, and the next post would be a scroll away.
*/
.bb-activity-video-elem.ap-vid-shaped.bb-vertical-layout .video-js {
/* !important because BuddyBoss sets this player's width from two ids
deep, which wins on specificity however long this selector gets. */
width: min(100%, calc(70vh * var(--ap-vid-w) / var(--ap-vid-h))) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/*
* Every player button fits, however narrow the player.
*
* Jeremy, 2026-09-14: "in vertical videos the full screen button is cutoff".
* On a laptop the row holds play, back 5s, forward 5s, volume, the time, the
* progress line, picture-in-picture and full screen - 349px of buttons before
* the progress line gets any room - and an upright video there is 327px wide,
* so full screen, the last button, was pushed out and clipped.
*
* Phones never had the problem: at 768px and below BuddyBoss already strips
* the row to play, the progress line and full screen. So this is for wider
* screens only, and measured against the PLAYER's width (a container query),
* because an upright video on a wide screen is as narrow as a phone:
* - under 440px the progress line gets a row of its own above the buttons,
* running the full width (measured: everything then fits in 327px);
* - under 320px volume goes, under 280px picture-in-picture too - no video
* on a laptop is that narrow today, this is the margin.
* Play, skip, the time and full screen stay at every size.
*/
.video-js {
container-type: inline-size;
}
@media (min-width: 769px) {
@container (max-width: 439px) {
.video-js .vjs-control-bar .vjs-progress-control {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 100% !important;
width: auto !important;
min-width: 0 !important;
height: 18px !important;
}
/* The last buttons sit at the right-hand edge. */
.video-js .vjs-control-bar .vjs-picture-in-picture-control {
margin-left: auto !important;
}
}
@container (max-width: 319px) {
.video-js .vjs-control-bar .vjs-volume-panel {
display: none !important;
}
}
@container (max-width: 279px) {
.video-js .vjs-control-bar .vjs-picture-in-picture-control {
display: none !important;
}
.video-js .vjs-control-bar .enlarge_button {
margin-left: auto !important;
}
}
}
/*
* A three-dot menu holding one thing is drawn as that thing
* (assets/js/ap-single-action.js).
*
* The button keeps its place, its size and its hover; only the character
* inside it changes, and the character is read off the item itself and passed
* in as --ap-single-glyph.
*/
.ap-single-action i::before {
content: var(--ap-single-glyph) !important;
}
.ap-single-action__menu {
display: none !important;
}
/*
* Notification Settings: "You follow 3 discussions" under the replies switch,
* opening BuddyBoss's list of them (includes/notification-help.php).
* The line is a quiet link-style button in the brand green; the list keeps
* BuddyBoss's own item styling, minus the accordion head it no longer needs.
*/
.ap-follows-row > td {
display: block !important;
width: 100% !important;
padding-top: 0 !important;
border: 0 !important;
}
/* BuddyBoss's script gives every row a phone dropdown ("All"/"Email"/"None")
built from its checkboxes; this row has none, so it has no dropdown. */
.ap-follows-row .bb-mobile-setting {
display: none !important;
}
#buddypress .ap-follows-toggle {
display: inline-flex !important;
width: auto !important;
align-items: center;
gap: 6px;
margin: 0;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
color: var(--bb-primary-color, #50c450) !important;
font-family: inherit !important;
font-size: 14px !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-transform: none !important;
cursor: pointer;
}
#buddypress .ap-follows-toggle[hidden],
.ap-follows-none[hidden],
.ap-follows-list[hidden] {
display: none !important;
}
.ap-follows-toggle i {
font-size: 16px;
transition: transform 0.15s ease;
}
.ap-follows-toggle.is-open i {
transform: rotate(180deg);
}
.ap-follows-none {
margin: 0;
font-size: 14px;
color: var(--bb-alternate-text-color, #696a6d);
}
.ap-follows-list {
margin-top: 12px;
}
.ap-follows-list .bb-accordion {
margin: 0 !important;
border: 0 !important;
}
.ap-follows-list .bb-accordion_panel {
display: block !important;
padding: 0 !important;
border: 0 !important;
}
/*
* No "Notify me of new replies" box in the composer: posting follows the
* discussion, and follows are managed in Notification Settings
* (includes/forum-notify-default.php). Hidden, not removed, so an edit still
* sends the value it was drawn with.
*/
.bbp-reply-form .bb_subscriptions_active,
.bbp-topic-form .bb_subscriptions_active,
#new-post .bb_subscriptions_active,
.bbp-topic-form .bbp_topic_subscription_wrapper {
display: none !important;
}
/*
* Post sits on the row of composer icons, at its right-hand end.
*
* Jeremy, 2026-09-14, once the notify box had gone: Post "feels way off in the
* corner" - it had a row of its own under the icons - "just move post button
* up to be in same row as formatting, but i still want aligned right as is
* now".
*
* The icons (#whats-new-toolbar) and Post's row (.bb-form-select-fields) are
* siblings in one box, with the attachment preview, the voice-memo panel and
* the poll panel slotting in around them. That box becomes a two-column grid:
* everything spans both columns, except the icons (left) and Post (right).
* Post's row is `display: contents`, so Post and "Allow downloads" become
* items of the grid themselves; `dense` packing drops Post into the empty
* right-hand cell beside the icons wherever the other pieces land, and
* "Allow downloads" (when a file is attached) takes its own line underneath.
* Post keeps the 25px right inset its row had, so its right edge is where it
* was (measured, 644px in a 644px-wide form, before and after).
*
* The new-discussion box gets the same (Jeremy, 2026-09-15: it "should match
* all other composers"). The EDIT PAGES do not: there the editor has its own
* border and Cancel sits beside Post, and pulling them onto the icon row cut
* the border short beside the buttons (his screenshot of /reply/63728/edit/).
*/
body:not(.reply-edit):not(.topic-edit) :is(.bbp-reply-form, .bbp-topic-form) fieldset.bbp-form > div:has(> #whats-new-toolbar) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
grid-auto-flow: row dense;
align-items: center;
}
body:not(.reply-edit):not(.topic-edit) :is(.bbp-reply-form, .bbp-topic-form) fieldset.bbp-form > div:has(> #whats-new-toolbar) > * {
grid-column: 1 / -1;
}
body:not(.reply-edit):not(.topic-edit) :is(.bbp-reply-form, .bbp-topic-form) fieldset.bbp-form > div:has(> #whats-new-toolbar) > #whats-new-toolbar {
grid-column: 1;
/* Post's column brings its own space. */
padding-right: 0 !important;
}
body:not(.reply-edit):not(.topic-edit) :is(.bbp-reply-form, .bbp-topic-form) fieldset.bbp-form > div:has(> #whats-new-toolbar) > .bb-form-select-fields {
display: contents !important;
}
/* Anything else in Post's row - the forum picker and an administrator's
"Type" on a new discussion - takes a full line of its own under the icons. */
body:not(.reply-edit):not(.topic-edit) :is(.bbp-reply-form, .bbp-topic-form) fieldset.bbp-form > div:has(> #whats-new-toolbar) > .bb-form-select-fields > * {
grid-column: 1 / -1;
}
body:not(.reply-edit):not(.topic-edit) :is(.bbp-reply-form, .bbp-topic-form) fieldset.bbp-form > div:has(> #whats-new-toolbar) > .bb-form-select-fields > .bbp-submit-wrapper {
grid-column: 2 !important;
grid-row: auto !important;
display: flex !important;
align-items: center;
gap: 10px;
margin: 0 !important;
padding: 0 25px 0 0 !important;
}
/*
* With a saved draft, "Discard Draft" sits beside Post, 10px apart rather than
* Post's own 20px margin. On a phone that is what leaves the icons the 151px
* they need: at 390px the icons had 149 and Discard Draft overlapped the emoji
* by 3px (measured).
*/
body:not(.reply-edit):not(.topic-edit) :is(.bbp-reply-form, .bbp-topic-form) fieldset.bbp-form > div:has(> #whats-new-toolbar) > .bb-form-select-fields > .bbp-submit-wrapper > * {
margin: 0 !important;
}
body:not(.reply-edit):not(.topic-edit) :is(.bbp-reply-form, .bbp-topic-form) fieldset.bbp-form > div:has(> #whats-new-toolbar) > .bb-form-select-fields > .ap-allow-download {
grid-column: 1 / -1 !important;
grid-row: auto !important;
padding: 0 25px 15px;
}
/*
* No Discard Draft button in the forum composers.
*
* Jeremy, 2026-09-15, after it had become a trash icon: "do we really even
* need this? becuase when i close reply dialog and then reopen it the text is
* saved in there anyway". A draft is only what is left in the box, and
* deleting the words empties it; the button was a second way to do that.
*/
#bbpress-forums .bb_discard_topic_reply_draft {
display: none !important;
}
/* The reply box while it swaps words (assets/js/forum-composer.js): hidden
for the moment BuddyBoss still has the other box's words in it. */
.bbp-reply-form.ap-swapping .bbp-the-content-wrapper {
visibility: hidden;
}
/* ---------------------------------------------------------------------------
* The free week, on the Journey page (includes/trial-countdown.php).
*
* It sits INSIDE the green banner, under Last Activity. Above the map it was
* grey text on a green painting - measured and looked at, unreadable. Not a
* bar and not a box: the panel that sat here was removed on purpose
* (2026-09-01).
* ------------------------------------------------------------------------ */
.journey-banner .ap-trial-line {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.92);
}
.journey-banner .ap-trial-line a {
color: #fff;
text-decoration: underline;
white-space: nowrap;
}
.journey-banner .ap-trial-line a:hover {
text-decoration: none;
}
@media (max-width: 767px) {
.journey-banner .ap-trial-line {
font-size: 13px;
}
}
/* ---------------------------------------------------------------------------
* A word at the bottom of the screen - "Preparing your video…", "3 files
* could not be attached", "Jeremy sent you a message".
*
* IT HAS TO CLEAR THE BOTTOM BAR. Jeremy, 2026-09-12: the message "overlaps
* with black mobile bottom nav and so is hard to see and user can easily think
* nothing is happening". `html.ap-header-overflowed` is the phone layout,
* where that bar is fixed to the bottom (includes/mobile-nav.php).
*
* SITE-WIDE ON PURPOSE. It lived in one-attachment.css, which only loads on a
* page with a composer - so the welcome toast drew on the home page as
* unstyled text with no position at all (seen, 2026-09-15).
* ------------------------------------------------------------------------ */
.ap-toast {
position: fixed;
left: 50%;
bottom: var(--ap-toast-bottom, 24px);
z-index: 100000;
max-width: 90vw;
padding: 10px 18px;
transform: translateX(-50%);
border-radius: 100px;
background: rgba(0, 0, 0, 0.85);
color: #fff;
font-size: 14px;
line-height: 1.3;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
/* A hairline, so the strip still has an edge when what is behind it is black. */
.ap-toast {
border: 1px solid rgba(255, 255, 255, 0.18);
}
/* ---------------------------------------------------------------------------
* Live toasts (includes/toasts.php, assets/js/ap-toast.js).
*
* The site's own strip, but these can be tapped: one of them is how a new
* member finds the messages screen for the first time. `.ap-toast` itself is
* pointer-events: none for the uploader's sake, so this must take them back.
*
* EVERY COLOUR HERE IS STATED TWICE OVER. Seen on test first time out: the
* words came out green and the close button was a green slab with a shadow,
* because the theme colours every `a` inside content and draws every `button`
* that way (CLAUDE.md 4.1, caught for the eighth time). Hence `!important` on
* colour, background, box-shadow, font and size.
* ------------------------------------------------------------------------ */
:root {
--ap-toast-bottom: 24px;
}
/*
* ABOVE THE PHONE'S BOTTOM BAR, NEVER ON IT. Jeremy, 2026-09-15: "black toast
* over black mobile bar is not good" - and Material's own guidance is that a
* snackbar sits directly above a persistent bottom bar rather than in front of
* it (m3.material.io/components/snackbar/guidelines). The bar appears in TWO
* ways (includes/mobile-nav.php): `ap-header-overflowed` at any width, and
* `ap-has-mobnav` under 799px. Both have to raise it, or it lands on the bar.
*/
html.ap-header-overflowed {
--ap-toast-bottom: calc(3.5rem + 1rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 799px) {
html.ap-has-mobnav {
--ap-toast-bottom: calc(3.5rem + 1rem + env(safe-area-inset-bottom, 0px));
}
}
.ap-toast.ap-live-toast {
display: flex;
align-items: center;
gap: 14px;
width: max-content;
max-width: min(90vw, 420px);
padding: 10px 14px 10px 18px;
pointer-events: auto;
text-align: left;
/*
* RISE WITH A SETTLE - Jeremy's choice of the four, 2026-09-15, then
* "it's too fast and doesnt feel smooth".
*
* WHY IT FELT ABRUPT: the fade finished in 0.18s while the movement took
* 0.34s, so it appeared first and slid afterwards - two events instead of
* one - and the settle sprang rather than eased. Now both run for about
* half a second on a long deceleration curve, so it arrives as one gesture
* and comes to rest rather than stopping. Leaving is slower than it was
* too: nothing snaps away mid-read.
*/
opacity: 0;
transform: translate(-50%, 26px) scale(0.97);
transition:
opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}
.ap-toast.ap-live-toast.is-in {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
.ap-toast.ap-live-toast.is-out {
opacity: 0;
transform: translate(-50%, 14px) scale(0.99);
transition:
opacity 0.42s cubic-bezier(0.4, 0, 0.6, 1),
transform 0.42s cubic-bezier(0.4, 0, 0.6, 1);
}
/* Somebody who has asked their device for less movement gets the fade only. */
@media (prefers-reduced-motion: reduce) {
.ap-toast.ap-live-toast,
.ap-toast.ap-live-toast.is-in,
.ap-toast.ap-live-toast.is-out {
transform: translate(-50%, 0) scale(1);
transition: opacity 0.3s ease;
}
}
.ap-toast.ap-live-toast .ap-live-toast__icon {
display: flex;
flex: 0 0 auto;
align-items: center;
}
.ap-toast.ap-live-toast .ap-live-toast__icon svg,
.ap-toast.ap-live-toast .ap-live-toast__icon img {
width: 18px;
height: auto;
}
.ap-toast.ap-live-toast .ap-live-toast__words {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ap-toast.ap-live-toast .ap-live-toast__title {
font-weight: 700;
}
/* The explanation under a number. Quieter, because it is only needed once. */
.ap-toast.ap-live-toast .ap-live-toast__sub {
font-size: 13px;
font-weight: 500;
opacity: 0.78;
}
.ap-toast.ap-live-toast .ap-live-toast__link {
display: flex;
align-items: center;
gap: 10px;
color: #fff !important;
text-decoration: none !important;
}
.ap-toast.ap-live-toast .ap-live-toast__words {
color: #fff !important;
}
.ap-toast.ap-live-toast .ap-live-toast__read {
color: #8fd694 !important;
font-weight: 600;
text-decoration: underline !important;
white-space: nowrap;
}
.ap-toast.ap-live-toast .ap-live-toast__link:hover .ap-live-toast__read {
text-decoration: none !important;
}
.ap-toast.ap-live-toast .ap-live-toast__close {
flex: 0 0 auto;
width: auto !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 2px !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.7) !important;
font-family: inherit !important;
font-size: 20px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1 !important;
text-transform: none !important;
cursor: pointer;
}
.ap-toast.ap-live-toast .ap-live-toast__close:hover {
background: none !important;
color: #fff !important;
}
/* ---------------------------------------------------------------------------
LOGIN, IN THE PHONE'S TOP BAR - see includes/mobile-login.php.
The desktop header has carried Login and Join Now in its corner all along;
the phone header carried a hamburger, the logo and a cart, so a member with
an account had no way to say so (Jeremy, 2026-09-17).
Shaped like the header's own outline button rather than the theme's
`.signin-button`, whose styling only exists inside the desktop header.
-------------------------------------------------------------------------- */
.bb-mobile-header .header-aside a.ap-mobile-login {
display: inline-flex;
align-items: center;
/*
* The aside is a stretching flex row and something above us gives its
* links the full height of the bar, which turned the pill into an oval.
* Both are answered here rather than fought with !important - naming the
* anchor inside the aside is enough to win.
*/
align-self: center;
flex: 0 0 auto;
height: auto;
/*
* LAST IN THE ROW, which is where it sits on a desktop: there the order is
* cart, then Login. Done with `order` so the markup can stay where the
* template hook puts it.
*/
order: 2;
margin: 0 0 0 4px;
/*
* A 44px target, which is the floor for something meant to be tapped with
* a thumb - at 13px text and tight padding it came out 31px tall, which is
* a miss for anyone hurrying.
*/
min-height: 44px;
padding: 0 16px;
border: 1px solid currentColor;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
}
.bb-mobile-header .header-aside > * {
order: 1;
}
.bb-mobile-header .header-aside a.ap-mobile-login:hover,
.bb-mobile-header .header-aside a.ap-mobile-login:focus {
color: var(--bb-primary-color, #3F8F30);
}
/* ---------------------------------------------------------------------------
SEARCHING INSIDE ONE DISCUSSION - see includes/forum-search.php.
Jeremy, 2026-09-17: a box that "looks through all posts in that discussion"
and highlights the words typed. The field sits at the head of the thread; the
results take the thread's place until they are cleared, because a list of
matches beside the thread they came from is the same content twice.
-------------------------------------------------------------------------- */
.ap-tsearch {
display: flex;
align-items: center;
gap: 8px;
/* A field, not a banner - Jeremy, 2026-09-17: "search bar way too long in
bigger viewports". On a wide screen the content column is nearly 1200px
and a search box that wide reads as a page element rather than something
to type in. It stays full width on a phone, where it is the whole
column anyway. */
max-width: 620px;
margin: 0 0 18px;
padding: 0 14px;
border: 1px solid var(--bb-content-border-color, #E7E9EC);
border-radius: 100px;
background: var(--bb-content-background-color, #fff);
}
.ap-tsearch:focus-within {
border-color: var(--bb-primary-color, #3F8F30);
}
.ap-tsearch__icon {
display: flex;
color: #9A9EA5;
flex: 0 0 auto;
}
.ap-tsearch__input {
flex: 1 1 auto;
min-width: 0;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 12px 0 !important;
font-size: 15px;
min-height: 44px;
}
.ap-tsearch__input:focus {
outline: none;
box-shadow: none !important;
}
.ap-tsearch__input::-webkit-search-cancel-button {
display: none;
}
/* An ×, not a word - Jeremy, 2026-09-17. The theme styles every button as a
primary action, so this has to say no to all of it. 44px of tappable area
around a small mark. */
.ap-tsearch button.ap-tsearch__clear {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
width: 44px !important;
min-width: 44px;
height: 44px;
min-height: 44px;
font-size: 22px !important;
font-weight: 400;
line-height: 1;
text-transform: none;
color: #767B85 !important;
cursor: pointer;
}
.ap-tsearch button.ap-tsearch__clear:hover,
.ap-tsearch button.ap-tsearch__clear:focus {
color: var(--bb-primary-color, #3F8F30) !important;
}
.ap-tsearch-results {
margin: 0 0 24px;
}
.ap-tsearch-results__head {
margin: 0 0 10px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #767B85;
}
.ap-tsearch-results__list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--bb-content-border-color, #E7E9EC);
}
.ap-tsearch__hit {
margin: 0;
border-bottom: 1px solid var(--bb-content-border-color, #E7E9EC);
}
.ap-tsearch__link {
display: block;
padding: 14px 4px;
text-decoration: none;
color: inherit;
}
.ap-tsearch__link:hover,
.ap-tsearch__link:focus {
background: rgba(0, 0, 0, 0.02);
}
.ap-tsearch__who {
font-weight: 600;
font-size: 14px;
margin-right: 8px;
}
.ap-tsearch__when {
font-size: 12px;
color: #767B85;
}
/* Where a match was, when it was not in the words: an attachment's name, a
link, a poll's question. */
.ap-tsearch__extra {
display: inline-block;
margin: 6px 6px 0 0;
padding: 3px 9px;
border: 1px solid var(--bb-content-border-color, #E7E9EC);
border-radius: 100px;
font-size: 12px;
color: #4D5259;
max-width: 100%;
overflow-wrap: anywhere;
}
.ap-tsearch__text {
display: block;
margin-top: 5px;
font-size: 14px;
line-height: 1.55;
color: #4D5259;
}
.ap-tsearch__text mark {
background: rgba(80, 196, 80, 0.26);
color: inherit;
border-radius: 2px;
padding: 0 1px;
}
/* The discussion - or, on a forum page, its list of discussions - while
results are up. */
#bbpress-forums.ap-tsearch-hidden,
#bbpress-forums .ap-tsearch-hidden {
display: none !important;
}
/* The × only once there is something to clear. Its own display rule above
outranks the browser's [hidden], so the field showed an × while empty. */
.ap-tsearch button.ap-tsearch__clear[hidden] {
display: none !important;
}
/* Searching a whole forum: which discussion the result is in, above it. */
.ap-tsearch__where {
display: block;
margin-bottom: 4px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--bb-primary-color, #3F8F30);
}
.ap-tsearch__where mark {
background: rgba(80, 196, 80, 0.26);
color: inherit;
border-radius: 2px;
padding: 0 1px;
}
/* Which reply was meant, for a moment after a result is clicked. */
.ap-tsearch-found {
animation: ap-tsearch-found 2.6s ease-out 1;
border-radius: 6px;
}
@keyframes ap-tsearch-found {
0%, 55% { background-color: rgba(80, 196, 80, 0.16); }
100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.ap-tsearch-found { animation: none; background-color: rgba(80, 196, 80, 0.12); }
}
/* ---------------------------------------------------------------------------
"THAT LOOKS LIKE AN EMAIL ADDRESS" - see includes/member-names.php.
A note under a name field at signup, and nothing more: Jeremy, 2026-09-17,
"i dont want risk checkout blocking email typed into first name, so maybe
just show a warning if so". Amber rather than red - nothing is wrong yet,
and nobody is being stopped.
-------------------------------------------------------------------------- */
.ap-name-hint {
margin: 6px 0 0;
font-size: 13px;
line-height: 1.45;
color: var(--bb-primary-color, #3F8F30);
}
/* ---------------------------------------------------------------------------
THE CART AND CHECKOUT, TIDIED - see includes/cart-tidy.php.
-------------------------------------------------------------------------- */
/* Subtotal, only when something sits between it and the total. The class is
added server-side when nothing does. */
body.ap-cart-flat .cart_totals tr.cart-subtotal,
body.ap-cart-flat tr.cart-subtotal {
display: none !important;
}
/* The remove cross, centred in the circle it gets on hover. It was drawn as a
block with a line-height shorter than its own type, so the glyph sat high
and left of centre (Jeremy, 2026-09-17). */
.woocommerce-cart .product-remove a.remove,
.woocommerce-cart td.product-remove a.remove {
display: flex !important;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
font-size: 20px;
line-height: 1;
text-align: center;
}
/* No removing things on the checkout. That is a cart decision, and the cart is
one link away - beside a card field it is a chance to lose the sale by
mis-tapping. */
.woocommerce-checkout .bs-product-remove,
.woocommerce-checkout .bs-product-check .remove {
display: none !important;
}
/* ---------------------------------------------------------------------------
THE CART, ABOVE PHONE WIDTH - Jeremy, 2026-09-17: "everything weirdly spaced
(too much space) in cart", and then "the layout fucks up around 899 x 828px".
Both are the same fault. The cart is a table with no width of its own, so it
fills whatever column it is in - 859px at his 899px window - and then hands
the slack to whichever cell asks loudest: the thumbnail cell was coming out
300px wide for a 64px picture, which is what pushed the title into the middle
of the row and the price against the far edge.
The first attempt fixed it only above 900px, which is precisely why 899
looked broken: the desktop rules stopped and the phone rules carried on at
near-desktop width. There is now ONE layout for everything above phone size -
a receipt 640px wide, centred, with every column given the width it actually
needs - and the phone layout, which he has approved, is left alone.
-------------------------------------------------------------------------- */
@media (min-width: 600px) {
.woocommerce-cart .woocommerce {
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding: 14px 16px !important;
}
.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item td.product-remove {
width: 36px;
padding-left: 0;
padding-right: 0;
}
.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item td.product-thumbnail {
width: 76px;
padding-left: 0;
}
.woocommerce-cart table.cart img {
width: 64px;
}
.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item td.product-name,
.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item th.product-name {
width: auto;
max-width: none !important;
text-align: left !important;
}
/*
* THE PRICE AT THE END OF THE ROW.
*
* Jeremy: "should not be blank white space to right of $5.00". The number
* on screen is not `product-price` at all - that cell is hidden, and what
* shows is `product-subtotal`, 181px wide with its text centred by an old
* rule. So the price sat in the middle of a wide cell with a gap after it.
* Both cells are named here because which one is visible is not this
* stylesheet's business.
*/
.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item td.product-price,
.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item td.product-subtotal {
width: 90px;
text-align: right !important;
padding-right: 0;
}
/*
* AND THE TOTAL BESIDE ITS NUMBER - "also move total closer to the $".
* The totals table was full width, so the word sat at one edge and the
* amount at the other. Shrunk to its contents and pushed to the right, the
* two read as one line.
*/
/* !important because two older rules in this same file give this table a
full width, and the point of the change is that it should not have one. */
.woocommerce-cart .cart-collaterals table.shop_table {
width: auto !important;
margin-left: auto !important;
margin-right: 0 !important;
}
.woocommerce-cart .cart-collaterals table.shop_table th {
text-align: right;
padding-right: 20px;
}
.woocommerce-cart .cart-collaterals table.shop_table td {
text-align: right;
padding-right: 0;
}
/* The rows underneath, brought in to the same edges. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals table.shop_table {
width: 100%;
}
.woocommerce-cart .coupon {
margin: 4px 0 0;
}
/* And the air between the rows, which was the other half of "too much
white space": a line of items, a coupon field and two numbers do not
need the vertical rhythm of a long page. */
.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item td,
.woocommerce-cart table.cart .woocommerce-cart-form__cart-item.cart_item th {
padding-top: 6px;
padding-bottom: 6px;
}
.woocommerce-cart .cart-collaterals table.shop_table th,
.woocommerce-cart .cart-collaterals table.shop_table td {
padding-top: 8px;
padding-bottom: 8px;
}
.woocommerce-cart .cart-collaterals {
margin-top: 10px;
}
.woocommerce-cart .wc-proceed-to-checkout {
padding-top: 6px;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
margin-bottom: 0;
}
}
/* ---------------------------------------------------------------------------
THE LINE THAT TELLS SOMEBODY WHAT THEY ARE BUYING - see
includes/checkout-trust.php (site review MON-3, 2026-09-20).
.ap-included-line went with "Free with your free week" on 2026-09-22; the
trial no longer opens the Library, so the line it styled is gone.
-------------------------------------------------------------------------- */
.ap-renewal-line {
margin: 10px 0 0;
font-size: 13px;
line-height: 1.5;
color: #4D5259;
}
/*
* Skip to content.
*
* Off screen until the Tab key reaches it, then it sits at the top left where
* a skip link is expected. See the note in header.php.
*/
.ap-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100000;
padding: 12px 20px;
background: #fff;
color: #1c1c1c;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 6px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.ap-skip-link:focus {
left: 0;
outline: 3px solid #1c1c1c;
outline-offset: 2px;
}
/* ---- THE MEMBERSHIP TABLE ---- 2026-09-21, all three from Jeremy.
1. THE BAND BEHIND EACH PLAN NAME WAS GREY ON TEST. Elementor paints it with
`--e-price-table-header-background-color`, and falls back to its own #555
when nothing sets it. Production's generated stylesheet sets it; test's
does not, so FOCUS, FREEDOM and MASTERY sat in grey boxes there.
Set here from his own palette rather than as a colour, so it follows the
kit's secondary colour wherever that goes and the two sites stop
disagreeing about it.
2. LIST ITEMS WRAPPED UNDER THEIR TICK. The row is `display:block`, so the
tick is just an inline character and a long line - "Chord Creator + Song
Seed Sandbox" - wrapped beneath it instead of beside it. A flex row with
the text in its own column keeps every line aligned to one left edge.
3. THE YEARLY SAVING NOW RIDES ON THE TAB. "Save over 20% with yearly plan!"
used to be a line of text floating above the tabs, describing a button
rather than being part of it. It is a pill on the Yearly tab itself now,
so the saving is where the choice is made. */
.elementor-widget-price-table {
--e-price-table-header-background-color: var( --e-global-color-secondary );
}
.elementor-price-table__feature-inner {
display: flex;
align-items: flex-start;
gap: 0.5em;
}
.elementor-price-table__feature-inner > i {
flex: 0 0 auto;
margin-top: 0.2em;
}
.elementor-price-table__feature-inner > span {
flex: 1 1 auto;
min-width: 0;
}
.e-n-tab-title-text {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
/*
* The saving used to sit in a pill beside "Yearly". Jeremy asked for plain
* words instead, so the tab now reads "Yearly (save 20%)" and there is nothing
* left to style. The rule above keeps that on one line.
*/
/*
* The notification settings page explained itself twice.
*
* Above the switches sat a legend - an envelope captioned "A notification sent
* to your inbox", a screen captioned "A notification in the bell at the top of
* the page", and a "Learn more". The two columns underneath are already headed
* Email and Bell, and the switches are the only thing on the page. Jeremy,
* 2026-09-21: take it out.
*
* Hidden rather than removed from the template: it is BuddyBoss's own markup,
* and a template override here would need re-checking after every update for a
* row of explanatory text.
*/
.bb-bp-settings-content .notification_info {
display: none;
}
/* ---------------------------------------------------------------------------
BLACK ON THE GREEN, ON THE JOIN PAGE ONLY - a trial, 2026-09-22.
Jeremy: "lets change to black on join page so i can see it then assess
whether i want to make the change sitewide."
WHAT IS WRONG WITH THE WHITE. Measured on the live page: white on the brand
green is 2.25 to 1. The standard asks 3 for large text and 4.5 for ordinary
text, so every one of these fails, and the plan names fail it at 40px. Near
black on the same green measures about 7.5.
The audience is the one this hits hardest: contrast sensitivity starts
falling between 40 and 50, separately from sharpness, and reading glasses do
not fix it. Across the top million home pages this is the single most common
accessibility fault, seven years running.
THE GREEN DOES NOT MOVE. It is the background in every rule below; only the
text on top of it changes. Brand colours are not mine to change - see
CLAUDE.md - and nothing here touches one.
WHAT THIS COVERS, AND WHAT IT DOES NOT. Five elements on this page are the
brand green with white on them: the three plan headers, the chosen tab, and
the Join Now button inside each plan. All five are here.
The bar across the top of every page and the Join Now button in the header
are the same fault, and they are deliberately LEFT ALONE - they appear on
every page, so changing them here would make the join page disagree with the
rest of the site while Jeremy is deciding. They are part of the sitewide
question, not the trial.
If the answer is yes, the fix is to drop `.page-id-57499` from these
selectors and add the two above. If it is no, delete the block.
-------------------------------------------------------------------------- */
.elementor-price-table__heading,
.elementor-price-table__subheading,
.elementor-price-table__button,
.e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
color: #17201A !important;
}
/*
* AND THE TAB THAT IS NOT CHOSEN. Jeremy, looking at the trial: "green on grey
* almost unreadable". He is right and it was worse than the one he asked about
* - the green on the pale grey measures 2.0, against 2.25 for the white on the
* green, where ordinary text at this size needs 4.5.
*
* It also has to match: with the chosen tab now near-black, leaving the other
* one green would read as two different kinds of thing rather than two sides of
* one switch.
*/
.e-n-tab-title[aria-selected="false"] .e-n-tab-title-text {
color: #17201A !important;
}
/* The button keeps its shape; only the word on it changes colour. */
.elementor-price-table__button:hover,
.elementor-price-table__button:focus {
color: #17201A !important;
}
/*
* AND THE REST OF THE SITE. Jeremy approved the join page on 2026-09-22 and
* then "yes roll black on green out to those three places", plus the sign-up
* button on the signed-out home page.
*
* Each selector below is one I measured rather than guessed: an element whose
* background computes to the brand green with white sitting on it. They are
* listed by component rather than by page, so a button that turns up somewhere
* new is already right.
*
* THE GREEN ITSELF IS UNTOUCHED, here and everywhere above.
*
* STILL WHITE ON GREEN, DELIBERATELY: nothing. Still GREEN ON WHITE, which is
* the same 2.25 and a separate decision Jeremy has not made: every green link,
* the Library prices, and the white "Join Now" pill inside the green bar.
*/
/* The bar across the top of every page, signed out. */
.elementor-element-8a0bbaf,
.elementor-element-8a0bbaf p,
.elementor-element-8ffe1e7,
.elementor-element-8ffe1e7 p {
color: #17201A !important;
}
/* Join Now in the header, signed out. */
.header-buttons a.button.signup {
color: #17201A !important;
}
/* Continue Journey, on the home page. */
a#continue_btn {
color: #17201A !important;
}
/* Continue with ... , and the current page number, in the Library. */
a.ap-libcont__link,
.page-numbers.current {
color: #17201A !important;
}
/*
* Start Free Trial, Get Started, and any other button that leads to the
* sign-up form. Targeted by where it goes rather than by a class, because
* Elementor gives these buttons no name of their own.
*
* NO TRAILING SLASH IN THE MATCH. Jeremy, 2026-09-22: "get started button still
* white on green". It was, because that one links to `/register` and Start Free
* Trial links to `/register/` - and the first version of this rule asked for
* the slash, so it matched one button and missed the other.
*/
a.elementor-button[href*="/register"] .elementor-button-text,
a.elementor-button[href*="/register"] {
color: #17201A !important;
}
/*
* THE PLAN TICKS ARE GREEN, NOT BLACK.
*
* Jeremy, 2026-09-22: "checkboxes should be green not black (fine on
* production, broekn on test)". Measured: the ticks compute to pure black and
* inherit it from the features list, which is a colour nothing in this theme
* sets. It is not the near-black used for the headings above - that is #17201A
* and this is #000000 - so the two are unrelated.
*
* It is the same fault as the green bands behind the plan names in August: the
* widget's own colour setting is absent from the page on test and present on
* production, so Elementor falls back to black. The fix then was a CSS rule
* pointing at Jeremy's own brand variable rather than a hard-coded hex, and it
* is the right answer again - if the green ever changes, this follows it.
*
* The red crosses are left alone. They carry their own colour, they survived
* whatever lost the ticks, and red is doing a job there.
*/
.elementor-price-table__features-list .fa-check-circle,
.elementor-price-table__features-list .fa-check,
.elementor-price-table__feature-inner i.fa-check-circle {
color: var(--bb-primary-color, #50C450) !important;
}
/*
* THE PRICE TABLES STOP JUMPING - measured 2026-09-23.
*
* /join/ renders SIX price tables, three monthly and three yearly, inside an
* Elementor nested-tabs widget. Elementor hides the inactive panel, but its
* widget stylesheet arrives late, so for the first two seconds the browser
* draws all six and then collapses three of them - three cards 590px tall
* vanishing at once. Measured layout shift 0.72, against Google's 0.1
* threshold, on the page where somebody is reading a price.
*
* `e-active` is written into the HTML by the server, checked before relying on
* it, so this rule is correct from the very first paint rather than waiting on
* JavaScript - which is the whole point. `!important` because Elementor's own
* grid display lands later and would otherwise win.
*/
.elementor-widget-n-tabs [role="tabpanel"]:not(.e-active) {
display: none !important;
}
/* A LESSON ADDED AFTER YOU FINISHED THE LEVEL.
Jeremy, 2026-09-25: finishing a level must stay finished when a lesson is
added. It does - but then the new lesson would be indistinguishable from the
ones they worked through months ago, sitting unlocked in a level they have no
reason to revisit. This says which one is new.
TOP LEFT, because the saved bookmark is already top right and a lesson can be
both. Not a control: like the bookmark, it tells you something and the bubble
underneath is still the only thing to press. */
.ap-lesson-new {
position: absolute;
top: -6px;
left: -8px;
z-index: 2;
padding: 2px 7px;
border-radius: 9px;
background: var(--bb-primary-color, #2f8f3f);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
pointer-events: none;
}
/* =========================================================================
CASE LIVES IN THE WORDS, NOT IN THE STYLESHEET. Jeremy, 2026-09-26: "i
never want the theme to change capitalization of what i type".
FOUND WHEN A HEADING READ "Keydom Of C". The parent theme re-cases text in
about thirty places - LearnDash section headings, widget titles, the
profile's own headings, forum titles, footer menu links, WooCommerce
category and product names - and every one of those strings is something
somebody typed. A stylesheet cannot know that "of" is not a word to
capitalise, that "Bb" is not "BB", or that "ArtPlay Academy" has its own
shape. So it is switched off everywhere, once, rather than chased selector
by selector through code that a theme update replaces.
What stays are OUR OWN small fixed labels - an eyebrow, a badge, a state
word - which are written in code and are caps by design, not text anybody
typed into the site. They are listed below, so that the list of exceptions
is one short thing to read and not a surprise in nine files.
========================================================================= */
*,
*::before,
*::after {
text-transform: none !important;
}
/* The exceptions, and there are no others. */
.dkc-page .dkc-eyebrow,
.dkc-page .dkc-what-extra,
.ap-yi .ap-yi__eyebrow,
.ap-tsearch-results__head,
.ap-cal__log-head,
.ap-signup-progress,
.ap-lesson-new,
.ap-wheel-row__state,
.ap-activity__facts dt,
.ap-activity__form label,
.ap-activity__how,
.ap-email-prefs__always,
.play-button,
.play-button button {
text-transform: uppercase !important;
}
|