*,
*::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);
/* NOVO (pedido "Classificação, Tipografia e Hero Responsiva" —
Secção 2.1): peso base configurável (Administrador → Preferência
individual, ver `Preferences::effective()`), aplicado junto com a
Família/Tamanho acima. Elementos com peso próprio já definido
explicitamente na folha de estilos (títulos, botões, etc.)
continuam a usar o seu valor — este só define o texto corrido, tal
como já acontecia com o tamanho de fonte base. */
font-weight: var(--darka-font-weight, 400);
/* AJUSTADO (Revisão Geral e Otimização Responsiva — Secção 3): antes
fixo em `--darka-font-size-base` (só o valor Desktop, sempre igual
em qualquer ecrã) — passa a usar o passo "base" da escala fluida
(`clamp()`, calculada em `ThemeOutput::css_variables()`), a mesma
reutilizada por todo o resto do texto da plataforma. */
font-size: var(--darka-text-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* AJUSTADO (pedido "Ajuste à Implementação de Responsividade" —
Secção 2): causa real identificada — `.darka-auth-shell` tinha
`min-height:100vh` PRÓPRIO, somado ao espaço já ocupado no fluxo
normal do documento pelo `.darka-public-header` (sticky, mas sticky
continua a ocupar espaço real, não é `fixed`) logo acima dela. Ou
seja, o total real da página passava a ser "altura do header +
100vh", e o formulário ficava centrado nesses 100vh extra — sempre
deslocado para baixo do centro visual verdadeiro do ecrã, tanto
mais visível quanto maior o header. Corrigido tornando ``
(só nas páginas de autenticação, via `body.darka-auth-page` — nunca
as restantes) uma coluna flex de `100vh`, com `.darka-auth-shell` a
preencher exatamente o espaço que sobra abaixo do header
(`flex:1`), sem duplicar viewport nenhum. */
body.darka-auth-page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.darka-auth-shell {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 24px;
/* Desktop: mais próximo do topo do que o centrado vertical
anterior, mas com respiro suficiente para não parecer colado ao
Header — Tablet/Mobile reduzem este valor progressivamente
(media queries abaixo). */
padding-top: 64px;
}
.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: var(--darka-text-lg);
font-weight: 600;
}
.darka-auth-card h3 {
margin: 28px 0 14px;
font-size: var(--darka-text-sm);
font-weight: 600;
border-top: 1px solid var(--darka-border);
padding-top: 20px;
}
/* AJUSTADO (finalização 1.0.0 — Fase 4, "Login e Registo/Cadastro"):
espaçamento entre campos (14px→20px) e entre label/campo (6px→10px,
ver `form input`/`form textarea` abaixo) aumentado — os campos
ficavam visualmente colados uns aos outros. */
.darka-auth-card form label {
display: block;
font-size: var(--darka-text-xs);
font-weight: 500;
margin-bottom: 20px;
}
.darka-auth-card form input {
display: block;
width: 100%;
margin-top: 10px;
/* AJUSTADO: campos visualmente baixos — altura aumentada de forma
ligeira e proporcional (10px→13px de padding vertical), nunca
exagerada. */
padding: 13px 14px;
border-radius: 8px;
border: 1px solid var(--darka-border);
background: rgba(255, 255, 255, 0.04);
color: var(--darka-text);
font-size: var(--darka-text-sm);
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 {
/* AJUSTADO: acompanha o aumento da área clicável do ícone acima —
nunca sobrepor o texto escrito no campo. */
padding-right: 46px;
}
.darka-password-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
/* AJUSTADO (finalização 1.0.0 — Fase 4.3): área clicável maior
(4px→8px de padding à volta do ícone de 18px, ~34px no total) —
mais confortável em Mobile/Tablet, sem aumentar visualmente o
ícone em si. */
padding: 8px;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: 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: 10px;
padding: 13px 14px;
border-radius: 8px;
border: 1px solid var(--darka-border);
background: rgba(255, 255, 255, 0.04);
color: var(--darka-text);
font-size: var(--darka-text-sm);
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;
/* AJUSTADO (finalização 1.0.0 — Fase 4.2): altura ligeiramente maior
(11px→13px), mesmo critério dos inputs acima. */
padding: 13px 18px;
border-radius: 8px;
border: none;
font-size: var(--darka-text-sm);
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: 8px 0 20px;
}
.darka-auth-alt {
margin-top: 20px;
font-size: var(--darka-text-xs);
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: var(--darka-text-xs);
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: var(--darka-text-xs);
opacity: 0.7;
margin: 4px 0 0;
}
/* AJUSTADO (pedido "Ajuste à Implementação de Responsividade" —
Secção 2): progressão de respiro no topo — 64px no Desktop (regra
base, acima), 40px em Tablet, 20px em Mobile — nunca colado ao
Header, mas cada vez mais compacto conforme o ecrã encolhe. */
@media (max-width: 900px) {
.darka-auth-shell {
padding-top: 40px;
}
}
@media (max-width: 600px) {
.darka-auth-shell {
padding: 16px;
padding-top: 20px;
}
.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: var(--darka-text-md);
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: var(--darka-text-sm);
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: var(--darka-text-xs);
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: var(--darka-text-sm);
}
/* ---------- 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;
}
/* AJUSTADO (pedido "Ajuste à Implementação de Responsividade" —
Secção 1): faltava esta regra de base — sem ela, o botão (um
`