/* Theme Name: Portal Meteoro Theme URI: https://meteoromidia.com.br Author: Meteoro Mídia Description: Tema do Portal Meteoro. Identidade própria, modo claro e escuro, animação de carregamento do meteoro, citação do mês e popup de newsletter. Version: 2.10.1 Requires at least: 6.0 Tested up to: 6.7 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: portal-meteoro Tags: news, blog, two-columns, custom-logo, custom-menu, featured-images, translation-ready */ /* ========================================================= PORTAL METEORO · FOLHA DE ESTILO Cores da marca: laranja #FF3600, preto #0B0B0C, branco As cores das editorias saem do Personalizar e entram como --cor-editoria ========================================================= */ :root{ --laranja:#FF3600; --laranja-fundo:#C22800; --preto:#0B0B0C; --branco:#FFFFFF; --fonte-titulo:'Montserrat', system-ui, sans-serif; --fonte-texto:'Inter', system-ui, sans-serif; --raio:14px; --raio-sm:8px; --largura:1240px; --transicao:.25s cubic-bezier(.2,.7,.2,1); --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* Modo escuro (padrão) */ :root[data-theme="dark"]{ --fundo:#0B0B0C; --fundo-2:#111113; --superficie:#161618; --superficie-2:#1D1D20; --texto:#F4F1EC; --texto-2:#B9B4AC; --texto-3:#7E7A74; --linha:rgba(255,255,255,.08); --linha-forte:rgba(255,255,255,.16); --vidro:rgba(11,11,12,.72); --sombra:0 20px 60px rgba(0,0,0,.45); } /* Modo claro */ :root[data-theme="light"]{ --fundo:#F5F2ED; --fundo-2:#EDE9E2; --superficie:#FFFFFF; --superficie-2:#F8F6F2; --texto:#0E0E0F; --texto-2:#4A4742; --texto-3:#8A857E; --linha:rgba(0,0,0,.08); --linha-forte:rgba(0,0,0,.16); --vidro:rgba(245,242,237,.78); --sombra:0 20px 50px rgba(20,15,5,.10); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--fundo); color:var(--texto); font-family:var(--fonte-texto); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background var(--transicao), color var(--transicao); overflow-x:hidden; } body.travado{overflow:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,textarea,select{font:inherit;color:inherit} ::selection{background:var(--laranja);color:#fff} .container{width:100%;max-width:var(--largura);margin:0 auto;padding:0 24px} @media (max-width:640px){.container{padding:0 16px}} .titulo-font{font-family:var(--fonte-titulo)} /* ---------- Barra superior ---------- */ .topo{ border-bottom:1px solid var(--linha); font-size:12.5px; color:var(--texto-2); background:var(--fundo-2); } .topo .container{display:flex;align-items:center;gap:20px;height:40px} .topo-data{white-space:nowrap;flex-shrink:0} .ticker{flex:1;display:flex;align-items:center;gap:12px;overflow:hidden;min-width:0} .ticker-rotulo{ flex-shrink:0;font-family:var(--fonte-titulo);font-weight:800;font-size:10.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--laranja); display:flex;align-items:center;gap:7px; } .ticker-rotulo::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--laranja); box-shadow:0 0 0 0 rgba(255,54,0,.6);animation:pulso 1.8s infinite; } @keyframes pulso{0%{box-shadow:0 0 0 0 rgba(255,54,0,.55)}70%{box-shadow:0 0 0 8px rgba(255,54,0,0)}100%{box-shadow:0 0 0 0 rgba(255,54,0,0)}} .ticker-janela{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent)} .ticker-trilho{display:flex;gap:40px;width:max-content;animation:rolar 60s linear infinite} .ticker-janela:hover .ticker-trilho{animation-play-state:paused} .ticker-trilho a{white-space:nowrap;transition:color var(--transicao)} .ticker-trilho a:hover{color:var(--texto)} .ticker-trilho a span{color:var(--cor-editoria,var(--laranja));margin-right:8px;font-weight:600} @keyframes rolar{from{transform:translateX(0)}to{transform:translateX(-50%)}} .topo-acoes{display:flex;align-items:center;gap:16px;flex-shrink:0} .topo-acoes a:hover{color:var(--texto)} @media (max-width:900px){.topo-data,.topo-acoes a{display:none}} /* ---------- Botão de tema ---------- */ .tema-btn{ position:relative;width:52px;height:26px;border-radius:99px; background:var(--superficie-2);border:1px solid var(--linha-forte); display:flex;align-items:center;padding:0 3px;flex-shrink:0; } .tema-btn .bola{ width:18px;height:18px;border-radius:50%; background:var(--laranja); display:grid;place-items:center; transition:transform var(--transicao), background var(--transicao); transform:translateX(0); } :root[data-theme="light"] .tema-btn .bola{transform:translateX(26px);background:var(--laranja)} .tema-btn svg{width:11px;height:11px;color:#fff} :root[data-theme="light"] .tema-btn svg{color:#1a1a1a} .tema-btn .ico-sol{display:none} :root[data-theme="light"] .tema-btn .ico-sol{display:block} :root[data-theme="light"] .tema-btn .ico-lua{display:none} /* ---------- Cabeçalho ---------- */ .cabecalho{ position:sticky;top:0;z-index:50; background:var(--vidro); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--linha); transition:background var(--transicao); } .cabecalho .container{display:flex;align-items:center;height:76px;gap:28px} /* ===== ÁREA DO LOGO ===== Troque o no HTML pela sua imagem: Portal Meteoro Se tiver versões diferentes para claro e escuro, use .logo-img-claro e .logo-img-escuro (regras já prontas abaixo). */ .logo{display:flex;align-items:center;flex-shrink:0} .logo-texto{ font-family:var(--fonte-titulo);font-weight:900;font-size:23px; letter-spacing:-.03em;line-height:1; } .logo-img{height:38px;width:auto} :root[data-theme="light"] .logo-img-escuro{display:none} .nav{display:flex;gap:4px;flex:1;justify-content:center} .nav a{ position:relative;padding:8px 12px;font-size:13.5px;font-weight:600; font-family:var(--fonte-titulo);letter-spacing:.01em;color:var(--texto-2); border-radius:var(--raio-sm);transition:color var(--transicao); } .nav a::after{ content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px; background:var(--laranja);transform:scaleX(0);transform-origin:left; transition:transform var(--transicao); } .nav a:hover,.nav a.ativo{color:var(--texto)} .nav a:hover::after,.nav a.ativo::after{transform:scaleX(1)} .cab-acoes{display:flex;align-items:center;gap:10px;margin-left:auto} .btn-icone{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--linha-forte);transition:all var(--transicao); } .btn-icone:hover{border-color:var(--laranja);color:var(--laranja)} .btn-icone svg{width:18px;height:18px} .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--fonte-titulo);font-weight:700;font-size:13px;letter-spacing:.02em; padding:11px 20px;border-radius:99px;transition:all var(--transicao);white-space:nowrap; } .btn-laranja{background:var(--laranja);color:#fff} .btn-laranja:hover{background:#e63000;transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,54,0,.3)} .btn-contorno{border:1px solid var(--linha-forte)} .btn-contorno:hover{border-color:var(--texto)} .btn-menu{display:none} @media (max-width:1080px){ .nav{display:none} .btn-menu{display:grid} } @media (max-width:560px){ .cab-acoes .btn-laranja{display:none} .cabecalho .container{height:64px} .logo-texto{font-size:20px} } /* ---------- Menu mobile ---------- */ .gaveta{ position:fixed;inset:0;z-index:90;pointer-events:none; } .gaveta-fundo{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity var(--transicao)} .gaveta-painel{ position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw); background:var(--fundo);border-left:1px solid var(--linha); transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1); padding:24px;display:flex;flex-direction:column;gap:6px;overflow-y:auto; } .gaveta.aberta{pointer-events:auto} .gaveta.aberta .gaveta-fundo{opacity:1} .gaveta.aberta .gaveta-painel{transform:translateX(0)} .gaveta-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px} .gaveta-painel a.link-gaveta{ font-family:var(--fonte-titulo);font-weight:700;font-size:22px;padding:10px 0; border-bottom:1px solid var(--linha);display:flex;justify-content:space-between; } .gaveta-painel a.link-gaveta:hover{color:var(--laranja)} .gaveta-rodape{margin-top:auto;padding-top:24px;display:flex;align-items:center;justify-content:space-between;color:var(--texto-2);font-size:14px} /* ---------- Faixa de destaque (hero) ---------- */ .hero{padding:40px 0 20px} .hero-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:28px} @media (max-width:960px){.hero-grid{grid-template-columns:1fr}} .hero-principal{position:relative;border-radius:var(--raio);overflow:hidden;min-height:560px;display:flex;cursor:pointer;isolation:isolate} .hero-principal .capa{position:absolute;inset:0;aspect-ratio:auto;border-radius:0} .hero-principal .capa img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .hero-principal:hover .capa img,.hero-principal:hover .capa .arte{transform:scale(1.04)} .hero-principal::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.92) 100%); } .hero-conteudo{position:relative;z-index:2;margin-top:auto;padding:36px;color:#fff;max-width:760px} .hero-conteudo h1{ font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(28px,3.6vw,46px); line-height:1.06;letter-spacing:-.025em;margin:14px 0 14px;text-wrap:balance; } .hero-conteudo p{color:rgba(255,255,255,.78);font-size:17px;max-width:620px} .hero-conteudo .meta{color:rgba(255,255,255,.6);margin-top:18px} @media (max-width:640px){.hero-principal{min-height:440px}.hero-conteudo{padding:22px}.hero-conteudo p{font-size:15px}} .hero-lateral{display:flex;flex-direction:column;gap:0} .hero-lateral-titulo{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:2px solid var(--texto)} .item-lateral{display:grid;grid-template-columns:1fr 120px;gap:18px;padding:20px 0;border-bottom:1px solid var(--linha);cursor:pointer;align-items:start} .item-lateral:last-child{border-bottom:0} .item-lateral h3{font-family:var(--fonte-titulo);font-weight:700;font-size:17px;line-height:1.25;letter-spacing:-.01em;margin:8px 0 8px;transition:color var(--transicao)} .item-lateral:hover h3{color:var(--laranja)} .item-lateral .capa{aspect-ratio:1/1;border-radius:var(--raio-sm)} /* ---------- Etiquetas e metadados ---------- */ .etiqueta{ display:inline-flex;align-items:center;gap:6px; font-family:var(--fonte-titulo);font-weight:800;font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--laranja); } .etiqueta.cheia{background:var(--laranja);color:#fff;padding:5px 10px;border-radius:4px} .etiqueta.patrocinado{color:var(--texto-3)} .etiqueta.patrocinado.cheia{background:var(--texto-3);color:var(--fundo)} .meta{font-size:12.5px;color:var(--texto-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .meta .ponto{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6} /* ---------- Capas (arte gerada enquanto não há foto) ---------- Para usar foto: preencha o campo "imagem" do artigo no JavaScript. */ .capa{position:relative;overflow:hidden;background:#111;aspect-ratio:16/10;border-radius:var(--raio-sm)} .capa img{width:100%;height:100%;object-fit:cover} .capa .arte{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .capa .arte::after{content:"";position:absolute;inset:0;background-image:var(--grao);mix-blend-mode:overlay;opacity:.5;pointer-events:none} .capa-1 .arte{background: linear-gradient(118deg,transparent 42%,rgba(255,196,0,.0) 44%,rgba(255,196,0,.95) 49.2%,#FF3600 50.5%,rgba(255,54,0,0) 56%), radial-gradient(circle at 78% 82%,rgba(255,54,0,.75),transparent 45%), radial-gradient(circle at 20% 10%,#2a1208,transparent 50%), #0a0a0b} .capa-2 .arte{background: repeating-radial-gradient(circle at 85% 110%,transparent 0 28px,rgba(0,0,0,.9) 28px 30px), #FF3600} .capa-3 .arte{background: repeating-linear-gradient(135deg,#F4F1EC 0 18px,#111 18px 20px)} .capa-3 .arte::before{content:"";position:absolute;inset:18%;background:#FF3600;border-radius:50%;box-shadow:0 0 0 2px #111} .capa-4 .arte{background: radial-gradient(circle at 62% 42%,#FF3600 0 7%,rgba(255,54,0,.35) 7.2%,transparent 24%), repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 36px), repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 36px), #0e0e10} .capa-5 .arte{background: linear-gradient(180deg,transparent 64%,#111 64%), radial-gradient(circle at 50% 64%,#FF3600 0 22%,transparent 22.4%), linear-gradient(180deg,#F3EEE6,#E8DFD2)} .capa-6 .arte{background: radial-gradient(circle at 15% 20%,#F4F1EC,transparent 45%), radial-gradient(circle at 85% 30%,#FF3600,transparent 50%), radial-gradient(circle at 50% 100%,#6b1400,transparent 60%), #1a0a04} /* ---------- Títulos de seção ---------- */ .secao{padding:56px 0} .secao-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap} .secao-titulo{font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;line-height:1.1;display:flex;align-items:center;gap:12px} .secao-titulo::before{content:"";width:10px;height:10px;background:var(--laranja);transform:rotate(45deg);flex-shrink:0} .secao-sub{color:var(--texto-2);font-size:14.5px;margin-top:6px} .link-seta{font-family:var(--fonte-titulo);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;color:var(--texto-2);transition:color var(--transicao)} .link-seta:hover{color:var(--laranja)} .link-seta svg{width:14px;height:14px;transition:transform var(--transicao)} .link-seta:hover svg{transform:translateX(3px)} /* ---------- Filtros ---------- */ .filtros{display:flex;gap:8px;flex-wrap:wrap} .chip{ padding:8px 16px;border-radius:99px;border:1px solid var(--linha-forte); font-size:13px;font-weight:600;font-family:var(--fonte-titulo); transition:all var(--transicao);color:var(--texto-2); } .chip:hover{color:var(--texto);border-color:var(--texto-3)} .chip.ativo{background:var(--texto);color:var(--fundo);border-color:var(--texto)} /* ---------- Layout principal com barra lateral ---------- */ .layout{display:grid;grid-template-columns:1fr 340px;gap:48px} @media (max-width:1024px){.layout{grid-template-columns:1fr}} .grade{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 28px} @media (max-width:640px){.grade{grid-template-columns:1fr}} .card{cursor:pointer;display:flex;flex-direction:column;gap:14px;animation:surgir .5s both} @keyframes surgir{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .card .capa{border-radius:var(--raio)} .card:hover .capa .arte,.card:hover .capa img{transform:scale(1.05)} .card .capa img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .card h3{font-family:var(--fonte-titulo);font-weight:700;font-size:20px;line-height:1.22;letter-spacing:-.015em;transition:color var(--transicao);text-wrap:balance} .card:hover h3{color:var(--laranja)} .card p{color:var(--texto-2);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .vazio{grid-column:1/-1;padding:48px;text-align:center;color:var(--texto-3);border:1px dashed var(--linha-forte);border-radius:var(--raio)} .mais-wrap{display:flex;justify-content:center;margin-top:40px} /* Barra lateral */ .lateral{display:flex;flex-direction:column;gap:32px} .bloco{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:26px} .bloco-titulo{font-family:var(--fonte-titulo);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:8px} .bloco-titulo::before{content:"";width:18px;height:2px;background:var(--laranja)} .ranking{list-style:none;counter-reset:r} .ranking li{counter-increment:r;display:grid;grid-template-columns:42px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--linha);cursor:pointer} .ranking li:first-child{padding-top:0} .ranking li:last-child{border-bottom:0;padding-bottom:0} .ranking li::before{content:counter(r,decimal-leading-zero);font-family:var(--fonte-titulo);font-weight:900;font-size:26px;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--texto-3);transition:all var(--transicao)} .ranking li:hover::before{color:var(--laranja);-webkit-text-stroke-color:var(--laranja)} .ranking h4{font-family:var(--fonte-titulo);font-weight:700;font-size:14.5px;line-height:1.3;margin-bottom:4px} .ranking li:hover h4{color:var(--laranja)} .bloco-news{background:var(--laranja);color:#fff;border:0;position:relative;overflow:hidden} .bloco-news::before{content:"";position:absolute;width:220px;height:220px;right:-80px;top:-80px;border-radius:50%;border:40px solid rgba(255,196,0,.35)} .bloco-news h4{font-family:var(--fonte-titulo);font-weight:800;font-size:22px;line-height:1.15;letter-spacing:-.02em;margin-bottom:8px;position:relative} .bloco-news p{font-size:14px;opacity:.9;margin-bottom:18px;position:relative} .form-linha{display:flex;flex-direction:column;gap:10px;position:relative} .campo{ width:100%;padding:13px 16px;border-radius:10px;border:1px solid var(--linha-forte); background:var(--superficie-2);outline:none;transition:border-color var(--transicao), box-shadow var(--transicao);font-size:14.5px; } .campo:focus{border-color:var(--laranja);box-shadow:0 0 0 4px rgba(255,54,0,.14)} .campo.erro{border-color:#e5484d} .bloco-news .campo{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff} .bloco-news .campo::placeholder{color:rgba(255,255,255,.7)} .bloco-news .campo:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)} .btn-escuro{background:#0B0B0C;color:#fff;justify-content:center} .btn-escuro:hover{background:#000} .bloco-anuncie p{color:var(--texto-2);font-size:14px;margin-bottom:16px} /* ---------- Espaço de anúncio da lateral ---------- */ .pm-anuncio{display:block} .pm-anuncio-peca[hidden]{display:none} .pm-anuncio-entra{animation:pm-anuncio-entra .5s ease} @keyframes pm-anuncio-entra{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.pm-anuncio-entra{animation:none}} .pm-anuncio-rotulo{ display:block;margin:0 0 8px; font-family:var(--fonte-titulo);font-weight:700; font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--texto-3); } .pm-anuncio a{display:block;border-radius:var(--raio);overflow:hidden} .pm-anuncio img{ display:block;width:100%;height:auto; aspect-ratio:1/1;object-fit:cover; border-radius:var(--raio); border:1px solid var(--linha); background:var(--superficie-2); } .pm-anuncio a:hover img{border-color:var(--linha-forte)} /* acompanha a leitura; o topo desconta o cabeçalho fixo */ @media (min-width:1025px){ .pm-anuncio-fixo{position:sticky;top:104px} } /* ---------- Faixa Análise (editorial) ---------- */ .faixa-analise{background:var(--fundo-2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)} .analises{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:980px){.analises{grid-template-columns:1fr 1fr}} @media (max-width:640px){.analises{grid-template-columns:1fr}} .analise{ display:flex;flex-direction:column; padding:28px 26px 24px; background:var(--fundo); border:1px solid var(--linha); border-radius:16px; cursor:pointer; transition:border-color var(--transicao),transform var(--transicao),box-shadow var(--transicao); } .analise:hover{ border-color:var(--laranja); transform:translateY(-3px); box-shadow:0 14px 34px -22px rgba(0,0,0,.45); } .analise .aspas{ display:block;font-family:var(--fonte-titulo);font-weight:900; font-size:52px;line-height:.55;color:var(--laranja); height:26px;margin-bottom:6px; } .analise h3{ font-family:var(--fonte-titulo);font-weight:700;font-size:20px;line-height:1.28; letter-spacing:-.015em;margin:10px 0 0; } .analise h3 a{color:inherit;transition:color var(--transicao)} .analise:hover h3 a{color:var(--laranja)} .analise-resumo{ font-size:14px;line-height:1.6;color:var(--texto-2); margin:12px 0 0; } .analise .autor{margin-top:auto;padding-top:20px;border-top:1px solid var(--linha)} /* bloco do autor, usado na home, no post e na página do autor */ .autor{display:flex;align-items:center;gap:13px;position:relative} .autor-linhas{min-width:0} .avatar{ width:46px;height:46px;border-radius:50%; background:linear-gradient(135deg,var(--laranja),var(--laranja-fundo)); display:grid;place-items:center;overflow:hidden; font-family:var(--fonte-titulo);font-weight:800;font-size:15px;color:#111; flex-shrink:0; } .avatar-com-foto{background:var(--fundo-2)} .avatar .avatar-foto{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} .autor strong{display:block;font-size:14px;font-weight:600;line-height:1.3} .autor span{font-size:12.5px;color:var(--texto-3)} .analise-data{display:block;margin-top:2px} /* ---------- Especial OOH ---------- */ .especial{position:relative;overflow:hidden;background:#0B0B0C;color:#fff} .especial::before{ content:"";position:absolute;inset:0; background-image: radial-gradient(circle at 96% 96%,rgba(255,54,0,.30),transparent 46%), linear-gradient(90deg,#0B0B0C 0%,#0B0B0C 30%,rgba(11,11,12,.88) 50%,rgba(11,11,12,.58) 74%,rgba(11,11,12,.34) 100%), var(--especial-img,none); background-size:cover,cover,cover; background-position:center,center,center right; background-repeat:no-repeat; } @media (max-width:960px){ .especial::before{ background-image: radial-gradient(circle at 96% 96%,rgba(255,54,0,.30),transparent 46%), linear-gradient(180deg,#0B0B0C 0%,rgba(11,11,12,.90) 42%,rgba(11,11,12,.62) 100%), var(--especial-img,none); background-position:center,center,center; } } .especial::after{content:"";position:absolute;inset:0;background-image:var(--grao);mix-blend-mode:overlay;opacity:.35} .especial .container{position:relative;z-index:1} .especial-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center} @media (max-width:960px){.especial-grid{grid-template-columns:1fr;gap:32px}} .especial h2{font-family:var(--fonte-titulo);font-weight:900;font-size:clamp(36px,5vw,64px);line-height:.98;letter-spacing:-.035em} .especial h2 em{font-style:normal;color:var(--laranja)} .especial p.lead{color:rgba(255,255,255,.72);margin:18px 0 26px;max-width:440px} .especial-lista{display:flex;flex-direction:column} .especial-item{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer} .especial-item:first-child{border-top:1px solid rgba(255,255,255,.12)} .especial-item .num{font-family:var(--fonte-titulo);font-weight:800;color:var(--laranja);font-size:14px} .especial-item h3{font-family:var(--fonte-titulo);font-weight:700;font-size:19px;line-height:1.25;transition:transform var(--transicao)} .especial-item:hover h3{transform:translateX(6px);color:var(--laranja)} .especial-item svg{width:20px;height:20px;opacity:.5;transition:all var(--transicao)} .especial-item:hover svg{opacity:1;color:var(--laranja);transform:rotate(-45deg)} /* ---------- Biblioteca ---------- */ .biblioteca-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media (max-width:1024px){.biblioteca-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.biblioteca-grid{grid-template-columns:1fr}} .material{ background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio); padding:24px;display:flex;flex-direction:column;gap:14px;min-height:260px; transition:transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao); position:relative;overflow:hidden; } .material:hover{transform:translateY(-4px);border-color:var(--linha-forte);box-shadow:var(--sombra)} .material-ico{width:48px;height:58px;border-radius:6px 16px 6px 6px;background:var(--superficie-2);border:1px solid var(--linha-forte);display:grid;place-items:center;font-family:var(--fonte-titulo);font-weight:800;font-size:10px;letter-spacing:.08em;color:var(--laranja);position:relative} .material-ico::after{content:"";position:absolute;top:-1px;right:-1px;width:14px;height:14px;background:var(--fundo);border-left:1px solid var(--linha-forte);border-bottom:1px solid var(--linha-forte);border-radius:0 0 0 4px} .material h3{font-family:var(--fonte-titulo);font-weight:700;font-size:17px;line-height:1.3} .material p{color:var(--texto-2);font-size:14px;flex:1} .material-rodape{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--linha);font-size:12.5px;color:var(--texto-3)} .material-rodape button{font-family:var(--fonte-titulo);font-weight:700;font-size:13px;color:var(--laranja);display:flex;align-items:center;gap:6px} .material-rodape button:hover{text-decoration:underline} .material-envie{background:transparent;border:1.5px dashed var(--linha-forte);align-items:flex-start;justify-content:center;cursor:pointer} .material-envie:hover{border-color:var(--laranja)} /* ---------- Biblioteca da home: carrossel ---------- */ .bib-carrossel{display:flex;gap:20px;align-items:stretch} .bib-trilho-caixa{position:relative;flex:1 1 auto;min-width:0} /* Continuidade por máscara, não por degradê sobreposto. Degradê pintado por cima tingiria o card branco e pareceria sombra solta. A máscara apaga o próprio card, então ele some de verdade na borda. */ .bib-trilho-caixa.tem-depois .bib-trilho{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 78px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 78px),transparent 100%); } .bib-trilho-caixa.tem-antes .bib-trilho{ -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 78px),transparent 100%); mask-image:linear-gradient(to left,#000 calc(100% - 78px),transparent 100%); } .bib-trilho-caixa.tem-antes.tem-depois .bib-trilho{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 78px,#000 calc(100% - 78px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 78px,#000 calc(100% - 78px),transparent 100%); } .bib-trilho{ display:flex;gap:20px; overflow-x:auto;overflow-y:hidden; scroll-behavior:smooth; scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none; padding:4px 2px 6px;margin:-4px -2px -6px; } .bib-trilho::-webkit-scrollbar{display:none} .bib-trilho:focus-visible{outline:2px solid var(--laranja);outline-offset:4px;border-radius:var(--raio)} /* pouco mais de 3 cards por vez: o quarto fica cortado de propósito, mostrando que tem mais */ .bib-trilho > .material{ /* cresce para preencher quando há poucos materiais, nunca encolhe abaixo da base. Com muitos, a base manda e o quarto card fica cortado. */ flex:1 0 min(288px,calc((100% - 70px) / 3.25)); scroll-snap-align:start; padding:20px; } .bib-carrossel > .material-envie{ flex:0 0 clamp(210px,19vw,248px); align-self:stretch; } /* setas sobre o trilho, no meio da altura */ .bib-seta{ position:absolute;top:50%;transform:translateY(-50%); width:46px;height:46px;border-radius:50%;z-index:4; border:1px solid var(--linha-forte); background:var(--fundo);color:var(--texto); display:grid;place-items:center;cursor:pointer; box-shadow:0 8px 22px -10px rgba(0,0,0,.5); transition:background var(--transicao),color var(--transicao),transform var(--transicao),opacity var(--transicao); } .bib-seta svg{width:20px;height:20px} .bib-seta-ant{left:12px} .bib-seta-prox{right:12px} .bib-seta:hover{background:var(--laranja);border-color:var(--laranja);color:#fff;transform:translateY(-50%) scale(1.07)} .bib-seta[hidden]{display:none} @media (max-width:820px){ /* no celular o trilho inteiro corre junto, e o card de envio vai no fim da fila */ .bib-carrossel{ overflow-x:auto;scroll-behavior:smooth; scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none; padding:4px 2px 6px;margin:-4px -2px -6px; } .bib-carrossel::-webkit-scrollbar{display:none} .bib-trilho-caixa{flex:0 0 auto;min-width:0} .bib-trilho-caixa.tem-antes .bib-trilho, .bib-trilho-caixa.tem-depois .bib-trilho, .bib-trilho-caixa.tem-antes.tem-depois .bib-trilho{-webkit-mask-image:none;mask-image:none} .bib-trilho{overflow:visible;padding:0;margin:0} .bib-trilho > .material{flex:0 0 76vw;max-width:300px} .bib-carrossel > .material-envie{flex:0 0 66vw;max-width:260px;scroll-snap-align:start} .bib-seta{display:none} } .material-envie .mais{width:48px;height:48px;border-radius:50%;background:var(--laranja);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:300} /* ---------- Newsletter grande ---------- */ .news-grande{border-radius:24px;overflow:hidden;position:relative;background:var(--superficie);border:1px solid var(--linha);padding:64px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center} @media (max-width:900px){.news-grande{grid-template-columns:1fr;padding:36px 24px;gap:28px}} .news-grande::before{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,54,0,.28),transparent 65%)} .news-grande h2{font-family:var(--fonte-titulo);font-weight:900;font-size:clamp(30px,3.6vw,46px);line-height:1.02;letter-spacing:-.03em;position:relative} .news-grande h2 span{color:var(--laranja)} .news-grande p{color:var(--texto-2);margin-top:14px;position:relative} .news-form{display:flex;flex-direction:column;gap:12px;position:relative} .news-form .linha{display:flex;gap:10px} @media (max-width:560px){.news-form .linha{flex-direction:column}} .checks{display:flex;gap:8px;flex-wrap:wrap} .check{position:relative} .check input{position:absolute;opacity:0;pointer-events:none} .check span{display:inline-block;padding:7px 14px;border-radius:99px;border:1px solid var(--linha-forte);font-size:12.5px;font-weight:600;color:var(--texto-2);cursor:pointer;transition:all var(--transicao);user-select:none} .check input:checked + span{background:var(--laranja);border-color:var(--laranja);color:#fff} .aviso{font-size:12px;color:var(--texto-3)} /* ---------- Rodapé ---------- */ .rodape{border-top:1px solid var(--linha);padding:64px 0 32px;margin-top:40px;background:var(--fundo-2)} .rodape-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px} @media (max-width:900px){.rodape-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.rodape-grid{grid-template-columns:1fr}} .rodape .slogan{font-family:var(--fonte-titulo);font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1.15;margin:18px 0 12px;max-width:320px} .rodape .slogan span{color:var(--laranja)} .rodape p{color:var(--texto-2);font-size:14px} .rodape h5{font-family:var(--fonte-titulo);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);margin-bottom:16px} .rodape ul{list-style:none;display:flex;flex-direction:column;gap:10px} .rodape ul a,.rodape ul button{font-size:14.5px;color:var(--texto-2);transition:color var(--transicao);text-align:left} .rodape ul a:hover,.rodape ul button:hover{color:var(--laranja)} .redes{display:flex;gap:10px;margin-top:22px} .redes a{width:38px;height:38px;border-radius:50%;border:1px solid var(--linha-forte);display:grid;place-items:center;transition:all var(--transicao)} .redes a:hover{background:var(--laranja);border-color:var(--laranja);color:#fff} .redes svg{width:16px;height:16px} .rodape-base{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--linha);font-size:12.5px;color:var(--texto-3)} .marca-gigante{font-family:var(--fonte-titulo);font-weight:900;font-size:clamp(56px,13vw,190px);letter-spacing:-.05em;line-height:.8;margin-top:48px;color:transparent;-webkit-text-stroke:1px var(--linha-forte);user-select:none;white-space:nowrap;overflow:hidden} /* ---------- Leitor de artigo ---------- */ .leitor{position:fixed;inset:0;z-index:100;background:var(--fundo);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1), visibility .3s} .leitor.aberto{opacity:1;visibility:visible;transform:none} .leitor-barra{position:sticky;top:0;z-index:5;background:var(--vidro);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--linha)} .leitor-barra .container{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px} .progresso{position:absolute;left:0;bottom:-1px;height:2px;background:var(--laranja);width:0;transition:width .1s linear} .voltar{display:flex;align-items:center;gap:8px;font-family:var(--fonte-titulo);font-weight:700;font-size:13.5px} .voltar:hover{color:var(--laranja)} .voltar svg{width:18px;height:18px} .leitor-titulo-mini{font-family:var(--fonte-titulo);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--transicao);flex:1;text-align:center;max-width:520px} .leitor-titulo-mini.visivel{opacity:1} @media (max-width:700px){.leitor-titulo-mini{display:none}} .artigo{max-width:760px;margin:0 auto;padding:56px 24px 40px} .artigo h1{font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.03em;margin:18px 0 20px;text-wrap:balance} .artigo .linha-fina{font-size:20px;color:var(--texto-2);line-height:1.5;margin-bottom:28px} .artigo-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)} .compartilhar{display:flex;gap:8px} .compartilhar .btn-icone{width:36px;height:36px} .compartilhar svg{width:15px;height:15px} .artigo-capa{max-width:1080px;margin:0 auto;padding:0 24px} .artigo-capa .capa{aspect-ratio:21/9;border-radius:var(--raio)} @media (max-width:640px){.artigo-capa .capa{aspect-ratio:16/10}} .artigo-capa figcaption{font-size:12.5px;color:var(--texto-3);margin-top:10px} .corpo{max-width:760px;margin:0 auto;padding:40px 24px 24px;font-size:18.5px;line-height:1.75} .corpo p{margin-bottom:1.4em} /* capitular: letra grande só na primeira linha, com a base alinhada ao texto */ .corpo > p:first-child::first-letter{font-family:var(--fonte-titulo);font-weight:900;float:none;font-size:3.6em;line-height:.8;margin:0 .03em 0 0;color:var(--laranja)} .corpo h2{font-family:var(--fonte-titulo);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.2;margin:1.8em 0 .7em} .corpo blockquote{border-left:3px solid var(--laranja);padding:6px 0 6px 24px;margin:2em 0;font-family:var(--fonte-titulo);font-weight:600;font-size:23px;line-height:1.4;letter-spacing:-.01em} .corpo ul{margin:0 0 1.4em 1.2em} .corpo li{margin-bottom:.5em} .corpo li::marker{color:var(--laranja)} .tags{display:flex;gap:8px;flex-wrap:wrap;max-width:760px;margin:0 auto;padding:0 24px 40px} .tags span{font-size:12.5px;padding:6px 12px;border-radius:99px;background:var(--superficie-2);color:var(--texto-2)} .aviso-patrocinio{max-width:760px;margin:0 auto 8px;padding:0 24px} .aviso-patrocinio div{background:rgba(255,196,0,.1);border:1px solid rgba(255,196,0,.35);border-radius:10px;padding:12px 16px;font-size:13.5px;color:var(--texto-2)} .relacionados{border-top:1px solid var(--linha);padding:48px 0 80px;background:var(--fundo-2)} .relacionados .grade{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){.relacionados .grade{grid-template-columns:1fr}} /* ---------- Busca ---------- */ .busca{position:fixed;inset:0;z-index:110;background:var(--vidro);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s;overflow-y:auto} .busca.aberta{opacity:1;visibility:visible} .busca-caixa{max-width:760px;margin:0 auto;padding:12vh 24px 60px} .busca-campo{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--texto);padding-bottom:14px} .busca-campo svg{width:26px;height:26px;color:var(--laranja);flex-shrink:0} .busca-campo input{flex:1;background:none;border:0;outline:none;font-family:var(--fonte-titulo);font-weight:700;font-size:clamp(22px,3.4vw,36px);letter-spacing:-.02em} .busca-campo input::placeholder{color:var(--texto-3)} .busca-dica{font-size:12.5px;color:var(--texto-3);margin-top:12px;display:flex;justify-content:space-between} kbd{font-family:var(--fonte-texto);font-size:11px;padding:2px 6px;border-radius:4px;border:1px solid var(--linha-forte);background:var(--superficie)} .busca-resultados{margin-top:28px;display:flex;flex-direction:column} .resultado{display:grid;grid-template-columns:88px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--linha);cursor:pointer;align-items:center} .resultado .capa{aspect-ratio:1/1} .resultado h4{font-family:var(--fonte-titulo);font-weight:700;font-size:17px;line-height:1.3;margin:4px 0} .resultado:hover h4{color:var(--laranja)} .resultado mark{background:rgba(255,196,0,.35);color:inherit;border-radius:2px;padding:0 2px} .sugestoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px} /* ---------- Modal (política, termos, envio) ---------- */ .modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s} .modal.aberto{opacity:1;visibility:visible} .modal-fundo{position:absolute;inset:0;background:rgba(0,0,0,.55)} .modal-caixa{position:relative;background:var(--fundo);border:1px solid var(--linha);border-radius:18px;width:min(640px,100%);max-height:86vh;overflow-y:auto;padding:36px;box-shadow:var(--sombra);transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.2,.7,.2,1)} .modal.aberto .modal-caixa{transform:none} .modal-caixa h3{font-family:var(--fonte-titulo);font-weight:800;font-size:26px;letter-spacing:-.02em;margin-bottom:6px} .modal-caixa h4{font-family:var(--fonte-titulo);font-weight:700;font-size:16px;margin:22px 0 6px} .modal-caixa p{color:var(--texto-2);font-size:15px;margin-bottom:10px} .modal-fechar{position:absolute;top:16px;right:16px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px} .form-grid .inteiro{grid-column:1/-1} @media (max-width:560px){.form-grid{grid-template-columns:1fr}} .form-grid label{font-size:12.5px;font-weight:600;color:var(--texto-2);display:block;margin-bottom:6px} textarea.campo{min-height:110px;resize:vertical} /* ---------- Toast ---------- */ .toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:200;background:var(--texto);color:var(--fundo);padding:14px 22px;border-radius:99px;font-size:14px;font-weight:600;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.2,.7,.2,1);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px)} .toast.visivel{opacity:1;visibility:visible;transform:translate(-50%,0)} .toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--laranja);flex-shrink:0} /* ---------- Voltar ao topo ---------- */ .topo-btn{position:fixed;right:24px;bottom:24px;z-index:40;width:46px;height:46px;border-radius:50%;background:var(--laranja);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(255,54,0,.35);opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--transicao)} .topo-btn.visivel{opacity:1;visibility:visible;transform:none} .topo-btn svg{width:18px;height:18px} /* Acessibilidade */ :focus-visible{outline:2px solid var(--laranja);outline-offset:3px;border-radius:4px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ========================================================= AJUSTES DO TEMA WORDPRESS ========================================================= */ .pular{position:absolute;left:-9999px;top:0;z-index:200;background:var(--laranja);color:#fff;padding:10px 16px;border-radius:0 0 8px 0} .pular:focus{left:0} /* menu montado pelo WordPress */ .nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .nav li{list-style:none;margin:0;padding:0} .rodape ul{list-style:none;margin:0;padding:0} .rodape li{list-style:none} /* link que cobre o card inteiro */ .card,.item-lateral,.analise,.especial-item,.ranking li,.hero-principal,.material{position:relative} .pm-cobre{position:absolute;inset:0;z-index:4;border-radius:inherit} .card .meta,.card h3,.card p,.card .etiqueta,.card .capa{position:relative;z-index:1} .material-rodape a{position:relative;z-index:5} /* campo escondido do Mailchimp */ .pm-fora{position:absolute !important;left:-5000px !important} /* tags viram links */ .tags a{font-size:12.5px;padding:6px 12px;border-radius:99px;background:var(--superficie-2);color:var(--texto-2);transition:color var(--transicao),background var(--transicao)} .tags a:hover{color:#fff;background:var(--laranja)} /* material como link */ a.material{display:flex;flex-direction:column;text-decoration:none;color:inherit} .material-rodape a{display:inline-flex;align-items:center;gap:6px;font-family:var(--fonte-titulo);font-weight:700;font-size:13px;color:var(--laranja)} /* chips como links */ a.chip{text-decoration:none} /* paginação */ .pm-paginacao{margin-top:44px} .pm-paginacao .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .pm-paginacao .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:99px;border:1px solid var(--linha-forte);font-family:var(--fonte-titulo);font-weight:700;font-size:14px;color:var(--texto-2);transition:all var(--transicao)} .pm-paginacao .page-numbers:hover{color:var(--texto);border-color:var(--texto-3)} .pm-paginacao .page-numbers.current{background:var(--laranja);border-color:var(--laranja);color:#fff} .pm-paginacao .screen-reader-text{position:absolute;left:-9999px} /* conteúdo vindo do editor do WordPress */ .corpo img,.corpo iframe,.corpo video{max-width:100%;height:auto;border-radius:var(--raio-sm)} .corpo figure{margin:2em 0} .corpo figcaption{font-size:13px;color:var(--texto-3);margin-top:8px} .corpo a{color:var(--laranja);text-decoration:underline;text-underline-offset:3px} .corpo a:hover{text-decoration:none} .corpo ol{margin:0 0 1.4em 1.2em} .corpo ol li::marker{color:var(--laranja);font-weight:700} .corpo h3{font-family:var(--fonte-titulo);font-weight:700;font-size:21px;margin:1.6em 0 .6em} .corpo table{width:100%;border-collapse:collapse;margin:2em 0;font-size:15px} .corpo th,.corpo td{border:1px solid var(--linha);padding:10px 12px;text-align:left} .corpo th{background:var(--superficie-2);font-family:var(--fonte-titulo);font-weight:700} .corpo .alignleft{float:left;margin:0 1.5em 1em 0} .corpo .alignright{float:right;margin:0 0 1em 1.5em} .corpo .aligncenter{display:block;margin-left:auto;margin-right:auto} .corpo .alignwide,.corpo .alignfull{max-width:none;width:auto} .corpo .wp-caption{max-width:100%} /* páginas institucionais não levam capitular */ .pm-pagina > p:first-child::first-letter{font-family:inherit;font-weight:inherit;float:none;font-size:inherit;line-height:inherit;margin:0;color:inherit} /* ========================================================= CITAÇÃO DO MÊS ========================================================= */ .pm-citacao-secao{padding-top:0} .pm-citacao{position:relative;display:flex;justify-content:flex-end;align-items:center;width:100%;min-height:240px;overflow:hidden;background:#0B0B0C;border-radius:var(--raio)} .pm-citacao[data-sem-foto="1"]{justify-content:flex-start} .pm-citacao-foto{position:absolute;top:0;left:0;bottom:0;width:54%;background-color:#1a1a1f;background-position:center 20%;background-repeat:no-repeat;background-size:cover} .pm-citacao-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.15) 35%,rgba(11,11,12,.75) 68%,#0B0B0C 100%)} .pm-citacao-conteudo{position:relative;z-index:1;width:55%;padding:28px 36px} .pm-citacao[data-sem-foto="1"] .pm-citacao-conteudo{width:100%;max-width:860px;padding:36px 40px} .pm-citacao-rotulo{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-family:var(--fonte-titulo);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff} .pm-citacao-ponto{display:inline-block;flex:0 0 auto;width:9px;height:9px;background:var(--laranja);border-radius:50%} .pm-citacao figure{margin:0} .pm-citacao-texto{margin:0 0 14px;padding:0;border:0;background:none;font-family:var(--fonte-titulo);font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:#fff} .pm-citacao-autor{font-size:13px;line-height:1.45;color:#9a9aa3} .pm-citacao-nome{font-weight:700;color:#fff} .pm-citacao-credito{margin:12px 0 0;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#56565f} @media (max-width:900px){ .pm-citacao-foto{width:60%} .pm-citacao-conteudo{width:58%;padding:26px} .pm-citacao-texto{font-size:18px} } @media (max-width:640px){ .pm-citacao{display:block;min-height:0} .pm-citacao-foto{position:relative;width:100%;height:210px} .pm-citacao-foto::after{background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.2) 45%,rgba(11,11,12,.8) 80%,#0B0B0C 100%)} .pm-citacao-conteudo,.pm-citacao[data-sem-foto="1"] .pm-citacao-conteudo{width:100%;padding:4px 22px 26px} .pm-citacao-texto{font-size:17px} } /* ========================================================= POPUP DA NEWSLETTER ========================================================= */ #pm-popup{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,5,6,.7);opacity:0;transition:opacity .25s ease} #pm-popup[hidden]{display:none} #pm-popup.aberto{opacity:1} .pm-popup-caixa{position:relative;width:100%;max-width:430px;padding:38px 36px 32px;background:var(--fundo);border:1px solid var(--linha);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.4);transform:translateY(10px);transition:transform .28s cubic-bezier(.2,.7,.2,1)} #pm-popup.aberto .pm-popup-caixa{transform:none} .pm-popup-x{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;color:var(--texto-3);background:transparent;border:0;border-radius:50%;cursor:pointer;transition:color var(--transicao),background var(--transicao)} .pm-popup-x:hover{color:var(--texto);background:var(--superficie-2)} .pm-popup-x svg{width:16px;height:16px} .pm-popup-rotulo{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-family:var(--fonte-titulo);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)} .pm-popup-ponto{display:inline-block;flex:0 0 auto;width:9px;height:9px;background:var(--laranja);border-radius:50%} .pm-popup-titulo{margin:0 0 10px;font-family:var(--fonte-titulo);font-size:25px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--texto)} .pm-popup-texto{margin:0 0 22px;font-size:14.5px;line-height:1.55;color:var(--texto-2)} .pm-popup-form{display:flex;flex-direction:column;gap:10px} /* ========================================================= ANIMAÇÃO DE CARREGAMENTO ========================================================= */ #pm-carregando{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;background:var(--fundo);opacity:1;transition:opacity .4s ease} #pm-carregando.pm-saiu{opacity:0;pointer-events:none} #pm-carregando.pm-saiu .pm-meteoro,#pm-carregando.pm-saiu .pm-impacto,#pm-carregando.pm-saiu .pm-onda{animation:none !important;opacity:0 !important} #pm-carregando .pm-palco{position:relative;width:300px;height:300px} #pm-carregando .pm-meteoro{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--laranja);border-radius:50%;animation:pm-voo 1.1s cubic-bezier(.55,.06,.68,.19) infinite} #pm-carregando .pm-meteoro::before{content:"";position:absolute;top:50%;left:50%;width:110px;height:6px;margin-top:-3px;transform-origin:0 50%;transform:rotate(-135deg);background:linear-gradient(90deg,#FF3600,rgba(255,54,0,0));border-radius:6px} #pm-carregando .pm-impacto{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;background:var(--laranja);border-radius:50%;opacity:0;animation:pm-clarao 1.1s ease-out infinite} #pm-carregando .pm-onda{position:absolute;top:50%;left:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border:3px solid var(--laranja);border-radius:50%;opacity:0;animation:pm-onda 1.1s ease-out infinite} #pm-carregando .pm-onda2{animation-delay:.09s;border-width:2px} @keyframes pm-voo{ 0%{transform:translate(-230px,-230px) scale(.45);opacity:0} 10%{opacity:1} 48%{transform:translate(0,0) scale(1);opacity:1} 55%{transform:translate(0,0) scale(.2);opacity:0} 100%{transform:translate(0,0) scale(.2);opacity:0} } @keyframes pm-clarao{ 0%,48%{transform:scale(0);opacity:0} 57%{transform:scale(1.2);opacity:1} 82%{transform:scale(.3);opacity:0} 100%{transform:scale(.3);opacity:0} } @keyframes pm-onda{ 0%,50%{transform:scale(.25);opacity:0} 55%{opacity:.9} 96%{transform:scale(3);opacity:0} 100%{transform:scale(3);opacity:0} } @media (max-width:600px){ #pm-carregando .pm-palco{width:220px;height:220px} #pm-carregando .pm-meteoro{width:18px;height:18px;margin:-9px 0 0 -9px} #pm-carregando .pm-meteoro::before{width:86px} } @media (prefers-reduced-motion: reduce){ #pm-carregando .pm-meteoro,#pm-carregando .pm-impacto,#pm-carregando .pm-onda{animation:none} #pm-carregando .pm-meteoro{transform:none;opacity:1} #pm-carregando .pm-meteoro::before{display:none} } /* ---------- correções de sobreposição e paginação interna ---------- */ .leitor-barra{top:77px;z-index:45} @media (max-width:560px){.leitor-barra{top:65px}} .paginas{display:flex;gap:8px;flex-wrap:wrap;max-width:760px;margin:0 auto;padding:0 24px 24px} .paginas a,.paginas > span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border-radius:99px;border:1px solid var(--linha-forte);font-family:var(--fonte-titulo);font-weight:700;font-size:14px;color:var(--texto-2)} .paginas a:hover{color:var(--texto);border-color:var(--texto-3)} /* ---------- submenu do menu principal ---------- */ .nav li{position:relative} .nav .menu-item-has-children > a{padding-right:22px} .nav .menu-item-has-children > a::before{content:"";position:absolute;right:7px;top:50%;width:6px;height:6px;margin-top:-4px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg);opacity:.55} .nav ul ul{position:absolute;top:calc(100% + 6px);left:0;display:block;min-width:220px;margin:0;padding:8px;background:var(--fundo);border:1px solid var(--linha);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:60} .nav li:hover > ul,.nav li:focus-within > ul{opacity:1;visibility:visible;transform:none} .nav ul ul li{display:block} .nav ul ul a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;white-space:nowrap} .nav ul ul a::after{display:none} .nav ul ul a:hover{color:var(--texto);background:var(--superficie-2)} /* subitens no menu do celular */ .gaveta-painel a.link-gaveta-filho{font-size:18px;padding-left:18px;color:var(--texto-2)} .gaveta-painel a.link-gaveta-filho::before{content:"";display:inline-block;width:14px;height:1px;background:var(--linha-forte);margin-right:10px;vertical-align:middle} /* ---------- aceite dos termos ---------- */ .pm-aceite{display:flex;align-items:flex-start;gap:9px;margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--texto-3);cursor:pointer} .pm-aceite input[type="checkbox"]{position:static;opacity:1;pointer-events:auto;flex:0 0 auto;width:15px;height:15px;margin:2px 0 0;accent-color:var(--laranja);cursor:pointer} .pm-aceite span{display:inline;padding:0;border:0;border-radius:0;background:none;font-size:inherit;font-weight:400;color:inherit;user-select:auto} .pm-aceite a{color:var(--texto-2);text-decoration:underline;text-underline-offset:2px} .pm-aceite a:hover{color:var(--laranja)} .form-linha .pm-aceite,.pm-popup-form .pm-aceite{font-size:11.5px} .bloco-news .pm-aceite{color:rgba(255,255,255,.8)} .bloco-news .pm-aceite a{color:#fff} /* ---------- logotipo no modo escuro ---------- */ /* ========================================================= CORES DAS EDITORIAS O valor de --cor-editoria vem do Personalizar, por categoria, impresso no pela função pm_css_editorias(). ========================================================= */ .etiqueta[class*="etiqueta-"]{color:var(--cor-editoria,var(--laranja))} :root[data-theme="light"] .etiqueta.cheia[class*="etiqueta-"]{background:var(--cor-editoria,var(--laranja));color:#fff} :root[data-theme="dark"] .etiqueta.cheia[class*="etiqueta-"]{background:var(--cor-editoria,var(--laranja));color:#0B0B0C} .etiqueta.patrocinado[class*="etiqueta-"]{color:var(--texto-3)} .ranking .meta[class*="editoria-"]{color:var(--cor-editoria,var(--texto-3))} /* ========================================================= AJUSTES FINOS Tudo que antes vivia no CSS adicional do WordPress. Como este trecho vem no fim da própria folha do tema, não precisa de !important. ========================================================= */ /* ---------- logotipo ---------- */ .logo-img{height:34px;width:auto;max-width:210px;object-fit:contain} @media (max-width:600px){.logo-img{height:26px;max-width:160px}} :root[data-theme="light"] .logo-img-padrao{display:block} :root[data-theme="light"] .logo-img-claro{display:none} :root[data-theme="dark"] .logo-img-padrao{display:none} :root[data-theme="dark"] .logo-img-claro{display:block} /* ---------- cabeçalho e menu ---------- */ .cabecalho .container{gap:18px} .cabecalho .container .nav{flex:1 1 auto;min-width:0;justify-content:center;margin-left:0} .cabecalho .container .nav ul{align-items:center;gap:0} .cabecalho .container .nav ul li{display:flex;align-items:center} .cabecalho .nav a{padding:8px 11px;font-size:13.5px;white-space:nowrap} .cabecalho .cab-acoes{flex:0 0 auto;gap:10px} .cabecalho .cab-acoes .btn{height:44px;padding:0 20px;font-size:14px} .cabecalho .cab-acoes .btn-icone{width:40px;height:40px} .nav .menu-item-has-children > a{display:flex;align-items:center;gap:6px;padding-right:9px} .nav .menu-item-has-children > a::before{ position:static;order:2;width:6px;height:6px;margin:-2px 0 0 0; border:0;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor; background:none; } @media (max-width:1320px){ .cabecalho .nav{display:none} .btn-menu{display:grid} } /* ---------- barra do topo ---------- */ .topo .container{gap:0} .topo-data{position:relative;z-index:0;margin-right:16px;padding-right:16px} .topo-data::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:13px;background:var(--linha-forte)} .ticker{position:relative;z-index:1;margin-right:20px;overflow:visible} .ticker-rotulo{position:relative;z-index:2} /* ---------- marcador dos títulos de seção ---------- */ .secao-titulo::before{width:11px;height:11px;border-radius:50%;transform:none} /* ---------- listagens ---------- */ .filtros{margin-bottom:36px} /* matéria sozinha na grade ocupa a linha inteira */ .grade .card:only-child{ grid-column:1 / -1; display:grid; grid-template-columns:1.05fr 1fr; grid-auto-rows:min-content; gap:6px 28px; align-items:center; } .grade .card:only-child .capa{grid-column:1;grid-row:1 / span 4;align-self:center;margin:0} .grade .card:only-child .etiqueta{grid-column:2;grid-row:1;align-self:end} .grade .card:only-child h3{grid-column:2;grid-row:2;font-size:26px} .grade .card:only-child p{grid-column:2;grid-row:3;margin-top:4px} .grade .card:only-child .meta{grid-column:2;grid-row:4;margin-top:8px} @media (max-width:640px){ .grade .card:only-child{grid-template-columns:1fr} .grade .card:only-child .capa, .grade .card:only-child .etiqueta, .grade .card:only-child h3, .grade .card:only-child p, .grade .card:only-child .meta{grid-column:1;grid-row:auto} } /* ---------- rodapé ---------- */ /* As margens negativas compensam a borda transparente dentro de cada arquivo PNG do logo. Reexportando os logos sem essa sobra, sobra só a largura. */ .rodape .logo-img-padrao{height:auto;width:269px;max-width:100%;margin:-3px 0 -2px -9px} .rodape .logo-img-claro{height:auto;width:252px;max-width:100%;margin:-3px 0 -8px 0} .rodape .slogan{font-size:19px;margin:13px 0 12px} .marca-gigante{font-size:clamp(38px,11.2vw,150px);overflow:visible;text-align:center;margin-top:56px} /* ---------- coluna de leitura com barra lateral ---------- */ .leitura-container{padding-top:8px} .layout-leitura{align-items:start} .layout-leitura .leitura-coluna{min-width:0} /* dentro do layout a coluna manda na largura, então os limites próprios do artigo saem de cena */ .layout-leitura .artigo, .layout-leitura .corpo, .layout-leitura .artigo-capa{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0} .layout-leitura .artigo{padding-top:40px} .layout-leitura .artigo h1{font-size:clamp(28px,3.4vw,42px)} .layout-leitura .artigo-capa .capa{aspect-ratio:16/9} .layout-leitura .corpo{padding-top:32px} .layout-leitura .tags, .layout-leitura .comentarios{padding-left:0;padding-right:0} .layout-leitura .lateral{position:sticky;top:156px;align-self:start} @media (max-width:1024px){ .layout-leitura .lateral{position:static;top:auto;margin-top:40px} .layout-leitura .artigo, .layout-leitura .corpo, .layout-leitura .artigo-capa{padding-left:0;padding-right:0} } /* ---------- aviso de inscrição concluída ---------- */ #pm-obrigado{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,5,6,.72);opacity:0;transition:opacity .25s ease} #pm-obrigado[hidden]{display:none} #pm-obrigado.aberto{opacity:1} .pm-obrigado-caixa{ position:relative;width:100%;max-width:400px;padding:44px 36px 34px;text-align:center; background:var(--fundo);border:1px solid var(--linha);border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.4); transform:translateY(12px) scale(.98);transition:transform .3s cubic-bezier(.2,.7,.2,1); } #pm-obrigado.aberto .pm-obrigado-caixa{transform:none} .pm-obrigado-selo{position:relative;width:62px;height:62px;margin:0 auto 22px;display:grid;place-items:center;border-radius:50%;background:var(--laranja);color:#fff} .pm-obrigado-selo svg{width:26px;height:26px;position:relative;z-index:1} #pm-obrigado .pm-ico-erro{display:none} #pm-obrigado.erro .pm-obrigado-selo{background:var(--superficie-2);color:var(--texto-2)} #pm-obrigado.erro .pm-ico-ok{display:none} #pm-obrigado.erro .pm-ico-erro{display:block} .pm-obrigado-anel{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(255,54,0,.55);animation:pulso 1.9s infinite} #pm-obrigado.erro .pm-obrigado-anel{display:none} .pm-obrigado-titulo{margin:0 0 10px;font-family:var(--fonte-titulo);font-size:26px;font-weight:800;line-height:1.18;letter-spacing:-.02em;color:var(--texto)} .pm-obrigado-texto{margin:0 0 24px;font-size:14.5px;line-height:1.6;color:var(--texto-2)} .pm-obrigado-btn{width:100%;justify-content:center} @media (prefers-reduced-motion:reduce){ .pm-obrigado-anel{animation:none} .pm-obrigado-caixa{transition:none} } /* ---------- ajustes da barra lateral (antes no CSS adicional) ---------- */ .layout-leitura .lateral{position:static;top:auto} .layout-leitura{padding-bottom:56px} /* ---------- título do card é um link de verdade ---------- */ /* A camada .pm-cobre continua cobrindo o card inteiro para o clique, e o link do título existe para leitores de tela, navegação por teclado e para o Google. */ .card h3 a{color:inherit;text-decoration:none} .card h3 a:hover{color:inherit} /* ========================================================= PÁGINAS COM HTML PRÓPRIO Contato, Sobre, Anuncie, Biblioteca, Termos, Privacidade, Colunista e Newsletter foram montadas como blocos de HTML com a paleta declarada em variáveis. Aqui essas variáveis passam a apontar para as do tema, então as páginas seguem o modo claro e o escuro sem precisar ser reescritas. ========================================================= */ /* ---------- tipografia igual à do portal ---------- */ #mt-contato,#mt-sobre,#mt-anuncie,#mt-biblioteca,#mt-termos,#mt-privacidade,#mt-colunistas,#nl-newsletter{font-family:var(--fonte-texto) !important} #mt-contato .c-h1,#mt-contato .c-h2,#mt-contato .c-title,#mt-contato .c-final-titulo,#mt-sobre .s-h1,#mt-sobre .s-h2,#mt-sobre .s-title,#mt-sobre .s-final-titulo,#mt-anuncie .a-h1,#mt-anuncie .a-h2,#mt-anuncie .a-title,#mt-anuncie .a-final-titulo,#mt-biblioteca .b-h1,#mt-biblioteca .b-h2,#mt-biblioteca .b-title,#mt-biblioteca .b-final-titulo,#mt-termos .t-h1,#mt-termos .t-h2,#mt-termos .t-title,#mt-termos .t-final-titulo,#mt-privacidade .p-h1,#mt-privacidade .p-h2,#mt-privacidade .p-title,#mt-privacidade .p-final-titulo,#mt-colunistas .k-h1,#mt-colunistas .k-h2,#mt-colunistas .k-title,#mt-colunistas .k-final-titulo,#nl-newsletter .nl-h1,#nl-newsletter .nl-h2,#nl-newsletter .nl-title,#nl-newsletter .nl-final-titulo{font-family:var(--fonte-titulo) !important;letter-spacing:-.03em !important} /* ---------- modo escuro: a paleta de cada página ---------- */ :root[data-theme="dark"] #mt-contato{ --c-bg:var(--fundo); --c-alt:var(--fundo-2); --c-card:var(--superficie); --c-light:var(--fundo-2); --c-text:var(--texto); --c-muted:var(--texto-2); --c-border:var(--linha); --c-error:#FF7A6B; --c-success:#4ADE9A; } :root[data-theme="dark"] #mt-sobre{ --s-bg:var(--fundo); --s-alt:var(--fundo-2); --s-card:var(--superficie); --s-light:var(--fundo-2); --s-text:var(--texto); --s-muted:var(--texto-2); --s-border:var(--linha); --s-error:#FF7A6B; --s-success:#4ADE9A; } :root[data-theme="dark"] #mt-anuncie{ --a-bg:var(--fundo); --a-alt:var(--fundo-2); --a-card:var(--superficie); --a-light:var(--fundo-2); --a-text:var(--texto); --a-muted:var(--texto-2); --a-border:var(--linha); --a-error:#FF7A6B; --a-success:#4ADE9A; } :root[data-theme="dark"] #mt-biblioteca{ --b-bg:var(--fundo); --b-alt:var(--fundo-2); --b-card:var(--superficie); --b-light:var(--fundo-2); --b-text:var(--texto); --b-muted:var(--texto-2); --b-border:var(--linha); --b-error:#FF7A6B; --b-success:#4ADE9A; } :root[data-theme="dark"] #mt-termos{ --t-bg:var(--fundo); --t-alt:var(--fundo-2); --t-card:var(--superficie); --t-light:var(--fundo-2); --t-text:var(--texto); --t-muted:var(--texto-2); --t-border:var(--linha); --t-error:#FF7A6B; --t-success:#4ADE9A; } :root[data-theme="dark"] #mt-privacidade{ --p-bg:var(--fundo); --p-alt:var(--fundo-2); --p-card:var(--superficie); --p-light:var(--fundo-2); --p-text:var(--texto); --p-muted:var(--texto-2); --p-border:var(--linha); --p-error:#FF7A6B; --p-success:#4ADE9A; } :root[data-theme="dark"] #mt-colunistas{ --k-bg:var(--fundo); --k-alt:var(--fundo-2); --k-card:var(--superficie); --k-light:var(--fundo-2); --k-text:var(--texto); --k-muted:var(--texto-2); --k-border:var(--linha); --k-error:#FF7A6B; --k-success:#4ADE9A; } :root[data-theme="dark"] #nl-newsletter{ --nl-bg:var(--fundo); --nl-alt:var(--fundo-2); --nl-card:var(--superficie); --nl-light:var(--fundo-2); --nl-text:var(--texto); --nl-muted:var(--texto-2); --nl-border:var(--linha); --nl-error:#FF7A6B; --nl-success:#4ADE9A; } /* caixas brancas viram a superfície do tema */ :root[data-theme="dark"] #mt-contato .c-card,:root[data-theme="dark"] #mt-sobre .s-card,:root[data-theme="dark"] #mt-anuncie .a-card,:root[data-theme="dark"] #mt-anuncie .a-icone,:root[data-theme="dark"] #mt-anuncie .a-nota,:root[data-theme="dark"] #mt-anuncie .a-passo:hover .a-caixa-passo,:root[data-theme="dark"] #mt-biblioteca button.b-card,:root[data-theme="dark"] #mt-biblioteca .b-vazio,:root[data-theme="dark"] #mt-biblioteca .b-janela,:root[data-theme="dark"] #mt-biblioteca .b-envio,:root[data-theme="dark"] #mt-termos .t-resumo-item,:root[data-theme="dark"] #mt-privacidade .p-resumo-item{background:var(--superficie) !important;border-color:var(--linha) !important} /* faixas alternadas */ :root[data-theme="dark"] #mt-contato .c-bloco.c-alt{background:var(--fundo-2) !important} /* blocos que eram pretos ganham relevo, senão somem no fundo */ :root[data-theme="dark"] #mt-anuncie .a-final,:root[data-theme="dark"] #mt-sobre .s-final,:root[data-theme="dark"] #mt-termos .t-final,:root[data-theme="dark"] #mt-privacidade .p-final,:root[data-theme="dark"] #mt-biblioteca .b-capa,:root[data-theme="dark"] #mt-biblioteca .b-botao,:root[data-theme="dark"] #mt-contato a.c-escura,:root[data-theme="dark"] #mt-contato .c-botao,:root[data-theme="dark"] #mt-colunistas a.k-escura{background:var(--superficie-2) !important;border-color:var(--linha-forte) !important} /* campos de formulário */ :root[data-theme="dark"] #mt-contato .c-field input,:root[data-theme="dark"] #mt-contato .c-field select,:root[data-theme="dark"] #mt-contato .c-field textarea,:root[data-theme="dark"] #mt-biblioteca .b-field input,:root[data-theme="dark"] #mt-biblioteca .b-field select,:root[data-theme="dark"] #mt-biblioteca .b-field textarea,:root[data-theme="dark"] #nl-newsletter .nl-field input{background-color:var(--superficie) !important;color:var(--texto) !important;border-color:var(--linha-forte) !important} :root[data-theme="dark"] #mt-contato .c-field input:focus,:root[data-theme="dark"] #mt-contato .c-field select:focus,:root[data-theme="dark"] #mt-contato .c-field textarea:focus,:root[data-theme="dark"] #mt-contato .c-field .c-invalido,:root[data-theme="dark"] #mt-biblioteca .b-field input:focus,:root[data-theme="dark"] #mt-biblioteca .b-field select:focus,:root[data-theme="dark"] #mt-biblioteca .b-field textarea:focus,:root[data-theme="dark"] #mt-biblioteca .b-invalido{background-color:var(--superficie-2) !important} :root[data-theme="dark"] #mt-contato .c-field input::placeholder,:root[data-theme="dark"] #mt-contato .c-field textarea::placeholder,:root[data-theme="dark"] #mt-biblioteca .b-field input::placeholder,:root[data-theme="dark"] #mt-biblioteca .b-field textarea::placeholder,:root[data-theme="dark"] #nl-newsletter .nl-field input::placeholder{color:var(--texto-3) !important} /* detalhes soltos */ :root[data-theme="dark"] #mt-colunistas .k-linhas i{background:var(--linha-forte) !important} :root[data-theme="dark"] #mt-biblioteca .b-tipo{background:var(--texto) !important;color:var(--fundo) !important} :root[data-theme="dark"] #mt-anuncie a.a-botao-claro,:root[data-theme="dark"] #mt-sobre a.s-botao-claro,:root[data-theme="dark"] #mt-termos a.t-botao-claro,:root[data-theme="dark"] #mt-privacidade a.p-botao-claro{background:#FFFFFF !important;color:#111114 !important} /* ========================================================= PÁGINA DA BIBLIOTECA ========================================================= */ .biblioteca-abertura{max-width:760px} .biblioteca-abertura .lead{font-size:19px;line-height:1.55;color:var(--texto-2);margin-top:18px} .biblioteca-sub{font-size:15px;line-height:1.6;color:var(--texto-3);margin-top:14px} .biblioteca-pilares{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:26px 0 0;padding:0} .biblioteca-pilares li{display:flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid var(--linha-forte);border-radius:99px;font-size:13px;font-weight:600;color:var(--texto-2)} .biblioteca-pilares .ponto{width:7px;height:7px;border-radius:50%;background:var(--laranja);flex:0 0 auto} .biblioteca-vazio{background:var(--superficie);border:1px dashed var(--linha-forte);border-radius:var(--raio);padding:56px 32px;text-align:center} .biblioteca-vazio h3{font-family:var(--fonte-titulo);font-weight:800;font-size:22px;letter-spacing:-.02em} .biblioteca-vazio p{color:var(--texto-2);margin:10px 0 22px} /* ---------- envio de material ---------- */ .biblioteca-envio{background:var(--fundo-2)} .envio-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start} @media (max-width:960px){.envio-grid{grid-template-columns:1fr;gap:36px}} .biblioteca-envio h2{font-family:var(--fonte-titulo);font-weight:900;font-size:clamp(28px,3.6vw,40px);line-height:1.05;letter-spacing:-.03em} .biblioteca-envio h2 span{color:var(--laranja)} .biblioteca-envio .lead{color:var(--texto-2);margin:16px 0 0;max-width:440px} .envio-etapas{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px} .envio-etapas li{display:flex;gap:14px;align-items:baseline;font-size:14.5px;color:var(--texto-2)} .envio-etapas .num{font-family:var(--fonte-titulo);font-weight:800;font-size:12px;color:var(--laranja);flex:0 0 auto} .envio-form{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:32px;display:flex;flex-direction:column;gap:16px} @media (max-width:560px){.envio-form{padding:24px}} .envio-form label{display:flex;flex-direction:column;gap:7px;font-family:var(--fonte-titulo);font-weight:700;font-size:12.5px;color:var(--texto-2)} .envio-form label .opcional{font-weight:500;color:var(--texto-3)} .envio-form .campo{width:100%} .envio-linha{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:560px){.envio-linha{grid-template-columns:1fr}} .envio-form .pm-aceite{flex-direction:row;font-weight:400;font-size:12.5px} .envio-form .aviso{font-size:12px;color:var(--texto-3);text-align:center} /* ---------- caixa que pede o e-mail ---------- */ #pm-material{position:fixed;inset:0;z-index:165;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,5,6,.72);opacity:0;transition:opacity .25s ease} #pm-material[hidden]{display:none} #pm-material.aberto{opacity:1} #pm-material .pm-popup-caixa{transform:translateY(10px)} #pm-material.aberto .pm-popup-caixa{transform:none} #pm-material .pm-popup-titulo{font-size:21px} .pm-material-pronto{text-align:center} .pm-material-erro{margin:14px 0 0;font-size:13px;color:#FF7A6B;text-align:center} .pm-material-baixar{width:100%;margin-top:4px} /* ========================================================= AUTORIA ========================================================= */ /* linha de função abaixo do nome, nos cards e no topo da matéria */ .autor .cargo{display:block;font-size:12.5px;line-height:1.35;color:var(--texto-2);margin:1px 0 2px} .autor strong + .cargo{margin-top:2px} /* ---------- página de autor ---------- */ .autor-capa{display:flex;gap:28px;align-items:flex-start;padding-bottom:36px;border-bottom:1px solid var(--linha)} @media (max-width:640px){.autor-capa{flex-direction:column;gap:20px}} .avatar-grande{width:96px;height:96px;font-size:30px;flex:0 0 auto} .autor-dados{min-width:0} .autor-dados h1{font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:-.03em;margin:12px 0 0} .autor-cargo{font-size:16px;color:var(--texto-2);margin-top:8px} .autor-bio{font-size:15.5px;line-height:1.6;color:var(--texto-2);margin-top:14px;max-width:620px} .autor-rodape{display:flex;align-items:center;gap:18px;margin-top:18px;font-size:13px;color:var(--texto-3)} .autor-rodape a{color:var(--laranja);font-weight:600} .autor-rodape a:hover{text-decoration:underline} /* ========================================================= * AVISO DE COOKIES (plugin CookieYes) * O plugin grava cores direto no HTML, por isso o !important. * ========================================================= */ .cky-consent-container .cky-consent-bar{ background:var(--superficie) !important; border:1px solid var(--linha-forte) !important; border-radius:var(--raio) !important; box-shadow:var(--sombra) !important; font-family:var(--fonte-texto) !important; } .cky-consent-container .cky-title{ font-family:var(--fonte-titulo) !important;font-weight:800 !important; color:var(--texto) !important;letter-spacing:-.01em; } .cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des *{color:var(--texto-2) !important} .cky-consent-container .cky-notice-des a{color:var(--laranja) !important;text-decoration:underline} /* botões: aceitar em laranja cheio, os outros em contorno */ .cky-btn{ font-family:var(--fonte-titulo) !important;font-weight:700 !important; border-radius:999px !important; transition:opacity var(--transicao); } .cky-btn:hover{opacity:.85} .cky-btn-accept{ background:var(--laranja) !important;border-color:var(--laranja) !important;color:#fff !important; } .cky-btn-reject, .cky-btn-customize, .cky-btn-preferences{ background:transparent !important;border-color:var(--linha-forte) !important;color:var(--texto) !important; } /* janela de preferências */ .cky-preference-center{ background:var(--superficie) !important;color:var(--texto) !important; border-radius:var(--raio) !important;font-family:var(--fonte-texto) !important; } .cky-preference-center .cky-preference-title, .cky-preference-center .cky-accordion-btn{color:var(--texto) !important;font-family:var(--fonte-titulo) !important} .cky-preference-center p, .cky-preference-center .cky-accordion-header-des *{color:var(--texto-2) !important} .cky-preference-center .cky-show-desc-btn, .cky-preference-center a{color:var(--laranja) !important} .cky-switch input[type="checkbox"]:checked{background:var(--laranja) !important} .cky-always-active{color:var(--laranja) !important} /* botão flutuante para rever a escolha */ .cky-btn-revisit-wrapper{background:var(--laranja) !important} /* celular: faixa baixa no rodapé em vez de caixa ocupando a tela */ @media (max-width:640px){ .cky-consent-container{ left:10px !important;right:10px !important;bottom:10px !important; width:auto !important;max-width:none !important; } .cky-consent-container .cky-consent-bar{padding:14px 16px !important} .cky-consent-container .cky-notice .cky-title{font-size:14px !important;margin:0 0 4px !important} .cky-consent-container .cky-notice-group{display:block !important} .cky-consent-container .cky-notice-des{ font-size:12.5px !important;line-height:1.45 !important; max-height:4.4em;overflow-y:auto;margin:0 !important; } .cky-consent-container .cky-notice-des p{margin:0 !important} .cky-consent-container .cky-notice-btn-wrapper{ display:flex !important;flex-direction:row !important;flex-wrap:wrap !important; gap:8px !important;margin:12px 0 0 !important;padding:0 !important; } .cky-consent-container .cky-notice-btn-wrapper .cky-btn{ flex:1 1 0 !important;width:auto !important;margin:0 !important; padding:9px 10px !important;font-size:13px !important;line-height:1.2 !important; white-space:nowrap; } /* aceitar ocupa a linha inteira embaixo, os outros dois dividem a de cima */ .cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept{flex-basis:100% !important;order:3} } /* ========================================================= * PÁGINA DA CATEGORIA ANÁLISE: COLUNISTAS * ========================================================= */ /* cores da faixa: escura no tema escuro, clara no tema claro */ .colunistas{ --col-fundo:#0B0B0C;--col-texto:#F4F1EC; --col-texto-2:rgba(244,241,236,.68);--col-texto-3:rgba(244,241,236,.48); --col-card-a:rgba(255,255,255,.055);--col-card-b:rgba(255,255,255,.02); --col-borda:rgba(255,255,255,.09);--col-caixa:rgba(255,255,255,.04); --col-brilho:.30;--col-grao:.35; } :root[data-theme="light"] .colunistas{ --col-fundo:#EDE9E2;--col-texto:#0E0E0F; --col-texto-2:#4A4742;--col-texto-3:#8A857E; --col-card-a:rgba(255,255,255,.92);--col-card-b:rgba(255,255,255,.7); --col-borda:rgba(0,0,0,.08);--col-caixa:#F5F2ED; --col-brilho:.16;--col-grao:.18; } :root[data-theme="light"] .colunista:hover{box-shadow:0 24px 50px -30px rgba(255,54,0,.45)} .secao-analise-topo{padding-bottom:8px} .secao-analise-topo .filtros{margin-bottom:0} .colunistas{ position:relative;overflow:hidden;isolation:isolate; background:var(--col-fundo);color:var(--col-texto); padding:72px 0 80px;margin-top:40px; } /* brilho laranja e rastro de meteoro no fundo */ .colunistas::before{ content:"";position:absolute;z-index:-1;inset:0; background: radial-gradient(620px 340px at 88% -8%, rgba(255,54,0,var(--col-brilho)), transparent 70%), linear-gradient(115deg, transparent 58%, rgba(255,54,0,.55) 58.15%, rgba(255,54,0,0) 58.6%) no-repeat; background-size:auto, 100% 100%; opacity:.9; } .colunistas::after{content:"";position:absolute;z-index:-1;inset:0;background-image:var(--grao);mix-blend-mode:overlay;opacity:var(--col-grao);pointer-events:none} .colunistas-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:40px} .colunistas-rotulo{ display:inline-flex;align-items:center;gap:8px; font-family:var(--fonte-titulo);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--laranja); } .colunistas-rotulo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--laranja);box-shadow:0 0 12px var(--laranja)} .colunistas-cab h2{ font-family:var(--fonte-titulo);font-weight:900; font-size:clamp(36px,5vw,60px);line-height:.98;letter-spacing:-.035em;margin-top:10px; } .colunistas-cab p{max-width:380px;color:var(--col-texto-2);font-size:15px;line-height:1.6} .colunistas-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:1024px){.colunistas-lista{grid-template-columns:repeat(2,1fr)}} .colunista{ position:relative;display:flex;flex-direction:column; padding:26px 24px 22px;border-radius:18px; background:linear-gradient(180deg,var(--col-card-a),var(--col-card-b)); border:1px solid var(--col-borda); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:border-color var(--transicao),transform var(--transicao),box-shadow var(--transicao); } .colunista:hover{ border-color:rgba(255,54,0,.7);transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(255,54,0,.55); } .colunista-topo{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px} .avatar-colunista{ width:84px;height:84px;font-size:26px; box-shadow:0 0 0 3px var(--col-fundo), 0 0 0 5px var(--laranja); transition:transform var(--transicao); } .colunista:hover .avatar-colunista{transform:scale(1.05) rotate(-2deg)} .colunista-conta{ text-align:right;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--col-texto-3);line-height:1.2; } .colunista-conta strong{ display:block;font-family:var(--fonte-titulo);font-weight:900;font-size:34px; letter-spacing:-.03em;color:var(--col-texto);line-height:1; } .colunista h3{font-family:var(--fonte-titulo);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.15} .colunista h3 a{color:inherit} .colunista h3 a:hover{color:var(--laranja)} .colunista-cargo{margin-top:6px;font-size:13px;font-weight:600;color:var(--laranja)} .colunista-bio{ margin-top:12px;font-size:14px;line-height:1.6;color:var(--col-texto-2); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .colunista-ultimo{ display:block;margin-top:auto;padding:14px 16px;border-radius:12px; background:var(--col-caixa);border:1px solid var(--col-borda); transition:background var(--transicao),border-color var(--transicao); } .colunista-bio + .colunista-ultimo, .colunista-cargo + .colunista-ultimo{margin-top:20px} .colunista-ultimo span{ display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--col-texto-3);margin-bottom:6px; } .colunista-ultimo strong{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-family:var(--fonte-titulo);font-weight:700;font-size:15px;line-height:1.3;color:var(--col-texto); } .colunista-ultimo:hover{background:rgba(255,54,0,.1);border-color:rgba(255,54,0,.35)} .colunista-perfil{ display:inline-flex;align-items:center;gap:8px;margin-top:16px; font-family:var(--fonte-titulo);font-weight:700;font-size:13px;color:var(--col-texto); } .colunista-perfil svg{width:16px;height:16px;color:var(--laranja);transition:transform var(--transicao)} .colunista-perfil:hover svg,.colunista-cta:hover .colunista-perfil svg{transform:translateX(4px)} /* card de convite */ .colunista-cta{ justify-content:flex-end;min-height:280px; background:linear-gradient(150deg,rgba(255,54,0,.16),rgba(255,54,0,.02) 60%); border:1px dashed rgba(255,54,0,.5);color:var(--col-texto);text-decoration:none; } .colunista-cta-mais{ position:absolute;top:22px;left:24px; width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:var(--laranja);color:#fff;font-family:var(--fonte-titulo);font-weight:800;font-size:30px;line-height:1; box-shadow:0 0 30px rgba(255,54,0,.5); transition:transform var(--transicao); } .colunista-cta:hover .colunista-cta-mais{transform:rotate(90deg)} /* celular: cards deslizam para o lado */ @media (max-width:640px){ .colunistas{padding:52px 0 60px;margin-top:28px} .colunistas-cab{margin-bottom:28px;gap:14px} .colunistas-lista{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px; margin:0 -16px;padding:4px 16px 12px;scroll-padding:0 16px;scrollbar-width:none; } .colunistas-lista::-webkit-scrollbar{display:none} .colunista{flex:0 0 84%;scroll-snap-align:start} .colunista:hover{transform:none} } .secao-textos-analise{padding-top:64px}