/* ========================================================================== PAA Course Surface — brings the course root page onto the same system as the lesson viewer. Ships as a PAIR with paa-lesson-surface.css; neither goes live without the other. Scoped to body.single-sfwd-courses throughout. The course page is a DIFFERENT template from the lesson page: it is NOT in focus mode, and has no .learndash_content_wrap and no .bb-lms-header. --------------------------------------------------------------------------- MEASURED DOM (staging, 1920px, logged-in student, 2026-07-25). Every selector below was confirmed present before a rule was written against it. The previous revision of this file was written against guessed classes and four of its rules matched nothing at all: .bb-course-banner NOT PRESENT (real class: .bb-learndash-banner) .bb-sidebar-block NOT PRESENT (real: .widget.bb-enroll-widget) .bb-course-members-list NOT PRESENT (real: span.bb-course-members) .ld-button NOT PRESENT on the enrolled view (only #btn-join, and only when NOT enrolled) Real structure: .bb-vw-container.bb-learndash-banner 1920x361 full-bleed └ ::before white @ .4 over a black gradient .bb-course-banner-info.container 1200 max-width main#main.site-main 1180 <- same rail as the lesson page .bb-learndash-content-wrap 820 .ld-item-list 714, 7 rows .bb-single-course-sidebar 380 @ x=1180 .widget.bb-enroll-widget .thumbnail-container navy var(--bb-cover-image-background-color) .bb-course-preview-content grey var(--bb-content-background-color) #comments 700 max-width <- 480px of dead rail ========================================================================== */ body.single-sfwd-courses { /* Same tokens as paa-lesson-surface.css. Kept as a literal copy rather than a shared file because the two sheets load independently and must each stand alone if the other is ever dequeued. */ --paa-surface:#0b0907; --paa-raise:#141009; --paa-line:#2b2118; --paa-text:#f2ece2; --paa-muted:#8a8175; --paa-gold:#d8bd72; --paa-gold-dim:#8d7c4c; --paa-verd:#6fa279; --paa-ease:cubic-bezier(.22,1,.36,1); /* BuddyBoss theme variables, re-pointed for this page only. --bb-cover-image-background-color ships as rgb(3,3,26), a navy that fights the gold-and-leather palette. It is read by BOTH .bb-learndash-banner and .thumbnail-container, so re-pointing the variable fixes both at the source instead of chasing each selector. Scoped to this body class, so no other template sees the change. */ --bb-cover-image-background-color:#141009; } /* -------------------------------------------------------------------------- 0. CHROME: site header + footer off, unified topbar on. `.header` and `.footer` are CHILD-theme components (components/header.php, components/footer.php), not parent-theme markup, so hiding them here is not exposed to a BuddyBoss update. Rendered by paa_surface_topbar() on wp_body_open. Identical block in paa-lesson-surface.css so the two templates cannot drift. -------------------------------------------------------------------------- */ body.single-sfwd-courses > #page.site > .header, body.single-sfwd-courses > #page.site > .footer { display: none !important; } body.single-sfwd-courses .paa-surface-topbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; padding: 1.1rem 20px .7rem; border-bottom: 1px solid var(--paa-line); } body.single-sfwd-courses .paa-tb-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .82rem; color: var(--paa-muted); } body.single-sfwd-courses .paa-tb-crumbs a { color: var(--paa-text); text-decoration: none; } body.single-sfwd-courses .paa-tb-crumbs a:hover { color: var(--paa-gold); } body.single-sfwd-courses .paa-tb-logo { display: inline-flex; margin-right: .25rem; } body.single-sfwd-courses .paa-tb-logo img { width: 28px; height: 28px; object-fit: contain; } body.single-sfwd-courses .paa-tb-sep { color: var(--paa-gold-dim); } body.single-sfwd-courses .paa-tb-now { color: var(--paa-muted); } body.single-sfwd-courses .paa-tb-actions { margin-left: auto; } /* -------------------------------------------------------------------------- 1. Warm the surface. -------------------------------------------------------------------------- */ body.single-sfwd-courses, body.single-sfwd-courses .site-content, body.single-sfwd-courses #content { background-color: var(--paa-surface); } body.single-sfwd-courses .bb-learndash-banner { background-color: var(--paa-raise); background-image: radial-gradient(900px 340px at 22% -20%, #1d160f 0, transparent 62%); border-bottom: 1px solid var(--paa-line); } /* THE GREY BANNER. learndash.min.css paints .bb-learndash-banner::before with background-color: var(--bb-headings-color) at opacity .4 — a 40% WHITE plate across the whole banner. It is designed to sit over a course cover photo; with no photo it simply greys out whatever is underneath, which is why the warm background-color above looked like it had not applied. Keep the vertical darkening gradient (it earns the title contrast) and drop the white. */ body.single-sfwd-courses .bb-learndash-banner::before { background-color: transparent; background-image: linear-gradient(-180deg, rgb(11 9 7 / 0) 0%, rgb(11 9 7 / .85) 100%); opacity: 1; } /* -------------------------------------------------------------------------- 2. Type: match the lesson viewer's scale rather than a fixed 48px. NOTE: clamp() math needs whitespace around the operator. `1rem+1.5vw` is a parse error and silently drops the whole declaration. -------------------------------------------------------------------------- */ body.single-sfwd-courses h1.entry-title { font-size: clamp(1.9rem, 1.2rem + 1.7vw, 3rem); line-height: 1.1; color: #fbf6ec; text-wrap: balance; } body.single-sfwd-courses .bb-course-banner-info p, body.single-sfwd-courses .ld-tab-content p { color: #ddd5c9; } /* "Responses" is a section heading, so it gets the lesson panel's eyebrow treatment — but at 11px it sat SMALLER than the comment timestamps beneath it, which inverts the hierarchy. Kept as an eyebrow, sized above its own body. */ body.single-sfwd-courses .comments-area .comments-title { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--paa-muted); } /* -------------------------------------------------------------------------- 3. The lesson list as the forge track. SPECIFICITY NOTE: learndash.min.css sets .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview { background: rgba(146,164,183,0.05) } which is (0,4,0) — a cool blue-grey wash laid OVER the row plate. The previous revision styled only .ld-item-list-item at (0,3,1) and lost, which is why the rows still read flat blue-grey. Match the theme's own depth. -------------------------------------------------------------------------- */ body.single-sfwd-courses .ld-item-list .ld-item-list-item { background: var(--paa-raise); border: 1px solid var(--paa-line); border-radius: 3px; margin-bottom: .5rem; transition: border-color .3s var(--paa-ease), background .3s var(--paa-ease); } /* SHORT SELECTOR + !important ON PURPOSE, not laziness. The theme rule is .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview at (0,4,0). Beating it by copying that chain works, but it then depends on FOUR parent-theme class names staying in that exact nesting. BuddyBoss rewrites this stylesheet on every release, so any one of them moving silently un-styles the page with no error. One class name plus !important depends on ONE name surviving, which is a much smaller bet. These rules are the outermost layer (child theme, page-scoped), so nothing legitimate needs to override them later. */ body.single-sfwd-courses .ld-item-list-item-preview { background: transparent !important; border-radius: 3px; border-bottom: 0; } body.single-sfwd-courses .ld-item-list .ld-item-list-item:hover { border-color: var(--paa-gold-dim); background: #17120c; } body.single-sfwd-courses .ld-item-list .ld-item-list-item a { color: var(--paa-text); } /* Completed rows read as finished, not cancelled. The theme puts line-through on an UNCLASSED inside .ld-item-title, so setting text-decoration on .ld-item-title itself changes nothing (measured: .ld-item-title already computed text-decoration-line:none while the row still rendered struck through). The span is the element that has to be reached. Deliberate change, not an oversight: strike-through on a list of purchased lessons reads as "withdrawn / no longer available". The row already carries a completion check icon AND a muted title, which say "done" without that implication. The same treatment exists in the lesson-page sidebar and should follow in the same promotion. */ body.single-sfwd-courses .ld-item-list-item.learndash-complete .ld-item-title, body.single-sfwd-courses .ld-item-list-item.learndash-complete .ld-item-title a, body.single-sfwd-courses .ld-item-list-item-complete .ld-item-title { color: var(--paa-muted); text-decoration: none; } /* The strike itself. learndash.min.css sets it via .learndash-wrapper .learndash-complete .ld-item-list-item-preview .ld-item-title > span:first-child Mirroring that 5-name chain wins on specificity but bets on all five names staying in that nesting through BuddyBoss's next release. Two names plus !important makes the same win on a far smaller bet. */ body.single-sfwd-courses .ld-item-title > span { text-decoration: none !important; } body.single-sfwd-courses .learndash-complete .ld-item-title > span { color: var(--paa-muted) !important; } /* -------------------------------------------------------------------------- 4. Sidebar enrol card: the same warm plate as the lesson progression panel. Real classes measured on the page (the previous revision guessed .bb-sidebar-block, which does not exist here). -------------------------------------------------------------------------- */ /* No `overflow: hidden` here. The children already carry their own corner radii, so it bought nothing, and an overflow clip creates a containing block that silently disables `position: sticky` for any descendant — which is exactly what .bb-ld-sticky-sidebar is for. */ /* The theme ships this card with `box-shadow: rgba(0,0,0,.1) 0 32px 54px` — a 54px blur offset 32px down. On a light page that is a soft lift; on a near-black page it smears into a large grey artifact around the whole right panel. Replaced with a tight edge shadow that reads as depth rather than haze. */ body.single-sfwd-courses .bb-single-course-sidebar .widget.bb-enroll-widget { background: transparent; border-radius: 3px; box-shadow: 0 6px 18px -8px rgb(0 0 0 / .7) !important; } body.single-sfwd-courses .bb-course-preview-content { background-color: var(--paa-raise); border: 1px solid var(--paa-line); border-top: 0; } body.single-sfwd-courses .bb-course-preview-wrap, body.single-sfwd-courses .thumbnail-container { border-radius: 3px 3px 0 0; } body.single-sfwd-courses .bb-single-course-sidebar h2, body.single-sfwd-courses .bb-single-course-sidebar h3, body.single-sfwd-courses .bb-single-course-sidebar h4 { color: #f6efe3; } body.single-sfwd-courses .bb-course-volume-list li { color: var(--paa-muted); } /* -------------------------------------------------------------------------- 5. Progress + status chips. LearnDash/BuddyBoss paint these with the utility classes .ld-secondary-background (mint #1bd991) and .ld-third-background from a customizer-generated INLINE stylesheet, which loads after this file. The utility class is the whole point of those elements, so overriding the colour needs !important rather than a deeper selector — a specificity war against an inline sheet is the more brittle of the two options. -------------------------------------------------------------------------- */ /* The TRACK needs !important for the same reason the fill does. Without it the track stayed #595959 mid-grey — invisible at 100% complete (the fill covers it) but the brightest non-brand element on the page at 0%, which is the state every student is in on the day they buy. Caught only by capturing a 14%-complete student; the 100% proof state hid it completely. */ body.single-sfwd-courses .ld-progress-bar { background: #1d1814 !important; border-radius: 2px; overflow: hidden; } body.single-sfwd-courses .ld-progress-bar .ld-progress-bar-percentage, body.single-sfwd-courses .ld-progress-bar .ld-progress-bar-percentage.ld-secondary-background { background: linear-gradient(90deg, var(--paa-gold-dim), var(--paa-gold)) !important; } body.single-sfwd-courses .ld-status { border-radius: 2px; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; } body.single-sfwd-courses .ld-status.ld-status-complete, body.single-sfwd-courses .ld-status-complete.ld-secondary-background { background-color: rgb(111 162 121 / .16) !important; color: var(--paa-verd) !important; box-shadow: inset 0 0 0 1px rgb(111 162 121 / .35); } body.single-sfwd-courses .ld-status.ld-status-incomplete, body.single-sfwd-courses .ld-status-incomplete.ld-third-background { background-color: rgb(216 189 114 / .1) !important; color: var(--paa-gold) !important; box-shadow: inset 0 0 0 1px rgb(216 189 114 / .28); } /* The per-row completion dot is .ld-status-icon.ld-status-complete — it carries .ld-secondary-background but NOT .ld-status, so the chip rule above misses it and the customizer's `background-color: #1bd991 !important` keeps it mint. Same verdigris as the chip, so "complete" reads identically in both places. */ body.single-sfwd-courses .ld-status-icon.ld-status-complete, body.single-sfwd-courses .ld-status-icon.ld-status-complete.ld-secondary-background { background-color: var(--paa-verd) !important; color: #0f1a12 !important; } body.single-sfwd-courses .ld-icon-checkmark { color: inherit; } /* -------------------------------------------------------------------------- 6. Primary action: the same struck-brass plate as Mark Complete, so starting a course and completing a lesson speak the same language. #btn-join exists ONLY on the not-enrolled view; that is the acquisition surface and must keep its purchase affordance. -------------------------------------------------------------------------- */ body.single-sfwd-courses #btn-join, body.single-sfwd-courses .learndash_join_button .button { background: linear-gradient(180deg, #f0dda0, var(--paa-gold) 45%, #b99f57); color: #20180d; border: 0; font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 1px 0 rgb(255 255 255 / .28) inset, 0 -1px 0 rgb(0 0 0 / .3) inset, 0 6px 18px -6px rgb(216 189 114 / .38); transition: transform .35s var(--paa-ease), filter .35s var(--paa-ease); } /* THE "WEIRD OVERSIZED SHADOW". A site-wide inline rule animates `.learndash-button-closed` (shared with the Woo checkout button and single_add_to_cart) with `heartbeatGlow`, a 9s pulse that peaks around an 11px blur of rgba(255,0,0,.77). It is pre-existing and made sense while the button was red; behind a brass plate it reads as a red halo. The pulse is kept — it is a deliberate attention cue on a buy action — and recoloured to brass so it belongs to the button it surrounds. Scoped to course pages, so checkout and add-to-cart keep the red pulse untouched. */ body.single-sfwd-courses #btn-join.learndash-button-closed, body.single-sfwd-courses #btn-join { animation-name: paaCourseJoinGlow; animation-duration: 9s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes paaCourseJoinGlow { 0%, 100% { box-shadow: 0 1px 0 rgb(255 255 255 / .28) inset, 0 -1px 0 rgb(0 0 0 / .3) inset, 0 0 0 rgb(216 189 114 / 0); } 50% { box-shadow: 0 1px 0 rgb(255 255 255 / .28) inset, 0 -1px 0 rgb(0 0 0 / .3) inset, 0 0 14px rgb(216 189 114 / .45); } } body.single-sfwd-courses #btn-join:hover, body.single-sfwd-courses .learndash_join_button .button:hover { transform: translateY(-1px); filter: brightness(1.06); } @media (prefers-reduced-motion: reduce) { body.single-sfwd-courses #btn-join { animation: none; } } /* "Included with Armor Bundle" — the cross-sell line under the button. */ body.single-sfwd-courses .bb-course-type { color: var(--paa-gold-dim); } /* -------------------------------------------------------------------------- 7. Responses. #comments ships with max-width:700px inside a 1180px rail, so on a 1920 screen the discussion sat in a 700px column with 480px of dead rail beside it for 3,425px of page height — the single largest empty region on the page. It is the last block on the page and clears the sidebar, so it can take the full rail without colliding with anything. -------------------------------------------------------------------------- */ /* learndash.min.css caps this with `.single.single-sfwd-courses .comments-area` (0,3,0). !important on the cap rather than mirroring `.single`, so the rule does not depend on the theme keeping that body class. */ body.single-sfwd-courses .comments-area { max-width: none !important; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--paa-line); } body.single-sfwd-courses .comments-area .comment-respond { padding: clamp(1rem, .7rem + 1vw, 1.5rem); background: var(--paa-raise); border: 1px solid var(--paa-line); border-radius: 12px; } body.single-sfwd-courses .comments-area textarea, body.single-sfwd-courses .comments-area input[type=text], body.single-sfwd-courses .comments-area input[type=email] { background-color: #0e0b08; border: 1px solid var(--paa-line); border-radius: 8px; color: var(--paa-text); } body.single-sfwd-courses .comments-area textarea:focus, body.single-sfwd-courses .comments-area input:focus { border-color: var(--paa-gold-dim); } /* The Publish button ships as a saturated #c60000 block inside the new warm plate. Same brass plate as the course action, so the two primary actions on this page speak once. */ body.single-sfwd-courses .comments-area .form-submit input#submit, body.single-sfwd-courses .comments-area .form-submit .submit { background: linear-gradient(180deg, #f0dda0, var(--paa-gold) 45%, #b99f57); color: #20180d; border: 0; border-radius: 2px; font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } body.single-sfwd-courses .comment-list { margin-top: 1.5rem; } /* One plate per response, matching the lesson progression panel. Nested replies keep the theme's indent but drop to a quieter plate so the thread still reads. */ body.single-sfwd-courses .comment-list .comment-body { padding: 1.1rem 1.25rem; background: var(--paa-raise); border: 1px solid var(--paa-line); border-radius: 12px; } body.single-sfwd-courses .comment-list .children .comment-body { background: #100d09; } body.single-sfwd-courses .comment-list > li.comment { margin-bottom: .75rem; } body.single-sfwd-courses .comment-list .comment-author .fn, body.single-sfwd-courses .comment-list cite.fn a { color: var(--paa-text); font-weight: 600; font-style: normal; } body.single-sfwd-courses .comment-list .comment-date, body.single-sfwd-courses .comment-list .comment-metadata a { color: var(--paa-muted); font-size: .8125rem; } body.single-sfwd-courses .comment-list .comment-text, body.single-sfwd-courses .comment-list .comment-text p { color: #ddd5c9; line-height: 1.7; max-width: 78ch; } body.single-sfwd-courses .comment-list .comment-reply-link { color: var(--paa-gold-dim); } body.single-sfwd-courses .comment-list .comment-reply-link:hover { color: var(--paa-gold); } /* The course author's own replies are worth spotting in a long thread. */ body.single-sfwd-courses .comment-list .bypostauthor > .comment-body { border-color: rgb(216 189 114 / .3); } /* -------------------------------------------------------------------------- 8. Focus states, CONTENT ONLY. Previously `body.single-sfwd-courses :focus-visible`, which is every focusable element on the page — header, BuddyPanel, search, cart, admin bar, modals — overwriting BuddyBoss's own focus rings that are already tuned for the dark header. Scoped to the regions this sheet actually restyles. -------------------------------------------------------------------------- */ body.single-sfwd-courses .learndash-wrapper--course :focus-visible, body.single-sfwd-courses .bb-single-course-sidebar :focus-visible, body.single-sfwd-courses .comments-area :focus-visible { outline: 2px solid var(--paa-gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body.single-sfwd-courses .ld-item-list .ld-item-list-item, body.single-sfwd-courses #btn-join, body.single-sfwd-courses .learndash_join_button .button { transition: none; } body.single-sfwd-courses #btn-join:hover, body.single-sfwd-courses .learndash_join_button .button:hover { transform: none; } } /* -------------------------------------------------------------------------- DEFAULT-AVATAR VISIBILITY The branded default (uploads/paa-buddyboss-defaults/default-member-*.png) is a near-black crest: measured average luminance 29/255, max 104/255, corners pure #000. At 24-32px on a dark surface it renders as an invisible blob, which is what "still the wrong avatar" actually was. The file is correct; it had no contrast against the UI it sits on. This is a MITIGATION, not the fix. The real fix is a lighter source asset; until then the plate + brass hairline at least give the crest an edge to read against. Scoped to img.round / .avatar so real member photos gain the ring but are otherwise untouched. -------------------------------------------------------------------------- */ body.single-sfwd-courses img.round, body.single-sfwd-courses .avatar, body.single-sfwd-lessons img.round, body.single-sfwd-lessons .avatar { background-color: #241d14; border: 1px solid rgb(216 189 114 / .38); border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .6); } /* The stacked "+N enrolled" cluster overlaps avatars; keep the rings from merging into one smudge. Measured class is span.bb-course-members (the previous revision targeted .bb-course-members-list, which does not exist). */ body.single-sfwd-courses .bb-course-members img.round { outline: 2px solid var(--paa-raise); outline-offset: -1px; }