/* Theme Name: NotivaNews Theme URI: https://notivanews.cy3.com.br Author: Notiva Author URI: https://notivanews.cy3.com.br Description: Tema leve e performático para portal de notícias. HTML/PHP/CSS puros, zero page builder, zero jQuery, zero dependências externas. Visual de jornal limpo com hero, cards e lista foto-esquerda. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: notivanews Tags: news, blog, two-columns, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready */ /* A folha de estilo real fica em assets/css/main.css, enfileirada no functions.php */ /* ========================================================================== NotivaNews — CSS fiel ao layout do G1 (g1.globo.com) Cores da marca: título vermelho #C02020 · meta azul #2040A0 ========================================================================== */ /* Fonte sans-serif como o G1 (Open Sans / sistema) */ :root{ --vermelho:#C02020; /* cor título - logo (G1 usa #C4170C) */ --azul: #2040A0; /* cor meta - logo */ --texto: #333; --cinza: #555; --cinza-claro:#777; --borda: #eee; --fundo: #fff; --fundo-site:#F9F9F9; /* fundo da página como o G1 */ --max: 1248px; /* largura máxima do conteúdo central */ --font: "Open Sans",Arial,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } *{margin:0;padding:0;box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} /* Elimina qualquer espaço/deslocamento no topo (protege contra /meta ou whitespace renderizado no , e contra admin-bar residual). */ html,body{margin-top:0 !important;padding-top:0 !important;} body>meta,body>title,body>link{ display:none !important; position:absolute !important; height:0 !important; width:0 !important; margin:0 !important; padding:0 !important; font-size:0 !important; line-height:0 !important; } body,button,input,select,textarea{ font-family:var(--font); } body{ font-family:var(--font); color:var(--texto); background:var(--fundo-site); line-height:1.45; font-size:16px; } img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} .container{max-width:var(--max);margin:0 auto;padding:0 16px;} /* ===== BARRA SUPERIOR FINA (globo.com) ===== */ .topbar{background:#1a1a1a;color:#bbb;font-size:12px;margin-top:-23px;position:relative;} .topbar .container{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:5px 16px;overflow:hidden;white-space:nowrap;} .topbar .topbar-links{display:flex;gap:16px;overflow:hidden;} .topbar a{color:#bbb;} .topbar a:hover{color:#fff;} .topbar .data{color:#fff;font-weight:bold;} /* ===== HEADER: LOGO + BUSCA ===== */ .site-header{background:var(--fundo);border-bottom:1px solid var(--borda);} .header-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;} .logo-link{display:inline-block;line-height:0;} .logo{max-width:150px;height:auto;} /* logo compacto como wordmark do G1 */ .busca{display:flex;align-items:center;border:1px solid #ccc;border-radius:20px;overflow:hidden;background:#fff;padding:0 12px;} .busca input{border:none;padding:8px 0;font-size:14px;outline:none;width:220px;font-family:var(--font);background:transparent;} /* Placeholder da busca em minúsculo e tom de cinza mais claro (discreto) */ .busca input::placeholder{color:#b5b5b5;text-transform:lowercase;opacity:1;} .busca input::-webkit-input-placeholder{color:#b5b5b5;opacity:1;} .busca input::-moz-placeholder{color:#b5b5b5;opacity:1;} .busca .lupa{width:22px;height:22px;flex:none;color:#777;cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;} .busca .lupa svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2;} /* ===== MENU DE EDITORIAS (horizontal) ===== */ .main-nav{border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);background:var(--fundo);} .main-nav .container{display:flex;align-items:center;position:relative;} .main-nav ul{list-style:none;display:flex;overflow-x:auto;scrollbar-width:none;} .main-nav ul::-webkit-scrollbar{display:none;} .main-nav ul li a{ display:block;padding:12px 15px;color:var(--texto); font-size:13px;font-weight:700;white-space:nowrap; border-right:1px solid var(--borda); } .main-nav ul li a:hover{background:var(--fundo-cinza);} /* ===== CORES + ÍCONES POR CATEGORIA DO MENU (psicologia de cores - público americano) ===== */ .main-nav ul li a .ic{display:inline-block;width:15px;height:15px;margin-right:6px;vertical-align:-2px;} .main-nav ul li a .ic svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .main-nav ul li.cat-usnews a{color:#DC2626;} .main-nav ul li.cat-usnews a:hover{color:#B91C1C;} .main-nav ul li.cat-money a{color:#16A34A;} .main-nav ul li.cat-money a:hover{color:#15803D;} .main-nav ul li.cat-aitech a{color:#8B5CF6;} .main-nav ul li.cat-aitech a:hover{color:#7C3AED;} .main-nav ul li.cat-housing a{color:#EA580C;} .main-nav ul li.cat-housing a:hover{color:#C2410C;} .main-nav ul li.cat-cars a{color:#2563EB;} .main-nav ul li.cat-cars a:hover{color:#1D4ED8;} .main-nav ul li.cat-jobs a{color:#0D9488;} .main-nav ul li.cat-jobs a:hover{color:#0F766E;} .main-nav ul li.cat-law a{color:#1E3A8A;} .main-nav ul li.cat-law a:hover{color:#1E40AF;} .main-nav ul li.cat-health a{color:#EC4899;} .main-nav ul li.cat-health a:hover{color:#DB2777;} .main-nav ul li.cat-world a{color:#0891B2;} .main-nav ul li.cat-world a:hover{color:#0E7490;} .main-nav ul li.cat-trending a{color:#D97706;} .main-nav ul li.cat-trending a:hover{color:#B45309;} .main-nav ul li.cat-social a{color:#6366F1;} .main-nav ul li.cat-social a:hover{color:#4F46E5;} .menu-toggle{display:none;background:none;border:none;color:var(--texto);font-size:20px;cursor:pointer;padding:10px 14px;font-family:var(--font);} @media(max-width:820px){ .menu-toggle{display:block;} .main-nav ul{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;z-index:50;border:1px solid var(--borda);} .main-nav ul.open{display:flex;} .main-nav ul li a{border-right:none;border-bottom:1px solid var(--borda);} } /* ===== BREADCRUMB ===== */ .breadcrumb{font-size:12px;color:var(--cinza-claro);padding:12px 0 2px;} .breadcrumb a{color:var(--azul);font-weight:bold;} .breadcrumb a:hover{text-decoration:underline;} .breadcrumb .sep{margin:0 6px;color:#bbb;} /* Alinha breadcrumb de single/busca ao corpo (700px) */ main > .container > .breadcrumb{max-width:700px;margin:0 auto;} /* ===== MAIN ===== */ main{background:var(--fundo-site);padding:24px 0 30px;} /* ===== CHAPEU (rótulo acima do título - icônico do G1, CINZA) ===== */ .chapeu{ display:inline-block;font-size:14px;font-weight:600; color:var(--texto);margin-bottom:6px;line-height:1.1; } /* ===== TÍTULO GIGANTE (hero, 40px como G1) ===== */ .hl-title{ font-size:40px;line-height:1.2;font-weight:700; color:var(--vermelho);letter-spacing:-.8px;margin-bottom:10px; } .hl-title a:hover{text-decoration:underline;} .hl-summary{font-size:16px;color:var(--texto);line-height:1.45;max-width:680px;} /* ===== META (data/hora) ===== */ .meta{font-size:12px;color:var(--cinza);font-weight:400;margin-top:8px;} /* ===== HERO: COLUNA 1 (card com fundo) + COLUNA 2 (2 cards verticais) ===== */ .hero{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;border-bottom:1px solid var(--borda);padding-bottom:20px;margin-bottom:20px;} /* Card principal (coluna 1): imagem de fundo + título embaixo; sem imagem = título centralizado */ .hero-main{ position:relative;overflow:hidden;min-height:416px;border-radius:8px; display:flex;align-items:flex-end; } .hero-main.has-image{background:#000;} .hero-main.no-image{align-items:center;justify-content:center;text-align:center;background:var(--fundo-site);border:1px solid var(--borda);padding:24px;} .hero-main .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;} .hero-main .overlay{ position:absolute;inset:0;z-index:1;width:100%;height:100%; display:flex;flex-direction:column;justify-content:flex-end; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.9) 100%); padding:20px 18px 16px; } .hero-main.no-image .overlay{background:none;padding:0;} .hero-main .overlay .chapeu{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:6px;text-shadow:0 1px 4px rgba(0,0,0,0.9);} .hero-main.no-image .overlay .chapeu{color:var(--texto);text-shadow:none;} .hero-main .hl-title{font-size:40px;line-height:1.2;} .hero-main .hl-title a{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.9);} .hero-main.no-image .hl-title a{color:var(--vermelho);text-shadow:none;} .hero-main .overlay .hl-summary{font-size:16px;color:#fff;margin-top:6px;text-shadow:0 1px 6px rgba(0,0,0,0.9);} .hero-main.no-image .overlay .hl-summary{color:var(--cinza);text-shadow:none;} .hero-main .overlay .meta{color:#eee;text-shadow:0 1px 4px rgba(0,0,0,0.9);} .hero-main.no-image .overlay .meta{color:var(--cinza);text-shadow:none;} .hero-side{display:flex;flex-direction:column;gap:16px;} .hero-side .card{position:relative;border-radius:8px;overflow:hidden;flex:1;min-height:195px;display:flex;align-items:flex-end;} .hero-side .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;} .hero-side .card .overlay{ position:absolute;inset:0;z-index:1;width:100%;height:100%; display:flex;flex-direction:column;justify-content:flex-end; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 45%, rgba(0,0,0,0.9) 100%); padding:16px 14px 12px; } .hero-side .card .overlay .chapeu{display:block;font-size:15px;font-weight:700;color:#fff;margin-bottom:6px;text-shadow:0 1px 4px rgba(0,0,0,0.9);} .hero-side .card .overlay h3{font-size:21px;line-height:1.2;font-weight:700;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.9);} .hero-side .card .overlay h3 a:hover{text-decoration:underline;} /* ===== FEED: LISTA VERTICAL (2/3) + SIDEBAR (1/3) ===== */ .feed-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px;} .feed-main{display:block;} /* Item de feed: UMA NOTÍCIA ABAIXO DA OUTRA. Thumb à esquerda quando há imagem */ .feed-item{padding:16px 0;border-bottom:1px solid var(--borda);} .feed-item.has-image{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start;} .feed-item .chapeu{font-size:16px;font-weight:600;color:var(--texto);} .feed-item h3{font-size:24px;line-height:1.1;font-weight:700;color:var(--vermelho);margin-bottom:6px;} .feed-item h3 a:hover{text-decoration:underline;} .feed-item .resumo{font-size:16px;color:var(--cinza);line-height:1.5;margin-bottom:6px;} .feed-item .meta{font-size:12px;color:var(--cinza);} .feed-item img{width:180px;height:110px;object-fit:cover;border-radius:6px;} /* ===== COLUNA DIREITA: Mais Lidas / Leia também ===== */ .sidebar{display:flex;flex-direction:column;gap:24px;} .widget{border:1px solid var(--borda);padding:16px;background:var(--fundo);border-radius:8px;} .widget h2{ font-size:16px;font-weight:700;color:var(--texto); border-bottom:2px solid var(--vermelho); padding-bottom:8px;margin-bottom:12px; display:flex;align-items:center;gap:8px; } .widget h2::before{content:"";width:4px;height:16px;background:var(--vermelho);display:inline-block;} /* Mais Lidas - lista numerada com números ENORMES como G1 */ .mais-lidas ol{list-style:none;counter-reset:ml;} .mais-lidas li{counter-increment:ml;display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--borda);align-items:flex-start;} .mais-lidas li:last-child{border-bottom:none;} .mais-lidas li::before{ content:counter(ml); font-size:36px;font-weight:900;color:var(--vermelho); line-height:0.9;min-width:38px;text-align:left;letter-spacing:-1px; } .mais-lidas li a{font-size:16px;font-weight:400;color:var(--texto);line-height:1.3;} .mais-lidas li a:hover{color:var(--vermelho);} /* Leia também - miniaturas */ .leia-tambem li{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--borda);align-items:center;} .leia-tambem li:last-child{border-bottom:none;} .leia-tambem img{width:80px;height:60px;object-fit:cover;border-radius:6px;} .leia-tambem a{font-size:13px;font-weight:700;color:var(--texto);line-height:1.3;display:block;} .leia-tambem a:hover{color:var(--vermelho);} /* ===== SEÇÃO TÍTULO (barra de seção como G1) ===== */ .section-bar{ display:flex;align-items:center;justify-content:space-between; border-bottom:2px solid var(--vermelho);padding-bottom:8px;margin:28px 0 16px; } .section-bar h2{font-size:18px;font-weight:700;color:var(--texto);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px;} .section-bar h2::before{content:"";width:5px;height:20px;background:var(--vermelho);} .section-bar .ver-todas{font-size:13px;color:var(--azul);font-weight:700;} /* ===== PÁGINA DE ARTIGO (single) ===== */ .single-wrap{max-width:700px;margin:0 auto;} /* Seções "Read Also" e comentários alinhadas à mesma largura do corpo do artigo */ .single-extras{max-width:700px;margin:0 auto;padding-top:8px;} .single-extras .feed-item{margin-bottom:20px;} .single-header{padding:24px 0 18px;border-bottom:1px solid var(--borda);margin-bottom:24px;} .single-header .chapeu{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--vermelho);display:inline-block;margin-bottom:6px;} .single-header h1{font-size:38px;line-height:1.18;font-weight:700;color:var(--vermelho);margin:8px 0 12px;letter-spacing:-.5px;} .single-header .subtitle{font-size:18px;color:var(--cinza);margin-bottom:14px;line-height:1.55;} .single-header .meta{font-size:14px;color:var(--cinza);} .single-featured{margin:0 0 26px;} .single-featured img{width:100%;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.08);} .single-featured figcaption{font-size:13px;color:var(--cinza-claro);margin-top:8px;padding-left:2px;} .single-content{font-size:18px;line-height:1.75;color:var(--texto);} .single-content p{margin-bottom:22px;} .single-content h2{font-size:24px;color:var(--texto);margin:30px 0 12px;font-weight:700;line-height:1.3;} .single-content h3{font-size:20px;color:var(--texto);margin:24px 0 10px;font-weight:700;} .single-content img{border-radius:8px;max-width:100%;height:auto;} .single-content figure{margin:22px 0;} .single-content figure figcaption{font-size:13px;color:var(--cinza-claro);margin-top:6px;} .single-content a{color:var(--azul);text-decoration:underline;} .single-content ul,.single-content ol{margin:0 0 22px 24px;line-height:1.7;} .single-content blockquote{border-left:3px solid var(--vermelho);padding:4px 0 4px 18px;margin:24px 0;color:var(--cinza);font-style:italic;} .single-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;} .single-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;} .tags{margin:28px 0 10px;padding-top:20px;border-top:1px solid var(--borda);} .tags a{display:inline-block;background:var(--fundo-cinza);color:var(--texto);font-size:13px;padding:6px 14px;border-radius:20px;margin:0 6px 8px 0;font-weight:600;transition:background .2s,color .2s;} .tags a:hover{background:var(--vermelho);color:#fff;} /* ===== COMENTÁRIOS (single) ===== */ .single-wrap + .section-bar{margin-top:32px;} .comments-area,.comment-respond{margin-top:32px;} .comments-title,.comment-reply-title{font-size:20px;font-weight:700;color:var(--texto);margin-bottom:16px;display:flex;align-items:center;gap:8px;} .comments-title::before,.comment-reply-title::before{content:"";width:5px;height:20px;background:var(--vermelho);} ol.comment-list{list-style:none;margin:0 0 24px;padding:0;} .comment-list .comment{margin-bottom:16px;} .comment-list .comment-body{background:var(--fundo-cinza);border-radius:10px;padding:16px;} .comment-list .comment-author{font-weight:700;color:var(--texto);} .comment-list .comment-metadata{font-size:12px;color:var(--cinza-claro);margin:4px 0 8px;} .comment-respond .comment-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--texto);} .comment-respond .comment-form input[type="text"],.comment-respond .comment-form input[type="email"],.comment-respond .comment-form input[type="url"],.comment-respond .comment-form textarea{width:100%;max-width:100%;padding:10px 12px;border:1px solid var(--borda);border-radius:8px;font-size:15px;font-family:inherit;background:#fff;} .comment-respond .comment-form textarea{min-height:120px;} .comment-respond .comment-form input:focus,.comment-respond .comment-form textarea:focus{outline:none;border-color:var(--vermelho);} .comment-respond .form-submit .submit{background:var(--vermelho);color:#fff;border:none;padding:10px 22px;border-radius:6px;font-size:15px;font-weight:700;cursor:pointer;} .comment-respond .form-submit .submit:hover{opacity:.9;} .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:13px;} /* ===== PÁGINA DE CATEGORIA ===== */ .cat-banner{background:#1a1a1a;color:#fff;padding:20px 0;margin-bottom:20px;} .cat-banner h1{font-size:28px;font-weight:700;text-transform:uppercase;letter-spacing:1px;} .cat-banner .desc{color:rgba(255,255,255,.8);font-size:14px;margin-top:4px;} .cat-banner .breadcrumb a{color:rgba(255,255,255,.7);} .cat-banner .breadcrumb .sep{color:rgba(255,255,255,.5);} .cat-banner .breadcrumb span{color:#fff;} /* Banner assume a cor da categoria */ .cat-banner.banner-usnews{background:#DC2626;} .cat-banner.banner-money{background:#16A34A;} .cat-banner.banner-aitech{background:#8B5CF6;} .cat-banner.banner-housing{background:#EA580C;} .cat-banner.banner-cars{background:#2563EB;} .cat-banner.banner-jobs{background:#0D9488;} .cat-banner.banner-law{background:#1E3A8A;} .cat-banner.banner-health{background:#EC4899;} .cat-banner.banner-world{background:#0891B2;} .cat-banner.banner-trending{background:#D97706;} .cat-banner.banner-social{background:#6366F1;} .cat-hero{display:grid;grid-template-columns:2fr 1fr;gap:28px;margin-bottom:20px;} .cat-list article{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--borda);} .cat-list img{width:200px;height:125px;object-fit:cover;border-radius:6px;} .cat-list h3{font-size:21px;line-height:1.2;font-weight:700;color:var(--vermelho);} .cat-list h3 a:hover{text-decoration:underline;} .cat-list .excerpt{font-size:14px;color:var(--cinza);margin-top:4px;} /* ===== BUSCA ===== */ .sr-head{margin-bottom:18px;} .sr-head h1{font-size:24px;font-weight:700;color:var(--texto);} .sr-head .q{color:var(--vermelho);} .search-form-big{display:flex;align-items:center;border:1px solid #ccc;border-radius:20px;overflow:hidden;max-width:560px;margin-bottom:24px;background:#fff;padding:0 12px;} .search-form-big input{flex:1;border:none;padding:12px 0;font-size:16px;outline:none;font-family:var(--font);background:transparent;} .search-form-big input::placeholder{color:#b5b5b5;text-transform:lowercase;opacity:1;} .search-form-big input::-webkit-input-placeholder{color:#b5b5b5;opacity:1;} .search-form-big button{background:none;border:none;color:#777;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;} .search-form-big button svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;} .sr-results article{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--borda);} .sr-results article img{width:150px;height:95px;object-fit:cover;border-radius:6px;} .sr-results h3{font-size:21px;font-weight:700;color:var(--vermelho);line-height:1.2;} .sr-results h3 a:hover{text-decoration:underline;} .sr-results .excerpt{font-size:14px;color:var(--cinza);margin-top:4px;} /* ===== 404 ===== */ .notfound{text-align:center;padding:80px 20px;} .notfound .code{font-size:90px;font-weight:900;color:var(--vermelho);line-height:1;} .notfound h1{font-size:28px;margin:12px 0;color:var(--texto);} .notfound p{color:var(--cinza);max-width:480px;margin:0 auto 20px;} .notfound .btn{display:inline-block;background:var(--vermelho);color:#fff;padding:12px 26px;border-radius:4px;font-weight:700;} /* ===== RODAPÉ ===== */ .site-footer{background:#111;color:#bbb;margin-top:30px;font-size:14px;} .footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding:36px 0;} .footer-main .logo{filter:brightness(0) invert(1);opacity:.95;max-width:170px;margin-bottom:12px;} .footer-main p{color:#999;font-size:13px;} .footer-main h3{color:#fff;font-size:14px;text-transform:uppercase;margin-bottom:12px;letter-spacing:.5px;} .footer-main ul{list-style:none;} .footer-main ul li{margin-bottom:8px;} .footer-main ul li a{color:#bbb;font-size:13px;} .footer-main ul li a:hover{color:#fff;} .footer-bottom{border-top:1px solid #333;padding:16px 0;text-align:center;font-size:12px;color:#777;} /* ===== RESPONSIVO ===== */ @media(max-width:900px){ .feed-grid{grid-template-columns:1fr;} .cat-hero{grid-template-columns:1fr;} } @media(max-width:720px){ .feed-main{grid-template-columns:1fr;} .footer-main{grid-template-columns:1fr;} .hl-title{font-size:28px;} .single-header h1{font-size:26px;} .cat-list article{grid-template-columns:1fr;} .cat-list img{width:100%;height:auto;} .sr-results article{grid-template-columns:1fr;} .sr-results article img{width:100%;height:auto;} } @media(max-width:520px){ .logo{max-width:150px;} .busca input{width:140px;} }