/* ========================================================================= Planeta Cursos — Portal do Aluno (E5B.1) Tema PRÓPRIO do portal, separado do painel operacional (app.css). CSS local, sem CDN. Identidade: claro/arejado/educacional para navegar; escuro imersivo no Player e no Modo Aula (foco). Acento índigo/violeta usado com parcimônia. ========================================================================= */ /* Ponte com os tokens compartilhados (static/css/tokens.css, carregado ANTES deste arquivo). O vocabulário `--pc-*` do Portal fica INTACTO de propósito: são ~26 KB de regras que continuam consumindo estes nomes sem uma linha alterada. O que muda é só de onde vem o valor. O Portal mantém o acento índigo/sky próprio — a diferença em relação ao painel é intencional. */ :root { /* base clara */ --pc-bg: var(--gx-gray-060); --pc-surface: var(--gx-white); --pc-surface-2: var(--gx-gray-070); --pc-ink: var(--gx-ink-850); --pc-muted: var(--gx-ink-510); --pc-border: var(--gx-line-210); /* acento */ --pc-primary: var(--gx-indigo-500); /* índigo/violeta */ --pc-primary-600: var(--gx-indigo-600); --pc-primary-soft: var(--gx-indigo-050); --pc-accent: var(--gx-sky-500); /* toque educacional (sky) */ /* progresso/estados — compartilhados com o painel */ --pc-green: var(--gx-ok); --pc-green-soft: var(--gx-ok-soft); --pc-amber: var(--gx-warn); --pc-amber-soft: var(--gx-warn-soft); --pc-neutral-soft: var(--gx-neutral-soft); /* escuro imersivo (player/modo aula) — tema de FOCO de tela, não dark mode */ --pc-dark-bg: var(--gx-focus-bg); --pc-dark-surface: var(--gx-focus-surface); --pc-dark-surface-2: var(--gx-focus-surface-2); --pc-dark-ink: var(--gx-focus-ink); --pc-dark-muted: var(--gx-focus-ink-muted); --pc-dark-border: var(--gx-focus-line); /* forma */ --pc-radius: var(--gx-radius-xl); --pc-radius-sm: var(--gx-radius-lg); --pc-shadow: var(--gx-shadow-card); --pc-shadow-hover: var(--gx-shadow-hover); --pc-topbar-h: var(--gx-topbar-h-portal); --pc-font: var(--gx-font-portal); /* Anel de foco. Vira variável porque no escuro o `--pc-primary-soft` (quase branco no claro) fica escuro e sumiria contra o fundo. UI-QA-2 · Bloco 3. */ --pc-focus-ring: var(--pc-primary-soft); } /* ========================================================================= TEMA ESCURO DO PORTAL (UI-QA-2 · Bloco 3 — piloto) Este bloco vive AQUI, no CSS da superfície, e não em tokens.css. É a regra central da fase: quem não escreve o próprio bloco escuro não escurece. Por isso `app.css`, `master.css`, `publico.css` e o caminho de impressão seguem claros mesmo que alguém coloque `data-tema` no `` deles por engano. O atributo só é renderizado pelos templates do Portal (`base.html`, `login.html`, `trocar_senha.html`), a partir do cookie lido no servidor. O que muda e o que NÃO muda: - mudam as SUPERFÍCIES (fundo, card, borda, tinta) e os pares de estado; - NÃO muda o acento de marca em PREENCHIMENTO (`--pc-primary`, `--pc-accent`): o índigo→sky dos gradientes da capa e do logo é identidade do Portal e funciona sobre fundo escuro. O que clareia é o acento usado como TEXTO (`--pc-primary-600`, em links, abas e rótulos), que a 4,7:1 sobre o card escuro seria ilegível no valor claro. Escala suavizada no microbloco 3.1 (ver a nota da camada 7 em tokens.css): piso menos preto, moldura pela metade, sombra curta. A separação entre card e página passou a vir da SUPERFÍCIE; a borda só insinua. Contrastes medidos (WCAG), todos sobre `--pc-surface` escuro: ink 11,71:1 · muted 6,43:1 · primary-600 7,22:1 · verde 8,26:1 · âmbar 8,63:1 badge neutro (muted/neutral-soft) 5,50:1 · avatar (600/soft) 6,28:1 O Modo Aula (`--pc-dark-*` → `--gx-focus-*`) NÃO é tocado: continua sendo a superfície mais escura do produto, para que entrar nele siga sendo uma mudança perceptível de foco. ========================================================================= */ :root[data-tema="escuro"] { /* Faz o navegador desenhar input, select e barra de rolagem no esquema escuro. Sem isto, os controles nativos ficam brancos e denunciam o tema improvisado — é o detalhe que mais aparece num Portal cheio de formulário. */ color-scheme: dark; --pc-bg: var(--gx-dark-bg); --pc-surface: var(--gx-dark-surface); --pc-surface-2: var(--gx-dark-surface-2); --pc-ink: var(--gx-dark-ink); --pc-muted: var(--gx-dark-ink-muted); --pc-border: var(--gx-dark-line); /* Acento: preenchimento mantido, texto clareado (ver nota acima). O soft subiu com o card no microbloco 3.1 (L* 18 -> 21,5): no valor antigo a aba ativa e o avatar ficavam mais ESCUROS que o proprio card, e "ativo" lido como afundado inverte o sinal. */ --pc-primary-600: #a5b4fc; --pc-primary-soft: #2a3252; --pc-focus-ring: var(--pc-primary-600); --pc-green: var(--gx-dark-ok); --pc-green-soft: var(--gx-dark-ok-soft); --pc-amber: var(--gx-dark-warn); --pc-amber-soft: var(--gx-dark-warn-soft); --pc-neutral-soft: var(--gx-dark-neutral-soft); /* Sombra no escuro é quase toda ilusão: preto sobre fundo escuro não desenha profundidade, só suja o entorno. Os borrões largos e opacos do Bloco 3 (30–40px a 35–45%) cercavam cada card de um halo turvo — parte concreta da sensação de "pesado". Aqui ficam curtos e discretos, só para descolar o card do fundo; quem separa de fato é a superfície mais clara. */ --pc-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 16px rgba(0, 0, 0, .20); --pc-shadow-hover: 0 2px 4px rgba(0, 0, 0, .32), 0 10px 24px rgba(0, 0, 0, .26); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--pc-font); background: var(--pc-bg); color: var(--pc-ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--pc-primary-600); text-decoration: none; } a:hover { opacity: .8; } h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; } .pc-muted { color: var(--pc-muted); } /* ---- Botões ---- */ .pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--pc-radius-sm); border: 1px solid var(--pc-border); background: var(--pc-surface); color: var(--pc-ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, box-shadow .15s, transform .05s; } /* `.pc-btn` define display:inline-flex, que (regra de autor) venceria o `[hidden]` da folha do navegador. Esta regra garante que o atributo `hidden` realmente esconda o botão — ex.: "Próximo" some no último passo do Modo Aula; "Finalizar" some antes. */ .pc-btn[hidden] { display: none; } .pc-btn:hover { text-decoration: none; box-shadow: var(--pc-shadow); } .pc-btn:active { transform: translateY(1px); } .pc-btn--primary { background: var(--pc-primary); border-color: var(--pc-primary); color: #fff; } .pc-btn--primary:hover { background: var(--pc-primary-600); } .pc-btn--ghost { background: transparent; } .pc-btn--lg { padding: 13px 24px; font-size: 16px; } .pc-btn:disabled, .pc-btn[disabled] { opacity: .5; cursor: not-allowed; } .pc-btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--pc-focus-ring); outline-offset: 2px; } /* ---- Topbar ---- */ .portal-topbar { height: var(--pc-topbar-h); background: var(--pc-surface); border-bottom: 1px solid var(--pc-border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; } .portal-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--pc-ink); } .portal-brand:hover { text-decoration: none; } .portal-logo { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; } /* Ações do topo: tema + menu do usuário. UI-QA-2 · Bloco 3. */ .portal-topbar__acoes { display: flex; align-items: center; gap: 6px; } /* Controle de tema — discreto, mas com rótulo em texto. Um ícone sozinho (só a lua) obriga o aluno a adivinhar se ele mostra o estado atual ou a ação; o texto resolve a ambiguidade. Abaixo de 560px o rótulo some e fica só o ícone, com o `title` do botão preservando a leitura por acessibilidade. */ .portal-tema { margin: 0; display: flex; } .portal-tema__btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--pc-muted); padding: 7px 12px; border-radius: 999px; transition: background .15s, color .15s, border-color .15s; } .portal-tema__btn:hover { background: var(--pc-surface-2); color: var(--pc-ink); } .portal-tema__ico { font-size: 15px; line-height: 1; } .portal-usermenu { position: relative; } .portal-usermenu__btn { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--pc-ink); padding: 6px 8px; border-radius: 999px; } .portal-usermenu__btn:hover { background: var(--pc-surface-2); } .pc-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--pc-primary-soft); color: var(--pc-primary-600); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .portal-usermenu__name { font-size: 14px; font-weight: 600; } .portal-usermenu__list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-sm); box-shadow: var(--pc-shadow-hover); padding: 6px; z-index: 60; } .portal-usermenu__list[hidden] { display: none; } .portal-usermenu__list a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; color: var(--pc-ink); font-size: 14px; } .portal-usermenu__list a:hover { background: var(--pc-surface-2); text-decoration: none; } /* ---- Conteúdo / container ---- */ .portal-content { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; } .pc-page-title { font-size: 24px; font-weight: 700; } .pc-messages { list-style: none; margin: 0 0 16px; padding: 0; } .pc-messages li { padding: 10px 14px; border-radius: var(--pc-radius-sm); margin-bottom: 8px; background: var(--pc-primary-soft); color: var(--pc-primary-600); } /* ---- Faixa de boas-vindas / perfil ---- */ .welcome { display: flex; align-items: center; gap: 16px; background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: var(--pc-radius); padding: 18px 22px; box-shadow: var(--pc-shadow); margin-bottom: 26px; position: relative; overflow: hidden; } .welcome::before { content: ""; position: absolute; inset: 0 60% 0 0; background: linear-gradient(120deg, rgba(99,102,241,.10), transparent 70%); pointer-events: none; } .welcome .pc-avatar { width: 54px; height: 54px; font-size: 22px; } .welcome__txt { flex: 1; position: relative; } .welcome__hi { font-size: 19px; font-weight: 700; } .welcome__close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: var(--pc-muted); font-size: 18px; cursor: pointer; } /* ---- Abas ---- */ .pc-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--pc-border); margin: 0 0 20px; } .pc-tab { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 14px; color: var(--pc-muted); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; } .pc-tab.is-active { color: var(--pc-primary-600); border-bottom-color: var(--pc-primary); } .pc-tabpane[hidden] { display: none; } /* ---- Grade de cursos (cards) ---- */ .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .course-card { background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: var(--pc-radius); overflow: hidden; box-shadow: var(--pc-shadow); display: flex; flex-direction: column; transition: box-shadow .15s, transform .1s; } .course-card:hover { box-shadow: var(--pc-shadow-hover); transform: translateY(-2px); } .course-card__cover { height: 120px; background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; } .course-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .course-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .course-card__title { font-size: 16px; font-weight: 700; } .course-card__foot { margin-top: auto; padding-top: 6px; } /* Versão do conteúdo EAD (GIG-CURSOS-5): informativa e discreta — mesmo tamanho do rótulo de progresso, para não competir com título, progresso e ação principal. */ .course-card__versao { font-size: 12px; } /* ---- Seções de "Meus cursos" (C1.1) ---- */ .pc-section { margin: 0 0 28px; } .pc-section__title { font-size: 17px; font-weight: 700; margin: 0 0 14px; color: var(--pc-ink); } .course-card__aviso { margin-top: 2px; font-size: 13px; } /* Bloqueado: card "apagado", capa neutra, sem ação de estudo. */ .course-card--bloqueado { opacity: .85; } .course-card--bloqueado:hover { transform: none; } .course-card--bloqueado .course-card__cover { background: linear-gradient(135deg, #94a3b8, #cbd5e1); font-size: 34px; } /* Concluído: capa em tom de "conquista", sem CTA de continuar. */ .course-card--concluido .course-card__cover { background: linear-gradient(135deg, #16a34a, #4ade80); } /* ---- Barra de progresso ---- */ .pc-progress { height: 9px; background: var(--pc-neutral-soft); border-radius: 999px; overflow: hidden; } .pc-progress__bar { height: 100%; background: var(--pc-green); border-radius: 999px; transition: width .3s ease; } .pc-progress__label { font-size: 12px; color: var(--pc-muted); } /* ---- Badges de estado ---- */ .pc-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; } .pc-badge--ok { background: var(--pc-green-soft); color: var(--pc-green); } .pc-badge--andamento { background: var(--pc-amber-soft); color: var(--pc-amber); } .pc-badge--neutro { background: var(--pc-neutral-soft); color: var(--pc-muted); } .pc-empty { text-align: center; color: var(--pc-muted); padding: 48px 16px; } /* ========================================================================= Central do curso (hub) ========================================================================= */ .course-hub__back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 14px; } .course-header { background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); padding: 24px; margin-bottom: 24px; position: relative; overflow: hidden; } .course-header::after { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,.12), transparent 70%); } .course-header__title { font-size: 26px; font-weight: 800; } .course-header__meta { color: var(--pc-muted); font-size: 14px; margin: 6px 0 14px; } .course-header__progress { display: flex; align-items: center; gap: 12px; max-width: 520px; margin-bottom: 18px; } .course-header__progress .pc-progress { flex: 1; } .course-header__actions { display: flex; gap: 10px; flex-wrap: wrap; } .course-section-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; } .module { background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); margin-bottom: 14px; overflow: hidden; } .module__head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: transparent; border: 0; font: inherit; cursor: pointer; text-align: left; } .module__head:hover { background: var(--pc-surface-2); } /* Este `