/* THC Core 1.6.0 — site fixes from the 2026-09-29 audit. Every block is gated by a word in , printed server-side from the switches on THC → Traffic sources → Settings, so each fix can be turned off on its own: scaffold hide [IMAGE SLOT] figures (only printed for people who cannot edit posts) tutordark dark colours for Tutor's course page, lessons, dashboard and the home hero caption overflow no sideways scrolling on phones (Tutor tooltips, long lesson titles) cls space reserved for Tutor's course picture contrast badge and Tutor grey text at 4.5:1 or better print clean printouts Dark colours reuse the Display & reading palette (assets/thc-display.css): canvas #1b1915, raised #25221d, muted #302c26, border #4a443a, text #efe8da, leaf #93b587, deep leaf #b4cfa8. */ /* ---------- scaffold (belt and braces for the server-side strip) ---------- */ html[data-thc-fx~="scaffold"] .lws-image-slot { display: none !important; } /* ---------- tutordark ---------- */ html[data-thc-theme="dark"][data-thc-fx~="tutordark"] { /* Tutor's classic course/dashboard templates read these tokens (printed light in an inline :root block). */ --tutor-body-color: #efe8da; --tutor-body-color-rgb: 239, 232, 218; --tutor-border-color: #4a443a; --tutor-border-color-rgb: 74, 68, 58; --tutor-color-secondary: #d9d1c1; --tutor-color-subdued: #cfc6b4; --tutor-color-hints: #cfc6b4; --tutor-color-muted: #cfc6b4; --tutor-color-gray: #4a443a; --tutor-color-gray-rgb: 74, 68, 58; --tutor-color-gray-10: #302c26; --tutor-color-primary: #93b587; --tutor-color-primary-rgb: 147, 181, 135; --tutor-color-primary-hover: #b4cfa8; --tutor-color-primary-hover-rgb: 180, 207, 168; /* Tutor 4's own dark palette (lesson player, dashboard): its subdued grey measured 3.4:1. */ --tutor-text-subdued: #9a9da4; } /* Text: titles, descriptions and Tutor's literal greys. 14.4:1 / 10.4:1 on the canvas. */ html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-course-details-page, .tutor-single-course-sidebar, .tutor-dashboard, .tutor-frontend-dashboard, .tutor-course-single-content-wrapper, .tutor-modal-content) { color: #efe8da; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-color-black, .tutor-course-details-title, .tutor-course-details-widget-title, .tutor-course-content-title, .tutor-accordion-item-header, .tutor-course-content-list-item-title, .tutor-course-details-content) { color: #efe8da; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-color-secondary, .tutor-meta-value, .tutor-course-content-list-item-duration) { color: #d9d1c1; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-color-muted, .tutor-color-subdued, .tutor-meta > *, .tutor-btn-ghost, .tutor-instructor-designation, .tutor-course-content-list-item-icon, .tutor-course-content-list-item-status) { color: #cfc6b4; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-course-details-page, .tutor-single-course-sidebar, .tutor-dashboard) a:not(.tutor-btn) { color: #b4cfa8; } /* Surfaces: the price/enrolment card, topic accordion, tabs, modals and Tutor's white helper classes. */ html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-card, .tutor-sidebar-card, .tutor-card-body, .tutor-card-footer, .tutor-card-header, .tutor-course-details-widget, .tutor-course-details-instructors, .tutor-accordion-item, .tutor-course-content-list-item, .tutor-modal-content, .tutor-modal-content-white, .tutor-modal-footer, .tutor-bg-white, .tutor-dashboard-content-inner, .tutor-course-single-sidebar-wrapper, .tutor-course-single-sidebar-title) { background-color: #25221d; border-color: #4a443a; color: #efe8da; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-accordion-item-header, .tutor-accordion-item-header.is-active, .tutor-course-content-list-item:hover, .tutor-bg-light, .tutor-bg-gray-10, .tutor-bg-gray-20, .tutor-card-list-item:nth-child(2n)) { background-color: #302c26; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] .tutor-course-details-tab .tutor-is-sticky { background: rgba(27, 25, 21, .92); } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] .tutor-nav-link { color: #d9d1c1; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] .tutor-nav-link.is-active { background-color: #25221d; color: #b4cfa8; border-color: #4a443a; border-bottom-color: #93b587; } /* Primary buttons sit on leaf green (--tutor-color-primary above), so their text goes dark: 8.1:1. */ html[data-thc-theme="dark"][data-thc-fx~="tutordark"] .tutor-btn-primary, html[data-thc-theme="dark"][data-thc-fx~="tutordark"] .tutor-btn-primary:is(:hover, :focus) { color: #15130f; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] .tutor-btn-outline-primary { color: #b4cfa8; border-color: #93b587; } /* Tooltips are drawn in --tutor-body-color with white text; now light, so the text goes dark. */ html[data-thc-theme="dark"][data-thc-fx~="tutordark"] .tooltip-wrap .tooltip-txt { color: #1b1915; } /* Tables, the dashboard and forms. */ html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-table, .tutor-dashboard table, .tutor-frontend-dashboard-withdrawal table) :is(th, td) { background-color: #25221d; color: #efe8da; border-color: #4a443a; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-table, .tutor-dashboard table) th { background-color: #302c26; color: #d9d1c1; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-form-control, .tutor-form-group input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .tutor-form-group textarea, .tutor-form-select-dropdown, .tutor-dropdown-select-selected, .tutor-dropdown-select-options-container, #tutor-login-form input.tutor-form-control, .tutor-login-wrap input.tutor-form-control) { background-color: #25221d; color: #efe8da; border-color: #a79d88; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-form-control, .tutor-form-group input, .tutor-form-group textarea)::placeholder { color: #bdb3a0; opacity: 1; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.tutor-lesson-wrapper, .tutor-lesson-content, .tutor-learning-area-content) :is(table th, table td) { border-color: #4a443a; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] .tutor-alert { color: #15130f; } /* Tutor Pro's certificate teaser is styled through an id, so it needs its own rule. */ html[data-thc-theme="dark"][data-thc-fx~="tutordark"] #tutor-certificate-showcase .tutor-cs-text { background: #4a443a; } html[data-thc-theme="dark"][data-thc-fx~="tutordark"] #tutor-certificate-showcase .tutor-cs-text > div { background-color: #25221d; color: #efe8da; } /* WooCommerce's mini-cart drawer is white with inherited (now light) text in Dark. */ html[data-thc-theme="dark"][data-thc-fx~="tutordark"] :is(.wc-block-mini-cart__drawer, .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents, .wc-block-mini-cart__drawer .wc-block-mini-cart__title) { background-color: #25221d !important; color: #efe8da; } /* Home hero caption: its light card kept light text in dark (unreadable). */ html[data-thc-theme="dark"][data-thc-fx~="tutordark"] .thc-home-hero__media figcaption { background: rgba(27, 25, 21, .9); color: #efe8da; } /* ---------- overflow (phones) ---------- */ @media (max-width: 767px) { /* Tutor's topic tooltips are hidden but still 208px wide off to the right: 542px page on a 390px phone. clip (not hidden) so the sticky tab bar inside keeps working. */ html[data-thc-fx~="overflow"] .tutor-course-details-page { overflow-x: clip; } html[data-thc-fx~="overflow"] .tutor-course-details-page .tooltip-wrap .tooltip-txt { max-width: min(208px, calc(100vw - 4rem)); } /* A long lesson title pushed the lesson bar (and its sidebar button) to 458px. */ html[data-thc-fx~="overflow"] .tutor-learning-header-inner { max-width: 100vw; box-sizing: border-box; } html[data-thc-fx~="overflow"] .tutor-learning-header-content { min-width: 0; flex: 1 1 auto; } html[data-thc-fx~="overflow"] .tutor-learning-header-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ---------- cls ---------- */ /* Tutor prints its course picture with no width/height. "auto 3 / 2" reserves a 3:2 box until the image arrives, then the picture's own shape takes over, so nothing is ever cropped. */ html[data-thc-fx~="cls"] :is(.tutor-course-thumbnail > img, .tutor-course-details-page .tutor-course-thumbnail img) { display: block; width: 100%; height: auto; aspect-ratio: auto 3 / 2; } html[data-thc-fx~="cls"] :where(img[loading="lazy"]:not([width])) { height: auto; } /* ---------- contrast (light) ---------- */ /* "Free / Open for enrollment / Coming soon": #3f5c3b on #a8b79a was 3.53:1; #2b4228 is 5.18:1. (THC Search's white-on-green "in course" badge keeps its own colours.) */ html[data-thc-fx~="contrast"]:not([data-thc-theme="dark"]) .thc-badge:not(.thc-badge--in-course) { color: #2b4228; } /* Same badge in dark (#b4cfa8 on #5d6d55 was 3.28:1): 5.12:1. */ html[data-thc-fx~="contrast"][data-thc-theme="dark"] .thc-badge:not(.thc-badge--in-course) { color: #f3f7ef; } /* Tutor's muted grey #757c8e was 3.7:1 on the cream canvas; Tutor's own #5b616f is 5.5:1 (5.7:1 on #f4f6f9). */ html[data-thc-fx~="contrast"]:not([data-thc-theme="dark"]) { --tutor-color-muted: #5b616f; --tutor-color-hints: #5b616f; } html[data-thc-fx~="contrast"]:not([data-thc-theme="dark"]) :is(.tutor-color-muted, .tutor-meta > *, .tutor-course-wishlist-btn, .tutor-course-share-btn, .tutor-instructor-designation, .tutor-btn-ghost, .tutor-single-course-sidebar .tutor-text-center.tutor-fs-7) { color: #5b616f; } /* Tutor Pro's "Gift this Course" button: #e03ad3 on #fbe9f7 was 3.2:1 (found while testing this build); #a0228f is 5.8:1. */ html[data-thc-fx~="contrast"]:not([data-thc-theme="dark"]) .tutor-btn-gift { color: #a0228f; } /* ---------- cart drawer above the CookieYes banner (banner is z-index 9999999; the drawer stopped at 100000) ---------- */ html[data-thc-fx~="cartz"] .wc-block-components-drawer__screen-overlay { z-index: 10000001 !important; } /* ---------- print ---------- */ @media print { html[data-thc-fx~="print"] :is(.thc-bar-header, .thc-bar, .thc-display__panel, .thc-display__button, .thc-site-header, .thc-site-footer, header.wp-block-template-part, footer.wp-block-template-part, #wp-skip-link, .skip-link, .cky-consent-container, .cky-btn-revisit-wrapper, .cky-modal, .cky-overlay, .wc-block-mini-cart, .wc-block-components-drawer__screen-overlay, .wc-block-components-notices__snackbar, .tutor-learning-sidebar, .tutor-learning-header, .tutor-learning-area-footer, .tutor-course-topic-single-footer, .tutor-course-details-tab .tutor-is-sticky, .tutor-single-course-sidebar, .tutor-modal, .thc-share, .thc-lesson-share, .thc-share-bar, #wpadminbar, .grecaptcha-badge) { display: none !important; } html[data-thc-fx~="print"], html[data-thc-fx~="print"] body { background: #fff !important; color: #000 !important; padding-top: 0 !important; margin-top: 0 !important; } html[data-thc-fx~="print"] body *:not(img):not(svg):not(svg *):not(video) { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; } /* Lesson and course content full width, and let Tutor's scrolling panes flow onto every page. */ html[data-thc-fx~="print"] :is(.tutor-learning-area, .tutor-learning-area-body, .tutor-learning-area-content, .tutor-learning-area-container, .tutor-lesson-content, .tutor-lesson-wrapper, .tutor-course-details-page, .tutor-course-details-page main, .wp-site-blocks, main, .entry-content, .wp-block-post-content) { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; position: static !important; flex: none !important; float: none !important; } html[data-thc-fx~="print"] img { max-width: 100% !important; filter: none !important; break-inside: avoid; } html[data-thc-fx~="print"] :is(h1, h2, h3, h4) { break-after: avoid; } html[data-thc-fx~="print"] a { text-decoration: underline; } /* Show where off-site links go. */ html[data-thc-fx~="print"] :is(main, article, .entry-content, .wp-block-post-content, .tutor-lesson-content, .tutor-course-details-content) a[href^="http"]:not([href*="herpcollective.org"])::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; } }