/* ============================================================ SIORE — Página Sobre (PT-09) ESCOPO: `.page-sobre` ------------------------------------------------------------ O desta página usa: sobre.html class="siore-v2 page-sobre" `.siore-v2` é o escopo do design system v2 (css/home.css). `.page-sobre` ativa, APENAS nesta página, o visual plano do v2 sobre os componentes antigos que a página ainda usa. POR QUE ESTE ARQUIVO EXISTE --------------------------- Até 03/08/2026 a página Sobre convivia com DOIS estilos de card: os planos do v2 (Nossa Forma de Pensar, Missão, Valores) e os antigos em glass — .team-card, .partner-company-card e .stats-card — mantidos intactos por determinação do cliente durante a modernização (ver PT-09). Na etapa final de refinamento o cliente autorizou a padronização. Ela é feita aqui, por CSS escopado, e NÃO alterando o HTML dos cards: assim o markup, os textos, as fotos e a hierarquia de títulos permanecem exatamente como foram aprovados. NENHUM COMPONENTE NOVO FOI CRIADO. Este arquivo apenas sobrescreve a aparência de componentes que já existiam em css/styles.css, exatamente como css/solucoes.css e css/contato.css fazem para as outras páginas (ver DA-12). Os tokens --h-shadow, --h-shadow-hover, --h-border e --h-border-dark vêm de `.siore-v2` (css/home.css) — são os mesmos valores usados por .home-card em todas as demais páginas, e é isso que garante o visual idêntico. Na consolidação futura: fundir com solucoes.css e contato.css em siore-v2.css. Ver PT-01 no RELATORIO.md. ============================================================ */ /* ======================================== EQUIPE E PARCEIROS — .team-card glass pesado -> superfície plana do v2 ======================================== */ .page-sobre .team-card, .page-sobre .partner-company-card { background: rgba(255, 255, 255, 0.82); border: var(--h-border); box-shadow: var(--h-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; 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-sobre .team-card:hover, .page-sobre .partner-company-card:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-hover); } /* O filete luminoso do topo é MANTIDO. Ele aparece só no hover, igual ao .card-service-item das páginas Soluções, Engenharia de Custos e Portfólio, onde foi preservado como identidade Siore. Diferente do filete estático da Contato, que era permanente e por isso foi ocultado lá. */ /* A foto usava a sombra glass de 4 camadas — alinhada à sombra leve do v2 para não destoar do card que a contém. */ .page-sobre .team-card__photo { box-shadow: var(--h-shadow); } /* ======================================== NÚMEROS — .stats-card Seção ESCURA: usa a variante dark do v2, idêntica a `.siore-v2 .bg-dark .home-card` ======================================== */ .page-sobre .stats-card { background: rgba(15, 23, 42, 0.55); border: var(--h-border-dark); box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .page-sobre .stats-card:hover { background: rgba(15, 23, 42, 0.68); border-color: rgba(16, 185, 129, 0.30); transform: translateY(-4px); } /* ======================================== HERO OCUPANDO A PRIMEIRA TELA — movido daqui em 04/08/2026 ---------------------------------------- A regra que fazia o hero da Sobre terminar exatamente na dobra vivia aqui como `.page-sobre > section:first-of-type`. Presa a uma classe de escopo de página, não alcançava `diferenciais.html` — a única das 7 sem classe `page-*` —, que exibia o mesmo defeito a 1366×768. Virou o modificador compartilhado `.hero-fill`, declarado uma vez em css/home.css e aplicado na `

` do hero da Sobre e da Método Siore. As declarações são as mesmas; a Sobre renderiza exatamente como antes. A documentação completa da causa está no bloco de css/home.css. ======================================== */ /* ======================================== ACESSIBILIDADE Espelha o bloco equivalente de css/home.css ======================================== */ @media (prefers-reduced-motion: reduce) { .page-sobre .team-card, .page-sobre .team-card:hover, .page-sobre .partner-company-card, .page-sobre .partner-company-card:hover, .page-sobre .stats-card, .page-sobre .stats-card:hover { transition: none; transform: none; } } /* ======================================== RÓTULOS QUE FAZEM PAPEL DE TÍTULO — 04/08/2026 ---------------------------------------- "Nossa Missão" e "Nossos Valores" são as duas únicas seções da Sobre cujo `.home-head` NÃO tem `

`: o `.section-label` carrega sozinho o papel de título. Nos 0,72rem / 600 / 0,18em do rótulo padrão, ficavam pequenos e apagados sobre a imagem de fundo. MEDIÇÃO. Amostragem das imagens reais compostas com o overlay de 70% mostrou que, no verde anterior, 73,9% da área do título ficava abaixo de 4,5:1 — o mínimo WCAG AA. emerald-600 #059669 ... 100,0% emerald-700 #047857 .... 73,9% (anterior) #065f46 ................ 31,9% #064e3b ................. 0,3% (adotado) `#064e3b` continua a escala emerald da paleta, que hoje para em 700. Com ele a leitura se resolve sem sombra, sem contorno e sem caixa atrás do texto — o resultado fica mais limpo do que qualquer artifício de fundo. SELETOR. `:only-child` alcança exatamente os rótulos que estão sozinhos no `.home-head`; o escopo `.page-sobre` limita à página. Uma regra só para as duas seções — nenhuma exceção por título e nenhuma alteração de HTML. O mesmo padrão de rótulo solitário existe em "Nossas Soluções" (Engenharia de Custos) e "Áreas de Atuação" (Portfólio). Ficaram DE FORA por determinação do cliente, que limitou o ajuste à Sobre. ======================================== */ .page-sobre .home-head > .section-label:only-child { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3; color: #064e3b; } @media (max-width: 768px) { .page-sobre .home-head > .section-label:only-child { font-size: 1rem; } }