/* ====================================================================
UMANUT - CORPO DOCENTE
Folha da categoria. Carrega depois do base.css e antes do nav.css.
Spec: docs/specs/2026-07-30-corpo-docente-design.md
Sistema: /design-system.html
O QUE ESTA FOLHA NAO FAZ
Nao redeclara tipografia. O base.css ja define h1/h2/h3 (peso 600,
entrelinha 1.15, espacejamento -0.015em, alinhados a esquerda) e o
tamanho do h2. A v2 desta pagina inventou uma escala propria e a
pagina deixou de parecer do mesmo site. Se um titulo precisa de
tamanho diferente, e excecao pontual e vem documentada.
O QUE ELA REAPROVEITA, e de onde
- .page-hero e .breadcrumb ...... graduacoes/graduacao.css
- .cta-final e a aurora ......... index.html (home), como graduacao.css
- .docente ...................... graduacoes/graduacao.css:739
Sem caixa, ordem nome/cargo/bio, rotulo de cargo em Azul Umanut e os
mesmos tamanhos. Duas divergencias, as duas pedidas pelo Marcelo em
30/07/2026: o monograma de 46px vira moldura 4:5 de 220px com raio
de card, e o filete do topo sai (a moldura arredondada ja faz a
borda superior, e o fio solto acima dela lia como sobra).
REGRA DE OURO
Rodape e menu sao chrome compartilhado. Tudo aqui esta preso em
`.dc-page main`. Na v1 tres bugs seguidos vieram de regra generica
escapando de main e apagando o rodape.
Esta pagina nao vai para a plataforma TUTOR (decisao do Marcelo em
30/07/2026): sem blindagem contra Bootstrap e sem teto latin1.
==================================================================== */
/* ====================================================
SERIFADA - SO NESTA PAGINA
Source Serif 4 no nome do professor e nas iniciais do monograma.
Escolhida pelo eixo de tamanho optico: e desenhada para conviver com
um sans em corpo pequeno, e o nome vive em 1,22rem. EB Garamond e
mais academica classica mas fica fragil nesse tamanho - trocar e
mudar so este token.
O token mora AQUI e nao no base.css de proposito: a serifada e uma
excecao desta pagina, nao uma mudanca de marca. O Manual fixa Inter,
e o base.css registra que Fraunces ja saiu do sistema uma vez.
==================================================== */
.dc-page {
--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
/* Paradas do gradiente da moldura sem foto. Ficam nomeadas aqui em
vez de cruas no seletor: sao quatro valores usados em dois lugares
(claro e escuro) e sem nome ninguem sabe qual mexer. */
--dc-moldura-topo: #F2F7FD;
--dc-moldura-base: #CBDDF1;
--dc-moldura-topo-escura: #24427A;
--dc-moldura-meio-escura: #17305C;
--dc-moldura-base-escura: #101F3F;
}
/* ====================================================
GUARDA DO REVEAL
base.css:375 poe .fade-up em opacity 0 e depende do observer. Nesta
pagina toda secao e .fade-up: se o script morrer, a pagina some. O
marca html.dc-js antes do primeiro pixel.
==================================================== */
html:not(.dc-js) .fade-up {
opacity: 1;
transform: none;
}
/* A faixa provisoria .dc-banner ("Lista incompleta: nao publicar") saiu
em 14/08/2026, junto com o meta robots noindex: a pagina foi ao ar.
Saiu tambem a classe dc-com-banner que o carregava - ela nunca
teve regra aqui nem em folha nenhuma, era so um marcador orfao. */
/* ====================================================
KICKER - correcao de contraste, so nesta pagina
O .kicker do base.css e Azul Horizonte, que da 4,38:1 sobre Areia
Papel e reprova em AA para 11,5px. Mesma correcao que o
graduacao.css:764 ja aplica no .docente-cargo. A correcao geral e no
base.css e mexe nas outras cinco paginas: nao e escopo daqui.
Em fundo escuro quem manda e o bloco SUPERFICIES ESCURAS.
==================================================== */
.dc-page main .kicker { color: var(--azul-umanut); }
/* ====================================================
ANIMACOES COMPARTILHADAS
Copiadas do graduacao.css porque nao moram no base.css.
==================================================== */
@keyframes auroraDrift1 {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(10vmax, 6vmax) scale(1.18); }
}
@keyframes auroraDrift2 {
from { transform: translate(0, 0) scale(1.1); }
to { transform: translate(-8vmax, 8vmax) scale(0.92); }
}
/* ====================================================
HERO - mesmo componente da pagina de graduacao
==================================================== */
.dc-page main .page-hero {
position: relative;
min-height: 62svh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: linear-gradient(180deg, var(--azul-nevoa) 0%, var(--areia-papel) 100%);
padding-block: 10rem 4.5rem;
}
.dc-page main .page-hero-content {
position: relative;
z-index: 2;
width: min(var(--max-w), 100% - 3rem);
margin-inline: auto;
}
.dc-page main .breadcrumb {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--azul-umanut);
margin-bottom: 1.75rem;
padding: 0 1.4rem;
border: 1px solid rgba(20,60,140,0.22);
border-radius: 50px;
background: rgba(255,255,255,0.55);
}
/* O link dentro da pilula tinha 20px de altura e reprovava ate no
minimo de 24px do WCAG 2.2. O padding vertical saiu da pilula e veio
para o link, entao o alvo cresce sem a pilula engordar. */
.dc-page main .breadcrumb a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* Titulo mais longo que o da graduacao, entao 8vw e nao 10vw: com 10vw
ele passava de tres linhas no telefone. */
.dc-page main .page-hero h1 {
color: var(--tinta-profunda);
font-size: clamp(2rem, 8vw, 6rem);
line-height: 1.05;
max-width: 14ch;
}
.dc-page main .page-hero h1 em {
font-style: italic;
color: var(--azul-umanut);
}
.dc-page main .page-hero-tagline {
margin-top: 1.5rem;
max-width: 58ch;
color: var(--texto-muted);
}
.dc-page main .page-hero-actions {
margin-top: 2.25rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* Entrada do hero, 14/08/2026. Esta pagina era a unica interna que
aparecia seca, sem nada.
Aqui NAO da para usar a revelacao por mascara das outras paginas (o
.line > span que sobe atras de um overflow:hidden): la o h1 e cortado
em linhas fixas pela mao, aqui ele quebra sozinho dentro do
max-width:14ch e o numero de linhas muda com a largura da tela. Sem
linha fixa nao ha o que mascarar, entao o titulo sobe inteiro.
Tres tempos, os mesmos das outras internas: trilha, titulo, e o resto
junto. Os keyframes vivem aqui porque esta pagina nao carrega o
graduacao.css, que e o dono do heroRise.
Dentro do no-preference de proposito: 'both' segura o elemento no
estado inicial (opacity 0) antes do delay, e fora do media query quem
pede movimento reduzido nao recebe a animacao que desfaz isso - o
hero inteiro sumiria. Mesmo cuidado que ja existe no graduacao.css. */
@media (prefers-reduced-motion: no-preference) {
.dc-page main .breadcrumb { animation: dcSobe 0.9s var(--ease-out-expo) 0.05s both; }
.dc-page main .page-hero h1 { animation: dcSobe 1s var(--ease-out-expo) 0.2s both; }
.dc-page main .page-hero-tagline,
.dc-page main .page-hero-actions { animation: dcSobe 1s var(--ease-out-expo) 0.5s both; }
}
@keyframes dcSobe {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* ====================================================
MOLDURA DE RETRATO
Mesma moldura com foto ou sem: trocar a silhueta por ![]()
nao mexe
uma linha do grid.
==================================================== */
/* A moldura sangra ate a borda do cartao e NAO tem raio proprio: quem
arredonda e o overflow:hidden do .dc-docente, exatamente como o
.curso-thumb dentro do .curso-card. As versoes anteriores desta
pagina erraram aqui - a moldura boiava solta no fundo da pagina com o
texto do lado de fora, e por isso lia como imagem quebrada. */
.dc-page main .dc-retrato {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
/* cqw abaixo mede esta caixa: as iniciais acompanham a moldura em
qualquer largura de coluna, sem media query. */
container-type: inline-size;
/* Profundidade radial em vez de campo chapado, mais um aro interno de
1px. Sem isso o estado sem foto e um retangulo de cor solida, que e
o que fazia a caixa parecer estar emoldurando vazio. */
background:
radial-gradient(118% 88% at 50% 8%, var(--dc-moldura-topo) 0%, var(--azul-nevoa) 52%, var(--dc-moldura-base) 100%);
box-shadow: inset 0 0 0 1px rgba(20,60,140,0.10);
color: var(--azul-umanut);
display: grid;
place-items: center;
}
/* Sem marca dentro da moldura. Foram tentadas duas: o
umanut-simbolo.png como marca d agua, que cortava a palavra UMANUT no
meio, e um arco desenhado em CSS. As duas foram reprovadas pelo
Marcelo. O estado sem foto fica so com a profundidade radial, o aro
interno e as iniciais na serifada.
Monograma do estado sem foto. Sai inteiro quando a ![]()
entrar; a
moldura e o raio sao os mesmos nos dois casos, entao o grid nao se
mexe. */
.dc-page main .dc-iniciais {
position: relative;
z-index: 1;
font-family: var(--font-serif);
/* 19cqw le como marca de espera. Maior que isso a inicial vira cartaz
e disputa com o nome logo abaixo. */
font-size: 19cqw;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1;
}
/* SEM TRATAMENTO DE COR. A foto entra como o professor mandou.
Ate 14/08/2026 havia aqui um `filter: url(#dc-duotone)` que pintava
todo mundo em Azul Abissal e Azul Manha. O Marcelo pediu as fotos
originais e o filtro saiu, junto com a definicao SVG que ficava no
index.html. Nao voltar sem ele pedir.
O object-fit fica, mas hoje nao corta nada: os arquivos ja entram
1:1, cortados no rosto pelo preparar-retratos.py. Ele e a rede de
seguranca para o dia que alguem largar aqui um arquivo fora de
esquadro - sem ele, a foto entraria esticada. */
.dc-page main .dc-retrato img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ====================================================
GRUPOS E DOCENTES
O .dc-docente e o .docente do graduacao.css:739 com a moldura no
lugar do avatar de 46px: sem caixa, mesma ordem de leitura (nome,
cargo, bio) e os mesmos tamanhos.
==================================================== */
.dc-page main .dc-grupo-head {
max-width: 62ch;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.dc-page main .dc-grupo-head h2 em { font-style: italic; color: var(--azul-horizonte); }
.dc-page main .dc-grupo-head p { color: var(--texto-muted); margin-top: 1rem; }
/* auto-FILL, nao auto-fit. O auto-fit colapsa as trilhas vazias, e o
Executive Education, que tem so dois professores, esticava os dois
cards para ocupar a linha inteira: 758px de altura contra os 616px
da graduacao. O auto-fill mantem a trilha, entao card de secao com 2
e card de secao com 5 tem o mesmo tamanho.
Resolve 3, 2 e 1 coluna na mesma expressao, sem media query, pela
mesma razao que o .container do sistema nao usa breakpoint. */
.dc-page main .dc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: clamp(2rem, 4vw, 3rem);
}
/* O cartao do sistema: caixa branca contida, 18px de raio, borda de
1px, overflow:hidden. Mesmos valores do .curso-card no index.html.
O filete no topo do .docente nao entra: la o cartao nao tem caixa,
aqui tem, e a borda ja separa um do outro. */
.dc-page main .dc-docente {
background: var(--branco);
border: 1px solid rgba(20,60,140,0.12);
border-radius: 18px;
overflow: hidden;
}
.dc-page main .dc-docente-corpo { padding: 1.6rem; }
.dc-page main .dc-docente h3 {
font-family: var(--font-serif);
font-size: 1.22rem;
font-weight: 600;
letter-spacing: -0.005em;
margin-bottom: 0.35rem;
}
.dc-page main .dc-cargo {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--azul-umanut);
display: block;
margin-bottom: 0.9rem;
}
.dc-page main .dc-mini {
font-size: 0.9rem;
line-height: 1.65;
color: var(--texto-muted);
}
/* Existiu aqui, por algumas horas de 14/08/2026, um .dc-pendente: caixa
tracejada que ocupava o lugar do .dc-mini com o texto "Ficha nao
enviada", para a direcao ver quem nao respondeu. Saiu no mesmo dia,
junto com o noindex: com a pagina no ar, aquilo publicaria que um
professor da casa esta em falta com a papelada. Hoje o cartao de quem
nao mandou ficha simplesmente NAO tem paragrafo - fica o branco, e o
grid iguala a altura com os irmaos da linha.
Se a vontade de marcar pendencia voltar, ela e de bastidor: nao vive
numa pagina publica. */
/* ====================================================
ESTADO VAZIO
A lista de professores ainda nao existe. Este painel ocupa o lugar da
.dc-grid enquanto nao chegam nome, disciplina e minicurriculo de cada
um. Existe porque secao com titulo e nada embaixo le como bug, nao
como "ainda nao temos".
Borda tracejada de proposito: e a diferenca visual entre "espaco
reservado" e o cartao solido do professor. Sai inteiro quando a lista
entrar - junto com a faixa .dc-banner e o meta robots.
==================================================== */
.dc-page main .dc-vazio {
background: var(--branco);
border: 1px dashed rgba(20,60,140,0.3);
border-radius: 18px;
padding: clamp(1.75rem, 4vw, 2.75rem);
max-width: 62ch;
}
.dc-page main .dc-vazio p {
font-size: 0.95rem;
line-height: 1.7;
color: var(--texto-muted);
margin: 0;
text-align: left;
}
.dc-page main .dc-vazio .dc-vazio-titulo {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 2vw, 1.32rem);
font-weight: 600;
line-height: 1.35;
color: var(--tinta-profunda);
margin-bottom: 0.7rem;
}
.dc-page main .dc-vazio .btn { margin-top: 1.6rem; }
/* ====================================================
SUPERFICIES ESCURAS - LISTA UNICA
Todo texto que vive sobre fundo escuro mora aqui, sempre com
`.dc-page main` na frente. Bloco escuro novo que nao passe por esta
lista NASCE INVISIVEL: na v1 isso aconteceu tres vezes seguidas.
==================================================== */
.dc-page main .dc-grupo-executive {
background: var(--tinta-profunda);
color: var(--branco);
}
.dc-page main .dc-grupo-executive .kicker { color: var(--azul-manha); }
.dc-page main .dc-grupo-executive h2,
.dc-page main .dc-grupo-executive h3 { color: var(--branco); }
.dc-page main .dc-grupo-executive h2 em { color: var(--azul-manha); }
.dc-page main .dc-grupo-executive .dc-grupo-head p,
.dc-page main .dc-grupo-executive .dc-mini { color: var(--texto-claro); }
.dc-page main .dc-grupo-executive .dc-cargo { color: var(--azul-manha); }
/* Cartao no escuro: painel translucido com borda clara, o equivalente
do branco sobre areia do lado claro. */
.dc-page main .dc-grupo-executive .dc-docente,
.dc-page main .dc-grupo-executive .dc-retrato {
background:
radial-gradient(118% 88% at 50% 8%, var(--dc-moldura-topo-escura) 0%, var(--dc-moldura-meio-escura) 52%, var(--dc-moldura-base-escura) 100%);
box-shadow: inset 0 0 0 1px rgba(190,210,240,0.14);
color: var(--azul-manha);
}
/* O estado vazio tambem aparece na secao escura, entao passa por aqui -
se ficasse so com a regra clara, o painel nasceria branco no fundo
tinta-profunda e o texto sumiria. E exatamente o caso que o cabecalho
deste bloco descreve. */
.dc-page main .dc-grupo-executive .dc-vazio {
background:
radial-gradient(118% 88% at 50% 8%, var(--dc-moldura-topo-escura) 0%, var(--dc-moldura-meio-escura) 52%, var(--dc-moldura-base-escura) 100%);
border-color: rgba(190,210,240,0.3);
}
.dc-page main .dc-grupo-executive .dc-vazio p { color: var(--texto-claro); }
.dc-page main .dc-grupo-executive .dc-vazio .dc-vazio-titulo { color: var(--branco); }
/* ====================================================
CHAMADA FINAL
Copiada da home, como o graduacao.css ja faz. O padding acompanha o
--section-py reduzido do base.css, mesma razao registrada la.
==================================================== */
.dc-page main .cta-final {
background: var(--tinta-profunda);
text-align: center;
padding-block: clamp(4.5rem, 8vw, 7rem);
position: relative;
overflow: hidden;
}
.dc-page main .cta-aurora {
position: absolute;
inset: 0;
filter: blur(80px);
pointer-events: none;
}
.dc-page main .cta-aurora i {
position: absolute;
border-radius: 50%;
mix-blend-mode: screen;
}
.dc-page main .cta-aurora i:nth-child(1) {
width: 56vmax; height: 40vmax;
left: -10vmax; bottom: -22vmax;
background: radial-gradient(ellipse at center, #143C8C 0%, transparent 60%);
}
.dc-page main .cta-aurora i:nth-child(2) {
width: 48vmax; height: 36vmax;
right: -12vmax; bottom: -18vmax;
background: radial-gradient(ellipse at center, #2878AA 0%, transparent 60%);
opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) {
.dc-page main .cta-aurora i:nth-child(1) { animation: auroraDrift1 18s ease-in-out infinite alternate; }
.dc-page main .cta-aurora i:nth-child(2) { animation: auroraDrift2 22s ease-in-out infinite alternate; }
}
.dc-page main .cta-final .container { position: relative; z-index: 1; }
.dc-page main .cta-final .kicker { color: var(--azul-manha); justify-content: center; }
.dc-page main .cta-final .kicker::after {
content: '';
display: block;
width: 28px; height: 1px;
background: currentColor;
opacity: 0.6;
}
.dc-page main .cta-final h2 {
color: var(--branco);
font-size: clamp(2.2rem, 5.5vw, 4.2rem);
max-width: 26ch;
margin-inline: auto;
margin-bottom: 1.25rem;
line-height: 1.15;
text-align: center !important;
}
.dc-page main .cta-final h2 em {
font-style: italic;
color: #BED2F0;
}
.dc-page main .cta-final p {
color: rgba(255,255,255,0.72);
max-width: 46ch;
margin-inline: auto;
margin-bottom: 2.75rem;
}
.dc-page main .cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ====================================================
@MEDIA - SEMPRE NO FINAL
O grid de docentes nao aparece aqui de proposito: o auto-fit ja
resolve as tres larguras sozinho.
==================================================== */
@media (max-width: 900px) {
}
@media (max-width: 768px) {
.dc-page main .page-hero { padding-block: 8.5rem 3rem; }
.dc-page main .page-hero h1 { max-width: none; }
.dc-page main .page-hero-actions { flex-direction: column; align-items: stretch; }
.dc-page main .page-hero-actions .btn { justify-content: center; }
}