/* ============================================================================= PAGINAS DE SERVICO DO SITE SOLIS (v2) ----------------------------------------------------------------------------- Cores, botoes, cartoes, faixa de chamada e etapas ficam em css/solis2-base.css, carregado ANTES deste arquivo. Aqui ficam so os blocos que so a pagina de servico tem: a trilha de navegacao, o corpo em duas colunas, a lista de topicos, a sanfona de perguntas, a galeria de fotos e a coluna lateral de contato. A pagina inteira herda a COR DA FRENTE a que o servico pertence (agua, rural, mineracao ou obra), definida pela classe cor-* no . ============================================================================= */ /* ============================================================================= TOPO DA PAGINA DE SERVICO Mesmo topo escuro da home, mas puxado para a cor da frente. ============================================================================= */ .topo-servico { background: linear-gradient(155deg, var(--f-forte) 0%, var(--f) 78%, var(--f) 100%); padding: 56px 0 128px; } .topo-servico .fundo-topo { opacity: .34; } /* Trilha de navegacao ("Início / Água / Outorga de Poço"). Serve para o visitante saber onde esta e voltar um nivel. */ .trilha { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: .84rem; color: rgba(255, 255, 255, .72); margin-bottom: 26px; } .trilha a { color: rgba(255, 255, 255, .92); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); } .trilha a:hover { border-bottom-color: #fff; color: #fff; } .trilha .sep { opacity: .55; } .trilha .atual { color: #fff; font-weight: 600; } .topo-servico .chip-frente { margin: 0 auto 22px; background: rgba(255, 255, 255, .14); color: #fff; width: 72px; height: 72px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .28); } .topo-servico h1 { max-width: 22ch; font-size: clamp(1.8rem, 4.2vw, 2.9rem); } /* Na frente Rural o topo e verde e o botao do WhatsApp tambem: sem o anel branco um sumiria dentro do outro. O anel resolve nas quatro cores. */ .topo-servico .btn-verde { box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 12px 22px -12px rgba(0, 0, 0, .55); } .topo-servico .btn-verde:hover { box-shadow: 0 0 0 2px #fff, 0 16px 26px -12px rgba(0, 0, 0, .65); } /* A introducao vem do texto que ja existia na pagina e pode conter , e
, por isso e um bloco de HTML e nao um paragrafo simples. */ .topo-intro { max-width: 720px; margin: 22px auto 32px; font-size: 1.06rem; color: #e7eefb; } .topo-intro strong, .topo-intro b { color: #fff; } .topo-intro p { margin-bottom: 12px; } .topo-intro p:last-child { margin-bottom: 0; } /* ============================================================================= CORPO: coluna de conteudo + coluna lateral ============================================================================= */ .servico-corpo { background: var(--fundo); padding: 10px 0 80px; } .servico-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr); gap: 40px; align-items: start; } .bloco { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-grande); padding: 32px 34px; box-shadow: var(--sombra); } .bloco + .bloco { margin-top: 26px; } .bloco-titulo { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; margin-bottom: 22px; } .bloco-titulo .chip-servico { width: 40px; height: 40px; border-radius: 12px; } /* ---- Lista de topicos ("o que fazemos") --------------------------------- */ .topicos { display: grid; gap: 18px; } .topico { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px dashed var(--borda); } .topico:last-child { border-bottom: 0; padding-bottom: 0; } .topico-marca { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: var(--f-claro); color: var(--f); margin-top: 2px; } .topico h3 { font-size: 1.02rem; margin-bottom: 6px; text-transform: none; } .topico p { color: var(--texto-sec); font-size: .95rem; margin-bottom: 6px; } .topico p:last-child { margin-bottom: 0; } /* ---- Perguntas frequentes (sanfona nativa, sem JavaScript) -------------- Usa as tags
e
do proprio HTML: clicar abre e fecha sozinho, funciona com teclado e o Google le o conteudo mesmo fechado. */ .faq { display: grid; gap: 12px; } .faq-item { border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; overflow: hidden; } .faq-item[open] { border-color: var(--f); box-shadow: var(--sombra); } .faq-item summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--marca-esc); line-height: 1.35; list-style: none; } /* Some com a setinha padrao do navegador (cada um desenha a sua). */ .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { content: ""; } .faq-sinal { margin-left: auto; flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--f-claro); color: var(--f); } /* Troca o "+" pelo "-" quando a pergunta esta aberta, sem girar nada. */ .faq-sinal .menos { display: none; } .faq-item[open] .faq-sinal { background: var(--f); color: #fff; } .faq-item[open] .faq-sinal .mais { display: none; } .faq-item[open] .faq-sinal .menos { display: block; } .faq-resposta { padding: 0 18px 18px 62px; color: var(--texto-sec); font-size: .97rem; } .faq-resposta b, .faq-resposta strong { color: var(--texto); } /* ---- Galeria de fotos --------------------------------------------------- */ .galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; border: 1px solid var(--borda); } /* ============================================================================= COLUNA LATERAL ============================================================================= */ .lateral { display: grid; gap: 18px; position: sticky; top: 18px; } .cartao-lateral { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-grande); padding: 24px 24px; box-shadow: var(--sombra); } .cartao-lateral.destaque { background: linear-gradient(160deg, var(--f) 0%, var(--f-forte) 100%); border-color: transparent; color: #fff; } body.solis2 .cartao-lateral.destaque h3 { color: #fff; } .cartao-lateral.destaque p { color: rgba(255, 255, 255, .85); font-size: .93rem; } .cartao-lateral h3 { font-size: 1.12rem; margin-bottom: 10px; } .cartao-lateral p { color: var(--texto-sec); font-size: .93rem; } .lista-contato { display: grid; gap: 10px; margin-top: 18px; } .lista-contato a { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; font-weight: 600; font-size: .93rem; transition: background .18s ease; word-break: break-word; } .lista-contato a:hover { background: rgba(255, 255, 255, .26); } .lista-contato a.zap { background: var(--verde); border-color: rgba(255, 255, 255, .9); } .lista-contato a.zap:hover { background: var(--verde-esc); } /* Bloco de responsabilidade tecnica */ .selo-tecnico { display: flex; gap: 12px; align-items: flex-start; } .selo-tecnico + .selo-tecnico { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--borda); } .selo-tecnico .chip-servico { width: 38px; height: 38px; border-radius: 11px; } .selo-tecnico h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--f); margin-bottom: 5px; } .selo-tecnico p { font-size: .88rem; } /* Links do blog */ .lista-blog { display: grid; gap: 8px; margin-top: 6px; } .lista-blog a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); color: var(--marca-esc); text-decoration: none; font-size: .92rem; font-weight: 600; transition: border-color .18s ease, background .18s ease; } .lista-blog a:hover { border-color: var(--f); background: var(--f-claro); } .lista-blog a .ico { color: var(--f); flex: 0 0 auto; } /* ============================================================================= OUTROS SERVICOS DA MESMA FRENTE ============================================================================= */ .relacionados { background: #fff; padding: 84px 0; border-top: 1px solid var(--borda); } .relacionados h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .relacionados .grade-servicos { margin-top: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ============================================================================= TELAS MENORES ============================================================================= */ @media (max-width: 1080px) { .servico-grade { grid-template-columns: 1fr; gap: 26px; } .lateral { position: static; } .relacionados .grade-servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .topo-servico { padding: 40px 0 104px; } .servico-corpo { padding-bottom: 60px; } .relacionados { padding: 60px 0; } .relacionados .grade-servicos { grid-template-columns: 1fr; } .bloco { padding: 24px 20px; } .bloco-titulo { font-size: 1.2rem; } .faq-resposta { padding-left: 18px; } .cartao-lateral { padding: 20px; } .galeria { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /* ============================================================================= PAGINA "EMPRESA" (equipe, parceiros e clientes) Usa o mesmo topo, os mesmos botoes e a mesma chamada final das paginas de servico; so estes tres blocos sao proprios dela. ============================================================================= */ /* Frase de visao em destaque, com a citacao ao lado ---------------------- */ .visao { background: var(--fundo); padding: 10px 0 78px; } .visao-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: stretch; } .citacao { background: linear-gradient(160deg, var(--f) 0%, var(--f-forte) 100%); color: #fff; border-radius: var(--raio-grande); padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; } .citacao p { color: rgba(255, 255, 255, .92); font-size: 1.02rem; font-style: italic; } .citacao cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; font-size: .9rem; color: rgba(255, 255, 255, .8); } /* Equipe ------------------------------------------------------------------ */ .equipe-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; margin-top: 34px; } .pessoa { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-grande); padding: 24px 18px 20px; text-align: center; transition: border-color .18s ease, box-shadow .18s ease; } .pessoa:hover { border-color: var(--f); box-shadow: var(--sombra); } .pessoa img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 14px; border: 3px solid var(--f-claro); background: var(--f-claro); } .pessoa h3 { font-size: 1.02rem; margin-bottom: 3px; } .pessoa p { color: var(--f); font-size: .84rem; font-weight: 600; } /* Parceiros: so o logotipo ------------------------------------------------ */ .logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-top: 30px; } .logo-cartao { /* Cinza bem claro (e nao branco) para que logos de fundo branco tambem apareçam recortados dentro do cartao. */ background: #f8fafc; border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px 18px; display: grid; place-items: center; min-height: 110px; } .logo-cartao img { max-height: 62px; width: auto; object-fit: contain; } /* Clientes: logotipo + o servico prestado --------------------------------- */ .clientes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 30px; } .cliente { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; } .cliente img { width: 74px; height: 54px; flex: 0 0 auto; object-fit: contain; } .cliente h3 { font-size: .98rem; margin-bottom: 3px; } .cliente p { color: var(--texto-sec); font-size: .84rem; line-height: 1.4; } .secao-clara { background: #fff; padding: 80px 0; border-top: 1px solid var(--borda); } .secao-fundo { background: var(--fundo); padding: 80px 0; } @media (max-width: 900px) { .visao-grade { grid-template-columns: 1fr; } } @media (max-width: 720px) { .secao-clara, .secao-fundo { padding: 58px 0; } .equipe-grade { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; } .pessoa img { width: 84px; height: 84px; } .clientes-grade { grid-template-columns: 1fr; } }