/* ============================================================================ PÁGINAS + BLOG (L9) — desenho da PRODUÇÃO lifepodbrasil.com, valor por valor. Cobre as 17 telas da fatia: as 7 institucionais (page.php), /favoritos/, /rastrear-pedido/, /status-do-pedido/, os 4 posts (single.php), /blog/ (home.php), as 2 categorias (archive.php) e o 404. Toda medida saiu do CSS computado da produção em `docs/l9-provas/medidas-l9.json` (contextos desktop-1440 e mobile-390, iPhone 13 real). O medidor lê `textDecorationLine` e as quatro `border*Width` (tools/medir-l9.mjs, const PROPS) e só descarta o valor quando é `none`/`0px` — logo os dois SÃO medida: 0 de 2.156 nós com sublinhado e `borderBottomWidth: 1px` nos 26 `hr` de cada contexto. O ÚNICO valor que não sai do medidor é o `::marker`, que ele não coleta: esse veio do CSS que a produção SERVE (`us-custom-css` inline) e está marcado na regra. Cortes da produção (conferidos no código-fonte servido): 601px e 1025px no miolo, mais o 768px que o Woo do Impreza usa só no formulário de rastreio. Depende do casco: `.lp-container`, `--lp-respiro`, `--lp-grad`, `--lp-header-h`. ========================================================================= */ /* ── faixa do miolo ─────────────────────────────────────────────────────── Equivale ao `section.l-section.height_medium` da produção. Três degraus de respiro vertical (medido 24px em 390 e 64px em 1440; o degrau do meio é a regra @media max-width:1024 → 2.5rem do Impreza servido). O respiro LATERAL não entra aqui: quem dá é o `.lp-container` do casco. */ .lp-secao { padding: 24px 0; line-height: 28px; } @media (min-width: 601px) { .lp-secao { padding: 40px 0; } } @media (min-width: 1025px) { .lp-secao { padding: 64px 0; } } /* ⚠️ A entrelinha de 28px NÃO é enfeite. A produção põe 28px no e TUDO no miolo herda daí — parágrafo, item de lista, rótulo de campo, comentário e até o texto do snippet do /status-do-pedido/ (medido 16px/28px em todas as 17 telas, nos dois contextos). O base.css do tema deixa o corpo em 1.5 (24px), que é o desenho do casco; sem esta linha cada linha de texto da fatia sairia 4px mais apertada e a página inteira encurtaria. Fica em `.lp-secao` de propósito: alcança as 17 telas e não encosta no casco nem no produto. */ /* O miolo respira 24px no celular e 40px do 601 pra cima (fonte: `.l-section` com padding lateral 2.5rem e @media max-width:600 → 1.5rem). O casco troca só em 901px, e este seletor (0,2,0) vence o dele (0,1,0) em QUALQUER largura — por isso os DOIS degraus são obrigatórios. Confere: em 1440 dá caixa em x=150 com w=1140; em 390 dá x=24 com w=342. */ .lp-secao > .lp-container { --lp-respiro: 24px; } @media (min-width: 601px) { .lp-secao > .lp-container { --lp-respiro: 40px; } } /* NÃO existe padding-top de 150px/100px aqui. Na produção essa folga é do header fixo e mora no `.l-section-h`; o casco já reserva em `.lp-conteudo { padding-top: var(--lp-header-h) }` (100/140/150). Repetir dobra. */ /* ── tipografia do texto corrido ────────────────────────────────────────── Vale na prosa das páginas/posts, no bloco do 404 e no corpo dos comentários. Família, corpo (16px) e cor rgb(53,65,91) já vêm do body no casco.css; a entrelinha vem do `.lp-secao` acima. Aqui só o que a produção acrescenta. ⚠️ POR QUE `:where()` E NÃO `:is()` AQUI. Na produção estas regras são de ELEMENTO puro (`h1{}`, `p{}`, `a{}`, `ul{}`, `hr{}` do Impreza), peso (0,0,1) — de propósito, pra QUALQUER classe da própria página ganhar delas. É assim que o snippet do /status-do-pedido/ mantém o `.sp-h1` em 20px/peso 800 e o `.sp-meta` com 5px de margem em cima (medido). Escrever `.lp-prosa h1` daria peso (0,1,1) e INVERTERIA o resultado: o título do snippet saltaria pra 44,4px e perderia a margem. O `:where()` zera o peso do escopo e devolve exatamente o (0,0,1) da produção, sem abrir mão do escopo. Já o botão de enviar, mais abaixo, é o caso contrário: lá o tema TEM que ganhar da classe. */ /* Títulos: peso 400, entrelinha 1.2, cor rgb(15,19,31), 24px de margem embaixo (medido nos dois contextos em ajuda/sobre/atendimento/404 e nos 4 posts). */ :where(.lp-prosa, .lp-404) :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 24px; padding-top: 24px; line-height: 1.2; font-weight: 400; color: rgb(15, 19, 31); } /* O corpo do título é FLUIDO na produção — a mesma fórmula bate nos dois contextos medidos, então ela entra no lugar de dois valores fixos: 1440 → 44,4 / 35,84 / 32,4 / 28,96 / 26,52 · 390 → 33,9 / 24,29 / 21,9 / 19,51 / 18,12 */ :where(.lp-prosa, .lp-404) h1 { font-size: calc(30px + 1vw); } :where(.lp-prosa, .lp-404) h2 { font-size: calc(20px + 1.1vw); } :where(.lp-prosa, .lp-404) h3 { font-size: calc(18px + 1vw); } :where(.lp-prosa, .lp-404) h4 { font-size: calc(16px + 0.9vw); } :where(.lp-prosa, .lp-404) h5 { font-size: calc(15px + 0.8vw); } :where(.lp-prosa, .lp-404) h6 { font-size: calc(14px + 0.8vw); } /* Parágrafo: 24px de margem embaixo no desktop, 16px no celular (medido). */ :where(.lp-prosa, .lp-404, .lp-comentarios) p { margin: 0 0 24px; } /* A produção esconde parágrafo vazio — e o conteúdo do banco tem vários, sobra do construtor antigo (regra `p:empty{display:none}` do Impreza servido). */ :where(.lp-prosa, .lp-404, .lp-comentarios) p:empty { display: none; } @media (max-width: 600px) { :where(.lp-prosa, .lp-404) :is(h1, h2, h3, h4, h5, h6) { padding-top: 16px; } :where(.lp-prosa, .lp-404, .lp-comentarios) p { margin-bottom: 16px; } } /* O respiro acima do título some quando ele abre o bloco ou quando vem logo depois do título do nível de cima. Não é teoria: o h4 que segue o h3 em /ajuda/ e o h3 que segue o h2 no post de notícias vieram SEM padding-top. */ :where(.lp-prosa, .lp-404) :is(h1, h2, h3, h4, h5, h6):first-child, :where(.lp-prosa) h1 + h2, :where(.lp-prosa) h2 + h3, :where(.lp-prosa) h3 + h4, :where(.lp-prosa) h4 + h5, :where(.lp-prosa) h5 + h6 { padding-top: 0; } /* Último bloco fecha sem margem — é o que faz o miolo de /favoritos/ dar 245px exatos no 1440 (150 + 43 + 24 + 28) e o do 404 dar 105,281px. */ :where(.lp-prosa, .lp-404, .lp-comentarios) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li):last-child { margin-bottom: 0; } /* Listas: recuo por margem (medido x=190 dentro do miolo em x=150), sem padding — o

começa na mesma borda da