/* ==========================================================================
TeraBoard · Pagina: investidor — o portao de senha e a grade de projetos
Nada aqui inventa sistema de design novo: as cores, as fontes e os cards
sao os mesmos de components.css e themes.css. O que existe neste arquivo
e so o que a area precisa e o site ainda nao tinha — as quatro caixinhas
da senha e a grade de projetos.
========================================================================== */
/* hero das paginas internas: a nav fixa mede ~130px no desktop */
.hero-page{padding-top:150px;position:relative}
@media(min-width:768px){ .hero-page{padding-top:178px} }
@media(min-width:1024px){ .hero-page{padding-top:196px} }
/* --------------------------------------------------------------------------
VEU DE LEITURA DO HERO
Mesmo veu das outras paginas internas: a logo 3D passa por tras do titulo
e o texto perde contraste sem ele.
-------------------------------------------------------------------------- */
.hero-page:not(.cream)::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
backdrop-filter:blur(18px) saturate(.9);
-webkit-backdrop-filter:blur(18px) saturate(.9);
background:radial-gradient(115% 105% at 30% 40%,
rgba(3,8,6,.62) 0%, rgba(3,8,6,.44) 46%, rgba(3,8,6,0) 82%);
-webkit-mask-image:radial-gradient(115% 105% at 30% 40%,
#000 0%, #000 44%, rgba(0,0,0,.5) 66%, transparent 86%);
mask-image:radial-gradient(115% 105% at 30% 40%,
#000 0%, #000 44%, rgba(0,0,0,.5) 66%, transparent 86%);
}
@media(max-width:1023px){
.hero-page:not(.cream)::before{
background:radial-gradient(130% 78% at 50% 34%,
rgba(3,8,6,.66) 0%, rgba(3,8,6,.44) 50%, rgba(3,8,6,0) 86%);
-webkit-mask-image:radial-gradient(130% 78% at 50% 34%,
#000 0%, #000 50%, transparent 88%);
mask-image:radial-gradient(130% 78% at 50% 34%,
#000 0%, #000 50%, transparent 88%);
}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.hero-page:not(.cream)::before{
background:radial-gradient(115% 105% at 30% 40%,
rgba(3,8,6,.84) 0%, rgba(3,8,6,.62) 48%, rgba(3,8,6,0) 84%);
}
}
/* ==========================================================================
1. O PORTAO — a tela de senha
========================================================================== */
.portao{max-width:520px;margin:0 auto}
.portao-card{padding:34px 26px}
@media(min-width:640px){ .portao-card{padding:40px 38px} }
/* As quatro caixinhas. Cada uma e um de um digito so: no celular
isso abre o teclado numerico e o dedo acerta um alvo de 60 px. */
.pin-linha{display:flex;gap:10px;justify-content:center;margin-top:26px}
@media(min-width:400px){ .pin-linha{gap:14px} }
.pin{
width:100%;max-width:68px;height:74px;
text-align:center;
font-family:'IBM Plex Mono',monospace;font-size:1.9rem;font-weight:600;
color:var(--ink);
background:rgba(6,44,31,.42);
border:1.5px solid rgba(240,241,227,.28);
border-radius:14px;
transition:border-color .25s,background .25s,transform .25s;
}
.pin:focus{outline:none;border-color:#D6FFEE;background:rgba(6,44,31,.6)}
.pin:focus-visible{outline:2px solid #D6FFEE;outline-offset:2px}
.pin.cheio{border-color:rgba(214,255,238,.75)}
/* o navegador desenha setinhas em input[type=number]; aqui elas so atrapalham */
.pin::-webkit-outer-spin-button,
.pin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Senha errada: a mensagem aparece e as caixinhas balancam uma vez. Quem
pediu menos movimento no sistema recebe so a mensagem (ver utilitarios). */
.pin-linha.errou{animation:pin-nao .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes pin-nao{
10%,90%{transform:translateX(-2px)}
20%,80%{transform:translateX(4px)}
30%,50%,70%{transform:translateX(-7px)}
40%,60%{transform:translateX(7px)}
}
.portao-erro{
display:flex;align-items:center;gap:8px;justify-content:center;
margin-top:18px;min-height:22px;
font-family:'Space Grotesk',sans-serif;font-size:.92rem;font-weight:600;
color:#FFE0D7;
}
.portao-erro:empty{display:none}
.portao-nota{margin-top:22px;font-size:.86rem;line-height:1.5;text-align:center}
/* Os termos de acesso (.termos e .aceite) moraram aqui ate passarem a servir
duas paginas: este portao e a de captura bloqueada. Foram para
css/protecao.css, que as duas carregam. */
/* ==========================================================================
2. A GRADE DE PROJETOS
========================================================================== */
/* O titulo recebe focus() quando a senha e aceita, para quem navega por
teclado ou leitor de tela continuar de onde a pagina mudou em vez de voltar
ao topo do documento. Ele nao e interativo, entao o anel de foco do
navegador so aparecia como um retangulo solto em volta de "Projetos" logo
depois de entrar. Mesmo padrao de alvo de "pular para o conteudo". */
#projetosTitulo:focus{outline:none}
/* Duas colunas no desktop. O projeto em destaque ocupa as duas; um projeto
comum entra como e ocupa uma so — para somar
o segundo projeto nao ha layout a refazer, e so acrescentar o card. */
.proj-grade{display:grid;gap:22px;margin-top:38px}
@media(min-width:900px){ .proj-grade{grid-template-columns:repeat(2,minmax(0,1fr))} }
.proj-card{position:relative;padding:28px 24px;display:flex;flex-direction:column}
@media(min-width:640px){ .proj-card{padding:34px 32px} }
.proj-destaque{grid-column:1/-1}
.proj-topo{display:flex;justify-content:space-between;align-items:start;gap:14px;flex-wrap:wrap}
.proj-nome{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;
font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.05;margin-top:22px}
.proj-linha{margin-top:12px;font-size:1.06rem;line-height:1.6;max-width:52ch}
.proj-unidade{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.proj-unidade span{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.05em;
padding:7px 12px;border-radius:9999px;
background:rgba(6,44,31,.34);border:1px solid rgba(240,241,227,.18)}
.proj-modular{margin-top:14px;font-size:.94rem;line-height:1.55}
/* O card inteiro e clicavel sem embrulhar tudo num (link dentro de link
e HTML invalido, e os tres sub-cards tambem sao links). O truque e o link
do titulo esticar uma camada invisivel por cima do card; os sub-cards
ficam acima dessa camada e continuam recebendo o proprio clique. */
.proj-link{color:inherit;text-decoration:none}
.proj-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px}
.proj-card{transition:transform .35s,border-color .35s,box-shadow .35s}
.proj-card:hover{transform:translateY(-4px);border-color:rgba(240,241,227,.42)}
.proj-abrir{margin-top:26px;align-self:start;position:relative;z-index:0}
/* ---------- os tres sub-cards de fase ---------- */
.fases{display:grid;gap:12px;margin-top:26px}
@media(min-width:720px){ .fases{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fase{
position:relative;z-index:2; /* acima da camada de clique do card grande */
display:flex;flex-direction:column;gap:10px;
padding:18px 16px;border-radius:14px;text-decoration:none;color:var(--ink);
background:rgba(6,44,31,.34);border:1px solid rgba(240,241,227,.18);
transition:transform .3s,border-color .3s,background .3s;
}
.fase:hover{transform:translateY(-3px);background:rgba(6,44,31,.5);border-color:rgba(214,255,238,.55)}
.fase:focus-visible{outline:2px solid #D6FFEE;outline-offset:3px}
/* a Fase 1 e por onde se comeca: fica um passo mais acesa que as outras */
.fase-aberta{border-color:rgba(214,255,238,.5);background:rgba(29,199,139,.18)}
.fase-cab{display:flex;align-items:center;gap:9px}
.cadeado{width:19px;height:19px;flex:0 0 auto} /* herda a cor do texto */
.fase-num{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--sage)}
.fase-nome{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.25}
.fase-estado{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.04em;color:var(--sage)}
.fase-aberta .fase-estado{color:#D6FFEE}
@media(prefers-reduced-motion:reduce){
.proj-card:hover,.fase:hover{transform:none}
.pin-linha.errou{animation:none}
}