/* Ajustes finos que o Tailwind utilitário não cobre */ html { scroll-padding-top: 5rem; } /* Esconde a barra de rolagem do carrossel mantendo o scroll funcional */ .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } /* Scrollbar geral (dashboard e página) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #F3F4F6; } ::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #9CA3AF; } /* Barra de rolagem escura só na landing (é a página de fundo #0F172A; o `#bg-canvas` existe apenas nela). O admin usa `#login-canvas` e continua com a barra clara. Ancorado em `html` porque a barra da viewport vem do elemento raiz. */ html:has(#bg-canvas)::-webkit-scrollbar-track { background: #0F172A; } html:has(#bg-canvas)::-webkit-scrollbar-thumb { background: #374151; } /* gray-700 */ html:has(#bg-canvas)::-webkit-scrollbar-thumb:hover { background: #4B5563; } /* gray-600 */ html:has(#bg-canvas) { scrollbar-color: #374151 #0F172A; } /* Header com fundo ao rolar — mesmo escuro do painel de login */ #header.scrolled { background: rgba(15, 23, 42, .85); /* #0F172A */ backdrop-filter: blur(14px); border-bottom: 1px solid #1F2937; /* gray-800 */ } /* Card de produto */ .product-card { position: relative; overflow: hidden; border-radius: .75rem; border: 1px solid #E5E7EB; /* gray-200 */ background: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .product-card:hover { transform: translateY(-4px); border-color: #EAB308; /* yellow-500 */ box-shadow: 0 12px 28px -10px rgba(17,24,39,.18); } .product-card .cover { transition: transform .5s ease; } .product-card:hover .cover { transform: scale(1.06); } /* Seção "Soluções" tem fundo amarelo sólido: os cards viram branco puro e a ação passa a ser escura, porque botão amarelo sobre amarelo não teria contraste. */ #solucoes .product-card { border-color: rgba(255, 255, 255, .8); box-shadow: 0 12px 30px -14px rgba(113, 63, 18, .55); } #solucoes .product-card:hover { border-color: #fff; box-shadow: 0 18px 38px -16px rgba(113, 63, 18, .6); } #solucoes .card-cta { background-color: #111827; } /* gray-900 */ #solucoes .card-cta:hover { background-color: #374151; } /* gray-700 */ /* Setas do carrossel sobre o amarelo */ #solucoes #car-prev, #solucoes #car-next { border-color: rgba(255,255,255,.85); } /* Revelação ao rolar */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.visible { opacity: 1; transform: none; } /* ---------- Véu de carregamento (só na landing) ---------- Todo o conteúdo institucional vem da API, então o HTML nasce com o texto padrão e o `renderSite()` troca por cima: a pessoa lia o texto de fábrica e via ele mudar na cara dela. O véu cobre a viewport com blur alto enquanto o cadastro é aplicado e sai em fade — a página só aparece nítida já correta. `backdrop-filter` em vez de `filter` no conteúdo: filtro em ancestral vira bloco de contenção e quebraria o `position: fixed` do header e do canvas. `display: none` por padrão, e a fase é marcada pelo script inline do (`html.pre-carga`). Navegador sem JS — que também não trocaria o texto — mostra a página normal em vez de ficar borrado para sempre. */ #boot-veil { display: none; } .pre-carga #boot-veil { display: block; position: fixed; inset: 0; z-index: 60; /* acima do modal (z-50) e do header (z-40) */ pointer-events: none; /* não bloqueia clique nem se o fade travar */ background: rgba(15, 23, 42, .55); /* #0F172A do fundo da landing */ backdrop-filter: blur(28px) saturate(.85); -webkit-backdrop-filter: blur(28px) saturate(.85); opacity: 1; transition: opacity .8s ease, background-color .8s ease, backdrop-filter .8s ease, -webkit-backdrop-filter .8s ease; } /* O blur vai a zero junto com a opacidade: sem animar o filtro, o conteúdo ficaria borrado até o fim do fade e "estalaria" nítido no último frame. */ .pre-carga.revelado #boot-veil { opacity: 0; background: rgba(15, 23, 42, 0); backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .product-card, .product-card .cover { transition: none; } html { scroll-behavior: auto; } /* O véu continua (é o que esconde a troca de texto), só encurta a saída */ .pre-carga #boot-veil { transition: opacity .2s linear; } }