/* tutor-overrides.css — Alinha o Tutor LMS aos tokens da Palatine Este arquivo cresce nos Passos 3-7 do plano F4.5 (login, checkout, player, dashboard, certificados). IMPORTANTE: as regras aqui são escopadas às telas previstas na 4.5 (.tutor-dashboard, player de aula) — por isso não usamos seletores em `body` sem escopo. O catálogo (archive-course) e a página de detalhe de curso (single-course) são réplicas dedicadas do site Astro e têm suas próprias folhas: assets/css/course-archive.css e assets/css/course-single.css. */ /* ── Variáveis nativas do Tutor LMS — seguras em qualquer tela (apenas recolorem botões/badges para a paleta Palatine, sem alterar fundo/texto, então não afetam o contraste das telas fora do escopo) ─── */ :root { --tutor-color-primary: var(--color-gold); --tutor-color-success: var(--color-green); } /* ── Estado vazio (sem cursos, sem avaliações, etc.) ───────────────────────── Substitui a ilustração padrão do Tutor LMS pela versão da identidade Palatine (mesma imagem usada no site Astro). */ .tutor-empty-state img { display: none; } .tutor-empty-state::before { content: ''; display: block; width: 100%; max-width: 600px; aspect-ratio: 524 / 242; margin: 0 auto var(--space-md); background-image: url('../images/emptystate.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ── Botões do Tutor (login, checkout, dashboard, player) ────────────────────── Tipografia única para TODOS os botões — só a cor distingue primário de secundário (mesmo padrão dos demais botões do site: Cinzel, 600, caixa alta, --text-sm, tracking 0.1em). O Tutor define fonte/tamanho próprios por classe, por isso !important. */ .tutor-btn-primary, .tutor-btn-outline-primary, .tutor-btn-secondary { font-family: var(--font-serif) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: var(--text-sm) !important; border-radius: var(--radius-sm) !important; } .tutor-btn-primary { background-color: var(--color-gold) !important; border-color: var(--color-gold) !important; color: var(--color-bg-dark) !important; transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .tutor-btn-primary:hover { background-color: var(--color-gold-hover) !important; border-color: var(--color-gold-hover) !important; transform: translateY(-1px); } .tutor-btn-outline-primary, .tutor-btn-secondary { background-color: transparent !important; border-color: var(--color-border-dark) !important; color: var(--color-text-primary-dark) !important; } .tutor-btn-outline-primary:hover, .tutor-btn-secondary:hover { border-color: var(--color-gold) !important; color: var(--color-gold) !important; } /* ════════════════════════════════════════════════════════════════════════ Dashboard do aluno ("Meus Cursos" / Painel) — escopo: .tutor-dashboard ════════════════════════════════════════════════════════════════════════ */ /* Sem background-color próprio no wrapper: o painel é sempre uma tela com hero (body.palatine-hero-page), e um fundo opaco aqui cobriria por completo a imagem + degradê do body. */ .tutor-dashboard, .tutor-dashboard-content { color: var(--color-text-primary-dark); } /* Linha do menu + conteúdo principal — mesma cor opaca em que o degradê do hero termina (var(--color-bg-dark)), para a transição entre a imagem (no cabeçalho do perfil, fora deste wrapper) e o restante do painel ficar contínua, sem um "bloco" de cor diferente por cima do hero. */ .tutor-frontend-dashboard-maincontent { background-color: var(--color-bg-dark); } /* Quando o conteúdo da tela é mais baixo que o viewport, o fundo claro padrão do body aparece abaixo dele. Sem background-color no , o background do body se propaga para o canvas inteiro (cobre o viewport), escopado às telas com hero via classe do body. */ body.palatine-hero-page { background-color: var(--color-bg-dark); } /* Espaço entre o header global e o cabeçalho do dashboard (avatar/nome), para o avatar não tocar o menu superior. */ .tutor-frontend-dashboard-header { padding-top: var(--space-md); } /* O wrapper do dashboard usa a classe utilitária tutor-pb-80 (padding-bottom: 80px), pensada para dar respiro antes do rodapé do tema — como removemos o rodapé global, isso virou um espaço vazio no final da página. */ .tutor-dashboard.tutor-pb-80 { padding-bottom: 0; } /* Cards/painéis brancos do dashboard (estatísticas, cabeçalho do perfil, tabela "Meus cursos") — Tutor usa fundo branco fixo (.tutor-bg-white, .tutor-card) independente de variável, por isso sobrescrevemos com !important apenas dentro do dashboard. */ .tutor-dashboard .tutor-bg-white, .tutor-dashboard .tutor-card, .tutor-dashboard-content .tutor-bg-white, .tutor-dashboard-content .tutor-card { background-color: var(--color-surface-dark) !important; border: 1px solid var(--color-border-dark); border-radius: var(--radius-md); color: var(--color-text-primary-dark) !important; } .tutor-dashboard .tutor-color-black, .tutor-dashboard-content .tutor-color-black { color: var(--color-text-primary-dark) !important; } .tutor-dashboard .tutor-color-secondary, .tutor-dashboard-content .tutor-color-secondary { color: var(--color-text-secondary-dark) !important; } /* Valor da bio em "Meu perfil" (tutor-fs-6 tutor-color-secondary) deve ter a mesma aparência dos demais valores de campo (tutor-fs-6 tutor-fw-medium tutor-color-black). */ .tutor-dashboard-content .tutor-fs-6.tutor-color-secondary { color: var(--color-text-primary-dark) !important; font-weight: 500; } /* Tabela "Meus cursos" */ .tutor-dashboard-content table { background-color: var(--color-surface-dark) !important; color: var(--color-text-primary-dark); border-color: var(--color-border-dark); } .tutor-dashboard-content table th, .tutor-dashboard-content table td { background-color: transparent !important; border-color: var(--color-border-dark) !important; color: var(--color-text-primary-dark); } .tutor-dashboard-content table td a { color: var(--color-text-primary-dark) !important; } .tutor-dashboard-content table td a:hover { color: var(--color-gold) !important; } /* Campo de data (date range picker) em "Histórico de Pedidos" */ .tutor-dashboard-content .tutor-form-control { background-color: var(--color-bg-dark) !important; border-color: var(--color-border-dark) !important; color: var(--color-text-primary-dark) !important; } .tutor-dashboard-content .tutor-form-control::placeholder { color: var(--color-text-secondary-dark); } /* Popup do date range picker (react-datepicker) em "Histórico de Pedidos" e dropdown de filtro (ex.: "Todos(0)" em "Perguntas & Respostas") */ .react-datepicker, .tutor-form-select-dropdown { background-color: var(--color-surface-dark) !important; border: 1px solid var(--color-border-dark) !important; color: var(--color-text-primary-dark); } .react-datepicker__header { background-color: var(--color-surface-dark) !important; border-color: var(--color-border-dark) !important; } .react-datepicker__current-month, .react-datepicker__day-name, .react-datepicker__day, .dropdown-label, .react-datepicker__selected-days-count { color: var(--color-text-primary-dark) !important; } .react-datepicker__day:hover { background-color: var(--color-surface-dark-hover) !important; } .react-datepicker__day--outside-month, .react-datepicker__day--disabled { color: var(--color-text-muted-dark) !important; } .react-datepicker__day--selected, .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range, .react-datepicker__day--keyboard-selected { background-color: var(--color-gold) !important; color: var(--color-bg-dark) !important; } .dropdown-label svg path { stroke: var(--color-text-primary-dark); } .dropdown-container .dropdown-list { background-color: var(--color-surface-dark) !important; border: 1px solid var(--color-border-dark) !important; } .dropdown-container .dropdown-list li { color: var(--color-text-primary-dark) !important; } .dropdown-container .dropdown-list li:hover { background-color: var(--color-surface-dark-hover) !important; color: var(--color-text-primary-dark) !important; } .dropdown-container .dropdown-list li.is-current { background-color: var(--color-gold) !important; color: var(--color-bg-dark) !important; } .tutor-form-select-option span { color: var(--color-text-primary-dark); } .tutor-form-select-option:hover, .tutor-form-select-option.is-active { background-color: var(--color-surface-dark-hover) !important; } /* Card de curso em "Meus cursos" (instrutor) */ .tutor-dashboard-content .tutor-course-card .tutor-course-name a { color: var(--color-text-primary-dark) !important; } .tutor-dashboard-content .tutor-course-card .tutor-course-name a:hover { color: var(--color-gold) !important; } .tutor-dashboard-content .tutor-course-card .tutor-meta, .tutor-dashboard-content .tutor-course-card .tutor-meta-level, .tutor-dashboard-content .tutor-course-card .tutor-meta-value, .tutor-dashboard-content .tutor-course-card .tutor-meta-icon { color: var(--color-text-secondary-dark) !important; } .tutor-dashboard-content .tutor-course-card .price, .tutor-dashboard-content .tutor-course-card .price .woocommerce-Price-amount { color: var(--color-text-primary-dark) !important; } /* Card "No Data Found" — espaço entre os campos de filtro e o card */ .tutor-dashboard-content .tutor-divider.tutor-radius-12.tutor-overflow-hidden { margin-top: var(--space-md); } /* Metadados de tamanho de foto em "Configurações" */ .tutor-dashboard-content #tutor_photo_meta_area, .tutor-dashboard-content #tutor_photo_meta_area span { color: var(--color-text-secondary-dark) !important; } /* Editor de texto (TinyMCE) da Bio em "Configurações" */ .tutor-dashboard-content .wp-editor-container { border: 1px solid var(--color-border-dark); border-radius: var(--radius-sm); } .tutor-dashboard-content .mce-toolbar-grp, .tutor-dashboard-content .mce-statusbar { background-color: var(--color-surface-dark) !important; border-color: var(--color-border-dark) !important; } .tutor-dashboard-content .mce-edit-area { border-color: var(--color-border-dark) !important; } .tutor-dashboard-content .mce-btn button .mce-ico, .tutor-dashboard-content .mce-path-item { color: var(--color-text-secondary-dark) !important; } .tutor-dashboard-content .mce-btn:hover:not(.mce-disabled) button, .tutor-dashboard-content .mce-active button { background-color: var(--color-surface-dark-hover) !important; } .tutor-dashboard-content .mce-btn:hover:not(.mce-disabled) .mce-ico, .tutor-dashboard-content .mce-active .mce-ico { color: var(--color-gold) !important; } /* Opções de método de saque em "Configurações > Saques" */ .tutor-dashboard-content .tutor-radio-select { background-color: var(--color-surface-dark) !important; border: 1px solid var(--color-border-dark); color: var(--color-text-secondary-dark) !important; } .tutor-dashboard-content .tutor-radio-select-title { color: var(--color-text-primary-dark) !important; } .tutor-dashboard .tutor-color-muted, .tutor-dashboard-content .tutor-color-muted { color: var(--color-text-muted-dark) !important; } .tutor-dashboard h1, .tutor-dashboard h2, .tutor-dashboard h3, .tutor-dashboard h4, .tutor-dashboard-content h1, .tutor-dashboard-content h2, .tutor-dashboard-content h3, .tutor-dashboard-content h4 { font-family: var(--font-serif); letter-spacing: -0.02em; } /* Item ativo do menu lateral do dashboard */ .tutor-dashboard-permission-denied, .tutor-dashboard-left-menu .tutor-nav-link.is-active, .tutor-dashboard-left-menu .is-active > .tutor-nav-link { background-color: var(--color-gold) !important; color: var(--color-bg-dark) !important; border-radius: var(--radius-sm); }