/* Theme Name: Hoop78 Description: Tema do Hoop78, montado a partir do protótipo do redesenho aprovado em 02/09/2026. Preto, marca sangrando, vitrine de 14 vagas. Author: Design Ideal Version: 1.3.5 Requires at least: 6.0 Requires PHP: 8.0 Text Domain: hoop78 */ /* ================================================================== O CSS abaixo vem DOS DOIS PROTOTIPOS, verbatim, extraido por script. Foi acertado pixel a pixel com o Renato ao longo de semanas, e copiar trecho a mao e onde se perde um @media ou a sangria da marca. As duas folhas entram INTEIRAS, primeiro a da home e depois a do artigo. Ha regra repetida entre elas, e tudo bem: sao identicas, e a segunda so reafirma a primeira. NAO tentar deduplicar por diff de linha. Ja tentei em 03/09/2026 e o resultado foi CSS quebrado em silencio: pegar so as linhas diferentes arranca o seletor da chave, o navegador descarta o bloco inteiro e a pagina renderiza com o tamanho padrao de tudo. Levou um print e uma medicao no navegador pra achar. REGRA do prototipo que continua valendo: regra nova de celular vai no BLOCO DO FIM, nunca perto da regra-base, e os @media ordenados do breakpoint mais LARGO para o mais ESTREITO. ================================================================== */ :root{ --preto:#000; --branco:#fff; --cinza:#838383; --grafite:#1e1e1e; --fio:#e4e4e4; --titulo:trumpsoftpro,"Trump Soft Pro",Georgia,serif; --texto:merriweather,Georgia,serif; --mono:ubuntu-mono,"Ubuntu Mono","Courier New",monospace; --env:1560px; --margem:40px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--branco);color:var(--preto);font-family:var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--titulo);font-weight:700;text-transform:uppercase;margin:0;letter-spacing:-.02em} /* Toda foto de conteudo entra no mesmo recorte 16:9, independente do arquivo de origem ser _home, _bloco ou quadrado. Sem isso as fotos saem de alturas diferentes lado a lado. */ img{display:block;width:100%;height:auto} /* Canto arredondado em toda foto de conteudo. Fica na regra unica do .foto pra nao existir imagem quadrada esquecida numa secao. */ .foto{aspect-ratio:16/9;object-fit:cover;filter:grayscale(1);border-radius:10px} /* O container e SEMPRE um elemento so seu. Nenhuma outra regra encosta no padding dele, senao uma secao desalinha das outras. */ .env{max-width:var(--env);margin:0 auto;padding:0 var(--margem)} /* ---------- masthead: a marca ocupa a largura toda ---------- O topo nao gruda. Ele rola pra fora e quem fica no lugar dele e a .barra, que entra na primeira rolagem. Assim a marca aparece inteira uma vez, do tamanho que ela merece, e depois cede o espaco pro conteudo. */ .masthead{background:var(--branco);color:var(--preto);padding:0 0 12px} /* A marca sangra pelos dois lados, igual a do rodape: o H e o 8 encostam o ombro na borda da tela em vez de flutuarem dentro da margem. E o corte que tira a sensacao de topo vazio. */ /* O corte de cima e a mesma ideia do corte dos lados: a marca encosta na borda em vez de flutuar. A margem negativa e em % da largura, entao o corte e proporcional e vale igual no celular. */ .mast-faixa{overflow:hidden;line-height:0;margin-top:-3.4%} .mast-marca{display:block} .mast-marca img{width:109%;max-width:none;margin-left:-3%;filter:none} /* O rabo do 7 desce abaixo da linha de base do resto da palavra, entao a fileira de links sobe um pouco pra nao abrir um buraco embaixo do HOOP. */ /* A primeira tela e so a marca. Nem menu, nem palavra: a navegacao aparece junto com a barra, na primeira rolagem. */ /* ---------- barra compacta da primeira rolagem ---------- */ .barra{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--branco); color:var(--preto);border-bottom:1px solid var(--fio); transform:translateY(-100%);transition:transform .34s cubic-bezier(.4,0,.2,1)} body.rolou .barra{transform:none} .barra-env{max-width:var(--env);margin:0 auto;padding:0 var(--margem);height:64px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px} .barra .btn-menu{justify-self:end} .barra-marca{justify-self:center} .barra-marca img{width:150px;filter:none} /* Os mesmos rotulos do menu do site no ar, so os quatro primeiros: a barra nao aguenta os sete sem espremer a marca do centro. */ .barra-links{justify-self:start;display:flex;gap:20px;font-family:var(--mono);font-size:11px; letter-spacing:2px;text-transform:uppercase;white-space:nowrap} /* O menu em tela cheia passa na frente da barra, e a barra some enquanto ele esta aberto, senao o + fica preso embaixo de uma faixa branca. */ .menu{z-index:80} body.menu-aberto .barra{transform:translateY(-100%)} /* Só o ícone, sem palavra. O que ele abre é grande o bastante pra se explicar. */ .btn-menu{background:none;border:0;padding:4px 0;cursor:pointer;color:var(--preto);display:block} .risquinhos{width:34px;height:34px;position:relative;display:block;transition:transform .45s cubic-bezier(.6,0,.2,1)} .risquinhos span{position:absolute;background:currentColor} .risquinhos span:nth-child(1){top:16px;left:0;width:100%;height:2px} .risquinhos span:nth-child(2){left:16px;top:0;width:2px;height:100%} /* Fechado e +, aberto e X. O hover gira 90 graus, que devolve a mesma forma depois da volta, entao ha movimento nos dois estados. */ .btn-menu:hover .risquinhos{transform:rotate(90deg)} body.menu-aberto .risquinhos{transform:rotate(45deg)} body.menu-aberto .btn-menu:hover .risquinhos{transform:rotate(135deg)} /* ---------- sobreposicao de menu ---------- */ .menu{position:fixed;inset:0;background:var(--preto);color:var(--branco);z-index:50;padding:150px var(--margem) 60px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s} body.menu-aberto{overflow:hidden} body.menu-aberto .menu{opacity:1;visibility:visible} .menu-env{max-width:var(--env);margin:0 auto} .busca{display:flex;align-items:center;gap:18px;border-bottom:1px solid #3a3a3a;padding-bottom:18px;margin-bottom:70px} .busca input{flex:1;background:none;border:0;outline:none;color:var(--branco);font-family:var(--titulo);font-size:clamp(24px,3vw,44px);text-transform:uppercase;letter-spacing:-.02em} .busca input::placeholder{color:#4a4a4a} .menu-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:70px} .menu-cols h2{font-family:var(--mono);font-size:12px;letter-spacing:5px;font-weight:400;color:var(--cinza);margin-bottom:26px} .menu-cols ul{list-style:none;margin:0;padding:0} .menu-cols li + li{margin-top:14px} .menu-cols a{font-family:var(--titulo);text-transform:uppercase;font-weight:700;letter-spacing:-.02em;line-height:1.05;display:inline-block} .menu-grande a{font-size:clamp(30px,3.4vw,54px)} .menu-medio a{font-size:clamp(19px,1.6vw,26px)} /* O overflow das secoes existe pro titulo poder passar da margem: e ele que da o estouro. O clipe acontece na borda da tela, nao na do container. */ .secao{padding:96px 0 0} .rotulo{margin:0 0 10px} /* Titulo de secao em corpo grande e opacidade baixa: ele marca o inicio do bloco sem competir com as manchetes. O nowrap e o que garante o estouro, senao a palavra quebra e volta pra dentro da margem. */ .rotulo h2{font-family:var(--titulo);font-weight:700;text-transform:uppercase; font-size:64px;line-height:.82;letter-spacing:-.03em; white-space:nowrap;opacity:.08;margin:0} /* Leitura longa fica pequena, como era: e a unica secao com uma peca so, e o titulo gigante ali brigaria com a manchete em vez de anunciar o bloco. */ .escuro .rotulo{margin-bottom:44px} .escuro .rotulo h2{font-family:var(--mono);font-size:14px;letter-spacing:6px;font-weight:400; opacity:1;text-align:left;line-height:1.2} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--cinza);display:block} .assina{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--cinza);margin-top:16px} /* ---------- vitrine: 3 materias, a do meio grande ---------- Estreita / larga / estreita. A do meio nao e so maior de foto: o titulo tambem sobe de corpo, senao as tres viram a mesma coisa em tamanhos diferentes e nao ha manchete. Tudo centrado, como na referencia. */ .vitrine{padding:4px 0 76px} .vitrine-grade{display:grid;grid-template-columns:1fr 1.95fr 1fr;gap:48px;align-items:start} .col-lado{display:flex;flex-direction:column;gap:46px} .vitrine .foto{filter:grayscale(1) contrast(1.06)} .cartao-lado h3{font-size:clamp(22px,1.85vw,31px);line-height:1.05;margin:20px 0 0;text-align:center} .cartao-lado p{font-size:14px;line-height:1.55;color:var(--grafite);margin:12px 0 0;text-align:center} /* A foto do meio e 3:2 e nao 16:9: precisa de altura pra sustentar o titulo grande embaixo. O arquivo e o _bloco, que e 2.59:1, entao o object-position puxa pro lado onde esta o jogador; corte no centro cortaria o rosto. */ .cartao-centro .foto{aspect-ratio:3/2;object-position:64% center} .cartao-centro h2{font-size:clamp(30px,2.9vw,50px);line-height:1.02;margin:28px 0 0;text-align:center} .cartao-centro .lead{font-size:clamp(15px,1.05vw,18px);line-height:1.55;color:var(--grafite); margin:16px auto 0;text-align:center;max-width:52ch} /* fio curto acima da assinatura, que e o que separa o texto do credito */ .credito{text-align:center;margin-top:22px} .credito::before{content:"";display:block;width:118px;height:1px;background:var(--fio);margin:0 auto 12px} .credito .assina{margin-top:0} /* ---------- linhas grandes ---------- */ /* Grade de 5: a foto ocupa 3 colunas e o texto 2. Em 3 colunas (2 pra foto, 1 pro texto) a foto virava um bloco de 972x547 contra uma coluna estreita de 464, e o titulo nao sustentava o peso da imagem. */ .linhas{margin:0;padding:0;list-style:none} .linhas > li{display:grid;grid-template-columns:repeat(5,1fr);gap:44px;padding:52px 0;border-bottom:1px solid var(--fio);align-items:start;transition:opacity .35s ease,transform .35s ease} .linhas > li figure{grid-column:1 / span 3;margin:0} .linhas > li .conteudo{grid-column:4 / span 2} /* primeiro e ultimo sao marcados por classe, nao por :first-child, porque com o filtro ligado o primeiro e o ultimo visiveis mudam a cada clique. */ .linhas > li.primeiro{padding-top:0} .linhas > li.ultimo{border-bottom:0;padding-bottom:0} .linhas > li.saindo{opacity:0;transform:translateY(14px)} .linhas > li[hidden]{display:none} /* ---------- notas rapidas ---------- */ .notas{columns:2;column-gap:70px;margin:0;padding:0;list-style:none} .notas li{break-inside:avoid;margin-bottom:46px;display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start} .notas .num{font-family:var(--mono);font-size:56px;line-height:.76;color:var(--fio)} .notas h3{font-size:clamp(24px,2.15vw,36px);line-height:1.02} .notas p{font-size:15px;line-height:1.55;color:var(--grafite);margin:14px 0 0} /* ---------- bloco preto ---------- */ .escuro{background:var(--preto);color:var(--branco);padding:104px 0;margin-top:96px} .escuro .rotulo h2{color:var(--branco)} .escuro .destaque{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center} .escuro h3{font-size:clamp(28px,2.7vw,46px);line-height:1.02} .escuro p{font-size:clamp(16px,1.15vw,20px);line-height:1.55;color:#c9c9c9;margin:24px 0 0;max-width:46ch} .escuro .foto{filter:grayscale(1) contrast(1.08)} .escuro .eyebrow{margin-bottom:18px} /* ---------- bloco de mesmo tom ---------- */ .trinca{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;align-items:start} /* As fotos sobem por cima do titulo fantasma, encostando so na base das letras: o suficiente pra ficar claro que uma coisa passa por tras da outra, sem comer a palavra. A subida e em % da largura porque o titulo tambem escala com ela, entao a fatia coberta e a mesma em qualquer tela. */ .sem-pressa .trinca, .revista-grade{margin-top:-4.5%;position:relative} /* o bloco fecha a parte clara da pagina, entao precisa do respiro embaixo que as outras secoes nao precisavam ter */ .sem-pressa{padding-bottom:104px} /* ---------- rodape ---------- */ footer{background:var(--preto);color:var(--branco);margin-top:0} .rod-linha{border-top:1px solid #262626} /* newsletter: a peca que o rodape existe pra sustentar */ .assine{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:84px 0} .assine h2{font-size:clamp(28px,2.8vw,48px);line-height:1.02;text-transform:uppercase} .assine .apoio{font-size:16px;line-height:1.55;color:var(--cinza);margin:18px 0 0;max-width:42ch} .form-assine{display:flex;align-items:center;gap:0;border-bottom:1px solid #3a3a3a} .form-assine input{flex:1;background:none;border:0;outline:none;color:var(--branco);font-family:var(--texto);font-size:17px;padding:16px 0} .form-assine input::placeholder{color:#5a5a5a} .form-assine button{background:var(--branco);color:var(--preto);border:0;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:5px;text-transform:uppercase;padding:14px 26px;margin-bottom:10px} .form-assine button:hover{background:var(--cinza)} .form-assine:focus-within{border-color:var(--branco)} .aviso-form{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#5a5a5a;margin-top:16px} /* colunas */ .rod-grade{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:60px;padding:70px 0 44px} .rod-grade h3{font-family:var(--mono);font-size:11px;letter-spacing:5px;font-weight:400;color:var(--cinza);text-transform:uppercase;margin-bottom:22px} .rod-grade ul{list-style:none;margin:0;padding:0} .rod-grade li + li{margin-top:12px} .rod-grade ul a{font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--branco)} .rod-marca p{font-size:15px;line-height:1.6;color:var(--cinza);margin:0;max-width:34ch} .redes{display:flex;gap:12px;margin-top:28px} .redes a{width:42px;height:42px;border:1px solid #3a3a3a;display:flex;align-items:center;justify-content:center;color:var(--branco)} .redes a:hover{background:var(--branco);color:var(--preto);border-color:var(--branco)} .colunas-times{columns:2;column-gap:26px} /* barra final */ .rod-fim{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:22px 0 20px;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#5a5a5a} .rod-fim a{color:#5a5a5a} .rod-fim a:hover{color:var(--branco)} .rod-fim .legais{display:flex;gap:26px;flex-wrap:wrap} .subir{display:flex;align-items:center;gap:10px} .subir svg{display:block} /* Abaixo de 1320 a coluna da esquerda nao sustenta os sete sem empurrar a marca pra fora do centro, entao eles caem de tras pra frente, com o Artigos saindo primeiro. */ /* ---------- faixa cinza que separa as secoes ---------- Na referencia cada bloco grande e anunciado por uma tarja clara com o nome da secao no centro, em corpo pequeno. E o unico separador da pagina. */ /* ---------- revista: uma grande a esquerda, duas colunas de menores ---------- A da esquerda ocupa a coluna inteira com foto quase quadrada e acaba cedo. As duas colunas da direita seguem descendo depois que ela termina, que e o que da o desencontro de alturas da referencia. */ .revista{padding:64px 0 0} .revista-grade{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:52px;align-items:start} .revista .foto{filter:grayscale(1) contrast(1.06)} /* A materia da esquerda acompanha a rolagem: gruda abaixo da barra e fica parada enquanto as duas colunas de menores passam por ela. Solta sozinha no fim do bloco, porque o limite do sticky e a altura da propria grade. So no desktop: abaixo de 1180 ela ocupa a fileira inteira e nao ha o que acompanhar. */ .materia-grande{align-self:start} .materia-grande .foto{aspect-ratio:16/9} .materia-grande h2{font-size:clamp(30px,2.75vw,46px);line-height:1.02;margin:26px 0 0;text-align:center} .materia-grande p{font-size:clamp(15px,1.05vw,17px);line-height:1.55;color:var(--grafite); margin:14px auto 0;text-align:center;max-width:46ch} .coluna{display:flex;flex-direction:column;gap:52px} .item h3{font-size:clamp(22px,1.85vw,31px);line-height:1.05;margin:18px 0 0;text-align:center} .item p{font-size:14px;line-height:1.55;color:var(--grafite);margin:12px 0 0;text-align:center} /* ---------- pilulas do fim do bloco ---------- */ .pilulas{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:64px 0 0} .pilula{font-family:var(--mono);font-size:11px;letter-spacing:4px;text-transform:uppercase; padding:15px 30px;border-radius:999px;border:1px solid var(--preto);display:inline-block} .pilula:hover{background:var(--preto);color:var(--branco)} .pilula.cheia{background:var(--preto);color:var(--branco)} .pilula.cheia:hover{background:var(--grafite);border-color:var(--grafite)} /* ---------- marca gigante fechando o rodape ---------- Mesma peca do topo, invertida pro preto do rodape e sangrando pelos lados: a pagina abre e fecha com a marca. O SVG e preto, entao o invert e o que deixa ele branco sem precisar de um segundo arquivo. */ .marca-fim{overflow:hidden;padding:14px 0 0} .marca-fim img{width:112%;max-width:none;margin-left:-6%;margin-bottom:-2.2%;filter:invert(1);display:block} /* ---------- hover ---------- Saiu a troca de cor pro cinza, que apagava o elemento em vez de responder a ele. Agora quem responde e a foto, com um zoom curto dentro da moldura, e o titulo, com um fio que abre do centro pros dois lados. */ .moldura{display:block;overflow:hidden;border-radius:10px;line-height:0} .moldura .foto{border-radius:0;transition:transform .6s cubic-bezier(.2,.6,.2,1),filter .6s ease} /* o inline-block prende o fio a linha mais longa do titulo, e nao a coluna inteira, senao num titulo de uma linha so o fio sobra dos dois lados */ /* Sem sublinhado. O cartao inteiro sobe um pouco enquanto a foto avanca dentro da moldura: o movimento vem do bloco, nao de um risco no texto. */ .cartao-lado, .cartao-centro, .item, .materia-grande, .cartao, .notas li, .escuro .destaque{ transition:transform .45s cubic-bezier(.2,.6,.2,1)} .cartao-lado:hover, .cartao-centro:hover, .item:hover, .materia-grande:hover, .cartao:hover, .notas li:hover, .escuro .destaque:hover{transform:translateY(-7px)} /* o zoom passa a sair do cartao, e nao do link: assim passar o mouse no texto move a foto tambem, em vez de so a metade que esta embaixo do cursor */ .cartao-lado:hover .foto, .cartao-centro:hover .foto, .item:hover .foto, .materia-grande:hover .foto, .cartao:hover .foto, .escuro .destaque:hover .foto{ transform:scale(1.05);filter:grayscale(1) contrast(1.14) brightness(1.05)} /* ---------- campo da divisa ---------- */ .divisa{--corte:69px;padding:0 var(--margem); background:linear-gradient(to bottom,var(--branco) 0 var(--corte),var(--branco) var(--corte) 100%)} .divisa-in{max-width:var(--env);margin:0 auto;display:flex;flex-direction:column;align-items:center; padding:36px 0 34px} .divisa-nota{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase; color:var(--grafite);margin:18px 0 0;text-align:center} .campo{display:flex;align-items:center;width:min(580px,100%);background:var(--branco); border:1px solid var(--preto);border-radius:999px;padding:5px 5px 5px 26px; box-shadow:0 14px 38px rgba(0,0,0,.16);transition:box-shadow .3s ease} .campo:focus-within{box-shadow:0 16px 46px rgba(0,0,0,.28)} .campo input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--preto); font-family:var(--texto);font-size:16px;padding:13px 0} .campo input::placeholder{color:#9a9a9a} .campo button{flex:0 0 auto;background:var(--preto);color:var(--branco);border:0;cursor:pointer; border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:4px;text-transform:uppercase; padding:14px 26px;transition:background .25s ease} .campo button:hover{background:var(--grafite)} /* ---------- teste: primeiro bloco no preto ---------- */ .masthead, .vitrine{background:var(--preto);color:var(--branco)} .mast-marca img, .barra-marca img{filter:invert(1)} .masthead .btn-menu{color:var(--branco)} .vitrine .cartao-lado h3, .vitrine .cartao-centro h2{color:var(--branco)} .vitrine .cartao-lado p, .vitrine .cartao-centro .lead{color:#c9c9c9} .vitrine .credito::before{background:#3a3a3a} /* metade de cima da divisa acompanha o bloco escuro */ .divisa{background:linear-gradient(to bottom,var(--preto) 0 var(--corte),var(--branco) var(--corte) 100%)} /* A barra acompanha o bloco de cima, senao ela entra branca por cima do preto logo na primeira rolagem. Preta ela tambem funciona sobre o branco de baixo, que e o mesmo caminho do rodape. */ .barra{background:var(--preto);color:var(--branco);border-bottom-color:#262626} .barra .btn-menu{color:var(--branco)} .barra-links a{color:var(--branco)} /* ============================================================ Todos os cortes de tela ficam AQUI, no fim da folha. Antes eles moravam no meio e vinham antes das regras que deviam sobrescrever: mesma especificidade, ganhava o desktop, e 22 regras de celular na home e 29 no artigo nunca entravam. A ordem entre os blocos foi mantida igual a original. ============================================================ */ @media (max-width:1320px){ .barra-links a:nth-child(1){display:none} } @media (max-width:1180px){ .rod-grade{grid-template-columns:1fr 1fr;gap:52px} } @media (max-width:1180px){ /* Abaixo de 1180 as colunas de lado ficam mais estreitas que a legenda e o titulo quebra em cinco linhas. A do meio passa a ocupar a fileira toda e as duas de lado dividem a de baixo. */ .vitrine-grade{grid-template-columns:1fr 1fr;gap:40px} /* A grande passa a ocupar a fileira toda e as duas colunas de menores dividem a de baixo, senao a coluna da esquerda fica mais estreita que a propria legenda. */ .revista-grade{grid-template-columns:1fr 1fr;gap:44px} .trinca{grid-template-columns:1fr 1fr;gap:40px} .materia-grande{grid-column:1 / -1} .cartao-centro{grid-column:1 / -1;order:-1} .cartao-centro .foto{aspect-ratio:16/9} .col-lado{gap:40px} .escuro .destaque{grid-template-columns:1fr;gap:44px} } @media (max-width:1150px){ .barra-links a:nth-child(1), .barra-links a:nth-child(n+6){display:none} } @media (max-width:940px){ .barra-links a:nth-child(-n+2), .barra-links a:nth-child(n+5){display:none} } @media (max-width:820px){ .assine{grid-template-columns:1fr;gap:34px;padding:60px 0} .rod-grade{grid-template-columns:1fr;gap:44px;padding:56px 0} .colunas-times{columns:2} } @media (max-width:820px){ :root{--margem:22px} /* Titulos com escala propria de celular. No desktop o termo vw so passa do piso em telas grandes, entao no telefone todos ficavam parados no minimo e a hierarquia achatava conforme o aparelho crescia. */ .cartao h3{font-size:clamp(28px,8vw,38px)} .notas h3{font-size:clamp(25px,7vw,33px)} .escuro h3{font-size:clamp(30px,9vw,42px)} .assine h2{font-size:clamp(29px,8.4vw,40px)} /* Filtro: uma fileira so, que rola de lado. Quebrar em duas linhas empilhava botao com botao e empurrava a contagem pra uma terceira linha. A fileira sangra ate a borda da tela pra ficar evidente que continua. */ .filtro{display:block;margin:-8px 0 34px} .filtro-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; margin:0 calc(var(--margem) * -1);padding:2px var(--margem); scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .filtro-chips::-webkit-scrollbar{display:none} .chip{scroll-snap-align:start;padding:12px 18px} .contagem{display:block;margin:16px 0 0} .notas li{grid-template-columns:46px 1fr;gap:16px} .notas .num{font-size:38px} /* Formulario: botao embaixo e do tamanho do dedo, em vez de espremido ao lado de um campo de 200px. */ .form-assine{display:block;border-bottom:0} .form-assine input{width:100%;border-bottom:1px solid #3a3a3a;padding:14px 0} .form-assine button{width:100%;margin:18px 0 0;padding:17px 26px} .rod-fim{flex-direction:column;align-items:flex-start;gap:18px;padding:22px 0 24px} .rod-fim .legais{gap:20px} .barra-marca img{width:118px} .barra-env{height:56px;gap:12px} /* Com dois atalhos a direita a coluna passa dos 1fr e empurra a marca pra fora do centro. Fica so o primeiro, e abaixo de 560px nenhum: o + ja da conta, e a marca centrada e o que importa na barra. */ .barra-links{gap:16px;font-size:10px;letter-spacing:2px} /* No celular o rabo do 7 desce sobre a fileira de links, entao aqui ela nao sobe: fica encostada na base da imagem e passa por baixo do rabo. */ .masthead{padding:0 0 8px} .btn-mono span.rotulo{display:none} .acoes{gap:18px} .menu{padding:110px var(--margem) 50px} .menu-cols{grid-template-columns:1fr;gap:44px} .busca{margin-bottom:44px} .secao{padding:64px 0 0} .notas{columns:1} .grade-2{grid-template-columns:1fr;gap:48px} .vitrine-grade{grid-template-columns:1fr;gap:44px} .trinca{grid-template-columns:1fr;gap:46px} /* no celular a palavra e menor e a foto e uma so por linha: cobrir a mesma fatia esconderia o titulo inteiro */ .sem-pressa .trinca, .revista-grade{margin-top:-2.5%} .sem-pressa{padding-bottom:64px} /* No celular os clamps do desktop batem no piso e param de escalar: 2.2vw em 390px da 8,6px, entao valia sempre o minimo. Aqui a conta e feita na largura da tela, com teto pro tablet. A manchete entra junto: presa em 34px, ela chegava a 1,03x o tamanho dos titulos da listagem em 430px, ou seja, deixava de ser manchete. */ .cartao-centro h2{font-size:clamp(34px,10.4vw,52px)} .cartao-lado h3{font-size:clamp(27px,7.6vw,36px)} .linhas h3{font-size:clamp(27px,7.6vw,36px)} .vitrine{padding-bottom:64px} .divisa{--corte:57px} .divisa-in{padding:26px 0 26px} .divisa-nota{font-size:10px;letter-spacing:2px;margin-top:14px} .campo{padding:5px 5px 5px 18px} .campo input{font-size:16px;padding:12px 0} .campo button{padding:16px 18px;letter-spacing:2px} .revista{padding-top:44px} .rotulo{margin-bottom:6px} .revista-grade{grid-template-columns:1fr;gap:46px} .coluna{gap:46px} .materia-grande h2{font-size:clamp(32px,9.4vw,46px)} .item h3{font-size:clamp(27px,7.6vw,36px)} .pilulas{padding-top:46px} .pilula{padding:16px 24px;font-size:10px;letter-spacing:3px} /* Alvos de toque do celular: o minimo confortavel e 44px, e tres itens ficavam abaixo disso. O + do topo tinha 34px de largura, os icones de rede 42px e o "voltar ao topo" apenas 13px de altura, que no dedo vira acerto por sorte. */ .btn-menu{padding:5px} .redes a{width:44px;height:44px} .subir{padding:16px 0} .marca-fim{padding-top:10px} .linhas > li{grid-template-columns:1fr;gap:20px} .linhas > li figure,.linhas > li .conteudo{grid-column:auto} .escuro{padding:70px 0;margin-top:64px} } @media (max-width:560px){ /* Escondo os rotulos, nao a caixa: com display:none no container o grid perde a primeira celula e a marca deixa de ficar no centro. */ .barra-links a{display:none} } @media (min-width:1181px){ .materia-grande{position:sticky;top:100px} } /* ===== a folha da pagina de artigo, inteira ===== */ :root{ --preto:#000; --branco:#fff; --cinza:#838383; --grafite:#1e1e1e; --fio:#e4e4e4; --titulo:trumpsoftpro,"Trump Soft Pro",Georgia,serif; --texto:merriweather,Georgia,serif; --mono:ubuntu-mono,"Ubuntu Mono","Courier New",monospace; --env:1560px; --margem:40px; --medida:700px; /* largura da coluna de leitura */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--branco);color:var(--preto);font-family:var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--titulo);font-weight:700;text-transform:uppercase;margin:0;letter-spacing:-.02em} /* Toda foto de conteudo entra no mesmo recorte 16:9, independente do arquivo de origem ser _home, _bloco ou quadrado. Sem isso as fotos saem de alturas diferentes lado a lado. */ img{display:block;width:100%;height:auto} /* Canto arredondado em toda foto de conteudo. Fica na regra unica do .foto pra nao existir imagem quadrada esquecida numa secao. */ .foto{aspect-ratio:16/9;object-fit:cover;filter:grayscale(1);border-radius:10px} /* O container e SEMPRE um elemento so seu. Nenhuma outra regra encosta no padding dele, senao uma secao desalinha das outras. */ .env{max-width:var(--env);margin:0 auto;padding:0 var(--margem)} /* ---------- masthead: a marca ocupa a largura toda ---------- O topo nao gruda. Ele rola pra fora e quem fica no lugar dele e a .barra, que entra na primeira rolagem. Assim a marca aparece inteira uma vez, do tamanho que ela merece, e depois cede o espaco pro conteudo. */ .masthead{background:var(--branco);color:var(--preto);padding:0 0 12px} /* A marca sangra pelos dois lados, igual a do rodape: o H e o 8 encostam o ombro na borda da tela em vez de flutuarem dentro da margem. E o corte que tira a sensacao de topo vazio. */ /* O corte de cima e a mesma ideia do corte dos lados: a marca encosta na borda em vez de flutuar. A margem negativa e em % da largura, entao o corte e proporcional e vale igual no celular. */ .mast-faixa{overflow:hidden;line-height:0;margin-top:-3.4%} .mast-marca{display:block} .mast-marca img{width:109%;max-width:none;margin-left:-3%;filter:none} /* O rabo do 7 desce abaixo da linha de base do resto da palavra, entao a fileira de links sobe um pouco pra nao abrir um buraco embaixo do HOOP. */ /* A primeira tela e so a marca. Nem menu, nem palavra: a navegacao aparece junto com a barra, na primeira rolagem. */ /* ---------- barra compacta da primeira rolagem ---------- */ /* Aqui ela nao entra na rolagem: nasce no topo, em fluxo, e gruda. Sticky em vez de fixed pra ela ocupar a propria altura e o texto comecar embaixo dela sem precisar de padding de compensacao no corpo. */ .barra{position:sticky;top:0;z-index:70;background:var(--branco); color:var(--preto);border-bottom:1px solid var(--fio)} .barra-env{max-width:var(--env);margin:0 auto;padding:0 var(--margem);height:64px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px} .barra .btn-menu{justify-self:end} .barra-marca{justify-self:center} .barra-marca img{width:150px;filter:none} /* Os mesmos rotulos do menu do site no ar, so os quatro primeiros: a barra nao aguenta os sete sem espremer a marca do centro. */ .barra-links{justify-self:start;display:flex;gap:20px;font-family:var(--mono);font-size:11px; letter-spacing:2px;text-transform:uppercase;white-space:nowrap} /* O menu em tela cheia passa na frente da barra, e a barra some enquanto ele esta aberto, senao o + fica preso embaixo de uma faixa branca. */ .menu{z-index:80} body.menu-aberto .barra{transform:translateY(-100%)} /* Só o ícone, sem palavra. O que ele abre é grande o bastante pra se explicar. */ .btn-menu{background:none;border:0;padding:4px 0;cursor:pointer;color:var(--preto);display:block} .risquinhos{width:34px;height:34px;position:relative;display:block;transition:transform .45s cubic-bezier(.6,0,.2,1)} .risquinhos span{position:absolute;background:currentColor} .risquinhos span:nth-child(1){top:16px;left:0;width:100%;height:2px} .risquinhos span:nth-child(2){left:16px;top:0;width:2px;height:100%} /* Fechado e +, aberto e X. O hover gira 90 graus, que devolve a mesma forma depois da volta, entao ha movimento nos dois estados. */ .btn-menu:hover .risquinhos{transform:rotate(90deg)} body.menu-aberto .risquinhos{transform:rotate(45deg)} body.menu-aberto .btn-menu:hover .risquinhos{transform:rotate(135deg)} /* ---------- sobreposicao de menu ---------- */ .menu{position:fixed;inset:0;background:var(--preto);color:var(--branco);z-index:50;padding:150px var(--margem) 60px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s} body.menu-aberto{overflow:hidden} body.menu-aberto .menu{opacity:1;visibility:visible} .menu-env{max-width:var(--env);margin:0 auto} .busca{display:flex;align-items:center;gap:18px;border-bottom:1px solid #3a3a3a;padding-bottom:18px;margin-bottom:70px} .busca input{flex:1;background:none;border:0;outline:none;color:var(--branco);font-family:var(--titulo);font-size:clamp(24px,3vw,44px);text-transform:uppercase;letter-spacing:-.02em} .busca input::placeholder{color:#4a4a4a} .menu-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:70px} .menu-cols h2{font-family:var(--mono);font-size:12px;letter-spacing:5px;font-weight:400;color:var(--cinza);margin-bottom:26px} .menu-cols ul{list-style:none;margin:0;padding:0} .menu-cols li + li{margin-top:14px} .menu-cols a{font-family:var(--titulo);text-transform:uppercase;font-weight:700;letter-spacing:-.02em;line-height:1.05;display:inline-block} .menu-grande a{font-size:clamp(30px,3.4vw,54px)} .menu-medio a{font-size:clamp(19px,1.6vw,26px)} /* O overflow das secoes existe pro titulo poder passar da margem: e ele que da o estouro. O clipe acontece na borda da tela, nao na do container. */ .secao{padding:96px 0 0} .rotulo{margin:0 0 10px} /* Titulo de secao em corpo grande e opacidade baixa: ele marca o inicio do bloco sem competir com as manchetes. O nowrap e o que garante o estouro, senao a palavra quebra e volta pra dentro da margem. */ .rotulo h2{font-family:var(--titulo);font-weight:700;text-transform:uppercase; font-size:64px;line-height:.82;letter-spacing:-.03em; white-space:nowrap;opacity:.08;margin:0} /* Leitura longa fica pequena, como era: e a unica secao com uma peca so, e o titulo gigante ali brigaria com a manchete em vez de anunciar o bloco. */ .escuro .rotulo{margin-bottom:44px} .escuro .rotulo h2{font-family:var(--mono);font-size:14px;letter-spacing:6px;font-weight:400; opacity:1;text-align:left;line-height:1.2} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--cinza);display:block} .assina{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--cinza);margin-top:16px} /* ---------- vitrine: 3 materias, a do meio grande ---------- Estreita / larga / estreita. A do meio nao e so maior de foto: o titulo tambem sobe de corpo, senao as tres viram a mesma coisa em tamanhos diferentes e nao ha manchete. Tudo centrado, como na referencia. */ .vitrine{padding:4px 0 76px} .vitrine-grade{display:grid;grid-template-columns:1fr 1.95fr 1fr;gap:48px;align-items:start} .col-lado{display:flex;flex-direction:column;gap:46px} .vitrine .foto{filter:grayscale(1) contrast(1.06)} .cartao-lado h3{font-size:clamp(22px,1.85vw,31px);line-height:1.05;margin:20px 0 0;text-align:center} .cartao-lado p{font-size:14px;line-height:1.55;color:var(--grafite);margin:12px 0 0;text-align:center} /* A foto do meio e 3:2 e nao 16:9: precisa de altura pra sustentar o titulo grande embaixo. O arquivo e o _bloco, que e 2.59:1, entao o object-position puxa pro lado onde esta o jogador; corte no centro cortaria o rosto. */ .cartao-centro .foto{aspect-ratio:3/2;object-position:64% center} .cartao-centro h2{font-size:clamp(30px,2.9vw,50px);line-height:1.02;margin:28px 0 0;text-align:center} .cartao-centro .lead{font-size:clamp(15px,1.05vw,18px);line-height:1.55;color:var(--grafite); margin:16px auto 0;text-align:center;max-width:52ch} /* fio curto acima da assinatura, que e o que separa o texto do credito */ .credito{text-align:center;margin-top:22px} .credito::before{content:"";display:block;width:118px;height:1px;background:var(--fio);margin:0 auto 12px} .credito .assina{margin-top:0} /* ---------- linhas grandes ---------- */ /* Grade de 5: a foto ocupa 3 colunas e o texto 2. Em 3 colunas (2 pra foto, 1 pro texto) a foto virava um bloco de 972x547 contra uma coluna estreita de 464, e o titulo nao sustentava o peso da imagem. */ .linhas{margin:0;padding:0;list-style:none} .linhas > li{display:grid;grid-template-columns:repeat(5,1fr);gap:44px;padding:52px 0;border-bottom:1px solid var(--fio);align-items:start;transition:opacity .35s ease,transform .35s ease} .linhas > li figure{grid-column:1 / span 3;margin:0} .linhas > li .conteudo{grid-column:4 / span 2} /* primeiro e ultimo sao marcados por classe, nao por :first-child, porque com o filtro ligado o primeiro e o ultimo visiveis mudam a cada clique. */ .linhas > li.primeiro{padding-top:0} .linhas > li.ultimo{border-bottom:0;padding-bottom:0} .linhas > li.saindo{opacity:0;transform:translateY(14px)} .linhas > li[hidden]{display:none} /* ---------- notas rapidas ---------- */ .notas{columns:2;column-gap:70px;margin:0;padding:0;list-style:none} .notas li{break-inside:avoid;margin-bottom:46px;display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start} .notas .num{font-family:var(--mono);font-size:56px;line-height:.76;color:var(--fio)} .notas h3{font-size:clamp(24px,2.15vw,36px);line-height:1.02} .notas p{font-size:15px;line-height:1.55;color:var(--grafite);margin:14px 0 0} /* ---------- bloco preto ---------- */ .escuro{background:var(--preto);color:var(--branco);padding:104px 0;margin-top:96px} .escuro .rotulo h2{color:var(--branco)} .escuro .destaque{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center} .escuro h3{font-size:clamp(28px,2.7vw,46px);line-height:1.02} .escuro p{font-size:clamp(16px,1.15vw,20px);line-height:1.55;color:#c9c9c9;margin:24px 0 0;max-width:46ch} .escuro .foto{filter:grayscale(1) contrast(1.08)} .escuro .eyebrow{margin-bottom:18px} /* ---------- bloco de mesmo tom ---------- */ .trinca{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;align-items:start} /* As fotos sobem por cima do titulo fantasma, encostando so na base das letras: o suficiente pra ficar claro que uma coisa passa por tras da outra, sem comer a palavra. A subida e em % da largura porque o titulo tambem escala com ela, entao a fatia coberta e a mesma em qualquer tela. */ .sem-pressa .trinca, .revista-grade, .leia{margin-top:-4.5%;position:relative} /* o bloco fecha a parte clara da pagina, entao precisa do respiro embaixo que as outras secoes nao precisavam ter */ .sem-pressa{padding-bottom:104px} /* ---------- rodape ---------- */ footer{background:var(--preto);color:var(--branco);margin-top:0} .rod-linha{border-top:1px solid #262626} /* newsletter: a peca que o rodape existe pra sustentar */ .assine{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:84px 0} .assine h2{font-size:clamp(28px,2.8vw,48px);line-height:1.02;text-transform:uppercase} .assine .apoio{font-size:16px;line-height:1.55;color:var(--cinza);margin:18px 0 0;max-width:42ch} .form-assine{display:flex;align-items:center;gap:0;border-bottom:1px solid #3a3a3a} .form-assine input{flex:1;background:none;border:0;outline:none;color:var(--branco);font-family:var(--texto);font-size:17px;padding:16px 0} .form-assine input::placeholder{color:#5a5a5a} .form-assine button{background:var(--branco);color:var(--preto);border:0;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:5px;text-transform:uppercase;padding:14px 26px;margin-bottom:10px} .form-assine button:hover{background:var(--cinza)} .form-assine:focus-within{border-color:var(--branco)} .aviso-form{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#5a5a5a;margin-top:16px} /* colunas */ .rod-grade{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:60px;padding:70px 0 44px} .rod-grade h3{font-family:var(--mono);font-size:11px;letter-spacing:5px;font-weight:400;color:var(--cinza);text-transform:uppercase;margin-bottom:22px} .rod-grade ul{list-style:none;margin:0;padding:0} .rod-grade li + li{margin-top:12px} .rod-grade ul a{font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--branco)} .rod-marca p{font-size:15px;line-height:1.6;color:var(--cinza);margin:0;max-width:34ch} .redes{display:flex;gap:12px;margin-top:28px} .redes a{width:42px;height:42px;border:1px solid #3a3a3a;display:flex;align-items:center;justify-content:center;color:var(--branco)} .redes a:hover{background:var(--branco);color:var(--preto);border-color:var(--branco)} .colunas-times{columns:2;column-gap:26px} /* barra final */ .rod-fim{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:22px 0 20px;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#5a5a5a} .rod-fim a{color:#5a5a5a} .rod-fim a:hover{color:var(--branco)} .rod-fim .legais{display:flex;gap:26px;flex-wrap:wrap} .subir{display:flex;align-items:center;gap:10px} .subir svg{display:block} /* Abaixo de 1320 a coluna da esquerda nao sustenta os sete sem empurrar a marca pra fora do centro, entao eles caem de tras pra frente, com o Artigos saindo primeiro. */ /* ---------- faixa cinza que separa as secoes ---------- Na referencia cada bloco grande e anunciado por uma tarja clara com o nome da secao no centro, em corpo pequeno. E o unico separador da pagina. */ /* ---------- revista: uma grande a esquerda, duas colunas de menores ---------- A da esquerda ocupa a coluna inteira com foto quase quadrada e acaba cedo. As duas colunas da direita seguem descendo depois que ela termina, que e o que da o desencontro de alturas da referencia. */ .revista{padding:64px 0 0} .revista-grade{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:52px;align-items:start} .revista .foto{filter:grayscale(1) contrast(1.06)} /* A materia da esquerda acompanha a rolagem: gruda abaixo da barra e fica parada enquanto as duas colunas de menores passam por ela. Solta sozinha no fim do bloco, porque o limite do sticky e a altura da propria grade. So no desktop: abaixo de 1180 ela ocupa a fileira inteira e nao ha o que acompanhar. */ .materia-grande{align-self:start} .materia-grande .foto{aspect-ratio:16/9} .materia-grande h2{font-size:clamp(30px,2.75vw,46px);line-height:1.02;margin:26px 0 0;text-align:center} .materia-grande p{font-size:clamp(15px,1.05vw,17px);line-height:1.55;color:var(--grafite); margin:14px auto 0;text-align:center;max-width:46ch} .coluna{display:flex;flex-direction:column;gap:52px} .item h3{font-size:clamp(22px,1.85vw,31px);line-height:1.05;margin:18px 0 0;text-align:center} .item p{font-size:14px;line-height:1.55;color:var(--grafite);margin:12px 0 0;text-align:center} /* ---------- pilulas do fim do bloco ---------- */ .pilulas{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:64px 0 0} .pilula{font-family:var(--mono);font-size:11px;letter-spacing:4px;text-transform:uppercase; padding:15px 30px;border-radius:999px;border:1px solid var(--preto);display:inline-block} .pilula:hover{background:var(--preto);color:var(--branco)} .pilula.cheia{background:var(--preto);color:var(--branco)} .pilula.cheia:hover{background:var(--grafite);border-color:var(--grafite)} /* ---------- marca gigante fechando o rodape ---------- Mesma peca do topo, invertida pro preto do rodape e sangrando pelos lados: a pagina abre e fecha com a marca. O SVG e preto, entao o invert e o que deixa ele branco sem precisar de um segundo arquivo. */ .marca-fim{overflow:hidden;padding:14px 0 0} .marca-fim img{width:112%;max-width:none;margin-left:-6%;margin-bottom:-2.2%;filter:invert(1);display:block} /* ---------- hover ---------- Saiu a troca de cor pro cinza, que apagava o elemento em vez de responder a ele. Agora quem responde e a foto, com um zoom curto dentro da moldura, e o titulo, com um fio que abre do centro pros dois lados. */ .moldura{display:block;overflow:hidden;border-radius:10px;line-height:0} .moldura .foto{border-radius:0;transition:transform .6s cubic-bezier(.2,.6,.2,1),filter .6s ease} /* o inline-block prende o fio a linha mais longa do titulo, e nao a coluna inteira, senao num titulo de uma linha so o fio sobra dos dois lados */ /* Sem sublinhado. O cartao inteiro sobe um pouco enquanto a foto avanca dentro da moldura: o movimento vem do bloco, nao de um risco no texto. */ .cartao-lado, .cartao-centro, .item, .materia-grande, .cartao, .notas li, .escuro .destaque, .leia li{ transition:transform .45s cubic-bezier(.2,.6,.2,1)} .cartao-lado:hover, .cartao-centro:hover, .item:hover, .materia-grande:hover, .cartao:hover, .notas li:hover, .escuro .destaque:hover, .leia li:hover{transform:translateY(-7px)} /* o zoom passa a sair do cartao, e nao do link: assim passar o mouse no texto move a foto tambem, em vez de so a metade que esta embaixo do cursor */ .cartao-lado:hover .foto, .cartao-centro:hover .foto, .item:hover .foto, .materia-grande:hover .foto, .cartao:hover .foto, .escuro .destaque:hover .foto, .leia li:hover .foto{ transform:scale(1.05);filter:grayscale(1) contrast(1.14) brightness(1.05)} /* ---------- campo da divisa ---------- */ .divisa{--corte:69px;padding:0 var(--margem); background:linear-gradient(to bottom,var(--branco) 0 var(--corte),var(--branco) var(--corte) 100%)} .divisa-in{max-width:var(--env);margin:0 auto;display:flex;flex-direction:column;align-items:center; padding:36px 0 34px} .divisa-nota{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase; color:var(--grafite);margin:18px 0 0;text-align:center} .campo{display:flex;align-items:center;width:min(580px,100%);background:var(--branco); border:1px solid var(--preto);border-radius:999px;padding:5px 5px 5px 26px; box-shadow:0 14px 38px rgba(0,0,0,.16);transition:box-shadow .3s ease} .campo:focus-within{box-shadow:0 16px 46px rgba(0,0,0,.28)} .campo input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--preto); font-family:var(--texto);font-size:16px;padding:13px 0} .campo input::placeholder{color:#9a9a9a} .campo button{flex:0 0 auto;background:var(--preto);color:var(--branco);border:0;cursor:pointer; border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:4px;text-transform:uppercase; padding:14px 26px;transition:background .25s ease} .campo button:hover{background:var(--grafite)} /* ---------- abertura do artigo ---------- */ .abertura{background:var(--branco);color:var(--preto);padding:70px 0 60px} .trilha{font-family:var(--mono);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--cinza);margin-bottom:34px} .trilha a:hover{color:var(--preto)} .trilha span{margin:0 10px;color:var(--fio)} /* Manchete e lead lado a lado, alinhados pela base. Com o H1 sozinho e travado em 19 caracteres, sobrava metade da largura vazia no desktop. */ .abertura .miolo{display:grid;grid-template-columns:1.4fr 1fr;gap:0 70px;align-items:end} .abertura h1{font-size:clamp(34px,4.9vw,86px);line-height:.96} .abertura .lead{font-family:var(--texto);font-size:clamp(17px,1.35vw,23px);line-height:1.5;color:var(--grafite);margin:0;padding-bottom:8px} .credito-linha{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:0 26px;margin-top:52px;padding-top:26px;border-top:1px solid var(--fio);font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--cinza)} /* a capa sangra na largura da tela, como a marca do topo e a do rodape */ .capa-foto{margin:0} .capa-foto img{width:100%;aspect-ratio:21/9;object-fit:cover;filter:grayscale(1);border-radius:0} .legenda{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--cinza);padding:14px 0 0} /* ---------- corpo ---------- */ .corpo-grade{display:grid;grid-template-columns:1fr minmax(0,var(--medida)) 1fr;gap:0 48px;padding:70px 0 0} /* min-width:0 e obrigatorio: item de grid nasce com min-width:auto e nao encolhe abaixo do conteudo, o que criava rolagem horizontal em 320px. */ .corpo{grid-column:2;min-width:0} .corpo *{max-width:100%} /* Compartilhar fixo na margem esquerda, so onde ha margem sobrando. align-self:start e obrigatorio: sem ele o item estica na altura toda da grade e o sticky gruda acima da barra, cortando o rotulo. */ .compartilhar{grid-column:1;justify-self:end;align-self:start;min-width:0;position:sticky;top:96px;display:flex;flex-direction:column;gap:10px;align-items:center} .compartilhar .rot{font-family:var(--mono);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--cinza);writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:8px} .compartilhar a,.compartilhar button{width:44px;height:44px;border:1px solid var(--fio);background:none;cursor:pointer;color:var(--preto);display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease} .compartilhar a:hover,.compartilhar button:hover{background:var(--preto);color:var(--branco);border-color:var(--preto)} .corpo p{font-size:18px;line-height:1.78;margin:0 0 30px} .corpo p:first-of-type{font-size:21px;line-height:1.62} .corpo h2{font-size:clamp(28px,2.6vw,44px);line-height:1.0;margin:64px 0 26px} .corpo a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--cinza)} .corpo a:hover{background:var(--preto);color:var(--branco);text-decoration-color:transparent} .corpo ul,.corpo ol{font-size:18px;line-height:1.78;padding-left:22px;margin:0 0 30px} .corpo li{margin-bottom:10px} .corpo iframe{max-width:100%} .corpo .resumo-rapido{margin:34px 0 40px !important} .corpo .resumo-rapido li{font-family:var(--texto);font-size:17px;line-height:1.62;margin-bottom:12px} .corpo .moldura{margin:0 0 12px} /* ---------- fim do artigo ---------- */ .marcadores{display:flex;flex-wrap:wrap;gap:8px;margin:56px 0 0;padding-top:34px;border-top:1px solid var(--fio)} .marcadores a{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;border:1px solid var(--fio);padding:9px 14px;color:var(--grafite)} .marcadores a:hover{background:var(--preto);color:var(--branco);border-color:var(--preto)} .leia{display:grid;grid-template-columns:repeat(3,1fr);gap:60px 44px;list-style:none;margin:0;padding:0} .leia h3{font-size:clamp(22px,1.85vw,31px);line-height:1.05;margin:18px 0 0;text-align:center} .leia p{font-size:15px;line-height:1.55;color:var(--grafite);margin:12px 0 0;text-align:center} .leia .eyebrow{display:block;margin-top:16px;text-align:center} .leia li[hidden]{display:none} .leia li.entrando{opacity:0;transform:translateY(16px)} .leia li{transition:opacity .4s ease,transform .4s ease} /* o Leia tambem fecha a parte clara: precisa do respiro que as outras secoes nao precisavam ter */ .leia-secao{padding-bottom:104px} .mais,.fim-lista{display:block;width:100%;margin-top:64px;background:none;border:1px solid var(--preto);color:var(--preto);cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:5px;text-transform:uppercase;padding:24px;text-align:center;transition:background .2s ease,color .2s ease} .mais:hover,.fim-lista:hover{background:var(--preto);color:var(--branco)} /* display:block e regra de autor e vence o atributo hidden, que so vale pela folha do navegador. Sem isto, esconder por JS nao surtia efeito. */ .mais[hidden],.fim-lista[hidden]{display:none} /* barra de progresso de leitura, colada na base da barra */ .progresso{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--preto);transition:width .1s linear} /* ---------- componentes que vem do CMS ---------- Copiados da folha viva do site (main-min.css), sem reescrever: a previa precisa mostrar o bloco de dados, a barra e a citacao exatamente como o editor entrega hoje, senao ela promete um componente que nao existe. Escopados em .corpo pra nao vazarem pro resto da pagina. */ .corpo .h78-tbl{width:100%;border-collapse:collapse;font-size:17px;line-height:1.5} .corpo .h78-tbl thead tr{background:#111;color:#fff;text-transform:uppercase;font-size:11.5px;letter-spacing:.6px} .corpo .h78-tbl th{padding:11px 12px;text-align:left;color:#fff;font-size:12.5px;font-weight:700} .corpo .h78-tbl th.r,.corpo .h78-tbl td.r{text-align:right} .corpo .h78-tbl td{padding:11px 12px;border-bottom:1px solid #e2e2e2;color:#000;font-size:17px;line-height:1.5} .corpo .h78-tbl{background:transparent;margin-bottom:0} .corpo .h78-tbl tbody tr,.corpo .h78-tbl tr:nth-of-type(even){background:transparent} .corpo .h78-tbl td{font-family:merriweather,serif} .corpo .resumo-rapido{background:#fff;color:#000;border:1px solid #000;padding:24px 26px;margin:26px 0} .corpo .resumo-rapido .rot{font-family:ubuntu-mono,'Courier New',monospace;text-transform:uppercase;letter-spacing:3px;font-size:12px;color:#838383;margin:0 0 14px 0} .corpo .resumo-rapido ul{margin:0;padding-left:20px;line-height:1.7} .corpo .resumo-rapido li{margin-bottom:9px} .corpo .resumo-rapido li:last-child{margin-bottom:0} .corpo .h78-cita{margin:30px 0;padding:2px 0 2px 22px;border-left:4px solid #000} .corpo .h78-cita p{margin:0;font-size:23px;line-height:1.45;font-weight:600;color:#000} .corpo .h78-cita p+p{margin-top:12px} .corpo .h78-cita-aut{margin-top:12px;font-family:ubuntu-mono,'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:#838383} .corpo .h78-dt{margin:36px 0;box-sizing:border-box} .corpo .h78-dt *{box-sizing:border-box} .corpo .h78-dt-hd{padding:0 0 18px} .corpo .h78-dt-ey{font-family:ubuntu-mono,'Courier New',monospace;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#a8a8a8;margin:0 0 9px} .corpo .h78-dt-ti{font-size:23px;font-weight:700;color:#000;margin:0 0 8px;line-height:1.2;letter-spacing:-.3px} .corpo .h78-dt-sb{font-size:14px;color:#838383;margin:0;line-height:1.55;max-width:46em} .corpo .h78-dt-sc{overflow-x:auto;-webkit-overflow-scrolling:touch} .corpo .h78-dt-t{border:0;width:100%;border-collapse:separate;border-spacing:0 7px;font-variant-numeric:tabular-nums;min-width:420px;margin:0} .corpo .h78-dt-t thead th{background:none;border:0;color:#7a7a7a;text-transform:uppercase;letter-spacing:1.2px;font-family:ubuntu-mono,'Courier New',monospace;font-size:12px;font-weight:700;padding:0 13px 7px;text-align:left;white-space:nowrap} .corpo .h78-dt-t thead th:last-child{text-align:right} .corpo .h78-dt-t thead th[data-k]{cursor:pointer;user-select:none;transition:color .15s ease} .corpo .h78-dt-t thead th[data-k]:hover{color:#000} .corpo .h78-dt-t thead th[data-k]::after{content:"\25BC";opacity:.45;margin-left:6px;font-size:9.5px} .corpo .h78-dt-t thead th[aria-sort]::after{opacity:1;color:#000} .corpo .h78-dt-t thead th[aria-sort="ascending"]::after{content:"\25B2"} .corpo .h78-dt-t tbody tr{background:#f5f5f5} .corpo .h78-dt-t tbody td{border:0;padding:15px 16px;vertical-align:middle;color:#000;background:none} .corpo .h78-dt-t tbody td:first-child{border-radius:9px 0 0 9px;padding-left:14px} .corpo .h78-dt-t tbody td:last-child{border-radius:0 9px 9px 0;text-align:right} .corpo .h78-dt-rk{width:1%;white-space:nowrap} .corpo .h78-dt-n{display:flex;align-items:center;justify-content:center;min-width:32px;height:30px;padding:0 8px;border-radius:7px;background:#e2e2e2;color:#7a7a7a;font-family:ubuntu-mono,'Courier New',monospace;font-size:13px;font-weight:700} .corpo .h78-dt--rk .h78-dt-t tbody tr:first-child .h78-dt-n{background:#000;color:#fff} .corpo .h78-dt-nm{font-weight:600;color:#000;line-height:1.3;font-size:17.5px} .corpo .h78-dt-meta{display:none} .corpo .h78-dt-val{width:1%;white-space:nowrap} .corpo .h78-dt-v{display:flex;flex-direction:column;align-items:flex-end;gap:3px} .corpo .h78-dt-b{font-weight:700;color:#000;font-size:25px;line-height:1;letter-spacing:-.5px} .corpo .h78-dt-i{font-family:ubuntu-mono,'Courier New',monospace;font-size:9.5px;color:#a8a8a8;text-transform:uppercase;letter-spacing:1.5px;line-height:1.5;text-align:right} .corpo .h78-dt-bar{height:4px;border-radius:2px;background:#e2e2e2;margin-top:9px;min-width:120px} .corpo .h78-dt-bar div{height:4px;border-radius:2px;background:#000;font-size:1px;line-height:4px} .corpo .h78-dt-ft{display:flex;flex-wrap:wrap;gap:6px 22px;padding:14px 16px 0;font-family:ubuntu-mono,'Courier New',monospace;font-size:10px;color:#a8a8a8;text-transform:uppercase;letter-spacing:2px} .corpo .h78-dt-ft b{color:#000;font-weight:700} .corpo .h78-dt-t tbody td.h78-dt-nc{white-space:normal;width:auto;vertical-align:middle;padding-left:20px} .corpo .h78-dt-nota{font-size:13px;line-height:1.45;color:#7a7a7a;text-align:right} .corpo .h78-dt-nota b{color:#000;font-weight:600} .corpo .h78-dt-t tbody td.h78-dt-tv{color:#000;font-weight:600} .corpo .h78-dt--st .h78-dt-t{min-width:470px} .corpo .h78-dt--st .h78-dt-t thead th.h78-dt-st{text-align:right;padding:0 9px 7px} .corpo .h78-dt--st .h78-dt-t thead th.h78-dt-dia{width:1%} .corpo .h78-dt--st .h78-dt-t tbody td.h78-dt-dia{width:1%;white-space:nowrap;font-family:ubuntu-mono,'Courier New',monospace;font-size:13px;font-weight:700;color:#7a7a7a;letter-spacing:.5px} .corpo .h78-dt--st .h78-dt-t tbody td.h78-dt-st{text-align:right;padding:15px 9px;font-size:18px;font-weight:700;color:#000;font-variant-numeric:tabular-nums;white-space:nowrap} .corpo .h78-dt-sub{font-family:ubuntu-mono,'Courier New',monospace;font-size:11px;color:#8a8a8a;text-transform:uppercase;letter-spacing:1px;margin-top:4px} .corpo .h78-dt-t tbody td.h78-dt-vazio{color:#c4c4c4;font-weight:400;font-size:13px} .corpo .h78-dt--cal .h78-dt-t{min-width:0;table-layout:fixed} .corpo .h78-dt--cal .h78-dt-t thead th.h78-dt-dia{width:78px} .corpo .h78-dt--cal .h78-dt-t thead th.h78-dt-st{width:158px} .corpo .h78-dt--cal .h78-dt-t tbody td.h78-dt-st{white-space:nowrap} .corpo .h78-dt--cal .h78-dt-t thead th:last-child{width:124px} .corpo .h78-dt--cal .h78-dt-t tbody td.h78-dt-nm{overflow-wrap:break-word} .corpo .h78-tl{margin:36px 0;box-sizing:border-box} .corpo .h78-tl *{box-sizing:border-box} .corpo .h78-tl-hd{padding:0 0 18px} .corpo .h78-tl-ey{font-family:ubuntu-mono,'Courier New',monospace;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#a8a8a8;margin:0 0 9px} .corpo .h78-tl-sb{font-size:14px;color:#838383;margin:0;line-height:1.55;max-width:46em} .corpo .h78-tl-ls{position:relative} .corpo .h78-tl-it{margin:0 0 7px} .corpo .h78-tl-cp{background:#f5f5f5;border-radius:9px;padding:13px 16px 13px 13px;display:flex;align-items:center;gap:14px} .corpo .h78-tl-an{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:54px;height:30px;padding:0 9px;border-radius:7px;background:#e2e2e2;color:#7a7a7a;font-family:ubuntu-mono,'Courier New',monospace;font-size:13px;font-weight:700;white-space:nowrap} .corpo .h78-tl-nm{flex:1 1 auto;font-weight:600;font-size:17.5px;color:#000;line-height:1.3} .corpo .h78-tl-rt{flex:0 0 auto;display:flex;align-items:center;gap:9px} .corpo .h78-tl-tm{font-family:ubuntu-mono,'Courier New',monospace;font-size:13.5px;color:#6e6e6e;text-transform:uppercase;letter-spacing:0.9px;white-space:nowrap} .corpo .h78-tl-bd{font-family:ubuntu-mono,'Courier New',monospace;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:#e2e2e2;color:#000;padding:3px 7px;border-radius:5px;white-space:nowrap} .corpo .h78-tl-it--s .h78-tl-cp{background:#000} .corpo .h78-tl-it--s .h78-tl-nm{color:#fff} .corpo .h78-tl-it--s .h78-tl-an{background:#fff;color:#000} .corpo .h78-tl-it--s .h78-tl-tm{color:#9c9c9c} .corpo .h78-tl-it--s .h78-tl-bd{background:#fff;color:#000} .corpo .h78-tl-sl{display:flex;align-items:center;gap:14px;margin:2px 0 9px;padding:6px 13px} .corpo .h78-tl-sl::before,.corpo .h78-tl-sl::after{content:"";flex:1 1 auto;height:1px;background:repeating-linear-gradient(to right,#c4c4c4 0 4px,transparent 4px 10px)} .corpo .h78-tl-sl-tx{flex:0 0 auto;font-family:ubuntu-mono,'Courier New',monospace;font-size:10px;font-weight:700;color:#a8a8a8;text-transform:uppercase;letter-spacing:2px;line-height:1.6;text-align:center} .corpo .h78-tl-ft{display:flex;flex-wrap:wrap;gap:6px 22px;padding:14px 0 0;font-family:ubuntu-mono,'Courier New',monospace;font-size:12.5px;color:#6e6e6e;text-transform:uppercase;letter-spacing:1.2px} .corpo .h78-tl-ft b{color:#000;font-weight:700} /* ---------- teste: primeiro bloco no preto ---------- */ .masthead, .abertura{background:var(--preto);color:var(--branco)} .mast-marca img, .barra-marca img{filter:invert(1)} .masthead .btn-menu{color:var(--branco)} .abertura .lead{color:#c9c9c9} .abertura .trilha a:hover{color:var(--branco)} .abertura .trilha span{color:#4a4a4a} .credito-linha{border-top-color:#2e2e2e} /* A barra acompanha o bloco de cima, senao ela entra branca por cima do preto logo na primeira rolagem. Preta ela tambem funciona sobre o branco de baixo, que e o mesmo caminho do rodape. */ .barra{background:var(--preto);color:var(--branco);border-bottom-color:#262626} .barra .btn-menu{color:var(--branco)} .barra-links a{color:var(--branco)} /* a barra de leitura vive colada na base da barra: no preto ela precisa ser branca pra existir */ .progresso{background:var(--branco)} /* ============================================================ Todos os cortes de tela ficam AQUI, no fim da folha. Antes eles moravam no meio e vinham antes das regras que deviam sobrescrever: mesma especificidade, ganhava o desktop, e 22 regras de celular na home e 29 no artigo nunca entravam. A ordem entre os blocos foi mantida igual a original. ============================================================ */ @media (max-width:1320px){ .barra-links a:nth-child(1){display:none} } @media (max-width:1180px){ .rod-grade{grid-template-columns:1fr 1fr;gap:52px} } @media (max-width:1180px){ /* Abaixo de 1180 as colunas de lado ficam mais estreitas que a legenda e o titulo quebra em cinco linhas. A do meio passa a ocupar a fileira toda e as duas de lado dividem a de baixo. */ .vitrine-grade{grid-template-columns:1fr 1fr;gap:40px} /* A grande passa a ocupar a fileira toda e as duas colunas de menores dividem a de baixo, senao a coluna da esquerda fica mais estreita que a propria legenda. */ .revista-grade{grid-template-columns:1fr 1fr;gap:44px} .trinca{grid-template-columns:1fr 1fr;gap:40px} .materia-grande{grid-column:1 / -1} .cartao-centro{grid-column:1 / -1;order:-1} .cartao-centro .foto{aspect-ratio:16/9} .col-lado{gap:40px} .escuro .destaque{grid-template-columns:1fr;gap:44px} } @media (max-width:1180px){ .abertura .miolo{grid-template-columns:1fr;gap:0} .abertura .lead{margin-top:30px;padding-bottom:0} .corpo-grade{grid-template-columns:1fr;gap:0} .corpo{grid-column:1;max-width:var(--medida);margin:0 auto} /* sem margem sobrando, compartilhar vira uma linha acima do texto */ .compartilhar{grid-column:1;position:static;flex-direction:row;justify-self:start;max-width:var(--medida);margin:0 auto 34px;width:100%;justify-content:flex-start} .compartilhar .rot{writing-mode:horizontal-tb;transform:none;margin:0 8px 0 0;align-self:center} .leia{grid-template-columns:repeat(2,1fr)} } @media (max-width:1150px){ .barra-links a:nth-child(1), .barra-links a:nth-child(n+6){display:none} } @media (min-width:641px) and (max-width:1023px){.corpo .h78-dt:not(.h78-dt--st) .h78-dt-t{min-width:0}.corpo .h78-dt:not(.h78-dt--st) .h78-dt-t thead th{white-space:normal;line-height:1.3}.corpo .h78-dt:not(.h78-dt--st) .h78-dt-t thead th{padding:0 9px 7px}.corpo .h78-dt:not(.h78-dt--st) .h78-dt-t tbody td{padding:14px 9px}.corpo .h78-dt:not(.h78-dt--st) .h78-dt-t tbody td:first-child{padding-left:10px}.corpo .h78-dt:not(.h78-dt--st) .h78-dt-t tbody td.h78-dt-nc{padding-left:12px}} @media (max-width:1023px){.corpo .h78-dt--cal .h78-dt-t{min-width:0}.corpo .h78-dt--cal .h78-dt-t thead th{font-size:10px;letter-spacing:.6px;padding:0 7px 7px}.corpo .h78-dt--cal .h78-dt-t thead th.h78-dt-dia{width:40px}.corpo .h78-dt--cal .h78-dt-t thead th.h78-dt-st{width:102px}.corpo .h78-dt--cal .h78-dt-t thead th:last-child{width:72px}.corpo .h78-dt--cal .h78-dt-t tbody td{padding:11px 7px}.corpo .h78-dt--cal .h78-dt-t tbody td.h78-dt-dia{font-size:11px;padding-left:9px;letter-spacing:0}.corpo .h78-dt--cal .h78-dt-nm{font-size:14.5px;line-height:1.25}.corpo .h78-dt--cal .h78-dt-t tbody td.h78-dt-st{font-size:12px;padding:11px 5px;white-space:nowrap}.corpo .h78-dt--cal .h78-dt-t tbody td.h78-dt-nc{font-size:11px;padding-right:9px;line-height:1.3}} @media (max-width:940px){ .barra-links a:nth-child(-n+2), .barra-links a:nth-child(n+5){display:none} } @media (max-width:820px){ .assine{grid-template-columns:1fr;gap:34px;padding:60px 0} .rod-grade{grid-template-columns:1fr;gap:44px;padding:56px 0} .colunas-times{columns:2} } @media (max-width:820px){ :root{--margem:22px} /* Titulos com escala propria de celular. No desktop o termo vw so passa do piso em telas grandes, entao no telefone todos ficavam parados no minimo e a hierarquia achatava conforme o aparelho crescia. */ .cartao h3{font-size:clamp(28px,8vw,38px)} .notas h3{font-size:clamp(25px,7vw,33px)} .escuro h3{font-size:clamp(30px,9vw,42px)} .assine h2{font-size:clamp(29px,8.4vw,40px)} /* Filtro: uma fileira so, que rola de lado. Quebrar em duas linhas empilhava botao com botao e empurrava a contagem pra uma terceira linha. A fileira sangra ate a borda da tela pra ficar evidente que continua. */ .filtro{display:block;margin:-8px 0 34px} .filtro-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; margin:0 calc(var(--margem) * -1);padding:2px var(--margem); scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .filtro-chips::-webkit-scrollbar{display:none} .chip{scroll-snap-align:start;padding:12px 18px} .contagem{display:block;margin:16px 0 0} .notas li{grid-template-columns:46px 1fr;gap:16px} .notas .num{font-size:38px} /* Formulario: botao embaixo e do tamanho do dedo, em vez de espremido ao lado de um campo de 200px. */ .form-assine{display:block;border-bottom:0} .form-assine input{width:100%;border-bottom:1px solid #3a3a3a;padding:14px 0} .form-assine button{width:100%;margin:18px 0 0;padding:17px 26px} .rod-fim{flex-direction:column;align-items:flex-start;gap:18px;padding:22px 0 24px} .rod-fim .legais{gap:20px} .barra-marca img{width:118px} .barra-env{height:56px;gap:12px} /* Com dois atalhos a direita a coluna passa dos 1fr e empurra a marca pra fora do centro. Fica so o primeiro, e abaixo de 560px nenhum: o + ja da conta, e a marca centrada e o que importa na barra. */ .barra-links{gap:16px;font-size:10px;letter-spacing:2px} /* No celular o rabo do 7 desce sobre a fileira de links, entao aqui ela nao sobe: fica encostada na base da imagem e passa por baixo do rabo. */ .masthead{padding:0 0 8px} .btn-mono span.rotulo{display:none} .acoes{gap:18px} .menu{padding:110px var(--margem) 50px} .menu-cols{grid-template-columns:1fr;gap:44px} .busca{margin-bottom:44px} .secao{padding:64px 0 0} .notas{columns:1} .grade-2{grid-template-columns:1fr;gap:48px} .vitrine-grade{grid-template-columns:1fr;gap:44px} .trinca{grid-template-columns:1fr;gap:46px} /* no celular a palavra e menor e a foto e uma so por linha: cobrir a mesma fatia esconderia o titulo inteiro */ .sem-pressa .trinca, .revista-grade, .leia{margin-top:-2.5%} .sem-pressa{padding-bottom:64px} /* No celular os clamps do desktop batem no piso e param de escalar: 2.2vw em 390px da 8,6px, entao valia sempre o minimo. Aqui a conta e feita na largura da tela, com teto pro tablet. A manchete entra junto: presa em 34px, ela chegava a 1,03x o tamanho dos titulos da listagem em 430px, ou seja, deixava de ser manchete. */ .cartao-centro h2{font-size:clamp(34px,10.4vw,52px)} .cartao-lado h3{font-size:clamp(27px,7.6vw,36px)} .linhas h3{font-size:clamp(27px,7.6vw,36px)} .vitrine{padding-bottom:64px} .divisa{--corte:57px} .divisa-in{padding:26px 0 26px} .divisa-nota{font-size:10px;letter-spacing:2px;margin-top:14px} .campo{padding:5px 5px 5px 18px} .campo input{font-size:16px;padding:12px 0} .campo button{padding:16px 18px;letter-spacing:2px} .revista{padding-top:44px} .rotulo{margin-bottom:6px} .revista-grade{grid-template-columns:1fr;gap:46px} .coluna{gap:46px} .materia-grande h2{font-size:clamp(32px,9.4vw,46px)} .item h3{font-size:clamp(27px,7.6vw,36px)} .pilulas{padding-top:46px} .pilula{padding:16px 24px;font-size:10px;letter-spacing:3px} /* Alvos de toque do celular: o minimo confortavel e 44px, e tres itens ficavam abaixo disso. O + do topo tinha 34px de largura, os icones de rede 42px e o "voltar ao topo" apenas 13px de altura, que no dedo vira acerto por sorte. */ .btn-menu{padding:5px} .redes a{width:44px;height:44px} .subir{padding:16px 0} .marca-fim{padding-top:10px} .linhas > li{grid-template-columns:1fr;gap:20px} .linhas > li figure,.linhas > li .conteudo{grid-column:auto} .escuro{padding:70px 0;margin-top:64px} } @media (max-width:820px){ .abertura{padding:36px 0 40px} .abertura h1{font-size:clamp(38px,12vw,58px)} .abertura .lead{font-size:19px;margin-top:26px;padding-bottom:0} .credito-linha{margin-top:38px} .corpo h2{font-size:clamp(29px,9vw,40px);margin:52px 0 22px} .capa-foto img{aspect-ratio:4/3} .corpo-grade{padding:48px 0 0} .corpo p{font-size:17px;line-height:1.72} .corpo p:first-of-type{font-size:19px;line-height:1.6} .corpo ul,.corpo ol{font-size:17px;line-height:1.72} .corpo .resumo-rapido li{font-size:16px;line-height:1.6} .leia{grid-template-columns:1fr;gap:44px} .leia h3{font-size:clamp(27px,7.6vw,36px)} .leia-secao{padding-bottom:64px} } @media (max-width:640px){.corpo .h78-dt{margin:28px 0}.corpo .h78-dt-ti{font-size:20px}.corpo .h78-dt-t{min-width:0;border-spacing:0 6px}.corpo .h78-dt-t thead{display:none}.corpo .h78-dt-t tbody tr{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;padding:14px;border-radius:9px;align-items:center}.corpo .h78-dt-t tbody td{display:block;padding:0;border-radius:0;text-align:left}.corpo .h78-dt-t tbody td:first-child,.corpo .h78-dt-t tbody td:last-child{border-radius:0;padding:0}.corpo .h78-dt-t tbody td.h78-dt-rk{grid-row:1;grid-column:1;width:auto}.corpo .h78-dt-t tbody td:nth-child(2){grid-row:1;grid-column:2}.corpo .h78-dt-t tbody td.h78-dt-val{grid-row:2;grid-column:1/3;text-align:left;width:auto;white-space:normal}.corpo .h78-dt-nm{font-size:16.5px}.corpo .h78-dt-meta{display:none}.corpo .h78-dt-v{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}.corpo .h78-dt-b{font-size:22px}.corpo .h78-dt-bar{min-width:0;margin-top:8px}} @media (max-width:640px){.corpo .h78-dt-t tbody td.h78-dt-val .h78-dt-nota{text-align:left;max-width:none;margin-top:2px}.corpo .h78-dt-t tbody td.h78-dt-nc{grid-row:2;grid-column:1/3;width:auto;text-align:left;padding-left:0}.corpo .h78-dt-t tbody td.h78-dt-nc .h78-dt-nota{text-align:left;margin-top:2px}} @media (max-width:640px){.corpo .h78-dt--st .h78-dt-t{min-width:540px}.corpo .h78-dt--st .h78-dt-t thead{display:table-header-group}.corpo .h78-dt--st .h78-dt-t tbody tr{display:table-row;padding:0}.corpo .h78-dt--st .h78-dt-t tbody td{display:table-cell;padding:13px 11px;text-align:left}.corpo .h78-dt--st .h78-dt-t tbody td.h78-dt-st{text-align:right;font-size:16px}.corpo .h78-dt--st .h78-dt-t tbody td:first-child{border-radius:9px 0 0 9px;padding-left:11px}.corpo .h78-dt--st .h78-dt-t tbody td:last-child{border-radius:0 9px 9px 0}.corpo .h78-dt--st .h78-dt-nm{font-size:15.5px}} @media (max-width:640px){.corpo .h78-tl{margin:28px 0}.corpo .h78-tl-cp{flex-wrap:wrap;gap:9px 12px;padding:12px 14px}.corpo .h78-tl-nm{flex:1 1 100%;order:3;font-size:16px}.corpo .h78-tl-rt{margin-left:auto}} @media (max-width:600px){.corpo .h78-tbl thead{position:absolute;left:-9999px}.corpo .h78-tbl tr{display:block;border:1px solid #000;margin-bottom:-1px}.corpo .h78-tbl td{display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:right;border-bottom:1px solid #eee}.corpo .h78-tbl td::before{content:attr(data-label);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.5px;color:#666;text-align:left}.corpo .h78-tbl td:first-child{background:#111;color:#fff;font-size:17px}.corpo .h78-tbl td:first-child::before{display:none}} @media (max-width:600px){.corpo .h78-cita{margin:24px 0;padding-left:16px;border-left-width:3px}.corpo .h78-cita p{font-size:19px}} @media (max-width:600px){.corpo .resumo-rapido{padding:18px 16px}} @media (max-width:560px){ /* Escondo os rotulos, nao a caixa: com display:none no container o grid perde a primeira celula e a marca deixa de ficar no centro. */ .barra-links a{display:none} } @media (min-width:1181px){ .materia-grande{position:sticky;top:100px} }