/* ---- css/base/reset.css ---- */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; } body{ overflow-x:hidden; width:100%; } img{ display:block; max-width:100%; } button{ cursor:pointer; border:none; background:none; } a{ text-decoration:none; } ul{ list-style:none; } /* ---- css/base/variables.css ---- */ :root{ /* ===== Cores de marca (fixas, nao mudam com o tema) ===== */ --primaria:#1D173F; --secundaria:#A678FF; --primaria-hover:#2A2256; --secundaria-hover:#915DFF; --sucesso:#23C16B; --erro:#F04438; --aviso:#F79009; /* ===== Superficies e texto (mudam conforme o tema, ver theme.css) ===== Tema padrao (claro) definido aqui no :root. Temas "escuro" e "invertido" sobrescrevem estes mesmos nomes em [data-theme="escuro"] / [data-theme="invertido"]. */ --background:#F6F7FB; --surface:#FFFFFF; --surface-2:#F6F3FF; --texto:#222222; --texto-claro:#666666; --borda:#E4E4E7; /* Cor dos títulos (h1-h6) e de números/labels de destaque em cima de um --surface. No padrão é a marca (roxo escuro); nos temas escuros vira a mesma cor do texto (clara), senão fica ilegível. */ --titulo-cor:var(--primaria); --shadow: 0 15px 40px rgba(0,0,0,.08); /* ===== "Chrome" - navbar, footer e sidebar do painel ===== No tema padrao e no escuro o chrome continua roxo com texto claro. No tema invertido o chrome vira claro com texto escuro. */ --bg-chrome:#1D173F; --texto-chrome:#FFFFFF; --texto-chrome-claro:#C9C3E0; --link-chrome:#A678FF; --link-chrome-hover:#5b2eb6; --borda-chrome:rgba(255,255,255,.08); --chrome-hover-bg:rgba(255,255,255,.06); --sombra-chrome:0 5px 20px rgba(0,0,0,.08); /* Cor de destaque dinamica: muda conforme a area selecionada em "Como Trabalhamos" (ver servicos.js). Vale para o passo a passo, transicao, feedbacks e FAQ. O padrao abaixo e o roxo da marca (area "Apps"). */ --acento:#A678FF; --acento-rgb:166,120,255; /* Fontes */ --titulo:'Poppins',sans-serif; --texto-fonte:'Inter',sans-serif; /* Espacamentos */ --radius:18px; --radius-small:10px; --transition:.35s ease; /* Navbar */ --navbar-height:80px; } /* ---- css/base/themes.css ---- */ /* ===================================================================== TEMAS DO SITE [data-theme] fica no , definido pelo theme.js (com fallback inline no pra não piscar). "padrao" usa os valores do :root em variables.css e nem precisa de bloco aqui. ===================================================================== */ /* ============================== ESCURO ============================== A ideia do usuário: continua com a mesma estrutura do tema padrão (chrome roxo no header/footer/sidebar), mas todo fundo que hoje é branco/claro vira escuro, pra melhorar a visibilidade à noite. */ [data-theme="escuro"]{ --background:#0D0B1A; --surface:#171331; --surface-2:#1E1940; --texto:#EDEDF5; --texto-claro:#A8A3C0; --borda:#2A2550; --titulo-cor:var(--texto); --shadow: 0 15px 40px rgba(0,0,0,.35); /* chrome continua roxo, igual ao padrão */ } /* ============================= INVERTIDO ============================= A cor primária vira o "main" (fundo geral das páginas) e o chrome (header/footer/sidebar do painel) vira claro — o inverso do padrão. Texto sobre fundo roxo precisa ser claro; texto sobre o chrome claro precisa ser escuro. */ [data-theme="invertido"]{ --background:#1D173F; --surface:#2B2358; --surface-2:#332A66; --texto:#F5F3FF; --texto-claro:#C3B9EA; --borda:rgba(255,255,255,.14); --titulo-cor:var(--texto); --shadow: 0 15px 40px rgba(0,0,0,.35); --bg-chrome:#FFFFFF; --texto-chrome:#1D173F; --texto-chrome-claro:#5B5480; --link-chrome:#7A4FDB; --link-chrome-hover:#1D173F; --borda-chrome:#E4E4E7; --chrome-hover-bg:rgba(0,0,0,.045); --sombra-chrome:0 5px 20px rgba(0,0,0,.1); } /* ===================================================================== LOGO — troca de arquivo conforme o tema Cada local que mostra a logo (sidebar, navbar, footer) inclui as duas versões no HTML; aqui a gente só decide qual fica visível. Padrão/escuro: logo clara (fundo do chrome é roxo). Invertido: logo escura (fundo do chrome vira branco). ===================================================================== */ .logo-tema-invertido{ display:none; } [data-theme="invertido"] .logo-tema-padrao{ display:none; } [data-theme="invertido"] .logo-tema-invertido{ display:block; } /* ---- css/base/typography.css ---- */ h1, h2, h3, h4, h5, h6{ font-family:var(--titulo); color:var(--titulo-cor); font-weight:700; overflow-wrap:break-word; word-break:break-word; } h1{ font-size:3.5rem; } h2{ font-size:2.5rem; } h3{ font-size:1.6rem; } p{ line-height:1.7; color:var(--texto-claro); } .section-title{ margin-bottom:15px; } .section-subtitle{ align-items:center; } .faq-section-subtitle{ max-width:700px; margin:0 auto; } .serv-section-subtitle{ max-width:200px; margin:0 auto; } /* ---- css/base/global.css ---- */ body{ background:var(--background); color:var(--texto); font-family:var(--texto-fonte); transition:background-color .35s ease, color .35s ease; } /* Troca de tema mais suave nos blocos que têm fundo/borda próprios */ .navbar, .footer, .sidebar, .conta-drawer, [class*="card"], [class*="painel"], section{ transition:background-color .35s ease, color .35s ease, border-color .35s ease; } .container{ width:min(1200px,92%); margin:auto; } section{ padding:90px 0; } .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:60px; } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } .center{ text-align:center; } .hidden{ display:none; } /* ---- css/base/animations.css ---- */ .fade{ animation:fade .5s; } @keyframes fade{ from{ opacity:0; transform:translateY(25px); } to{ opacity:1; transform:translateY(0); } } @keyframes flutuar{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } 100%{ transform:translateY(0); } } /* ---- css/base/responsive.css ---- */ @media(max-width:992px){ .grid-2{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:repeat(2,1fr); } } @media(max-width:700px){ h1{ font-size:2.5rem; } h2{ font-size:2rem; } .grid-4{ grid-template-columns:1fr; } } @media(max-width:400px){ h1{ font-size:2.1rem; } h2{ font-size:1.7rem; } } /* ---- css/components/buttons.css ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:16px 34px; border-radius:50px; border:none; appearance:none; -webkit-appearance:none; background:var(--secundaria); color:white; font-weight:600; font-family:inherit; font-size:1rem; cursor:pointer; transition:var(--transition); } .btn:hover{ transform:translateY(-3px); background:var(--secundaria-hover); } .btn-outline{ background:none; border:2px solid var(--secundaria); color:var(--secundaria); appearance:none; -webkit-appearance:none; cursor:pointer; font-family:inherit; font-size:1rem; } .btn-outline:hover{ color:white; background:var(--secundaria); } /* ---- css/components/navbar.css ---- */ .navbar{ position:fixed; top:0; left:0; width:100%; height:80px; display:flex; align-items:center; z-index:1000; transition:.4s; background: var(--bg-chrome); } .navbar.scrolled{ background: var(--bg-chrome); backdrop-filter:blur(14px); box-shadow:var(--sombra-chrome); } .navbar-container{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:0 clamp(12px,2vw,40px); } .logo{ display:flex; align-items:center; gap:12px; font-size:1.5rem; font-weight:700; color:var(--texto-chrome); flex-shrink:0; } .logo img{ width:80px; height:auto; object-fit:contain; flex-shrink:0; } .nav-menu{ display:flex; flex-wrap:nowrap; gap:clamp(14px,1.8vw,35px); } .nav-menu a{ color: var(--link-chrome); font-weight:500; font-size:clamp(.85rem,.95vw,1rem); white-space:nowrap; transition:.3s; } .nav-menu a:hover{ color:var(--link-chrome-hover); } .navbar-buttons{ display:flex; gap:clamp(8px,1vw,15px); align-items:center; flex-shrink:0; margin-right: 8px; } .btn-outline{ color: var(--link-chrome); font-weight:500; padding:14px clamp(12px,1.4vw,20px); border:2px solid var(--link-chrome); border-radius:10px; white-space:nowrap; transition:.3s; } .btn-outline:hover{ background-color: var(--link-chrome); color:var(--bg-chrome); } .navbar-logout{ display:flex; align-items:center; justify-content:center; padding:14px; font-size:1.1rem; line-height:1; } .btn{ color:#FFFFFF; background-color: var(--secundaria); font-weight:500; padding:14px clamp(16px,2vw,26px); border-radius:10px; white-space:nowrap; transition:.3s; display:inline-block; } .cta-texto-curto{ display:none; } .btn:hover{ background-color: var(--secundaria-hover); } .nav-menu-account{ display:none; } /* ===== Submenu hambúrguer do "Home" (Serviços/Como Trabalhamos/Feedbacks/FAQ) ===== */ .nav-item-dropdown{ position:relative; } /* Ponte invisível cobrindo o espaço entre o botão e o submenu, pra o hover não se perder no caminho quando o mouse desce até o menu (sem isso, o menu fechava antes do usuário chegar nele). Só faz sentido em telas com mouse de verdade. */ @media(hover:hover) and (pointer:fine){ .nav-item-dropdown::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:240px; height:18px; } } .nav-dropdown-toggle{ display:flex; align-items:center; gap:6px; } .nav-dropdown-caret{ display:flex; align-items:center; justify-content:center; color:var(--link-chrome); font-size:1.05rem; line-height:1; padding:2px; transition:.3s; } .nav-dropdown-caret i{ display:flex; transition:transform .3s ease; } @media(hover:hover) and (pointer:fine){ .nav-dropdown-caret:hover{ color:var(--link-chrome-hover); } } .nav-item-dropdown.aberto .nav-dropdown-caret{ color:var(--link-chrome-hover); } .nav-item-dropdown.aberto .nav-dropdown-caret i{ transform:rotate(-90deg); } /* O :hover só controla abrir/fechar em telas com mouse de verdade. Em touch (celular/tablet) o toque "gruda" no :hover do navegador e o menu nunca soltava — quem manda lá é só o clique (classe "aberto" via JS). */ @media(hover:hover) and (pointer:fine){ .nav-item-dropdown:hover .nav-dropdown-caret{ color:var(--link-chrome-hover); } .nav-item-dropdown:hover .nav-dropdown-caret i{ transform:rotate(-90deg); } } .nav-dropdown-menu{ position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(-8px); display:flex; flex-direction:column; gap:4px; min-width:190px; background:var(--bg-chrome); border:1px solid var(--borda-chrome); border-radius:14px; padding:10px; box-shadow:var(--sombra-chrome); opacity:0; visibility:hidden; pointer-events:none; transition:.25s; z-index:1100; } /* Setinha em "V" no topo do menu, apontando pro botão de hambúrguer que abre — deixa mais claro de onde o menu "nasce" já que agora ele abre pra baixo, e não mais pro lado */ .nav-dropdown-menu::before{ content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:var(--bg-chrome); border-left:1px solid var(--borda-chrome); border-top:1px solid var(--borda-chrome); border-radius:3px 0 0 0; } .nav-dropdown-menu a{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; white-space:nowrap; } .nav-dropdown-menu a:hover{ background:var(--chrome-hover-bg); } .nav-item-dropdown.aberto .nav-dropdown-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } @media(hover:hover) and (pointer:fine){ .nav-item-dropdown:hover .nav-dropdown-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } } /* ===== Links bloqueados pra contas "visitante" (aguardando aprovação) ===== */ .bloqueado-visitante{ opacity:.4; cursor:not-allowed; filter:grayscale(.4); } .aviso-visitante-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); display:flex; align-items:center; gap:10px; max-width:min(90vw,420px); background:var(--bg-chrome); color:var(--texto-chrome); border:1px solid var(--borda-chrome); border-radius:12px; padding:14px 18px; font-size:.9rem; box-shadow:0 15px 30px rgba(0,0,0,.3); opacity:0; z-index:2000; transition:.3s; } .aviso-visitante-toast i{ color:#F79009; font-size:1.2rem; flex-shrink:0; } .aviso-visitante-toast.visivel{ opacity:1; transform:translate(-50%,0); } @media(max-width:1200px){ /* O menu de links (Home/Sobre/Score Lyxus/Pacotes/FAQ/Contato) continua visível aqui, numa linha só — nessa faixa (561px a 1200px) os links já cabem sem precisar rolar. (Antes tinha um "overflow-x:auto" de segurança pra rolar na horizontal, mas isso cortava — via overflow-y:hidden — o submenu do Home, que abre pra baixo por cima do menu: a classe "aberto" era aplicada certinho, só que o conteúdo ficava invisível, cortado pelo próprio contêiner. Removido por não ser necessário nessa faixa.) Só os botões de texto (Registre-se/ Minha Área e Solicitar Orçamento) somem daqui — eles já ficam acessíveis por dentro do painel "Menu" aberto pelo hambúrguer. */ .navbar-container{ gap:14px; } .nav-menu{ flex:1; min-width:0; gap:20px; } .nav-menu a{ font-size:.85rem; } .navbar-buttons{ flex-shrink:0; margin-right:0; } /* Só o botão que abre o painel "Menu" continua visível — o "Solicitar Orçamento" e o "Minha Área/Registre-se" de texto já estão acessíveis por dentro do painel, então somem daqui pra deixar a barra mobile limpa (só logo + hambúrguer). Como agora ele fica sozinho (antes dividia espaço com mais 2 botões), reduzido um pouco pra não ficar destoando. */ .navbar-buttons > *:not(.navbar-logout){ display:none; } .navbar-logout{ padding:10px; font-size:1rem; } } @media(max-width:560px){ /* Abaixo de 560px o menu de links (Home/Sobre/Score Lyxus/Pacotes/FAQ/Contato) não cabe mais numa linha só, nem com fonte reduzida. Em vez de ficar numa faixa que rola na horizontal (sem indicação visual de que dá pra rolar, o que fazia os links parecerem "sumidos"), a navbar passa a crescer em altura e o menu quebra pra uma segunda linha, deixando todos os links sempre visíveis. */ .navbar{ height:auto; min-height:80px; } .navbar-container{ flex-wrap:wrap; row-gap:10px; padding-top:14px; padding-bottom:14px; position:relative; } /* Nessa largura o submenu fica ancorado exatamente na borda esquerda do "Home" (sem centralizar), e o texto quebra linha em vez de ficar numa linha só — assim dá pra deixar a caixa bem mais estreita e coladinha no "Home", sem estourar a lateral da tela. */ .nav-dropdown-menu{ left:0; transform:translateY(-8px); width:min(150px,calc(100vw - 56px)); min-width:0; } .nav-item-dropdown.aberto .nav-dropdown-menu{ transform:translateY(0); } .nav-dropdown-menu a{ white-space:normal; line-height:1.25; } .nav-dropdown-menu::before{ display:none; } .logo{ order:1; } .logo img{ width:50px; } .navbar-buttons{ order:2; gap:6px; margin-right:0; } .nav-menu{ order:3; flex:0 0 100%; width:100%; min-width:0; overflow:visible; flex-wrap:wrap; justify-content:center; gap:10px 16px; } .nav-menu a{ font-size:.8rem; } .btn-outline:not(.navbar-logout){ display:none; } .btn{ padding:11px 14px; font-size:.85rem; } .cta-texto-completo{ display:none; } .cta-texto-curto{ display:inline; } } /* ---- css/components/footer.css ---- */ .footer{ background:var(--bg-chrome); color:var(--texto-chrome); padding-top:80px; } .footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:40px; } .footer-logo{ width:150px; height:auto; object-fit:contain; margin-bottom:20px; } .footer h3{ margin-bottom:20px; font-family:var(--titulo); color:var(--texto-chrome); } .footer li{ margin-bottom:12px; } .footer-col-sobre .redes{ flex-direction:row; margin-top:24px; } .footer-col-sobre .redes a{ width:38px; height:38px; min-width:38px; min-height:38px; } .footer-col-sobre .redes i{ font-size:18px; } .footer li a{ transition:var(--transition); color:var(--link-chrome); display:inline-flex; align-items:center; gap:8px; } .footer li a:hover{ color:var(--link-chrome-hover); } .redes{ display:flex; flex-direction:column; gap:14px; margin-top:20px; color:#A678FF; } .redes a{ width:45px; height:45px; min-width:45px; min-height:45px; flex-shrink:0; border-radius:50%; background:#A678FF; display:flex; justify-content:center; align-items:center; transition:var(--transition); } .redes a:hover{ background: linear-gradient(135deg, #A678FF 0%, #4a3a8f 100%); } .redes i{ font-size:22px; color:white; } .footer-copy{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px; padding:30px; margin-top:60px; border-top:1px solid var(--borda-chrome); font-size:.85rem; color:var(--texto-chrome-claro); } .footer-legal{ display:flex; flex-wrap:wrap; gap:8px 20px; } .footer-legal a{ color:var(--texto-chrome-claro); transition:var(--transition); } .footer-legal a:hover{ color:var(--secundaria); } @media(max-width:640px){ .footer-copy{ justify-content:center; text-align:center; } } .footer-col{ text-align:left; } /* ---- css/components/theme-switcher.css ---- */ .tema-switcher{ display:flex; align-items:center; gap:4px; padding:4px; border-radius:30px; background:rgba(255,255,255,.08); border:1px solid var(--borda-chrome); flex-shrink:0; } [data-theme="invertido"] .tema-switcher{ background:rgba(0,0,0,.04); } .tema-opcao{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:var(--texto-chrome-claro); font-size:1rem; transition:var(--transition); flex-shrink:0; } .tema-opcao:hover{ color:var(--texto-chrome); background:rgba(255,255,255,.1); } [data-theme="invertido"] .tema-opcao:hover{ background:rgba(0,0,0,.06); } .tema-opcao.ativo{ background:var(--secundaria); color:#FFFFFF; } /* Versão compacta usada dentro da sidebar do painel/staff e do drawer de "Minha Conta" — ali o layout é sempre em coluna, então faz sentido ocupar a largura toda. */ .sidebar .tema-switcher--bloco, .sidebar-painel .tema-switcher--bloco, .conta-drawer .tema-switcher--bloco{ width:calc(100% - 48px); justify-content:center; margin:16px 24px; } /* ---- css/components/conta-drawer.css ---- */ .conta-drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.3s; z-index:1999; } .conta-drawer-overlay.aberto{ opacity:1; pointer-events:auto; } .conta-drawer{ position:fixed; top:0; right:0; width:280px; max-width:82vw; height:100vh; background:var(--bg-chrome); z-index:2000; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease; box-shadow:-10px 0 30px rgba(0,0,0,.25); } .conta-drawer.aberto{ transform:translateX(0); } .conta-drawer-top{ display:flex; flex-direction:column; gap:16px; padding:24px; border-bottom:1px solid var(--borda-chrome); } .conta-drawer-top-linha{ display:flex; align-items:center; justify-content:space-between; } .conta-drawer-top img{ height:30px; } .conta-drawer-fechar{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--texto-chrome-claro); font-size:1.2rem; border-radius:8px; transition:var(--transition); } .conta-drawer-fechar:hover{ background:var(--chrome-hover-bg); color:var(--texto-chrome); } .conta-drawer nav{ flex:1; padding:18px 14px; overflow-y:auto; } .conta-drawer ul{ list-style:none; display:flex; flex-direction:column; gap:4px; } .conta-drawer li a{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--radius-small); color:var(--texto-chrome-claro); font-weight:500; font-size:.92rem; transition:var(--transition); } .conta-drawer li a > span:first-child{ display:inline-flex; align-items:center; gap:12px; } .conta-drawer li a i{ font-size:1.15rem; } .conta-drawer li a:hover{ background:var(--chrome-hover-bg); color:var(--texto-chrome); } .conta-drawer-saudacao{ padding:6px 16px 14px; color:var(--texto-chrome); font-weight:600; font-family:var(--titulo); } .conta-drawer-titulo{ margin-top:14px; padding:14px 16px 4px; color:var(--texto-chrome-claro); font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; border-top:1px solid var(--borda-chrome); } .conta-drawer-sair{ margin-top:auto; padding-top:14px; border-top:1px solid var(--borda-chrome); } .conta-drawer-sair a{ color:#ff8a8a; } .conta-drawer-sair a:hover{ color:#ff5c5c; background:rgba(255,90,90,.08); } .conta-drawer li a.bloqueado-visitante{ justify-content:space-between; } .conta-drawer-tag-bloqueado{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; padding:2px 8px; border-radius:6px; font-size:.65rem; text-transform:uppercase; letter-spacing:.3px; background:rgba(247,144,9,.15); color:#F79009; white-space:nowrap; } .conta-drawer-tag-bloqueado i{ font-size:.75rem; } /* ---- css/components/cards.css ---- */ .badge{ display:inline-block; background:var(--surface-2); color:var(--secundaria); padding:11px 26px; border-radius:30px; font-weight:700; font-size:1.05rem; letter-spacing:.5px; margin-bottom:20px; } /* Cards de feedback (estilo escuro com brilho) */ #feedback-grid .card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:35px 30px; transition:var(--transition); } #feedback-grid .card:hover{ transform:translateY(-6px); border-color:var(--acento); box-shadow:0 15px 40px rgba(var(--acento-rgb),.25); } #feedback-grid .card .stars{ display:block; color:var(--acento); font-size:1.05rem; letter-spacing:3px; margin-bottom:18px; } #feedback-grid .card h3{ color:#FFFFFF; font-size:1.15rem; margin-bottom:10px; } #feedback-grid .card p{ color:#B9B4CE; font-size:.95rem; line-height:1.6; } /* ---- css/components/forms.css ---- */ form{ width:100%; } .form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:25px; } .form-actions{ display:flex; gap:15px; margin-top:20px; flex-wrap:wrap; } @media(max-width:700px){ .form-grid{ grid-template-columns:1fr; } } /* ---- css/components/faq.css ---- */ .faq .badge{ background:rgba(var(--acento-rgb),.15); color:var(--acento); } /* Link "Como Trabalhamos" dentro do texto de apoio do FAQ — leva de volta pra seção "Nossas Áreas de Atuação" (#servicos), onde dá pra trocar a área selecionada. */ .faq-link-processo{ color:var(--acento); font-weight:600; } .faq-link-processo:hover{ text-decoration:underline; } /* ===== Layout: balões à esquerda, painel visual à direita ===== */ .faq-layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; } .faq-grid{ display:flex; flex-direction:column; gap:22px; } .faq-bubble{ position:relative; background:var(--surface); border:2px solid var(--borda); border-radius:26px; padding:26px 30px; cursor:pointer; transform:rotate(var(--rot,0deg)) translateY(var(--desloca-y,0px)); animation:flutuarCaotico 5.5s ease-in-out infinite; animation-delay:var(--delay,0s); transition:border-color var(--transition), box-shadow var(--transition); } @keyframes flutuarCaotico{ 0%,100%{ transform:rotate(var(--rot,0deg)) translateY(var(--desloca-y,0px)); } 50%{ transform:rotate(calc(var(--rot,0deg) * -1)) translateY(calc(var(--desloca-y,0px) - 10px)); } } .faq-bubble::after{ content:""; position:absolute; bottom:-12px; left:38px; width:24px; height:24px; background:var(--surface); border-right:2px solid var(--borda); border-bottom:2px solid var(--borda); border-radius:0 0 6px 0; transform:rotate(45deg); transition:border-color var(--transition); } .faq-bubble:nth-child(even){ animation-duration:6.5s; } .faq-bubble:hover{ border-color:var(--acento); } .faq-bubble:hover::after{ border-color:var(--acento); } /* Abertos por padrão */ .faq-bubble.aberto{ animation-play-state:paused; transform:rotate(calc(var(--rot,0deg) * .4)); border-color:var(--acento); box-shadow:0 15px 35px rgba(var(--acento-rgb),.2); } .faq-bubble.aberto::after{ border-color:var(--acento); } .faq-pergunta{ margin:0; font-family:var(--titulo); font-weight:700; color:var(--titulo-cor); line-height:1.4; } .faq-resposta{ max-height:0; overflow:hidden; opacity:0; margin:0; color:var(--texto-claro); line-height:1.6; font-size:.95rem; transition:max-height .4s ease, opacity .3s ease, margin-top .4s ease; } .faq-bubble.aberto .faq-resposta{ max-height:260px; opacity:1; margin-top:14px; } /* ===== Painel visual à direita ===== */ .faq-visual{ position:relative; height:420px; border-radius:var(--radius); background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; } .faq-visual-icone{ width:140px; height:140px; border-radius:50%; background:linear-gradient(135deg,var(--primaria),var(--secundaria)); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-size:3.2rem; box-shadow:var(--shadow); animation:flutuar 4s ease-in-out infinite; z-index:1; } .faq-visual-dot{ position:absolute; border-radius:50%; background:var(--secundaria); opacity:.18; } .faq-visual .d1{ width:100px; height:100px; top:35px; left:45px; animation:flutuar 3.6s ease-in-out infinite; } .faq-visual .d2{ width:56px; height:56px; bottom:55px; right:55px; animation:flutuar 4.3s ease-in-out infinite; } .faq-visual .d3{ width:34px; height:34px; top:90px; right:40px; animation:flutuar 3s ease-in-out infinite; } /* ===== Responsivo ===== */ @media(max-width:900px){ .faq-layout{ grid-template-columns:1fr; } .faq-visual{ height:220px; order:-1; } } /* ---- css/components/processo.css ---- */ /* ===== Navbar de abas ===== */ .processo-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:50px; } .tab-btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:50px; border:2px solid var(--borda); background:var(--surface); color:var(--texto-claro); font-family:var(--titulo); font-weight:600; font-size:.95rem; cursor:pointer; transition:var(--transition); } .tab-btn i{ font-size:1.1rem; } .tab-btn:hover{ border-color:var(--acento); color:var(--acento); } .tab-btn.ativo{ background:var(--acento); border-color:var(--acento); color:#FFFFFF; box-shadow:0 10px 25px rgba(var(--acento-rgb),.3); } .processo .badge{ background:rgba(var(--acento-rgb),.15); color:var(--acento); } /* ===== Info + passo a passo ===== */ .processo-info{ max-width:760px; margin:0 auto; text-align:center; } #titulo-processo{ margin-top:45px; margin-bottom:22px; } .processo-info .section-subtitle{ margin:0 auto 45px; } /* ===== Passo a passo em balões ===== */ .timeline{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:34px 26px; text-align:left; } .etapa-balao{ position:relative; background:var(--surface); border:2px solid var(--borda); border-radius:20px; padding:24px 22px 22px 26px; opacity:0; transition:border-color var(--transition), box-shadow var(--transition); } .etapa-balao.visivel{ animation-name:entrarComMouse, flutuarBalao; animation-duration:.7s, 5s; animation-timing-function:ease, ease-in-out; animation-iteration-count:1, infinite; animation-fill-mode:forwards, none; animation-delay:var(--delay,0s), calc(var(--delay,0s) + .7s); } .etapa-balao:hover{ border-color:var(--acento); box-shadow:0 15px 30px rgba(var(--acento-rgb),.15); } .etapa-cursor{ position:absolute; left:-60px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--acento); opacity:0; pointer-events:none; } .etapa-balao.visivel .etapa-cursor{ animation:cursorArrastar .7s ease forwards; animation-delay:var(--delay,0s); } @keyframes entrarComMouse{ 0%{ opacity:0; transform:translateX(-50px); } 100%{ opacity:1; transform:translateX(0); } } @keyframes cursorArrastar{ 0%{ opacity:0; left:-90px; } 45%{ opacity:1; left:-46px; } 100%{ opacity:0; left:-10px; } } .etapa-numero{ position:absolute; top:-18px; left:-14px; width:46px; height:46px; border-radius:50%; background:var(--acento); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-family:var(--titulo); font-weight:800; font-size:1.15rem; box-shadow:0 8px 20px rgba(var(--acento-rgb),.4); border:3px solid var(--surface); } .etapa-titulo{ margin:0 0 8px; font-family:var(--titulo); font-weight:700; font-size:1.05rem; color:var(--titulo-cor); } .etapa-descricao{ margin:0; font-size:.9rem; line-height:1.6; color:var(--texto-claro); } @keyframes flutuarBalao{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-10px) rotate(.6deg); } } /* ===== Cards da grade "Nossas Áreas" ===== */ .nao-quebra{ white-space:nowrap; } .servico-card{ background:var(--surface); border:2px solid var(--borda); border-radius:var(--radius); padding:35px 25px; text-align:center; cursor:pointer; transition:var(--transition); } .servico-card:hover{ border-color:var(--secundaria); transform:translateY(-6px); } .servico-card.ativo{ border-color:var(--secundaria); background:var(--surface-2); box-shadow:var(--shadow); } .servico-card .icon{ width:60px; height:60px; margin:0 auto 20px; border-radius:16px; background:var(--secundaria); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-size:1.6rem; } .servico-card h3{ margin-bottom:8px; } .servico-card p{ font-size:1.0rem; margin:0; } /* ========================================================== TRANSIÇÃO EM TELA CHEIA (ao trocar de área) ========================================================== */ .transicao{ position:fixed; inset:0; z-index:9999; background:var(--primaria); opacity:0; pointer-events:none; transition:opacity .35s ease; } .transicao.ativa{ opacity:1; } .transicao-cena{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; overflow:hidden; } .transicao-cena.ativa{ display:flex; } /* --- Apps --- */ .cena-apps .cena-phone{ width:130px; height:130px; border-radius:32px; background:var(--acento); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-size:3rem; animation:flutuar 2s ease-in-out infinite; } .cena-apps .cena-icon{ position:absolute; width:64px; height:64px; border-radius:50%; background:#FFFFFF; color:var(--acento); display:flex; align-items:center; justify-content:center; font-size:1.6rem; animation:flutuar 1.8s ease-in-out infinite; } .cena-apps .ci1{ top:22%; left:32%; } .cena-apps .ci2{ bottom:26%; left:28%; animation-delay:.2s; } .cena-apps .ci3{ top:26%; right:30%; animation-delay:.4s; } .cena-apps .ci4{ bottom:24%; right:32%; animation-delay:.6s; } /* --- Desenvolvimento Web (matrix + pseudocódigo) --- */ .cena-sites canvas{ width:100%; height:100%; display:block; } /* --- Bloco de pseudocódigo (comum às 4 áreas) --- */ .cena-codigo{ position:absolute; bottom:12%; left:50%; transform:translate(-50%,10px); background:rgba(0,0,0,.35); border:1px solid rgba(var(--acento-rgb),.45); border-radius:16px; padding:20px 30px; font-family:monospace; font-size:1.3rem; color:var(--acento); text-align:left; opacity:0; animation:blocoFade 1.4s ease forwards; } .cena-codigo .linha{ opacity:0; animation:linhaFade .4s ease forwards; } .cena-codigo .linha:nth-child(1){ animation-delay:.15s; } .cena-codigo .linha-passo{ animation-delay:.55s; color:#FFFFFF; } .cena-codigo .linha:nth-child(3){ animation-delay:.95s; } @keyframes blocoFade{ 0%{ opacity:0; transform:translate(-50%,10px); } 15%{ opacity:1; transform:translate(-50%,0); } 85%{ opacity:1; } 100%{ opacity:0; } } @keyframes linhaFade{ from{ opacity:0; } to{ opacity:1; } } /* --- Design --- */ .cena-design .cena-shape{ position:absolute; width:90px; height:90px; border-radius:20px; background:var(--acento); box-shadow:0 20px 50px rgba(var(--acento-rgb),.5); animation:arrastarForma 1.4s ease-in-out infinite; } .cena-design .cena-cursor{ position:absolute; font-size:2.4rem; color:#FFFFFF; animation:arrastarCursor 1.4s ease-in-out infinite; } @keyframes arrastarForma{ 0%,10%{ left:35%; top:35%; } 90%,100%{ left:55%; top:55%; } } @keyframes arrastarCursor{ 0%,10%{ left:37%; top:38%; } 90%,100%{ left:57%; top:58%; } } /* --- Marketing --- */ .cena-marketing{ flex-direction:column; gap:30px; } .cena-bars{ display:flex; align-items:flex-end; gap:18px; height:220px; } .cena-bars span{ width:30px; border-radius:8px 8px 0 0; background:linear-gradient(180deg,var(--acento),var(--primaria)); transform-origin:bottom; animation:crescerBarra 1.2s ease-in-out infinite; } .cena-bars span:nth-child(1){ height:35%; animation-delay:0s; } .cena-bars span:nth-child(2){ height:60%; animation-delay:.1s; } .cena-bars span:nth-child(3){ height:45%; animation-delay:.2s; } .cena-bars span:nth-child(4){ height:90%; animation-delay:.3s; } .cena-bars span:nth-child(5){ height:70%; animation-delay:.4s; } @keyframes crescerBarra{ 0%,100%{ transform:scaleY(.8); } 50%{ transform:scaleY(1); } } .cena-arrow{ font-size:3rem; color:#FFFFFF; animation:flutuar 1.6s ease-in-out infinite; } /* ===== Responsivo ===== */ @media(max-width:600px){ .timeline{ grid-template-columns:1fr; } } /* ---- css/components/feedback.css ---- */ .feedback-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center; } .feedback-info .section-title{ color:#FFFFFF; } .feedback-info .section-subtitle{ color:#B9B4CE; margin:0; } .feedback-info .badge{ background:rgba(var(--acento-rgb),.15); color:var(--acento); } /* ===== Filtro de feedbacks (Todos / Mais estrelas / Mais completos) ===== */ .feedback-filtros{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; } .feedback-filtro{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#B9B4CE; padding:9px 18px; border-radius:30px; font-size:.85rem; font-weight:600; cursor:pointer; transition:var(--transition); } .feedback-filtro:hover{ border-color:var(--acento); color:#FFFFFF; } .feedback-filtro.ativo{ background:var(--acento); border-color:var(--acento); color:#FFFFFF; } .feedback-filtros-area{ margin-top:24px; margin-bottom:2px; gap:8px; } .feedback-filtros-area .feedback-filtro{ padding:7px 14px; font-size:.8rem; } /* Se mesmo com o ajuste acima ainda não couber tudo numa linha só (telas menores), o JS detecta a quebra e adiciona esta classe: "Todas as áreas" vira sozinho a primeira linha, e as demais áreas quebram normalmente entre si na(s) linha(s) de baixo. */ .feedback-filtros-area.filtro-area-quebrado [data-feedback-area="todas"]{ flex:1 1 100%; } .feedback-filtros:not(.feedback-filtros-area){ margin-top:12px; } /* ===== Tag de área dentro do card (mostra de qual área é o depoimento agora que os feedbacks não ficam mais separados) ===== */ .feedback-card-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; } #feedback-grid .card .feedback-card-topo .stars{ margin-bottom:0; } .feedback-tag{ flex-shrink:0; background:rgba(var(--acento-rgb),.12); color:var(--tag-cor, var(--acento)); border:1px solid var(--tag-cor, var(--acento)); padding:3px 12px; border-radius:20px; font-size:.72rem; font-weight:600; white-space:nowrap; } .feedback-vazio{ color:#B9B4CE; padding:20px 0; } /* ===== Trilho do carrossel ===== */ .feedback-info{ min-width:0; } .feedback-carousel{ width:100%; min-width:0; } .feedback-track{ display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; } .feedback-track::-webkit-scrollbar{ display:none; } .feedback-track .card{ flex:0 0 62%; } @media(max-width:768px){ .feedback-track .card{ flex:0 0 80%; } } /* ===== Barra de arrastar (scrub) ===== */ .feedback-scrub{ position:relative; height:3px; border-radius:3px; background:rgba(255,255,255,.12); margin-top:22px; cursor:pointer; user-select:none; } .feedback-scrub-fill{ position:absolute; top:0; left:0; height:100%; width:40%; border-radius:3px; background:var(--acento); transition:width .1s linear; } /* ===== Layout responsivo ===== */ @media(max-width:992px){ .feedback-layout{ grid-template-columns:1fr; gap:35px; } } /* ---- css/components/categoria-icone.css ---- */ /* ============================================================ Ícone / imagem de categorias do blog - Badge redondo usado no dashboard e no header da categoria - Seletor de ícone (Remix Icon) usado nos formulários do dashboard (novo/editar categoria) ============================================================ */ .categoria-visual-icone, .categoria-visual-img{ display:inline-block; vertical-align:middle; object-fit:cover; border-radius:50%; } /* Dentro de badges com texto (post-card, badge da categoria) */ .badge .categoria-visual-icone, .badge .categoria-visual-img, .post-card-categoria .categoria-visual-icone, .post-card-categoria .categoria-visual-img{ margin-right:2px; } .blog-sidebar-bloco a{ display:inline-flex; align-items:center; gap:8px; } /* Badge redondo (dashboard e header da página de categoria) */ .categoria-visual-badge{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; flex-shrink:0; } .categoria-visual-badge-grande{ width:56px; height:56px; margin-right:14px; } .blog-hero-categoria-titulo{ display:flex; align-items:center; } /* ===== Seletor de ícone (dashboard) ===== */ .categoria-icone-picker{ display:flex; align-items:center; gap:12px; } .categoria-icone-picker input[type="text"]{ flex:1; } .categoria-icone-preview{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; flex-shrink:0; border-radius:var(--radius-small); border:2px solid var(--borda); font-size:1.4rem; color:var(--secundaria); } .campo-ajuda{ color:var(--texto-claro); font-size:.8rem; line-height:1.4; } .campo-ajuda a{ color:var(--secundaria); text-decoration:underline; } .categoria-imagem-preview{ width:80px; height:80px; margin-top:6px; border-radius:var(--radius-small); object-fit:cover; border:2px solid var(--borda); } .categoria-icone-modal{ max-width:560px; } .categoria-icone-busca{ width:100%; padding:12px 16px; border:2px solid var(--borda); border-radius:var(--radius-small); font-family:var(--texto-fonte); font-size:.9rem; margin:14px 0 18px; } .categoria-icone-busca:focus{ outline:none; border-color:var(--secundaria); } .categoria-icone-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:8px; max-height:320px; overflow-y:auto; } .categoria-icone-item{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--radius-small); border:2px solid var(--borda); background:var(--surface); color:var(--texto); font-size:1.3rem; cursor:pointer; transition:var(--transition); } .categoria-icone-item:hover{ border-color:var(--secundaria); color:var(--secundaria); background:var(--surface-2); } .categoria-icone-vazio{ grid-column:1 / -1; text-align:center; color:var(--texto-claro); font-size:.88rem; padding:20px 0; } /* ---- css/components/cookie-banner.css ---- */ /* ============================================================ Banner de consentimento de cookies (Aceitar / Recusar) ============================================================ */ .cookie-banner{ position:fixed; left:20px; right:20px; bottom:20px; z-index:3000; max-width:920px; margin:0 auto; background:var(--surface); border:1px solid var(--borda); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 26px; display:flex; flex-wrap:wrap; align-items:center; gap:18px; justify-content:space-between; animation:cookieBannerEntrar .4s ease; } @keyframes cookieBannerEntrar{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } .cookie-banner-texto{ flex:1 1 420px; } .cookie-banner-texto p{ margin:0; color:var(--texto); font-size:.88rem; line-height:1.6; } .cookie-banner-texto a{ color:var(--secundaria); font-weight:600; text-decoration:underline; } .cookie-banner-acoes{ display:flex; gap:12px; flex-shrink:0; } .cookie-banner-acoes .btn, .cookie-banner-acoes .btn-outline{ padding:11px 22px; font-size:.88rem; white-space:nowrap; } @media (max-width:640px){ .cookie-banner{ left:12px; right:12px; bottom:12px; padding:18px; flex-direction:column; align-items:stretch; } .cookie-banner-acoes{ justify-content:stretch; } .cookie-banner-acoes .btn, .cookie-banner-acoes .btn-outline{ flex:1; text-align:center; } }