Projetos e clínica jurídica — NUPESIC | UFF
/* Só no preview: simula o reset básico de um tema WordPress limpo. */
html{ -webkit-text-size-adjust: 100%; }
body{ margin: 0; background: #F6F4EF; }
img{ max-width: 100%; height: auto; }
<!-- =========================================================
NUPESIC — 00 / TOKENS E FONTES
Colar UMA vez por página, antes de todos os outros blocos.
Ideal: Elementor > Configurações do site > Código personalizado (header)
Alternativa: primeiro widget HTML da página.
========================================================= -->
:root{
/* ---- Paleta institucional ---- */
--nps-papel: #F6F4EF;
--nps-papel-alt: #EFEBE3;
--nps-tinta: #16181A;
--nps-tinta-70: #4A4E52;
--nps-tinta-40: #8A8F94;
--nps-hairline: #D8D2C7;
--nps-petroleo: #123B4A;
--nps-petroleo-d: #0C2A34;
--nps-terracota: #B85333;
/* ---- Derivados de acessibilidade (não substituem a paleta, complementam) ----
#B85333 sobre #F6F4EF = 4.42:1, abaixo do AA para texto pequeno.
Por isso: terracota original permanece em marcadores, réguas e texto grande;
links e textos pequenos usam a versão escurecida.
Os valores abaixo passam em AA no tom de seção mais fechado (#D9E0E0),
não só sobre o papel. */
--nps-terracota-txt: #9E4327; /* 5.8:1 sobre papel, 4.8:1 no tom mais fechado */
--nps-terracota-inv: #E08D70; /* 4.7:1 sobre petróleo, 5.9:1 sobre petróleo escuro */
--nps-meta: #5E6367; /* 5.5:1 sobre papel, 4.5:1 no tom mais fechado */
--nps-meta-inv: #9FB3BB; /* 5.5:1 sobre petróleo, 6.9:1 sobre petróleo escuro */
--nps-hairline-inv: #24505E;
/* Régua que funciona sobre qualquer tom de seção, porque é alfa e não cor fixa.
A #D8D2C7 do briefing some nos tons mais fechados. */
--nps-regua: rgba(22, 24, 26, 0.14);
--nps-regua-forte: rgba(22, 24, 26, 0.26);
/* ---- Tons de seção ----
Cada seção da home tem o seu tom. É o que separa uma da outra: não há mais
régua nem faixa entre elas. A progressão vai do papel quente ao petróleo,
volta a aquecer no contato e fecha no petróleo escuro do rodapé. */
--nps-tom-hero: #F6F4EF;
--nps-tom-manifesto: #EFEBE3;
--nps-tom-frentes: #EAE7DF;
--nps-tom-producoes: #E2E6E4;
--nps-tom-agenda: #D9E0E0;
--nps-tom-convencao: #123B4A;
--nps-tom-contato: #F0E7E1;
--nps-tom-rodape: #0C2A34;
/* ---- Vidro do cabeçalho ----
Para voltar ao cabeçalho opaco do briefing original, troque --nps-vidro por
var(--nps-papel) e apague o backdrop-filter em site-01-header.html. */
--nps-vidro: rgba(12, 42, 52, 0.86);
--nps-vidro-opaco: rgba(12, 42, 52, 0.97);
--nps-vidro-borda: rgba(246, 244, 239, 0.14);
--nps-vidro-txt: #EDF1F2;
--nps-vidro-txt-2: #CBD6DA;
/* ---- Tipografia ---- */
--nps-serif: "Newsreader", Georgia, "Times New Roman", serif;
--nps-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
/* ---- Ritmo ---- */
--nps-max: 1240px;
--nps-gutter: 24px;
/* padding vertical de cada seção; entre duas seções o resultado é o dobro:
96px no mobile e 160px no desktop, como pede a direção de arte. */
--nps-secao: 48px;
--nps-radius: 2px;
/* ---- Movimento ---- */
--nps-ease: cubic-bezier(0.16, 1, 0.3, 1);
--nps-dur: 700ms;
/* ---- Sombras: existem exatamente duas ---- */
--nps-sombra-1: 0 1px 0 rgba(22,24,26,0.04);
--nps-sombra-2: 0 2px 12px rgba(22,24,26,0.06);
/* O cabeçalho é fixo: âncoras precisam parar abaixo dele. */
scroll-padding-top: 96px;
}
@media (min-width: 768px){
:root{ --nps-gutter: 32px; --nps-secao: 80px; }
}
/* Reset mínimo — aplicado somente a elementos do namespace nps- */
[class^="nps-"], [class*=" nps-"],
[class^="nps-"] *, [class*=" nps-"] *{
box-sizing: border-box;
}
/* Foco visível padrão do site */
[class^="nps-"] :focus-visible,
[class*=" nps-"] :focus-visible{
outline: 2px solid var(--nps-terracota-txt);
outline-offset: 3px;
border-radius: 1px;
}
/* Impressão: o conteúdo entra sempre em estado final.
Usa !important porque precisa vencer o estado inicial de cada bloco,
que tem especificidade maior (.nps-bloco.nps-js [data-nps-reveal]). */
@media print{
[data-nps-reveal], [data-nps-fade], [data-nps-regua], [data-nps-clip],
[data-nps-eixo], [data-nps-mascara], .nps-hero__int,
[data-nps-clip] > span{
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
.nps-hero__malha > *, .nps-hero__pontos{ opacity: 1 !important; }
.nps-hero__rota{ stroke-dashoffset: 0 !important; }
}
/* Acessibilidade do movimento — obrigatório */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: 0.01ms !important; /* precisa vencer transições do tema */
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
<!-- =========================================================
NUPESIC — HEADER (todas as páginas)
Fixo no topo. Transparente sobre o hero, ganha fundo papel após 80px.
Some ao rolar para baixo, volta ao rolar para cima.
Requer: 00-tokens-e-fontes.html
========================================================= -->
<!-- Barra de progresso de leitura: fica fora do
de propósito,
senão sumiria junto com ele ao rolar a página para baixo. -->
.nps-hd{
position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
font-family: var(--nps-sans, Inter, sans-serif);
background: transparent;
border-bottom: 1px solid transparent;
transition: background-color 320ms var(--nps-ease),
border-color 320ms var(--nps-ease), box-shadow 320ms var(--nps-ease);
}
/* Estado rolado: vidro azul escuro. O backdrop-filter contraria o briefing
original, que proibia glassmorphism; foi pedido depois, em revisão.
Para reverter: troque var(--nps-vidro) por var(--nps-papel), apague as duas
linhas de backdrop-filter e remova o bloco .nps-hd.is-solido de cores claras. */
.nps-hd.is-solido,
.nps-hd.is-menu{
background: var(--nps-vidro);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
border-bottom-color: var(--nps-vidro-borda);
box-shadow: var(--nps-sombra-1);
}
/* Sem suporte a backdrop-filter, o fundo fica quase opaco para não perder contraste. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
.nps-hd.is-solido,
.nps-hd.is-menu{ background: var(--nps-vidro-opaco); }
}
/* Texto claro sobre o vidro. Contraste no pior caso (vidro sobre a seção mais
clara do site): sigla 9.1:1, links 7.7:1, vínculo 6.8:1. */
.nps-hd.is-solido .nps-hd__sigla,
.nps-hd.is-menu .nps-hd__sigla{ color: var(--nps-vidro-txt); }
.nps-hd.is-solido .nps-hd__vinculo,
.nps-hd.is-menu .nps-hd__vinculo{ color: var(--nps-vidro-txt-2); }
.nps-hd.is-solido .nps-hd__lista a,
.nps-hd.is-menu .nps-hd__lista a{ color: #DDE3E5; }
.nps-hd.is-solido .nps-hd__lista a:hover,
.nps-hd.is-solido .nps-hd__lista a:focus-visible,
.nps-hd.is-solido .nps-hd__lista a[aria-current="page"]{ color: var(--nps-vidro-txt); }
.nps-hd.is-solido .nps-hd__lista a,
.nps-hd.is-menu .nps-hd__lista a{
background-image: linear-gradient(var(--nps-terracota-inv), var(--nps-terracota-inv));
}
.nps-hd.is-solido .nps-hd__btn,
.nps-hd.is-menu .nps-hd__btn{ color: var(--nps-vidro-txt); }
.nps-hd.is-solido :focus-visible,
.nps-hd.is-menu :focus-visible{ outline-color: var(--nps-terracota-inv); }
.nps-hd__progresso{
position: fixed; top: 0; left: 0; right: 0; height: 2px;
z-index: 9989; pointer-events: none;
}
.nps-hd__barra{
display: block; height: 100%; width: 100%;
background: var(--nps-terracota);
transform: scaleX(0); transform-origin: left;
}
.nps-hd__skip{
position: absolute; left: 12px; top: -60px;
background: var(--nps-papel); color: var(--nps-tinta);
padding: 10px 14px; font-size: 0.875rem; text-decoration: none;
border: 1px solid var(--nps-hairline); transition: top 200ms;
}
.nps-hd__skip:focus{ top: 12px; }
.nps-hd__wrap{
max-width: var(--nps-max); margin: 0 auto;
padding: 16px var(--nps-gutter);
display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
}
.nps-hd__marca{ text-decoration: none; display: block; line-height: 1.1; }
.nps-hd__sigla{
display: block; font-family: var(--nps-serif); font-weight: 500;
font-size: 1.25rem; letter-spacing: 0.02em; color: var(--nps-tinta);
}
.nps-hd__vinculo{
display: block; margin-top: 3px;
font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.1em;
font-weight: 500; color: var(--nps-meta); white-space: nowrap;
}
@media (min-width: 420px){
.nps-hd__vinculo{ font-size: 0.625rem; letter-spacing: 0.12em; }
}
.nps-hd__nav{ display: none; }
.nps-hd__lista{ list-style: none; margin: -11px 0; padding: 0; display: flex; align-items: center; gap: 28px; }
.nps-hd__lista a{
color: var(--nps-tinta-70); text-decoration: none;
font-size: 0.9375rem;
display: inline-block; padding: 11px 0; min-height: 44px; /* alvo de clique */
background-image: linear-gradient(var(--nps-terracota-txt), var(--nps-terracota-txt));
background-repeat: no-repeat; background-position: 0 calc(100% - 9px); background-size: 0 1px;
transition: background-size 280ms var(--nps-ease), color 280ms var(--nps-ease);
}
.nps-hd__lista a:hover, .nps-hd__lista a:focus-visible{
color: var(--nps-tinta); background-size: 100% 1px;
}
.nps-hd__lista a[aria-current="page"]{ color: var(--nps-tinta); background-size: 100% 1px; }
.nps-hd__btn{
-webkit-appearance: none; appearance: none;
background: none; border: 0; padding: 8px 0 8px 12px; margin: 0;
min-height: 44px; cursor: pointer; color: var(--nps-tinta);
display: inline-flex; align-items: center; gap: 10px; font: inherit;
}
.nps-hd__btn-txt{
font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500;
}
.nps-hd__traco line{ transition: transform 320ms var(--nps-ease); transform-origin: 50% 50%; }
.nps-hd__btn[aria-expanded="true"] .nps-hd__l1{ transform: translateY(3px) rotate(19deg); }
.nps-hd__btn[aria-expanded="true"] .nps-hd__l2{ transform: translateY(-3px) rotate(-19deg); }
.nps-hd__painel{
background: var(--nps-vidro-opaco);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
border-top: 1px solid var(--nps-vidro-borda);
padding: 8px var(--nps-gutter) 40px;
max-height: calc(100vh - 72px); overflow-y: auto;
}
.nps-hd__painel[hidden]{ display: none; }
.nps-hd__painel-lista{ list-style: none; margin: 0; padding: 0; }
.nps-hd__painel-lista li{
display: flex; align-items: baseline; gap: 16px;
border-bottom: 1px solid var(--nps-vidro-borda);
}
.nps-hd.is-menu .nps-hd__painel-lista li{ overflow: hidden; }
.nps-hd__painel-lista li a{ will-change: transform; }
/* Os itens do menu sobem escalonados quando o painel abre. */
.nps-hd.is-menu .nps-hd__painel-lista li:nth-child(1) a{ animation: nps-hd-sobe 520ms var(--nps-ease) 40ms both; }
.nps-hd.is-menu .nps-hd__painel-lista li:nth-child(2) a{ animation: nps-hd-sobe 520ms var(--nps-ease) 90ms both; }
.nps-hd.is-menu .nps-hd__painel-lista li:nth-child(3) a{ animation: nps-hd-sobe 520ms var(--nps-ease) 140ms both; }
.nps-hd.is-menu .nps-hd__painel-lista li:nth-child(4) a{ animation: nps-hd-sobe 520ms var(--nps-ease) 190ms both; }
.nps-hd.is-menu .nps-hd__painel-lista li:nth-child(5) a{ animation: nps-hd-sobe 520ms var(--nps-ease) 240ms both; }
@keyframes nps-hd-sobe{ from{ transform: translateY(100%); } to{ transform: none; } }
.nps-hd__num{
font-size: 0.6875rem; letter-spacing: 0.12em; font-weight: 500; color: var(--nps-meta-inv);
}
.nps-hd__painel-lista a{
flex: 1; display: block; padding: 16px 0;
font-family: var(--nps-serif); font-size: 1.625rem; font-weight: 400;
color: var(--nps-vidro-txt); text-decoration: none;
}
.nps-hd__painel-pe{ margin: 28px 0 0; font-size: 0.875rem; }
.nps-hd__painel-pe a{
color: var(--nps-terracota-inv); text-decoration: none;
display: inline-block; padding: 12px 0; min-height: 44px;
border-bottom: 1px solid currentColor;
}
@media (min-width: 900px){
.nps-hd__nav{ display: block; }
.nps-hd__btn{ display: none; }
.nps-hd__painel{ display: none; }
.nps-hd__wrap{ padding-top: 22px; padding-bottom: 22px; }
}
(function(){
function montar(hd){
if (hd.getAttribute('data-nps-pronto') === '1') return;
hd.setAttribute('data-nps-pronto', '1');
var btn = hd.querySelector('[data-nps-hd-btn]');
var painel = hd.querySelector('[data-nps-hd-painel]');
if (btn && painel){
btn.addEventListener('click', function(){
var aberto = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
painel.hidden = aberto;
hd.classList.toggle('is-menu', !aberto);
});
painel.addEventListener('click', function(e){
if (e.target && e.target.tagName === 'A'){
btn.setAttribute('aria-expanded', 'false');
painel.hidden = true;
hd.classList.remove('is-menu');
}
});
document.addEventListener('keydown', function(e){
if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true'){
btn.setAttribute('aria-expanded', 'false');
painel.hidden = true;
hd.classList.remove('is-menu');
btn.focus();
}
});
}
// Marca sozinho o link da página atual, comparando o caminho da URL.
function semBarra(caminho){
var c = caminho || '/';
while (c.length > 1 && c.charAt(c.length - 1) === '/') c = c.slice(0, -1);
return c || '/';
}
var atual = semBarra(window.location.pathname);
var links = hd.querySelectorAll('.nps-hd__lista a, .nps-hd__painel-lista a');
for (var n = 0; n < links.length; n++){
var destino = semBarra(links[n].getAttribute('href') || '');
if (destino !== '/' && (atual === destino || atual.indexOf(destino + '/') === 0)){
links[n].setAttribute('aria-current', 'page');
} else {
links[n].removeAttribute('aria-current');
}
}
var barra = (hd.parentNode && hd.parentNode.querySelector('[data-nps-barra]')) || document.querySelector('[data-nps-barra]');
var tick = false;
function atualizar(){
var y = window.pageYOffset || document.documentElement.scrollTop || 0;
if (y > 80) hd.classList.add('is-solido'); else hd.classList.remove('is-solido');
if (barra){
var alcance = (document.documentElement.scrollHeight - window.innerHeight);
var razao = alcance > 0 ? Math.max(0, Math.min(1, y / alcance)) : 0;
barra.style.transform = 'scaleX(' + razao.toFixed(4) + ')';
}
tick = false;
}
window.addEventListener('scroll', function(){
if (!tick){ tick = true; window.requestAnimationFrame(atualizar); }
}, { passive: true });
atualizar();
}
function init(){
var todos = document.querySelectorAll('.nps-hd');
for (var i = 0; i < todos.length; i++) montar(todos[i]);
}
if (window.npsInit_hd){ init(); return; }
window.npsInit_hd = init;
if (document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
// Elementor recarrega o widget no editor
if (window.jQuery && window.elementorFrontend){
window.jQuery(window).on('elementor/frontend/init', init);
}
document.addEventListener('elementor/popup/show', init);
})();
<!-- =========================================================
NUPESIC — PROJETOS / CABEÇALHO DA PÁGINA
Requer: 00-tokens-e-fontes.html
========================================================= -->
03
Projetos
Pesquisa, extensão
e clínica em andamento
O que o núcleo está investigando agora, o que já concluiu e como a clínica jurídica funciona. Cada projeto traz período, situação e equipe envolvida.
.nps-ph{
position: relative;
background: var(--nps-tom-hero);
color: var(--nps-tinta);
font-family: var(--nps-sans, Inter, sans-serif);
padding-top: clamp(116px, 17vh, 176px);
padding-bottom: clamp(40px, 6vw, 72px);
overflow: hidden;
}
.nps-ph__wrap{ max-width: var(--nps-max); margin: 0 auto; padding: 0 var(--nps-gutter); }
.nps-ph__folha{
margin: 0 0 clamp(24px, 4vw, 40px);
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta);
}
.nps-ph__folha-num{ color: var(--nps-terracota-txt); }
.nps-ph__folha-regua{ flex: 1 1 60px; min-width: 40px; height: 1px; background: var(--nps-regua); }
.nps-ph__titulo{
margin: 0;
font-family: var(--nps-serif); font-weight: 400; font-optical-sizing: auto;
font-size: clamp(2.375rem, 6vw, 4.25rem);
line-height: 1.05; letter-spacing: -0.02em; color: var(--nps-tinta);
}
.nps-ph__linha{ display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.nps-ph__int{ display: block; }
.nps-ph.nps-js .nps-ph__int{ transform: translateY(105%); }
.nps-ph.nps-js .nps-ph__linha.is-in .nps-ph__int{
transform: none; transition: transform 900ms var(--nps-ease);
}
.nps-ph__contexto{
margin: clamp(28px, 4vw, 40px) 0 0; max-width: 58ch;
font-size: 1.0625rem; line-height: 1.7; color: var(--nps-tinta-70);
font-feature-settings: "ss01", "cv05";
}
.nps-ph__rodape{ margin-top: clamp(36px, 5vw, 64px); }
.nps-ph__regua{ border: 0; height: 1px; background: var(--nps-regua); margin: 0 0 16px; }
.nps-ph__meta{
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px 32px;
font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta); line-height: 1.8;
}
.nps-ph.nps-js [data-nps-fade]{ opacity: 0; transform: translateY(20px); }
.nps-ph.nps-js [data-nps-fade].is-in{
opacity: 1; transform: none;
transition: opacity var(--nps-dur) var(--nps-ease), transform var(--nps-dur) var(--nps-ease);
}
.nps-ph.nps-js [data-nps-regua]{ transform: scaleX(0); transform-origin: left; }
.nps-ph.nps-js [data-nps-regua].is-in{
transform: scaleX(1); transition: transform 900ms var(--nps-ease);
}
@media (min-width: 768px){
.nps-ph__contexto{ font-size: 1.125rem; }
}
@media (min-width: 1024px){
.nps-ph__contexto{ max-width: 52ch; margin-left: 8.5%; }
.nps-ph__meta{ gap: 8px 48px; }
}
(function(){
function montar(raiz){
if (raiz.getAttribute('data-nps-pronto') === '1') return;
raiz.setAttribute('data-nps-pronto', '1');
raiz.classList.add('nps-js');
var linhas = raiz.querySelectorAll('.nps-ph__linha');
var entradas = raiz.querySelectorAll('[data-nps-fade], [data-nps-regua]');
var reduzir = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var i;
function tudoVisivel(){
for (i = 0; i < linhas.length; i++) linhas[i].classList.add('is-in');
for (i = 0; i < entradas.length; i++) entradas[i].classList.add('is-in');
}
if (reduzir){ tudoVisivel(); return; }
for (i = 0; i < linhas.length; i++){
linhas[i].querySelector('.nps-ph__int').style.transitionDelay = (i * 90) + 'ms';
}
void raiz.offsetHeight;
for (i = 0; i < linhas.length; i++) linhas[i].classList.add('is-in');
if (!('IntersectionObserver' in window)){ tudoVisivel(); return; }
var io = new IntersectionObserver(function(lista){
lista.forEach(function(e){
if (!e.isIntersecting) return;
e.target.classList.add('is-in');
io.unobserve(e.target);
});
}, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
for (i = 0; i < entradas.length; i++){
entradas[i].style.transitionDelay = (260 + i * 70) + 'ms';
io.observe(entradas[i]);
}
window.setTimeout(function(){
if (document.visibilityState !== 'visible' && !raiz.querySelector('[data-nps-fade].is-in')){
tudoVisivel();
}
}, 2500);
}
function init(){
var todos = document.querySelectorAll('.nps-ph');
for (var i = 0; i < todos.length; i++) montar(todos[i]);
}
if (window.npsInit_ph){ init(); return; }
window.npsInit_ph = init;
if (document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
if (window.jQuery && window.elementorFrontend){
window.jQuery(window).on('elementor/frontend/init', init);
}
})();
<!-- =========================================================
NUPESIC — PROJETOS / LISTA
Requer: 00-tokens-e-fontes.html
CONFIRMAR: projetos, períodos, situação e equipe. São exemplos de estrutura.
========================================================= -->
01 / Em andamento
O que estamos investigando
-
Em andamento
2024 — 2026
Dimensões sociojurídicas da subtração internacional de crianças
Pesquisa de base do núcleo. Levanta e analisa decisões brasileiras em
processos de retorno, com atenção a como os tribunais tratam residência
habitual, consentimento e as exceções previstas na Convenção de 1980.
- Natureza
- Pesquisa
- Equipe
- Coordenação, pesquisadoras e discentes de graduação
-
Em andamento
2025 — 2026
Mães da Haia: escuta, rede e itinerários
Projeto de extensão construído junto com mulheres que atravessaram
processos de subtração internacional. Reúne relatos, organiza materiais de
orientação em linguagem acessível e aproxima o núcleo das redes de apoio
já existentes.
- Natureza
- Extensão
- Equipe
- A confirmar
-
Concluído
2024
Levantamento inicial de decisões e literatura
Primeiro trabalho do núcleo: mapear o que já havia sido produzido no Brasil
sobre o tema e identificar as lacunas que justificariam uma agenda própria
de pesquisa.
- Natureza
- Pesquisa
- Resultado
- Base do primeiro relatório do núcleo
.nps-pj{
position: relative;
background: var(--nps-tom-frentes);
color: var(--nps-tinta);
font-family: var(--nps-sans, Inter, sans-serif);
padding-block: var(--nps-secao);
}
.nps-pj__wrap{ max-width: var(--nps-max); margin: 0 auto; padding: 0 var(--nps-gutter); }
.nps-pj__cab{
display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px;
margin-bottom: clamp(32px, 5vw, 52px);
}
.nps-pj__rotulo{
margin: 0; font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta);
}
.nps-pj__acento{ color: var(--nps-terracota-txt); }
.nps-pj__tit{
margin: 0; font-family: var(--nps-serif); font-weight: 400; font-optical-sizing: auto;
font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15;
letter-spacing: -0.018em; color: var(--nps-petroleo);
}
.nps-pj__lista{
list-style: none; margin: 0; padding: 0;
border-top: 1px solid var(--nps-regua);
}
.nps-pj__item{
border-bottom: 1px solid var(--nps-regua);
padding: 28px 0; display: grid; grid-template-columns: 1fr; gap: 16px;
}
.nps-pj__estado{ margin: 0; display: grid; gap: 10px; justify-items: start; }
.nps-pj__selo{
font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta);
border: 1px solid var(--nps-regua-forte); border-radius: var(--nps-radius);
padding: 6px 10px;
}
.nps-pj__selo--ativo{
color: var(--nps-tom-hero); background: var(--nps-petroleo); border-color: var(--nps-petroleo);
}
.nps-pj__periodo{
font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta);
}
.nps-pj__nome{
margin: 0; font-family: var(--nps-serif); font-weight: 400; font-optical-sizing: auto;
font-size: clamp(1.375rem, 3vw, 1.875rem); line-height: 1.22;
letter-spacing: -0.014em; color: var(--nps-tinta); max-width: 30ch;
}
.nps-pj__resumo{
margin: 14px 0 0; font-size: 0.9375rem; line-height: 1.7;
color: var(--nps-tinta-70); max-width: 60ch;
}
.nps-pj__dados{
margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
font-size: 0.8125rem; line-height: 1.5;
}
.nps-pj__dados dt{
font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta);
padding-top: 2px;
}
.nps-pj__dados dd{ margin: 0; color: var(--nps-tinta-70); }
.nps-pj.nps-js [data-nps-reveal]{ opacity: 0; transform: translateY(20px); }
.nps-pj.nps-js [data-nps-reveal].is-in{
opacity: 1; transform: none;
transition: opacity var(--nps-dur) var(--nps-ease), transform var(--nps-dur) var(--nps-ease);
}
.nps-pj__tit{ overflow: hidden; padding-bottom: 0.08em; }
.nps-pj__tit-int{ display: block; }
.nps-pj.nps-js [data-nps-clip] > span{ transform: translateY(105%); }
.nps-pj.nps-js [data-nps-clip].is-in > span{
transform: none; transition: transform 900ms var(--nps-ease);
}
@media (min-width: 1024px){
.nps-pj__item{ grid-template-columns: 3fr 9fr; gap: 32px; padding: 40px 0; }
.nps-pj__estado{ gap: 14px; }
}
(function(){
function montar(raiz){
if (raiz.getAttribute('data-nps-pronto') === '1') return;
raiz.setAttribute('data-nps-pronto', '1');
raiz.classList.add('nps-js');
var els = raiz.querySelectorAll('[data-nps-reveal], [data-nps-clip]');
var reduzir = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var i;
if (reduzir || !('IntersectionObserver' in window)){
for (i = 0; i < els.length; i++) els[i].classList.add('is-in');
return;
}
var io = new IntersectionObserver(function(entradas){
entradas.forEach(function(e){
if (!e.isIntersecting) return;
e.target.classList.add('is-in');
io.unobserve(e.target);
});
}, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
for (i = 0; i < els.length; i++){
els[i].style.transitionDelay = '0ms';
io.observe(els[i]);
}
window.setTimeout(function(){
if (document.visibilityState !== 'visible' && !raiz.querySelector('[data-nps-reveal].is-in')){
for (var k = 0; k < els.length; k++) els[k].classList.add('is-in');
}
}, 2500);
}
function init(){
var todos = document.querySelectorAll('.nps-pj');
for (var i = 0; i < todos.length; i++) montar(todos[i]);
}
if (window.npsInit_pj){ init(); return; }
window.npsInit_pj = init;
if (document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
if (window.jQuery && window.elementorFrontend){
window.jQuery(window).on('elementor/frontend/init', init);
}
})();
<!-- =========================================================
NUPESIC — PROJETOS / CLÍNICA JURÍDICA (seção invertida, borda diagonal)
Requer: 00-tokens-e-fontes.html
CONFIRMAR: formato, público atendido, critérios de entrada e periodicidade.
========================================================= -->
02 / Clínica jurídica
Onde a pesquisa encontra o caso concreto
A clínica jurídica é o espaço em que discentes estudam casos reais de
subtração internacional, sob orientação docente. Não é um escritório: é uma
atividade de formação, em que cada caso é lido também como material de
pesquisa.
O trabalho é conjunto. Estudantes reconstroem o percurso do processo,
identificam os pontos em que o procedimento e a realidade se afastam e
preparam material que volta para o núcleo — e, quando cabe, para as redes que
acompanham aquelas famílias.
-
01
Estudo do caso
Leitura dos autos e reconstrução do percurso, do deslocamento à decisão.
-
02
Discussão coletiva
Encontros com docentes e pesquisadoras para confrontar o caso com a
literatura e com outros casos já analisados.
-
03
Devolutiva
Produção de material — parecer, nota técnica ou orientação em linguagem
acessível — que volta para quem precisa dele.
A clínica é uma atividade acadêmica de formação e não substitui advogado,
Defensoria Pública ou a Autoridade Central. Se você está em um processo,
escreva para o núcleo — lemos cada
mensagem e indicamos, com cuidado, os caminhos possíveis.
/* Mesma borda diagonal da seção da Convenção, na home: é a assinatura das
seções escuras. No Elementor, o container não pode ter overflow oculto. */
.nps-cl{
--nps-corte: clamp(24px, 3.4vw, 56px);
position: relative;
background: var(--nps-tom-convencao);
color: var(--nps-papel);
font-family: var(--nps-sans, Inter, sans-serif);
padding-block: var(--nps-secao);
padding-top: calc(var(--nps-secao) + var(--nps-corte));
margin-top: calc(var(--nps-corte) * -1);
clip-path: polygon(0 var(--nps-corte), 100% 0, 100% 100%, 0 100%);
}
.nps-cl__wrap{
max-width: var(--nps-max); margin: 0 auto; padding: 0 var(--nps-gutter);
display: grid; grid-template-columns: 1fr; gap: 32px;
}
.nps-cl__rotulo{
margin: 0; font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta-inv);
}
.nps-cl__acento{ color: var(--nps-terracota-inv); }
.nps-cl__tit{
margin: 0; font-family: var(--nps-serif); font-weight: 400; font-optical-sizing: auto;
font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.16;
letter-spacing: -0.018em; color: var(--nps-papel); max-width: 20ch;
overflow: hidden; padding-bottom: 0.08em;
}
.nps-cl__tit-int{ display: block; }
.nps-cl__texto p{
margin: 0 0 1.1em; font-size: 1.0625rem; line-height: 1.7;
color: #D7DDE0; max-width: 56ch;
font-feature-settings: "ss01", "cv05";
}
.nps-cl__texto p:last-child{ margin-bottom: 0; }
.nps-cl__etapas{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr; gap: 0;
}
.nps-cl__etapa{ border-top: 1px solid var(--nps-hairline-inv); padding: 20px 0 24px; }
.nps-cl__num{
display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: 12px;
font-family: var(--nps-serif); font-weight: 400; font-optical-sizing: auto;
font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1; color: var(--nps-terracota-inv);
}
.nps-cl__num-int{ display: block; }
.nps-cl__etapa-tit{
margin: 0 0 8px; font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
color: var(--nps-papel);
}
.nps-cl__etapa-txt{
margin: 0; font-size: 0.9375rem; line-height: 1.65; color: #C6CFD3; max-width: 34ch;
}
.nps-cl__aviso{
margin: 0; padding-top: 20px; border-top: 1px solid var(--nps-hairline-inv);
font-size: 0.9375rem; line-height: 1.75; color: #C6CFD3; max-width: 62ch;
}
.nps-cl__link{ color: var(--nps-terracota-inv); text-decoration: none; border-bottom: 1px solid currentColor; }
.nps-cl.nps-js [data-nps-reveal]{ opacity: 0; transform: translateY(20px); }
.nps-cl.nps-js [data-nps-reveal].is-in{
opacity: 1; transform: none;
transition: opacity var(--nps-dur) var(--nps-ease), transform var(--nps-dur) var(--nps-ease);
}
.nps-cl.nps-js [data-nps-clip] > span,
.nps-cl.nps-js .nps-cl__num-int{ transform: translateY(105%); }
.nps-cl.nps-js [data-nps-clip].is-in > span{
transform: none; transition: transform 900ms var(--nps-ease);
}
.nps-cl.nps-js .nps-cl__etapa.is-in .nps-cl__num-int{
transform: none; transition: transform 900ms var(--nps-ease) 140ms;
}
.nps-cl.nps-js .nps-cl__etapa{ border-top-color: transparent; }
.nps-cl.nps-js .nps-cl__etapa.is-in{
border-top-color: var(--nps-hairline-inv);
transition: opacity var(--nps-dur) var(--nps-ease), transform var(--nps-dur) var(--nps-ease),
border-color 900ms var(--nps-ease);
}
@media (min-width: 768px){
.nps-cl__texto p{ font-size: 1.125rem; }
}
@media (min-width: 1024px){
.nps-cl__wrap{ grid-template-columns: repeat(12, 1fr); gap: 32px; }
.nps-cl__rotulo{ grid-column: 1 / span 2; grid-row: 1; padding-top: 0.7em; }
.nps-cl__tit{ grid-column: 3 / span 6; grid-row: 1; }
.nps-cl__texto{ grid-column: 3 / span 5; grid-row: 2; }
.nps-cl__etapas{
grid-column: 1 / -1; grid-row: 3;
grid-template-columns: repeat(3, 1fr); gap: 32px;
margin-top: clamp(24px, 4vw, 48px);
}
.nps-cl__etapa{ padding: 22px 0 0; }
.nps-cl__aviso{ grid-column: 1 / -1; grid-row: 4; margin-top: clamp(24px, 4vw, 48px); }
}
(function(){
function montar(raiz){
if (raiz.getAttribute('data-nps-pronto') === '1') return;
raiz.setAttribute('data-nps-pronto', '1');
raiz.classList.add('nps-js');
var els = raiz.querySelectorAll('[data-nps-reveal], [data-nps-clip]');
var reduzir = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var i;
if (reduzir || !('IntersectionObserver' in window)){
for (i = 0; i < els.length; i++) els[i].classList.add('is-in');
return;
}
var io = new IntersectionObserver(function(entradas){
entradas.forEach(function(e){
if (!e.isIntersecting) return;
e.target.classList.add('is-in');
io.unobserve(e.target);
});
}, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
for (i = 0; i < els.length; i++){
var pai = els[i].parentNode, pos = 0, c = 0;
if (pai){
for (var j = 0; j < pai.children.length; j++){
var f = pai.children[j];
if (f.hasAttribute && (f.hasAttribute('data-nps-reveal') || f.hasAttribute('data-nps-clip'))){
if (f === els[i]){ pos = c; break; }
c++;
}
}
}
els[i].style.transitionDelay = (pos * 70) + 'ms';
io.observe(els[i]);
}
window.setTimeout(function(){
if (document.visibilityState !== 'visible' && !raiz.querySelector('[data-nps-reveal].is-in')){
for (var k = 0; k < els.length; k++){ els[k].style.transitionDelay = '0ms'; els[k].classList.add('is-in'); }
}
}, 2500);
}
function init(){
var todos = document.querySelectorAll('.nps-cl');
for (var i = 0; i < todos.length; i++) montar(todos[i]);
}
if (window.npsInit_cl){ init(); return; }
window.npsInit_cl = init;
if (document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
if (window.jQuery && window.elementorFrontend){
window.jQuery(window).on('elementor/frontend/init', init);
}
})();
<!-- =========================================================
NUPESIC — RODAPÉ (todas as páginas)
Requer: 00-tokens-e-fontes.html
========================================================= -->
.nps-ft{
position: relative;
background: var(--nps-tom-rodape);
color: var(--nps-papel);
font-family: var(--nps-sans, Inter, sans-serif);
padding-block: clamp(64px, 9vw, 104px) 32px;
}
.nps-ft__wrap{
max-width: var(--nps-max); margin: 0 auto; padding: 0 var(--nps-gutter);
display: grid; grid-template-columns: 1fr; gap: 40px;
}
.nps-ft__sigla{
margin: 0 0 12px; font-family: var(--nps-serif); font-weight: 500;
font-size: 1.5rem; letter-spacing: 0.02em; color: var(--nps-papel);
}
.nps-ft__nome{
margin: 0 0 10px; font-size: 0.9375rem; line-height: 1.5;
color: #C6CFD3; max-width: 30ch;
}
.nps-ft__vinculo{
margin: 0; font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta-inv);
}
.nps-ft__rotulo{
margin: 0 0 14px; font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta-inv);
}
.nps-ft__lista{ list-style: none; margin: 0; padding: 0; }
.nps-ft__lista li{ margin-bottom: 10px; }
.nps-ft__lista a{
color: #DDE3E5; text-decoration: none; font-size: 0.9375rem;
display: inline-block; padding: 4px 0; min-height: 24px;
background-image: linear-gradient(var(--nps-terracota-inv), var(--nps-terracota-inv));
background-repeat: no-repeat; background-position: 0 calc(100% - 4px); background-size: 0 1px;
transition: background-size 280ms var(--nps-ease), color 280ms var(--nps-ease);
}
.nps-ft__lista a:hover, .nps-ft__lista a:focus-visible{
color: var(--nps-papel); background-size: 100% 1px;
}
.nps-ft__aviso{
margin: 0; padding-top: 20px; border-top: 1px solid var(--nps-hairline-inv);
font-size: 0.8125rem; line-height: 1.65; color: var(--nps-meta-inv); max-width: 60ch;
}
.nps-ft__folio{
margin: 0; padding-top: 20px; border-top: 1px solid var(--nps-hairline-inv);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--nps-meta-inv);
}
@media (min-width: 768px){
.nps-ft__wrap{ grid-template-columns: repeat(12, 1fr); gap: 40px 32px; }
.nps-ft__marca{ grid-column: 1 / span 5; }
.nps-ft__nav{ grid-column: 7 / span 3; }
.nps-ft__canais{ grid-column: 10 / span 3; }
.nps-ft__aviso{ grid-column: 1 / span 5; }
.nps-ft__folio{ grid-column: 1 / -1; margin-top: 24px; }
.nps-ft__folio-mid{ flex: 1; text-align: center; }
}
