/* ============================================================ PÁGINA DE GOIÂNIA — complemento de css/styles.css + cidades-seo.css Todas as regras deste arquivo são escopadas em `.page-goiania` (classe no de advogado-direito-educacional-goiania.html). Nenhum token é redefinido e nenhuma regra global é sobrescrita: as outras 29 páginas do site não são afetadas por este arquivo. Direção: elevar a execução dentro do sistema existente — navy #0b1320 / latão #b8960c / osso #f0ebe2, Cormorant + DM Sans. Sem cores novas, sem fontes novas. ============================================================ */ /* ============================================================ 0. DESTINO DAS ÂNCORAS O cabeçalho é fixo (72px) e nada no site define scroll-margin, então todo link interno de página (#fontes, #base-legal, o índice "Nesta página") aterrissava atrás do cabeçalho. Correção escopada nesta página. ============================================================ */ .page-goiania [id] { scroll-margin-top: 96px } /* ============================================================ 1. MEDIDA DE LEITURA O split 1fr/1fr padrão deixa o artigo com ~60 caracteres por linha e a coluna lateral larga demais para o conteúdo que carrega. Aqui o artigo fica em ~74 caracteres (medida ideal para 17px) e a lateral vira um trilho de 360px. ============================================================ */ .page-goiania .content-split { grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; } /* `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,…)` abaixo e sem este `min-width:0`, a página ganha rolagem horizontal no celular. */ .page-goiania .article-content { min-width: 0 } /* ============================================================ 2. HERO — índice de triagem O hero das páginas internas é uma coluna só, o que deixa metade da tela vazia no desktop. Aqui a segunda coluna recebe a pergunta que a leitora realmente faz ao chegar: qual é o meu caso? Cada item leva direto ao trecho que trata dele. ============================================================ */ /* O hero interno padrão + a section seguinte somavam ~190px de ar morto entre o H1 e o primeiro bloco de conteúdo. Aqui o par é apertado para que o hero e a resposta curta leiam como uma unidade. */ .page-goiania .page-hero { padding-bottom: 52px } .page-goiania .page-hero + .section { padding-top: 72px } .hero-goiania-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; align-items: start; } .hero-goiania-text { animation: fadeUp .8s ease both } .hero-goiania-text .lead { max-width: 560px } .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; } .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; } .triage-list { display: block; margin: 0; padding: 0; list-style: none } .triage-list li { border-top: 1px solid var(--line) } .triage-list li:first-child { border-top: 0 } .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; } .triage-list a::after { content: "→"; color: var(--gold); flex-shrink: 0; transform: translateX(0); transition: transform .2s; } .triage-list a:hover { color: var(--text) } .triage-list a:hover::after { transform: translateX(4px) } /* ============================================================ 3. RESPOSTA CURTA — o elemento-assinatura da página A frase mais importante do texto estava em corpo de 16px. Aqui ela recebe a face de display, e a tipografia executa o giro do argumento: a premissa superada em tom apagado, a realidade que permanece em contraste cheio, com a dobradiça ("Ainda assim,") marcada em itálico latão. Duas palavras de itálico — é todo o ornamento que o bloco recebe. ============================================================ */ .page-goiania .answer-box { padding: 32px 34px; border-left: 2px solid var(--gold); } .page-goiania .answer-box .answer-label { margin-bottom: 16px } .page-goiania .answer-box p:not(.answer-label) { font-family: var(--head); font-size: clamp(21px, 2.15vw, 27px); line-height: 1.36; font-weight: 500; color: var(--text); } .page-goiania .answer-box strong { font-weight: 500 } .thesis-was { color: var(--text-mut) } .thesis-is { color: var(--text) } .thesis-is em { font-style: italic; color: var(--gold); } /* ============================================================ 4. ÍNDICE DA PÁGINA Nove itens sublinhados viravam uma parede. Viram marcadores discretos, com o tique em latão fazendo o trabalho do sublinhado. ============================================================ */ .page-goiania .article-index { gap: 6px 22px; padding: 18px 0; margin-bottom: 44px; } .page-goiania .article-index strong { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--gold); margin-bottom: 10px; } .page-goiania .article-index a { text-decoration: none; position: relative; padding-left: 13px; color: var(--text-2); transition: color .2s; } .page-goiania .article-index a::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--gold); transition: width .2s; } .page-goiania .article-index a:hover { color: var(--text) } .page-goiania .article-index a:hover::before { width: 9px } /* ============================================================ 5. GLOSSÁRIO LOCAL (Central de Vagas / CMEI / redes) Os três cards não são "features": são três termos que a família vai encontrar nos canais da Prefeitura e precisa decodificar. Tratados como verbete — termo, filete, definição. ============================================================ */ .page-goiania .local-cards.glossary { display: block; margin-top: 30px; border-top: 1px solid var(--line-2); } .page-goiania .glossary .local-card { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 30px; align-items: start; background: none; border-top: 0; border-bottom: 1px solid var(--line); padding: 20px 0; transition: background .25s; } .page-goiania .glossary .local-card:hover { background: rgba(184,150,12,.04) } .page-goiania .glossary .local-card h3 { margin: 0; font-size: 20px; color: var(--text); line-height: 1.25; position: relative; padding-left: 17px; } .page-goiania .glossary .local-card h3::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 1px; background: var(--gold); } .page-goiania .glossary .local-card p { margin: 0; padding-top: 2px } /* ============================================================ 6. TABELA DE SITUAÇÕES É o bloco mais útil da página. A primeira coluna passa a ser o eixo de leitura (cor de texto cheia), a segunda recua para apoio, e a linha inteira ganha resposta ao passar o cursor. ============================================================ */ .page-goiania .situations-table { border-color: var(--line-2) } .page-goiania .situations-table thead th { font-size: 11px; letter-spacing: .14em; color: var(--gold); background: var(--bg-deep); padding: 13px 18px; } .page-goiania .situations-table td { padding: 17px 18px } .page-goiania .situations-table tbody td:first-child { color: var(--text); font-weight: 500; width: 38%; } .page-goiania .situations-table tbody td:nth-child(2) { color: var(--text-mut); font-size: 14px; width: 28%; } .page-goiania .situations-table tbody tr { transition: background .2s } .page-goiania .situations-table tbody tr:hover { background: rgba(184,150,12,.05) } .page-goiania .situations-table a { text-decoration: none; border-bottom: 1px solid var(--gold-soft) } .page-goiania .situations-table a:hover { border-bottom-color: var(--gold) } /* ============================================================ 7. ÂNCORA LEGAL DAS SUBSITUAÇÕES No lugar de numeração decorativa (01/02/03), cada subseção é rotulada pela norma que efetivamente a governa — o marcador carrega informação que a leitora usa. ============================================================ */ .page-goiania .article-content .situation-head { margin-top: 42px; margin-bottom: 14px; } .legal-tag { display: block; font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; } .page-goiania .article-content .situation-head h3 { margin: 0; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.22; } /* ============================================================ 8. AVISOS E LIMITES ============================================================ */ .page-goiania .data-warning { margin: 22px 0 0; padding: 15px 18px; border-left: 2px solid var(--gold); line-height: 1.7; } .page-goiania .callout { padding: 24px 28px; border-left-width: 2px } /* ============================================================ 9. PLACA DE ATENDIMENTO (NAP) O endereço é a carga útil de uma página local. Estava numa tabela cinza; vira uma placa, com os rótulos na voz utilitária e os dados em contraste cheio. Telefone e e-mail viram links acionáveis — a maior parte do público chega pelo celular. ============================================================ */ .page-goiania .contact-plate { border: 1px solid var(--gold-line); border-left: 2px solid var(--gold); background: var(--bg-card-2); margin: 30px 0 0; } .page-goiania .contact-plate table { min-width: 0; font-size: 16px } .page-goiania .contact-plate th[scope="row"] { width: 178px; color: var(--gold); background: transparent; font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; padding: 17px 20px; line-height: 1.6; vertical-align: baseline; } .page-goiania .contact-plate td { color: var(--text); padding: 15px 20px; line-height: 1.6; overflow-wrap: anywhere; } .page-goiania .contact-plate a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--gold-soft); transition: border-color .2s, color .2s; } .page-goiania .contact-plate a:hover { color: var(--gold); border-bottom-color: var(--gold) } .page-goiania .contact-plate tr:last-child th, .page-goiania .contact-plate tr:last-child td { border-bottom: 0 } .page-goiania .contact-plate caption { padding: 4px 20px 14px } /* ============================================================ 10. FAQ O mecanismo de abrir/fechar é o mesmo (js/main.js alterna apenas a classe .open). Aqui muda só a superfície: pergunta maior, respiro maior, e uma barra em latão marcando o item aberto. ============================================================ */ .page-goiania .faq-item { border-top-color: var(--line-2); padding-left: 0; border-left: 2px solid transparent; transition: border-color .25s, padding-left .25s; } .page-goiania .faq-item.open { border-left-color: var(--gold); padding-left: 22px; } .page-goiania .faq-question { padding: 26px 0 } .page-goiania .faq-question > span:first-child { font-size: 21px; line-height: 1.28; transition: color .2s; } .page-goiania .faq-question:hover > span:first-child { color: var(--gold) } .page-goiania .faq-item.open .faq-question > span:first-child { color: var(--text) } .page-goiania .faq-answer { padding-bottom: 28px; max-width: 62ch } .page-goiania .faq-answer p { font-size: 15px } .page-goiania .faq-item.open .faq-answer { animation: goiFaqIn .28s ease both } @keyframes goiFaqIn { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } } /* ============================================================ 11. FONTES E AUTORIA ============================================================ */ .page-goiania .sources-section { margin-top: 56px; padding-top: 32px; border-top-color: var(--line-2) } .page-goiania .source-list li { padding-left: 15px; position: relative; color: var(--text-2); line-height: 1.7; } .page-goiania .source-list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 7px; height: 1px; background: var(--gold); } .page-goiania .author-box { border-left-width: 2px } /* ============================================================ 12. TRILHO LATERAL ============================================================ */ .page-goiania .side-box { padding: 30px 28px } .page-goiania .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-goiania .side-box .office-name { font-family: var(--head); font-size: 20px; color: var(--text); line-height: 1.25; display: block; margin-bottom: 8px; } .page-goiania .side-box hr { margin: 26px 0 } .page-goiania .official-links a { display: inline-block; border-bottom: 1px solid transparent; transition: border-color .2s; } .page-goiania .official-links a:hover { border-bottom-color: var(--gold) } /* ============================================================ 13. RESPONSIVO ============================================================ */ @media (max-width: 1024px) { .hero-goiania-grid { grid-template-columns: 1fr; gap: 44px } .triage-card { max-width: 520px } .page-goiania .content-split { grid-template-columns: minmax(0, 1fr); gap: 56px } } @media (max-width: 900px) { .page-goiania .contact-plate th[scope="row"] { width: 140px; padding: 15px 16px } .page-goiania .contact-plate td { padding: 13px 16px } } @media (max-width: 640px) { .page-goiania .answer-box { padding: 26px 22px } .page-goiania .article-index { gap: 4px 18px } .page-goiania .faq-item.open { padding-left: 16px } .page-goiania .faq-question > span:first-child { font-size: 19px } .page-goiania .glossary .local-card { grid-template-columns: 1fr; gap: 8px } /* A tabela de situações 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. O público desta página é majoritariamente móvel. */ .page-goiania .situations-table { overflow-x: visible; border: 0; background: transparent; margin: 24px 0; } .page-goiania .situations-table table { min-width: 0; display: block } .page-goiania .situations-table caption { caption-side: top; display: block; padding: 0 0 14px; } .page-goiania .situations-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .page-goiania .situations-table tbody, .page-goiania .situations-table tr, .page-goiania .situations-table td { display: block; width: 100% } .page-goiania .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-goiania .situations-table tbody tr:hover { background: var(--bg-card) } .page-goiania .situations-table td, .page-goiania .situations-table tbody td:first-child, .page-goiania .situations-table tbody td:nth-child(2) { width: 100%; border: 0; padding: 0 0 12px; } .page-goiania .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; } /* A placa de atendimento também empilha. */ .page-goiania .contact-plate table, .page-goiania .contact-plate tbody, .page-goiania .contact-plate tr, .page-goiania .contact-plate th[scope="row"], .page-goiania .contact-plate td { display: block; width: 100% } .page-goiania .contact-plate tr { border-bottom: 1px solid var(--line); padding: 14px 18px; } .page-goiania .contact-plate tr:last-child { border-bottom: 0 } .page-goiania .contact-plate th[scope="row"] { width: 100%; padding: 0 0 3px } .page-goiania .contact-plate td { padding: 0; border: 0 } } @media (prefers-reduced-motion: reduce) { .hero-goiania-text, .triage-card { animation: none } }