/* ========================================================================== BLOG — a faixa de capa (#feat) no celular -------------------------------------------------------------------------- O #feat e o bloco de topo do post e da pagina de listagem: a foto de destaque com o titulo por cima. No celular ele nascia colado no topo da janela, e como o #header e fixo (56px, opaco), a primeira linha do titulo ficava atras dele. A causa nao e do blog: o WordPress imprime, no fim do , um "global-styles-inline-css" com body{padding:0} que anula o body{padding-top:56px} do base.css em TODAS as paginas. Onde ha um hero proprio (home, hotel) isso nao aparece; aqui aparecia. O conserto local, em vez de devolver o padding ao body — o site inteiro ja se equilibra sem ele, e as paginas de rota propria compensam a altura do header cada uma do seu jeito: - o #feat reserva a altura do header no proprio padding; - a legenda sai do centro absoluto e entra no fluxo, entao a faixa cresce com o titulo em vez de corta-lo (titulo de post e comprido: o desta pagina tem quatro linhas no celular); - a foto perde a opacidade de 70% (que sobre o branco a CLAREIA) e ganha um vel escuro no lugar — a foto fica mais nitida e o texto branco, legivel; - titulo de 30px para 24px, que e o tamanho em que ele cabe sem empurrar a foto inteira para fora da primeira tela. Carregado por header.php em post e pagina (nunca na home, que tem hero proprio em hero-home.css). ========================================================================== */ @media (max-width: 680px) { body.single-post #feat, body.page #feat { height: auto; min-height: 250px; padding-top: 56px; /* a altura do #header, que e fixed */ box-sizing: border-box; } body.single-post #feat figure, body.page #feat figure { top: 0; height: 100%; opacity: 1; } body.single-post #feat figure::before, body.page #feat figure::before { height: 100%; background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .65)); } /* estatica: e ela que faz a faixa crescer junto com o titulo. O left/right e o transform sao do posicionamento absoluto de antes — sem zera-los o bloco sai deslocado para a direita. */ body.single-post #feat figcaption, body.page #feat figcaption { position: relative; top: auto; left: auto; right: auto; width: auto; margin: 0; transform: none; z-index: 2; padding: 18px 20px 26px; } body.single-post #feat h1, body.page #feat h1 { font-size: 24px; line-height: 1.25; } }