/* =====================================================================
III SEPEC — refino.css · VERSÃO DE TESTE
=====================================================================
Camada de micro-acabamento, carregada DEPOIS dos outros CSS.
Não muda cor, tipografia base nem estrutura — só os detalhes de
superfície que costumam entregar "feito por máquina":
· raios de canto iguais em tudo → raio aninhado (interno = externo − padding)
· transition: all .3s ease → propriedades explícitas + curva de mola
· sombra única e borrada → três camadas com a cor do fundo
· letter-spacing zerado → kerning negativo em títulos, positivo em caps
· line-height 1.4 em título → 1.08 a 1.15
· superfície lisa de gradiente → grão sutil a 3%
· borda cinza chapada → bisel interno (luz em cima, sombra embaixo)
Para ligar: uma linha em cada layout, DEPOIS do último
Para desligar: remova a linha. Nada mais precisa ser desfeito.
As cores vêm das variáveis que os layouts já injetam (--p-base etc.).
Onde a variável não existir, cai no navy do projeto.
===================================================================== */
:root {
/* tokens do refino — tudo derivado do que já existe */
--rf-navy: var(--p-base-esc, #14315c);
--rf-acento: var(--p-dest-a, #f26a1b);
--rf-tinta: #14315c; /* cor ambiente das sombras */
/* raios: um sistema, não um número */
--rf-r-caixa: 18px; /* cartões, painéis */
--rf-r-interno: 8px; /* filhos de cartão: 18 − ~10 de padding */
--rf-r-controle: 10px; /* inputs, selects, botões */
--rf-r-pilula: 999px; /* selos, chips */
/* curvas: mola para entrada, saída rápida */
--rf-mola: cubic-bezier(0.16, 1, 0.3, 1);
--rf-saida: cubic-bezier(0.4, 0, 1, 1);
/* sombras em camadas, tingidas com o navy */
--rf-sombra-1:
0 1px 2px rgba(20, 49, 92, .04);
--rf-sombra-2:
0 1px 2px rgba(20, 49, 92, .04),
0 6px 14px -4px rgba(20, 49, 92, .08);
--rf-sombra-3:
0 1px 2px rgba(20, 49, 92, .04),
0 8px 18px -6px rgba(20, 49, 92, .10),
0 24px 48px -16px rgba(20, 49, 92, .14);
/* bisel: luz no topo, sombra na base — substitui borda chapada */
--rf-bisel:
inset 0 1px 0 0 rgba(255, 255, 255, .85),
inset 0 -1px 0 0 rgba(20, 49, 92, .05);
/* grão: quebra a superfície lisa. SVG inline, sem requisição extra */
--rf-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------------
1. TIPOGRAFIA — kerning e altura de linha
--------------------------------------------------------------------- */
h1 {
letter-spacing: -0.028em;
line-height: 1.08;
font-feature-settings: "kern" 1, "liga" 1;
}
h2 {
letter-spacing: -0.02em;
line-height: 1.12;
}
h3 {
letter-spacing: -0.012em;
line-height: 1.18;
}
/* rótulos em caixa alta abrem espaçamento */
.protocolo,
.eyebrow,
.pf-olho,
.app-nav-group,
.grupo,
.pf-numero {
letter-spacing: 0.1em;
font-feature-settings: "kern" 1, "cpsp" 1;
}
/* selos e chips: caps pequeno pede mais ar ainda */
.selo,
.codigo {
letter-spacing: 0.04em;
}
.codigo {
font-feature-settings: "tnum" 1, "zero" 1; /* zero cortado, dígitos tabulares */
}
/* números em tabelas alinham em coluna */
.tabela td,
.pf-tabela td,
.metrica {
font-variant-numeric: tabular-nums;
}
/* corpo de texto: hifenização e órfãs */
p, li, .dica, .pf-dica, .texto-suave {
text-wrap: pretty;
}
h1, h2, h3 {
text-wrap: balance;
}
/* ---------------------------------------------------------------------
2. SUPERFÍCIES — cartões, painéis, caixas
--------------------------------------------------------------------- */
.cartao,
.pf-card,
.pf-quadro,
.card,
.vazio,
.pf-vazio {
border-radius: var(--rf-r-caixa);
border-color: rgba(20, 49, 92, .07);
box-shadow: var(--rf-sombra-2), var(--rf-bisel);
background-image: var(--rf-grao);
background-blend-mode: overlay;
background-size: 160px 160px;
position: relative;
isolation: isolate;
}
/* o grão só aparece a 3%: deve ser sentido, não visto */
.cartao::before,
.pf-card::before,
.pf-quadro::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--rf-grao);
opacity: .03;
pointer-events: none;
mix-blend-mode: multiply;
z-index: -1;
}
/* filhos diretos de cartão seguem o raio aninhado */
.cartao > .cartao,
.pf-card > .pf-card,
.cartao .tabela-rolagem,
.pf-card .pf-rolagem,
.cartao .aviso-faixa,
.pf-card .pf-aviso,
.cartao details > div,
.pf-card details > div {
border-radius: var(--rf-r-interno);
}
/* cartões que sobem ao hover: mola, não ease */
.cartao[href],
a.cartao,
.card[href],
a.card,
.pf-opcao {
transition:
transform .45s var(--rf-mola),
box-shadow .45s var(--rf-mola),
border-color .2s ease-out;
}
.cartao[href]:hover,
a.cartao:hover,
.card[href]:hover,
a.card:hover {
transform: translateY(-2px);
box-shadow: var(--rf-sombra-3), var(--rf-bisel);
}
/* cabeçalho de página: um traço fino, não uma barra */
.conteudo-cab,
.pf-cab {
border-bottom: 1px solid rgba(20, 49, 92, .08);
padding-bottom: .9rem;
}
/* faixas de aviso: raio interno, filete lateral ligeiramente mais grosso
que 3px lê como "desenhado", 3px lê como "padrão de framework" */
.aviso-faixa,
.pf-aviso,
.aviso-faixa-alerta {
border-radius: var(--rf-r-interno);
border-left-width: 4px;
box-shadow: var(--rf-sombra-1);
}
/* ---------------------------------------------------------------------
3. CONTROLES — botões, inputs, selects
--------------------------------------------------------------------- */
.btn,
.pf-btn,
.pf-btn-solido,
.pf-btn-cheio,
.pf-btn-borda,
.pf-btn-vazio,
button:not([class]),
input[type="submit"] {
border-radius: var(--rf-r-controle);
letter-spacing: 0.01em;
transition:
transform .35s var(--rf-mola),
box-shadow .35s var(--rf-mola),
background-color .18s ease-out,
border-color .18s ease-out,
color .18s ease-out;
will-change: transform;
}
/* botões sólidos ganham bisel e sombra tingida; o resto fica leve */
.btn-verde,
.btn-primario,
.btn-azul,
.pf-btn-solido,
.pf-btn-cheio {
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, .18),
inset 0 -1px 0 0 rgba(0, 0, 0, .10),
0 1px 2px rgba(20, 49, 92, .10),
0 6px 14px -6px rgba(20, 49, 92, .25);
}
.btn-verde:hover,
.btn-primario:hover,
.btn-azul:hover,
.pf-btn-solido:hover,
.pf-btn-cheio:hover {
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, .22),
inset 0 -1px 0 0 rgba(0, 0, 0, .10),
0 2px 4px rgba(20, 49, 92, .10),
0 12px 24px -8px rgba(20, 49, 92, .32);
}
.btn:active,
.pf-btn:active,
.pf-btn-solido:active,
.pf-btn-cheio:active {
transform: translateY(0) scale(.985);
transition-duration: .08s;
transition-timing-function: var(--rf-saida);
}
/* botões pequenos: raio proporcional, não o mesmo dos grandes */
.btn-mini {
border-radius: 7px;
}
/* contorno e fantasma: sem sombra, o hover é só um leve preenchimento */
.btn-contorno:hover,
.btn-fantasma:hover,
.pf-btn-borda:hover,
.pf-btn-vazio:hover {
background-color: rgba(20, 49, 92, .04);
}
/* inputs: bisel interno, foco em anel duplo (contorno + halo suave) */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
border-radius: var(--rf-r-controle);
box-shadow: inset 0 1px 2px rgba(20, 49, 92, .05);
transition:
border-color .18s ease-out,
box-shadow .25s var(--rf-mola);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
outline: none;
box-shadow:
inset 0 1px 2px rgba(20, 49, 92, .05),
0 0 0 3px rgba(21, 101, 216, .16),
0 0 0 1px rgba(21, 101, 216, .55);
}
/* rótulos de campo: peso um pouco menor, cor um pouco mais funda */
.campo > label,
.pf-campo > label {
letter-spacing: 0.005em;
font-weight: 600;
color: var(--rf-navy);
}
/* ---------------------------------------------------------------------
4. SELOS, CHIPS, CÓDIGOS
--------------------------------------------------------------------- */
.selo {
border-radius: var(--rf-r-pilula);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .35);
padding-inline: .6em;
line-height: 1.6;
}
.codigo {
border-radius: 5px;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .5),
0 0 0 1px rgba(20, 49, 92, .06);
}
/* ---------------------------------------------------------------------
5. TABELAS
--------------------------------------------------------------------- */
.tabela,
.pf-tabela {
border-collapse: separate;
border-spacing: 0;
}
.tabela thead th,
.pf-tabela thead th {
letter-spacing: 0.06em;
font-size: .74rem;
text-transform: uppercase;
color: rgba(20, 49, 92, .62);
border-bottom: 1px solid rgba(20, 49, 92, .10);
}
.tabela tbody tr,
.pf-tabela tbody tr {
transition: background-color .15s ease-out;
}
.tabela tbody tr:hover,
.pf-tabela tbody tr:hover {
background-color: rgba(20, 49, 92, .025);
}
.tabela tbody td,
.pf-tabela tbody td {
border-bottom: 1px solid rgba(20, 49, 92, .06);
}
.tabela-rolagem,
.pf-rolagem {
border-radius: var(--rf-r-interno);
overflow: hidden;
}
/* ---------------------------------------------------------------------
6. NAVEGAÇÃO LATERAL — item ativo com marcador, não só fundo
--------------------------------------------------------------------- */
.app-nav-link,
.pf-nav a {
border-radius: var(--rf-r-controle);
transition:
background-color .18s ease-out,
color .18s ease-out,
transform .3s var(--rf-mola);
position: relative;
}
.app-nav-link:hover,
.pf-nav a:hover {
transform: translateX(2px);
}
.app-nav-link.ativo::before,
.pf-nav a.ativo::before {
content: "";
position: absolute;
left: -2px;
top: 22%;
bottom: 22%;
width: 3px;
border-radius: 3px;
background: currentColor;
opacity: .9;
}
/* ---------------------------------------------------------------------
7. LINKS DE TEXTO — sublinhado desenhado, não default
--------------------------------------------------------------------- */
.conteudo p a:not(.btn):not([class*="btn"]),
.pf-conteudo p a:not(.btn):not([class*="btn"]),
.dica a,
.pf-dica a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
text-decoration-color: rgba(21, 101, 216, .45);
transition: text-decoration-color .18s ease-out;
}
.conteudo p a:not(.btn):hover,
.pf-conteudo p a:not(.btn):hover {
text-decoration-color: currentColor;
}
/* ---------------------------------------------------------------------
8. DETALHES QUE NINGUÉM NOTA CONSCIENTEMENTE
--------------------------------------------------------------------- */
/* seleção de texto na cor do projeto */
::selection {
background: rgba(242, 106, 27, .22);
color: inherit;
}
/* barra de rolagem fina e discreta (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
background: rgba(20, 49, 92, .18);
border-radius: 10px;
border: 3px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 49, 92, .3); background-clip: padding-box; }
/* separadores: gradiente para as pontas, não uma linha chapada */
hr {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(20, 49, 92, .14), transparent);
}
/* details/summary: seta que gira com mola */
details > summary {
transition: color .18s ease-out;
}
details > summary::marker,
details > summary::-webkit-details-marker {
transition: transform .3s var(--rf-mola);
}
/* imagens e ícones de linha não ficam "quebrados" em subpixel */
svg { shape-rendering: geometricPrecision; }
/* foco por teclado sempre visível, no acento do projeto */
:focus-visible {
outline: 2px solid var(--rf-acento);
outline-offset: 3px;
border-radius: 4px;
}
/* ---------------------------------------------------------------------
9. MOVIMENTO REDUZIDO — respeitar quem pediu
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
.cartao[href]:hover, a.cartao:hover, .app-nav-link:hover, .pf-nav a:hover,
.btn-verde:hover, .pf-btn-solido:hover {
transform: none;
}
}