/* Custom CSS for Quantum Healers */
/* Ensure Find a Practitioner menu item is always visible */
#menu-item-1457678,
li.menu-item-1457678 {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
html {
scroll-behavior: smooth;
}
:root {
--brand-primary: #861629;
--brand-primary-dark: #6b0f23;
--brand-secondary: #4657a0;
--brand-secondary-dark: #2d3d70;
--brand-green: #28a745;
--brand-green-dark: #1f8236;
--brand-lighter-gray: #f8f9fa;
--brand-light-gray: #e5e7eb;
--bg-light-gray: #ededed;
--white: #ffffff;
--black: #000000;
--font-default:
"Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
Ubuntu, Cantarell, sans-serif;
--font-2xs: clamp(0.45rem, -0.02vi + 0.5rem, 0.5rem);
--font-xs: clamp(0.64rem, -0.01vi + 0.64rem, 0.63rem);
--font-sm: clamp(0.8rem, 0.2vi + 0.75rem, 0.91rem);
--font-base: clamp(1rem, 0.45vi + 0.89rem, 1.25rem);
--font-md: clamp(1.25rem, 0.85vi + 1.04rem, 1.72rem);
--font-lg: clamp(1.56rem, 1.46vi + 1.2rem, 2.36rem);
--font-xl: clamp(3rem, 3vi + 1.36rem, 3.5rem);
--font-2xl: clamp(2.44rem, 3.68vi + 1.52rem, 4.47rem);
--font-3xl: clamp(3.05rem, 5.62vi + 1.65rem, 6.14rem);
--font-hero-home: clamp(1.563rem, 2.5vi + 0.75rem, 3rem);
--font-hero: clamp(2.375rem, 2.625vi + 0.55rem, 3rem);
--font-md-l: clamp(1rem, 0.9348rem + 0.3261vw, 1.25rem);
--font-cta-hl: clamp(1.5rem, 1.5065rem + 1.1087vw, 1.875rem);
--font-lg-xl: clamp(2.125rem, 1.7065rem + 1.1087vw, 3rem);
--font-md-l: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);
--font-lg-2xl: clamp(2.375rem, 1.0978rem + 3.3967vw, 4rem);
--font-nav: clamp(1.38rem, 0.92rem + 0.57vi, 1.06rem);
--font-team-grid-title: clamp(1.125rem, 1.0326rem + 0.4348vw, 1.375rem);
--letter-spacing-xs: clamp(0.01em, -0.01em + 0.05em, 0.02em);
--letter-spacing-sm: clamp(0.02em, -0.01em + 0.05em, 0.03em);
--letter-spacing-base: clamp(0.03em, -0.01em + 0.05em, 0.04em);
--letter-spacing-md: clamp(0.04em, -0.01em + 0.05em, 0.05em);
--letter-spacing-lg: clamp(0.05em, -0.01em + 0.05em, 0.06em);
--space-5xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
--space-4xs: clamp(0.3125rem, 0.2908rem + 0.1087vw, 0.375rem);
--space-3xs: clamp(0.375rem, 0.3315rem + 0.2174vw, 0.5rem);
--space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
--space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
--space-sm: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
--space-md: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
--space-lg: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
--space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
--space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
--space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);
--space-hero-title: clamp(8vh, 5.5vh + 28vw, 36vh);
--space-5xs-4xs: clamp(0.25rem, 0.2065rem + 0.2174vw, 0.375rem);
--space-4xs-3xs: clamp(0.3125rem, 0.2473rem + 0.3261vw, 0.5rem);
--space-3xs-2xs: clamp(0.375rem, 0.288rem + 0.4348vw, 0.625rem);
--space-2xs-xs: clamp(0.5rem, 0.3478rem + 0.7609vw, 0.9375rem);
--space-xs-sm: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
--space-sm-md: clamp(1rem, 0.6957rem + 1.5217vw, 1.875rem);
--space-md-lg: clamp(1.5rem, 1.1522rem + 1.8vw, 2.75rem);
--space-lg-xl: clamp(2rem, 1.3913rem + 3.0435vw, 3.75rem);
--space-xl-2xl: clamp(3rem, 2.3043rem + 3.4783vw, 5rem);
--space-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem);
--space-6xs-md: clamp(0.125rem, 1.4375rem - 1.3125vw, 1rem);
--space-2xs-sm: clamp(0.72rem, 0.04vi + 0.71rem, 0.74rem);
--space-sm-lg: clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem);
--space-sm-xl: clamp(1.125rem, 0.212rem + 4.5652vw, 3.75rem);
--space-xs-xl: clamp(0.75rem, -0.2935rem + 5.2174vw, 3.75rem);
--space-2xs-lg: clamp(0.25rem, -0.3478rem + 3.0435vw, 2.75rem);
--space-none-2xl: clamp(0rem, -1.087rem + 5.4348vw, 5rem);
--space-sm-2xl: clamp(1.125rem, -0.2228rem + 5vw, 5rem);
--space-md-xl: clamp(1.5rem, 0.6304rem + 4.3478vw, 3.75rem);
--space-md-2xl: clamp(1.5rem, -0.2555rem + 6.9875vw, 5rem);
--space-lg-2xl: clamp(2.5rem, -0.2555rem + 6.9875vw, 5rem);
--space-md-3xl: clamp(1.6875rem, -0.3342rem + 10.1087vw, 7.5rem);
--space-lg-3xl: clamp(2.25rem, 0.4239rem + 9.1304vw, 7.5rem);
--space-2xl-3xl: clamp(2.75rem, 1.4304rem + 2.3478vw, 3.25rem);
--space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
--star-size: 40px;
--line-height-snug: 1;
--line-height-tight: 1.25;
--line-height-base: 1.4;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
--line-height-loose: 2;
--line-height-none: 0.9;
--line-height-inherit: inherit;
--line-height-hero: 1.2;
}
body {
font-family: var(--font-default);
}
/* ------------------------------------*\
#HEADINGS
\*------------------------------------ */
h1,
.h1,
h1.entry-title,
.single.single-forum .type-forum .bb-topic-banner .entry-header.bb-single-forum .entry-title {
font-size: var(--font-xl);
line-height: 1.2;
font-weight: 700;
}
header.entry-header.bb-single-forum h1.entry-title,
.single.single-forum .type-forum .entry-header.bb-single-forum {
margin-block: 0.5rem;
}
h2,
.h2 {
font-size: calc(var(--font-lg) * 0.675);
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.0125em;
}
h2.xl,
.h2.xl {
font-size: calc(var(--font-lg) * 1);
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
}
h2.h2-xl {
font-size: calc(var(--font-lg) * 1);
padding-bottom: var(--space-md);
}
h3,
.h3 {
font-size: calc(var(--font-lg) * 0.575);
line-height: 1.2;
font-weight: 700;
}
h4,
.h4 {
font-size: calc(var(--font-lg) * 0.5);
line-height: 1.3;
font-weight: 600;
}
h5,
.h5 {
font-size: calc(var(--font-lg) * 0.4);
line-height: 1.3;
font-weight: 500;
}
h6,
.h6 {
font-size: var(--font-md);
line-height: 1.4;
font-weight: 500;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.h6,
p,
address,
hr {
margin: 0rem 0rem 1.25rem;
padding: 0;
}
b,
strong {
font-weight: 800;
}
body,
body.bb-custom-typo {
font-family: var(--font-default);
}
a.btn,
a.btn.btn-primary,
button {
cursor: pointer;
margin-block: inherit;
color: var(--white);
padding: var(--space-2xs) var(--space-sm);
font-size: calc(var(--font-sm) * 1.05);
font-weight: 500;
text-decoration: none;
text-transform: capitalize;
letter-spacing: -0.0125em;
background: var(--brand-secondary);
border-radius: 10px;
transition: background-color border-color 0.3s ease;
border: solid 3px var(--brand-secondary);
}
.wp-block-columns {
margin-left: auto;
margin-right: auto;
}
.wp-block-columns p {
padding-left: 0;
padding-right: 0;
}
.primary-menu .current-menu-parent > a,
.primary-menu .current-menu-ancestor > a,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
font-weight: 800;
color: var(--bb-header-links-hover);
letter-spacing: -0.24px;
}
.bb-custom-typo h1,
.bb-custom-typo .h1,
.bb-custom-typo h2,
.bb-custom-typo .h2,
.bb-custom-typo h3,
.bb-custom-typo .h3,
.bb-custom-typo h4,
.bb-custom-typo .h4,
.bb-custom-typo h5,
.bb-custom-typo .h5,
.bb-custom-typo h6,
.bb-custom-typo .h6,
.bb-custom-typo .bb-course-footer,
.bb-custom-typo .ld-table-list-header .ld-text,
.bb-custom-typo .gamipress-achievement-points,
.bb-custom-typo .vjs-modal-dialog-content {
font-family: var(--font-default);
}
.bb-custom-typo #content .mepr-price-menu .mepr-price-box-title {
font-family: var(--font-default);
}
.bb-custom-typo .mepr-price-box-price span,
.bb-custom-typo .learndash-wrapper #ld-profile .ld-profile-heading {
font-family: var(--font-default);
}
.bb-custom-typo .ld-profile-stats .ld-profile-stat strong {
font-family: var(--font-default);
font-weight: 600;
}
.mepr_price_cell_label {
padding-inline-end: var(--space-3xs);
}
main section {
margin-block: var(--space-md-2xl);
}
main section:first-child {
margin-block-start: auto;
}
.entry-content {
max-width: 1280px;
margin-inline: auto;
padding-inline: var(--space-sm);
}
.container.entry-content {
margin-block: var(--space-md-xl);
}
.bg-primary {
background-color: var(--brand-primary);
}
.bg-secondary {
background-color: var(--brand-secondary);
}
.bg-light-gray {
background-color: var(--bg-light-gray);
}
.rounded {
border-radius: 0.625rem;
}
.wp-block-columns h2.wp-block-heading,
.wp-block-columns h3.wp-block-heading,
.wp-block-columns h4.wp-block-heading,
.wp-block-columns h5.wp-block-heading,
.wp-block-columns h6.wp-block-heading {
padding-block-start: var(--space-md);
padding-inline: 0;
}
.px-sm-md {
padding-inline: var(--space-md);
}
figure.wp-block-embed {
margin-block: var(--space-sm);
}
.bqh figure.wp-block-embed {
margin-block: var(--space-md-2xl);
}
.get-ready figure.wp-block-embed {
margin-block: auto;
}
.wp-block-button a.wp-block-button__link.wp-element-button {
background-color: var(--brand-primary);
border-color: var(--brand-primary);
color: #fff;
border-radius: 0.5rem;
padding: var(--space-2xs) var(--space-sm);
font-size: var(--font-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
margin-block-end: var(--space-md);
}
.wp-block-button a.wp-block-button__link.wp-element-button:hover,
.wp-block-button a.wp-block-button__link.wp-element-button:focus {
background-color: var(--brand-primary-dark);
border-color: var(--brand-primary-dark);
}
.wp-block-columns {
margin-left: auto;
margin-right: auto;
}
.site-header {
padding: 0 var(--space-3xs);
}
.bb-footer {
padding: var(--space-md) var(--space-3xs);
}
.max-w-6xl {
max-width: 64rem;
}
.max-w-6xl-center {
max-width: 58rem;
margin-inline: auto;
text-align: center;
}
.directory #primary.content-area.bs-bp-container {
display: flex;
width: 100%;
max-width: 1000px;
height: auto;
justify-content: center;
align-items: center;
margin-inline: auto;
}
.page-template-page-qh-default .content-area.bb-grid-cell,
.page-template-page-faq .content-area.bb-grid-cell,
.single-memberpressproduct .content-area.bb-grid-cell {
padding: 0;
}
.hentry blockquote.wp-block-quote {
margin-block: 25px;
}
figure.b-l-md {
overflow: hidden;
border-bottom-left-radius: 3rem;
}
.plethoraplugins-accordion.plethoraplugins-theme__minimal.plethoraplugins-theme__basic
.pds-accordion__title {
background-color: var(--brand-secondary);
}
/* =============================================================================
MEMBERPRESS COURSE LAYOUT - 2/3 CONTENT, 1/3 FORM
============================================================================= */
/* Create flexbox layout for MemberPress course pages on large screens */
@media (width >= 1024px) {
/* Header stays full width */
.single-memberpressproduct #primary article .entry-header {
width: 100%;
max-width: 100%;
}
/* Make .entry-content a 2-column flex layout */
.single-memberpressproduct .entry-content,
.quantum-connect .entry-content,
body.quantum-connect .entry-content {
display: flex !important;
gap: 40px;
align-items: flex-start;
max-width: 1280px;
margin-inline: auto;
padding-inline: var(--space-md);
/* Reset all CSS column properties */
column-count: unset !important;
column-width: unset !important;
column-gap: unset !important;
column-rule: unset !important;
column-fill: unset !important;
columns: unset !important;
}
/* Content wrapper - left column */
.single-memberpressproduct .entry-content > .mp_content,
.quantum-connect .entry-content > .mp_content,
body.quantum-connect .entry-content > .mp_content {
flex: 1 1 0;
min-width: 0;
padding-inline-end: var(--space-lg);
}
/* MemberPress form wrapper - right column */
.single-memberpressproduct .entry-content > .mp_wrapper,
.quantum-connect .entry-content > .mp_wrapper,
body.quantum-connect .container.entry-content > .mp_wrapper {
flex: 1 1 0;
min-width: 0;
position: sticky;
top: var(--space-lg);
align-self: flex-start;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: var(--space-lg);
overflow: visible;
/* Reset all CSS column properties */
column-count: unset !important;
column-width: unset !important;
column-gap: unset !important;
column-rule: unset !important;
column-fill: unset !important;
columns: unset !important;
}
/* Ensure form elements don't overflow horizontally */
.single-memberpressproduct .entry-content > .mp_wrapper *,
.quantum-connect .entry-content > .mp_wrapper *,
body.quantum-connect .entry-content > .mp_wrapper * {
max-width: 100%;
box-sizing: border-box;
}
}
/* Collapse to single column on tablet and below */
@media (width < 1024px) {
.single-memberpressproduct .entry-content,
.quantum-connect .entry-content,
body.quantum-connect .entry-content {
display: flex !important;
flex-direction: column !important;
gap: var(--space-lg);
padding-inline: var(--space-sm);
}
.single-memberpressproduct .entry-content > .mp_wrapper,
.quantum-connect .entry-content > .mp_wrapper,
body.quantum-connect .entry-content > .mp_wrapper {
position: static !important;
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
margin-block-start: var(--space-md);
}
.single-memberpressproduct .entry-content > .mp_content,
.quantum-connect .entry-content > .mp_content,
body.quantum-connect .entry-content > .mp_content {
flex: 1 1 auto !important;
width: 100% !important;
}
.mp_wrapper .mepr-price-box,
.mp_wrapper .mepr-form {
max-width: 100%;
box-sizing: border-box;
}
.mp_wrapper input[type="text"],
.mp_wrapper input[type="email"],
.mp_wrapper input[type="password"],
.mp_wrapper input[type="tel"],
.mp_wrapper select {
width: 100%;
box-sizing: border-box;
}
}
@media (width <= 480px) {
.mp_wrapper.mp_login_form {
padding: var(--space-sm) !important;
}
}
.site-content:not(.maintenance-content) {
padding: 0;
}
#home-intro {
width: 100%;
height: auto;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 100%;
position: relative;
&::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 0;
}
.container {
width: 100%;
max-width: 78rem;
margin: auto;
padding-inline: 1rem;
position: relative;
z-index: 1;
h1,
p {
color: #fff;
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
}
p {
font-weight: 200;
}
> .button {
margin-block-start: var(--space-sm);
margin-block-end: var(--space-2xs);
display: inline-block;
}
}
}
@media (width <= 768px) {
#home-intro::before {
background: rgba(0, 0, 0, 0.45);
}
#home-intro .container > .button {
margin-block-start: var(--space-md);
}
}
#home-courses {
h2 {
max-width: 50rem;
margin-inline: auto;
text-align: center;
color: var(--brand-primary);
margin-block-end: var(--space-sm);
}
p {
font-size: var(--font-base);
}
}
.home-courses-text {
padding-block: var(--space-md);
padding-inline: var(--space-md);
}
@media (width > 768px) {
.home-courses-text {
padding-block-start: var(--space-md-2xl);
}
}
.duo-grid {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.grid-col-image {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
overflow: hidden;
border-radius: 1rem;
margin-block-end: 1rem;
}
.grid-col-text h3 {
font-size: calc(var(--font-md) * 0.95);
}
.grid-img {
width: 100%;
height: 100%;
}
.text-center {
text-align: center;
}
.responsive-img {
max-width: 100%;
height: auto;
display: block;
}
#testimonials {
padding-block: var(--space-lg-3xl);
h2 {
text-align: center;
margin-block-end: var(--space-md-lg);
}
}
.post-type-archive-practitioner #content.site-content,
.blog #content.site-content {
padding-top: 0;
}
/* Blog header styles */
.blog #blog-header {
position: relative;
display: block;
margin-block-start: 0;
margin-block-end: var(--space-lg);
padding-block: var(--space-lg-2xl);
padding-inline: var(--space-md);
background-image:
var(--header-gradient-blog, none), var(--header-bg-blog, url("../img/woodland-rays.webp"));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
/* Special margin adjustments for archive pages */
.post-type-archive-practitioner header#practitioner-header {
margin-block-start: var(--space-2xl);
margin-block-end: var(--space-lg);
padding-block: var(--space-lg-2xl);
}
.blog #blog-header h1.blog-title {
color: #fff;
text-align: center;
font-size: var(--font-2xl);
text-shadow: 2px 3px 13px rgba(0, 0, 0, 0.15);
font-weight: 700;
line-height: 1.2;
max-width: 48rem;
margin-inline: auto;
padding-block: var(--space-lg-xl);
margin-block-end: auto;
position: relative;
z-index: 1;
}
.blog #blog-header:after {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background: url("../img/animated/boken-3.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.5;
mix-blend-mode: color-dodge;
}
/* Testimonials Grid */
.testimonials-grid-container {
width: 100%;
margin: 0 auto;
}
.testimonials-grid {
display: flex;
flex-direction: column;
gap: var(--space-lg);
margin: var(--space-lg) 0;
}
.testimonial-item {
background: #fff;
border-radius: 8px;
padding: var(--space-md);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.testimonial-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.testimonial-content {
height: 100%;
display: flex;
flex-direction: column;
}
.testimonial-title {
font-size: var(--font-md);
font-weight: 600;
margin: 0 0 var(--space-2xs) 0;
}
.testimonial-type {
margin-bottom: var(--space-sm);
font-style: italic;
}
.testimonial-text {
margin-bottom: var(--space-sm);
max-height: 80px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.testimonial-button-area {
margin-top: auto;
min-height: 2.5rem;
display: flex;
align-items: flex-end;
}
.testimonial-button-area button {
cursor: pointer;
margin-block: 1rem;
background: var(--brand-secondary);
transition: background-color border-color 0.3s ease;
border: solid 3px var(--brand-secondary);
}
.testimonial-button-area button:hover,
.testimonial-button-area button:focus {
background: var(--brand-secondary-dark);
border-color: var(--brand-secondary-dark);
}
/* Latest Blog Posts Grid Styling */
#latest-blog {
padding: var(--space-xl) 0;
}
#latest-blog .posts-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
margin-top: var(--space-lg);
}
#latest-blog .posts-grid > * {
flex: 1 1 280px;
min-width: 280px;
}
#latest-blog .posts-grid .tile {
margin-bottom: 0;
height: auto;
display: block;
}
#latest-blog .posts-grid .aspect-ratio-wide {
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 8px;
flex-shrink: 0;
}
#latest-blog .posts-grid .aspect-ratio-wide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
#latest-blog .posts-grid .aspect-ratio-wide:hover img {
transform: scale(1.05);
}
#latest-blog .posts-grid h3 {
margin: var(--space-sm) 0 var(--space-xs) 0;
font-size: calc(var(--font-md) * 0.75);
line-height: 1.2;
flex-grow: 1;
}
#latest-blog .posts-grid h3 a {
color: inherit;
text-decoration: none;
}
#latest-blog .posts-grid h3 a:hover {
color: var(--brand-primary);
}
#latest-blog .posts-grid .post-date {
font-size: var(--font-sm);
margin-bottom: var(--space-xs);
}
#latest-blog .posts-grid .category a {
color: var(--brand-secondary);
text-decoration: none;
}
#latest-blog .posts-grid .category a:hover {
color: var(--brand-secondary-dark);
}
#latest-blog .posts-grid p {
font-size: var(--font-sm);
margin-top: auto;
}
.single-post .post-meta-wrapper-main {
display: none !important;
}
/* PAGE HEADER STYLES */
/* Base header styles - common to all page headers */
.page-template-page-qh-default article header.entry-header:not(.profile-loop-header),
.page-template-page-faq article header.entry-header,
.faq article header.entry-header,
.single-memberpressproduct article header.entry-header,
.post-type-archive-practitioner header#practitioner-header,
.quantum-connect article header.entry-header,
.contact article header.entry-header,
.bqh article header.entry-header,
.join article header.entry-header,
.page-template-page-practicioners header#practitioner-header,
.mepr-thankyou-page header#thank-you-header,
.members header#members-header,
.our-courses article header.entry-header,
.get-ready article header.entry-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-block: var(--space-md);
padding-inline: var(--space-md);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 40vh;
overflow: hidden;
position: relative;
}
/* Headers with specific background images */
.page-template-page-qh-default article header.entry-header:not(.profile-loop-header) {
background-image:
var(--header-gradient-qh-default, linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.7))),
var(--header-bg-qh-default, url("../img/sea-rays.png"));
}
.single-memberpressproduct article header.entry-header {
background-image:
var(
--header-gradient-memberpress,
linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.7))
),
var(--header-bg-memberpress, url("../img/sea-rays.png"));
}
.page-template-page-faq article header.entry-header,
.faq article header.entry-header {
background-image:
var(--header-gradient-faq, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7))),
var(--header-bg-faq, url("../img/flower-field.webp"));
}
.join article header.entry-header {
background-image:
var(--header-gradient-join, none), var(--header-bg-join, url("../img/sea-rays.png"));
}
.page-template-page-practicioners header#practitioner-header {
background-image:
var(--header-gradient-practitioners-page, none),
var(--header-bg-practitioners-page, url("../img/home_page_banner-fall25.jpg"));
}
.mepr-thankyou-page header#thank-you-header {
background-image:
var(--header-gradient-practitioners-page, none),
var(--header-bg-practitioners-page, url("../img/home_page_banner-fall25.jpg"));
}
/* Hero is output in full-width-header.php (outside #content); override BuddyBoss MemberPress defaults */
.mepr-thankyou-page header#thank-you-header.entry-header {
margin-block-start: 0;
margin-inline: 0;
margin-block-end: auto;
}
.mepr-thankyou-page #content.site-content {
margin-block-start: 0;
padding-block-start: 0;
}
.mepr-thankyou-page article {
max-width: 768px;
margin-inline: auto;
}
.bqh article header.entry-header {
background-image:
var(--header-gradient-bqh, none),
var(--header-bg-bqh, url("../img/cosmic-cloud-rays-2.jpg"));
}
.members header#members-header {
background-image:
var(--header-gradient-members, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8))),
var(--header-bg-members, url("../img/flower-field.webp"));
}
.quantum-connect article header.entry-header {
background-image:
var(
--header-gradient-quantum-connect,
linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.7))
),
var(--header-bg-quantum-connect, url("../img/aether-clouds.webp"));
}
.our-courses article header.entry-header {
background-image:
var(
--header-gradient-our-courses,
linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.7))
),
var(--header-bg-our-courses, url("../img/sea-rays.png"));
}
.get-ready article header.entry-header {
background-image:
var(--header-gradient-get-ready, linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.7))),
var(--header-bg-get-ready, url("../img/sea-rays.png"));
}
/* Headers with gradient backgrounds */
.post-type-archive-practitioner header#practitioner-header {
background-image:
var(--header-bg-practitioners-archive, none),
var(
--header-gradient-practitioners-archive,
radial-gradient(circle, rgba(70, 87, 160, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%)
);
background-size: cover, auto;
background-position: center, center;
}
.contact article header.entry-header {
background-image:
var(--header-bg-contact, none),
var(
--header-gradient-contact,
radial-gradient(circle, rgba(107, 15, 35, 0.6) 0%, rgba(0, 0, 0, 0.8) 120%)
);
background-size: cover, auto;
background-position: center, center;
}
/* Header overlay animations - base styles */
.page-template-page-qh-default article header.entry-header:not(.profile-loop-header):after,
.page-template-page-faq article header.entry-header:after,
.faq article header.entry-header:after,
.single-memberpressproduct article header.entry-header:after,
.post-type-archive-practitioner header#practitioner-header:after,
.quantum-connect article header.entry-header:after,
.contact article header.entry-header:after,
.bqh article header.entry-header:after,
.bqh-immersion article header.entry-header:after,
.get-ready article header.entry-header:after,
.join article header.entry-header:after,
.page-template-page-qh-default.login article header.entry-header:after,
.page-template-page-practicioners header#practitioner-header:after,
.mepr-thankyou-page header#thank-you-header:after,
.members header#members-header:after,
.our-courses article header.entry-header:after {
position: absolute;
z-index: 0;
content: "";
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Standard full-coverage overlays */
.page-template-page-qh-default article header.entry-header:not(.profile-loop-header):after,
.page-template-page-faq article header.entry-header:after,
.faq article header.entry-header:after,
.single-memberpressproduct article header.entry-header:after,
.join article header.entry-header:after,
.our-courses article header.entry-header:after {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
/* Centered overlays */
.post-type-archive-practitioner header#practitioner-header:after,
.page-template-page-practicioners header#practitioner-header:after,
.mepr-thankyou-page header#thank-you-header:after,
.members header#members-header:after {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
/* Top-positioned overlays */
.bqh article header.entry-header:after,
.bqh-immersion article header.entry-header:after,
.get-ready article header.entry-header:after,
.contact article header.entry-header:after,
.page-template-page-qh-default.login article header.entry-header:after {
top: 0;
width: 100%;
height: 100%;
}
/* Specific background images and blend modes */
.single-memberpressproduct article header.entry-header:after {
background: url("../img/animated/bubble.svg");
opacity: 0.3;
mix-blend-mode: normal;
}
.page-template-page-faq article header.entry-header:after,
.faq article header.entry-header:after {
background: url("../img/animated/bokeh.svg");
opacity: 0.9;
mix-blend-mode: screen;
}
.members header#members-header:after {
background: url("../img/animated/bokeh.svg");
opacity: 0.4;
mix-blend-mode: normal;
}
.post-type-archive-practitioner header#practitioner-header:after {
background: url("../img/animated/top-wave-3.svg");
opacity: 0.25;
mix-blend-mode: overlay;
}
.bqh-immersion article header.entry-header:after {
background: url("../img/animated/fibonacci-spiral-3.svg");
opacity: 0.95;
mix-blend-mode: overlay;
}
.bqh article header.entry-header:after {
background: url("../img/animated/bokeh.svg");
opacity: 0.5;
mix-blend-mode: color-dodge;
}
.get-ready article header.entry-header:after {
background: url("../img/animated/light-move-2.svg");
opacity: 0.5;
mix-blend-mode: overlay;
}
.contact article header.entry-header:after {
background: url("../img/animated/boken-3.svg");
opacity: 0.5;
mix-blend-mode: normal;
}
.join article header.entry-header:after {
background: url("../img/animated/boken-1.svg");
opacity: 0.6;
mix-blend-mode: hard-light;
}
.page-template-page-qh-default.login article header.entry-header:after {
background: url("../img/animated/smoke.svg");
opacity: 0.5;
mix-blend-mode: overlay;
}
.page-template-page-practicioners header#practitioner-header:after,
.mepr-thankyou-page header#thank-you-header:after {
background-image: url("../img/animated/boken-3.svg");
opacity: 1;
mix-blend-mode: overlay;
}
.our-courses article header.entry-header:after {
background: url("../img/animated/bubble.svg");
opacity: 0.3;
mix-blend-mode: normal;
}
.page-template-page-qh-default article header.entry-header h1.entry-title,
.page-template-page-practicioners header#practitioner-header h1.practitioner-title,
.mepr-thankyou-page header#thank-you-header h1.entry-title,
.page-template-page-faq article header.entry-header h1.entry-title,
.faq article header.entry-header h1.entry-title,
.single-memberpressproduct article header.entry-header h1.entry-title,
.post-type-archive-practitioner header#practitioner-header h1.practitioner-title,
.single-memberpressproduct header.entry-header h1.entry-title,
.post-type-archive-practitioner header#practitioner-header h1.practitioner-title,
.members header#members-header h1.members-title,
.our-courses article header.entry-header h1.entry-title,
.get-ready article header.entry-header h1.entry-title {
font-size: var(--font-2xl);
font-weight: 700;
color: #fff;
margin-block-end: var(--space-2xs);
position: relative;
z-index: 1;
max-width: 48rem;
margin-inline: auto;
padding-inline: var(--space-xs);
text-shadow: 2px 3px 13px rgba(0, 0, 0, 0.15);
}
.mepr-login-page .entry-header {
margin-block: auto;
}
.mepr-login-page .entry-header h1.entry-title {
margin-block-end: var(--space-2xs);
font-size: var(--font-2xl);
}
footer.bb-footer .sub-menu.active span.link-text {
color: var(--white);
background-color: var(--brand-primary);
}
.footer-copyright-wrap .copyright {
max-width: 300px;
margin-inline-start: 0;
margin-inline-end: auto;
padding-inline-end: var(--space-md-xl);
line-height: 1.2;
}
.footer-copyright-wrap .copyright em {
display: block;
width: 100%;
font-style: normal;
}
.home-gray-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.home-gray-heading {
text-align: center;
margin-bottom: var(--space-lg);
}
.home-gray-grid {
display: flex;
flex-direction: column;
gap: var(--space-lg);
align-items: center;
}
.home-gray-image {
width: 100%;
}
.home-gray-text {
width: 100%;
}
.home-gray-text {
padding: var(--space-sm);
}
.home-gray-text h2,
.home-gray-text h3,
.home-gray-text h4 {
margin-top: 0;
margin-bottom: var(--space-sm);
}
.home-gray-text p {
margin-bottom: var(--space-sm);
}
.home-gray-text p:last-child {
margin-bottom: 0;
}
.home-gray-image {
display: flex;
justify-content: center;
align-items: center;
}
.home-gray-image .responsive-img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* FAQ Tabs Styling */
.faq-container {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-md);
}
.faq-tabs-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-xs);
margin-bottom: var(--space-lg);
border-bottom: 2px solid var(--brand-light-gray);
}
.faq-tab-button {
background: transparent;
border: none;
padding: var(--space-sm);
font-size: 0.895rem;
font-weight: 500;
color: #6b7280;
cursor: pointer;
border-bottom: 3px solid transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transition: all 0.3s ease;
position: relative;
bottom: -2px;
}
.faq-tab-button:hover {
color: var(--brand-primary);
background: rgba(134, 22, 41, 0.05);
}
.faq-tab-button.active {
color: #fff;
background-color: var(--brand-primary-dark);
border-bottom-color: var(--brand-primary);
font-weight: 600;
}
.faq-tabs-content {
position: relative;
background: #fff;
border: 1px solid var(--brand-light-gray);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.faq-tab-content {
display: none;
animation: fadeIn 0.3s ease-in-out;
}
.faq-tab-content.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.faq-items {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.faq-item {
padding: var(--space-lg) var(--space-lg) 0;
}
.faq-item:last-child {
padding: var(--space-lg) var(--space-lg);
}
.faq-question {
color: var(--brand-primary);
font-size: var(--font-md);
font-weight: 700;
margin: 0 0 var(--space-sm) 0;
line-height: var(--line-height-tight);
}
.faq-answer {
font-size: var(--font-base);
line-height: var(--line-height-relaxed);
}
.faq-answer p {
margin-bottom: var(--space-sm);
}
.faq-answer p:last-child {
margin-bottom: 0;
}
.faq-answer ul,
.faq-answer ol {
margin: var(--space-sm) 0;
padding-left: var(--space-md);
}
.faq-answer li {
margin-bottom: var(--space-xs);
}
/**
* Course Columns Styles
* Mobile-first responsive design with staggered layout and hover effects
*/
/* Base mobile styles */
.course-columns-container {
width: 100%;
margin: 0 auto;
padding: var(--space-lg) 0;
}
.course-column {
margin-bottom: var(--space-xl);
padding: var(--space-md) var(--space-lg);
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* Mobile: Image always first, content below */
.course-image {
width: 100%;
position: relative;
overflow: hidden;
}
.course-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.course-content-wrapper {
padding: var(--space-md);
}
.course-header {
margin-bottom: var(--space-sm);
}
.course-heading {
font-size: var(--font-md);
font-weight: 700;
color: #2c3e50;
margin: 0 0 var(--space-2xs) 0;
line-height: 1.3;
}
.course-subheading {
font-size: var(--font-base);
font-weight: 500;
color: #7f8c8d;
margin: 0;
line-height: 1.4;
}
.course-description {
margin-bottom: var(--space-md);
color: #34495e;
line-height: 1.6;
}
.course-description p {
margin-bottom: var(--space-sm);
}
.course-description p:last-child {
margin-bottom: 0;
}
.course-price {
margin-bottom: var(--space-md);
font-size: var(--font-base);
color: #27ae60;
}
.course-action {
text-align: center;
}
.course-link {
display: inline-block;
padding: var(--space-xs) 2rem;
background: #3498db;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
transition:
background 0.3s ease,
transform 0.2s ease;
}
.course-link:hover {
background: #2980b9;
transform: translateY(-2px);
text-decoration: none;
color: #fff;
}
.bs-forums-banner {
padding: var(--space-2xl) var(--space-sm);
}
.primary-menu a {
font-size: 0.825rem;
color: var(--bb-header-links);
letter-spacing: -0.24px;
}
.primary-menu > li > a {
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.0125rem;
}
.primary-menu .current_page_item > a {
font-weight: 800;
}
/* Full-width content styles */
.full-width-content {
width: 100%;
max-width: none;
padding-inline: 0;
margin-inline: 0;
}
/* =============================================================================
LEARNDASH - Light mode text readability
Force black text throughout LD in light mode so content is readable.
Dark mode (.bb-dark-theme) styles override these naturally.
============================================================================= */
body:not(.bb-sfwd-aside.bb-dark-theme) .learndash-wrapper {
color: #000;
}
/* Add spacing before video embeds in LearnDash lessons */
.learndash-wrapper .ld-lesson-video,
.learndash-wrapper #lesson_video,
.learndash-wrapper .wp-video,
.learndash-wrapper .video-wrapper,
.learndash-wrapper embed,
.learndash-wrapper iframe[src*="youtube"],
.learndash-wrapper iframe[src*="vimeo"],
.learndash-wrapper iframe[src*="player"] {
margin-block-start: var(--space-md) !important;
margin-block-end: var(--space-md) !important;
}
.learndash-wrapper .learndash_content_wrap,
.bb-sfwd-aside .learndash-wrapper .learndash_content_wrap {
padding-top: var(--space-md);
}
body.quantum-connect .learndash-wrapper .ld-lesson-video {
margin-block-start: var(--space-lg) !important;
}
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-course-navigation
.ld-lesson-item-preview
a.ld-lesson-item-preview-heading,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-course-navigation
.ld-lesson-item-preview
.ld-expand-button,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-item-list
.ld-item-list-item
.ld-item-details
.ld-certificate-link,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-table-list
.ld-table-list-items
div.ld-table-list-item
a.ld-table-list-item-preview
.ld-topic-title,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.learndash_content_wrap
.ld-table-list-item-quiz
.ld-item-title,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-item-list
.ld-item-list-item
.ld-item-list-item-preview
.ld-item-title,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-item-list
.ld-item-list-item
.ld-item-list-item-preview
.ld-item-components,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
#ld-profile
.ld-item-list
.ld-item-list-items
.ld-item-list-item
.ld-table-list-item-expanded
.ld-icon,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-item-wrapper
a,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-lessions-list
> ol
.lms-sidebar-lesson-progression,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-quizzes-list
> ul
.lms-sidebar-lesson-progression,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
#learndash_course_content
#learndash_lessons
#lessons_list
h4
a,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-table-list
.ld-table-list-header
.ld-table-list-lesson-details,
body:not(.bb-sfwd-aside.bb-dark-theme) .learndash-wrapper .ld-course-navigation .ld-status,
body:not(.bb-sfwd-aside.bb-dark-theme) .learndash-wrapper .ld-breadcrumbs,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.bb-ld-info-bar
.ld-breadcrumbs
.ld-breadcrumbs-segments
span
a,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-item-list
.ld-item-list-item
a.ld-item-name {
color: #000;
}
.learndash-wrapper .ld-expand-button {
color: #ffffff;
}
/* Light mode: force black on lesson/topic/quiz titles and lesson meta */
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-table-list-items
.ld-table-list-item
.ld-table-list-item-quiz
.ld-item-title,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-table-list
.ld-table-list-items
div.ld-table-list-item
a.ld-table-list-item-preview
.ld-topic-title,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.ld-table-list
.ld-table-list-header
.ld-table-list-lesson-details,
body:not(.bb-sfwd-aside.bb-dark-theme) .lms-lesson-item .bb-lesson-topics-count,
body:not(.bb-sfwd-aside.bb-dark-theme) .lms-lesson-item .bb-lesson-sidebar-ld-sep,
body:not(.bb-sfwd-aside.bb-dark-theme) .lms-lesson-item .bb-lesson-quizzes-count {
color: #000;
}
/* Dark mode: white text so lesson/topic/quiz titles are readable */
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.ld-table-list-items
.ld-table-list-item
.ld-table-list-item-quiz
.ld-item-title,
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.ld-table-list
.ld-table-list-items
div.ld-table-list-item
a.ld-table-list-item-preview
.ld-topic-title,
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.ld-table-list
.ld-table-list-header
.ld-table-list-lesson-details,
.bb-sfwd-aside.bb-dark-theme .lms-lesson-item .bb-lesson-topics-count,
.bb-sfwd-aside.bb-dark-theme .lms-lesson-item .bb-lesson-sidebar-ld-sep,
.bb-sfwd-aside.bb-dark-theme .lms-lesson-item .bb-lesson-quizzes-count {
color: #fff;
}
/* Sidebar - course members list */
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-members-list
.course-members-list
a {
color: #000;
}
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-members-list
.course-members-list
a:hover {
color: var(--bb-primary-color);
}
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-members-list
.course-members-list
a {
color: #fff;
}
/* Sidebar - lesson list spacing */
.learndash-wrapper .lms-topic-sidebar-wrapper .lms-lessions-list > ol,
.learndash-wrapper .lms-topic-sidebar-wrapper .lms-course-quizzes-list > ul {
margin-bottom: 0;
}
/* Sidebar - lesson heads */
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-lessions-list
> ol
> li
a.bb-lesson-head,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-quizzes-list
> ul
> li
a.bb-lesson-head {
color: #000;
}
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-lessions-list
> ol
> li
a.bb-lesson-head:hover,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-quizzes-list
> ul
> li
a.bb-lesson-head:hover {
color: var(--bb-primary-color);
}
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-lessions-list
> ol
> li
a.bb-lesson-head,
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-quizzes-list
> ul
> li
a.bb-lesson-head {
color: #fff;
}
/* Sidebar - locked lessons */
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-lessions-list
> ol
> li.lms-is-locked:not(.bb-lms-is-sample)
a,
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-quizzes-list
> ul
> li.lms-is-locked:not(.bb-lms-is-sample)
a {
pointer-events: none;
cursor: default;
}
/* Sidebar - current lesson */
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-lessions-list
> ol
li.current
> .lms-item-wrapper
> a,
body:not(.bb-sfwd-aside.bb-dark-theme)
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-quizzes-list
> ul
li.current
> .lms-item-wrapper
> a {
color: var(--bb-primary-color);
}
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-lessions-list
> ol
li.current
> .lms-item-wrapper
> a,
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-quizzes-list
> ul
li.current
> .lms-item-wrapper
> a {
color: var(--bb-primary-color);
}
/* Sidebar - lesson progression */
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-lessions-list
> ol
.lms-sidebar-lesson-progression,
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-quizzes-list
> ul
.lms-sidebar-lesson-progression {
color: #939597;
font-size: 13px;
margin-right: 30px;
display: flex;
align-items: center;
}
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-lessions-list
> ol
.lms-sidebar-lesson-progression,
.bb-sfwd-aside.bb-dark-theme
.learndash-wrapper
.lms-topic-sidebar-wrapper
.lms-course-quizzes-list
> ul
.lms-sidebar-lesson-progression {
color: #fff;
}
.learndash-complete span.ld-item-title {
color: #5c5c5c;
}
#practitioner-content {
margin-inline: auto;
}
#practitioner-content .entry-content-wrap.primary-entry-content header.entry-header {
padding-block-start: var(--space-sm);
}
.practitioner-card {
display: flex;
align-items: center;
border: 1px solid #e0e0e0;
border-radius: 12px;
margin-bottom: auto;
background: #fff;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.practitioner-card-inner {
display: flex;
width: 100%;
}
.practitioner-image {
flex: 0 0 33.33%;
width: 100%;
height: 100%;
max-width: 16.5rem;
height: 16.5rem; /* Force square container */
padding: var(--space-sm);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-block: auto;
}
.practitioner-image a {
width: 100%;
height: 100%;
display: block;
}
.practitioner-image img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover;
object-position: center;
border-radius: 8px;
transition: transform 0.3s ease-in-out;
}
.practitioner-image img:hover {
transform: scale(1.05);
}
.practitioner-info {
flex: 1 1 auto;
padding: var(--space-md);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-3xs);
}
.practitioner-title {
margin: auto 0;
font-size: var(--font-md);
font-weight: 700;
}
.practitioner-business {
font-size: var(--font-base);
color: #888;
margin-bottom: var(--space-2xs);
}
.practitioner-location {
margin-block: var(--space-4xs);
}
.practitioner-contact {
display: flex;
gap: var(--space-md);
align-items: center;
margin-bottom: auto;
}
.practitioner-phone,
.practitioner-email {
font-size: var(--font-base);
}
.practitioner-view-btn {
background: var(--brand-secondary);
color: var(--white);
padding: var(--space-3xs) var(--space-sm);
border-radius: 6px;
text-decoration: none;
font-weight: 600;
transition: background 0.2s;
}
.practitioner-view-btn:hover {
background: var(--brand-secondary-dark);
color: var(--white);
}
.practitioner-excerpt,
.practitioner-excerpt p {
margin-block-start: 0.125rem;
margin-block-end: 0.375rem;
}
/* =============================================================================
PRACTITIONER GRID LAYOUT - FULL WIDTH SINGLE COLUMN
============================================================================= */
/* Force practitioner grid to be single column with full-width cards */
.post-grid.practitioner-grid#members-dir-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
width: 100%;
}
/* Reset any grid or column layouts for practitioner cards */
.post-grid.practitioner-grid#members-dir-list .bb-grid-cell {
width: 100%;
max-width: none;
flex: none;
margin: 0;
}
/* Ensure practitioner cards are full width */
.post-grid.practitioner-grid .practitioner-card {
width: 100%;
max-width: none;
display: flex;
flex-direction: row;
align-items: stretch;
}
/* Responsive adjustments for practitioner cards */
@media (width < 700px) {
.post-grid.practitioner-grid .practitioner-card {
flex-direction: column;
}
}
/* Override any theme grid layouts specifically for practitioner directory */
.buddypress .post-grid.practitioner-grid,
.directory .post-grid.practitioner-grid {
display: flex;
flex-direction: column;
}
/* Ensure consistent spacing between practitioner cards */
.post-grid.practitioner-grid#members-dir-list > .bb-grid-cell:not(:last-child) {
margin-bottom: var(--space-md);
}
/* Ensure consistent spacing for HTMX loaded content */
#practitioner-content .post-grid.practitioner-grid {
margin-bottom: var(--space-lg);
}
/* Always show practitioner count header */
#practitioner-count-header {
margin-bottom: var(--space-md);
}
/* Consistent spacing for practitioner cards in both static and HTMX content */
.post-grid.practitioner-grid .practitioner-card {
margin-bottom: var(--space-3xs-2xs);
}
.members main#main.site-main.bp-main {
display: flex;
flex-direction: column;
gap: var(--space-md);
width: 100%;
min-width: 100%;
margin-inline: auto;
}
.members main#main.site-main.bp-main .action {
display: none;
}
/* BuddyPress Custom Styling */
#primary.content-area.bs-bp-container main#main.site-main {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
/* Responsive: media range syntax */
@media (width < 700px) {
.practitioner-card,
.practitioner-card-inner {
flex-direction: column;
}
.practitioner-image {
max-width: 100%;
width: 100%;
aspect-ratio: 1;
min-height: auto;
height: auto;
}
.practitioner-info {
padding: var(--space-sm);
}
}
/* Responsive full-width content */
@media (width >=768px) {
.full-width-content {
padding-inline: 0;
}
}
@media (width >=1024px) {
.full-width-content {
padding-inline: 0;
}
}
/* Page header full-width styles */
.page-header--full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding-inline: 2rem;
}
.page-header__content {
max-width: 1200px;
margin-inline: auto;
}
/* Tablet styles - removed redundant spacing/font rules handled by fluid variables */
/* Desktop styles with staggered layout */
@media (width >=64rem) {
.course-columns-container {
padding: var(--space-2xl) var(--space-lg);
}
.course-column {
display: flex;
gap: var(--space-lg);
align-items: center;
margin-bottom: var(--space-2xl);
min-height: 400px;
}
/* Normal layout: image left, content right */
.course-column.normal {
flex-direction: row;
}
.course-column.normal .course-image {
flex: 1;
order: 1;
}
.course-column.normal .course-content-wrapper {
flex: 1;
order: 2;
}
/* Staggered layout: image right, content left */
.course-column.staggered {
flex-direction: row;
}
.course-column.staggered .course-image {
flex: 1;
order: 2;
}
.course-column.staggered .course-content-wrapper {
flex: 1;
order: 1;
}
.course-image {
height: 400px;
border-radius: 8px;
overflow: hidden;
}
.course-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.course-content-wrapper {
padding: var(--space-lg);
height: fit-content;
}
.course-heading {
font-size: var(--font-lg);
}
.course-subheading {
font-size: var(--font-md);
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
/* Desktop hover effects - only show subheading on hover */
.course-column:hover .course-subheading {
opacity: 1;
transform: translateY(0);
}
.course-column:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.course-column:hover .course-image img {
transform: scale(1.05);
}
}
/* Large desktop styles - removed redundant rules handled by fluid variables */
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.course-column,
.course-image img,
.course-subheading,
.course-link {
transition: none;
}
.course-column:hover {
transform: none;
}
.course-column:hover .course-image img {
transform: none;
}
.course-link:hover {
transform: none;
}
}
/* Focus styles for keyboard navigation */
.course-link:focus {
outline: 2px solid #3498db;
outline-offset: 2px;
}
/* Print styles */
@media print {
.course-column {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.course-subheading {
opacity: 1;
transform: none;
}
}
/* ========================================
BLOG POST HOVER EFFECTS
Inspired by course card design with hidden titles on large screens
======================================== */
/* Blog post card hover effects - only on large screens */
@media (width >=64rem) {
.post-grid .bb-grid-cell article {
transition: all 0.3s ease-in-out;
}
/* Hover effects for the post inner wrap */
.post-grid .bb-grid-cell .post-inner-wrap:hover {
transform: scale(1.025);
transition: transform 0.4s ease-in-out;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}
/* Image scale effect on hover */
.post-grid .bb-grid-cell .post-inner-wrap:hover .entry-media img,
.post-grid .bb-grid-cell .post-inner-wrap:hover .ratio-wrap img {
transform: scale(1.05);
}
/* Ensure images have transition */
.post-grid .bb-grid-cell .entry-media img,
.post-grid .bb-grid-cell .ratio-wrap img {
transition: transform 0.3s ease;
}
/* Make sure post inner wrap has overflow hidden for image scaling */
.post-grid .bb-grid-cell .post-inner-wrap {
overflow: hidden;
border-radius: 12px;
transition: box-shadow 0.3s ease;
}
/* Enhanced styling for better visual hierarchy */
.post-grid .bb-grid-cell .entry-content-wrap {
position: relative;
z-index: 2;
}
/* Keep meta information always visible but subtle */
.post-grid .bb-grid-cell .entry-meta {
opacity: 0.8;
transition: opacity 0.3s ease;
}
.post-grid .bb-grid-cell:hover .entry-meta {
opacity: 1;
}
}
/* ========================================
COMPLIANZ PLACEHOLDER STYLING
Style cookie placeholders as centered images
======================================== */
.cmplz-placeholder-2,
.cmplz-blocked-content-container {
display: block;
width: 100%;
max-height: 323px;
overflow: hidden;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 8px;
}
.cmplz-placeholder-2[data-placeholder-image] {
background-image: attr(data-placeholder-image url);
}
.cmplz-placeholder-element,
.cmplz-iframe {
display: none;
}
.cmplz-blocked-content-notice {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: var(--space-sm) var(--space-md);
border-radius: 6px;
border: none;
font-size: var(--font-sm);
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 2;
}
.cmplz-blocked-content-notice:hover {
background: rgba(0, 0, 0, 0.9);
}
/* Fallback for when background-image attr doesn't work */
.cmplz-placeholder-2::before {
content: "";
display: block;
width: 100%;
height: 323px;
background-image: var(
--placeholder-bg,
url('data:image/svg+xml,')
);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.bb-open-media-theatre.entry-img {
margin-block-start: auto;
margin-block-end: var(--space-sm);
}
/* ========================================
MEDIA QUERIES
Organized from smallest to largest breakpoints
======================================== */
/* Mobile-first: up to 48rem (768px) */
@media (width <=48rem) {
/* Latest blog posts flex */
#latest-blog .posts-grid {
flex-direction: column;
gap: var(--space-md);
}
#latest-blog .posts-grid > * {
flex: none;
min-width: auto;
}
/* FAQ responsive adjustments */
.faq-tabs-nav {
flex-direction: column;
}
.faq-tab-button {
text-align: left;
border-bottom: none;
border-left: 3px solid transparent;
padding-left: var(--space-md);
}
.faq-tab-button.active {
border-left-color: var(--brand-primary);
border-bottom-color: transparent;
}
.faq-container {
padding: var(--space-sm);
}
.faq-item {
padding: var(--space-md);
}
}
/* Tablet: 48rem (768px) and up */
@media (min-width: 768px) {
.duo-grid {
flex-direction: row;
}
.duo-grid > * {
flex: 1;
}
.duo-grid.ratio-1-2 > :first-child {
flex: 1;
}
.duo-grid.ratio-1-2 > :last-child {
flex: 2;
}
.grid-col-text {
padding-block-start: 1rem;
padding-inline: var(--space-md-lg);
}
}
@media (width >=48rem) {
/* Testimonials flex */
.testimonials-grid {
flex-direction: row;
flex-wrap: wrap;
}
.testimonials-grid .testimonial-item {
flex: 1 1 300px;
min-width: 300px;
}
/* Home gray section */
.home-gray-grid {
flex-direction: row;
}
.home-gray-image {
flex: 2;
}
.home-gray-text {
flex: 3;
}
}
@media (width >=48rem) and (width <=64rem) {
/* Latest blog posts flex - tablet */
#latest-blog .posts-grid {
flex-direction: row;
flex-wrap: wrap;
}
#latest-blog .posts-grid > * {
flex: 1 1 calc(50% - var(--space-lg) / 2);
min-width: 280px;
}
}
/* Desktop: larger than 48rem (768px) */
@media (width > 48rem) {
#home-intro {
margin-top: 0;
}
#home-intro .container {
margin: auto auto;
font-size: 140%;
padding-block: 1rem;
padding-inline: var(--space-md);
p {
max-width: 50rem;
}
}
}
/* Large desktop: larger than 64rem (1024px) */
@media (width > 64rem) {
/* Latest blog posts flex - desktop */
#latest-blog .posts-grid {
flex-direction: row;
flex-wrap: wrap;
}
#latest-blog .posts-grid > * {
flex: 1 1 calc(25% - var(--space-lg) * 3 / 4);
min-width: 280px;
}
}
/* Support for dynamic viewport units */
@supports (min-height: 50vh) {
#home-intro {
min-height: 50dvh;
}
}
@supports (min-height: 40vh) {
.page-template-page-qh-default article header.entry-header:not(.profile-loop-header),
.page-template-page-faq article header.entry-header,
.faq article header.entry-header,
.our-courses article header.entry-header,
.get-ready article header.entry-header {
min-height: 40dvh;
}
}
/* =============================================================================
BUDDYPRESS MEMBERS DIRECTORY HEADER - FULL WIDTH
============================================================================= */
/* BuddyPress Members Directory Header - Full Width Specific Styles */
.buddypress #practitioner-header {
width: 100vw;
margin-left: calc(-50vw + 50%);
padding-inline: 0; /* Remove side padding since we're full width */
margin-block-start: auto;
margin-block-end: var(--space-lg);
}
.buddypress #practitioner-header h1.practitioner-title {
padding-block: var(--space-lg-2xl);
}
.buddypress #practitioner-header:after {
opacity: 0.3;
}
.buddypress #practitioner-header .container {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-sm);
position: relative;
z-index: 2;
}
/* =============================================================================
BUDDYPRESS MEMBERS DIRECTORY LAYOUT - CONTAINER
============================================================================= */
/* New approach: Use our custom wrapper for members directory layout */
.qh-members-layout-wrapper {
display: flex;
flex-wrap: nowrap;
gap: var(--space-lg);
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-sm);
align-items: flex-start;
}
.qh-members-layout-wrapper #primary {
flex: 2;
min-width: 0;
width: auto;
float: none;
}
.qh-members-layout-wrapper #secondary {
flex: 1;
min-width: 280px;
width: auto;
float: none;
position: static;
clear: none;
}
/* Old CSS removed - now using custom wrapper approach */
/* Reset any constraints on #primary since #content now handles the flex */
/* .buddypress #primary - styling handled by flex container */
/* Remove container constraints from members-directory-wrapper since #content handles it now */
/* .buddypress .members-directory-wrapper - styling handled by flex container */
/* Responsive adjustments for full-width header and layout */
@media (width <= 768px) {
.buddypress #practitioner-header {
margin-block-start: var(--space-lg);
padding-block: var(--space-sm);
}
.buddypress #practitioner-header .container {
padding: 0 var(--space-4xs);
}
/* Stack layout on mobile - sidebar goes full width below content */
.qh-members-layout-wrapper {
flex-direction: column;
padding: 0 var(--space-4xs);
gap: var(--space-md);
}
.qh-members-layout-wrapper #primary,
.qh-members-layout-wrapper #secondary {
flex: none;
width: 100%;
min-width: auto;
}
}
/* =============================================================================
BUDDYPRESS MEMBER PROFILE CUSTOMIZATION
============================================================================= */
/* Single Member Profile Page Styling */
.buddypress.bp-user #item-header,
.single-item.members #item-header {
/* Member header area - contains avatar, name, cover image */
position: relative;
margin-bottom: var(--space-lg);
padding-inline: inherit;
}
/* Removed .single-item.members .users-header.single-headers styling as requested */
.single-item.members .bp-wrap {
/* Main content wrapper */
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.single-item.members .bb-profile-grid {
/* Profile content flex */
display: flex;
flex-direction: column;
gap: var(--space-lg);
margin-top: 2rem;
}
.single-item.members #item-body {
/* Main content area */
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: var(--space-lg);
}
.single-item.members .item-body-inner {
/* Inner content wrapper */
min-height: 400px;
}
/* Member Navigation Styling */
.single-item.members #object-nav {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: var(--space-sm);
margin-bottom: var(--space-lg);
}
.single-item.members #object-nav ul li a {
padding: var(--space-xs) 1.5rem;
border-radius: 6px;
transition: all 0.3s ease;
text-decoration: none;
}
.single-item.members #object-nav ul li a:hover,
.single-item.members #object-nav ul li.current a {
background: #667eea;
color: #fff;
transform: translateY(-2px);
}
/* Responsive Design using modern media range syntax */
@media (width >= 768px) {
.single-item.members .bb-profile-grid.bb-grid {
flex-direction: row;
}
/* Always let #item-body grow to fill available space */
.single-item.members .bb-profile-grid.bb-grid > #item-body {
flex: 1;
min-width: 0;
}
/* Only apply fixed sidebar width when a sidebar sibling exists */
.single-item.members .bb-profile-grid.bb-grid > #item-body ~ * {
flex: 0 0 300px;
min-width: 0;
}
.single-item.members .bp-wrap {
padding: 0 2rem;
}
}
@media (width <= 767px) {
.single-item.members .bp-wrap {
padding: 0 1rem;
}
.single-item.members #item-body {
padding: var(--space-sm);
}
.single-item.members #object-nav ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
}
/* Profile Activity Feed Styling */
.single-item.members #activity-stream .activity-list {
background: transparent;
}
.single-item.members #activity-stream .activity-list .activity-item {
background: #fff;
border-radius: 8px;
margin-bottom: var(--space-md);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: none;
}
/* Profile Sidebar Widget Styling */
.single-item.members #secondary.widget-area {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: var(--space-md);
}
.single-item.members #secondary .widget {
margin-bottom: var(--space-lg);
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
.single-item.members #secondary .widget:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Custom Hook-Based Content Styling */
.qh-member-custom-header,
.qh-member-custom-after-header,
.qh-member-profile-custom {
background: var(--brand-lighter-gray);
padding: var(--space-md);
margin: 1rem 0;
border-radius: 8px;
border-left: 4px solid #667eea;
}
.qh-member-custom-header h3,
.qh-member-custom-after-header h3,
.qh-member-profile-custom h3 {
margin-top: 0;
color: #667eea;
font-weight: 600;
}
/* Make sure BuddyPress body class targeting works */
.buddypress.bp-user .bp-wrap,
.single-item.members .bp-wrap {
/* Main content wrapper */
max-width: 1200px;
margin: 0 auto;
padding: inherit;
}
/* Removed .users-header.single-headers styling as requested */
/* Special margin adjustments for specific page templates */
.page-template-page-practicioners header#practitioner-header {
margin-block-start: 0;
margin-block-end: auto;
}
.page-template-page-practicioners #content.site-content {
margin-block-start: var(--space-xs);
padding-block-start: var(--space-xs);
}
/* QUANTUM PRACTITIONERS FLEX LAYOUT - RESPONSIVE */
/* Quantum Practitioners Flex Container */
#quantum-practitioners-flex-container.quantum-flex-layout-2024 {
display: flex;
flex-direction: column;
gap: var(--space-lg);
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-sm);
}
/* Force row layout on larger screens - immediate rule */
.page-template-page-practicioners #quantum-practitioners-flex-container.quantum-flex-layout-2024 {
flex-direction: column;
}
/* Desktop layout - force side by side */
body.page-template-page-practicioners
#quantum-practitioners-flex-container.quantum-flex-layout-2024 {
flex-direction: row;
align-items: flex-start;
gap: var(--space-sm-md);
}
/* Desktop flex sizing */
body.page-template-page-practicioners #quantum-practitioners-flex-container .quantum-main-content {
flex: 0 0 66%;
width: 66%;
max-width: 66%;
}
body.page-template-page-practicioners #quantum-practitioners-sidebar.quantum-sidebar-2024 {
flex: 0 0 33%;
width: 33%;
max-width: 33%;
margin-bottom: var(--space-md);
}
/* Mobile override - force stacked */
@media screen and (max-width: 767px) {
body.page-template-page-practicioners
#quantum-practitioners-flex-container.quantum-flex-layout-2024 {
flex-direction: column;
}
}
@media screen and (min-width: 768px) {
.page-template-page-practicioners
#quantum-practitioners-flex-container.quantum-flex-layout-2024 {
flex-direction: row;
}
}
/* Override BuddyBoss container constraints for practitioners page */
#quantum-practitioners-flex-container .quantum-main-content.bs-bp-container {
max-width: none;
width: 100%;
margin: 0;
padding: 0;
}
/* Main content area */
#quantum-practitioners-flex-container .quantum-main-content {
flex: 1;
width: 100%;
min-width: 0; /* Prevents flex items from overflowing */
}
/* Ensure main content has proper padding for its inner content */
#quantum-practitioners-flex-container .quantum-main-content main {
padding: 0 1rem;
}
/* Sidebar area */
#quantum-practitioners-sidebar.quantum-sidebar-2024 {
flex: 1;
width: 100%;
background: #fff;
border-radius: 12px;
padding: var(--space-lg);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid var(--brand-light-gray);
}
/* Sidebar styling */
#quantum-practitioners-sidebar h2 {
font-size: var(--font-md-l);
}
#quantum-practitioners-sidebar .filter-wrap {
margin-bottom: var(--space-sm);
padding: var(--space-sm) var(--space-xs);
background: var(--brand-lighter-gray);
border-radius: none;
border-left: 4px solid var(--brand-secondary);
}
#quantum-practitioners-sidebar .filter-wrap label {
font-weight: 600;
color: var(--brand-secondary);
margin-bottom: var(--space-xs);
display: block;
}
#quantum-practitioners-sidebar .filter-wrap:last-child {
margin-bottom: 0;
}
#location-permission-request {
display: block;
text-align: left;
padding: var(--space-md) 0;
margin: var(--space-sm) 0;
}
#location-permission-request .inner-wrap {
max-width: none;
margin: 0;
}
#location-permission-request .inner-wrap p {
font-size: var(--font-base);
}
#location-permission-request .inner-wrap button#allow-location-btn,
#location-permission-request .inner-wrap button#skip-location-btn {
color: var(--white);
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
#location-permission-request .inner-wrap button#allow-location-btn {
background: var(--brand-green);
margin-right: var(--space-4xs);
}
#location-permission-request .inner-wrap button#allow-location-btn:hover,
#location-permission-request .inner-wrap button#allow-location-btn:focus {
background: var(--brand-green-dark);
}
#location-permission-request .inner-wrap button#skip-location-btn {
background: var(--brand-primary);
}
#location-permission-request .inner-wrap button#skip-location-btn:hover,
#location-permission-request .inner-wrap button#skip-location-btn:focus {
background: var(--brand-primary-dark);
}
/* Large screens: Side-by-side layout */
@media screen and (min-width: 768px) {
.page-template-page-practicioners
#quantum-practitioners-flex-container.quantum-flex-layout-2024 {
flex-direction: row;
align-items: flex-start;
gap: var(--space-xl);
display: flex;
}
/* Main content: 66% width */
.page-template-page-practicioners #quantum-practitioners-flex-container .quantum-main-content {
flex: 0 0 66%;
width: 66%;
max-width: 66%;
}
/* Sidebar: 33% width */
.page-template-page-practicioners #quantum-practitioners-sidebar.quantum-sidebar-2024 {
flex: 0 0 33%;
width: 33%;
max-width: 33%;
position: sticky;
top: 2rem;
height: auto;
display: block;
visibility: visible;
}
.page-template-page-practicioners #quantum-practitioners-flex-container {
padding: 0 2rem;
}
}
/* Extra large screens: Increased container width */
@media (width >= 1200px) {
#quantum-practitioners-flex-container.quantum-flex-layout-2024 {
max-width: 1280px;
gap: var(--space-m);
}
#quantum-practitioners-flex-container {
padding: 0 3rem;
}
}
/* Hide sidebar widgets on blog/home */
.home #secondary,
.blog #secondary {
display: none;
}
/* Mobile refinements */
@media (width <= 767px) {
#quantum-practitioners-flex-container.quantum-flex-layout-2024 {
padding: 0 1rem;
gap: var(--space-md);
}
/* Full-width main content on mobile */
body.page-template-page-practicioners
#quantum-practitioners-flex-container .quantum-main-content {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
}
/* Full-width sidebar on mobile */
body.page-template-page-practicioners
#quantum-practitioners-flex-container
#quantum-practitioners-sidebar.quantum-sidebar-2024 {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
order: -1;
margin-bottom: var(--space-sm);
margin-top: 0;
position: sticky;
top: 60px;
z-index: 10;
}
#quantum-practitioners-flex-container .quantum-main-content main {
padding: 0;
}
.post-grid.practitioner-grid .practitioner-card {
border-radius: 8px;
}
.post-grid.practitioner-grid .practitioner-card {
margin-bottom: 0;
}
.pag-count {
display: none;
}
#pag-bottom.pagination .pagination-links {
justify-content: center;
}
#quantum-practitioners-sidebar.quantum-sidebar-2024 {
padding: var(--space-md);
}
#quantum-practitioners-sidebar h2 {
font-size: var(--font-md);
}
}
/* PRACTITIONER SEARCH SIDEBAR STYLING */
.practitioner-search-sidebar h2 {
font-size: var(--font-md);
}
.practitioner-search-sidebar hr {
margin-bottom: var(--space-md-lg);
}
.practitioner-search-sidebar .filter-wrap {
margin-bottom: var(--space-lg);
padding: var(--space-sm);
background: var(--brand-lighter-gray);
border-left: 4px solid var(--brand-secondary);
}
.practitioner-search-sidebar .filter-wrap label {
font-weight: 600;
color: var(--brand-secondary);
margin-bottom: var(--space-xs);
display: block;
}
.practitioner-search-sidebar .filter-wrap:last-child {
margin-bottom: 0;
}
.practitioner-search-sidebar .filter-select,
.practitioner-search-sidebar .filter-input {
width: 100%;
padding: var(--space-3xs);
border: 2px solid var(--brand-light-gray);
border-radius: 6px;
font-size: var(--font-sm);
font-weight: 400;
line-height: 1.4;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
background-color: #fff;
cursor: pointer;
}
.practitioner-search-sidebar .filter-select {
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right var(--space-3xs) center;
background-size: 0.875rem;
padding-right: calc(var(--space-md) + var(--space-3xs));
min-height: 2.25rem;
}
.practitioner-search-sidebar .filter-select option {
font-size: var(--font-sm);
font-weight: 400;
line-height: 1.4;
padding: var(--space-4xs);
background-color: #fff;
color: #333;
}
.practitioner-search-sidebar .filter-select:focus,
.practitioner-search-sidebar .filter-input:focus {
outline: none;
border-color: var(--brand-secondary);
box-shadow: 0 0 0 3px rgba(70, 87, 160, 0.1);
}
.practitioner-search-sidebar .filter-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.practitioner-search-sidebar .search-btn,
.practitioner-search-sidebar .clear-btn {
flex: 1;
padding: var(--space-xs) 1.5rem;
border-radius: 6px;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
}
.practitioner-search-sidebar .search-btn {
background: var(--brand-secondary);
color: white;
border-color: var(--brand-secondary);
}
.practitioner-search-sidebar .search-btn:hover {
background: var(--brand-secondary-dark);
border-color: var(--brand-secondary-dark);
transform: translateY(-1px);
}
.practitioner-search-sidebar .clear-btn {
background: transparent;
color: var(--brand-secondary);
border-color: var(--brand-secondary);
}
.practitioner-search-sidebar .clear-btn:hover {
background: var(--brand-secondary);
color: white;
transform: translateY(-1px);
}
.practitioner-search-sidebar #loading-indicator {
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: var(--space-sm);
padding: var(--space-sm);
background: var(--brand-lighter-gray);
border-radius: 6px;
transition: all 0.3s ease;
}
/* Show loading indicator when HTMX request is active */
.practitioner-search-sidebar #loading-indicator.htmx-request,
.practitioner-search-sidebar .htmx-request #loading-indicator,
body.htmx-request .practitioner-search-sidebar #loading-indicator {
display: flex !important;
opacity: 1 !important;
}
/* Main content loading spinner */
#loading-spinner {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin: var(--space-lg) 0;
padding: var(--space-lg);
background: var(--brand-lighter-gray);
border-radius: 8px;
text-align: center;
transition: all 0.3s ease;
}
#loading-spinner.htmx-request,
.htmx-request #loading-spinner,
body.htmx-request #loading-spinner {
display: flex !important;
opacity: 1 !important;
}
#loading-spinner .loading-spinner-img {
width: 32px;
height: 32px;
flex-shrink: 0;
}
#loading-spinner span {
font-size: var(--font-base);
color: var(--brand-secondary);
font-weight: 500;
}
.practitioner-search-sidebar .loading-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--brand-light-gray);
border-top: 2px solid var(--brand-secondary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.practitioner-search-sidebar .loading-spinner-img {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.practitioner-search-sidebar .loading-spinner-svg {
width: 24px;
height: 24px;
color: var(--brand-secondary);
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* No Practitioners Found Styles */
.no-practitioners-found {
font-size: calc(var(--font-base) * 1.1);
padding: 0 0 var(--space-xl);
margin: var(--space-3xs-2xs) 0;
}
.no-practitioners-found p {
margin-bottom: var(--space-sm);
color: #666;
}
.no-practitioners-found p:last-child {
margin-bottom: 0;
}
.practitioners-error {
text-align: center;
padding: var(--space-lg);
background: #fee;
border: 1px solid #fcc;
border-radius: 8px;
margin: var(--space-lg) 0;
color: #c33;
}
.practitioners-error p {
margin: 0;
}
/* Load More Button Styles */
.load-more-members {
text-align: center;
margin: var(--space-lg) 0;
}
.load-more-members .button {
padding: var(--space-3xs) var(--space-sm);
font-size: 16px;
border-radius: 6px;
transition: all 0.2s ease;
background: var(--brand-secondary);
color: white;
border: 2px solid var(--brand-secondary);
text-decoration: none;
}
.load-more-members .button:hover {
transform: translateY(-1px);
background: var(--brand-secondary-dark);
border-color: var(--brand-secondary-dark);
color: white;
}
/* =============================================================================
GEOLOCATION CONTROLS
============================================================================= */
.location-controls {
margin: var(--space-md) 0;
text-align: center;
}
.location-btn {
background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
color: white;
border: none;
padding: var(--space-xs) var(--space-md);
border-radius: 8px;
font-size: var(--font-sm);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: inline-flex;
align-items: center;
gap: var(--space-4xs);
}
.location-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
}
.location-btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.location-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
#location-status {
margin-top: var(--space-xs);
min-height: 1.2em;
}
#location-status small {
font-size: var(--font-xs);
color: #666;
}
/* Distance display in practitioner cards */
.practitioner-distance {
font-size: var(--font-xs);
color: var(--brand-secondary);
font-weight: 500;
margin-top: var(--space-4xs);
}
.practitioner-distance::before {
content: "📍 ";
margin-right: var(--space-5xs);
}
/* Audio Tab Styles */
.audio-tab-content {
padding: 1.5rem;
background: #f9f9f9;
border-radius: 8px;
margin-top: 1rem;
}
.audio-player {
margin-bottom: 1rem;
}
.audio-controls {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
/* Responsive Audio Player */
@media (width <= 768px) {
.audio-tab-content {
padding: 1rem;
}
.audio-controls {
flex-direction: column;
gap: 0.5rem;
}
}
/* Video Tab Styles */
.video-tab-content {
padding: 1.5rem;
background: #f9f9f9;
border-radius: 8px;
margin-top: 1rem;
}
.video-player {
margin-bottom: 1rem;
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.video-player iframe,
.video-player video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
}
.video-controls {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
.video .bb-media-container {
background: transparent;
padding: 0;
margin: auto;
border: none;
}
.video .bb-media-container h2.bb-video-title {
margin-block-end: var(--space-2xs);
}
.video .bb-media-container .bb-video-description {
font-size: var(--font-normal);
padding-block-end: var(--space-sm);
}
/* Responsive Video Player */
@media (width <= 768px) {
.video-tab-content {
padding: 1rem;
}
.video-controls {
flex-direction: column;
gap: 0.5rem;
}
}
/* =============================================================================
MEMBER MODALITIES DISPLAY ON PROFILE PAGES
============================================================================= */
.member-modalities-section {
background: #fff;
border-radius: 12px;
padding: var(--space-lg);
margin: var(--space-lg) 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid var(--brand-light-gray);
}
.member-modalities-container {
max-width: 1200px;
margin: 0 auto;
}
.modalities-title {
font-size: var(--font-md);
font-weight: 600;
color: var(--brand-primary);
margin: 0 0 var(--space-md) 0;
text-align: center;
}
.modalities-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
justify-content: center;
align-items: center;
}
.modality-badge {
display: inline-block;
background: linear-gradient(135deg, var(--brand-secondary), var(--brand-secondary-dark));
color: white;
padding: var(--space-3xs) var(--space-sm);
border-radius: 20px;
font-size: var(--font-sm);
font-weight: 500;
text-transform: capitalize;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: default;
}
.modality-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
}
/* Responsive adjustments for modalities */
@media (width <= 768px) {
.member-modalities-section {
padding: var(--space-md);
margin: var(--space-md) 0;
}
.modalities-list {
gap: var(--space-4xs);
}
.modality-badge {
padding: var(--space-4xs) var(--space-xs);
font-size: var(--font-xs);
}
}
.my-profile .generic-button a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
background: var(--brand-primary);
margin-block: auto !important;
color: #fff;
font-size: var(--font-sm);
font-weight: 500;
text-transform: capitalize;
text-decoration: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#send-private-message .generic-button a.send-message,
#user_switching_switch_to .generic-button a {
transition: all 0.3s ease-in;
}
#send-private-message .generic-button a.send-message:hover,
#user_switching_switch_to .generic-button a:hover {
background: var(--brand-secondary-dark);
}
.generic-button a:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
background: var(--brand-primary-dark);
}
.generic-button a i {
position: relative;
top: 1.5px;
margin-block: auto;
align-self: center;
}
/* =============================================================================
MEMBER HEADER CONTACT BUTTON
============================================================================= */
.member-title-wrap {
width: 100%;
flex-wrap: wrap;
gap: var(--space-xs);
}
.member-header-contact-btn {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
margin-block: 0.6rem;
margin-left: auto;
padding: 0.5rem 1rem;
background: var(--brand-primary);
color: var(--white);
font-size: var(--font-sm);
font-weight: 500;
text-decoration: none;
border-radius: 10px;
transition: all 0.2s ease;
}
.member-header-contact-btn:hover {
background: var(--brand-primary-dark);
color: var(--white);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.member-header-contact-btn i {
font-size: 1rem;
}
.mp_wrapper.mp_login_form #wp-submit:hover {
background: var(--brand-secondary);
color: var(--white);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Header flex: name on left, actions on right, all inside the header box */
#item-header-cover-image #item-header-content > .flex {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
}
#item-header-cover-image #item-header-content > .flex > .bb-user-content-wrap {
flex: 1 1 0% !important;
min-width: 0 !important;
}
#item-header-cover-image #item-header-content > .flex > .member-header-actions-wrap {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 1.5rem 0 auto !important;
max-width: 100% !important;
}
#item-header-cover-image .member-header-actions-wrap .member-header-actions {
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
align-items: center !important;
margin: auto 0 !important;
}
.bb_more_options.header-dropdown.action {
display: none !important;
}
/* Hide the duplicate Contact button in member header actions */
.member-header-actions #contact_practitioner,
.member-header-actions .contact-practitioner-link,
#contact-practitioner-button {
display: none;
}
/* Write Review button — unify with Send Message / Switch To CTA siblings.
Uses BuddyBoss core's "0 padding-block + line-height equals height" pattern
for vertical centering instead of 8px padding + line-height:1.
The button is rendered in TWO possible locations:
1. Inside .member-header-actions > .generic-button (logged-in members)
2. Inside .member-title-wrap directly (logged-out — alongside Contact button)
Selector covers both so the styling stays consistent regardless of which
header layout is rendered. The .write-review-btn class is unique enough to
anchor on; the prefix selectors give the specificity to beat BuddyBoss core.
PITFALL: this