/* PMA Science University — Courses · 06-live-conformance.css 2.2.0. Written against the markup the LIVE /courses install actually emits. WHY THIS SHEET EXISTS Sheets 02–05 were authored against an offline LearnPress 4.4.6 harness. On 2026-06-xx the live install was read directly — the anonymous archive HTML, the AJAX-rendered catalogue fragment returned by `lp/v1/load_content_via_ajax/`, the single-course document and the profile document. Several containers a student actually meets carry class names that sheets 02–05 never name, so they would have rendered as unstyled Enfold defaults after activation: · `.lp-courses-bar`, `.search-courses`, `.courses-order-by`, `.switch-layout`, `.course-filter-btn-mobile` — catalogue toolbar · `ul.learn-press-courses.lp-list-courses-no-css` — LearnPress explicitly ships NO layout CSS for this list and expects the theme to provide it · `.course-img`, `.wap-course-title`, `.course-permalink`, `.course-short-description`, `.course-wrap-meta`, `.meta-item-*`, `.course-readmore`, `.origin-price`, `.course-count-item` · `.course-detail-info`, `.course-meta-primary/-secondary`, `.meta-item__image`, `.meta-item__value` · `.course-nav-tabs`, `.wrapper-course-nav-tabs`, `.course-tab-panels` (LP 4.4.6 drives tabs with radio inputs and ``, not ``) · `ul.course-sections > li.course-section`, `.course-section__title`, `.course-section__items`, `.course-item__link`, `.course-item__status` · `.lp-user-profile`, `.lp-form-filter`, `.lp-enrolled-*`, `.learn-press-form-login`, `.learn-press-form-register` · `.lp-modal-*`, `.lp-btn-add-item-to-cart`, `.lp-skeleton-animation` Two real defects in 2.1.0 are corrected here, not merely extended: 1 · `05-elevation.css` puts a multi-column CSS grid on `ul.learn-press-courses`. The live catalogue has a grid/list switch (`data-layout="list"`). In list mode the 2.1.0 rule still forced multiple columns, so the list view was broken. Fixed below. 2 · The 2.1.0 mobile table restack is scoped to `.lp-profile-content`, a container LP 4.4.6 does not render on this install — the live profile root is `.lp-user-profile`. The restack therefore never applied. Fixed. Additive and presentation-only, as with every sheet in this theme. No LearnPress template is overridden, no LearnPress filter is added, and no course, lesson, quiz, enrolment, progress, order or certificate record is read or written. Every selector is anchored on `body.pma-lms`. */ /* ------------------------------------------------------------------ 0 · Typeface guard ------------------------------------------------------------------ The live install carries Enfold font classes on (`gilroy-black-custom gilroy-black roboto`) from the previous vendor's Enfold options. Those options are stored per parent theme and survive a child-theme activation, so they would keep asserting Gilroy/Roboto over LearnPress surfaces. Restated here at body level so the institutional faces win without touching Enfold's options. Icon fonts are deliberately untouched: no rule here names `[class*="lp-icon"]`, `.entypo-fontello` or any pseudo-element font. */ body.pma-lms.roboto, body.pma-lms.gilroy-black, body.pma-lms.gilroy-black-custom { font-family: var(--pma-sans); } body.pma-lms.roboto .learnpress, body.pma-lms.roboto .learnpress-page, body.pma-lms.gilroy-black .learnpress, body.pma-lms.gilroy-black .learnpress-page { font-family: var(--pma-sans); } /* ------------------------------------------------------------------ 1 · Catalogue toolbar — search, sort, layout switch, mobile filter ------------------------------------------------------------------ */ body.pma-lms .lp-courses-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: 0 0 2.25rem; padding: 0 0 1.1rem; border-bottom: var(--hairline); } body.pma-lms .lp-courses-bar .search-courses { display: flex; flex: 1 1 240px; min-width: 0; margin: 0; } body.pma-lms .lp-courses-bar .search-courses input[type="search"] { flex: 1 1 auto; min-width: 0; margin: 0; border-right: 0; } body.pma-lms .lp-courses-bar .search-courses button { flex: 0 0 auto; padding: 0 1.1rem; border: var(--hairline); background-color: var(--pma-navy-900); color: var(--pma-white); cursor: pointer; transition: background-color .2s var(--pma-ease); } body.pma-lms .lp-courses-bar .search-courses button:hover { background-color: var(--pma-gold-500); color: var(--pma-navy-900); } body.pma-lms .courses-order-by-wrapper { flex: 0 0 auto; } body.pma-lms select.courses-order-by { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--pma-ink); } body.pma-lms .switch-layout { display: flex; flex: 0 0 auto; gap: .35rem; } body.pma-lms .switch-layout input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } body.pma-lms .switch-layout .switch-btn { display: block; width: 2.4rem; height: 2.4rem; margin: 0; border: var(--hairline); background-color: var(--pma-white); cursor: pointer; letter-spacing: 0; text-transform: none; transition: border-color .18s var(--pma-ease), background-color .18s var(--pma-ease); } body.pma-lms .switch-layout .switch-btn:hover { border-color: var(--pma-navy-600); } /* Selected state has to read without colour alone, so the plate inverts. */ body.pma-lms .switch-layout input:checked + .switch-btn { background-color: var(--pma-navy-900); border-color: var(--pma-navy-900); } /* Keyboard reachability: the visible control is the label, so the ring is drawn on the label when the hidden radio has focus. */ body.pma-lms .switch-layout input:focus-visible + .switch-btn { outline: 2px solid var(--pma-gold-500); outline-offset: 3px; } body.pma-lms .course-filter-btn-mobile { display: none; align-items: center; gap: .4rem; padding: .6rem 1rem; border: var(--hairline); background-color: var(--pma-white); font-family: var(--pma-sans); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pma-navy-900); cursor: pointer; } body.pma-lms .course-filter-count-fields-selected:not(:empty) { padding: 0 .4rem; background-color: var(--pma-gold-500); color: var(--pma-navy-900); } /* Loading placeholders LearnPress paints while the catalogue arrives */ body.pma-lms .lp-skeleton-animation > *, body.pma-lms .lp-skeleton-animation::after { background-color: var(--pma-stone-100); border-radius: 0; } /* ------------------------------------------------------------------ 2 · Catalogue list — grid and list layouts ------------------------------------------------------------------ Corrects defect 1 described in the header: 2.1.0 forced a multi-column grid in both layouts. */ body.pma-lms ul.learn-press-courses.grid, body.pma-lms ul.learn-press-courses[data-layout="grid"] { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } body.pma-lms ul.learn-press-courses.list, body.pma-lms ul.learn-press-courses[data-layout="list"] { grid-template-columns: 1fr; gap: 1.25rem; } body.pma-lms ul.learn-press-courses.list > li.course > .course-item, body.pma-lms ul.learn-press-courses[data-layout="list"] > li.course > .course-item { display: grid; grid-template-columns: minmax(200px, 34%) 1fr; align-items: stretch; } body.pma-lms ul.learn-press-courses.list .course-thumbnail, body.pma-lms ul.learn-press-courses[data-layout="list"] .course-thumbnail { aspect-ratio: auto; height: 100%; min-height: 190px; } /* The card wrapper LearnPress renders inside each

*/ body.pma-lms ul.learn-press-courses > li.course > .course-item { height: 100%; border: 0; background: transparent; } body.pma-lms .course-thumbnail .course-img, body.pma-lms .course-thumbnail > a { display: block; width: 100%; height: 100%; border: 0; } body.pma-lms .course-thumbnail .course-img img { display: block; width: 100%; height: 100%; object-fit: cover; } body.pma-lms .course-content .course-info { display: flex; flex: 1; flex-direction: column; min-width: 0; } body.pma-lms .wap-course-title { display: block; margin: 0 0 .55rem; } body.pma-lms .wap-course-title .course-title, body.pma-lms .wap-course-title h3 { margin: 0; } body.pma-lms .course-permalink { border: 0; text-decoration: none; color: inherit; } body.pma-lms .course-short-description { margin: 0 0 1.1rem; font-size: .93rem; line-height: 1.6; color: var(--pma-ink-muted); } body.pma-lms .course-instructor, body.pma-lms .course-categories { font-family: var(--pma-sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pma-ink-muted); } body.pma-lms .instructor-display-name { letter-spacing: .08em; } /* Card meta rail — lessons, quizzes, duration, level */ body.pma-lms .course-wrap-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem 1.1rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--pma-stone-100); } body.pma-lms .course-wrap-meta .meta-item, body.pma-lms .course-count-item, body.pma-lms .course-level { font-family: var(--pma-sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pma-ink-muted); } body.pma-lms .course-item-price, body.pma-lms .course-price .price { font-family: var(--pma-serif); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pma-navy-900); } body.pma-lms .course-price .origin-price { margin-right: .5rem; font-size: .9rem; color: var(--pma-ink-muted); text-decoration: line-through; } body.pma-lms .course-readmore a, body.pma-lms a.course-readmore { display: inline-block; margin-top: 1rem; padding-bottom: 2px; border: 0; border-bottom: 1px solid var(--pma-gold-500); font-family: var(--pma-sans); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pma-navy-900); text-decoration: none; } /* Wishlist control ships with no CSS of its own on this install */ body.pma-lms .course-button-wishlist__wrapper-no-css, body.pma-lms .lp-button-wishlist-action { border: 0; background: none; color: var(--pma-ink-muted); cursor: pointer; transition: color .18s var(--pma-ease); } body.pma-lms .lp-button-wishlist-action:hover { color: var(--pma-gold-500); } body.pma-lms .lp-button-wishlist-action.icon-only { padding: .35rem; } /* ------------------------------------------------------------------ 3 · Learner counts ------------------------------------------------------------------ The five courses each carried an inherited LearnPress fake-student figure (6,323 – 9,766) in the `_lp_students` field — the one its own editor labels "Fake students enrolled for the course. It only to display, not calculate". Those values have now been **cleared at source**: all five read 0, verified on the live pages. The meta item stays hidden because a brand-new catalogue announcing "0 students" tells a visitor nothing and reads worse than silence. The number is now truthful either way, so this is a presentation choice rather than containment. Delete this block to show the real count. */ body.pma-lms .meta-item-student, body.pma-lms .course-count-student, body.pma-lms .course-students { display: none !important; } /* ------------------------------------------------------------------ 4 · Single course — detail header and meta ------------------------------------------------------------------ */ body.pma-lms .course-detail-info { padding: clamp(1.75rem, 3vw, 3rem) 0 clamp(1.5rem, 2.5vw, 2.5rem); background-color: var(--pma-stone-100); border-bottom: var(--hairline); } body.pma-lms .course-info-left { min-width: 0; } body.pma-lms h1.course-title, body.pma-lms .course-detail-info .course-title { margin: .9rem 0 1.1rem; font-family: var(--pma-serif); font-weight: 600; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); line-height: 1.14; letter-spacing: -.01em; color: var(--pma-navy-900); max-width: 30ch; } body.pma-lms .course-meta-primary, body.pma-lms .course-meta-secondary { margin: 0; } body.pma-lms .course-meta__pull-left, body.pma-lms .course-meta__pull-right { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.75rem; } body.pma-lms .course-meta .meta-item { display: flex; align-items: center; gap: .6rem; margin: 0; } body.pma-lms .course-meta .meta-item__value label { display: block; margin: 0; font-size: .68rem; letter-spacing: .12em; } body.pma-lms .course-meta .meta-item__value > div, body.pma-lms .course-meta .meta-item__value a { font-family: var(--pma-sans); font-size: .92rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pma-navy-900); } body.pma-lms .course-meta .instructor-avatar img, body.pma-lms .meta-item__image img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 1px solid var(--pma-stone-300); } body.pma-lms .course-meta-secondary .meta-item span { font-family: var(--pma-sans); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pma-ink-muted); } /* ------------------------------------------------------------------ 5 · Single course — tab rail (radio + label, LP 4.4.6) ------------------------------------------------------------------ 2.1.0 styled `li a`. This install renders `li > label`, so the rail was unstyled. No `display` or `overflow` change is made to the drag-scroll wrapper LearnPress uses for narrow viewports. */ body.pma-lms .wrapper-course-nav-tabs { border-bottom: var(--hairline); } body.pma-lms ul.course-nav-tabs { display: flex; gap: 2.2rem; margin: 0; padding: 0; list-style: none; border: 0; } body.pma-lms ul.course-nav-tabs > li.course-nav { margin: 0; padding: 0; border: 0; background: none; } body.pma-lms ul.course-nav-tabs > li.course-nav > label { display: block; margin: 0; padding: .9rem 0; border-bottom: 2px solid transparent; font-family: var(--pma-sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pma-ink-muted); cursor: pointer; transition: color .18s var(--pma-ease), border-color .18s var(--pma-ease); } body.pma-lms ul.course-nav-tabs > li.course-nav > label:hover { color: var(--pma-navy-900); } body.pma-lms ul.course-nav-tabs > li.course-nav.active > label { color: var(--pma-navy-900); border-bottom-color: var(--pma-gold-500); } body.pma-lms .course-tab-panels { padding-top: 2.2rem; } body.pma-lms .course-tab-panel .course-description > h2:first-child { margin-top: 0; font-size: var(--fs-h3); } body.pma-lms .course-description p { max-width: 68ch; } /* ------------------------------------------------------------------ 6 · Single course — curriculum (course-sections / course-section__items) ------------------------------------------------------------------ Nothing here changes display, position or overflow on the accordion: LearnPress toggles `.lp-collapse` and `.lp-hidden` itself and must keep full control of open and closed state. */ body.pma-lms .lp-course-curriculum__title { margin: 0 0 1rem; font-family: var(--pma-serif); font-weight: 600; font-size: var(--fs-h3); color: var(--pma-navy-900); } body.pma-lms .course-curriculum-info { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 1.2rem; } body.pma-lms ul.course-curriculum-info__left { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0; padding: 0; list-style: none; } body.pma-lms ul.course-curriculum-info__left > li { font-family: var(--pma-sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pma-ink-muted); } body.pma-lms .course-toggle-all-sections { font-family: var(--pma-sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pma-navy-900); border-bottom: 1px solid var(--pma-gold-500); cursor: pointer; } body.pma-lms ul.course-sections { margin: 0; padding: 0; list-style: none; border: var(--hairline); background-color: var(--pma-white); } body.pma-lms ul.course-sections > li.course-section { margin: 0; padding: 0; border-bottom: var(--hairline); } body.pma-lms ul.course-sections > li.course-section:last-child { border-bottom: 0; } body.pma-lms .course-section-header { display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.25rem; background-color: var(--pma-stone-100); cursor: pointer; } body.pma-lms .course-section-header .section-toggle { color: var(--pma-navy-600); } body.pma-lms .course-section-info { flex: 1 1 auto; min-width: 0; } body.pma-lms .course-section__title { font-family: var(--pma-serif); font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: var(--pma-navy-900); } body.pma-lms .course-section__description { margin-top: .2rem; font-size: .88rem; line-height: 1.5; color: var(--pma-ink-muted); } body.pma-lms .section-count-items { flex: 0 0 auto; padding: .18rem .6rem; border: 1px solid var(--pma-stone-300); border-radius: 999px; font-family: var(--pma-sans); font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--pma-ink-muted); } body.pma-lms ul.course-section__items { margin: 0; padding: 0; list-style: none; } body.pma-lms ul.course-section__items > li.course-item { margin: 0; border-top: 1px solid var(--pma-stone-100); transition: background-color .18s var(--pma-ease); } body.pma-lms ul.course-section__items > li.course-item:hover { background-color: var(--pma-stone-100); } body.pma-lms .course-item .course-item__link, body.pma-lms .course-item a.course-item__link { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.25rem; border: 0; font-size: .96rem; line-height: 1.45; color: var(--pma-ink); text-decoration: none; } body.pma-lms .course-item .course-item-ico { color: var(--pma-navy-600); } body.pma-lms .course-item .course-item__info { flex: 1 1 auto; min-width: 0; } body.pma-lms .course-item .course-item-title { font-family: var(--pma-sans); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pma-ink); } body.pma-lms .course-item .course-item__right, body.pma-lms .course-item .course-item__status { flex: 0 0 auto; font-family: var(--pma-sans); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pma-ink-muted); } body.pma-lms .course-item.current > .course-item__link, body.pma-lms .course-item.item-current > .course-item__link { box-shadow: inset 3px 0 0 var(--pma-gold-500); background-color: var(--pma-stone-100); } body.pma-lms .course-item.has-status.status-completed .course-item-title { color: var(--pma-success); } /* ------------------------------------------------------------------ 7 · Single course — sidebar, enrolment buttons, modal ------------------------------------------------------------------ */ body.pma-lms .course-summary-sidebar__inner, body.pma-lms .course-sidebar-top { background-color: var(--pma-white); border: var(--hairline); padding: 1.5rem; } body.pma-lms .course-sidebar-preview .course-price, body.pma-lms .course-sidebar-top .course-price { display: block; margin: 0 0 1rem; font-size: 1.65rem; } body.pma-lms .lp-course-buttons { display: flex; flex-direction: column; gap: .7rem; margin: 0; } body.pma-lms .lp-course-buttons button, body.pma-lms .lp-btn-add-item-to-cart, body.pma-lms button.lp-btn-add-item-to-cart { width: 100%; text-align: center; } body.pma-lms .lp-overlay { background-color: rgba(11, 27, 51, .55); } body.pma-lms .lp-modal-dialog .lp-modal-content { background-color: var(--pma-white); border: var(--hairline); border-radius: 0; box-shadow: var(--shadow-overlay); } body.pma-lms .lp-modal-header { padding: 1.15rem 1.4rem; border-bottom: var(--hairline); font-family: var(--pma-serif); font-size: 1.15rem; color: var(--pma-navy-900); } body.pma-lms .lp-modal-body { padding: 1.4rem; } body.pma-lms .lp-modal-footer { padding: 1.1rem 1.4rem; border-top: var(--hairline); background-color: var(--pma-stone-100); } body.pma-lms .course-author, body.pma-lms .lp-course-author { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; padding: 1.5rem; background-color: var(--pma-white); border: var(--hairline); } body.pma-lms .course-author__pull-left { flex: 0 0 auto; } body.pma-lms .course-author__pull-right { flex: 1 1 240px; min-width: 0; } /* ------------------------------------------------------------------ 8 · Student profile — LP 4.4.6 containers ------------------------------------------------------------------ */ body.pma-lms .lp-user-profile { background-color: transparent; } body.pma-lms .lp-form-filter { padding: 1.2rem 1.3rem; margin: 0 0 1.5rem; background-color: var(--pma-white); border: var(--hairline); } body.pma-lms .lp-form-filter__fields { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; } body.pma-lms .lp-form-filter__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; } body.pma-lms .learn-press-form-login, body.pma-lms .learn-press-form-register { max-width: 460px; padding: 1.75rem; background-color: var(--pma-white); border: var(--hairline); } body.pma-lms .learn-press-form-login input, body.pma-lms .learn-press-form-register input { width: 100%; } body.pma-lms .learn-press-message { padding: 1rem 1.15rem; border-left: 3px solid var(--pma-navy-600); background-color: var(--pma-stone-100); color: var(--pma-ink); } /* Wide tables scroll inside their own wrapper, never the document */ body.pma-lms .lp-list-table-wrap { max-width: 100%; overflow-x: auto; } /* ------------------------------------------------------------------ 10 · Header shopping cart ------------------------------------------------------------------ FOUND LIVE: WooCommerce 11.1.0 is active here with zero products, and Enfold prints its cart control into the header of every page. Root pmascience.com is the only commerce layer, so that control can only lead a student to an empty cart. `inc/enfold-chrome.php` unhooks it at source; this is the belt to those braces. `display: none` is deliberate — it must leave the tab order and the accessibility tree, not just become invisible. LearnPress's own enrolment buttons are untouched. */ body.pma-lms .cart_dropdown, body.pma-lms #header .cart_dropdown, body.pma-lms .av-cart-container { display: none !important; } /* ------------------------------------------------------------------ 11 · Typeface guard on form controls ------------------------------------------------------------------ */ body.pma-lms button, body.pma-lms input, body.pma-lms select, body.pma-lms textarea, body.pma-lms input[type="submit"] { font-family: var(--pma-sans); } /* Only Enfold's own icon classes are neutralised here. An earlier draft also named `[class*="lp-icon"]`, which stripped LearnPress's icon font from every accordion arrow, lesson glyph and star — the empty squares visible in the curriculum. LearnPress icons must keep their own family. */ body.pma-lms [class*="entypo-fontello"], body.pma-lms .av-icon-char { font-family: inherit; } /* ------------------------------------------------------------------ 12 · Mobile ------------------------------------------------------------------ */ @media (max-width: 767px) { body.pma-lms .lp-courses-bar { gap: .7rem; } body.pma-lms .lp-courses-bar .search-courses { flex: 1 1 100%; } body.pma-lms .course-filter-btn-mobile { display: inline-flex; } body.pma-lms ul.learn-press-courses.list > li.course > .course-item, body.pma-lms ul.learn-press-courses[data-layout="list"] > li.course > .course-item { grid-template-columns: 1fr; } body.pma-lms ul.learn-press-courses.list .course-thumbnail, body.pma-lms ul.learn-press-courses[data-layout="list"] .course-thumbnail { aspect-ratio: 16 / 10; min-height: 0; } body.pma-lms ul.course-nav-tabs { gap: 1.3rem; } body.pma-lms ul.course-nav-tabs > li.course-nav > label { font-size: .72rem; } body.pma-lms .course-section-header { padding: .95rem 1rem; } body.pma-lms .course-item .course-item__link { padding: .85rem 1rem; } /* Corrects defect 2: the 2.1.0 restack targeted `.lp-profile-content`, which LP 4.4.6 does not render here. The live profile root is `.lp-user-profile`. Tables outside a restacked context keep the scrolling wrapper above, so the document never scrolls sideways either way. */ body.pma-lms .lp-user-profile table, body.pma-lms .lp-user-profile table tbody, body.pma-lms .lp-user-profile table tr, body.pma-lms .lp-user-profile table td { display: block; width: 100%; } body.pma-lms .lp-user-profile table thead { display: none; } body.pma-lms .lp-user-profile table tr { border: var(--hairline); margin: 0 0 1rem; } body.pma-lms .lp-user-profile table td { border: 0; border-bottom: 1px solid var(--pma-stone-100); } body.pma-lms .course-meta__pull-left, body.pma-lms .course-meta__pull-right { gap: .5rem 1.1rem; } } /* ------------------------------------------------------------------ 13 · Post-activation corrections — measured on the live 2.2.0 theme ------------------------------------------------------------------ Everything below was found by QA'ing the installed theme, not the package. Three of the four are defects this theme introduced itself. */ /* 13a · THE COURSE TITLE WAS INVISIBLE. `03-learnpress-4.css` paints `.lp-content-area` ivory. LearnPress nests that container INSIDE `.course-detail-info`, which section 4 of this sheet paints dark — so an ivory plate was laid over the dark band and every piece of text in it (the h1 course title at 44px, the instructor, the category) is ivory. Measured: title #fbf8f2 on #fbf8f2, **1.00:1**. The plate is removed only where it sits inside the course header; everywhere else `.lp-content-area` keeps its ivory ground. */ body.pma-lms .course-detail-info .lp-content-area, body.pma-lms .course-detail-info > .lp-content-area { background-color: transparent !important; } /* The band itself is the institutional dark ground, so the light text that LearnPress puts in it reads correctly rather than being fought. */ body.pma-lms .course-detail-info { background-color: var(--pma-navy-900); border-bottom: 0; } body.pma-lms .course-detail-info .course-title, body.pma-lms .course-detail-info h1 { color: var(--pma-ivory); } body.pma-lms .course-detail-info .course-meta .meta-item__value > div, body.pma-lms .course-detail-info .course-meta .meta-item__value a, body.pma-lms .course-detail-info .course-meta-secondary .meta-item span { color: var(--pma-ivory); } body.pma-lms .course-detail-info .course-meta .meta-item__value label { color: var(--pma-gold-300); } /* 13b · THE CATALOGUE CARDS WERE COLLAPSED. Measured on the live grid: `.course-thumbnail` 39px tall inside a 566px card, titles squeezed into a ~50px column, each card's content shrink- wrapped against the left edge of its cell. LearnPress lays the card out as a row by default and this sheet never said otherwise, so thumbnail and content were competing for width instead of stacking. Stated explicitly, per layout. */ body.pma-lms ul.learn-press-courses > li.course { min-width: 0; } body.pma-lms ul.learn-press-courses:not(.list):not([data-layout="list"]) > li.course > .course-item { display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100%; } body.pma-lms ul.learn-press-courses > li.course > .course-item > .course-thumbnail { flex: 0 0 auto; width: 100%; min-width: 0; } body.pma-lms ul.learn-press-courses > li.course > .course-item > .course-content { flex: 1 1 auto; width: 100%; min-width: 0; display: flex; flex-direction: column; padding: 1.3rem 1.4rem 1.5rem; } body.pma-lms ul.learn-press-courses .wap-course-title, body.pma-lms ul.learn-press-courses .course-instructor-category, body.pma-lms ul.learn-press-courses .course-wrap-meta, body.pma-lms ul.learn-press-courses .course-info { width: 100%; min-width: 0; } body.pma-lms ul.learn-press-courses .course-instructor-category { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .9rem; } /* In list mode the two-column card is intended, so it is restated after the column rule above rather than relying on order alone. */ body.pma-lms ul.learn-press-courses.list > li.course > .course-item, body.pma-lms ul.learn-press-courses[data-layout="list"] > li.course > .course-item { display: grid; grid-template-columns: minmax(200px, 34%) 1fr; align-items: stretch; } /* 13c · The skip link was navy on navy. `04-header-footer.css` sets it ivory on navy, but in Enfold the `#top` id is on ``, so Enfold's own `#top a` rule outranks any class selector and repainted it #132844 — **1.16:1** when focused. */ body.pma-lms .pma-skip-link, body.pma-lms a.pma-skip-link:link, body.pma-lms a.pma-skip-link:visited { color: var(--pma-ivory) !important; background-color: var(--pma-navy-900) !important; } /* 13d · Enfold's #969696 on post meta — the date, category and author byline on the articles list and the home page — measured **2.79:1**. */ body.pma-lms .minor-meta, body.pma-lms .minor-meta a, body.pma-lms .date-container, body.pma-lms .blog-categories, body.pma-lms .blog-author, body.pma-lms .blog-author a { color: var(--pma-ink-muted); } body.pma-lms .minor-meta a:hover, body.pma-lms .blog-author a:hover { color: var(--pma-navy-900); } /* 13e · The footer social icons were painting brand crimson and brand red (#e4405f, #e02a20). The institutional standard carries no red, and the glyphs read perfectly in ink with a gold hover. */ body.pma-lms #footer .zoom-social_icons-list-span, body.pma-lms #socket .zoom-social_icons-list-span, body.pma-lms #footer .social_bookmarks a, body.pma-lms #socket .social_bookmarks a { color: var(--pma-ivory) !important; background-color: transparent !important; } body.pma-lms #footer .zoom-social_icons-list-span:hover, body.pma-lms #socket .zoom-social_icons-list-span:hover, body.pma-lms #footer .social_bookmarks a:hover, body.pma-lms #socket .social_bookmarks a:hover { color: var(--pma-gold-300) !important; } /* 13f · The sort control clipped its own label ("Newly publishe⌄"). */ body.pma-lms select.courses-order-by { width: auto; min-width: 12.5rem; max-width: 100%; padding-right: 2rem; text-overflow: ellipsis; } /* 13g · Touch padding no longer waits for `pointer: coarse`. Headless and desktop-narrow contexts do not report a coarse pointer, and a small window benefits from the same target size, so width alone decides. */ @media (max-width: 767px) { body.pma-lms #footer a, body.pma-lms #socket .menu li a, body.pma-lms .lp-courses-bar a { padding-top: .5rem; padding-bottom: .5rem; } } /* ------------------------------------------------------------------ 14 · Human inspection, second round ------------------------------------------------------------------ */ /* 14a · Unverified social proof. The course sidebar carried a "Featured Review" — a star rating and a quote with no attributable, owner-verified source behind it. Empty space is better than borrowed credibility, so it is removed from the page and from the accessibility tree. Delete this block the day a genuine, attributable review exists. */ body.pma-lms .course-featured-review, body.pma-lms .featured-review__stars, body.pma-lms .course-rating .review-stars-rated { display: none !important; } /* 14b · The Instructor tab. LearnPress fills it from a WordPress user profile, which on this install means a bare display name and an empty bio — a tab that promises credentials and delivers nothing. The public course provider is already stated in the course meta as PMA Science University Course Team, so the tab and its panel are removed until there is a named instructor with real qualifications to show. Overview and Curriculum are untouched. */ body.pma-lms li.course-nav-tab-instructor, body.pma-lms .course-tab-panel-instructor, body.pma-lms #tab-instructor { display: none !important; } /* 14c · The Articles area still showed Enfold's placeholder sidebar — a Pages dump listing Cart, Checkout, a second Checkout, Shop, Logout, My Account, Become A Teacher and Instructors, plus empty Categories and Archive boxes. Every one of those is either retired, internal, or not part of the approved architecture. Same treatment as /psychology: the placeholder widgets go, and where nothing meaningful is left the column is dropped so the content runs full width instead of leaving a gutter. `!important` is required because in Enfold the `#top` id sits on ``. */ body.pma-lms .sidebar .widget_pages, body.pma-lms .sidebar .widget_categories, body.pma-lms .sidebar .widget_archive, body.pma-lms .sidebar .widget_recent_entries, body.pma-lms .sidebar .widget_meta, body.pma-lms .sidebar .widget_nav_menu:has(a[href*="become-a-teacher"]), body.pma-lms .sidebar .widget_nav_menu:has(a[href*="/cart/"]) { display: none !important; } body.pma-lms .sidebar:has(.widget_archive) { display: none !important; } body.pma-lms .container:has(.sidebar .widget_archive) .content { width: 100% !important; margin: 0 !important; padding-right: 0 !important; border-right: 0 !important; } /* 14d · Curriculum rhythm. With the icon font restored, the rows needed their spacing restated so the glyph, the title and the state read as one line rather than three things sharing a row. */ body.pma-lms .course-item .course-item-ico { flex: 0 0 auto; width: 1.15rem; text-align: center; } body.pma-lms .course-section__items > li.course-item + li.course-item { border-top-color: var(--pma-stone-100); } body.pma-lms .course-section-header .section-toggle { flex: 0 0 auto; }