/* ============================================================
ALCÂNTTARA STUDIO CRIATIVO — COMPONENTES
Depende de tokens.css (carregar antes deste arquivo).
Fonte única dos componentes — as 4 peças em produção (01 a 04) ainda têm
cópia própria do CSS, herdada de quando cada uma foi construída isolada.
Piece nova = parte daqui. Ver README §"Rodada de sistema completo" pro
histórico de por que a migração das 4 peças existentes não foi automática.
============================================================ */
/* ---- Rótulo / etiqueta de seção ----
Duas variantes por causa de contraste: a assinatura (#00A8C0) só passa
WCAG AA em texto sobre fundo ESCURO. Sobre fundo claro, usa a versão
escurecida. Ver tokens.css § auditoria de contraste. */
.rotulo{
font-family:var(--fonte-display);
font-size:.75rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--assinatura-texto);
margin:0 0 12px;
}
.rotulo-vivo{ color:var(--assinatura); } /* só usar sobre fundo tinta */
/* ---- Botão ----
Variantes: .btn (padrão, preenchido) · .btn-fantasma (contorno).
Estados: hover, focus-visible, disabled. Nunca texto branco sobre fundo
--assinatura (falha AA, 2.85:1) — por isso o hover troca pra --tinta. */
.btn{
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--fonte-display);
font-weight:600;
font-size:.9375rem;
padding:16px 34px;
border-radius:999px;
border:1px solid transparent;
background:var(--tinta);
color:var(--branco);
text-decoration:none;
cursor:pointer;
transition:background var(--dur-rapida) var(--ease-padrao), color var(--dur-rapida) var(--ease-padrao);
}
.btn:hover{ background:var(--assinatura); color:var(--tinta); }
.btn:focus-visible{ outline:2px solid var(--assinatura); outline-offset:2px; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
.btn-fantasma{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--fonte-display); font-weight:600; font-size:.9375rem;
padding:15px 33px; border-radius:999px;
border:1px solid var(--linha); background:transparent; color:var(--tinta);
text-decoration:none; cursor:pointer;
transition:border-color var(--dur-rapida) var(--ease-padrao), color var(--dur-rapida) var(--ease-padrao);
}
.btn-fantasma:hover{ border-color:var(--assinatura-texto); color:var(--assinatura-texto); }
.btn-fantasma:focus-visible{ outline:2px solid var(--assinatura); outline-offset:2px; }
/* ---- Card genérico ----
Base neutra pra qualquer bloco em caixa. Card sobre fundo escuro usa
--sombra-card-escura (a sombra clara some no fundo tinta). */
.card{
background:var(--branco);
border:1px solid var(--linha);
border-radius:var(--raio-card);
padding:24px;
}
.card-elevado{
background:var(--branco);
border-radius:var(--raio-card);
padding:24px;
box-shadow:var(--sombra-card);
}
.card-escuro{
background:#141412;
border:1px solid var(--linha-clara);
border-radius:var(--raio-card);
padding:24px;
color:var(--branco);
}
/* ---- Card de vidro (padrão para caixa de destaque) ----
⛔ PROIBIDO nas peças da Alcânttara: faixa de cor em borda de card
(border-top/left colorido de 3px a 5px). Em canto arredondado a faixa
escapa por trás do raio e aparece como barra solta acima da caixa —
reprovado pelo José em 21/09/2026, no relatório da Axus. Para dar cor
a uma caixa: fundo inteiro (tinta ou assinatura) ou vidro, nunca borda
pintada.
O vidro precisa de LUZ ATRÁS, senão o blur não refrata nada e a caixa
vira um branco sujo: pôr dois radiais desfocados na seção (um em
--assinatura a .34 de alfa, um em --papel-alt), com a seção em
position:relative;overflow:hidden e o conteúdo em z-index 1.
Contraste conferido na composição, não na cor do token:
tinta sobre .vidro-teal (sobre papel) = 7.6:1 · assinatura sobre
.vidro-escuro = 4.63:1 · branco-70 sobre .vidro-escuro = 6.5:1. */
.vidro{
background:rgba(255,255,255,.52);
backdrop-filter:blur(18px) saturate(150%);
-webkit-backdrop-filter:blur(18px) saturate(150%);
border:1px solid rgba(255,255,255,.72);
border-radius:var(--raio-card-lg);
padding:26px 24px;
box-shadow:0 1px 1px rgba(29,29,27,.04), 0 18px 40px rgba(29,29,27,.09);
}
.vidro-escuro{
background:rgba(29,29,27,.90);
border-color:rgba(255,255,255,.18);
color:var(--branco);
box-shadow:0 1px 1px rgba(29,29,27,.10), 0 18px 44px rgba(29,29,27,.24);
}
.vidro-teal{
background:rgba(0,168,192,.68);
border-color:rgba(255,255,255,.55);
color:var(--tinta);
box-shadow:0 1px 1px rgba(29,29,27,.05), 0 18px 44px rgba(0,120,138,.22);
}
/* ---- Modo Grafite (16/10/2026) ----
Seção escura + cards quase pretos. Profundidade SÓ por sombra larga e difusa:
sem borda (nem hairline, nem faixa colorida) e sem vidro. Uso: apresentações,
relatórios e seções de destaque; o papel segue sendo o fundo padrão.
Markup:
Ícone: stroke/fill em var(--assinatura), 22px dentro do chip de 56px. */
.grafite{
background:var(--grafite-fundo);
color:var(--branco);
padding:var(--sp-8) var(--sp-4);
}
.grafite h1,.grafite h2{ font-family:var(--fonte-display); font-weight:700; color:var(--branco); }
.grafite .lede{ color:var(--branco-70); }
.card-grafite{
background:var(--grafite-card);
border-radius:var(--raio-grafite);
padding:40px;
box-shadow:var(--sombra-grafite);
color:var(--branco);
}
.card-grafite h3{ font-family:var(--fonte-display); font-weight:700; font-size:var(--tam-h2); margin:24px 0 12px; color:var(--branco); }
.card-grafite p{ font-family:var(--fonte-texto); color:var(--branco-70); line-height:1.55; margin:0 0 20px; }
.icone-grafite{
display:inline-flex; align-items:center; justify-content:center;
width:56px; height:56px;
background:var(--grafite-chip);
border-radius:16px;
box-shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.28);
color:var(--assinatura);
}
.icone-grafite svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.link-grafite{
font-family:var(--fonte-texto); font-weight:500;
color:var(--assinatura); text-decoration:none;
transition:color var(--dur-rapida) var(--ease-padrao);
}
.link-grafite:after{ content:" \2197"; }
.link-grafite:hover{ color:var(--branco); }
.link-grafite:focus-visible{ outline:2px solid var(--assinatura); outline-offset:3px; border-radius:4px; }
/* ---- Assinatura em motion (capa de peça) ----
A tinta ANDA SOBRE O TRAÇO, como caneta: um stroke grosso corre pela linha central
de cada traço e é recortado (clipPath) pela forma real da assinatura, então o arco
aparece ponta a ponta em vez de ser revelado por corte reto. Ordem: primeiro o laço
(1,5s), depois a cauda saindo para a direita (0,55s). A forma cheia (.tinta) entra
em fade no fim de cada traço, para nenhuma borda ficar fora do que o stroke cobre.
Markup pronto: assets/logo/assinatura-animada.svg, inline no HTML (como ![]()
não
anima). As linhas centrais foram MEDIDAS, não desenhadas: média entre as duas bordas
do contorno, com o alinhamento do parâmetro achado por busca (o contorno do laço é
fechado e não começa numa ponta). Espessura do traço: mediana 15, p95 47 em unidades
do viewBox; stroke-width 70 cobre tudo e ainda fica longe dos 76 que separam o laço
da perna vizinha, que é o que impede a tinta de vazar para o trecho errado.
É o único movimento da marca com esta velocidade: não aplicar em outro elemento. */
.assina-deco{ position:relative; aspect-ratio:336.26/1066.89; }
.assina-svg{ width:100%; height:100%; display:block; overflow:visible; }
.caneta{ fill:none; stroke:var(--assinatura); stroke-width:70; stroke-linecap:round;
stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.tinta{ fill:var(--assinatura); opacity:0; }
.caneta-laco{ animation:tracar 1.5s var(--ease-assinatura) .35s forwards; }
.tinta-laco{ animation:assentar .22s linear 1.78s forwards; }
.caneta-cauda{ animation:tracar .55s cubic-bezier(.3,.7,.4,1) 1.95s forwards; }
.tinta-cauda{ animation:assentar .2s linear 2.45s forwards; }
@keyframes tracar{ to{ stroke-dashoffset:0; } }
@keyframes assentar{ to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
.caneta{ display:none; }
.tinta{ opacity:1; animation:none!important; }
}
/* ---- Chip / tag ----
.chip = neutro (filtro, categoria). .tag-sucesso = crescimento/positivo,
já testado em WCAG (verde #2E7D32 sobre #E9F6E9 = 4.6:1, passa). */
.chip{
display:inline-block;
border:1px solid var(--linha);
border-radius:999px;
padding:8px 16px;
font-size:.8125rem;
color:var(--tinta-60);
}
.tag-sucesso{
display:inline-block;
background:#E9F6E9;
color:#2E7D32;
font-size:.6875rem;
font-weight:600;
padding:3px 9px;
border-radius:999px;
}
/* ---- Tabela ---- */
.tabela{
width:100%;
border-collapse:collapse;
background:var(--branco);
border-radius:var(--raio-card);
overflow:hidden;
box-shadow:var(--sombra-card);
}
.tabela th,.tabela td{ text-align:left; padding:16px 22px; font-size:.9375rem; }
.tabela thead th{
background:var(--papel-alt);
font-family:var(--fonte-display); font-weight:600; font-size:.8125rem;
text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-60);
}
.tabela tbody tr+tr{ border-top:1px solid var(--linha); }
.tabela tfoot td{ border-top:2px solid var(--tinta); font-family:var(--fonte-display); font-weight:700; font-size:1.0625rem; }
/* ---- Callout ----
3 variantes: neutro (info), atencao (amarelo), risco (vermelho).
Cor de texto de cada uma já testada AA. */
.callout{ border-radius:10px; padding:20px 24px; font-size:.9375rem; }
.callout b{
display:block; font-family:var(--fonte-display); font-size:.8125rem;
text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;
}
.callout-info{ background:var(--papel-alt); border:1px solid var(--linha); color:var(--tinta); }
.callout-atencao{ background:var(--atencao-bg,#FFFBE6); border:1px solid var(--atencao-borda,#C9A227); color:var(--tinta); }
.callout-risco{ background:var(--alerta-bg,#FBF1EF); border:1px solid var(--alerta-borda,#C0392B); color:var(--alerta-texto,#8C2E22); }
/* ---- Metric card (relatório, dashboards) ---- */
.metric-card{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio-card); padding:24px; }
.metric-card .label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-60); }
.metric-card .valor{ font-family:var(--fonte-display); font-weight:800; font-size:2rem; margin:8px 0 6px; }
.metric-card .desc{ font-size:.8125rem; color:var(--tinta-60); }
.metric-card .fonte{ margin-top:10px; font-size:.6875rem; color:var(--tinta-60); }
/* ---- Campo editável (recibo e formulários simples) ----
Padrão contenteditable: :empty mostra o placeholder via data-ph,
:focus dá contorno visível (a11y — foco tem que ser visível sempre). */
.campo{
display:inline-block; min-width:2ch; padding:2px 6px;
background:#F4F1EA; border-radius:4px; border-bottom:1px solid var(--linha);
}
.campo:empty:before{ content:attr(data-ph); color:var(--tinta-60); }
.campo:focus-visible,.campo:focus{ outline:2px solid var(--assinatura); outline-offset:1px; background:#EAF7F9; }
@media print{
.campo{ background:none; border-bottom:none; }
.campo:empty:before{ color:transparent; }
}
/* ---- Badge circular (ícone/selo) ---- */
.badge{
width:64px; height:64px; border-radius:50%;
border:1px solid var(--linha-clara);
display:flex; align-items:center; justify-content:center; flex:none;
}
.badge svg{ width:60%; height:60%; }
/* ---- Grão (textura sobre fundo escuro) ----
SVG feTurbulence inline, sem asset externo. Opacidade baixa de propósito
— é textura, não efeito. Elementos-filho ganham z-index automático pra
ficar acima da textura. */
.grao{ position:relative; isolation:isolate; }
.grao::after{
content:"";
position:absolute; inset:0; pointer-events:none; z-index:1;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity:.05; mix-blend-mode:overlay;
}
.grao>*{ position:relative; z-index:2; }
/* ---- Assinatura animada (o traço se desenha ao carregar/entrar na tela) ----
.assina-auto = anima assim que a página carrega (usar só acima da dobra).
.assina-scroll + classe .ativo (via IntersectionObserver) = anima quando
entra na tela. Ver 01-aplicacoes-marca/index.html pro script de referência. */
.assina-auto{ clip-path:inset(0 0 100% 0); animation:desenhar var(--dur-lenta) var(--ease-assinatura) .3s forwards; }
.assina-scroll{ clip-path:inset(0 0 100% 0); }
.assina-scroll.ativo{ animation:desenhar var(--dur-lenta) var(--ease-assinatura) forwards; }
@keyframes desenhar{ to{ clip-path:inset(0 0 0% 0); } }
@media (prefers-reduced-motion: reduce){
.assina-auto,.assina-scroll{ animation:none!important; clip-path:none!important; }
}
/* ---- Foco visível, global ----
Qualquer elemento focável precisa de indicação visual — regra de a11y,
não estética. Se um componente acima já define seu próprio :focus-visible,
este é só o catch-all pro resto. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
outline:2px solid var(--assinatura); outline-offset:2px;
}
/* ============================================================
FAMÍLIA "BILHETE" — nasceu no recibo de pagamento (13/08), consolidada
aqui depois de 3 rodadas de ajuste (José mandando referência de recibo
de app de viagem + critique). Valores na escala do recibo A4/documento —
pra canvas grande tipo o story 1080x1920, escalar tudo por ~1.6x
(ver 03-recibo-pagamento/recibo-story-1080x1920.html pros valores prontos).
============================================================ */
/* ---- Etiqueta flutuante (pill preso no canto de um cartão) ----
O cartão-pai precisa de position:relative. Serve pra rotular o conteúdo
sem gastar espaço interno — a etiqueta "morde" a borda de cima. */
.pill-label{
position:absolute; top:-14px; right:18px; z-index:1;
background:var(--tinta); color:var(--branco);
font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
padding:7px 16px; border-radius:999px;
}
/* ---- Cartão flutuante (branco, sombra forte) ----
Diferente do .card-elevado (sombra leve, pensado pra fundo papel): este
é pra cartão branco boiando sobre fundo ESCURO ou colorido — sombra mais
pesada porque precisa se destacar de um fundo já com contraste. */
.card-flutuante{
position:relative; background:var(--branco); color:var(--tinta);
border-radius:16px; padding:22px 22px 20px;
box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.card-flutuante .campo{ background:#F4F1EA; color:var(--tinta); }
.card-flutuante .campo:empty:before{ color:var(--tinta-60); }
.card-flutuante .li-label{ color:var(--assinatura-texto); } /* fundo claro — --assinatura crua falha AA aqui */
/* ---- Cartão de cor cheia (fundo --assinatura) ----
Usa a cor de destaque como fundo real, não só acento. Regra de contraste
que já causou bug 2x nesta sessão: texto SEMPRE em --tinta aqui, nunca
--branco (branco sobre assinatura falha AA, 2.85:1 — ver tokens.css). */
.card-cor{
position:relative; background:var(--assinatura); color:var(--tinta);
border-radius:16px; padding:24px 22px 22px;
}
.card-cor .campo{ background:rgba(255,255,255,.14); color:var(--tinta); }
.card-cor .campo:empty:before{ color:rgba(29,29,27,.55); }
/* ---- Trilho vertical (ponto — linha — ponto) ----
Motivo de "jornada"/timeline: dois ou mais pontos conectados por uma
linha vertical. Serve tanto pra 2 paradas (identidade: nome + documento)
quanto pra N paradas (período, histórico). Proporção fixada depois do
critique 13/08: ponto e linha PRECISAM ter o mesmo tamanho em todo uso
do trilho na mesma peça — variar o tamanho sem motivo foi apontado como
inconsistência real. */
.li-label{ display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-bottom:4px; color:var(--assinatura); } /* default assume fundo escuro — ver .card-flutuante .li-label pro caso fundo claro */
.li-valor{ display:block; font-size:.9375rem; }
.trilho-ponto{ display:flex; align-items:flex-start; gap:12px; }
.trilho-dot{
width:12px; height:12px; border-radius:50%; flex:none; margin-top:5px;
background:var(--assinatura); /* trocar pra var(--branco) se o trilho estiver
dentro de um .card-cor (ponto precisa contrastar com o próprio fundo) */
}
.trilho-linha{ width:2px; height:36px; background:var(--linha); margin:2px 0 2px 5px; }
/* ---- Bilhete (duas peças com picote de verdade entre elas) ----
Metáfora de ticket físico rasgável. .ticket-principal e .ticket-stub são
os dois "lados"; .picote é o divisor com círculos. Duas lições caras de
errar 2x cada uma: (1) background-repeat:round, não repeat-x — repeat-x
deixa meio-círculo cortado se a largura não for múltiplo exato do tile;
(2) se o picote encosta numa borda arredondada grande (>10px), o círculo
choca com o arco — ou o raio ali fica pequeno (6-8px) ou a faixa de
círculos precisa ter EXATAMENTE a largura do elemento que ela corta, não
a largura de um contêiner maior por fora dele. */
.ticket-principal{ position:relative; background:var(--tinta); color:var(--branco); border-radius:24px 24px 6px 6px; padding:32px 30px 30px; }
.ticket-stub{ position:relative; background:var(--tinta); color:var(--branco); border-radius:6px 6px 24px 24px; padding:8px 30px 30px; }
.picote{ position:relative; height:1px; }
.picote::before,.picote::after{
content:""; position:absolute; left:0; right:0; height:22px;
background-image:radial-gradient(circle 11px, var(--branco) 11px, transparent 11.5px);
background-size:26px 22px; background-position:9px 0; background-repeat:round;
}
.picote::before{ top:-22px; }
.picote::after{ top:0; }
/* ---- Duas colunas (painel claro colado num painel escuro) ----
Pedido literal do José a partir de uma referência: "box cinza do lado
esquerdo... colado nele um preto". Vira 1 coluna em mobile — ver
breakpoint único documentado no topo do tokens.css (860px, o mesmo já
usado pelo resto do sistema). */
.duas-colunas{ display:grid; grid-template-columns:1fr 1fr; }
.coluna-clara{ background:var(--cinza-painel); color:var(--tinta); padding:24px 22px 28px; }
.coluna-escura{ background:var(--tinta); color:var(--branco); padding:24px 22px 28px; }
@media (max-width:860px){
.duas-colunas{ grid-template-columns:1fr; }
}