/* =============================================================
Clube CZL — folha de estilo
-------------------------------------------------------------
MOBILE-FIRST. Escrito do celular para cima, não o contrário.
O público é maioritariamente angolano, e maioritariamente
celular. O protótipo escondia o menu de espaços abaixo de
1080px sem pôr nada no lugar — no celular a pessoa ficava
sem navegação nenhuma. Aqui isso está resolvido com barra
inferior fixa e uma gaveta para os espaços.
Os tokens de cor e as fontes vêm do banco (lib/tema.php).
Este arquivo nunca traz cor escrita à mão.
============================================================= */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--ground);
color:var(--text);
font-family:var(--font-ui);
/* 16px no celular. Abaixo disso o iOS dá zoom sozinho no
campo de texto e desalinha a tela inteira. */
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-wrap:break-word;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--brass);text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Tudo que se toca tem 44px. Abaixo disso, dedo erra. */
.toque{min-height:44px;min-width:44px}
/* =============================================================
ESTRUTURA — celular primeiro
============================================================= */
.app{
min-height:100dvh; /* dvh acompanha a barra do navegador */
display:flex;
flex-direction:column;
}
/* ============================================================
A FAIXA DA ESCASSEZ — LETRA GRANDE (03/10/2026)
Ele: *"vamos diminuir palavras para aumentar a letra. Nem que
aumente o banner. Esse texto pegar toda essa area da
comunidade: desde a metade do menu lateral ate a metade do meu
nome. E no celular tambem precisa ter esse respiro."*
DOIS NUMEROS MANDAM, e vivem aqui em cima:
--urg-h a altura da faixa — e o `top` do topo da casa
--urg-teto o tamanho MAXIMO da letra
🔴 A altura aparecia em dois sitios — na faixa e no `top` da
`.topbar` — e tinha de ser o mesmo numero nos dois. Era uma
armadilha a espera: mudar um e esquecer o outro poe o topo da
casa por baixo da faixa. Agora e' uma variavel, escrita uma
vez e lida nos dois.
============================================================ */
:root{ --urg-h:74px; --urg-teto:26px; }
@media (min-width:768px){ :root{ --urg-h:64px; --urg-teto:36px; } }
.urg{
position:sticky;top:0;z-index:31;
display:flex;align-items:center;justify-content:center;
box-sizing:border-box;
height:calc(var(--urg-h) + env(safe-area-inset-top));
padding:0 16px;padding-top:env(safe-area-inset-top);
background:#C1121F;color:#fff;
/* Ultima barreira, para o caso de o script nao correr. */
overflow:hidden;
}
/* 🔴 TEXTO CORRIDO, E NAO UMA CAIXA DE FLEX.
Com flex, a frase e a contagem sao duas pecas: quando a frase
enche a linha, a contagem nao continua ao lado — salta para
uma linha so' dela. Num ecra de 390 isso dava TRES linhas e
obrigava a letra a descer aos 18px. Em texto corrido a
contagem e' so' mais uma palavra da frase: duas linhas, e a
letra sobe ao teto. Medido na bancada, nao presumido.
O TEXTO PARA ONDE ELE MANDOU PARAR. No computador o bloco da
casa tem 1180px: o menu come 252 a' esquerda, o nome dele fica
encostado a' direita. Metade do menu da' x=176, metade do nome
x=1144 — 968px entre os dois. E' esse o tamanho desta caixa. */
.urg__in{
width:100%;max-width:968px;
font-weight:800;
font-size:var(--urg-teto);
line-height:1.2;
font-family:var(--font-ui);
letter-spacing:.02em;
text-transform:uppercase;
text-align:center;
/* Reparte as duas linhas em vez de deixar uma orfa com duas
palavras. Onde o navegador nao conhecer, quebra como sempre. */
text-wrap:balance;
/* 🔴 A FRASE TEM DE PODER QUEBRAR. A versao de uma linha tinha
`white-space:nowrap` — era ele que mandava o texto pela borda
fora em vez de passar para baixo. A regra velha continua no
ficheiro: esta tem de a desfazer a' mao. */
white-space:normal;
}
/* ---- O RELÓGIO NUMA CAIXA BRANCA (04/10/2026) ----
Ele: *"o que acha de colocar o cronômetro dentro de uma caixa
branca com as letras vermelhas? Vai destacar bastante. Ou vai
ficar muito espalhafatoso?"*
Fica bem: a cor trocada separa o QUANTO FALTA da frase que o
explica, e o olho vai lá primeiro — que é o ponto de uma faixa
de urgência. Espalhafatoso seria pôr a frase inteira a piscar.
🔴 A CAIXA MEDE-SE EM `em`, NÃO EM PIXEIS. O ajuste da faixa
encolhe a letra até caber; com padding fixo em pixeis, a caixa
ficaria cada vez mais gorda à volta de uma letra cada vez mais
pequena — e num ecrã estreito era ela que roubava a linha.
Em `em`, a caixa encolhe junto.
A contagem nunca parte ao meio: "22H 31M 58S" em duas linhas
não se lê. */
.urg__rel{
display:inline-block;
white-space:nowrap;font-variant-numeric:tabular-nums;
background:#fff;color:#C1121F;
padding:.08em .34em;border-radius:.26em;
letter-spacing:.01em;
}
/* Fechou: deixa de gritar, mas continua a dizer que fechou. */
.urg--fim{background:var(--surface-3);color:var(--muted)}
/* Só desce o topo quando a faixa existe mesmo — por isso o
selector é de irmão, e não uma classe no .
🔴 `~` e não `+`: entre a faixa e o topo existe o bloco de
script da contagem, e o irmão ADJACENTE não atravessa um
elemento pelo meio. Com `+` a regra existia e nunca se
aplicava — do género que não dá erro e só aparece no dia em
que a tela rola. */
.urg ~ .topbar{
top:calc(var(--urg-h) + env(safe-area-inset-top));
padding-top:10px;
}
/* E o menu lateral cola ABAIXO da faixa e do topo, não debaixo
deles. O `top:60px` fiava-se em que não houvesse faixa: com
ela, o primeiro bloco do menu escondia-se atrás do topo assim
que o mural rolava. */
@media (min-width:768px){
.urg ~ .shell .rail{
top:calc(var(--urg-h) + 60px);
height:calc(100vh - var(--urg-h) - 60px);
}
}
/* =============================================================
O RECADO QUE TOMA A TELA (03/10/2026)
-------------------------------------------------------------
Ele: "quando a pessoa for acessar a comunidade, que abra um
aviso tomando praticamente a tela toda... é a página preta, do
jeito que está lá. Essa faixa vermelha, comunicado urgente,
gostei."
A faixa vermelha é nossa; o resto da caixa é só moldura. O
fundo é o PRETO da página dele de propósito: enquanto ela
carrega, a moldura já tem a cor dela, em vez de dar um lampejo
claro e depois escurecer.
============================================================= */
.cmd{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px}
.cmd[hidden]{display:none}
.cmd__fundo{position:absolute;inset:0;background:rgba(3,18,31,.78)}
.cmd__folha{
position:relative;display:flex;flex-direction:column;
width:100%;max-width:820px;height:calc(100dvh - 32px);
border-radius:16px;overflow:hidden;
background:#0b0b0b;box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.cmd__topo{
flex:none;display:flex;align-items:center;justify-content:center;
position:relative;min-height:46px;padding:0 48px;
background:#C1121F;color:#fff;
}
.cmd__selo{font:800 13px/1.2 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;text-align:center}
.cmd__x{
position:absolute;right:6px;top:50%;transform:translateY(-50%);
width:38px;height:38px;display:grid;place-items:center;
background:none;border:0;cursor:pointer;color:#fff;border-radius:9px;
}
.cmd__x:hover{background:rgba(255,255,255,.16)}
/* A PAGINA DELE, INTEIRA E INTACTA. */
.cmd__pag{flex:1 1 auto;min-height:0;width:100%;border:0;display:block;background:#0b0b0b}
.cmd__pe{
flex:none;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
background:#0b0b0b;border-top:1px solid rgba(255,255,255,.12);text-align:center;
}
.cmd__fechar{
background:none;border:0;cursor:pointer;padding:6px 10px;
font:600 13px/1.3 var(--font-ui);color:rgba(255,255,255,.62);
}
.cmd__fechar:hover{color:#fff}
@media (max-width:640px){
.cmd{padding:0}
.cmd__folha{max-width:none;height:100dvh;border-radius:0}
.cmd__topo{padding-top:env(safe-area-inset-top);min-height:calc(46px + env(safe-area-inset-top))}
.cmd__selo{font-size:12px;letter-spacing:.13em}
}
/* ---- topo ---- */
.topbar{
position:sticky;top:0;z-index:30;
display:flex;align-items:center;gap:12px;
padding:10px 14px;
padding-top:calc(10px + env(safe-area-inset-top));
background:var(--surface);
border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand__mark{
width:30px;height:30px;border-radius:8px;flex:none;
background:linear-gradient(150deg,var(--brass) 0%,var(--brass-ink) 100%);
display:grid;place-items:center;color:var(--surface);
font-family:var(--font-display);font-size:18px;line-height:1;padding-bottom:2px;
}
.brand__name{
font-family:var(--font-display);font-size:19px;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand__name em{font-style:italic;color:var(--brass)}
/* ---- A MARCA ----
Duas palavras, uma fonte, uma linha de base. "CLUBE" na cor
do texto, "CZL" no dourado da marca. Alinhado por construcao:
nao ha imagem para casar com texto, entao nao ha o que
desalinhar quando muda o tamanho da tela ou a fonte carrega.
O espaco entre as duas e um margin, nao um espaco digitado —
espaco digitado colapsa e muda de largura com a fonte. */
.marca{
display:inline-flex;align-items:baseline;
font-family:var(--font-ui);
font-weight:800;
font-size:20px;
line-height:1;
letter-spacing:.03em;
text-transform:uppercase;
color:var(--ink);
white-space:nowrap;
}
.marca__czl{
color:var(--brass);
margin-left:.28em;
letter-spacing:.06em;
}
.topbar__spacer{flex:1}
/* ---- a logo ----
Duas imagens no HTML, uma escondida por tema. Sem JavaScript
e sem piscar quando o tema muda. */
.logo{height:26px;width:auto;max-width:120px;object-fit:contain;display:block;flex:none}
.logo--entrada{height:40px;max-width:150px}
/* logo + nome andam juntos e alinhados */
.brand,.conta__marca,.fluxo__topo .brand{display:flex;align-items:center;gap:10px}
.conta__marca{justify-content:center;margin-bottom:26px}
.conta__marca .brand__name{font-size:22px}
.logo--escuro{display:none}
:root[data-theme="escuro"] .logo--claro{display:none}
:root[data-theme="escuro"] .logo--escuro{display:block}
/* A logo é PNG de fundo transparente: o dourado assenta direto
sobre o petróleo e sobre o claro, sem moldura nenhuma. */
/* Botão que abre a gaveta de espaços. Só existe no celular. */
.abrir-espacos{
display:grid;place-items:center;width:40px;height:40px;
border-radius:9px;color:var(--muted);
}
.abrir-espacos:hover{background:var(--surface-2);color:var(--ink)}
/* ---- corpo ---- */
.shell{flex:1;display:flex;min-height:0}
/* Sem a coluna da direita, o feed centra-se e respira. Um feed
colado a esquerda num monitor largo fica com meio ecra de nada
ao lado, e a leitura sofre. */
.stage{flex:1;min-width:0;display:flex;flex-direction:column}
.column--feed{max-width:760px;margin:0 auto}
.column{
flex:1;min-width:0;width:100%;
padding:16px 14px;
/* espaço para a barra de baixo não tapar o último post */
padding-bottom:calc(84px + env(safe-area-inset-bottom));
}
/* ---- barra inferior: a navegação do celular ---- */
.tabbar{
position:fixed;left:0;right:0;bottom:0;z-index:40;
display:flex;
background:var(--surface);
border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a,.tabbar button{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;padding:8px 4px;min-height:52px;
color:var(--muted);font-size:10.5px;font-family:var(--font-mono);
letter-spacing:.04em;text-transform:uppercase;
}
.tabbar svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
.tabbar [aria-current="page"]{color:var(--brass)}
/* ---- gaveta dos espaços (celular) ---- */
.gaveta{
position:fixed;inset:0;z-index:50;
display:none;
}
.gaveta[open],.gaveta.is-on{display:block}
.gaveta__fundo{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.gaveta__folha{
position:absolute;top:0;bottom:0;left:0;width:min(86vw,320px);
background:var(--surface);border-right:1px solid var(--line);
padding:16px 12px;
padding-top:calc(16px + env(safe-area-inset-top));
overflow-y:auto;
animation:entrar .18s ease-out;
}
@keyframes entrar{from{transform:translateX(-100%)}to{transform:none}}
/* =============================================================
ESPAÇOS (rail e gaveta usam as mesmas peças)
============================================================= */
.rail__label{
padding:0 10px;margin:14px 0 5px;
display:flex;align-items:center;gap:6px;
}
.rail__label:first-child{margin-top:0}
.space{
width:100%;display:flex;align-items:center;gap:10px;
padding:11px 10px;border-radius:9px;color:var(--muted);
text-align:left;min-height:44px;
}
.space:hover{background:var(--surface-2);color:var(--ink)}
.space.is-active{background:var(--surface-3);color:var(--ink);font-weight:600}
.space__dot{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
.space.is-active .space__dot{background:var(--brass)}
.space__name{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.space__count{font-family:var(--font-mono);font-size:11px;color:var(--faint)}
/* =============================================================
PASTILHAS
============================================================= */
.metal{
font-family:var(--font-mono);font-size:9.5px;font-weight:600;
letter-spacing:.07em;padding:2px 6px;border-radius:3px;white-space:nowrap;
}
.metal--bronze{background:var(--bronze-wash);color:var(--bronze)}
.metal--prata{background:var(--prata-wash);color:var(--prata)}
.metal--ouro{background:var(--brass-wash);color:var(--brass)}
.metal--convidado{background:transparent;color:var(--faint);border:1px solid var(--line)}
/* FUNDADOR e MODERACAO nao sao degraus da tabela de precos: sao
quem responde pela casa. Por isso nao levam a lavagem clara
dos planos — levam fundo cheio e escuro, que e o unico selo
com peso na linha. Bronze, Prata e Ouro sao o que se compra;
estes dois, nao. Ver czl_faixa() em lib/membro_publico.php. */
/* ---- avatar com foto ----
A foto entra como dentro do mesmo circulo das iniciais,
entao todo o resto do CSS (tamanho, borda, ponto de online)
continua a valer sem duplicar nada. */
/* O recorte redondo vai na IMAGEM, nao no circulo de fora.
Com overflow:hidden no circulo, o ponto de online ficava
cortado pela borda — ele tem de assentar POR CIMA e POR FORA
da foto, que e onde se le num relance. */
.avatar--foto{padding:0}
.avatar--foto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* ---- acoes de texto no rodape do post ---- */
.act--txt{
font-family:var(--font-ui);font-size:12.5px;letter-spacing:.01em;
padding:8px 10px;min-height:44px;
}
.act--perigo:hover{color:var(--live)}
/* ---- caixa de editar ---- */
.editar{border-top:1px solid var(--line-soft);padding-top:12px;margin-top:2px}
.editar textarea{
width:100%;box-sizing:border-box;background:var(--surface-2);
border:1px solid var(--line-soft);border-radius:10px;padding:12px;
color:var(--text);font:inherit;font-size:16px;line-height:1.55;
resize:vertical;outline:none;
}
.editar textarea:focus{border-color:var(--brass)}
.editar__pe{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
@media (min-width:768px){.editar textarea{font-size:14.5px}}
/* ---- grelha de emoji ---- */
.act--emoji svg{width:19px;height:19px}
/* [hidden] do navegador e display:none, mas uma regra de CLASSE
com display:grid ganha dele por especificidade — por isso a
grelha nascia aberta. A regra do hidden tem de ser explicita,
e vir depois. */
.emojis[hidden]{display:none}
.emojis{
display:grid;grid-template-columns:repeat(8,1fr);gap:2px;
margin-top:10px;padding:8px;border-radius:10px;
background:var(--surface-2);border:1px solid var(--line-soft);
}
.emojis__um{
background:none;border:0;cursor:pointer;border-radius:8px;
font-size:20px;line-height:1;padding:8px 0;min-height:44px;
}
.emojis__um:hover{background:var(--surface-3)}
@media (max-width:400px){.emojis{grid-template-columns:repeat(6,1fr)}}
/* PROFESSOR — o mais forte da tela, e por uma razão simples: é
um só no Clube inteiro. Dourado cheio, letra escura, um fio de
luz em volta. Nenhum outro selo pode chegar perto disto.
Já esteve mais fraco que o do suporte, e ficou ridículo: o
atendimento gritava mais alto que o dono da casa. Se um dia
alguém acrescentar um selo novo, ele entra ABAIXO deste. */
.metal--fundador{
background:linear-gradient(150deg,var(--brass-ink) 0%,var(--brass) 55%,var(--brass-ink) 100%);
color:var(--ground);font-weight:700;letter-spacing:.11em;
border:1px solid var(--brass);
box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 2px 8px -2px var(--brass);
padding:2.5px 8px;
}
.metal--moderador{background:var(--prata);color:var(--ground);font-weight:700}
/* BANDEIRAS NO WINDOWS (14/09/2026).
O Windows nao desenha emoji de bandeira: mostrava "AO Angola"
em vez da bandeira. Esta fonte so entra para os simbolos de
bandeira (unicode-range); letras e numeros seguem na fonte da casa. */
@font-face{
font-family:"Twemoji Country Flags";
unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E007F;
src:url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2");
font-display:swap;
}
.flag{
font-family:"Twemoji Country Flags",var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;
padding:1.5px 4.5px;border-radius:3px;background:var(--surface-3);
color:var(--muted);border:1px solid var(--line-soft);
}
.crown{
font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;
padding:1.5px 5px;border-radius:3px;color:var(--surface);background:var(--brass-ink);
}
.avatar{
flex:none;border-radius:50%;display:grid;place-items:center;
font-weight:700;color:#fff;font-size:12px;position:relative;
width:38px;height:38px;
}
.avatar--sm{width:30px;height:30px;font-size:10.5px}
/* =============================================================
CARTÕES E POSTS
============================================================= */
.card{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow);
}
.post{padding:14px;margin-bottom:12px}
.post__head{display:flex;gap:11px;align-items:flex-start}
.post__id{flex:1;min-width:0}
.post__name{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
color:var(--ink);font-weight:600;font-size:14px;
}
.post__sub{font-family:var(--font-mono);font-size:11px;color:var(--faint);margin-top:2px}
.post__body{margin-top:11px;font-size:15px;line-height:1.62}
/* O CARTAO DO PROFESSOR.
Num mural de apresentacoes, a publicacao que ensina tem de se
distinguir da que cumprimenta - sem gritar. Tres coisas e mais
nenhuma: a barra a' esquerda, o titulo como cabecalho e o realce
do trecho que importa.
A BARRA E O SELO SAO A IDENTIDADE DA CASA (`--brass`: verde no
Radar, azul no Clube, roxo na Semana). O REALCE NAO E' IDENTIDADE,
E' PAPEL - marcador de texto - e por isso sai do `--warn`, que e'
o tom quente que ja' existe no tema das tres. Assim o dourado e'
igual nas tres casas sem cor escrita a' mao, e sem competir com
a cor que diz em que casa a pessoa esta'. */
.post--dono{border-left:3px solid var(--brass)}
.post__titulo{
margin-top:12px;font-size:18px;line-height:1.3;
font-weight:600;color:var(--ink);letter-spacing:-.01em;
}
.post__titulo + .post__body{margin-top:9px}
/* O REALCE TEM DE SE VER NO ESCURO.
A primeira versao usava `--brass-wash` de fundo e `--brass-ink`
de texto. No escuro do Radar isso da' #12241C atras de #F5F7FA -
ou seja, a MESMA cor do texto normal, sobre um fundo quase igual
ao do cartao. O realce existia e nao se via.
O sinal tem de estar na COR DA LETRA, nao so' no fundo.
`box-decoration-break:clone` porque a frase realcada quebra de
linha, e sem isto a caixa fica aberta no fim da primeira linha. */
.realce{
background:var(--brass-wash);
background:color-mix(in srgb, var(--warn) 18%, transparent);
color:var(--warn);
padding:1px 5px;border-radius:3px;font-weight:500;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
@media (max-width:520px){.post__titulo{font-size:17px}}
.post__foot{
display:flex;align-items:center;gap:14px;margin-top:12px;
padding-top:11px;border-top:1px solid var(--line-soft);flex-wrap:wrap;
}
.act{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;padding:4px 0}
.act svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.num,.act__n{font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums}
/* =============================================================
FORMULÁRIOS — as telas de conta
============================================================= */
.conta{
min-height:100dvh;display:flex;flex-direction:column;
align-items:center;justify-content:center;
padding:24px 18px calc(24px + env(safe-area-inset-bottom));
}
.conta__caixa{width:100%;max-width:400px}
.conta__marca{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:26px}
.conta h1{
font-family:var(--font-display);font-weight:400;
font-size:clamp(26px,7vw,34px);color:var(--ink);
line-height:1.15;margin:0 0 6px;text-align:center;
}
.conta__sub{color:var(--muted);font-size:14px;text-align:center;margin:0 0 24px}
.campo{margin-bottom:16px}
.campo label{
display:block;font-size:13px;font-weight:500;
color:var(--ink);margin-bottom:6px;
}
.campo input{
width:100%;
background:var(--surface);border:1px solid var(--line);border-radius:10px;
padding:13px 14px;
color:var(--text);font:inherit;
font-size:16px; /* nunca menos: o iOS dá zoom */
min-height:48px;
outline:none;
}
.campo input:focus{border-color:var(--brass)}
.campo input::placeholder{color:var(--faint)}
.campo__dica{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.campo__erro{font-size:13px;color:var(--live);margin-top:6px}
/* o olho de mostrar a senha */
.senha{position:relative}
.senha input{padding-right:52px}
.senha__olho{
position:absolute;right:4px;top:50%;transform:translateY(-50%);
width:44px;height:44px;display:grid;place-items:center;
color:var(--muted);border-radius:9px;
}
.senha__olho:hover{color:var(--ink);background:var(--surface-2)}
.senha__olho svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
/* força da senha: informa, não impede */
.forca{display:flex;gap:4px;margin-top:8px}
.forca span{flex:1;height:4px;border-radius:2px;background:var(--surface-3)}
.forca[data-nivel="1"] span:nth-child(1){background:var(--live)}
.forca[data-nivel="2"] span:nth-child(-n+2){background:var(--warn)}
.forca[data-nivel="3"] span:nth-child(-n+3){background:var(--online)}
.forca[data-nivel="4"] span{background:var(--online)}
.btn{
display:flex;align-items:center;justify-content:center;gap:8px;
background:var(--brass-ink);color:var(--surface);
padding:13px 18px;border-radius:10px;
font-weight:600;font-size:15px;min-height:48px;width:100%;
transition:filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--fora{
background:var(--surface);color:var(--ink);
border:1px solid var(--line);
}
.btn--fora:hover{border-color:var(--brass)}
.btn svg{width:19px;height:19px;flex:none}
.ou{
display:flex;align-items:center;gap:12px;
margin:20px 0;color:var(--faint);
font-family:var(--font-mono);font-size:11px;
letter-spacing:.1em;text-transform:uppercase;
}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--line)}
/* Google e Facebook lado a lado: um embaixo do outro come uma
tela inteira no celular, e eles são a segunda opção. */
.social{display:flex;gap:10px}
.social .btn{
flex:1;min-width:0;
padding-left:10px;padding-right:10px;
font-size:14px;gap:7px;
}
.social .btn svg{width:18px;height:18px}
/* Em tela muito estreita o texto encolhe, mas continuam lado a
lado — o ícone já diz qual é qual. */
@media (max-width:359px){
.social .btn{font-size:13px;gap:5px}
}
.conta__pe{
text-align:center;margin-top:22px;
font-size:14px;color:var(--muted);line-height:1.6;
}
/* avisos */
.aviso{
display:flex;gap:10px;align-items:flex-start;
padding:12px 13px;border-radius:10px;
font-size:13.5px;line-height:1.5;margin-bottom:18px;
}
.aviso svg{width:18px;height:18px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:1.8}
.aviso--erro{background:var(--live);color:#fff}
.aviso--ok{background:var(--brass-wash);color:var(--brass-ink)}
.aviso--nota{background:var(--surface-2);color:var(--muted);border:1px solid var(--line-soft)}
/* =============================================================
TABLET — a partir de 768px o menu lateral cabe
============================================================= */
@media (min-width:768px){
body{font-size:14px}
.abrir-espacos{display:none}
.tabbar{display:none}
/* A PÁGINA não rola. Rola o feed, por dentro — igual a um
aplicativo. Era isto que fazia o menu lateral "acabar" no
meio e a barra de rolagem continuar descendo.
A classe vem da própria página (czl_cabecalho), em vez de
adivinhar pelo conteúdo. */
body.app-fixo{overflow:hidden}
body.app-fixo .app{height:100dvh;overflow:hidden}
body.app-fixo .shell{flex:1;min-height:0;overflow:hidden}
body.app-fixo .stage{min-height:0}
.topbar{padding:0 20px;height:60px;padding-top:env(safe-area-inset-top)}
.brand__name{font-size:20px}
.marca{font-size:21px}
/* Menu estreito e compacto: ele é para navegar, não para ler. */
/* A COLUNA UNICA.
Mais larga do que era (206px) porque agora carrega o ranking
e quem esta online, e nome de pessoa nao cabe em 206. */
/* A COLUNA FICA PARADA.
Ela cabe inteira na tela, entao nao ha razao para acompanhar
a rolagem do mural: o que a pessoa quer alcancar — as salas,
o ranking, a Escola — fica sempre no mesmo sitio, e o polegar
aprende onde e. */
.rail{
flex:none;width:252px;
background:var(--surface);border-right:1px solid var(--line);
padding:12px 10px 24px;
/* Cola ABAIXO da barra de topo, que tambem e sticky e tem
60px. Colar em zero escondia o primeiro bloco atras dela. */
position:sticky;top:60px;align-self:flex-start;
/* ALTURA, e nao altura MAXIMA. Com max-height a coluna
acabava onde acabava o conteudo e deixava um buraco sem
fundo nem risca ate ao pe da janela. */
height:calc(100vh - 60px);overflow-y:auto;overscroll-behavior:contain;
}
.rail .pcard{margin-bottom:10px;padding:11px 12px}
.space{padding:7px 10px;min-height:0}
.space__name{font-size:13.5px}
.column{
padding:20px 24px 40px;max-width:720px;margin:0 auto;
overflow-y:auto;overscroll-behavior:contain;
}
.post{padding:16px 18px;margin-bottom:14px}
.post__body{font-size:14.5px}
.campo input{font-size:14px;min-height:44px}
.btn{font-size:14px;min-height:44px}
}
/* =============================================================
DESKTOP — a partir de 1180px entra o painel da direita
============================================================= */
@media (min-width:1180px){
.panel{
flex:none;width:314px;
border-left:1px solid var(--line);background:var(--surface);
overflow-y:auto;padding:20px 18px 50px;
}
.stage{flex-direction:row}
}
/* =============================================================
ABAIXO DE 1180px o painel da direita NAO some: ele desce para
debaixo do feed.
A maioria dos membros entra pelo celular. Se a Trilha, o
Ranking e a Proxima aula so existissem no computador, a parte
que traz a pessoa de volta nao existiria para quase ninguem.
Por isso a pagina volta a rolar inteira aqui: o feed deixa de
ter rolagem propria e o painel entra como continuacao dele.
============================================================= */
@media (max-width:1179px){
body.app-fixo{overflow:auto}
body.app-fixo .app{height:auto;overflow:visible}
body.app-fixo .shell{overflow:visible}
.column{overflow:visible}
.panel{
flex:none;width:auto;max-width:720px;margin:0 auto;
border-left:0;background:transparent;
padding:0 24px 40px;
}
.panel .pcard{margin-bottom:14px}
}
@media (max-width:767px){
.rail{display:none}
.panel{padding:0 14px calc(74px + env(safe-area-inset-bottom))}
/* A trilha mora no menu lateral, que some no celular.
Uma copia dela abre o feed, antes de tudo. */
.trilha--movel{margin:0 0 16px}
}
/* No computador e no tablet a copia nao aparece: a trilha do
menu lateral ja esta la. Tem de ser min-width, e nao uma
regra solta: solta, ela vem depois no arquivo e apaga a
regra do celular que acabou de a mostrar. */
@media (min-width:768px){
.trilha--movel{display:none}
}
/* ==============================================================
Peças do protótipo aprovado: trilha, painel direito, post
trancado, enquete, pontos. CSS igual ao do protótipo.
============================================================== */
.trilha{margin:26px 8px 8px;padding:14px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius)}
.trilha__label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.trilha__top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.trilha__next{font-family:var(--font-display);font-size:19px;color:var(--ink);line-height:1.15}
.trilha__pts{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.bar span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brass-ink),var(--brass))}
.hint{margin-top:9px;font-size:11.5px;color:var(--muted);line-height:1.45}
.hint{margin-top:9px;font-size:11.5px;color:var(--muted);line-height:1.45}
.pcard{padding:15px;margin-bottom:16px}
.pcard__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.live-dot{display:inline-flex;align-items:center;gap:6px;color:var(--live);font-weight:600}
.live-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.next{font-family:var(--font-display);font-size:23px;color:var(--ink);line-height:1.22;margin-bottom:5px}
.next__when{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.count{display:flex;gap:7px;margin:14px 0}
.count__u{flex:1;text-align:center;background:var(--surface-2);border-radius:9px;padding:8px 4px}
.count__n{font-family:var(--font-mono);font-size:19px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.count__l{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-top:4px}
.count__l{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-top:4px}
.rank{display:flex;flex-direction:column;gap:2px}
.rank__row{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:8px}
.rank__row:hover{background:var(--surface-2)}
.rank__pos{font-family:var(--font-mono);font-size:11px;color:var(--faint);width:16px;text-align:right;font-variant-numeric:tabular-nums}
.rank__row:nth-child(1) .rank__pos{color:var(--brass);font-weight:600}
.rank__name{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
/* ---- A CLASSIFICAÇÃO FECHADA (01/10/2026) ----
O recado no lugar do placar: fala na primeira pessoa, por isso
tem a cor do texto e não a de uma nota de rodapé. */
.rank__recado{
margin:8px 2px 2px;padding:10px 12px;
border-radius:10px;background:var(--surface-2);
font-size:12.5px;line-height:1.5;color:var(--text);
}
/* O quadro da equipe: fechado, e abre num clique. Ele mostra a
comunidade na aula — o placar não pode estar aberto por
acidente em cima do projetor. */
.rank__fold{margin:0 0 4px}
.rank__fold>summary{
cursor:pointer;user-select:none;list-style:none;
padding:7px 2px;font-size:12px;color:var(--muted);
}
.rank__fold>summary::-webkit-details-marker{display:none}
.rank__fold>summary::before{content:"▸ ";color:var(--brass)}
.rank__fold[open]>summary::before{content:"▾ "}
/* 100 linhas não cabem no menu: rolam dentro do próprio quadro,
sem levar o menu todo atrás. */
.rank__rola{max-height:min(52vh,460px);overflow-y:auto;overscroll-behavior:contain}
.rank__pts{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.prize{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--brass-wash);color:var(--brass);font-size:11.5px;line-height:1.4}
.prize{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--brass-wash);color:var(--brass);font-size:11.5px;line-height:1.4}
.locked{position:relative;padding:0;overflow:hidden}
.locked__blur{padding:16px 18px;filter:blur(4.5px);opacity:.5;pointer-events:none;user-select:none}
.locked__over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:20px;background:linear-gradient(180deg,transparent,var(--surface) 42%)}
.locked__title{font-family:var(--font-display);font-size:22px;color:var(--ink);line-height:1.2}
.locked__sub{font-size:12.5px;color:var(--muted);max-width:300px}
.locked__sub{font-size:12.5px;color:var(--muted);max-width:300px}
.poll{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.poll__row{position:relative;border:1px solid var(--line);border-radius:8px;padding:8px 11px;overflow:hidden;font-size:13px}
.poll__fill{position:absolute;inset:0 auto 0 0;background:var(--surface-2)}
.poll__row span{position:relative}
.poll__pct{position:absolute;right:11px;top:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.poll__pct{position:absolute;right:11px;top:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.online-grid{display:flex;flex-wrap:wrap;gap:7px}
.online-grid .avatar{width:32px;height:32px;font-size:11px}
.more-n{width:32px;height:32px;border-radius:50%;background:var(--surface-2);border:1px dashed var(--line);display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.more-n{width:32px;height:32px;border-radius:50%;background:var(--surface-2);border:1px dashed var(--line);display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.nav{display:flex;gap:2px}
.nav button{
padding:7px 12px;border-radius:8px;color:var(--muted);font-weight:500;font-size:13px;white-space:nowrap;
transition:background .15s,color .15s;
}
.nav button:hover{color:var(--ink);background:var(--surface-2)}
.nav button[aria-selected="true"]{background:var(--surface-3);color:var(--ink)}
.nav button[aria-selected="true"]{background:var(--surface-3);color:var(--ink)}
.me{display:flex;align-items:center;gap:10px}
.me__meta{text-align:right;line-height:1.25}
.me__name{font-weight:600;color:var(--ink);font-size:13px}
.me__lvl{font-family:var(--font-mono);font-size:10.5px;color:var(--brass);letter-spacing:.04em}
.me__lvl--fundador{font-weight:600;letter-spacing:.13em}
.chip{font-size:12px;color:var(--muted);padding:5px 10px;border-radius:7px;border:1px solid var(--line);transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--brass);color:var(--brass)}
.chip:hover{border-color:var(--brass);color:var(--brass)}
/* Encostado na borda de fora, nao dentro do circulo: em cima
de uma foto o ponto sumia contra a roupa da pessoa. */
.avatar[data-online]::after{
content:"";position:absolute;right:-3px;bottom:-3px;
width:12px;height:12px;border-radius:50%;
border:2.5px solid var(--surface);z-index:2;
}
.avatar[data-online="1"]::after{background:var(--online)}
.avatar[data-online="away"]::after{background:var(--warn)}
/* ---- peças que faltavam para o layout do protótipo ---- */
.column--feed{max-width:720px;margin:0 auto}
.composer{padding:14px 16px;margin-bottom:22px}
.composer__row{display:flex;gap:12px;align-items:flex-start}
.composer textarea{
flex:1;min-width:0;background:none;border:0;outline:none;resize:none;
color:var(--text);font:inherit;font-size:16px;min-height:44px;padding-top:9px;
}
.composer textarea::placeholder{color:var(--faint)}
.composer__foot{
display:flex;align-items:center;gap:10px;margin-top:10px;
padding-top:11px;border-top:1px solid var(--line-soft);
}
.composer__onde{font-size:12.5px;color:var(--muted)}
.composer__onde strong{color:var(--ink)}
.warn-link{
display:none;align-items:flex-start;gap:9px;margin-top:10px;
padding:9px 11px;border-radius:9px;background:var(--brass-wash);
font-size:12.5px;color:var(--brass);line-height:1.45;
}
.warn-link.is-on{display:flex;animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.space__cadeado{width:15px;height:15px;flex:none;color:var(--faint)}
.space{text-decoration:none}
.act{text-decoration:none}
.post__acao{flex:none;display:flex}
.btn--mini{width:auto;flex:none;padding:0 18px;font-size:14px;min-height:44px}
.vazio{padding:30px 20px;text-align:center}
.vazio__titulo{font-family:var(--font-display);font-size:21px;color:var(--ink)}
.vazio__sub{color:var(--muted);font-size:13.5px;margin:8px auto 0;max-width:34ch;line-height:1.55}
/* topo: abas, busca e o bloco "eu" — só a partir do tablet */
.nav,.search,.me{display:none}
@media (min-width:900px){
.nav{display:flex;gap:2px}
.nav a{
padding:7px 12px;border-radius:8px;color:var(--muted);
font-weight:500;font-size:13px;white-space:nowrap;text-decoration:none;
}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-selected="true"]{background:var(--surface-3);color:var(--ink)}
.search{
display:flex;align-items:center;gap:8px;background:var(--surface-2);
border:1px solid var(--line-soft);border-radius:9px;padding:7px 11px;
width:200px;color:var(--faint);
}
.search input{background:none;border:0;outline:none;color:var(--text);font:inherit;width:100%}
.me{display:flex;align-items:center;gap:10px}
.me__meta{text-align:right;line-height:1.25}
.me__name{font-weight:600;color:var(--ink);font-size:13px}
}
/* =============================================================
CORRECOES E PECAS NOVAS — 01/09
-------------------------------------------------------------
Ficam no fim de proposito: em CSS, com a mesma especificidade,
vence a ultima regra. Assim estas correcoes valem sem mexer
nas regras originais mais acima.
============================================================= */
/* 1. A GRELHA DE EMOJI NASCE FECHADA.
O [hidden] do navegador e display:none, mas uma regra de
CLASSE (.emojis{display:grid}) ganha dele por especificidade —
era por isso que ela aparecia aberta ao carregar a pagina. */
.emojis[hidden]{display:none!important}
/* 2. O PONTO DE ONLINE FICA FORA DA FOTO.
O circulo tinha overflow:hidden e cortava o ponto. O recorte
redondo passa para a IMAGEM; o ponto assenta encostado por
fora, que e onde se le num relance sem se perder contra a
roupa da pessoa. */
.avatar--foto{overflow:visible}
.avatar--foto img{border-radius:50%}
.avatar[data-online]::after{right:-3px;bottom:-3px;width:12px;height:12px;z-index:2}
/* 3. MENU (...) DE CADA PUBLICACAO */
.post__head{position:relative}
.menu{position:relative;flex:none;margin-left:auto}
.menu__abrir{
display:grid;place-items:center;width:36px;height:36px;
border-radius:9px;color:var(--faint);
}
.menu__abrir:hover{background:var(--surface-2);color:var(--ink)}
.menu__abrir svg{width:18px;height:18px}
.menu__folha{
position:absolute;right:0;top:40px;z-index:20;
min-width:216px;padding:6px;
background:var(--surface);border:1px solid var(--line);
border-radius:12px;box-shadow:var(--shadow);
}
.menu__folha[hidden]{display:none}
.menu__folha form{display:block}
.menu__item{
display:flex;align-items:center;gap:11px;width:100%;
padding:11px 12px;border-radius:9px;min-height:44px;
color:var(--text);font-size:14px;text-align:left;
}
.menu__item:hover{background:var(--surface-2)}
.menu__item svg{width:17px;height:17px;flex:none;color:var(--faint)}
.menu__item--perigo{color:var(--live)}
.menu__item--perigo svg{color:var(--live)}
/* 4. RODAPE DA PUBLICACAO: contagem em cima, acoes embaixo.
Botao largo com o nome escrito acerta no celular; icone
sozinho, nao — e o dedo nao tem mira de rato. */
/* A LINHA DA PRE-MATRICULA no menu (01/10/2026): o simbolo do
WhatsApp no lugar do ponto das aulas, no verde dele. E' a cor
que diz o que esta' do outro lado, antes de a pessoa ler. */
.space--pm .space__zap{
display:grid;place-items:center;width:17px;height:17px;flex:none;color:#25D366;
}
.space--pm .space__zap svg{width:17px;height:17px;display:block}
.space--pm .space__name{font-weight:600}
.post__conta{
display:flex;align-items:center;gap:8px;
margin-top:12px;padding-top:11px;
border-top:1px solid var(--line-soft);
font-size:12.5px;color:var(--muted);
}
/* A conta dos comentarios passou a BOTAO em 20/09/2026: abre a
conversa para quem so' quer LER. Aqui so' se lhe tira a cara de
botao — nao se lhe da' cara nova.
O alvo cresce pelo padding (o dedo nao tem mira de rato), e a
margem negativa devolve exactamente o que o padding tirou: a
altura da linha nao muda em publicacao nenhuma das tres casas. */
.conta-c{
appearance:none;-webkit-appearance:none;
background:none;border:0;border-radius:8px;
padding:6px 4px;margin:-6px -4px;
font:inherit;line-height:inherit;color:inherit;cursor:pointer;
}
.conta-c:hover{color:var(--ink);text-decoration:underline}
.conta-c:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.post__foot{gap:8px}
.acao-larga{flex:1;display:flex;min-width:0}
.grande{
flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;min-height:44px;padding:10px 12px;
border:1px solid var(--line-soft);border-radius:10px;
background:var(--surface-2);color:var(--muted);
font-size:13.5px;font-weight:500;text-decoration:none;
white-space:nowrap;
}
.grande:hover{border-color:var(--brass);color:var(--ink)}
.grande svg{width:17px;height:17px;flex:none}
@media (max-width:420px){
.grande{font-size:12.5px;gap:6px;padding:10px 6px}
.grande svg{width:16px;height:16px}
}
/* 5. MARCAR TODOS no compositor (so a equipa ve) */
.marca-todos{
display:inline-flex;align-items:center;gap:7px;cursor:pointer;
font-size:12.5px;color:var(--muted);
padding:8px 10px;border-radius:9px;min-height:44px;
border:1px solid var(--line-soft);
}
.marca-todos:hover{border-color:var(--brass);color:var(--ink)}
.marca-todos input{width:16px;height:16px;accent-color:var(--brass)}
/* =============================================================
MARCAR ALGUÉM, AGENDAR, DATA E HORA, BANIR
-------------------------------------------------------------
Acrescentado depois. Fica no fim de propósito: quem abrir este
arquivo daqui a um ano lê a folha original inteira e só
depois o que veio por cima.
============================================================= */
/* ---- a lista que abre no @ ----
Sobe por cima do feed, presa ao campo de escrever. Largura
toda no celular: lista estreita com nome e apelido lado a
lado corta o nome de quase toda a gente. */
.composer__campo{position:relative;flex:1;min-width:0}
.composer__campo textarea{width:100%}
.mencoes{
position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
background:var(--surface-2);border:1px solid var(--line);
border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);
max-height:280px;overflow-y:auto;padding:6px;
-webkit-overflow-scrolling:touch;
}
.mencoes[hidden]{display:none}
.mencoes__um{
display:flex;align-items:center;gap:10px;width:100%;
padding:9px 10px;border-radius:10px;text-align:left;
background:none;border:0;color:var(--ink);font:inherit;cursor:pointer;
min-height:48px; /* dedo, não rato */
}
.mencoes__um:hover,.mencoes__um.is-on{background:var(--surface-3)}
.mencoes__foto{
width:34px;height:34px;flex:none;border-radius:50%;
display:grid;place-items:center;overflow:hidden;
background:var(--surface-3);color:var(--muted);
font-size:12px;font-weight:600;letter-spacing:.02em;
}
.mencoes__foto img{width:100%;height:100%;object-fit:cover;display:block}
.mencoes__meio{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mencoes__nome{
font-size:14px;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mencoes__ap{font-size:12px;color:var(--faint)}
/* O @todos tem cor de aviso, não de membro. Não é uma pessoa
que se marca — é a comunidade inteira a ser acordada. */
.mencoes__um--todos .mencoes__foto{
background:var(--brass-wash);color:var(--brass);font-size:16px;
}
.mencoes__um--todos .mencoes__nome{color:var(--brass)}
.mencoes__um--todos .metal--todos{
background:var(--brass-wash);color:var(--brass);
border:1px solid rgba(197,164,106,.35);
}
/* ---- a menção dentro do texto do post ---- */
.mencao{color:var(--brass-ink);font-weight:500}
.mencao--todos{
color:var(--brass);font-weight:600;
background:var(--brass-wash);border-radius:5px;padding:0 4px;
}
/* ---- agendar ---- */
.agendar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:12px 14px;margin:10px 0 0;
background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
}
.agendar[hidden]{display:none}
.agendar__rot{font-size:13px;color:var(--muted);flex:none}
.agendar input[type="datetime-local"]{
background:var(--surface);border:1px solid var(--line);border-radius:10px;
padding:10px 12px;color:var(--ink);font:inherit;font-size:16px;
min-height:44px;outline:none;
color-scheme:light dark; /* o calendário do navegador segue o tema */
}
.agendar input[type="datetime-local"]:focus{border-color:var(--brass)}
.agendar__nota{
flex-basis:100%;font-size:12.5px;color:var(--faint);line-height:1.45;
}
/* ---- a etiqueta do post agendado ---- */
.post__agenda{
display:inline-flex;align-items:center;gap:7px;margin-top:7px;
padding:5px 10px;border-radius:999px;
background:var(--brass-wash);color:var(--brass);
font-size:12px;line-height:1.3;
}
.post__agenda svg{width:14px;height:14px;flex:none}
.post__agenda time{color:inherit;font-weight:600}
/* ---- a hora ----
Sem sublinhado nem cursor de ajuda: é informação, não um
link. O title com o "há 3 h" está lá para quem parar em cima. */
time.quando{color:inherit;font:inherit;text-decoration:none}
/* ---- o traço antes do Banir ----
Existe para o dedo não escorregar do "Parar de seguir" para a
única acção deste menu que expulsa uma pessoa. */
.menu__risca{height:1px;background:var(--line);margin:6px 8px}
/* ---- o aviso ao editar o post de outra pessoa ---- */
.editar__aviso{
padding:10px 12px;margin:0 0 10px;border-radius:10px;
background:var(--brass-wash);color:var(--brass);
font-size:13px;line-height:1.5;
}
.editar__aviso strong{color:var(--brass)}
/* A caixa fixa "Marcar todos" saiu do compositor: caixa fixa
fica ali a convidar ao clique, e um dia avisa cinquenta mil
pessoas por engano. Quem quer avisar toda a gente escreve
@todos — que é um gesto deliberado e fica escrito no post.
Esta linha é a rede de segurança: se alguma versão antiga do
HTML ainda tiver a caixa, ela não aparece. */
.marca-todos{display:none!important}
/* -------------------------------------------------------------
O campo do WhatsApp: a bandeira em cima, o número em baixo.
Um por linha, e não lado a lado. Lado a lado num celular de
360px sobra meia dúzia de píxeis para o número — que é
justamente o campo em que a pessoa vai escrever.
------------------------------------------------------------- */
.zap{display:flex;flex-direction:column;gap:10px}
.zap__pais{
width:100%;
background:var(--surface);border:1px solid var(--line);border-radius:12px;
padding:16px;color:var(--text);font:inherit;
font-family:"Twemoji Country Flags",var(--font-ui);
font-size:17px;min-height:56px;outline:none;
-webkit-appearance:none;appearance:none;
/* a seta, desenhada aqui — sem imagem de fora */
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 20px) 25px,calc(100% - 15px) 25px;
background-size:5px 5px,5px 5px;background-repeat:no-repeat;
padding-right:44px;
}
.zap__pais:focus{border-color:var(--brass)}
/* O código do país fica DENTRO da caixa, à esquerda do número.
Assim a pessoa vê que ele já está posto e não o repete — que
é o engano mais comum neste campo. */
.zap__num{
display:flex;align-items:center;
background:var(--surface);border:1px solid var(--line);border-radius:12px;
min-height:56px;overflow:hidden;
}
.zap__num:focus-within{border-color:var(--brass)}
.zap__ddi{
flex:none;padding:0 12px 0 16px;font-size:17px;
color:var(--brass);font-variant-numeric:tabular-nums;
}
.zap__num input{
flex:1;min-width:0;border:0;background:none;border-radius:0;
padding:16px 16px 16px 0;
}
.zap__num input:focus{border-color:transparent}
.campo__dica{color:var(--faint);font-size:13px;margin-top:8px;line-height:1.45}
/* O campo do WhatsApp aparece em duas telas — no cadastro e no
último passo de quem entrou pelo Google. Vive aqui, e não
dentro de uma delas, porque estilo que mora numa página e é
usado noutra é como uma tela nasce torta sem ninguém perceber
porquê. */
/* O ponto vermelho da "Próxima aula" quando NÃO há aula marcada.
Mesmo lugar, mesma forma, sem a pulsação — a etiqueta continua
a ancorar o topo da coluna, mas não finge urgência que não
existe. Ponto a piscar sem nada a acontecer ensina a pessoa a
ignorar o ponto para sempre, e depois ele já não serve para o
dia em que houver mesmo aula. */
.live-dot--quieto{color:var(--faint)}
.live-dot--quieto::before{background:var(--faint);animation:none}
/* =============================================================
DOIS PLANOS: GRÁTIS E OURO
============================================================= */
/* O rótulo GRÁTIS no menu de salas. Discreto de propósito: ele
está lá para o OURO logo abaixo se destacar. Se os dois
brilhassem igual, nenhum se lia como o degrau de cima. */
.metal--gratis{background:var(--surface-3);color:var(--muted)}
/* Membro sem plano pago não leva selo nenhum — czl_faixa()
devolve rótulo vazio. Esta regra apaga a caixa que sobraria:
uma etiqueta vazia com fundo e espaçamento ao lado do nome
parece um erro de carregamento. */
.metal:empty{display:none}
.me__lvl:empty{display:none}
/* A Sala dos alunos não é do plano — é de quem tem curso ativo.
Cor própria para não se confundir nem com o grátis nem com o
Ouro: quem não é aluno não compra o Ouro para lá entrar. */
.metal--alunos{background:var(--prata-wash);color:var(--prata)}
/* =============================================================
O CARD DA PRÓXIMA AULA EM DOIS SÍTIOS
-------------------------------------------------------------
No computador vive na coluna da direita; no celular, no topo
do feed. O HTML sai da mesma função — o que muda é só qual das
duas cópias esta largura de tela mostra.
============================================================= */
.pcard--movel{display:block;margin-bottom:12px}
.pcard--mesa{display:none}
@media (min-width:768px){
/* Acima de 768px há coluna da direita: é lá que o card vive,
e a cópia do topo do feed sai da frente. */
.pcard--movel{display:none}
.pcard--mesa{display:block}
}
/* =============================================================
"ONLINE AGORA" NO TOPO
-------------------------------------------------------------
Sai da coluna da direita e vem para a barra de cima, onde
aparece em todas as telas e — sobretudo — no celular, que
não tem coluna da direita nenhuma.
É a única coisa da tela que diz "há gente do outro lado". Numa
comunidade a começar, isso vale mais do que qualquer número de
pontos.
============================================================= */
.online-topo{
display:inline-flex;align-items:center;gap:6px;flex:none;
/* O mesmo canto dos outros blocos do Clube, e nao uma pilula.
Forma sozinha no meio de formas quadradas chama a atencao
por ser diferente, e nao por ser importante. */
padding:6px 11px;border-radius:9px;
background:var(--surface-2);border:1px solid var(--line);
text-decoration:none;line-height:1;
min-height:34px;
}
.online-topo:hover{border-color:var(--online)}
.online-topo__dot{
width:7px;height:7px;border-radius:50%;flex:none;
background:var(--online);
/* Pulsa devagar. É presença, não alarme — o vermelho a piscar
depressa está reservado ao "ao vivo", e dois pontos a piscar
ao mesmo ritmo tiravam a força justamente ao que importa. */
animation:respira 2.6s ease-in-out infinite;
}
@keyframes respira{0%,100%{opacity:1}50%{opacity:.35}}
.online-topo__n{
font-family:var(--font-mono);font-size:13px;font-weight:600;
color:var(--ink);font-variant-numeric:tabular-nums;
}
.online-topo__t{font-size:12px;color:var(--muted)}
@media (max-width:520px){
/* Em tela estreita fica só o ponto e o número. A palavra
"online" é a primeira coisa dispensável quando o espaço
acaba — o ponto verde já diz o que ela dizia. */
.online-topo__t{display:none}
.online-topo{padding:6px 9px}
}
/* =============================================================
OS SELOS: PROFESSOR, MODERAÇÃO, MEMBRO
-------------------------------------------------------------
Três, e uma leitura só de cima a baixo:
PROFESSOR dourado cheio — um só no Clube inteiro
MODERAÇÃO prata — quem cuida da casa
MEMBRO cinza apagado — pertence, e mais nada
NÃO HÁ SELO DE ALUNO, e não é esquecimento. Quem dá o selo
de aluno hoje é uma mão no painel, e com dez mil membros
nenhuma mão mantém isso em dia: passaria a dizer "aluno" a
quem já saiu e a calar-se sobre quem entrou ontem. Selo que
mente uma vez ensina a pessoa a ignorar todos os outros. O
selo continua a existir e a abrir a Sala dos alunos — é chave,
não etiqueta.
Nenhuma destas cores é cor de faixa (branca, verde, marrom,
preta). Isso não é acaso: é para o Clube nunca parecer que
está dando faixa a ninguém, porque faixa é da ESCOLA.
============================================================= */
/* MEMBRO é o mais apagado de todos, e tem de ser. Toda a gente o
tem, então ele não distingue ninguém — só diz "pertence aqui".
Se gritasse como o do professor, virava carimbo, e cinquenta
mil carimbos iguais são só ruído em cima do mural. */
.metal--membro{
background:transparent;color:var(--faint);
border:1px solid var(--line);
}
/* SUPORTE — as contas de equipe (a Amanda, o Gabriel).
Fundo CHEIO, e não a lavagem clara do membro: quem responde
pela casa tem de saltar à vista. Uma pessoa que abre o celular
e vê uma resposta precisa de saber, num relance, se está a
falar com o Clube ou com outro membro.
Cor de cobre, e por três razões: não é o dourado do professor
(ninguém confunde o suporte com o dono), não é a prata da
moderação (que apaga e move publicação, coisa que o suporte não
faz), e não é cor de faixa — porque faixa é da ESCOLA. */
.metal--suporte{
/* Branco com letra preta, como o sócio pediu. Lê-se de longe —
que é o que o atendimento precisa — e não disputa com o
dourado do professor, porque não tem o brilho nem a moldura
dele.
A ordem da tela é: PROFESSOR, depois moderação, depois
suporte, depois membro. Já esteve ao contrário uma vez, com o
suporte a gritar mais alto que o dono da casa. */
background:var(--ink);color:var(--ground);
font-weight:600;letter-spacing:.06em;
}
/* =============================================================
O CARTÃO DA ESCOLA
-------------------------------------------------------------
Não é sala: é destino. Por isso não usa .space — tem moldura
dourada, ocupa mais altura e não entra na lista com bolinha.
Quem desce o menu bate nele no fim, depois de já ter visto
onde se conversa.
============================================================= */
/* O CARTÃO DA ESCOLA: uma linha só.
Estava com rótulo, nome e subtítulo — três linhas num menu de
quatro itens, e chamava mais atenção que as salas onde a
comunidade vive. O menu é para navegar; o convite inteiro está
na página, que é onde ele tem espaço para respirar.
Continua com moldura dourada porque não é sala: é destino. */
.escola-card{
display:flex;align-items:center;gap:8px;
margin:14px 0 4px;padding:11px 12px;
border-radius:11px;text-decoration:none;
background:var(--brass-wash);
border:1px solid var(--brass);
min-height:44px;
}
.escola-card:hover{background:var(--surface-3);border-color:var(--brass-ink)}
.escola-card__nome{
flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--brass);
line-height:1.25;
}
.escola-card__seta{width:16px;height:16px;flex:none;color:var(--brass)}
/* A caixa de aceitar as regras. Vive aqui porque aparece em duas
telas — o cadastro e o último passo de quem entrou pelo Google.
Estilo que mora numa página e é usado noutra é como uma tela
nasce torta sem ninguém perceber porquê.
O rótulo inteiro é clicável e a linha tem 44px: no celular,
acertar numa caixinha de 16px é o detalhe que faz a pessoa
desistir no último passo. */
.aceite{
display:flex;gap:11px;align-items:flex-start;
padding:14px 0 2px;cursor:pointer;min-height:44px;
}
.aceite input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--brass)}
.aceite span{font-size:13.5px;color:var(--muted);line-height:1.5}
.aceite a{color:var(--brass)}
/* =============================================================
OS BLOCOS DA COLUNA, MAIS BAIXOS
-------------------------------------------------------------
Numa coluna única, altura é o recurso escasso: cada bloco alto
empurra o seguinte para fora da vista. O que interessa é que
todos caibam sem rolar — não que cada um seja bonito sozinho.
============================================================= */
/* "Ainda sem data" numa linha. Estava "A próxima aula está sendo
marcada" — três linhas de tipo grande para dizer que não há
nada marcado. */
.next--curto{font-size:19px;line-height:1.25}
.trilha--curta{padding:12px 13px}
.trilha--curta .trilha__next{
font-family:var(--font-ui);font-size:13.5px;font-weight:600;
color:var(--ink);line-height:1.35;margin:0 0 9px;
}
.trilha--curta .bar{margin:0}
.trilha__pe{
display:flex;justify-content:space-between;gap:8px;margin-top:7px;
font-family:var(--font-mono);font-size:10.5px;color:var(--faint);
}
/* =============================================================
A FAIXA DA PRÓXIMA AULA
-------------------------------------------------------------
Uma linha, no topo do mural. Estava um cartão no menu lateral e
ali não fazia nada — menu é para navegar, e ninguém navega
para uma data.
Estreita de propósito: cartão alto no topo empurra o primeiro
post para fora da tela, e é o post que faz a pessoa ficar.
============================================================= */
.aulafaixa{
display:flex;flex-direction:column;gap:2px;
padding:8px 13px 9px;margin-bottom:12px;
background:var(--surface);border:1px solid var(--brass);
border-radius:var(--radius);
}
.aulafaixa--vazia{border-color:var(--line)}
/* Linha de cima: rótulo e data, pequenos e na mesma altura. */
.aulafaixa__topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aulafaixa__ponto{
width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint);
}
/* Vermelho a pulsar SÓ quando está no ar. Ponto que pisca sem
nada a acontecer ensina a pessoa a ignorá-lo para sempre. */
.aulafaixa__ponto--vivo{background:var(--live);animation:pulse 1.8s infinite}
.aulafaixa__rot{
font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--brass);
}
.aulafaixa__q{font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.aulafaixa__q time{color:inherit}
/* Linha de baixo: o título e o botão, lado a lado. */
/* O BOTAO SOBE PARA A LINHA DO TITULO.
Ele era mais alto do que o texto ao lado e era ele — nao o
conteudo — que mandava na altura da faixa. Com a altura livre
e o alinhamento pela linha de base do titulo, a faixa encolhe
sozinha e as duas coisas leem-se como uma frase so. */
.aulafaixa__baixo{display:flex;align-items:center;gap:12px;min-height:0}
.aulafaixa__t{
flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);
line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aulafaixa__t--fraco{font-weight:400;color:var(--muted)}
.aulafaixa__form{flex:none}
.aulafaixa__btn{
display:inline-flex;align-items:center;gap:6px;flex:none;
padding:4px 11px;border-radius:7px;min-height:0;
border:1px solid var(--brass);background:transparent;
color:var(--brass);font:inherit;font-size:11.5px;font-weight:600;
line-height:1.5;
cursor:pointer;text-decoration:none;white-space:nowrap;
}
.aulafaixa__btn:hover{background:var(--brass-wash)}
.aulafaixa__btn svg{width:13px;height:13px}
/* Já avisado: apaga. O botão cumpriu o trabalho e não tem de
continuar a chamar. */
.aulafaixa__btn--on{border-color:var(--line);color:var(--muted)}
.aulafaixa__btn--vivo{background:var(--live);border-color:var(--live);color:#fff}
/* =============================================================
A COLUNA, ENXUTA
-------------------------------------------------------------
Tudo cabe sem rolar. Cada bloco perdeu altura para o seguinte
caber — numa coluna parada, altura é o recurso escasso.
============================================================= */
/* Online agora: o número grande e poucos rostos. A lista inteira
de quem está online não interessa a ninguém; o que interessa é
ter gente. */
.rail .pcard .online-grid{gap:5px;margin-top:8px}
.rail .pcard .online-grid .avatar{width:26px;height:26px;font-size:9px}
.rail .pcard .online-grid .avatar:nth-child(n+7){display:none}
/* Ranking: cinco linhas, curtas. */
.rail .rank{gap:6px}
.rail .rank__row{gap:7px}
.rail .rank__name{font-size:12.5px}
.rail .rank__pts{font-size:11px}
.rail .avatar--sm{width:22px;height:22px;font-size:8.5px}
.rail .prize{margin-top:8px;padding:6px 9px;font-size:9.6px;letter-spacing:-.005em}
/* Recompensas: duas linhas e a barra. Sem rótulo em cima — o
texto já diz o que é. */
.trilha--curta{padding:10px 12px;margin:0 0 10px}
.trilha--curta .trilha__label{display:none}
.trilha--curta .trilha__next{
font-family:var(--font-ui);font-size:12.5px;font-weight:600;
color:var(--ink);line-height:1.35;margin:0 0 7px;
}
/* A COPIA DO CELULAR SEGUE O MESMO CORTE.
No celular a trilha e uma copia do bloco do menu lateral, e
estava a herdar o formato antigo: rotulo, titulo grande e
muito ar. Ocupava meia tela antes do primeiro post — e o
primeiro post e o que faz a pessoa ficar. */
.trilha--movel{padding:11px 13px}
.trilha--movel .trilha__label{display:none}
.trilha--movel .trilha__next{
font-family:var(--font-ui);font-size:13.5px;font-weight:600;
color:var(--ink);line-height:1.35;margin:0 0 8px;
}
.trilha--movel .hint{margin-top:7px;font-size:11.5px}
/* A GAVETA USA AS MESMAS PECAS ENXUTAS DA COLUNA.
O conteudo dela e uma copia do menu lateral, mas as regras
compactas estavam presas a `.rail` e nao a acompanhavam: no
celular os blocos voltavam ao tamanho antigo. */
.gaveta__folha .pcard{margin-bottom:10px;padding:11px 12px}
.gaveta__folha .online-grid{gap:5px;margin-top:8px}
.gaveta__folha .online-grid .avatar{width:26px;height:26px;font-size:9px}
.gaveta__folha .rank{gap:6px}
.gaveta__folha .rank__row{gap:7px}
.gaveta__folha .rank__name{font-size:12.5px}
.gaveta__folha .avatar--sm{width:22px;height:22px;font-size:8.5px}
.gaveta__folha .trilha--curta{margin:0 0 10px}
/* =============================================================
A COLUNA: TITULOS, NAO CAIXAS
-------------------------------------------------------------
Tinha tres molduras empilhadas — online, placar, recompensas —
e tres molduras seguidas leem-se como tres blocos de peso
igual, quando duas delas sao apenas listas. Agora cada lista
tem o seu titulo e nada a volta. A moldura ficou so para a
Escola, que e a unica coisa aqui que nao e lista: e destino.
============================================================= */
/* O titulo que segura cada lista. Sem ele as abas ficavam
soltas, penduradas no nada no alto da coluna. */
.rail__titulo{
display:flex;align-items:baseline;justify-content:space-between;gap:8px;
margin:16px 4px 7px;
font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--faint);
}
.rail__titulo:first-child{margin-top:4px}
.rail__titulo .num{font-size:9px;color:var(--faint);letter-spacing:.1em}
.rail__titulo--selo{display:block;margin-bottom:6px}
.rail__vazio{margin:0 4px;font-size:11.5px;color:var(--muted)}
/* Online: uma linha. A grelha de retratos ocupava um bloco
inteiro para dizer um numero — e numa comunidade de dez mil,
ver seis caras ao acaso nao diz nada a ninguem. O que diz e
que ha gente acordada do outro lado. */
.online-linha{
display:flex;align-items:center;gap:7px;
margin:2px 4px 4px;padding:0;
font-size:12.5px;color:var(--muted);
}
.online-linha strong{color:var(--ink);font-variant-numeric:tabular-nums}
.online-linha__ponto{
width:6px;height:6px;border-radius:50%;flex:none;background:var(--faint);
}
.online-linha__ponto--vivo{background:var(--online,#3fbf7f)}
.online-linha__zero{font-size:12px}
/* O placar, agora solto na coluna. */
.rail .rank{margin:0 2px}
.rail .prize{margin:9px 0 0}
/* A Escola: a unica caixa. */
.rail .escola-card{margin-top:18px}
/* =============================================================
A HIERARQUIA ESTAVA AO CONTRARIO
-------------------------------------------------------------
O titulo era pequeno, fraco e cinzento; o item por baixo era
grande e claro. Quem le de cima para baixo ve primeiro o item
e so depois percebe que havia um titulo — que e exactamente o
contrario do trabalho de um titulo.
Agora manda o titulo, e a lista responde.
============================================================= */
.rail__titulo{
font-family:var(--font-ui);font-size:12px;font-weight:700;
letter-spacing:.06em;color:var(--ink);
margin:18px 6px 8px;
}
.rail__titulo:first-child{margin-top:4px}
.rail__titulo .num{
font-family:var(--font-mono);font-size:9px;font-weight:400;
letter-spacing:.1em;color:var(--faint);
}
/* A lista fala baixo. */
.rail .space__name{font-weight:400;font-size:13.5px}
.rail .space.is-active .space__name{font-weight:600;color:var(--ink)}
.rail .rank__name{font-weight:400;font-size:12.5px;color:var(--muted)}
/* Os lugares por preencher: desenhados, mas apagados. Sao um
convite — a pessoa ve onde cabe — e nao um erro. */
.rank__row--vaga{opacity:.45}
.rank__row--vaga:hover{background:none}
.rank__vaga-foto{
width:22px;height:22px;border-radius:50%;flex:none;
border:1px dashed var(--line);
}
.rank__name--vaga{font-style:italic}
/* =============================================================
ONLINE AGORA: ROSTOS EM CIMA, LEGENDA EM BAIXO
-------------------------------------------------------------
As caras sao o que faz este bloco trabalhar — sao elas que
dizem "ha gente do outro lado". O rotulo e o numero sao a
legenda delas, e legenda vai por baixo da fotografia.
As fotos sobrepoem-se um pouco, como uma equipa numa lista:
ocupam menos largura e leem-se como um grupo, nao como uma
grelha de fichas.
============================================================= */
.online-bloco{margin:4px 6px 2px}
.online-caras{display:flex;align-items:center;padding-left:3px}
.online-caras > *{
width:30px;height:30px;flex:none;border-radius:50%;
margin-left:-7px;box-shadow:0 0 0 2px var(--surface);
font-size:10.5px;
}
.online-caras > *:first-child{margin-left:0}
.online-caras__mais{
display:flex;align-items:center;justify-content:center;
background:var(--surface-2);color:var(--muted);
font-family:var(--font-mono);font-size:10px;
}
.online-pe{display:flex;align-items:baseline;gap:8px;margin-top:9px}
.online-pe__rot{
font-family:var(--font-ui);font-size:12px;font-weight:700;
letter-spacing:.06em;color:var(--ink);
}
.online-pe__n{
font-family:var(--font-mono);font-size:11px;color:var(--faint);
font-variant-numeric:tabular-nums;
}
.online-pe__zero{font-family:var(--font-mono);font-size:10px;color:var(--faint)}
/* A BARRA DE ROLAGEM DA COLUNA NAO APARECE.
A coluna rola quando precisa, mas a barra ficava desenhada a
meio da pagina, entre a coluna e o mural, a cortar a tela ao
meio. Rolar continua a funcionar — com a roda, com o dedo,
com o teclado; o que sai e o risco. */
.rail{scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{width:0;height:0;display:none}
.gaveta__folha{scrollbar-width:none}
.gaveta__folha::-webkit-scrollbar{width:0;display:none}
/* =============================================================
QUEM ROLA E A PAGINA, NAO UMA CAIXA NO MEIO DELA
-------------------------------------------------------------
No computador o corpo estava travado (`overflow:hidden`) e o
mural rolava dentro de si proprio. Duas consequencias, as duas
feias:
1. A barra de rolagem era desenhada no fim do mural — a meio
da tela — em vez de encostada a borda da janela. Nenhum
produto premium tem um risco vertical a cortar o ecra ao
meio.
2. O mural centrava-se dentro de toda a largura que sobrava,
e num monitor largo isso abria um vao enorme entre a coluna
e o primeiro post, com outro vao igual do lado direito.
Agora rola a pagina, como em qualquer site: a barra volta para
a borda direita da janela. O menu fica onde sempre esteve —
encostado a esquerda, com o seu fundo e a sua risca — e o
mural encosta nele e cresce para a direita.
A coluna continua parada: e `position:sticky`, que funciona
com a pagina a rolar tal como funcionava com a caixa.
============================================================= */
@media (min-width:768px){
body.app-fixo{overflow:auto}
body.app-fixo .app{height:auto;overflow:visible}
body.app-fixo .shell{overflow:visible}
/* O CONJUNTO TEM LARGURA MAXIMA, COMO NAS COMUNIDADES PAGAS.
Num monitor ultrawide o mural esticava-se por toda a largura
e a linha de texto passava dos 150 caracteres — ninguem le
assim, e nenhuma comunidade premium deixa. O que elas fazem
e travar a largura do conjunto e centra-lo; o que sobra fica
de fora, repartido pelos dois lados, e nao a inchar o texto.
A conta e esta: 252 do menu + 868 do mural. O mural nao
precisa de `max-width` proprio — ele preenche exactamente o
que resta do bloco, por isso nunca ha um vao entre ele e o
menu (foi esse vao que estragou a primeira tentativa). */
/* O MENU ENCOSTA A ESQUERDA; QUEM TEM LIMITE E O MURAL.
Centrar o conjunto obrigava a pintar uma faixa ate a borda
para o menu nao ficar a flutuar — e num ultrawide essa faixa
era um retangulo cinzento vazio de meio metro. Pior do que o
problema que resolvia.
Assim e mais simples e le melhor: o menu fica onde sempre
esteve, encostado, com o seu fundo a comecar na beira da
janela; e o mural para de crescer aos 900px, que e a largura
em que a linha de texto ainda se le. O que sobra fica a
direita — o lugar onde, um dia, volta a coluna de perfil. */
.shell{align-items:flex-start}
.column,.column--feed{
margin:0;
overflow:visible;
padding:20px 24px 40px;
}
.column--feed{max-width:900px}
/* As telas SEM menu lateral — perfil, publicacao, aula —
centram-se sozinhas e mais estreitas: ali nao ha coluna a
equilibrar o peso, e um texto sozinho a 900px le mal.
O teste tem de ser a ausencia do MENU, e nao `:only-child`
do palco: o menu vive ao lado do palco, dentro do .shell, e
por isso o mural do mural-principal tambem e filho unico do
palco — a regra apanhava-o e empurrava-o para o meio, com um
vao de 400px entre ele e o menu. */
.shell:not(:has(.rail)) .column{max-width:720px;margin:0 auto}
}
/* O menu com o seu fundo, encostado a borda. */
@media (min-width:768px){
.rail{background:var(--surface)}
}
/* A FAIXA DA AULA: TEXTO A ESQUERDA, BOTAO CENTRADO A DIREITA.
O botao estava preso a linha de baixo, junto ao titulo, e por
isso assentava mais fundo do que o resto da faixa. Agora as
duas linhas de texto formam um bloco e o botao alinha pelo
meio desse bloco. */
.aulafaixa{flex-direction:row;align-items:center;gap:14px}
.aulafaixa__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.aulafaixa__acao{flex:none;display:flex;align-items:center}
.aulafaixa__baixo{display:block}
.aulafaixa__t{display:block}
@media (max-width:560px){
/* Em tela estreita o botao passa para baixo do texto: espremido
ao lado, ele encolhe ate nao caber no dedo. */
.aulafaixa{flex-direction:column;align-items:stretch;gap:9px}
.aulafaixa__acao{width:100%}
.aulafaixa__form,.aulafaixa__btn{width:100%;justify-content:center}
.aulafaixa__btn{min-height:38px}
}
/* =============================================================
A FAIXA DA AULA
-------------------------------------------------------------
Em duas linhas sobrava metade da largura por preencher — a
informacao e pouca, e pouca informacao esticada por duas
linhas le-se como uma caixa vazia. Numa linha le-se como uma
frase, e a faixa fica mais baixa por consequencia.
============================================================= */
.aulafaixa{
display:flex;flex-direction:row;flex-wrap:wrap;
align-items:baseline;gap:0 10px;
padding:9px 14px;
}
/* ALINHAR PELA LINHA DE BASE, E NAO PELO MEIO.
Sao tres tipos de letra diferentes na mesma linha: o rotulo em
mono de 9.5px, o titulo em 14px e a data em mono de 11px.
Centrados pela altura, cada um assenta num sitio — o olho ve
tres textos tortos. Pela linha de base assentam todos na mesma
linha invisivel, que e como se le uma frase.
O ponto e o botao nao sao texto: esses centram-se. */
.aulafaixa__ponto{align-self:center}
.aulafaixa__acao{flex:none;display:flex;align-items:center;align-self:center}
.aulafaixa__rot{flex:none}
.aulafaixa__t{
flex:1;min-width:0;font-size:14px;font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aulafaixa__q{flex:none;font-size:11px;color:var(--muted)}
/* 767px e o mesmo ponto onde o menu lateral vira gaveta: e a
partir dai que a tela e de celular, e a faixa tem de seguir
a mesma fronteira em vez de inventar uma sua. */
@media (max-width:767px){
/* NO CELULAR, TRES LINHAS INTEIRAS.
Espremer a mesma frase num ecra de 390px punha a data colada
ao botao e o titulo cortado a meio. Aqui a ordem de leitura
e outra: primeiro O QUE E e QUANDO — uma linha de canto, com
a data encostada a direita —, depois o titulo com a largura
toda, e por fim o botao, que ocupa a linha inteira porque e
nele que se toca.
Sem posicionamento absoluto: cada peca diz onde quer ficar
(`order`) e quanta largura ocupa (`flex-basis`). O flex
quebra as linhas sozinho. */
.aulafaixa{gap:7px 8px;padding:11px 13px}
.aulafaixa__ponto{order:0}
.aulafaixa__rot{order:0}
.aulafaixa__q{order:1;margin-left:auto}
.aulafaixa__t{
order:2;flex-basis:100%;
white-space:normal;font-size:14.5px;line-height:1.35;
}
.aulafaixa__acao{order:3;flex-basis:100%;align-self:stretch}
.aulafaixa__form,.aulafaixa__btn{width:100%;justify-content:center}
.aulafaixa__btn{min-height:40px;font-size:12.5px}
}
/* =============================================================
TUDO CENTRADO, COMO NA COMUNIDADE DE REFERENCIA
-------------------------------------------------------------
O bloco inteiro — barra de topo, menu e mural — vive dentro da
mesma largura de 1180px, centrada. Num monitor ultrawide o
conteudo fica no meio do ecra em vez de encostado a uma
parede, e a logomarca alinha com o comeco do menu, que alinha
com o mural.
A barra de topo nao tem uma caixa interior no HTML, por isso o
alinhamento faz-se pelo padding: `max(24px, 50% - 590px)` da
exactamente a mesma margem que o `margin:0 auto` do bloco. Em
telas menores que 1180 a conta cai nos 24px de sempre.
E o MENU DEIXA DE TER MOLDURA. Com o bloco centrado, um painel
de fundo diferente no meio do ecra le-se como um cartao a
flutuar; e pintar esse fundo ate a borda da janela — ja
tentado — dava um rectangulo cinzento vazio. Na referencia o
menu nao tem moldura nenhuma: e texto sobre o mesmo fundo, e o
que o separa do mural e o espaco.
============================================================= */
@media (min-width:768px){
.topbar{
padding-left:max(24px, calc(50% - 590px));
padding-right:max(24px, calc(50% - 590px));
}
.shell{max-width:1180px;width:100%;margin:0 auto}
/* O MENU E UM PAINEL. Tem fundo proprio e risca a separa-lo do
mural — foi assim que ele o desenhou e e assim que fica.
Tirei-lhe a moldura a copiar a referencia e o resultado foi a
coluna desaparecer aos olhos dele. */
.rail{
background:var(--surface);
border-right:1px solid var(--line);
padding:14px 16px 24px;
}
/* O mural preenche o que resta do bloco: encosta ao menu e
para na borda direita dos 1180. Sem `max-width` proprio —
era ele que abria vao quando o bloco ja tinha limite. */
/* AR DOS DOIS LADOS. Tinha zerado o espacamento lateral e o
mural ficou colado a risca do menu de um lado e a beira do
bloco do outro. Um cartao encostado numa linha nao respira —
e o que separa as duas colunas e o espaco, nao a risca. */
.column,.column--feed{max-width:none;margin:0;padding:20px 28px 40px}
}
/* =============================================================
A FAIXA DA AULA, ALINHADA DE VERDADE
-------------------------------------------------------------
Medido na tela: os tres textos assentavam a 98.7px e o ponto e
o botao a 102.8px, no meio de uma caixa de 45.5px. Quatro
pixeis de diferenca — o suficiente para o olho ver duas linhas
onde devia ver uma.
A culpa era do `align-items:baseline`. Alinhar pela linha de
base junta os textos entre si, mas nao os centra na caixa: a
altura da faixa e dada pelo BOTAO, que e mais alto que o
texto, e os textos ficam encostados ao topo dessa altura.
A solucao nao e escolher entre centrar e alinhar pela base — e
fazer com que as duas coisas coincidam. Dando a mesma altura
de linha aos tres textos (20px), as caixas de linha ficam
identicas; centradas, assentam todas no mesmo eixo, e esse
eixo e o mesmo do ponto e do botao.
============================================================= */
.aulafaixa{align-items:center}
.aulafaixa__rot,
.aulafaixa__t,
.aulafaixa__q{line-height:20px;display:flex;align-items:center;height:20px}
.aulafaixa__t{display:block;line-height:20px}
/* A LINHA DAS DUAS PONTAS DA COLUNA.
A risca do lado do mural ja existia; do lado de fora nao, e a
coluna acabava a meio do nada. Com o bloco centrado, a ponta
esquerda esta a vista tanto como a direita — fechar o painel
dos dois lados e o que da o acabamento. */
@media (min-width:768px){
.rail{border-left:1px solid var(--line)}
}
/* =============================================================
IMAGEM E GIF NA PUBLICACAO
============================================================= */
/* O botao de anexar e um