/* Mochila de Nerd - uma casa, quatro caras. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
:root {
/* A folga do alto de toda página do portal. Uma medida só, um lugar só. */
--topo-pagina: 30px;
--violet: #8b5cf6;
--orange: #ea7317;
--cyan: #22d3ee;
--red: #c0392b;
--max: 1180px;
}
/* ---------------- uma casa so: a secao troca a cor, nao o desenho ---------------- */
/* Claro, escuro ou o que o sistema pedir.
Quem manda é `color-scheme`: em "light dark" o navegador segue o sistema, e cada
`light-dark(claro, escuro)` abaixo escolhe sozinho o lado certo. Por isso a paleta
é escrita uma vez só, e não em dois blocos que precisariam andar juntos para
sempre. O atributo `data-luz` no é a escolha da pessoa: ele só tranca o
`color-scheme` num dos lados. O servidor carimba esse atributo a partir do cookie,
então a página já nasce na cor certa — não pisca branco antes do JavaScript.
Os tons das seções vêm em par: o escuro foi escolhido para contrastar com papel
branco e sumiria no fundo preto, então no escuro entra o irmão vivo dele. */
html[data-theme="portal"] {
color-scheme: light dark;
--bg: light-dark(#ffffff, #0f1116); --bg2: light-dark(#f7f9fc, #171a22);
--ink: light-dark(#151821, #e8eaf1); --dim: light-dark(#5a6373, #9aa2b4);
--line: light-dark(#e3e8f0, #272c38);
--accent: light-dark(#7c3aed, #a78bfa); --accent-vivo: #8b5cf6;
--radius: 14px; --max: 1120px;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
}
/* Duas cores de tipo, e so duas.
A cor deste portal significa FRENTE -- 3D laranja, IA ciano, Game verde, a casa violeta,
Noticias vermelho. Loja e cursos sao da casa, uma voz so em qualquer frente, e por isso
ganham cor fixa; a coluna de leitura nao ganha, porque cada materia pertence a uma frente
e a cor dela ja e da frente. Assim a cor continua dizendo uma coisa por vez.
O azul e o oliva foram os que sobraram. Os cinco tons das frentes ocupam o laranja (26),
o vermelho (0), o ciano (189), o verde (160) e o violeta (258); o azul da loja cai em 224 e
o oliva do curso em 86, que e a maior folga que restava -- 60 graus do vizinho mais proximo.
O dourado seria o tom obvio para certificado, mas fica a 9 graus do laranja do 3D: em cor,
ser distinguivel vale mais que ser simbolico. */
html[data-theme="portal"] {
--loja: light-dark(#1d4ed8, #93c5fd);
--curso: light-dark(#4d7c0f, #a3e635);
--noticia: light-dark(#b91c1c, #f87171); /* o mesmo par da frente Noticias */
}
/* A Loja e os Cursos sao itens do menu como as frentes, entao entrar neles pinta a pagina
inteira igual -- barra, titulos, links e botoes. Se o menu ensina que clicar troca a cor,
nao pode quebrar em dois casos. */
html[data-theme="portal"][data-tipo="loja"] { --accent: var(--loja); --accent-vivo: #2563eb; }
html[data-theme="portal"][data-tipo="lojafisica"] { --accent: light-dark(#0e7490, #22d3ee);
--accent-vivo: #0e7490; }
html[data-theme="portal"][data-tipo="calculadora"] { --accent: light-dark(#a16207, #fbbf24);
--accent-vivo: #a16207; }
html[data-theme="portal"][data-tipo="curso"] { --accent: var(--curso); --accent-vivo: #65a30d; }
/* A Plataforma é o roxo da casa: ela não é uma seção entre as outras, é o próprio Mochila de
Nerd visto por dentro. Sem esta linha ela era o único item do menu que acendia sem pintar
a barra — o menu ensinava uma regra e quebrava num caso. */
html[data-theme="portal"][data-tipo="plataforma"] { --accent: light-dark(#6d28d9, #c4b5fd);
--accent-vivo: #7c3aed; }
/* Botão cheio da Plataforma: ele veste o **tom forte**, e não o `--accent`. No tema escuro o
accent é o lilás claro (é ele que precisa contrastar com o fundo escuro nos títulos e
links), e um botão lilás claro com letra branca não se lê — era o "Ir para a minha conta"
quase apagado. O tom forte funciona com letra branca nos dois temas. */
html[data-theme="portal"][data-tipo="plataforma"] .btn,
html[data-theme="portal"][data-tipo="plataforma"] .btn2:not(.leve) {
background: light-dark(#5b21b6, #6d28d9); color: #fff; border-color: transparent; }
html[data-theme="portal"][data-tipo="plataforma"] .btn:hover,
html[data-theme="portal"][data-tipo="plataforma"] .btn2:not(.leve):hover {
background: light-dark(#4c1d95, #5b21b6); filter: none; }
html[data-theme="portal"][data-luz="claro"] { color-scheme: light; }
html[data-theme="portal"][data-luz="escuro"] { color-scheme: dark; }
/* A logo vem em duas versoes -- a escura para o tema claro, a branca para o escuro -- e as
duas saem na pagina; aqui se esconde a que nao e da vez. Nao da para usar `light-dark()`
como no resto: o que muda e o arquivo do ![]()
, e nao uma cor. Vale nos dois temas, portal
e console, porque quem manda e o `data-luz` do -- o mesmo atributo que tranca o
`color-scheme`. Os ![]()
destas classes nascem `inline`, que e o display devolvido a que
entra em cena. */
.so-escuro { display: none; }
html[data-luz="escuro"] .so-claro { display: none; }
html[data-luz="escuro"] .so-escuro { display: inline; }
@media (prefers-color-scheme: dark) {
html:not([data-luz="claro"]) .so-claro { display: none; }
html:not([data-luz="claro"]) .so-escuro { display: inline; }
}
html[data-theme="portal"][data-b="3d"] { --accent: light-dark(#c2410c, #fb923c);
--accent-vivo: #ea7317; }
html[data-theme="portal"][data-b="ia"] { --accent: light-dark(#0e7490, #22d3ee);
--accent-vivo: #06b6d4; }
html[data-theme="portal"][data-b="game"] { --accent: light-dark(#047857, #34d399);
--accent-vivo: #10b981; }
html[data-theme="portal"][data-b="noticias"] { --accent: light-dark(#b91c1c, #f87171);
--accent-vivo: #dc2626; }
body {
background: var(--bg); color: var(--ink);
font-family: var(--font-body); font-size: 18px; line-height: 1.7;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; margin: 0 0 .4em;
letter-spacing: -.02em; }
/* A folga entre a barra e o conteúdo mora **aqui**, e não em cada abertura: assim toda
página começa à mesma distância do menu — a que tem herói, a que começa por um cartão e a
que começa por uma tabela. Antes era o herói que dava o respiro, e quem não tinha herói
colava na barra. */
/* A distância entre a barra do topo e a primeira coisa da página é **uma só**, escrita
aqui: toda tela do portal começa na mesma linha. Quem quiser mais respiro põe no próprio
bloco, para baixo — nada volta a somar folga por cima, que era o defeito antigo (a ficha
começava 70px abaixo, a home 34 e o curso 26). */
main { max-width: var(--max); margin: 0 auto;
padding: var(--topo-pagina, 30px) 26px 90px; }
main.wide { max-width: var(--max); }
.kicker {
font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--accent); font-weight: 600; margin: 0 0 12px;
}
.dek { color: var(--dim); font-size: 1.12rem; line-height: 1.65; max-width: 62ch; margin: 0; }
/* ---------------- barra de topo ---------------- */
/* No claro a barra é branca sobre o fundo levemente quadriculado, e a diferença se vê. No
escuro os dois eram o mesmo tom e a barra sumia: ela passa a ser um degrau mais clara que
a página, como já acontece nos outros temas. */
.topbar {
position: sticky; top: 0; z-index: 20;
background: light-dark(rgba(255,255,255,.92), rgba(24,28,37,.94));
backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line);
}
/* A barra veste a frente em que a pessoa esta: um veu de 12% da cor da sub-mochila sobre
o fundo do tema. Veu e nao tarja de proposito -- a faixa carrega os links, o seletor de
tema, o chip da conta e a logo, e assim todos seguem com as cores e o contraste que ja
tinham, no claro e no escuro. A cor sai de `--accent-vivo`, que `estilo_das_marcas()`
escreve para toda sub-mochila, inclusive as criadas depois. Na home e fora das secoes o
`data-b` e "hub", e ai a barra fica como sempre foi. */
html[data-theme="portal"][data-b]:not([data-b="hub"]) .topbar,
html[data-theme="portal"][data-tipo] .topbar {
background: light-dark(
color-mix(in srgb, var(--accent-vivo) 12%, rgba(255,255,255,.92)),
color-mix(in srgb, var(--accent-vivo) 20%, rgba(15,17,22,.92)));
border-bottom-color: color-mix(in srgb, var(--accent-vivo) 30%, var(--line));
}
/* Uma linha só, sempre. Era `flex-wrap: wrap`, e aí não era o menu que quebrava — era o
bloco da conta descendo para uma segunda linha quando a marca, o menu e ele não cabiam
juntos. Quem cede é o menu, que encolhe e rola de lado; a marca e a conta não encolhem,
porque são alvos de clique de tamanho fixo. No celular a regra volta a ser `wrap`, que lá
o menu ganha uma linha própria de propósito. */
/* A logo pega as duas linhas, à esquerda, e o resto do topo se organiza numa coluna ao
lado dela: os itens fixos e a conta em cima, as frentes embaixo. Assim as duas faixas
cabem na altura que antes era de uma linha e meia — a logo, que ocupava só metade da
altura, passou a usar tudo. */
.topbar-in {
max-width: var(--max); margin: 0 auto; padding: 6px 26px;
display: flex; align-items: stretch; gap: 18px; flex-wrap: nowrap;
}
.topbar-dir { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Duas faixas com um fio no meio: em cima as frentes, embaixo os itens fixos e a conta.
O fio nasce na coluna da direita e não atravessa a logo — atravessando, ele partiria a
marca em duas metades. */
.topbar-cima { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* O fio entre as duas faixas: ele nasce na coluna da direita e vai até a ponta, sem passar
por cima da logo — atravessando, partiria a marca em duas metades. Tom um pouco mais forte
que o `--line` das bordas comuns, senão ele some no meio de dois níveis de menu. */
.topbar-baixo { display: flex; align-items: center; gap: 10px; min-width: 0;
border-top: 2px solid color-mix(in srgb, var(--ink) 26%, transparent);
padding-top: 7px; margin-top: 6px; }
.topbar-in > .brandmark { align-self: center; }
.topbar-in > .brandmark { flex: none; }
/* O menu começa logo depois da logo; só o bloco da conta guarda distância, para não colar
no último link. */
/* Os itens fixos ficam na linha de baixo com o bloco da conta no canto: são o que a casa
vende e ensina, e vêm depois do assunto — que são as frentes. */
.topbar-baixo > .nav { margin-right: auto; }
.topbar-baixo > .nav-conta { flex: none; margin-left: 14px; }
.brandmark { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.logo-topo { height: 78px; width: auto; max-width: 340px; object-fit: contain; }
.mark {
width: 28px; height: 28px; border-radius: 8px; flex: none;
background: linear-gradient(140deg, var(--violet), var(--cyan) 55%, var(--orange));
}
.wordmark { font-family: var(--font-head); font-weight: 700; letter-spacing: -.025em; font-size: 19px; }
.wordmark .de { opacity: .45; margin: 0 .18em; font-weight: 400; }
/* Com as cinco seções, a Loja, os Cursos e a Loja física, o menu passou a caber por pouco: um
pedaço a menos de tela e ele quebrava em duas linhas, empurrando a barra inteira para baixo
e mexendo na altura do topo do portal. Agora ele não quebra — encolhe e rola de lado, como
já fazia no celular. */
/* Sem `overflow` aqui. Ele existia para o menu de onze itens rolar de lado, mas rolagem
**recorta**: o painel das frentes abria dentro dela e ficava invisível, e o clique parecia
não fazer nada. Com as frentes agrupadas são cinco itens, que cabem — e no que não couber,
o menu quebra de linha em vez de esconder. */
.nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-right: auto;
min-width: 0; }
.nav-conta { display: flex; align-items: center; gap: 6px; }
/* A linha das frentes, embaixo da barra. Elas são o assunto do portal e crescem com o
tempo; a Loja, os Cursos e a Calculadora são quatro e param por aí. Separadas, a linha de
baixo cresce sozinha sem apertar nada de cima. Rola de lado quando não couber — aqui a
rolagem é segura, porque nada abre para fora dela. */
/* A faixa das frentes mora dentro da coluna da direita, ao lado da logo: por isso ela não
tem largura própria nem respiro lateral — quem cuida disso é o `.topbar-in`. Ela vai em
cima, junto do bloco da conta; a linha divisória fica na fita de baixo, que carrega os
itens fixos. */
.frentes-barra { flex: 1 1 auto; min-width: 0; }
.frentes-in { display: flex; align-items: stretch; gap: 2px; overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none; }
.frentes-in::-webkit-scrollbar { display: none; }
.frente-link {
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
text-decoration: none; color: var(--dim); font-weight: 600; font-size: .88rem;
padding: 5px 11px; border-radius: 9px;
transition: color .14s ease, background .14s ease;
}
.frente-link:hover { color: var(--ink); background: var(--bg2); }
.frente-link .secao-ponto { width: 9px; height: 9px; border-radius: 3px;
background: var(--cor, var(--dim)); flex: none; }
/* A frente aberta ganha a mesma pílula dos itens fixos, na cor dela. */
.frente-link.on { color: var(--cor, var(--accent));
background: color-mix(in srgb, var(--cor, var(--accent)) 12%, transparent); }
@media (max-width: 620px) {
.frente-link { padding: 7px 9px; font-size: .84rem; }
.logo-topo { height: 54px; }
}
/* Os dois níveis do topo se marcam do **mesmo jeito**: a pílula na cor da seção, que é
como o menu do portal sempre marcou. Duas gramáticas para dizer "você está aqui" na
mesma barra obrigavam a pessoa a aprender as duas. */
.navlink {
text-decoration: none; font-size: .92rem; font-weight: 600; color: var(--dim);
padding: 5px 11px; border-radius: 9px; white-space: nowrap;
transition: color .14s ease, background .14s ease;
}
.navlink:hover { color: var(--ink); background: var(--bg2); }
.navlink.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.navlink[data-b="nerd"].on { --accent: light-dark(#7c3aed, #a78bfa); }
.navlink[data-b="3d"].on { --accent: light-dark(#c2410c, #fb923c); }
.navlink[data-b="ia"].on { --accent: light-dark(#0e7490, #22d3ee); }
.navlink[data-b="game"].on { --accent: light-dark(#047857, #34d399); }
.navlink[data-b="noticias"].on { --accent: light-dark(#b91c1c, #f87171); }
.navlink.adm { color: var(--dim); font-weight: 500; }
.navlink.entrar {
color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
border-radius: 9px; padding: 5px 11px;
}
.navlink.entrar:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.navlink.eu { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 6px;
border: 1px solid var(--line); border-radius: 9px; color: var(--ink); }
/* O carrinho é botão da conta, e não item de menu: fica com a pílula de sempre em vez do
sublinhado — o sublinhado agora quer dizer "a seção que você está vendo". */
.navlink.carrinho-bt { padding: 5px 11px; }
/* ---------------- aberturas ---------------- */
/* A folga do alto é do `main`; aberturas não somam a delas por cima. Assim o título da
home, o de uma frente e o primeiro cartão de uma tela sem título começam **na mesma
altura** — era isso que fazia a home parecer colada no menu perto das outras. */
.hero { padding: 0 0 34px; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.5rem); margin-bottom: .3em; max-width: 18ch; }
.hero .dek { font-size: 1.18rem; }
/* A frente respira o mesmo que a home: era a home com 62px de folga e a frente com 46, e a
mesma casa não deve encolher ao trocar de página. O que continua diferente é só a cor do
título — que ali é a identidade da frente — e o fio que separa o alto do conteúdo. */
.hero-secao { padding: 0 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.hero-secao h1 { color: var(--accent); }
/* ---------------- home: as quatro frentes ---------------- */
/* As frentes que já publicam viram cartão com capa: três por linha, largura que deixa a
foto grande o bastante para valer a pena. Com sete cartões de 196px a home virava uma
estante de caixinhas — e três delas estavam vazias. */
.secoes {
display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
margin-bottom: 10px;
}
@media (max-width: 980px) {
.secoes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.secoes { grid-template-columns: 1fr; }
}
.secao {
border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px;
border-top: 3px solid var(--cor); transition: box-shadow .16s ease, transform .16s ease;
}
.secao:hover { box-shadow: 0 10px 30px rgba(21, 24, 33, .08); transform: translateY(-2px); }
.secao[data-b="nerd"] { --cor: #8b5cf6; --accent: light-dark(#7c3aed, #a78bfa); }
.secao[data-b="3d"] { --cor: #ea7317; --accent: light-dark(#c2410c, #fb923c); }
.secao[data-b="ia"] { --cor: #06b6d4; --accent: light-dark(#0e7490, #22d3ee); }
.secao[data-b="game"] { --cor: #10b981; --accent: light-dark(#047857, #34d399); }
.secao[data-b="noticias"] { --cor: #dc2626; --accent: light-dark(#b91c1c, #f87171); }
/* A capa é a matéria mais nova da frente, e é ela que faz o cartão ser olhado antes de
ser lido. Sem foto, uma faixa na cor da frente com o nome dela: buraco branco no meio da
grade parece imagem que não carregou. */
.frente-capa { display: block; overflow: hidden; border-radius: var(--radius);
border: 1px solid var(--line); background: var(--bg2); position: relative; }
.frente-capa img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; display: block;
transition: transform .35s ease; }
.secao:hover .frente-capa img { transform: scale(1.03); }
.frente-capa-vazia { display: flex; align-items: center; justify-content: center;
aspect-ratio: 16 / 9; background: var(--cor); color: #fff; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; }
.frente-titulo { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.frente-titulo a { text-decoration: none; }
.frente-titulo a:hover { color: var(--accent); }
.secao-cab { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.secao-ponto { width: 12px; height: 12px; border-radius: 4px; background: var(--cor); flex: none; }
.secao h2 { font-size: 1.22rem; margin: 0; }
.secao .kicker { margin: 0 0 2px; font-size: .68rem; color: var(--dim); }
.secao .tag-line { margin: 0; color: var(--dim); font-size: .95rem; }
.secao-lista { list-style: none; margin: 4px 0 0; padding: 0; }
.secao-lista li + li { border-top: 1px solid var(--line); }
/* As frentes que ainda não publicaram: uma fita de chips na cor de cada uma, embaixo da
grade. Elas continuam a um clique — quem quer ver a de Esporte chega nela —, sem ocupar
um cartão inteiro para dizer que ainda não há nada lá dentro. */
.frentes-esperando { margin: 4px 0 30px; }
.frentes-esperando .rotulo-solto { margin-bottom: 8px; }
.frentes-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.frente-chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
font-weight: 600; font-size: .92rem; color: var(--ink); background: var(--bg); }
.frente-chip:hover { border-color: var(--cor, var(--accent)); color: var(--cor, var(--accent)); }
.frente-chip .secao-ponto { width: 10px; height: 10px; border-radius: 3px;
background: var(--cor, var(--accent)); }
.secao-lista a {
display: block; padding: 10px 0; text-decoration: none; font-size: .95rem;
font-weight: 500; line-height: 1.4;
}
.secao-lista a:hover { color: var(--accent); }
.secao-lista time { display: block; color: var(--dim); font-size: .78rem; font-weight: 400; margin-top: 2px; }
.secao-lista .empty { color: var(--dim); font-size: .9rem; padding: 10px 0; }
.secao-lista .selo {
position: static; display: inline-block; margin-left: 6px; padding: 1px 7px;
font-size: .62rem; vertical-align: middle;
}
.secao .go { margin-top: auto; padding-top: 6px; font-size: .92rem; font-weight: 600;
color: var(--accent); text-decoration: none; }
/* ---------------- listagens ---------------- */
.section-title {
font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid var(--line);
margin: 58px 0 30px;
}
.grid { display: grid; gap: 34px 28px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 12px; }
.card-in { display: flex; flex-direction: column; gap: 10px; }
.card .thumb { display: block; overflow: hidden; border-radius: var(--radius);
border: 1px solid var(--line); background: var(--bg2); }
.card .thumb img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; transition: transform .35s ease; }
.card:hover .thumb img { transform: scale(1.03); }
.card h3 { font-size: 1.28rem; margin: 0; line-height: 1.28; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card .dek { color: var(--dim); font-size: 1rem; margin: 0; line-height: 1.55; }
.eyebrow { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--dim); font-weight: 600; }
.card[data-b="nerd"] .eyebrow { color: light-dark(#7c3aed, #a78bfa); }
.card[data-b="3d"] .eyebrow { color: light-dark(#c2410c, #fb923c); }
.card[data-b="ia"] .eyebrow { color: light-dark(#0e7490, #22d3ee); }
.card[data-b="game"] .eyebrow { color: light-dark(#047857, #34d399); }
.card[data-b="noticias"] .eyebrow { color: light-dark(#b91c1c, #f87171); }
.meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
font-size: .82rem; color: var(--dim); }
.dot { opacity: .5; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; font-size: .76rem; }
.lead { margin-bottom: 20px; }
.card.big { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; }
.card.big h3 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.18; }
.card.big .dek { font-size: 1.08rem; }
.listing .empty, .empty { color: var(--dim); font-size: 1rem; }
.irmas {
margin-top: 74px; padding-top: 26px; border-top: 1px solid var(--line);
display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap;
}
.irmas > span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
font-weight: 600; }
.irmas div { display: flex; gap: 18px; flex-wrap: wrap; }
.irmas a { font-size: .98rem; font-weight: 600; text-decoration: none; }
.irmas a[data-b="nerd"] { color: light-dark(#7c3aed, #a78bfa); }
.irmas a[data-b="3d"] { color: light-dark(#c2410c, #fb923c); }
.irmas a[data-b="ia"] { color: light-dark(#0e7490, #22d3ee); }
.irmas a[data-b="game"] { color: light-dark(#047857, #34d399); }
.irmas a[data-b="noticias"] { color: light-dark(#b91c1c, #f87171); }
.irmas a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ---------------- artigo: feito para ler ---------------- */
/* -------- a tela da materia: texto e a coluna do lado --------
Tres partes de texto para uma de lista, como uma pagina de jornal. A lista ficava embaixo,
e embaixo so e vista por quem chega ao fim; do lado ela acompanha a leitura inteira.
O `minmax(0, 3fr)` no lugar de `3fr` e o que impede a coluna do texto de estourar quando
dentro dela vier algo largo -- uma tabela, um bloco de codigo, uma imagem grande: sem o
minimo zero, a coluna cresce junto com o conteudo e empurra a lista para fora da tela. */
.materia-tela { display: grid; grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr);
gap: 20px 48px; align-items: start; }
.materia-corpo { min-width: 0; }
/* A ficha do produto entra na grade da matéria sem o `.post`, que é quem carrega a folga do
alto — sem isto o rastro de migalhas cola na barra do topo e ainda começa 34px acima da
coluna do lado, que já tem a dela. O `>` é de propósito: na matéria o crumb mora dentro do
`.post-topo` e não deve ganhar folga nenhuma. */
/* 34px aqui somavam com os 34 do `main` e davam quase 70px de vazio entre a barra do topo
e a primeira palavra da ficha — em produto, matéria, curso e pacote. Doze bastam para o
rastro de migalhas não colar na barra. */
.materia-corpo > .crumb { margin-top: 0; }
.materia-tela .post { max-width: 46rem; margin: 0; }
/* A coluna acompanha a rolagem, presa por cima. Sem altura maxima e sem rolagem propria: uma
barra de rolagem dentro da pagina e um segundo lugar para rolar, e ninguem espera isso numa
lista de leitura. A lista ja vem cortada em dez pelo servidor -- e o corte que resolve o
tamanho, nao a barra. */
/* A coluna do lado começa na mesma linha do corpo: ela tinha 34px de folga própria para
acompanhar o crumb, que já não os tem. */
.lado-preso { position: sticky; top: 22px; padding-top: 0; }
.materia-lado .col-tit { margin-top: 0; }
.materia-lado .item-capa { width: 62px; height: 62px; }
@media (max-width: 1000px) {
.materia-tela { grid-template-columns: 1fr; gap: 0; }
.materia-tela .post { max-width: 42rem; margin-left: auto; margin-right: auto; }
.lado-preso { position: static; max-height: none; overflow: visible; padding-top: 0; }
.materia-lado { max-width: 42rem; margin: 10px auto 0; }
}
.post { max-width: 42rem; margin: 34px auto 0; }
.crumb { margin: 0 0 16px; font-size: .82rem; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; }
.crumb a { color: var(--accent); text-decoration: none; }
.post h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); line-height: 1.15; margin-bottom: .28em; }
.post-meta {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .88rem;
color: var(--dim); padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
/* ---- a fita do leitor, no fim da matéria ----
No fim e não no começo: reação antes de ler é palpite. Os botões são grandes o
bastante para o dedo (44px de alvo), e o estado marcado é dito por cor, por moldura e
pelo `aria-pressed` — nunca só pela cor. */
.fita-leitor {
margin: 40px 0 8px; padding: 22px 24px; border-radius: 18px;
background: var(--bg2); border: 1px solid var(--line); scroll-margin-top: 84px;
}
.fita-tit { margin: 0 0 14px; font-weight: 700; font-size: 1.02rem; }
/* Uma linha só: os cinco botões são os mesmos em toda tela, e quebrar a fila embaralha a
ordem que a pessoa decorou. Eles encolhem o texto antes de descer de linha; no celular,
onde cinco não cabem de jeito nenhum, a fita volta a quebrar. */
.fita-bts { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.fita-bts form { margin: 0; min-width: 0; }
@media (max-width: 700px) {
.fita-bts { flex-wrap: wrap; }
}
.reacao {
display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
white-space: nowrap; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
background: var(--bg); color: var(--ink); font: inherit; font-size: .88rem;
font-weight: 600; cursor: pointer; text-decoration: none;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.reacao:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
color: var(--accent); }
.reacao .ic { width: 18px; height: 18px; }
.reacao b { font-variant-numeric: tabular-nums; font-size: .84rem;
padding-left: 2px; opacity: .75; }
.reacao.on {
border-color: var(--accent); color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.reacao.on b { opacity: 1; }
.reacao.guardar { margin-left: auto; }
/* O menu de encaminhar abre sem script: é um . A seta que o navegador desenha
sozinho sai, porque o botão já tem o ícone de link dizendo o que ele é. */
.mandar { position: relative; }
.mandar > summary { list-style: none; }
.mandar > summary::-webkit-details-marker { display: none; }
.mandar[open] > summary { border-color: var(--accent); color: var(--accent); }
.mandar-lista {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; width: 232px;
display: flex; flex-direction: column; gap: 2px; padding: 8px;
background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 18px 40px -18px light-dark(rgba(20,24,40,.4), rgba(0,0,0,.75));
}
.mandar-op {
display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px;
border: none; background: none; color: var(--ink); font: inherit; font-size: .88rem;
text-decoration: none; cursor: pointer;
}
.mandar-op:hover { background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent); }
.mandar-op.copiado { color: var(--accent); font-weight: 700; }
.mandar-url {
margin-top: 6px; width: 100%; padding: 8px 10px; font-size: .76rem;
border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
color: var(--dim); font-family: inherit;
}
@media (max-width: 560px) {
.reacao.guardar { margin-left: 0; }
.mandar-lista { right: auto; left: 0; }
}
/* Página de texto legal: coluna estreita como a de leitura, títulos menores que os de
matéria (aqui ninguém lê por prazer, lê para achar um parágrafo) e listas com respiro
para o item ser encontrado de relance. */
.legal-hero { padding-bottom: 8px; }
.prose.legal { max-width: 44rem; margin: 8px auto 60px; }
.prose.legal h2 { font-size: 1.24rem; margin: 2.2em 0 .6em; scroll-margin-top: 90px; }
.prose.legal h2:first-child { margin-top: 1em; }
.prose.legal li { margin-bottom: .55em; }
.prose.legal code { font-size: .88em; background: var(--bg2); padding: 1px 5px;
border-radius: 5px; }
.copy a { color: inherit; }
.cover { margin: 30px 0; }
.cover img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; }
.prose { font-size: 1.16rem; line-height: 1.8; margin-top: 30px; }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.35em; }
.prose h2 { font-size: 1.75rem; margin: 1.9em 0 .5em; }
.prose h3 { font-size: 1.35rem; margin: 1.7em 0 .45em; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.prose li { margin-bottom: .55em; }
.prose img { border-radius: var(--radius); border: 1px solid var(--line); margin: 1.8em 0; }
.prose blockquote {
margin: 1.8em 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--accent);
color: var(--dim); font-style: italic; font-size: 1.1rem;
}
.prose code {
font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .9em;
background: color-mix(in srgb, var(--ink) 7%, transparent); padding: .12em .4em; border-radius: 5px;
}
.prose pre {
background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px 20px; overflow-x: auto; font-size: .95rem; line-height: 1.6;
}
.prose pre code { background: none; padding: 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }
/* ---------------- rodape ---------------- */
/* O rodapé veste a mesma cor da barra do menu: são as duas pontas da mesma moldura, e a
página fica entre elas. Sem véu de frente ele é o tom da barra; dentro de uma frente,
ganha o mesmo véu que ela — a regra logo abaixo é a gêmea da do topo. */
/* Os desafios abertos, na frente do esporte: cartão com a foto de capa, o caminho, a barra
do quanto já andou e de quem é. Mesma grade dos cursos, para a frente não parecer três
sites. */
.desafios-grade { display: grid; gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.desafio-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
background: var(--bg); transition: box-shadow .16s ease, transform .16s ease; }
.desafio-card:hover { box-shadow: 0 10px 30px rgba(21,24,33,.08); transform: translateY(-2px); }
.desafio-card-capa img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.desafio-card-txt { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; }
.desafio-card-txt .kicker { margin: 0; }
.desafio-card-txt strong { font-size: 1.08rem; line-height: 1.3; }
.desafio-card-txt small { color: var(--dim); font-size: .85rem; }
.desafios-vitrine { margin-bottom: 40px; }
.desafios-vitrine .dek { max-width: 60ch; margin: -6px 0 18px; }
/* As mais lidas da semana: uma lista numerada, curta, com a frente de cada uma embaixo do
título. Números grandes e apagados — eles ordenam, não competem com o texto. */
.mais-lidas { margin: 6px 0 40px; }
.mais-lidas ol { list-style: none; margin: 0; padding: 0;
display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mais-lidas li a { display: flex; align-items: baseline; gap: 12px; text-decoration: none;
color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
padding: 12px 16px; height: 100%; }
.mais-lidas li a:hover { border-color: var(--cor, var(--accent)); }
.lida-num { font-size: 1.5rem; font-weight: 800; color: var(--cor, var(--accent));
opacity: .35; font-variant-numeric: tabular-nums; line-height: 1; flex: none; }
.lida-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lida-txt strong { font-size: .97rem; line-height: 1.32; font-weight: 600; }
.lida-txt small { color: var(--dim); font-size: .76rem; text-transform: uppercase;
letter-spacing: .08em; }
/* A busca do portal: uma caixa larga na abertura da tela e um atalho de lupa no menu.
É `