…
*/ children
* inherit the framework's dark-on-light reading-page typography, which
* renders as charcoal text on the navy hero — unreadable. */
body.ca-framework .ca-templates-hero {
background: linear-gradient(135deg, var(--navy), var(--navy-deep));
border-radius: var(--radius-lg);
padding: 48px 40px;
margin: 0 0 40px;
color: var(--white);
text-align: center;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
body.ca-framework .ca-templates-hero::after {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(255, 155, 3, 0.18) 0%, transparent 70%);
pointer-events: none;
}
body.ca-framework .ca-templates-hero-eyebrow {
display: inline-block;
font-family: var(--font-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold) !important;
background: rgba(255, 155, 3, 0.12);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
body.ca-framework .ca-templates-hero-headline {
font-family: var(--font-heading) !important; /* Brand §04: hero = Nunito */
color: var(--white) !important;
font-weight: 800;
font-size: clamp(32px, 4vw, 44px) !important;
letter-spacing: -0.02em;
margin: 0 0 14px !important;
position: relative;
z-index: 1;
border-bottom: none !important;
}
body.ca-framework .ca-templates-hero p.ca-templates-hero-lead,
body.ca-framework .ca-templates-hero-lead {
max-width: 760px;
margin: 0 auto 16px;
color: rgba(255, 255, 255, 0.88) !important;
font-size: 16.5px;
line-height: 1.65;
position: relative;
z-index: 1;
}
body.ca-framework .ca-templates-hero p.ca-templates-hero-lead strong,
body.ca-framework .ca-templates-hero-lead strong {
color: var(--white) !important;
font-weight: 700;
}
body.ca-framework .ca-templates-hero p.ca-templates-hero-lead em,
body.ca-framework .ca-templates-hero-lead em {
color: var(--gold) !important;
font-style: normal;
font-weight: 600;
}
body.ca-framework .ca-templates-hero p.ca-templates-hero-lead-sub,
body.ca-framework .ca-templates-hero-lead-sub {
max-width: 760px;
margin: 0 auto 28px;
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.72) !important;
}
body.ca-framework .ca-templates-hero-lead code {
background: rgba(255, 255, 255, 0.14);
padding: 1px 8px;
border-radius: 4px;
font-size: 0.9em;
color: var(--gold) !important;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
body.ca-framework .ca-templates-hero-stats {
display: inline-flex;
gap: 40px;
padding: 18px 32px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
position: relative;
z-index: 1;
}
body.ca-framework .ca-templates-hero-stat {
text-align: center;
}
body.ca-framework .ca-templates-hero-stat strong {
display: block;
font-family: var(--font-heading); /* Brand §04: hero display number = Nunito */
font-weight: 800;
font-size: 26px;
color: var(--gold) !important;
letter-spacing: -0.02em;
line-height: 1;
}
body.ca-framework .ca-templates-hero-stat span {
display: block;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72) !important;
margin-top: 4px;
font-family: var(--font-accent);
font-weight: 700;
}
/* PHASE SECTION */
.ca-tpl-phase {
margin: 0 0 56px;
}
.ca-tpl-phase-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
background: var(--white);
border: 1px solid var(--gray-200);
border-left: 4px solid var(--gold);
border-radius: var(--radius-md);
padding: 22px 26px;
margin: 0 0 20px;
box-shadow: var(--shadow-sm);
}
.ca-tpl-phase-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--gold-pale);
border: 2px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
color: var(--navy);
flex-shrink: 0;
}
.ca-tpl-phase-text {
min-width: 0;
}
.ca-tpl-phase-eyebrow {
display: inline-block;
font-family: var(--font-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-dark); /* AA-passing gold for text on white */
margin-bottom: 2px;
}
.ca-tpl-phase-title {
font-family: var(--font-display) !important;
color: var(--navy) !important;
font-weight: 800;
font-size: 24px !important;
letter-spacing: -0.015em;
margin: 0 0 4px !important;
line-height: 1.2;
border-bottom: none !important;
padding-bottom: 0 !important;
}
.ca-tpl-phase-tagline {
color: var(--gray-500);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.ca-tpl-phase-meta {
text-align: right;
flex-shrink: 0;
}
.ca-tpl-phase-count {
display: block;
font-family: var(--font-display);
color: var(--navy);
font-weight: 700;
font-size: 18px;
}
.ca-tpl-phase-modules {
display: block;
font-size: 12px;
color: var(--gray-500);
letter-spacing: 0.02em;
margin-top: 2px;
}
/* TEMPLATE GRID + CARD */
.ca-tpl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.ca-tpl-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
padding: 16px 18px;
box-shadow: var(--shadow-sm);
text-decoration: none !important;
color: inherit;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ca-tpl-card:hover,
.ca-tpl-card:focus-visible {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--gold);
color: inherit;
text-decoration: none !important;
}
.ca-tpl-card-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--gold-pale);
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s ease;
}
.ca-tpl-card:hover .ca-tpl-card-icon {
background: var(--gold);
}
.ca-tpl-card-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ca-tpl-card-meta {
font-family: var(--font-accent);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--navy); /* was --sky (3.34:1 on white, AA-fail); navy = 13:1 */
}
.ca-tpl-card-title {
/* (v0.9.73) — reset browser defaults */
margin: 0;
font-family: var(--font-display);
color: var(--navy);
font-weight: 700;
font-size: 15px;
line-height: 1.3;
letter-spacing: -0.005em;
/* clamp to 2 lines if super-long title */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ca-tpl-card-action {
width: 36px;
height: 36px;
border-radius: 50%;
background: transparent;
color: var(--gray-400);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s ease, color 0.15s ease;
}
.ca-tpl-card:hover .ca-tpl-card-action {
background: var(--navy);
color: var(--white);
}
/* LOCKED card state — module is ahead of learner's progress */
.ca-tpl-card-locked {
background: var(--gray-100);
border-color: var(--gray-200);
cursor: not-allowed;
box-shadow: none;
}
/* Anonymous visitors: locked card is a real link to /#pricing. Hover-lifts
* (gold accent border) to signal "click here to enroll" — different from
* the unclickable logged-in/not-yet-unlocked variant above. */
a.ca-tpl-card-locked-anon {
cursor: pointer;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.ca-tpl-card-locked-anon:hover,
a.ca-tpl-card-locked-anon:focus-visible {
transform: translateY(-2px);
border-color: var(--gold);
box-shadow: 0 8px 20px rgba(255, 155, 3, 0.18);
background: var(--white);
outline: none;
}
a.ca-tpl-card-locked-anon:hover .ca-tpl-card-locked-note,
a.ca-tpl-card-locked-anon:focus-visible .ca-tpl-card-locked-note {
color: var(--gold-dark); /* v0.11.28: gold fails AA as text on the hover tint too */
}
.ca-tpl-card-locked:hover {
transform: none;
box-shadow: none;
border-color: var(--gray-200);
}
.ca-tpl-card-locked .ca-tpl-card-icon {
background: var(--gray-200);
color: var(--gray-400);
filter: grayscale(1);
}
.ca-tpl-card-locked:hover .ca-tpl-card-icon {
background: var(--gray-200);
}
.ca-tpl-card-locked .ca-tpl-card-meta {
color: var(--gray-400);
}
.ca-tpl-card-locked .ca-tpl-card-title {
color: var(--gray-500);
}
.ca-tpl-card-locked-note {
display: block;
font-family: var(--font-accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
/* v0.11.28: was var(--gold) #FF9B03 = 1.9:1 on the gray-100 locked
card (axe serious ×145 on /templates/ + /llm-prompts/ for
logged-in learners). --gold-dark #8A5700 is the canonical
on-light gold token (~5.5:1 AA — see variables.css). */
color: var(--gold-dark);
margin-top: 4px;
}
.ca-tpl-card-locked .ca-tpl-card-action {
color: var(--gray-400);
background: transparent !important;
}
/* ═════════════════════════════════════════════════════════
* LLM PROMPTS LIBRARY (/llm-prompts/)
*
* Mirrors the Templates Library visual system but each card is a
*
(v0.9.73) — reset browser defaults */
margin: 0;
font-family: var(--font-display);
color: var(--navy);
font-weight: 700;
font-size: 15px;
line-height: 1.3;
letter-spacing: -0.005em;
}
.ca-prompt-card-toggle {
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
color: var(--gray-400);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.ca-prompt-card[open] .ca-prompt-card-toggle {
transform: rotate(180deg);
color: var(--navy);
}
.ca-prompt-card-content {
border-top: 1px solid var(--gray-200);
background: var(--gray-100);
}
.ca-prompt-card-toolbar {
display: flex;
justify-content: flex-end;
padding: 12px 16px 0;
}
.ca-prompt-copy-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--navy);
color: var(--white);
border: none;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ca-prompt-copy-btn:hover {
background: var(--gold);
color: var(--navy);
transform: translateY(-1px);
}
.ca-prompt-copy-btn-ok {
background: var(--green) !important;
color: var(--white) !important;
}
.ca-prompt-card-text {
margin: 12px 16px 16px;
padding: 16px 18px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 13px;
line-height: 1.65;
color: var(--charcoal);
white-space: pre-wrap;
word-wrap: break-word;
max-height: 60vh;
overflow-y: auto;
}
/* Locked prompt card */
.ca-prompt-card-locked {
background: var(--gray-100);
border-color: var(--gray-200);
cursor: not-allowed;
box-shadow: none;
}
.ca-prompt-card-locked:hover {
border-color: var(--gray-200);
box-shadow: none;
}
/* Anonymous visitors: locked prompt is a link to /#pricing. */
a.ca-prompt-card-locked-anon {
cursor: pointer;
text-decoration: none;
display: block;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
a.ca-prompt-card-locked-anon:hover,
a.ca-prompt-card-locked-anon:focus-visible {
transform: translateY(-2px);
border-color: var(--gold);
box-shadow: 0 8px 20px rgba(255, 155, 3, 0.18);
background: var(--white);
outline: none;
}
a.ca-prompt-card-locked-anon:hover .ca-tpl-card-locked-note,
a.ca-prompt-card-locked-anon:focus-visible .ca-tpl-card-locked-note {
color: var(--gold);
}
.ca-prompt-card-locked .ca-prompt-card-icon {
background: var(--gray-200);
color: var(--gray-400);
filter: grayscale(1);
}
.ca-prompt-card-locked:hover .ca-prompt-card-icon {
background: var(--gray-200);
}
.ca-prompt-card-locked .ca-prompt-card-meta {
color: var(--gray-400);
}
.ca-prompt-card-locked .ca-prompt-card-title {
color: var(--gray-500);
}
.ca-prompt-card-locked .ca-prompt-card-toggle {
color: var(--gray-400);
}
.ca-prompt-card-locked .ca-prompt-card-summary {
cursor: not-allowed;
}
@media (max-width: 480px) {
.ca-prompt-card-summary {
gap: 12px;
padding: 12px 14px;
}
.ca-prompt-card-text {
margin: 10px 12px 12px;
padding: 12px 14px;
font-size: 12.5px;
}
}
/* Denied banner — shown when ?denied={filename} is in the URL after
* the protected-download handler bounces a forbidden request back. */
.ca-tpl-denied {
display: flex;
gap: 14px;
align-items: flex-start;
background: var(--gold-pale);
border: 1px solid var(--gold);
border-left-width: 4px;
border-radius: var(--radius-md);
padding: 16px 20px;
margin: 0 0 32px;
color: var(--charcoal);
font-size: 15px;
line-height: 1.55;
}
.ca-tpl-denied svg {
color: var(--gold);
flex-shrink: 0;
margin-top: 2px;
}
.ca-tpl-denied strong {
color: var(--navy);
font-weight: 700;
}
/* FOOTER NOTE */
.ca-tpl-footer {
margin: 48px auto 0;
padding: 24px 28px;
background: var(--gold-pale);
border-radius: var(--radius-md);
border-left: 4px solid var(--gold);
color: var(--charcoal);
font-size: 15px;
line-height: 1.6;
max-width: 800px;
}
/* v0.11.28: inline prose links must be distinguishable without colour
(WCAG 1.4.1 — axe link-in-text-block on the /preview/ "enroll"
link). Navy on gold-pale is high-contrast; underline is the
non-colour cue. */
.ca-tpl-footer a {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 2px;
}
.ca-tpl-footer a:hover,
.ca-tpl-footer a:focus-visible {
color: var(--gold-dark);
}
.ca-tpl-footer code {
background: rgba(18, 43, 105, 0.08);
padding: 1px 6px;
border-radius: 3px;
font-size: 0.9em;
color: var(--navy);
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (max-width: 768px) {
.ca-templates-hero {
padding: 36px 24px;
}
.ca-templates-hero-stats {
gap: 24px;
padding: 14px 18px;
}
.ca-tpl-phase-head {
grid-template-columns: auto 1fr;
row-gap: 12px;
}
.ca-tpl-phase-meta {
grid-column: 1 / -1;
text-align: left;
padding-top: 6px;
border-top: 1px solid var(--gray-200);
display: flex;
gap: 14px;
align-items: baseline;
}
.ca-tpl-phase-count {
font-size: 15px;
}
}
@media (max-width: 480px) {
/* v0.13.51: keep the hero stats pill on ONE LINE on phones (operator
* request — the stacked column read as a tall awkward capsule). All
* four hero pages (/templates/, /llm-prompts/, /preview/, builder)
* use short labels, so a compact row fits a 360px viewport. */
.ca-templates-hero-stats {
gap: 18px;
padding: 12px 20px;
}
.ca-templates-hero-stat strong {
font-size: 20px;
}
.ca-templates-hero-stat span {
font-size: 10.5px;
letter-spacing: 0.08em;
}
.ca-tpl-card {
padding: 14px 16px;
grid-template-columns: auto 1fr;
gap: 14px;
}
.ca-tpl-card-action {
grid-column: 1 / -1;
justify-self: end;
width: auto;
height: auto;
padding: 4px 0;
}
}
/* ═════════════════════════════════════════════════════════
* TUTORLMS BUTTON / FORM BRAND OVERRIDES (v0.9.31)
*
* TutorLMS ships its default UI with a purple-blue accent
* (~rgb(62, 100, 222)) that fights the Chiggle navy/gold palette.
* Surfaces visible to learners on the front end:
*
* - `.tutor-btn-primary` — main CTA buttons (Sign In, Continue
* Browsing on empty cart, Update Profile, Save, Submit Quiz)
* - `.tutor-form-control` — text inputs across settings + login
* - `.tutor-cart-empty-state` — empty cart card (TutorLMS uses
* its own cart, not WC's `.cart-empty`)
*
* Strategy: re-skin primary buttons with the Chiggle gold pill
* treatment used everywhere else, give inputs the same border /
* radius / padding as our checkout form, and turn the empty-cart
* block into a friendly white card.
* ═════════════════════════════════════════════════════════ */
.tutor-btn-primary,
.tutor-frontend-dashboard .tutor-btn-primary,
.tutor-cart-empty-state .tutor-btn,
.tutor-cart-empty-state .tutor-btn-primary,
.tutor-cart-empty-state a.tutor-btn-lg {
background-color: var(--gold) !important;
background-image: none !important;
color: var(--navy) !important;
border: none !important;
border-radius: 999px !important;
font-family: var(--font-body) !important;
font-weight: 700 !important;
letter-spacing: -0.005em;
min-height: 48px;
padding: 12px 28px !important;
box-shadow: var(--shadow-md);
text-decoration: none !important;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.tutor-btn-primary:hover,
.tutor-frontend-dashboard .tutor-btn-primary:hover,
.tutor-cart-empty-state .tutor-btn:hover,
.tutor-cart-empty-state a.tutor-btn-lg:hover {
background-color: var(--gold-hover) !important;
color: var(--navy) !important;
transform: translateY(-1px);
text-decoration: none !important;
}
/* Form inputs — match the visual weight of our checkout form so
* Settings → Profile and the dashboard login form feel like the
* same product. Geometry only; preserve TutorLMS's form logic. */
.tutor-form-control,
.tutor-frontend-dashboard .tutor-form-control,
input.tutor-form-control[type="text"],
input.tutor-form-control[type="email"],
input.tutor-form-control[type="password"] {
border: 1.5px solid var(--gray-200) !important;
border-radius: 12px !important;
min-height: 48px;
padding: 12px 16px !important;
font-family: var(--font-body) !important;
font-size: 15px !important;
color: var(--charcoal) !important;
background-color: var(--white) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tutor-form-control:focus,
.tutor-form-control:focus-visible,
input.tutor-form-control:focus {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(255, 155, 3, 0.18) !important;
outline: none !important;
}
/* ═════════════════════════════════════════════════════════
* QUIZ — hide "Skip Quiz" button + its confirm modal.
*
* Quizzes are mandatory at Chiggle Academy (pass required to
* proceed). TutorLMS's quiz template at single/quiz/top.php
* still renders a Skip Quiz button regardless of pass_is_required
* — gated only by attempts_remaining. Easiest neutralisation is
* CSS (rather than a template override of the whole quiz top).
*
* If TutorLMS adds a real "skip disabled" setting in a future
* version, this rule becomes a no-op and can be removed.
* ═════════════════════════════════════════════════════════ */
.tutor-quiz-btn-group .skip-quiz-btn,
button.skip-quiz-btn,
#tutor-quiz-skip-to-next {
display: none !important;
}
/* Empty cart card — TutorLMS markup, but make it match the
* empty-state friendly-card pattern used elsewhere on the site. */
.tutor-cart-empty-state {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 56px 32px !important;
text-align: center !important;
max-width: 560px;
margin: 32px auto !important;
}
.tutor-cart-empty-state img {
display: block;
margin: 0 auto 24px;
max-width: 200px;
height: auto;
opacity: 0.85;
}
.tutor-cart-empty-state p {
font-family: var(--font-display);
color: var(--navy);
font-size: 20px;
font-weight: 600;
margin: 0 0 24px !important;
letter-spacing: -0.01em;
}
.tutor-cart-empty-state .tutor-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
text-decoration: none !important;
}
/* Dashboard login form (rendered when anonymous visits /dashboard/).
* The form wraps in `.tutor-form-wrap` — give it a friendly card
* surface centred in the framework container.
*
* MUST scope to `body:not(.logged-in)`: Tutor reuses `.tutor-form-wrap`
* as a per-field wrapper inside the LOGGED-IN dashboard reset-password
* form (`dashboard/settings/reset-password.php:70`, the "Re-type New
* Password" field). The old `.tutor-frontend-dashboard:not(.logged-in)`
* scope was inert — `logged-in` is a class, never on that div,
* so `:not(.logged-in)` was always true and the card leaked onto that
* one field (inconsistent with the other password inputs). */
body:not(.logged-in) .tutor-form-wrap,
.tutor-login-form-wrapper {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 40px 32px;
max-width: 480px;
margin: 48px auto;
}
/* TutorLMS login heading: "Hi, Welcome back!" */
body:not(.logged-in) .tutor-form-wrap h2,
body:not(.logged-in) .tutor-form-wrap .tutor-form-heading,
.tutor-login-form-wrapper h2,
.tutor-login-form-wrapper .tutor-form-heading {
font-family: var(--font-display) !important;
color: var(--navy) !important;
font-weight: 700;
font-size: clamp(22px, 3vw, 28px);
letter-spacing: -0.01em;
margin: 0 0 24px !important;
text-align: left;
}
@media (max-width: 480px) {
.tutor-cart-empty-state {
padding: 40px 24px !important;
margin: 16px auto !important;
}
body:not(.logged-in) .tutor-form-wrap,
.tutor-login-form-wrapper {
padding: 28px 22px;
margin: 24px 16px;
}
}
/* Dead in v0.9.75: .ca-templates-footer, .ca-templates-grid, .ca-template-card
* were the original (pre-rename) selectors. Current code uses .ca-tpl-* (the
* template-card listing on /templates/) with its own responsive rules above. */
/* ═════════════════════════════════════════════════════════
* LESSON PAGE — INDEPENDENTLY SCROLLABLE PANES (v0.11.35)
*
* Default Tutor: `.tutor-course-single-content-wrapper{display:flex}`
* with NO height/overflow, so the whole document scrolls (one window
* scrollbar — the reported behaviour). We want an app-shell layout:
* site header + lesson top-bar pinned, and the left "Course Content"
* sidebar and the right lesson/video pane each scrolling on their own.
*
* Spotlight mode is OFF, so Astra renders normally. The Tutor top-bar
* is rendered by `single/lesson/content.php` (`single.common.header`)
* INSIDE the right pane — it is NOT a sibling above the wrapper:
* header.site-header (sticky, 68px — header.css)
* .tutor-course-single-content-wrapper (flex row)
* ├ .tutor-course-single-sidebar-wrapper (Tutor: flex 0 0 400px)
* └ #tutor-single-entry-content (Tutor: flex 1)
* ├ .tutor-course-topic-single-header ← BLUE BAR (in pane)
* └ .tutor-course-topic-single-body (video + tabs)
*
* So the wrapper only needs to clear the site header — the bar lives
* inside the scrolling right pane and is pinned to the TOP OF THAT
* PANE (sticky top:0), not offset by the site header. (v0.11.35 wrongly
* subtracted a 60px bar height AND pinned the bar at top:68px as if it
* were a wrapper sibling → 60px white at the bottom + a white band above
* the bar inside the right pane. v0.11.36 corrects both.)
*
* --ca-lesson-top : chrome above the wrapper = site header (68px)
* + WP admin-bar (32px, admins only — the real
* audience are learners with no admin bar)
*
* Desktop only (≥1200px = Tutor's `xl` breakpoint, where the 400px
* sidebar is in-flow). Below that Tutor switches the sidebar to an
* absolute/off-canvas drawer + a mobile progress bar, so we leave the
* normal document scroll untouched there (correct mobile behaviour).
* ═════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
body.single-lesson {
--ca-lesson-top: 68px;
}
body.single-lesson.admin-bar {
--ca-lesson-top: 100px; /* 68 site header + 32 WP admin bar */
}
/* Pin the lesson top-bar to the top of its own scroll container
* (the right pane), so it stays put as the video/tabs scroll
* under it — NOT offset by the site header (it's inside the pane,
* the pane already starts below the header). */
body.single-lesson #tutor-single-entry-content .tutor-course-topic-single-header,
body.single-lesson #tutor-single-entry-content .tutor-single-page-top-bar {
position: sticky;
top: 0;
z-index: 5;
}
/* The two-pane region: a fixed-height flex row that itself never
* scrolls — exactly viewport minus the site-header chrome, so no
* white gap above or below. */
body.single-lesson .tutor-course-single-content-wrapper {
height: calc(100dvh - var(--ca-lesson-top));
overflow: hidden;
}
/* Each pane owns its own scroll; overscroll-contain stops scroll
* chaining to the document at the ends. min-height:0 lets the flex
* children actually shrink+scroll instead of growing the row. */
body.single-lesson .tutor-course-single-sidebar-wrapper,
body.single-lesson #tutor-single-entry-content {
height: 100%;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
}
/* ═════════════════════════════════════════════════════════
* A11y contrast overrides — stock Tutor uses --tutor-color-muted
* (#757c8e) for secondary text on its #eff1f6 / #fff surfaces. That
* computes to ~3.7:1 / ~4.4:1 — both below WCAG AA 4.5:1 for normal
* text. Surfaced by tests/e2e/11-a11y-authenticated.spec.ts on the
* lesson page (durations like "09:09", lesson-count summaries like
* "0/9"). v0.11.77.
*
* Also overrides Tutor's
styling, which renders near-white
* (#fcfcfd) on near-white (#eceff3) inside lesson content (1.12:1).
* ═════════════════════════════════════════════════════════ */
body.single-lesson .tutor-color-muted,
body.tutor-dashboard-page .tutor-color-muted {
color: var(--gray-500) !important; /* #595959 — 7.04:1 on white (AAA), 5.49:1 on Tutor's #eff1f6 (AA pass) */
}
body.single-lesson .tutor-course-topic-summary,
body.tutor-dashboard-page .tutor-course-topic-summary {
color: var(--gray-500) !important;
}
body.single-lesson .tutor-course-topic-item-duration {
color: var(--gray-500) !important;
}
body.single-lesson #tutor-single-entry-content code,
body.single-lesson .tutor-lesson-content code {
background: var(--gray-100) !important; /* warm cream */
color: var(--navy) !important; /* navy on gray-100 = ~14:1, AAA */
padding: 1px 6px;
border-radius: 4px;
font-size: 0.92em;
}
/* Top-of-notes Previous/Next clone (injected by inc/hooks-tutor.php).
* Inherits Tutor's footer styling via cloneNode(); add a bottom border
* for visual separation from the notes content that follows. v0.11.80. */
body.single-lesson .ca-lesson-nav-top {
border-bottom: 1px solid var(--gray-200);
margin-bottom: 24px;
}
/* Lesson completion UX (v0.13.45) — phones/tablets: Tutor's mobile completion
* block (.tutor-spotlight-mobile-progress-complete — the "% Complete" + progress
* bar + Mark-as-Complete button, its own tutor-d-xl-none bar) is moved just below
* the video by inc/hooks-tutor.php so learners who skip the notes reach it without
* scrolling to the page foot. Stack its two columns (progress over button) and
* make the button full-width. The block self-pads (tutor-px-20 tutor-py-16). */
.ca-lesson-below-video .tutor-spotlight-mobile-progress-complete {
margin-top: 0; /* sat after content before; below the video it needs no top gap */
}
.ca-lesson-below-video .tutor-row {
flex-direction: column;
gap: 12px;
}
.ca-lesson-below-video .tutor-spotlight-mobile-progress-left,
.ca-lesson-below-video .tutor-spotlight-mobile-progress-right {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
.ca-lesson-below-video form {
margin: 0 !important;
}
.ca-lesson-below-video .tutor-topbar-mark-btn,
.ca-lesson-below-video form button[type="submit"] {
width: 100%;
justify-content: center;
}
/* Brief "Lesson complete" confirmation toast shown on auto-complete. */
.ca-lesson-complete-toast {
position: fixed;
left: 50%;
bottom: 96px;
transform: translateX(-50%);
background: var(--navy, #122B69);
color: #fff;
font-weight: 700;
font-size: 15px;
padding: 12px 22px;
border-radius: 999px;
box-shadow: 0 10px 34px rgba(0, 0, 0, .32);
z-index: 99999;
animation: caLessonToastIn .25s ease;
}
@keyframes caLessonToastIn {
from { opacity: 0; transform: translate(-50%, 12px); }
to { opacity: 1; transform: translate(-50%, 0); }
}