/**
* Backlot Child Theme — TutorLMS Override
* Derivato da: docs/tutor-audit.md (Brief B3)
*
* STRATEGIA (validata in B1-FIX e B2-FIX):
* 1. Variable remap alla sorgente (--tutor-* → --backlot-*) — fa il 60%
* 2. Override hardcoded colors (#fff, #f4f6f9, ecc.) con specificity match
* 3. Refinement componenti specifici (sidebar, banner, dashboard, quiz)
*
* NIENTE !important salvo dove specificato (raro, solo per override
* inline/utility class hardcoded del plugin).
*
* Caricato DOPO components.css (vedi functions.php enqueue priority).
*
* Sezioni:
* 01. VARIABLE REMAP
* 02. HARDCODED COLORS RESCUE
* 03. WRAPPERS / CONTAINERS
* 04. SIDEBAR CORSO
* 05. BANNER LEZIONE TOP
* 06. PROGRESS BAR + PERCENT
* 07. BUTTONS (.tutor-btn → bkl-btn style)
* 08. CARDS
* 09. DASHBOARD STUDENTE
* 10. QUIZ UI
* 11. FORM FIELDS / TOGGLE
* 12. ALERTS
* 13. MODALI
* 14. ICONS (webfont coloring)
* 15. NAVIGAZIONE LEZIONE
*/
/* ============================================================
01. VARIABLE REMAP
Override delle --tutor-* iniettate nel dal plugin.
Specificity :root + caricato dopo → vince.
============================================================ */
:root {
/* Core color */
--tutor-color-primary: var(--backlot-gold);
--tutor-color-primary-hover: var(--backlot-gold-soft);
--tutor-color-primary-rgb: 201, 168, 76; /* #C9A84C */
--tutor-color-secondary: var(--backlot-text-secondary);
--tutor-color-subdued: var(--backlot-text-muted);
--tutor-color-hints: var(--backlot-text-muted);
--tutor-color-muted: var(--backlot-text-muted);
--tutor-color-white: var(--backlot-text); /* "white" in TutorLMS = il colore testo chiaro */
--tutor-color-gray: var(--backlot-surface-2);
--tutor-color-gray-10: var(--backlot-surface-1);
--tutor-color-gray-rgb: 140, 126, 112;
/* Status */
--tutor-color-success: var(--backlot-success);
--tutor-color-success-rgb: 34, 197, 94;
--tutor-color-warning: var(--backlot-warning);
--tutor-color-warning-rgb: 245, 158, 11;
--tutor-color-danger: var(--backlot-error);
--tutor-color-danger-rgb: 220, 38, 38;
/* Body / borders */
--tutor-body-color: var(--backlot-text); /* già definito in tokens.css §11, ribadito qui */
--tutor-body-color-rgb: 242, 232, 218;
--tutor-border-color: var(--backlot-border-gold);
/* Disabled */
--tutor-disabled-bg: var(--backlot-surface-2);
--tutor-disabled-color: var(--backlot-text-dim);
/* NON rimappiamo: spacing (--tutor-gutter-x/y), --tutor-text-size,
--tutor-table-border-radius — sono invarianti del layout Tutor. */
}
/* ============================================================
02. HARDCODED COLORS RESCUE
TutorLMS hardcoda colori in classi utility e in alcuni contesti
specifici. Li rispostiamo su token Backlot.
============================================================ */
/* Background utility class — elemento usato in card body, modal body, ecc. */
.tutor-bg-white,
[class*="tutor-bg-white"] {
background-color: var(--backlot-surface-1);
}
.tutor-bg-gray-10,
.tutor-color-gray-10-bg {
background-color: var(--backlot-surface-1);
}
.tutor-bg-gray-20 {
background-color: var(--backlot-surface-2);
}
.tutor-bg-gray-30,
.tutor-bg-gray-40 {
background-color: var(--backlot-surface-3);
}
/* Inline color text utility */
.tutor-text-white,
[class*="tutor-text-white"] {
color: var(--backlot-text);
}
.tutor-color-black,
.tutor-text-black {
color: var(--backlot-text);
}
/* Borders hardcoded grey → border Backlot */
.tutor-border,
[class*="tutor-border-"] {
border-color: var(--backlot-border);
}
/* ============================================================
03. WRAPPERS / CONTAINERS
============================================================ */
.tutor-wrap,
.tutor-page-wrap,
.tutor-container {
background-color: transparent;
color: var(--backlot-text);
}
.tutor-page-wrap {
background: var(--backlot-bg);
}
/* Body link inside Tutor wrappers */
.tutor-wrap a,
.tutor-page-wrap a {
color: var(--backlot-gold);
}
.tutor-wrap a:hover,
.tutor-page-wrap a:hover {
color: var(--backlot-gold-soft);
}
/* ============================================================
04. SIDEBAR CORSO (in pagina lezione)
============================================================ */
.tutor-course-single-sidebar-wrapper,
.tutor-course-spotlight-sidebar,
.tutor-course-topic-list,
.tutor-course-topics {
background: var(--backlot-surface-1);
border-color: var(--backlot-border);
color: var(--backlot-text);
}
/* Topic accordion header */
.tutor-accordion-item-header,
.tutor-course-topic-header,
.tutor-course-topic > .tutor-accordion-item-header {
background: var(--backlot-surface-1);
color: var(--backlot-text);
border-bottom: 1px solid var(--backlot-border);
transition: background-color var(--backlot-transition-base),
color var(--backlot-transition-base);
}
.tutor-accordion-item-header:hover,
.tutor-course-topic-header:hover {
background: var(--backlot-surface-2);
color: var(--backlot-gold);
}
/* Topic aperto */
.tutor-accordion-item-header[aria-expanded="true"],
.tutor-course-topic.is-active > .tutor-accordion-item-header {
background: var(--backlot-surface-2);
color: var(--backlot-gold);
border-left: 3px solid var(--backlot-gold);
}
/* Topic body / lesson list */
.tutor-accordion-item-body,
.tutor-course-topic-list,
.tutor-course-topic-body {
background: var(--backlot-surface-1);
}
/* Singolo item lezione */
.tutor-course-topic-item,
.tutor-course-lesson-item,
.tutor-course-spotlight-item {
background: transparent;
color: var(--backlot-text-secondary);
border-bottom: 1px solid var(--backlot-border);
padding: var(--backlot-space-3) var(--backlot-space-5);
transition: background-color var(--backlot-transition-fast),
color var(--backlot-transition-fast);
}
.tutor-course-topic-item:hover,
.tutor-course-lesson-item:hover,
.tutor-course-spotlight-item:hover {
background: var(--backlot-surface-2);
color: var(--backlot-text);
}
/* Lesson item current (lezione attualmente in vista) */
.tutor-course-topic-item.is-active,
.tutor-course-spotlight-item.is-active,
.tutor-course-spotlight-item--active,
.tutor-course-topic-item-active {
background: var(--backlot-surface-2);
color: var(--backlot-text);
border-left: 3px solid var(--backlot-gold);
}
/* Lesson item completed — icona check gold */
.tutor-course-topic-item.is-completed .tutor-icon-circle-mark,
.tutor-course-topic-item.is-completed [class*="tutor-icon-mark"],
.tutor-course-spotlight-item.is-completed [class*="tutor-icon-circle-mark"] {
color: var(--backlot-success);
}
.tutor-course-topic-item.is-completed,
.tutor-course-spotlight-item.is-completed {
color: var(--backlot-text-muted);
}
/* Lesson item locked (preview style — la logica vera arriva in D2) */
.tutor-course-topic-item.is-locked,
.tutor-course-spotlight-item.is-locked,
.tutor-course-topic-item--locked {
color: var(--backlot-text-dim);
cursor: not-allowed;
}
.tutor-course-topic-item.is-locked [class*="tutor-icon-lock"] {
color: var(--backlot-locked);
}
/* Topic progress indicator (es. "1/5") */
.tutor-course-topic-progress,
.tutor-course-topic-item-count {
color: var(--backlot-gold-soft);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-medium);
font-size: var(--backlot-fs-eyebrow);
}
/* ============================================================
05. BANNER LEZIONE TOP (spotlight header)
============================================================ */
.tutor-course-spotlight-header,
.tutor-lesson-top-bar,
.tutor-spotlight-header,
.tutor-spotlight-mobile-progress-complete {
background: var(--backlot-surface-2);
color: var(--backlot-text);
border-bottom: 1px solid var(--backlot-surface-3);
box-shadow: none;
}
/* Course title nell'header */
.tutor-course-spotlight-header .tutor-course-title,
.tutor-spotlight-header .tutor-course-name,
.tutor-spotlight-back-to-course-title {
color: var(--backlot-gold);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-semibold);
}
/* "Indietro" link / chevron */
.tutor-spotlight-back-to-course,
.tutor-spotlight-back-to-course a {
color: var(--backlot-gold);
}
.tutor-spotlight-back-to-course:hover,
.tutor-spotlight-back-to-course a:hover {
color: var(--backlot-gold-soft);
}
/* Bottone close ✕ */
.tutor-spotlight-close,
.tutor-spotlight-exit-btn {
color: var(--backlot-text-secondary);
background: transparent;
transition: color var(--backlot-transition-fast);
}
.tutor-spotlight-close:hover,
.tutor-spotlight-exit-btn:hover {
color: var(--backlot-gold);
}
/* ============================================================
06. PROGRESS BAR + PERCENT
============================================================ */
.tutor-progress-bar,
.tutor-progress-wrap {
background: var(--backlot-surface-2);
border-radius: var(--backlot-radius-pill);
overflow: hidden;
height: 6px;
}
.tutor-progress-bar-fill,
.tutor-progress-filled,
.tutor-progress-filled::after {
background: var(--backlot-gradient-tracker);
transition: width 400ms var(--backlot-easing-cinematic);
border-radius: var(--backlot-radius-pill);
}
.tutor-progress-percent,
.tutor-course-progress-percent,
.tutor-progress-stat,
.tutor-progress-value {
color: var(--backlot-gold);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-semibold);
}
/* Circular progress */
.tutor-circle-progress {
color: var(--backlot-gold);
}
/* ============================================================
07. BUTTONS — .tutor-btn → stile .bkl-btn
Sovrascriviamo i bottoni Tutor per matchare visivamente i nostri
.bkl-btn senza cambiare le classi HTML (che sono PHP-generated).
============================================================ */
.tutor-btn,
button.tutor-btn,
a.tutor-btn,
input.tutor-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--backlot-space-2);
font-family: var(--backlot-font-display);
font-size: var(--backlot-fs-body);
font-weight: var(--backlot-fw-medium);
line-height: 1;
letter-spacing: 0.01em;
border-radius: var(--backlot-radius-pill);
border: 1px solid transparent;
cursor: pointer;
user-select: none;
text-decoration: none;
transition:
background-color var(--backlot-transition-base),
color var(--backlot-transition-base),
border-color var(--backlot-transition-base),
box-shadow var(--backlot-transition-base),
transform var(--backlot-transition-fast);
}
/* Sizes */
.tutor-btn,
.tutor-btn-md {
padding: var(--backlot-space-3) var(--backlot-space-5);
}
.tutor-btn-sm {
padding: var(--backlot-space-2) var(--backlot-space-4);
font-size: var(--backlot-fs-body-sm);
}
.tutor-btn-lg {
padding: var(--backlot-space-4) var(--backlot-space-7);
font-size: var(--backlot-fs-body-lg);
}
/* Primary → gradient gold */
.tutor-btn-primary,
button.tutor-btn-primary,
a.tutor-btn-primary,
.tutor-btn.tutor-btn-primary {
color: var(--backlot-text-on-gold);
background: var(--backlot-gradient-gold);
border-color: transparent;
box-shadow: var(--backlot-shadow-card);
font-weight: var(--backlot-fw-semibold);
}
.tutor-btn-primary:hover,
button.tutor-btn-primary:hover,
a.tutor-btn-primary:hover {
color: var(--backlot-text-on-gold);
background: var(--backlot-gradient-gold-soft);
box-shadow: var(--backlot-shadow-card-hover);
transform: translateY(-1px);
}
.tutor-btn-primary:active {
transform: translateY(1px);
box-shadow: none;
}
/* Outline primary → secondary gold outline */
.tutor-btn-outline-primary,
button.tutor-btn-outline-primary,
a.tutor-btn-outline-primary {
color: var(--backlot-gold);
background: transparent;
border-color: var(--backlot-gold);
}
.tutor-btn-outline-primary:hover {
color: var(--backlot-gold-soft);
background: rgba(201, 168, 76, 0.08);
border-color: var(--backlot-gold-soft);
}
/* Secondary → ghost */
.tutor-btn-secondary,
.tutor-btn-outline-secondary,
.tutor-btn-ghost {
color: var(--backlot-text);
background: transparent;
border-color: var(--backlot-border-gold);
}
.tutor-btn-secondary:hover,
.tutor-btn-outline-secondary:hover,
.tutor-btn-ghost:hover {
color: var(--backlot-gold);
background: var(--backlot-surface-1);
border-color: var(--backlot-gold);
}
/* Danger → red-terra */
.tutor-btn-danger {
color: var(--backlot-cream);
background: var(--backlot-red-terra);
border-color: var(--backlot-red-terra);
}
.tutor-btn-danger:hover {
background: #6E2222;
border-color: #6E2222;
}
/* Success → green-forest */
.tutor-btn-success {
color: var(--backlot-cream);
background: var(--backlot-green-forest);
border-color: var(--backlot-green-forest);
}
/* Link */
.tutor-btn-link {
color: var(--backlot-gold);
background: transparent;
border-color: transparent;
text-decoration: underline;
text-underline-offset: 3px;
}
.tutor-btn-link:hover {
color: var(--backlot-gold-soft);
background: transparent;
}
/* Disabled — override hardcoded #E9E9EA */
.tutor-btn[disabled],
.tutor-btn-disabled,
button.tutor-btn[disabled],
a.tutor-btn[disabled] {
background: var(--backlot-surface-2);
color: var(--backlot-text-dim);
border-color: var(--backlot-border);
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* Focus tastiera */
.tutor-btn:focus-visible,
button.tutor-btn:focus-visible,
a.tutor-btn:focus-visible {
outline: none;
box-shadow: var(--backlot-shadow-focus-ring);
}
/* Bottone "Segna come completato" nella top bar */
.tutor-topbar-complete-btn,
.tutor-course-topic-item-complete-btn {
/* eredita stile .tutor-btn-primary se ha quella classe; aggiungiamo
comunque coerenza visiva di base */
background: var(--backlot-gradient-gold);
color: var(--backlot-text-on-gold);
font-weight: var(--backlot-fw-semibold);
}
/* ============================================================
08. CARDS
============================================================ */
.tutor-card {
background: var(--backlot-surface-1);
border: 1px solid var(--backlot-border);
border-radius: var(--backlot-radius-card);
color: var(--backlot-text);
box-shadow: none;
transition: border-color var(--backlot-transition-base),
box-shadow var(--backlot-transition-base),
transform var(--backlot-transition-base);
}
.tutor-card:hover {
border-color: var(--backlot-border-gold);
box-shadow: var(--backlot-shadow-card);
}
.tutor-card-header,
.tutor-card-footer {
background: transparent;
border-color: var(--backlot-border);
color: var(--backlot-text);
}
.tutor-card-body {
background: var(--backlot-surface-1); /* override hardcoded #F4F6F9 */
color: var(--backlot-text);
}
.tutor-card.is-active {
background: var(--backlot-surface-2);
border-color: var(--backlot-gold);
}
/* Course card listing (corso pubblico, se renderizzato) */
.tutor-course-card,
.tutor-course-list-card {
background: var(--backlot-surface-1);
border: 1px solid var(--backlot-border);
color: var(--backlot-text);
}
.tutor-course-card:hover,
.tutor-course-list-card:hover {
border-color: var(--backlot-border-gold);
transform: translateY(-2px);
box-shadow: var(--backlot-shadow-card);
}
/* Info card / featured */
.tutor-info-card {
background: var(--backlot-surface-1);
border: 1px solid var(--backlot-border-gold);
color: var(--backlot-text);
}
/* ============================================================
09. DASHBOARD STUDENTE
============================================================ */
.tutor-dashboard,
.tutor-dashboard-inner,
.tutor-dashboard-content {
background: var(--backlot-bg);
color: var(--backlot-text);
}
/* Sidebar dashboard */
.tutor-dashboard-left-menu,
.tutor-dashboard-sidebar,
.tutor-dashboard-permalinks {
background: var(--backlot-surface-1);
border-color: var(--backlot-border);
}
.tutor-dashboard-menu-item,
.tutor-dashboard-permalinks li {
border-bottom: 1px solid var(--backlot-border);
}
.tutor-dashboard-menu-item-link,
.tutor-dashboard-permalinks li a {
color: var(--backlot-text);
padding: var(--backlot-space-3) var(--backlot-space-5);
display: flex;
align-items: center;
gap: var(--backlot-space-3);
border-left: 3px solid transparent;
transition: background-color var(--backlot-transition-fast),
color var(--backlot-transition-fast),
border-color var(--backlot-transition-fast);
}
.tutor-dashboard-menu-item-link:hover,
.tutor-dashboard-permalinks li a:hover {
background: var(--backlot-surface-2);
color: var(--backlot-gold);
}
.tutor-dashboard-permalinks li.active a,
.tutor-dashboard-menu-item.is-active .tutor-dashboard-menu-item-link {
background: var(--backlot-surface-2);
color: var(--backlot-gold);
border-left-color: var(--backlot-gold);
}
.tutor-dashboard-menu-item-icon {
color: inherit; /* eredita da link, così segue hover/active */
}
/* Header dashboard (avatar + nome) */
.tutor-dashboard-header {
background: var(--backlot-surface-1);
border-bottom: 1px solid var(--backlot-border);
padding: var(--backlot-space-6);
}
.tutor-dashboard-header-display-name,
.tutor-dashboard-user-name {
color: var(--backlot-text);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-semibold);
}
/* Avatar circle con border gold soft */
.tutor-user-avatar,
.tutor-dashboard-header-avatar img,
.tutor-avatar img {
border: 2px solid var(--backlot-gold-soft);
background: var(--backlot-surface-2);
}
/* Stat boxes (Corsi Iscritti, Corsi attivi, ecc.) */
.tutor-dashboard-info-card,
.tutor-dashboard-header-stats > * {
background: var(--backlot-surface-1);
border: 1px solid var(--backlot-border-gold);
border-radius: var(--backlot-radius-card);
color: var(--backlot-text);
padding: var(--backlot-space-5);
transition: border-color var(--backlot-transition-base),
box-shadow var(--backlot-transition-base);
}
.tutor-dashboard-info-card:hover {
border-color: var(--backlot-gold);
box-shadow: var(--backlot-shadow-card);
}
/* Numbers grandi nelle stat (es. "12 Corsi Iscritti") */
.tutor-dashboard-info-card-value,
.tutor-dashboard-info-card .tutor-fs-3,
.tutor-dashboard-info-card .tutor-fs-4,
.tutor-dashboard-info-card h3,
.tutor-dashboard-info-card h4 {
color: var(--backlot-gold);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-bold);
}
/* Labels nelle stat ("Corsi Iscritti") */
.tutor-dashboard-info-card-label,
.tutor-dashboard-info-card .tutor-fs-7,
.tutor-dashboard-info-card-text {
color: var(--backlot-text-muted);
text-transform: uppercase;
letter-spacing: var(--backlot-ls-eyebrow);
font-size: var(--backlot-fs-eyebrow);
}
/* Stelle rating */
.tutor-ratings-stars,
.tutor-rating-stars {
color: var(--backlot-gold);
}
/* Bottone "Nuovo corso" / Frontend Course Builder trigger */
.tutor-dashboard-add-new-course,
.tutor-create-new-course {
/* eredita .tutor-btn-primary se ha quella classe; refresh per safety */
background: var(--backlot-gradient-gold);
color: var(--backlot-text-on-gold);
}
/* ============================================================
10. QUIZ UI
============================================================ */
.tutor-quiz-wrapper,
.tutor-quiz-attempt,
.tutor-quiz-attempt-body {
background: var(--backlot-surface-1);
color: var(--backlot-text);
border-radius: var(--backlot-radius-card);
border: 1px solid var(--backlot-border);
padding: var(--backlot-space-6);
}
/* Question card */
.tutor-quiz-question,
.tutor-quiz-question-wrap {
background: transparent;
color: var(--backlot-text);
padding: var(--backlot-space-5) 0;
}
.tutor-quiz-question-title,
.tutor-quiz-question-text {
color: var(--backlot-text);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-medium);
font-size: var(--backlot-fs-display-md);
}
/* Question counter (Domanda X di Y) */
.tutor-quiz-question-counter,
.tutor-quiz-question-no {
color: var(--backlot-gold);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--backlot-ls-eyebrow);
font-size: var(--backlot-fs-eyebrow);
}
/* Single option */
.tutor-quiz-option,
.tutor-quiz-options > .tutor-quiz-option,
.tutor-quiz-option-wrap {
background: var(--backlot-surface-1);
border: 1px solid var(--backlot-border);
border-radius: var(--backlot-radius-item);
padding: var(--backlot-space-4) var(--backlot-space-5);
margin-bottom: var(--backlot-space-3);
color: var(--backlot-text);
transition: border-color var(--backlot-transition-base),
background-color var(--backlot-transition-base),
transform var(--backlot-transition-fast);
cursor: pointer;
}
.tutor-quiz-option:hover {
border-color: var(--backlot-border-gold);
transform: translateY(-1px);
}
/* Selected option */
.tutor-quiz-option.is-active,
.tutor-quiz-option.is-selected,
.tutor-quiz-option:has(input:checked) {
border-color: var(--backlot-gold);
background: rgba(201, 168, 76, 0.06);
}
/* Correct answer feedback */
.tutor-quiz-option.is-correct,
.tutor-quiz-correct-answer,
.tutor-quiz-correct {
border-color: var(--backlot-success);
background: rgba(34, 197, 94, 0.08);
color: var(--backlot-text);
}
/* Wrong answer feedback */
.tutor-quiz-option.is-wrong,
.tutor-quiz-wrong-answer,
.tutor-quiz-wrong {
border-color: var(--backlot-error);
background: rgba(220, 38, 38, 0.08);
color: var(--backlot-text);
}
/* Quiz feedback message block */
.tutor-quiz-feedback {
margin-top: var(--backlot-space-4);
padding: var(--backlot-space-4);
border-left: 3px solid var(--backlot-gold);
background: var(--backlot-surface-2);
border-radius: 0 var(--backlot-radius-md) var(--backlot-radius-md) 0;
font-family: var(--backlot-font-serif);
font-style: italic;
color: var(--backlot-text);
}
/* Quiz pagination (numeri delle domande) */
.tutor-quiz-questions-pagination ul li a {
background: var(--backlot-surface-2);
color: var(--backlot-text);
border: 1px solid var(--backlot-border);
border-radius: var(--backlot-radius-sm);
transition: all var(--backlot-transition-fast);
}
.tutor-quiz-questions-pagination ul li a:hover,
.tutor-quiz-questions-pagination ul li.active a,
.tutor-quiz-questions-pagination ul li.is-current a {
background: var(--backlot-gradient-gold);
color: var(--backlot-text-on-gold);
border-color: var(--backlot-gold);
}
/* Quiz result page */
.tutor-quiz-result {
background: var(--backlot-surface-1);
border: 1px solid var(--backlot-border-gold);
border-radius: var(--backlot-radius-card);
padding: var(--backlot-space-8);
text-align: center;
}
.tutor-quiz-result-points,
.tutor-quiz-result-grade {
color: var(--backlot-gold);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-bold);
font-size: var(--backlot-fs-display-xl);
}
.tutor-quiz-result-status.is-passed {
color: var(--backlot-success);
}
.tutor-quiz-result-status.is-failed {
color: var(--backlot-error);
}
/* ============================================================
11. FORM FIELDS / TOGGLE
============================================================ */
.tutor-form-control,
.tutor-form-select,
input.tutor-form-control,
select.tutor-form-select,
textarea.tutor-form-control {
background: var(--backlot-surface-1);
color: var(--backlot-text);
border: 1px solid var(--backlot-border);
border-radius: var(--backlot-radius-md);
padding: var(--backlot-space-3) var(--backlot-space-4);
}
.tutor-form-control:focus,
.tutor-form-select:focus,
input.tutor-form-control:focus,
select.tutor-form-select:focus,
textarea.tutor-form-control:focus {
outline: none;
border-color: var(--backlot-gold);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2);
}
.tutor-form-label {
color: var(--backlot-text);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-medium);
}
/* Quiz builder input — override hardcoded #fff/#393c40 */
.tutor-quiz-builder-group input,
.tutor-quiz-builder-group textarea {
background: var(--backlot-surface-1);
color: var(--backlot-text);
border-color: var(--backlot-border);
}
/* Toggle switch — override hardcoded #C0C3CB */
.tutor-form-toggle-label.tutor-form-toggle-unchecked {
color: var(--backlot-text-muted);
}
.tutor-form-toggle-label.tutor-form-toggle-checked {
color: var(--backlot-gold);
}
.tutor-form-toggle-control {
background: var(--backlot-surface-2);
border: 1px solid var(--backlot-border-gold);
}
.tutor-form-toggle input:checked ~ .tutor-form-toggle-control {
background: var(--backlot-gradient-gold);
border-color: var(--backlot-gold);
}
/* Checkbox / radio (Tutor li disegna spesso custom) */
.tutor-form-check-input:checked {
background: var(--backlot-gold);
border-color: var(--backlot-gold);
}
/* Phone input — override hardcoded #555/#999/#ccc */
.tutor-form-phone .iti__selected-flag,
.tutor-form-phone .iti__country-list {
background: var(--backlot-surface-2);
color: var(--backlot-text);
border-color: var(--backlot-border);
}
/* ============================================================
12. ALERTS
Mappiamo .tutor-alert-* sui nostri colori semantici.
============================================================ */
.tutor-alert {
background: rgba(201, 168, 76, 0.08);
border-left: 3px solid var(--backlot-gold);
border-radius: 0 var(--backlot-radius-md) var(--backlot-radius-md) 0;
color: var(--backlot-text);
padding: var(--backlot-space-4);
}
.tutor-alert-success,
.tutor-alert.tutor-success {
background: rgba(34, 197, 94, 0.08);
border-left-color: var(--backlot-success);
}
.tutor-alert-warning,
.tutor-alert.tutor-warning {
background: rgba(245, 158, 11, 0.08);
border-left-color: var(--backlot-warning);
}
.tutor-alert-danger,
.tutor-alert.tutor-danger {
background: rgba(220, 38, 38, 0.08);
border-left-color: var(--backlot-error);
}
.tutor-alert-info,
.tutor-alert.tutor-info,
.tutor-alert.tutor-primary {
background: rgba(201, 168, 76, 0.08);
border-left-color: var(--backlot-gold);
}
/* Snackbar / toast */
.tutor-snackbar-wrapper,
.tutor-snackbar {
background: var(--backlot-surface-2);
color: var(--backlot-text);
border: 1px solid var(--backlot-border-gold);
border-radius: var(--backlot-radius-card-soft);
box-shadow: var(--backlot-shadow-card);
}
/* ============================================================
13. MODALI
============================================================ */
.tutor-modal-overlay {
background: var(--backlot-overlay);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.tutor-modal,
.tutor-modal-window {
background: var(--backlot-surface-1);
color: var(--backlot-text);
border: 1px solid var(--backlot-border-gold);
border-radius: var(--backlot-radius-card);
box-shadow: var(--backlot-shadow-modal);
}
.tutor-modal-header,
.tutor-modal-footer {
background: transparent;
border-color: var(--backlot-border);
color: var(--backlot-text);
}
.tutor-modal-body {
background: transparent;
color: var(--backlot-text);
}
.tutor-modal-close {
color: var(--backlot-text-secondary);
background: transparent;
border: none;
transition: color var(--backlot-transition-fast);
}
.tutor-modal-close:hover {
color: var(--backlot-gold);
}
/* ============================================================
14. ICONS — webfont coloring
Le icone TutorLMS sono webfont (font-family: 'tutor'). Si
colorano via `color:`. Non serve filter.
============================================================ */
[class^="tutor-icon-"],
[class*=" tutor-icon-"] {
color: inherit; /* eredita dal parent (link, btn, item) */
vertical-align: middle;
}
/* Override esplicito per icone in contesti specifici */
.tutor-course-spotlight-item [class*="tutor-icon-"],
.tutor-course-topic-item [class*="tutor-icon-"] {
color: var(--backlot-gold-soft);
font-size: 1.1em;
}
.tutor-course-topic-item.is-completed [class*="tutor-icon-circle-mark"],
.tutor-course-topic-item.is-completed [class*="tutor-icon-mark"] {
color: var(--backlot-success);
}
.tutor-course-topic-item.is-locked [class*="tutor-icon-lock"] {
color: var(--backlot-locked);
}
/* Dashboard menu icons */
.tutor-dashboard-menu-item-link [class*="tutor-icon-"] {
color: inherit;
margin-right: var(--backlot-space-2);
}
/* ============================================================
15. NAVIGAZIONE LEZIONE (precedente / successivo footer)
============================================================ */
.tutor-course-spotlight-footer,
.tutor-lesson-navigation,
.tutor-lesson-prev-next-wrap {
background: var(--backlot-surface-1);
border-top: 1px solid var(--backlot-border);
padding: var(--backlot-space-5) var(--backlot-space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--backlot-space-4);
}
.tutor-lesson-prev-btn,
.tutor-lesson-next-btn,
.tutor-spotlight-prev,
.tutor-spotlight-next {
/* applica stile .tutor-btn-outline-primary già definito sopra */
color: var(--backlot-gold);
background: transparent;
border: 1px solid var(--backlot-gold);
}
.tutor-lesson-prev-btn:hover,
.tutor-lesson-next-btn:hover {
color: var(--backlot-gold-soft);
background: rgba(201, 168, 76, 0.08);
border-color: var(--backlot-gold-soft);
}
/* "Marca come completato" speciale (CTA gold gradient) */
.tutor-mark-as-complete,
.tutor-course-mark-complete-btn {
background: var(--backlot-gradient-gold);
color: var(--backlot-text-on-gold);
border-color: transparent;
font-weight: var(--backlot-fw-semibold);
}
/* ============================================================
============================================================
POLISH MAX (Brief B3-POLISH-MAX) — refinement chirurgico
delle aree più visitate dall'utente: sidebar corso, quiz options,
banner top, metadata editoriale.
Pattern derivati da docs/shopify-decorations.md.
============================================================
============================================================ */
/* ============================================================
16. SIDEBAR CORSO — REDESIGN (no più "quadrati bruschi")
Strategia: sostituisco solid background con gradient subtle
horizontal + border-left gold per stati attivi. Rimuovo i
blocchi netti che l'utente ha criticato.
============================================================ */
/* Wrapper sidebar: gradient verticale subtle + bordo destro tinted */
.tutor-course-single-sidebar-wrapper,
.tutor-course-spotlight-sidebar {
background:
linear-gradient(180deg, var(--backlot-bg) 0%, var(--backlot-surface-1) 100%);
border-right: 1px solid rgba(201, 168, 76, 0.15);
box-shadow: inset -1px 0 0 rgba(201, 168, 76, 0.05);
}
/* Header "Contenuto del corso" — eyebrow editoriale */
.tutor-course-single-sidebar-wrapper > h2,
.tutor-course-single-sidebar-wrapper > h3,
.tutor-course-spotlight-sidebar-header,
.tutor-course-topic-list-title {
font-family: var(--backlot-font-mono);
font-size: var(--backlot-fs-eyebrow);
font-weight: var(--backlot-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--backlot-ls-eyebrow-wide);
color: var(--backlot-gold-soft);
padding: var(--backlot-space-5) var(--backlot-space-5) var(--backlot-space-3);
margin: 0;
border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
/* === LAND ACCORDION (Topic header) === */
/* Reset dell'override B3: rimuoviamo background solid + border-left netto.
Sostituiamo con gradient gold subtle e transition smooth. */
.tutor-accordion-item-header,
.tutor-course-topic-header,
.tutor-course-topic > .tutor-accordion-item-header {
background: transparent;
color: var(--backlot-text-secondary);
border-bottom: 1px solid rgba(201, 168, 76, 0.08);
border-left: 2px solid transparent; /* placeholder, gold quando attivo */
padding: var(--backlot-space-4) var(--backlot-space-5);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-medium);
font-size: var(--backlot-fs-body);
transition: var(--backlot-transition-smooth);
cursor: pointer;
}
/* Hover Land — gradient sottile gold */
.tutor-accordion-item-header:hover,
.tutor-course-topic-header:hover,
.tutor-course-topic > .tutor-accordion-item-header:hover {
background: linear-gradient(
90deg,
rgba(201, 168, 76, 0.05) 0%,
transparent 100%
);
color: var(--backlot-text);
border-left-color: rgba(201, 168, 76, 0.25);
}
/* Land aperta (espansa) */
.tutor-accordion-item-header[aria-expanded="true"],
.tutor-course-topic.is-active > .tutor-accordion-item-header,
.tutor-course-topic[aria-expanded="true"] > .tutor-accordion-item-header {
background: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
transparent 70%
);
color: var(--backlot-gold);
border-left-color: var(--backlot-gold);
padding-left: calc(var(--backlot-space-5) + 4px); /* small inset shift */
}
/* === CONTATORE "1/5" "0/5" — mini ticket pill === */
.tutor-course-topic-progress,
.tutor-course-topic-item-count,
.tutor-accordion-item-header [class*="topic-meta"],
.tutor-accordion-item-header [class*="topic-count"] {
display: inline-flex;
align-items: center;
padding: 2px var(--backlot-space-2);
margin-left: var(--backlot-space-2);
font-family: var(--backlot-font-mono);
font-size: 10px;
font-weight: var(--backlot-fw-semibold);
color: var(--backlot-gold-soft);
background: var(--backlot-surface-2);
border: 1px solid rgba(201, 168, 76, 0.18);
border-radius: var(--backlot-radius-pill);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.4;
}
/* Chevron accordion: rotation smooth quando aperto */
.tutor-accordion-item-header [class*="tutor-icon-angle"],
.tutor-accordion-item-header [class*="tutor-icon-chevron"] {
color: var(--backlot-gold-soft);
transition: transform var(--backlot-transition-smooth),
color var(--backlot-transition-fast);
}
.tutor-accordion-item-header[aria-expanded="true"] [class*="tutor-icon-angle"],
.tutor-accordion-item-header[aria-expanded="true"] [class*="tutor-icon-chevron"] {
transform: rotate(180deg);
color: var(--backlot-gold);
}
/* === LESSON ITEMS (singole lezioni dentro Land) === */
.tutor-course-topic-item,
.tutor-course-spotlight-item,
.tutor-course-lesson-item {
background: transparent;
color: var(--backlot-text-secondary);
border-bottom: 1px solid rgba(201, 168, 76, 0.05);
border-left: 2px solid transparent;
padding: var(--backlot-space-3) var(--backlot-space-5);
font-size: var(--backlot-fs-body-sm);
transition: var(--backlot-transition-smooth);
display: flex;
align-items: center;
gap: var(--backlot-space-3);
}
.tutor-course-topic-item:hover,
.tutor-course-spotlight-item:hover,
.tutor-course-lesson-item:hover {
background: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
transparent 100%
);
color: var(--backlot-text);
border-left-color: rgba(201, 168, 76, 0.3);
}
/* Lezione corrente (current) */
.tutor-course-topic-item.is-active,
.tutor-course-spotlight-item.is-active,
.tutor-course-spotlight-item--active,
.tutor-course-topic-item-active {
background: linear-gradient(
90deg,
rgba(201, 168, 76, 0.10) 0%,
transparent 80%
);
color: var(--backlot-text);
border-left-color: var(--backlot-gold);
}
/* Micro-ornamento ◆ a sinistra del titolo lezione attiva */
.tutor-course-topic-item.is-active::before,
.tutor-course-spotlight-item.is-active::before,
.tutor-course-spotlight-item--active::before {
content: "◆";
color: var(--backlot-gold);
font-size: 0.7em;
margin-right: var(--backlot-space-1);
filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.6));
}
/* Completed: icon check oro + text muted ma readable */
.tutor-course-topic-item.is-completed,
.tutor-course-spotlight-item.is-completed,
.tutor-course-lesson-item.is-completed {
color: var(--backlot-text-secondary);
opacity: 0.85;
}
.tutor-course-topic-item.is-completed [class*="tutor-icon-circle-mark"],
.tutor-course-topic-item.is-completed [class*="tutor-icon-mark"],
.tutor-course-spotlight-item.is-completed [class*="tutor-icon-circle-mark"] {
color: var(--backlot-gold);
filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.4));
}
/* Locked: dimmed + cursor */
.tutor-course-topic-item.is-locked,
.tutor-course-spotlight-item.is-locked {
color: var(--backlot-text-dim);
cursor: not-allowed;
opacity: 0.7;
}
.tutor-course-topic-item.is-locked [class*="tutor-icon-lock"] {
color: var(--backlot-locked);
}
/* Body accordion topic — sfondo trasparente per ereditare gradient sidebar */
.tutor-accordion-item-body,
.tutor-course-topic-body,
.tutor-course-topic-list {
background: transparent;
border: none;
}
/* ============================================================
17. QUIZ OPTIONS — DECORAZIONE PREMIUM
Card risposte quiz con multi-layer shadow signature + corner
brackets oro. Stato selected = pieno gold + glow.
============================================================ */
.tutor-quiz-option,
.tutor-quiz-options > .tutor-quiz-option,
.tutor-quiz-option-wrap,
.tutor-quiz-question .tutor-form-check {
position: relative;
background: var(--backlot-surface-1);
border: none; /* shadow stack disegna bordi */
border-radius: var(--backlot-radius-item);
padding: var(--backlot-space-5) var(--backlot-space-6);
margin-bottom: var(--backlot-space-3);
color: var(--backlot-text);
cursor: pointer;
box-shadow:
0 0 0 1px rgba(201, 168, 76, 0.12),
0 0 0 4px rgba(11, 9, 8, 0.6),
0 0 0 5px rgba(201, 168, 76, 0.06),
0 4px 16px rgba(245, 198, 107, 0.04);
transition:
box-shadow var(--backlot-transition-decorative),
transform var(--backlot-transition-smooth);
}
/* Corner brackets via pseudo + ::after (top-left, top-right) e
span generati a runtime non disponibili → useremo solo top corners
visibili tramite ::before/::after; bottom corners disabilitati per
non richiedere modifica markup HTML del plugin. */
.tutor-quiz-option::before,
.tutor-quiz-option::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
pointer-events: none;
opacity: 0.5;
transition: opacity var(--backlot-transition-smooth),
border-color var(--backlot-transition-smooth);
}
.tutor-quiz-option::before {
top: 8px; left: 8px;
border-top: 1.5px solid rgba(245, 198, 107, 0.5);
border-left: 1.5px solid rgba(245, 198, 107, 0.5);
}
.tutor-quiz-option::after {
top: 8px; right: 8px;
border-top: 1.5px solid rgba(245, 198, 107, 0.5);
border-right: 1.5px solid rgba(245, 198, 107, 0.5);
}
/* Hover */
.tutor-quiz-option:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(201, 168, 76, 0.22),
0 0 0 4px rgba(11, 9, 8, 0.7),
0 0 0 5px rgba(201, 168, 76, 0.14),
0 8px 24px rgba(245, 198, 107, 0.10);
}
.tutor-quiz-option:hover::before,
.tutor-quiz-option:hover::after {
opacity: 1;
border-color: var(--backlot-gold-soft);
}
/* Selected (radio checked) */
.tutor-quiz-option.is-active,
.tutor-quiz-option.is-selected,
.tutor-quiz-option:has(input:checked) {
background: linear-gradient(
135deg,
rgba(201, 168, 76, 0.08) 0%,
var(--backlot-surface-1) 60%
);
box-shadow:
0 0 0 1px var(--backlot-gold),
0 0 0 4px rgba(11, 9, 8, 0.85),
0 0 0 5px rgba(201, 168, 76, 0.32),
0 12px 32px rgba(201, 168, 76, 0.18);
}
.tutor-quiz-option.is-active::before,
.tutor-quiz-option.is-active::after,
.tutor-quiz-option:has(input:checked)::before,
.tutor-quiz-option:has(input:checked)::after {
opacity: 1;
border-color: var(--backlot-gold);
}
/* Correct/wrong feedback (override l'override B3 con polish) */
.tutor-quiz-option.is-correct,
.tutor-quiz-correct {
box-shadow:
0 0 0 1px var(--backlot-success),
0 0 0 4px rgba(11, 9, 8, 0.85),
0 0 0 5px rgba(34, 197, 94, 0.32),
0 12px 32px rgba(34, 197, 94, 0.18);
}
.tutor-quiz-option.is-wrong,
.tutor-quiz-wrong {
box-shadow:
0 0 0 1px var(--backlot-error),
0 0 0 4px rgba(11, 9, 8, 0.85),
0 0 0 5px rgba(220, 38, 38, 0.32),
0 12px 32px rgba(220, 38, 38, 0.18);
}
/* ============================================================
18. BANNER LEZIONE TOP — REFINEMENT
Pattern: dark surface-2 + border-bottom sfumato gold + brand
gold pieno + CTA gradient gold pieno. Strategia Opzione B del brief.
============================================================ */
.tutor-course-spotlight-header,
.tutor-lesson-top-bar,
.tutor-spotlight-header {
background: var(--backlot-surface-2);
color: var(--backlot-text);
border-bottom: 1px solid transparent;
/* Bordo bottom con gradient gold-transparent (replica pattern Shopify) */
background-image:
linear-gradient(var(--backlot-surface-2), var(--backlot-surface-2)),
linear-gradient(90deg,
transparent 0%,
rgba(201, 168, 76, 0.4) 50%,
transparent 100%);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-repeat: no-repeat;
background-size: 100% 100%, 100% 1px;
background-position: top left, bottom left;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* Course title (es. "Backlot") — gold pieno + Geist semibold */
.tutor-course-spotlight-header .tutor-course-title,
.tutor-spotlight-header .tutor-course-name,
.tutor-spotlight-back-to-course-title,
.tutor-course-spotlight-header [class*="course-title"] {
color: var(--backlot-gold);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-semibold);
font-size: var(--backlot-fs-body);
letter-spacing: 0.04em;
text-shadow: 0 0 12px rgba(201, 168, 76, 0.25);
}
/* "Indietro" arrow — chevron custom oro */
.tutor-spotlight-back-to-course::before,
.tutor-spotlight-back::before {
content: "‹"; /* unicode chevron-left, leggero ed elegante */
display: inline-block;
margin-right: var(--backlot-space-2);
color: var(--backlot-gold);
font-size: 1.2em;
font-weight: var(--backlot-fw-bold);
vertical-align: -2%;
}
/* Bottone "Segna come completato" nel banner: gradient gold pieno + glow */
.tutor-topbar-complete-btn,
.tutor-course-topic-item-complete-btn,
.tutor-mark-as-complete,
.tutor-course-spotlight-header .tutor-btn-primary {
background: var(--backlot-gradient-gold-refined);
color: var(--backlot-text-on-gold);
border-color: transparent;
font-weight: var(--backlot-fw-semibold);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
box-shadow:
var(--backlot-shadow-drop-gold-subtle),
var(--backlot-shadow-inset-gold);
}
.tutor-topbar-complete-btn:hover,
.tutor-mark-as-complete:hover {
box-shadow:
var(--backlot-shadow-drop-gold-strong),
var(--backlot-shadow-inset-gold-strong);
transform: translateY(-1px);
}
/* X close — hover gold con micro-glow */
.tutor-spotlight-close,
.tutor-spotlight-exit-btn {
color: var(--backlot-text-secondary);
background: transparent;
border: none;
transition: color var(--backlot-transition-fast),
filter var(--backlot-transition-fast);
}
.tutor-spotlight-close:hover,
.tutor-spotlight-exit-btn:hover {
color: var(--backlot-gold);
filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.5));
}
/* ============================================================
19. METADATA EDITORIALE
Trasforma "Domanda n.: 1/5 | Tentativi permessi: 1" in
formato .bkl-meta inline editorial (mono uppercase + dot separator).
============================================================ */
.tutor-quiz-attempt-info,
.tutor-quiz-question-counter,
.tutor-quiz-question-no,
.tutor-course-progress-percent,
.tutor-progress-stat,
.tutor-lesson-attempt-info,
.tutor-progress-value,
.tutor-quiz-attempts-allowed {
font-family: var(--backlot-font-mono);
font-weight: var(--backlot-fw-semibold);
font-size: var(--backlot-fs-eyebrow);
text-transform: uppercase;
letter-spacing: var(--backlot-ls-eyebrow-wide);
color: var(--backlot-gold-soft);
display: inline-flex;
align-items: center;
gap: var(--backlot-space-2);
}
/* Inserisce un dot oro tra label e value se i due sono in span separati */
.tutor-quiz-question-counter strong,
.tutor-quiz-attempt-info strong {
color: var(--backlot-text);
letter-spacing: 0.08em;
font-weight: var(--backlot-fw-semibold);
}
/* "5% Completo" testo del progress: numero gold grande, "Completo" muted */
.tutor-course-progress-percent,
.tutor-progress-percent {
font-family: var(--backlot-font-display);
font-size: var(--backlot-fs-body);
font-weight: var(--backlot-fw-semibold);
color: var(--backlot-gold);
text-transform: none;
letter-spacing: 0;
}
/* ============================================================
20. STAT CARDS DASHBOARD — POLISH (signature shadow)
Allinea le card della dashboard al pattern multi-layer.
============================================================ */
.tutor-dashboard-info-card,
.tutor-dashboard-header-stats > * {
background: var(--backlot-surface-1);
border: none;
box-shadow: var(--backlot-shadow-premium-stack);
border-radius: var(--backlot-radius-card);
transition: box-shadow var(--backlot-transition-decorative),
transform var(--backlot-transition-smooth);
}
.tutor-dashboard-info-card:hover {
box-shadow: var(--backlot-shadow-premium-stack-hover);
transform: translateY(-2px);
}
/* Numbers grandi: gradient text gold + glow */
.tutor-dashboard-info-card-value,
.tutor-dashboard-info-card .tutor-fs-3,
.tutor-dashboard-info-card .tutor-fs-4,
.tutor-dashboard-info-card h3,
.tutor-dashboard-info-card h4 {
background: var(--backlot-gradient-gold-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 30px rgba(245, 198, 107, 0.25);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-bold);
}
/* ============================================================
21. FIX SIDEBAR ESPANSA + BANNER BUTTON (Brief B3-FIX-SIDEBAR-BANNER)
ROOT CAUSES TROVATE in tutor.min.css:
- .tutor-accordion-item { background-color: #fff } ← container Land
- .tutor-course-topic-item a { background-color: #fff } ← OGNI lezione
- .tutor-course-topic-item.is-active a { bg: #eff1f6 } ← lezione attiva
- .tutor-topbar-mark-btn { border-color: white } ← bordo cream visibile
B3 polish copriva header/body ma non questi.
============================================================ */
/* === SIDEBAR FIX === */
/* Container esterno della Land (accordion item) — bg #fff hardcoded */
.tutor-accordion-item,
[class*="tutor-accordion-item"]:not([class*="header"]):not([class*="body"]) {
background-color: var(--backlot-surface-1);
border-color: rgba(201, 168, 76, 0.10);
border-radius: 0;
}
/* Header Land — refresh per coprire .is-active state che B3 aveva ma debole */
.tutor-accordion-item-header.is-active {
color: var(--backlot-gold);
background: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
transparent 70%
);
border-radius: 0;
}
/* Body Land aperta — esplicito surface-1 (no più transparent che ereditava bianco) */
.tutor-accordion-item-body {
background-color: var(--backlot-surface-1);
padding-top: 0;
padding-bottom: 0;
}
/* Lesson links DENTRO la Land — RIMUOVI bg #fff hardcoded sull' */
.tutor-course-topic-item a,
.tutor-course-topic-item > a {
background-color: transparent;
color: var(--backlot-text);
padding: var(--backlot-space-3) var(--backlot-space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--backlot-space-3);
text-decoration: none;
border-bottom: 1px solid rgba(201, 168, 76, 0.05);
transition: background-color var(--backlot-transition-fast),
color var(--backlot-transition-fast),
padding-left var(--backlot-transition-fast);
}
.tutor-course-topic-item a:hover {
background: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
transparent 100%
);
color: var(--backlot-text);
padding-left: calc(var(--backlot-space-5) + 4px);
}
/* Lezione attiva — override del #eff1f6 hardcoded sul link */
.tutor-course-topic-item.is-active a,
.tutor-course-topic-item a.is-active,
.tutor-course-topic-item.tutor-is-active a {
background: linear-gradient(
90deg,
rgba(201, 168, 76, 0.12) 0%,
transparent 80%
);
color: var(--backlot-text);
border-left: 2px solid var(--backlot-gold);
padding-left: calc(var(--backlot-space-5) - 2px);
}
/* Icone dentro lesson item — colore gold-soft */
.tutor-course-topic-item a [class*="tutor-icon-"] {
color: var(--backlot-gold-soft);
font-size: 1.05em;
}
.tutor-course-topic-item.is-active a [class*="tutor-icon-"],
.tutor-course-topic-item a:hover [class*="tutor-icon-"] {
color: var(--backlot-gold);
}
/* === BANNER BUTTON FIX === */
/* Banner header (es. spotlight header con bg gold-primary) */
.tutor-course-topic-single-header {
background: var(--backlot-surface-2);
border-bottom: 1px solid rgba(201, 168, 76, 0.25);
color: var(--backlot-text);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* Mark complete button — VERO selettore TutorLMS = .tutor-topbar-mark-btn
Originale ha border-color: white che produce la "linea cream visibile"
sul background. Forziamo il nostro stile coerente. */
.tutor-course-topic-single-header .tutor-topbar-mark-btn,
.tutor-topbar-mark-btn,
.tutor-topbar-complete-btn {
background: var(--backlot-gradient-gold-refined);
color: var(--backlot-text-on-gold);
border: 1px solid transparent; /* RESET del border cream Tutor */
border-radius: var(--backlot-radius-pill);
font-weight: var(--backlot-fw-semibold);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
box-shadow:
var(--backlot-shadow-drop-gold-subtle),
var(--backlot-shadow-inset-gold);
transition: var(--backlot-transition-smooth);
outline: none;
}
.tutor-course-topic-single-header .tutor-topbar-mark-btn:hover,
.tutor-topbar-mark-btn:hover {
background: var(--backlot-gradient-gold-text); /* gradient più chiaro */
color: var(--backlot-text-on-gold);
border-color: transparent;
box-shadow:
var(--backlot-shadow-drop-gold-strong),
var(--backlot-shadow-inset-gold-strong);
transform: translateY(-1px);
}
.tutor-course-topic-single-header .tutor-topbar-mark-btn:focus-visible,
.tutor-topbar-mark-btn:focus-visible {
outline: 2px solid var(--backlot-gold-soft);
outline-offset: 3px;
}
/* Iconic buttons (X close, home back) nel banner — ricoloriamo coerenti */
.tutor-course-topic-single-header .tutor-iconic-btn {
color: var(--backlot-text-secondary);
background-color: transparent;
border: 1px solid transparent;
transition: var(--backlot-transition-fast);
}
.tutor-course-topic-single-header .tutor-iconic-btn:hover,
.tutor-course-topic-single-header .tutor-iconic-btn:focus {
color: var(--backlot-gold);
background-color: rgba(201, 168, 76, 0.08);
border-color: rgba(201, 168, 76, 0.20);
}
/* iconic-btn-secondary (può essere il container della X) — rimuovi bg dark
che su surface-2 dark sembra "buco" */
.tutor-course-topic-single-header .tutor-iconic-btn-secondary {
background-color: transparent;
}
/* Footer banner (eventuale) */
.tutor-course-topic-single-footer {
background-color: var(--backlot-surface-2);
border-top: 1px solid rgba(201, 168, 76, 0.15);
}
/* ============================================================
22. FIX SIDEBAR SPOTLIGHT v2 (Brief B3-FIX visual feedback iteration 2)
ROOT CAUSE: TutorLMS scopa col wrapper `.tutor-course-single-sidebar-wrapper`
raggiungendo specificity 0,2,0 — battendo le mie regole 0,1,0.
FIX: matchare la stessa specificity scopando dal wrapper.
============================================================ */
/* Wrapper sidebar (era bg #eff1f6) */
.tutor-course-single-sidebar-wrapper {
background-color: var(--backlot-surface-1);
background-image: linear-gradient(180deg, var(--backlot-bg) 0%, var(--backlot-surface-1) 100%);
border-right: 1px solid rgba(201, 168, 76, 0.15);
}
/* Header "Contenuto del corso" (era bg #fff con border #e0e2ea) */
.tutor-course-single-sidebar-title {
background-color: var(--backlot-bg);
border-bottom: 1px solid rgba(201, 168, 76, 0.18);
color: var(--backlot-gold-soft);
font-family: var(--backlot-font-mono);
font-size: var(--backlot-fs-eyebrow);
font-weight: var(--backlot-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--backlot-ls-eyebrow-wide);
padding: var(--backlot-space-5) var(--backlot-space-5);
height: auto;
min-height: 60px;
}
/* Land header (Tutor: scoped wrapper → .accordion-item-header bg #eff1f6) */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
background-color: transparent;
background-image: none;
color: var(--backlot-text-secondary);
border-bottom: 1px solid rgba(201, 168, 76, 0.10);
border-left: 2px solid transparent;
padding: var(--backlot-space-4) var(--backlot-space-5);
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-medium);
font-size: var(--backlot-fs-body);
transition: var(--backlot-transition-smooth);
}
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header:hover {
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
transparent 100%
);
color: var(--backlot-gold);
border-left-color: rgba(201, 168, 76, 0.3);
}
/* Land aperta — gradient subtle + border-left gold + color gold */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active,
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active::after {
background-color: transparent;
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.10) 0%,
transparent 70%
);
color: var(--backlot-gold);
border-left-color: var(--backlot-gold);
}
/* Land body (Tutor: scoped → bg #fff) */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body {
background-color: var(--backlot-surface-1);
border-top: none;
padding-top: 0;
padding-bottom: var(--backlot-space-2);
}
/* Lesson list container — rimuovi negative margin che squarcia il bordo */
.tutor-course-single-sidebar-wrapper .tutor-course-content-list {
margin: 0;
padding: 0;
background-color: transparent;
}
/* Singolo lesson item (era bg #fff hardcoded + hover #eff1f6) */
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item {
background-color: transparent;
border-left: 2px solid transparent;
border-bottom: 1px solid rgba(201, 168, 76, 0.05);
padding: var(--backlot-space-3) var(--backlot-space-5);
transition: var(--backlot-transition-smooth);
}
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item:hover {
background-color: transparent;
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
transparent 100%
);
border-left-color: rgba(201, 168, 76, 0.3);
}
/* Lezione corrente / attiva */
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item.is-active,
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item--active,
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item.tutor-is-current {
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.14) 0%,
transparent 80%
);
border-left-color: var(--backlot-gold);
}
/* Title lezione (era inherit #757c8e da Tutor body) */
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item-title,
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item-title a {
color: var(--backlot-text);
font-family: var(--backlot-font-sans);
font-weight: var(--backlot-fw-regular);
text-decoration: none;
}
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item:hover .tutor-course-content-list-item-title,
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item:hover .tutor-course-content-list-item-title a {
color: var(--backlot-text);
}
/* Icon lezione (lesson type icon: doc, quiz, video) */
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item-icon {
color: var(--backlot-gold-soft);
}
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item.is-active .tutor-course-content-list-item-icon,
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item:hover .tutor-course-content-list-item-icon {
color: var(--backlot-gold);
}
/* Status circle (right side: empty, completed, current) — usa il colore corrente */
.tutor-course-single-sidebar-wrapper .tutor-form-check-circle {
border-color: rgba(201, 168, 76, 0.3);
background-color: transparent;
}
.tutor-course-single-sidebar-wrapper .tutor-form-check-circle[checked] {
border-color: var(--backlot-success);
background-color: var(--backlot-success);
}
/* Topic header info (es. "2/_") — refresh per match nuova specificity */
.tutor-course-single-sidebar-wrapper .tutor-course-topic-title-info,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-summary {
color: var(--backlot-gold-soft);
font-family: var(--backlot-font-mono);
font-size: 11px;
font-weight: var(--backlot-fw-semibold);
letter-spacing: 0.08em;
}
/* Spotlight wrapper (contenitore esterno della pagina lezione) */
.tutor-course-spotlight-wrapper {
background-color: var(--backlot-bg);
}
/* ============================================================
23. BANNER BUTTON HOVER → DARK INVERSE (user feedback)
Hover dark per contrasto netto col gradient gold della base.
============================================================ */
.tutor-course-topic-single-header .tutor-topbar-mark-btn:hover,
.tutor-topbar-mark-btn:hover {
background: var(--backlot-bg);
background-image: none;
color: var(--backlot-gold);
border: 1px solid var(--backlot-gold);
text-shadow: none;
box-shadow:
0 0 0 3px rgba(11, 9, 8, 0.4),
0 0 18px rgba(201, 168, 76, 0.35);
transform: translateY(-1px);
}
/* Active "pressed" — più scuro */
.tutor-course-topic-single-header .tutor-topbar-mark-btn:active,
.tutor-topbar-mark-btn:active {
background: var(--backlot-bg);
color: var(--backlot-gold-soft);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
transform: translateY(0);
}
/* ============================================================
24. FIX VISUAL ITERATION 3
- Sidebar: rimuovi TUTTI i border-rect intorno a Land/lessons
- Banner: gradient con fade ai bordi (no più gold pieno)
- Banner button: rinforzo hover dark
============================================================ */
/* === SIDEBAR: rimuovi rettangoli === */
/* .tutor-accordion-item nativo Tutor: border 1px + border-radius 6px → KILL */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item,
.tutor-course-single-sidebar-wrapper [class*="tutor-accordion-item"] {
background-color: transparent;
border: none;
border-radius: 0;
margin: 0;
box-shadow: none;
}
/* Lesson item: rimuovi border-bottom subtle aggiunto in 22, e qualsiasi
border laterale o radius residuo che genera l'effetto "card" */
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item {
border: none;
border-left: 2px solid transparent; /* riservato per active state */
border-radius: 0;
margin: 0;
box-shadow: none;
background-color: transparent;
}
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item:last-child {
border-radius: 0;
}
/* Land header: no border-bottom, solo separator molto subtle */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
border-bottom: none;
box-shadow: 0 1px 0 rgba(201, 168, 76, 0.06);
}
/* Topic container interno (.tutor-course-topic) — Tutor:
border:1px solid #dce4e6; border-radius:5px; margin-bottom:20px */
.tutor-course-single-sidebar-wrapper .tutor-course-topic,
.tutor-course-topics-contents .tutor-course-topic {
background-color: transparent;
border: none;
border-radius: 0;
margin: 0;
box-shadow: none;
overflow: visible;
}
/* Header sidebar wrapper: no bordo */
.tutor-course-single-sidebar-title {
border-bottom: 1px solid rgba(201, 168, 76, 0.12);
box-shadow: none;
}
/* === BANNER: fade gradient ai bordi === */
/* Override completo del banner: gold solo nel centro, dark agli edges */
.tutor-course-topic-single-header {
background: linear-gradient(
90deg,
var(--backlot-surface-2) 0%,
var(--backlot-surface-2) 4%,
rgba(201, 168, 76, 0.85) 18%,
rgba(201, 168, 76, 0.95) 50%,
rgba(201, 168, 76, 0.85) 82%,
var(--backlot-surface-2) 96%,
var(--backlot-surface-2) 100%
);
border-bottom: 1px solid transparent;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.35),
inset 0 -1px 0 rgba(201, 168, 76, 0.3);
}
/* X close ora sta sul fade dark a destra → colore gold-soft visibile */
.tutor-course-topic-single-header .tutor-iconic-btn {
color: var(--backlot-gold-soft);
}
.tutor-course-topic-single-header .tutor-iconic-btn:hover {
color: var(--backlot-gold);
background-color: rgba(201, 168, 76, 0.12);
border-color: rgba(201, 168, 76, 0.3);
}
/* "◀ Backlot" è anch'esso sul fade dark a sinistra */
.tutor-course-topic-single-header .tutor-iconic-btn-secondary {
background-color: rgba(201, 168, 76, 0.08);
border: 1px solid rgba(201, 168, 76, 0.2);
}
/* Course title text "Backlot" — rimane gold-soft per stare nel centro gold */
.tutor-course-topic-single-header,
.tutor-course-topic-single-header .tutor-course-title,
.tutor-course-topic-single-header [class*="course-title"] {
color: var(--backlot-bg); /* nero su gold per contrasto migliore */
font-weight: var(--backlot-fw-semibold);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* === BANNER BUTTON HOVER NERO RINFORZATO === */
.tutor-course-topic-single-header .tutor-topbar-mark-btn,
.tutor-topbar-mark-btn {
background: var(--backlot-bg);
background-image: linear-gradient(135deg, #2A2520 0%, var(--backlot-bg) 100%);
color: var(--backlot-gold);
border: 1.5px solid rgba(201, 168, 76, 0.5);
text-shadow: none;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(245, 198, 107, 0.1);
}
.tutor-course-topic-single-header .tutor-topbar-mark-btn:hover,
.tutor-topbar-mark-btn:hover {
background: var(--backlot-bg);
background-image: none;
color: var(--backlot-gold-soft);
border-color: var(--backlot-gold);
text-shadow: none;
box-shadow:
0 0 0 3px rgba(11, 9, 8, 0.6),
0 0 24px rgba(245, 198, 107, 0.5),
inset 0 0 12px rgba(245, 198, 107, 0.15);
transform: translateY(-1px);
}
.tutor-course-topic-single-header .tutor-topbar-mark-btn:active,
.tutor-topbar-mark-btn:active {
background: #050403;
color: var(--backlot-gold);
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.7),
0 0 12px rgba(201, 168, 76, 0.3);
transform: translateY(0);
}
/* Icona "check" dentro il bottone */
.tutor-course-topic-single-header .tutor-topbar-mark-btn [class*="tutor-icon-"] {
color: inherit;
}
/* ============================================================
25. FIX VISUAL ITERATION 4 — ULTIMATIVO
Iterazione 3 non ha rimosso i rettangoli bianchi (selettore interno
non ancora identificato). Vado di wildcard scope con !important
mirato + ricostruzione selettiva degli stati che vogliamo mantenere.
============================================================ */
/* === SIDEBAR: NUCLEAR RESET di TUTTI i background/border === */
/* Step 1: azzera tutto dentro la sidebar wrapper */
.tutor-course-single-sidebar-wrapper *,
.tutor-course-single-sidebar-wrapper *::before,
.tutor-course-single-sidebar-wrapper *::after {
background-color: transparent !important;
background-image: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Step 2: azzera tutti i border tranne form-check-circle (status indicators
a destra che devono restare visibili come cerchio) */
.tutor-course-single-sidebar-wrapper *:not(.tutor-form-check-circle):not([class*="form-check-circle"]):not(.tutor-form-check-input) {
border: none !important;
}
/* Step 3: ricostruisci ciò che vogliamo — wrapper sidebar bg dark + bordo destro gold subtle */
.tutor-course-single-sidebar-wrapper {
background-image: linear-gradient(180deg, var(--backlot-bg) 0%, var(--backlot-surface-1) 100%) !important;
border-right: 1px solid rgba(201, 168, 76, 0.15) !important;
}
/* Step 4: header "Contenuto del corso" */
.tutor-course-single-sidebar-title {
border-bottom: 1px solid rgba(201, 168, 76, 0.12) !important;
background-color: var(--backlot-bg) !important;
}
/* Step 5: Land header — separator subtle invece di bg */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
border-bottom: 1px solid rgba(201, 168, 76, 0.06) !important;
border-left: 2px solid transparent !important;
transition: var(--backlot-transition-smooth);
}
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header:hover {
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
transparent 100%
) !important;
border-left-color: rgba(201, 168, 76, 0.3) !important;
}
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active {
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.10) 0%,
transparent 70%
) !important;
border-left-color: var(--backlot-gold) !important;
}
/* Step 6: lesson item — solo border-left riservato per active */
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item {
border-left: 2px solid transparent !important;
transition: var(--backlot-transition-smooth);
padding: var(--backlot-space-3) var(--backlot-space-5) !important;
}
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item:hover {
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
transparent 100%
) !important;
border-left-color: rgba(201, 168, 76, 0.3) !important;
}
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item.is-active,
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item.tutor-is-current,
.tutor-course-single-sidebar-wrapper .tutor-course-content-list-item--active {
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.14) 0%,
transparent 80%
) !important;
border-left-color: var(--backlot-gold) !important;
}
/* Step 7: ripristina form-check-circle (status indicator destro) — leggibile su dark */
.tutor-course-single-sidebar-wrapper .tutor-form-check-circle {
background-color: transparent !important;
border: 1.5px solid rgba(201, 168, 76, 0.35) !important;
border-radius: 50% !important;
}
.tutor-course-single-sidebar-wrapper .tutor-form-check-circle[checked] {
background-color: var(--backlot-success) !important;
border-color: var(--backlot-success) !important;
}
/* === BANNER BUTTON: GOLD base + hover stile sidebar (no più dark) === */
.tutor-course-topic-single-header .tutor-topbar-mark-btn,
.tutor-topbar-mark-btn {
background: var(--backlot-gradient-gold-refined);
background-image: linear-gradient(135deg, #C9A84C 0%, #B07828 100%);
color: var(--backlot-bg);
border: 1px solid transparent;
border-radius: var(--backlot-radius-pill);
font-weight: var(--backlot-fw-semibold);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
transition: var(--backlot-transition-smooth);
}
/* Hover: contrasto via INVERSIONE dark con border + glow gold.
Gold-on-gold non funziona (banner anch'esso gold). Hover quindi
"scava" il bottone con tono cioccolato scuro + alone gold attorno.
Effetto = pulsante che si "preme" e attiva contemporaneamente. */
.tutor-course-topic-single-header .tutor-topbar-mark-btn:hover,
.tutor-topbar-mark-btn:hover {
background-image: linear-gradient(135deg, #2A2520 0%, var(--backlot-bg) 60%, #050403 100%);
color: var(--backlot-gold-soft);
border-color: var(--backlot-gold);
text-shadow: 0 0 8px rgba(245, 198, 107, 0.6);
box-shadow:
0 0 0 3px rgba(11, 9, 8, 0.5),
0 0 20px rgba(245, 198, 107, 0.55),
0 8px 24px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(245, 198, 107, 0.2);
transform: translateY(-1px);
}
.tutor-course-topic-single-header .tutor-topbar-mark-btn:active,
.tutor-topbar-mark-btn:active {
background-image: linear-gradient(135deg, #050403 0%, #1A1612 100%);
color: var(--backlot-gold);
border-color: var(--backlot-gold);
text-shadow: none;
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.7),
0 0 12px rgba(201, 168, 76, 0.4);
transform: translateY(0);
}
/* Icone interne hover: ereditano colore gold-soft */
.tutor-course-topic-single-header .tutor-topbar-mark-btn:hover [class*="tutor-icon-"] {
color: var(--backlot-gold-soft);
filter: drop-shadow(0 0 4px rgba(245, 198, 107, 0.5));
}
.tutor-course-topic-single-header .tutor-topbar-mark-btn [class*="tutor-icon-"] {
color: inherit;
}
/* ============================================================
26. FIX COURSE LANDING PAGE (single-course-page)
La pagina del corso (prima della lezione) usa selettori DIVERSI
dalla spotlight: .tutor-course-sidebar-card, .tutor-single-course-sidebar,
.tutor-course-thumbnail, ecc.
Wrapper non-sidebar — applichiamo nuclear reset scoped alle aree
problematiche, poi ricostruiamo.
============================================================ */
/* === Right column wrapper === */
.tutor-single-course-sidebar,
.tutor-single-course-sidebar-more {
background-color: transparent !important;
}
/* === Card destra — Avanzamento, Tutti i livelli, Materiale incluso, ecc. === */
.tutor-course-sidebar-card {
background-color: var(--backlot-surface-1) !important;
border: 1px solid rgba(201, 168, 76, 0.15) !important;
border-radius: var(--backlot-radius-card) !important;
box-shadow: var(--backlot-shadow-drop-gold-subtle) !important;
}
/* Card body & header & footer interno */
.tutor-course-sidebar-card *,
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body,
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-header,
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-footer,
.tutor-single-course-sidebar .tutor-course-single-info-card,
.tutor-single-course-sidebar-more > div,
.tutor-single-course-sidebar-more > div:first-child,
.tutor-single-course-sidebar-more > div:last-child {
background-color: transparent !important;
border-color: rgba(201, 168, 76, 0.10) !important;
color: var(--backlot-text);
}
/* Testo dentro card destra leggibile */
.tutor-course-sidebar-card,
.tutor-course-sidebar-card p,
.tutor-course-sidebar-card span,
.tutor-course-sidebar-card div,
.tutor-course-sidebar-card li,
.tutor-single-course-sidebar p,
.tutor-single-course-sidebar span,
.tutor-single-course-sidebar li {
color: var(--backlot-text);
}
/* Headings sidebar (es. "Avanzamento del corso", "Materiale incluso") */
.tutor-course-sidebar-card h3,
.tutor-course-sidebar-card h4,
.tutor-course-sidebar-card h5,
.tutor-course-sidebar-card .tutor-card-title,
.tutor-single-course-sidebar h3,
.tutor-single-course-sidebar h4,
.tutor-single-course-sidebar h5 {
color: var(--backlot-gold-soft) !important;
font-family: var(--backlot-font-display);
font-weight: var(--backlot-fw-semibold);
}
/* Eyebrow tipo "Un corso di" */
.tutor-course-sidebar-card .tutor-fs-7,
.tutor-course-sidebar-card .tutor-fs-8,
.tutor-single-course-sidebar .tutor-fs-7,
.tutor-single-course-sidebar .tutor-fs-8 {
color: var(--backlot-text-muted);
}
/* Link autore (es. "nv0ak") */
.tutor-course-sidebar-card a,
.tutor-single-course-sidebar a {
color: var(--backlot-gold);
}
.tutor-course-sidebar-card a:hover,
.tutor-single-course-sidebar a:hover {
color: var(--backlot-gold-soft);
}
/* === Avatar instructor (cerchio col "N" / iniziale) === */
.tutor-course-sidebar-card .tutor-avatar,
.tutor-single-course-sidebar .tutor-avatar,
.tutor-instructor-avatar {
background-color: var(--backlot-surface-2) !important;
color: var(--backlot-gold) !important;
border: 1.5px solid var(--backlot-gold-soft);
}
/* === Featured image placeholder (rettangolo grigio con montagne) === */
.tutor-course-thumbnail {
background: linear-gradient(135deg, var(--backlot-surface-1) 0%, var(--backlot-surface-2) 100%) !important;
border: 1px solid rgba(201, 168, 76, 0.12);
border-radius: var(--backlot-radius-card);
overflow: hidden;
position: relative;
}
.tutor-course-thumbnail img {
border-radius: 0 !important;
}
/* Quando NON c'è image uploadata, mostra ornamento centrale "BACKLOT" */
.tutor-course-thumbnail:not(:has(img))::before,
.tutor-course-thumbnail:empty::before {
content: "BACKLOT";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--backlot-font-serif);
font-style: italic;
font-size: clamp(28px, 4vw, 48px);
color: rgba(201, 168, 76, 0.25);
letter-spacing: 0.3em;
text-shadow: 0 0 30px rgba(245, 198, 107, 0.2);
}
/* === Tabs bar "Informazioni sul corso | Recensioni" === */
.tutor-course-spotlight-tab,
.tutor-tabs-wrap,
.tutor-tab-list,
.tutor-nav,
.tutor-nav-tabs {
background-color: transparent !important;
border-bottom: 1px solid rgba(201, 168, 76, 0.18) !important;
}
.tutor-nav-link,
.tutor-tab-link,
.tutor-course-spotlight-tab > a,
.tutor-course-spotlight-tab > div {
color: var(--backlot-text-muted) !important;
background-color: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
padding: var(--backlot-space-3) var(--backlot-space-5) !important;
transition: var(--backlot-transition-smooth);
}
.tutor-nav-link:hover,
.tutor-tab-link:hover {
color: var(--backlot-text) !important;
border-bottom-color: rgba(201, 168, 76, 0.4) !important;
}
.tutor-nav-link.is-active,
.tutor-nav-link.active,
.tutor-tab-link.is-active,
.tutor-tab-link.active {
color: var(--backlot-gold) !important;
border-bottom-color: var(--backlot-gold) !important;
}
/* === Course content (accordion bottom) — NUCLEAR reset come per spotlight === */
/* Lo scope qui è il body course detail page; usiamo le classi accordion
senza scope wrapper specifico (non c'è single-sidebar-wrapper). */
.tutor-course-content-wrap .tutor-accordion-item,
.tutor-course-topics-wrap .tutor-accordion-item,
[class*="course-content"] .tutor-accordion-item,
.tutor-accordion-item {
background-color: transparent !important;
border: 1px solid rgba(201, 168, 76, 0.10) !important;
border-radius: var(--backlot-radius-md) !important;
margin-bottom: var(--backlot-space-3);
box-shadow: none !important;
overflow: hidden;
}
/* Land header "Character District" su course landing */
.tutor-course-content-wrap .tutor-accordion-item-header,
.tutor-course-topics-wrap .tutor-accordion-item-header,
[class*="course-content"] .tutor-accordion-item-header {
background-color: var(--backlot-surface-2) !important;
background-image: none !important;
color: var(--backlot-text) !important;
border-bottom: none !important;
padding: var(--backlot-space-4) var(--backlot-space-5) !important;
}
.tutor-course-content-wrap .tutor-accordion-item-header.is-active,
.tutor-course-topics-wrap .tutor-accordion-item-header.is-active,
[class*="course-content"] .tutor-accordion-item-header.is-active {
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.15) 0%,
var(--backlot-surface-2) 100%
) !important;
color: var(--backlot-gold) !important;
}
/* Body Land aperta — surface-1 */
.tutor-course-content-wrap .tutor-accordion-item-body,
.tutor-course-topics-wrap .tutor-accordion-item-body,
[class*="course-content"] .tutor-accordion-item-body {
background-color: var(--backlot-surface-1) !important;
padding: 0 !important;
}
/* Lesson item (era bg #fff hardcoded) — applichiamo anche QUI
non solo dentro single-sidebar-wrapper come prima */
.tutor-course-content-wrap .tutor-course-content-list-item,
.tutor-course-topics-wrap .tutor-course-content-list-item,
[class*="course-content"] .tutor-course-content-list-item,
.tutor-course-content-list > .tutor-course-content-list-item {
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-left: 2px solid transparent !important;
border-bottom: 1px solid rgba(201, 168, 76, 0.06) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: var(--backlot-space-3) var(--backlot-space-5) !important;
transition: var(--backlot-transition-smooth);
}
.tutor-course-content-wrap .tutor-course-content-list-item:hover,
.tutor-course-topics-wrap .tutor-course-content-list-item:hover,
[class*="course-content"] .tutor-course-content-list-item:hover,
.tutor-course-content-list > .tutor-course-content-list-item:hover {
background-image: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
transparent 100%
) !important;
border-left-color: rgba(201, 168, 76, 0.3) !important;
}
.tutor-course-content-list > .tutor-course-content-list-item:last-child {
border-bottom: none !important;
}
/* Lesson title link — gold */
.tutor-course-content-list-item-title,
.tutor-course-content-list-item-title a {
color: var(--backlot-text) !important;
text-decoration: none !important;
}
.tutor-course-content-list-item:hover .tutor-course-content-list-item-title,
.tutor-course-content-list-item:hover .tutor-course-content-list-item-title a {
color: var(--backlot-gold) !important;
}
/* Icon + occhio (preview eye) */
.tutor-course-content-list-item [class*="tutor-icon-"] {
color: var(--backlot-gold-soft) !important;
}
/* === Bottoni "Continua a seguire il corso" + "Completa Corso" === */
/* Tutor li renderizza con .tutor-btn-primary o .tutor-btn-outline-primary
già coperti dalle nostre regole §07 generali. Verifichiamo override
specifici dentro la sidebar-card. */
.tutor-course-sidebar-card .tutor-btn-primary,
.tutor-course-sidebar-card button.tutor-btn-primary {
background: var(--backlot-gradient-gold-refined) !important;
background-image: linear-gradient(135deg, #C9A84C 0%, #B07828 100%) !important;
color: var(--backlot-bg) !important;
border: 1px solid transparent !important;
}
.tutor-course-sidebar-card .tutor-btn-outline-primary {
background: transparent !important;
background-image: none !important;
color: var(--backlot-gold) !important;
border: 1px solid var(--backlot-gold) !important;
}
/* Date "Ti sei iscritto a questo corso il 20 Aprile 2026" — color verde
originale era #24a148, manteniamo gold soft */
.tutor-course-sidebar-card [class*="success"],
.tutor-course-sidebar-card .tutor-color-success {
color: var(--backlot-success) !important;
}
/* Progress bar (2/20, 10% Completo) — stile Backlot */
.tutor-course-sidebar-card .tutor-progress-bar,
.tutor-course-sidebar-card [class*="progress"] {
background-color: var(--backlot-surface-2) !important;
}
/* ============================================================
27. FIX TABS BAR (course landing — sezione "Informazioni / Annunci / Recensioni")
Selettori veri TutorLMS:
.tutor-nav { bg: #f6f8fd }
.tutor-nav-tabs { bg: #fafafb; border-bottom: 1px solid #cdcfd5 }
.tutor-nav-tabs-container { bg: #fff }
.tutor-nav > li > a.is-active { bg: var(--tutor-color-white) } ← cream nel nostro remap
.tutor-course-details-page .tutor-is-sticky { bg: rgba(255,255,255,.6) }
============================================================ */
.tutor-nav,
.tutor-nav-tabs,
.tutor-nav-tabs-container,
.tutor-course-details-page .tutor-course-details-tab,
.tutor-course-details-tab .tutor-is-sticky {
background-color: transparent !important;
background-image: none !important;
background: transparent !important;
border-color: rgba(201, 168, 76, 0.18) !important;
box-shadow: none !important;
}
/* Sticky bar (quando tab si "aggancia" allo scroll) */
.tutor-course-details-page .tutor-course-details-tab .tutor-is-sticky {
background: rgba(11, 9, 8, 0.85) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(201, 168, 76, 0.18) !important;
}
/* Nav links — match specificity originale (.tutor-nav > li > a) */
.tutor-nav > li > a,
.tutor-nav-link,
.tutor-nav-tabs .tutor-nav-link {
color: var(--backlot-text-muted) !important;
background-color: transparent !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: var(--backlot-space-3) var(--backlot-space-5) !important;
transition: var(--backlot-transition-smooth);
}
.tutor-nav > li > a:hover,
.tutor-nav-link:hover,
.tutor-nav-tabs .tutor-nav-link:hover {
color: var(--backlot-text) !important;
background-color: transparent !important;
border-bottom-color: rgba(201, 168, 76, 0.4) !important;
}
/* Active tab — specificity match: .tutor-nav > li > a.is-active (0,2,1) */
.tutor-nav > li > a.is-active,
.tutor-nav > li > a.active,
.tutor-nav-link.is-active,
.tutor-nav-link.active,
.tutor-nav-tabs .tutor-nav-link.is-active,
.tutor-nav-tabs .tutor-nav-link.active {
color: var(--backlot-gold) !important;
background-color: transparent !important;
background: transparent !important;
border-top-color: transparent !important;
border-bottom-color: var(--backlot-gold) !important;
border-bottom-width: 2px !important;
box-shadow: none !important;
}
/* Pills variant (se usata in dashboard) */
.tutor-nav-pills .tutor-nav-link:hover {
background-color: rgba(201, 168, 76, 0.10) !important;
color: var(--backlot-text) !important;
}
.tutor-nav-pills .tutor-nav-link.is-active {
background-color: var(--backlot-gold) !important;
color: var(--backlot-bg) !important;
}
/* ============================================================
FINE — TutorLMS override v1.4.7 (FIX tabs bar)
============================================================ */