/* ============================================================ VIEWPORT ADAPTATION — Resumo Brasil Garante que o layout se adapte ao monitor sem esticar ============================================================ */ /* ── LARGURA MÁXIMA GLOBAL ── */ :root { --site-max: 1280px; /* largura máxima do conteúdo */ --site-pad: 20px; /* padding lateral padrão */ } /* Todos os wrappers de conteúdo respeitam o mesmo max-width */ .util-bar-inner, .site-header-inner, .nav-inner, .site-wrap, .footer-grid-wrap, .footer-newsletter-inner, .footer-bottom-inner, .footer-nav, .footer-links-wrap { max-width: var(--site-max) !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } /* O body nunca estica além do max-width — fundo cinza fica contido */ body { max-width: 100%; overflow-x: hidden; } /* Wrapper externo que centraliza tudo em monitores grandes */ .page-outer { width: 100%; background: var(--bg); } /* ── MONITORES MUITO LARGOS (≥1600px) ── */ @media (min-width: 1600px) { :root { --site-max: 1400px; --site-pad: 24px; } .site-wrap { padding: 22px var(--site-pad) !important; } } /* ── MONITORES GRANDES (1280–1599px) ── */ @media (min-width: 1280px) and (max-width: 1599px) { :root { --site-max: 1240px; --site-pad: 20px; } .site-wrap { padding: 18px var(--site-pad) !important; } } /* ── MONITORES MÉDIOS (1024–1279px) ── */ @media (min-width: 1024px) and (max-width: 1279px) { :root { --site-max: 1000px; --site-pad: 16px; } .site-wrap { padding: 16px var(--site-pad) !important; gap: 16px !important; } .sidebar { width: 270px !important; } } /* ── TABLETS (768–1023px) ── */ @media (min-width: 768px) and (max-width: 1023px) { :root { --site-max: 100%; --site-pad: 14px; } .site-wrap { flex-direction: column !important; padding: 14px var(--site-pad) !important; gap: 14px !important; } .sidebar { width: 100% !important; } .destaques-grid, .mais-grid, .cat-news-grid { grid-template-columns: repeat(2, 1fr) !important; } .thumb-grid { grid-template-columns: repeat(4, 1fr) !important; } } /* ── MOBILE GRANDE (480–767px) ── */ @media (min-width: 480px) and (max-width: 767px) { :root { --site-max: 100%; --site-pad: 12px; } .site-wrap { flex-direction: column !important; padding: 12px var(--site-pad) !important; gap: 12px !important; } .sidebar { width: 100% !important; } .destaques-grid, .mais-grid, .cat-news-grid { grid-template-columns: repeat(2, 1fr) !important; } .thumb-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ── MOBILE PEQUENO (< 480px) ── */ @media (max-width: 479px) { :root { --site-max: 100%; --site-pad: 10px; } .site-wrap { flex-direction: column !important; padding: 10px var(--site-pad) !important; gap: 10px !important; } .sidebar { width: 100% !important; } .destaques-grid, .mais-grid, .cat-news-grid, .thumb-grid { grid-template-columns: 1fr !important; } } /* ── HERO SLIDER — altura proporcional ao viewport ── */ .hero-slide img, .hero-slide .hero-placeholder, .hero img, .hero-placeholder { height: clamp(180px, 28vw, 420px); } /* ── SIDEBAR — largura proporcional ── */ @media (min-width: 1024px) { .sidebar { width: clamp(260px, 22%, 310px); flex-shrink: 0; } } /* ── HEADER AD — esconde em telas menores ── */ @media (max-width: 960px) { .header-ad { display: none !important; } } /* ── BREAKING BAR — max-width consistente ── */ .breaking-bar { /* a barra ocupa 100% da largura, mas o ticker fica contido */ } /* ── REMOVE SCROLL HORIZONTAL ── */ html, body { overflow-x: hidden; max-width: 100vw; } /* ── IMAGENS RESPONSIVAS ── */ img { max-width: 100%; height: auto; } /* ── TABELAS RESPONSIVAS ── */ .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── ANTI-FLASH: aplica fonte antes do JS carregar ── */ /* O script inline no já coloca a classe no , então estas regras garantem que o estilo seja aplicado imediatamente, sem esperar o app.js */ html.font-sm body { font-size: 13px; } html.font-md body { font-size: 15px; } html.font-lg body { font-size: 17px; } html.font-xl body { font-size: 19px; } html.font-xxl body { font-size: 22px; } html.high-contrast body { filter: contrast(1.6) grayscale(.15); } /* ── LARGURA MÁXIMA CONSISTENTE EM TODOS OS CONTAINERS ── */ /* Garante que nenhum container ultrapasse o padrão visual */ .util-bar { width: 100%; } .site-header { width: 100%; } .main-nav { width: 100%; } .breaking-bar { width: 100%; } .site-footer { width: 100%; } .footer-newsletter { width: 100%; } /* O conteúdo interno fica centralizado */ .util-bar-inner, .site-header-inner, .nav-inner, .site-wrap, .footer-grid-wrap, .footer-newsletter-inner, .footer-bottom-inner { box-sizing: border-box; padding-left: max(var(--site-pad, 20px), env(safe-area-inset-left)); padding-right: max(var(--site-pad, 20px), env(safe-area-inset-right)); }