/* ========================================================================== FORA DO BURACO — Tema editorial Tokens extraídos do export Google Stitch (DESIGN.md). Cantos 0px, full width. ========================================================================== */ /* ---------------------------------------------------------------- FONTES -- Work Sans nos títulos, Inter no texto e nas etiquetas. Duas famílias apenas, ambas auto-hospedadas em woff2 — nenhuma chamada externa, nenhum IP de visitante indo para terceiro e uma requisição a menos no caminho crítico. -------------------------------------------------------------------------- */ @font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/ws-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/ws-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/ws-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/ws-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/ws-600-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/ws-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/ws-700-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/ws-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/ws-800-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/ws-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Work Sans';font-style:italic;font-weight:600;font-display:swap; src:url('../fonts/ws-600i-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Work Sans';font-style:italic;font-weight:600;font-display:swap; src:url('../fonts/ws-600i.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/inter-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/inter-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/inter-600-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/inter-700-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/inter-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} :root{ /* Superfícies */ --surface:#f5f5f5; --surface-white:#ffffff; --surface-low:#f3f3f3; --surface-variant:#e2e2e2; --surface-off:#f5f5f5; /* Tinta */ --ink:#0a0a0a; --ink-soft:#444748; --outline:#747878; --outline-variant:#c4c7c7; /* Acentos */ --warm:#7a6f67; --red:#bb1919; /* Tipografia */ --f-head:"Work Sans","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; --f-body:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; --f-label:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; /* Ritmo */ --gutter:32px; --section-gap:120px; --pad-x:clamp(20px,3.6vw,64px); --ad-pad:40px; } @media (max-width:900px){ :root{ --gutter:24px; --section-gap:64px; } } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; width:100%; overflow-x:hidden; background:var(--surface); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } button,input{ font:inherit; color:inherit; border-radius:0; } h1,h2,h3,h4,h5{ font-family:var(--f-head); margin:0; color:var(--ink); } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } figure{ margin:0; } /* --- Full width: sem trilho central, o conteúdo ocupa a tela toda --------- */ .wrap{ width:100%; margin:0; padding-inline:var(--pad-x); } /* --------------------------------- Tipografia utilitária ------------------ */ .t-display{ font-family:var(--f-head); font-weight:700; font-size:clamp(38px,4.4vw,64px); line-height:1.06; letter-spacing:-.02em; } .t-xl{ font-family:var(--f-head); font-weight:700; font-size:clamp(26px,2.6vw,44px); line-height:1.16; letter-spacing:-.015em; } .t-lg{ font-family:var(--f-head); font-weight:600; font-size:clamp(20px,1.6vw,30px); line-height:1.25; letter-spacing:-.01em; } .t-md{ font-family:var(--f-head); font-weight:600; font-size:18px; line-height:1.3; } .t-sm{ font-family:var(--f-head); font-weight:600; font-size:16px; line-height:1.32; } .t-xs{ font-family:var(--f-head); font-weight:600; font-size:14.5px; line-height:1.34; } .t-body{ font-family:var(--f-body); font-size:16px; line-height:1.65; color:var(--ink-soft); } .t-lead{ font-family:var(--f-body); font-size:clamp(18px,1.35vw,20px); line-height:1.6; } .label{ font-family:var(--f-label); font-size:11.5px; font-weight:600; letter-spacing:.085em; text-transform:uppercase; line-height:1.2; } .meta{ font-family:var(--f-body); font-size:14px; line-height:1.4; color:var(--outline); } .meta-xs{ font-family:var(--f-body); font-size:12.5px; line-height:1.4; color:var(--outline); } /* ================================ CABEÇALHO ============================== */ .masthead{ width:100%; background:var(--surface-white); border-bottom:1px solid rgba(116,120,120,.28); } .masthead__in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding-block:18px; } .masthead__nav{ display:flex; gap:26px; align-items:center; } .masthead__nav a{ font-family:var(--f-body); font-weight:500; font-size:14.5px; color:var(--ink-soft); transition:color .2s; } .masthead__nav a:hover,.masthead__nav a.is-active{ color:var(--ink); } .brand{ font-family:var(--f-head); font-weight:700; letter-spacing:-.035em; font-size:clamp(20px,2vw,30px); text-transform:uppercase; white-space:nowrap; color:var(--ink); } .masthead__tools{ display:flex; justify-content:flex-end; align-items:center; gap:14px; } .searchbox{ position:relative; width:min(280px,100%); } .searchbox input{ width:100%; padding:9px 92px 9px 14px; background:var(--surface-white); border:1px solid var(--outline-variant); outline:none; font-size:14px; } .searchbox input:focus{ border-color:var(--ink); } .searchbox button{ position:absolute; inset-block:0; right:0; padding-inline:16px; background:var(--red); color:#fff; border:0; cursor:pointer; font-family:var(--f-body); font-size:13.5px; font-weight:500; transition:opacity .2s; } .searchbox button:hover{ opacity:.88; } .burger{ display:none; background:none; border:0; cursor:pointer; padding:6px; } .burger span{ display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; } /* Barra fixa condensada (anatomia da tela de Artigo) */ .stickybar{ position:fixed; inset-block-start:0; inset-inline:0; z-index:60; height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-inline:var(--pad-x); background:rgba(245,245,245,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--outline-variant); transform:translateY(-100%); transition:transform .28s ease; } .stickybar.is-on{ transform:translateY(0); } .stickybar__left{ display:flex; align-items:center; gap:32px; min-width:0; } .stickybar__brand{ font-family:var(--f-head); font-weight:700; font-size:19px; letter-spacing:-.03em; text-transform:uppercase; } .stickybar__nav{ display:flex; gap:22px; } .stickybar__nav a{ font-family:var(--f-label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); transition:opacity .2s; } .stickybar__nav a:hover{ opacity:.6; } .stickybar__nav a.is-active{ color:var(--red); font-weight:700; border-bottom:2px solid var(--red); padding-bottom:3px; } .stickybar__right{ display:flex; align-items:center; gap:18px; } .icon-btn{ background:none; border:0; cursor:pointer; display:grid; place-items:center; padding:4px; color:var(--ink); } .icon-btn svg{ width:20px; height:20px; } /* Botão primário */ .btn{ display:inline-block; border:0; cursor:pointer; text-align:center; font-family:var(--f-label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:13px 24px; background:var(--ink); color:#fff; transition:background .25s,opacity .25s; } .btn:hover{ background:var(--red); } .btn--red{ background:var(--red); } .btn--red:hover{ background:var(--ink); } .btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); } .btn--ghost:hover{ background:var(--ink); color:#fff; } .btn--block{ display:block; width:100%; } /* ================================ ANÚNCIOS =============================== */ .ad{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-block:24px; background:var(--surface-white); border-bottom:1px solid rgba(116,120,120,.28); } .ad--boxed{ border:1px solid rgba(116,120,120,.2); } .ad--inline{ margin-block:48px; padding-block:var(--ad-pad); background:var(--surface-low); border-block:1px solid rgba(116,120,120,.3); border-bottom-color:rgba(116,120,120,.3); } .ad__label{ font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--outline); margin-bottom:10px; } .ad__slot{ display:flex; align-items:center; justify-content:center; max-width:100%; background:var(--surface-variant); border:1px solid var(--outline-variant); color:var(--outline); font-family:var(--f-label); font-size:12px; letter-spacing:.06em; } .ad__slot--leaderboard{ width:728px; height:90px; } .ad__slot--mpu{ width:336px; height:280px; } .ad__slot--banner{ width:100%; max-width:728px; height:90px; } .ad__slot > ins, .ad__slot > *{ max-width:100%; } .ad__slot.is-live{ background:none; border:0; width:auto; height:auto; } @media (max-width:800px){ .ad__slot--leaderboard,.ad__slot--banner{ width:100%; max-width:336px; height:auto; aspect-ratio:728/90; min-height:60px; } } /* ============================ CABEÇALHO DE SEÇÃO ========================= */ .sechead{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:2px solid var(--ink); padding-bottom:10px; margin-bottom:32px; } .sechead h2,.sechead h3{ font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(18px,1.5vw,26px); } .sechead__more{ font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--outline); } .sechead__more:hover{ color:var(--red); } .sidehead{ font-family:var(--f-head); font-weight:600; font-size:20px; border-bottom:2px solid var(--ink); padding-bottom:10px; margin-bottom:24px; } /* ================================= CARDS ================================= */ .card{ display:block; cursor:pointer; } .card__img{ position:relative; overflow:hidden; background:var(--surface-variant); } .card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); } .card:hover .card__img img{ transform:scale(1.05); } .card__title{ transition:color .2s; } .card:hover .card__title{ color:var(--red); } /* Em card com imagem de fundo o título já é branco: escurecer seria perder contraste. O hover marca com um sublinhado vermelho e mantém o branco. */ .card__img--over .card__title, .band--dark .card__title{ text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:3px; text-underline-offset:5px; transition:text-decoration-color .2s, color .2s; } .card:hover .card__img--over .card__title, .band--dark .card:hover .card__title{ color:#fff; text-decoration-color:var(--red); } .chip{ position:absolute; top:14px; left:14px; z-index:2; background:var(--red); color:#fff; padding:5px 10px; font-family:var(--f-label); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; } .chip--sm{ top:9px; left:9px; padding:3px 8px; font-size:9.5px; } .chip--flat{ position:static; display:inline-block; background:none; color:var(--red); padding:0; } .scrim{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.38) 45%,transparent 78%); } .card__over{ position:absolute; left:0; bottom:0; width:100%; padding:24px; color:#fff; z-index:2; } /* Cards com texto sobreposto: a caixa cresce se o texto for maior que a altura de referência — evita o título vazar em telas estreitas. */ .card__img--over{ display:grid; align-items:end; } .card__img--over > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .card__img--over .scrim{ z-index:1; } .card__img--over .card__over{ position:relative; z-index:2; } .card__over h2,.card__over h3{ color:#fff; } /* linha de meta com ícones */ .metaline{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; font-family:var(--f-body); font-size:13px; color:var(--outline); } .metaline--light{ color:rgba(255,255,255,.72); } .metaline i{ display:inline-flex; align-items:center; gap:6px; font-style:normal; } .metaline svg{ width:14px; height:14px; flex:none; } /* card horizontal (thumb + título) */ .hcard{ display:flex; gap:16px; align-items:flex-start; cursor:pointer; } .hcard__img{ width:96px; height:96px; flex:none; overflow:hidden; background:var(--surface-variant); } .hcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; } .hcard:hover .hcard__img img{ transform:scale(1.06); } .hcard:hover .card__title{ color:var(--red); } .hcard--wide .hcard__img{ width:96px; height:64px; } .hcard--center{ align-items:center; } .hcard--sq .hcard__img{ width:80px; height:80px; } /* ================================= HOME ================================== */ .home-main{ width:100%; padding-inline:var(--pad-x); padding-top:40px; padding-bottom:var(--section-gap); } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; } /* Bloco herói 3 / 6 / 3 */ .hero{ display:grid; grid-template-columns:3fr 6fr 3fr; gap:var(--gutter); margin-bottom:var(--section-gap); } .hero__side{ display:flex; flex-direction:column; gap:var(--gutter); } .hero__side .card__img{ min-height:250px; } .hero__main .card__img{ min-height:532px; } .hero__feat{ display:flex; flex-direction:column; gap:24px; } .hero__feat .feat-list{ display:flex; flex-direction:column; gap:24px; } .hero__feat .feat-list article + article{ border-top:1px solid rgba(116,120,120,.25); padding-top:24px; } /* Faixa "Últimas" com fundo próprio, sangrando de ponta a ponta */ .band{ width:100%; padding-inline:var(--pad-x); padding-block:56px; margin-bottom:var(--section-gap); } .band--off{ background:var(--surface-white); } .band--dark{ background:var(--ink); padding-block:52px; } .band--dark .card__title{ color:#fff; } .latest-lead{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding-bottom:36px; margin-bottom:36px; border-bottom:1px solid rgba(116,120,120,.28); } .latest-lead .card__img{ aspect-ratio:16/9; } /* Bloco inferior 8 / 4 */ .split{ display:grid; grid-template-columns:8fr 4fr; gap:var(--gutter); margin-bottom:80px; } .split__main{ display:flex; flex-direction:column; gap:64px; } .split__side{ display:flex; flex-direction:column; gap:44px; } .editor-hero .card__img{ aspect-ratio:21/9; } .urb-hero .card__img{ aspect-ratio:4/3; } /* Mais lidos numerado */ .ranklist{ display:flex; flex-direction:column; gap:22px; } .ranklist li{ display:flex; gap:18px; align-items:center; cursor:pointer; } .ranklist .num{ font-family:var(--f-head); font-weight:700; font-size:38px; line-height:1; color:var(--outline-variant); width:34px; text-align:center; flex:none; } .ranklist li:hover .card__title{ color:var(--red); } /* Redes */ .social{ display:flex; gap:12px; } .social a{ width:40px; height:40px; display:grid; place-items:center; background:var(--ink); color:#fff; transition:background .25s; } .social a:hover{ background:var(--red); } .social svg{ width:18px; height:18px; } /* Newsletter lateral */ .nlbox{ background:var(--surface-white); border:1px solid rgba(116,120,120,.3); padding:26px; } .nlbox h4{ font-size:20px; margin-bottom:8px; } .nlbox p{ font-size:14px; color:var(--ink-soft); margin-bottom:18px; } .nlbox form{ display:flex; flex-direction:column; gap:12px; } .nlbox input{ width:100%; padding:11px 13px; background:#fff; border:1px solid var(--outline-variant); outline:none; font-size:14px; } .nlbox input:focus{ border-color:var(--ink); } .nlbox--dark{ background:var(--ink); border:0; color:#fff; padding:32px; } .nlbox--dark h4,.nlbox--dark .label{ color:#fff; } .nlbox--dark p{ color:rgba(255,255,255,.72); } .nlbox--dark input{ background:transparent; border:0; border-bottom:1px solid var(--outline-variant); color:#fff; padding-inline:0; } .nlbox--dark input::placeholder{ color:var(--outline-variant); } .nlbox--dark input:focus{ border-bottom-color:#fff; } .nlbox--dark .btn{ background:#fff; color:var(--ink); } .nlbox--dark .btn:hover{ background:var(--red); color:#fff; } /* ================================ ARTIGO ================================= */ .article-main{ width:100%; padding-inline:var(--pad-x); padding-top:56px; padding-bottom:96px; } .breadcrumb{ font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--outline); margin-bottom:36px; display:flex; flex-wrap:wrap; gap:8px; } .breadcrumb a:hover{ color:var(--red); } .breadcrumb span{ opacity:.5; } .article-head{ max-width:900px; margin:0 auto 56px; text-align:center; } .article-head .eyebrow{ color:var(--red); display:block; margin-bottom:18px; } .article-head h1{ margin-bottom:28px; } .byline{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px; font-family:var(--f-body); font-size:14px; color:var(--ink-soft); } .byline__author{ display:flex; align-items:center; gap:12px; text-align:left; } .byline__author img{ width:48px; height:48px; object-fit:cover; flex:none; } .byline__author b{ display:block; color:var(--ink); font-weight:600; } .byline__sep{ width:1px; height:32px; background:var(--outline-variant); } .byline__facts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .byline__facts svg{ width:16px; height:16px; vertical-align:-3px; } .article-cover{ margin-bottom:56px; } .article-cover img{ width:100%; height:60vh; min-height:340px; object-fit:cover; } figcaption{ margin-top:14px; font-family:var(--f-body); font-size:13.5px; color:var(--outline); } .article-cover figcaption{ text-align:right; } .article-grid{ display:grid; grid-template-columns:8fr 4fr; gap:56px; } .article-body{ max-width:900px; font-family:var(--f-body); font-size:clamp(17px,1.25vw,20px); line-height:1.72; color:var(--ink); min-width:0; } .article-body > * + *{ margin-top:28px; } .article-body .standfirst{ font-family:var(--f-head); font-weight:600; font-size:clamp(21px,1.7vw,28px); line-height:1.35; color:var(--ink); } .article-body h2{ font-family:var(--f-head); font-weight:700; font-size:clamp(24px,2.1vw,34px); line-height:1.2; margin-top:52px; margin-bottom:22px; } .article-body h3{ font-family:var(--f-head); font-weight:600; font-size:clamp(20px,1.6vw,25px); margin-top:40px; margin-bottom:16px; } .article-body a:not(.btn):not(.wp-block-button__link){ color:var(--red); } .article-body ul,.article-body ol{ padding-left:24px; list-style:disc; } .article-body ol{ list-style:decimal; } .article-body li + li{ margin-top:10px; } .article-body figure{ margin-block:48px; } .article-body blockquote{ margin:52px 0; padding-left:26px; border-left:4px solid var(--red); } .article-body blockquote p{ font-family:var(--f-head); font-weight:600; font-style:italic; font-size:clamp(20px,1.7vw,27px); line-height:1.35; margin-bottom:16px; } .article-body cite{ font-family:var(--f-label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-style:normal; } .sourcebox{ margin-top:56px; padding:24px; background:var(--surface-white); border-left:3px solid var(--ink); } .sourcebox h4{ font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; } .sourcebox ul{ list-style:none; padding-left:0; } .sourcebox li{ position:relative; padding-left:18px; font-size:14px; line-height:1.6; } .sourcebox li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:1px; background:var(--red); } .sourcebox li + li{ margin-top:8px; } .article-side{ display:flex; flex-direction:column; gap:48px; min-width:0; } .article-side.is-sticky{ position:sticky; top:96px; align-self:start; } .widget--boxed{ background:var(--surface-white); border:1px solid var(--outline-variant); padding:32px; } .widget__title{ font-family:var(--f-label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--outline-variant); padding-bottom:16px; margin-bottom:24px; } .ranklist--red .num{ color:var(--red); opacity:.5; } /* Compartilhar */ .share{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-block:48px; padding-block:24px; border-block:1px solid rgba(116,120,120,.28); } .share__label{ font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--outline); margin-right:6px; } .share a,.share button{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--outline-variant); background:#fff; cursor:pointer; font-family:var(--f-body); font-size:13px; transition:background .2s,color .2s,border-color .2s; } .share a:hover,.share button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); } .share svg{ width:15px; height:15px; } /* Caixa do autor */ .authorbox{ display:flex; gap:22px; align-items:flex-start; padding:28px; background:var(--surface-white); border:1px solid rgba(116,120,120,.25); margin-block:48px; } .authorbox img{ width:76px; height:76px; object-fit:cover; flex:none; } .authorbox h4{ font-size:19px; margin-bottom:4px; } .authorbox .label{ color:var(--outline); display:block; margin-bottom:12px; } .authorbox p{ font-size:14.5px; color:var(--ink-soft); } /* CTA Apoiador no meio do artigo */ .cta-apoiador{ background:var(--ink); color:#fff; padding:40px; margin-block:56px; display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; } .cta-apoiador h3{ color:#fff; font-size:clamp(21px,1.8vw,28px); margin-bottom:10px; } .cta-apoiador p{ color:rgba(255,255,255,.74); font-size:15px; max-width:52ch; } .cta-apoiador .label{ color:var(--red); display:block; margin-bottom:12px; } .cta-apoiador .btn{ background:#fff; color:var(--ink); flex:none; } .cta-apoiador .btn:hover{ background:var(--red); color:#fff; } /* =============================== COMENTÁRIOS ============================= */ .comments{ margin-top:80px; padding-top:48px; border-top:2px solid var(--ink); } .comments__title{ font-family:var(--f-head); font-weight:600; font-size:clamp(20px,1.7vw,27px); margin-bottom:36px; } .commentlist li{ list-style:none; } .commentlist > li + li{ margin-top:32px; padding-top:32px; border-top:1px solid rgba(116,120,120,.25); } .commentlist .children{ margin-top:28px; margin-left:clamp(20px,3vw,56px); padding-left:24px; border-left:2px solid var(--surface-variant); } .commentlist .children li + li{ margin-top:24px; } .comment-body{ display:flex; gap:18px; align-items:flex-start; } .comment-body img,.comment-body .avatar{ width:48px; height:48px; object-fit:cover; flex:none; } .comment-author{ font-family:var(--f-head); font-weight:600; font-size:15.5px; } .comment-meta{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--outline); margin-bottom:12px; display:block; } .comment-text{ font-size:15px; color:var(--ink-soft); } .comment-reply-link{ display:inline-block; margin-top:12px; font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); } .comment-respond{ margin-top:48px; background:var(--surface-white); border:1px solid rgba(116,120,120,.25); padding:32px; } .comment-reply-title{ font-family:var(--f-head); font-weight:600; font-size:20px; margin-bottom:8px; } .comment-form{ display:grid; gap:16px; margin-top:20px; } .comment-form p{ margin:0; } .comment-form label{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--outline); display:block; margin-bottom:7px; } .comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{ width:100%; padding:11px 13px; border:1px solid var(--outline-variant); background:#fff; outline:none; font-size:15px; font-family:var(--f-body); } .comment-form textarea{ min-height:150px; resize:vertical; } .comment-form input:focus,.comment-form textarea:focus{ border-color:var(--ink); } .comment-form .form-submit{ margin:0; } .comment-form input[type=submit]{ border:0; cursor:pointer; background:var(--ink); color:#fff; font-family:var(--f-label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:14px 30px; transition:background .25s; } .comment-form input[type=submit]:hover{ background:var(--red); } .comment-form-cookies-consent{ display:flex; align-items:center; gap:10px; } .comment-form-cookies-consent label{ margin:0; text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:13px; } @media (min-width:760px){ .comment-form{ grid-template-columns:1fr 1fr; } .comment-form-comment,.comment-form-cookies-consent,.form-submit,.comment-notes,.comment-form-url{ grid-column:1 / -1; } } /* Relacionados */ .related{ margin-top:80px; } /* ================================= RODAPÉ =============================== */ .sitefooter{ width:100%; background:var(--ink); color:var(--surface-variant); } .sitefooter__top{ padding-inline:var(--pad-x); padding-block:72px; display:grid; grid-template-columns:repeat(4,1fr); gap:48px; border-bottom:1px solid rgba(226,226,226,.18); } .sitefooter__brand{ font-family:var(--f-head); font-weight:700; font-size:clamp(24px,2.1vw,32px); line-height:1.1; letter-spacing:-.03em; text-transform:uppercase; color:#fff; margin-bottom:24px; } .sitefooter p{ font-size:14px; color:rgba(226,226,226,.78); } .sitefooter p + p{ margin-top:20px; color:rgba(226,226,226,.58); } .sitefooter h5{ font-family:var(--f-head); font-weight:600; font-size:17px; color:#fff; border-bottom:1px solid rgba(226,226,226,.18); padding-bottom:10px; margin-bottom:22px; } .footlist{ display:flex; flex-direction:column; gap:12px; font-size:14px; } .footlist a{ display:flex; align-items:center; gap:10px; color:rgba(226,226,226,.78); transition:color .2s; } .footlist a:hover{ color:#fff; } .footlist a::before{ content:""; width:4px; height:4px; background:var(--red); flex:none; } .sitefooter__bottom{ padding-inline:var(--pad-x); padding-block:26px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; } .sitefooter__bottom p{ font-size:13.5px; color:rgba(226,226,226,.5); } .sitefooter__social{ display:flex; gap:16px; } .sitefooter__social a{ color:rgba(226,226,226,.5); transition:color .2s; } .sitefooter__social a:hover{ color:#fff; } .sitefooter__social svg{ width:19px; height:19px; } /* ============================= MODAL APOIADOR =========================== */ .modal{ position:fixed; inset:0; z-index:200; display:none; } .modal.is-open{ display:block; } .modal__scrim{ position:absolute; inset:0; background:rgba(10,10,10,.72); backdrop-filter:blur(3px); } .modal__panel{ position:relative; z-index:2; width:min(920px,calc(100% - 32px)); max-height:min(88vh,900px); overflow:auto; margin:6vh auto 0; background:var(--surface-white); border:1px solid var(--outline-variant); display:grid; grid-template-columns:1fr 1fr; } .modal__aside{ background:var(--ink); color:#fff; padding:44px 40px; } .modal__aside .label{ color:var(--red); display:block; margin-bottom:18px; } .modal__aside h2{ color:#fff; font-size:clamp(24px,2vw,32px); line-height:1.15; margin-bottom:16px; } .modal__aside p{ color:rgba(255,255,255,.72); font-size:14.5px; } .modal__price{ margin-top:32px; padding-top:26px; border-top:1px solid rgba(255,255,255,.2); } .modal__price b{ font-family:var(--f-head); font-size:44px; font-weight:700; line-height:1; letter-spacing:-.03em; } .modal__price span{ font-family:var(--f-body); font-size:14px; color:rgba(255,255,255,.6); } .modal__body{ padding:44px 40px; } .modal__body h3{ font-size:19px; margin-bottom:20px; } .benefits{ display:flex; flex-direction:column; gap:14px; margin-bottom:30px; } .benefits li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); } .benefits li::before{ content:""; width:8px; height:8px; margin-top:7px; background:var(--red); flex:none; } .modal__note{ margin-top:16px; font-size:12.5px; color:var(--outline); text-align:center; } .modal__close{ position:absolute; top:14px; right:14px; z-index:3; background:var(--surface-white); border:1px solid var(--outline-variant); cursor:pointer; width:36px; height:36px; display:grid; place-items:center; } .modal__close:hover{ background:var(--ink); color:#fff; } body.modal-open{ overflow:hidden; } /* ============================== ARQUIVO/LISTAS ========================== */ .page-hero{ padding-inline:var(--pad-x); padding-block:56px 40px; background:var(--surface-white); border-bottom:1px solid rgba(116,120,120,.25); } .page-hero h1{ font-size:clamp(30px,3.4vw,52px); letter-spacing:-.02em; } .page-hero p{ margin-top:14px; color:var(--ink-soft); max-width:70ch; } .archive-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px var(--gutter); } .archive-grid .card__img{ aspect-ratio:16/9; margin-bottom:16px; } .pagination{ display:flex; gap:10px; flex-wrap:wrap; margin-top:64px; } .pagination .page-numbers{ padding:11px 17px; border:1px solid var(--outline-variant); background:#fff; font-family:var(--f-label); font-size:12px; } .pagination .page-numbers.current,.pagination .page-numbers:hover{ background:var(--ink); color:#fff; border-color:var(--ink); } /* Selo Ao Vivo */ .live{ display:inline-flex; align-items:center; gap:7px; background:var(--red); color:#fff; padding:5px 11px; font-family:var(--f-label); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; } .live::before{ content:""; width:7px; height:7px; background:#fff; animation:pulse 1.4s infinite; } @keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } } /* Aviso de placeholder de anúncio (só admin) */ .ad-admin-note{ font-family:var(--f-label); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin-top:8px; } .screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip-link{ position:absolute; left:-9999px; } .skip-link:focus{ left:12px; top:12px; z-index:999; background:var(--ink); color:#fff; padding:10px 16px; } /* ============================== RESPONSIVO ============================== */ @media (max-width:1280px){ .grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:1200px){ .hero{ grid-template-columns:4fr 8fr; } .hero__feat{ grid-column:1 / -1; } .hero__feat .feat-list{ display:grid; grid-template-columns:repeat(3,1fr); } .hero__feat .feat-list article + article{ border-top:0; padding-top:0; } .article-grid{ grid-template-columns:7fr 5fr; gap:40px; } } @media (max-width:1024px){ .masthead__in{ grid-template-columns:auto 1fr auto; } .masthead__nav{ display:none; } .brand{ justify-self:start; } .burger{ display:block; } .stickybar__nav{ display:none; } .split{ grid-template-columns:1fr; } .article-grid{ grid-template-columns:1fr; } .article-side.is-sticky{ position:static; } .archive-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:900px){ .hero{ grid-template-columns:1fr; } .hero__main .card__img{ min-height:300px; } .hero__side{ flex-direction:row; } .hero__side > *{ flex:1; } .hero__feat .feat-list{ grid-template-columns:1fr; gap:20px; } .hero__feat .feat-list article + article{ border-top:1px solid rgba(116,120,120,.25); padding-top:20px; } .latest-lead{ grid-template-columns:1fr; gap:24px; } .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:repeat(2,1fr); } .sitefooter__top{ grid-template-columns:repeat(2,1fr); gap:36px; } .modal__panel{ grid-template-columns:1fr; } .article-cover img{ height:44vh; } .cta-apoiador{ padding:28px; } } @media (max-width:600px){ .masthead__in{ grid-template-columns:1fr auto; row-gap:14px; } .masthead__tools{ grid-column:1 / -1; } .searchbox{ width:100%; } .hero__side{ flex-direction:column; } .grid-4{ grid-template-columns:1fr; } .archive-grid{ grid-template-columns:1fr; } .sitefooter__top{ grid-template-columns:1fr; } .hcard__img{ width:84px; height:84px; } .article-head{ text-align:left; } .byline{ justify-content:flex-start; } .byline__sep{ display:none; } } /* Menu mobile */ .mobilenav{ display:none; background:var(--surface-white); border-bottom:1px solid var(--outline-variant); padding:8px var(--pad-x) 20px; } .mobilenav.is-open{ display:block; } .mobilenav a{ display:block; padding:12px 0; border-bottom:1px solid rgba(116,120,120,.18); font-family:var(--f-body); font-weight:500; font-size:15px; } /* ========================================================================== Compatibilidade com o HTML que o WordPress gera (menus em
  • , paginação, legendas, alinhamentos de bloco, avatares) ========================================================================== */ /* Menus: wp_nav_menu envolve cada link em
  • */ .masthead__nav li, .stickybar__nav li, .mobilenav li{ list-style:none; margin:0; } .masthead__nav ul,.stickybar__nav ul,.mobilenav ul{ display:contents; } .mobilenav li a{ display:block; } .masthead__nav .current-menu-item > a, .masthead__nav .current_page_item > a{ color:var(--ink); } .stickybar__nav .current-menu-item > a{ color:var(--red); font-weight:700; border-bottom:2px solid var(--red); padding-bottom:3px; } /* Primeiro parágrafo do artigo vira o "standfirst" automaticamente */ .article-body > p:first-of-type, .article-body > .wp-block-paragraph:first-of-type{ font-family:var(--f-head); font-weight:600; font-size:clamp(21px,1.7vw,28px); line-height:1.35; color:var(--ink); } /* Paginação — the_posts_pagination envolve os links em .nav-links */ .pagination{ display:block; } .pagination .nav-links{ display:flex; gap:10px; flex-wrap:wrap; } .pagination .screen-reader-text{ position:absolute!important; } /* Legendas e imagens de bloco */ .wp-caption{ max-width:100%; } .wp-caption-text, .wp-block-image figcaption, .wp-element-caption{ margin-top:14px; font-family:var(--f-body); font-size:13.5px; color:var(--outline); } .wp-block-image img{ width:100%; height:auto; } /* Alinhamentos */ .alignnone,.aligncenter{ display:block; margin-inline:auto; } .alignleft{ float:left; margin:6px 28px 20px 0; max-width:50%; } .alignright{ float:right; margin:6px 0 20px 28px; max-width:50%; } .alignwide{ width:min(100%,1100px); margin-inline:auto; } .alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); } .article-body .alignfull img{ width:100%; } /* Blocos comuns */ .wp-block-quote{ margin:52px 0; padding-left:26px; border-left:4px solid var(--red); } .wp-block-quote p{ font-family:var(--f-head); font-weight:600; font-style:italic; font-size:clamp(20px,1.7vw,27px); line-height:1.35; } .wp-block-quote cite{ font-family:var(--f-label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-style:normal; } .wp-block-pullquote{ border-block:2px solid var(--ink); padding-block:32px; text-align:center; } .wp-block-separator{ border:0; border-top:1px solid var(--outline-variant); margin-block:48px; } .wp-block-table table{ width:100%; border-collapse:collapse; font-size:15px; } .wp-block-table th,.wp-block-table td{ border:1px solid var(--outline-variant); padding:11px 14px; text-align:left; } .wp-block-table th{ background:var(--surface-white); font-family:var(--f-head); font-weight:600; } .wp-block-code,pre{ background:var(--ink); color:#fff; padding:22px; overflow:auto; font-family:var(--f-label); font-size:13.5px; line-height:1.6; } .wp-block-button__link{ display:inline-block; background:var(--ink); color:#fff; border-radius:0; font-family:var(--f-label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:13px 24px; } .wp-block-button__link:hover{ background:var(--red); } .wp-block-embed iframe,.article-body iframe{ max-width:100%; } /* Avatares */ img.avatar{ display:block; } .byline__author img.avatar{ width:48px; height:48px; object-fit:cover; } .authorbox img.avatar{ width:76px; height:76px; object-fit:cover; } /* Listas do rodapé geradas por wp_nav_menu/wp_list_pages */ .footlist li{ list-style:none; } .footlist .sub-menu{ display:none; } /* Post fixado / campo obrigatório */ .sticky .card__title::after{ content:" ★"; color:var(--red); } .required{ color:var(--red); } /* Barra de administração não deve cobrir a barra fixa */ body.admin-bar .stickybar{ top:32px; } @media (max-width:782px){ body.admin-bar .stickybar{ top:46px; } } /* Editor do WordPress (visual próximo do site) */ .editor-styles-wrapper{ background:var(--surface); } /* ========================================================================== Busca sob demanda — o campo só existe depois de clicar na lupa ========================================================================== */ .searchpanel{ display:grid; grid-template-rows:0fr; background:var(--surface-white); border-bottom:1px solid var(--outline-variant); transition:grid-template-rows .28s ease; } .searchpanel.is-open{ grid-template-rows:1fr; } .searchpanel__in{ overflow:hidden; } .searchpanel .wrap{ padding-block:0; } .searchpanel.is-open .wrap{ padding-block:20px; } .searchpanel .searchbox{ width:100%; max-width:720px; margin-inline:auto; } .searchpanel .searchbox input{ padding-block:13px; font-size:15px; } .icon-btn[aria-expanded="true"]{ color:var(--red); } /* ========================================================================== Mostrar mais ========================================================================== */ .loadmore{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:56px; } .loadmore__btn{ min-width:280px; padding:18px 32px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; font-family:var(--f-label); font-size:12px; letter-spacing:.12em; text-transform:uppercase; transition:background .22s,color .22s,border-color .22s; } .loadmore__btn:hover{ background:var(--ink); color:#fff; } .loadmore__btn[disabled]{ opacity:.55; cursor:default; } .loadmore__btn.is-loading{ color:transparent; position:relative; } .loadmore__btn.is-loading::after{ content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border:2px solid var(--ink); border-top-color:transparent; border-radius:50%; animation:fdb-spin .7s linear infinite; } @keyframes fdb-spin{ to{ transform:rotate(360deg); } } .loadmore__count{ font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--outline); } .loadmore__end{ font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--outline); padding-block:12px; } /* ========================================================================== Avatares — círculo perfeito em qualquer proporção de imagem ========================================================================== */ .byline__author img, .byline__author img.avatar, .authorbox img, .authorbox img.avatar, .comment-body img, .comment-body .avatar, img.avatar{ border-radius:50%; aspect-ratio:1/1; object-fit:cover; flex:none; } .byline__author img,.byline__author img.avatar{ width:48px; height:48px; } .authorbox img,.authorbox img.avatar{ width:76px; height:76px; } .comment-body img,.comment-body .avatar{ width:48px; height:48px; } /* ========================================================================== Resumo nos cards — sempre duas linhas, cortadas com reticências ========================================================================== */ .card__excerpt{ font-family:var(--f-body); font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2; overflow:hidden; } .card__excerpt--light{ color:rgba(255,255,255,.8); } .card__excerpt--3{ -webkit-line-clamp:3; line-clamp:3; } .hcard .card__excerpt{ font-size:13.5px; } .card__over .card__excerpt{ color:rgba(255,255,255,.82); font-size:15px; margin-bottom:14px; } /* Respiro entre o bloco de anúncio e o conteúdo seguinte na primeira dobra */ .home-main > .ad{ margin-block:16px 64px; } .band + .wrap > .ad{ margin-bottom:var(--section-gap); } /* ========================================================================== Plantão — faixa de manchetes em looping contínuo ========================================================================== */ .ticker{ display:flex; align-items:stretch; width:100%; background:var(--ink); color:#fff; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.08); } .ticker__label{ flex:none; display:flex; align-items:center; gap:9px; background:var(--red); color:#fff; padding:0 clamp(14px,2vw,22px); font-family:var(--f-label); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; } .ticker__label .dot{ width:8px; height:8px; border-radius:50%; background:#fff; animation:fdb-blink 1.25s ease-in-out infinite; } .ticker__view{ flex:1; min-width:0; overflow:hidden; } /* Trava de segurança: nenhuma barra de rolagem pode nascer aqui. */ .ticker__view::-webkit-scrollbar{ display:none; width:0; height:0; } .ticker__view{ scrollbar-width:none; -ms-overflow-style:none; } .ticker__track{ display:flex; width:max-content; will-change:transform; animation:fdb-marquee var(--ticker-duration, 60s) linear infinite; } /* Enquanto o JS mede a faixa, nada se move — evita um salto no primeiro quadro. */ .ticker:not(.is-ready) .ticker__track{ animation:none; } .ticker:hover .ticker__track, .ticker:focus-within .ticker__track, .ticker.is-paused .ticker__track{ animation-play-state:paused; } .ticker__row{ display:flex; align-items:center; flex:none; } .ticker__entry{ display:inline-flex; align-items:center; gap:12px; white-space:nowrap; padding:13px clamp(18px,1.8vw,28px); border-left:1px solid rgba(255,255,255,.15); } .ticker__date{ font-family:var(--f-label); font-size:11px; font-weight:600; letter-spacing:.07em; color:rgba(255,255,255,.45); flex:none; /* fora do link: não recebe hover, não é clicável */ pointer-events:none; user-select:none; } .ticker__item{ font-family:var(--f-body); font-size:14px; color:rgba(255,255,255,.85); transition:color .2s; white-space:nowrap; } .ticker__item:hover{ color:#fff; } @keyframes fdb-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @keyframes fdb-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.15; } } @media (max-width:700px){ .ticker__label span:last-child{ display:none; } } /* ========================================================================== Selos dinâmicos — Novo e Ao vivo ========================================================================== */ .chipbar{ position:absolute; top:14px; left:14px; z-index:3; display:flex; flex-wrap:wrap; gap:7px; } .chipbar .chip{ position:static; top:auto; left:auto; } .chipbar--sm{ top:9px; left:9px; } .badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; font-family:var(--f-label); font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; } .badge--new{ background:#fff; color:var(--ink); } .badge--new::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); animation:fdb-blink 1.25s infinite; } .badge--live{ background:var(--red); color:#fff; } .badge--live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:fdb-blink 1.1s infinite; } .badge-inline{ margin-bottom:8px; } /* ========================================================================== Anúncios que fecham os vãos das colunas ========================================================================== */ .ad__slot--halfpage{ width:300px; height:600px; } .ad__slot--square{ width:300px; height:250px; } /* A última unidade de cada coluna é empurrada para a base: onde uma coluna é mais curta que a outra, o anúncio ocupa a sobra em vez de deixar branco. */ .split__main > .ad:last-child, .split__side > .ad:last-child{ margin-top:auto; } .split__side{ min-height:100%; } @media (max-width:1024px){ .split__main > .ad:last-child, .split__side > .ad:last-child{ margin-top:0; } .ad__slot--halfpage{ width:300px; height:250px; } } /* ========================================================================== Barra de progresso de leitura ========================================================================== */ .readbar{ position:fixed; inset-block-start:0; inset-inline-start:0; z-index:120; height:3px; width:0; background:var(--red); transition:width .08s linear; pointer-events:none; } body.admin-bar .readbar{ inset-block-start:32px; } @media (max-width:782px){ body.admin-bar .readbar{ inset-block-start:46px; } } /* ========================================================================== Acessibilidade e acabamento ========================================================================== */ :where(a,button,input,textarea,select,[tabindex]):focus-visible{ outline:3px solid var(--red); outline-offset:2px; } .card a:focus-visible{ outline-offset:4px; } @media (prefers-reduced-motion: reduce){ /* Regra estreita de propósito. Transição disparada pelo próprio usuário — zoom da imagem ao passar o mouse, sublinhado que preenche — não é o que incomoda quem ativa esta preferência; o que incomoda é movimento que acontece sozinho. Então desligamos só o automático e mantemos o resto. */ html{ scroll-behavior:auto !important; } .ticker__track{ animation-duration:var(--ticker-slow, 180s) !important; } .ticker__dot{ animation-duration:2.6s !important; } .badge--new::before,.badge--live::before,.live::before{ animation-duration:2.6s !important; } } } /* ========================================================================== Impressão — o artigo sai limpo no papel e no PDF ========================================================================== */ @media print{ .masthead,.stickybar,.ticker,.searchpanel,.ad,.sitefooter,.share,.modal, .article-side,.related,.comments,.loadmore,.cta-apoiador,.readbar,.mobilenav{ display:none !important; } body{ background:#fff; color:#000; font-size:11.5pt; } .article-grid{ display:block; } .article-body{ max-width:none; font-size:11.5pt; } .article-head{ text-align:left; margin-bottom:24pt; } .article-cover img{ height:auto; max-height:8cm; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; word-break:break-all; } h1,h2,h3{ break-after:avoid; } figure,blockquote{ break-inside:avoid; } } /* Navegação entre publicações */ .postnav{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-block:56px; padding-block:28px; border-block:1px solid rgba(116,120,120,.28); } .postnav__item{ display:flex; flex-direction:column; gap:10px; } .postnav__item .label{ color:var(--outline); } .postnav__item strong{ transition:color .2s; } .postnav__item:hover strong{ color:var(--red); } .postnav__item--next{ text-align:right; align-items:flex-end; } @media (max-width:700px){ .postnav{ grid-template-columns:1fr; } .postnav__item--next{ text-align:left; align-items:flex-start; } } /* ========================================================================== Colunas do bloco de destaque esticam até a altura da mais alta. Sem isso, o resumo na coluna "Em Destaque" alonga a linha e as outras duas deixam um vão branco embaixo. ========================================================================== */ .hero{ align-items:stretch; } .hero__side, .hero__main{ display:flex; flex-direction:column; } .hero__side > .card, .hero__main > .card{ flex:1; display:flex; } .hero__side > .card > a, .hero__main > .card > a{ flex:1; display:flex; flex-direction:column; } .hero__side .card__img, .hero__main .card__img{ flex:1; } .hero__feat{ display:flex; flex-direction:column; } .hero__feat .feat-list{ flex:1; } /* Em telas onde o herói vira coluna única, volta ao comportamento natural */ @media (max-width:900px){ .hero__side > .card, .hero__main > .card{ flex:none; width:100%; } /* flex:none sozinho faz a base ser `auto`, ou seja, a largura do conteúdo — era isso que empurrava o card para fora da tela. O width:100% amarra. */ .hero__side .card__img, .hero__main .card__img{ flex:none; width:100%; } } /* A barra fixa não pode ser mais larga que a tela: como é `fixed`, o excesso vira rolagem horizontal no documento inteiro. */ .stickybar{ max-width:100vw; overflow:hidden; } .stickybar__left{ min-width:0; } .stickybar__brand{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:600px){ .stickybar__right .btn{ display:none; } } /* Itens de flex/grid nascem com min-width:auto e se recusam a encolher abaixo do próprio conteúdo. Nos cards do herói isso empurrava a imagem para além da tela no celular. */ .hero__side > .card, .hero__main > .card, .hero__side > .card > a, .hero__main > .card > a, .hero__side .card__img, .hero__main .card__img, .card__img--over, .card__img--over > *, .hcard > div, .split__main, .split__side{ min-width:0; } .card__over{ max-width:100%; } .metaline i{ min-width:0; } /* ========================================================================== Seleção de texto e barra de rolagem na identidade do site ========================================================================== */ ::selection{ background:#f4bcbf; color:var(--ink); } ::-moz-selection{ background:#f4bcbf; color:var(--ink); } html{ scrollbar-width:thin; scrollbar-color:#bb1919 var(--surface-variant); } ::-webkit-scrollbar{ width:12px; height:12px; } ::-webkit-scrollbar-track{ background:var(--surface-variant); } ::-webkit-scrollbar-thumb{ background:#bb1919; border:3px solid var(--surface-variant); border-radius:0; } ::-webkit-scrollbar-thumb:hover{ background:#8f1313; } ::-webkit-scrollbar-corner{ background:var(--surface-variant); } /* Áreas escuras ganham trilho escuro para a barra não brigar com o fundo */ .band--dark,.sitefooter,.modal__aside,.nlbox--dark{ scrollbar-color:#bb1919 #2a2a2a; } /* ========================================================================== Tipografia das etiquetas e do menu — declarada de forma explícita para não depender de herança em nenhum ponto ========================================================================== */ .chip, .chip--flat, .badge, .label, .ad__label, .ticker__label, .sechead__more, .comment-meta, .comment-reply-link, .share__label, .breadcrumb, .loadmore__btn, .loadmore__count, .loadmore__end, .widget__title, .btn, .pagination .page-numbers, .stickybar__nav a{ font-family:var(--f-label); font-weight:600; font-feature-settings:"tnum" 1; } .chip{ font-size:10.5px; letter-spacing:.085em; } .chip--sm{ font-size:9.5px; } .masthead__nav a, .mobilenav a, .footlist a, .sitefooter p, .meta,.meta-xs{ font-family:var(--f-body); } .masthead__nav a{ font-weight:500; letter-spacing:-.005em; } .brand,.stickybar__brand,.sitefooter__brand{ font-family:var(--f-head); } /* ========================================================================== Sublinhado que preenche da esquerda para a direita Feito com background-image em vez de text-decoration porque só assim dá para animar a largura. O `background-position: left` faz a linha crescer da esquerda para a direita ao entrar e recuar da direita para a esquerda ao sair — a linha desfaz o mesmo caminho que percorreu. Sem jQuery de propósito: são duas propriedades compostas na GPU, roda a 60 fps e não custa 90 KB de biblioteca no caminho crítico. ========================================================================== */ .fdb-underline, .article-body a:not(.btn):not(.wp-block-button__link), .ticker__item, .postnav__item strong, .sechead__more, .breadcrumb a, .comment-reply-link, .byline__author b a, .authorbox h4 a{ text-decoration:none; background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:left calc(100% - .08em); background-size:0% 2px; transition:background-size .38s cubic-bezier(.22,.61,.36,1), color .25s ease; padding-bottom:.06em; } .fdb-underline:hover,.fdb-underline:focus-visible, .article-body a:not(.btn):not(.wp-block-button__link):hover, .article-body a:not(.btn):not(.wp-block-button__link):focus-visible, .ticker__item:hover,.ticker__item:focus-visible, .postnav__item:hover strong, .sechead__more:hover, .breadcrumb a:hover, .comment-reply-link:hover, .byline__author b a:hover, .authorbox h4 a:hover{ background-size:100% 2px; } /* No plantão a linha é vermelha, para destacar do texto claro */ .ticker__item{ background-image:linear-gradient(var(--red), var(--red)); } /* Links dentro do texto ficam com traço mais grosso, é o alvo principal */ .article-body a:not(.btn):not(.wp-block-button__link){ background-size:0% 2px; } .article-body a:not(.btn):not(.wp-block-button__link):hover{ background-size:100% 2px; } /* O efeito não faz sentido em link que embrulha imagem ou card inteiro */ .card a,.hcard a,.hcard__img,.card__img, .article-body a:has(img), .article-body figure a{ background-image:none; padding-bottom:0; } /* ========================================================================== Zoom suave nas imagens em destaque Escala e brilho juntos, com curva de saída longa: entra rápido e assenta devagar, que é o que dá a sensação de movimento "caro" em vez de mecânico. ========================================================================== */ .card__img img, .hcard__img img{ transform-origin:center center; transition:transform .85s cubic-bezier(.16,.84,.34,1), filter .55s ease; will-change:transform; backface-visibility:hidden; } .card:hover .card__img img, .card:focus-within .card__img img{ transform:scale(1.065); filter:brightness(1.04); } .hcard:hover .hcard__img img, .hcard:focus-within .hcard__img img{ transform:scale(1.08); } /* Card com texto sobreposto: o gradiente escurece um pouco mais no hover, para o título continuar legível enquanto a foto se aproxima. */ .card__img--over .scrim{ transition:opacity .5s ease; } .card:hover .card__img--over .scrim{ opacity:1; } /* Imagem de capa do artigo e miniaturas da lateral acompanham */ .article-cover img{ transition:transform 1.1s cubic-bezier(.16,.84,.34,1); } .article-cover:hover img{ transform:scale(1.02); } /* ========================================================================== AJUSTES FINOS — v1.2 ========================================================================== */ /* -------------------------------------------------------------------------- 1. Sublinhado padrão do WordPress O core injeta `:root :where(a:where(:not(.wp-element-button))){text-decoration: underline}` junto dos estilos globais. Especificidade (0,1,0) — vencia o `a{text-decoration:none}` do tema, e por isso links dentro do post apareciam sublinhados mesmo com a regra do tema no lugar. `:root a:where(...)` sobe para (0,1,1) e ganha, sem depender da ordem de carregamento. -------------------------------------------------------------------------- */ :root a:where(:not(.wp-element-button)), :root a:where(:not(.wp-element-button)):hover, :root a:where(:not(.wp-element-button)):focus{ text-decoration:none; } /* -------------------------------------------------------------------------- 2. O traço que preenche passa a valer para todo link de leitura -------------------------------------------------------------------------- */ .postnav__item, .authorbox h4 a, .byline__author b a, .article-body .sourcebox a, .logged-in-as a, .comment-author a, .widget a, .split__side .ranklist a, .article-side .ranklist a{ text-decoration:none; background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:left calc(100% - .08em); background-size:0% 2px; transition:background-size .38s cubic-bezier(.22,.61,.36,1), color .25s ease; } .postnav__item:hover, .authorbox h4 a:hover, .byline__author b a:hover, .article-body .sourcebox a:hover, .logged-in-as a:hover, .comment-author a:hover, .widget a:hover, .split__side .ranklist a:hover, .article-side .ranklist a:hover{ background-size:100% 2px; } /* O do anterior/próximo é filho do : o traço fica no */ .postnav__item strong{ background-image:none; } /* Botões de compartilhar são caixas com borda — traço ali polui */ .share a,.share button{ background-image:none !important; text-decoration:none !important; } /* Título de card ganha o mesmo traço, no lugar do sublinhado que trocava de cor */ .card__img--over .card__title, .band--dark .card__title{ text-decoration:none; background-image:linear-gradient(var(--red), var(--red)); background-repeat:no-repeat; background-position:left calc(100% - .04em); background-size:0% 3px; transition:background-size .42s cubic-bezier(.22,.61,.36,1), color .25s ease; display:inline; padding-bottom:.05em; } .card:hover .card__img--over .card__title, .card:focus-within .card__img--over .card__title, .band--dark .card:hover .card__title{ background-size:100% 3px; color:#fff; } /* Card claro: o traço acompanha a cor do texto no hover */ .card__title:not(.card__img--over .card__title){ transition:color .25s ease; } /* -------------------------------------------------------------------------- 3. Barra lateral — respiro, ícone e hierarquia -------------------------------------------------------------------------- */ .widget{ margin-bottom:0; } .widget + .widget{ margin-top:8px; } .widget ul{ display:flex; flex-direction:column; gap:2px; } .widget li{ list-style:none; } /* Lista de links (posts recentes, assuntos, páginas) */ .widget_recent_entries ul li, .widget_categories ul li, .widget_pages ul li, .widget_nav_menu ul li, .widget_meta ul li{ display:flex; align-items:flex-start; gap:12px; padding-block:13px; border-bottom:1px solid rgba(116,120,120,.18); font-size:15px; line-height:1.45; } .widget_recent_entries ul li:last-child, .widget_categories ul li:last-child, .widget_pages ul li:last-child, .widget_nav_menu ul li:last-child, .widget_meta ul li:last-child{ border-bottom:0; padding-bottom:0; } /* Marcador à frente de cada item */ .widget_recent_entries ul li::before, .widget_categories ul li::before, .widget_pages ul li::before, .widget_nav_menu ul li::before, .widget_meta ul li::before{ content:""; flex:none; width:14px; height:14px; margin-top:.28em; background-color:var(--red); -webkit-mask:var(--fdb-arrow) center/14px 14px no-repeat; mask:var(--fdb-arrow) center/14px 14px no-repeat; } :root{ --fdb-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); --fdb-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); } /* Posts recentes usam o ícone de calendário, que descreve melhor o item */ .widget_recent_entries ul li::before{ -webkit-mask-image:var(--fdb-cal); mask-image:var(--fdb-cal); background-color:var(--outline); } .widget_recent_entries ul li:hover::before, .widget_recent_entries ul li:focus-within::before{ background-color:var(--red); } .widget_recent_entries .post-date{ display:block; margin-top:5px; font-family:var(--f-label); font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--outline); } .widget_categories .count{ margin-left:auto; padding-left:10px; font-family:var(--f-label); font-size:11.5px; color:var(--outline); } /* -------------------------------------------------------------------------- 4. Formulário de comentário — discreto e no mesmo corpo do resto -------------------------------------------------------------------------- */ .comment-respond{ margin-top:44px; padding:26px 28px; background:transparent; border:1px solid rgba(116,120,120,.22); } .comment-reply-title{ font-size:18px; margin-bottom:4px; } .comment-respond .comment-notes, .comment-respond .logged-in-as, .comment-respond .meta{ font-family:var(--f-body); font-size:13px; line-height:1.55; color:var(--outline); margin:0; } .comment-respond .logged-in-as{ margin-bottom:2px; } .comment-respond .required-field-message{ font-size:12px; color:var(--outline); } .comment-form{ gap:14px; margin-top:16px; } .comment-form label{ font-size:10px; color:var(--outline); } .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea{ font-size:14.5px; padding:10px 12px; } .comment-form textarea{ min-height:118px; } .comment-form input[type=submit]{ font-size:11px; padding:12px 24px; } .comment-form-cookies-consent label{ font-size:12.5px; color:var(--outline); } /* ========================================================================== AJUSTES FINOS — v1.3 ========================================================================== */ /* -------------------------------------------------------------------------- 1. Categoria e selo na mesma altura Os dois tinham corpo de fonte diferente (10,5 e 10 px), então a caixa de cada um fechava numa altura. Agora a altura é fixada e o texto é centralizado dentro dela — ficam iguais em qualquer combinação. -------------------------------------------------------------------------- */ .chipbar{ align-items:center; } .chip, .badge{ display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 10px; line-height:1; font-size:10.5px; letter-spacing:.085em; box-sizing:border-box; } .chip--sm, .chipbar--sm .chip, .chipbar--sm .badge{ height:21px; padding:0 8px; font-size:9.5px; } .badge::before{ margin-right:2px; } .chip--flat{ height:auto; padding:0; } .badge-inline{ margin-bottom:10px; } /* -------------------------------------------------------------------------- 2. Traço animado como padrão global Regra única para todo link de texto do site. As exceções são os links que embrulham imagem ou card inteiro, e os botões — nesses o traço não faz sentido. Em título de card o traço vai no , para acompanhar a largura do texto e não a da caixa. -------------------------------------------------------------------------- */ /* A pilha de :not() do repouso precisa se repetir no hover. Na versão anterior o hover tinha uma :not() a menos, ficou com especificidade MENOR que o repouso, e por isso `background-size:0%` vencia sempre — o traço existia mas nunca crescia, em todo o site. A cor sai de --u-color, que cada contexto pode redefinir sem entrar em disputa de especificidade. */ :root a:where(:not(.wp-element-button)):not(.btn):not(.wp-block-button__link):not(.chip), .tline{ text-decoration:none; background-image:linear-gradient(var(--u-color, currentColor), var(--u-color, currentColor)); background-repeat:no-repeat; background-position:left calc(100% - .08em); background-size:0% 2px; transition:background-size .38s cubic-bezier(.22,.61,.36,1), color .25s ease; } :root a:where(:not(.wp-element-button)):not(.btn):not(.wp-block-button__link):not(.chip):hover, :root a:where(:not(.wp-element-button)):not(.btn):not(.wp-block-button__link):not(.chip):focus-visible{ background-size:100% 2px; } /* O que embrulha um título já tem o traço no de dentro. Sem esta exclusão, as duas camadas desenham juntas e aparece um segundo filete dentro do vermelho. */ a:has(.tline){ background-image:none !important; } /* Contextos que usam o vermelho editorial no lugar da cor do texto */ .tline, .ticker__item{ --u-color:var(--red); } /* O traço acompanha cada linha do título, não a caixa do card */ .tline{ display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; background-image:linear-gradient(var(--red), var(--red)); background-size:0% 2px; } .card:hover .tline, .card:focus-within .tline, .hcard:hover .tline, .hcard:focus-within .tline, .ranklist li:hover .tline{ background-size:100% 2px; } .band--dark .tline, .card__img--over .tline{ background-image:linear-gradient(var(--red), var(--red)); } /* Onde o traço não deve aparecer */ .card > a, .hcard > a, .hcard__img, .card__img, .social a, .sitefooter__social a, .brand, .stickybar__brand, .skip-link, .pagination a, .page-numbers, a:has(> img), a:has(> figure), .article-body figure a, .share a, .share button, .modal a.btn, .loadmore__btn{ background-image:none !important; } /* Rodapé: sem marcador vermelho, com o mesmo traço do resto do site */ .footlist a::before{ display:none; } .footlist a{ gap:0; } /* -------------------------------------------------------------------------- 3. Botões de compartilhar simétricos e