/*! * PontoBYTE dentro do app RMF (Redes Móveis Fixas) — adaptações da WebView. * * TODAS as regras deste arquivo são escopadas em `html.in-rmf-app`, classe que o * rmf-app.js só adiciona quando `window.rmfShare === true` (flag injetada pelo * app em document_start). Fora do app o arquivo é inerte — o HTML servido é o * mesmo para todo mundo, então ele continua cacheável no Cloudflare. * * Camadas de classe (todas no , todas postas pelo rmf-app.js): * .in-rmf-app → estamos dentro do app (layout/cromo) * .rmf-app-theme → os tokens --md-sys-color-* do app chegaram (cores) * .rmf-app-dark / .rmf-app-light → luminância do token de superfície * * As cores só são aplicadas sob .rmf-app-theme: se a injeção de tokens falhar, * a página continua com o tema normal do site (inclusive o dark automático do * pontobyte-custom), em vez de ficar branca no escuro. */ /* ========================================================================= 1. Cromo do site Dentro do app o leitor já tem a AppBar (wordmark, voltar, abrir no navegador). Header, menu, busca, sidebar, footer e o "voltar ao topo" viram redundância e roubam a primeira dobra. ========================================================================= */ html.in-rmf-app header.header-wraper, html.in-rmf-app #menu_wrapper, html.in-rmf-app #content_nav, html.in-rmf-app .search_form_menu_personal, html.in-rmf-app .mobile_menu_overlay, html.in-rmf-app .jl_day_night, html.in-rmf-app .breadcrumbs_options, html.in-rmf-app #sidebar, html.in-rmf-app footer#footer-container, html.in-rmf-app .footer-bottom, html.in-rmf-app #go-top, /* Avisos de offline do site: o app tem o próprio tratamento de conectividade, dois avisos competindo pelo mesmo leitor confundem. */ html.in-rmf-app #pontobyte-offline-toast, html.in-rmf-app #mio-toast, /* Anúncios: as requisições já ficam pausadas no app (ver rmf-app.js); isto só evita que sobre espaço reservado se algum slot escapar. */ html.in-rmf-app .jl_ads_section, html.in-rmf-app ins.adsbygoogle { display: none !important; } /* Saídas do artigo para outras páginas do site. A navegação dentro do app é do app (aba Artigos); a página serve o artigo e para por aí. */ html.in-rmf-app .related-posts, html.in-rmf-app .single_related_post, html.in-rmf-app #remark42, html.in-rmf-app #comments, html.in-rmf-app .comments-area, html.in-rmf-app .single_section_comment, html.in-rmf-app .comment-respond, html.in-rmf-app #respond, html.in-rmf-app .meta-category-small, html.in-rmf-app .single_meta_category, html.in-rmf-app .meta-category-small-builder, html.in-rmf-app .meta-category-small-text, html.in-rmf-app .meta_category_text_small, /* Chips de tag (#CHIP, #OPERADORAS) — cada um é uma página de arquivo. O .single_tag_share fica: é ele que segura o botão de compartilhar. */ html.in-rmf-app .tag-cat, html.in-rmf-app .single_post_tag_layout, /* "Post anterior / próximo": dois cards com miniatura, que na tela do app passam por bloco de notícias relacionadas. */ html.in-rmf-app .postnav, html.in-rmf-app .postnav_left, html.in-rmf-app .postnav_right, html.in-rmf-app .single_post_arrow_content { display: none !important; } /* A assinatura do autor continua visível — é crédito — mas não é mais tocável: dentro do app a página entrega o artigo e para aí. */ html.in-rmf-app a[rel="author"], html.in-rmf-app .single-post-meta-wrapper .post-author a, html.in-rmf-app .author-description h5 a, html.in-rmf-app .author-info a, html.in-rmf-app .jl_post_meta .jl_author_img_w a { pointer-events: none !important; cursor: default !important; text-decoration: none !important; } /* ========================================================================= 2. Métrica de leitura Sem header e sem sidebar dá para relaxar a largura e subir o corpo do texto: é uma tela de celular em modo leitura, não um desktop. ========================================================================= */ html.in-rmf-app #content_main, html.in-rmf-app #wrapper_masonry { padding-top: 12px !important; } /* Em single é `#content_main > .container`; em arquivo o próprio `#wrapper_masonry` é o container. */ html.in-rmf-app #content_main .container, html.in-rmf-app #wrapper_masonry.container, html.in-rmf-app .main_title_wrapper .container { max-width: 700px !important; padding-left: 18px !important; padding-right: 18px !important; } /* Faixa de título de categoria/arquivo: sem header em cima, 50px de respiro é demais. */ html.in-rmf-app .main_title_wrapper { padding-top: 22px !important; padding-bottom: 18px !important; } /* A coluna de conteúdo assume a largura toda (a sidebar saiu). */ html.in-rmf-app .main_content > #content, html.in-rmf-app .main_content > .col-md-8, html.in-rmf-app #content.col-md-8 { width: 100% !important; max-width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* A WebView vai até a borda inferior da tela. */ html.in-rmf-app body { padding-bottom: env(safe-area-inset-bottom) !important; } /* --- Sem rolagem horizontal --- A página nunca arrasta de lado dentro do app. O que for largo demais (tabela, bloco de código, embed) rola dentro da própria caixa, em vez de esticar o documento — assim nada fica cortado por causa do overflow-x: hidden. */ html.in-rmf-app, html.in-rmf-app body { overflow-x: hidden !important; max-width: 100% !important; } html.in-rmf-app .post_content img, html.in-rmf-app .content_single_page img, html.in-rmf-app .post_content iframe, html.in-rmf-app .content_single_page iframe, html.in-rmf-app .post_content video { max-width: 100% !important; } /* Só no corpo do texto: miniaturas do tema usam altura fixa com object-fit. */ html.in-rmf-app .post_content img, html.in-rmf-app .content_single_page img { height: auto !important; } /* --- Imagem de destaque: tamanho não pode depender do srcset --- O tema usa `.single_content_header .image-post-thumb img{ width: auto }`, então a largura renderizada é a largura intrínseca do candidato que o navegador escolheu do srcset (300w … 1280w), apenas limitada por max-width. Se a WebView reavalia o `sizes` num momento em que o layout está estreito — o que acontece durante o toque longo, quando entra o modo de seleção — ela pode ficar com o candidato de 300w: a imagem encolhe para 300px e, por causa do `float: left`, fica encostada no canto. Fixando a largura em 100%, o candidato escolhido passa a mudar só a resolução, nunca o layout. */ html.in-rmf-app .single_content_header .image-post-thumb img, html.in-rmf-app .image-post-thumb.jlsingle-title-above img { width: 100% !important; max-width: 100% !important; height: auto !important; float: none !important; display: block !important; } html.in-rmf-app #content table, html.in-rmf-app #content pre, html.in-rmf-app #content .wp-block-table, html.in-rmf-app #content .wp-block-embed__wrapper { max-width: 100% !important; overflow-x: auto !important; } /* Tabela só rola dentro da caixa se virar bloco. */ html.in-rmf-app #content table { display: block !important; } html.in-rmf-app .post_content, html.in-rmf-app .single_section_content .post_content, html.in-rmf-app .single_section_content .post_content p, html.in-rmf-app .content_single_page p { font-size: 17px !important; line-height: 1.75 !important; } html.in-rmf-app .single_post_entry_content .single_post_title_main { font-size: clamp(26px, 6vw, 34px) !important; line-height: 1.22 !important; } /* --- Respiro lateral do texto --- O tema encosta o conteúdo na borda no celular: o padding do .container é comido pela margem negativa do .row, e a coluna vai a zero. Em vez de afastar a coluna inteira (o que encolheria as imagens), o recuo entra só nos blocos de texto — imagem, embed, galeria e tabela seguem na largura cheia. */ html.in-rmf-app .single_post_entry_content, html.in-rmf-app .single_tag_share, html.in-rmf-app .auth, html.in-rmf-app .post_content > *:not(figure):not(img):not(iframe):not(table):not(.wp-block-image):not(.wp-block-embed):not(.wp-block-embed__wrapper):not(.wp-block-gallery):not(.wp-block-table), html.in-rmf-app .content_single_page > *:not(figure):not(img):not(iframe):not(table):not(.wp-block-image):not(.wp-block-embed):not(.wp-block-embed__wrapper):not(.wp-block-gallery):not(.wp-block-table) { padding-left: 14px !important; padding-right: 14px !important; } /* ========================================================================= 3. Tokens de cor do app (Material 3) O app sobrescreve os --md-sys-color-* inline no com o ColorScheme atual — inclusive a cor personalizada de apoiador — e reinjeta quando o leitor troca o tema com a página aberta. Consumindo os tokens, a página segue o app sozinha, sem listener. Os fallbacks são a paleta clara do site, para o caso de faltar um token. ========================================================================= */ html.in-rmf-app.rmf-app-theme { --rmf-surface: var(--md-sys-color-surface, #fff); --rmf-surface-container: var(--md-sys-color-surface-container-low, var(--md-sys-color-surface, #f4f4f4)); --rmf-surface-container-high: var(--md-sys-color-surface-container-high, var(--md-sys-color-surface-container, #ececec)); --rmf-on-surface: var(--md-sys-color-on-surface, #333); --rmf-on-surface-variant: var(--md-sys-color-on-surface-variant, #767676); --rmf-primary: var(--md-sys-color-primary, #21601e); --rmf-on-primary: var(--md-sys-color-on-primary, #fff); --rmf-primary-container: var(--md-sys-color-primary-container, #e6f0e2); --rmf-on-primary-container: var(--md-sys-color-on-primary-container, #15392d); --rmf-outline: var(--md-sys-color-outline-variant, #e0e0e0); } /* Controles nativos (scrollbar, seleção, form controls) seguem o app. */ html.in-rmf-app.rmf-app-dark { color-scheme: dark; } html.in-rmf-app.rmf-app-light { color-scheme: light; } /* --- 3.1 Superfície --- */ html.in-rmf-app.rmf-app-theme, html.in-rmf-app.rmf-app-theme body, html.in-rmf-app.rmf-app-theme .options_layout_wrapper, html.in-rmf-app.rmf-app-theme .options_layout_container, html.in-rmf-app.rmf-app-theme #content_main, html.in-rmf-app.rmf-app-theme #wrapper_masonry { background: var(--rmf-surface) !important; color: var(--rmf-on-surface) !important; } /* Os "cartões" do tema deixam de pintar fundo próprio e herdam a superfície. */ html.in-rmf-app.rmf-app-theme #content, html.in-rmf-app.rmf-app-theme #content .box, html.in-rmf-app.rmf-app-theme .widget_container.content_page, html.in-rmf-app.rmf-app-theme .single_section_content, html.in-rmf-app.rmf-app-theme .jl_single_style1, html.in-rmf-app.rmf-app-theme .single_post_entry_content, html.in-rmf-app.rmf-app-theme .post_content, html.in-rmf-app.rmf-app-theme .single_tag_share, html.in-rmf-app.rmf-app-theme .related-posts, html.in-rmf-app.rmf-app-theme .postnav_left, html.in-rmf-app.rmf-app-theme .postnav_right, html.in-rmf-app.rmf-app-theme .single_post_arrow_content { background: transparent !important; } /* --- 3.2 Texto --- */ html.in-rmf-app.rmf-app-theme #content, html.in-rmf-app.rmf-app-theme #content p, html.in-rmf-app.rmf-app-theme #content li, html.in-rmf-app.rmf-app-theme #content td, html.in-rmf-app.rmf-app-theme #content th, html.in-rmf-app.rmf-app-theme #content strong, html.in-rmf-app.rmf-app-theme #content em, html.in-rmf-app.rmf-app-theme #content blockquote, html.in-rmf-app.rmf-app-theme #content blockquote p, html.in-rmf-app.rmf-app-theme #content h1, html.in-rmf-app.rmf-app-theme #content h2, html.in-rmf-app.rmf-app-theme #content h3, html.in-rmf-app.rmf-app-theme #content h4, html.in-rmf-app.rmf-app-theme #content h5, html.in-rmf-app.rmf-app-theme #content h6, html.in-rmf-app.rmf-app-theme .single_post_entry_content .single_post_title_main, html.in-rmf-app.rmf-app-theme .author-description, html.in-rmf-app.rmf-app-theme .related-posts h4 { color: var(--rmf-on-surface) !important; } /* Texto secundário: meta, datas, legendas. */ html.in-rmf-app.rmf-app-theme #content .single-post-meta-wrapper, html.in-rmf-app.rmf-app-theme #content .single-post-meta-wrapper span, html.in-rmf-app.rmf-app-theme #content .single-post-meta-wrapper span a, html.in-rmf-app.rmf-app-theme #content .jl_post_meta, html.in-rmf-app.rmf-app-theme #content .jl_post_meta span, html.in-rmf-app.rmf-app-theme #content .jl_post_meta a, html.in-rmf-app.rmf-app-theme #content .jl_content_gex, html.in-rmf-app.rmf-app-theme #content .jl_content_gex p, html.in-rmf-app.rmf-app-theme #content .post-meta, html.in-rmf-app.rmf-app-theme #content .post-meta span, html.in-rmf-app.rmf-app-theme #content .post-date, html.in-rmf-app.rmf-app-theme #content figcaption, html.in-rmf-app.rmf-app-theme #content .wp-caption-text, html.in-rmf-app.rmf-app-theme #content .wp-element-caption { color: var(--rmf-on-surface-variant) !important; } /* --- 3.3 Links --- */ html.in-rmf-app.rmf-app-theme #content a, html.in-rmf-app.rmf-app-theme #content .post_content a, html.in-rmf-app.rmf-app-theme .content_single_page p a, html.in-rmf-app.rmf-app-theme .single_section_content .post_content p a, html.in-rmf-app.rmf-app-theme .meta-category-small a { color: var(--rmf-primary) !important; } /* Títulos que também são links (relacionados, post anterior/próximo, cards de listagem) seguem a cor de texto — só o corpo do artigo destaca link com a cor do app. Todos repetem o #content da regra acima: sem o id, a especificidade perderia para ela. */ html.in-rmf-app.rmf-app-theme #content .related-posts h3 a, html.in-rmf-app.rmf-app-theme #content .related-posts h4 a, html.in-rmf-app.rmf-app-theme #content .single_post_arrow_content a, html.in-rmf-app.rmf-app-theme #content .postnav_left a, html.in-rmf-app.rmf-app-theme #content .postnav_right a, html.in-rmf-app.rmf-app-theme #content .author-info a, html.in-rmf-app.rmf-app-theme #content .image-post-title a { color: var(--rmf-on-surface) !important; } /* --- 3.4 Blocos com fundo/borda próprios --- */ html.in-rmf-app.rmf-app-theme .auth, html.in-rmf-app.rmf-app-theme .author-info, html.in-rmf-app.rmf-app-theme #content pre, html.in-rmf-app.rmf-app-theme #content code, html.in-rmf-app.rmf-app-theme #content .wp-block-code { background: var(--rmf-surface-container) !important; color: var(--rmf-on-surface) !important; } html.in-rmf-app.rmf-app-theme .single_tag_share, html.in-rmf-app.rmf-app-theme .related-posts, html.in-rmf-app.rmf-app-theme .auth, html.in-rmf-app.rmf-app-theme .postnav_left, html.in-rmf-app.rmf-app-theme .postnav_right, html.in-rmf-app.rmf-app-theme #content hr, html.in-rmf-app.rmf-app-theme #content table, html.in-rmf-app.rmf-app-theme #content td, html.in-rmf-app.rmf-app-theme #content th { border-color: var(--rmf-outline) !important; } html.in-rmf-app.rmf-app-theme #content blockquote { border-left-color: var(--rmf-primary) !important; } /* Chips de tag. */ html.in-rmf-app.rmf-app-theme .single_post_tag_layout li a { background: var(--rmf-surface-container-high) !important; border-color: var(--rmf-outline) !important; color: var(--rmf-on-surface-variant) !important; } /* Botão "Compartilhar" — no app ele abre o share sheet do sistema, então vale parecer um botão do app. */ html.in-rmf-app.rmf-app-theme .single_tag_share .single_post_share_icons, html.in-rmf-app.rmf-app-theme .rmf-top-share { background: var(--rmf-primary-container) !important; color: var(--rmf-on-primary-container) !important; border-color: transparent !important; } html.in-rmf-app.rmf-app-theme .single_tag_share .single_post_share_icons i, html.in-rmf-app.rmf-app-theme .rmf-top-share i { color: inherit !important; } /* Os dois botões de compartilhar — o do topo (criado pelo rmf-app.js) e o do rodapé — usam o mesmo desenho: a pílula de 21px do tema é alvo pequeno demais para o polegar, e dois botões iguais na mesma página não podem ter formatos diferentes. */ html.in-rmf-app .single_tag_share .single_post_share_icons, html.in-rmf-app .rmf-top-share { height: 36px !important; line-height: 36px !important; padding: 0 16px !important; font-size: 13px !important; border-radius: 18px !important; } html.in-rmf-app .rmf-top-share-row { display: flex !important; justify-content: flex-end !important; clear: both !important; margin: 14px 0 2px !important; /* O recuo lateral já vem do .single_post_entry_content, que é o pai. */ padding-left: 0 !important; padding-right: 0 !important; } /* O do topo mora numa linha flex própria; só o do rodapé continua flutuando. */ html.in-rmf-app .rmf-top-share { float: none !important; } /* --- 3.5 Listagens (categoria, tag, busca) --- Alcançáveis de dentro do app pelos links de categoria e de relacionados. */ html.in-rmf-app.rmf-app-theme .main_title_wrapper, html.in-rmf-app.rmf-app-theme .main_title_wrapper.jl_na_bg_title, html.in-rmf-app.rmf-app-theme .category_title_section { background: var(--rmf-surface-container) !important; } html.in-rmf-app.rmf-app-theme .main_title_wrapper .categories-title, html.in-rmf-app.rmf-app-theme .main_title_wrapper .categories-title.title, html.in-rmf-app.rmf-app-theme .main_title_col, html.in-rmf-app.rmf-app-theme .main_title_col p { color: var(--rmf-on-surface) !important; } html.in-rmf-app.rmf-app-theme #content .jl_grid_layout1, html.in-rmf-app.rmf-app-theme #content .post_grid_content_wrapper, html.in-rmf-app.rmf-app-theme #content .post-entry-content, html.in-rmf-app.rmf-app-theme #content .post-entry-content-wrapper, html.in-rmf-app.rmf-app-theme #content .large_post_content { background: transparent !important; } html.in-rmf-app.rmf-app-theme #content .image-post-title { color: var(--rmf-on-surface) !important; } /* Paginação / "Ver Mais". */ html.in-rmf-app.rmf-app-theme #content .pagination-more div a, html.in-rmf-app.rmf-app-theme #content .jellywp_pagination ul li a, html.in-rmf-app.rmf-app-theme #content .jellywp_pagination ul li span { background: var(--rmf-primary) !important; color: var(--rmf-on-primary) !important; border-color: transparent !important; }