/* ========================================================================== melhorias.css | Oliver Print Arquivo NOVO, carregado DEPOIS do style.min.css. O arquivo original nao foi alterado. Para desfazer TUDO que esta aqui, basta remover a linha que carrega este arquivo no header.php. ========================================================================== */ :root{ --op-azul: #2f3787; /* azul escuro da marca (titulos) */ --op-ciano: #00a0de; /* azul claro da marca (destaques) */ --op-ciano-esc: #0087bd; --op-tinta: #1d1d1b; /* texto */ --op-tinta-suave: #4a4a48; --op-gelo: #f5fbfe; /* fundo claro das secoes */ --op-borda: #dfe7ee; --op-sombra: 0 4px 14px rgba(47,55,135,.12); } /* -------------------------------------------------------------------------- 0. TRAVA DA ROLAGEM LATERAL As animacoes de entrada (fadeInLeft / fadeInRight) comecam com o bloco deslocado 100% para fora da tela. Durante o segundo em que a animacao roda, isso cria uma barra de rolagem horizontal e a pagina "balanca" para os lados, principalmente no celular. Esta linha impede isso. Usamos "clip" e nao "hidden" de proposito: "hidden" transformaria o body num container de rolagem, o que poderia interferir no menu que fica fixo no topo ao rolar a pagina. "clip" so corta o excesso, sem criar container, entao nao tem como afetar o menu fixo. Navegadores antigos ignoram a regra e o site se comporta exatamente como hoje. -------------------------------------------------------------------------- */ body{ overflow-x:clip; } /* -------------------------------------------------------------------------- 1. TITULOS - as secoes viraram

(antes eram 5

na mesma pagina). Estas regras reproduzem o mesmo visual que o

tinha. -------------------------------------------------------------------------- */ #digital h2, #flexografica h2, #valorizar h2, #produto h2{ font-family:'Archivo',sans-serif; font-weight:600; font-size:60pt; line-height:65pt; color:var(--op-azul); } #produto h2{ font-size:40px; line-height:46px; } #valorizar h2{ text-align:center; display:inline-block; } #digital h2 .traco, #flexografica h2 .traco, #valorizar h2 .traco, #produto h2 .traco{ height:20px; width:70px; background-color:var(--op-ciano); border-radius:10px; margin-top:20px; margin-bottom:40px; } #valorizar h2 .traco{ position:relative; left:200px; } /* -------------------------------------------------------------------------- 2. BANNER DO TOPO Antes: so o titulo, espremido por padding 0 35%, sobre a foto crua. Agora: tarja de apoio, subtitulo e dois botoes de acao. -------------------------------------------------------------------------- */ #banner .banner-topo{ position:relative; height:auto; min-height:600px; display:flex; align-items:center; padding:90px 0; } /* veu escuro: garante contraste do texto branco sobre qualquer foto */ #banner .banner-topo::before{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(100deg,rgba(12,20,60,.82) 0%,rgba(12,20,60,.55) 45%,rgba(12,20,60,.18) 100%); } #banner .banner-topo .container{ position:relative; z-index:2; text-align:left; } .banner-etiqueta{ display:inline-block; font-family:'Archivo',sans-serif; font-size:13px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; color:#fff; background:rgba(0,160,222,.92); padding:8px 16px; border-radius:100px; margin-bottom:22px; } #banner .banner-topo h1{ padding:0; /* remove o padding 0 35% que espremia o titulo */ max-width:16ch; font-size:52pt; line-height:1.06; text-align:left; text-shadow:0 2px 18px rgba(0,0,0,.35); } #banner .banner-topo h1 .traco{ margin:26px 0 0 0; } .banner-apoio{ max-width:56ch; margin-top:26px; font-family:'Roboto',sans-serif; font-size:19px; line-height:1.6; color:rgba(255,255,255,.94); text-shadow:0 1px 10px rgba(0,0,0,.35); } .banner-acoes{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; } /* -------------------------------------------------------------------------- 3. BOTOES -------------------------------------------------------------------------- */ .op-btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Archivo',sans-serif; font-size:16px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; padding:17px 30px; border-radius:100px; border:2px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .op-btn:hover{ transform:translateY(-2px); text-decoration:none; } .op-btn-primario{ background:var(--op-ciano); color:#fff; box-shadow:0 6px 18px rgba(0,160,222,.35); } .op-btn-primario:hover{ background:var(--op-ciano-esc); color:#fff; box-shadow:0 10px 24px rgba(0,160,222,.45); } .op-btn-fantasma{ background:transparent; color:#fff; border-color:rgba(255,255,255,.75); } .op-btn-fantasma:hover{ background:#fff; color:var(--op-azul); border-color:#fff; } .op-btn svg{ width:19px; height:19px; flex:0 0 19px; } /* -------------------------------------------------------------------------- 4. MENU DO TOPO -------------------------------------------------------------------------- */ /* O logo agora declara width/height no HTML (evita a pagina "pular" enquanto carrega). Sem height:auto, o max-width:100% do site encolhe a largura mas mantem a altura fixa, e o logo sai esticado. */ #navigation .logo{ height:auto; } #navigation .nav a{ transition:color .15s ease; } /* o menu tem line-height:115px; sem zerar isso, os botoes viram bolas */ #navigation .nav .op-nav-loja, #navigation .nav .op-nav-orcamento{ line-height:1 !important; display:inline-block; } #navigation .nav a:hover{ color:var(--op-ciano); } #navigation .nav .op-nav-loja{ background:var(--op-ciano) !important; color:#fff !important; padding:12px 24px !important; border-radius:100px !important; font-weight:600; font-size:15px !important; transition:background-color .18s ease, transform .18s ease; } #navigation .nav .op-nav-loja:hover{ background:var(--op-ciano-esc) !important; color:#fff !important; transform:translateY(-1px); } #navigation .nav .op-nav-orcamento{ color:var(--op-azul) !important; font-weight:600; border:2px solid var(--op-azul); border-radius:100px; padding:10px 22px !important; font-size:15px !important; transition:background-color .18s ease, color .18s ease; } #navigation .nav .op-nav-orcamento:hover{ background:var(--op-azul); color:#fff !important; } /* -------------------------------------------------------------------------- 5. LEGIBILIDADE DO CORPO DE TEXTO -------------------------------------------------------------------------- */ .texto{ max-width:62ch; color:var(--op-tinta-suave); line-height:1.62; } #valorizar .texto{ max-width:none; } #flexografica ul li{ border-bottom:1px solid var(--op-borda); /* antes: linha preta, pesada demais */ font-size:17px; line-height:1.5; color:var(--op-tinta-suave); padding:18px 0 18px 50px; } /* -------------------------------------------------------------------------- 6. SECAO DE CONTATO - telefone virou link clicavel -------------------------------------------------------------------------- */ #contato .tel a{ color:var(--op-ciano); text-decoration:none; display:inline-flex; align-items:center; gap:12px; transition:color .15s ease; } #contato .tel a:hover{ color:var(--op-ciano-esc); text-decoration:underline; } #contato .tel svg{ width:30px; height:30px; } .contato-acoes{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } .contato-acoes .op-btn-secundario{ background:var(--op-azul); color:#fff; box-shadow:0 6px 18px rgba(47,55,135,.28); } .contato-acoes .op-btn-secundario:hover{ background:#252c6d; color:#fff; } .contato-dados{ margin-top:36px; padding-top:26px; border-top:1px solid var(--op-borda); font-size:14px; line-height:1.7; color:#7a7a78; } /* -------------------------------------------------------------------------- 7. RODAPE - antes o