*,
*::before,
*::after {
box-sizing: border-box;
}
/* Compensa o cabeçalho público fixo (sticky) ao saltar para uma âncora
(ex.: menu "FAQ" → #darka-faq), para o título da secção não ficar
escondido atrás dele. Inofensivo nas páginas autenticadas (Dashboard/
Perfil), cuja barra superior não é sticky. */
html {
scroll-padding-top: 90px;
}
/*
* Alternância claro/escuro do lado do cliente (Secção 33): as variáveis
* base já vêm calculadas no pelo ThemeOutput (tema escolhido pelo
* admin ou paleta clara), consoante `dark_mode.enabled`. Este bloco só
* força uma variante clara quando o próprio aluno alterna manualmente,
* mantendo as cores de marca (primária/secundária/links) e trocando
* apenas fundo/superfície/texto/contorno.
*/
:root.darka-force-light {
--darka-bg: #f9fafb;
--darka-surface: #ffffff;
--darka-text: #1f2937;
--darka-border: #e5e7eb;
}
body.darka-frontend {
margin: 0;
background: var(--darka-bg);
color: var(--darka-text);
font-family: var(--darka-font-family);
font-size: var(--darka-font-size-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.darka-auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.darka-auth-card {
width: 100%;
max-width: 420px;
background: var(--darka-surface);
border: 1px solid var(--darka-border);
border-radius: 14px;
padding: 36px 32px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.darka-profile-card {
max-width: 560px;
}
.darka-auth-card h1 {
margin: 0 0 24px;
font-size: 22px;
font-weight: 600;
}
.darka-auth-card h3 {
margin: 28px 0 14px;
font-size: 15px;
font-weight: 600;
border-top: 1px solid var(--darka-border);
padding-top: 20px;
}
.darka-auth-card form label {
display: block;
font-size: 13px;
font-weight: 500;
margin-bottom: 14px;
}
.darka-auth-card form input {
display: block;
width: 100%;
margin-top: 6px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--darka-border);
background: rgba(255, 255, 255, 0.04);
color: var(--darka-text);
font-size: 14px;
font-family: inherit;
}
.darka-auth-card form input:focus {
outline: 2px solid var(--darka-primary);
outline-offset: 1px;
}
/* NOVO (pedido "Olhinho nos campos de senha"): wrapper só à volta do
próprio `` (ver `Components::password_field_html()`) — a
altura do wrapper coincide sempre com a do campo, por isso a
centragem vertical do botão (`top:50%`) funciona sem precisar de
saber a altura exata do campo. */
.darka-password-field {
position: relative;
}
.darka-password-field input {
padding-right: 40px;
}
.darka-password-toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 4px;
margin: 0;
display: inline-flex;
align-items: center;
color: inherit;
opacity: 0.6;
cursor: pointer;
}
.darka-password-toggle:hover {
opacity: 1;
}
.darka-password-toggle .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
}
/* CORRIGIDO: as perguntas do tipo "textarea" do formulário de avaliação
(ex.: "Fale sobre o Curso") nunca tinham estilo próprio — caíam para a
aparência nativa do navegador, pequena e inconsistente com os outros
campos (`input` acima). Agora tem a mesma largura/borda/padding, com
altura inicial para ~5 linhas e redimensionamento vertical livre. */
.darka-auth-card form textarea {
display: block;
width: 100%;
margin-top: 6px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--darka-border);
background: rgba(255, 255, 255, 0.04);
color: var(--darka-text);
font-size: 14px;
font-family: inherit;
line-height: 1.5;
resize: vertical;
}
.darka-auth-card form textarea:focus {
outline: 2px solid var(--darka-primary);
outline-offset: 1px;
}
.darka-btn-primary,
.darka-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 18px;
border-radius: 8px;
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
text-decoration: none;
}
.darka-btn-primary {
background: var(--darka-primary);
color: #fff;
}
.darka-btn-secondary {
background: transparent;
color: var(--darka-text);
border: 1px solid var(--darka-border);
}
.darka-btn-primary:disabled,
.darka-btn-secondary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.darka-auth-card form .darka-btn-primary,
.darka-auth-card form .darka-btn-secondary {
width: 100%;
}
/* NOVO (pedido "Nova Aba reCAPTCHA"): espaço próprio para o widget v2
("Não sou um robô"), entre a senha e o botão de submissão. */
.darka-auth-card form .g-recaptcha {
margin: 4px 0 16px;
}
.darka-auth-alt {
margin-top: 20px;
font-size: 13px;
text-align: center;
color: var(--darka-text);
opacity: 0.85;
}
.darka-auth-alt a,
.darka-auth-card a {
color: var(--darka-links);
text-decoration: none;
}
.darka-auth-alt a:hover,
.darka-auth-card a:hover {
text-decoration: underline;
}
.darka-form-message {
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 18px;
}
.darka-form-message[data-status='error'] {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.darka-form-message[data-status='success'] {
background: rgba(34, 197, 94, 0.15);
color: #86efac;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.darka-avatar-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.darka-avatar-preview {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--darka-border);
}
.darka-field-help {
font-size: 12px;
opacity: 0.7;
margin: 4px 0 0;
}
@media (max-width: 480px) {
.darka-auth-card {
padding: 28px 20px;
}
}
/* ---------- Cabeçalho público (fixo/sticky, partilhado por todas as
páginas acessíveis antes do login) ---------- */
.darka-public-header {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 32px;
border-bottom: 1px solid var(--darka-border);
background: var(--darka-surface);
transition: padding 0.2s ease, box-shadow 0.2s ease;
}
/* Aplicada via JS ao rolar (ver assets/frontend/js/student.js) — reduz
ligeiramente a altura e acrescenta sombra, sem exagerar na animação. */
.darka-public-header.is-scrolled {
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.darka-app-logo {
font-weight: 700;
font-size: 18px;
color: var(--darka-text);
text-decoration: none;
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
/* NOVO (correção do logotipo): imagem da logo carregada no admin (em vez do
texto do nome da plataforma). O tamanho vem de um `style="height:...px"`
inline, aplicado dinamicamente a partir da configuração "Altura da Logo". */
.darka-app-logo__img {
display: block;
max-width: 220px;
}
/* Alternância clara/escura: por omissão mostra-se a imagem correspondente
ao tema do servidor (--default-dark ou --default-light, calculada a
partir de `dark_mode.enabled`); a classe `darka-force-light` em ``
é a mesma já usada por todo o sistema de tema para a troca ao vivo, sem
recarregar a página, quando o aluno alterna o tema manualmente. */
.darka-app-logo--default-dark .darka-app-logo__img--light,
.darka-app-logo--default-light .darka-app-logo__img--dark {
display: none;
}
:root.darka-force-light .darka-app-logo--default-dark .darka-app-logo__img--dark {
display: none;
}
:root.darka-force-light .darka-app-logo--default-dark .darka-app-logo__img--light {
display: block;
}
.darka-icon-btn {
background: none;
border: 1px solid var(--darka-border);
border-radius: 8px;
width: 36px;
height: 36px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--darka-text);
flex-shrink: 0;
}
.darka-public-header__toggle {
display: none;
background: none;
border: 1px solid var(--darka-border);
border-radius: 8px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
color: var(--darka-text);
cursor: pointer;
flex-shrink: 0;
}
.darka-public-header__panel {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
flex: 1;
min-width: 0;
}
.darka-public-header__nav {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.darka-public-header__nav a {
color: var(--darka-text);
text-decoration: none;
font-size: 14px;
font-weight: 500;
opacity: 0.8;
white-space: nowrap;
}
.darka-public-header__nav a:hover {
opacity: 1;
color: var(--darka-primary);
}
.darka-public-header__actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.darka-public-header .darka-btn-primary,
.darka-public-header .darka-btn-secondary {
padding: 8px 16px;
white-space: nowrap;
}
@media (max-width: 900px) {
.darka-public-header__toggle {
display: inline-flex;
}
.darka-public-header__panel {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 18px;
background: var(--darka-surface);
border-bottom: 1px solid var(--darka-border);
padding: 20px 24px 24px;
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
max-height: calc(100vh - 68px);
overflow-y: auto;
}
.darka-public-header__panel.is-open {
display: flex;
}
.darka-public-header__nav {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.darka-public-header__actions {
flex-direction: column;
align-items: stretch;
}
.darka-public-header__actions .darka-btn-primary,
.darka-public-header__actions .darka-btn-secondary {
text-align: center;
}
}
.darka-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--darka-primary);
margin-bottom: 10px;
}
.darka-section-subtitle {
opacity: 0.75;
margin: -8px 0 20px;
font-size: 14px;
}
/* ---------- App shell (Dashboard / Perfil) ---------- */
.darka-app-shell {
display: flex;
min-height: 100vh;
}
.darka-app-shell[data-darka-sidebar-position='right'] {
flex-direction: row-reverse;
}
.darka-sidebar {
width: 260px;
flex-shrink: 0;
background: var(--darka-surface);
border-right: 1px solid var(--darka-border);
padding: 20px 16px;
display: flex;
flex-direction: column;
}
/* CORRIGIDO: o botão de alternar (`data-darka-sidebar-toggle`) já
alternava a classe `is-open` corretamente via JS, mas essa classe só
tinha algum efeito visual dentro da media query do mobile (abaixo) —
em ecrã largo (>900px, onde a Sidebar já está sempre visível por
omissão), clicar no botão não tinha nenhum efeito percetível. Agora o
mesmo clique também recolhe/expande a Sidebar em desktop/tablet
largo; `.darka-app-content` já tem `flex: 1`, por isso ocupa sozinho o
espaço libertado sem precisar de mais nenhum ajuste. */
@media (min-width: 901px) {
.darka-sidebar.is-open {
display: none;
}
}
.darka-sidebar-logo {
padding: 8px 12px 20px;
}
.darka-sidebar-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.5;
padding: 0 12px 10px;
}
.darka-sidebar nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.darka-sidebar nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
color: var(--darka-text);
text-decoration: none;
font-size: 14px;
}
.darka-sidebar nav a.is-active,
.darka-sidebar nav a:hover {
background: var(--darka-primary);
color: #fff;
}
.darka-sidebar-bottom {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--darka-border);
display: flex;
flex-direction: column;
gap: 4px;
}
.darka-sidebar-bottom a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
color: var(--darka-text);
text-decoration: none;
font-size: 13px;
opacity: 0.8;
}
.darka-sidebar-bottom a:hover {
opacity: 1;
}
.darka-sidebar-logout {
color: #ef4444 !important;
opacity: 1 !important;
}
.darka-app-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.darka-app-topbar {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 24px;
border-bottom: 1px solid var(--darka-border);
background: var(--darka-surface);
}
.darka-app-header__actions {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
}
/* AJUSTADO: "Ver Perfil" passou de link de navegação a gatilho de um
popover (`.darka-user-popover`, ver marcação em Components::topbar()).
`.darka-user-menu` continua a dar o mesmo aspeto (agora num