/* ============================================================ SIORE — Cards de serviço (Soluções, Engenharia de Custos e Portfólio) ESCOPO / DÍVIDA TÉCNICA CONHECIDA --------------------------------- Os destas páginas usam: servicos.html class="home page-solucoes" engenharia-custos.html class="home page-custos" portfolio.html class="home page-portfolio" A classe `.home` NÃO significa "página inicial": é o escopo do design system v2 (css/home.css), compartilhado por várias páginas. Reaproveitá-la evita duplicar ~300 linhas de CSS. Este arquivo também deixou de ser exclusivo de Soluções — desde a etapa 8 serve Engenharia de Custos e desde a etapa 11 o Portfólio. O nome do arquivo ficou desatualizado; nenhum componente novo foi criado, apenas o escopo dos seletores foi estendido. Na etapa de consolidação (fim do projeto): 1. Renomear `.home` -> `.siore-v2` em css/home.css e nos 2. Renomear este arquivo -> cards-servico.css (ou fundir em siore-v2.css) e trocar os três escopos por um só Não feito agora porque as páginas anteriores já estão aprovadas. ============================================================ */ /* ======================================== GRUPOS DE SOLUÇÕES (Engenharia / Tecnologia) — usado apenas em servicos.html ======================================== */ .page-solucoes .sol-group + .sol-group { margin-top: 5.5rem; } .page-solucoes .sol-group__head { text-align: center; margin-bottom: 2.75rem; } .page-solucoes .sol-group__title { font-family: var(--font-heading); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--slate-900); margin-bottom: 0.6rem; } .page-solucoes .sol-group__sub { font-size: 1.02rem; line-height: 1.7; color: var(--text-body); max-width: 58ch; margin: 0 auto; } /* Linha divisória sutil entre os dois grupos — substitui o divisor vertical do layout antigo (services-split) */ .page-solucoes .sol-group + .sol-group .sol-group__head::before { content: ''; display: block; width: 80px; height: 2px; margin: 0 auto 2.75rem; background: var(--light-gradient); background-image: linear-gradient(90deg, var(--emerald-400), var(--blue-400)); border-radius: 2px; } /* ======================================== CARDS DE SERVIÇO — mesma linguagem plana da Home (componente .card-service-item preservado; só o visual muda) ======================================== */ .page-solucoes .card-service-item, .page-custos .card-service-item, .page-portfolio .card-service-item { background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.07); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 1.5rem 1.5rem 1.75rem; text-align: left; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .page-solucoes .card-service-item:hover, .page-custos .card-service-item:hover, .page-portfolio .card-service-item:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 44px rgba(15, 23, 42, 0.11); } /* Mantém o filete luminoso do topo (identidade Siore) */ .page-solucoes .card-service-item:hover::before, .page-custos .card-service-item:hover::before, .page-portfolio .card-service-item:hover::before { width: 100%; opacity: 1; } .page-solucoes .card-service-item__img, .page-custos .card-service-item__img, .page-portfolio .card-service-item__img { height: 168px; margin-bottom: 1.25rem; } /* Tipografia maior: os cards antigos ficavam espremidos em duas colunas de 560px; agora ocupam a largura total */ .page-solucoes .card-service-item__title, .page-custos .card-service-item__title, .page-portfolio .card-service-item__title { font-size: 1.08rem; margin-bottom: 0.6rem; line-height: 1.35; } .page-solucoes .card-service-item__text, .page-custos .card-service-item__text, .page-portfolio .card-service-item__text { font-size: 0.95rem; line-height: 1.7; color: var(--text-body); } /* Cards com ícone (Diferenciais) permanecem centralizados */ .page-solucoes .sol-difs .card-service-item, .page-custos .sol-difs .card-service-item, .page-portfolio .sol-difs .card-service-item { text-align: center; } .page-solucoes .card-service-item__icon, .page-custos .card-service-item__icon, .page-portfolio .card-service-item__icon { color: var(--emerald-600); margin-bottom: 1rem; } /* ======================================== RESPONSIVO ======================================== */ @media (max-width: 1024px) { .page-solucoes .sol-group + .sol-group { margin-top: 4rem; } .page-solucoes .card-service-item__img, .page-custos .card-service-item__img, .page-portfolio .card-service-item__img { height: 180px; } } @media (max-width: 768px) { .page-solucoes .sol-group + .sol-group { margin-top: 3rem; } .page-solucoes .sol-group__head { margin-bottom: 2rem; } .page-solucoes .sol-group + .sol-group .sol-group__head::before { margin-bottom: 2rem; } .page-solucoes .card-service-item, .page-custos .card-service-item, .page-portfolio .card-service-item { text-align: center; padding: 1.25rem 1.25rem 1.5rem; } .page-solucoes .card-service-item__img, .page-custos .card-service-item__img, .page-portfolio .card-service-item__img { height: 200px; } } @media (max-width: 480px) { .page-solucoes .card-service-item__img, .page-custos .card-service-item__img, .page-portfolio .card-service-item__img { height: 170px; } }