/* Métrica Lab — Home (portado do snippet 08, ml_home_css). */ html{scroll-behavior:smooth} body{margin:0;font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;background:#FBFAF7;color:#16181A} a{color:inherit;text-decoration:none} section[id],footer[id]{scroll-margin-top:76px} img{max-width:100%} .mlHome-section{padding:112px 0} .mlHome-hero{padding:96px 0 112px} .mlHome-backstage{padding:104px 0} .mlHome-logos{padding:0 0 96px} .mlHome-cta{padding:88px 0} @keyframes cardEnter{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:translateX(0)}} @keyframes panelFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* Valores que antes vinham do estado React de viewport. Como CSS, nao ha salto de layout no primeiro render. */ :root{--cta-w:auto;--hero-dir:row;--steps-cols:repeat(4,minmax(0,1fr));--steps-line:block;--footer-cols:repeat(auto-fit,minmax(160px,1fr))} @media (max-width:639px){ :root{--cta-w:100%;--hero-dir:column;--steps-cols:1fr;--steps-line:none;--footer-cols:1fr} .mlHome-section{padding:76px 0} .mlHome-hero{padding:72px 0 80px} .mlHome-backstage{padding:80px 0} .mlHome-logos{padding:0 0 72px} .mlHome-cta{padding:72px 0} } .so-desktop{display:contents} .so-mobile{display:none} @media (max-width:639px){ .so-desktop{display:none} .so-mobile{display:contents} } /* Estados que antes eram re-render do React */ [data-topico]{opacity:.4} [data-topico].ativo{opacity:1} [data-topico] .icone{transform:none} [data-topico].ativo .icone{transform:rotate(45deg)} .painel{display:none} .painel.ativo{display:block;animation:panelFade .35s ease} #nichosBox{max-height:none} #verNichos{display:none} #nichosBox.aberto{max-height:none} /* Fundo estatico. O shimmer do export original era um placeholder de carregamento em laco infinito — com arquivos leves ele so pulsava na tela. */ .logoCx{background:#ffffff} [data-h="0"]:hover{opacity:0.75} [data-h="1"]:hover,[data-h="2"]:hover{text-decoration:underline; text-decoration-color:#1F4E45} [data-h="3"]:hover{background:#1F4E45; border-color:#1F4E45; color:#FBFAF7; transform:scale(1.03)} [data-h="4"]:hover,[data-h="28"]:hover{background:#153731; transform:scale(1.03)} [data-h="5"]:hover,[data-h="29"]:hover{border-color:#16181A; background:#F2F0EA; transform:scale(1.03)} [data-h="6"]:hover,[data-h="7"]:hover,[data-h="8"]:hover{border-color:#CFCDC3; transform:translateY(-4px); box-shadow:0 16px 32px -20px rgba(22,24,26,0.25)} [data-h="9"]:hover,[data-h="10"]:hover,[data-h="11"]:hover{background:rgba(127,167,155,0.08); padding-left:20px} [data-h="12"]:hover,[data-h="13"]:hover,[data-h="14"]:hover,[data-h="15"]:hover,[data-h="16"]:hover,[data-h="17"]:hover,[data-h="18"]:hover,[data-h="19"]:hover,[data-h="20"]:hover,[data-h="21"]:hover,[data-h="22"]:hover,[data-h="23"]:hover,[data-h="24"]:hover,[data-h="25"]:hover,[data-h="26"]:hover,[data-h="27"]:hover{background:#E7EEEB; border-color:#E7EEEB; color:#153731} [data-h="30"]:hover,[data-h="31"]:hover,[data-h="32"]:hover,[data-h="33"]:hover,[data-h="34"]:hover,[data-h="35"]:hover,[data-h="36"]:hover,[data-h="37"]:hover,[data-h="38"]:hover{color:#16181A} /* Carrossel de publicacoes por ROAS */ .mlRoasCarousel{position:relative;opacity:0;transform:translateY(18px);transition:opacity 0.7s cubic-bezier(.19,1,.22,1),transform 0.7s cubic-bezier(.19,1,.22,1)} /* Duas escolhas aqui existem para nao matar a medicao de LCP (2.1.1): * - sem `scroll-behavior:smooth`: com ele o ajuste inicial do snap vira uma * rolagem animada no compositor, e o Chrome trata isso como rolagem do * usuario — para de registrar candidatos a LCP antes da primeira pintura. * As setas continuam suaves porque o home.js pede `behavior:'smooth'`. * - `scroll-padding-inline:2px`: iguala o inicio do scrollport ao `padding` * lateral, entao o primeiro card ja nasce alinhado e o navegador nao precisa * corrigir 2px sozinho ao montar o snap. */ .mlRoasViewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scrollbar-width:none;overscroll-behavior-inline:contain;padding:2px 2px 18px} .mlRoasViewport::-webkit-scrollbar{display:none} .mlRoasViewport:focus-visible{outline:2px solid #1F4E45;outline-offset:5px;border-radius:14px} .mlRoasTrack{display:flex;gap:24px} .mlRoasCard{flex:0 0 calc((100% - 48px)/3);min-width:0;scroll-snap-align:start} .mlRoasCardLink{height:100%;min-height:390px;border:1px solid #E2E1DA;border-radius:14px;padding:24px;box-sizing:border-box;background:#fff;display:flex;flex-direction:column;color:#16181A;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .mlRoasCardLink:hover{border-color:#B9B8B0;transform:translateY(-4px);box-shadow:0 18px 42px -28px rgba(22,24,26,.34)} .mlRoasCardLink:focus-visible{outline:2px solid #1F4E45;outline-offset:3px} .mlRoasCardTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .mlRoasRank,.mlRoasDate{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase} .mlRoasRank{color:#1F4E45;font-weight:600} .mlRoasDate{color:#626764;text-align:right} .mlRoasBadges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px} .mlRoasBadge{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid #CFCDC3;color:#5C615F;white-space:nowrap} /* A paleta dos badges de canal vem do design system global. */ .mlRoasCard h3{font-family:'Newsreader',Georgia,serif;font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.012em;margin:0 0 12px} .mlRoasExcerpt{font-size:14px;line-height:1.6;color:#5C615F;margin:0 0 22px} .mlRoasMetrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:16px;margin-top:auto;border-top:1px solid #E2E1DA} .mlRoasMetrics span{display:block;font-size:11.5px;color:#5C615F;margin-bottom:5px} .mlRoasMetrics strong{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:17px;font-weight:600;white-space:nowrap} .mlRoasMetrics .mlRoasValue{color:#1F4E45} .mlRoasRead{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;font-weight:600;color:#1F4E45} .mlRoasControls{display:flex;align-items:center;justify-content:space-between;margin-top:10px} .mlRoasArrows{display:flex;gap:8px} .mlRoasArrows button{width:42px;height:42px;border:1px solid #CFCDC3;border-radius:50%;background:#FBFAF7;color:#16181A;font-size:18px;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease} .mlRoasArrows button:hover:not(:disabled){background:#1F4E45;border-color:#1F4E45;color:#FBFAF7} .mlRoasArrows button:disabled{opacity:.35;cursor:default} .mlRoasCounter{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:#626764;letter-spacing:.06em} .mlRoasEmpty{border:1px dashed #CFCDC3;border-radius:14px;padding:28px;color:#5C615F;font-size:15px} @media(max-width:900px){.mlRoasCard{flex-basis:calc((100% - 24px)/2)}} @media(max-width:639px){ .mlRoasTrack{gap:16px} .mlRoasCard{flex-basis:92%} .mlRoasCardLink{min-height:370px;padding:21px} .mlRoasCard h3{font-size:20px} } /* --------------------------------------------------------------------------- * Movimento reduzido e rede de segurança (2.1.0) * * Duas correções de UX que vieram de uma queixa real: "as animações da home às * vezes bugam". A causa mais provável é inconsistência — o carrossel de logos * já respeitava `prefers-reduced-motion` (em home.js), mas as revelações, o * card rotativo e o acordeão não. Quem tem movimento reduzido ligado no * sistema via a faixa de logos parada ao lado de coisas se mexendo. * * A segunda regra é rede de segurança: dez dos treze blocos da home nascem com * `opacity:0` e só aparecem quando o JavaScript roda. Se o script falhar, o * conteúdo some. Com