.hidden-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .visible { opacity: 1; transform: translateY(0); } /* =========================== šŸŒ VariĆ”veis Globais (Cores) =========================== */ :root { --green: #75a849; /* Cor principal: verde institucional */ --blue: #00284f; /* Azul escuro: cor de fundo do header e rodapĆ© */ --gray: #545454; /* Cinza para textos e detalhes */ --black: #000; /* Preto padrĆ£o */ --white: #fff; /* Branco padrĆ£o */ } /* =========================== šŸ”„ Reset Global de Estilo =========================== */ * { margin: 0; padding: 0; box-sizing: border-box; /* Garante que padding e border nĆ£o alterem tamanho real dos elementos */ } /* =========================== šŸ“„ ConfiguraĆ§Ć£o Base do =========================== */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografia amigĆ”vel e moderna */ line-height: 1.6; /* EspaƧamento entre linhas */ color: #333; /* Cor de texto neutra */ } /* =========================== šŸ“¦ Container Centralizado =========================== */ .container { max-width: 1200px; /* Largura mĆ”xima para desktops */ margin: 0 auto; /* Centraliza horizontalmente */ padding: 0 20px; /* EspaƧamento lateral interno */ } /* =========================== šŸ§¢ Header Geral (fixo no topo) =========================== */ header { background: linear-gradient(135deg, #00284f 0%, #1e3c72 100%); /* Gradiente azul elegante */ color: white; position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: 0 2px 15px rgba(0,0,0,0.1); /* Sombra sutil para destacar do conteĆŗdo */ } /* =========================== šŸ“Œ Faixa Superior (logo + endereƧo) =========================== */ .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: rgba(0,0,0,0.1); /* TransparĆŖncia para contraste leve sobre o gradiente */ /* transition: transform 0.3s ease, opacity 0.3s ease; /* Suporte para ocultar ao rolar */ } .top-bar { z-index: 999; position: relative; } /* Estado oculto ao rolar */ .top-bar.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } /* Logo (lado esquerdo da top-bar) */ .logo img { height: 45px; transition: transform 0.3s ease; filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.597)); /* Adiciona uma sombra branca */ } .logo img:hover { transform: scale(1.05); /* AnimaĆ§Ć£o suave ao passar o mouse */ } /* EndereƧo (lado direito da top-bar) */ .contact-info { display: flex; align-items: center; gap: 10px; font-size: 0.9em; } .contact-info img { width: 20px; height: 20px; } /* =========================== šŸ§­ NavegaĆ§Ć£o Principal =========================== */ nav { position: sticky; top: 0; z-index: 998; /* abaixo da top-bar */ background-color: var(--blue); transition: all 0.3s ease; } /* EstilizaĆ§Ć£o dos links */ nav ul li a { color: white; text-decoration: none; padding: 10px 20px; border-radius: 25px; transition: all 0.3s ease; font-weight: 500; } nav ul li a:hover { background: var(--green); /* Hover em verde */ transform: translateY(-1px); /* Leve animaĆ§Ć£o ao passar o mouse */ } /* Destaque especial para a Ɓrea do Cliente */ .area-do-cliente { background: var(--green) !important; padding: 10px 20px !important; border-radius: 30px !important; font-weight: 600 !important; } /* =========================== šŸ  SeĆ§Ć£o Inicial (Hero) =========================== */ #home { margin-top: 110px; /* Compensa o header fixo */ position: relative; } /* =========================== šŸ” Menu Responsivo (Mobile) =========================== */ @media (max-width: 768px) { header { background: linear-gradient(135deg, #00284f00 0%, #1e3b7200 100%); /* Gradiente azul elegante */ color: white; /*position: fixed;*/ width: 100%; top: 0; z-index: 1000; box-shadow: 0 2px 15px rgba(0, 0, 0, 0); /* Sombra sutil para destacar do conteĆŗdo */ } .menu-toggle { display: flex; flex-direction: column; position: absolute; top: 20px; right: 20px; cursor: pointer; z-index: 1100; } .menu-toggle span { height: 3px; width: 25px; background: rgb(0, 0, 0); margin: 4px 0; transition: all 0.3s ease; } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } nav { display: flex; justify-content: space-between; align-items: center; position: relative; } nav { background: #00284f00; position: fixed; top: 0; width: 100%; z-index: 999; padding: 10px 15px; transition: top 0.3s ease; } .menu { position: absolute; top: 100%; right: 0; background: var(--blue); flex-direction: column; width: 100%; padding: 1rem; display: none; } .menu.active { display: flex; top:0; } .menu a { color: white; padding: 10px; text-align: center; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.1); } .menu a:last-child { border-bottom: none; } .contact-bar-fixed { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ff6600; color: #fff; z-index: 9999; /* acima de tudo */ padding: env(safe-area-inset-bottom, 10px) 15px 10px; /* adapta a barra inferior do iPhone */ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 0.9rem; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); } .contact-bar-content { display: flex; flex-direction: column; gap: 6px; width: 100%; } .contact-bar-btn { background-color: #008000; color: #fff; text-decoration: none; padding: 4px 6px; border-radius: 5px; font-weight: bold; text-align: center; display: inline-block; } } @media screen and (max-width: 768px) { .top-bar { justify-content: center; /* Centraliza horizontalmente */ } .logo { display: flex; justify-content: center; width: 100%; } .contact-info { display: none; /* Esconde o endereƧo */ } .logo img { height: 50px; margin: auto; } } @media (min-width: 769px) { .menu-toggle { display: none; } .menu { display: flex !important; flex-direction: row; justify-content: center; align-items: center; gap: 2rem; } .menu a { color: white; padding: 10px 20px; border-radius: 25px; text-decoration: none; transition: all 0.3s ease; } .menu a:hover { background: var(--green); transform: translateY(-1px); } .area-do-cliente { background: var(--green); padding: 10px 20px; border-radius: 30px; font-weight: 600; } } /* =========================== šŸ“± Hero Mobile (exibe sĆ³ no mobile) =========================== */ .mobile-hero { display: none; /* Oculto por padrĆ£o, aparece no mobile */ background: linear-gradient(135deg, #00284f, #1e3c72); color: white; text-align: center; padding: 60px 20px; } .mobile-hero img.mobile-logo { max-width: 180px; margin-bottom: 20px; } .mobile-hero .mobile-text { font-size: 1.2em; margin-bottom: 20px; font-weight: 600; line-height: 1.4; } .mobile-hero .mobile-benefits { font-size: 0.95em; line-height: 1.6; margin-bottom: 25px; } @media screen and (max-width: 768px) { #home { display: none !important; /* Oculta o slider/hero desktop */ } .mobile-hero { display: block !important; /* Mostra o hero mobile */ } }