/* =================================================================== ARQUIVO DE ESTILOS CUSTOMIZADO - R+ Soluções ------------------------------------------------------------------- Este arquivo complementa o Bootstrap 5, aplicando a identidade visual da marca (cores, fontes, efeitos) sem sobrescrever desnecessariamente as classes do framework. =================================================================== */ /* ======================================= 1. FONTES E VARIÁVEIS GLOBAIS ======================================= */ /* Importação das fontes do Google */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Teko:wght@600&display=swap' ); /* Definição das variáveis de cor e fonte para fácil manutenção */ :root { --color-primary-orange: #f58426; --color-primary-blue: #0d2c54; --color-darker-blue: #081a33; --color-whatsapp-green: #25D366; --color-whatsapp-hover: #128C7E; --color-light-text: #f8f9fa; --color-medium-text: #e1e1e1; /* Cor ajustada para melhor contraste */ --color-dark-text: #212529; --color-header-bg: #ffffff; --font-display: 'Teko', sans-serif; --font-body: 'Roboto', sans-serif; } /* ======================================= 2. ESTILOS DE BASE E HELPERS ======================================= */ body { background-color: var(--color-primary-blue); color: var(--color-light-text); font-family: var(--font-body); } .sticky-top { top: -1px !important; } /* Efeito de rolagem suave para links de âncora */ html { scroll-behavior: smooth; } /* Classes de ajuda para títulos e destaques */ .section-title { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 4.5rem); /* Fonte responsiva */ line-height: 1.1; font-weight: 600; } .section-subtitle { font-size: 1.1rem; color: var(--color-medium-text); max-width: 650px; } .highlight { color: var(--color-primary-orange); } .destaque-verde { color: #48d850; } /* =================================================================== NOVA CLASSE PARA TEXTO COM EFEITO PULSANTE =================================================================== */ .pulse-text { /* A MÁGICA ACONTECE AQUI: 1. Aplicamos o mesmo gradiente animado que usamos no header do card, mas desta vez, no fundo do próprio texto. */ background: linear-gradient( 90deg, /* Gradiente da esquerda para a direita */ #f58426, #ffae42, #e67e22, #ffae42, #f58426 ); background-size: 400% 100%; /* Tamanho 400% na LARGURA para o movimento */ /* 2. Recortamos o fundo para que ele só seja visível ONDE HÁ TEXTO. */ -webkit-background-clip: text; background-clip: text; /* 3. Deixamos a cor do texto transparente, para que o fundo recortado apareça. */ -webkit-text-fill-color: transparent; /* 4. Aplicamos a animação que move o gradiente. */ animation: pulse-orange-text 4s ease-in-out infinite; } /* Animação para o Texto É a mesma que a 'pulse-orange', mas com um nome diferente para evitar conflitos e garantir que a direção esteja correta (horizontal). */ @keyframes pulse-orange-text { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- Botão WhatsApp --- */ .whatsapp-button { background-color: var(--color-whatsapp-green); color: #fff; font-weight: 700; border-radius: 50px; padding: 0.6rem 1.2rem; transition: background-color 0.3s, transform 0.3s; text-decoration:none; } .whatsapp-button:hover { background-color: var(--color-whatsapp-hover); transform: scale(1.05); color: #fff; text-decoration:none; } /* =================================================================== 3. HEADER - PASSO 2: APLICANDO IDENTIDADE VISUAL =================================================================== */ /* --- Estrutura Principal da Barra de Navegação --- */ .navbar { /* * A MÁGICA DA COR: * Trocamos o 'bg-dark' do HTML por uma cor de fundo customizada. * Usamos a sua variável --color-primary-blue. */ background-color: var(--color-primary-blue) !important; padding: 0.75rem 0; /* Um padding vertical para dar respiro */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } /* --- Logo Branca (via CSS) --- */ .navbar-brand img { max-height: 50px; /* Controla a altura da logo */ /* * A MÁGICA DO FILTRO: * Este filtro CSS força qualquer imagem a ficar 100% branca. * brightness(0) a deixa preta, e invert(1) inverte o preto para branco. */ filter: brightness(0) invert(1); transition: transform 0.3s ease; /* Efeito suave no hover */ } .navbar-brand:hover img { transform: scale(1.05); } /* --- Links de Navegação Brancos --- */ .navbar .nav-item { margin: 0 0.5rem; /* Espaçamento horizontal entre os itens */ } .navbar .nav-link { font-weight: 700; text-transform: uppercase; /* * A MÁGICA DA COR DO TEXTO: * Definimos a cor dos links para a sua variável de texto claro. */ color: var(--color-light-text); transition: color 0.3s ease; } /* Efeito de hover para a cor de destaque laranja */ .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--color-primary-orange); } /* --- Botão WhatsApp (Estilo já definido, apenas garantindo consistência) --- */ .whatsapp-button { font-weight: 700; border-radius: 50px; } /* --- Ajustes para o Menu Mobile --- */ @media (max-width: 991.98px) { .navbar .nav-item { margin: 0.5rem 0; /* Espaço vertical no menu expandido */ } .navbar .nav-link { text-align: center; } /* * A MÁGICA DO MENU EXPANDIDO: * Quando o menu mobile expande, ele cria um fundo branco. * Precisamos garantir que os links dentro dele fiquem escuros para serem legíveis. */ .navbar-collapse { background-color: #fff; margin-top: 1rem; padding: 1rem; border-radius: 8px; } .navbar-collapse .nav-link { color: var(--color-primary-blue); /* Links escuros sobre o fundo branco */ } } /* ======================================= 4. ESTILOS DAS SEÇÕES ======================================= */ section { padding: 100px 0; } .hero .display-1 { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 7rem); /* Título hero super responsivo */ } .hero .lead { font-size: 1.2rem; max-width: 750px; } /* ======================================= 5. SEÇÃO HERO - VERSÃO FINAL E FUNCIONAL ======================================= */ .hero { position: relative; min-height: 85vh; /*min-height: 500px;*/ color: var(--color-light-text); overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Bloco que contém as camadas de fundo */ .hero-background-effects { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Fica atrás de tudo */ } /* Camada 1: Imagem de Fundo (AGORA COM ANIMAÇÃO E SEM "PULO") */ .hero-background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../imgs/fundo3.png') no-repeat center center/cover; /* * A MÁGICA DA CORREÇÃO: * Força a imagem a carregar já no estado inicial da animação. * Isso elimina o "pulo" que acontece quando a animação começa. */ transform: scale(1.1) translateX(-2%); /* A animação continua a mesma */ animation: ken-burns-effect 8s ease-in-out 0.5s infinite alternate; } /* A definição @keyframes ken-burns-effect não precisa de nenhuma alteração. */ @keyframes ken-burns-effect { from { transform: scale(1.1) translateX(-2%); } to { transform: scale(1.0) translateX(2%); } } /* Definição da animação Ken Burns */ @keyframes ken-burns-effect { /* Estado inicial: um pouco de zoom e movida para a esquerda */ from { transform: scale(1.1) translateX(-2%); } /* Estado final: zoom normal e movida para a direita */ to { transform: scale(1.0) translateX(2%); } } /* Camada 2: Overlay Escuro */ .hero-overlay-color { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-primary-blue); opacity: 0.9; } /* Camada 3: Efeito Scanlines (A MÁGICA QUE VOLTA A FUNCIONAR) */ .hero-overlay-color::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.19) 30%, transparent 30%); background-size: 100% 4px; animation: scanline-effect 30s linear infinite; opacity: 0.5; } @keyframes scanline-effect { from { background-position: 0 0; } to { background-position: 0 -400px; } } /* Bloco que contém o conteúdo */ .hero-content-container { position: relative; /* Garante que o conteúdo fique na frente das camadas de fundo */ z-index: 2; } /* Estilo para o cursor de digitação */ .hero .typed-cursor { color: var(--color-primary-orange); font-weight: 100; font-size: clamp(4rem, 10vw, 7rem); animation: typed-blink 0.7s infinite; } @keyframes typed-blink { 50% { opacity: 0.0; } } /* ======================================= 5. BOTÕES CUSTOMIZADOS ======================================= */ /* --- Botão Principal (Hero e CTAs) --- */ .cta-button { /* Tipografia e Espaçamento */ display: inline-block; /* Garante que o padding seja aplicado corretamente */ font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; padding: 16px 38px; /* Padding generoso para uma área de clique confortável */ border-radius: 5px; border: 2px solid var(--color-primary-orange); /* Borda sólida */ /* Cores */ background-color: var(--color-primary-orange); color: var(--color-light-text); /* Efeitos e Transições */ transition: all 0.3s ease-in-out; box-shadow: 0 5px 15px rgba(245, 132, 38, 0.2); } .cta-button:hover { background-color: #fff; /* Fundo fica transparente no hover */ color: var(--color-primary-orange); /* Texto assume a cor laranja */ transform: translateY(-3px); box-shadow: 0 8px 25px rgba(245, 132, 38, 0.3); } /* ======================================= 6. KEYWORD BOXES (SEÇÃO HERO) - VERSÃO FINAL ======================================= */ #keywords-container { /* Começa invisível e só aparecerá via JavaScript */ opacity: 0; transition: opacity 0.5s ease-in-out; /* --- AJUSTE PARA MOBILE --- */ /* Permite que as caixas quebrem para a linha de baixo em telas menores */ flex-wrap: wrap; } .keyword-box { /* --- CORES ATUALIZADAS --- */ color: var(--color-light-text); background-color: rgba(255, 255, 255, 0.1); /* Fundo sutil */ border: 1px solid rgba(245, 132, 38); /* Borda laranja com transparência */ /* --- ESTILO E TIPOGRAFIA --- */ font-family: var(--font-display); font-weight: 300; /* Ajustado para 700 para um visual forte, mas limpo */ font-size: 1.6rem; /* Tamanho de fonte ajustado para melhor encaixe */ text-transform: uppercase; letter-spacing: 1px; padding: 0.6rem 1.5rem; /* Padding ajustado para um visual mais robusto */ border-radius: 5px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra para profundidade */ /* --- ANIMAÇÃO (Permanece igual) --- */ opacity: 0; transform: translateY(20px); /* Transição mais rápida para uma sensação mais ágil */ transition: opacity 0.5s ease-out, transform 0.5s ease-out; } /* Classe que será adicionada via JS para ativar a animação */ .keyword-box.is-visible { opacity: 1; transform: translateY(0); } /* Adicionando o delay em cascata (Ajustado para ser mais rápido) */ .keyword-box:nth-child(2) { transition-delay: 2s; /* Atraso de 0.2s */ } .keyword-box:nth-child(3) { transition-delay: 4s; /* Atraso de 0.4s */ } /* ======================================================= RESPONSIVIDADE PARA AS KEYWORD BOXES (MOBILE) ======================================================= */ @media (max-width: 576px) { #keywords-container { /* No mobile, força a direção para coluna e centraliza */ flex-direction: column; gap: 0.75rem; /* Reduz o espaçamento entre as caixas empilhadas */ } .keyword-box { /* Faz a caixa ocupar uma largura maior para não parecer muito pequena */ width: 80%; max-width: 280px; /* Limita a largura máxima */ margin: 0 auto; /* Centraliza a caixa no contêiner */ font-size: 1.4rem; /* Reduz um pouco a fonte no mobile */ padding: 0.5rem 1rem; } } /* ======================================= 7. CTA BUTTON CONTAINER (SEÇÃO HERO) ======================================= */ .cta-container { opacity: 0; transform: translateY(20px); /* * A MÁGICA DA SINCRONIZAÇÃO: * O delay agora é de 1.0s. * Isso garante que a animação do botão só começará DEPOIS * que a terceira caixinha (que começa em 0.4s e dura 0.5s) * tenha terminado sua própria animação. */ transition: opacity 0.5s ease-out 6.0s, transform 0.5s ease-out 6.0s; } /* Classe que será adicionada via JS para ativar a animação */ .cta-container.is-visible { opacity: 1; transform: translateY(0); } /* =================================================================== SEÇÃO DE SOLUÇÕES - VERSÃO FINAL OTIMIZADA =================================================================== */ /* --- 1. Contêiner Principal da Seção e Fundo Parallax --- */ .solutions { position: relative; /* Essencial para o contexto de empilhamento */ padding: 100px 0; overflow: hidden; /* Garante que o fundo parallax não vaze */ /* Cor de fundo com transparência que fica SOBRE a imagem parallax */ background: rgba(8, 26, 51, 0.85); } .solutions::before { content: ''; position: fixed; /* Cria o efeito parallax */ top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Força o pseudo-elemento a ficar atrás de .solutions */ background-image: url('../imgs/background1.png'); background-size: cover; background-position: right center; } /* Garante que o conteúdo principal fique na frente do fundo */ .solutions .container { position: relative; z-index: 1; } /* --- 2. Estrutura da Grade e Alinhamento de Altura --- */ .solution-column { display: flex; flex-direction: column; align-items: stretch; /* Força os cards a terem a mesma altura */ } /* --- 3. Estilo Base do Card de Solução (Regra Consolidada) --- */ .solution-card { /* Layout e Estrutura */ display: flex; flex-direction: column; height: 100%; /* Essencial para que o align-items: stretch funcione */ position: relative; overflow: hidden; /* Mantido para conter o efeito do header */ /* Estilo Visual */ background-color: var(--color-primary-blue); border: 1px solid rgba(245, 132, 38, 0.1); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); /* Animação de Entrada (movido da regra de animação para cá) */ opacity: 0; /* Transição de Hover */ transition: transform 0.4s ease, box-shadow 0.4s ease; } .solution-card:hover { transform: translateY(-12px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); } /* --- 4. Header do Card (com Fundo Animado) --- */ .solution-card-header { /* Fundo Animado */ background: linear-gradient( 90deg, #f58426, #ffae42, #e67e22, #ffae42, #f58426 ); background-size: 400% 100%; animation: pulse-orange 4s ease-in-out infinite; /* Padding Responsivo (consolidado aqui) */ padding: 1.25rem 1.5rem; } .solution-card-header h3 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.5rem); color: #FFFFFF; /* Cor branca, como solicitado */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */ margin-bottom: -0.35rem; /* Mantido seu ajuste fino */ } /* --- 5. Corpo e Conteúdo do Card (com Correção de Altura) --- */ .solution-card-body { display: flex; flex-direction: column; flex-grow: 1; /* Faz o corpo ocupar o espaço restante */ } /* Descrição Principal */ .solution-card-body > p { /* Seletor '>' garante que só afete o primeiro parágrafo */ color: var(--color-medium-text); line-height: 1.7; /* A propriedade flex-grow foi REMOVIDA daqui */ } /* Bloco de Detalhes (Indicado para / Benefícios) */ .solution-details { border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 1.5rem 0; /* Ajustado para um espaçamento mais consistente */ padding-top: 1.5rem; /* A CORREÇÃO ANTERIOR (MANTIDA): Esta área continua sendo a responsável por crescer no desktop. */ flex-grow: 1; } .detail-item { margin-bottom: 1rem; } .detail-item:last-child { margin-bottom: 0; } .detail-item h5 { font-family: var(--font-display); color: var(--color-primary-orange); font-size: 1.5rem; margin-bottom: 0.5rem; letter-spacing: 0.5px; } .detail-item p { color: var(--color-medium-text); font-size: 1.1rem; margin-bottom: 0; line-height: 1.6; } /* --- 6. Botão de Ação do Card --- */ .btn-solution { background-color: transparent; border: 2px solid var(--color-primary-orange); color: var(--color-primary-orange); font-weight: 700; text-transform: uppercase; padding: 0.75rem 1.5rem; border-radius: 50px; transition: all 0.3s ease; margin-top: auto; /* Garante que ele fique no final, como segurança extra */ margin-bottom: 0; /* Removido seu margin-bottom de 25px para um alinhamento mais limpo */ } .btn-solution:hover { background-color: var(--color-primary-orange); color: var(--color-light-text); transform: scale(1.05); } /* --- 7. Animações (Emerge e Pulse) --- */ @keyframes emerge { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-orange { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Gatilho e Delays da Animação de Entrada */ .solution-card.is-visible { animation: emerge 0.6s ease-out forwards; } .solution-card.order-1.is-visible { animation-delay: 0.2s; } .solution-card.order-2.is-visible { animation-delay: 0.4s; } .solution-card.order-3.is-visible { animation-delay: 0.6s; } .solution-card.order-4.is-visible { animation-delay: 0.8s; } /* =================================================================== 8. AJUSTES RESPONSIVOS (COM A CORREÇÃO FINAL PARA MOBILE) =================================================================== */ /* --- Ajustes para DESKTOP (a partir de 992px) --- */ @media (min-width: 992px) { .solution-card-header { /* Aumenta o padding do header apenas no desktop */ padding: 1.5rem 2.5rem; } } /* --- Ajustes para MOBILE (até 991.98px) --- */ @media (max-width: 991.98px) { .solutions::before { /* Desativa o parallax no mobile para melhor performance */ position: absolute; background-attachment: scroll; } /* --- CORREÇÃO DEFINITIVA PARA ALTURA DO CARD NO MOBILE --- */ .solution-column { /* No mobile, desativamos o comportamento flex da coluna */ display: block; } .solution-card { /* A MÁGICA: Forçamos a altura do card a ser 'auto'. Isso diz ao card: "sua altura será exatamente o tamanho do seu conteúdo". O !important garante que esta regra vença qualquer outra. */ height: auto !important; /* Adicionamos um espaço entre os cards que agora estão empilhados */ margin-bottom: 2.5rem; } /* Opcional: remove a margem do último card da página para um final limpo */ .solution-column:last-child .solution-card:last-child { margin-bottom: 0; } } /* =================================================================== EFEITO "FIO DE ARIADNE DIGITAL" (COM TEXTO E BOTÃO MAIORES) =================================================================== */ /* 1. Animação para a linha vertical se desenhar (sem alterações) */ @keyframes draw-line { from { height: 0; } to { height: 60px; } } /* 2. Animação para o botão se expandir a partir da linha */ @keyframes expand-button { from { width: 2px; background-color: var(--color-primary-orange); } to { /* AJUSTE 1: Aumentei a largura final para acomodar o texto maior */ width: 380px; background-color: transparent; } } /* 3. Animação para o texto aparecer (sem alterações) */ @keyframes fade-in-text { from { opacity: 0; } to { opacity: 1; } } /* --- O Contêiner Principal --- (sem alterações) */ .ariadne-thread-container { position: relative; display: flex; justify-content: center; align-items: center; /*margin-top: 4rem;*/ height: 120px; opacity: 0; transition: opacity 0.5s; } .ariadne-thread-container.is-visible { opacity: 1; transition-delay: 1.2s; } /* --- A Linha Vertical --- (sem alterações) */ .ariadne-thread-container::before { animation: draw-line 0.8s ease-out forwards; animation-delay: inherit; } /* --- O Botão --- (sem alterações) */ .ariadne-button { position: relative; display: flex; justify-content: center; align-items: center; width: 2px; height: 90px; border-radius: 50px; border: 2px solid var(--color-primary-orange); color: transparent; font-weight: 700; text-transform: uppercase; text-decoration: none; overflow: hidden; animation: expand-button 0.6s ease-in-out forwards; animation-delay: calc(1.2s + 0.8s); } /* O texto dentro do botão */ .ariadne-button::after { content: 'Conheça Nossos Projetos'; position: absolute; opacity: 0; color: var(--color-primary-orange); font-size: 1.1rem; animation: fade-in-text 0.5s ease-out forwards; animation-delay: calc(1.2s + 0.8s + 0.4s); } /* Efeito de hover final (sem alterações) */ .ariadne-button:hover { background-color: var(--color-primary-orange); box-shadow: 0 0 20px rgba(245, 132, 38, 0.5); transition: background-color 0.3s, box-shadow 0.3s; } .ariadne-button:hover::after { color: var(--color-light-text); transition: color 0.3s; } /* =================================================================== SEÇÃO PORTFÓLIO - "O PALCO DO ARTESÃO" =================================================================== */ /* --- Contêiner Principal da Seção --- */ .portfolio { position: relative; padding: 120px 0; background-color: #051121; /* Um azul ainda mais escuro, quase preto, para criar um palco */ overflow-x: hidden; } /* --- Títulos da Seção (voltando ao estilo escuro) --- */ .portfolio .section-title { color: var(--color-header-bg); /* Branco */ } .portfolio .section-title .highlight { color: var(--color-primary-orange); } /* --- O EFEITO DE FOCO DINÂMICO --- */ .carousel-inner { /* Isso garante que os slides ao lado sejam parcialmente visíveis, se desejado, mas com a estrutura atual de 2 cards por slide, focamos no estado ATIVO. */ } /* Estilo para os cards que NÃO estão ativos */ .carousel-item .portfolio-card { filter: blur(2px) grayscale(50%) brightness(0.7); transform: scale(0.95); transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); } /* Estilo para os cards que ESTÃO no slide ATIVO */ .carousel-item.active .portfolio-card { filter: none; /* Remove todos os filtros */ transform: scale(1); /* Volta ao tamanho normal */ } /* --- O Card do Projeto: Design para o tema escuro --- */ .portfolio-card { background-color: var(--color-primary-blue); border: 1px solid rgba(245, 132, 38, 0.2); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } /* --- Conteúdo do Card --- */ .portfolio-card-content { padding: 1.5rem; } .portfolio-card .tag { display: inline-block; background-color: rgba(245, 132, 38, 0.15); color: var(--color-primary-orange); padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem; } .portfolio-card h3 { font-family: var(--font-display); color: var(--color-header-bg); font-size: 1.6rem; margin: 0; } /* --- Controles do Carrossel (Estilo Dark) --- */ .carousel-control-prev, .carousel-control-next { width: 50px; height: 50px; background-color: rgba(13, 38, 70, 0.8); border: 1px solid rgba(245, 132, 38, 0.2); border-radius: 50%; top: 50%; transform: translateY(-50%); opacity: 0.7; transition: all 0.3s ease; } .carousel-control-prev { left: -70px; } .carousel-control-next { right: -70px; } .carousel-control-prev:hover, .carousel-control-next:hover { opacity: 1; background-color: var(--color-primary-orange); border-color: var(--color-primary-orange); transform: translateY(-50%) scale(1.1); } /* Ajustes responsivos para os controles (mantidos da versão anterior) */ @media (max-width: 1400px) { .carousel-control-prev { left: -25px; } .carousel-control-next { right: -25px; } } @media (max-width: 768px) { .portfolio { padding-bottom: 150px; } .carousel-control-prev, .carousel-control-next { top: auto; bottom: -80px; } .carousel-control-prev { left: 30%; } .carousel-control-next { right: 30%; } } /* =================================================================== SOLUÇÃO FINAL: EFEITO "VER PROJETO" SOBRE A IMAGEM (CORRIGIDO) =================================================================== */ /* 1. O contêiner da imagem que adicionamos ao HTML */ .portfolio-image-container { position: relative; /* Essencial para posicionar o overlay */ overflow: hidden; /* Garante que nada vaze */ } /* 2. O overlay com o filtro laranja e o texto, criado com ::before */ .portfolio-image-container::before { content: 'Ver Projeto'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Estilo do Texto */ display: flex; justify-content: center; align-items: center; color: #FFFFFF; /* A melhor cor para o fundo laranja */ font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-align: center; /* O FILTRO LARANJA que você pediu */ background-color: rgba(245, 132, 38, 0.7); /* Cor laranja com 70% de opacidade */ /* Estado inicial: invisível */ opacity: 0; transition: opacity 0.4s ease; z-index: 2; pointer-events: none; /* Garante que o link do card continue funcionando */ } /* --- A MÁGICA DO HOVER --- */ /* Quando passar o mouse no CARD INTEIRO... */ .portfolio-card:hover .portfolio-image-container::before { /* ...o overlay com o filtro e o texto aparece sobre a imagem. */ opacity: 1; } /* =================================================================== AJUSTE MOBILE - ESPAÇAMENTO DOS CARDS DO PORTFÓLIO =================================================================== */ /* Seleciona os cards que estão dentro da lista mobile */ .portfolio-mobile-list .portfolio-card { /* Adiciona um espaço de 2rem (32px) abaixo de cada card */ margin-bottom: 2rem; } /* Opcional: Remove a margem do último card para não criar espaço extra no final */ .portfolio-mobile-list .portfolio-card:last-child { margin-bottom: 0; } /* =================================================================== SEÇÃO CTA FINAL - IMAGEM COM FILTROS EM CAMADAS =================================================================== */ /* --- 1. O Contêiner da Seção --- */ .final-cta { position: relative; /* Essencial para posicionar os filtros */ padding: 120px 0; overflow: hidden; /* A imagem de fundo é aplicada aqui */ background-image: url('../imgs/fundo-cta.png'); /* <<< TROQUE AQUI */ background-size: cover; background-position: center center; background-repeat: no-repeat; } /* --- 2. A Camada de Filtros (P&B + Vinheta) --- */ /* Usamos o ::before para aplicar os filtros diretamente sobre a imagem */ .final-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; /* Fica logo acima da imagem */ /* FILTRO 1: EFEITO VINHETA */ /* Escurece as bordas e mantém o centro mais claro */ background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%); /* FILTRO 2: PRETO E BRANCO */ /* 'filter' é aplicado sobre o elemento e seu fundo (a imagem) */ filter: grayscale(100%); } /* --- 3. A Camada de Cor Azul (Transparente) --- */ /* Usamos o ::after para a camada de cor, por cima dos outros filtros */ .final-cta::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; /* Fica acima do filtro P&B/Vinheta */ /* A cor azul da sua marca com a transparência desejada */ background-color: rgba(13, 38, 70, 0.8); /* Ajuste o 0.8 para mais ou menos transparência */ } /* --- 4. O Painel Flutuante --- */ /* A única mudança aqui é garantir que o z-index seja o mais alto de todos */ .final-cta .container { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid rgba(245, 132, 38, 0.2); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); padding: 4rem; position: relative; z-index: 3; /* Garante que o painel fique na frente de TODOS os filtros */ } /* --- 5. Os Textos e o Botão (Nenhuma alteração) --- */ /* O restante do seu CSS para .section-title, .lead, .cta-button, etc., continua aqui, sem alterações. */ .final-cta .section-title { color: #FFFFFF; } .final-cta .section-title .highlight, .final-cta .section-title span { color: var(--color-primary-orange); } .final-cta .lead { color: var(--color-medium-text); max-width: 650px; } /* =================================================================== BOTÃO CTA (VERSÃO IMPACTO) =================================================================== */ .cta-button { /* 1. Botão Maior */ padding: 1.25rem 3.5rem; /* Aumentamos o padding vertical e horizontal */ font-size: 1.2rem; /* Aumentamos o tamanho da fonte */ font-weight: 700; /* Estilos mantidos */ background-color: var(--color-primary-orange); color: #FFFFFF; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; /* Um pouco mais de espaçamento para um look premium */ border: none; transition: all 0.3s ease-in-out; /* 2. Efeito de Brilho Impactante */ box-shadow: 0 0 20px rgba(245, 132, 38, 0.6), 0 0 0 0 rgba(245, 132, 38, 0.7); animation: pulse-glow 2.5s infinite; } .cta-button:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(245, 132, 38, 0.5); /* Sombra mais forte no hover */ cursor: pointer; animation: none; /* Pausa a animação para uma interação mais direta */ } /* Nova Animação para o Botão */ @keyframes pulse-glow { 0% { box-shadow: 0 0 20px rgba(245, 132, 38, 0.6), 0 0 0 0 rgba(245, 132, 38, 0.7); } 70% { box-shadow: 0 0 20px rgba(245, 132, 38, 0.6), 0 0 0 25px rgba(245, 132, 38, 0); } 100% { box-shadow: 0 0 20px rgba(245, 132, 38, 0.6), 0 0 0 0 rgba(245, 132, 38, 0); } } /* =================================================================== ESTILO E ANIMAÇÃO DOS "PILARES DA SOLUÇÃO" (VERSÃO FINAL) =================================================================== */ /* --- Contêiner da Linha da Fórmula --- */ .formula-row { gap: 1rem 0; } /* --- Estilo Base dos Cards --- */ .formula-card { border-radius: 16px; padding: 2.5rem 1.5rem; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Removemos a borda e o fundo transparente da regra base */ border: none; } /* Ícones Grandes */ .formula-card i { font-size: 3rem; line-height: 1; color: #FFFFFF; /* Cor branca para todos os ícones */ } /* Texto dentro dos Cards */ .formula-card h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; color: #FFFFFF; /* Cor branca para todas as fontes */ margin: 0; } /* --- Símbolos entre os Cards --- */ .formula-symbol-col i { font-size: 2.5rem; color: var(--color-primary-orange); opacity: 0; transform: scale(0.5); transition: all 0.5s ease-out; } /* --- CORES SÓLIDAS DOS PILARES --- */ /* 1. Desafio (Vermelho Sólido) */ .formula-card.challenge { background-color: #651018; /* Um tom de vermelho forte, mas elegante */ } /* 2. Parceria (Azul Sólido) */ .formula-card.partnership { background-color: #004085; /* Um tom de azul corporativo e confiável */ } /* 3. Solução (Verde Sólido) */ .formula-card.result { background-color: #1e7e34; /* Um tom de verde que significa sucesso */ } /* --- Animação em Cascata (Sem alterações) --- */ .final-cta.is-visible .formula-card.challenge { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .final-cta.is-visible .formula-symbol-col:nth-of-type(2) i { opacity: 1; transform: scale(1); transition-delay: 0.5s; } .final-cta.is-visible .formula-card.partnership { opacity: 1; transform: translateY(0); transition-delay: 0.8s; } .final-cta.is-visible .formula-symbol-col:nth-of-type(4) i { opacity: 1; transform: scale(1); transition-delay: 1.1s; } .final-cta.is-visible .formula-card.result { opacity: 1; transform: translateY(0); transition-delay: 1.4s; } /* --- Ajuste Responsivo (Sem alterações) --- */ @media (max-width: 767.98px) { .final-cta .container { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; } .formula-card { padding: 2rem 1.5rem; } } /* =================================================================== ESTILO CORRIGIDO PARA AS INFORMAÇÕES DE LEGITIMIDADE =================================================================== */ .legitimacy-info { /* --- AJUSTES APLICADOS AQUI --- */ text-align: center; /* 1. Centraliza todo o texto dentro do bloco */ font-family: var(--font-body); /* 2. Garante o uso da fonte principal do projeto */ font-size: 1.2rem; /*background-color: var(--color-primary-blue);*/ padding: 20px 0; } .legitimacy-info p { margin-bottom: 0; line-height: 1.6; } .legitimacy-info strong { color: #FFFFFF; font-weight: 600; } .legitimacy-info .copyright { opacity: 0.7; } .footer-social-icons { /* O text-align: center; do .legitimacy-info já centraliza este bloco. */ /* Apenas adicionamos um espaço para respirar. */ margin: 1rem 0; } .footer-social-icons a { color: rgba(255, 255, 255, 0.6); font-size: 1.8rem; text-decoration: none; transition: color 0.3s ease, transform 0.3s ease; } .footer-social-icons a:hover { color: #FFFFFF; transform: scale(1.1); } /* =================================================================== ESTILO PARA O FORMULÁRIO "TERMINAL DE PROJETOS" =================================================================== */ /* --- 1. A Seção e o Fundo de Grade Digital --- */ .contact-terminal-section { position: relative; padding: 120px 0; background-color: #020814; /* Fundo base super escuro */ overflow: hidden; } @keyframes pan-grid { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } .digital-grid-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background-image: linear-gradient(rgba(13, 44, 84, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 44, 84, 0.5) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.5; animation: pan-grid 10s linear infinite; } /* --- 2. O Painel de Vidro do Formulário --- */ .form-panel { position: relative; z-index: 1; background: rgba(13, 38, 70, 0.4); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(245, 132, 38, 0.2); border-radius: 20px; padding: 3rem; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4); transition: border-color 0.4s ease; } .form-panel:focus-within { /* Borda "acende" quando um campo interno está em foco */ border-color: var(--color-primary-orange); } @media (max-width: 767.98px) { .form-panel { padding: 2rem; } } /* --- 3. Campos com Label Flutuante (form-floating) --- */ .form-floating > .form-control, .form-floating > .form-select { background-color: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0; transition: border-color 0.3s ease; } .form-floating > .form-control:focus, .form-floating > .form-select:focus { box-shadow: none; border-bottom-color: var(--color-primary-orange); } .form-floating > label { color: var(--color-medium-text); } /* --- 4. O Botão de Envio com Efeito "Scanline" --- */ @keyframes scanline-button { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } .btn-submit-scanline { position: relative; background-color: var(--color-primary-orange); color: #FFFFFF; padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 700; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px; border: none; overflow: hidden; /* Essencial para o efeito de scanline */ transition: all 0.3s ease; } .btn-submit-scanline::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: scanline-button 2.5s linear infinite; } .btn-submit-scanline:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(245, 132, 38, 0.6); } /* =================================================================== CLASSE REUTILIZÁVEL PARA FUNDO DE GRADE DIGITAL =================================================================== */ /* --- 1. A Classe Principal --- */ /* Adicione esta classe a qualquer
ou