/* ==========================================================================
SAMI Sistemas — Base
Reset, tipografia global e componentes compartilhados entre as páginas
(header, footer, botões, container).
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
/* Compensa o header fixo ao navegar por âncoras (#contato, #fintech...) */
scroll-padding-top: var(--altura-header-compacta);
/* clip, não hidden (mesmo motivo do body abaixo): sem isso aqui, o
— não o — é o elemento de rolagem real do documento em
modo padrão, e elementos position:fixed (ex.: .header) se posicionam
relativos à viewport, ignorando qualquer overflow definido só no
body. Bastava 1px de estouro horizontal em algo assim pra mobile
mostrar aquele "elástico" de arrastar a página pro lado e voltar. */
overflow-x: clip;
}
body {
font-family: var(--fonte-principal);
font-size: var(--texto-base);
font-weight: var(--peso-regular);
line-height: var(--altura-linha-texto);
color: var(--cor-texto);
background-color: var(--cor-fundo);
-webkit-font-smoothing: antialiased;
/* clip, não hidden: hidden faz o body virar um scroll container (via
propagação pro root) e isso quebra position:sticky em qualquer
descendente da página inteira — é o caso do carrossel do Payhub
(payhub.css), que sem isso nunca "gruda" no topo. clip corta a
mesma coisa sem criar esse contexto de scroll. */
overflow-x: clip;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
button,
input {
font: inherit;
border: none;
background: none;
}
button {
cursor: pointer;
}
/* --------------------------------------------------------------------------
Preloader
-------------------------------------------------------------------------- */
/* Trava o scroll enquanto o preloader está ativo (classe adicionada pelo
script inline no , antes de qualquer pintura na tela) */
html.aguardando-preloader,
html.aguardando-preloader body {
overflow: hidden;
}
/* Escondido por padrão: só some da tela via classe, então quem não tem
JS (ou já viu nesta sessão, ou pediu menos movimento) nunca chega a
ver o preloader — sem "flash" nenhum. */
[data-preloader] {
display: none;
}
html.aguardando-preloader [data-preloader] {
position: fixed;
inset: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* O fundo próprio (.preloader__fundo) cobre o .hero atrás dele — não
precisa mais depender da bg-overlay.jpg carregar a tempo. O header
e o conteúdo do hero ficam escondidos (opacity:0 via
[data-reveal-hero]/[data-reveal]) até a hora certa de aparecer. */
}
.preloader__logo {
position: relative;
z-index: 2;
width: min(26rem, 60vw);
}
.preloader__logo svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* transform-box:fill-box faz a escala/translação crescer a partir do
centro de cada faceta/letra (não do canto 0,0 do viewBox) */
.preloader__logo .fil0,
.preloader__logo .fil1 {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
will-change: transform, filter, opacity;
}
/* Fundo do preloader: gradiente animado (mesmas cores da bg-overlay.jpg
do .hero — dá continuidade visual quando o preloader some), com dois
"blobs" que derivam (posição/escala/opacity), pra nunca ficar idêntico
de um instante pro outro. Ciclo curto de propósito (~3s) — o preloader
inteiro dura uns 2,5s, então um ciclo "respirando devagar" de hero
persistente (20-30s) ficaria parecendo congelado aqui; precisa de
menos de um giro completo pra já dar pra notar o movimento. Fica
sempre visível (não precisa de fade de entrada) e só some junto com
os glows/meteoros na saída — ver js/preloader.js. Puro CSS, sem custo
de JS por quadro. */
.preloader__fundo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: var(--cor-fundo-escuro);
pointer-events: none;
}
.preloader__blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
will-change: transform, opacity;
}
.preloader__blob--1 {
width: 62%;
height: 130%;
top: -35%;
right: -18%;
background: radial-gradient(circle, rgba(87, 169, 224, .30) 0%, rgba(30, 90, 150, .10) 45%, rgba(30, 90, 150, 0) 72%);
animation: preloader-derivar-1 3.2s ease-in-out infinite alternate;
}
.preloader__blob--2 {
width: 46%;
height: 100%;
bottom: -30%;
left: -14%;
background: radial-gradient(circle, rgba(45, 95, 200, .22) 0%, rgba(20, 50, 110, .09) 50%, rgba(20, 50, 110, 0) 75%);
animation: preloader-derivar-2 3.8s ease-in-out infinite alternate;
}
@keyframes preloader-derivar-1 {
0% {
transform: translate(0, 0) scale(1);
opacity: .85;
}
50% {
transform: translate(-9%, 8%) scale(1.22);
opacity: 1;
}
100% {
transform: translate(-15%, -6%) scale(.9);
opacity: .8;
}
}
@keyframes preloader-derivar-2 {
0% {
transform: translate(0, 0) scale(1);
opacity: .75;
}
50% {
transform: translate(9%, -7%) scale(1.18);
opacity: 1;
}
100% {
transform: translate(16%, 6%) scale(.88);
opacity: .7;
}
}
/* Céu de estrelas: pontos fixos espalhados pelo fundo inteiro,
piscando em ciclos levemente diferentes entre si (duração/atraso por
estrela). Decoração pura em CSS — sem JS por quadro — porque só
existe durante o tempo de vida do preloader; ele é removido do DOM no
final, então a animação infinita nunca sobra rodando "órfã" depois. */
.preloader__ceu {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.preloader__estrela {
position: absolute;
border-radius: 50%;
background: #ffffff;
opacity: 0;
transform: translate(-50%, -50%);
animation-name: preloader-piscar;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes preloader-piscar {
0%,
100% {
opacity: .15;
}
50% {
opacity: 1;
}
}
/* Chuva de meteoros: riscos diagonais paralelos (mesmo ângulo fixo pra
todos — é isso que lê como "chuva", não uma explosão saindo de um
ponto) cruzando a tela o tempo todo, cada um num "left" e velocidade
diferentes (só JS no setup: cria os elementos e varia posição/
duração/atraso; o movimento em si é puro CSS, infinito, sem custo de
JS por quadro — mesmo raciocínio do céu de estrelas logo acima). A
camada inteira (.preloader__meteoros) entra e sai em fade junto com a
logo — ver js/preloader.js, ela é animada junto dos glows.
z-index (0) já fica atrás da logo (2) — mas a logo é um contorno com
bastante espaço vazio entre as facetas/letras, então um meteoro
cruzando essa área continuava visível nos vãos, parecendo estar na
frente mesmo estando atrás. A máscara abaixo recorta um "buraco"
suave bem no centro (onde a logo fica) pra nenhum meteoro aparecer
ali de jeito nenhum, nem nos vãos. */
.preloader__meteoros {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
opacity: 0;
-webkit-mask-image: radial-gradient(ellipse 26% 32% at 50% 50%, transparent 55%, #000 100%);
mask-image: radial-gradient(ellipse 26% 32% at 50% 50%, transparent 55%, #000 100%);
}
.preloader__meteoro {
position: absolute;
top: -12%;
left: 0;
width: 2px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(165, 212, 255, .95) 65%, rgba(165, 212, 255, 0));
opacity: 0;
animation-name: preloader-meteoro;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* rotate(35deg) antes de translateY: o navegador aplica o translateY
primeiro (no espaço ainda sem rotação) e só depois gira o resultado
inteiro em torno do centro — então o ângulo aqui não é "a inclinação
do risco", é o que decide pra ONDE o translateY (que seria só "descer
reto") efetivamente aponta depois de girado. Com 35°, "descer" vira
"descer e derivar pra esquerda" (35° da vertical) — o valor errado
(usado antes) mandava os meteoros pra CIMA, saindo da tela por trás
do topo, então nunca apareciam. */
@keyframes preloader-meteoro {
0% {
opacity: 0;
transform: rotate(35deg) translateY(0);
}
8% {
opacity: 1;
}
82% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(35deg) translateY(145vh);
}
}
/* --------------------------------------------------------------------------
Decoração ambiente das seções escuras — estrelas e meteoros
Mesma técnica visual do preloader logo acima (.preloader__estrela/meteoro
— reaproveita até a @keyframes preloader-piscar), só que permanente e
mais discreta. Cada seção usa uma combinação diferente de propósito (nem
todas têm estrela ou meteoro). Compartilhado por qualquer página que
carregue js/decoracao-secoes.js (gera os elementos internos).
-------------------------------------------------------------------------- */
.secao-estrelas,
.secao-meteoros {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.secao-estrela {
position: absolute;
border-radius: 50%;
background: #ffffff;
opacity: 0;
transform: translate(-50%, -50%);
animation-name: preloader-piscar;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.secao-meteoro {
position: absolute;
top: -12%;
left: 0;
width: 2px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(165, 212, 255, .85) 65%, rgba(165, 212, 255, 0));
opacity: 0;
animation-name: secao-meteoro-cair;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* Percurso próprio, bem mais curto que o do preloader (que cai 145vh, feito
pra uma tela cheia). Sem overflow:hidden segurando mais nada, um meteoro
de seção precisa de um percurso do tamanho de uma seção normal — senão
ele atravessa as seções seguintes inteiras (inclusive o rodapé). */
@keyframes secao-meteoro-cair {
0% {
opacity: 0;
transform: rotate(35deg) translateY(0);
}
8% {
opacity: 1;
}
82% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(35deg) translateY(40vh);
}
}
@media (prefers-reduced-motion: reduce) {
.secao-estrela,
.secao-meteoro {
animation: none !important;
}
}
/* --------------------------------------------------------------------------
Glow ambiente das seções escuras — dois blobs radiais que derivam bem
lentamente, mesma família visual do .preloader__blob e do
.samibank__glow-interativo (ver home.css), só que estático via puro CSS
(sem JS de mouse): dá profundidade mesmo em seções sem interação nenhuma.
Fica sempre atrás de estrelas/meteoros/conteúdo (ver z-index abaixo).
Uso: logo no início da
seção — os blobs em si são gerados via ::before/::after, sem markup extra.
-------------------------------------------------------------------------- */
.secao-glow {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
/* Sem overflow:hidden de propósito: os blobs (::before/::after) nascem
parcialmente fora da caixa (top/bottom negativos) para o degradê
desbotar até a transparência antes de qualquer borda — com
overflow:hidden aqui, a seção cortava o blob seco bem no limite dela,
criando uma linha reta visível na quebra entre seções. */
}
.secao-glow::before,
.secao-glow::after {
content: '';
position: absolute;
border-radius: 50%;
opacity: .6;
/* Mesmo blur do .preloader__blob (ver acima): sem ele, os stops do
radial-gradient aparecem como um anel com borda dura (banding) em vez
de um degradê contínuo — é o blur que funde tudo numa mancha suave. */
filter: blur(60px);
animation: secao-glow-flutuar 22s ease-in-out infinite;
}
.secao-glow::before {
/* Offset pequeno de propósito: o degradê já desbota pra transparente
dentro da própria caixa (stop de 72%, bem antes da borda dela) — um
offset grande (como era antes) empurrava boa parte da área AINDA
colorida do gradiente pra fora da seção, que a seção vizinha (opaca)
cobre sem dar tempo do fade terminar, criando a linha dura na quebra.
Aqui é só o suficiente pra arredondar o canto. */
width: min(34vw, 480px);
height: min(34vw, 480px);
top: -4%;
left: -6%;
background: radial-gradient(circle, rgba(45, 95, 200, .30) 0%, rgba(30, 90, 150, .11) 45%, rgba(30, 90, 150, 0) 72%);
}
.secao-glow::after {
width: min(30vw, 420px);
height: min(30vw, 420px);
bottom: -2%;
right: -4%;
background: radial-gradient(circle, rgba(87, 169, 224, .24) 0%, rgba(20, 50, 110, .08) 50%, rgba(20, 50, 110, 0) 75%);
animation-delay: -11s;
animation-direction: reverse;
}
@keyframes secao-glow-flutuar {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(3%, 4%) scale(1.08);
}
}
@media (prefers-reduced-motion: reduce) {
.secao-glow::before,
.secao-glow::after {
animation: none !important;
}
}
/* --------------------------------------------------------------------------
Glow interativo (segue o mouse) — base compartilhada
Mesma família visual do .secao-glow acima, só que reage ao ponteiro em
vez de derivar sozinho: dá vida extra a uma seção com um elemento focal
(uma imagem, um card) atrás do qual o brilho "respira". Cada seção que
usa isso define seu próprio tamanho/posição/cor (ver ex. em home.css,
.samibank__glow-interativo); aqui só o que é comum a todas. O
movimento em si é feito por js/glow-interativo.js, que procura por
[data-glow-interativo] dentro da seção mais próxima.
Uso:
-------------------------------------------------------------------------- */
.secao-glow-interativo {
position: absolute;
z-index: 0;
border-radius: 50%;
filter: blur(75px);
pointer-events: none;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.secao-glow-interativo {
display: none;
}
}
/* --------------------------------------------------------------------------
"Bolhas de vidro" de hero — base compartilhada
Movida de home.css pra cá pra ficar disponível em qualquer hero do site
(payhub, condomínios, locação), não só na home onde nasceu. Nada de
imagem: um círculo com gradiente radial pro volume (mais claro onde a
"luz" bate, escurecendo pras bordas) mais um traço com gradiente pro
brilho fino na borda, só de um lado (onde a luz bateria de raspão).
Cada hero usa duas (grande + pequena), com /gradientes próprios
(ids diferentes) — ver markup em qualquer .hero*/
.hero__esfera {
position: absolute;
pointer-events: none;
}
.hero__esfera--grande {
bottom: -22%;
left: -12%;
width: 34rem;
height: 34rem;
opacity: .55;
z-index: 9;
}
.hero__esfera--pequena {
/* Fixo a partir do topo (não %): um % aqui é relativo à altura TOTAL
do .hero, que varia muito de página pra página (a home é bem mais
alta que as outras por causa da fileira de cards no fim) — com %, a
bolha "escorregava" pra baixo em heroes mais altos, bem mais longe
do topo do que devia (dava a impressão de empurrar o resto do
conteúdo, apesar de ela ser position:absolute e não empurrar nada de
verdade). calc() a partir do header garante a mesma distância do
topo em qualquer altura de hero. */
top: calc(var(--altura-header) + 2rem);
left: 4%;
width: 12rem;
height: 12rem;
opacity: .4;
}
.hero__esfera-fill-inicio {
stop-color: rgb(var(--glow-azul));
stop-opacity: .55;
}
.hero__esfera-fill-meio {
stop-color: rgb(var(--glow-royal));
stop-opacity: .28;
}
.hero__esfera-fill-fim {
stop-color: var(--cor-fundo-escuro);
stop-opacity: .1;
}
.hero__esfera-rim-inicio {
stop-color: #ffffff;
stop-opacity: .9;
}
.hero__esfera-rim-meio {
stop-color: #ffffff;
stop-opacity: .2;
}
.hero__esfera-rim-fim {
stop-color: #ffffff;
stop-opacity: 0;
}
.hero__esfera-rim {
stroke-width: 2.5;
}
/* Glows azuis atrás da logo — nas mesmas posições dos pontos claros reais
do bg-overlay.jpg (canto superior direito, mais forte; inferior
esquerdo, mais sutil), pra continuar batendo quando o hero aparecer.
Ficam parados no lugar — só entram e saem com fade, sem crescer nem
se mover. */
.preloader__glow {
position: absolute;
z-index: 1;
border-radius: 50%;
opacity: 0;
pointer-events: none;
}
.preloader__glow--1 {
top: -12%;
right: -14%;
width: 28rem;
height: 28rem;
background: radial-gradient(circle, rgba(87, 169, 224, 0.22) 0%, rgba(30, 90, 150, 0.1) 45%, rgba(30, 90, 150, 0) 72%);
filter: blur(14px);
}
.preloader__glow--2 {
bottom: -18%;
left: -12%;
width: 20rem;
height: 20rem;
background: radial-gradient(circle, rgba(45, 95, 200, 0.16) 0%, rgba(20, 50, 110, 0.07) 50%, rgba(20, 50, 110, 0) 75%);
filter: blur(16px);
}
/* --------------------------------------------------------------------------
Container
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--largura-conteudo);
margin-inline: auto;
}
/* --------------------------------------------------------------------------
Botões
-------------------------------------------------------------------------- */
/* Padrão de botão do site: pill compacto, com espaço pra ícone/seta (gap),
peso médio e transições suaves. É só a FORMA/estrutura — a cor vem das
variantes (--primario, --branco, --vidro). */
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--espaco-8);
padding: 0.85rem 1.75rem;
border-radius: var(--raio-pilula);
font-size: var(--texto-base);
font-weight: var(--peso-medio);
line-height: var(--altura-linha-texto);
text-align: center;
transition: background-color var(--transicao-padrao), border-color var(--transicao-padrao), box-shadow var(--transicao-padrao), transform var(--transicao-rapida);
}
.botao--primario {
background-color: var(--cor-primaria);
color: var(--cor-texto-invertido);
box-shadow: var(--sombra-botao);
}
.botao--primario:hover {
background-color: var(--cor-primaria-hover);
}
.botao--branco {
background-color: var(--cor-fundo);
color: var(--cor-primaria);
font-size: var(--texto-subtitulo);
font-weight: var(--peso-semibold);
padding: 1.1rem var(--espaco-40);
box-shadow: var(--sombra-botao-grande);
}
.botao--branco:hover {
background-color: var(--cor-fundo-suave);
}
/* Variante "vidro" (a que virou referência): translúcida com borda clara
fininha e texto branco. Pra usar sobre fundos escuros. */
.botao--vidro {
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
color: var(--cor-texto-invertido-suave);
}
.botao--vidro:hover {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .32);
}
/* --------------------------------------------------------------------------
Select personalizado (substitui o