/* Força o espaço da barra em todos os navegadores modernos */ html { overflow-y: scroll; } /* Esconde a barra visualmente, mas mantém o espaço funcional (Webkit: Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 12px; /* Ajuste para a largura padrão da barra no seu sistema */ } ::-webkit-scrollbar-track { background: black; /* Fundo da barra invisível */ } ::-webkit-scrollbar-thumb { background: orange; /* Cor da "pecinha" que sobe e desce */ border-radius: 10px; border: 3px solid transparent; /* Cria um respiro */ background-clip: content-box; } /* impede que os elementos de uma caixa seja empurrados pra fora na responsividade*/ * { box-sizing: border-box; } body { margin: 0; font-family: 'Orbitron', sans-serif; position: relative; /* Configuração base para TODAS as páginas */ background-color: #ffffff; /* Do meio para baixo, a página será branca */ background-repeat: no-repeat; /* A altura abaixo (1200px) define até onde a imagem desce antes de ficar só o fundo branco. Ajuste esse valor caso queira o degradê mais longo ou mais curto. */ background-size: 100% 1200px; /* Faz o footer ficar sempre no fim da tela quando houver pouco conteúdo */ min-height: 100vh; display: flex; flex-direction: column; } /* Fundo exclusivo da Home (Escuro) */ .bg-home { background-image: /* O degradê começa escuro e termina 100% branco para se fundir com o background-color do body */ linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 40%, rgba(255,255,255,1) 100%), url("../img/metaltexture.jpg"); } /* Fundo para as páginas internas (Ex: Fotografia, Casamentos) */ /* Quando for criar a página de fotografia, use */ .bg-interna { background-image: /* Degradê mais claro, deixando a imagem de fundo mais visível antes de virar branco */ linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 40%, rgba(255,255,255,1) 100%), url("../img/banner.jpeg"); /* Substitua pela imagem que quiser no fundo das outras páginas */ } header, .banner-container, .objetivo { position: relative; } /* garante que o header e o menu fiquem acima do banner */ header { z-index: 3000; } .banner-container, .objetivo { z-index: 1; } /*logo*/ .nav-left img{ height: 60px; width: 60px; } /*NAVBAR*/ .navbar { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 12px 30px; background: #444; border-radius: 20px; margin: 20px; /* Remova qualquer "overflow: hidden" se houver, pois ele cortaria o que sai de dentro da barra */ z-index: 4000; } /* Menu Desktop */ .nav-center{ display: flex; gap:120px; position:absolute; left:50%; transform: translateX(-50%); align-items: center; } /*ANIMAÇÃO DO NAVBAR*/ .nav-center a, .dropdown-btn{ color: white; text-decoration: none; font-size: 25px; position: relative; /* Necessário para a linha se posicionar */ padding-bottom: 5px; transition: color 0.3s ease; } /* Criamos uma linha invisível abaixo do texto */ .nav-center a::after, .dropdown-btn::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: orange; transition: width 0.3s ease; /* Faz a linha crescer */ } /* No hover, a linha cresce para 100% */ .nav-center a:hover::after, .dropdown-btn:hover::after { width: 100%; } /* Removemos o underline antigo para não conflitar */ .nav-center a:hover, .dropdown-btn:hover { text-decoration: none; color: orange; } /* Dizemos que links dentro do dropdown-menu NÃO devem ter o 'after' (a linha) */ .dropdown-menu a::after { display: none !important; } /* No hover dos itens do submenu, garantimos que não tente mostrar a linha */ .dropdown-menu a:hover::after { width: 0 !important; } /*dropdown*/ .dropdown { position: relative; /* Adicionamos um padding embaixo para "filiar" o espaço entre o botão e o menu */ padding-bottom: 20px; margin-bottom: -20px; z-index: 5000; } .dropdown-btn { background: transparent; border: none; cursor: pointer; font-family: inherit; padding: 0; display: block; /* Garante que ocupe a área correta */ } /*dropdown menu */ .dropdown-menu { position: absolute; top: 100%; /* Posiciona logo abaixo do botão */ left: 0; background-color: #444; /* Cor combinando com a navbar */ display: none; flex-direction: column; min-width: 220px; padding: 10px 0; border-radius: 10px; box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* PARA FICAR NA FRENTE DO BANNER QUANDO DESCER OS LINKS: */ z-index: 9999; } /* links submenu*/ /* Ajuste nos links do submenu para facilitar o clique */ .dropdown-menu a { padding: 12px 20px; color: white; text-decoration: none; display: block; font-size: 18px; transition: background 0.2s; } /*hover nos itens*/ .dropdown-menu a:hover { background-color: orange; /* Destaque ao passar o mouse no item */ color: black; } /*:hover*/ /* Quando passar o mouse no container .dropdown, o menu aparece */ .dropdown:hover .dropdown-menu { display: flex; } @media (max-width: 768px){ /* Garante que o menu hambúrguer funcione no clique */ .nav-center.active { display: flex !important; } /* Estilo para quando o dropdown estiver ativo via JS */ .dropdown.active .dropdown-menu { display: flex !important; background: #333; } .dropdown-menu{ position: static; } .nav-center a::after, .dropdown-btn::after { display: none; } .dropdown:hover .dropdown-menu { display: none; } } .banner-container { width: 100%; display: flex; justify-content: center; /* centraliza */ } .banner { width: 90%; max-width: 1063px; height: 591px; margin: 0 auto; position: relative; background-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 60%), url("../img/banner.jpeg"); background-size: cover; background-position: center; border-radius: 25px; overflow: hidden; /* importante */ } .banner2{ width: 1063px; height: 591px; position: relative; background-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 60%), url("../img/foto_banner_sfotos.JPG"); background-size: cover; background-position: center; z-index: 1; } /* conteúdo do banner */ /* --- ESTILOS DO NOVO BANNER --- */ .banner-content h1 { pointer-events: auto; /* Devolve o clique para o texto */ font-size: 3rem; line-height: 1.1; margin-bottom: 20px; color: white; text-shadow: 2px 2px 8px rgba(0,0,0,0.5); font-family: 'Orbitron', sans-serif; /* Aplicando sua nova fonte tech */ } .banner-content { position: absolute; top: 0; bottom: 0; /* Faz a caixa de conteúdo ter a altura total do banner */ left: 20px; /* Ajustado para um respiro melhor da borda */ max-width: 600px; padding: 40px 0; /* Cria um respiro interno no topo e na base */ /* Ativa o Flexbox para controlar a distribuição vertical */ display: flex; flex-direction: column; align-items: flex-start; /* Garante que tudo continue à esquerda */ pointer-events: none; /* Garante que a caixa invisível não bloqueie cliques no fundo se necessário */ } .banner-content .subtitulo { pointer-events: auto; /* A MÁGICA ESTÁ AQUI: */ margin-top: auto !important; display: inline-block; padding: 10px 18px; background-color: rgba(0,0,0,0.6); color: white; font-size: 0.8rem; border-radius: 12px; margin-bottom: 20px; /* Espaço entre o subtítulo e o botão */ max-width: fit-content; } .btn-banner { pointer-events: auto; display: inline-block; padding: 15px 35px; background-color: orange; color: black; font-weight: bold; text-decoration: none; border-radius: 50px; box-shadow: 0px 4px 15px rgba(255,165,0,0.4); transition: 0.3s ease; margin-bottom: 10px; /* Pequeno ajuste final */ } .btn-banner:hover { transform: translateY(-3px); background-color: #ff8c00; } /* MEDIA QUERY BANNER */ @media (max-width: 768px) { /* 1. Prepara a caixa do banner */ .banner { width: 95%; height: 550px; margin: 0 auto; background-position: 47% center; /* Mantém a logo do fundo no centro */ position: relative; } /* 2. RESET FORÇADO no conteúdo para matar o bug de ir pra fora */ .banner-content { position: absolute !important; top: 0 !important; left: 5% !important; right: auto !important; transform: none !important; width: 100% !important; height: 100% !important; padding: 10px 15px; box-sizing: border-box; /* Impede que o padding faça o texto vazar da tela */ /* Flexbox para distribuir o H1 e o Botão */ display: flex; flex-direction: column; align-items: center; text-align: center; } /* 3. Prende o Título no topo */ .banner-content h1 { font-size: 1.6rem !important; margin-top: 37x; margin-bottom: 0; width: 100%; } /* 4. A mágica: empurra o subtítulo lá pro fundo */ .banner-content .subtitulo { margin-top: auto !important; /* Isso age como uma mola, empurrando o resto para baixo */ margin-bottom: 1px; width: 90%; font-size: 0.9rem; background-color: rgba(0,0,0,0.7); padding: 10px 15px; border-radius: 12px; } /* 5. Mantém o botão organizado embaixo do subtítulo */ .btn-banner { margin-bottom: 1px; width: 80%; max-width: 280px; padding: 14px 24px; font-size: 1rem; } } @media (max-width: 480px) { .banner { min-height: 400px; } .banner-content h1 { font-size: 1.5rem; /* Reduz um pouco mais para não quebrar em muitas linhas */ } } /* --- ESTILOS DOS CARDS DETALHADOS --- */ .servicos-detalhados { padding: 80px 20px; background-color: white; /* Garante fundo limpo para leitura */ } .card-detalhe { display: flex; align-items: center; gap: 60px; margin-bottom: 100px; } .card-detalhe.invertido { flex-direction: row-reverse; } .detalhe-texto, .detalhe-img { flex: 1; } .detalhe-texto h3 { font-size: 35px; color: #333; margin-bottom: 20px; } .detalhe-texto h3 span { color: orange; } .detalhe-texto p { font-size: 18px; line-height: 1.6; color: #555; margin-bottom: 20px; } .detalhe-texto ul { list-style: none; padding: 0; } .detalhe-texto ul li { margin-bottom: 10px; font-weight: bold; color: #444; } .detalhe-texto i { color: orange; margin-right: 10px; } .detalhe-img img { width: 100%; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); transition: transform 0.3s; } .detalhe-img img:hover { transform: translateY(-10px); } /* Responsividade para os novos cards */ @media (max-width: 768px) { .card-detalhe, .card-detalhe.invertido { flex-direction: column; text-align: center; gap: 30px; } .banner-content h1 { font-size: 1.8rem; } } /* wrapper principal cresce e empurra o footer para baixo */ .conteudo-principal { flex: 1; } /*Estilo ensaio fotográfico*/ .container-ensaio{ text-align: left; font-size: 42px; padding: 0 16%; background-color: #ffffff; } .container-ensaio ul{ display: inline-block; text-align: left; list-style: none; padding:0; color: orange; } .bg-ensaio { background-image: url("../img/metaltexture.jpg"); background-size: cover; } .lista_servicos_fotograficos p{ font-size: 0.5rem; } .objetivo { padding: 60px 20px; } .objetivo-container { max-width: 1063px; margin: 0 auto; } /* título */ .objetivo h2 { font-size: 40px; color: orange; } .objetivo h2 span { display: block; font-weight: bold; } /* linha decorativa */ .linha { width: 670px; height: 5px; background: orange; margin: 10px 0; } /* texto */ .objetivo p { max-width: 800px; margin-bottom: 40px; } /* cards */ .cards { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .card { width: 250px; background: orange; box-shadow: 0 10px 20px rgba(0,0,0,0.2); border-radius: 30px; overflow: hidden; /* importante para a imagem respeitar a borda */ text-align: center; padding-bottom: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); transition: transform 0.3s ease-out; } .card:hover{ transform: translateY(-8px); } .card img { width: 100%; height: 210px; object-fit: cover; display: block; } .card h3 { margin: 15px 10px 10px; font-size: 22px; color: white; } .card p { margin: 0 15px; font-size: 16px; color: white; } /*--contato--*/ .contato-container { display: flex; width: 90%; /* Para ser fluido em qualquer tela */ max-width: 1200px; /* Aumentamos de 1000px para preencher melhor o 1080p */ margin: 50px auto; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } /* Lado Esquerdo - Informações */ .contact-info { flex: 1; background: #341539; color: white; padding: 45px; display: flex; flex-direction: column; } .contact-info h2 { font-family: 'Orbitron', sans-serif; color: orange; font-size: 1.8rem; margin-bottom: 20px; } .contact-info p { font-size: 1rem; line-height: 1.6; margin-bottom: 30px; opacity: 0.9; } /* Links Sociais Ajustados */ .social-links { display: flex; flex-direction: column; gap: 15px; margin-top: auto; /* Empurra para o fundo */ } .social-icon { text-decoration: none; color: white; background: rgba(255, 255, 255, 0.05); padding: 12px 18px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 12px; width: fit-content; /* No desktop mantém o tamanho do texto */ transition: 0.3s ease; } .social-icon:hover { background: orange; color: #341539; transform: translateX(10px); } /* Lado Direito - Formulário */ .contact-form { flex: 1.2; padding: 45px; background: #f9f9f9; } input, textarea { width: 100%; /* Agora com box-sizing: border-box ele não vaza */ padding: 14px; margin-top: 15px; border: 1px solid #ddd; border-radius: 8px; font-family: 'Inter', sans-serif; } .btn-send { width: 100%; /* Botão largo fica melhor no formulário */ background: #341539; color: orange; border: 2px solid orange; padding: 16px; border-radius: 8px; font-weight: bold; font-family: 'Orbitron', sans-serif; cursor: pointer; margin-top: 25px; transition: 0.3s; } .btn-send:hover { background: orange; color: #2c3e50; } /* --- RESPONSIVIDADE (MOBILE) --- */ @media (max-width: 768px) { .contato-container { flex-direction: column; /* Empilha as caixas */ width: 95%; margin: 20px auto; border-radius: 20px; } .contact-info, .contact-form { padding: 30px 20px; /* Reduzimos o padding para sobrar espaço pro texto */ flex: none; } .contact-info h2 { font-size: 1.5rem; } .social-links { margin-top: 30px; /* No mobile não precisa do margin-top auto */ } .social-icon { width: 100%; /* Botões de largura total são melhores para o polegar no mobile */ justify-content: center; } .btn-send { padding: 20px; /* Botão maior para facilitar o clique */ } } /* --- ESTILOS DO RODAPÉ (NOVO) --- */ .rodape { background-color: #222; color: white; padding: 40px 20px; margin-top: 80px; /*dá um respiro entre os cards e o rodapé */ } .rodape-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 40px; } .rodape-esquerda { display: flex; flex-direction: column; gap: 12px; } .rodape-container p { margin: 0; font-size: 14px; color: #ccc; } .rodape-links { display: flex; flex-wrap: wrap; gap: 14px; } .rodape-links a { color: orange; text-decoration: none; font-size: 14px; } .rodape-links a:hover { text-decoration: underline; } .rodape-links i { margin-right: 6px; } /* botão hamburguer escondido no desktop */ .menu-toggle { display: none; background: none; border: none; color: white; font-size: 32px; cursor: pointer; } .parcerias { text-align: center; min-width: 220px; } .parcerias h3 { color: white; margin: 0 0 15px 0; font-weight: 500; } .logos-parcerias { display: flex; justify-content: center; align-items: center; gap: 25px; flex-wrap: wrap; } .logos-parcerias img { height: 90px; max-width: 120px; object-fit: contain; opacity: 0.8; transition: 0.3s; } .logo-unitau { background: white; padding: 8px; border-radius: 8px; } /* responsividade geral */ @media (max-width: 768px) { body { background-size: 100% 900px; } .navbar { margin: 10px; padding: 10px 15px; } .nav-left img { width: 45px; height: 45px; } .menu-toggle { display: block; z-index: 6000; } .nav-center { display: none; position: absolute; top: 100%; left: 0; transform: none; width: 100%; background: #444; border-radius: 0 0 20px 20px; flex-direction: column; align-items: center; gap: 0; padding: 15px 0; z-index: 5000; } .nav-center.active { display: flex; } .nav-center a, .dropdown-btn { font-size: 20px; padding: 12px 0; width: 100%; text-align: center; } .dropdown { width: 100%; padding-bottom: 0; margin-bottom: 0; } .dropdown-menu { position: static; display: none; width: 100%; min-width: 0; border-radius: 0; box-shadow: none; background: #333; padding: 0; } .dropdown.active .dropdown-menu { display: flex; } .dropdown-menu a { font-size: 16px; padding: 12px; } /* banner responsivo */ .banner { width: calc(100% - 30px); height: 360px; } .banner-content { right: 50%; top: 55%; transform: translate(50%, -50%); max-width: 90%; text-align: center; } .banner-content p { font-size: 14px; padding: 10px 18px; } /* seção objetivos */ .objetivo { padding: 40px 20px; } .objetivo h2 { font-size: 32px; } .linha { width: 100%; max-width: 320px; } .objetivo p { font-size: 14px; } .cards { flex-direction: column; align-items: center; } .card { width: 90%; max-width: 280px; transform: scale(0.9); } } @media (max-width: 768px) { .rodape { margin-top: 50px; padding: 30px 15px; } .rodape-links { justify-content: center; flex-direction: column; gap: 8px; } .rodape-container { flex-direction: column; text-align: center; gap: 25px; } .rodape-esquerda { align-items: center; } .logos-parcerias { gap: 15px; } .logos-parcerias img { height: 60px; max-width: 100px; } } @media (max-width: 480px) { .logos-parcerias { gap: 10px; } .logos-parcerias img { height: 90px; max-width: 85px; } }