/* home-cards-v1.5.0.css — Build 2025-09-05 Objetivo: 1) Alinhar os cards ao cabeçalho e melhorar a distribuição central da grade 2) Tipografia do corpo dos cards: Open Sans Regular, texto centralizado 3) Imagens com mesmo tamanho/alinhadas e mais próximas do título */ /* -------------------------- 2) Tipografia do corpo dos cards ---------------------------*/ #sobre-infra .service-card-media + p, #sobre-infra .service-card-desc, #sobre-infra .services-grid .card p, .cards-home .card p, #cards-home .card p{ text-align: center; font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; } /* -------------------------- 3) Imagens alinhadas e tamanho consistente - Use aspecto 16:9 (ajuste aqui se preferir 4:3) ---------------------------*/ #sobre-infra .service-card-media{ position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin-top: 1px; /* aproxima da faixa do título */ } #sobre-infra .service-card-title{ margin-bottom: 4px; } /* aproxima do título */ #sobre-infra .service-card-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } /* -------------------------- 1) Grade alinhada ao cabeçalho e melhor centralização - 4 colunas em >=1200px - 3 colunas em 992–1199px - 2 colunas em 576–991px - 1 coluna em <576px - padding-inline garante alinhamento com gutters do cabeçalho ---------------------------*/ #sobre-infra .services-grid, #sobre-infra .services-grid .services-grid{ margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; justify-content: center; /* distribui melhor no centro */ align-items: stretch; gap: 18px; } /* Colunas por breakpoint */ @media (min-width: 1200px){ #sobre-infra .services-grid, #sobre-infra .services-grid .services-grid{ grid-template-columns: repeat(4, minmax(280px, 1fr)) !important; max-width: 1320px; /* aproxima do container do header */ } } @media (min-width: 992px) and (max-width: 1199.98px){ #sobre-infra .services-grid, #sobre-infra .services-grid .services-grid{ grid-template-columns: repeat(3, minmax(280px, 1fr)) !important; max-width: 1100px; } } @media (min-width: 576px) and (max-width: 991.98px){ #sobre-infra .services-grid, #sobre-infra .services-grid .services-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)) !important; max-width: 900px; } } @media (max-width: 575.98px){ #sobre-infra .services-grid, #sobre-infra .services-grid .services-grid{ grid-template-columns: 1fr !important; max-width: 560px; } } /* Evita rolagem horizontal por soma (colunas + gaps + padding) */ #sobre-infra .services-grid, #sobre-infra .services-grid .services-grid{ box-sizing: border-box; } /* === v1.5.3 — Home: efeitos, imagens arredondadas, proximidade e sem fundo (build 2025-09-05) === */ /* 1) Leve efeito nos cards (hover sutil) */ #sobre-infra .services-grid .card{ transition: box-shadow .25s ease, transform .25s ease; } #sobre-infra .services-grid .card:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11, 63, 174, .18); /* azul da marca, leve */ } /* 2) Imagens com cantos arredondados + alinhadas (mesmo tamanho já é garantido pelo aspect-ratio) */ #sobre-infra .service-card-media{ border-radius: 12px; overflow: hidden; /* garante o recorte arredondado */ background: transparent !important; /* remove qualquer fundo */ } #sobre-infra .service-card-media img{ border-radius: inherit; /* acompanha o raio do contêiner */ display: block; } /* 3) Aproximar ainda mais imagem do título */ #sobre-infra .service-card-title{ margin-bottom: 2px !important; } #sobre-infra .service-card-media{ margin-top: 0 !important; } /* 4) Remover "fundo" / glow antigo do ::before (caso exista) */ #sobre-infra .service-card-media::before{ content: none !important; background: none !important; filter: none !important; } /* v1.5.4 — rounding & alignment (build 2025-09-05) */ #sobre-infra .services-grid .service-card-media, #sobre-infra .services-grid .card .service-card-media, #sobre-infra .services-grid .card .card-img-top, #sobre-infra .services-grid .card img{ border-radius: 12px !important; background: transparent !important; overflow: hidden; /* para wrappers */ } #sobre-infra .services-grid .card img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit !important; } /* v1.5.4 — hover effects coverage (build 2025-09-05) */ #sobre-infra .services-grid .card, #sobre-infra .services-grid .service-card{ transition: box-shadow .25s ease, transform .25s ease; } #sobre-infra .services-grid .card:hover, #sobre-infra .services-grid .service-card:hover, #sobre-infra .services-grid a:hover .card, #sobre-infra .services-grid a:hover .service-card{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11, 63, 174, .18); } #sobre-infra .services-grid .service-card-media::before{ content: none !important; background: none !important; filter: none !important; } /* === v1.5.5 — hover mais presente + remover linhas/molduras entre título e imagem (build 2025-09-05) === */ /* Hover mais intenso nos cards */ #sobre-infra .services-grid .card, #sobre-infra .services-grid .service-card{ transition: box-shadow .18s ease, transform .18s ease; will-change: transform, box-shadow; } #sobre-infra .services-grid .card:hover, #sobre-infra .services-grid .service-card:hover, #sobre-infra .services-grid a:hover .card, #sobre-infra .services-grid a:hover .service-card, #sobre-infra .services-grid .card:focus-within, #sobre-infra .services-grid .service-card:focus-within{ transform: translateY(-4px) scale(1.01); box-shadow: 0 18px 44px rgba(11, 63, 174, .28), 0 6px 16px rgba(0,0,0,.08); } /* Remover qualquer separador/linha/moldura entre título e imagem */ #sobre-infra .service-card-title, #sobre-infra .service-card-media{ border: 0 !important; background: transparent !important; box-shadow: none !important; } #sobre-infra .service-card-title{ padding-bottom: 0 !important; margin-bottom: 0 !important; } #sobre-infra .service-card-media{ margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; } /* Esconder separadores comuns (hr/divider) entre título e imagem */ #sobre-infra .service-card-title + hr, #sobre-infra .service-card-title + .divider, #sobre-infra .service-card-title + .separator, #sobre-infra .service-card-media + .divider, #sobre-infra .service-card-media + .separator{ display: none !important; } /* Garantir que o wrapper/IMG mantenham os cantos arredondados e sem qualquer "borda branca" */ #sobre-infra .services-grid .service-card-media, #sobre-infra .services-grid .card .service-card-media, #sobre-infra .services-grid .card .card-img-top, #sobre-infra .services-grid .card img{ border-radius: 12px !important; background: transparent !important; overflow: hidden; } #sobre-infra .services-grid .card img{ border-radius: inherit !important; display: block; }