/*
Theme Name: Twinepà Academy
Template: twinepa-core
Version: 1.1.0
Description: Child theme for Twinepà Academy
Author: Twinepà
*/
/* ============================================
Footer Visual Customization
============================================ */
/* Tagline: Improve hierarchy */
.c-footer__tagline {
font-size: 0.9375rem; /* 15px */
line-height: var(--lh-snug);
}
body.single-lesson .ta-method-context,
body.single-tutor_quiz .ta-method-context {
margin: var(--space-5) 0;
padding: var(--space-4);
border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
body.single-lesson .ta-method-context--intro,
body.single-tutor_quiz .ta-method-context--intro {
margin-top: 0;
}
body.single-lesson .ta-method-context--completion,
body.single-tutor_quiz .ta-method-context--completion {
padding: var(--space-5);
background: var(--color-surface-alt);
}
.ta-method-context__eyebrow {
margin: 0 0 var(--space-2);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ta-method-context > p:last-of-type {
margin-bottom: 0;
}
.ta-method-context .c-button {
margin-top: var(--space-3);
}
body.postid-220 .skip-quiz-btn {
display: none !important;
}
/* Homepage authority: enforce 2x2 card rhythm like core/nails. */
.c-home-authority .c-quality-grid {
display: grid;
gap: var(--space-5);
margin-top: var(--space-6);
}
@media (min-width: 640px) {
.c-home-authority .c-quality-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Homepage featured courses: bottom centered CTA with brand primary button style. */
.c-home-collections--academy .c-home-collections__cta {
margin-top: var(--space-5);
display: flex;
justify-content: center;
}
@media (min-width: 768px) {
.c-trustbar__grid, .c-trustbar__grid > .wp-block-group__inner-container {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
}
}
.c-corso-curriculum__intro {
max-width: 760px;
margin: 0 0 var(--space-5);
color: var(--color-muted);
font-size: var(--text-base);
line-height: var(--lh-relaxed);
}
/* ============================================
Tutor LMS — Design System Alignment
============================================
Override Tutor's default blue theme to match
Twinepà design tokens (brand, typography, spacing).
Scoped under Tutor body classes to avoid leaking.
============================================ */
/* ── 1. Token Override ─────────────────────── */
/* Remap Tutor CSS custom properties to Twinepà values */
:root,
[data-tutor-frontend-dashboard] {
--tutor-color-primary: var(--color-brand-strong);
--tutor-color-primary-rgb: 140, 58, 58;
--tutor-color-primary-hover: var(--color-brand);
--tutor-color-primary-hover-rgb: 201, 138, 138;
--tutor-body-color: var(--color-text);
--tutor-body-color-rgb: 31, 31, 31;
--tutor-border-color: var(--color-border);
--tutor-border-color-rgb: 232, 226, 222;
--tutor-color-secondary: var(--color-text);
--tutor-color-subdued: var(--color-muted);
--tutor-color-hints: var(--color-muted);
--tutor-color-muted: var(--color-muted-soft);
--tutor-color-gray: var(--color-border);
--tutor-color-gray-10: var(--color-bg);
}
/* ── 2. Dashboard Layout ───────────────────── */
body.tutor-screen-frontend-dashboard .tutor-wrap-parent {
margin-top: calc(88px + var(--space-4));
font-family: var(--font-body);
background: var(--color-bg);
}
body.tutor-screen-frontend-dashboard .tutor-wrap-parent .tutor-container {
width: min(var(--container-max), 100% - (var(--container-pad) * 2));
margin-inline: auto;
}
/* ── 3. Dashboard Header (Avatar + Greeting) ── */
.tutor-frontend-dashboard-header {
padding: var(--space-5) 0 var(--space-4);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-5);
}
.tutor-dashboard-header-display-name {
font-family: var(--font-heading) !important;
font-weight: var(--fw-regular) !important;
font-size: clamp(1.5rem, 3vw, 2rem) !important;
color: var(--color-text) !important;
}
.tutor-dashboard-header-greetings {
color: var(--color-muted) !important;
font-size: var(--text-sm) !important;
}
/* Avatar: brand tones instead of blue */
.tutor-avatar-text {
background: color-mix(in srgb, var(--color-brand) 20%, transparent) !important;
color: var(--color-brand-strong) !important;
font-family: var(--font-heading) !important;
font-weight: var(--fw-medium) !important;
}
/* ── 4. Sidebar Navigation ─────────────────── */
.tutor-dashboard-left-menu {
border-right: 1px solid var(--color-border);
}
.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link {
font-size: var(--text-sm) !important;
color: var(--color-muted) !important;
border-radius: var(--radius-sm) !important;
transition: background var(--transition-fast), color var(--transition-fast);
padding: var(--space-2) var(--space-3) !important;
}
.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link:hover {
background: color-mix(in srgb, var(--color-brand) 8%, transparent) !important;
color: var(--color-brand-strong) !important;
}
/* Active menu item */
.tutor-dashboard-permalinks .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link,
.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link.active {
background: color-mix(in srgb, var(--color-brand) 12%, transparent) !important;
color: var(--color-brand-strong) !important;
font-weight: var(--fw-semibold) !important;
}
/* Menu icons */
.tutor-dashboard-menu-item-icon {
color: var(--color-muted-soft) !important;
}
.tutor-dashboard-permalinks .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon,
.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link:hover .tutor-dashboard-menu-item-icon {
color: var(--color-brand-strong) !important;
}
/* Menu divider */
.tutor-dashboard-menu-divider {
border-color: var(--color-border) !important;
}
/* ── 5. Dashboard Content Area ─────────────── */
.tutor-dashboard-content .tutor-dashboard-title {
font-family: var(--font-heading) !important;
font-size: clamp(1.5rem, 3vw, 2rem) !important;
font-weight: var(--fw-regular) !important;
color: var(--color-text) !important;
}
/* ── 6. Stats Cards ────────────────────────── */
.tutor-dashboard-content .tutor-card {
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-md) !important;
box-shadow: none !important;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tutor-dashboard-content .tutor-card:hover {
border-color: color-mix(in srgb, var(--color-brand) 40%, transparent) !important;
box-shadow: 0 4px 16px color-mix(in srgb, var(--color-shadow) 8%, transparent) !important;
}
/* Stats card icons */
.tutor-dashboard-content .tutor-round-box {
background: color-mix(in srgb, var(--color-brand) 10%, transparent) !important;
color: var(--color-brand-strong) !important;
}
/* Stats numbers */
.tutor-dashboard-content .tutor-card .tutor-fs-3,
.tutor-dashboard-content .tutor-card .tutor-fs-4 {
font-family: var(--font-heading) !important;
font-weight: var(--fw-regular) !important;
color: var(--color-text) !important;
}
/* Stats labels */
.tutor-dashboard-content .tutor-card .tutor-color-muted {
color: var(--color-muted) !important;
font-size: var(--text-sm) !important;
}
/* ── 7. Course Progress Card ───────────────── */
/* "Corso in svolgimento" section title */
.tutor-frontend-dashboard-course-progress .tutor-fs-5 {
font-family: var(--font-heading) !important;
font-weight: var(--fw-regular) !important;
font-size: var(--text-xl) !important;
color: var(--color-text) !important;
}
/* Course card within dashboard */
.tutor-frontend-dashboard-course-progress .tutor-card {
border-radius: var(--radius-lg) !important;
overflow: hidden;
}
.tutor-frontend-dashboard-course-progress .tutor-card img {
border-radius: var(--radius-sm) !important;
}
/* Progress bar */
.tutor-progress-bar {
background: var(--color-border) !important;
border-radius: var(--radius-pill) !important;
height: 6px !important;
overflow: hidden;
}
.tutor-progress-value {
background: linear-gradient(90deg, var(--color-brand-strong), var(--color-brand)) !important;
border-radius: var(--radius-pill) !important;
}
/* Course title in progress card */
.tutor-course-progress-item-title {
font-family: var(--font-heading) !important;
font-weight: var(--fw-regular) !important;
font-size: var(--text-lg) !important;
}
/* ── 8. Enrolled Courses Page ──────────────── */
/* Tabs */
.tutor-dashboard-content .tutor-nav-pills .tutor-nav-link,
.tutor-dashboard-content [class*="tutor-nav"] a {
font-size: var(--text-sm) !important;
font-weight: var(--fw-medium) !important;
color: var(--color-muted) !important;
border-radius: var(--radius-pill) !important;
padding: var(--space-2) var(--space-3) !important;
transition: color var(--transition-fast), background var(--transition-fast);
}
.tutor-dashboard-content .tutor-nav-pills .tutor-nav-link:hover,
.tutor-dashboard-content [class*="tutor-nav"] a:hover {
color: var(--color-brand-strong) !important;
background: color-mix(in srgb, var(--color-brand) 8%, transparent) !important;
}
.tutor-dashboard-content .tutor-nav-pills .tutor-nav-link.active,
.tutor-dashboard-content [class*="tutor-nav"] a.active {
color: var(--color-brand-strong) !important;
background: color-mix(in srgb, var(--color-brand) 12%, transparent) !important;
font-weight: var(--fw-semibold) !important;
}
/* Course card in enrolled list */
.tutor-dashboard-content .tutor-card-image-left {
border-radius: var(--radius-lg) !important;
overflow: hidden;
}
.tutor-dashboard-content .tutor-card-image-left img {
border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
/* "Inizia il corso" button */
.tutor-dashboard-content .tutor-btn-primary,
.tutor-dashboard-content a.tutor-btn-primary {
background: var(--color-brand-strong) !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius-pill) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-bold) !important;
text-transform: uppercase;
letter-spacing: 0.2em;
padding: var(--space-2) var(--space-4) !important;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.tutor-dashboard-content .tutor-btn-primary:hover,
.tutor-dashboard-content a.tutor-btn-primary:hover {
background: var(--color-brand) !important;
transform: translateY(-1px);
}
/* Secondary / outline buttons */
.tutor-dashboard-content .tutor-btn-secondary,
.tutor-dashboard-content a.tutor-btn-secondary {
border-color: var(--color-border) !important;
color: var(--color-text) !important;
border-radius: var(--radius-pill) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-bold) !important;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.tutor-dashboard-content .tutor-btn-secondary:hover,
.tutor-dashboard-content a.tutor-btn-secondary:hover {
border-color: var(--color-brand) !important;
color: var(--color-brand-strong) !important;
background: color-mix(in srgb, var(--color-brand) 6%, transparent) !important;
}
/* Star ratings */
.tutor-ratings-stars .tutor-icon-star-bold,
.tutor-ratings-stars .tutor-icon-star-line {
color: var(--color-brand) !important;
}
/* ── 9. Lesson Page (Spotlight) ────────────── */
/* Lesson sidebar — warm charcoal instead of pure black.
#2A2523 sits within the Twinepà warm palette while keeping
clear contrast against the light content area. */
body.single-lesson {
--lesson-topbar-height: 56px;
}
body.single-lesson .tutor-lesson-sidebar,
body.single-lesson .tutor-course-single-sidebar-wrapper {
background: #2A2523 !important;
color: var(--color-text-invert) !important;
font-family: var(--font-body) !important;
border-right: none !important;
}
/* Lesson topbar: mockup-aligned white learning toolbar. */
body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: var(--lesson-topbar-height) !important;
min-height: var(--lesson-topbar-height) !important;
z-index: 1000;
display: flex !important;
align-items: center !important;
gap: 0;
background: var(--color-surface) !important;
color: var(--color-text) !important;
border-bottom: 1px solid var(--color-border) !important;
box-shadow: 0 1px 0 rgba(42, 37, 35, 0.02);
padding: 0 var(--space-4) !important;
box-sizing: border-box;
font-family: var(--font-body) !important;
}
body.admin-bar.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar {
top: 32px !important;
}
body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar,
body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar * {
color: var(--color-text);
}
body.single-lesson .tutor-course-topic-single-header .ta-topbar-menu,
body.single-lesson .tutor-course-topic-single-header .ta-topbar-close {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
border-radius: var(--radius-sm) !important;
border: 1px solid transparent !important;
color: var(--color-muted) !important;
background: transparent !important;
}
body.single-lesson .tutor-course-topic-single-header .ta-topbar-close {
border-color: var(--color-border) !important;
border-radius: 14px !important;
}
body.single-lesson .tutor-course-topic-single-header .ta-topbar-close:hover {
border-color: var(--color-brand) !important;
color: var(--color-brand-strong) !important;
background: color-mix(in srgb, var(--color-brand) 6%, transparent) !important;
}
body.single-lesson .tutor-course-topic-single-header .ta-topbar-menu:hover,
body.single-lesson .tutor-course-topic-single-header .ta-topbar-menu:focus,
body.single-lesson .tutor-course-topic-single-header .ta-topbar-menu:active {
border-color: transparent !important;
color: var(--color-muted) !important;
background: transparent !important;
}
body.single-lesson .tutor-course-topic-single-header .ta-topbar-menu [class*="tutor-icon"],
body.single-lesson .tutor-course-topic-single-header .ta-topbar-close [class*="tutor-icon"] {
color: currentColor !important;
font-size: 18px !important;
}
body.single-lesson .tutor-course-topic-single-header-title {
min-width: 0;
margin-left: var(--space-3) !important;
margin-right: var(--space-3) !important;
font-family: var(--font-heading) !important;
font-size: var(--text-sm) !important;
font-weight: var(--fw-regular) !important;
line-height: 1.2 !important;
color: var(--color-muted) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.single-lesson .ta-topbar-actions {
display: flex !important;
align-items: center !important;
gap: var(--space-2);
flex: 1 1 auto;
margin-left: var(--space-3) !important;
min-width: 0;
}
body.single-lesson .ta-topbar-actions .tutor-topbar-complete-btn {
margin-left: auto !important;
margin-right: 0 !important;
}
body.single-lesson .ta-topbar-actions form {
margin: 0;
}
body.single-lesson .tutor-course-single-content-wrapper {
padding-top: var(--lesson-topbar-height) !important;
}
/* Desktop: mockup-aligned layout — topbar spans full width above sidebar+main. */
@media (min-width: 992px) {
body.single-lesson {
--lesson-sidebar-width: 360px;
}
/* Push the entire content wrapper below the fixed topbar. */
body.single-lesson .tutor-course-single-content-wrapper {
align-items: flex-start !important;
padding-top: var(--lesson-topbar-height) !important;
}
/* Sidebar: sticky below the topbar so it stays visible while main scrolls. */
body.single-lesson .tutor-lesson-sidebar,
body.single-lesson .tutor-course-single-sidebar-wrapper {
align-self: flex-start !important;
position: sticky !important;
top: var(--lesson-topbar-height) !important;
flex: 0 0 var(--lesson-sidebar-width) !important;
width: var(--lesson-sidebar-width) !important;
max-width: var(--lesson-sidebar-width) !important;
height: calc(100vh - var(--lesson-topbar-height)) !important;
min-height: 0 !important;
overflow-y: auto !important;
}
body.admin-bar.single-lesson .tutor-lesson-sidebar,
body.admin-bar.single-lesson .tutor-course-single-sidebar-wrapper {
top: calc(var(--lesson-topbar-height) + 32px) !important;
height: calc(100vh - var(--lesson-topbar-height) - 32px) !important;
}
/* Lesson content area sits inside the main column (right of sidebar),
matching mockup. Spotlight provides the reading width. */
body.single-lesson .tutor-course-spotlight-wrapper {
width: 100% !important;
margin-left: 0 !important;
padding: var(--space-6) var(--space-6) var(--space-5) var(--space-6) !important;
background: var(--color-bg);
box-sizing: border-box;
}
/* Remove Tutor inner column constraints — let our 880px reading column rule take over. */
body.single-lesson .tutor-course-spotlight-wrapper .tutor-container,
body.single-lesson .tutor-course-spotlight-wrapper .tutor-row,
body.single-lesson .tutor-course-spotlight-wrapper .tutor-col,
body.single-lesson .tutor-course-spotlight-wrapper .tutor-col-lg-8,
body.single-lesson .tutor-course-spotlight-wrapper .tutor-col-lg-9,
body.single-lesson .tutor-course-spotlight-wrapper .tutor-col-md-8,
body.single-lesson .tutor-course-spotlight-wrapper .tutor-col-md-9 {
max-width: none !important;
width: 100% !important;
flex: 0 0 100% !important;
}
/* Footer stays inside the main column (mockup has it right of sidebar). */
body.single-lesson .tutor-course-topic-single-footer {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
padding: var(--space-4) var(--space-6) var(--space-4) var(--space-6) !important;
box-sizing: border-box;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
/* Main content column fills the rest beside the sidebar. */
body.single-lesson .tutor-quiz-single-entry-wrap {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
}
}
body.single-lesson .tutor-course-single-sidebar-title {
color: rgba(250, 249, 248, 0.78) !important;
background: #2A2523 !important;
border-bottom: 1px solid var(--color-border-dark);
font-family: var(--font-body) !important;
font-size: var(--text-xs) !important;
text-transform: uppercase;
letter-spacing: 0.3em;
font-weight: var(--fw-bold) !important;
padding: var(--space-4) var(--space-4) var(--space-3) !important;
}
body.single-lesson .tutor-course-single-sidebar-title > span:first-child {
color: rgba(250, 249, 248, 0.78) !important;
font-family: var(--font-body) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-bold) !important;
letter-spacing: 0.3em;
line-height: var(--lh-snug);
text-transform: uppercase;
}
/* Keep Tutor's desktop/mobile menu controls visually identical. */
body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar
.ta-topbar-menu--desktop {
display: none !important;
}
body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar
.ta-topbar-menu--mobile {
display: inline-flex !important;
}
@media (min-width: 1200px) {
body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar
.ta-topbar-menu--desktop {
display: inline-flex !important;
}
body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar
.ta-topbar-menu--mobile {
display: none !important;
}
}
/* Sidebar accordion section headers (Fondamenta, Struttura, ...).
Tutor stock paints these light-blue-gray; override to keep them on the
dark sidebar surface so closed sections are readable, not ghosted. */
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header,
body.single-lesson .tutor-lesson-sidebar .tutor-accordion-item-header {
background: var(--color-surface-dark) !important;
border-color: var(--color-border-dark) !important;
padding: var(--space-3) var(--space-4) !important;
transition: background var(--transition-fast);
}
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header .tutor-row,
body.single-lesson .tutor-lesson-sidebar .tutor-accordion-item-header .tutor-row {
align-items: center;
}
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header .tutor-col,
body.single-lesson .tutor-lesson-sidebar .tutor-accordion-item-header .tutor-col {
min-width: 0;
}
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header .tutor-col-auto,
body.single-lesson .tutor-lesson-sidebar .tutor-accordion-item-header .tutor-col-auto {
display: inline-flex;
align-items: center;
min-width: max-content;
}
/* Disable Tutor's pseudo-chevron; this sidebar override renders a real
.ta-topic-chevron element so the count and arrow align cleanly. */
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header::after,
body.single-lesson .tutor-lesson-sidebar .tutor-accordion-item-header::after {
content: none !important;
display: none !important;
}
body.single-lesson .ta-topic-chevron {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-right: 1.4px solid currentColor;
border-bottom: 1.4px solid currentColor;
color: var(--color-muted-invert);
opacity: 0.9;
transform: translateY(-1px) rotate(45deg);
transform-origin: center;
transition: transform var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
body.single-lesson .tutor-accordion-item-header.is-active .ta-topic-chevron {
transform: translateY(2px) rotate(-135deg);
}
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header:hover,
body.single-lesson .tutor-lesson-sidebar .tutor-accordion-item-header:hover {
background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface-dark)) !important;
}
/* Topic title text (section name) — full-contrast white, regardless of open state. */
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-course-topic-title,
body.single-lesson .tutor-lesson-sidebar .tutor-course-topic-title {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
max-width: 100%;
color: var(--color-text-invert) !important;
font-size: var(--text-sm) !important;
font-weight: var(--fw-semibold) !important;
letter-spacing: 0.01em;
}
body.single-lesson .ta-topic-title-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Section summary count (e.g. "0/4"). */
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-course-topic-summary,
body.single-lesson .tutor-lesson-sidebar .tutor-course-topic-summary {
color: rgba(250, 249, 248, 0.78) !important;
flex: 0 0 auto;
font-size: var(--text-xs) !important;
font-weight: var(--fw-regular) !important;
padding-left: 0 !important;
white-space: nowrap;
}
/* Accordion chevron icon — ensure visible on dark bg. */
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header [class*="tutor-icon"],
body.single-lesson .tutor-lesson-sidebar .tutor-accordion-item-header [class*="tutor-icon"] {
color: var(--color-muted-invert) !important;
}
/* Topic body (lesson list container) — match dark surface, no light gap. */
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-accordion-item-body,
body.single-lesson .tutor-lesson-sidebar .tutor-accordion-item-body {
background: #2A2523 !important;
border-color: var(--color-border-dark) !important;
}
/* Sidebar lesson rows — mockup-aligned: check circle on LEFT, title beside it.
Markup is provided by themes/twinepa-academy/tutor/single/lesson/lesson_sidebar.php
which uses .ta-lesson-row__* class hooks. */
body.single-lesson .tutor-course-single-sidebar-wrapper .tutor-course-topic-item,
body.single-lesson .tutor-lesson-sidebar .tutor-course-topic-item {
background: transparent !important;
border-color: var(--color-border-dark) !important;
border-left: 2px solid transparent;
}
body.single-lesson .tutor-course-topic-item > a {
display: flex !important;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4) !important;
background: transparent !important;
color: var(--color-muted-invert) !important;
transition: background var(--transition-fast), color var(--transition-fast);
}
body.single-lesson .tutor-course-topic-item > a:hover {
background: color-mix(in srgb, var(--color-brand) 12%, transparent) !important;
color: var(--color-brand) !important;
}
body.single-lesson .tutor-course-topic-item.is-active {
border-left-color: var(--color-brand-strong);
}
body.single-lesson .tutor-course-topic-item.is-active > a {
background: color-mix(in srgb, var(--color-brand) 15%, transparent) !important;
color: var(--color-brand) !important;
}
/* Check circle (left of title). Tutor's stock checkbox styling is reused
via the .tutor-form-check-circle class so completion state works as before. */
body.single-lesson .ta-lesson-row__check {
flex-shrink: 0;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
border-radius: 50% !important;
border: 1.5px solid var(--color-border-dark) !important;
background: transparent !important;
appearance: none;
-webkit-appearance: none;
}
/* Completed lesson — filled brand-strong circle with white check inside. */
body.single-lesson .tutor-course-topic-item.is-completed .ta-lesson-row__check,
body.single-lesson .ta-lesson-row__check:checked {
background: var(--color-brand-strong) !important;
border-color: var(--color-brand-strong) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 12px 12px !important;
}
/* Active lesson — empty circle with brand-strong border. */
body.single-lesson .tutor-course-topic-item.is-active .ta-lesson-row__check {
border-color: var(--color-brand) !important;
}
/* Lesson title text inside the row. */
body.single-lesson .ta-lesson-row__title {
flex: 1;
min-width: 0;
font-size: var(--text-sm);
font-weight: var(--fw-medium);
line-height: 1.3;
color: var(--color-muted-invert) !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.single-lesson .tutor-course-topic-item > a:hover .ta-lesson-row__title,
body.single-lesson .tutor-course-topic-item.is-active .ta-lesson-row__title {
color: var(--color-brand) !important;
}
/* Quiz items — italic title, dashed circle, "quiz" tag on right. */
body.single-lesson .tutor-course-topic-item-quiz .ta-lesson-row__check {
border-style: dashed !important;
border-color: var(--color-brand) !important;
}
body.single-lesson .tutor-course-topic-item-quiz .ta-lesson-row__title {
font-style: italic;
}
body.single-lesson .ta-lesson-row__tag {
flex-shrink: 0;
font-size: var(--text-xs);
color: var(--color-muted-invert);
text-transform: lowercase;
letter-spacing: 0.04em;
opacity: 0.6;
}
/* Locked lesson — small lock icon in place of the check circle. */
body.single-lesson .ta-lesson-row__lock {
flex-shrink: 0;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-muted-invert);
font-size: 14px;
opacity: 0.6;
}
body.single-lesson .tutor-course-topic-item-title {
font-size: var(--text-sm) !important;
}
body.single-lesson .tutor-course-topic-item-duration {
color: var(--color-muted-invert) !important;
font-size: var(--text-xs) !important;
opacity: 0.6;
}
/* Lesson checkboxes */
body.single-lesson .tutor-form-check-circle .tutor-form-check-input {
border-color: var(--color-border-dark) !important;
}
body.single-lesson .tutor-form-check-circle .tutor-form-check-input:checked {
background-color: var(--color-brand-strong) !important;
border-color: var(--color-brand-strong) !important;
}
/* ── 10. Lesson Top Bar ────────────────────── */
body.single-lesson .tutor-course-spotlight-tab {
background: var(--color-bg) !important;
border-bottom: 1px solid var(--color-border) !important;
font-family: var(--font-body) !important;
}
/* Course title in lesson header.
Tutor's own stylesheet sets .tutor-color-secondary inline or via high-specificity
rules — !important is warranted here to guarantee visibility on the white top bar. */
body.single-lesson .tutor-course-spotlight-tab .tutor-color-secondary {
font-family: var(--font-heading) !important;
font-weight: var(--fw-regular) !important;
color: var(--color-text) !important;
}
body.single-lesson .tutor-course-topic-single-header .tutor-color-secondary,
body.single-lesson .tutor-course-topic-single-header-title .tutor-color-secondary,
body.single-lesson .tutor-course-topic-single-header .tutor-fs-6.tutor-color-secondary {
color: var(--color-text) !important;
}
/* Progress text */
body.single-lesson .tutor-progress-content .tutor-color-muted {
font-size: var(--text-xs) !important;
}
/* "Segna come completato" button */
body.single-lesson .tutor-course-spotlight-tab .tutor-btn-primary {
background: var(--color-brand-strong) !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius-pill) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-bold) !important;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: var(--space-2) var(--space-3) !important;
transition: background var(--transition-fast);
}
body.single-lesson .tutor-course-spotlight-tab .tutor-btn-primary:hover {
background: var(--color-brand) !important;
}
/* Iconic buttons (hamburger, close, back) */
body.single-lesson .tutor-iconic-btn-secondary {
border-color: var(--color-border) !important;
color: var(--color-muted) !important;
border-radius: var(--radius-sm) !important;
}
body.single-lesson .tutor-iconic-btn-secondary:hover {
border-color: var(--color-brand) !important;
color: var(--color-brand-strong) !important;
}
/* ── 11. Lesson Navigation (Prev/Next) ────── */
/* Footer container: space-between so Prev sits left, Next sits right. */
body.single-lesson .tutor-course-topic-single-footer {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background: var(--color-surface) !important;
border-top: 1px solid var(--color-border) !important;
}
/* Base pill style shared by both nav buttons */
body.single-lesson .tutor-course-topic-single-footer .tutor-btn {
border-radius: var(--radius-pill) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-bold) !important;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: var(--space-2) var(--space-4) !important;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
/* "Precedente" — ghost / outline style */
body.single-lesson .tutor-single-course-content-prev .tutor-btn {
background: transparent !important;
border: 1px solid var(--color-border) !important;
color: var(--color-muted) !important;
}
body.single-lesson .tutor-single-course-content-prev .tutor-btn:hover {
border-color: var(--color-brand) !important;
color: var(--color-brand-strong) !important;
}
/* "Successivo" — primary filled style (CTA prominence) */
body.single-lesson .tutor-single-course-content-next .tutor-btn {
background: var(--color-brand-strong) !important;
border: none !important;
color: #fff !important;
}
body.single-lesson .tutor-single-course-content-next .tutor-btn:hover {
background: var(--color-brand) !important;
transform: translateY(-1px);
}
/* ── 12. Q&A Section ───────────────────────── */
/* Keep lesson mode focused: remove global site chrome and keep Tutor UI dominant. */
body.single-lesson .c-header,
body.single-lesson .c-footer {
display: none !important;
}
/* Q&A container: intentional rounded surface with breathing room. */
body.single-lesson #tutor-course-spotlight-questions.tutor-tab-item.is-active {
border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
border-radius: calc(var(--radius-lg) + 2px);
padding: var(--space-4);
background: color-mix(in srgb, var(--color-brand) 3%, var(--color-surface));
margin-top: var(--space-4);
box-shadow: 0 12px 28px color-mix(in srgb, var(--color-shadow) 6%, transparent);
}
/* Q&A heading — Playfair for section identity */
body.single-lesson #tutor-course-spotlight-questions.tutor-tab-item.is-active > h3 {
font-family: var(--font-heading) !important;
font-size: var(--text-lg) !important;
font-weight: var(--fw-regular) !important;
color: var(--color-text) !important;
margin-bottom: var(--space-3) !important;
}
/* Empty overview state should not create visual noise. */
body.single-lesson #tutor-course-spotlight-overview .tutor-lesson-wrapper:empty,
body.single-lesson #tutor-course-spotlight-overview .tutor-lesson-wrapper:not(:has(*)) {
display: none;
}
/* ── 13. Q&A Form — inline on desktop, stacked on mobile ── */
/* Restructure the ask-question row so the textarea and button
sit side-by-side. The textarea grows to fill available width. */
body.single-lesson .tutor-quesanswer-askquestion {
display: flex !important;
gap: var(--space-2) !important;
align-items: stretch !important;
padding: var(--space-2);
border: 1px solid color-mix(in srgb, var(--color-brand) 10%, var(--color-border));
border-radius: calc(var(--radius-md) + 2px);
background: color-mix(in srgb, var(--color-brand) 2%, var(--color-surface));
}
body.single-lesson .tutor-quesanswer-askquestion .tutor-form-control {
flex: 1 !important;
min-height: 0 !important;
resize: none !important;
min-width: 0 !important;
background: #fff !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-sm) !important;
}
/* Button wrapper: collapse the justify-end div to let the button
sit naturally in the flex row instead of being pushed below. */
body.single-lesson .tutor-quesanswer-askquestion .tutor-d-flex.tutor-justify-end.tutor-mt-24 {
margin-top: 0 !important;
flex-shrink: 0;
align-items: stretch;
}
/* "Fai una domanda" button */
body.single-lesson .sidebar-ask-new-qna-submit-btn {
background: var(--color-brand-strong) !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius-pill) !important;
min-height: 44px;
font-size: var(--text-xs) !important;
font-weight: var(--fw-bold) !important;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: var(--space-2) var(--space-4) !important;
white-space: nowrap;
width: auto !important;
transition: background var(--transition-fast);
}
body.single-lesson .sidebar-ask-new-qna-submit-btn:hover {
background: var(--color-brand) !important;
}
/* ── 14. Q&A Entries — separators and containment ── */
body.single-lesson .tutor-qna-single-question {
border: 1px solid color-mix(in srgb, var(--color-brand) 12%, var(--color-border));
border-radius: var(--radius-md);
background: #fff;
padding: var(--space-3);
overflow-wrap: break-word;
max-width: 100%;
}
body.single-lesson .tutor-qna-single-question .tutor-d-flex {
gap: var(--space-2);
align-items: flex-start;
}
body.single-lesson .tutor-qa-chatlist {
margin-top: var(--space-4);
}
body.single-lesson .tutor-qna-single-question + .tutor-qna-single-question {
margin-top: var(--space-3);
}
body.single-lesson .tutor-qna-single-question:last-of-type {
border-bottom: none;
}
/* Tutor sometimes injects an empty Q&A row; remove visual artifact. */
body.single-lesson .tutor-qna-single-question:empty {
display: none !important;
}
/* Q&A text content: editorial thread style, no boxed rectangle. */
body.single-lesson .tutor-qa-chatlist .tutor-qna-text {
display: block;
max-width: min(100%, 72ch);
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
line-height: 1.6;
color: var(--color-text);
overflow-wrap: break-word;
word-break: break-word;
}
/* "Rispondi" link — compact inline link, never pushed to edge */
body.single-lesson .tutor-toggle-reply {
display: inline-flex !important;
align-items: center;
justify-content: flex-start !important;
margin-top: var(--space-2);
max-width: 100%;
}
body.single-lesson .tutor-toggle-reply span {
color: var(--color-brand-strong) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-semibold) !important;
cursor: pointer;
transition: color var(--transition-fast);
overflow-wrap: anywhere;
padding: 0;
border-bottom: 0;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-brand) 10%, transparent);
padding: 4px 10px;
}
body.single-lesson .tutor-toggle-reply span:hover {
color: var(--color-brand) !important;
}
/* ── 15. Video wrapper — aspect ratio fallback ── */
/* Maintains 16:9 proportions when embed content is unavailable
or slow to load, preventing layout shift. */
body.single-lesson .tutor-video-player-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
background: #000;
overflow: hidden;
}
body.single-lesson.ta-lesson-kind-esercizio-pratico .tutor-video-player-wrapper {
display: none;
}
body.single-lesson .tutor-video-player-wrapper iframe,
body.single-lesson .tutor-video-player-wrapper .plyr,
body.single-lesson .tutor-video-player-wrapper .plyr__video-wrapper {
width: 100% !important;
height: 100% !important;
}
/* ── 16. Lesson page spacing ───────────────── */
/* In lesson mode the global header is hidden, so no extra top offset is needed. */
body.single-lesson .tutor-course-single-content-wrapper {
padding-top: 0;
}
/* Keep room for WP admin bar when present. */
body.admin-bar.single-lesson .tutor-course-single-content-wrapper {
padding-top: 32px;
}
/* Style the actual completion CTA used by Tutor lesson player. */
body.single-lesson .tutor-topbar-mark-btn {
background: var(--color-brand-strong) !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius-pill) !important;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
min-height: 32px;
font-size: var(--text-xs) !important;
font-weight: var(--fw-bold) !important;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 0 var(--space-5) !important;
transition: background var(--transition-fast), transform var(--transition-fast);
}
body.single-lesson .tutor-topbar-mark-btn,
body.single-lesson .tutor-topbar-mark-btn * {
color: #fff !important;
}
body.single-lesson .tutor-topbar-mark-btn [class*="tutor-icon"] {
display: none !important;
}
body.single-lesson .tutor-topbar-mark-btn:hover {
background: var(--color-brand) !important;
transform: translateY(-1px);
}
/* ── 17. Mobile Adjustments ────────────────── */
@media (max-width: 767px) {
/* Dashboard mobile bottom nav */
.tutor-dashboard-menu-toggler {
color: var(--color-brand-strong) !important;
}
/* Reduce padding */
body.tutor-screen-frontend-dashboard .tutor-wrap-parent {
margin-top: calc(60px + var(--space-3));
}
/* Sidebar overlay on mobile */
.tutor-dashboard-left-menu {
border-right: none;
}
/* Lesson layout offset for smaller mobile header */
body.single-lesson .tutor-course-single-content-wrapper {
padding-top: 0;
}
body.admin-bar.single-lesson .tutor-course-single-content-wrapper {
padding-top: 46px;
}
/* Q&A form — stacked on mobile */
body.single-lesson .tutor-quesanswer-askquestion {
flex-direction: column !important;
}
body.single-lesson .tutor-quesanswer-askquestion .tutor-d-flex.tutor-justify-end.tutor-mt-24 {
width: 100%;
}
body.single-lesson .sidebar-ask-new-qna-submit-btn {
width: 100% !important;
white-space: normal;
}
/* Q&A container: preserve rounded surface on small screens. */
body.single-lesson #tutor-course-spotlight-questions.tutor-tab-item.is-active {
padding: var(--space-3);
border-radius: var(--radius-lg);
margin-top: var(--space-3);
}
/* Q&A text: prevent horizontal overflow */
body.single-lesson .tutor-qna-text,
body.single-lesson .tutor-qna-single-wrapper {
overflow-wrap: break-word;
word-break: break-word;
max-width: 100%;
}
body.single-lesson .tutor-toggle-reply {
white-space: normal;
}
/* Nav footer: ensure buttons don't clip on narrow viewports */
body.single-lesson .tutor-course-topic-single-footer {
padding-left: var(--space-3) !important;
padding-right: var(--space-3) !important;
gap: var(--space-2);
}
body.single-lesson .tutor-course-topic-single-footer .tutor-btn {
padding: var(--space-2) var(--space-3) !important;
}
}
/* ═══════════════════════════════════════════
18. Lesson Support Panels
═══════════════════════════════════════════
Transforms flat H2 + content lesson blocks
into visually distinct card panels.
═══════════════════════════════════════════ */
body.single-lesson .ta-support-panels {
display: grid;
gap: var(--space-4);
margin-top: 0;
}
body.single-lesson .ta-support-panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
transition: border-color var(--transition-fast);
}
body.single-lesson .ta-support-panel:hover {
border-color: color-mix(in srgb, var(--color-brand) 40%, var(--color-border));
}
body.single-lesson .ta-support-panel__header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
body.single-lesson .ta-support-panel__icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Panel icon color variants */
body.single-lesson .ta-support-panel--overview .ta-support-panel__icon {
background: color-mix(in srgb, var(--color-brand) 12%, transparent);
color: var(--color-brand-strong);
}
body.single-lesson .ta-support-panel--objectives .ta-support-panel__icon {
background: color-mix(in srgb, #2E7D32 12%, transparent);
color: #2E7D32;
}
body.single-lesson .ta-support-panel--tips .ta-support-panel__icon {
background: color-mix(in srgb, #1565C0 12%, transparent);
color: #1565C0;
}
body.single-lesson .ta-support-panel__title {
font-family: var(--font-heading) !important;
font-size: var(--text-lg) !important;
font-weight: var(--fw-regular) !important;
color: var(--color-text) !important;
margin: 0 !important;
padding: 0 !important;
}
body.single-lesson .ta-support-panel__body {
font-size: var(--text-sm);
line-height: var(--lh-body);
color: var(--color-muted);
font-family: var(--font-body);
}
body.single-lesson .ta-support-panel__body p {
margin-bottom: var(--space-2);
}
body.single-lesson .ta-support-panel__body ul {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
body.single-lesson .ta-support-panel__body li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding-left: 0 !important;
}
body.single-lesson .ta-support-panel__body li::before {
display: none !important;
}
/* Tip rows: stack badge over copy so variable badge labels never push
the explanation into uneven columns. */
body.single-lesson .ta-support-panel--tips .ta-support-panel__body ul {
gap: var(--space-3);
}
body.single-lesson .ta-support-panel--tips .ta-support-panel__body li {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
max-width: 68ch;
}
body.single-lesson .ta-support-panel--tips .ta-support-panel__body li + li {
padding-top: var(--space-3);
border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}
/* Objectives list: checkmark bullets */
body.single-lesson .ta-support-panel--objectives .ta-support-panel__body li::after {
content: none;
}
/* ═══════════════════════════════════════════
19. Tip Priority Badges
═══════════════════════════════════════════ */
body.single-lesson .ta-tip-badge {
display: inline-flex;
align-items: center;
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 8px;
border-radius: var(--radius-pill);
flex-shrink: 0;
white-space: nowrap;
line-height: 1.4;
}
body.single-lesson .ta-tip-badge--critical {
background: color-mix(in srgb, #C62828 10%, transparent);
color: #C62828;
}
body.single-lesson .ta-tip-badge--important {
background: color-mix(in srgb, #E65100 10%, transparent);
color: #BF5F00;
}
body.single-lesson .ta-tip-badge--info {
background: color-mix(in srgb, #1565C0 10%, transparent);
color: #1565C0;
}
/* ═══════════════════════════════════════════
20. Video Empty State
═══════════════════════════════════════════ */
body.single-lesson .ta-video-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 200px;
color: rgba(255, 255, 255, 0.3);
}
body.single-lesson .ta-video-empty-state span {
margin-top: var(--space-3);
font-family: var(--font-body);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.42);
}
/* ═══════════════════════════════════════════
21. Sidebar Quiz Item Distinction
═══════════════════════════════════════════ */
/* Quiz items in sidebar: dashed check circle + italic title */
body.single-lesson .tutor-course-topic-item-quiz .tutor-form-check-input {
border-style: dashed !important;
border-color: var(--color-brand) !important;
}
body.single-lesson .tutor-course-topic-item-quiz .tutor-course-topic-item-title {
font-style: italic;
}
body.single-lesson .tutor-course-topic-item-quiz .tutor-icon-quiz-o {
color: var(--color-brand) !important;
}
/* ═══════════════════════════════════════════
22. Next Button — Primary CTA Style
═══════════════════════════════════════════
Override: "Successiva" uses filled primary style
while "Precedente" stays ghost/outline.
═══════════════════════════════════════════ */
body.single-lesson .tutor-single-course-content-next .tutor-btn-primary {
background: var(--color-brand-strong) !important;
border: none !important;
color: #fff !important;
}
body.single-lesson .tutor-single-course-content-next .tutor-btn-primary:hover {
background: var(--color-brand) !important;
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════
23. Topbar Visual Progress Bar
═══════════════════════════════════════════
Mockup-aligned: replace text-only progress
with a visual bar + "X / Y" count.
═══════════════════════════════════════════ */
body.single-lesson .ta-topbar-progress {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-right: var(--space-2);
flex-shrink: 0;
}
body.single-lesson .ta-topbar-progress__bar {
width: 120px;
height: 5px;
background: var(--color-border);
border-radius: var(--radius-pill);
overflow: hidden;
}
body.single-lesson .ta-topbar-progress__fill {
height: 100%;
background: linear-gradient(90deg, var(--color-brand-strong), var(--color-brand));
border-radius: var(--radius-pill);
transition: width 0.4s ease;
}
body.single-lesson .ta-topbar-progress__count {
font-size: var(--text-xs);
color: var(--color-muted);
font-weight: var(--fw-medium);
white-space: nowrap;
letter-spacing: 0.04em;
}
body.single-lesson .ta-topbar-progress__sep {
margin: 0 2px;
color: var(--color-muted-soft, #c1baba);
}
@media (max-width: 991px) {
body.single-lesson .ta-topbar-progress__bar { width: 80px; }
}
@media (max-width: 700px) {
body.single-lesson .ta-topbar-progress {
display: none;
}
body.single-lesson .tutor-topbar-mark-btn {
padding-inline: var(--space-3) !important;
}
}
@media (max-width: 520px) {
body.single-lesson .tutor-course-topic-single-header.tutor-single-page-top-bar {
padding-inline: var(--space-3) !important;
}
body.single-lesson .tutor-course-topic-single-header-title {
margin-left: var(--space-2) !important;
margin-right: var(--space-2) !important;
flex: 1 1 auto;
font-size: 0.875rem !important;
}
body.single-lesson .ta-topbar-actions {
flex: 0 0 auto;
margin-left: var(--space-1) !important;
}
body.single-lesson .ta-topbar-close {
display: none !important;
}
body.single-lesson .tutor-topbar-mark-btn {
padding-inline: var(--space-3) !important;
letter-spacing: 0.12em;
}
body.single-lesson .tutor-topbar-mark-btn span:not([class*="tutor-icon"]) {
display: none !important;
}
body.single-lesson .tutor-topbar-mark-btn::after {
content: "Completa";
color: #fff;
}
}
/* ═══════════════════════════════════════════
24. Lesson Header Block
═══════════════════════════════════════════
Breadcrumb (section name + position) and
Playfair H1 lesson title above the content.
═══════════════════════════════════════════ */
body.single-lesson .ta-lesson-header {
margin-bottom: var(--space-5);
font-family: var(--font-body);
}
body.single-lesson .ta-lesson-context {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
font-size: var(--text-xs);
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: var(--fw-medium);
}
body.single-lesson .ta-lesson-context__section {
color: var(--color-brand-strong);
font-weight: var(--fw-semibold);
}
body.single-lesson .ta-lesson-context__sep {
color: var(--color-muted-soft, #c1baba);
}
body.single-lesson .ta-lesson-title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--fw-regular);
line-height: var(--lh-snug);
color: var(--color-text);
margin: 0 0 var(--space-2);
}
/* ═══════════════════════════════════════════
25. Lesson Content — Centered Reading Width
═══════════════════════════════════════════
Constrain spotlight content to mockup's
880px reading column for legibility.
═══════════════════════════════════════════ */
body.single-lesson .tutor-course-spotlight-wrapper {
padding: 0 !important;
}
body.single-lesson .tutor-course-spotlight-wrapper .tutor-course-spotlight-tab {
max-width: 880px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding: var(--space-6) var(--space-6) var(--space-5) !important;
background: transparent !important;
border-bottom: 0 !important;
}
body.single-lesson .tutor-course-spotlight-wrapper .tutor-lesson-wrapper {
width: 100%;
font-family: var(--font-body) !important;
color: var(--color-text) !important;
}
body.single-lesson #tutor-course-spotlight-overview {
width: 100%;
}
@media (max-width: 991px) {
body.single-lesson .tutor-course-spotlight-wrapper .tutor-course-spotlight-tab {
padding: var(--space-5) var(--space-4) var(--space-4) !important;
}
}
/* ═══════════════════════════════════════════
26. Quiz Page — Lesson Player Alignment
═══════════════════════════════════════════
Tutor quizzes use the same content loader as lessons, but a different
body class. Keep behavior intact and align the shell visually.
═══════════════════════════════════════════ */
body.single-tutor_quiz {
background: var(--color-bg);
}
body.single-tutor_quiz .c-header,
body.single-tutor_quiz .c-footer {
display: none !important;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper {
background: #2A2523 !important;
color: var(--color-text-invert) !important;
font-family: var(--font-body) !important;
border-right: none !important;
}
@media (min-width: 992px) {
body.single-tutor_quiz {
--lesson-sidebar-width: 360px;
--lesson-topbar-height: 60px;
}
body.single-tutor_quiz .tutor-course-topic-single-header.tutor-single-page-top-bar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: var(--lesson-topbar-height) !important;
z-index: 100;
background: var(--color-surface) !important;
color: var(--color-text) !important;
border-bottom: 1px solid var(--color-border) !important;
padding: 0 var(--space-4) !important;
}
body.admin-bar.single-tutor_quiz .tutor-course-topic-single-header.tutor-single-page-top-bar {
top: 32px !important;
}
body.single-tutor_quiz .tutor-course-topic-single-header.tutor-single-page-top-bar,
body.single-tutor_quiz .tutor-course-topic-single-header.tutor-single-page-top-bar * {
color: var(--color-text);
}
body.single-tutor_quiz .tutor-course-topic-single-header.tutor-single-page-top-bar .tutor-course-topic-single-header-title {
font-family: var(--font-heading) !important;
font-size: var(--text-sm) !important;
font-weight: var(--fw-regular) !important;
color: var(--color-muted) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.single-tutor_quiz .tutor-course-topic-single-header.tutor-single-page-top-bar .tutor-iconic-btn {
color: var(--color-muted) !important;
}
body.single-tutor_quiz .tutor-course-topic-single-header.tutor-single-page-top-bar .tutor-iconic-btn:hover {
color: var(--color-brand-strong) !important;
}
body.single-tutor_quiz .tutor-course-topic-single-header.tutor-single-page-top-bar
.tutor-course-topics-sidebar-toggler {
display: none !important;
}
body.single-tutor_quiz .tutor-course-single-content-wrapper {
align-items: flex-start !important;
padding-top: var(--lesson-topbar-height) !important;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper {
align-self: flex-start !important;
position: sticky !important;
top: var(--lesson-topbar-height) !important;
flex: 0 0 var(--lesson-sidebar-width) !important;
width: var(--lesson-sidebar-width) !important;
max-width: var(--lesson-sidebar-width) !important;
height: calc(100vh - var(--lesson-topbar-height)) !important;
min-height: 0 !important;
overflow-y: auto !important;
}
body.admin-bar.single-tutor_quiz .tutor-course-single-sidebar-wrapper {
top: calc(var(--lesson-topbar-height) + 32px) !important;
height: calc(100vh - var(--lesson-topbar-height) - 32px) !important;
}
body.single-tutor_quiz .tutor-quiz-single-entry-wrap {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
}
}
body.single-tutor_quiz .tutor-course-single-sidebar-title {
color: var(--color-muted-invert) !important;
background: #2A2523 !important;
font-size: var(--text-xs) !important;
text-transform: uppercase;
letter-spacing: 0.3em;
font-weight: var(--fw-bold) !important;
padding: var(--space-4) var(--space-4) var(--space-3) !important;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
background: var(--color-surface-dark) !important;
border-color: var(--color-border-dark) !important;
padding: var(--space-3) var(--space-4) !important;
transition: background var(--transition-fast);
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header::after {
content: "" !important;
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
color: var(--color-muted-invert) !important;
transform: rotate(45deg) !important;
transition: transform var(--transition-fast), color var(--transition-fast);
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active::after {
transform: rotate(-135deg) !important;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header:hover {
background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface-dark)) !important;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper .tutor-course-topic-title {
color: var(--color-text-invert) !important;
font-size: var(--text-sm) !important;
font-weight: var(--fw-semibold) !important;
letter-spacing: 0.01em;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper .tutor-course-topic-summary {
color: var(--color-muted-invert) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-regular) !important;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header [class*="tutor-icon"] {
color: var(--color-muted-invert) !important;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper .tutor-accordion-item-body {
background: #2A2523 !important;
border-color: var(--color-border-dark) !important;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper .tutor-course-topic-item {
background: transparent !important;
border-color: var(--color-border-dark) !important;
border-left: 2px solid transparent;
}
body.single-tutor_quiz .tutor-course-topic-item > a {
display: flex !important;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4) !important;
background: transparent !important;
color: var(--color-muted-invert) !important;
transition: background var(--transition-fast), color var(--transition-fast);
}
body.single-tutor_quiz .tutor-course-topic-item > a:hover {
background: color-mix(in srgb, var(--color-brand) 12%, transparent) !important;
color: var(--color-brand) !important;
}
body.single-tutor_quiz .tutor-course-topic-item.is-active {
border-left-color: var(--color-brand-strong);
}
body.single-tutor_quiz .tutor-course-topic-item.is-active > a {
background: color-mix(in srgb, var(--color-brand) 15%, transparent) !important;
color: var(--color-brand) !important;
}
body.single-tutor_quiz .ta-lesson-row__check {
flex-shrink: 0;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
border-radius: 50% !important;
border: 1.5px solid var(--color-border-dark) !important;
background: transparent !important;
appearance: none;
-webkit-appearance: none;
}
body.single-tutor_quiz .tutor-course-topic-item.is-completed .ta-lesson-row__check,
body.single-tutor_quiz .ta-lesson-row__check:checked {
background: var(--color-brand-strong) !important;
border-color: var(--color-brand-strong) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 12px 12px !important;
}
body.single-tutor_quiz .tutor-course-topic-item.is-active .ta-lesson-row__check {
border-color: var(--color-brand) !important;
}
body.single-tutor_quiz .ta-lesson-row__title {
flex: 1;
min-width: 0;
color: var(--color-muted-invert) !important;
font-size: var(--text-sm);
font-weight: var(--fw-medium);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.single-tutor_quiz .tutor-course-topic-item > a:hover .ta-lesson-row__title,
body.single-tutor_quiz .tutor-course-topic-item.is-active .ta-lesson-row__title {
color: var(--color-brand) !important;
}
body.single-tutor_quiz .tutor-course-topic-item-quiz .ta-lesson-row__check {
border-style: dashed !important;
border-color: var(--color-brand) !important;
}
body.single-tutor_quiz .tutor-course-topic-item-quiz .ta-lesson-row__title {
font-style: italic;
}
body.single-tutor_quiz .ta-lesson-row__tag {
flex-shrink: 0;
color: var(--color-muted-invert);
font-size: var(--text-xs);
letter-spacing: 0.04em;
opacity: 0.6;
}
body.single-tutor_quiz .tutor-quiz-wrapper {
flex: 1 1 auto;
width: 100%;
padding: 0 !important;
background: var(--color-bg);
}
body.single-tutor_quiz .tutor-quiz-wrap,
body.single-tutor_quiz .tutor-start-quiz-wrapper {
width: min(880px, calc(100% - var(--space-6)));
margin: 0 auto !important;
}
body.single-tutor_quiz .tutor-quiz-wrap {
padding: var(--space-6) var(--space-6) var(--space-5);
box-sizing: border-box;
}
body.single-tutor_quiz .tutor-start-quiz-wrapper {
margin-top: var(--space-6) !important;
padding: var(--space-5) !important;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
body.single-tutor_quiz .tutor-start-quiz-title .tutor-fs-6:first-child {
color: var(--color-brand-strong) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-semibold) !important;
letter-spacing: 0.12em;
text-transform: uppercase;
}
body.single-tutor_quiz .tutor-start-quiz-title .tutor-fs-4 {
margin-top: var(--space-2);
font-family: var(--font-heading) !important;
font-size: clamp(1.5rem, 3vw, 2rem) !important;
font-weight: var(--fw-regular) !important;
line-height: var(--lh-snug);
color: var(--color-text) !important;
}
body.single-tutor_quiz .tutor-quiz-info-area {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
margin: var(--space-4) 0 var(--space-5) !important;
}
body.single-tutor_quiz .tutor-quiz-info {
padding: var(--space-3);
background: color-mix(in srgb, var(--color-brand) 4%, var(--color-bg));
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
body.single-tutor_quiz .tutor-quiz-info span:first-child,
body.single-tutor_quiz .quiz-meta-info .tutor-color-muted {
color: var(--color-muted) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.single-tutor_quiz .tutor-quiz-info span:last-child,
body.single-tutor_quiz .quiz-meta-info .tutor-fw-bold,
body.single-tutor_quiz .quiz-meta-info .tutor-fw-medium {
color: var(--color-text) !important;
font-size: var(--text-sm) !important;
}
body.single-tutor_quiz .quiz-meta-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
body.single-tutor_quiz .quiz-meta-info-left,
body.single-tutor_quiz .quiz-meta-info-right,
body.single-tutor_quiz .quiz-qno,
body.single-tutor_quiz .quiz-total-attempt,
body.single-tutor_quiz .quiz-time-remaining {
align-items: center;
gap: var(--space-2);
}
body.single-tutor_quiz .quiz-attempt-single-question {
margin-top: var(--space-4);
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
body.single-tutor_quiz .quiz-question {
margin: 0 0 var(--space-4) !important;
}
body.single-tutor_quiz .quiz-question-title {
margin: 0 !important;
font-family: var(--font-heading) !important;
font-size: var(--text-xl) !important;
font-weight: var(--fw-regular) !important;
line-height: var(--lh-snug);
color: var(--color-text) !important;
}
body.single-tutor_quiz .quiz-question-ans-choice-area {
margin-top: var(--space-4) !important;
}
body.single-tutor_quiz .quiz-question-ans-choice-area > .tutor-quiz-wrap {
width: 100%;
max-width: none;
padding: 0 !important;
margin: 0 !important;
}
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-row {
gap: var(--space-3) 0;
}
body.single-tutor_quiz .tutor-quiz-answer-single {
margin-bottom: 0 !important;
}
body.single-tutor_quiz .tutor-quiz-answer-single label {
display: block;
width: 100%;
cursor: pointer;
}
body.single-tutor_quiz .tutor-quiz-answer-single .tutor-card {
width: 100%;
min-height: 52px;
padding: var(--space-3) !important;
background: color-mix(in srgb, var(--color-brand) 2%, var(--color-surface));
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
transition: border-color var(--transition-fast), background var(--transition-fast);
}
body.single-tutor_quiz .tutor-quiz-answer-single .tutor-d-flex {
width: 100%;
}
body.single-tutor_quiz .tutor-quiz-answer-single label:hover .tutor-card,
body.single-tutor_quiz .tutor-quiz-answer-single .tutor-card:has(input:checked) {
background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-brand) 55%, var(--color-border));
}
body.single-tutor_quiz .tutor-quiz-answer-single .tutor-form-check-input {
width: 20px;
height: 20px;
margin: 0 !important;
border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border)) !important;
box-shadow: none !important;
}
body.single-tutor_quiz .tutor-quiz-answer-single .tutor-form-check-input:checked {
background-color: var(--color-brand-strong) !important;
border-color: var(--color-brand-strong) !important;
}
body.single-tutor_quiz .tutor-quiz-answer-single .tutor-fs-6 {
color: var(--color-text) !important;
font-size: var(--text-sm) !important;
line-height: var(--lh-snug);
}
body.single-tutor_quiz .tutor-quiz-btn-group,
body.single-tutor_quiz .tutor-quiz-btn-grp,
body.single-tutor_quiz .quiz-answer-footer-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
margin-top: var(--space-5) !important;
}
body.single-tutor_quiz .tutor-btn-primary,
body.single-tutor_quiz .start-quiz-btn,
body.single-tutor_quiz .tutor-quiz-answer-next-btn,
body.single-tutor_quiz .tutor-quiz-submit-btn {
min-height: 44px;
padding: var(--space-2) var(--space-4) !important;
background: var(--color-brand-strong) !important;
border: 0 !important;
border-radius: var(--radius-pill) !important;
color: #fff !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-bold) !important;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: background var(--transition-fast), transform var(--transition-fast);
}
body.single-tutor_quiz .tutor-btn-primary:hover,
body.single-tutor_quiz .start-quiz-btn:hover,
body.single-tutor_quiz .tutor-quiz-answer-next-btn:hover,
body.single-tutor_quiz .tutor-quiz-submit-btn:hover {
background: var(--color-brand) !important;
transform: translateY(-1px);
}
body.single-tutor_quiz .tutor-btn-primary:disabled,
body.single-tutor_quiz .start-quiz-btn:disabled,
body.single-tutor_quiz .tutor-quiz-answer-next-btn:disabled,
body.single-tutor_quiz .tutor-quiz-submit-btn:disabled {
cursor: not-allowed;
opacity: 0.55;
transform: none;
}
body.single-tutor_quiz .tutor-btn-outline-primary,
body.single-tutor_quiz .tutor-btn-secondary,
body.single-tutor_quiz .tutor-btn-tertiary,
body.single-tutor_quiz .tutor-btn-ghost {
min-height: 44px;
padding: var(--space-2) var(--space-4) !important;
background: transparent !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-pill) !important;
color: var(--color-muted) !important;
font-size: var(--text-xs) !important;
font-weight: var(--fw-bold) !important;
letter-spacing: 0.15em;
text-transform: uppercase;
}
body.single-tutor_quiz .tutor-btn-outline-primary:hover,
body.single-tutor_quiz .tutor-btn-secondary:hover,
body.single-tutor_quiz .tutor-btn-tertiary:hover,
body.single-tutor_quiz .tutor-btn-ghost:hover {
border-color: var(--color-brand) !important;
color: var(--color-brand-strong) !important;
}
body.single-tutor_quiz .tutor-course-topic-single-footer {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
margin: auto 0 0 !important;
padding: var(--space-4) var(--space-6) !important;
background: var(--color-surface) !important;
border-top: 1px solid var(--color-border) !important;
}
@media (max-width: 991px) {
body.single-tutor_quiz .tutor-spotlight-mobile-progress-complete {
display: none !important;
}
body.single-tutor_quiz .tutor-course-single-content-wrapper {
padding-top: 0 !important;
}
body.single-tutor_quiz .tutor-course-single-sidebar-wrapper {
background: #2A2523 !important;
}
body.single-tutor_quiz .tutor-quiz-wrapper {
padding: 0 !important;
}
body.single-tutor_quiz .tutor-quiz-wrap,
body.single-tutor_quiz .tutor-start-quiz-wrapper {
width: 100%;
}
body.single-tutor_quiz .tutor-quiz-wrap {
padding: var(--space-5) var(--space-4) var(--space-4);
}
body.single-tutor_quiz .tutor-start-quiz-wrapper {
margin-top: 0 !important;
border-left: 0;
border-right: 0;
border-radius: 0;
}
body.single-tutor_quiz .quiz-meta-info,
body.single-tutor_quiz .tutor-quiz-info-area {
grid-template-columns: 1fr;
flex-direction: column;
align-items: flex-start;
}
body.single-tutor_quiz .quiz-attempt-single-question {
padding: var(--space-4);
}
body.single-tutor_quiz .tutor-quiz-answer-single {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.single-tutor_quiz .quiz-question-ans-choice-area .tutor-row {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.single-tutor_quiz .quiz-question-title {
font-size: var(--text-lg) !important;
}
body.single-tutor_quiz .tutor-quiz-btn-group,
body.single-tutor_quiz .tutor-quiz-btn-grp,
body.single-tutor_quiz .quiz-answer-footer-bar {
flex-direction: column-reverse;
align-items: stretch;
}
body.single-tutor_quiz .tutor-quiz-btn-group .tutor-btn,
body.single-tutor_quiz .tutor-quiz-btn-grp .tutor-btn,
body.single-tutor_quiz .quiz-answer-footer-bar .tutor-btn {
width: 100% !important;
justify-content: center;
margin-left: 0 !important;
margin-right: 0 !important;
white-space: normal;
}
body.single-tutor_quiz .tutor-course-topic-single-footer {
padding-left: var(--space-3) !important;
padding-right: var(--space-3) !important;
gap: var(--space-2);
}
}