/* ========================================================= PORTAL BÚSSOLA — visual do site Tema claro (padrão) + tema escuro · 100% responsivo Base: o esboço aprovado pelo cliente (_esboco/assets/style.css), mantido linha por linha. No fim do arquivo entram só as telas que o esboço não tinha: matéria, busca, paginação, 404 e o leitor de webstory. A cor principal (--red) vem do :root, mas o servidor pode sobrescrever a variável direto no conforme a configuração do painel. Por isso NENHUMA regra deste arquivo repete o código da cor: é sempre var(--red). ========================================================= */ :root{ --red:#ee1119; /* vermelho da logo */ --red-dark:#c00d14; --red-soft:#fdeced; --bg:#ffffff; --bg-2:#f4f5f7; --bg-3:#ffffff; --text:#0d0d0f; --text-2:#5b6069; --line:#e3e5ea; --shadow:0 2px 14px rgba(15,20,30,.08); --shadow-lg:0 10px 40px rgba(15,20,30,.12); --radius:10px; --wa:#25d366; --header-h:64px; --font-title:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; } /* O servidor aceita "dark" ou "escuro" no data-theme; os dois valem aqui para o tema certo já aparecer na primeira pintura, antes do site.js rodar. */ [data-theme="dark"],[data-theme="escuro"]{ --bg:#0e0f12; --bg-2:#16181d; --bg-3:#16181d; --text:#f2f3f5; --text-2:#a3a9b4; --line:#262a31; --red-soft:#2a0d11; --shadow:0 2px 14px rgba(0,0,0,.5); --shadow-lg:0 10px 40px rgba(0,0,0,.6); } /* Se o cliente trocar a cor principal no painel, o tom escuro do hover e o fundo suave do menu acompanham sozinhos, em vez de continuarem vermelhos. */ @supports (color: color-mix(in srgb, red, blue)){ :root{ --red-dark:color-mix(in srgb, var(--red) 82%, #000); --red-soft:color-mix(in srgb, var(--red) 8%, #fff); } [data-theme="dark"],[data-theme="escuro"]{ --red-soft:color-mix(in srgb, var(--red) 22%, #0e0f12); } } *{box-sizing:border-box} [hidden]{display:none !important} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--font-body);font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased; transition:background .25s,color .25s; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--font-title);margin:0;line-height:1.15;letter-spacing:-.02em} svg{width:20px;height:20px;fill:currentColor} .wrap{max-width:1280px;margin:0 auto;padding:0 20px} .dotred{color:var(--red)} .hint{color:var(--text-2);font-size:13px;margin:10px 2px 0} /* ---------- botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 18px;border-radius:8px;border:0;cursor:pointer; font-family:var(--font-title);font-weight:700;font-size:14px; transition:.18s;white-space:nowrap; } .btn--primary{background:var(--red);color:#fff} .btn--primary:hover{background:var(--red-dark)} .btn--ghost{background:transparent;color:inherit;border:1px solid var(--line)} .btn--ghost:hover{border-color:var(--red);color:var(--red)} .btn--outline{background:transparent;border:1.5px solid var(--line);color:var(--text)} .btn--outline:hover{border-color:var(--red);color:var(--red)} .btn--block{width:100%;margin-top:22px;padding:14px} .btn--wa{background:var(--wa);color:#062e14} .btn--wa:hover{filter:brightness(1.06)} .icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:8px;border:0;cursor:pointer; background:transparent;color:inherit;font-size:15px;transition:.18s; } .icon-btn:hover{background:var(--bg-2);color:var(--red)} .icon-btn svg{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} /* ========================================================= FAIXA DE DEMONSTRAÇÃO Aparece só enquanto a variável SITE_EM_DEMONSTRACAO estiver ligada. Avisa que as notícias são fictícias: num portal de NOTÍCIAS, deixar matéria inventada no ar sem aviso engana quem cai de paraquedas. ========================================================= */ .faixa-demo{ background:#1b1d22;color:#ffd54a; font-size:13px;font-weight:600;line-height:1.4; text-align:center;padding:9px 16px; border-bottom:2px solid #ffd54a; } @media (max-width:640px){ .faixa-demo{font-size:12px;padding:8px 12px} } /* ========================================================= TICKER DE PATROCINADORES (estilo bolsa de valores) ========================================================= */ .ticker{ display:flex;align-items:stretch;height:36px; background:#0d0d0f;color:#fff;border-bottom:1px solid #23262c; font-size:13px;position:relative;z-index:60; } [data-theme="dark"] .ticker,[data-theme="escuro"] .ticker{background:#000} .ticker__label{ display:flex;align-items:center;padding:0 14px;background:var(--red); font-family:var(--font-title);font-weight:800;font-size:11px;letter-spacing:.1em; flex:0 0 auto; } .ticker__viewport{flex:1;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)} .ticker__track{display:flex;align-items:center;height:100%;gap:0;width:max-content;animation:ticker 46s linear infinite} .ticker.is-paused .ticker__track{animation-play-state:paused} @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tk{ display:flex;align-items:center;gap:8px;padding:0 16px; border-right:1px solid #2b2f36;white-space:nowrap; } .tk b{font-weight:700;letter-spacing:.02em} .tk span{color:#b8bec9} .tk i{font-style:normal;font-weight:700} .tk .up{color:#28c76f} .tk .down{color:#ff5b5b} .ticker__pause{ flex:0 0 auto;width:36px;border:0;background:#1a1d22;color:#8c93a0; cursor:pointer;font-size:9px; } .ticker__pause:hover{color:#fff} /* ========================================================= TOPO ========================================================= */ .topbar{ position:sticky;top:0;z-index:50;background:var(--bg); border-bottom:1px solid var(--line);box-shadow:var(--shadow); } .topbar__inner{display:flex;align-items:center;gap:14px;height:var(--header-h)} .menu-btn{display:none} .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto} .brand__mark{ display:grid;place-items:center;width:40px;height:40px;border-radius:9px; overflow:hidden;flex:0 0 auto; } .brand__mark img{width:100%;height:100%;object-fit:cover} .brand__text{display:flex;flex-direction:column;line-height:1.05} .brand__text strong{font-family:var(--font-title);font-weight:900;font-size:19px;letter-spacing:-.03em} .brand__text small{font-size:10px;color:var(--text-2);letter-spacing:.02em} .topnav{display:flex;align-items:center;gap:2px;margin-left:14px;flex:1;overflow:hidden} .topnav a{ padding:9px 12px;border-radius:7px;font-weight:600;font-size:14.5px; color:var(--text);transition:.15s;white-space:nowrap; } .topnav a:hover{background:var(--red-soft);color:var(--red)} .topnav a.is-live{color:var(--red);font-weight:700;display:flex;align-items:center;gap:6px} .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} .topbar__actions{display:flex;align-items:center;gap:6px;flex:0 0 auto} .theme-btn .ic-sun{display:none} [data-theme="dark"] .theme-btn .ic-moon,[data-theme="escuro"] .theme-btn .ic-moon{display:none} [data-theme="dark"] .theme-btn .ic-sun,[data-theme="escuro"] .theme-btn .ic-sun{display:block} .theme-btn svg{fill:currentColor;stroke:none} .login-link{padding:9px 16px} .searchbar{display:none;border-top:1px solid var(--line);padding:12px 0;background:var(--bg-2)} .searchbar.is-open{display:block} .searchbar input{ width:100%;padding:13px 16px;border-radius:9px;border:1px solid var(--line); background:var(--bg);color:var(--text);font-size:15px;font-family:var(--font-body); } .searchbar input:focus{outline:2px solid var(--red);border-color:transparent} /* drawer mobile */ .drawer{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.5);display:none} .drawer.is-open{display:block} .drawer__panel{ width:290px;max-width:85vw;height:100%;background:var(--bg); padding:16px;display:flex;flex-direction:column;gap:2px;overflow:auto; animation:slide .22s ease; } @keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(0)}} .drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .drawer__head strong{font-family:var(--font-title);font-size:13px;letter-spacing:.12em;color:var(--text-2)} .drawer__panel>a{padding:13px 10px;border-bottom:1px solid var(--line);font-weight:600} .drawer__panel>a:hover{color:var(--red)} .drawer__foot{margin-top:auto;padding-top:18px;display:grid;gap:8px} /* ========================================================= PLANTÃO ========================================================= */ .breaking{background:var(--red);color:#fff} .breaking__inner{display:flex;align-items:center;gap:14px;height:44px;overflow:hidden} .breaking__tag{ font-family:var(--font-title);font-weight:900;font-size:11px;letter-spacing:.12em; background:#fff;color:var(--red);padding:4px 9px;border-radius:4px;flex:0 0 auto; } .breaking__text{flex:1;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .breaking__time{font-size:12px;opacity:.85;flex:0 0 auto} /* ========================================================= CARDS ========================================================= */ .card{background:var(--bg-3);border-radius:var(--radius);overflow:hidden;transition:.2s} .card__media{ display:block;position:relative;overflow:hidden;border-radius:var(--radius); background:linear-gradient(135deg,#c9ccd3,#8e929c); } [data-theme="dark"] .card__media,[data-theme="escuro"] .card__media{background:linear-gradient(135deg,#2a2e36,#1a1d22)} .card__media img{width:100%;height:100%;object-fit:cover;transition:.4s} .card:hover .card__media img{transform:scale(1.05)} .ratio-16x9{aspect-ratio:16/9} .ratio-4x3{aspect-ratio:4/3} .card__badge{ position:absolute;left:12px;top:12px;background:var(--red);color:#fff; font-family:var(--font-title);font-weight:800;font-size:11px;letter-spacing:.1em; padding:5px 10px;border-radius:4px; } .card__body{padding:14px 2px} .kicker{ display:inline-block;color:var(--red);font-family:var(--font-title); font-weight:800;font-size:11px;letter-spacing:.11em;margin-bottom:7px; } .card__title{font-size:19px;font-weight:700} .card:hover .card__title{color:var(--red)} .card__desc{color:var(--text-2);margin:10px 0 0;font-size:15.5px} .card__meta{margin-top:10px;font-size:12.5px;color:var(--text-2)} .card__meta .author{font-weight:600;color:var(--text)} /* manchete */ .hero{display:grid;grid-template-columns:1.65fr 1fr;gap:26px;margin-top:26px} .card--lead .card__title{font-size:34px;font-weight:800;line-height:1.1} .hero__side{display:flex;flex-direction:column;gap:16px} .card--row{display:grid;grid-template-columns:118px 1fr;gap:13px;align-items:start} .card--row .card__body{padding:0} .card--row .card__title{font-size:16px;line-height:1.25} /* ========================================================= BANNERS ========================================================= */ .banner{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 12px,transparent 12px,transparent 24px); border:1.5px dashed var(--line);border-radius:var(--radius); color:var(--text-2);text-align:center;transition:.2s; } .banner:hover{border-color:var(--red);color:var(--red)} .banner__tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.7} .banner__slot{font-family:var(--font-title);font-weight:700;font-size:14px} .banner--wide{height:130px;margin:34px 0} .banner--box{height:250px} .banner--tall{height:420px} /* ========================================================= LAYOUT PRINCIPAL ========================================================= */ .layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start} .layout__side{display:flex;flex-direction:column;gap:22px;position:sticky;top:calc(var(--header-h) + 16px)} .section{margin:52px 0} .section-head{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding-bottom:12px;margin-bottom:20px;border-bottom:2px solid var(--text); } .section-head h2{font-size:24px;font-weight:900;letter-spacing:-.03em} .link-more{font-size:13px;font-weight:700;color:var(--red)} .link-more:hover{text-decoration:underline} .carousel-nav{display:flex;gap:4px} .grid-news{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px} /* sidebar */ .box{background:var(--bg-2);border-radius:var(--radius);padding:18px} .box__head h3{font-size:17px;font-weight:900} .box__head{padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid var(--text)} .ranking{list-style:none;margin:0;padding:0} .ranking li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)} .ranking li:last-child{border-bottom:0;padding-bottom:0} .ranking span{ font-family:var(--font-title);font-weight:900;font-size:22px;color:var(--red); line-height:1;flex:0 0 22px; } .ranking a{font-size:14.5px;font-weight:600;line-height:1.3} .ranking a:hover{color:var(--red)} .box--wa{background:linear-gradient(160deg,#25d366,#128c4a);color:#fff;text-align:center} .box--wa h3{font-size:19px;margin:10px 0 6px} .box--wa p{font-size:14px;margin:0 0 14px;opacity:.95} .box--wa .btn{width:100%} .box--wa small{display:block;margin-top:10px;font-size:11px;opacity:.8} .wa-icon svg{width:44px;height:44px;fill:#fff} /* ========================================================= WEBSTORIES ========================================================= */ .stories{ display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth; padding-bottom:6px;scroll-snap-type:x mandatory; } .stories::-webkit-scrollbar{height:6px} .stories::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} .story{ position:relative;flex:0 0 190px;aspect-ratio:9/16;border-radius:12px;overflow:hidden; background:linear-gradient(135deg,#3a3f49,#14161a);scroll-snap-align:start; } .story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s} .story:hover img{transform:scale(1.07)} .story::after{ content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.25) 45%,transparent 70%); } .story h4{ position:absolute;left:14px;right:14px;bottom:14px;z-index:2; color:#fff;font-size:15px;font-weight:700;line-height:1.22; } /* ========================================================= VÍDEOS ========================================================= */ .section--dark{ background:#0d0d0f;color:#fff;border-radius:14px;padding:26px 26px 30px; } .section--dark .section-head{border-color:#fff} .section--dark .section-head h2{color:#fff} .videos{display:grid;grid-template-columns:1.5fr 1fr;gap:26px} .video-embed{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000} .video-embed iframe{width:100%;height:100%;border:0} .video-main h3{font-size:20px;margin:16px 0 6px} .video-main p{color:#a3a9b4;font-size:14px;margin:0} .video-list{display:flex;flex-direction:column;gap:12px} .video-item{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;font-size:14.5px;font-weight:600} .video-item:hover{color:#ff8a8a} .video-thumb{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#22262d;display:block} .video-thumb img{width:100%;height:100%;object-fit:cover} .video-thumb .play{ position:absolute;inset:0;display:grid;place-items:center; background:rgba(0,0,0,.35);color:#fff;font-size:16px; } /* ========================================================= PATROCINADORES (grade) ========================================================= */ .sponsors{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .sp{ display:grid;place-items:center;height:88px;border-radius:10px; background:var(--bg-2);border:1px solid var(--line); font-family:var(--font-title);font-weight:800;font-size:13px;color:var(--text-2); text-align:center;padding:8px;transition:.2s;letter-spacing:.02em; } .sp:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)} /* ========================================================= NEWSLETTER ========================================================= */ .newsletter{ display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center; background:var(--red);color:#fff;border-radius:14px;padding:34px;margin:52px 0; } .newsletter h2{font-size:28px;font-weight:900;margin-bottom:8px} .newsletter p{margin:0;opacity:.95;font-size:15px} .newsletter__form{display:grid;gap:10px} .newsletter__form input[type=text],.newsletter__form input[type=email]{ padding:14px 16px;border-radius:9px;border:0;font-size:15px;font-family:var(--font-body); } .newsletter__form input:focus{outline:3px solid rgba(255,255,255,.6)} .newsletter__form .btn--primary{background:#0d0d0f;padding:14px} .newsletter__form .btn--primary:hover{background:#000} .check{display:flex;align-items:center;gap:8px;font-size:12.5px;opacity:.95} /* o aviso também aparece fora do bloco vermelho (página de descadastro), então a versão de fundo claro é a base e a do bloco vermelho vem logo abaixo */ .nl-ok{background:var(--bg-2);color:var(--text);padding:10px;border-radius:8px;font-size:14px;font-weight:600;margin:0} .newsletter .nl-ok{background:rgba(255,255,255,.18);color:#fff} /* ========================================================= RODAPÉ ========================================================= */ .footer{background:#0d0d0f;color:#c9ced7;margin-top:60px} .footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:34px;padding-top:44px;padding-bottom:34px} .footer h4{color:#fff;font-size:13px;letter-spacing:.1em;margin-bottom:14px;text-transform:uppercase} .footer__col{display:flex;flex-direction:column;gap:9px} .footer__col a{font-size:14px} .footer__col a:hover{color:#fff} .brand--footer .brand__text strong{color:#fff} .footer__about{font-size:14px;margin:4px 0 0;max-width:34ch} .contact{display:flex;align-items:center;gap:9px} .contact svg{width:18px;height:18px;fill:currentColor;flex:0 0 18px} .footer__bar{border-top:1px solid #23262c;padding:16px 0;font-size:12.5px} .footer__bar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .footer__dev strong{color:#fff} /* FAB WhatsApp */ .fab{ position:fixed;right:18px;bottom:18px;z-index:70; width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff; display:grid;place-items:center;box-shadow:var(--shadow-lg);transition:.2s; } .fab:hover{transform:scale(1.08)} .fab svg{width:30px;height:30px;fill:#fff} /* ========================================================= BANNER COM ARTE DE VERDADE O espaço vazio continua tracejado (o cliente enxerga onde cabe anúncio); quando a arte é enviada, o tracejado sai da frente da imagem. ========================================================= */ .banner img{width:100%;height:100%;object-fit:contain;border-radius:inherit} .banner--arte,.banner:has(img){ padding:0;overflow:hidden;position:relative; background:none;border-style:solid;border-color:transparent; } .banner--arte:hover,.banner:has(img):hover{border-color:var(--red)} .banner--arte .banner__slot,.banner:has(img) .banner__slot{display:none} .banner--arte .banner__tag,.banner:has(img) .banner__tag{ position:absolute;left:0;top:0;z-index:2;opacity:1; background:rgba(0,0,0,.55);color:#fff;padding:2px 7px;border-radius:0 0 6px 0;font-size:9px; } /* ========================================================= PÁGINA DA NOTÍCIA Largura de leitura curta de propósito: texto longo cansa quando a linha passa de ~75 caracteres. ========================================================= */ .materia{max-width:720px;margin:0 auto;padding:30px 0 20px} .materia__chapeu{ display:inline-block;color:var(--red);font-family:var(--font-title); font-weight:800;font-size:12px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px; } .materia__titulo{font-size:38px;font-weight:900;line-height:1.1;letter-spacing:-.03em} .materia__linha-fina{ font-size:19px;line-height:1.5;color:var(--text-2);margin:14px 0 0;font-weight:400; } .materia__meta{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px; margin:20px 0 26px;padding:14px 0;font-size:13px;color:var(--text-2); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .materia__meta .autor,.materia__meta .author,.materia__meta strong{font-weight:700;color:var(--text)} .materia__capa{margin:0 0 28px} .materia__capa img{width:100%;border-radius:var(--radius)} .materia__capa figcaption,.materia__credito{ margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--text-2); } .materia__corpo{font-size:18px;line-height:1.75} .materia__corpo p{margin:0 0 22px} .materia__corpo h2{font-size:26px;font-weight:800;margin:38px 0 14px} .materia__corpo h3{font-size:21px;font-weight:800;margin:30px 0 12px} .materia__corpo h4{font-size:18px;font-weight:800;margin:26px 0 10px} .materia__corpo ul,.materia__corpo ol{margin:0 0 22px;padding-left:24px} .materia__corpo li{margin-bottom:9px} .materia__corpo blockquote{ margin:28px 0;padding:4px 0 4px 20px;border-left:4px solid var(--red); font-size:20px;line-height:1.55;font-weight:600;color:var(--text); } .materia__corpo blockquote p:last-child{margin-bottom:0} .materia__corpo img{width:100%;border-radius:var(--radius);margin:8px 0 6px} .materia__corpo figure{margin:28px 0} .materia__corpo figcaption{font-size:12.5px;color:var(--text-2);margin-top:8px} .materia__corpo a{color:var(--red);text-decoration:underline;text-underline-offset:2px} .materia__corpo a:hover{text-decoration-thickness:2px} .materia__corpo hr{border:0;border-top:1px solid var(--line);margin:32px 0} .materia__corpo .banner{margin:34px 0} /* notícia do tipo "link": o leitor termina a leitura na fonte original */ .materia__fonte{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; margin:30px 0;padding:20px 22px;border-radius:var(--radius); background:var(--red-soft);border:1.5px solid var(--red);transition:.18s; } .materia__fonte:hover{background:var(--red);color:#fff} .materia__fonte strong{font-family:var(--font-title);font-size:19px;font-weight:800;line-height:1.25} .materia__fonte span,.materia__fonte small{display:block;font-size:13px;color:var(--text-2);margin-top:4px;word-break:break-word} .materia__fonte:hover span,.materia__fonte:hover small{color:rgba(255,255,255,.9)} .materia__fonte::after{content:'→';font-size:22px;font-weight:700;flex:0 0 auto} /* bloco "leia também" no fim da matéria */ .leia-mais{margin:36px 0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)} .leia-mais h2,.leia-mais h3,.leia-mais strong{ display:block;font-family:var(--font-title);font-size:13px;font-weight:900; letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:6px; } .leia-mais ul,.leia-mais ol{list-style:none;margin:0;padding:0} .leia-mais li{border-bottom:1px solid var(--line)} .leia-mais li:last-child{border-bottom:0} .leia-mais a{display:block;padding:11px 0;font-size:15.5px;font-weight:600;line-height:1.3} .leia-mais a:hover{color:var(--red)} /* ========================================================= TOPO DE PÁGINA (busca, editoria, webstories, vídeos…) ========================================================= */ .busca-topo,.pagina-topo{ padding:30px 0 8px;margin-bottom:8px;border-bottom:1px solid var(--line); } .busca-topo h1,.pagina-topo h1{font-size:30px;font-weight:900;letter-spacing:-.03em} .busca-topo p,.pagina-topo p{margin:8px 0 18px;color:var(--text-2);font-size:14.5px} .busca-topo form{display:flex;gap:10px;margin:16px 0 20px;flex-wrap:wrap} .busca-topo input[type=search],.busca-topo input[type=text]{ flex:1 1 240px;padding:13px 16px;border-radius:9px;border:1px solid var(--line); background:var(--bg);color:var(--text);font-size:15px;font-family:var(--font-body); } .busca-topo input:focus{outline:2px solid var(--red);border-color:transparent} /* nada encontrado / lista ainda vazia — a página não pode ficar em branco */ .sem-resultado,.vazio{ text-align:center;padding:56px 20px;margin:20px auto;max-width:520px; border:1px dashed var(--line);border-radius:var(--radius);color:var(--text-2); } .sem-resultado h2,.vazio h2{font-size:21px;color:var(--text);margin-bottom:10px} .sem-resultado p,.vazio p{margin:0 0 18px;font-size:15px} /* ========================================================= PAGINAÇÃO ========================================================= */ .paginacao{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:44px 0} .paginacao a,.paginacao span,.paginacao button{ display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 13px;border-radius:8px; border:1px solid var(--line);background:transparent;color:var(--text); font-family:var(--font-title);font-weight:700;font-size:14px;cursor:pointer;transition:.18s; } .paginacao a:hover,.paginacao button:hover{border-color:var(--red);color:var(--red)} .paginacao .is-atual,.paginacao [aria-current="page"]{ background:var(--red);border-color:var(--red);color:#fff;cursor:default; } .paginacao .is-desativado,.paginacao [aria-disabled="true"],.paginacao :disabled{ opacity:.4;pointer-events:none; } .paginacao .reticencias{border-color:transparent;min-width:20px;padding:0} /* ========================================================= PÁGINA 404 ========================================================= */ .erro-404{text-align:center;padding:80px 20px 90px;max-width:560px;margin:0 auto} .erro-404 b,.erro-404 .erro-404__codigo{ display:block;font-family:var(--font-title);font-size:96px;font-weight:900; line-height:1;color:var(--red);letter-spacing:-.05em; } .erro-404 h1{font-size:27px;font-weight:900;margin:16px 0 10px} .erro-404 p{color:var(--text-2);margin:0 0 26px;font-size:15.5px} /* ========================================================= LEITOR DE WEBSTORY (tela cheia, vertical, estilo Instagram) ========================================================= */ .story-leitor{ position:fixed;inset:0;z-index:100;overflow:hidden; height:100dvh;background:#000;color:#fff; display:flex;flex-direction:column; user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent; } /* sem JS (ou com JS bloqueado) o leitor ainda mostra a primeira tela */ .story-leitor:not(.js-pronto) .story-leitor__tela:first-of-type{display:flex} .story-leitor__barras{ position:absolute;left:0;right:0;top:0;z-index:5; display:flex;gap:4px;padding:12px 12px 0; } .story-leitor__barras i,.story-leitor__barras span{ flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.32);overflow:hidden; } .story-leitor__barras i::after,.story-leitor__barras span::after{ content:'';display:block;height:100%;width:0;background:#fff; } .story-leitor__barras .is-vista::after{width:100%} .story-leitor__barras .is-atual::after{animation:storyBarra var(--story-tempo,6s) linear forwards} @keyframes storyBarra{from{width:0}to{width:100%}} .story-leitor.is-pausado .story-leitor__barras .is-atual::after{animation-play-state:paused} .story-leitor__tela{ position:absolute;inset:0;display:none; align-items:flex-end;justify-content:center; padding:70px 22px 96px; background-color:#111;background-size:cover;background-position:center; } .story-leitor__tela.is-ativa{display:flex} .story-leitor__tela img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; } .story-leitor__tela::after{ content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.45) 100%); } .story-leitor__tela p,.story-leitor__tela h1,.story-leitor__tela h2,.story-leitor__tela h3{ position:relative;z-index:2;width:100%;max-width:520px;margin:0; font-family:var(--font-title);font-size:23px;font-weight:800;line-height:1.3; text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.6); } .story-leitor__tela .btn{position:relative;z-index:3} /* as duas metades clicáveis: esquerda volta, direita avança */ .story-leitor__toque{ position:absolute;top:0;bottom:0;left:0;width:33%;z-index:4; border:0;background:transparent;color:transparent;cursor:pointer; } .story-leitor__toque--proximo{left:auto;right:0;width:67%} .story-leitor__sair{ position:absolute;right:12px;top:22px;z-index:6; display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border:0;border-radius:50%;cursor:pointer; background:rgba(0,0,0,.45);color:#fff;font-size:17px;line-height:1; } .story-leitor__sair:hover{background:rgba(0,0,0,.75)} .story-leitor__sair svg{fill:#fff;stroke:#fff} /* no computador a story fica centralizada no formato vertical */ @media (min-width:820px){ .story-leitor__tela{ inset:56px auto 56px 50%; width:min(56vh,440px);transform:translateX(-50%); border-radius:14px;overflow:hidden; } .story-leitor__barras{ left:50%;transform:translateX(-50%);width:min(56vh,440px);top:56px;padding:10px 10px 0; } .story-leitor__sair{right:24px;top:24px} } /* ========================================================= FORMULÁRIO DA NEWSLETTER — respostas do servidor ========================================================= */ .nl-erro{ background:var(--red-soft);color:var(--red);padding:10px;border-radius:8px; font-size:14px;font-weight:600;margin:0;border:1px solid var(--red); } .newsletter .nl-erro{background:rgba(0,0,0,.3);color:#fff;border-color:transparent} .newsletter__form .btn[disabled],.newsletter__form .btn.is-enviando{opacity:.65;cursor:progress} .newsletter__form .btn[disabled]:hover,.newsletter__form .btn.is-enviando:hover{background:#0d0d0f} /* ========================================================= ACESSIBILIDADE ========================================================= */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--red);outline-offset:2px;border-radius:6px; } /* em fundo preto o contorno vermelho some: nesses blocos ele vira branco */ .ticker a:focus-visible,.ticker button:focus-visible, .footer a:focus-visible,.footer button:focus-visible, .section--dark a:focus-visible,.section--dark button:focus-visible, .breaking a:focus-visible,.story-leitor button:focus-visible,.story-leitor a:focus-visible{ outline-color:#fff; } .newsletter a:focus-visible,.newsletter button:focus-visible,.newsletter input:focus-visible{outline-color:#0d0d0f} /* quem pediu menos movimento no aparelho não recebe animação nenhuma; o ticker vira uma faixa que pode ser rolada com o dedo. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important; } html{scroll-behavior:auto} .stories{scroll-behavior:auto} .ticker__track{animation:none;width:auto} .ticker__viewport{overflow-x:auto} .story-leitor__barras .is-atual::after{width:100%} } /* ========================================================= RESPONSIVO ========================================================= */ /* Nenhuma palavra comprida (link colado no texto, hashtag, nome de arquivo) pode estourar a largura da tela do celular. */ .card__title,.card__desc,.materia__titulo,.materia__linha-fina,.materia__corpo, .ranking a,.story h4,.leia-mais a,.vazio p,.sem-resultado p,.footer__col a{ overflow-wrap:anywhere; } @media (max-width:1080px){ .topnav{display:none} .menu-btn{display:inline-flex} .layout{grid-template-columns:1fr;gap:30px} .layout__side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:18px} .banner--tall{height:250px} .grid-news{grid-template-columns:repeat(2,1fr)} .sponsors{grid-template-columns:repeat(4,1fr)} .footer__inner{grid-template-columns:1fr 1fr} } @media (max-width:820px){ .hero{grid-template-columns:1fr;gap:20px} .card--lead .card__title{font-size:26px} .videos{grid-template-columns:1fr} .newsletter{grid-template-columns:1fr;padding:26px} .materia__titulo{font-size:30px} .materia__linha-fina{font-size:17px} } @media (max-width:640px){ body{font-size:15.5px} .wrap{padding:0 14px} .brand__text small{display:none} .brand__text strong{font-size:16px} .login-link{display:none} .ticker__label{font-size:10px;padding:0 10px} .breaking__time{display:none} .grid-news{grid-template-columns:1fr;gap:22px} .layout__side{grid-template-columns:1fr} .card--lead .card__title{font-size:23px} .card--row{grid-template-columns:104px 1fr} .section{margin:38px 0} .section-head h2{font-size:20px} .section--dark{padding:18px 16px 22px;border-radius:0;margin-left:-14px;margin-right:-14px} .video-item{grid-template-columns:110px 1fr} .story{flex:0 0 155px} .sponsors{grid-template-columns:repeat(2,1fr)} .footer__inner{grid-template-columns:1fr;gap:26px} .banner--wide{height:100px;margin:26px 0} .newsletter h2{font-size:22px} .fab{width:50px;height:50px;right:14px;bottom:14px} .materia{padding:22px 0 14px} .materia__titulo{font-size:26px} .materia__corpo{font-size:17px;line-height:1.7} .materia__corpo h2{font-size:22px} .materia__corpo blockquote{font-size:18px} .materia__fonte{padding:16px} .materia__fonte strong{font-size:17px} .busca-topo h1,.pagina-topo h1{font-size:24px} .erro-404 b,.erro-404 .erro-404__codigo{font-size:72px} .paginacao a,.paginacao span,.paginacao button{min-width:38px;height:38px;padding:0 10px} }