/* ============================================================ PÁGINAS PILAR (lote B) — complemento de css/styles.css Compartilhado por 7 páginas nacionais: vaga-em-creche · vaga-cmei · fila-espera-creche · escola-publica-perto-de-casa · irmaos-mesma-escola · crianca-tea-professor-apoio · crianca-deficiencia-suporte-escolar Todas as regras são escopadas em `.page-pillar-b` (classe no dessas 7 páginas). Nenhum token é redefinido e nenhuma regra global é sobrescrita: as demais páginas do site não são afetadas por este arquivo. Direção: mesma do trabalho já aprovado em Goiânia e na home — elevar a execução dentro do sistema existente (navy #0b1320 / latão #b8960c / osso #f0ebe2, Cormorant + DM Sans). Sem cores novas, sem fontes novas. O que muda é o que a estrutura diz. ============================================================ */ /* ============================================================ 0. DESTINO DAS ÂNCORAS O cabeçalho é fixo (72px) e nada no site define scroll-margin. Sem isto, cada item do índice de triagem do hero aterrissa atrás do cabeçalho. ============================================================ */ .page-pillar-b [id] { scroll-margin-top: 96px } /* ============================================================ 1. MEDIDA DE LEITURA O split 1fr/1fr padrão deixa o artigo com ~60 caracteres por linha — curto para 17px — e a coluna lateral larga demais para o que ela carrega. Artigo em ~74 caracteres, lateral vira um trilho de 360px. `1fr` equivale a `minmax(auto,1fr)`: a coluna não encolhe abaixo do min-content do que está dentro dela, e a tabela do artigo carrega `min-width:560px` no CSS global. Sem o `minmax(0,…)` e sem o `min-width:0`, as páginas com tabela ganham rolagem horizontal no celular. ============================================================ */ .page-pillar-b .content-split { grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; } .page-pillar-b .article-content { min-width: 0 } /* ============================================================ 2. HERO — índice de triagem O hero interno é uma coluna só: no desktop, metade da tela fica vazia ao lado do H1. A segunda coluna passa a responder a pergunta que a leitora faz ao chegar — qual é o meu caso — com cada linha levando direto ao trecho que trata dele. ============================================================ */ .page-pillar-b .page-hero { padding-bottom: 52px } .page-pillar-b .page-hero + .section { padding-top: 72px } .page-pillar-b .hero-pillar-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; align-items: start; } .page-pillar-b .hero-pillar-text { animation: fadeUp .8s ease both } .page-pillar-b .hero-pillar-text .lead { max-width: 560px } .page-pillar-b .triage-card { background: var(--bg-card); border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: 28px 30px 8px; animation: fadeIn 1s ease both; animation-delay: .25s; } .page-pillar-b .triage-label { font-family: var(--body); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 500; color: var(--gold); margin: 0 0 4px; } .page-pillar-b .triage-list { display: block; margin: 0; padding: 0; list-style: none } .page-pillar-b .triage-list li { border-top: 1px solid var(--line) } .page-pillar-b .triage-list li:first-child { border-top: 0 } .page-pillar-b .triage-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 15px 0; font-size: 15px; line-height: 1.45; color: var(--text-2); transition: color .2s; } .page-pillar-b .triage-list a::after { content: "→"; color: var(--gold); flex-shrink: 0; transform: translateX(0); transition: transform .2s; } .page-pillar-b .triage-list a:hover { color: var(--text) } .page-pillar-b .triage-list a:hover::after { transform: translateX(4px) } /* ============================================================ 3. RESPOSTA CURTA — o elemento-assinatura destas páginas Cada uma delas abre com a frase que resolve a dúvida da leitora ("Matricular não é incluir", "Sim, existe previsão legal expressa — mas ela tem um requisito que muda tudo"), e essa frase estava em corpo de 17px, indistinguível do resto. Ela passa a ter a face de display e o contraste cheio; a explicação que vem em seguida recua para a voz de apoio. O texto não muda — muda quem fala mais alto. ============================================================ */ .page-pillar-b .answer-box { margin: 0 0 34px; padding: 30px 32px; border: 1px solid var(--gold-line); border-left: 2px solid var(--gold); background: var(--bg-card-2); } .page-pillar-b .answer-label { font-family: var(--body); text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 500; color: var(--gold); margin: 0 0 14px; } .page-pillar-b .answer-box p:not(.answer-label) { color: var(--text-2); font-size: 16px; line-height: 1.8; margin: 0; } .page-pillar-b .answer-box p > strong:first-child { display: block; font-family: var(--head); font-size: clamp(21px, 2.1vw, 26px); line-height: 1.34; font-weight: 500; color: var(--text); margin-bottom: 12px; } .page-pillar-b .answer-box em { font-style: italic; color: var(--gold) } .page-pillar-b .answer-box a { color: var(--gold) } /* ============================================================ 4. BASE LEGAL COMO VERBETE As listas de "Base legal" são, na forma, `

Norma: o que ela diz

` — um glossário disfarçado de lista com marcador. O marcador redondo não informa nada; o nome da norma, sim. Ele sobe para rótulo e a explicação fica abaixo, como definição. ============================================================ */ .page-pillar-b .article-content .legal-list { list-style: none; padding: 0; margin: 22px 0 14px; border-top: 1px solid var(--line-2); } .page-pillar-b .article-content .legal-list li { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; margin: 0; padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--text-2); line-height: 1.75; transition: background .25s; } .page-pillar-b .article-content .legal-list li:hover { background: rgba(184,150,12,.04) } .page-pillar-b .article-content .legal-list li > strong:first-child { color: var(--text); font-weight: 500; font-size: 15px; position: relative; padding-left: 17px; } .page-pillar-b .article-content .legal-list li > strong:first-child::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 1px; background: var(--gold); } /* ============================================================ 5. FORÇA DO PEDIDO — o par "mais forte / mais frágil" Três destas páginas trazem duas listas seguidas: o que reforça o pedido e o que o enfraquece. Empilhadas, viram duas seções parecidas e a leitora perde a comparação. Lado a lado, viram o que de fato são: as duas colunas de uma triagem honesta — e a leitora se localiza em uma delas. ============================================================ */ .page-pillar-b .case-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 40px 0 28px; } .page-pillar-b .article-content .case-ledger h2, .page-pillar-b .article-content .case-ledger h3 { margin: 0 0 14px; padding-top: 16px; font-size: 21px; line-height: 1.25; } .page-pillar-b .case-ledger .case-col { border-top: 1px solid var(--line) } .page-pillar-b .case-ledger .case-col--strong { border-top: 2px solid var(--gold) } .page-pillar-b .article-content .case-ledger ul { list-style: none; padding: 0; margin: 0; } .page-pillar-b .article-content .case-ledger li { position: relative; padding-left: 17px; margin-bottom: 12px; font-size: 15px; line-height: 1.7; } .page-pillar-b .article-content .case-ledger li::before { content: ""; position: absolute; left: 0; top: .68em; width: 9px; height: 1px; } .page-pillar-b .case-col--strong li { color: var(--text-2) } .page-pillar-b .case-col--strong li::before { background: var(--gold) } .page-pillar-b .case-col--weak li { color: var(--text-mut) } .page-pillar-b .case-col--weak li::before { background: var(--text-mut); width: 5px } /* ============================================================ 6. TABELAS DE SITUAÇÕES Onde existem, são o bloco mais útil da página. A primeira coluna passa a ser o eixo de leitura (contraste cheio), a última recua para apoio, e a linha responde ao cursor. ============================================================ */ .page-pillar-b .situations-table { border-color: var(--line-2) } .page-pillar-b .situations-table thead th { font-size: 11px; letter-spacing: .14em; color: var(--gold); background: var(--bg-deep); padding: 13px 18px; } .page-pillar-b .situations-table td { padding: 17px 18px } .page-pillar-b .situations-table tbody td:first-child { color: var(--text); font-weight: 500; width: 32%; } .page-pillar-b .situations-table tbody td:last-child { color: var(--text-mut); font-size: 14px; } .page-pillar-b .situations-table tbody tr { transition: background .2s } .page-pillar-b .situations-table tbody tr:hover { background: rgba(184,150,12,.05) } /* ============================================================ 7. AVISOS E LIMITES ============================================================ */ .page-pillar-b .callout { padding: 24px 28px; border-left-width: 2px } .page-pillar-b .callout .notice { color: var(--text-mut) } /* ============================================================ 8. FAQ O mecanismo de abrir/fechar continua sendo o de js/main.js (alterna apenas a classe .open). Aqui muda a superfície: pergunta maior, respiro maior, e uma barra em latão marcando o item aberto. ============================================================ */ .page-pillar-b .faq-item { border-top-color: var(--line-2); padding-left: 0; border-left: 2px solid transparent; transition: border-color .25s, padding-left .25s; } .page-pillar-b .faq-item.open { border-left-color: var(--gold); padding-left: 22px; } .page-pillar-b .faq-question { padding: 26px 0 } .page-pillar-b .faq-question > span:first-child { font-size: 21px; line-height: 1.28; transition: color .2s; } .page-pillar-b .faq-question:hover > span:first-child { color: var(--gold) } .page-pillar-b .faq-item.open .faq-question > span:first-child { color: var(--text) } .page-pillar-b .faq-answer { padding-bottom: 28px; max-width: 62ch } .page-pillar-b .faq-answer p { font-size: 15px } .page-pillar-b .faq-item.open .faq-answer { animation: pillarFaqIn .28s ease both } @keyframes pillarFaqIn { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } } /* ============================================================ 9. AUTORIA ============================================================ */ .page-pillar-b .author-box { border-left-width: 2px } /* ============================================================ 10. TRILHO LATERAL ============================================================ */ .page-pillar-b .side-box { padding: 30px 28px } .page-pillar-b .side-box h3 { font-size: 12px; font-family: var(--body); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .page-pillar-b .side-box hr { margin: 26px 0 } .page-pillar-b .side-box > a[href*="wa.me"] { display: inline-block; border-bottom: 1px solid transparent; transition: border-color .2s; } .page-pillar-b .side-box > a[href*="wa.me"]:hover { border-bottom-color: var(--gold) } /* ============================================================ 11. RESPONSIVO ============================================================ */ @media (max-width: 1024px) { .page-pillar-b .hero-pillar-grid { grid-template-columns: 1fr; gap: 44px } .page-pillar-b .triage-card { max-width: 520px } .page-pillar-b .content-split { grid-template-columns: minmax(0, 1fr); gap: 56px } } @media (max-width: 900px) { .page-pillar-b .case-ledger { grid-template-columns: 1fr; gap: 0 } .page-pillar-b .case-ledger .case-col + .case-col { margin-top: 26px } .page-pillar-b .article-content .legal-list li { grid-template-columns: 1fr; gap: 6px; } } @media (max-width: 640px) { .page-pillar-b .answer-box { padding: 26px 22px } .page-pillar-b .faq-item.open { padding-left: 16px } .page-pillar-b .faq-question > span:first-child { font-size: 19px } /* A tabela deixa de rolar na horizontal e passa a empilhar: cada linha vira um bloco com os rótulos das colunas restituídos por data-col. Sem isto, a regra global `.article-content table{min-width:560px}` estoura a largura da tela — e o público destas páginas é majoritariamente móvel. */ .page-pillar-b .situations-table { overflow-x: visible; border: 0; background: transparent; margin: 24px 0; } .page-pillar-b .situations-table table { min-width: 0; display: block } .page-pillar-b .situations-table caption { caption-side: top; display: block; padding: 0 0 14px; } .page-pillar-b .situations-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .page-pillar-b .situations-table tbody, .page-pillar-b .situations-table tr, .page-pillar-b .situations-table td { display: block; width: 100% } .page-pillar-b .situations-table tr { background: var(--bg-card); border: 1px solid var(--line); border-top: 2px solid var(--gold-line); padding: 18px 18px 8px; margin-bottom: 14px; } .page-pillar-b .situations-table tbody tr:hover { background: var(--bg-card) } .page-pillar-b .situations-table td, .page-pillar-b .situations-table tbody td:first-child, .page-pillar-b .situations-table tbody td:last-child { width: 100%; border: 0; padding: 0 0 12px; } .page-pillar-b .situations-table td::before { content: attr(data-col); display: block; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; } } @media (prefers-reduced-motion: reduce) { .page-pillar-b .hero-pillar-text, .page-pillar-b .triage-card { animation: none } }