/* ========================================================================== RTC Speech Pathology — course stylesheet After the Release (C1) · Little Mouths, Strong Habits (C2) Built 2026-09-22 from Creative/design-system/ — Main (colour), Type, Components, MediaBlocks, LessonPage and LearnDash. Where this file and an artboard disagree, the artboard is the source and this is the bug. DEPLOY TO wp-content/themes/hello-elementor-child/rtc-courses/rtc-courses.css Loaded by rtc_course_styles() in the enqueue snippet, which fires ONLY when rtc_is_course_screen() matches RTC_C1_COURSE_ID or RTC_C2_COURSE_ID. Until one of those constants is defined this file is never requested at all. NO @font-face HERE, AND THAT IS DELIBERATE. rtc_course_fonts() emits both faces inline in wp_head with ABSOLUTE urls, because Breeze's Combine CSS rewrites stylesheets into another directory and every relative url() then resolves against the wrong path — the woff2 404s and every heading silently falls back to Georgia. There is no relative path in the inline block, so there is nothing for Breeze to break. This file therefore assumes the families already exist and only consumes them. (rtc-courses-fonts.css is the standalone/reference version of the same type layer WITH the @font-face blocks. It is not enqueued. Do not deploy both.) COLOUR IS DONE HERE, NOT IN LEARNDASH'S PICKERS. LearnDash's Accent / Progress / Notification pickers are site-wide, and rtcspeech.com.au runs a published, paid course — Oral Motor – Introduction, live since March 2023. Touching those pickers would recolour it. Everything below overrides LearnDash's output on our courses only, which gets the full palette with zero effect on the old course. Leave the pickers alone. TWO RULES FROM THE CONTRAST TABLE, WORTH MEMORISING · Accent text always uses the dark step (--rtc-accent-dk), never --rtc-accent. · --rtc-ink-3 and sage-lt never carry text at all. Hairlines and tints only. Contents 1 · Tokens 2 · Base — ground, type, rhythm 3 · LearnDash shell (LD30 + Focus Mode) ← the only part needing a staging check 4 · Lesson page furniture 5 · Media blocks A–F 6 · Lesson components 1–6 7 · Responsive 8 · Reduced motion, print, forced colours ========================================================================== */ /* ========================================================================== 1 · TOKENS The eleven from the LearnDash artboard, plus the few the component artboards use by literal hex. Two declarations are the entire difference between the two courses. ========================================================================== */ /* Declared on .rtc-course, not :root, so the tokens do not exist anywhere the body class is absent. Nothing consumes them outside this file in any case — every var() below sits inside a .rtc-course selector — but this makes the containment structural rather than a thing you have to reason about. */ .rtc-course { /* Page surfaces */ --rtc-paper: #FAF3E8; /* page ground */ --rtc-paper-2: #F2E7D5; /* cards, callouts, diagram bed */ --rtc-butter: #ECD5A8; /* provider-first band */ --rtc-rule: #E6D8C4; /* hairlines ONLY */ /* Ink */ --rtc-ink: #4A3B32; /* body copy, all headings — 9.71 AAA on paper */ --rtc-ink-2: #7A6154; /* captions, labels, metadata — 5.20 AA */ --rtc-ink-3: #9C8474; /* 3.19 — hairlines and dividers, NEVER text */ /* Settled/affirmative tint. Same in both courses — it reads as settled rather than as something needing attention, so it is not the accent. */ --rtc-tint: #E4EADF; --rtc-tint-ink: #333F2B; /* body inside the tint */ --rtc-tint-label: #4A5B3E; /* label + the "released"/"expected" heads */ --rtc-tint-mark: #5A6B48; /* takeaway bullets */ /* The single thread back to the parent brand. One element per surface, at most ~1% of the frame. Never a fill, never a ring or closed shape near anatomy, never a background for text. */ --rtc-red: #C8102E; /* Accent — per course. C1 terracotta. */ --rtc-accent: #B0533A; /* fills, large display. Text only at 18px+ */ --rtc-accent-dk: #8C3E29; /* ALL accent text — 6.72 AA on paper */ /* Type */ --rtc-display: 'Fraunces', Georgia, 'Times New Roman', serif; --rtc-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* Geometry. 3px is the system's only radius. */ --rtc-radius: 3px; --rtc-measure: 62ch; /* body copy max line length */ --rtc-gutter: 20px; /* mobile side padding — the design case */ --rtc-content: 760px; /* content column ceiling */ } /* Little Mouths overrides two declarations and nothing else. Applied by rtc_course_body_class(), which adds .rtc-c2 to alongside .rtc-course. Written .rtc-course.rtc-c2 so the scoping holds structurally rather than depending on the PHP always adding both. */ .rtc-course.rtc-c2 { --rtc-accent: #6E7F5A; /* sage — fills and rules. Not body text */ --rtc-accent-dk: #5A6B48; /* sage-dk — 5.25 AA */ } /* ========================================================================== 2 · BASE — ground, type, rhythm Scoped to .rtc-course throughout. The class is on , so this cannot reach a page that is not one of ours even if the file were loaded wrongly. ========================================================================== */ .rtc-course { background: var(--rtc-paper); color: var(--rtc-ink); font-family: var(--rtc-body); font-size: 17px; line-height: 28px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Hello Elementor is nearly styleless, but it does set a page background. Match it to paper so Focus Mode's shell has nothing showing through. */ .rtc-course, .rtc-course .site-main, .rtc-course #content, .rtc-course .ld-focus, .rtc-course .learndash-wrapper { background-color: var(--rtc-paper); } /* --- Headings ------------------------------------------------------------- SOFT 30 rounds Fraunces' terminals just enough to read warm rather than editorial-severe. Set once, here, so no heading can drift off it. WONK is pinned off at subset time, so no stylesheet can turn the alternates back on. */ .rtc-course h1, .rtc-course h2, .rtc-course .rtc-display { font-family: var(--rtc-display); font-variation-settings: 'SOFT' 30, 'opsz' 48; font-weight: 500; color: var(--rtc-ink); letter-spacing: -0.008em; text-wrap: balance; } .rtc-course h1 { font-size: 32px; line-height: 38px; margin: 0 0 8px; } .rtc-course h2 { font-size: 24px; line-height: 31px; margin: 34px 0 12px; } /* h3 is the "subhead" row of the type scale and is DM Sans, not Fraunces — at 18px Fraunces starts competing with the h2 above it. */ .rtc-course h3, .rtc-course .rtc-subhead { font-family: var(--rtc-body); font-size: 18px; line-height: 25px; font-weight: 600; color: var(--rtc-ink); margin: 30px 0 12px; letter-spacing: 0; /* Lesson subheads are marked up as

for a correct outline under the theme's

. Reset what the h2 rule would otherwise hand DM Sans — 'opsz' 48 in particular. */ font-variation-settings: normal; text-wrap: pretty; } .rtc-course h4 { font-family: var(--rtc-body); font-size: 15px; line-height: 24px; font-weight: 600; color: var(--rtc-ink); margin: 24px 0 8px; } /* --- Body ---------------------------------------------------------------- */ .rtc-course p { margin: 0 0 18px; max-width: var(--rtc-measure); text-wrap: pretty; } .rtc-course .rtc-small, .rtc-course .rtc-body-small { font-size: 15px; line-height: 24px; } .rtc-course .rtc-caption { font-size: 13px; line-height: 19px; color: var(--rtc-ink-2); margin: 8px 0 0; max-width: var(--rtc-measure); } /* The caption's teaching lead-in — "Lifting the tongue." — steps up to ink. */ .rtc-course .rtc-caption strong, .rtc-course .rtc-caption b { font-weight: 600; color: var(--rtc-ink); } .rtc-course .rtc-label, .rtc-course .rtc-eyebrow { font-family: var(--rtc-body); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rtc-ink-2); } /* --- Lists ---------------------------------------------------------------- */ .rtc-course ul, .rtc-course ol { max-width: var(--rtc-measure); margin: 0 0 18px; padding-left: 22px; } .rtc-course li { margin-bottom: 8px; } .rtc-course li::marker { color: var(--rtc-ink-3); } /* --- Links ---------------------------------------------------------------- */ .rtc-course a { color: var(--rtc-accent-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; } .rtc-course a:hover, .rtc-course a:focus { color: #6C3C24; } /* bark — 8.25 AAA */ .rtc-course.rtc-c2 a:hover, .rtc-course.rtc-c2 a:focus { color: #3F5136; } /* One visible focus treatment everywhere. WCAG 2.4.11. */ .rtc-course a:focus-visible, .rtc-course button:focus-visible, .rtc-course [tabindex]:focus-visible, .rtc-course .ld-button:focus-visible { outline: 2px solid var(--rtc-accent-dk); outline-offset: 2px; border-radius: 2px; } .rtc-course hr { border: 0; border-top: 1px solid var(--rtc-rule); margin: 30px 0; } .rtc-course img { max-width: 100%; height: auto; } .rtc-course strong, .rtc-course b { font-weight: 600; } /* ========================================================================== 3 · LEARNDASH SHELL — LD30 template + Focus Mode ────────────────────────────────────────────────────────────────────────── PARTLY VERIFIED — 23 Sep, against LearnDash 5.2.0 on staging. Everything above and below is our own markup and is certain; these selectors are LearnDash's, and LD moves them in minor releases. The runbook was written against 5.1.10 and the install is now 5.2.0, so this was checked. CONFIRMED on 5.2.0 / LD30: body carries `learndash-template-ld30`; .learndash-wrapper (plus a new .learndash-wrapper--course modifier); .ld-item-list / -item / .ld-item-name / .ld-item-title / .ld-item-list-item-preview / .ld-item-details; .ld-section-heading; .ld-status / .ld-status-icon / .ld-status-incomplete; .ld-tabs. CORRECTED after that check — three selectors below were wrong: .ld-lesson-item → .ld-item-lesson-item .ld-lesson-item-preview-heading → .ld-item-list-item-preview / .ld-item-name .ld-item-list-section-heading → .ld-section-heading The old spellings are kept alongside the new ones. A selector that matches nothing costs nothing, and keeping both survives a version moving either way. STILL UNVERIFIED — could not be reached from the admin account, because both existing courses are "paynow" and admin is not auto-enrolled, so every lesson URL redirects to the course page. These need one look at a real lesson with Focus Mode ON: .ld-focus-header · .ld-focus-sidebar · .ld-progress-bar · .ld-button .ld-alert · .ld-content-actions · .ld-breadcrumbs · .wpProQuiz_* Turning Focus Mode on for the staging look-and-see is the same task, so do both in one pass. If a rule does nothing, the selector moved — fix it here rather than adding !important further down. Nothing in this section is defensive about the old course, because it does not have to be: the file only ever loads on ours. ========================================================================== */ .rtc-course .learndash-wrapper { font-family: var(--rtc-body); color: var(--rtc-ink); } .rtc-course .learndash-wrapper h1, .rtc-course .learndash-wrapper h2 { font-family: var(--rtc-display); font-variation-settings: 'SOFT' 30, 'opsz' 48; font-weight: 500; } /* --- LearnDash's global colour pickers, restated for our course ----------- LearnDash applies the three site-wide pickers (Accent #dd3333, Progress #019e7c, Notifications) through utility classes — .ld-primary-*, .ld-secondary-*, .ld-tertiary-* — and marks them !important. Found on the staging lesson page, 30 Sep. The pickers stay exactly as they are for the Oral Motor course; these restate the same classes inside .rtc-course only, with the same !important, so they win here and nowhere else. primary (accent) -> terracotta-dk, the accent text/fill step secondary (progress/done) -> sage, "settled" — except action buttons tertiary (notifications) -> butter Every selector is prefixed .rtc-course .learndash-wrapper, one class more specific than LearnDash's own. */ .rtc-course .learndash-wrapper .ld-primary-background, .rtc-course .learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active::after { background: var(--rtc-accent-dk) !important; } .rtc-course .learndash-wrapper .ld-primary-color, .rtc-course .learndash-wrapper .ld-primary-color-hover:hover, .rtc-course .learndash-wrapper .ld-breadcrumbs a, .rtc-course .learndash-wrapper .ld-course-step-back { color: var(--rtc-accent-dk) !important; } .rtc-course .learndash-wrapper .ld-secondary-background { background-color: var(--rtc-tint-mark) !important; } .rtc-course .learndash-wrapper .ld-secondary-color, .rtc-course .learndash-wrapper .ld-secondary-color-hover:hover { color: var(--rtc-tint-mark) !important; } .rtc-course .learndash-wrapper .ld-secondary-in-progress-icon { border-left-color: var(--rtc-tint-mark) !important; border-top-color: var(--rtc-tint-mark) !important; } .rtc-course .learndash-wrapper .ld-tertiary-background { background-color: var(--rtc-butter) !important; } /* Action buttons stay terracotta even where LearnDash gives them the "secondary" green. The ID selectors match LearnDash's own. */ .rtc-course .learndash-wrapper #learndash_mark_complete_button, .rtc-course .learndash-wrapper .learndash_mark_complete_button, .rtc-course .learndash-wrapper #quiz_continue_link { background-color: var(--rtc-accent-dk) !important; color: var(--rtc-paper) !important; border: 0; border-radius: var(--rtc-radius); font-family: var(--rtc-body); font-weight: 600; } /* LearnDash paints every .ld-button with the accent picker through `.learndash-wrapper .ld-button:not([disabled]):not(.ld-button-reverse) :not(.ld-button-transparent):not(.ld--ignore-inline-css)` — (0,6,0), with !important — and picks black text for #dd3333. These mirror its selectors with .rtc-course in front: one class stronger, and only ever inside ours. */ .rtc-course .learndash-wrapper .ld-button:not([disabled]):not(.ld-button-reverse):not(.ld-button-transparent):not(.ld--ignore-inline-css) { background-color: var(--rtc-accent-dk) !important; color: var(--rtc-paper) !important; } .rtc-course .learndash-wrapper .ld-button:hover:not([disabled]):not(.ld-button-transparent):not(.ld--ignore-inline-css), .rtc-course .learndash-wrapper #learndash_mark_complete_button:hover { background-color: #6C3C24 !important; color: var(--rtc-paper) !important; opacity: 1; } .rtc-course.rtc-c2 .learndash-wrapper .ld-button:hover:not([disabled]):not(.ld-button-transparent):not(.ld--ignore-inline-css), .rtc-course.rtc-c2 .learndash-wrapper #learndash_mark_complete_button:hover { background-color: #3F5136 !important; } .rtc-course .learndash-wrapper .ld-button .ld-icon, .rtc-course .learndash-wrapper .ld-button .ld-text { color: inherit !important; } /* The "In progress" pill carries .ld-primary-background as well — this has to out-rank the rule above, hence the longer selector. Butter, never red. */ .rtc-course .learndash-wrapper .ld-status.ld-status-progress.ld-primary-background, .rtc-course .learndash-wrapper .ld-status.ld-status-progress { background: var(--rtc-butter) !important; color: var(--rtc-ink) !important; } .rtc-course .learndash-wrapper .ld-status.ld-status-complete { background: var(--rtc-tint) !important; color: var(--rtc-tint-ink) !important; } /* LearnDash's grey-blue furniture around the lesson (#e2e7ed / #f0f3f6 / #333). Colour only — LearnDash keeps its layout. */ .rtc-course .learndash-wrapper .ld-lesson-status, .rtc-course .learndash-wrapper .ld-breadcrumbs { background: var(--rtc-paper-2) !important; } .rtc-course .learndash-wrapper .ld-content-actions, .rtc-course .learndash-wrapper .ld-table-list, .rtc-course .learndash-wrapper .ld-table-list-items, .rtc-course .learndash-wrapper .ld-table-list-item, .rtc-course .learndash-wrapper .ld-table-list-header { border-color: var(--rtc-rule) !important; } .rtc-course .learndash-wrapper .ld-table-list-header { background: var(--rtc-paper-2) !important; color: var(--rtc-ink-2) !important; } .rtc-course .learndash-wrapper .ld-table-list-item-preview, .rtc-course .learndash-wrapper .ld-item-title, .rtc-course .learndash-wrapper .ld-topic-title, .rtc-course .learndash-wrapper .ld-table-list .ld-status-icon { color: var(--rtc-ink) !important; } .rtc-course .learndash-wrapper .ld-status { background: var(--rtc-rule); color: var(--rtc-ink-2); } /* The course page's lesson list, expand control and enrolment box — LearnDash greys (#495255, #617175, #f0f3f6) and the accent red, found on staging. */ .rtc-course .learndash-wrapper .ld-course-status { background: var(--rtc-paper-2) !important; border: 1px solid var(--rtc-rule); } .rtc-course .learndash-wrapper .ld-item-list .ld-item-name, .rtc-course .learndash-wrapper .ld-item-list .ld-item-title, .rtc-course .learndash-wrapper .ld-tooltip { color: var(--rtc-ink) !important; } .rtc-course .learndash-wrapper .ld-item-list .ld-item-name:hover { color: var(--rtc-accent-dk) !important; } .rtc-course .learndash-wrapper .ld-item-components, .rtc-course .learndash-wrapper .ld-item-component { color: var(--rtc-ink-2) !important; } .rtc-course .learndash-wrapper .ld-status-icon.ld-status-incomplete { color: var(--rtc-ink-3) !important; } .rtc-course .learndash-wrapper .ld-expand-button, .rtc-course .learndash-wrapper .ld-expand-button * { color: var(--rtc-accent-dk) !important; } /* Mirrors LearnDash's `.ld-expand-button.ld-button-alternate:not([disabled]) .ld-icon` (0,5,0, background-color !important) — the arrow on lessons that have a quiz under them. */ .rtc-course .learndash-wrapper .ld-expand-button .ld-icon, .rtc-course .learndash-wrapper .ld-expand-button.ld-button-alternate:not([disabled]) .ld-icon { background-color: var(--rtc-accent-dk) !important; color: var(--rtc-paper) !important; } .rtc-course .learndash-wrapper .ld-primary-background { background-color: var(--rtc-accent-dk) !important; } /* --- Focus Mode bar ------------------------------------------------------ VERIFIED on staging with Focus Mode on, 30 Sep. The artboard shows a terracotta bar, but Focus Mode puts the SITE logo in it, and the logo is one setting for every course — the red RTC logo. Red on terracotta clashes and reads poorly, so the bar is paper with a hairline instead. Selectors mirror LearnDash's own (`.learndash-wrapper .ld-focus .ld-focus-header …`) with .rtc-course in front, one class stronger. */ .rtc-course .learndash-wrapper .ld-focus .ld-focus-header { background: var(--rtc-paper); border-bottom: 1px solid var(--rtc-rule); box-shadow: none; } .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-course-title, .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo { color: var(--rtc-ink); font-family: var(--rtc-display); font-variation-settings: 'SOFT' 30; font-weight: 600; } .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-progress-steps, .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-progress-stats, .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-text { font-family: var(--rtc-body); color: var(--rtc-ink-2); } /* Progress in the bar: rule track, terracotta fill (the artboard's). The fill carries .ld-secondary-background, which §3 maps to sage for "complete" elsewhere — this out-ranks it for the bar. */ .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-bar { background: var(--rtc-rule) !important; } .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-bar .ld-progress-bar-percentage { background-color: var(--rtc-accent) !important; } /* Mark Complete in the bar — LearnDash makes it green text there. */ .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete .learndash_mark_complete_button:not(.ld--ignore-inline-css), .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .learndash_mark_complete_button { background-color: var(--rtc-accent-dk) !important; color: var(--rtc-paper) !important; border: 0 !important; border-radius: var(--rtc-radius); } /* The avatar menu (Course Home · My dashboard · Logout). LearnDash fills it with the accent picker's red and white text. */ .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items, .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a { background-color: var(--rtc-accent-dk) !important; color: var(--rtc-paper) !important; } .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a:hover, .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a:focus { background-color: #6C3C24 !important; } .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items::before { border-bottom-color: var(--rtc-accent-dk) !important; } /* Transparent buttons (Focus Mode's "Previous Lesson" in the bar). LearnDash: `.learndash-wrapper .ld-button.ld-button-transparent { color: accent !important }` — #dd3333 on paper, 4.15:1. Mirrored one class stronger. */ .rtc-course .learndash-wrapper .ld-button.ld-button-transparent, .rtc-course .learndash-wrapper .ld-button.ld-button-transparent .ld-text, .rtc-course .learndash-wrapper .ld-button.ld-button-transparent .ld-icon { color: var(--rtc-accent-dk) !important; } /* The "Lesson Content" box body under Focus Mode — LearnDash #f0f3f6. */ .rtc-course .learndash-wrapper .ld-table-list, .rtc-course .learndash-wrapper .ld-focus .ld-table-list { background-color: var(--rtc-paper) !important; } /* --- Focus Mode sidebar ---------------------------------------------------- */ .rtc-course .learndash-wrapper .ld-focus .ld-focus-sidebar { background-color: var(--rtc-paper-2); border-right: 1px solid var(--rtc-rule); } .rtc-course .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading { background-color: var(--rtc-accent-dk) !important; color: var(--rtc-paper) !important; } .rtc-course .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading a, .rtc-course .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-icon { background-color: transparent !important; color: var(--rtc-paper) !important; } .rtc-course .learndash-wrapper .ld-focus-sidebar .ld-lesson-title, .rtc-course .learndash-wrapper .ld-focus-sidebar .ld-lesson-item-preview-heading, .rtc-course .learndash-wrapper .ld-focus-sidebar .ld-topic-title { color: var(--rtc-ink) !important; } .rtc-course .learndash-wrapper .ld-lesson-item.ld-is-current-lesson .ld-lesson-title, .rtc-course .learndash-wrapper .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading { color: var(--rtc-accent-dk) !important; font-weight: 600; } .rtc-course .learndash-wrapper .ld-course-navigation .ld-status-icon.ld-status-incomplete { border-color: var(--rtc-ink-3) !important; } .rtc-course .learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson .ld-status-incomplete { border-color: var(--rtc-accent-dk) !important; } /* --- Progress ------------------------------------------------------------ */ .rtc-course .ld-progress-bar { background: var(--rtc-rule); border: 0; height: 3px; border-radius: 0; } .rtc-course .ld-progress-bar .ld-progress-bar-percentage { background: var(--rtc-accent); height: 3px; border-radius: 0; } .rtc-course .ld-progress-stats, .rtc-course .ld-progress-percentage { font-family: var(--rtc-body); font-size: 12px; color: var(--rtc-ink-2); } /* --- Sidebar / course navigation ----------------------------------------- */ .rtc-course .ld-focus-sidebar, .rtc-course .ld-course-navigation { background: var(--rtc-paper-2); border-right: 1px solid var(--rtc-rule); } /* .ld-item-list-item-preview and .ld-item-name are the 5.2.0 spellings and are confirmed present; the other two are the 5.1.x names, kept as a hedge. */ .rtc-course .ld-item-list-item-preview, .rtc-course .ld-item-name, .rtc-course .ld-focus-sidebar .ld-lesson-item-preview-heading, .rtc-course .ld-table-list-item-preview { font-family: var(--rtc-body); font-size: 15px; line-height: 22px; color: var(--rtc-ink); } .rtc-course .ld-item-lesson-item.ld-is-current-lesson .ld-item-name, .rtc-course .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading { font-weight: 600; color: var(--rtc-accent-dk); } .rtc-course .ld-section-heading, .rtc-course .ld-lesson-item-section-heading { font-family: var(--rtc-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rtc-ink-2); } /* --- Status icons --------------------------------------------------------- Complete uses the settled sage, not the accent — finishing a lesson is not an event that needs the brand shouting at a parent. */ .rtc-course .ld-status-icon.ld-status-complete, .rtc-course .ld-status-complete { background-color: var(--rtc-tint-mark); border-color: var(--rtc-tint-mark); } .rtc-course .ld-status-icon.ld-status-incomplete, .rtc-course .ld-status-incomplete { background-color: transparent; border: 1.5px solid var(--rtc-ink-3); } .rtc-course .ld-status.ld-status-progress, .rtc-course .ld-status-in-progress { background-color: var(--rtc-butter); color: var(--rtc-ink); } /* --- Buttons -------------------------------------------------------------- LearnDash's default button is a filled pill. Ours is squarer and quieter. */ .rtc-course .ld-button, .rtc-course .learndash-wrapper .ld-button { font-family: var(--rtc-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--rtc-accent-dk); color: var(--rtc-paper); border: 1.5px solid var(--rtc-accent-dk); border-radius: var(--rtc-radius); padding: 11px 24px; box-shadow: none; transition: background-color 120ms ease, border-color 120ms ease; } .rtc-course .ld-button:hover, .rtc-course .learndash-wrapper .ld-button:hover { background: #6C3C24; border-color: #6C3C24; color: var(--rtc-paper); } .rtc-course.rtc-c2 .ld-button:hover { background: #3F5136; border-color: #3F5136; } .rtc-course .ld-button.ld-button-transparent, .rtc-course .ld-button-alternate { background: transparent; color: var(--rtc-accent-dk); border-color: var(--rtc-ink-3); } .rtc-course .ld-button.ld-button-transparent:hover { background: var(--rtc-paper-2); color: var(--rtc-accent-dk); border-color: var(--rtc-accent-dk); } /* --- Alerts --------------------------------------------------------------- LearnDash's own notices. Butter, never red — same reasoning as the provider-first band: making it alarming would undercut it. */ .rtc-course .ld-alert, .rtc-course .ld-alert-warning { background: var(--rtc-butter); border: 0; border-radius: var(--rtc-radius); color: var(--rtc-ink); font-size: 15px; line-height: 25px; } .rtc-course .ld-alert-success { background: var(--rtc-tint); color: var(--rtc-tint-ink); } .rtc-course .ld-alert .ld-alert-icon { color: var(--rtc-ink-2); background: none; } /* --- Content actions, breadcrumbs, tabs ---------------------------------- */ .rtc-course .ld-content-actions, .rtc-course .ld-breadcrumbs { border-top: 1px solid var(--rtc-rule); background: transparent; font-size: 13px; color: var(--rtc-ink-2); } .rtc-course .ld-tabs .ld-tab-list .ld-tab.ld-active { border-bottom-color: var(--rtc-accent); color: var(--rtc-accent-dk); } /* --- Course / lesson listing on the course page -------------------------- */ .rtc-course .ld-item-list .ld-item-list-item { background: var(--rtc-paper-2); border: 1px solid var(--rtc-rule); border-radius: var(--rtc-radius); margin-bottom: 8px; } .rtc-course .ld-item-list .ld-item-name { font-family: var(--rtc-body); font-size: 15px; font-weight: 600; color: var(--rtc-ink); } .rtc-course .ld-item-list .ld-section-heading, .rtc-course .ld-item-list-section-heading { font-family: var(--rtc-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rtc-ink-2); margin-top: 26px; } /* The enrol / price box on the course page. Confirmed present on 5.2.0 as .ld-course-status with a -mode-paynow / -not-enrolled modifier. Our course is private and free-standing, so this may never render — styled anyway so it cannot appear unstyled if the course is ever put behind a price. */ .rtc-course .ld-course-status { background: var(--rtc-paper-2); border: 1px solid var(--rtc-rule); border-radius: var(--rtc-radius); } .rtc-course .ld-course-status-label, .rtc-course .ld-course-status-price { font-family: var(--rtc-body); color: var(--rtc-ink-2); } /* --- Quiz (wpProQuiz) ----------------------------------------------------- Called a check-in, never a test. Untimed, retakeable, no score shown, no pass mark — the explanation is the payload. Where LearnDash insists on emitting a score element anyway, §6.6 hides it. */ .rtc-course .wpProQuiz_content { background: var(--rtc-paper-2); border-radius: var(--rtc-radius); padding: 24px 26px; font-family: var(--rtc-body); } .rtc-course .wpProQuiz_header, .rtc-course .wpProQuiz_question_page { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rtc-ink-2); } .rtc-course .wpProQuiz_question_text { font-family: var(--rtc-display); font-variation-settings: 'SOFT' 30, 'opsz' 48; font-size: 19px; line-height: 27px; font-weight: 500; color: var(--rtc-ink); margin-bottom: 16px; } .rtc-course .wpProQuiz_questionList { border: 0; } .rtc-course .wpProQuiz_questionListItem { background: transparent; border: 0; margin-bottom: 10px; } .rtc-course .wpProQuiz_questionListItem label { display: inline-block; font-size: 15px; font-weight: 500; color: var(--rtc-ink); border: 1.5px solid var(--rtc-ink-3); border-radius: var(--rtc-radius); padding: 9px 26px; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; } .rtc-course .wpProQuiz_questionListItem label:hover { border-color: var(--rtc-accent-dk); background: var(--rtc-paper); } .rtc-course .wpProQuiz_questionListItem input[type="radio"], .rtc-course .wpProQuiz_questionListItem input[type="checkbox"] { margin-right: 8px; accent-color: var(--rtc-accent-dk); } .rtc-course .wpProQuiz_response { background: var(--rtc-paper); border-radius: var(--rtc-radius); border: 1px solid var(--rtc-rule); font-size: 15px; line-height: 24px; } .rtc-course .wpProQuiz_correct_answer { background: var(--rtc-tint) !important; } .rtc-course .wpProQuiz_incorrect_answer { background: var(--rtc-paper-2) !important; } .rtc-course .wpProQuiz_button, .rtc-course .wpProQuiz_button2 { font-family: var(--rtc-body); font-size: 15px; font-weight: 600; background: var(--rtc-accent-dk); color: var(--rtc-paper); border: 0; border-radius: var(--rtc-radius); padding: 11px 24px; text-shadow: none; box-shadow: none; } /* No score, no pass mark, no percentage. If the shell emits them, they go. */ .rtc-course .wpProQuiz_points, .rtc-course .wpProQuiz_resultsList .wpProQuiz_points, .rtc-course .ld-quiz-scored, .rtc-course .wpProQuiz_graded_points { display: none !important; } /* ========================================================================== 4 · LESSON PAGE FURNITURE The masthead, the content column, and the "next" footer. Everything from here down is our own markup, authored in the lesson editor. ========================================================================== */ .rtc-course .rtc-lesson { max-width: var(--rtc-content); margin: 0 auto; padding: 26px var(--rtc-gutter) 40px; } /* --- Masthead ------------------------------------------------------------ */ .rtc-course .rtc-lesson-head { margin-bottom: 22px; } .rtc-course .rtc-lesson-head .rtc-eyebrow { display: block; margin-bottom: 8px; } .rtc-course .rtc-lesson-title { font-family: var(--rtc-display); font-variation-settings: 'SOFT' 30, 'opsz' 48; font-size: 32px; line-height: 38px; font-weight: 500; letter-spacing: -0.008em; color: var(--rtc-ink); margin: 0 0 8px; text-wrap: balance; } /* The long spreadsheet title, split off the display title. */ .rtc-course .rtc-lesson-sub { font-size: 15px; line-height: 23px; color: var(--rtc-ink-2); margin: 0 0 14px; max-width: var(--rtc-measure); } .rtc-course .rtc-lesson-meta { font-size: 12px; font-weight: 500; letter-spacing: 0.03em; color: var(--rtc-ink-2); /* was ink-3 (3.19:1, fails AA). The contrast table says ink-3 never carries text; the artboard's use of it here was the exception that lost. ink-2 is 5.20:1. Fixed 30 Sep */ padding-bottom: 22px; border-bottom: 1px solid var(--rtc-rule); } /* --- Next lesson --------------------------------------------------------- */ .rtc-course .rtc-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--rtc-rule); margin-top: 30px; padding-top: 20px; text-decoration: none; } .rtc-course .rtc-next-label { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rtc-ink-2); margin-bottom: 3px; } .rtc-course .rtc-next-title { font-size: 15px; font-weight: 600; line-height: 21px; color: var(--rtc-accent-dk); } .rtc-course .rtc-next svg { flex-shrink: 0; stroke: var(--rtc-accent-dk); } /* ========================================================================== 5 · MEDIA BLOCKS A–F Six patterns cover every media slot in the build map. ========================================================================== */ /* --- A · Story hero ------------------------------------------------------- Full content width, as shot, NO CAPTION — it sets the situation rather than teaching anything, and a caption would ask the reader to study it. The only block that runs edge to edge. */ .rtc-course .rtc-hero { margin: 22px 0 0; } .rtc-course .rtc-hero img, .rtc-course .rtc-hero video { display: block; width: 100%; height: auto; border-radius: var(--rtc-radius); } /* --- B · Show-me pair ----------------------------------------------------- Identical framing, a 2px ink divider, and ONE SHARED CAPTION — two captions invite the reader to compare the words instead of the pictures. Under 640px it stacks and the divider becomes horizontal. It never becomes a carousel, because the comparison is the content. (§7 holds the stacked case.) */ .rtc-course .rtc-pair { margin: 24px 0 0; } .rtc-course .rtc-pair-frames { display: flex; align-items: stretch; gap: 0; border-radius: var(--rtc-radius); overflow: hidden; } /* The divider is a
too, so it has to be excluded here — otherwise it takes flex: 1 1 0 and grows to a third of the block, and the 2px width below never applies. */ .rtc-course .rtc-pair-frames > figure, .rtc-course .rtc-pair-frames > div:not(.rtc-pair-divider) { flex: 1 1 0; margin: 0; min-width: 0; } .rtc-course .rtc-pair-frames img { display: block; width: 100%; height: auto; border-radius: 0; } /* flex shorthand, not flex-shrink alone: the basis is what holds it at 2px in both directions — width when the pair is side by side, height once §7 stacks it into a column. */ .rtc-course .rtc-pair-divider { flex: 0 0 2px; align-self: stretch; background: var(--rtc-ink); } .rtc-course .rtc-pair-labels { display: flex; gap: 0; margin-top: 8px; } .rtc-course .rtc-pair-labels > * { flex: 1 1 0; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } .rtc-course .rtc-pair-label--restricted { color: var(--rtc-accent-dk); } .rtc-course .rtc-pair-label--released { color: var(--rtc-tint-label); } .rtc-course .rtc-pair .rtc-caption { margin-top: 7px; } /* --- C · Exercise clip, square · 960 × 960 ------------------------------- Six of the exercise clips. Autoplays muted on scroll into view, loops, visible replay control. The clips have NO AUDIO AT ALL, so the movement is written out beside them — that sentence is the accessible description and the teaching text at once, which is why it is not duplicated into an aria-label. Poster is always the clip's own start or end still. */ .rtc-course .rtc-clip { display: flex; gap: 22px; align-items: flex-start; margin: 26px 0 0; } .rtc-course .rtc-clip-frame { position: relative; width: 300px; flex-shrink: 0; border-radius: var(--rtc-radius); overflow: hidden; background: var(--rtc-paper-2); aspect-ratio: 1 / 1; /* 960 × 960 */ } .rtc-course .rtc-clip-frame video, .rtc-course .rtc-clip-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- D · Exercise clip, wide · 1280 × 704 -------------------------------- The Froggy game is the ONLY wide clip in either course — it came off a 16:9 story frame and keeps Froggy in shot, which is the point of it. A separate container: letterboxing it into the square block wastes half the frame and crops the toy out. The two ratios are not interchangeable. */ .rtc-course .rtc-clip--wide { display: block; } .rtc-course .rtc-clip--wide .rtc-clip-frame { width: 100%; max-width: 520px; aspect-ratio: 1280 / 704; /* 20 : 11 */ } .rtc-course .rtc-clip--wide .rtc-clip-body { margin-top: 9px; max-width: 520px; } /* Badge — "6s · loops · no sound" */ .rtc-course .rtc-clip-badge { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; background: rgba(74, 59, 50, 0.82); border-radius: 20px; padding: 6px 13px 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--rtc-paper); pointer-events: none; } .rtc-course .rtc-clip-badge svg { fill: var(--rtc-paper); flex-shrink: 0; } /* Replay — visible, not a hover affordance. */ .rtc-course .rtc-clip-replay { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(74, 59, 50, 0.82); color: var(--rtc-paper); border: 0; border-radius: 20px; padding: 6px 13px; font-family: var(--rtc-body); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; } .rtc-course .rtc-clip-replay:hover { background: rgba(74, 59, 50, 0.95); } .rtc-course .rtc-clip-body { flex-grow: 1; } .rtc-course .rtc-clip-title { font-size: 15px; font-weight: 600; line-height: 22px; color: var(--rtc-ink); margin: 0 0 5px; } .rtc-course .rtc-clip-body .rtc-caption { margin-top: 0; } /* --- E · Peek inside ----------------------------------------------------- Deliberately the SMALLEST media block, capped around 290–330px even on desktop. Everything else scales up; this does not. A mouth interior at full content width is confronting, and the reader is often four days post-procedure and frightened. The caption carries the reassurance and always precedes the clinical detail — that ordering is markup, not CSS, so write it that way in the editor. */ .rtc-course .rtc-peek { display: flex; gap: 22px; align-items: flex-start; margin: 26px 0 0; } .rtc-course .rtc-peek-frame { width: 290px; max-width: 330px; flex-shrink: 0; } .rtc-course .rtc-peek-frame img { display: block; width: 100%; height: auto; border-radius: var(--rtc-radius); } .rtc-course .rtc-peek-body { flex-grow: 1; } .rtc-course .rtc-peek-body .rtc-caption { margin: 0 0 14px; font-size: 15px; /* the reassurance is body-small, not caption-small */ line-height: 24px; color: var(--rtc-ink); } /* --- F · Information diagram --------------------------------------------- Landscape, full content width, on paper-2 so it separates from the page without a border doing the work. Alt text is never written fresh — every diagram carries a authored as alt text. Copy it across verbatim; if the and alt-text.md disagree, the wins. */ .rtc-course .rtc-diagram { background: var(--rtc-paper-2); border: 1px solid var(--rtc-rule); border-radius: var(--rtc-radius); padding: 30px 34px; margin: 26px 0 0; } .rtc-course .rtc-diagram img, .rtc-course .rtc-diagram svg { display: block; width: 100%; height: auto; } .rtc-course .rtc-diagram + .rtc-caption { margin-top: 9px; } /* ========================================================================== 6 · LESSON COMPONENTS 1–6 Course 2 swaps every accent to sage-dk via the token, changing nothing else. ========================================================================== */ /* --- 1 · Key takeaways · closes every lesson ------------------------------ Sage tint, NOT the accent — it reads as settled rather than as something needing attention. The same block in both courses, which is why it uses the tint tokens and never --rtc-accent. */ .rtc-course .rtc-takeaways { background: var(--rtc-tint); border-radius: var(--rtc-radius); padding: 24px 26px; margin: 26px 0 0; } .rtc-course .rtc-takeaways-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rtc-tint-label); margin-bottom: 13px; } .rtc-course .rtc-takeaways ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; max-width: none; } .rtc-course .rtc-takeaways li { position: relative; padding-left: 18px; margin: 0; font-size: 15px; line-height: 24px; color: var(--rtc-tint-ink); } .rtc-course .rtc-takeaways li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--rtc-tint-mark); } /* --- 2 · Provider-first rule --------------------------------------------- Butter, NEVER red. The Medical Disclaimer's position stated calmly — making it alarming would undercut it. Used on 0.1 and anywhere guidance could be mistaken for instruction. */ .rtc-course .rtc-provider { background: var(--rtc-butter); border-radius: var(--rtc-radius); padding: 22px 26px; margin: 24px 0 0; font-size: 15px; line-height: 25px; color: var(--rtc-ink); } .rtc-course .rtc-provider p { margin: 0; max-width: none; } .rtc-course .rtc-provider strong { font-weight: 600; } /* --- 3 · Normal vs call your provider ------------------------------------ Every line in both columns is a clinical claim and stays bracketed until sign-off. ONE red triangle carries the whole warning — no red fill, no red border, no icon repetition. An anxious parent at 2 am is the reader. */ .rtc-course .rtc-flags { background: var(--rtc-paper-2); border-radius: var(--rtc-radius); padding: 24px 26px; margin: 26px 0 0; } .rtc-course .rtc-flags-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .rtc-course .rtc-flags-head { display: flex; gap: 8px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 11px; } .rtc-course .rtc-flags-head--expected { color: var(--rtc-tint-label); } .rtc-course .rtc-flags-head--call { color: var(--rtc-accent-dk); } /* The one red element on the surface. A triangle, ~1% of the frame. */ .rtc-course .rtc-flags-head--call svg { fill: var(--rtc-red); flex-shrink: 0; } .rtc-course .rtc-flags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; max-width: none; } .rtc-course .rtc-flags li { margin: 0; font-size: 15px; line-height: 24px; color: var(--rtc-ink); } /* Unsigned clinical copy, still bracketed. Visible on purpose — if this is still rendering when the course goes public, something has gone wrong. */ .rtc-course .rtc-placeholder { color: var(--rtc-ink-2); /* ink-3 failed AA as text, 30 Sep */ font-style: italic; } /* --- 4 · Self-identify checkpoint · 1.2 ---------------------------------- Hollow boxes, no tick marks and no scoring. Nothing here may resolve into a label for the child. */ .rtc-course .rtc-checkpoint { border: 1px solid var(--rtc-rule); border-radius: var(--rtc-radius); background: var(--rtc-paper); padding: 24px 26px; margin: 26px 0 0; } .rtc-course .rtc-checkpoint-intro { font-size: 15px; line-height: 24px; color: var(--rtc-ink-2); margin: 0 0 16px; max-width: none; } .rtc-course .rtc-checkpoint ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; max-width: none; } .rtc-course .rtc-checkpoint li { position: relative; padding-left: 29px; margin: 0; font-size: 15px; line-height: 24px; color: var(--rtc-ink); } .rtc-course .rtc-checkpoint li::before { content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border: 1.5px solid var(--rtc-ink-3); border-radius: 2px; } .rtc-course .rtc-checkpoint li strong { font-weight: 600; } /* --- 5 · Downloadable ---------------------------------------------------- THE ONE PLACE A 3PX ACCENT EDGE IS ALLOWED, because it marks a class of thing rather than decorating a box. Always names the format, page count and both paper sizes. */ .rtc-course .rtc-download { display: flex; gap: 16px; align-items: center; border: 1px solid var(--rtc-rule); border-left: 3px solid var(--rtc-accent); border-radius: var(--rtc-radius); background: var(--rtc-paper); padding: 17px 22px; margin: 24px 0 0; text-decoration: none; color: inherit; transition: background-color 120ms ease; } .rtc-course a.rtc-download:hover { background: var(--rtc-paper-2); } .rtc-course .rtc-download svg { flex-shrink: 0; stroke: var(--rtc-accent-dk); fill: none; } .rtc-course .rtc-download-title { font-size: 15px; font-weight: 600; line-height: 21px; color: var(--rtc-ink); } .rtc-course .rtc-download-meta { font-size: 12px; line-height: 18px; color: var(--rtc-ink-2); } /* --- 6 · Check-in -------------------------------------------------------- Called a check-in, NEVER a test or an assessment. Untimed, retakeable, no score shown, no pass mark — the explanation is the payload. This is the hand-authored version; §3 restyles LearnDash's own quiz shell to match. */ .rtc-course .rtc-checkin { background: var(--rtc-paper-2); border-radius: var(--rtc-radius); padding: 24px 26px; margin: 26px 0 0; } .rtc-course .rtc-checkin-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rtc-ink-2); margin-bottom: 6px; } .rtc-course .rtc-checkin-question { font-family: var(--rtc-display); font-variation-settings: 'SOFT' 30, 'opsz' 48; font-size: 19px; line-height: 27px; font-weight: 500; color: var(--rtc-ink); margin: 0 0 16px; max-width: none; } .rtc-course .rtc-checkin-options { display: flex; gap: 10px; flex-wrap: wrap; } .rtc-course .rtc-checkin-options > * { font-size: 15px; font-weight: 500; color: var(--rtc-ink); border: 1.5px solid var(--rtc-ink-3); border-radius: var(--rtc-radius); padding: 9px 26px; background: transparent; cursor: pointer; } .rtc-course .rtc-checkin-options > *:hover { border-color: var(--rtc-accent-dk); background: var(--rtc-paper); } /* ========================================================================== 6b · LESSON-BODY BLOCKS — added 30 Sep for the lesson pages The Leana-voice copy uses five blockquote kinds, a table, single stills and portrait diagrams that the six components above do not cover. ========================================================================== */ /* Lesson subheads are

. §3 gives every h2 inside .learndash-wrapper Fraunces at (0,2,1) — and lesson content sits inside that wrapper — so the subhead style is restated here at (0,3,1) to win. Found by rendering 1.1 on staging, 30 Sep. */ .rtc-course .rtc-lesson-body h2.rtc-subhead { font-family: var(--rtc-body); font-size: 18px; line-height: 25px; font-weight: 600; letter-spacing: 0; font-variation-settings: normal; margin: 30px 0 12px; color: var(--rtc-ink); } /* The body wrapper. The theme or Focus Mode already pads the column, so this only caps the measure. */ .rtc-course .rtc-lesson-body { max-width: var(--rtc-content); } .rtc-course .rtc-lesson-body > .rtc-lesson-sub { margin-top: 4px; } .rtc-course .rtc-lesson-body > .rtc-lesson-meta { margin-bottom: 4px; } /* Key message — "The release makes the change possible…". Typography alone, no box and no accent edge (the 3px edge belongs to downloadables only). */ .rtc-course blockquote.rtc-pullquote { margin: 28px 0; padding: 0; border: 0; font-family: var(--rtc-display); font-variation-settings: 'SOFT' 30, 'opsz' 36; font-size: 22px; line-height: 30px; font-weight: 500; color: var(--rtc-ink); max-width: 34ch; text-wrap: balance; } .rtc-course blockquote.rtc-pullquote p { margin: 0; max-width: none; } .rtc-course blockquote.rtc-pullquote strong { font-weight: 500; } /* Things for a parent to say to a provider. Quoted speech, on a card. */ .rtc-course .rtc-script { margin: 20px 0; padding: 18px 22px; background: var(--rtc-paper-2); border-radius: var(--rtc-radius); border: 0; font-size: 16px; line-height: 26px; color: var(--rtc-ink); } .rtc-course .rtc-script p { margin: 0; max-width: none; } .rtc-course .rtc-script p + p { margin-top: 10px; } /* Provider-first and safety notes share the butter band (§6.2); these give it paragraph rhythm when it holds more than one. */ .rtc-course .rtc-provider p + p { margin-top: 10px; } /* The red-flag tiers — expected / call your provider / emergency — stacked, because the lists are long and a parent reads them top to bottom. One red triangle only, on the emergency tier. */ .rtc-course .rtc-flags-tier + .rtc-flags-tier { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rtc-rule); } .rtc-course .rtc-flags-tier p { font-size: 15px; line-height: 24px; margin: 0 0 10px; max-width: none; } .rtc-course .rtc-flags-tier p:last-child { margin-bottom: 0; } .rtc-course .rtc-flags-tier ul { gap: 6px; } .rtc-course .rtc-flags-tier ul li { padding-left: 16px; position: relative; } .rtc-course .rtc-flags-tier ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--rtc-ink-3); } .rtc-course .rtc-flags-head--emergency { color: var(--rtc-ink); } .rtc-course .rtc-flags-head--emergency svg { fill: var(--rtc-red); flex-shrink: 0; } .rtc-course .rtc-flags-tier--emergency { background: var(--rtc-paper); margin: 20px -26px -24px; padding: 20px 26px 24px !important; border-top: 1px solid var(--rtc-rule); border-radius: 0 0 var(--rtc-radius) var(--rtc-radius); } /* Tables — the 2.1 "who does what, taught where" lists. */ .rtc-course .rtc-table { width: 100%; max-width: var(--rtc-content); border-collapse: collapse; margin: 12px 0 22px; font-size: 15px; line-height: 23px; } .rtc-course .rtc-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rtc-ink-2); padding: 0 14px 8px 0; border-bottom: 1px solid var(--rtc-rule); } .rtc-course .rtc-table td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rtc-rule); vertical-align: top; color: var(--rtc-ink); } .rtc-course .rtc-table td:last-child { color: var(--rtc-ink-2); white-space: nowrap; } /* A single show-me still — full content width, like the hero, but inside the teaching flow. */ .rtc-course .rtc-figure { margin: 24px 0 0; } .rtc-course .rtc-figure img { display: block; width: 100%; height: auto; border-radius: var(--rtc-radius); } /* Portrait technique diagrams (the four M3-* drawings, 804 wide and up to 1450 tall). Full width would stand them 1,200px high; capped and centred. */ .rtc-course .rtc-diagram--portrait { padding: 24px; } .rtc-course .rtc-diagram--portrait img { max-width: 400px; margin: 0 auto; } /* Two peek-inside shots in a row (2.2: week one, then healed). Each keeps the peek block's cap — they never grow. */ .rtc-course .rtc-peeks { display: flex; flex-wrap: wrap; gap: 16px; margin: 26px 0 0; } .rtc-course .rtc-peeks .rtc-peek-frame { width: 290px; max-width: 100%; flex-shrink: 1; } /* Downloadable whose PDF is not uploaded yet — same block, no link. */ .rtc-course .rtc-download--pending { cursor: default; } .rtc-course .rtc-download--pending .rtc-placeholder { font-style: italic; } /* The Course 2 invitation (5.2). Styled, deliberately not a link yet — the course does not exist, and the wording is one of Leana's open questions. */ .rtc-course .rtc-cta { margin: 26px 0 0; padding: 20px 22px; border: 1px solid var(--rtc-rule); border-radius: var(--rtc-radius); background: var(--rtc-paper); } .rtc-course .rtc-cta p { margin: 0; max-width: none; font-weight: 600; color: var(--rtc-accent-dk); } .rtc-course .rtc-cta p + p { margin-top: 6px; font-weight: 400; color: var(--rtc-ink-2); font-size: 15px; } /* The buy box on the free sample lesson (rtc-sales-enqueue.php, rtc_sample_lesson_buy_box). Shown only to people without the course. LearnDash's own Stripe button inside it, painted like Mark Complete; the price line and bundle link quiet, as on the sales page. */ .rtc-course .rtc-sample-buy form { margin: 16px 0 10px; } .rtc-course .rtc-sample-buy #btn-join, .rtc-course .rtc-sample-buy .btn-join { display: inline-block; width: auto; min-height: 48px; padding: 14px 28px !important; background-color: var(--rtc-accent-dk) !important; color: var(--rtc-paper) !important; border: 0 !important; border-radius: var(--rtc-radius) !important; font-family: var(--rtc-body) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.25 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; } .rtc-course .learndash-wrapper .rtc-sample-buy #btn-join:hover, .rtc-course .rtc-sample-buy #btn-join:hover, .rtc-course .rtc-sample-buy #btn-join:focus-visible { background-color: #6C3C24 !important; } .rtc-course .rtc-cta p.rtc-sample-buy__meta, .rtc-course .rtc-cta p.rtc-sample-buy__more { margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--rtc-ink-2); } .rtc-course .rtc-sample-buy a:not(.btn-join) { color: var(--rtc-accent-dk) !important; text-decoration: underline !important; text-underline-offset: 2px; } .rtc-course .rtc-sample-buy .nw { white-space: nowrap; } /* LearnDash's "Lesson Content" header. It carries .ld-primary-background, so it was terracotta with our ink-2 text on it — 1.29:1. A calm paper-2 header with ink text instead (8.75:1), like every other card in the system. */ .rtc-course .learndash-wrapper .ld-table-list .ld-table-list-header, .rtc-course .learndash-wrapper .ld-table-list .ld-table-list-header.ld-primary-background { background: var(--rtc-paper-2) !important; color: var(--rtc-ink) !important; border-bottom: 1px solid var(--rtc-rule); } .rtc-course .learndash-wrapper .ld-table-list .ld-table-list-header * { color: var(--rtc-ink) !important; } /* Vertical rhythm. Blocks had space above them only, and paragraphs space below only — so a paragraph after a diagram or box sat flush against it (measured 0px on staging). Every block now carries space below as well; margins collapse, so a heading after a block still gets its own 30px. */ .rtc-course .rtc-lesson-body > .rtc-hero, .rtc-course .rtc-lesson-body > .rtc-figure, .rtc-course .rtc-lesson-body > .rtc-pair, .rtc-course .rtc-lesson-body > .rtc-clip, .rtc-course .rtc-lesson-body > .rtc-peek, .rtc-course .rtc-lesson-body > .rtc-peeks, .rtc-course .rtc-lesson-body > .rtc-diagram, .rtc-course .rtc-lesson-body > .rtc-provider, .rtc-course .rtc-lesson-body > .rtc-flags, .rtc-course .rtc-lesson-body > .rtc-checkpoint, .rtc-course .rtc-lesson-body > .rtc-download, .rtc-course .rtc-lesson-body > .rtc-takeaways, .rtc-course .rtc-lesson-body > .rtc-cta, .rtc-course .rtc-lesson-body > .rtc-script, .rtc-course .rtc-lesson-body > .rtc-table { margin-bottom: 24px; } .rtc-course .rtc-lesson-body > .rtc-hero { margin-top: 20px; margin-bottom: 28px; } .rtc-course .rtc-lesson-body > :last-child { margin-bottom: 0; } .rtc-course .rtc-lesson-body { margin-bottom: 44px; } .rtc-course .rtc-lesson-body > .rtc-lesson-meta { padding-bottom: 18px; margin-bottom: 0; } /* The page title sat directly against the site header (0px). */ .rtc-course .page-header { padding-top: 40px; padding-bottom: 8px; } /* Clip control state, set by rtc-courses.js. */ .rtc-course .rtc-clip-replay[hidden] { display: none; } /* --- Staging test pass, 30 Sep ------------------------------------------- */ /* Focus Mode paints the lesson wrapper white — `body.ld-in-focus-mode .learndash-wrapper { background:#fff }` (0,2,1) out-ranks our paper (0,2,0). It read as a white card with the text flush against its left edge. Paper instead, so the text, title and breadcrumb sit on one column. */ .rtc-course.ld-in-focus-mode .learndash-wrapper { background-color: var(--rtc-paper); } /* The sidebar toggle. LearnDash pushes the circle 25% past the sidebar's edge (45% when collapsed), which on our terracotta heading looked like a slip. Kept inside the sidebar instead. The collapsed rule is desktop-only: under 769px the collapsed sidebar is fully off-screen and the protruding circle is the only way back in, so LearnDash's own placement stays there. */ .rtc-course .learndash-wrapper .ld-focus:not(.ld-focus-sidebar-collapsed) .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon { right: 16px; transform: translateY(-50%); } @media (min-width: 769px) { .rtc-course .learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar-trigger .ld-icon { right: 8px; transform: translateY(-50%) rotate(180deg); } } /* Tables. The theme's reset.css gives every cell 50%-grey borders and grey zebra rows, and our cells had no left padding — text sat on the border. Ruled in the palette, padded on both sides, header on paper-2. */ .rtc-course .rtc-lesson-body table.rtc-table th, .rtc-course .rtc-lesson-body table.rtc-table td { border: 1px solid var(--rtc-rule); padding: 12px 16px; background-color: transparent; } .rtc-course .rtc-lesson-body table.rtc-table th { background-color: var(--rtc-paper-2); padding: 10px 16px; vertical-align: bottom; } /* Mark Complete in the bar, phones. LearnDash makes it width:100% and it also carries a 13px left margin, so it ran off the right edge of the screen. */ @media (max-width: 768px) { .rtc-course .learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete { margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width: 640px) { .rtc-course .rtc-lesson-body table.rtc-table th, .rtc-course .rtc-lesson-body table.rtc-table td { padding: 10px 12px; } } /* ========================================================================== 7 · RESPONSIVE The scale is mobile-first by intent: a parent reading one-handed at 2 am is the design case. These are the widening rules, plus the two blocks that genuinely change shape. ========================================================================== */ /* --- Under 640px: the pair stacks, the divider turns ---------------------- */ @media (max-width: 640px) { .rtc-course .rtc-pair-frames { flex-direction: column; } /* flex: 0 0 2px already resolves to a 2px height once the direction is column, so the divider needs nothing here. Kept as a comment so the stacked case is not mistaken for an omission. */ /* Labels sit under their own frame once stacked, so the row becomes a column and each label keeps its half of the comparison. */ .rtc-course .rtc-pair-labels { flex-direction: column; gap: 4px; } /* Clip and peek go full width and drop their text below. */ .rtc-course .rtc-clip, .rtc-course .rtc-peek { flex-direction: column; gap: 14px; } .rtc-course .rtc-clip-frame { width: 100%; } /* The peek block is the exception that does NOT grow. Confronting at size, and the reader may be four days post-procedure. */ .rtc-course .rtc-peek-frame { width: 100%; max-width: 330px; } .rtc-course .rtc-flags-cols { grid-template-columns: 1fr; gap: 20px; } .rtc-course .rtc-diagram { padding: 20px 18px; } .rtc-course .rtc-takeaways, .rtc-course .rtc-flags, .rtc-course .rtc-checkin, .rtc-course .rtc-checkpoint { padding: 20px 18px; } .rtc-course .rtc-provider { padding: 18px 20px; } .rtc-course .rtc-flags-tier--emergency { margin: 20px -18px -20px; padding: 18px 18px 20px !important; } .rtc-course .rtc-table td:last-child { white-space: normal; } .rtc-course .rtc-diagram--portrait img { max-width: 300px; } .rtc-course .page-header { padding-top: 24px; } } /* --- 720px and up: a little more air -------------------------------------- */ @media (min-width: 720px) { .rtc-course .rtc-lesson { padding: 34px 32px 56px; } .rtc-course .rtc-lesson-title { font-size: 36px; line-height: 43px; } .rtc-course h2 { font-size: 26px; line-height: 34px; } } /* ========================================================================== 8 · REDUCED MOTION, PRINT, FORCED COLOURS ========================================================================== */ /* WCAG 2.2.2 — serve the still instead of the loop. Every clip has its own poster still as fallback, so this degrades to the approved render rather than to an empty box. The markup pairs a