/* ============================================================= 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; } /* ---- 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} .flag{ font-family: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} .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} .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. */ .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); } .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-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:7px 9px;font-size:10.5px} /* 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 4px 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