/* ============================================================ SIORE — Página Contato (etapa 12) ESCOPO / DÍVIDA TÉCNICA CONHECIDA --------------------------------- O desta página usa: contato.html class="home page-contato" A classe `.home` NÃO significa "página inicial": é o escopo do design system v2 (css/home.css), compartilhado por várias páginas. `.page-contato` ativa, apenas nesta página, o visual plano do v2 sobre os componentes de contato definidos em css/styles.css. POR QUE UM ARQUIVO NOVO E NÃO uma extensão de solucoes.css ---------------------------------------------------------- solucoes.css é compartilhado por Soluções, Engenharia de Custos e Portfólio — as três aprovadas e congeladas. Qualquer edição nele colocaria as três em risco. Um arquivo novo, carregado só por contato.html, tem risco zero para as páginas já aprovadas. REGRA DESTA ETAPA — O FORMULÁRIO É INTOCÁVEL -------------------------------------------- Este arquivo altera APENAS aparência. Nenhuma regra aqui mexe em `display`, `max-height`, `opacity` ou `pointer-events` dos componentes controlados por JavaScript: .form-error / .form-success (display none <-> flex via .visible) .custom-select__options (max-height/opacity na classe .open) Alterar qualquer uma dessas propriedades quebraria a validação e o dropdown de assunto. Os estados de erro (.error) foram reescritos para continuarem visíveis no visual plano. Na etapa de consolidação (fim do projeto): 1. Renomear `.home` -> `.siore-v2` em css/home.css e nos 2. Fundir este arquivo com solucoes.css em siore-v2.css Não feito agora porque as demais páginas já estão aprovadas. Ver PT-01 no RELATORIO.md. ============================================================ */ /* A regra .contato-hero__lead foi REMOVIDA em 03/08/2026 (PT-01). Ficou órfã quando a copy oficial substituiu os dois parágrafos do hero por um texto único. Verificado antes de remover: zero ocorrências da classe em qualquer HTML ou JavaScript do projeto. */ /* ======================================== BLOCOS DA COPY OFICIAL (03/08/2026) Regras puramente ADITIVAS: servem apenas a elementos criados nesta etapa. Nenhuma regra aprovada foi alterada. ======================================== */ /* Texto de apresentação acima do formulário. Reaproveita .home-prose; aqui só ajusta escala e respiro, porque o .home-prose foi dimensionado para texto corrido em seção aberta, não para dentro de um card. */ .page-contato .contato-form__intro { margin-bottom: 1.9rem; } .page-contato .contato-form__intro p { font-size: 0.97rem; line-height: 1.7; margin-bottom: 0.8rem; } .page-contato .contato-form__intro p:last-child { margin-bottom: 0; } /* CTA final — a copy trouxe DOIS parágrafos. O .home-cta__text tem 2.5rem de margem inferior, dimensionado para um parágrafo único; sem isto abriria um vão entre os dois. */ .page-contato .home-cta__text:not(:last-of-type) { margin-bottom: 1.15rem; } /* ======================================== GRID — proporção e respiro do v2 ======================================== */ .page-contato .contact-grid { grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; } /* ======================================== CARDS — mesma linguagem plana da Home (componente .contact-card preservado; só o visual muda) ======================================== */ .page-contato .contact-card { background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(15, 23, 42, 0.07); border-radius: var(--radius); 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: 2.25rem 2rem; } /* O v2 não usa o filete estático no topo do card (home-card não tem). Mantido no CSS original — apenas ocultado nesta página. */ .page-contato .contact-card::before { display: none; } .page-contato .contact-card__title { font-size: 1.12rem; line-height: 1.35; margin-bottom: 1.75rem; } /* ======================================== CAMPOS — glass achatado, igual ao restante do v2 ======================================== */ .page-contato .form-group { margin-bottom: 1.4rem; } .page-contato .form-group label { font-size: 0.8rem; color: var(--slate-700); margin-bottom: 0.5rem; } .page-contato .form-input, .page-contato .form-textarea, .page-contato .custom-select__trigger { background: #fff; border: 1px solid rgba(15, 23, 42, 0.12); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0.85rem 1rem; font-size: 0.95rem; } .page-contato .form-input::placeholder, .page-contato .form-textarea::placeholder { font-size: 0.9rem; } .page-contato .form-textarea { min-height: 148px; } .page-contato .custom-select__trigger:hover { border-color: rgba(15, 23, 42, 0.22); } /* Foco — anel esmeralda sem o inset do glass */ .page-contato .form-input:focus, .page-contato .form-textarea:focus, .page-contato .custom-select.open .custom-select__trigger { border-color: var(--emerald-400); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14); } /* Dropdown do assunto — só cor e sombra. max-height / opacity / pointer-events NÃO são tocados: são o mecanismo de abrir e fechar controlado pelo JavaScript. */ .page-contato .custom-select__options { background: #fff; border: 1px solid rgba(15, 23, 42, 0.12); border-top: none; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); } /* ESTADOS DE ERRO — depois do foco, para vencerem por ordem. Sem isto, o campo inválido perderia o destaque vermelho. */ .page-contato .form-input.error, .page-contato .form-textarea.error, .page-contato .custom-select__trigger.error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); } /* Avisos de validação — apenas cor de fundo e borda. `display` continua sendo responsabilidade de .visible (styles.css). */ .page-contato .form-error, .page-contato .form-success { font-size: 0.88rem; padding: 0.85rem 1rem; } /* ======================================== CARD DE INFORMAÇÕES ======================================== */ .page-contato .contact-info-item { padding: 1.1rem 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .page-contato .contact-info-item__label { /* 11/08/2026: era 0.7rem, alinhado ao padrão 0.72rem do site (styles.css:1645, mesmo valor de .card-service__label). */ font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.2rem; } .page-contato .contact-info-item__text { font-size: 0.95rem; } /* ======================================== RESPONSIVO ⚠️ 11/08/2026 — CORREÇÃO. Este bloco era `@media (max-width: 1024px)` e o comentário aqui afirmava que "abaixo de 768px o styles.css já colapsa .contact-grid para uma coluna". Não colapsava. O styles.css:1355 tem `@media (max-width:768px) { .contact-grid { grid-template-columns: 1fr } }`, especificidade 0,1,0. A regra daqui é `.page-contato .contact-grid`, especificidade 0,2,0. As duas valem abaixo de 768px e esta vencia — as duas colunas nunca colapsavam. Resultado medido a 360px: o e-mail contato@siore.com.br passava 64,7px da largura da tela e era cortado, sem barra de rolagem para alcançá-lo. Rótulos como LOCALIZAÇÃO e ATENDIMENTO ficavam truncados. A correção é o `min-width: 769px` abaixo: agora o bloco vale só na faixa de tablet, e abaixo de 769px a regra do styles.css assume. Não foi preciso tocar em styles.css. ======================================== */ @media (min-width: 769px) and (max-width: 1024px) { .page-contato .contact-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .page-contato .contact-card { padding: 2rem 1.75rem; } } @media (max-width: 768px) { .page-contato .contact-grid { /* ⚠️ ESTA LINHA É A CORREÇÃO DE FATO — 11/08/2026. A regra base em contato.css:78 é `.page-contato .contact-grid` com `1.15fr 0.85fr` e SEM media query, especificidade 0,2,0. Ela vencia o colapso do styles.css:1355 (`.contact-grid`, 0,1,0) em toda largura, então as duas colunas nunca sumiam. Restringir o bloco de 1024px não bastou: sem ele, quem passava a valer abaixo de 769px era a regra da linha 78, ainda mais assimétrica — medido, o estouro a 480px PIOROU de 4,7px para 35px. É preciso declarar o colapso aqui, com a mesma especificidade e depois no arquivo. */ grid-template-columns: 1fr; gap: 1.75rem; } .page-contato .contact-card { padding: 1.75rem 1.5rem; } } @media (max-width: 480px) { .page-contato .contact-card { padding: 1.5rem 1.25rem; } .page-contato .contact-card__title { font-size: 1.05rem; margin-bottom: 1.4rem; } }